@ra3orblade/swarm 0.4.1 → 0.6.0

package/web/app.js

@@ -45,7 +45,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, 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, runs: [], attribution: null, taskFilter: "ready", resources: [], prs: [], seq: 0, sel: null, session: null, log: [], turns: [], view: "fleet", agentFilter: 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`; };
@@ -129,18 +129,37 @@ 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; }).catch(() => {});
+  if (!state.version) fetch("/v1/health").then((r) => r.json()).then((h) => { state.version = h.version; maybeWhatsNew(); }).catch(() => {});
   let prsChanged = false;
   if (state.view === "prs" && !state.session) {
     const prs = await (await fetch("/v1/prs")).json().catch(() => state.prs ?? []);
     prsChanged = JSON.stringify(prs) !== JSON.stringify(state.prs);
     state.prs = prs;
   }
+  let attrChanged = false;
+  if (state.view === "spend" && state.sel && !state.session) {
+    const a = await fetch(`/v1/attribution?project=${encodeURIComponent(state.sel)}`).then((r) => r.json()).catch(() => state.attribution);
+    attrChanged = JSON.stringify(a) !== JSON.stringify(state.attribution);
+    state.attribution = a;
+  } else if (state.view === "spend" && !state.sel) {
+    if (state.attribution) attrChanged = true;
+    state.attribution = null;
+  }
+  let runsChanged = false;
+  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 ?? []);
+    runsChanged = JSON.stringify(runs) !== JSON.stringify(state.runs);
+    state.runs = runs;
+  }
   let tasksChanged = false;
   if (state.view === "board" && state.sel && !state.session) {
-    const t = await (await fetch(`/v1/tasks?project=${encodeURIComponent(state.sel)}`)).json().catch(() => state.tasks);
-    tasksChanged = JSON.stringify(t) !== JSON.stringify(state.tasks);
-    state.tasks = t;
+    const [t, g] = 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),
+    ]);
+    tasksChanged = JSON.stringify(t) !== JSON.stringify(state.tasks) || JSON.stringify(g) !== JSON.stringify(state.gates);
+    state.tasks = t; state.gates = g;
   }
   let incChanged = false;
   if (state.view === "incidents" && !state.session) {
@@ -149,15 +168,19 @@ async function refresh() {
     incChanged = JSON.stringify(inc) !== JSON.stringify(state.allIncidents);
     state.allIncidents = inc;
   }
-  if (!same || prsChanged || incChanged || tasksChanged || state.dirty || Date.now() - lastRenderAt > 30_000) schedule();
+  if (!same || prsChanged || incChanged || tasksChanged || runsChanged || attrChanged || state.dirty || Date.now() - lastRenderAt > 30_000) schedule();
 }
-const VIEWS = ["fleet", "board", "incidents", "prs", "timeline", "spend", "stats"];
+const VIEWS = ["fleet", "board", "incidents", "prs", "timeline", "spend", "stats", "search"];
 // restore last view + project selection (persisted UI state)
 {
   const v = localStorage.getItem("swarm.view");
   if (VIEWS.includes(v)) state.view = v;
   const sel = localStorage.getItem("swarm.sel");
   if (sel) state.sel = sel;
+  // Deep links win over persisted state: ?view=board&project=<id>&session=<id>
+  const q = new URLSearchParams(location.search);
+  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);
 }
@@ -172,6 +195,7 @@ function render() {
   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();
@@ -342,7 +366,7 @@ function renderPRs() {
 
 // ---------- board (coordination: claims, worktrees, incidents)
 function renderBoard() {
-  const parts = [renderTasks(), renderProcesses(), renderResources(), renderClaims(), renderWorktrees(), renderIncidents()].filter(Boolean);
+  const parts = [renderTasks(), renderGates(), renderProcesses(), renderResources(), renderClaims(), renderWorktrees(), renderIncidents()].filter(Boolean);
   $("#main").innerHTML = parts.length
     ? parts.join("").replace(/^(<h2) class="mt-sec"/, "$1") // 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>`;
@@ -356,7 +380,7 @@ function incidentColumns(full) {
     { key: "project", label: "project", width: 104, get: (i) => projName(i.projectId), cell: (i) => esc(projName(i.projectId)) },
     { key: "session", label: "session", width: 150, get: (i) => sess(i.sessionId)?.title ?? i.sessionId ?? "", cell: (i) => (i.sessionId ? `<a href="#" data-s="${i.sessionId}">${esc(sess(i.sessionId)?.title ?? i.sessionId.slice(0, 8))}</a>` : '<span class="dim">—</span>') },
     { key: "rule", label: "rule", width: 150, get: (i) => i.rule, cell: (i) => `<span class="br">${esc(i.rule ?? "")}</span>` },
-    { key: "action", label: "action", width: 80, get: (i) => i.action, cell: (i) => (i.action === "deny" ? '<span class="badge warn">Denied</span>' : '<span class="badge acc">Asked</span>') },
+    { key: "action", label: "action", width: 80, get: (i) => i.action, cell: (i) => (i.action === "deny" ? '<span class="badge warn">Denied</span>' : i.action === "orphaned" ? '<span class="badge warn">Orphaned</span>' : i.action === "failed" ? '<span class="badge warn">Failed</span>' : '<span class="badge acc">Asked</span>') },
     { key: "command", label: "command", flex: true, get: (i) => i.command, cell: (i) => `<span class="now" title="${esc(i.reason ?? "")}">${esc(i.command ?? "")}</span>` },
     ...(full ? [
       { key: "reason", label: "reason", width: 260, get: (i) => i.reason ?? "", cell: (i) => `<span class="dim now" title="${esc(i.reason ?? "")}">${esc(i.reason ?? "")}</span>` },
@@ -364,7 +388,7 @@ function incidentColumns(full) {
     ] : []),
   ].filter((c) => !(c.key === "project" && state.sel) && !(c.key === "session" && !full));
 }
-const incidentDot = (i) => `<span class="s ${i.acked ? "ended" : i.action === "deny" ? "waiting" : "idle"}"></span>`;
+const incidentDot = (i) => `<span class="s ${i.acked ? "ended" : i.action === "deny" || i.action === "orphaned" || i.action === "failed" ? "waiting" : "idle"}"></span>`;
 const ackLink = (i) => (i.acked ? "" : `<a href="#" data-ack="${i.seq}" title="Mark as seen">Ack</a>`);
 
 function renderIncidents() {
@@ -383,7 +407,64 @@ function renderIncidents() {
     });
 }
 
