codehere 0.5.0-alpha.6 → 0.6.0-alpha.1

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

@@ -9,7 +9,7 @@
  * ~/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).
+ * .hero-beam).
  */
 const SHARED_STYLES = `
   :root {
@@ -31,16 +31,27 @@ const SHARED_STYLES = `
     --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 */
-  @keyframes shimmer {
-    0% { background-position: -200% center; }
-    100% { background-position: 200% center; }
-  }
+  /* 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); }
@@ -49,24 +60,6 @@ const SHARED_STYLES = `
     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 {
@@ -89,43 +82,224 @@ const SHARED_STYLES = `
     margin: 18px 0;
   }
 
-  /* Per-card traffic lights — mini terminal frame */
-  .card-lights {
+  /* ── 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;
-    gap: 5px;
-    margin-right: 10px;
+    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;
   }
-  .card-lights span {
-    width: 9px; height: 9px; border-radius: 50%;
-    display: inline-block;
+  .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;
   }
-  .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;
+  /* 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 */
@@ -202,6 +376,9 @@ const SHARED_STYLES = `
   .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; }
@@ -285,21 +462,38 @@ const SHARED_STYLES = `
     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); }
-  .final-report .fr-file .trust {
+  /* 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);
   }
-  .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); }
+  .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);
@@ -333,6 +527,427 @@ const SHARED_STYLES = `
   }
   .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>
@@ -355,7 +970,7 @@ ${SHARED_STYLES}
     -webkit-font-smoothing: antialiased;
   }
 
-  /* ── Header (marketing-hero motif: traffic-light dots) ─────────────── */
+  /* ── Header ─────────────────────────────────────────────────────────── */
   header {
     position: sticky; top: 0; z-index: 10;
     background: rgba(0,0,0,0.75);
@@ -366,15 +981,6 @@ ${SHARED_STYLES}
     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;
@@ -390,7 +996,7 @@ ${SHARED_STYLES}
     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 .meta .dot.live { background: var(--accent); }
   header .eyebrow {
     display: inline-block;
     font-family: var(--mono);
@@ -436,24 +1042,110 @@ ${SHARED_STYLES}
 
   /* ── 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: 11px 24px;
+    padding: 10px 24px;
     border-bottom: 1px solid var(--border-soft);
-    display: grid;
-    grid-template-columns: 88px 64px 80px 1fr 70px;
-    gap: 14px;
-    align-items: baseline;
+    display: flex;
+    align-items: center;
+    gap: 12px;
     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; }
+  /* 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 {
-    font-family: var(--mono); font-size: 11px; font-weight: 600;
-    text-transform: uppercase; letter-spacing: 0.06em;
-    padding: 2px 8px; border-radius: 999px;
+    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);
@@ -465,21 +1157,79 @@ ${SHARED_STYLES}
     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: 12px;
+    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: 12px;
+    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: 11px;
+    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 {
@@ -515,6 +1265,8 @@ ${SHARED_STYLES}
   <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">
@@ -550,6 +1302,50 @@ ${SHARED_STYLES}
 
 <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>
@@ -560,13 +1356,19 @@ ${SHARED_STYLES}
 </main>
 
 <script>
+${AGENT_BADGE_JS}
+
 (function () {
   const feed = document.getElementById('feed');
   const empty = document.getElementById('empty');
-  const countEl = document.getElementById('count');
+  // 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');
-  let count = 0;
 
   function shortPath(p) {
     const parts = String(p).split('/');
@@ -609,24 +1411,130 @@ ${SHARED_STYLES}
   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';
+    // 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>' +
       '<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);
+    applyFilterToRow(li);
     empty.style.display = 'none';
   }
 
+  // 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;
@@ -686,6 +1594,91 @@ ${SHARED_STYLES}
 
   // 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>
@@ -710,11 +1703,6 @@ ${SHARED_STYLES}
     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; }
@@ -794,6 +1782,20 @@ ${SHARED_STYLES}
     color: var(--fg-30); font-size: 10.5px;
     padding: 8px; text-align: center;
   }
+  /* Pencil rename button — was missing from TASK_HTML's style block, so the
+     SVG rendered without sizing constraints and showed as a white square on
+     the active project row. Same rules as THREAD_HTML's copy. */
+  .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;
+    outline: none;
+  }
+  .channel-rename svg { display: block; width: 14px; height: 14px; }
+  .channel-rename:hover, .channel-rename:focus { color: var(--fg); background: transparent; }
+  .channel-rename:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
 
   /* ── Readiness banner (F1a) ─────────────────────────────────────────── */
   .readiness {
@@ -829,6 +1831,61 @@ ${SHARED_STYLES}
   }
   .readiness .r-action button:hover { color: var(--fg); border-color: var(--fg-30); }
 
+  /* v0.6 S2 — first-time onboarding card. Quiet authority: peach
+     accent border + subtle glass, doesn't compete with the textarea
+     below. Removed once dismissed OR once any session exists. */
+  .onboarding-card {
+    margin: 30px 0 18px; padding: 24px 28px;
+    border: 1px solid rgba(255,154,118,0.25);
+    background: linear-gradient(135deg, rgba(255,154,118,0.04) 0%, rgba(74,144,226,0.03) 100%);
+    border-radius: 12px;
+    position: relative; z-index: 1;
+  }
+  .onboarding-card .ob-head {
+    display: flex; align-items: flex-start; justify-content: space-between;
+    margin-bottom: 6px;
+  }
+  .onboarding-card .ob-title {
+    font-family: var(--sans); font-size: 18px; font-weight: 700;
+    color: var(--fg);
+    background: linear-gradient(135deg, #ff9a76 0%, #4a90e2 100%);
+    -webkit-background-clip: text; background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .onboarding-card .ob-close {
+    background: transparent; border: none; cursor: pointer;
+    color: var(--fg-40); font-size: 22px; line-height: 1;
+    padding: 0 4px;
+    transition: color 0.15s ease;
+  }
+  .onboarding-card .ob-close:hover { color: var(--fg); }
+  .onboarding-card .ob-blurb {
+    font-family: var(--sans); font-size: 13px; line-height: 1.55;
+    color: var(--fg-70); margin-bottom: 16px; max-width: 640px;
+  }
+  .onboarding-card .ob-steps {
+    list-style: none; padding: 0; margin: 0;
+    display: flex; flex-direction: column; gap: 10px;
+  }
+  .onboarding-card .ob-steps li {
+    display: flex; gap: 12px; align-items: flex-start;
+  }
+  .onboarding-card .ob-num {
+    flex: 0 0 22px; height: 22px; line-height: 22px;
+    border-radius: 50%; text-align: center;
+    background: rgba(255,154,118,0.15);
+    color: var(--accent);
+    font-family: var(--mono); font-size: 11px; font-weight: 600;
+  }
+  .onboarding-card .ob-step-title {
+    font-family: var(--sans); font-size: 13px; font-weight: 600;
+    color: var(--fg); margin-bottom: 2px;
+  }
+  .onboarding-card .ob-step-body {
+    font-family: var(--sans); font-size: 12px; line-height: 1.5;
+    color: var(--fg-50);
+  }
+
   .intake { padding: 36px 0 24px; position: relative; z-index: 1; }
   .intake h1 {
     margin: 0 0 6px;
@@ -847,6 +1904,47 @@ ${SHARED_STYLES}
     resize: vertical; outline: none;
   }
   .intake textarea:focus { border-color: rgba(255,154,118,0.4); }
+
+  /* Pattern 5 · Composer + cost row. Sits between the textarea and the
+     intake-row so the user sees: who's going to run this · where ·
+     how much of the context window the prompt consumes · est. cost.
+     Live-updates on every keystroke + agent/cwd change.
+     Per docs/design/AGENTIC_UX.md Pattern 5. */
+  .composer-meta {
+    display: flex; gap: 10px; align-items: center;
+    margin-top: 6px; padding: 0 4px;
+    font-family: var(--mono); font-size: 11px; color: var(--fg-50);
+    min-height: 18px;
+  }
+  .composer-meta .cm-pill {
+    display: inline-flex; gap: 4px; align-items: center;
+    padding: 1px 8px; border-radius: 999px;
+    border: 1px solid var(--border-soft);
+    background: rgba(255,255,255,0.02);
+  }
+  .composer-meta .cm-pill b { color: var(--fg-70); font-weight: 500; }
+  .composer-meta .cm-sep { color: var(--fg-20); user-select: none; }
+  .composer-meta .cm-budget[data-state="warn"]  { color: var(--warn);  border-color: rgba(254,188,46,0.3); background: rgba(254,188,46,0.05); }
+  .composer-meta .cm-budget[data-state="block"] { color: var(--block); border-color: rgba(255,95,87,0.3);  background: rgba(255,95,87,0.06); }
+  .composer-meta .cm-cost.free  { color: var(--allow); border-color: rgba(40,200,64,0.22); background: rgba(40,200,64,0.06); }
+  .composer-meta .cm-cost.paid  { color: var(--fg-70); }
+  .composer-meta .cm-spend      { color: var(--fg-70); cursor: help; }
+  .composer-meta .cm-spend b    { color: var(--fg-90); }
+  .composer-meta .cm-spend[data-state="warn"]  { color: var(--warn);  border-color: rgba(254,188,46,0.3); background: rgba(254,188,46,0.05); }
+  .composer-meta .cm-spend[data-state="warn"] b{ color: var(--warn); }
+  .composer-meta .cm-spend[data-state="block"] { color: var(--block); border-color: rgba(255,95,87,0.3);  background: rgba(255,95,87,0.06); }
+  .composer-meta .cm-spend[data-state="block"] b{ color: var(--block); }
+  .composer-meta .cm-spacer { flex: 1; }
+  .composer-meta .cm-hint {
+    color: var(--fg-30); font-size: 10.5px;
+    margin-left: 4px;
+  }
+  /* On narrow viewports the hint hides — agent + budget pills stay,
+     keyboard hint becomes discoverable via tooltip on the textarea. */
+  @media (max-width: 720px) {
+    .composer-meta .cm-hint { display: none; }
+  }
+
   .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;
@@ -1005,7 +2103,7 @@ ${SHARED_STYLES}
   }
   .session-head {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 12px 16px;
+    padding: 14px 20px;
     cursor: pointer;
     user-select: none;
   }
@@ -1023,20 +2121,79 @@ ${SHARED_STYLES}
   .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); }
+  /* May 6 2026 design polish (Tier 1 #2): drop uppercase + heavy letter-spacing
+     per Open-Agents production-grade reference. Status pills now read as
+     human labels (Sentence case) not all-caps shouts. Killed demoted from
+     yellow-warn to muted neutral — it's just "stopped", not an alert. */
   .session-head .status-pill {
-    font-family: var(--mono); font-size: 10px; font-weight: 600;
-    text-transform: uppercase; letter-spacing: 0.08em;
+    font-family: var(--mono); font-size: 10.5px; font-weight: 500;
     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); }
