From fc36cc687466c718a1c842ceea526d2565fbed2d Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 12:18:35 -0700
Subject: [PATCH 01/17] HtmlBlock: add vertical margin so blocks breathe in the
 chat stream

---
 app/src/renderer/hub/chat-v2/htmlBlock.css | 1 +
 1 file changed, 1 insertion(+)

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 {

From 3aaa82e9a19dde2d667aefae607cb3593987b2ff Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 12:19:30 -0700
Subject: [PATCH 02/17] shell:open-external IPC for opening http(s) URLs in the
 default browser

---
 app/src/main/index.ts         | 11 +++++++++++
 app/src/preload/shell.ts      |  2 ++
 app/src/renderer/globals.d.ts |  1 +
 3 files changed, 14 insertions(+)

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 {

From 7109d7546347042542af07729afa24cee3a5c3a5 Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 12:19:35 -0700
Subject: [PATCH 03/17] options block: require url+site, drop decorative
 images, default allowOther to false

---
 app/src/main/hl/engines/skillIndexPrompt.ts |  10 +-
 app/src/renderer/hub/chat-v2/htmlBlocks.ts  |  40 ++++--
 app/tests/unit/chat-v2/optionBlocks.test.ts | 144 +++++++++++++-------
 3 files changed, 131 insertions(+), 63 deletions(-)

diff --git a/app/src/main/hl/engines/skillIndexPrompt.ts b/app/src/main/hl/engines/skillIndexPrompt.ts
index 3dbce394..8e760618 100644
--- a/app/src/main/hl/engines/skillIndexPrompt.ts
+++ b/app/src/main/hl/engines/skillIndexPrompt.ts
@@ -55,7 +55,8 @@ export function htmlBlockGuidanceLines(theme: 'light' | 'dark' = 'dark'): string
   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.',
+    '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/renderer/hub/chat-v2/htmlBlocks.ts b/app/src/renderer/hub/chat-v2/htmlBlocks.ts
index d7db73b8..c3db701c 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,11 @@ 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;
+  if (isLikelyDecorativeOptionImage(image)) return null;
 
   // Coerce the agent-supplied `fields` map into a clean string→string record.
   const fields: Record<string, string> = {};
@@ -574,10 +582,26 @@ 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 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/tests/unit/chat-v2/optionBlocks.test.ts b/app/tests/unit/chat-v2/optionBlocks.test.ts
index bfbaf3ec..3043723f 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":"i1","title":"Beyond","url":"https://amazon.com/a1","site":"Amazon"},'
+      + '{"id":"a2","image":"i2","title":"Beef 85/15","url":"https://amazon.com/a2","site":"Amazon"},'
       + '{"id":"a3","image":"i3"';
     const events = run([partial]);
     expect(events).toHaveLength(1);
@@ -113,7 +124,7 @@ 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":"a1","image":"i1","title":"A","url":"https://a.com/1","site":"Amazon"},'
       + '{"id":"a2","image":"i2"';
     const events = run([partial]);
     const e = events[0];
@@ -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":"i1","title":"A","url":"https://a.com/1","site":"Amazon"},'
+      + '{"id":"a2","image":"i2","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,7 +148,7 @@ 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":"a1","image":"i1","title":"Brand {limited edition}","url":"https://a.com/1","site":"Amazon"},'
       + '{"id":"a2","image":"i2","title":"Plain"';
     const events = run([partial]);
     const e = events[0];
@@ -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":"i","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: 'i', title: 't', site: 'Amazon' },       // missing url
+        { id: 'no-site', image: 'i', 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: 'i', url: 'https://x', site: 'Amazon' },
+        { image: 'i', 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);
@@ -314,22 +346,22 @@ describe('parseOptionList — validation', () => {
     const { parsed } = parseOptionList(JSON.stringify({
       options: [{
         id: 'a', image: 'i', title: 't',
-        subtitle: 's', price: '$9', merchant: 'Amazon', url: 'https://x',
+        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: 'i', 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: 'i', title: 't', url: 'https://x.com/a', site: 'Amazon', fields: { Price: '$120', Rating: '4.5★', Bedrooms: '2' } },
+        { id: 'b', image: 'i', 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: 'i', title: 't', url: 'https://x.com/a', site: 'Amazon', fields: { Price: '$1', Rating: '4★' } },
+        { id: 'b', image: 'i', 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: 'i', 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);
   });
 });

From 1383ee32ef79859c4fad936ef4f96e178251f499 Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 12:19:40 -0700
Subject: [PATCH 04/17] OptionList: shared-site header w/ favicon, View on
 {site} button, taller cards

---
 app/src/renderer/hub/chat-v2/OptionList.tsx | 715 +++++++++++---------
 app/src/renderer/hub/chat-v2/optionList.css | 420 ++++++++----
 app/tests/unit/chat-v2/OptionList.spec.tsx  |  75 +-
 3 files changed, 745 insertions(+), 465 deletions(-)

diff --git a/app/src/renderer/hub/chat-v2/OptionList.tsx b/app/src/renderer/hub/chat-v2/OptionList.tsx
index 82cdaa46..cf431241 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,15 @@ 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;
 }
 
 const SKELETON_COUNT = 3;
 
 export function OptionList(props: Props): React.ReactElement {
-  const { payload, complete, error, sessionId } = props;
+  const { payload, complete, error, sessionId, cancelled } = props;
 
   // Streaming with no options parsed yet — show a full skeleton screen.
   if (!payload) {
@@ -56,10 +63,14 @@ 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}
+    />
+  );
 }
 
 function OptionListSkeleton(): React.ReactElement {
@@ -86,14 +97,23 @@ 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;
 }
 
-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 +129,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 }: 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 +162,15 @@ 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.
   const cacheKey = useMemo(() => {
     const allIds: string[] = [];
     for (const sec of sections) for (const o of sec.options) allIds.push(o.id);
@@ -139,28 +179,23 @@ 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".
+  // Per-section selected ids.
   const [selectedBySection, setSelectedBySection] = useState<Set<string>[]>(
     () => sections.map((sec) => {
       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] ?? ''),
   );
-  // 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 [submitError, setSubmitError] = useState<string | null>(null);
   const gridRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const otherInputRefs = useRef<(HTMLTextAreaElement | null)[]>([]);
 
-  const locked = submitted;
+  const locked = submitted || (cancelled ?? false);
 
   const toggle = useCallback((sectionIdx: number, optionIdx: number): void => {
     const sec = sections[sectionIdx];
@@ -181,8 +216,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 +225,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;
@@ -265,6 +259,25 @@ function OptionListReady({ payload, sessionId, streaming }: ReadyProps): React.R
     }
   }, [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 +320,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 +336,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 +346,22 @@ 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>
-                      )}
-                    </div>
+              {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">Chose: Other</div>
+                    {(otherTextBySection[sIdx] ?? '').trim() && (
+                      <div className="chatv2-optlist__chosen-meta">{otherTextBySection[sIdx]}</div>
+                    )}
                   </div>
-                )}
-              </div>
+                </div>
+              )}
             </div>
           );
         })}
