fix(i18n): the sticker entry of the dynamic key list goes at its end

A new element kind, sticker, draws layered vector illustrations from a library in twelve themes, behind its own entry point @trek/shared/stickers. Studio gets a Stickers rail section (themes, localized search, recently used, click or drag to place) and an inspector for colour slots, mirroring, turning and opacity. The assistant gets list_book_assets, add and style of stickers in edit_book_page, stickers in describe_book_page and an overlap warning for a sticker over words. BOOK_SCHEMA_REV goes to 2.

client/scripts/i18n-keys.mjs

@@ -144,6 +144,13 @@ export const DYNAMIC_ALLOWED = [
           'memories.* key in en',
       }))
   ),
+  {
+    file: 'components/Studio/stickerLibrary.ts',
+    template: 'journey.studio.sticker.${id}',
+    because:
+      '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',
+  },
 ];
 
 const KEY_RE = /^[a-z][a-zA-Z0-9_]*(?:\.[a-zA-Z0-9_:-]+)+$/;

client/src/components/Admin/addons/AiAdminConfig.test.tsx

@@ -22,7 +22,12 @@ vi.mock('../../../repo/aiConnectionsRepo', () => ({ aiConnectionsRepo: repo }));
 
 const { default: AiSettingsDialog } = await import('./AiAdminConfig');
 