+  /* Pattern 8 · Status badge taxonomy — locked palette per Track A #2.
+     7 owned states; semantic colors reflect actionable meaning.
+     Per docs/design/AGENTIC_UX.md Pattern 8. */
+  .status-pill.running   { color: var(--accent); background: var(--accent-wash); border-color: rgba(255,154,118,0.25); }
+  .status-pill.completed { color: var(--allow); background: rgba(40,200,64,0.10); border-color: rgba(40,200,64,0.20); }
+  .status-pill.awaiting  { color: var(--accent); background: transparent; border-color: var(--accent); border-style: dashed; }
+  .status-pill.blocked   { color: var(--block); background: rgba(255,95,87,0.08); border-color: rgba(255,95,87,0.25); }
+  .status-pill.failed,
+  .status-pill.error     { color: var(--block); background: rgba(255,95,87,0.10); border-color: rgba(255,95,87,0.30); }
+  .status-pill.killed    { color: var(--fg-50); background: rgba(255,255,255,0.04); border-color: var(--border); }
   .status-pill.observed-pill { color: var(--fg-50); background: rgba(255,255,255,0.03); border-color: var(--border); font-weight: 400; }
 
+  /* Pattern 6 · macro states — wired to actual adapter error codes
+     emitted by failover-classifier.ts + per-adapter ERROR_PATTERNS.
+     yellow (--warn) = recoverable (failover-eligible per failover-classifier);
+     red (--block)   = needs human action (auth, billing, model-pick).
+     Per docs/design/AGENTIC_UX.md Pattern 6. */
+  .status-pill.rate-limit,
+  .status-pill.quota-exceeded,
+  .status-pill.credit-low      { color: var(--warn); background: rgba(254,188,46,0.08); border-color: rgba(254,188,46,0.25); }
+  .status-pill.auth-invalid,
+  .status-pill.auth-missing,
+  .status-pill.model-unavailable,
+  .status-pill.crashed         { color: var(--block); background: rgba(255,95,87,0.10); border-color: rgba(255,95,87,0.30); }
+  .status-pill.thinking,
+  .status-pill.running-buffered { color: var(--fg-50); background: rgba(255,255,255,0.03); border-color: var(--border); }
+
+  /* Persisted sessions = your own past tasks replayed from disk.
+     Faded but VISIBLE. The detected-process variant (.observed) is
+     diagnostic — hidden by default per claim_user_persona. */
+  .session.persisted { opacity: 0.88; }
+  .session.persisted .session-head { border-bottom: none; }
   .session.observed { opacity: 0.88; }
   .session.observed .session-head { border-bottom: none; }
+  /* claim_user_persona HIGH — detected-process rows ("Claude Code ·
+     pid 30531") are diagnostic, not user-facing. Hidden by default;
+     advanced toggle reveals. The user's OWN spawned + persisted
+     sessions still show — only externally-detected runners are gated. */
+  .session.observed { display: none; }
+  body.advanced-on .session.observed { display: block; }
+
+  /* claim_user_persona — session list limit. Default shows the 5
+     most-recent cards; "Show all" reveals the rest. .show-all-on body
+     class lifts the cap. CSS-only via :nth-child so attachSession
+     prepend semantics stay simple. */
+  #sessions > .session:nth-child(n+6) { display: none; }
+  body.show-all-sessions #sessions > .session:nth-child(n+6) { display: block; }
+  /* When advanced is also off, observed rows beyond cap stay hidden. */
+  body.show-all-sessions #sessions > .session.observed { display: none; }
+  body.show-all-sessions.advanced-on #sessions > .session.observed { display: block; }
+  .show-more-sessions {
+    display: none; /* shown via JS when count > 5 */
+    margin: 14px auto;
+    padding: 8px 16px;
+    background: transparent;
+    color: var(--fg-50);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    font-family: var(--mono); font-size: 11px;
+    cursor: pointer;
+    transition: color 0.15s ease, border-color 0.15s ease;
+  }
+  .show-more-sessions:hover { color: var(--fg); border-color: var(--fg-30); }
+  body.show-all-sessions .show-more-sessions { display: none; }
 
   .session-controls { display: flex; gap: 8px; }
   .session-controls button {
@@ -1047,8 +2204,139 @@ ${SHARED_STYLES}
   }
   .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); }
+  /* Pattern 19 — interrupt affordance state machine (ready / confirming / killing).
+     Confirming state turns the button red so the second press registers
+     as intentional. 3s window then reverts to ready. */
+  .session-controls button.kill[data-state="confirming"] {
+    color: var(--block);
+    border-color: var(--block);
+    background: rgba(255,95,87,0.08);
+    font-weight: 600;
+    animation: kill-confirm-pulse 0.6s ease-in-out infinite alternate;
+  }
+  .session-controls button.kill[data-state="killing"] {
+    color: var(--fg-50);
+    cursor: progress;
+    opacity: 0.7;
+  }
+  @keyframes kill-confirm-pulse {
+    from { box-shadow: 0 0 0 rgba(255,95,87,0); }
+    to   { box-shadow: 0 0 8px rgba(255,95,87,0.4); }
+  }
+
+  .session-body { padding: 0 20px 16px; }
+
+  /* P18 slice 4 — permission gate panel. Renders inside the session
+     card when the per-tool hook blocked something. Per the dogfood-
+     learning + overconfidence-guard: framed as "Codehere noticed",
+     not "security violation". Approve button is the most prominent
+     because false-positives are the common case (e.g. /etc/shadow
+     in a docstring). Keep-blocking is the rare-but-real branch. */
+  .permission-gate {
+    margin: 10px 0 8px;
+    padding: 12px 14px;
+    border: 1px solid rgba(254,188,46,0.35);
+    background: rgba(254,188,46,0.05);
+    border-radius: 8px;
+  }
+  .permission-gate .pg-label {
+    font-family: var(--mono); font-size: 9.5px;
+    color: var(--warn);
+    text-transform: uppercase; letter-spacing: 0.14em;
+    margin-bottom: 4px;
+  }
+  .permission-gate .pg-title {
+    font-family: var(--sans); font-size: 13px;
+    color: var(--fg);
+    margin-bottom: 6px;
+  }
+  .permission-gate .pg-detail {
+    font-family: var(--mono); font-size: 11px;
+    color: var(--fg-70);
+    background: rgba(0,0,0,0.2);
+    padding: 6px 10px; border-radius: 4px;
+    margin-bottom: 10px;
+    word-break: break-all;
+  }
+  .permission-gate .pg-actions {
+    display: flex; gap: 8px; align-items: center;
+  }
+  .permission-gate button {
+    font-family: var(--mono); font-size: 11px;
+    padding: 6px 12px; border-radius: 6px;
+    cursor: pointer;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--fg-70);
+  }
+  .permission-gate button.pg-approve {
+    color: var(--accent);
+    border-color: var(--accent);
+    background: var(--accent-wash);
+    font-weight: 600;
+  }
+  .permission-gate button.pg-approve:hover { filter: brightness(1.1); }
+  .permission-gate button.pg-keep:hover { color: var(--fg); border-color: var(--fg-30); }
+  .permission-gate.approved {
+    border-color: rgba(40,200,64,0.3);
+    background: rgba(40,200,64,0.05);
+  }
+  .permission-gate.approved .pg-label { color: var(--allow); }
+  .permission-gate.approved .pg-actions { display: none; }
+  .permission-gate .pg-status {
+    display: none;
+    font-family: var(--mono); font-size: 10.5px;
+    color: var(--allow);
+    margin-top: 2px;
+  }
+  .permission-gate.approved .pg-status { display: block; }
+
+  /* v0.6 M3 — PM narrator block. Quiet style — visible but doesn't
+     compete with primary content. Italic body to signal "this is
+     narration, not authoritative" per overconfidence-guard. */
+  .narrator-block {
+    margin: 10px 0 8px;
+    padding: 10px 14px;
+    border-left: 2px solid var(--accent);
+    background: rgba(255,154,118,0.04);
+    border-radius: 0 8px 8px 0;
+  }
+  .narrator-block .narrator-label {
+    font-family: var(--mono); font-size: 9.5px;
+    color: var(--fg-30);
+    text-transform: uppercase; letter-spacing: 0.14em;
+    margin-bottom: 4px;
+  }
+  .narrator-block .narrator-text {
+    font-family: var(--sans);
+    font-size: 13px; line-height: 1.45;
+    color: var(--fg-70);
+    font-style: italic;
+  }
+  .narrator-block .narrator-meta {
+    font-family: var(--mono); font-size: 10px;
+    color: var(--fg-30);
+    margin-top: 4px;
+  }
+
+  /* Pattern 3 · Session card footer — elapsed · tools · files. Renders
+     beneath the body when the session has at least one step. Closes the
+     card visually + surfaces the same counts as the live tool-progress
+     chip but in a settled, summary form. Cost intentionally absent here
+     — that's P5's composer surface, not the per-card footer (per
+     AGENTIC_UX.md Pattern 3: "elapsed · cost · tool count · file count"
+     with cost-router not yet wired). */
+  .session-foot {
+    display: flex; gap: 14px; align-items: center;
+    padding: 10px 20px 12px;
+    border-top: 1px solid var(--border-soft);
+    font-family: var(--mono); font-size: 11px; color: var(--fg-50);
+  }
+  .session-foot[data-empty="true"] { display: none; }
+  .session-foot .sf-item { display: inline-flex; gap: 4px; align-items: center; }
+  .session-foot .sf-item b { color: var(--fg-70); font-weight: 600; }
+  .session-foot .sf-sep { color: var(--fg-20); user-select: none; }
 