@@ -374,6 +369,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 +436,185 @@ 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 priceField = opt.fields?.Price ?? opt.fields?.price;
+  const meta = [opt.site, priceField].filter(Boolean).join(' · ');
+
+  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">Chose: {opt.title}</div>
+        {meta && <div className="chatv2-optlist__chosen-meta">{meta}</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 +628,132 @@ 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' : ''}`}
+            // Single-select locks after confirm (irreversible). Multi-select
+            // stays clickable so the user can un-toggle a pick.
+            disabled={disabled || (isConfirmed && !multiSelect)}
+            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>
   );
 }
 
-/**
- * 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.
- */
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
 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 +764,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/optionList.css b/app/src/renderer/hub/chat-v2/optionList.css
index deaee81c..d8d7f3a1 100644
--- a/app/src/renderer/hub/chat-v2/optionList.css
+++ b/app/src/renderer/hub/chat-v2/optionList.css
@@ -20,23 +20,36 @@
   border-radius: var(--radius-lg, 10px);
 }
 
-/* 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, dashed border. */
 .chatv2-optlist--chosen {
   background: transparent;
   border-style: dashed;
+  padding: 14px 18px;
 }
-.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 {
+  background: transparent;
+  border-style: dashed;
+}
+.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 +58,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 +66,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 +74,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 +84,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 +139,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 +149,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 +173,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 +193,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 +201,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 +211,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 +248,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 +269,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 +284,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 +455,65 @@
   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: 2px;
+}
+.chatv2-optlist__chosen-label {
+  font-size: 14px;
+  font-weight: 600;
   color: var(--color-fg-primary);
-  margin: 0 2px;
+}
+.chatv2-optlist__chosen-meta {
+  font-size: 12px;
+  color: var(--color-fg-tertiary);
 }
 
-/* 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 +548,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/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());
+  });
 });

From 386d1b8a4c6ff09524a6c74982b85ecc9c54ab25 Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 12:22:15 -0700
Subject: [PATCH 05/17] Teach agents to surface dense browser confirmations as
 HTML

The Instacart cart confirmation exposed a compact set of page facts, but the HTML guidance mostly named broad artifact categories. Add receipt-style patterns to the interaction skill and pin the prompt nudge so future agents treat shopping and cart confirmations as scannable HTML candidates.

Constraint: Existing renderer accepts static sandboxed HTML from fenced blocks
Rejected: Add renderer heuristics for prose summaries | model-side guidance is narrower and avoids changing transcript rendering
Confidence: high
Scope-risk: narrow
Directive: Keep HTML triggers tied to dense structured facts; short conversational replies should remain markdown
Tested: npm run test -- tests/unit/hl/skillIndexPrompt.test.ts
Tested: npm run typecheck
Tested: npm run lint
Not-tested: Live Claude Code shopping run after prompt update
Co-authored-by: OmX <omx@oh-my-codex.dev>
---
 .../interaction-skills/neobrutalist-html.md   | 28 ++++++++++++++++---
 app/tests/unit/hl/skillIndexPrompt.test.ts    | 13 ++++++++-
 2 files changed, 36 insertions(+), 5 deletions(-)

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..1c217a8c 100644
--- a/app/src/main/hl/stock/interaction-skills/neobrutalist-html.md
+++ b/app/src/main/hl/stock/interaction-skills/neobrutalist-html.md
@@ -1,9 +1,29 @@
 # 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
 
diff --git a/app/tests/unit/hl/skillIndexPrompt.test.ts b/app/tests/unit/hl/skillIndexPrompt.test.ts
index e733b8a5..08c44eb5 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,14 @@ 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');
+  });
+});

From 2bdb2ba0acab4b75882562718d19db3e12cce47a Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 12:31:38 -0700
Subject: [PATCH 06/17] =?UTF-8?q?ChosenReceipt:=20align=20with=20picker=20?=
 =?UTF-8?q?cards=20=E2=80=94=20solid=20border,=20favicon,=20bolded=20site,?=
 =?UTF-8?q?=20no=20Chose:=20prefix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/renderer/hub/chat-v2/OptionList.tsx | 31 ++++++++++++++--
 app/src/renderer/hub/chat-v2/optionList.css | 41 ++++++++++++++++++---
 2 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/app/src/renderer/hub/chat-v2/OptionList.tsx b/app/src/renderer/hub/chat-v2/OptionList.tsx
index cf431241..bc24f613 100644
--- a/app/src/renderer/hub/chat-v2/OptionList.tsx
+++ b/app/src/renderer/hub/chat-v2/OptionList.tsx
@@ -355,7 +355,9 @@ function OptionListReady({ payload, sessionId, streaming, cancelled }: ReadyProp
                     <span aria-hidden="true">✎</span>
                   </div>
                   <div className="chatv2-optlist__chosen-text">
-                    <div className="chatv2-optlist__chosen-label">Chose: Other</div>
+                    <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>
                     )}
@@ -561,8 +563,9 @@ function OptionListReady({ payload, sessionId, streaming, cancelled }: ReadyProp
 
 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 meta = [opt.site, priceField].filter(Boolean).join(' · ');
+  const faviconSrc = siteFaviconUrl(opt.url);
 
   return (
     <div className="chatv2-optlist__chosen-receipt">
@@ -579,8 +582,28 @@ function ChosenReceipt({ opt }: { opt: OptionItem }): React.ReactElement {
         )}
       </div>
       <div className="chatv2-optlist__chosen-text">
-        <div className="chatv2-optlist__chosen-label">Chose: {opt.title}</div>
-        {meta && <div className="chatv2-optlist__chosen-meta">{meta}</div>}
+        <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>
   );
diff --git a/app/src/renderer/hub/chat-v2/optionList.css b/app/src/renderer/hub/chat-v2/optionList.css
index d8d7f3a1..c3b7f50c 100644
--- a/app/src/renderer/hub/chat-v2/optionList.css
+++ b/app/src/renderer/hub/chat-v2/optionList.css
@@ -20,11 +20,12 @@
   border-radius: var(--radius-lg, 10px);
 }
 
-/* Post-submit chosen view — collapsed receipt, dashed border. */
+/* Post-submit chosen view — collapsed receipt with the same solid border
+ * vocabulary as the picker, so the "Chose" card reads as a sibling of the
+ * cards above it rather than a disabled ghost state. */
 .chatv2-optlist--chosen {
-  background: transparent;
-  border-style: dashed;
-  padding: 14px 18px;
+  background: var(--color-bg-elevated);
+  padding: 12px 14px;
 }
 
 /* Cancelled state — session ended before pick. */
