diff --git a/app/src/main/hl/engines/skillIndexPrompt.ts b/app/src/main/hl/engines/skillIndexPrompt.ts
index 3dbce394..d70b9583 100644
--- a/app/src/main/hl/engines/skillIndexPrompt.ts
+++ b/app/src/main/hl/engines/skillIndexPrompt.ts
@@ -54,8 +54,9 @@ export function htmlBlockGuidanceLines(theme: 'light' | 'dark' = 'dark'): string
   const p = ACTIVE_PALETTE[theme];
   return [
     `UI THEME: ${theme}. When you emit a \`\`\`html block, use the active palette below. The full per-theme reference lives in the 'neobrutalist-html' interaction skill.`,
-    `Active palette — card bg ${p.cardBg}, border ${p.border}, shadow ${p.shadow}, foreground ${p.fg}. Accents: ${p.accents}. Pick one bold accent + one secondary per artifact.`,
-    'HTML blocks are an optional output channel — use them when layout helps the reader (plans, comparisons, status, timelines, diffs). Conversational replies, tool previews, and short answers should stay as plain markdown.',
+    `Active palette — card bg ${p.cardBg}, border ${p.border}, shadow ${p.shadow}, foreground ${p.fg}. Accents: ${p.accents}. Use shadow ${p.shadow} for large structural offset shadows; keep accent colors to small highlights, badges, selected metrics, or short dividers.`,
+    'HTML blocks are an optional output channel — use them when layout helps the reader (plans, comparisons, status, timelines, diffs). Also use them for dense, easily organized browser results or confirmations: shopping/cart/order summaries, delivery windows, addresses, prices, quantities, retailer/site names, reservation details, selected items, and next-step choices. Conversational replies, tool previews, and short answers should stay as plain markdown.',
+    'Rule of thumb: if you have 3+ concrete facts from the page that naturally fit labeled rows, columns, cards, or a receipt-style summary, emit a compact ```html block instead of burying them in a paragraph.',
     'When you emit an HTML block, keep it self-contained: inline styles or a single inline <style> tag are fine; do not reference external stylesheets, scripts, fonts, or images by URL — the sandbox blocks them.',
   ];
 }
@@ -73,9 +74,12 @@ export const HTML_BLOCK_GUIDANCE_LINES = htmlBlockGuidanceLines('dark');
  */
 export function optionsBlockGuidanceLines(): string[] {
   return [
-    'When you need the user to disambiguate between products or options that you can see in the live browser (e.g. shopping search results), emit a ```options fenced block carrying JSON: { prompt, multiSelect, min, max, options: [{ id, image, title, subtitle?, price?, merchant?, url? }] }. Each option requires id, image (absolute URL), and title; the rest are optional.',
+    'When you need the user to disambiguate between products or options that you can see in the live browser (e.g. shopping search results), emit a ```options fenced block carrying JSON: { prompt, multiSelect, min, max, allowOther?, options: [{ id, image, title, url, site, description?, fields?, subtitle?, price?, merchant? }] }. Each option REQUIRES: id, image (absolute URL), title, url (absolute URL to the source listing), and site. The rest are optional.',
+    '`image` must be the actual product/listing hero photo, not a badge, favicon, category icon, host avatar, or decorative site asset. For Airbnb, reject `AirbnbPlatformAssets`, `GuestFavorite`, and `orthographic-images` URLs; choose the largest visible listing photo or omit that option.',
+    '`site` is the brand token a human would call the site — "Amazon", "Instacart", "Airbnb", "Costco" — not the hostname. No TLD, no `.com`, no `.co.uk`. For long-tail sites with no recognizable brand, use the bare second-level domain ("enginediy", "jadecommercecenter"). The renderer derives the favicon mechanically from `url`; `site` is the display label.',
+    '`allowOther` defaults to false. The renderer no longer shows a free-text "Other" card by default — the chat input below the picker already handles "none of these, I want X". Only set `allowOther: true` when the listed options genuinely aren\'t exhaustive and a typed answer is meaningful.',
     'The `options` block ENDS YOUR TURN. After emitting it, do not call any more tools — stop and wait for the user. Their selection arrives as the next user message in the form "Selected from options: <title> (id: <id>)" so you can resume on the same browser session.',
-    'See the `options-block` interaction skill for the full schema, DOM-extraction snippet for grabbing image URLs / titles / prices from product tiles, and worked examples.',
+    'See the `options-block` interaction skill for the full schema, DOM-extraction snippet for grabbing image URLs / titles / prices / source URLs from product tiles, and worked examples.',
   ];
 }
 
diff --git a/app/src/main/hl/stock/interaction-skills/neobrutalist-html.md b/app/src/main/hl/stock/interaction-skills/neobrutalist-html.md
index 1a84d1d3..d28acac6 100644
--- a/app/src/main/hl/stock/interaction-skills/neobrutalist-html.md
+++ b/app/src/main/hl/stock/interaction-skills/neobrutalist-html.md
@@ -1,16 +1,42 @@
 # Neobrutalist HTML — house style
 
-How `\`\`\`html` blocks should LOOK. This skill defines the visual language only.
-It does not tell you what structure to build, what elements to use, or when to
-emit a block — that's up to you per task. If you're already going to emit HTML,
-make it look like this.
+How `\`\`\`html` blocks should LOOK. This skill defines the visual language and
+basic structure patterns. If the system prompt tells you an answer is a good
+HTML candidate, make it look like this.
+
+## Good HTML candidates
+
+Use an HTML block when the output has dense facts that are easy to organize into
+labeled rows, columns, cards, or a receipt-style summary. Browser task
+confirmations often qualify: selected item, retailer, cart quantity, price,
+delivery/pickup window, delivery address, reservation details, order state, and
+next-step choices. If you have 3+ concrete facts from the page, a compact HTML
+summary is usually easier to scan than a prose paragraph.
+
+Keep genuinely short answers in markdown. Don't emit HTML just to decorate one
+sentence.
+
+## Structure patterns
+
+- **Receipt summary:** one headline item, then 4-8 label/value rows for price,
+  quantity, delivery window, address, retailer, cart state, or confirmation
+  number.
+- **Comparison grid:** 2-6 cards with the same field labels across each card.
+- **Status panel:** current state at top, evidence/facts in rows, next actions
+  at the bottom.
 
 ## Mandatory visual rules
 
-- **3px solid #000 borders** on every block-level element you want visible.
-  Not 1px, not subtle gray. (For nested elements 2px is acceptable.)
-- **Hard offset shadow**: `box-shadow: 4px 4px 0 #000;` (no blur, no spread).
+- **3px solid palette border** on every block-level element you want visible.
+  In light mode use black; in dark mode use cream (`#f4ecd8`). Not 1px, not
+  subtle gray. (For nested elements 2px is acceptable.)
+- **Hard offset shadow** using the palette shadow color: black in light mode,
+  cream (`#f4ecd8`) in dark mode. Example: `box-shadow: 4px 4px 0 #f4ecd8;`.
   Larger surfaces can use 6px or 8px. Never soft shadows.
+- **No accent-color structural shadows.** Gold/yellow, red, green, blue, pink,
+  and purple are for small highlights, badges, selected metrics, or short
+  dividers; they should not become the large outer frame or the dominant
+  shadow in dark mode.
 - **Square corners**: `border-radius: 0`. (4px max is tolerable on small chips
   if every chip uses the same value.)
 - **Flat color fills** — no gradients, no semi-transparent overlays for
@@ -71,8 +97,9 @@ palette that matches.
 
 ### Two-color rule (both themes)
 
-Pick **one** bold accent + **one** secondary accent per artifact. More than
-two accents fights the bold-borders aesthetic.
+Pick **one** bold accent + **one** secondary accent per artifact, but keep them
+small. More than two accents fights the bold-borders aesthetic, and a large
+accent-colored shadow usually overwhelms dark-mode artifacts.
 
 ## Typography
 
diff --git a/app/src/main/index.ts b/app/src/main/index.ts
index f261668c..51a97136 100644
--- a/app/src/main/index.ts
+++ b/app/src/main/index.ts
@@ -2113,6 +2113,17 @@ ipcMain.handle('shell:get-platform', () => {
   return process.platform;
 });
 
+// Open an absolute http(s) URL in the user's default browser. Used by the
+// chat-v2 option picker's "View on {site}" button so the user can verify a
+// source listing without leaving the app to switch tabs themselves.
+ipcMain.handle('shell:open-external', async (_event, url: unknown) => {
+  if (typeof url !== 'string' || !/^https?:\/\//.test(url)) {
+    throw new Error('shell:open-external only accepts http(s) URLs');
+  }
+  await shell.openExternal(url);
+  return { opened: true };
+});
+
 // Structured renderer log forwarding — see main/rendererLogIpc.ts and
 // renderer/shared/logger.ts. Registered alongside other preload-safe
 // channels so the bridge is ready before any window finishes loading.
diff --git a/app/src/preload/shell.ts b/app/src/preload/shell.ts
index 8cda0d26..cd8e84ba 100644
--- a/app/src/preload/shell.ts
+++ b/app/src/preload/shell.ts
@@ -41,6 +41,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
     setOverlay: (active: boolean): void => {
       ipcRenderer.send('shell:set-overlay', active);
     },