-  .session-body { padding: 0 16px 14px; }
   .event-log {
     margin: 10px 0 0;
     max-height: 360px; overflow-y: auto;
@@ -1212,31 +2500,78 @@ ${SHARED_STYLES}
   <a href="/" class="nav-link active">Tasks</a>
   <a href="/threads" class="nav-link">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="channels-count">1</span></div>
-  <div id="channels-list">
-    <div class="channel active" data-channel="current">
-      <span class="channel-glyph">#</span>
-      <div style="flex:1;min-width:0">
-        <div class="channel-name" id="current-channel-name">project</div>
-        <div class="channel-cwd-hint" id="current-channel-cwd">~</div>
-      </div>
-    </div>
-  </div>
-  <!-- intentionally empty: multi-project sidebar arrives in v0.6.x -->
+  <div class="pane-head"><span>Projects</span><span class="pane-count" id="channels-count">0</span></div>
+  <div id="channels-list"><div class="pane-empty">Loading…</div></div>
 </aside>
 
 <section class="thread-pane">
 
-<div class="hero-beam"></div>
+<!-- v0.6 S2 — first-time onboarding card. Hidden once the user
+     dismisses (localStorage flag codehere.onboarded=1) OR once any
+     session exists in the dashboard. Per claim_user_persona HIGH:
+     non-technical users primary; the first 5 minutes is load-bearing
+     (feedback_first_5_minutes_is_load_bearing.md). This card guides
+     those 5 minutes: pick an agent → type a task → watch the report. -->
+<div class="onboarding-card" id="onboarding-card" style="display:none">
+  <div class="ob-head">
+    <div class="ob-title">Welcome to codehere.</div>
+    <button type="button" class="ob-close" id="ob-close" aria-label="Dismiss">×</button>
+  </div>
+  <div class="ob-blurb">A PM for your AI coding agents. Delegate a task in plain English; codehere picks an agent, watches every action, and reports back.</div>
+  <ol class="ob-steps">
+    <li>
+      <span class="ob-num">1</span>
+      <div>
+        <div class="ob-step-title">Pick an agent — or let codehere pick</div>
+        <div class="ob-step-body">Auto-pick is the default and works for most tasks. Specialists (Claude Code, Codex, Aider, Gemini, OpenCode) are below.</div>
+      </div>
+    </li>
+    <li>
+      <span class="ob-num">2</span>
+      <div>
+        <div class="ob-step-title">Type what needs doing</div>
+        <div class="ob-step-body">Plain English. Try: "Show me what this repo does in 3 bullets" or "Run the tests and tell me what failed."</div>
+      </div>
+    </li>
+    <li>
+      <span class="ob-num">3</span>
+      <div>
+        <div class="ob-step-title">Watch the Final Report</div>
+        <div class="ob-step-body">When the agent finishes, codehere generates a plain-English summary of what changed, what was tested, and what to look at next.</div>
+      </div>
+    </li>
+  </ol>
+</div>
 
 <div class="intake">
-  <h1>What needs <span class="gradient-text-shimmer">doing</span>?</h1>
-  <textarea id="prompt" placeholder="Describe a task. codehere picks the right agent and wraps it in a safety hook. Or pick one yourself below."></textarea>
+  <textarea id="prompt" placeholder="What needs doing? Describe a task — codehere picks the right agent."></textarea>
+  <!-- Pattern 5 · Composer meta line. UX-simplification iter (May 7):
+       dropped the cm-cwd pill — the cwd input below is the authoritative
+       editable surface; duplicating it as a non-editable pill caused
+       desync (pill stayed "—" while input showed the daemon-restored
+       cwd). Folded the keyboard-shortcut hint inline-left so the prior
+       second .intake-row could be deleted. -->
+  <div class="composer-meta" id="composer-meta">
+    <span class="cm-pill cm-agent" id="cm-agent"><b>Auto</b></span>
+    <span class="cm-sep">·</span>
+    <span class="cm-pill cm-budget" id="cm-budget" data-state="ok"><b>0%</b><span>used</span></span>
+    <span class="cm-sep">·</span>
+    <!-- v0.6 S3 slice 1 — today's estimated spend across every completed
+         session in ~/.codehere/sessions.jsonl. Hidden when zero so a
+         fresh-install dashboard isn't cluttered with "$0.00 today". Tooltip
+         points to vendor dashboards as the authoritative number. -->
+    <span class="cm-pill cm-spend" id="cm-spend" style="display:none" title="Estimated. Vendor dashboards are authoritative."><b>$0.00</b><span>today</span></span>
+    <span class="cm-hint">⌘+Enter to start · ⌘+Shift+Enter to reply to last task</span>
+    <span class="cm-spacer"></span>
+    <span class="cm-pill cm-cost" id="cm-cost" style="display:none"></span>
+  </div>
   <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 this repo</button>
@@ -1244,15 +2579,12 @@ ${SHARED_STYLES}
     <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" title="Auto-pick agent · codehere routes. Override below."><option value="">Auto-pick agent</option></select>
+    <select id="agent" title="codehere picks the right tool unless you override"><option value="">Auto-pick</option></select>
     <input type="text" id="cwd" class="cwd" placeholder="folder" spellcheck="false" />
     <button class="continue-thread" id="continue-thread" type="button" disabled title="Send as a reply to the most recent task in this folder (Slack-shape spike)">Continue thread</button>
     <button class="spawn" id="spawn">Assign new</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 = Assign new · ⌘+Shift+Enter = Continue thread</span>
-  </div>
 </div>
 
 <!-- Apr 29 — UX overhaul: readiness banner + stats demoted below intake.
@@ -1260,22 +2592,28 @@ ${SHARED_STYLES}
      Goal: textarea is the focal point above the fold; chrome subordinates. -->
 <div class="readiness" id="readiness" style="position:relative;z-index:1"></div>
 
+<!-- May 6 2026 design polish (Tier 1 #3) + dogfood Bug A3 fix:
+     The prior 4-stat row mixed two definitions of "agents" (the AGENTS
+     right-pane shows installed-and-ready agents; "agents on machine" stat
+     showed F1d-detected running processes — empty in practice) producing
+     a contradiction visible to users (e.g. "0 agents on machine" while the
+     right pane shows 6). Plus "blocked" was almost always 0 and "avg trust
+     100" had no signal. Per Open-Agents production-grade reference and
+     claim_user_persona (HIGH non-technical-first): subtract dashboard noise.
+     Keep only the one stat that varies meaningfully — actions today —
+     rendered as a quiet muted line. The other IDs stay in the DOM (hidden)
+     so existing setText calls in updateBanner don't NPE. -->
 <div class="stats-line empty" id="audit-summary" style="position:relative;z-index:1">
   <span><b id="as-actions">0</b> actions today</span>
-  <span class="sep">·</span>
-  <span><b id="sb-detected">0</b> agents on machine</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>
-  <!-- Hidden but kept in DOM so existing JS that updates these IDs doesn't error -->
-  <span style="display:none"><span id="sb-running">0</span><span id="sb-blocked">0</span><span id="sb-last">—</span><span id="as-agents">0</span></span>
 </div>
 
-<div class="glow-line" style="position:relative;z-index:1"></div>
-
+<!-- UX-simplification iter 3 (May 7): dropped the .glow-line peach
+     divider here. The .section-label "Sessions" below already provides
+     visual separation; an extra 1px gradient line was decoration not
+     information. -->
 <div class="section-label" style="position:relative;z-index:1">Sessions</div>
 <div id="sessions" style="position:relative;z-index:1"></div>
+<button class="show-more-sessions" id="show-more-sessions" type="button">Show all sessions</button>
 <div id="empty">
   <div class="pill">No sessions yet. Assign one above.</div>
 </div>
@@ -1301,6 +2639,170 @@ ${SHARED_STYLES}
   const emptyEl = document.getElementById('empty');
   const sessions = new Map(); // sessionId → { card, logEl, unsubscribeSse }
 
+  // v0.6 S2 — first-time onboarding card. Show ONLY when:
+  //   (a) localStorage flag codehere.onboarded is unset, AND
+  //   (b) no sessions yet (empty-state).
+  // Hide when user dismisses (sets flag) OR when first session attaches.
+  var obCard = document.getElementById('onboarding-card');
+  var obClose = document.getElementById('ob-close');
+  var ONBOARDED_KEY = 'codehere.onboarded';
+  function isOnboarded() {
+    try { return window.localStorage.getItem(ONBOARDED_KEY) === '1'; }
+    catch (_) { return false; }
+  }
+  function markOnboarded() {
+    try { window.localStorage.setItem(ONBOARDED_KEY, '1'); }
+    catch (_) { /* private mode: persist for the session via the var below */ }
+  }
+  function maybeShowOnboarding() {
+    if (!obCard) return;
+    if (isOnboarded()) { obCard.style.display = 'none'; return; }
+    obCard.style.display = '';
+  }
+  function dismissOnboarding() {
+    if (!obCard) return;
+    obCard.style.display = 'none';
+    markOnboarded();
+  }
+  if (obClose) obClose.addEventListener('click', dismissOnboarding);
+  // Render decision runs immediately + after first sessions fetch
+  // (which sets sessions Map). Hide if any sessions already exist
+  // (returning user — onboarding doesn't help).
+  maybeShowOnboarding();
+
+  // Pattern 5 — composer meta line wiring. Live-updates: agent label,
+  // context-budget %, cost preview. Bound below to the input surfaces
+  // (prompt textarea, agent select). UX-simplification iter (May 7):
+  // dropped cm-cwd pill — cwd input below is the authoritative surface.
+  const cmAgentEl = document.getElementById('cm-agent');
+  const cmBudgetEl = document.getElementById('cm-budget');
+  const cmCostEl = document.getElementById('cm-cost');
+  // v0.6 S3 slice 1 — today's spend chip. Lives next to the context-budget
+  // chip; hidden until the first non-zero spend lands so a fresh-install
+  // dashboard isn't cluttered. Polled, not pushed (events would need
+  // server-side fanout).
+  const cmSpendEl = document.getElementById('cm-spend');
+  function refreshSpendToday() {
+    if (!cmSpendEl) return;
+    fetch('/api/spend/today')
+      .then(function(r) { return r.ok ? r.json() : null; })
+      .then(function(d) {
+        if (!d || typeof d.totalUsd !== 'number') return;
+        // Show the chip when EITHER spend > 0 OR a budget is set (so the
+        // user sees "$0.00 / $5.00" right after \`codehere budget set 5\`).
+        var budget = d.budget || {};
+        var hasBudget = budget.dailyUsd !== null && typeof budget.dailyUsd === 'number';
+        if (d.totalUsd <= 0 && d.sessionCount === 0 && !hasBudget) {
+          cmSpendEl.style.display = 'none';
+          return;
+        }
+        cmSpendEl.style.display = 'inline-flex';
+        var b = cmSpendEl.querySelector('b');
+        if (b) {
+          var dollars = d.totalUsd;
+          var spendStr = dollars >= 0.01 ? '$' + dollars.toFixed(2) : '$' + dollars.toFixed(3);
+          // When a budget is set, render "$X.XX / $Y" so the ceiling is visible.
+          b.textContent = hasBudget
+            ? spendStr + ' / $' + budget.dailyUsd.toFixed(2)
+            : spendStr;
+        }
+        // Color state — warn at warnAtPct, block when over.
+        var state = 'ok';
+        if (hasBudget) {
+          if (budget.over) state = 'block';
+          else if (typeof budget.pctUsed === 'number' && budget.pctUsed >= (budget.warnAtPct || 70)) state = 'warn';
+        }
+        cmSpendEl.dataset.state = state;
+        // Tooltip: per-agent breakdown + budget context if set.
+        var lines = ['Estimated spend today across ' + d.sessionCount + ' completed session' + (d.sessionCount === 1 ? '' : 's') + ':'];
+        var keys = Object.keys(d.byAgent || {});
+        keys.sort(function(a, b) { return (d.byAgent[b].usd || 0) - (d.byAgent[a].usd || 0); });
+        for (var i = 0; i < keys.length; i++) {
+          var k = keys[i];
+          var v = d.byAgent[k];
+          lines.push('  ' + k + ': $' + (v.usd >= 0.01 ? v.usd.toFixed(2) : v.usd.toFixed(3)) + ' (' + v.sessions + 'x)');
+        }
+        if (hasBudget) {
+          lines.push('');
+          lines.push('Daily budget: $' + budget.dailyUsd.toFixed(2) + ' (' + (budget.pctUsed || 0) + '% used)');
+          if (budget.over) {
+            lines.push('OVER BUDGET — paid spawns will be refused. Use a free agent (gemini, opencode) or run: codehere budget set <higher-amount>');
+          }
+        }
+        lines.push('Vendor dashboards are authoritative — these are tier-ceiling estimates.');
+        cmSpendEl.title = lines.join('\\n');
+      })
+      .catch(function() { /* skip */ });
+  }
+  // Refresh on dashboard load + every 60s (sessions complete async, no point
+  // polling faster than per-minute).
+  refreshSpendToday();
+  setInterval(refreshSpendToday, 60_000);
+
+  // Free-tier agents per feedback_adapters_must_have_free_tier.md. Cost
+  // preview hides for these (the user pays nothing per call). Conductor
+  // routes to one of the specialists, so its cost mirrors the picked one.
+  const FREE_TIER_AGENTS = new Set(['gemini', 'opencode']);
+
+  // Per-agent rough cost estimate ($ per 1K input + 1K output tokens combined).
+  // These are CEILINGS for ballpark ("~$0.0X likely") not precise — adapter
+  // doesn't surface model selection, so the heuristic uses a balanced-tier
+  // assumption. Better to under-promise; users care about scale-of-magnitude.
+  const COST_PER_KTOK = {
+    'claude-code': 0.018, // sonnet-tier balanced
+    'codex':       0.020, // gpt-5-codex balanced
+    'aider':       0.018, // typically sonnet
+    'conductor':   0.018, // routes to claude-code by default
+  };
+
+  function syncComposerMeta() {
+    if (!cmAgentEl || !cmBudgetEl) return;
+    // Resolve agent label. Empty value = Conductor-Auto routing.
+    var pickedId = (agentSelect && agentSelect.value) || '';
+    var label = pickedId
+      ? agentLabel(pickedId)
+      : 'Auto';
+    cmAgentEl.querySelector('b').textContent = label;
+    // Context budget — char-count / 800K (≈ 200K-token Sonnet budget).
+    // Cap at 100. --warn at 70, --block at 90 per spec.
+    var chars = (promptEl && promptEl.value && promptEl.value.length) || 0;
+    var pct = Math.min(100, Math.round((chars / 8000)));
+    var budgetState = pct >= 90 ? 'block' : pct >= 70 ? 'warn' : 'ok';
+    cmBudgetEl.dataset.state = budgetState;
+    cmBudgetEl.querySelector('b').textContent = pct + '%';
+    // Cost preview (paid agents only). Auto resolves to the conductor, so
+    // pick the cheapest balanced-tier estimate when no agent is set.
+    if (!cmCostEl) return;
+    var effective = pickedId || 'conductor';
+    if (FREE_TIER_AGENTS.has(effective)) {
+      cmCostEl.style.display = 'inline-flex';
+      cmCostEl.className = 'cm-pill cm-cost free';
+      cmCostEl.innerHTML = '<b>free tier</b>';
+      cmCostEl.title = effective + ' has a free tier — no per-call billing';
+    } else if (COST_PER_KTOK[effective] && chars > 20) {
+      // Rough heuristic: input tokens ≈ chars/4, output ~2× input for code
+      // tasks; clamp to a sensible floor. Show 2 decimals when > 0.01,
+      // 3 decimals otherwise so 4¢ doesn't render as "$0.04".
+      var inputTok = Math.ceil(chars / 4);
+      var outputTok = Math.max(500, Math.min(3000, inputTok * 2));
+      var totalK = (inputTok + outputTok) / 1000;
+      var dollars = totalK * COST_PER_KTOK[effective];
+      var dollarsStr = dollars >= 0.01
+        ? '~$' + (Math.round(dollars * 100) / 100).toFixed(2)
+        : '~$' + (Math.round(dollars * 1000) / 1000).toFixed(3);
+      cmCostEl.style.display = 'inline-flex';
+      cmCostEl.className = 'cm-pill cm-cost paid';
+      cmCostEl.innerHTML = '<b>' + dollarsStr + '</b><span> est.</span>';
+      cmCostEl.title = 'Estimate: ' + inputTok + ' input + ~' + outputTok + ' output tokens at balanced-tier rates';
+    } else {
+      cmCostEl.style.display = 'none';
+    }
+  }
+  if (promptEl) promptEl.addEventListener('input', syncComposerMeta);
+  if (agentSelect) agentSelect.addEventListener('change', syncComposerMeta);
+  // Initial paint.
+  syncComposerMeta();
+
   // 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
@@ -1331,14 +2833,30 @@ ${SHARED_STYLES}
     const sorted = [...agentReadiness].sort((a, b) => (weight[a.state] ?? 99) - (weight[b.state] ?? 99));
     const autoState = autoReadiness ? autoReadiness.state : 'ready';
     const autoGlyph = autoState === 'ready' ? '⚡' : (STATE_GLYPH[autoState] || '⚠');
-    const autoLabel = autoState === 'ready' ? 'Auto · codehere routes' : 'Auto · install an agent first';
+    const autoLabel = autoState === 'ready' ? 'Auto-pick (codehere picks for you)' : 'Auto-pick (install an agent first)';
     const autoOption = '<option value="" selected>' + autoGlyph + ' ' + autoLabel + '</option>';
-    const specialistOptions = sorted.map(a =>
-      '<option value="' + escape(a.id) + '">' +
-      (STATE_GLYPH[a.state] || '·') + ' ' + escape(a.label) +
-      '</option>'
-    ).join('');
-    agentSelect.innerHTML = autoOption + specialistOptions;
+    const specialistOptions = sorted.map(a => {
+      // v0.6 S5 — adapter description surfaces as the option's hover title so
+      // non-technical users get a plain-English "when to use me" hint without
+      // having to read docs. Falls back to label-only when adapter has none.
+      const titleAttr = a.description
+        ? ' title="' + escape(a.description) + '"'
+        : '';
+      return '<option value="' + escape(a.id) + '"' + titleAttr + '>' +
+        (STATE_GLYPH[a.state] || '·') + ' ' + escape(a.label) +
+        '</option>';
+    }).join('');
+    // M5 slice 2 — fan-out option. Sends the same prompt to every
+    // installed specialist in parallel via /api/task/batch. Per
+    // claim_codehere_shape v5 + Decision 22 (every coding agent a
+    // first-class member), cross-check spawning is the v1.0 value
+    // prop. Hidden when fewer than 2 specialists are ready (no
+    // parallel value with one). Capped at 5 by the batch endpoint.
+    const readyCount = sorted.filter(a => a.state === 'ready').length;
+    const fanOutOption = readyCount >= 2
+      ? '<option value="*">⚡⚡ Send to every installed agent (' + readyCount + ' in parallel)</option>'
+      : '';
+    agentSelect.innerHTML = autoOption + fanOutOption + specialistOptions;
     // Trigger the panel render for whatever is selected first
     updateSetupPanel();
   }
@@ -1532,6 +3050,7 @@ ${SHARED_STYLES}
                          (a.state || 'unknown');
       return '<div class="member" data-agent-id="' + escape(a.id) + '" title="' + escape(stateTitle) + '">' +
         '<span class="member-presence ' + cls + '">' + glyph + '</span>' +
+        agentBadgeHTML(a.id) + ' ' +
         '<span class="member-label">' + escape(a.label || a.id) + '</span>' +
       '</div>';
     }).join('');
