codehere 0.6.1 → 0.7.0

package/dist/infrastructure/protocols/ui-page-v2.js

@@ -1,3 +1,4 @@
+import { PHASE_CLASSIFIER_SRC } from './thread-phase.js';
 const SHARED_STYLES = `
   :root {
     --bg: hsl(0 0% 3.9%); --bg-1: hsl(0 0% 6%); --bg-2: hsl(0 0% 9%);
@@ -7,6 +8,13 @@ const SHARED_STYLES = `
     --border: rgba(255,255,255,0.10); --border-soft: rgba(255,255,255,0.06);
     --accent: #ff9a76; --accent-wash: rgba(255,154,118,0.10);
     --allow: #28c840; --block: #ff5f57; --warn: #febc2e;
+    --info: #76b7ff;
+    /* Per-agent identity colors — AGENTIC_UX_FRAMEWORK primitive #1 */
+    --agent-claude: #d97757;
+    --agent-codex: #10a37f;
+    --agent-aider: #4a90e2;
+    --agent-gemini: #fbbc05;
+    --agent-opencode: #06b6d4;
     --radius: 8px;
     --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
     --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
@@ -16,19 +24,833 @@ const SHARED_STYLES = `
     margin: 0; background: var(--bg); color: var(--fg);
     font-family: var(--sans); font-size: 13px; line-height: 1.55;
     -webkit-font-smoothing: antialiased; height: 100vh; overflow: hidden;
+    position: relative;
   }
-  .app { height: 100vh; display: flex; flex-direction: column; }
+  /* Ambient dot-grid backdrop · matches demo v12 + landing globals.css.
+   * Very faint blue dots on 24px grid · adds depth without distraction so
+   * the cards above visibly "lift" off a textured surface. Fixed position
+   * so it stays put while content scrolls. */
+  body::before {
+    content: ''; position: fixed; inset: 0;
+    background-image: radial-gradient(circle, rgba(74,144,226,0.045) 1px, transparent 1px);
+    background-size: 24px 24px;
+    pointer-events: none; z-index: 0; opacity: 0.7;
+  }
+  .app { height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }
 
+  /* Header · glass · matches demo v12 + landing globals · darker tint
+   * with backdrop blur + saturate so the header sits visibly above the
+   * scroll content beneath it. */
   .header {
-    display: flex; align-items: center; gap: 16px;
+    display: flex; align-items: center; gap: 14px;
     padding: 10px 20px; border-bottom: 1px solid var(--border-soft);
-    background: rgba(0,0,0,0.3); flex-shrink: 0;
+    background: rgba(0,0,0,0.55);
+    backdrop-filter: blur(16px) saturate(140%);
+    -webkit-backdrop-filter: blur(16px) saturate(140%);
+    flex-shrink: 0;
+  }
+  /* Brand wordmark · matches landing + demo v12 spec · gradient name + pulsing
+   * brand-color dot. First thing every user sees on every screen. */
+  .logo { font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; letter-spacing: -0.01em; }
+  .logo .name {
+    background: linear-gradient(135deg, #ff9a76 0%, #4a90e2 100%);
+    -webkit-background-clip: text; background-clip: text;
+    -webkit-text-fill-color: transparent; color: transparent;
+    letter-spacing: -0.01em;
+  }
+  .logo .dot {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: var(--accent); animation: pulse 1.6s ease infinite;
+    box-shadow: 0 0 0 3px rgba(255,154,118,0.18);
+    flex-shrink: 0;
+  }
+
+  /* A-04 · local-first status pill · pinned next to the logo so the privacy
+   * promise is the SECOND thing every user sees · zero telemetry, all data
+   * on this machine. The pulsing dot says "still alive" without occupying
+   * focus. */
+  .local-pill {
+    display: inline-flex; align-items: center; gap: 6px;
+    font-family: var(--mono); font-size: 10px; color: var(--fg-50);
+    padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px;
+    background: rgba(40,200,64,0.04);
+  }
+  .local-pill .dot {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: var(--allow); animation: pulse 2.4s ease infinite;
+  }
+  .local-pill:hover { color: var(--fg-70); border-color: var(--fg-30); }
+
+  /* Beta badge · honest product-stage signal pinned to the wordmark. codehere
+   * is pre-1.0 and heading to invite-only validation; the badge sets that
+   * expectation up front rather than implying a finished GA product. Brand
+   * tint (the only colored chip besides the green local-pill) so it reads as
+   * intentional, not a warning. */
+  .beta-badge {
+    font-family: var(--mono); font-size: 9px; font-weight: 700;
+    letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
+    color: var(--accent, #ff9a76); padding: 3px 7px; border-radius: 999px;
+    border: 1px solid rgba(255, 154, 118, 0.45);
+    background: rgba(255, 154, 118, 0.12);
+    align-self: center; cursor: default;
+  }
+
+  /* Header budget chip · matches demo v12 spec · bordered chip with padding
+   * so the cost signal looks like a deliberate object, not a stray number. */
+  .budget {
+    margin-left: auto; font-family: var(--mono); font-size: 11px;
+    color: var(--fg-70); padding: 3px 9px;
+    border: 1px solid var(--border); border-radius: 4px;
+    letter-spacing: 0.02em;
+  }
+  .budget.safe { color: var(--fg-70); border-color: var(--border); }
+  .budget.warn { color: var(--warn); border-color: rgba(254,188,46,0.4); background: rgba(254,188,46,0.04); }
+  .budget.block { color: var(--block); border-color: rgba(255,95,87,0.4); background: rgba(255,95,87,0.05); font-weight: 600; }
+
+  /* D-01 · file tree with trust grades · in the task detail · render each
+   * file as a chip with +N/-M diff counts and a trust grade pill. */
+  .file-chip {
+    display: inline-flex; align-items: center; gap: 8px;
+    padding: 5px 10px; margin: 4px 6px 4px 0;
+    border: 1px solid var(--border-soft); border-radius: 6px;
+    background: rgba(255,255,255,0.02);
+    font-family: var(--mono); font-size: 11px;
+  }
+  .file-chip .path { color: var(--fg-90); }
+  .file-chip .added { color: var(--allow); font-size: 10px; }
+  .file-chip .removed { color: var(--block); font-size: 10px; }
+  .file-chip .trust { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
+  .file-chip .trust.A { color: var(--allow); background: rgba(40,200,64,0.10); }
+  .file-chip .trust.B { color: #8be88b; background: rgba(40,200,64,0.06); }
+  .file-chip .trust.C { color: var(--warn); background: rgba(254,188,46,0.10); }
+  .file-chip .trust.F { color: var(--block); background: rgba(255,95,87,0.10); }
+  /* File tree · dir-grouped with connectors + per-row trust (demo 2.5) */
+  .file-tree { font-family: var(--mono); font-size: 11px; margin-bottom: 8px; }
+  .ft-dir { color: var(--fg-50); font-size: 10.5px; margin: 6px 0 2px; }
+  .ft-row { display: flex; align-items: center; gap: 6px; padding: 2px 0 2px 8px; }
+  .ft-branch { color: var(--fg-30); }
+  .ft-name { color: var(--fg-80); }
+  .ft-row .added { color: var(--allow); font-size: 10px; }
+  .ft-row .removed { color: var(--block); font-size: 10px; }
+  .ft-row .trust { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 600; margin-left: auto; }
+  .ft-row .trust.A { color: var(--allow); background: rgba(40,200,64,0.10); }
+  .ft-row .trust.B { color: #8be88b; background: rgba(40,200,64,0.06); }
+  .ft-row .trust.C { color: var(--warn); background: rgba(254,188,46,0.10); }
+  .ft-row .trust.F { color: var(--block); background: rgba(255,95,87,0.10); }
+
+  /* Inline code-card · matches demo v12 (lines 441-454) · renders when an
+   * artifact file carries a .snippet. Dark VS-Code-ish surface with mono
+   * font, line numbers, lightweight syntax tinting via .kw/.fn/.str/.num/.cm.
+   * Lives directly under the file-chip strip so the reviewer can SEE what
+   * the agent wrote, not just "+118 lines". */
+  .code-card {
+    background: hsl(0 0% 12%); border: 1px solid var(--border);
+    border-radius: 6px; overflow: hidden; margin: 6px 0 10px;
+  }
+  .code-card .head {
+    padding: 7px 12px; background: rgba(255,255,255,0.03);
+    border-bottom: 1px solid var(--border-soft);
+    display: flex; align-items: center; gap: 8px;
+    font-family: var(--mono); font-size: 10.5px; color: var(--fg-50);
+  }
+  .code-card .head .lang { color: var(--fg-30); }
+  .code-card .head .path { color: var(--fg-70); }
+  .code-card .head .meta { margin-left: auto; color: var(--fg-30); font-size: 10px; }
+  .code-card pre {
+    margin: 0; padding: 11px 14px;
+    font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
+    color: var(--fg-70); overflow-x: auto; white-space: pre;
+  }
+  .code-card .ln {
+    display: inline-block; width: 26px; text-align: right; margin-right: 12px;
+    color: var(--fg-20); user-select: none;
+  }
+  .code-card .kw { color: #c586c0; }
+  .code-card .fn { color: #dcdcaa; }
+  .code-card .str { color: #ce9178; }
+  .code-card .num { color: #b5cea8; }
+  .code-card .cm { color: #6a9955; font-style: italic; }
+  .code-card .tp { color: #4ec9b0; }
+
+  /* D-04 · test result chip · single line with pass/fail counts + duration */
+  .test-chip {
+    display: inline-flex; align-items: center; gap: 8px;
+    padding: 5px 10px; margin: 4px 0;
+    border: 1px solid var(--border-soft); border-radius: 6px;
+    font-family: var(--mono); font-size: 11px;
+    background: rgba(40,200,64,0.04);
+  }
+  .test-chip.has-failures { background: rgba(255,95,87,0.05); }
+  .test-chip .passed { color: var(--allow); }
+  .test-chip .failed { color: var(--block); }
+  .test-chip .dur { color: var(--fg-40); }
+
+  /* D-05 · diagnose+fix loop · groups consecutive test-failure → edit → re-test
+   * sequences visually so the reviewer can see "tried, failed, fixed, re-ran" */
+  .fix-loop {
+    border-left: 2px solid var(--warn); padding-left: 10px;
+    margin: 8px 0;
+  }
+  .fix-loop-label {
+    font-family: var(--mono); font-size: 9px; color: var(--warn);
+    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
+  }
+
+  /* C-01 · first-run indexing banner · shows once per first-task, then fades */
+  .indexing-banner {
+    display: none;
+    padding: 6px 14px; margin-bottom: 10px;
+    background: rgba(74,144,226,0.06); border: 1px solid rgba(74,144,226,0.18);
+    border-radius: 6px;
+    font-family: var(--mono); font-size: 11px; color: var(--info, #4a90e2);
+  }
+  .indexing-banner .what { color: var(--fg-70); font-weight: 600; margin-right: 6px; }
+
+  /* C-02 · tool-call card · matches demo v12 .tc + .tc-out (lines 312-318).
+   * Each tool call gets a darker card surface with a bolded tool name, dim
+   * target path, right-aligned duration · output block below uses brighter
+   * fg so the agent's report is readable rather than disappearing into the
+   * card body. */
+  .tc-card {
+    border: 1px solid var(--border); border-radius: 5px;
+    padding: 8px 11px; margin: 7px 0;
+    background: hsl(0 0% 9%);
+  }
+  .tc-card .head {
+    display: flex; align-items: baseline; gap: 7px;
+    font-family: var(--mono); font-size: 11px; flex-wrap: wrap;
+  }
+  .tc-card .tool { color: var(--fg); font-weight: 600; }
+  .tc-card .target { color: var(--fg-70); }
+  .tc-card .hook-badge {
+    font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 3px;
+    text-transform: uppercase; letter-spacing: 0.04em;
+  }
+  .tc-card .hook-badge.allow { color: var(--allow); background: rgba(40,200,64,0.10); }
+  .tc-card .hook-badge.clean { color: #8be88b; background: rgba(40,200,64,0.06); }
+  .tc-card .hook-badge.block { color: var(--block); background: rgba(255,95,87,0.10); }
+  .tc-card .hook-badge.override { color: var(--warn); background: rgba(254,188,46,0.10); }
+  .tc-card .dur {
+    color: var(--fg-30); margin-left: auto; font-family: var(--mono); font-size: 10px;
+  }
+  .tc-card .output {
+    margin: 5px 0 0; padding: 6px 9px;
+    font-family: var(--mono); font-size: 10.5px;
+    color: var(--fg-70); line-height: 1.55;
+    background: rgba(0,0,0,0.25); border-radius: 4px;
+    white-space: pre-wrap; max-height: 120px; overflow: auto;
+  }
+
+  /* E-03 · hook BLOCK affordance · override-with-reason · red-bordered card
+   * with 3 action buttons. */
+  .hook-block-card {
+    border: 1px solid rgba(255,95,87,0.35); border-radius: 8px;
+    padding: 12px 14px; margin: 10px 0;
+    background: rgba(255,95,87,0.04);
+  }
+  .hook-block-title { font-family: var(--mono); font-size: 10px; color: var(--block); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
+  .hook-block-msg { color: var(--fg-90); font-size: 13px; margin-bottom: 10px; }
+  .hook-block-actions { display: flex; gap: 8px; }
+  .hook-block-actions button {
+    font-family: var(--mono); font-size: 11px;
+    padding: 5px 12px; border-radius: 5px; cursor: pointer;
+    border: 1px solid var(--border); background: transparent; color: var(--fg-70);
+  }
+  .hook-block-actions button:hover { color: var(--fg); border-color: var(--fg-30); }
+
+  /* E-07 · push gate · same hook-block pattern but warn-tinted for git push */
+  .push-gate-card {
+    border: 1px solid rgba(254,188,46,0.35); border-radius: 8px;
+    padding: 12px 14px; margin: 10px 0;
+    background: rgba(254,188,46,0.04);
+  }
+  .push-gate-title { font-family: var(--mono); font-size: 10px; color: var(--warn); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
+
+  /* P3 · Recovery affordance · session-level failure with explanatory copy
+     + user options (retry · diagnose · mark resolved). Demo v12 U10 spec.
+     Distinct from hook-block (agent BLOCKED by safety) — recovery covers
+     agent CRASHED / errored without a deliberate block. */
+  .recovery-card {
+    border: 1px solid rgba(255,95,87,0.35); border-radius: 8px;
+    padding: 14px 16px; margin: 10px 0;
+    background: rgba(255,95,87,0.04);
+    border-left: 3px solid var(--block);
+  }
+  .recovery-title { font-family: var(--mono); font-size: 10px; color: var(--block); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
+  .recovery-title .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--block); }
+  .recovery-cause { color: var(--fg-90); font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
+  .recovery-cause b { color: var(--fg); font-weight: 600; }
+  .git-note .git-note-body { color: var(--fg-70); font-size: 12.5px; line-height: 1.55; }
+  .git-note .git-note-body code { font-family: var(--mono); font-size: 11.5px; background: var(--bg-2); padding: 1px 5px; border-radius: 3px; }
+  .recovery-resolve { color: var(--fg-70); font-size: 12.5px; line-height: 1.55; margin: 6px 0 10px; padding: 8px 11px; background: rgba(255,255,255,0.025); border-radius: 5px; border-left: 2px solid var(--fg-30); }
+  .recovery-resolve b { color: var(--fg); font-weight: 500; }
+  .recovery-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
+  .recovery-actions button {
+    font-family: var(--sans); font-size: 12px; padding: 7px 14px; border-radius: 5px; cursor: pointer;
+    border: 1px solid var(--border); background: transparent; color: var(--fg-70); transition: all 160ms ease;
+  }
+  .recovery-actions button:hover { color: var(--fg); border-color: var(--fg-30); }
+  .recovery-actions button.primary { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
+  .recovery-actions button.primary:hover { box-shadow: 0 0 0 3px rgba(255,154,118,0.20); }
+
+  /* G-U10 · crash recovery surface · shown when session was orphaned · "the
+   * daemon was killed mid-task · you can resume or discard" */
+  .crash-recovery {
+    border: 1px solid var(--border); border-radius: 8px;
+    padding: 10px 14px; margin: 10px 0;
+    background: rgba(255,255,255,0.02);
+  }
+  .crash-recovery-title { font-family: var(--mono); font-size: 10px; color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
+
+  /* v0.8 S3 · Reshape view · ported from demo v12 lines 73-132 + 2486-2534.
+   * Demo v12's W-W4 differentiator · user describes the view they want,
+   * agent "composes" it from shared primitives. Backed by body.shape-*
+   * classes + a custom-view banner. Three preset shapes (ship-only,
+   * velocity, security) plus a free-text input that naive-classifies to
+   * the closest preset. */
+  .reshape-btn {
+    background: linear-gradient(135deg, rgba(255,154,118,0.14), rgba(74,144,226,0.10));
+    border: 1px solid rgba(255,154,118,0.4); border-radius: 5px;
+    padding: 5px 12px; font-family: var(--mono); font-size: 10.5px;
+    color: var(--fg); cursor: pointer; letter-spacing: 0.04em;
+    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
+    display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
+  }
+  .reshape-btn:hover {
+    background: linear-gradient(135deg, rgba(255,154,118,0.22), rgba(74,144,226,0.16));
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(255,154,118,0.15);
+  }
+
+  /* v0.8 S4 · share-thread button + popover · per demo v12 W-W2 */
+  .share-btn-hdr {
+    background: transparent; border: 1px solid var(--border); border-radius: 5px;
+    padding: 5px 11px; font-family: var(--mono); font-size: 10.5px;
+    color: var(--fg-50); cursor: pointer; letter-spacing: 0.04em;
+    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
+    display: inline-flex; align-items: center; gap: 6px;
+  }
+  .share-btn-hdr:hover { color: var(--fg); border-color: var(--fg-30); background: rgba(255,255,255,0.03); }
+  .share-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 310; padding: 24px; }
+  .share-modal.open { display: flex; animation: rs-fade 240ms ease; }
+  .share-modal.open .share-card { animation: wp-card-in 380ms cubic-bezier(0.16, 1, 0.3, 1); }
+  /* Share card · gradient border via mask trick (same pattern as
+   * reshape-card · same brand alpha 0.45 demo uses for recomposing card
+   * lines 89-90). Consistency · both "agent acts on your behalf" modals
+   * read as the same family. */
+  .share-card { width: 100%; max-width: 540px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; position: relative; overflow: hidden; }
+  .share-card::before {
+    content: ''; position: absolute; inset: -1px;
+    border-radius: inherit; padding: 1px;
+    background: linear-gradient(135deg, rgba(255,154,118,0.45), rgba(74,144,226,0.45));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor; mask-composite: exclude;
+    pointer-events: none;
+  }
+  .share-card .head { display: flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 600; font-size: 13px; }
+  .share-card .head .tag { color: var(--fg-40); font-weight: 400; font-size: 11px; font-family: var(--mono); }
+  .share-card .blurb { color: var(--fg-70); font-size: 12.5px; margin: 10px 0; line-height: 1.55; }
+  /* Signed-payload link · brand-tinted so the value reads as "this is the
+   * codehere artifact you're about to share" · not a generic URL. The
+   * canonical brand var is --accent in product, --brand in demo — same
+   * #ff9a76. The original css here referenced --brand (undefined in
+   * product) and silently fell back to default fg-light. */
+  .share-link-box { background: hsl(0 0% 9%); border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; font-family: var(--mono); font-size: 11px; color: var(--accent); margin: 10px 0; word-break: break-all; max-height: 96px; overflow: auto; }
+  .share-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
+  .share-actions button { font-family: var(--sans); font-size: 12px; padding: 7px 14px; border-radius: 5px; cursor: pointer; }
+  .share-btn-primary { background: var(--accent); color: #000; border: 0; font-weight: 600; }
+  .share-btn-primary:hover { filter: brightness(1.08); }
+  .share-btn-secondary { background: transparent; color: var(--fg-50); border: 1px solid var(--border); }
+  .share-btn-secondary:hover { color: var(--fg); border-color: var(--fg-30); }
+  .share-foot { color: var(--fg-40); font-size: 11px; margin-top: 12px; font-family: var(--mono); line-height: 1.5; }
+  .share-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--bg-1); border: 1px solid var(--border); color: var(--fg); padding: 10px 18px; border-radius: 6px; font-size: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.4); z-index: 320; opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
+  .share-toast.show { opacity: 1; }
+
+  /* v0.9 S6 · W-PASS approval modal · demo v12 lines 2030-2050 */
+  .wp-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 330; padding: 24px; }
+  .wp-modal.open { display: flex; animation: rs-fade 280ms ease; }
+  .wp-modal.open .wp-card { animation: wp-card-in 380ms cubic-bezier(0.16, 1, 0.3, 1); }
+  @keyframes wp-card-in {
+    from { opacity: 0; transform: translateY(12px) scale(0.985); }
+    to   { opacity: 1; transform: translateY(0) scale(1); }
+  }
+  .wp-card { width: 100%; max-width: 620px; background: var(--bg-1); border: 1px solid rgba(255,154,118,0.40); border-radius: 12px; padding: 22px 24px; position: relative; box-shadow: 0 12px 48px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,154,118,0.06); }
+  .wp-banner { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
+  .wp-banner .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255,154,118,0.18); animation: wp-pulse 1.6s ease-in-out infinite; }
+  @keyframes wp-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(255,154,118,0.18); } 50% { box-shadow: 0 0 0 7px rgba(255,154,118,0.04); } }
+  .wp-title { font-size: 16px; font-weight: 600; color: var(--fg); margin: 4px 0 6px; letter-spacing: -0.01em; }
+  .wp-reason { font-size: 12.5px; color: var(--fg-70); line-height: 1.5; margin: 0 0 14px; padding: 8px 11px; background: rgba(255,255,255,0.025); border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; }
+  .wp-meta { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); margin: 8px 0; line-height: 1.6; }
+  .wp-meta b { color: var(--fg-90); }
+  .wp-payload-wrap { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; margin: 12px 0; max-height: 240px; overflow: auto; }
+  .wp-payload-head { display: flex; align-items: center; gap: 8px; padding: 6px 11px; background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 10px; color: var(--fg-50); text-transform: uppercase; letter-spacing: 0.04em; }
+  .wp-payload-head .method { color: var(--accent); font-weight: 600; }
+  .wp-payload { padding: 10px 12px; font-family: var(--mono); font-size: 11px; color: var(--fg-90); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
+  .wp-payload-edit { width: 100%; min-height: 140px; background: var(--bg-2); border: 1px solid var(--accent); border-radius: 6px; padding: 10px 12px; font-family: var(--mono); font-size: 11px; color: var(--fg-90); resize: vertical; outline: none; }
+  .wp-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
+  .wp-actions button { font-family: var(--sans); font-size: 12px; padding: 8px 16px; border-radius: 5px; cursor: pointer; font-weight: 500; transition: all 160ms ease; }
+  .wp-btn-approve { background: var(--accent); color: #000; border: 0; }
+  .wp-btn-approve:hover { box-shadow: 0 0 0 3px rgba(255,154,118,0.20); }
+  .wp-btn-edit { background: transparent; color: var(--fg); border: 1px solid var(--border); }
+  .wp-btn-edit:hover { border-color: var(--accent); color: var(--accent); }
+  .wp-btn-cancel { background: transparent; color: var(--fg-50); border: 1px solid var(--border); }
+  .wp-btn-cancel:hover { color: var(--block); border-color: var(--block); }
+  .wp-btn-save { background: var(--accent); color: #000; border: 0; }
+  .wp-foot { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); margin-top: 12px; line-height: 1.55; }
+  .wp-result { margin-top: 12px; padding: 8px 11px; border-radius: 4px; font-size: 11.5px; line-height: 1.5; }
+  .wp-result.ok { background: rgba(40,200,64,0.08); border: 1px solid rgba(40,200,64,0.30); color: var(--allow); }
+  .wp-result.fail { background: rgba(254,80,80,0.08); border: 1px solid rgba(254,80,80,0.30); color: var(--block); }
+  .wp-result.cancelled { background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--fg-50); }
+  .wp-pending-badge { position: fixed; top: 14px; right: 220px; background: var(--accent); color: #000; padding: 4px 10px; border-radius: 5px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; cursor: pointer; display: none; z-index: 305; box-shadow: 0 4px 16px rgba(255,154,118,0.30); animation: wp-pulse 1.6s ease-in-out infinite; letter-spacing: 0.03em; }
+
+  /* Per-domain mediated-write trust grade chip · v0.9 must-ship */
+  .wp-trust-grade { display: inline-block; padding: 2px 7px; border-radius: 3px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; margin: 0 4px; }
+  .wp-trust-grade.A { color: var(--allow); background: rgba(40,200,64,0.12); }
+  .wp-trust-grade.B { color: #8be88b; background: rgba(40,200,64,0.08); }
+  .wp-trust-grade.C { color: var(--warn); background: rgba(254,188,46,0.10); }
+  .wp-trust-grade.D { color: var(--warn); background: rgba(254,188,46,0.15); }
+  .wp-trust-grade.F { color: var(--block); background: rgba(255,95,87,0.12); }
+  .wp-trust-prompt { margin-top: 10px; padding: 9px 11px; background: rgba(255,95,87,0.06); border: 1px solid rgba(255,95,87,0.30); border-radius: 5px; font-size: 12px; color: var(--fg-90); }
+  .wp-trust-prompt input { margin-right: 6px; }
+  .wp-pending-badge.show { display: inline-block; }
+
+  /* v0.9 S7 · overlay-renderer · inspect-and-act for ctx-source URLs */
+  .or-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 295; padding: 24px; }
+  .or-overlay.open { display: flex; animation: rs-fade 280ms ease; }
+  .or-overlay.open .or-card { animation: wp-card-in 380ms cubic-bezier(0.16, 1, 0.3, 1); }
+  .or-card { width: 100%; max-width: 720px; max-height: calc(100vh - 48px); background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
+  .or-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(74,144,226,0.4), rgba(255,154,118,0.4)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
+  .or-head { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 11px; color: var(--fg-70); flex-shrink: 0; }
+  .or-head .src { color: var(--brand-blue, #4a90e2); font-weight: 600; }
+  .or-head .meta { color: var(--fg-50); }
+  .or-head .audit { margin-left: auto; padding: 2px 8px; background: rgba(40,200,64,0.06); border: 1px solid rgba(40,200,64,0.25); border-radius: 3px; font-size: 10px; color: var(--fg-50); }
+  .or-head .audit b { color: var(--allow); }
+  .or-head .or-close { background: transparent; border: 0; color: var(--fg-50); cursor: pointer; padding: 2px 8px; border-radius: 4px; font-size: 16px; line-height: 1; }
+  .or-head .or-close:hover { color: var(--fg); background: var(--bg-2); }
+  .or-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
+  .or-body h3 { font-size: 17px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; margin: 0 0 4px; }
+  .or-body .url-row { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); margin-bottom: 12px; word-break: break-all; }
+  .or-body .meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; font-family: var(--mono); font-size: 10.5px; }
+  .or-body .meta-row .pill { padding: 2px 7px; border: 1px solid var(--border); border-radius: 3px; color: var(--fg-70); background: var(--bg-2); }
+  .or-body .meta-row .pill.state-open { color: var(--allow); border-color: rgba(40,200,64,0.30); background: rgba(40,200,64,0.06); }
+  .or-body .meta-row .pill.state-closed { color: var(--block); border-color: rgba(254,80,80,0.30); background: rgba(254,80,80,0.06); }
+  .or-body .preview-text { padding: 12px 14px; background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-90); line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow-y: auto; }
+  .or-body .preview-empty { padding: 18px; text-align: center; color: var(--fg-50); font-size: 12px; }
+  .or-body .preview-error { padding: 14px 16px; background: rgba(254,80,80,0.06); border: 1px solid rgba(254,80,80,0.30); border-radius: 6px; color: var(--block); font-size: 12.5px; line-height: 1.5; }
+  .or-body .preview-error .hint { color: var(--fg-50); font-family: var(--mono); font-size: 10.5px; margin-top: 6px; }
+  .or-body .preview-loading { display: flex; align-items: center; gap: 8px; padding: 16px; color: var(--fg-50); font-family: var(--mono); font-size: 11.5px; }
+  .or-body .preview-loading::before { content: ''; width: 10px; height: 10px; border: 2px solid var(--fg-30); border-top-color: var(--accent); border-radius: 50%; animation: or-spin 700ms linear infinite; }
+  @keyframes or-spin { to { transform: rotate(360deg); } }
+  .or-composer { padding: 12px 14px; background: var(--bg-2); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
+  .or-composer .hint { font-family: var(--mono); font-size: 10px; color: var(--fg-50); letter-spacing: 0.06em; }
+  .or-composer .row { display: flex; gap: 8px; align-items: center; }
+  .or-composer input { flex: 1; background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; padding: 8px 11px; color: var(--fg); font-family: var(--sans); font-size: 13px; outline: none; transition: border-color 160ms ease; }
+  .or-composer input:focus { border-color: var(--accent); }
+  .or-composer button { background: var(--accent); color: #000; border: 0; border-radius: 6px; padding: 8px 14px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; }
+  .or-composer button:hover { box-shadow: 0 0 0 3px rgba(255,154,118,0.18); }
+  .or-composer button:disabled { opacity: 0.40; cursor: default; box-shadow: none; }
+
+  /* Linear inline render · per demo v12 lines 569-600. Authentic Linear
+     ticket card displayed inside the overlay when previewing linear://. */
+  .linear-render { background: #1c1c1e; color: #ebeaef; padding: 24px 28px; border-radius: 6px; font-family: 'Inter', -apple-system, sans-serif; }
+  .linear-id { font-family: var(--mono); font-size: 11px; color: #8a8a8e; letter-spacing: 0.04em; margin-bottom: 8px; }
+  .linear-title { font-size: 19px; font-weight: 600; color: #ebeaef; line-height: 1.35; margin-bottom: 14px; letter-spacing: -0.01em; }
+  .linear-props { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
+  .linear-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 4px; font-size: 11.5px; background: rgba(255,255,255,0.04); color: #b8b7bc; }
+  .linear-pri-urgent { color: #f87171; }
+  .linear-pri-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; width: 12px; height: 12px; }
+  .linear-pri-bars div { width: 2px; background: currentColor; border-radius: 0.5px; }
+  .linear-pri-bars div:nth-child(1) { height: 4px; }
+  .linear-pri-bars div:nth-child(2) { height: 7px; }
+  .linear-pri-bars div:nth-child(3) { height: 10px; }
+  .linear-status-progress { color: #fbbf24; }
+  .linear-status-circle { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; box-sizing: border-box; }
+  .linear-status-circle::after { content: ''; position: absolute; inset: 0; background: currentColor; border-radius: 50%; clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%); }
+  .linear-assignee { background: rgba(255,255,255,0.06); }
+  .linear-assignee .av { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; font-family: var(--mono); }
+  .linear-label { font-weight: 500; }
+  .linear-desc { font-size: 13.5px; color: #b8b7bc; line-height: 1.65; padding: 14px 16px; background: rgba(255,255,255,0.025); border-radius: 6px; margin-bottom: 18px; }
+  .linear-desc code { background: rgba(255,255,255,0.07); padding: 1px 5px; border-radius: 3px; font-family: var(--mono); font-size: 12px; color: #ebeaef; }
+  .linear-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
+  .linear-sep .line { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
+  .linear-sep .lbl { font-family: var(--mono); font-size: 10px; color: #6f6e74; letter-spacing: 0.1em; text-transform: uppercase; }
+  .linear-comment { display: flex; gap: 11px; padding: 10px 0; }
+  .linear-comment .av { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; font-family: var(--mono); flex-shrink: 0; background: #5e6ad2; }
+  .linear-comment .col { flex: 1; min-width: 0; }
+  .linear-comment .who { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; font-weight: 600; color: #ebeaef; margin-bottom: 2px; }
+  .linear-comment .ts { color: #6f6e74; font-size: 11px; font-weight: 400; }
+  .linear-comment .body { font-size: 13px; color: #b8b7bc; line-height: 1.55; }
+
+  /* Make ctx-source URL chips throughout the UI clickable + discoverable.
+     Matches demo v12 lines 690-694. */
+  .ctx-url-chip { cursor: pointer; transition: all 180ms ease; padding: 2px 7px 2px 22px; border-radius: 4px; background: rgba(74,144,226,0.08); border: 1px solid rgba(74,144,226,0.30); color: var(--brand-blue, #4a90e2); position: relative; font-family: var(--mono); font-size: 10.5px; display: inline-block; }
+  .ctx-url-chip::before { content: '\\1F441'; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: 0.85; }
+  .ctx-url-chip:hover { background: rgba(74,144,226,0.18); border-color: rgba(74,144,226,0.55); }
+
+  .reshape-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 300; padding: 24px; }
+  .reshape-modal.open { display: flex; animation: rs-fade 280ms ease; }
+  .reshape-modal.open .reshape-card { animation: wp-card-in 380ms cubic-bezier(0.16, 1, 0.3, 1); }
+  @keyframes rs-fade { from { opacity: 0; } to { opacity: 1; } }
+  /* Reshape card · matches demo v12 (lines 103-138) · gradient border via
+   * mask trick so the card looks like the agent itself composed it (orange
+   * for codehere brand, blue for primitives). Without this the modal feels
+   * like a generic dialog · with it, the modal reads as the moment the
+   * agent gets to work. */
+  .reshape-card { width: 100%; max-width: 580px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; position: relative; overflow: hidden; }
+  .reshape-card::before {
+    content: ''; position: absolute; inset: -1px;
+    border-radius: inherit; padding: 1px;
+    background: linear-gradient(135deg, rgba(255,154,118,0.5) 0%, rgba(74,144,226,0.5) 100%);
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor; mask-composite: exclude;
+    pointer-events: none;
+  }
+  /* Primitives note · blue info box at the modal bottom explaining what
+   * "primitives" the agent composes from · demo v12 lines 134-137. */
+  .primitives-note {
+    margin-top: 14px; padding: 8px 12px;
+    background: rgba(74,144,226,0.05); border: 1px solid rgba(74,144,226,0.2);
+    border-radius: 5px;
+    font-size: 11.5px; color: var(--fg-70); line-height: 1.55;
+  }
+  .primitives-note b { color: #4a90e2; font-weight: 500; }
+  .primitives-note .prims { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); margin-top: 5px; }
+  .primitives-note .prims .p {
+    display: inline-block; padding: 1px 6px; margin: 2px 3px 0 0;
+    background: hsl(0 0% 9%); border: 1px solid var(--border);
+    border-radius: 3px; color: var(--fg-70);
+  }
+  .reshape-card .k { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase; }
+  .reshape-card h2 { font-size: 18px; font-weight: 600; margin: 4px 0 6px; color: var(--fg); letter-spacing: -0.01em; }
+  .reshape-card p.sub { color: var(--fg-50); font-size: 12.5px; margin: 0 0 14px; line-height: 1.55; }
+  .reshape-input { display: flex; gap: 8px; margin: 8px 0 16px; }
+  .reshape-input input { flex: 1; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; color: var(--fg); font-size: 13px; outline: none; }
+  .reshape-input input:focus { border-color: var(--accent); }
+  .reshape-input button { background: var(--accent); color: #000; border: 0; border-radius: 6px; padding: 0 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
+  .reshape-input button:hover { filter: brightness(1.08); }
+  .reshape-suggestions { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 14px; }
+  .reshape-suggestions .lbl { font-family: var(--mono); font-size: 9.5px; color: var(--fg-40); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; }
+  .reshape-suggestions .pill { padding: 6px 11px; background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 5px; font-size: 12px; color: var(--fg-90); cursor: pointer; text-align: left; }
+  .reshape-suggestions .pill:hover { border-color: var(--accent); background: rgba(255,154,118,0.05); }
+  .reshape-suggestions .pill .what { color: var(--fg-50); margin-left: 8px; font-size: 11px; }
+  .reshape-card .close-x { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; color: var(--fg-50); cursor: pointer; font-size: 18px; padding: 4px 6px; border-radius: 4px; }
+  .reshape-card .close-x:hover { color: var(--fg); background: var(--bg-2); }
+  .agent-compose { display: none; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-70); margin-top: 12px; }
+  .agent-compose.show { display: block; animation: rs-fade 200ms ease; }
+  .agent-compose .agent-line { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
+  .agent-compose .line { opacity: 0; animation: rs-slide 240ms ease forwards; }
+  @keyframes rs-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
+  .agent-compose .line:nth-child(1) { animation-delay: 200ms; }
+  .agent-compose .line:nth-child(2) { animation-delay: 600ms; }
+  .agent-compose .line:nth-child(3) { animation-delay: 1000ms; }
+  .agent-compose .line:nth-child(4) { animation-delay: 1400ms; }
+  .agent-compose .line:nth-child(5) { animation-delay: 1800ms; }
+  .agent-compose .ok { color: var(--allow); }
+  .agent-compose .info { color: #4a90e2; }
+  .agent-compose .kw { color: var(--accent); }
+
+  /* Custom-view banner · appears when reshape is active */
+  .custom-view-banner {
+    display: none;
+    padding: 8px 20px;
+    background: linear-gradient(90deg, rgba(255,154,118,0.06), rgba(74,144,226,0.04));
+    border-bottom: 1px solid rgba(255,154,118,0.2);
+    font-family: var(--mono); font-size: 11px; color: var(--fg-70);
+    display: none;
+  }
+  body.custom-view .custom-view-banner { display: flex; align-items: center; gap: 10px; }
+  .custom-view-banner .lbl { color: var(--accent); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 9.5px; }
+  .custom-view-banner .prompt { color: var(--fg-90); font-style: italic; }
+  .custom-view-banner .reset { margin-left: auto; color: var(--fg-50); cursor: pointer; padding: 2px 8px; border: 1px solid var(--border); border-radius: 3px; font-size: 10px; }
+  .custom-view-banner .reset:hover { color: var(--fg); border-color: var(--fg-30); }
+
+  /* Failover banner · ported from v1 ui-page.ts on 2026-05-23 as part of /v1 kill.
+     Polls /api/failover-offers · when a rate-limited agent has a viable fallback,
+     amber strip appears between header and task list with "Switch / Dismiss". */
+  .failover-banner {
+    margin: 12px 24px 0; padding: 12px 18px;
+    border: 1px solid rgba(254,188,46,0.30);
+    background: rgba(254,188,46,0.06);
+    border-radius: 8px;
+    font-size: 13px; line-height: 1.5;
+    display: none; align-items: center; gap: 12px; flex-wrap: wrap;
+  }
+  .failover-banner.show { display: flex; }
+  .failover-banner .fb-msg { flex: 1; color: var(--fg-70); min-width: 200px; }
+  .failover-banner .fb-msg b { color: var(--fg); font-weight: 600; }
+  .failover-banner .fb-actions { display: flex; gap: 8px; flex-shrink: 0; }
+  .failover-banner .fb-actions button {
+    font-family: var(--mono); font-size: 11px;
+    padding: 5px 12px; border-radius: 5px; cursor: pointer;
+    border: 1px solid var(--border); background: transparent;
+    color: var(--fg-70); transition: color 0.15s, border-color 0.15s;
+  }
+  .failover-banner .fb-actions button:hover { color: var(--fg); border-color: var(--fg-30); }
+  .failover-banner .fb-actions button.fb-accept {
+    background: rgba(254,188,46,0.12); border-color: rgba(254,188,46,0.40);
+    color: var(--warn); font-weight: 600;
+  }
+  .failover-banner .fb-actions button.fb-accept:hover { background: rgba(254,188,46,0.20); }
+
+  /* SHAPE: ship-only · hide tool-call cards, steps blob, hook blocks, etc. */
+  body.shape-ship-only .tc-card,
+  body.shape-ship-only details.collapsible,
+  body.shape-ship-only .hook-block-card,
+  body.shape-ship-only .push-gate-card { display: none !important; }
+
+  /* REPL primitives · thinking dots + streaming caret + repl-beat narrative.
+   * Match demo v12 lines 299-309 + 455-457. The thinking pill appears
+   * while the agent is mid-reasoning; the streaming caret appends to text
+   * being streamed in; the repl-beat is an italic narrative paragraph
+   * between tool calls (italic = "agent's voice", not output). All three
+   * use the same brand-color blink so live state reads consistently. */
+  .thinking {
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 5px 10px; margin: 4px 0;
+    background: hsl(0 0% 9%); border: 1px solid var(--border);
+    border-radius: 12px;
+    font-family: var(--mono); font-size: 11px; color: var(--fg-50);
+  }
+  .thinking .dots { display: inline-flex; gap: 3px; }
+  .thinking .dots span {
+    width: 4px; height: 4px; border-radius: 50%; background: var(--fg-40);
+    animation: cb-blink 1.4s ease infinite;
+  }
+  .thinking .dots span:nth-child(2) { animation-delay: 0.2s; }
+  .thinking .dots span:nth-child(3) { animation-delay: 0.4s; }
+  @keyframes cb-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
+  .streaming { display: inline; }
+  .streaming::after {
+    content: '\\258D'; color: var(--accent); margin-left: 2px;
+    animation: cb-cursor 1s steps(2) infinite;
+  }
+  @keyframes cb-cursor { 50% { opacity: 0; } }
+  .repl-beat {
+    padding: 7px 11px; margin: 8px 0;
+    background: rgba(0,0,0,0.18);
+    border-left: 2px solid var(--border); border-radius: 0 4px 4px 0;
+    font-style: italic; color: var(--fg-70); font-size: 12.5px;
+    line-height: 1.55;
+  }
+  .repl-beat .cursor {
+    display: inline-block; width: 7px; height: 12px;
+    background: var(--accent); margin-left: 3px; vertical-align: text-bottom;
+    animation: cb-cursor 1s steps(2) infinite;
+  }
+
+  /* Audit-line · narrative beat between tool cards · matches demo v12
+   * lines 405-407. Dim mono row with a #NNNN seq prefix. When the chain
+   * records a notable event (pre-prompt scan, override, budget warning,
+   * W-PASS approval) the audit chain becomes VISIBLE in the timeline ·
+   * not buried in the footer. The line is the proof; the footer is the
+   * summary. */
+  .audit-line {
+    font-family: var(--mono); font-size: 10.5px; color: var(--fg-40);
+    padding: 6px 12px; margin: 8px 0;
+    background: rgba(0,0,0,0.2);
+    border-left: 2px solid var(--border); border-radius: 3px;
+    line-height: 1.55;
+  }
+  .audit-line .seq { color: var(--fg-30); margin-right: 8px; }
+  .audit-line.warn {
+    color: var(--warn); border-left-color: var(--warn);
+    background: rgba(254,188,46,0.03);
+  }
+  .audit-line.allow { border-left-color: rgba(40,200,64,0.4); }
+  .audit-line b { color: var(--fg-90); font-weight: 600; }
+  .audit-line code { background: hsl(0 0% 9%); padding: 1px 5px; border-radius: 3px; color: var(--fg-70); }
+
+  /* auditor persona · audit-chain + verifier + hook-badges amplified,
+     summary muted (per demo v12 line 2462: "amplify audit-lines +
+     hook-badges + trust-grades") */
+  body.auditor .audit-line { background: rgba(74,144,226,0.06); border-left-color: #4a90e2; color: var(--fg-70); font-size: 11.5px; padding: 8px 14px; }
+  body.auditor .verifier-panel { box-shadow: 0 0 0 2px rgba(40,200,64,0.18); }
+  body.auditor .hook-badge { transform: scale(1.05); }
+  body.auditor .file-chip .trust { font-weight: 700; padding: 2px 7px; }
+  body.auditor .panel:has(p) { opacity: 0.7; }
+
+  /* SHAPE: velocity · hide tool-call cards, summary prose, tokens, verifier · keep outcome + files */
+  body.shape-velocity .tc-card,
+  body.shape-velocity .token-table,
+  body.shape-velocity details.collapsible { display: none !important; }
+  body.shape-velocity .panel:has(.verifier-panel) { display: none; }
+
+  /* SHAPE: security · amplify verifier + hook blocks; hide summary prose */
+  body.shape-security .panel:has(.token-table),
+  body.shape-security details.collapsible { display: none !important; }
+  body.shape-security .verifier-panel { box-shadow: 0 0 0 2px rgba(255,95,87,0.18); padding: 14px; }
+  body.shape-security .hook-block-card { box-shadow: 0 0 0 2px rgba(255,95,87,0.3); }
+
+  /* v0.8 S2.5 · Settings drawer · ported from demo v12 lines 178-192 + A-09
+   * in the backlog. Right-side off-canvas panel · holds Context Sources +
+   * future section-visibility toggles. */
+  .drawer { position: fixed; top: 0; right: 0; width: 360px; height: 100vh; background: var(--bg-1); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 200; padding: 20px 18px; overflow-y: auto; }
+  .drawer.open { transform: translateX(0); }
+  .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 199; }
+  .drawer-overlay.open { opacity: 1; pointer-events: auto; }
+  .drawer h3 { font-family: var(--mono); font-size: 11px; color: var(--fg-50); letter-spacing: 0.12em; text-transform: uppercase; margin: 16px 0 8px; }
+  .drawer h3:first-child { margin-top: 0; }
+  .drawer p.sub { font-size: 11px; color: var(--fg-50); margin: 2px 0 12px; }
+  .drawer-close { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; color: var(--fg-50); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 4px; }
+  .drawer-close:hover { color: var(--fg); background: var(--bg-2); }
+  .drawer-title { font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 12px; padding-right: 30px; }
+
+  /* Settings-button (cog) in the header · opens the drawer */
+  .settings-btn { background: transparent; border: 1px solid var(--border); color: var(--fg-50); cursor: pointer; padding: 4px 8px; border-radius: 6px; font-size: 12px; }
+  .settings-btn:hover { color: var(--fg); border-color: var(--fg-30); }
+
+  /* Context-source rows inside the drawer */
+  .cs-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: 12px; border-bottom: 1px solid var(--border-soft); }
+  .cs-row .cs-icon { margin-top: 1px; }
+  .cs-row:last-child { border-bottom: none; }
+  .cs-row .cs-icon { width: 24px; height: 24px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; font-family: var(--mono); }
+  .cs-row .cs-icon.linear { background: #5e6ad2; color: #fff; }
+  .cs-row .cs-icon.figma { background: #1e1e1e; color: #fff; border: 1px solid rgba(255,255,255,0.2); }
+  .cs-row .cs-label { font-weight: 500; color: var(--fg-90); }
+  .cs-row .cs-meta { font-size: 10px; color: var(--fg-50); font-family: var(--mono); }
+  .cs-row .cs-status { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
+  .cs-row .cs-status.connected    { color: var(--allow); background: rgba(40,200,64,0.10); }
+  .cs-row .cs-status.expired      { color: var(--warn); background: rgba(254,188,46,0.10); }
+  .cs-row .cs-status.manual       { color: var(--fg-50); background: rgba(255,255,255,0.04); }
+  .cs-row .cs-status.disconnected { color: var(--fg-40); background: rgba(255,255,255,0.02); }
+  .cs-row .cs-status.available    { color: var(--accent); background: rgba(255,154,118,0.10); }
+  .cs-row .cs-actions { margin-left: auto; display: flex; gap: 6px; }
+  .cs-btn { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 4px; cursor: pointer; background: transparent; color: var(--fg-70); border: 1px solid var(--border); }
+  .cs-btn:hover { color: var(--fg); border-color: var(--fg-30); }
+  .cs-btn.primary { color: var(--accent); border-color: rgba(255,154,118,0.4); }
+  .cs-btn.primary:hover { background: rgba(255,154,118,0.08); }
+  .cs-btn.danger:hover { color: var(--block); border-color: var(--block); }
+  .cs-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+  .cs-empty-hint { font-size: 11px; color: var(--fg-50); padding: 8px 10px; background: rgba(255,255,255,0.02); border-radius: 4px; margin-top: 4px; }
+  .cs-test-result { font-family: var(--mono); font-size: 10px; padding: 4px 8px; margin-top: 4px; border-radius: 3px; }
+  .cs-test-result.ok { color: var(--allow); background: rgba(40,200,64,0.06); }
+  .cs-test-result.fail { color: var(--block); background: rgba(255,95,87,0.06); }
+
+  /* Demo v12 line 322 + 518-521 · context-source rendering on tool-call cards */
+  .tc-card.ctx-source { border-left: 2px solid #4a90e2; }
+  .tc-card .hook-badge.ctx { color: #4a90e2; background: rgba(74,144,226,0.08); border: 1px solid rgba(74,144,226,0.3); }
+
+  /* P10 · per-step hook badges in the trace details (same styles, different parent). */
+  .tc .hook-badge { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-right: 6px; vertical-align: middle; }
+  .tc .hook-badge.allow { color: var(--allow); background: rgba(40,200,64,0.10); }
+  .tc .hook-badge.block { color: var(--block); background: rgba(255,95,87,0.10); }
+  .tc .hook-badge.override { color: var(--warn); background: rgba(254,188,46,0.10); }
+  .tc .hook-badge.ctx { color: #4a90e2; background: rgba(74,144,226,0.08); border: 1px solid rgba(74,144,226,0.3); }
+  .ctx-source-banner { padding: 8px 12px; background: rgba(74,144,226,0.04); border: 1px solid rgba(74,144,226,0.25); border-left: 3px solid #4a90e2; border-radius: 5px; margin: 8px 0; font-size: 11.5px; color: var(--fg-70); }
+  .ctx-source-banner b { color: #4a90e2; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 6px; }
+
+  /* F-06 · interactive audit chain panel · dashboard footer · click "Verify"
+   * to call /api/audit/verify and render the verdict in plain English. The
+   * chain is the source of truth, NOT codehere itself · the button proves
+   * the daemon isn't lying to you. */
+  /* RADICAL bottom-chrome collapse (2026-05-24 · Ega flagged "audit
+   * section consuming space"). Pre-fix: audit-chain panel ate ~90px ·
+   * OSS footer ate ~25px · total bottom chrome ~115px on every screen.
+   * Post-fix: panel collapsed to inline + co-lives with OSS footer in
+   * the same 28px status-bar line. Audit info stays load-bearing
+   * (dots + stats + Verify button preserved · only the SHA-256
+   * subtitle and the panel-card chrome removed). Net ~85px reclaimed.
+   * No info-loss · just spatial economy. */
+  .audit-chain-panel {
+    display: inline-flex; align-items: center; gap: 12px;
+    padding: 0; margin: 0; background: none; border: none;
+  }
+  .audit-chain-head { display: inline-flex; align-items: center; gap: 10px; }
+  .audit-chain-title { font-family: var(--mono); font-size: 10px; color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.06em; }
+  /* audit-chain stats line + activity dots · denser footer per demo v12 */
+  .audit-chain-dots .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
+  .audit-chain-dots .dot.allow { background: var(--allow); }
+  .audit-chain-dots .dot.block { background: var(--block); }
+  .audit-chain-dots .dot.override { background: var(--warn); }
+  .audit-chain-dots .dot.muted { background: var(--fg-30); }
+  .audit-chain-btn {
+    font-family: var(--mono); font-size: 11px;
+    padding: 4px 12px; border-radius: 5px; cursor: pointer;
+    background: rgba(255,154,118,0.08); color: var(--accent);
+    border: 1px solid rgba(255,154,118,0.40); font-weight: 600;
+    transition: all 160ms ease;
+  }
+  .audit-chain-btn:hover { background: rgba(255,154,118,0.20); box-shadow: 0 0 0 3px rgba(255,154,118,0.10); }
+  .audit-chain-btn.verified { color: var(--allow); border-color: rgba(40,200,64,0.3); }
+  .audit-chain-btn.broken   { color: var(--block); border-color: rgba(255,95,87,0.3); }
+  /* audit-chain-result starts collapsed (the subtitle "SHA-256
+   * hash-chain · run verify…" ate 25px on every screen). Only renders
+   * when verifyAuditChain() runs and writes a verdict · gets shown
+   * inline temporarily after click then fades back. */
+  .audit-chain-result { display: none; margin-top: 0; font-family: var(--mono); font-size: 11px; }
+  .audit-chain-result.show { display: inline-block; margin-left: 12px; }
+  .audit-chain-result .ok   { color: var(--allow); }
+  .audit-chain-result .fail { color: var(--block); }
+  .audit-chain-counts { color: var(--fg-50); margin-top: 4px; }
+  .audit-chain-error  { color: var(--block); margin-top: 4px; padding-left: 12px; }
+
+  /* F-04 · time-gap separator · slides between two consecutive items in the
+   * task list when their times differ by more than 2 hours. Says "Nh later"
+   * with an optional "· daemon restart" tail when there's a known restart in
+   * the gap. Helps the reviewer parse 17h+ histories without scrolling
+   * forever. */
+  .time-gap {
+    display: flex; align-items: center; gap: 16px;
+    padding: 14px 0; margin: 16px 0;
+    font-family: var(--mono); font-size: 11px;
+    color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em;
+  }
+  .time-gap .line {
+    flex: 1; height: 1px;
+    background: linear-gradient(90deg, transparent, var(--accent), transparent);
+    opacity: 0.45;
+  }
+  .time-gap .label {
+    padding: 7px 16px; border: 1px solid rgba(255,154,118,0.3);
+    border-radius: 100px; background: rgba(255,154,118,0.04);
+    text-align: center; line-height: 1.3;
   }
-  .logo { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--fg); }
-  .budget { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--fg-50); }
-  .budget.safe { color: var(--fg-50); }
-  .budget.warn { color: var(--warn); }
-  .budget.block { color: var(--block); font-weight: 600; }
+  .time-gap .label b { color: var(--fg); font-weight: 600; }
+  .time-gap .label .sub { display: block; margin-top: 3px; font-size: 9px; color: var(--fg-50); letter-spacing: 0.12em; }
+
+  /* F-08 · token table · per-agent breakdown of inputs/outputs/cache/cost in
+   * task detail · only renders when artifacts.usage has tokens. Mono numbers
+   * column-aligned, total row bold-line-above. */
+  .token-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
+  .token-table th { text-align: right; color: var(--fg-40); font-size: 9px; text-transform: uppercase; padding: 4px 8px; font-weight: 500; }
+  .token-table th:first-child { text-align: left; }
+  .token-table td { padding: 4px 8px; text-align: right; color: var(--fg-90); }
+  .token-table td:first-child { text-align: left; color: var(--fg-70); }
+  .token-table tr.total td { border-top: 1px solid var(--border); color: var(--fg); font-weight: 600; padding-top: 6px; }
+  .token-table td.dim { color: var(--fg-40); }
+
+  /* F-02 · cross-worktree alert · pulsing dot + label in the squad-row when
+   * any session in a different cwd has been running > 5 minutes. Click to
+   * jump to that detail. */
+  .worktree-alert {
+    display: none;
+    font-family: var(--mono); font-size: 10px; color: var(--warn);
+    background: rgba(254,188,46,0.06); border: 1px solid rgba(254,188,46,0.18);
+    padding: 2px 8px; border-radius: 4px; cursor: pointer;
+    margin-left: 8px;
+  }
+  .worktree-alert:hover { background: rgba(254,188,46,0.12); }
+  .worktree-alert .pulse-dot {
+    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
+    background: var(--warn); margin-right: 6px; animation: pulse 1.6s ease infinite;
+  }
+
+  /* F-01 · budget threshold warning · drops down under the header when daily
+   * spend crosses 80% of the cap. Color tracks safe/warn/block. The audit-
+   * line copy is intentionally plain English: who, how much, what to do. */
+  .budget-banner {
+    display: none;
+    padding: 8px 20px; border-bottom: 1px solid var(--border-soft);
+    font-family: var(--mono); font-size: 11px;
+    background: rgba(254,188,46,0.04); color: var(--warn);
+  }
+  .budget-banner.block {
+    background: rgba(255,95,87,0.06); color: var(--block);
+  }
+  .budget-banner .what { color: var(--fg-90); margin-right: 8px; font-weight: 600; }
+  .budget-banner .hint { color: var(--fg-50); margin-left: 8px; }
   .v1-link {
     font-family: var(--mono); font-size: 11px; color: var(--fg-40);
     text-decoration: none; padding: 4px 10px; border: 1px solid var(--border);
@@ -36,6 +858,28 @@ const SHARED_STYLES = `
   }
   .v1-link:hover { color: var(--fg); border-color: var(--fg-30); }
 