+// M4.6: rule dry-run — replay this project's history under chosen modes; nothing is recorded.
+const RULE_IDS = ["pattern_kill", "shared_tree", "destructive_git", "protected_ports", "no_foreign_worktree", "claim_required_to_write"];
+const dry = { modes: {}, report: null, busy: false };
+async function openDryRun() {
+  if (!state.sel) return alert("Pick a project in the sidebar first — the dry-run replays one project's history.");
+  dry.modes = {}; dry.report = null;
+  await runDryRun();
+}
+async function runDryRun() {
+  dry.busy = true; renderDryRun();
+  const q = new URLSearchParams({ project: state.sel, ...dry.modes });
+  dry.report = await fetch(`/v1/rules/dryrun?${q}`).then((r) => r.json()).catch((e) => ({ ok: false, error: String(e) }));
+  dry.busy = false; renderDryRun();
+}
+function renderDryRun() {
+  const r = dry.report;
+  const sel = (id) => {
+    const cur = dry.modes[id] ?? r?.modes?.[id] ?? "ask";
+    return `<label class="dr-rule"><span class="br">${id}</span><select data-drmode="${id}">${["ask", "deny", "off"].map((m) => `<option value="${m}" ${m === cur ? "selected" : ""}>${m}</option>`).join("")}</select>${r ? `<span class="dim">ask <b>${r.byRule[id].ask}</b> · deny <b>${r.byRule[id].deny}</b></span>` : ""}</label>`;
+  };
+  const flaky = (r?.flaky ?? []).map((f) => `<div class="dr-flaky"><code>${esc(f.display)}</code><div class="dim" style="font-size:var(--fs-sm)">${esc(f.suggestion)} · ${f.sessions} session${f.sessions === 1 ? "" : "s"}</div></div>`).join("");
+  const hits = (r?.hits ?? []).slice(-40).reverse().map((h) => `<tr><td class="dim">${hhmm(h.ts)}</td><td><span class="br">${esc(h.rule)}</span></td><td>${h.action}</td><td><code>${esc(h.display)}</code></td><td class="dim">${h.completed ? "ran" : ""}</td></tr>`).join("");
+  $("#picker").innerHTML = `<div class="pk wn" role="dialog" aria-modal="true">
+    <div class="pk-h">${ic("shield", 15)}<b>Rule dry-run</b><span class="dim" style="margin-left:8px">${esc(projName(state.sel))}</span><span class="grow"></span><button id="pkCancel" title="Close">${ic("x", 14)}</button></div>
+    <div class="pk-b">
+      <p class="dim" style="font-size:var(--fs-sm)">Replays this project's recorded tool calls through the rules under the modes below — what <em>would</em> have been asked or denied. Nothing is recorded; change a mode and re-run to try a rule before switching it on in <code>.swarm.toml</code>.</p>
+      <div class="dr-rules">${RULE_IDS.map(sel).join("")}</div>
+      ${dry.busy ? '<p class="dim">replaying…</p>' : r?.error ? `<p class="dim">${esc(r.error)}</p>` : r ? `
+      <div class="date">${r.evaluated} of ${r.calls} calls evaluated · ${r.hits.length}${r.hits.length >= 200 ? "+" : ""} hits</div>
+      <h4>Flaky signals <span class="dim">rules that keep asking about something that is then allowed anyway</span></h4>
+      ${flaky || '<p class="dim" style="font-size:var(--fs-sm)">None — every rule that fired stuck.</p>'}
+      <h4>Would have fired <span class="dim">newest first, last 40</span></h4>
+      ${hits ? `<div style="overflow-x:auto"><table class="plain"><tbody>${hits}</tbody></table></div>` : '<p class="dim" style="font-size:var(--fs-sm)">Nothing — these modes are silent on this history.</p>'}` : ""}
+    </div>
+    <div class="pk-f"><span class="grow"></span><button id="drRun" ${dry.busy ? "disabled" : ""}>Re-run</button><button id="pkCancel">Close</button></div>
+  </div>`;
+}
+
 // ---------- incidents view (M2.3): the denied-action feed, with ack