@@ -1565,22 +3084,147 @@ ${SHARED_STYLES}
   // 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;
+
+  // Track daemon cwd for active-channel highlight in the projects sidebar.
+  // Refreshed on every /api/readiness call; multi-project sidebar reads it.
+  let daemonCwdForActive = null;
+
   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
-      // Apr 29 — Slack-shape channels pane: surface the daemon cwd as the
-      // current "channel" name + path. Multi-project ships in a later release.
-      const nameEl = document.getElementById('current-channel-name');
-      const cwdEl = document.getElementById('current-channel-cwd');
-      if (nameEl) {
-        const parts = String(daemonCwd).split('/').filter(Boolean);
-        nameEl.textContent = parts[parts.length - 1] || 'project';
-      }
-      if (cwdEl) cwdEl.textContent = daemonCwd;
+      daemonCwdForActive = daemonCwd;
+      loadDashboardProjects(); // re-render sidebar now that we know which project is "active"
     }
   }).catch(() => { /* placeholder unchanged */ });
+
+  // Multi-project sidebar — bug A1 fix (May 5 2026). Pre-fix: sidebar showed
+  // a single hardcoded "current" channel that was un-clickable; users hit it
+  // expecting to switch projects. Post-fix: real /api/projects load, click
+  // navigates to /threads?project=<slug> (where the actual thread surface
+  // lives), pencil rename works inline, active state matches daemon cwd.
+  function shortPathDash(p) {
+    if (!p) return '';
+    const home = (window.location && window.location.hostname) ? '~' : '~';
+    if (p.length <= 32) return p;
+    const parts = p.split('/').filter(Boolean);
+    if (parts.length <= 2) return p;
+    return '…/' + parts.slice(-2).join('/');
+  }
+  function escapeHtmlDash(s) {
+    if (s == null) return '';
+    return String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  }
+  function renderDashboardProjects(list) {
+    const wrap = document.getElementById('channels-list');
+    const countEl = document.getElementById('channels-count');
+    if (!wrap) return;
+    if (countEl) countEl.textContent = list.length;
+    if (list.length === 0) {
+      wrap.innerHTML = '<div class="pane-empty">No projects yet</div>';
+      return;
+    }
+    wrap.innerHTML = list.map(p => {
+      const isActive = (daemonCwdForActive && p.cwd === daemonCwdForActive) ? ' active' : '';
+      const name = escapeHtmlDash(p.title || '(untitled)');
+      const cwdHint = escapeHtmlDash(shortPathDash(p.cwd));
+      // Pattern 4 — multi-agent presence stack. Up to 3 dots (most-recent
+      // first, deduped). Empty span when no agents in the thread (older
+      // pre-mirror projects). agentPresenceDotHTML lives in AGENT_BADGE_JS;
+      // each dot is 6px, vendor-slot color, no letter.
+      const agents = Array.isArray(p.recentAgents) ? p.recentAgents : (p.lastAgent ? [p.lastAgent] : []);
+      const presenceStack = agents.length > 0
+        ? '<span class="presence-stack" title="Recent agents: ' + escapeHtmlDash(agents.join(', ')) + '">' +
+            agents.map(a => agentPresenceDotHTML(a)).join('') +
+          '</span>'
+        : '<span class="presence-stack presence-stack-empty"></span>';
+      return '<div class="channel' + isActive + '" data-slug="' + escapeHtmlDash(p.slug) + '" title="Open project thread">' +
+        '<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>' +
+        presenceStack +
+        '<button class="channel-rename" data-slug="' + escapeHtmlDash(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('');
+    wrap.querySelectorAll('.channel').forEach(el => {
+      el.addEventListener('click', (ev) => {
+        if (ev.target && ev.target.classList && ev.target.classList.contains('channel-rename')) return;
+        const slug = el.getAttribute('data-slug');
+        if (slug) window.location.href = '/threads?project=' + encodeURIComponent(slug);
+      });
+    });
+    wrap.querySelectorAll('.channel-rename').forEach(btn => {
+      btn.addEventListener('click', (ev) => {
+        ev.stopPropagation();
+        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, () => loadDashboardProjects());
+      });
+    });
+  }
+  // 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');
+          // Force reflow so animation re-fires
+          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 loadDashboardProjects() {
+    fetch('/api/projects')
+      .then(r => r.ok ? r.json() : Promise.reject(r.status))
+      .then(data => renderDashboardProjects(data.projects || []))
+      .catch(() => { /* leave loading state */ });
+  }
+  loadDashboardProjects();
   cwdInput.addEventListener('change', () => {
     localStorage.setItem('codehere:cwd', cwdInput.value.trim());
   });
@@ -1772,15 +3416,53 @@ ${SHARED_STYLES}
     logEl.scrollTop = logEl.scrollHeight;
   }
 
+  // Status display labels: keep the underlying status string ('killed', 'error')
+  // as the data-layer truth, but map to a calmer human label. May 6 2026 polish
+  // per Open-Agents reference + claim_user_persona (non-technical readers
+  // don't think of their work as "KILLED" — they think "I stopped it").
+  // Pattern 6 · macro state → user-visible copy. Plain English; non-technical-
+  // first per claim_user_persona HIGH. Each state's CSS class is the same
+  // string with hyphens (e.g. status === 'rate_limit' → class="status-pill
+  // rate-limit"); CSS classes can't contain underscores cleanly, so the
+  // wire-format state has underscores and the class form has hyphens.
+  // Per docs/design/AGENTIC_UX.md Pattern 6.
+  var STATE_LABELS = {
+    'thinking':         'Thinking',
+    'running':          'Running',
+    'running_buffered': 'Running (buffered)',
+    'completed':        'Done',
+    'awaiting':         'Waiting on you',
+    'blocked':          'Blocked',
+    'killed':           'Stopped',
+    'crashed':          'Crashed',
+    'error':            'Failed',
+    'failed':           'Failed',
+    'rate_limit':       'Rate-limited',
+    'quota_exceeded':   'Quota exceeded',
+    'credit_low':       'Credits low',
+    'auth_invalid':     'Sign-in needed',
+    'auth_missing':     'Sign-in needed',
+    'model_unavailable':'Model unavailable'
+  };
+  function statusLabel(status) {
+    if (!status) return 'Unknown';
+    if (STATE_LABELS[status]) return STATE_LABELS[status];
+    return status.charAt(0).toUpperCase() + status.slice(1);
+  }
+  // Convert wire-format state ('rate_limit') to CSS class form ('rate-limit').
+  function statusClass(status) {
+    return String(status || '').replace(/_/g, '-');
+  }
   function updateStatus(pillEl, status) {
-    pillEl.className = 'status-pill ' + status;
-    pillEl.textContent = status;
+    pillEl.className = 'status-pill ' + statusClass(status);
+    pillEl.textContent = statusLabel(status);
   }
 
-  function agentLabel(id) {
-    const labels = { 'claude-code': 'Claude Code', 'codex': 'Codex', 'aider': 'Aider', 'kiro': 'Kiro' };
-    return labels[id] || id || 'agent';
-  }
+  // Per-agent badge helpers (agentLabel, AGENT_SLOTS, AGENT_ICONS,
+  // agentBadgeHTML, agentPresenceDotHTML) interpolated from AGENT_BADGE_JS
+  // — single source of truth shared with THREAD_HTML and any other page
+  // that needs vendor-attribution rendering. Per Pattern 10.
+${AGENT_BADGE_JS}
 
   function attachSession(session) {
     const card = document.createElement('div');
@@ -1795,17 +3477,20 @@ ${SHARED_STYLES}
       '<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() +
+          '<div class="sub">' + liveDot + agentBadgeHTML(session.agent) + ' ' + escape(agentLabel(session.agent)) +
+            (session.cwd ? ' · <span class="sub-cwd" title="' + escape(session.cwd) + '">' + escape(cwdTail(session.cwd)) + '</span>' : '') +
+            ' · ' + 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="tool-progress-chip" data-state="hidden"></div>' +
+          '<div class="micro-activity"></div>' +
           '<div class="steps-mini"></div>' +
         '</div>' +
         '<div class="session-controls">' +
@@ -1813,7 +3498,7 @@ ${SHARED_STYLES}
             '<button class="view-thread active" data-view="thread">Thread</button>' +
             '<button class="view-raw" data-view="raw">Log</button>' +
           '</div>' +
-          '<span class="status-pill ' + session.status + runningClass + '">' + session.status + '</span>' +
+          '<span class="status-pill ' + session.status + runningClass + '">' + statusLabel(session.status) + '</span>' +
           '<button class="kill">Kill</button>' +
         '</div>' +
       '</div>' +
@@ -1824,6 +3509,23 @@ ${SHARED_STYLES}
         // so on completed sessions the Final Report appeared above the user's
         // seed prompt, breaking chronological order in thread view.
         '<div class="thread-messages"></div>' +
+        // P18 slice 4 — permission-gate stack. Empty container; panels
+        // get inserted by the per-session blocks poll when the per-tool
+        // hook fires for this session. Each block becomes one panel with
+        // an "Approve in this folder" button.
+        '<div class="permission-gates"></div>' +
+        // v0.6 M3 — PM narrator block. Hidden until first narration
+        // arrives; renders one paragraph plain-English of what the
+        // agent is doing right now. Per claim_user_persona HIGH:
+        // non-technical users read this, not the tool calls.
+        // Per feedback_overconfidence_guard.md: framed as "narrator"
+        // not authoritative truth — narration is an LLM call, may
+        // hallucinate.
+        '<div class="narrator-block" style="display:none">' +
+          '<div class="narrator-label">narrator</div>' +
+          '<div class="narrator-text"></div>' +
+          '<div class="narrator-meta"></div>' +
+        '</div>' +
         '<div class="final-report" style="display:none"></div>' +
         // Iter 12 — reply surface now functional; replaced the prior dead
         // placeholder. Active for adapters with canAppendMessage=true
@@ -1835,16 +3537,291 @@ ${SHARED_STYLES}
           '<div class="reply-status" style="display:none"></div>' +
         '</div>' +
         '<div class="event-log"></div>' +
+      '</div>' +
+      // Pattern 3 — session footer. Hidden until populated (data-empty=true);
+      // renderToolProgress flips it to data-empty=false once steps appear.
+      '<div class="session-foot" data-empty="true">' +
+        '<span class="sf-item sf-elapsed"><b>0s</b><span>elapsed</span></span>' +
+        '<span class="sf-sep">·</span>' +
+        '<span class="sf-item sf-tools"><b>0</b><span>tools</span></span>' +
+        '<span class="sf-sep">·</span>' +
+        '<span class="sf-item sf-files"><b>0</b><span>files</span></span>' +
       '</div>';
 
     sessionsEl.prepend(card);
     emptyEl.style.display = 'none';
+    // v0.6 S2 — first session attached means user has done step 1+2;
+    // dismiss the onboarding card. They can re-open by clearing local
+    // storage, but for the typical flow this is "I'm using it now".
+    dismissOnboarding();
 
     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 microActivityEl = card.querySelector('.micro-activity');
+    const toolProgressEl = card.querySelector('.tool-progress-chip');
+    // Pattern 1 — tool-progress live chip. Renders "12 tools | 3/4 ●●●○ | Ns".
+    // Sources from the same codehere:steps synthetic event renderSteps reads.
+    function fmtElapsed(ms) {
+      var s = Math.max(0, Math.floor(ms / 1000));
+      if (s < 60) return s + 's';
+      var m = Math.floor(s / 60);
+      var rem = s % 60;
+      if (m < 60) return rem ? m + 'm ' + rem + 's' : m + 'm';
+      var h = Math.floor(m / 60);
+      return h + 'h ' + (m % 60) + 'm';
+    }
+    function renderToolProgress(steps) {
+      if (!toolProgressEl) return;
+      if (!Array.isArray(steps) || steps.length === 0) {
+        toolProgressEl.dataset.state = 'hidden';
+        toolProgressEl.innerHTML = '';
+        return;
+      }
+      // Compute counts + state.
+      var done = 0, active = 0, failed = 0, pending = 0;
+      for (var i = 0; i < steps.length; i++) {
+        var st = String(steps[i].state || '');
+        if (st === 'done') done++;
+        else if (st === 'active') active++;
+        else if (st === 'failed') failed++;
+        else pending++;
+      }
+      var total = steps.length;
+      var chipState;
+      if (failed > 0)                  chipState = 'failed';
+      else if (session.status !== 'running') chipState = (done === total ? 'complete' : 'paused');
+      else if (active > 0)             chipState = 'running';
+      else                             chipState = 'paused';
+
+      // Dot pattern — last 6 steps, oldest first. ● = done, ◐ = active,
+      // ○ = pending, ✗ = failed. Cap at 6 so the chip doesn't grow.
+      var tail = steps.slice(-6);
+      var dots = tail.map(function(s) {
+        var st = String(s.state || '');
+        if (st === 'done')   return '●';
+        if (st === 'active') return '◐';
+        if (st === 'failed') return '✗';
+        return '○';
+      }).join('');
+
+      var elapsed = fmtElapsed(Date.now() - session.startedAt);
+      toolProgressEl.dataset.state = chipState;
+      toolProgressEl.innerHTML =
+        '<span>' + total + ' tool' + (total === 1 ? '' : 's') + '</span>' +
+        '<span class="tp-sep">|</span>' +
+        '<span>' + done + '/' + total + ' <span class="tp-dots">' + dots + '</span></span>' +
+        '<span class="tp-sep">|</span>' +
+        '<span class="tp-elapsed">' + elapsed + '</span>';
+
+      // Pattern 3 — keep the footer in sync with the same step data the
+      // chip reads. Cheaper than a separate event subscription and stays
+      // structurally consistent with the live counts above.
+      renderSessionFoot(steps);
+    }
+    // Pattern 3 — session-foot: elapsed · tools · files. Reveals on first
+    // step; updates counts on every renderSteps call. Read-only — no
+    // click affordance (rec'y / file-list belong elsewhere).
+    var sessionFootEl = card.querySelector('.session-foot');
+    function renderSessionFoot(steps) {
+      if (!sessionFootEl) return;
+      if (!Array.isArray(steps) || steps.length === 0) {
+        sessionFootEl.dataset.empty = 'true';
+        return;
+      }
+      sessionFootEl.dataset.empty = 'false';
+      var elapsed = session.completedAt
+        ? fmtElapsed(session.completedAt - session.startedAt)
+        : fmtElapsed(Date.now() - session.startedAt);
+      var elapsedB = sessionFootEl.querySelector('.sf-elapsed b');
+      var toolsB = sessionFootEl.querySelector('.sf-tools b');
+      var filesB = sessionFootEl.querySelector('.sf-files b');
+      if (elapsedB) elapsedB.textContent = elapsed;
+      if (toolsB) toolsB.textContent = String(steps.length);
+      if (filesB) filesB.textContent = String(countTouchedFiles(steps));
+    }
+    // Tick elapsed display every second while running so the chip feels live.
+    var elapsedTicker = null;
+    function startElapsedTick() {
+      if (elapsedTicker) return;
+      elapsedTicker = setInterval(function() {
+        if (!toolProgressEl || toolProgressEl.dataset.state === 'hidden') return;
+        var elEl = toolProgressEl.querySelector('.tp-elapsed');
+        if (elEl) elEl.textContent = fmtElapsed(Date.now() - session.startedAt);
+      }, 1000);
+    }
+    function stopElapsedTick() {
+      if (elapsedTicker) { clearInterval(elapsedTicker); elapsedTicker = null; }
+    }
+    if (session.status === 'running') startElapsedTick();
+
+    // v0.6 M3 — PM narrator polling. Backend generates a one-paragraph
+    // mid-task summary every 30s while the session runs; frontend polls
+    // /api/task/:id/narration and renders it in the narrator-block.
+    // Per claim_user_persona: non-technical users read narration, not
+    // tool calls. Per overconfidence-guard: framed as "narrator", not
+    // authoritative truth.
+    var narrTicker = null;
+    var lastNarrAt = 0;
+    function pollNarration() {
+      fetch('/api/task/' + session.sessionId + '/narration')
+        .then(function(r) { return r.ok ? r.json() : null; })
+        .then(function(d) {
+          if (!d || !d.narration) return;
+          var n = d.narration;
+          if (n.generatedAt <= lastNarrAt) return; // unchanged
+          lastNarrAt = n.generatedAt;
+          var block = card.querySelector('.narrator-block');
+          if (!block) return;
+          var textEl = block.querySelector('.narrator-text');
+          var metaEl = block.querySelector('.narrator-meta');
+          if (textEl) textEl.textContent = n.summary;
+          if (metaEl) {
+            var ago = Math.max(0, Math.floor((Date.now() - n.generatedAt) / 1000));
+            metaEl.textContent = 'after ' + n.stepCountAtSnapshot + ' steps · ' + ago + 's ago · may be inaccurate';
+          }
+          block.style.display = 'block';
+        })
+        .catch(function() { /* skip */ });
+    }
+    function startNarrationTick() {
+      if (narrTicker) return;
+      pollNarration(); // immediate
+      narrTicker = setInterval(pollNarration, 30000);
+    }
+    function stopNarrationTick() {
+      if (narrTicker) { clearInterval(narrTicker); narrTicker = null; }
+    }
+    if (session.status === 'running') startNarrationTick();
+
+    // P18 slice 4 — poll /api/task/:id/blocks for hook-blocks against
+    // this session. Render one .permission-gate panel per unique block.
+    // De-dup by hash of category + matched + timestamp.
+    var blockTicker = null;
+    var seenBlockKeys = Object.create(null);
+    function escapeHtmlInline(s) {
+      return String(s == null ? '' : s).replace(/[&<>"']/g, function(c) {
+        return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
+      });
+    }
+    function renderBlockGate(block) {
+      // The block entry shape comes from the audit log; toolInput may be
+      // a JSON string with {agent, command, allowedByPermissions, ...}
+      var key = (block.timestamp || '') + '|' + (block.toolName || '') + '|' + (block.findings || 0);
+      if (seenBlockKeys[key]) return;
+      seenBlockKeys[key] = true;
+      var gateContainer = card.querySelector('.permission-gates');
+      if (!gateContainer) return;
+      // Pull a useful matched-text + cwd out of the block. The audit
+      // entry surfaces them in toolInput JSON shape.
+      var pattern = '';
+      var cwd = '';
+      try {
+        var parsedInput = typeof block.toolInput === 'string' ? JSON.parse(block.toolInput) : block.toolInput;
+        if (parsedInput && typeof parsedInput === 'object') {
+          // command (Bash) or file_path (Edit/Write) — best-effort
+          pattern = String(parsedInput.command || parsedInput.file_path || '');
+          cwd = String(parsedInput.cwd || '');
+        }
+      } catch (_) { /* not JSON */ }
+      var truncatedPattern = pattern.length > 200 ? pattern.slice(0, 200) + '…' : pattern;
+      var gate = document.createElement('div');
+      gate.className = 'permission-gate';
+      gate.innerHTML =
+        '<div class="pg-label">codehere noticed a pattern</div>' +
+        '<div class="pg-title">Is this expected here? You can approve it for this folder so future runs do not stop on the same pattern.</div>' +
+        '<div class="pg-detail">' + escapeHtmlInline(truncatedPattern || '(no command captured)') + '</div>' +
+        '<div class="pg-actions">' +
+          '<button type="button" class="pg-approve">Approve in this folder</button>' +
+          '<button type="button" class="pg-keep">Keep blocking</button>' +
+        '</div>' +
+        '<div class="pg-status">Approved · added to .codehere/permissions.yaml</div>';
+      gateContainer.appendChild(gate);
+      gate.querySelector('.pg-keep').addEventListener('click', function() {
+        gate.remove();
+      });
+      gate.querySelector('.pg-approve').addEventListener('click', function() {
+        var btn = gate.querySelector('.pg-approve');
+        btn.disabled = true;
+        btn.textContent = '…';
+        // Approve the EXACT pattern that triggered the block; reason
+        // captures the block's matched-finding context for the audit.
+        // Fall back to a substring of the command if no finding text.
+        var approvePattern = pattern;
+        var reasonSuffix = block.findings ? (block.findings + ' finding' + (block.findings === 1 ? '' : 's') + ' caught at this site') : 'caught by hook';
+        var reason = 'Approved via dashboard panel · ' + reasonSuffix;
+        if (!cwd) {
+          alert('Cannot approve: no cwd captured in the audit entry. Use codehere permission allow on the CLI.');
+          btn.disabled = false; btn.textContent = 'Approve in this folder';
+          return;
+        }
+        fetch('/api/permissions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ cwd: cwd, pattern: approvePattern, reason: reason }),
+        })
+          .then(function(r) { return r.ok ? r.json() : Promise.reject(r); })
+          .then(function() {
+            gate.classList.add('approved');
+          })
+          .catch(function() {
+            btn.disabled = false; btn.textContent = 'Approve in this folder';
+            alert('Approve failed — try the CLI: codehere permission allow ' + JSON.stringify(approvePattern));
+          });
+      });
+    }
+    function pollBlocks() {
+      fetch('/api/task/' + session.sessionId + '/blocks')
+        .then(function(r) { return r.ok ? r.json() : null; })
+        .then(function(d) {
+          if (!d || !Array.isArray(d.blocks)) return;
+          for (var i = 0; i < d.blocks.length; i++) renderBlockGate(d.blocks[i]);
+        })
+        .catch(function() { /* skip */ });
+    }
+    function startBlockTick() {
+      if (blockTicker) return;
+      pollBlocks();
+      blockTicker = setInterval(pollBlocks, 30000);
+    }
+    function stopBlockTick() {
+      if (blockTicker) { clearInterval(blockTicker); blockTicker = null; }
+    }
+    if (session.status === 'running') startBlockTick();
+
+    // Pattern 13 — start whimsy rotator only while status === 'running' and
+    // there's no active tool step. stopWhimsy() runs on exit (or on every
+    // active-step swap; we restart it when the active step ends).
+    var stopWhimsy = null;
+    var lastMode = ''; // 'whimsy' | 'tool' | ''
+    function setMicroState(mode, label) {
+      if (!microActivityEl) return;
+      if (mode === '') {
+        if (stopWhimsy) { stopWhimsy(); stopWhimsy = null; }
+        microActivityEl.classList.remove('live', 'tool');
+        microActivityEl.textContent = '';
+        lastMode = '';
+        return;
+      }
+      if (mode === 'tool') {
+        if (stopWhimsy) { stopWhimsy(); stopWhimsy = null; }
+        microActivityEl.classList.add('live', 'tool');
+        microActivityEl.textContent = label || 'Working…';
+        lastMode = 'tool';
+        return;
+      }
+      // mode === 'whimsy'
+      microActivityEl.classList.add('live');
+      microActivityEl.classList.remove('tool');
+      if (lastMode !== 'whimsy') {
+        if (stopWhimsy) stopWhimsy();
+        stopWhimsy = startWhimsyRotator(microActivityEl);
+        lastMode = 'whimsy';
+      }
+    }
+    if (session.status === 'running') setMicroState('whimsy');
     const finalReportEl = card.querySelector('.final-report');
     const threadEl = card.querySelector('.thread-messages');
     const bodyEl = card.querySelector('.session-body');
@@ -2077,8 +4054,12 @@ ${SHARED_STYLES}
     // 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) {
+      // Pattern 1 — update the tool-progress chip on every step snapshot.
+      renderToolProgress(steps);
       if (!Array.isArray(steps) || steps.length === 0) {
         stepsEl.innerHTML = '';
+        // Pattern 13: no steps + still running → keep whimsy rotation alive.
+        if (session.status === 'running' && lastMode !== 'whimsy') setMicroState('whimsy');
         return;
       }
       const tail = steps.slice(-3);
@@ -2088,9 +4069,60 @@ ${SHARED_STYLES}
         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>';
+          // Pattern 2 — derive tool kind + split label so the verb-color
+          // semantic CSS applies (read/grep muted, write/edit green, bash
+          // peach). Falls back to a single .verb span when label is one word.
+          // Pattern 14 — smart-truncate the target per tool kind so the
+          // meaningful chunk survives the trace's narrow column.
+          const kind = inferToolKind(s.label);
+          const parts = splitStepLabel(String(s.label || ''));
+          const truncatedTarget = truncateTarget(kind, parts.target);
+          const labelHtml = truncatedTarget
+            ? '<span class="verb">' + escape(parts.verb) + '</span><span class="target">' + escape(truncatedTarget) + '</span>'
+            : '<span class="verb">' + escape(parts.verb) + '</span>';
+          // P22 / Track B #8 — bash output preview. Render last 4
+          // lines of step.output under the step header. Only shows
+          // for done/failed steps (active steps don't have output yet).
+          // Note: split-on-newline uses fromCharCode(10) to dodge the
+          // outer TS template literal eating the backslash-n.
+          var outputHtml = '';
+          if (s.output && (st === 'done' || st === 'failed')) {
+            var lines = String(s.output).split(String.fromCharCode(10));
+            var tailLines = lines.slice(-4);
+            outputHtml = '<div class="step-output">' +
+              tailLines.map(function(ln) { return escape(ln); }).join('<br>') +
+              '</div>';
+          }
+          return '<div class="step ' + st + '" data-tool="' + escape(kind) + '"><span class="ico">' + g + '</span>' + labelHtml + outputHtml + '</div>';
         }).join('') +
         (more > 0 ? '<div class="more">+ ' + more + ' earlier</div>' : '');
