test(assistant): the attachments repository on its own, every read, write and sweep step

The repositories are held to 99 percent of their statements, and the new
attachments repository was reached only through its services' mocks.

README.md

@@ -62,7 +62,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 
 <br />
 
-Most of what follows is an addon an admin switches on or off. Lists, Costs, Documents, Collab, Vacay and Atlas ship on; Journey, Collections, MCP, AI Parsing and AirTrail ship off and are marked below.
+Most of what follows is an addon an admin switches on or off. Lists, Costs, Documents, Collab, Tours, Vacay and Atlas ship on; Journey, Collections, MCP, the AI assistant, AI Parsing, Road trip, Dawarich and AirTrail ship off and are marked below.
 
 <table>
 <tr>
@@ -70,76 +70,110 @@ Most of what follows is an addon an admin switches on or off. Lists, Costs, Docu
 
 #### 🧭 Planning
 
-- **Day plans**: drag places between days and reorder inside a day, with undo. Notes and bookings drag the same way, and a map marker drops straight onto a day
-- **Maps**: Leaflet, Mapbox GL or MapLibre GL (OpenFreeMap, no token), with clustering, photo markers and route lines. 3D buildings and terrain are Mapbox only
-- **Place search**: Google Places when a key is set (photos, ratings, opening hours), otherwise OpenStreetMap with no key
-- **Place enrichment**: descriptions, facts, hours and photo candidates from OpenStreetMap, Wikipedia, Wikidata and Wikimedia Commons
-- **POI explore**: pull OpenStreetMap POIs by category for the current viewport over Overpass
-- **Import**: shared Google Maps and Naver Maps lists, plus GPX, KML and KMZ files
-- **Export**: GPX of a trip's places and tracks, and an ICS feed per trip or across all of them
-- **Routes**: auto-sort a day (nearest neighbour then 2-opt, locked stops and hotel anchors stay put), driving, walking or cycling profiles over OSRM, then open it in Google Maps or CoMaps
-- **Public transport**: door-to-door itineraries over Transitous
-- **Weather**: 16-day forecast from Open-Meteo, no key. Dates outside that window read the archive for the same date instead
-- **Day notes**: markdown body with an icon and a colour, reordered by drag and drop or moved to another day
-- **Trip dates**: move a trip and the days re-date themselves, either dragging the bookings along or re-anchoring them. Trips also copy and archive
+- **Day plans**: drag places, notes and bookings between days with undo, or drop a map marker straight onto a day
+- **Maps**: Leaflet, Mapbox GL or MapLibre GL (OpenFreeMap, no token) with clustering, photo markers, route lines and a whole-trip route overview
+- **Places**: search the TREK Places index and OpenStreetMap with no key, or Google Places and Amap with one. Descriptions, hours and photos from Wikipedia, Wikidata and Wikimedia Commons, plus a rating and a custom image per place
+- **Explore**: nearby places by category for the map view, from the TREK Places index with Overpass as fallback
+- **Routes**: auto-sort a day (nearest neighbour then 2-opt, locked stops and hotels stay put), a travel mode per leg over OSRM or Valhalla, then open the day in Google Maps or CoMaps and a place in seven navigation apps
+- **Public transport**: door-to-door itineraries over Transitous, or Google where Transitous has no data
+- **Import and export**: Google Maps and Naver Maps lists, Google Maps directions links, GPX, KML and KMZ in; GPX and an ICS feed per trip or across all trips out
+- **Weather**: 16-day forecast from Open-Meteo, no key, and the archive for dates beyond it
+- **Trip dates**: move a trip and its days re-date themselves, with the bookings along or re-anchored. Trips also copy and archive
+- **Road trip** (off by default): drives with stops, day windows and arrival times that recompute, route alternatives, hazards and EV charging with range
 
 </td>
 <td width="50%" valign="top">
 
-#### 🧳 Bookings and money
+#### 🥾 Tours
 