+// M4.3: turn an incident into a .swarm.toml rule + a CLAUDE.md lesson, both copyable.
+function codifyIncident(seq) {
+  const i = (state.allIncidents ?? []).find((x) => x.seq === Number(seq));
+  if (!i?.suggestion) return;
+  const sg = i.suggestion;
+  $("#picker").innerHTML = `<div class="pk wn" role="dialog" aria-modal="true">
+    <div class="pk-h">${ic("shield", 15)}<b>Codify</b><span class="grow"></span><button id="pkCancel" title="Close">${ic("x", 14)}</button></div>
+    <div class="pk-b">
+      <h3>${esc(sg.title)}</h3>
+      <div class="date">from a <span class="br">${esc(i.rule)}</span> incident${i.count > 1 ? ` \u00b7 seen ${i.count}\u00d7` : ""}</div>
+      ${sg.toml ? `<h4>.swarm.toml <a href="#" class="cbtn" data-copy-toml="${seq}">${ic("copy", 12)} copy</a></h4><pre class="snip" id="toml-${seq}">${esc(sg.toml)}</pre>` : ""}
+      <h4>CLAUDE.md lesson <a href="#" class="cbtn" data-copy-lesson="${seq}">${ic("copy", 12)} copy</a></h4>
+      <pre class="snip" id="lesson-${seq}">- ${esc(sg.lesson)}</pre>
+      ${sg.toml ? '<p class="dim" style="font-size:var(--fs-sm)">Merge the block into the repo\'s <code>.swarm.toml</code>; the daemon picks it up within ~30s.</p>' : '<p class="dim" style="font-size:var(--fs-sm)">No config rule fits this one \u2014 the lesson is the takeaway.</p>'}
+    </div>
+    <div class="pk-f"><span class="grow"></span><button id="pkCancel">Close</button></div>
+  </div>`;
+}
+
 function renderIncidentsView() {
   const all = state.allIncidents;
   const rows = (all ?? []).filter((i) => !state.sel || i.projectId === state.sel);
@@ -394,14 +475,14 @@ function renderIncidentsView() {
   const rules = [...byRule.entries()].sort((a, b) => b[1] - a[1]).map(([r, n]) => `<span class="br">${esc(r)}</span> <b>${n}</b>`).join(" · ");
   $("#main").innerHTML =
     `<h2>Incidents <span>${all === null ? "loading…" : `${open} open · ${rows.length} shown`} · every ask/deny the rules made${rules ? ` · ${rules}` : ""}</span></h2>` +
-    `<div class="chips">${chip("open", "Open")}${chip("all", "All")}${open ? `<span class="chip" data-ackall="1" title="Mark every open incident${state.sel ? " in this project" : ""} as seen">Ack all <b>${open}</b></span>` : ""}</div>` +
+    `<div class="chips">${chip("open", "Open")}${chip("all", "All")}${open ? `<span class="chip" data-ackall="1" title="Mark every open incident${state.sel ? " in this project" : ""} as seen">Ack all <b>${open}</b></span>` : ""}${state.sel ? `<span class="chip" id="dryrun" title="Replay this project's history under different rule modes">${ic("shield", 12)} Dry-run rules</span>` : ""}</div>` +
     (rows.length
       ? dataTable({
           id: "incidents-feed",
           columns: incidentColumns(true),
           rows,
           leading: { width: 24, cell: incidentDot },
-          trailing: { width: 44, cell: ackLink },
+          trailing: { width: 120, cell: (i) => `${i.suggestion ? `<a href="#" data-codify="${i.seq}" title="Turn this into a rule / lesson">${ic("shield", 12)} Codify</a> ` : ""}${ackLink(i)}` },
           rowAttrs: () => "",
           rerender: touch,
         })
@@ -457,11 +538,49 @@ function renderResources() {
     });
 }
 
+// Gate chips: ✓ pass / ✗ fail / — never run, latest run on hover.
+const gateChips = (gates) => gates.map((g) => {
+  const cls = g.verdict === "pass" ? "ok" : g.verdict === "fail" ? "warn" : "";
+  const mark = g.verdict === "pass" ? "✓" : g.verdict === "fail" ? "✗" : "—";
+  return `<span class="badge ${cls}" title="${esc(g.gate)}: ${g.runs} run${g.runs === 1 ? "" : "s"}, ${g.fails} fail${g.fails === 1 ? "" : "s"}">${esc(g.gate)} ${mark}</span>`;
+}).join(" ") || '<span class="dim">—</span>';
+
+// RECENT GATES: verification runs on this project (M2.2). Only with a project selected.
+function renderGates() {
+  if (!state.sel || !state.gates) return "";
+  const runs = state.gates.runs ?? [];
+  const required = state.gates.required ?? [];
+  if (!runs.length && !required.length) return "";
+  const sess = (id) => state.sessions.find((s) => s.id === id);
+  const cols = [
+    { key: "ts", label: "when", width: 76, get: (r) => r.createdAt, cell: (r) => `<span class="dim" title="${esc(r.createdAt)}">${ago(r.createdAt)}</span>` },
+    { key: "task", label: "task", width: 110, get: (r) => r.task, cell: (r) => `<b>${esc(r.task)}</b>` },
+    { key: "gate", label: "gate", width: 120, get: (r) => r.gate, cell: (r) => `<span class="br">${esc(r.gate)}</span>` },
+    { key: "verdict", label: "verdict", width: 80, get: (r) => r.verdict, cell: (r) => (r.verdict === "pass" ? '<span class="badge ok">Pass</span>' : '<span class="badge warn">Fail</span>') },
+    { key: "rubric", label: "rubric", flex: true, get: (r) => r.rubric, cell: (r) => `<span class="now" title="${esc(r.rubric)}">${esc(r.rubric)}</span>` },
+    { 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>` +
+    (runs.length
+      ? dataTable({
+          id: "gates",
+          columns: cols,
+          rows: runs.slice(0, 50),
+          leading: { width: 24, cell: (r) => `<span class="s ${r.verdict === "fail" ? "waiting" : "active"}"></span>` },
+          trailing: { width: 12, cell: () => "" },
+          rowAttrs: () => "",
+          rerender: touch,
+        })
+      : `<div class="empty">${PX.idle()}No gate runs yet. <code>swarm gate record &lt;task&gt; ${esc(required[0] ?? "review")} pass --rubric "…"</code></div>`);
+}
+
 // TASKS: the project's backlog from `.swarm.toml [tasks] source` (M1.6). Only with a project selected.
 function renderTasks() {
   if (!state.sel || !state.tasks?.source) return "";
   const all = state.tasks.tasks ?? [];
   const ready = all.filter((t) => t.ready);
+  const hasGates = (state.tasks.required ?? []).length > 0 || all.some((t) => (t.gates ?? []).length);
   const rows = state.taskFilter === "ready" ? ready : state.taskFilter === "open" ? all.filter((t) => t.status !== "done") : all;
   const chip = (k, label, n) => `<span class="chip ${state.taskFilter === k ? "on" : ""}" data-task-filter="${k}">${label}${n != null ? ` <b>${n}</b>` : ""}</span>`;
   const st = (t) => t.claimedBy ? `<span class="badge ok">Held · ${esc(t.claimedBy)}</span>`
@@ -474,8 +593,10 @@ function renderTasks() {
     { key: "milestone", label: "milestone", width: 160, get: (t) => t.milestone ?? "", cell: (t) => `<span class="dim now">${esc((t.milestone ?? "").split(" — ")[0])}</span>` },
     { key: "depends", label: "depends", width: 130, get: (t) => t.depends.join(" "), cell: (t) => `<span class="br">${esc(t.depends.join(" ")) || "—"}</span>` },
     { key: "state", label: "state", width: 150, get: (t) => (t.claimedBy ? 0 : t.ready ? 1 : t.status === "active" ? 2 : t.status === "done" ? 4 : 3), cell: st },
+    ...(hasGates ? [{ key: "gates", label: "gates", width: 170, get: (t) => (t.gates ?? []).filter((g) => g.verdict === "pass").length, cell: (t) => gateChips(t.gates ?? []) }] : []),
   ];
-  return `<h2 class="mt-sec">Tasks <span>${ready.length} ready · ${all.length} in ${esc(state.tasks.source)}</span></h2>` +
+  const srcLabel = state.tasks.source === "github" ? "GitHub Issues" : state.tasks.source === "linear" ? "Linear" : state.tasks.source;
+  return `<h2 class="mt-sec">Tasks <span>${ready.length} ready · ${all.length} in ${esc(srcLabel)}${state.tasks.error ? ` · <span class="badge warn" title="${esc(state.tasks.error)}">${ic("warning", 12)} ${esc(state.tasks.error)}</span>` : ""}</span></h2>` +
     `<div class="chips">${chip("ready", "Ready", ready.length)}${chip("open", "Open", all.filter((t) => t.status !== "done").length)}${chip("all", "All", all.length)}</div>` +
     (rows.length
       ? dataTable({
@@ -483,7 +604,7 @@ function renderTasks() {
           columns: cols,
           rows,
           leading: { width: 24, cell: (t) => `<span class="s ${t.claimedBy ? "active" : t.ready ? "waiting" : "idle"}"></span>` },
-          trailing: { width: 70, cell: (t) => (t.ready ? `<a href="#" data-claim="${esc(t.id)}" title="Claim into a fresh worktree">Claim</a>` : "") },
+          trailing: { width: 120, cell: (t) => (t.ready ? `<a href="#" data-run="${esc(t.id)}" title="Claim and spawn claude -p in a worktree">${ic("play", 12)} Run</a> · <a href="#" data-claim="${esc(t.id)}" title="Claim into a fresh worktree">Claim</a>` : t.claimedBy ? `<a href="#" data-run="${esc(t.id)}" title="Spawn claude -p in the held worktree">${ic("play", 12)} Run</a>` : "") },
           rowAttrs: () => "",
           rerender: touch,
         })
@@ -611,9 +732,55 @@ function renderSpend() {
      <div class="cols mt-sec"><div><h2>By project · today <span>${usd(sumBy(filt(sp.byProjectToday), (x) => x.cost))}</span></h2>${tbl(filt(sp.byProjectToday), "project", projName)}
      <h2 class="mt-sec">By project · all time</h2>${tbl(filt(sp.byProjectAll), "project", projName)}</div>
      <div>${byAgentToday ? `<h2>By model · today</h2>${tbl(sp.byModelToday, "model", model)}` : ""}<h2 style="${byAgentToday ? "margin-top:18px" : ""}">By model · all time</h2>${tbl(sp.byModelAll, "model", model)}</div></div>
+     ${renderAttribution()}
      <p class="dim" style="margin-top:var(--gap-sec)">Costs use list prices (static table, refreshed from LiteLLM when online; override in <code>~/.swarm/pricing.json</code>). Cache reads are the bulk of "ctx". Sessions on a subscription plan still show what the tokens would cost at API rates.</p>`;
 }
 
+// M4.2: cost attributed to tasks (via each claim's worktree) + a context re-processing signal.
+// Only meaningful with a project selected.
+function renderAttribution() {
+  const a = state.attribution;
+  if (!state.sel || !a) return "";
+  const parts = [];
+  if (a.byTask?.length) {
+    parts.push(`<h2 class="mt-sec">By task <span>${usd(sumBy(a.byTask, (t) => t.cost))} across ${a.byTask.length} task${a.byTask.length === 1 ? "" : "s"} · attributed by worktree</span></h2>` +
+      dataTable({
+        id: "spend-task",
+        columns: [
+          { key: "task", label: "task", width: 150, get: (t) => t.task, cell: (t) => `<b>${esc(t.task)}</b>` },
+          { key: "owner", label: "owner", width: 120, get: (t) => t.owner || "", cell: (t) => esc(t.owner || "—") },
+          { key: "cost", label: "cost", width: 88, num: true, get: (t) => t.cost, cell: (t) => usd(t.cost) },
+          { key: "output", label: "out", width: 84, num: true, get: (t) => t.output, cell: (t) => tok(t.output) },
+          { key: "sessions", label: "sessions", width: 84, num: true, get: (t) => t.sessions, cell: (t) => String(t.sessions) },
+          { key: "turns", label: "turns", width: 64, num: true, get: (t) => t.turns, cell: (t) => String(t.turns) },
+          { key: "worktree", label: "worktree", flex: true, get: (t) => t.worktree, cell: (t) => `<span class="now dim" title="${esc(t.worktree)}">${esc(short(t.worktree))}</span>` },
+        ],
+        rows: a.byTask,
+        leading: { width: 20, cell: () => "" },
+        trailing: { width: 8, cell: () => "" },
+        rerender: touch,
+      }));
+  }
+  if (a.contextBudget?.length) {
+    parts.push(`<h2 class="mt-sec">Context budget <span>sessions re-processing the most context · a high reuse % is a lot of re-reading</span></h2>` +
+      dataTable({
+        id: "spend-ctx",
+        columns: [
+          { key: "title", label: "session", flex: true, get: (r) => r.title ?? r.id, cell: (r) => `<a href="#" data-s="${r.id}">${esc(r.title ?? r.id.slice(0, 8))}</a>` },
+          { key: "reuse", label: "reuse", width: 90, num: true, get: (r) => r.reuse, cell: (r) => `<span class="${r.reuse > 0.9 ? "br" : "dim"}">${(r.reuse * 100).toFixed(0)}%</span>` },
+          { key: "cacheRead", label: "context re-read", width: 120, num: true, get: (r) => r.cacheRead, cell: (r) => tok(r.cacheRead) },
+          { key: "cost", label: "cost", width: 88, num: true, get: (r) => r.cost, cell: (r) => usd(r.cost) },
+          { key: "turns", label: "turns", width: 64, num: true, get: (r) => r.turns, cell: (r) => String(r.turns) },
+        ],
+        rows: a.contextBudget,
+        leading: { width: 20, cell: () => "" },
+        trailing: { width: 8, cell: () => "" },
+        rerender: touch,
+      }));
+  }
+  return parts.join("");
+}
+
 // ---------- stats
 // Heavier than the 5s snapshot, so it has its own endpoint: fetched when the view opens (per project
 // scope), then refreshed at most every 30s while the view stays open.
@@ -632,6 +799,34 @@ const big = (n) => (n >= 1e9 ? `${(n / 1e9).toFixed(2)}B` : n >= 1e6 ? `${(n / 1
 const toolName = (t) => String(t).replace(/^mcp__([^_]+(?:_[^_]+)*)__/, "$1 · ").replace(/^plugin_/, "");
 const pct = (a, b) => (b ? `${((100 * a) / b).toFixed(0)}%` : "—");
 const dur = (ms) => (ms < 3600e3 ? `${Math.round(ms / 60e3)}m` : ms < 86400e3 ? `${(ms / 3600e3).toFixed(1)}h` : `${(ms / 86400e3).toFixed(1)}d`);
+// ---------- search view (M4.5): memory over Swarm's own data — handoffs, incidents, gates, what sessions said
+const srch = { q: "", kind: "", hits: null, t: 0 };
+function renderSearch() {
+  const chip = (k, label) => `<span class="chip ${srch.kind === k ? "on" : ""}" data-skind="${k}">${label}</span>`;
+  const mark = (s) => esc(s).replace(/\u0001/g, "<mark>").replace(/\u0002/g, "</mark>");
+  const link = (h) => h.kind === "session" ? `data-s="${esc(h.ref)}"` : h.sessionId ? `data-s="${esc(h.sessionId)}"` : "";
+  const hits = (srch.hits ?? []).map((h) => `<div class="hit"><div class="ht"><span class="badge">${esc(h.kind)}</span><b>${esc(h.title)}</b>${h.task ? `<span class="br">${esc(h.task)}</span>` : ""}<span class="grow"></span>${!state.sel ? `<span class="dim">${esc(projName(h.projectId))} · </span>` : ""}<span class="dim">${ago(h.ts)}</span>${link(h) ? `<a href="#" ${link(h)} title="Open the session">${ic("arrow-right", 12)}</a>` : ""}</div><div class="hs">${mark(h.snippet)}</div></div>`).join("");
+  const had = document.activeElement?.id === "srchQ" ? { pos: document.activeElement.selectionStart } : null;
+  $("#main").innerHTML =
+    `<h2>Search <span>Swarm's own memory${state.sel ? ` · ${esc(projName(state.sel))}` : " · all projects"} — handoffs, incidents, gates, what sessions said. Never your code.</span></h2>` +
+    `<div class="srch"><input id="srchQ" type="search" placeholder="pkill, login form, kind:incident git reset, task:M1.2 …" value="${esc(srch.q)}" autocomplete="off"></div>` +
+    `<div class="chips">${chip("", "All")}${chip("handoff", "Handoffs")}${chip("incident", "Incidents")}${chip("gate", "Gates")}${chip("session", "Sessions")}</div>` +
+    (srch.hits === null ? `<div class="empty">${PX.idle()}Type to search. Words are AND-ed, the last one is a prefix; quote a phrase; <code>kind:</code> and <code>task:</code> filter.</div>`
+      : hits || `<div class="empty">${PX.idle()}Nothing in memory matches <b>${esc(srch.q)}</b>.</div>`);
+  if (had) { const i = $("#srchQ"); i.focus(); i.setSelectionRange(had.pos, had.pos); }
+}
+async function runSearch() {
+  if (!srch.q.trim()) { srch.hits = null; return renderSearch(); }
+  const q = new URLSearchParams({ q: srch.q, limit: "50" });
+  if (state.sel) q.set("project", state.sel);
+  if (srch.kind) q.set("kind", srch.kind);
+  const mine = ++srch.t;
+  const j = await fetch(`/v1/memory?${q}`).then((r) => r.json()).catch(() => ({ hits: [] }));
+  if (mine !== srch.t) return;
+  srch.hits = j.hits ?? [];
+  if (state.view === "search" && !state.session) renderSearch();
+}
+document.addEventListener("input", (ev) => { if (ev.target.id === "srchQ") { srch.q = ev.target.value; clearTimeout(srch.db); srch.db = setTimeout(runSearch, 150); } });
 function renderStats() {
   const st = statsCache.key === (state.sel ?? "") ? statsCache.data : null;
   const scope = state.sel ? esc(projName(state.sel)) : "all projects";
@@ -799,6 +994,84 @@ function sessionStream() {
 }
 // True when `rows` only extends the rows already in #log (same session, same prefix) → append, don't rebuild.
 const isAppend = (rows) => logRendered && rows.length >= logRendered.length && logRendered.every((k, n) => rows[n].key === k);
+// M4.1 session replay: step through a session's tool calls, one at a time, with full input/output
+// (lazy-fetched from /v1/events/:seq). replayState holds the current step; nav by buttons or ←/→.
+const replay = { steps: [], i: 0, cache: new Map() };
+// M4.4: resume where this died — the daemon builds the prompt from the handoff + tail; we just confirm.
+async function resumeDead() {
+  const id = state.session; if (!id) return;
+  const plan = await fetch(`/v1/sessions/${encodeURIComponent(id)}/resume`).then((r) => r.json());
+  if (!plan.ok) return alert(plan.error);
+  if (!confirm(`Resume ${plan.task}${plan.owner ? ` as ${plan.owner}` : ""}?\n\n${plan.prompt.slice(0, 900)}${plan.prompt.length > 900 ? "…" : ""}`)) return;
+  const r = await fetch(`/v1/sessions/${encodeURIComponent(id)}/resume`, { method: "POST", headers: { "content-type": "application/json" }, body: "{}" }).then((x) => x.json());
+  if (!r.ok) return alert(r.error);
+  openSession(r.run.sessionId);
+}
+function openReplay() {
+  replay.steps = state.log.filter((e) => e.type === "tool.requested").map((e) => ({ seq: e.seq, tool: e.payload?.tool ?? "tool", summary: e.payload?.summary ?? "" }));
+  replay.i = 0;
+  replay.cache.clear();
+  if (!replay.steps.length) { alert("No tool calls in this session yet."); return; }
+  renderReplay();
+}
+async function renderReplay() {
+  const n = replay.steps.length;
+  const step = replay.steps[replay.i];
+  let detail = replay.cache.get(step.seq);
+  if (!detail) {
+    // the request event (full input) and the paired completed event (output), both by seq
+    const req = await fetch(`/v1/events/${step.seq}`).then((r) => r.json()).catch(() => null);
+    const done = state.log.find((e) => e.type === "tool.completed" && e.seq > step.seq && e.payload?.summary === step.summary);
+    const res = done ? await fetch(`/v1/events/${done.seq}`).then((r) => r.json()).catch(() => null) : null;
+    detail = { input: req?.payload?.toolInput ?? null, output: res?.payload?.toolResponse ?? null, ts: req?.ts };
+    replay.cache.set(step.seq, detail);
+  }
+  const j = (v) => (v == null ? "" : typeof v === "string" ? v : JSON.stringify(v, null, 2));
+  $("#picker").innerHTML = `<div class="pk wn rp" role="dialog" aria-modal="true">
+    <div class="pk-h">${ic("play", 15)}<b>Replay</b><span class="dim" style="margin-left:8px">${step.tool}</span><span class="grow"></span><span class="dim" style="font-size:var(--fs-sm)">${replay.i + 1} / ${n}${detail.ts ? ` · ${hhmm(detail.ts)}` : ""}</span><button id="pkCancel" title="Close">${ic("x", 14)}</button></div>
+    <div class="pk-b">
+      <div class="dim now" style="font-family:var(--mono);font-size:var(--fs-sm);margin-bottom:8px">${esc(step.summary)}</div>
+      <h4>input</h4><pre class="snip">${esc(j(detail.input)) || '<span class="dim">—</span>'}</pre>
+      <h4>output</h4><pre class="snip">${detail.output != null ? esc(j(detail.output)).slice(0, 4000) : '<span class="dim">(no result captured)</span>'}</pre>
+    </div>
+    <div class="pk-f"><button id="rpPrev" ${replay.i === 0 ? "disabled" : ""}>${ic("arrow-left", 12)} Prev</button><span class="grow"></span><input id="rpRange" type="range" min="0" max="${n - 1}" value="${replay.i}" style="flex:1;max-width:280px"><span class="grow"></span><button class="primary" id="rpNext" ${replay.i >= n - 1 ? "disabled" : ""}>Next ${ic("arrow-right", 12)}</button></div>
+  </div>`;
+}
+function replayGo(delta) {
+  const n = replay.steps.length;
+  replay.i = Math.max(0, Math.min(n - 1, replay.i + delta));
+  renderReplay();
+}
+
+// Spawned sessions get a stdin box while their run is live (M3.3); interactive ones are told where to type.
+function stdinBox(s) {
+  if (s.kind !== "spawned") return "";
+  const run = (state.runs ?? []).find((r) => r.sessionId === s.id);
+  if (!run) return `<div class="stdin"><span class="hint">${ic("play", 12)} spawned by swarm run · no longer live</span></div>`;
+  const perms = (run.pending ?? []).map((pp) => `<div class="perm"><div class="perm-t">${ic("warning", 13)} <b>${esc(pp.tool)}</b> needs approval<span class="dim now" title="${esc(pp.reason)}"> — ${esc(pp.reason)}</span></div><div class="perm-c">${esc(pp.display)}</div><div class="perm-b"><button class="ok" data-perm-allow="${esc(run.id)}:${esc(pp.requestId)}">Allow</button><button class="danger" data-perm-deny="${esc(run.id)}:${esc(pp.requestId)}">Deny</button></div></div>`).join("");
+  return `${perms}<div class="stdin" id="stdin"><input id="stdinText" placeholder="Send a message to this run… (Enter)" autocomplete="off" spellcheck="false"><button id="stdinSend">${ic("arrow-right", 13)} Send</button><button class="danger" data-runstop="${esc(run.id)}">Stop</button><span class="hint">run ${esc(run.id)} · pid ${run.pid}${run.result ? ` · $${run.result.costUsd.toFixed(2)} so far` : ""}</span></div>`;
+}
+async function sendStdin() {
+  const s = state.sessions.find((x) => x.id === state.session);
+  const run = (state.runs ?? []).find((r) => r.sessionId === s?.id);
+  const el = $("#stdinText"); const text = el?.value.trim();
+  if (!run || !text) return;
+  el.value = "";
+  const r = await fetch(`/v1/runs/${encodeURIComponent(run.id)}/send`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ text }) });
+  if (!r.ok) alert((await r.json()).error);
+  refresh();
+}
+document.addEventListener("click", (ev) => {
+  if (ev.target.closest("#stdinSend")) return sendStdin();
+  const a = ev.target.closest("[data-perm-allow]"), d = ev.target.closest("[data-perm-deny]");
+  const key = a?.dataset.permAllow || d?.dataset.permDeny;
+  if (key) {
+    const [runId, reqId] = key.split(":");
+    return fetch(`/v1/runs/${encodeURIComponent(runId)}/permissions/${encodeURIComponent(reqId)}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ allow: Boolean(a) }) }).then(refresh);
+  }
+});
+document.addEventListener("keydown", (ev) => { if (ev.key === "Enter" && ev.target.id === "stdinText") { ev.preventDefault(); sendStdin(); } });
+
 function renderSession() {
   const s = state.sessions.find((x) => x.id === state.session);
   if (!s) return;
@@ -812,7 +1085,7 @@ function renderSession() {
   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 = (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></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>${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 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("context", `${tok(ctx)}<small> · ${ctx ? ((100 * t.cacheRead) / ctx).toFixed(0) : 0}% cached</small>`)}
@@ -828,9 +1101,13 @@ function renderSession() {
     // scroll position (and its DOM) untouched.
     $("#main > h2").outerHTML = head;
     $("#main .side").innerHTML = side;
+    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);
     if (rows.length > logRendered.length) logEl.insertAdjacentHTML("beforeend", rows.slice(logRendered.length).map((r) => r.html).join(""));
   } else {
-    $("#main").innerHTML = `${head}<div class="sess"><div id="log">${rows.map((r) => r.html).join("")}</div><aside class="side">${side}</aside></div>`;
+    const sb = stdinBox(s);
+    $("#main").innerHTML = `${head}<div class="sess ${sb ? "has-stdin" : ""}"><div id="log">${rows.map((r) => r.html).join("")}</div><aside class="side">${side}</aside></div>${sb}`;
   }
   logRendered = rows.map((r) => r.key);
   // Follow the tail when pinned to the bottom; otherwise keep the reading position —
@@ -883,12 +1160,80 @@ function menuSpec(kind, d) {
       { label: "Refresh pricing", icon: "arrows-clockwise", caption: "LiteLLM", run: async () => { const r = await fetch("/v1/pricing/refresh", { method: "POST" }); if (!r.ok) console.warn("pricing refresh failed", r.status); refresh(); } },
       { label: "Copy dashboard URL", icon: "copy", run: () => copy(location.origin) },
       { divider: true },
+      { label: "Desktop notifications", icon: "bell", pressed: notifyOn(), caption: notifyOn() ? "on" : "permission prompts, orphans", 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") },
     ] };
   }
   return null;
 }
+// M4.7 desktop notifications: native notifications (web Notification API — works in the browser and
+// the desktop app's webview) for the things you'd want to walk away and be pinged about — a spawned
+// run waiting on a permission, and a claim orphaned with unfinished work. Clicking opens the spot to
+// act. Off until enabled from the settings menu (which requests OS permission). Quiet while focused.
+const NOTIFY_KEY = "swarm.notify";
+const notifyOn = () => { try { return localStorage.getItem(NOTIFY_KEY) === "on"; } catch { return false; } };
+async function enableNotifications() {
+  if (!("Notification" in window)) { alert("This browser doesn't support notifications."); return; }
+  const perm = Notification.permission === "granted" ? "granted" : await Notification.requestPermission();
+  if (perm !== "granted") { alert("Notifications were blocked. Allow them for this site in your browser/OS settings."); return; }
+  try { localStorage.setItem(NOTIFY_KEY, "on"); } catch {}
+  new Notification("Swarm notifications on", { body: "You'll be pinged when a run needs a permission or a claim is orphaned." });
+}
+function disableNotifications() { try { localStorage.setItem(NOTIFY_KEY, "off"); } catch {} }
+let lastNotifyAt = 0;
+function notifyForEvent(ev) {
+  if (!notifyOn() || !("Notification" in window) || Notification.permission !== "granted") return;
+  if (!document.hidden && ev.type !== "permission.requested") return; // only permission prompts interrupt while you're looking
+  const now = Date.now();
+  if (now - lastNotifyAt < 1500) return; // don't stack
+  const p = ev.payload || {};
+  let title, body, onClick;
+  if (ev.type === "permission.requested") {
+    title = `Permission needed: ${p.tool ?? "tool"}`;
+    body = `${p.display ?? ""}
+${p.reason ?? ""}`.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.`;
+    onClick = () => { state.view = "board"; state.sel = ev.projectId || state.sel; state.session = null; refresh(); };
+  } else return;
+  lastNotifyAt = now;
+  const n = new Notification(title, { body, tag: `swarm-${ev.type}-${ev.sessionId ?? ev.seq}` });
+  n.onclick = () => { window.focus(); onClick?.(); n.close(); };
+}
+
+// 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) {
+  const all = window.RELEASE_NOTES || {};
+  if (version && all[version]) return { version, ...all[version] };
+  const latest = Object.keys(all)[0];
+  return latest ? { version: latest, ...all[latest] } : null;
+}
+function whatsNew(version) {
+  const n = releaseNotesFor(version || state.version);
+  if (!n) return;
+  try { localStorage.setItem("swarm.seenVersion", n.version); } catch {}
+  $("#picker").innerHTML = `<div class="pk wn" role="dialog" aria-modal="true">
+    <div class="pk-h">${ic("star", 15)}<b>What's New</b><span class="grow"></span><button id="pkCancel" title="Close">${ic("x", 14)}</button></div>
+    <div class="pk-b"><h3>Swarm ${esc(n.version)}</h3>${n.date ? `<div class="date">${esc(n.date)}</div>` : ""}${n.html}</div>
+    <div class="pk-f"><span class="grow"></span><a href="https://getswarm.vercel.app/changelog" target="_blank" rel="noopener" style="align-self:center;color:var(--dim);font-size:var(--fs-sm)">Full changelog →</a><button id="pkCancel">Close</button></div>
+  </div>`;
+}
+window.swarmWhatsNew = (v) => whatsNew(v);
+// auto-open once per version, but never on the very first run (nothing to compare against)
+function maybeWhatsNew() {
+  if (!state.version || !window.RELEASE_NOTES) return;
+  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);
+}
+
 // Star nudge: once a month at most, never on first open, dismissable for good. Pure localStorage —
 // nothing leaves the machine; clicking Star just opens the repo in a browser.
 const STAR = { key: "swarm.star", firstAfterMs: 2 * 86_400_000, everyMs: 30 * 86_400_000 };
@@ -944,7 +1289,7 @@ document.addEventListener("contextmenu", (ev) => {
 
 // ---------- events
 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]");
+  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]");
   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, {}); }