-const SETTINGS: AiAdminSettings = { policy: 'instance_or_user', dailyTurns: 50, retention: { mode: 'days', days: 90 } };
+const SETTINGS: AiAdminSettings = {
+  policy: 'instance_or_user',
+  dailyTurns: 50,
+  webSearch: true,
+  retention: { mode: 'days', days: 90 },
+};
 const LIVE: AiAdminConnectionResponse = {
   connection: {
     scope: 'instance',
@@ -102,6 +107,17 @@ describe('the connection and the assistant', () => {
     expect(screen.getByText('Keep chats')).toBeInTheDocument();
   });
 
+  it('FE-COMP-AI-ADMIN-001b: the web search is on as it ships and is switched off on the assistant tab', async () => {
+    const user = userEvent.setup();
+    renderDialog();
+    await user.click(await screen.findByRole('button', { name: 'AI Assistant' }));
+    const toggle = screen.getByRole('button', { name: 'Web search' });
+    expect(toggle).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByText(/through the search of the AI provider it talks to/)).toBeInTheDocument();
+    await user.click(toggle);
+    expect(repo.saveAdminSettings).toHaveBeenCalledWith({ ...SETTINGS, webSearch: false });
+  });
+
   it('FE-COMP-AI-ADMIN-002: "Everyone uses their own" drops the connection and the limit', async () => {
     const user = userEvent.setup();
     renderDialog();

client/src/components/Admin/addons/AiAdminConfig.tsx

@@ -1,6 +1,7 @@
 import { Check, Loader2, Sparkles } from 'lucide-react';
 import React, { useId, useState } from 'react';
 import { useTranslation } from '../../../i18n';
+import ToggleSwitch from '../../Settings/ToggleSwitch';
 import AiConnectPanel, { ProviderMark } from '../../Settings/ai/AiConnectPanel';
 import { CONNECTION_STATUS } from '../../Settings/ai/aiConnectModel';
 import { SETTINGS_BUTTON, SETTINGS_BUTTON_DANGER, SettingsHint, StatusPill } from '../../Settings/settingsKit';
@@ -136,7 +137,7 @@ function InstanceConnection({ A }: { A: AiAdmin }) {
   );
 }
 
-/** The assistant's own limits: turns a day while the instance pays, and how long chats are kept. */
+/** The assistant's own limits: turns a day while the instance pays, how long chats are kept, whether it searches the web. */
 function AssistantLimits({ A }: { A: AiAdmin }) {
   const { t } = useTranslation();
   const fieldId = useId();
@@ -170,6 +171,19 @@ function AssistantLimits({ A }: { A: AiAdmin }) {
           size="sm"
         />
       </EditorField>
+      {A.settings && (
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center justify-between gap-3">
+            <span className="text-body font-medium text-content">{t('assistant.admin.webSearch')}</span>
+            <ToggleSwitch
+              on={A.settings.webSearch}
+              onToggle={() => A.setWebSearch(!A.settings?.webSearch)}
+              label={t('assistant.admin.webSearch')}
+            />
+          </div>
+          <SettingsHint>{t('assistant.admin.webSearchHint')}</SettingsHint>
+        </div>
+      )}
     </div>
   );
 }

client/src/components/Admin/addons/useAiAdminConfig.test.ts

@@ -30,7 +30,12 @@ const wrapper = ({ children }: { children: ReactNode }) =>
     createElement(TranslationProvider, null, children)
   );
 
-const SETTINGS: AiAdminSettings = { policy: 'instance_or_user', dailyTurns: 50, retention: { mode: 'days', days: 90 } };
+const SETTINGS: AiAdminSettings = {
+  policy: 'instance_or_user',
+  dailyTurns: 50,
+  webSearch: true,
+  retention: { mode: 'days', days: 90 },
+};
 const NONE: AiAdminConnectionResponse = { connection: null, prefill: null };
 const LIVE: AiAdminConnectionResponse = {
   connection: {

client/src/components/Admin/addons/useAiAdminConfig.ts

@@ -40,7 +40,7 @@ function retentionOf(value: string): AiRetention {
   return value === FOREVER ? { mode: 'forever' } : { mode: 'days', days: Number(value) };
 }
 
-/** Policy, daily limit and retention: each change is saved at once and taken back when the server refuses it. */
+/** Policy, daily limit, retention and web search: each change is saved at once and taken back when the server refuses it. */
 function useAdminSettings(onSaved: () => void) {
   const { t } = useTranslation();
   const toast = useToast();
@@ -92,6 +92,7 @@ function useAdminSettings(onSaved: () => void) {
       { value: FOREVER, label: t('assistant.admin.retentionForever') },
     ],
     setRetention: (value: string) => void save({ retention: retentionOf(value) }),
+    setWebSearch: (webSearch: boolean) => void save({ webSearch }),
   };
 }
 

client/src/components/Assistant/AssistantChangeCard.tsx

@@ -1,10 +1,11 @@
-import { Check, LoaderCircle, MapPin, Undo2 } from 'lucide-react';
+import { Check, CheckCheck, ListChecks, LoaderCircle, MapPin, Undo2 } from 'lucide-react';
 import { type ReactNode, useEffect, useMemo, useState } from 'react';
 
 import { useTranslation } from '../../i18n';
 import { blockKeyOf } from '../../store/assistantMapModel';
 import { chatOf, useAssistantStore } from '../../store/assistantStore';
 import { useTripStore } from '../../store/tripStore';
+import { DialogButton, NEUTRAL_TINT } from '../shared/DialogShell';
 import { useToast } from '../shared/Toast';
 import { Tooltip } from '../shared/Tooltip';
 import AssistantCompareSwitch from './AssistantCompareSwitch';
@@ -13,6 +14,8 @@ import AssistantWeekOverview from './AssistantWeekOverview';
 import { type ChangeItem, undoLeftMs } from './assistantParts';
 import { useAssistantView } from './assistantViewContext';
 import { ChangeRows } from './cards/ChangeCardSlots';
+import CardHeader from './cards/parts/CardHeader';
+import { CardFoot } from './cards/parts/CardSection';
 import { ICON_BUTTON } from './cards/parts/assistantTones';
 import { useChangeExclusions } from './cards/useChangeExclusions';
 import { changePoints, type DayChange } from './dayAfterModel';
@@ -60,6 +63,9 @@ function undoableNow(item: ChangeItem, undone: Readonly<Record<string, true>>, n
   );
 }
 
+/** The band of a card whose changes are all decided: the green of a done booking. */
+const DONE_TINT = 'color-mix(in srgb, var(--success) 9%, transparent)';
+
 /** The waiting changes the user left on that touch the day plan. */
 function dayChangesOf(items: readonly ChangeItem[], excluded: ReadonlySet<string>): DayChange[] {
   return items.flatMap((i) =>
@@ -69,17 +75,18 @@ function dayChangesOf(items: readonly ChangeItem[], excluded: ReadonlySet<string
   );
 }
 
-/** The card's head: what the card is, what can be done with it as a whole, and how many changes it holds. */
+/** The change card's band: tinted green once everything in it is decided, what it holds and its actions. */
 function CardHead({ open, count, actions }: { open: boolean; count: number; actions?: ReactNode }) {
   const { t } = useTranslation();
   return (
-    <div className="mb-1 flex min-h-7 items-center gap-2">
-      <span className="min-w-0 flex-1 truncate text-caption font-semibold text-content-secondary">
-        {t(open ? 'assistant.change.title' : 'assistant.change.doneTitle')}
-      </span>
-      {actions}
-      <span className="text-caption tabular-nums text-content-faint">{count}</span>
-    </div>
+    <CardHeader
+      icon={open ? ListChecks : CheckCheck}
+      tone={open ? 'info' : 'success'}
+      tint={open ? NEUTRAL_TINT : DONE_TINT}
+      title={t(open ? 'assistant.change.title' : 'assistant.change.doneTitle')}
+      count={count}
+      actions={actions}
+    />
   );
 }
 
@@ -224,7 +231,7 @@ export default function AssistantChangeCard({ items }: { items: ChangeItem[] })
 
   const open = pending.length > 0;
   return (
-    <section className="trek-popover-enter rounded-xl border border-edge-faint bg-surface-card px-3 pb-2 pt-2.5 shadow-card">
+    <section className="trek-popover-enter overflow-hidden rounded-[16px] border border-edge-faint bg-surface-card px-3.5 pb-3 pt-3 shadow-card">
       <CardHead
         open={open}
         count={items.length}
@@ -257,25 +264,19 @@ export default function AssistantChangeCard({ items }: { items: ChangeItem[] })
           <p className="sr-only" role="status">
             {t('assistant.change.pending', { count: pending.length })}
           </p>
-          <div className="flex justify-end gap-2 border-t border-edge-faint pt-2.5">
-            <button
-              type="button"
-              disabled={isRunning}
-              onClick={() => void submit(false)}
-              className="rounded-lg px-3 py-1.5 text-body text-content-secondary hover:bg-surface-hover hover:text-content disabled:opacity-50"
-            >
+          <CardFoot>
+            <DialogButton disabled={isRunning} onClick={() => void submit(false)}>
               {t('assistant.change.discard')}
-            </button>
-            <button
-              type="button"
+            </DialogButton>
+            <DialogButton
+              variant="primary"
               disabled={isRunning || chosen === 0}
               onClick={() => void submit(true)}
-              className="inline-flex items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-body font-medium text-accent-text hover:bg-accent-hover disabled:opacity-50"
+              icon={<Check size={14} aria-hidden="true" />}
             >
-              <Check size={14} aria-hidden="true" />
               {pending.length === 1 ? t('assistant.change.apply') : t('assistant.change.applyN', { count: chosen })}
-            </button>
-          </div>
+            </DialogButton>
+          </CardFoot>
         </>
       )}
     </section>

client/src/components/Assistant/AssistantHeader.tsx

@@ -103,11 +103,7 @@ export default function AssistantHeader({ tripId, thread, tripTitle, onClose, dr
         <div className="min-w-0 flex-1">
           {thread.isRunning ? (
             // While it works, the line over the title says what it does right now.
-            <p role="status" className="m-0 flex min-w-0 items-center gap-1.5 text-caption font-medium">
-              <span
-                aria-hidden="true"
-                className="trek-assistant-pulse h-1.5 w-1.5 flex-shrink-0 rounded-full bg-accent"
-              />
+            <p role="status" className="m-0 flex min-w-0 items-center text-caption font-medium">
               <span className="trek-assistant-shimmer truncate">{live?.text ?? t('assistant.step.working')}</span>
             </p>
           ) : (

client/src/components/Assistant/AssistantHost.tsx

@@ -2,6 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { useLocation, useMatch, useNavigate } from 'react-router';
 
 import { rememberListsSubTab } from '../../hooks/useListsSubTab';
+import { useAssistantStore } from '../../store/assistantStore';
 import { useTripStore } from '../../store/tripStore';
 import AssistantWindow from './AssistantWindow';
 import { plannerSearchOf } from './assistantShowOnMap';
@@ -22,7 +23,7 @@ function useRouteTripId(): number | null {
  * notification opens a place, a tab of the trip opens as `?tab=` (a list's
  * own tab remembered first), and another page is simply navigated to. A day
  * picked in the chat (its weather) selects that day the same way, and "On
- * map" on a card brings the planner's map back first.
+ * map" on a card brings the planner's map back first from a tab without one.
  */
 export default function AssistantHost() {
   const navigate = useNavigate();
@@ -54,8 +55,12 @@ export default function AssistantHost() {
     [navigate, openPlanner, tripId]
   );
   const focusDay = useCallback((dayId: number) => openPlanner(`?day=${dayId}`), [openPlanner]);
-  // "On map" from another tab of the planner (Tours, Costs, ...) first brings the map back.
-  const revealMap = useCallback(() => openPlanner('?tab=plan'), [openPlanner]);
+  // "On map" from a tab without a map (Costs, Lists, ...) first brings the plan's map back; the Tours tab
+  // shows the route on its own map. A map on screen tells the assistant its view, which is how it is known.
+  const revealMap = useCallback(() => {
+    if (useAssistantStore.getState().mapView?.tripId === tripId) return;
+    openPlanner('?tab=plan');
+  }, [openPlanner, tripId]);
 
   return <AssistantWindow trip={trip} onOpen={open} onFocusDay={focusDay} onRevealMap={revealMap} />;
 }

client/src/components/Assistant/AssistantMessage.tsx

@@ -11,7 +11,9 @@ import AssistantFollowUps from './AssistantFollowUps';
 import AssistantMarkdown from './AssistantMarkdown';
 import AssistantMentionText from './AssistantMentionText';
 import AssistantPlaceStrip from './AssistantPlaceStrip';
+import AssistantRemembered from './AssistantRemembered';
 import AssistantShareDialog from './AssistantShareDialog';
+import AssistantSources from './AssistantSources';
 import AssistantToolSteps from './AssistantToolSteps';
 import AssistantWeatherStrip from './AssistantWeatherStrip';
 import { messageBlocks } from './assistantParts';
@@ -129,6 +131,10 @@ function Answer({ message }: { message: StoredMessage }) {
           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} />;
       })}

client/src/components/Assistant/AssistantPlaceCard.tsx

@@ -1,12 +1,10 @@
 import type { AssistantFoundPlace } from '@trek/shared';
-import { Check, ChevronDown, LoaderCircle, MapPin, Plus, Star } from 'lucide-react';
+import { Check, MapPin, Plus, Star } from 'lucide-react';
 import { createElement, type ReactNode, useRef } from 'react';
 
 import { useTranslation } from '../../i18n';
 import { getCategoryIcon } from '../shared/categoryIcons';
-import { PopoverListPanel } from '../shared/dialogParts';
 import { Tooltip } from '../shared/Tooltip';
-import { usePopoverList } from '../shared/usePopoverList';
 import { useAssistantView } from './assistantViewContext';
 import type { useAssistantPlaceStrip } from './useAssistantPlaceStrip';
 import { useFoundPlacePhoto } from './useFoundPlacePhoto';
@@ -16,110 +14,14 @@ type Strip = ReturnType<typeof useAssistantPlaceStrip>;
 const ACTION =
   'inline-flex items-center gap-1 rounded-lg bg-surface-secondary text-caption font-medium text-content transition-colors hover:bg-surface-hover disabled:cursor-default disabled:opacity-50 disabled:hover:bg-surface-secondary';
 
-/** "+ Day 3" for the day in focus, a list of the trip's days beside it; "Pick a day" when no day is in focus. */
-function SuggestButton({ place, strip, tall }: { place: AssistantFoundPlace; strip: Strip; tall: boolean }) {
+/** "Add to trip": opens the planner's place form filled in with the place, its details loading beside it. */
+function AddButton({ place, strip, tall }: { place: AssistantFoundPlace; strip: Strip; tall: boolean }) {
   const { t } = useTranslation();
-  const { days, focusDay, disabled, blockedKey, adding } = strip;
-  const list = usePopoverList(focusDay ? days.findIndex((d) => d.id === focusDay.id) : 0, {
-    estimatedHeight: Math.ceil(days.length / 7) * 44 + 16,
-  });
-  const { open, toggle, close, triggerRef, listId } = list;
-  const height = tall ? 'h-10' : 'h-7';
-  const busy = adding === place.ref;
-
-  const pick = (dayId: number) => {
-    close();
-    void strip.suggest(place, dayId);
-  };
-
-  const buttons = (
-    <span className="inline-flex min-w-0 gap-px">
-      {focusDay ? (
-        <>
-          <button
-            type="button"
-            disabled={disabled}
-            onClick={() => void strip.suggest(place, focusDay.id)}
-            aria-label={t('assistant.place.addTo', { day: focusDay.label })}
-            className={`${ACTION} ${height} rounded-e-none px-2`}
-          >
-            {busy ? (
-              <LoaderCircle size={12} aria-hidden="true" className="animate-spin" />
-            ) : (
-              <Plus size={12} aria-hidden="true" />
-            )}
-            <span className="truncate">{t('assistant.place.addToShort', { n: focusDay.n })}</span>
-          </button>
-          <button
-            ref={triggerRef}
-            type="button"
-            disabled={disabled}
-            onClick={toggle}
-            aria-expanded={open}
-            aria-controls={open ? listId : undefined}
-            aria-label={t('assistant.place.pickDay')}
-            className={`${ACTION} ${height} rounded-s-none px-1.5`}
-          >
-            <ChevronDown size={12} aria-hidden="true" />
-          </button>
-        </>
-      ) : (
-        <button
-          ref={triggerRef}
-          type="button"
-          disabled={disabled}
-          onClick={toggle}
-          aria-expanded={open}
-          aria-controls={open ? listId : undefined}
-          className={`${ACTION} ${height} px-2`}
-        >
-          <Plus size={12} aria-hidden="true" />
-          <span className="truncate">{t('assistant.place.pickDay')}</span>
-          <ChevronDown size={12} aria-hidden="true" className="text-content-faint" />
-        </button>
-      )}
-    </span>
-  );
-
   return (
-    <>
-      {blockedKey ? (
-        <Tooltip label={t(blockedKey)} placement="top">
-          {/* A disabled button gets no pointer events; the wrapper carries the reason. */}
-          <span className="inline-flex min-w-0">{buttons}</span>
-        </Tooltip>
-      ) : (
-        buttons
-      )}
-      {/* A grid of day tiles, not a list: a month-long trip still fits in a few rows. */}
-      <PopoverListPanel list={list} label={t('assistant.place.pickDay')} className="w-[15.5rem] p-2">
-        <div className="grid grid-cols-7 gap-1">
-          {days.map((day) => {
-            const current = day.id === focusDay?.id;
-            return (
-              <Tooltip key={day.id} label={day.label} placement="top">
-                <button
-                  type="button"
-                  onClick={() => pick(day.id)}
-                  aria-label={day.label}
-                  aria-pressed={current}
-                  className={`flex h-10 flex-col items-center justify-center rounded-lg leading-none outline-none transition-colors focus-visible:ring-2 focus-visible:ring-accent ${
-                    current ? 'bg-accent text-accent-text' : 'text-content hover:bg-surface-hover'
-                  }`}
-                >
-                  <span className="text-body font-semibold tabular-nums">{day.n}</span>
-                  {day.weekday && (
-                    <span className={`mt-0.5 text-caption ${current ? 'text-accent-text' : 'text-content-faint'}`}>
-                      {day.weekday}
-                    </span>
-                  )}
-                </button>
-              </Tooltip>
-            );
-          })}
-        </div>
-      </PopoverListPanel>
-    </>
+    <button type="button" onClick={() => strip.open(place)} className={`${ACTION} ${tall ? 'h-10' : 'h-7'} px-2`}>
+      <Plus size={12} aria-hidden="true" />
+      <span className="truncate">{t('assistant.place.add')}</span>
+    </button>
   );
 }
 
@@ -219,7 +121,7 @@ function PlaceAction({
       </span>
     );
   }
-  return strip.canSuggest ? <SuggestButton place={place} strip={strip} tall={tall} /> : null;
+  return strip.canAdd ? <AddButton place={place} strip={strip} tall={tall} /> : null;
 }
 
 /**
@@ -227,9 +129,10 @@ function PlaceAction({
  * with the category it most likely belongs in on it (or that category's icon
  * on its colour), its name, address and rating, whether it is open now while
  * the trip runs, how far it is from the last stop of the day in focus, and one
- * way on: "+ Day 3" for a new place, "On map" for one the trip has. A click on
- * the card shows it on the map, and resting the pointer on it pins it there
- * for a moment.
+ * way on: "Add to trip" for a new place, "On map" for one the trip has. A click
+ * on a new place opens the place form filled in with it (one the trip has, or
+ * any where nothing can be added, shows on the map), and resting the pointer on
+ * it pins it there for a moment.
  */
 export default function AssistantPlaceCard({
   place,
@@ -259,7 +162,7 @@ export default function AssistantPlaceCard({
     >
       <button
         type="button"
-        onClick={() => strip.show(place)}
+        onClick={() => (place.inTripPlaceId === null && strip.canAdd ? strip.open(place) : strip.show(place))}
         onFocus={() => strip.hover(place)}
         onBlur={() => strip.hover(null)}
         className="flex flex-col text-start outline-none focus-visible:bg-surface-hover"

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

@@ -2,9 +2,8 @@
  * FE-AI-PLACES-001 to FE-AI-PLACES-010
  *
  * The strip of places a search found: what a card says, that its picture only
- * ever comes from TREK's photo proxy, "+ Day N" for the day in focus or a
- * picked one, why it waits while a change is undecided, the map's part, and
- * no "+ Day" in a journey's chat.
+ * ever comes from TREK's photo proxy, "Add to trip" opening the place form on
+ * the day in focus, the map's part, and no "Add to trip" in a journey's chat.
  */
 import type { AssistantFoundPlace, AssistantMessage, AssistantPlaces } from '@trek/shared';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -67,7 +66,6 @@ const answer = (parts: AssistantMessage['parts'] = []): AssistantMessage => ({
   parts,
 });
 
-const addFoundPlace = vi.fn(async () => {});
 const requestCamera = vi.fn();
 const setPreviewPin = vi.fn();
 const onRevealMap = vi.fn();
@@ -83,7 +81,6 @@ function seed({ focusDayId = 31, messages = [] as AssistantMessage[] } = {}) {
     categories: [buildCategory({ id: 5, name: 'Restaurant', icon: 'Utensils' })],
   });
   useAssistantStore.setState({
-    addFoundPlace,
     requestCamera,
     setPreviewPin,
     byTrip: {
@@ -165,34 +162,30 @@ describe('AssistantPlaceStrip', () => {
     expect(fetchPhoto).toHaveBeenCalledWith('good', 'good', 41.889, 12.47, 'Trattoria s1:0', expect.any(Function));
   });
 
-  it('FE-AI-PLACES-004: "+ Day 1" suggests the place for the day in focus', () => {
+  it('FE-AI-PLACES-004: "Add to trip" opens the place form with the place, on the day in focus', () => {
     seed();
     renderStrip({ toolCallId: 's1', places: [place('s1:0')], more: 0 });
-    fireEvent.click(screen.getByRole('button', { name: /^Add to/ }));
-    expect(addFoundPlace).toHaveBeenCalledWith(TRIP, 's1:0', 31);
+    fireEvent.click(screen.getByRole('button', { name: 'Add to trip' }));
+    expect(onRevealMap).toHaveBeenCalled();
+    expect(useAssistantStore.getState().placeDraft).toMatchObject({ tripId: TRIP, dayId: 31, place: { ref: 's1:0' } });
   });
 
-  it('FE-AI-PLACES-005: another day is picked from the list, and without a focus the list is the only way', () => {
+  it('FE-AI-PLACES-005: a click on a new place opens the form too, without a day when none is in focus', () => {
     seed({ focusDayId: 0 });
     renderStrip({ toolCallId: 's1', places: [place('s1:0')], more: 0 });
-    fireEvent.click(screen.getByRole('button', { name: /Pick a day/ }));
-    fireEvent.click(screen.getByRole('button', { name: /Nov 3/ }));
-    expect(addFoundPlace).toHaveBeenCalledWith(TRIP, 's1:0', 32);
+    fireEvent.click(screen.getByText('Trattoria s1:0'));
+    expect(useAssistantStore.getState().placeDraft).toMatchObject({ dayId: null, place: { ref: 's1:0' } });
+    expect(requestCamera).not.toHaveBeenCalled();
   });
 
-  it('FE-AI-PLACES-006: waits while a change is undecided, and offline', () => {
+  it('FE-AI-PLACES-006: opening the form waits for nothing: an undecided change and offline leave it on', () => {
     const waiting = answer([
       { type: 'tool-call', toolCallId: 'w1', toolName: 'create_place', args: {}, approval: { id: 'w1' } },
     ]);
     seed({ messages: [waiting] });
-    const { unmount } = renderStrip({ toolCallId: 's1', places: [place('s1:0')], more: 0 });
-    expect(screen.getByRole('button', { name: /^Add to/ })).toBeDisabled();
-    unmount();
-
-    seed();
     setForcedOffline(true);
     renderStrip({ toolCallId: 's1', places: [place('s1:0')], more: 0 });
-    expect(screen.getByRole('button', { name: /^Add to/ })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Add to trip' })).toBeEnabled();
   });
 
   it('FE-AI-PLACES-007: a suggested place says so, and one the trip has goes to the map instead', () => {
@@ -234,15 +227,14 @@ describe('AssistantPlaceStrip', () => {
     expect(setPreviewPin).toHaveBeenLastCalledWith(null);
   });
 
-  it('FE-AI-PLACES-010: a journey chat lists the places but offers no "+ Day" while the trip is on screen', () => {
-    // The journey key never matches the planner's trip, so the trip check already hides "+ Day";
+  it('FE-AI-PLACES-010: a journey chat lists the places but offers no "Add to trip" while the trip is on screen', () => {
+    // The journey key never matches the planner's trip, so the trip check already hides "Add to trip";
     // the scope check in the hook is defence in depth for the day trips and journeys share keys.
     seed();
     renderStrip({ toolCallId: 's1', places: [place('s1:0')], more: 0 }, answer(), {
       tripId: assistantChatKey({ kind: 'journey', journeyId: TRIP }),
     });
     expect(screen.getByText('Trattoria s1:0')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: /^Add to/ })).toBeNull();
-    expect(screen.queryByRole('button', { name: /Pick a day/ })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Add to trip' })).toBeNull();
   });
 });

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

@@ -0,0 +1,49 @@
+/**
+ * FE-AI-REMEMBER-001 to FE-AI-REMEMBER-002
+ *
+ * A note the assistant kept on its own: a quiet line naming it, the trip
+ * notes read again while the answer is written, and the notes a tap away.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../../tests/helpers/render';
+
+import { useSettingsStore } from '../../store/settingsStore';
+import AssistantRemembered from './AssistantRemembered';
+import { type AssistantView, AssistantViewContext } from './assistantViewContext';
+
+const SETTINGS = useSettingsStore.getState();
+
+function renderLine(live: boolean) {
+  const view: AssistantView = { tripId: 4, variant: 'window', density: 'compact' };
+  return render(
+    <AssistantViewContext.Provider value={view}>
+      <AssistantRemembered note="We eat vegetarian" live={live} />
+    </AssistantViewContext.Provider>
+  );
+}
+
+afterEach(() => {
+  useSettingsStore.setState(SETTINGS, true);
+  vi.clearAllMocks();
+});
+
+describe('AssistantRemembered', () => {
+  it('FE-AI-REMEMBER-001: names the note, and reads the notes again only while the answer is written', () => {
+    const loadSettings = vi.fn(async () => {});
+    useSettingsStore.setState({ loadSettings });
+    const { unmount } = renderLine(false);
+    expect(screen.getByText('We eat vegetarian')).toBeInTheDocument();
+    expect(screen.getByText('Noted for this trip:')).toBeInTheDocument();
+    expect(loadSettings).not.toHaveBeenCalled();
+    unmount();
+    renderLine(true);
+    expect(loadSettings).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-AI-REMEMBER-002: the pencil opens the trip notes', () => {
+    useSettingsStore.setState({ loadSettings: vi.fn(async () => {}) });
+    renderLine(false);
+    fireEvent.click(screen.getByRole('button', { name: 'Edit trip notes' }));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+});

client/src/components/Assistant/AssistantRemembered.tsx

@@ -0,0 +1,49 @@
+import { BookmarkCheck, Pencil } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+import { useTranslation } from '../../i18n';
+import { useSettingsStore } from '../../store/settingsStore';
+import { Tooltip } from '../shared/Tooltip';
+import AssistantMemoryDialog from './AssistantMemoryDialog';
+import { useAssistantScope } from './assistantViewContext';
+
+/**
+ * A note the assistant kept in the trip notes on its own, as a quiet line in
+ * its answer, with the notes a tap away to change or drop it. Kept while the
+ * answer is written, the notes on this device are read again, so the dialog
+ * never saves over the note with what it held before.
+ */
+export default function AssistantRemembered({ note, live }: { note: string; live: boolean }) {
+  const { t } = useTranslation();
+  const scope = useAssistantScope();
+  const loadSettings = useSettingsStore((s) => s.loadSettings);
+  const [editing, setEditing] = useState(false);
+
+  useEffect(() => {
+    if (live) void loadSettings();
+  }, [live, loadSettings]);
+
+  const tripId = scope.kind === 'trip' ? scope.tripId : null;
+  return (
+    <div className="flex min-w-0 items-center gap-2 rounded-lg bg-surface-secondary px-2.5 py-1.5 text-caption">
+      <BookmarkCheck size={13} strokeWidth={2.2} aria-hidden="true" className="flex-none text-success" />
+      <span className="min-w-0 flex-1">
+        <span className="font-semibold text-content-secondary">{t('assistant.memory.kept')}</span>{' '}
+        <bdi className="text-content-muted">{note}</bdi>
+      </span>
+      {tripId !== null && (
+        <Tooltip label={t('assistant.memory.edit')} placement="top">
+          <button
+            type="button"
+            onClick={() => setEditing(true)}
+            aria-label={t('assistant.memory.edit')}
+            className="grid h-6 w-6 flex-none place-items-center rounded-md text-content-faint transition-colors hover:bg-surface-hover hover:text-content"
+          >
+            <Pencil size={12} aria-hidden="true" />
+          </button>
+        </Tooltip>
+      )}
+      {editing && tripId !== null && <AssistantMemoryDialog tripId={tripId} onClose={() => setEditing(false)} />}
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+/**
+ * FE-AI-SOURCES-001 to FE-AI-SOURCES-002
+ *
+ * The pages an answer cites from the provider's web search: a chip per page
+ * with its site and title, opening in a new tab without telling the page who
+ * sent the reader, and the block they form in an answer.
+ */
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from '../../../tests/helpers/render';
+import AssistantSources from './AssistantSources';
+import { messageBlocks } from './assistantParts';
+
+describe('AssistantSources', () => {
+  it('FE-AI-SOURCES-001: names each page by its site and title, and opens it in a new tab', () => {
+    render(
+      <AssistantSources
+        sources={[
+          { url: 'https://www.rostock.de/hafen', title: 'Stadthafen Rostock' },
+          { url: 'https://example.org/a', title: 'https://example.org/a' },
+        ]}
+      />
+    );
+    expect(screen.getByRole('navigation', { name: 'Sources' })).toBeInTheDocument();
+    const link = screen.getByRole('link', { name: /rostock\.de/ });
+    expect(link).toHaveAttribute('href', 'https://www.rostock.de/hafen');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link.getAttribute('rel')).toContain('noreferrer');
+    expect(screen.getByText('Stadthafen Rostock')).toBeInTheDocument();
+    // A title that is only the address shows the site alone.
+    expect(screen.getByRole('link', { name: 'example.org' })).toBeInTheDocument();
+  });
+
+  it('FE-AI-SOURCES-002: an answer keeps its sources as a block of their own after its text', () => {
+    const blocks = messageBlocks(
+      {
+        id: 'm1',
+        role: 'assistant',
+        status: 'complete',
+        createdAt: '2026-10-23T10:00:00.000Z',
+        parts: [
+          { type: 'tool-call', toolCallId: 'web-1', toolName: 'web_search', args: { query: 'x' }, result: 'searched' },
+          { type: 'text', text: 'Eat at the harbour.' },
+          { type: 'data-trek-sources', data: { sources: [{ url: 'https://a.example', title: 'A' }] } },
+        ],
+      },
+      false
+    );
+    expect(blocks.map((block) => block.kind)).toEqual(['steps', 'text', 'sources']);
+  });
+});

client/src/components/Assistant/AssistantSources.tsx

@@ -0,0 +1,48 @@
+import type { AssistantSources as Sources } from '@trek/shared';
+import { Globe } from 'lucide-react';
+
+import { useTranslation } from '../../i18n';
+
+/** A page's host without "www.", as the chip names it; the whole address where it does not read as one. */
+function hostOf(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+}
+
+/**
+ * The pages an answer drew on from the provider's web search, under its text:
+ * a row of quiet chips with each page's site and title, opening in a new tab.
+ * No page's icon is loaded, so showing the sources asks no site for anything.
+ */
+export default function AssistantSources({ sources }: { sources: Sources['sources'] }) {
+  const { t } = useTranslation();
+  return (
+    <nav aria-label={t('assistant.sources.title')} className="flex flex-col gap-1.5">
+      <span className="font-geist text-caption font-bold uppercase tracking-[.08em] text-content-faint">
+        {t('assistant.sources.title')}
+      </span>
+      <ul className="m-0 flex list-none flex-wrap gap-1.5 p-0">
+        {sources.map((source) => (
+          <li key={source.url} className="min-w-0 max-w-full">
+            <a
+              href={source.url}
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              title={source.title}
+              className="flex min-w-0 max-w-[16rem] items-center gap-1.5 rounded-full border border-edge-faint bg-surface-secondary px-2.5 py-1 text-caption text-content-secondary no-underline transition-colors hover:bg-surface-hover hover:text-content"
+            >
+              <Globe size={11} strokeWidth={2.2} aria-hidden="true" className="flex-none text-content-faint" />
+              <span className="flex-none font-medium">{hostOf(source.url)}</span>
+              {source.title && source.title !== source.url && (
+                <bdi className="min-w-0 truncate text-content-muted">{source.title}</bdi>
+              )}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

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

@@ -177,7 +177,7 @@ describe('AssistantSurface', () => {
               ],
             },
           },
-          { type: 'text', text: 'Rain on Monday, so the market is a good pick.' },
+          { type: 'text', text: 'Rain on Monday, so Nishiki Market is a good pick.' },
         ],
       },
     ]);

client/src/components/Assistant/assistant.css

@@ -168,20 +168,6 @@
   animation: trek-assistant-busy 1.8s ease-in-out infinite;
 }
 
-/* The dot beside what the assistant does right now: a soft beat, a halo going out. */
-@keyframes trek-assistant-pulse {
-  0% {
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
-  }
-  70%,
-  100% {
-    box-shadow: 0 0 0 6px transparent;
-  }
-}
-.trek-assistant-pulse {
-  animation: trek-assistant-pulse 1.4s ease-out infinite;
-}
-
 @media (prefers-reduced-motion: reduce) {
   .trek-assistant-pop,
   .trek-assistant-enter {
@@ -190,8 +176,7 @@
   .trek-assistant-settle {
     transition: none;
   }
-  .trek-assistant-busy,
-  .trek-assistant-pulse {
+  .trek-assistant-busy {
     animation: none;
   }
   .trek-assistant-shimmer {
@@ -211,8 +196,7 @@
 [data-reduce-motion] .trek-assistant-settle {
   transition: none;
 }
-[data-reduce-motion] .trek-assistant-busy,
-[data-reduce-motion] .trek-assistant-pulse {
+[data-reduce-motion] .trek-assistant-busy {
   animation: none;
 }
 [data-reduce-motion] .trek-assistant-shimmer {

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

@@ -111,6 +111,14 @@ describe('the questions an answer offers', () => {
 
   it('FE-AI-FOLLOW-007: an answer that asks the user something waits for their answer, not for "tell me more"', () => {
     expect(followUpsFor(of([{ type: 'text', text: 'Should I plan it anyway?' }]), true)).toEqual([]);
+    // Not the found places' chips either, but the model's own answers to its question.
+    const asked = of([
+      { type: 'data-trek-places', data: { toolCallId: 's', places: [], more: 0 } },
+      { type: 'text', text: 'Shall I plan it there?' },
+    ]);
+    expect(followUpsFor(asked, true)).toEqual([]);
+    const offered = of([...asked.parts, { type: 'data-trek-follow-ups', data: { questions: ['Yes, plan it'] } }]);
+    expect(followUpsFor(offered, true).map((f) => f.text)).toEqual(['Yes, plan it']);
     expect(followUpsFor(of([{ type: 'text', text: 'Here it is.' }]), true).map((f) => f.id)).toEqual(['more', 'next']);
   });
 });

client/src/components/Assistant/assistantFollowUpRules.ts

@@ -126,11 +126,12 @@ export function followUpsFor(message: AssistantMessage, canEdit: boolean): reado
   if (fromModel.length > 0) return fromModel;
   const fromCards = cardFollowUps(message, canEdit);
   if (fromCards.length > 0) return fromCards;
+  // An answer that asks the user something waits for their answer: only the model's own offer fits it.
+  if (endsWithQuestion(message)) return [];
   const fromChanges = changeFollowUps(message, canEdit);
   if (fromChanges !== null) return fromChanges.length > 0 ? fromChanges : GENERAL;
   const types = new Set(message.parts.map((part) => part.type));
   if (types.has('data-trek-places')) return PLACES;
   if (types.has('data-trek-weather')) return WEATHER;
-  // An answer that asks the user something waits for their answer, not for "tell me more".
-  return types.has('text') && !endsWithQuestion(message) ? GENERAL : [];
+  return types.has('text') ? GENERAL : [];
 }

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

@@ -200,7 +200,7 @@ describe('messageBlocks: found places and weather', () => {
         read('s2', []),
         places('s2', [found('s2:0', { name: 'Place s1:0' }), found('s2:1', { googlePlaceId: 'ChIJa', lat: 40 })], 3),
         places('s3', [found('s3:0', { lat: 40 })]),
-        { type: 'text', text: 'Three good ones.' },
+        { type: 'text', text: 'Three good ones, Place s3:0 first.' },
       ]),
       false
     );
@@ -208,10 +208,66 @@ describe('messageBlocks: found places and weather', () => {
     expect(blocks[0]).toMatchObject({ steps: [{ toolCallId: 's1' }, { toolCallId: 's2' }] });
     // The same name at the same spot, or the same Google id, shows once.
     expect(blocks[1]).toMatchObject({
-      found: { toolCallId: 's3', more: 5, places: [{ ref: 's1:0' }, { ref: 's1:1' }, { ref: 's3:0' }] },
+      found: { toolCallId: 's3', more: 5, places: [{ ref: 's3:0' }, { ref: 's1:0' }, { ref: 's1:1' }] },
     });
   });
 
+  it('FE-AI-PARTS-008d: an answer that planned a tour shows no found places, even one whose planning failed', () => {
+    const blocks = messageBlocks(
+      message([
+        places('s1', [found('s1:0', { name: 'Treseburg' })]),
+        {
+          type: 'tool-call',
+          toolCallId: 'h1',
+          toolName: 'propose_hike',
+          args: {},
+          result: 'Router down',
+          isError: true,
+        },
+        { type: 'text', text: 'Treseburg is the turning point.' },
+      ]),
+      false
+    );
+    expect(blocks.map((b) => b.kind)).not.toContain('places');
+  });
+
+  it('FE-AI-PARTS-008c: a note kept in the trip notes is a line of its own, a refused or running one a step', () => {
+    const kept = (id: string, extra: Record<string, unknown>): AssistantMessagePart =>
+      ({
+        type: 'tool-call',
+        toolCallId: id,
+        toolName: 'remember_for_trip',
+        args: { note: ' Vegetarian ' },
+        ...extra,
+      }) as AssistantMessagePart;
+    const blocks = messageBlocks(
+      message([
+        kept('m1', { result: { notes: 'Vegetarian' } }),
+        kept('m2', { result: 'The trip notes are full.', isError: true }),
+      ]),
+      false
+    );
+    expect(blocks).toMatchObject([
+      { kind: 'remembered', note: 'Vegetarian' },
+      { kind: 'steps', steps: [{ toolCallId: 'm2' }] },
+    ]);
+    expect(messageBlocks(message([kept('m3', {})]), true)).toMatchObject([{ kind: 'steps' }]);
+  });
+
+  it('FE-AI-PARTS-008b: an answer that names none of the places it found shows no strip', () => {
+    const blocks = messageBlocks(
+      message([places('s1', [found('s1:0', { name: 'Café Ñandú' })]), { type: 'text', text: 'It rains all day.' }]),
+      false
+    );
+    expect(blocks.map((b) => b.kind)).toEqual(['text']);
+    // Named with other accents and case, it is the same place.
+    const named = messageBlocks(
+      message([places('s1', [found('s1:0', { name: 'Café Ñandú' })]), { type: 'text', text: 'Try cafe nandu.' }]),
+      false
+    );
+    expect(named.map((b) => b.kind)).toEqual(['places', 'text']);
+  });
+
   it('FE-AI-PARTS-009: drops the places a change of the model proposes, and the strip if none is left', () => {
     const blocks = messageBlocks(
       message([

client/src/components/Assistant/assistantParts.ts

@@ -8,6 +8,7 @@ import {
   type AssistantMessage,
   type AssistantMessagePart,
   type AssistantPlaces,
+  type AssistantSources,
   type AssistantWeatherDay,
   type TrekCard,
 } from '@trek/shared';
@@ -66,6 +67,10 @@ type MessageBlock =
   | { kind: 'change'; key: string; items: ChangeItem[] }
   | { kind: 'places'; key: string; found: AssistantPlaces }
   | { kind: 'weather'; key: string; days: AssistantWeatherDay[] }
+  // A note the model kept in the trip notes on its own, as a quiet line.
+  | { kind: 'remembered'; key: string; note: string }
+  // The pages the answer cites from the provider's web search, under its text.
+  | { kind: 'sources'; key: string; sources: AssistantSources['sources'] }
   | CardsBlock;
 
 /** How cards are laid out: the group each joins, and which ones give way to a change they served. */
@@ -93,6 +98,70 @@ function proposed(place: AssistantFoundPlace, effects: readonly AssistantChangeE
   });
 }
 
+/** A name as it is compared with the answer's words: lower case, without accents or marks. */
+function folded(text: string): string {
+  return text.normalize('NFKD').replace(/\p{M}/gu, '').toLocaleLowerCase();
+}
+
+/**
+ * The found places the answer names, first, then the rest; null when the
+ * answer is written and names none of them. A search the answer does not
+ * draw on is the model's own groundwork and shows no strip.
+ */
+function namedFirst(places: readonly AssistantFoundPlace[], text: string): AssistantFoundPlace[] | null {
+  if (text.trim() === '') return [...places];
+  const words = folded(text);
+  const named = places.filter((place) => {
+    const name = folded(place.name).trim();
+    return name.length >= 3 && words.includes(name);
+  });
+  if (named.length === 0) return null;
+  return [...named, ...places.filter((place) => !named.includes(place))];
+}
+
+/**
+ * The tools that plan or save a tour. An answer that ran one is about the
+ * tour, planned or not: the places its searches went through to find the
+ * points are the model's groundwork, not suggestions, and show no strip.
+ */
+const TOUR_PLANNING_TOOLS: ReadonlySet<string> = new Set([
+  'propose_hike',
+  'create_hike',
+  'update_tour',
+  'propose_city_walk',
+  'create_city_walk',
+  'plan_paddle_route',
+  'plan_ski_route',
+  'prepare_tour_change',
+  'save_tour_change',
+]);
+
+/** The tool that keeps a note in the trip notes; kept at once, without a card. */
+const REMEMBER_TOOL = 'remember_for_trip';
+
+/** The note a call kept, once it is kept; null for any other call, one still running or one refused. */
+function rememberedNote(part: Extract<AssistantMessagePart, { type: 'tool-call' }>): string | null {
+  if (part.toolName !== REMEMBER_TOOL || part.approval || part.result === undefined || part.isError) return null;
+  const note = (part.args as { note?: unknown }).note;
+  return typeof note === 'string' && note.trim() !== '' ? note.trim() : null;
+}
+
+/** The strip of the answer's found places, named ones first; null when it names none or none is left. */
+function placesBlock(
+  message: AssistantMessage,
+  effects: readonly AssistantChangeEffect[],
+  index: number
+): MessageBlock | null {
+  const found = allFound(message.parts);
+  const text = message.parts.map((p) => (p.type === 'text' ? p.text : '')).join(' ');
+  const places = namedFirst(
+    found.places.filter((place) => !proposed(place, effects)),
+    text
+  );
+  if (!places || places.length === 0) return null;
+  return { kind: 'places', key: `places-${index}`, found: { ...found, places } };
+}
+
 /** Every day the answer's weather steps looked up, one entry per date (the later look wins), by date. */
 function weatherDays(parts: readonly AssistantMessagePart[]): AssistantWeatherDay[] {
   const byDate = new Map<string, AssistantWeatherDay>();
@@ -256,7 +325,9 @@ export function messageBlocks(
 
   // An answer about a tour shows the tour, not the places its searches went through to find it.
   const changeCards = message.parts.flatMap((p) => (p.type === 'data-trek-change' && p.data.card ? [p.data.card] : []));
-  const placesHidden = [...cards.values(), ...changeCards].some((card) => rules.hidesFoundPlaces?.(card) === true);
+  const placesHidden =
+    [...cards.values(), ...changeCards].some((card) => rules.hidesFoundPlaces?.(card) === true) ||
+    message.parts.some((p) => p.type === 'tool-call' && TOUR_PLANNING_TOOLS.has(p.toolName));
   const blocks: MessageBlock[] = [];
   message.parts.forEach((part, index) => {
     if (part.type === 'text') {
@@ -264,9 +335,12 @@ export function messageBlocks(
       return;
     }
     if (part.type === 'data-trek-places' && index === lastPlaces && !placesHidden) {
-      const found = allFound(message.parts);
-      const places = found.places.filter((place) => !proposed(place, effects));
-      if (places.length > 0) blocks.push({ kind: 'places', key: `places-${index}`, found: { ...found, places } });
+      const strip = placesBlock(message, effects, index);
+      if (strip) blocks.push(strip);
+      return;
+    }
+    if (part.type === 'data-trek-sources') {
+      blocks.push({ kind: 'sources', key: `sources-${index}`, sources: part.data.sources });
       return;
     }
     if (part.type === 'data-trek-weather' && index === firstWeather) {
@@ -286,6 +360,11 @@ export function messageBlocks(
       pushChange(blocks, item, fromStrip);
       return;
     }
+    const note = rememberedNote(part);
+    if (note !== null) {
+      blocks.push({ kind: 'remembered', key: `remembered-${part.toolCallId}`, note });
+      return;
+    }
     const step: ToolStep = {
       toolCallId: part.toolCallId,
       toolName: part.toolName,
@@ -374,4 +453,6 @@ export const CHANGE_LABELS: Record<AssistantChangeLabelKey, { labelKey: string }
   members: { labelKey: 'assistant.change.label.members' },
   route: { labelKey: 'assistant.change.label.route' },
   difficulty: { labelKey: 'assistant.change.label.difficulty' },
+  track: { labelKey: 'assistant.change.label.track' },
+  packing: { labelKey: 'assistant.change.label.packing' },
 };

client/src/components/Assistant/cards/ChangeCardSlots.tsx

@@ -134,7 +134,7 @@ function BodySlot({ item, settled }: { item: ChangeItem; settled: boolean }) {
   const view = item.card ? viewOf(item.card) : null;
   if (!view?.Body || !item.card) return null;
   return (
-    <div className={`pb-1.5 ps-[38px] ${settled ? 'opacity-60' : ''}`}>
+    <div className={`mt-1.5 pb-1.5 ${view.wideBody ? '' : 'ps-[38px]'} ${settled ? 'opacity-60' : ''}`}>
       <Slot item={item} view={view} name="Body" />
     </div>
   );

client/src/components/Assistant/cards/atlas/AtlasCountryCard.tsx

@@ -1,5 +1,5 @@
 import type { AssistantMessage, AtlasCountryCard as CountryCard } from '@trek/shared';
-import { Briefcase, MapPin, Radio } from 'lucide-react';
+import { Briefcase, Globe2, MapPin, Radio } from 'lucide-react';
 
 import { useTranslation } from '../../../../i18n';
 import { SoftPill, WhiteBadge } from '../../../Planner/planParts';
@@ -8,8 +8,10 @@ import type { ChangeItem } from '../../assistantParts';
 import type { CardEntry } from '../cardTypes';
 import { CardFacts } from '../parts/CardFacts';
 import CardFrame from '../parts/CardFrame';
+import CardHeader from '../parts/CardHeader';
 import { CardOpenButton } from '../parts/CardOpen';
 import { CardMore } from '../parts/CardRows';
+import { CardFoot } from '../parts/CardSection';
 import { CONTINENT_LABEL, continentOf, shortDay, STATUS_LOOK } from './atlasCardModel';
 import { ATLAS_PAGE } from './atlasPage';
 import { ChangeFlag, FlagTile, StatusFact } from './AtlasParts';
@@ -112,14 +114,15 @@ export default function AtlasCountryBlock({ cards }: { cards: readonly CardEntry
   if (countries.length === 0) return null;
   return (
     <CardFrame label={t('assistant.domain.atlas')}>
+      <CardHeader icon={Globe2} tone="info" title={t('assistant.domain.atlas')} />
       {countries.map((entry, index) => (
         <div key={entry.toolCallId} className={index > 0 ? 'mt-2 border-t border-edge-faint pt-2' : ''}>
           {entry.card.kind === 'atlasCountry' && <CountrySection card={entry.card} />}
         </div>
       ))}
-      <div className="mt-1 flex justify-end">
+      <CardFoot>
         <CardOpenButton target={ATLAS_PAGE} labelKey="assistant.card.atlas.open" />
-      </div>
+      </CardFoot>
     </CardFrame>
   );
 }

client/src/components/Assistant/cards/book/bookLook.ts

@@ -37,6 +37,7 @@ export const BOOK_LOOK = {
     // The server's own read: it waits for the Studio to draw the page, and says it looks at it.
     preview_book_page: { stepKey: 'assistant.step.lookingAtPage' },
     list_book_layouts: { stepKey: 'assistant.step.bookLayouts' },
+    list_book_assets: { stepKey: 'assistant.step.bookStickers' },
     suggest_book_photos: { stepKey: 'assistant.step.choosingPhotos' },
   },
   entities: {

client/src/components/Assistant/cards/budget/ExpenseChange.tsx

@@ -78,7 +78,6 @@ export function ExpenseFacts({ card }: SlotProps) {
     <>
       <CategoryFact row={row} />
       <DateFact row={row} />
-      {row.place && <PlaceFact place={row.place} />}
       {split && (
         <FactChange
           icon={Tag}
@@ -92,13 +91,16 @@ export function ExpenseFacts({ card }: SlotProps) {
   );
 }
 
-/** The split under the row, and the expense's note under it: too long for the faint line beside the icons. */
+/** Under the row: the place it belongs to beside the split, and the expense's note under them. */
 export function ExpenseBody({ card }: SlotProps) {
   const row = card.rows[0];
   if (!row) return null;
   return (
-    <span className="flex flex-col items-start gap-1">
-      <SplitLine row={row} />
+    <span className="flex flex-col items-start gap-1.5">
+      <span className="flex flex-wrap items-center gap-1.5">
+        {row.place && <PlaceFact place={row.place} />}
+        <SplitLine row={row} />
+      </span>
       {row.note && <NotePill note={row.note} />}
     </span>
   );

client/src/components/Assistant/cards/budget/ExpensesCard.test.tsx

@@ -121,8 +121,7 @@ describe('an expense in a change row', () => {
     expect(screen.getByText(money(84))).toHaveClass('line-through');
   });
 
-  it('FE-AI-CARD-BUD-012: the facts name the category, day and place, and what an update changes', () => {
-    const onOpen = vi.fn();
+  it('FE-AI-CARD-BUD-012: the facts name the category and day, and what an update changes', () => {
     const update = expense({
       category: 'transport',
       date: '2026-06-05',
@@ -132,7 +131,7 @@ describe('an expense in a change row', () => {
       split: 'equal',
       before: { name: null, amount: null, category: 'food', date: '2026-06-03', split: 'custom' },
     });
-    inView(<ExpenseFacts card={expenses([update])} item={changeItem('a', null)} />, { onOpen });
+    inView(<ExpenseFacts card={expenses([update])} item={changeItem('a', null)} />);
     expect(screen.getByText('Food & drink')).toHaveClass('line-through');
     expect(screen.getByText('Transport')).toBeInTheDocument();
     expect(screen.getByText('Split unevenly')).toHaveClass('line-through');
@@ -140,6 +139,14 @@ describe('an expense in a change row', () => {
     expect(screen.getByText('1 receipt')).toBeInTheDocument();
     // The note is too long for the faint line beside the row's buttons: it sits under the row.
     expect(screen.queryByText('Window table')).toBeNull();
+    // The place sits under the row, beside the split.
+    expect(screen.queryByText('Lokanta')).toBeNull();
+  });
+
+  it('FE-AI-CARD-BUD-012c: the place sits under the row beside the split, and opens on the map', () => {
+    const onOpen = vi.fn();
+    const row = expense({ place: { id: 12, name: 'Lokanta' } });
+    inView(<ExpenseBody card={expenses([row])} item={changeItem('a', null)} />, { onOpen });
     fireEvent.click(screen.getByRole('button', { name: /Lokanta/ }));
     expect(onOpen).toHaveBeenCalledWith({ kind: 'map', placeId: 12, dayId: null });
   });

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

@@ -129,6 +129,8 @@ export const TOOL_LABELS: Readonly<Partial<Record<string, { labelKey: string }>>
 /** How each reading tool is named while it runs; a tool not listed reads "Working on it". */
 export const STEP_LOOKS: Readonly<Partial<Record<string, StepLook>>> = {
   get_trip_summary: { stepKey: 'assistant.step.reading' },
+  // The provider's own web search, told as a step of its own (ASSISTANT_WEB_SEARCH_STEP).
+  web_search: { stepKey: 'assistant.step.webSearch', live: { liveKey: 'assistant.step.webSearchFor', param: 'query' } },
   list_places: { stepKey: 'assistant.step.reading' },
   search_place: {
     stepKey: 'assistant.step.searching',

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

@@ -126,6 +126,8 @@ export interface CardView<K extends TrekCardKind> {
   Facts?: ComponentType<CardSlotProps<K>>;
   Body?: ComponentType<CardSlotProps<K>>;
   ownsSubject?: boolean;
+  /** The body runs the whole width of the change card instead of under the row's text (a tour's drawing). */
+  wideBody?: boolean;
   Group?: ComponentType<CardRunProps & { place: 'head' | 'foot' }>;
   Run?: ComponentType<CardRunProps>;
   runnable?(card: TrekCardOf<K>): boolean;

client/src/components/Assistant/cards/journey/JourneyEntriesBlock.tsx

@@ -1,15 +1,16 @@
 import type { AssistantMessage, JourneyEntryLook } from '@trek/shared';
-import { ArrowUpRight } from 'lucide-react';
+import { ArrowUpRight, BookOpen } from 'lucide-react';
 import { useMemo } from 'react';
 
 import { useTranslation } from '../../../../i18n';
 import { DAY_COLORS } from '../../../Journey/dayColors';
 import { cardTitle } from '../../../Journey/journeyCard';
 import JourneyEntryCover from '../../../Journey/JourneyEntryCover';
-import { LinkedJournalIcon } from '../../../Trips/LinkedJournalIcon';
 import { useAssistantView } from '../../assistantViewContext';
 import type { CardEntry } from '../cardTypes';
 import CardFrame from '../parts/CardFrame';
+import CardHeader from '../parts/CardHeader';
+import { CardFoot } from '../parts/CardSection';
 import CardStrip from '../parts/CardStrip';
 import { type JournalEntries, coverEntryOf, mergeJournalCards, titleSourceOf } from './journeyCardModel';
 import { EntryMarks, EntryStory, EntryThumb, EntryWhen } from './JourneyEntryParts';
@@ -33,9 +34,6 @@ const TITLE_BUTTON =
   'block w-full rounded-md text-start outline-none hover:underline focus-visible:ring-2 focus-visible:ring-accent';
 /** The phone's taller target, the title still at the top of the row. */
 const TITLE_BUTTON_TALL = `${TITLE_BUTTON} min-h-10`;
-const FOOTER = 'mt-1 flex items-center gap-2 border-t border-edge-faint pt-2 text-caption';
-const FOOTER_TITLE = 'min-w-0 flex-1 truncate text-content-muted';
-const FAINT = 'text-content-faint';
 const OPEN = 'inline-flex flex-none items-center gap-1 font-medium text-accent hover:underline';
 const OPEN_TALL = 'inline-flex h-10 flex-none items-center gap-1 font-medium text-accent hover:underline';
 /** The size and corners of the journal's own tile, so the count stands in the row like one more entry. */
@@ -47,29 +45,40 @@ const TILE = 'flex-none snap-start';
 
 type Open = ((entryId: number | null) => void) | null;
 
-/** The journal's name and the way into it, under the card. */
-function JournalFooter({ journal, open }: { journal: JournalEntries; open: Open }) {
+/**
+ * The way into the journal under its entries: in the foot bar of the card, or
+ * under the strip of tiles with how many entries it holds, which the strip
+ * has no band to say.
+ */
+function JournalFooter({ open, count }: { open: Open; count?: number }) {
   const { t } = useTranslation();
   const { variant } = useAssistantView();
-  const title = journal.journalTitle ?? t('assistant.card.journey.label');
-  const count = journal.entries.length + journal.more;
+  const button = open && (
+    <button type="button" onClick={() => open(null)} className={variant === 'fullscreen' ? OPEN_TALL : OPEN}>
+      {t('assistant.card.journey.open')}
+      <ArrowUpRight size={12} aria-hidden="true" className="rtl:-scale-x-100" />
+    </button>
+  );
+  if (count === undefined) return button ? <CardFoot>{button}</CardFoot> : null;
   return (
-    <div className={FOOTER}>
-      <LinkedJournalIcon size={12} className={FAINT} />
-      <span title={title} className={FOOTER_TITLE}>
-        <bdi>{title}</bdi>
-        {count > 2 && <span className="ms-1.5 tabular-nums">{t('assistant.card.journey.entries', { count })}</span>}
+    <div className="mt-1 flex items-center gap-2 text-caption">
+      <span className="min-w-0 flex-1 truncate tabular-nums text-content-muted">
+        {t('assistant.card.journey.entries', { count })}
       </span>
-      {open && (
-        <button type="button" onClick={() => open(null)} className={variant === 'fullscreen' ? OPEN_TALL : OPEN}>
-          {t('assistant.card.journey.open')}
-          <ArrowUpRight size={12} aria-hidden="true" className="rtl:-scale-x-100" />
-        </button>
-      )}
+      {button}
     </div>
   );
 }
 
+/** The band of the entries: the journal's name, and how many entries it holds once there are more than two. */
+function JournalHead({ journal }: { journal: JournalEntries }) {
+  const { t } = useTranslation();
+  const title = journal.journalTitle ?? t('assistant.card.journey.label');
+  const count = journal.entries.length + journal.more;
+  const meta = count > 2 ? t('assistant.card.journey.entries', { count }) : undefined;
+  return <CardHeader icon={BookOpen} tone="info" title={title} meta={meta} />;
+}
+
 /** One entry as a row: its photo, its title (the way to it), its facts and the start of its text. */
 function EntryRow({
   look,
@@ -116,10 +125,11 @@ function JournalRows({ journal, fallbackRef }: { journal: JournalEntries; fallba
   const hover = useEntryHover(journal.journeyId, fallbackRef);
   return (
     <CardFrame label={t('assistant.card.journey.label')}>
+      <JournalHead journal={journal} />
       {journal.entries.map((look, index) => (
         <EntryRow key={look.entryId ?? `new-${index}`} look={look} divided={index > 0} open={open} hover={hover} />
       ))}
-      <JournalFooter journal={journal} open={open} />
+      <JournalFooter open={open} />
     </CardFrame>
   );
 }
@@ -152,7 +162,7 @@ function JournalStrip({ journal, fallbackRef }: { journal: JournalEntries; fallb
           </li>
         )}
       </CardStrip>
-      <JournalFooter journal={journal} open={open} />
+      <JournalFooter open={open} count={journal.entries.length + journal.more} />
     </div>
   );
 }

client/src/components/Assistant/cards/packing/PackingListCard.tsx

@@ -1,14 +1,16 @@
 import type { PackingListCard as PackingCard, PackingCardGroup } from '@trek/shared';
-import { Check } from 'lucide-react';
+import { Backpack, Check } from 'lucide-react';
 
 import { useTranslation } from '../../../../i18n';
 import { SoftPill } from '../../../Planner/planParts';
-import { PackedBar, PackTile } from '../../../Tours/packing/packingLinkParts';
+import { PackedBar } from '../../../Tours/packing/packingLinkParts';
 import AssistantChangeFields from '../../AssistantChangeFields';
 import type { ChangeItem } from '../../assistantParts';
 import type { CardEntry, EntityTarget } from '../cardTypes';
 import CardFrame from '../parts/CardFrame';
-import { isRunnable, mergePackingCards, packingColorOf, rowCount } from './checklistModel';
+import CardHeader from '../parts/CardHeader';
+import { CardFoot } from '../parts/CardSection';
+import { isRunnable, mergePackingCards, rowCount } from './checklistModel';
 import { ChecklistFoot, ChecklistRun, type RunEntry, type RunProps } from './checklistParts';
 import { PackingGroup, PackingRowAside, PackingRowFacts } from './packingParts';
 
@@ -62,7 +64,7 @@ function useTitle(card: PackingCard): string {
     : t('assistant.card.packing.title');
 }
 
-/** The head of an answer: the tile with the count, the title, how much is packed, and "All packed" once it is. */
+/** The head band of an answer: the backpack, the title, how much is packed with its bar, and "All packed" once it is. */
 function PackingHead({ card }: { card: PackingCard }) {
   const { t } = useTranslation();
   const title = useTitle(card);
@@ -73,50 +75,46 @@ function PackingHead({ card }: { card: PackingCard }) {
   if (source.type === 'tour') caption = t('assistant.card.packing.forTour');
   else if (source.type === 'template') caption = t('assistant.card.packing.templateAdds', { count: source.itemCount });
   else if (card.progress && total > 0) caption = t('tours.packing.packed', { packed, count: total });
-  const first = card.groups[0]?.key;
-  const color =
-    source.type === 'tour' && source.category !== null && first?.by === 'category'
-      ? packingColorOf(first.slot, source.category)
-      : null;
+  const done = card.progress !== null && total > 0 && packed === total;
   return (
-    <div className="flex min-w-0 items-center gap-2.5">
-      <PackTile count={source.type === 'template' ? source.itemCount : total} color={color} />
-      <div className="min-w-0 flex-1">
-        <p title={title} className="m-0 line-clamp-2 text-body font-semibold leading-tight text-content">
-          {title}
-        </p>
-        {caption && (
-          <p title={caption} className="m-0 truncate text-caption text-content-faint">
-            {caption}
-          </p>
-        )}
-      </div>
-      {card.progress && total > 0 && packed === total && (
-        <SoftPill tone="success" icon={<Check size={11} strokeWidth={2.4} className="flex-none" />}>
-          {t('tours.packing.allPacked')}
-        </SoftPill>
+    <CardHeader
+      icon={Backpack}
+      tone={done ? 'success' : 'info'}
+      title={title}
+      count={source.type === 'template' ? source.itemCount : total}
+      meta={caption ?? undefined}
+      actions={
+        done ? (
+          <SoftPill tone="success" icon={<Check size={11} strokeWidth={2.4} className="flex-none" />}>
+            {t('tours.packing.allPacked')}
+          </SoftPill>
+        ) : undefined
+      }
+    >
+      {card.progress && card.progress.total > 0 && (
+        <div className="mt-2.5">
+          <PackedBar packed={card.progress.packed} total={card.progress.total} />
+        </div>
       )}
-    </div>
+    </CardHeader>
   );
 }
 
 /** One answer card. */
 function PackingAnswer({ card }: { card: PackingCard }) {
   const title = useTitle(card);
-  const progress = card.progress;
   return (
     <CardFrame label={title}>
-      <div className="flex min-w-0 flex-col gap-2.5">
-        <PackingHead card={card} />
-        {progress && progress.total > 0 && <PackedBar packed={progress.packed} total={progress.total} />}
-        <PackingGroups card={card} inChange={false} />
+      <PackingHead card={card} />
+      <PackingGroups card={card} inChange={false} />
+      <CardFoot>
         <ChecklistFoot
           more={card.moreGroups}
           moreKey={MORE_GROUPS[card.groupBy].labelKey}
           target={PACKING_TARGET}
           openKey="tours.packing.open"
         />
-      </div>
+      </CardFoot>
     </CardFrame>
   );
 }

client/src/components/Assistant/cards/packing/TodoListCard.tsx

@@ -6,14 +6,15 @@ import { type PillTone, SoftPill, WhiteBadge } from '../../../Planner/planParts'
 import { localToday } from '../../../Planner/today';
 import { Tooltip } from '../../../shared/Tooltip';
 import { PRIO_CONFIG } from '../../../Todo/todoListModel';
-import { PackTile } from '../../../Tours/packing/packingLinkParts';
 import AssistantChangeFields from '../../AssistantChangeFields';
 import type { ChangeItem } from '../../assistantParts';
 import { useAssistantView } from '../../assistantViewContext';
 import type { CardEntry, EntityTarget } from '../cardTypes';
 import { ChangeMark, FactChange, NoLonger } from '../parts/CardFacts';
 import CardFrame from '../parts/CardFrame';
+import CardHeader from '../parts/CardHeader';
 import { PersonFace } from '../parts/CardPeople';
+import { CardFoot } from '../parts/CardSection';
 import { useCardFormat } from '../parts/useCardFormat';
 import { isRunnable, mergeTodoCards, todoColorOf } from './checklistModel';
 import {
@@ -204,27 +205,30 @@ function TodoAnswer({ card }: { card: TodoCard }) {
   const title = t('assistant.card.todo.title');
   return (
     <CardFrame label={title}>
-      <div className="flex min-w-0 flex-col gap-2.5">
-        <div className="flex min-w-0 flex-wrap items-center gap-2.5">
-          <PackTile count={progress?.open ?? 0} color={null} icon={ListTodo} />
-          <p className="m-0 text-body font-semibold leading-tight text-content">{title}</p>
-          {progress && <SoftPill>{t('assistant.card.todo.openCount', { count: progress.open })}</SoftPill>}
-          {progress && progress.overdue > 0 && (
+      <CardHeader
+        icon={ListTodo}
+        tone={progress && progress.overdue > 0 ? 'danger' : 'info'}
+        title={title}
+        meta={progress ? t('assistant.card.todo.openCount', { count: progress.open }) : undefined}
+        actions={
+          progress && progress.overdue > 0 ? (
             <SoftPill tone="danger">{t('assistant.card.todo.overdueCount', { count: progress.overdue })}</SoftPill>
-          )}
-        </div>
-        <div className="flex min-w-0 flex-col gap-1.5">
-          {card.groups.map((group) => (
-            <TodoGroup key={group.category ?? ''} group={group} inChange={false} />
-          ))}
-        </div>
+          ) : undefined
+        }
+      />
+      <div className="flex min-w-0 flex-col gap-1.5">
+        {card.groups.map((group) => (
+          <TodoGroup key={group.category ?? ''} group={group} inChange={false} />
+        ))}
+      </div>
+      <CardFoot>
         <ChecklistFoot
           more={card.moreGroups}
           moreKey="assistant.card.todo.moreLists"
           target={TODO_TARGET}
           openKey="assistant.card.todo.open"
         />
-      </div>
+      </CardFoot>
     </CardFrame>
   );
 }

client/src/components/Assistant/cards/packing/checklistParts.tsx

@@ -90,7 +90,7 @@ export function ChecklistRow({
           >
             {name}
           </bdi>
-          {aside && <span className="flex flex-none flex-wrap items-center justify-end gap-1">{aside}</span>}
+          {aside && <span className="flex flex-none flex-wrap items-center justify-end gap-x-2 gap-y-1">{aside}</span>}
         </div>
         {under}
       </div>

client/src/components/Assistant/cards/packing/packingParts.tsx

@@ -7,7 +7,6 @@ import { formatWeight } from '../../../Packing/packingListModel';
 import { bagFillPct } from '../../../Packing/packingListPanel.helpers';
 import { SoftPill, WhiteBadge } from '../../../Planner/planParts';
 import { Tooltip } from '../../../shared/Tooltip';
-import { CountBadge } from '../../../Tours/packing/packingLinkParts';
 import { ChangeMark, FactChange, NoLonger } from '../parts/CardFacts';
 import { PeopleStack, PersonFace } from '../parts/CardPeople';
 import { packingColorOf } from './checklistModel';
@@ -56,15 +55,31 @@ function BagSwatch({ bag, size = 'row' }: { bag: PackingCardBag | undefined; siz
  * What a row says at its end: how many, how many packed, its weight, its tier
  * and its bag. A bag the card does not carry draws nothing rather than "Unassigned".
  */
+/** A row's quantity and weight: quiet figures at its end, no frame each. */
+const QUIET = 'text-caption tabular-nums text-content-muted';
+
+/** How many rows a group holds, quiet beside its name. */
+function GroupCount({ count }: { count: number }) {
+  const { t } = useTranslation();
+  return (
+    <span
+      aria-label={t('tours.packing.items', { count })}
+      className="flex-none text-caption tabular-nums text-content-faint"
+    >
+      {count}
+    </span>
+  );
+}
+
 export function PackingRowAside({ row, bag }: { row: PackingCardItem; bag: PackingCardBag | undefined }) {
   const { t } = useTranslation();
   const personal = t('assistant.card.packing.tierPersonal');
   const partial = !row.checked && row.packed > 0 && row.packed < row.quantity;
   return (
     <>
-      {row.quantity > 1 && <WhiteBadge>×{row.quantity}</WhiteBadge>}
-      {partial && <WhiteBadge>{`${row.packed}/${row.quantity}`}</WhiteBadge>}
-      {row.weightGrams !== null && <WhiteBadge>{formatWeight(row.weightGrams)}</WhiteBadge>}
+      {row.quantity > 1 && <span className={QUIET}>×{row.quantity}</span>}
+      {partial && <span className={QUIET}>{`${row.packed}/${row.quantity}`}</span>}
+      {row.weightGrams !== null && <span className={QUIET}>{formatWeight(row.weightGrams)}</span>}
       {row.tier === 'personal' && (
         <Tooltip label={personal}>
           <span role="img" aria-label={personal} className="flex text-content-faint">
@@ -216,7 +231,7 @@ function BagHead({
 }) {
   const { t } = useTranslation();
   if (!bag) {
-    const badge = inChange ? undefined : <CountBadge count={group.count} />;
+    const badge = inChange ? undefined : <GroupCount count={group.count} />;
     const lead = <BagSwatch bag={undefined} size="head" />;
     return <ChecklistHead color="" name={t('packing.noBag')} lead={lead} badge={badge} />;
   }
@@ -283,7 +298,7 @@ export function PackingGroup({
       <ChecklistHead
         color={packingColorOf(key.slot, name)}
         name={name}
-        badge={inChange ? undefined : <CountBadge count={group.count} />}
+        badge={inChange ? undefined : <GroupCount count={group.count} />}
         people={group.assignees}
         removed={group.assigneesRemoved}
       />

client/src/components/Assistant/cards/parts/CardFrame.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 
 /**
  * The frame every answer card sits in, the same as the change card's: a
- * rounded card on the chat. A waiting change shows its frame dashed, a
+ * rounded card on the chat whose head band (CardHeader) runs to its edges. A waiting change shows its frame dashed, a
  * removed one faded, a settled one (discarded, expired, undone) fainter
  * still. The chat card (a message in the trip chat) sits on the quieter
  * secondary surface.
@@ -32,7 +32,7 @@ export default function CardFrame({
   return (
     <section
       aria-label={label}
-      className={`trek-assistant-enter rounded-xl border px-3 pb-2 pt-2.5 shadow-card ${STATE[state]} ${
+      className={`trek-assistant-enter overflow-hidden rounded-[16px] border px-3.5 pb-3 pt-3 shadow-card ${STATE[state]} ${
         surface === 'secondary' ? 'bg-surface-secondary' : 'bg-surface-card'
       }`}
     >

client/src/components/Assistant/cards/parts/CardHeader.tsx

@@ -1,43 +1,94 @@
 import type { LucideIcon } from 'lucide-react';
 import type { ReactNode } from 'react';
 
-import { WhiteBadge } from '../../../Planner/planParts';
+import { fs, NEUTRAL_TINT } from '../../../shared/DialogShell';
 import type { Tone } from './assistantTones';
-import KindTile from './KindTile';
 
 /**
- * The head of an answer card: its tile, what it is about (wrapping to two
- * lines at most, the whole title in its tooltip), how many it holds, one
- * quiet line of context under it, and its actions at the end.
+ * The head band of an answer card, as the trip's dialogs and booking cards
+ * wear it: a tinted band across the card's top, a raised white tile with the
+ * icon of what the card is about in its tone, an eyebrow naming the kind,
+ * the title, one quiet line under it, a count, and the card's actions at the
+ * end. It reaches the card's edges, so a card that opens with it needs no
+ * other head.
  */
+
+/** The icon's colour on the white tile, per tone. */
+const GLYPH: Record<Tone, string> = {
+  success: 'text-success',
+  info: 'text-info',
+  warning: 'text-warning',
+  danger: 'text-danger',
+};
+
 export default function CardHeader({
-  icon,
+  icon: Icon,
   tone,
   title,
+  eyebrow,
   count,
   meta,
   actions,
+  tile,
+  tint = NEUTRAL_TINT,
+  children,
 }: {
   icon: LucideIcon;
   tone: Tone;
   title: string;
+  /** The kind above the title ("PACKING LIST"); none when the title says it. */
+  eyebrow?: string;
   count?: number;
   meta?: ReactNode;
   actions?: ReactNode;
+  /** In place of the icon tile: a drawing of what the card shows (a route's sketch). */
+  tile?: ReactNode;
+  tint?: string;
+  /** Under the title row, on the band: a progress bar, a row of pills. */
+  children?: ReactNode;
 }) {
   return (
-    <div className="flex items-start gap-2.5">
-      <KindTile icon={icon} tone={tone} size="sm" />
-      <div className="min-w-0 flex-1">
-        <div className="flex min-w-0 items-center gap-1.5">
-          <bdi title={title} className="line-clamp-2 text-body font-semibold leading-tight text-content">
-            {title}
-          </bdi>
-          {count !== undefined && <WhiteBadge>{count}</WhiteBadge>}
+    <div className="-mx-3.5 -mt-3 mb-3 px-3.5 pb-2.5 pt-2.5" style={{ background: tint }}>
+      <div className={`flex gap-2.5 ${meta ? 'items-start' : 'items-center'}`}>
+        {tile ?? (
+          <span
+            aria-hidden="true"
+            className={`grid h-8 w-8 flex-none place-items-center rounded-[10px] bg-surface-card shadow-sm ${GLYPH[tone]}`}
+          >
+            <Icon size={15} strokeWidth={2} />
+          </span>
+        )}
+        <div className="min-w-0 flex-1">
+          {eyebrow && (
+            <div
+              className="truncate font-geist font-bold uppercase tracking-[.08em] text-content-muted"
+              style={fs(9.5)}
+            >
+              {eyebrow}
+            </div>
+          )}
+          <div className="flex min-w-0 items-center gap-2">
+            <bdi
+              title={title}
+              className="line-clamp-2 min-w-0 font-bold leading-tight tracking-[-0.01em] text-content"
+              style={fs(13.5, 'body')}
+            >
+              {title}
+            </bdi>
+            {count !== undefined && (
+              <span
+                className="inline-flex h-[18px] flex-none items-center rounded-full bg-surface-card px-1.5 font-semibold tabular-nums text-content-secondary shadow-sm"
+                style={fs(10.5)}
+              >
+                {count}
+              </span>
+            )}
+          </div>
+          {meta && <div className="mt-0.5 font-geist text-caption text-content-muted">{meta}</div>}
         </div>
-        {meta && <div className="mt-0.5 text-caption text-content-muted">{meta}</div>}
+        {actions && <div className="flex flex-none items-center gap-1">{actions}</div>}
       </div>
-      {actions && <div className="flex flex-none items-center gap-1">{actions}</div>}
+      {children}
     </div>
   );
 }

client/src/components/Assistant/cards/parts/CardRows.tsx

@@ -44,7 +44,11 @@ export function CardRow({
         <span className="block text-body font-semibold leading-tight text-content">{title}</span>
         {facts}
       </span>
-      {aside && <span className="flex-none text-caption tabular-nums text-content-secondary">{aside}</span>}
+      {aside && (
+        <span className="flex flex-none items-center gap-2 text-caption tabular-nums text-content-secondary">
+          {aside}
+        </span>
+      )}
     </>
   );
   const hover = onHover

client/src/components/Assistant/cards/parts/CardSection.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+
+import { Eyebrow, Field } from '../../../Planner/bookings/bookingParts';
+
+/**
+ * The body of an answer card in the trip dialogs' look: sections under an
+ * eyebrow of their own, figures as framed fields with their label over them
+ * (the field every booking card is made of), and a foot bar for the card's
+ * ways onward, set off by a line across the card.
+ */
+
+/** One part of a card under its eyebrow, with room for something on the right of the label. */
+export function CardSection({ label, aside, children }: { label: string; aside?: ReactNode; children: ReactNode }) {
+  return (
+    <section className="mt-3 first:mt-0">
+      <div className="mb-1.5 flex min-h-4 items-center gap-2">
+        <Eyebrow>{label}</Eyebrow>
+        {aside && <span className="ms-auto flex items-center gap-1">{aside}</span>}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/** A card's figures, side by side in framed fields: as many columns as figures, at most four. */
+export function CardFields({ fields }: { fields: readonly { key: string; label: string; value: ReactNode }[] }) {
+  if (fields.length === 0) return null;
+  const columns = ['grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4'][Math.min(fields.length, 4) - 1];
+  return (
+    <div className={`grid gap-1.5 ${columns}`}>
+      {fields.map((field) => (
+        <div key={field.key} className="min-w-0" data-field={field.key}>
+          <Field label={field.label} tabular>
+            {field.value}
+          </Field>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** The foot of a card: its actions at the end, under a line that runs to the card's edges. */
+export function CardFoot({ children }: { children: ReactNode }) {
+  return (
+    <div className="-mx-3.5 -mb-3 mt-3 flex flex-wrap items-center justify-end gap-1.5 border-t border-edge-faint bg-surface-secondary px-3.5 py-2.5">
+      {children}
+    </div>
+  );
+}

client/src/components/Assistant/cards/tour/TourFigureLine.tsx

@@ -0,0 +1,46 @@
+import { Clock, MoveHorizontal, TrendingUp } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+import type { DistanceUnit } from '../../../../types';
+import { formatDistance, formatElevation } from '../../../../utils/units';
+import type { LegVariant } from '../../../Tours/planner/legVariants';
+import { formatTourDuration } from '../../../Tours/planner/tourDurationInput';
+
+/**
+ * A way's length, climb and time as one quiet line of glyphs and values,
+ * without a frame around each: what a choice of ways and a change row show
+ * where framed fields would crowd the row.
+ */
+
+/** One figure of a way: its glyph and its value, quiet, in a line of them. */
+function Figure({ name, icon, children }: { name: string; icon: ReactNode; children: ReactNode }) {
+  return (
+    <span className="inline-flex items-center gap-1 whitespace-nowrap" data-figure={name}>
+      {icon}
+      <span className="tabular-nums">{children}</span>
+    </span>
+  );
+}
+
+const GLYPH = { size: 11, strokeWidth: 2.2, 'aria-hidden': true, className: 'flex-none text-content-faint' } as const;
+
+/** A way's length, climb and time in one quiet line. */
+export default function WayFigures({ way, unit }: { way: LegVariant; unit: DistanceUnit }) {
+  return (
+    <span className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-caption text-content-secondary">
+      <Figure name="distance" icon={<MoveHorizontal {...GLYPH} />}>
+        {formatDistance(way.distanceM / 1000, unit)}
+      </Figure>
+      {way.gainM !== null && (
+        <Figure name="ascent" icon={<TrendingUp {...GLYPH} />}>
+          {formatElevation(way.gainM, unit)}
+        </Figure>
+      )}
+      {way.minutes !== null && (
+        <Figure name="time" icon={<Clock {...GLYPH} />}>
+          {formatTourDuration(way.minutes)}
+        </Figure>
+      )}
+    </span>
+  );
+}

client/src/components/Assistant/cards/tour/TourRouteActions.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from '../../../../i18n';
 import { SoftPill } from '../../../Planner/planParts';
 import { useAssistantView } from '../../assistantViewContext';
 import { CardOpenButton } from '../parts/CardOpen';
+import { CardFoot } from '../parts/CardSection';
 import { tourTarget } from './tourLook';
 import { useTakeProposal } from './useTourRouteCard';
 
@@ -58,7 +59,7 @@ export default function TourRouteActions({
   if (take.state === 'failed') caption = t('assistant.card.tour.askAgain');
   else if (take.state !== 'taken' && take.reasonKey) caption = t(take.reasonKey);
   return (
-    <div className="mt-2.5 flex flex-col items-end gap-1">
+    <CardFoot>
       <div className="flex flex-wrap items-center justify-end gap-1.5">
         <button
           type="button"
@@ -92,10 +93,10 @@ export default function TourRouteActions({
         )}
       </div>
       {take.visible && caption && (
-        <p className="m-0 text-end text-caption text-content-muted" role="status">
+        <p className="m-0 basis-full text-end text-caption text-content-muted" role="status">
           {caption}
         </p>
       )}
-    </div>
+    </CardFoot>
   );
 }

client/src/components/Assistant/cards/tour/TourRouteCard.test.tsx

@@ -115,11 +115,11 @@ afterEach(() => {
 });
 
 describe('TourRouteCard', () => {
-  it('FE-AI-TOUR-021: states the name, the figures as badges, the day and the hardest grade, uncertain when little is graded', () => {
+  it('FE-AI-TOUR-021: states the name, the figures as framed fields, the day and the hardest grade, uncertain when little is graded', () => {
     const { container } = renderCard(HIKE);
     expect(screen.getByText('Hochfelln from Bergen')).toBeInTheDocument();
     for (const figure of ['time', 'distance', 'ascent', 'descent']) {
-      expect(container.querySelector(`[data-figure="${figure}"]`)).not.toBeNull();
+      expect(container.querySelector(`[data-field="${figure}"]`)).not.toBeNull();
     }
     expect(screen.getByText('8.2 km')).toBeInTheDocument();
     expect(screen.getAllByText('640 m')).toHaveLength(2);
@@ -159,7 +159,7 @@ describe('TourRouteCard', () => {
 
   it('FE-AI-TOUR-024: a stop chip moves the spot in focus to the stop while pointed at', () => {
     renderCard(HIKE);
-    const hut = screen.getByRole('button', { name: 'Strausshütte, 09:40' });
+    const hut = screen.getByRole('button', { name: /^Strausshütte, 09:40/ });
     fireEvent.mouseEnter(hut);
     expect(useAssistantStore.getState().routeFocus?.focus.distanceMeters).toBeCloseTo(2400, 0);
     fireEvent.mouseLeave(hut);
@@ -171,11 +171,11 @@ describe('TourRouteCard', () => {
   it('FE-AI-TOUR-024b: the stops run as a timeline, each walk on the line between two stops and read with the one it leads to', () => {
     renderCard(HIKE);
     const list = screen.getByRole('list', { name: 'Stops along the way' });
-    // One row per stop; the lines between them are not rows.
-    expect(list.querySelectorAll('[role="listitem"]')).toHaveLength(5);
+    // One row per stop; the walks between them are hidden, read with the stop they lead to.
+    expect(list.querySelectorAll('li:not([aria-hidden="true"])')).toHaveLength(5);
     // The place beside the way has no time: the hut measures from the start, then each stop from the last.
-    expect(screen.getAllByText(/from the last stop$/)).toHaveLength(3);
-    const legs = [...list.querySelectorAll('[aria-hidden="true"]')].map((leg) => leg.textContent).filter(Boolean);
+    expect(screen.getAllByRole('button', { name: /from the last stop$/ })).toHaveLength(3);
+    const legs = [...list.querySelectorAll('li[aria-hidden="true"]')].map((leg) => leg.textContent).filter(Boolean);
     expect(legs).toHaveLength(3);
   });
 
@@ -234,18 +234,21 @@ describe('TourRouteCard', () => {
     const decide = vi.fn(async (_key: number, decisions: { toolCallId: string; approved: boolean }[]) => {
       // The server applies the take; the thread shows it applied with the new tour's place.
       const chat = chatOf(useAssistantStore.getState(), TRIP);
-      const applied = heldTake(true);
-      applied.parts.push({
+      // The server sends the answer back with the take joined to it, now applied with the new tour's place.
+      const applied = proposed();
+      applied.parts.push(...heldTake(true).parts, {
         type: 'data-trek-applied',
         data: { toolCallId: decisions[0]?.toolCallId ?? '', entity: 'tour', ids: [77], dayId: 22, undoUntil: null },
       });
-      useAssistantStore.setState({ byTrip: { [TRIP]: { ...chat, messages: [proposed(), applied] } } });
+      useAssistantStore.setState({ byTrip: { [TRIP]: { ...chat, messages: [applied] } } });
     });
     seed([proposed()]);
     useAssistantStore.setState({ decide });
     takeProposal.mockImplementationOnce(async () => {
       const chat = chatOf(useAssistantStore.getState(), TRIP);
-      useAssistantStore.setState({ byTrip: { [TRIP]: { ...chat, messages: [proposed(), heldTake(undefined)] } } });
+      const joined = proposed();
+      joined.parts.push(...heldTake(undefined).parts);
+      useAssistantStore.setState({ byTrip: { [TRIP]: { ...chat, messages: [joined] } } });
       return 'held';
     });
     renderCard(HIKE, { onOpen });
@@ -374,7 +377,7 @@ describe('TourRouteCard', () => {
   it('FE-AI-TOUR-042: the day shows the latest start when none is set, and the walk in the dark in red', () => {
     const schedule = HIKE.schedule as NonNullable<Route['schedule']>;
     renderCard({ ...HIKE, schedule: { ...schedule, start: null, arrive: null, latestStart: '10:30' } });
-    expect(screen.getByText('Start by 10:30 to finish before sunset')).toBeInTheDocument();
+    expect(screen.getByText('Start by 10:30')).toBeInTheDocument();
 
     const { container } = renderCard({
       ...HIKE,
@@ -382,6 +385,6 @@ describe('TourRouteCard', () => {
       schedule: { ...schedule, start: '06:00', arrive: '19:00', latestStart: '10:30' },
     });
     expect(container.querySelectorAll('[data-testid="tour-day"] .bg-danger')).toHaveLength(2);
-    expect(screen.getAllByText('Start by 10:30 to finish before sunset')).toHaveLength(1);
+    expect(screen.getAllByText('Start by 10:30')).toHaveLength(1);
   });
 });

client/src/components/Assistant/cards/tour/TourRouteCard.tsx

@@ -4,11 +4,11 @@ import { useMemo } from 'react';
 import { useTranslation } from '../../../../i18n';
 import type { DistanceIndexedProfileSample } from '../../../../utils/routeGeometry';
 import { variantPaintCss } from '../../../Tours/planner/legVariantPaint';
-import { useAssistantView } from '../../assistantViewContext';
 import CardFrame from '../parts/CardFrame';
+import { CardSection } from '../parts/CardSection';
 import TourRouteActions from './TourRouteActions';
 import TourRouteDay from './TourRouteDay';
-import TourRouteHead from './TourRouteHead';
+import TourRouteHead, { TourRouteFields } from './TourRouteHead';
 import { profileSamples } from './tourRouteModel';
 import { TourRouteProblem, TourRouteWarnings } from './TourRouteNotes';
 import TourRouteProfile from './TourRouteProfile';
@@ -40,19 +40,30 @@ export function TourRouteBody({
   compare?: ReadonlyArray<{ key: string; samples: readonly DistanceIndexedProfileSample[]; color: string }>;
   letter?: string;
 }) {
+  const { t } = useTranslation();
   const samples = useMemo(() => profileSamples(card), [card]);
   return (
     <>
-      <TourRouteProfile
-        toolCallId={toolCallId}
-        card={card}
-        samples={samples}
-        color={color}
-        focus={route.focus}
-        onFocus={route.setFocus}
-        compare={compare}
-      />
-      <TourRouteStops card={card} samples={samples} onFocus={route.setFocus} />
+      <TourRouteFields card={card} />
+      {/* A way drawn straight has neither heights nor the line to say so under: no section at all. */}
+      {(samples.length >= 2 || card.routed) && (
+        <CardSection label={t('tours.planner.inspector.elevation')}>
+          <TourRouteProfile
+            toolCallId={toolCallId}
+            card={card}
+            samples={samples}
+            color={color}
+            focus={route.focus}
+            onFocus={route.setFocus}
+            compare={compare}
+          />
+        </CardSection>
+      )}
+      {card.stops.length > 0 && (
+        <CardSection label={t('assistant.card.tour.stops')}>
+          <TourRouteStops card={card} samples={samples} onFocus={route.setFocus} />
+        </CardSection>
+      )}
       <TourRouteDay card={card} />
       <TourRouteWarnings card={card} />
       <TourRouteProblem card={card} />
@@ -63,12 +74,11 @@ export function TourRouteBody({
 
 export default function TourRouteCard({ toolCallId, card }: { toolCallId: string; card: Route }) {
   const { t } = useTranslation();
-  const { density } = useAssistantView();
   const route = useTourRouteCard(toolCallId, card);
   return (
     <div {...route.handlers} className={`rounded-xl ${route.litFromMap ? 'ring-1 ring-accent' : ''}`}>
       <CardFrame label={routeName(card, t)}>
-        <TourRouteHead card={card} sketchHeight={density === 'roomy' ? 64 : 56} onShow={route.showOnMap} />
+        <TourRouteHead card={card} onShow={route.showOnMap} />
         <TourRouteBody toolCallId={toolCallId} card={card} route={route} color={variantPaintCss('current')} />
       </CardFrame>
     </div>

client/src/components/Assistant/cards/tour/TourRouteDay.tsx

@@ -4,6 +4,7 @@ import { createElement } from 'react';
 
 import { useTranslation } from '../../../../i18n';
 import { SoftPill } from '../../../Planner/planParts';
+import { Tooltip } from '../../../shared/Tooltip';
 import { weatherIconFor } from '../../../Weather/weatherIcons';
 import { useCardFormat } from '../parts/useCardFormat';
 import { type BarSpan, dayBarOf, forecastHours, RAIN_SHOWN_PCT } from './tourRouteDayModel';
@@ -93,9 +94,13 @@ export default function TourRouteDay({ card }: { card: TourRouteCard }) {
       )}
       {!schedule.start && schedule.latestStart && (
         <div className="mt-1 flex">
-          <SoftPill icon={<Clock size={10} strokeWidth={2.2} aria-hidden="true" />}>
-            {t('assistant.card.tour.latestStart', { time: format.clock(schedule.latestStart) })}
-          </SoftPill>
+          <Tooltip label={t('assistant.card.tour.latestStart', { time: format.clock(schedule.latestStart) })}>
+            <span className="inline-flex">
+              <SoftPill icon={<Clock size={10} strokeWidth={2.2} aria-hidden="true" />}>
+                {t('assistant.card.tour.latestStartShort', { time: format.clock(schedule.latestStart) })}
+              </SoftPill>
+            </span>
+          </Tooltip>
         </div>
       )}
       {schedule.weather === 'climate' && (

client/src/components/Assistant/cards/tour/TourRouteHead.tsx

@@ -4,12 +4,14 @@ import { createElement } from 'react';
 
 import { useTranslation } from '../../../../i18n';
 import { SoftPill, WhiteBadge } from '../../../Planner/planParts';
+import { fs, PILL } from '../../../shared/DialogShell';
 import { Tooltip } from '../../../shared/Tooltip';
 import { SacStepChip } from '../../../Tours/hike/SacStepChip';
 import { variantPaintCss } from '../../../Tours/planner/legVariantPaint';
 import { formatTourDuration } from '../../../Tours/planner/tourDurationInput';
 import { tourDayRowIcon } from '../../../Tours/tourDayRowIcon';
-import { CardFacts } from '../parts/CardFacts';
+import CardHeader from '../parts/CardHeader';
+import { CardFields } from '../parts/CardSection';
 import RouteSketch from '../parts/RouteSketch';
 import { useCardFormat } from '../parts/useCardFormat';
 import { factKeysOf, factValue, percentText, type FactKey } from './tourRouteModel';
@@ -89,7 +91,7 @@ export function TourGrade({ card }: { card: TourRouteCard }) {
   );
 }
 
-/** The day a route is planned on, as words: "Day 2, Tue 14 Oct", or the date alone. */
+/** The day a route is planned on, as a white pill on the band: "Day 2, Tue 14 Oct", or the date alone. */
 function DayPill({ card }: { card: TourRouteCard }) {
   const { t } = useTranslation();
   const format = useCardFormat();
@@ -98,7 +100,12 @@ function DayPill({ card }: { card: TourRouteCard }) {
   const date = format.date(schedule.date);
   const text =
     schedule.dayNumber !== null ? `${t('assistant.card.tour.day', { day: schedule.dayNumber })}, ${date}` : date;
-  return <SoftPill icon={<CalendarDays size={10} strokeWidth={2.2} aria-hidden="true" />}>{text}</SoftPill>;
+  return (
+    <span className={PILL} style={fs(11)}>
+      <CalendarDays size={11} strokeWidth={2.2} aria-hidden="true" className="flex-none text-content-faint" />
+      {text}
+    </span>
+  );
 }
 
 /** The route drawn small: a button that shows it on the map. */
@@ -127,35 +134,51 @@ export function TourRouteSketch({
   );
 }
 
-export default function TourRouteHead({
-  card,
-  sketchHeight,
-  onShow,
-}: {
-  card: TourRouteCard;
-  sketchHeight: number;
-  onShow: () => void;
-}) {
+/** The route's figures as framed fields, each under its label: distance, climb, descent and time, as known. */
+export function TourRouteFields({ card }: { card: TourRouteCard }) {
+  const { t } = useTranslation();
+  const format = useCardFormat();
+  const fields = factKeysOf(card).flatMap((key) => {
+    const value = factValue(card, key);
+    if (value === null) return [];
+    // A field's label is short; how the time was reckoned is the figure badges' tooltip.
+    const label = t(FACT_LOOK[key].labelKey ?? 'tours.planner.inspector.duration');
+    let text: string;
+    if (key === 'time') text = formatTourDuration(value);
+    else text = key === 'distance' ? format.distance(value / 1000) : format.elevation(value);
+    return [{ key, label, value: text }];
+  });
+  return <CardFields fields={fields} />;
+}
+
+/**
+ * The head band of a route card: the route drawn small on a raised tile, what
+ * kind of tour it is above its name, the label under it, and its grade and
+ * the day it is planned on as pills on the band.
+ */
+export default function TourRouteHead({ card, onShow }: { card: TourRouteCard; onShow: () => void }) {
   const { t } = useTranslation();
   const name = routeName(card, t);
+  const tile = (
+    <span className="w-12 flex-none overflow-hidden rounded-[10px] bg-surface-card p-1 shadow-sm">
+      <TourRouteSketch card={card} height={48} onShow={onShow} />
+    </span>
+  );
   return (
-    <div className="flex items-start gap-2.5">
-      <div className="w-[72px] flex-none">
-        <TourRouteSketch card={card} height={sketchHeight} onShow={onShow} />
-      </div>
-      <div className="min-w-0 flex-1">
-        <div className="flex min-w-0 items-start gap-2">
-          <bdi title={name} className="line-clamp-2 min-w-0 flex-1 text-body font-semibold leading-tight text-content">
-            {name}
-          </bdi>
-          <TourGrade card={card} />
-        </div>
-        {card.label && <p className="m-0 mt-0.5 truncate text-caption text-content-muted">{card.label}</p>}
-        <CardFacts>
-          <TourRouteFigures card={card} />
+    <CardHeader
+      icon={tourDayRowIcon(card.activity)}
+      tone="info"
+      tile={tile}
+      eyebrow={t(TOUR_TYPE_WORDS[card.activity].labelKey)}
+      title={name}
+      meta={card.label ?? undefined}
+    >
+      {((card.activity === 'hike' && card.grades) || card.schedule) && (
+        <div className="mt-2.5 flex flex-wrap items-center gap-1.5">
+          {card.activity === 'hike' && card.grades && <TourGrade card={card} />}
           <DayPill card={card} />
-        </CardFacts>
-      </div>
-    </div>
+        </div>
+      )}
+    </CardHeader>
   );
 }

client/src/components/Assistant/cards/tour/TourRouteInRow.tsx

@@ -10,7 +10,8 @@ import { tourDayRowIcon } from '../../../Tours/tourDayRowIcon';
 import type { ChangeItem } from '../../assistantParts';
 import { verbLookOf } from '../cardLooks';
 import KindTile from '../parts/KindTile';
-import { TourGrade, TourRouteFigures, TourRouteSketch } from './TourRouteHead';
+import WayFigures from './TourFigureLine';
+import { TourGrade, TourRouteSketch } from './TourRouteHead';
 import { legVariantOf, previousVariantOf, profileBands, profileSamples } from './tourRouteModel';
 import { useTourRouteCard } from './useTourRouteCard';
 
@@ -37,29 +38,33 @@ export default function TourRouteInRow({ card, item }: { card: TourRouteCard; it
   const samples = useMemo(() => profileSamples(card), [card]);
   const previous = previousVariantOf(card);
   const notPlanned = card.problem?.why === 'not_planned';
+  const grades = card.activity === 'hike' ? card.grades : null;
   return (
-    <div className="flex flex-col gap-1.5" data-testid="tour-route-row">
-      <div className="flex items-start gap-2">
-        <div className="w-16 flex-none">
-          <TourRouteSketch card={card} height={40} onShow={showOnMap} />
-        </div>
-        <div className="min-w-0 flex-1">
-          <span className="flex flex-wrap items-center gap-1">
-            <TourRouteFigures card={card} />
-            <TourGrade card={card} />
-            {previous && (
-              <VariantDelta
-                variant={legVariantOf(card, 'current')}
-                current={previous}
-                unit={unit}
-                t={t}
-                hint={t('assistant.card.tour.deltaBefore')}
-              />
-            )}
+    <div
+      className="flex flex-col gap-2 rounded-[12px] border border-edge-faint bg-surface-secondary p-2.5"
+      data-testid="tour-route-row"
+    >
+      <div className="flex items-center gap-2.5">
+        <span className="w-14 flex-none overflow-hidden rounded-[10px] bg-surface-card p-1 shadow-sm">
+          <TourRouteSketch card={card} height={36} onShow={showOnMap} />
+        </span>
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <span className="flex min-w-0 items-center gap-2">
+            <span className="min-w-0 flex-1">
+              <WayFigures way={legVariantOf(card, 'current')} unit={unit} />
+            </span>
+            {grades && grades.highest !== null && <TourGrade card={card} />}
           </span>
-          {notPlanned && (
-            <p className="m-0 mt-1 text-caption text-content-faint">{t('assistant.card.tour.notPlanned')}</p>
+          {previous && (
+            <VariantDelta
+              variant={legVariantOf(card, 'current')}
+              current={previous}
+              unit={unit}
+              t={t}
+              hint={t('assistant.card.tour.deltaBefore')}
+            />
           )}
+          {notPlanned && <p className="m-0 text-caption text-content-faint">{t('assistant.card.tour.notPlanned')}</p>}
         </div>
       </div>
       {!notPlanned && samples.length >= 2 && (

client/src/components/Assistant/cards/tour/TourRouteProfile.tsx

@@ -87,7 +87,7 @@ export default function TourRouteProfile({ toolCallId, card, samples, color, foc
   const bands = useMemo(() => profileBands(card, samples), [card, samples]);
   if (samples.length < 2) {
     if (!card.routed) return null;
-    return <p className="m-0 mt-2 text-caption text-content-faint">{t('assistant.card.tour.noHeights')}</p>;
+    return <p className="m-0 text-caption text-content-faint">{t('assistant.card.tour.noHeights')}</p>;
   }
   const phone = variant === 'fullscreen';
   const focusGrade = focus ? gradeAt(grades, focus.distanceMeters) : null;
@@ -112,7 +112,7 @@ export default function TourRouteProfile({ toolCallId, card, samples, color, foc
   };
 
   return (
-    <div className="mt-2">
+    <div className="rounded-[12px] border border-edge-faint bg-surface-secondary px-2 pb-1.5 pt-2">
       <ElevationProfile
         samples={samples}
         color={color}

client/src/components/Assistant/cards/tour/TourRouteStops.tsx

@@ -1,5 +1,5 @@
 import type { TourRouteCard, TourRouteStop } from '@trek/shared';
-import { AlertTriangle, Flag, MapPin, MountainSnow, type LucideIcon } from 'lucide-react';
+import { AlertTriangle, Clock, Flag, MapPin, MountainSnow, type LucideIcon } from 'lucide-react';
 import { createElement, type ReactNode } from 'react';
 
 import { useTranslation } from '../../../../i18n';
@@ -9,7 +9,7 @@ import {
   type RouteProfileFocus,
 } from '../../../../utils/routeGeometry';
 import { TOUR_POI_LOOKS } from '../../../Map/poiCategories';
-import { SoftPill, WhiteBadge } from '../../../Planner/planParts';
+import { SoftPill } from '../../../Planner/planParts';
 import { Tooltip } from '../../../shared/Tooltip';
 import { StageEndCorner } from '../../../Tours/stages/StageParts';
 import { useCardFormat } from '../parts/useCardFormat';
@@ -18,12 +18,13 @@ import { FLAG_LOOK, stopName } from './tourRouteWords';
 
 /**
  * The stops of a route as a timeline in the order they lie along it: one row
- * per stop (the start and the end, the huts, summits and stations on the way
- * with their clock, what lies a little off the way quieter), joined by a line
- * that carries the walking time of the stretch between two stops, so a time
- * is never read as belonging to the stop beside it. Pointing at a chip or
- * tapping it moves the spot in focus there, on the profile and on the map
- * alike. Past eight the middle ones fold into a count that names them.
+ * per stop on a line down the card (the start and the end filled, the huts,
+ * summits and stations on the way with their glyph, what lies a little off
+ * the way quieter), its name, how far off the way or how long the stay under
+ * it, and its clock at the end; the walk between two stops sits on the line
+ * between their rows, so a time is never read as a stop's own. Pointing at a
+ * row or tapping it moves the spot in focus there, on the profile and on the
+ * map alike. Past eight the middle ones fold into a row that names them.
  */
 
 /** A stop's glyph: the flag at either end, the mountain at the highest point, the place's own for a kind. */
@@ -46,12 +47,31 @@ function focusOf(stop: TourRouteStop, samples: readonly DistanceIndexedProfileSa
   );
 }
 
-function StopChip({
+/** A stop's mark on the line: filled at the start and the end, a ring with its glyph on the way, smaller off it. */
+function Marker({ stop }: { stop: TourRouteStop }) {
+  const end = stop.role === 'start' || stop.role === 'end';
+  const along = stop.role === 'along';
+  const glyph = createElement(iconOf(stop), { size: along ? 9 : 10, strokeWidth: 2.2, 'aria-hidden': true });
+  let look = 'h-5 w-5 bg-surface-card text-content-muted ring-1 ring-inset ring-edge';
+  if (end) look = 'h-5 w-5 bg-accent text-accent-text';
+  else if (along) look = 'h-4 w-4 bg-surface-secondary text-content-faint ring-1 ring-inset ring-edge-faint';
+  return (
+    <span className="relative z-[1] flex w-5 flex-none justify-center">
+      <span className={`grid place-items-center rounded-full ${look}`}>{glyph}</span>
+      {stop.stageEnd && <StageEndCorner />}
+    </span>
+  );
+}
+
+function StopRow({
   stop,
+  leg,
   samples,
   onFocus,
 }: {
   stop: TourRouteStop;
+  /** The walk from the last stop with a time to this one, read with it. */
+  leg: number | null;
   samples: readonly DistanceIndexedProfileSample[];
   onFocus: (focus: RouteProfileFocus | null) => void;
 }) {
@@ -65,44 +85,45 @@ function StopChip({
       : null;
   const stay = stop.stayMinutes ? t('assistant.card.tour.stay', { time: format.minutes(stop.stayMinutes) }) : null;
   const clock = stop.clock ? format.clock(stop.clock) : null;
-  const label = [name, clock, off, stay].filter(Boolean).join(', ');
-  const glyph = createElement(iconOf(stop), {
-    size: 10,
-    strokeWidth: 2.2,
-    'aria-hidden': true,
-    className: 'flex-none text-content-faint',
-  });
-  const body = (
-    <>
-      <bdi className="max-w-[10rem] truncate">{name}</bdi>
-      {clock && <span className="tabular-nums text-content-muted">{clock}</span>}
-      {off && <span className="text-content-faint">{off}</span>}
-    </>
-  );
+  const walked = leg !== null ? t('assistant.card.tour.legTime', { time: format.minutes(leg) }) : null;
+  const label = [name, clock, off, stay, walked].filter(Boolean).join(', ');
+  const point = () => onFocus(focusOf(stop, samples));
+  const under = [off, stay].filter((part): part is string => part !== null);
   return (
-    <span className="inline-flex items-center gap-1">
-      <Tooltip label={label}>
-        <button
-          type="button"
-          aria-label={label}
-          onMouseEnter={() => onFocus(focusOf(stop, samples))}
-          onMouseLeave={() => onFocus(null)}
-          onFocus={() => onFocus(focusOf(stop, samples))}
-          onBlur={() => onFocus(null)}
-          onClick={() => onFocus(focusOf(stop, samples))}
-          className="relative inline-flex rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
-        >
-          {along ? <WhiteBadge icon={glyph}>{body}</WhiteBadge> : <SoftPill icon={glyph}>{body}</SoftPill>}
-          {stop.stageEnd && <StageEndCorner />}
-        </button>
-      </Tooltip>
-      {stay && <span className="text-caption text-content-faint">{stay}</span>}
-      {stop.flag && (
-        <SoftPill tone="warning" icon={<AlertTriangle size={10} strokeWidth={2.2} aria-hidden="true" />}>
-          {t(FLAG_LOOK[stop.flag].labelKey)}
-        </SoftPill>
-      )}
-    </span>
+    <li className="flex">
+      <button
+        type="button"
+        aria-label={label}
+        onMouseEnter={point}
+        onMouseLeave={() => onFocus(null)}
+        onFocus={point}
+        onBlur={() => onFocus(null)}
+        onClick={point}
+        className="-mx-1.5 flex min-w-0 flex-1 items-center gap-2.5 rounded-[10px] px-1.5 py-1 text-start transition-colors hover:bg-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+      >
+        <Marker stop={stop} />
+        <span className="min-w-0 flex-1">
+          <bdi
+            className={`block truncate leading-tight ${along ? 'text-caption text-content-secondary' : 'text-body font-medium text-content'}`}
+          >
+            {name}
+          </bdi>
+          {(under.length > 0 || stop.flag) && (
+            <span className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-caption text-content-faint">
+              {under.map((part) => (
+                <span key={part}>{part}</span>
+              ))}
+              {stop.flag && (
+                <SoftPill tone="warning" icon={<AlertTriangle size={10} strokeWidth={2.2} aria-hidden="true" />}>
+                  {t(FLAG_LOOK[stop.flag].labelKey)}
+                </SoftPill>
+              )}
+            </span>
+          )}
+        </span>
+        {clock && <span className="flex-none text-caption tabular-nums text-content-muted">{clock}</span>}
+      </button>
+    </li>
   );
 }
 
@@ -112,38 +133,36 @@ function legMinutes(from: TourRouteStop | undefined, to: TourRouteStop): number
   return to.minutes - from.minutes;
 }
 
-/** The line between two rows, with the stretch's walking time on it. */
+/** The walk between two rows, beside the line: read with the row it leads to, so hidden here. */
 function Leg({ minutes }: { minutes: number | null }) {
   const format = useCardFormat();
+  if (minutes === null) return <li aria-hidden="true" className="h-1.5" />;
   return (
-    // Read with the stop it leads to; a list holds only its rows.
-    <span aria-hidden="true" className="flex min-h-[14px] items-stretch gap-2">
-      <span className="flex w-2.5 flex-none justify-center">
-        <span className="w-px bg-edge" />
+    <li aria-hidden="true" className="flex items-center py-0.5 ps-[30px]">
+      <span className="inline-flex items-center gap-1 rounded-full bg-surface-secondary px-2 py-0.5 text-caption tabular-nums text-content-muted">
+        <Clock size={10} strokeWidth={2.2} className="flex-none text-content-faint" />
+        {format.minutes(minutes)}
       </span>
-      {minutes !== null && (
-        <span className="text-caption tabular-nums leading-tight text-content-faint">{format.minutes(minutes)}</span>
-      )}
-    </span>
+    </li>
   );
 }
 
-/** One row of the timeline: its dot on the line, then the stop, read after the walk that leads to it. */
-function Row({ end, leg, children }: { end: boolean; leg?: number | null; children: ReactNode }) {
+/** The middle stops folded into one row past eight, naming them in its tooltip. */
+function FoldedRow({ stops }: { stops: readonly TourRouteStop[] }) {
   const { t } = useTranslation();
-  const format = useCardFormat();
+  const names = stops.map((stop) => stopName(stop, t)).join(', ');
   return (
-    <span role="listitem" className="flex items-center gap-2">
-      {leg != null && (
-        <span className="sr-only">{t('assistant.card.tour.legTime', { time: format.minutes(leg) })}</span>
-      )}
-      <span className="flex w-2.5 flex-none justify-center">
-        <span
-          className={`h-2 w-2 rounded-full ${end ? 'bg-content-muted' : 'border border-content-faint bg-surface-card'}`}
-        />
+    <li className="flex items-center gap-2.5 py-1">
+      <span className="relative z-[1] flex w-5 flex-none justify-center">
+        <span className="h-2 w-2 rounded-full border border-dashed border-content-faint bg-surface-card" />
       </span>
-      <span className="flex min-w-0 flex-wrap items-center gap-1.5">{children}</span>
-    </span>
+      <Tooltip label={names}>
+        <span className="text-caption text-content-muted underline decoration-dotted underline-offset-2">
+          {t('assistant.card.tour.stopsMore', { count: stops.length })}
+          <span className="sr-only">{`: ${names}`}</span>
+        </span>
+      </Tooltip>
+    </li>
   );
 }
 
@@ -159,42 +178,30 @@ export default function TourRouteStops({
   const { t } = useTranslation();
   const { head, folded, tail } = chipStops(card);
   if (head.length === 0) return null;
-  const names = folded.map((stop) => stopName(stop, t)).join(', ');
   // The time is walked from the last stop that has one: a place beside the way has none.
   let walked: TourRouteStop | undefined;
   const rows: ReactNode[] = [];
   const pushStop = (stop: TourRouteStop, key: string) => {
     const leg = legMinutes(walked, stop);
     if (rows.length > 0) rows.push(<Leg key={`${key}-leg`} minutes={leg} />);
-    rows.push(
-      <Row key={key} end={stop.role === 'start' || stop.role === 'end'} leg={leg}>
-        <StopChip stop={stop} samples={samples} onFocus={onFocus} />
-      </Row>
-    );
+    rows.push(<StopRow key={key} stop={stop} leg={leg} samples={samples} onFocus={onFocus} />);
     if (stop.minutes !== null) walked = stop;
   };
   head.forEach((stop, index) => pushStop(stop, `h-${index}`));
   if (folded.length > 0) {
     rows.push(<Leg key="f-leg" minutes={null} />);
-    rows.push(
-      <Row key="f" end={false}>
-        <Tooltip label={names}>
-          <span className="inline-flex">
-            <WhiteBadge>
-              {t('assistant.card.tour.stopsMore', { count: folded.length })}
-              <span className="sr-only">{`: ${names}`}</span>
-            </WhiteBadge>
-          </span>
-        </Tooltip>
-      </Row>
-    );
+    rows.push(<FoldedRow key="f" stops={folded} />);
     // The folded stretch's time is not one leg; the next stop measures from the last folded one.
     walked = [...folded].reverse().find((stop) => stop.minutes !== null) ?? walked;
   }
   tail.forEach((stop, index) => pushStop(stop, `t-${index}`));
   return (
-    <div className="mt-2 flex flex-col" role="list" aria-label={t('assistant.card.tour.stops')}>
-      {rows}
+    <div className="relative">
+      {/* The line down the timeline, from the first mark to the last, under the marks. */}
+      <span aria-hidden="true" className="absolute bottom-3 start-[9.5px] top-3 w-px bg-edge" />
+      <ul className="relative m-0 flex list-none flex-col p-0" aria-label={t('assistant.card.tour.stops')}>
+        {rows}
+      </ul>
     </div>
   );
 }

client/src/components/Assistant/cards/tour/TourWays.tsx

@@ -1,19 +1,128 @@
+import type { TourRouteCard as Route } from '@trek/shared';
+import { Route as RouteIcon } from 'lucide-react';
 import { useMemo } from 'react';
 
 import { useTranslation } from '../../../../i18n';
 import { chatOf, useAssistantStore } from '../../../../store/assistantStore';
 import { useSettingsStore } from '../../../../store/settingsStore';
+import type { DistanceUnit } from '../../../../types';
+import { formatDistance, formatElevation } from '../../../../utils/units';
 import { SacStepChip } from '../../../Tours/hike/SacStepChip';
 import { variantPaintCss } from '../../../Tours/planner/legVariantPaint';
-import { VariantDelta } from '../../../Tours/planner/LegVariantsCard';
-import { VariantFigures, WayChoice } from '../../../Tours/planner/mapCardParts';
+import { type LegVariant, variantDelta } from '../../../Tours/planner/legVariants';
+import { VariantMark } from '../../../Tours/planner/mapCardParts';
+import { formatTourDuration } from '../../../Tours/planner/tourDurationInput';
 import { useAssistantView } from '../../assistantViewContext';
 import CardFrame from '../parts/CardFrame';
+import CardHeader from '../parts/CardHeader';
+import { CardSection } from '../parts/CardSection';
+import WayFigures from './TourFigureLine';
 import { TourRouteBody } from './TourRouteCard';
 import { legVariantOf, profileSamples, type RouteEntry, WAY_KEYS } from './tourRouteModel';
+import { routeName, TOUR_TYPE_WORDS } from './tourRouteWords';
 import { useLineHover, useTourRouteCard } from './useTourRouteCard';
 
-/** The ways of one answer with the chosen one known: its choices, then the chosen way's body. */
+/** A signed difference: a plus for more, a minus sign for less, nothing for none worth printing. */
+function signed(value: number, format: (absolute: number) => string): string | null {
+  const text = format(Math.abs(value));
+  if (Math.abs(value) < 1e-9 || /^0\s/.test(text)) return null;
+  return `${value > 0 ? '+' : '−'}${text}`;
+}
+
+/** How a way differs from the chosen one, as one faint line: "Compared with way A: −4.3 km −178 m −1 h 33 min". */
+function WayDelta({
+  way,
+  chosen,
+  letter,
+  unit,
+}: {
+  way: LegVariant;
+  chosen: LegVariant;
+  letter: string;
+  unit: DistanceUnit;
+}) {
+  const { t } = useTranslation();
+  const delta = variantDelta(way, chosen);
+  const parts = [
+    signed(delta.distanceM / 1000, (km) => formatDistance(km, unit)),
+    delta.gainM === null ? null : signed(delta.gainM, (m) => formatElevation(m, unit)),
+    delta.minutes === null ? null : signed(delta.minutes, formatTourDuration),
+  ].filter((part): part is string => part !== null);
+  if (parts.length === 0) return null;
+  return (
+    <span
+      className="flex flex-wrap items-center gap-x-2 text-caption text-content-faint"
+      data-testid="leg-variant-delta"
+    >
+      <span>{t('assistant.card.tour.deltaTo', { letter })}</span>
+      {parts.map((part) => (
+        <span key={part} className="tabular-nums text-content-muted">
+          {part}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+/** One way to choose: its letter in the colour it is drawn in, its name and grade, its figures, how it differs. */
+function WayOption({
+  entry,
+  index,
+  chosen,
+  chosenWay,
+  chosenLetter,
+  unit,
+  onSelect,
+  onHover,
+}: {
+  entry: RouteEntry;
+  index: number;
+  chosen: boolean;
+  chosenWay: LegVariant;
+  chosenLetter: string;
+  unit: DistanceUnit;
+  onSelect: () => void;
+  onHover: (on: boolean) => void;
+}) {
+  const { t } = useTranslation();
+  const key = WAY_KEYS[index] ?? 'a';
+  const letter = key.toUpperCase();
+  const way = legVariantOf(entry.card, key);
+  const grades = entry.card.grades;
+  const name = entry.card.label ?? t('tours.variants.option', { letter });
+  return (
+    <button
+      type="button"
+      role="radio"
+      aria-checked={chosen}
+      aria-label={name}
+      onClick={onSelect}
+      onMouseEnter={() => onHover(true)}
+      onMouseLeave={() => onHover(false)}
+      onFocus={() => onHover(true)}
+      onBlur={() => onHover(false)}
+      className={`flex w-full items-start gap-2.5 rounded-[12px] border px-2.5 py-2 text-start transition-colors ${
+        chosen
+          ? 'border-accent bg-surface-card shadow-sm'
+          : 'border-edge-faint bg-surface-secondary hover:border-edge hover:bg-surface-card'
+      }`}
+    >
+      <VariantMark variant={way} chosen={chosen} />
+      <span className="flex min-w-0 flex-1 flex-col gap-1">
+        <span className="flex min-w-0 items-center gap-2">
+          <bdi className="min-w-0 flex-1 truncate text-body font-semibold leading-tight text-content">{name}</bdi>
+          {grades && grades.highest !== null && (
+            <SacStepChip step={grades.highest} uncertain={grades.unknownShare >= 0.5} />
+          )}
+        </span>
+        <WayFigures way={way} unit={unit} />
+        {!chosen && <WayDelta way={way} chosen={chosenWay} letter={chosenLetter} unit={unit} />}
+      </span>
+    </button>
+  );
+}
+
+/** The ways of one answer with the chosen one known: the band, the choices, then the chosen way's body. */
 function WaysCard({
   entries,
   chosen,
@@ -44,57 +153,49 @@ function WaysCard({
     [entries, chosenIndex]
   );
 
-  const current = legVariantOf(chosen.card, chosenKey);
+  const chosenWay = legVariantOf(chosen.card, chosenKey);
   // Side by side where the window is roomy; on the phone the ways stay rows, so a finger scrubs the profile freely.
   let columns = '';
   if (density === 'roomy' && variant !== 'fullscreen') columns = entries.length >= 3 ? 'grid-cols-3' : 'grid-cols-2';
   const title = t('assistant.card.tour.ways', { count: entries.length });
+  const card: Route = chosen.card;
   return (
-    <div {...route.handlers} className={`rounded-xl ${route.litFromMap ? 'ring-1 ring-accent' : ''}`}>
+    <div {...route.handlers} className={`rounded-[16px] ${route.litFromMap ? 'ring-1 ring-accent' : ''}`}>
       <CardFrame label={title}>
-        <p className="m-0 text-caption text-content-muted">{title}</p>
-        <div role="radiogroup" aria-label={title} className={`mt-1.5 grid gap-1.5 ${columns}`}>
-          {entries.map((entry, index) => {
-            const key = WAY_KEYS[index] ?? 'a';
-            const letter = key.toUpperCase();
-            const way = legVariantOf(entry.card, key);
-            const grades = entry.card.grades;
-            return (
-              <WayChoice
+        <CardHeader
+          icon={RouteIcon}
+          tone="info"
+          eyebrow={t(TOUR_TYPE_WORDS[card.activity].labelKey)}
+          title={routeName(card, t)}
+          meta={title}
+        />
+        <CardSection label={t('assistant.card.tour.waysPick')}>
+          <div role="radiogroup" aria-label={title} className={`grid gap-1.5 ${columns}`}>
+            {entries.map((entry, index) => (
+              <WayOption
                 key={entry.toolCallId}
-                way={way}
-                name={entry.card.label ?? t('tours.variants.option', { letter })}
+                entry={entry}
+                index={index}
                 chosen={index === chosenIndex}
-                aside={
-                  <>
-                    {index !== chosenIndex && (
-                      <VariantDelta
-                        variant={way}
-                        current={current}
-                        unit={unit}
-                        t={t}
-                        hint={t('assistant.card.tour.deltaTo', { letter: chosenKey.toUpperCase() })}
-                      />
-                    )}
-                    {grades && <SacStepChip step={grades.highest} uncertain={grades.unknownShare >= 0.5} />}
-                  </>
-                }
+                chosenWay={chosenWay}
+                chosenLetter={chosenKey.toUpperCase()}
+                unit={unit}
                 onSelect={() => pick(tripId, blockKey, entry.toolCallId)}
                 onHover={(on) => hover(entry.toolCallId, on)}
-              >
-                <VariantFigures variant={way} unit={unit} t={t} />
-              </WayChoice>
-            );
-          })}
+              />
+            ))}
+          </div>
+        </CardSection>
+        <div className="mt-3">
+          <TourRouteBody
+            toolCallId={chosen.toolCallId}
+            card={chosen.card}
+            route={route}
+            color={variantPaintCss(chosenKey)}
+            compare={compare}
+            letter={chosenKey.toUpperCase()}
+          />
         </div>
-        <TourRouteBody
-          toolCallId={chosen.toolCallId}
-          card={chosen.card}
-          route={route}
-          color={variantPaintCss(chosenKey)}
-          compare={compare}
-          letter={chosenKey.toUpperCase()}
-        />
       </CardFrame>
     </div>
   );
@@ -102,12 +203,12 @@ function WaysCard({
 
 /**
  * Two or three ways of one route an answer proposed, as the planner offers a
- * section's ways: each a choice with its letter in the colour it is drawn in,
- * its own words, how it differs from the chosen one and its hardest grade,
- * its figures below. One profile holds them all, the chosen way filled and
- * the others thin on the same axes; under it the chosen way's stops, day and
- * warnings, and "Plan way B". A choice is kept per answer, and pointing at a
- * way lights its line on the map.
+ * section's ways: a band naming the route, each way a choice with its letter
+ * in the colour it is drawn in, its name and hardest grade, its figures and
+ * how it differs from the chosen one; one profile holds them all, the chosen
+ * way filled and the others thin on the same axes; under it the chosen way's
+ * figures, stops, day and warnings, and "Plan way B". A choice is kept per
+ * answer, and pointing at a way lights its line on the map.
  */
 export default function TourWays({ entries }: { entries: readonly RouteEntry[] }) {
   const { tripId } = useAssistantView();

client/src/components/Assistant/cards/tour/tourLook.ts

@@ -1,5 +1,5 @@
 import { type AssistantApplied, cumulativeMetres, type TourRouteCard, type TrekCard } from '@trek/shared';
-import { Route } from 'lucide-react';
+import { ChartNoAxesColumn, Circle, CircleCheck, CircleSlash, Footprints, Luggage, Route } from 'lucide-react';
 
 import type { RouteLineSpec, RouteUse } from '../../../../types/assistantMap';
 import type { EntityTarget, PackLook } from '../cardTypes';
@@ -86,6 +86,15 @@ export const TOUR_LOOK = {
   verbs: {
     addTour: { Icon: Route, tone: 'success', labelKey: 'assistant.change.verb.addTour' },
     updateTour: { Icon: Route, tone: 'info', labelKey: 'assistant.change.verb.updateTour' },
+    markVisited: { Icon: CircleCheck, tone: 'success', labelKey: 'assistant.change.verb.markVisited' },
+    markSkipped: { Icon: CircleSlash, tone: 'info', labelKey: 'assistant.change.verb.markSkipped' },
+    markPlanned: { Icon: Circle, tone: 'info', labelKey: 'assistant.change.verb.markPlanned' },
+    assignTrack: { Icon: Footprints, tone: 'success', labelKey: 'assistant.change.verb.assignTrack' },
+    unassignTrack: { Icon: Footprints, tone: 'danger', labelKey: 'assistant.change.verb.unassignTrack' },
+    excludeTour: { Icon: ChartNoAxesColumn, tone: 'info', labelKey: 'assistant.change.verb.excludeTour' },
+    countTour: { Icon: ChartNoAxesColumn, tone: 'success', labelKey: 'assistant.change.verb.countTour' },
+    linkPacking: { Icon: Luggage, tone: 'success', labelKey: 'assistant.change.verb.linkPacking' },
+    unlinkPacking: { Icon: Luggage, tone: 'info', labelKey: 'assistant.change.verb.unlinkPacking' },
   },
   tools: {},
   steps: {
@@ -96,6 +105,7 @@ export const TOUR_LOOK = {
     list_tours: { stepKey: 'assistant.step.readingTours' },
     find_tours_for_day: { stepKey: 'assistant.step.readingTours' },
     search_tour_pois: { stepKey: 'assistant.step.tourPois' },
+    get_city_walk_progress: { stepKey: 'assistant.step.readingTour' },
   },
   entities: {
     tour: {

client/src/components/Assistant/cards/tour/tourTakeModel.test.ts

@@ -67,6 +67,9 @@ describe('takeInThread', () => {
   it('FE-AI-TOUR-048: a take that names its proposal is matched by it, not by its way', () => {
     const other = { ...GENTLE, line: [[47.9, 12.8, 600], ...GENTLE.line.slice(1)] } satisfies TourRouteCard;
     expect(takeInThread([proposal, take(other, {}, 'take_proposal', 'call_1')], 'call_1', HIKE)).toBe('waiting');
+    // The server joins a take to the answer that drew the proposal: found there too.
+    const joined = { ...proposal, parts: [...proposal.parts, ...take(other, {}, 'take_proposal', 'call_1').parts] };
+    expect(takeInThread([joined], 'call_1', HIKE)).toBe('waiting');
     // The same way taken from another proposal leaves this one free.
     expect(
       takeInThread([proposal, take(HIKE, { approved: true }, 'take_proposal', 'call_2')], 'call_1', HIKE)

client/src/components/Assistant/cards/tour/tourTakeModel.ts

@@ -45,7 +45,8 @@ export function takeOfProposal(
 ): { id: string; state: 'waiting' | 'applied'; placeId: number | null } | null {
   const from = proposalIndex(messages, toolCallId);
   if (from < 0) return null;
-  for (const message of messages.slice(from + 1)) {
+  // The server joins a take to the answer that drew its proposal, so that answer is searched as well as the later ones.
+  for (const message of messages.slice(from)) {
     const open = new Map<string, 'waiting' | 'applied'>();
     for (const part of message.parts) {
       if (part.type !== 'tool-call' || part.toolName !== TAKE_TOOL || part.approval?.resolution) continue;

client/src/components/Assistant/cards/tour/tourViews.tsx

@@ -14,6 +14,6 @@ import TourRouteInRow, { TourRouteLead } from './TourRouteInRow';
  * file.
  */
 export const TOUR_VIEWS = {
-  tourRoute: { Block: TourRouteBlock, Lead: TourRouteLead, Body: TourRouteInRow },
+  tourRoute: { Block: TourRouteBlock, Lead: TourRouteLead, Body: TourRouteInRow, wideBody: true },
   tourList: { Block: TourListCard },
 } satisfies { [K in 'tourRoute' | 'tourList']: CardView<K> };

client/src/components/Assistant/cards/vacay/VacayAnswerBlock.tsx

@@ -1,10 +1,14 @@
 import type { CSSProperties } from 'react';
 
+import { Palmtree } from 'lucide-react';
+
 import { useTranslation } from '../../../../i18n';
 import { safeHexColor } from '../../../../utils/safeColor';
 import type { CardEntry } from '../cardTypes';
 import CardFrame from '../parts/CardFrame';
+import CardHeader from '../parts/CardHeader';
 import { CardOpenButton } from '../parts/CardOpen';
+import { CardFoot } from '../parts/CardSection';
 import { useViewerId } from '../parts/useViewerId';
 import VacayBalance from './VacayBalance';
 import { balanceLines, mergeVacayCards, type VacayView } from './vacayCardModel';
@@ -26,7 +30,6 @@ const SQUARE = 'size-2 flex-none rounded-sm';
 const COMPANY = 'size-2 flex-none rounded-sm bg-warning-soft ring-1 ring-inset ring-warning';
 const TRIP = 'size-1.5 flex-none rounded-full bg-info';
 const OTHER = 'mt-1.5 text-caption text-content-muted';
-const FOOT = 'mt-1 flex justify-end';
 
 interface LegendItem {
   key: string;
@@ -79,13 +82,14 @@ export default function VacayAnswerBlock({ cards }: { cards: readonly CardEntry[
   const first = own[0] ?? null;
   return (
     <CardFrame label={t('assistant.card.vacay.label')}>
+      <CardHeader icon={Palmtree} tone="info" title={t('assistant.card.vacay.label')} />
       {view.months.length > 0 && <VacayMonthStrip view={view} placed={[]} labelOf={() => ''} />}
       <Legend view={view} />
       {view.otherDays > 0 && <p className={OTHER}>{t('assistant.card.vacay.otherDays', { count: view.otherDays })}</p>}
       <VacayBalance lines={lines} view={view} mode="read" />
-      <div className={FOOT}>
+      <CardFoot>
         <CardOpenButton target={{ kind: 'page', path: vacayPathOf(first) }} labelKey="assistant.card.vacay.open" />
-      </div>
+      </CardFoot>
     </CardFrame>
   );
 }

client/src/components/Assistant/useAssistantPlaceStrip.ts

@@ -1,38 +1,18 @@
 import { type AssistantFoundPlace, categoryIdForKind } from '@trek/shared';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 
-import { useNetworkMode } from '../../hooks/useNetworkMode';
-import { useTranslation } from '../../i18n';
 import { chatOf, useAssistantStore } from '../../store/assistantStore';
 import { useCanDo } from '../../store/permissionsStore';
 import { useSettingsStore } from '../../store/settingsStore';
 import { useTripStore } from '../../store/tripStore';
 import type { Assignment } from '../../types';
-import { dayLabel } from '../../utils/dayLabel';
 import { haversineKm } from '../../utils/geo';
 import { safeHexColor } from '../../utils/safeColor';
 import { formatDistance } from '../../utils/units';
-import { hasUndecided } from './assistantParts';
 import { useAssistantScope, useAssistantView } from './assistantViewContext';
 import { useCardPoint } from './cards/parts/useCardPoint';
 
-/** A day a found place can be suggested for, named the way the day list names it. */
-interface StripDay {
-  id: number;
-  /** Its place in the trip, 1 for the first day: "+ Day 3". */
-  n: number;
-  label: string;
-  /** Its weekday, short ("Sat"), for the day grid; null for a day without a date. */
-  weekday: string | null;
-}
-
-/** The short weekday of a `YYYY-MM-DD` date, read as that calendar day wherever the reader is. */
-function weekdayOf(date: string | null | undefined, locale: string): string | null {
-  if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) return null;
-  return new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' }).format(new Date(`${date}T00:00:00Z`));
-}
-
 /** The trip category a found place most likely belongs in, for its line and its icon. */
 interface StripCategory {
   name: string;
@@ -54,20 +34,17 @@ function lastSpot(stops: readonly Assignment[] | undefined): { lat: number; lng:
 
 /**
  * What the strip of found places needs, the same for the window and the
- * phone: the trip's days to suggest a place for, the day in focus, how far a
- * place is from that day's last stop, its likely category, whether a
- * suggestion can be made now and why not, and the map's part (the pin while
- * the pointer rests on a card, the camera on a click).
+ * phone: the day in focus, how far a place is from that day's last stop, its
+ * likely category, whether a place can be added, and the map's part (the pin
+ * while the pointer rests on a card, the camera on a click).
  *
- * Suggesting writes nothing: the server holds the place as a change card to
- * decide like any other. It waits while another change is undecided, because
- * one decision answers all open cards.
+ * Adding opens the planner's own place form, filled in with the place and on
+ * the day in focus: the traveller sees everything about it and saves it as
+ * any other place, so nothing waits for the chat's open decisions.
  */
 export function useAssistantPlaceStrip() {
-  const { t, locale } = useTranslation();
-  const { tripId } = useAssistantView();
+  const { tripId, onRevealMap } = useAssistantView();
   const scope = useAssistantScope();
-  const { offline } = useNetworkMode();
   const can = useCanDo();
   const unit = useSettingsStore((s) => s.settings.distance_unit ?? 'metric');
   const { trip, days, assignments, categories } = useTripStore(
@@ -81,44 +58,15 @@ export function useAssistantPlaceStrip() {
       };
     })
   );
-  const { focusDayId, isRunning, threadId, waiting } = useAssistantStore(
-    useShallow((s) => {
-      const chat = chatOf(s, tripId);
-      return {
-        focusDayId: chat.focus?.dayId ?? null,
-        isRunning: chat.isRunning,
-        threadId: chat.threadId,
-        waiting: hasUndecided(chat.messages),
-      };
-    })
-  );
-  const addFoundPlace = useAssistantStore((s) => s.addFoundPlace);
+  const focusDayId = useAssistantStore((s) => chatOf(s, tripId).focus?.dayId ?? null);
+  const openPlaceDraft = useAssistantStore((s) => s.openPlaceDraft);
   const point = useCardPoint();
-  const [adding, setAdding] = useState<string | null>(null);
 
-  const stripDays = useMemo(
-    (): StripDay[] =>
-      (days ?? []).map((day, index) => ({
-        id: day.id,
-        n: index + 1,
-        label: dayLabel(day, index, t, locale),
-        weekday: weekdayOf(day.date, locale),
-      })),
-    [days, t, locale]
-  );
-  const focusDay = stripDays.find((d) => d.id === focusDayId) ?? null;
+  const focusDay = (days ?? []).find((d) => d.id === focusDayId) ?? null;
   const from = focusDay && assignments ? lastSpot(assignments[String(focusDay.id)]) : null;
 
-  /**
-   * Whether "+ Day" shows at all: a trip's chat (a journey's has no days), the
-   * planner holds the trip and the user may add to it.
-   */
-  const canSuggest = scope.kind === 'trip' && !!trip && can('place_edit', trip) && stripDays.length > 0;
-  /** Why "+ Day" is off right now, as a tooltip; null when it is on. */
-  let blockedKey: string | null = null;
-  if (offline) blockedKey = 'assistant.error.offline';
-  else if (waiting) blockedKey = 'assistant.composer.decideFirst';
-  const disabled = blockedKey !== null || isRunning || threadId === null || adding !== null;
+  /** Whether "Add to trip" shows at all: a trip's chat (a journey's has no days), the planner holds the trip and the user may add to it. */
+  const canAdd = scope.kind === 'trip' && !!trip && can('place_edit', trip);
 
   const categoryOf = (place: AssistantFoundPlace): StripCategory | null => {
     const id = categoryIdForKind(place.kind, categories);
@@ -130,14 +78,11 @@ export function useAssistantPlaceStrip() {
   const distanceOf = (place: AssistantFoundPlace): string | null =>
     from ? formatDistance(haversineKm(from, place), unit) : null;
 
-  const suggest = async (place: AssistantFoundPlace, dayId: number) => {
-    if (disabled) return;
-    setAdding(place.ref);
-    try {
-      await addFoundPlace(tripId, place.ref, dayId);
-    } finally {
-      setAdding(null);
-    }
+  /** Opens the place form with it; on the phone the chat steps aside first. */
+  const open = (place: AssistantFoundPlace) => {
+    if (!canAdd || !trip) return;
+    onRevealMap?.();
+    openPlaceDraft(trip.id, place, focusDay?.id ?? null);
   };
 
   /** Shows the place on the map; on the phone the chat steps aside first. */
@@ -151,17 +96,5 @@ export function useAssistantPlaceStrip() {
     [hoverPoint]
   );
 
-  return {
-    days: stripDays,
-    focusDay,
-    canSuggest,
-    disabled,
-    blockedKey,
-    adding,
-    categoryOf,
-    distanceOf,
-    suggest,
-    show,
-    hover,
-  };
+  return { canAdd, categoryOf, distanceOf, open, show, hover };
 }

client/src/components/Planner/PlaceFormModal.helpers.ts

@@ -128,7 +128,7 @@ export function placeEditForm(
 }
 
 /** A position the form opens on: a POI tapped on the map, or a right-click on it. */
-export interface PlacePrefill {
+export type PlacePrefill = {
   lat: number
   lng: number
   name?: string
@@ -136,6 +136,8 @@ export interface PlacePrefill {
   website?: string
   phone?: string
   osm_id?: string
+  /** A place Google knows, such as one the assistant found: the details column reads it by this id. */
+  google_place_id?: string
 }
 
 /** A blank form at a prefilled position, with what the POI already knew. */
@@ -149,6 +151,7 @@ export function prefillForm(prefill: PlacePrefill, extra: Partial<PlaceFormData>
     website: prefill.website || '',
     phone: prefill.phone || '',
     osm_id: prefill.osm_id,
+    google_place_id: prefill.google_place_id,
     ...extra,
   }
 }
@@ -170,7 +173,7 @@ export function openingDetailsSelection(
     }
   }
   if (prefill) {
-    return { placeId: prefill.osm_id || undefined, lat: prefill.lat, lng: prefill.lng, name: prefill.name || '' }
+    return { placeId: prefill.google_place_id || prefill.osm_id || undefined, lat: prefill.lat, lng: prefill.lng, name: prefill.name || '' }
   }
   return null
 }

client/src/components/Planner/PlaceFormModal.tsx

@@ -17,7 +17,7 @@ import { weekFromPeriods } from './placeHours'
 import type { PlaceOpeningHours } from '@trek/shared'
 import {
   DEFAULT_FORM, endsBeforeStart, findDuplicatePlace, formPin, mergeResult, parseCoordinatePair, placeEditForm, placeFormPayload,
-  prefillForm, type PlaceFormData,
+  prefillForm, type PlaceFormData, type PlacePrefill,
 } from './PlaceFormModal.helpers'
 import { useNewCategory, usePlaceForm } from './usePlaceForm'
 import { usePlaceSearch } from './usePlaceSearch'
@@ -64,7 +64,7 @@ interface PlaceFormModalProps {
   onClose: () => void
   onSave: (data: PlaceSubmitData, files?: File[]) => Promise<{ id: number } | void> | void
   place: Place | null
-  prefillCoords?: { lat: number; lng: number; name?: string; address?: string; website?: string; phone?: string; osm_id?: string; stop_type?: RoadtripStopType | null; duration_minutes?: number; category?: string } | null
+  prefillCoords?: (PlacePrefill & { stop_type?: RoadtripStopType | null; duration_minutes?: number; category?: string }) | null
   tripId: number
   categories: Category[]
   onCategoryCreated: (category: { name: string; color?: string; icon?: string }) => Promise<Category> | undefined

client/src/components/Studio/SaveIndicator.tsx

@@ -15,13 +15,15 @@ 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,
+  state, t, onAcceptTheirs, onKeepMine, onRetry, onReload = reloadStudio,
 }: {
   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 (
@@ -43,6 +45,24 @@ 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>
+    )
+  }
+
   if (state.status === 'readonly') {
     /*
      * Not an error and not retryable: this person was invited to read the
@@ -86,3 +106,8 @@ export function SaveIndicator({
 
   return null
 }
+
+/** The default way back to a current Studio: the page again, which loads the newest build. */
+function reloadStudio() {
+  window.location.reload()
+}

client/src/components/Studio/SpreadView.tsx

@@ -8,6 +8,7 @@ import { iconComponent } from './iconLibrary'
 import { HOLED_SHAPES, SHAPE_PATHS, scalePath, unitPath } from './shapes'
 import { TravelElementView } from './TravelElements'
 import { PageNumbers } from './PageNumbers'
+import { StickerView } from './StickerView'
 
 /**
  * One spread, drawn.
@@ -260,7 +261,10 @@ function PhotoView({ el, big, print, dropLabel }: {
           src={photoSrc(el.photoId!, big)}
           alt=""
           draggable={false}
-          loading="lazy"
+          // Lazy on the canvas, where a long book scrolls past; eager in print,
+          // where every sheet is laid out at once and a picture the browser put
+          // off is a picture missing from the PDF.
+          loading={print ? 'eager' : 'lazy'}
           style={{
             width: '100%',
             height: '100%',
@@ -396,6 +400,7 @@ export function ElementView({
   // Above the catch-all below, which routes everything that is not text into
   // the travel elements and draws null for anything they do not know.
   if (el.kind === 'icon') return <IconView el={el} />
+  if (el.kind === 'sticker') return <StickerView el={el} frameStyle={frameStyle(el)} />
 
   if (el.kind !== 'text') {
     // map, stats, countries, badge — the elements drawn from the journey's own

client/src/components/Studio/StickerView.tsx

@@ -0,0 +1,72 @@
+import { bookStickerLayerPaint, type BookStickerElement } from '@trek/shared';
+import { bookSticker, type BookStickerDef } from '@trek/shared/stickers';
+import type { CSSProperties } from 'react';
+
+/**
+ * A sticker, drawn: its layers as one inline SVG in the sticker's own box,
+ * scaled to the frame by the viewBox, so every layer stays a vector path in
+ * the print and in the page image the assistant reads.
+ *
+ * The drawing keeps its proportions inside whatever frame it is given (meet),
+ * the way an icon does: a lemon stretched to twice its width stops being a
+ * lemon. A flip mirrors the drawing inside the frame, so the frame, its
+ * handles and its rotation stay where they were.
+ *
+ * A sticker this build's library does not hold draws nothing. Only a newer
+ * book can carry one, and a book that is newer than this reader is opened
+ * read-only (book-schema-rev.ts), so nothing is lost by not drawing it.
+ */
+
+/** The drawing alone, for the page, the panel's tiles and the inspector. */
+export function StickerArt({
+  def,
+  colors = [],
+  flipX = false,
+}: {
+  def: BookStickerDef;
+  colors?: readonly string[];
+  flipX?: boolean;
+}) {
+  const [w, h] = def.box;
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${w} ${h}`}
+      preserveAspectRatio="xMidYMid meet"
+      aria-hidden
+      style={{ display: 'block', overflow: 'visible', transform: flipX ? 'scaleX(-1)' : undefined }}
+    >
+      {def.layers.map((layer, i) => {
+        const { color, opacity } = bookStickerLayerPaint(layer, def.slots, colors);
+        const alpha = opacity < 1 ? opacity : undefined;
+        return layer.w ? (
+          <path
+            // A sticker's layers never reorder: their place in the list is their identity.
+            key={i}
+            d={layer.d}
+            fill="none"
+            stroke={color}
+            strokeOpacity={alpha}
+            strokeWidth={layer.w}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        ) : (
+          <path key={i} d={layer.d} fill={color} fillOpacity={alpha} fillRule={layer.eo ? 'evenodd' : undefined} />
+        );
+      })}
+    </svg>
+  );
+}
+
+/** A sticker element on the page, in its frame. */
+export function StickerView({ el, frameStyle }: { el: BookStickerElement; frameStyle: CSSProperties }) {
+  const def = bookSticker(el.stickerId);
+  if (!def) return null;
+  return (
+    <div style={frameStyle}>
+      <StickerArt def={def} colors={el.colors} flipX={el.flipX} />
+    </div>
+  );
+}

client/src/components/Studio/StudioAssistantPanel.test.tsx

@@ -22,6 +22,8 @@ import { chatOf, useAssistantStore } from '../../store/assistantStore';
 import StudioAssistantPanel, { StudioAssistantColumn, StudioAssistantToggle } from './StudioAssistantPanel';
 import type { StudioAssistant } from './useStudioAssistant';
 
+/** The assistant's surface is loaded lazily, which can outlast findBy's default second on CI. */
+const LAZY = { timeout: 10_000 };
 const JOURNEY = 12;
 const KEY = assistantChatKey({ kind: 'journey', journeyId: JOURNEY });
 const INITIAL = useAssistantStore.getState();
@@ -75,7 +77,8 @@ describe('StudioAssistantPanel', () => {
     render(<StudioAssistantPanel assistant={assistant()} title="Lisbon" />);
 
     expect(screen.getByRole('complementary', { name: 'Book assistant' })).toBeInTheDocument();
-    expect(await screen.findByText('What should the book look like?')).toBeInTheDocument();
+    // The chat is a lazy chunk; on a busy runner it can take longer than findBy's default second.
+    expect(await screen.findByText('What should the book look like?', undefined, LAZY)).toBeInTheDocument();
     const notice = screen.getByRole('note');
     expect(notice.textContent).toContain('Only that page goes to Anthropic');
 
@@ -97,7 +100,8 @@ describe('StudioAssistantPanel', () => {
 
     useAssistantStore.setState({ status: { ...STATUS, studioImagesAcked: true } });
     render(<StudioAssistantPanel assistant={assistant()} title="Lisbon" />);
-    expect(await screen.findByText('What should the book look like?')).toBeInTheDocument();
+    // The chat is a lazy chunk; on a busy runner it can take longer than findBy's default second.
+    expect(await screen.findByText('What should the book look like?', undefined, LAZY)).toBeInTheDocument();
     expect(screen.queryByRole('note')).toBeNull();
   });
 
@@ -144,7 +148,8 @@ describe('StudioAssistantPanel', () => {
   it('FE-STUDIO-ASTPANEL-005: the journey chat offers no trip notes, which only a trip turn reads', async () => {
     render(<StudioAssistantPanel assistant={assistant()} title="Lisbon" />);
 
-    expect(await screen.findByText('What should the book look like?')).toBeInTheDocument();
+    // The chat is a lazy chunk; on a busy runner it can take longer than findBy's default second.
+    expect(await screen.findByText('What should the book look like?', undefined, LAZY)).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Recent chats' })).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Trip notes' })).toBeNull();
   });
@@ -175,7 +180,8 @@ describe('StudioAssistantPanel', () => {
     });
     render(<StudioAssistantPanel assistant={assistant()} title="Lisbon" />);
 
-    expect(await screen.findByText('What should the book look like?')).toBeInTheDocument();
+    // The chat is a lazy chunk; on a busy runner it can take longer than findBy's default second.
+    expect(await screen.findByText('What should the book look like?', undefined, LAZY)).toBeInTheDocument();
     expect(screen.queryByRole('note')).toBeNull();
     expect(screen.queryByRole('button', { name: 'Show it pages' })).toBeNull();
   });
@@ -207,7 +213,8 @@ describe('StudioAssistantPanel', () => {
 
     render(<StudioAssistantColumn assistant={assistant()} />);
     expect(screen.getByRole('complementary', { name: 'Book assistant' })).toBeInTheDocument();
-    expect(await screen.findByText('What should the book look like?')).toBeInTheDocument();
+    // The chat is a lazy chunk; on a busy runner it can take longer than findBy's default second.
+    expect(await screen.findByText('What should the book look like?', undefined, LAZY)).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: 'Journey' })).toBeInTheDocument();
   });
 });

client/src/components/Studio/StudioCanvas.tsx

@@ -9,6 +9,7 @@ import { fontStack } from './bookFonts'
 import { useSpreadInteraction, type HandleId } from './useSpreadInteraction'
 import { useStudioStore } from '../../store/studioStore'
 import { useTranslation } from '../../i18n'
+import { STICKER_DRAG_TYPE, stickerDropped } from './stickerLibrary'
 
 const HANDLES: HandleId[] = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w']
 
@@ -196,6 +197,12 @@ export function StudioCanvas({
       onPointerUp={finish}
       onPointerCancel={finish}
       onDragOver={e => {
+        // A sticker from its panel lands where it is let go; it fills no frame.
+        if (e.dataTransfer.types.includes(STICKER_DRAG_TYPE)) {
+          e.preventDefault()
+          e.dataTransfer.dropEffect = 'copy'
+          return
+        }
         const fromPanel = e.dataTransfer.types.includes('application/x-trek-photo')
         // A file drag is only claimed when somebody is there to take it; for a
         // viewer the browser keeps its default and opens the picture itself.
@@ -209,6 +216,12 @@ export function StudioCanvas({
       }}
       onDragLeave={() => { setDropTarget(null); setFileOver(false) }}
       onDrop={e => {
+        const sticker = stickerDropped(e.dataTransfer.getData(STICKER_DRAG_TYPE), page, single, pointInMm(e))
+        if (sticker) {
+          e.preventDefault()
+          addElement(spreadIndex, sticker)
+          return
+        }
         const raw = e.dataTransfer.getData('application/x-trek-photo')
         const files = Array.from(e.dataTransfer.files ?? [])
         if (!raw && !(files.length && onDropFiles)) return

client/src/components/Studio/StudioInspector.tsx

@@ -9,6 +9,7 @@ import { photoSrc } from './bookRender'
 import { FRAME_SHAPES, SHAPE_GROUPS } from './shapes'
 import { ShapeGlyph } from './StudioElementsPanel'
 import { TravelInspector } from './StudioTravelInspector'
+import { StudioStickerInspector } from './StudioStickerInspector'
 import { Swatches } from './StudioSwatches'
 import { formatBookCoords } from '@trek/shared'
 import { iconComponent, iconLabel, searchIcons } from './iconLibrary'
@@ -650,6 +651,8 @@ export function StudioInspector({
           </>
         )}
 
+        {el.kind === 'sticker' && <StudioStickerInspector el={el} set={set} t={t} />}
+
         <TravelInspector el={el} stats={stats} path={path} set={set} t={t} locale={locale} />
 
         {/*

client/src/components/Studio/StudioSidebar.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   Camera, Check, ChevronDown, ImagePlus, ChevronUp, Compass, Copy, FileDown, Files, ImageIcon, LayoutTemplate,
-  Plus, Search, Shapes, Trash2, Upload, X,
+  Plus, Search, Shapes, Sticker, Trash2, Upload, X,
 } from 'lucide-react'
 import type { BookElement, BookPageSetup, JourneyStats } from '@trek/shared'
 import { useElementSize } from '../../hooks/useElementSize'
@@ -21,6 +21,7 @@ import {
 import { MOOD_CONFIG, WEATHER_CONFIG } from '../../pages/journeyDetail/JourneyDetailPage.constants'
 import { PanelHead as Head } from './StudioPanelHead'
 import { StudioElementsPanel } from './StudioElementsPanel'
+import { StudioStickersPanel } from './StudioStickersPanel'
 import { StudioTravelPanel } from './StudioTravelPanel'
 import { StudioSavedLayouts } from './StudioSavedLayouts'
 import { MAX_SPREAD_FILE_BYTES, importSpread } from './spreadFile'
@@ -39,7 +40,7 @@ import type { StudioUploader } from './studioUpload'
  * costs 52px and gives the panel the room a photo browser actually needs.
  */
 
-type Section = 'pages' | 'content' | 'elements' | 'travel' | 'templates'
+type Section = 'pages' | 'content' | 'elements' | 'stickers' | 'travel' | 'templates'
 
 export interface JourneySource {
   entries: {
@@ -118,6 +119,7 @@ export function StudioSidebar({
     { id: 'pages', icon: Files, labelKey: 'journey.studio.pages' },
     { id: 'content', icon: ImageIcon, labelKey: 'journey.studio.content' },
     { id: 'elements', icon: Shapes, labelKey: 'journey.studio.elements' },
+    { id: 'stickers', icon: Sticker, labelKey: 'journey.studio.stickers' },
     { id: 'travel', icon: Compass, labelKey: 'journey.studio.travel' },
     { id: 'templates', icon: LayoutTemplate, labelKey: 'journey.studio.templates' },
   ]
@@ -146,6 +148,7 @@ export function StudioSidebar({
             providers={providers} onBrowseProvider={onBrowseProvider} />
         )}
         {section === 'elements' && <StudioElementsPanel page={page} t={t} />}
+        {section === 'stickers' && <StudioStickersPanel page={page} t={t} />}
         {section === 'travel' && (
           <StudioTravelPanel
             page={page}

client/src/components/Studio/StudioStickerInspector.tsx

@@ -0,0 +1,103 @@
+import { bookStickerSlotColor, type BookElement, type BookStickerElement } from '@trek/shared';
+import { bookSticker } from '@trek/shared/stickers';
+import { RotateCcw, RotateCw } from 'lucide-react';
+
+import { Line, NumField, Section, Switch } from './StudioControls';
+import { Swatches } from './StudioSwatches';
+import { stickerLabel, turned, withSlotColor } from './stickerLibrary';
+
+/**
+ * The inspector's part for a sticker: its colours slot by slot, and how it
+ * lies on the page (mirrored, turned, faded).
+ *
+ * Every slot is offered with the colour it shows now, the sticker's own until
+ * somebody picks another, and choosing one writes the colours of the slots
+ * before it as well, so the list the document keeps always reads in slot order.
+ * Turning is here as well as in the folded position numbers because a sticker
+ * is the one element people set at an angle as a matter of course.
+ */
+
+type Translate = (k: string, params?: Record<string, string | number>) => string;
+
+/** A quarter of a right angle and a little: what a sticker is tipped by, a step at a time. */
+const TURN_STEP = 15;
+
+export function StudioStickerInspector({
+  el,
+  set,
+  t,
+}: {
+  el: BookStickerElement;
+  set: (patch: Partial<BookElement>) => void;
+  t: Translate;
+}) {
+  const def = bookSticker(el.stickerId);
+  return (
+    <>
+      <Section
+        label={t('journey.studio.stickerColours')}
+        hint={def ? stickerLabel(t, def.id) : t('journey.studio.stickerMissing')}
+      >
+        {def?.slots.map((slot, i) => (
+          <Line key={slot.name} label={t('journey.studio.stickerSlot', { index: i + 1 })} wide>
+            <Swatches
+              value={bookStickerSlotColor(def.slots, el.colors, i)}
+              onPick={(color) => set({ colors: withSlotColor(el, def.slots, i, color) })}
+            />
+          </Line>
+        ))}
+        {el.colors.length > 0 && (
+          <div className="st-row" style={{ marginTop: 8 }}>
+            <button type="button" className="st-chip" onClick={() => set({ colors: [] })}>
+              {t('journey.studio.stickerResetColours')}
+            </button>
+          </div>
+        )}
+      </Section>
+
+      <Section label={t('journey.studio.stickerPlacement')}>
+        <Switch label={t('journey.studio.stickerFlip')} on={el.flipX} onToggle={() => set({ flipX: !el.flipX })} />
+        <div className="st-row" style={{ marginTop: 10, alignItems: 'flex-end' }}>
+          <button
+            type="button"
+            className="st-chip is-icon"
+            onClick={() => set({ rotation: turned(el.rotation, -TURN_STEP) })}
+            title={t('journey.studio.stickerTurnLeft')}
+            aria-label={t('journey.studio.stickerTurnLeft')}
+          >
+            <RotateCcw size={14} />
+          </button>
+          <button
+            type="button"
+            className="st-chip is-icon"
+            onClick={() => set({ rotation: turned(el.rotation, TURN_STEP) })}
+            title={t('journey.studio.stickerTurnRight')}
+            aria-label={t('journey.studio.stickerTurnRight')}
+          >
+            <RotateCw size={14} />
+          </button>
+        </div>
+        <div className="st-grid2" style={{ marginTop: 10 }}>
+          <NumField
+            label={t('journey.studio.rotation')}
+            value={el.rotation}
+            min={-180}
+            max={180}
+            step={1}
+            unit="°"
+            onChange={(v) => set({ rotation: v })}
+          />
+          <NumField
+            label={t('journey.studio.opacity')}
+            value={Math.round(el.opacity * 100)}
+            min={0}
+            max={100}
+            step={5}
+            unit="%"
+            onChange={(v) => set({ opacity: Math.min(1, Math.max(0, v / 100)) })}
+          />
+        </div>
+      </Section>
+    </>
+  );
+}

client/src/components/Studio/StudioStickersPanel.tsx

@@ -0,0 +1,160 @@
+import { BOOK_STICKER_THEMES, type BookPageSetup, type BookStickerTheme } from '@trek/shared';
+import { bookStickersOf, type BookStickerDef } from '@trek/shared/stickers';
+import { Search, X } from 'lucide-react';
+import { useMemo, useState, type DragEvent } from 'react';
+
+import { useStudioStore } from '../../store/studioStore';
+import { StickerArt } from './StickerView';
+import { PanelHead } from './StudioPanelHead';
+import {
+  STICKER_DRAG_TYPE,
+  matchStickers,
+  newStickerElement,
+  readRecentStickers,
+  rememberSticker,
+  stickerLabel,
+  stickerThemeLabel,
+} from './stickerLibrary';
+
+/**
+ * The sticker library, as a section of the rail: illustrations to put on a
+ * page, grouped by theme, searchable in the reader's language, with the ones
+ * this viewer placed last on a shelf of their own.
+ *
+ * A click places a sticker in the middle of the page, a drag places it where
+ * it is let go. Either way it arrives selected, so the inspector beside the
+ * page is where it is recoloured, flipped and turned.
+ */
+
+type Translate = (k: string, params?: Record<string, string | number>) => string;
+
+function StickerTile({ def, t, onPick }: { def: BookStickerDef; t: Translate; onPick: (def: BookStickerDef) => void }) {
+  const label = stickerLabel(t, def.id);
+  const onDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    e.dataTransfer.setData(STICKER_DRAG_TYPE, def.id);
+    e.dataTransfer.effectAllowed = 'copy';
+  };
+  return (
+    <button
+      type="button"
+      className="st-shape-btn is-glyph"
+      draggable
+      onDragStart={onDragStart}
+      onClick={() => onPick(def)}
+      title={label}
+      aria-label={label}
+      style={{ cursor: 'grab' }}
+    >
+      <StickerArt def={def} />
+    </button>
+  );
+}
+
+function StickerGrid({
+  list,
+  t,
+  onPick,
+}: {
+  list: readonly BookStickerDef[];
+  t: Translate;
+  onPick: (def: BookStickerDef) => void;
+}) {
+  return (
+    <div className="st-shape-grid">
+      {list.map((def) => (
+        <StickerTile key={def.id} def={def} t={t} onPick={onPick} />
+      ))}
+    </div>
+  );
+}
+
+export function StudioStickersPanel({ page, t }: { page: BookPageSetup; t: Translate }) {
+  const [query, setQuery] = useState('');
+  const [theme, setTheme] = useState<BookStickerTheme | null>(null);
+  const [recent, setRecent] = useState<BookStickerDef[]>(readRecentStickers);
+  const addElement = useStudioStore((s) => s.addElement);
+  const active = useStudioStore((s) => s.activeSpread);
+  const role = useStudioStore((s) => s.doc?.spreads[s.activeSpread]?.role);
+  const single = role !== undefined && role !== 'inner';
+
+  const matches = useMemo(() => matchStickers(query, theme, t), [query, theme, t]);
+  const browsing = !query.trim() && theme === null;
+
+  const place = (def: BookStickerDef) => {
+    addElement(active, newStickerElement(def, page, single));
+    setRecent(rememberSticker(def.id));
+  };
+
+  return (
+    <>
+      <PanelHead label={t('journey.studio.stickers')} count={browsing ? undefined : matches.length} />
+      <div className="st-search">
+        <Search size={14} />
+        <input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={t('journey.studio.searchStickers')}
+          aria-label={t('journey.studio.searchStickers')}
+          spellCheck={false}
+        />
+        {query && (
+          <button type="button" onClick={() => setQuery('')} aria-label={t('common.clear')}>
+            <X size={13} />
+          </button>
+        )}
+      </div>
+
+      <div className="st-panel-scroll">
+        <div className="st-section">
+          <div className="st-row" role="radiogroup" aria-label={t('journey.studio.stickerThemes')}>
+            <button
+              type="button"
+              role="radio"
+              aria-checked={theme === null}
+              className={`st-chip ${theme === null ? 'is-on' : ''}`}
+              onClick={() => setTheme(null)}
+            >
+              {t('journey.studio.stickersAll')}
+            </button>
+            {BOOK_STICKER_THEMES.map((id) => (
+              <button
+                type="button"
+                key={id}
+                role="radio"
+                aria-checked={theme === id}
+                className={`st-chip ${theme === id ? 'is-on' : ''}`}
+                onClick={() => setTheme(theme === id ? null : id)}
+              >
+                {stickerThemeLabel(t, id)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {browsing && recent.length > 0 && (
+          <div className="st-section">
+            <div className="st-section-label">{t('journey.studio.stickersRecent')}</div>
+            <StickerGrid list={recent} t={t} onPick={place} />
+          </div>
+        )}
+
+        {/* Browsing, the library by theme; searching or filtered, one grid of what matches. */}
+        {browsing ? (
+          BOOK_STICKER_THEMES.map((id) => (
+            <div className="st-section" key={id}>
+              <div className="st-section-label">{stickerThemeLabel(t, id)}</div>
+              <StickerGrid list={bookStickersOf(id)} t={t} onPick={place} />
+            </div>
+          ))
+        ) : (
+          <div className="st-section">
+            <StickerGrid list={matches} t={t} onPick={place} />
+            {!matches.length && <p className="st-hint">{t('journey.studio.noMatches')}</p>}
+          </div>
+        )}
+
+        <p className="st-hint">{t('journey.studio.stickersHint')}</p>
+      </div>
+    </>
+  );
+}

client/src/components/Studio/iconLibrary.test.ts

@@ -0,0 +1,29 @@
+/**
+ * FE-STUDIO-ICON-001 to FE-STUDIO-ICON-002
+ *
+ * The icons the book engine takes (BOOK_ICON_NAMES in @trek/shared) are the
+ * drawings the Studio's icon tab offers, no more and no fewer: one the engine
+ * took that this lucide does not have would print as the fallback glyph, and
+ * one the tab offers that the engine refused would be a drawing a person can
+ * place and the assistant cannot. When lucide-react moves, run
+ * `node scripts/gen-book-icon-names.mjs` in shared/ and this passes again.
+ */
+import { BOOK_DESIGN_ICONS, BOOK_ICON_NAMES } from '@trek/shared';
+import { describe, expect, it } from 'vitest';
+
+import { FEATURED_ICONS, ICON_NAMES } from './iconLibrary';
+
+describe('the icons the book engine takes', () => {
+  it('FE-STUDIO-ICON-001: are every drawing the icon tab offers, and nothing it does not', () => {
+    // `Icon` is the component every drawing is built on, not a drawing.
+    const offered = ICON_NAMES.filter((name) => name !== 'Icon');
+    const missing = offered.filter((name) => !BOOK_ICON_NAMES.has(name));
+    const extra = [...BOOK_ICON_NAMES].filter((name) => !offered.includes(name));
+    expect({ missing, extra }).toEqual({ missing: [], extra: [] });
+  });
+
+  it('FE-STUDIO-ICON-002: hold the whole travel shelf the tab opens on', () => {
+    expect(BOOK_DESIGN_ICONS.filter((name) => !BOOK_ICON_NAMES.has(name))).toEqual([]);
+    expect(FEATURED_ICONS).toEqual([...BOOK_DESIGN_ICONS]);
+  });
+});

client/src/components/Studio/iconLibrary.ts

@@ -60,9 +60,10 @@ export const ICON_NAMES: string[] = buildNames()
  * of them quietly drops it instead of drawing a fallback in the shelf.
  */
 /*
- * The shelf itself lives in @trek/shared (book-icons.ts), because the book
- * engine places icons from the same list: the assistant may only name a
- * drawing a person could pick here.
+ * The shelf itself lives in @trek/shared (book-icons.ts), beside the whole
+ * list the book engine takes (BOOK_ICON_NAMES): the assistant may name any
+ * drawing a person could pick here, and iconLibrary.test.ts holds that list
+ * to ICON_NAMES.
  */
 const FEATURED: readonly string[] = BOOK_DESIGN_ICONS
 

client/src/components/Studio/printReady.test.ts

@@ -0,0 +1,75 @@
+/**
+ * FE-STUDIO-PRINT-001 to FE-STUDIO-PRINT-004
+ *
+ * When the print view of a book may be printed: every picture in, the SVG
+ * ones too wherever they sit (a map marker, a photo behind a clip path), and
+ * a ceiling that gives a book of many photographs longer before the Save
+ * button gives up waiting.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { printReadyCeilingMs, svgImagesToWait, whenReady } from './printReady';
+
+const SVG = 'http://www.w3.org/2000/svg';
+const XLINK = 'http://www.w3.org/1999/xlink';
+
+/** A print document as the frame holds it, built from markup. */
+function printDoc(markup: string): Document {
+  const doc = document.implementation.createHTMLDocument('print');
+  doc.body.innerHTML = markup;
+  return doc;
+}
+
+/** An iframe whose document and window are the given ones, as the print view's frame is once it loaded. */
+function frameOf(doc: Document, win: Partial<Window> = {}): HTMLIFrameElement {
+  const iframe = document.createElement('iframe');
+  Object.defineProperty(iframe, 'contentDocument', { value: doc, configurable: true });
+  Object.defineProperty(iframe, 'contentWindow', { value: win, configurable: true });
+  return iframe;
+}
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('the pictures to wait for', () => {
+  it('FE-STUDIO-PRINT-001: finds an SVG image inside a clip path and in the defs, not only a marker photo', () => {
+    const doc = printDoc(
+      `<svg xmlns="${SVG}"><defs><clipPath id="c"><image href="/a.jpg"/></clipPath>` +
+        `<image id="d" href="/b.jpg"/></defs><image href="/c.jpg"/></svg>`
+    );
+    expect(svgImagesToWait(doc).map((el) => el.getAttribute('href'))).toEqual(['/a.jpg', '/b.jpg', '/c.jpg']);
+  });
+
+  it('FE-STUDIO-PRINT-002: takes an xlink source, and leaves out an image that names none and would never load', () => {
+    const doc = printDoc(`<svg xmlns="${SVG}"><image/></svg>`);
+    const linked = doc.createElementNS(SVG, 'image');
+    linked.setAttributeNS(XLINK, 'xlink:href', '/x.jpg');
+    doc.querySelector('svg')?.appendChild(linked);
+    expect(svgImagesToWait(doc)).toEqual([linked]);
+  });
+});
+
+describe('the ceiling', () => {
+  it('FE-STUDIO-PRINT-003: waits eight seconds for an ordinary book and fifteen for one of more than 40 photos', () => {
+    expect(printReadyCeilingMs(0)).toBe(8000);
+    expect(printReadyCeilingMs(40)).toBe(8000);
+    expect(printReadyCeilingMs(41)).toBe(15000);
+  });
+
+  it('FE-STUDIO-PRINT-004: holds a large book past eight seconds while an image is still loading', async () => {
+    vi.useFakeTimers();
+    const many = Array.from({ length: 41 }, (_, i) => `<image href="/p${i}.jpg"/>`).join('');
+    const doc = printDoc(`<svg xmlns="${SVG}">${many}</svg>`);
+    let ready = false;
+    // A window without its own timers: the wait falls back to the global one, which the fake timers drive.
+    void whenReady(frameOf(doc)).then(() => {
+      ready = true;
+    });
+
+    await vi.advanceTimersByTimeAsync(8100);
+    expect(ready).toBe(false);
+    await vi.advanceTimersByTimeAsync(7000);
+    expect(ready).toBe(true);
+  });
+});

client/src/components/Studio/printReady.ts

@@ -0,0 +1,77 @@
+/**
+ * When the print view of a book is actually printable.
+ *
+ * Both halves matter and neither is covered by the load event: a photograph
+ * still decoding prints as an empty box, and a face still loading prints in the
+ * fallback, the exact substitution the bundled typefaces exist to prevent.
+ */
+
+/** How long the print view waits at most, and the photo count past which a book gets the longer wait. */
+const PRINT_READY = {
+  ceilingMs: 8000,
+  largeCeilingMs: 15000,
+  largeBookPhotos: 40,
+} as const;
+
+/**
+ * The longest the Save button stays off for a book of `photos` pictures. A
+ * book of a few dozen photographs from a slow provider can take longer than
+ * eight seconds to decode; one that has not finished must not go to the press.
+ */
+export function printReadyCeilingMs(photos: number): number {
+  return photos > PRINT_READY.largeBookPhotos ? PRINT_READY.largeCeilingMs : PRINT_READY.ceilingMs;
+}
+
+/** What `whenReady` reads off the print document: its `<img>` elements, its SVG and its fonts. */
+interface PrintDocument {
+  images: ArrayLike<Element & { complete?: boolean }>;
+  querySelectorAll?: (selector: string) => ArrayLike<Element>;
+  fonts?: { ready: Promise<unknown> };
+}
+
+const XLINK = 'http://www.w3.org/1999/xlink';
+
+/**
+ * The SVG pictures to wait for: every `<image>` that names a source, wherever
+ * it sits. `doc.images` does not collect them, and they are not only the
+ * photographs in a map's markers: a photo cut to a mask or set behind clipped
+ * type is an `<image>` inside a `<clipPath>` or `<defs>`, which the selector
+ * reaches just the same. One that names no source would never fire an event,
+ * so it is left out rather than left to hold the button until the ceiling.
+ */
+export function svgImagesToWait(doc: PrintDocument): Element[] {
+  const found = Array.from(doc.querySelectorAll?.('image') ?? []);
+  return found.filter((el) => !!(el.getAttribute('href') || el.getAttributeNS(XLINK, 'href')));
+}
+
+/** Resolves when the element has loaded or failed: a picture that will not load must not hold the button hostage. */
+function settle(el: Element): Promise<void> {
+  return new Promise<void>((resolve) => {
+    el.addEventListener('load', () => resolve(), { once: true });
+    el.addEventListener('error', () => resolve(), { once: true });
+  });
+}
+
+/**
+ * Wait until the print view's pictures and faces are in, or until the
+ * ceiling, which rises for a book with many photographs. Without `complete`
+ * on an SVG image there is no way to tell one that is still coming from one
+ * whose events fired before this ran, and a Save button that never enables is
+ * worse than a marker that prints blank.
+ */
+export async function whenReady(iframe: HTMLIFrameElement): Promise<void> {
+  const win = iframe.contentWindow;
+  const doc = iframe.contentDocument as PrintDocument | null;
+  if (!win || !doc) return;
+
+  const imgs = Array.from(doc.images);
+  const svg = svgImagesToWait(doc);
+  const images = imgs.map((img) => (img.complete ? Promise.resolve() : settle(img)));
+
+  const wait = win.setTimeout?.bind(win) ?? setTimeout;
+  const ceiling = new Promise<void>((resolve) => {
+    wait(resolve, printReadyCeilingMs(imgs.length + svg.length));
+  });
+
+  await Promise.race([Promise.all([...images, ...svg.map(settle), doc.fonts?.ready ?? Promise.resolve()]), ceiling]);
+}

client/src/components/Studio/printSheets.ts

@@ -23,6 +23,8 @@
  * standalone PWA. An overlay with a `srcdoc` iframe works everywhere.
  */
 
+import { whenReady } from './printReady'
+
 /*
  * The only literal colours in Studio, and deliberately so.
  *
@@ -254,47 +256,3 @@ ${singleRule(input)}
 
   return close
 }
-
-/**
- * When the document is actually printable.
- *
- * Both halves matter and neither is covered by the load event: a photograph
- * still decoding prints as an empty box, and a face still loading prints in the
- * fallback — the exact substitution the bundled typefaces exist to prevent.
- */
-async function whenReady(iframe: HTMLIFrameElement): Promise<void> {
-  const win = iframe.contentWindow
-  const doc = iframe.contentDocument
-  if (!win || !doc) return
-
-  const settle = (el: Element) => new Promise<void>(resolve => {
-    // A picture that will not load must not hold the button hostage — better a
-    // book with one gap than a dialog that never finishes.
-    el.addEventListener('load', () => resolve(), { once: true })
-    el.addEventListener('error', () => resolve(), { once: true })
-  })
-
-  const images = Array.from(doc.images).map(img => (img.complete ? Promise.resolve() : settle(img)))
-
-  /*
-   * The photographs inside the map's markers are SVG `<image>`, which
-   * `doc.images` does not collect and which has no `complete` to ask, so there
-   * is nothing to do but wait on the events. Missing them meant a book could go
-   * to print with its route beads still blank.
-   */
-  const svgImages = Array.from(doc.querySelectorAll?.('image') ?? []).map(settle)
-
-  /*
-   * And a ceiling over the lot. Without `complete` to fall back on there is no
-   * way to tell a picture that is still coming from one whose events already
-   * fired before this ran, and a Save button that never enables is worse than a
-   * marker that prints blank.
-   */
-  const wait = win.setTimeout?.bind(win) ?? setTimeout
-  const ceiling = new Promise<void>(resolve => { wait(resolve, 8000) })
-
-  await Promise.race([
-    Promise.all([...images, ...svgImages, doc.fonts?.ready ?? Promise.resolve()]),
-    ceiling,
-  ])
-}

client/src/components/Studio/stickerLibrary.test.ts

@@ -0,0 +1,111 @@
+import { BOOK_STICKER_THEMES } from '@trek/shared';
+import en from '@trek/shared/i18n/en';
+import { BOOK_STICKERS, bookSticker } from '@trek/shared/stickers';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  MAX_RECENT_STICKERS,
+  matchStickers,
+  newStickerElement,
+  readRecentStickers,
+  rememberSticker,
+  stickerDropped,
+  stickerLabel,
+  stickerThemeLabel,
+} from './stickerLibrary';
+
+/**
+ * The Studio's side of the sticker library: every sticker and theme has a name
+ * in en (the key the i18n check lets through as a template, see
+ * client/scripts/i18n-keys.mjs), the search finds a sticker by its name in the
+ * reader's language and by the library's English tags, the recent shelf
+ * survives a reload and shrugs off storage it cannot use, and a new sticker
+ * lands where it was asked to.
+ */
+
+const page = { pageWidth: 210, pageHeight: 210 };
+const echo = (k: string) => k;
+const strings = en as Record<string, string>;
+
+afterEach(() => {
+  window.localStorage.clear();
+  vi.restoreAllMocks();
+});
+
+describe('names', () => {
+  it('names every sticker of the library and every theme in en', () => {
+    for (const s of BOOK_STICKERS) expect(strings[stickerLabel(echo, s.id)], s.id).toEqual(expect.any(String));
+    for (const theme of BOOK_STICKER_THEMES) {
+      expect(strings[stickerThemeLabel(echo, theme)], theme).toEqual(expect.any(String));
+    }
+  });
+});
+
+describe('matchStickers', () => {
+  /** The en names, but the lemon in German: the reader's word for one sticker. */
+  const german = (k: string) => (k === 'journey.studio.sticker.lemon' ? 'Zitrone' : (strings[k] ?? k));
+
+  it('lists a theme, or the whole library, when nothing is typed', () => {
+    expect(matchStickers('', null, echo)).toHaveLength(BOOK_STICKERS.length);
+    expect(matchStickers('  ', 'food', echo).every((s) => s.theme === 'food')).toBe(true);
+  });
+
+  it('finds a sticker by its name in the reader language first, then by the English tags', () => {
+    expect(matchStickers('zitrone', null, german)[0]?.id).toBe('lemon');
+    // The names that say lemon come first, then what the English tags find, the lemon itself among them.
+    const english = matchStickers('lemon', null, german).map((s) => s.id);
+    expect(english.slice(0, 2)).toEqual(['lemonBranch', 'lemonVase']);
+    expect(english).toContain('lemon');
+    expect(new Set(english).size).toBe(english.length);
+    expect(matchStickers('lemon', 'food', german)).toEqual([]);
+  });
+});
+
+describe('the recent shelf', () => {
+  it('keeps the stickers placed last, newest first, without repeats, up to its size', () => {
+    expect(readRecentStickers()).toEqual([]);
+    rememberSticker('lemon');
+    rememberSticker('sun');
+    expect(rememberSticker('lemon').map((s) => s.id)).toEqual(['lemon', 'sun']);
+    for (const s of BOOK_STICKERS.slice(0, 12)) rememberSticker(s.id);
+    expect(readRecentStickers()).toHaveLength(MAX_RECENT_STICKERS);
+    expect(readRecentStickers()[0]?.id).toBe(BOOK_STICKERS[11]?.id);
+  });
+
+  it('starts empty from storage it did not write or cannot read, and leaves out ids it does not know', () => {
+    window.localStorage.setItem('trek.studio.recentStickers', '{nope');
+    expect(readRecentStickers()).toEqual([]);
+    window.localStorage.setItem('trek.studio.recentStickers', '{"a":1}');
+    expect(readRecentStickers()).toEqual([]);
+    window.localStorage.setItem('trek.studio.recentStickers', '["sun","unicornCastle",3]');
+    expect(readRecentStickers().map((s) => s.id)).toEqual(['sun']);
+    vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+      throw new Error('denied');
+    });
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new Error('denied');
+    });
+    expect(readRecentStickers()).toEqual([]);
+    expect(rememberSticker('sun').map((s) => s.id)).toEqual(['sun']);
+  });
+});
+
+describe('a new sticker', () => {
+  const lemon = bookSticker('lemon');
+  if (!lemon) throw new Error('the library holds a lemon');
+
+  it('arrives centred on the right-hand page of a spread, or on a single page, at the panel size', () => {
+    const onSpread = newStickerElement(lemon, page, false);
+    expect(onSpread).toMatchObject({ kind: 'sticker', stickerId: 'lemon', colors: [], flipX: false });
+    expect(onSpread.frame).toEqual({ x: 283.5, y: 79.8, w: 63, h: 50.4 });
+    expect(newStickerElement(lemon, page, true).frame.x).toBe(73.5);
+    expect(newStickerElement(lemon, page, false, { x: 50, y: 50 }).frame).toMatchObject({ x: 18.5, y: 24.8 });
+  });
+
+  it('comes from a drop that carries a sticker the library holds, and goes on the shelf', () => {
+    expect(stickerDropped('', page, false, { x: 0, y: 0 })).toBeNull();
+    expect(stickerDropped('unicornCastle', page, false, { x: 0, y: 0 })).toBeNull();
+    expect(stickerDropped('sun', page, true, { x: 100, y: 100 })?.frame).toMatchObject({ x: 68.5, y: 68.5 });
+    expect(readRecentStickers().map((s) => s.id)).toEqual(['sun']);
+  });
+});

client/src/components/Studio/stickerLibrary.ts

@@ -0,0 +1,145 @@
+import {
+  bookElementId,
+  bookStickerElement,
+  bookStickerSize,
+  bookStickerSlotColor,
+  type BookPageSetup,
+  type BookStickerElement,
+  type BookStickerSlot,
+  type BookStickerTheme,
+} from '@trek/shared';
+import { BOOK_STICKERS, bookSticker, searchBookStickers, type BookStickerDef } from '@trek/shared/stickers';
+
+/**
+ * The Studio's side of the sticker library: the words each sticker is shown
+ * and found by in the reader's language, the shelf of recently used ones, and
+ * a new sticker element where it was clicked or dropped.
+ *
+ * The drawings themselves come from `@trek/shared/stickers`, which only the
+ * Studio's chunk imports (this file, StickerView, the panel), so the library
+ * arrives with the editor and never with the app shell.
+ */
+
+/** Translates a key; the panel and the inspector pass the Studio's `t`. */
+type Translate = (key: string) => string;
+
+/** The drag the panel starts and the canvas takes: the sticker id as plain text under its own type. */
+export const STICKER_DRAG_TYPE = 'application/x-trek-sticker';
+
+/**
+ * A sticker's name in the reader's language (studioStickers.ts in every
+ * locale): every id of the library has one, which stickerLibrary.test.ts holds.
+ */
+export const stickerLabel = (t: Translate, id: string) => t(`journey.studio.sticker.${id}`);
+
+/** A theme's name in the reader's language. */
+export const stickerThemeLabel = (t: Translate, theme: BookStickerTheme) => t(`journey.studio.stickerTheme.${theme}`);
+
+const fold = (s: string) => s.toLocaleLowerCase().normalize('NFKD').replace(/[̀-ͯ]/g, '');
+
+/**
+ * Stickers matching what was typed, in one theme or all: the reader's own word
+ * for a sticker first (its label), then the library's English search over ids,
+ * tags and descriptions, so "Zitrone" finds the lemon in German and "lemon"
+ * finds it everywhere.
+ */
+export function matchStickers(query: string, theme: BookStickerTheme | null, t: Translate): BookStickerDef[] {
+  const words = fold(query.trim());
+  const pool = theme ? BOOK_STICKERS.filter((s) => s.theme === theme) : BOOK_STICKERS;
+  if (!words) return [...pool];
+  const byLabel = pool.filter((s) => fold(stickerLabel(t, s.id)).includes(words));
+  const byTags = searchBookStickers({ query: words, theme: theme ?? undefined });
+  const seen = new Set(byLabel.map((s) => s.id));
+  return [...byLabel, ...byTags.filter((s) => !seen.has(s.id))];
+}
+
+const RECENT_STORAGE = 'trek.studio.recentStickers';
+/** How many recently used stickers the shelf holds: one row of the panel's grid, three times over. */
+export const MAX_RECENT_STICKERS = 9;
+
+/** The stickers this viewer placed last, newest first; empty where storage is refused or holds nonsense. */
+export function readRecentStickers(): BookStickerDef[] {
+  let ids: unknown;
+  try {
+    ids = JSON.parse(window.localStorage.getItem(RECENT_STORAGE) ?? '[]');
+  } catch {
+    // Storage refused (a private window) or a value it did not write: the shelf starts empty.
+    return [];
+  }
+  if (!Array.isArray(ids)) return [];
+  return ids.flatMap((id) => {
+    const def = typeof id === 'string' ? bookSticker(id) : undefined;
+    return def ? [def] : [];
+  });
+}
+
+/** Puts a sticker at the front of the recent shelf and answers the shelf as it is now. */
+export function rememberSticker(id: string): BookStickerDef[] {
+  const next = [
+    id,
+    ...readRecentStickers()
+      .map((s) => s.id)
+      .filter((other) => other !== id),
+  ].slice(0, MAX_RECENT_STICKERS);
+  try {
+    window.localStorage.setItem(RECENT_STORAGE, JSON.stringify(next));
+  } catch {
+    // Storage refused: the shelf is this visit's only, which is all it promises.
+  }
+  return next.flatMap((x) => bookSticker(x) ?? []);
+}
+
+/**
+ * A new sticker element at the panel's size: centred on `at` (where it was
+ * dropped), else on the page, the right-hand one of a double spread so it
+ * never lands in the fold.
+ */
+export function newStickerElement(
+  def: BookStickerDef,
+  page: Pick<BookPageSetup, 'pageWidth' | 'pageHeight'>,
+  single: boolean,
+  at?: { x: number; y: number }
+): BookStickerElement {
+  const { w, h } = bookStickerSize(def.box, page);
+  const cx = at?.x ?? (single ? page.pageWidth / 2 : page.pageWidth * 1.5);
+  const cy = at?.y ?? page.pageHeight / 2;
+  const round = (v: number) => Math.round(v * 100) / 100;
+  return bookStickerElement(def, { x: round(cx - w / 2), y: round(cy - h / 2), w, h }, bookElementId('k'));
+}
+
+/**
+ * The sticker a drop onto the page carries, centred where it was let go and
+ * put on the recent shelf; null for a drop that carries none (a photo, a file)
+ * or an id the library does not hold.
+ */
+export function stickerDropped(
+  id: string,
+  page: Pick<BookPageSetup, 'pageWidth' | 'pageHeight'>,
+  single: boolean,
+  at: { x: number; y: number }
+): BookStickerElement | null {
+  const def = id ? bookSticker(id) : undefined;
+  if (!def) return null;
+  rememberSticker(def.id);
+  return newStickerElement(def, page, single, at);
+}
+
+/** Turned by `by` degrees, kept between -180 and 180 the way the canvas keeps it. */
+export function turned(rotation: number, by: number): number {
+  let next = (rotation + by) % 360;
+  if (next > 180) next -= 360;
+  if (next < -180) next += 360;
+  return Math.round(next * 10) / 10;
+}
+
+/** The colours with slot `slot` set to `color`, the slots before it filled with what they show now. */
+export function withSlotColor(
+  el: BookStickerElement,
+  slots: readonly BookStickerSlot[],
+  slot: number,
+  color: string
+): string[] {
+  const named = slots.map((_, i) => bookStickerSlotColor(slots, el.colors, i));
+  named[slot] = color;
+  return named.slice(0, Math.max(el.colors.length, slot + 1));
+}

client/src/components/Studio/useBookStore.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { BookDocument, BookRecord } from '@trek/shared'
-import { normalizeBookDocument } from '@trek/shared'
+import { BOOK_SCHEMA_NEWER_CODE, readBookDocument, stampBookSchemaRev } from '@trek/shared'
 import { journeyApi } from '../../api/client'
 import { addListener, removeListener } from '../../api/websocket'
 
@@ -54,6 +54,16 @@ import { addListener, removeListener } from '../../api/websocket'
  * either: it is remembered and read once that work has reached the server,
  * because the save response and the broadcast travel on different channels and
  * either can arrive first.
+ *
+ * ── Why a book from a newer Studio is never written ───────────────────────
+ *
+ * A document says which revision of the format wrote it (book-schema-rev.ts).
+ * This build reads a newer one as far as it can, and what it cannot read is
+ * already gone from the copy it holds: saving that copy would delete the rest
+ * for everyone. So such a book is shown and never written, the same way a
+ * viewer's is, until a reload brings the Studio that wrote it. The server
+ * refuses the save as well, which covers a tab that loaded the book before the
+ * newer Studio saved it.
  */
 
 /** How long the document has to stay still before it is written. */
@@ -69,6 +79,8 @@ export type SaveState =
   | { status: 'conflict'; current: BookRecord }
   /** The journey is open to this user, but they may not write it (role 'viewer'). */
   | { status: 'readonly' }
+  /** The book was saved by a newer Studio than this one: shown, never written, until a reload. */
+  | { status: 'newer' }
   | { status: 'error' }
 
 /** What the editor needs to know about a version it is handed from elsewhere. */
@@ -176,7 +188,12 @@ export function useBookStore(
          * agreed document by identity, so a consumer that normalised on its own
          * would hand back a different object and turn every open into a save.
          */
-        const book = res.book ? { ...res.book, document: normalizeBookDocument(res.book.document) } : null
+        const read = res.book ? readBookDocument(res.book.document) : null
+        const book = res.book && read ? { ...res.book, document: read.document } : null
+        if (read?.newer) {
+          blocked.current = true
+          setState({ status: 'newer' })
+        }
         setRecord(book)
         version.current = book?.version ?? null
         bookId.current = book?.id ?? null
@@ -201,7 +218,8 @@ export function useBookStore(
     try {
       const saved = await journeyApi.saveBook(journeyId, {
         title: next.title,
-        document: next.document,
+        // Stamped on the way out only: `synced` below keeps the editor's own object.
+        document: stampBookSchemaRev(next.document),
         baseVersion: version.current ?? undefined,
       })
       setRecord(saved)
@@ -217,8 +235,12 @@ export function useBookStore(
        * not need a second request: the editor can offer to take their version
        * or keep going from here, and either way it can say whose work it is.
        */
-      const res = (err as { response?: { status?: number; data?: { current?: BookRecord } } }).response
-      if (res?.status === 409 && res.data?.current) {
+      const res = (err as { response?: { status?: number; data?: { current?: BookRecord; code?: string } } }).response
+      if (res?.status === 409 && res.data?.code === BOOK_SCHEMA_NEWER_CODE) {
+        // A newer Studio saved the book since this tab read it: nothing here may be written over it.
+        blocked.current = true
+        setState({ status: 'newer' })
+      } else if (res?.status === 409 && res.data?.current) {
         blocked.current = true
         setState({ status: 'conflict', current: res.data.current })
       } else if (res?.status === 403) {
@@ -305,15 +327,15 @@ export function useBookStore(
 
   /** Take the other version, discarding the local one. */
   const acceptTheirs = useCallback((current: BookRecord) => {
-    const document = normalizeBookDocument(current.document)
-    blocked.current = false
+    const { document, newer } = readBookDocument(current.document)
+    blocked.current = newer
     setRecord({ ...current, document })
     version.current = current.version
     bookId.current = current.id
     synced.current = document
     latest.current = document
     pending.current = null
-    setState({ status: 'idle' })
+    setState(newer ? { status: 'newer' } : { status: 'idle' })
     // A save from elsewhere passed over while the conflict was open may be
     // newer than the record it carried.
     catchUp.current()
@@ -388,8 +410,12 @@ export function useBookStore(
           if (sameBook && !isNewer(res.book.version)) return
           // Normalised for the same reason the initial load is: a document
           // written by an older build is missing whatever the contract has
-          // gained since.
-          const document = normalizeBookDocument(res.book.document)
+          // gained since. One written by a newer build is shown and held.
+          const { document, newer } = readBookDocument(res.book.document)
+          if (newer) {
+            blocked.current = true
+            setState({ status: 'newer' })
+          }
           const held = version.current
           const taken = res.book.version
           // Undoable only when every save it folds in, past the version held,

client/src/pages/TripPlannerPage.tsx

@@ -625,7 +625,7 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
             <TourPlannerMapStage
               tripId={tripId} mapTileUrl={mapTileUrl} leftHidden={leftHidden} rightHidden={rightHidden} t={t}
               tourPlanner={tourPlanner} tourMap={tourMap} locationSearch={locationSearch} canPlaceEdit={canPlaceEdit}
-              leftPanelPx={leftPanelPx} rightPanelPx={rightPanelPx}
+              leftPanelPx={leftPanelPx} rightPanelPx={rightPanelPx} assistantRoutes={assistantMap}
               onViewportChange={wandererBrowser.onViewportChange} paddleChecklist={pageState.paddleChecklist}
             />
             <div className="hidden md:block" style={{ position: 'absolute', left: 10, top: 10, bottom: 10, zIndex: 20 }}>

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

@@ -68,7 +68,7 @@ function seedJourney() {
 beforeEach(() => {
   seedJourney()
   buildBook.mockClear()
-  useStudioStore.setState({ doc: null, selection: [], activeSpread: 0, past: [], future: [] })
+  useStudioStore.setState({ doc: null, selection: [], activeSpread: 0, past: [], future: [], readOnly: false })
   vi.spyOn(journeyApi, 'getBook').mockResolvedValue({ book: null } as never)
   vi.spyOn(journeyApi, 'saveBook').mockResolvedValue({} as never)
   vi.spyOn(journeyApi, 'stats').mockResolvedValue(stats() as never)
@@ -295,6 +295,31 @@ describe('pictures and stops', () => {
 
     expect(result.current.canEdit).toBe(false)
   })
+
+  /*
+   * A book a newer Studio saved has already lost, in this copy, what this build
+   * cannot read. It is shown and never changed, for every role, and let go once
+   * Studio closes so the next book opens as it should.
+   */
+  it('FE-STUDIO-REV-001: holds a book a newer Studio saved read-only until Studio closes', async () => {
+    const document = { ...shared.blankBook({ title: 'Iceland' }), schemaRev: shared.BOOK_SCHEMA_REV + 1 }
+    vi.mocked(journeyApi.getBook).mockResolvedValue({
+      book: { id: 3, journeyId: 9, title: 'Iceland', version: 4, updatedAt: '', updatedBy: 1, document },
+    } as never)
+    const { result, unmount } = await mountStudio()
+
+    await waitFor(() => expect(result.current.saveState.status).toBe('newer'))
+    expect(result.current.canEdit).toBe(false)
+    expect(result.current.canUndo).toBe(false)
+    expect(useStudioStore.getState().readOnly).toBe(true)
+    const before = useStudioStore.getState().doc
+    act(() => { useStudioStore.getState().commit(d => ({ ...d, title: 'edited' })) })
+    expect(useStudioStore.getState().doc).toBe(before)
+    expect(journeyApi.saveBook).not.toHaveBeenCalled()
+
+    unmount()
+    expect(useStudioStore.getState().readOnly).toBe(false)
+  })
 })
 
 /**
@@ -355,7 +380,7 @@ describe('saves from elsewhere', () => {
     const { ok } = await openAndFlush()
     expect(ok).toBe(true)
     const calls = vi.mocked(journeyApi.saveBook).mock.calls
-    expect(calls[calls.length - 1][1].document.title).toBe('edited')
+    expect((calls[calls.length - 1][1].document as { title?: string }).title).toBe('edited')
   })
 
   it('FE-STUDIO-WIRE-002: a save of this user keeps the page by its id and is one undo away', async () => {

client/src/pages/journeyStudio/useJourneyStudio.ts

@@ -78,6 +78,7 @@ export function useJourneyStudio() {
   const past = useStudioStore(s => s.past)
   const future = useStudioStore(s => s.future)
   const commit = useStudioStore(s => s.commit)
+  const setReadOnly = useStudioStore(s => s.setReadOnly)
 
   const journeyId = Number(id)
   const backTo = `/journey/${id}`
@@ -117,6 +118,21 @@ export function useJourneyStudio() {
   // every render — depending on that made the save effect fire per render.
   const { queueSave, saveNow, loaded: bookLoaded } = book
 
+  /*
+   * A book a newer Studio saved is shown and never changed here.
+   *
+   * This build read it as far as it could, and what it could not read is gone
+   * from its copy, so an edit made now could only ever be saved by deleting
+   * the rest. The store refuses edits while this holds and the controls that
+   * add to the book go with `canEdit`; the save indicator asks for a reload.
+   * Released when Studio closes, so the next book opens as it should.
+   */
+  const newerBook = book.state.status === 'newer'
+  useEffect(() => {
+    setReadOnly(newerBook)
+    return () => setReadOnly(false)
+  }, [newerBook, setReadOnly])
+
   /*
    * Who else is in here, and where their pointers are.
    *
@@ -595,9 +611,10 @@ export function useJourneyStudio() {
   /*
    * A viewer may open the book and change nothing: not the pages, not the
    * journey behind them. The server refuses either anyway; this keeps the
-   * controls that would only ever answer with a 403 off the screen.
+   * controls that would only ever answer with a 403 off the screen. A book a
+   * newer Studio saved is held the same way, for everyone (see `newerBook`).
    */
-  const canEdit = (journey?.my_role ?? 'owner') !== 'viewer'
+  const canEdit = (journey?.my_role ?? 'owner') !== 'viewer' && !newerBook
   const toast = useToast()
 
   /**
@@ -798,8 +815,8 @@ export function useJourneyStudio() {
 
     undo,
     redo,
-    canUndo: past.length > 0,
-    canRedo: future.length > 0,
+    canUndo: !newerBook && past.length > 0,
+    canRedo: !newerBook && future.length > 0,
 
     pxPerMm: PX_PER_MM,
   }

client/src/pages/tripPlanner/TourPlannerMapStage.tsx

@@ -8,6 +8,7 @@ import { useOutsidePressGuard } from '../../components/Ferratas/useOutsidePressG
 import { MAP_LAYER_SWITCHER_INSET, MAP_ROUND_CONTROL_SIZE } from '../../components/Map/MapLayerSwitcher';
 import { MapUndoHint } from '../../components/Map/MapUndoHint';
 import { MapViewAuto as MapView } from '../../components/Map/MapViewAuto';
+import type { AssistantMapProps } from '../../components/Map/mapViewContract';
 import LocationSelect from '../../components/Planner/LocationSelect';
 import { ChecklistObstaclePanel } from '../../components/Tours/paddle/ObstacleDecisionPanel';
 import PaddleObstacleOverlay from '../../components/Tours/paddle/PaddleObstacleOverlay';
@@ -74,6 +75,11 @@ export interface TourPlannerMapStageProps
   onViewportChange?: (bounds: FerrataBbox) => void;
   /** The open paddle tour's checklist (PAD-06): its part for the picked object rides in the object's map card. */
   paddleChecklist?: PageState['paddleChecklist'];
+  /** The routes the assistant's cards show and its camera, as on the plan's map, so a proposed hike shows here too. */
+  assistantRoutes?: Pick<
+    AssistantMapProps,
+    'assistantCamera' | 'assistantRouteLines' | 'onAssistantRouteHover' | 'onAssistantRoutePoint'
+  >;
 }
 
 /** What the map reads of the tour on screen: a GPX file viewed as it came in has its analysis and no points. */
@@ -104,6 +110,7 @@ export function TourPlannerMapStage({
   rightPanelPx,
   onViewportChange,
   paddleChecklist,
+  assistantRoutes,
 }: Readonly<TourPlannerMapStageProps>): ReactElement {
   const [terrain3d, setTerrain3d] = useState(false);
   // How high the 3D map's controls reach: one row, or two once the grade legend moved above the dock.
@@ -285,6 +292,7 @@ export function TourPlannerMapStage({
             onViewportChange={viewportChanged}
             placeTool={placeTool}
             {...poiMarkers}
+            {...assistantRoutes}
           />
         )}
       </div>

client/src/pages/tripPlanner/useAssistantPlaceDraft.ts

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+
+import { useAssistantStore } from '../../store/assistantStore';
+import type { PlaceFormOpeners } from './usePlaceFormOpeners';
+
+/**
+ * A place the assistant found, opened in the place form when its card is
+ * clicked: filled in with what the search knew, the details column reading
+ * the rest (photos, hours, description) by its Google id. The form is the
+ * planner's own, so the place is saved as any other, on the day in focus.
+ */
+export function useAssistantPlaceDraft(tripId: number, openAddPlaceFromPoi: PlaceFormOpeners['openAddPlaceFromPoi']) {
+  const draft = useAssistantStore((s) => (s.placeDraft?.tripId === tripId ? s.placeDraft : null));
+  const takePlaceDraft = useAssistantStore((s) => s.takePlaceDraft);
+
+  useEffect(() => {
+    if (!draft) return;
+    takePlaceDraft(draft.seq);
+    const { place } = draft;
+    openAddPlaceFromPoi(
+      {
+        lat: place.lat,
+        lng: place.lng,
+        name: place.name,
+        address: place.address,
+        website: null,
+        phone: null,
+        osm_id: place.osmId ?? '',
+        google_place_id: place.googlePlaceId,
+        poi_type: place.kind,
+      },
+      draft.dayId
+    );
+  }, [draft, openAddPlaceFromPoi, takePlaceDraft]);
+}

client/src/pages/tripPlanner/usePlaceFormOpeners.ts

@@ -76,7 +76,7 @@ export function usePlaceFormOpeners(options: PlaceFormOpenersOptions) {
   // Open the Add-Place form pre-filled from an OSM "explore" POI marker: all the
   // data already comes from the POI, so no reverse-geocode is needed.
   const openAddPlaceFromPoi = useCallback((
-    poi: { lat: number; lng: number; name: string; address: string | null; website: string | null; phone: string | null; osm_id: string; category?: string | null; poi_type?: string | null },
+    poi: { lat: number; lng: number; name: string; address: string | null; website: string | null; phone: string | null; osm_id: string; google_place_id?: string | null; category?: string | null; poi_type?: string | null },
     dayId?: number | null,
     /** Index within that day. Omitted, the place is appended, which is what every caller did before. */
     position?: number | null,
@@ -100,6 +100,7 @@ export function usePlaceFormOpeners(options: PlaceFormOpenersOptions) {
       // A plugin POI's `plugin:<pluginId>:<id>` rides along as it is. The server never
       // takes that prefix for a Google place id, so the details column makes no Google call.
       osm_id: poi.osm_id,
+      google_place_id: poi.google_place_id || undefined,
       // What the map search filed it under, so the form can preselect a category (#2282).
       category: poi.poi_type || poi.category || undefined,
       stop_type: stop?.stopType ?? null,

client/src/pages/tripPlanner/usePlannerDialogs.ts

@@ -27,7 +27,7 @@ export function usePlannerDialogs(options: PlannerDialogsOptions) {
   const { tripId, tripActions, searchParams, setSearchParams } = options
   const [showPlaceForm, setShowPlaceForm] = useState<boolean>(false)
   const [editingPlace, setEditingPlace] = useState<Place | null>(null)
-  const [prefillCoords, setPrefillCoords] = useState<{ lat: number; lng: number; name?: string; address?: string; website?: string; phone?: string; osm_id?: string; stop_type?: RoadtripStopType | null; duration_minutes?: number; category?: string } | null>(null)
+  const [prefillCoords, setPrefillCoords] = useState<{ lat: number; lng: number; name?: string; address?: string; website?: string; phone?: string; osm_id?: string; google_place_id?: string; stop_type?: RoadtripStopType | null; duration_minutes?: number; category?: string } | null>(null)
   const [editingAssignmentId, setEditingAssignmentId] = useState<number | null>(null)
   // Day context of the open form. Set only by the day-scoped entry points (the
   // mobile day toolbar, a long-press on the mobile map); every other opener

client/src/pages/tripPlanner/useTripPlanner.ts

@@ -52,6 +52,7 @@ import { usePlannerDialogs } from './usePlannerDialogs'
 import { usePlaceDeepLink } from './usePlaceDeepLink'
 import { useAssistantDeepLink } from './useAssistantDeepLink'
 import { useAssistantCompareView, useAssistantMapLink } from './useAssistantMapLink'
+import { useAssistantPlaceDraft } from './useAssistantPlaceDraft'
 import { usePlannerMapView } from './usePlannerMapView'
 import { useMapPlaces } from './useMapPlaces'
 import { useRoadtripFeed } from './useRoadtripFeed'
@@ -593,6 +594,7 @@ export function useTripPlanner() {
     setPrefillCoords, setEditingPlace, setEditingAssignmentId, setPlaceFormDayId, setPlaceFormPosition, setShowPlaceForm,
     roadtripActive, roadtripFeedActive, roadtripRoutes, roadtripCorridor, manualStopTargetFor, isTourPlace,
   })
+  useAssistantPlaceDraft(tripId, openAddPlaceFromPoi)
 
   const {
     handleReorder, handleReorderDays, handleUpdateDayTitle, handleMoveToDay, handleRemoveAssignment,

client/src/repo/aiConnectionsRepo.test.ts

@@ -79,7 +79,12 @@ describe('aiConnectionsRepo', () => {
   });
 
   it('FE-AI-CONN-REPO-004: reads and writes the admin settings and the instance connection', async () => {
-    const settings = { policy: 'user' as const, dailyTurns: 50, retention: { mode: 'forever' as const } };
+    const settings = {
+      policy: 'user' as const,
+      dailyTurns: 50,
+      webSearch: true,
+      retention: { mode: 'forever' as const },
+    };
     const connection: AiAdminConnectionResponse = {
       connection: {
         ...VIEW,
@@ -102,6 +107,7 @@ describe('aiConnectionsRepo', () => {
     await expect(aiConnectionsRepo.saveAdminSettings({ ...settings, dailyTurns: 20 })).resolves.toEqual({
       ...settings,
       dailyTurns: 20,
+      webSearch: true,
     });
     await expect(aiConnectionsRepo.adminConnection()).resolves.toEqual(connection);
     await expect(aiConnectionsRepo.adminModels()).resolves.toEqual([

client/src/store/assistantMessages.ts

@@ -63,6 +63,8 @@ export function applyChunk(
       ]);
     case 'data-trek-weather':
       return withCurrent(messages, now, (parts) => [...parts, { type: 'data-trek-weather', data: chunk.data }]);
+    case 'data-trek-sources':
+      return withCurrent(messages, now, (parts) => [...parts, { type: 'data-trek-sources', data: chunk.data }]);
     case 'data-trek-follow-ups':
       return withCurrent(messages, now, (parts) => [...parts, { type: 'data-trek-follow-ups', data: chunk.data }]);
     case 'data-trek-card':

client/src/store/assistantRouteModel.test.ts

@@ -1,5 +1,5 @@
 /**
- * FE-AI-ROUTE-001 to FE-AI-ROUTE-005
+ * FE-AI-ROUTE-001 to FE-AI-ROUTE-006
  *
  * Which routes of the chat's cards the plan's map draws, and how: changes
  * that still stand on the map with the way they replace, the cards of the
@@ -127,6 +127,20 @@ describe('assistantRouteModel', () => {
     expect(refs[1]?.card).toBe(SAVED);
   });
 
+  it('FE-AI-ROUTE-006: once one of the ways is taken into the trip, the answer draws none of them; a discarded take brings them back', () => {
+    const latest = message([...read('call_1', HIKE), ...read('call_2', GENTLE)], 'msg-1');
+    const take = (approval: Approval) => {
+      const parts = held('t1', PENDING, approval);
+      const change = parts[1] as Extract<AssistantMessagePart, { type: 'data-trek-change' }>;
+      change.data = { ...change.data, takenFrom: 'call_2' };
+      return message(parts, 'msg-2');
+    };
+    const waiting = routeRefs([latest, take({})], {}, NOBODY, LOOK, AS_WAYS);
+    expect(waiting.map((ref) => `${ref.toolCallId}:${ref.use}`)).toEqual(['t1:before', 't1:pending']);
+    const discarded = routeRefs([latest, take({ approved: false })], {}, NOBODY, LOOK, AS_WAYS);
+    expect(discarded.map((ref) => ref.toolCallId)).toEqual(['call_1', 'call_2']);
+  });
+
   it("FE-AI-ROUTE-003: lines lie in order (replaced way, others, the chosen way, the lit one) in their ways' colours", () => {
     const previous = { line: flat(HIKE), distanceM: 8000, ascentM: null, minutes: null };
     const messages = [

client/src/store/assistantRouteModel.ts

@@ -101,7 +101,8 @@ function standsOnMap(part: ToolCallPart, receipt: AssistantApplied | undefined,
 /**
  * The cards of the latest answer that draws any, laid out as the chat lays
  * them out: a group of several is a choice of ways, each with its letter, the
- * chosen one (by `picks`, else the first) picked. Older answers drop.
+ * chosen one (by `picks`, else the first) picked. Older answers drop, and so
+ * do the ways of a group once one of them was taken into the trip.
  */
 function lookRefs(
   messages: readonly AssistantMessage[],
@@ -111,6 +112,7 @@ function lookRefs(
   layout: AnswerLayout
 ): RouteRef[] {
   const chosenIds = new Set(Object.values(picks));
+  const taken = takenProposals(messages);
   for (let index = messages.length - 1; index >= 0; index--) {
     const answers = (messages[index]?.parts ?? []).flatMap((part): RouteCardEntry[] =>
       part.type === 'data-trek-card' && part.data.card && !changeIds.has(part.data.toolCallId)
@@ -121,6 +123,7 @@ function lookRefs(
     const drawn = new Set(lined.map((entry) => entry.toolCallId));
     if (drawn.size === 0) continue;
     return layout(answers).flatMap((group) => {
+      if (group.some((entry) => taken.has(entry.toolCallId))) return [];
       const ways = group.length >= 2;
       const chosen = group.find((entry) => chosenIds.has(entry.toolCallId)) ?? group[0];
       return group.flatMap((entry, position): RouteRef[] => {
@@ -133,6 +136,28 @@ function lookRefs(
   return [];
 }
 
+/**
+ * The proposals taken into the trip ("Plan this") and not discarded since:
+ * each stands as its change from then on, so its answer's ways leave the map.
+ */
+function takenProposals(messages: readonly AssistantMessage[]): Set<string> {
+  const dropped = new Set<string>();
+  for (const message of messages) {
+    for (const part of message.parts) {
+      if (part.type !== 'tool-call' || !part.approval) continue;
+      if (part.approval.approved === false || part.approval.resolution) dropped.add(part.toolCallId);
+    }
+  }
+  const taken = new Set<string>();
+  for (const message of messages) {
+    for (const part of message.parts) {
+      if (part.type !== 'data-trek-change' || !part.data.takenFrom) continue;
+      if (!dropped.has(part.data.toolCallId)) taken.add(part.data.takenFrom);
+    }
+  }
+  return taken;
+}
+
 /**
  * Every card of the chat the map draws now, in the part it plays: the
  * changes that still stand on the map (each with the way it replaces), then

client/src/store/assistantStore.ts

@@ -6,6 +6,7 @@ import {
   type AssistantDecision,
   type AssistantErrorCode,
   type AssistantFocus,
+  type AssistantFoundPlace,
   type AssistantMapView,
   type AssistantMention,
   type AssistantMessage,
@@ -149,6 +150,8 @@ interface AssistantState {
   routeFocus: { tripId: number; ref: string; focus: RouteProfileFocus; source: 'card' | 'map' } | null;
   /** A line a card asks the map to draw while the pointer rests on it (a day of a drive, a saved tour). */
   routePreview: { tripId: number; ref: string; lines: LatLng[][]; color: string } | null;
+  /** A found place to open in the planner's place form, filled in; `seq` tells a new one from the same place asked again. */
+  placeDraft: { tripId: number; seq: number; place: AssistantFoundPlace; dayId: number | null } | null;
   /** The route card the phone shows over the map. */
   routePeek: { tripId: number; toolCallId: string } | null;
   /** Where the floating window sits after its last move or resize, for the map to frame around it. */
@@ -207,6 +210,9 @@ interface AssistantState {
 
   setMapHover: (tripId: number, hoveredId: string | null, source: AssistantMapSource) => void;
   requestCamera: (tripId: number, points: LatLng[], mode: 'fit' | 'pan', why: 'user' | 'auto') => void;
+  /** Opens a found place in the planner's place form; the planner takes it with `takePlaceDraft`. */
+  openPlaceDraft: (tripId: number, place: AssistantFoundPlace, dayId: number | null) => void;
+  takePlaceDraft: (seq: number) => void;
   setPreviewPin: (preview: AssistantState['preview']) => void;
   setWindowRect: (rect: WindowRect | null) => void;
   setMapView: (mapView: AssistantState['mapView']) => void;
@@ -820,6 +826,11 @@ function mapActions(ctx: Ctx) {
     },
     requestCamera: (tripId: number, points: LatLng[], mode: 'fit' | 'pan', why: 'user' | 'auto') =>
       requestCameraOn(ctx, tripId, points, mode, why),
+    openPlaceDraft: (tripId: number, place: AssistantFoundPlace, dayId: number | null) =>
+      ctx.set({ placeDraft: { tripId, seq: (ctx.get().placeDraft?.seq ?? 0) + 1, place, dayId } }),
+    takePlaceDraft: (seq: number) => {
+      if (ctx.get().placeDraft?.seq === seq) ctx.set({ placeDraft: null });
+    },
     setPreviewPin: (preview: AssistantState['preview']) => ctx.set({ preview }),
     setWindowRect: (rect: WindowRect | null) => ctx.set({ windowRect: rect }),
     setMapView: (mapView: AssistantState['mapView']) => ctx.set({ mapView }),
@@ -923,6 +934,7 @@ export const useAssistantStore = create<AssistantState>((set, get) => {
     mapLink: null,
     camera: null,
     preview: null,
+    placeDraft: null,
     windowRect: null,
     mapView: null,
     studioHosts: {},

client/src/store/studioStore.readOnly.test.ts

@@ -0,0 +1,59 @@
+/**
+ * FE-STUDIO-READONLY-001 to FE-STUDIO-READONLY-002
+ *
+ * A book held as it is (one a newer Studio saved): every edit, undo and redo
+ * is refused while it holds, and a version from elsewhere is still taken, so
+ * the page on screen stays current.
+ */
+import { blankBook, type BookDocument } from '@trek/shared';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { useStudioStore } from './studioStore';
+
+const STUDIO = useStudioStore.getState();
+
+function book(title = 'Lisbon'): BookDocument {
+  let seq = 0;
+  return blankBook({ title, newId: (prefix) => `${prefix}-${++seq}` });
+}
+
+beforeEach(() => {
+  useStudioStore.setState({ ...STUDIO, doc: null, past: [], future: [], readOnly: false });
+});
+
+afterEach(() => {
+  useStudioStore.getState().setReadOnly(false);
+});
+
+describe('a book held as it is', () => {
+  it('FE-STUDIO-READONLY-001: refuses edits, undo and redo while held, and takes them again once let go', () => {
+    const store = useStudioStore.getState();
+    store.load(book());
+    store.commit((d) => ({ ...d, title: 'one' }));
+    const edited = useStudioStore.getState().doc;
+
+    store.setReadOnly(true);
+    store.commit((d) => ({ ...d, title: 'two' }));
+    store.apply((d) => ({ ...d, title: 'three' }));
+    store.undo();
+    expect(useStudioStore.getState().doc).toBe(edited);
+    expect(useStudioStore.getState().canUndo()).toBe(false);
+
+    store.setReadOnly(false);
+    expect(useStudioStore.getState().canUndo()).toBe(true);
+    store.undo();
+    expect(useStudioStore.getState().doc?.title).toBe('Lisbon');
+    expect(useStudioStore.getState().canRedo()).toBe(true);
+  });
+
+  it('FE-STUDIO-READONLY-002: still takes a version saved elsewhere, so the page shown stays current', () => {
+    const store = useStudioStore.getState();
+    store.load(book());
+    store.setReadOnly(true);
+    const theirs = book('Porto');
+    store.adoptRemote(theirs, { undoable: false });
+    expect(useStudioStore.getState().doc).toBe(theirs);
+    store.load(book('Faro'));
+    expect(useStudioStore.getState().doc?.title).toBe('Faro');
+  });
+});

client/src/store/studioStore.ts

@@ -37,6 +37,15 @@ interface StudioState {
    * 4.2). Not part of the book or its history; opening a book clears it.
    */
   hintSpread: string | null
+  /**
+   * Whether the open book is held as it is. True for a book a newer Studio
+   * saved (useBookStore's `newer`): this build has already dropped what
+   * it cannot read from its copy, so every edit, undo and redo is refused
+   * rather than shown as work that can never be saved. Loading and taking a
+   * remote version still work, so the page stays current while it is shown.
+   */
+  readOnly: boolean
+  setReadOnly: (readOnly: boolean) => void
 
   load: (doc: BookDocument) => void
   /**
@@ -135,7 +144,9 @@ export const useStudioStore = create<StudioState>((set, get) => ({
   gestureBase: null,
   clipboard: null,
   hintSpread: null,
+  readOnly: false,
 
+  setReadOnly: readOnly => set({ readOnly, gestureBase: null }),
   load: doc => set({ doc, selection: [], activeSpread: 0, past: [], future: [], gestureBase: null, hintSpread: null }),
   adoptRemote: (doc, opts) => set(s => {
     if (!s.doc) return { doc, selection: [], activeSpread: 0, past: [], future: [], gestureBase: null }
@@ -180,13 +191,13 @@ export const useStudioStore = create<StudioState>((set, get) => ({
   }),
 
   commit: fn => set(s => {
-    if (!s.doc) return {}
+    if (!s.doc || s.readOnly) return {}
     const next = fn(s.doc)
     if (next === s.doc) return {}
     return { doc: next, past: [...s.past, s.doc].slice(-HISTORY_LIMIT), future: [] }
   }),
 
-  apply: fn => set(s => (s.doc ? { doc: fn(s.doc) } : {})),
+  apply: fn => set(s => (s.doc && !s.readOnly ? { doc: fn(s.doc) } : {})),
 
   updateElement: (spreadIndex, id, patch) => get().apply(doc =>
     replaceSpread(doc, spreadIndex, sp => ({
@@ -420,16 +431,16 @@ export const useStudioStore = create<StudioState>((set, get) => ({
 
   undo: () => set(s => {
     const prev = s.past[s.past.length - 1]
-    if (!prev || !s.doc) return {}
+    if (!prev || !s.doc || s.readOnly) return {}
     return { doc: prev, past: s.past.slice(0, -1), future: [s.doc, ...s.future].slice(0, HISTORY_LIMIT), selection: [] }
   }),
 
   redo: () => set(s => {
     const next = s.future[0]
-    if (!next || !s.doc) return {}
+    if (!next || !s.doc || s.readOnly) return {}
     return { doc: next, future: s.future.slice(1), past: [...s.past, s.doc].slice(-HISTORY_LIMIT), selection: [] }
   }),
 
-  canUndo: () => get().past.length > 0,
-  canRedo: () => get().future.length > 0,
+  canUndo: () => !get().readOnly && get().past.length > 0,
+  canRedo: () => !get().readOnly && get().future.length > 0,
 }))

client/tests/unit/i18n/TranslationContext.test.tsx

@@ -145,6 +145,11 @@ describe('TranslationProvider', () => {
   });
 
   it('FE-COMP-I18NCTX-018: plural forms follow the language of the strings on screen, not the one still loading', async () => {
+    // The chunk is loaded here first: FE-COMP-I18NCTX-011a starts every locale at
+    // once without waiting, and the Russian one could otherwise queue behind the
+    // others past any timeout. The provider still switches asynchronously, so the
+    // first render below is English all the same.
+    await import('@trek/shared/i18n/ru');
     withLanguage('ru');
     render(<TranslationProvider><Probe tKey="places.count" params={{ count: 21 }} /></TranslationProvider>);
 

client/tests/unit/studio/SaveIndicator.test.tsx

@@ -99,3 +99,19 @@ describe('a conflict', () => {
     expect(screen.getByRole('alert')).toBeTruthy()
   })
 })
+
+describe('a book a newer Studio saved', () => {
+  /*
+   * Nothing done in this tab is kept until it reloads, so the state is loud
+   * like a conflict and offers the one way out there is.
+   */
+  it('is announced, says why, and reloads on request', () => {
+    const onReload = vi.fn()
+    draw({ status: 'newer' }, { onReload })
+
+    expect(screen.getByRole('alert')).toBeTruthy()
+    expect(screen.getByText('journey.studio.saveNewer')).toBeTruthy()
+    fireEvent.click(screen.getByText('journey.studio.saveReload'))
+    expect(onReload).toHaveBeenCalledTimes(1)
+  })
+})

client/tests/unit/studio/SpreadView.test.tsx

@@ -121,6 +121,17 @@ describe('photo frames', () => {
     expect(container.querySelector('img')).not.toBeNull()
   })
 
+  /*
+   * The print view lays every sheet out at once; a picture the browser put off
+   * until it scrolled into view is a picture missing from the PDF.
+   */
+  it('loads a photo lazily on the canvas and at once in print', () => {
+    const { container: canvas } = draw([photo()])
+    expect(canvas.querySelector('img')?.getAttribute('loading')).toBe('lazy')
+    const { container: printing } = draw([photo()], { print: true })
+    expect(printing.querySelector('img')?.getAttribute('loading')).toBe('eager')
+  })
+
   it('cuts a masked photo with an objectBoundingBox clip, so it follows a resize', () => {
     const { container } = draw([photo({ mask: 'heart' })])
     const clip = container.querySelector('clipPath')!

client/tests/unit/studio/stickerElement.test.tsx

@@ -0,0 +1,234 @@
+import type { BookDocument, BookElement, BookSpread } from '@trek/shared';
+import { bookPageSetupSchema, bookSpreadSchema, bookStickerElementSchema } from '@trek/shared';
+import { bookSticker } from '@trek/shared/stickers';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { SpreadView } from '../../../src/components/Studio/SpreadView';
+import { StudioCanvas } from '../../../src/components/Studio/StudioCanvas';
+import { StudioInspector } from '../../../src/components/Studio/StudioInspector';
+import { StudioStickersPanel } from '../../../src/components/Studio/StudioStickersPanel';
+import { STICKER_DRAG_TYPE, turned, withSlotColor } from '../../../src/components/Studio/stickerLibrary';
+import { useStudioStore } from '../../../src/store/studioStore';
+import { fireEvent, render, screen } from '../../helpers/render';
+
+/**
+ * The sticker element in the Studio: drawn on the page as an inline SVG of its
+ * layers in the colours it carries, mirrored when flipped, nothing at all for
+ * an id this build does not know; placed from its panel by a click or a drag;
+ * recoloured slot by slot, flipped and turned in the inspector.
+ */
+
+/** The value, or a failed test where there is none. */
+function must<T>(value: T | null | undefined): T {
+  if (value === null || value === undefined) throw new Error('expected a value');
+  return value;
+}
+
+const page = bookPageSetupSchema.parse({ preset: 'square-210', pageWidth: 210, pageHeight: 210, bleed: 3, safe: 5 });
+const FRAME = { x: 20, y: 30, w: 60, h: 48 };
+const t = (k: string, params?: Record<string, string | number>) => (params ? `${k} ${JSON.stringify(params)}` : k);
+
+const sticker = (over: Record<string, unknown> = {}): BookElement =>
+  bookStickerElementSchema.parse({
+    id: 'k1',
+    kind: 'sticker',
+    frame: FRAME,
+    stickerId: 'lemon',
+    ...over,
+  }) as BookElement;
+
+function draw(elements: BookElement[]) {
+  const spread: BookSpread = { id: 's1', role: 'inner', background: null, elements, parked: [], entryId: null };
+  return render(<SpreadView spread={spread} page={page} />);
+}
+
+function load(elements: BookElement[]) {
+  useStudioStore.getState().load({
+    version: 1,
+    title: 'T',
+    page,
+    spreads: [{ id: 'sp1', role: 'inner', background: null, elements, parked: [], entryId: null }],
+  } as BookDocument);
+  useStudioStore.getState().select(elements.slice(0, 1).map((e) => e.id));
+}
+
+const stored = () => must(must(useStudioStore.getState().doc).spreads[0]).elements;
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+describe('a sticker on the page', () => {
+  it('draws every layer of the drawing in its frame, kept in proportion', () => {
+    const { container } = draw([sticker()]);
+    const svg = must(container.querySelector('svg'));
+    const lemon = must(bookSticker('lemon'));
+    expect(svg.getAttribute('viewBox')).toBe(`0 0 ${lemon.box[0]} ${lemon.box[1]}`);
+    expect(svg.getAttribute('preserveAspectRatio')).toBe('xMidYMid meet');
+    expect(svg.querySelectorAll('path')).toHaveLength(lemon.layers.length);
+    const frame = svg.parentElement as HTMLElement;
+    expect([frame.style.left, frame.style.width]).toEqual(['20mm', '60mm']);
+  });
+
+  it('paints the slots in the colours the element carries, its own elsewhere, and mirrors it when flipped', () => {
+    const lemon = must(bookSticker('lemon'));
+    const { container } = draw([sticker({ colors: ['#123456'], flipX: true })]);
+    const fills = [...container.querySelectorAll('path')].map((p) => p.getAttribute('fill'));
+    expect(fills).toContain('#123456');
+    expect(fills).not.toContain(must(lemon.slots[0]).color);
+    expect(fills).toContain(must(lemon.slots[1]).color);
+    expect(must(container.querySelector('svg')).style.transform).toBe('scaleX(-1)');
+  });
+
+  it('strokes the line layers of a doodle with round ends', () => {
+    const { container } = draw([sticker({ stickerId: 'curlyArrow' })]);
+    const path = must(container.querySelector('path'));
+    expect([path.getAttribute('fill'), path.getAttribute('stroke-linecap')]).toEqual(['none', 'round']);
+  });
+
+  it('draws nothing for a sticker this library does not hold', () => {
+    const { container } = draw([sticker({ stickerId: 'unicornCastle' })]);
+    expect(container.querySelector('svg')).toBeNull();
+  });
+});
+
+describe('the stickers panel', () => {
+  beforeEach(() => load([]));
+
+  it('lists the library by theme and places a sticker in the middle of the right-hand page on a click', () => {
+    render(<StudioStickersPanel page={page} t={t} />);
+    fireEvent.click(screen.getByRole('button', { name: 'journey.studio.sticker.eiffelTower' }));
+    const placed = must(stored()[0]);
+    expect(placed).toMatchObject({ kind: 'sticker', stickerId: 'eiffelTower' });
+    expect(placed.frame.x + placed.frame.w / 2).toBeCloseTo(315, 1);
+    expect(useStudioStore.getState().selection).toEqual([placed.id]);
+    // It is on the recent shelf now, above the themes.
+    expect(screen.getByText('journey.studio.stickersRecent')).toBeTruthy();
+  });
+
+  it('filters by theme and by what is typed, and says when nothing matches', () => {
+    render(<StudioStickersPanel page={page} t={t} />);
+    fireEvent.click(screen.getByRole('radio', { name: 'journey.studio.stickerTheme.food' }));
+    expect(screen.getByRole('button', { name: 'journey.studio.sticker.croissant' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'journey.studio.sticker.eiffelTower' })).toBeNull();
+    fireEvent.click(screen.getByRole('radio', { name: 'journey.studio.stickersAll' }));
+    fireEvent.change(screen.getByRole('textbox', { name: 'journey.studio.searchStickers' }), {
+      target: { value: 'zzzz' },
+    });
+    expect(screen.getByText('journey.studio.noMatches')).toBeTruthy();
+  });
+
+  it('hands the sticker id to a drag', () => {
+    render(<StudioStickersPanel page={page} t={t} />);
+    const setData = vi.fn();
+    fireEvent.dragStart(screen.getByRole('button', { name: 'journey.studio.sticker.sun' }), {
+      dataTransfer: { setData, effectAllowed: '' },
+    });
+    expect(setData).toHaveBeenCalledWith(STICKER_DRAG_TYPE, 'sun');
+  });
+});
+
+describe('a sticker dropped on the sheet', () => {
+  it('lands centred where it is let go', () => {
+    const spread = bookSpreadSchema.parse({ id: 'sp-1', elements: [] });
+    const addElement = vi.fn();
+    const original = useStudioStore.getState().addElement;
+    useStudioStore.setState({ selection: [], addElement });
+    render(
+      <StudioCanvas
+        spread={spread}
+        spreadIndex={0}
+        page={page}
+        zoom={1}
+        pxPerMm={2}
+        bookView={false}
+        dropLabel="drop"
+        fileDropLabel="files"
+      />
+    );
+    const stage = document.querySelector('.st-stage') as HTMLElement;
+    const transfer = {
+      types: [STICKER_DRAG_TYPE],
+      files: [],
+      getData: (type: string) => (type === STICKER_DRAG_TYPE ? 'sun' : ''),
+      dropEffect: '',
+    };
+    fireEvent.dragOver(stage, { dataTransfer: transfer, clientX: 100, clientY: 100 });
+    fireEvent.drop(stage, { dataTransfer: transfer, clientX: 100, clientY: 100 });
+    expect(addElement).toHaveBeenCalledTimes(1);
+    const [index, el] = must(addElement.mock.calls[0]);
+    expect(index).toBe(0);
+    expect(el).toMatchObject({ kind: 'sticker', stickerId: 'sun', frame: { w: 63, h: 63 } });
+    useStudioStore.setState({ addElement: original });
+  });
+});
+
+describe('the sticker inspector', () => {
+  const inspector = () =>
+    render(
+      <StudioInspector
+        spreadIndex={0}
+        page={page}
+        stats={null}
+        path={[]}
+        source={{ entries: [], photos: [], photoEntries: {} }}
+        setPageNumbers={() => {}}
+        t={t}
+        locale="en"
+      />
+    );
+
+  it('recolours one slot, keeping the ones before it as they show, and puts the colours back', () => {
+    load([sticker()]);
+    const { container } = inspector();
+    const lines = container.querySelectorAll('.st-line');
+    expect(lines).toHaveLength(2);
+    const second = must(lines[1]).querySelector('input[type="color"]') as HTMLInputElement;
+    fireEvent.change(second, { target: { value: '#00ff00' } });
+    const lemon = must(bookSticker('lemon'));
+    expect(stored()[0]).toMatchObject({ colors: [must(lemon.slots[0]).color, '#00ff00'] });
+    fireEvent.click(screen.getByRole('button', { name: 'journey.studio.stickerResetColours' }));
+    expect(stored()[0]).toMatchObject({ colors: [] });
+  });
+
+  it('mirrors and turns the sticker a step at a time', () => {
+    load([sticker({ rotation: 170 })]);
+    inspector();
+    fireEvent.click(screen.getByRole('button', { name: 'journey.studio.stickerFlip' }));
+    expect(stored()[0]).toMatchObject({ flipX: true });
+    fireEvent.click(screen.getByRole('button', { name: 'journey.studio.stickerTurnRight' }));
+    expect(must(stored()[0]).rotation).toBe(-175);
+    fireEvent.click(screen.getByRole('button', { name: 'journey.studio.stickerTurnLeft' }));
+    expect(must(stored()[0]).rotation).toBe(170);
+  });
+
+  it('says so for a sticker the library does not hold, with nothing to recolour', () => {
+    load([sticker({ stickerId: 'unicornCastle' })]);
+    const { container } = inspector();
+    expect(screen.getByText('journey.studio.stickerMissing')).toBeTruthy();
+    expect(container.querySelectorAll('.st-line')).toHaveLength(0);
+  });
+});
+
+describe('the inspector helpers', () => {
+  it('turns within a half turn either way', () => {
+    expect(turned(170, 15)).toBe(-175);
+    expect(turned(-170, -15)).toBe(175);
+    expect(turned(0, 15)).toBe(15);
+  });
+
+  it('writes the slot colours in order, filling the slots before the one picked', () => {
+    const slots = [
+      { name: 'a', color: '#111111' },
+      { name: 'b', color: '#222222' },
+      { name: 'c', color: '#333333' },
+    ];
+    const el = bookStickerElementSchema.parse({ id: 'k', kind: 'sticker', frame: FRAME, stickerId: 'x' });
+    expect(withSlotColor(el, slots, 2, '#999999')).toEqual(['#111111', '#222222', '#999999']);
+    expect(withSlotColor({ ...el, colors: ['#aaaaaa', '#bbbbbb', '#cccccc'] }, slots, 0, '#999999')).toEqual([
+      '#999999',
+      '#bbbbbb',
+      '#cccccc',
+    ]);
+  });
+});

client/tests/unit/studio/useBookStore.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { act, renderHook } from '@testing-library/react'
-import type { BookDocument, BookRecord } from '@trek/shared'
+import { BOOK_SCHEMA_REV, type BookDocument, type BookRecord } from '@trek/shared'
 
 /**
  * Autosaving a Studio book (#1973).
@@ -776,3 +776,88 @@ describe('unmounting', () => {
     expect(api.saveBook).not.toHaveBeenCalled()
   })
 })
+
+// -- A book a newer Studio saved ----------------------------------------------
+
+/*
+ * This build reads such a book as far as it can, and what it cannot read is
+ * already gone from its copy. Showing it is fine; writing it would delete the
+ * rest for everyone, so nothing is written until a reload.
+ */
+describe('a book a newer Studio saved', () => {
+  const newer = (title = 'newer') => ({ ...doc(title), schemaRev: 99 }) as unknown as BookDocument
+
+  /** A 409 for a book a newer Studio saved since this tab read it. */
+  function newerError() {
+    return Object.assign(new Error('Request failed'), {
+      response: { status: 409, data: { error: 'Book was saved by a newer version of TREK Studio', code: 'book_schema_newer', schemaRev: 2 } },
+    })
+  }
+
+  it('FE-STUDIO-REV-002: opens it, says so, and writes nothing, not even on flush', async () => {
+    api.getBook.mockResolvedValue({ book: record({ version: 5, document: newer() }) })
+    const { result } = await mount()
+
+    expect(result.current.state.status).toBe('newer')
+    expect(result.current.record?.document.title).toBe('newer')
+    act(() => { result.current.queueSave(doc('edited'), 'T') })
+    await tick()
+    let ok: boolean | undefined
+    await act(async () => { ok = await result.current.flush() })
+
+    expect(ok).toBe(false)
+    expect(api.saveBook).not.toHaveBeenCalled()
+  })
+
+  it('FE-STUDIO-REV-003: stops on the server refusing a save over a newer book, and does not try again', async () => {
+    api.saveBook.mockRejectedValue(newerError())
+    const { result } = await mount()
+
+    act(() => { result.current.queueSave(doc('a'), 'T') })
+    await tick()
+    expect(result.current.state.status).toBe('newer')
+
+    act(() => { result.current.queueSave(doc('b'), 'T') })
+    await tick()
+    expect(api.saveBook).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-STUDIO-REV-004: shows a newer version another editor saved, and holds it the same way', async () => {
+    api.getBook.mockResolvedValue({ book: record({ version: 4, document: doc('ours') }) })
+    const onRemote = vi.fn()
+    const { result } = renderHook(() => useBookStore(9, onRemote))
+    await tick(0)
+    api.getBook.mockResolvedValue({ book: record({ version: 6, document: newer('theirs') }) })
+
+    await remoteSave(6)
+
+    expect(onRemote.mock.calls[0][0].title).toBe('theirs')
+    expect(result.current.state.status).toBe('newer')
+    act(() => { result.current.queueSave(doc('mine'), 'T') })
+    await tick()
+    expect(api.saveBook).not.toHaveBeenCalled()
+  })
+
+  it('FE-STUDIO-REV-005: taking their side of a conflict holds the book when theirs is newer', async () => {
+    const theirs = record({ version: 6, document: newer('theirs') })
+    api.saveBook.mockRejectedValueOnce(conflictError(theirs))
+    const { result } = await mount()
+
+    act(() => { result.current.queueSave(doc('mine'), 'T') })
+    await tick()
+    expect(result.current.state.status).toBe('conflict')
+
+    act(() => { result.current.acceptTheirs(theirs) })
+    expect(result.current.state.status).toBe('newer')
+  })
+
+  /* A book goes out stamped with the revision of the build that wrote it, so an older tab cannot save over it. */
+  it('FE-STUDIO-REV-006: sends a book stamped with the revision of this build', async () => {
+    const { result } = await mount()
+
+    act(() => { result.current.queueSave(doc('a'), 'T') })
+    await tick()
+
+    expect(api.saveBook.mock.calls[0][1].document.schemaRev).toBe(BOOK_SCHEMA_REV)
+  })
+})

knip.jsonc

@@ -61,6 +61,7 @@
         "src/index.ts",
         "src/roadtrip/planning.ts",
         "src/sanitize/sanitize.ts",
+        "src/book/stickers/index.ts",
         "src/i18n/index.ts",
         "src/i18n/*/index.ts",
         // open-request-schemas.d.mts types the .mjs script beside it.

scripts/ci/knip-baseline.json

@@ -173,7 +173,6 @@
     "client/src/pages/tripPlanner/plannerTypes.ts": 1,
     "client/src/pages/tripPlanner/useBookingEdits.ts": 1,
     "client/src/pages/tripPlanner/useDayPlanEdits.ts": 1,
-    "client/src/pages/tripPlanner/usePlaceFormOpeners.ts": 1,
     "client/src/pages/tripPlanner/useRoadtripAlternatives.ts": 1,
     "client/src/pages/tripPlanner/useRoadtripStopEdits.ts": 1,
     "client/src/push/webPush.ts": 1,

server/src/db/json-columns.ts

@@ -365,10 +365,17 @@ export const ASSISTANT_MESSAGE_PARTS_WRITE: JsonColumn<AssistantMessagePart[]> =
  * the provider's side. A broken row reads as none, and the history is rebuilt
  * from the parts instead.
  */
-const aiProviderStateSchema = z.object({
-  adapter: z.literal('openai-responses'),
-  items: z.array(z.record(z.string(), z.unknown())),
-});
+const aiProviderStateSchema = z.discriminatedUnion('adapter', [
+  z.object({
+    adapter: z.literal('openai-responses'),
+    items: z.array(z.record(z.string(), z.unknown())),
+  }),
+  // Anthropic's content blocks of an answer that searched the web, replayed with their search results.
+  z.object({
+    adapter: z.literal('anthropic-messages'),
+    blocks: z.array(z.record(z.string(), z.unknown())),
+  }),
+]);
 export type AiProviderState = z.infer<typeof aiProviderStateSchema>;
 
 export const ASSISTANT_PROVIDER_STATE: JsonColumn<AiProviderState | null> = {

server/src/nest/ai-connections/ai-chat-client.interface.ts

@@ -52,6 +52,14 @@ export interface AiChatRequest {
   tools: AiToolSpec[];
   /** Keeps a conversation on the provider's prompt cache (the thread id). */
   cacheKey?: string;
+  /** Lets the model search the web with its provider's own search; a client without one ignores it. */
+  webSearch?: boolean;
+}
+
+/** A page the model's answer draws on, from its web search. */
+export interface AiSource {
+  url: string;
+  title: string;
 }
 
 export type AiFinishReason = 'stop' | 'tool-calls' | 'length';
@@ -68,10 +76,16 @@ export type AiChatEvent =
   /** `cachedInputTokens` is the part of `inputTokens` the provider read from its prompt cache. */
   | { type: 'usage'; inputTokens: number; cachedInputTokens: number; outputTokens: number }
   | { type: 'provider-state'; state: AiProviderState }
+  /** The provider started a web search of its own; `query` where it says what it looks for. */
+  | { type: 'web-search'; query: string | null }
+  /** A page the answer cites, each once. */
+  | { type: 'source'; source: AiSource }
   | { type: 'finish'; reason: AiFinishReason };
 
 export interface AiChatClient {
   readonly kind: AiConnectionKind;
   readonly model: string;
+  /** Whether the provider can search the web itself when a request asks it to. */
+  readonly webSearch: boolean;
   stream(request: AiChatRequest, signal: AbortSignal): AsyncIterable<AiChatEvent>;
 }

server/src/nest/ai-connections/ai-settings.service.ts

@@ -8,7 +8,8 @@ import { randomUUID } from 'node:crypto';
 
 /**
  * The assistant's instance settings (`app_settings`): the policy, the daily
- * limit on the instance's connection and how long chats are kept. A stored
+ * limit on the instance's connection, how long chats are kept and whether it
+ * may search the web. A stored
  * value that does not read as what it should falls back to the default, so a
  * hand-edited row never switches the assistant to something nobody chose.
  */
@@ -26,6 +27,8 @@ export class AiSettingsService {
       policy: policy.success ? policy.data : AI_DEFAULT_POLICY,
       dailyTurns: Number.isInteger(turns) && turns >= 1 && turns <= 10_000 ? turns : AI_DEFAULT_DAILY_TURNS,
       retention: parseRetention(await this.settings.getAppSetting('ai_assistant_retention')),
+      // Off only when switched off: a missing or odd row leaves the search on, as it ships.
+      webSearch: (await this.settings.getAppSetting('ai_assistant_web_search')) !== 'false',
     };
   }
 
@@ -34,6 +37,7 @@ export class AiSettingsService {
       ai_assistant_policy: next.policy,
       ai_assistant_daily_turns: String(next.dailyTurns),
       ai_assistant_retention: JSON.stringify(next.retention),
+      ai_assistant_web_search: next.webSearch ? 'true' : 'false',
     });
     return this.read();
   }

server/src/nest/ai-connections/providers/anthropic-messages.client.ts

@@ -5,6 +5,8 @@ import type {
   AiChatRequest,
   AiFinishReason,
   AiImage,
+  AiProviderState,
+  AiSource,
   AiToolCall,
 } from '../ai-chat-client.interface';
 import { AI_BASE_URLS } from '../ai-connections.constants';
@@ -57,6 +59,8 @@ export function toAnthropicMessages(messages: AiChatMessage[]): AnthropicMessage
   for (const message of messages) {
     if (message.role === 'user') {
       push('user', [...(message.images ?? []).map(imageBlock), { type: 'text', text: message.text }]);
+    } else if (message.role === 'assistant' && message.providerState?.adapter === 'anthropic-messages') {
+      push('assistant', message.providerState.blocks.map(replayed));
     } else if (message.role === 'assistant') {
       push('assistant', [
         ...(message.text ? [{ type: 'text', text: message.text }] : []),
@@ -78,6 +82,18 @@ export function toAnthropicMessages(messages: AiChatMessage[]): AnthropicMessage
   return out;
 }
 
+/**
+ * A block of an answer as it goes back to the provider: as it came, but a text
+ * block without the citations it carried, which the provider checks against
+ * the search results and which the history needs no more than their words.
+ */
+function replayed(block: ContentBlock): ContentBlock {
+  return block.type === 'text' ? { type: 'text', text: asText(block.text) } : block;
+}
+
+/** Anthropic's own web search, a server tool; a few searches a step keep the turn short. */
+const WEB_SEARCH_TOOL = { type: 'web_search_20250305', name: 'web_search', max_uses: 5 } as const;
+
 /** The most cache breakpoints Anthropic takes in one request; the system blocks use the first ones. */
 const MAX_CACHE_BREAKPOINTS = 4;
 const CACHED = { type: 'ephemeral' } as const;
@@ -113,6 +129,7 @@ const STOP_REASONS: Record<string, AiFinishReason> = { tool_use: 'tool-calls', m
  */
 export class AnthropicMessagesClient implements AiChatClient {
   readonly kind = 'anthropic' as const;
+  readonly webSearch = true;
 
   constructor(
     readonly model: string,
@@ -132,13 +149,16 @@ export class AnthropicMessagesClient implements AiChatClient {
       stream: true,
       system,
       messages,
-      ...(request.tools.length > 0
+      ...(request.tools.length > 0 || request.webSearch
         ? {
-            tools: request.tools.map((tool) => ({
-              name: tool.name,
-              description: tool.description,
-              input_schema: toProviderSchema(tool.parameters, this.kind),
-            })),
+            tools: [
+              ...request.tools.map((tool) => ({
+                name: tool.name,
+                description: tool.description,
+                input_schema: toProviderSchema(tool.parameters, this.kind),
+              })),
+              ...(request.webSearch ? [WEB_SEARCH_TOOL] : []),
+            ],
           }
         : {}),
     };
@@ -164,8 +184,7 @@ export class AnthropicMessagesClient implements AiChatClient {
       const event = parseEventData(sse.data);
       if (!event) continue;
       if (event.type === 'error') throw providerFailure(this.kind, 0, errorCodeOf(event));
-      const out = turn.apply(event);
-      if (out) yield out;
+      yield* turn.apply(event);
     }
     if (!turn.finished) throw new AiProviderError('provider_unavailable', 0, true, undefined, 'stream_cut');
     yield {
@@ -174,21 +193,35 @@ export class AnthropicMessagesClient implements AiChatClient {
       cachedInputTokens: turn.cachedInputTokens,
       outputTokens: turn.outputTokens,
     };
+    const state = turn.state();
+    if (state) yield { type: 'provider-state', state };
     yield { type: 'finish', reason: turn.reason };
   }
 }
 
-/** What one streamed Messages API turn has said so far, fed one event at a time. */
+/** A content block while it streams: as it started, with the JSON of its input so far. */
+interface OpenBlock {
+  block: ContentBlock;
+  json: string;
+}
+
+/**
+ * What one streamed Messages API turn has said so far, fed one event at a
+ * time. It keeps every content block as it came, so an answer that searched
+ * the web can be replayed with its search and its results (state()); an
+ * answer that did not is rebuilt from its text and calls as before.
+ */
 class AnthropicTurn {
   inputTokens = 0;
   cachedInputTokens = 0;
   outputTokens = 0;
   reason: AiFinishReason = 'stop';
   finished = false;
-  private readonly blocks = new Map<number, { call?: Omit<AiToolCall, 'args'>; json: string }>();
+  private readonly blocks = new Map<number, OpenBlock>();
+  private readonly cited = new Set<string>();
+  private searched = false;
 
-  /** Takes one event in; answers what the caller learns from it now, if anything. */
-  apply(event: Record<string, unknown>): AiChatEvent | null {
+  *apply(event: Record<string, unknown>): Generator<AiChatEvent> {
     const index = asCount(event.index);
     switch (event.type) {
       case 'message_start': {
@@ -199,36 +232,70 @@ class AnthropicTurn {
           asCount(usage.cache_read_input_tokens);
         this.cachedInputTokens = asCount(usage.cache_read_input_tokens);
         this.outputTokens = asCount(usage.output_tokens);
-        return null;
+        return;
       }
       case 'content_block_start': {
-        const block = asRecord(event.content_block);
-        const call = block.type === 'tool_use' ? { id: asText(block.id), name: asText(block.name) } : undefined;
-        this.blocks.set(index, { call, json: '' });
-        return null;
+        const block = { ...asRecord(event.content_block) };
+        if (block.type === 'text') block.text = asText(block.text);
+        this.blocks.set(index, { block, json: '' });
+        return;
       }
       case 'content_block_delta': {
         const delta = asRecord(event.delta);
-        if (delta.type === 'text_delta' && asText(delta.text)) return { type: 'text-delta', delta: asText(delta.text) };
-        const block = this.blocks.get(index);
-        if (delta.type === 'input_json_delta' && block) block.json += asText(delta.partial_json);
-        return null;
+        const open = this.blocks.get(index);
+        if (delta.type === 'text_delta' && asText(delta.text)) {
+          if (open) open.block.text = asText(open.block.text) + asText(delta.text);
+          yield { type: 'text-delta', delta: asText(delta.text) };
+        } else if (delta.type === 'input_json_delta' && open) {
+          open.json += asText(delta.partial_json);
+        } else if (delta.type === 'citations_delta') {
+          const source = sourceOf(asRecord(delta.citation));
+          if (source && !this.cited.has(source.url)) {
+            this.cited.add(source.url);
+            yield { type: 'source', source };
+          }
+        }
+        return;
       }
       case 'content_block_stop': {
-        const block = this.blocks.get(index);
-        return block?.call ? { type: 'tool-call', call: { ...block.call, args: parseToolArgs(block.json) } } : null;
+        const open = this.blocks.get(index);
+        if (!open) return;
+        const { block } = open;
+        if (block.type === 'tool_use' || block.type === 'server_tool_use') block.input = parseToolArgs(open.json);
+        if (block.type === 'tool_use') {
+          const call: AiToolCall = { id: asText(block.id), name: asText(block.name), args: asRecord(block.input) };
+          yield { type: 'tool-call', call };
+        } else if (block.type === 'server_tool_use' && block.name === WEB_SEARCH_TOOL.name) {
+          this.searched = true;
+          yield { type: 'web-search', query: asText(asRecord(block.input).query) || null };
+        }
+        return;
       }
       case 'message_delta': {
         const stop = asText(asRecord(event.delta).stop_reason);
         if (stop) this.reason = STOP_REASONS[stop] ?? 'stop';
         this.outputTokens = asCount(asRecord(event.usage).output_tokens) || this.outputTokens;
-        return null;
+        return;
       }
       case 'message_stop':
         this.finished = true;
-        return null;
+        return;
       default:
-        return null;
+        return;
     }
   }
+
+  /** The blocks to replay, for an answer that searched the web; null for one rebuilt from its text and calls. */
+  state(): AiProviderState | null {
+    if (!this.searched) return null;
+    const blocks = [...this.blocks.entries()].sort(([a], [b]) => a - b).map(([, open]) => open.block);
+    return { adapter: 'anthropic-messages', blocks };
+  }
+}
+
+/** The page a citation of a web search result names, null for any other citation. */
+function sourceOf(citation: Record<string, unknown>): AiSource | null {
+  const url = asText(citation.url);
+  if (citation.type !== 'web_search_result_location' || !/^https?:\/\//.test(url)) return null;
+  return { url, title: asText(citation.title) || url };
 }

server/src/nest/ai-connections/providers/openai-chat.client.ts

@@ -5,6 +5,7 @@ import type {
   AiChatRequest,
   AiFinishReason,
   AiImage,
+  AiSource,
   AiToolCall,
 } from '../ai-chat-client.interface';
 import { AiProviderError, errorCodeOf, providerFailure } from './provider-errors';
@@ -80,6 +81,11 @@ const FINISH_REASONS: Record<string, AiFinishReason> = { tool_calls: 'tool-calls
  * schemas, OpenAI the prompt cache key, which the others do not know.
  */
 export class OpenAiChatClient implements AiChatClient {
+  /** OpenRouter searches the web for any model through its web plugin; the others have no search here. */
+  get webSearch(): boolean {
+    return this.kind === 'openrouter';
+  }
+
   constructor(
     readonly kind: AiConnectionKind,
     readonly model: string,
@@ -108,6 +114,7 @@ export class OpenAiChatClient implements AiChatClient {
           }
         : {}),
       ...(this.kind === 'openai' && request.cacheKey ? { prompt_cache_key: request.cacheKey } : {}),
+      ...(request.webSearch && this.webSearch ? { plugins: [{ id: 'web', max_results: 5 }] } : {}),
     };
     const events = await openProviderStream(
       this.fetcher,
@@ -136,6 +143,7 @@ export class OpenAiChatClient implements AiChatClient {
       if (chunk.error) throw providerFailure(this.kind, 0, errorCodeOf(chunk));
       const delta = turn.apply(chunk);
       if (delta) yield { type: 'text-delta', delta };
+      for (const source of turn.newSources()) yield { type: 'source', source };
     }
     if (!turn.done && !turn.reason) throw new AiProviderError('provider_unavailable', 0, true, undefined, 'stream_cut');
     for (const call of turn.calls()) yield { type: 'tool-call', call };
@@ -161,6 +169,8 @@ class ChatTurn {
   reason: string | null = null;
   done = false;
   private readonly pending = new Map<number, { id: string; name: string; args: string }>();
+  private readonly cited = new Set<string>();
+  private fresh: AiSource[] = [];
 
   /** Takes one chunk in; answers its text, if it carried any. */
   apply(chunk: Record<string, unknown>): string {
@@ -174,6 +184,16 @@ class ChatTurn {
     const finish = asText(choice.finish_reason);
     if (finish) this.reason = finish;
     const delta = asRecord(choice.delta);
+    // OpenRouter's web plugin names the pages it read as URL annotations of the message.
+    const annotations: unknown[] = Array.isArray(delta.annotations) ? delta.annotations : [];
+    for (const raw of annotations) {
+      const annotation = asRecord(raw);
+      const cite = asRecord(annotation.url_citation);
+      const url = asText(cite.url);
+      if (annotation.type !== 'url_citation' || !/^https?:\/\//.test(url) || this.cited.has(url)) continue;
+      this.cited.add(url);
+      this.fresh.push({ url, title: asText(cite.title) || url });
+    }
     const calls: unknown[] = Array.isArray(delta.tool_calls) ? delta.tool_calls : [];
     calls.forEach((raw, position) => {
       const piece = asRecord(raw);
@@ -188,6 +208,13 @@ class ChatTurn {
     return asText(delta.content);
   }
 
+  /** The pages cited since the last ask, each once. */
+  newSources(): AiSource[] {
+    const out = this.fresh;
+    this.fresh = [];
+    return out;
+  }
+
   calls(): AiToolCall[] {
     return [...this.pending.entries()]
       .sort(([a], [b]) => a - b)

server/src/nest/ai-connections/providers/openai-responses.client.ts

@@ -6,6 +6,7 @@ import type {
   AiChatRequest,
   AiImage,
   AiProviderState,
+  AiSource,
 } from '../ai-chat-client.interface';
 import { AI_BASE_URLS } from '../ai-connections.constants';
 import { AiProviderError, errorCodeOf, providerFailure } from './provider-errors';
@@ -21,6 +22,7 @@ import {
 } from './provider-http';
 import { imageDataUrl, toolImageCaption, toolImagesEndingAt } from './provider-images';
 import { readSseEvents } from './sse-lines';
+import type { AiConnectionKind } from '@trek/shared';
 
 /** The namespace the tools are grouped in, as Sign in with ChatGPT asks for. */
 const TOOL_NAMESPACE = 'trek';
@@ -83,6 +85,45 @@ function toItems(message: AiChatMessage): Record<string, unknown>[] {
   ];
 }
 
+/**
+ * The tools of a request as the Responses API takes them: TREK's in one
+ * namespace, and the provider's own web search beside them when asked for.
+ */
+function toolsOf(request: AiChatRequest, kind: AiConnectionKind): Record<string, unknown> {
+  const tools: Record<string, unknown>[] = [];
+  if (request.tools.length > 0) {
+    tools.push({
+      type: 'namespace',
+      name: TOOL_NAMESPACE,
+      description: 'TREK trip tools',
+      tools: request.tools.map((tool) => ({
+        type: 'function',
+        name: tool.name,
+        description: tool.description,
+        parameters: toProviderSchema(tool.parameters, kind),
+        strict: false,
+      })),
+    });
+  }
+  if (request.webSearch) tools.push({ type: 'web_search' });
+  return tools.length > 0 ? { tools, tool_choice: 'auto', parallel_tool_calls: true } : {};
+}
+
+/** The pages an output message cites, as its text's URL annotations name them. */
+function citedSources(item: Record<string, unknown>): AiSource[] {
+  if (item.type !== 'message' || !Array.isArray(item.content)) return [];
+  return item.content.flatMap((part: unknown) => {
+    const annotations = asRecord(part).annotations;
+    if (!Array.isArray(annotations)) return [];
+    return annotations.flatMap((raw: unknown) => {
+      const annotation = asRecord(raw);
+      const url = asText(annotation.url);
+      if (annotation.type !== 'url_citation' || !/^https?:\/\//.test(url)) return [];
+      return [{ url, title: asText(annotation.title) || url }];
+    });
+  });
+}
+
 /**
  * OpenAI's Responses API on a ChatGPT plan (Sign in with ChatGPT). Within the
  * preview's limits: nothing stored, streamed, no output cap or temperature,
@@ -92,6 +133,7 @@ function toItems(message: AiChatMessage): Record<string, unknown>[] {
  */
 export class OpenAiResponsesClient implements AiChatClient {
   readonly kind = 'chatgpt' as const;
+  readonly webSearch = true;
 
   constructor(
     readonly model: string,
@@ -106,26 +148,7 @@ export class OpenAiResponsesClient implements AiChatClient {
       stream: true,
       instructions: request.system,
       input: toResponsesInput(request),
-      ...(request.tools.length > 0
-        ? {
-            tools: [
-              {
-                type: 'namespace',
-                name: TOOL_NAMESPACE,
-                description: 'TREK trip tools',
-                tools: request.tools.map((tool) => ({
-                  type: 'function',
-                  name: tool.name,
-                  description: tool.description,
-                  parameters: toProviderSchema(tool.parameters, this.kind),
-                  strict: false,
-                })),
-              },
-            ],
-            tool_choice: 'auto',
-            parallel_tool_calls: true,
-          }
-        : {}),
+      ...toolsOf(request, this.kind),
       reasoning: { effort: 'low' },
       include: ['reasoning.encrypted_content'],
       ...(request.cacheKey ? { prompt_cache_key: request.cacheKey } : {}),
@@ -133,6 +156,7 @@ export class OpenAiResponsesClient implements AiChatClient {
     const events = await this.open(body, request.cacheKey, signal);
 
     const items: Record<string, unknown>[] = [];
+    const cited = new Set<string>();
     let usage = { inputTokens: 0, cachedInputTokens: 0, outputTokens: 0 };
     let completed = false;
     for await (const sse of readSseEvents(events)) {
@@ -140,9 +164,16 @@ export class OpenAiResponsesClient implements AiChatClient {
       if (!event) continue;
       if (event.type === 'response.output_text.delta' && asText(event.delta)) {
         yield { type: 'text-delta', delta: asText(event.delta) };
+      } else if (event.type === 'response.output_item.added' && asRecord(event.item).type === 'web_search_call') {
+        yield { type: 'web-search', query: null };
       } else if (event.type === 'response.output_item.done') {
         const item = asRecord(event.item);
         items.push(item);
+        for (const source of citedSources(item)) {
+          if (cited.has(source.url)) continue;
+          cited.add(source.url);
+          yield { type: 'source', source };
+        }
         if (item.type === 'function_call') {
           yield {
             type: 'tool-call',