@@ -494,17 +495,47 @@
 .chatv2-optlist__chosen-text {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  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);
+  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 ────────────────────────────────────────────────── */
 .chatv2-optlist__skel-card {

From 457c7739a3b829095665237ba20af8724c5433dc Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 12:32:34 -0700
Subject: [PATCH 07/17] Keep dark HTML shadows structural

The dark-mode HTML guidance allowed gold accents to become large frame shadows, which made comparison artifacts feel too loud. Constrain large offset shadows to the palette shadow color and keep accents as small highlights.

Constraint: Dark theme already defines cream as the palette shadow color
Rejected: Remove hard shadows entirely | the house style depends on hard offset shadows
Confidence: high
Scope-risk: narrow
Directive: Do not use accent colors for large structural shadows in dark-mode HTML artifacts
Tested: npm run test -- tests/unit/hl/skillIndexPrompt.test.ts
Tested: npm run typecheck
Tested: npm run lint
Tested: git diff --check
Not-tested: Live agent-generated dark-mode HTML artifact after prompt update
Co-authored-by: OmX <omx@oh-my-codex.dev>
---
 app/src/main/hl/engines/skillIndexPrompt.ts     |  2 +-
 .../interaction-skills/neobrutalist-html.md     | 17 ++++++++++++-----
 app/tests/unit/hl/skillIndexPrompt.test.ts      |  2 ++
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/src/main/hl/engines/skillIndexPrompt.ts b/app/src/main/hl/engines/skillIndexPrompt.ts
index 8e760618..d70b9583 100644
--- a/app/src/main/hl/engines/skillIndexPrompt.ts
+++ b/app/src/main/hl/engines/skillIndexPrompt.ts
@@ -54,7 +54,7 @@ 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.`,
+    `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.',
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 1c217a8c..d28acac6 100644
--- a/app/src/main/hl/stock/interaction-skills/neobrutalist-html.md
+++ b/app/src/main/hl/stock/interaction-skills/neobrutalist-html.md
@@ -27,10 +27,16 @@ sentence.
 
 ## 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
@@ -91,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/tests/unit/hl/skillIndexPrompt.test.ts b/app/tests/unit/hl/skillIndexPrompt.test.ts
index 08c44eb5..967c49ec 100644
--- a/app/tests/unit/hl/skillIndexPrompt.test.ts
+++ b/app/tests/unit/hl/skillIndexPrompt.test.ts
@@ -85,5 +85,7 @@ describe('html block prompt guidance', () => {
     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');
   });
 });

From f86ce1e4243f043c96d4c20eec3c5120c6e91497 Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 13:00:24 -0700
Subject: [PATCH 08/17] OptionList: keep Choose button enabled in single-select
 after card click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The disabled rule `isConfirmed && !multiSelect` conflated 'currently
selected' with 'already submitted', so clicking a card to select it
then clicking Choose was impossible — the button disabled itself the
moment the card became selected. The parent-level `disabled=locked`
already handles post-submit lockdown.
---
 app/src/renderer/hub/chat-v2/OptionList.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/src/renderer/hub/chat-v2/OptionList.tsx b/app/src/renderer/hub/chat-v2/OptionList.tsx