@@ -952,12 +1297,22 @@ document.addEventListener("click", async (ev) => {
   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.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.run) { ev.preventDefault(); return openRunDrawer(t.dataset.run); }
+  if (t.dataset.runstop) {
+    ev.preventDefault();
+    if (!confirm("Stop this run? Its stdin is closed, then the process is signalled by pid.")) return;
+    return fetch(`/v1/runs/${encodeURIComponent(t.dataset.runstop)}`, { method: "DELETE" }).then(async (r) => { if (!r.ok) alert((await r.json()).error); return refresh(); });
+  }
   if (t.dataset.claim) {
     ev.preventDefault();
     const r = await fetch("/v1/claims", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ projectId: state.sel, task: t.dataset.claim, owner: "dashboard" }) }).then((x) => x.json());
     if (!r.ok) alert(r.error); else state.tasks = null;
     return refresh();
   }
+  if (t.dataset.codify) { ev.preventDefault(); return codifyIncident(t.dataset.codify); }
+  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.dataset.inc) { state.incFilter = t.dataset.inc; state.allIncidents = null; return refresh(); }
   if (t.dataset.ack) {
     ev.preventDefault(); ev.stopPropagation();
@@ -1002,6 +1357,8 @@ document.addEventListener("click", async (ev) => {
     return fetch(`/v1/resources/${encodeURIComponent(t.dataset.resrelease)}?${q}`, { method: "DELETE" }).then(refresh);
   }
   if (t.id === "back") { ev.preventDefault(); state.session = null; return touch(); }
+  if (t.id === "replay") { ev.preventDefault(); return openReplay(); }
+  if (t.id === "resumeDead") { ev.preventDefault(); return resumeDead(); }
   if (t.dataset.s) { ev.preventDefault(); return openSession(t.dataset.s); }
   if (t.dataset.id !== undefined) { state.sel = t.dataset.id || null; localStorage.setItem("swarm.sel", state.sel ?? ""); state.session = null; state.tasks = null; state.dirty = true; return refresh(); }
 });
