docs(readme): the feature list as 5.0 has it

Every count checked against the code (410 MCP tools, 35 scopes in 17 groups,
18 booking types, 17 trip permissions, 66 plugin permissions), and the parts
5.0 adds get their own place: Tours, TREK Studio, the AI assistant, the help
center, Road trip, Dawarich and the linked journal. Most lines are shorter.

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/i18n-keys.mjs

@@ -146,6 +146,13 @@ export const DYNAMIC_ALLOWED = [
       'id is a sticker id of the library in @trek/shared/stickers; stickerLibrary.test.ts resolves the key of every ' +
       'sticker the library holds against en',
   },
+  {
+    file: 'components/Studio/shapes.ts',
+    template: 'journey.studio.shapeName.${shape}',
+    because:
+      'shapeName takes a BookShapeId; shared/src/book/book-shape-catalogue.spec.ts holds an en name for every ' +
+      'shape of BOOK_SHAPE_GROUPS',
+  },
 ];
 
 const KEY_RE = /^[a-z][a-zA-Z0-9_]*(?:\.[a-zA-Z0-9_:-]+)+$/;

client/scripts/layers-baseline.json

@@ -38,8 +38,8 @@
   "src/components/Roadtrip/RoadtripSidebarDriveBands.tsx": 1,
   "src/components/Roadtrip/RoadtripSidebarRefuelBand.tsx": 1,
   "src/components/Studio/StudioShell.tsx": 1,
-  "src/components/Studio/TravelElements.tsx": 1,
   "src/components/Studio/sidebar/StudioEntryCard.tsx": 1,
+  "src/components/Studio/travel/BadgeIcon.tsx": 1,
   "src/components/Todo/useTodoList.ts": 1,
   "src/components/shared/ConfirmDialog.tsx": 1,
   "src/components/shared/CountryFlag.tsx": 1,

client/scripts/size-baseline.json

@@ -12,11 +12,11 @@
   "src/components/PDF/TripPDF.tsx": 1082,
   "src/components/Planner/DayDetailPanel.test.tsx": 2333,
   "src/components/Planner/DayPlanSidebar.test.tsx": 5349,
-  "src/components/Planner/DayPlanSidebar.tsx": 2953,
+  "src/components/Planner/DayPlanSidebar.tsx": 2936,
   "src/components/Planner/PlaceFormModal.test.tsx": 2836,
   "src/components/Planner/PlaceFormModal.tsx": 1157,
   "src/components/Planner/PlaceInspector.tsx": 1290,
-  "src/components/Studio/TravelElements.tsx": 1738,
+  "src/components/Studio/TravelElements.tsx": 1559,
   "src/components/Studio/countryShapes.ts": 2595,
   "src/index.css": 1636,
   "src/mobile/screens/admin/MAdminPluginsPanel.tsx": 1507,
@@ -26,5 +26,5 @@
   "src/pages/atlas/useAtlas.ts": 1211,
   "src/pages/tripPlanner/useTripPlanner.roadtrip.test.tsx": 3518,
   "src/pages/tripPlanner/useTripPlanner.test.tsx": 3270,
-  "src/styles/studio.css": 1936
+  "src/styles/studio.css": 1918
 }

client/scripts/theme-baseline.json

@@ -52,7 +52,7 @@
   "components/Journey/moodConfig.ts": 5,
   "components/Layout/BottomNav.tsx": 3,
   "components/Layout/DemoBanner.tsx": 25,
-  "components/Layout/InAppNotificationBell.tsx": 8,
+  "components/Layout/InAppNotificationBell.tsx": 3,
   "components/Layout/MobileTopBar.tsx": 51,
   "components/Layout/Navbar.tsx": 21,
   "components/Layout/NewVersionNotice.tsx": 3,
@@ -72,7 +72,6 @@
   "components/Map/poiCategories.ts": 7,
   "components/Map/ratingBadge.ts": 2,
   "components/Map/reservationsMapbox.ts": 1,
-  "components/Notifications/InAppNotificationItem.tsx": 8,
   "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": 9,
   "pages/JoinTripPage.tsx": 4,
   "pages/JourneyDetailPage.tsx": 53,
   "pages/JourneyPage.tsx": 64,

client/scripts/theme-disable-baseline.json

@@ -44,9 +44,10 @@
   "components/Studio/SpreadView.tsx": 1,
   "components/Studio/StudioElementsPanel.tsx": 2,
   "components/Studio/StudioSwatches.tsx": 1,
-  "components/Studio/TravelElements.tsx": 6,
+  "components/Studio/TravelElements.tsx": 3,
   "components/Studio/peerColour.ts": 1,
   "components/Studio/printSheets.ts": 4,
+  "components/Studio/travel/badgeLook.ts": 2,
   "components/Trips/TripMemberAvatar.tsx": 2,
   "components/Vacay/VacayPersons.tsx": 1,
   "components/shared/DialogShell.tsx": 2,

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/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[] }
@@ -464,3 +464,14 @@ export const CHANGE_LABELS: Record<AssistantChangeLabelKey, { labelKey: string }
   packing: { labelKey: 'assistant.change.label.packing' },
   breaks: { labelKey: 'assistant.change.label.breaks' },
 };