index bc24f613..4efe22e2 100644
--- a/app/src/renderer/hub/chat-v2/OptionList.tsx
+++ b/app/src/renderer/hub/chat-v2/OptionList.tsx
@@ -729,9 +729,11 @@ function OptionCard({
           <button
             type="button"
             className={`chatv2-optlist__choose${isConfirmed ? ' is-confirmed' : ''}`}
-            // Single-select locks after confirm (irreversible). Multi-select
-            // stays clickable so the user can un-toggle a pick.
-            disabled={disabled || (isConfirmed && !multiSelect)}
+            // 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();

From 48bc907603bc730e509d97cc699cabfa80fd0357 Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 13:00:37 -0700
Subject: [PATCH 09/17] Derive picker/ask submission state from the transcript

Mirrors how Codex's rollout/state split works: the conversation log is
the source of truth, and the UI reconstructs derived state from it
instead of maintaining a parallel cache.

ChatTranscript now forwards each turn's next-turn user reply as
nextUserText down through ChatTurn into OptionList and AskForm. Each
component reverses its outbound message format ('Selected from options:'
and 'Answered:') to rebuild the selected ids without consulting any
client-side persistence layer. Tab-switch optimism still routes through
the in-memory submission cache, which is intentionally not persisted.
---
 app/src/renderer/hub/chat-v2/AskForm.tsx      | 79 ++++++++++++++--
 app/src/renderer/hub/chat-v2/OptionList.tsx   | 91 +++++++++++++++++--
 .../renderer/hub/chat-v2/optionListStore.ts   | 16 ++--
 app/src/renderer/hub/chat/ChatTranscript.tsx  |  5 +
 app/src/renderer/hub/chat/ChatTurn.tsx        | 15 ++-
 5 files changed, 182 insertions(+), 24 deletions(-)

diff --git a/app/src/renderer/hub/chat-v2/AskForm.tsx b/app/src/renderer/hub/chat-v2/AskForm.tsx
index 9e9dc40e..8dd7b10f 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,9 +137,15 @@ 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);
 
   const locked = submitted;
@@ -360,6 +380,53 @@ 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; `Other: <text>` may itself contain a comma
+    // in theory, but the writer joins with ", " — so split on /,\s+/ which
+    // is tolerant of the common cases without overfitting to oddities.
+    for (const raw of valuesStr.split(/,\s+/)) {
+      const v = raw.trim();
+      if (!v) continue;
+      if (v === 'Other') {
+        selection[qIdx].add(OTHER_TOKEN);
+      } else if (v.startsWith('Other:')) {
+        selection[qIdx].add(OTHER_TOKEN);
+        otherTextByKey[questionCacheKey(questions[qIdx])] = v.slice('Other:'.length).trim();
+      } else {
+        selection[qIdx].add(v);
+      }
+    }
+  }
+
+  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 4efe22e2..89a94598 100644
--- a/app/src/renderer/hub/chat-v2/OptionList.tsx
+++ b/app/src/renderer/hub/chat-v2/OptionList.tsx
@@ -44,12 +44,18 @@ interface Props {
   /** 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, cancelled } = props;
+  const { payload, complete, error, sessionId, cancelled, nextUserText } = props;
 
   // Streaming with no options parsed yet — show a full skeleton screen.
   if (!payload) {
@@ -69,6 +75,7 @@ export function OptionList(props: Props): React.ReactElement {
       sessionId={sessionId}
       streaming={!complete}
       cancelled={cancelled}
+      nextUserText={nextUserText}
     />
   );
 }
@@ -99,6 +106,7 @@ interface ReadyProps {
   sessionId?: string;
   streaming?: boolean;
   cancelled?: boolean;
+  nextUserText?: string | null;
 }
 
 const OTHER_TOKEN = '__other__';
@@ -143,7 +151,7 @@ function multiSelectHint(sec: OptionListSection, picked: number): string {
   return `${prefix}${count}`;
 }
 
-function OptionListReady({ payload, sessionId, streaming, cancelled }: ReadyProps): React.ReactElement {
+function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserText }: ReadyProps): React.ReactElement {
   const { sections, prompt } = payload;
   const multi = sections.length > 1;
 
@@ -170,7 +178,8 @@ function OptionListReady({ payload, sessionId, streaming, cancelled }: ReadyProp
     return sec.options.every((o) => o.site === first) ? first : null;
   }), [sections]);
 
-  // Stable cache key — covers ChatTurn unmounts on tab switch.
+  // 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);
@@ -179,19 +188,34 @@ function OptionListReady({ payload, sessionId, streaming, cancelled }: ReadyProp
   const cachedSelection = useMemo(() => getSubmission(cacheKey), [cacheKey]);
   const cachedRecord = useMemo(() => getSubmissionRecord(cacheKey), [cacheKey]);
 
-  // Per-section selected ids.
+  // 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>();
       const valid = new Set([...sec.options.map((o) => o.id), OTHER_TOKEN]);
       return new Set([...cachedSelection].filter((id) => valid.has(id)));
     }),
   );
   const [otherTextBySection, setOtherTextBySection] = useState<string[]>(
-    () => sections.map((_, i) => cachedRecord?.otherText?.[i] ?? ''),
+    () => sections.map((_, i) => (
+      transcriptSubmission?.otherText[i] ?? cachedRecord?.otherText?.[i] ?? ''
+    )),
   );
   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)[]>([]);
 
@@ -775,6 +799,59 @@ function OtherLink({ disabled, onClick }: { disabled: boolean; onClick: () => vo
 // Helpers
 // ---------------------------------------------------------------------------
 
+/**
+ * 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 to section 0.
+  // Multi-section currently always emits `Other: ...` on its own line so
+  // section attribution is best-effort by label prefix; fall back to 0.
+  const otherMatches = Array.from(text.matchAll(/(?:^|\n)[^\n]*?Other:\s*([^\n]+)/g));
+  for (const m of otherMatches) {
+    let target = 0;
+    if (sections.length > 1) {
+      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;
+      target = idx >= 0 ? idx : 0;
+    }
+    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)';
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 ?? ''}

From 087594c480eea2f7e5e783034a44b57755e00a6e Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 13:14:14 -0700
Subject: [PATCH 10/17] Harden transcript parsers against ambiguous Other
 replies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AskForm: 'Other: <text>' answers can contain commas, so splitting on
/,\s+/ corrupted them. Locate the Other segment, peel the rest of the
line off as its text, and only split predefined labels.

OptionList: in multi-section pickers, drop Other replies that lack a
matching label prefix instead of defaulting to section 0 — silent
mis-attribution risked showing the wrong section as chosen.
---
 app/src/renderer/hub/chat-v2/AskForm.tsx    | 36 ++++++++++++++-------
 app/src/renderer/hub/chat-v2/OptionList.tsx | 17 ++++++----
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/app/src/renderer/hub/chat-v2/AskForm.tsx b/app/src/renderer/hub/chat-v2/AskForm.tsx
index 8dd7b10f..ecae4d21 100644
--- a/app/src/renderer/hub/chat-v2/AskForm.tsx
+++ b/app/src/renderer/hub/chat-v2/AskForm.tsx
@@ -406,19 +406,33 @@ export function deriveAskSubmission(
     const qIdx = questions.findIndex((q) => (q.header || q.question) === labelPrefix);
     if (qIdx < 0) continue;
 
-    // Values are comma-separated; `Other: <text>` may itself contain a comma
-    // in theory, but the writer joins with ", " — so split on /,\s+/ which
-    // is tolerant of the common cases without overfitting to oddities.
-    for (const raw of valuesStr.split(/,\s+/)) {
+    // 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;
-      if (v === 'Other') {
-        selection[qIdx].add(OTHER_TOKEN);
-      } else if (v.startsWith('Other:')) {
-        selection[qIdx].add(OTHER_TOKEN);
-        otherTextByKey[questionCacheKey(questions[qIdx])] = v.slice('Other:'.length).trim();
-      } else {
-        selection[qIdx].add(v);
+      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();
       }
     }
   }
diff --git a/app/src/renderer/hub/chat-v2/OptionList.tsx b/app/src/renderer/hub/chat-v2/OptionList.tsx
index 89a94598..a5247387 100644
--- a/app/src/renderer/hub/chat-v2/OptionList.tsx
+++ b/app/src/renderer/hub/chat-v2/OptionList.tsx
@@ -831,18 +831,23 @@ export function deriveSubmissionFromTranscript(
     }
   }
 
-  // "Other: <text>" reply — single-section pickers map to section 0.
-  // Multi-section currently always emits `Other: ...` on its own line so
-  // section attribution is best-effort by label prefix; fall back to 0.
+  // "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 = 0;
-    if (sections.length > 1) {
+    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;
-      target = idx >= 0 ? idx : 0;
+      if (idx < 0) continue;
+      target = idx;
     }
     selection[target].add(OTHER_TOKEN);
     otherText[target] = m[1].trim();

From 93d971aedd0d4d975f5cd686c7c836479d981dc0 Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 13:33:55 -0700
Subject: [PATCH 11/17] AskForm: strip card chrome and tracked-out labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove the per-question card background/border/padding so the form
sits in the chat flow instead of inside a boxed surface. Drop the
monospace tracked-uppercase header chip on questions and the same
treatment on post-answer labels — they now read as plain sans like
the rest of the chat. Custom radio/checkbox replace the native
controls (single filled circle on check, no doubled-up ring), and
the option row's gap is split so descriptions tuck under the title
instead of floating 10px below.
---
 app/src/renderer/hub/chat-v2/AskForm.tsx |  1 -
 app/src/renderer/hub/chat-v2/askForm.css | 71 ++++++++++++++++--------
 2 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/app/src/renderer/hub/chat-v2/AskForm.tsx b/app/src/renderer/hub/chat-v2/AskForm.tsx
index ecae4d21..28277f97 100644
--- a/app/src/renderer/hub/chat-v2/AskForm.tsx
+++ b/app/src/renderer/hub/chat-v2/AskForm.tsx
@@ -333,7 +333,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'}>
diff --git a/app/src/renderer/hub/chat-v2/askForm.css b/app/src/renderer/hub/chat-v2/askForm.css
index c99ebc11..9a322c97 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,50 @@
 .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);
+}
+.chatv2-askform__row input[type="checkbox"]:checked {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5 L7 12 L13 5'/></svg>");
+  background-size: 11px 11px;
+  background-position: center;
+  background-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 +210,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;

From 9bdcd99fce84d84dd938f02434afbf58ddf3c2d6 Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 13:34:00 -0700
Subject: [PATCH 12/17] OptionList: drop outer container chrome to match
 AskForm

---
 app/src/renderer/hub/chat-v2/optionList.css | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/app/src/renderer/hub/chat-v2/optionList.css b/app/src/renderer/hub/chat-v2/optionList.css
index c3b7f50c..ea60699a 100644
--- a/app/src/renderer/hub/chat-v2/optionList.css
+++ b/app/src/renderer/hub/chat-v2/optionList.css
@@ -14,25 +14,17 @@
   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 chosen view — collapsed receipt with the same solid border
- * vocabulary as the picker, so the "Chose" card reads as a sibling of the
- * cards above it rather than a disabled ghost state. */
+/* 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: var(--color-bg-elevated);
-  padding: 12px 14px;
+  padding: 4px 0;
 }
 
 /* Cancelled state — session ended before pick. */
-.chatv2-optlist--cancelled {
-  background: transparent;
-  border-style: dashed;
-}
 .chatv2-optlist--cancelled .chatv2-optlist__grid {
   opacity: 0.5;
   pointer-events: none;

From 63048ec91c020b113d5fd7dfc12fc22000ba7c9b Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 13:42:34 -0700
Subject: [PATCH 13/17] AskForm: theme-aware checkbox checkmark via CSS mask

The previous SVG bg-image had a hard-coded #111 stroke, which vanished
in light mode where --color-fg-primary (the checked fill) is also
near-black. Switching to a mask + var(--color-bg-base) makes the stroke
always contrast with the fill in both themes.
---
 app/src/renderer/hub/chat-v2/askForm.css | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/src/renderer/hub/chat-v2/askForm.css b/app/src/renderer/hub/chat-v2/askForm.css
index 9a322c97..1430bfac 100644
--- a/app/src/renderer/hub/chat-v2/askForm.css
+++ b/app/src/renderer/hub/chat-v2/askForm.css
@@ -112,11 +112,26 @@
   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 {
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5 L7 12 L13 5'/></svg>");
-  background-size: 11px 11px;
-  background-position: center;
-  background-repeat: no-repeat;
+  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);

From cdc94dc490a2310f6ab2a9bbcaa34f72a181b3a1 Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 14:01:02 -0700
Subject: [PATCH 14/17] options block: require absolute http(s) URLs for url
 and image
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Renderer hands url to shell.openExternal, which rejects non-http(s),
and image goes into <img src> — relative or javascript:/data URLs
from a model-emitted block shouldn't be navigated to or loaded.
Validate at parse time so bad options drop with the rest of the
fail-shut checks instead of failing at click time.
---
 app/src/renderer/hub/chat-v2/htmlBlocks.ts  | 15 ++++++++
 app/tests/unit/chat-v2/optionBlocks.test.ts | 40 ++++++++++-----------
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/app/src/renderer/hub/chat-v2/htmlBlocks.ts b/app/src/renderer/hub/chat-v2/htmlBlocks.ts
index c3db701c..624da8e4 100644
--- a/app/src/renderer/hub/chat-v2/htmlBlocks.ts
+++ b/app/src/renderer/hub/chat-v2/htmlBlocks.ts
@@ -555,6 +555,12 @@ function validateOption(raw: unknown): OptionItem | null {
   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.
@@ -587,6 +593,15 @@ function validateOption(raw: unknown): OptionItem | null {
   };
 }
 
+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 {
diff --git a/app/tests/unit/chat-v2/optionBlocks.test.ts b/app/tests/unit/chat-v2/optionBlocks.test.ts
index 3043723f..384680fc 100644
--- a/app/tests/unit/chat-v2/optionBlocks.test.ts
+++ b/app/tests/unit/chat-v2/optionBlocks.test.ts
@@ -102,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","url":"https://amazon.com/a1","site":"Amazon"},'
-      + '{"id":"a2","image":"i2","title":"Beef 85/15","url":"https://amazon.com/a2","site":"Amazon"},'
+      + '{"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);
@@ -124,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","url":"https://a.com/1","site":"Amazon"},'
-      + '{"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');
@@ -137,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","url":"https://a.com/1","site":"Amazon"},'
-      + '{"id":"a2","image":"i2","title":"B","url":"https://a.com/2","site":"Amazon"},';
+      + '{"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');
@@ -148,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}","url":"https://a.com/1","site":"Amazon"},'
-      + '{"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');
@@ -236,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","url":"https://a.com/p1","site":"Amazon"}]},'
+      + '{"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];
@@ -265,8 +265,8 @@ describe('parseOptionList — validation', () => {
     const { parsed } = parseOptionList(JSON.stringify({
       options: [
         opt('ok'),
-        { id: 'no-url', image: 'i', title: 't', site: 'Amazon' },       // missing url
-        { id: 'no-site', image: 'i', title: 't', url: 'https://x.com' }, // missing site
+        { 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'),
       ],
     }));
@@ -277,8 +277,8 @@ describe('parseOptionList — validation', () => {
     const { parsed } = parseOptionList(JSON.stringify({
       options: [
         opt('ok'),
-        { id: 'no-title', image: 'i', url: 'https://x', site: 'Amazon' },
-        { image: 'i', title: 't', url: 'https://x', site: 'Amazon' },
+        { 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'),
       ],
@@ -345,7 +345,7 @@ describe('parseOptionList — validation', () => {
   it('folds legacy price/subtitle/merchant into fields + description', () => {
     const { parsed } = parseOptionList(JSON.stringify({
       options: [{
-        id: 'a', image: 'i', title: 't',
+        id: 'a', image: 'https://cdn.example/i.jpg', title: 't',
         subtitle: 's', price: '$9', merchant: 'Trader Joes',
         url: 'https://x.com/a', site: 'Amazon',
       }],
@@ -360,7 +360,7 @@ describe('parseOptionList — validation', () => {
 
   it('keeps the agent-supplied description over a stale subtitle', () => {
     const { parsed } = parseOptionList(JSON.stringify({
-      options: [{ id: 'a', image: 'i', title: 't', url: 'https://x.com', site: 'Amazon',
+      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');
@@ -370,8 +370,8 @@ describe('parseOptionList — validation', () => {
     const { parsed } = parseOptionList(JSON.stringify({
       fieldSchema: ['Price', 'Rating', 'Bedrooms'],
       options: [
-        { id: 'a', image: 'i', title: 't', url: 'https://x.com/a', site: 'Amazon', fields: { Price: '$120', Rating: '4.5★', Bedrooms: '2' } },
-        { id: 'b', image: 'i', title: 't', url: 'https://x.com/b', site: 'Amazon', 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']);
@@ -382,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', url: 'https://x.com/a', site: 'Amazon', fields: { Price: '$1', Rating: '4★' } },
-        { id: 'b', image: 'i', title: 't', url: 'https://x.com/b', site: 'Amazon', 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();
@@ -391,7 +391,7 @@ describe('parseOptionList — validation', () => {
 
   it('rejects non-string field values silently', () => {
     const { parsed } = parseOptionList(JSON.stringify({
-      options: [{ id: 'a', image: 'i', title: 't', url: 'https://x.com/a', site: 'Amazon', 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();

From f479d3351e26b2877320ed5184d7c6402d6163ff Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 14:01:09 -0700
Subject: [PATCH 15/17] Apply transcript-derived submission when it arrives
 after first render
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useState(() => …) runs once. During session replay the AskForm/OptionList
turn lands before the user-reply turn, so the initial nextUserText is
null and the picker mounts as unsubmitted — even though the answer is
already on the transcript and arrives a few re-renders later. Add a
useEffect that hydrates state when transcriptSubmission becomes
non-null and the user hasn't already submitted locally.
---
 app/src/renderer/hub/chat-v2/AskForm.tsx    | 13 +++++++++++++
 app/src/renderer/hub/chat-v2/OptionList.tsx | 11 +++++++++++
 2 files changed, 24 insertions(+)

diff --git a/app/src/renderer/hub/chat-v2/AskForm.tsx b/app/src/renderer/hub/chat-v2/AskForm.tsx
index 28277f97..7fc161b7 100644
--- a/app/src/renderer/hub/chat-v2/AskForm.tsx
+++ b/app/src/renderer/hub/chat-v2/AskForm.tsx
@@ -150,6 +150,19 @@ function AskFormReady({ payload, sessionId, streaming, nextUserText }: ReadyProp
 
   const locked = submitted;
 
+  // Late-arriving transcript: if nextUserText hydrates after first paint
+  // (streaming session restore, async transcript fetch), apply the derived
+  // submission once. Skip when the user has already submitted locally —
+  // their state is authoritative and we don't want to clobber it.
+  useEffect(() => {
+    if (!transcriptSubmission || submitted) return;
+    setSelectedByQuestion(questions.map((_, i) => new Set(transcriptSubmission.selection[i])));
+    setOtherTextByQuestion(questions.map((q) => (
+      transcriptSubmission.otherTextByKey[questionCacheKey(q)] ?? ''
+    )));
+    setSubmitted(true);
+  }, [transcriptSubmission, submitted, questions]);
+
   const togglePick = useCallback((qIdx: number, label: string): void => {
     const q = questions[qIdx];
     if (!q) return;
diff --git a/app/src/renderer/hub/chat-v2/OptionList.tsx b/app/src/renderer/hub/chat-v2/OptionList.tsx
index a5247387..4066205f 100644
--- a/app/src/renderer/hub/chat-v2/OptionList.tsx
+++ b/app/src/renderer/hub/chat-v2/OptionList.tsx
@@ -219,6 +219,17 @@ function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserTex
   const [submitError, setSubmitError] = useState<string | null>(null);
   const gridRefs = useRef<(HTMLDivElement | null)[]>([]);
 
+  // Late-arriving transcript: if nextUserText hydrates after first paint
+  // (streaming restore / async transcript fetch), apply the derived
+  // submission once. Skip when the user has already submitted locally —
+  // their state is authoritative and we don't want to clobber it.
+  useEffect(() => {
+    if (!transcriptSubmission || submitted) return;
+    setSelectedBySection(sections.map((_, i) => new Set(transcriptSubmission.selection[i])));
+    setOtherTextBySection(transcriptSubmission.otherText.slice());
+    setSubmitted(true);
+  }, [transcriptSubmission, submitted, sections]);
+
   const locked = submitted || (cancelled ?? false);
 
   const toggle = useCallback((sectionIdx: number, optionIdx: number): void => {

From b755bdace9578546a6ff6f2ff3ff6a7350cc88b7 Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 14:22:31 -0700
Subject: [PATCH 16/17] Let transcript-derived state override cache bootstrap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The late-hydration effect was guarded on `submitted`, but bootstrap
from the in-memory cache also sets submitted=true — so a stale cache
hit would permanently block transcript hydration even though the
transcript is the durable source of truth. Switch to a localSubmitRef
that flips only on a real user submit in this mount, so cache-derived
state still yields to a later-arriving transcript.
---
 app/src/renderer/hub/chat-v2/AskForm.tsx    | 16 ++++++++++++----
 app/src/renderer/hub/chat-v2/OptionList.tsx | 16 ++++++++++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/src/renderer/hub/chat-v2/AskForm.tsx b/app/src/renderer/hub/chat-v2/AskForm.tsx
index 7fc161b7..25e17ae4 100644
--- a/app/src/renderer/hub/chat-v2/AskForm.tsx
+++ b/app/src/renderer/hub/chat-v2/AskForm.tsx
@@ -147,21 +147,26 @@ function AskFormReady({ payload, sessionId, streaming, nextUserText }: ReadyProp
     transcriptSubmission !== null || 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.
+  const localSubmitRef = useRef<boolean>(false);
 
   const locked = submitted;
 
   // Late-arriving transcript: if nextUserText hydrates after first paint
   // (streaming session restore, async transcript fetch), apply the derived
-  // submission once. Skip when the user has already submitted locally —
-  // their state is authoritative and we don't want to clobber it.
+  // submission. Skip only when the user has submitted locally in this
+  // mount — bootstrap-from-cache must not block transcript hydration.
   useEffect(() => {
-    if (!transcriptSubmission || submitted) return;
+    if (!transcriptSubmission || localSubmitRef.current) return;
     setSelectedByQuestion(questions.map((_, i) => new Set(transcriptSubmission.selection[i])));
     setOtherTextByQuestion(questions.map((q) => (
       transcriptSubmission.otherTextByKey[questionCacheKey(q)] ?? ''
     )));
     setSubmitted(true);
-  }, [transcriptSubmission, submitted, questions]);
+  }, [transcriptSubmission, questions]);
 
   const togglePick = useCallback((qIdx: number, label: string): void => {
     const q = questions[qIdx];
@@ -225,6 +230,7 @@ function AskFormReady({ payload, sessionId, streaming, nextUserText }: ReadyProp
       return;
     }
     const message = formatAnswerMessage(questions, selectedByQuestion, otherTextByQuestion);
+    localSubmitRef.current = true;
     setSubmitted(true);
     setSubmitError(null);
     try {
@@ -232,6 +238,7 @@ function AskFormReady({ payload, sessionId, streaming, nextUserText }: ReadyProp
       if (result?.error) {
         setSubmitError(result.error);
         setSubmitted(false);
+        localSubmitRef.current = false;
       } else {
         // Persist enough to restore submitted view on remount.
         const flat: string[] = [];
@@ -247,6 +254,7 @@ function AskFormReady({ payload, sessionId, streaming, nextUserText }: ReadyProp
     } catch (err) {
       setSubmitError((err as Error).message);
       setSubmitted(false);
+      localSubmitRef.current = false;
     }
   }, [canSubmit, locked, sessionId, questions, selectedByQuestion, otherTextByQuestion, cacheKey]);
 
diff --git a/app/src/renderer/hub/chat-v2/OptionList.tsx b/app/src/renderer/hub/chat-v2/OptionList.tsx
index 4066205f..476cddc1 100644
--- a/app/src/renderer/hub/chat-v2/OptionList.tsx
+++ b/app/src/renderer/hub/chat-v2/OptionList.tsx
@@ -218,17 +218,22 @@ function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserTex
   );
   const [submitError, setSubmitError] = useState<string | null>(null);
   const gridRefs = useRef<(HTMLDivElement | 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.
+  const localSubmitRef = useRef<boolean>(false);
 
   // Late-arriving transcript: if nextUserText hydrates after first paint
   // (streaming restore / async transcript fetch), apply the derived
-  // submission once. Skip when the user has already submitted locally —
-  // their state is authoritative and we don't want to clobber it.
+  // submission. Skip only when the user has submitted locally in this
+  // mount — bootstrap-from-cache must not block transcript hydration.
   useEffect(() => {
-    if (!transcriptSubmission || submitted) return;
+    if (!transcriptSubmission || localSubmitRef.current) return;
     setSelectedBySection(sections.map((_, i) => new Set(transcriptSubmission.selection[i])));
     setOtherTextBySection(transcriptSubmission.otherText.slice());
     setSubmitted(true);
-  }, [transcriptSubmission, submitted, sections]);
+  }, [transcriptSubmission, sections]);
 
   const locked = submitted || (cancelled ?? false);
 
@@ -273,6 +278,7 @@ function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserTex
       return { section: sec, picked: sec.options.filter((o) => ids.has(o.id)), otherText };
     });
     const message = formatSelectionMessage(pickedAcross);
+    localSubmitRef.current = true;
     setSubmitted(true);
     setSubmitError(null);
     try {
@@ -280,6 +286,7 @@ function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserTex
       if (result?.error) {
         setSubmitError(result.error);
         setSubmitted(false);
+        localSubmitRef.current = false;
       } else {
         const flat: string[] = [];
         for (let i = 0; i < sections.length; i++) {
@@ -291,6 +298,7 @@ function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserTex
     } catch (err) {
       setSubmitError((err as Error).message);
       setSubmitted(false);
+      localSubmitRef.current = false;
     }
   }, [locked, sessionId, sections, selectedBySection, otherTextBySection, cacheKey]);
 

From d658fb1a648c2a88ebaffe45ea5467df59b531c9 Mon Sep 17 00:00:00 2001
From: Reagan Hsu <reaganhsu123@gmail.com>
Date: Tue, 26 May 2026 14:30:04 -0700
Subject: [PATCH 17/17] Re-run transcript hydration after a failed local submit

localSubmitRef was a ref, so clearing it on submit failure didn't
trigger a re-render or re-run the hydration effect. If the transcript
had already arrived before the submit attempt, it would never be
applied. Promote it to state so the effect's dependency list reacts
to the flip back to false.
---
 app/src/renderer/hub/chat-v2/AskForm.tsx    | 16 +++++++++-------
 app/src/renderer/hub/chat-v2/OptionList.tsx | 16 +++++++++-------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/app/src/renderer/hub/chat-v2/AskForm.tsx b/app/src/renderer/hub/chat-v2/AskForm.tsx
index 25e17ae4..49baac97 100644
--- a/app/src/renderer/hub/chat-v2/AskForm.tsx
+++ b/app/src/renderer/hub/chat-v2/AskForm.tsx
@@ -150,8 +150,10 @@ function AskFormReady({ payload, sessionId, streaming, nextUserText }: ReadyProp
   // 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.
-  const localSubmitRef = useRef<boolean>(false);
+  // 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;
 
@@ -160,13 +162,13 @@ function AskFormReady({ payload, sessionId, streaming, nextUserText }: ReadyProp
   // submission. Skip only when the user has submitted locally in this
   // mount — bootstrap-from-cache must not block transcript hydration.
   useEffect(() => {
-    if (!transcriptSubmission || localSubmitRef.current) return;
+    if (!transcriptSubmission || localSubmit) return;
     setSelectedByQuestion(questions.map((_, i) => new Set(transcriptSubmission.selection[i])));
     setOtherTextByQuestion(questions.map((q) => (
       transcriptSubmission.otherTextByKey[questionCacheKey(q)] ?? ''
     )));
     setSubmitted(true);
-  }, [transcriptSubmission, questions]);
+  }, [transcriptSubmission, localSubmit, questions]);
 
   const togglePick = useCallback((qIdx: number, label: string): void => {
     const q = questions[qIdx];
@@ -230,7 +232,7 @@ function AskFormReady({ payload, sessionId, streaming, nextUserText }: ReadyProp
       return;
     }
     const message = formatAnswerMessage(questions, selectedByQuestion, otherTextByQuestion);
-    localSubmitRef.current = true;
+    setLocalSubmit(true);
     setSubmitted(true);
     setSubmitError(null);
     try {
@@ -238,7 +240,7 @@ function AskFormReady({ payload, sessionId, streaming, nextUserText }: ReadyProp
       if (result?.error) {
         setSubmitError(result.error);
         setSubmitted(false);
-        localSubmitRef.current = false;
+        setLocalSubmit(false);
       } else {
         // Persist enough to restore submitted view on remount.
         const flat: string[] = [];
@@ -254,7 +256,7 @@ function AskFormReady({ payload, sessionId, streaming, nextUserText }: ReadyProp
     } catch (err) {
       setSubmitError((err as Error).message);
       setSubmitted(false);
-      localSubmitRef.current = false;
+      setLocalSubmit(false);
     }
   }, [canSubmit, locked, sessionId, questions, selectedByQuestion, otherTextByQuestion, cacheKey]);
 
diff --git a/app/src/renderer/hub/chat-v2/OptionList.tsx b/app/src/renderer/hub/chat-v2/OptionList.tsx
index 476cddc1..c6976149 100644
--- a/app/src/renderer/hub/chat-v2/OptionList.tsx
+++ b/app/src/renderer/hub/chat-v2/OptionList.tsx
@@ -221,19 +221,21 @@ function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserTex
   // 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.
-  const localSubmitRef = useRef<boolean>(false);
+  // 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 || localSubmitRef.current) return;
+    if (!transcriptSubmission || localSubmit) return;
     setSelectedBySection(sections.map((_, i) => new Set(transcriptSubmission.selection[i])));
     setOtherTextBySection(transcriptSubmission.otherText.slice());
     setSubmitted(true);
-  }, [transcriptSubmission, sections]);
+  }, [transcriptSubmission, localSubmit, sections]);
 
   const locked = submitted || (cancelled ?? false);
 
@@ -278,7 +280,7 @@ function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserTex
       return { section: sec, picked: sec.options.filter((o) => ids.has(o.id)), otherText };
     });
     const message = formatSelectionMessage(pickedAcross);
-    localSubmitRef.current = true;
+    setLocalSubmit(true);
     setSubmitted(true);
     setSubmitError(null);
     try {
@@ -286,7 +288,7 @@ function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserTex
       if (result?.error) {
         setSubmitError(result.error);
         setSubmitted(false);
-        localSubmitRef.current = false;
+        setLocalSubmit(false);
       } else {
         const flat: string[] = [];
         for (let i = 0; i < sections.length; i++) {
@@ -298,7 +300,7 @@ function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserTex
     } catch (err) {
       setSubmitError((err as Error).message);
       setSubmitted(false);
-      localSubmitRef.current = false;
+      setLocalSubmit(false);
     }
   }, [locked, sessionId, sections, selectedBySection, otherTextBySection, cacheKey]);