codehere 0.2.2 → 0.3.0-rc.2

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

@@ -0,0 +1,1827 @@
+/**
+ * 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, .card-lights).
+ */
+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;
+    --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 */
+  @keyframes shimmer {
+    0% { background-position: -200% center; }
+    100% { background-position: 200% center; }
+  }
+  @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); }
+  }
+  @keyframes beam-pulse {
+    0%, 100% { opacity: 0.35; transform: translateX(-50%) scale(1); }
+    50% { opacity: 0.55; transform: translateX(-50%) scale(1.04); }
+  }
+
+  /* Text gradient (landing's hero motif) */
+  .gradient-text-shimmer {
+    background: linear-gradient(
+      90deg,
+      #ff9a76 0%, #f5c6b0 20%, #ff9a76 35%,
+      #4a90e2 50%, #8ab8ee 65%, #4a90e2 80%, #ff9a76 100%
+    );
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shimmer 6s linear infinite;
+  }
+
+  /* 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-card traffic lights — mini terminal frame */
+  .card-lights {
+    display: inline-flex;
+    gap: 5px;
+    margin-right: 10px;
+    vertical-align: middle;
+  }
+  .card-lights span {
+    width: 9px; height: 9px; border-radius: 50%;
+    display: inline-block;
+  }
+  .card-lights .r { background: var(--block); }
+  .card-lights .y { background: var(--warn); }
+  .card-lights .g { background: var(--allow); }
+
+  /* Ambient hero beam (subtle) */
+  .hero-beam {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 0;
+  }
+  .hero-beam::before {
+    content: '';
+    position: absolute;
+    top: -20%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 75%;
+    height: 55%;
+    background: radial-gradient(ellipse at center,
+      rgba(255,154,118,0.08) 0%,
+      rgba(74,144,226,0.04) 40%,
+      transparent 70%);
+    filter: blur(50px);
+    animation: beam-pulse 12s ease-in-out infinite;
+  }
+
+  /* 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; }
+  .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;
+  }
+  .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 .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); }
+  .final-report .fr-file .trust {
+    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;
+  }
+  .final-report .fr-file .trust.good { color: var(--allow); background: rgba(40,200,64,0.08); border-color: rgba(40,200,64,0.22); }
+  .final-report .fr-file .trust.warn { color: var(--warn); background: rgba(254,188,46,0.08); border-color: rgba(254,188,46,0.25); }
+  .final-report .fr-file .trust.bad  { color: var(--block); background: rgba(255,95,87,0.08); border-color: rgba(255,95,87,0.25); }
+  .final-report .fr-file .trust.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); }
+`;
+// ── /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 (marketing-hero motif: traffic-light dots) ─────────────── */
+  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 .lights { display: inline-flex; gap: 6px; }
+  header .lights span {
+    width: 11px; height: 11px; border-radius: 50%;
+    background: var(--bg-2);
+    border: 1px solid var(--border);
+  }
+  header .lights .r { background: var(--block); border-color: transparent; }
+  header .lights .y { background: var(--warn); border-color: transparent; }
+  header .lights .g { background: var(--allow); border-color: transparent; }
+  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(--allow); box-shadow: 0 0 8px rgba(40,200,64,0.6); }
+  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; }
+  #feed { list-style: none; margin: 0; padding: 0; }
+  #feed li {
+    padding: 11px 24px;
+    border-bottom: 1px solid var(--border-soft);
+    display: grid;
+    grid-template-columns: 88px 64px 80px 1fr 70px;
+    gap: 14px;
+    align-items: baseline;
+    transition: background 120ms ease;
+  }
+  #feed li:hover { background: rgba(255,255,255,0.02); }
+  #feed li .ts { color: var(--fg-40); font-family: var(--mono); font-size: 11px; }
+  #feed li .outcome {
+    font-family: var(--mono); font-size: 11px; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.06em;
+    padding: 2px 8px; border-radius: 999px;
+    text-align: center;
+    border: 1px solid transparent;
+  }
+  #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 .tool {
+    color: var(--accent);
+    font-family: var(--mono); font-size: 12px;
+  }
+  #feed li .summary {
+    color: var(--fg-70);
+    font-family: var(--mono); font-size: 12px;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  #feed li .score {
+    text-align: right;
+    font-family: var(--mono); font-size: 11px;
+    color: var(--warn);
+  }
+  #feed li .score.zero { color: var(--fg-30); }
+
+  /* ── 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="/history" class="nav-link active">History</a>
+  <span style="color:var(--fg-40);font-family:var(--mono);font-size:11px;">
+    <span id="live-dot" class="dot"></span><span id="conn">connecting</span>
+  </span>
+</nav>
+
+<div class="tagline" style="margin-top:90px">One feed. Every agent. Every action.</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>
+  <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>
+(function () {
+  const feed = document.getElementById('feed');
+  const empty = document.getElementById('empty');
+  const countEl = document.getElementById('count');
+  const connEl = document.getElementById('conn');
+  const dot = document.getElementById('live-dot');
+  let count = 0;
+
+  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 String(entry.toolName || 'tool call');
+
+    try {
+      const input = typeof raw === 'string' ? JSON.parse(raw) : raw;
+      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, ' ');
+
+    return String(entry.toolName || 'tool call');
+  }
+
+  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);
+    const outcome = blocked ? 'block' : 'allow';
+    const tool = String(entry.toolName || entry.tool_name || '—');
+    const score = entry.riskScore ?? entry.risk_score ?? 0;
+    const summary = summarize(entry);
+
+    const li = document.createElement('li');
+    li.innerHTML =
+      '<span class="ts">' + escape(ts) + '</span>' +
+      '<span class="outcome ' + outcome + '">' + outcome + '</span>' +
+      '<span class="tool">' + escape(tool) + '</span>' +
+      '<span class="summary" title="' + escape(summary) + '">' + escape(summary) + '</span>' +
+      '<span class="score ' + (score ? '' : 'zero') + '">' + (score ? score : '—') + '</span>';
+    feed.insertBefore(li, feed.firstChild);
+    count += 1;
+    countEl.textContent = String(count);
+    empty.style.display = 'none';
+  }
+
+  // ── 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);
+      render(entry);
+      recomputeStats();
+    } catch { /* skip malformed */ }
+  };
+
+  // Keep "Xs/Xm ago" fresh even when no new events arrive
+  setInterval(() => { if (events.length) recomputeStats(); }, 1000);
+})();
+</script>
+</body>
+</html>`;
+// ── / — task intake + active session view (v0.3 F1) ───────────────────────────
+export const TASK_HTML = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>codehere</title>
+<style>
+${SHARED_STYLES}
+  * { box-sizing: border-box; }
+  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 {
+    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 .lights { display: inline-flex; gap: 6px; }
+  header .lights span { width: 11px; height: 11px; border-radius: 50%; border: 1px solid transparent; }
+  header .lights .r { background: var(--block); }
+  header .lights .y { background: var(--warn); }
+  header .lights .g { background: var(--allow); }
+  header .title { font-family: var(--mono); font-size: 13px; font-weight: 600; }
+  header .title .muted { color: var(--fg-40); font-weight: 400; margin-left: 6px; }
+  header nav { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; }
+  header nav a { color: var(--fg-50); text-decoration: none; padding: 4px 8px; border-radius: 4px; }
+  header nav a:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
+  header nav a.active { color: var(--fg); background: rgba(255,255,255,0.06); }
+
+  .shell { max-width: 960px; margin: 0 auto; padding: 90px 24px 24px; position: relative; }
+
+  /* ── Readiness banner (F1a) ─────────────────────────────────────────── */
+  .readiness {
+    margin: 12px 0 0;
+    padding: 14px 16px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: var(--bg-1);
+    display: none;
+  }
+  .readiness[data-severity="warn"] {
+    border-color: rgba(254,188,46,0.35);
+    background: rgba(254,188,46,0.05);
+  }
+  .readiness[data-severity="blocker"] {
+    border-color: rgba(255,95,87,0.4);
+    background: rgba(255,95,87,0.06);
+  }
+  .readiness .r-title {
+    font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--fg);
+    margin-bottom: 4px;
+  }
+  .readiness[data-severity="warn"] .r-title { color: var(--warn); }
+  .readiness[data-severity="blocker"] .r-title { color: var(--block); }
+  .readiness .r-detail { font-family: var(--mono); font-size: 11px; color: var(--fg-70); line-height: 1.5; }
+  .readiness .r-action { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  .readiness .r-action code { background: rgba(255,255,255,0.06); padding: 3px 8px; border-radius: 4px; font-family: var(--mono); font-size: 11px; }
+  .readiness .r-action a { color: var(--accent); font-family: var(--mono); font-size: 11px; text-decoration: none; }
+  .readiness .r-action a:hover { text-decoration: underline; }
+  .readiness .r-action button {
+    background: transparent; color: var(--fg-70); font-family: var(--mono); font-size: 11px;
+    border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer;
+  }
+  .readiness .r-action button:hover { color: var(--fg); border-color: var(--fg-30); }
+
+  .intake { padding: 36px 0 24px; position: relative; z-index: 1; }
+  .intake h1 {
+    margin: 0 0 6px;
+    font-size: clamp(28px, 4vw, 44px);
+    font-weight: 900;
+    letter-spacing: -0.02em;
+    line-height: 1.08;
+  }
+  .intake p.sub { margin: 0 0 22px; color: var(--fg-50); font-size: 14px; max-width: 560px; }
+  .intake textarea {
+    width: 100%; min-height: 84px;
+    background: var(--bg-1); color: var(--fg);
+    border: 1px solid var(--border); border-radius: 10px;
+    padding: 14px 16px;
+    font-family: var(--mono); font-size: 13px; line-height: 1.55;
+    resize: vertical; outline: none;
+  }
+  .intake textarea:focus { border-color: rgba(255,154,118,0.4); }
+  .intake-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
+  .intake select, .intake button, .intake input.cwd {
+    font-family: var(--mono); font-size: 12px;
+    background: var(--bg-1); color: var(--fg);
+    border: 1px solid var(--border); border-radius: 8px;
+    padding: 8px 14px;
+    cursor: pointer;
+  }
+  .intake input.cwd {
+    cursor: text;
+    flex: 1 1 260px;
+    min-width: 200px;
+  }
+  .intake input.cwd:focus { outline: none; border-color: rgba(255,154,118,0.4); }
+  .intake input.cwd::placeholder { color: var(--fg-30); }
+  .intake button.spawn {
+    background: var(--accent); color: #000; font-weight: 600; border-color: var(--accent);
+  }
+  .intake button.spawn:hover { filter: brightness(1.05); }
+  .intake button.spawn[disabled] { opacity: 0.45; cursor: default; }
+  .intake .hint { margin-left: auto; color: var(--fg-40); font-family: var(--mono); font-size: 11px; }
+
+  /* ── Setup panel (onboarding — appears when a non-ready agent is picked) ───
+     Principle: codehere is the control plane from install → orchestrate → audit.
+     When the user picks an agent that isn't ready, we surface what to do
+     inline rather than fail at spawn time. */
+  .setup-panel {
+    margin: 10px 0 0;
+    padding: 12px 14px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: rgba(254,188,46,0.04);
+    font-family: var(--mono); font-size: 11px;
+    color: var(--fg-70);
+    display: none;
+  }
+  .setup-panel[data-state="needs_install"] { border-color: rgba(74,144,226,0.3); background: rgba(74,144,226,0.05); }
+  .setup-panel[data-state="needs_auth"]    { border-color: rgba(254,188,46,0.4);  background: rgba(254,188,46,0.06); }
+  .setup-panel[data-state="billed_key_required"] { border-color: rgba(255,95,87,0.35); background: rgba(255,95,87,0.05); }
+  .setup-panel .sp-title {
+    font-weight: 600; color: var(--fg); margin-bottom: 6px;
+  }
+  .setup-panel[data-state="needs_install"]         .sp-title { color: var(--accent-blue); }
+  .setup-panel[data-state="needs_auth"]            .sp-title { color: var(--warn); }
+  .setup-panel[data-state="billed_key_required"]   .sp-title { color: var(--block); }
+  .setup-panel code {
+    background: rgba(255,255,255,0.08); padding: 3px 8px; border-radius: 4px;
+    color: var(--fg); font-size: 11px;
+  }
+  .setup-panel a { color: var(--accent); text-decoration: none; }
+  .setup-panel a:hover { text-decoration: underline; }
+  .setup-panel .swap { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+  .setup-panel .swap .swap-label { color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
+  .setup-panel .swap button {
+    font-family: var(--mono); font-size: 11px;
+    color: var(--accent); background: transparent;
+    border: 1px solid rgba(255,154,118,0.35); border-radius: 999px;
+    padding: 3px 10px; cursor: pointer;
+  }
+  .setup-panel .swap button:hover { color: var(--fg); background: rgba(255,154,118,0.1); border-color: var(--accent); }
+
+  /* F2 · Install button + streamed output (principle #10: codehere DOES the install) */
+  .setup-panel .install-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+  .setup-panel .install-row button.install {
+    background: var(--accent); color: #000; font-weight: 600;
+    border: 1px solid var(--accent); border-radius: 8px;
+    padding: 8px 16px; cursor: pointer;
+    font-family: var(--sans); font-size: 12px;
+  }
+  .setup-panel .install-row button.install:hover { filter: brightness(1.05); }
+  .setup-panel .install-row button.install[disabled] { opacity: 0.5; cursor: default; }
+  .setup-panel .install-row button.install.running { background: transparent; color: var(--accent); }
+  .setup-panel .install-row button.install.done { background: rgba(40,200,64,0.1); color: var(--allow); border-color: rgba(40,200,64,0.35); }
+  .setup-panel .install-row button.install.failed { background: rgba(255,95,87,0.08); color: var(--block); border-color: rgba(255,95,87,0.35); }
+  .setup-panel .install-row .install-subtitle { color: var(--fg-50); font-size: 11px; font-family: var(--mono); }
+  .setup-panel .install-output {
+    margin-top: 10px; padding: 10px 12px;
+    background: #000; border: 1px solid var(--border-soft); border-radius: 6px;
+    font-family: var(--mono); font-size: 11px; color: var(--fg-70);
+    max-height: 220px; overflow-y: auto;
+    white-space: pre-wrap; word-break: break-word;
+    display: none;
+  }
+  .setup-panel .install-output.show { display: block; }
+  .setup-panel .install-output.has-err { border-color: rgba(255,95,87,0.3); }
+  .setup-panel .install-details-toggle {
+    font-family: var(--mono); font-size: 10px; color: var(--fg-40);
+    background: transparent; border: none; cursor: pointer;
+    padding: 2px 6px;
+  }
+  .setup-panel .install-details-toggle:hover { color: var(--fg-70); }
+
+  /* Per-option glyph in the select dropdown — rendered via the option text itself
+     since <option> can't be styled with pseudo-elements cross-browser. */
+
+  /* ── Starter prompts (Gate A1 — first-run path to success) ──────────
+     Principle #1 (web is not a terminal — a welcoming surface) + scope-discipline #9.
+     Three one-click prompts that let a stranger see codehere work in the project
+     they opened the daemon in, without needing to know what to ask. */
+  .starter-prompts {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    margin: 10px 0 0;
+  }
+  .starter-prompts button {
+    font-family: var(--mono); font-size: 11px;
+    color: var(--fg-70);
+    border: 1px solid var(--border); border-radius: 999px;
+    background: rgba(255,255,255,0.02);
+    padding: 5px 12px; cursor: pointer;
+    transition: color .15s ease, border-color .15s ease, background .15s ease;
+  }
+  .starter-prompts button:hover {
+    color: var(--fg);
+    border-color: rgba(255,154,118,0.35);
+    background: rgba(255,154,118,0.06);
+  }
+  .starter-prompts .sp-label {
+    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
+    color: var(--fg-40); text-transform: uppercase;
+    padding: 5px 2px 5px 0;
+  }
+
+  .section-label {
+    margin-top: 24px; margin-bottom: 8px;
+    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
+    color: var(--fg-40); text-transform: uppercase;
+  }
+
+  .session {
+    border-radius: 12px;
+    margin-bottom: 12px;
+    overflow: hidden;
+    /* glass-card styling from shared tokens */
+    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;
+    animation: fade-up 0.5s cubic-bezier(0.16,1,0.3,1) both;
+  }
+  .session: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);
+  }
+  .session-head {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 12px 16px;
+    cursor: pointer;
+    user-select: none;
+  }
+  .session.expanded .session-head {
+    border-bottom: 1px solid var(--border-soft);
+  }
+  .session .chevron {
+    display: inline-block; margin-left: 8px; color: var(--fg-40);
+    font-family: var(--mono); font-size: 10px;
+    transition: transform 0.2s ease;
+  }
+  .session.expanded .chevron { transform: rotate(90deg); }
+  .session-body { display: none; }
+  .session.expanded .session-body { display: block; }
+  .session-head .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+  .session-head .prompt { font-family: var(--mono); font-size: 12px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 620px; }
+  .session-head .sub { font-family: var(--mono); font-size: 11px; color: var(--fg-40); }
+  .session-head .status-pill {
+    font-family: var(--mono); font-size: 10px; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.08em;
+    padding: 3px 10px; border-radius: 999px;
+    border: 1px solid transparent;
+  }
+  .status-pill.running { color: var(--allow); background: rgba(40,200,64,0.08); border-color: rgba(40,200,64,0.25); }
+  .status-pill.completed { color: var(--fg-50); background: rgba(255,255,255,0.04); border-color: var(--border); }
+  .status-pill.killed { color: var(--warn); background: rgba(254,188,46,0.08); border-color: rgba(254,188,46,0.25); }
+  .status-pill.error { color: var(--block); background: rgba(255,95,87,0.10); border-color: rgba(255,95,87,0.30); }
+  .status-pill.observed-pill { color: var(--fg-50); background: rgba(255,255,255,0.03); border-color: var(--border); font-weight: 400; }
+
+  .session.observed { opacity: 0.88; }
+  .session.observed .session-head { border-bottom: none; }
+
+  .session-controls { display: flex; gap: 8px; }
+  .session-controls button {
+    font-family: var(--mono); font-size: 11px;
+    background: transparent; color: var(--fg-70);
+    border: 1px solid var(--border); border-radius: 6px;
+    padding: 4px 10px; cursor: pointer;
+  }
+  .session-controls button:hover { color: var(--fg); border-color: var(--fg-30); }
+  .session-controls button.kill:hover { color: var(--block); border-color: rgba(255,95,87,0.4); }
+
+  .session-body { padding: 0 16px 14px; }
+  .event-log {
+    margin: 10px 0 0;
+    max-height: 360px; overflow-y: auto;
+    background: #000;
+    border: 1px solid var(--border-soft); border-radius: 8px;
+    padding: 10px 12px;
+    font-family: var(--mono); font-size: 11px; line-height: 1.6;
+  }
+  .event-log .event { color: var(--fg-70); white-space: pre-wrap; word-break: break-word; padding: 2px 0; }
+  .event-log .event .t { color: var(--fg-30); margin-right: 8px; }
+  .event-log .event .label { color: var(--fg-50); font-weight: 600; margin-right: 6px; }
+  .event-log .event.claude { color: var(--fg); }
+  .event-log .event.claude .label { color: var(--accent); }
+  .event-log .event.tool .label { color: var(--accent); }
+  .event-log .event.tool .tool-name { color: var(--accent); font-weight: 600; }
+  .event-log .event.result .label { color: var(--fg-50); }
+  .event-log .event.hook .label { color: var(--allow); }
+  .event-log .event.hook.blocked .label { color: var(--block); }
+  .event-log .event.done .label { color: var(--allow); }
+  .event-log .event.stderr { color: var(--warn); }
+  .event-log .event.stderr .label { color: var(--warn); }
+  .event-log .event.exit { color: var(--fg-50); font-style: italic; }
+  .event-log .event.error { color: var(--block); }
+  .event-log .event.error .label { color: var(--block); }
+
+  /* codehere:error events — structured recovery hints (F1b) */
+  .event-log .event.codehere-error {
+    margin: 6px -4px; padding: 10px 12px;
+    background: rgba(255,95,87,0.08); border: 1px solid rgba(255,95,87,0.3); border-radius: 6px;
+    color: var(--fg);
+  }
+  .event-log .event.codehere-error .label { color: var(--block); display: block; margin-bottom: 4px; }
+  .event-log .event.codehere-error .recovery { color: var(--fg-70); margin-top: 4px; display: block; }
+
+  #empty { padding: 48px 0; 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); }
+</style>
+</head>
+<body>
+<nav class="floating-nav">
+  <a href="/" class="logo">codehere</a>
+  <a href="/" class="nav-link active">Tasks</a>
+  <a href="/history" class="nav-link">History</a>
+</nav>
+
+<div class="shell">
+
+<div class="hero-beam"></div>
+
+<div class="readiness" id="readiness" style="position:relative;z-index:1"></div>
+
+<div class="audit-summary empty" id="audit-summary" style="position:relative;z-index:1">
+  <span class="eyebrow">TODAY</span>
+  <span class="sep">·</span>
+  <span><b id="as-actions">0</b> actions</span>
+  <span class="sep">·</span>
+  <span class="blocked"><b id="as-blocked">0</b> blocked</span>
+  <span class="sep">·</span>
+  <span>avg trust <b id="as-trust">—</b></span>
+  <span class="sep">·</span>
+  <span><b id="as-agents">0</b> agents</span>
+</div>
+
+<div class="status-banner" id="status-banner" style="position:relative;z-index:1;display:none">
+  <div class="stat"><span class="label">Running</span><span class="value live" id="sb-running">0</span></div>
+  <span class="sep">·</span>
+  <div class="stat"><span class="label">On machine</span><span class="value" id="sb-detected">0</span></div>
+  <span class="sep">·</span>
+  <div class="stat blocked"><span class="label">Blocked</span><span class="value" id="sb-blocked">0</span></div>
+  <div class="edge"><span class="label">Last edit</span> <span class="value" id="sb-last">—</span></div>
+</div>
+
+<div class="intake">
+  <h1>What do you need <span class="gradient-text-shimmer">built or fixed</span>?</h1>
+  <p class="sub">Describe a task. codehere delegates to Claude Code, wraps every action with the safety hook, streams it back here.</p>
+  <textarea id="prompt" placeholder="e.g. add a --verbose flag to the trust command and document it in the README"></textarea>
+  <div class="starter-prompts" id="starter-prompts">
+    <span class="sp-label">TRY</span>
+    <button type="button" data-prompt="Read the README and summarize what this project is in 3 short bullets.">Summarize the project</button>
+    <button type="button" data-prompt="List the top-level files and give me a one-line note on what each is for.">Map the architecture</button>
+    <button type="button" data-prompt="Run the tests and tell me what (if anything) is failing.">Run the tests</button>
+  </div>
+  <div class="intake-row">
+    <select id="agent"><option value="claude-code">Claude Code</option></select>
+    <input type="text" id="cwd" class="cwd" placeholder="working directory" spellcheck="false" />
+    <button class="spawn" id="spawn">Assign task</button>
+  </div>
+  <div class="setup-panel" id="setup-panel" data-state=""></div>
+  <div class="intake-row" style="margin-top:6px">
+    <span class="hint" style="margin-left:auto">⌘ + Enter to assign</span>
+  </div>
+</div>
+
+<div class="glow-line" style="position:relative;z-index:1"></div>
+
+<div class="section-label" style="position:relative;z-index:1">Sessions</div>
+<div id="sessions" style="position:relative;z-index:1"></div>
+<div id="empty">
+  <div class="pill">No sessions yet — assign a task above</div>
+</div>
+
+</div>
+
+<script>
+(function () {
+  const promptEl = document.getElementById('prompt');
+  const spawnBtn = document.getElementById('spawn');
+  const agentSelect = document.getElementById('agent');
+  const cwdInput = document.getElementById('cwd');
+  const sessionsEl = document.getElementById('sessions');
+  const emptyEl = document.getElementById('empty');
+  const sessions = new Map(); // sessionId → { card, logEl, unsubscribeSse }
+
+  // E3 · Populate agent dropdown from per-agent readiness.
+  // Setup-aware: shows every registered agent with a state glyph (not just
+  // installed ones). Selecting a non-ready agent unfolds the setup panel with
+  // install/auth hints + swap suggestions.
+  let agentReadiness = []; // cached copy of the readiness response
+  const setupPanel = document.getElementById('setup-panel');
+
+  const STATE_GLYPH = {
+    ready: '✓',
+    billed_key_required: '⚠',
+    needs_auth: '⚠',
+    needs_install: '⤓',
+  };
+
+  function renderAgentOptions(agents) {
+    agentReadiness = agents || [];
+    if (agentReadiness.length === 0) return;
+    // Sort: ready first, then needs_auth/billed, then needs_install
+    const weight = { ready: 0, billed_key_required: 1, needs_auth: 2, needs_install: 3 };
+    const sorted = [...agentReadiness].sort((a, b) => (weight[a.state] ?? 99) - (weight[b.state] ?? 99));
+    agentSelect.innerHTML = sorted.map(a =>
+      '<option value="' + escape(a.id) + '">' +
+      (STATE_GLYPH[a.state] || '·') + ' ' + escape(a.label) +
+      '</option>'
+    ).join('');
+    // Trigger the panel render for whatever is selected first
+    updateSetupPanel();
+  }
+
+  function updateSetupPanel() {
+    const id = agentSelect.value;
+    const agent = agentReadiness.find(a => a.id === id);
+    if (!agent || agent.state === 'ready') {
+      setupPanel.style.display = 'none';
+      setupPanel.removeAttribute('data-state');
+      return;
+    }
+    setupPanel.dataset.state = agent.state;
+    setupPanel.style.display = 'block';
+
+    let title = '', body = '';
+    let installBtnHtml = '';
+    if (agent.state === 'needs_install') {
+      // Principle #10: codehere does the install, it doesn't print shell commands.
+      // Show a button. Hide the raw command behind a "Details" toggle for users
+      // who want to know what's being run.
+      title = escape(agent.label) + ' isn\\'t installed yet';
+      body = '<div>Click install and codehere will set it up for you — nothing to type.</div>';
+      const hint = agent.installHint || {};
+      if (hint.command) {
+        installBtnHtml =
+          '<div class="install-row">' +
+            '<button type="button" class="install" data-agent="' + escape(agent.id) + '">Install ' + escape(agent.label) + '</button>' +
+            '<button type="button" class="install-details-toggle" data-toggle="details">Details</button>' +
+          '</div>' +
+          '<div class="install-output" data-role="details" style="display:none">' +
+            '<div style="color:var(--fg-50);margin-bottom:6px">We\\'ll run: <span style="color:var(--fg)">' + escape(hint.command) + '</span></div>' +
+          '</div>';
+      } else {
+        body += '<div style="margin-top:6px;color:var(--fg-50)">This agent doesn\\'t ship with an automatic installer yet. You can still swap to a ready agent below.</div>';
+      }
+    } else if (agent.state === 'needs_auth') {
+      title = escape(agent.label) + ' needs to be connected to an account';
+      const hint = agent.authHint || {};
+      body = (hint.detail ? '<div>' + escape(hint.detail) + '</div>' : '');
+      if (hint.url) {
+        body += '<div style="margin-top:6px"><a href="' + escape(hint.url) + '" target="_blank" rel="noreferrer">Open the sign-in page →</a></div>';
+      }
+    } else if (agent.state === 'billed_key_required') {
+      title = escape(agent.label) + ' needs a paid API key';
+      body = '<div>This agent doesn\\'t work with a Claude Code subscription — it needs a separate paid key from Anthropic or OpenAI. Using one of the ready agents below is usually the faster path.</div>';
+    }
+
+    const readyAgents = agentReadiness.filter(a => a.state === 'ready');
+    const swapHtml = readyAgents.length > 0
+      ? '<div class="swap">' +
+        '<span class="swap-label">Use instead:</span>' +
+        readyAgents.map(a => '<button type="button" data-swap="' + escape(a.id) + '">' + escape(a.label) + '</button>').join('') +
+        '</div>'
+      : '';
+
+    setupPanel.innerHTML =
+      '<div class="sp-title">' + title + '</div>' +
+      body + installBtnHtml + swapHtml;
+  }
+
+  // F2 · Install button handler — streams output in place, flips readiness on done.
+  function runInstall(agentId, btnEl, outputEl) {
+    btnEl.classList.add('running');
+    btnEl.disabled = true;
+    btnEl.textContent = 'Installing…';
+    outputEl.classList.add('show');
+    outputEl.textContent = '';
+    let hadErr = false;
+
+    const res = fetch('/api/agents/' + encodeURIComponent(agentId) + '/install', { method: 'POST' });
+    // The server responds with SSE. We read the body as a stream.
+    res.then(r => {
+      if (!r.ok) throw new Error('install request failed: ' + r.status);
+      const reader = r.body.getReader();
+      const decoder = new TextDecoder();
+      let buf = '';
+      const pump = () => reader.read().then(({ value, done }) => {
+        if (done) return;
+        buf += decoder.decode(value, { stream: true });
+        let idx;
+        while ((idx = buf.indexOf('\\n\\n')) >= 0) {
+          const chunk = buf.slice(0, idx).trim();
+          buf = buf.slice(idx + 2);
+          if (!chunk.startsWith('data:')) continue;
+          const json = chunk.slice(5).trim();
+          if (!json) continue;
+          try {
+            const evt = JSON.parse(json);
+            if (evt.type === 'out' || evt.type === 'err') {
+              if (evt.type === 'err') hadErr = true;
+              outputEl.textContent += evt.data || '';
+              outputEl.scrollTop = outputEl.scrollHeight;
+            } else if (evt.type === 'done') {
+              btnEl.classList.remove('running');
+              if (evt.code === 0) {
+                btnEl.classList.add('done');
+                btnEl.textContent = '✓ Installed';
+                // Re-fetch readiness so the dropdown glyph updates
+                fetch('/api/readiness/agents').then(r => r.json()).then(d => {
+                  renderAgentOptions(d.agents || []);
+                  // Select the now-installed agent so user can run the task immediately
+                  if ([...agentSelect.options].some(o => o.value === agentId)) {
+                    agentSelect.value = agentId;
+                    updateSetupPanel();
+                  }
+                });
+              } else {
+                btnEl.classList.add('failed');
+                btnEl.textContent = '✗ Install failed';
+                if (hadErr) outputEl.classList.add('has-err');
+              }
+            } else if (evt.type === 'error') {
+              btnEl.classList.remove('running');
+              btnEl.classList.add('failed');
+              btnEl.textContent = '✗ Couldn\\'t run';
+              outputEl.textContent += '\\n' + (evt.data || '');
+              outputEl.classList.add('has-err');
+            }
+          } catch { /* skip malformed */ }
+        }
+        return pump();
+      });
+      return pump();
+    }).catch(err => {
+      btnEl.classList.remove('running');
+      btnEl.classList.add('failed');
+      btnEl.textContent = '✗ Couldn\\'t start';
+      outputEl.textContent = String(err && err.message || err);
+      outputEl.classList.add('has-err');
+    });
+  }
+
+  setupPanel.addEventListener('click', (ev) => {
+    const t = ev.target;
+    if (!t) return;
+    const swapBtn = t.closest('button[data-swap]');
+    if (swapBtn) {
+      const id = swapBtn.getAttribute('data-swap');
+      if (!id) return;
+      agentSelect.value = id;
+      updateSetupPanel();
+      return;
+    }
+    const installBtn = t.closest('button.install[data-agent]');
+    if (installBtn && !installBtn.disabled) {
+      const id = installBtn.getAttribute('data-agent');
+      const output = setupPanel.querySelector('.install-output[data-role="details"]');
+      if (id && output) runInstall(id, installBtn, output);
+      return;
+    }
+    const toggle = t.closest('button[data-toggle="details"]');
+    if (toggle) {
+      const output = setupPanel.querySelector('.install-output[data-role="details"]');
+      if (output) output.classList.toggle('show');
+      return;
+    }
+  });
+  agentSelect.addEventListener('change', updateSetupPanel);
+
+  fetch('/api/readiness/agents').then(r => r.json()).then(d => renderAgentOptions(d.agents || [])).catch(() => { /* keep defaults */ });
+
+  // Working directory: persist user's pick, auto-fill with daemon cwd on first run.
+  // Gate A1: strangers shouldn't have to type a path just to hit "Assign"; the
+  // daemon already knows where it was launched and that's usually the right cwd.
+  const savedCwd = localStorage.getItem('codehere:cwd');
+  if (savedCwd) cwdInput.value = savedCwd;
+  fetch('/api/readiness').then(r => r.json()).then(r => {
+    const daemonCwd = r && r.detected && r.detected.daemonCwd;
+    if (daemonCwd) {
+      cwdInput.placeholder = daemonCwd;
+      if (!cwdInput.value.trim()) cwdInput.value = daemonCwd; // auto-fill when nothing saved
+    }
+  }).catch(() => { /* placeholder unchanged */ });
+  cwdInput.addEventListener('change', () => {
+    localStorage.setItem('codehere:cwd', cwdInput.value.trim());
+  });
+
+  // Gate A1: starter-prompt chips prefill the textarea + focus it so the user
+  // can edit or hit ⌘-Enter immediately. No scroll-jumping, no redirect.
+  document.getElementById('starter-prompts').addEventListener('click', (ev) => {
+    const btn = ev.target && ev.target.closest('button[data-prompt]');
+    if (!btn) return;
+    promptEl.value = btn.getAttribute('data-prompt') || '';
+    promptEl.focus();
+  });
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+
+  function now() {
+    return new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  }
+
+  // Render a stream-json event from claude -p --output-format=stream-json.
+  // We've seen the real shapes now (v0.3.0-alpha.1 dogfood). Key rules:
+  //   - stream_event = token-level deltas. Skip entirely — they aggregate into
+  //     'assistant' / 'user' messages which we render cleanly.
+  //   - system subtypes: init/status are noise (skip); hook_started is noise
+  //     (skip — we render the paired hook_response for outcome). hook_response
+  //     shows name + allow/block so the user sees the safety layer.
+  //   - assistant message.content: mix of text + tool_use blocks. Render each.
+  //   - user message.content: tool_result blocks. Render condensed.
+  //   - result: final summary with duration + outcome.
+  //   - exit/error/stderr: meta from our own wrapper.
+  function renderEvent(logEl, event) {
+    const type = String(event.type || '');
+    const data = event.data ?? {};
+
+    // ── Silent types (reduce noise) ──
+    if (type === 'stream_event') return;
+    if (type === 'system' && (data.subtype === 'init' || data.subtype === 'status' || data.subtype === 'hook_started')) return;
+    if (type === 'stdout' && !String(data.line || '').trim()) return;
+    // Codex internal lifecycle — not useful to show per-event
+    if (type === 'thread.started' || type === 'turn.started') return;
+
+    // Rendered lines
+    const lines = []; // { cls, label, body }
+
+    if (type === 'assistant' && data.message && Array.isArray(data.message.content)) {
+      for (const block of data.message.content) {
+        if (block.type === 'text') {
+          const t = String(block.text || '').trim();
+          if (t) lines.push({ cls: 'claude', label: 'claude', body: t });
+        } else if (block.type === 'tool_use') {
+          const name = String(block.name || 'tool');
+          const input = block.input && typeof block.input === 'object' ? JSON.stringify(block.input) : '';
+          const preview = input.length > 180 ? input.slice(0, 180) + '…' : input;
+          lines.push({ cls: 'tool', label: name, body: preview });
+        } else if (block.type === 'thinking') {
+          // Skip thinking — too verbose for the log view
+        }
+      }
+    } else if (type === 'user' && data.message && Array.isArray(data.message.content)) {
+      for (const block of data.message.content) {
+        if (block.type === 'tool_result') {
+          const raw = Array.isArray(block.content)
+            ? block.content.map(c => c.text || '').join('')
+            : String(block.content || '');
+          const t = raw.replace(/\\s+/g, ' ').trim();
+          if (t) {
+            const preview = t.length > 220 ? t.slice(0, 220) + '…' : t;
+            lines.push({ cls: 'result', label: block.is_error ? 'error' : 'result', body: preview });
+          }
+        }
+      }
+    } else if (type === 'system' && data.subtype === 'hook_response') {
+      const name = String(data.hook_name || 'hook');
+      const exitCode = Number(data.exit_code ?? 0);
+      const blocked = exitCode !== 0;
+      const stderr = String(data.stderr || '').trim();
+      const body = blocked ? (stderr || 'blocked') : 'ok';
+      lines.push({ cls: 'hook' + (blocked ? ' blocked' : ''), label: name, body });
+    } else if (type === 'result') {
+      // Claude Code --output-format=stream-json final result
+      const dur = Math.round(Number(data.duration_ms || 0) / 1000);
+      const turns = Number(data.num_turns || 0);
+      const summary = String(data.result || '').slice(0, 220);
+      lines.push({ cls: 'done', label: data.subtype || 'done', body: turns + ' turns · ' + dur + 's · ' + summary });
+    } else if (type === 'item.started') {
+      // Codex fires item.started immediately; item.completed follows with results.
+      // Silent to avoid doubling every tool call in the feed.
+      return;
+    } else if (type === 'item.completed') {
+      // Codex event: { item: { type, ... } }. Observed item.types from live dogfood:
+      //   agent_message       → text
+      //   command_execution   → command (string), aggregated_output, exit_code, status
+      //   (+future: tool_call / local_shell_call / etc — defensive branches kept)
+      const item = data.item && typeof data.item === 'object' ? data.item : {};
+      const itemType = String(item.type || 'item');
+
+      if (itemType === 'agent_message' && item.text) {
+        const t = String(item.text).trim();
+        if (t) lines.push({ cls: 'claude', label: 'codex', body: t.slice(0, 280) });
+      } else if (itemType === 'command_execution') {
+        const cmd = String(item.command || '').replace(/\\n/g, ' ').trim();
+        const cmdShort = cmd.length > 140 ? cmd.slice(0, 140) + '…' : cmd;
+        lines.push({ cls: 'tool', label: 'shell', body: cmdShort });
+        const output = String(item.aggregated_output || '').trim();
+        if (output) {
+          const outShort = output.length > 200 ? output.slice(0, 200) + '…' : output;
+          lines.push({
+            cls: item.exit_code === 0 || item.status === 'completed' ? 'result' : 'error',
+            label: item.exit_code === 0 || item.status === 'completed' ? 'result' : 'exit ' + (item.exit_code ?? '?'),
+            body: outShort,
+          });
+        }
+      } else if (itemType === 'tool_call' || itemType === 'local_shell_call') {
+        // Forward-compat: other codex tool types we haven't seen yet
+        const cmd = String(item.command || item.tool_name || item.name || 'tool');
+        const args = item.arguments ? JSON.stringify(item.arguments).slice(0, 200) : '';
+        lines.push({ cls: 'tool', label: cmd, body: args });
+      } else if (itemType === 'reasoning' || itemType === 'thinking') {
+        // skip — too verbose
+      } else {
+        // Unknown item type — render minimally for diagnosis
+        lines.push({ cls: 'result', label: itemType, body: JSON.stringify(item).slice(0, 200) });
+      }
+    } else if (type === 'turn.completed') {
+      // Codex turn-completed event — light summary
+      const u = (data.usage && typeof data.usage === 'object') ? data.usage : {};
+      const input = Number(u.input_tokens || 0);
+      const output = Number(u.output_tokens || 0);
+      if (input || output) {
+        lines.push({ cls: 'done', label: 'turn', body: input + ' in · ' + output + ' out tokens' });
+      }
+    } else if (type === 'exit') {
+      const status = String(data.status || '?');
+      const dur = Math.round(Number(data.durationMs || 0) / 1000);
+      lines.push({ cls: 'exit', label: 'exit', body: 'status=' + status + ' duration=' + dur + 's' });
+    } else if (type === 'codehere:error') {
+      // F1b structured error with recovery hint
+      const code = String(data.code || 'error');
+      const msg = String(data.message || '');
+      const recovery = String(data.recovery || '');
+      const div = document.createElement('div');
+      div.className = 'event codehere-error';
+      div.innerHTML =
+        '<span class="label">' + escape(code) + '</span>' +
+        escape(msg) +
+        (recovery ? '<span class="recovery">→ ' + escape(recovery) + '</span>' : '');
+      logEl.appendChild(div);
+      logEl.scrollTop = logEl.scrollHeight;
+      return;
+    } else if (type === 'error') {
+      lines.push({ cls: 'error', label: 'error', body: String(data.message || JSON.stringify(data)) });
+    } else if (type === 'stderr') {
+      const t = String(data.line || '').trim();
+      if (t) lines.push({ cls: 'stderr', label: 'stderr', body: t });
+    } else if (type === 'stdout') {
+      lines.push({ cls: 'stdout', label: 'out', body: String(data.line || '') });
+    }
+    // Any other event type → silent (we don't dump raw JSON anymore)
+
+    if (lines.length === 0) return;
+
+    const ts = now();
+    for (const ln of lines) {
+      const div = document.createElement('div');
+      div.className = 'event ' + ln.cls;
+      div.innerHTML =
+        '<span class="t">' + escape(ts) + '</span>' +
+        '<span class="label">' + escape(ln.label) + '</span>' +
+        escape(ln.body);
+      logEl.appendChild(div);
+    }
+    logEl.scrollTop = logEl.scrollHeight;
+  }
+
+  function updateStatus(pillEl, status) {
+    pillEl.className = 'status-pill ' + status;
+    pillEl.textContent = status;
+  }
+
+  function agentLabel(id) {
+    const labels = { 'claude-code': 'Claude Code', 'codex': 'Codex', 'aider': 'Aider', 'kiro': 'Kiro' };
+    return labels[id] || id || 'agent';
+  }
+
+  function attachSession(session) {
+    const card = document.createElement('div');
+    card.className = 'session';
+    card.dataset.sessionId = session.sessionId;
+    // C3 · Persisted sessions are from a prior daemon run — no live stream, no
+    // kill. Still useful: user sees their previous Final reports across restarts.
+    const isPersisted = session.provenance === 'persisted';
+    const runningClass = session.status === 'running' ? ' badge-running-glow' : '';
+    const liveDot = session.status === 'running' ? '<span class="live-dot"></span>' : '';
+    card.innerHTML =
+      '<div class="session-head">' +
+        '<div class="meta">' +
+          '<div class="prompt" title="' + escape(session.prompt) + '">' +
+            '<span class="card-lights"><span class="r"></span><span class="y"></span><span class="g"></span></span>' +
+            escape(session.prompt) +
+            '<span class="chevron">▸</span>' +
+          '</div>' +
+          '<div class="sub">' + liveDot + escape(agentLabel(session.agent)) + ' · ' + new Date(session.startedAt).toLocaleTimeString() +
+            '<span class="safety-pill" style="display:none">' +
+              '<span class="shield">🛡</span> ' +
+              '<span class="safe">0</span> safe' +
+              '<span class="blocked-portion" style="display:none"> · <span class="blocked">0</span> blocked</span>' +
+            '</span>' +
+          '</div>' +
+          '<div class="steps-mini"></div>' +
+        '</div>' +
+        '<div class="session-controls">' +
+          '<span class="status-pill ' + session.status + runningClass + '">' + session.status + '</span>' +
+          '<button class="kill">Kill</button>' +
+        '</div>' +
+      '</div>' +
+      '<div class="session-body">' +
+        '<div class="final-report" style="display:none"></div>' +
+        '<div class="event-log"></div>' +
+      '</div>';
+
+    sessionsEl.prepend(card);
+    emptyEl.style.display = 'none';
+
+    const logEl = card.querySelector('.event-log');
+    const pillEl = card.querySelector('.status-pill');
+    const killBtn = card.querySelector('.kill');
+    const headEl = card.querySelector('.session-head');
+    const stepsEl = card.querySelector('.steps-mini');
+    const finalReportEl = card.querySelector('.final-report');
+    const safetyPillEl = card.querySelector('.safety-pill');
+    const safetySafeEl = safetyPillEl.querySelector('.safe');
+    const safetyBlockedEl = safetyPillEl.querySelector('.blocked');
+    const safetyBlockedWrap = safetyPillEl.querySelector('.blocked-portion');
+    let safeCount = 0, blockedCount = 0;
+
+    // Gate B1 · increment safety counters on every Claude hook_response.
+    // Principle #7 (agent-provenance): shows the hook firing continuously,
+    // so the safety moat is visible mid-task, not only when something blocks.
+    function bumpSafety(event) {
+      if (event.type !== 'system') return;
+      const d = event.data || {};
+      if (d.subtype !== 'hook_response') return;
+      if (Number(d.exit_code ?? 0) === 0) safeCount += 1; else blockedCount += 1;
+      safetyPillEl.style.display = 'inline-flex';
+      safetySafeEl.textContent = String(safeCount);
+      if (blockedCount > 0) {
+        safetyBlockedWrap.style.display = '';
+        safetyBlockedEl.textContent = String(blockedCount);
+        safetyPillEl.classList.add('has-blocked');
+      }
+    }
+
+    // Collapse/expand on header click (but not when clicking Kill)
+    headEl.addEventListener('click', (ev) => {
+      if (ev.target && ev.target.closest('.session-controls')) return;
+      card.classList.toggle('expanded');
+    });
+
+    // Layer 2: render the semantic step list inside the collapsed card.
+    // Principles #1 (web is not a terminal) + #2 (info density) — show last 3
+    // steps with pass/active/fail glyphs; hide the rest behind "+ N more" so
+    // the card stays compact even on a 20-step task.
+    function renderSteps(steps) {
+      if (!Array.isArray(steps) || steps.length === 0) {
+        stepsEl.innerHTML = '';
+        return;
+      }
+      const tail = steps.slice(-3);
+      const more = steps.length - tail.length;
+      const glyph = { done: '✓', active: '⟳', failed: '✗', pending: '·' };
+      stepsEl.innerHTML =
+        tail.map(s => {
+          const st = String(s.state || 'pending');
+          const g = glyph[st] || '·';
+          return '<div class="step ' + st + '"><span class="ico">' + g + '</span><span>' + escape(String(s.label || '')) + '</span></div>';
+        }).join('') +
+        (more > 0 ? '<div class="more">+ ' + more + ' earlier</div>' : '');
+    }
+
+    // Layer 3: render the final report block when the task completes.
+    // Principles #2 + #7 — density (files/tests/trust in one view) and
+    // agent-provenance (the report attributes to a specific agent).
+    function renderArtifacts(artifacts) {
+      if (!artifacts) { finalReportEl.style.display = 'none'; return; }
+      finalReportEl.style.display = 'block';
+      const files = Array.isArray(artifacts.files) ? artifacts.files : [];
+      const tests = artifacts.tests;
+      let html = '<div class="fr-label">Final report · ' + escape(agentLabel(session.agent)) + '</div>';
+      if (files.length > 0) {
+        html += '<div class="fr-files">' + files.map(f => {
+          const lines = '<span class="add">+' + (f.added || 0) + '</span> <span class="rem">−' + (f.removed || 0) + '</span>';
+          const trustCls = typeof f.trust === 'number'
+            ? (f.trust >= 80 ? 'good' : f.trust >= 60 ? 'warn' : 'bad')
+            : 'none';
+          const trustLabel = typeof f.trust === 'number' ? String(f.trust) : '—';
+          return '<div class="fr-file">' +
+            '<span class="path" title="' + escape(String(f.path)) + '">' + escape(String(f.path)) + '</span>' +
+            '<span class="lines">' + lines + '</span>' +
+            '<span class="trust ' + trustCls + '" title="Trust score">' + trustLabel + '</span>' +
+          '</div>';
+        }).join('') + '</div>';
+      } else {
+        html += '<div class="fr-none">No file changes detected (or not run inside a git repo).</div>';
+      }
+      if (tests && (tests.passed || tests.failed)) {
+        html += '<div class="fr-tests">Tests · <span class="pass">' + (tests.passed || 0) + ' passed</span>' +
+          (tests.failed ? ', <span class="fail">' + tests.failed + ' failed</span>' : '') +
+          (tests.durationMs ? ' · ' + Math.round(tests.durationMs / 100) / 10 + 's' : '') + '</div>';
+      }
+      const u = artifacts.usage;
+      if (u && (u.inputTokens || u.outputTokens)) {
+        const fmt = (n) => n >= 10000 ? (Math.round(n / 100) / 10).toFixed(1) + 'k' : String(n);
+        let tokensLine = 'Tokens · <b>' + fmt(u.inputTokens) + '</b> in · <b>' + fmt(u.outputTokens) + '</b> out';
+        if (u.cacheReadTokens) tokensLine += ' · ' + fmt(u.cacheReadTokens) + ' cached';
+        html += '<div class="fr-tests">' + tokensLine + '</div>';
+      }
+      finalReportEl.innerHTML = html;
+    }
+
+    // Hydrate from initial snapshot (late-joiner support + persisted sessions)
+    if (Array.isArray(session.steps) && session.steps.length) renderSteps(session.steps);
+    if (session.artifacts) renderArtifacts(session.artifacts);
+
+    // Persisted sessions have no live event stream and no subprocess to kill.
+    if (isPersisted) {
+      killBtn.style.display = 'none';
+      card.classList.add('observed'); // reuse the faded styling
+      return;
+    }
+
+    const es = new EventSource('/api/task/' + session.sessionId + '/events');
+    es.onmessage = (ev) => {
+      try {
+        const event = JSON.parse(ev.data);
+
+        // Layer 2/3 synthetic events — handle before renderEvent (so they don't leak into the raw log)
+        if (event.type === 'codehere:steps') { renderSteps(event.data?.steps); return; }
+        if (event.type === 'codehere:artifacts') { renderArtifacts(event.data); return; }
+
+        // Any structured error flips the status pill immediately — don't wait for
+        // the subprocess to exit. Many CLIs print a logical error to stdout and
+        // then exit 0, which would otherwise paint the card green.
+        if (event.type === 'codehere:error') {
+          updateStatus(pillEl, 'error');
+          // fall through — renderEvent renders the red banner in the log
+        }
+
+        // Gate B1 · tally safety events continuously (non-exclusive with render)
+        bumpSafety(event);
+
+        renderEvent(logEl, event);
+        if (event.type === 'exit') {
+          updateStatus(pillEl, event.data?.status || 'completed');
+          killBtn.disabled = true; killBtn.style.opacity = '0.4';
+          const dot = card.querySelector('.sub .live-dot');
+          if (dot) dot.remove();
+          es.close();
+        }
+        if (event.type === 'error') {
+          updateStatus(pillEl, 'error');
+        }
+      } catch { /* skip */ }
+    };
+    es.onerror = () => { /* server may have closed after exit; fine */ };
+
+    killBtn.addEventListener('click', async (ev) => {
+      ev.stopPropagation();
+      killBtn.disabled = true; killBtn.textContent = '...';
+      try {
+        await fetch('/api/task/' + session.sessionId + '/kill', { method: 'POST' });
+      } catch { /* ignore */ }
+      killBtn.textContent = 'Kill';
+    });
+
+    sessions.set(session.sessionId, { card, logEl, es });
+  }
+
+  async function assignTask() {
+    const prompt = promptEl.value.trim();
+    if (!prompt) return;
+    const agent = agentSelect.value || 'claude-code';
+    const cwd = cwdInput.value.trim();
+    spawnBtn.disabled = true; spawnBtn.textContent = '...';
+    try {
+      const res = await fetch('/api/task', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt, agent, cwd: cwd || undefined }),
+      });
+      const data = await res.json();
+      if (!res.ok) { alert('Failed: ' + (data.error || res.status)); return; }
+      attachSession({ sessionId: data.sessionId, prompt, startedAt: data.startedAt, status: data.status, agent: data.agent || agent });
+      promptEl.value = '';
+    } catch (e) {
+      alert('Network error: ' + (e && e.message ? e.message : e));
+    } finally {
+      spawnBtn.disabled = false; spawnBtn.textContent = 'Assign task';
+    }
+  }
+
+  spawnBtn.addEventListener('click', assignTask);
+  promptEl.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); assignTask(); }
+  });
+
+  // ── Observed sessions (F1d) ──────────────────────────────────────────
+  function shortId(id) { return String(id || '').slice(0, 8); }
+
+  function timeAgo(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';
+    return Math.floor(s / 3600) + 'h ago';
+  }
+
+  function renderActiveAgent(a) {
+    const existingKey = 'agent:' + a.pid;
+    const existing = document.querySelector('[data-session-id="' + CSS.escape(existingKey) + '"]');
+    if (existing) return;
+    const card = document.createElement('div');
+    card.className = 'session observed';
+    card.dataset.sessionId = existingKey;
+    const uptime = a.uptimeSeconds < 60
+      ? a.uptimeSeconds + 's'
+      : a.uptimeSeconds < 3600
+        ? Math.floor(a.uptimeSeconds / 60) + 'm'
+        : Math.floor(a.uptimeSeconds / 3600) + 'h';
+    card.innerHTML =
+      '<div class="session-head">' +
+        '<div class="meta">' +
+          '<div class="prompt">' +
+            '<span class="card-lights"><span class="r"></span><span class="y"></span><span class="g"></span></span>' +
+            escape(a.label) + ' · ' + escape(a.tty) + ' · pid ' + a.pid +
+          '</div>' +
+          '<div class="sub">running ' + escape(uptime) + '</div>' +
+        '</div>' +
+        '<div class="session-controls">' +
+          '<span class="status-pill observed-pill">detected</span>' +
+        '</div>' +
+      '</div>';
+    sessionsEl.appendChild(card);
+    emptyEl.style.display = 'none';
+  }
+
+  function pruneStaleAgents(seenKeys) {
+    // Remove cards for agents that have exited since the last fetch
+    const cards = sessionsEl.querySelectorAll('.session.observed');
+    cards.forEach(card => {
+      const key = card.dataset.sessionId;
+      if (key && key.startsWith('agent:') && !seenKeys.has(key)) card.remove();
+    });
+  }
+
+  // Gate B3 · audit summary row — moat made visible on the main page.
+  // Principles #3 (status at a glance), #7 (agent-provenance), #6 (marketing voice).
+  const auditRow = document.getElementById('audit-summary');
+  function updateAudit(d) {
+    if (!d) { auditRow.classList.add('empty'); return; }
+    const hasAny = (d.actions || 0) > 0;
+    if (!hasAny) { auditRow.classList.add('empty'); return; }
+    auditRow.classList.remove('empty');
+    document.getElementById('as-actions').textContent = String(d.actions || 0);
+    document.getElementById('as-blocked').textContent = String(d.blocked || 0);
+    document.getElementById('as-trust').textContent = d.avgTrust == null ? '—' : String(d.avgTrust);
+    document.getElementById('as-agents').textContent = String(d.agents || 0);
+  }
+  function refreshAudit() {
+    fetch('/api/audit/summary').then(r => r.json()).then(updateAudit).catch(() => { /* fine */ });
+  }
+  refreshAudit();
+  setInterval(refreshAudit, 30000); // audit log isn't hot; 30s is plenty
+
+  // Layer 7: status-at-a-glance banner — one row answers "what's happening".
+  // Principles #3 (status at a glance) + #4 (multi-session default: one row scales from 1 to N sessions).
+  const banner = document.getElementById('status-banner');
+  let latestLastEditAt = null;
+  function agoStr(ms) {
+    if (!ms) return '—';
+    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 updateBanner(d) {
+    const spawned = d.spawned || d.sessions || [];
+    const running = spawned.filter(s => s.status === 'running').length;
+    const blocked = spawned.filter(s => s.status === 'error').length;
+    const detected = (d.activeAgents || []).length;
+    document.getElementById('sb-running').textContent = String(running);
+    document.getElementById('sb-detected').textContent = String(detected);
+    const blockedEl = document.getElementById('sb-blocked');
+    blockedEl.textContent = String(blocked);
+    blockedEl.classList.toggle('nonzero', blocked > 0);
+    latestLastEditAt = d.lastEditAt || null;
+    document.getElementById('sb-last').textContent = agoStr(latestLastEditAt);
+    // Show the banner once we have anything to show (sessions or detected agents)
+    banner.style.display = (running + detected + blocked + spawned.length > 0) ? 'flex' : 'none';
+  }
+  // Tick the "last edit" relative label every second even without a refetch
+  setInterval(() => {
+    if (latestLastEditAt) document.getElementById('sb-last').textContent = agoStr(latestLastEditAt);
+  }, 1000);
+
+  function loadSessions() {
+    fetch('/api/tasks').then(r => r.json()).then(d => {
+      for (const s of (d.spawned || d.sessions || [])) attachSession(s);
+      // C3 · render completed sessions from prior daemon runs (read-only cards)
+      for (const s of (d.persisted || [])) attachSession({ ...s, provenance: 'persisted' });
+      const seen = new Set();
+      for (const a of (d.activeAgents || [])) {
+        seen.add('agent:' + a.pid);
+        renderActiveAgent(a);
+      }
+      pruneStaleAgents(seen);
+      updateBanner(d);
+    }).catch(() => { /* fine */ });
+  }
+  loadSessions();
+  // Refresh detected-agents list + banner every 5s
+  setInterval(() => {
+    fetch('/api/tasks').then(r => r.json()).then(d => {
+      const seen = new Set();
+      for (const a of (d.activeAgents || [])) {
+        seen.add('agent:' + a.pid);
+        renderActiveAgent(a);
+      }
+      pruneStaleAgents(seen);
+      updateBanner(d);
+    }).catch(() => { /* fine */ });
+  }, 5000);
+
+  // ── F1a readiness banner ─────────────────────────────────────────────
+  const readinessEl = document.getElementById('readiness');
+
+  function renderReadiness(report) {
+    if (!report || report.state === 'ready') {
+      readinessEl.style.display = 'none';
+      return;
+    }
+    readinessEl.style.display = 'block';
+    readinessEl.setAttribute('data-severity', report.severity);
+    let actionHtml = '';
+    if (report.action) {
+      if (report.action.command) {
+        actionHtml += '<code>' + escape(report.action.command) + '</code>';
+      }
+      if (report.action.url) {
+        actionHtml += ' <a href="' + escape(report.action.url) + '" target="_blank" rel="noreferrer">' + escape(report.action.label || 'Open') + ' →</a>';
+      }
+    }
+    actionHtml += ' <button id="readiness-refresh">Check again</button>';
+    readinessEl.innerHTML =
+      '<div class="r-title">' + escape(report.title) + '</div>' +
+      '<div class="r-detail">' + escape(report.detail) + '</div>' +
+      '<div class="r-action">' + actionHtml + '</div>';
+    const btn = document.getElementById('readiness-refresh');
+    if (btn) btn.addEventListener('click', checkReadiness);
+  }
+
+  function checkReadiness() {
+    fetch('/api/readiness').then(r => r.json()).then(renderReadiness).catch(() => {
+      readinessEl.style.display = 'none';
+    });
+  }
+
+  checkReadiness();
+})();
+</script>
+</body>
+</html>`;
+//# sourceMappingURL=ui-page.js.map