+
+      // Pattern 13: tool-prefixed verb takes over while a step is active.
+      // Most-recent active step's label becomes the micro-activity text;
+      // when no step is active we fall back to whimsy rotation.
+      // Pattern 17: if the active step's elapsed > 5s, append a "· Ns"
+      // suffix so the user can see how long this single tool has been
+      // running. Simple slice — doesn't yet upgrade to the bar / ESC hint
+      // at 15-30s thresholds; that's deferred until the affordance
+      // demands it in real dogfood.
+      const active = steps.filter(s => String(s.state || '') === 'active').slice(-1)[0];
+      if (active && session.status === 'running') {
+        let label = String(active.label || 'Working on it…');
+        const startedAt = Number(active.startedAt || 0);
+        if (startedAt > 0) {
+          const elapsedSec = Math.floor((Date.now() - startedAt) / 1000);
+          if (elapsedSec >= 5) {
+            // Use fmtElapsed for consistency with the chip's elapsed format.
+            label += '  ·  ' + fmtElapsed(Date.now() - startedAt);
+            if (elapsedSec >= 30) label += '  ·  ESC to cancel';
+          }
+        }
+        setMicroState('tool', label);
+      } else if (session.status === 'running') {
+        setMicroState('whimsy');
+      } else {
+        setMicroState('');
+      }
     }
 
     // Layer 3: render the final report block when the task completes.