+    openExternal: (url: string): Promise<{ opened: boolean }> =>
+      ipcRenderer.invoke('shell:open-external', url),
   },
   pill: {
     toggle: (): Promise<void> => ipcRenderer.invoke('pill:toggle'),
diff --git a/app/src/renderer/globals.d.ts b/app/src/renderer/globals.d.ts
index 7d7cb2b9..8500049b 100644
--- a/app/src/renderer/globals.d.ts
+++ b/app/src/renderer/globals.d.ts
@@ -204,6 +204,7 @@ interface ElectronShellAPI {
   platform: string;
   getPlatform: () => Promise<string>;
   setOverlay: (active: boolean) => void;
+  openExternal: (url: string) => Promise<{ opened: boolean }>;
 }
 
 interface ElectronPillAPI {
diff --git a/app/src/renderer/hub/chat-v2/AskForm.tsx b/app/src/renderer/hub/chat-v2/AskForm.tsx
index 9e9dc40e..49baac97 100644
--- a/app/src/renderer/hub/chat-v2/AskForm.tsx
+++ b/app/src/renderer/hub/chat-v2/AskForm.tsx
@@ -22,6 +22,10 @@ interface Props {
   complete: boolean;
   error?: string;
   sessionId?: string;
+  /** User reply turn that follows this form, if any. Used to reconstruct
+   *  the submitted answers in historical sessions — see OptionList for the
+   *  same pattern. */
+  nextUserText?: string | null;
 }
 
 const OTHER_TOKEN = '__other__';
@@ -56,7 +60,7 @@ function decodeAskSelection(value: string): { question: string; label: string }
 }
 
 export function AskForm(props: Props): React.ReactElement {
-  const { payload, complete, error, sessionId } = props;
+  const { payload, complete, error, sessionId, nextUserText } = props;
   if (!payload) {
     if (complete && error) {
       return (
@@ -67,7 +71,7 @@ export function AskForm(props: Props): React.ReactElement {
     }
     return <AskFormSkeleton />;
   }
-  return <AskFormReady payload={payload} sessionId={sessionId} streaming={!complete} />;
+  return <AskFormReady payload={payload} sessionId={sessionId} streaming={!complete} nextUserText={nextUserText} />;
 }
 
 function AskFormSkeleton(): React.ReactElement {
@@ -89,9 +93,10 @@ interface ReadyProps {
   payload: AskFormPayload;
   sessionId?: string;
   streaming?: boolean;
+  nextUserText?: string | null;
 }
 
-function AskFormReady({ payload, sessionId, streaming }: ReadyProps): React.ReactElement {
+function AskFormReady({ payload, sessionId, streaming, nextUserText }: ReadyProps): React.ReactElement {
   const { questions, prompt } = payload;
   const formRef = useRef<HTMLDivElement | null>(null);
 
@@ -104,11 +109,20 @@ function AskFormReady({ payload, sessionId, streaming }: ReadyProps): React.Reac
   }, [sessionId, questions]);
   const cachedRecord = useMemo(() => getSubmissionRecord(cacheKey), [cacheKey]);
 
+  // Transcript-derived submission — read the user's next-turn reply for
+  // an "Answered: …" block and reconstruct selection. Wins over the
+  // in-memory cache so reopened sessions stay correct without persistence.
+  const transcriptSubmission = useMemo(
+    () => deriveAskSubmission(nextUserText, questions),
+    [nextUserText, questions],
+  );
+
   // Per-question selected labels. Use `Set<string>` so single + multi
   // share the same state shape; "Other" picks store the literal
   // OTHER_TOKEN. Per-question typed-other text in a parallel array.
   const [selectedByQuestion, setSelectedByQuestion] = useState<Set<string>[]>(
-    () => questions.map((q) => {
+    () => questions.map((q, i) => {
+      if (transcriptSubmission) return new Set(transcriptSubmission.selection[i]);
       if (!cachedRecord) return new Set();
       const qKey = questionCacheKey(q);
       const restored = new Set<string>();
@@ -123,13 +137,39 @@ function AskFormReady({ payload, sessionId, streaming }: ReadyProps): React.Reac
     }),
   );
   const [otherTextByQuestion, setOtherTextByQuestion] = useState<string[]>(
-    () => questions.map((q) => cachedRecord?.otherTextByKey?.[questionCacheKey(q)] ?? ''),
+    () => questions.map((q) => (
+      transcriptSubmission?.otherTextByKey[questionCacheKey(q)]
+      ?? cachedRecord?.otherTextByKey?.[questionCacheKey(q)]
+      ?? ''
+    )),
+  );
+  const [submitted, setSubmitted] = useState<boolean>(
+    transcriptSubmission !== null || cachedRecord !== null,
   );
-  const [submitted, setSubmitted] = useState<boolean>(cachedRecord !== null);
   const [submitError, setSubmitError] = useState<string | null>(null);
+  // Tracks "user clicked Confirm in this mount" vs "bootstrapped from
+  // cache". Only a local submit makes our state authoritative — a cache
+  // bootstrap is just a hint and should yield to a later-arriving
+  // transcript, which is the durable source of truth. State (not a ref)
+  // so toggling it back after a failed submit re-runs the hydration
+  // effect to pick up any transcript that was already waiting.
+  const [localSubmit, setLocalSubmit] = useState<boolean>(false);
 
   const locked = submitted;
 
+  // Late-arriving transcript: if nextUserText hydrates after first paint
+  // (streaming session restore, async transcript fetch), apply the derived
+  // submission. Skip only when the user has submitted locally in this
+  // mount — bootstrap-from-cache must not block transcript hydration.
+  useEffect(() => {
+    if (!transcriptSubmission || localSubmit) return;
+    setSelectedByQuestion(questions.map((_, i) => new Set(transcriptSubmission.selection[i])));
+    setOtherTextByQuestion(questions.map((q) => (
+      transcriptSubmission.otherTextByKey[questionCacheKey(q)] ?? ''
+    )));
+    setSubmitted(true);
+  }, [transcriptSubmission, localSubmit, questions]);
+
   const togglePick = useCallback((qIdx: number, label: string): void => {
     const q = questions[qIdx];
     if (!q) return;
@@ -192,6 +232,7 @@ function AskFormReady({ payload, sessionId, streaming }: ReadyProps): React.Reac
       return;
     }
     const message = formatAnswerMessage(questions, selectedByQuestion, otherTextByQuestion);
+    setLocalSubmit(true);
     setSubmitted(true);
     setSubmitError(null);
     try {
@@ -199,6 +240,7 @@ function AskFormReady({ payload, sessionId, streaming }: ReadyProps): React.Reac
       if (result?.error) {
         setSubmitError(result.error);
         setSubmitted(false);
+        setLocalSubmit(false);
       } else {
         // Persist enough to restore submitted view on remount.
         const flat: string[] = [];
@@ -214,6 +256,7 @@ function AskFormReady({ payload, sessionId, streaming }: ReadyProps): React.Reac
     } catch (err) {
       setSubmitError((err as Error).message);
       setSubmitted(false);
+      setLocalSubmit(false);
     }
   }, [canSubmit, locked, sessionId, questions, selectedByQuestion, otherTextByQuestion, cacheKey]);
 
@@ -313,7 +356,6 @@ function QuestionCard({ question, selected, otherText, locked, onToggle, onOther
   return (
     <div className="chatv2-askform__question">
       <div className="chatv2-askform__question-head">
-        {question.header && <span className="chatv2-askform__question-header">{question.header}</span>}
         <span className="chatv2-askform__question-text">{question.question}</span>
       </div>
       <ul className="chatv2-askform__options" role={question.multiSelect ? 'group' : 'radiogroup'}>
@@ -360,6 +402,67 @@ function QuestionCard({ question, selected, otherText, locked, onToggle, onOther
   );
 }
 
+/**
+ * Reverse of formatAnswerMessage: parse the user-reply turn that follows
+ * this form and reconstruct which options were chosen per question.
+ * Returns null when the text isn't an "Answered: …" reply for this form.
+ *
+ * Exported for tests.
+ */
+export function deriveAskSubmission(
+  text: string | null | undefined,
+  questions: AskQuestion[],
+): { selection: Set<string>[]; otherTextByKey: Record<string, string> } | null {
+  if (!text) return null;
+  const head = text.trimStart();
+  if (!head.startsWith('Answered:')) return null;
+
+  const selection: Set<string>[] = questions.map(() => new Set<string>());
+  const otherTextByKey: Record<string, string> = {};
+
+  for (const rawLine of text.split('\n')) {
+    const m = rawLine.match(/^-\s*([^:]+):\s*(.+)$/);
+    if (!m) continue;
+    const labelPrefix = m[1].trim();
+    const valuesStr = m[2].trim();
+    const qIdx = questions.findIndex((q) => (q.header || q.question) === labelPrefix);
+    if (qIdx < 0) continue;
+
+    // Values are comma-separated. A free-text `Other: <text>` answer can
+    // itself contain commas, so we can't blindly split. Strategy: find
+    // ", Other:" (or a leading "Other:") and treat everything from there
+    // to the end of the line as a single Other value. The remainder is
+    // safe to split on /,\s+/ because predefined option labels are
+    // controlled by the agent and don't carry user free text.
+    let valuesPart = valuesStr;
+    let otherTail: string | null = null;
+    const otherIdx = (() => {
+      const leading = valuesPart.match(/^Other(?::|$)/);
+      if (leading) return 0;
+      const m = valuesPart.match(/,\s+Other(?::|$)/);
+      return m && m.index !== undefined ? m.index + m[0].indexOf('Other') : -1;
+    })();
+    if (otherIdx >= 0) {
+      otherTail = valuesPart.slice(otherIdx);
+      valuesPart = valuesPart.slice(0, otherIdx).replace(/,\s*$/, '');
+    }
+    for (const raw of valuesPart.split(/,\s+/)) {
+      const v = raw.trim();
+      if (!v) continue;
+      selection[qIdx].add(v);
+    }
+    if (otherTail !== null) {
+      selection[qIdx].add(OTHER_TOKEN);
+      if (otherTail.startsWith('Other:')) {
+        otherTextByKey[questionCacheKey(questions[qIdx])] = otherTail.slice('Other:'.length).trim();
+      }
+    }
+  }
+
+  if (selection.every((s) => s.size === 0)) return null;
+  return { selection, otherTextByKey };
+}
+
 function formatAnswerMessage(
   questions: AskQuestion[],
   selectedByQuestion: Set<string>[],
diff --git a/app/src/renderer/hub/chat-v2/OptionList.tsx b/app/src/renderer/hub/chat-v2/OptionList.tsx
index 82cdaa46..c6976149 100644
--- a/app/src/renderer/hub/chat-v2/OptionList.tsx
+++ b/app/src/renderer/hub/chat-v2/OptionList.tsx
@@ -9,17 +9,21 @@
  * "Selected: …" message that the agent reads on its next turn.
  *
  * States:
- *   - skeleton:  the fence is still streaming (or just opened) and we
- *                don't have a parsed payload yet — render shimmer cards.
- *   - error:     the closed block failed to parse — show a small
- *                explanation; the agent itself sees its own bad emission
- *                and can recover.
- *   - live:      the latest block, session is idle waiting for a pick —
- *                cards are clickable, kbd nav is wired.
- *   - history:   a block from an earlier turn that's already been
- *                answered — same visual shell but locked, with the
- *                previously-selected option highlighted (visual only;
- *                we don't replay the selection here).
+ *   - skeleton:   the fence is still streaming (or just opened) and we
+ *                 don't have a parsed payload yet — render shimmer cards.
+ *   - error:      the closed block failed to parse — show a small
+ *                 explanation; the agent itself sees its own bad emission
+ *                 and can recover.
+ *   - live:       the latest block, session is idle waiting for a pick —
+ *                 cards are clickable, Choose buttons wired.
+ *   - chosen:     user picked one of the listed options — compact receipt
+ *                 (44px thumb + "Chose: X" + site · price).
+ *   - other-chosen: user used the Other affordance.
+ *   - cancelled:  session ended before any pick — cards dim, no interaction.
+ *
+ * NOTE: If an `options-block` interaction skill doc exists in the repo,
+ * it needs updating to reflect: url required, site required (brand token
+ * only — "Amazon" not "amazon.co.uk"), allowOther defaults to false.
  *
  * Keyboard:
  *   ← →  ↑ ↓   move focus
@@ -37,12 +41,21 @@ interface Props {
   complete: boolean;
   error?: string;
   sessionId?: string;
+  /** When true, the session ended before any pick was made. Cards are
+   *  dimmed and non-interactive; a banner replaces the foot. */
+  cancelled?: boolean;
+  /** Text of the user message immediately following this picker's turn,
+   *  if any. When it matches the "Selected from options: …" format the
+   *  picker initialises in submitted state with that selection — that's
+   *  how reopened/historical sessions get the collapsed receipt view
+   *  without any client-side cache. */
+  nextUserText?: string | null;
 }
 
 const SKELETON_COUNT = 3;
 
 export function OptionList(props: Props): React.ReactElement {
-  const { payload, complete, error, sessionId } = props;
+  const { payload, complete, error, sessionId, cancelled, nextUserText } = props;
 
   // Streaming with no options parsed yet — show a full skeleton screen.
   if (!payload) {
@@ -56,10 +69,15 @@ export function OptionList(props: Props): React.ReactElement {
     return <OptionListSkeleton />;
   }
 
-  // We have at least one parsed option. Render the picker; if the fence
-  // is still streaming, OptionListReady will tack on trailing skeleton
-  // placeholders as a "more incoming" hint.
-  return <OptionListReady payload={payload} sessionId={sessionId} streaming={!complete} />;
+  return (
+    <OptionListReady
+      payload={payload}
+      sessionId={sessionId}
+      streaming={!complete}
+      cancelled={cancelled}
+      nextUserText={nextUserText}
+    />
+  );
 }
 
 function OptionListSkeleton(): React.ReactElement {
@@ -86,14 +104,24 @@ function OptionListSkeleton(): React.ReactElement {
 interface ReadyProps {
   payload: OptionListPayload;
   sessionId?: string;
-  /** True while the fence is still streaming — tacks on trailing skeleton
-   *  placeholders after the parsed cards so the user reads "more incoming." */
   streaming?: boolean;
+  cancelled?: boolean;
+  nextUserText?: string | null;
 }
 
-const TRAILING_SKELETONS_WHILE_STREAMING = 2;
 const OTHER_TOKEN = '__other__';
 
+/** Returns a Google favicon URL for a given product URL. Falls back to
+ *  undefined when the URL cannot be parsed. */
+function siteFaviconUrl(url: string): string | undefined {
+  try {
+    const { hostname } = new URL(url);
+    return `https://www.google.com/s2/favicons?domain=${hostname}&sz=64`;
+  } catch {
+    return undefined;
+  }
+}
+
 function canSubmitSelection(
   sections: OptionListSection[],
   selectedBySection: Set<string>[],
@@ -109,13 +137,27 @@ function canSubmitSelection(
   });
 }
 
-function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.ReactElement {
+/** Subtitle rendered under the section's source line when multi-select is
+ *  enabled. Tells the user upfront how many they can pick + tracks the
+ *  running count as they Add cards. */
+function multiSelectHint(sec: OptionListSection, picked: number): string {
+  const total = sec.options.length;
+  let prefix: string;
+  if (sec.min === sec.max && sec.min > 0) prefix = `Pick exactly ${sec.min}`;
+  else if (sec.min > 0 && sec.max < total) prefix = `Pick ${sec.min}–${sec.max}`;
+  else if (sec.min > 0) prefix = `Pick at least ${sec.min}`;
+  else prefix = `Pick any`;
+  const count = picked > 0 ? ` · ${picked} added` : '';
+  return `${prefix}${count}`;
+}
+
+function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserText }: ReadyProps): React.ReactElement {
   const { sections, prompt } = payload;
   const multi = sections.length > 1;
 
   // Effective field schema per section: agent-declared (preserves intent
   // + order), else the union of every option's field keys in first-seen
-  // order across that section. Missing values in a card render as "—".
+  // order across that section. Missing fields are simply omitted per card.
   const effectiveSchemas = useMemo<string[][]>(() => sections.map((sec) => {
     if (sec.fieldSchema && sec.fieldSchema.length > 0) return sec.fieldSchema;
     const seen: string[] = [];
@@ -128,9 +170,16 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
     return seen;
   }), [sections]);
 
-  // Stable cache key — covers ChatTurn unmounts on tab switch. Combines
-  // ids across every section so picker emissions with the same option
-  // sets resolve to the same key regardless of section order.
+  // Per-section: detect whether all cards share the same site so we can
+  // hoist a single source attribution line into the section head.
+  const sectionSingleSite = useMemo<(string | null)[]>(() => sections.map((sec) => {
+    if (sec.options.length === 0) return null;
+    const first = sec.options[0].site;
+    return sec.options.every((o) => o.site === first) ? first : null;
+  }), [sections]);
+
+  // Stable cache key — covers ChatTurn unmounts on tab switch (in-memory
+  // only; cross-reload state is derived from the transcript below).
   const cacheKey = useMemo(() => {
     const allIds: string[] = [];
     for (const sec of sections) for (const o of sec.options) allIds.push(o.id);
@@ -139,28 +188,56 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
   const cachedSelection = useMemo(() => getSubmission(cacheKey), [cacheKey]);
   const cachedRecord = useMemo(() => getSubmissionRecord(cacheKey), [cacheKey]);
 
-  // Per-section selected ids. We track one Set per section index.
-  // The Set may also contain OTHER_TOKEN when the user picks "Other".
+  // Source of truth across reloads: the user's reply turn directly after
+  // this picker's turn. If it matches the "Selected from options: …" format
+  // and references any of THIS picker's option IDs, treat the picker as
+  // submitted with that selection — no client cache required.
+  const transcriptSubmission = useMemo(
+    () => deriveSubmissionFromTranscript(nextUserText, sections),
+    [nextUserText, sections],
+  );
+
+  // Per-section selected ids. Transcript wins over the in-memory cache so
+  // historical sessions render identically across reloads.
   const [selectedBySection, setSelectedBySection] = useState<Set<string>[]>(
-    () => sections.map((sec) => {
+    () => sections.map((sec, i) => {
+      if (transcriptSubmission) return new Set(transcriptSubmission.selection[i]);
       if (!cachedSelection) return new Set<string>();
-      // Restore: keep ids from this section + the Other token.
       const valid = new Set([...sec.options.map((o) => o.id), OTHER_TOKEN]);
       return new Set([...cachedSelection].filter((id) => valid.has(id)));
     }),
   );
-  // Per-section free-text answer when the user picks the "Other" card.
   const [otherTextBySection, setOtherTextBySection] = useState<string[]>(
-    () => sections.map((_, i) => cachedRecord?.otherText?.[i] ?? ''),
+    () => sections.map((_, i) => (
+      transcriptSubmission?.otherText[i] ?? cachedRecord?.otherText?.[i] ?? ''
+    )),
   );
-  // Cursor lives at (section, option). Arrow keys cycle within a section.
   const [cursor, setCursor] = useState<{ section: number; option: number }>({ section: 0, option: 0 });
-  const [submitted, setSubmitted] = useState<boolean>(cachedSelection !== null);
+  const [submitted, setSubmitted] = useState<boolean>(
+    transcriptSubmission !== null || cachedSelection !== null,
+  );
   const [submitError, setSubmitError] = useState<string | null>(null);
   const gridRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const otherInputRefs = useRef<(HTMLTextAreaElement | null)[]>([]);
+  // Tracks "user clicked submit in this mount" vs "bootstrapped from
+  // cache". Only a local submit makes our state authoritative — a cache
+  // bootstrap is just a hint and should yield to a later-arriving
+  // transcript, which is the durable source of truth. State (not a ref)
+  // so toggling it back after a failed submit re-runs the hydration
+  // effect to pick up any transcript that was already waiting.
+  const [localSubmit, setLocalSubmit] = useState<boolean>(false);
+
+  // Late-arriving transcript: if nextUserText hydrates after first paint
+  // (streaming restore / async transcript fetch), apply the derived
+  // submission. Skip only when the user has submitted locally in this
+  // mount — bootstrap-from-cache must not block transcript hydration.
+  useEffect(() => {
+    if (!transcriptSubmission || localSubmit) return;
+    setSelectedBySection(sections.map((_, i) => new Set(transcriptSubmission.selection[i])));
+    setOtherTextBySection(transcriptSubmission.otherText.slice());
+    setSubmitted(true);
+  }, [transcriptSubmission, localSubmit, sections]);
 
-  const locked = submitted;
+  const locked = submitted || (cancelled ?? false);
 
   const toggle = useCallback((sectionIdx: number, optionIdx: number): void => {
     const sec = sections[sectionIdx];
@@ -181,8 +258,6 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
     });
   }, [sections]);
 
-  // canSubmit: every section meets its bounds AND any section that
-  // has the Other card selected has non-empty typed text.
   const canSubmit = useMemo(() => {
     return canSubmitSelection(sections, selectedBySection, otherTextBySection);
   }, [sections, selectedBySection, otherTextBySection]);
@@ -192,45 +267,6 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
     [selectedBySection],
   );
 
-  const submitLabel = useMemo(() => {
-    if (submitted) return totalSelected === 1 ? 'Sent to agent' : `Sent ${totalSelected} items`;
-    if (multi) {
-      if (canSubmit) return `Confirm ${totalSelected} pick${totalSelected === 1 ? '' : 's'}`;
-      const missingOther = sections.findIndex((_, i) => {
-        const sel = selectedBySection[i] ?? new Set<string>();
-        return sel.has(OTHER_TOKEN) && (otherTextBySection[i] ?? '').trim().length === 0;
-      });
-      if (missingOther >= 0) return 'Type your "Other" answer';
-      // Find the first section that's not satisfied, hint at it.
-      const idx = sections.findIndex((sec, i) => {
-        const n = selectedBySection[i]?.size ?? 0;
-        return sec.multiSelect ? (n < sec.min || n > sec.max) : (n !== 1);
-      });
-      if (idx < 0) return 'Pick options to continue';
-      const sec = sections[idx];
-      const label = sec?.label || `section ${idx + 1}`;
-      return `Pick from "${label}" to continue`;
-    }
-    // Single-section: keep the old one-line label.
-    const sec = sections[0];
-    const sel = selectedBySection[0] ?? new Set<string>();
-    const n = sel.size;
-    if (sel.has(OTHER_TOKEN) && (otherTextBySection[0] ?? '').trim().length === 0) {
-      return 'Type your "Other" answer';
-    }
-    if (sec.multiSelect) {
-      if (n === 0) return sec.min > 1 ? `Pick at least ${sec.min}` : 'Pick options to continue';
-      if (n < sec.min) return `${sec.min - n} more to continue`;
-      return `Confirm ${n} item${n > 1 ? 's' : ''}`;
-    }
-    if (n === 1) {
-      const title = sec.options.find((o) => sel.has(o.id))?.title ?? '';
-      const truncated = title.length > 32 ? `${title.slice(0, 31)}…` : title;
-      return `Confirm "${truncated}"`;
-    }
-    return 'Pick one to continue';
-  }, [sections, selectedBySection, otherTextBySection, canSubmit, multi, totalSelected, submitted]);
-
   const submit = useCallback(async (selectionOverride?: Set<string>[]): Promise<void> => {
     const selected = selectionOverride ?? selectedBySection;
     if (!canSubmitSelection(sections, selected, otherTextBySection) || locked) return;
@@ -244,6 +280,7 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
       return { section: sec, picked: sec.options.filter((o) => ids.has(o.id)), otherText };
     });
     const message = formatSelectionMessage(pickedAcross);
+    setLocalSubmit(true);
     setSubmitted(true);
     setSubmitError(null);
     try {
@@ -251,6 +288,7 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
       if (result?.error) {
         setSubmitError(result.error);
         setSubmitted(false);
+        setLocalSubmit(false);
       } else {
         const flat: string[] = [];
         for (let i = 0; i < sections.length; i++) {
@@ -262,9 +300,29 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
     } catch (err) {
       setSubmitError((err as Error).message);
       setSubmitted(false);
+      setLocalSubmit(false);
     }
   }, [locked, sessionId, sections, selectedBySection, otherTextBySection, cacheKey]);
 
+  // Per-card choose handler for single-select: pick + submit immediately.
+  const chooseCard = useCallback((sectionIdx: number, optionIdx: number): void => {
+    if (locked) return;
+    const sec = sections[sectionIdx];
+    if (!sec?.options[optionIdx]) return;
+    if (!sec.multiSelect) {
+      // Single-select: set selection and submit immediately.
+      const opt = sec.options[optionIdx];
+      const next = selectedBySection.map((set, idx) => (
+        idx === sectionIdx ? new Set<string>([opt.id]) : new Set(set)
+      ));
+      setSelectedBySection(next);
+      void submit(next);
+    } else {
+      // Multi-select: just toggle; foot Confirm aggregates.
+      toggle(sectionIdx, optionIdx);
+    }
+  }, [locked, sections, selectedBySection, submit, toggle]);
+
   const handleSectionKey = useCallback((sectionIdx: number, e: React.KeyboardEvent<HTMLDivElement>): void => {
     if (locked) return;
     const sec = sections[sectionIdx];
@@ -307,15 +365,14 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
     }
   }, [locked, sections, cursor, multi, canSubmit, selectedBySection, submit, toggle]);
 
-  // Auto-focus the first section's grid on mount so kbd nav works
-  // without an initial click.
+  // Auto-focus the first section's grid on mount.
   useEffect(() => {
-    if (!submitted && gridRefs.current[0]) {
+    if (!submitted && !cancelled && gridRefs.current[0]) {
       gridRefs.current[0].focus({ preventScroll: true });
     }
-  }, [submitted]);
+  }, [submitted, cancelled]);
 
-  // Post-submit: compact "Chose: …" view across every section.
+  // Post-submit: compact receipt view.
   if (submitted) {
     return (
       <div
@@ -324,12 +381,6 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
         data-state="chosen"
         data-multi={multi}
       >
-        <div className="chatv2-optlist__head">
-          <div className="chatv2-optlist__prompt">
-            {multi ? 'Chose:' : `Chose: ${formatChosenSummary(sections, selectedBySection, otherTextBySection)}`}
-          </div>
-          <div className="chatv2-optlist__meta">sent to agent</div>
-        </div>
         {sections.map((sec, sIdx) => {
           const sel = selectedBySection[sIdx] ?? new Set<string>();
           const chosen = sec.options.filter((o) => sel.has(o.id));
@@ -340,33 +391,24 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
               {(multi && sec.label) && (
                 <div className="chatv2-optlist__section-label">{sec.label}</div>
               )}
-              <div className="chatv2-optlist__grid" aria-hidden="false">
-                {chosen.map((opt) => (
-                  <OptionCard
-                    key={opt.id}
-                    opt={opt}
-                    fieldSchema={effectiveSchemas[sIdx] ?? []}
-                    selected
-                    focused={false}
-                    disabled
-                    onClick={() => { /* locked */ }}
-                    onHover={() => { /* locked */ }}
-                  />
-                ))}
-                {otherPicked && (
-                  <div className="chatv2-optlist__card chatv2-optlist__card--other" data-selected="true">
-                    <div className="chatv2-optlist__panel chatv2-optlist__panel--other">
-                      <span className="chatv2-optlist__other-glyph" aria-hidden="true">+</span>
-                    </div>
-                    <div className="chatv2-optlist__body">
-                      <div className="chatv2-optlist__title">Other</div>
-                      {(otherTextBySection[sIdx] ?? '').trim() && (
-                        <p className="chatv2-optlist__desc">{otherTextBySection[sIdx]}</p>
-                      )}
+              {chosen.map((opt) => (
+                <ChosenReceipt key={opt.id} opt={opt} />
+              ))}
+              {otherPicked && (
+                <div className="chatv2-optlist__chosen-receipt chatv2-optlist__chosen-receipt--other">
+                  <div className="chatv2-optlist__chosen-thumb chatv2-optlist__chosen-thumb--other">
+                    <span aria-hidden="true">✎</span>
+                  </div>
+                  <div className="chatv2-optlist__chosen-text">
+                    <div className="chatv2-optlist__chosen-label">
+                      <span className="chatv2-optlist__chosen-title">Other</span>
                     </div>
+                    {(otherTextBySection[sIdx] ?? '').trim() && (
+                      <div className="chatv2-optlist__chosen-meta">{otherTextBySection[sIdx]}</div>
+                    )}
                   </div>
-                )}
-              </div>
+                </div>
+              )}
             </div>
           );
         })}
@@ -374,6 +416,64 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
     );
   }
 
+  // Cancelled state — session ended before pick.
+  if (cancelled) {
+    return (
+      <div
+        className="chatv2-optlist chatv2-optlist--cancelled"
+        data-testid="chatv2-optlist"
+        data-state="cancelled"
+      >
+        <div className="chatv2-optlist__head">
+          {prompt && <div className="chatv2-optlist__prompt">{prompt}</div>}
+        </div>
+        {sections.map((sec, sIdx) => (
+          <div key={sIdx} className="chatv2-optlist__section">
+            {multi && sec.label && (
+              <div className="chatv2-optlist__section-label">{sec.label}</div>
+            )}
+            <div className="chatv2-optlist__grid" aria-hidden="true">
+              {sec.options.map((opt) => (
+                <OptionCard
+                  key={opt.id}
+                  opt={opt}
+                  fieldSchema={effectiveSchemas[sIdx] ?? []}
+                  selected={false}
+                  focused={false}
+                  disabled
+                  isConfirmed={false}
+                  multiSelect={sec.multiSelect}
+                  onClick={() => { /* cancelled */ }}
+                  onHover={() => { /* cancelled */ }}
+                  onChoose={() => { /* cancelled */ }}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+        <div className="chatv2-optlist__cancelled-banner">Session ended — no choice made.</div>
+      </div>
+    );
+  }
+
+  // Live state.
+  const submitLabel = (() => {
+    if (canSubmit) return `Confirm ${totalSelected} pick${totalSelected === 1 ? '' : 's'}`;
+    const missingOther = sections.findIndex((_, i) => {
+      const sel = selectedBySection[i] ?? new Set<string>();
+      return sel.has(OTHER_TOKEN) && (otherTextBySection[i] ?? '').trim().length === 0;
+    });
+    if (missingOther >= 0) return 'Type your "Other" answer';
+    const idx = sections.findIndex((sec, i) => {
+      const n = selectedBySection[i]?.size ?? 0;
+      return sec.multiSelect ? (n < sec.min || n > sec.max) : (n !== 1);
+    });
+    if (idx < 0) return 'Pick options to continue';
+    const sec = sections[idx];
+    const label = sec?.label || `section ${idx + 1}`;
+    return `Pick from "${label}" to continue`;
+  })();
+
   return (
     <div
       className="chatv2-optlist"
@@ -383,181 +483,206 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
     >
       <div className="chatv2-optlist__head">
         {prompt && <div className="chatv2-optlist__prompt">{prompt}</div>}
-        <div className="chatv2-optlist__meta">
-          {multi
-            ? `${sections.length} sections · ${totalSelected} picked${streaming ? ' · loading more…' : ''}`
-            : (() => {
-                const sec = sections[0];
-                let s = `${sec.options.length} option${sec.options.length === 1 ? '' : 's'}`;
-                if (streaming) s += ' · loading more…';
-                if (sec.multiSelect && sec.min === sec.max) s += ` · pick exactly ${sec.min}`;
-                if (sec.multiSelect && sec.min !== sec.max) s += ` · pick ${sec.min}–${sec.max}`;
-                return s;
-              })()}
-        </div>
       </div>
 
       {sections.map((sec, sIdx) => {
         const sel = selectedBySection[sIdx] ?? new Set<string>();
-        const isLastSection = sIdx === sections.length - 1;
+        const sharedSite = sectionSingleSite[sIdx];
+        const siteIconUrl = sharedSite && sec.options[0]?.url
+          ? siteFaviconUrl(sec.options[0].url)
+          : undefined;
+
         return (
           <div key={sIdx} className="chatv2-optlist__section">
-            {multi && (
-              <div className="chatv2-optlist__section-head">
-                {sec.label && <div className="chatv2-optlist__section-label">{sec.label}</div>}
-                <div className="chatv2-optlist__section-meta">
-                  {sec.options.length} option{sec.options.length === 1 ? '' : 's'}
-                  {sec.multiSelect && sec.min === sec.max && ` · pick exactly ${sec.min}`}
-                  {sec.multiSelect && sec.min !== sec.max && ` · pick ${sec.min}–${sec.max}`}
-                  {!sec.multiSelect && ' · pick one'}
+            <div className="chatv2-optlist__section-head">
+              {multi && sec.label && (
+                <div className="chatv2-optlist__section-label">{sec.label}</div>
+              )}
+              {sharedSite && (
+                <div className="chatv2-optlist__source">
+                  {siteIconUrl && (
+                    <img
+                      className="chatv2-optlist__source-icon"
+                      src={siteIconUrl}
+                      alt=""
+                      width={14}
+                      height={14}
+                      onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+                    />
+                  )}
+                  <span className="chatv2-optlist__source-label">Results from <b className="chatv2-optlist__source-name">{sharedSite}</b></span>
                 </div>
-              </div>
-            )}
+              )}
+              {sec.multiSelect && (
+                <div className="chatv2-optlist__multi-hint">
+                  {multiSelectHint(sec, sel.size)}
+                </div>
+              )}
+              {streaming && (
+                <div className="chatv2-optlist__streaming-hint">
+                  scraping {sharedSite ?? 'results'}…
+                </div>
+              )}
+            </div>
+
             <div
               ref={(el) => { gridRefs.current[sIdx] = el; }}
               className="chatv2-optlist__grid"
               tabIndex={locked ? -1 : 0}
               onKeyDown={(e) => handleSectionKey(sIdx, e)}
             >
-              {sec.options.map((opt, idx) => (
-                <OptionCard
-                  key={opt.id}
-                  opt={opt}
-                  fieldSchema={effectiveSchemas[sIdx] ?? []}
-                  selected={sel.has(opt.id)}
-                  focused={!locked && cursor.section === sIdx && cursor.option === idx}
-                  disabled={locked}
-                  onClick={() => {
-                    if (locked) return;
-                    setCursor({ section: sIdx, option: idx });
-                    toggle(sIdx, idx);
-                    gridRefs.current[sIdx]?.focus({ preventScroll: true });
-                  }}
-                  onHover={() => { if (!locked) setCursor({ section: sIdx, option: idx }); }}
-                />
-              ))}
-              {sec.allowOther && (
-                <OtherCard
-                  selected={sel.has(OTHER_TOKEN)}
-                  text={otherTextBySection[sIdx] ?? ''}
-                  disabled={locked}
-                  inputRef={(el) => { otherInputRefs.current[sIdx] = el; }}
-                  onPick={() => {
-                    if (locked) return;
-                    setSelectedBySection((prev) => {
-                      const next = prev.slice();
-                      const set = new Set(prev[sIdx]);
-                      if (sec.multiSelect) {
-                        if (set.has(OTHER_TOKEN)) set.delete(OTHER_TOKEN);
-                        else if (set.size < sec.max) set.add(OTHER_TOKEN);
-                      } else {
-                        set.clear();
-                        set.add(OTHER_TOKEN);
-                      }
-                      next[sIdx] = set;
-                      return next;
-                    });
-                    // Auto-focus the text input on first pick so the user
-                    // can type immediately without an extra click.
-                    setTimeout(() => otherInputRefs.current[sIdx]?.focus(), 0);
-                  }}
-                  onTextChange={(text) => {
-                    setOtherTextBySection((prev) => {
-                      const next = prev.slice();
-                      next[sIdx] = text;
-                      return next;
-                    });
-                    // Typing implies picking the Other card.
-                    if (!sel.has(OTHER_TOKEN)) {
-                      setSelectedBySection((prev) => {
-                        const next = prev.slice();
-                        const set = new Set(prev[sIdx]);
-                        if (sec.multiSelect && set.size < sec.max) set.add(OTHER_TOKEN);
-                        else if (!sec.multiSelect) { set.clear(); set.add(OTHER_TOKEN); }
-                        next[sIdx] = set;
-                        return next;
-                      });
-                    }
-                  }}
-                />
-              )}
-              {streaming && isLastSection && Array.from({ length: TRAILING_SKELETONS_WHILE_STREAMING }).map((_, i) => (
-                <div key={`skel-${i}`} className="chatv2-optlist__skel-card" aria-hidden="true">
-                  <div className="chatv2-optlist__skel-panel" />
-                  <div className="chatv2-optlist__skel-body">
-                    <div className="chatv2-optlist__skel-line chatv2-optlist__skel-line--med" />
-                    <div className="chatv2-optlist__skel-line chatv2-optlist__skel-line--short" />
-                  </div>
-                </div>
-              ))}
+              {sec.options.map((opt, idx) => {
+                const isConfirmed = sel.has(opt.id);
+                return (
+                  <OptionCard
+                    key={opt.id}
+                    opt={opt}
+                    fieldSchema={effectiveSchemas[sIdx] ?? []}
+                    selected={isConfirmed}
+                    focused={!locked && cursor.section === sIdx && cursor.option === idx}
+                    disabled={locked}
+                    isConfirmed={isConfirmed}
+                    multiSelect={sec.multiSelect}
+                    showPerCardFavicon={!sharedSite}
+                    onClick={() => {
+                      if (locked) return;
+                      setCursor({ section: sIdx, option: idx });
+                      toggle(sIdx, idx);
+                      gridRefs.current[sIdx]?.focus({ preventScroll: true });
+                    }}
+                    onHover={() => { if (!locked) setCursor({ section: sIdx, option: idx }); }}
+                    onChoose={() => chooseCard(sIdx, idx)}
+                  />
+                );
+              })}
             </div>
+
+            {sec.allowOther && (
+              <OtherLink
+                disabled={locked}
+                onClick={() => {
+                  // Focus the chat input so the user can type their custom answer.
+                  // Try the window event first (Electron bridge); fall back to DOM query.
+                  try {
+                    window.dispatchEvent(new CustomEvent('chatv2:focus-input'));
+                  } catch {
+                    // ignore
+                  }
+                  const input = document.querySelector<HTMLElement>('[data-chat-input]');
+                  input?.focus();
+                }}
+              />
+            )}
           </div>
         );
       })}
 
-      <div className="chatv2-optlist__foot">
-        <button
-          type="button"
-          className="chatv2-optlist__submit"
-          disabled={!canSubmit || locked}
-          onClick={() => { void submit(); }}
-        >
-          {submitLabel}
-        </button>
-        {submitError ? (
-          <span className="chatv2-optlist__hint" style={{ color: '#ff7a7a' }}>{submitError}</span>
+      {/* Foot Confirm — only for multi-select sections, and only once the
+          user has picked enough to actually submit. The disabled placeholder
+          ("Pick from … to continue") is visual noise — better to show nothing
+          until there's a real action to take. */}
+      {sections.some((sec) => sec.multiSelect) && canSubmit && !locked && (
+        <div className="chatv2-optlist__foot">
+          <button
+            type="button"
+            className="chatv2-optlist__submit"
+            onClick={() => { void submit(); }}
+          >
+            {submitLabel}
+          </button>
+        </div>
+      )}
+      {/* Show submit error in its own foot when present, regardless of mode. */}
+      {submitError && (
+        <div className="chatv2-optlist__foot">
+          <span className="chatv2-optlist__submit-error">{submitError}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function ChosenReceipt({ opt }: { opt: OptionItem }): React.ReactElement {
+  const [imgBroken, setImgBroken] = useState(false);
+  const [faviconBroken, setFaviconBroken] = useState(false);
+  const priceField = opt.fields?.Price ?? opt.fields?.price;
+  const faviconSrc = siteFaviconUrl(opt.url);
+
+  return (
+    <div className="chatv2-optlist__chosen-receipt">
+      <div className="chatv2-optlist__chosen-thumb">
+        {!imgBroken ? (
+          <img
+            src={opt.image}
+            alt=""
+            className="chatv2-optlist__chosen-img"
+            onError={() => setImgBroken(true)}
+          />
         ) : (
-          <span className="chatv2-optlist__hint">
-            <span className="chatv2-optlist__kbd">←</span>
-            <span className="chatv2-optlist__kbd">→</span>navigate ·
-            <span className="chatv2-optlist__kbd">↵</span>confirm
-          </span>
+          <span className="chatv2-optlist__chosen-thumb-broken" aria-hidden="true">🖼</span>
         )}
       </div>
+      <div className="chatv2-optlist__chosen-text">
+        <div className="chatv2-optlist__chosen-label">
+          <span className="chatv2-optlist__chosen-title">{opt.title}</span>
+        </div>
+        <div className="chatv2-optlist__chosen-meta">
+          {faviconSrc && !faviconBroken && (
+            <img
+              className="chatv2-optlist__chosen-favicon"
+              src={faviconSrc}
+              alt=""
+              width={12}
+              height={12}
+              onError={() => setFaviconBroken(true)}
+            />
+          )}
+          <span className="chatv2-optlist__chosen-site">{opt.site}</span>
+          {priceField && (
+            <>
+              <span className="chatv2-optlist__chosen-sep" aria-hidden="true">·</span>
+              <span className="chatv2-optlist__chosen-price">{priceField}</span>
+            </>
+          )}
+        </div>
+      </div>
     </div>
   );
 }
 
-function formatChosenSummary(
-  sections: OptionListSection[],
-  selectedBySection: Set<string>[],
-  otherTextBySection: string[],
-): string {
-  const titles: string[] = [];
-  sections.forEach((sec, i) => {
-    const sel = selectedBySection[i] ?? new Set<string>();
-    for (const opt of sec.options) if (sel.has(opt.id)) titles.push(opt.title);
-    if (sel.has(OTHER_TOKEN)) {
-      const text = (otherTextBySection[i] ?? '').trim();
-      titles.push(text ? `Other: ${text}` : 'Other');
-    }
-  });
-  return titles.join(', ');
-}
-
 interface CardProps {
   opt: OptionItem;
-  /** Field labels to render in order across every card; cells missing
-   *  the corresponding value render as "—" to keep alignment. */
   fieldSchema: string[];
   selected: boolean;
   focused: boolean;
   disabled: boolean;
+  isConfirmed: boolean;
+  /** Multi-select mode: button reads "Add"/"Added", stays clickable to toggle off. */
+  multiSelect: boolean;
+  showPerCardFavicon?: boolean;
   onClick: () => void;
   onHover: () => void;
+  onChoose: () => void;
 }
 
-const MISSING_FIELD_GLYPH = '—';
-
-function OptionCard({ opt, fieldSchema, selected, focused, disabled, onClick, onHover }: CardProps): React.ReactElement {
+function OptionCard({
+  opt, fieldSchema, selected, focused, disabled, isConfirmed, multiSelect,
+  showPerCardFavicon, onClick, onHover, onChoose,
+}: CardProps): React.ReactElement {
   const [broken, setBroken] = useState<boolean>(false);
+  const [faviconBroken, setFaviconBroken] = useState<boolean>(false);
+
+  const faviconSrc = showPerCardFavicon ? siteFaviconUrl(opt.url) : undefined;
+
   return (
-    <button
-      type="button"
+    <div
       className="chatv2-optlist__card"
       data-selected={selected}
       data-focused={focused}
-      disabled={disabled}
       onClick={onClick}
       onMouseEnter={onHover}
     >
@@ -571,105 +696,192 @@ function OptionCard({ opt, fieldSchema, selected, focused, disabled, onClick, on
             onError={() => setBroken(true)}
           />
         ) : (
-          <div className="chatv2-optlist__img chatv2-optlist__img--broken">no image</div>
+          <div className="chatv2-optlist__img chatv2-optlist__img--broken" />
         )}
         <span className="chatv2-optlist__pin" aria-hidden="true">✓</span>
       </div>
       <div className="chatv2-optlist__body">
-        <div className="chatv2-optlist__title">{opt.title}</div>
+        <div className="chatv2-optlist__title-row">
+          {faviconSrc && !faviconBroken && (
+            <img
+              className="chatv2-optlist__card-favicon"
+              src={faviconSrc}
+              alt=""
+              width={12}
+              height={12}
+              onError={() => setFaviconBroken(true)}
+            />
+          )}
+          <div className="chatv2-optlist__title">{opt.title}</div>
+        </div>
         {opt.description && <p className="chatv2-optlist__desc">{opt.description}</p>}
-        {fieldSchema.length > 0 && (
+        {(fieldSchema.length > 0 || opt.url) && (
           <dl className="chatv2-optlist__fields">
             {fieldSchema.map((label) => {
               const value = opt.fields?.[label];
+              if (value === undefined) return null;
               return (
                 <div key={label} className="chatv2-optlist__field">
                   <dt className="chatv2-optlist__field-label">{label}</dt>
-                  <dd className="chatv2-optlist__field-value" data-missing={!value}>
-                    {value ?? MISSING_FIELD_GLYPH}
-                  </dd>
+                  <dd className="chatv2-optlist__field-value">{value}</dd>
                 </div>
               );
             })}
+            {/* Source row — content-level "View on X" link. Peer to Price,
+                not a competing action button. Click opens the listing in
+                the user's default browser. */}
+            <div className="chatv2-optlist__field">
+              <dt className="chatv2-optlist__field-label">Source</dt>
+              <dd className="chatv2-optlist__field-value">
+                <a
+                  className="chatv2-optlist__source-link"
+                  href={opt.url}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    try { window.electronAPI?.shell?.openExternal?.(opt.url); } catch { /* ignore */ }
+                  }}
+                >
+                  {!faviconBroken && (
+                    <img
+                      className="chatv2-optlist__source-link-favicon"
+                      src={siteFaviconUrl(opt.url)}
+                      alt=""
+                      width={13}
+                      height={13}
+                      onError={() => setFaviconBroken(true)}
+                    />
+                  )}
+                  View on {opt.site}
+                  <svg
+                    className="chatv2-optlist__source-link-arrow"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M7 17 L17 7 M9 7 H17 V15" />
+                  </svg>
+                </a>
+              </dd>
+            </div>
           </dl>
         )}
+        <div className="chatv2-optlist__actions">
+          <button
+            type="button"
+            className={`chatv2-optlist__choose${isConfirmed ? ' is-confirmed' : ''}`}
+            // Only the parent-level `disabled` (= picker locked after submit)
+            // should block clicks. Single-select selection is transient until
+            // submit runs; selecting a card then clicking Choose is the
+            // intended mouse path, so we must NOT disable on isConfirmed here.
+            disabled={disabled}
+            onClick={(e) => {
+              e.stopPropagation();
+              onChoose();
+            }}
+            aria-pressed={isConfirmed}
+          >
+            <span className="chatv2-optlist__choose-label">{multiSelect ? 'Add' : 'Choose'}</span>
+            <span className="chatv2-optlist__choose-confirm">
+              <svg
+                className="chatv2-optlist__choose-check"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path d="M5 12 L10 17 L19 7" />
+              </svg>
+              <span>{multiSelect ? 'Added' : 'Chosen'}</span>
+            </span>
+          </button>
+        </div>
       </div>
-    </button>
+    </div>
   );
 }
 
-interface OtherCardProps {
-  selected: boolean;
-  text: string;
-  disabled: boolean;
-  inputRef: (el: HTMLTextAreaElement | null) => void;
-  onPick: () => void;
-  onTextChange: (text: string) => void;
-}
-
-/**
- * The "Other — describe…" card appended to every section grid (unless
- * `allowOther: false`). No image, dashed border, transforms to a text
- * input affordance on pick. Lets the user write a custom answer the
- * agent didn't list.
- */
-function OtherCard({ selected, text, disabled, inputRef, onPick, onTextChange }: OtherCardProps): React.ReactElement {
+function OtherLink({ disabled, onClick }: { disabled: boolean; onClick: () => void }): React.ReactElement {
   return (
-    <div
-      className="chatv2-optlist__card chatv2-optlist__card--other"
-      data-selected={selected}
-      role="button"
-      tabIndex={disabled ? -1 : 0}
-      aria-disabled={disabled}
-      onClick={(e) => {
-        if (disabled) return;
-        // Clicks on the textarea shouldn't re-pick (let the input own its
-        // own focus/typing); only outer-card clicks pick.
-        if (e.target instanceof HTMLTextAreaElement) return;
-        onPick();
-      }}
-      onKeyDown={(e) => {
-        if (disabled) return;
-        // Only treat Enter/Space as "pick" when the textarea isn't focused
-        // — otherwise the user can't type newlines / spaces in their answer.
-        if (e.target instanceof HTMLTextAreaElement) return;
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onPick();
-        }
-      }}
+    <button
+      type="button"
+      className="chatv2-optlist__other-link"
+      disabled={disabled}
+      onClick={onClick}
     >
-      <div className="chatv2-optlist__panel chatv2-optlist__panel--other">
-        <span className="chatv2-optlist__other-glyph" aria-hidden="true">+</span>
-        <span className="chatv2-optlist__other-label">Describe what you want</span>
-      </div>
-      <div className="chatv2-optlist__body chatv2-optlist__body--other">
-        <textarea
-          ref={inputRef}
-          className="chatv2-optlist__other-input"
-          placeholder="Type your answer…"
-          value={text}
-          disabled={disabled}
-          rows={3}
-          onChange={(e) => onTextChange(e.target.value)}
-          onClick={(e) => e.stopPropagation()}
-        />
-      </div>
-    </div>
+      none of these? describe what you want
+    </button>
   );
 }
 
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
 /**
- * Build the structured user message that resumes the agent's turn.
- * Single-section single-pick → one-liner. Multi-section or multi-pick
- * → bulleted list. Multi-section lines are prefixed with the section
- * label so the agent can route picks back to categories.
+ * Reverse of formatSelectionMessage: parse the user-reply turn that follows
+ * this picker and reconstruct which options were selected. Returns null when
+ * the text is not a selection reply for this picker (no matching IDs, no
+ * "Other:" mention, or wrong prefix entirely).
+ *
+ * Exported for tests.
  */
+export function deriveSubmissionFromTranscript(
+  text: string | null | undefined,
+  sections: OptionListSection[],
+): { selection: Set<string>[]; otherText: string[] } | null {
+  if (!text) return null;
+  const head = text.trimStart();
+  if (!head.startsWith('Selected from options:')) return null;
+
+  const selection: Set<string>[] = sections.map(() => new Set<string>());
+  const otherText: string[] = sections.map(() => '');
+
+  // Pull every `(id: <id>)` occurrence and route each to the section that
+  // owns that id. IDs are unique within a picker, so first-match wins.
+  const idMatches = Array.from(text.matchAll(/\(id:\s*([^)]+)\)/g));
+  for (const m of idMatches) {
+    const id = m[1].trim();
+    for (let i = 0; i < sections.length; i++) {
+      if (sections[i].options.some((o) => o.id === id)) {
+        selection[i].add(id);
+        break;
+      }
+    }
+  }
+
+  // "Other: <text>" reply. Single-section pickers map unambiguously to
+  // section 0. Multi-section requires a label prefix to attribute the
+  // answer; if the label is missing or doesn't match any known section,
+  // drop the entry rather than guess — guessing risks rendering a
+  // historical receipt as if a different section had been chosen.
+  const otherMatches = Array.from(text.matchAll(/(?:^|\n)[^\n]*?Other:\s*([^\n]+)/g));
+  for (const m of otherMatches) {
+    let target: number;
+    if (sections.length === 1) {
+      target = 0;
+    } else {
+      const line = m[0];
+      const labelMatch = line.match(/(?:^|\n)-\s*([^:]+):\s*Other:/);
+      const label = labelMatch?.[1].trim();
+      const idx = label ? sections.findIndex((s) => s.label === label) : -1;
+      if (idx < 0) continue;
+      target = idx;
+    }
+    selection[target].add(OTHER_TOKEN);
+    otherText[target] = m[1].trim();
+  }
+
+  if (selection.every((s) => s.size === 0)) return null;
+  return { selection, otherText };
+}
+
 function formatSelectionMessage(pickedAcross: { section: OptionListSection; picked: OptionItem[]; otherText: string }[]): string {
   const totalCount = pickedAcross.reduce((n, { picked, otherText }) => n + picked.length + (otherText ? 1 : 0), 0);
   if (totalCount === 0) return 'Selected: (none)';
 
-  // Single section, single pick → terse one-liner.
   const totalSections = pickedAcross.length;
   if (totalSections === 1 && totalCount === 1) {
     const sec = pickedAcross[0];
@@ -680,9 +892,6 @@ function formatSelectionMessage(pickedAcross: { section: OptionListSection; pick
     return `Selected from options: Other: ${sec.otherText}`;
   }
 
-  // Otherwise bulleted. Prefix with section label when there's more than
-  // one section so the agent can route picks back to categories. Other
-  // picks render as `Other: <typed text>` on their own line.
   const lines: string[] = [];
   for (const { section, picked, otherText } of pickedAcross) {
     const prefix = totalSections > 1 && section.label ? `${section.label}: ` : '';
diff --git a/app/src/renderer/hub/chat-v2/askForm.css b/app/src/renderer/hub/chat-v2/askForm.css
index c99ebc11..1430bfac 100644
--- a/app/src/renderer/hub/chat-v2/askForm.css
+++ b/app/src/renderer/hub/chat-v2/askForm.css
@@ -27,13 +27,15 @@
 }
 
 .chatv2-askform__question {
-  background: var(--color-bg-elevated);
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-md, 8px);
-  padding: 14px 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
+  padding: 4px 0;
+}
+.chatv2-askform__question + .chatv2-askform__question {
+  border-top: 1px solid var(--color-border-subtle);
+  padding-top: 14px;
+  margin-top: 6px;
 }
 
 .chatv2-askform__question-head {
@@ -42,17 +44,6 @@
   align-items: baseline;
   gap: 10px;
 }
-.chatv2-askform__question-header {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 10.5px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--color-fg-tertiary);
-  padding: 2px 6px;
-  background: var(--color-bg-base);
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-xs, 3px);
-}
 .chatv2-askform__question-text {
   font-size: 14px;
   font-weight: 500;
@@ -75,7 +66,8 @@
 .chatv2-askform__row {
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: 10px;
+  column-gap: 10px;
+  row-gap: 2px;
   align-items: baseline;
   padding: 7px 8px;
   border-radius: var(--radius-sm, 5px);
@@ -85,13 +77,65 @@
 .chatv2-askform__row:hover {
   background: color-mix(in srgb, var(--color-fg-primary) 4%, transparent);
 }
+/* Custom radio + checkbox so the selected state matches the rest of the
+ * UI (single border, single filled dot) instead of the native control's
+ * doubled-up ring that read as visual noise. */
 .chatv2-askform__row input[type="radio"],
 .chatv2-askform__row input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
   margin: 0;
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid var(--color-border-strong, #555);
+  background: transparent;
   cursor: pointer;
-  accent-color: var(--color-status-success);
-  grid-row: 1 / span 2;
+  display: inline-block;
+  flex-shrink: 0;
+  grid-row: 1;
   align-self: center;
+  transition: border-color var(--duration-fast, 100ms) var(--ease-out, ease),
+              background var(--duration-fast, 100ms) var(--ease-out, ease);
+}
+.chatv2-askform__row input[type="radio"] {
+  border-radius: 50%;
+}
+.chatv2-askform__row input[type="checkbox"] {
+  border-radius: 3px;
+}
+.chatv2-askform__row input[type="radio"]:hover,
+.chatv2-askform__row input[type="checkbox"]:hover {
+  border-color: var(--color-fg-secondary);
+}
+.chatv2-askform__row input[type="radio"]:checked,
+.chatv2-askform__row input[type="checkbox"]:checked {
+  border-color: var(--color-fg-primary);
+  background: var(--color-fg-primary);
+}
+/* Checkmark overlay via a CSS mask so the stroke color follows a theme
+ * variable (--color-bg-base — always the inverse of --color-fg-primary,
+ * the checked fill). Previously the SVG had a hard-coded #111 stroke,
+ * which vanished in light mode where the fill is also near-black. */
+.chatv2-askform__row input[type="checkbox"]:checked {
+  position: relative;
+}
+.chatv2-askform__row input[type="checkbox"]:checked::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-bg-base);
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5 L7 12 L13 5'/></svg>");
+  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5 L7 12 L13 5'/></svg>");
+  -webkit-mask-size: 11px 11px;
+  mask-size: 11px 11px;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+.chatv2-askform__row input:focus-visible {
+  outline: 2px solid var(--color-border-strong);
+  outline-offset: 2px;
 }
 
 .chatv2-askform__option-label {
@@ -181,11 +225,9 @@
 }
 .chatv2-askform__answer:first-of-type { border-top: 0; }
 .chatv2-askform__answer-label {
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 13px;
+  font-weight: 500;
   color: var(--color-fg-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
 }
 .chatv2-askform__answer-value {
   font-size: 13px;
diff --git a/app/src/renderer/hub/chat-v2/htmlBlock.css b/app/src/renderer/hub/chat-v2/htmlBlock.css
index 3ff3fc6c..1abfc864 100644
--- a/app/src/renderer/hub/chat-v2/htmlBlock.css
+++ b/app/src/renderer/hub/chat-v2/htmlBlock.css
@@ -8,6 +8,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  margin: 12px 0;
 }
 
 .chatv2-htmlblock--streaming {
diff --git a/app/src/renderer/hub/chat-v2/htmlBlocks.ts b/app/src/renderer/hub/chat-v2/htmlBlocks.ts
index d7db73b8..624da8e4 100644
--- a/app/src/renderer/hub/chat-v2/htmlBlocks.ts
+++ b/app/src/renderer/hub/chat-v2/htmlBlocks.ts
@@ -25,10 +25,14 @@ export interface OptionItem {
   description?: string;
   /** Arbitrary label→value rows shown at the card foot. The block's
    *  `fieldSchema` (or the union of all options' keys when no schema is
-   *  declared) determines render order; missing values render as "—" so
-   *  cards align vertically across the grid. */
+   *  declared) determines render order; missing values are omitted so
+   *  cards may have different heights across the grid. */
   fields?: Record<string, string>;
-  url?: string;
+  /** Required. Full URL to the product page. Options without a URL are dropped. */
+  url: string;
+  /** Required. Brand token only — "Amazon", "Instacart", "Airbnb", etc.
+   *  No TLD, no `.com`. Options without a site are dropped. */
+  site: string;
 
   // Backward-compat syntactic sugar — these get folded into `fields` /
   // `description` by the parser. New callers should set fields/description
@@ -377,7 +381,7 @@ export function parseOptionList(raw: string, opts: { partial?: boolean } = {}):
         options: obj.options,
       });
       if (!section) {
-        return { parsed: null, error: 'no valid options (each option needs id, image, title)' };
+        return { parsed: null, error: 'no valid options (each option needs id, image, title, url, site)' };
       }
       return { parsed: { prompt, sections: [section] } };
     }
@@ -421,7 +425,7 @@ function validateSection(raw: unknown): OptionListSection | null {
     min,
     max,
     fieldSchema: fieldSchema && fieldSchema.length > 0 ? fieldSchema : undefined,
-    allowOther: typeof o.allowOther === 'boolean' ? o.allowOther : true,
+    allowOther: typeof o.allowOther === 'boolean' ? o.allowOther : false,
     options,
   };
 }
@@ -488,7 +492,7 @@ function extractPartial(raw: string): { parsed: OptionListPayload | null; error?
         multiSelect,
         min,
         max,
-        allowOther: true,
+        allowOther: false,
         options,
       }],
     },
@@ -547,7 +551,17 @@ function validateOption(raw: unknown): OptionItem | null {
   const id = typeof o.id === 'string' ? o.id.trim() : '';
   const image = typeof o.image === 'string' ? o.image.trim() : '';
   const title = typeof o.title === 'string' ? o.title.trim() : '';
-  if (!id || !image || !title) return null;
+  const url = typeof o.url === 'string' ? o.url.trim() : '';
+  const site = typeof o.site === 'string' ? o.site.trim() : '';
+  // url and site are now required — drop options that omit either.
+  if (!id || !image || !title || !url || !site) return null;
+  // url must be an absolute http(s) URL — both because shell.openExternal
+  // rejects anything else, and because relative/`javascript:`/data URLs from
+  // a model-emitted block shouldn't be navigated to. image must be remote
+  // too since it goes into an <img src> on a renderer that has no concept
+  // of the agent's working directory.
+  if (!isAbsoluteHttpUrl(url) || !isAbsoluteHttpUrl(image)) return null;
+  if (isLikelyDecorativeOptionImage(image)) return null;
 
   // Coerce the agent-supplied `fields` map into a clean string→string record.
   const fields: Record<string, string> = {};
@@ -574,10 +588,35 @@ function validateOption(raw: unknown): OptionItem | null {
     title,
     description,
     fields: Object.keys(fields).length > 0 ? fields : undefined,
-    url: typeof o.url === 'string' ? o.url : undefined,
+    url,
+    site,
   };
 }
 
+function isAbsoluteHttpUrl(value: string): boolean {
+  try {
+    const u = new URL(value);
+    return u.protocol === 'http:' || u.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+function isLikelyDecorativeOptionImage(imageUrl: string): boolean {
+  let pathname = imageUrl.toLowerCase();
+  try {
+    const parsed = new URL(imageUrl);
+    pathname = `${parsed.hostname}${parsed.pathname}`.toLowerCase();
+  } catch {
+    // Keep the raw string fallback for tests and partially-formed URLs.
+  }
+
+  return pathname.includes('airbnbplatformassets')
+    || pathname.includes('airbnb-platform-assets')
+    || pathname.includes('guestfavorite')
+    || pathname.includes('orthographic-images');
+}
+
 // ---------------------------------------------------------------------------
 // `ask` fence — questionnaire with text-only options.
 // ---------------------------------------------------------------------------
diff --git a/app/src/renderer/hub/chat-v2/optionList.css b/app/src/renderer/hub/chat-v2/optionList.css
index deaee81c..ea60699a 100644
--- a/app/src/renderer/hub/chat-v2/optionList.css
+++ b/app/src/renderer/hub/chat-v2/optionList.css
@@ -14,29 +14,35 @@
   flex-direction: column;
   gap: 14px;
   margin-top: 18px;
-  padding: 18px 20px 16px;
-  background: var(--color-bg-base);
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-lg, 10px);
+  padding: 4px 0;
 }
 
-/* Post-submit collapsed view — chosen item(s) render as horizontal summary
- * chips (image left, text right) instead of squeezing into the picker grid.
- * Dashed outer border reads as "completed", no foot, no kbd nav. */
+/* Post-submit chosen view — collapsed receipt. The product cards below
+ * still carry their own border/background so the picker reads as a
+ * receipt-row in the chat flow, not a boxed container. */
 .chatv2-optlist--chosen {
-  background: transparent;
-  border-style: dashed;
+  padding: 4px 0;
 }
-.chatv2-optlist--chosen .chatv2-optlist__prompt {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-fg-secondary);
+
+/* Cancelled state — session ended before pick. */
+.chatv2-optlist--cancelled .chatv2-optlist__grid {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.chatv2-optlist--cancelled .chatv2-optlist__actions {
+  display: none;
+}
+
+.chatv2-optlist__cancelled-banner {
+  font-size: 12.5px;
+  color: var(--color-fg-tertiary);
+  padding: 8px 0 0;
 }
 
 .chatv2-optlist__head {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
 }
 .chatv2-optlist__prompt {
   font-size: 16px;
@@ -45,11 +51,6 @@
   letter-spacing: -0.005em;
   line-height: 1.3;
 }
-.chatv2-optlist__meta {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 11px;
-  color: var(--color-fg-tertiary);
-}
 
 .chatv2-optlist__grid {
   display: grid;
@@ -58,9 +59,7 @@
   outline: none;
 }
 
-/* Multi-section picker — one labeled sub-grid per category. Sections
- * stack vertically inside the same picker shell with a single Confirm
- * button at the foot bundling every section's picks. */
+/* Multi-section picker — one labeled sub-grid per category. */
 .chatv2-optlist__section {
   display: flex;
   flex-direction: column;
@@ -68,9 +67,9 @@
 }
 .chatv2-optlist__section-head {
   display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 .chatv2-optlist__section-label {
   font-size: 14px;
@@ -78,12 +77,46 @@
   color: var(--color-fg-primary);
   letter-spacing: -0.005em;
 }
-.chatv2-optlist__section-meta {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 11px;
+
+/* Source attribution line: favicon + "Results from {site}" */
+.chatv2-optlist__source {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.chatv2-optlist__source-icon {
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+  object-fit: contain;
+  display: block;
+}
+.chatv2-optlist__source-label {
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--color-fg-secondary);
+}
+.chatv2-optlist__source-name {
+  color: var(--color-fg-primary);
+  font-weight: 600;
+}
+/* Multi-select subtitle: tells user upfront they can pick more than one
+   ("Pick any", "Pick 1–3", "Pick exactly 2") + running added count. */
+.chatv2-optlist__multi-hint {
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--color-fg-secondary);
+  margin-top: 2px;
+}
+
+/* Streaming hint shown in section head while options are still arriving. */
+.chatv2-optlist__streaming-hint {
+  font-size: 11.5px;
   color: var(--color-fg-tertiary);
+  margin-left: auto;
 }
 
+/* Card — now a plain div (click propagation handled by inner Choose button) */
 .chatv2-optlist__card {
   background: var(--color-bg-elevated);
   border: 1px solid var(--color-border-subtle);
@@ -99,10 +132,9 @@
   transition:
     border-color var(--duration-fast, 120ms) var(--ease-out, ease),
     transform var(--duration-fast, 120ms) var(--ease-out, ease),
-    box-shadow var(--duration-fast, 120ms) var(--ease-out, ease),
-    opacity var(--duration-fast, 120ms) var(--ease-out, ease);
+    box-shadow var(--duration-fast, 120ms) var(--ease-out, ease);
 }
-.chatv2-optlist__card:hover:not(:disabled) {
+.chatv2-optlist__card:hover {
   border-color: var(--color-border-default);
   transform: translateY(-1px);
 }
@@ -110,80 +142,13 @@
   border-color: var(--color-border-strong);
 }
 .chatv2-optlist__card[data-selected="true"] {
-  /* Solid 2px accent ring via outline so it renders uniformly around
-   * the rounded corners (the inset box-shadow alternative reads thicker
-   * along the curved bottom edge due to anti-aliasing). */
-  border-color: var(--color-status-success);
-  outline: 1px solid var(--color-status-success);
+  border-color: var(--color-fg-primary);
+  outline: 1px solid var(--color-fg-primary);
   outline-offset: -1px;
 }
-.chatv2-optlist__card:active:not(:disabled) {
+.chatv2-optlist__card:active {
   transform: translateY(0) scale(0.99);
 }
-.chatv2-optlist__card:disabled {
-  cursor: default;
-  transform: none;
-}
-
-/* "Other — describe…" card. No product image; dashed border to read as
- * an escape valve rather than a peer product. The top panel shows a
- * "+" glyph + a small label so the empty panel doesn't feel inert.
- * The bottom body is a tall textarea that fills the remaining card
- * height instead of a tiny one-line input on top of dead whitespace. */
-.chatv2-optlist__card--other {
-  border-style: dashed;
-}
-.chatv2-optlist__card--other[data-selected="true"] {
-  border-style: solid;
-}
-.chatv2-optlist__panel--other {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  background: transparent;
-}
-.chatv2-optlist__other-glyph {
-  font-size: 40px;
-  line-height: 1;
-  color: var(--color-fg-tertiary);
-  font-weight: 300;
-  transition: color var(--duration-fast, 120ms) var(--ease-out, ease);
-}
-.chatv2-optlist__other-label {
-  font-size: 12px;
-  color: var(--color-fg-tertiary);
-}
-.chatv2-optlist__card--other[data-selected="true"] .chatv2-optlist__other-glyph {
-  color: var(--color-status-success);
-}
-.chatv2-optlist__body--other {
-  padding: 12px;
-  display: flex;
-}
-.chatv2-optlist__other-input {
-  width: 100%;
-  flex: 1;
-  min-height: 80px;
-  resize: vertical;
-  background: var(--color-bg-base);
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-sm, 4px);
-  padding: 8px 10px;
-  font-family: inherit;
-  font-size: 13px;
-  line-height: 1.4;
-  color: var(--color-fg-primary);
-}
-.chatv2-optlist__other-input:focus {
-  outline: none;
-  border-color: var(--color-border-strong);
-}
-.chatv2-optlist__other-input:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
 
 .chatv2-optlist__panel {
   position: relative;
@@ -201,10 +166,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
   color: var(--color-fg-tertiary);
 }
+
+/* Selection check pin — appears on image when selected */
 .chatv2-optlist__pin {
   position: absolute;
   top: 10px;
@@ -220,8 +186,6 @@
   align-items: center;
   justify-content: center;
   font-size: 13px;
-  /* Spring easing on transform so the check pops in with a subtle
-   * overshoot when the card becomes selected. */
   transform: scale(0.7);
   transition:
     transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
@@ -230,8 +194,8 @@
     color 160ms var(--ease-out, ease);
 }
 .chatv2-optlist__card[data-selected="true"] .chatv2-optlist__pin {
-  background: var(--color-status-success);
-  color: #062213;
+  background: var(--color-fg-primary);
+  color: var(--color-bg-base);
   opacity: 1;
   transform: scale(1);
 }
@@ -240,12 +204,25 @@
 }
 
 .chatv2-optlist__body {
-  padding: 14px 16px 16px;
+  padding: 14px 16px 12px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   flex: 1;
 }
+
+.chatv2-optlist__title-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.chatv2-optlist__card-favicon {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
 .chatv2-optlist__title {
   font-size: 15px;
   font-weight: 600;
@@ -264,16 +241,15 @@
   overflow: hidden;
 }
 
-/* Label/value rows at the foot of every card. Schema is shared across
- * cards in a block so columns align vertically. Missing values render
- * as "—" via the data-missing attribute. */
+/* Label/value rows at the foot of every card. Missing values are simply
+ * omitted — cards may have different heights. */
 .chatv2-optlist__fields {
-  margin: 8px 0 0;
-  padding: 8px 0 0;
+  margin: 6px 0 0;
+  padding: 6px 0 0;
   border-top: 1px solid var(--color-border-subtle);
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 3px;
 }
 .chatv2-optlist__field {
   display: grid;
@@ -286,8 +262,6 @@
   font-size: 10.5px;
   font-weight: 500;
   color: var(--color-fg-tertiary);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -303,32 +277,170 @@
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
 }
-.chatv2-optlist__field-value[data-missing="true"] {
+
+/* ─── Action row (View + Choose) ─────────────────────────────────────────
+ * Bottom-aligned with margin-top: auto so action rows align across cards
+ * of differing content heights. Buttons inside this row are normalized to
+ * the same min-height so the picker reads as a regular product grid. */
+.chatv2-optlist__actions {
+  margin-top: auto;
+  padding-top: 12px;
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+}
+
+/* ─── Choose button (primary) ────────────────────────────────────────── */
+.chatv2-optlist__choose {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--color-bg-base);
+  background: var(--color-fg-primary);
+  border: 0;
+  cursor: pointer;
+  padding: 11px 16px;
+  border-radius: 999px;
+  min-height: 42px;
+  transition:
+    background 220ms cubic-bezier(0.16, 1, 0.3, 1),
+    transform 80ms cubic-bezier(0.4, 0, 1, 1);
+}
+/* ─── Source row link ────────────────────────────────────────────────────
+ * "View on {site}" rendered as a value in the field list, peer to Price.
+ * Click opens the source listing in the user's default browser. */
+.chatv2-optlist__source-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--color-fg-primary);
+  text-decoration: none;
+  cursor: pointer;
+  transition: opacity 120ms ease;
+}
+.chatv2-optlist__source-link:hover {
+  text-decoration: underline;
+  opacity: 0.85;
+}
+.chatv2-optlist__source-link-favicon {
+  width: 13px;
+  height: 13px;
+  border-radius: 2px;
+  display: inline-block;
+  flex-shrink: 0;
+}
+.chatv2-optlist__source-link-arrow {
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  opacity: 0.6;
+}
+.chatv2-optlist__choose:hover:not(:disabled) {
+  filter: brightness(0.93);
+}
+.chatv2-optlist__choose:active:not(:disabled) {
+  transform: scale(0.97);
+}
+.chatv2-optlist__choose:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.chatv2-optlist__choose-label,
+.chatv2-optlist__choose-confirm {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  transition:
+    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
+    transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.chatv2-optlist__choose-label  { opacity: 1; transform: translateY(0); }
+.chatv2-optlist__choose-confirm { opacity: 0; transform: translateY(6px); pointer-events: none; }
+
+.chatv2-optlist__choose-check {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.chatv2-optlist__choose-check path {
+  stroke-dasharray: 28;
+  stroke-dashoffset: 28;
+  transition: stroke-dashoffset 320ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
+}
+
+/* No pointer-events rule on .is-confirmed — single-select locks via the
+   button's disabled attribute (irreversible pick), multi-select stays
+   clickable so the user can un-toggle "Added ✓" picks. */
+.chatv2-optlist__choose.is-confirmed .chatv2-optlist__choose-label  { opacity: 0; transform: translateY(-6px); }
+.chatv2-optlist__choose.is-confirmed .chatv2-optlist__choose-confirm { opacity: 1; transform: translateY(0); }
+.chatv2-optlist__choose.is-confirmed .chatv2-optlist__choose-check path { stroke-dashoffset: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .chatv2-optlist__choose,
+  .chatv2-optlist__choose-label,
+  .chatv2-optlist__choose-confirm,
+  .chatv2-optlist__choose-check path { transition: none !important; }
+}
+
+/* ─── Other affordance — small text link below grid ─────────────────── */
+.chatv2-optlist__other-link {
+  align-self: flex-start;
+  background: none;
+  border: none;
+  padding: 0;
+  margin-top: 2px;
+  font-family: inherit;
+  font-size: 12px;
   color: var(--color-fg-tertiary);
-  font-weight: 400;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color var(--duration-fast, 120ms) var(--ease-out, ease);
+}
+.chatv2-optlist__other-link:hover:not(:disabled) {
+  color: var(--color-fg-secondary);
+}
+.chatv2-optlist__other-link:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
+/* ─── Foot Confirm (multi-select only) ─────────────────────────────── */
 .chatv2-optlist__foot {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--color-border-subtle);
 }
 .chatv2-optlist__submit {
-  background: var(--color-status-success);
-  color: #062213;
+  background: var(--color-fg-primary);
+  color: var(--color-bg-base);
   border: 0;
-  padding: 9px 18px;
-  border-radius: var(--radius-md, 6px);
+  padding: 11px 24px;
+  border-radius: 999px;
   font-family: inherit;
-  font-size: 13px;
+  font-size: 13.5px;
   font-weight: 600;
   cursor: pointer;
   transition: filter var(--duration-fast, 100ms) var(--ease-out, ease);
 }
 .chatv2-optlist__submit:hover:not(:disabled) {
-  filter: brightness(1.08);
+  filter: brightness(0.93);
 }
 .chatv2-optlist__submit:disabled {
   background: transparent;
@@ -336,33 +448,95 @@
   border: 1px solid var(--color-border-subtle);
   cursor: not-allowed;
 }
-.chatv2-optlist__hint {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 11px;
-  color: var(--color-fg-tertiary);
+.chatv2-optlist__submit-error {
+  font-size: 12px;
+  color: var(--color-status-danger, #ff7a7a);
 }
-.chatv2-optlist__kbd {
-  display: inline-block;
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 10.5px;
-  padding: 1px 5px;
+
+/* ─── Chosen receipt (post-submit) ─────────────────────────────────── */
+.chatv2-optlist__chosen-receipt {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.chatv2-optlist__chosen-thumb {
+  width: 44px;
+  height: 44px;
+  border-radius: 6px;
+  overflow: hidden;
+  flex-shrink: 0;
   background: var(--color-bg-elevated);
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-xs, 3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.chatv2-optlist__chosen-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.chatv2-optlist__chosen-thumb--other {
+  color: var(--color-fg-tertiary);
+  font-size: 18px;
+}
+.chatv2-optlist__chosen-thumb-broken {
+  font-size: 18px;
+  color: var(--color-fg-tertiary);
+}
+.chatv2-optlist__chosen-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+.chatv2-optlist__chosen-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
   color: var(--color-fg-primary);
-  margin: 0 2px;
+  min-width: 0;
+}
+.chatv2-optlist__chosen-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chatv2-optlist__chosen-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--color-fg-tertiary);
+}
+.chatv2-optlist__chosen-favicon {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+.chatv2-optlist__chosen-site {
+  font-weight: 600;
+  color: var(--color-fg-primary);
+}
+.chatv2-optlist__chosen-sep {
+  color: var(--color-fg-quaternary, var(--color-fg-tertiary));
+}
+.chatv2-optlist__chosen-price {
+  color: var(--color-fg-secondary);
 }
 
-/* Skeleton state — block opened, JSON still streaming. */
+/* ─── Skeleton state ────────────────────────────────────────────────── */
 .chatv2-optlist__skel-card {
   background: var(--color-bg-elevated);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-xl, 12px);
   overflow: hidden;
 }
-/* Theme-relative shimmer — works in both light and dark because it
- * derives from the foreground color, not from bg tokens that may
- * collapse to pure white in light mode. */
+/* Theme-relative shimmer — works in both light and dark. */
 .chatv2-optlist__skel-panel {
   aspect-ratio: 4 / 3;
   background: linear-gradient(110deg,
@@ -397,7 +571,6 @@
 }
 
 .chatv2-optlist__error {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
   color: var(--color-fg-tertiary);
   padding: 10px 12px;
diff --git a/app/src/renderer/hub/chat-v2/optionListStore.ts b/app/src/renderer/hub/chat-v2/optionListStore.ts
index 79234d3d..6994d605 100644
--- a/app/src/renderer/hub/chat-v2/optionListStore.ts
+++ b/app/src/renderer/hub/chat-v2/optionListStore.ts
@@ -1,13 +1,13 @@
 /**
- * Tiny in-memory cache so OptionList submitted-state survives ChatTurn
- * unmounts (tab switches). Not persisted across app reload — that case
- * needs transcript-derived state, which is a follow-up.
+ * In-memory write-through cache for the brief window between clicking
+ * Choose/Confirm and the resulting user-message landing on the transcript.
  *
- * Keyed by a structurally encoded sessionId + sorted option ids — those
- * are stable for a given picker emission since the agent's emitted text
- * doesn't change once written. Two pickers with literally identical
- * option-id sets in the same session still share submitted state, but
- * delimiters inside ids cannot move values across tuple boundaries.
+ * Cross-reload persistence is intentionally NOT handled here — for that, the
+ * renderer derives submitted state from the transcript itself (the next
+ * user-message after the picker's turn). This cache only smooths the
+ * optimistic window so the picker doesn't flash back to live mode on a
+ * ChatTurn unmount mid-submit. See OptionList.tsx for the transcript-derived
+ * path that handles historical / reopened sessions.
  */
 
 export interface SubmissionRecord {
diff --git a/app/src/renderer/hub/chat/ChatTranscript.tsx b/app/src/renderer/hub/chat/ChatTranscript.tsx
index 5e2d718e..ee6e32de 100644
--- a/app/src/renderer/hub/chat/ChatTranscript.tsx
+++ b/app/src/renderer/hub/chat/ChatTranscript.tsx
@@ -289,6 +289,11 @@ export const ChatTranscript = forwardRef<HTMLDivElement, ChatTranscriptProps>(fu
           onEditMessage={i === firstUserTurnIdx ? onEditMessage : undefined}
           onShare={i === firstUserTurnIdx ? onShare : undefined}
           isLatest={turns.length > 1 && i === turns.length - 1}
+          // Transcript-derived state for pickers in this turn: the next
+          // turn's user message is the user's response to any options/ask
+          // block emitted here. OptionList/AskForm parse it to render the
+          // collapsed "chose" view in historical sessions without a cache.
+          nextUserText={turns[i + 1]?.userEntry?.content ?? null}
         />
       ))}
     </div>
diff --git a/app/src/renderer/hub/chat/ChatTurn.tsx b/app/src/renderer/hub/chat/ChatTurn.tsx
index 13a6c5a7..babe211e 100644
--- a/app/src/renderer/hub/chat/ChatTurn.tsx
+++ b/app/src/renderer/hub/chat/ChatTurn.tsx
@@ -235,6 +235,10 @@ interface ChatTurnProps {
   /** Threaded through to UserBubble so it can fetch attachments persisted
    *  in session_attachments for this turn's `attachmentTurnIndex`. */
   sessionId?: string;
+  /** Text of the user's reply that follows this turn (i.e. the next turn's
+   *  userEntry.content). Forwarded to OptionList/AskForm so they can detect
+   *  historical submissions from the transcript itself — no client cache. */
+  nextUserText?: string | null;
 }
 
 function AssistantActions({
@@ -408,10 +412,12 @@ function StreamingProse({
   target,
   done,
   sessionId,
+  nextUserText,
 }: {
   target: string;
   done: boolean;
   sessionId?: string;
+  nextUserText?: string | null;
 }): React.ReactElement {
   // Run the block extractor over the full target. Recognizes `html`,
   // `htmlview`, and `options` fences and emits structured events for
@@ -456,6 +462,7 @@ function StreamingProse({
               complete={e.complete}
               error={e.error}
               sessionId={sessionId}
+              nextUserText={nextUserText}
             />
           );
         }
@@ -466,6 +473,7 @@ function StreamingProse({
             complete={e.complete}
             error={e.error}
             sessionId={sessionId}
+            nextUserText={nextUserText}
           />
         );
       })}
@@ -745,7 +753,7 @@ function normalizeProse(s: string): string {
   return (s || '').trim().replace(/\s+/g, ' ');
 }
 
-function renderAgentEntries(entries: OutputEntry[], isLive: boolean, sessionId?: string): React.ReactElement[] {
+function renderAgentEntries(entries: OutputEntry[], isLive: boolean, sessionId?: string, nextUserText?: string | null): React.ReactElement[] {
   // Find the trailing prose target: the last `done`, or the trailing live
   // `thinking` if no `done` has landed yet. Both get suppressed from regular
   // per-entry rendering and collapsed into a single <StreamingProse> at the
@@ -871,6 +879,7 @@ function renderAgentEntries(entries: OutputEntry[], isLive: boolean, sessionId?:
         target={proseTarget}
         done={proseDone}
         sessionId={sessionId}
+        nextUserText={nextUserText}
       />,
     );
   }
@@ -897,7 +906,7 @@ function InflightLabel({ since }: { since: number }): React.ReactElement {
   );
 }
 
-export function ChatTurn({ turn, inflightSince, onEditMessage, onShare, isLatest, sessionId }: ChatTurnProps): React.ReactElement {
+export function ChatTurn({ turn, inflightSince, onEditMessage, onShare, isLatest, sessionId, nextUserText }: ChatTurnProps): React.ReactElement {
   const showInflight = inflightSince !== undefined;
   return (
     <div className={`chat-turn${isLatest ? ' chat-turn--latest' : ''}`}>
@@ -913,7 +922,7 @@ export function ChatTurn({ turn, inflightSince, onEditMessage, onShare, isLatest
       {(showInflight || turn.agentEntries.length > 0 || isLatest) && (
         <div className="chat-agent">
           {showInflight && <InflightLabel since={inflightSince!} />}
-          {renderAgentEntries(turn.agentEntries, showInflight, sessionId)}
+          {renderAgentEntries(turn.agentEntries, showInflight, sessionId, nextUserText)}
           {!showInflight && isLatest && (
             <AssistantActions
               content={turn.agentEntries.find((e) => e.type === 'done')?.content ?? ''}
diff --git a/app/tests/unit/chat-v2/OptionList.spec.tsx b/app/tests/unit/chat-v2/OptionList.spec.tsx
index 39e998f6..df85e395 100644
--- a/app/tests/unit/chat-v2/OptionList.spec.tsx
+++ b/app/tests/unit/chat-v2/OptionList.spec.tsx
@@ -9,6 +9,15 @@ import { _resetSubmissionCacheForTests } from '@/renderer/hub/chat-v2/optionList
 
 (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+// Minimal valid option with required url + site fields
+const mkOpt = (id: string, title: string) => ({
+  id,
+  image: `https://cdn/${id}.jpg`,
+  title,
+  url: `https://amazon.com/dp/${id}`,
+  site: 'Amazon',
+});
+
 function renderOptions(payload: OptionListPayload, sessionId = 'session-1'): { container: HTMLDivElement; root: Root } {
   const container = document.createElement('div');
   document.body.appendChild(container);
@@ -41,7 +50,7 @@ describe('OptionList', () => {
     vi.unstubAllGlobals();
   });
 
-  it('does not show section 0 when only missing Other text blocks submit', () => {
+  it('shows the Other text link when allowOther=true, not a grid card', () => {
     const payload: OptionListPayload = {
       sections: [
         {
@@ -49,27 +58,35 @@ describe('OptionList', () => {
           min: 1,
           max: 1,
           allowOther: true,
-          options: [{ id: 'a', image: 'i', title: 'A' }],
+          options: [mkOpt('a', 'A')],
         },
+      ],
+    };
+    const { container, root } = renderOptions(payload);
+
+    // Other should be rendered as a link, not as a grid card
+    expect(container.querySelector('.chatv2-optlist__card--other')).toBeNull();
+    expect(container.querySelector('.chatv2-optlist__other-link')).not.toBeNull();
+
+    act(() => root.unmount());
+  });
+
+  it('does not show Other link when allowOther=false (default)', () => {
+    const payload: OptionListPayload = {
+      sections: [
         {
           multiSelect: false,
           min: 1,
           max: 1,
           allowOther: false,
-          options: [{ id: 'b', image: 'i', title: 'B' }],
+          options: [mkOpt('b', 'B')],
         },
       ],
     };
     const { container, root } = renderOptions(payload);
 
-    act(() => {
-      container.querySelector<HTMLElement>('.chatv2-optlist__card--other')?.click();
-      container.querySelectorAll<HTMLButtonElement>('button.chatv2-optlist__card')[1]?.click();
-    });
-
-    const label = container.querySelector<HTMLButtonElement>('.chatv2-optlist__submit')?.textContent ?? '';
-    expect(label).toBe('Type your "Other" answer');
-    expect(label).not.toContain('section 0');
+    expect(container.querySelector('.chatv2-optlist__other-link')).toBeNull();
+    expect(container.querySelector('.chatv2-optlist__card--other')).toBeNull();
 
     act(() => root.unmount());
   });
@@ -82,8 +99,8 @@ describe('OptionList', () => {
         max: 1,
         allowOther: false,
         options: [
-          { id: 'a', image: 'i', title: 'A' },
-          { id: 'b', image: 'i', title: 'B' },
+          mkOpt('a', 'A'),
+          mkOpt('b', 'B'),
         ],
       }],
     };
@@ -116,4 +133,36 @@ describe('OptionList', () => {
 
     act(() => root.unmount());
   });
+
+  it('clicking Choose button on a single-select card immediately submits', async () => {
+    const payload: OptionListPayload = {
+      sections: [{
+        multiSelect: false,
+        min: 1,
+        max: 1,
+        allowOther: false,
+        options: [mkOpt('x', 'X'), mkOpt('y', 'Y')],
+      }],
+    };
+    const resume = vi.fn(async () => ({ resumed: true }));
+    Object.defineProperty(window, 'electronAPI', {
+      configurable: true,
+      value: { sessions: { resume } },
+    });
+    const { container, root } = renderOptions(payload);
+
+    // Click the Choose button on the first card
+    const chooseBtn = container.querySelector<HTMLButtonElement>('.chatv2-optlist__choose');
+    expect(chooseBtn).not.toBeNull();
+    await act(async () => {
+      chooseBtn!.click();
+      await Promise.resolve();
+    });
+
+    expect(resume).toHaveBeenCalledTimes(1);
+    const call = resume.mock.calls[0] as unknown as [string, string];
+    expect(call[1]).toContain('id: x');
+
+    act(() => root.unmount());
+  });
 });
diff --git a/app/tests/unit/chat-v2/optionBlocks.test.ts b/app/tests/unit/chat-v2/optionBlocks.test.ts
index bfbaf3ec..384680fc 100644
--- a/app/tests/unit/chat-v2/optionBlocks.test.ts
+++ b/app/tests/unit/chat-v2/optionBlocks.test.ts
@@ -23,12 +23,22 @@ function run(chunks: string[]): ExtractEvent[] {
   return extractAll(chunks);
 }
 
+// Helper: minimal valid option with required url + site fields
+const opt = (id: string, extra?: Record<string, unknown>) => ({
+  id,
+  image: `https://cdn/${id}.jpg`,
+  title: `Option ${id}`,
+  url: `https://amazon.com/dp/${id}`,
+  site: 'Amazon',
+  ...extra,
+});
+
 const SAMPLE = {
   prompt: 'Which SSD?',
   multiSelect: false,
   options: [
-    { id: 'a1', image: 'https://cdn/x.jpg', title: 'Samsung 990 Pro', price: '$169' },
-    { id: 'a2', image: 'https://cdn/y.jpg', title: 'WD Black SN850X', price: '$149' },
+    { id: 'a1', image: 'https://cdn/x.jpg', title: 'Samsung 990 Pro', price: '$169', url: 'https://amazon.com/dp/a1', site: 'Amazon' },
+    { id: 'a2', image: 'https://cdn/y.jpg', title: 'WD Black SN850X', price: '$149', url: 'https://amazon.com/dp/a2', site: 'Amazon' },
   ],
 };
 
@@ -79,6 +89,7 @@ describe('options fence — extraction (legacy single-section)', () => {
   });
 
   it('emits a partial option_list with complete:false when stream ends mid-block', () => {
+    // Option is missing url/site — will be dropped; parsed stays null.
     const partial = '```options\n{"options":[{"id":"a1","image":"x","title":"y"';
     const events = run([partial]);
     expect(events).toHaveLength(1);
@@ -91,8 +102,8 @@ describe('options fence — extraction (legacy single-section)', () => {
   it('progressively parses complete inner objects mid-stream', () => {
     const partial =
       '```options\n{"prompt":"Pick a patty","multiSelect":true,"min":1,"max":2,"options":['
-      + '{"id":"a1","image":"i1","title":"Beyond"},'
-      + '{"id":"a2","image":"i2","title":"Beef 85/15"},'
+      + '{"id":"a1","image":"https://cdn.example/i1.jpg","title":"Beyond","url":"https://amazon.com/a1","site":"Amazon"},'
+      + '{"id":"a2","image":"https://cdn.example/i2.jpg","title":"Beef 85/15","url":"https://amazon.com/a2","site":"Amazon"},'
       + '{"id":"a3","image":"i3"';
     const events = run([partial]);
     expect(events).toHaveLength(1);
@@ -113,8 +124,8 @@ describe('options fence — extraction (legacy single-section)', () => {
   it('clamps negative min while progressively parsing legacy options', () => {
     const partial =
       '```options\n{"multiSelect":true,"min":-2,"max":1,"options":['
-      + '{"id":"a1","image":"i1","title":"A"},'
-      + '{"id":"a2","image":"i2"';
+      + '{"id":"a1","image":"https://cdn.example/i1.jpg","title":"A","url":"https://a.com/1","site":"Amazon"},'
+      + '{"id":"a2","image":"https://cdn.example/i2.jpg"';
     const events = run([partial]);
     const e = events[0];
     expect(e.kind).toBe('option_list');
@@ -126,8 +137,8 @@ describe('options fence — extraction (legacy single-section)', () => {
   it('renders parsed cards even when trailing comma and EOF arrive', () => {
     const partial =
       '```options\n{"options":['
-      + '{"id":"a1","image":"i1","title":"A"},'
-      + '{"id":"a2","image":"i2","title":"B"},';
+      + '{"id":"a1","image":"https://cdn.example/i1.jpg","title":"A","url":"https://a.com/1","site":"Amazon"},'
+      + '{"id":"a2","image":"https://cdn.example/i2.jpg","title":"B","url":"https://a.com/2","site":"Amazon"},';
     const events = run([partial]);
     const e = events[0];
     if (e.kind !== 'option_list') throw new Error('expected option_list');
@@ -137,8 +148,8 @@ describe('options fence — extraction (legacy single-section)', () => {
   it('handles strings containing braces inside option titles', () => {
     const partial =
       '```options\n{"options":['
-      + '{"id":"a1","image":"i1","title":"Brand {limited edition}"},'
-      + '{"id":"a2","image":"i2","title":"Plain"';
+      + '{"id":"a1","image":"https://cdn.example/i1.jpg","title":"Brand {limited edition}","url":"https://a.com/1","site":"Amazon"},'
+      + '{"id":"a2","image":"https://cdn.example/i2.jpg","title":"Plain"';
     const events = run([partial]);
     const e = events[0];
     if (e.kind !== 'option_list') throw new Error('expected option_list');
@@ -156,16 +167,16 @@ describe('options fence — multi-section', () => {
           label: 'Patty',
           multiSelect: false,
           options: [
-            { id: 'patty-1', image: 'i', title: 'Beyond' },
-            { id: 'patty-2', image: 'i', title: 'Beef 85/15' },
+            opt('patty-1', { title: 'Beyond' }),
+            opt('patty-2', { title: 'Beef 85/15' }),
           ],
         },
         {
           label: 'Bun',
           multiSelect: true, min: 1, max: 2,
           options: [
-            { id: 'bun-1', image: 'i', title: 'Brioche' },
-            { id: 'bun-2', image: 'i', title: 'Sesame' },
+            opt('bun-1', { title: 'Brioche' }),
+            opt('bun-2', { title: 'Sesame' }),
           ],
         },
       ],
@@ -185,7 +196,7 @@ describe('options fence — multi-section', () => {
   it('drops sections whose options array yields no valid items', () => {
     const payload = {
       sections: [
-        { label: 'Good', options: [{ id: 'g1', image: 'i', title: 't' }] },
+        { label: 'Good', options: [opt('g1')] },
         { label: 'Bad', options: [{ id: 'b1' }] },   // all options invalid → drop section
       ],
     };
@@ -208,12 +219,12 @@ describe('options fence — multi-section', () => {
         {
           label: 'Patty',
           fieldSchema: ['Price', 'Protein'],
-          options: [{ id: 'p1', image: 'i', title: 't' }],
+          options: [opt('p1')],
         },
         {
           label: 'Bun',
           fieldSchema: ['Price', 'Calories'],
-          options: [{ id: 'b1', image: 'i', title: 't' }],
+          options: [opt('b1')],
         },
       ],
     }));
@@ -225,7 +236,7 @@ describe('options fence — multi-section', () => {
     // First section closes, second section opens but isn't closed.
     const partial =
       '```options\n{"prompt":"Pick ingredients","sections":['
-      + '{"label":"Patty","options":[{"id":"p1","image":"i","title":"Beyond"}]},'
+      + '{"label":"Patty","options":[{"id":"p1","image":"https://cdn.example/p1.jpg","title":"Beyond","url":"https://a.com/p1","site":"Amazon"}]},'
       + '{"label":"Bun","options":[{"id":"b1","image":"i"';
     const events = run([partial]);
     const e = events[0];
@@ -250,19 +261,49 @@ describe('parseOptionList — validation', () => {
     expect(error).toMatch(/options|sections/);
   });
 
+  it('drops options missing url or site', () => {
+    const { parsed } = parseOptionList(JSON.stringify({
+      options: [
+        opt('ok'),
+        { id: 'no-url', image: 'https://cdn.example/i.jpg', title: 't', site: 'Amazon' },       // missing url
+        { id: 'no-site', image: 'https://cdn.example/i.jpg', title: 't', url: 'https://x.com' }, // missing site
+        opt('ok2'),
+      ],
+    }));
+    expect(parsed?.sections[0].options.map((o) => o.id)).toEqual(['ok', 'ok2']);
+  });
+
   it('drops malformed individual options within a section', () => {
     const { parsed } = parseOptionList(JSON.stringify({
       options: [
-        { id: 'ok', image: 'i', title: 't' },
-        { id: 'no-title', image: 'i' },
-        { image: 'i', title: 't' },
-        { id: 'no-image', title: 't' },
-        { id: 'ok2', image: 'i2', title: 't2' },
+        opt('ok'),
+        { id: 'no-title', image: 'https://cdn.example/i.jpg', url: 'https://x', site: 'Amazon' },
+        { image: 'https://cdn.example/i.jpg', title: 't', url: 'https://x', site: 'Amazon' },
+        { id: 'no-image', title: 't', url: 'https://x', site: 'Amazon' },
+        opt('ok2'),
       ],
     }));
     expect(parsed?.sections[0].options.map((o) => o.id)).toEqual(['ok', 'ok2']);
   });
 
+  it('drops known Airbnb badge art instead of rendering it as a listing photo', () => {
+    const { parsed } = parseOptionList(JSON.stringify({
+      options: [
+        opt('badge', {
+          site: 'Airbnb',
+          url: 'https://www.airbnb.com/rooms/896630866775094698',
+          image: 'https://a0.muscache.com/im/pictures/airbnb-platform-assets/AirbnbPlatformAssets-GuestFavorite/original/4d090f93-f9a5-4f06-95e4-ca737c0d0ab5.png?im_w=720',
+        }),
+        opt('listing-photo', {
+          site: 'Airbnb',
+          url: 'https://www.airbnb.com/rooms/1070272052169818710',
+          image: 'https://a0.muscache.com/im/pictures/user/User-556869189/original/57d2e836-1238-47a9-ac83-26a0fd8fe99f.jpeg?im_w=720',
+        }),
+      ],
+    }));
+    expect(parsed?.sections[0].options.map((o) => o.id)).toEqual(['listing-photo']);
+  });
+
   it('rejects when zero options survive in a legacy payload', () => {
     const { parsed, error } = parseOptionList(JSON.stringify({ options: [{ id: 'x' }] }));
     expect(parsed).toBeNull();
@@ -271,7 +312,7 @@ describe('parseOptionList — validation', () => {
 
   it('defaults multiSelect=false, min=1, max=1 when omitted', () => {
     const { parsed } = parseOptionList(JSON.stringify({
-      options: [{ id: 'a', image: 'i', title: 't' }],
+      options: [opt('a')],
     }));
     expect(parsed?.sections[0].multiSelect).toBe(false);
     expect(parsed?.sections[0].min).toBe(1);
@@ -283,12 +324,7 @@ describe('parseOptionList — validation', () => {
       multiSelect: true,
       min: 2,
       max: 3,
-      options: [
-        { id: 'a', image: 'i', title: 't' },
-        { id: 'b', image: 'i', title: 't' },
-        { id: 'c', image: 'i', title: 't' },
-        { id: 'd', image: 'i', title: 't' },
-      ],
+      options: [opt('a'), opt('b'), opt('c'), opt('d')],
     }));
     expect(parsed?.sections[0].multiSelect).toBe(true);
     expect(parsed?.sections[0].min).toBe(2);
@@ -300,11 +336,7 @@ describe('parseOptionList — validation', () => {
       multiSelect: true,
       min: 3,
       max: 1,
-      options: [
-        { id: 'a', image: 'i', title: 't' },
-        { id: 'b', image: 'i', title: 't' },
-        { id: 'c', image: 'i', title: 't' },
-      ],
+      options: [opt('a'), opt('b'), opt('c')],
     }));
     expect(parsed?.sections[0].min).toBe(3);
     expect(parsed?.sections[0].max).toBe(3);
@@ -313,23 +345,23 @@ describe('parseOptionList — validation', () => {
   it('folds legacy price/subtitle/merchant into fields + description', () => {
     const { parsed } = parseOptionList(JSON.stringify({
       options: [{
-        id: 'a', image: 'i', title: 't',
-        subtitle: 's', price: '$9', merchant: 'Amazon', url: 'https://x',
+        id: 'a', image: 'https://cdn.example/i.jpg', title: 't',
+        subtitle: 's', price: '$9', merchant: 'Trader Joes',
+        url: 'https://x.com/a', site: 'Amazon',
       }],
     }));
     const o = parsed?.sections[0].options[0];
     expect(o?.description).toBe('s');
     expect(o?.fields?.Price).toBe('$9');
-    expect(o?.fields?.Merchant).toBe('Amazon');
-    expect(o?.url).toBe('https://x');
+    expect(o?.fields?.Merchant).toBe('Trader Joes');
+    expect(o?.url).toBe('https://x.com/a');
+    expect(o?.site).toBe('Amazon');
   });
 
   it('keeps the agent-supplied description over a stale subtitle', () => {
     const { parsed } = parseOptionList(JSON.stringify({
-      options: [{
-        id: 'a', image: 'i', title: 't',
-        description: 'long form', subtitle: 'short stale',
-      }],
+      options: [{ id: 'a', image: 'https://cdn.example/i.jpg', title: 't', url: 'https://x.com', site: 'Amazon',
+        description: 'long form', subtitle: 'short stale' }],
     }));
     expect(parsed?.sections[0].options[0].description).toBe('long form');
   });
@@ -338,8 +370,8 @@ describe('parseOptionList — validation', () => {
     const { parsed } = parseOptionList(JSON.stringify({
       fieldSchema: ['Price', 'Rating', 'Bedrooms'],
       options: [
-        { id: 'a', image: 'i', title: 't', fields: { Price: '$120', Rating: '4.5★', Bedrooms: '2' } },
-        { id: 'b', image: 'i', title: 't', fields: { Price: '$200', Bedrooms: '3' } },
+        { id: 'a', image: 'https://cdn.example/i.jpg', title: 't', url: 'https://x.com/a', site: 'Amazon', fields: { Price: '$120', Rating: '4.5★', Bedrooms: '2' } },
+        { id: 'b', image: 'https://cdn.example/i.jpg', title: 't', url: 'https://x.com/b', site: 'Amazon', fields: { Price: '$200', Bedrooms: '3' } },
       ],
     }));
     expect(parsed?.sections[0].fieldSchema).toEqual(['Price', 'Rating', 'Bedrooms']);
@@ -350,8 +382,8 @@ describe('parseOptionList — validation', () => {
   it('leaves fieldSchema undefined when not declared', () => {
     const { parsed } = parseOptionList(JSON.stringify({
       options: [
-        { id: 'a', image: 'i', title: 't', fields: { Price: '$1', Rating: '4★' } },
-        { id: 'b', image: 'i', title: 't', fields: { Price: '$2' } },
+        { id: 'a', image: 'https://cdn.example/i.jpg', title: 't', url: 'https://x.com/a', site: 'Amazon', fields: { Price: '$1', Rating: '4★' } },
+        { id: 'b', image: 'https://cdn.example/i.jpg', title: 't', url: 'https://x.com/b', site: 'Amazon', fields: { Price: '$2' } },
       ],
     }));
     expect(parsed?.sections[0].fieldSchema).toBeUndefined();
@@ -359,22 +391,30 @@ describe('parseOptionList — validation', () => {
 
   it('rejects non-string field values silently', () => {
     const { parsed } = parseOptionList(JSON.stringify({
-      options: [{ id: 'a', image: 'i', title: 't', fields: { Price: '$1', Bad: null } }],
+      options: [{ id: 'a', image: 'https://cdn.example/i.jpg', title: 't', url: 'https://x.com/a', site: 'Amazon', fields: { Price: '$1', Bad: null } }],
     }));
     expect(parsed?.sections[0].options[0].fields?.Price).toBe('$1');
     expect(parsed?.sections[0].options[0].fields?.Bad).toBeUndefined();
   });
 
-  it('defaults allowOther=true per section', () => {
+  it('defaults allowOther=false per section', () => {
     const { parsed } = parseOptionList(JSON.stringify({
-      options: [{ id: 'a', image: 'i', title: 't' }],
+      options: [opt('a')],
+    }));
+    expect(parsed?.sections[0].allowOther).toBe(false);
+  });
+
+  it('honors explicit allowOther=true', () => {
+    const { parsed } = parseOptionList(JSON.stringify({
+      options: [opt('a')],
+      allowOther: true,
     }));
     expect(parsed?.sections[0].allowOther).toBe(true);
   });
 
   it('honors explicit allowOther=false', () => {
     const { parsed } = parseOptionList(JSON.stringify({
-      options: [{ id: 'a', image: 'i', title: 't' }],
+      options: [opt('a')],
       allowOther: false,
     }));
     expect(parsed?.sections[0].allowOther).toBe(false);
@@ -383,11 +423,11 @@ describe('parseOptionList — validation', () => {
   it('allowOther defaults per-section in multi-section blocks', () => {
     const { parsed } = parseOptionList(JSON.stringify({
       sections: [
-        { label: 'A', options: [{ id: 'a', image: 'i', title: 't' }] },
-        { label: 'B', allowOther: false, options: [{ id: 'b', image: 'i', title: 't' }] },
+        { label: 'A', options: [opt('a')] },
+        { label: 'B', allowOther: true, options: [opt('b')] },
       ],
     }));
-    expect(parsed?.sections[0].allowOther).toBe(true);
-    expect(parsed?.sections[1].allowOther).toBe(false);
+    expect(parsed?.sections[0].allowOther).toBe(false);
+    expect(parsed?.sections[1].allowOther).toBe(true);
   });
 });
diff --git a/app/tests/unit/hl/skillIndexPrompt.test.ts b/app/tests/unit/hl/skillIndexPrompt.test.ts
index e733b8a5..967c49ec 100644
--- a/app/tests/unit/hl/skillIndexPrompt.test.ts
+++ b/app/tests/unit/hl/skillIndexPrompt.test.ts
@@ -2,7 +2,7 @@ import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { buildSkillIndexPrompt, scanSkillIndex } from '../../../src/main/hl/engines/skillIndexPrompt';
+import { buildSkillIndexPrompt, htmlBlockGuidanceLines, scanSkillIndex } from '../../../src/main/hl/engines/skillIndexPrompt';
 
 let harnessDir: string;
 
@@ -76,3 +76,16 @@ describe('skill index prompt', () => {
     spy.mockRestore();
   });
 });
+
+describe('html block prompt guidance', () => {
+  it('nudges agents to use HTML for dense browser confirmation facts', () => {
+    const prompt = htmlBlockGuidanceLines('dark').join('\n');
+
+    expect(prompt).toContain('dense, easily organized browser results or confirmations');
+    expect(prompt).toContain('shopping/cart/order summaries');
+    expect(prompt).toContain('delivery windows');
+    expect(prompt).toContain('3+ concrete facts');
+    expect(prompt).toContain('Use shadow #f4ecd8 for large structural offset shadows');
+    expect(prompt).toContain('keep accent colors to small highlights');
+  });
+});