@ra3orblade/swarm 0.11.3 → 0.12.1

package/web/app.js

@@ -258,14 +258,43 @@ for (const el of document.querySelectorAll("i[data-icon]")) el.outerHTML = ic(el
 const getTheme = () => localStorage.getItem("swarm.theme") ?? "system";
 const setTheme = (t) => { localStorage.setItem("swarm.theme", t); if (t === "system") delete document.documentElement.dataset.theme; else document.documentElement.dataset.theme = t; };
 setTheme(getTheme());
-const copy = (text) => navigator.clipboard?.writeText(String(text ?? ""));
+/**
+ * Copy, and say whether it worked. The desktop shell's webview exposes no async clipboard API, and
+ * the old one-liner used `?.` — so there it did nothing at all, silently. Falls back to a hidden
+ * textarea, which still works in that webview.
+ */
+async function copy(text) {
+  const value = String(text ?? "");
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(value);
+      return true;
+    }
+  } catch {
+    // permission denied or no secure context — fall through to the textarea
+  }
+  try {
+    const ta = document.createElement("textarea");
+    ta.value = value;
+    ta.setAttribute("readonly", "");
+    ta.style.cssText = "position:fixed;top:-1000px;left:0;opacity:0";
+    document.body.appendChild(ta);
+    ta.select();
+    ta.setSelectionRange(0, value.length);
+    const ok = document.execCommand("copy");
+    ta.remove();
+    return ok;
+  } catch {
+    return false;
+  }
+}
 const tail = (p, n = 16) => { const t = short(p); return t.length > n ? `…${t.slice(-(n - 1))}` : t; };
 const agentLabel = (a) => viz.agentName(a);
 const agentBadge = (a) => (a ? `<span class="badge agent" style="color:${viz.agentColor(a)};background:color-mix(in srgb,${viz.agentColor(a)} 14%,transparent)">${esc(agentLabel(a))}</span>` : "");
 
 // One render per animation frame, whatever triggered it (SSE, polls, clicks).
 let raf = 0;
-const schedule = () => { if (!raf) raf = requestAnimationFrame(() => { raf = 0; render(); }); };
+const schedule = () => { if (!raf) raf = requestAnimationFrame(() => { raf = 0; safeRender(); }); };
 const touch = () => { state.dirty = true; schedule(); };
 // `render()` refuses to paint while a menu is open (it would detach the anchor the menu is
 // positioned against) and defers the frame instead. fancy-menus exposes no close callback, so the
