@ra3orblade/swarm 0.10.0 → 0.11.0

package/web/app.js

@@ -1,5 +1,20 @@
 const $ = (s) => document.querySelector(s);
 const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
+// Open a URL in the user's browser. The desktop app's webview has no new-window handler, so
+// `window.open` and target=_blank silently do nothing there — route through Tauri's shell opener
+// when it is present (capability `shell:allow-open`), and fall back to window.open in a browser.
+const openExternal = (url) => {
+  const shell = window.__TAURI__?.shell;
+  if (shell?.open) shell.open(url).catch(() => window.open(url, "_blank"));
+  else window.open(url, "_blank");
+};
+// Every absolute link (PR titles, docs, search hits, dev-server ports) takes the same path.
+document.addEventListener("click", (e) => {
+  const a = e.target.closest?.('a[href^="http"]');
+  if (!a) return;
+  e.preventDefault();
+  openExternal(a.href);
+});
 // M8.2b daemon token: `swarm ui` (and the desktop app) open the dashboard with ?token=…; it is kept
 // in sessionStorage, stripped from the URL, and sent on every /v1 request. Loopback without a token
 // still works while `[daemon] auth = "loopback-optional"`.
@@ -79,7 +94,12 @@ const projGlyph = (p, size = 14) => p?.icon
 const projCell = (id) => { const p = state.projects.find((x) => x.id === id); return p ? `${projGlyph(p, 12)} ${esc(p.name)}` : esc(projName(id)); };
 const projName = (id) => state.projects.find((p) => p.id === id)?.name ?? (id === "p_unknown" ? "?" : "(removed)");
 const short = (p) => String(p ?? "").replace(/^\/Users\/[^/]+/, "~");
