@ra3orblade/swarm 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ra3orblade/swarm",
-  "version": "0.9.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`; };
@@ -203,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");
@@ -217,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):
@@ -231,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); }
@@ -249,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";
@@ -348,7 +384,7 @@ function onboarding() {
 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()) ?? "" : "";
@@ -1136,6 +1172,76 @@ async function loadTimelineDetail() {
     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();
@@ -1587,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.`;
@@ -1718,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-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-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, {}); }
@@ -1855,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.
@@ -2100,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]");

package/web/index.html

@@ -88,9 +88,11 @@
   kbd{font:var(--fs-mono) var(--mono);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 5px;color:var(--fg-2)}
   code{font:var(--fs-md) var(--mono);color:var(--fg-2)}
 
-  /* collapsed sidebar */
-  body.nosb{grid-template-columns:0 1fr}
-  body.nosb>aside{display:none}
+  /* collapsed sidebar = icon rail (M9.1): views stay one click away; projects via ⌘K */
+  body.nosb{grid-template-columns:46px 1fr}
+  body.nosb>aside{padding:12px 5px;overflow:hidden}
+  body.nosb #viewnav a.nav{justify-content:center;padding:7px 0}
+  body.nosb #viewnav .nm,body.nosb #viewnav h4,body.nosb #viewnav .navcount,body.nosb #projects{display:none}
   body>aside{grid-column:1;grid-row:2}
   body>main{grid-column:2;grid-row:2}
   #projects h4{display:flex;align-items:center;gap:5px}
@@ -124,6 +126,13 @@
 
   /* sidebar */
   body>aside{border-right:1px solid var(--line);background:var(--panel);padding:12px 10px;overflow:auto;display:flex;flex-direction:column}
+  /* view nav (M9.1): grouped views in the sidebar, generated from VIEW_DEFS; header holds only chrome */
+  #viewnav{display:flex;flex-direction:column;gap:1px;flex:none;margin-bottom:4px}
+  #viewnav a.nav{display:flex;align-items:center;gap:9px;color:var(--dim);padding:5px 8px;border-radius:var(--r-sm);font-weight:500;transition:color var(--t-fast),background var(--t-fast)}
+  #viewnav a.nav:hover{color:var(--fg-2);background:var(--panel-2)}
+  #viewnav a.nav.on{color:var(--fg);background:var(--panel-2)}
+  #viewnav a.nav .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  #viewnav .navcount{margin-left:auto}
   body>aside h4{margin:14px 8px 6px;color:var(--faint);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.09em}
   body>aside h4:first-child{margin-top:2px}
   .proj{padding:var(--pad-row);border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;gap:9px;
@@ -153,6 +162,11 @@
   .dr-rule select{background:var(--panel-2);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 4px}
   .dr-flaky{padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);margin:6px 0;background:var(--panel-2)}
   table.plain{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} table.plain td{padding:3px 6px;border-top:1px solid var(--line);vertical-align:top}
+  /* ⌘K palette (M9.1): top-anchored .pk variant; rows reuse .pk-row */
+  .pk.pal{align-self:start;margin-top:9vh}
+  .pal .pk-list{min-height:120px;max-height:min(440px,62vh)}
+  .pal .pk-row.on{background:var(--acc-soft);color:var(--fg)}
+  .pal .pk-row .grp{margin-left:auto;color:var(--faint);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em}
   #picker:empty{display:none}
   #picker{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;z-index:50}
   .pk{width:min(560px,92vw);max-height:78vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-pop);overflow:hidden}
@@ -298,6 +312,7 @@
   .badge.warn{color:var(--warn);background:var(--warn-soft)}
   .badge.acc{color:var(--acc);background:var(--acc-soft)}
   .badge.ok{color:var(--ok);background:var(--ok-soft)}
+  .badge.bad{color:var(--bad);background:var(--bad-soft)}
   .badge.agent{color:var(--violet);background:color-mix(in srgb,var(--violet) 14%,transparent);font-weight:600}
 
   /* empty */
@@ -426,7 +441,7 @@
   /* icons (Phosphor regular, inline) */
   .ph{display:inline-block;vertical-align:middle;flex:none}
   header .nav{display:inline-flex;align-items:center;gap:6px}
-  header .navcount{font:600 var(--fs-xs) var(--mono);color:var(--warn);background:var(--warn-soft);border-radius:var(--r-pill);padding:1px 6px;line-height:1.4}
+  .navcount{font:600 var(--fs-xs) var(--mono);color:var(--warn);background:var(--warn-soft);border-radius:var(--r-pill);padding:1px 6px;line-height:1.4}
   header .nav .ph{opacity:.75}
   header .nav.on .ph{opacity:1;color:var(--acc)}
   .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:var(--r-sm);
@@ -578,21 +593,15 @@
 <header>
   <button class="icon-btn" id="sbToggle" title="Toggle sidebar" aria-label="Toggle sidebar"><i data-icon="arrow-bar-left"></i></button>
   <span class="logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 11" shape-rendering="crispEdges"><rect x="2" y="1" width="1" height="1" fill="#a3e635"/><rect x="6" y="1" width="1" height="1" fill="#7cc02f"/><rect x="7" y="1" width="1" height="1" fill="#7cc02f"/><rect x="8" y="1" width="1" height="1" fill="#7cc02f"/><rect x="9" y="1" width="1" height="1" fill="#4f7d24"/><rect x="4" y="3" width="1" height="1" fill="#a3e635"/><rect x="7" y="3" width="1" height="1" fill="#7cc02f"/><rect x="8" y="3" width="1" height="1" fill="#7cc02f"/><rect x="9" y="3" width="1" height="1" fill="#7cc02f"/><rect x="10" y="3" width="1" height="1" fill="#7cc02f"/><rect x="11" y="3" width="1" height="1" fill="#7cc02f"/><rect x="12" y="3" width="1" height="1" fill="#4f7d24"/><rect x="1" y="5" width="1" height="1" fill="#a3e635"/><rect x="5" y="5" width="1" height="1" fill="#a3e635"/><rect x="6" y="5" width="1" height="1" fill="#a3e635"/><rect x="7" y="5" width="1" height="1" fill="#a3e635"/><rect x="8" y="5" width="1" height="1" fill="#a3e635"/><rect x="9" y="5" width="1" height="1" fill="#a3e635"/><rect x="10" y="5" width="1" height="1" fill="#a3e635"/><rect x="11" y="5" width="1" height="1" fill="#a3e635"/><rect x="12" y="5" width="1" height="1" fill="#a3e635"/><rect x="13" y="5" width="1" height="1" fill="#4f7d24"/><rect x="4" y="7" width="1" height="1" fill="#a3e635"/><rect x="7" y="7" width="1" height="1" fill="#7cc02f"/><rect x="8" y="7" width="1" height="1" fill="#7cc02f"/><rect x="9" y="7" width="1" height="1" fill="#7cc02f"/><rect x="10" y="7" width="1" height="1" fill="#7cc02f"/><rect x="11" y="7" width="1" height="1" fill="#4f7d24"/><rect x="2" y="9" width="1" height="1" fill="#a3e635"/><rect x="6" y="9" width="1" height="1" fill="#7cc02f"/><rect x="7" y="9" width="1" height="1" fill="#7cc02f"/><rect x="8" y="9" width="1" height="1" fill="#7cc02f"/><rect x="9" y="9" width="1" height="1" fill="#4f7d24"/></svg>Swarm</span>
-  <a href="#" data-view="fleet" class="nav on"><i data-icon="squares-four"></i>Fleet</a>
-  <a href="#" data-view="board" class="nav"><i data-icon="stack"></i>Board</a>
-  <a href="#" data-view="incidents" class="nav"><i data-icon="warning"></i>Incidents<b id="incCount" class="navcount" hidden></b></a>
-  <a href="#" data-view="prs" class="nav"><i data-icon="git-pull-request"></i>PRs</a>
-  <a href="#" data-view="timeline" class="nav"><i data-icon="clock-counter-clockwise"></i>Timeline</a>
-  <a href="#" data-view="spend" class="nav"><i data-icon="coins"></i>Spend</a>
-  <a href="#" data-view="stats" class="nav"><i data-icon="chart-bar"></i>Stats</a>
-  <a href="#" data-view="search" class="nav"><i data-icon="magnifying-glass"></i>Search</a>
   <span class="sp"></span>
   <span id="today"></span>
   <span id="daemon"><span class="dot"></span><span class="lbl">Daemon</span></span>
+  <button class="icon-btn" id="palBtn" title="Jump to view, project or session (⌘K)" aria-label="Open command palette"><i data-icon="magnifying-glass"></i></button>
   <button class="icon-btn" id="feedback" title="Send feedback (opens a GitHub issue)" aria-label="Send feedback"><i data-icon="comment-text"></i></button>
   <button class="icon-btn" id="settings" title="Settings" aria-label="Settings"><i data-icon="sliders"></i></button>
 </header>
 <aside>
+  <nav id="viewnav"></nav>
   <div id="projects"></div>
 </aside>
 <main id="main"></main>