@ra3orblade/swarm 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ra3orblade/swarm",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Local-first control plane for AI-agent development: watch every Claude Code / Codex / Grok session on your machine, ledger tasks and worktrees, enforce rules as hook denials.",
   "license": "Apache-2.0",
   "type": "module",

package/web/app.js

@@ -65,7 +65,7 @@ document.addEventListener("keydown", (ev) => {
   window.swarmZoom(dir);
 });
 // `dirty`: a UI-side change (selection, view, filter) needs a render even when the daemon snapshot is unchanged.
-const state = { projects: [], sessions: [], worktrees: {}, processes: [], spend: null, incidents: [], allIncidents: null, incFilter: "open", tasks: null, gates: null, dispatch: null, questions: [], budget: null, runs: [], attribution: null, taskFilter: "ready", resources: [], prs: [], seq: 0, sel: null, session: null, log: [], turns: [], view: "fleet", agentFilter: null, dirty: true };
+const state = { projects: [], sessions: [], worktrees: {}, processes: [], spend: null, incidents: [], allIncidents: null, incFilter: "open", tasks: null, gates: null, dispatch: null, questions: [], budget: null, runs: [], attribution: null, taskFilter: "ready", resources: [], prs: [], seq: 0, sel: null, session: null, log: [], turns: [], view: "fleet", agentFilter: null, collisions: null, outcomes: null, dirty: true };
 
 const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
 const ago = (iso) => { const d = (Date.now() - new Date(iso)) / 1000; return d < 60 ? `${d | 0}s` : d < 3600 ? `${(d / 60) | 0}m` : d < 86400 ? `${(d / 3600) | 0}h` : `${(d / 86400) | 0}d`; };