@@ -1035,6 +1392,45 @@ sbApply();
 
 // ---------- folder picker
 const picker = { path: null };
+// Run drawer (M3.3): prompt prefilled from the task row; submit = POST /v1/runs.
+function openRunDrawer(taskId) {
+  const task = (state.tasks?.tasks ?? []).find((t) => t.id === taskId);
+  const title = task ? `${task.id} — ${task.title}` : taskId;
+  const prompt = task
+    ? `Task ${task.id}: ${task.title}\n\nWork only inside this worktree. When done: commit, push, then call swarm_handoff with what was done and what remains, and record the required gates with swarm_gate_record.`
+    : "";
+  const last = (() => { try { return JSON.parse(localStorage.getItem("swarm.runOpts") || "{}"); } catch { return {}; } })();
+  const opt = (v, cur) => `<option value="${v}" ${v === cur ? "selected" : ""}>${v || "default"}</option>`;
+  $("#picker").innerHTML = `<div class="pk" role="dialog" aria-modal="true">
+    <div class="pk-h">${ic("play", 15)}<b>Run</b><span class="dim now" style="flex:1;margin-left:8px">${esc(title)}</span></div>
+    <div class="pk-b">
+      <label>prompt<textarea id="rnPrompt" spellcheck="false">${esc(prompt)}</textarea></label>
+      <div class="row">
+        <label>permission mode<select id="rnMode">${["acceptEdits", "auto", "plan", "dontAsk", "manual", "bypassPermissions"].map((m) => opt(m, last.mode ?? "acceptEdits")).join("")}</select></label>
+        <label>model<input id="rnModel" placeholder="default" value="${esc(last.model ?? "")}"></label>
+        <label>max turns<input id="rnTurns" type="number" min="1" placeholder="∞" value="${esc(last.turns ?? "")}"></label>
+      </div>
+      <div class="dim" style="font-size:var(--fs-sm)">Claims <b>${esc(taskId)}</b> (or reuses your held worktree) and spawns <code>claude -p</code> there. The session appears in Fleet; steer it from its page.</div>
+    </div>
+    <div class="pk-f"><span class="grow"></span><button id="rnCancel">Cancel</button><button class="primary" id="rnGo" data-task="${esc(taskId)}">${ic("play", 13)} Run</button></div>
+  </div>`;
+  $("#rnPrompt")?.focus();
+}
+async function submitRun(taskId) {
+  const prompt = $("#rnPrompt")?.value.trim();
+  if (!prompt) return alert("A prompt is required.");
+  const mode = $("#rnMode")?.value, model = $("#rnModel")?.value.trim(), turns = $("#rnTurns")?.value;
+  localStorage.setItem("swarm.runOpts", JSON.stringify({ mode, model, turns }));
+  closePicker();
+  const r = await fetch("/v1/runs", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({
+    projectId: state.sel, task: taskId, prompt, owner: "dashboard", permissionMode: mode, model: model || undefined, maxTurns: turns ? Number(turns) : undefined,
+  }) }).then((x) => x.json());
+  if (!r.ok) return alert(r.error);
+  state.tasks = null;
+  await refresh();
+  openSession(r.run.sessionId);
+}
+
 async function openPicker(focusPath = false) {
   await pickerGo("");
   if (focusPath) { const i = $("#pkPath"); if (i) { i.focus(); i.select(); } }
@@ -1063,10 +1459,21 @@ $("#picker").addEventListener("click", (ev) => {
   if (ev.target.id === "picker" || ev.target.closest("#pkCancel")) return closePicker();
   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]");
+  if (ctoml) { ev.preventDefault(); copy($(`#toml-${ctoml.dataset.copyToml}`)?.textContent); ctoml.lastChild.textContent = " copied"; return; }
+  if (cles) { ev.preventDefault(); copy($(`#lesson-${cles.dataset.copyLesson}`)?.textContent); cles.lastChild.textContent = " copied"; return; }
+  if (ev.target.closest("#rpPrev")) return replayGo(-1);
+  if (ev.target.closest("#rpNext")) return replayGo(1);
+  if (ev.target.closest("#rnCancel")) return closePicker();
+  const rnGo = ev.target.closest("#rnGo"); if (rnGo) return submitRun(rnGo.dataset.task);
   if (ev.target.closest("#pkAdd")) { const p = $("#pkPath")?.value.trim() || picker.path; closePicker(); addProject(p); }
 });