@@ -287,7 +316,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; state.hooksInstalled = h.hooksInstalled !== false; maybeUpdateNudge(h); maybeWhatsNew(); }).catch(() => {});
+  if (!state.version) fetch("/v1/health").then((r) => r.json()).then((h) => { state.version = h.version; state.diskVersion = h.disk ?? null; 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 ?? []);
@@ -339,17 +368,31 @@ async function refresh() {
   if (state.view === "graphs" && (state.graphTab ?? "collisions") === "lineage" && !state.session) {
     const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
     const open = (state.lineageOpen ?? []).map((g) => `&expand=${encodeURIComponent(g)}`).join("");
-    const lin = await fetch(`/v1/graphs/lineage${q || "?"}${open}`).then((r) => r.json()).catch(() => state.lineage);
+    const lin = (await api(`/v1/graphs/lineage${q || "?"}${open}`)) ?? state.lineage;
     linChanged = JSON.stringify(lin) !== JSON.stringify(state.lineage);
     state.lineage = lin;
   }
   let colChanged = false;
-  if (state.view === "graphs" && (state.graphTab ?? "collisions") !== "lineage" && !state.session) {
+  if (state.view === "graphs" && (state.graphTab ?? "collisions") === "collisions" && !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);
+    const col = (await api(`/v1/graphs/collisions${q}`)) ?? state.collisions;
     colChanged = JSON.stringify(col) !== JSON.stringify(state.collisions);
     state.collisions = col;
   }
+  let resChanged = false;
+  if (state.view === "graphs" && state.graphTab === "resources" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const rg = (await api(`/v1/graphs/resources${q}`)) ?? state.resourceGraph;
+    resChanged = JSON.stringify(rg) !== JSON.stringify(state.resourceGraph);
+    state.resourceGraph = rg;
+  }
+  let trChanged = false;
+  if (state.view === "graphs" && state.graphTab === "tools" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const tr = (await api(`/v1/graphs/transitions${q}`)) ?? state.transitions;
+    trChanged = JSON.stringify(tr) !== JSON.stringify(state.transitions);
+    state.transitions = tr;
+  }
   let waitChanged = false;
   if ((state.view === "fleet" || state.view === "stats") && !state.session) {
     const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
@@ -364,6 +407,27 @@ async function refresh() {
     hygChanged = JSON.stringify(hy) !== JSON.stringify(state.hygiene);
     state.hygiene = hy;
   }
+  let reChanged = false;
+  if (state.view === "rules" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const re = (await api(`/v1/rules/effect${q}`)) ?? state.ruleEffect;
+    reChanged = JSON.stringify(re) !== JSON.stringify(state.ruleEffect);
+    state.ruleEffect = re;
+  }
+  let secChanged = false;
+  if (state.view === "security" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const sec = (await api(`/v1/security${q}`)) ?? state.security;
+    secChanged = JSON.stringify(sec) !== JSON.stringify(state.security);
+    state.security = sec;
+  }
+  let heatChanged = false;
+  if (state.view === "heat" && !state.session) {
+    const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
+    const h = (await api(`/v1/heat${q}`)) ?? state.heat;
+    heatChanged = JSON.stringify(h) !== JSON.stringify(state.heat);
+    state.heat = h;
+  }
   let ctxChanged = false;
   if (state.view === "context" && !state.session) {
     const q = state.sel ? `?project=${encodeURIComponent(state.sel)}` : "";
@@ -407,7 +471,7 @@ async function refresh() {
     outChanged = JSON.stringify(o) !== JSON.stringify(state.outcomes);
     state.outcomes = o;
   }
-  if (!same || prsChanged || incChanged || tasksChanged || runsChanged || attrChanged || colChanged || linChanged || outChanged || waitChanged || ghChanged || mcpChanged || ctxChanged || provChanged || trialsChanged || hygChanged || state.dirty || Date.now() - lastRenderAt > 30_000) schedule();
+  if (!same || prsChanged || incChanged || tasksChanged || runsChanged || attrChanged || colChanged || trChanged || resChanged || linChanged || outChanged || waitChanged || ghChanged || mcpChanged || ctxChanged || heatChanged || secChanged || reChanged || provChanged || trialsChanged || hygChanged || state.dirty || Date.now() - lastRenderAt > 30_000) schedule();
 }
 // M9.1: the view registry — the one source of truth that the sidebar nav, render dispatch,
 // deep links and the ⌘K palette all derive from. Adding a view = one entry here + its render fn.
@@ -424,11 +488,14 @@ const VIEW_DEFS = [
   { id: "gates", label: "Gates", icon: "shield", group: "Insight", render: () => renderGateHealth(), badge: () => state.gateHealth?.totals?.flakyGates ?? 0 },
   { id: "mcp", label: "MCP", icon: "plugs-connected", group: "Insight", render: () => renderMcpHealth() },
   { id: "context", label: "Context", icon: "brain", group: "Insight", render: () => renderContext() },
+  { id: "heat", label: "Files", icon: "file-text", group: "Insight", render: () => renderHeat(), badge: () => state.heat?.candidates?.length ?? 0 },
   { 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: "security", label: "Security", icon: "shield", group: "Guard", render: () => renderSecurity(), badge: () => state.security?.totals?.secrets ?? 0 },
   { id: "provenance", label: "Provenance", icon: "git-commit", group: "Guard", render: () => renderProvenance(), badge: () => state.provenance?.totals?.untracked ?? 0 },
   { id: "incidents", label: "Incidents", icon: "warning", group: "Guard", render: () => renderIncidentsView(), badge: () => state.openIncidents ?? 0 },
+  { id: "rules", label: "Rules", icon: "shield", group: "Guard", render: () => renderRuleEffect(), badge: () => state.ruleEffect?.totals?.unchanged ?? 0 },
 ];
 const viewDef = (id) => VIEW_DEFS.find((v) => v.id === id);
 const VIEWS = VIEW_DEFS.map((v) => v.id);
@@ -438,7 +505,7 @@ let navHtml = ""; // last-rendered nav html; declared before the restore block b
   const v = localStorage.getItem("swarm.view");
   if (VIEWS.includes(v)) state.view = v;
   const gt = localStorage.getItem("swarm.graphTab");
-  if (gt === "lineage" || gt === "collisions") state.graphTab = gt;
+  if (["lineage", "collisions", "tools", "resources"].includes(gt)) state.graphTab = gt;
   const sel = localStorage.getItem("swarm.sel");
   if (sel) state.sel = sel;
   // Deep links win over persisted state: ?view=board&project=<id>&session=<id>
@@ -448,6 +515,84 @@ let navHtml = ""; // last-rendered nav html; declared before the restore block b
   // Mark the restored tab before the first snapshot lands, so the nav doesn't flash "Fleet".
   renderNav();
 }
+// ---------- errors
+// The dashboard is one long-lived page: an exception in a view used to leave the last frame on
+// screen with no sign anything had gone wrong, and a failed poll was swallowed by `.catch(() =>
+// keep the old value)`. Both now surface. `api()` records what failed so a report has something
+// in it, and `render()` is wrapped so a throwing view shows a panel instead of a frozen one.
+const failures = []; // newest first, capped — a report wants the recent ones, not all of them
+const noteFailure = (f) => { failures.unshift({ ...f, at: new Date().toISOString() }); failures.length = Math.min(failures.length, 12); };
+
+/**
+ * GET JSON, or null. A non-2xx is a failure worth naming: a 404 on a `/v1/` route almost always
+ * means the running daemon is older than the page it is serving, which is a restart, not a bug.
+ */
+async function api(url) {
+  try {
+    const r = await fetch(url);
+    if (!r.ok) { noteFailure({ url, status: r.status, kind: r.status === 404 ? "missing-route" : "http" }); return null; }
+    return await r.json();
+  } catch (e) {
+    noteFailure({ url, status: 0, kind: "network", message: String(e?.message ?? e) });
+    return null;
+  }
+}
+
+/** Everything a bug report needs and nothing a person would mind pasting into a public issue. */
+function errorReport(err, where) {
+  return {
+    swarm: state.version ?? "unknown",
+    onDisk: state.diskVersion ?? null,
+    view: where ?? state.view,
+    graphTab: state.graphTab ?? null,
+    session: state.session ? "open" : "none", // the id is not ours to put in a public issue
+    projectScoped: Boolean(state.sel),
+    error: err ? `${err.name ?? "Error"}: ${err.message ?? err}` : null,
+    stack: err?.stack ? String(err.stack).split("\n").slice(0, 8).join("\n") : null,
+    recentFailedRequests: failures.slice(0, 6),
+    userAgent: navigator.userAgent,
+    at: new Date().toISOString(),
+  };
+}
+
+/** Chrome's stack starts with the message, WebKit's does not — do not lose it on either. */
+const errText = (rep) =>
+  rep.stack && rep.error && rep.stack.startsWith(rep.error.split(":")[0] ?? "")
+    ? rep.stack
+    : [rep.error, rep.stack].filter(Boolean).join("\n");
+
+let lastError = null;
+function renderErrorPanel(err, where) {
+  lastError = { err, where };
+  const skew = failures.find((f) => f.kind === "missing-route");
+  const rep = errorReport(err, where);
+  $("#main").innerHTML =
+    `<h2 class="err-h">${ic("warning", 14, "err-ic")}Something broke <span>${esc(where ?? state.view)}</span></h2>
+     <div class="card err-card">
+       ${err
+         ? `<p style="margin:0 0 10px">This view hit an error. The rest of the dashboard is still fine — switching views or reloading usually clears it.</p>`
+         : `<p style="margin:0 0 10px"><b>The daemon is older than this page.</b> <code>${esc(skew?.url ?? "")}</code> came back 404, which means the dashboard was updated but the running daemon has not restarted yet.</p>
+            <button class="btn primary" data-act="restart-daemon">Restart daemon</button>`}
+       ${err ? `<pre class="err-detail">${esc(errText(rep))}</pre>` : ""}
+       ${err && skew ? `<p class="dim" style="margin:10px 0 0;font-size:var(--fs-sm)">Also worth knowing: <code>${esc(skew.url)}</code> is 404ing, so this daemon is older than the page. <a href="#" data-act="restart-daemon">Restart it</a>.</p>` : ""}
+       <div style="display:flex;gap:8px;margin-top:14px;flex-wrap:wrap">
+         <button class="btn" data-act="err-copy">Copy report</button>
+         <button class="btn" data-act="err-issue">Open an issue</button>
+         <button class="btn" data-act="err-reload">Reload</button>
+       </div>
+       <p class="dim" style="margin:12px 0 0;font-size:var(--fs-sm)">The report is the version, the view, the error and the last few failed requests — no session contents, no paths, no titles. Copy it first if you want to read it before sending.</p>
+     </div>`;
+}
+
+// A view that throws must not take the whole page with it, and must not leave the previous frame
+// up pretending to be current.
+function safeRender() {
+  try { render(); }
+  catch (e) { try { renderErrorPanel(e, state.view); } catch { /* the panel itself failed; leave the frame */ } }
+}
+addEventListener("error", (e) => noteFailure({ kind: "exception", url: location.hash || "#", status: 0, message: String(e.message ?? e.error ?? e) }));
+addEventListener("unhandledrejection", (e) => noteFailure({ kind: "rejection", url: location.hash || "#", status: 0, message: String(e.reason?.message ?? e.reason ?? e) }));
+
 function render() {
   // A row menu is anchored to DOM that a re-render would replace (and the focus jump closes it):
   // hold the frame while one is open; the next poll or interaction paints it.
@@ -1210,12 +1355,16 @@ function renderSpend() {
      <div class="kpis">${kpi("today", usd(todayCost), `${todayTurns} turns`)}${kpi(`${N}-day total`, usd(total14), `${activeDays} active day${activeDays === 1 ? "" : "s"}`)}${kpi("today vs avg", prevDays ? `${todayCost >= avg ? "+" : ""}${(((todayCost - avg) / avg) * 100).toFixed(0)}%` : "—", prevDays ? `vs ${usd(avg)} / active day` : "no earlier days to compare")}${kpi("agents", agents.length, agents.map(agentLabel).join(" · ") || "—")}${budgetKpi(kpi)}</div>
      <div class="chart-card"><h3>Daily cost · last ${N} days <span>stacked by agent</span></h3>${viz.stackedColumns(days, series)}${agents.length > 1 ? viz.legend(agents) : ""}</div>
      <div class="cols">
-       <div class="chart-card" style="margin:0"><h3>When the agents work <span>cost by weekday × hour · last 4 weeks · local time</span></h3>${viz.heatmap(hm)}</div>
-       <div>${byAgentToday ? `<h2>By agent · today <span>${usd(sumBy(byAgentToday, (x) => x.cost))}</span></h2>${tbl(byAgentToday, "agent", agentLabel, viz.agentColor)}<h2 class="mt-sec">By agent · all time</h2>${tbl(sp.byAgentAll, "agent", agentLabel, viz.agentColor)}` : `<h2>By model · today</h2>${tbl(sp.byModelToday, "model", model)}`}</div>
+       <div>
+         <div class="chart-card" style="margin:0"><h3>When the agents work <span>cost by weekday × hour · last 4 weeks · local time</span></h3>${viz.heatmap(hm)}</div>
+         <h2 class="mt-sec">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 agent · today <span>${usd(sumBy(byAgentToday, (x) => x.cost))}</span></h2>${tbl(byAgentToday, "agent", agentLabel, viz.agentColor)}<h2 class="mt-sec">By agent · all time</h2>${tbl(sp.byAgentAll, "agent", agentLabel, viz.agentColor)}<h2 class="mt-sec">By model · today</h2>${tbl(sp.byModelToday, "model", model)}` : `<h2>By model · today</h2>${tbl(sp.byModelToday, "model", model)}`}
+         <h2 class="mt-sec">By model · all time</h2>${tbl(sp.byModelAll, "model", model)}
+       </div>
      </div>
-     <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>`;
 }
@@ -1531,7 +1680,7 @@ function renderContext() {
       <td class="num">${chars(s.toolChars)}</td>
       <td class="num"><b>${chars(s.wastedChars)}</b></td>
       <td class="num">${Math.round(s.wasteShare * 100)}%</td>
-      <td>${s.worst.map((w) => `<span class="br" title="${esc(w.path)} — read ${w.reads}× · ${chars(w.wastedChars)} chars re-read">${esc(w.path.split("/").slice(-1)[0])} <b>${w.reads}×</b></span>`).join(" ")}</td>
+      <td class="clip">${s.worst.slice(0, 2).map((w) => `<span class="br" title="${esc(w.path)} — read ${w.reads}× · ${chars(w.wastedChars)} chars re-read">${esc(w.path.split("/").slice(-1)[0])} <b>${w.reads}×</b></span>`).join(" ")}</td>
     </tr>`).join("");
 
   $("#main").innerHTML = head(`last 7 days · ${chars(t.toolChars)} characters returned by tools`) + kpis +
@@ -1539,7 +1688,7 @@ function renderContext() {
        <div class="chart-card" style="margin:0"><h3>What fills the window <span>by tool · characters returned</span></h3>
          ${viz.hbars(c.byTool.map((x) => [ctxToolLabel(x.tool), x.chars, `${chars(x.chars)} · ${x.calls}`]))}</div>
        <div class="chart-card" style="margin:0"><h3>Re-read waste <span>the same file, read again</span></h3>
-         ${worst.length ? `<table class="mini"><thead><tr><th>session</th><th class="num">returned</th><th class="num">wasted</th><th class="num">share</th><th>worst files</th></tr></thead><tbody>${rows}</tbody></table>` : '<div class="dim">Nothing was read twice — no waste to report.</div>'}</div>
+         ${worst.length ? `<table class="mini"><colgroup><col style="width:31%"><col style="width:15%"><col style="width:14%"><col style="width:11%"><col style="width:29%"></colgroup><thead><tr><th>session</th><th class="num">returned</th><th class="num">wasted</th><th class="num">share</th><th>worst files</th></tr></thead><tbody>${rows}</tbody></table>` : '<div class="dim">Nothing was read twice — no waste to report.</div>'}</div>
      </div>
      <p class="dim" style="margin-top:10px;font-size:var(--fs-sm)">Character counts are exact — every tool response is stored. Token figures are a flat 4:1 estimate. <b>MCP tool schemas and the system prompt are not included</b>: Swarm sees tool calls, never the schemas or the prompt preamble, so they are left out rather than guessed at.</p>`;
 }
@@ -1736,11 +1885,16 @@ function renderHygiene() {
   const sampled = h.worktrees.filter((w) => w.diskKb !== null).length;
   const diskPending = h.worktrees.length > 0 && sampled === 0;
   const totalDisk = diskPending ? "measuring…" : mb(t.diskKb);
+  const buildKb = h.worktrees.reduce((n, w) => n + (w.buildKb ?? 0), 0);
+  const clearable = h.worktrees
+    .filter((w) => !w.main && !w.heldByClaim && w.liveSessions === 0)
+    .reduce((n, w) => n + (w.buildKb ?? 0), 0);
   const kpis = `<div class="kpis">${
     kpi("Needs a look", t.issues, t.issues ? "processes + worktrees" : "all clean", t.issues ? "hot" : "")
   }${kpi("Processes", t.processes, t.orphanedProcesses || t.deadProcesses ? `${t.orphanedProcesses} orphaned · ${t.deadProcesses} dead` : "all healthy", t.orphanedProcesses || t.deadProcesses ? "hot" : "")
   }${kpi("Worktrees", t.worktrees, t.staleWorktrees ? `${t.staleWorktrees} stale` : "none stale", t.staleWorktrees ? "warm" : "")
-  }${kpi("Reclaimable", diskPending ? '<span class="dim">—</span>' : mb(t.reclaimableKb), diskPending ? `measuring ${h.worktrees.length} worktrees…` : `of ${mb(t.diskKb)} on disk`, !diskPending && t.reclaimableKb ? "warm" : "")}</div>`;
+  }${kpi("Reclaimable", diskPending ? '<span class="dim">—</span>' : mb(t.reclaimableKb), diskPending ? `measuring ${h.worktrees.length} worktrees…` : `of ${mb(t.diskKb)} on disk`, !diskPending && t.reclaimableKb ? "warm" : "")
+  }${kpi("Build output", diskPending ? '<span class="dim">—</span>' : mb(buildKb), clearable ? `${mb(clearable)} clearable now` : "nothing to clear", clearable ? "warm" : "")}</div>`;
 
   const pcols = [
     { key: "issue", label: "state", width: 96, get: (p) => p.issue ?? "", cell: (p) => issueBadge(p.issue) },
@@ -1755,13 +1909,20 @@ function renderHygiene() {
   ];
   const wcols = [
     { key: "issue", label: "state", width: 106, get: (w) => w.issue ?? "", cell: (w) => issueBadge(w.issue) },
+    // 32 worktrees across a dozen repos: a branch name alone does not say which repo it is in.
+    { key: "project", label: "project", width: 122, get: (w) => projName(w.projectId), cell: (w) => `<span class="clip">${esc(projName(w.projectId))}</span>` },
     { key: "branch", label: "branch", width: 190, get: (w) => w.branch ?? w.path, cell: (w) => `<b>${esc(w.branch ?? "(detached)")}</b>${w.main ? ' <span class="badge">main</span>' : ""}` },
     { key: "disk", label: "disk", width: 78, num: true, get: (w) => w.diskKb ?? -1, cell: (w) => mb(w.diskKb) },
+    { key: "build", label: "build output", width: 100, num: true, get: (w) => w.buildKb ?? -1, cell: (w) => (w.buildKb === null ? '<span class="dim">—</span>' : `<span title="node_modules, target, dist — a rebuild recreates these">${mb(w.buildKb)}</span>`) },
     { key: "idle", label: "untouched", width: 88, num: true, get: (w) => w.idleMs ?? -1, cell: (w) => (w.idleMs === null ? '<span class="dim">—</span>' : dur(w.idleMs)) },
     { key: "state2", label: "work", width: 130, get: (w) => w.dirty * 1000 + w.ahead, cell: (w) => `${badge(w.dirty, "Dirty", "warn")}${badge(w.ahead, "Unpushed", "acc")}${w.dirty === 0 && w.ahead <= 0 ? (w.merged ? '<span class="badge ok">Merged</span>' : '<span class="badge">Clean</span>') : ""}` },
     { key: "held", label: "in use", width: 110, get: (w) => w.heldByClaim ?? "", cell: (w) => (w.heldByClaim ? `<span class="br" title="Claimed">${esc(w.heldByClaim)}</span>` : w.liveSessions ? `<span class="badge acc">${w.liveSessions} live</span>` : '<span class="dim">—</span>') },
     { key: "note", label: "why", flex: true, get: (w) => w.note ?? "", cell: (w) => (w.note ? `<span class="now" title="${esc(w.note)}">${esc(w.note)}</span>` : '<span class="dim">—</span>') },
-    { key: "act", label: "", width: 80, sortable: false, filterable: false, get: () => null, cell: (w) => (w.reclaimable ? `<a href="#" class="mini-act bad" data-wtrm="${esc(w.projectId)}:${esc(w.path)}" title="Remove this worktree">Remove</a>` : "") },
+    { key: "act", label: "", width: 196, sortable: false, filterable: false, get: () => null, cell: (w) => {
+      // Two different things: clearing build output keeps the branch, removing the worktree does not.
+      const canClear = !w.main && !w.heldByClaim && w.liveSessions === 0 && (w.buildKb ?? 0) > 0;
+      return `${canClear ? `<a href="#" class="mini-act" data-wtclear="${esc(w.path)}" title="Delete node_modules, target and dist here — a rebuild recreates them; the branch and any uncommitted work are untouched">Clear ${mb(w.buildKb)}</a>` : ""}${w.reclaimable ? `<a href="#" class="mini-act bad" data-wtrm="${esc(w.projectId)}:${esc(w.path)}" title="Remove this worktree">Remove</a>` : ""}`;
+    } },
   ];
   const sub = t.issues ? `<b class="navcount">${t.issues} need${t.issues === 1 ? "s" : ""} a look</b>` : "nothing to clean up";
   $("#main").innerHTML = head(sub) + kpis +
@@ -1777,9 +1938,11 @@ function renderHygiene() {
 function renderGraphs() {
   const tab = state.graphTab ?? "collisions";
   const chip = (k, label, n) => `<span class="chip ${tab === k ? "on" : ""}" data-graphtab="${k}">${label}${n ? ` <b>${n}</b>` : ""}</span>`;
-  const tabs = `<div class="chips">${chip("collisions", "Collisions", state.collisions?.contested ?? 0)}${chip("lineage", "Lineage", state.lineage?.edges?.length ?? 0)}</div>`;
+  const tabs = `<div class="chips">${chip("collisions", "Collisions", state.collisions?.contested ?? 0)}${chip("lineage", "Lineage", state.lineage?.edges?.length ?? 0)}${chip("tools", "Tools", state.transitions?.loops?.length ?? 0)}${chip("resources", "Resources", state.resourceGraph?.totals?.orphaned ?? 0)}</div>`;
   const head = (sub) => `<h2>Graphs <span>${sub}</span></h2>${tabs}`;
   if (tab === "lineage") return renderLineage(head);
+  if (tab === "tools") return renderTransitions(head);
+  if (tab === "resources") return renderResourceGraph(head);
   const g = state.collisions;
   const title = (s) => s.title ?? s.id.slice(0, 8);
   if (!g || !g.sessions.length) {
@@ -1822,6 +1985,272 @@ function renderLineage(head) {
        <span class="dim" style="font-size:var(--fs-sm)">a green pill is a collapsed group — click to open it · ring = outcome · thicker dot = more links · a bowed edge closed a loop</span></div>`;
 }
 
+// M9.15: what an agent reaches for after what. Edge thickness is the weight; a two-tool cycle is
+// a round trip, which is only worth worrying about when the calls inside it are also failing —
+// so the loops table describes shape, and the Stuck badge (M9.3) stays the thing that judges.
+function renderTransitions(head) {
+  const g = state.transitions;
+  if (!g) {
+    // Distinguish "not fetched yet" from "this daemon has no such route": the second never resolves
+    // on its own, and telling someone to wait for it is a lie.
+    const skew = failures.find((f) => f.kind === "missing-route" && f.url.includes("/transitions"));
+    if (skew) return renderErrorPanel(null, "graphs · tools");
+    $("#main").innerHTML = head("tool transitions") + `<div class="empty">${PX.clock()}Loading…</div>`;
+    return;
+  }
+  if (!g.nodes?.length) {
+    $("#main").innerHTML = head("tool transitions") + `<div class="empty">${PX.idle()}No tool calls recorded${state.sel ? " in this project" : ""} in the last 7 days.<br>The matrix fills in as agents work — it counts what each tool call was followed by.</div>`;
+    return;
+  }
+  const tools = g.nodes.slice(0, 18).map((n) => n.tool);
+  const shown = new Set(tools);
+  const sub = `${g.nodes.length} tool${g.nodes.length === 1 ? "" : "s"} · ${g.transitions.toLocaleString()} transitions · ${g.sessions} session${g.sessions === 1 ? "" : "s"} · last 7 days${g.nodes.length > tools.length ? ` · <span class="dim">${g.nodes.length - tools.length} quieter not shown</span>` : ""}`;
+  const loops = (g.loops ?? []).slice(0, 9);
+  const loopRows = loops.map((l) => `<tr>
+      <td class="clip">${l.tools.map((t) => `<span class="br">${esc(ctxToolLabel(t))}</span>`).join(' <span class="dim">→</span> ')}${l.tools.length === 1 ? ' <span class="dim">itself</span>' : ""}</td>
+      <td class="num"><b>${l.weight.toLocaleString()}</b></td>
+      <td class="num">${l.sessions}</td>
+    </tr>`).join("");
+  $("#main").innerHTML = head(sub) +
+    `<div class="cols">
+       <div class="chart-card" style="margin:0"><h3>What follows what <span>row ran, then column · darker = more often</span></h3>
+         ${viz.matrix(tools, g.edges.filter((e) => shown.has(e.from) && shown.has(e.to)), { label: ctxToolLabel })}</div>
+       <div class="chart-card" style="margin:0"><h3>Round trips <span>a tool pair that keeps handing back</span></h3>
+         ${loops.length
+           ? `<table class="mini"><colgroup><col style="width:52%"><col style="width:26%"><col style="width:22%"></colgroup><thead><tr><th>loop</th><th class="num">round trips</th><th class="num">sessions</th></tr></thead><tbody>${loopRows}</tbody></table>
+              <p class="dim" style="margin:10px 0 0;font-size:var(--fs-sm)">A loop is ordinary work — <code>Read → Edit</code> is what writing code looks like. It only counts as stuck when the calls inside it are <em>failing</em>, which is what the <b>Stuck</b> badge on Fleet judges.</p>`
+           : '<div class="dim">No tool pair hands back to the other — every move is one-way.</div>'}</div>
+     </div>`;
+}
+
+// M9.17: claims, ports, leases and processes on one picture with whoever holds them. Orphaned
+// means the holding session ended (or the lease expired) — the same reading Hygiene uses. There
+// is no deadlock to find: claims fail closed, so a second claimer is refused rather than queued
+// and nobody ever blocks. What the rings show is contention — two agents each wanting what the
+// other has — which is a scheduling problem for a person, not a lock to break.
+function renderResourceGraph(head) {
+  const g = state.resourceGraph;
+  if (!g) {
+    const skew = failures.find((f) => f.kind === "missing-route" && f.url.includes("/resources"));
+    if (skew) return renderErrorPanel(null, "graphs · resources");
+    $("#main").innerHTML = head("who holds what") + `<div class="empty">${PX.clock()}Loading…</div>`;
+    return;
+  }
+  if (!g.resources.length) {
+    $("#main").innerHTML = head("who holds what") + `<div class="empty">${PX.idle()}Nothing is held${state.sel ? " in this project" : ""}.<br>Claims, ports, leases and tracked processes appear here with whoever took them.</div>`;
+    return;
+  }
+  const t = g.totals;
+  const sub = `${t.held} held · ${t.orphaned ? `<b class="navcount">${t.orphaned} orphaned</b>` : "none orphaned"}${t.contested ? ` · <b class="navcount">${t.contested} contested</b>` : ""}`;
+  // Same shape the collision graph draws: holders on the left, what they hold on the right.
+  const holders = g.holders.map((h) => ({ id: h.id, label: h.gone ? `${h.id} (gone)` : h.id, agent: "claude-code", files: h.holds, writes: h.holds }));
+  const items = g.resources.map((r) => ({ path: `${r.kind === "claim" ? "" : `${r.kind} `}${r.name}`, readers: r.wanted, writers: r.holder ? [r.holder] : [], contested: r.wanted.length > 0 || r.orphaned }));
+  const rings = g.contention.map((c) => `<li>${c.owners.map((o) => `<span class="br">${esc(o)}</span>`).join(' <span class="dim">wants what</span> ')} <span class="dim">holds — via</span> ${c.resources.map((r) => `<code>${esc(r)}</code>`).join(", ")}</li>`).join("");
+  const orphans = g.resources.filter((r) => r.orphaned);
+  $("#main").innerHTML = head(sub) +
+    (rings ? `<div class="card err-card" style="margin-bottom:12px"><b>${g.contention.length} contention ring${g.contention.length === 1 ? "" : "s"}</b> — each agent wants something the next one holds. Nothing is blocked (claims refuse rather than queue), but they are working against each other.<ul style="margin:8px 0 0;padding-left:18px">${rings}</ul></div>` : "") +
+    `<div class="card" style="padding:14px">${viz.bipartite(holders, items)}</div>
+     <div style="margin-top:10px" class="dim" style="font-size:var(--fs-sm)">solid edge = holds · faint edge = was refused it · <span style="color:var(--bad)">red</span> = orphaned or contested</div>` +
+    (orphans.length
+      ? `<div class="chart-card" style="margin-top:14px"><h3>Orphaned <span>the session that took it has ended</span></h3>
+         <ul class="plainlist">${orphans.map((r) => `<li><span class="badge">${esc(r.kind)}</span><b>${esc(r.name)}</b><span class="dim">held by ${esc(r.holder ?? "nobody")}</span></li>`).join("")}</ul></div>`
+      : "");
+}
+
+// M9.16: where the fleet's attention actually goes. The candidates list is the point — a file many
+// separate sessions read, re-read, and hardly ever write is one the fleet keeps re-learning, and
+// that belongs in CLAUDE.md. A file read *and written* a lot is just where the work is.
+function renderHeat(head) {
+  const h = state.heat;
+  const title = (sub) => `<h2>Files <span>${sub}</span></h2>`;
+  if (!h) {
+    const skew = failures.find((f) => f.kind === "missing-route" && f.url.includes("/heat"));
+    if (skew) return renderErrorPanel(null, "files");
+    $("#main").innerHTML = title("file-touch heat") + `<div class="empty">${PX.clock()}Loading…</div>`;
+    return;
+  }
+  if (!h.files.length) {
+    $("#main").innerHTML = title("file-touch heat") + `<div class="empty">${PX.idle()}No file was touched more than once${state.sel ? " in this project" : ""} in the last 14 days.</div>`;
+    return;
+  }
+  const t = h.totals;
+  const kpi = (l, v, d, cls = "") => `<div class="kpi ${cls}"><div class="l">${l}</div><div class="v">${v}</div><div class="d">${d}</div></div>`;
+  const kpis = `<div class="kpis">${kpi("Files touched", t.files.toLocaleString(), `${t.touches.toLocaleString()} touches · last 14 days`)}
+    ${kpi("Re-reads", t.rereads.toLocaleString(), t.touches ? `${Math.round((t.rereads / t.touches) * 100)}% of every touch` : "none")}
+    ${kpi("Touched once", t.cold.toLocaleString(), "cold — read and never returned to")}
+    ${kpi("CLAUDE.md candidates", h.candidates.length, h.candidates.length ? "re-read by several sessions" : "nothing worth writing down", h.candidates.length ? "warm" : "")}</div>`;
+  // Paths here are long and the column is narrow, and neither end can simply be cut: the head is
+  // a home prefix every row shares, and the tail is the filename — which is the only part worth
+  // reading. Three worktrees each have a packages/web/public/app.js, so the name alone is not
+  // enough either. Name first, then just enough of its directory to tell them apart, dimmed and
+  // free to truncate.
+  const nameOf = (p) => short(p).split("/").pop() || short(p);
+  const ctxOf = (p, n = 2) => {
+    const parts = short(p).split("/");
+    parts.pop();
+    return parts.length <= n ? parts.join("/") : `…/${parts.slice(-n).join("/")}`;
+  };
+  /**
+   * Two segments of context is usually enough, but three worktrees each holding a
+   * packages/web/public/app.js all render identically — the list then reads as one file listed
+   * three times. Widen the context only for the rows that actually collide, and only as far as it
+   * takes to tell them apart.
+   */
+  const labelPaths = (paths) => {
+    const out = new Map();
+    for (const p of paths) {
+      let n = 2;
+      let label = `${nameOf(p)}|${ctxOf(p, n)}`;
+      while (n < 6 && paths.some((q) => q !== p && `${nameOf(q)}|${ctxOf(q, n)}` === label)) {
+        n++;
+        label = `${nameOf(p)}|${ctxOf(p, n)}`;
+      }
+      out.set(p, ctxOf(p, n));
+    }
+    return out;
+  };
+  const pathCell = (p, ctx) =>
+    `<b>${esc(nameOf(p))}</b> <span class="dim">${esc(ctx.get(p) ?? ctxOf(p))}</span>`;
+
+  const shownFiles = h.files.slice(0, 14);
+  const fileCtx = labelPaths(shownFiles.map((f) => f.path));
+  const fileRows = shownFiles.map((f) => `<tr>
+      <td class="clip path" title="${esc(short(f.path))}">${pathCell(f.path, fileCtx)}</td>
+      <td class="num"><b>${f.touches.toLocaleString()}</b></td>
+      <td class="num">${f.sessions}</td>
+      <td class="num">${f.rereads.toLocaleString()}</td>
+      <td class="num">${f.writes.toLocaleString()}</td>
+    </tr>`).join("");
+  const top = h.dirs[0]?.touches || 1;
+  const shownDirs = h.dirs.slice(0, 10);
+  const dirCtx = labelPaths(shownDirs.map((d) => d.dir));
+  const dirRows = shownDirs.map((d) => `<li>
+      <span class="bar" style="--w:${Math.max(2, Math.round((d.touches / top) * 100))}%"></span>
+      <span class="clip path" title="${esc(short(d.dir))}">${pathCell(d.dir, dirCtx)}</span>
+      <b>${d.touches.toLocaleString()}</b>
+      <span class="dim">${d.files} file${d.files === 1 ? "" : "s"} · ${d.sessions} session${d.sessions === 1 ? "" : "s"}</span>
+    </li>`).join("");
+  const shownCand = h.candidates.slice(0, 10);
+  const candCtx = labelPaths(shownCand.map((f) => f.path));
+  const cand = shownCand.map((f) => `<tr>
+      <td class="clip path" title="${esc(short(f.path))}">${pathCell(f.path, candCtx)}</td>
+      <td class="num"><b>${f.rereads.toLocaleString()}</b></td>
+      <td class="num">${f.sessions}</td>
+    </tr>`).join("");
+  $("#main").innerHTML = title(`${t.files.toLocaleString()} files · ${t.touches.toLocaleString()} touches · ${t.sessions} sessions · last 14 days`) + kpis +
+    `<div class="cols">
+       <div class="chart-card" style="margin:0"><h3>Hottest files <span>every touch, across sessions</span></h3>
+         <table class="mini"><colgroup><col style="width:46%"><col style="width:15%"><col style="width:13%"><col style="width:13%"><col style="width:13%"></colgroup>
+         <thead><tr><th>path</th><th class="num">touches</th><th class="num">sessions</th><th class="num">re-reads</th><th class="num">writes</th></tr></thead><tbody>${fileRows}</tbody></table></div>
+       <div style="display:flex;flex-direction:column;gap:var(--gap-sec);min-width:0">
+       <div class="chart-card" style="margin:0"><h3>Worth writing down <span>read again and again, rarely written</span></h3>
+         ${cand
+           ? `<table class="mini"><colgroup><col style="width:58%"><col style="width:22%"><col style="width:20%"></colgroup><thead><tr><th>path</th><th class="num">re-reads</th><th class="num">sessions</th></tr></thead><tbody>${cand}</tbody></table>
+              <p class="dim" style="margin:10px 0 0;font-size:var(--fs-sm)">Several sessions keep reading these and rarely change them — the conclusion is being re-derived every time. Put it in <code>CLAUDE.md</code> once instead.</p>`
+           : '<div class="dim">Nothing here is worth extracting. Every file several sessions re-read is also one they edit — that is where the work is, not a reference being re-learned.</div>'}</div>
+       <div class="chart-card" style="margin:0"><h3>By directory <span>where the work sits</span></h3>
+         <ul class="heatlist">${dirRows}</ul></div>
+       </div>
+     </div>
+     <p class="dim" style="margin-top:10px;font-size:var(--fs-sm)"><b>Incidents are not correlated here.</b> An incident records the rule, the action and the command — not a path — so tying a rule that fired on a shell command to a file would mean parsing paths out of command strings and guessing.</p>`;
+}
+
+// M9.9: what agents reached for. Observation only — nothing here denies anything, and the point of
+// looking is to learn what your fleet actually does before writing an `ask` rule about it.
+function renderSecurity() {
+  const r = state.security;
+  const head = (sub) => `<h2>Security <span>${sub}</span></h2>`;
+  if (!r) {
+    const skew = failures.find((f) => f.kind === "missing-route" && f.url.includes("/security"));
+    if (skew) return renderErrorPanel(null, "security");
+    $("#main").innerHTML = head("what agents reached for") + `<div class="empty">${PX.clock()}Loading…</div>`;
+    return;
+  }
+  const t = r.totals;
+  if (!t.scanned) {
+    $("#main").innerHTML = head("what agents reached for") + `<div class="empty">${PX.idle()}No commands recorded${state.sel ? " in this project" : ""} in the last 14 days.</div>`;
+    return;
+  }
+  const kpi = (l, v, d, cls = "") => `<div class="kpi ${cls}"><div class="l">${l}</div><div class="v">${v}</div><div class="d">${d}</div></div>`;
+  const remote = r.egress.filter((h) => !h.local);
+  const kpis = `<div class="kpis">
+    ${kpi("Hosts reached", t.remoteHosts, `${r.egress.length - t.remoteHosts} more were local`)}
+    ${kpi("Packages installed", t.installs, `${new Set(r.installs.map((i) => i.ecosystem)).size} ecosystem${new Set(r.installs.map((i) => i.ecosystem)).size === 1 ? "" : "s"}`)}
+    ${kpi("Credential files opened", t.secrets, t.secrets ? "by name — contents are never read" : "none", t.secrets ? "hot" : "")}
+    ${kpi("Commands scanned", t.scanned.toLocaleString(), "last 14 days")}</div>`;
+  const rows = (list, cells) => list.map((x) => `<tr>${cells(x)}</tr>`).join("");
+  $("#main").innerHTML = head(`${t.scanned.toLocaleString()} commands · last 14 days`) + kpis +
+    `<div class="cols">
+       <div class="chart-card" style="margin:0"><h3>Hosts reached <span>named in a command or a fetch</span></h3>
+         ${remote.length
+           ? `<table class="mini"><colgroup><col style="width:60%"><col style="width:20%"><col style="width:20%"></colgroup><thead><tr><th>host</th><th class="num">times</th><th class="num">sessions</th></tr></thead><tbody>
+              ${rows(remote.slice(0, 14), (h) => `<td class="clip path"><b>${esc(h.host)}</b></td><td class="num">${h.hits}</td><td class="num">${h.sessions}</td>`)}</tbody></table>`
+           : '<div class="dim">Nothing but localhost.</div>'}
+         <p class="dim" style="margin:10px 0 0;font-size:var(--fs-sm)">A host here means an agent <em>named</em> it. Whether bytes left is not something Swarm can see without running the command, so it over-reports rather than under-reports.</p></div>
+       <div style="display:flex;flex-direction:column;gap:var(--gap-sec);min-width:0">
+         <div class="chart-card" style="margin:0"><h3>Credential files <span>opened by name</span></h3>
+           ${r.secrets.length
+             ? `<ul class="plainlist">${r.secrets.map((sx) => `<li><span class="badge warn">${esc(sx.what)}</span><b>${sx.hits}×</b><span class="dim">${sx.sessions} session${sx.sessions === 1 ? "" : "s"}</span></li>`).join("")}</ul>
+                <p class="dim" style="margin:10px 0 0;font-size:var(--fs-sm)">Swarm reads the <em>path</em>, never the contents — this says something opened the file and nothing about what was in it.</p>`
+             : '<div class="dim">No credential file was opened by name.</div>'}</div>
+         <div class="chart-card" style="margin:0"><h3>Packages installed <span>what the machine will run later</span></h3>
+           ${r.installs.length
+             ? `<ul class="plainlist">${r.installs.slice(0, 12).map((i) => `<li><span class="badge">${esc(i.ecosystem)}</span><b>${esc(i.pkg)}</b><span class="dim">${i.hits}×</span></li>`).join("")}</ul>`
+             : '<div class="dim">Nothing was installed.</div>'}</div>
+       </div>
+     </div>
+     <p class="dim" style="margin-top:10px;font-size:var(--fs-sm)"><b>This is a lint, not a sandbox.</b> Everything here is matched against the recorded command text, so an obfuscated command will not match and a comment mentioning <code>.env</code> will. It is here to tell you what your fleet does, so you can decide what to write an <code>ask</code> rule about.</p>`;
+}
+
+// M9.10: a rule that fires once and never again taught somebody something. A rule that fires forty
+// times on the same shaped command is friction — the habit needs changing, or the rule does.
+function renderRuleEffect() {
+  const r = state.ruleEffect;
+  const head = (sub) => `<h2>Rules <span>${sub}</span></h2>`;
+  if (!r) {
+    const skew = failures.find((f) => f.kind === "missing-route" && f.url.includes("/rules/"));
+    if (skew) return renderErrorPanel(null, "rules");
+    $("#main").innerHTML = head("is a rule teaching anyone anything?") + `<div class="empty">${PX.clock()}Loading…</div>`;
+    return;
+  }
+  if (!r.rules.length) {
+    $("#main").innerHTML = head("is a rule teaching anyone anything?") + `<div class="empty">${PX.idle()}No rule has fired${state.sel ? " in this project" : ""} in the last 30 days.<br>That is the good outcome: rules exist to be learned and then never hit again.</div>`;
+    return;
+  }
+  const t = r.totals;
+  const kpi = (l, v, d, cls = "") => `<div class="kpi ${cls}"><div class="l">${l}</div><div class="v">${v}</div><div class="d">${d}</div></div>`;
+  const TREND = { rising: ["bad", "rising"], falling: ["ok", "falling"], steady: ["", "steady"] };
+  const kpis = `<div class="kpis">
+    ${kpi("Incidents", t.incidents, "last 30 days")}
+    ${kpi("Rules firing", t.rules, `${t.acked} incident${t.acked === 1 ? "" : "s"} acknowledged`)}
+    ${kpi("Not settling", t.unchanged, t.unchanged ? "firing as much as ever, or more" : "every rule is quieting down", t.unchanged ? "hot" : "")}
+    ${kpi("Change history", r.noChangeHistory ? "none" : "yes", r.noChangeHistory ? "no before/after yet" : "before/after available")}</div>`;
+
+  const cards = r.rules.map((x) => {
+    const [cls, word] = TREND[x.trend];
+    const spark = viz.sparkline(x.perDay.map((d) => d.n));
+    const worst = x.clusters[0];
+    return `<div class="chart-card" style="margin:0">
+      <h3>${esc(x.rule)} <span><b class="${cls}">${word}</b> · ${x.total} incident${x.total === 1 ? "" : "s"} · ${x.acked} acked</span></h3>
+      <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px">${spark}
+        <span class="dim" style="font-size:var(--fs-sm)">${ago(x.lastAt)} since the last one</span></div>
+      ${worst && x.total > 1
+        ? `<p style="margin:0 0 8px;font-size:var(--fs-md)">${Math.round(x.concentration * 100)}% of these are the same shape: <code>${esc(worst.signature)}</code></p>
+           <ul class="clusters">${x.clusters.map((c) => `<li><b title="${esc(c.signature)}">${esc(c.signature)}</b><span class="n">${c.hits}×</span><span title="${esc(c.example)}">${esc(c.example)}</span></li>`).join("")}</ul>`
+        : '<p class="dim" style="margin:0;font-size:var(--fs-md)">Fired once. Whatever it was, it has not come back.</p>'}
+      ${x.landed
+        ? `<p class="dim" style="margin:10px 0 0;font-size:var(--fs-sm)">Since it landed ${ago(x.landed.at)} ago: <b>${x.landed.afterPerDay.toFixed(1)}/day</b>, against ${x.landed.beforePerDay.toFixed(1)}/day before.</p>`
+        : ""}
+    </div>`;
+  }).join("");
+
+  $("#main").innerHTML = head(`${t.incidents} incidents · ${t.rules} rule${t.rules === 1 ? "" : "s"} · last 30 days`) + kpis +
+    `<div class="cols">${cards}</div>` +
+    (r.noChangeHistory
+      ? `<p class="dim" style="margin-top:10px;font-size:var(--fs-sm)"><b>No before-and-after yet.</b> Comparing a rule's rate before and after it landed needs to know when it landed, and nothing recorded that until now — the daemon writes <code>rules.changed</code> from this version on, so the comparison fills in for edits made from here.</p>`
+      : "");
+}
+
 function renderTimeline() {
   loadTimelineDetail();
   const now = Date.now();
@@ -2031,7 +2460,7 @@ async function sendStdin() {
 document.addEventListener("click", (ev) => {
   if (ev.target.closest("#stdinSend")) return sendStdin();
   const cp = ev.target.closest("[data-copy]");
-  if (cp) { ev.preventDefault(); copy(cp.dataset.copy); cp.classList.add("copied"); setTimeout(() => cp.classList.remove("copied"), 1000); return; }
+  if (cp) { ev.preventDefault(); copy(cp.dataset.copy).then((ok) => { cp.classList.add(ok ? "copied" : "copy-failed"); setTimeout(() => cp.classList.remove("copied", "copy-failed"), 1200); }); return; }
   const qa = ev.target.closest("[data-qanswer]");
   if (qa) { ev.preventDefault(); return answerQuestion(Number(qa.dataset.qanswer), qa.dataset.text); }
   const a = ev.target.closest("[data-perm-allow]"), d = ev.target.closest("[data-perm-deny]");
@@ -2591,6 +3020,59 @@ document.addEventListener("click", async (ev) => {
     state.lineageOpen = [...open];
     return refresh();
   }
+  if (t.dataset.act?.startsWith("err-") || t.dataset.act === "restart-daemon") {
+    ev.preventDefault();
+    const rep = JSON.stringify(errorReport(lastError?.err, lastError?.where), null, 2);
+    if (t.dataset.act === "err-copy") {
+      copy(rep).then((ok) => {
+        t.textContent = ok ? "copied" : "copy blocked — select it below";
+        if (!ok) {
+          // Never claim it copied when it did not: put the report on screen, pre-selected.
+          const ta = document.createElement("textarea");
+          ta.className = "err-detail";
+          ta.readOnly = true;
+          ta.value = rep;
+          ta.style.cssText = "width:100%;min-height:160px;margin-top:10px";
+          t.closest(".err-card")?.appendChild(ta);
+          ta.focus();
+          ta.select();
+        }
+        setTimeout(() => { t.textContent = "Copy report"; }, 2500);
+      });
+      return;
+    }
+    if (t.dataset.act === "err-issue") {
+      // Prefilled, but the person still reads and sends it — nothing leaves the machine on its own.
+      const body = `**What I was doing:**\n\n\n<details><summary>Report</summary>\n\n\`\`\`json\n${rep}\n\`\`\`\n</details>`;
+      const url = `https://github.com/ra3orblade/swarm/issues/new?title=${encodeURIComponent(`Dashboard error in ${lastError?.where ?? state.view}`)}&body=${encodeURIComponent(body)}`;
+      window.open(url, "_blank", "noopener");
+      return;
+    }
+    if (t.dataset.act === "err-reload") { lastError = null; return location.reload(); }
+    t.textContent = "restarting…";
+    fetch("/v1/daemon/restart", { method: "POST" })
+      .catch(() => {})
+      .then(() => setTimeout(() => location.reload(), 1500));
+    return;
+  }
+  if (t.dataset.wtclear) {
+    ev.preventDefault();
+    const path = t.dataset.wtclear;
+    const label = t.textContent;
+    t.textContent = "clearing…";
+    fetch("/v1/hygiene/reclaim", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ path }),
+    })
+      .then((r) => r.json())
+      .then((r) => {
+        t.textContent = r.ok ? `freed ${mb(r.freedKb)}` : (r.error ?? "failed");
+        setTimeout(() => { t.textContent = label; refresh(); }, 1600);
+      })
+      .catch(() => { t.textContent = label; });
+    return;
+  }
   if (t.dataset.graphtab) { state.graphTab = t.dataset.graphtab; localStorage.setItem("swarm.graphTab", state.graphTab); return refresh(); }
   if (t.dataset.inc) { state.incFilter = t.dataset.inc; state.allIncidents = null; return refresh(); }
   if (t.dataset.ack) { ev.preventDefault(); ev.stopPropagation(); return act.ack(t.dataset.ack); }