@@ -2138,16 +4170,29 @@ ${SHARED_STYLES}
         html += '<div class="fr-summary fr-summary-pending"><p>Final Report unavailable for this session. (Most often this means the daemon restarted — reports aren\\'t persisted yet. Re-spawn to get a fresh one.)</p></div>';
       }
       if (files.length > 0) {
+        // Pattern 7 — file chip with mutation tint, trust grade letter,
+        // diff stats. Mutation kind derives from added/removed counts so
+        // the file-icon color signals "create / edit / delete" at glance.
+        const FILE_ICON_SVG = '<svg class="file-icon" viewBox="0 0 14 14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"><path d="M3 1 L9 1 L11.5 3.5 L11.5 13 L3 13 Z"/><path d="M9 1 L9 3.5 L11.5 3.5"/></svg>';
+        const trustGrade = (n) => n >= 90 ? 'A' : n >= 75 ? 'B' : n >= 60 ? 'C' : n >= 40 ? 'D' : 'F';
         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">' +
+          const added = Number(f.added || 0);
+          const removed = Number(f.removed || 0);
+          let mutation;
+          if (added > 0 && removed === 0)      mutation = 'write';
+          else if (added === 0 && removed > 0) mutation = 'delete';
+          else                                  mutation = 'edit';
+          const lines = '<span class="add">+' + added + '</span> <span class="rem">−' + removed + '</span>';
+          // Pattern 11 — file chip uses the standalone trust-badge helper
+          // instead of inline class-picking. Single source of truth for
+          // grade-cutoff + color-split. (Note: this CORRECTS the prior
+          // 60-cutoff which put D-grade trust in red; spec puts D in
+          // warn-yellow.)
+          return '<div class="fr-file" data-mutation="' + escape(mutation) + '">' +
+            FILE_ICON_SVG +
             '<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>' +
+            trustBadgeHTML(typeof f.trust === 'number' ? f.trust : null) +
           '</div>';
         }).join('') + '</div>';
       } else {
@@ -2179,7 +4224,10 @@ ${SHARED_STYLES}
     // 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
+      // Use .persisted (visible, faded). Pre-fix this added .observed
+      // which then collided with the detected-process hide rule from
+      // claim_user_persona work — your own past sessions disappeared.
+      card.classList.add('persisted');
       return;
     }
 
