fix(journey): the share link's copy button and its switches show their words again

The filled buttons set their label in text-accent-on, the accent used as text on a plain surface, which on the accent's own ground is the same colour: a black button with black words. They take text-accent-text, the colour made for words on the accent, and a test pins it.
feat(admin): release notes show a #### heading as the feature it names
2026-10-24 16:03:02 +00:00 · 2026-10-24 17:31:50 +02:00 · 2026-10-24 17:31:49 +02:00 · 2026-10-24 17:31:48 +02:00 · 2026-10-24 17:31:47 +02:00 · 2026-10-24 17:31:47 +02:00
460 changed files with 15628 additions and 3324 deletions
@@ -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()
@@ -1300,7 +1314,7 @@ const SCRIPTS: Record<string, GuideScript> = {
        },
      },
      {
-        target: p => p.locator('.st-back'),
+        target: p => p.locator('.st-head-close'),
      },
    ],
  },
@@ -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(),
      },
    ],
  },
@@ -1,9 +1,9 @@
 {
  "src": {
-    "@typescript-eslint/no-non-null-assertion": 385,
+    "@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,
@@ -35,7 +35,7 @@
  },
  "tests": {
    "@typescript-eslint/no-explicit-any": 490,
-    "@typescript-eslint/no-non-null-assertion": 1931,
+    "@typescript-eslint/no-non-null-assertion": 1929,
    "@typescript-eslint/no-misused-promises": 22,
    "@typescript-eslint/no-unused-vars": 51,
    "@typescript-eslint/no-floating-promises": 33,
@@ -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_:-]+)+$/;
@@ -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,
@@ -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": 2009
+  "src/styles/studio.css": 1918
 }
@@ -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,
@@ -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,
@@ -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),
-};
@@ -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();
+  });
 });
+
@@ -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>
+    </>
  )
 }
@@ -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)}>
@@ -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">
@@ -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 && (
@@ -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;
+}
@@ -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);
+  });
+});
@@ -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]);
+}
@@ -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']);
+  });
 });
@@ -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(() => {});
  };
@@ -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,
@@ -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')
+    }
+  })
 })
@@ -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'
                }`}
              >
@@ -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
@@ -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>
  )
@@ -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>
+  );
+}
@@ -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);
+  });
+});
@@ -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;
+}
@@ -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')
  })

@@ -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')
@@ -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; }
+`;
@@ -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,
@@ -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>) : {};
+}
@@ -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(),
@@ -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();
-  });
 });
@@ -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} />
@@ -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 () => {
@@ -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>
  );
 }
@@ -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();
-  });
-});
@@ -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>
-  );
-}
@@ -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';
@@ -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,
-  };
-}
@@ -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()
@@ -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>
  );
 }
@@ -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));
@@ -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>
  );
 }
@@ -2,7 +2,7 @@ import { useId, useState } from 'react'
 import { Frame, Minus, Quote, Shapes, Spline, Sparkles, Square, Sticker, Type, type LucideIcon } from 'lucide-react'
 import type { BookElement, BookPageSetup, BookShapeId } from '@trek/shared'
 import { useStudioStore } from '../../store/studioStore'
