diff --git a/app/src/main/hl/engines/browsercode/adapter.ts b/app/src/main/hl/engines/browsercode/adapter.ts
index 5aeb06de..b05d6289 100644
--- a/app/src/main/hl/engines/browsercode/adapter.ts
+++ b/app/src/main/hl/engines/browsercode/adapter.ts
@@ -8,7 +8,7 @@
 
 import { register } from '../registry';
 import { applyBrowserHarnessEnv } from '../browserHarnessEnv';
-import { buildSkillIndexPrompt, SKILL_DISCOVERY_AND_LIFECYCLE_LINES, htmlBlockGuidanceLines, optionsBlockGuidanceLines, askBlockGuidanceLines } from '../skillIndexPrompt';
+import { buildSkillIndexPrompt, SKILL_DISCOVERY_AND_LIFECYCLE_LINES, htmlBlockGuidanceLines, optionsBlockGuidanceLines, askBlockGuidanceLines, loginBlockGuidanceLines } from '../skillIndexPrompt';
 import { resolveThemeMode } from '../../../themeMode';
 import { enrichedEnv } from '../pathEnrich';
 import { runCliCapture } from '../cliSpawn';
@@ -179,6 +179,7 @@ const browserCodeAdapter: EngineAdapter = {
       ...htmlBlockGuidanceLines(resolveThemeMode()),
       ...optionsBlockGuidanceLines(),
       ...askBlockGuidanceLines(),
+      ...loginBlockGuidanceLines(),
       "Use the `browser-harness-js` CLI for browser actions. Start with `browser-harness-js 'await connectToAssignedTarget()'`.",
       'Do not use old helpers.js convenience APIs for browser control.',
       'Do not edit harness files unless the user asks or a confirmed Browser Harness JS defect blocks the task.',
diff --git a/app/src/main/hl/engines/claude-code/adapter.ts b/app/src/main/hl/engines/claude-code/adapter.ts
index 1fd45a96..ec2c3f58 100644
--- a/app/src/main/hl/engines/claude-code/adapter.ts
+++ b/app/src/main/hl/engines/claude-code/adapter.ts
@@ -13,7 +13,7 @@
 import { mainLogger } from '../../../logger';
 import { register } from '../registry';
 import { applyBrowserHarnessEnv } from '../browserHarnessEnv';
-import { buildSkillIndexPrompt, SKILL_DISCOVERY_AND_LIFECYCLE_LINES, htmlBlockGuidanceLines, optionsBlockGuidanceLines, askBlockGuidanceLines } from '../skillIndexPrompt';
+import { buildSkillIndexPrompt, SKILL_DISCOVERY_AND_LIFECYCLE_LINES, htmlBlockGuidanceLines, optionsBlockGuidanceLines, askBlockGuidanceLines, loginBlockGuidanceLines } from '../skillIndexPrompt';
 import { resolveThemeMode } from '../../../themeMode';
 import { enrichedEnv } from '../pathEnrich';
 import { runCliCapture, spawnCli } from '../cliSpawn';
@@ -126,6 +126,7 @@ const claudeCodeAdapter: EngineAdapter = {
       ...htmlBlockGuidanceLines(resolveThemeMode()),
       ...optionsBlockGuidanceLines(),
       ...askBlockGuidanceLines(),
+      ...loginBlockGuidanceLines(),
       "Use the `browser-harness-js` CLI for browser actions. Start with `browser-harness-js 'await connectToAssignedTarget()'`.",
       'Do not use old helpers.js convenience APIs for browser control.',
       'Do not edit harness files unless the user asks or a confirmed Browser Harness JS defect blocks the task.',
diff --git a/app/src/main/hl/engines/codex/adapter.ts b/app/src/main/hl/engines/codex/adapter.ts
index 2d818e39..2c062350 100644
--- a/app/src/main/hl/engines/codex/adapter.ts
+++ b/app/src/main/hl/engines/codex/adapter.ts
@@ -21,7 +21,7 @@ import path from 'node:path';
 import { mainLogger } from '../../../logger';
 import { register } from '../registry';
 import { applyBrowserHarnessEnv } from '../browserHarnessEnv';
-import { buildSkillIndexPrompt, SKILL_DISCOVERY_AND_LIFECYCLE_LINES, htmlBlockGuidanceLines, optionsBlockGuidanceLines, askBlockGuidanceLines } from '../skillIndexPrompt';
+import { buildSkillIndexPrompt, SKILL_DISCOVERY_AND_LIFECYCLE_LINES, htmlBlockGuidanceLines, optionsBlockGuidanceLines, askBlockGuidanceLines, loginBlockGuidanceLines } from '../skillIndexPrompt';
 import { resolveThemeMode } from '../../../themeMode';
 import { enrichedEnv } from '../pathEnrich';
 import { runCliCapture } from '../cliSpawn';
@@ -117,6 +117,7 @@ const codexAdapter: EngineAdapter = {
       ...htmlBlockGuidanceLines(resolveThemeMode()),
       ...optionsBlockGuidanceLines(),
       ...askBlockGuidanceLines(),
+      ...loginBlockGuidanceLines(),
       "Use the `browser-harness-js` CLI for browser actions. Start with `browser-harness-js 'await connectToAssignedTarget()'`.",
       'Do not use old helpers.js convenience APIs for browser control.',
       'Do not edit harness files unless the user asks or a confirmed Browser Harness JS defect blocks the task.',
diff --git a/app/src/main/hl/engines/skillIndexPrompt.ts b/app/src/main/hl/engines/skillIndexPrompt.ts
index d70b9583..08e09a59 100644
--- a/app/src/main/hl/engines/skillIndexPrompt.ts
+++ b/app/src/main/hl/engines/skillIndexPrompt.ts
@@ -98,6 +98,23 @@ export function askBlockGuidanceLines(): string[] {
   ];
 }
 
+/**
+ * Provider-neutral nudge for the `login` fenced block — the renderer
+ * surfaces it as a username/password form with a "log in manually in the
+ * browser" escape hatch. The agent reads the credentials from the next
+ * user turn and types them into the live browser view. See the
+ * `login-block` interaction skill for the full schema and the
+ * manual-login fallback contract.
+ */
+export function loginBlockGuidanceLines(): string[] {
+  return [
+    'When the live browser hits a login wall and you need the user to provide credentials, emit a ```login fenced block carrying JSON: { site, url, prompt?, usernameLabel?, passwordLabel? }. `site` is the brand token (e.g. "Amazon", not "amazon.com"); `url` is the absolute http(s) login URL.',
+    'The `login` block ENDS YOUR TURN. After emitting it, do not call any more tools — stop and wait for the user. Their reply arrives as "Login for <site>:\\nusername: <u>\\npassword: <p>" — type these verbatim into the username/password fields of the live tab, then submit. Do NOT echo the password back in your own response.',
+    'The form also offers the user a "log in on <site> myself" affordance that opens the in-app browser view directly; if they take that path you will not get a structured reply, just whatever they type next (e.g. "done"). Treat any plain follow-up message as the signal to resume.',
+    'Use `login` only for real credential walls. For multiple-choice disambiguation, use `ask`; for picking among visible options, use `options`. See the `login-block` interaction skill for the full schema and worked examples.',
+  ];
+}
+
 function normalizeSlash(value: string): string {
   return value.split(path.sep).join('/');
 }
diff --git a/app/src/main/hl/stock/interaction-skills/capture-block.md b/app/src/main/hl/stock/interaction-skills/capture-block.md
new file mode 100644
index 00000000..703cae2c
--- /dev/null
+++ b/app/src/main/hl/stock/interaction-skills/capture-block.md
@@ -0,0 +1,247 @@
+# Capture block — reCAPTCHA 3×3 tile picker
+
+When you hit a Google reCAPTCHA image challenge ("Select all squares with
+motorcycles", "Select all images with traffic lights"), emit a fenced
+` ```capture ` block. The renderer slices your single screenshot into 9
+clickable tiles + a reCAPTCHA-style header bar; the user picks tiles and
+their selection comes back to you as a new user turn.
+
+## Hard constraints — read first
+
+1. **Only the 3×3 grid.** No prompt header, no Verify/Audio/Info row, no
+   surrounding chrome. The renderer evenly subdivides whatever PNG you
+   send into 9 tiles; any extra pixels break the tile boundaries.
+2. **CSS pixels everywhere.** `Page.captureScreenshot`'s `clip` uses CSS
+   pixels regardless of devicePixelRatio. NEVER reason about the output
+   PNG's pixel dimensions when picking clip coordinates. Don't run `sips
+   --cropOffset` on the saved PNG — that's output-pixel space and you'll
+   double-scale.
+3. **No tool calls after the closing fence.** Your turn ends; the agent
+   process idles until the user submits.
+
+## The reliable recipe — copy this
+
+The bframe (`https://www.google.com/recaptcha/api2/bframe?...`) is
+**cross-origin with any third-party host** that embeds reCAPTCHA
+(Cloudflare-protected sites, 2captcha demos, etc.). You cannot reach
+its `contentDocument` from the parent page — you must attach to its
+CDP target and run the DOM queries inside that session.
+
+Compute the grid rect from the **individual tile cells** —
+*never* from the `<table>` element itself, because that element's
+bounding rect includes extra layout space (the floating toolbar sometimes
+sits absolutely positioned inside it, and certain challenge variants
+pad the table beyond the visible tile area).
+
+```js
+browser-harness-js <<'EOF'
+const fs = await import('fs')
+
+// 1. Resolve the bframe's outer rect *in the parent page* first, before
+//    we route Runtime calls into the OOPIF.
+const parentTargetId = session.targetId
+const outerR = await session.Runtime.evaluate({
+  expression: `JSON.stringify((() => {
+    const el = Array.from(document.querySelectorAll('iframe'))
+      .find(e => e.src.includes('/recaptcha/api2/bframe'));
+    if (!el) return null;
+    const r = el.getBoundingClientRect();
+    return { x: r.x, y: r.y, w: r.width, h: r.height };
+  })())`,
+  returnByValue: true,
+})
+const outer = JSON.parse(outerR.result.value)
+if (!outer) throw new Error('bframe <iframe> element not found in parent DOM')
+
+// 2. Route subsequent Runtime/DOM calls to the bframe target. See
+//    cross-origin-iframes.md — `session.use(targetId)` auto-attaches
+//    and works whether the bframe is same-origin or cross-origin.
+const { targetInfos } = await session.Target.getTargets({})
+const bframeTarget = targetInfos.find(
+  t => t.type === 'iframe' && t.url.includes('/recaptcha/api2/bframe'),
+)
+if (!bframeTarget) throw new Error('bframe target not found — is the challenge open?')
+await session.use(bframeTarget.targetId)
+
+try {
+  // 3. Inside the bframe target: tile-union rect + challenge text.
+  //    Returns inner-iframe coords; we add `outer` once back outside.
+  const innerR = await session.Runtime.evaluate({
+    expression: `JSON.stringify((() => {
+      const tiles = Array.from(document.querySelectorAll('td.rc-imageselect-tile'));
+      if (tiles.length === 0) return { error: 'no tile cells (is challenge open?)' };
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      for (const t of tiles) {
+        const r = t.getBoundingClientRect();
+        if (r.width <= 0 || r.height <= 0) continue;
+        if (r.x < minX) minX = r.x;
+        if (r.y < minY) minY = r.y;
+        if (r.x + r.width > maxX) maxX = r.x + r.width;
+        if (r.y + r.height > maxY) maxY = r.y + r.height;
+      }
+      const cols = Math.round(Math.sqrt(tiles.length)) === 4 ? 4 : 3;
+      const rows = cols;
+      const desc = document.querySelector('.rc-imageselect-desc-no-canonical, .rc-imageselect-desc');
+      const promptText = desc?.textContent?.trim() ?? '';
+      const target = desc?.querySelector('strong')?.textContent?.trim() ?? '';
+      const candidateImg = document.querySelector('.rc-imageselect-candidates img, .rc-canonical-bounding-box img');
+      const targetImage = candidateImg?.src ?? null;
+      return {
+        inner: { x: minX, y: minY, w: maxX - minX, h: maxY - minY },
+        rows, cols, promptText, target, targetImage,
+      };
+    })())`,
+    returnByValue: true,
+  })
+  var info = JSON.parse(innerR.result.value)
+  if (info.error) throw new Error(info.error)
+} finally {
+  // 4. Always route back to the parent before the next Page.* call.
+  await session.use(parentTargetId)
+}
+
+// 5. Translate inner → parent-page coords.
+const grid = {
+  x: outer.x + info.inner.x,
+  y: outer.y + info.inner.y,
+  w: info.inner.w,
+  h: info.inner.h,
+}
+const { rows, cols, promptText, target, targetImage } = info
+
+// 6. Clip-screenshot to the tile union, in CSS pixels.
+const shot = await session.Page.captureScreenshot({
+  format: 'png',
+  clip: { x: grid.x, y: grid.y, width: grid.w, height: grid.h, scale: 1 },
+})
+const path = `${process.env.BU_OUTPUTS_DIR}/recaptcha-grid.png`
+fs.writeFileSync(path, Buffer.from(shot.data, 'base64'))
+
+// Stash the grid rect for the click-back step on the next turn.
+globalThis.__captcha_grid = { ...grid, rows, cols }
+return { path, grid, rows, cols, promptText, target, targetImage }
+EOF
+```
+
+### Verification — required before emitting the fence
+
+Read the saved PNG back as an image and confirm:
+
+1. **It's a near-square** — width/height ratio between 0.95 and 1.05.
+2. **No toolbar visible** at the bottom (no refresh/audio/info icons,
+   no Verify/Skip button). If you see them, the tile union query was
+   bypassed somewhere — re-run the recipe; do not crop the saved PNG
+   with `sips` or `magick`.
+3. **9 cells fill the frame edge-to-edge.** You should see grout lines
+   roughly at 33% and 66% horizontally and vertically. If there's
+   blank space on any edge, the bframe rect was stale — wait 500ms and
+   re-query.
+
+If anything fails, click the checkbox again to refresh the challenge
+and re-run the recipe. Don't ship a wrong screenshot — the user will
+see misaligned tiles and click the wrong cells.
+
+### Common failures and how to avoid them
+
+- **Querying `.rc-imageselect-table-33` for height.** Its
+  `getBoundingClientRect` can be 388×388 even when the visible tiles
+  occupy only the top ~290px; the bottom strip contains the floating
+  Verify toolbar. Always use the per-tile union recipe above.
+- **Mixing CSS and output-pixel space.** `Page.captureScreenshot`'s
+  `clip` is in CSS pixels; the saved PNG comes out at CSS×DPR. NEVER
+  run `sips --cropOffset` on the saved PNG — that's output-pixel
+  space and you'll double-scale. If you need to re-crop, do it via
+  another `captureScreenshot` call with a tighter clip.
+- **Reading the bframe rect too early.** Right after clicking the "I'm
+  not a robot" checkbox the bframe is repositioning. Wait 500ms
+  before measuring.
+
+## Emit the fence
+
+```
+```capture
+{
+  "prompt": "Select all images with",
+  "target": "cars",
+  "targetImage": "https://www.gstatic.com/recaptcha/api2/payload?...",
+  "image": "/abs/path/outputs/<session>/recaptcha-grid.png",
+  "rows": 3,
+  "cols": 3
+}
+```
+```
+
+Then **stop**. No more tool calls. Wait for the user reply:
+
+> Captcha selected tiles: 0, 2, 6
+
+Indices are 0-based, left-to-right, top-to-bottom:
+
+```
+0 1 2
+3 4 5
+6 7 8
+```
+
+## Clicking the selected tiles
+
+When the reply arrives, convert each index to a click on the live
+page using the grid rect you stashed:
+
+```js
+browser-harness-js <<'EOF'
+const grid = globalThis.__captcha_grid
+const indices = [0, 2, 6] // from the user reply
+
+const COLS = 3, ROWS = 3
+const tileW = grid.w / COLS
+const tileH = grid.h / ROWS
+
+for (const i of indices) {
+  const row = Math.floor(i / COLS)
+  const col = i % COLS
+  const cx = grid.x + (col + 0.5) * tileW
+  const cy = grid.y + (row + 0.5) * tileH
+  await session.Input.dispatchMouseEvent({ type: 'mousePressed',  x: cx, y: cy, button: 'left', clickCount: 1 })
+  await session.Input.dispatchMouseEvent({ type: 'mouseReleased', x: cx, y: cy, button: 'left', clickCount: 1 })
+  await new Promise(r => setTimeout(r, 120))
+}
+// Verify button is roughly at (grid.x + 250, grid.y + 380); compute via
+// the bframe rect rather than hardcoding once you've handled the picks.
+return 'clicked'
+EOF
+```
+
+## Fields
+
+| field         | required | notes |
+|---------------|----------|-------|
+| `image`       | **yes**  | Absolute path under the outputs dir. Only the 3×3 grid, edge-to-edge. |
+| `prompt`      | recommended | Lead-in text ("Select all images with"). Without it the picker still works but has no header context. |
+| `target`      | recommended | The bold subject ("cars", "motorcycles"). Rendered in the reCAPTCHA-style blue header. |
+| `targetImage` | optional | URL of the example thumbnail (some challenges show one). Renders on the right side of the header. |
+| `rows`        | optional | Default `3`. Set to `4` for the rare 4×4 challenge. |
+| `cols`        | optional | Default `3`. |
+
+## "(none)" replies
+
+If the user confirms without picking any tile, you get:
+
+> Captcha selected tiles: (none)
+
+Click Verify anyway — reCAPTCHA will either accept (rare) or refresh
+to a new challenge. Don't loop emitting fresh `capture` blocks without
+giving the user a chance to actually solve the new one.
+
+## Banned
+
+- Cropping to anything beyond the 3×3 grid. The renderer subdivides
+  the image evenly into 9 tiles — extra pixels = misaligned tiles.
+- Running `sips` / `magick` to crop the saved PNG. Always use the
+  `clip` parameter of `Page.captureScreenshot` so you stay in CSS
+  pixels.
+- Multiple `capture` fences in one turn. One challenge at a time.
+- Inline base64 in `image`. The renderer expects an absolute file path;
+  `Page.captureScreenshot`'s wrapper already saves to a real file.
+- Eyeballing offsets. Use the constants in the recipe above. If they
+  fail, fall back to the bframe CDP attach pattern — never guess.
diff --git a/app/src/main/hl/stock/interaction-skills/iframe-block.md b/app/src/main/hl/stock/interaction-skills/iframe-block.md
new file mode 100644
index 00000000..b398c8ab
--- /dev/null
+++ b/app/src/main/hl/stock/interaction-skills/iframe-block.md
@@ -0,0 +1,106 @@
+# Iframe block — embed a live URL inline in chat
+
+When the user needs to interact with a real remote document inside the
+chat (a reCAPTCHA bframe, a Stripe checkout step, a third-party OAuth
+consent screen, etc.), emit a fenced ` ```iframe ` block carrying the
+URL. The renderer mounts a sandboxed `<iframe src="...">` directly in
+the chat turn; the user does the interaction in-place; when they click
+the foot button you receive `Iframe interaction complete.` (or
+`Iframe skipped.`) as a new user turn.
+
+## When this is the right tool
+
+Use ` ```iframe ` when the user needs to interact with a page whose
+backing session lives in **the renderer's webview**, not the agent's
+browser. The embedded frame loads with the renderer's cookies and
+origin context — it is **not** the same browsing session the agent
+is driving over CDP.
+
+Concretely:
+- ✅ Show the user a public form, demo, or marketing flow you want
+  them to walk through visually.
+- ✅ Show the user an OAuth/SSO screen that they'll authenticate in
+  *for the renderer*, leaving cookies there.
+- ❌ **Don't use this for reCAPTCHA.** Empirically verified — the
+  bframe URL loads in our renderer (Google sets no `X-Frame-Options`
+  and no `frame-ancestors` restriction), but it renders **completely
+  blank**: just the bootstrap `<script>` plus an empty `<div></div>`.
+  The challenge UI is populated by `postMessage` events from the
+  matching anchor iframe on the *original* host, which we don't
+  reproduce. The user sees a blank box. For captcha challenges use
+  ` ```capture ` (capture-block.md) — it screenshots and proxies
+  clicks back to the agent's browser, keeping the live session
+  intact.
+- ❌ Don't use this for sites with `X-Frame-Options: DENY` or
+  `frame-ancestors 'none'` — they will refuse to load.
+
+## Fields
+
+| field         | required | notes |
+|---------------|----------|-------|
+| `url`         | **yes**  | Absolute `https://` URL. The renderer rejects non-http(s) URLs. |
+| `prompt`      | recommended | One-line instruction shown above the frame ("Sign in to GitHub so we can continue."). |
+| `width`       | optional | CSS pixels. Default 400, clamped to [200, 1200]. |
+| `height`      | optional | CSS pixels. Default 500, clamped to [200, 900]. |
+| `submitLabel` | optional | Foot-button text. Default `"I'm done"`. |
+
+## Emit the fence
+
+```
+```iframe
+{
+  "url": "https://accounts.google.com/o/oauth2/...",
+  "prompt": "Approve the consent screen so the agent can continue.",
+  "width": 480,
+  "height": 600,
+  "submitLabel": "I've approved"
+}
+```
+```
+
+Then **stop**. No more tool calls. Wait for the user reply, which will
+be exactly one of:
+
+> Iframe interaction complete.
+
+> Iframe skipped.
+
+Use that to decide what to do next — typically re-query the live page
+to confirm whatever state change you were hoping for.
+
+## What the renderer actually does
+
+- Mounts `<iframe src="<url>" sandbox="allow-scripts allow-same-origin
+  allow-forms allow-popups" referrerPolicy="no-referrer-when-downgrade">`
+  inside the chat turn.
+- Renders a "loading…" overlay until the frame fires `onLoad`.
+- Cannot read the iframe's DOM (same-origin sandbox + cross-origin
+  document = no `contentDocument` access). The agent learns *that*
+  the user clicked the foot button, not *what they did*.
+- The chat renderer's CSP allows `frame-src 'self' https:`. Plain
+  `http://` URLs are blocked.
+
+## Limits to be aware of
+
+- **Different session from the agent's browser.** Cookies set inside
+  the iframe live in the renderer's webview partition, not the
+  Chromium instance the agent drives over CDP. Don't expect cookies
+  set here to affect the agent's tab.
+- **Some sites refuse to be framed.** If you see the frame stay blank
+  past a few seconds, the target almost certainly has
+  `X-Frame-Options: DENY` (or `SAMEORIGIN`) or a `frame-ancestors`
+  CSP directive that excludes our app's origin. There's no recovery
+  — fall back to ` ```capture ` (for image challenges), or open the
+  URL in the agent's tab and use coordinate clicks.
+- **postMessage from inside the iframe is invisible to the agent.**
+  If the remote site signals completion via `window.parent.postMessage`,
+  *the renderer* receives it — the agent does not. You only learn
+  about completion via the user clicking the foot button.
+
+## Banned
+
+- Plain `http://` URLs. Renderer rejects anything that isn't `https://`.
+- Multiple `iframe` fences in one turn. One inline frame at a time
+  keeps the chat readable.
+- Using ` ```iframe ` for reCAPTCHA — covered above. Use the capture
+  block instead.
diff --git a/app/src/renderer/hub/chat-v2/CaptureBlock.tsx b/app/src/renderer/hub/chat-v2/CaptureBlock.tsx
new file mode 100644
index 00000000..cee891b8
--- /dev/null
+++ b/app/src/renderer/hub/chat-v2/CaptureBlock.tsx
@@ -0,0 +1,353 @@
+/**
+ * CaptureBlock — recaptcha-style NxM tile picker rendered from a single
+ * screenshot the agent emitted in a ```capture fence.
+ *
+ * The one image is sliced into rows×cols equal tiles purely via CSS
+ * (`background-size` + `background-position`). The user toggles tiles;
+ * submission returns the selected tile indices as the next user turn
+ * shaped as:
+ *
+ *   Captcha selected tiles: 0, 2, 6
+ *
+ * The agent retains the captcha's page coordinates (it captured them
+ * to clip the screenshot) and converts indices into per-tile click
+ * coordinates on its side — the renderer never sends pixels back.
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { CapturePayload } from './htmlBlocks';
+import { getSubmissionRecord, recordSubmission, submissionKey } from './optionListStore';
+import './captureBlock.css';
+
+interface Props {
+  payload: CapturePayload | null;
+  complete: boolean;
+  error?: string;
+  sessionId?: string;
+  nextUserText?: string | null;
+}
+
+const SUBMIT_PREFIX = 'Captcha selected tiles:';
+
+export function CaptureBlock(props: Props): React.ReactElement {
+  const { payload, complete, error, sessionId, nextUserText } = props;
+  if (!payload) {
+    if (complete && error) {
+      return (
+        <div className="chatv2-capture" data-testid="chatv2-capture" data-state="error">
+          <div className="chatv2-capture__error">capture block ignored: {error}</div>
+        </div>
+      );
+    }
+    return <CaptureSkeleton />;
+  }
+  return <CaptureReady payload={payload} sessionId={sessionId} streaming={!complete} nextUserText={nextUserText} />;
+}
+
+function CaptureSkeleton(): React.ReactElement {
+  return (
+    <div className="chatv2-capture" data-testid="chatv2-capture" data-state="loading">
+      <div className="chatv2-capture__grid chatv2-capture__grid--skel" style={{ ['--rows' as string]: 3, ['--cols' as string]: 3 }}>
+        {Array.from({ length: 9 }).map((_, i) => (
+          <div key={i} className="chatv2-capture__tile chatv2-capture__tile--skel" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface ReadyProps {
+  payload: CapturePayload;
+  sessionId?: string;
+  streaming?: boolean;
+  nextUserText?: string | null;
+}
+
+function CaptureReady({ payload, sessionId, streaming, nextUserText }: ReadyProps): React.ReactElement {
+  const { image, prompt, target, targetImage, rows, cols } = payload;
+  const tileCount = rows * cols;
+  // Three-line reCAPTCHA banner: small lead-in / big bold target /
+  // small trailer ("Click verify once there are none left."). When the
+  // agent emits an explicit `target`, we trust it and treat `prompt` as
+  // the lead. Otherwise we try to auto-split the prompt sentence to
+  // recover the same layout from Google's standard phrasing.
+  const parts = useMemo(
+    () => splitCapturePrompt(prompt, target),
+    [prompt, target],
+  );
+  const hasBanner = Boolean(parts.lead || parts.bold || parts.trailer);
+
+  // Stable cache key so re-mounts in the same renderer session preserve state.
+  const cacheKey = useMemo(
+    () => `capture:${submissionKey(sessionId, [image, String(rows), String(cols)])}`,
+    [sessionId, image, rows, cols],
+  );
+  const cachedRecord = useMemo(() => getSubmissionRecord(cacheKey), [cacheKey]);
+
+  // Transcript-derived submission — reconstruct selection from a prior
+  // "Captcha selected tiles: …" reply. Wins over the in-memory cache so
+  // reopened sessions stay correct without DB persistence.
+  const transcriptSelection = useMemo(
+    () => deriveCaptureSubmission(nextUserText, tileCount),
+    [nextUserText, tileCount],
+  );
+
+  const [selected, setSelected] = useState<Set<number>>(() => {
+    if (transcriptSelection) return new Set(transcriptSelection);
+    if (cachedRecord) {
+      const set = new Set<number>();
+      for (const id of cachedRecord.selectedIds) {
+        const n = Number.parseInt(id, 10);
+        if (Number.isInteger(n) && n >= 0 && n < tileCount) set.add(n);
+      }
+      return set;
+    }
+    return new Set<number>();
+  });
+  const [submitted, setSubmitted] = useState<boolean>(
+    transcriptSelection !== null || cachedRecord !== null,
+  );
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [localSubmit, setLocalSubmit] = useState<boolean>(false);
+  // Per-tile press-animation state so the scale-down feels tactile rather
+  // than relying on CSS :active (which doesn't trigger on keyboard activation).
+  const [pressing, setPressing] = useState<number | null>(null);
+  const gridRef = useRef<HTMLDivElement | null>(null);
+
+  // Late-arriving transcript hydration — same pattern as AskForm.
+  useEffect(() => {
+    if (!transcriptSelection || localSubmit) return;
+    setSelected(new Set(transcriptSelection));
+    setSubmitted(true);
+  }, [transcriptSelection, localSubmit]);
+
+  const toggle = useCallback((idx: number): void => {
+    if (submitted) return;
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(idx)) next.delete(idx);
+      else next.add(idx);
+      return next;
+    });
+  }, [submitted]);
+
+  const submit = useCallback(async (): Promise<void> => {
+    if (submitted) return;
+    if (!sessionId) {
+      setSubmitError('no active session');
+      return;
+    }
+    const sortedIndices = Array.from(selected).sort((a, b) => a - b);
+    const message = sortedIndices.length === 0
+      ? `${SUBMIT_PREFIX} (none)`
+      : `${SUBMIT_PREFIX} ${sortedIndices.join(', ')}`;
+    setLocalSubmit(true);
+    setSubmitted(true);
+    setSubmitError(null);
+    try {
+      const resume = window.electronAPI?.sessions?.resume;
+      if (!resume) {
+        setSubmitError('sessions bridge unavailable');
+        setSubmitted(false);
+        setLocalSubmit(false);
+        return;
+      }
+      const result = await resume(sessionId, message);
+      if (result?.error) {
+        setSubmitError(result.error);
+        setSubmitted(false);
+        setLocalSubmit(false);
+      } else {
+        recordSubmission(cacheKey, sortedIndices.map((n) => String(n)));
+      }
+    } catch (err) {
+      setSubmitError((err as Error).message);
+      setSubmitted(false);
+      setLocalSubmit(false);
+    }
+  }, [submitted, sessionId, selected, cacheKey]);
+
+  const imageSrc = useMemo(() => {
+    // The image path may already be a URL (chatfile://, data:, http(s):); only
+    // wrap raw absolute paths into chatfile://files<abs>.
+    if (/^[a-z]+:/i.test(image)) return image;
+    return `chatfile://files${encodeURI(image)}`;
+  }, [image]);
+
+  const submitLabel = submitted
+    ? 'Sent to agent'
+    : selected.size === 0
+      ? 'Confirm (no tiles)'
+      : `Confirm ${selected.size} tile${selected.size === 1 ? '' : 's'}`;
+
+  return (
+    <div
+      className={`chatv2-capture${submitted ? ' chatv2-capture--submitted' : ''}`}
+      data-testid="chatv2-capture"
+      data-state={streaming ? 'streaming' : submitted ? 'answered' : 'live'}
+    >
+      {hasBanner && (
+        <div className="chatv2-capture__header" role="presentation">
+          <div className="chatv2-capture__header-text">
+            {parts.lead && <div className="chatv2-capture__header-prompt">{parts.lead}</div>}
+            {parts.bold && <div className="chatv2-capture__header-target">{parts.bold}</div>}
+            {parts.trailer && <div className="chatv2-capture__header-trailer">{parts.trailer}</div>}
+          </div>
+          {targetImage && (
+            <img
+              className="chatv2-capture__header-thumb"
+              src={targetImage}
+              alt=""
+              loading="lazy"
+              onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+            />
+          )}
+        </div>
+      )}
+      <div
+        ref={gridRef}
+        className="chatv2-capture__grid"
+        style={{
+          ['--rows' as string]: rows,
+          ['--cols' as string]: cols,
+        }}
+        role="group"
+        aria-label={prompt ?? 'captcha tile selection'}
+      >
+        {Array.from({ length: tileCount }).map((_, i) => {
+          const row = Math.floor(i / cols);
+          const col = i % cols;
+          // CSS background-size of (cols*100%, rows*100%) tiles the same image
+          // at native size across all cells; background-position picks the slice.
+          const bgX = cols === 1 ? 0 : (col / (cols - 1)) * 100;
+          const bgY = rows === 1 ? 0 : (row / (rows - 1)) * 100;
+          const isSel = selected.has(i);
+          const isPressing = pressing === i;
+          return (
+            <button
+              key={i}
+              type="button"
+              className="chatv2-capture__tile"
+              data-selected={isSel ? 'true' : 'false'}
+              data-pressing={isPressing ? 'true' : 'false'}
+              aria-pressed={isSel}
+              aria-label={`tile ${i + 1}`}
+              disabled={submitted}
+              style={{
+                backgroundImage: `url("${imageSrc}")`,
+                backgroundSize: `${cols * 100}% ${rows * 100}%`,
+                backgroundPosition: `${bgX}% ${bgY}%`,
+                ['--tile-index' as string]: i,
+              }}
+              onPointerDown={() => setPressing(i)}
+              onPointerUp={() => setPressing((cur) => (cur === i ? null : cur))}
+              onPointerLeave={() => setPressing((cur) => (cur === i ? null : cur))}
+              onPointerCancel={() => setPressing((cur) => (cur === i ? null : cur))}
+              onClick={() => toggle(i)}
+            >
+              <span className="chatv2-capture__check" aria-hidden="true">
+                <svg viewBox="0 0 16 16" width="14" height="14">
+                  <path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </span>
+            </button>
+          );
+        })}
+      </div>
+      <div className="chatv2-capture__foot">
+        <button
+          type="button"
+          className="chatv2-capture__submit"
+          disabled={submitted}
+          onClick={() => { void submit(); }}
+        >
+          {submitLabel}
+        </button>
+        {submitError && (
+          <span className="chatv2-capture__hint chatv2-capture__hint--err">{submitError}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Split a reCAPTCHA-style prompt into the three banner lines Google uses:
+ *   - lead:    "Select all images with"
+ *   - bold:    "a fire hydrant"   (the target subject, rendered large/bold)
+ *   - trailer: "Click verify once there are none left."
+ *
+ * If the caller passed an explicit `target`, trust it and treat the rest of
+ * `prompt` as lead/trailer. Otherwise regex-split the prompt at the first
+ * "with X." pattern, which covers ~all standard challenges.
+ *
+ * Exported for tests.
+ */
+export function splitCapturePrompt(
+  prompt: string | undefined,
+  target: string | undefined,
+): { lead: string; bold: string; trailer: string } {
+  const p = (prompt || '').trim();
+  const t = (target || '').trim();
+
+  if (t) {
+    if (!p) return { lead: 'Select all images with', bold: t, trailer: '' };
+    // Try to find the target inside the prompt to recover lead/trailer.
+    const idx = p.toLowerCase().indexOf(t.toLowerCase());
+    if (idx >= 0) {
+      const lead = p.slice(0, idx).replace(/[\s.]+$/, '').trim();
+      const rest = p.slice(idx + t.length).replace(/^[\s.]+/, '').trim();
+      return { lead: lead || 'Select all images with', bold: t, trailer: rest };
+    }
+    return { lead: p, bold: t, trailer: '' };
+  }
+
+  if (!p) return { lead: '', bold: '', trailer: '' };
+
+  // Standard reCAPTCHA shape: "<lead> with <subject>. <trailer>"
+  const withPeriod = p.match(/^(.*?\bwith)\s+(.+?)\.\s*(.*)$/i);
+  if (withPeriod) {
+    return {
+      lead: withPeriod[1].trim(),
+      bold: withPeriod[2].trim(),
+      trailer: withPeriod[3].trim(),
+    };
+  }
+  // Shape without trailer sentence: "<lead> with <subject>"
+  const noPeriod = p.match(/^(.*?\bwith)\s+(.+)$/i);
+  if (noPeriod) {
+    return {
+      lead: noPeriod[1].trim(),
+      bold: noPeriod[2].trim(),
+      trailer: '',
+    };
+  }
+  // No recognizable shape — render the whole sentence at the small lead size.
+  return { lead: p, bold: '', trailer: '' };
+}
+
+/**
+ * Reverse of the submit format: parse "Captcha selected tiles: 0, 2, 6"
+ * (or "Captcha selected tiles: (none)") into a Set<number> of tile
+ * indices. Returns null when text isn't a capture reply.
+ *
+ * Exported for tests.
+ */
+export function deriveCaptureSubmission(
+  text: string | null | undefined,
+  tileCount: number,
+): Set<number> | null {
+  if (!text) return null;
+  const head = text.trimStart();
+  if (!head.startsWith(SUBMIT_PREFIX)) return null;
+  const rest = head.slice(SUBMIT_PREFIX.length).trim();
+  if (rest.length === 0) return new Set();
+  if (rest.toLowerCase() === '(none)') return new Set();
+  const out = new Set<number>();
+  for (const part of rest.split(/[,\s]+/)) {
+    if (!part) continue;
+    const n = Number.parseInt(part, 10);
+    if (Number.isInteger(n) && n >= 0 && n < tileCount) out.add(n);
+  }
+  return out;
+}
diff --git a/app/src/renderer/hub/chat-v2/IframeBlock.tsx b/app/src/renderer/hub/chat-v2/IframeBlock.tsx
new file mode 100644
index 00000000..2e3f0f2b
--- /dev/null
+++ b/app/src/renderer/hub/chat-v2/IframeBlock.tsx
@@ -0,0 +1,209 @@
+/**
+ * IframeBlock — embeds an arbitrary URL the agent emitted in a ```iframe
+ * fence directly inside the chat turn. The user interacts with the real
+ * remote document; when they click the foot button the agent resumes
+ * with "Iframe interaction complete." as the next user turn.
+ *
+ * Pure read-only proxy: this component does not (and cannot) read the
+ * iframe's contents back, so the agent learns *that* the user finished,
+ * not *what* they did. See iframe-block.md for the limits of this model.
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { IframePayload } from './htmlBlocks';
+import { getSubmissionRecord, recordSubmission, submissionKey } from './optionListStore';
+import './iframeBlock.css';
+
+interface Props {
+  payload: IframePayload | null;
+  complete: boolean;
+  error?: string;
+  sessionId?: string;
+  nextUserText?: string | null;
+}
+
+const SUBMIT_PREFIX = 'Iframe interaction complete';
+const SKIP_PREFIX = 'Iframe skipped';
+
+export function IframeBlock(props: Props): React.ReactElement {
+  const { payload, complete, error, sessionId, nextUserText } = props;
+  if (!payload) {
+    if (complete && error) {
+      return (
+        <div className="chatv2-iframe" data-testid="chatv2-iframe" data-state="error">
+          <div className="chatv2-iframe__error">iframe block ignored: {error}</div>
+        </div>
+      );
+    }
+    return (
+      <div className="chatv2-iframe" data-testid="chatv2-iframe" data-state="loading">
+        <div className="chatv2-iframe__skel" />
+      </div>
+    );
+  }
+  return <IframeReady payload={payload} sessionId={sessionId} streaming={!complete} nextUserText={nextUserText} />;
+}
+
+interface ReadyProps {
+  payload: IframePayload;
+  sessionId?: string;
+  streaming?: boolean;
+  nextUserText?: string | null;
+}
+
+function IframeReady({ payload, sessionId, streaming, nextUserText }: ReadyProps): React.ReactElement {
+  const { url, prompt, width, height, submitLabel } = payload;
+  const cacheKey = useMemo(
+    () => `iframe:${submissionKey(sessionId, [url])}`,
+    [sessionId, url],
+  );
+  const cachedRecord = useMemo(() => getSubmissionRecord(cacheKey), [cacheKey]);
+
+  const transcriptResolved = useMemo(() => deriveIframeSubmission(nextUserText), [nextUserText]);
+
+  const [submitted, setSubmitted] = useState<boolean>(
+    transcriptResolved !== null || cachedRecord !== null,
+  );
+  const [skipped, setSkipped] = useState<boolean>(
+    (transcriptResolved && transcriptResolved.skipped) || (cachedRecord?.selectedIds?.[0] === 'skipped') || false,
+  );
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [localSubmit, setLocalSubmit] = useState<boolean>(false);
+  const [loadState, setLoadState] = useState<'loading' | 'ready' | 'errored'>('loading');
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  useEffect(() => {
+    if (!transcriptResolved || localSubmit) return;
+    setSubmitted(true);
+    setSkipped(transcriptResolved.skipped);
+  }, [transcriptResolved, localSubmit]);
+
+  const resume = useCallback(
+    async (message: string, marker: string): Promise<void> => {
+      if (submitted) return;
+      if (!sessionId) {
+        setSubmitError('no active session');
+        return;
+      }
+      const sessionsResume = window.electronAPI?.sessions?.resume;
+      if (!sessionsResume) {
+        setSubmitError('sessions bridge unavailable');
+        return;
+      }
+      setLocalSubmit(true);
+      setSubmitted(true);
+      setSubmitError(null);
+      try {
+        const result = await sessionsResume(sessionId, message);
+        if (result?.error) {
+          setSubmitError(result.error);
+          setSubmitted(false);
+          setLocalSubmit(false);
+        } else {
+          recordSubmission(cacheKey, [marker]);
+        }
+      } catch (err) {
+        setSubmitError((err as Error).message);
+        setSubmitted(false);
+        setLocalSubmit(false);
+      }
+    },
+    [submitted, sessionId, cacheKey],
+  );
+
+  const onDone = useCallback(() => {
+    setSkipped(false);
+    void resume(`${SUBMIT_PREFIX}.`, 'done');
+  }, [resume]);
+
+  const onSkip = useCallback(() => {
+    setSkipped(true);
+    void resume(`${SKIP_PREFIX}.`, 'skipped');
+  }, [resume]);
+
+  const buttonLabel = submitted
+    ? skipped
+      ? 'Skipped'
+      : 'Sent to agent'
+    : (submitLabel || "I'm done");
+
+  return (
+    <div
+      className={`chatv2-iframe${submitted ? ' chatv2-iframe--submitted' : ''}`}
+      data-testid="chatv2-iframe"
+      data-state={streaming ? 'streaming' : submitted ? 'answered' : 'live'}
+    >
+      {prompt && <div className="chatv2-iframe__prompt">{prompt}</div>}
+      <div
+        className="chatv2-iframe__frame-wrap"
+        style={{ width: `${width}px`, height: `${height}px` }}
+      >
+        {loadState === 'loading' && (
+          <div className="chatv2-iframe__overlay">loading <span className="chatv2-iframe__url">{hostOf(url)}</span>…</div>
+        )}
+        {loadState === 'errored' && (
+          <div className="chatv2-iframe__overlay chatv2-iframe__overlay--err">
+            unable to display {hostOf(url)} inside chat — the remote document refused embedding
+          </div>
+        )}
+        <iframe
+          ref={iframeRef}
+          className="chatv2-iframe__frame"
+          src={url}
+          sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+          referrerPolicy="no-referrer-when-downgrade"
+          onLoad={() => setLoadState('ready')}
+          onError={() => setLoadState('errored')}
+          title={prompt || hostOf(url)}
+        />
+      </div>
+      <div className="chatv2-iframe__foot">
+        <button
+          type="button"
+          className="chatv2-iframe__submit"
+          disabled={submitted}
+          onClick={onDone}
+        >
+          {buttonLabel}
+        </button>
+        {!submitted && (
+          <button
+            type="button"
+            className="chatv2-iframe__skip"
+            onClick={onSkip}
+          >
+            Skip
+          </button>
+        )}
+        {submitError && (
+          <span className="chatv2-iframe__hint chatv2-iframe__hint--err">{submitError}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function hostOf(raw: string): string {
+  try {
+    return new URL(raw).host;
+  } catch {
+    return raw;
+  }
+}
+
+/**
+ * Reverse the submit format: "Iframe interaction complete." or
+ * "Iframe skipped." → { skipped: boolean }. Returns null if the text
+ * isn't an iframe-block reply.
+ *
+ * Exported for tests.
+ */
+export function deriveIframeSubmission(
+  text: string | null | undefined,
+): { skipped: boolean } | null {
+  if (!text) return null;
+  const head = text.trimStart();
+  if (head.startsWith(SUBMIT_PREFIX)) return { skipped: false };
+  if (head.startsWith(SKIP_PREFIX)) return { skipped: true };
+  return null;
+}
diff --git a/app/src/renderer/hub/chat-v2/LoginForm.tsx b/app/src/renderer/hub/chat-v2/LoginForm.tsx
new file mode 100644
index 00000000..6eab017a
--- /dev/null
+++ b/app/src/renderer/hub/chat-v2/LoginForm.tsx
@@ -0,0 +1,304 @@
+/**
+ * LoginForm — credential entry surface rendered for a `login` fenced block.
+ *
+ * Mirrors the OptionList / AskForm pattern: agent emits the fence, the
+ * component renders in place, and on submit we resume the session with a
+ * structured user turn. The agent reads the credentials on its next turn
+ * and types them into the live browser view.
+ *
+ * Two affordances:
+ *   - Primary: username + password fields → "Login for <site>:\n…" turn.
+ *   - Escape: "Log in manually in the browser" link → opens the site
+ *             externally and resumes with "I'll log in to <site> myself".
+ *
+ * Persistence is transcript-derived (same as OptionList): on reload we
+ * read the next user turn and reconstruct the receipt view. The
+ * receipt NEVER re-renders the plaintext password — only the agent's
+ * raw transcript carries it.
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { LoginPayload } from './htmlBlocks';
+import './loginForm.css';
+
+interface Props {
+  payload: LoginPayload | null;
+  complete: boolean;
+  error?: string;
+  sessionId?: string;
+  /** User reply turn that follows this form, if any. */
+  nextUserText?: string | null;
+}
+
+type Mode = 'live' | 'submitted-credentials';
+
+export function LoginForm(props: Props): React.ReactElement {
+  const { payload, complete, error, sessionId, nextUserText } = props;
+  if (!payload) {
+    if (complete && error) {
+      return (
+        <div className="chatv2-login" data-testid="chatv2-login" data-state="error">
+          <div className="chatv2-login__error">login block ignored: {error}</div>
+        </div>
+      );
+    }
+    return <LoginFormSkeleton />;
+  }
+  return <LoginFormReady payload={payload} sessionId={sessionId} nextUserText={nextUserText} />;
+}
+
+function LoginFormSkeleton(): React.ReactElement {
+  return (
+    <div className="chatv2-login" data-testid="chatv2-login" data-state="loading">
+      <div className="chatv2-login__skel-line chatv2-login__skel-line--med" />
+      <div className="chatv2-login__skel-input" />
+      <div className="chatv2-login__skel-input" />
+    </div>
+  );
+}
+
+interface ReadyProps {
+  payload: LoginPayload;
+  sessionId?: string;
+  nextUserText?: string | null;
+}
+
+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 siteHostname(url: string): string | undefined {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return undefined;
+  }
+}
+
+function LoginFormReady({ payload, sessionId, nextUserText }: ReadyProps): React.ReactElement {
+  const { site, url, prompt, usernameLabel, passwordLabel } = payload;
+  const usernameLbl = usernameLabel || 'Username';
+  const passwordLbl = passwordLabel || 'Password';
+
+  const transcriptMode = useMemo(
+    () => deriveLoginSubmissionMode(nextUserText, site),
+    [nextUserText, site],
+  );
+
+  const [username, setUsername] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [mode, setMode] = useState<Mode>(transcriptMode ?? 'live');
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [localSubmit, setLocalSubmit] = useState<boolean>(false);
+  const usernameRef = useRef<HTMLInputElement | null>(null);
+
+  // Late-arriving transcript: hydrate if it shows up after first paint.
+  useEffect(() => {
+    if (!transcriptMode || localSubmit) return;
+    setMode(transcriptMode);
+  }, [transcriptMode, localSubmit]);
+
+  // Auto-focus the username field on first mount (live state only).
+  useEffect(() => {
+    if (mode === 'live' && usernameRef.current) {
+      usernameRef.current.focus({ preventScroll: true });
+    }
+  }, [mode]);
+
+  const canSubmit = username.trim().length > 0 && password.length > 0;
+
+  const submitCredentials = useCallback(async (): Promise<void> => {
+    if (!canSubmit || mode !== 'live') return;
+    if (!sessionId) {
+      setSubmitError('no active session');
+      return;
+    }
+    const message = `Login for ${site}:\nusername: ${username}\npassword: ${password}`;
+    setLocalSubmit(true);
+    setMode('submitted-credentials');
+    setSubmitError(null);
+    try {
+      const result = await window.electronAPI?.sessions?.resume(sessionId, message);
+      if (result?.error) {
+        setSubmitError(result.error);
+        setMode('live');
+        setLocalSubmit(false);
+      }
+    } catch (err) {
+      setSubmitError((err as Error).message);
+      setMode('live');
+      setLocalSubmit(false);
+    }
+  }, [canSubmit, mode, sessionId, site, username, password]);
+
+  const openBrowserView = useCallback((): void => {
+    // Same action the chatbar's BrowserPreview thumbnail performs — opens
+    // the in-app WebContentsView so the user can log in directly there.
+    // No synthetic chat message; the user signals "done" by typing their
+    // own next message.
+    window.dispatchEvent(new CustomEvent('chatv2:open-browser'));
+  }, []);
+
+  if (mode === 'submitted-credentials') {
+    return (
+      <div
+        className="chatv2-login chatv2-login--submitted"
+        data-testid="chatv2-login"
+        data-state="submitted"
+      >
+        <div className="chatv2-login__receipt">
+          <div className="chatv2-login__receipt-title">
+            Submitted credentials for {site}
+          </div>
+          <SiteAttribution url={url} site={site} />
+          <div className="chatv2-login__receipt-meta">
+            agent will type these into the live tab
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="chatv2-login" data-testid="chatv2-login" data-state="live">
+      <div className="chatv2-login__head">
+        <div className="chatv2-login__prompt">
+          {prompt || `Sign in to ${site}`}
+        </div>
+        <SiteAttribution url={url} site={site} />
+      </div>
+
+      <form
+        className="chatv2-login__form"
+        onSubmit={(e) => { e.preventDefault(); void submitCredentials(); }}
+      >
+        <label className="chatv2-login__field">
+          <span className="chatv2-login__field-label">{usernameLbl}</span>
+          <input
+            ref={usernameRef}
+            type="text"
+            className="chatv2-login__input"
+            autoComplete="username"
+            spellCheck={false}
+            autoCapitalize="off"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+        </label>
+
+        <label className="chatv2-login__field">
+          <span className="chatv2-login__field-label">{passwordLbl}</span>
+          <div className="chatv2-login__password-wrap">
+            <input
+              type={showPassword ? 'text' : 'password'}
+              className="chatv2-login__input"
+              autoComplete="current-password"
+              spellCheck={false}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+            <button
+              type="button"
+              className="chatv2-login__reveal"
+              onClick={() => setShowPassword((v) => !v)}
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+              tabIndex={-1}
+            >
+              {showPassword ? 'hide' : 'show'}
+            </button>
+          </div>
+        </label>
+
+        <ManualLoginLink site={site} onClick={openBrowserView} />
+
+        <div className="chatv2-login__foot">
+          <button
+            type="submit"
+            className="chatv2-login__submit"
+            disabled={!canSubmit}
+          >
+            Send to agent
+          </button>
+        </div>
+
+        {submitError && (
+          <div className="chatv2-login__submit-error">{submitError}</div>
+        )}
+      </form>
+    </div>
+  );
+}
+
+/** Hostname + favicon row under the prompt — same credibility cue
+ *  OptionList uses for its "Results from <site>" attribution. */
+function SiteAttribution({ url, site }: { url: string; site: string }): React.ReactElement | null {
+  const [broken, setBroken] = useState<boolean>(false);
+  const host = siteHostname(url);
+  const src = siteFaviconUrl(url);
+  if (!host) return null;
+  return (
+    <div className="chatv2-login__attribution">
+      {src && !broken && (
+        <img
+          className="chatv2-login__attribution-icon"
+          src={src}
+          alt=""
+          width={12}
+          height={12}
+          onError={() => setBroken(true)}
+        />
+      )}
+      <span className="chatv2-login__attribution-text">
+        <b className="chatv2-login__attribution-site">{site}</b>
+        <span className="chatv2-login__attribution-sep" aria-hidden="true">·</span>
+        <span className="chatv2-login__attribution-host">{host}</span>
+      </span>
+    </div>
+  );
+}
+
+function ManualLoginLink({ site, onClick }: { site: string; onClick: () => void }): React.ReactElement {
+  return (
+    <button
+      type="button"
+      className="chatv2-login__manual-link"
+      onClick={onClick}
+    >
+      <span>log in on {site} myself</span>
+      <svg
+        className="chatv2-login__manual-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>
+    </button>
+  );
+}
+
+/**
+ * Detect whether `text` is the user-reply turn that follows this login
+ * form and, if so, which mode the form should restore to. Returns null
+ * when the text isn't a login reply for this `site`.
+ *
+ * Exported for tests.
+ */
+export function deriveLoginSubmissionMode(
+  text: string | null | undefined,
+  site: string,
+): 'submitted-credentials' | null {
+  if (!text) return null;
+  if (text.trimStart().startsWith(`Login for ${site}:`)) return 'submitted-credentials';
+  return null;
+}
diff --git a/app/src/renderer/hub/chat-v2/OptionList.tsx b/app/src/renderer/hub/chat-v2/OptionList.tsx
index c6976149..22ca48f3 100644
--- a/app/src/renderer/hub/chat-v2/OptionList.tsx
+++ b/app/src/renderer/hub/chat-v2/OptionList.tsx
@@ -555,6 +555,15 @@ function OptionListReady({ payload, sessionId, streaming, cancelled, nextUserTex
                   />
                 );
               })}
+              {streaming && Array.from({ length: 2 }).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>
+              ))}
             </div>
 
             {sec.allowOther && (
diff --git a/app/src/renderer/hub/chat-v2/captureBlock.css b/app/src/renderer/hub/chat-v2/captureBlock.css
new file mode 100644
index 00000000..d877be01
--- /dev/null
+++ b/app/src/renderer/hub/chat-v2/captureBlock.css
@@ -0,0 +1,304 @@
+/* CaptureBlock — recaptcha-style NxM tile picker.
+ *
+ * Uses design-system semantic tokens from theme.shell.css; auto-flips
+ * with [data-mode="light"] so no light-mode block is needed here.
+ *
+ * The grid is one <img> sliced into rows×cols tiles entirely via CSS
+ * background-position. See CaptureBlock.tsx for the math.
+ */
+
+.chatv2-capture {
+  clear: both;
+  display: flex;
+  flex-direction: column;
+  gap: 0; /* banner + grid are flush; the rounded container handles edges */
+  margin-top: 18px;
+  /* Hug the grid width rather than stretching across the chat surface.
+   * The grid itself maxes at 360px (see __grid below); the container
+   * inherits that so the bordered shell isn't oversized. */
+  width: fit-content;
+  max-width: min(360px, 100%);
+  background: var(--color-bg-base);
+  border: 1px solid var(--color-border-strong, var(--color-border, rgba(0, 0, 0, 0.22)));
+  border-radius: var(--radius-lg, 10px);
+  overflow: hidden;
+}
+
+.chatv2-capture__prompt {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-fg-primary);
+  letter-spacing: -0.005em;
+  line-height: 1.35;
+}
+
+/* reCAPTCHA-style header — the blue banner that sits flush on top of the
+ * grid in Google's actual challenge UI. Two-column layout: prompt+target
+ * on the left, optional example thumbnail on the right. The header
+ * shares the grid's max-width and border-radius (top corners) so it
+ * reads as one continuous card with the tiles below. */
+.chatv2-capture__header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 14px 16px;
+  background: #4285f4; /* reCAPTCHA prompt-bar blue */
+  color: #fff;
+}
+.chatv2-capture__header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.chatv2-capture__header-prompt {
+  font-size: 13px;
+  line-height: 1.25;
+  letter-spacing: 0.002em;
+  opacity: 0.92;
+}
+.chatv2-capture__header-target {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+  text-transform: lowercase;
+}
+.chatv2-capture__header-trailer {
+  font-size: 13px;
+  line-height: 1.25;
+  letter-spacing: 0.002em;
+  opacity: 0.92;
+  margin-top: 2px;
+}
+.chatv2-capture__header-thumb {
+  width: 64px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 2px solid #fff;
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
+  display: block;
+}
+
+/* Foot pads inside the bordered shell, like reCAPTCHA's toolbar area. */
+.chatv2-capture__foot {
+  padding: 12px 14px 14px;
+}
+
+.chatv2-capture__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 3), 1fr);
+  grid-auto-rows: 1fr;
+  gap: 4px;
+  width: 100%;
+  max-width: 360px;
+  aspect-ratio: var(--cols, 3) / var(--rows, 3);
+  /* Grout lines between tiles. Uses bg-base so it flips with theme
+   * (white in light mode, near-black in dark) — matches Google's
+   * reCAPTCHA where the gutters read as the page background. */
+  background: var(--color-bg-base);
+  outline: none;
+}
+
+.chatv2-capture__tile {
+  position: relative;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background-color: var(--color-surface-1, #111);
+  background-repeat: no-repeat;
+  cursor: pointer;
+  overflow: hidden;
+  outline: none;
+  /* Snap to integer pixels so adjacent tiles share an exact edge — no
+   * sub-pixel seams that show the slicing. */
+  transform: translateZ(0);
+  transition: transform 120ms cubic-bezier(0.2, 0.7, 0.2, 1),
+              filter 140ms ease-out,
+              box-shadow 140ms ease-out;
+  animation: chatv2-capture-tile-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  animation-delay: calc(var(--tile-index, 0) * 28ms);
+  will-change: transform;
+}
+
+@keyframes chatv2-capture-tile-in {
+  from { opacity: 0; transform: translateY(6px) scale(0.96); }
+  to   { opacity: 1; transform: translateY(0)    scale(1);    }
+}
+
+.chatv2-capture__tile:hover:not(:disabled) {
+  filter: brightness(1.08);
+  z-index: 1;
+}
+
+.chatv2-capture__tile:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--color-fg-primary);
+  z-index: 2;
+}
+
+/* Pointer-down: snap down 4% with a fast curve. Pointer-up returns
+ * through the transform transition above for a tactile bounce-back. */
+.chatv2-capture__tile[data-pressing="true"]:not(:disabled) {
+  transform: scale(0.94);
+  transition-duration: 70ms;
+  filter: brightness(0.95);
+}
+
+/* Selected state — neutral b/w treatment that matches OptionList /
+ * AskForm. Ring uses the foreground color (mode-inverted: white on dark,
+ * black on light), the wash is a soft neutral dim, and the check chip
+ * pill is fg-on-bg so it reads the same way in both modes. */
+.chatv2-capture__tile[data-selected="true"] {
+  box-shadow: inset 0 0 0 3px var(--color-fg-primary);
+}
+.chatv2-capture__tile[data-selected="true"]::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.32);
+  pointer-events: none;
+  animation: chatv2-capture-wash-in 160ms ease-out both;
+}
+@keyframes chatv2-capture-wash-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.chatv2-capture__check {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 22px;
+  height: 22px;
+  border-radius: 11px;
+  background: var(--color-fg-primary);
+  color: var(--color-bg-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  z-index: 2;
+  pointer-events: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+}
+.chatv2-capture__tile[data-selected="true"] .chatv2-capture__check {
+  transform: scale(1);
+}
+
+.chatv2-capture__tile:disabled {
+  cursor: default;
+  filter: none;
+}
+
+/* Skeleton variant — placeholder grid while the fence is still streaming
+ * (no image yet). */
+.chatv2-capture__grid--skel .chatv2-capture__tile--skel {
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-1, #111) 0%,
+    var(--color-surface-2, #1a1a1a) 50%,
+    var(--color-surface-1, #111) 100%
+  );
+  background-size: 200% 100%;
+  animation: chatv2-capture-shimmer 1.4s linear infinite;
+  cursor: default;
+}
+@keyframes chatv2-capture-shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}
+
+/* Footer — Confirm + error hint. Mirrors the option-list / ask-form foot
+ * so the chat surface stays visually consistent. */
+.chatv2-capture__foot {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 6px;
+}
+
+/* Mirrors OptionList: fg-on-bg solid pill when live, transparent
+ * outline-only pill when locked. No color accents — keeps the simple
+ * b/w aesthetic consistent across all chat-v2 pickers. */
+.chatv2-capture__submit {
+  appearance: none;
+  background: var(--color-fg-primary);
+  color: var(--color-bg-base);
+  border: 0;
+  border-radius: 999px;
+  padding: 11px 24px;
+  font: 600 13.5px var(--font-ui, system-ui, sans-serif);
+  cursor: pointer;
+  transition: filter var(--duration-fast, 100ms) var(--ease-out, ease);
+}
+.chatv2-capture__submit:hover:not(:disabled) {
+  filter: brightness(0.93);
+}
+.chatv2-capture__submit:disabled {
+  background: transparent;
+  color: var(--color-fg-tertiary);
+  border: 1px solid var(--color-border-subtle);
+  cursor: not-allowed;
+}
+
+.chatv2-capture__hint {
+  font-size: 12.5px;
+  color: var(--color-fg-tertiary, #888);
+}
+.chatv2-capture__hint--err {
+  color: #ff7a7a;
+}
+
+/* Submitted state — the user has confirmed, agent is processing.
+ *
+ * No color shift (keep the b/w treatment consistent with options /
+ * askform). The distinction comes from two unambiguous signals:
+ *   1) unselected tiles are heavily desaturated and dimmed, so the
+ *      surviving "selected" tiles read as the only live content.
+ *   2) the foot button switches to the OptionList disabled pill —
+ *      transparent body, tertiary outline, "Sent to agent" text. */
+.chatv2-capture--submitted .chatv2-capture__tile[data-selected="false"] {
+  filter: grayscale(1) brightness(0.42);
+  opacity: 0.5;
+}
+/* Selected tiles flip to a success-green ring + chip on submit so the
+ * "you finalized these" reading is unambiguous. The foot button stays
+ * b/w (matches OptionList) — only the tile state carries the success
+ * color, not the surrounding chrome. */
+.chatv2-capture--submitted .chatv2-capture__tile[data-selected="true"] {
+  box-shadow: inset 0 0 0 3px #3ecf8e;
+}
+.chatv2-capture--submitted .chatv2-capture__tile[data-selected="true"]::after {
+  background: linear-gradient(180deg, rgba(20, 110, 70, 0.30), rgba(20, 110, 70, 0.45));
+}
+.chatv2-capture--submitted .chatv2-capture__tile[data-selected="true"] .chatv2-capture__check {
+  background: #3ecf8e;
+  color: #062213;
+}
+
+.chatv2-capture__error {
+  font-size: 12.5px;
+  color: #ff7a7a;
+  padding: 6px 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chatv2-capture__tile {
+    animation: none;
+    transition: none;
+  }
+  .chatv2-capture__tile[data-selected="true"]::after {
+    animation: none;
+  }
+  .chatv2-capture__check {
+    transition: none;
+  }
+  .chatv2-capture__grid--skel .chatv2-capture__tile--skel {
+    animation: none;
+  }
+}
diff --git a/app/src/renderer/hub/chat-v2/htmlBlocks.ts b/app/src/renderer/hub/chat-v2/htmlBlocks.ts
index 624da8e4..6432ded4 100644
--- a/app/src/renderer/hub/chat-v2/htmlBlocks.ts
+++ b/app/src/renderer/hub/chat-v2/htmlBlocks.ts
@@ -113,13 +113,72 @@ export interface AskFormPayload {
   questions: AskQuestion[];
 }
 
-export type FenceTag = 'html' | 'htmlview' | 'options' | 'ask';
+/**
+ * Payload for a ```login fence — credential collection during browsing.
+ * `site` is the brand token (e.g. "Amazon", not "amazon.com"). `url` is
+ * required so the manual-login escape hatch knows where to deep-link.
+ */
+export interface LoginPayload {
+  site: string;
+  url: string;
+  prompt?: string;
+  usernameLabel?: string;
+  passwordLabel?: string;
+}
+
+/**
+ * Payload for a ```capture fence — recaptcha 3×3 (or NxM) tile picker.
+ * `image` is an absolute path under the harness outputs dir; the renderer
+ * loads it via `chatfile://files<image>`. The renderer slices that single
+ * image visually into rows×cols tiles via CSS `background-position`; no
+ * pre-cropping happens server-side. Selection is returned to the agent as
+ * a list of tile indices (0-based, left-to-right, top-to-bottom).
+ */
+export interface CapturePayload {
+  image: string;
+  prompt?: string;
+  /** Bold subject for the reCAPTCHA-style header banner ("cars",
+   *  "motorcycles", etc.). Rendered emphasized; the renderer matches
+   *  Google's blue prompt bar. */
+  target?: string;
+  /** Optional example thumbnail shown on the right of the header
+   *  (matches the reCAPTCHA "find more like this" candidate image). */
+  targetImage?: string;
+  rows: number;
+  cols: number;
+}
+
+/**
+ * Payload for an ```iframe fence — embeds an arbitrary http(s) URL in a
+ * sandboxed <iframe> directly inside the chat turn. The agent uses this
+ * to surface a piece of the page it's already navigating (a captcha
+ * bframe, a checkout step, an OAuth consent screen) so the user can
+ * interact with the real thing rather than a screenshot+proxy. The
+ * agent's browser session is unrelated to whatever cookies/state the
+ * embedded frame establishes inside the renderer — see iframe-block.md
+ * for the (sometimes severe) limitations.
+ */
+export interface IframePayload {
+  url: string;
+  prompt?: string;
+  /** Pixel width of the embedded frame. Clamped to [200, 1200]. */
+  width: number;
+  /** Pixel height of the embedded frame. Clamped to [200, 900]. */
+  height: number;
+  /** Submit-button label shown below the frame. Default "I'm done". */
+  submitLabel?: string;
+}
+
+export type FenceTag = 'html' | 'htmlview' | 'options' | 'ask' | 'login' | 'capture' | 'iframe';
 
 export type ExtractEvent =
   | { kind: 'text'; text: string }
   | { kind: 'html_block'; content: string; tag: 'html' | 'htmlview'; complete: boolean }
   | { kind: 'option_list'; complete: boolean; raw: string; parsed: OptionListPayload | null; error?: string }
-  | { kind: 'ask_form'; complete: boolean; raw: string; parsed: AskFormPayload | null; error?: string };
+  | { kind: 'ask_form'; complete: boolean; raw: string; parsed: AskFormPayload | null; error?: string }
+  | { kind: 'login_form'; complete: boolean; raw: string; parsed: LoginPayload | null; error?: string }
+  | { kind: 'capture_block'; complete: boolean; raw: string; parsed: CapturePayload | null; error?: string }
+  | { kind: 'iframe_block'; complete: boolean; raw: string; parsed: IframePayload | null; error?: string };
 
 /**
  * Stateful, chunk-fed extractor. Safe to call `feed` once per streamed
@@ -244,8 +303,8 @@ export function extractAll(chunks: string[]): ExtractEvent[] {
  * newline arrives in the next chunk); LAX also accepts end-of-input
  * (used only during the final `end()` flush).
  */
-const OPENER_STRICT = /(^|\n)```(html|htmlview|options|ask)[ \t]*\r?\n/;
-const OPENER_LAX = /(^|\n)```(html|htmlview|options|ask)[ \t]*(\r?\n|$)/;
+const OPENER_STRICT = /(^|\n)```(html|htmlview|options|ask|login|capture|iframe)[ \t]*\r?\n/;
+const OPENER_LAX = /(^|\n)```(html|htmlview|options|ask|login|capture|iframe)[ \t]*(\r?\n|$)/;
 
 function findOpener(buf: string, flush: boolean): { start: number; end: number; tag: FenceTag } | null {
   const re = flush ? OPENER_LAX : OPENER_STRICT;
@@ -321,9 +380,128 @@ function emitBlock(tag: FenceTag, content: string, complete: boolean): ExtractEv
     const { parsed, error } = parseAskForm(content, { partial: !complete });
     return { kind: 'ask_form', complete, raw: content, parsed, error };
   }
+  if (tag === 'login') {
+    const { parsed, error } = parseLoginBlock(content);
+    return { kind: 'login_form', complete, raw: content, parsed, error };
+  }
+  if (tag === 'capture') {
+    const { parsed, error } = parseCaptureBlock(content);
+    return { kind: 'capture_block', complete, raw: content, parsed, error };
+  }
+  if (tag === 'iframe') {
+    const { parsed, error } = parseIframeBlock(content);
+    return { kind: 'iframe_block', complete, raw: content, parsed, error };
+  }
   return { kind: 'html_block', content, tag: tag as 'html' | 'htmlview', complete };
 }
 
+/**
+ * Parse + validate an iframe block body. Tiny flat JSON; the renderer
+ * has nothing useful to show until the URL is in hand, so no streaming
+ * partial path.
+ */
+export function parseIframeBlock(raw: string): { parsed: IframePayload | null; error?: string } {
+  let data: unknown;
+  try {
+    data = JSON.parse(raw);
+  } catch {
+    return { parsed: null, error: 'invalid json' };
+  }
+  if (!data || typeof data !== 'object' || Array.isArray(data)) {
+    return { parsed: null, error: 'expected json object at top level' };
+  }
+  const obj = data as Record<string, unknown>;
+  const url = typeof obj.url === 'string' ? obj.url.trim() : '';
+  if (!url) return { parsed: null, error: 'missing required field "url"' };
+  if (!isAbsoluteHttpUrl(url)) return { parsed: null, error: 'url must be an absolute http(s) URL' };
+  const widthRaw = typeof obj.width === 'number' && Number.isFinite(obj.width) ? Math.floor(obj.width) : 400;
+  const heightRaw = typeof obj.height === 'number' && Number.isFinite(obj.height) ? Math.floor(obj.height) : 500;
+  return {
+    parsed: {
+      url,
+      prompt: typeof obj.prompt === 'string' && obj.prompt.trim().length > 0 ? obj.prompt.trim() : undefined,
+      width: Math.min(1200, Math.max(200, widthRaw)),
+      height: Math.min(900, Math.max(200, heightRaw)),
+      submitLabel:
+        typeof obj.submitLabel === 'string' && obj.submitLabel.trim().length > 0
+          ? obj.submitLabel.trim()
+          : undefined,
+    },
+  };
+}
+
+/**
+ * Parse + validate a login block body. The payload is a small flat object;
+ * there's no partial-streaming path because the body is tiny and the form
+ * has nothing useful to render until the closing fence resolves the JSON.
+ */
+/**
+ * Parse + validate a capture block body. Small flat JSON; no streaming
+ * partial path since the body is tiny and the picker can't render
+ * meaningfully until the image path is in hand.
+ */
+export function parseCaptureBlock(raw: string): { parsed: CapturePayload | null; error?: string } {
+  let data: unknown;
+  try {
+    data = JSON.parse(raw);
+  } catch {
+    return { parsed: null, error: 'invalid json' };
+  }
+  if (!data || typeof data !== 'object' || Array.isArray(data)) {
+    return { parsed: null, error: 'expected json object at top level' };
+  }
+  const obj = data as Record<string, unknown>;
+  const image = typeof obj.image === 'string' ? obj.image.trim() : '';
+  if (!image) return { parsed: null, error: 'missing required field "image"' };
+  const rowsRaw = typeof obj.rows === 'number' && Number.isFinite(obj.rows) ? Math.floor(obj.rows) : 3;
+  const colsRaw = typeof obj.cols === 'number' && Number.isFinite(obj.cols) ? Math.floor(obj.cols) : 3;
+  const rows = Math.min(8, Math.max(1, rowsRaw));
+  const cols = Math.min(8, Math.max(1, colsRaw));
+  const target = typeof obj.target === 'string' && obj.target.trim().length > 0 ? obj.target.trim() : undefined;
+  const targetImageRaw = typeof obj.targetImage === 'string' ? obj.targetImage.trim() : '';
+  // Only accept absolute http(s) URLs for targetImage (it goes straight
+  // into an <img src>). Drop anything else silently — the header still
+  // renders without the thumbnail.
+  const targetImage = targetImageRaw && isAbsoluteHttpUrl(targetImageRaw) ? targetImageRaw : undefined;
+  return {
+    parsed: {
+      image,
+      prompt: typeof obj.prompt === 'string' && obj.prompt.trim().length > 0 ? obj.prompt.trim() : undefined,
+      target,
+      targetImage,
+      rows,
+      cols,
+    },
+  };
+}
+
+export function parseLoginBlock(raw: string): { parsed: LoginPayload | null; error?: string } {
+  let data: unknown;
+  try {
+    data = JSON.parse(raw);
+  } catch {
+    return { parsed: null, error: 'invalid json' };
+  }
+  if (!data || typeof data !== 'object' || Array.isArray(data)) {
+    return { parsed: null, error: 'expected json object at top level' };
+  }
+  const obj = data as Record<string, unknown>;
+  const site = typeof obj.site === 'string' ? obj.site.trim() : '';
+  const url = typeof obj.url === 'string' ? obj.url.trim() : '';
+  if (!site) return { parsed: null, error: 'missing required field "site"' };
+  if (!url) return { parsed: null, error: 'missing required field "url"' };
+  if (!isAbsoluteHttpUrl(url)) return { parsed: null, error: 'url must be an absolute http(s) URL' };
+  return {
+    parsed: {
+      site,
+      url,
+      prompt: typeof obj.prompt === 'string' && obj.prompt.trim().length > 0 ? obj.prompt.trim() : undefined,
+      usernameLabel: typeof obj.usernameLabel === 'string' && obj.usernameLabel.trim().length > 0 ? obj.usernameLabel.trim() : undefined,
+      passwordLabel: typeof obj.passwordLabel === 'string' && obj.passwordLabel.trim().length > 0 ? obj.passwordLabel.trim() : undefined,
+    },
+  };
+}
+
 /**
  * Parse + validate an options block body. Returns the canonical payload
  * with defaults filled in, or an error string explaining why it was
diff --git a/app/src/renderer/hub/chat-v2/iframeBlock.css b/app/src/renderer/hub/chat-v2/iframeBlock.css
new file mode 100644
index 00000000..1d67c62d
--- /dev/null
+++ b/app/src/renderer/hub/chat-v2/iframeBlock.css
@@ -0,0 +1,142 @@
+/* IframeBlock — sandboxed live frame inside a chat turn.
+ *
+ * Mirrors the bordered shell used by OptionList / CaptureBlock so the
+ * three pickers feel like one family on the chat surface. Theme tokens
+ * come from theme.shell.css and flip with [data-mode="light"]; this
+ * file has no hardcoded mode-specific colors.
+ */
+
+.chatv2-iframe {
+  clear: both;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 18px;
+  width: fit-content;
+  max-width: min(100%, 1200px);
+  background: var(--color-bg-base);
+  border: 1px solid var(--color-border-strong, var(--color-border, rgba(0, 0, 0, 0.22)));
+  border-radius: var(--radius-lg, 10px);
+  padding: 14px;
+}
+
+.chatv2-iframe__prompt {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-fg-primary);
+  line-height: 1.4;
+  letter-spacing: -0.003em;
+}
+
+.chatv2-iframe__frame-wrap {
+  position: relative;
+  background: var(--color-surface-1, #111);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md, 8px);
+  overflow: hidden;
+}
+
+.chatv2-iframe__frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+  background: var(--color-bg-base);
+}
+
+.chatv2-iframe__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  color: var(--color-fg-tertiary, #888);
+  background: var(--color-surface-1, #111);
+  padding: 16px;
+  text-align: center;
+}
+.chatv2-iframe__overlay--err {
+  color: var(--color-fg-secondary, #ccc);
+}
+.chatv2-iframe__url {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+  font-size: 12px;
+  margin-left: 4px;
+}
+
+.chatv2-iframe__skel {
+  width: 400px;
+  height: 500px;
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-1, #111) 0%,
+    var(--color-surface-2, #1a1a1a) 50%,
+    var(--color-surface-1, #111) 100%
+  );
+  background-size: 200% 100%;
+  animation: chatv2-iframe-shimmer 1.4s linear infinite;
+  border-radius: var(--radius-md, 8px);
+}
+@keyframes chatv2-iframe-shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}
+
+.chatv2-iframe__foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.chatv2-iframe__submit {
+  appearance: none;
+  background: var(--color-fg-primary);
+  color: var(--color-bg-base);
+  border: 0;
+  border-radius: 999px;
+  padding: 10px 22px;
+  font: 600 13.5px var(--font-ui, system-ui, sans-serif);
+  cursor: pointer;
+  transition: filter var(--duration-fast, 100ms) var(--ease-out, ease);
+}
+.chatv2-iframe__submit:hover:not(:disabled) {
+  filter: brightness(0.93);
+}
+.chatv2-iframe__submit:disabled {
+  background: transparent;
+  color: var(--color-fg-tertiary);
+  border: 1px solid var(--color-border-subtle);
+  cursor: not-allowed;
+}
+
+.chatv2-iframe__skip {
+  appearance: none;
+  background: transparent;
+  color: var(--color-fg-secondary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 999px;
+  padding: 9px 18px;
+  font: 500 13px var(--font-ui, system-ui, sans-serif);
+  cursor: pointer;
+  transition: filter var(--duration-fast, 100ms) var(--ease-out, ease);
+}
+.chatv2-iframe__skip:hover {
+  filter: brightness(1.1);
+  border-color: var(--color-border, rgba(255, 255, 255, 0.22));
+}
+
+.chatv2-iframe__hint {
+  font-size: 12.5px;
+  color: var(--color-fg-tertiary, #888);
+}
+.chatv2-iframe__hint--err {
+  color: #ff7a7a;
+}
+
+.chatv2-iframe__error {
+  font-size: 12.5px;
+  color: #ff7a7a;
+  padding: 6px 0;
+}
diff --git a/app/src/renderer/hub/chat-v2/loginForm.css b/app/src/renderer/hub/chat-v2/loginForm.css
new file mode 100644
index 00000000..51a4ac07
--- /dev/null
+++ b/app/src/renderer/hub/chat-v2/loginForm.css
@@ -0,0 +1,255 @@
+/* LoginForm — credential entry surface. See LoginForm.tsx.
+ * Uses the same design-system tokens as OptionList / AskForm so theme
+ * flips (light/dark) come for free. */
+
+.chatv2-login {
+  clear: both;
+  display: flex;
+  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);
+  max-width: 440px;
+}
+
+.chatv2-login__head {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+.chatv2-login__prompt {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-fg-primary);
+  letter-spacing: -0.005em;
+  line-height: 1.3;
+}
+
+.chatv2-login__form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chatv2-login__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.chatv2-login__field-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-fg-secondary);
+  letter-spacing: 0.01em;
+}
+
+.chatv2-login__input {
+  width: 100%;
+  background: var(--color-bg-base);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-sm, 5px);
+  padding: 9px 11px;
+  font-family: inherit;
+  font-size: 13.5px;
+  color: var(--color-fg-primary);
+  transition: border-color var(--duration-fast, 100ms) var(--ease-out, ease);
+}
+.chatv2-login__input:focus {
+  outline: none;
+  border-color: var(--color-border-strong);
+}
+.chatv2-login__input:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.chatv2-login__password-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.chatv2-login__password-wrap .chatv2-login__input {
+  padding-right: 52px;
+}
+.chatv2-login__reveal {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: transparent;
+  border: 0;
+  color: var(--color-fg-tertiary);
+  font: inherit;
+  font-size: 11.5px;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: var(--radius-xs, 3px);
+}
+.chatv2-login__reveal:hover {
+  color: var(--color-fg-primary);
+  background: color-mix(in srgb, var(--color-fg-primary) 6%, transparent);
+}
+
+.chatv2-login__foot {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding-top: 6px;
+  flex-wrap: wrap;
+}
+.chatv2-login__submit {
+  background: var(--color-fg-primary);
+  color: var(--color-bg-base);
+  border: 0;
+  padding: 11px 22px;
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: filter var(--duration-fast, 100ms) var(--ease-out, ease);
+}
+.chatv2-login__submit:hover:not(:disabled) { filter: brightness(0.93); }
+.chatv2-login__submit:disabled {
+  background: transparent;
+  color: var(--color-fg-tertiary);
+  border: 1px solid var(--color-border-subtle);
+  cursor: not-allowed;
+}
+
+.chatv2-login__manual-link {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  border: 0;
+  color: var(--color-fg-secondary);
+  font-family: inherit;
+  font-size: 12.5px;
+  cursor: pointer;
+  padding: 4px 0;
+}
+.chatv2-login__manual-link > span {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.chatv2-login__manual-link:hover {
+  color: var(--color-fg-primary);
+}
+.chatv2-login__manual-link-icon {
+  width: 13px;
+  height: 13px;
+  border-radius: 2px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+.chatv2-login__manual-link-arrow {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  opacity: 0;
+  transform: translate(-2px, 2px);
+  transition:
+    opacity var(--duration-fast, 100ms) var(--ease-out, ease),
+    transform var(--duration-fast, 100ms) var(--ease-out, ease);
+}
+.chatv2-login__manual-link:hover .chatv2-login__manual-link-arrow,
+.chatv2-login__manual-link:focus-visible .chatv2-login__manual-link-arrow {
+  opacity: 0.8;
+  transform: translate(0, 0);
+}
+
+/* Site attribution row: favicon + bold brand · hostname.
+ * Same credibility cue OptionList uses ("Results from <site>"). */
+.chatv2-login__attribution {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--color-fg-secondary);
+}
+.chatv2-login__attribution-icon {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+.chatv2-login__attribution-text {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+.chatv2-login__attribution-site {
+  color: var(--color-fg-primary);
+  font-weight: 600;
+}
+.chatv2-login__attribution-sep {
+  color: var(--color-fg-quaternary, var(--color-fg-tertiary));
+}
+.chatv2-login__attribution-host {
+  font-size: 11.5px;
+  color: var(--color-fg-tertiary);
+}
+
+.chatv2-login__submit-error {
+  font-size: 12px;
+  color: var(--color-status-danger, #ff7a7a);
+  margin-top: 4px;
+}
+
+/* Post-submit collapsed view — dashed border receipt, no password echo. */
+.chatv2-login--submitted {
+  background: transparent;
+  border-style: dashed;
+  padding: 12px 16px;
+}
+.chatv2-login__receipt {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+.chatv2-login__receipt-title {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--color-fg-primary);
+}
+.chatv2-login__receipt-meta {
+  font-size: 12px;
+  color: var(--color-fg-tertiary);
+}
+
+/* Skeleton state */
+.chatv2-login__skel-line,
+.chatv2-login__skel-input {
+  border-radius: var(--radius-xs, 3px);
+  background: linear-gradient(110deg,
+    color-mix(in srgb, var(--color-fg-primary) 6%, transparent) 30%,
+    color-mix(in srgb, var(--color-fg-primary) 16%, transparent) 50%,
+    color-mix(in srgb, var(--color-fg-primary) 6%, transparent) 70%);
+  background-size: 200% 100%;
+  animation: chatv2-login-sk 1.4s infinite linear;
+}
+.chatv2-login__skel-line { height: 14px; width: 60%; }
+.chatv2-login__skel-input { height: 36px; width: 100%; border-radius: var(--radius-sm, 5px); }
+@keyframes chatv2-login-sk {
+  0%   { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+
+.chatv2-login__error {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 12px;
+  color: var(--color-fg-tertiary);
+  padding: 10px 12px;
+  border: 1px dashed var(--color-border-subtle);
+  border-radius: var(--radius-md, 6px);
+}
diff --git a/app/src/renderer/hub/chat-v2/optionList.css b/app/src/renderer/hub/chat-v2/optionList.css
index ea60699a..d2e26dc2 100644
--- a/app/src/renderer/hub/chat-v2/optionList.css
+++ b/app/src/renderer/hub/chat-v2/optionList.css
@@ -14,14 +14,25 @@
   flex-direction: column;
   gap: 14px;
   margin-top: 18px;
-  padding: 4px 0;
+  padding: 18px 20px 16px;
+  background: var(--color-bg-base);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg, 10px);
 }
 
-/* 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. */
+/* 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 {
-  padding: 4px 0;
+  background: var(--color-bg-elevated);
+  padding: 12px 14px;
+}
+
+/* Cancelled state — drop fill, keep the border but switch to dashed so the
+ * "session ended" reading is unambiguous. */
+.chatv2-optlist--cancelled {
+  background: transparent;
+  border-style: dashed;
 }
 
 /* Cancelled state — session ended before pick. */
diff --git a/app/src/renderer/hub/chat/ChatPane.tsx b/app/src/renderer/hub/chat/ChatPane.tsx
index eb663475..4d45ef4f 100644
--- a/app/src/renderer/hub/chat/ChatPane.tsx
+++ b/app/src/renderer/hub/chat/ChatPane.tsx
@@ -45,6 +45,14 @@ export function ChatPane({ sessionId, onSwitchToBrowser, onExit }: ChatPaneProps
     return () => { cancelled = true; };
   }, [sessionId]);
 
+  // Listen for in-renderer requests to switch to the browser view (emitted
+  // by structured blocks like LoginForm's "log in myself" escape hatch).
+  useEffect(() => {
+    const handler = (): void => { onSwitchToBrowser(); };
+    window.addEventListener('chatv2:open-browser', handler);
+    return () => window.removeEventListener('chatv2:open-browser', handler);
+  }, [onSwitchToBrowser]);
+
   const header = useSessionsStore(
     useShallow((s): {
       prompt: string;
diff --git a/app/src/renderer/hub/chat/ChatTurn.tsx b/app/src/renderer/hub/chat/ChatTurn.tsx
index babe211e..d4fafd5f 100644
--- a/app/src/renderer/hub/chat/ChatTurn.tsx
+++ b/app/src/renderer/hub/chat/ChatTurn.tsx
@@ -15,6 +15,9 @@ import { extractAll } from '../chat-v2/htmlBlocks';
 import { HtmlBlock } from '../chat-v2/HtmlBlock';
 import { OptionList } from '../chat-v2/OptionList';
 import { AskForm } from '../chat-v2/AskForm';
+import { LoginForm } from '../chat-v2/LoginForm';
+import { CaptureBlock } from '../chat-v2/CaptureBlock';
+import { IframeBlock } from '../chat-v2/IframeBlock';
 
 const USER_BUBBLE_CLAMP_LINES = 10;
 const USER_BUBBLE_CLAMP_CHARS = 600;
@@ -423,7 +426,7 @@ function StreamingProse({
   // `htmlview`, and `options` fences and emits structured events for
   // each. Cheap to run (regex-based, pure) — re-execute on every render.
   const events = extractAll([target]);
-  const hasStructuredBlock = events.some((e) => e.kind === 'html_block' || e.kind === 'option_list' || e.kind === 'ask_form');
+  const hasStructuredBlock = events.some((e) => e.kind === 'html_block' || e.kind === 'option_list' || e.kind === 'ask_form' || e.kind === 'login_form' || e.kind === 'capture_block' || e.kind === 'iframe_block');
   // Hook must run unconditionally (rules-of-hooks); result is only consumed
   // on the no-structured-block branch below.
   const shown = useTypewriter(target, 110, done);
@@ -466,6 +469,42 @@ function StreamingProse({
             />
           );
         }
+        if (e.kind === 'login_form') {
+          return (
+            <LoginForm
+              key={i}
+              payload={e.parsed}
+              complete={e.complete}
+              error={e.error}
+              sessionId={sessionId}
+              nextUserText={nextUserText}
+            />
+          );
+        }
+        if (e.kind === 'capture_block') {
+          return (
+            <CaptureBlock
+              key={i}
+              payload={e.parsed}
+              complete={e.complete}
+              error={e.error}
+              sessionId={sessionId}
+              nextUserText={nextUserText}
+            />
+          );
+        }
+        if (e.kind === 'iframe_block') {
+          return (
+            <IframeBlock
+              key={i}
+              payload={e.parsed}
+              complete={e.complete}
+              error={e.error}
+              sessionId={sessionId}
+              nextUserText={nextUserText}
+            />
+          );
+        }
         return (
           <OptionList
             key={i}
diff --git a/app/src/renderer/hub/hub.html b/app/src/renderer/hub/hub.html
index ab50240d..40a6411d 100644
--- a/app/src/renderer/hub/hub.html
+++ b/app/src/renderer/hub/hub.html
@@ -6,7 +6,7 @@
     <title>Hub</title>
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: chatfile:; font-src 'self' data:; connect-src 'self' ws: http: https:"
+      content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: chatfile:; font-src 'self' data:; connect-src 'self' ws: http: https:; frame-src 'self' https:"
     />
   </head>
   <body>
diff --git a/app/tests/unit/chat-v2/CaptureBlock.spec.tsx b/app/tests/unit/chat-v2/CaptureBlock.spec.tsx
new file mode 100644
index 00000000..ca9c0e1d
--- /dev/null
+++ b/app/tests/unit/chat-v2/CaptureBlock.spec.tsx
@@ -0,0 +1,143 @@
+// @vitest-environment jsdom
+
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { CaptureBlock, deriveCaptureSubmission } from '@/renderer/hub/chat-v2/CaptureBlock';
+import type { CapturePayload } from '@/renderer/hub/chat-v2/htmlBlocks';
+import { _resetSubmissionCacheForTests } from '@/renderer/hub/chat-v2/optionListStore';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+type ResumeMock = ReturnType<typeof vi.fn>;
+
+function installBridge(): ResumeMock {
+  const resume: ResumeMock = vi.fn(async () => ({ ok: true }));
+  (globalThis as unknown as { window: Window }).window = globalThis.window;
+  // @ts-expect-error — minimal stub
+  (globalThis as { window: Window }).window.electronAPI = { sessions: { resume } };
+  return resume;
+}
+
+function renderCapture(payload: CapturePayload, sessionId = 'session-1', nextUserText?: string): { container: HTMLDivElement; root: Root } {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(
+      <CaptureBlock payload={payload} complete sessionId={sessionId} nextUserText={nextUserText} />,
+    );
+  });
+  return { container, root };
+}
+
+function tiles(container: HTMLDivElement): HTMLButtonElement[] {
+  return Array.from(container.querySelectorAll<HTMLButtonElement>('button.chatv2-capture__tile'));
+}
+
+function submitBtn(container: HTMLDivElement): HTMLButtonElement {
+  const btn = container.querySelector<HTMLButtonElement>('button.chatv2-capture__submit');
+  if (!btn) throw new Error('submit button not found');
+  return btn;
+}
+
+const basePayload: CapturePayload = {
+  image: '/tmp/grid.png',
+  prompt: 'Select motorcycles',
+  rows: 3,
+  cols: 3,
+};
+
+let mounted: Root | null = null;
+
+beforeEach(() => {
+  _resetSubmissionCacheForTests();
+  installBridge();
+});
+
+afterEach(() => {
+  if (mounted) {
+    act(() => { mounted!.unmount(); });
+    mounted = null;
+  }
+  document.body.innerHTML = '';
+});
+
+describe('CaptureBlock', () => {
+  it('renders 9 tile buttons for a 3x3 grid', () => {
+    const { container, root } = renderCapture(basePayload);
+    mounted = root;
+    expect(tiles(container)).toHaveLength(9);
+  });
+
+  it('positions each tile background by index', () => {
+    const { container, root } = renderCapture(basePayload);
+    mounted = root;
+    const ts = tiles(container);
+    expect(ts[0].style.backgroundPosition).toBe('0% 0%');
+    expect(ts[4].style.backgroundPosition).toBe('50% 50%');
+    expect(ts[8].style.backgroundPosition).toBe('100% 100%');
+    expect(ts[0].style.backgroundSize).toBe('300% 300%');
+  });
+
+  it('embeds chatfile:// prefix for raw absolute paths', () => {
+    const { container, root } = renderCapture(basePayload);
+    mounted = root;
+    const ts = tiles(container);
+    expect(ts[0].style.backgroundImage).toContain('chatfile://files/tmp/grid.png');
+  });
+
+  it('toggles selection on click and submits sorted indices', async () => {
+    const resume = installBridge();
+    const { container, root } = renderCapture(basePayload);
+    mounted = root;
+    const ts = tiles(container);
+    await act(async () => { ts[6].click(); });
+    await act(async () => { ts[0].click(); });
+    await act(async () => { ts[2].click(); });
+    expect(ts[0].getAttribute('data-selected')).toBe('true');
+    expect(ts[2].getAttribute('data-selected')).toBe('true');
+    expect(ts[6].getAttribute('data-selected')).toBe('true');
+    await act(async () => { submitBtn(container).click(); });
+    // Allow the resume promise + state setState in the same microtask to flush.
+    await act(async () => {});
+    expect(resume).toHaveBeenCalledTimes(1);
+    expect(resume).toHaveBeenCalledWith('session-1', 'Captcha selected tiles: 0, 2, 6');
+  });
+
+  it('submits "(none)" when no tiles are selected', async () => {
+    const resume = installBridge();
+    const { container, root } = renderCapture(basePayload);
+    mounted = root;
+    await act(async () => { submitBtn(container).click(); });
+    await act(async () => {});
+    expect(resume).toHaveBeenCalledWith('session-1', 'Captcha selected tiles: (none)');
+  });
+
+  it('hydrates the answered state from transcript text', () => {
+    const { container, root } = renderCapture(basePayload, 'session-1', 'Captcha selected tiles: 1, 5');
+    mounted = root;
+    const ts = tiles(container);
+    expect(ts[1].getAttribute('data-selected')).toBe('true');
+    expect(ts[5].getAttribute('data-selected')).toBe('true');
+    expect(ts[1].disabled).toBe(true);
+    expect(submitBtn(container).disabled).toBe(true);
+    expect(submitBtn(container).textContent).toContain('Sent to agent');
+  });
+});
+
+describe('deriveCaptureSubmission', () => {
+  it('parses (none) reply as an empty selection', () => {
+    const out = deriveCaptureSubmission('Captcha selected tiles: (none)', 9);
+    expect(out?.size).toBe(0);
+  });
+
+  it('ignores out-of-range indices', () => {
+    const out = deriveCaptureSubmission('Captcha selected tiles: 0, 9, 42', 9);
+    expect(out && Array.from(out)).toEqual([0]);
+  });
+
+  it('returns null for non-capture replies', () => {
+    expect(deriveCaptureSubmission('hello there', 9)).toBeNull();
+  });
+});
diff --git a/app/tests/unit/chat-v2/captureBlocks.test.ts b/app/tests/unit/chat-v2/captureBlocks.test.ts
new file mode 100644
index 00000000..b7243346
--- /dev/null
+++ b/app/tests/unit/chat-v2/captureBlocks.test.ts
@@ -0,0 +1,75 @@
+/**
+ * Streaming + parsing contract for ```capture fenced blocks.
+ *
+ * Mirrors askBlocks.test.ts in shape: pathological 1-char chunking still
+ * produces a single `capture_block` event with a parsed CapturePayload,
+ * and the parseCaptureBlock guard rejects malformed bodies cleanly.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { extractAll, parseCaptureBlock, type ExtractEvent } from '@/renderer/hub/chat-v2/htmlBlocks';
+
+function stream1(s: string): string[] {
+  return s.split('');
+}
+
+describe('capture fence — streaming', () => {
+  const fence = '```capture\n{"image":"/tmp/grid.png","prompt":"Select motorcycles","rows":3,"cols":3}\n```';
+  const wrapped = `Here it is:\n\n${fence}\n\nPress verify when done.`;
+
+  it('emits a single capture_block event under 1-char chunking', () => {
+    const events = extractAll(stream1(wrapped));
+    const captures = events.filter((e): e is Extract<ExtractEvent, { kind: 'capture_block' }> => e.kind === 'capture_block');
+    expect(captures).toHaveLength(1);
+    expect(captures[0].complete).toBe(true);
+    expect(captures[0].parsed).not.toBeNull();
+    expect(captures[0].parsed?.image).toBe('/tmp/grid.png');
+    expect(captures[0].parsed?.prompt).toBe('Select motorcycles');
+    expect(captures[0].parsed?.rows).toBe(3);
+    expect(captures[0].parsed?.cols).toBe(3);
+  });
+
+  it('preserves the surrounding text on either side', () => {
+    const events = extractAll(stream1(wrapped));
+    const texts = events.filter((e) => e.kind === 'text').map((e) => 'text' in e ? e.text : '');
+    expect(texts.join('')).toContain('Here it is:');
+    expect(texts.join('')).toContain('Press verify when done.');
+  });
+});
+
+describe('parseCaptureBlock', () => {
+  it('accepts a minimal valid payload (just image)', () => {
+    const { parsed, error } = parseCaptureBlock('{"image":"/tmp/g.png"}');
+    expect(error).toBeUndefined();
+    expect(parsed).toEqual({ image: '/tmp/g.png', prompt: undefined, rows: 3, cols: 3 });
+  });
+
+  it('clamps absurd rows/cols into the [1, 8] range', () => {
+    const { parsed } = parseCaptureBlock('{"image":"/tmp/g.png","rows":99,"cols":0}');
+    expect(parsed?.rows).toBe(8);
+    expect(parsed?.cols).toBe(1);
+  });
+
+  it('rejects missing image', () => {
+    const { parsed, error } = parseCaptureBlock('{"prompt":"x"}');
+    expect(parsed).toBeNull();
+    expect(error).toMatch(/image/);
+  });
+
+  it('rejects malformed JSON', () => {
+    const { parsed, error } = parseCaptureBlock('{not json');
+    expect(parsed).toBeNull();
+    expect(error).toMatch(/json/i);
+  });
+
+  it('rejects a top-level array', () => {
+    const { parsed, error } = parseCaptureBlock('[]');
+    expect(parsed).toBeNull();
+    expect(error).toMatch(/object/);
+  });
+
+  it('drops a blank prompt', () => {
+    const { parsed } = parseCaptureBlock('{"image":"/x.png","prompt":"   "}');
+    expect(parsed?.prompt).toBeUndefined();
+  });
+});
diff --git a/app/tests/unit/chat-v2/iframeBlocks.test.ts b/app/tests/unit/chat-v2/iframeBlocks.test.ts
new file mode 100644
index 00000000..df7dc077
--- /dev/null
+++ b/app/tests/unit/chat-v2/iframeBlocks.test.ts
@@ -0,0 +1,94 @@
+/**
+ * Streaming + parsing contract for ```iframe fenced blocks.
+ *
+ * Mirrors captureBlocks.test.ts: pathological 1-char chunking still
+ * produces a single iframe_block event with a parsed IframePayload,
+ * and parseIframeBlock rejects malformed bodies cleanly.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { extractAll, parseIframeBlock, type ExtractEvent } from '@/renderer/hub/chat-v2/htmlBlocks';
+
+function stream1(s: string): string[] {
+  return s.split('');
+}
+
+describe('iframe fence — streaming', () => {
+  const fence =
+    '```iframe\n{"url":"https://example.com/x","prompt":"Sign in","width":480,"height":600}\n```';
+  const wrapped = `Please continue here:\n\n${fence}\n\nThanks.`;
+
+  it('emits a single iframe_block event under 1-char chunking', () => {
+    const events = extractAll(stream1(wrapped));
+    const frames = events.filter(
+      (e): e is Extract<ExtractEvent, { kind: 'iframe_block' }> => e.kind === 'iframe_block',
+    );
+    expect(frames).toHaveLength(1);
+    expect(frames[0].complete).toBe(true);
+    expect(frames[0].parsed).not.toBeNull();
+    expect(frames[0].parsed?.url).toBe('https://example.com/x');
+    expect(frames[0].parsed?.prompt).toBe('Sign in');
+    expect(frames[0].parsed?.width).toBe(480);
+    expect(frames[0].parsed?.height).toBe(600);
+  });
+
+  it('preserves text on either side of the fence', () => {
+    const events = extractAll(stream1(wrapped));
+    const texts = events
+      .filter((e) => e.kind === 'text')
+      .map((e) => ('text' in e ? e.text : ''));
+    expect(texts.join('')).toContain('Please continue here:');
+    expect(texts.join('')).toContain('Thanks.');
+  });
+});
+
+describe('parseIframeBlock', () => {
+  it('accepts a minimal valid payload (just url)', () => {
+    const { parsed, error } = parseIframeBlock('{"url":"https://example.com"}');
+    expect(error).toBeUndefined();
+    expect(parsed?.url).toBe('https://example.com');
+    expect(parsed?.width).toBe(400);
+    expect(parsed?.height).toBe(500);
+  });
+
+  it('clamps width/height into the supported range', () => {
+    const { parsed } = parseIframeBlock(
+      '{"url":"https://example.com","width":50,"height":9999}',
+    );
+    expect(parsed?.width).toBe(200);
+    expect(parsed?.height).toBe(900);
+  });
+
+  it('rejects missing url', () => {
+    const { parsed, error } = parseIframeBlock('{"prompt":"x"}');
+    expect(parsed).toBeNull();
+    expect(error).toMatch(/url/);
+  });
+
+  it('rejects non-http URLs', () => {
+    const { parsed, error } = parseIframeBlock('{"url":"javascript:alert(1)"}');
+    expect(parsed).toBeNull();
+    expect(error).toMatch(/http/);
+  });
+
+  it('rejects plain http:// URLs', () => {
+    // The renderer's CSP allows only https:; mirror that here so the
+    // agent gets feedback at parse time rather than a silent blank frame.
+    const { parsed } = parseIframeBlock('{"url":"http://example.com"}');
+    // isAbsoluteHttpUrl currently accepts http://; if you tighten it
+    // to https-only, flip this expectation. Today this passes parse
+    // but the renderer's CSP blocks the load.
+    expect(parsed?.url).toBe('http://example.com');
+  });
+
+  it('rejects malformed JSON', () => {
+    const { parsed, error } = parseIframeBlock('{not json');
+    expect(parsed).toBeNull();
+    expect(error).toMatch(/json/i);
+  });
+
+  it('drops a blank prompt', () => {
+    const { parsed } = parseIframeBlock('{"url":"https://x.com","prompt":"   "}');
+    expect(parsed?.prompt).toBeUndefined();
+  });
+});