+$("#picker").addEventListener("input", (ev) => { if (ev.target.id === "rpRange") { replay.i = Number(ev.target.value); renderReplay(); } });
+$("#picker").addEventListener("change", (ev) => { if (ev.target.dataset?.drmode) { dry.modes[ev.target.dataset.drmode] = ev.target.value; } });
 $("#picker").addEventListener("keydown", (ev) => {
   if (ev.key === "Enter" && ev.target.id === "pkPath") { ev.preventDefault(); pickerGo(ev.target.value.trim()); }
+  if (ev.key === "Enter" && (ev.metaKey || ev.ctrlKey) && ev.target.id === "rnPrompt") { ev.preventDefault(); submitRun($("#rnGo")?.dataset.task); }
+  if ((ev.key === "ArrowRight" || ev.key === "ArrowLeft") && $(".rp")) { ev.preventDefault(); replayGo(ev.key === "ArrowRight" ? 1 : -1); }
 });
 document.addEventListener("keydown", (ev) => { if (ev.key === "Escape" && $("#picker").innerHTML) closePicker(); });
 
@@ -1094,10 +1501,15 @@ function connect() {
       if (state.log.length > LOG_CAP) state.log.shift();
       schedule();
     }
+    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"]) 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", "permission.requested", "permission.resolved"]) es.addEventListener(t, onAny);
 }
-refresh().then(connect);
+refresh().then(() => {
+  const sid = new URLSearchParams(location.search).get("session");
+  if (sid) openSession(sid);
+  connect();
+});
 setInterval(() => { if (!document.hidden) poll(); }, 5000);
 document.addEventListener("visibilitychange", () => { if (!document.hidden) poll(); });