-import { FRAME_SHAPES, HOLED_SHAPES, SHAPE_GROUPS } from './shapes'
+import { FRAME_SHAPES, HOLED_SHAPES, SHAPE_GROUPS, shapeName } from './shapes'
 import {
  BOOK_GRIDS as GRIDS, MAX_SPREAD_ELEMENTS, bookElementId, bookShapeSize, bookGridElements as gridElements,
  defaultBookGridBox as defaultGridBox,
@@ -195,7 +195,11 @@ function useElementAdders(page: BookPageSetup) {
    const els = gridElements(grid, defaultGridBox(page, single))
    // The page's own cap, as a duplicate keeps it: frames that would make the book unsaveable are not added.
    const on = useStudioStore.getState().doc?.spreads[active]
-    if (!on || on.elements.length + els.length > MAX_SPREAD_ELEMENTS) return
+    if (!on) return
+    if (on.elements.length + els.length > MAX_SPREAD_ELEMENTS) {
+      useStudioStore.getState().refuseFull()
+      return
+    }
    commit(d => ({
      ...d,
      spreads: d.spreads.map((sp, i) => (i !== active ? sp : { ...sp, elements: [...sp.elements, ...els] })),
@@ -276,7 +280,8 @@ function ShapesTab({ addShape, t }: { addShape: Adders['addShape']; t: (k: strin
                key={shape}
                className="st-shape-btn is-glyph"
                onClick={() => addShape(shape)}
-                aria-label={shape}
+                title={shapeName(shape, t)}
+                aria-label={shapeName(shape, t)}
              >
                <ShapeGlyph shape={shape} />
              </button>
@@ -315,7 +320,8 @@ function FramesTab({ adders, t }: { adders: Adders; t: (k: string) => string })
              key={shape}
              className="st-shape-btn is-glyph"
              onClick={() => adders.addFrame(shape === 'rect' ? null : shape)}
-              aria-label={shape}
+              title={shapeName(shape, t)}
+              aria-label={shapeName(shape, t)}
            >
              <ShapeGlyph shape={shape} photo />
            </button>
@@ -0,0 +1,119 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { fireEvent, render, screen } from '../../../tests/helpers/render';
+import { useStudioStore } from '../../store/studioStore';
+import { StudioHeader } from './StudioHeader';
+import type { Studio } from './StudioShell';
+import type { StudioAssistant } from './useStudioAssistant';
+
+/**
+ * FE-STUDIO-HEAD-001 to FE-STUDIO-HEAD-007: the Studio's head band, with the
+ * hook's answer stubbed to what the band reads.
+ */
+
+function studio(over: Partial<Studio> = {}): Studio {
+  return {
+    t: (key: string) => key,
+    journey: { title: 'Japan 2026' },
+    coverUrl: '/uploads/cover.jpg',
+    saveState: { status: 'idle' },
+    peers: [],
+    canUndo: true,
+    canRedo: false,
+    canEdit: true,
+    activeSpread: 0,
+    doc: { spreads: [] },
+    preset: 'square-210',
+    page: { pageWidth: 210, pageHeight: 210, bleed: 3, safe: 5 },
+    canRelayoutSpread: true,
+    undo: vi.fn(),
+    redo: vi.fn(),
+    close: vi.fn(),
+    setPreset: vi.fn(),
+    setPageSize: vi.fn(),
+    setPageEdge: vi.fn(),
+    relayoutCurrentSpread: vi.fn(),
+    relayoutBook: vi.fn(),
+    loadDoc: vi.fn(),
+    acceptTheirs: vi.fn(),
+    keepMine: vi.fn(),
+    saveNow: vi.fn(),
+    ...over,
+  } as unknown as Studio;
+}
+
+const noAssistant = { available: false } as unknown as StudioAssistant;
+
+function head(s = studio(), onExport = vi.fn()) {
+  render(<StudioHeader s={s} onExport={onExport} assistant={noAssistant} />);
+  return { s, onExport };
+}
+
+describe('StudioHeader', () => {
+  it("FE-STUDIO-HEAD-001: names the journey under the Studio's mark, with its cover as the tile", () => {
+    head();
+    expect(screen.getByRole('heading', { name: 'Japan 2026' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'TREK Studio' })).toBeInTheDocument();
+    expect(document.querySelector('.st-head-tile img')?.getAttribute('src')).toBe('/uploads/cover.jpg');
+  });
+
+  it('FE-STUDIO-HEAD-002: the round button closes the Studio, export hands over', () => {
+    const { s, onExport } = head();
+    fireEvent.click(screen.getByRole('button', { name: 'journey.studio.backToJourney' }));
+    expect(s.close).toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: /journey.studio.export/ }));
+    expect(onExport).toHaveBeenCalled();
+  });
+
+  it('FE-STUDIO-HEAD-003: undo runs, redo waits for something to redo, paste for something copied', () => {
+    const { s } = head();
+    fireEvent.click(screen.getByRole('button', { name: 'journey.studio.undo' }));
+    expect(s.undo).toHaveBeenCalled();
+    expect(screen.getByRole('button', { name: 'journey.studio.redo' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'journey.studio.paste' })).toBeDisabled();
+  });
+
+  it('FE-STUDIO-HEAD-004: the format chip names the format and opens the list, a pick sets it', () => {
+    const { s } = head();
+    const chip = screen.getByRole('button', { name: 'journey.studio.format' });
+    expect(chip).toHaveAttribute('aria-expanded', 'false');
+    fireEvent.click(chip);
+    const options = screen.getAllByRole('option');
+    expect(options.length).toBeGreaterThan(1);
+    fireEvent.click(options[options.length - 1]);
+    expect(s.setPreset).toHaveBeenCalled();
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('FE-STUDIO-HEAD-005: a custom format reads its size, and Escape or a press outside closes the list', () => {
+    head(
+      studio({ preset: 'custom', page: { pageWidth: 180.4, pageHeight: 240, bleed: 3, safe: 5 } } as Partial<Studio>)
+    );
+    const chip = screen.getByRole('button', { name: 'journey.studio.format' });
+    expect(chip).toHaveTextContent('180 × 240 mm');
+    fireEvent.click(chip);
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    fireEvent.click(chip);
+    fireEvent.pointerDown(document.body);
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('FE-STUDIO-HEAD-006: auto layout offers this spread and the whole book', () => {
+    const { s } = head();
+    fireEvent.click(screen.getByRole('button', { name: /journey.studio.autoLayout/ }));
+    fireEvent.click(screen.getByRole('menuitem', { name: /^journey\.studio\.relayoutSpread/ }));
+    expect(s.relayoutCurrentSpread).toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: /journey.studio.autoLayout/ }));
+    fireEvent.click(screen.getByRole('menuitem', { name: /^journey\.studio\.relayoutBook/ }));
+    expect(s.relayoutBook).toHaveBeenCalled();
+  });
+
+  it('FE-STUDIO-HEAD-007: with something copied, paste puts it on the page on screen', () => {
+    const paste = vi.fn();
+    useStudioStore.setState({ clipboard: { elements: [] } as never, paste } as never);
+    head(studio({ activeSpread: 2 } as Partial<Studio>));
+    fireEvent.click(screen.getByRole('button', { name: 'journey.studio.paste' }));
+    expect(paste).toHaveBeenCalledWith(2);
+  });
+});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Maurice	48befc210d	fix(journey): the share link's copy button and its switches show their words again The filled buttons set their label in text-accent-on, the accent used as text on a plain surface, which on the accent's own ground is the same colour: a black button with black words. They take text-accent-text, the colour made for words on the accent, and a test pins it.	2026-10-24 17:31:50 +02:00
Maurice	0eb5292ca4	feat(admin): release notes show a #### heading as the feature it names The release notes in Admin read ## as the version and ### as a section, and printed a #### line as plain text. A release that heads each feature inside a section with #### (Tours, TREK Studio under Added) now shows it as a feature heading between the section and its text, on desktop and on the phone.	2026-10-24 17:31:49 +02:00
Maurice	eb9ad50dca	chore(assistant): drop Connect with Claude from the integration settings The card that opened claude.ai's custom connector dialog for this instance goes, with its phone twin, the line in the assistant setup that jumped to it, its endpoint and its contract. Anyone who wants Claude uses TREK's MCP server under Integrations, or an Anthropic key in the assistant. It came with the assistant and never shipped in a release.	2026-10-24 17:31:48 +02:00
Maurice	280e55bbc9	test(vacay): a day in a year the plan has not opened also announces the new year The broadcast parity cases toggle a day in 2027, which the seeded plan does not hold, so both MCP and REST now send vacay:settings for the opened year before vacay:update.	2026-10-24 17:31:47 +02:00
Maurice	e84060cdf7	refactor(vacay): the pure constants live in the helpers, so the service keeps its size budget The holiday feeds' limits and patterns and the colour palette move to vacay.helpers.ts, which holds the vacay domain's pure half already. That keeps the service under its line budget after the missing-year fix.	2026-10-24 17:31:47 +02:00
Maurice	fbc85b05a1	fix(vacay): a day set for a year the plan has not opened adds that year The calendar offers only the plan's years, but a vacation day or company holiday could be written for any date. A day set months ahead, as the assistant did for 6 January 2027, was stored and counted yet never shown, because 2027 was not a year of the plan. Writing a day now adds its year, with every member's allowance, the way opening it by hand does; the year is the writer's leave period that holds the date. This holds for the app, MCP, plugins and the assistant alike, since they all write through here.	2026-10-24 17:31:47 +02:00
Maurice	01333c6ff3	chore(client): hold the complexity count at the notifications redesign's lower one	2026-10-24 17:31:46 +02:00
Maurice	aecef03090	feat(notifications): a tile per kind, the list cut into days, and clear actions Every notification gets a tile in the colour of what it is about (a trip, a message, a booking, packing, a to-do, Vacay, a collection, shared photos, a tour, an update or an alert) with the sender's face on its corner, the page and the bell's panel group the list under Today, Yesterday, the weekday or the date, and answering or following a notification is a proper button. The server's UTC timestamps are read as UTC for the grouping and the time.	2026-10-24 17:31:46 +02:00
Maurice	8dacd0a50c	fix(book): the auto layout's drawn templates no longer carry photos of the book they were drawn in Three photo frames in the templates kept the photo ids of the journey the templates were read out of (68 and 69). Only empty frames take an entry's photos, so every book laid out on those templates pointed at those ids: a broken picture on most installs, and on one where the id exists, someone else's photo or an unrelated one of the user's own. The frames are empty now and take the entry's photos like the others. The parity digests of the five spreads that use them are written anew, as the spec asks for a deliberate layout change.	2026-10-24 16:59:53 +02:00
Maurice	3c73da4427	fix(assistant): bring the end of a long answer into view once it is written A new question is held at the top of the view, so its answer reads from its first line. When the answer carries steps, a strip of places and cards, its closing words and the changes to apply ended below the view, and the user saw only the places found. Once the answer is written, the thread now scrolls to where those closing blocks begin, or to the bottom when they are shorter than the view, unless the user scrolled it by hand meanwhile.	2026-10-24 16:33:14 +02:00
Maurice	cff2e55db7	feat(help): Studio's help as Studio is now, with guides for themes, stickers, travel, text effects, backgrounds, layers and own layouts The screen texts name the top bar, the rail and the workbench as they are after the redesign, the travel guide walks through the four tabs, and six new guides cover what Studio gained since its help was written. Every Studio picture is taken again, and all texts are translated.	2026-10-24 15:38:36 +02:00
Maurice	429a25faa9	fix(admin): name the addon columns by start and end	2026-10-24 15:10:13 +02:00
Maurice	486a2eeca3	feat(admin): addons tab in the cards of the other tabs, with a search and an on/off filter The addons sit in a card per type now, the way every other admin tab sets its cards, instead of three columns nested in one card. A head card shows how many of each type are on and finds an addon by its name or description, with a switch between all, the ones on and the ones off.	2026-10-24 15:10:13 +02:00
Maurice	26a6147e8d	fix(book): a summary's and a country's look are optional, so a stored book reads and saves as it did Absent means the classic look. Defaulting it wrote the field into every element the auto layout and the templates build, which moved their parity fixtures and grew the page tools past their schema ceiling; the new descriptions are also shorter for the same reason.	2026-10-24 14:59:00 +02:00
Maurice	a7b53988ff	feat(studio): rethink the travel tab with many new looks, a saved tile and a newer-book overlay The travel tab is four tabs now, figures, maps, countries and marks, and offers only the newer looks, each dressed in the book's theme and linked to it. The looks books already hold still draw on their pages exactly as before; they are just no longer offered. - Figures: a summary as a poster, a ticket, tiles, a road sign, an odometer, a handwritten note, a pencil sketch or a band, and each figure on its own as a medal, on odometer drums or ringed by hand. - Maps: the route with its photographs, its stops numbered, its two ends marked or on a dark ground, over satellite or relief imagery, a map per trip, and a map of each country with its stops alone, cut to its shape. - Countries: each country as a passport stamp, a visa, an airmail postcard, its flag in cloth, a map pin, a luggage label or a sketch. - Marks: the date, the day, the distance, the coordinates and the flag as stamps, tags, pills, ribbons, die-cut stickers, embroidered patches and sketches. The schema gains a summary's and a country's look, seven mark styles and the numbered and ends stops of a map, all additive, as revision 11. Also in Studio: the save state is a tile beside who is here, a book a newer Studio saved is said by an overlay that holds the whole Studio until it reloads, and the page rail draws the first and the last page beside the blank inside of their cover. The notifications page and the bell's panel take the dialogs' look: a head with a tile, cards with an unread dot, and tools that come forward on hover.	2026-10-24 14:45:04 +02:00
Maurice	3f3e2f0bcf	chore(client): hold the refs count and the stylesheet size at what they are	2026-10-24 14:06:40 +02:00
Maurice	f956ab07f3	fix(studio): tidy the head row, the layouts tab and the theme panel Every piece of the head row is one raised tile of one height: the format picker moved beside the tools, the assistant and help stand alone, the close button is square like the rest, and the beta mark is gone. The layouts tab lays the book's own and the built-in layouts out in sections and in the same grid as the designed pages. In the theme panel the accent dots sit in the sheet's corner, the three accents share one name, a font keeps its name ahead of its kind, a doubled rule is gone, and the inspector's empty hint is shorter.	2026-10-24 13:54:49 +02:00
Maurice	736594696e	fix(tours): one summit per mountain in the places along a tour The index holds a mountain as many pins named by whoever listed it, at its foot as much as on top, so a hike up Mt. Takao listed it five times under names like Mt.Takao, 東京都高尾山 and 高尾山 (Mt. Takao). Rows that are one place now merge as a group: like names in one spot for every kind, and for a summit of the index like names anywhere on the mountain, linked through a name that carries both scripts. The row kept is an OpenStreetMap object over an index pin, then the plainest name. Two OpenStreetMap summits stay two.	2026-10-24 13:54:48 +02:00
Maurice	1be997f7d8	test(studio): the pattern picker test counts the tiles against BOOK_PATTERNS	2026-10-24 11:36:30 +02:00
Maurice	5a8ff16afa	test(studio): the shape swap test finds the ellipse by its translated name	2026-10-24 11:28:13 +02:00
Maurice	4435dc32b8	refactor(studio): gradient stops built by a plain function; the letters' fill in a helper	2026-10-24 11:07:16 +02:00
Maurice	f5a33e0c1e	refactor(studio): a paint's SVG parts in a module of their own; the pattern letters a component of their own	2026-10-24 11:07:16 +02:00
Maurice	a8326b6f5a	chore(client): the shape name entry at the end of the dynamic key list, beside the sticker one	2026-10-24 11:07:16 +02:00
Maurice	1e999d968a	fix(studio): the new stickers drawn with the path commands the catalogue takes; the text fill test without Array.at	2026-10-24 11:07:16 +02:00
Maurice	d0f74c9f02	feat(studio): add_book_pages, set_book_cover and design_book's cover take the decorated templates too	2026-10-24 11:07:16 +02:00
Maurice	f14f1e41b9	fix(studio): bold text measured at each family's own bold width, so a bold condensed heading no longer overruns its frame	2026-10-24 11:07:16 +02:00
Maurice	9138e722bb	feat(studio): twelve new stickers: Parthenon, Milan Cathedral, canal houses, gondola, Lisbon tram, Celtic harp, tiger, monkey, camel and three doodles	2026-10-24 11:07:16 +02:00
Maurice	9695e269e3	fix(studio): shapes named in every language, the align target kept across selections, up and down in a tab grid	2026-10-24 11:07:16 +02:00
Maurice	82bdf62c7b	feat(studio): linen and paper grain, two quiet textures among the patterns	2026-10-24 11:07:15 +02:00
Maurice	8893e3afe0	feat(studio): letters filled with a gradient or a pattern	2026-10-24 11:07:15 +02:00
Maurice	cd1e7d8fa8	refactor(pdf): call the markdown row directly	2026-10-24 10:39:36 +02:00
Maurice	059e72df69	refactor(pdf): the markdown rows and styles in a module of their own; the shared stop's markdown test beside its component	2026-10-24 10:39:36 +02:00
Maurice	dc519b3ea7	fix(journey): a journey's created_at is an epoch number	2026-10-24 10:39:36 +02:00
Maurice	ad4074f107	fix: journey year helper takes what a journey row carries; PDF markdown test without casts	2026-10-24 10:39:36 +02:00
Maurice	0534d7b3a7	fix: test strings, logical sides in the PDF markdown styles, one export per markdown module	2026-10-24 10:39:36 +02:00
Maurice	a0554c2346	fix: four reported bugs that dev still had - Dashboard: a browser that names no time zone (Chrome on Windows for a zone it cannot map) crashed the world clocks and the whole dashboard. One helper now reads the browser zone and every reader picks its fallback; a stored zone the browser does not know is left out instead of throwing (#2694). - Phone: a leg of a multi-leg train or flight showed only its route, and its sheet showed the first leg's seat. The day plan subtitle is one helper for desktop and phone now, so a leg names its own train or flight, platform and seat, translated instead of the hardcoded "Gl."/"Sitz"; the sheet opened from a leg shows that leg's number, seat, platform and times (#2701). The PDF export translates platform and seat too. - Journey list: the year badge named the year a journey was written, not the years of its trips; a trip over New Year shows both (#2685). - A place's description and notes are markdown in the planner but printed as raw syntax in the PDF export and on a shared trip. Both render it now through the app's sanitized markdown pipeline, raw HTML stays text (#2692). Closes #2694 Closes #2701 Closes #2685 Closes #2692	2026-10-24 10:39:35 +02:00
Maurice	bc5af23896	chore(client): lower the test non-null assertion baseline to what the tree holds	2026-10-24 10:08:00 +02:00
Maurice	92be8a7ca5	fix(studio): lint and test fixes: zoom bar labels without the studio object, tile zooms in a helper, tests without non-null assertions or the window toast	2026-10-24 10:07:59 +02:00
Maurice	44ea1ea0ba	fix(places): search_place asks for one place per query, so the assistant stops bundling four names into one search	2026-10-24 10:07:59 +02:00
Maurice	3bee600096	fix(assistant): a step that searched the web and called a tool no longer sends ChatGPT an answer to the search, which it refused	2026-10-24 10:07:59 +02:00
Maurice	5b4030f86b	fix(studio): the full page notice names no number, so it needs no plural forms	2026-10-24 10:07:59 +02:00
Maurice	e2c00ba18b	feat(studio): a full page says so instead of swallowing the click	2026-10-24 10:07:59 +02:00
Maurice	1050029842	fix(studio): a saved layout's background unlinks the page from its theme colour	2026-10-24 10:07:58 +02:00
Maurice	64edf899ac	fix(studio): stickers without gaps: the ramen bowl overlaps its broth, the croissant is one closed crescent, the nata's ribs stay in their cup	2026-10-24 10:07:58 +02:00
Maurice	0a9075af73	test(studio): the head band	2026-10-24 10:07:58 +02:00
Maurice	c3a5383f5e	feat(studio): the head band in the dialogs' shape, tools grouped by what they do, book view beside the zoom	2026-10-24 10:07:58 +02:00
Maurice	e96813edcf	fix(places): search_place says what locationBias does, so the assistant passes the neighbourhood instead of the city centre	2026-10-24 10:07:58 +02:00
Maurice	5e36e38b72	fix(offline): the vector prefetch takes the vector source and each source's own zooms; driving settings sync only with the add-on on	2026-10-24 10:07:58 +02:00