+  /* A-10 · OSS · MIT footer · proof-of-real strip at the very bottom of the
+   * dashboard. The marketing line is "codehere is OSS, audit it yourself" ·
+   * if the running daemon doesn't say so somewhere visible, the line is
+   * empty marketing. Test count + version come from the server. */
+  /* OSS footer · proof-of-real strip · matches demo .proof-footer (lines
+   * 497-505). Darker bg so it reads as ground floor. Codehere wordmark gets
+   * the brand tint · the only colored item · everything else dim. Hover on
+   * any link goes to full fg, not 70 · the click target deserves full
+   * contrast when the cursor's actually there. */
+  .oss-footer {
+    flex-shrink: 0; padding: 9px 20px;
+    border-top: 1px solid var(--border-soft);
+    background: rgba(0,0,0,0.35);
+    font-family: var(--mono); font-size: 10.5px; color: var(--fg-40);
+    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+  }
+  .oss-footer .brand { color: var(--accent); }
+  .oss-footer .right { margin-left: auto; }
+  .oss-footer a { color: var(--fg-50); text-decoration: none; transition: color 180ms cubic-bezier(0.16,1,0.3,1); }
+  .oss-footer a:hover { color: var(--fg); }
+  .oss-footer .sep { color: var(--fg-30); }
+
   .squad-row {
     display: flex; align-items: center; gap: 12px;
     padding: 6px 20px; border-bottom: 1px solid var(--border-soft);
@@ -46,6 +890,10 @@ const SHARED_STYLES = `
   .squad-dot.ready { background: var(--allow); }
   .squad-dot.busy { background: var(--warn); }
   .squad-dot.offline { background: var(--fg-30); }
+  /* setup = installed/known but can't run yet · hollow ring, not a filled dot,
+     so it reads "not ready" at a glance and never like an active green/amber. */
+  .squad-dot.setup { background: transparent; border: 1.5px solid var(--fg-40); box-sizing: border-box; }
+  .squad-setup { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-40); border: 1px solid var(--fg-20); border-radius: 3px; padding: 0 4px; margin-left: 2px; }
 
   .bar {
     display: flex; align-items: center; gap: 8px;
@@ -73,15 +921,55 @@ const SHARED_STYLES = `
   .section-label {
     font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
     color: var(--fg-40); text-transform: uppercase; margin: 16px 0 8px;
+    display: flex; align-items: center; gap: 8px;
   }
   .section-label:first-child { margin-top: 0; }
+  /* Featured section gets the brand tint · pinned demo + recent-work
+   * sections deserve the visual signal that says "this is what to look
+   * at first". Sub-dot precedes the label so the eye lands there before
+   * reading the text. */
+  .section-label.featured { color: var(--accent); }
+  .section-label.featured::before {
+    content: ''; display: inline-block;
+    width: 5px; height: 5px; border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 0 3px rgba(255,154,118,0.18);
+  }
 
+  /* Task card · glass surface · matches demo v12 .glass-card pattern.
+   * Faint white-on-dark fill + 1px low-contrast border · sits on top of
+   * the ambient dot-grid. Hover lifts 2px with a bigger shadow + inner
+   * ring · the card visibly comes forward when the cursor's on it. */
   .task-card {
-    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
-    border-radius: 8px; padding: 12px 14px; margin-bottom: 6px;
-    cursor: pointer; transition: border-color 0.15s, background 0.15s;
+    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
+    border-left: 2px solid rgba(255,255,255,0.06);
+    border-radius: 8px; padding: 13px 15px; margin-bottom: 8px;
+    cursor: pointer;
+    transition:
+      transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
+      border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
+      background 300ms cubic-bezier(0.16, 1, 0.3, 1),
+      box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .task-card:hover {
+    border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
+    transform: translateY(-2px);
+    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
   }
-  .task-card:hover { border-color: var(--fg-30); background: rgba(255,255,255,0.04); }
+  .task-card.tc-pinned { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(255,154,118,0.04), rgba(255,255,255,0.02) 30%); }
+  .task-card.agent-claude-code { border-left-color: #76b7ff; }
+  .task-card.agent-codex { border-left-color: #28c840; }
+  .task-card.agent-aider { border-left-color: #ff9a76; }
+  .task-card.agent-opencode { border-left-color: #c4b5fd; }
+  .task-card.agent-gemini { border-left-color: #febc2e; }
+  .task-card.agent-conductor { border-left-color: var(--fg-30); }
+  /* Outcome chip on the right of card-row2 · ✓ / ⚠ / ↻ */
+  .card-outcome { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 3px; }
+  .card-outcome.ok { color: var(--allow); background: rgba(40,200,64,0.10); }
+  .card-outcome.warn { color: var(--warn); background: rgba(254,188,46,0.10); }
+  .card-outcome.fail { color: var(--block); background: rgba(255,95,87,0.10); }
+  .card-outcome.queued { color: var(--fg-50); background: rgba(255,255,255,0.03); }
+  .card-stalled { margin-top: 6px; font-size: 11px; line-height: 1.4; color: var(--block); background: rgba(255,95,87,0.07); border-left: 2px solid var(--block); padding: 5px 8px; border-radius: 3px; }
   .card-row1 { display: flex; align-items: center; gap: 8px; }
   .status-icon { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
   .status-icon.running { background: var(--accent); animation: pulse 1.5s ease infinite; }
@@ -95,7 +983,23 @@ const SHARED_STYLES = `
   @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
 
   .card-title { font-weight: 600; color: var(--fg); font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .card-agent { font-family: var(--mono); font-size: 10px; color: var(--fg-50); background: rgba(255,255,255,0.04); padding: 2px 6px; border-radius: 4px; }
+  .card-agent { font-family: var(--mono); font-size: 10px; color: var(--fg-50); background: rgba(255,255,255,0.04); padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; }
+  /* Agent identity badge (squircle with initials) — used in cards, squad row, detail header */
+  .ab { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; font-family: var(--mono); font-size: 9px; font-weight: 700; flex-shrink: 0; letter-spacing: -0.04em; }
+  .ab.claude { background: var(--agent-claude); color: #000; }
+  .ab.codex { background: var(--agent-codex); color: #fff; }
+  .ab.aider { background: var(--agent-aider); color: #fff; }
+  .ab.gemini { background: var(--agent-gemini); color: #000; }
+  .ab.opencode { background: var(--agent-opencode); color: #000; }
+  .ab.conductor { background: var(--accent); color: #000; }
+  .ab.auto { background: var(--fg-30); color: #000; }
+  .ab.user { background: #5a5a62; color: #fff; }
+  .ab.lg { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }
+  .ab.sm { width: 14px; height: 14px; font-size: 8px; border-radius: 3px; }
+  /* Cost signal pill — primitive #2 */
+  .cost-signal { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9px; color: var(--fg-40); padding: 1px 6px; border: 1px solid var(--border); border-radius: 3px; }
+  .cost-signal.free { color: var(--allow); border-color: rgba(40,200,64,0.25); background: rgba(40,200,64,0.04); }
+  .cost-signal.paid { color: var(--fg-50); }
   .card-row2 { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-family: var(--mono); font-size: 10px; color: var(--fg-40); }
   .card-row3 { margin-top: 6px; display: flex; gap: 6px; }
   .card-btn {
@@ -124,24 +1028,289 @@ const SHARED_STYLES = `
   }
   @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 
+  /* Detail header · matches demo v12 .phase-head pattern · uppercase brand
+   * kicker label · 22px shimmering gradient title · meta line beneath.
+   * The shimmer is the same 6-stop gradient as demo h1, scaled down for
+   * inside-a-page use (vs full-phase headline). */
   .detail-header {
-    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
+    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px;
   }
   .back-btn {
     font-family: var(--mono); font-size: 12px; color: var(--accent);
     cursor: pointer; padding: 4px 8px; border-radius: 4px;
     border: 1px solid rgba(255,154,118,0.2);
+    flex-shrink: 0; margin-top: 14px;
   }
   .back-btn:hover { background: var(--accent-wash); }
-  .detail-title { font-weight: 600; font-size: 15px; flex: 1; }
+  .detail-title-wrap { flex: 1; min-width: 0; }
+  .detail-kicker {
+    font-family: var(--mono); font-size: 10.5px; color: var(--accent);
+    letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
+    margin-bottom: 4px;
+  }
+  .detail-title {
+    font-weight: 600; font-size: 22px; line-height: 1.25;
+    letter-spacing: -0.015em;
+    background: linear-gradient(90deg, #ff9a76 0%, #f5c6b0 22%, #ff9a76 38%, #4a90e2 55%, #8ab8ee 70%, #4a90e2 85%, #ff9a76 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text; background-clip: text;
+    -webkit-text-fill-color: transparent; color: transparent;
+    animation: titleShimmer 6s linear infinite;
+  }
+  @keyframes titleShimmer {
+    0% { background-position: 0% center; }
+    100% { background-position: 200% center; }
+  }
   .detail-meta { font-family: var(--mono); font-size: 11px; color: var(--fg-50); margin-bottom: 16px; }
+  .detail-meta .phase-pos { color: var(--accent); }
+  /* Artifacts drawer (task #51) · header trigger + slide-in side panel */
+  .art-trig { color: #4a90e2; cursor: pointer; }
+  .art-trig:hover { text-decoration: underline; }
+  .art-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.62); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 90; }
+  .art-scrim.open { opacity: 1; pointer-events: auto; }
+  /* Centered preview popup · scales up on large screens so diagrams/tables get
+     room (vs a cramped right drawer). */
+  .art-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-48%) scale(.98); opacity: 0; pointer-events: none;
+    width: min(880px, 92vw); max-height: 86vh; background: #16171d; border: 1px solid var(--border); border-radius: 12px;
+    box-shadow: 0 24px 80px rgba(0,0,0,.6); transition: opacity .18s ease, transform .18s ease; z-index: 100; display: flex; flex-direction: column; }
+  .art-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
+  .art-modal-h { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--fg-80); }
+  .art-modal-h .x { margin-left: auto; cursor: pointer; color: var(--fg-50); font-size: 16px; }
+  .art-modal-h .x:hover { color: var(--fg-80); }
+  .art-modal-body { overflow: auto; padding: 16px 18px; }
+  .art-modal-body .panel { border: none; padding: 0; margin: 0; background: transparent; }
+  .art-modal-body .panel-title { display: none; }
+  /* Legible canvas: each artifact lifts onto an elevated surface so it's not
+     lost on near-black, and diagram/chart strokes + table text get contrast. */
+  .art-modal .artifact-card, .art-modal .art-mock, .art-modal .art-pick { background: #1c1e26; border: 1px solid #2c2f3a; border-radius: 10px; padding: 14px; margin-bottom: 14px; }
+  .art-modal .art-pick { border-left: 3px solid var(--accent); }
+  .art-modal .artifact-h { color: var(--fg-70); font-size: 11px; margin-bottom: 10px; }
+  .art-modal .art-seq { background: #21242e; border: 1px solid #333744; border-radius: 8px; padding: 12px; }
+  .art-modal .art-cmp .hd { background: #2a2d38; color: var(--fg-80); }
+  .art-modal .art-cmp .rl { background: #23262f; color: var(--fg-70); }
+  .art-modal .art-cmp .cell { background: #1a1c23; color: #d2d4de; }
+  .art-modal .art-mock-body { color: #cdd0da; }
+  /* brighter diagram strokes/text so the graph actually reads */
+  .art-modal .seq-svg .ll { stroke: #4a4d5a; }
+  .art-modal .seq-svg .box { fill: #2a2e3a; stroke: #444858; }
+  .art-modal .seq-svg .msg { stroke: #c2c4d0; }
+  .art-modal .seq-svg .msg.ret { stroke: #8a8d9c; }
+  .art-modal .seq-svg .mt { fill: #d2d4de; }
+  .art-modal .seq-svg .ah { fill: #c2c4d0; }
+  .art-modal .seq-svg .ah-ret { fill: #8a8d9c; }
+  @media (max-width: 560px){ .art-modal { width: 94vw; max-height: 90vh; } }
   .detail-actions { display: flex; gap: 6px; }
+  /* Chapter divider · phase transition in the thread narrative (demo v12) */
+  .chapter-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-family: var(--mono); font-size: 10.5px; }
+  .chapter-divider .ch-prev { color: var(--allow); white-space: nowrap; }
+  .chapter-divider .ch-prev:empty { display: none; }
+  .chapter-divider .ch-line { flex: 1; height: 1px; background: var(--border); }
+  .chapter-divider .ch-next { color: var(--fg-50); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.4px; }
+  .chapter-divider .ch-next b { color: var(--accent); }
+  /* Persona selector · "show only what matters to your role" */
+  .persona-select { background: var(--bg-2,#1a1a1f); color: var(--fg-70); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; padding: 4px 8px; font-family: inherit; cursor: pointer; }
+  .persona-select:hover { border-color: var(--fg-30); }
+  .density-toggle { background: var(--bg-2,#1a1a1f); color: var(--fg-70); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; padding: 4px 9px; font-family: inherit; cursor: pointer; }
+  .density-toggle:hover { border-color: var(--fg-30); }
+  .density-toggle.on { border-color: var(--accent); color: var(--fg); background: rgba(255,154,118,.08); }
+  /* Compact density · tightens the thread for daily-driver scanning (demo W8) */
+  body.density-compact .panel { padding: 8px 11px; margin-bottom: 8px; }
+  body.density-compact .tc-card { padding: 5px 9px; }
+  body.density-compact .tc-out, body.density-compact .output { padding: 4px 8px; font-size: 10px; }
+  body.density-compact .conv-turn { padding: 6px 0; }
+  body.density-compact .conv-body { font-size: 12px; }
+  body.density-compact .artifact-card { margin-bottom: 7px; }
+  body[data-persona="pm"] .p-eng, body[data-persona="designer"] .p-eng { display: none; }
+  /* Per-role granularity · PM wants decisions/outcomes (hide the technical
+     request-flow); Designer wants the visual flow (hide the data tables). */
+  body[data-persona="pm"] .p-flow { display: none; }
+  body[data-persona="designer"] .p-data { display: none; }
+  /* User-override result line (E-03 real flow) */
+  .override-result { margin-top: 8px; font-size: 11.5px; color: var(--fg-60); }
+  .override-result .ok { color: var(--allow); margin-right: 4px; }
+  .override-result code { background: var(--bg-2,#1a1a1f); padding: 1px 5px; border-radius: 3px; color: var(--accent); font-size: 10.5px; }
+  /* Structured artifacts · comparison / mock / pick (demo v12 parity) */
+  .artifact-card { margin-bottom: 12px; }
+  .artifact-h { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); margin-bottom: 6px; }
+  .art-cmp { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; font-size: 11px; }
+  .art-cmp .hd { background: var(--bg-2,#1a1a1f); color: var(--fg-60); font-family: var(--mono); font-size: 10px; padding: 6px 8px; font-weight: 600; }
+  .art-cmp .rl { background: var(--bg-1,#141418); color: var(--fg-50); font-family: var(--mono); font-size: 10px; padding: 6px 8px; }
+  .art-cmp .cell { background: var(--bg,#0f0f12); color: var(--fg-70); padding: 6px 8px; }
+  .art-cmp .cell .pick { color: var(--allow); }
+  .art-cmp .cell .meh { color: var(--warn,#e0b341); }
+  .art-mock { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
+  .art-mock-head { display: flex; align-items: center; background: var(--bg-2,#1a1a1f); padding: 6px 10px; font-family: var(--mono); font-size: 10.5px; }
+  .art-mock-head .status { color: var(--warn,#e0b341); }
+  .art-mock-head .ct { margin-left: auto; color: var(--fg-40); font-size: 10px; }
+  .art-mock-body { padding: 10px 12px; font-family: var(--mono); font-size: 11px; color: var(--fg-70); white-space: pre; overflow-x: auto; }
+  .art-mock-body .jk { color: var(--fg-50); }
+  .art-mock-body .js { color: var(--allow); }
+  .art-mock-body .jn { color: var(--warn,#e0b341); }
+  .art-pick { border-left: 2px solid var(--accent); background: linear-gradient(90deg, rgba(255,154,118,0.05), transparent); border-radius: 0 6px 6px 0; padding: 10px 12px; margin-bottom: 12px; }
+  .art-pick .k { color: var(--accent); font-family: var(--mono); font-size: 11.5px; font-weight: 600; margin-bottom: 5px; }
+  .art-pick .what { color: var(--fg-80); font-size: 12px; line-height: 1.5; margin-bottom: 5px; }
+  .art-pick .why { color: var(--fg-50); font-size: 11.5px; line-height: 1.5; }
+  /* Benchmark chart · horizontal bars (demo v12 .bench) */
+  .art-bench { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; font-size: 11px; }
+  .art-bench .bl { font-family: var(--mono); color: var(--fg-50); min-width: 96px; font-size: 10.5px; }
+  .art-bench .bb { flex: 1; height: 8px; background: var(--bg-2,#1a1a1f); border-radius: 4px; overflow: hidden; }
+  .art-bench .bf { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
+  .art-bench .bf.allow { background: var(--allow); }
+  .art-bench .bf.warn { background: var(--warn,#e0b341); }
+  .art-bench .bv { font-family: var(--mono); color: var(--fg-70); min-width: 56px; text-align: right; font-size: 10.5px; }
+  /* Verifier severity checklist · ✓/⚠ per check */
+  .art-checklist { display: flex; flex-direction: column; gap: 1px; }
+  .art-check { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; border-top: 1px solid rgba(42,42,50,.5); font-size: 12px; }
+  .art-check:first-child { border-top: none; }
+  .art-check .ci { color: var(--allow); flex-shrink: 0; font-size: 12px; }
+  .art-check.warn .ci { color: var(--warn,#e0b341); }
+  .art-check .cl { color: var(--fg-80); }
+  .art-check .cn { color: var(--fg-40); font-family: var(--mono); font-size: 10.5px; margin-left: auto; text-align: right; }
+  /* Sequence diagram · inline SVG · var() resolves in CSS rules, never in SVG
+     presentation attributes — so every fill/stroke is classed, not inlined. */
+  .art-seq { overflow-x: auto; padding: 2px 0; }
+  .seq-svg { display: block; max-width: 100%; }
+  .seq-svg .ll { stroke: var(--border); stroke-dasharray: 3 3; }
+  .seq-svg .box { fill: var(--bg-2,#1a1a1f); stroke: var(--border); }
+  .seq-svg .at { fill: var(--fg-80); }
+  .seq-svg .msg { stroke: var(--fg-50); fill: none; }
+  .seq-svg .msg.ret { stroke: var(--fg-40); stroke-dasharray: 4 3; }
+  .seq-svg .msg.allow { stroke: var(--allow); }
+  .seq-svg .msg.warn { stroke: var(--warn,#e0b341); }
+  .seq-svg .mt { fill: var(--fg-60); }
+  .seq-svg .mt.allow { fill: var(--allow); }
+  .seq-svg .mt.warn { fill: var(--warn,#e0b341); }
+  .seq-svg .ah { fill: var(--fg-50); }
+  .seq-svg .ah-allow { fill: var(--allow); }
+  .seq-svg .ah-warn { fill: var(--warn,#e0b341); }
+  .seq-svg .ah-ret { fill: var(--fg-40); }
+  /* Multi-speaker conversation · me + team + agents (demo v12 .turn/.speaker) */
+  .conv-turn { padding: 9px 0; border-top: 1px solid rgba(42,42,50,.5); }
+  .conv-turn:first-child { border-top: none; }
+  .conv-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
+  .conv-name { font-size: 12px; font-weight: 600; color: var(--fg-80); }
+  .conv-ts { font-family: var(--mono); font-size: 10px; color: var(--fg-30); margin-left: auto; }
+  .conv-body { font-size: 13px; color: var(--fg-80); line-height: 1.55; padding-left: 25px; }
+  .conv-body .at-route { color: var(--accent); font-family: var(--mono); font-size: 12px; }
+  .conv-body .route-line { color: var(--fg-50); font-size: 12px; }
+  .conv-body .route-line .ab { vertical-align: middle; margin: 0 3px; }
+
+  /* Unified timeline (task #51) · human/agent tier chips + inline collapsed
+     tool events + emergent section dividers. Reuses .conv-* + .ab. */
+  .conv-tier { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--fg-50); }
+  .conv-turn.is-human .conv-tier { color: var(--fg-80); border-color: rgba(255,255,255,.18); }
+  .conv-turn.is-human { background: rgba(255,255,255,.012); border-radius: 8px; }
+  .tl-div { display: flex; align-items: center; gap: 9px; margin: 15px 0 8px; }
+  .tl-verb { font-family: var(--mono); font-size: 10px; letter-spacing: .03em; color: var(--fg-70); background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
+  .tl-cnt { font-family: var(--mono); font-size: 9.5px; color: var(--fg-30); white-space: nowrap; }
+  .tl-ln { flex: 1; height: 1px; background: var(--border); }
+  .tl-acts { padding-left: 25px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
+  .tl-evt { font-family: var(--mono); font-size: 11px; }
+  .tl-evt > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px; color: var(--fg-50); }
+  .tl-evt > summary::-webkit-details-marker { display: none; }
+  .tl-evt > summary:hover { color: var(--fg-70); border-color: var(--fg-30); }
+  .tl-evt .tl-caret { color: var(--fg-30); transition: transform .12s; font-size: 9px; }
+  .tl-evt[open] .tl-caret { transform: rotate(90deg); }
+  .tl-evt .tl-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .tl-evt .tl-dur { color: var(--fg-30); }
+  .tl-evt .tl-badge { font-size: 8.5px; padding: 1px 6px; border-radius: 4px; margin-left: auto; }
+  .tl-evt .tl-lbl + .tl-badge { margin-left: auto; }
+  .tl-evt .tl-badge.allow { color: var(--allow); background: rgba(52,208,88,.12); }
+  .tl-evt .tl-badge.block { color: #e5534b; background: rgba(229,83,75,.14); }
+  .tl-evt .tl-badge.clean { color: var(--accent); background: rgba(255,154,118,.14); }
+  .tl-evt.block > summary { border-color: rgba(229,83,75,.35); }
+  .tl-out { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); white-space: pre-wrap; padding: 7px 10px 2px 20px; }
+  /* Agent's own words (kind:'say') · the "watch it work" reasoning, in the agent's voice */
+  .tl-say { display: flex; gap: 9px; align-items: flex-start; margin: 9px 0; }
+  .tl-say .ab { margin-top: 2px; }
+  .tl-say-text { flex: 1; min-width: 0; font-size: 13px; color: var(--fg-80); line-height: 1.5; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
 
   .panel {
     border: 1px solid var(--border); border-radius: 8px;
     padding: 12px 14px; margin-bottom: 12px;
   }
   .panel-title { font-family: var(--mono); font-size: 10px; color: var(--fg-40); text-transform: uppercase; margin-bottom: 8px; }
+  /* Observed (host) sessions — the coding agents codehere watches in your own
+     terminal · distinct from spawned tasks below. Proves the INWARD axis:
+     every agent, even the one you're talking to right now, is a member. */
+  .obs-strip { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; background: linear-gradient(180deg, rgba(255,154,118,0.04), transparent); }
+  .obs-head { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--fg-60); margin-bottom: 2px; }
+  .obs-head .eye { opacity: 0.7; }
+  .obs-head b { color: var(--fg-80); font-weight: 600; }
+  .obs-sub { font-size: 10.5px; color: var(--fg-40); margin-bottom: 9px; }
+  .obs-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-top: 1px solid var(--border); font-size: 11.5px; cursor: pointer; border-radius: 5px; transition: background 0.12s; }
+  .obs-row:first-of-type { border-top: none; }
+  .obs-row:hover { background: rgba(255,154,118,0.06); }
+  .obs-id { font-family: var(--mono); color: var(--accent); font-size: 11px; min-width: 66px; }
+  .obs-mix { color: var(--fg-50); flex: 1; font-family: var(--mono); font-size: 10.5px; }
+  .obs-dur { color: var(--fg-40); font-size: 10.5px; }
+  .obs-live { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+  .obs-live.live { background: var(--allow); animation: cb-blink 1.4s ease infinite; }
+  .obs-live.recent { background: var(--warn,#e0b341); }
+  .obs-live.idle { background: var(--fg-30); }
+  .obs-badge { font-size: 9.5px; text-transform: uppercase; font-family: var(--mono); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.3px; }
+  .obs-badge.low { color: var(--allow); border: 1px solid color-mix(in srgb, var(--allow) 40%, transparent); }
+  .obs-badge.medium { color: var(--warn, #e0b341); border: 1px solid color-mix(in srgb, var(--warn, #e0b341) 40%, transparent); }
+  .obs-badge.high { color: var(--block); border: 1px solid color-mix(in srgb, var(--block) 40%, transparent); }
+  .obs-blocked { color: var(--block); font-size: 10.5px; font-family: var(--mono); }
+  /* Host-session thread · tool-call timeline */
+  .obs-timeline { display: flex; flex-direction: column; }
+  .obs-call { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 11.5px; }
+  .obs-call:first-child { border-top: none; }
+  .obs-call.is-block { background: color-mix(in srgb, var(--block) 8%, transparent); margin: 0 -8px; padding: 5px 8px; border-radius: 4px; border-top-color: transparent; }
+  .obs-call-time { font-family: var(--mono); color: var(--fg-30); font-size: 10px; min-width: 64px; flex-shrink: 0; }
+  .obs-call-tool { font-family: var(--mono); color: var(--accent); font-size: 10.5px; min-width: 56px; flex-shrink: 0; }
+  .obs-call-prev { color: var(--fg-60); font-family: var(--mono); font-size: 10.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .obs-call-tag { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
+  .obs-call-tag.ok { color: var(--fg-40); }
+  .obs-call-tag.warn { color: var(--warn, #e0b341); }
+  .obs-call-tag.block { color: var(--block); border: 1px solid color-mix(in srgb, var(--block) 40%, transparent); }
+  .obs-call-tag.crit { color: #fff; background: var(--block); }
+  /* Chain-flow · audit chain as connected nodes (demo v12 .chain-flow) */
+  .chain-flow-wrap { padding: 4px 0 14px; }
+  .chain-flow { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 4px 2px 8px; }
+  .cf-node { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-2,#1a1a1f); flex-shrink: 0; cursor: default; }
+  .cf-node .cf-seq { font-family: var(--mono); font-size: 7.5px; color: var(--fg-40); line-height: 1; }
+  .cf-node .cf-tool { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--fg-70); line-height: 1.2; }
+  .cf-node.ok { border-color: color-mix(in srgb, var(--allow) 35%, var(--border)); }
+  .cf-node.ok .cf-tool { color: var(--allow); }
+  .cf-node.block { border-color: var(--block); background: color-mix(in srgb, var(--block) 12%, var(--bg-2,#1a1a1f)); }
+  .cf-node.block .cf-tool { color: var(--block); }
+  .cf-node.crit { border-color: var(--block); background: var(--block); }
+  .cf-node.crit .cf-tool, .cf-node.crit .cf-seq { color: #fff; }
+  .cf-link { width: 14px; height: 2px; background: linear-gradient(90deg, var(--allow), color-mix(in srgb, var(--allow) 30%, transparent)); flex-shrink: 0; opacity: 0.6; }
+  .cf-gap { font-family: var(--mono); font-size: 11px; color: var(--fg-30); padding: 0 8px; flex-shrink: 0; letter-spacing: 1px; }
+  .cf-legend { font-family: var(--mono); font-size: 10px; color: var(--fg-40); }
+  /* Observed session · honest read-only affordance (no fake composer) */
+  .obs-readonly-note { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 8px; background: rgba(255,255,255,0.015); }
+  .obs-readonly-note .t { font-size: 12px; color: var(--fg-50); line-height: 1.5; margin-bottom: 10px; }
+  .obs-fork-btn { background: var(--accent); color: #1a1a1f; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; padding: 7px 12px; cursor: pointer; }
+  .obs-fork-btn:hover { filter: brightness(1.08); }
+  .obs-fork-btn:disabled { opacity: 0.6; cursor: default; }
+  /* Remote-control panel · drive a managed agent (inject into running turn) */
+  #control-panel:empty { display: none; }
+  .ctl-head { font-size: 11px; color: var(--fg-50); font-family: var(--mono); margin-bottom: 8px; }
+  .ctl-head .ag { color: var(--agent-codex); font-weight: 600; }
+  .ctl-head code { background: var(--bg-2,#1a1a1f); padding: 1px 5px; border-radius: 3px; color: var(--fg-70); }
+  .ctl-feed { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; max-height: 240px; overflow-y: auto; }
+  .ctl-evt { font-size: 12px; color: var(--fg-80); padding: 5px 9px; background: var(--bg-2,#1a1a1f); border-radius: 6px; border-left: 2px solid var(--agent-codex); }
+  .ctl-evt.dim { color: var(--fg-40); border-left-color: var(--border); font-style: italic; }
+  .ctl-composer { display: flex; gap: 7px; }
+  .ctl-composer input { flex: 1; background: var(--bg-2,#1a1a1f); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); padding: 7px 10px; font-size: 12px; }
+  .ctl-composer input:focus { outline: none; border-color: var(--accent); }
+  .ctl-composer button { background: var(--accent); color: #1a1a1f; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; padding: 7px 12px; cursor: pointer; }
+  /* Remote Control · honest live badge + steer chips + channel line. The badge
+     renders ONLY inside the real-channel branch (controlManagedAgent success) —
+     no live channel, no badge. Anti-screen-lie (the F-AGENT-SWITCHER class). */
+  .ctl-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(40,200,64,0.08); border: 1px solid rgba(40,200,64,0.35); border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--allow); font-weight: 600; margin-bottom: 10px; }
+  .ctl-badge .lv { width: 8px; height: 8px; border-radius: 50%; background: var(--allow); box-shadow: 0 0 7px var(--allow); animation: pulse 1.6s infinite; }
+  .ctl-steer { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
+  .ctl-steer .chip { font-size: 11.5px; color: var(--fg-70); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
+  .ctl-steer .chip:hover { border-color: var(--accent); color: var(--fg); }
+  .ctl-steer .chip.stop { border-color: rgba(255,95,87,0.4); color: var(--block); }
+  .ctl-channel { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--fg-40); margin-top: 8px; }
+  .ctl-channel .lv { width: 7px; height: 7px; border-radius: 50%; background: var(--allow); box-shadow: 0 0 7px var(--allow); }
+  .ctl-channel b { color: var(--allow); }
   .outcome-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-70); margin-bottom: 4px; }
   .outcome-item .check { color: var(--allow); }
   .outcome-item .cross { color: var(--block); }
@@ -157,6 +1326,135 @@ const SHARED_STYLES = `
   .verdict.verified { color: var(--allow); }
   .verdict.failed { color: var(--block); }
 
+  /* F-07 · verifier-agent panel (verified celebration / broken alert / partial warn) */
+  /* Verifier-agent as killer-moment step · accent border, bigger type,
+     soft glow · this is THE differentiator per claim_market_position. */
+  .verifier-killer-step {
+    border: 1px solid rgba(40,200,64,0.30) !important;
+    border-left-width: 3px !important;
+    background: linear-gradient(135deg, rgba(40,200,64,0.04), rgba(255,154,118,0.02)) !important;
+    box-shadow: 0 0 0 3px rgba(40,200,64,0.04);
+    padding: 12px 14px !important;
+  }
+  .verifier-killer-title { color: var(--allow); font-weight: 700; font-size: 12.5px; letter-spacing: 0.04em; font-family: var(--mono); }
+  .verifier-killer-body { color: var(--fg-90); font-size: 13px; line-height: 1.55; margin-top: 6px; padding-left: 0; }
+  .verifier-killer-body code { background: var(--bg-2); padding: 1px 5px; border-radius: 3px; font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
+
+  /* W-PASS payload diff coloring · old values red strike-through, new values green */
+  .wp-payload .key { color: var(--fg-50); }
+  .wp-payload .val { color: var(--allow); }
+  .wp-payload .from { color: var(--block); text-decoration: line-through; }
+  .wp-payload .arrow { color: var(--fg-40); margin: 0 4px; }
+  .wp-payload .added { color: var(--allow); }
+
+  /* W-PASS inline write-pass card · matches demo v12 lines 691-704 · blue
+   * accent (not orange) because writes to third-party systems are the rare
+   * moment when codehere mediates instead of just observes. Lives inline in
+   * the step timeline · primary button opens the modal for actual approval. */
+  .write-pass {
+    padding: 12px 14px; margin: 10px 0;
+    background: rgba(74,144,226,0.05);
+    border: 1px solid rgba(74,144,226,0.3);
+    border-left: 3px solid #4a90e2;
+    border-radius: 6px;
+  }
+  .write-pass .head {
+    display: flex; align-items: baseline; gap: 8px;
+    margin-bottom: 6px;
+    font-family: var(--mono); font-size: 10.5px;
+    color: #4a90e2; letter-spacing: 0.12em; text-transform: uppercase;
+  }
+  .write-pass h4 {
+    font-size: 13.5px; font-weight: 600; color: var(--fg);
+    margin: 2px 0 6px;
+  }
+  .write-pass .target { font-family: var(--mono); font-size: 11.5px; color: var(--fg-70); margin-bottom: 6px; }
+  .write-pass .target b { color: var(--fg); }
+  .write-pass .payload {
+    padding: 8px 11px; margin: 6px 0;
+    background: hsl(0 0% 9%); border: 1px solid var(--border);
+    border-radius: 4px;
+    font-family: var(--mono); font-size: 11px;
+    color: var(--fg-70); white-space: pre-wrap; line-height: 1.55;
+  }
+  .write-pass .payload .key { color: var(--fg-50); }
+  .write-pass .payload .val { color: var(--allow); font-weight: 600; }
+  .write-pass .payload .from { color: var(--block); text-decoration: line-through; }
+  .write-pass .payload .arrow { color: var(--fg-40); margin: 0 4px; }
+  .write-pass .actions {
+    display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
+  }
+  .write-pass button {
+    font-family: var(--mono); font-size: 11px; padding: 5px 11px;
+    border-radius: 4px; cursor: pointer;
+    border: 1px solid var(--border); background: transparent; color: var(--fg-70);
+    transition: filter 150ms, border-color 150ms, color 150ms;
+  }
+  .write-pass button.primary {
+    background: #4a90e2; color: #000; border-color: #4a90e2; font-weight: 600;
+  }
+  .write-pass button.primary:hover { filter: brightness(1.08); }
+  .write-pass button.secondary:hover { color: var(--fg); border-color: var(--fg-30); }
+
+  .verifier-panel { border-left: 2px solid var(--border); padding-left: 12px; }
+  .gotcha { border-left-color: var(--block); background: rgba(255,95,87,0.04); padding: 6px 10px; border-radius: 4px; margin-top: 4px; font-size: 12px; }
+  .verifier-panel.broken { border-left-color: var(--block); }
+  .verifier-panel.partial { border-left-color: var(--warn); }
+
+  /* Verified celebration · matches demo v12 .verified-block (lines 429-438).
+   * Centered card with gradient green bg, 38px ✓ badge, uppercase VERIFIED
+   * kicker, larger headline, mono stats line. Arrival animation slides up
+   * + shimmer sweep so the moment lands. The single most important moment
+   * in the detail view — the agent's claim survived verification. */
+  .verified-block {
+    padding: 18px 22px; text-align: center;
+    background: linear-gradient(135deg, rgba(40,200,64,0.08), rgba(40,200,64,0.02));
+    border: 1px solid rgba(40,200,64,0.35);
+    border-left: 3px solid var(--allow); border-radius: 8px;
+    margin: 8px 0; position: relative; overflow: hidden;
+    opacity: 0; transform: translateY(12px);
+    animation: verifiedIn 600ms cubic-bezier(0.16,1,0.3,1) 300ms forwards,
+               verifiedShimmer 1.2s ease 900ms;
+  }
+  @keyframes verifiedIn { to { opacity: 1; transform: translateY(0); } }
+  @keyframes verifiedShimmer {
+    0%   { background-image: linear-gradient(110deg, transparent 30%, rgba(40,200,64,0.18) 50%, transparent 70%); background-size: 250% 100%; background-position: -50% 0; background-repeat: no-repeat; }
+    100% { background-image: linear-gradient(110deg, transparent 30%, rgba(40,200,64,0.18) 50%, transparent 70%); background-size: 250% 100%; background-position: 150% 0; background-repeat: no-repeat; }
+  }
+  .verified-block .badge {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 38px; height: 38px; border-radius: 50%;
+    background: var(--allow); color: #000;
+    font-size: 18px; font-weight: 700;
+    margin-bottom: 8px; box-shadow: 0 0 0 4px rgba(40,200,64,0.15);
+  }
+  .verified-block .k {
+    font-family: var(--mono); font-size: 10.5px; color: var(--allow);
+    letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 5px;
+  }
+  .verified-block .what {
+    font-size: 18px; font-weight: 600; color: var(--fg);
+    margin-bottom: 6px; letter-spacing: -0.01em; line-height: 1.35;
+  }
+  .verified-block .stats {
+    color: var(--fg-50); font-size: 11.5px;
+    font-family: var(--mono); letter-spacing: 0.04em;
+  }
+  .verifier-summary { font-size: 13px; color: var(--fg-90); margin-bottom: 6px; }
+  .verifier-summary .v-icon { display: inline-block; margin-right: 6px; font-weight: bold; }
+  .verifier-panel.broken .v-icon { color: var(--block); }
+  .verifier-panel.verified .v-icon { color: var(--allow); }
+  .verifier-panel.partial .v-icon { color: var(--warn); }
+  .finding { padding: 8px 10px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,0.02); font-size: 12px; }
+  .finding-sev { font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 3px; margin-right: 6px; text-transform: uppercase; }
+  .finding-sev.fail { color: var(--block); background: rgba(255,95,87,0.10); }
+  .finding-sev.warn { color: var(--warn); background: rgba(254,188,46,0.10); }
+  .finding-sev.info { color: var(--fg-50); background: rgba(255,255,255,0.04); }
+  .finding-kind { font-family: var(--mono); font-size: 10px; color: var(--fg-40); margin-right: 6px; }
+  .finding-msg { color: var(--fg-90); }
+  .finding-detail { font-family: var(--mono); font-size: 11px; color: var(--fg-50); margin-top: 4px; padding-left: 18px; }
+  .finding-detail .label { color: var(--fg-30); margin-right: 4px; }
+
   details.collapsible { margin-bottom: 12px; }
   details.collapsible summary {
     font-family: var(--mono); font-size: 11px; color: var(--fg-50);
@@ -165,9 +1463,11 @@ const SHARED_STYLES = `
   details.collapsible summary:hover { color: var(--fg); }
   .turn { padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
   .turn.user { color: var(--accent); }
-  .turn.agent { color: var(--fg-70); }
-  .tc { font-size: 11px; padding: 4px 0; color: var(--fg-50); font-family: var(--mono); }
-  .tc code { color: var(--accent); }
+  .turn.assistant { color: var(--fg-70); }
+  .tc { font-size: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
+  .tc-label { color: var(--fg); font-weight: 500; }
+  .tc-output { margin: 4px 0 0; padding: 6px 10px; background: var(--bg-2); border-radius: 4px; font-family: var(--mono); font-size: 11px; color: var(--fg-50); white-space: pre-wrap; word-break: break-all; max-height: 100px; overflow: auto; }
+  .tc-dur { font-size: 10px; color: var(--fg-30); margin-left: 8px; }
 
   .input-area {
     border-top: 1px solid var(--border-soft); padding: 12px 20px;
@@ -178,9 +1478,35 @@ const SHARED_STYLES = `
     background: var(--bg-2); border: 1px solid var(--border);
     border-radius: 10px; padding: 10px 14px; max-width: 900px; margin: 0 auto;
   }
-  .input-bar:focus-within { border-color: rgba(255,154,118,0.4); }
+  /* Composer · typing affordance · matches demo v12 .composer-bar.typing
+   * (line 329). The border goes brand-orange the moment the user starts
+   * typing · the input visibly "wakes up." :focus-within handles the
+   * focus state, .typing handles the value-has-chars state. */
+  .input-bar:focus-within { border-color: var(--accent); }
+  .input-bar.typing { border-color: var(--accent); }
   .input-bar.warn { border-color: var(--warn); }
   .input-bar.block { border-color: var(--block); }
+  /* R10 · one canonical composer at a time. When detail-view is open the
+   * detail follow-up composer ("Ask a follow-up about this task...") is
+   * the only input that should accept text · hide the global main
+   * composer + kbd-hint. Pre-fix bug: BOTH composers stacked, both with
+   * "↳ Auto · ~$0.02" chips, user couldn't tell which one typed to which.
+   * Surfaced 2026-05-24 by Ega. */
+  body.detail-open > .app > .input-area { display: none; }
+  /* Keyboard hint · matches demo v12 lines 418-419. Subtle row of mono
+   * shortcuts under the composer · ↵ send · ⇧↵ newline · ⌘K focus.
+   * Discoverable without being noise. */
+  .kbd-hint {
+    font-family: var(--mono); font-size: 10px; color: var(--fg-30);
+    padding: 4px 0 0; max-width: 900px; margin: 0 auto;
+    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
+  }
+  .kbd-hint .item { display: inline-flex; gap: 5px; align-items: center; }
+  .kbd {
+    padding: 1px 5px; background: hsl(0 0% 12%);
+    border: 1px solid var(--border); border-radius: 3px;
+    color: var(--fg-50); font-size: 9px; line-height: 1.4;
+  }
   .input-ta {
     flex: 1; background: transparent; border: none;
     color: var(--fg); font-family: var(--sans); font-size: 13px;
@@ -188,7 +1514,10 @@ const SHARED_STYLES = `
   }
   .input-ta::placeholder { color: var(--fg-40); }
   .input-ta:disabled { color: var(--fg-30); }
-  .input-meta { font-family: var(--mono); font-size: 10px; color: var(--fg-40); white-space: nowrap; }
+  .input-meta { font-family: var(--mono); font-size: 10px; color: var(--fg-40); white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
+  .input-meta .pick-agent { color: var(--fg-70); cursor: pointer; padding: 2px 6px; border-radius: 3px; transition: background 0.15s; }
+  .input-meta .pick-agent:hover { background: rgba(255,255,255,0.05); color: var(--fg); }
+  .input-meta .cost-est { color: var(--allow); padding: 2px 6px; border-radius: 3px; background: rgba(40,200,64,0.06); }
   .send-btn {
     background: var(--accent); color: #000; border: none; border-radius: 6px;
     width: 28px; height: 28px; display: flex; align-items: center;
@@ -214,7 +1543,129 @@ const FILTERS = { all: s=>true, running: s=>['running','queued','paused','blocke
 
 function ms(t) { return t?'\\u2713':'\\u2715'; }
 function dur(ms) { if(!ms&&ms!==0)return''; const s=Math.floor(ms/1000); if(s<60)return s+'s'; return Math.floor(s/60)+'m '+(s%60)+'s'; }
-function title(p) { return (p||'Untitled').split('\\n')[0].slice(0,80); }
+// Strip internal context-injection prefixes from a prompt before showing it to
+// the user. Real spawns prepend "[graphify context: ...]\\n\\n" (and failover
+// adds "[Previous session context — ...]") — functional for the agent, noise
+// for the human. Found via real-execution dogfood #45: the prefix was becoming
+// the thread title. Display-only; the actual spawn prompt keeps the prefix.
+function displayPrompt(p) {
+  return String(p == null ? '' : p)
+    .replace(/^\\[graphify context:[\\s\\S]*?\\]\\s*\\n+/, '')
+    .replace(/^\\[Previous session context[\\s\\S]*?\\]\\s*\\n+/, '')
+    .replace(/^\\s+/, '');
+}
+function title(p) {
+  // Build a headline from whole CLAUSES (split on · — and sentence-enders),
+  // accumulating up to ~72 chars — so we never chop mid-phrase like the old
+  // "...200 rps · Lua INCR in". Trailing punctuation stripped per clause.
+  var s=(displayPrompt(p)||'Untitled').split('\\n')[0].trim();
+  var parts=s.split(/\\s*[\\u00B7\\u2014]\\s*|(?<=[.!?])\\s+/)
+    .map(function(x){return x.replace(/[.!?,;:\\s]+$/,'').trim();}).filter(Boolean);
+  var out='';
+  for(var i=0;i<parts.length;i++){
+    var nx=out?out+' \\u00B7 '+parts[i]:parts[i];
+    if(out && nx.length>72) break;
+    out=nx; if(out.length>=72) break;
+  }
+  out=(out||s).trim();
+  if(out.length>80) out=out.slice(0,80).replace(/\\s+\\S*$/,'')+'\\u2026';
+  return out||'Untitled';
+}
+
+// Per-agent identity badge — primitive #1 from AGENTIC_UX_FRAMEWORK.
+// Returns a squircle with the agent's initials in its identity color.
+// Recognized: claude-code, codex, aider, gemini, opencode, conductor, auto.
+function agentKey(id) {
+  const s = String(id||'').toLowerCase();
+  if (s === 'claude-code' || s.startsWith('claude')) return 'claude';
+  if (s === 'codex' || s.startsWith('codex')) return 'codex';
+  if (s === 'aider' || s.startsWith('aider')) return 'aider';
+  if (s === 'gemini' || s.startsWith('gemini')) return 'gemini';
+  if (s === 'opencode' || s.startsWith('opencode')) return 'opencode';
+  if (s === 'conductor') return 'conductor';
+  if (s === 'auto') return 'auto';
+  return 'auto';
+}
+function agentInitials(id) {
+  const k = agentKey(id);
+  if (k === 'claude') return 'CC';
+  if (k === 'codex') return 'CD';
+  if (k === 'aider') return 'AI';
+  if (k === 'gemini') return 'GM';
+  if (k === 'opencode') return 'OC';
+  if (k === 'conductor') return 'CH';
+  return '?';
+}
+function ab(id, size) {
+  const k = agentKey(id);
+  const sz = size === 'sm' ? ' sm' : (size === 'lg' ? ' lg' : '');
+  return '<span class="ab ' + k + sz + '">' + agentInitials(id) + '</span>';
+}
+function agentLabel(id) {
+  const k = agentKey(id);
+  if (k === 'claude') return 'Claude Code';
+  if (k === 'codex') return 'Codex';
+  if (k === 'aider') return 'Aider';
+  if (k === 'gemini') return 'Gemini';
+  if (k === 'opencode') return 'OpenCode';
+  if (k === 'conductor') return 'Conductor';
+  if (k === 'auto') return 'Auto';
+  return id || '?';
+}
+// Cost signal pill — primitive #2.
+function costPill(cents, paid) {
+  if (cents === 0 || cents === null || cents === undefined) {
+    return '<span class="cost-signal free">$0.00</span>';
+  }
+  const dollars = '$' + (cents/100).toFixed(cents < 10 ? 4 : 2);
+  return '<span class="cost-signal ' + (paid === false ? 'free' : 'paid') + '">' + dollars + '</span>';
+}
+// Inline code-card renderer · single-pass tokenizer · processes one token at
+// a time so substitution markup never gets re-matched on the next replace.
+// Lightweight intentionally · "looks like code", not a real lexer.
+function codeCard(path, snippet, lang) {
+  const ext = (lang || path.split('.').pop() || '').toLowerCase();
+  const langLabel = ext === 'ts' || ext === 'tsx' ? 'typescript'
+    : ext === 'js' || ext === 'jsx' ? 'javascript'
+    : ext === 'py' ? 'python'
+    : ext === 'rs' ? 'rust'
+    : ext === 'go' ? 'go'
+    : ext === 'lua' ? 'lua'
+    : (ext || 'text');
+  function esc(s){ return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  const KW = /^(const|let|var|function|return|if|else|for|while|import|export|from|class|extends|new|await|async|throw|try|catch|finally|of|in|typeof|null|true|false|this|interface|type|public|private|readonly|static|enum|as)\\b/;
+  const TP = /^(string|number|boolean|void|any|unknown|Promise|Array|Record|Map|Set|Request|Response|NextFunction)\\b/;
+  // Priority alternation · line-comment / single-quote string / double-quote string / number / identifier.
+  const TOKEN = /^(\\/\\/[^\\n]*|'(?:\\\\.|[^'\\\\])*'|"(?:\\\\.|[^"\\\\])*"|\\d+(?:\\.\\d+)?|[A-Za-z_$][A-Za-z0-9_$]*)/;
+  function tokenize(line){
+    let out = '', i = 0;
+    while(i < line.length){
+      const rest = line.slice(i);
+      const m = TOKEN.exec(rest);
+      if(!m){ out += esc(rest[0]); i += 1; continue; }
+      const tok = m[0];
+      if(tok.charAt(0)==='/') out += '<span class="cm">'+esc(tok)+'</span>';
+      else if(tok.charAt(0)==='"' || tok.charAt(0)==='\\'') out += '<span class="str">'+esc(tok)+'</span>';
+      else if(/^\\d/.test(tok)) out += '<span class="num">'+esc(tok)+'</span>';
+      else if(KW.test(tok)) out += '<span class="kw">'+esc(tok)+'</span>';
+      else if(TP.test(tok)) out += '<span class="tp">'+esc(tok)+'</span>';
+      else if(line.charAt(i + tok.length) === '(') out += '<span class="fn">'+esc(tok)+'</span>';
+      else out += esc(tok);
+      i += tok.length;
+    }
+    return out;
+  }
+  const lines = String(snippet || '').split('\\n');
+  const body = lines.map(function(raw, i){
+    return '<span class="ln">'+String(i+1).padStart(2,' ')+'</span>'+tokenize(raw);
+  }).join('\\n');
+  const meta = lines.length + (lines.length===1?' line':' lines');
+  return '<div class="code-card">'
+    + '<div class="head"><span class="lang">'+langLabel+'</span>'
+    + '<span class="path">'+esc(path)+'</span>'
+    + '<span class="meta">'+meta+'</span></div>'
+    + '<pre>'+body+'</pre></div>';
+}
 function allS(d) { const sp=d.spawned||d.sessions||[], pe=d.persisted||[], seen=new Set(sp.map(s=>s.sessionId)); return [...sp,...pe.filter(p=>!seen.has(p.sessionId))]; }
 function cardActions(s) {
   const m={
@@ -242,19 +1693,116 @@ function findS(id) { const s=allS(_cached.tasks||{}); return s.find(x=>x.session
 function render() {
   if(_detail){ const t=findS(_detail); if(t)renderD(t); else{ _detail=null; renderL(); } }
   else renderL();
-  upCnt(); upBud(); upSq();
+  upCnt(); upBud(); upSq(); upWk(); upIdx();
+}
+
+// C-01 · first-run indexing banner · auto-show when session count < 3 +
+// only once per browser session (sessionStorage tracks the dismissal).
+function upIdx(){
+  const banner=document.getElementById('indexing-banner');
+  if(!banner)return;
+  try{
+    if(sessionStorage.getItem('codehere_indexing_dismissed')==='1'){banner.style.display='none'; return;}
+  }catch{}
+  const all=allS(_cached.tasks||{});
+  banner.style.display = all.length<3 ? 'block' : 'none';
+  if(all.length>=3){
+    try{sessionStorage.setItem('codehere_indexing_dismissed','1');}catch{}
+  }
+}
+
+// F-02 · cross-worktree alert · scan for any running session whose cwd
+// differs from the most-common cwd AND has been running > 5 minutes. Pulses
+// in the squad row · click to jump to that session's detail.
+function upWk(){
+  const all=allS(_cached.tasks||{});
+  const running=all.filter(x=>['running','queued','paused','blocked'].includes(x.status) && x.cwd);
+  const ae=document.getElementById('worktree-alert');
+  const at=document.getElementById('worktree-alert-text');
+  if(!ae||!at){return;}
+  if(running.length<2){ae.style.display='none'; window._wkTarget=null; return;}
+  // Pick the cwd that's most-common · everything else is "other"
+  const cwdCounts={};
+  for(const r of running) cwdCounts[r.cwd]=(cwdCounts[r.cwd]||0)+1;
+  let topCwd='', topN=0;
+  for(const k in cwdCounts) if(cwdCounts[k]>topN){topN=cwdCounts[k]; topCwd=k;}
+  const now=Date.now();
+  const oddOnes=running.filter(r=>r.cwd!==topCwd && (now-r.startedAt) > 5*60*1000);
+  if(!oddOnes.length){ae.style.display='none'; window._wkTarget=null; return;}
+  const t=oddOnes[0];
+  window._wkTarget=t.sessionId;
+  // Shorten cwd to its last path component for display
+  const short=String(t.cwd||'').split('/').filter(Boolean).slice(-1)[0] || t.cwd;
+  const mins=Math.floor((now-t.startedAt)/60000);
+  ae.style.display='inline-flex';
+  at.textContent='running '+mins+'m in '+short;
+}
+
+function fmtGap(ms){
+  // Two-line label · big "4h 38m later" + small relative-time sub
+  // ("≈ 5 hours" · "≈ 2 days"). Demo v12 lines 425-426 ·
+  // .time-gap .label b / .time-gap .label .sub. R10 retro 2026-05-24:
+  // earlier adjective sub ("between sessions") was banked as a
+  // "numbers over adjectives" violation · replaced with a real
+  // approximate delta so the gap reads as a measurement, not a feeling.
+  let main;
+  const m=Math.floor(ms/60000);
+  if(m<60) main = m+'m later';
+  else {
+    const h=Math.floor(m/60); const rm=m%60;
+    if(h<24) main = rm ? h+'h '+rm+'m later' : h+'h later';
+    else main = Math.floor(h/24)+'d later';
+  }
+  let sub;
+  const hours = ms / 3600000;
+  if(hours < 1) {
+    const mins = Math.round(ms/60000);
+    sub = '\\u2248 ' + mins + ' minute' + (mins===1?'':'s');
+  } else if(hours < 24) {
+    const h = Math.round(hours);
+    sub = '\\u2248 ' + h + ' hour' + (h===1?'':'s');
+  } else if(hours < 24*30) {
+    const days = Math.round(hours/24);
+    sub = '\\u2248 ' + days + ' day' + (days===1?'':'s');
+  } else {
+    const wks = Math.round(hours/(24*7));
+    sub = '\\u2248 ' + wks + ' week' + (wks===1?'':'s');
+  }
+  return '<b>'+main+'</b><span class="sub">'+sub+'</span>';
 }
 
 function renderL() {
   const c=document.getElementById('task-list'), all=allS(_cached.tasks||{});
   const fl=all.filter(FILTERS[_filter]||FILTERS.all);
   let html='';
+  // Pin demo-shape sessions (id prefix 'demo-') to the very top — they
+  // exist to demonstrate what the product does · always relevant.
+  const demo=fl.filter(x=>/^demo-/.test(x.sessionId||''));
+  const rest=fl.filter(x=>!/^demo-/.test(x.sessionId||''));
+  if(demo.length){
+    html+='<div class="section-label featured">Featured</div>';
+    for(const t of demo) html+=cardH(t);
+  }
   for(const g of STAT_ORDER){
-    const items=fl.filter(x=>aStat(x.status)===g||(g==='running'&&['running','queued'].includes(x.status))||(g==='failed'&&['crashed','killed','error'].includes(x.status)));
+    const items=rest.filter(x=>aStat(x.status)===g||(g==='running'&&['running','queued'].includes(x.status))||(g==='failed'&&['crashed','killed','error'].includes(x.status)));
     if(!items.length)continue;
     const label={running:'Running',queued:'Running',paused:'Paused',blocked:'Blocked',done:'Done',failed:'Failed',crashed:'Failed',killed:'Failed'}[g]||g;
     html+='<div class="section-label">'+label+'</div>';
-    for(const t of items)html+=cardH(t);
+    let prevTs=null;
+    for(const t of items){
+      // F-04 · time-gap separator · inject before this card when there's a
+      // > 2h gap between its startedAt and the previous card's. Skips for
+      // 'running' (still alive, no gap) and the first card (no predecessor).
+      const ts = t.startedAt || 0;
+      if(g!=='running' && prevTs!==null && ts>0 && prevTs>0){
+        const gap=Math.abs(prevTs-ts);
+        if(gap > 2*3600*1000){
+          html+='<div class="time-gap"><span class="line"></span><span class="label">'+fmtGap(gap)+'</span><span class="line"></span></div>';
+        }
+      }
+      html+=cardH(t);
+      prevTs=ts;
+    }
   }
   if(!html){
     const h={all:'No tasks yet. Type a task below to get started.',running:'No running tasks.',done:'No completed tasks.',failed:'No failed tasks.'};
@@ -263,12 +1811,77 @@ function renderL() {
   c.innerHTML=html;
 }
 
+function renderHostSessions(data){
+  const strip=document.getElementById('host-sessions-strip');
+  if(!strip)return;
+  const sessions=(data&&data.sessions)||[];
+  if(!sessions.length){ strip.style.display='none'; strip.innerHTML=''; return; }
+  function he(s){ return String(s).replace(/[&<>"]/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
+  function obsDur(ms){ if(!ms||ms<1000)return'just now'; const s=Math.floor(ms/1000); if(s<60)return s+'s'; const m=Math.floor(s/60); if(m<60)return m+'m'; const h=Math.floor(m/60); return h+'h '+(m%60)+'m'; }
+  function mix(tm){ return Object.entries(tm||{}).sort((a,b)=>b[1]-a[1]).slice(0,4).map(([k,v])=>he(k)+' '+v).join(' · '); }
+  // live/recent/idle from last-event age · so a session that ended hours ago
+  // stops claiming "observing" (honest · OPEN-HOST-SESSION-WEB-LIVE).
+  function liveState(ls){ const age=Date.now()-new Date(ls).getTime(); if(!(age>=0))return'idle'; if(age<120000)return'live'; if(age<3600000)return'recent'; return'idle'; }
+  function liveLabel(st){ return st==='live'?'live now':st==='recent'?'recent':'idle'; }
+  // Explain the badge in plain English from the actual data · a bare "MEDIUM"
+  // tells the user nothing about why. (per plain-English + no-screen-lies)
+  function riskWhy(s){
+    if(s.criticalCalls>0) return s.criticalCalls+' critical finding'+(s.criticalCalls===1?'':'s')+' · review';
+    if(s.blockedCalls>0) return s.blockedCalls+' call'+(s.blockedCalls===1?'':'s')+' blocked before running · review';
+    if(s.risk==='medium') return 'high-density session ('+s.totalCalls+' calls) · worth a glance if it ran unattended';
+    return 'clean · '+s.totalCalls+' calls, nothing blocked';
+  }
+  let rows='', liveN=0;
+  for(const s of sessions){
+    const st=liveState(s.lastSeen); if(st==='live')liveN++;
+    const blocked = s.blockedCalls>0 ? '<span class="obs-blocked" title="tool calls codehere blocked before they ran">'+s.blockedCalls+' blocked</span>' : '';
+    rows+='<div class="obs-row" onclick="showHostSession(\\''+he(s.shortId)+'\\')" title="open this session as a thread · see every tool call codehere observed">'
+      +'<span class="obs-live '+st+'" title="'+liveLabel(st)+'"></span>'
+      +'<span class="obs-id" title="'+he(s.sessionId)+'">'+he(s.shortId)+'</span>'
+      +'<span class="obs-mix">'+mix(s.toolMix)+'</span>'
+      +blocked
+      +'<span class="obs-dur">'+obsDur(s.durationMs)+'</span>'
+      +'<span class="obs-badge '+he(s.risk)+'" title="'+he(riskWhy(s))+'">'+he(s.risk)+'</span>'
+      +'</div>';
+  }
+  const n=sessions.length;
+  const liveTxt = liveN>0 ? ' ('+liveN+' live now)' : ' (none active right now)';
+  strip.innerHTML='<div class="obs-head"><span class="eye">&#128065;</span><span>codehere is observing <b>'+n+' coding-agent session'+(n===1?'':'s')+'</b> in your own terminal'+liveTxt+'</span></div>'
+    +'<div class="obs-sub">Spawned tasks appear below. These run in your shell · every tool call is scanned by the hook before it executes.</div>'
+    +rows;
+  strip.style.display='block';
+}
+
 function cardH(t) {
+  const he=s=>String(s==null?'':s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
   const s=st(t.status), steps=(t.steps||[]).length, files=t.artifacts?.files?.length??0, d=dur(t.durationMs||(t.completedAt?t.completedAt-t.startedAt:Date.now()-t.startedAt));
   const co=t.cost?t.cost.spent:null;
-  return '<div class="task-card" onclick="showD(\\''+t.sessionId+'\\')">'
-    +'<div class="card-row1">'+statIcon(s)+'<span class="card-title">'+title(t.prompt)+'</span>'+tagHtml(t.tags||[])+'<span class="card-agent">'+(t.agent||'?')+'</span></div>'
-    +'<div class="card-row2"><span>'+d+'</span>'+(co!==null?'<span>· $'+(co/100).toFixed(2)+'</span>':'')+'<span>· '+steps+' tools</span><span>· '+files+' files</span>'+verB(t.verification)+'</div>'
+  // Per-card outcome chip · ✓ Done · ⚠ Failed · ↻ Running · queued
+  let outcomeHtml='';
+  if(s==='done'||t.status==='completed'){
+    const tests=t.artifacts && t.artifacts.tests;
+    const passed=tests && tests.passed||0, failed=tests && tests.failed||0;
+    outcomeHtml = '<span class="card-outcome ok">✓ '+(failed>0?(failed+' failed'):(passed>0?passed+' passed':'shipped'))+'</span>';
+  } else if(['failed','error','crashed','killed'].includes(t.status)){
+    outcomeHtml = '<span class="card-outcome fail">✗ '+(t.stalledReason?'stopped':t.status)+'</span>';
+  } else if(s==='running'||t.status==='queued'||t.status==='paused'){
+    outcomeHtml = '<span class="card-outcome queued">↻ '+t.status+'</span>';
+  }
+  // Agent-tinted left border + pin demo session per its id pattern
+  const agentClass = 'agent-' + String(t.agent||'').toLowerCase().replace(/[^a-z0-9]/g,'-');
+  const pinClass = /^demo-/.test(t.sessionId||'') ? ' tc-pinned' : '';
+  const agentChip = '<span class="card-agent">' + ab(t.agent, 'sm') + agentLabel(t.agent) + '</span>';
+  // Meta line · drop noisy zeros · show only what's nonzero
+  const metaParts = [];
+  metaParts.push('<span>'+d+'</span>');
+  if(co!==null) metaParts.push('<span>· '+costPill(co)+'</span>');
+  if(steps>0) metaParts.push('<span>· '+steps+' step'+(steps===1?'':'s')+'</span>');
+  if(files>0) metaParts.push('<span>· '+files+' file'+(files===1?'':'s')+'</span>');
+  const stalledHtml = t.stalledReason ? '<div class="card-stalled" title="the watchdog stopped this task because the agent went silent">'+he(t.stalledReason)+'</div>' : '';
+  return '<div class="task-card '+agentClass+pinClass+'" onclick="showD(\\''+t.sessionId+'\\')">'
+    +'<div class="card-row1">'+statIcon(s)+'<span class="card-title" title="'+displayPrompt(t.prompt).replace(/"/g,'&quot;').slice(0,400)+'">'+title(t.prompt)+'</span>'+tagHtml(t.tags||[])+agentChip+'</div>'
+    +'<div class="card-row2">'+metaParts.join('')+verB(t.verification)+outcomeHtml+'</div>'
+    +stalledHtml
     +(cardActions(t.sessionId)?'<div class="card-row3">'+cardActions(t.sessionId)+'</div>':'')+'</div>';
 }
 
@@ -281,21 +1894,65 @@ function upCnt() {
 function upBud() {
   const p=_cached.pricing||_cached.tasks?.pricing;
   const e=document.getElementById('budget');
-  if(!p||!p.dailyBudgetCents){e.textContent='';e.className='budget';return;}
+  const banner=document.getElementById('budget-banner');
+  const bwhat=document.getElementById('budget-banner-what');
+  const bmsg=document.getElementById('budget-banner-msg');
+  if(!p||!p.dailyBudgetCents){
+    e.textContent='';e.className='budget';
+    if(banner) banner.style.display='none';
+    return;
+  }
   const d=p.dailyBudgetCents,s=p.spentTodayCents||0;
   e.textContent='$'+(s/100).toFixed(2)+'/$'+(d/100).toFixed(2);
   e.className='budget'+(s>=d?' block':s>=d*0.8?' warn':' safe');
   const ib=document.querySelector('.input-bar');
   if(ib){ib.className='input-bar'+(s>=d?' block':s>=d*0.8?' warn':'');}
+  // F-01 · budget threshold banner · only shows when crossing 80%
+  if(banner && bwhat && bmsg){
+    if(s>=d){
+      banner.style.display='block';
+      banner.className='budget-banner block';
+      bwhat.textContent='budget exhausted';
+      bmsg.textContent='daily cap $'+(d/100).toFixed(2)+' spent · paid spawns will block until tomorrow.';
+    } else if(s>=d*0.8){
+      banner.style.display='block';
+      banner.className='budget-banner';
+      bwhat.textContent='budget threshold';
+      bmsg.textContent='$'+(s/100).toFixed(2)+' of $'+(d/100).toFixed(2)+' spent today · paid spawns require confirm.';
+    } else {
+      banner.style.display='none';
+    }
+  }
 }
 
 function upSq() {
-  const d=_cached.readiness||{}, a=d.agents||[], auto=d.auto?[{id:'auto',label:'Auto (Conductor)',state:d.auto.state}]:[], all=[...auto,...a];
+  const d=_cached.readiness||{}, a=d.agents||[], auto=d.auto?[{id:'auto',label:'Auto',state:d.auto.state}]:[], all=[...auto,...a];
   const e=document.getElementById('squad');
-  e.innerHTML=all.map(x=>{const r=agentS(x.state),n=x.label||x.name||x.id||'?';return'<span class="squad-agent"><span class="squad-dot '+r+'"></span>'+n+'</span>';}).join('');
+  // Per-agent identity badge in the squad row so vendor diversity is visible at a glance.
+  e.innerHTML=all.map(x=>{
+    const r=agentS(x.state);
+    const tip=agentStateTip(x.state);
+    const badge = x.id === 'auto' ? '<span class="squad-dot '+r+'"></span>' : ab(x.id, 'sm');
+    const n = agentLabel(x.id) || x.label || x.name || x.id || '?';
+    const dotAfter = x.id === 'auto' ? '' : '<span class="squad-dot '+r+'"></span>';
+    const setupTag = r==='setup' ? '<span class="squad-setup">needs setup</span>' : '';
+    return '<span class="squad-agent" title="'+tip.replace(/"/g,'&quot;')+'">'+badge+' '+n+' '+dotAfter+setupTag+'</span>';
+  }).join('');
   if(!all.length)e.innerHTML='<span style="color:var(--fg-40)">No agents configured</span>';
 }
-function agentS(state){if(!state||state==='error')return'offline';if(state==='installed'||state==='ready')return'ready';return'busy';}
+// Map readiness state → dot class. 'setup' is distinct from 'busy': busy means
+// actively working a task, setup means installed/known but can't run until the
+// user does something (auth, key, install). Conflating them was a screen lie —
+// a dead-without-setup agent looked like it was working (dogfood 2026-05-27 #4).
+function agentS(state){if(!state||state==='error')return'offline';if(state==='installed'||state==='ready')return'ready';if(state==='needs_install'||state==='needs_auth'||state==='billed_key_required')return'setup';return'busy';}
+function agentStateTip(state){
+  if(state==='ready'||state==='installed')return'ready · can run now';
+  if(state==='needs_install')return'needs setup · not installed on this machine';
+  if(state==='needs_auth')return'needs setup · sign in / add credentials first';
+  if(state==='billed_key_required')return'needs setup · requires a billed API key';
+  if(!state||state==='error')return'offline';
+  return'busy · working on a task';
+}
 
 function setFilter(f){
   _filter=f;
@@ -309,65 +1966,1223 @@ function showD(id){
   if(!t){_detail=null;return;}
   document.getElementById('task-list-view').style.display='none';
   document.getElementById('task-detail-view').style.display='block';
+  // R10 fix · when detail-view opens, hide the global main composer so the
+  // detail-view follow-up composer ("Ask a follow-up about this task...")
+  // is the ONLY input visible. Pre-fix · BOTH composers rendered stacked,
+  // both with "↳ Auto · ~$0.02" chips · user couldn't tell which one
+  // typed to which target. Surfaced 2026-05-24 by Ega.
+  document.body.classList.add('detail-open');
   renderD(t);
 }
 function hideD(){
   _detail=null;
+  if(_ctlPoll){ clearInterval(_ctlPoll); _ctlPoll=null; } _ctlId=null; // stop control polling
   document.getElementById('task-list-view').style.display='';
   document.getElementById('task-detail-view').style.display='none';
+  document.body.classList.remove('detail-open');
   render();
 }
 
+// Open an observed host session as a THREAD · the meta-dogfood payoff: the
+// coding-agent session running in your own terminal, with every tool call
+// codehere scanned, in order, hash-chained.
+async function showHostSession(shortId){
+  _detail='host:'+shortId;
+  document.getElementById('task-list-view').style.display='none';
+  document.getElementById('task-detail-view').style.display='block';
+  document.body.classList.add('detail-open');
+  const dv=document.getElementById('detail-view');
+  dv.innerHTML='<div class="detail-header"><span class="back-btn" onclick="hideD()">\\u2190 Back</span></div><div style="color:var(--fg-40);font-size:12px;padding:20px 0">loading observed session...</div>';
+  let d;
+  try{ d=await fetch('/api/host-sessions/'+encodeURIComponent(shortId)).then(x=>x.json()); }
+  catch(e){ dv.innerHTML='<div class="detail-header"><span class="back-btn" onclick="hideD()">\\u2190 Back</span></div><div style="color:var(--block);padding:20px 0">Could not load session.</div>'; return; }
+  if(!d||d.error){ dv.innerHTML='<div class="detail-header"><span class="back-btn" onclick="hideD()">\\u2190 Back</span></div><div style="color:var(--fg-40);padding:20px 0">'+he(d&&d.error||'No such session')+'</div>'; return; }
+  function he(s){ return String(s).replace(/[&<>"]/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
+  function ago(ts){ const m=Math.floor((Date.now()-new Date(ts).getTime())/60000); if(m<1)return'just now'; if(m<60)return m+'m ago'; const h=Math.floor(m/60); if(h<24)return h+'h ago'; return Math.floor(h/24)+'d ago'; }
+  function clock(ts){ try{ return new Date(ts).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit',second:'2-digit'}); }catch{return'';} }
+  const calls=d.calls||[];
+  // Tool-call timeline · one row per observed call · time · tool · preview · state
+  // No phase narrative here · raw terminal tool calls don't carry lifecycle
+  // semantics (a dev session building codehere mentions "audit"/"build"/"test"
+  // as domain words, so the classifier lies). Phases are a spawned-task concept.
+  // Instead, group calls by tool so the timeline reads as activity, not noise.
+  let timeline='';
+  for(const c of calls){
+    const tag = c.criticalFindings>0 ? '<span class="obs-call-tag crit">critical</span>'
+      : c.blocked ? '<span class="obs-call-tag block">blocked</span>'
+      : c.findings>0 ? '<span class="obs-call-tag warn">'+c.findings+' finding'+(c.findings===1?'':'s')+'</span>'
+      : '<span class="obs-call-tag ok">scanned</span>';
+    timeline+='<div class="obs-call'+(c.blocked?' is-block':'')+'">'
+      +'<span class="obs-call-time">'+he(clock(c.timestamp))+'</span>'
+      +'<span class="obs-call-tool">'+he(c.toolName||'')+'</span>'
+      +'<span class="obs-call-prev">'+(c.preview?he(c.preview):'<span style="color:var(--fg-30)">\\u2014</span>')+'</span>'
+      +tag
+      +'</div>';
+  }
+  // Tool mix summary · gives the observed thread a real "outcome"-style header
+  // (what KIND of work happened) without inventing phases that aren't there.
+  const _mix={};
+  for(const c of calls){ const k=c.toolName||'?'; _mix[k]=(_mix[k]||0)+1; }
+  const _mixStr=Object.entries(_mix).sort((a,b)=>b[1]-a[1]).map(([k,v])=>he(k)+' '+v).join(' · ');
+  const chainOk=d.chainValid;
+  // Chain-flow · the real audit chain as connected nodes (demo v12 .chain-flow,
+  // gap 4.8). Condensed to KEY events: the first/last few + every blocked or
+  // critical call (never hide those), with a gap marker for the elided middle.
+  // Each node is a real chain entry — seq + tool + state — linked left→right.
+  function chainFlow(cs){
+    if(!cs.length) return '';
+    function he(s){ return String(s==null?'':s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
+    function init(tool){ return (String(tool||'?').replace(/[^A-Za-z]/g,'')[0]||'?').toUpperCase(); }
+    var keep=new Set();
+    for(var i=0;i<cs.length;i++){ if(i<2||i>=cs.length-2||cs[i].blocked||cs[i].criticalFindings>0) keep.add(i); }
+    var nodes='';
+    var prevKept=-1;
+    for(var j=0;j<cs.length;j++){
+      if(!keep.has(j)) continue;
+      if(prevKept>=0 && j-prevKept>1) nodes+='<span class="cf-gap" title="'+(j-prevKept-1)+' more scanned">···</span>';
+      else if(prevKept>=0) nodes+='<span class="cf-link"></span>';
+      var c=cs[j];
+      var cls=c.criticalFindings>0?'crit':c.blocked?'block':'ok';
+      var t=c.preview?he(c.preview).slice(0,60):he(c.toolName||'');
+      nodes+='<span class="cf-node '+cls+'" title="'+(c.seq!=null?'#'+c.seq+' · ':'')+he(c.toolName||'')+' · '+t+'">'
+        +'<span class="cf-seq">'+(c.seq!=null?'#'+c.seq:'')+'</span><span class="cf-tool">'+init(c.toolName)+'</span></span>';
+      prevKept=j;
+    }
+    return '<div class="chain-flow-wrap"><div class="chain-flow">'+nodes+'</div>'
+      +'<div class="cf-legend">spawn → latest · '+cs.length+' calls · each node is a hash-linked entry</div></div>';
+  }
+  const chainHtml='<div class="panel"><div class="panel-title">Audit chain</div>'
+    +chainFlow(calls)
+    +'<div class="verified-block" style="padding:14px 0">'
+    +'<div class="badge" style="background:'+(chainOk?'var(--allow)':'var(--block)')+'">'+(chainOk?'\\u2713':'\\u2717')+'</div>'
+    +'<div class="k">'+(chainOk?'hash chain verified':'chain broken')+'</div>'
+    +'<div class="what">'+d.chainEntries+' entries · SHA-256 linked · every tool call in this session is tamper-evident</div>'
+    +'</div></div>';
+  const oHtml='<div class="panel"><div class="panel-title">Observed</div>'
+    +'<div class="outcome-item"><span class="check">'+ms(true)+'</span> '+d.totalCalls+' tool calls scanned by the hook</div>'
+    +(d.blockedCalls>0?'<div class="outcome-item"><span class="cross">'+ms(false)+'</span> '+d.blockedCalls+' blocked before running</div>':'<div class="outcome-item"><span class="check">'+ms(true)+'</span> nothing blocked</div>')
+    +(d.criticalCalls>0?'<div class="outcome-item"><span class="cross">'+ms(false)+'</span> '+d.criticalCalls+' critical finding'+(d.criticalCalls===1?'':'s')+'</div>':'')
+    +(_mixStr?'<div class="outcome-item" style="color:var(--fg-50);font-family:var(--mono);font-size:11px"><span class="pending">\\u2022</span> '+_mixStr+'</div>':'')
+    +'</div>';
+  dv.innerHTML='<div class="detail-header">'
+    +'<span class="back-btn" onclick="hideD()">\\u2190 Back</span>'
+    +'<div class="detail-title-wrap">'
+    +'<div class="detail-kicker">observed · runs in your terminal · read-only</div>'
+    +'<h1 class="detail-title">'+he(d.sessionId)+'</h1>'
+    +'</div></div>'
+    +'<div class="detail-meta"><span class="status-icon done"></span> last activity '+he(ago(calls.length?calls[calls.length-1].timestamp:Date.now()))+' · '+d.totalCalls+' calls</div>'
+    +oHtml+chainHtml
+    +'<div class="panel"><div class="panel-title">Tool calls ('+calls.length+')</div><div class="obs-timeline">'+timeline+'</div></div>'
+    // Honest interaction affordance · an observed session runs in the user's own
+    // terminal; codehere watches it read-only via the hook and cannot inject a
+    // prompt into it. So NO fake composer (that would be a screen-lie). Instead,
+    // an honest note + a real action: fork the context into a managed agent the
+    // user CAN drive from here.
+    +'<div class="obs-readonly-note">'
+    +'<div class="t">This session runs in your terminal. codehere observes it read-only — it can\\'t send a prompt back into your shell. Continue the work in a managed agent codehere CAN drive:</div>'
+    +'<button class="obs-fork-btn" id="ctl-open-btn" onclick="controlManagedAgent(\\''+he(d.sessionId)+'\\')">Continue in a managed agent →</button>'
+    +'<div id="control-panel"></div>'
+    +'</div>';
+}
+
+// Remote-control · open a codehere-managed agent (codex) and DRIVE it from here:
+// open a control session, then inject() messages into the running turn via the
+// daemon control endpoints. The observed terminal session stays read-only; this
+// is a real agent codehere owns end-to-end (turn/steer).
+let _ctlId=null, _ctlPoll=null;
+async function controlManagedAgent(sessionId){
+  const btn=document.getElementById('ctl-open-btn');
+  const panel=document.getElementById('control-panel');
+  if(!panel)return;
+  if(btn)btn.disabled=true, btn.textContent='opening managed agent…';
+  try{
+    const r=await fetch('/api/control/open',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({agent:'codex',prompt:'Continue the work from terminal session '+sessionId})}).then(x=>x.json());
+    if(!r.controlId){ if(btn)btn.disabled=false,btn.textContent='Continue in a managed agent →'; al('Control open failed: '+(r.error||'unknown')); return; }
+    _ctlId=r.controlId;
+    if(btn)btn.style.display='none';
+    // Honest "Remote Control · live" affordance — rendered ONLY here, after a
+    // real channel opened. data-verify-channel="live" lets /verify assert the
+    // badge can never exist without a live channel (anti-screen-lie invariant).
+    panel.innerHTML='<div class="ctl-badge" data-verify-unit="remote-control" data-verify-channel="live"><span class="lv"></span> Remote Control \\u00b7 live</div>'
+      +'<div class="ctl-head">managed agent \\u00b7 <span class="ag">codex</span> \\u00b7 thread <code>'+r.threadId+'</code> \\u00b7 steer it below</div>'
+      +'<div class="ctl-steer">'
+      +  '<span class="chip" data-steer="continue">\\u21b3 continue</span>'
+      +  '<span class="chip" data-steer="run the tests">run the tests</span>'
+      +  '<span class="chip" data-steer="show me the diff">show me the diff</span>'
+      +  '<span class="chip stop" data-steer="__stop">\\u23f9 stop steering</span>'
+      +'</div>'
+      +'<div class="ctl-feed" id="ctl-feed"></div>'
+      +'<div class="ctl-composer"><input id="ctl-input" placeholder="Steer this live session\\u2026 (goes to the real running agent)"/><button id="ctl-send">Send \\u2191</button></div>'
+      +'<div class="ctl-channel"><span class="lv"></span> <b>live channel attached</b> \\u00b7 steers recorded in audit chain \\u00b7 reachable from any device you\\'re signed in on</div>';
+    document.getElementById('ctl-send').onclick=ctlInject;
+    document.getElementById('ctl-input').addEventListener('keydown',e=>{ if(e.key==='Enter')ctlInject(); });
+    panel.querySelectorAll('.ctl-steer .chip').forEach(function(c){ c.onclick=function(){ var s=c.getAttribute('data-steer'); if(s==='__stop'){ctlStop();return;} var inp=document.getElementById('ctl-input'); if(inp){ inp.value=s; ctlInject(); } }; });
+    ctlPollEvents();
+    _ctlPoll=setInterval(ctlPollEvents,1500);
+  }catch(e){ if(btn)btn.disabled=false,btn.textContent='Continue in a managed agent →'; al('Network error: '+e.message); }
+}
+async function ctlInject(){
+  const inp=document.getElementById('ctl-input'); if(!inp||!_ctlId)return;
+  const msg=inp.value.trim(); if(!msg)return;
+  inp.value='';
+  try{ const r=await fetch('/api/control/'+_ctlId+'/inject',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message:msg})}).then(x=>x.json());
+    if(!r.accepted)al('Inject not accepted');
+    setTimeout(ctlPollEvents,300);
+  }catch(e){ al('Inject failed: '+e.message); }
+}
+// Stop steering from here. Honest scope: detaches the control channel (stops
+// polling + closes the panel). It does NOT claim to kill the remote process —
+// that would be an unverifiable overclaim. The badge disappears with the panel.
+function ctlStop(){
+  if(_ctlPoll){ clearInterval(_ctlPoll); _ctlPoll=null; }
+  _ctlId=null;
+  const panel=document.getElementById('control-panel');
+  if(panel)panel.innerHTML='<div class="ctl-evt dim">stopped steering \\u00b7 channel detached \\u00b7 the agent keeps running in its own session</div>';
+}
+async function ctlPollEvents(){
+  if(!_ctlId)return;
+  try{ const r=await fetch('/api/control/'+_ctlId+'/events').then(x=>x.json());
+    const feed=document.getElementById('ctl-feed'); if(!feed)return;
+    function he(s){ return String(s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
+    feed.innerHTML=(r.events||[]).map(e=>{ const it=(e.params||{}).item||{}; const t=it.text||it.command||it.type||e.method; return '<div class="ctl-evt">'+he(t)+'</div>'; }).join('')||'<div class="ctl-evt dim">agent working…</div>';
+  }catch{}
+}
+
+// ── Phase model · the demo v12 lifecycle spine ────────────────────────────
+// A thread reads as a phased narrative (research → build → ship → audit → live),
+// not a flat step list. Steps don't carry phase labels, so classify by the
+// dominant signal in the label/output. Order matters: test later phases first
+// so a "run tests" step lands in ship, not research.
+// Phase classifier · PHASE_ORDER / PHASE_META / stepPhase / classifySteps are
+// injected from the unit-tested module (thread-phase.ts) — one source of truth.
+// The \\bcode\\b bug that mislabeled read steps as BUILD is why this is no longer
+// inline-untested.
+${PHASE_CLASSIFIER_SRC}
+// Chapter-card divider between phases · demo v12 .chapter-card pattern.
+function chapterCard(prevPhase,nextPhase){
+  var prev=PHASE_META[prevPhase], next=PHASE_META[nextPhase];
+  return '<div class="chapter-divider">'
+    +(prev?'<span class="ch-prev">\\u2713 '+prev.done+'</span>':'<span class="ch-prev"></span>')
+    +'<span class="ch-line"></span>'
+    +'<span class="ch-next">Phase '+next.n+' of 5 \\u00B7 <b>'+next.label+'</b></span>'
+    +'</div>';
+}
+
+// Structured artifacts · render the comparison table / response mock /
+// recommendation pick that an agent produces, from a typed data array — NOT
+// hand-authored HTML. The demo v12 weaves these into Phase 1; here they render
+// from t.artifacts.structured[] so the primitive is real (seeded today, real
+// adapter output later · demo-synth pattern).
+function renderArtifacts(arr){
+  if(!Array.isArray(arr)||!arr.length)return'';
+  function he(s){ return String(s==null?'':s).replace(/[&<>"]/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
+  function tintJson(raw){
+    return he(raw)
+      .replace(/&quot;([^&]*?)&quot;(\\s*:)/g, '<span class="jk">&quot;$1&quot;</span>$2')
+      .replace(/:\\s*&quot;([^&]*?)&quot;/g, ': <span class="js">&quot;$1&quot;</span>')
+      .replace(/:\\s*(-?\\d+(?:\\.\\d+)?)/g, ': <span class="jn">$1</span>');
+  }
+  let out='<div class="panel"><div class="panel-title">Artifacts produced</div>';
+  for(const a of arr){
+    if(a.type==='comparison'){
+      const cols=a.columns||[];
+      let g='<div class="art-cmp" style="grid-template-columns:130px repeat('+cols.length+',1fr)">';
+      g+='<div class="hd"></div>'+cols.map(c=>'<div class="hd">'+he(c)+'</div>').join('');
+      for(const r of (a.rows||[])){
+        g+='<div class="rl">'+he(r.label)+'</div>';
+        for(const cell of (r.cells||[])){
+          const mk = cell.mark==='pick'?'pick':cell.mark==='meh'?'meh':'';
+          g+='<div class="cell">'+(mk?'<span class="'+mk+'">'+he(cell.text)+'</span>':he(cell.text))+'</div>';
+        }
+      }
+      g+='</div>';
+      out+='<div class="artifact-card p-data">'+(a.title?'<div class="artifact-h">'+he(a.title)+'</div>':'')+g+'</div>';
+    } else if(a.type==='mock'){
+      out+='<div class="art-mock">'
+        +'<div class="art-mock-head"><span class="status">'+he(a.status||'')+'</span>'+(a.contentType?'<span class="ct">'+he(a.contentType)+'</span>':'')+'</div>'
+        +'<div class="art-mock-body">'+tintJson(a.body||'')+'</div>'
+        +'</div>';
+    } else if(a.type==='pick'){
+      out+='<div class="art-pick">'
+        +'<div class="k">'+he(a.title||'')+'</div>'
+        +(a.what?'<div class="what">'+he(a.what)+'</div>':'')
+        +(a.why?'<div class="why">'+he(a.why)+'</div>':'')
+        +'</div>';
+    } else if(a.type==='bench'){
+      // Benchmark chart · horizontal bars · demo v12 .bench (phase audit 2.10)
+      let rows=(a.rows||[]).map(function(r){
+        const mk=r.mark==='allow'?' allow':r.mark==='warn'?' warn':'';
+        const pct=Math.max(0,Math.min(100,Number(r.pct)||0));
+        return '<div class="art-bench"><span class="bl">'+he(r.label)+'</span>'
+          +'<span class="bb"><span class="bf'+mk+'" style="width:'+pct+'%"></span></span>'
+          +'<span class="bv">'+he(r.value)+'</span></div>';
+      }).join('');
+      out+='<div class="artifact-card">'+(a.title?'<div class="artifact-h">'+he(a.title)+'</div>':'')+rows+'</div>';
+    } else if(a.type==='checklist'){
+      // Verifier severity grid · ✓/⚠ per check · demo v12 (phase audit 4.4/3.3)
+      let items=(a.items||[]).map(function(it){
+        const ok=it.ok!==false;
+        return '<div class="art-check'+(ok?'':' warn')+'">'
+          +'<span class="ci">'+(ok?'\\u2713':'\\u26A0')+'</span>'
+          +'<span class="cl">'+he(it.label)+'</span>'
+          +(it.note?'<span class="cn">'+he(it.note)+'</span>':'')
+          +'</div>';
+      }).join('');
+      out+='<div class="artifact-card p-data">'+(a.title?'<div class="artifact-h">'+he(a.title)+'</div>':'')+'<div class="art-checklist">'+items+'</div></div>';
+    } else if(a.type==='sequence'){
+      // Sequence diagram · inline SVG · auto-layout actors + messages from a typed
+      // directive — NOT hand-authored SVG (demo v12 Artifact 2 · phase audit 1.13 · C-13).
+      const parts=(a.participants||[]).map(String);
+      const msgs=a.messages||[];
+      const n=parts.length;
+      if(n>=2){
+        const colW=148, padX=14, padTop=12, boxH=26, headGap=20, rowH=34, padBot=16, loopW=42;
+        const cx=i=>padX+74+colW*i;                 // center x of lifeline i
+        const w=padX*2+148+colW*(n-1)+loopW;        // right margin covers a trailing self-loop
+        const topY=padTop+boxH;
+        const h=topY+headGap+rowH*msgs.length+padBot;
+        const cls=m=>m.mark==='allow'?'allow':m.mark==='warn'?'warn':m.ret?'ret':'';
+        const head=m=>m.mark==='allow'?'ah-allow':m.mark==='warn'?'ah-warn':m.ret?'ah-ret':'ah';
+        let svg='<svg class="seq-svg" viewBox="0 0 '+w+' '+h+'" width="'+w+'" height="'+h+'" preserveAspectRatio="xMidYMin meet">';
+        svg+='<defs>';
+        ['ah','ah-allow','ah-warn','ah-ret'].forEach(function(id){
+          svg+='<marker id="seq-'+id+'" markerWidth="9" markerHeight="9" refX="6.5" refY="3.5" orient="auto"><path class="'+id+'" d="M0,0 L7,3.5 L0,7 Z"/></marker>';
+        });
+        svg+='</defs>';
+        for(let i=0;i<n;i++){
+          const x=cx(i), bw=Math.max(76,parts[i].length*7+18);
+          svg+='<line class="ll" x1="'+x+'" y1="'+topY+'" x2="'+x+'" y2="'+(h-padBot)+'"/>';
+          svg+='<rect class="box" x="'+(x-bw/2)+'" y="'+padTop+'" width="'+bw+'" height="'+boxH+'" rx="5"/>';
+          svg+='<text class="at" x="'+x+'" y="'+(padTop+boxH/2+4)+'" text-anchor="middle" font-size="11" font-family="ui-monospace,monospace">'+he(parts[i])+'</text>';
+        }
+        msgs.forEach(function(m,mi){
+          const fi=typeof m.from==='number'?m.from:parts.indexOf(m.from);
+          const ti=typeof m.to==='number'?m.to:parts.indexOf(m.to);
+          if(fi<0||ti<0)return;
+          const y=topY+headGap+rowH*mi+rowH/2, x1=cx(fi), x2=cx(ti), c=cls(m), tc=(c==='allow'||c==='warn')?' '+c:'';
+          if(fi===ti){                              // self-message · small loop to the right
+            svg+='<path class="msg '+c+'" d="M'+x1+','+(y-5)+' h'+loopW+' v10 h-'+loopW+'" marker-end="url(#seq-'+head(m)+')"/>';
+            svg+='<text class="mt'+tc+'" x="'+(x1+loopW+5)+'" y="'+(y-8)+'" font-size="10" font-family="ui-monospace,monospace">'+he(m.label||'')+'</text>';
+          } else {
+            svg+='<line class="msg '+c+'" x1="'+x1+'" y1="'+y+'" x2="'+x2+'" y2="'+y+'" marker-end="url(#seq-'+head(m)+')"/>';
+            svg+='<text class="mt'+tc+'" x="'+((x1+x2)/2)+'" y="'+(y-6)+'" text-anchor="middle" font-size="10" font-family="ui-monospace,monospace">'+he(m.label||'')+'</text>';
+          }
+        });
+        svg+='</svg>';
+        out+='<div class="artifact-card p-flow">'+(a.title?'<div class="artifact-h">'+he(a.title)+'</div>':'')+'<div class="art-seq">'+svg+'</div></div>';
+      }
+    }
+  }
+  out+='</div>';
+  return out;
+}
+
+// Multi-speaker conversation · the demo v12 thread model · turns from the human
+// (me), other team members, and agents (claude-code/codex/aider/...) — each with
+// an avatar badge. A turn's speaker is an agent key, user/conductor, or a
+// human name. This is the thread spine, not a collapsed afterthought.
+function isAgentSpeaker(sp){
+  var s=String(sp||'').toLowerCase();
+  return /^(claude|codex|aider|gemini|opencode|conductor)/.test(s);
+}
+function speakerAvatar(sp,name){
+  if(isAgentSpeaker(sp)) return ab(sp);
+  var src=(name||sp||'?').trim();
+  var init=src.split(/\\s+/).map(function(w){return w[0]||'';}).join('').slice(0,2).toUpperCase()||'?';
+  return '<span class="ab user">'+init.replace(/[<>&]/g,'')+'</span>';
+}
+function speakerName(sp,name){
+  if(name) return name;
+  if(isAgentSpeaker(sp)) return agentLabel(sp);
+  return sp||'unknown';
+}
+function convHe(s){ return String(s==null?'':s).replace(/[&<>"]/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
+// One conversation row · reused by the conversation panel AND the unified
+// timeline so a turn looks identical wherever it appears.
+function renderTurn(u){
+  var sp=u.speaker||u.role||'assistant';
+  var body=convHe(u.content||u.body||'').replace(/@(claude-code|claude|codex|aider|gemini|opencode)/g,'<span class="at-route">@$1</span>');
+  var human=!isAgentSpeaker(sp);
+  return '<div class="conv-turn'+(human?' is-human':' is-agent')+'">'
+    +'<div class="conv-head">'+speakerAvatar(sp,u.name)+'<span class="conv-name">'+convHe(speakerName(sp,u.name))+'</span>'
+    +'<span class="conv-tier">'+(human?(sp==='user'?'you':'teammate'):'agent')+'</span>'
+    +(u.ts?'<span class="conv-ts">'+convHe(u.ts)+'</span>':'')+'</div>'
+    +'<div class="conv-body'+(u.routeLine?' route':'')+'">'+(u.routeLine?'<span class="route-line">'+body+'</span>':body)+'</div>'
+    +'</div>';
+}
+function renderConversation(turns){
+  if(!Array.isArray(turns)||!turns.length) return '';
+  return '<div class="panel"><div class="panel-title">Conversation</div>'+turns.map(renderTurn).join('')+'</div>';
+}
+// Unified timeline (task #51) · the conversation IS the spine, and the tool
+// activity is woven INTO it as inline, collapsed-by-default events (native
+// <details>, no JS), grouped by EMERGENT sections (segmentSteps — dynamic, not
+// a fixed pipeline). Turn timestamps are display strings and step times are
+// epoch (not clock-comparable), so we place the activity block right where
+// execution starts: after the first non-user turn (routing / first agent),
+// before that agent reports back. Reads correct for seeded dialogues and for
+// real single-agent runs (where turns are sparse and the steps dominate).
+function renderTimeline(t, wrapCtxUrls){
+  var turns=Array.isArray(t.turns)?t.turns:[];
+  var steps=(t.toolTrace||t.steps||[]);
+  if(!turns.length && !steps.length) return '';
+  function evtRow(z){
+    var raw=String(z.label||'');
+    // Write-pass · the one moment the human MUST act. Keep the rich primitive
+    // (Approve+send opens the write-pass modal) rather than collapsing it to a
+    // one-liner — collapsing would orphan the approval trigger.
+    if(/^\\s*w-?pass\\b|^\\s*write-pass\\b/i.test(raw)){
+      var parts=raw.split(/\\s*·\\s*/);
+      var wtitle=(parts[1]||raw||'write awaits').replace(/</g,'&lt;');
+      var wtail=(parts.slice(2).join(' · ')||(z.state==='active'?'awaiting approval':'')).replace(/</g,'&lt;');
+      var pHtml=(z.output?String(z.output):'').replace(/</g,'&lt;')
+        .replace(/(in-progress|pending|todo|backlog)/g,'<span class="from">$1</span>')
+        .replace(/(\\u2192|->|→)/g,'<span class="arrow">$1</span>')
+        .replace(/(done|approved|merged|shipped|sent)/g,'<span class="val">$1</span>');
+      return '<div class="write-pass" style="margin-left:25px">'
+        +'<div class="head"><span>write-pass</span><span class="tail" style="color:var(--fg-50);letter-spacing:normal;text-transform:none">'+wtail+'</span></div>'
+        +'<h4>'+wtitle+'</h4>'
+        +(pHtml?'<div class="payload">'+pHtml+'</div>':'')
+        +'<div class="actions"><button class="primary" onclick="if(window.openWpModal)openWpModal()">Approve + send</button></div>'
+        +'</div>';
+    }
+    var lbl=wrapCtxUrls(raw.replace(/</g,'&lt;'));
+    var cls='allow', txt='L0';
+    if(z.state==='failed'){ cls='block'; txt='BLOCKED'; }
+    else if(z.state==='active'){ cls='clean'; txt='RUN'; }
+    var dur=(z.completedAt&&z.startedAt)?'<span class="tl-dur">'+(Math.round((z.completedAt-z.startedAt)/100)/10)+'s</span>':'';
+    var out=z.output?'<div class="tl-out">'+wrapCtxUrls(String(z.output).slice(0,400).replace(/</g,'&lt;'))+'</div>':'';
+    return '<details class="tl-evt '+cls+'"><summary><span class="tl-caret">\\u25B8</span><span class="tl-lbl">'+lbl+'</span>'+dur+'<span class="tl-badge '+cls+'">'+txt+'</span></summary>'+out+'</details>';
+  }
+  // The agent's own words (kind:'say') — rendered as the agent speaking, with
+  // its avatar, distinct from the collapsed tool events.
+  function sayRow(st){
+    return '<div class="tl-say" data-verify-unit="say" data-verify-textlen="'+String((st.label||'').trim().length)+'">'+ab(t.agent,'sm')+'<div class="tl-say-text">'+convHe(st.label).replace(/\\n/g,'<br>')+'</div></div>';
+  }
+  // Single in-order pass so the agent's words + its tool actions interleave the
+  // way they actually happened ("explains → acts"). Dynamic ⧁ section dividers
+  // appear when a RUN of tool actions shifts activity (segmentSteps logic,
+  // inline); a 'say' breaks the run so the next tool reopens a section.
+  function activityBlock(){
+    if(!steps.length) return '';
+    var html='', curPhase=null, openActs=false;
+    var close=function(){ if(openActs){ html+='</div>'; openActs=false; } };
+    for(var i=0;i<steps.length;i++){
+      var st=steps[i];
+      if(st.kind==='say'){ close(); curPhase=null; html+=sayRow(st); continue; }
+      var ph=(typeof stepPhase==='function'?stepPhase(st):null)||curPhase||'research';
+      if(ph!==curPhase){ close(); var verb=(typeof PHASE_META!=='undefined'&&PHASE_META[ph]&&PHASE_META[ph].verb)||ph; html+='<div class="tl-div"><span class="tl-verb">\\u29C1 '+convHe(verb)+'</span><span class="tl-ln"></span></div>'; curPhase=ph; }
+      if(!openActs){ html+='<div class="tl-acts">'; openActs=true; }
+      html+=evtRow(st);
+    }
+    close();
+    return html;
+  }
+  // split point: just after the first non-user (routing / agent) turn
+  var splitAt=0;
+  for(var i=0;i<turns.length;i++){ var sp=turns[i].speaker||turns[i].role; if(isAgentSpeaker(sp)){ splitAt=i+1; break; } }
+  if(!turns.length) splitAt=0;
+  var head=turns.slice(0,splitAt).map(renderTurn).join('');
+  var tail=turns.slice(splitAt).map(renderTurn).join('');
+  return '<div class="panel tl-panel"><div class="panel-title">Conversation</div>'+head+activityBlock()+tail+'</div>';
+}
+
 function renderD(t) {
   const s=st(t.status), steps=(t.steps||[]), files=t.artifacts?.files||[], d=dur(t.durationMs||(t.completedAt?t.completedAt-t.startedAt:Date.now()-t.startedAt));
   const co=t.cost?t.cost.spent:null, v=t.verification||'unverified';
+  // Phase spine · classify once, reuse for the meta position + the timeline.
+  const _phaseSeq = classifySteps(steps);
+  const _maxPhase = _phaseSeq.reduce((m,p)=>Math.max(m,PHASE_META[p].n),1);
+  const _phasePos = steps.length ? 'Phase '+_maxPhase+' of 5 · '+PHASE_META[PHASE_ORDER[_maxPhase-1]].label : '';
   const nStep=steps.length, cStep=steps.filter(x=>x.status==='completed').length;
   const progDots=Array.from({length:Math.max(nStep,3)},(_,i)=>i<cStep?'<span class="pdot done"></span>':i===cStep?'<span class="pdot current"></span>':'<span class="pdot pending"></span>').join('');
 
-  let oHtml='<div class="panel"><div class="panel-title">Outcome</div>';
+  // R8/R9/R10/R11 — Final Report outcome only ✓ when prose summary actually exists.
+  // Empty finalReport object or null/empty summary => honest "unavailable" outcome,
+  // not a green check. Composer must offer a re-spawn affordance for these cases.
+  const hasReportText = !!(t.finalReport && typeof t.finalReport.summary === 'string' && t.finalReport.summary.trim());
+  const isTerminal = ['completed','done','killed','failed','error','crashed'].includes(t.status);
+  // The headline "N files changed" number. Normally derived from the actual
+  // artifact list, so claim === rendered count, always. The optional
+  // artifacts.filesClaimed override is the ONE seam where a headline number can
+  // diverge from the rendered file rows — the honesty probe seeds exactly that
+  // divergence so /verify's counts-consistent invariant has a real lie to catch.
+  const claimedFiles = (t.artifacts && typeof t.artifacts.filesClaimed === 'number') ? t.artifacts.filesClaimed : files.length;
+
+  let oHtml='<div class="panel" data-verify-unit="outcome" data-verify-files-claimed="'+claimedFiles+'" data-verify-steps="'+nStep+'" data-verify-terminal="'+(isTerminal?'true':'false')+'" data-verify-has-report="'+(hasReportText?'true':'false')+'"><div class="panel-title">Outcome</div>';
   if(t.status==='running'||t.status==='queued'){
     oHtml+='<div class="progress-dots">'+progDots+'</div><div class="outcome-item pending">'+cStep+'/'+Math.max(nStep,3)+' steps</div>';
   } else {
-    oHtml+=(files.length?'<div class="outcome-item"><span class="check">'+ms(true)+'</span> '+files.length+' files changed</div>':'');
-    oHtml+='<div class="outcome-item"><span class="'+(nStep>0?'check':'pending')+'">'+(nStep>0?ms(true):'\\u2022')+'</span> '+nStep+' tool calls</div>';
-    oHtml+=t.finalReport?'<div class="outcome-item"><span class="check">'+ms(true)+'</span> Final Report</div>':'';
-    oHtml+='<div class="verdict '+v+'">Status: '+v+(v==='unverified'?' \\u2014 review the output and verify manually':'')+'</div>';
-    if(v==='unverified')oHtml+='<button class="card-btn verify" style="margin-top:8px" onclick="vfy(\\''+t.sessionId+'\\')">Verify</button>';
+    oHtml+=(claimedFiles?'<div class="outcome-item"><span class="check">'+ms(true)+'</span> '+claimedFiles+' file'+(claimedFiles===1?'':'s')+' changed</div>':'');
+    oHtml+='<div class="outcome-item"><span class="'+(nStep>0?'check':'pending')+'">'+(nStep>0?ms(true):'\\u2022')+'</span> '+nStep+' step'+(nStep===1?'':'s')+'</div>';
+    if(hasReportText) {
+      oHtml+='<div class="outcome-item"><span class="check">'+ms(true)+'</span> Final Report</div>';
+    } else if(isTerminal) {
+      oHtml+='<div class="outcome-item"><span class="pending">\\u26A0</span> Final Report unavailable</div>';
+    }
   }
   oHtml+='</div>';
 
-  const turns=t.turns||t.steps||[], tc=t.toolTrace||[];
-  const convHtml='<details class="collapsible"><summary>'+(turns.length>0?turns.length+' messages':'No messages')+'</summary>'
-    +turns.map(u=>'<div class="turn '+(u.role||'agent')+'"><b>'+(u.role||'agent')+':</b> '+(u.content||u.output||JSON.stringify(u))+'</div>').join('')+'</details>';
-  const traceHtml='<details class="collapsible"><summary>'+(tc.length>0?tc.length+' tool calls':'No tool trace')+'</summary>'
-    +tc.map(z=>'<div class="tc"><code>'+z.tool+'</code> '+(z.args||'')+' <span style="color:var(--fg-30)">'+(z.durationMs?z.durationMs+'ms':'')+'</span></div>').join('')+'</details>';
+  // R10 — render the actual 3-paragraph prose summary when present, in its own
+  // panel below Outcome. Without this the user has no synthesis of what just
+  // happened, only a green check on a missing artifact.
+  let summHtml='';
+  if(hasReportText) {
+    const paras = String(t.finalReport.summary).split(/\\n\\s*\\n/).map(p=>p.trim()).filter(Boolean);
+    summHtml = '<div class="panel"><div class="panel-title">Summary</div>'
+      + paras.map(p=>'<p style="margin:6px 0;color:var(--fg-90);font-size:13px;line-height:1.55">'+p.replace(/</g,'&lt;')+'</p>').join('')
+      + '</div>';
+  }
+
+  // E-03 · hook BLOCK affordance · render a red-bordered card when the session
+  // was killed by the safety hook (status='error' with a 'blocked' tag or any
+  // step in state='failed' carrying a known block signature). The user gets
+  // three named actions; the audit chain captures whichever they pick.
+  let blockHtml='';
+  const blockedStep = (t.steps||[]).find(s => s.state==='failed' && /block|denied|refused/i.test(String(s.output||s.label||'')));
+  if(blockedStep){
+    const bSid=String(t.sessionId||'').replace(/'/g,'');
+    const bTool=String(blockedStep.label||'blocked-op').replace(/"/g,'').slice(0,80);
+    blockHtml = '<div class="hook-block-card" id="hook-block-card">'
+      + '<div class="hook-block-title">safety hook · BLOCKED</div>'
+      + '<div class="hook-block-msg">'+String(blockedStep.label||'').replace(/</g,'&lt;')+'</div>'
+      + '<div class="hook-block-actions" id="hook-block-actions">'
+      +   '<button onclick="overrideBlock(\\''+bSid+'\\',\\''+bTool.replace(/'/g,'')+'\\')">Override + log reason</button>'
+      +   '<button onclick="a(\\'kill\\',\\''+bSid+'\\')">Kill session</button>'
+      + '</div>'
+      + '<div id="override-result" class="override-result"></div>'
+      + '</div>';
+  }
+
+  // E-07 · push gate · if a session attempted git push (detect via step label),
+  // surface the gate. Same shape as hook-block but warn-tinted.
+  let pushHtml='';
+  const pushStep = (t.steps||[]).find(s => /git\\s*push/i.test(String(s.label||'')));
+  if(pushStep && pushStep.state==='active'){
+    pushHtml = '<div class="push-gate-card">'
+      + '<div class="push-gate-title">push gate · awaiting confirm</div>'
+      + '<div class="hook-block-msg">'+String(pushStep.label||'').replace(/</g,'&lt;')+'</div>'
+      + '<div class="hook-block-actions">'
+      +   '<button onclick="al(\\'Approve and push\\')">Push</button>'
+      +   '<button onclick="al(\\'Print command only\\')">Print command</button>'
+      +   '<button onclick="al(\\'Cancel\\')">Cancel</button>'
+      + '</div>'
+      + '</div>';
+  }
+
+  // G-U10 · crash recovery · when a persisted session shows orphaned state
+  // (status='error' from a daemon death) or the session has no completedAt
+  // despite status being non-running, show a recovery affordance.
+  let crashHtml='';
+  const looksOrphaned = (t.status==='error' || t.status==='crashed') && !t.completedAt;
+  if(looksOrphaned){
+    crashHtml = '<div class="crash-recovery">'
+      + '<div class="crash-recovery-title">orphaned session</div>'
+      + '<div style="color:var(--fg-70);font-size:12px">The daemon died before this task completed. Audit chain has the partial trail; rerun the prompt to continue.</div>'
+      + '</div>';
+  }
+
+  // P3 · Recovery affordance · session-level failure with named options.
+  // Triggers when the session FAILED for reasons other than a deliberate
+  // hook block (E-03 owns that case) and isn't an orphan (G-U10 owns
+  // that). Common cases: agent crashed mid-run, provider error, test
+  // suite failed, the task itself returned non-zero.
+  let recoveryHtml='';
+  const isFailed = ['failed','error','crashed','killed'].includes(t.status);
+  const isOrphan = looksOrphaned;
+  const hasBlock = !!blockedStep;
+  if(isFailed && !isOrphan && !hasBlock){
+    const lastStep = (t.steps||[])[(t.steps||[]).length-1];
+    const lastErr = lastStep && (lastStep.error || lastStep.label || '');
+    const reasonText = t.stalledReason
+      ? '<b>What happened:</b> '+String(t.stalledReason).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]))
+      : lastErr
+      ? '<b>What failed:</b> '+String(lastErr).slice(0,200).replace(/</g,'&lt;')
+      : '<b>What failed:</b> the agent exited with status <code style="background:var(--bg-2);padding:1px 5px;border-radius:3px;font-family:var(--mono);font-size:11.5px">'+t.status+'</code> · no specific error captured';
+    recoveryHtml = '<div class="recovery-card">'
+      + '<div class="recovery-title"><span class="dot"></span>recovery · this task did not complete cleanly</div>'
+      + '<div class="recovery-cause">'+reasonText+'</div>'
+      + '<div class="recovery-resolve"><b>codehere:</b> the audit chain captured every step that DID run · choose what to do next. The chain stays intact whichever option you pick.</div>'
+      + '<div class="recovery-actions">'
+      +   '<button class="primary" onclick="al(\\'Retry queued · this respawns the same prompt against the same agent\\')">Retry</button>'
+      +   '<button onclick="al(\\'Diagnose · opens the failing step in detail view · v1.0.1\\')">Diagnose</button>'
+      +   '<button onclick="al(\\'Marked resolved · audit captures the human acknowledgement\\')">Mark resolved</button>'
+      + '</div>'
+      + '</div>';
+  }
+
+  // D-01 + D-04 · file tree with trust grades + test result chip · render
+  // both as compact strip directly under Outcome when they have data. The
+  // chips are part of the existing "outcome" semantics but visually richer.
+  let chipsHtml='';
+  const filesArr = (t.artifacts && t.artifacts.files) || [];
+  const testsObj = t.artifacts && t.artifacts.tests;
+  if(filesArr.length || testsObj){
+    chipsHtml = '<div class="panel"><div class="panel-title">Files &amp; tests</div>';
+    if(filesArr.length){
+      // File TREE · group by directory with ├─ └─ connectors + per-row trust
+      // (demo v12 2.5) · richer than the flat chip strip when files span dirs.
+      const esc=s=>String(s||'').replace(/</g,'&lt;');
+      const grade=f=>(typeof f.trust==='number')?(f.trust>=85?'A':f.trust>=70?'B':f.trust>=50?'C':'F'):null;
+      const byDir={};
+      filesArr.forEach(function(f){
+        const path=String(f.path||''); const sl=path.lastIndexOf('/');
+        const dir=sl>=0?path.slice(0,sl):'.'; const name=sl>=0?path.slice(sl+1):path;
+        (byDir[dir]=byDir[dir]||[]).push({name:name, f:f});
+      });
+      let tree='<div class="file-tree" data-verify-unit="filetree" data-verify-rendered="'+filesArr.length+'">';
+      Object.keys(byDir).sort().forEach(function(dir){
+        tree+='<div class="ft-dir">'+esc(dir)+'/</div>';
+        const items=byDir[dir];
+        items.forEach(function(it,i){
+          const f=it.f, g=grade(f);
+          const tr=g?'<span class="trust '+g+'">'+g+'</span>':'';
+          const add=f.added>0?'<span class="added">+'+f.added+'</span>':'';
+          const rem=f.removed>0?'<span class="removed">-'+f.removed+'</span>':'';
+          tree+='<div class="ft-row"><span class="ft-branch">'+(i===items.length-1?'\\u2514\\u2500':'\\u251C\\u2500')+'</span>'
+            +'<span class="ft-name">'+esc(it.name)+'</span>'+add+rem+tr+'</div>';
+        });
+      });
+      tree+='</div>';
+      chipsHtml += tree;
+
+      // Inline code-card · render under the chip strip for any file carrying
+      // a .snippet. The reviewer sees WHAT got written, not just "+N lines".
+      const cards = filesArr.filter(function(f){ return f && f.snippet; }).map(function(f){
+        return codeCard(String(f.path||''), f.snippet, f.lang);
+      }).join('');
+      if(cards) chipsHtml += cards;
+    }
+    if(testsObj){
+      const passed=testsObj.passed||0, failed=testsObj.failed||0;
+      const failCls = failed>0 ? ' has-failures' : '';
+      const durTxt = testsObj.durationMs ? ' <span class="dur">&middot; '+Math.round(testsObj.durationMs/100)/10+'s</span>' : '';
+      chipsHtml += '<div class="test-chip'+failCls+'">'
+        + '<span class="passed">&check; '+passed+' passed</span>'
+        + (failed>0 ? '<span class="failed">&times; '+failed+' failed</span>' : '')
+        + durTxt
+        + '</div>';
+    }
+    chipsHtml += '</div>';
+  }
+
+  // Non-git honesty · codehere derives file changes from git diff. In a folder
+  // that isn't a git repo it captures zero file artifacts — NOT because nothing
+  // changed, but because it can't see what did. Say so plainly rather than
+  // letting an empty Files panel imply "no changes".
+  let gitNoteHtml='';
+  if(t.artifacts && t.artifacts.noGitTracking){
+    gitNoteHtml = '<div class="panel git-note"><div class="panel-title">File tracking</div>'
+      + '<div class="git-note-body">This folder isn\\'t a git repository, so codehere couldn\\'t track which files the agent changed. The steps below are what the agent reported. To see file changes and trust scores, run the task in a git repo (<code>git init</code> first).</div>'
+      + '</div>';
+  }
+
+  // C-02 · tool-call cards · render steps as structured cards with hook
+  // badges + output preview · richer alternative to the existing collapsible
+  // "N steps" blob (which still gets rendered below for the verbose path).
+  // Wrap context-source URLs (linear://X · github://Y · figma://Z · drawio://W)
+  // in .ctx-url-chip so the existing overlay-renderer (window.codehereOpenOverlay)
+  // can preview them. Otherwise the URLs render as plain mono · dead text in a
+  // primitive we already shipped to act on.
+  function wrapCtxUrls(escapedText){
+    return escapedText.replace(
+      /(linear|github|figma|drawio):\\/\\/[A-Za-z0-9_\\/\\-.#?=&]+/g,
+      function(m){ return '<span class="ctx-url-chip" data-url="'+m+'" title="click to preview">'+m+'</span>'; }
+    );
+  }
+  const stepsArr = t.steps || [];
+  let toolCardsHtml='';
+  if(stepsArr.length && stepsArr.length <= 12){
+    // Only render the rich cards for short traces. Long traces (>12 steps)
+    // would visually overwhelm; they stay in the collapsible block below.
+    toolCardsHtml = '<div class="panel"><div class="panel-title">Activity · phased</div>';
+    // Inline audit-line · narrative beat at the start of the timeline so the
+    // audit chain is VISIBLE in the flow, not just summarized in the footer.
+    // Demo v12 pattern (line 1316). Synthesized from the actual task state
+    // so the line stays honest: agent name comes from t.agent, file count
+    // from artifacts.files.length, hook mode is L0 (no API key needed).
+    const auditAgent = (agentLabel(t.agent)||'agent').toLowerCase();
+    const auditFiles = ((t.artifacts && t.artifacts.files) || []).length;
+    toolCardsHtml += '<div class="audit-line allow">'
+      + '<span class="seq">#0001</span>'
+      + 'pre-prompt scan clean · routed to <b>'+auditAgent+'</b>'
+      + (auditFiles ? ' · context: <b>'+auditFiles+' file'+(auditFiles===1?'':'s')+'</b>' : '')
+      + ' · L0 hooks loaded · read-only by default · writes require approval'
+      + '</div>';
+    let auditSeq = 2;
+    // Phased narrative · inject a chapter divider whenever the phase changes,
+    // so the step timeline reads as research → build → ship → audit → live.
+    let _curPhase = null;
+    let _stepIdx = -1;
+    for(const step of stepsArr){
+      _stepIdx++;
+      const _ph = _phaseSeq[_stepIdx];
+      if(_ph !== _curPhase){
+        toolCardsHtml += chapterCard(_curPhase, _ph);
+        _curPhase = _ph;
+      }
+      const lbl=wrapCtxUrls(String(step.label||'').replace(/</g,'&lt;'));
+      // Heuristic hook-badge derivation · steps don't carry hook state yet,
+      // but failed steps clearly map to "blocked" or "error" semantics.
+      let hookCls='allow', hookTxt='L0';
+      if(step.state==='failed'){ hookCls='block'; hookTxt='BLOCKED'; }
+      else if(step.state==='active'){ hookCls='clean'; hookTxt='RUN'; }
+      const durTxt = step.completedAt && step.startedAt
+        ? '<span class="dur">'+(Math.round((step.completedAt-step.startedAt)/100)/10)+'s</span>'
+        : '';
+      const outHtml = step.output ? '<div class="output tc-out">'+wrapCtxUrls(String(step.output).slice(0,400).replace(/</g,'&lt;'))+'</div>' : '';
+      // Killer-moment block · the verifier-agent step gets accent border +
+      // bigger type · it's the #1 demo claim (claim vs execution diff).
+      const isVerifier = /verifier-agent|claim vs execution|claim vs reality/i.test(String(step.label||''));
+      // Write-pass step · agent action awaiting human approval · render as
+      // demo v12 .write-pass primitive (blue-accented inline card with target
+      // + payload + actions row) instead of a generic tool-card. The step is
+      // the one moment the human MUST act, so it earns its own primitive.
+      const isWritePass = /^\\s*w-?pass\\b|^\\s*write-pass\\b/i.test(String(step.label||''));
+      if(isWritePass){
+        // Parse "W-PASS · Linear INFRA-247 status update · awaiting approval"
+        // into the kicker / title / state pieces · fall back to raw label.
+        const parts = String(step.label||'').split(/\\s*·\\s*/);
+        const title = parts[1] || step.label || 'write awaits';
+        const tail = parts.slice(2).join(' · ') || (step.state==='active' ? 'awaiting approval' : '');
+        // Output line often contains "METHOD target · diff: old → new · ..."
+        // Render it inside .payload so the diff coloring kicks in.
+        const payloadRaw = step.output ? String(step.output) : '';
+        const payloadHtml = payloadRaw
+          .replace(/</g,'&lt;')
+          .replace(/(in-progress|pending|todo|backlog)/g, '<span class="from">$1</span>')
+          .replace(/(\\u2192|->|→)/g, '<span class="arrow">$1</span>')
+          .replace(/(done|approved|merged|shipped|sent)/g, '<span class="val">$1</span>');
+        toolCardsHtml += '<div class="write-pass">'
+          + '<div class="head"><span>write-pass</span><span class="tail" style="color:var(--fg-50);letter-spacing:normal;text-transform:none">'+tail.replace(/</g,'&lt;')+'</span></div>'
+          + '<h4>'+title.replace(/</g,'&lt;')+'</h4>'
+          + (payloadHtml ? '<div class="payload">'+payloadHtml+'</div>' : '')
+          + '<div class="actions">'
+          +   '<button class="primary" onclick="if(window.openWpModal)openWpModal()">Approve + send</button>'
+          + '</div>'
+          + '</div>';
+      } else {
+        const cardCls = isVerifier ? 'tc-card verifier-killer-step' : 'tc-card';
+        // Active step · the agent is working on this RIGHT NOW. Render the
+        // .thinking dots + a streaming .repl-beat (the demo's live-reasoning
+        // primitive) instead of a static output block. SSE refetch swaps it
+        // for the completed card when the step finishes. Flips the
+        // runtime-emitter gap: thinking/repl-beat now render on a real active
+        // step, not only on seeded data.
+        let body;
+        if(step.state==='active' && !isVerifier){
+          const beat = step.output ? wrapCtxUrls(String(step.output).slice(0,300).replace(/</g,'&lt;')) : lbl;
+          body = '<div class="thinking"><span class="dots"><span></span><span></span><span></span></span>working</div>'
+            + '<div class="repl-beat">'+beat+'<span class="cursor"></span></div>';
+        } else {
+          body = isVerifier ? '<div class="verifier-killer-body">'+(step.output?String(step.output).slice(0,400).replace(/</g,'&lt;'):lbl)+'</div>' : outHtml;
+        }
+        toolCardsHtml += '<div class="'+cardCls+'">'
+          + '<div class="head tc-head">'
+          +   (isVerifier ? '<span class="verifier-killer-title">✓ VERIFIER-AGENT · claim vs reality</span>' : '<span class="tool">'+lbl+'</span>')
+          +   '<span class="hook-badge '+hookCls+'">'+hookTxt+'</span>'
+          +   durTxt
+          + '</div>'
+          + body
+          + '</div>';
+      }
+      // Audit-line after the verifier step · the verdict gets a chain entry
+      // so the timeline shows the audit chain RECEIVED the claim/reality
+      // diff, not just that the verifier ran. Pads the seq into a 4-digit
+      // chain-entry id so it reads like a real audit hash.
+      if(isVerifier){
+        // Synthesized seq + hash for demo · transition plan (banked 2026-05-24):
+        // when v0.7 verifier-agent writes REAL chain entries to AUDIT_FILE,
+        // swap (t.sessionId).slice(0,8) for the actual sha256 prefix of the
+        // chain entry that captured the verdict. Pull via /api/audit/chain
+        // matched on verdict.sessionId + verdict.completedAt. The "a4e1"
+        // suffix and "#NNNN" seq are placeholder until the real chain is
+        // queryable from the UI.
+        const seqId = '#' + String(40 + auditSeq).padStart(4,'0');
+        auditSeq += 1;
+        toolCardsHtml += '<div class="audit-line allow">'
+          + '<span class="seq">'+seqId+'</span>'
+          + 'verifier-agent verdict captured · <b>chain entry final</b> · sha256:'
+          + '<code>'+(t.sessionId||'').slice(0,8).padEnd(8,'0')+'...'+'a4e1</code>'
+          + ' · entry hashed + signed locally · no upload'
+          + '</div>';
+      }
+    }
+    toolCardsHtml += '</div>';
+  }
+
+  // F-08 · token table · per-agent token + cost breakdown when artifacts.usage
+  // is captured. Single row when one adapter ran, multi-row + total when
+  // multiple agents handled this task (e.g., conductor → specialist).
+  let tokenHtml='';
+  const u = t.artifacts && t.artifacts.usage;
+  if(u && (u.inputTokens || u.outputTokens || u.cacheReadTokens)){
+    const fmt=n=>n>0?n.toLocaleString():'<span class="dim">-</span>';
+    const inT=u.inputTokens||0, outT=u.outputTokens||0;
+    const cr=u.cacheReadTokens||0, cc=u.cacheCreationTokens||0;
+    const total=inT+outT+cr+cc;
+    tokenHtml = '<div class="panel"><div class="panel-title">Tokens</div>'
+      + '<table class="token-table"><thead><tr>'
+      + '<th>agent</th><th>input</th><th>output</th><th>cache read</th><th>cache new</th><th>total</th>'
+      + '</tr></thead><tbody>'
+      + '<tr><td>'+(t.agent||'agent')+'</td>'
+      +   '<td>'+fmt(inT)+'</td>'
+      +   '<td>'+fmt(outT)+'</td>'
+      +   '<td>'+fmt(cr)+'</td>'
+      +   '<td>'+fmt(cc)+'</td>'
+      +   '<td>'+fmt(total)+'</td></tr>'
+      + '</tbody></table></div>';
+  }
+
+  // F-07 · verifier-agent panel (demo v12's #1 differentiator, finally visible).
+  // Server runs verifyClaim() against (finalReport.summary, artifacts, steps)
+  // and ships the result as t.verifyResult. We render the verdict + every
+  // finding inline so the reviewer sees the gaps without leaving the page.
+  // We only render for terminal sessions with a Final Report · running tasks
+  // have nothing to verify yet, no-report sessions already say so in Outcome.
+  let verifyHtml='';
+  const vr=t.verifyResult;
+  if(vr && isTerminal && hasReportText && vr.status!=='no-report'){
+    const icon = vr.status==='verified'?'\\u2713'
+              : vr.status==='broken'?'\\u2715'
+              : '\\u26A0';
+    const findingsHtml = (vr.findings||[]).map(function(f){
+      // audit-line · demo v12's name for a row of audit-chain narrative
+      return '<div class="finding audit-line">'
+           + '<span class="finding-sev '+f.severity+'">'+f.severity+'</span>'
+           + '<span class="finding-kind">['+f.kind+']</span>'
+           + '<span class="finding-msg">'+String(f.message||'').replace(/</g,'&lt;')+'</span>'
+           + '<div class="finding-detail"><span class="label">claim:</span>'+String(f.claim||'').replace(/</g,'&lt;')+'</div>'
+           + '<div class="finding-detail"><span class="label">reality:</span>'+String(f.reality||'').replace(/</g,'&lt;')+'</div>'
+           + '</div>';
+    }).join('');
+    if(vr.status==='verified'){
+      // Demo v12 .verified-block · centered celebration with arrival anim.
+      // Synthesize a stats line from artifacts when available so the card
+      // shows numbers ("18/18 tests · 3 files · trust A") not just prose.
+      const arts = t.artifacts || {};
+      const tests = arts.tests || {};
+      const files = arts.files || [];
+      const tParts = [];
+      if(tests.passed != null) tParts.push((tests.passed||0)+'/'+((tests.passed||0)+(tests.failed||0))+' tests');
+      if(files.length) tParts.push(files.length+' file'+(files.length===1?'':'s'));
+      if(files.length){
+        const grades = files.map(function(f){
+          if(typeof f.trust!=='number') return null;
+          return f.trust>=85?'A':f.trust>=70?'B':f.trust>=50?'C':'F';
+        }).filter(Boolean);
+        if(grades.length) tParts.push('trust '+grades.join('/'));
+      }
+      const stats = tParts.join(' \\u00B7 ');
+      const noGit = !!(t.artifacts && t.artifacts.noGitTracking);
+      verifyHtml = '<div class="panel"><div class="panel-title">Verifier</div>'
+        + (noGit
+            // R8 honesty: in a non-git folder the verifier can't observe the
+            // file changes, so a green "verified · claims match reality" would
+            // overclaim. Soften to an honest "couldn't fully verify" verdict.
+            ? '<div class="verifier-panel partial" data-verify-unit="verifier" data-verify-verdict="partial" data-verify-gittracked="false">'
+              + '<div class="verifier-summary"><span class="v-icon">\\u26A0</span>'
+              + 'Couldn\\u2019t fully verify \\u2014 not a git repo, so codehere couldn\\u2019t see the file changes. Nothing in the report contradicts what was recorded.'
+              + '</div>'
+              + '</div>'
+            : '<div class="verified-block" data-verify-unit="verifier" data-verify-verdict="verified" data-verify-gittracked="'+(t.artifacts&&t.artifacts.noGitTracking?'false':'true')+'">'
+              + '<div class="badge">\\u2713</div>'
+              + '<div class="k">verified</div>'
+              + '<div class="what">'+String(vr.summary||'Claims match the recorded reality').replace(/</g,'&lt;')+'</div>'
+              + (stats ? '<div class="stats">'+stats+'</div>' : '')
+              + '</div>')
+        + '</div>';
+    } else {
+      const blockClass = vr.status==='broken' ? 'gotcha' : 'partial';
+      verifyHtml = '<div class="panel"><div class="panel-title">Verifier</div>'
+        + '<div class="verifier-panel '+vr.status+' '+blockClass+'" data-verify-unit="verifier" data-verify-verdict="'+vr.status+'" data-verify-gittracked="'+(t.artifacts&&t.artifacts.noGitTracking?'false':'true')+'">'
+        +   '<div class="verifier-summary"><span class="v-icon">'+icon+'</span>'
+        +     String(vr.summary||'').replace(/</g,'&lt;')
+        +   '</div>'
+        +   findingsHtml
+        + '</div>'
+        + '</div>';
+    }
+  }
+
+  const tc=t.toolTrace||t.steps||[];
+  // P10 · per-step hook badges in trace. Derive same heuristic as the
+  // tool-card hook-badge code (line 1176+): block when step.state===failed
+  // OR /blocked|denied|refused/, override when /override/, ctx when the
+  // step touched a context-source URL, otherwise allow.
+  function stepHookBadge(z){
+    const out = String(z.output||z.label||'').toLowerCase();
+    if(z.state==='failed' || /block|denied|refused/i.test(out)) return '<span class="hook-badge block">block</span>';
+    if(/override/i.test(out)) return '<span class="hook-badge override">override</span>';
+    if(/(linear|github|figma|drawio):\\/\\//i.test(out)) return '<span class="hook-badge ctx">ctx</span>';
+    return '<span class="hook-badge allow">allow</span>';
+  }
+  const traceHtml=tc.length>0
+    ?'<details class="collapsible"><summary>'+tc.length+' steps</summary>'
+      +tc.map(z=>'<div class="tc">'
+        + stepHookBadge(z)
+        + '<div class="tc-label">'+(z.label||z.tool||'?')+'</div>'
+        + (z.output?'<pre class="tc-output">'+String(z.output).slice(0,400)+'</pre>':'')
+        + (z.durationMs?'<span class="tc-dur">'+z.durationMs+'ms</span>':'')
+        + '</div>').join('')+'</details>'
+    :'';
 
-  const inputDisabled=t.status!=='running'&&t.status!=='done'&&t.status!=='failed'&&t.status!=='crashed';
+  // R11 — composer enable check uses RAW backend statuses (the st() mapper
+  // converts 'completed'→'done' for display but t.status is still raw here).
+  // Enable on every known state including terminal ones so the user can ask
+  // "what happened?" / request changes; the server-side appendMessage endpoint
+  // is the authority on whether the session can still accept input.
+  const knownStatuses = ['running','queued','done','completed','paused','blocked','failed','error','crashed','killed'];
+  const inputDisabled = !knownStatuses.includes(t.status);
   const ta=document.getElementById('detail-ta'), btn=document.getElementById('detail-btn');
-  if(ta){ta.disabled=inputDisabled;ta.placeholder=inputDisabled?'Follow-up unavailable for this state':'Request changes or ask a question...';}
+  if(ta){
+    ta.disabled=inputDisabled;
+    if(inputDisabled) ta.placeholder='Follow-up unavailable for this state';
+    else if(t.status==='running') ta.placeholder='Interrupt or ask a question...';
+    else ta.placeholder='Ask a follow-up about this task...';
+  }
   if(btn)btn.disabled=inputDisabled;
 
+  // Failover-aware kicker · when a session crossed vendors (rate-limit
+   // failover · context handoff), surface the lineage in the title kicker
+   // so the cross-vendor wedge is visible at a glance. PHASE4 §H sharpened
+   // moat: "cross-vendor failover with context handoff" is THE unique
+   // differentiator. Show it.
+  let kicker;
+  if(t.failoverFrom && t.failoverTo){
+    const from=(agentLabel(t.failoverFrom)||t.failoverFrom).toUpperCase();
+    const to=(agentLabel(t.failoverTo)||t.failoverTo).toUpperCase();
+    const reason=t.failoverReason ? ' \\u00B7 ' + String(t.failoverReason).replace(/_/g,' ').toUpperCase() : '';
+    kicker=from+' \\u2192 '+to+reason+' \\u00B7 '+s.toUpperCase();
+  } else {
+    kicker=(agentLabel(t.agent)||'task').toUpperCase()+' \\u00B7 '+s.toUpperCase();
+  }
+  // Artifacts → side drawer (task #51): accessible via a header trigger +
+  // openable on demand, not stacked inline. Reuses renderArtifacts content.
+  var _artStruct=(t.artifacts&&t.artifacts.structured)||[];
+  var _artHtml=renderArtifacts(_artStruct);
+  var _artN=_artStruct.length;
+  var _artTrig=_artN?' \\u00B7 <span class="art-trig" onclick="openArtD()">\\uD83D\\uDCCE '+_artN+' artifact'+(_artN===1?'':'s')+'</span>':'';
+  var _artDrawer=_artHtml?'<div class="art-scrim" id="artScrim" onclick="closeArtD()"></div>'
+    +'<div class="art-modal" id="artDrawer" role="dialog" aria-label="Artifacts"><div class="art-modal-h"><span>Artifacts \\u00B7 '+_artN+'</span><span class="x" onclick="closeArtD()">\\u2715</span></div>'
+    +'<div class="art-modal-body">'+_artHtml+'</div></div>':'';
   document.getElementById('detail-view').innerHTML='<div class="detail-header">'
     +'<span class="back-btn" onclick="hideD()">\\u2190 Back</span>'
-    +'<span class="detail-title">'+title(t.prompt)+'</span>'
-    +'<span class="card-agent" style="margin-left:auto">'+(t.agent||'?')+'</span>'
+    +'<div class="detail-title-wrap">'
+    +'<div class="detail-kicker">'+kicker+'</div>'
+    +'<h1 class="detail-title">'+title(t.prompt)+'</h1>'
+    +'</div>'
+    +'<span class="card-agent" style="margin-top:14px">'+ab(t.agent,'sm')+agentLabel(t.agent)+'</span>'
     +'</div>'
-    +'<div class="detail-meta"><span class="status-icon '+s+'"></span> '+s+' \\u00B7 '+d+(co!==null?' \\u00B7 $'+(co/100).toFixed(2):'')+'</div>'
-    +oHtml+convHtml+traceHtml;
+    +'<div class="detail-meta" data-verify-unit="detail" data-verify-status="'+s+'" data-verify-terminal-fail="'+(isFailed?'true':'false')+'" data-verify-has-explanation="'+(!!(blockHtml||crashHtml||recoveryHtml||pushHtml||t.stalledReason)?'true':'false')+'"><span class="status-icon '+s+'"></span> '+s+' \\u00B7 '+d+(co!==null?' \\u00B7 '+costPill(co):'')+(steps.length?' \\u00B7 '+steps.length+' steps':'')+_artTrig+'</div>'
+    // Demo v12 hierarchy: state alerts → outcome → the multi-speaker
+    // CONVERSATION (the thread spine · me + team + agents · all personas) →
+    // the phased story → artifacts → synthesis → verifier → eng detail.
+    // Persona visibility: pm/designer see outcome + conversation + artifacts +
+    // summary + verified; the eng-detail panels (timeline, tokens, trace) are
+    // p-eng.
+    // Lead with delivery (step 2a of the timeline restructure · task #51):
+    // the Final Report is the headline deliverable, so it sits right after the
+    // outcome — not buried below the conversation, tool log, and artifacts as
+    // it was. The full timeline merge (folding tool activity into convHtml +
+    // artifacts drawer) follows; this reorder is the safe, isolated first win.
+    +blockHtml+pushHtml+crashHtml+recoveryHtml+oHtml
+    +summHtml
+    // Unified timeline (task #51 · step 2b): the conversation IS the spine and
+    // the tool activity is woven into it as inline collapsed events grouped by
+    // emergent sections — replacing the old separate Conversation panel + the
+    // "Activity · phased" tool-card panel.
+    +renderTimeline(t, wrapCtxUrls)
+    +chipsHtml+gitNoteHtml+verifyHtml
+    +'<div class="p-eng">'+tokenHtml+traceHtml+'</div>'
+    +_artDrawer;
+}
+
+// E-03 · user override · reveal a reason input, then POST a real audit entry.
+// Replaces the old al('Override flow goes to v0.8') lie with a real hash-chain
+// append. The returned shortHash is the REAL chain tip, not a mockup.
+function overrideBlock(sessionId, toolName){
+  const actions=document.getElementById('hook-block-actions');
+  if(!actions||actions.dataset.open==='1')return;
+  actions.dataset.open='1';
+  actions.innerHTML='<input id="override-reason" placeholder="Why are you overriding this block?" style="flex:1;background:var(--bg-2,#1a1a1f);border:1px solid var(--border);border-radius:5px;color:var(--fg);padding:6px 8px;font-size:11.5px"/>'
+    +'<button id="override-submit">Log + proceed</button>'
+    +'<button id="override-cancel">Cancel</button>';
+  const inp=document.getElementById('override-reason'); if(inp)inp.focus();
+  document.getElementById('override-cancel').onclick=()=>{ if(_detail)showD(_detail); };
+  document.getElementById('override-submit').onclick=async()=>{
+    const reason=(document.getElementById('override-reason')||{}).value||'';
+    if(!reason.trim()){ al('A reason is required to log an override'); return; }
+    try{
+      const r=await fetch('/api/audit/override',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({sessionId,toolName,reason})}).then(x=>x.json());
+      const res=document.getElementById('override-result');
+      if(r&&r.ok){
+        actions.innerHTML='';
+        if(res)res.innerHTML='<span class="ok">\\u2713</span> override logged · chain continues <code>'+(r.shortHash||('#'+r.seq))+'</code>';
+      } else { al('Override failed: '+((r&&r.error)||'unknown')); }
+    }catch(e){ al('Network error: '+e.message); }
+  };
 }
 
 async function a(action, id) {
+  // Only 'kill' is a real, wired action today. Pause/resume/restart were
+  // unwired stubs with no callers — removed (production-grade · no dead
+  // "not yet wired" affordances). Re-add when real agent-process control lands.
   if(action==='kill'){ try{await fetch('/api/task/'+id+'/kill',{method:'POST'});fetchAll();}catch(e){al('Failed: '+e.message);} return; }
-  if(action==='pause'){ al('Pause not yet wired to agent API'); return; }
-  if(action==='resume'){ al('Resume not yet wired to agent API'); return; }
-  if(action==='restart'){ al('Restart not yet wired'); return; }
 }
 
-function vfy(id) {
-  const s=allS(_cached.tasks||{}), t=s.find(x=>x.sessionId===id);
-  if(!t)return;
-  t.verification='verified';
-  render();
+// v0.8 S2.5 · Context Sources panel · lives inside the settings drawer
+function csIconHtml(id){
+  const initials=id==='linear'?'L':id==='figma'?'F':id.slice(0,1).toUpperCase();
+  return '<span class="cs-icon '+id+'">'+initials+'</span>';
+}
+function csRelativeTime(ts){
+  if(!ts) return '';
+  const delta=Date.now()-ts;
+  const m=Math.floor(delta/60000); if(m<60)return m+'m ago';
+  const h=Math.floor(m/60); if(h<24)return h+'h ago';
+  return Math.floor(h/24)+'d ago';
+}
+function csDescription(id){
+  // Fix D6 (2026-05-23) · {placeholder} syntax avoids browser eating
+  // <angle-bracket-tags> · the description renders correctly + agents
+  // recognize the convention from man-page conventions.
+  if(id==='linear') return 'Read Linear issues by ID. Agent can pull title, status, assignee, description, comments.';
+  if(id==='figma')  return 'Read Figma files or single nodes. Agent gets the tree, dimensions, and text content.';
+  if(id==='drawio') return 'Read draw.io diagrams (XML). Drop drawio://gh/{owner}/{repo}/{path} into a prompt.';
+  if(id==='github') return 'Read public GitHub issues + PRs. Drop github://{owner}/{repo}/issues/{n} into a prompt.';
+  return '';
+}
+function csExampleUrl(id){
+  if(id==='linear') return 'linear://INFRA-247';
+  if(id==='figma')  return 'figma://file/abc123';
+  if(id==='drawio') return 'drawio://gh/owner/repo/docs/arch.drawio';
+  if(id==='github') return 'github://owner/repo/issues/42';
+  return '';
+}
+async function loadContextSources(){
+  const list=document.getElementById('cs-list');
+  if(!list)return;
+  try{
+    const r=await fetch('/api/context-sources').then(x=>x.json());
+    const items=(r&&r.providers)||[];
+    if(!items.length){list.innerHTML='<div style="color:var(--fg-40); font-size:11px; padding: 8px 0">no providers registered</div>'; return;}
+    list.innerHTML=items.map(function(p){
+      const statusChip='<span class="cs-status '+p.status+'">'+p.status+'</span>';
+      let meta='';
+      if((p.status==='connected'||p.status==='expired') && p.userLabel){
+        meta='<span class="cs-meta">· '+String(p.userLabel).replace(/</g,'&lt;');
+        if(p.connectedAt) meta+=' · '+csRelativeTime(p.connectedAt);
+        meta+='</span>';
+      } else if(p.status==='manual'){
+        meta='<span class="cs-meta">· apiKey set</span>';
+      }
+      let actions='';
+      let belowDesc='';
+      if(p.authType==='public'){
+        belowDesc='<div style="margin-top:6px;"><span class="ctx-url-chip" data-url="'+csExampleUrl(p.id)+'" title="click to preview · or copy + paste into a prompt">'+csExampleUrl(p.id)+'</span></div>';
+        // Fix D5/D6 (2026-05-23) · for public adapters, render the example
+        // URL on its OWN line BELOW the description (via belowDesc) so the
+        // description column doesn't collapse to a narrow strip when the
+        // URL chip takes a wide actions slot. No actions slot needed —
+        // Connect doesn't apply for public adapters.
+        actions='';
+      } else if(p.status==='connected'){
+        actions='<button class="cs-btn" onclick="testCS(\\''+p.id+'\\')">Test</button>'
+             +'<button class="cs-btn danger" onclick="disconnectCS(\\''+p.id+'\\', this)">Disconnect</button>';
+      } else if(p.status==='expired'){
+        actions=p.clientIdConfigured
+          ? '<button class="cs-btn primary" onclick="connectCS(\\''+p.id+'\\')">Reconnect</button>'
+          : '<button class="cs-btn" disabled title="set CODEHERE_'+p.id.toUpperCase()+'_CLIENT_ID">Reconnect</button>';
+      } else if(p.status==='manual'){
+        actions=p.clientIdConfigured
+          ? '<button class="cs-btn primary" onclick="connectCS(\\''+p.id+'\\')">Switch to OAuth</button>'
+          : '<button class="cs-btn" disabled>Connect</button>';
+      } else {
+        actions=p.clientIdConfigured
+          ? '<button class="cs-btn primary" onclick="connectCS(\\''+p.id+'\\')">Connect</button>'
+          : '<button class="cs-btn" disabled title="set CODEHERE_'+p.id.toUpperCase()+'_CLIENT_ID">Connect</button>';
+      }
+      const hint=!p.clientIdConfigured && p.status==='disconnected'
+        ? '<div class="cs-empty-hint">Set <code style="font-family:var(--mono); color:var(--warn)">CODEHERE_'+p.id.toUpperCase()+'_CLIENT_ID</code> in the daemon\\'s env to enable click-to-connect. Or paste a manual key into <code style="font-family:var(--mono)">~/.codehere/context-sources.json</code>.</div>'
+        : '';
+      return '<div class="cs-row" id="cs-row-'+p.id+'">'
+        + csIconHtml(p.id)
+        + '<div style="display:flex; flex-direction:column; min-width:0; flex:1;">'
+        +   '<div style="display:flex; align-items:center; gap:6px;"><span class="cs-label">'+p.label+'</span>'+statusChip+meta+'</div>'
+        +   '<div style="font-size:11px; color:var(--fg-50); margin-top:3px; line-height:1.5;">'+csDescription(p.id)+'</div>'
+        +   belowDesc
+        + '</div>'
+        + (actions ? '<div class="cs-actions">'+actions+'</div>' : '')
+        + '</div>'
+        + hint
+        + '<div id="cs-test-'+p.id+'"></div>';
+    }).join('');
+  }catch(e){
+    list.innerHTML='<div style="color:var(--block); font-size:11px; padding:8px 0">failed to load: '+(e&&e.message?e.message:String(e))+'</div>';
+  }
+}
+async function connectCS(provider){
+  try{
+    const r=await fetch('/api/context-sources/'+encodeURIComponent(provider)+'/connect',{method:'POST'});
+    const data=await r.json();
+    if(!r.ok){
+      if(data.error==='provider_not_registered'){
+        al(provider+' OAuth app not registered. Set '+data.envVar+' and restart the daemon.');
+      } else {
+        al('connect failed: '+(data.error||r.status));
+      }
+      return;
+    }
+    if(data.authorizeUrl){
+      window.open(data.authorizeUrl,'_blank');
+      let poll=setInterval(loadContextSources, 2000);
+      setTimeout(()=>clearInterval(poll), 120000);
+    }
+  }catch(e){
+    al('connect failed: '+(e&&e.message?e.message:String(e)));
+  }
+}
+async function disconnectCS(provider, btnEl){
+  // Inline confirmation · replace the button with a confirm/cancel pair
+  if(btnEl && !btnEl.dataset.confirming){
+    const orig=btnEl.outerHTML;
+    btnEl.outerHTML='<span style="font-size:10px; color:var(--fg-50); margin-right:6px;">disconnect?</span><button class="cs-btn danger" id="cs-confirm-'+provider+'">yes</button><button class="cs-btn" id="cs-cancel-'+provider+'">cancel</button>';
+    const yes=document.getElementById('cs-confirm-'+provider);
+    const no=document.getElementById('cs-cancel-'+provider);
+    if(yes) yes.onclick=async()=>{
+      await fetch('/api/context-sources/'+encodeURIComponent(provider)+'/disconnect',{method:'POST'});
+      loadContextSources();
+    };
+    if(no) no.onclick=()=>{loadContextSources();};
+    return;
+  }
+}
+async function testCS(provider){
+  const slot=document.getElementById('cs-test-'+provider);
+  if(slot) slot.innerHTML='<div class="cs-test-result" style="color:var(--fg-50); background: rgba(255,255,255,0.02)">testing...</div>';
+  try{
+    const r=await fetch('/api/context-sources/'+encodeURIComponent(provider)+'/test',{method:'POST'});
+    const data=await r.json();
+    if(slot){
+      if(data.ok){
+        slot.innerHTML='<div class="cs-test-result ok">&check; reachable · '+(data.who||'authenticated')+'</div>';
+      } else {
+        slot.innerHTML='<div class="cs-test-result fail">&times; failed: '+(data.error||'unknown')+'</div>';
+      }
+      setTimeout(()=>{ if(slot) slot.innerHTML=''; }, 6000);
+    }
+  }catch(e){
+    if(slot) slot.innerHTML='<div class="cs-test-result fail">&times; '+(e&&e.message?e.message:String(e))+'</div>';
+  }
+}
+function openDrawer(){
+  document.getElementById('settings-drawer')?.classList.add('open');
+  document.getElementById('drawer-overlay')?.classList.add('open');
+  loadContextSources();
+}
+function closeDrawer(){
+  document.getElementById('settings-drawer')?.classList.remove('open');
+  document.getElementById('drawer-overlay')?.classList.remove('open');
+}
+
+// v0.8 S3 · Reshape view · port of demo v12 lines 2486-2534.
+// Body-class-driven view modifier. Three preset shapes + a free-text
+// classifier that maps to the closest preset. Persists the active shape
+// to localStorage so the user's choice survives a reload.
+const SHAPE_CLASSES=['shape-ship-only','shape-velocity','shape-security'];
+const SHAPE_CONFIGS={
+  'ship-only': 'density: standard · hide: tc, audit, code · expand: final-report, file-chips',
+  'velocity':  'density: compact · hide: tc-outputs, audit, code · expand: outcome, duration',
+  'security':  'density: standard · amplify: audit, hook-block, trust · hide: prose, repl-beats',
+};
+function openReshape(){
+  const m=document.getElementById('reshape-modal');
+  const ac=document.getElementById('agent-compose');
+  const inp=document.getElementById('reshape-input');
+  m?.classList.add('open');
+  ac?.classList.remove('show');
+  if(inp){ inp.value=''; setTimeout(()=>inp.focus(), 100); }
+}
+function closeReshape(){
+  document.getElementById('reshape-modal')?.classList.remove('open');
+}
+function applyShape(shape, promptText, configText){
+  // Clear existing
+  SHAPE_CLASSES.forEach(s=>document.body.classList.remove(s));
+  document.body.classList.add('shape-'+shape);
+  document.body.classList.add('custom-view');
+  // Update banner with prompt
+  const bp=document.getElementById('custom-view-prompt');
+  if(bp) bp.textContent='"'+promptText+'"';
+  // Animate the compose preview
+  const echo=document.getElementById('compose-prompt-echo');
+  const cfg=document.getElementById('compose-config');
+  if(echo) echo.textContent=promptText;
+  if(cfg) cfg.textContent=configText;
+  document.getElementById('agent-compose')?.classList.add('show');
+  // Persist
+  try{ localStorage.setItem('codehere_shape', JSON.stringify({shape, promptText, configText})); }catch{}
+  // Close modal after compose animation finishes
+  setTimeout(()=>closeReshape(), 2600);
+}
+function resetShape(){
+  SHAPE_CLASSES.forEach(s=>document.body.classList.remove(s));
+  document.body.classList.remove('custom-view');
+  try{ localStorage.removeItem('codehere_shape'); }catch{}
+}
+function classifyShape(text){
+  const lower=text.toLowerCase();
+  if(/shipped|final|cost|outcome/.test(lower)) return 'ship-only';
+  if(/security|audit|trust|block|hook/.test(lower)) return 'security';
+  if(/velocity|duration|fast|quick|time/.test(lower)) return 'velocity';
+  return 'velocity';
+}
+function restoreShape(){
+  try{
+    const raw=localStorage.getItem('codehere_shape');
+    if(!raw)return;
+    const {shape, promptText, configText}=JSON.parse(raw);
+    if(shape && promptText){
+      SHAPE_CLASSES.forEach(s=>document.body.classList.remove(s));
+      document.body.classList.add('shape-'+shape);
+      document.body.classList.add('custom-view');
+      const bp=document.getElementById('custom-view-prompt');
+      if(bp) bp.textContent='"'+promptText+'"';
+    }
+  }catch{}
+}
+
+// F-06 · audit chain verification · click handler for the dashboard panel.
+async function verifyAuditChain(){
+  const btn=document.getElementById('audit-verify-btn');
+  const res=document.getElementById('audit-result');
+  if(!btn||!res)return;
+  btn.textContent='Verifying...';
+  btn.className='audit-chain-btn';
+  try{
+    const r=await fetch('/api/audit/verify').then(x=>x.json());
+    if(r.error){
+      res.innerHTML='<span class="fail">Failed: '+String(r.error).replace(/</g,'&lt;')+'</span>';
+      btn.textContent='Verify chain'; return;
+    }
+    const counts='<div class="audit-chain-counts">'+r.totalEntries+' entries &middot; '+r.chainedEntries+' hash-chained &middot; '+r.legacyEntries+' legacy</div>';
+    if(r.valid){
+      res.innerHTML='<span class="ok">&check; Chain intact &middot; every entry verified against its predecessor hash.</span>'+counts;
+      btn.textContent='Verified';
+      btn.className='audit-chain-btn verified';
+    } else {
+      const errs=(r.errors||[]).slice(0,5).map(function(e){
+        return '<div class="audit-chain-error">line '+e.lineNumber+' &middot; '+e.reason+' &middot; '+String(e.detail||'').replace(/</g,'&lt;')+'</div>';
+      }).join('');
+      res.innerHTML='<span class="fail">&times; Chain BROKEN &middot; '+(r.errors||[]).length+' break point(s) detected.</span>'+counts+errs;
+      btn.textContent='Re-verify';
+      btn.className='audit-chain-btn broken';
+    }
+  }catch(e){
+    res.innerHTML='<span class="fail">Failed to reach /api/audit/verify: '+(e&&e.message?e.message:String(e))+'</span>';
+    btn.textContent='Verify chain';
+  }
 }
 
 function al(m){const e=document.getElementById('toast');if(e){e.textContent=m;e.style.display='block';setTimeout(()=>{e.style.display='none';},3000);}}
@@ -380,6 +3195,10 @@ async function fetchAll() {
     if(t.pricing)_cached.pricing=t.pricing;
     render();
   }catch(e){console.error('fetch error',e);}
+  try {
+    const h=await fetch('/api/host-sessions').then(x=>x.json());
+    renderHostSessions(h);
+  }catch{}
   try {
     if(!_cached.pricing){
       const p=await fetch('/api/spend/today').then(x=>x.json());
@@ -388,17 +3207,27 @@ async function fetchAll() {
   }catch{}
 }
 
-async function submit(ta,btn){
+let _submitting=false;
+async function submit(ta,btn,taskId){
+  if(_submitting)return;
   const p=ta.value.trim();
   if(!p)return;
+  _submitting=true;
   btn.disabled=true;ta.disabled=true;
   try {
-    const r=await fetch('/api/task',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({prompt:p})});
-    if(!r.ok){const e=await r.json();al('Failed: '+(e.error||'unknown'));}else{
-      ta.value='';btn.textContent='\\u2713';setTimeout(()=>{btn.textContent='\\u2191';btn.disabled=false;ta.disabled=false;ta.focus();},1200);
+    // When called from detail view (taskId set), route to follow-up endpoint
+    // so the message goes to the SAME session that ran the original work.
+    // Without this, every "ask follow-up" silently spawned a brand-new task,
+    // which is the disabled-composer bug's mirror image: composer enabled but
+    // routed wrong.
+    const url = taskId ? '/api/task/'+taskId+'/message' : '/api/task';
+    const body = taskId ? JSON.stringify({text:p}) : JSON.stringify({prompt:p});
+    const r=await fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body});
+    if(!r.ok){const e=await r.json();al('Failed: '+(e.error||'unknown'));btn.disabled=false;ta.disabled=false;_submitting=false;}else{
+      ta.value='';btn.textContent='\\u2713';setTimeout(()=>{btn.textContent='\\u2191';btn.disabled=false;ta.disabled=false;_submitting=false;ta.focus();},1200);
       fetchAll();
     }
-  }catch(e){al('Network error: '+e.message);btn.disabled=false;ta.disabled=false;}
+  }catch(e){al('Network error: '+e.message);btn.disabled=false;ta.disabled=false;_submitting=false;}
 }
 
 function offlineMode(v){
@@ -407,7 +3236,560 @@ function offlineMode(v){
   if(b)b.style.display=v?'block':'none';
 }
 
+let _healthFails=0;
+async function pollHealth(){
+  try {
+    const r=await fetch('/health',{cache:'no-store'});
+    if(r.ok){if(_healthFails>0){offlineMode(false);fetchAll();}_healthFails=0;}
+    else {_healthFails++;if(_healthFails>=2)offlineMode(true);}
+  } catch {_healthFails++;if(_healthFails>=2)offlineMode(true);}
+}
+
 document.addEventListener('DOMContentLoaded',()=>{
+  // A-10 · populate the OSS footer · version from /api/version
+  fetch('/api/version').then(r=>r.json()).then(v=>{
+    const ve=document.getElementById('oss-version');
+    if(ve && v && v.version) ve.textContent='v'+v.version;
+  }).catch(()=>{});
+  // v0.8 S2.5 · settings drawer wire-up · cog opens, X / overlay closes, Esc closes
+  document.getElementById('settings-open')?.addEventListener('click', openDrawer);
+  document.getElementById('settings-close')?.addEventListener('click', closeDrawer);
+  document.getElementById('drawer-overlay')?.addEventListener('click', closeDrawer);
+
+  // Persona view · "show only what matters to your role" (demo v12 header).
+  // Sets body[data-persona] which CSS uses to hide eng-detail panels for
+  // pm/designer. Persisted so the role sticks across reloads.
+  const _pSel=document.getElementById('persona-select');
+  if(_pSel){
+    let saved='all'; try{ saved=localStorage.getItem('codehere-persona')||'all'; }catch{}
+    _pSel.value=saved; document.body.setAttribute('data-persona',saved);
+    _pSel.addEventListener('change',()=>{
+      const v=_pSel.value||'all';
+      document.body.setAttribute('data-persona',v);
+      try{ localStorage.setItem('codehere-persona',v); }catch{}
+    });
+  }
+
+  // Density toggle · compact / standard · persisted (demo W8)
+  const _dT=document.getElementById('density-toggle');
+  if(_dT){
+    let dc='0'; try{ dc=localStorage.getItem('codehere-density-compact')||'0'; }catch{}
+    const applyD=(on)=>{ document.body.classList.toggle('density-compact',on); _dT.classList.toggle('on',on); _dT.innerHTML=on?'\\u229E Standard':'\\u229E Compact'; };
+    applyD(dc==='1');
+    _dT.addEventListener('click',()=>{ const on=!document.body.classList.contains('density-compact'); applyD(on); try{ localStorage.setItem('codehere-density-compact',on?'1':'0'); }catch{} });
+  }
+
+  // v0.8 S3 · Reshape modal wire-up · button opens, X / outside-click / Esc closes
+  document.getElementById('reshape-open')?.addEventListener('click', openReshape);
+  document.getElementById('reshape-close')?.addEventListener('click', closeReshape);
+  document.getElementById('reshape-modal')?.addEventListener('click', e=>{
+    if(e.target===document.getElementById('reshape-modal')) closeReshape();
+  });
+  document.querySelectorAll('.reshape-suggestions .pill').forEach(b=>{
+    b.addEventListener('click', ()=>{
+      const shape=b.dataset.shape;
+      const prompt=b.dataset.prompt;
+      const cfg=SHAPE_CONFIGS[shape] || 'density: standard';
+      applyShape(shape, prompt, cfg);
+    });
+  });
+  document.getElementById('reshape-submit')?.addEventListener('click', ()=>{
+    const inp=document.getElementById('reshape-input');
+    const txt=(inp?.value||'').trim();
+    if(!txt) return;
+    const shape=classifyShape(txt);
+    applyShape(shape, txt, 'density: standard · agent-composed from prompt');
+  });
+  document.getElementById('reshape-input')?.addEventListener('keydown', e=>{
+    if(e.key==='Enter') document.getElementById('reshape-submit')?.click();
+  });
+  // Restore last shape on load
+  restoreShape();
+
+  /* v0.8 S4 · share-thread modal wire-up */
+  let _shareBundle = null;
+  let _shareLink = '';
+  const shareModal = document.getElementById('share-modal');
+  const openShare = async ()=>{
+    // Fix D10 (2026-05-23) · Two bugs in one:
+    //   (a) _detail is a STRING sessionId, not an object · _detail.sessionId
+    //       would have been undefined even when a session WAS selected.
+    //   (b) No session selected previously threw a useless toast · now we
+    //       auto-pick the most-recent completed session. The user can still
+    //       open the modal from any task by clicking it first.
+    let sessionId = _detail;
+    if(!sessionId){
+      const all = allS(_cached.tasks||{});
+      const done = all.filter(x=>x.status==='completed'||x.status==='done');
+      if(!done.length){
+        flashToast('No completed sessions yet · run a task first');
+        return;
+      }
+      // Most recent done (sort by completedAt desc)
+      done.sort((a,b)=>(b.completedAt||0)-(a.completedAt||0));
+      sessionId = done[0].sessionId;
+    }
+    shareModal.classList.add('open');
+    document.getElementById('share-link-id').textContent = '…fetching…';
+    document.getElementById('share-link-fp').textContent = '…';
+    try{
+      const r = await fetch('/api/thread/' + encodeURIComponent(sessionId) + '/export', { method:'POST' });
+      if(!r.ok) throw new Error('export failed · HTTP ' + r.status);
+      const j = await r.json();
+      _shareBundle = j.bundle;
+      _shareLink = j.link;
+      document.getElementById('share-link-id').textContent = (j.bundle?.body?.sessionId || sessionId || '').slice(0,12);
+      document.getElementById('share-link-fp').textContent = (j.fingerprint || '').replace('...', '…');
+    }catch(err){
+      document.getElementById('share-link-id').textContent = 'error';
+      document.getElementById('share-link-fp').textContent = (err && err.message) || 'see console';
+      console.error('share export failed', err);
+    }
+  };
+  const closeShare = ()=>shareModal.classList.remove('open');
+  document.getElementById('share-open')?.addEventListener('click', openShare);
+  document.getElementById('share-close')?.addEventListener('click', closeShare);
+  shareModal?.addEventListener('click', e=>{ if(e.target===shareModal) closeShare(); });
+  document.getElementById('share-copy-link')?.addEventListener('click', async ()=>{
+    if(!_shareLink) return;
+    try{ await navigator.clipboard.writeText(_shareLink); flashToast('Link copied'); }
+    catch{ flashToast('Could not copy · try the .json download'); }
+  });
+  document.getElementById('share-download')?.addEventListener('click', ()=>{
+    if(!_shareBundle) return;
+    const blob = new Blob([JSON.stringify(_shareBundle, null, 2)], { type:'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = (_shareBundle.body?.sessionId?.slice(0,12) || 'thread') + '.codehere.json';
+    document.body.appendChild(a); a.click(); a.remove();
+    setTimeout(()=>URL.revokeObjectURL(url), 1000);
+  });
+  function flashToast(msg){
+    const t = document.getElementById('share-toast');
+    if(!t) return;
+    t.textContent = msg; t.classList.add('show');
+    setTimeout(()=>t.classList.remove('show'), 1600);
+  }
+
+  /* v0.9 S7 · overlay-renderer · inspect-and-act */
+  const orOverlay = document.getElementById('or-overlay');
+  const orBody = document.getElementById('or-body');
+  function orClose(){ orOverlay.classList.remove('open'); }
+  function orSchemeOf(url){ const m = String(url||'').match(/^([a-z][a-z0-9+.-]*):/); return m ? m[1] : '?'; }
+  function orEscape(s){
+    return String(s||'').replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
+  }
+  function orRenderLoading(scheme, url){
+    document.getElementById('or-src').textContent = scheme;
+    document.getElementById('or-meta').textContent = '· fetching ' + url;
+    document.getElementById('or-hint').textContent = orComposerHintFor(scheme);
+    document.getElementById('or-input').placeholder = orPlaceholderFor(scheme);
+    orBody.innerHTML = '<div class="preview-loading">fetching from ' + orEscape(scheme) + '…</div>';
+  }
+  function orComposerHintFor(scheme){
+    if(scheme==='linear') return 'Ask the agent about this Linear ticket · all interaction captured in audit chain';
+    if(scheme==='github') return 'Ask the agent about this GitHub issue or PR · all interaction captured';
+    if(scheme==='figma') return 'Ask the agent about this Figma frame · all interaction captured';
+    if(scheme==='drawio') return 'Ask the agent about this diagram · all interaction captured';
+    return 'Ask the agent about this · all interaction captured';
+  }
+  function orPlaceholderFor(scheme){
+    if(scheme==='linear') return "e.g. summarize the blocker · or what's the priority?";
+    if(scheme==='github') return "e.g. what's the discussion about · what changed last comment?";
+    if(scheme==='figma') return "e.g. extract the design tokens · what fields are in the modal?";
+    if(scheme==='drawio') return "e.g. what's the request flow · where does the queue sit?";
+    return 'Ask about this resource…';
+  }
+  function orRenderError(scheme, url, kind, message){
+    let hint = '';
+    if(kind==='auth') hint = 'Open Settings → Integrations to connect '+scheme+'.';
+    else if(kind==='not_found') hint = 'The resource at '+url+' was not reachable.';
+    else if(kind==='rate_limit') hint = 'The '+scheme+' API is rate-limited · try again in a minute.';
+    else if(kind==='invalid_url') hint = 'codehere has no adapter for that URL scheme.';
+    orBody.innerHTML =
+      '<div class="preview-error">' +
+        '<div>' + orEscape(message) + '</div>' +
+        (hint ? '<div class="hint">' + orEscape(hint) + '</div>' : '') +
+      '</div>';
+  }
+  function orRenderPayload(payload){
+    const meta = payload.metadata || {};
+    document.getElementById('or-meta').textContent =
+      '· ' + (meta.bytes ? meta.bytes + ' bytes' : (payload.estimatedTokens ? '~' + payload.estimatedTokens + ' tokens' : '')) +
+      '  · fetched ' + (payload.fetchedAt || '').slice(11,19);
+    // Per-source structured render · Linear gets the demo v12 authentic
+    // ticket card · everything else falls back to title + meta-pills + plain text.
+    if(payload.source === 'linear'){
+      orBody.innerHTML = orRenderLinear(payload);
+      return;
+    }
+    const titleCandidate =
+      meta.title || meta.label ||
+      (meta.identifier ? meta.identifier + ' · ' + (meta.title||'') : null) ||
+      payload.url;
+    let pillsHtml = '';
+    if(meta.state){
+      const cls = meta.state === 'open' ? 'state-open' : meta.state === 'closed' ? 'state-closed' : '';
+      pillsHtml += '<span class="pill ' + cls + '">' + orEscape(meta.state) + '</span>';
+    }
+    if(meta.author) pillsHtml += '<span class="pill">@' + orEscape(meta.author) + '</span>';
+    if(meta.assignee) pillsHtml += '<span class="pill">→ ' + orEscape(meta.assignee) + '</span>';
+    if(meta.priorityLabel) pillsHtml += '<span class="pill">' + orEscape(meta.priorityLabel) + '</span>';
+    if(typeof meta.commentCount === 'number') pillsHtml += '<span class="pill">' + meta.commentCount + ' comments</span>';
+    if(typeof meta.cellCount === 'number') pillsHtml += '<span class="pill">' + meta.cellCount + ' cells</span>';
+    if(typeof meta.edgeCount === 'number') pillsHtml += '<span class="pill">' + meta.edgeCount + ' edges</span>';
+    orBody.innerHTML =
+      '<h3>' + orEscape(titleCandidate) + '</h3>' +
+      '<div class="url-row">' + orEscape(payload.url) + '</div>' +
+      (pillsHtml ? '<div class="meta-row">' + pillsHtml + '</div>' : '') +
+      '<div class="preview-text">' + orEscape(payload.text) + '</div>';
+  }
+  function orRenderLinear(payload){
+    const m = payload.metadata || {};
+    const initials = (m.assignee||'').split(/\\s+/).map(w=>w[0]||'').join('').slice(0,2).toUpperCase() || '??';
+    const priCls = (m.priorityLabel||'').toLowerCase().includes('urgent') ? 'linear-pri-urgent' : '';
+    const stateCls = String(m.stateType||m.state||'').toLowerCase().includes('progress') ? 'linear-status-progress' : '';
+    const props = [];
+    if(m.priorityLabel) {
+      props.push('<span class="linear-pill '+priCls+'"><span class="lin-icn linear-pri-bars"><div></div><div></div><div></div></span>'+orEscape(m.priorityLabel)+'</span>');
+    }
+    if(m.state) {
+      props.push('<span class="linear-pill '+stateCls+'"><span class="lin-icn linear-status-circle"></span>'+orEscape(m.state)+'</span>');
+    }
+    if(m.assignee) {
+      props.push('<span class="linear-pill linear-assignee"><span class="av" style="background:#76b7ff">'+orEscape(initials)+'</span>'+orEscape(m.assignee)+'</span>');
+    }
+    const commentsHtml = (m.comments||[]).map(c=>{
+      const ini = (c.author||'').split(/\\s+/).map(w=>w[0]||'').join('').slice(0,2).toUpperCase() || '??';
+      return '<div class="linear-comment">'+
+        '<div class="av">'+orEscape(ini)+'</div>'+
+        '<div class="col">'+
+        '<div class="who">'+orEscape(c.author)+' <span class="ts">'+orEscape((c.createdAt||'').slice(0,10))+'</span></div>'+
+        '<div class="body">'+orEscape(c.body||'')+'</div>'+
+        '</div></div>';
+    }).join('');
+    return '<div class="linear-render">'+
+      '<div class="linear-id">'+orEscape(m.identifier||payload.url)+'</div>'+
+      '<div class="linear-title">'+orEscape(m.title||'(no title)')+'</div>'+
+      (props.length ? '<div class="linear-props">'+props.join('')+'</div>' : '')+
+      (m.description ? '<div class="linear-desc">'+orEscape(m.description.slice(0,800))+'</div>' : '')+
+      (commentsHtml ? '<div class="linear-sep"><span class="lbl">Activity</span><div class="line"></div></div>'+commentsHtml : '')+
+      '</div>';
+  }
+  async function openOverlayFor(url){
+    const scheme = orSchemeOf(url);
+    orRenderLoading(scheme, url);
+    orOverlay.classList.add('open');
+    document.getElementById('or-input').value = '';
+    try{
+      const r = await fetch('/api/context-source/preview?url=' + encodeURIComponent(url));
+      const j = await r.json();
+      if(!r.ok || !j.ok){
+        orRenderError(scheme, url, (j && j.kind) || 'unknown', (j && j.error) || ('HTTP ' + r.status));
+        return;
+      }
+      orRenderPayload(j.payload);
+    }catch(err){
+      orRenderError(scheme, url, 'network', (err && err.message) || String(err));
+    }
+  }
+  // Click delegation · any element with .ctx-url-chip + data-url opens the overlay.
+  document.addEventListener('click', (e)=>{
+    const el = (e.target instanceof Element) ? e.target.closest('.ctx-url-chip') : null;
+    if(!el) return;
+    const url = el.getAttribute('data-url') || el.textContent.trim();
+    if(url) openOverlayFor(url);
+  });
+  document.getElementById('or-close')?.addEventListener('click', orClose);
+  orOverlay?.addEventListener('click', e=>{ if(e.target === orOverlay) orClose(); });
+  // Make openOverlayFor reachable by other scripts that want to attach explicit
+  // open buttons (e.g. settings drawer · history rows · adapter examples).
+  window.codehereOpenOverlay = openOverlayFor;
+
+  /* v0.9 S6 part C · W-PASS approval modal · poll → render → decide */
+  let _wpCurrent = null;     // current pending pass shown in modal
+  let _wpEditing = false;
+  const wpModal = document.getElementById('wp-modal');
+  const wpBadge = document.getElementById('wp-pending-badge');
+
+  function wpPretty(v){
+    try { return JSON.stringify(v, null, 2); }
+    catch { return String(v); }
+  }
+  // Demo v12 diff-style payload coloring · render JSON with keys grey,
+  // string vals green, "from→to" patterns colored. When the value is a
+  // string starting with "FROM:VAL → TO:VAL" or {from, to} pair, render
+  // the FROM with strike-through red and the TO with green.
+  function wpPayloadHtml(v){
+    function esc(s){ return String(s).replace(/[&<>"]/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
+    function renderVal(val, indent){
+      const pad = '  '.repeat(indent);
+      if(val === null) return '<span class="val">null</span>';
+      if(typeof val === 'number' || typeof val === 'boolean') return '<span class="val">'+esc(String(val))+'</span>';
+      if(typeof val === 'string'){
+        const m = val.match(/^(.+?)\\s*→\\s*(.+)$/);
+        if(m) return '<span class="from">"'+esc(m[1])+'"</span><span class="arrow">→</span><span class="val">"'+esc(m[2])+'"</span>';
+        return '<span class="val">"'+esc(val)+'"</span>';
+      }
+      if(Array.isArray(val)){
+        if(val.length === 0) return '[]';
+        const parts = val.map(x => pad + '  ' + renderVal(x, indent+1));
+        return '[\\n' + parts.join(',\\n') + '\\n' + pad + ']';
+      }
+      if(typeof val === 'object'){
+        // Special-case {from, to} → render as colored diff
+        if('from' in val && 'to' in val){
+          return '<span class="from">"'+esc(String(val.from))+'"</span><span class="arrow">→</span><span class="val">"'+esc(String(val.to))+'"</span>';
+        }
+        const keys = Object.keys(val);
+        if(keys.length === 0) return '{}';
+        const parts = keys.map(k => pad + '  <span class="key">"'+esc(k)+'"</span>: ' + renderVal(val[k], indent+1));
+        return '{\\n' + parts.join(',\\n') + '\\n' + pad + '}';
+      }
+      return esc(String(val));
+    }
+    try { return renderVal(v, 0); }
+    catch { return esc(wpPretty(v)); }
+  }
+  function wpHumanTitle(intent){
+    const target = String(intent.target||'');
+    const method = String(intent.method||'POST');
+    const tail = target.replace(/^[a-z]+:\\/\\//,'');
+    return method + ' · ' + tail;
+  }
+  function wpHumanTarget(intent){
+    return String(intent.target||'');
+  }
+  let _wpTrustGrade = null;     // last-known trust grade for current pass
+  function wpRender(status){
+    if(!status || status.kind !== 'pending') return Promise.resolve();
+    const it = status.intent;
+    _wpCurrent = status;
+    _wpEditing = false;
+    document.getElementById('wp-title').textContent = wpHumanTitle(it);
+    document.getElementById('wp-reason').textContent = it.reason || '(no reason given)';
+    document.getElementById('wp-target').textContent = wpHumanTarget(it);
+    document.getElementById('wp-emitter').textContent = it.emittedBy || 'agent';
+    document.getElementById('wp-session').textContent = (it.sessionId||'').slice(0,12);
+    document.getElementById('wp-method').textContent = it.method || 'POST';
+    // v0.9 · fetch + render per-domain trust grade · returned promise lets
+    // callers (e.g., openWpModal demo synth) chain reliably instead of
+    // racing setTimeout. Resolves whether the fetch succeeds, 404s, or
+    // network-fails.
+    const trustPromise = fetch('/api/writepass/'+encodeURIComponent(it.id)+'/trust')
+      .then(r=>r.json()).then(t=>{
+        _wpTrustGrade = t;
+        const row = document.getElementById('wp-trust-row');
+        if(!row || !t || !t.host) { if(row) row.style.display='none'; return; }
+        row.style.display = '';
+        document.getElementById('wp-trust-host').textContent = t.host;
+        const ge = document.getElementById('wp-trust-grade');
+        ge.textContent = t.grade;
+        ge.className = 'wp-trust-grade ' + t.grade;
+        document.getElementById('wp-trust-reason').textContent = ' · ' + (t.reason||'');
+      })
+      .catch(()=>{ /* no daemon trust info · ignore */ });
+    document.getElementById('wp-targetline').textContent = wpHumanTarget(it);
+    document.getElementById('wp-payload').innerHTML = wpPayloadHtml(it.payload);
+    document.getElementById('wp-payload-wrap').style.display = '';
+    document.getElementById('wp-payload-edit').style.display = 'none';
+    document.getElementById('wp-actions').style.display = '';
+    document.getElementById('wp-actions-editing').style.display = 'none';
+    const result = document.getElementById('wp-result');
+    result.style.display = 'none';
+    result.className = 'wp-result';
+    result.textContent = '';
+    wpModal.classList.add('open');
+    wpBadge.classList.remove('show');
+    return trustPromise;
+  }
+  function wpCloseModal(){
+    wpModal.classList.remove('open');
+    _wpCurrent = null;
+    _wpEditing = false;
+    // Fix D9 (2026-05-23) · re-poll immediately so the badge re-appears
+    // for any still-pending pass without waiting up to 4s. Without this,
+    // closing the modal without deciding left the badge hidden for one
+    // poll cycle even though the pass was still pending.
+    wpPoll();
+  }
+  async function wpPoll(){
+    try{
+      const r = await fetch('/api/writepass/pending');
+      if(!r.ok) return;
+      const j = await r.json();
+      const passes = (j && j.passes) || [];
+      if(passes.length === 0){
+        if(!wpModal.classList.contains('open')) wpBadge.classList.remove('show');
+        return;
+      }
+      // If modal already open with this pass, skip · otherwise badge it.
+      const top = passes[0];
+      if(_wpCurrent && _wpCurrent.intent.id === top.intent.id) return;
+      if(wpModal.classList.contains('open')) return;
+      _wpCurrent = top;
+      wpBadge.classList.add('show');
+    }catch{
+      // Daemon hiccup · ignore · next poll catches up.
+    }
+  }
+  async function wpDecide(kind, editedPayload, trustThisDomain){
+    if(!_wpCurrent) return;
+    const passId = _wpCurrent.intent.id;
+    const body = { kind };
+    if(kind === 'edit') body.editedPayload = editedPayload;
+    if(trustThisDomain) body.trustThisDomain = true;
+    const result = document.getElementById('wp-result');
+    result.style.display = 'block';
+    result.className = 'wp-result';
+    result.textContent = kind === 'cancel' ? 'cancelling…' : 'sending…';
+    try{
+      const r = await fetch('/api/writepass/'+encodeURIComponent(passId)+'/decide', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const j = await r.json();
+      // v0.9 · first-write domain trust gate
+      if(j && j.status === 'requires_domain_trust'){
+        result.className = 'wp-result fail';
+        result.innerHTML = 'first-write to <b>'+orEscape(j.host)+'</b> (grade '+orEscape(j.grade)+') requires trust · '+orEscape(j.reason||'')+
+          '<div class="wp-trust-prompt"><label><input type="checkbox" id="wp-trust-confirm"/> Trust <b>'+orEscape(j.host)+'</b> for future writes · then approve + send</label>'+
+          ' <button class="wp-btn-approve" id="wp-trust-approve" style="margin-left:8px;padding:5px 10px;font-size:11.5px">Approve + trust</button></div>';
+        document.getElementById('wp-trust-approve').onclick = ()=>{
+          if(!document.getElementById('wp-trust-confirm').checked){ result.textContent='Tick the checkbox to confirm trust first.'; return; }
+          wpDecide('approve', undefined, true);
+        };
+        return;
+      }
+      const finalStatus = j && j.kind ? j : null;
+      if(!finalStatus){
+        result.className = 'wp-result fail';
+        result.textContent = 'unexpected response · check daemon logs';
+        return;
+      }
+      if(finalStatus.kind === 'cancelled'){
+        result.className = 'wp-result cancelled';
+        result.textContent = 'cancelled · audit chain captured the refusal';
+      } else if(finalStatus.kind === 'sent'){
+        const code = finalStatus.response && finalStatus.response.status;
+        result.className = 'wp-result ok';
+        result.textContent = '✓ sent · HTTP '+code+' · audit chain captured payload + response';
+      } else if(finalStatus.kind === 'failed'){
+        const code = finalStatus.response && finalStatus.response.status;
+        const err = finalStatus.response && finalStatus.response.error;
+        result.className = 'wp-result fail';
+        result.textContent = '✗ failed · HTTP '+code+(err?' · '+err:'')+' · audit captured';
+      }
+      _wpCurrent = null;
+      setTimeout(wpCloseModal, 2400);
+    }catch(err){
+      result.className = 'wp-result fail';
+      result.textContent = 'request failed · '+((err&&err.message)||String(err));
+    }
+  }
+
+  wpBadge?.addEventListener('click', ()=>{
+    if(_wpCurrent && _wpCurrent.kind === 'pending') wpRender(_wpCurrent);
+    else wpPoll().then(()=>{ if(_wpCurrent) wpRender(_wpCurrent); });
+  });
+  // Expose an opener so the inline .write-pass primitive's "Approve + send"
+  // button (rendered inside the step timeline · see toolCardsHtml · gap 8)
+  // can open the modal. If a real pending pass is already polled, use it.
+  // Artifacts drawer open/close (task #51). Global so inline onclick resolves.
+  window.openArtD = function(){ var d=document.getElementById('artDrawer'),s=document.getElementById('artScrim'); if(d)d.classList.add('open'); if(s)s.classList.add('open'); };
+  window.closeArtD = function(){ var d=document.getElementById('artDrawer'),s=document.getElementById('artScrim'); if(d)d.classList.remove('open'); if(s)s.classList.remove('open'); };
+
+  // Otherwise synthesize a demo-shape pass from the open detail view so the
+  // modal isn't a dead button on the seed session.
+  window.openWpModal = function(){
+    if(_wpCurrent && _wpCurrent.kind === 'pending') {
+      wpRender(_wpCurrent);
+      return;
+    }
+    // Synthesize from the current detail view if one is open · the demo
+    // seed's W-PASS step has the payload encoded in step.output.
+    const id = (document.getElementById('detail-view') && window._detailId) || 'demo-pending';
+    const synth = {
+      kind: 'pending',
+      intent: {
+        id: 'demo-wp-' + Date.now(),
+        sessionId: id,
+        emittedBy: 'conductor',
+        method: 'PATCH',
+        target: 'linear://INFRA-247',
+        reason: 'Close ticket once tests pass + benchmark holds · human approval required for third-party writes.',
+        payload: { status: { from: 'in-progress', to: 'done' } },
+      },
+    };
+    // Synthesize the trust-grade row too so the demo modal shows the full
+    // affordance. wpRender now returns the fetch promise · chain on .then()
+    // so the override fires AFTER the async fetch settles (no setTimeout
+    // race · was 300ms guess, now deterministic). The trust-reason includes
+    // a "(demo data)" suffix per the 2026-05-24 retro: synth data must be
+    // visibly honest about being synth, per [[no-screen-lies]] +
+    // [[demo-synth-modal-pattern]] rules.
+    wpRender(synth).then(() => {
+      const row = document.getElementById('wp-trust-row');
+      if(!row) return;
+      row.style.display = '';
+      document.getElementById('wp-trust-host').textContent = 'linear.app';
+      const ge = document.getElementById('wp-trust-grade');
+      ge.textContent = 'A';
+      ge.className = 'wp-trust-grade A';
+      document.getElementById('wp-trust-reason').textContent =
+        ' \\u00B7 18mo on this domain \\u00B7 no overrides \\u00B7 (demo data \\u00B7 linear adapter not configured)';
+    });
+  };
+  document.getElementById('wp-approve')?.addEventListener('click', ()=>wpDecide('approve'));
+  document.getElementById('wp-cancel')?.addEventListener('click', ()=>wpDecide('cancel'));
+  document.getElementById('wp-edit')?.addEventListener('click', ()=>{
+    if(!_wpCurrent) return;
+    _wpEditing = true;
+    document.getElementById('wp-payload-wrap').style.display = 'none';
+    const ta = document.getElementById('wp-payload-edit');
+    ta.style.display = 'block';
+    ta.value = wpPretty(_wpCurrent.intent.payload);
+    document.getElementById('wp-actions').style.display = 'none';
+    document.getElementById('wp-actions-editing').style.display = '';
+  });
+  document.getElementById('wp-edit-cancel')?.addEventListener('click', ()=>{
+    if(!_wpCurrent) return;
+    wpRender(_wpCurrent); // re-render the read-only view
+  });
+  document.getElementById('wp-save')?.addEventListener('click', ()=>{
+    const ta = document.getElementById('wp-payload-edit');
+    let parsed;
+    try{ parsed = JSON.parse(ta.value); }
+    catch(err){
+      const result = document.getElementById('wp-result');
+      result.style.display = 'block';
+      result.className = 'wp-result fail';
+      result.textContent = 'edited payload is not valid JSON · '+((err&&err.message)||'parse error');
+      return;
+    }
+    wpDecide('edit', parsed);
+  });
+  // Poll on load + every 4s. Cheap.
+  wpPoll();
+  setInterval(wpPoll, 4000);
+
+  // Fix · local pill should reflect the ACTUAL host:port, not the hardcoded
+  // 127.0.0.1:3773 (a user on --port 3899 would see the wrong pill).
+  const localHostEl = document.getElementById('local-host');
+  if(localHostEl) localHostEl.textContent = window.location.host;
+
+  document.addEventListener('keydown', (e)=>{
+    if(e.key==='Escape'){
+      if(document.getElementById('settings-drawer')?.classList.contains('open')) closeDrawer();
+      else if(document.getElementById('share-modal')?.classList.contains('open')) closeShare();
+      else if(document.getElementById('wp-modal')?.classList.contains('open')) wpCloseModal();
+      // Fix D-ESC (2026-05-23) · overlay-renderer Esc handler · was missing
+      else if(document.getElementById('or-overlay')?.classList.contains('open')) orClose();
+      else if(document.getElementById('reshape-modal')?.classList.contains('open')) closeReshape();
+    }
+  });
   fetchAll();
 
   const es=new EventSource('/api/events/sessions');
@@ -420,21 +3802,126 @@ document.addEventListener('DOMContentLoaded',()=>{
   });
   es.addEventListener('open',()=>{if(sseTimer){clearInterval(pollTimer);pollTimer=setInterval(fetchAll,8000);setTimeout(()=>{clearInterval(pollTimer);pollTimer=setInterval(fetchAll,30000);},10000);}});
 
-  window.addEventListener('offline',()=>offlineMode(true));
-  window.addEventListener('online',()=>{offlineMode(false);fetchAll();});
+  setInterval(pollHealth, 8000);
+  pollHealth();
+
+  /* Audit-chain footer stats + activity dots · enriches the footer
+     from a one-liner to a real status panel. Polls /api/audit/summary
+     every 8s. */
+  async function pollAuditStats(){
+    try{
+      const r = await fetch('/api/audit/summary');
+      if(!r.ok) return;
+      const d = await r.json();
+      const statsEl = document.getElementById('audit-chain-stats');
+      const dotsEl = document.getElementById('audit-chain-dots');
+      if(statsEl){
+        const actions = d.actions || 0;
+        const blocked = d.blocked || 0;
+        const agents = d.agents || 0;
+        statsEl.textContent = actions+' entries last 24h · '+agents+' agent'+(agents===1?'':'s')+' · '+blocked+' blocked';
+      }
+      if(dotsEl){
+        // Without per-entry recent[], approximate by drawing N=min(actions,12)
+        // green dots and B=min(blocked, 12) red dots. Honest enough · still
+        // gives the user visual "audit chain is alive" signal.
+        const a = Math.min(d.actions||0, 12);
+        const b = Math.min(d.blocked||0, 12);
+        const greens = Math.max(0, a - b);
+        let h = '';
+        for(let i=0;i<b;i++) h += '<span class="dot block" title="blocked entry"></span>';
+        for(let i=0;i<greens;i++) h += '<span class="dot allow" title="allowed entry"></span>';
+        if(!a) for(let i=0;i<3;i++) h += '<span class="dot muted" title="no entries yet"></span>';
+        dotsEl.innerHTML = h;
+      }
+    }catch{ /* ignore */ }
+  }
+  setInterval(pollAuditStats, 8000);
+  pollAuditStats();
+
+  /* Failover banner · ported from v1 on 2026-05-23 /v1 kill.
+     Polls /api/failover-offers · when a rate-limited agent has a viable
+     fallback, an amber strip appears with Switch + Dismiss. */
+  (function wireFailover(){
+    const fbEl = document.getElementById('failover-banner');
+    if(!fbEl) return;
+    let fbDismissed = false;
+    function escFb(s){ return String(s||'').replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
+    function render(offers){
+      if(!offers || offers.length === 0 || fbDismissed){ fbEl.classList.remove('show'); return; }
+      fbEl.classList.add('show');
+      fbEl.innerHTML = offers.map(o => {
+        const msg = '<b>'+escFb(o.signal && o.signal.fromAgent)+'</b> hit '+escFb(o.signal && o.signal.errorCode)+
+          ' — switch to <b>'+escFb(o.target)+'</b>?';
+        const actions = '<div class="fb-actions">'+
+          '<button class="fb-accept" data-session="'+escFb(o.sessionId)+'" data-target="'+escFb(o.target)+'">Switch</button>'+
+          '<button class="fb-dismiss" data-session="'+escFb(o.sessionId)+'">Dismiss</button>'+
+          '</div>';
+        return '<div class="fb-msg">'+msg+'</div>'+actions;
+      }).join('');
+      fbEl.querySelectorAll('.fb-accept').forEach(btn => {
+        btn.addEventListener('click', async ()=>{
+          btn.disabled = true; btn.textContent = 'Switching…';
+          try{
+            const r = await fetch('/api/failover-accept', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ sessionId: btn.dataset.session, targetAgent: btn.dataset.target }),
+            });
+            const d = await r.json();
+            if(d.error || !d.ok || !d.newSessionId){
+              fbEl.innerHTML = '<div class="fb-msg"><b>Failover failed:</b> '+escFb(d.error || d.detail || 'Target agent not ready')+'</div>';
+              return;
+            }
+            fbEl.innerHTML = '<div class="fb-msg">↻ Switched to <b>'+escFb(btn.dataset.target)+'</b> · new session <b>'+escFb(d.newSessionId.slice(0,8))+'</b></div>'+
+              '<div class="fb-actions"><button class="fb-dismiss" id="fb-ok">OK</button></div>';
+            document.getElementById('fb-ok').addEventListener('click', ()=>{ fbDismissed = true; fbEl.classList.remove('show'); });
+          }catch(err){
+            fbEl.innerHTML = '<div class="fb-msg"><b>Failover failed:</b> network error · check daemon</div>';
+          }
+        });
+      });
+      fbEl.querySelectorAll('.fb-dismiss').forEach(btn => {
+        btn.addEventListener('click', ()=>{ fbDismissed = true; fbEl.classList.remove('show'); });
+      });
+    }
+    setInterval(async ()=>{
+      try{
+        const r = await fetch('/api/failover-offers');
+        const d = await r.json();
+        render(d.offers);
+      }catch{ /* fine */ }
+    }, 5000);
+  })();
 
   document.addEventListener('keydown',e=>{
     if(e.key==='Escape'&&_detail)hideD();
     if((e.metaKey||e.ctrlKey)&&e.key==='k'){e.preventDefault();const ta=document.getElementById('main-ta')||document.getElementById('detail-ta');if(ta)ta.focus();}
   });
 
+  // Composer .typing toggle · brand border the moment the input has chars.
+  // The focus-within border handles "input is focused"; the .typing class
+  // handles "input has content" so the affordance stays even if the user
+  // tabs away mid-prompt.
+  function bindTypingState(taEl){
+    if(!taEl) return;
+    const bar = taEl.closest('.input-bar');
+    if(!bar) return;
+    taEl.addEventListener('input', ()=>{
+      if(taEl.value.length > 0) bar.classList.add('typing');
+      else bar.classList.remove('typing');
+    });
+  }
+
   const ta=document.getElementById('main-ta'), btn=document.getElementById('main-btn');
   if(btn)btn.addEventListener('click',()=>submit(ta,btn));
   if(ta)ta.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey&&!ta.disabled&&btn&&!btn.disabled){e.preventDefault();submit(ta,btn);}});
+  bindTypingState(ta);
 
   const dta=document.getElementById('detail-ta'), dbtn=document.getElementById('detail-btn');
-  if(dbtn)dbtn.addEventListener('click',()=>submit(dta,dbtn));
-  if(dta)dta.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey&&!dta.disabled&&dbtn&&!dbtn.disabled){e.preventDefault();submit(dta,dbtn);}});
+  if(dbtn)dbtn.addEventListener('click',()=>submit(dta,dbtn,_detail));
+  if(dta)dta.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey&&!dta.disabled&&dbtn&&!dbtn.disabled){e.preventDefault();submit(dta,dbtn,_detail);}});
+  bindTypingState(dta);
 });
 `;
 export const TASK_HTML_V2 = `<!doctype html>
@@ -448,14 +3935,56 @@ export const TASK_HTML_V2 = `<!doctype html>
 <body>
 <div class="app">
   <div class="header">
-    <span class="logo">codehere</span>
+    <span class="logo"><span class="dot"></span><span class="name">codehere</span></span>
+    <span class="beta-badge" title="codehere is in beta · heading to invite-only early access">beta</span>
+    <span class="local-pill" title="zero telemetry · all data on this machine">
+      <span class="dot"></span>local &middot; <span id="local-host">127.0.0.1:3773</span>
+    </span>
     <span class="budget safe" id="budget"></span>
-    <a href="/" class="v1-link">v1 Dashboard</a>
+    <select class="persona-select" id="persona-select" title="Show only what matters to your role" aria-label="View as role">
+      <option value="all">Everyone</option>
+      <option value="pm">PM view</option>
+      <option value="designer">Designer view</option>
+      <option value="eng">Engineer view</option>
+    </select>
+    <button class="density-toggle" id="density-toggle" title="Toggle compact / standard density">&#8862; Compact</button>
+    <button class="reshape-btn" id="reshape-open" title="Describe the view you want · agent composes from primitives">⌘ Reshape view</button>
+    <button class="share-btn-hdr" id="share-open" title="Share this thread · still local-first · link contains a signed payload, not your data" aria-label="Share thread">↗ Share</button>
+    <button class="settings-btn" id="settings-open" title="Settings · integrations" aria-label="Open settings">⚙</button>
+  </div>
+
+  <!-- v0.8 S3 · Custom-view banner · appears when reshape is active -->
+  <div class="custom-view-banner" id="custom-view-banner">
+    <span class="lbl">custom view</span>
+    <span class="prompt" id="custom-view-prompt"></span>
+    <span class="reset" onclick="resetShape()">reset</span>
   </div>
 
-  <div class="squad-row" id="squad">
+  <!-- Failover banner · ported from v1 on /v1 kill 2026-05-23 -->
+  <div class="failover-banner" id="failover-banner"></div>
+
+  <!-- C-01 · first-run indexing banner · auto-hides once you have ≥ 3 sessions -->
+  <div class="indexing-banner" id="indexing-banner">
+    <span class="what">first run</span>
+    <span>codehere indexed your repo locally · zero telemetry · all state at <code>~/.codehere/</code></span>
+  </div>
+
+  <!-- F-01 · budget threshold warning · only renders when daily spend &gt;= 80% of cap -->
+  <div class="budget-banner" id="budget-banner">
+    <span class="what" id="budget-banner-what"></span>
+    <span id="budget-banner-msg"></span>
+    <span class="hint">free-tier providers (Aider, Gemini free) unaffected</span>
+  </div>
+
+  <div class="squad-row">
     <span style="color:var(--fg-30)">Squad:</span>
-    <span class="squad-agent"><span class="squad-dot offline"></span>loading...</span>
+    <span id="squad" style="display:contents">
+      <span class="squad-agent"><span class="squad-dot offline"></span>loading...</span>
+    </span>
+    <!-- F-02 · cross-worktree alert · only visible when any out-of-cwd session has run > 5m -->
+    <span class="worktree-alert" id="worktree-alert" onclick="if(window._wkTarget)showD(window._wkTarget)">
+      <span class="pulse-dot"></span><span id="worktree-alert-text">other worktree</span>
+    </span>
   </div>
 
   <div class="bar">
@@ -468,6 +3997,7 @@ export const TASK_HTML_V2 = `<!doctype html>
 
   <div class="content">
     <div id="task-list-view" class="content-inner">
+      <div id="host-sessions-strip" style="display:none"></div>
       <div id="task-list">
         <div class="skeleton" id="skeleton">
           <div class="skeleton-card"></div>
@@ -480,9 +4010,9 @@ export const TASK_HTML_V2 = `<!doctype html>
       <div id="detail-view"></div>
       <div class="input-area" style="border-top:none;padding:12px 0">
         <div class="input-bar" style="max-width:100%">
-          <textarea class="input-ta" id="detail-ta" placeholder="Request changes or ask a question..." rows="1" disabled></textarea>
-          <div class="input-meta"><span>Auto</span></div>
-          <button class="send-btn" id="detail-btn" disabled>&#8593;</button>
+          <textarea class="input-ta composer-bar" id="detail-ta" placeholder="Request changes or ask a question..." rows="1" disabled></textarea>
+          <div class="input-meta composer-meta"><span class="pick-agent" title="Auto-pick · best agent for this task">↳ Auto</span><span class="cost-est" title="Estimated cost · based on prompt length + recent agent pricing">~$0.02</span></div>
+          <button class="send-btn composer-send" id="detail-btn" disabled>&#8593;</button>
         </div>
       </div>
     </div>
@@ -490,14 +4020,177 @@ export const TASK_HTML_V2 = `<!doctype html>
 
   <div class="input-area">
     <div class="input-bar">
-      <textarea class="input-ta" id="main-ta" placeholder="Describe a task or ask a question..." rows="1"></textarea>
-      <div class="input-meta"><span>Auto</span></div>
-      <button class="send-btn" id="main-btn">&#8593;</button>
+      <textarea class="input-ta composer-bar" id="main-ta" placeholder="Describe a task or ask a question..." rows="1"></textarea>
+      <div class="input-meta composer-meta"><span class="pick-agent" title="Auto-pick · best agent for this task">↳ Auto</span><span class="cost-est" title="Estimated cost · based on prompt length + recent agent pricing">~$0.02</span></div>
+      <button class="send-btn composer-send" id="main-btn">&#8593;</button>
+    </div>
+    <div class="kbd-hint">
+      <span class="item"><span class="kbd">&#8629;</span> send</span>
+      <span class="item"><span class="kbd">&#8679;&#8629;</span> newline</span>
+      <span class="item"><span class="kbd">&#8984;K</span> focus composer</span>
+      <span class="item"><span class="kbd">Esc</span> close modal</span>
     </div>
   </div>
 
+  <!-- v0.8 S3 · Reshape modal · ported from demo v12 lines 1142-1176 -->
+  <div class="reshape-modal" id="reshape-modal">
+    <div class="reshape-card">
+      <button class="close-x" id="reshape-close" aria-label="Close">×</button>
+      <div class="k">reshape this view</div>
+      <h2>Describe the view you want.</h2>
+      <p class="sub">Your agent composes the layout from codehere's shared primitives. Software ships building blocks · the final interface is yours to author.</p>
+      <div class="reshape-input">
+        <input id="reshape-input" placeholder="e.g. just show me what shipped + cost · no code"/>
+        <button id="reshape-submit">Compose</button>
+      </div>
+      <div class="reshape-suggestions persona prims">
+        <div class="lbl">or pick a quick start</div>
+        <button class="pill" data-shape="ship-only" data-prompt="just show me what shipped and the cost · hide everything else">just show me what shipped + cost <span class="what">— Final Report + file chips only</span></button>
+        <button class="pill" data-shape="velocity" data-prompt="velocity view · outcomes + duration + agent allocation · hide audit and code">velocity view <span class="what">— outcomes + time + cost · for daily check-in</span></button>
+        <button class="pill" data-shape="security" data-prompt="security view · highlight hook blocks, overrides, trust grades · hide narrative">security view <span class="what">— blocks / overrides / trust amplified</span></button>
+      </div>
+      <div class="agent-compose recomposing" id="agent-compose">
+        <div class="agent-line"><span style="font-family:var(--mono); color:var(--accent); font-weight:600">claude-code</span><span style="color:var(--fg-40)">· composing your view from shared primitives</span></div>
+        <div style="margin-top: 8px;">
+          <div class="line">read <span class="info">user prompt</span> · "<span id="compose-prompt-echo"></span>"</div>
+          <div class="line">analyze · <span class="kw">5 primitives in scope</span>: <code style="background:var(--bg-2);padding:0 4px;border-radius:2px">turn</code> · <code style="background:var(--bg-2);padding:0 4px;border-radius:2px">panel</code> · <code style="background:var(--bg-2);padding:0 4px;border-radius:2px">artifact</code> · <code style="background:var(--bg-2);padding:0 4px;border-radius:2px">audit-line</code> · <code style="background:var(--bg-2);padding:0 4px;border-radius:2px">tool-card</code></div>
+          <div class="line">compose <span class="kw">view-config</span> · <span id="compose-config" style="color:var(--fg-90)"></span></div>
+          <div class="line">apply · <span class="ok">view ready · 0.4s</span></div>
+          <div class="line"><span class="ok">&check;</span> custom view active · <span style="color:var(--fg-50)">re-shape any time by clicking the button</span></div>
+        </div>
+      </div>
+      <div class="primitives-note">
+        <b>codehere ships primitives, not screens.</b> Your agent composes the layout from these building blocks · you author the final view in plain English.
+        <div class="prims">
+          <span class="p">turn</span>
+          <span class="p">panel</span>
+          <span class="p">artifact</span>
+          <span class="p">audit-line</span>
+          <span class="p">tool-card</span>
+          <span class="p">verified-block</span>
+          <span class="p">file-chip</span>
+          <span class="p">write-pass</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- v0.8 S4 · share-thread modal · ported from demo v12 lines 1126-1139 -->
+  <div class="share-modal" id="share-modal" role="dialog" aria-modal="true" aria-labelledby="share-title">
+    <div class="share-card">
+      <div class="head" id="share-title">↗ Share this thread <span class="tag">· still local-first</span></div>
+      <p class="blurb">Codehere generates a signed payload (steps · artifacts · Final Report · audit chain) you can paste into Slack, an email, a PR description. Your code never leaves your machine — only the synthesized record.</p>
+      <div class="share-link-box" id="share-link-box">codehere://thread/<span id="share-link-id">…</span>?signed=ed25519:<span id="share-link-fp">…</span></div>
+      <div class="share-actions">
+        <button class="share-btn-primary" id="share-copy-link">Copy link</button>
+        <button class="share-btn-secondary" id="share-download">Download bundle (.json)</button>
+        <button class="share-btn-secondary" id="share-close">Close</button>
+      </div>
+      <p class="share-foot">Link contains a signed payload · not source code · recipient verifies chain integrity locally before trusting.</p>
+    </div>
+  </div>
+  <div class="share-toast" id="share-toast">Link copied</div>
+
+  <!-- v0.9 S7 · overlay-renderer · inspect-and-act for ctx-source URLs -->
+  <div class="or-overlay overlay-render" id="or-overlay" role="dialog" aria-modal="true">
+    <div class="or-card or-content">
+      <div class="or-head">
+        <span class="src" id="or-src">linear</span>
+        <span class="meta" id="or-meta">…</span>
+        <span class="audit"><b>● audit</b> · captured locally</span>
+        <button class="or-close" id="or-close" aria-label="Close">×</button>
+      </div>
+      <div class="or-body" id="or-body">
+        <div class="preview-loading">fetching…</div>
+      </div>
+      <div class="or-composer or-agent-reply">
+        <span class="hint" id="or-hint">Ask the agent about this · all interaction captured in audit chain</span>
+        <div class="row">
+          <input id="or-input" placeholder="e.g. summarize the blocker · or what's the priority?"/>
+          <button id="or-ask" disabled title="Composer ships in S7 Part D">Ask agent</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- v0.9 S6 · W-PASS approval modal · demo v12 lines 2030-2050 -->
+  <button class="wp-pending-badge" id="wp-pending-badge" title="An agent wants to make a write · click to review">↗ write awaits</button>
+  <div class="wp-modal" id="wp-modal" role="dialog" aria-modal="true" aria-labelledby="wp-title">
+    <div class="wp-card write-pass">
+      <div class="wp-banner"><span class="dot"></span><span>write-pass · agent action · awaits your approval</span></div>
+      <h3 class="wp-title" id="wp-title">…</h3>
+      <p class="wp-reason" id="wp-reason">…</p>
+      <div class="wp-meta">
+        tool · <b id="wp-target">…</b> · third-party API · <span style="color:var(--accent)">mediated by codehere</span>
+      </div>
+      <div class="wp-meta">
+        agent · <b id="wp-emitter">…</b> · session <span id="wp-session">…</span>
+      </div>
+      <div class="wp-meta" id="wp-trust-row" style="display:none">
+        domain · <b id="wp-trust-host">…</b> · trust grade
+        <span class="wp-trust-grade" id="wp-trust-grade">?</span>
+        <span id="wp-trust-reason" style="color:var(--fg-50)"></span>
+      </div>
+      <div class="wp-payload-wrap" id="wp-payload-wrap">
+        <div class="wp-payload-head">
+          <span class="method" id="wp-method">PATCH</span>
+          <span id="wp-targetline">…</span>
+        </div>
+        <div class="wp-payload" id="wp-payload">…</div>
+      </div>
+      <textarea class="wp-payload-edit" id="wp-payload-edit" style="display:none" spellcheck="false"></textarea>
+      <div class="wp-actions" id="wp-actions">
+        <button class="wp-btn-approve" id="wp-approve">Approve + send</button>
+        <button class="wp-btn-edit" id="wp-edit">Edit payload</button>
+        <button class="wp-btn-cancel" id="wp-cancel">Cancel</button>
+      </div>
+      <div class="wp-actions" id="wp-actions-editing" style="display:none">
+        <button class="wp-btn-save" id="wp-save">Save + send</button>
+        <button class="wp-btn-cancel" id="wp-edit-cancel">Discard edit</button>
+      </div>
+      <p class="wp-foot">codehere mediates every agent write to a third-party tool · audit chain captures URL · payload · approval · response · signed timestamp · one verifiable thread instead of scattered tool logs</p>
+      <div class="wp-result" id="wp-result" style="display:none"></div>
+    </div>
+  </div>
+
+  <!-- Settings drawer (A-09) · holds Context Sources + future toggles -->
+  <div class="drawer-overlay" id="drawer-overlay"></div>
+  <aside class="drawer" id="settings-drawer" aria-hidden="true">
+    <button class="drawer-close" id="settings-close" aria-label="Close settings">×</button>
+    <div class="drawer-title">Settings</div>
+
+    <h3>Integrations</h3>
+    <p class="sub">Connect external tools so agents can read <code style="background:var(--bg-2);padding:1px 4px;border-radius:3px;font-family:var(--mono);font-size:10px">linear://</code> · <code style="background:var(--bg-2);padding:1px 4px;border-radius:3px;font-family:var(--mono);font-size:10px">figma://</code> · <code style="background:var(--bg-2);padding:1px 4px;border-radius:3px;font-family:var(--mono);font-size:10px">github://</code> · <code style="background:var(--bg-2);padding:1px 4px;border-radius:3px;font-family:var(--mono);font-size:10px">drawio://</code> URLs in prompts.</p>
+    <div id="cs-list">
+      <div style="color:var(--fg-40); font-size:11px">loading...</div>
+    </div>
+  </aside>
+
   <div id="offline-banner" class="offline-banner" style="display:none">You're offline. Actions will resume when connected.</div>
   <div id="toast" style="display:none;position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:12px;color:var(--fg-70);z-index:100"></div>
+
+  <!-- RADICAL bottom-chrome collapse (2026-05-24) · audit-chain panel
+       inlined into the OSS-footer status bar · ~115px → ~28px ·
+       all load-bearing info preserved (dots · stats · Verify button) ·
+       only the redundant subtitle + panel-card chrome removed. -->
+  <div class="oss-footer">
+    <span class="brand">codehere</span>
+    <span class="sep">&middot;</span>
+    <span id="oss-version">v0.6.x</span>
+    <span class="sep">&middot;</span>
+    <a href="https://github.com/muhammadegaa/codehere" target="_blank" rel="noopener">github</a>
+    <span class="sep">&middot;</span>
+    <span>MIT</span>
+    <span class="sep">&middot;</span>
+    <span class="audit-chain-panel">
+      <span class="audit-chain-title">audit</span>
+      <span id="audit-chain-stats" style="color:var(--fg-50);font-family:var(--mono);font-size:10.5px">— entries · —</span>
+      <span id="audit-chain-dots" class="audit-chain-dots" style="display:inline-flex;gap:3px"></span>
+      <button id="audit-verify-btn" class="audit-chain-btn" onclick="verifyAuditChain()" title="Walk the chain · verify SHA-256 integrity without trusting the daemon">Verify</button>
+      <span id="audit-result" class="audit-chain-result" style="color:var(--fg-50)"></span>
+    </span>
+    <span class="right">built locally &middot; zero telemetry</span>
+  </div>
 </div>
 <script>${APP_SCRIPT}</script>
 </body>