@@ -2192,11 +4240,57 @@ ${SHARED_STYLES}
         if (event.type === 'codehere:steps') { renderSteps(event.data?.steps); return; }
         if (event.type === 'codehere:artifacts') { renderArtifacts(event.data, undefined, session.status, session.completedAt); 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.
+        // Pattern 6 · codehere:error events carry a structured code that maps
+        // 1:1 to a macro state. rate_limit / quota_exceeded / credit_low /
+        // auth_invalid / model_unavailable each get their own pill copy +
+        // color so users can see WHY the agent stopped, not just THAT it did.
+        // Falls back to 'error' (red "Failed") for unknown codes.
         if (event.type === 'codehere:error') {
-          updateStatus(pillEl, 'error');
+          var code = event.data && event.data.code;
+          var state = code && STATE_LABELS[code] ? code : 'error';
+          updateStatus(pillEl, state);
+          // Pattern 9 — surface a recovery affordance below the session
+          // header for known failure codes. Idempotent: if already shown,
+          // skip (sessions can emit codehere:error multiple times).
+          if (code && !card.querySelector('.recovery-affordance')) {
+            var nextAgent = pickFailoverTarget(session.agent);
+            var built = buildRecoveryAffordance(code, session.agent, nextAgent);
+            // Insert between session-head and session-body so the affordance
+            // sits at the top of the card body (most-prominent position).
+            var bodyEl = card.querySelector('.session-body');
+            if (bodyEl) bodyEl.parentNode.insertBefore(built.el, bodyEl);
+            else card.appendChild(built.el);
+            built.el.querySelector('.ra-secondary').addEventListener('click', function() {
+              built.el.remove();
+            });
+            built.el.querySelector('.ra-primary').addEventListener('click', async function() {
+              if (!built.copy.canFailover) {
+                // Auth/setup path — open the agents pane (already in DOM)
+                // instead of spawning a new session with the same broken auth.
+                built.el.remove();
+                return;
+              }
+              var primary = built.el.querySelector('.ra-primary');
+              primary.disabled = true;
+              try {
+                await fetch('/api/task', {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({
+                    prompt: session.prompt,
+                    agent: nextAgent,
+                    // Reuse the current intake cwd — the failover spawns
+                    // against whichever repo the user is currently scoped
+                    // to. Acceptable trade-off vs. a per-session lookup.
+                    cwd: (cwdInput && cwdInput.value && cwdInput.value.trim()) || ''
+                  })
+                });
+                built.el.remove();
+              } catch {
+                primary.disabled = false;
+              }
+            });
+          }
           // fall through — renderEvent renders the red banner in the log
         }
 
@@ -2210,22 +4304,75 @@ ${SHARED_STYLES}
           killBtn.disabled = true; killBtn.style.opacity = '0.4';
           const dot = card.querySelector('.sub .live-dot');
           if (dot) dot.remove();
+          setMicroState(''); // Pattern 13 — stop rotator on session exit
+          stopElapsedTick(); // Pattern 1 — stop the chip's elapsed ticker
+          stopNarrationTick(); // v0.6 M3 — stop the narrator poll on exit
+          // Final narration fetch — backend may emit one last summary
+          // after the exit event; give it a beat then poll once more.
+          setTimeout(pollNarration, 2000);
+          stopBlockTick(); // P18 slice 4 — stop the per-session block poll
+          // Final blocks fetch — agent may have run one last hook-blocked
+          // tool call right before exit; surface it.
+          setTimeout(pollBlocks, 2000);
+          // Final chip render with the terminal status so it shows the last
+          // dot pattern + final elapsed value in the chip's complete/failed state.
+          if (Array.isArray(session.steps)) renderToolProgress(session.steps);
           es.close();
         }
         if (event.type === 'error') {
+          setMicroState(''); // Pattern 13
           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 = '...';
+    // Pattern 19 — interrupt affordance with 2-press confirm + ESC shortcut.
+    // First press flips the button to a "press again to confirm" red state
+    // for 3s; second press during that window actually kills. ESC while the
+    // card is focused triggers the same flow. Prevents accidental kills.
+    var killConfirmTimer = null;
+    function armKillConfirm() {
+      killBtn.dataset.state = 'confirming';
+      killBtn.textContent = 'Confirm?';
+      if (killConfirmTimer) clearTimeout(killConfirmTimer);
+      killConfirmTimer = setTimeout(function() {
+        killBtn.dataset.state = 'ready';
+        killBtn.textContent = 'Kill';
+        killConfirmTimer = null;
+      }, 3000);
+    }
+    async function performKill() {
+      if (killConfirmTimer) { clearTimeout(killConfirmTimer); killConfirmTimer = null; }
+      killBtn.disabled = true;
+      killBtn.dataset.state = 'killing';
+      killBtn.textContent = '…';
       try {
         await fetch('/api/task/' + session.sessionId + '/kill', { method: 'POST' });
       } catch { /* ignore */ }
+      killBtn.dataset.state = 'ready';
       killBtn.textContent = 'Kill';
+      killBtn.disabled = false;
+    }
+    killBtn.dataset.state = 'ready';
+    killBtn.addEventListener('click', function(ev) {
+      ev.stopPropagation();
+      if (killBtn.dataset.state === 'confirming') {
+        performKill();
+      } else {
+        armKillConfirm();
+      }
+    });
+    // ESC keyboard shortcut — fires when the session card has focus within.
+    card.addEventListener('keydown', function(ev) {
+      if (ev.key !== 'Escape') return;
+      if (killBtn.disabled) return;
+      ev.preventDefault();
+      if (killBtn.dataset.state === 'confirming') {
+        performKill();
+      } else {
+        armKillConfirm();
+      }
     });
 
     // Iter 12 — expose renderArtifacts so the polling loop can refresh the
@@ -2239,8 +4386,14 @@ ${SHARED_STYLES}
     if (!prompt) return;
     // Apr 29: empty value = "Auto" option = backend defaults to conductor
     // (the supervisor routes). Specialists are explicit overrides.
+    // M5 slice 2: agent === '*' = fan-out (every installed specialist in
+    // parallel via /api/task/batch).
     const agent = agentSelect.value;
     const cwd = cwdInput.value.trim();
+    if (agent === '*') {
+      await assignParallel(prompt, cwd);
+      return;
+    }
     spawnBtn.disabled = true; spawnBtn.textContent = '...';
     try {
       const res = await fetch('/api/task', {
@@ -2249,9 +4402,77 @@ ${SHARED_STYLES}
         body: JSON.stringify({ prompt, agent: agent || undefined, cwd: cwd || undefined }),
       });
       const data = await res.json();
-      if (!res.ok) { alert('Failed: ' + (data.error || res.status)); return; }
+      if (!res.ok) {
+        // v0.6 S3 slice 2 — friendly message on daily-budget refusal so
+        // non-technical users see the WHY + the next move instead of a
+        // raw error code.
+        if (res.status === 429 && data.error === 'daily_budget_exhausted') {
+          alert(data.message || 'Daily budget reached.');
+        } else {
+          alert('Failed: ' + (data.error || res.status));
+        }
+        return;
+      }
       attachSession({ sessionId: data.sessionId, prompt, startedAt: data.startedAt, status: data.status, agent: data.agent || agent || 'conductor', canAppendMessage: data.canAppendMessage === true });
       promptEl.value = '';
+      // Spend chip refreshes on its own 60s tick; nudge it now since a
+      // spawn means new spend is imminent.
+      refreshSpendToday();
+    } catch (e) {
+      alert('Network error: ' + (e && e.message ? e.message : e));
+    } finally {
+      spawnBtn.disabled = false; spawnBtn.textContent = 'Assign task';
+    }
+  }
+
+  // M5 slice 2 — fan-out spawn. Sends the same prompt to every installed
+  // ready specialist in parallel via /api/task/batch. Cap of 5 enforced
+  // by the backend; if the user has more than 5 ready specialists we
+  // take the first 5 in the readiness order (sort already favors ready).
+  async function assignParallel(prompt, cwd) {
+    const readySpecialists = (agentReadiness || [])
+      .filter(a => a.state === 'ready')
+      .map(a => a.id)
+      .slice(0, 5);
+    if (readySpecialists.length < 2) {
+      alert('Fan-out needs at least 2 ready agents. Currently ready: ' + readySpecialists.length);
+      return;
+    }
+    spawnBtn.disabled = true; spawnBtn.textContent = '...';
+    try {
+      const res = await fetch('/api/task/batch', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          tasks: readySpecialists.map(agentId => ({
+            prompt,
+            agent: agentId,
+            cwd: cwd || undefined,
+          })),
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) { alert('Batch failed: ' + (data.error || res.status)); return; }
+      // Attach a card per spawned task. Per-task errors get surfaced
+      // via alert listing the failed agents — successful spawns still
+      // attach.
+      const failed = [];
+      for (const t of (data.tasks || [])) {
+        if (t.sessionId) {
+          attachSession({
+            sessionId: t.sessionId,
+            prompt,
+            startedAt: t.startedAt,
+            status: t.status,
+            agent: t.agent,
+            canAppendMessage: false, // batch doesn't surface this; default conservative
+          });
+        } else if (t.error) {
+          failed.push(t.agent + ': ' + (t.reason || t.error));
+        }
+      }
+      if (failed.length > 0) alert(failed.length + ' of ' + (data.tasks || []).length + ' fan-out spawns failed: ' + failed.join('; '));
+      promptEl.value = '';
     } catch (e) {
       alert('Network error: ' + (e && e.message ? e.message : e));
     } finally {
@@ -2375,8 +4596,7 @@ ${SHARED_STYLES}
       '<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 +
+            agentBadgeHTML(a.id || a.label) + ' ' + escape(a.label) + ' · ' + escape(a.tty) + ' · pid ' + a.pid +
           '</div>' +
           '<div class="sub">running ' + escape(uptime) + '</div>' +
         '</div>' +
@@ -2406,9 +4626,10 @@ ${SHARED_STYLES}
     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);
+    // UX-simplification iter 2 (May 7): dropped writes to hidden as-blocked /
+    // as-trust / as-agents spans — they were updated but never displayed.
+    // The mode-indicator pill in the nav now carries the safety-posture
+    // signal those hidden values were once meant to surface.
   }
   function refreshAudit() {
     fetch('/api/audit/summary').then(r => r.json()).then(updateAudit).catch(() => { /* fine */ });
@@ -2416,39 +4637,18 @@ ${SHARED_STYLES}
   refreshAudit();
   setInterval(refreshAudit, 30000); // audit log isn't hot; 30s is plenty
 
-  // Apr 29 — UX overhaul: status-banner merged into the single stats-line
-  // (id="audit-summary"). updateBanner still updates the agents-on-machine
-  // count + hidden running/blocked/last-edit counters; updateAudit controls
-  // visibility of the whole row via the .empty class.
-  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';
-  }
+  // Apr 29 status-banner is now the single stats-line above ("X actions
+  // today"). UX-simplification iter 2 (May 7) dropped the hidden setText
+  // counters + the per-second timer that updated sb-last for a value
+  // that was never displayed. updateBanner still toggles row visibility
+  // when there's any session activity.
   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;