@@ -155,7 +155,7 @@ async function refresh() {
   const txt = await (await fetch("/v1/state")).text();
   const same = txt === lastSnap;
   if (!same) { lastSnap = txt; Object.assign(state, JSON.parse(txt)); }
-  if (!state.version) fetch("/v1/health").then((r) => r.json()).then((h) => { state.version = h.version; maybeWhatsNew(); }).catch(() => {});
+  if (!state.version) fetch("/v1/health").then((r) => r.json()).then((h) => { state.version = h.version; state.hooksInstalled = h.hooksInstalled !== false; maybeUpdateNudge(h); maybeWhatsNew(); }).catch(() => {});
   let prsChanged = false;
   if (state.view === "prs" && !state.session) {
     const prs = await (await fetch("/v1/prs")).json().catch(() => state.prs ?? []);
@@ -175,6 +175,10 @@ async function refresh() {
     state.attribution = null;
   }
   let runsChanged = false;
+  if (state.session) {
+    const ms = await fetch(`/v1/messages?session=${encodeURIComponent(state.session)}&limit=50`).then((r) => r.json()).catch(() => state.msgs ?? []);
+    if (JSON.stringify(ms) !== JSON.stringify(state.msgs)) { state.msgs = ms; state.dirty = true; }
+  }
   const openSpawned = state.session && state.sessions.find((x) => x.id === state.session)?.kind === "spawned";
   if (openSpawned || (state.view === "board" && !state.session) || (state.view === "fleet" && !state.session)) {
     const runs = await fetch("/v1/runs").then((r) => r.json()).catch(() => state.runs ?? []);
@@ -183,13 +187,14 @@ async function refresh() {
   }
   let tasksChanged = false;
   if (state.view === "board" && state.sel && !state.session) {
-    const [t, g, d] = await Promise.all([
+    const [t, g, d, wf] = await Promise.all([
       fetch(`/v1/tasks?project=${encodeURIComponent(state.sel)}`).then((r) => r.json()).catch(() => state.tasks),
       fetch(`/v1/gates?project=${encodeURIComponent(state.sel)}`).then((r) => r.json()).catch(() => state.gates),
       fetch(`/v1/dispatch?project=${encodeURIComponent(state.sel)}`).then((r) => r.json()).catch(() => state.dispatch),
+      fetch(`/v1/workflows?project=${encodeURIComponent(state.sel)}`).then((r) => r.json()).catch(() => state.workflows),
     ]);
-    tasksChanged = JSON.stringify(t) !== JSON.stringify(state.tasks) || JSON.stringify(g) !== JSON.stringify(state.gates) || JSON.stringify(d) !== JSON.stringify(state.dispatch);
-    state.tasks = t; state.gates = g; state.dispatch = d;
+    tasksChanged = JSON.stringify(t) !== JSON.stringify(state.tasks) || JSON.stringify(g) !== JSON.stringify(state.gates) || JSON.stringify(d) !== JSON.stringify(state.dispatch) || JSON.stringify(wf) !== JSON.stringify(state.workflows);
+    state.tasks = t; state.gates = g; state.dispatch = d; state.workflows = wf;
   }
   let incChanged = false;
   if (state.view === "incidents" && !state.session) {
@@ -198,9 +203,39 @@ async function refresh() {
     incChanged = JSON.stringify(inc) !== JSON.stringify(state.allIncidents);
     state.allIncidents = inc;
   }
-  if (!same || prsChanged || incChanged || tasksChanged || runsChanged || attrChanged || state.dirty || Date.now() - lastRenderAt > 30_000) schedule();
-}
-const VIEWS = ["fleet", "board", "incidents", "prs", "timeline", "spend", "stats", "search"];
+  let colChanged = false;
+  if (state.view === "graphs" && !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 outChanged = false;
+  if (state.view === "outcomes" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const o = await fetch(`/v1/outcomes${q}`).then((r) => r.json()).catch(() => state.outcomes);
+    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();
+}
+// 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.
+const VIEW_DEFS = [
+  { id: "fleet", label: "Fleet", icon: "squares-four", group: "Observe", render: () => renderFleet() },
+  { id: "timeline", label: "Timeline", icon: "clock-counter-clockwise", group: "Observe", render: () => renderTimeline() },
+  { 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: "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: "incidents", label: "Incidents", icon: "warning", group: "Guard", render: () => renderIncidentsView(), badge: () => state.openIncidents ?? 0 },
+];
+const viewDef = (id) => VIEW_DEFS.find((v) => v.id === id);
+const VIEWS = VIEW_DEFS.map((v) => v.id);
+let navHtml = ""; // last-rendered nav html; declared before the restore block below calls renderNav()
 // restore last view + project selection (persisted UI state)
 {
   const v = localStorage.getItem("swarm.view");
@@ -212,7 +247,7 @@ const VIEWS = ["fleet", "board", "incidents", "prs", "timeline", "spend", "stats
   if (VIEWS.includes(q.get("view"))) state.view = q.get("view");
   if (q.has("project")) state.sel = q.get("project") || null;
   // Mark the restored tab before the first snapshot lands, so the nav doesn't flash "Fleet".
-  for (const a of document.querySelectorAll("header a[data-view]")) a.classList.toggle("on", a.dataset.view === state.view);
+  renderNav();
 }
 function render() {
   // A row menu is anchored to DOM that a re-render would replace (and the focus jump closes it):
@@ -226,14 +261,7 @@ function render() {
   if (!dragPid) renderProjects(); // a re-render mid-drag would yank the row out from under the cursor
   renderHeader();
   if (state.session) renderSession();
-  else if (state.view === "spend") renderSpend();
-  else if (state.view === "stats") { loadStats(); renderStats(); } // loadStats is a no-op while the cache is fresh
-  else if (state.view === "search") renderSearch();
-  else if (state.view === "timeline") renderTimeline();
-  else if (state.view === "board") renderBoard();
-  else if (state.view === "incidents") renderIncidentsView();
-  else if (state.view === "prs") renderPRs();
-  else renderFleet();
+  else (viewDef(state.view)?.render ?? viewDef("fleet").render)();
   if (keep) {
     const el = document.querySelector(`input[data-filter="${keep.key}"][data-tid="${keep.tid}"]`);
     if (el) { el.focus(); el.setSelectionRange(keep.pos, keep.pos); }
@@ -244,9 +272,22 @@ function renderHeader() {
   const today = state.spend ? sumBy(state.spend.byProjectToday, (x) => x.cost) : 0;
   const html = `Today <b>${usd(today)}</b>`;
   if (html !== todayHtml) { todayHtml = html; $("#today").innerHTML = html; }
-  const ic_ = $("#incCount"); const n = state.openIncidents ?? 0;
-  if (ic_) { ic_.hidden = !n; ic_.textContent = n > 99 ? "99+" : String(n); }
-  for (const a of document.querySelectorAll("header a[data-view]")) a.classList.toggle("on", !state.session && a.dataset.view === state.view);
+  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() {
+  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("");
+  if (html !== navHtml) { navHtml = html; $("#viewnav").innerHTML = html; }
 }
 
 const isLive = (s) => s.state === "active" || s.state === "waiting";
@@ -256,6 +297,12 @@ function liveCounts() {
   for (const s of state.sessions) if (isLive(s)) { m.set(s.projectId, (m.get(s.projectId) ?? 0) + 1); m.set("", (m.get("") ?? 0) + 1); }
   return m;
 }
+// M5.7: 14-day spend sparkline per pinned project; hidden when the fortnight cost is ~zero.
+function spendSpark(pid) {
+  const pts = state.spendSparks?.[pid];
+  if (!pts || pts.reduce((a, b) => a + b, 0) < 0.5) return "";
+  return `<span class="proj-spark" title="last 14 days · $${pts.reduce((a, b) => a + b, 0).toFixed(0)}">${viz.sparkline(pts, "var(--c1)")}</span>`;
+}
 function renderProjects() {
   const lc = liveCounts();
   const live = (pid) => lc.get(pid) ?? 0;
@@ -272,7 +319,7 @@ function renderProjects() {
   const row = (p) => {
     const act = `<span class="act more" data-menu="project" data-pid="${p.id}" title="Project actions">${ic("dots-three", 15)}</span>`;
     return `<div class="proj ${state.sel === p.id ? "sel" : ""}" data-id="${p.id}" data-ctx="project" data-pid="${p.id}" title="${esc(p.root)}"${p.discovered ? "" : ' draggable="true"'}>
-      <span class="st ${live(p.id) ? "live" : ""}"></span>${projGlyph(p)}<span class="nm">${disamb(p)}${esc(p.name)}</span><small>${live(p.id) || ""}</small>${act}</div>`;
+      <span class="st ${live(p.id) ? "live" : ""}"></span>${projGlyph(p)}<span class="nm">${disamb(p)}${esc(p.name)}</span>${spendSpark(p.id)}<small>${live(p.id) || ""}</small>${act}</div>`;
   };
   const liveAll = live("");
   $("#projects").innerHTML =
@@ -317,12 +364,27 @@ projectsEl.addEventListener("dragend", () => {
   fetch("/v1/projects/order", { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ ids }) }).then(refresh);
 });
 
+// First run: no sessions have ever been seen. Say exactly what to do next, and whether hooks are in.
+function onboarding() {
+  const hooksOk = state.hooksInstalled !== false;
+  const step = (n, done, html) => `<div class="ob-step ${done ? "done" : ""}"><span class="ob-n">${done ? "✓" : n}</span><div>${html}</div></div>`;
+  return `<div class="onboard">${PX.idle()}
+    <h3>Swarm is running and watching this machine.</h3>
+    <div class="ob-steps">
+      ${step(1, hooksOk, `<b>Hook into Claude Code</b> — <code>swarm install</code> once${hooksOk ? "" : " <span class='badge warn'>not installed</span>"}. Codex and Grok are picked up automatically, nothing to configure.`)}
+      ${step(2, false, `<b>Open any agent session</b> — run <code>claude</code> in any repository, in any terminal. No changes to the repo, the agent doesn't know Swarm is there.`)}
+      ${step(3, false, `<b>Watch it appear here</b> — live status, branch, tokens and cost per session; Board, Timeline and Spend fill up as you work.`)}
+    </div>
+    <div class="dim">Something off? <code>swarm doctor</code> checks every piece and prints the fix.</div>
+  </div>`;
+}
+
 // ---------- fleet
 // Fleet data-grid columns (sortable/resizable/reorderable/filterable via table.js).
 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>' : ""}` },
+  { 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: "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()) ?? "" : "";
@@ -363,7 +425,7 @@ function renderFleet() {
     : "";
   $("#main").innerHTML = chips +
     `<h2>Live <span>${live.length} sessions · ${usd(sumBy(live, (s) => s.costUsd))}</span></h2>` +
-    (live.length ? table(live, "fleet-live") : `<div class="empty">${PX.idle()}Nothing running.${state.sessions.length ? "" : "<br><br>Run <kbd>swarm install</kbd> once, then start <kbd>claude</kbd> in any folder — it will appear here."}</div>`) +
+    (live.length ? table(live, "fleet-live") : state.sessions.length ? `<div class="empty">${PX.idle()}Nothing running.</div>` : onboarding()) +
     (rest.length ? `<h2 class="mt-sec">Earlier <span>${rest.length}</span></h2>${table(rest.slice(0, 30), "fleet-earlier")}` : "") +
     "";
 }
@@ -430,7 +492,7 @@ function renderBoardKpis() {
 }
 
 function renderBoard() {
-  const parts = [renderBoardKpis(), renderTasks(), renderDispatch(), renderGates(), renderProcesses(), renderResources(), renderClaims(), renderWorktrees(), renderIncidents()].filter(Boolean);
+  const parts = [renderBoardKpis(), renderTasks(), renderDispatch(), renderWorkflowRuns(), renderGates(), renderProcesses(), renderResources(), renderClaims(), renderWorktrees(), renderIncidents()].filter(Boolean);
   $("#main").innerHTML = parts.length
     ? parts.join("").replace(/^(<div class="kpis[^>]*>[\s\S]*?<\/div><\/div>|)(<h2) class="mt-sec"/, "$1$2") // first section needs no top gap
     : `<div class="empty">${PX.idle()}Nothing on the board.<br>Tasks, processes, claims, worktrees, and incidents appear here.</div>`;
@@ -627,7 +689,13 @@ function renderGates() {
     { key: "evidence", label: "evidence", width: 220, get: (r) => r.evidence ?? "", cell: (r) => (r.evidence ? `<span class="dim now" title="${esc(r.evidence)}">${esc(r.evidence)}</span>` : '<span class="dim">—</span>') },
     { key: "session", label: "session", width: 140, get: (r) => sess(r.sessionId)?.title ?? "", cell: (r) => (r.sessionId ? `<a href="#" data-s="${r.sessionId}">${esc(sess(r.sessionId)?.title ?? r.sessionId.slice(0, 8))}</a>` : '<span class="dim">—</span>') },
   ];
-  return `<h2 class="mt-sec">Recent gates <span>${runs.length} run${runs.length === 1 ? "" : "s"}${required.length ? ` · required: ${required.map(esc).join(", ")}` : ""} · latest run per gate decides</span></h2>` +
+  const history = (gate) => {
+    const rs = runs.filter((r) => r.gate === gate).slice(0, 12).reverse();
+    if (!rs.length) return "";
+    return `<span class="gh" title="${esc(gate)} — last ${rs.length} run${rs.length === 1 ? "" : "s"}, oldest first">${esc(gate)} ${rs.map((r) => `<i class="${r.verdict === "pass" ? "ok" : "bad"}" title="${esc(r.rubric)}"></i>`).join("")}</span>`;
+  };
+  const gateNames = [...new Set(runs.map((r) => r.gate))];
+  return `<h2 class="mt-sec">Recent gates <span>${runs.length} run${runs.length === 1 ? "" : "s"}${required.length ? ` · required: ${required.map(esc).join(", ")}` : ""} · latest run per gate decides</span>${gateNames.length ? `<span class="grow"></span><span class="gh-strip">${gateNames.map(history).join("")}</span>` : ""}</h2>` +
     (runs.length
       ? dataTable({
           id: "gates",
@@ -772,6 +840,37 @@ function renderWorktrees() {
     }));
 }
 
+// ---------- workflows (M7.8)
+function renderWorkflowRuns() {
+  const w = state.workflows;
+  if (!state.sel || !w?.runs?.length) return "";
+  const chip = (r, i) => {
+    const label = esc(r.steps[i]);
+    if (i < r.step || (r.state === "done" && i <= r.step)) return `<span class="wfs ok" title="${label}">✓ ${label}</span>`;
+    if (i === r.step) return r.state === "running" ? `<span class="wfs run" title="${label}">● ${label}</span>` : r.state === "failed" ? `<span class="wfs bad" title="${label}">✗ ${label}</span>` : `<span class="wfs" title="${label}">◦ ${label}</span>`;
+    return `<span class="wfs" title="${label}">○ ${label}</span>`;
+  };
+  const badge = (r) => r.state === "running" ? '<span class="badge acc">Running</span>' : r.state === "done" ? '<span class="badge ok">Done</span>' : r.state === "failed" ? '<span class="badge warn">Failed</span>' : '<span class="badge">Stopped</span>';
+  const cols = [
+    { key: "task", label: "task", width: 90, get: (r) => r.task, cell: (r) => `<b>${esc(r.task)}</b>` },
+    { key: "workflow", label: "workflow", width: 100, get: (r) => r.workflow, cell: (r) => `<span class="br">${esc(r.workflow)}</span>` },
+    { key: "steps", label: "steps", flex: true, sortable: false, get: (r) => r.step, cell: (r) => `<span class="wf-steps">${r.steps.map((_, i) => chip(r, i)).join("")}</span>` },
+    { key: "state", label: "state", width: 90, get: (r) => r.state, cell: badge },
+    { key: "detail", label: "detail", width: 260, get: (r) => r.detail ?? "", cell: (r) => `<span class="dim now" title="${esc(r.detail ?? "")}">${esc(r.detail ?? "")}</span>` },
+    { key: "when", label: "updated", width: 76, get: (r) => r.updatedAt, cell: (r) => `<span class="dim">${ago(r.updatedAt)}</span>` },
+  ];
+  const running = w.runs.filter((r) => r.state === "running").length;
+  return `<h2 class="mt-sec">Workflows <span>${running ? `${running} running · ` : ""}${Object.keys(w.defs ?? {}).map(esc).join(", ") || "none declared"}</span></h2>` +
+    dataTable({
+      id: "workflows",
+      columns: cols,
+      rows: w.runs.slice(0, 20),
+      leading: { width: 24, cell: (r) => `<span class="s ${r.state === "running" ? "active" : r.state === "failed" ? "waiting" : "ended"}"></span>` },
+      trailing: { width: 60, cell: (r) => (r.state === "running" ? `<a href="#" data-wfstop="${esc(r.task)}">Stop</a>` : "") },
+      rerender: touch,
+    });
+}
+
 // ---------- dispatch (M7.5)
 function renderDispatch() {
   const d = state.dispatch;
@@ -1059,7 +1158,92 @@ function renderStats() {
 }
 
 // ---------- timeline
+let tlDetail = { key: "", data: null, busy: false };
+async function loadTimelineDetail() {
+  const hours = state.tlHours ?? 12;
+  const key = `${hours}:${state.sel ?? ""}`;
+  if (tlDetail.busy || (tlDetail.key === key && tlDetail.at && Date.now() - tlDetail.at < 15_000)) return;
+  tlDetail.busy = true;
+  try {
+    const q = new URLSearchParams({ hours: String(hours) });
+    if (state.sel) q.set("project", state.sel);
+    const data = await (await fetch(`/v1/timeline?${q}`)).json();
+    tlDetail = { key, at: Date.now(), data, busy: false };
+    if (state.view === "timeline" && !state.session) touch();
+  } finally { tlDetail.busy = false; }
+}
+// M9.2: Outcomes — did the agent's work survive? Branch → PR → merged / reverted, with
+// scorecards per model and per agent. Data from /v1/outcomes (fetched by the poll while open).
+const outBadge = (o) => ({ merged: '<span class="badge ok">merged</span>', reverted: '<span class="badge bad">reverted</span>', open: '<span class="badge acc">open</span>', "no-pr": '<span class="badge">no PR</span>' })[o] ?? esc(o);
+const ratePct = (x) => (x == null ? "—" : `${Math.round(x * 100)}%`);
+const hrs = (x) => (x == null || x < 0 ? "—" : x < 1 ? `${Math.round(x * 60)}m` : x < 48 ? `${x.toFixed(1)}h` : `${(x / 24).toFixed(1)}d`);
+const scoreCols = (label) => [
+  { key: "key", label, width: 150, get: (r) => r.key, cell: (r) => `<b>${esc(label === "model" ? model(r.key) : viz.agentName(r.key))}</b>` },
+  { key: "branches", label: "branches", width: 80, num: true, get: (r) => r.branches, cell: (r) => String(r.branches) },
+  { key: "merged", label: "merged", width: 72, num: true, get: (r) => r.merged, cell: (r) => String(r.merged) },
+  { key: "reverted", label: "reverted", width: 78, num: true, get: (r) => r.reverted, cell: (r) => (r.reverted ? `<b style="color:var(--bad)">${r.reverted}</b>` : "0") },
+  { key: "open", label: "open", width: 60, num: true, get: (r) => r.open, cell: (r) => String(r.open) },
+  { key: "nopr", label: "no PR", width: 64, num: true, get: (r) => r.noPr, cell: (r) => String(r.noPr) },
+  { key: "rate", label: "merge rate", width: 92, num: true, get: (r) => r.mergeRate ?? -1, cell: (r) => ratePct(r.mergeRate) },
+  { key: "lead", label: "median lead", width: 98, num: true, get: (r) => r.medianLeadHours ?? -1, cell: (r) => hrs(r.medianLeadHours) },
+  { key: "cpm", label: "$ / merge", width: 84, num: true, get: (r) => r.costPerMerge ?? -1, cell: (r) => (r.costPerMerge == null ? "—" : usd(r.costPerMerge)) },
+];
+const BRANCH_COLS = [
+  { key: "branch", label: "branch", width: 190, get: (r) => r.branch, cell: (r) => `<span class="br">${esc(r.branch)}</span>` },
+  { key: "outcome", label: "outcome", width: 92, cls: "td-badge", get: (r) => r.outcome, cell: (r) => outBadge(r.outcome) },
+  { key: "pr", label: "PR", flex: true, get: (r) => r.title ?? "", cell: (r) => (r.prNumber ? `<a href="${esc(r.url ?? "#")}" target="_blank" rel="noreferrer">#${r.prNumber}</a> <span class="dim">${esc(r.title ?? "")}</span>` : '<span class="faint">—</span>') },
+  { key: "model", label: "model", width: 92, get: (r) => model(r.model), cell: (r) => `<span class="br">${esc(model(r.model))}</span>` },
+  { key: "agent", label: "agent", width: 78, cls: "td-badge", get: (r) => agentLabel(r.agent), cell: (r) => agentBadge(r.agent) },
+  { key: "sessions", label: "sessions", width: 76, num: true, get: (r) => r.sessions.length, cell: (r) => String(r.sessions.length) },
+  { key: "cost", label: "cost", width: 64, num: true, get: (r) => r.costUsd, cell: (r) => usd(r.costUsd) },
+  { key: "lead", label: "lead", width: 64, num: true, get: (r) => r.leadHours ?? -1, cell: (r) => hrs(r.leadHours) },
+];
+function renderOutcomes() {
+  const o = state.outcomes;
+  const head = (sub) => `<h2>Outcomes <span>${sub}</span></h2>`;
+  if (!o) {
+    $("#main").innerHTML = head("did the work survive?") + `<div class="empty">${PX.idle()}Loading…</div>`;
+    return;
+  }
+  if (!o.branches?.length) {
+    $("#main").innerHTML = head("did the work survive?") + `<div class="empty">${PX.idle()}No agent branches yet${state.sel ? " in this project" : ""}.<br>Outcomes fill in as sessions work on branches and their PRs merge — or get reverted.</div>`;
+    return;
+  }
+  const n = (k) => o.branches.filter((b) => b.outcome === k).length;
+  const rev = n("reverted");
+  $("#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 })}` : "") +
+    `<h2 class="mt-sec">Branches <span>latest first</span></h2>` +
+    dataTable({ id: "outcomes-branches", columns: BRANCH_COLS, rows: o.branches.slice(0, 100) });
+}
+
+// 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 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;
+  }
+  if (!g.files.length) {
+    $("#main").innerHTML = head(`${g.sessions.length} live session${g.sessions.length === 1 ? "" : "s"}`) + `<div class="empty">${PX.idle()}No file touches recorded yet — the graph fills in as agents read and edit.</div>`;
+    return;
+  }
+  const sessions = g.sessions.map((s) => ({ ...s, label: title(s) }));
+  const agents = [...new Set(sessions.map((s) => s.agent))].sort(viz.agentSort);
+  const sub = `${sessions.length} live session${sessions.length === 1 ? "" : "s"} · ${g.files.length} file${g.files.length === 1 ? "" : "s"} · ${g.contested ? `<b class="navcount">${g.contested} contested</b>` : "no collisions"}`;
+  $("#main").innerHTML = head(sub) +
+    `<div class="card" style="padding:14px">${viz.bipartite(sessions, g.files)}</div>
+     <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>`;
+}
+
 function renderTimeline() {
+  loadTimelineDetail();
   const now = Date.now();
   const hours = state.tlHours ?? 12;
   const from = now - hours * 3.6e6, to = now + 0.25 * 3.6e6;
@@ -1068,7 +1252,7 @@ function renderTimeline() {
   const chip = (h) => `<a href="#" class="nav ${hours === h ? "on" : ""}" data-tl="${h}">${h}h</a>`;
   $("#main").innerHTML =
     `<h2>Timeline <span>${rows.length} sessions · last ${hours}h · ${usd(sumBy(rows, (s) => s.costUsd))}</span><span style="margin-left:auto;display:flex;gap:2px">${[3, 6, 12, 24, 72].map(chip).join("")}</span></h2>
-     ${rows.length ? viz.timeline(rows, { from, to, projName, now }) : `<div class="empty">${PX.clock()}No sessions in the last ${hours}h.</div>`}
+     ${rows.length ? viz.timeline(rows, { from, to, projName, now, detail: tlDetail.key === `${hours}:${state.sel ?? ""}` ? tlDetail.data : null }) : `<div class="empty">${PX.clock()}No sessions in the last ${hours}h.</div>`}
      ${agents.length ? `<div style="margin-top:10px">${viz.legend(agents)}</div>` : ""}`;
 }
 
@@ -1185,6 +1369,18 @@ 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.
+function messageThread(s) {
+  const ms = (state.msgs ?? []).filter((m) => m.sessionId === s.id || m.fromSession === s.id).slice().reverse();
+  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>`;
+}
+
 // M7.7: questions this session is waiting on a human for
 function questionCards(s) {
   const qs = (state.questions ?? []).filter((q) => q.sessionId === s.id);
@@ -1251,6 +1447,7 @@ function renderSession() {
     <h4>tokens</h4>${viz.compositionBar([{ label: "cache read", v: t.cacheRead }, { label: "cache write", v: t.cacheWrite }, { label: "input", v: t.input }, { label: "thinking", v: t.thinking }, { label: "output", v: t.output }])}
     ${state.turns.length > 1 ? `<h4>cost per turn</h4>${viz.turnStrip(state.turns, { height: 54 })}` : ""}
     <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>` : ""}`;
   if (logEl && isAppend(rows)) {
@@ -1496,6 +1693,10 @@ ${p.reason ?? ""}`.slice(0, 180);
     title = "An agent has a question";
     body = `${p.task ? `${p.task}: ` : ""}${p.text ?? ""}`.slice(0, 180);
     onClick = () => { if (ev.sessionId) openSession(ev.sessionId); };
+  } else if (ev.type === "session.stuck") {
+    title = "Session looks stuck";
+    body = (p.reason ?? p.summary ?? "").slice(0, 180);
+    onClick = () => { if (ev.sessionId) openSession(ev.sessionId); };
   } else if (ev.type === "claim.orphaned") {
     title = "Claim orphaned";
     body = `${p.task ?? "a task"} — its lease expired with unfinished work in the worktree.`;
@@ -1527,6 +1728,33 @@ function whatsNew(version) {
 }
 window.swarmWhatsNew = (v) => whatsNew(v);
 // auto-open once per version, but never on the very first run (nothing to compare against)
+// M-launch: after an update the running daemon is the old build until it restarts. The daemon
+// reports the version on disk; when it differs, offer a one-click restart, then reload.
+let updateNudged = false;
+setInterval(() => { fetch("/v1/health").then((r) => r.json()).then(maybeUpdateNudge).catch(() => {}); }, 300_000);
+function maybeUpdateNudge(h) {
+  if (!h?.disk || !h.version || h.disk === h.version || updateNudged) return;
+  updateNudged = true;
+  const el = document.createElement("div");
+  el.className = "nudge";
+  el.innerHTML = `${ic("arrows-clockwise", 18, "ic")}<div><b>Swarm ${esc(h.disk)} is installed</b>The daemon is still running ${esc(h.version)} — restart it to switch. Sessions and history are unaffected.
+    <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…";
+    await fetch("/v1/daemon/restart", { method: "POST" }).catch(() => {});
+    const t0 = Date.now();
+    const wait = setInterval(async () => {
+      try {
+        const j = await (await fetch("/v1/health")).json();
+        if (j.version === h.disk) { clearInterval(wait); location.reload(); }
+      } catch {}
+      if (Date.now() - t0 > 30_000) { clearInterval(wait); el.remove(); }
+    }, 800);
+  });
+}
 function maybeWhatsNew() {
   if (!state.version || !window.RELEASE_NOTES) return;
   let seen; try { seen = localStorage.getItem("swarm.seenVersion"); } catch {}
@@ -1581,6 +1809,9 @@ function openMenu(kind, anchor, d) {
   if (!window.menus) { console.warn("menus.js not built — run: bun run build:web"); return; }
   window.menus.open(anchor, spec);
 }
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && e.target.id === "msgText") { e.preventDefault(); $("#msgSend")?.click(); }
+});
 // Enter / Space on a focused card, tile or kebab opens its menu like a click.
 document.addEventListener("keydown", (ev) => {
   if (ev.key !== "Enter" && ev.key !== " ") return;
@@ -1597,8 +1828,11 @@ document.addEventListener("contextmenu", (ev) => {
 });
 
 // ---------- events
+// Every id / data-attr a branch below matches on MUST be in this selector, or the branch is
+// 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,#wtnew,#wtgc,[data-gaterun],[data-codify],[data-bmode],[data-emoji],#psAllEmoji,.swatch,#psSave,#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-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, {}); }
@@ -1609,7 +1843,25 @@ document.addEventListener("click", async (ev) => {
   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; }
   if (t.id === "psAllEmoji") { const all = $("#psEmojiAll"); if (all.hidden) { all.innerHTML = buildEmojiGrid(); all.hidden = false; } else all.hidden = true; return; }
   if (t.dataset.color !== undefined && t.classList.contains("swatch")) { for (const e of $$(".swatch")) e.classList.toggle("on", e === t); return; }
+  if (t.id === "msgSend") {
+    ev.preventDefault();
+    const text = $("#msgText")?.value.trim();
+    if (!text) return;
+    const r = await post("/v1/messages", { projectId: t.dataset.pid, to: t.dataset.sid, text, from: "dashboard" });
+    if (!r.ok) return alert(r.error);
+    $("#msgText").value = "";
+    state.msgs = null;
+    return refresh();
+  }
   if (t.id === "psSave") { ev.preventDefault(); return saveProjectSettings(t.dataset.pid); }
+  if (t.dataset.wfstop !== undefined) {
+    ev.preventDefault();
+    if (!confirm(`Stop the workflow on ${t.dataset.wfstop}? A live step's run is stopped too.`)) return;
+    const r = await post("/v1/workflows/stop", { projectId: state.sel, task: t.dataset.wfstop });
+    if (!r.ok) alert(r.error);
+    state.workflows = null;
+    return refresh();
+  }
   if (t.dataset.bmode) { ev.preventDefault(); const [k, v] = t.dataset.bmode.split(":"); localStorage.setItem(`swarm.board.${k}`, v); return touch(); }
   if (t.dataset.run) { ev.preventDefault(); return openRunDrawer(t.dataset.run); }
   if (t.dataset.runstop) {
@@ -1716,6 +1968,57 @@ $("#sbToggle")?.addEventListener("click", () => {
 });
 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(); } }));
+  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) });
+  return items;
+}
+function palFilter() {
+  const q = pal.q.trim().toLowerCase();
+  const rank = (x) => Math.min(...[x.label, x.sub ?? ""].map((t) => { const i = t.toLowerCase().indexOf(q); return i < 0 ? 1e9 : i; }));
+  const out = q
+    ? pal.items.map((x) => ({ x, r: rank(x) })).filter((h) => h.r < 1e9).sort((a, b) => a.r - b.r).map((h) => h.x).slice(0, 12)
+    : pal.items.filter((x) => x.grp !== "session" || x.live).slice(0, 16); // idle: every view + project + live sessions
+  if (q) out.push({ icon: "magnifying-glass", label: `Search Swarm for “${pal.q.trim()}”`, grp: "search", run: () => { srch.q = pal.q.trim(); state.view = "search"; localStorage.setItem("swarm.view", "search"); state.session = null; state.dirty = true; runSearch(); refresh(); } });
+  return out;
+}
+function palRender() {
+  pal.view = palFilter();
+  if (pal.i >= pal.view.length) pal.i = Math.max(0, pal.view.length - 1);
+  const row = (x, i) => `<div class="pk-row pal-row ${i === pal.i ? "on" : ""}" data-pal="${i}">${ic(x.icon, 14)}<span class="nm">${esc(x.label)}${x.sub ? ` <span class="dim">· ${esc(x.sub)}</span>` : ""}</span><span class="grp">${x.grp}</span></div>`;
+  const el = $("#palList");
+  if (el) el.innerHTML = pal.view.map(row).join("") || '<div class="empty" style="padding:16px">No matches.</div>';
+}
+function palRun(i) {
+  const x = pal.view[i];
+  if (!x) return;
+  closePicker();
+  x.run();
+}
+function openPalette() {
+  pal.items = palBuild(); pal.q = ""; pal.i = 0;
+  $("#picker").innerHTML = `<div class="pk pal" role="dialog" aria-modal="true">
+    <div class="pk-h">${ic("magnifying-glass", 15)}<input id="palQ" placeholder="Jump to view, project or session…" spellcheck="false" autocomplete="off"></div>
+    <div class="pk-list" id="palList"></div>
+  </div>`;
+  palRender();
+  const inp = $("#palQ");
+  inp.focus();
+  inp.addEventListener("input", () => { pal.q = inp.value; pal.i = 0; palRender(); });
+  inp.addEventListener("keydown", (ev) => {
+    if (ev.key === "ArrowDown" || ev.key === "ArrowUp") { ev.preventDefault(); pal.i = Math.max(0, Math.min(pal.view.length - 1, pal.i + (ev.key === "ArrowDown" ? 1 : -1))); palRender(); }
+    else if (ev.key === "Enter") { ev.preventDefault(); palRun(pal.i); }
+  });
+}
+$("#palBtn")?.addEventListener("click", openPalette);
+document.addEventListener("keydown", (ev) => {
+  if ((ev.metaKey || ev.ctrlKey) && ev.key.toLowerCase() === "k") { ev.preventDefault(); if ($("#palQ")) closePicker(); else openPalette(); }
+});
+
 // ---------- folder picker
 const picker = { path: null };
 // Run drawer (M3.3): prompt prefilled from the task row; submit = POST /v1/runs.
@@ -1961,6 +2264,8 @@ async function pickerGo(path) {
 const closePicker = () => { $("#picker").innerHTML = ""; };
 $("#picker").addEventListener("click", (ev) => {
   if (ev.target.id === "picker" || ev.target.closest("#pkCancel")) return closePicker();
+  const pr = ev.target.closest("[data-pal]");
+  if (pr) return palRun(Number(pr.dataset.pal));
   const go = ev.target.closest("[data-go]");
   if (go) return void pickerGo(go.dataset.go);
   const ctoml = ev.target.closest("[data-copy-toml]"), cles = ev.target.closest("[data-copy-lesson]");
@@ -2008,7 +2313,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", "dispatch.queued", "dispatch.started", "dispatch.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"]) es.addEventListener(t, onAny);
 }
 refresh().then(() => {
   const sid = new URLSearchParams(location.search).get("session");