-const tok = (n) => (n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(0)}k` : String(n | 0));
+// Never wider than 5 characters, so a numeric column never has to ellipsize a number: without a
+// billions step a 2.8B context read "2820.0M", and the tenth is noise once the mantissa is 3 digits.
+// At most 3 significant digits, so a numeric column never has to ellipsize a number: without a
+// billions step a 2.8B context read "2820.0M", and the tenth is noise once the mantissa is 3 digits.
+const unit = (n, div, suffix) => `${(n / div).toFixed((n /= div) >= 100 ? 0 : n >= 10 ? 1 : 2)}${suffix}`;
+const tok = (n) => (n >= 1e9 ? unit(n, 1e9, "B") : n >= 1e6 ? unit(n, 1e6, "M") : n >= 1e3 ? `${(n / 1e3).toFixed(0)}k` : String(n | 0));
 const usd = (n) => (n == null ? '<span class="dim">—</span>' : `$${n < 10 ? n.toFixed(2) : n.toFixed(0)}`);
 const model = (m) => (m ? m.replace(/^claude-/, "").replace(/-\d{8}$/, "") : "");
 const sumBy = (arr, f) => arr.reduce((a, x) => a + (f(x) ?? 0), 0);
@@ -88,7 +108,14 @@ const ic = (name, size = 14, cls = "") => (window.icon ? window.icon(name, size,
 const kindIcon = (s) => ic(s.kind === "subagent" ? "tree-structure" : s.kind === "spawned" ? "play" : "keyboard", 13, "kind");
 // pixel-art illustrations for empty states (crispEdges, theme-green; won't clash with icon packs)
 function pixmap(rows, cell = 6) {
-  const C = { X: "var(--acc)", g: "var(--c5,#7fb069)", d: "var(--c4,#2f7d4f)" };
+  // All three tones are derived from the accent, so they are guaranteed to separate in either
+  // theme. The old palette used --c4 for the shade, whose luminance in light mode (0.158) is
+  // indistinguishable from --acc's (0.160) — the outline simply vanished into the face.
+  const C = {
+    X: "var(--acc)",
+    g: "color-mix(in srgb, var(--acc) 45%, white)",
+    d: "color-mix(in srgb, var(--acc) 58%, black)",
+  };
   const w = Math.max(...rows.map((r) => r.length)) * cell;
   const h = rows.length * cell;
   let r = "";
@@ -101,17 +128,43 @@ function pixmap(rows, cell = 6) {
   return `<svg class="px" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" shape-rendering="crispEdges" xmlns="http://www.w3.org/2000/svg">${r}</svg>`;
 }
 const PX = {
-  idle: () => pixmap([
-    "   X  X   ",
-    "   X  X   ",
-    " XXXXXXXX ",
-    " XXXXXXXX ",
-    " X  XX  X ",
-    " XXXXXXXX ",
-    " XX    XX ",
-    " XXXXXXXX ",
-    "  X    X  ",
-  ]),
+  // The palette carries three tones (accent / light / dark) and this used one, which is why it
+  // read as a flat blob. Outline, ear modules and features in `d`; face and body in `X`; antenna
+  // tips and the chest light in `g`. The body tapers rather than sitting under the head as a slab.
+  idle: () =>
+    pixmap(
+      [
+        "       g       g       ",
+        "       X       X       ",
+        "       X       X       ",
+        "     ddddddddddddd     ",
+        "     dXXXXXXXXXXXd     ",
+        "     dggXXXXXXXXXd     ",
+        "   dddXXddXXXddXXddd   ",
+        "   dddXXddXXXddXXddd   ",
+        "   dddXXXXXXXXXXXddd   ",
+        "   dddXXdddddddXXddd   ",
+        "     dXXXXXXXXXXXd     ",
+        "     dXXXXXXXXXXXd     ",
+        "     ddddddddddddd     ",
+        "          XXX          ",
+        "         ddddd         ",
+        "      ddddddddddd      ",
+        "   dXXdggXXXXXXXdXXd   ",
+        "   dXXdXggggXddddXXd   ",
+        "   dXXdXggggXXXXdXXd   ",
+        "   dXXdXXXXXXddddXXd   ",
+        "   dXXdXXXXXXXXXdXXd   ",
+        "   dXXdXdddXXXXXdXXd   ",
+        "   ddddXXXXXXXXXdddd   ",
+        "      ddddddddddd      ",
+        "        XX   XX        ",
+        "        XX   XX        ",
+        "       XXXX XXXX       ",
+        "       dddd dddd       ",
+      ],
+      4,
+    ),
   folder: () => pixmap([
     " XXXX     ",
     "XXXXXXXXXX",
@@ -148,6 +201,19 @@ const agentBadge = (a) => (a ? `<span class="badge agent" style="color:${viz.age
 let raf = 0;
 const schedule = () => { if (!raf) raf = requestAnimationFrame(() => { raf = 0; render(); }); };
 const touch = () => { state.dirty = true; schedule(); };
+// `render()` refuses to paint while a menu is open (it would detach the anchor the menu is
+// positioned against) and defers the frame instead. fancy-menus exposes no close callback, so the
+// deferred paint has to wait for the close — armed from that bail, where the menu is known to be
+// open. Without it a menu action (switch view, ack, release…) only lands on the next 5s poll,
+// which reads as a dead click. One boolean check per frame, only while a menu is open.
+// The menus island re-broadcasts the package's `useIsAnyMenuOpen` as `menus:openchange`.
+window.addEventListener("menus:openchange", (e) => {
+  if (e.detail?.open) return;
+  // Menu closed: drop the trigger's open state and paint whatever render() deferred.
+  for (const b of $$("#viewnav .navgrp.open")) b.classList.remove("open");
+  for (const el of $$(".menu-open")) el.classList.remove("menu-open");
+  if (state.dirty) schedule();
+});
 // Last snapshot body + last render time: an unchanged snapshot (same seq, same data) skips the render
 // unless the UI changed, or `ago`-style cells are older than 30s.
 let lastSnap = "", lastRenderAt = 0;
@@ -203,13 +269,70 @@ async function refresh() {
     incChanged = JSON.stringify(inc) !== JSON.stringify(state.allIncidents);
     state.allIncidents = inc;
   }
+  let linChanged = false;
+  if (state.view === "graphs" && (state.graphTab ?? "collisions") === "lineage" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const open = (state.lineageOpen ?? []).map((g) => `&expand=${encodeURIComponent(g)}`).join("");
+    const lin = await fetch(`/v1/graphs/lineage${q || "?"}${open}`).then((r) => r.json()).catch(() => state.lineage);
+    linChanged = JSON.stringify(lin) !== JSON.stringify(state.lineage);
+    state.lineage = lin;
+  }
   let colChanged = false;
-  if (state.view === "graphs" && !state.session) {
+  if (state.view === "graphs" && (state.graphTab ?? "collisions") !== "lineage" && !state.session) {
     const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
     const col = await fetch(`/v1/graphs/collisions${q}`).then((r) => r.json()).catch(() => state.collisions);
     colChanged = JSON.stringify(col) !== JSON.stringify(state.collisions);
     state.collisions = col;
   }
+  let waitChanged = false;
+  if ((state.view === "fleet" || state.view === "stats") && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const w = await fetch(`/v1/waiting${q}`).then((r) => r.json()).catch(() => state.waiting);
+    waitChanged = JSON.stringify(w) !== JSON.stringify(state.waiting);
+    state.waiting = w;
+  }
+  let hygChanged = false;
+  if (state.view === "hygiene" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const hy = await fetch(`/v1/hygiene${q}`).then((r) => r.json()).catch(() => state.hygiene);
+    hygChanged = JSON.stringify(hy) !== JSON.stringify(state.hygiene);
+    state.hygiene = hy;
+  }
+  let ctxChanged = false;
+  if (state.view === "context" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const cx = await fetch(`/v1/context${q}`).then((r) => r.json()).catch(() => state.context);
+    ctxChanged = JSON.stringify(cx) !== JSON.stringify(state.context);
+    state.context = cx;
+  }
+  let trialsChanged = false;
+  if (state.view === "trials" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const tr = await fetch(`/v1/ab${q}`).then((r) => r.json()).then((r) => r.trials ?? []).catch(() => state.trials);
+    trialsChanged = JSON.stringify(tr) !== JSON.stringify(state.trials);
+    state.trials = tr;
+  }
+  let provChanged = false;
+  if (state.view === "provenance" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const pv = await fetch(`/v1/provenance${q}`).then((r) => r.json()).catch(() => state.provenance);
+    provChanged = JSON.stringify(pv) !== JSON.stringify(state.provenance);
+    state.provenance = pv;
+  }
+  let mcpChanged = false;
+  if (state.view === "mcp" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const m = await fetch(`/v1/mcp/health${q}`).then((r) => r.json()).catch(() => state.mcpHealth);
+    mcpChanged = JSON.stringify(m) !== JSON.stringify(state.mcpHealth);
+    state.mcpHealth = m;
+  }
+  let ghChanged = false;
+  if (state.view === "gates" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const gh = await fetch(`/v1/gates/health${q}`).then((r) => r.json()).catch(() => state.gateHealth);
+    ghChanged = JSON.stringify(gh) !== JSON.stringify(state.gateHealth);
+    state.gateHealth = gh;
+  }
   let outChanged = false;
   if (state.view === "outcomes" && !state.session) {
     const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
@@ -217,7 +340,7 @@ async function refresh() {
     outChanged = JSON.stringify(o) !== JSON.stringify(state.outcomes);
     state.outcomes = o;
   }
-  if (!same || prsChanged || incChanged || tasksChanged || runsChanged || attrChanged || colChanged || outChanged || state.dirty || Date.now() - lastRenderAt > 30_000) schedule();
+  if (!same || prsChanged || incChanged || tasksChanged || runsChanged || attrChanged || colChanged || linChanged || outChanged || waitChanged || ghChanged || mcpChanged || ctxChanged || provChanged || trialsChanged || hygChanged || state.dirty || Date.now() - lastRenderAt > 30_000) schedule();
 }
 // M9.1: the view registry — the one source of truth that the sidebar nav, render dispatch,
 // deep links and the ⌘K palette all derive from. Adding a view = one entry here + its render fn.
@@ -227,10 +350,17 @@ const VIEW_DEFS = [
   { id: "graphs", label: "Graphs", icon: "tree-structure", group: "Observe", render: () => renderGraphs(), badge: () => state.collisions?.contested ?? 0 },
   { id: "board", label: "Board", icon: "stack", group: "Work", render: () => renderBoard() },
   { id: "prs", label: "PRs", icon: "git-pull-request", group: "Work", render: () => renderPRs() },
-  { id: "outcomes", label: "Outcomes", icon: "check", group: "Insight", render: () => renderOutcomes() },
+  { id: "trials", label: "Trials", icon: "robot", group: "Work", render: () => renderTrials(), badge: () => (state.trials ?? []).filter((t) => t.verdict === "undecided").length },
+  { id: "hygiene", label: "Hygiene", icon: "trash", group: "Work", render: () => renderHygiene(), badge: () => state.hygiene?.totals?.issues ?? 0 },
+  // not "check": inside a menu a tick reads as "this item is selected" rather than as an icon
+  { id: "outcomes", label: "Outcomes", icon: "git-branch", group: "Insight", render: () => renderOutcomes() },
+  { id: "gates", label: "Gates", icon: "shield", group: "Insight", render: () => renderGateHealth(), badge: () => state.gateHealth?.totals?.flakyGates ?? 0 },
+  { id: "mcp", label: "MCP", icon: "plugs-connected", group: "Insight", render: () => renderMcpHealth() },
+  { id: "context", label: "Context", icon: "brain", group: "Insight", render: () => renderContext() },
   { id: "spend", label: "Spend", icon: "coins", group: "Insight", render: () => renderSpend() },
   { id: "stats", label: "Stats", icon: "chart-bar", group: "Insight", render: () => { loadStats(); renderStats(); } }, // loadStats is a no-op while the cache is fresh
   { id: "search", label: "Search", icon: "magnifying-glass", group: "Insight", render: () => renderSearch() },
+  { id: "provenance", label: "Provenance", icon: "git-commit", group: "Guard", render: () => renderProvenance(), badge: () => state.provenance?.totals?.untracked ?? 0 },
   { id: "incidents", label: "Incidents", icon: "warning", group: "Guard", render: () => renderIncidentsView(), badge: () => state.openIncidents ?? 0 },
 ];
 const viewDef = (id) => VIEW_DEFS.find((v) => v.id === id);
@@ -240,6 +370,8 @@ let navHtml = ""; // last-rendered nav html; declared before the restore block b
 {
   const v = localStorage.getItem("swarm.view");
   if (VIEWS.includes(v)) state.view = v;
+  const gt = localStorage.getItem("swarm.graphTab");
+  if (gt === "lineage" || gt === "collisions") state.graphTab = gt;
   const sel = localStorage.getItem("swarm.sel");
   if (sel) state.sel = sel;
   // Deep links win over persisted state: ?view=board&project=<id>&session=<id>
@@ -252,7 +384,7 @@ let navHtml = ""; // last-rendered nav html; declared before the restore block b
 function render() {
   // A row menu is anchored to DOM that a re-render would replace (and the focus jump closes it):
   // hold the frame while one is open; the next poll or interaction paints it.
-  if (window.menus?.isOpen()) { state.dirty = true; return; }
+  if (window.menus?.isOpen()) { state.dirty = true; return; } // the menus:openchange listener paints on close
   // Live refresh re-renders the whole view; keep focus + caret in a grid filter input alive.
   const af = document.activeElement;
   const keep = af?.dataset?.filter ? { key: af.dataset.filter, tid: af.dataset.tid, pos: af.selectionStart } : null;
@@ -274,21 +406,57 @@ function renderHeader() {
   if (html !== todayHtml) { todayHtml = html; $("#today").innerHTML = html; }
   renderNav();
 }
-// M9.1: grouped view nav in the sidebar, generated from VIEW_DEFS. Rebuilt only when the
-// html changes (active view, badges) so the 5s poll doesn't churn the DOM.
-function renderNav() {
+// View nav in the header: one button per group (Observe / Work / Insight / Guard); clicking one
+// opens a fancy-menus dropdown of that group's views. Rebuilt only when the html changes (active
+// view, badges) so the 5s poll doesn't churn the DOM — and never while its menu is open.
+function showView(id) {
+  state.view = id;
+  localStorage.setItem("swarm.view", id);
+  state.session = null;
+  state.dirty = true;
+  refresh();
+}
+function viewGroups() {
   const groups = [];
   for (const v of VIEW_DEFS) {
     const g = groups.find((x) => x.name === v.group) ?? groups[groups.push({ name: v.group, views: [] }) - 1];
     g.views.push(v);
   }
-  const link = (v) => {
-    const n = v.badge?.() ?? 0;
-    return `<a href="#" data-view="${v.id}" class="nav ${!state.session && state.view === v.id ? "on" : ""}" title="${v.label}">${ic(v.icon, 14)}<span class="nm">${v.label}</span>${n ? `<b class="navcount">${n > 99 ? "99+" : n}</b>` : ""}</a>`;
-  };
-  const html = groups.map((g) => `<h4>${g.name}</h4>${g.views.map(link).join("")}`).join("");
+  return groups;
+}
+function renderNav() {
+  const html = viewGroups()
+    .map((g) => {
+      const n = g.views.reduce((a, v) => a + (v.badge?.() ?? 0), 0);
+      const on = !state.session && g.views.some((v) => v.id === state.view);
+      // The group name alone never says which of its views you are on, so ten destinations hid
+      // behind four words. The active group carries the view's own label.
+      const cur = on ? g.views.find((v) => v.id === state.view) : null;
+      return `<button class="navgrp ${on ? "on" : ""}" data-grp="${g.name}"${on ? ' aria-current="page"' : ""} aria-haspopup="menu">${g.name}${cur ? `<span class="navview">${esc(cur.label)}</span>` : ""}${n ? `<b class="navcount">${n > 99 ? "99+" : n}</b>` : ""}${ic("chevron-down", 12, "chev")}</button>`;
+    })
+    .join("");
   if (html !== navHtml) { navHtml = html; $("#viewnav").innerHTML = html; }
 }
+// Delegated: the group buttons are re-rendered, so the listener lives on the container.
+$("#viewnav").addEventListener("click", (ev) => {
+  const btn = ev.target.closest("[data-grp]");
+  if (!btn) return;
+  const g = viewGroups().find((x) => x.name === btn.dataset.grp);
+  if (!g || !window.menus) return;
+  btn.classList.add("open"); // cleared by menus:openchange when the menu closes
+  window.menus.open(btn, {
+    items: g.views.map((v) => {
+      const n = v.badge?.() ?? 0;
+      return {
+        label: v.label,
+        icon: v.icon,
+        caption: n ? String(n) : undefined,
+        pressed: !state.session && state.view === v.id,
+        run: () => showView(v.id),
+      };
+    }),
+  });
+});
 
 const isLive = (s) => s.state === "active" || s.state === "waiting";
 // One pass over sessions → live count per project (+ "" for all), instead of a filter per sidebar row.
@@ -381,10 +549,19 @@ function onboarding() {
 
 // ---------- fleet
 // Fleet data-grid columns (sortable/resizable/reorderable/filterable via table.js).
+// M9.4: this session is blocked on a person right now — the badge says for how long, and on what.
+const waitFor = (sid) => (state.waiting?.sessions ?? []).find((w) => w.sessionId === sid);
+const WAIT_WHAT = { permission: "a permission prompt", question: "a question it asked", notification: "a notification" };
+function waitBadge(sid) {
+  const w = waitFor(sid);
+  if (!w?.openSince) return "";
+  const what = WAIT_WHAT[w.openKind] ?? "you";
+  return ` <span class="badge warn" title="Blocked on ${esc(what)} since ${esc(w.openSince)}${w.openLabel ? ` — ${esc(w.openLabel)}` : ""}">Waiting ${ago(w.openSince)}</span>`;
+}
 const FLEET_COLS = [
   { key: "project", label: "project", width: 112, get: (s) => projName(s.projectId), cell: (s) => projCell(s.projectId) },
   { key: "agent", label: "agent", width: 78, cls: "td-badge", get: (s) => agentLabel(s.agent), cell: (s) => agentBadge(s.agent) },
-  { key: "session", label: "session", width: 210, get: (s) => s.title ?? s.id, cell: (s) => `${kindIcon(s)}<b>${esc(s.title ?? s.id.slice(0, 8))}</b>${s.subagents ? ` <span class="badge acc">${s.subagents} Sub</span>` : ""}${(state.questions ?? []).some((q) => q.sessionId === s.id) ? ' <span class="badge warn" title="This agent asked a question only a human can answer — open the session">Asking</span>' : ""}${s.stuck ? ` <span class="badge bad" title="${esc(s.stuck)} — heuristic, nothing was interrupted; open the session to judge">Stuck</span>` : ""}` },
+  { key: "session", label: "session", width: 210, get: (s) => s.title ?? s.id, cell: (s) => `${kindIcon(s)}<b>${esc(s.title ?? s.id.slice(0, 8))}</b>${s.subagents ? ` <span class="badge acc">${s.subagents} Sub</span>` : ""}${(state.questions ?? []).some((q) => q.sessionId === s.id) ? ' <span class="badge warn" title="This agent asked a question only a human can answer — open the session">Asking</span>' : ""}${s.stuck ? ` <span class="badge bad" title="${esc(s.stuck)} — heuristic, nothing was interrupted; open the session to judge">Stuck</span>` : ""}${waitBadge(s.id)}` },
   { key: "branch", label: "branch", width: 116, get: (s) => s.branch ?? "", cell: (s) => `<span class="br">${esc(s.branch ?? "")}</span>` },
   { key: "now", label: "now", flex: true, get: (s) => s.last, cell: (s) => {
     const line = s.lastText ? s.lastText.split("\n").find((l) => l.trim()) ?? "" : "";
@@ -477,7 +654,11 @@ function renderBoardKpis() {
   const orphaned = claims.filter((c) => c.state === "orphaned").length;
   const wts = (state.sel ? [state.sel] : state.projects.map((p) => p.id)).flatMap((id) => state.worktrees[id] ?? []);
   const dirty = wts.filter((w) => w.dirty > 0).length, merged = wts.filter((w) => !w.main && w.merged).length;
-  const inc = (state.incidents ?? []).filter((i) => inSel(i.projectId) && !i.acked).length;
+  // The snapshot carries only the 20 most recent open incidents, so counting that window caps the
+  // KPI at 20 while the Guard badge shows the real number. Both now read the same true count.
+  const inc = state.sel
+    ? (state.openIncidentsByProject?.[state.sel] ?? (state.incidents ?? []).filter((i) => inSel(i.projectId) && !i.acked).length)
+    : (state.openIncidents ?? (state.incidents ?? []).filter((i) => !i.acked).length);
   const tasks = state.sel && state.tasks?.tasks ? state.tasks.tasks : null;
   const ready = tasks ? tasks.filter((t) => t.ready).length : null;
   const gateFails = tasks ? tasks.filter((t) => (t.gates ?? []).some((g) => g.verdict === "fail")).length : 0;
@@ -1067,6 +1248,34 @@ document.addEventListener("change", async (ev) => {
 });
 document.addEventListener("input", (ev) => { if (ev.target.id === "psIcon") { $("#psImage").value = ""; setIconPreview(ev.target.value.trim()); for (const e of $$(".emoji")) e.classList.toggle("on", e.dataset.emoji === ev.target.value.trim()); } });
 document.addEventListener("input", (ev) => { if (ev.target.id === "srchQ") { srch.q = ev.target.value; clearTimeout(srch.db); srch.db = setTimeout(runSearch, 150); } });
+// M9.4: how much of the fleet's time is spent waiting on a person, and on what. Blocked time is
+// not idle time — it is the agent standing still with the work half-done, which is why it gets a
+// number rather than a footnote.
+function waitingSection() {
+  const w = state.waiting;
+  if (!w?.totals?.episodes) return "";
+  const t = w.totals;
+  const kindRow = (k, label) => {
+    const x = t.byKind[k];
+    return x?.episodes ? `<tr><td>${label}</td><td class="num">${x.episodes}</td><td class="num">${dur(x.blockedMs)}</td></tr>` : "";
+  };
+  const top = w.sessions.slice(0, 8).map((s) => `<tr${s.sessionId ? ` data-s="${esc(s.sessionId)}"` : ""}>
+      <td>${esc(s.title ?? s.sessionId.slice(0, 8))}${s.openSince ? ` <span class="badge warn">waiting ${ago(s.openSince)}</span>` : ""}</td>
+      <td class="num">${s.episodes}</td><td class="num">${dur(s.blockedMs)}</td><td class="num">${dur(s.longestMs)}</td></tr>`).join("");
+  return `<h2 class="mt-sec">Waiting on you <span>last 7 days · time agents spent blocked on a person${t.waitingNow ? ` · <b class="navcount">${t.waitingNow} waiting now</b>` : ""}</span></h2>
+     <div class="cols">
+       <div class="chart-card" style="margin:0"><h3>By what blocked them</h3>
+         <table class="mini"><thead><tr><th>kind</th><th class="num">times</th><th class="num">blocked</th></tr></thead>
+         <tbody>${kindRow("permission", "Permission prompt")}${kindRow("question", "Question it asked")}${kindRow("notification", "Notification")}
+           <tr><td><b>Total</b></td><td class="num"><b>${t.episodes}</b></td><td class="num"><b>${dur(t.blockedMs)}</b></td></tr>
+           <tr><td class="dim">median wait</td><td class="num"></td><td class="num dim">${dur(t.medianMs)}</td></tr>
+           <tr><td class="dim">longest wait</td><td class="num"></td><td class="num dim">${dur(t.longestMs)}</td></tr>
+         </tbody></table></div>
+       <div class="chart-card" style="margin:0"><h3>Sessions that waited most</h3>
+         <table class="mini"><thead><tr><th>session</th><th class="num">waits</th><th class="num">blocked</th><th class="num">longest</th></tr></thead>
+         <tbody>${top}</tbody></table></div>
+     </div>`;
+}
 function renderStats() {
   const st = statsCache.key === (state.sel ?? "") ? statsCache.data : null;
   const scope = state.sel ? esc(projName(state.sel)) : "all projects";
@@ -1154,6 +1363,7 @@ function renderStats() {
        <div class="chart-card" style="margin:0"><h3>Tool leaderboard <span>calls · all time</span></h3>${st.tools.length ? viz.hbars(st.tools.map(([k, v]) => [toolName(k), v])) : '<div class="dim">no tool calls yet</div>'}</div>
        <div><h2 style="margin-top:0">Records</h2><div class="records">${records}</div></div>
      </div>
+     ${waitingSection()}
      <p class="dim" style="margin-top:var(--gap-sec)">Word counts assume ~0.75 words per token; a novel is 90k words. Costs use list prices, as on Spend. ${pct(T.sidechainTurns, T.turns)} of turns came from subagents.</p>`;
 }
 
@@ -1214,18 +1424,283 @@ function renderOutcomes() {
   $("#main").innerHTML =
     head(`${o.branches.length} branch${o.branches.length === 1 ? "" : "es"} · ${n("merged")} merged · ${rev ? `<b style="color:var(--bad)">${rev} reverted</b>` : "0 reverted"} · ${n("open")} open`) +
     `<h2 class="mt-sec">By model <span>who ships work that survives</span></h2>` +
-    dataTable({ id: "outcomes-model", columns: scoreCols("model"), rows: o.byModel }) +
-    (o.byAgent.length > 1 ? `<h2 class="mt-sec">By agent</h2>${dataTable({ id: "outcomes-agent", columns: scoreCols("agent"), rows: o.byAgent })}` : "") +
+    dataTable({ id: "outcomes-model", columns: scoreCols("model"), rows: o.byModel, rerender: touch }) +
+    (o.byAgent.length > 1 ? `<h2 class="mt-sec">By agent</h2>${dataTable({ id: "outcomes-agent", columns: scoreCols("agent"), rows: o.byAgent, rerender: touch })}` : "") +
     `<h2 class="mt-sec">Branches <span>latest first</span></h2>` +
-    dataTable({ id: "outcomes-branches", columns: BRANCH_COLS, rows: o.branches.slice(0, 100) });
+    dataTable({ id: "outcomes-branches", columns: BRANCH_COLS, rows: o.branches.slice(0, 100), rerender: touch });
+}
+
+// M9.5: where the context window goes. Character counts are exact (every tool response is stored);
+// the token figures are a flat 4:1 estimate and say so. Re-reading a file is the waste metric —
+// the first read is work, every copy after it is the price of having forgotten.
+// `toolName` puts the server first, so four MCP tools all truncated to "claude-in-c…" and the
+// half that tells them apart was the half cut off. Lead with the tool, keep a short server hint.
+function ctxToolLabel(tool) {
+  const m = /^mcp__([^_]+(?:_[^_]+)*?)__(.+)$/.exec(tool);
+  if (!m) return tool;
+  const srv = m[1].replace(/[-_]/g, " ").split(" ").map((w) => w[0]).join("").toLowerCase();
+  return `${m[2]} · ${srv}`;
+}
+function renderContext() {
+  const c = state.context;
+  const head = (sub) => `<h2>Context <span>${sub}</span></h2>`;
+  if (!c) { $("#main").innerHTML = head("where the window goes") + `<div class="empty">${PX.clock()}Loading…</div>`; return; }
+  if (!c.totals.sessions) {
+    $("#main").innerHTML = head("where the window goes") + `<div class="empty">${PX.idle()}No tool results in the last 7 days${state.sel ? " in this project" : ""}.</div>`;
+    return;
+  }
+  const t = c.totals;
+  const chars = (n) => (n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${Math.round(n / 1e3)}k` : String(n));
+  const kpi = (l, v, d, cls = "") => `<div class="kpi ${cls}"><div class="l">${l}</div><div class="v">${v}</div><div class="d">${d}</div></div>`;
+  const kpis = `<div class="kpis">${
+    kpi("Returned by tools", `${chars(t.toolChars)}`, `characters · ≈${chars(t.toolTokens)} tokens`)
+  }${kpi("Spent re-reading", chars(t.wastedChars), t.wasteShare ? `${Math.round(t.wasteShare * 100)}% of it · ${t.rereadFiles} file${t.rereadFiles === 1 ? "" : "s"}` : "nothing re-read", t.wasteShare > 0.1 ? "hot" : t.wasteShare > 0.03 ? "warm" : "")
+  }${kpi("Cache hit", `${Math.round(t.cacheHit * 100)}%`, "of the window came back free")
+  }${kpi("Sessions", t.sessions, "with tool activity")}</div>`;
+
+  const worst = c.sessions.filter((s) => s.wastedChars > 0).slice(0, 10);
+  const rows = worst.map((s) => `<tr${s.sessionId ? ` data-s="${esc(s.sessionId)}"` : ""}>
+      <td>${esc(s.title ?? s.sessionId.slice(0, 8))}</td>
+      <td class="num">${chars(s.toolChars)}</td>
+      <td class="num"><b>${chars(s.wastedChars)}</b></td>
+      <td class="num">${Math.round(s.wasteShare * 100)}%</td>
+      <td>${s.worst.map((w) => `<span class="br" title="${esc(w.path)} — read ${w.reads}× · ${chars(w.wastedChars)} chars re-read">${esc(w.path.split("/").slice(-1)[0])} <b>${w.reads}×</b></span>`).join(" ")}</td>
+    </tr>`).join("");
+
+  $("#main").innerHTML = head(`last 7 days · ${chars(t.toolChars)} characters returned by tools`) + kpis +
+    `<div class="cols">
+       <div class="chart-card" style="margin:0"><h3>What fills the window <span>by tool · characters returned</span></h3>
+         ${viz.hbars(c.byTool.map((x) => [ctxToolLabel(x.tool), x.chars, `${chars(x.chars)} · ${x.calls}`]))}</div>
+       <div class="chart-card" style="margin:0"><h3>Re-read waste <span>the same file, read again</span></h3>
+         ${worst.length ? `<table class="mini"><thead><tr><th>session</th><th class="num">returned</th><th class="num">wasted</th><th class="num">share</th><th>worst files</th></tr></thead><tbody>${rows}</tbody></table>` : '<div class="dim">Nothing was read twice — no waste to report.</div>'}</div>
+     </div>
+     <p class="dim" style="margin-top:10px;font-size:var(--fs-sm)">Character counts are exact — every tool response is stored. Token figures are a flat 4:1 estimate. <b>MCP tool schemas and the system prompt are not included</b>: Swarm sees tool calls, never the schemas or the prompt preamble, so they are left out rather than guessed at.</p>`;
+}
+
+// M9.18: the same task run by N models side by side. An arm is its own task id, so each has its
+// own claim and worktree and the ledger's one-holder rule is untouched — see core/abtrial.ts.
+const VERDICT = { winner: ["ok", "Decided"], undecided: ["acc", "Running"], "all-failed": ["bad", "No winner"] };
+function renderTrials() {
+  const trials = state.trials;
+  const head = (sub) => `<h2>Trials <span>${sub}</span>${state.sel ? `<span class="grow"></span><span class="chip" id="abNew">${ic("plus", 12)} New trial</span>` : ""}</h2>`;
+  if (!trials) { $("#main").innerHTML = head("same task, different models") + `<div class="empty">${PX.clock()}Loading…</div>`; return; }
+  if (!trials.length) {
+    $("#main").innerHTML = head("same task, different models") + `<div class="empty">${PX.idle()}No trials yet${state.sel ? "" : " — pick a project to start one"}.<br>A trial runs one task on several models at once and compares what each produced: cost, wall time, gates, diff size.</div>`;
+    return;
+  }
+  const secs = (v) => (v === null ? '<span class="dim">—</span>' : dur(v));
+  const cols = [
+    { key: "arm", label: "arm", width: 130, get: (a) => a.label, cell: (a) => `<b>${esc(a.label)}</b>${a.winner ? ' <span class="badge ok">Winner</span>' : ""}` },
+    { key: "state", label: "state", width: 116, get: (a) => a.ineligibleFor ?? "", cell: (a) => (a.eligible ? '<span class="badge ok">Passed</span>' : `<span class="badge ${a.state === "running" ? "acc" : "warn"}" title="This arm cannot win: ${esc(a.ineligibleFor ?? "")}">${esc(a.ineligibleFor ?? "—")}</span>`) },
+    { key: "cost", label: "cost", width: 74, num: true, get: (a) => a.costUsd, cell: (a) => usd(a.costUsd) },
+    { key: "wall", label: "wall", width: 74, num: true, get: (a) => a.wallMs ?? -1, cell: (a) => secs(a.wallMs) },
+    { key: "turns", label: "turns", width: 64, num: true, get: (a) => a.turns, cell: (a) => a.turns },
+    { key: "gates", label: "gates", width: 84, num: true, get: (a) => a.gatesFailed * -1 + a.gatesPassed, cell: (a) => `${a.gatesPassed ? `<span class="badge ok">${a.gatesPassed}</span>` : ""}${a.gatesFailed ? ` <span class="badge bad">${a.gatesFailed}</span>` : ""}${!a.gatesPassed && !a.gatesFailed ? '<span class="dim">none</span>' : ""}` },
+    { key: "diff", label: "diff", width: 108, num: true, get: (a) => a.churn ?? -1, cell: (a) => (a.churn === null ? '<span class="dim">measuring…</span>' : `<span title="${a.filesChanged} file${a.filesChanged === 1 ? "" : "s"} · +${a.insertions} −${a.deletions}">${a.churn} lines</span>`) },
+    { key: "sess", label: "session", flex: true, get: (a) => a.sessionId ?? "", cell: (a) => (a.sessionId ? `<a href="#" data-s="${esc(a.sessionId)}">${esc(a.model ?? a.sessionId.slice(0, 8))}</a>` : '<span class="dim">—</span>') },
+  ];
+  const block = (t) => {
+    const v = VERDICT[t.verdict] ?? VERDICT.undecided;
+    const sub = `${t.totals.arms} arm${t.totals.arms === 1 ? "" : "s"} · ${t.totals.finished} finished · ${usd(t.totals.costUsd)} spent${t.winner ? ` · <b>${esc(t.winner)}</b> won${t.totals.savedUsd > 0.005 ? `, ${usd(t.totals.savedUsd)} cheaper than the dearest` : ""}` : ""}`;
+    return `<h2 class="mt-sec">${esc(t.task)} <span class="badge ${v[0]}">${v[1]}</span> <span>${sub}</span></h2>` +
+      dataTable({ id: `ab-${t.task}`, columns: cols, rows: t.arms, rerender: touch });
+  };
+  const running = trials.filter((t) => t.verdict === "undecided").length;
+  $("#main").innerHTML = head(`${trials.length} trial${trials.length === 1 ? "" : "s"}${running ? ` · ${running} still running` : ""}`) +
+    trials.map(block).join("") +
+    `<p class="dim" style="margin-top:12px;font-size:var(--fs-sm)">An arm wins only if it finished and passed every gate it ran; among those, the cheapest wins and wall time breaks ties. A cheap arm that failed a gate never wins — the cheap wrong answer is not the answer. Each arm claims <code>task#arm</code>, so it gets its own worktree and the one-holder claim is never bent.</p>`;
+}
+
+// M9.14: issue → task → claim → session → branch → PR → merged, as one row per piece of work.
+// The six link dots are the graph: a filled run that stops is exactly where the trail goes cold.
+const LINK_ORDER = ["task", "claim", "session", "branch", "pr", "merged"];
+const BREAK_LABEL = {
+  "no-task": ["bad", "No task", "landed with no task behind it"],
+  unclaimed: ["warn", "Unclaimed", "no claim was ever taken for this task"],
+  "no-session": ["warn", "No session", "claimed, but no session did the work"],
+  "no-branch": ["warn", "No branch", "worked on, but never reached a branch"],
+  "no-pr": ["warn", "No PR", "a branch exists but no pull request"],
+  "open-pr": ["acc", "Open PR", "the pull request has not merged yet"],
+};
+// Lead time spans minutes to months, and "889.4h" both overflows a numeric column and means
+// nothing to a reader. Never wider than 5 characters.
+function leadTime(h) {
+  if (h < 1) return `${Math.round(h * 60)}m`;
+  if (h < 48) return `${h.toFixed(h < 10 ? 1 : 0)}h`;
+  const d = h / 24;
+  return d < 100 ? `${d.toFixed(d < 10 ? 1 : 0)}d` : `${Math.round(d / 7)}w`;
+}
+function renderProvenance() {
+  const p = state.provenance;
+  const head = (sub) => `<h2>Provenance <span>${sub}</span></h2>`;
+  if (!p) { $("#main").innerHTML = head("follow the work back") + `<div class="empty">${PX.clock()}Loading…</div>`; return; }
+  if (!p.chains.length) {
+    $("#main").innerHTML = head("follow the work back") + `<div class="empty">${PX.idle()}Nothing to trace${state.sel ? " in this project" : ""}.<br>Chains appear once a task source is configured or a branch reaches a pull request.</div>`;
+    return;
+  }
+  const t = p.totals;
+  const kpi = (l, v, d, cls = "") => `<div class="kpi ${cls}"><div class="l">${l}</div><div class="v">${v}</div><div class="d">${d}</div></div>`;
+  const kpis = `<div class="kpis">${
+    kpi("Traced", `${t.complete}/${t.tasks}`, "reach a merged PR", t.complete ? "" : "warm")
+  }${kpi("Untracked", t.untracked, t.untracked ? "landed with no task" : "all work has a task", t.untracked ? "hot" : "")
+  }${kpi("Unclaimed", t.unclaimed, "tasks nobody claimed", t.unclaimed ? "warm" : "")
+  }${kpi("Traced spend", usd(t.costUsd), "across every chain")}</div>`;
+
+  const track = (c) => `<span class="track" title="${LINK_ORDER.map((k) => `${k}: ${c.links[k] ? "yes" : "no"}`).join(" · ")}">${
+    LINK_ORDER.map((k) => `<i class="${c.links[k] ? "on" : ""}"></i>`).join("")}</span>`;
+  const cols = [
+    { key: "what", label: "task / branch", width: 190, get: (c) => c.task, cell: (c) => `<b title="${esc(c.task)}${c.fromTask ? "" : " — a branch with no task behind it"}">${esc(c.task)}</b>${c.fromTask ? "" : ' <span class="badge">branch</span>'}` },
+    { key: "track", label: "chain", width: 92, sortable: false, filterable: false, get: (c) => c.depth, cell: track },
+    { key: "gap", label: "trail ends at", width: 118, get: (c) => c.brokenAt ?? "", cell: (c) => { const b = BREAK_LABEL[c.brokenAt]; return b ? `<span class="badge ${b[0]}" title="${esc(b[2])}">${b[1]}</span>` : '<span class="badge ok">Merged</span>'; } },
+    { key: "title", label: "what it was", flex: true, get: (c) => c.title, cell: (c) => `<span class="now" title="${esc(c.title)}">${esc(c.title)}</span>` },
+    { key: "who", label: "held by", width: 120, get: (c) => c.holders.join(","), cell: (c) => (c.holders.length ? esc(c.holders.join(", ")) : '<span class="dim">—</span>') },
+    { key: "sess", label: "sessions", width: 78, num: true, get: (c) => c.sessions.length, cell: (c) => (c.sessions.length ? `<a href="#" data-s="${esc(c.sessions[0].id)}" title="${esc(c.sessions.map((s) => s.title ?? s.id).join(" · "))}">${c.sessions.length}</a>` : '<span class="dim">0</span>') },
+    { key: "pr", label: "PR", width: 74, num: true, get: (c) => c.prNumber ?? 0, cell: (c) => (c.prNumber ? `<a href="${esc(c.prUrl ?? "#")}" target="_blank" rel="noopener">#${c.prNumber}</a>` : '<span class="dim">—</span>') },
+    { key: "cost", label: "cost", width: 74, num: true, get: (c) => c.costUsd, cell: (c) => usd(c.costUsd) },
+    { key: "lead", label: "lead", width: 68, num: true, get: (c) => c.leadHours ?? -1, cell: (c) => (c.leadHours === null ? '<span class="dim">—</span>' : leadTime(c.leadHours)) },
+  ];
+  $("#main").innerHTML = head(`${t.tasks} chain${t.tasks === 1 ? "" : "s"} · ${t.untracked ? `<b class="navcount">${t.untracked} untracked</b>` : "every branch has a task"}`) + kpis +
+    dataTable({ id: "provenance", columns: cols, rows: p.chains, rerender: touch }) +
+    `<p class="dim" style="margin-top:10px;font-size:var(--fs-sm)">The six dots are task · claim · session · branch · PR · merged — a filled run that stops is where the trail goes cold. Chains are walked from both ends: from tasks forward, and from branches back, so <b>work that landed with no task behind it</b> shows up too. Task rows carry no issue link because the task source records ids and titles, not URLs.</p>`;
+}
+
+// M9.6: which MCP servers the fleet waits on. Latency is hook-to-hook — the wall-clock between
+// PreToolUse and PostToolUse — so it is what the agent actually waited for, including any time a
+// call spent behind a permission prompt. That is why the view leads with p50/p95, not max.
+function renderMcpHealth() {
+  const h = state.mcpHealth;
+  const head = (sub) => `<h2>MCP <span>${sub}</span></h2>`;
+  if (!h) { $("#main").innerHTML = head("server health") + `<div class="empty">${PX.clock()}Loading…</div>`; return; }
+  if (!h.servers.length) {
+    $("#main").innerHTML = head("server health") + `<div class="empty">${PX.idle()}No tool calls in the last 7 days${state.sel ? " in this project" : ""}.</div>`;
+    return;
+  }
+  const t = h.totals;
+  const ms = (v) => (v === null ? '<span class="dim">—</span>' : v < 1000 ? `${v}ms` : v < 60_000 ? `${(v / 1000).toFixed(1)}s` : dur(v));
+  const cols = [
+    { key: "server", label: "server", width: 170, get: (s) => s.server, cell: (s) => `<b>${esc(s.server)}</b>${s.mcp ? "" : ' <span class="badge">built-in</span>'}` },
+    { key: "calls", label: "calls", width: 74, num: true, get: (s) => s.calls, cell: (s) => s.calls.toLocaleString() },
+    { key: "sessions", label: "sessions", width: 78, num: true, get: (s) => s.sessions, cell: (s) => s.sessions },
+    { key: "p50", label: "p50", width: 68, num: true, get: (s) => s.p50Ms ?? -1, cell: (s) => ms(s.p50Ms) },
+    { key: "p95", label: "p95", width: 68, num: true, get: (s) => s.p95Ms ?? -1, cell: (s) => ms(s.p95Ms) },
+    { key: "max", label: "slowest", width: 78, num: true, get: (s) => s.maxMs ?? -1, cell: (s) => `<span class="dim" title="Includes any time the call spent waiting on a person">${ms(s.maxMs)}</span>` },
+    { key: "wait", label: "waited", width: 82, num: true, get: (s) => s.totalMs, cell: (s) => dur(s.totalMs) },
+    { key: "unans", label: "no reply", width: 78, num: true, get: (s) => s.unanswered, cell: (s) => (s.unanswered ? `<b class="bad">${s.unanswered}</b>` : '<span class="dim">0</span>') },
+    { key: "err", label: "errors", width: 74, num: true, get: (s) => s.errorRate, cell: (s) => (s.errors ? `<b class="bad">${Math.round(s.errorRate * 100)}%</b>` : '<span class="dim">0</span>') },
+    { key: "tools", label: "busiest tools", flex: true, sortable: false, get: () => null, cell: (s) => s.tools.map((x) => `<span class="br" title="${esc(x.tool)} · ${x.calls} calls${x.p50Ms === null ? "" : ` · p50 ${x.p50Ms}ms`}">${esc(x.tool)} <b>${x.calls}</b></span>`).join(" ") },
+  ];
+  const share = t.totalMs ? Math.round((t.mcpMs / t.totalMs) * 100) : 0;
+  const sub = `${t.servers} MCP server${t.servers === 1 ? "" : "s"} · ${t.calls.toLocaleString()} call${t.calls === 1 ? "" : "s"} · last 7 days · ${dur(t.mcpMs)} waiting on MCP (${share}% of all tool time)`;
+  $("#main").innerHTML = head(sub) +
+    dataTable({ id: "mcp-health", columns: cols, rows: h.servers, rerender: touch }) +
+    `<p class="dim" style="margin-top:10px;font-size:var(--fs-sm)">Latency is measured hook to hook, so it is the wall-clock an agent actually waited — a call held behind a permission prompt carries that wait too, which is why <b>slowest</b> can be hours and p50/p95 are the numbers to read. <b>errors</b> counts only unambiguous failures: a command that merely prints the word "error" is not one.</p>`;
+}
+
+// M9.7: gate flakiness and cost. A gate that flips on the *same task* told you two different
+// things about identical work — that is the number worth ranking on, not a raw fail count.
+function renderGateHealth() {
+  const h = state.gateHealth;
+  const head = (sub) => `<h2>Gates <span>${sub}</span></h2>`;
+  if (!h) { $("#main").innerHTML = head("flakiness and wall-clock") + `<div class="empty">${PX.clock()}Loading…</div>`; return; }
+  if (!h.gates.length) {
+    $("#main").innerHTML = head("flakiness and wall-clock") + `<div class="empty">${PX.idle()}No gate runs in the last 30 days${state.sel ? " in this project" : ""}.<br>Gates appear here once <code>swarm_gate_run</code> or a workflow's gate step records one.</div>`;
+    return;
+  }
+  const t = h.totals;
+  const secs = (v) => (v === null ? '<span class="dim">—</span>' : v < 1000 ? `${v}ms` : `${(v / 1000).toFixed(1)}s`);
+  // Oldest-first strip, matching Recent gates on the Board.
+  const strip = (g) => {
+    const rs = [...g.history].reverse();
+    return `<span class="gh" title="last ${rs.length} run${rs.length === 1 ? "" : "s"}, oldest first">${rs.map((r) => `<i class="${r.verdict === "pass" ? "ok" : "bad"}" title="${esc(r.task)} · ${esc(r.at)}${r.durationMs === null ? "" : ` · ${(r.durationMs / 1000).toFixed(1)}s`}"></i>`).join("")}</span>`;
+  };
+  const cols = [
+    { key: "gate", label: "gate", width: 150, get: (g) => g.gate, cell: (g) => `<b>${esc(g.gate)}</b>${g.flaky ? ' <span class="badge bad" title="This gate returned both a pass and a fail on the same task">Flaky</span>' : ""}` },
+    { key: "history", label: "history", width: 150, sortable: false, filterable: false, get: () => null, cell: strip },
+    { key: "runs", label: "runs", width: 60, num: true, get: (g) => g.runs, cell: (g) => g.runs },
+    { key: "pass", label: "pass rate", width: 84, num: true, get: (g) => g.passRate, cell: (g) => `${Math.round(g.passRate * 100)}%` },
+    { key: "flips", label: "flips", width: 64, num: true, get: (g) => g.flips, cell: (g) => (g.flips ? `<b class="bad">${g.flips}</b>` : '<span class="dim">0</span>') },
+    { key: "p50", label: "p50", width: 66, num: true, get: (g) => g.p50Ms ?? -1, cell: (g) => secs(g.p50Ms) },
+    { key: "p95", label: "p95", width: 66, num: true, get: (g) => g.p95Ms ?? -1, cell: (g) => secs(g.p95Ms) },
+    { key: "max", label: "slowest", width: 74, num: true, get: (g) => g.maxMs ?? -1, cell: (g) => secs(g.maxMs) },
+    { key: "total", label: "total", width: 74, num: true, get: (g) => g.totalMs, cell: (g) => (g.timedRuns ? dur(g.totalMs) : '<span class="dim">—</span>') },
+    { key: "last", label: "last", flex: true, get: (g) => g.lastAt ?? "", cell: (g) => (g.lastAt ? `${g.lastVerdict === "pass" ? '<span class="badge ok">Pass</span>' : '<span class="badge warn">Fail</span>'} <span class="dim">${ago(g.lastAt)}</span>` : '<span class="dim">—</span>') },
+  ];
+  const sub = `${t.gates} gate${t.gates === 1 ? "" : "s"} · ${t.runs} run${t.runs === 1 ? "" : "s"} · last 30 days${t.flakyGates ? ` · <b class="navcount">${t.flakyGates} flaky</b>` : " · none flaky"}${t.totalMs ? ` · ${dur(t.totalMs)} of wall-clock` : ""}`;
+  $("#main").innerHTML = head(sub) +
+    dataTable({ id: "gate-health", columns: cols, rows: h.gates, rerender: touch }) +
+    `<p class="dim" style="margin-top:10px;font-size:var(--fs-sm)">Flaky = the same gate returned both a pass and a fail on one task. A gate that fails on one task and passes on another is doing its job, and is not counted. Durations cover executed gates only — a gate an agent simply recorded has no wall-clock.</p>`;
+}
+
+// M9.8: machine hygiene — what the fleet left behind. Observation plus the two actions that
+// already exist (stop a process, remove a worktree); nothing here reclaims anything on its own,
+// and a worktree with uncommitted or unpushed work is never offered as safe.
+const ISSUE_BADGE = {
+  dead: ["bad", "Dead"], orphaned: ["bad", "Orphaned"], hungry: ["warn", "Hungry"],
+  stale: ["warn", "Stale"], abandoned: ["warn", "Abandoned"], heavy: ["", "Heavy"],
+};
+const mb = (kb) => (kb === null || kb === undefined ? '<span class="dim">—</span>' : kb >= 1024 * 1024 ? `${(kb / 1024 / 1024).toFixed(1)} GB` : `${Math.round(kb / 1024)} MB`);
+const issueBadge = (i) => { const b = ISSUE_BADGE[i]; return b ? `<span class="badge ${b[0]}">${b[1]}</span>` : '<span class="dim">ok</span>'; };
+function renderHygiene() {
+  const h = state.hygiene;
+  const head = (sub) => `<h2>Hygiene <span>${sub}</span></h2>`;
+  if (!h) { $("#main").innerHTML = head("what the fleet left behind") + `<div class="empty">${PX.clock()}Loading…</div>`; return; }
+  const t = h.totals;
+  if (!h.processes.length && !h.worktrees.length) {
+    $("#main").innerHTML = head("what the fleet left behind") + `<div class="empty">${PX.idle()}Nothing tracked${state.sel ? " in this project" : ""}.<br>Processes started through <code>swarm serve</code> / <code>proc</code> and this machine's worktrees appear here.</div>`;
+    return;
+  }
+  const kpi = (l, v, d, cls = "") => `<div class="kpi ${cls}"><div class="l">${l}</div><div class="v">${v}</div><div class="d">${d}</div></div>`;
+  const badge = (n, label, cls) => (n > 0 ? `<span class="badge ${cls}">${n} ${label}</span>` : "");
+  // Disk is sampled in the background, so "0 MB" before the first sweep would be a lie — say so.
+  const sampled = h.worktrees.filter((w) => w.diskKb !== null).length;
+  const diskPending = h.worktrees.length > 0 && sampled === 0;
+  const totalDisk = diskPending ? "measuring…" : mb(t.diskKb);
+  const kpis = `<div class="kpis">${
+    kpi("Needs a look", t.issues, t.issues ? "processes + worktrees" : "all clean", t.issues ? "hot" : "")
+  }${kpi("Processes", t.processes, t.orphanedProcesses || t.deadProcesses ? `${t.orphanedProcesses} orphaned · ${t.deadProcesses} dead` : "all healthy", t.orphanedProcesses || t.deadProcesses ? "hot" : "")
+  }${kpi("Worktrees", t.worktrees, t.staleWorktrees ? `${t.staleWorktrees} stale` : "none stale", t.staleWorktrees ? "warm" : "")
+  }${kpi("Reclaimable", diskPending ? '<span class="dim">—</span>' : mb(t.reclaimableKb), diskPending ? `measuring ${h.worktrees.length} worktrees…` : `of ${mb(t.diskKb)} on disk`, !diskPending && t.reclaimableKb ? "warm" : "")}</div>`;
+
+  const pcols = [
+    { key: "issue", label: "state", width: 96, get: (p) => p.issue ?? "", cell: (p) => issueBadge(p.issue) },
+    { key: "name", label: "name", width: 130, get: (p) => p.name, cell: (p) => `<b>${esc(p.name)}</b>` },
+    { key: "kind", label: "kind", width: 64, get: (p) => p.kind, cell: (p) => `<span class="br">${esc(p.kind)}</span>` },
+    { key: "pid", label: "pid", width: 64, num: true, get: (p) => p.pid, cell: (p) => p.pid },
+    { key: "port", label: "port", width: 60, num: true, get: (p) => p.port ?? 0, cell: (p) => p.port ?? '<span class="dim">—</span>' },
+    { key: "cpu", label: "cpu", width: 60, num: true, get: (p) => p.cpuPct ?? -1, cell: (p) => (p.cpuPct === null ? '<span class="dim">—</span>' : `${p.cpuPct.toFixed(0)}%`) },
+    { key: "rss", label: "memory", width: 78, num: true, get: (p) => p.rssKb ?? -1, cell: (p) => mb(p.rssKb) },
+    { key: "note", label: "why", flex: true, get: (p) => p.note ?? "", cell: (p) => (p.note ? `<span class="now" title="${esc(p.note)}">${esc(p.note)}</span>` : '<span class="dim">—</span>') },
+    { key: "act", label: "", width: 70, sortable: false, filterable: false, get: () => null, cell: (p) => (p.reclaimable ? `<a href="#" class="mini-act" data-procstop="${esc(String(p.pid))}" data-procproj="${esc(p.projectId)}" title="Stop this process">Stop</a>` : "") },
+  ];
+  const wcols = [
+    { key: "issue", label: "state", width: 106, get: (w) => w.issue ?? "", cell: (w) => issueBadge(w.issue) },
+    { key: "branch", label: "branch", width: 190, get: (w) => w.branch ?? w.path, cell: (w) => `<b>${esc(w.branch ?? "(detached)")}</b>${w.main ? ' <span class="badge">main</span>' : ""}` },
+    { key: "disk", label: "disk", width: 78, num: true, get: (w) => w.diskKb ?? -1, cell: (w) => mb(w.diskKb) },
+    { key: "idle", label: "untouched", width: 88, num: true, get: (w) => w.idleMs ?? -1, cell: (w) => (w.idleMs === null ? '<span class="dim">—</span>' : dur(w.idleMs)) },
+    { key: "state2", label: "work", width: 130, get: (w) => w.dirty * 1000 + w.ahead, cell: (w) => `${badge(w.dirty, "Dirty", "warn")}${badge(w.ahead, "Unpushed", "acc")}${w.dirty === 0 && w.ahead <= 0 ? (w.merged ? '<span class="badge ok">Merged</span>' : '<span class="badge">Clean</span>') : ""}` },
+    { key: "held", label: "in use", width: 110, get: (w) => w.heldByClaim ?? "", cell: (w) => (w.heldByClaim ? `<span class="br" title="Claimed">${esc(w.heldByClaim)}</span>` : w.liveSessions ? `<span class="badge acc">${w.liveSessions} live</span>` : '<span class="dim">—</span>') },
+    { key: "note", label: "why", flex: true, get: (w) => w.note ?? "", cell: (w) => (w.note ? `<span class="now" title="${esc(w.note)}">${esc(w.note)}</span>` : '<span class="dim">—</span>') },
+    { key: "act", label: "", width: 80, sortable: false, filterable: false, get: () => null, cell: (w) => (w.reclaimable ? `<a href="#" class="mini-act bad" data-wtrm="${esc(w.projectId)}:${esc(w.path)}" title="Remove this worktree">Remove</a>` : "") },
+  ];
+  const sub = t.issues ? `<b class="navcount">${t.issues} need${t.issues === 1 ? "s" : ""} a look</b>` : "nothing to clean up";
+  $("#main").innerHTML = head(sub) + kpis +
+    `<h2 class="mt-sec">Processes <span>${h.processes.length} tracked · started through swarm, never matched by command pattern</span></h2>` +
+    (h.processes.length ? dataTable({ id: "hyg-procs", columns: pcols, rows: h.processes, rerender: touch }) : `<div class="empty">${PX.idle()}No tracked processes.</div>`) +
+    `<h2 class="mt-sec">Worktrees <span>${h.worktrees.length} on this machine · ${totalDisk}${diskPending ? "" : " on disk"}${sampled && sampled < h.worktrees.length ? ` · ${sampled}/${h.worktrees.length} measured` : ""}</span></h2>` +
+    (h.worktrees.length ? dataTable({ id: "hyg-trees", columns: wcols, rows: h.worktrees, rerender: touch }) : `<div class="empty">${PX.idle()}No worktrees.</div>`) +
+    `<p class="dim" style="margin-top:10px;font-size:var(--fs-sm)">Only merged worktrees with nothing uncommitted, nothing unpushed and nobody working in them are offered for removal. Anything unmerged is listed but never called safe. Disk is sampled in the background, so sizes fill in a moment after the view opens.</p>`;
 }
 
 // M9.12: live file-collision graph — which live sessions touch which files, contested files
 // highlighted. Data from /v1/graphs/collisions (fetched by the poll while the view is open).
 function renderGraphs() {
+  const tab = state.graphTab ?? "collisions";
+  const chip = (k, label, n) => `<span class="chip ${tab === k ? "on" : ""}" data-graphtab="${k}">${label}${n ? ` <b>${n}</b>` : ""}</span>`;
+  const tabs = `<div class="chips">${chip("collisions", "Collisions", state.collisions?.contested ?? 0)}${chip("lineage", "Lineage", state.lineage?.edges?.length ?? 0)}</div>`;
+  const head = (sub) => `<h2>Graphs <span>${sub}</span></h2>${tabs}`;
+  if (tab === "lineage") return renderLineage(head);
   const g = state.collisions;
   const title = (s) => s.title ?? s.id.slice(0, 8);
-  const head = (sub) => `<h2>Graphs <span>${sub}</span></h2>`;
   if (!g || !g.sessions.length) {
     $("#main").innerHTML = head("live file collisions") + `<div class="empty">${PX.idle()}No live sessions${state.sel ? " in this project" : ""}.<br>The collision graph shows who is touching what, the moment two agents run at once.</div>`;
     return;
@@ -1242,6 +1717,30 @@ function renderGraphs() {
      <div style="margin-top:10px;display:flex;gap:16px;align-items:center">${viz.legend(agents)}<span class="dim" style="font-size:var(--fs-sm)">solid edge = writing · faint edge = reading · <span style="color:var(--bad)">red file</span> = two sessions on it, at least one writing</span></div>`;
 }
 
+// M9.13: who started whom, who told whom, who picked up whose work. Every edge is a recorded
+// relationship — nothing is inferred from timing.
+const EDGE_LEGEND = [
+  ["subagent", "spawned a subagent", "var(--acc)", ""],
+  ["dispatch", "dispatched a run", "var(--c3,#5a9e6f)", ""],
+  ["message", "sent a message", "var(--warn)", "3 3"],
+  ["handoff", "handed the task on", "var(--dim)", "6 3"],
+];
+function renderLineage(head) {
+  const g = state.lineage;
+  if (!g) { $("#main").innerHTML = head("session lineage") + `<div class="empty">${PX.clock()}Loading…</div>`; return; }
+  if (!g.nodes.length) {
+    $("#main").innerHTML = head("session lineage") + `<div class="empty">${PX.idle()}No relationships between sessions${state.sel ? " in this project" : ""} in the last 14 days.<br>Edges appear when a session spawns a subagent, dispatches a run, messages another agent, or hands a task on.</div>`;
+    return;
+  }
+  const key = EDGE_LEGEND.filter(([k]) => g.byKind[k]).map(([k, label, color, dash]) =>
+    `<span style="display:inline-flex;align-items:center;gap:6px"><svg width="22" height="8" aria-hidden="true"><line x1="0" y1="4" x2="22" y2="4" stroke="${color}" stroke-width="2"${dash ? ` stroke-dasharray="${dash}"` : ""}/></svg><span class="dim" style="font-size:var(--fs-sm)">${label} <b>${g.byKind[k]}</b></span></span>`).join("");
+  const sub = `${g.nodes.length} session${g.nodes.length === 1 ? "" : "s"} · ${g.edges.length} link${g.edges.length === 1 ? "" : "s"} · ${g.roots} root${g.roots === 1 ? "" : "s"} · last 14 days${g.truncated ? ` · <b class="navcount" title="The best-connected ${g.nodes.length} are drawn; the rest would be an unreadable column">${g.truncated} not drawn</b>` : ""}`;
+  $("#main").innerHTML = head(sub) +
+    `<div class="card" style="padding:14px;overflow:auto;max-height:72vh">${viz.dag(g)}</div>
+     <div style="margin-top:10px;display:flex;gap:18px;align-items:center;flex-wrap:wrap">${key}
+       <span class="dim" style="font-size:var(--fs-sm)">a green pill is a collapsed group — click to open it · ring = outcome · thicker dot = more links · a bowed edge closed a loop</span></div>`;
+}
+
 function renderTimeline() {
   loadTimelineDetail();
   const now = Date.now();
@@ -1291,7 +1790,23 @@ async function openSession(id) {
 // Rendered log rows, keyed per event seq / turn id (+ the mutable turn fields) so only new rows are formatted.
 const rowCache = new Map();
 let logRendered = null; // keys of the rows currently in #log, in order — enables append-only updates
-const evRow = (i) => `<div class="ev ${i.cls}"><span class="t">${hhmm(i.ts)}</span><span class="k">${esc(i.kind)}</span><span class="m">${esc(i.text)}${i.out ? `<span class="dim"> · ${tok(i.out)} out${i.cost != null ? ` · $${i.cost.toFixed(3)}` : ""}</span>` : ""}</span></div>`;
+// The kind column showed raw hook names — "pretooluse", "subagentstop" — which are long, repeat on
+// every row, and say nothing the row does not: a tool row already begins with the tool's name. Short
+// labels here buy the transcript back ~70px of width per row; the full name stays in the title.
+const EV_LABEL = {
+  PreToolUse: "tool", PostToolUse: "result", UserPromptSubmit: "you", Stop: "stop",
+  SubagentStart: "sub →", SubagentStop: "sub ←", Notification: "note",
+  SessionStart: "start", SessionEnd: "end", PreCompact: "compact",
+  assistant: "agent", subagent: "sub",
+  // ledger events reach the transcript too, and their dotted type names are the longest of all
+  "incident.opened": "rule", "question.asked": "asks", "question.answered": "answer",
+  "message.sent": "msg", "gate.recorded": "gate", "session.stuck": "stuck",
+  "permission.requested": "perm?", "permission.resolved": "perm",
+  "claim.acquired": "claim", "claim.released": "release", "pr.opened": "pr",
+};
+// Anything unmapped keeps its last dotted segment rather than the whole `a.b` name.
+const evLabel = (k) => EV_LABEL[k] ?? String(k).split(".").at(-1) ?? String(k);
+const evRow = (i) => `<div class="ev ${i.cls}"><span class="t">${hhmm(i.ts)}</span><span class="k" title="${esc(i.kind)}">${esc(evLabel(i.kind))}</span><span class="m">${esc(i.text)}${i.out ? `<span class="dim"> · ${tok(i.out)} out${i.cost != null ? ` · $${i.cost.toFixed(3)}` : ""}</span>` : ""}</span></div>`;
 // Merge the two ts-sorted inputs (events by seq ≈ ts, turns by ts) in one pass → [{key, html}].
 function sessionStream() {
   const out = [];
@@ -1369,16 +1884,37 @@ function replayGo(delta) {
 }
 
 // Spawned sessions get a stdin box while their run is live (M3.3); interactive ones are told where to type.
-// M7.6: the session's message thread (sent + received) and a compose box.
+// M7.6: the session's message thread (sent + received) and a compose box. Messages are never an
+// interrupt: they ride along as context on the agent's next tool call, so the block says so.
 function messageThread(s) {
   const ms = (state.msgs ?? []).filter((m) => m.sessionId === s.id || m.fromSession === s.id).slice().reverse();
+  const queued = ms.filter((m) => m.fromSession !== s.id && !m.deliveredAt).length;
+  const ended = s.state === "ended";
   const row = (m) => {
     const out = m.fromSession === s.id;
     return `<div class="msg ${out ? "out" : "in"}" title="${esc(m.createdAt)}${m.deliveredAt ? "" : " · not delivered yet"}">
       <span class="msg-f">${out ? `→ ${esc(m.task ?? m.toKind)}` : esc(m.from ?? "?")}${m.deliveredAt ? "" : ' <i class="dim">·queued</i>'}</span>${esc(m.text)}</div>`;
   };
-  return `<h4>messages</h4>${ms.length ? `<div class="msgs">${ms.map(row).join("")}</div>` : '<span class="dim">None yet.</span>'}
-    <div class="msg-compose"><input id="msgText" placeholder="Message this agent… (delivered on its next tool call)" autocomplete="off"><button id="msgSend" data-sid="${s.id}" data-pid="${s.projectId}">${ic("arrow-right", 13)}</button></div>`;
+  const hint = ended
+    ? `${ic("warning", 12)} Session ended — there is nothing left to deliver to.`
+    : queued
+      ? `${ic("clock", 12)} <b>${queued} queued</b> · delivered the next time this agent calls a tool.`
+      : `${ic("comment-text", 12)} Delivered as context on this agent's next tool call — never an interrupt.`;
+  return `<h4>messages${ms.length ? ` <span class="badge">${ms.length}</span>` : ""}</h4>
+    ${ms.length ? `<div class="msgs">${ms.map(row).join("")}</div>` : ""}
+    <div class="msg-compose">
+      <input id="msgText" placeholder="Message this agent…" aria-label="Message this agent" autocomplete="off"${ended ? " disabled" : ""}>
+      <button id="msgSend" data-sid="${s.id}" data-pid="${s.projectId}" title="Send (Enter)"${ended ? " disabled" : ""}>${ic("arrow-right", 12)}Send</button>
+    </div>
+    <p class="msg-hint">${hint}</p>`;
+}
+
+// The transcript file, as one copyable row: the directory truncates, the file name always shows.
+function transcriptRow(s) {
+  if (!s.transcriptPath) return "";
+  const p = short(s.transcriptPath);
+  const cut = p.lastIndexOf("/");
+  return `<h4>transcript</h4><button class="pathrow" data-copy="${esc(s.transcriptPath)}" title="Copy path · ${esc(p)}">${ic("file-text", 12)}<span class="dir">${esc(cut < 0 ? "" : p.slice(0, cut + 1))}</span><b>${esc(cut < 0 ? p : p.slice(cut + 1))}</b>${ic("copy", 12, "cp")}</button>`;
 }
 
 // M7.7: questions this session is waiting on a human for
@@ -1413,6 +1949,8 @@ async function sendStdin() {
 }
 document.addEventListener("click", (ev) => {
   if (ev.target.closest("#stdinSend")) return sendStdin();
+  const cp = ev.target.closest("[data-copy]");
+  if (cp) { ev.preventDefault(); copy(cp.dataset.copy); cp.classList.add("copied"); setTimeout(() => cp.classList.remove("copied"), 1000); return; }
   const qa = ev.target.closest("[data-qanswer]");
   if (qa) { ev.preventDefault(); return answerQuestion(Number(qa.dataset.qanswer), qa.dataset.text); }
   const a = ev.target.closest("[data-perm-allow]"), d = ev.target.closest("[data-perm-deny]");
@@ -1435,9 +1973,9 @@ function renderSession() {
   const t = s.tokens;
   const ctx = t.input + t.cacheRead + t.cacheWrite;
   const subTurns = state.turns.filter((x) => x.sidechain || x.agentId);
-  const STAT_ICON = { cost: "coin", model: "robot", turns: "arrows-clockwise", "tool calls": "wrench", output: "chart-bar", context: "rows", started: "clock", "last seen": "eye", "subagent turns": "tree-structure" };
+  const STAT_ICON = { cost: "coin", model: "robot", turns: "arrows-clockwise", "tool calls": "wrench", output: "chart-bar", processed: "rows", started: "clock", "last seen": "eye", "subagent turns": "tree-structure" };
   const stat = (k, v) => `<div class="stat"><span>${ic(STAT_ICON[k] ?? "list-bullets", 13)}${k}</span><b>${v}</b></div>`;
-  const head = `<h2 class="hrow"><a class="back" href="#" id="back">${ic("arrow-left", 13)}back</a> ${esc(projName(s.projectId))} · <span class="s ${s.state}"></span> ${kindIcon(s)}${agentBadge(s.agent)}<b>${esc(s.title ?? s.id.slice(0, 8))}</b> <span>${esc(short(s.cwd))}${s.branch ? ` · ${esc(s.branch)}` : ""} · ${s.state}</span><a href="#" class="nav" id="replay" style="margin-left:auto" title="Step through this session's tool calls">${ic("play", 13)} Replay</a>${(state.worktrees[s.projectId] ?? []).some((w) => !w.main && (s.cwd === w.path || s.cwd.startsWith(`${w.path}/`))) ? `<a href="#" class="nav" id="sessDiff" title="What this session's worktree changed">${ic("folders", 13)} Diff</a>` : ""}${s.state === "ended" ? `<a href="#" class="nav" id="resumeDead" title="Spawn a run that picks up this session's task from its handoff + last actions">${ic("reload", 13)} Resume where it died</a>` : ""}</h2>`;
+  const head = `<h2 class="hrow"><a class="back" href="#" id="back">${ic("arrow-left", 13)}back</a> ${esc(projName(s.projectId))} · <span class="s ${s.state}"></span> ${kindIcon(s)}${agentBadge(s.agent)}<b>${esc(s.title ?? s.id.slice(0, 8))}</b> <span>${esc(short(s.cwd))}${s.branch ? ` · ${esc(s.branch)}` : ""} · ${s.state}</span><a href="#" class="nav" id="replay" style="margin-left:auto" title="Step through this session's tool calls">${ic("play", 13)} Replay</a>${(state.worktrees[s.projectId] ?? []).some((w) => !w.main && (s.cwd === w.path || s.cwd.startsWith(`${w.path}/`))) ? `<a href="#" class="nav" id="sessDiff" title="What this session's worktree changed">${ic("folders", 13)} Diff</a>` : ""}${s.state === "ended" ? `<a href="#" class="nav" id="resumeDead" title="Spawn a run that picks up this session's task from its handoff + last actions">${ic("arrows-clockwise", 13)} Resume where it died</a>` : ""}</h2>`;
   const side = `<div class="stats">
     ${stat("cost", usd(s.costUsd))}${stat("model", esc(model(s.model)) || "—")}${stat("turns", s.turns)}${stat("tool calls", s.toolCalls)}
     ${stat("output", `${tok(t.output)}${t.thinking ? `<small> · ${tok(t.thinking)} thinking</small>` : ""}`)}${stat("processed", `${tok(ctx)}<small> · ${ctx ? ((100 * t.cacheRead) / ctx).toFixed(0) : 0}% cached</small>`)}
@@ -1449,12 +1987,24 @@ function renderSession() {
     <h4>tools</h4>${tools.length ? viz.hbars(tools.slice(0, 8).map(([k, v]) => [k.replace(/^mcp__[a-z0-9-]+__/i, ""), v])) : '<span class="dim">None yet</span>'}
     ${messageThread(s)}
     ${questionCards(s)}
-    ${s.transcriptPath ? `<h4>transcript</h4><div class="dim mono" style="word-break:break-all">${ic("file-text", 12)} ${esc(short(s.transcriptPath))}</div>` : ""}`;
+    ${transcriptRow(s)}`;
   if (logEl && isAppend(rows)) {
     // Same session, rows only appended: patch header + sidebar, append the new rows — #log keeps its
     // scroll position (and its DOM) untouched.
     $("#main > h2").outerHTML = head;
+    // The message compose box lives inside .side, and this fast-path runs on every event while the
+    // agent works — carry the draft (and the caret) across the swap instead of wiping what is
+    // being typed.
+    const msg = $("#msgText");
+    const draft = msg?.value ? { v: msg.value, focused: document.activeElement === msg, pos: msg.selectionStart } : null;
     $("#main .side").innerHTML = side;
+    if (draft) {
+      const el = $("#msgText");
+      if (el) {
+        el.value = draft.v;
+        if (draft.focused) { el.focus(); el.setSelectionRange(draft.pos, draft.pos); }
+      }
+    }
     const sb = stdinBox(s); const cur = $("#main .stdin");
     if (cur && cur.outerHTML !== sb && document.activeElement?.id !== "stdinText") cur.outerHTML = sb;
     else if (!cur && sb) $("#main").insertAdjacentHTML("beforeend", sb);
@@ -1614,7 +2164,7 @@ function menuSpec(kind, d) {
     if (!p) return null;
     const green = p.checks !== "fail" && p.mergeable && !p.draft;
     return { title: `#${p.number}`, items: [
-      { label: "Open on " + (p.forge === "gitlab" ? "GitLab" : "GitHub"), icon: "arrow-square-out", run: () => window.open(p.url, "_blank") },
+      { label: "Open on " + (p.forge === "gitlab" ? "GitLab" : "GitHub"), icon: "arrow-square-out", run: () => openExternal(p.url) },
       { label: "Copy URL", icon: "copy", run: () => copy(p.url) },
       { divider: true },
       { label: "Squash-merge", icon: "git-pull-request", disabled: !green, caption: green ? (p.forge === "gitlab" ? "glab" : "gh") : p.draft ? "draft" : p.checks === "fail" ? "checks failing" : "not mergeable", run: () => act.merge(p.projectId, p.number) },
@@ -1656,8 +2206,8 @@ function menuSpec(kind, d) {
       { divider: true },
       { label: "Desktop notifications", icon: "bell", pressed: notifyOn(), caption: notifyOn() ? "on" : "off", run: () => { notifyOn() ? disableNotifications() : enableNotifications(); $("#settings").blur(); } },
       { label: "What's New", icon: "star", caption: `v${state.version ?? "?"}`, run: () => whatsNew() },
-      { label: "Documentation", icon: "book-open", caption: "getswarm", run: () => window.open("https://getswarm.vercel.app/docs/", "_blank") },
-      { label: "Send feedback", icon: "comment-text", caption: "GitHub issue", run: () => window.open(feedbackUrl(), "_blank") },
+      { label: "Documentation", icon: "book-open", caption: "getswarm", run: () => openExternal("https://getswarm.vercel.app/docs/") },
+      { label: "Send feedback", icon: "comment-text", caption: "GitHub issue", run: () => openExternal(feedbackUrl()) },
     ] };
   }
   return null;
@@ -1710,9 +2260,13 @@ ${p.reason ?? ""}`.slice(0, 180);
 // What's New: release notes for the running version, from window.RELEASE_NOTES (release-notes.js).
 // The desktop menu calls window.swarmWhatsNew; the settings menu calls whatsNew(); it also opens
 // itself once after an upgrade (localStorage remembers the last version the user saw).
-function releaseNotesFor(version) {
+// `strict` matters: the automatic post-upgrade panel must never fall back. Falling back showed
+// 0.10.0's notes under a "What's New" triggered by upgrading to 0.11.0 — the notes bundle was a
+// stale cached copy that had no 0.11.0 in it, and the fallback quietly hid that.
+function releaseNotesFor(version, { strict = false } = {}) {
   const all = window.RELEASE_NOTES || {};
   if (version && all[version]) return { version, ...all[version] };
+  if (strict) return null;
   const latest = Object.keys(all)[0];
   return latest ? { version: latest, ...all[latest] } : null;
 }
@@ -1741,9 +2295,12 @@ function maybeUpdateNudge(h) {
     <div class="row"><button class="pri" id="updRestart">${ic("arrows-clockwise", 13)} Restart daemon</button><button id="updLater">Later</button></div></div>`;
   document.body.appendChild(el);
   el.addEventListener("click", async (e) => {
-    if (e.target.id === "updLater") return el.remove();
-    if (e.target.id !== "updRestart") return;
-    e.target.textContent = "restarting…";
+    // closest(), not e.target.id: the button holds an <svg> icon, so a click on the glyph itself
+    // targets the svg/path and an id check would miss it.
+    const btn = e.target.closest?.("button");
+    if (btn?.id === "updLater") return el.remove();
+    if (btn?.id !== "updRestart") return;
+    btn.textContent = "restarting…";
     await fetch("/v1/daemon/restart", { method: "POST" }).catch(() => {});
     const t0 = Date.now();
     const wait = setInterval(async () => {
@@ -1760,7 +2317,7 @@ function maybeWhatsNew() {
   let seen; try { seen = localStorage.getItem("swarm.seenVersion"); } catch {}
   if (seen === state.version) return;
   if (!seen) { try { localStorage.setItem("swarm.seenVersion", state.version); } catch {} return; }
-  if (releaseNotesFor(state.version)) whatsNew(state.version);
+  if (releaseNotesFor(state.version, { strict: true })) whatsNew(state.version);
 }
 
 // Star nudge: once a month at most, never on first open, dismissable for good. Pure localStorage —
@@ -1785,7 +2342,7 @@ function maybeStarNudge() {
   el.addEventListener("click", (ev) => {
     const t = ev.target.closest("[data-star]"); if (!t) return;
     ev.preventDefault();
-    if (t.dataset.star === "go") { starSave({ done: now }); window.open(REPO_URL, "_blank"); }
+    if (t.dataset.star === "go") { starSave({ done: now }); openExternal(REPO_URL); }
     else if (t.dataset.star === "never") starSave({ never: now });
     el.remove();
   });
@@ -1807,6 +2364,11 @@ function openMenu(kind, anchor, d) {
   const spec = menuSpec(kind, d);
   if (!spec) return;
   if (!window.menus) { console.warn("menus.js not built — run: bun run build:web"); return; }
+  // Once the menu is up the pointer is over *it*, not the row, so a :hover-only kebab vanishes
+  // under its own menu. Mark the row (and the kebab) until menus:openchange reports the close.
+  if (anchor?.closest) {
+    for (const el of [anchor.closest(".proj"), anchor.closest("tr"), anchor.closest(".more")]) el?.classList.add("menu-open");
+  }
   window.menus.open(anchor, spec);
 }
 document.addEventListener("keydown", (e) => {
@@ -1832,12 +2394,12 @@ document.addEventListener("contextmenu", (ev) => {
 // unreachable (closest() returns null and the click dies silently) — that is how Replay,
 // Resume-where-it-died and the dry-run Re-run button all shipped dead.
 document.addEventListener("click", async (ev) => {
-  const t = ev.target.closest("[data-menu],#settings,#feedback,[data-id],[data-s],#back,[data-view],.chip,[data-tl],[data-days],[data-sdays],[data-release],[data-forcerelease],[data-resrelease],[data-merge],[data-ack],[data-ackall],[data-inc],[data-task-filter],[data-claim],[data-procstop],[data-run],[data-runstop],[data-wtopen],[data-wtrm],[data-wtdiff],[data-wtpr],[data-dffile],#prGo,#sessDiff,#replay,#resumeDead,#drRun,#wtnew,#wtgc,[data-gaterun],[data-codify],[data-wfstop],[data-bmode],[data-emoji],#psAllEmoji,.swatch,#psSave,#msgSend,#dispatch,#dispatchGo,#dispatchClear");
+  const t = ev.target.closest("[data-menu],#settings,#feedback,[data-id],[data-s],#back,[data-view],.chip,[data-tl],[data-days],[data-sdays],[data-release],[data-forcerelease],[data-resrelease],[data-merge],[data-ack],[data-ackall],[data-inc],[data-graphtab],[data-group],#abNew,[data-task-filter],[data-claim],[data-procstop],[data-run],[data-runstop],[data-wtopen],[data-wtrm],[data-wtdiff],[data-wtpr],[data-dffile],#prGo,#sessDiff,#replay,#resumeDead,#drRun,#wtnew,#wtgc,[data-gaterun],[data-codify],[data-wfstop],[data-bmode],[data-emoji],#psAllEmoji,.swatch,#psSave,#msgSend,#dispatch,#dispatchGo,#dispatchClear");
   if (!t) return;
   if (t.dataset.menu) { ev.preventDefault(); ev.stopPropagation(); return openMenu(t.dataset.menu, t, t.dataset); }
   if (t.id === "settings") { ev.preventDefault(); return openMenu("settings", t, {}); }
-  if (t.id === "feedback") { ev.preventDefault(); return window.open(feedbackUrl(), "_blank"); }
-  if (t.dataset.view) { ev.preventDefault(); state.view = t.dataset.view; localStorage.setItem("swarm.view", state.view); state.session = null; state.dirty = true; return refresh(); }
+  if (t.id === "feedback") { ev.preventDefault(); return openExternal(feedbackUrl()); }
+  if (t.dataset.view) { ev.preventDefault(); return showView(t.dataset.view); }
   if (t.dataset.tl) { ev.preventDefault(); state.tlHours = Number(t.dataset.tl); return touch(); }
   if (t.dataset.taskFilter) { state.taskFilter = t.dataset.taskFilter; return touch(); }
   if (t.dataset.emoji !== undefined) { $("#psIcon").value = t.dataset.emoji; $("#psImage").value = ""; setIconPreview(t.dataset.emoji); for (const e of $$(".emoji")) e.classList.toggle("on", e.dataset.emoji === t.dataset.emoji); return; }
@@ -1918,6 +2480,31 @@ document.addEventListener("click", async (ev) => {
   if (t.id === "dryrun") { ev.preventDefault(); return openDryRun(); }
   if (t.dataset.skind !== undefined) { ev.preventDefault(); srch.kind = t.dataset.skind; return runSearch().then(renderSearch); }
   if (t.id === "drRun") { ev.preventDefault(); return runDryRun(); }
+  if (t.id === "abNew") {
+    ev.preventDefault();
+    if (!state.sel) return;
+    const task = prompt("Task id to trial (each arm claims task#model, so each gets its own worktree):");
+    if (!task) return;
+    const models = prompt("Models to compare, comma separated:", "opus-5, sonnet-5");
+    const arms = (models ?? "").split(",").map((m) => m.trim()).filter(Boolean).map((m) => ({ model: m, label: m }));
+    if (arms.length < 2) { alert("A trial needs at least two models."); return; }
+    const r = await fetch("/v1/ab", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ projectId: state.sel, task: task.trim(), arms }),
+    }).then((x) => x.json()).catch(() => null);
+    if (!r) return alert("Could not reach the daemon.");
+    if (r?.failed?.length) alert(`Started ${r.started.length}. Could not start: ${r.failed.map((f) => `${f.arm} — ${f.reason}`).join("; ")}`);
+    return refresh();
+  }
+  if (t.dataset.group) {
+    ev.preventDefault();
+    const open = new Set(state.lineageOpen ?? []);
+    open.has(t.dataset.group) ? open.delete(t.dataset.group) : open.add(t.dataset.group);
+    state.lineageOpen = [...open];
+    return refresh();
+  }
+  if (t.dataset.graphtab) { state.graphTab = t.dataset.graphtab; localStorage.setItem("swarm.graphTab", state.graphTab); return refresh(); }
   if (t.dataset.inc) { state.incFilter = t.dataset.inc; state.allIncidents = null; return refresh(); }
   if (t.dataset.ack) { ev.preventDefault(); ev.stopPropagation(); return act.ack(t.dataset.ack); }
   if (t.dataset.ackall) {
@@ -1971,7 +2558,7 @@ sbApply();
 // ---------- ⌘K palette (M9.1): jump to any view, project or session; falls through to Search.
 const pal = { items: [], view: [], q: "", i: 0 };
 function palBuild() {
-  const items = VIEW_DEFS.map((v) => ({ icon: v.icon, label: v.label, grp: v.group.toLowerCase(), run: () => { state.view = v.id; localStorage.setItem("swarm.view", v.id); state.session = null; state.dirty = true; refresh(); } }));
+  const items = VIEW_DEFS.map((v) => ({ icon: v.icon, label: v.label, grp: v.group.toLowerCase(), run: () => showView(v.id) }));
   for (const p of state.projects) items.push({ icon: "folder-simple", label: p.name, grp: "project", run: () => { state.sel = p.id; localStorage.setItem("swarm.sel", p.id); state.session = null; state.dirty = true; refresh(); } });
   const pname = (id) => state.projects.find((p) => p.id === id)?.name ?? "";
   for (const s of state.sessions) items.push({ icon: "terminal-window", label: s.title || s.id.slice(0, 8), sub: pname(s.projectId), live: isLive(s), grp: "session", run: () => openSession(s.id) });
@@ -2067,21 +2654,49 @@ const PROJECT_EMOJI = ["🐝", "🚀", "🧪", "📦", "🛠️", "🌐", "📊"
 // (⌃⌘Space on macOS, Win+. on Windows) covers search. Filtered by the font once, lazily.
 const EMOJI_BLOCKS = [["Smileys & people", 0x1f600, 0x1f64f], ["Gestures & body", 0x1f440, 0x1f4ff], ["Animals & nature", 0x1f400, 0x1f43f], ["Food", 0x1f32d, 0x1f37f], ["Activity & travel", 0x1f680, 0x1f6ff], ["Objects", 0x1f4a0, 0x1f4ff], ["Symbols", 0x1f300, 0x1f32c], ["More", 0x1f900, 0x1f9ff], ["Extended", 0x1fa70, 0x1faff], ["Misc", 0x2600, 0x26ff], ["Dingbats", 0x2700, 0x27bf]];
 let emojiGrid = null;
-function buildEmojiGrid() {
-  if (emojiGrid) return emojiGrid;
-  // A code point counts as an emoji the platform can draw if it paints colored pixels.
-  const S = 20, cv = document.createElement("canvas"); cv.width = S; cv.height = S;
+// Which code points the platform font actually draws in colour is a per-machine answer, so it is
+// probed once and remembered. Two things made that probe cost ~150ms of blocked main thread:
+// it called getImageData once per code point (1536 GPU->CPU readbacks), and the blocks overlap,
+// so 96 code points were probed — and rendered — twice. Now it is one readback per block over a
+// grid of glyphs, deduped, and the answer is cached across reloads.
+const EMOJI_CACHE_KEY = "swarm.emoji.v1";
+function detectEmoji(a, b) {
+  const S = 20, COLS = 32, n = b - a + 1, rows = Math.ceil(n / COLS);
+  const cv = document.createElement("canvas");
+  cv.width = COLS * S; cv.height = rows * S;
   const c = cv.getContext("2d", { willReadFrequently: true });
   c.font = `${S - 4}px system-ui`; c.textBaseline = "top";
-  const colored = (ch) => {
-    c.clearRect(0, 0, S, S); c.fillText(ch, 0, 0);
-    const d = c.getImageData(0, 0, S, S).data;
-    for (let i = 0; i < d.length; i += 4) if (d[i + 3] > 40 && (Math.abs(d[i] - d[i + 1]) > 24 || Math.abs(d[i + 1] - d[i + 2]) > 24)) return true;
-    return false;
-  };
-  emojiGrid = EMOJI_BLOCKS.map(([name, a, b]) => {
-    const list = [];
-    for (let cp = a; cp <= b; cp++) { const ch = String.fromCodePoint(cp); if (colored(ch)) list.push(ch); }
+  for (let i = 0; i < n; i++) c.fillText(String.fromCodePoint(a + i), (i % COLS) * S, ((i / COLS) | 0) * S);
+  const d = c.getImageData(0, 0, cv.width, cv.height).data, W = cv.width, out = [];
+  // A code point counts as an emoji the platform can draw if its cell paints coloured pixels.
+  for (let i = 0; i < n; i++) {
+    const x0 = (i % COLS) * S, y0 = ((i / COLS) | 0) * S;
+    let ok = false;
+    for (let y = y0; y < y0 + S && !ok; y++)
+      for (let x = x0; x < x0 + S; x++) {
+        const p = (y * W + x) * 4;
+        if (d[p + 3] > 40 && (Math.abs(d[p] - d[p + 1]) > 24 || Math.abs(d[p + 1] - d[p + 2]) > 24)) { ok = true; break; }
+      }
+    if (ok) out.push(String.fromCodePoint(a + i));
+  }
+  return out;
+}
+function buildEmojiGrid() {
+  if (emojiGrid) return emojiGrid;
+  // The cache is keyed by the UA (a font change is what would invalidate it) plus the block list.
+  const sig = `${navigator.userAgent}|${EMOJI_BLOCKS.map((x) => x.join(":")).join(",")}`;
+  let blocks = null;
+  try {
+    const hit = JSON.parse(localStorage.getItem(EMOJI_CACHE_KEY) ?? "null");
+    if (hit?.sig === sig) blocks = hit.blocks;
+  } catch { /* corrupt or unavailable cache: probe again */ }
+  if (!blocks) {
+    const seen = new Set();
+    blocks = EMOJI_BLOCKS.map(([, a, b]) => detectEmoji(a, b).filter((e) => !seen.has(e) && seen.add(e)));
+    try { localStorage.setItem(EMOJI_CACHE_KEY, JSON.stringify({ sig, blocks })); } catch { /* private mode / quota */ }
+  }
+  emojiGrid = EMOJI_BLOCKS.map(([name], i) => {
+    const list = blocks[i] ?? [];
     return list.length ? `<div class="emoji-sec">${esc(name)}</div><div class="emoji-row">${list.map((e) => `<span class="emoji" data-emoji="${e}">${e}</span>`).join("")}</div>` : "";
   }).join("");
   return emojiGrid;
@@ -2235,7 +2850,7 @@ async function submitPr() {
   closePicker();
   state.prs = [];
   await refresh();
-  if (r.url) window.open(r.url, "_blank");
+  if (r.url) openExternal(r.url);
 }
 
 async function openPicker(focusPath = false) {
@@ -2313,7 +2928,7 @@ function connect() {
     if (fresh) notifyForEvent(ev);
     pollSoon();
   };
-  for (const t of ["session.started", "session.ended", "prompt.submitted", "tool.requested", "tool.completed", "subagent.started", "subagent.stopped", "agent.text", "session.notification", "incident.opened", "claim.acquired", "claim.released", "resource.acquired", "resource.released", "resource.reaped", "process.started", "process.exited", "gate.recorded", "claim.orphaned", "claim.renewed", "worktree.bootstrapped", "worktree.created", "worktree.removed", "pr.opened", "question.asked", "question.answered", "message.sent", "dispatch.queued", "dispatch.started", "dispatch.finished", "workflow.started", "workflow.step", "workflow.finished", "permission.requested", "permission.resolved"]) es.addEventListener(t, onAny);
+  for (const t of ["session.started", "session.ended", "prompt.submitted", "tool.requested", "tool.completed", "subagent.started", "subagent.stopped", "agent.text", "session.notification", "incident.opened", "claim.acquired", "claim.released", "resource.acquired", "resource.released", "resource.reaped", "process.started", "process.exited", "gate.recorded", "claim.orphaned", "claim.renewed", "worktree.bootstrapped", "worktree.created", "worktree.removed", "pr.opened", "question.asked", "question.answered", "message.sent", "dispatch.queued", "dispatch.started", "dispatch.finished", "workflow.started", "workflow.step", "workflow.finished", "permission.requested", "permission.resolved", "session.stuck"]) es.addEventListener(t, onAny);
 }
 refresh().then(() => {
   const sid = new URLSearchParams(location.search).get("session");