codehere 0.8.0 → 1.0.2

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

@@ -1,2377 +0,0 @@
-/**
- * codehere web UI — two pages, one design system.
- *
- *   /          → TASK_HTML   (v0.3: task intake + active session view)
- *   /history   → HISTORY_HTML (audit feed across all agents — what I built Day 0)
- *
- * Plain JS, no framework. Both pages share the codehere.uk design system,
- * centralized in SHARED_STYLES below — sourced from the actual
- * ~/code/codehere-landing/app/globals.css (not guessed): HSL tokens matching
- * the marketing site, keyframes (shimmer, badge-glow, beam-pulse, fade-up),
- * and utility classes (.glass-card, .gradient-text-shimmer, .glow-line,
- * .hero-beam).
- */
-const SHARED_STYLES = `
-  :root {
-    /* HSL bg/fg matching landing globals.css dark palette */
-    --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-blue: #4a90e2;
-    --accent-wash: rgba(255,154,118,0.10);
-    --allow: #28c840;
-    --block: #ff5f57;
-    --warn: #febc2e;
-    /* Per-agent identity slots — Pattern 10, Real-Q1 LOCKED 2026-05-06.
-       Codehere-only earth-tone palette. NOT vendor-influenced.
-       CVD-verified (Brettel-Viénot-Mollon): closest pair distance 45.1
-       under deuteranopia, 47.4 under protanopia. Slots are owned;
-       agent→slot mapping is metadata. Per docs/design/AGENTIC_UX.md §3. */
-    --agent-1: #a04a30;  /* deep-coral  → claude-code */
-    --agent-2: #d4a040;  /* amber       → codex */
-    --agent-3: #5a7a9b;  /* slate-blue  → aider */
-    --agent-4: #7a4a6c;  /* plum        → gemini */
-    --agent-5: #9aa550;  /* olive       → opencode */
-    --agent-unknown: rgba(255,255,255,0.18);
-    --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;
-  }
-
-  /* Keyframes — Tier 1 polish #4 (May 6 2026): removed shimmer + beam-pulse
-     keyframes. Their consumers (.gradient-text-shimmer, .hero-beam) were
-     stripped from the dashboard surface per Open-Agents production-grade
-     reference + PRD §8.2 permanent-anti-patterns rule. fade-up + badge-glow
-     remain (still used by session card animations + running-state pill). */
-  @keyframes badge-glow {
-    0%, 100% { box-shadow: 0 0 0 rgba(40,200,64,0); }
-    50% { box-shadow: 0 0 10px rgba(40,200,64,0.5); }
-  }
-  @keyframes fade-up {
-    from { opacity: 0; transform: translateY(12px); filter: blur(2px); }
-    to { opacity: 1; transform: translateY(0); filter: blur(0); }
-  }
-
-  /* Glass card — landing's .glass-card with hover lift */
-  .glass-card {
-    background: rgba(255,255,255,0.02);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    border: 1px solid var(--border);
-    transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
-  }
-  .glass-card:hover {
-    border-color: rgba(255,255,255,0.15);
-    transform: translateY(-2px);
-    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
-  }
-
-  /* Horizontal divider — peach→transparent gradient */
-  .glow-line {
-    height: 1px;
-    background: linear-gradient(90deg, transparent 0%, rgba(255,154,118,0.25) 50%, transparent 100%);
-    margin: 18px 0;
-  }
-
-  /* ── Per-agent identity badge — Pattern 10 ─────────────────────────────────
-     Foundation primitive for multi-vendor visibility. 18×18 squircle with
-     2-letter initials, vendor color from --agent-N slot. 6px dot variant
-     for sidebar presence. Per docs/design/AGENTIC_UX.md §3 + Pattern 10.
-     Real-Q1 LOCKED: codehere-only palette; no vendor brand colors. */
-  /* Pattern 10 — codehere-styled badge frame. 22×22 squircle, codehere's
-     slot palette as background, geometric mark inside via currentColor.
-     Frame is codehere's identity; mark is a distinctive geometry per agent. */
-  .agent-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px; height: 22px;
-    border-radius: 5px;
-    overflow: hidden;
-    color: rgba(255,255,255,0.95);
-    flex: 0 0 22px;
-    user-select: none;
-    background: var(--agent-unknown);
-  }
-  .agent-badge svg { display: block; width: 14px; height: 14px; }
-  .agent-badge[data-slot="0"] { background: var(--accent); color: rgba(0,0,0,0.85); }
-  .agent-badge[data-slot="1"] { background: var(--agent-1); }
-  .agent-badge[data-slot="2"] { background: var(--agent-2); color: rgba(0,0,0,0.85); }
-  .agent-badge[data-slot="3"] { background: var(--agent-3); }
-  .agent-badge[data-slot="4"] { background: var(--agent-4); }
-  .agent-badge[data-slot="5"] { background: var(--agent-5); color: rgba(0,0,0,0.85); }
-  .agent-badge[data-slot=""],
-  .agent-badge[data-slot="unknown"],
-  .agent-badge:not([data-slot]) { background: var(--agent-unknown); color: var(--fg-50); }
-
-  /* 6px presence-dot variant for sidebar — same slot tokens, no text */
-  .agent-presence-dot {
-    display: inline-block;
-    width: 6px; height: 6px;
-    border-radius: 50%;
-    flex: 0 0 6px;
-    vertical-align: middle;
-  }
-  .agent-presence-dot[data-slot="1"] { background: var(--agent-1); }
-  .agent-presence-dot[data-slot="2"] { background: var(--agent-2); }
-  .agent-presence-dot[data-slot="3"] { background: var(--agent-3); }
-  .agent-presence-dot[data-slot="4"] { background: var(--agent-4); }
-  .agent-presence-dot[data-slot="5"] { background: var(--agent-5); }
-  .agent-presence-dot[data-slot=""],
-  .agent-presence-dot[data-slot="unknown"],
-  .agent-presence-dot:not([data-slot]) { background: var(--agent-unknown); }
-
-  /* Pattern 4 — sidebar presence-stack. Up to 3 vendor dots per project,
-     6px each, overlapping by 3px so a stack of 3 is ~12px wide. Most-
-     recent agent renders ON TOP (last in DOM = highest z via flex order
-     reverse). Empty stack reserves the same width to prevent layout
-     shift between projects with vs without recent activity. */
-  .presence-stack {
-    display: inline-flex;
-    flex-direction: row-reverse; /* most-recent on top */
-    align-items: center;
-    margin-right: 6px;
-    min-width: 12px;
-    flex-shrink: 0;
-  }
-  .presence-stack .agent-presence-dot {
-    margin-left: -3px; /* overlap */
-    border: 1.5px solid var(--bg-1, #0a0a0a); /* halo against sidebar bg */
-    box-sizing: content-box;
-  }
-  .presence-stack .agent-presence-dot:first-child {
-    /* No left-overlap on the leftmost (= oldest) dot — its left edge sets
-       the stack's start. Pre-fix it was clipped by the negative margin. */
-    margin-left: 0;
-  }
-  .presence-stack-empty { width: 12px; }
-
-  /* Pattern 13 — micro-activity verb (rotating whimsy / tool-prefixed verb).
-     Sits below the agent byline on a running session; tells the user the
-     agent is actively working. Hidden when status != running. */
-  .micro-activity {
-    font-family: var(--mono); font-size: 11px;
-    color: var(--fg-50);
-    margin-top: 4px;
-    opacity: 0;
-    transition: opacity 200ms ease, color 200ms ease;
-    min-height: 14px;
-  }
-  .micro-activity.live { opacity: 1; }
-  .micro-activity.tool { color: var(--accent); font-weight: 500; }
-
-  /* Pattern 2 — tool-use trace verb-color semantic. The first word of each
-     step's label is the tool kind; the rule colors it per semantic meaning:
-     read/grep/glob = muted (no mutation), write/edit = green (file change),
-     bash = brand peach (execution = highest-trust action). Same target
-     text stays muted so the verb pops at glance. */
-  .steps-mini .step .verb {
-    font-weight: 500;
-    margin-right: 4px;
-    text-transform: lowercase;
-    letter-spacing: 0.02em;
-  }
-  .steps-mini .step[data-tool="read"]   .verb,
-  .steps-mini .step[data-tool="grep"]   .verb,
-  .steps-mini .step[data-tool="glob"]   .verb,
-  .steps-mini .step[data-tool="list"]   .verb { color: var(--fg-50); }
-  .steps-mini .step[data-tool="write"]  .verb,
-  .steps-mini .step[data-tool="edit"]   .verb { color: var(--allow); }
-  .steps-mini .step[data-tool="bash"]   .verb { color: var(--accent); }
-
-  /* P22 / Track B #8 — bash output preview under step. Last 4 lines,
-     muted body so the step label stays primary. ANSI is stripped at
-     the aggregator. */
-  .steps-mini .step .step-output {
-    margin: 4px 0 6px 22px;
-    padding: 6px 8px;
-    border-left: 2px solid var(--border-soft);
-    color: var(--fg-50);
-    font-family: var(--mono); font-size: 10.5px;
-    line-height: 1.45;
-    white-space: pre-wrap; word-break: break-word;
-    background: rgba(0,0,0,0.15);
-    border-radius: 0 4px 4px 0;
-    max-height: 80px; overflow: hidden;
-  }
-  .steps-mini .step.failed .step-output {
-    border-left-color: rgba(255,95,87,0.4);
-    color: var(--block);
-  }
-  .steps-mini .step[data-tool="fetch"]  .verb,
-  .steps-mini .step[data-tool="search"] .verb { color: var(--fg-50); }
-  .steps-mini .step[data-tool="task"]   .verb { color: var(--accent); }
-  /* Pattern 15 — subagent dispatch indicator. Task-kind steps render as
-     a small panel with an indented left bar so the dispatch reads as
-     "delegating to a sub-agent" rather than a normal step. The label
-     keeps the verb-color but the row gets visual weight to signal a
-     boundary crossing (parent → child execution context). */
-  .steps-mini .step[data-tool="task"] {
-    border-left: 2px solid var(--accent);
-    background: var(--accent-wash);
-    padding: 4px 8px;
-    margin: 2px 0 2px 4px;
-    border-radius: 0 4px 4px 0;
-    align-items: center;
-  }
-  .steps-mini .step[data-tool="task"] .verb::after {
-    content: ' ⤳';
-    margin-left: 4px;
-    color: var(--fg-50);
-    font-weight: 400;
-  }
-  .steps-mini .step .target {
-    color: var(--fg-50);
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-    max-width: 280px;
-  }
-
-  /* Pattern 9 — recovery affordance panel. Renders below the status pill
-     when a session ends in a recoverable failure state. Cause-specific
-     border color (yellow for failover-eligible, red for needs-human-action).
-     Per docs/design/AGENTIC_UX.md Pattern 9. */
-  .recovery-affordance {
-    margin-top: 10px;
-    padding: 10px 12px;
-    border: 1px dashed var(--warn);
-    border-radius: 8px;
-    background: rgba(254,188,46,0.04);
-    font-family: var(--sans); font-size: 12px;
-  }
-  .recovery-affordance[data-cause="auth_invalid"],
-  .recovery-affordance[data-cause="auth_missing"],
-  .recovery-affordance[data-cause="crashed"]      { border-color: var(--block); background: rgba(255,95,87,0.04); }
-  .recovery-affordance .ra-msg     { color: var(--fg); margin: 0 0 8px; line-height: 1.45; }
-  .recovery-affordance .ra-msg b   { color: var(--fg); font-weight: 600; }
-  .recovery-affordance .ra-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-  .recovery-affordance button.ra-primary {
-    display: inline-flex; align-items: center; gap: 6px;
-    padding: 5px 12px;
-    border: 1px solid var(--accent);
-    background: var(--accent-wash);
-    border-radius: 6px;
-    font-family: var(--mono); font-size: 11px; color: var(--fg);
-    cursor: pointer;
-  }
-  .recovery-affordance button.ra-primary:hover { background: rgba(255,154,118,0.16); }
-  .recovery-affordance button.ra-primary[disabled] { opacity: 0.55; cursor: progress; }
-  .recovery-affordance button.ra-secondary {
-    background: transparent; border: none;
-    color: var(--fg-50); font-family: var(--mono); font-size: 11px;
-    cursor: pointer; padding: 5px 8px;
-  }
-  .recovery-affordance button.ra-secondary:hover { color: var(--fg); }
-
-  /* Pattern 1 — tool-progress live chip. At-a-glance count + dot-pattern
-     progress + elapsed time. Lives above the micro-activity verb so the
-     eye reads: chip (numbers) → verb (in-progress action) → step trace. */
-  .tool-progress-chip {
-    display: inline-flex; align-items: center; gap: 6px;
-    font-family: var(--mono); font-size: 11px; color: var(--fg-50);
-    padding: 3px 9px;
-    background: rgba(255,255,255,0.03);
-    border: 1px solid var(--border-soft);
-    border-radius: 999px;
-    margin-top: 4px;
-    transition: opacity 180ms ease, border-color 180ms ease;
-  }
-  .tool-progress-chip[data-state="hidden"] { display: none; }
-  .tool-progress-chip[data-state="running"] {
-    border-color: var(--accent);
-    animation: tp-pulse 2.4s ease-in-out infinite;
-  }
-  .tool-progress-chip[data-state="paused"]   { border-color: var(--warn); }
-  .tool-progress-chip[data-state="complete"] { border-color: var(--allow); }
-  .tool-progress-chip[data-state="failed"]   { border-color: var(--block); color: var(--block); }
-  .tool-progress-chip .tp-sep { color: var(--fg-20); user-select: none; }
-  .tool-progress-chip .tp-dots { letter-spacing: 0.06em; color: var(--accent); }
-  .tool-progress-chip[data-state="failed"] .tp-dots { color: var(--block); }
-  .tool-progress-chip[data-state="complete"] .tp-dots { color: var(--allow); }
-  .tool-progress-chip .tp-elapsed { color: var(--fg-40); }
-  @keyframes tp-pulse {
-    0%, 100% { border-color: var(--border-soft); }
-    50%      { border-color: var(--accent); }
-  }
-
-  /* Running-state pill animation */
-  .badge-running-glow { animation: badge-glow 2.4s ease-in-out infinite; }
-
-  /* Entrance anim */
-  .fade-up { animation: fade-up 0.5s cubic-bezier(0.16,1,0.3,1) both; }
-
-  /* Pulsing dot — for "live" indicators on collapsed running sessions */
-  @keyframes dot-pulse {
-    0%, 100% { opacity: 0.45; transform: scale(1); }
-    50% { opacity: 1; transform: scale(1.18); }
-  }
-  .live-dot {
-    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
-    background: var(--allow); box-shadow: 0 0 6px rgba(40,200,64,0.6);
-    animation: dot-pulse 1.4s ease-in-out infinite;
-    margin-right: 7px; vertical-align: middle;
-  }
-
-  /* ── Audit summary row (Gate B3 — moat visible on main page) ────────
-     Principle #3 status-at-a-glance + #7 agent-provenance + #6 marketing voice.
-     Dot-separated pills matching codehere.uk tone: "Today · 47 actions · 3 blocked · avg trust 91". */
-  .audit-summary {
-    display: flex; align-items: center; gap: 10px;
-    padding: 10px 14px;
-    margin: 0 0 10px;
-    border: 1px solid var(--border-soft);
-    background: rgba(255,154,118,0.03);
-    border-radius: 8px;
-    font-family: var(--mono); font-size: 11px;
-    color: var(--fg-70);
-    flex-wrap: wrap;
-  }
-  .audit-summary .eyebrow {
-    color: var(--accent); font-weight: 600; letter-spacing: 0.04em;
-  }
-  .audit-summary b { color: var(--fg); font-weight: 600; }
-  .audit-summary .blocked b { color: var(--block); }
-  .audit-summary .sep { color: var(--fg-20); user-select: none; }
-  .audit-summary.empty { display: none; }
-
-  /* ── Hook safety pill on running cards (Gate B1 — safety moat visible live) ──
-     Principle #7 agent-provenance. Surfaces the safety layer continuously, not only on block. */
-  .safety-pill {
-    display: inline-flex; align-items: center; gap: 4px;
-    margin-left: 10px;
-    padding: 2px 9px;
-    border-radius: 999px;
-    font-family: var(--mono); font-size: 10px;
-    color: var(--fg-50);
-    border: 1px solid var(--border-soft);
-    background: rgba(255,255,255,0.02);
-  }
-  .safety-pill .shield { color: var(--allow); }
-  .safety-pill .safe { color: var(--fg); font-weight: 600; }
-  .safety-pill .blocked { color: var(--block); font-weight: 600; }
-  .safety-pill.has-blocked { border-color: rgba(255,95,87,0.25); background: rgba(255,95,87,0.04); }
-
-  /* ── Status-at-a-glance banner (PM UX Layer 7) ──────────────────────
-     Principles #3 "status at a glance", #4 "multi-session default".
-     One row answers: is anything running/detected/blocked, when did code last change. */
-  .status-banner {
-    display: flex; align-items: center; gap: 16px;
-    padding: 10px 14px;
-    margin: 0 0 18px;
-    border: 1px solid var(--border);
-    background: rgba(255,255,255,0.02);
-    border-radius: 8px;
-    font-family: var(--mono); font-size: 11px;
-    color: var(--fg-50);
-    flex-wrap: wrap;
-  }
-  .status-banner .stat { display: inline-flex; align-items: center; gap: 6px; }
-  .status-banner .stat .label { color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
-  .status-banner .stat .value { color: var(--fg); font-weight: 600; }
-  /* Pattern 8 ride-along revert: daemon-live is actionable signal ("daemon
-     is alive RIGHT NOW") not passive status. f830183 demoted this to fg
-     neutral; restoring to green so the heartbeat reads at glance. */
-  .status-banner .stat .value.live { color: var(--allow); }
-  .status-banner .stat.blocked .value.nonzero { color: var(--block); }
-  .status-banner .sep { color: var(--fg-20); user-select: none; }
-  .status-banner .edge {
-    margin-left: auto;
-    color: var(--fg-50);
-  }
-  .status-banner .edge .value { color: var(--accent); font-weight: 400; }
-
-  /* ── Steps strip in collapsed card (PM UX Layer 2) ──────────────────
-     Principles #1 "web is not a terminal", #2 "info density".
-     Compact list of recent semantic steps instead of raw event chatter. */
-  .steps-mini {
-    margin: 6px 0 0;
-    display: flex; flex-direction: column; gap: 2px;
-    font-family: var(--mono); font-size: 11px;
-  }
-  .steps-mini .step {
-    display: flex; align-items: center; gap: 8px;
-    color: var(--fg-70);
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  }
-  .steps-mini .step .ico {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 13px; height: 13px; flex-shrink: 0;
-    font-size: 10px; font-weight: 700;
-  }
-  .steps-mini .step.done .ico { color: var(--allow); }
-  .steps-mini .step.active .ico { color: var(--accent); animation: dot-pulse 1.4s ease-in-out infinite; }
-  .steps-mini .step.failed .ico { color: var(--block); }
-  .steps-mini .step.pending .ico { color: var(--fg-40); }
-  .steps-mini .more {
-    color: var(--fg-40); font-size: 10px; letter-spacing: 0.06em;
-    padding-left: 21px;
-  }
-
-  /* ── Final report block (PM UX Layer 3) ─────────────────────────────
-     Principles #2 "info density", #7 "agent-provenance".
-     Shows up inside an expanded card when status='completed'. */
-  .final-report {
-    margin: 10px 0 0;
-    padding: 12px 14px;
-    border: 1px solid var(--border);
-    background: rgba(255,154,118,0.04);
-    border-radius: 8px;
-    font-family: var(--mono); font-size: 11px;
-  }
-  .final-report .fr-label {
-    color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px;
-    margin-bottom: 8px;
-  }
-  /* Iter 12 — prose summary block. Plain English for non-technical users.
-     Sans-serif breaks the monospace context so it reads as narrative, not data. */
-  .final-report .fr-summary {
-    font-family: var(--sans);
-    font-size: 13px;
-    line-height: 1.55;
-    color: var(--fg);
-    margin-bottom: 12px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--border-soft);
-  }
-  .final-report .fr-summary p {
-    margin: 0 0 10px 0;
-  }
-  .final-report .fr-summary p:last-child { margin-bottom: 0; }
-  .final-report .fr-summary-pending p {
-    color: var(--fg-50);
-    font-style: italic;
-    animation: shimmer 1.6s linear infinite;
-    background: linear-gradient(90deg, var(--fg-30) 0%, var(--fg-70) 50%, var(--fg-30) 100%);
-    background-size: 200% auto;
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-  }
-  .final-report .fr-files { display: flex; flex-direction: column; gap: 3px; }
-  .final-report .fr-file {
-    display: grid;
-    grid-template-columns: 1fr auto auto;
-    gap: 12px;
-    color: var(--fg-70);
-  }
-  .final-report .fr-file .file-icon {
-    display: inline-block; flex: 0 0 12px;
-    width: 12px; height: 12px; opacity: 0.55;
-    margin-right: 6px;
-  }
-  .final-report .fr-file[data-mutation="write"]  .file-icon { color: var(--allow); opacity: 1; }
-  .final-report .fr-file[data-mutation="edit"]   .file-icon { color: var(--allow); opacity: 1; }
-  .final-report .fr-file[data-mutation="delete"] .file-icon { color: var(--block); opacity: 1; }
-  .final-report .fr-file .path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .final-report .fr-file .lines { color: var(--fg-50); white-space: nowrap; }
-  .final-report .fr-file .lines .add { color: var(--allow); }
-  .final-report .fr-file .lines .rem { color: var(--block); }
-  /* Pattern 11 · Trust score badge — standalone, reusable. Compact pill
-     "<score> · <grade>" with semantic background. Drop-in replacement
-     for the inline trust rendering previously embedded in the file
-     chip (P7); now any surface that has a trust score can render the
-     same pill via trustBadgeHTML(score). Per AGENTIC_UX.md Pattern 11.
-     Color split: A/B (≥75) = ok, C/D (40-74) = warn, F (<40) = block.
-     This corrects the prior P7 inline rendering which used a 60-cutoff
-     for warn (putting D-grade in red instead of yellow per spec). */
-  .trust-badge {
-    display: inline-block;
-    padding: 1px 7px; border-radius: 999px;
-    font-size: 10px; font-weight: 600;
-    border: 1px solid transparent;
-    min-width: 28px; text-align: center;
-    font-family: var(--mono);
-  }
-  .trust-badge.good { color: var(--allow); background: rgba(40,200,64,0.08); border-color: rgba(40,200,64,0.22); }
-  .trust-badge.warn { color: var(--warn);  background: rgba(254,188,46,0.08); border-color: rgba(254,188,46,0.25); }
-  .trust-badge.bad  { color: var(--block); background: rgba(255,95,87,0.08); border-color: rgba(255,95,87,0.25); }
-  .trust-badge.none { color: var(--fg-40); background: transparent; border-color: var(--border-soft); }
-  .final-report .fr-tests, .final-report .fr-none {
-    margin-top: 8px; padding-top: 8px;
-    border-top: 1px solid var(--border-soft);
-    color: var(--fg-50);
-  }
-  .final-report .fr-tests .pass { color: var(--allow); }
-  .final-report .fr-tests .fail { color: var(--block); }
-
-  /* Floating pill nav — landing's FloatingNav visual */
-  .floating-nav {
-    position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
-    z-index: 50;
-    display: flex; align-items: center; gap: 24px;
-    padding: 10px 20px;
-    border-radius: 999px;
-    border: 1px solid rgba(255,255,255,0.10);
-    background: rgba(255,255,255,0.03);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transition: background 0.3s ease, box-shadow 0.3s ease;
-  }
-  .floating-nav:hover { background: rgba(0,0,0,0.6); box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
-  .floating-nav .logo {
-    font-family: var(--sans); font-weight: 800; font-size: 14px;
-    background: linear-gradient(135deg, #ff9a76 0%, #4a90e2 100%);
-    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
-  }
-  .floating-nav a.nav-link {
-    font-family: var(--mono); font-size: 12px; color: var(--fg-50);
-    text-decoration: none; transition: color 0.2s ease;
-  }
-  .floating-nav a.nav-link:hover { color: var(--fg); }
-  .floating-nav a.nav-link.active { color: var(--fg); }
-  /* Wiring to codehere.uk — external link styled as the same nav-link
-     family but with an opacity tell so the user knows it leaves the app. */
-  .floating-nav a.nav-external { opacity: 0.65; }
-  .floating-nav a.nav-external:hover { opacity: 1; color: var(--accent); }
-
-  /* Pattern 20 — hook-mode indicator pill in the floating nav. Surfaces
-     codehere's safety posture (block / advisory / log-only / off) so the
-     user can tell at a glance what the hook is currently doing. Read-only
-     for now — clicking opens nothing. Mode switching ships separately
-     through codehere hook install/uninstall so the safety surface
-     re-validates instead of mutating from the UI. Per AGENTIC_UX.md
-     Pattern 20. */
-  .mode-indicator {
-    display: inline-flex; align-items: center; gap: 6px;
-    font-family: var(--mono); font-size: 11px; font-weight: 500;
-    padding: 3px 10px; border-radius: 999px;
-    border: 1px solid var(--border);
-    background: rgba(255,255,255,0.03);
-    color: var(--fg-50);
-    cursor: help;
-    user-select: none;
-  }
-  .mode-indicator .mi-dot {
-    width: 7px; height: 7px; border-radius: 50%;
-    background: currentColor;
-    flex-shrink: 0;
-  }
-  .mode-indicator[data-mode="block"]    { color: var(--block);  border-color: rgba(255,95,87,0.35); background: rgba(255,95,87,0.06); }
-  .mode-indicator[data-mode="advisory"] { color: var(--warn);   border-color: rgba(254,188,46,0.35); background: rgba(254,188,46,0.06); }
-  .mode-indicator[data-mode="log-only"] { color: var(--fg-50);  border-color: var(--border); }
-  .mode-indicator[data-mode="off"]      { color: var(--fg-30);  border-style: dashed; }
-  /* Loading state — neutral pill until first /api/hook/mode resolves. */
-  .mode-indicator[data-mode=""]         { opacity: 0.4; }
-`;
-// Shared client-JS for the per-agent identity badge. Interpolated into
-// every page's IIFE (TASK_HTML, THREAD_HTML, HISTORY_HTML if it gains
-// agent rendering). Single source of truth so brand SVGs stay consistent
-// across pages — no copy-paste drift between dashboard / threads / history.
-const AGENT_BADGE_JS = `
-  // Per-agent label shown next to badge / in tooltips / in dropdowns.
-  function agentLabel(id) {
-    var labels = { 'claude-code': 'Claude Code', 'codex': 'Codex', 'aider': 'Aider', 'gemini': 'Gemini', 'opencode': 'OpenCode', 'conductor': 'codehere · Conductor', 'kiro': 'Kiro' };
-    return labels[id] || id || 'agent';
-  }
-
-  // Distinctive geometric marks per adapter — codehere-authored (not vendor
-  // brand reproductions). Each shape evokes its agent's domain so users
-  // glance-identify which agent ran a task without me reproducing brand SVG
-  // path data verbatim. currentColor lets the badge's contrast handling
-  // (light text on dark slots, dark text on slots 2 + 5) carry through.
-  var AGENT_ICONS = {
-    // Claude — 8-spoke burst (spark / generation)
-    'claude-code':
-      '<svg viewBox="0 0 24 24" aria-hidden="true"><g stroke="currentColor" stroke-width="1.8" stroke-linecap="round" fill="none">' +
-      '<line x1="12" y1="4" x2="12" y2="20"/><line x1="4" y1="12" x2="20" y2="12"/>' +
-      '<line x1="6.3" y1="6.3" x2="17.7" y2="17.7"/><line x1="17.7" y1="6.3" x2="6.3" y2="17.7"/></g></svg>',
-    // Codex — concentric ring (orb)
-    'codex':
-      '<svg viewBox="0 0 24 24" aria-hidden="true">' +
-      '<circle cx="12" cy="12" r="7" stroke="currentColor" stroke-width="1.8" fill="none"/>' +
-      '<circle cx="12" cy="12" r="2.2" fill="currentColor"/></svg>',
-    // Aider — equilateral triangle (forward / pair)
-    'aider':
-      '<svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">' +
-      '<path d="M12 4 L20.5 19 L3.5 19 Z"/></svg>',
-    // Gemini — 4-point star / diamond
-    'gemini':
-      '<svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">' +
-      '<path d="M12 2 L14.2 9.8 L22 12 L14.2 14.2 L12 22 L9.8 14.2 L2 12 L9.8 9.8 Z"/></svg>',
-    // OpenCode — angle brackets
-    'opencode':
-      '<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">' +
-      '<path d="M9 6 L3 12 L9 18 M15 6 L21 12 L15 18"/></svg>',
-    // Conductor — codehere router; lightning shape on brand peach
-    'conductor':
-      '<svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">' +
-      '<path d="M13 2 L4 14 L11 14 L9 22 L18 10 L11 10 L13 2 Z"/></svg>'
-  };
-  var UNKNOWN_AGENT_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="6"/></svg>';
-
-  var AGENT_SLOTS = {
-    'conductor':   '0',
-    'claude-code': '1',
-    'codex':       '2',
-    'aider':       '3',
-    'gemini':      '4',
-    'opencode':    '5'
-  };
-  function agentSlot(id) { return AGENT_SLOTS[id] || 'unknown'; }
-  function agentIconSVG(id) { return AGENT_ICONS[id] || UNKNOWN_AGENT_ICON; }
-  function escapeAgentTitle(s) {
-    return String(s == null ? '' : s).replace(/[&<>"']/g, function(c) {
-      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
-    });
-  }
-  function agentBadgeHTML(id) {
-    return '<span class="agent-badge" data-slot="' + agentSlot(id) + '" title="' + escapeAgentTitle(agentLabel(id)) + '">' + agentIconSVG(id) + '</span>';
-  }
-  function agentPresenceDotHTML(id) {
-    return '<span class="agent-presence-dot" data-slot="' + agentSlot(id) + '" title="' + escapeAgentTitle(agentLabel(id)) + '"></span>';
-  }
-
-  // Pattern 13 — micro-activity verb rotation. Codehere-authored vocabulary
-  // describing the WORK ("Reading the code…") not the WORKER ("I'm thinking").
-  // Same pool fires for every adapter — cross-vendor coherence per
-  // claim_market_position v4. Ban list (cute mascot, magic/cooking
-  // metaphors, anatomy theatrics, overly technical, first-person, speed
-  // promises) lives in docs/design/AGENTIC_UX.md Pattern 13.
-  var MICRO_VERBS = [
-    'Working through it…', 'Pulling the thread…', 'Connecting the dots…',
-    'Taking notes…', 'Sorting it out…', 'Mapping things…',
-    'Tracking it down…', 'Putting it together…', 'Checking the work…',
-    'Lining things up…', 'Reading the code…', 'Tracing the path…',
-    'Piecing it together…', 'Walking the repo…'
-  ];
-
-  // Pick a phrase NOT recently shown so the user doesn't see the same
-  // word twice within a 30s window (pool of 14, max 6 swaps per 30s at
-  // 5s cadence; keeping last 5 in a queue is sufficient).
-  function pickWhimsyVerb(recentQueue) {
-    var pool = [];
-    for (var i = 0; i < MICRO_VERBS.length; i++) {
-      if (recentQueue.indexOf(MICRO_VERBS[i]) === -1) pool.push(MICRO_VERBS[i]);
-    }
-    if (pool.length === 0) pool = MICRO_VERBS;
-    return pool[Math.floor(Math.random() * pool.length)];
-  }
-
-  // Start a whimsy rotator on a target element. Returns a stop() function
-  // the caller invokes when the session exits or transitions to a tool-
-  // prefixed state. Cadence: 4-6s random; ensures the verb feels alive
-  // without strobing.
-  // Pattern 2 — derive a tool-kind tag from a step label so the renderer
-  // can apply the verb-color semantic. Adapters emit free-form labels
-  // ("Reading lib/foo.ts" / "Running bun test" / "grep auth patterns"),
-  // so we match the leading word against known tool families.
-  function inferToolKind(label) {
-    var s = String(label || '').trim().toLowerCase();
-    if (!s) return 'unknown';
-    var first = s.split(' ')[0].replace(/[:.,]+$/, '');
-    if (first === 'read' || first === 'reading' || first === 'cat')   return 'read';
-    if (first === 'write' || first === 'writing' || first === 'create') return 'write';
-    if (first === 'edit' || first === 'editing' || first === 'multiedit' || first === 'patch') return 'edit';
-    if (first === 'bash' || first === 'run' || first === 'running' || first === 'shell' || first === 'exec') return 'bash';
-    if (first === 'grep' || first === 'searching' || first === 'search') return 'grep';
-    if (first === 'glob' || first === 'find')                          return 'glob';
-    if (first === 'ls' || first === 'list' || first === 'listing')     return 'list';
-    if (first === 'fetch' || first === 'fetching' || first === 'webfetch' || first === 'curl' || first === 'wget') return 'fetch';
-    if (first === 'websearch')                                          return 'search';
-    if (first === 'task' || first === 'dispatch' || first === 'dispatching' || first === 'subagent') return 'task';
-    return 'unknown';
-  }
-  // Split a step label into (verb, target) for verb-color rendering. The
-  // verb is the first word; everything after is the target. Falls back to
-  // (label, '') when the label is a single word.
-  function splitStepLabel(label) {
-    var s = String(label || '').trim();
-    if (!s) return { verb: '', target: '' };
-    var space = s.indexOf(' ');
-    if (space === -1) return { verb: s, target: '' };
-    return { verb: s.slice(0, space), target: s.slice(space + 1) };
-  }
-
-  // Pattern 14 — per-tool target truncation. Smart truncation beats CSS
-  // ellipsis because it preserves the meaningful chunk per tool kind: a
-  // file path's last 2 segments stay readable, a bash command keeps its
-  // binary + last arg, a URL keeps its domain.
-  function truncateTarget(toolKind, target) {
-    var s = String(target == null ? '' : target).trim();
-    if (!s) return '';
-
-    if (toolKind === 'read' || toolKind === 'write' || toolKind === 'edit' || toolKind === 'list') {
-      // File path: show last 2 segments, prefix with "…/" when shortened.
-      var parts = s.split('/').filter(function(p) { return p.length > 0; });
-      if (parts.length <= 2) return s;
-      return '…/' + parts.slice(-2).join('/');
-    }
-
-    if (toolKind === 'bash') {
-      // Bash command: keep binary + final arg if total > 40 chars.
-      if (s.length <= 40) return s;
-      var spaceIdx = s.indexOf(' ');
-      if (spaceIdx === -1) return s.slice(0, 37) + '…';
-      var binary = s.slice(0, spaceIdx);
-      var lastSpace = s.lastIndexOf(' ');
-      var lastArg = s.slice(lastSpace + 1);
-      // Compose: "binary … lastArg" within budget. Cap each piece at 18.
-      var budget = 40;
-      var b = binary.length > 18 ? binary.slice(0, 17) + '…' : binary;
-      var l = lastArg.length > 18 ? '…' + lastArg.slice(-17) : lastArg;
-      var composed = b + ' … ' + l;
-      if (composed.length <= budget) return composed;
-      // Last resort: hard mid-truncate
-      return s.slice(0, 19) + '…' + s.slice(-19);
-    }
-
-    if (toolKind === 'fetch') {
-      // URL: domain + first path segment. Strip protocol; truncate the
-      // tail at 30 chars after the domain. (String-strip instead of regex
-      // because backslashes get stripped by the outer template literal.)
-      var stripped = s;
-      if (stripped.indexOf('https://') === 0) stripped = stripped.slice(8);
-      else if (stripped.indexOf('http://') === 0) stripped = stripped.slice(7);
-      var slash = stripped.indexOf('/');
-      if (slash === -1) return stripped;
-      var domain = stripped.slice(0, slash);
-      var path = stripped.slice(slash);
-      if (path.length > 30) path = path.slice(0, 27) + '…';
-      return domain + path;
-    }
-
-    if (toolKind === 'grep' || toolKind === 'search' || toolKind === 'glob') {
-      // Search pattern: 30 chars verbatim then ellipsis. Patterns are
-      // user-meaningful even when truncated mid-token; preserve as-is.
-      if (s.length <= 30) return s;
-      return s.slice(0, 29) + '…';
-    }
-
-    // Unknown tool family: hard 40-char cap with ellipsis at the end.
-    if (s.length <= 40) return s;
-    return s.slice(0, 39) + '…';
-  }
-
-  // Pattern 20 — hook-mode indicator wiring. Hits /api/hook/mode on
-  // load + every 30s; renders a colored pill in the floating nav with
-  // mode-specific color, dot, and tooltip. Self-installing — runs once
-  // per page if a #mode-indicator element exists. Failures degrade
-  // silently (mode pill stays in the loading state).
-  var MODE_LABELS = {
-    // Plain-English labels (claim_user_persona) BUT honest about scope —
-    // codehere is a SECOND screen, not the primary safety system. Prior
-    // labels ("Safety on") implied codehere IS the safety system. It's
-    // not — the agent vendor (Claude / Codex / etc.) has its own safety
-    // stack. Codehere's job is defense-in-depth + the cross-vendor
-    // audit trail. Labels now say "Codehere · X" so the scope is clear.
-    'block':    { label: 'Codehere · blocking', tip: 'Codehere screens every tool call against its pattern bank and blocks risky ones. Runs ON TOP of the agent vendor own safety; second screen, not primary.' },
-    'advisory': { label: 'Codehere · warn',     tip: 'Codehere warns about risky tool calls but does not block. Defense-in-depth on top of the agent vendor own safety.' },
-    'log-only': { label: 'Codehere · recording',tip: 'Codehere records every tool call to the local audit log but does not intervene. Useful for cross-vendor audit trail without blocking.' },
-    'off':      { label: 'Codehere · off',      tip: 'No codehere guardrail. The agent vendor own safety is still active. Run codehere hook install to add codehere extra screen.' },
-  };
-  function paintModeIndicator(mode) {
-    var el = document.getElementById('mode-indicator');
-    if (!el) return;
-    var spec = MODE_LABELS[mode] || MODE_LABELS['off'];
-    el.dataset.mode = mode;
-    el.title = spec.tip;
-    var labelEl = el.querySelector('.mi-label');
-    if (labelEl) labelEl.textContent = spec.label;
-  }
-  function pollHookMode() {
-    fetch('/api/hook/mode')
-      .then(function(r) { return r.ok ? r.json() : null; })
-      .then(function(data) { if (data && data.mode) paintModeIndicator(data.mode); })
-      .catch(function() { /* leave loading state — next poll may succeed */ });
-  }
-  if (typeof document !== 'undefined' && document.getElementById('mode-indicator')) {
-    pollHookMode();
-    setInterval(pollHookMode, 30000);
-  }
-
-  // Pattern 11 — trust score badge HTML. Returns a pill of shape
-  // "<score> · <grade>" with semantic class. Thresholds match
-  // trust-scorer.ts; color split per AGENTIC_UX.md Pattern 11
-  // (A/B=ok ≥75, C/D=warn ≥40, F=block <40, n/a=muted).
-  // Caller decides container; this just emits the standalone pill.
-  function trustBadgeHTML(score) {
-    if (typeof score !== 'number' || isNaN(score)) {
-      return '<span class="trust-badge none" title="Trust score">—</span>';
-    }
-    var s = Math.max(0, Math.min(100, Math.round(score)));
-    var grade =
-      s >= 90 ? 'A' :
-      s >= 75 ? 'B' :
-      s >= 60 ? 'C' :
-      s >= 40 ? 'D' : 'F';
-    var cls =
-      s >= 75 ? 'good' :
-      s >= 40 ? 'warn' : 'bad';
-    return '<span class="trust-badge ' + cls + '" title="Trust score · ' + grade + '">' +
-      s + ' · ' + grade +
-      '</span>';
-  }
-
-  // Pattern 3 — cwd tail. Returns the basename of an absolute path so the
-  // session card byline reads "claude-code · codehere · 09:01" instead of
-  // a 60-char absolute path that wraps. Strips a trailing slash, then
-  // returns the last non-empty segment. Empty / weird input: empty string.
-  function cwdTail(cwd) {
-    var s = String(cwd == null ? '' : cwd).trim();
-    if (!s) return '';
-    while (s.length > 1 && s.charAt(s.length - 1) === '/') s = s.slice(0, -1);
-    var slash = s.lastIndexOf('/');
-    if (slash === -1) return s;
-    return s.slice(slash + 1);
-  }
-
-  // Pattern 3 — file-edit count. Walks steps, collects unique target paths
-  // for file-mutating tools (write/edit), returns size of the set. Read-
-  // only tools (read/grep/list/glob) intentionally excluded — "files
-  // touched" in the footer means files the agent CHANGED, not files it
-  // looked at, which matches the user's mental model.
-  function countTouchedFiles(steps) {
-    if (!Array.isArray(steps) || steps.length === 0) return 0;
-    var seen = Object.create(null);
-    var n = 0;
-    for (var i = 0; i < steps.length; i++) {
-      var st = steps[i];
-      if (!st) continue;
-      var kind = inferToolKind(st.tool || '');
-      if (kind !== 'write' && kind !== 'edit') continue;
-      var parts = splitStepLabel(String(st.label || ''));
-      var t = parts.target;
-      if (!t || seen[t]) continue;
-      seen[t] = true;
-      n++;
-    }
-    return n;
-  }
-
-  // Pattern 9 — failover chain mirrors failover-policy.ts DEFAULT_FAILOVER_CHAIN.
-  // Client-side lookup so the recovery affordance can render without a server
-  // round-trip; the actual spawn still hits /api/task on click.
-  var FAILOVER_CHAIN = ['claude-code', 'codex', 'aider', 'opencode', 'gemini'];
-  function pickFailoverTarget(currentAgent) {
-    var idx = FAILOVER_CHAIN.indexOf(currentAgent);
-    if (idx === -1) return FAILOVER_CHAIN[0]; // unknown current → start of chain
-    return FAILOVER_CHAIN[(idx + 1) % FAILOVER_CHAIN.length];
-  }
-
-  // Pattern 9 — cause-specific copy + action labels per failure code. Auth
-  // codes get a "Sign in" CTA (not failover-eligible per failover-policy);
-  // crashed/refused get the cross-vendor retry button. Falls back to a
-  // generic retry message for unknown codes.
-  function recoveryCopy(code, currentAgent, nextAgent) {
-    var nextLabel = agentLabel(nextAgent);
-    var curLabel = agentLabel(currentAgent);
-    if (code === 'rate_limit') {
-      return {
-        msg: '<b>' + escapeAgentTitle(curLabel) + '</b> is rate-limited. <b>' + escapeAgentTitle(nextLabel) + '</b> is available with the same prompt.',
-        primary: 'Retry with ' + nextLabel,
-        secondary: 'Wait it out',
-        canFailover: true
-      };
-    }
-    if (code === 'quota_exceeded') {
-      return {
-        msg: 'You hit <b>' + escapeAgentTitle(curLabel) + '</b>’s quota. <b>' + escapeAgentTitle(nextLabel) + '</b> can take this prompt.',
-        primary: 'Switch to ' + nextLabel,
-        secondary: 'Manage billing',
-        canFailover: true
-      };
-    }
-    if (code === 'credit_low') {
-      return {
-        msg: '<b>' + escapeAgentTitle(curLabel) + '</b> credits are running low. Top up or switch agents.',
-        primary: 'Switch to ' + nextLabel,
-        secondary: 'Top up ' + curLabel,
-        canFailover: true
-      };
-    }
-    if (code === 'auth_invalid' || code === 'auth_missing') {
-      return {
-        msg: '<b>' + escapeAgentTitle(curLabel) + '</b> needs sign-in. Switching agents won’t fix the underlying auth issue.',
-        primary: 'Open setup for ' + curLabel,
-        secondary: 'Try ' + nextLabel + ' instead',
-        canFailover: false // auth fix takes precedence over failover
-      };
-    }
-    if (code === 'crashed') {
-      return {
-        msg: '<b>' + escapeAgentTitle(curLabel) + '</b> crashed. <b>' + escapeAgentTitle(nextLabel) + '</b> can pick up where it left off.',
-        primary: 'Retry with ' + nextLabel,
-        secondary: 'View error',
-        canFailover: true
-      };
-    }
-    return {
-      msg: 'Something went wrong. <b>' + escapeAgentTitle(nextLabel) + '</b> can take this prompt.',
-      primary: 'Try ' + nextLabel,
-      secondary: 'Dismiss',
-      canFailover: true
-    };
-  }
-
-  // Build the recovery-affordance markup. Returns an HTMLElement ready to
-  // append to the session card. Caller wires the click handlers.
-  function buildRecoveryAffordance(code, currentAgent, nextAgent) {
-    var copy = recoveryCopy(code, currentAgent, nextAgent);
-    var div = document.createElement('div');
-    div.className = 'recovery-affordance';
-    div.dataset.cause = String(code || '');
-    div.innerHTML =
-      '<p class="ra-msg">' + copy.msg + '</p>' +
-      '<div class="ra-actions">' +
-        '<button class="ra-primary" type="button">' + (copy.canFailover ? agentBadgeHTML(nextAgent) + ' ' : '') + escapeAgentTitle(copy.primary) + '</button>' +
-        '<button class="ra-secondary" type="button">' + escapeAgentTitle(copy.secondary) + '</button>' +
-      '</div>';
-    return { el: div, copy: copy };
-  }
-
-  function startWhimsyRotator(el) {
-    if (!el) return function() {};
-    var recent = [];
-    function tick() {
-      var verb = pickWhimsyVerb(recent);
-      recent.push(verb);
-      if (recent.length > 5) recent.shift();
-      el.textContent = verb;
-    }
-    tick();
-    var timer;
-    function schedule() {
-      var delay = 4000 + Math.random() * 2000;
-      timer = setTimeout(function() { tick(); schedule(); }, delay);
-    }
-    schedule();
-    return function stop() {
-      if (timer) clearTimeout(timer);
-      timer = null;
-    };
-  }
-`;
-// ── /history — audit feed (what we shipped earlier in this session) ────────────
-export const HISTORY_HTML = `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1" />
-<title>codehere · Mission Control</title>
-<style>
-${SHARED_STYLES}
-  * { box-sizing: border-box; }
-  html, body { height: 100%; }
-  body {
-    margin: 0;
-    background: var(--bg);
-    color: var(--fg);
-    font-family: var(--sans);
-    font-size: 13px;
-    line-height: 1.55;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  /* ── Header ─────────────────────────────────────────────────────────── */
-  header {
-    position: sticky; top: 0; z-index: 10;
-    background: rgba(0,0,0,0.75);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border-bottom: 1px solid var(--border);
-    padding: 14px 24px;
-    display: flex; align-items: center; justify-content: space-between;
-  }
-  header .brand { display: flex; align-items: center; gap: 14px; }
-  header .title {
-    font-family: var(--mono);
-    font-size: 13px; font-weight: 600;
-    letter-spacing: 0.01em;
-  }
-  header .title .muted { color: var(--fg-40); font-weight: 400; margin-left: 6px; }
-  header .meta {
-    display: flex; align-items: center; gap: 14px;
-    font-family: var(--mono);
-    font-size: 11px; color: var(--fg-50);
-  }
-  header .meta .dot {
-    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
-    background: var(--fg-30); margin-right: 6px; vertical-align: middle;
-  }
-  header .meta .dot.live { background: var(--accent); }
-  header .eyebrow {
-    display: inline-block;
-    font-family: var(--mono);
-    font-size: 10px; letter-spacing: 0.12em;
-    color: var(--fg-40);
-    text-transform: uppercase;
-  }
-
-  /* ── Tagline under header ───────────────────────────────────────────── */
-  .tagline {
-    padding: 14px 24px 0;
-    font-family: var(--mono); font-size: 12px; color: var(--fg-50);
-    letter-spacing: 0.01em;
-  }
-  .tagline b { color: var(--fg-70); font-weight: 600; }
-
-  /* ── Status strip (answers A/B/C/D in one row) ──────────────────────── */
-  .status {
-    margin: 14px 24px 4px;
-    padding: 12px 16px;
-    border: 1px solid var(--border);
-    background: rgba(255,255,255,0.02);
-    border-radius: 8px;
-    display: flex; gap: 22px; flex-wrap: wrap;
-    font-family: var(--mono); font-size: 12px;
-  }
-  .status .stat { display: flex; align-items: center; gap: 8px; min-width: 0; }
-  .status .stat .label { color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
-  .status .stat .value { color: var(--fg); font-weight: 600; }
-  .status .stat.blocked .value.nonzero { color: var(--block); }
-  .status .stat .value.live { color: var(--allow); }
-  .status .stat.latest { flex: 1 1 260px; min-width: 200px; }
-  .status .stat.latest .value { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
-  .status .stat.latest .ago { color: var(--fg-40); font-weight: 400; }
-  .status .sep { color: var(--fg-20); user-select: none; }
-
-  /* ── Section label ─────────────────────────────────────────────────── */
-  .section-label {
-    padding: 18px 24px 6px;
-    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
-    color: var(--fg-40); text-transform: uppercase;
-  }
-
-  /* ── Feed ──────────────────────────────────────────────────────────── */
-  main { padding-bottom: 48px; }
-  /* Bug A5 — filter chip bar above the feed. Lets the user narrow the
-     wall-of-text down to outcomes (allow/block/override) or specific
-     tool families (Bash/Edit/Write/Read). Active chip glows with the
-     accent border. */
-  .feed-filters {
-    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
-    margin: 0 0 12px;
-    padding: 0 0 8px;
-    border-bottom: 1px solid var(--border-soft);
-  }
-  .feed-filters .filter-chip {
-    background: transparent;
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    color: var(--fg-50);
-    cursor: pointer;
-    font-family: var(--mono); font-size: 10.5px;
-    padding: 3px 9px;
-    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
-  }
-  .feed-filters .filter-chip:hover { color: var(--fg); border-color: var(--fg-30); }
-  .feed-filters .filter-chip.active {
-    color: var(--accent);
-    border-color: var(--accent);
-    background: var(--accent-wash);
-  }
-  .feed-filters .filter-chip-clear { color: var(--fg-30); }
-  .feed-filters .filter-chip-clear:hover { color: var(--block); border-color: var(--block); }
-  .feed-filters .filter-sep { color: var(--fg-20); user-select: none; padding: 0 2px; }
-  /* Hide rows whose data-outcome or data-tool doesn't match the active chips. */
-  #feed.filtered li:not(.feed-match) { display: none; }
-
-  #feed { list-style: none; margin: 0; padding: 0; }
-  /* Row layout — flex, not grid. Earlier grid had a fixed 5-column
-     template that stopped matching reality after seq + hash + agent
-     badge got added; outcome pill landed in a 1fr cell and stretched.
-     Flex with explicit ordering + a right-side ref cluster keeps the
-     primary signal (badge / outcome / tool / summary) on the left. */
-  #feed li {
-    padding: 10px 24px;
-    border-bottom: 1px solid var(--border-soft);
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    transition: background 120ms ease;
-  }
-  #feed li:hover { background: rgba(255,255,255,0.02); }
-  /* Seq + hash are FORENSIC-ONLY — both hidden by default per
-     claim_user_persona HIGH (non-technical users primary). The
-     "Advanced" toggle reveals BOTH columns together; without it
-     /history is the simple agent feed a non-technical user expects. */
-  #feed li .seq {
-    order: 100;
-    display: none;
-    color: var(--fg-30); font-family: var(--mono); font-size: 10px;
-    min-width: 42px; text-align: right;
-    user-select: all;
-  }
-  #feed li .hash {
-    order: 101;
-    display: none;
-    color: var(--fg-30); font-family: var(--mono); font-size: 10px;
-    min-width: 60px;
-    user-select: all;
-  }
-  body.advanced-on #feed li .seq,
-  body.advanced-on #feed li .hash { display: inline-block; }
-  /* Advanced toggle button — same visual shape as filter chips but its
-     own .active state managed by setAdvanced (not syncChipUI). */
-  .advanced-toggle {
-    font-family: var(--mono); font-size: 11px;
-    padding: 4px 12px; border-radius: 999px;
-    background: rgba(255,255,255,0.03);
-    color: var(--fg-50);
-    border: 1px solid var(--border);
-    cursor: pointer;
-    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-  }
-  .advanced-toggle:hover { color: var(--fg); border-color: var(--fg-30); }
-  .advanced-toggle.active {
-    background: var(--accent-wash);
-    border-color: var(--accent);
-    color: var(--accent);
-  }
-  /* Primary row order (left-to-right):
-       agent badge (16px) — outcome pill — tool (60px) — summary (1fr) — score (50px) — seq — hash
-     Flex order: badge=1, outcome=2, tool=3, summary=4 (flex:1), score=5,
-     seq=100, hash=101 (right-side ref cluster). */
-  #feed li .agent-badge { order: 1; flex: 0 0 16px; }
-  #feed li .ts {
-    order: 0; /* leftmost — chronological anchor */
-    color: var(--fg-40); font-family: var(--mono); font-size: 11px;
-    flex: 0 0 56px;
-    white-space: nowrap;
-  }
-  #feed li .outcome {
-    order: 2; flex: 0 0 auto;
-    display: inline-block;
-    font-family: var(--mono); font-size: 10.5px; font-weight: 600;
-    text-transform: lowercase; letter-spacing: 0.04em;
-    padding: 2px 10px; border-radius: 999px;
-    text-align: center;
-    border: 1px solid transparent;
-    min-width: 56px;
-  }
-  #feed li .outcome.allow {
-    color: var(--allow);
-    background: rgba(40,200,64,0.08);
-    border-color: rgba(40,200,64,0.20);
-  }
-  #feed li .outcome.block {
-    color: var(--block);
-    background: rgba(255,95,87,0.10);
-    border-color: rgba(255,95,87,0.30);
-  }
-  #feed li .outcome.override {
-    color: var(--warn);
-    background: rgba(254,188,46,0.08);
-    border-color: rgba(254,188,46,0.25);
-  }
-  #feed li .tool {
-    order: 3; flex: 0 0 auto;
-    color: var(--accent);
-    font-family: var(--mono); font-size: 11.5px;
-    min-width: 60px;
-  }
-  #feed li .summary {
-    order: 4; flex: 1 1 auto;
-    color: var(--fg-70);
-    font-family: var(--mono); font-size: 11.5px;
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-    min-width: 0; /* allows ellipsis to engage in a flex child */
-  }
-  #feed li .score {
-    order: 5; flex: 0 0 50px;
-    text-align: right;
-    font-family: var(--mono); font-size: 10.5px;
-    color: var(--warn);
-  }
-  #feed li .score.zero { color: var(--fg-30); }
-  #feed li .score.zero { color: var(--fg-30); }
-
-  /* P12 slice — tamper-evidence banner above the feed. Red, prominent,
-     dismissible by reload (no manual close — chain breaks are sticky
-     until verifyAuditChain returns valid=true again). */
-  .tamper-banner {
-    display: flex; align-items: center; gap: 10px;
-    padding: 10px 14px; margin: 12px 0;
-    border: 1px solid rgba(255,95,87,0.5);
-    background: rgba(255,95,87,0.08);
-    border-radius: 8px;
-    color: var(--block);
-    font-family: var(--mono); font-size: 12px;
-  }
-  /* Anomaly mode (seq_gap only — likely daemon restart, not tampering)
-     gets warn-yellow not block-red. Reserves alarming red for the
-     can't-be-benign case. */
-  .tamper-banner[data-severity="anomaly"] {
-    border-color: rgba(254,188,46,0.5);
-    background: rgba(254,188,46,0.08);
-    color: var(--warn);
-  }
-  /* Hide tamper banner entirely from non-technical users by default —
-     it requires forensic vocabulary ("chain anomaly", "hash mismatch")
-     to interpret. Surfaced when the Advanced toggle is on. */
-  .tamper-banner { display: none !important; }
-  body.advanced-on .tamper-banner[data-visible="true"] { display: flex !important; }
-
-  /* claim_user_persona — the More-filters group is hidden by default;
-     body.more-filters-on reveals it. */
-  .feed-filters.more-filters {
-    display: none;
-    padding-top: 0;
-    margin-top: 8px;
-    flex-wrap: wrap;
-    gap: 6px;
-    align-items: center;
-  }
-  body.more-filters-on .feed-filters.more-filters { display: flex; }
-  .feed-filters .filter-label {
-    font-family: var(--mono); font-size: 10.5px;
-    color: var(--fg-40);
-    margin-right: 2px;
-  }
-  .feed-filters .filter-spacer { flex: 1; }
-  .tamper-banner .tb-icon { font-size: 14px; }
-  .tamper-banner .tb-text { font-weight: 600; }
-  .tamper-banner .tb-detail { color: var(--fg-70); font-size: 11px; }
-
-  /* ── Empty state ───────────────────────────────────────────────────── */
-  #empty {
-    padding: 64px 24px;
-    text-align: center;
-    color: var(--fg-50);
-  }
-  #empty .pill {
-    display: inline-block;
-    padding: 6px 14px;
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: rgba(255,255,255,0.03);
-    font-family: var(--mono); font-size: 11px;
-    color: var(--fg-70);
-    margin-bottom: 14px;
-  }
-  #empty .hint {
-    margin-top: 10px;
-    font-family: var(--mono); font-size: 11px; color: var(--fg-40);
-  }
-  code {
-    font-family: var(--mono);
-    background: rgba(255,255,255,0.05);
-    padding: 1px 6px; border-radius: 4px;
-    color: var(--fg);
-  }
-</style>
-</head>
-<body>
-<nav class="floating-nav">
-  <a href="/" class="logo">codehere</a>
-  <a href="/" class="nav-link">Tasks</a>
-  <a href="/threads" class="nav-link">Threads</a>
-  <a href="/history" class="nav-link active">History</a>
-  <a href="https://codehere.uk" class="nav-link nav-external" target="_blank" rel="noopener" title="Open codehere.uk">Docs ↗</a>
-  <span class="mode-indicator" data-mode="" id="mode-indicator" title="Loading safety-hook mode…"><span class="mi-dot"></span><span class="mi-label">…</span></span>
-</nav>
-
-<div class="tagline" style="margin-top:90px">
-  One feed. Every agent. Every action.
-  <span class="conn-inline" style="margin-left:12px;font-family:var(--mono);font-size:10px;color:var(--fg-40);">
-    <span id="live-dot" class="dot"></span><span id="conn">connecting</span>
-  </span>
-</div>
-
-<div class="status">
-  <div class="stat">
-    <span class="label">Sessions</span>
-    <span class="value live" id="stat-sessions">0</span>
-  </div>
-  <span class="sep">·</span>
-  <div class="stat blocked">
-    <span class="label">Blocked</span>
-    <span class="value" id="stat-blocked">0</span>
-  </div>
-  <span class="sep">·</span>
-  <div class="stat">
-    <span class="label">Events</span>
-    <span class="value" id="stat-events">0</span>
-    <span class="label">past hour</span>
-  </div>
-  <span class="sep">·</span>
-  <div class="stat latest">
-    <span class="label">Latest</span>
-    <span class="value" id="stat-latest">—</span>
-    <span class="ago" id="stat-latest-ago"></span>
-  </div>
-</div>
-
-<div class="section-label">Audit feed · Live</div>
-<main>
-  <!-- Bug A5 — filter chip bar. Wall-of-text feed with no grouping/filter
-       made the page hard to scan; chips toggle visibility per outcome
-       (allow/block/override) and per tool family. State lives in URL hash
-       so reload preserves the active filter. -->
-  <!-- claim_user_persona HIGH — non-technical users primary. Default
-       bar: outcome filters only (4 buttons). Per-tool + per-agent chips
-       behind the .more-filters group; .advanced-toggle gates seq + hash.
-       Reduces default surface count from 14 to 4 while keeping power
-       features one click away for technical users. -->
-  <div id="feed-filters" class="feed-filters" role="tablist">
-    <button class="filter-chip active" data-filter="outcome" data-value="all" type="button">All</button>
-    <button class="filter-chip"        data-filter="outcome" data-value="block" type="button">Blocked</button>
-    <button class="filter-chip"        data-filter="outcome" data-value="override" type="button">Overridden</button>
-    <button class="filter-chip filter-chip-clear" data-filter="clear" type="button">Clear</button>
-    <span class="filter-spacer"></span>
-    <button class="advanced-toggle" id="more-filters-toggle" type="button" title="Show per-tool, per-agent, and forensic filters">More ▾</button>
-    <button class="advanced-toggle" id="advanced-toggle" type="button" title="Show chain seq + hash columns (forensic)">Advanced</button>
-  </div>
-  <!-- Disclosure group — hidden by default. body.more-filters-on
-       reveals the row. -->
-  <div id="more-filters" class="feed-filters more-filters" role="tablist">
-    <span class="filter-label">Tool:</span>
-    <button class="filter-chip" data-filter="tool" data-value="Bash" type="button">Bash</button>
-    <button class="filter-chip" data-filter="tool" data-value="Edit" type="button">Edit</button>
-    <button class="filter-chip" data-filter="tool" data-value="Write" type="button">Write</button>
-    <button class="filter-chip" data-filter="tool" data-value="Read" type="button">Read</button>
-    <button class="filter-chip" data-filter="tool" data-value="pre_prompt" type="button" title="Pre-spawn safety scans">Pre-prompt</button>
-    <span class="filter-sep">·</span>
-    <span class="filter-label">Agent:</span>
-    <button class="filter-chip" data-filter="agent" data-value="claude-code" type="button">Claude Code</button>
-    <button class="filter-chip" data-filter="agent" data-value="codex" type="button">Codex</button>
-    <button class="filter-chip" data-filter="agent" data-value="aider" type="button">Aider</button>
-    <button class="filter-chip" data-filter="agent" data-value="gemini" type="button">Gemini</button>
-    <button class="filter-chip" data-filter="agent" data-value="conductor" type="button">Conductor</button>
-  </div>
-  <!-- P12 slice — tamper-evidence banner. Shown only when /api/audit/verify
-       returns valid=false. Hash-chain integrity is the load-bearing
-       differentiator for codehere's audit log; surfacing chain breaks is
-       the user-visible payoff. -->
-  <div id="tamper-banner" class="tamper-banner" style="display:none">
-    <span class="tb-icon">⚠</span>
-    <span class="tb-text">Audit log tampering detected.</span>
-    <span class="tb-detail" id="tb-detail"></span>
-  </div>
-  <ul id="feed"></ul>
-  <div id="empty">
-    <div class="pill">No tool calls yet</div>
-    <div class="hint">
-      Install the hook → <code>ch hook install</code> — then any Claude Code, Cursor, or Codex tool call will appear here live.
-    </div>
-  </div>
-</main>
-
-<script>
-${AGENT_BADGE_JS}
-
-(function () {
-  const feed = document.getElementById('feed');
-  const empty = document.getElementById('empty');
-  // UX-simplification iter 3 (May 7): dropped countEl reference — the
-  // #count element doesn't exist in HISTORY markup. countEl.textContent
-  // threw TypeError on every render, eating the next line that hides
-  // the empty-state. Result: visible "No tool calls yet" message AND
-  // 50 visible feed entries simultaneously. Latent bug since the
-  // history view shipped.
-  const connEl = document.getElementById('conn');
-  const dot = document.getElementById('live-dot');
-
-  function shortPath(p) {
-    const parts = String(p).split('/');
-    return parts.length <= 2 ? p : '…/' + parts.slice(-2).join('/');
-  }
-
-  function summarize(entry) {
-    if (entry.reason) return String(entry.reason);
-    if (entry.matched) return String(entry.matched);
-
-    const raw = entry.toolInput;
-    if (!raw) return '';
-
-    try {
-      const input = typeof raw === 'string' ? JSON.parse(raw) : raw;
-      // W-PASS audit entries (v0.9 S6) use target/method/reason/passId fields.
-      // Without this branch summarize() falls back to entry.toolName and the
-      // row template renders "WritePass.intent  WritePass.intent" twice.
-      if (input.target && input.method) {
-        const reason = input.reason ? ' · ' + String(input.reason).slice(0, 80) : '';
-        return String(input.method) + ' ' + String(input.target) + reason;
-      }
-      if (input.command) return String(input.command).replace(/\\n/g, ' ').slice(0, 140);
-      if (input.file_path) return shortPath(String(input.file_path));
-      if (Array.isArray(input.edits) && input.edits[0] && input.edits[0].file_path) {
-        return input.edits.length + ' edits → ' + shortPath(String(input.edits[0].file_path));
-      }
-      if (input.query) return String(input.query).slice(0, 140);
-      if (input.url) return String(input.url);
-      if (input.pattern) return 'grep ' + String(input.pattern).slice(0, 120);
-      if (input.path) return shortPath(String(input.path));
-    } catch { /* truncated JSON — regex fallback below */ }
-
-    const s = String(raw);
-    const fp = s.match(/"file_path"\\s*:\\s*"([^"]+)"/);
-    if (fp) return shortPath(fp[1]);
-    const cmd = s.match(/"command"\\s*:\\s*"([^"]{0,140})"/);
-    if (cmd) return cmd[1].replace(/\\\\n/g, ' ');
-
-    // No meaningful summary derivable. Return empty so the row template
-    // can hide the summary span instead of duplicating the tool name.
-    return '';
-  }
-
-  function escape(s) {
-    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
-  }
-
-  function render(entry) {
-    const ts = new Date(entry.timestamp || Date.now()).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
-    const blocked = Boolean(entry.blocked);
-    // Bug A5 — derive a 3-way outcome (allow / block / override) and stamp
-    // it as a data-attribute so the filter chips can hide non-matching rows
-    // without re-rendering the feed.
-    const isOverride = Boolean(entry.overrideReason);
-    const outcome = isOverride ? 'override' : (blocked ? 'block' : 'allow');
-    const tool = String(entry.toolName || entry.tool_name || '—');
-    const score = entry.riskScore ?? entry.risk_score ?? 0;
-    const summary = summarize(entry);
-    // Cross-vendor audit-mirror (#110 slice 2-4) writes the originating
-    // agent inside toolInput as JSON. Pull it for the per-row badge so
-    // users can tell at a glance whether codex / aider / gemini / etc.
-    // ran each call. Falls back to no-badge when toolInput isn't JSON
-    // (legacy entries pre-mirror — Claude PreToolUse rows).
-    let originAgent = '';
-    try {
-      const parsed = typeof entry.toolInput === 'string' ? JSON.parse(entry.toolInput) : entry.toolInput;
-      if (parsed && typeof parsed === 'object' && typeof parsed.agent === 'string') {
-        originAgent = parsed.agent;
-      }
-    } catch { /* not JSON — leave blank */ }
-
-    // P12 follow-up — surface the chain seq number per row. Forensic
-    // value: a reviewer can refer to a specific entry by its seq + the
-    // hash banner up top makes it easy to verify integrity. Rows with
-    // no seq (legacy entries) get a muted dash.
-    const seq = (typeof entry.seq === 'number') ? entry.seq : null;
-    const entryHash = (typeof entry.entryHash === 'string') ? entry.entryHash : null;
-
-    const li = document.createElement('li');
-    li.dataset.outcome = outcome;
-    li.dataset.tool = tool;
-    if (originAgent) li.dataset.agent = originAgent;
-    if (seq !== null) li.dataset.seq = String(seq);
-    if (entryHash) li.dataset.hash = entryHash;
-    // P12 advanced — short hash (8 chars) revealed by the Advanced toggle.
-    // Stored on the row regardless; CSS hides it by default.
-    const shortHash = entryHash ? entryHash.slice(0, 8) : '—';
-    li.innerHTML =
-      '<span class="seq" title="Chain sequence number">' + (seq !== null ? '#' + seq : '—') + '</span>' +
-      '<span class="hash" title="' + (entryHash ? 'entryHash: ' + entryHash : 'no chain hash') + '">' + shortHash + '</span>' +
-      '<span class="ts">' + escape(ts) + '</span>' +
-      (originAgent ? agentBadgeHTML(originAgent) : '') +
-      '<span class="outcome ' + outcome + '">' + outcome + '</span>' +
-      '<span class="tool">' + escape(tool) + '</span>' +
-      (summary ? '<span class="summary" title="' + escape(summary) + '">' + escape(summary) + '</span>' : '') +
-      '<span class="score ' + (score ? '' : 'zero') + '">' + (score ? score : '—') + '</span>';
-    feed.insertBefore(li, feed.firstChild);
-    applyFilterToRow(li);
-    empty.style.display = 'none';
-    // v0.6 — cap DOM rows so a long-open /history tab doesn't accumulate
-    // thousands of <li>s (~50 events/min × hours = browser slowdown).
-    // Same cap-pattern as /threads (turns) and dashboard (sessions).
-    // Newest-first prepend means the OLDEST is the LAST child; trim that.
-    const MAX_FEED_ROWS = 500;
-    while (feed.children.length > MAX_FEED_ROWS) {
-      feed.removeChild(feed.lastChild);
-    }
-  }
-
-  // Bug A5 — filter state. Active outcome filter and active tool filter
-  // (each null means "no filter"). Persisted in the URL hash so a
-  // bookmarkable view is achievable + reload preserves the filter.
-  const filterState = { outcome: null, tool: null };
-  function readFilterFromHash() {
-    const hash = (location.hash || '').replace(/^#/, '');
-    if (!hash) return;
-    const params = new URLSearchParams(hash);
-    const o = params.get('outcome');
-    const t = params.get('tool');
-    if (o && o !== 'all') filterState.outcome = o;
-    if (t) filterState.tool = t;
-  }
-  function writeFilterToHash() {
-    const params = new URLSearchParams();
-    if (filterState.outcome) params.set('outcome', filterState.outcome);
-    if (filterState.tool) params.set('tool', filterState.tool);
-    const next = params.toString();
-    location.hash = next ? '#' + next : '';
-  }
-  function rowMatches(li) {
-    const o = li.dataset.outcome || '';
-    const t = li.dataset.tool || '';
-    if (filterState.outcome && o !== filterState.outcome) return false;
-    if (filterState.tool && t !== filterState.tool) return false;
-    return true;
-  }
-  function applyFilterToRow(li) {
-    if (rowMatches(li)) li.classList.add('feed-match');
-    else li.classList.remove('feed-match');
-  }
-  function applyFilterToAllRows() {
-    const active = !!(filterState.outcome || filterState.tool);
-    feed.classList.toggle('filtered', active);
-    Array.prototype.forEach.call(feed.querySelectorAll('li'), applyFilterToRow);
-  }
-  function syncChipUI() {
-    const chips = document.querySelectorAll('#feed-filters .filter-chip');
-    Array.prototype.forEach.call(chips, function(chip) {
-      const fk = chip.dataset.filter;
-      const fv = chip.dataset.value;
-      if (fk === 'clear') return;
-      let isActive = false;
-      if (fk === 'outcome') {
-        isActive = (fv === 'all' && !filterState.outcome) || (fv !== 'all' && filterState.outcome === fv);
-      } else if (fk === 'tool') {
-        isActive = filterState.tool === fv;
-      }
-      chip.classList.toggle('active', isActive);
-    });
-  }
-  document.addEventListener('click', function(ev) {
-    const chip = ev.target && ev.target.closest && ev.target.closest('.filter-chip');
-    if (!chip) return;
-    const fk = chip.dataset.filter;
-    const fv = chip.dataset.value;
-    if (fk === 'clear') {
-      filterState.outcome = null;
-      filterState.tool = null;
-    } else if (fk === 'outcome') {
-      filterState.outcome = fv === 'all' ? null : fv;
-    } else if (fk === 'tool') {
-      // Toggle: clicking an already-active tool chip clears the tool filter.
-      filterState.tool = filterState.tool === fv ? null : fv;
-    }
-    writeFilterToHash();
-    syncChipUI();
-    applyFilterToAllRows();
-  });
-  // Init from URL hash
-  readFilterFromHash();
-  syncChipUI();
-
-  // ── Status strip (answers C/A/B/D) ───────────────────────────────────
-  const events = []; // accumulate for rolling-window stats
-  const HOUR_MS = 60 * 60 * 1000;
-
-  function parseTs(entry) {
-    const t = entry.timestamp;
-    if (typeof t === 'number') return t;
-    if (typeof t === 'string') { const n = Date.parse(t); return isNaN(n) ? Date.now() : n; }
-    return Date.now();
-  }
-
-  function agoString(ms) {
-    const s = Math.max(0, Math.floor((Date.now() - ms) / 1000));
-    if (s < 60) return s + 's ago';
-    if (s < 3600) return Math.floor(s / 60) + 'm ago';
-    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
-    return Math.floor(s / 86400) + 'd ago';
-  }
-
-  function recomputeStats() {
-    const now = Date.now();
-    const cutoff = now - HOUR_MS;
-    const inWindow = events.filter(e => e._ts >= cutoff);
-    const sessions = new Set();
-    let blocked = 0;
-    for (const e of inWindow) {
-      if (e.sessionId) sessions.add(e.sessionId);
-      if (e.blocked) blocked += 1;
-    }
-    document.getElementById('stat-sessions').textContent = String(sessions.size);
-    const blockedEl = document.getElementById('stat-blocked');
-    blockedEl.textContent = String(blocked);
-    blockedEl.classList.toggle('nonzero', blocked > 0);
-    document.getElementById('stat-events').textContent = String(inWindow.length);
-
-    const latest = events[events.length - 1];
-    if (latest) {
-      const tool = String(latest.toolName || 'tool');
-      const sum = summarize(latest);
-      document.getElementById('stat-latest').textContent = tool + ' · ' + sum;
-      document.getElementById('stat-latest-ago').textContent = agoString(latest._ts);
-    }
-  }
-
-  const es = new EventSource('/events');
-  es.onopen = () => { dot.classList.add('live'); connEl.textContent = 'live'; };
-  es.onerror = () => { dot.classList.remove('live'); connEl.textContent = 'reconnecting'; };
-  es.onmessage = (ev) => {
-    try {
-      const entry = JSON.parse(ev.data);
-      entry._ts = parseTs(entry);
-      events.push(entry);
-      // v0.6 — paired with the DOM cap above. Stats only need recent
-      // events; trimming the head keeps recomputeStats O(MAX) not O(forever).
-      const MAX_EVENTS_IN_MEMORY = 500;
-      if (events.length > MAX_EVENTS_IN_MEMORY) {
-        events.splice(0, events.length - MAX_EVENTS_IN_MEMORY);
-      }
-      render(entry);
-      recomputeStats();
-    } catch { /* skip malformed */ }
-  };
-
-  // Keep "Xs/Xm ago" fresh even when no new events arrive
-  setInterval(() => { if (events.length) recomputeStats(); }, 1000);
-
-  // P12 slice — poll /api/audit/verify every 60s; show the tamper
-  // banner if the hash chain breaks. First poll runs at load.
-  function pollAuditChain() {
-    fetch('/api/audit/verify')
-      .then(r => r.ok ? r.json() : null)
-      .then(d => {
-        if (!d) return;
-        const banner = document.getElementById('tamper-banner');
-        const detail = document.getElementById('tb-detail');
-        if (!banner) return;
-        if (d.valid) {
-          banner.dataset.visible = 'false';
-          return;
-        }
-        // claim_user_persona HIGH — banner hidden from non-technical
-        // users (CSS gates on body.advanced-on). data-visible flag
-        // tells CSS whether to show when advanced toggle flips on.
-        // Severity-driven copy below stays for technical readers.
-        const errs = Array.isArray(d.errors) ? d.errors : [];
-        const hasHashMismatch = errs.some(function(e) { return e.reason === 'hash_mismatch' || e.reason === 'parse_failure'; });
-        const titleEl = banner.querySelector('.tb-text');
-        const iconEl = banner.querySelector('.tb-icon');
-        if (hasHashMismatch) {
-          banner.dataset.severity = 'tamper';
-          if (titleEl) titleEl.textContent = 'Audit log tampering detected.';
-          if (iconEl) iconEl.textContent = '⚠';
-        } else {
-          banner.dataset.severity = 'anomaly';
-          if (titleEl) titleEl.textContent = 'Audit chain anomaly (likely a daemon restart).';
-          if (iconEl) iconEl.textContent = 'ℹ';
-        }
-        banner.dataset.visible = 'true';
-        if (detail && errs.length > 0) {
-          const first = errs[0];
-          detail.textContent = '· ' + (errs.length === 1
-            ? 'line ' + first.lineNumber + ': ' + first.reason
-            : errs.length + ' issues (first at line ' + first.lineNumber + ')');
-        }
-      })
-      .catch(() => { /* leave banner state */ });
-  }
-  pollAuditChain();
-  setInterval(pollAuditChain, 60000);
-
-  // P12 advanced toggle — flip body.advanced-on. Persisted via the URL
-  // hash (?advanced=1) so reload preserves. Click toggles back off.
-  const advancedToggle = document.getElementById('advanced-toggle');
-  function setAdvanced(on) {
-    document.body.classList.toggle('advanced-on', !!on);
-    if (advancedToggle) advancedToggle.classList.toggle('active', !!on);
-    try {
-      const params = new URLSearchParams((location.hash || '').replace(/^#/, ''));
-      if (on) params.set('advanced', '1'); else params.delete('advanced');
-      const next = params.toString();
-      location.hash = next ? '#' + next : '';
-    } catch { /* hash write best-effort */ }
-  }
-  // Hash-on-load read
-  try {
-    const params = new URLSearchParams((location.hash || '').replace(/^#/, ''));
-    if (params.get('advanced') === '1') setAdvanced(true);
-    if (params.get('more') === '1') setMoreFilters(true);
-  } catch { /* ignore */ }
-  if (advancedToggle) advancedToggle.addEventListener('click', function() {
-    setAdvanced(!document.body.classList.contains('advanced-on'));
-  });
-
-  // claim_user_persona HIGH — More-filters disclosure for the per-tool
-  // + per-agent chips. Default closed so non-technical users see 4
-  // chips instead of 14.
-  const moreToggle = document.getElementById('more-filters-toggle');
-  function setMoreFilters(on) {
-    document.body.classList.toggle('more-filters-on', !!on);
-    if (moreToggle) moreToggle.classList.toggle('active', !!on);
-    try {
-      const params = new URLSearchParams((location.hash || '').replace(/^#/, ''));
-      if (on) params.set('more', '1'); else params.delete('more');
-      const next = params.toString();
-      location.hash = next ? '#' + next : '';
-    } catch { /* hash write best-effort */ }
-  }
-  if (moreToggle) moreToggle.addEventListener('click', function() {
-    setMoreFilters(!document.body.classList.contains('more-filters-on'));
-  });
-})();
-</script>
-</body>
-</html>`;
-/**
- * Project thread view — v0.6.0 M1 phase 1.
- *
- * Reads from /api/projects + /api/projects/:slug (shipped in 397a66a) and
- * renders a single per-project thread instead of session-card-per-task.
- * Phase 2 (next) promotes this to the dashboard default; this phase ships
- * it as a navigable surface so it can be tasted without breaking the
- * existing dashboard.
- *
- * Polling: 5s interval (matches existing /api/tasks polling cadence).
- * SSE upgrade is a v0.6.x patch.
- */
-export const THREAD_HTML = `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1" />
-<title>codehere · Threads</title>
-<style>
-${SHARED_STYLES}
-  * { box-sizing: border-box; }
-  html, body { height: 100%; }
-  body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 13px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
-
-  /* Floating nav inherits from SHARED_STYLES (no override here — keeps the
-     active-state look identical to / and /history. Founder caught
-     2026-05-03 that the local override gave /threads a different orange-bg
-     active state, fragmenting the design system across pages.) */
-
-  /* ── Slack-shape shell (3-column — channels | thread | members) ─────── */
-  .shell.slack-shape {
-    max-width: 1440px;
-    margin: 90px auto 24px;
-    padding: 0 24px;
-    display: grid;
-    grid-template-columns: 200px 1fr 220px;
-    gap: 16px;
-    align-items: start;
-  }
-  @media (max-width: 1100px) {
-    .shell.slack-shape { grid-template-columns: 1fr; }
-    .shell.slack-shape .channels-pane, .shell.slack-shape .members-pane {
-      position: static; order: 99;
-    }
-  }
-  .channels-pane, .members-pane {
-    background: rgba(255,255,255,0.025);
-    border: 1px solid var(--border-soft);
-    border-radius: 10px;
-    padding: 14px 12px;
-    position: sticky; top: 88px;
-    font-family: var(--mono);
-    z-index: 1;
-  }
-  .pane-head {
-    font-size: 9.5px; letter-spacing: 0.16em;
-    color: var(--fg-30); margin-bottom: 10px;
-    text-transform: uppercase;
-    display: flex; align-items: center; justify-content: space-between;
-  }
-  .pane-head .pane-count { color: var(--fg-50); }
-  .channel, .member {
-    display: flex; align-items: center; gap: 8px;
-    padding: 6px 8px; border-radius: 6px;
-    font-size: 11.5px;
-    cursor: pointer;
-    color: var(--fg-70);
-    border: 1px solid transparent;
-    margin-bottom: 2px;
-  }
-  .channel:hover, .member:hover { background: rgba(255,255,255,0.04); color: var(--fg); }
-  .channel.active { background: rgba(255,154,118,0.08); color: var(--fg); border-color: rgba(255,154,118,0.25); }
-  .channel-glyph, .member-presence {
-    color: var(--fg-40); flex: 0 0 14px; text-align: center;
-  }
-  .member-presence.ready { color: var(--allow); }
-  .member-presence.warn { color: var(--warn); }
-  .member-presence.offline { color: var(--fg-30); }
-  .channel-name, .member-label {
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-    flex: 1; min-width: 0;
-  }
-  .member-cwd-hint, .channel-cwd-hint {
-    font-size: 9.5px; color: var(--fg-30);
-    margin-top: 4px; padding-left: 22px;
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  }
-  /* Pencil affordance for project rename. Always visible at subtle opacity;
-     brightens only when the user hovers the pencil itself. NO background
-     box at any state. Inline SVG so it renders crisp at any size and
-     inherits color from CSS. */
-  .channel-rename {
-    background: transparent; border: none; cursor: pointer;
-    color: var(--fg-30); padding: 4px;
-    transition: color 0.12s ease;
-    flex: 0 0 auto;
-    display: inline-flex; align-items: center; justify-content: center;
-  }
-  .channel-rename svg { display: block; width: 14px; height: 14px; }
-  .channel-rename:hover { color: var(--fg); background: transparent; }
-
-  /* Inline edit-in-place for project rename. May 6 2026: replaces the
-     prior window.prompt() browser dialog (cheap UX; not enterprise-grade
-     per Open-Agents reference). Input matches channel-name typography so
-     the swap feels seamless. */
-  .channel-rename-input {
-    background: transparent;
-    border: 1px solid var(--accent);
-    border-radius: 3px;
-    color: var(--fg);
-    font: inherit;
-    font-weight: 500;
-    padding: 1px 4px;
-    margin: -2px -5px;
-    width: calc(100% + 10px);
-    outline: none;
-    box-sizing: border-box;
-  }
-  .channel-rename-input.error {
-    border-color: var(--block);
-    animation: rename-shake 0.25s ease;
-  }
-  @keyframes rename-shake {
-    0%, 100% { transform: translateX(0); }
-    25% { transform: translateX(-2px); }
-    75% { transform: translateX(2px); }
-  }
-  .pane-empty {
-    color: var(--fg-30); font-size: 10.5px;
-    padding: 8px; text-align: center;
-  }
-
-  /* ── Thread pane (center) ───────────────────────────────────────────── */
-  .thread-pane { min-width: 0; }
-
-  .meta-panel {
-    border: 1px solid var(--border); background: rgba(255,255,255,0.02);
-    border-radius: 10px; padding: 18px 20px; margin-bottom: 16px;
-  }
-  .meta-panel h1 {
-    font-size: 22px; font-weight: 600; color: var(--fg);
-    margin: 0 0 6px 0; line-height: 1.3;
-  }
-  .meta-panel h1.untitled { color: var(--fg-40); font-style: italic; font-weight: 400; }
-  .meta-panel .cwd {
-    font-family: var(--mono); font-size: 11px; color: var(--fg-50);
-    margin-bottom: 12px; word-break: break-all;
-  }
-  .meta-panel .stats {
-    display: flex; gap: 22px; font-family: var(--mono); font-size: 11px; color: var(--fg-50);
-    flex-wrap: wrap;
-  }
-  .meta-panel .stats .stat { display: flex; gap: 6px; }
-  .meta-panel .stats .stat .label { color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
-  .meta-panel .stats .stat .val { color: var(--fg); font-weight: 600; }
-
-  .section-label {
-    padding: 8px 4px;
-    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
-    color: var(--fg-40); text-transform: uppercase;
-  }
-
-  /* ── Task entries ───────────────────────────────────────────────────── */
-  .task {
-    border: 1px solid var(--border); background: rgba(255,255,255,0.015);
-    border-radius: 8px; padding: 14px 16px; margin-bottom: 10px;
-  }
-  .task .row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
-  .task .agent {
-    font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 10px;
-    background: rgba(120, 180, 255, 0.10); color: #9bbfff; border: 1px solid rgba(120, 180, 255, 0.18);
-  }
-  .task .status {
-    font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 10px;
-    text-transform: uppercase; letter-spacing: 0.05em;
-  }
-  /* Pattern 8 ride-along revert: f830183 demoted .completed to muted neutral.
-     Restoring green — actionable success is a load-bearing semantic signal
-     in agentic UX. */
-  .task .status.completed { background: rgba(40,200,64,0.10); color: var(--allow); border: 1px solid rgba(40,200,64,0.20); }
-  .task .status.running { background: var(--accent-wash); color: var(--accent); border: 1px solid rgba(255,154,118,0.25); }
-  .task .status.error, .task .status.failed { background: rgba(220, 60, 60, 0.10); color: var(--block); border: 1px solid rgba(220, 60, 60, 0.18); }
-  .task .status.abandoned { background: rgba(255,255,255,0.04); color: var(--fg-40); border: 1px solid var(--border); }
-  .task .ts { font-family: var(--mono); font-size: 11px; color: var(--fg-40); margin-left: auto; }
-  .task .prompt { color: var(--fg); font-size: 13px; line-height: 1.5; word-wrap: break-word; }
-  .task .duration { font-family: var(--mono); font-size: 11px; color: var(--fg-50); margin-top: 8px; }
-  .task .duration b { color: var(--fg-70); font-weight: 600; }
-  .task .steps { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--border); font-family: var(--mono); font-size: 11px; color: var(--fg-50); }
-  .task .steps .step { padding: 2px 0; }
-  .task .steps .step.done::before { content: '✓ '; color: var(--allow); }
-
-  /* Pattern 21 · Buffered reveal — cascade animation for completed steps */
-  .task .steps.buffered-reveal .step {
-    opacity: 0;
-    transform: translateY(4px);
-    animation: br-cascade 80ms ease-out forwards;
-  }
-  .task .steps.buffered-reveal .step:nth-child(1) { animation-delay: 0ms; }
-  .task .steps.buffered-reveal .step:nth-child(2) { animation-delay: 80ms; }
-  .task .steps.buffered-reveal .step:nth-child(3) { animation-delay: 160ms; }
-  .task .steps.buffered-reveal .step:nth-child(4) { animation-delay: 240ms; }
-  .task .steps.buffered-reveal .step:nth-child(5) { animation-delay: 320ms; }
-  .task .steps.buffered-reveal .step:nth-child(6) { animation-delay: 400ms; }
-  .task .steps.buffered-reveal .step:nth-child(7) { animation-delay: 480ms; }
-  .task .steps.buffered-reveal .step:nth-child(8) { animation-delay: 560ms; }
-  .task .steps.buffered-reveal .step:nth-child(9) { animation-delay: 640ms; }
-  .task .steps.buffered-reveal .step:nth-child(10) { animation-delay: 720ms; }
-  @keyframes br-cascade {
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  .empty {
-    text-align: center; padding: 60px 24px; color: var(--fg-50); font-family: var(--mono); font-size: 13px;
-  }
-  .empty .pill {
-    display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 16px;
-    margin-bottom: 12px; font-size: 11px;
-  }
-  .empty .hint { font-size: 12px; color: var(--fg-40); }
-  .empty a { color: var(--accent); }
-
-  /* ── Reply bar at thread bottom (Slack-shape) ───────────────────────── */
-  .reply-bar {
-    margin-top: 16px;
-    border: 1px solid var(--border); background: rgba(255,255,255,0.02);
-    border-radius: 10px; padding: 12px 14px;
-  }
-  .reply-bar.disabled { opacity: 0.6; }
-  .reply-bar .reply-label {
-    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
-    color: var(--fg-40); text-transform: uppercase; margin-bottom: 8px;
-  }
-  .reply-bar textarea {
-    width: 100%; min-height: 60px; padding: 10px 12px;
-    background: var(--bg-2); color: var(--fg); border: 1px solid var(--border);
-    border-radius: 6px; font-family: var(--sans); font-size: 13px; line-height: 1.5;
-    resize: vertical; outline: none;
-  }
-  .reply-bar textarea:focus { border-color: var(--accent); }
-  .reply-bar textarea::placeholder { color: var(--fg-30); }
-  .reply-bar .row {
-    display: flex; align-items: center; justify-content: space-between; gap: 12px;
-    margin-top: 8px;
-  }
-  .reply-bar .hint { font-family: var(--mono); font-size: 11px; color: var(--fg-40); }
-  .reply-bar button {
-    background: rgba(255,154,118,0.10); color: var(--accent); border: 1px solid rgba(255,154,118,0.3);
-    padding: 6px 16px; border-radius: 6px; font-family: var(--mono); font-size: 12px; cursor: pointer;
-  }
-  .reply-bar button:hover { background: rgba(255,154,118,0.18); }
-  .reply-bar button:disabled { opacity: 0.4; cursor: default; }
-  .reply-bar .status { font-family: var(--mono); font-size: 11px; color: var(--fg-50); margin-top: 8px; }
-  .reply-bar .status.error { color: var(--block); }
-
-  code { font-family: var(--mono); background: rgba(255,255,255,0.05); padding: 1px 6px; border-radius: 4px; }
-</style>
-</head>
-<body>
-<nav class="floating-nav">
-  <a href="/" class="logo">codehere</a>
-  <a href="/" class="nav-link">Tasks</a>
-  <a href="/threads" class="nav-link active">Threads</a>
-  <a href="/history" class="nav-link">History</a>
-  <a href="https://codehere.uk" class="nav-link nav-external" target="_blank" rel="noopener" title="Open codehere.uk">Docs ↗</a>
-  <span class="mode-indicator" data-mode="" id="mode-indicator" title="Loading safety-hook mode…"><span class="mi-dot"></span><span class="mi-label">…</span></span>
-</nav>
-
-<div class="shell slack-shape">
-
-<aside class="channels-pane">
-  <div class="pane-head"><span>Projects</span><span class="pane-count" id="projects-count">0</span></div>
-  <div id="projects-list"><div class="pane-empty">Loading…</div></div>
-</aside>
-
-<section class="thread-pane">
-  <div id="thread-container"><div class="empty"><div class="pill">No project selected</div></div></div>
-
-  <!-- v0.6.0 Slice 4 — single reply input at thread bottom (Slack-shape).
-       Routes to the LAST task's session in the thread via POST /api/task/<lastSessionId>/message. -->
-  <div class="reply-bar disabled" id="reply-bar" style="display:none">
-    <div class="reply-label">Reply to thread</div>
-    <textarea id="reply-text" placeholder="Reply to this thread… (Cmd+Enter / Ctrl+Enter to send)" rows="2" disabled></textarea>
-    <div class="row">
-      <span class="hint" id="reply-hint">No active session — spawn a task first</span>
-      <button type="button" id="reply-send" disabled>Send</button>
-    </div>
-    <div class="status" id="reply-status" style="display:none"></div>
-  </div>
-</section>
-
-<aside class="members-pane">
-  <div class="pane-head"><span>Agents</span><span class="pane-count" id="agents-count">0</span></div>
-  <div id="agents-list"><div class="pane-empty">Loading…</div></div>
-</aside>
-
-</div>
-
-<script>
-(function () {
-  const projectsList = document.getElementById('projects-list');
-  const projectsCount = document.getElementById('projects-count');
-  const agentsList = document.getElementById('agents-list');
-  const agentsCount = document.getElementById('agents-count');
-  const container = document.getElementById('thread-container');
-  const replyBar = document.getElementById('reply-bar');
-  const replyText = document.getElementById('reply-text');
-  const replySend = document.getElementById('reply-send');
-  const replyHint = document.getElementById('reply-hint');
-  const replyStatus = document.getElementById('reply-status');
-
-  let currentSlug = null;
-  let lastSessionId = null;
-
-  function escapeHtml(s) {
-    return String(s == null ? '' : s)
-      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-  }
-  // Per-agent badge helpers shared with TASK_HTML / HISTORY_HTML — single
-  // source of truth in AGENT_BADGE_JS at the top of this module.
-${AGENT_BADGE_JS}
-  function timeAgo(ts) {
-    if (!ts) return '';
-    const s = Math.max(0, Math.floor((Date.now() - ts) / 1000));
-    if (s < 60) return s + 's ago';
-    if (s < 3600) return Math.floor(s / 60) + 'm ago';
-    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
-    return Math.floor(s / 86400) + 'd ago';
-  }
-  function fmtTime(ts) {
-    if (!ts) return '';
-    const d = new Date(ts);
-    return d.toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
-  }
-  function fmtDuration(ms) {
-    if (ms == null) return '';
-    if (ms < 1000) return ms + 'ms';
-    if (ms < 60000) return (ms / 1000).toFixed(1) + 's';
-    if (ms < 3600000) return Math.floor(ms / 60000) + 'm ' + Math.floor((ms % 60000) / 1000) + 's';
-    if (ms < 86400000) return Math.floor(ms / 3600000) + 'h ' + Math.floor((ms % 3600000) / 60000) + 'm';
-    // Days-scale: this is almost always a stale-running session that
-    // got reconciled days later. Show "Nd" — actual elapsed runtime is
-    // unknowable so don't pretend "108h 6m" carries meaning.
-    return Math.floor(ms / 86400000) + 'd';
-  }
-  function shortPath(p) {
-    if (!p) return '~';
-    const parts = p.split('/');
-    return parts.length <= 3 ? p : '…/' + parts.slice(-2).join('/');
-  }
-
-  function setReplyState(sessionId, agent) {
-    lastSessionId = sessionId;
-    if (sessionId) {
-      replyBar.style.display = 'block';
-      replyBar.classList.remove('disabled');
-      replyText.disabled = false;
-      replySend.disabled = false;
-      replyHint.textContent = 'Replying to last task (' + (agent || 'unknown') + ')';
-    } else {
-      replyBar.style.display = 'block';
-      replyBar.classList.add('disabled');
-      replyText.disabled = true;
-      replySend.disabled = true;
-      replyHint.textContent = 'No active session — spawn a task first';
-    }
-  }
-
-  async function sendReply() {
-    const text = (replyText.value || '').trim();
-    if (!text || !lastSessionId) return;
-    replySend.disabled = true;
-    replySend.textContent = '…';
-    replyStatus.style.display = 'none';
-    replyStatus.classList.remove('error');
-    try {
-      const r = await fetch('/api/task/' + encodeURIComponent(lastSessionId) + '/message', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ text }),
-      });
-      if (!r.ok) {
-        const data = await r.json().catch(() => ({}));
-        throw new Error(data.error || ('HTTP ' + r.status));
-      }
-      const data = await r.json();
-      replyText.value = '';
-      replyStatus.style.display = 'block';
-      replyStatus.textContent = 'Reply sent in ' + fmtDuration(data.durationMs) + ' — refreshing thread…';
-      if (currentSlug) loadThread(currentSlug);
-    } catch (err) {
-      replyStatus.style.display = 'block';
-      replyStatus.classList.add('error');
-      replyStatus.textContent = 'Send failed: ' + (err && err.message ? err.message : err);
-    } finally {
-      replySend.disabled = false;
-      replySend.textContent = 'Send';
-    }
-  }
-
-  replySend.addEventListener('click', sendReply);
-  replyText.addEventListener('keydown', (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); sendReply(); }
-  });
-
-  function renderThread(thread) {
-    if (!thread) {
-      container.innerHTML = '<div class="empty"><div class="pill">Project not found</div></div>';
-      setReplyState(null, null);
-      return;
-    }
-    const titleHtml = thread.title
-      ? '<h1>' + escapeHtml(thread.title) + '</h1>'
-      : '<h1 class="untitled">(untitled — Title agent will name this on first new spawn)</h1>';
-    const cwdHtml = thread.cwd ? '<div class="cwd">' + escapeHtml(thread.cwd) + '</div>' : '';
-    const lastActivity = thread.lastActivityAt ? fmtTime(thread.lastActivityAt) + ' · ' + timeAgo(thread.lastActivityAt) : '—';
-
-    let html = '<div class="meta-panel">' +
-      titleHtml +
-      cwdHtml +
-      '<div class="stats">' +
-        '<div class="stat"><span class="label">Tasks</span> <span class="val">' + thread.taskCount + '</span></div>' +
-        '<div class="stat"><span class="label">Last activity</span> <span class="val">' + escapeHtml(lastActivity) + '</span></div>' +
-        '<div class="stat"><span class="label">Slug</span> <span class="val">' + escapeHtml(thread.slug) + '</span></div>' +
-      '</div>' +
-    '</div>';
-
-    if (!thread.tasks || thread.tasks.length === 0) {
-      html += '<div class="empty"><div class="pill">No tasks yet</div><div class="hint">Spawn one from the <a href="/">Tasks</a> page.</div></div>';
-      container.innerHTML = html;
-      setReplyState(null, null);
-      return;
-    }
-
-    // v0.6 — render-cap to keep huge projects (685+ turns on the founder's
-    // dev repo) from blowing the page to ~80,000px tall. "Show all" toggle
-    // mirrors the dashboard 5-card cap pattern. Chronological order
-    // preserved (Slack-shape: oldest first, recent at bottom).
-    const RENDER_CAP = 25;
-    const totalTurns = thread.tasks.length;
-    const showAll = container.dataset.showAllTurns === 'true';
-    const renderedTurns = showAll ? thread.tasks : thread.tasks.slice(-RENDER_CAP);
-    const isCapped = !showAll && totalTurns > RENDER_CAP;
-
-    if (isCapped) {
-      html += '<div class="section-label" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">' +
-        '<span>Thread · showing <b>' + renderedTurns.length + '</b> most recent of ' + totalTurns + ' turns</span>' +
-        '<button type="button" class="show-all-turns" style="font-size:10.5px;padding:3px 8px;border-radius:4px;border:1px solid var(--border-soft);background:transparent;color:var(--fg-70);cursor:pointer;font-family:inherit">Show all ' + totalTurns + '</button>' +
-      '</div>';
-    } else {
-      html += '<div class="section-label">Thread · ' + totalTurns + ' turn' + (totalTurns === 1 ? '' : 's') + '</div>';
-    }
-
-    for (const t of renderedTurns) {
-      const status = (t.status || '').toLowerCase();
-      // v0.6 — cap per-task steps at last 5 (mirrors dashboard renderSteps
-      // tail-3 pattern). A long task with 100+ steps × 25 turns rendered
-      // = 2500 step DOM nodes. Show last 5 + "+N more" pill.
-      let stepsHtml = '';
-      if (t.steps && t.steps.length) {
-        const STEP_TAIL = 5;
-        const stepTail = t.steps.slice(-STEP_TAIL);
-        const stepHidden = t.steps.length - stepTail.length;
-        stepsHtml = '<div class="steps">' +
-          stepTail.map(s => '<div class="step ' + escapeHtml((s.state||'').toLowerCase()) + '">' + escapeHtml(s.label || '') + '</div>').join('') +
-          (stepHidden > 0 ? '<div class="step muted">+' + stepHidden + ' earlier step' + (stepHidden === 1 ? '' : 's') + '</div>' : '') +
-        '</div>';
-      }
-      const durHtml = (t.durationMs != null)
-        ? '<div class="duration">Duration: <b>' + fmtDuration(t.durationMs) + '</b></div>'
-        : (status === 'running' ? '<div class="duration">Running…</div>' : '');
-
-      html += '<div class="task">' +
-        '<div class="row1">' +
-          agentBadgeHTML(t.agent || 'unknown') +
-          ' <span class="agent-name">' + escapeHtml(agentLabel(t.agent || 'unknown')) + '</span>' +
-          '<span class="status ' + escapeHtml(status) + '">' + escapeHtml(status || 'unknown') + '</span>' +
-          '<span class="ts">' + escapeHtml(fmtTime(t.startedAt)) + ' · ' + escapeHtml(timeAgo(t.startedAt)) + '</span>' +
-        '</div>' +
-        '<div class="prompt">' + escapeHtml(t.prompt || '(no prompt)') + '</div>' +
-        durHtml +
-        stepsHtml +
-      '</div>';
-    }
-    container.innerHTML = html;
-    // Wire the "Show all N turns" toggle (rendered only when capped). Sets
-    // the dataset flag and re-runs renderThread with the same data so the
-    // cap branch falls through.
-    const showAllBtn = container.querySelector('.show-all-turns');
-    if (showAllBtn) {
-      showAllBtn.addEventListener('click', () => {
-        container.dataset.showAllTurns = 'true';
-        renderThread(thread);
-      });
-    }
-    const lastTask = thread.tasks[thread.tasks.length - 1];
-    setReplyState(lastTask.sessionId, lastTask.agent);
-  }
-
-  function renderProjects(list) {
-    projectsCount.textContent = String(list.length);
-    if (list.length === 0) {
-      projectsList.innerHTML = '<div class="pane-empty">No projects yet</div>';
-      return;
-    }
-    projectsList.innerHTML = list.map(p => {
-      const active = p.slug === currentSlug ? ' active' : '';
-      const name = escapeHtml(p.title || '(untitled)');
-      const cwdHint = escapeHtml(shortPath(p.cwd));
-      // Pencil affordance — visible on hover via CSS .channel:hover .channel-rename.
-      // Triggers prompt() for v1 simplicity; inline input UX is a future iteration.
-      return '<div class="channel' + active + '" data-slug="' + escapeHtml(p.slug) + '">' +
-        '<span class="channel-glyph">#</span>' +
-        '<div style="flex:1;min-width:0">' +
-          '<div class="channel-name">' + name + '</div>' +
-          '<div class="channel-cwd-hint">' + cwdHint + '</div>' +
-        '</div>' +
-        '<button class="channel-rename" data-slug="' + escapeHtml(p.slug) + '" title="Rename project" aria-label="Rename project"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></button>' +
-      '</div>';
-    }).join('');
-    projectsList.querySelectorAll('.channel').forEach(el => {
-      el.addEventListener('click', (ev) => {
-        // Skip channel-switch when the click was the rename button — that has its own handler.
-        if (ev.target && (ev.target).classList && (ev.target).classList.contains('channel-rename')) return;
-        const slug = el.getAttribute('data-slug');
-        if (!slug || slug === currentSlug) return;
-        currentSlug = slug;
-        renderProjects(list); // re-highlight active
-        loadThread(slug);
-        const url = new URL(window.location.href);
-        url.searchParams.set('project', slug);
-        history.replaceState(null, '', url.toString());
-      });
-    });
-    projectsList.querySelectorAll('.channel-rename').forEach(btn => {
-      btn.addEventListener('click', (ev) => {
-        ev.stopPropagation(); // don't trigger channel-switch
-        const slug = btn.getAttribute('data-slug');
-        if (!slug) return;
-        const channel = btn.closest('.channel');
-        const project = list.find(p => p.slug === slug);
-        const current = (project && project.title) || '';
-        startInlineRename(channel, slug, current, () => {
-          loadProjects();
-          // Renamed project may be the visible one — refresh the main pane
-          // header immediately instead of waiting for the 5s poll. Without
-          // this, the sidebar updates but the open thread keeps the old title.
-          if (slug === currentSlug) loadThread(slug);
-        });
-      });
-    });
-  }
-  // Inline edit-in-place — replaces prior window.prompt() dialog. Click pencil →
-  // .channel-name turns into an input pre-filled with the title; Enter saves,
-  // Esc cancels, blur saves. Validation errors flash the border red instead
-  // of a window.alert. Per Open-Agents production-grade UX reference.
-  function startInlineRename(channelEl, slug, currentTitle, onSaveSuccess) {
-    if (!channelEl) return;
-    const nameEl = channelEl.querySelector('.channel-name');
-    if (!nameEl || nameEl.dataset.editing === '1') return;
-    nameEl.dataset.editing = '1';
-    const originalText = nameEl.textContent;
-    const input = document.createElement('input');
-    input.type = 'text';
-    input.value = currentTitle;
-    input.maxLength = 100;
-    input.className = 'channel-rename-input';
-    nameEl.textContent = '';
-    nameEl.appendChild(input);
-    setTimeout(() => { input.focus(); input.select(); }, 0);
-    let cleanedUp = false;
-    function cleanup(restoreText) {
-      if (cleanedUp) return;
-      cleanedUp = true;
-      try { nameEl.removeChild(input); } catch (_) { /* already removed */ }
-      nameEl.textContent = restoreText;
-      delete nameEl.dataset.editing;
-    }
-    function commit() {
-      if (cleanedUp) return;
-      const trimmed = input.value.trim();
-      if (!trimmed || trimmed === currentTitle) { cleanup(originalText); return; }
-      fetch('/api/projects/' + encodeURIComponent(slug) + '/rename', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title: trimmed }),
-      })
-        .then(r => r.ok ? r.json() : r.json().then(e => Promise.reject(e.error || 'rename_failed')))
-        .then(() => { cleanup(trimmed); onSaveSuccess(); })
-        .catch(() => {
-          input.classList.remove('error');
-          void input.offsetWidth;
-          input.classList.add('error');
-        });
-    }
-    input.addEventListener('keydown', (ev) => {
-      if (ev.key === 'Enter') { ev.preventDefault(); commit(); }
-      else if (ev.key === 'Escape') { ev.preventDefault(); cleanup(originalText); }
-    });
-    input.addEventListener('blur', () => { if (!cleanedUp) commit(); });
-  }
-
-  function presenceClass(state) {
-    if (state === 'ready') return 'ready';
-    if (state === 'needs_install' || state === 'needs_auth' || state === 'billed_key_required') return 'warn';
-    return 'offline';
-  }
-
-  function renderAgents(adapters) {
-    agentsCount.textContent = String(adapters.length);
-    agentsList.innerHTML = adapters.map(a => {
-      const cls = presenceClass(a.state);
-      return '<div class="member">' +
-        '<span class="member-presence ' + cls + '">●</span>' +
-        '<span class="member-label">' + escapeHtml(a.label || a.id) + '</span>' +
-      '</div>';
-    }).join('');
-  }
-
-  function loadThread(slug) {
-    if (!slug) { container.innerHTML = '<div class="empty"><div class="pill">No project selected</div></div>'; setReplyState(null, null); return; }
-    // Reset the show-all-turns flag on every project switch so a user
-    // moving from a 686-turn project to a 5-turn one doesn't carry the
-    // toggled state across.
-    delete container.dataset.showAllTurns;
-    fetch('/api/projects/' + encodeURIComponent(slug))
-      .then(r => r.ok ? r.json() : Promise.reject(r.status))
-      .then(data => renderThread(data.thread))
-      .catch(err => { container.innerHTML = '<div class="empty"><div class="pill">Load error: ' + escapeHtml(String(err)) + '</div></div>'; });
-  }
-
-  function loadProjects() {
-    fetch('/api/projects')
-      .then(r => r.ok ? r.json() : Promise.reject(r.status))
-      .then(data => {
-        const list = data.projects || [];
-        renderProjects(list);
-        if (list.length > 0 && !currentSlug) {
-          const urlSlug = new URLSearchParams(window.location.search).get('project');
-          const slugToUse = (urlSlug && list.some(p => p.slug === urlSlug)) ? urlSlug : list[0].slug;
-          currentSlug = slugToUse;
-          renderProjects(list);
-          loadThread(slugToUse);
-        } else if (list.length === 0) {
-          container.innerHTML = '<div class="empty"><div class="pill">No projects yet</div><div class="hint">Spawn a task from the <a href="/">Tasks</a> page — it will appear here as a project thread.</div></div>';
-          setReplyState(null, null);
-        }
-      })
-      .catch(() => {});
-  }
-
-  function loadAgents() {
-    fetch('/api/readiness/agents')
-      .then(r => r.ok ? r.json() : Promise.reject(r.status))
-      .then(data => renderAgents(data.agents || []))
-      .catch(() => {});
-  }
-
-  loadProjects();
-  loadAgents();
-  setInterval(() => {
-    if (currentSlug) loadThread(currentSlug);
-    if (Math.random() < 0.25) { loadProjects(); loadAgents(); }
-  }, 5000);
-})();
-</script>
-</body>
-</html>`;
-//# sourceMappingURL=ui-page.js.map