penthera 1.5.0 → 1.6.1

package/src/ui/static/js/format.js

@@ -0,0 +1,42 @@
+export const SEVERITIES = ["critical", "high", "medium", "low", "info"];
+
+export function ago(iso, now = Date.now()) {
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return "-";
+  const s = Math.max(0, Math.round((now - t) / 1000));
+  if (s < 60) return `${s}s ago`;
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 48) return `${h}h ago`;
+  return `${Math.round(h / 24)}d ago`;
+}
+
+export function stamp(iso) {
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return "-";
+  const d = new Date(t);
+  const p = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+export function duration(ms) {
+  if (ms == null || !Number.isFinite(ms)) return "-";
+  if (ms < 1000) return `${ms}ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const m = Math.floor(s / 60);
+  return `${m}m${String(Math.round(s % 60)).padStart(2, "0")}s`;
+}
+
+export const pct = (x) => (x == null ? "-" : `${Math.round(x * 100)}%`);
+
+/** Basename-ish short label for a project key (path or origin). */
+export function shortProject(key) {
+  if (!key) return "-";
+  if (/^https?:\/\//.test(key)) return key.replace(/^https?:\/\//, "");
+  const parts = key.split(/[\\/]/).filter(Boolean);
+  return parts.slice(-2).join("/") || key;
+}
+
+export const plural = (n, word, many = `${word}s`) => `${n} ${n === 1 ? word : many}`;

package/src/ui/static/js/theme.js

@@ -0,0 +1,10 @@
+// Set the theme before first paint: the saved choice, else the OS preference.
+// A classic script (not a module) so it runs before the stylesheet applies.
+(function () {
+  var t = null;
+  try { t = localStorage.getItem("penthera-ui-theme"); } catch (e) { /* storage off */ }
+  if (t !== "light" && t !== "dark") {
+    t = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+  }
+  document.documentElement.setAttribute("data-theme", t);
+})();

package/src/ui/static/js/typer.js

@@ -0,0 +1,99 @@
+// "Hacker typer" output: lines arrive whole from the server and are typed out
+// a few characters per frame. The speed scales with the backlog, so the
+// screen never falls more than a moment behind the real run. With
+// prefers-reduced-motion, lines appear at once.
+//
+// Screen readers: each line holds its full text in a visually hidden span;
+// the typed copy is aria-hidden, so nothing is read out letter by letter.
+import { h, prefersReducedMotion } from "./dom.js";
+
+export function createTyper(container) {
+  const cursor = h("span", { class: "cursor", "aria-hidden": "true" });
+  const queue = [];
+  let current = null;
+  let raf = 0;
+  let stopped = false;
+
+  function backlog() {
+    return queue.reduce((n, q) => n + q.text.length, current ? current.text.length - current.pos : 0);
+  }
+
+  function nearBottom() {
+    return container.scrollHeight - container.scrollTop - container.clientHeight < 60;
+  }
+
+  function startLine(item) {
+    const typed = h("span", { "aria-hidden": "true" });
+    const line = h("div", { class: ["ln", item.cls] }, h("span", { class: "sr" }, item.text), typed);
+    container.append(line);
+    line.append(cursor);
+    return { ...item, typed, pos: 0 };
+  }
+
+  function tick() {
+    raf = 0;
+    if (stopped) return;
+    const stick = nearBottom();
+    let budget = 3 + Math.floor(backlog() / 30);
+    while (budget > 0 && (current || queue.length)) {
+      if (!current) current = startLine(queue.shift());
+      const take = Math.min(budget, current.text.length - current.pos);
+      current.pos += take;
+      budget -= take;
+      current.typed.textContent = current.text.slice(0, current.pos);
+      if (current.pos >= current.text.length) current = null;
+      if (budget <= 0) break;
+      budget--; // a line break costs a character
+    }
+    if (stick) container.scrollTop = container.scrollHeight;
+    if (current || queue.length) raf = requestAnimationFrame(tick);
+  }
+
+  return {
+    /** Add a line. cls: cmd | dim | ok | bad | hl */
+    push(text, cls = null) {
+      const item = { text: String(text), cls };
+      if (prefersReducedMotion()) {
+        const stick = nearBottom();
+        const typed = h("span", { "aria-hidden": "true" }, item.text);
+        const line = h("div", { class: ["ln", cls] }, h("span", { class: "sr" }, item.text), typed);
+        container.append(line);
+        line.append(cursor);
+        if (stick) container.scrollTop = container.scrollHeight;
+        return;
+      }
+      queue.push(item);
+      if (!raf) raf = requestAnimationFrame(tick);
+    },
+    /** Finish typing everything now (e.g. before showing an approval). */
+    flush() {
+      while (current || queue.length) {
+        if (!current) current = startLine(queue.shift());
+        current.typed.textContent = current.text;
+        current = null;
+      }
+      container.scrollTop = container.scrollHeight;
+    },
+    idle: () => !current && !queue.length,
+    stop() {
+      stopped = true;
+      if (raf) cancelAnimationFrame(raf);
+    },
+  };
+}
+
+/** Type a short string into an element once (the header prompt). */
+const typing = new WeakMap(); // element -> timer, so a new line cancels the one still typing
+
+export function typeInto(el, text, { cps = 40 } = {}) {
+  clearTimeout(typing.get(el));
+  if (prefersReducedMotion()) { el.textContent = text; return; }
+  let i = 0;
+  const step = () => {
+    i++;
+    el.textContent = text.slice(0, i);
+    if (i < text.length) typing.set(el, setTimeout(step, 1000 / cps));
+  };
+  el.textContent = "";
+  step();
+}

package/src/ui/static/js/views/ai.js

@@ -0,0 +1,68 @@
+import { h, put, panel, empty, sevBadge } from "../dom.js";
+import { bigGrade, sparkline, severityBars } from "../charts.js";
+import { ago } from "../format.js";
+import { SCREENS, EMPTY } from "../copy.js";
+
+const GRADE_SCORE = { A: 95, B: 80, C: 65, D: 50, F: 20 };
+
+export async function render(root, { api }) {
+  const d = await api.get("/api/ai");
+  put(root, 
+    h("h1", {}, SCREENS.ai.title),
+    h("p", { class: "lede" }, SCREENS.ai.lede),
+  );
+  const l = d.latest;
+  if (!l) {
+    put(root, h("div", { class: "notice" }, empty(EMPTY.ai)));
+    return;
+  }
+  const grid = h("div", { class: "grid" });
+  put(root, grid);
+
+  const lock = l.lock || {};
+  const drift = (lock.changed || 0) + (lock.added || 0) + (lock.removed || 0);
+  put(grid, panel("Agent config grade", { class: "span-4" },
+    h("div", { class: "filters" },
+      bigGrade(l.grade),
+      h("div", {},
+        h("div", { class: "big" }, h("span", { class: `grade-${l.grade}` }, `Grade ${l.grade}`)),
+        h("div", { class: "muted" }, `score ${l.score}/100`),
+        h("div", { class: "faint" }, `${l.home ? "repo + home config" : "repo config"} :: ${ago(l.ts)}`),
+      ),
+    ),
+    h("p", { class: "label" }, "Grade over time"),
+    sparkline(d.history.map((x) => x.score ?? GRADE_SCORE[x.grade]), { width: 260, height: 32, label: "agent config score", zero: false }),
+    h("p", { class: "panel-note" }, d.history.map((x) => x.grade).join(" → ")),
+  ));
+
+  const inv = l.inventory || {};
+  put(grid, panel("Inventory", { class: "span-4" },
+    h("dl", { class: "kv" }, ...[["skills", inv.skills], ["MCP servers", inv.mcpServers], ["hooks", inv.hooks], ["permissions", inv.permissions], ["plugins", inv.plugins], ["marketplaces", inv.marketplaces], ["instruction files", inv.instructionFiles]]
+      .flatMap(([k, v]) => [h("dt", {}, k), h("dd", {}, String(v ?? 0))])),
+  ));
+
+  put(grid, panel("penthera.lock drift", { class: "span-4" },
+    h("div", { class: "big" }, h("span", { class: drift ? "t1" : "ok" }, drift ? `${drift} drifted` : lock.status === "missing" ? "not pinned" : "no drift")),
+    h("dl", { class: "kv" },
+      h("dt", {}, "status"), h("dd", {}, lock.status || "-"),
+      h("dt", {}, "changed"), h("dd", { class: lock.changed ? "bad" : null }, String(lock.changed || 0)),
+      h("dt", {}, "new"), h("dd", { class: lock.added ? "bad" : null }, String(lock.added || 0)),
+      h("dt", {}, "removed"), h("dd", {}, String(lock.removed || 0)),
+      h("dt", {}, "pinned"), h("dd", {}, String(lock.entries || 0)),
+    ),
+    h("p", { class: "panel-note" }, "A pinned skill or server that changes after review is how a rug pull works. Diff it, then re-pin with penthera agents --pin."),
+  ));
+
+  put(grid, panel(`Hidden content (${l.hidden.length})`, { class: "span-7" },
+    l.hidden.length ? h("ul", { class: "list" }, l.hidden.map((x) => h("li", {},
+      sevBadge(x.severity),
+      h("div", { class: "grow" }, h("div", {}, x.title), h("div", { class: "faint" }, `${x.location || ""}${x.rule ? `  [${x.rule}]` : ""}`), x.description ? h("pre", { class: "block" }, x.description) : null),
+    ))) : empty("No hidden instructions, invisible characters or smuggled binaries found."),
+  ));
+
+  put(grid, panel("Other findings", { class: "span-5" },
+    severityBars(l.counts, { width: 14 }),
+    h("p", { class: "label" }, "Config findings"),
+    h("ul", { class: "list" }, l.findings.slice(0, 12).map((x) => h("li", {}, sevBadge(x.severity), h("span", { class: "grow" }, x.title)))),
+  ));
+}

package/src/ui/static/js/views/deps.js

@@ -0,0 +1,96 @@
+import { h, put, panel, empty, sevBadge } from "../dom.js";
+import { bars, sparkline, severityBars } from "../charts.js";
+import { ago, plural } from "../format.js";
+import { SCREENS, EMPTY } from "../copy.js";
+import { SHADE } from "../charts.js";
+
+const CAP_SEV = {
+  "install-scripts": "high", shell: "medium", network: "medium", "fs-write": "medium", env: "low", "env-bulk": "medium",
+  eval: "medium", "dynamic-require": "low", native: "low", obfuscated: "high", "ai-config-write": "critical", "ai-cli-invoke": "critical", "token-harvest": "critical",
+};
+
+const capChip = (id, gained = false) => h("span", { class: `chip ${CAP_SEV[id] === "critical" || CAP_SEV[id] === "high" ? "inv" : ""}` }, `${gained ? "+" : ""}${id}`);
+
+export async function render(root, { api }) {
+  const d = await api.get("/api/deps");
+  put(root, 
+    h("h1", {}, SCREENS.deps.title),
+    h("p", { class: "lede" }, SCREENS.deps.lede),
+  );
+  const grid = h("div", { class: "grid" });
+  put(root, grid);
+  const l = d.latest;
+
+  if (!l) {
+    put(grid, panel("Latest deps scan", { class: "span-12" }, empty(EMPTY.deps)));
+  } else {
+    const caps = Object.entries(l.capabilityCounts).filter(([, n]) => n > 0).sort((a, b) => b[1] - a[1]);
+    const diff = l.diff;
+    root.querySelector(".lede").after(h("div", { class: "strip" },
+      tile("Packages", String(l.total), `${l.scanned} scanned, ${l.direct} direct`),
+      tile("Added", diff ? String(diff.added.length) : "-", diff ? `vs ${diff.base}` : "no base to compare"),
+      tile("Gained capabilities", diff ? String(diff.upgraded.reduce((n, u) => n + u.gained.length, 0) + diff.added.reduce((n, a) => n + a.capabilities.length, 0)) : "-", "new things code can do"),
+      tile("Typosquats", String(l.typosquats.length), l.typosquats.length ? "names one edit from a popular package" : "none found"),
+    ));
+
+    put(grid, panel("Capabilities in the tree", { class: "span-5" },
+      bars(caps.map(([id, n]) => ({ label: id, value: n, cls: "t1", ch: SHADE[CAP_SEV[id] || "info"] })), { width: 18 }),
+      h("p", { class: "panel-note" }, `${l.ecosystem} :: ${l.lockfile} :: ${l.network} :: ${ago(l.ts)}`),
+    ));
+
+    put(grid, panel("Capability diff", { class: "span-7" },
+      diff ? h("div", {},
+        h("div", { class: "filters" },
+          h("span", { class: "chip" }, `+${diff.added.length} added`),
+          h("span", { class: "chip" }, `~${diff.upgraded.length} upgraded`),
+          h("span", { class: "chip" }, `-${diff.removed.length} removed`),
+          h("span", { class: "faint" }, `base ${diff.base}`),
+        ),
+        h("div", { class: "table-wrap" }, h("table", {},
+          h("thead", {}, h("tr", {}, h("th", {}, "Package"), h("th", {}, "Change"), h("th", {}, "Can now"))),
+          h("tbody", {},
+            diff.added.map((a) => h("tr", {}, h("td", {}, a.name), h("td", { class: "t1" }, `+ ${a.version}`), h("td", {}, a.capabilities.length ? a.capabilities.map((c) => capChip(c, true)) : h("span", { class: "faint" }, "nothing flagged")))),
+            diff.upgraded.filter((u) => u.gained.length || u.lost.length).map((u) => h("tr", {}, h("td", {}, u.name), h("td", { class: "t1" }, `${u.from} → ${u.to}`), h("td", {}, u.gained.map((c) => capChip(c, true)), u.lost.map((c) => h("span", { class: "chip" }, `-${c}`))))),
+            diff.removed.map((r) => h("tr", {}, h("td", { class: "faint" }, r.name), h("td", { class: "faint" }, `- ${r.version}`), h("td", {}))),
+          ),
+        )),
+        h("p", { class: "panel-note" }, `${plural(diff.upgraded.filter((u) => !u.gained.length && !u.lost.length).length, "upgrade")} with no capability change not shown.`),
+      ) : empty("No diff in the latest report. Run penthera deps --base <ref> to compare."),
+    ));
+
+    put(grid, panel("Deps findings", { class: "span-7" },
+      l.findings.length ? h("ul", { class: "list" }, l.findings.map((f) => h("li", {}, sevBadge(f.severity), h("span", { class: "grow" }, f.title), h("span", { class: "faint trunc hide-narrow" }, f.location || "")))) : empty("No findings."),
+      l.typosquats.length ? h("p", { class: "panel-note" }, l.typosquats.map((t) => `${t.name} looks like ${t.similarTo}`).join(" :: ")) : null,
+    ));
+
+    put(grid, panel("Severity and history", { class: "span-5" },
+      severityBars(l.counts, { width: 16 }),
+      h("p", { class: "label" }, "Package count over time"),
+      sparkline(d.history.map((x) => x.total), { width: 300, height: 36, label: "package count", zero: false }),
+    ));
+  }
+
+  put(grid, panel("Install firewall decisions", { class: "span-12" },
+    d.installs.length ? h("div", { class: "table-wrap" }, h("table", {},
+      h("thead", {}, h("tr", {}, ...["When", "Install", "Decision", "Flags", "Denied by policy", "Needed approval"].map((t) => h("th", {}, t)))),
+      h("tbody", {}, d.installs.map((i) => {
+        const flags = [...new Set(i.changes.flatMap((c) => c.flags))];
+        const deny = [...new Set(i.changes.flatMap((c) => c.deny))];
+        const appr = [...new Set(i.changes.flatMap((c) => c.approval))];
+        const verdict = i.action === "refused" || deny.length ? ["REFUSED", "bad"] : i.clean ? ["CLEAN", "ok"] : ["APPROVED", "t1"];
+        return h("tr", {},
+          h("td", { class: "muted" }, ago(i.ts)),
+          h("td", {}, i.specs.join(" "), h("span", { class: "faint" }, ` (${plural(i.changes.length, "package")})`)),
+          h("td", { class: verdict[1] }, `[${verdict[0]}]`),
+          h("td", {}, flags.length ? flags.map((f) => capChip(f)) : h("span", { class: "faint" }, "-")),
+          h("td", { class: "bad" }, deny.join(", ") || h("span", { class: "faint" }, "-")),
+          h("td", { class: "t1" }, appr.join(", ") || h("span", { class: "faint" }, "-")),
+        );
+      })),
+    )) : empty("No penthera install --json reports yet."),
+  ));
+}
+
+function tile(label, value, sub) {
+  return h("div", { class: "cell" }, h("span", { class: "label" }, label), h("div", { class: "big" }, value), h("div", { class: "sub" }, sub));
+}

package/src/ui/static/js/views/evidence.js

@@ -0,0 +1,115 @@
+import { h, put, panel, empty, clear, announce, fig } from "../dom.js";
+import { ago, stamp, shortProject } from "../format.js";
+import { SCREENS, EMPTY } from "../copy.js";
+
+export async function render(root, { api, params }) {
+  const [{ bundles }, o] = await Promise.all([api.get("/api/evidence"), api.get("/api/overview")]);
+  put(root, h("h1", {}, SCREENS.evidence.title), h("p", { class: "lede" }, SCREENS.evidence.lede));
+
+  const out = h("div");
+  const keys = o.projects.map((p) => p.key);
+  const projSel = h("select", { id: "ev-project", "aria-label": "Project" }, keys.map((k) => h("option", { value: k, selected: k === params.get("project") }, shortProject(k))));
+  const create = h("button", { type: "button", class: "btn primary", disabled: !keys.length }, "Create evidence bundle ▸");
+  const downloads = h("p", { class: "filters" });
+  const createMsg = h("p", { class: "muted", "aria-live": "polite" });
+
+  const paintDownloads = () => {
+    const p = projSel.value;
+    clear(downloads).append(
+      h("span", { class: "muted" }, "Download the latest report as Markdown ::"),
+      ...["auditor", "owner", "developer"].map((a) => h("a", { class: "btn", href: `/api/report?${new URLSearchParams({ project: p, audience: a })}`, download: "" }, `${a}.md`)),
+    );
+  };
+  projSel.addEventListener("change", paintDownloads);
+  if (keys.length) paintDownloads();
+
+  create.addEventListener("click", async () => {
+    create.disabled = true;
+    createMsg.textContent = "Writing the bundle and hashing every file…";
+    try {
+      const r = await api.post("/api/evidence/create", { project: projSel.value });
+      const v = await api.post("/api/evidence/verify", { id: r.id });
+      createMsg.textContent = `Written to ${r.path} :: ${v.ok ? "verified" : "verification failed"}.`;
+      announce(createMsg.textContent);
+      await refresh();
+      clear(out).append(report({ path: r.path }, v));
+    } catch (e) {
+      createMsg.textContent = e.message;
+    } finally {
+      create.disabled = false;
+    }
+  });
+
+  const tableSlot = h("div");
+  async function refresh() {
+    const { bundles: list } = await api.get("/api/evidence");
+    clear(tableSlot).append(bundleTable(list));
+  }
+
+  function bundleTable(list) {
+    if (!list.length) return empty(EMPTY.evidence);
+    const rows = list.map((b) => {
+      const result = h("td", { class: "muted", "aria-live": "polite" }, "not checked");
+      const btn = h("button", { type: "button", class: "btn" }, "Verify");
+      btn.addEventListener("click", async () => {
+        btn.disabled = true;
+        result.textContent = "hashing…";
+        result.className = "muted";
+        try {
+          const r = await api.post("/api/evidence/verify", { id: b.id });
+          result.textContent = r.ok ? "[VERIFIED]" : `[FAILED] ${r.problems.length} problem${r.problems.length === 1 ? "" : "s"}`;
+          result.className = r.ok ? "ok" : "bad";
+          clear(out).append(report(b, r));
+          announce(`${b.path}: ${r.ok ? "verified" : "verification failed"}`);
+        } catch (e) {
+          result.textContent = e.message;
+          result.className = "bad";
+        } finally {
+          btn.disabled = false;
+        }
+      });
+      return h("tr", {},
+        h("td", { class: "t1" }, b.path),
+        h("td", { class: "trunc hide-narrow", title: b.target || "" }, shortProject(b.target)),
+        h("td", { class: "muted hide-narrow" }, ago(b.generatedAt)),
+        h("td", { class: "num" }, String(b.artifacts)),
+        h("td", {}, b.signed ? h("span", { class: "chip on" }, "signed") : h("span", { class: "chip" }, "unsigned")),
+        h("td", {}, btn),
+        result,
+      );
+    });
+    return h("div", { class: "table-wrap" }, h("table", {},
+      h("thead", {}, h("tr", {}, ...["Bundle", "Target", "Written", "Files", "Signature", "", "Result"].map((t, i) => h("th", { class: [i === 3 ? "num" : null, i === 1 || i === 2 ? "hide-narrow" : null] }, t)))),
+      h("tbody", {}, rows),
+    ));
+  }
+  put(tableSlot, bundleTable(bundles));
+
+  put(root, h("div", { class: "grid" },
+    panel("For your auditor", { class: "span-12" },
+      keys.length ? h("div", {},
+        h("p", { class: "t1" }, "One folder they can check without trusting you: the JSON, Markdown and SARIF reports, the auditor, owner and developer reports, and manifest.json with a SHA-256 for each file."),
+        h("div", { class: "filters" }, h("label", { class: "field" }, h("span", {}, "Project"), projSel), create),
+        createMsg,
+        downloads,
+        h("p", { class: "muted" }, "To sign it, write the bundle from the CLI with --evidence <dir> --sign-key ~/.ssh/id_ed25519. They verify with penthera evidence verify <dir>."),
+      ) : empty("Scan a project first: a bundle is made from its latest report."),
+    ),
+    panel("Bundles in the reports folder", { class: "span-12" }, tableSlot, fig("fig 1 :: verify recomputes every hash and checks the SSH signature", `${bundles.length} bundles`)),
+    h("div", { class: "span-12" }, out),
+  ));
+}
+
+function report(b, r) {
+  return panel(`Verification :: ${b.path}`, {},
+    h("p", { class: r.ok ? "ok" : "bad" }, r.ok ? "[OK] Every file matches the manifest." : "[!] NOT VERIFIED"),
+    h("ul", { class: "list" }, r.files.map((f) => h("li", {},
+      h("span", { class: f.ok ? "ok" : "bad" }, f.ok ? "ok  " : "FAIL"),
+      h("span", { class: "grow t1" }, f.path),
+      f.ok ? null : h("span", { class: "bad" }, f.reason),
+    ))),
+    r.signature ? h("p", {}, h("span", { class: r.signature.ok ? (r.signature.status === "valid" ? "ok" : "t1") : "bad" }, `signature ${r.signature.status} :: `), r.signature.detail) : null,
+    r.problems.length ? h("pre", { class: "block" }, r.problems.map((p) => `- ${p}`).join("\n")) : null,
+    fig(`checked ${stamp(new Date().toISOString())}`, "sha-256"),
+  );
+}

package/src/ui/static/js/views/findings.js

@@ -0,0 +1,165 @@
+import { h, put, panel, clear, empty, sevBadge, diffBlock, announce } from "../dom.js";
+import { SEVERITIES, ago, shortProject } from "../format.js";
+import { SCREENS, EMPTY } from "../copy.js";
+
+export async function render(root, { api, params, go }) {
+  const { findings } = await api.get("/api/findings");
+  const projects = [...new Set(findings.map((f) => f.project))].sort();
+  const state = {
+    q: params.get("q") || "",
+    sev: new Set(SEVERITIES.filter((x) => x !== "info")),
+    project: params.get("project") || "",
+    suppressed: false,
+    selected: params.get("id") ? `${params.get("project")}|${params.get("id")}` : null,
+  };
+
+  const search = h("input", { type: "search", class: "search", placeholder: "filter  (press /)", "aria-label": "Filter findings", value: state.q });
+  const projectSel = h("select", { "aria-label": "Project" },
+    h("option", { value: "" }, `All projects (${projects.length})`),
+    projects.map((p) => h("option", { value: p, selected: p === state.project }, shortProject(p))),
+  );
+  const toggles = SEVERITIES.map((sev) => h("button", {
+    type: "button", class: `toggle sev-${sev}`, "aria-pressed": String(state.sev.has(sev)),
+    onclick: (e) => {
+      if (state.sev.has(sev)) state.sev.delete(sev); else state.sev.add(sev);
+      e.currentTarget.setAttribute("aria-pressed", String(state.sev.has(sev)));
+      draw();
+    },
+  }, sev));
+  const supp = h("input", { type: "checkbox", id: "f-supp" });
+  const count = h("span", { class: "muted", "aria-live": "polite" });
+  const tbody = h("tbody");
+  const detail = h("div", { class: "detail" });
+
+  put(root, 
+    h("h1", {}, SCREENS.findings.title),
+    h("p", { class: "lede" }, SCREENS.findings.lede),
+    h("div", { class: "filters", role: "search" }, search, projectSel, h("div", { class: "filters", role: "group", "aria-label": "Severity" }, toggles),
+      h("label", { class: "check", for: "f-supp" }, supp, "suppressed"), count),
+    h("div", { class: "split" },
+      panel("Findings", {}, h("div", { class: "table-wrap" }, h("table", {},
+        h("thead", {}, h("tr", {}, h("th", {}, "Sev"), h("th", {}, "Finding"), h("th", { class: "hide-narrow" }, "Project"), h("th", { class: "hide-narrow" }, "Category"))),
+        tbody,
+      ))),
+      detail,
+    ),
+  );
+
+  let visible = [];
+  const keyOf = (f) => `${f.project}|${f.id}`;
+
+  function draw() {
+    const q = state.q.trim().toLowerCase();
+    visible = findings.filter((f) => state.sev.has(f.severity)
+      && (!state.project || f.project === state.project)
+      && (state.suppressed || !f.suppressed)
+      && (!q || `${f.title} ${f.category} ${f.location} ${f.source}`.toLowerCase().includes(q)));
+    clear(tbody);
+    let group = null;
+    for (const f of visible) {
+      if (f.severity !== group) {
+        group = f.severity;
+        const n = visible.filter((x) => x.severity === group).length;
+        put(tbody, h("tr", { class: "group" }, h("td", { colspan: "4" }, `${group} :: ${n}`)));
+      }
+      const tr = h("tr", { class: keyOf(f) === state.selected ? "sel" : null, dataset: { key: keyOf(f) } },
+        h("td", {}, sevBadge(f.severity)),
+        h("td", {},
+          h("button", { type: "button", class: "row-btn", onclick: () => select(f) }, f.title),
+          h("span", { class: "faint" }, f.location ? `${f.location}` : ""),
+          f.suppressed ? h("span", { class: "chip" }, " suppressed") : null),
+        h("td", { class: "hide-narrow muted trunc", title: f.project }, shortProject(f.project)),
+        h("td", { class: "hide-narrow muted" }, f.category || "-"),
+      );
+      put(tbody, tr);
+    }
+    if (!visible.length) {
+      const hidden = [state.q.trim() ? "the text filter" : null, state.project ? "the project filter" : null, state.sev.size < SEVERITIES.length ? "the severity toggles" : null].filter(Boolean).join(", ");
+      put(tbody, h("tr", {}, h("td", { colspan: "4" }, empty(findings.length ? EMPTY.findingsFiltered(hidden || "the filters") : EMPTY.findingsNone))));
+    }
+    count.textContent = `${visible.length} of ${findings.length}`;
+  }
+
+  let detailSeq = 0;
+  async function select(f, { focus = false } = {}) {
+    state.selected = keyOf(f);
+    for (const tr of tbody.querySelectorAll("tr")) tr.classList.toggle("sel", tr.dataset.key === state.selected);
+    const seq = ++detailSeq;
+    clear(detail).append(panel("Detail", {}, h("p", { class: "muted" }, "Reading evidence…")));
+    let d;
+    try {
+      d = await api.get(`/api/findings/${f.id}?project=${encodeURIComponent(f.project)}`);
+    } catch (e) {
+      if (seq === detailSeq) clear(detail).append(panel("Detail", {}, h("p", { class: "error" }, e.message)));
+      return;
+    }
+    if (seq !== detailSeq) return;
+    clear(detail).append(renderDetail(d, f, go));
+    announce(`Showing ${f.severity} finding: ${f.title}`);
+    if (focus) detail.querySelector("h2")?.focus();
+  }
+
+  search.addEventListener("input", () => { state.q = search.value; draw(); });
+  projectSel.addEventListener("change", () => { state.project = projectSel.value; draw(); });
+  supp.addEventListener("change", () => { state.suppressed = supp.checked; draw(); });
+
+  const onKey = (e) => {
+    if (e.metaKey || e.ctrlKey || e.altKey) return;
+    const typing = /^(INPUT|SELECT|TEXTAREA)$/.test(document.activeElement?.tagName || "");
+    if (e.key === "/" && !typing) { e.preventDefault(); search.focus(); return; }
+    if (e.key === "Escape" && document.activeElement === search) { search.blur(); return; }
+    if (typing || !visible.length) return;
+    if (e.key === "j" || e.key === "k") {
+      e.preventDefault();
+      const i = visible.findIndex((f) => keyOf(f) === state.selected);
+      const next = visible[Math.max(0, Math.min(visible.length - 1, i < 0 ? 0 : i + (e.key === "j" ? 1 : -1)))];
+      select(next);
+      tbody.querySelector(`tr.sel button`)?.focus();
+    }
+  };
+  document.addEventListener("keydown", onKey);
+
+  draw();
+  const first = state.selected ? visible.find((f) => keyOf(f) === state.selected) : visible[0];
+  if (first) select(first);
+  else put(detail, panel("Detail", {}, empty("Select a finding.")));
+
+  return () => document.removeEventListener("keydown", onKey);
+}
+
+function renderDetail(d, f, go) {
+  const section = (label, ...body) => h("section", {}, h("div", { class: "label" }, label), ...body);
+  const repo = f.project.startsWith("/") ? f.project : null;
+  const x = d.explain || {};
+  return panel("Detail", {},
+    h("div", {}, sevBadge(d.severity), " ", h("span", { class: "chip" }, d.confidence || "unrated"), " ", d.category ? h("span", { class: "chip" }, d.category) : null),
+    h("h2", { tabindex: "-1" }, d.title),
+    h("dl", { class: "kv" },
+      h("dt", {}, "where"), h("dd", {}, d.location || "-"),
+      h("dt", {}, "project"), h("dd", {}, f.project),
+      h("dt", {}, "source"), h("dd", {}, d.source || "-"),
+      h("dt", {}, "seen"), h("dd", {}, ago(f.seen)),
+      h("dt", {}, "id"), h("dd", { class: "faint" }, d.id),
+    ),
+    h("div", { class: "plain", "aria-label": "In plain words" },
+      h("p", {}, h("span", { class: "strong" }, "In plain words :: "), (x.plainSeverity || d.severity) === "note" ? "a note, not a problem." : `a ${x.plainSeverity || d.severity} problem${d.category ? ` with ${d.category.replace(/-/g, " ")}` : ""}.`),
+      x.confidenceMeaning ? h("p", {}, h("span", { class: "strong" }, `How sure (${x.confidence}) :: `), x.confidenceMeaning) : null,
+      x.fixText ? h("p", {}, h("span", { class: "strong" }, "What to do :: "), x.fixText) : null,
+      x.owasp?.length ? h("p", { class: "muted" }, `Maps to ${x.owasp.join(" · ")}`) : null,
+    ),
+    d.description ? section("What we saw", h("p", {}, d.description)) : null,
+    d.evidence ? section("Evidence", h("pre", { class: "block" }, d.evidence)) : null,
+    d.request ? section("Request", h("pre", { class: "block" }, d.request)) : null,
+    d.response ? section("Response", h("pre", { class: "block" }, d.response)) : null,
+    d.remediation ? section("How to fix", h("p", {}, d.remediation)) : null,
+    d.suppression ? section("Suppressed", h("p", { class: "muted" }, `${d.suppression.reason} (${d.suppression.source})`)) : null,
+    d.sources?.length ? section("Sources", h("ul", { class: "list" }, d.sources.map((s) => h("li", {}, h("span", { class: "faint" }, "↗"), h("a", { href: s.url, target: "_blank", rel: "noopener noreferrer" }, s.cite))))) : null,
+    d.fix
+      ? section("Fix recipe",
+        h("p", {}, h("span", { class: "ok" }, d.fix.recipe), ` :: ${d.fix.title} `, h("span", { class: "chip" }, `confidence ${d.fix.confidence}`)),
+        h("p", { class: "faint" }, `files: ${d.fix.files.join(", ")}`),
+        diffBlock(d.fix.diff),
+        repo ? h("p", {}, h("button", { type: "button", class: "btn", onclick: () => go("run", { kind: "loop", repo }) }, "Fix it with the agent ▸")) : null)
+      : section("Fix recipe", h("p", { class: "muted" }, "No recipe matches this finding. Fix it by hand, or run the loop with a local model (--fix-model) from the CLI.")),
+  );
+}