-    const setText = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = String(val); };
-    setText('sb-running', running);
-    setText('sb-detected', detected);
-    setText('sb-blocked', blocked);
-    latestLastEditAt = d.lastEditAt || null;
-    setText('sb-last', agoStr(latestLastEditAt));
-    // Reveal the unified stats-line once we have anything to show.
-    if (running + detected + blocked + spawned.length > 0) {
+    if (spawned.length + detected > 0) {
       auditRow.classList.remove('empty');
     }
   }
-  setInterval(() => {
-    const el = document.getElementById('sb-last');
-    if (el && latestLastEditAt) el.textContent = agoStr(latestLastEditAt);
-  }, 1000);
 
   function loadSessions() {
     fetch('/api/tasks').then(r => r.json()).then(d => {
@@ -2462,8 +4662,28 @@ ${SHARED_STYLES}
       }
       pruneStaleAgents(seen);
       updateBanner(d);
+      updateShowMoreButton();
     }).catch(() => { /* fine */ });
   }
+  // claim_user_persona — show "Show all sessions (N more)" button only
+  // when there are more than 5 spawned sessions. Detected-process rows
+  // don't count (they're already hidden by default).
+  function updateShowMoreButton() {
+    const btn = document.getElementById('show-more-sessions');
+    if (!btn) return;
+    const allSessions = sessionsEl.querySelectorAll('.session:not(.observed)');
+    if (allSessions.length > 5 && !document.body.classList.contains('show-all-sessions')) {
+      btn.style.display = 'block';
+      btn.textContent = 'Show all sessions (' + (allSessions.length - 5) + ' more)';
+    } else {
+      btn.style.display = 'none';
+    }
+  }
+  const showMoreBtn = document.getElementById('show-more-sessions');
+  if (showMoreBtn) showMoreBtn.addEventListener('click', function() {
+    document.body.classList.add('show-all-sessions');
+    updateShowMoreButton();
+  });
   loadSessions();
   // Refresh detected-agents list + banner every 5s. Iter 12 — also patches
   // existing session cards with new finalReport prose when it arrives async.
@@ -2492,7 +4712,17 @@ ${SHARED_STYLES}
   const readinessEl = document.getElementById('readiness');
 
   function renderReadiness(report) {
-    if (!report || report.state === 'ready') {
+    // Hide the banner unless the state is genuinely actionable. May 5 2026
+    // design pass: the prior api_key_shadow state surfaced a yellow warning
+    // banner with shell-grep jargon for an environment condition that ISNT
+    // a problem -- codehere already uses subscription auth and ignores the
+    // ANTHROPIC_API_KEY env var by design. Per claim_user_persona (HIGH
+    // non-technical-first) + the Open-Agents production-grade design
+    // reference, only show the banner when the user can / must act on it
+    // (needs_install, needs_auth, billed_key_required). Other states stay
+    // observable in /api/readiness for tooling.
+    const ACTIONABLE_STATES = new Set(['needs_install', 'needs_auth', 'billed_key_required']);
+    if (!report || !ACTIONABLE_STATES.has(report.state)) {
       readinessEl.style.display = 'none';
       return;
     }
@@ -2614,6 +4844,46 @@ ${SHARED_STYLES}
     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;
@@ -2663,8 +4933,11 @@ ${SHARED_STYLES}
     font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 10px;
     text-transform: uppercase; letter-spacing: 0.05em;
   }
-  .task .status.completed { background: rgba(40, 200, 64, 0.10); color: var(--allow); border: 1px solid rgba(40, 200, 64, 0.18); }
-  .task .status.running { background: rgba(255, 200, 0, 0.10); color: var(--warn); border: 1px solid rgba(255, 200, 0, 0.18); }
+  /* 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; }
@@ -2727,6 +5000,8 @@ ${SHARED_STYLES}
   <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">
@@ -2780,6 +5055,9 @@ ${SHARED_STYLES}
       .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));
@@ -2797,7 +5075,12 @@ ${SHARED_STYLES}
     if (ms == null) return '';
     if (ms < 1000) return ms + 'ms';
     if (ms < 60000) return (ms / 1000).toFixed(1) + 's';
-    return Math.floor(ms / 60000) + 'm ' + Math.floor((ms % 60000) / 1000) + '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 '~';
@@ -2888,9 +5171,26 @@ ${SHARED_STYLES}
       return;
     }
 
-    html += '<div class="section-label">Thread · ' + thread.tasks.length + ' turn' + (thread.tasks.length === 1 ? '' : 's') + '</div>';
+    // 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 thread.tasks) {
+    for (const t of renderedTurns) {
       const status = (t.status || '').toLowerCase();
       const stepsHtml = (t.steps && t.steps.length)
         ? '<div class="steps">' + t.steps.map(s => '<div class="step ' + escapeHtml((s.state||'').toLowerCase()) + '">' + escapeHtml(s.label || '') + '</div>').join('') + '</div>'
@@ -2901,7 +5201,8 @@ ${SHARED_STYLES}
 
       html += '<div class="task">' +
         '<div class="row1">' +
-          '<span class="agent">' + escapeHtml(t.agent || 'unknown') + '</span>' +
+          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>' +
@@ -2911,6 +5212,16 @@ ${SHARED_STYLES}
       '</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);
   }
@@ -2925,16 +5236,21 @@ ${SHARED_STYLES}
       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', () => {
+      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;
@@ -2945,6 +5261,72 @@ ${SHARED_STYLES}
         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) {
@@ -2966,6 +5348,10 @@ ${SHARED_STYLES}
 
   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))