codehere 0.8.0 → 1.0.1

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

@@ -1,4173 +1,31 @@
-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%);
-    --fg: hsl(0 0% 98%); --fg-70: rgba(255,255,255,0.70);
-    --fg-50: rgba(255,255,255,0.50); --fg-40: rgba(255,255,255,0.40);
-    --fg-30: rgba(255,255,255,0.30); --fg-20: rgba(255,255,255,0.20);
-    --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;
-  }
-  * { box-sizing: border-box; margin: 0; }
-  body {
-    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;
-  }
-  /* 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: 14px;
-    padding: 10px 20px; border-bottom: 1px solid var(--border-soft);
-    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); }
-
-  /* project-memory nudge · same quiet family as .audit-line (trust present-
-     but-quiet); .on = the post-click confirmation state */
-  .mem-nudge {
-    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;
-  }
-  .mem-nudge .mem-btn {
-    background: none; border: 1px solid var(--border); border-radius: 4px;
-    color: var(--fg-70); font-family: var(--mono); font-size: 10.5px;
-    padding: 2px 8px; cursor: pointer; margin-left: 4px;
-  }
-  .mem-nudge .mem-btn:hover { border-color: var(--accent); color: var(--fg); }
-  .mem-nudge.on { border-left-color: rgba(40,200,64,0.4); 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[data-persona="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[data-persona="auditor"] .verifier-panel { box-shadow: 0 0 0 2px rgba(40,200,64,0.18); }
-  body[data-persona="auditor"] .hook-badge { transform: scale(1.05); }
-  body[data-persona="auditor"] .file-chip .trust { font-weight: 700; padding: 2px 7px; }
-  body[data-persona="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); }
-
-  /* Reshape shapes recompose the goal room too (slice 4): "just what shipped"
-   * / velocity hide per-turn meta; the audit/security shape amplifies the
-   * room's audit line. Reuses the existing body.shape-* + .p-eng/.audit-line. */
-  body.shape-ship-only #task-list .card-row2 .p-eng,
-  body.shape-velocity #task-list .card-row2 .p-eng { display: none !important; }
-  body.shape-security #task-list .audit-line { background: rgba(74,144,226,0.06); border-left-color: #4a90e2; font-size: 11.5px; padding: 8px 14px; }
-
-  /* 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;
-  }
-  .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);
-    border-radius: 6px;
-  }
-  .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);
-    font-size: 11px; color: var(--fg-50); flex-shrink: 0;
-  }
-  .squad-agent { display: flex; align-items: center; gap: 4px; }
-  .squad-dot { width: 6px; height: 6px; border-radius: 50%; }
-  .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;
-    padding: 10px 20px; border-bottom: 1px solid var(--border-soft);
-    flex-shrink: 0;
-  }
-  .new-btn {
-    background: var(--accent); color: #000; font-weight: 600;
-    border: none; border-radius: 6px; padding: 6px 14px;
-    font-family: var(--sans); font-size: 12px; cursor: pointer; white-space: nowrap;
-  }
-  .new-btn:hover { filter: brightness(1.05); }
-
-  .filter-tab {
-    font-family: var(--mono); font-size: 11px; color: var(--fg-50);
-    cursor: pointer; padding: 4px 10px; border-radius: 6px;
-    border: 1px solid transparent; white-space: nowrap;
-  }
-  .filter-tab:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
-  .filter-tab.active { color: var(--fg); background: rgba(255,154,118,0.08); border-color: rgba(255,154,118,0.25); }
-  .filter-tab .cnt { color: var(--fg-40); margin-left: 2px; }
-
-  .content { flex: 1; overflow-y: auto; }
-  .content-inner { padding: 16px 20px; max-width: 900px; margin: 0 auto; }
-  .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);
-  }
-
-  /* Goal-first home · each project (goal) is a group; its tasks live inside.
-   * The home is organized by what you're working toward, not by status. */
-  .goal-group { margin: 0 0 22px; }
-  .goal-head {
-    display: flex; align-items: baseline; gap: 10px;
-    padding: 0 0 8px; margin: 20px 0 10px;
-    border-bottom: 1px solid var(--border);
-  }
-  .goal-group:first-child .goal-head { margin-top: 0; }
-  .goal-title { font-size: 15px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
-  .goal-meta { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); margin-left: auto; }
-  .goal-head { cursor: pointer; }
-  .goal-head:hover .goal-title { color: var(--accent); }
-  .goal-head:hover .goal-meta { color: var(--fg-70); }
-
-  /* The goal room · a single goal opened to its multi-agent turns, in order. */
-  .room-head { margin: 4px 0 14px; }
-  .room-back { background: transparent; border: 0; color: var(--fg-50); font-family: var(--mono); font-size: 11px; cursor: pointer; padding: 0; margin-bottom: 12px; }
-  .room-back:hover { color: var(--fg); }
-  .room-title { font-size: 20px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
-  .room-sub { font-family: var(--mono); font-size: 11px; color: var(--fg-40); margin-top: 5px; }
-  .turns-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--fg-40); text-transform: uppercase; margin: 18px 0 12px; }
-
-  /* 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.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.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; }
-  .status-icon.paused { background: var(--warn); }
-  .status-icon.done { background: var(--allow); }
-  .status-icon.failed { background: var(--block); }
-  .status-icon.crashed { background: var(--block); }
-  .status-icon.killed { background: var(--fg-30); }
-  .status-icon.queued { background: var(--fg-30); }
-  .status-icon.blocked { background: var(--warn); }
-  @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; 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 {
-    font-family: var(--mono); font-size: 10px; padding: 3px 8px;
-    border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
-    background: transparent; color: var(--fg-50);
-  }
-  .card-btn:hover { color: var(--fg); border-color: var(--fg-30); }
-  .card-btn.kill:hover { color: var(--block); border-color: var(--block); }
-  .card-btn.pause:hover { color: var(--warn); border-color: var(--warn); }
-  .card-btn.verify:hover { color: var(--allow); border-color: var(--allow); }
-  .card-btn.restart:hover { color: var(--accent); border-color: var(--accent); }
-  .verify-badge { font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 4px; }
-  .verify-badge.verified { color: var(--allow); background: rgba(40,200,64,0.10); }
-  .verify-badge.unverified { color: var(--fg-30); background: rgba(255,255,255,0.04); }
-  .verify-badge.failed { color: var(--block); background: rgba(255,95,87,0.10); }
-
-  .empty-state { text-align: center; padding: 60px 20px; color: var(--fg-40); }
-  .empty-state h2 { color: var(--fg-70); margin-bottom: 8px; font-weight: 500; font-size: 15px; }
-
-  .skeleton { padding: 16px 20px; max-width: 900px; margin: 0 auto; }
-  .skeleton-card {
-    height: 60px; border-radius: 8px; margin-bottom: 8px;
-    background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
-    background-size: 200% 100%; animation: shimmer 1.5s ease infinite;
-  }
-  @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: 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-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); }
-  .outcome-item .pending { color: var(--fg-40); }
-  .progress-dots { display: flex; gap: 3px; margin: 8px 0; }
-  .pdot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border); }
-  .pdot.done { background: var(--allow); border-color: var(--allow); }
-  .pdot.current { background: var(--accent); border-color: var(--accent); animation: pulse 1.5s ease infinite; }
-  .pdot.pending { background: transparent; }
-
-  .verdict { font-family: var(--mono); font-size: 11px; margin-top: 8px; }
-  .verdict.unverified { color: var(--fg-40); }
-  .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);
-    cursor: pointer; padding: 8px 0; user-select: none;
-  }
-  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.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;
-    background: var(--bg-1); flex-shrink: 0;
-  }
-  .input-bar {
-    display: flex; align-items: center; gap: 10px;
-    background: var(--bg-2); border: 1px solid var(--border);
-    border-radius: 10px; padding: 10px 14px; max-width: 900px; margin: 0 auto;
-  }
-  /* 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;
-    resize: none; outline: none; height: 22px; line-height: 22px;
-  }
-  .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; 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; background: transparent; border: none; font: inherit; -webkit-appearance: none; appearance: none; }
-  .input-meta .pick-agent:hover { background: rgba(255,255,255,0.05); color: var(--fg); }
-  .input-meta select.pick-agent option { background: var(--bg-2, #1a1a1f); 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;
-    justify-content: center; cursor: pointer; flex-shrink: 0;
-    transition: transform 0.2s;
-  }
-  .send-btn:hover { filter: brightness(1.05); }
-  .send-btn:disabled { opacity: 0.35; cursor: default; }
-  .offline-banner {
-    text-align: center; padding: 4px; font-size: 10px; font-family: var(--mono);
-    color: var(--warn); background: rgba(254,188,46,0.06);
-    border-bottom: 1px solid rgba(254,188,46,0.15);
-  }
-  ::-webkit-scrollbar { width: 6px; }
-  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-`;
-const APP_SCRIPT = `
-const _cached = {};
-let _filter = 'all', _detail = null, _room = null, _offline = false, _autoOpened = false;
-// Project-memory state for the open room · null = unknown (fetch in flight),
-// false = agents forget this project (show the nudge), true = memory already
-// on (stay quiet), 'just-on' = turned on from the nudge this visit (confirm).
-let _roomMemory = null;
-const ICONS = { queued:'\\u23F3', running:'\\u25CF', paused:'\\u23F8', blocked:'\\uD83D\\uDD12', done:'\\u2713', failed:'\\u2715', crashed:'!', killed:'\\u2298' };
-const STAT_ORDER = ['running','queued','paused','blocked','done','failed','crashed','killed'];
-const FILTERS = { all: s=>true, running: s=>['running','queued','paused','blocked'].includes(s.status), done: s=>['done','completed'].includes(s.status), failed: s=>['failed','crashed','killed','error'].includes(s.status) };
-
-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'; }
-// 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) {
-  // Only 'kill' is wired (POST /api/task/:id/kill). Pause/Resume/Restart had NO
-  // backend endpoint — they rendered as live buttons that silently no-op'd (R11
-  // honest-state lie, 2026-06-03). Removed until real process control lands; Kill
-  // and Cancel both map to the wired kill, so every rendered control here works.
-  const m={
-    running:'<button class="card-btn kill" onclick="event.stopPropagation();a(\\'kill\\',\\''+s+'\\')">Kill</button>',
-    paused:'<button class="card-btn kill" onclick="event.stopPropagation();a(\\'kill\\',\\''+s+'\\')">Kill</button>',
-    queued:'<button class="card-btn kill" onclick="event.stopPropagation();a(\\'kill\\',\\''+s+'\\')">Cancel</button>',
-    blocked:'<button class="card-btn kill" onclick="event.stopPropagation();a(\\'kill\\',\\''+s+'\\')">Cancel</button>',
-  };
-  return m[mapped(s)]||'';
-}
-function statIcon(s) { return '<span class="status-icon '+s+'"></span>'; }
-function verB(v) { return v&&v!=='unverified'?'<span class="verify-badge '+v+'">'+v+'</span>':''; }
-function tagHtml(t) { return t.map(x=>'<span style="font-size:10px;color:var(--fg-40);font-family:var(--mono)">'+x+'</span>').join(''); }
-
-function st(s) {
-  if(s==='completed')return'done'; if(s==='error'||s==='killed')return'failed'; if(s==='paused')return'paused'; return s;
-}
-function aStat(s) { return s==='blocked'?'paused':s==='killed'?'failed':s==='crashed'?'failed':st(s); }
-function mapped(s) { return s==='queued'?'running':s==='blocked'?'paused':aStat(s); }
-
-function findS(id) { const s=allS(_cached.tasks||{}); return s.find(x=>x.sessionId===id)||null; }
-
-function render() {
-  if(_detail){ const t=findS(_detail); if(t)renderD(t); else{ _detail=null; if(_room)renderRoom(); else renderL(); } }
-  else if(_room) renderRoom();
-  else renderL();
-  upCnt(); upBud(); upSq(); upWk(); upIdx();
-}
-
-// The goal room — one goal opened to its tasks as a chronological thread of
-// agent turns. Renders into #task-list (same surface as the goals list).
-function openRoom(enc){
-  _room=decodeURIComponent(enc||''); _detail=null;
-  // Project-memory status for the nudge — fetched once per entry from the
-  // daemon (the SAME readiness the injector acts on, not a guess).
-  _roomMemory=null;
-  (function(forCwd){
-    fetch('/api/memory/status?cwd='+encodeURIComponent(forCwd)).then(x=>x.json()).then(j=>{
-      if(_room===forCwd){ _roomMemory=!!j.ready; render(); }
-    }).catch(()=>{});
-  })(_room);
-  document.getElementById('task-list-view').style.display='';
-  document.getElementById('task-detail-view').style.display='none';
-  document.body.classList.remove('detail-open');
-  // Hand-off affordance: inside a room the composer targets THIS goal (cwd is
-  // pinned in submit) and the picker defaults to whoever worked it last —
-  // continuing is zero clicks, handing to a different agent is one visible
-  // click. Set once on entry (not in renderRoom, which re-runs every poll and
-  // would stomp the user's choice).
-  const ta=document.getElementById('main-ta');
-  if(ta) ta.placeholder='Add the next task in this goal\\u2026 any agent picks up where the last one left off';
-  const ap=document.getElementById('agent-pick');
-  if(ap){
-    const turns=allS(_cached.tasks||{}).filter(x=>!/^demo-/.test(x.sessionId||'')&&(x.cwd||'')===_room&&x.agent).sort((a,b)=>(a.startedAt||0)-(b.startedAt||0));
-    const raw=turns.length?String(turns[turns.length-1].agent):'';
-    ap.value=['claude-code','codex','aider','gemini','opencode'].indexOf(raw)>=0?raw:'auto';
-  }
-  render();
-}
-function closeRoom(){
-  _room=null; _roomMemory=null;
-  const ta=document.getElementById('main-ta');
-  if(ta) ta.placeholder='Describe a task or ask a question...';
-  const ap=document.getElementById('agent-pick'); if(ap) ap.value='auto';
-  render();
-}
-async function initRoomMemory(btn){
-  if(!_room) return;
-  if(btn){ btn.disabled=true; btn.textContent='turning on\\u2026'; }
-  try{
-    const r=await fetch('/api/memory/init',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({cwd:_room})});
-    if(r.ok){ _roomMemory='just-on'; render(); }
-    else { const e=await r.json().catch(()=>({})); al('Could not turn on memory: '+(e.error||e.reason||'unknown')); if(btn){btn.disabled=false;btn.textContent='turn on project memory';} }
-  }catch(e){ al('Network error: '+e.message); if(btn){btn.disabled=false;btn.textContent='turn on project memory';} }
-}
-function renderRoom(){
-  const c=document.getElementById('task-list');
-  const _hs=document.getElementById('host-sessions-strip'); if(_hs){ _hs.style.display='none'; }
-  const esc=s=>String(s==null?'':s).replace(/[&<>"]/g,ch=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[ch]));
-  const cwd=_room;
-  const items=allS(_cached.tasks||{}).filter(x=>!/^demo-/.test(x.sessionId||'') && (x.cwd||'')===cwd);
-  items.sort((a,b)=>(a.startedAt||0)-(b.startedAt||0)); // turns in the order they happened
-  const projects=_cached.projects||[];
-  const p=projects.find(x=>x.cwd===cwd);
-  const title=(p&&p.title)||(cwd?(cwd.split('/').filter(Boolean).pop()||'Goal'):'Goal');
-  const agents=[...new Set(items.map(x=>x.agent).filter(Boolean))];
-  let html='<div class="room-head"><button class="room-back" onclick="closeRoom()">\\u2190 all goals</button>';
-  html+='<div class="room-title">'+esc(title)+'</div>';
-  // Persona-adaptive (direction B): everyone sees the plain-English outcome;
-  // the technical path is engineer-only (.p-eng · hidden for PM/designer via
-  // the existing body[data-persona] CSS — recomposes live, no re-render).
-  const _done=items.filter(x=>x.status==='completed'||x.status==='done').length;
-  const _outcome=items.length?(_done===items.length?('\\u2713 all '+items.length+' shipped'):(_done+' of '+items.length+' shipped')):'no tasks yet';
-  html+='<div class="room-sub">'+esc(_outcome)+(agents.length?' \\u00b7 '+agents.map(esc).join(', '):'')+'<span class="p-eng"> \\u00b7 '+esc(cwd||'')+'</span></div></div>';
-  if(items.length){
-    html+='<div class="turns-label">How your agents worked this goal, in order</div>';
-    for(const t of items) html+=cardH(t);
-    // Auditor signal · subtle for everyone, amplified for the Auditor persona
-    // via body[data-persona="auditor"] .audit-line. Honest: real step count,
-    // and every step IS in the local hash-chained audit log.
-    const _stepsTotal=items.reduce((n,t)=>n+((t.steps||[]).length),0);
-    html+='<div class="audit-line allow" style="margin-top:14px">&#128274; every step in this goal is in the local audit chain \\u00b7 <b>'+_stepsTotal+' steps</b> \\u00b7 verify \\u21bb</div>';
-  } else {
-    html+='<div class="empty-state"><h2>No tasks in this goal yet.</h2></div>';
-  }
-  // Project-memory nudge (stranger-walk finding 2026-06-06): web-only users
-  // never run codehere-init, so agents silently get NO memory of the
-  // project. Honest + quiet: rendered ONLY when the daemon says memory is
-  // off; the confirmation says "from the next task" because injection
-  // happens at spawn — no fake instant effect.
-  if(_roomMemory===false){
-    html+='<div class="mem-nudge">&#129504; agents forget this project between runs \\u00b7 <button class="mem-btn" onclick="initRoomMemory(this)">turn on project memory</button></div>';
-  } else if(_roomMemory==='just-on'){
-    html+='<div class="mem-nudge on">\\u2713 project memory is on \\u2014 agents will remember this project from the next task</div>';
-  }
-  c.innerHTML=html;
-}
-
-// 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 esc=s=>String(s==null?'':s).replace(/[&<>"]/g,ch=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[ch]));
-  const fl=all.filter(FILTERS[_filter]||FILTERS.all);
-  let html='';
-  // Demo-shape sessions (id prefix 'demo-') render AFTER the goals — they
-  // demonstrate the product, but the home leads with YOUR goals (spec:
-  // "Home is a list of your goals"; demos were burying it).
-  const demo=fl.filter(x=>/^demo-/.test(x.sessionId||''));
-  const rest=fl.filter(x=>!/^demo-/.test(x.sessionId||''));
-  // Goal-first home: group the rest by project (the goal/room), not by status.
-  // cwd → project title (from /api/projects); fall back to the folder name.
-  const projects=_cached.projects||[];
-  const titleFor=cwd=>{
-    if(!cwd) return 'Ungrouped';
-    const p=projects.find(x=>x.cwd===cwd);
-    if(p&&p.title) return p.title;
-    const parts=String(cwd).split('/').filter(Boolean);
-    return parts.length?parts[parts.length-1]:'Ungrouped';
-  };
-  const groups=new Map();
-  for(const t of rest){
-    const key=t.cwd||'ungrouped';
-    if(!groups.has(key)) groups.set(key,{cwd:t.cwd,items:[]});
-    groups.get(key).items.push(t);
-  }
-  const lastTs=g=>g.items.reduce((m,x)=>Math.max(m,x.startedAt||0),0);
-  const ordered=[...groups.values()].sort((a,b)=>lastTs(b)-lastTs(a));
-  let prevGroupTs=null;
-  for(const g of ordered){
-    // Time-gap separator BETWEEN goals (ordered by recency) — a big gap means
-    // these goals are from a different stretch of work ("last week").
-    const gts=lastTs(g);
-    if(prevGroupTs!==null && gts>0 && prevGroupTs>0){
-      const gg=Math.abs(prevGroupTs-gts);
-      if(gg>2*3600*1000){ html+='<div class="time-gap"><span class="line"></span><span class="label">'+fmtGap(gg)+'</span><span class="line"></span></div>'; }
-    }
-    prevGroupTs=gts;
-    g.items.sort((a,b)=>(b.startedAt||0)-(a.startedAt||0));
-    const running=g.items.filter(x=>['running','queued','paused','blocked'].includes(x.status)).length;
-    const meta=g.items.length+' task'+(g.items.length===1?'':'s')+(running?' · '+running+' running':'');
-    html+='<div class="goal-group"><div class="goal-head" data-goal-cwd="'+encodeURIComponent(g.cwd||'')+'" onclick="openRoom(\\''+encodeURIComponent(g.cwd||'')+'\\')"><span class="goal-title">'+esc(titleFor(g.cwd))+'</span><span class="goal-meta">'+esc(meta)+' \\u00b7 open \\u2192</span></div>';
-    // Time-gap separator within a goal · a big gap between consecutive tasks
-    // in the same goal is meaningful ("picked this back up 3 days later").
-    let prevTs=null;
-    for(const t of g.items){
-      const ts=t.startedAt||0;
-      if(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;
-    }
-    html+='</div>';
-  }
-  if(demo.length){
-    html+='<div class="section-label featured">Featured</div>';
-    for(const t of demo) html+=cardH(t);
-  }
-  if(!html){
-    const h={all:'No goals yet. Type a task below to start one.',running:'No running tasks.',done:'No completed tasks.',failed:'No failed tasks.'};
-    html='<div class="empty-state"><h2>'+(h[_filter]||'No tasks found.')+'</h2></div>';
-  }
-  c.innerHTML=html;
-}
-
-function renderHostSessions(data){
-  const strip=document.getElementById('host-sessions-strip');
-  if(!strip)return;
-  // The observed-sessions strip belongs to the goals home, not inside a room.
-  if(_room){ strip.style.display='none'; strip.innerHTML=''; 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;
-  // 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"><span class="p-eng">'+metaParts.join('')+'</span>'+verB(t.verification)+outcomeHtml+'</div>'
-    +stalledHtml
-    +(cardActions(t.sessionId)?'<div class="card-row3">'+cardActions(t.sessionId)+'</div>':'')+'</div>';
-}
-
-function upCnt() {
-  const s=allS(_cached.tasks||{}), f={all:s.length,running:s.filter(x=>['running','queued','paused','blocked'].includes(x.status)).length,done:s.filter(x=>x.status==='completed'||x.status==='done').length,failed:s.filter(x=>['error','killed','crashed','failed'].includes(x.status)).length};
-  const set=(id,n)=>{const e=document.getElementById(id);if(e)e.textContent=n;};
-  set('c-all',f.all);set('c-running',f.running);set('c-done',f.done);set('c-failed',f.failed);
-}
-
-function upBud() {
-  const p=_cached.pricing||_cached.tasks?.pricing;
-  const e=document.getElementById('budget');
-  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',state:d.auto.state}]:[], all=[...auto,...a];
-  const e=document.getElementById('squad');
-  // 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>';
-}
-// 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;
-  document.querySelectorAll('.filter-tab').forEach(el=>el.classList.toggle('active',el.dataset.filter===f));
-  if(_cached.tasks)render();
-}
-
-function showD(id){
-  _detail=id;
-  const t=findS(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('');
-
-  // 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());
-  // §G R8 — green ✓ "Final Report" ONLY for a verified live-agent summary
-  // (source === 'agent-summary'). Every other source — deterministic fallback,
-  // error-recovery, mock synthesis — renders an honest ⚠, never a fake ✓.
-  // POSITIVE allowlist (not deny-one) so a new/unknown source can't sneak a ✓.
-  const reportSource = (t.finalReport && t.finalReport.source) || '';
-  const isVerifiedAgentReport = reportSource === 'agent-summary';
-  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+=(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 && isVerifiedAgentReport) {
-      oHtml+='<div class="outcome-item"><span class="check">'+ms(true)+'</span> Final Report</div>';
-    } else if(hasReportText) {
-      const _rl = reportSource==='deterministic' ? 'No written report \\u2014 recorded facts only'
-                : reportSource==='error-recovery' ? 'Final Report \\u2014 task did not complete'
-                : 'Final Report \\u2014 unverified (not a live-agent summary)';
-      oHtml+='<div class="outcome-item"><span class="pending">\\u26A0</span> '+_rl+'</div>';
-    } else if(isTerminal) {
-      oHtml+='<div class="outcome-item"><span class="pending">\\u26A0</span> Final Report unavailable</div>';
-    }
-  }
-  oHtml+='</div>';
-
-  // 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>'
-    :'';
-
-  // 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;
-    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>'
-    +'<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" 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; }
-}
-
-// 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);}}
-
-async function fetchAll() {
-  const sk=document.getElementById('skeleton');if(sk){const p=sk.parentNode;if(p)p.removeChild(sk);}
-  try {
-    const [t,r,pj]=await Promise.all([fetch('/api/tasks').then(x=>x.json()),fetch('/api/readiness/agents').then(x=>x.json()),fetch('/api/projects').then(x=>x.json()).catch(()=>({projects:[]}))]);
-    _cached.tasks=t;_cached.readiness=r;_cached.projects=(pj&&pj.projects)||[];
-    if(t.pricing)_cached.pricing=t.pricing;
-    // Auto-open the most relevant thread on first load (running > most-recent) —
-    // landing on a bare list "did nothing" feel (Ega 2026-06-02). Once only, and
-    // only if the user hasn't already navigated; Back still returns to the list.
-    if(!_autoOpened){
-      const _all=allS(t||{});
-      if(_all.length){
-        _autoOpened=true;
-        if(_detail===null){
-          // Demos never hijack first load — auto-open is for YOUR work
-          // (a seeded demo stuck on "running" was stealing it · 2026-06-06 walk).
-          const _real=_all.filter(x=>!/^demo-/.test(x.sessionId||''));
-          const _act=_real.filter(x=>['running','queued','paused','blocked'].includes(x.status));
-          const _pool=_act.length?_act:_real.slice();
-          _pool.sort((a,b)=>(b.startedAt||0)-(a.startedAt||0));
-          const _pick=_pool[0];
-          if(_pick&&_pick.sessionId){ showD(_pick.sessionId); }
-        }
-      }
-    }
-    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());
-      if(p&&p.budget){_cached.pricing={dailyBudgetCents:Math.round((p.budget.dailyUsd||0)*100),spentTodayCents:Math.round((p.totalUsd||0)*100)}; upBud();}
-    }
-  }catch{}
-}
-
-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 {
-    // 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';
-    let body;
-    if(taskId){ body=JSON.stringify({text:p}); }
-    else {
-      // Room-aware spawn: typing while a goal room is open adds the task TO
-      // that goal (cwd pinned to the room) — before this, the room composer
-      // silently spawned OUTSIDE the room, the same routing lie as the
-      // follow-up bug above. Agent comes from the visible picker; 'auto'
-      // omits it so the server's conductor default applies unchanged.
-      const payload={prompt:p};
-      if(_room) payload.cwd=_room;
-      const ap=document.getElementById('agent-pick');
-      if(ap&&ap.value&&ap.value!=='auto') payload.agent=ap.value;
-      body=JSON.stringify(payload);
-    }
-    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;_submitting=false;}
-}
-
-function offlineMode(v){
-  _offline=v;
-  const b=document.getElementById('offline-banner');
-  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');
-  let pollTimer=setInterval(fetchAll,30000), sseTimer=null;
-  es.addEventListener('message',e=>{try{const m=JSON.parse(e.data);if(m.type==='change')fetchAll();}catch{}});
-  es.addEventListener('error',()=>{
-    clearInterval(pollTimer);pollTimer=setInterval(fetchAll,8000);
-    if(sseTimer)clearTimeout(sseTimer);
-    sseTimer=setTimeout(()=>{clearInterval(pollTimer);pollTimer=setInterval(fetchAll,30000);sseTimer=null;},60000);
-  });
-  es.addEventListener('open',()=>{if(sseTimer){clearInterval(pollTimer);pollTimer=setInterval(fetchAll,8000);setTimeout(()=>{clearInterval(pollTimer);pollTimer=setInterval(fetchAll,30000);},10000);}});
-
-  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,_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);
-});
-`;
+import { SHARED_STYLES } from './ui/styles.js';
+import { FONT_FACES } from './ui/font-faces.js';
+import { APP_SCRIPT } from './ui/app-script.js';
 export const TASK_HTML_V2 = `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<title>codehere</title>
-<style>${SHARED_STYLES}</style>
+<!-- S16 · one brand everywhere · favicon = the landing's gradient-C (served
+     locally from /icon.svg, never hotlinked) · title follows the landing's
+     'codehere · <context>' pattern with an honest local context. -->
+<link rel="icon" type="image/svg+xml" href="/icon.svg" />
+<title>codehere · alpha · local</title>
+<style>${FONT_FACES}${SHARED_STYLES}</style>
 </head>
 <body>
 <div class="app">
+  <!-- S13 · header 9->3: wordmark · ONE live context pill (local + spend) ·
+       ⌘K hint. Beta chip, budget chip, lenses, density, reshape,
+       share, gear all live INSIDE the ⌘K palette now — same functions,
+       one keystroke away (rule 1 + rule 9). -->
   <div class="header">
-    <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 class="logo" onclick="goHome()" style="cursor:pointer" title="Home"><span class="name">codehere</span><span class="prerelease" title="pre-release · v0.9 · not yet validated with real users">alpha</span></span>
+    <span class="local-pill" title="Running locally · no telemetry · state on disk at ~/.codehere">
+      <span class="dot"></span>Local<span class="budget safe" id="budget"></span>
     </span>
-    <span class="budget safe" id="budget"></span>
-    <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>
-      <option value="auditor">Auditor 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>
+    <!-- Spend & Audit moved into the sidebar rail (nav option B, 2026-07-07) — the rail is THE navigator. -->
+    <button class="cmdk-hint" id="cmdk-open" title="Commands &amp; search · ⌘K" aria-label="Open the command palette"><span class="kbd">&#8984;K</span></button>
   </div>
 
   <!-- v0.8 S3 · Custom-view banner · appears when reshape is active -->
@@ -4190,64 +48,82 @@ export const TASK_HTML_V2 = `<!doctype html>
   <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 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">
-    <button class="new-btn" onclick="document.getElementById('main-ta')?.focus()">+ New Task</button>
-    <span class="filter-tab active" data-filter="all" onclick="setFilter('all')">All <span class="cnt" id="c-all">0</span></span>
-    <span class="filter-tab" data-filter="running" onclick="setFilter('running')">&bull; Running <span class="cnt" id="c-running">0</span></span>
-    <span class="filter-tab" data-filter="done" onclick="setFilter('done')">&check; Done <span class="cnt" id="c-done">0</span></span>
-    <span class="filter-tab" data-filter="failed" onclick="setFilter('failed')">&times; Failed <span class="cnt" id="c-failed">0</span></span>
+    <span class="hint">subscription &amp; free-tier agents (e.g. Cursor) still run</span>
   </div>
 
+  <!-- Cockpit shell (Phase-1 S1): a persistent Projects sidebar beside the main
+       pane. The main pane reuses the existing list/room/detail views unchanged. -->
+  <div class="shell">
+  <aside class="sidebar" id="sidebar" aria-label="Projects"></aside>
   <div class="content">
     <div id="task-list-view" class="content-inner">
+      <!-- First-run: a non-blocking, dismissible value-first welcome card (renderWelcomeCard),
+           NOT a full-screen overlay. Sits above the workspace, which stays usable underneath. -->
+      <div id="home-welcome" style="display:none"></div>
+      <!-- S13 · "NEEDS YOUR DECISION" — the FIRST thing on the page and the
+           ONLY orange. Rendered by renderDecisions() from REAL state only
+           (pending write-passes + verifier-broken verdicts today + failed
+           runs with retry available today). Empty -> does not render AT ALL
+           (data-verify-unit removed so H14 can pin absent <=> N===0). -->
+      <div id="decision-queue" style="display:none"></div>
+      <!-- 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" data-user-content>other worktree</span>
+      </span>
+      <!-- Observer (Thariq loop-2): at rest a calm ONE-LINE row above TODAY
+           ("● watching N terminal sessions · M live"), expandable to the
+           full rail; first-run keeps the teach state. -->
+      <div id="observer-rail" style="display:none"></div>
+      <!-- S12->S13 · the hero element. With tasks today it renders the TODAY
+           day-line ("TODAY · N AGENTS · N CLAIMS CHECKED · $X.XX") and keeps
+           carrying the data-verify-hero-* stamps (H13, derivations unchanged
+           via heroCounts). Zero tasks today -> the first-run hero with its
+           teach copy, ordered to the top via body.first-run. -->
+      <div class="home-hero" id="home-hero" style="display:none" data-verify-unit="home-hero" data-verify-hero-mode="first-run"></div>
+      <!-- S13 · active-filter token · filters live in ⌘K; the applied filter
+           shows as ONE removable token, not a tab bar. -->
+      <div id="filter-token" style="display:none"></div>
       <div id="task-list">
         <div class="skeleton" id="skeleton">
-          <div class="skeleton-card"></div>
-          <div class="skeleton-card"></div>
-          <div class="skeleton-card"></div>
+          <div class="skeleton-card"><span class="sk-sweep"></span></div>
+          <div class="skeleton-card"><span class="sk-sweep"></span></div>
+          <div class="skeleton-card"><span class="sk-sweep"></span></div>
+          <div class="skeleton-card"><span class="sk-sweep"></span></div>
         </div>
       </div>
-      <!-- Observed host sessions live BELOW the goals: the spec's home is
-           "a list of your goals" — ambient observation must not bury the
-           thesis surface (found burying it during the 2026-06-06 walk). -->
-      <div id="host-sessions-strip" style="display:none"></div>
     </div>
     <div id="task-detail-view" style="display:none" class="content-inner">
       <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 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 class="input-meta composer-meta"><span class="pick-agent" title="Auto-pick · best agent for this task">› Auto</span><span class="cost-est" id="cost-est-detail" data-verify-unit="cost-est" title="Estimated cost">&#8230;</span></div>
+          <button class="send-btn composer-send" id="detail-btn" disabled aria-label="Send follow-up">&#8593;</button>
         </div>
+        <div class="send-fail" id="detail-send-fail" style="display:none"></div>
       </div>
     </div>
+    <!-- Spend & Audit: the team cost + audit ledger as its own page (nav tab), not a banner on the workspace. -->
+    <div id="spend-view" style="display:none" class="content-inner">
+      <div id="team-cost-hero"></div>
+    </div>
+  </div>
   </div>
 
   <div class="input-area">
+    <!-- GitHub import row · populated by initGhImport(): a Connect button when
+         disconnected, or a repo field + issue PICKER when connected. -->
+    <div id="gh-import" class="gh-import"></div>
     <div class="input-bar">
       <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"><select class="pick-agent" id="agent-pick" title="Who does this task — Auto picks the best fit" aria-label="Pick the agent for this task"><option value="auto">↳ Auto</option><option value="claude-code">claude-code</option><option value="codex">codex</option><option value="aider">aider</option><option value="gemini">gemini</option><option value="opencode">opencode</option></select><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 class="input-meta composer-meta"><span class="agentpick-wrap"><input type="hidden" id="agent-pick" value="auto"><button type="button" class="agentpick" id="agentpick-btn" aria-haspopup="listbox" aria-expanded="false" title="Who runs this task · Auto picks the best fit" onclick="toggleAgentMenu(event)"><span id="agentpick-cur" class="agentpick-cur"></span><svg class="agentpick-car" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></button><div class="agentpick-menu" id="agentpick-menu" role="listbox" aria-label="Pick the agent for this task" hidden></div></span><span class="cost-est" id="cost-est-main" data-verify-unit="cost-est" title="Estimated cost">&#8230;</span></div>
+      <button class="send-btn composer-send" id="main-btn" aria-label="Send task">&#8593;</button>
     </div>
+    <div class="send-fail" id="main-send-fail" style="display:none"></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">&#9166;</span> send</span>
+      <span class="item"><span class="kbd">shift &#9166;</span> newline</span>
+      <span class="item"><span class="kbd">&#8984;K</span> commands</span>
       <span class="item"><span class="kbd">Esc</span> close modal</span>
     </div>
   </div>
@@ -4263,14 +139,14 @@ export const TASK_HTML_V2 = `<!doctype html>
         <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="reshape-suggestions 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 class="agent-line"><span style="font-family:var(--mono); color:var(--fg-90); 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>
@@ -4295,11 +171,25 @@ export const TASK_HTML_V2 = `<!doctype html>
     </div>
   </div>
 
+  <!-- Connect a project from a GitHub URL · clone locally, open as a project -->
+  <div class="clone-modal" id="clone-modal" role="dialog" aria-modal="true" aria-labelledby="clone-title">
+    <div class="clone-card">
+      <button class="close-x" id="clone-close" aria-label="Close" onclick="closeClone()">&#215;</button>
+      <div class="head" id="clone-title">Open a project from GitHub</div>
+      <p class="blurb">Paste a repo URL. codehere clones it to <code>~/codehere-projects/</code> on this machine and opens it &#8212; using your existing git access. Private repos work if your git is already set up.</p>
+      <div class="clone-input">
+        <input id="clone-url" placeholder="github.com/org/repo &#183; or org/repo" autocomplete="off" spellcheck="false" onkeydown="if(event.key==='Enter')doClone()"/>
+        <button id="clone-submit" onclick="doClone()">Clone</button>
+      </div>
+      <div class="clone-status" id="clone-status" style="display:none"></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="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 does.</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>
@@ -4334,14 +224,14 @@ export const TASK_HTML_V2 = `<!doctype html>
   </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>
+  <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-card">
       <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>
+      <h3 class="wp-title" id="wp-title" data-user-content>…</h3>
+      <p class="wp-reason" id="wp-reason" data-user-content>…</p>
       <div class="wp-meta">
-        tool · <b id="wp-target">…</b> · third-party API · <span style="color:var(--accent)">mediated by codehere</span>
+        tool · <b id="wp-target" data-user-content>…</b> · third-party API · <span style="color:var(--accent)">gated by codehere</span>
       </div>
       <div class="wp-meta">
         agent · <b id="wp-emitter">…</b> · session <span id="wp-session">…</span>
@@ -4354,9 +244,9 @@ export const TASK_HTML_V2 = `<!doctype html>
       <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>
+          <span id="wp-targetline" data-user-content>…</span>
         </div>
-        <div class="wp-payload" id="wp-payload">…</div>
+        <div class="wp-payload" id="wp-payload" data-user-content>…</div>
       </div>
       <textarea class="wp-payload-edit" id="wp-payload-edit" style="display:none" spellcheck="false"></textarea>
       <div class="wp-actions" id="wp-actions">
@@ -4368,11 +258,22 @@ export const TASK_HTML_V2 = `<!doctype html>
         <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>
+      <p class="wp-foot">codehere gates this 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>
 
+  <!-- S13 · the ⌘K command palette — THE control surface. Every control that
+       left the header is a command here; each label names its visible
+       consequence and Enter actually runs the existing function. -->
+  <div class="palette-scrim" id="palette-scrim" data-verify-unit="palette">
+    <div class="palette" role="dialog" aria-modal="true" aria-label="Command palette">
+      <div class="pin"><input id="palette-input" placeholder="Type a command · every control lives here…" autocomplete="off" spellcheck="false" aria-label="Filter commands"/></div>
+      <div class="plist" id="palette-list"></div>
+      <div class="pfoot"><span>arrow keys navigate</span><span>&#9166; run</span><span>esc close</span></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">
@@ -4380,9 +281,9 @@ export const TASK_HTML_V2 = `<!doctype html>
     <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>
+    <p class="sub">Working context sources appear here. Use their URL chips in prompts.</p>
     <div id="cs-list">
-      <div style="color:var(--fg-40); font-size:11px">loading...</div>
+      <div style="color:var(--fg-40); font-size:12px">loading...</div>
     </div>
   </aside>
 
@@ -4390,7 +291,7 @@ export const TASK_HTML_V2 = `<!doctype html>
   <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 ·
+       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">
@@ -4403,15 +304,16 @@ export const TASK_HTML_V2 = `<!doctype html>
     <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>
+      <button id="audit-verify-btn" class="audit-chain-btn" onclick="verifyAuditChain()" title="Check your local activity log hasn't been edited">verify log</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>
+    <span class="right">built locally</span>
   </div>
 </div>
+<!-- First-run: welcome splash + first-time setup (JS-rendered), then the tour. -->
+<div id="ob-welcome" class="ob-welcome" hidden></div>
+<!-- Interactive onboarding walkthrough — spotlight coachmarks over the real UI. -->
+<div id="ob-tour" class="ob-tour" hidden><div class="ob-spot" id="ob-spot"></div><div class="ob-pop" id="ob-pop"></div></div>
 <script>${APP_SCRIPT}</script>
 </body>
 </html>`;