+
+/**
+ * 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/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/Dashboard/useDashboardTimezones.test.ts

@@ -1,4 +1,4 @@
-// FE-COMP-TZHOOK-001 to -007: the world clocks both dashboards share.
+// FE-COMP-TZHOOK-001 to -009: the world clocks both dashboards share.
 import { act, renderHook, waitFor } from '@testing-library/react';
 
 import { useSettingsStore } from '../../store/settingsStore';
@@ -97,4 +97,27 @@ describe('useDashboardTimezones', () => {
     expect(localStorage.getItem('trek_dashboard_tz')).toBeNull();
     expect(updateSetting).not.toHaveBeenCalled();
   });
+
+  // #2694: Chrome on Windows names no zone for a system zone it cannot map.
+  it('FE-COMP-TZHOOK-008: a browser that names no zone still gets the default clocks', () => {
+    const original = Intl.DateTimeFormat.prototype.resolvedOptions;
+    const spy = vi.spyOn(Intl.DateTimeFormat.prototype, 'resolvedOptions').mockImplementation(function (
+      this: Intl.DateTimeFormat
+    ) {
+      return { ...original.call(this), timeZone: undefined as unknown as string };
+    });
+    try {
+      const { result } = renderHook(() => useDashboardTimezones('en'));
+      expect(result.current.zones).toEqual(['Europe/London', 'Asia/Tokyo']);
+      expect(() => result.current.zones.map((tz) => result.current.timeIn(tz))).not.toThrow();
+    } finally {
+      spy.mockRestore();
+    }
+  });
+
+  it('FE-COMP-TZHOOK-009: a stored zone this browser does not know is left out instead of crashing the clocks', () => {
+    seedSettings(['Europe/Berlin', 'Mars/Olympus_Mons', '']);
+    const { result } = renderHook(() => useDashboardTimezones('en'));
+    expect(result.current.zones).toEqual(['Europe/Berlin']);
+  });
 });

client/src/components/Dashboard/useDashboardTimezones.ts

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { useSettingsStore } from '../../store/settingsStore';
+import { browserTimeZone, isValidTimeZone } from '../../utils/localDate';
 
 const DEFAULT_ZONES = ['Europe/London', 'Asia/Tokyo'];
 
@@ -38,13 +39,15 @@ export function shortZone(tz: string): string {
  * clocks tick every 30 seconds, `adding` toggles the zone picker.
  */
 export function useDashboardTimezones(locale: string) {
-  const home = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const home = browserTimeZone();
   const [now, setNow] = useState(() => new Date());
   const isLoaded = useSettingsStore((s) => s.isLoaded);
   const updateSetting = useSettingsStore((s) => s.updateSetting);
   const stored = useSettingsStore((s) => s.settings.dashboard_timezones);
   // Unset (never chosen) falls back to home + defaults; an explicit list is honoured.
-  const zones = stored ?? [home, ...DEFAULT_ZONES];
+  // A browser that names no zone (#2694) or a zone this browser does not know
+  // would throw while rendering a clock, so such entries are left out.
+  const zones = (stored ?? [home, ...DEFAULT_ZONES]).filter(isValidTimeZone);
   const setZones = (next: string[]) => {
     updateSetting('dashboard_timezones', next).catch(() => {});
   };

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 {
@@ -68,27 +68,28 @@ export default function InAppNotificationBell(): React.ReactElement {
           {/* Click-away catcher only — the bell button itself closes the panel again from the keyboard. */}
           <div role="presentation" style={{ position: 'fixed', inset: 0, zIndex: 9998 }} onClick={() => setOpen(false)} />
           <div
-            className="rounded-xl shadow-xl border overflow-hidden bg-surface-card border-edge"
+            className="rounded-2xl shadow-xl border overflow-hidden bg-surface-card border-edge"
             style={{
               position: 'fixed',
               top: 'var(--nav-h)',
               insetInlineEnd: 8,
-              width: 360,
+              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',
             }}
           >
-            {/* Header */}
-            <div
-              className="flex items-center justify-between px-4 py-3 flex-shrink-0 border-b border-edge-secondary"
-            >
-              <span className="text-sm font-semibold text-content">
+            {/* Header: the dialogs' head, a tile, the name and how many are unread, the tools at the end. */}
+            <div className="flex items-center gap-3 px-4 pt-4 pb-3 flex-shrink-0">
+              <span className="grid place-items-center w-9 h-9 rounded-xl bg-accent-subtle text-accent flex-shrink-0">
+                <Bell className="w-4 h-4" />
+              </span>
+              <span className="flex-1 min-w-0 flex items-center gap-2 text-subtitle font-semibold text-content">
                 {t('notifications.title')}
                 {unreadCount > 0 && (
-                  <span className="ms-2 px-1.5 py-0.5 rounded-full text-xs font-medium bg-content text-surface">
+                  <span className="px-2 h-5 inline-flex items-center rounded-full text-caption font-semibold tabular-nums bg-accent text-accent-text">
                     {unreadCount}
                   </span>
                 )}
@@ -98,49 +99,53 @@ export default function InAppNotificationBell(): React.ReactElement {
                   <button type="button"
                     onClick={markAllRead}
                     title={t('notifications.markAllRead')}
-                    className="p-1.5 rounded-lg transition-colors text-content-muted hover:bg-surface-hover focus-visible:bg-surface-hover"
+                    aria-label={t('notifications.markAllRead')}
+                    className="grid place-items-center w-8 h-8 rounded-lg transition-colors text-content-muted bg-surface-secondary hover:bg-surface-hover hover:text-content focus-visible:bg-surface-hover"
                   >
-                    <CheckCheck className="w-3.5 h-3.5" />
+                    <CheckCheck className="w-4 h-4" />
                   </button>
                 )}
                 {notifications.length > 0 && (
                   <button type="button"
                     onClick={() => setConfirmingDeleteAll(true)}
                     title={t('notifications.deleteAll')}
-                    className="p-1.5 rounded-lg transition-colors text-content-muted hover:bg-surface-hover focus-visible:bg-surface-hover"
+                    aria-label={t('notifications.deleteAll')}
+                    className="grid place-items-center w-8 h-8 rounded-lg transition-colors text-content-muted bg-surface-secondary hover:bg-danger-soft hover:text-danger focus-visible:bg-danger-soft"
                   >
-                    <Trash2 className="w-3.5 h-3.5" />
+                    <Trash2 className="w-4 h-4" />
                   </button>
                 )}
               </div>
             </div>
 
             {/* Notification list */}
-            <div className="overflow-y-auto flex-1">
+            <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" />
                 </div>
               ) : notifications.length === 0 ? (
-                <div className="flex flex-col items-center justify-center py-10 px-4 text-center gap-2">
-                  <Bell className="w-8 h-8 text-content-faint" />
-                  <p className="text-sm font-medium text-content-muted">{t('notifications.empty')}</p>
-                  <p className="text-xs text-content-faint">{t('notifications.emptyDescription')}</p>
+                <div className="flex flex-col items-center justify-center py-10 px-6 text-center gap-2">
+                  <span className="grid place-items-center w-12 h-12 rounded-2xl bg-surface-secondary text-content-faint">
+                    <Bell className="w-5 h-5" />
+                  </span>
+                  <p className="text-body font-semibold text-content">{t('notifications.empty')}</p>
+                  <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>
 
             {/* Footer */}
-            <button type="button"
-              onClick={handleShowAll}
-              className="w-full py-2.5 text-xs font-medium transition-colors flex-shrink-0 border-t border-edge-secondary text-content hover:bg-surface-hover focus-visible:bg-surface-hover"
-            >
-              {t('notifications.showAll')}
-            </button>
+            <div className="p-2 flex-shrink-0 border-t border-edge-secondary">
+              <button type="button"
+                onClick={handleShowAll}
+                className="w-full h-9 rounded-xl text-body font-medium transition-colors bg-surface-secondary text-content hover:bg-surface-hover focus-visible:bg-surface-hover"
+              >
+                {t('notifications.showAll')}
+              </button>
+            </div>
           </div>
         </>,
         document.body

client/src/components/Notifications/InAppNotificationItem.tsx

@@ -1,18 +1,54 @@
 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 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 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: 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()
   const { responding, handleRespond, handleNavigate, markRead, markUnread, deleteNotification } =
@@ -20,120 +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={`relative px-4 py-3 transition-colors border-b border-edge-secondary ${notification.is_read ? '' : 'bg-accent-subtle'}`}
-    >
+    <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 mt-0.5">
-          {notification.sender_avatar ? (
-            <img
-              src={notification.sender_avatar}
-              alt=""
-              className="w-8 h-8 rounded-full object-cover"
-            />
-          ) : (
-            <div
-              className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-content-muted bg-surface-tertiary"
-            >
-              {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-sm font-medium leading-snug text-content">
-              {hasUnknownTitle ? notification.title_key : titleText}
-            </p>
-            <div className="flex items-center gap-0.5 flex-shrink-0">
-              <span className="text-xs me-1 text-content-faint">
-                {relativeTime(notification.created_at, locale)}
-              </span>
+      <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="p-1 rounded transition-colors text-content-faint hover:bg-surface-hover hover:text-content focus-visible:bg-surface-hover focus-visible:text-content"
-                >
+                <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="p-1 rounded transition-colors text-content-faint hover:bg-surface-hover hover:text-content focus-visible:bg-surface-hover focus-visible:text-content"
-                >
+                <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"
+              <button
+                type="button"
                 onClick={() => deleteNotification(notification.id)}
                 title={t('notifications.delete')}
                 aria-label={t('notifications.delete')}
-                className="p-1 rounded transition-colors text-content-faint hover:bg-danger-soft hover:text-danger focus-visible:bg-danger-soft focus-visible:text-danger"
+                className={`${TOOL} hover:text-danger focus-visible:text-danger`}
               >
                 <Trash2 className="w-3.5 h-3.5" />
               </button>
             </div>
           </div>
-
-          <p className="text-xs mt-0.5 leading-relaxed text-content-muted">
-            {hasUnknownBody ? notification.text_key : bodyText}
-          </p>
-
-          {/* Boolean actions */}
-          {notification.type === 'boolean' && notification.positive_text_key && notification.negative_text_key && (
-            <div className="flex gap-2 mt-2">
-              <button type="button"
-                onClick={() => handleRespond('positive')}
-                disabled={responding || notification.response !== null}
-                className={`flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors ${
-                  notification.response === 'positive'
-                    ? 'bg-content text-surface'
-                    : `bg-surface-tertiary ${notification.response === 'negative' ? 'text-content-faint opacity-50' : 'text-content-secondary'}`
-                } ${notification.response !== null || responding ? 'cursor-default' : 'cursor-pointer'}`}
-              >
-                <Check className="w-3 h-3" />
-                {t(notification.positive_text_key)}
-              </button>
-              <button type="button"
-                onClick={() => handleRespond('negative')}
-                disabled={responding || notification.response !== null}
-                className={`flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors ${
-                  notification.response === 'negative'
-                    ? 'bg-danger text-white'
-                    : `bg-surface-tertiary ${notification.response === 'positive' ? 'text-content-faint opacity-50' : 'text-content-secondary'}`
-                } ${notification.response !== null || responding ? 'cursor-default' : 'cursor-pointer'}`}
-              >
-                <X className="w-3 h-3" />
-                {t(notification.negative_text_key)}
-              </button>
-            </div>
-          )}
-
-          {/* Navigate action */}
-          {notification.type === 'navigate' && notification.navigate_text_key && notification.navigate_target && (
-            <button type="button"
-              onClick={handleNavigate}
-              className="flex items-center gap-1 mt-2 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors bg-surface-tertiary text-content-secondary hover:bg-surface-hover focus-visible:bg-surface-hover"
-            >
-              <ArrowRight className="w-3 h-3" />
-              {t(notification.navigate_text_key)}
-            </button>
-          )}
         </div>
+
+        <p className="text-body mt-0.5 leading-relaxed text-content-muted">{bodyText}</p>
+
+        {asks && (
+          <div className="flex flex-wrap gap-2 mt-3">
+            <button
+              type="button"
+              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`}
+            >
+              <Check className="w-3.5 h-3.5" />
+              {t(yesKey)}
+            </button>
+            <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/PDF/TripPDF.test.ts

@@ -397,6 +397,19 @@ describe('downloadTripPDF', () => {
     expect(iframe!.srcdoc).toContain('€')
   })
 
+  // #2692: a place's description and notes print as the planner shows them, not as raw markdown.
+  it('FE-COMP-TRIPPDF-016c: renders markdown in a place description, sanitized', async () => {
+    const description = ['**Colosseum** tickets', '', '| Gate | Time |', '| --- | --- |', '| A | 9:00 |', '', '<script>alert(1)</script>'].join('\n')
+    const place = { ...placeWithDetails, description }
+    const md = { ...richArgs, places: [place], assignments: { '10': [{ ...assignmentForDay, place }] } as typeof richArgs.assignments }
+    await downloadTripPDF(md)
+    const html = getIframe()?.srcdoc ?? ''
+    expect(html).toContain('<strong>Colosseum</strong>')
+    expect(html).toContain('<td>9:00</td>')
+    expect(html).not.toContain('**Colosseum**')
+    expect(html).not.toContain('<script>alert(1)</script>')
+  })
+
   it('FE-COMP-TRIPPDF-016b: formats price chip and totals in the trip currency, not EUR', async () => {
     const usdArgs = {
       ...richArgs,
@@ -796,7 +809,7 @@ describe('downloadTripPDF remaining branches', () => {
     }]))
     const html = srcdoc()
 
-    expect(html).toContain('ICE 599 · Gl. 7 · Seat 21A · FRA → BER')
+    expect(html).toContain('ICE 599 · reservations.meta.platform 7 · reservations.meta.seat 21A · FRA → BER')
   })
 
   it('FE-W5PDF-006: a multi-leg train renders one line per leg', async () => {
@@ -811,7 +824,7 @@ describe('downloadTripPDF remaining branches', () => {
     }]))
     const html = srcdoc()
 
-    expect(html).toContain('IC 1 · Gl. 3 · BER → MUC')
+    expect(html).toContain('IC 1 · reservations.meta.platform 3 · BER → MUC')
     expect(html).toContain('EC 2 · MUC → ZRH')
   })
 

client/src/components/PDF/TripPDF.tsx

@@ -24,6 +24,7 @@ import { fetchExchangeRates } from '../../hooks/useExchangeRates'
 import { getFlightLegs, getTrainLegs, usesStationRoute } from '../../utils/flightLegs'
 import { isServiceStopType } from '../Roadtrip/roadtripModel'
 import { onlyMyPlan } from './pdfScope'
+import { createPdfMarkdown, PDF_MARKDOWN_CSS } from './pdfMarkdown'
 
 /**
  * Every day starts a new page by default. On a trip of short days that prints
@@ -231,6 +232,7 @@ export async function downloadTripPDF({ trip, days, places, assignments: allStor
   let hasTransportNotes = false
   const loc = _locale || undefined
   const tr = _t || (k => k)
+  const markdown = createPdfMarkdown()
   // The store read is the fallback, not the source: a caller that forgets the
   // prop still prints the reader's own format instead of silently reverting.
   const is12h = (_timeFormat || useSettingsStore.getState().settings.time_format || '24h') === '12h'
@@ -439,8 +441,8 @@ export async function downloadTripPDF({ trip, days, places, assignments: allStor
               const source = (usesStationRoute(r.type) ? getTrainLegs(r) : getFlightLegs(r))[l.index]
               subtitleLines = [[
                 l.airline, l.flight_number, l.train_number,
-                l.platform ? `Gl. ${l.platform}` : '',
-                l.seat ? `Seat ${l.seat}` : '',
+                l.platform ? `${tr('reservations.meta.platform')} ${l.platform}` : '',
+                l.seat ? `${tr('reservations.meta.seat')} ${l.seat}` : '',
                 (l.from || l.to) ? [l.from, l.to].filter(Boolean).join(' → ') : '',
                 source?.confirmation_number,
               ].filter(Boolean).join(' · ')].filter(Boolean)
@@ -471,7 +473,7 @@ export async function downloadTripPDF({ trip, days, places, assignments: allStor
                 // Multi-leg: one line per leg so every train number + segment route shows,
                 // with the segment's own booking code where it has one (#1943).
                 subtitleLines = legs.map(l =>
-                  [l.train_number, l.platform ? `Gl. ${l.platform}` : '',
+                  [l.train_number, l.platform ? `${tr('reservations.meta.platform')} ${l.platform}` : '',
                    (l.from || l.to) ? [l.from, l.to].filter(Boolean).join(' → ') : '',
                    l.confirmation_number]
                     .filter(Boolean).join(' · '))
@@ -479,7 +481,7 @@ export async function downloadTripPDF({ trip, days, places, assignments: allStor
               } else {
                 const stops = (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0)).map(e => e.code || e.name)
                 const route = stops.length >= 2 ? stops.join(' → ') : ''
-                subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Seat ${meta.seat}` : '', route].filter(Boolean).join(' · ')
+                subtitle = [meta.train_number, meta.platform ? `${tr('reservations.meta.platform')} ${meta.platform}` : '', meta.seat ? `${tr('reservations.meta.seat')} ${meta.seat}` : '', route].filter(Boolean).join(' · ')
               }
             }
             else if (r.type === 'car') {
@@ -587,10 +589,10 @@ export async function downloadTripPDF({ trip, days, places, assignments: allStor
                 </div>
                 ${place.address ? `<div class="info-row">${svgPin}<span class="info-text">${escHtml(place.address)}</span></div>` : ''}
                 ${(place.lat != null && place.lng != null) ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted">${Number(place.lat).toFixed(5)}, ${Number(place.lng).toFixed(5)}</span></div>` : ''}
-                ${place.description ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.description)}</span></div>` : ''}
+                ${place.description ? markdown.row(place.description) : ''}
                 ${chips ? `<div class="chips">${chips}</div>` : ''}
-                ${place.notes ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.notes)}</span></div>` : ''}
-                ${item.data.notes ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(item.data.notes)}</span></div>` : ''}
+                ${place.notes ? markdown.row(place.notes) : ''}
+                ${item.data.notes ? markdown.row(item.data.notes) : ''}
               </div>
             </div>`
       }).join('')
@@ -836,7 +838,7 @@ export async function downloadTripPDF({ trip, days, places, assignments: allStor
   .info-spacer { width: 13px; flex-shrink: 0; }
   .info-text { font-size: 9px; color: #64748b; line-height: 1.5; }
   .info-text.muted { color: #94a3b8; }
-  .info-text.italic { font-style: italic; }
+  ${PDF_MARKDOWN_CSS}
 
   .chips { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 21px; margin-top: 4px; }
   .chip { display: inline-flex; align-items: center; gap: 3px; font-size: 8px; font-weight: 600; background: #f1f5f9; color: #374151; border-radius: 99px; padding: 2px 7px; white-space: nowrap; }
@@ -930,6 +932,7 @@ ${tripMapHtml}
 ${daysHtml}
 ${pluginSectionsHtml}
 </body></html>`
+  markdown.dispose()
 
   // Open in modal with srcdoc iframe (no URL loading = no X-Frame-Options issue)
   const overlay = document.createElement('div')

client/src/components/PDF/pdfMarkdown.ts

@@ -0,0 +1,30 @@
+import { createMarkdownHtml } from '../shared/markdownHtml';
+
+/**
+ * A place's description and notes are markdown in the app, so the export
+ * renders them the same way instead of printing the raw syntax (#2692): one
+ * info row per text, the HTML from the app's own sanitized pipeline.
+ */
+export function createPdfMarkdown(): { row: (text: string) => string; dispose: () => void } {
+  const markdown = createMarkdownHtml();
+  return {
+    row: (text) =>
+      `<div class="info-row"><span class="info-spacer"></span><div class="info-text muted md">${markdown.html(text)}</div></div>`,
+    dispose: markdown.dispose,
+  };
+}
+
+/** The markdown's own spacing, lists, tables and links at the export's small size. */
+export const PDF_MARKDOWN_CSS = `
+  .info-text.md { min-width: 0; overflow-wrap: anywhere; }
+  .md > :first-child { margin-top: 0; }
+  .md > :last-child { margin-bottom: 0; }
+  .md p, .md ul, .md ol, .md table, .md blockquote, .md pre { margin: 0 0 4px; }
+  .md ul, .md ol { padding-inline-start: 14px; }
+  .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { font-size: 1.1em; font-weight: 700; margin: 4px 0 2px; }
+  .md table { border-collapse: collapse; }
+  .md th, .md td { border: 1px solid #e2e8f0; padding: 2px 5px; text-align: start; }
+  .md code { font-family: ui-monospace, monospace; font-size: 8.5px; }
+  .md a { color: inherit; text-decoration: underline; }
+  .md blockquote { border-inline-start: 2px solid #e2e8f0; padding-inline-start: 6px; }
+`;

client/src/components/Planner/DayPlanSidebar.tsx

@@ -43,6 +43,7 @@ import './dayPlanRows.css'
 
 import { TypeTile } from './bookings/bookingParts'
 import { typeInfo } from './bookings/bookingsModel'
+import { transportSubtitle } from './transportDetailModel'
 import { dayHeadStays } from './dayHeadStays'
 import { getAccommodationAnchors, getDayBookendHotels, shouldDrawMorningLeg, shouldDrawEveningLeg, type CarrierEdge } from '../../utils/dayOrder'
 import {
@@ -2166,24 +2167,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                         let meta: any = {}
                         try { meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {}) } catch { meta = {} }
 
-                        // Subtitle aus Metadaten zusammensetzen
-                        let subtitle = ''
-                        if (res.__leg) {
-                          // One leg of a multi-leg flight/train — show this segment's own detail.
-                          const parts = res.type === 'train'
-                            ? [res.__leg.train_number, res.__leg.platform ? `${t('reservations.meta.platform')} ${res.__leg.platform}` : '', res.__leg.seat ? `${t('reservations.meta.seat')} ${res.__leg.seat}` : ''].filter(Boolean)
-                            : [res.__leg.airline, res.__leg.flight_number].filter(Boolean)
-                          if (res.__leg.from || res.__leg.to)
-                            parts.push([res.__leg.from, res.__leg.to].filter(Boolean).join(' → '))
-                          subtitle = parts.join(', ')
-                        } else if (res.type === 'flight') {
-                          const parts = [meta.airline, meta.flight_number].filter(Boolean)
-                          if (meta.departure_airport || meta.arrival_airport)
-                            parts.push([meta.departure_airport, meta.arrival_airport].filter(Boolean).join(' → '))
-                          subtitle = parts.join(', ')
-                        } else if (res.type === 'train') {
-                          subtitle = [meta.train_number, meta.platform ? `${t('reservations.meta.platform')} ${meta.platform}` : '', meta.seat ? `${t('reservations.meta.seat')} ${meta.seat}` : ''].filter(Boolean).join(', ')
-                        }
+                        // A leg of a multi-leg flight or train shows its own detail (#2701).
+                        const subtitle = transportSubtitle(res, t) ?? ''
 
                         // A transit journey (#1065) renders its itinerary inline —
                         // line badges in their colors instead of a plain subtitle,

client/src/components/Planner/transportDetailModel.ts

@@ -23,3 +23,65 @@ export function bookingDayLabel(date: string, locale: string): string {
 export function segmentCodeLabel(leg: { from?: string | null; to?: string | null }, t: Translate): string {
   return [leg.from, leg.to].filter(Boolean).join(' → ') || t('reservations.confirmationCode');
 }
+
+/** The per-leg detail the day plan's leg rows carry (utils/dayMerge's `__leg`). */
+export interface TransportLegDetail {
+  index: number;
+  from?: string | null;
+  to?: string | null;
+  airline?: string | null;
+  flight_number?: string | null;
+  train_number?: string | null;
+  platform?: string | null;
+  seat?: string | null;
+}
+
+/**
+ * The subtitle of a transport row in the day plan, desktop and phone alike. A
+ * leg of a multi-leg train or flight names its own train or flight, platform
+ * and seat (#2701); a whole booking reads them off its metadata. Null for the
+ * other transport types, which each view labels its own way.
+ */
+export function transportSubtitle(
+  res: { type: string; metadata?: unknown; __leg?: TransportLegDetail | null },
+  t: Translate
+): string | null {
+  const meta = parseMeta(res.metadata);
+  const leg = res.__leg;
+  const trainParts = (d: { train_number?: unknown; platform?: unknown; seat?: unknown }) => [
+    str(d.train_number),
+    str(d.platform) ? `${t('reservations.meta.platform')} ${str(d.platform)}` : '',
+    str(d.seat) ? `${t('reservations.meta.seat')} ${str(d.seat)}` : '',
+  ];
+  if (leg) {
+    const parts = res.type === 'train' ? trainParts(leg) : [str(leg.airline), str(leg.flight_number)];
+    if (leg.from || leg.to) parts.push([leg.from, leg.to].filter(Boolean).join(' → '));
+    return parts.filter(Boolean).join(', ');
+  }
+  if (res.type === 'flight') {
+    const parts = [str(meta.airline), str(meta.flight_number)];
+    if (meta.departure_airport || meta.arrival_airport) {
+      parts.push([str(meta.departure_airport), str(meta.arrival_airport)].filter(Boolean).join(' → '));
+    }
+    return parts.filter(Boolean).join(', ');
+  }
+  if (res.type === 'train') return trainParts(meta).filter(Boolean).join(', ');
+  return null;
+}
+
+function str(value: unknown): string {
+  return typeof value === 'string' || typeof value === 'number' ? String(value) : '';
+}
+
+function parseMeta(metadata: unknown): Record<string, unknown> {
+  let meta = metadata;
+  // An earlier bug could double-encode the metadata; reading it twice heals that.
+  for (let i = 0; i < 2 && typeof meta === 'string'; i++) {
+    try {
+      meta = JSON.parse(meta || '{}');
+    } catch {
+      meta = {};
+    }
+  }
+  return meta && typeof meta === 'object' ? (meta as Record<string, unknown>) : {};
+}

client/src/components/Plugins/PluginFrame.tsx

@@ -11,6 +11,7 @@ import ConfirmDialog from '../shared/ConfirmDialog'
 import { pluginsApi } from '../../api/client'
 import { addListener, removeListener } from '../../api/websocket'
 import { useIsPhone } from '../../mobile/useIsPhone'
+import { browserTimeZone } from '../../utils/localDate'
 
 // The design-token contract handed to plugins (#4 richer context): non-secret CSS
 // values, resolved for the CURRENT theme, so a plugin can match TREK exactly (and
@@ -379,7 +380,7 @@ export default function PluginFrame({ pluginId, tripId = null, placeId = null, d
       timeFormat: settings.time_format,
       distanceUnit: settings.distance_unit,
       temperatureUnit: settings.temperature_unit,
-      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      timezone: browserTimeZone() ?? 'UTC',
       blurBookingCodes: Boolean(settings.blur_booking_codes),
     },
     tokens: readThemeTokens(),

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/SaveIndicator.tsx

@@ -15,15 +15,13 @@ import type { SaveState } from './useBookStore'
  * which is exactly the wrong habit for the one time it says something else.
  */
 export function SaveIndicator({
-  state, t, onAcceptTheirs, onKeepMine, onRetry, onReload = reloadStudio,
+  state, t, onAcceptTheirs, onKeepMine, onRetry,
 }: {
   state: SaveState
   t: (k: string) => string
   onAcceptTheirs: (current: BookRecord) => void
   onKeepMine: (current: BookRecord) => void
   onRetry: () => void
-  /** Load this Studio again, for a book a newer one saved. A full reload by default. */
-  onReload?: () => void
 }) {
   if (state.status === 'conflict') {
     return (
@@ -45,23 +43,8 @@ export function SaveIndicator({
     )
   }
 
-  if (state.status === 'newer') {
-    /*
-     * The one state with a way out the user has to take themselves: a newer
-     * Studio saved this book, this tab cannot write it without losing what
-     * that one added, and only a reload brings the newer Studio here. Loud
-     * like a conflict, because until then nothing done here is kept.
-     */
-    return (
-      <div className="st-save is-conflict" role="alert">
-        <AlertTriangle size={13} />
-        <span>{t('journey.studio.saveNewer')}</span>
-        <button type="button" onClick={onReload}>
-          {t('journey.studio.saveReload')}
-        </button>
-      </div>
-    )
-  }
+  // A book a newer Studio saved is the shell's to say, over everything (NewerBookOverlay).
+  if (state.status === 'newer') return null
 
   if (state.status === 'readonly') {
     /*
@@ -107,6 +90,32 @@ export function SaveIndicator({
   return null
 }
 
+/**
+ * A book a newer Studio saved, said over the whole Studio rather than in the
+ * bar: this tab cannot write the book without losing what the newer one
+ * added, and only a reload brings the newer Studio here. Until then nothing
+ * done here would be kept, so nothing can be done: the overlay takes every
+ * click and offers the one way out there is.
+ */
+export function NewerBookOverlay({ t, onReload = reloadStudio }: {
+  t: (k: string) => string
+  onReload?: () => void
+}) {
+  return (
+    <div className="st-newer" role="alertdialog" aria-modal="true" aria-labelledby="st-newer-text">
+      <div className="st-newer-card">
+        <span className="st-newer-icon"><RefreshCw size={22} strokeWidth={2.2} /></span>
+        <p id="st-newer-text" className="st-newer-text">{t('journey.studio.saveNewer')}</p>
+        {/* Focused on arrival, so Enter reloads and nothing behind the overlay takes the keyboard. */}
+        <button type="button" className="st-newer-reload" onClick={onReload} autoFocus>
+          <RefreshCw size={15} />
+          {t('journey.studio.saveReload')}
+        </button>
+      </div>
+    </div>
+  )
+}
+
 /** The default way back to a current Studio: the page again, which loads the newest build. */
 function reloadStudio() {
   window.location.reload()

client/src/components/Studio/SpreadThumb.tsx

@@ -18,6 +18,12 @@ interface SpreadThumbProps {
   className?: string;
   /** Pixels per millimetre the caller draws at; CSS's own unless the caller zooms. */
   pxPerMm?: number;
+  /**
+   * Draw the first and the last page beside the blank inside of their cover,
+   * as the bound book opens on them, so the rail shows why they stand alone.
+   * The words are the half's name, read out and shown on hover.
+   */
+  coverInside?: string;
 }
 
 /**
@@ -37,16 +43,31 @@ export function SpreadThumb({
   fold = false,
   className,
   pxPerMm = PX_PER_MM,
+  coverInside,
 }: SpreadThumbProps) {
   const single = spread.role !== 'inner';
-  const wMm = single ? page.pageWidth : page.pageWidth * 2;
+  // The first page opens on the right of the cover's inside, the last on the left of the back's.
+  const opens = coverInside && (spread.role === 'first' || spread.role === 'last') ? spread.role : null;
+  const wMm = single && !opens ? page.pageWidth : page.pageWidth * 2;
   const scale = width / (wMm * pxPerMm);
+  const pageLeft = opens === 'first' ? page.pageWidth * pxPerMm * scale : 0;
   return (
     <div dir="ltr" className={className} style={{ width, height: page.pageHeight * pxPerMm * scale }}>
+      {opens && (
+        <span
+          className="st-thumb-inside"
+          title={coverInside}
+          aria-label={coverInside}
+          style={{
+            insetInlineStart: opens === 'first' ? 0 : page.pageWidth * pxPerMm * scale,
+            width: page.pageWidth * pxPerMm * scale,
+          }}
+        />
+      )}
       <div
         style={{
           position: 'absolute',
-          insetInlineStart: 0,
+          insetInlineStart: pageLeft,
           top: 0,
           width: `${wMm}mm`,
           height: `${page.pageHeight}mm`,
@@ -56,7 +77,7 @@ export function SpreadThumb({
       >
         <SpreadView spread={spread} page={page} folios={folios} />
       </div>
-      {fold && !single && <SpreadFold page={page} scaled={pxPerMm * scale} />}
+      {fold && (!single || opens) && <SpreadFold page={page} scaled={pxPerMm * scale} />}
     </div>
   );
 }

client/src/components/Studio/StudioArrangeSection.tsx

@@ -20,7 +20,6 @@ import {
   Ungroup,
   type LucideIcon,
 } from 'lucide-react';
-import { useState } from 'react';
 
 import { useStudioStore } from '../../store/studioStore';
 import '../../styles/studio-panels.css';
@@ -118,7 +117,8 @@ export function StudioArrangeSection({
   const copyStyle = useStudioStore((s) => s.copyStyle);
   const pasteStyle = useStudioStore((s) => s.pasteStyle);
   const keys = useStudioShortcut();
-  const [chosenTo, setChosenTo] = useState<BookAlignTo | null>(null);
+  const chosenTo = useStudioStore((s) => s.alignTo);
+  const setChosenTo = useStudioStore((s) => s.setAlignTo);
 
   if (!spread || !selection.length) return null;
   const sel = spread.elements.filter((e) => selection.includes(e.id));

client/src/components/Studio/StudioAssistantPanel.tsx

@@ -215,13 +215,13 @@ export function StudioAssistantToggle({ assistant }: { assistant: StudioAssistan
   return (
     <button
       type="button"
-      className={`st-tool st-assistant-toggle ${assistant.open ? 'is-on' : ''}`}
+      className={`st-tool is-icon st-head-solo st-assistant-toggle ${assistant.open ? 'is-on' : ''}`}
       onClick={assistant.toggle}
       aria-pressed={assistant.open}
+      aria-label={t('journey.studio.assistant.toggle')}
       title={t('journey.studio.assistant.toggleHint')}
     >
-      <MessageSquare size={14} />
-      <span className="st-tool-label">{t('journey.studio.assistant.toggle')}</span>
+      <MessageSquare size={15} />
     </button>
   );
 }