-- **Reservations**: 16 booking types with status, confirmation code, travellers and attached files
-- **Flights and trains**: several legs with stopovers, per-leg times and endpoint timezones, against 4,045 bundled airports so local times resolve without a key
-- **Accommodation**: a stay spans a range of days with a check-in window, and shows on every night it covers
-- **Booking import**: EML, PDF, PKPass, HTML and TXT confirmations through [KItinerary](https://invent.kde.org/pim/kitinerary). Needs the `kitinerary-extractor` binary, which ships in the Docker image
-- **AirTrail** (off by default): link a self-hosted AirTrail instance to import flights as reservations and keep them in sync
-- **Costs**: split expenses in integer cents with equal or custom shares, several payers per expense, settle-up suggestions, a settlement log, and CSV export
-- **Currencies**: a currency per expense with the rate frozen at entry. Rates come from Frankfurter, no key
-- **Packing lists**: categories, admin-managed templates, assignees, three visibility tiers, and a packed-of-total line. Bags with weight roll-up are a separate admin switch, off by default
-- **To-dos**: assignee, due date, priority, and a reminder before one falls due
-- **Files**: attach to a trip, place, day entry or reservation. 50 MB each, 500 MB for video, with trash and restore
-- **PDF export**: cover page, place photos, day notes, bookings and costs, with an optional page break per day
+- **Seven tour types**: hike, city walk, run, bike (touring, road, gravel, MTB), paddle (kayak, canoe, SUP), horse ride, and ski and winter (alpine, cross-country, touring, snowshoe, winter hike)
+- **Routing**: legs routed over Valhalla with shaping points, hand-drawn legs, route variants, round hikes of a wished length and trip places as stops, all with undo
+- **Hikes**: routed within a maximum SAC grade (T1 to T6), the trail grades along the way, and via ferratas on the map
+- **Terrain**: elevation profile, ascent and descent, and a 3D terrain map with grade colouring and a flyover, no token needed. Topo, hiking, cycling and satellite bases with sea marks and ski pistes as overlays
+- **Multi-day tours**: one route cut into stages and spread across the trip's days
+- **Along the way**: viewpoints, huts, water, food and more within a corridor of the route, inserted as a stop with the detour it adds
+- **Ski, paddle and city walks**: a piste router by difficulty and lift type; a water router with portages, locks and a wind forecast; city walks with stays, opening hours and transit between stops
+- **Plan against reality**: link a recorded GPX to a planned day and compare distance, ascent and time. Import trails from a wanderer instance, save tours to a collection and take them into another trip
 
 </td>
 </tr>
 <tr>
 <td width="50%" valign="top">
 
+#### 🧳 Bookings and money
+
+- **Reservations**: 18 booking types with status, confirmation code, travellers and attached files
+- **Flights and trains**: several legs with stopovers and endpoint timezones, against 4,045 bundled airports so local times resolve without a key
+- **Accommodation**: a stay spans a range of nights with a check-in window
+- **Booking import**: EML, PDF, PKPass, HTML, TXT and photos of confirmations, through [KItinerary](https://invent.kde.org/pim/kitinerary) or an AI model, with a review step before anything is saved. Prices become linked costs
+- **AirTrail** (off by default): import flights from a self-hosted AirTrail instance and keep them in sync
+- **Costs**: split in integer cents with equal or custom shares, several payers, settle-up suggestions, a per-person summary, a settlement log and CSV export. A receipt photo can fill in an expense
+- **Currencies**: one per expense with the rate frozen at entry, from Frankfurter with no key
+- **Packing lists and to-dos**: categories, templates, assignees and visibility tiers; bags with weights as an admin switch; to-dos with due dates, priorities and reminders
+- **Files**: attach to a trip, place, day or booking, 50 MB each and 500 MB for video, with trash and restore
+- **PDF export**: cover, place photos, day notes, bookings and costs, with an optional page break per day
+
+</td>
+<td width="50%" valign="top">
+
 #### 👥 Collaboration
 
-- **Real-time sync** (WebSocket): edits land live for everyone who has that trip open
-- **Members**: add by email or username, hand ownership to someone else, or add guests who have no login at all
-- **Permissions**: an admin maps each of 16 trip actions to admin, trip owner, trip member or everybody
-- **Invite links**: one reusable link per trip with an optional expiry. Admins can also issue signup invites with a use limit that drop the new account straight into a trip
-- **Public share**: a read-only trip page anyone can open without an account
-- **Collab**: group chat with replies, reactions and link previews, shared notes with attachments, polls, and a What's Next list of upcoming activities. Each of the four switches on its own
+- **Real-time sync** (WebSocket): edits land live for everyone who has the trip open
+- **Members**: add by email or username, hand over ownership, or add guests who have no login at all
+- **Permissions**: an admin maps each of 17 trip actions to admin, trip owner, trip member or everybody
+- **Invites**: one reusable link per trip with an optional expiry, and admin signup invites that drop a new account straight into a trip
+- **Public share**: a read-only trip page without an account, with switches for map, bookings, packing, costs and chat
+- **Collab**: group chat with replies, reactions and link previews, shared notes, links, polls and a What's Next list, each one its own switch
+- **Notifications**: an inbox grouped by day with answers right from the notification, and a per-user matrix of events against in-app, email, webhook, ntfy, Web Push and plugin channels
 
-#### 📔 Journal, Atlas and Vacay
+</td>
+</tr>
+<tr>
+<td width="50%" valign="top">
 
-- **Journey** (off by default): dated entries with story, mood, weather and tags, photos and video from uploads or a linked [Immich](https://immich.app) or Synology Photos library, map views, co-authors, and a public share link
-- **Atlas**: mark countries and sub-national regions visited on [geoBoundaries](https://www.geoboundaries.org/) outlines, plus a bucket list, travel stats and a consecutive-years-travelled count
-- **Vacay**: leave calendar with half days, public holidays from date.nager.at, school holiday overlays for 16 European countries, carry-over between years, and joint or read-only sharing of a plan
-- **Collections** (off by default): a place library outside any trip, with labels, ratings, a custom image per place, copy-into-a-trip, and sharing by invite
+#### 📔 Journey and TREK Studio
+
+- **Journey** (off by default): dated entries with story, mood, weather and tags, photos and video from uploads, [Immich](https://immich.app) or Synology Photos, map views, co-authors, drafts and a public share link
+- **Linked journal**: a trip can show one journal as its own, with the members picked on the trip as viewers or editors
+- **Recorded days** (with Dawarich): keep a day's recorded route and turn its stays into entries
+- **TREK Studio**: turn a journal into a printable photo book. 34 print-licensed typefaces, 17 themes, 108 designed pages in twelve styles, 160 recolourable stickers, text effects, layers and a Travel tab with route maps, country stamps and trip figures
+- **Auto layout**: lays the whole book on the designed pages in the style of its theme, every photo in a frame, or rebuilds one spread
+- **Print and share**: PDF export as pages or spreads with crop marks, several people editing at once, and design files to move a spread into another book
+
+</td>
+<td width="50%" valign="top">
+
+#### 🗺️ Atlas, Vacay and Collections
+
+- **Atlas**: countries and regions visited on [geoBoundaries](https://www.geoboundaries.org/) outlines, a bucket list, travel stats, and a tour activities tab with planned against recorded totals
+- **Vacay**: leave calendar with half days, public holidays from date.nager.at, school holidays for 16 European countries, company holidays, carry-over between years, and joint or read-only sharing
+- **Collections** (off by default): a place library outside any trip with lists, labels, ratings, a status per place, cover images, GPX and file export, copy into a trip, and sharing by invite
+- **Dawarich** (off by default): link a Dawarich instance for recorded tracks, suggested stays and countries for the Atlas
+
+</td>
+</tr>
+<tr>
+<td width="50%" valign="top">
+
+#### 🤖 AI assistant and MCP
+
+- **AI assistant** (off by default): a chat that plans with you in a trip, across all your trips, in a journal and in Studio, and works with tours, costs, bookings, packing, Vacay and the Atlas
+- **Your own model**: an API key for Anthropic, OpenAI, Gemini or OpenRouter, a ChatGPT plan, or any OpenAI-compatible endpoint, set for the instance or per user
+- **You stay in charge**: reads run at once, every change waits as a card to apply or discard and can be undone for 15 minutes. Nothing leaves before you agree to the provider, and a file's text only with your consent
+- **Attachments**: drop a booking confirmation, a GPX file or a photo into the chat, and the assistant offers what to do with it
+- **MCP server** (off by default): OAuth 2.1 with mandatory PKCE and dynamic client registration, 410 tools, 30 resources and 4 prompts, 35 scopes in 17 groups ticked on the consent screen, and every call in the audit log
+- **Addon-aware**: twelve addon gates decide which tools a session sees, and flipping one re-registers live sessions
 
 </td>
 <td width="50%" valign="top">
 
 #### 🧩 Plugins
 
-- **Third-party plugins**: install from the TREK registry or sideload a zip, switch on per instance, with their own pages under `/plugins/<id>`
-- **Sandboxed**: one child process per plugin, 63 grantable permissions, an admin-edited outbound host allowlist, memory and RPC caps, and daily caps on AI and notification calls
-- **Trust**: registry downloads are pinned by sha256 and checked against the author's minisign key. A sideloaded zip is marked unverified, and `TREK_PLUGINS_ENABLED=false` turns the whole system off
-- **Extension points**: map markers and layers, place details, day schedules, PDF sections, Atlas layers, journal rows, trip warnings, calendar sources, route profiles and notification channels. Plugin pages run in an opaque-origin iframe
-- **SDK**: [`trek-plugin-sdk`](https://www.npmjs.com/package/trek-plugin-sdk) on npm, with a manifest validator, a mock host, and a dev-link mode that runs a local build against real data
-
-#### 🤖 AI and MCP
-
-- **MCP server** (off by default): OAuth 2.1 with mandatory PKCE and dynamic client registration. 199 tools, 30 resources, 4 prompts
-- **Scopes**: 29 scopes in 14 groups, each one tickable on the consent screen. Tokens are bound to the `/mcp` resource, and every tool call lands in the audit log
-- **Reach**: create trips and days, edit places, packing lists, to-dos, costs, reservations, collections and journeys, mark countries visited, all inside the scopes the token holds
-- **Prompts**: `trip-summary`, plus `packing-list` and `budget-overview` when those addons are on
-- **Addon-aware**: seven addon gates decide which tools and resources a session sees. Flipping one drops live sessions so the surface re-registers
-- **Booking extraction** (off by default): read a confirmation with a local Ollama server, any OpenAI-compatible endpoint, or Anthropic, configured instance-wide or per user
+- **Third-party plugins**: install from the TREK registry or sideload a zip, with their own pages under `/plugins/<id>`
+- **Sandboxed**: one child process per plugin, 66 grantable permissions, an admin-edited outbound host allowlist, memory and call caps
+- **Trust**: registry downloads are pinned by sha256 and checked against the author's minisign key, a sideloaded zip is marked unverified, and `TREK_PLUGINS_ENABLED=false` turns the whole system off
+- **Extension points**: map layers, place details, day schedules, PDF sections, Atlas layers, journal rows, trip warnings, search and photo providers, route profiles, notification channels and MCP tools
+- **SDK**: [`trek-plugin-sdk`](https://www.npmjs.com/package/trek-plugin-sdk) with a CLI to create, validate, run against real data, sign and publish
 
 </td>
 </tr>
@@ -148,30 +182,26 @@ Most of what follows is an addon an admin switches on or off. Lists, Costs, Docu
 
 #### 📱 Mobile and offline
 
-- **Installable**: iOS and Android straight from the browser, no App Store. Runs standalone without browser chrome, with the status bar tinted per theme
-- **Phone layouts**: a separate shell below 768px with its own tokens, a bottom bar and safe-area insets. Which items sit in that bar is up to the user
-- **Offline reads**: the app shell and every route chunk are precached, and trips, places and file blobs live in a per-user IndexedDB store, so a trip opens with no network
-- **Offline writes**: mutations queue and replay with an `X-Idempotency-Key`, so a reconnect cannot double-apply. A stale edit is parked for a keep-mine or keep-theirs choice
-- **Offline maps**: pre-download a trip's raster tiles, and clear them again
-- **API responses are never cached** by the service worker. They vary per session, so they always come from the network
+- **Installable**: iOS and Android straight from the browser, no App Store, standalone with a themed status bar
+- **Phone layouts**: their own screens for every part of the app, with a bottom bar and dashboard widgets the user orders
+- **Offline reads**: the app shell is precached and trips, places, tours, files and nearby places live in a per-user IndexedDB store, so a trip opens with no network
+- **Offline writes**: changes queue and replay with an `X-Idempotency-Key`, and a stale edit waits for a keep-mine or keep-theirs choice
+- **Offline maps**: raster and vector tiles of a trip downloaded ahead, and a switch that takes the whole app offline on purpose
 
 </td>
 <td width="50%" valign="top">
 
 #### ⚙️ Admin, accounts and security
 
-- **Login methods**: password login, password registration, OIDC login, OIDC registration and passkey login each switch on and off on their own. `OIDC_ONLY` leaves SSO as the only way in
-- **SSO (OIDC)**: one provider by discovery, with PKCE and `id_token` verification (Authentik, Keycloak, Google and the like)
-- **2FA**: TOTP with ten single-use backup codes, and an admin can require it instance-wide
-- **Passkeys**: WebAuthn login by fingerprint, face, PIN or security key, off until an admin enables it. A passkey also satisfies the 2FA requirement
-- **Hardening**: per-IP limits on login, password reset and 2FA attempts, a password policy, secrets encrypted at rest and masked on read, and an SSRF guard on every URL you configure
-- **Admin panel**: users and invites, the permission matrix, packing templates, categories, addons, plugins, API keys, MCP tokens and OAuth sessions, backups, storage, audit log, and GitHub releases
-- **Backups**: manual or scheduled hourly, daily, weekly or monthly, with retention in days. The zip carries the at-rest key, so a restore can decrypt its own secrets
-- **Storage**: pluggable storage backends per content category — keep everything on local disk, or add S3-compatible backends and replicate any category to them, configured entirely from the admin panel
-- **Notifications**: a per-user matrix of events against in-app, email (SMTP), webhook, ntfy and Web Push (on every device you turn it on for, even with TREK closed), plus any channel a plugin registers
-- **Appearance**: light, dark or follow the OS, seven colour schemes plus a custom accent, transparency, compact density, reduce motion, and text size per tier
+- **Sign-in**: password, OIDC and passkeys each switch on and off on their own, `OIDC_ONLY` leaves SSO as the only way in, and an OIDC claim can grant admin
+- **SSO and 2FA**: one OIDC provider by discovery with PKCE (Authentik, Keycloak, Google and the like), TOTP with backup codes that an admin can require, and passkeys that count as the second factor
+- **Sessions**: every sign-in is a session you can see and end, one by one or all others at once
+- **Hardening**: rate limits on sign-in, reset and 2FA, a password policy, secrets encrypted at rest and masked on read, and an SSRF guard on every URL you configure
+- **Admin panel**: users and the permission matrix, defaults for new users, categories and templates, addons, plugins, storage, notifications, MCP tokens, backups, audit log and releases
+- **Backups and storage**: scheduled backups with retention that restore their own secrets, and local or S3-compatible storage per content category with replicas
+- **Appearance**: light, dark or follow the OS, seven colour schemes plus a custom accent, transparency, density, reduced motion and text size
 - **27 languages**: en, de, es, fr, it, nl, hu, ru, zh, zh-TW, pl, cs, ar (right to left), br, id, tr, ja, ko, uk, gr, sv, vi, ca, az, et, sk, th
-- **In-app help**: the wiki ships inside the image and is served from disk at `/help`, so the docs match the version you are running
+- **Help center**: a ? in the top bar with 381 step-by-step guides with screenshots, searched together with the wiki that ships in the image
 
 </td>
 </tr>

client/e2e/help/journey.guide.ts

@@ -460,6 +460,20 @@ const exportDialog = (page: Page) => page.getByRole('dialog', { name: 'Export' }
 const thumbs = (page: Page) => page.locator('.st-thumb-row')
 /** The hit targets over the spread, one per element. */
 const sheetElements = (page: Page) => page.locator('.st-sheet > div[style*="left:"]')
+/**
+ * The hit target of the first text on the spread on screen. The targets above the page are empty
+ * boxes, so the one over the drawn words is found by where the words are and marked for the locator.
+ */
+async function markTextTarget(page: Page): Promise<void> {
+  const words = page.locator('.st-sheet').getByText(/\p{L}{3,}/u).first()
+  await expect(words).toBeVisible()
+  await words.evaluate(el => {
+    const r = el.getBoundingClientRect()
+    const hit = document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2)
+    hit?.setAttribute('data-help-text', '')
+  })
+}
+const textTarget = (page: Page) => page.locator('.st-sheet [data-help-text]')
 
 async function studioSection(page: Page, name: string): Promise<void> {
   await railButton(page, name).click()
@@ -1458,16 +1472,162 @@ const SCRIPTS: Record<string, GuideScript> = {
     ],
   },
 
+  'studio-my-layouts': {
+    guide: guide('studio-my-layouts'),
+    start: openStudio,
+    steps: [
+      {
+        prepare: async p => {
+          await studioSection(p, 'Pages')
+          await thumbs(p).nth(2).locator('.st-thumb').click()
+          await settle(p)
+        },
+        target: p => railButton(p, 'Layouts'),
+        act: async p => { await studioSection(p, 'Layouts') },
+      },
+      {
+        // Pointed at rather than pressed, so the seed book keeps no layout of its own for the guides after this one.
+        prepare: async p => {
+          await sidePanel(p).getByRole('button', { name: 'Save this page as a layout' }).scrollIntoViewIfNeeded()
+          await settle(p)
+        },
+        target: p => sidePanel(p).locator('.st-saved-layouts'),
+      },
+    ],
+  },
+
+  'studio-theme': {
+    guide: guide('studio-theme'),
+    start: openStudio,
+    steps: [
+      {
+        target: p => railButton(p, 'Theme'),
+        act: async p => { await studioSection(p, 'Theme') },
+      },
+      {
+        target: p => sidePanel(p).locator('.st-theme-grid'),
+        act: async p => {
+          await sidePanel(p).locator('.st-theme-card').nth(1).click()
+          await settle(p)
+        },
+      },
+      {
+        prepare: async p => {
+          await sidePanel(p).getByRole('button', { name: 'Apply to the book' }).scrollIntoViewIfNeeded()
+          await settle(p)
+        },
+        target: p => sidePanel(p).locator('.st-theme-apply'),
+      },
+    ],
+  },
+
+  'studio-stickers': {
+    guide: guide('studio-stickers'),
+    start: openStudio,
+    steps: [
+      {
+        prepare: async p => { await studioSection(p, 'Elements') },
+        target: p => sidePanel(p).getByRole('tab', { name: 'Stickers' }),
+        act: async p => {
+          await sidePanel(p).getByRole('tab', { name: 'Stickers' }).click()
+          await expect(sidePanel(p).locator('.st-shape-grid').first()).toBeVisible()
+          await settle(p)
+        },
+      },
+      {
+        target: p => sidePanel(p).locator('.st-shape-grid').first(),
+      },
+    ],
+  },
+
   'studio-travel': {
     guide: guide('studio-travel'),
     start: openStudio,
     steps: [
       {
         target: p => railButton(p, 'Travel'),
-        act: async p => { await studioSection(p, 'Travel') },
+        act: async p => {
+          await studioSection(p, 'Travel')
+          await expect(sidePanel(p).locator('.st-travel-card').first()).toBeVisible({ timeout: 15_000 })
+          await settle(p)
+        },
       },
       {
-        target: sidePanel,
+        target: p => sidePanel(p).locator('.st-travel-grid').first(),
+      },
+      {
+        target: p => sidePanel(p).locator('.st-travel-card').first(),
+      },
+    ],
+  },
+
+  'studio-text-effects': {
+    guide: guide('studio-text-effects'),
+    start: openStudio,
+    steps: [
+      {
+        prepare: async p => {
+          await studioSection(p, 'Pages')
+          await thumbs(p).nth(2).locator('.st-thumb').click()
+          await settle(p)
+          await markTextTarget(p)
+        },
+        target: p => textTarget(p),
+        act: async p => {
+          await textTarget(p).click()
+          await expect(inspector(p).getByRole('button', { name: 'Effects' })).toBeVisible()
+          await settle(p)
+        },
+      },
+      {
+        prepare: async p => {
+          const head = inspector(p).getByRole('button', { name: 'Effects' })
+          if ((await head.getAttribute('aria-expanded')) !== 'true') await head.click()
+          await head.scrollIntoViewIfNeeded()
+          await settle(p)
+        },
+        target: p => inspector(p).locator('.st-section').filter({ has: p.getByRole('button', { name: 'Effects' }) }),
+      },
+    ],
+  },
+
+  'studio-background': {
+    guide: guide('studio-background'),
+    start: openStudio,
+    steps: [
+      {
+        prepare: async p => {
+          await studioSection(p, 'Pages')
+          await thumbs(p).nth(2).locator('.st-thumb').click()
+          await settle(p)
+        },
+        target: p => inspector(p).locator('.st-section').filter({ hasText: 'Page background' }).first(),
+      },
+      {
+        target: p => inspector(p).locator('.st-paint-tabs').first(),
+      },
+    ],
+  },
+
+  'studio-layers': {
+    guide: guide('studio-layers'),
+    start: openStudio,
+    steps: [
+      {
+        prepare: async p => {
+          await studioSection(p, 'Pages')
+          await thumbs(p).nth(2).locator('.st-thumb').click()
+          await settle(p)
+        },
+        target: p => railButton(p, 'Layers'),
+        act: async p => {
+          await studioSection(p, 'Layers')
+          await expect(sidePanel(p).locator('.st-layer').first()).toBeVisible()
+          await settle(p)
+        },
+      },
+      {
+        target: p => sidePanel(p).locator('.st-layer').first(),
       },
     ],
   },

client/scripts/eslint-baseline.json

@@ -3,12 +3,12 @@
     "@typescript-eslint/no-non-null-assertion": 384,
     "@typescript-eslint/no-misused-promises": 849,
     "no-console": 88,
-    "complexity": 222,
+    "complexity": 221,
     "@typescript-eslint/no-explicit-any": 146,
     "trek/no-swallowed-catch": 130,
     "max-params": 32,
     "trek/store-without-selector": 67,
-    "react-hooks/refs": 556,
+    "react-hooks/refs": 555,
     "react-hooks/set-state-in-effect": 194,
     "@typescript-eslint/no-floating-promises": 165,
     "react-hooks/exhaustive-deps": 116,

client/scripts/theme-baseline.json

@@ -72,7 +72,6 @@
   "components/Map/poiCategories.ts": 7,
   "components/Map/ratingBadge.ts": 2,
   "components/Map/reservationsMapbox.ts": 1,
-  "components/Notifications/InAppNotificationItem.tsx": 1,
   "components/PDF/TripPDF.tsx": 53,
   "components/Packing/PackingListPanelBagModal.tsx": 2,
   "components/Packing/PackingListPanelCategoryGroup.tsx": 5,
@@ -295,7 +294,6 @@
   "pages/FilesPage.tsx": 11,
   "pages/ForgotPasswordPage.tsx": 18,
   "pages/HelpPage.tsx": 21,
-  "pages/InAppNotificationsPage.tsx": 2,
   "pages/JoinTripPage.tsx": 4,
   "pages/JourneyDetailPage.tsx": 53,
   "pages/JourneyPage.tsx": 64,

client/src/api/assistant.ts

@@ -5,7 +5,6 @@ import {
   type AiApiKeyConnectRequest,
   type AiAuthStartResponse,
   type AiChatgptFinishRequest,
-  type AiClaudeConnectorResponse,
   type AiConnectionScope,
   type AiConnectionView,
   type AiInstanceConnectionRequest,
@@ -233,7 +232,3 @@ export const aiAdminApi = {
   removeConnection: (): Promise<SuccessResponse> => apiClient.delete('/admin/ai/connection').then((r) => r.data),
   models: (): Promise<AiModelListResponse> => apiClient.get('/admin/ai/models', viaProvider).then((r) => r.data),
 };
-
-export const claudeConnectorApi = {
-  get: (): Promise<AiClaudeConnectorResponse> => apiClient.get('/integrations/claude-connector').then((r) => r.data),
-};

client/src/components/Admin/AddonManager.test.tsx

@@ -712,4 +712,33 @@ describe('AddonManager', () => {
     expect(roadtrip.querySelector('svg.lucide-car-front')).toBeInTheDocument();
     expect(tours.querySelector('svg.lucide-puzzle')).not.toBeInTheDocument();
   });
+
+  it('FE-ADMIN-ADDON-045: finds an addon by name or description and shows the ones on or off', async () => {
+    const user = userEvent.setup();
+    server.use(
+      addonsRoute([
+        buildAddon({ id: 'x-lists', name: 'Todo List', description: 'Track tasks', type: 'trip', enabled: true }),
+        buildAddon({ id: 'x-costs', name: 'Budget', description: 'Split costs', type: 'trip', enabled: false }),
+        buildAddon({ id: 'x-holiday', name: 'Vacay', description: 'Holiday planner', type: 'global', enabled: true }),
+      ])
+    );
+    render(<AddonManager />);
+    await screen.findByText('Todo List');
+
+    await user.type(screen.getByRole('searchbox', { name: 'Search addons' }), 'costs');
+    expect(screen.getByText('Budget')).toBeInTheDocument();
+    expect(screen.queryByText('Todo List')).toBeNull();
+    expect(screen.queryByText('Vacay')).toBeNull();
+
+    await user.clear(screen.getByRole('searchbox', { name: 'Search addons' }));
+    await user.click(screen.getByRole('button', { name: 'On' }));
+    expect(screen.getByText('Todo List')).toBeInTheDocument();
+    expect(screen.getByText('Vacay')).toBeInTheDocument();
+    expect(screen.queryByText('Budget')).toBeNull();
+
+    await user.click(screen.getByRole('button', { name: 'Off' }));
+    await user.type(screen.getByRole('searchbox', { name: 'Search addons' }), 'nothing like this');
+    expect(screen.getByText('No addon matches the search or the filter.')).toBeInTheDocument();
+  });
 });
+

client/src/components/Admin/AddonManager.tsx

@@ -1,7 +1,7 @@
-import type { ComponentType } from 'react'
+import { useState, type ComponentType } from 'react'
 import { useTranslation } from '../../i18n'
 import { useIsDark } from '../../hooks/useIsDark'
-import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Sparkles, Luggage, Plane, Bookmark, Users, Loader2, Mountain, CarFront } from 'lucide-react'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Sparkles, Luggage, Plane, Bookmark, Users, Loader2, Mountain, CarFront, Search } from 'lucide-react'
 import EmptyState from '../shared/EmptyState'
 import DawarichIcon from '../shared/DawarichIcon'
 import AirTrailIcon from '../shared/AirTrailIcon'
@@ -76,6 +76,8 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
     toggleToursWanderer,
     mapSwitches,
   } = useAddonManager()
+  const [query, setQuery] = useState('')
+  const [view, setView] = useState<AddonView>('all')
 
   if (loading) {
     return (
@@ -194,10 +196,10 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
     )
   }
 
-  /* One column per type, side by side, instead of three stacked sections. Stacked, each
-     section opened its own set of columns and the tall tiles (Collab, Journey) set a
-     section's height while its neighbours ran out early. Side by side the column's
-     head carries the type, so the tiles need no badge of their own. */
+  /* A card per type, the way every other admin tab sets its cards: Trip in the
+     left column, Global and Integration in the right one, each card with the
+     dialogs' head band carrying the type, its count and what it means. Above
+     them one card says how many are on and finds an addon by name. */
   const groups = [
     { key: 'trip', addons: tripAddons },
     { key: 'global', addons: globalAddons },
@@ -214,68 +216,145 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
     </span>
   )
 
-  return (
-    <SettingsCard
-      icon={Puzzle}
-      title={t('admin.addons.title')}
-      hint={subtitle}
-      badge={totalCount > 0 ? (
-        <Tooltip label={t('admin.addons.group.count', { enabled: enabledCount, total: totalCount })}>
-          <span className="inline-flex">
-            <StatusPill tone={enabledCount > 0 ? 'success' : 'neutral'}>{enabledCount}/{totalCount}</StatusPill>
-          </span>
-        </Tooltip>
-      ) : undefined}
-    >
-      {addons.length === 0 ? (
-        <EmptyState scene="idle" title={t('admin.addons.noAddons')} surface="var(--bg-secondary)" />
-      ) : (
-        <div className="grid grid-cols-1 items-start gap-4 md:grid-cols-2 xl:grid-cols-3">
-          {groups.map(g => {
-            const meta = TYPE_META[g.key]
-            return (
-              <section key={g.key} className="min-w-0 overflow-hidden rounded-[14px] border border-edge-faint bg-surface-card">
-                <GroupHead icon={meta.icon} label={t(meta.labelKey)} hint={t(meta.hintKey)} addons={g.key === 'integration' ? [...aiAddons, ...g.addons] : g.addons} t={t} />
-                <div className="divide-y divide-edge-faint">
-                  {/* The AI addons share a connection and a settings dialog, so they head the column as one tile. */}
-                  {g.key === 'integration' && aiAddons.length > 0 && <AiAddonTile addons={aiAddons} onToggle={handleToggle} />}
-                  {g.addons.map(tile)}
-                </div>
-              </section>
-            )
-          })}
+  /** Whether an addon is shown under the search and the filter. */
+  const shown = (addon: Addon) => {
+    if (view === 'on' && !addon.enabled) return false
+    if (view === 'off' && addon.enabled) return false
+    const q = query.trim().toLocaleLowerCase()
+    if (!q) return true
+    const label = getAddonLabel(t, addon)
+    return `${label.name} ${label.description ?? ''}`.toLocaleLowerCase().includes(q)
+  }
+
+  const card = (g: (typeof groups)[number]) => {
+    const meta = TYPE_META[g.key]
+    const all = g.key === 'integration' ? [...aiAddons, ...g.addons] : g.addons
+    const visible = g.addons.filter(shown)
+    const ai = g.key === 'integration' && aiAddons.some(shown)
+    if (!visible.length && !ai) return null
+    const on = all.filter(a => a.enabled).length
+    return (
+      <SettingsCard
+        key={g.key}
+        icon={meta.icon}
+        title={t(meta.labelKey)}
+        hint={t(meta.hintKey)}
+        badge={(
+          <Tooltip label={t('admin.addons.group.count', { enabled: on, total: all.length })}>
+            <span className="inline-flex"><StatusPill tone={on > 0 ? 'success' : 'neutral'}>{on}/{all.length}</StatusPill></span>
+          </Tooltip>
+        )}
+        bodyClassName="p-3"
+      >
+        <div className="divide-y divide-edge-faint overflow-hidden rounded-[12px] border border-edge-faint bg-surface-card">
+          {/* The AI addons share a connection and a settings dialog, so they head the card as one tile. */}
+          {ai && <AiAddonTile addons={aiAddons} onToggle={handleToggle} />}
+          {visible.map(tile)}
         </div>
-      )}
-    </SettingsCard>
+      </SettingsCard>
+    )
+  }
+
+  const [first, ...rest] = groups
+  const cards = { start: first ? card(first) : null, end: rest.map(card).filter(Boolean) }
+
+  return (
+    <>
+      <SettingsCard
+        icon={Puzzle}
+        title={t('admin.addons.title')}
+        hint={subtitle}
+        badge={totalCount > 0 ? (
+          <Tooltip label={t('admin.addons.group.count', { enabled: enabledCount, total: totalCount })}>
+            <span className="inline-flex">
+              <StatusPill tone={enabledCount > 0 ? 'success' : 'neutral'}>{enabledCount}/{totalCount}</StatusPill>
+            </span>
+          </Tooltip>
+        ) : undefined}
+      >
+        {addons.length === 0
+          ? <EmptyState scene="idle" title={t('admin.addons.noAddons')} surface="var(--bg-secondary)" />
+          : <AddonToolbar groups={groups.map(g => ({ key: g.key, addons: g.key === 'integration' ? [...aiAddons, ...g.addons] : g.addons }))} query={query} onQuery={setQuery} view={view} onView={setView} t={t} />}
+      </SettingsCard>
+
+      {addons.length > 0 && (cards.start || cards.end.length > 0 ? (
+        <div className="grid grid-cols-1 gap-x-5 xl:grid-cols-2 xl:items-start">
+          <div className="min-w-0">{cards.start}</div>
+          <div className="min-w-0">{cards.end}</div>
+        </div>
+      ) : (
+        <p className="m-0 rounded-2xl border border-dashed border-edge-faint px-4 py-8 text-center text-content-muted" style={fs(13, 'body')}>
+          {t('admin.addons.noMatch')}
+        </p>
+      ))}
+    </>
   )
 }
 
-/** The head band of one type's column: icon tile, the type, its count and what it means. */
-function GroupHead({ icon: Icon, label, hint, addons, t }: {
-  icon: ComponentType<{ size?: number; className?: string; strokeWidth?: number }>
-  label: string
-  hint: string
-  addons: Addon[]
+type AddonView = 'all' | 'on' | 'off'
+
+/**
+ * The head card's body: a tile per type with how many of it are on, then a
+ * search over the addons' names and descriptions and a switch between all,
+ * the ones on and the ones off.
+ */
+function AddonToolbar({ groups, query, onQuery, view, onView, t }: {
+  groups: { key: string; addons: Addon[] }[]
+  query: string
+  onQuery: (q: string) => void
+  view: AddonView
+  onView: (v: AddonView) => void
   t: (key: string, params?: Record<string, unknown>) => string
 }) {
-  const enabled = addons.filter(a => a.enabled).length
   return (
-    <div className="flex items-start gap-2.5 border-b border-edge-faint bg-surface-tertiary px-3.5 py-2.5">
-      <span className="mt-px grid h-7 w-7 flex-none place-items-center rounded-[9px] bg-surface-card text-content-secondary shadow-sm">
-        <Icon size={13} strokeWidth={2} />
-      </span>
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2">
-          <h3 className="m-0 min-w-0 flex-1 truncate font-bold text-content" style={fs(13, 'body')}>{label}</h3>
-          <Tooltip label={t('admin.addons.group.count', { enabled, total: addons.length })}>
-            <span className="inline-flex">
-              <StatusPill>{enabled}/{addons.length}</StatusPill>
-            </span>
-          </Tooltip>
-        </div>
-        {/* Says what the type means: the only place that still explains it. */}
-        <p className="m-0 mt-0.5 leading-snug text-content-faint" style={fs(11)}>{hint}</p>
+    <>
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
+        {groups.map(g => {
+          const meta = TYPE_META[g.key]
+          const Icon = meta.icon
+          const on = g.addons.filter(a => a.enabled).length
+          return (
+            <div key={g.key} className="flex items-center gap-3 rounded-[12px] border border-edge-faint bg-surface-card px-3 py-2.5">
+              <span className="grid h-8 w-8 flex-none place-items-center rounded-[10px] bg-surface-secondary text-content-secondary">
+                <Icon size={15} />
+              </span>
+              <span className="min-w-0 flex-1">
+                <span className="block truncate font-semibold text-content" style={fs(12.5, 'body')}>{t(meta.labelKey)}</span>
+                <span className="block text-content-faint" style={fs(11)}>{t('admin.addons.group.count', { enabled: on, total: g.addons.length })}</span>
+              </span>
+              <span className={`font-geist font-bold tabular-nums ${on > 0 ? 'text-content' : 'text-content-faint'}`} style={fs(18, 'body')} aria-hidden>{on}</span>
+            </div>
+          )
+        })}
       </div>
-    </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+        <label className="relative flex min-w-0 flex-1 items-center">
+          <Search size={14} className="pointer-events-none absolute start-3 text-content-faint" />
+          <input
+            type="search"
+            value={query}
+            onChange={e => onQuery(e.target.value)}
+            placeholder={t('admin.addons.search')}
+            aria-label={t('admin.addons.search')}
+            className="h-9 w-full rounded-[10px] border border-edge-faint bg-surface-card ps-8 pe-3 text-content outline-none transition-colors placeholder:text-content-faint focus:border-accent"
+            style={fs(13, 'body')}
+          />
+        </label>
+        <div className="inline-flex flex-none gap-1 rounded-[10px] bg-surface-tertiary p-1" role="group" aria-label={t('admin.addons.filter')}>
+          {(['all', 'on', 'off'] as const).map(v => (
+            <button
+              key={v}
+              type="button"
+              onClick={() => onView(v)}
+              aria-pressed={view === v}
+              className={`h-7 rounded-[8px] px-3 font-medium transition-colors ${view === v ? 'bg-surface-card text-content shadow-sm' : 'text-content-muted hover:text-content'}`}
+              style={fs(12.5, 'body')}
+            >
+              {t(`admin.addons.filter.${v}`)}
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
   )
 }

client/src/components/Admin/GitHubPanel.tsx

@@ -102,6 +102,13 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
           </ul>
         );
       }
+      if (block.kind === 'h5') {
+        return (
+          <h5 key={idx} className="mb-1 mt-3 font-semibold text-content first:mt-0" style={fs(12.5, 'body')}>
+            {block.text}
+          </h5>
+        );
+      }
       if (block.kind === 'h4') {
         return (
           <h4 key={idx} className="mb-1 mt-3 font-geist font-bold uppercase tracking-[.08em] text-content-faint first:mt-0" style={fs(10)}>

client/src/components/Assistant/AssistantMessage.tsx

@@ -1,7 +1,7 @@
 import { ActionBarPrimitive, AuiIf, MessagePrimitive } from '@assistant-ui/react';
 import type { AssistantMessage as StoredMessage } from '@trek/shared';
 import { Check, Copy, FileText, LoaderCircle, Share2 } from 'lucide-react';
-import { useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 
 import { useTranslation } from '../../i18n';
 import { chatOf, useAssistantStore } from '../../store/assistantStore';
@@ -16,7 +16,7 @@ import AssistantShareDialog from './AssistantShareDialog';
 import AssistantSources from './AssistantSources';
 import AssistantToolSteps from './AssistantToolSteps';
 import AssistantWeatherStrip from './AssistantWeatherStrip';
-import { messageBlocks } from './assistantParts';
+import { type MessageBlock, messageBlocks, tailStart } from './assistantParts';
 import { useAssistantView } from './assistantViewContext';
 import AssistantCardBlock from './cards/AssistantCardBlock';
 import { useAssistantShare } from './useAssistantShare';
@@ -108,6 +108,28 @@ function Question({ message }: { message: StoredMessage }) {
   );
 }
 
+/** One block of an answer, in the shape its kind takes. */
+function AnswerBlock({
+  block,
+  message,
+  writing,
+  streaming,
+}: {
+  block: MessageBlock;
+  message: StoredMessage;
+  writing: boolean;
+  streaming: boolean;
+}) {
+  if (block.kind === 'text') return <AssistantMarkdown text={block.text} writing={streaming} />;
+  if (block.kind === 'steps') return <AssistantToolSteps steps={block.steps} />;
+  if (block.kind === 'places') return <AssistantPlaceStrip found={block.found} message={message} />;
+  if (block.kind === 'weather') return <AssistantWeatherStrip days={block.days} />;
+  if (block.kind === 'sources') return <AssistantSources sources={block.sources} />;
+  if (block.kind === 'remembered') return <AssistantRemembered note={block.note} live={writing} />;
+  if (block.kind === 'cards') return <AssistantCardBlock block={block} message={message} />;
+  return <AssistantChangeCard items={block.items} />;
+}
+
 function Answer({ message }: { message: StoredMessage }) {
   const { t } = useTranslation();
   const { tripId, variant } = useAssistantView();
@@ -119,25 +141,16 @@ function Answer({ message }: { message: StoredMessage }) {
   const share = useAssistantShare(tripId, message, writing);
   const last = blocks[blocks.length - 1];
   const hasText = blocks.some((b) => b.kind === 'text');
+  const tail = tailStart(blocks);
 
   return (
     <MessagePrimitive.Root className="trek-assistant-enter flex flex-col gap-2.5 py-2">
-      {blocks.map((block) => {
-        if (block.kind === 'text') {
-          return <AssistantMarkdown key={block.key} text={block.text} writing={writing && block === last} />;
-        }
-        if (block.kind === 'steps') return <AssistantToolSteps key={block.key} steps={block.steps} />;
-        if (block.kind === 'places') {
-          return <AssistantPlaceStrip key={block.key} found={block.found} message={message} />;
-        }
-        if (block.kind === 'weather') return <AssistantWeatherStrip key={block.key} days={block.days} />;
-        if (block.kind === 'sources') return <AssistantSources key={block.key} sources={block.sources} />;
-        if (block.kind === 'remembered') {
-          return <AssistantRemembered key={block.key} note={block.note} live={writing} />;
-        }
-        if (block.kind === 'cards') return <AssistantCardBlock key={block.key} block={block} message={message} />;
-        return <AssistantChangeCard key={block.key} items={block.items} />;
-      })}
+      {blocks.map((block, i) => (
+        <Fragment key={block.key}>
+          {i === tail && i > 0 && <span data-assistant-tail aria-hidden="true" className="-mb-2.5 block h-0" />}
+          <AnswerBlock block={block} message={message} writing={writing} streaming={writing && block === last} />
+        </Fragment>
+      ))}
       {/* Nothing below says the answer goes on: no words being written, no step running. */}
       {writing && last?.kind !== 'text' && last?.kind !== 'steps' && (
         <p role="status" className="m-0 text-caption">

client/src/components/Assistant/AssistantThread.tsx

@@ -1,6 +1,6 @@
 import { AuiIf, ThreadPrimitive } from '@assistant-ui/react';
 import { ArrowDown, FileUp, MapPin } from 'lucide-react';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 
 import { useTranslation } from '../../i18n';
 import { chatOf, useAssistantStore } from '../../store/assistantStore';
@@ -15,13 +15,15 @@ import { useAssistantAttach } from './useAssistantAttach';
 import { useFollowSelectedDay } from './useAssistantFocus';
 import { joinDropZones, useAssistantPlaceDrop } from './useAssistantPlaceDrop';
 import { useAssistantSuggestions } from './useAssistantSuggestions';
+import { useRevealAnswerTail } from './useRevealAnswerTail';
 
 /**
  * The chat itself: the messages, and under them the line that says what went
  * wrong, the privacy note and the composer, held at the bottom while the
  * messages scroll. A new question moves up to the top of the view, so its
- * answer reads from its first line instead of chasing the newest one. A
- * booking file or a place of the trip can be dropped anywhere on it.
+ * answer reads from its first line instead of chasing the newest one, and once
+ * the answer is written its end comes into view. A booking file or a place of
+ * the trip can be dropped anywhere on it.
  */
 export default function AssistantThread({ tripTitle }: { tripTitle: string }) {
   const { t } = useTranslation();
@@ -31,6 +33,8 @@ export default function AssistantThread({ tripTitle }: { tripTitle: string }) {
   const byId = useMemo(() => new Map(messages.map((m) => [m.id, m])), [messages]);
   const { suggestions, canEdit } = useAssistantSuggestions(tripId);
   useFollowSelectedDay(tripId);
+  const viewport = useRef<HTMLDivElement>(null);
+  useRevealAnswerTail(viewport, isRunning);
 
   const phone = variant === 'fullscreen';
   const attach = useAssistantAttach(tripId);
@@ -52,7 +56,11 @@ export default function AssistantThread({ tripTitle }: { tripTitle: string }) {
           </span>
         </div>
       )}
-      <ThreadPrimitive.Viewport turnAnchor="top" className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4">
+      <ThreadPrimitive.Viewport
+        ref={viewport}
+        turnAnchor="top"
+        className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4"
+      >
         <AuiIf condition={(s) => s.thread.isEmpty}>
           <AssistantWelcome suggestions={suggestions} canEdit={canEdit} withSuggestions={!phone} />
           {mentionable && (

client/src/components/Assistant/assistantFollowUpRules.test.ts

@@ -121,4 +121,40 @@ describe('the questions an answer offers', () => {
     expect(followUpsFor(offered, true).map((f) => f.text)).toEqual(['Yes, plan it']);
     expect(followUpsFor(of([{ type: 'text', text: 'Here it is.' }]), true).map((f) => f.id)).toEqual(['more', 'next']);
   });
+
+  it('FE-AI-FOLLOW-008: the answer to an attached file offers what the server chose, also under its booking cards', () => {
+    const read = {
+      type: 'tool-call' as const,
+      toolCallId: 'r',
+      toolName: 'read_booking_file',
+      args: { name: 'AirBnB Buchung.pdf' },
+      result: { bookings: [], reason: 'ai_not_configured' },
+    };
+    const chips = {
+      type: 'data-trek-follow-ups' as const,
+      data: { questions: ['Keep it in Files', 'What is in the file?'] },
+    };
+    const empty = of([
+      read,
+      { type: 'text', text: 'I could not find a booking. What should I do with the file?' },
+      chips,
+    ]);
+    expect(followUpsFor(empty, true).map((f) => f.text)).toEqual(['Keep it in Files', 'What is in the file?']);
+    const change = {
+      toolCallId: 'b',
+      verbKey: 'importBooking',
+      subject: 'Casa',
+      rows: [],
+      dayId: null,
+      placeIds: [],
+      undoable: false,
+    };
+    const found = of([
+      read,
+      { type: 'text', text: 'I found 1 booking.' },
+      { type: 'data-trek-change', data: change as AssistantChangePreview },
+      { type: 'data-trek-follow-ups', data: { questions: ['Keep the file with this booking'] } },
+    ]);
+    expect(followUpsFor(found, true).map((f) => f.text)).toEqual(['Keep the file with this booking']);
+  });
 });

client/src/components/Assistant/assistantParts.ts

@@ -61,7 +61,7 @@ export interface ChangeItem {
 /** The answer cards of one group, side by side. */
 export type CardsBlock = { kind: 'cards'; key: string; group: string; entries: CardEntry[] };
 
-type MessageBlock =
+export type MessageBlock =
   | { kind: 'text'; key: string; text: string }
   | { kind: 'steps'; key: string; steps: ToolStep[] }
   | { kind: 'change'; key: string; items: ChangeItem[] }
@@ -463,4 +463,17 @@ export const CHANGE_LABELS: Record<AssistantChangeLabelKey, { labelKey: string }
   track: { labelKey: 'assistant.change.label.track' },
   packing: { labelKey: 'assistant.change.label.packing' },
   breaks: { labelKey: 'assistant.change.label.breaks' },
+  sentTo: { labelKey: 'assistant.change.label.sentTo' },
+  attachedTo: { labelKey: 'assistant.change.label.attachedTo' },
 };
+
+/**
+ * Where an answer's closing words and changes begin: the block after its last
+ * step, strip or card. That end is what the thread brings into view once the
+ * answer is written.
+ */
+export function tailStart(blocks: MessageBlock[]): number {
+  let i = blocks.length;
+  while (i > 0 && (blocks[i - 1].kind === 'text' || blocks[i - 1].kind === 'change')) i -= 1;
+  return i;
+}

client/src/components/Assistant/cards/bookDesign/bookDesignModel.ts

@@ -37,6 +37,11 @@ const STYLE_LOOK: Readonly<Record<BookDesignStyle, { labelKey: string }>> = {
   nordic: { labelKey: 'studio.theme.name.nordic' },
   alpine: { labelKey: 'studio.theme.name.alpine' },
   'india-stamp': { labelKey: 'studio.theme.name.indiaStamp' },
+  riso: { labelKey: 'studio.theme.name.riso' },
+  magazine: { labelKey: 'studio.theme.name.magazine' },
+  'retro-travel': { labelKey: 'studio.theme.name.retroTravel' },
+  midnight: { labelKey: 'studio.theme.name.midnight' },
+  'field-notes': { labelKey: 'studio.theme.name.fieldNotes' },
 };
 
 type Translate = (key: string, params?: Record<string, string | number>) => string;

client/src/components/Assistant/cards/cardLooks.test.ts

@@ -65,6 +65,13 @@ describe('cardLooks', () => {
     }
   });
 
+  it('FE-AI-LOOK-003b: a file kept from the chat opens the trip Files and shows nothing on the map', () => {
+    const kept: AssistantApplied = { toolCallId: 'k', entity: 'file', ids: [], dayId: null, undoUntil: null };
+    expect(ENTITY_LOOK.file.open?.(kept, null)).toEqual({ kind: 'tab', tab: 'dateien' });
+    expect(ENTITY_LOOK.file.onMap).toBeUndefined();
+    expect(ENTITY_LOOK.file.openLabelKey).toBe('assistant.card.file.open');
+  });
+
   it('FE-AI-LOOK-004: every kind has a look and a view; a pending view groups by kind and gives way to nothing', () => {
     expect(Object.keys(CARD_LOOKS).sort()).toEqual([...KINDS].sort());
     expect(Object.keys(CARD_VIEWS).sort()).toEqual([...KINDS].sort());

client/src/components/Assistant/cards/cardLooks.ts

@@ -5,6 +5,9 @@ import {
   CalendarMinus,
   CalendarPlus,
   Circle,
+  FileSearch,
+  FileText,
+  FolderInput,
   ListTodo,
   Luggage,
   MapPin,
@@ -63,6 +66,8 @@ export const VERB_LOOK: Readonly<Record<AssistantChangeVerbKey, VerbLook>> = {
   addReservation: { Icon: Ticket, tone: 'success', labelKey: 'assistant.change.verb.addReservation' },
   importBooking: { Icon: Ticket, tone: 'success', labelKey: 'assistant.change.verb.importBooking' },
   rememberNote: { Icon: NotebookPen, tone: 'info', labelKey: 'assistant.change.verb.rememberNote' },
+  readAttachment: { Icon: FileSearch, tone: 'info', labelKey: 'assistant.change.verb.readAttachment' },
+  keepFile: { Icon: FolderInput, tone: 'success', labelKey: 'assistant.change.verb.keepFile' },
   importTour: { Icon: Plus, tone: 'success', labelKey: 'assistant.change.verb.importTour' },
   genericCreate: { Icon: Plus, tone: 'success', labelKey: 'assistant.change.verb.genericCreate' },
   genericUpdate: { Icon: PencilLine, tone: 'info', labelKey: 'assistant.change.verb.genericUpdate' },
@@ -159,6 +164,7 @@ export const STEP_LOOKS: Readonly<Partial<Record<string, StepLook>>> = {
   },
   search_help: { stepKey: 'assistant.step.help' },
   read_booking_file: { stepKey: 'assistant.step.readingBooking' },
+  read_attached_file: { stepKey: 'assistant.step.readingAttachment' },
   ...TOUR_LOOK.steps,
   ...ROADTRIP_LOOK.steps,
   ...BUDGET_LOOK.steps,
@@ -193,6 +199,8 @@ export const ENTITY_LOOK: Readonly<Record<AssistantApplied['entity'], EntityLook
   assignment: { Icon: CalendarDays, onMap: BY_DAY },
   day_note: { Icon: StickyNote, onMap: BY_DAY },
   memory: { Icon: NotebookPen },
+  // A file kept from the chat: it opens the trip's Files.
+  file: { Icon: FileText, openLabelKey: 'assistant.card.file.open', open: () => ({ kind: 'tab', tab: 'dateien' }) },
   other: { Icon: Circle },
   ...TOUR_LOOK.entities,
   ...ROADTRIP_LOOK.entities,

client/src/components/Assistant/useRevealAnswerTail.test.tsx

@@ -0,0 +1,109 @@
+/**
+ * FE-AI-REVEAL-001 to FE-AI-REVEAL-007
+ *
+ * Once an answer is written, its closing words and changes come into view,
+ * unless the user scrolled the thread themselves while it was written; and
+ * where that end begins in an answer's blocks.
+ */
+import { useRef } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { fireEvent, render } from '../../../tests/helpers/render';
+import { type MessageBlock, tailStart } from './assistantParts';
+import { tailScrollTop, useRevealAnswerTail } from './useRevealAnswerTail';
+
+/** A viewport of 400px holding 1200px, its tail mark 900px down, scrolled to `scrollTop`. */
+function lay(viewport: HTMLElement, { tailAt = 900, scrollTop = 0, height = 1200 } = {}) {
+  Object.defineProperty(viewport, 'clientHeight', { configurable: true, value: 400 });
+  Object.defineProperty(viewport, 'scrollHeight', { configurable: true, value: height });
+  viewport.scrollTop = scrollTop;
+  viewport.getBoundingClientRect = () => ({ top: 100 }) as DOMRect;
+  const tail = viewport.querySelector('[data-assistant-tail]') as HTMLElement | null;
+  if (tail) tail.getBoundingClientRect = () => ({ top: 100 + tailAt - scrollTop }) as DOMRect;
+}
+
+function Thread({ running }: { running: boolean }) {
+  const ref = useRef<HTMLDivElement>(null);
+  useRevealAnswerTail(ref, running);
+  return (
+    <div ref={ref} data-testid="viewport" tabIndex={0}>
+      <span data-assistant-tail />
+    </div>
+  );
+}
+
+const block = (kind: MessageBlock['kind']) => ({ kind, key: kind }) as MessageBlock;
+
+describe('useRevealAnswerTail', () => {
+  let scrollTo: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    scrollTo = vi.fn();
+    HTMLElement.prototype.scrollTo = scrollTo as unknown as HTMLElement['scrollTo'];
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+  });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('FE-AI-REVEAL-001: brings the end of the answer into view once it is written', () => {
+    const view = render(<Thread running />);
+    lay(view.getByTestId('viewport'), { height: 2000 });
+    view.rerender(<Thread running={false} />);
+    expect(scrollTo).toHaveBeenCalledWith(expect.objectContaining({ top: 888 }));
+  });
+
+  it('FE-AI-REVEAL-002: leaves the thread where the user scrolled it while the answer was written', () => {
+    const view = render(<Thread running />);
+    const viewport = view.getByTestId('viewport');
+    lay(viewport);
+    fireEvent.wheel(viewport, { deltaY: 120 });
+    view.rerender(<Thread running={false} />);
+    expect(scrollTo).not.toHaveBeenCalled();
+  });
+
+  it('FE-AI-REVEAL-003: does nothing on the first render or while nothing runs', () => {
+    const view = render(<Thread running={false} />);
+    lay(view.getByTestId('viewport'));
+    view.rerender(<Thread running={false} />);
+    expect(scrollTo).not.toHaveBeenCalled();
+  });
+
+  it('FE-AI-REVEAL-004: a new answer reveals its end again after an earlier one was scrolled by hand', () => {
+    const view = render(<Thread running />);
+    const viewport = view.getByTestId('viewport');
+    lay(viewport);
+    fireEvent.wheel(viewport, { deltaY: 120 });
+    view.rerender(<Thread running={false} />);
+    view.rerender(<Thread running />);
+    view.rerender(<Thread running={false} />);
+    expect(scrollTo).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('tailScrollTop', () => {
+  it('FE-AI-REVEAL-005: stops at the bottom when the end is shorter than the view, and never scrolls up', () => {
+    const viewport = document.createElement('div');
+    viewport.innerHTML = '<span data-assistant-tail></span>';
+    lay(viewport, { tailAt: 1100 });
+    expect(tailScrollTop(viewport)).toBe(800);
+    lay(viewport, { tailAt: 300, scrollTop: 500 });
+    expect(tailScrollTop(viewport)).toBeNull();
+  });
+
+  it('FE-AI-REVEAL-006: without a mark there is nothing to reveal', () => {
+    const viewport = document.createElement('div');
+    lay(viewport);
+    expect(tailScrollTop(viewport)).toBeNull();
+  });
+});
+
+describe('tailStart', () => {
+  it('FE-AI-REVEAL-007: the end begins after the last step, strip or card', () => {
+    expect(tailStart([block('steps'), block('places'), block('text'), block('change')])).toBe(2);
+    expect(tailStart([block('text'), block('places')])).toBe(2);
+    expect(tailStart([block('text'), block('change')])).toBe(0);
+    expect(tailStart([])).toBe(0);
+  });
+});

client/src/components/Assistant/useRevealAnswerTail.ts

@@ -0,0 +1,61 @@
+import { type RefObject, useEffect, useRef } from 'react';
+
+import { prefersReducedMotion } from '../../utils/reducedMotion';
+
+/** Room left above the tail, so its first line does not sit flush on the edge. */
+const TAIL_GAP = 12;
+/** What reading the thread by hand looks like while the answer is written. */
+const OWN_SCROLL = ['wheel', 'touchmove', 'keydown'] as const;
+
+/**
+ * Where to scroll so the end of the latest answer is in view: the start of its
+ * closing text and proposed changes (the `data-assistant-tail` mark), or the
+ * very bottom when that tail is shorter than the view. Null when it is in view
+ * already, so the thread never moves up.
+ */
+export function tailScrollTop(viewport: HTMLElement): number | null {
+  const marks = viewport.querySelectorAll('[data-assistant-tail]');
+  const tail = marks[marks.length - 1];
+  if (!tail) return null;
+  const offset = tail.getBoundingClientRect().top - viewport.getBoundingClientRect().top + viewport.scrollTop;
+  const target = Math.min(offset - TAIL_GAP, viewport.scrollHeight - viewport.clientHeight);
+  return target > viewport.scrollTop + 1 ? target : null;
+}
+
+/**
+ * A new question moves to the top of the view, so its answer reads from the
+ * first line. A long answer (steps, a strip of places found, cards) then ends
+ * below the view, and its closing words and the changes to apply were never
+ * seen. Once the answer is written, this brings that end into view, unless the
+ * user scrolled the thread themselves while it was written.
+ */
+export function useRevealAnswerTail(viewport: RefObject<HTMLElement | null>, isRunning: boolean): void {
+  const scrolledByHand = useRef(false);
+  const wasRunning = useRef(isRunning);
+
+  useEffect(() => {
+    const el = viewport.current;
+    if (!el || !isRunning) return;
+    scrolledByHand.current = false;
+    const mark = () => {
+      scrolledByHand.current = true;
+    };
+    for (const type of OWN_SCROLL) el.addEventListener(type, mark, { passive: true });
+    return () => {
+      for (const type of OWN_SCROLL) el.removeEventListener(type, mark);
+    };
+  }, [viewport, isRunning]);
+
+  useEffect(() => {
+    const ended = wasRunning.current && !isRunning;
+    wasRunning.current = isRunning;
+    const el = viewport.current;
+    if (!ended || !el || scrolledByHand.current) return;
+    // A frame later, so the answer's last blocks have their height.
+    const frame = requestAnimationFrame(() => {
+      const top = tailScrollTop(el);
+      if (top !== null) el.scrollTo({ top, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [viewport, isRunning]);
+}

client/src/components/Help/helpIcons.ts

@@ -6,6 +6,7 @@ import {
   Book, Palette, Map, Bell, Plug, CloudOff, User, Lock, ShieldCheck, Fingerprint, KeyRound,
   Route, Users, UserRound, Crown, PanelLeftClose, Undo2, Ticket, Train, Plane, ListChecks, Wallet, FolderOpen, MessagesSquare,
   ArrowUpDown, Backpack, BatteryCharging, BedDouble, BellRing, Bike, Blocks, CableCar, Car, CloudDownload, CopyPlus, FileDown, FilePen, FileSpreadsheet, FolderInput, Footprints, History, Info, Layers, MailCheck, MapPinned, Moon, Mountain, MountainSnow, MoveRight, NotebookPen, PackagePlus, Pin, Receipt, Rotate3d, RouteOff, Shuffle, Spline, TriangleAlert, Waves, Wind,
+  PaintBucket, Sticker, Type,
   type LucideIcon,
 } from 'lucide-react'
 import type { HelpIcon } from '../../help/types'
@@ -13,6 +14,9 @@ import type { HelpIcon } from '../../help/types'
 /** The registry names icons; the components draw them. Unknown names fall back to the compass. */
 const ICONS: Record<HelpIcon, LucideIcon> = {
   plus: Plus,
+  sticker: Sticker,
+  type: Type,
+  paintBucket: PaintBucket,
   pencil: Pencil,
   image: Image,
   copy: Copy,

client/src/components/Journey/JourneyShareSection.test.tsx

@@ -1,4 +1,4 @@
-// FE-JRN-SHARE-001 to FE-JRN-SHARE-014
+// FE-JRN-SHARE-001 to FE-JRN-SHARE-015
 
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 import { http, HttpResponse, delay } from 'msw'
@@ -245,4 +245,15 @@ describe('JourneyShareSection', () => {
     expect(plan).toHaveAttribute('aria-pressed', 'false')
     expect(screen.getByRole('button', { name: /Recorded routes/ })).toBeDisabled()
   })
+
+  it('FE-JRN-SHARE-015: a filled accent button sets its words in the colour made for it, not in the accent itself', async () => {
+    server.use(http.get('/api/journeys/7/share-link', () => HttpResponse.json({ link: existingLink() })))
+    render(<JourneyShareSection journeyId={JOURNEY_ID} />)
+
+    const filled = [await screen.findByRole('button', { name: 'Timeline' }), screen.getByRole('button', { name: 'Copy' })]
+    for (const button of filled) {
+      expect(button.className).toContain('text-accent-text')
+      expect(button.className).not.toContain('text-accent-on')
+    }
+  })
 })

client/src/components/Journey/JourneyShareSection.tsx

@@ -69,7 +69,7 @@ export default function JourneyShareSection({ journeyId }: { journeyId: number }
             <span className="flex-1 text-caption text-content-muted truncate">{shareUrl}</span>
             <button type="button"
               onClick={copyLink}
-              className="flex-shrink-0 px-3 py-1.5 rounded-full bg-accent text-accent-on text-caption font-semibold hover:bg-accent-hover transition-colors"
+              className="flex-shrink-0 px-3 py-1.5 rounded-full bg-accent text-accent-text text-caption font-semibold hover:bg-accent-hover transition-colors"
             >
               {copied ? t('journey.share.copied') : t('journey.share.copy')}
             </button>
@@ -94,7 +94,7 @@ export default function JourneyShareSection({ journeyId }: { journeyId: number }
                 onClick={() => togglePerm(key)}
                 className={`flex items-center gap-2.5 px-3 py-2 rounded-xl border text-body font-medium transition-all ${
                   link[key]
-                    ? 'border-accent bg-accent text-accent-on'
+                    ? 'border-accent bg-accent text-accent-text'
                     : 'border-edge text-content-muted hover:border-content-faint'
                 }`}
               >

client/src/components/Layout/InAppNotificationBell.tsx

@@ -5,7 +5,7 @@ import { Bell, Trash2, CheckCheck } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { useInAppNotificationStore } from '../../store/inAppNotificationStore.ts'
 import { useAuthStore } from '../../store/authStore'
-import InAppNotificationItem from '../Notifications/InAppNotificationItem.tsx'
+import NotificationDayList from '../Notifications/NotificationDayList'
 import ConfirmDialog from '../shared/ConfirmDialog'
 
 export default function InAppNotificationBell(): React.ReactElement {
@@ -73,9 +73,9 @@ export default function InAppNotificationBell(): React.ReactElement {
               position: 'fixed',
               top: 'var(--nav-h)',
               insetInlineEnd: 8,
-              width: 380,
+              width: 400,
               maxWidth: 'calc(100vw - 16px)',
-              maxHeight: 'min(480px, calc(100vh - var(--nav-h) - 16px))',
+              maxHeight: 'min(560px, calc(100vh - var(--nav-h) - 16px))',
               zIndex: 9999,
               display: 'flex',
               flexDirection: 'column',
@@ -119,7 +119,7 @@ export default function InAppNotificationBell(): React.ReactElement {
             </div>
 
             {/* Notification list */}
-            <div className="overflow-y-auto flex-1 py-1 border-t border-edge-secondary">
+            <div className="overflow-y-auto flex-1 pb-1 border-t border-edge-secondary">
               {isLoading && notifications.length === 0 ? (
                 <div className="flex items-center justify-center py-10">
                   <div className="w-5 h-5 border-2 rounded-full animate-spin border-edge border-t-content" />
@@ -133,9 +133,7 @@ export default function InAppNotificationBell(): React.ReactElement {
                   <p className="text-caption text-content-muted">{t('notifications.emptyDescription')}</p>
                 </div>
               ) : (
-                notifications.slice(0, 10).map(n => (
-                  <InAppNotificationItem key={n.id} notification={n} onClose={() => setOpen(false)} />
-                ))
+                <NotificationDayList notifications={notifications.slice(0, 10)} onClose={() => setOpen(false)} compact />
               )}
             </div>
 

client/src/components/Notifications/InAppNotificationItem.tsx

@@ -1,29 +1,53 @@
 import React from 'react'
-import { User, Check, X, ArrowRight, Trash2, CheckCheck, Mail } from 'lucide-react'
+import { Check, X, ArrowRight, Trash2, CheckCheck, Mail } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import type { InAppNotification } from '../../store/inAppNotificationStore'
 import { compactTime, useNotificationItemActions } from './useNotificationItemActions'
-
-function relativeTime(dateStr: string, locale: string): string {
-  return compactTime(dateStr, locale === 'ar' ? 'الآن' : 'just now')
-}
+import { KIND_LOOK, createdAt, kindOf } from './notificationModel'
 
 interface NotificationItemProps {
   notification: InAppNotification
   onClose?: () => void
 }
 
-/** The round tool beside a notification, quiet until it is pointed at. */
-const TOOL = 'grid place-items-center w-7 h-7 rounded-lg transition-colors text-content-faint hover:text-content hover:bg-surface-card focus-visible:bg-surface-card focus-visible:text-content'
+/** The quiet tool beside a notification, forward only when it is pointed at. */
+const TOOL = 'grid place-items-center w-7 h-7 rounded-lg transition-colors text-content-faint hover:text-content hover:bg-surface-secondary focus-visible:bg-surface-secondary focus-visible:text-content'
 
-/** An answer or a way on, as a pill under the words. */
-const PILL = 'inline-flex items-center gap-1.5 h-7 px-3 rounded-full text-caption font-medium transition-colors'
+/** An answer or a way on, as a button under the words. */
+const ACTION = 'inline-flex items-center gap-1.5 h-8 px-3 rounded-lg text-caption font-semibold transition-colors'
+
+/** Under an hour it reads "5m"; after that the clock time, since the list is headed by its day. */
+function timeOf(value: string, locale: string, justNow: string): string {
+  const date = createdAt(value)
+  if (Date.now() - date.getTime() < 3_600_000) return compactTime(date.toISOString(), justNow)
+  return new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' }).format(date)
+}
+
+/** The tile on the start side: the kind's symbol on its colour, and who sent it as a small face on its corner. */
+function KindTile({ notification }: { notification: InAppNotification }) {
+  const { icon: Icon, tone } = KIND_LOOK[kindOf(notification.title_key)]
+  const initial = notification.sender_username?.charAt(0).toUpperCase()
+  return (
+    <span className="relative block self-start flex-shrink-0">
+      <span className={`grid place-items-center w-10 h-10 rounded-xl ${tone}`}>
+        <Icon className="w-[18px] h-[18px]" aria-hidden />
+      </span>
+      {notification.sender_avatar ? (
+        <img src={notification.sender_avatar} alt="" className="absolute -bottom-1 -end-1 w-5 h-5 rounded-full object-cover ring-2 ring-surface-card" />
+      ) : initial ? (
+        <span aria-hidden className="absolute -bottom-1 -end-1 grid place-items-center w-5 h-5 rounded-full text-caption leading-none font-bold bg-accent text-accent-text ring-2 ring-surface-card">
+          {initial}
+        </span>
+      ) : null}
+    </span>
+  )
+}
 
 /**
- * One notification, as a card in the list: who sent it, what it says, and what
- * can be done with it. Unread ones carry a dot in the accent and a faint
- * ground; the tools to mark and delete come forward when the card is pointed
- * at or focused, so a list reads as messages rather than as rows of buttons.
+ * One notification: a tile that says at a glance what it is about and who sent
+ * it, the message itself, and what can be done with it. Unread ones are set in
+ * bold with a dot in the accent; marking and deleting come forward when the row
+ * is pointed at or focused, so a list reads as messages rather than as buttons.
  */
 export default function InAppNotificationItem({ notification, onClose }: NotificationItemProps): React.ReactElement {
   const { t, locale } = useTranslation()
@@ -32,112 +56,96 @@ export default function InAppNotificationItem({ notification, onClose }: Notific
 
   const titleText = t(notification.title_key, notification.title_params)
   const bodyText = t(notification.text_key, notification.text_params)
-  const hasUnknownTitle = titleText === notification.title_key
-  const hasUnknownBody = bodyText === notification.text_key
   const unread = !notification.is_read
   const answered = notification.response !== null
+  const { positive_text_key: yesKey, negative_text_key: noKey, navigate_text_key: goKey } = notification
+  const asks = notification.type === 'boolean' && yesKey && noKey
+  const leads = notification.type === 'navigate' && goKey && notification.navigate_target
 
   return (
-    <div
-      className={`group relative mx-2 my-1 rounded-xl px-3 py-3 transition-colors hover:bg-surface-hover focus-within:bg-surface-hover ${unread ? 'bg-surface-secondary' : ''}`}
-    >
-      {unread && <span aria-hidden className="absolute start-1 top-5 w-1.5 h-1.5 rounded-full bg-accent" />}
+    <div className="group relative flex gap-3.5 px-4 py-3.5 transition-colors hover:bg-surface-hover focus-within:bg-surface-hover">
+      <KindTile notification={notification} />
 
-      <div className="flex gap-3 items-start">
-        {/* Sender avatar */}
-        <div className="flex-shrink-0">
-          {notification.sender_avatar ? (
-            <img src={notification.sender_avatar} alt="" className="w-9 h-9 rounded-xl object-cover" />
-          ) : (
-            <div className="w-9 h-9 rounded-xl flex items-center justify-center text-body font-semibold text-accent bg-accent-subtle">
-              {notification.sender_username
-                ? notification.sender_username.charAt(0).toUpperCase()
-                : <User className="w-4 h-4" />}
-            </div>
-          )}
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-start justify-between gap-2">
-            <p className={`text-body leading-snug text-content ${unread ? 'font-semibold' : 'font-medium'}`}>
-              {hasUnknownTitle ? notification.title_key : titleText}
-            </p>
-            <div className="relative flex-shrink-0 h-7 flex items-center">
-              <span className="text-caption tabular-nums text-content-faint transition-opacity group-hover:opacity-0 group-focus-within:opacity-0">
-                {relativeTime(notification.created_at, locale)}
-              </span>
-              <div className="absolute end-0 top-0 flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
-                {notification.is_read ? (
-                  <button type="button" onClick={() => markUnread(notification.id)} title={t('notifications.markUnread')} aria-label={t('notifications.markUnread')} className={TOOL}>
-                    <Mail className="w-3.5 h-3.5" />
-                  </button>
-                ) : (
-                  <button type="button" onClick={() => markRead(notification.id)} title={t('notifications.markRead')} aria-label={t('notifications.markRead')} className={TOOL}>
-                    <CheckCheck className="w-3.5 h-3.5" />
-                  </button>
-                )}
-                <button
-                  type="button"
-                  onClick={() => deleteNotification(notification.id)}
-                  title={t('notifications.delete')}
-                  aria-label={t('notifications.delete')}
-                  className={`${TOOL} hover:text-danger focus-visible:text-danger`}
-                >
-                  <Trash2 className="w-3.5 h-3.5" />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-start justify-between gap-3">
+          <p className={`text-body leading-snug text-content ${unread ? 'font-semibold' : 'font-medium'}`}>{titleText}</p>
+          <div className="relative flex-shrink-0 h-6 flex items-center gap-2">
+            <span className="text-caption tabular-nums text-content-faint transition-opacity group-hover:opacity-0 group-focus-within:opacity-0">
+              {timeOf(notification.created_at, locale, t('common.justNow'))}
+            </span>
+            {unread && (
+              <span aria-hidden className="w-2 h-2 rounded-full bg-accent transition-opacity group-hover:opacity-0 group-focus-within:opacity-0" />
+            )}
+            <div className="absolute end-0 top-1/2 -translate-y-1/2 flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+              {notification.is_read ? (
+                <button type="button" onClick={() => markUnread(notification.id)} title={t('notifications.markUnread')} aria-label={t('notifications.markUnread')} className={TOOL}>
+                  <Mail className="w-3.5 h-3.5" />
                 </button>
-              </div>
+              ) : (
+                <button type="button" onClick={() => markRead(notification.id)} title={t('notifications.markRead')} aria-label={t('notifications.markRead')} className={TOOL}>
+                  <CheckCheck className="w-3.5 h-3.5" />
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={() => deleteNotification(notification.id)}
+                title={t('notifications.delete')}
+                aria-label={t('notifications.delete')}
+                className={`${TOOL} hover:text-danger focus-visible:text-danger`}
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+              </button>
             </div>
           </div>
+        </div>
 
-          <p className="text-caption mt-0.5 leading-relaxed text-content-muted">
-            {hasUnknownBody ? notification.text_key : bodyText}
-          </p>
+        <p className="text-body mt-0.5 leading-relaxed text-content-muted">{bodyText}</p>
 
-          {/* Boolean actions */}
-          {notification.type === 'boolean' && notification.positive_text_key && notification.negative_text_key && (
-            <div className="flex gap-2 mt-2.5">
-              <button
-                type="button"
-                onClick={() => handleRespond('positive')}
-                disabled={responding || answered}
-                className={`${PILL} ${
-                  notification.response === 'positive'
-                    ? 'bg-accent text-accent-text'
-                    : `bg-surface-card shadow-sm ${notification.response === 'negative' ? 'text-content-faint opacity-50' : 'text-content hover:bg-surface-tertiary'}`
-                } ${answered || responding ? 'cursor-default' : 'cursor-pointer'}`}
-              >
-                <Check className="w-3.5 h-3.5" />
-                {t(notification.positive_text_key)}
-              </button>
-              <button
-                type="button"
-                onClick={() => handleRespond('negative')}
-                disabled={responding || answered}
-                className={`${PILL} ${
-                  notification.response === 'negative'
-                    ? 'bg-danger text-white'
-                    : `bg-surface-card shadow-sm ${notification.response === 'positive' ? 'text-content-faint opacity-50' : 'text-content hover:bg-surface-tertiary'}`
-                } ${answered || responding ? 'cursor-default' : 'cursor-pointer'}`}
-              >
-                <X className="w-3.5 h-3.5" />
-                {t(notification.negative_text_key)}
-              </button>
-            </div>
-          )}
-
-          {/* Navigate action */}
-          {notification.type === 'navigate' && notification.navigate_text_key && notification.navigate_target && (
+        {asks && (
+          <div className="flex flex-wrap gap-2 mt-3">
             <button
               type="button"
-              onClick={handleNavigate}
-              className={`${PILL} mt-2.5 bg-surface-card shadow-sm text-content hover:bg-accent hover:text-accent-text focus-visible:bg-accent focus-visible:text-accent-text`}
+              onClick={() => handleRespond('positive')}
+              disabled={responding || answered}
+              className={`${ACTION} ${
+                notification.response === 'positive'
+                  ? 'bg-success-soft text-success'
+                  : answered
+                    ? 'border border-edge text-content-faint'
+                    : 'bg-accent text-accent-text hover:bg-accent-hover'
+              } disabled:cursor-default`}
             >
-              {t(notification.navigate_text_key)}
-              <ArrowRight className="w-3.5 h-3.5 rtl:-scale-x-100" />
+              <Check className="w-3.5 h-3.5" />
+              {t(yesKey)}
             </button>
-          )}
-        </div>
+            <button
+              type="button"
+              onClick={() => handleRespond('negative')}
+              disabled={responding || answered}
+              className={`${ACTION} ${
+                notification.response === 'negative'
+                  ? 'bg-danger-soft text-danger'
+                  : answered
+                    ? 'border border-edge text-content-faint'
+                    : 'border border-edge text-content hover:bg-surface-secondary'
+              } disabled:cursor-default`}
+            >
+              <X className="w-3.5 h-3.5" />
+              {t(noKey)}
+            </button>
+          </div>
+        )}
+
+        {leads && (
+          <button
+            type="button"
+            onClick={handleNavigate}
+            className={`${ACTION} mt-3 border border-edge text-content hover:bg-accent hover:text-accent-text hover:border-transparent focus-visible:bg-accent focus-visible:text-accent-text`}
+          >
+            {t(goKey)}
+            <ArrowRight className="w-3.5 h-3.5 rtl:-scale-x-100" />
+          </button>
+        )}
       </div>
     </div>
   )

client/src/components/Notifications/NotificationDayList.tsx

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from '../../i18n';
+import type { InAppNotification } from '../../store/inAppNotificationStore';
+import InAppNotificationItem from './InAppNotificationItem';
+import { groupByDay } from './notificationModel';
+
+interface NotificationDayListProps {
+  notifications: InAppNotification[];
+  /** Closes the bell's panel after a notification led somewhere. */
+  onClose?: () => void;
+  /** The bell's panel: headings stick to its top and the days need no cards of their own. */
+  compact?: boolean;
+}
+
+/**
+ * The notifications cut into days, each under its heading (Today, Yesterday,
+ * a weekday, then the date). On the page every day is a card of its own; in
+ * the bell's panel the headings stay at the top while the day scrolls by.
+ */
+export default function NotificationDayList({
+  notifications,
+  onClose,
+  compact = false,
+}: NotificationDayListProps): React.ReactElement {
+  const { locale } = useTranslation();
+  const groups = useMemo(() => groupByDay(notifications, locale), [notifications, locale]);
+
+  return (
+    <div className={compact ? '' : 'flex flex-col gap-6'}>
+      {groups.map((group) => (
+        <section key={group.key} aria-label={group.label}>
+          <h2
+            className={
+              compact
+                ? 'sticky top-0 z-10 bg-surface-card px-4 pb-1.5 pt-3 text-caption font-semibold text-content-muted'
+                : 'mb-2 px-1 text-caption font-semibold text-content-muted'
+            }
+          >
+            {group.label}
+          </h2>
+          <div
+            className={
+              compact
+                ? 'divide-y divide-edge-secondary'
+                : 'divide-y divide-edge-secondary overflow-hidden rounded-2xl border border-edge bg-surface-card'
+            }
+          >
+            {group.items.map((n) => (
+              <InAppNotificationItem key={n.id} notification={n} onClose={onClose} />
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

client/src/components/Notifications/notificationModel.test.tsx

@@ -0,0 +1,91 @@
+/**
+ * FE-NOTIF-MODEL-001 to FE-NOTIF-MODEL-007
+ *
+ * What a notification's tile shows, how the server's time is read, and how the
+ * list is cut into days under headings in the reader's language.
+ */
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from '../../../tests/helpers/render';
+import type { InAppNotification } from '../../store/inAppNotificationStore';
+import NotificationDayList from './NotificationDayList';
+import { KIND_LOOK, createdAt, dayLabel, groupByDay, kindOf } from './notificationModel';
+
+const note = (id: number, created_at: string, title_key = 'notif.trip_invite.title'): InAppNotification => ({
+  id,
+  type: 'simple',
+  scope: 'trip',
+  target: 1,
+  sender_id: null,
+  sender_username: null,
+  sender_avatar: null,
+  recipient_id: 1,
+  title_key,
+  title_params: {},
+  text_key: 'notifications.empty',
+  text_params: {},
+  positive_text_key: null,
+  negative_text_key: null,
+  response: null,
+  navigate_text_key: null,
+  navigate_target: null,
+  is_read: false,
+  created_at,
+});
+
+const NOW = new Date(2026, 9, 24, 15, 0);
+const at = (days: number, hour = 10) => new Date(2026, 9, 24 - days, hour, 0);
+
+describe('notificationModel', () => {
+  it('FE-NOTIF-MODEL-001: every known title has its kind, anything else is the plain bell', () => {
+    expect(kindOf('notif.collab_message.title')).toBe('message');
+    expect(kindOf('notif.replica_failure.title')).toBe('alert');
+    expect(kindOf('plugin.something.title')).toBe('other');
+    for (const look of Object.values(KIND_LOOK)) expect(look.tone).toMatch(/^bg-/);
+  });
+
+  it("FE-NOTIF-MODEL-002: the server's UTC text is read as UTC, an ISO string as it is", () => {
+    expect(createdAt('2026-10-24 08:30:00').toISOString()).toBe('2026-10-24T08:30:00.000Z');
+    expect(createdAt('2026-10-24T08:30:00.000Z').toISOString()).toBe('2026-10-24T08:30:00.000Z');
+  });
+
+  it('FE-NOTIF-MODEL-003: today and yesterday by name, the week by weekday, older by date', () => {
+    expect(dayLabel(at(0), 'en', NOW)).toBe('Today');
+    expect(dayLabel(at(1), 'en', NOW)).toBe('Yesterday');
+    expect(dayLabel(at(3), 'en', NOW)).toBe('Wednesday');
+    expect(dayLabel(at(20), 'en', NOW)).toBe('October 4');
+    expect(dayLabel(new Date(2025, 11, 31), 'en', NOW)).toBe('December 31, 2025');
+  });
+
+  it('FE-NOTIF-MODEL-004: the headings follow the language', () => {
+    expect(dayLabel(at(0), 'de', NOW)).toBe('Heute');
+    expect(dayLabel(at(1), 'de', NOW)).toBe('Gestern');
+  });
+
+  it('FE-NOTIF-MODEL-005: the list is cut into days in the order it came', () => {
+    const groups = groupByDay(
+      [note(1, at(0, 12).toISOString()), note(2, at(0, 9).toISOString()), note(3, at(2).toISOString())],
+      'en',
+      NOW
+    );
+    expect(groups.map((g) => [g.label, g.items.map((n) => n.id)])).toEqual([
+      ['Today', [1, 2]],
+      ['Thursday', [3]],
+    ]);
+  });
+
+  it('FE-NOTIF-MODEL-006: an empty list has no days', () => {
+    expect(groupByDay([], 'en', NOW)).toEqual([]);
+  });
+});
+
+describe('NotificationDayList', () => {
+  it('FE-NOTIF-MODEL-007: each day is a section under its heading', () => {
+    const now = new Date();
+    const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 12);
+    render(<NotificationDayList notifications={[note(1, now.toISOString()), note(2, yesterday.toISOString())]} />);
+    expect(screen.getByRole('heading', { name: 'Today' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Yesterday' })).toBeInTheDocument();
+    expect(screen.getAllByRole('region')).toHaveLength(2);
+  });
+});

client/src/components/Notifications/notificationModel.ts

@@ -0,0 +1,119 @@
+import type { LucideIcon } from 'lucide-react';
+import {
+  Backpack,
+  Bell,
+  BookmarkPlus,
+  CalendarDays,
+  Images,
+  ListChecks,
+  MessageCircle,
+  Mountain,
+  Plane,
+  Sparkles,
+  Ticket,
+  TriangleAlert,
+} from 'lucide-react';
+
+import type { InAppNotification } from '../../store/inAppNotificationStore';
+
+/** What a notification is about, read from its title key: it picks the symbol and colour of its tile. */
+export type NotificationKind =
+  | 'trip'
+  | 'message'
+  | 'booking'
+  | 'packing'
+  | 'todo'
+  | 'vacay'
+  | 'collection'
+  | 'photos'
+  | 'tour'
+  | 'update'
+  | 'alert'
+  | 'other';
+
+const KIND_BY_TITLE: Record<string, NotificationKind> = {
+  'notif.trip_invite.title': 'trip',
+  'notif.trip_reminder.title': 'trip',
+  'notif.collab_message.title': 'message',
+  'notif.booking_change.title': 'booking',
+  'notif.packing_tagged.title': 'packing',
+  'notif.todo_due.title': 'todo',
+  'notif.vacay_invite.title': 'vacay',
+  'notif.vacay_share.title': 'vacay',
+  'notif.collection_invite.title': 'collection',
+  'notif.photos_shared.title': 'photos',
+  'notif.wanderer_source_hint.title': 'tour',
+  'notif.paddle_region_requested.title': 'tour',
+  'notif.version_available.title': 'update',
+  'notifications.versionAvailable.title': 'update',
+  'notif.replica_failure.title': 'alert',
+  'notifications.synologySessionCleared.title': 'alert',
+};
+
+export function kindOf(titleKey: string): NotificationKind {
+  return KIND_BY_TITLE[titleKey] ?? 'other';
+}
+
+/** The symbol of each kind and the tinted tile it sits on. */
+export const KIND_LOOK: Record<NotificationKind, { icon: LucideIcon; tone: string }> = {
+  trip: { icon: Plane, tone: 'bg-info-soft text-info' },
+  message: { icon: MessageCircle, tone: 'bg-success-soft text-success' },
+  booking: { icon: Ticket, tone: 'bg-warning-soft text-warning' },
+  packing: { icon: Backpack, tone: 'bg-warning-soft text-warning' },
+  todo: { icon: ListChecks, tone: 'bg-success-soft text-success' },
+  vacay: { icon: CalendarDays, tone: 'bg-info-soft text-info' },
+  collection: { icon: BookmarkPlus, tone: 'bg-accent-subtle text-accent' },
+  photos: { icon: Images, tone: 'bg-warning-soft text-warning' },
+  tour: { icon: Mountain, tone: 'bg-success-soft text-success' },
+  update: { icon: Sparkles, tone: 'bg-accent-subtle text-accent' },
+  alert: { icon: TriangleAlert, tone: 'bg-danger-soft text-danger' },
+  other: { icon: Bell, tone: 'bg-surface-secondary text-content-secondary' },
+};
+
+/**
+ * When a notification was made. The server writes `YYYY-MM-DD HH:MM:SS` in UTC,
+ * which a bare `new Date()` would read as local time.
+ */
+export function createdAt(value: string): Date {
+  return new Date(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}/.test(value) ? `${value.replace(' ', 'T')}Z` : value);
+}
+
+const dayStart = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+
+/**
+ * The heading of the day a notification belongs to, in the reader's language:
+ * today and yesterday by name, the rest of the week by weekday, anything older
+ * by its date (with the year when it is not this one).
+ */
+export function dayLabel(date: Date, locale: string, now: Date = new Date()): string {
+  const days = Math.round((dayStart(now) - dayStart(date)) / 86_400_000);
+  if (days <= 1) {
+    const word = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(-Math.max(days, 0), 'day');
+    return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);
+  }
+  if (days < 7) return new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(date);
+  return new Intl.DateTimeFormat(locale, {
+    day: 'numeric',
+    month: 'long',
+    ...(date.getFullYear() === now.getFullYear() ? {} : { year: 'numeric' }),
+  }).format(date);
+}
+
+export interface NotificationGroup {
+  key: string;
+  label: string;
+  items: InAppNotification[];
+}
+
+/** The list cut into days, in the order it came (newest first). */
+export function groupByDay(list: InAppNotification[], locale: string, now: Date = new Date()): NotificationGroup[] {
+  const groups: NotificationGroup[] = [];
+  for (const n of list) {
+    const date = createdAt(n.created_at);
+    const key = String(dayStart(date));
+    const current = groups[groups.length - 1];
+    if (current?.key === key) current.items.push(n);
+    else groups.push({ key, label: dayLabel(date, locale, now), items: [n] });
+  }
+  return groups;
+}

client/src/components/Settings/IntegrationsTab.test.tsx

@@ -33,12 +33,6 @@ function mcpEndpointRow() {
 
 const clipboardWriteText = vi.fn().mockResolvedValue(undefined);
 
-const LAN_CONNECTOR = {
-  mcpUrl: 'http://192.168.1.20:3000/mcp',
-  deepLink: 'https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=TREK&connectorUrl=x',
-  qrSvg: '<svg xmlns="http://www.w3.org/2000/svg"></svg>',
-};
-
 function enableAddons(ids: string[]) {
   seedStore(useAddonStore, {
     addons: ids.map(id => ({ id, name: id, type: 'integration', icon: '', enabled: true })),
@@ -71,7 +65,6 @@ beforeEach(() => {
     http.get('/api/addons', () => HttpResponse.json({ addons: [] })),
     http.get('/api/oauth/clients', () => HttpResponse.json({ clients: [] })),
     http.get('/api/oauth/sessions', () => HttpResponse.json({ sessions: [] })),
-    http.get('/api/integrations/claude-connector', () => HttpResponse.json(LAN_CONNECTOR)),
   );
 });
 
@@ -1026,25 +1019,4 @@ describe('IntegrationsTab – failure toasts', () => {
     render(<IntegrationsTab />);
     expect(screen.queryByText('What would you like to chat with?')).not.toBeInTheDocument();
   });
-
-  it('FE-COMP-INTEGRATIONS-049: the Claude card explains why a LAN install cannot be added', async () => {
-    enableMcp();
-    render(<IntegrationsTab />);
-    expect(await screen.findByText('Claude can only reach TREK when it is available over https on the internet.')).toBeInTheDocument();
-    expect(screen.queryByRole('link', { name: /Open in Claude/ })).not.toBeInTheDocument();
-  });
-
-  it('FE-COMP-INTEGRATIONS-050: the Claude card links a public install into Claude', async () => {
-    server.use(
-      http.get('/api/integrations/claude-connector', () =>
-        HttpResponse.json({ ...LAN_CONNECTOR, mcpUrl: 'https://trip.example.org/mcp' }),
-      ),
-    );
-    enableMcp();
-    render(<IntegrationsTab />);
-    const link = await screen.findByRole('link', { name: /Open in Claude/ });
-    expect(link).toHaveAttribute('href', LAN_CONNECTOR.deepLink);
-    expect(link).toHaveAttribute('target', '_blank');
-    expect(screen.getByText('https://trip.example.org/mcp')).toBeInTheDocument();
-  });
 });

client/src/components/Settings/IntegrationsTab.tsx

@@ -8,7 +8,6 @@ import AirTrailConnectionSection from './AirTrailConnectionSection'
 import DawarichConnectionSection from './DawarichConnectionSection'
 import LlmConnectionSection from './LlmConnectionSection'
 import AiConnectionSection from './ai/AiConnectionSection'
-import ClaudeConnectorCard from './ai/ClaudeConnectorCard'
 import ApiKeysSection from './ApiKeysSection'
 import ScopeGroupPicker from '../OAuth/ScopeGroupPicker'
 import ConfirmDialog from '../shared/ConfirmDialog'
@@ -45,7 +44,6 @@ export default function IntegrationsTab(): React.ReactElement {
           one should not have to read past a section about AI assistants. */}
       <ApiKeysSection />
       {/* TREK inside Claude rides on the MCP server, so it follows that addon. */}
-      {S.mcpEnabled && <ClaudeConnectorCard />}
       {S.mcpEnabled && <IntegrationsMcpSection S={S} />}
       <McpTokenModals S={S} />
       <OAuthClientModals S={S} />

client/src/components/Settings/ai/AiConnectPanel.test.tsx

@@ -3,8 +3,7 @@ import userEvent from '@testing-library/user-event';
 import type { AiStatusResponse } from '@trek/shared';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '../../../../tests/helpers/render';
-import { resetAllStores, seedStore } from '../../../../tests/helpers/store';
-import { useAddonStore } from '../../../store/addonStore';
+import { resetAllStores } from '../../../../tests/helpers/store';
 import { useAssistantStore } from '../../../store/assistantStore';
 
 const repo = vi.hoisted(() => ({
@@ -173,17 +172,11 @@ describe('AiConnectPanel', () => {
     expect(screen.getByRole('button', { name: /Connect OpenRouter/ })).toBeInTheDocument();
   });
 
-  it('FE-COMP-AI-CONNECT-PANEL-008: "Using Claude?" shows with the MCP addon and the sharing details fold out', async () => {
+  it('FE-COMP-AI-CONNECT-PANEL-008: the sharing details fold out', async () => {
     const user = userEvent.setup();
-    const { unmount } = render(<AiConnectPanel scope="user" onConnected={vi.fn()} />);
-    expect(screen.queryByText('Using Claude? Connect in Claude')).not.toBeInTheDocument();
+    render(<AiConnectPanel scope="user" onConnected={vi.fn()} />);
     await user.click(screen.getByRole('button', { name: /What gets shared\?/ }));
     expect(screen.getByText('Not your password, your files or your other trips.')).toBeInTheDocument();
-    unmount();
-
-    seedStore(useAddonStore, { addons: [{ id: 'mcp', name: 'MCP', type: 'integration', icon: '', enabled: true }] });
-    render(<AiConnectPanel scope="user" onConnected={vi.fn()} />);
-    expect(screen.getByRole('button', { name: 'Using Claude? Connect in Claude' })).toBeInTheDocument();
   });
 
   it('FE-COMP-AI-CONNECT-PANEL-009: the admin signing in with ChatGPT is told the plan is shared, and the sign-in is for everyone', async () => {

client/src/components/Settings/ai/AiConnectPanel.tsx

@@ -2,14 +2,13 @@ import type { AiApiKeyKind, AiConnectionScope, AiParsingPrefill } from '@trek/sh
 import { ChevronRight, KeyRound, Loader2, Server, ShieldCheck } from 'lucide-react';
 import React, { useId, useState } from 'react';
 import { useTranslation } from '../../../i18n';
-import { useAddonStore } from '../../../store/addonStore';
 import { useAssistantStore } from '../../../store/assistantStore';
 import { AI_PROVIDERS, API_KEY_KINDS, providerLabel } from '../../Assistant/providerCatalog';
 import { fs } from '../../shared/DialogShell';
 import { EditorField, GRID_2, INPUT } from '../../shared/dialogParts';
 import { SETTINGS_BUTTON, SETTINGS_BUTTON_PRIMARY, SettingsHint, StatusPill } from '../settingsKit';
 import ChatGptPasteStep, { ConnectErrorNote } from './ChatGptPasteStep';
-import { CLAUDE_CONNECTOR_ANCHOR, type AiConnectMode } from './aiConnectModel';
+import { type AiConnectMode } from './aiConnectModel';
 import { useChatgptConnect, useCustomConnect, useKeyConnect, useOpenrouterStart } from './useAiConnect';
 
 interface AiConnectPanelProps {
@@ -399,7 +398,6 @@ export default function AiConnectPanel({ scope, onConnected, initialMode, prefil
   const chatgpt = useChatgptConnect({ active: mode === 'chatgpt', onConnected, scope });
   const keyConnect = useKeyConnect({ scope, prefill, onConnected });
   const custom = useCustomConnect({ prefill, onConnected });
-  const mcpEnabled = useAddonStore((s) => s.isEnabled('mcp'));
 
   // The privacy line names whoever would receive the messages, once that is known.
   const receivers: Record<AiConnectMode, string> = {
@@ -450,18 +448,6 @@ export default function AiConnectPanel({ scope, onConnected, initialMode, prefil
       {mode === 'custom' && <CustomForm custom={custom} />}
 
       <PrivacyNote provider={mode ? receivers[mode] : ''} />
-      {scope === 'user' && mcpEnabled && (
-        <button
-          type="button"
-          onClick={() =>
-            document.getElementById(CLAUDE_CONNECTOR_ANCHOR)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-          }
-          className="self-start font-medium text-content-muted underline underline-offset-2 hover:text-content"
-          style={fs(12, 'body')}
-        >
-          {t('assistant.connect.claudeLink')}
-        </button>
-      )}
     </div>
   );
 }

client/src/components/Settings/ai/ClaudeConnectorCard.test.tsx

@@ -1,63 +0,0 @@
-// FE-COMP-CLAUDE-CONNECTOR-001 to FE-COMP-CLAUDE-CONNECTOR-003: adding TREK to Claude as a connector.
-import userEvent from '@testing-library/user-event';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen, waitFor } from '../../../../tests/helpers/render';
-
-const repo = vi.hoisted(() => ({ claudeConnector: vi.fn() }));
-const clipboard = vi.hoisted(() => ({ copyText: vi.fn() }));
-vi.mock('../../../repo/aiConnectionsRepo', () => ({ aiConnectionsRepo: repo }));
-vi.mock('../../../utils/clipboard', () => clipboard);
-
-const { default: ClaudeConnectorCard } = await import('./ClaudeConnectorCard');
-
-const CONNECTOR = {
-  mcpUrl: 'https://trip.example.org/mcp',
-  deepLink:
-    'https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=TREK&connectorUrl=https%3A%2F%2Ftrip.example.org%2Fmcp',
-  qrSvg: '<svg xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1"/></svg>',
-};
-
-beforeEach(() => {
-  vi.clearAllMocks();
-  clipboard.copyText.mockResolvedValue(true);
-});
-
-describe('ClaudeConnectorCard', () => {
-  it('FE-COMP-CLAUDE-CONNECTOR-001: links a public install into Claude, with a QR code that is an image, not markup', async () => {
-    repo.claudeConnector.mockResolvedValue(CONNECTOR);
-    const { container } = render(<ClaudeConnectorCard />);
-    const link = await screen.findByRole('link', { name: /Open in Claude/ });
-    expect(link).toHaveAttribute('href', CONNECTOR.deepLink);
-    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-    const qr = screen.getByAltText('QR code to add TREK in Claude');
-    expect(qr.getAttribute('src')).toMatch(/^data:image\/svg\+xml;charset=utf-8,/);
-    // The QR code's own markup never lands in the page; icons may draw rects of their own.
-    expect(container.querySelector('rect[width="1"][height="1"]')).toBeNull();
-    expect(document.getElementById('claude-connector')).not.toBeNull();
-  });
-
-  it('FE-COMP-CLAUDE-CONNECTOR-002: copies the address and shows the tick for a moment', async () => {
-    const user = userEvent.setup();
-    repo.claudeConnector.mockResolvedValue(CONNECTOR);
-    render(<ClaudeConnectorCard />);
-    await user.click(await screen.findByRole('button', { name: 'Copy address' }));
-    expect(clipboard.copyText).toHaveBeenCalledWith(CONNECTOR.mcpUrl);
-    await waitFor(() => expect(document.querySelector('.text-success')).not.toBeNull());
-  });
-
-  it('FE-COMP-CLAUDE-CONNECTOR-003: a plain-http or LAN install gets the reason instead of a link, and a failed read only the description', async () => {
-    repo.claudeConnector.mockResolvedValueOnce({ ...CONNECTOR, mcpUrl: 'http://192.168.1.20:3000/mcp' });
-    const { unmount } = render(<ClaudeConnectorCard />);
-    expect(
-      await screen.findByText('Claude can only reach TREK when it is available over https on the internet.')
-    ).toBeInTheDocument();
-    expect(screen.queryByRole('link')).not.toBeInTheDocument();
-    unmount();
-
-    repo.claudeConnector.mockRejectedValueOnce(new Error('404'));
-    render(<ClaudeConnectorCard />);
-    expect(screen.getByText('Use TREK right inside Claude: add it as a connector, sign in, done.')).toBeInTheDocument();
-    await waitFor(() => expect(repo.claudeConnector).toHaveBeenCalledTimes(2));
-    expect(screen.queryByRole('link')).not.toBeInTheDocument();
-  });
-});

client/src/components/Settings/ai/ClaudeConnectorCard.tsx

@@ -1,98 +0,0 @@
-import { Check, Copy, ExternalLink, MessagesSquare } from 'lucide-react';
-import React from 'react';
-import { useTranslation } from '../../../i18n';
-import { fs } from '../../shared/DialogShell';
-import { Tooltip } from '../../shared/Tooltip';
-import { SETTINGS_BUTTON_PRIMARY, SETTINGS_ICON_BUTTON, SettingsCard, SettingsHint } from '../settingsKit';
-import { CLAUDE_CONNECTOR_ANCHOR } from './aiConnectModel';
-import { useClaudeConnector } from './useClaudeConnector';
-
-type ClaudeConnector = ReturnType<typeof useClaudeConnector>;
-
-/** The way in: the button that adds TREK on claude.ai, the address to copy, and the QR code for a phone. */
-function ConnectorLinks({
-  connector,
-  qrSrc,
-  copied,
-  copyUrl,
-}: Omit<ClaudeConnector, 'connector' | 'reachable'> & { connector: NonNullable<ClaudeConnector['connector']> }) {
-  const { t } = useTranslation();
-  return (
-    <div className="flex flex-wrap items-center gap-5">
-      <div className="flex min-w-0 flex-1 basis-64 flex-col gap-3">
-        <div className="flex">
-          <a
-            href={connector.deepLink}
-            target="_blank"
-            rel="noopener noreferrer"
-            className={SETTINGS_BUTTON_PRIMARY}
-            style={fs(13, 'body')}
-          >
-            <ExternalLink size={14} strokeWidth={2.2} /> {t('assistant.claude.open')}
-          </a>
-        </div>
-        <div className="flex items-center gap-2">
-          <code
-            dir="ltr"
-            className="block min-w-0 flex-1 truncate rounded-[10px] border border-edge-faint bg-surface-tertiary px-3 py-2 font-mono text-content"
-            style={fs(12, 'body')}
-          >
-            {connector.mcpUrl}
-          </code>
-          <Tooltip label={copied ? t('common.copied') : t('assistant.claude.copyUrl')}>
-            <button
-              type="button"
-              onClick={() => void copyUrl()}
-              aria-label={t('assistant.claude.copyUrl')}
-              className={SETTINGS_ICON_BUTTON}
-            >
-              {copied ? (
-                <Check size={15} strokeWidth={2.2} className="text-success" />
-              ) : (
-                <Copy size={15} strokeWidth={2} />
-              )}
-            </button>
-          </Tooltip>
-        </div>
-      </div>
-      <figure className="m-0 flex flex-none flex-col items-center gap-1.5 max-sm:hidden">
-        <img
-          src={qrSrc}
-          alt={t('assistant.claude.qrAlt')}
-          width={112}
-          height={112}
-          className="rounded-[10px] shadow-sm ring-1 ring-edge-faint"
-        />
-        <figcaption className="text-content-faint" style={fs(11)}>
-          {t('assistant.claude.scan')}
-        </figcaption>
-      </figure>
-    </div>
-  );
-}
-
-/**
- * "Connect with Claude": TREK as a connector inside Claude, over the MCP
- * server and its OAuth. One button adds it on claude.ai; the QR code does the
- * same from a phone, so it only shows where a phone is not already in hand.
- */
-export default function ClaudeConnectorCard(): React.ReactElement {
-  const { t } = useTranslation();
-  const { connector, reachable, ...links } = useClaudeConnector();
-
-  // Null keeps the card to its band until the address is known.
-  let body: React.ReactNode = null;
-  if (connector && reachable) body = <ConnectorLinks connector={connector} {...links} />;
-  else if (connector) body = <SettingsHint>{t('assistant.claude.notPublic')}</SettingsHint>;
-
-  return (
-    <SettingsCard
-      id={CLAUDE_CONNECTOR_ANCHOR}
-      icon={MessagesSquare}
-      title={t('assistant.claude.title')}
-      hint={t('assistant.claude.description')}
-    >
-      {body}
-    </SettingsCard>
-  );
-}

client/src/components/Settings/ai/aiConnectModel.ts

@@ -9,9 +9,6 @@ import { OnlineOnlyError } from '../../../repo/onlineOnly';
 /** How a connection is being set up: a ChatGPT sign-in, a pasted key, or (admin only) an own server. */
 export type AiConnectMode = 'chatgpt' | 'key' | 'custom';
 
-/** Where the Claude connector card sits, for the "Using Claude?" line to jump to. */
-export const CLAUDE_CONNECTOR_ANCHOR = 'claude-connector';
-
 /** The `code` of a refused AI request (`{ error, code }`), or null when the failure carries none. */
 export function refusalCode(err: unknown): string | null {
   if (err instanceof OnlineOnlyError) return 'offline';

client/src/components/Settings/ai/useClaudeConnector.ts

@@ -1,56 +0,0 @@
-import type { AiClaudeConnectorResponse } from '@trek/shared';
-import { useEffect, useRef, useState } from 'react';
-import { aiConnectionsRepo } from '../../../repo/aiConnectionsRepo';
-import { copyText } from '../../../utils/clipboard';
-import { isPublicHttpsUrl, svgDataUrl } from './aiConnectModel';
-
-/**
- * Adding TREK to Claude as a connector (no AI connection of TREK's own
- * involved): the MCP address, the claude.ai link that adds it, and a QR code
- * for doing it from a phone. Claude reaches TREK from the internet, so on a
- * LAN or plain-http install the card explains that instead of offering a link
- * that would fail after the user did everything right.
- */
-export function useClaudeConnector() {
-  const [connector, setConnector] = useState<AiClaudeConnectorResponse | null>(null);
-  const [copied, setCopied] = useState(false);
-  const copiedTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    aiConnectionsRepo.claudeConnector().then(
-      (next) => {
-        if (!cancelled) setConnector(next);
-      },
-      () => {
-        // Without an answer the card keeps to its description; nothing to link to.
-        if (!cancelled) setConnector(null);
-      }
-    );
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  useEffect(
-    () => () => {
-      if (copiedTimer.current) clearTimeout(copiedTimer.current);
-    },
-    []
-  );
-
-  const copyUrl = async () => {
-    if (!connector || !(await copyText(connector.mcpUrl))) return;
-    setCopied(true);
-    if (copiedTimer.current) clearTimeout(copiedTimer.current);
-    copiedTimer.current = setTimeout(() => setCopied(false), 2000);
-  };
-
-  return {
-    connector,
-    reachable: connector ? isPublicHttpsUrl(connector.mcpUrl) : false,
-    qrSrc: connector ? svgDataUrl(connector.qrSvg) : '',
-    copied,
-    copyUrl,
-  };
-}

client/src/components/Studio/templates/StudioTemplatesPanel.test.tsx

@@ -90,7 +90,7 @@ describe('the Templates panel', () => {
   it('narrows the set to one archetype from the style chips', () => {
     panel();
     const chips = screen.getByRole('radiogroup', { name: 'studio.templates.style' });
-    expect(chips.querySelectorAll('[role="radio"]')).toHaveLength(8);
+    expect(chips.querySelectorAll('[role="radio"]')).toHaveLength(13);
     fireEvent.click(screen.getByRole('radio', { name: 'studio.templates.archetype.postcard' }));
     expect(
       screen.getByRole('radio', { name: 'studio.templates.archetype.postcard' }).getAttribute('aria-checked')

client/src/components/Studio/theme/StudioThemePanel.tsx

@@ -22,7 +22,7 @@ import { ThemeSheet } from './ThemeSheet';
 import { useStudioTheme } from './useStudioTheme';
 
 /**
- * The Theme section of the rail: twelve built-in looks, the palette, the
+ * The Theme section of the rail: seventeen built-in looks, the palette, the
  * typefaces and the motifs of the one being put together, and applying it to
  * the book or to the page that is open.
  *

client/src/components/Studio/travel/travelBuilders.ts

@@ -1,100 +1,56 @@
 import type {
   BookBadgeStyle,
-  BookBadgeVariant,
-  BookColorToken,
   BookCountryLook,
-  BookElement,
   BookMapElement,
   BookMapScope,
   BookMetric,
   BookPageSetup,
   BookStatsLook,
   BookTheme,
+  BookTravelMapCard,
+  BookTravelMarkVariant,
   JourneyStats,
 } from '@trek/shared';
 import {
-  bookBadgeValue,
-  bookCountryName,
-  bookTravelBadge,
-  bookTravelCountries,
-  bookTravelMap,
-  bookTravelSize,
-  bookTravelStats,
-  themedElement,
+  BOOK_TRAVEL_COUNTRY_LOOKS,
+  BOOK_TRAVEL_FIGURE_SHELVES,
+  BOOK_TRAVEL_MARK_STYLES,
+  BOOK_TRAVEL_MARK_VARIANTS,
+  BOOK_TRAVEL_SUMMARY_LOOKS,
+  bookTravelLooks,
   bookElementId as uid,
 } from '@trek/shared';
 import { studioTravelContext } from '../studioTravelContext';
 
 /**
  * What the Travel panel offers, built: every card is the element its click
- * places, made by the book engine's own factories (book-travel.ts) so a card
- * and what the assistant places are one thing, then set in one of the newer
- * looks and dressed in the book's theme.
+ * places, made by the book's own travel looks (book-travel-looks.ts in
+ * shared), the same factory the auto layout builds its framing pages with,
+ * so a card and a designed page are one thing.
  *
  * Pure, so the panel stays a list of shelves: it asks for an element and
  * renders it through the page's own renderer, and the preview and the result
- * are the same object.
+ * are the same object. What is the panel's own here is where a new element
+ * lands: centred on the spread on screen.
  */
 
-/** The figures a summary offers: how far, how long, where, and how much was kept. */
-const SUMMARY_METRICS: BookMetric[] = ['distance', 'days', 'countries', 'photos'];
-
 /** The looks of a summary, in the order the panel offers them. */
-export const SUMMARY_LOOKS: BookStatsLook[] = [
-  'poster',
-  'ticket',
-  'tiles',
-  'sign',
-  'odometer',
-  'note',
-  'sketch',
-  'band',
-];
+export const SUMMARY_LOOKS: readonly BookStatsLook[] = BOOK_TRAVEL_SUMMARY_LOOKS;
 
 /** The marks the journey fills, in the order a page is read: when, which day, how far, where. */
-export const MARK_VARIANTS = ['date', 'day', 'distance', 'coords', 'flag'] as const;
-export type MarkVariant = (typeof MARK_VARIANTS)[number];
+export const MARK_VARIANTS = BOOK_TRAVEL_MARK_VARIANTS;
+export type MarkVariant = BookTravelMarkVariant;
 
 /** The newer styles a mark comes in, and which of them each mark is offered in. */
-export const MARK_STYLES: { style: BookBadgeStyle; variants: readonly MarkVariant[] }[] = [
-  { style: 'stamp', variants: ['date', 'day', 'flag'] },
-  { style: 'tag', variants: ['day', 'distance', 'coords', 'flag'] },
-  { style: 'pill', variants: ['date', 'day', 'distance', 'coords', 'flag'] },
-  { style: 'ribbon', variants: ['date', 'day', 'distance', 'flag'] },
-  { style: 'sticker', variants: ['date', 'day', 'distance', 'flag'] },
-  { style: 'patch', variants: ['day', 'distance', 'flag'] },
-  { style: 'sketch', variants: ['date', 'day', 'distance', 'coords', 'flag'] },
-];
+export const MARK_STYLES: readonly { style: BookBadgeStyle; variants: readonly MarkVariant[] }[] =
+  BOOK_TRAVEL_MARK_STYLES;
 
 /** The single figures, one shelf per look, with the figures each look suits. */
-export const FIGURE_SHELVES: { look: BookStatsLook; metrics: readonly BookMetric[] }[] = [
-  { look: 'medal', metrics: ['distance', 'days', 'steps', 'photos', 'countries', 'places', 'furthest'] },
-  { look: 'odometer', metrics: ['distance', 'furthest', 'days', 'photos'] },
-  { look: 'sketch', metrics: ['distance', 'days', 'countries', 'photos'] },
-];
+export const FIGURE_SHELVES: readonly { look: BookStatsLook; metrics: readonly BookMetric[] }[] =
+  BOOK_TRAVEL_FIGURE_SHELVES;
 
 /** The looks a country is offered in. */
-export const COUNTRY_LOOKS: BookCountryLook[] = ['stamp', 'visa', 'postcard', 'flag', 'pin', 'label', 'sketch'];
-
-/** The looks written by hand take the theme's script face rather than its heading. */
-const HANDWRITTEN = new Set<string>(['note', 'sketch']);
-
-/** Which of the theme's accents each country look takes, so a shelf of them is not one colour. */
-const COUNTRY_ACCENT: Partial<Record<BookCountryLook, BookColorToken>> = {
-  stamp: 'accent2',
-  visa: 'accent3',
-  pin: 'accent',
-  label: 'accent2',
-};
-
-/** Which of the theme's accents each mark takes, so a page of them is not one colour. */
-const MARK_ACCENT: Record<MarkVariant, BookColorToken> = {
-  date: 'accent',
-  day: 'accent2',
-  distance: 'accent3',
-  coords: 'accent',
-  flag: 'accent2',
-};
+export const COUNTRY_LOOKS: readonly BookCountryLook[] = BOOK_TRAVEL_COUNTRY_LOOKS;
 
 /** The map cards: the photographed route, its stops numbered, its two ends marked, and the dark ground. */
 export const MAP_CARDS: {
@@ -130,130 +86,19 @@ export function travelBuilders({ page, stats, path, locale, t, theme, single }:
     return { x: (W - size.w) / 2, y: (page.pageHeight - size.h) / 2, w: size.w, h: size.h };
   };
 
-  /**
-   * An element dressed in the book's theme: its words in the theme's ink and
-   * heading face, its colour one of the theme's accents, all three linked so
-   * it follows when the theme changes. A book without a theme keeps the
-   * engine's own colours.
-   */
-  const dress = (el: BookElement, accent: BookColorToken = 'accent', hand = false): BookElement =>
-    theme
-      ? themedElement(
-          { ...el, token: 'ink', accentToken: accent, fontRole: hand ? 'script' : 'heading' } as BookElement,
-          theme
-        )
-      : el;
+  const looks = bookTravelLooks({ page, stats, travel, theme, newId: uid, place: at });
 
-  /** A summary in one of the newer looks; a band is a strip, so it is set a third as tall. */
-  const summaryEl = (look: BookStatsLook): BookElement => {
-    const w = page.pageWidth * (look === 'note' || look === 'sign' ? 0.56 : 0.72);
-    const h =
-      look === 'band' ? page.pageHeight * 0.13 : look === 'ticket' ? w * 0.42 : look === 'note' ? w * 0.72 : w * 0.5;
-    const el = { ...bookTravelStats(stats, { id: uid('st'), frame: at({ w, h }), metrics: SUMMARY_METRICS }), look };
-    return dress(el, look === 'sign' ? 'accent3' : 'accent', HANDWRITTEN.has(look));
+  return {
+    summaryEl: (look: BookStatsLook) => looks.summaryEl(look),
+    figureEl: (metric: BookMetric, look: BookStatsLook = 'medal') => looks.figureEl(metric, look),
+    mapEl: (
+      card: BookTravelMapCard,
+      scope: BookMapScope = 'journey',
+      source: 'vector' | 'relief' | 'satellite' = 'vector'
+    ) => looks.mapEl(card, scope, source),
+    countryMapEl: (code: string, kind: 'shape' | 'satellite' | 'box') => looks.countryMapEl(code, kind),
+    markEl: (variant: MarkVariant, style: BookBadgeStyle) => looks.markEl(variant, style),
+    countryEl: (code: string, look: BookCountryLook) => looks.countryEl(code, look),
+    countryName: looks.countryName,
   };
-
-  /**
-   * One figure on its own, the mark to drop beside a photograph: as a medal, on
-   * the drums of an odometer, or ringed by hand.
-   */
-  const figureEl = (metric: BookMetric, look: BookStatsLook = 'medal'): BookElement => {
-    const side = Math.min(page.pageWidth, page.pageHeight) * 0.3;
-    const size = look === 'odometer' ? { w: side * 1.6, h: side * 0.62 } : { w: side, h: side };
-    const el = { ...bookTravelStats(stats, { id: uid('st'), frame: at(size), metrics: [metric] }), look };
-    return dress(el, 'accent', HANDWRITTEN.has(look));
-  };
-
-  /**
-   * A map as the engine places it, on the card's ground and with the card's
-   * stops. The scope is the journey or one trip; the ground is the outlines
-   * or one of the two imagery sources.
-   */
-  const mapEl = (
-    card: { style: BookMapElement['style']; pins?: BookMapElement['pinStyle'] },
-    scope: BookMapScope = 'journey',
-    source: 'vector' | 'relief' | 'satellite' = 'vector'
-  ): BookElement => {
-    const el = bookTravelMap(travel, stats, { id: uid('mp'), frame: at(bookTravelSize('map', page)), scope, source });
-    const shaped = { ...el, style: card.style, ...(card.pins ? { pinStyle: card.pins } : {}) };
-    // Over imagery the line is white on purpose (book-travel.ts); only the outline maps take the theme.
-    return source === 'vector' ? dress(shaped) : shaped;
-  };
-
-  /**
-   * A map of one country: its stops alone, without the way there. A journey's
-   * recorded way often starts with the flight from home, and fitted to all of
-   * it the country is a speck at the edge of a continent; the page a travel
-   * book wants is the country, cut to its own shape on the paper or over the
-   * satellite picture, or the country in a box.
-   */
-  const countryMapEl = (code: string, kind: 'shape' | 'satellite' | 'box'): BookElement => {
-    const own = {
-      ...stats,
-      points: stats.points.filter((p) => p.country === code),
-      countries: stats.countries.filter((c) => c.code === code),
-    };
-    const ctx = studioTravelContext(own, [], locale, t);
-    const source = kind === 'satellite' ? 'satellite' : 'vector';
-    const el = bookTravelMap(ctx, own, {
-      id: uid('mp'),
-      frame: at(bookTravelSize('map', page)),
-      scope: 'journey',
-      source,
-    });
-    // Cut to its shape on the paper, the land is dark, so the silhouette reads and the route in the accent stands on it.
-    const style = kind === 'shape' ? 'dark' : 'minimal';
-    const shaped = {
-      ...el,
-      style,
-      clip: kind === 'box' ? 'rect' : 'country',
-      pinStyle: 'numbered',
-      fitToCountries: true,
-    } as const;
-    return source === 'vector' ? dress(shaped) : shaped;
-  };
-
-  /** A mark in one of the newer styles, at the size its variant suits; a stamp is set taller for its two rules. */
-  const markEl = (variant: MarkVariant, style: BookBadgeStyle): BookElement | null => {
-    const value = bookBadgeValue(travel, variant, null);
-    if (!value) return null;
-    const frame = at(markSize(style, value.text, value.sub));
-    const el = { ...bookTravelBadge({ id: uid('bd'), frame, variant: variant as BookBadgeVariant, value }), style };
-    return dress(el, MARK_ACCENT[variant], style === 'sketch');
-  };
-
-  /**
-   * How large a mark is set: as wide as its words need. A stamp stacks them in
-   * a box with room for its two rules; a tag or a pill sets them in a line
-   * after its eyelet or its disc, so its length follows the words.
-   */
-  const markSize = (style: BookBadgeStyle, text: string, sub: string) => {
-    const twoLines = !!text && !!sub && text.length > 14;
-    const h = page.pageHeight * (style === 'stamp' ? 0.12 : twoLines ? 0.1 : 0.066);
-    const main = text || sub;
-    if (style === 'stamp') return { w: Math.max(h * 1.3, h * 0.2 * Math.max(main.length * 1.4, sub.length)), h };
-    // Two lines are set smaller than one, so they need less width a letter.
-    if (twoLines)
-      return { w: Math.min(page.pageWidth * 0.6, h * (1.5 + 0.13 * Math.max(text.length, sub.length * 0.7))), h };
-    const chars = main.length * (text ? 1 : 0.85) + (text ? sub.length * 0.5 : 0);
-    return { w: Math.min(page.pageWidth * 0.6, h * (1.6 + 0.3 * chars)), h };
-  };
-
-  /** One country as a square stamp, or as a card in the proportions of a postcard. */
-  const countryEl = (code: string, look: BookCountryLook): BookElement => {
-    const side = Math.min(page.pageWidth, page.pageHeight) * 0.36;
-    const ratio = look === 'stamp' || look === 'pin' || look === 'sketch' ? 1 : look === 'postcard' ? 1.36 : 1.4;
-    const frame = at({ w: side * ratio, h: side });
-    const el = {
-      ...bookTravelCountries(travel, { id: uid('co'), frame, codes: [code] }),
-      look,
-      showFlag: look === 'pin' || look === 'postcard',
-    };
-    return dress(el, COUNTRY_ACCENT[look] ?? 'accent', look === 'sketch');
-  };
-
-  /** A country's name in the reader's language, from the same CLDR data Atlas uses. */
-  const countryName = (code: string): string => bookCountryName(code, locale, stats);
-
-  return { summaryEl, figureEl, mapEl, countryMapEl, markEl, countryEl, countryName };
 }

client/src/help/contexts/journey.ts

@@ -65,16 +65,22 @@ export const { context: studioContext, guides: studioGuides } = defineScreen({
   id: 'journey-studio',
   parent: 'journey',
   icon: 'book',
-  bullets: 6,
+  bullets: 8,
   docs: [STUDIO],
   guides: [
     ['studio-auto-layout', 'sparkles', 'guide', 3, 2, STUDIO, ['studio-pages', 'studio-layouts'], true],
     ['studio-pages', 'book', 'guide', 3, 2, STUDIO, ['studio-layouts', 'studio-spread-file'], true],
-    ['studio-layouts', 'layout', 'quick', 2, 1, STUDIO, ['studio-auto-layout', 'studio-content'], true],
+    ['studio-layouts', 'layout', 'quick', 2, 1, STUDIO, ['studio-my-layouts', 'studio-auto-layout', 'studio-content'], true],
+    ['studio-my-layouts', 'bookmark', 'quick', 2, 1, STUDIO, ['studio-layouts', 'studio-spread-file'], true],
     ['studio-content', 'image', 'guide', 3, 2, STUDIO, ['studio-properties', 'studio-elements'], true],
-    ['studio-elements', 'plus', 'quick', 2, 1, STUDIO, ['studio-travel', 'studio-properties']],
-    ['studio-travel', 'globe', 'quick', 2, 1, STUDIO, ['studio-elements']],
-    ['studio-properties', 'panelRight', 'guide', 3, 2, STUDIO, ['studio-content', 'studio-layouts']],
+    ['studio-theme', 'palette', 'guide', 3, 2, STUDIO, ['studio-background', 'studio-text-effects'], true],
+    ['studio-elements', 'plus', 'quick', 2, 1, STUDIO, ['studio-stickers', 'studio-travel', 'studio-properties']],
+    ['studio-stickers', 'sticker', 'quick', 2, 1, STUDIO, ['studio-elements', 'studio-layers'], true],
+    ['studio-travel', 'globe', 'guide', 3, 2, STUDIO, ['studio-elements', 'studio-theme'], true],
+    ['studio-text-effects', 'type', 'quick', 2, 1, STUDIO, ['studio-theme', 'studio-properties'], true],
+    ['studio-background', 'paintBucket', 'quick', 2, 1, STUDIO, ['studio-theme', 'studio-layouts'], true],
+    ['studio-layers', 'layers', 'quick', 2, 2, STUDIO, ['studio-properties', 'studio-stickers'], true],
+    ['studio-properties', 'panelRight', 'guide', 3, 2, STUDIO, ['studio-content', 'studio-layers']],
     ['studio-format', 'filter', 'quick', 2, 2, STUDIO, ['studio-export']],
     ['studio-export', 'upload', 'guide', 3, 2, STUDIO, ['studio-format', 'studio-spread-file']],
     ['studio-spread-file', 'fileInput', 'quick', 2, 1, STUDIO, ['studio-export', 'studio-pages']],

client/src/help/types.ts

@@ -36,6 +36,9 @@ export interface HelpGuideMedia {
 /** Icon names the help components know how to draw (see components/Help/helpIcons.ts). */
 export type HelpIcon =
   | 'plus'
+  | 'sticker'
+  | 'type'
+  | 'paintBucket'
   | 'pencil'
   | 'image'
   | 'copy'

client/src/mobile/screens/admin/MAdminGitHubPanel.tsx

@@ -83,6 +83,13 @@ export default function MAdminGitHubPanel({ isPrerelease = false }: { isPrerelea
           </ul>
         )
       }
+      if (block.kind === 'h5') {
+        return (
+          <h5 key={idx} className="text-caption font-semibold mt-3 mb-1 text-m-ink">
+            {block.text}
+          </h5>
+        );
+      }
       if (block.kind === 'h4') {
         return (
           <h4 key={idx} className="text-xs font-semibold mt-3 mb-1 text-m-ink">

client/src/mobile/screens/settings/MSettingsIntegrations.tsx

@@ -1,15 +1,10 @@
-import { Check, Copy, ExternalLink, MessagesSquare } from 'lucide-react'
-import { useTranslation } from '../../../i18n'
 import MPhotoProvidersSection from './MPhotoProvidersSection'
 import MAirTrailConnectionSection from './MAirTrailConnectionSection'
 import MDawarichConnectionSection from './MDawarichConnectionSection'
 import MLlmConnectionSection from './MLlmConnectionSection'
 import MAiConnectionSection from './MAiConnectionSection'
 import MSettingsMcp from './MSettingsMcp'
-import { MSetButton, MSetCard, MSetHint } from './MSettingsUi'
 import { useIntegrationGates } from '../../../components/Settings/useIntegrationGates'
-import { useClaudeConnector } from '../../../components/Settings/ai/useClaudeConnector'
-import { CLAUDE_CONNECTOR_ANCHOR } from '../../../components/Settings/ai/aiConnectModel'
 
 /**
  * "Integrations" section. The photo-provider / AirTrail / LLM connection forms
@@ -33,35 +28,7 @@ export default function MSettingsIntegrations() {
        a managed install. The per-user fallback exists for people who supply their
        own key, and there nobody does. */}
       {llmEnabled && ownParsing && !managed && <MLlmConnectionSection />}
-      {mcpEnabled && <MClaudeConnectorCard />}
       {mcpEnabled && <MSettingsMcp />}
     </>
   )
 }
-
-/**
- * "Connect with Claude" on the phone: the button and the address only. The QR
- * code is for reaching a phone from a desktop, and this is the phone.
- */
-function MClaudeConnectorCard() {
-  const { t } = useTranslation()
-  const { connector, reachable, copied, copyUrl } = useClaudeConnector()
-  return (
-    <div id={CLAUDE_CONNECTOR_ANCHOR}>
-      <MSetCard title={t('assistant.claude.title')} icon={MessagesSquare} className="mt-3">
-        <MSetHint className="mb-3">{t('assistant.claude.description')}</MSetHint>
-        {connector && !reachable && <MSetHint>{t('assistant.claude.notPublic')}</MSetHint>}
-        {connector && reachable && (
-          <div className="flex flex-wrap gap-2">
-            <MSetButton onClick={() => window.open(connector.deepLink, '_blank', 'noopener,noreferrer')}>
-              <ExternalLink size={14} /> {t('assistant.claude.open')}
-            </MSetButton>
-            <MSetButton variant="ghost" onClick={() => void copyUrl()}>
-              {copied ? <Check size={14} /> : <Copy size={14} />} {copied ? t('common.copied') : t('assistant.claude.copyUrl')}
-            </MSetButton>
-          </div>
-        )}
-      </MSetCard>
-    </div>
-  )
-}

client/src/pages/InAppNotificationsPage.tsx

@@ -6,7 +6,7 @@ import HelpAnchor from '../components/Help/HelpAnchor'
 import EmptyState from '../components/shared/EmptyState'
 import ConfirmDialog from '../components/shared/ConfirmDialog'
 import { Spinner } from '../components/shared/Spinner'
-import InAppNotificationItem from '../components/Notifications/InAppNotificationItem.tsx'
+import NotificationDayList from '../components/Notifications/NotificationDayList'
 import { useInAppNotifications } from './inAppNotifications/useInAppNotifications'
 
 export default function InAppNotificationsPage(): React.ReactElement {
@@ -88,27 +88,25 @@ function InAppNotificationsPageDesktop(): React.ReactElement {
             </button>
           </div>
 
-          {/* Notification list */}
-          <div className="rounded-2xl border overflow-hidden border-edge bg-surface-card py-1">
-            {isLoading && displayed.length === 0 ? (
-              <div className="flex items-center justify-center py-16">
-                <Spinner className="w-6 h-6 border-2 border-slate-200 border-t-current" />
-              </div>
-            ) : displayed.length === 0 ? (
+          {/* The list, one card per day. */}
+          {isLoading && displayed.length === 0 ? (
+            <div className="flex items-center justify-center py-16">
+              <Spinner className="w-6 h-6 border-2 border-edge border-t-current" />
+            </div>
+          ) : displayed.length === 0 ? (
+            <div className="rounded-2xl border border-edge bg-surface-card">
               <EmptyState scene="notifications" title={t('notifications.empty')} />
-            ) : (
-              displayed.map(n => (
-                <InAppNotificationItem key={n.id} notification={n} />
-              ))
-            )}
+            </div>
+          ) : (
+            <NotificationDayList notifications={displayed} />
+          )}
 
-            {/* Infinite scroll trigger */}
-            {hasMore && (
-              <div ref={loaderRef} className="flex items-center justify-center py-4">
-                {isLoading && <Spinner className="w-5 h-5 border-2 border-slate-200 border-t-current" />}
-              </div>
-            )}
-          </div>
+          {/* Infinite scroll trigger */}
+          {hasMore && (
+            <div ref={loaderRef} className="flex items-center justify-center py-4">
+              {isLoading && <Spinner className="w-5 h-5 border-2 border-edge border-t-current" />}
+            </div>
+          )}
         </div>
       <ConfirmDialog
         isOpen={confirmingDeleteAll}

client/src/pages/journeyStudio/useJourneyStudio.test.tsx

@@ -37,10 +37,13 @@ vi.mock('../../api/websocket', async importOriginal => ({
 
 // The auto layout lives in @trek/shared now; the hook's call into it is watched through a partial mock.
 const shared = await vi.importActual<typeof import('@trek/shared')>('@trek/shared')
-const buildBook = vi.fn(shared.buildBook)
+const autoDesignedBook = vi.fn(shared.autoDesignedBook)
 vi.mock('@trek/shared', async importOriginal => {
   const actual = await importOriginal<typeof import('@trek/shared')>()
-  return { ...actual, buildBook: (...args: Parameters<typeof actual.buildBook>) => buildBook(...args) }
+  return {
+    ...actual,
+    autoDesignedBook: (...args: Parameters<typeof actual.autoDesignedBook>) => autoDesignedBook(...args),
+  }
 })
 
 import { useJourneyStudio } from './useJourneyStudio'
@@ -67,7 +70,7 @@ function seedJourney() {
 
 beforeEach(() => {
   seedJourney()
-  buildBook.mockClear()
+  autoDesignedBook.mockClear()
   useStudioStore.setState({ doc: null, selection: [], activeSpread: 0, past: [], future: [], readOnly: false })
   vi.spyOn(journeyApi, 'getBook').mockResolvedValue({ book: null } as never)
   vi.spyOn(journeyApi, 'saveBook').mockResolvedValue({} as never)
@@ -140,8 +143,8 @@ describe('the auto layout input', () => {
 
     act(() => { result.current.relayoutBook() })
 
-    expect(buildBook).toHaveBeenCalled()
-    const input = buildBook.mock.calls[buildBook.mock.calls.length - 1][0]
+    expect(autoDesignedBook).toHaveBeenCalled()
+    const input = autoDesignedBook.mock.calls[autoDesignedBook.mock.calls.length - 1][1]
     expect(input.path).toEqual([TRACK])
   })
 
@@ -176,9 +179,51 @@ describe('the auto layout input', () => {
 
     act(() => { result.current.relayoutBook() })
 
-    const input = buildBook.mock.calls[buildBook.mock.calls.length - 1][0]
+    const input = autoDesignedBook.mock.calls[autoDesignedBook.mock.calls.length - 1][1]
     expect(input.path).toEqual([])
   })
+
+  it("lays the whole book on the designed pages in the book's own page format, theme and title", async () => {
+    const { result } = await mountStudio()
+    const theme = shared.bookThemeOf('midnight')
+    const page = { ...shared.bookPageSetupSchema.parse({}), pageWidth: 200 }
+    act(() => {
+      useStudioStore.getState().commit(d => ({ ...d, title: 'My own title', page, theme }))
+    })
+
+    act(() => { result.current.relayoutBook() })
+
+    const [doc, input, opts] = autoDesignedBook.mock.calls[autoDesignedBook.mock.calls.length - 1]
+    expect(input.page).toEqual(page)
+    expect(opts?.theme).toEqual(theme)
+    expect(doc?.title).toBe('My own title')
+    const laid = useStudioStore.getState().doc
+    expect(laid?.title).toBe('My own title')
+    expect(laid?.theme).toEqual(theme)
+    expect(laid?.page.pageWidth).toBe(200)
+    expect(laid?.spreads.some(s => s.role === 'inner' && s.entryId === 1)).toBe(true)
+  })
+
+  it('lays this spread on another design, its id kept, and knows the cover but not the back', async () => {
+    const { result } = await mountStudio()
+    act(() => { result.current.relayoutBook() })
+    const before = useStudioStore.getState().doc
+    if (!before) throw new Error('a laid book')
+    const at = before.spreads.findIndex(s => s.role === 'inner' && s.entryId === 1)
+    act(() => { useStudioStore.getState().setActiveSpread(at) })
+    expect(result.current.canRelayoutSpread).toBe(true)
+    const was = shared.matchDecoratedTemplate(before.spreads[at], before.page)?.id
+
+    act(() => { result.current.relayoutCurrentSpread() })
+
+    const after = useStudioStore.getState().doc?.spreads[at]
+    expect(after?.id).toBe(before.spreads[at].id)
+    expect(shared.matchDecoratedTemplate(after as never, before.page)?.id).not.toBe(was)
+    act(() => { useStudioStore.getState().setActiveSpread(0) })
+    expect(result.current.canRelayoutSpread).toBe(true)
+    act(() => { useStudioStore.getState().setActiveSpread(before.spreads.length - 1) })
+    expect(result.current.canRelayoutSpread).toBe(false)
+  })
 })
 
 

client/src/pages/journeyStudio/useJourneyStudio.ts

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router'
-import type { AutoEntry, AutoInput, AutoPhoto, BookElement, BookPageNumbers, JourneyStats } from '@trek/shared'
+import type { AutoDesignedInput, AutoEntry, AutoPhoto, BookElement, BookPageNumbers, JourneyStats } from '@trek/shared'
 import {
-  autoEntriesWithStops, bookElementId as elementId, bookPageSetupSchema, bookPath, buildBook, distributeGallery,
-  emptyBook, layoutAroundLocks, relayoutSpread,
+  autoDesignedBook, autoEntriesWithStops, autoRelayoutKind, autoRelayoutSpread, bookElementId as elementId,
+  bookPageSetupSchema, bookPath, emptyBook,
 } from '@trek/shared'
 import { journeyApi } from '../../api/client'
 import { useJourneyStore, type GalleryPhoto, type JourneyEntry, type JourneyPhoto } from '../../store/journeyStore'
@@ -153,7 +153,7 @@ export function useJourneyStudio() {
    * possible; rebuilding it from the journey on every click would be the same
    * work plus a chance of the two disagreeing.
    */
-  const autoInput = useRef<AutoInput | null>(null)
+  const autoInput = useRef<AutoDesignedInput | null>(null)
 
   const journey = current && current.id === journeyId ? current : null
 
@@ -274,15 +274,15 @@ export function useJourneyStudio() {
         })),
       }))
 
+    // When each loose photo was taken: the auto layout gives it to the entry of its day first.
     const gallery: AutoPhoto[] = (journey.gallery || []).map((p: GalleryPhoto) => ({
       photoId: p.photo_id,
       width: p.width ?? null,
       height: p.height ?? null,
       caption: p.caption ?? null,
+      takenAt: p.taken_at ?? null,
     }))
 
-    const withPhotos = distributeGallery(entries, gallery)
-
     /*
      * Give every entry what the journey's figures know about its stop: the
      * coordinates and country its place resolved to and which day it is, so a
@@ -290,7 +290,7 @@ export function useJourneyStudio() {
      * is shared (autoEntriesWithStops) so the server's design tool reads the
      * same stops.
      */
-    const placed = autoEntriesWithStops(withPhotos, stats)
+    const placed = autoEntriesWithStops(entries, stats)
 
     const preset = PAGE_PRESETS['square-210']
 
@@ -300,6 +300,8 @@ export function useJourneyStudio() {
       subtitle: journey.subtitle ?? null,
       coverPhotoId: gallery[0]?.photoId ?? null,
       entries: placed,
+      // The loose photos stay loose here: the layout shares them out itself, by day, and loses none.
+      gallery,
       page: {
         preset: preset.id,
         pageWidth: preset.pageWidthMm,
@@ -375,7 +377,7 @@ export function useJourneyStudio() {
      *
      * The build effect runs as soon as the book and the figures are in, which is
      * usually before this answers, and what it froze is what the Auto layout
-     * buttons hand to buildBook afterwards. Without the patch a relayout drew
+     * buttons hand to the layout afterwards. Without the patch a relayout drew
      * the straight line between stops over a route somebody had walked.
      */
     const applyPath = (p: [number, number][][]) => {
@@ -471,8 +473,10 @@ export function useJourneyStudio() {
   const relayoutBook = useCallback(() => {
     const input = autoInput.current
     if (!input) return
+    // A new seed every press: "the whole book" twice gives two books, each one undo away.
+    const seed = Date.now() % 2 ** 31
     commit(d => ({
-      ...buildBook({ ...input, page: d.page }),
+      ...autoDesignedBook(d, { ...input, page: d.page }, { theme: d.theme, seed }),
       title: d.title,
     }))
     setActiveSpread(0)
@@ -481,22 +485,20 @@ export function useJourneyStudio() {
   const relayoutCurrentSpread = useCallback(() => {
     const input = autoInput.current
     if (!input) return
+    const seed = Date.now() % 2 ** 31
     commit(d => {
-      const sp = d.spreads[activeSpread]
-      if (!sp) return d
-      // Laid out around what is locked, as the assistant's auto layout leaves it.
-      const next = layoutAroundLocks(sp, free => relayoutSpread(free, { ...input, page: d.page }))
+      // Laid out around what is locked, its id kept, on another template than the one on screen.
+      const next = autoRelayoutSpread(d, activeSpread, { ...input, page: d.page }, { seed })
       if (!next) return d
       return { ...d, spreads: d.spreads.map((x, i) => (i === activeSpread ? next : x)) }
     })
     select([])
   }, [commit, activeSpread, select])
 
-  /** Whether the spread on screen came from an entry, and so can be redone. */
+  /** Whether the auto layout knows the spread on screen (an entry's page, the cover, the summary, the countries). */
   const canRelayoutSpread = !!(
     autoInput.current
-    && doc?.spreads[activeSpread]?.entryId != null
-    && doc.spreads[activeSpread].role === 'inner'
+    && autoRelayoutKind(doc?.spreads[activeSpread]) !== null
   )
 
   /** Page numbers and anything else that belongs to the book rather than a page. */

client/src/repo/aiConnectionsRepo.test.ts

@@ -126,6 +126,5 @@ describe('aiConnectionsRepo', () => {
     await expect(aiConnectionsRepo.disconnect()).rejects.toBeInstanceOf(OnlineOnlyError);
     await expect(aiConnectionsRepo.chatgptStart()).rejects.toBeInstanceOf(OnlineOnlyError);
     await expect(aiConnectionsRepo.adminSettings()).rejects.toBeInstanceOf(OnlineOnlyError);
-    await expect(aiConnectionsRepo.claudeConnector()).rejects.toBeInstanceOf(OnlineOnlyError);
   });
 });

client/src/repo/aiConnectionsRepo.ts

@@ -2,7 +2,6 @@ import {
   aiAdminConnectionResponseSchema,
   aiAdminSettingsSchema,
   aiAuthStartResponseSchema,
-  aiClaudeConnectorResponseSchema,
   aiConnectionViewSchema,
   aiModelListResponseSchema,
   aiStatusResponseSchema,
@@ -14,7 +13,7 @@ import {
   type AiOpenrouterFinishRequest,
   type AiPrivacyAckRequest,
 } from '@trek/shared';
-import { aiAdminApi, aiApi, claudeConnectorApi } from '../api/assistant';
+import { aiAdminApi, aiApi } from '../api/assistant';
 import { requireOnline } from './onlineOnly';
 
 /**
@@ -114,11 +113,4 @@ export const aiConnectionsRepo = {
     requireOnline();
     return aiModelListResponseSchema.parse(await aiAdminApi.models()).models;
   },
-
-  // ── Claude connector ───────────────────────────────────────────────────────
-
-  async claudeConnector() {
-    requireOnline();
-    return aiClaudeConnectorResponseSchema.parse(await claudeConnectorApi.get());
-  },
 };

client/src/utils/releaseNotes.test.ts

@@ -22,11 +22,11 @@ describe('parseReleaseNotes', () => {
     ]);
   });
 
-  it('FE-UTIL-RELNOTES-003: lines are trimmed and markers need their space', () => {
+  it('FE-UTIL-RELNOTES-003: lines are trimmed, markers need their space and #### heads a feature', () => {
     expect(parseReleaseNotes('   ## Spaced  \n-no space\n#### deep\n\n\n')).toEqual([
       { kind: 'h3', text: 'Spaced' },
       { kind: 'p', text: '-no space' },
-      { kind: 'p', text: '#### deep' },
+      { kind: 'h5', text: 'deep' },
     ]);
   });