penthera 1.4.0 → 1.6.0

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

@@ -0,0 +1,92 @@
+import { h, put, panel, clear, empty, sevBadge, fig, whatNext } from "../dom.js";
+import { trendChart, ganttChart } from "../charts.js";
+import { stamp, ago, shortProject } from "../format.js";
+import { SCREENS, EMPTY } from "../copy.js";
+
+export async function render(root, { api, params, go }) {
+  const o = await api.get("/api/overview");
+  put(root, h("h1", {}, SCREENS.history.title), h("p", { class: "lede" }, SCREENS.history.lede));
+  if (!o.projects.length) { put(root, h("div", { class: "notice" }, empty(EMPTY.history))); return; }
+
+  const keys = o.projects.map((p) => p.key);
+  // Default to the project whose last two scans differ most: that is the interesting comparison.
+  const delta = (p) => (p.trend.length > 1 ? Math.abs(p.trend[p.trend.length - 1].total - p.trend[p.trend.length - 2].total) + 0.5 : 0);
+  let project = keys.includes(params.get("project")) ? params.get("project") : [...o.projects].sort((x, y) => delta(y) - delta(x))[0].key;
+  const projSel = h("select", { "aria-label": "Project" }, keys.map((k) => h("option", { value: k, selected: k === project }, shortProject(k))));
+  const aSel = h("select", { "aria-label": "Before" });
+  const bSel = h("select", { "aria-label": "After" });
+  const body = h("div");
+  put(root, 
+    h("div", { class: "filters" },
+      h("label", { class: "field" }, h("span", {}, "Project"), projSel),
+      h("label", { class: "field" }, h("span", {}, "Before"), aSel),
+      h("label", { class: "field" }, h("span", {}, "After"), bSel),
+    ),
+    body,
+  );
+
+  let seq = 0;
+  async function load(a = null, b = null) {
+    const n = ++seq;
+    const q = new URLSearchParams({ project });
+    if (a != null) q.set("a", a);
+    if (b != null) q.set("b", b);
+    let hst;
+    try { hst = await api.get(`/api/history?${q}`); } catch (e) { clear(body).append(h("p", { class: "error" }, e.message)); return; }
+    if (n !== seq) return;
+    const opts = (sel, cur) => clear(sel).append(...hst.scans.map((sc) => h("option", { value: String(sc.i), selected: sc.i === cur.i }, `#${sc.i + 1} · ${stamp(sc.ts).slice(5)} · ${sc.open} open`)));
+    opts(aSel, hst.a);
+    opts(bSel, hst.b);
+    const one = hst.scans.length < 2;
+    clear(body).append(
+      one ? h("p", { class: "notice" }, EMPTY.history) : null,
+      h("div", { class: "strip" },
+        cell("Before", String(hst.a.open), `${stamp(hst.a.ts)} :: ${ago(hst.a.ts)}`),
+        cell("After", String(hst.b.open), `${stamp(hst.b.ts)} :: ${ago(hst.b.ts)}`),
+        cell("New", String(hst.new.length), "in after, not in before"),
+        cell("Fixed", String(hst.fixed.length), "in before, gone after", "ok"),
+      ),
+      panel(`Between scan ${hst.a.i + 1} and scan ${hst.b.i + 1}`, { meta: `${stamp(hst.b.ts)}` },
+        h("div", { class: "cols" },
+          col(`New · ${hst.new.length}`, hst.new, "Nothing new."),
+          col(`Fixed · ${hst.fixed.length}`, hst.fixed, "Nothing fixed between these two scans."),
+          col(`Still open · ${hst.still.length}`, hst.still, "Nothing carried over."),
+        )),
+      h("div", { class: "grid stack" }, panel("Timeline", { class: "span-12", meta: `${hst.lifetimes.filter((l) => l.open).length} open · ${hst.lifetimes.filter((l) => !l.open).length} fixed` },
+        h("div", { class: "table-wrap" }, ganttChart(hst.lifetimes, hst.scans)),
+        h("div", { class: "legend" },
+          h("span", {}, "▨ open, up to now"), h("span", {}, "█ open and critical"), h("span", {}, "□ fixed: first seen to last seen"), h("span", {}, "┊ a scan"),
+        ),
+        fig(`fig 1 :: every finding of ${shortProject(project)} across ${hst.scans.length} scans`, "from the reports folder"),
+      ),
+      panel("Open findings per scan", { class: "span-12", meta: `${hst.scans.length} scans` },
+        trendChart(hst.scans.map((sc) => ({ ts: sc.ts, total: sc.open, severe: sc.counts.critical + sc.counts.high })), { width: 1100, height: 200 }),
+        fig(`fig 2 :: ${shortProject(project)}, every scan in the reports folder`, `${hst.scans.length} scans`),
+      )),
+      whatNext([
+        { label: "Read what is still open", go: ["findings", { project }] },
+        { label: "Fix it with the agent", why: "then compare again", go: ["run", { kind: "loop", repo: project.startsWith("/") ? project : "" }] },
+        { label: "Create evidence for an auditor", go: ["evidence"] },
+      ], go),
+    );
+  }
+
+  projSel.addEventListener("change", () => { project = projSel.value; load(); });
+  aSel.addEventListener("change", () => load(Number(aSel.value), Number(bSel.value)));
+  bSel.addEventListener("change", () => load(Number(aSel.value), Number(bSel.value)));
+  await load();
+
+  function col(title, rows, none) {
+    return h("div", {}, h("h3", {}, title),
+      rows.length ? h("ul", { class: "rows" }, rows.map((r) => h("li", {}, h("span", { class: "code" }, r.severity.slice(0, 1).toUpperCase() + "+"), h("span", { class: ["t", r.severity === "critical" || r.severity === "high" ? "b" : null] }, r.title)))) : empty(none));
+  }
+
+  function list(title, rows, none) {
+    return panel(`${title} (${rows.length})`, {},
+      rows.length ? h("ul", { class: "list" }, rows.map((r) => h("li", {}, sevBadge(r.severity), h("span", { class: "grow t1" }, r.title)))) : empty(none));
+  }
+}
+
+function cell(label, value, sub, cls) {
+  return h("div", { class: "cell" }, h("span", { class: "label" }, label), h("div", { class: ["big", cls] }, value), h("div", { class: "sub" }, sub));
+}

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

@@ -0,0 +1,184 @@
+import { h, put, panel, empty, subwin, whatNext, fig } from "../dom.js";
+import { severityBars, stackedBar, sparkline, trendChart, columns, wordmark } from "../charts.js";
+import { ago, duration, shortProject, SEVERITIES, plural } from "../format.js";
+import { SCREENS, START, NEXT, TAGLINE } from "../copy.js";
+
+/** Merge per-project trends into one series by scan index from the end. */
+function combinedTrend(projects) {
+  const len = Math.max(0, ...projects.map((p) => p.trend.length));
+  const out = [];
+  for (let i = 0; i < len; i++) {
+    let total = 0;
+    let severe = 0;
+    let ts = null;
+    for (const p of projects) {
+      const t = p.trend[p.trend.length - len + i] || p.trend[0];
+      if (!t) continue;
+      total += t.total;
+      severe += (t.critical || 0) + (t.high || 0);
+      if (!ts || t.ts > ts) ts = t.ts;
+    }
+    out.push({ ts, total, severe });
+  }
+  return out;
+}
+
+function about(meta, o) {
+  const facts = o.projects.length
+    ? [["projects", String(o.projects.length)], ["open", String(o.open)], ["fixed", String(o.fixed)], ["network", "none"]]
+    : [["projects", "0"], ["network", "none"], ["telemetry", "none"]];
+  return subwin("About penthera", { class: "about" },
+    h("div", { class: "subwin-body" },
+      wordmark(),
+      h("p", { class: "sr" }, "Penthera"),
+      h("div", { class: "tagline" }, TAGLINE),
+      h("div", { class: "facts" },
+        h("span", {}, `v${meta.version}`),
+        facts.map(([k, v]) => h("span", {}, `${k} `, h("b", {}, v))),
+        h("span", {}, meta.demo ? "demo data" : "reports from this machine"),
+      ),
+    ));
+}
+
+function startHere(meta, go) {
+  const folder = meta.projects?.[0] || "";
+  return h("section", { class: "steps", "aria-labelledby": "start-h" },
+    h("div", {},
+      h("h1", { id: "start-h" }, START.welcome),
+      h("p", { class: "lede" }, START.intro),
+      h("p", { class: "muted" }, START.gate),
+    ),
+    START.steps.map((st, i) => h("div", { class: "step" },
+      h("h3", {}, h("span", { class: "n" }, `Step ${i + 1}`), st.title),
+      h("p", { class: "muted" }, st.body),
+      h("button", { type: "button", class: i === 0 ? "btn primary" : "btn", onclick: () => go("run", { kind: st.kind, repo: folder }) }, `${st.action} ▸`),
+    )),
+    h("p", { class: "muted" }, `${START.demo} `, h("code", {}, "penthera ui --demo"), "."),
+  );
+}
+
+export async function render(root, { api, go, meta }) {
+  const o = await api.get("/api/overview");
+  put(root, about(meta, o));
+
+  if (!o.projects.length) {
+    put(root, startHere(meta, go));
+    return;
+  }
+
+  const total = SEVERITIES.reduce((n, s) => n + o.mix[s], 0);
+  const severe = o.mix.critical + o.mix.high;
+  put(root, 
+    h("h1", {}, SCREENS.overview.title),
+    h("p", { class: "lede" }, SCREENS.overview.lede),
+    h("div", { class: "strip" },
+      cell("Open findings", String(o.open), `${severe} critical or high`),
+      cell("Fixed", String(o.fixed), "gone in a later scan, or verified by the loop", "ok"),
+      cell("Median time to fix", o.timeToFix.medianDays == null ? "-" : String(o.timeToFix.medianDays), plural(o.timeToFix.samples, "fix measured", "fixes measured"), null, o.timeToFix.medianDays == null ? null : "days"),
+      cell("Hosts contacted", String(o.egress.hosts.length), `${o.egress.blocked.length} blocked by offline mode`),
+    ),
+  );
+
+  const c = o.columns;
+  const rowsOf = (list, none) => (list.length
+    ? h("ul", { class: "rows" }, list.slice(0, 8).map((r) => h("li", {},
+      h("span", { class: "code" }, `${r.severity.slice(0, 1).toUpperCase()}+`),
+      h("button", { type: "button", class: ["row-btn", "t", r.severity === "critical" || r.severity === "high" ? "b" : null], onclick: () => go("findings", { project: r.project, id: r.id }) },
+        r.title, h("span", { class: "where" }, ` · ${shortProject(r.project)}`)))))
+    : empty(none));
+  put(root, panel("This week", { class: "week", meta: new Date().toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" }) },
+    h("div", { class: "cols" },
+      h("div", {}, h("h3", {}, `Fix first · ${c.fixFirst.length}`), rowsOf(c.fixFirst, "Nothing critical or high. Good.")),
+      h("div", {}, h("h3", {}, `New since the last scan · ${c.newest.length}`), rowsOf(c.newest, "Nothing new since the last scan.")),
+      h("div", {}, h("h3", {}, `Fixed since the last scan · ${c.fixed.length}`), rowsOf(c.fixed, "Nothing fixed since the last scan yet.")),
+    )));
+
+  const grid = h("div", { class: "grid" });
+  put(root, grid);
+
+  const rows = o.projects.map((p) => h("tr", {},
+    h("td", {}, h("span", { class: `grade grade-${p.grade}`, title: `score ${p.score}/100` }, p.grade)),
+    h("td", {},
+      h("button", { class: "row-btn trunc", type: "button", title: p.key, onclick: () => go("findings", { project: p.key }) }, shortProject(p.key)),
+      h("span", { class: "faint" }, p.mode || "")),
+    h("td", { class: "hide-narrow" }, stackedBar(p.counts, { width: 14 })),
+    h("td", {}, sparkline(p.trend.map((t) => t.total), { label: `open findings, ${shortProject(p.key)}` })),
+    h("td", { class: "num t1" }, String(p.open)),
+    h("td", { class: "num ok" }, String(p.fixed)),
+    h("td", { class: "num muted hide-narrow" }, h("button", { type: "button", class: "row-btn", onclick: () => go("history", { project: p.key }) }, ago(p.lastScan))),
+  ));
+  put(grid, panel("Posture per project", { class: "span-12", meta: plural(o.projects.length, "project") },
+    h("div", { class: "table-wrap" }, h("table", {},
+      h("thead", {}, h("tr", {}, ...["Grade", "Project", "Severity", "Trend", "Open", "Fixed", "Last scan"].map((t, i) => h("th", { class: [i === 4 || i === 5 || i === 6 ? "num" : null, i === 2 || i === 6 ? "hide-narrow" : null] }, t)))),
+      h("tbody", {}, rows),
+    )),
+    fig("fig 1 :: grade = 100 − 30/critical − 15/high − 5/medium − 1/low; any critical is an F", `${o.projects.length} projects`),
+  ));
+
+  put(grid, panel("Severity mix", { class: "span-5", meta: `${total} findings` },
+    stackedBar(o.mix, { width: 34 }),
+    severityBars(o.mix, { width: 18 }),
+    fig("fig 2 :: latest report per project", `${total} findings`),
+  ));
+
+  put(grid, panel("Findings over time", { class: "span-7", meta: "by scan" },
+    trendChart(combinedTrend(o.projects)),
+    h("div", { class: "legend" },
+      h("span", {}, h("span", { class: "sw" }), "open (critical to low)"),
+      h("span", {}, h("span", { class: "sw sw-severe" }), "critical + high"),
+    ),
+    fig("fig 3 :: summed across projects, by scan", "from reports + memory"),
+  ));
+
+  put(grid, panel("Time to fix", { class: "span-4", meta: o.timeToFix.medianDays == null ? "no data" : `median ${o.timeToFix.medianDays}d` },
+    columns(o.timeToFix.buckets, { label: "Fixes by time to fix" }),
+    fig("fig 4 :: first seen to gone", `${o.timeToFix.samples} fixes`),
+  ));
+
+  put(grid, panel("Hosts contacted", { class: "span-4", meta: `${o.egress.hosts.length} hosts` },
+    o.egress.hosts.length
+      ? h("ul", { class: "list" }, o.egress.hosts.map((x) => h("li", {},
+        h("span", { class: x.thirdParty ? "t1" : "ok" }, x.thirdParty ? "3P" : "OK"),
+        h("span", { class: "grow trunc t1", title: x.host }, x.host),
+        h("span", { class: "num muted" }, String(x.requests)),
+      )))
+      : empty("No requests recorded."),
+    o.egress.blocked.length ? h("div", {},
+      h("p", { class: "label" }, "Blocked (offline)"),
+      h("ul", { class: "list" }, o.egress.blocked.map((x) => h("li", {}, h("span", { class: "muted" }, "--"), h("span", { class: "grow trunc" }, x.host), h("span", { class: "num muted" }, String(x.requests))))),
+    ) : null,
+    fig("fig 5 :: latest scan per project", "3P = third party"),
+  ));
+
+  put(grid, panel("Last scans", { class: "span-4", meta: `${o.lastScans.length} newest` },
+    h("ul", { class: "list" }, o.lastScans.map((sc) => h("li", {},
+      h("span", { class: "muted" }, ago(sc.ts).padStart(7)),
+      h("span", { class: "grow trunc t1", title: sc.target }, shortProject(sc.target)),
+      worst(sc.counts),
+      h("span", { class: "num muted hide-narrow" }, duration(sc.durationMs)),
+    ))),
+  ));
+
+  if (o.loops.length) {
+    put(grid, panel("Agent loop runs", { class: "span-12", meta: plural(o.loops.length, "run") },
+      h("ul", { class: "list" }, o.loops.map((l) => h("li", {},
+        h("span", { class: "muted" }, ago(l.startedAt)),
+        h("span", { class: "grow t1" }, `${shortProject(l.target.repo)} :: ${l.findings.initial ?? "?"} → ${l.findings.final ?? "?"} findings`),
+        h("span", { class: "ok" }, `${l.totals.verified} verified`),
+        l.totals.failed ? h("span", { class: "bad" }, `${l.totals.failed} reverted`) : null,
+        h("span", { class: "muted hide-narrow" }, l.branch || ""),
+      ))),
+    ));
+  }
+
+  put(root, whatNext(NEXT.overview, go));
+}
+
+function worst(c) {
+  const sev = SEVERITIES.find((k) => c[k] > 0);
+  return sev ? h("span", { class: `sev sev-${sev}` }, `${c[sev]} ${sev}`) : h("span", { class: "ok" }, "clean");
+}
+
+function cell(label, value, sub, cls, unit) {
+  return h("div", { class: "cell" }, h("span", { class: "label" }, label), h("div", { class: ["big", cls] }, value, unit ? h("span", { class: "unit" }, unit) : null), h("div", { class: "sub" }, sub));
+}

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

@@ -0,0 +1,349 @@
+import { h, put, panel, clear, empty, diffBlock, announce, sevBadge, subwin, whatNext } from "../dom.js";
+import { createTyper } from "../typer.js";
+import { bars } from "../charts.js";
+import { ago, duration, pct, shortProject } from "../format.js";
+import { SCREENS, RUN_KINDS, NEXT, EMPTY } from "../copy.js";
+
+const LOCAL = /^(localhost|127\.\d+\.\d+\.\d+|\[::1\]|[a-z0-9-]+\.localhost)$/i;
+
+function hostOf(raw) {
+  const v = String(raw || "").trim();
+  if (!v) return null;
+  try { return new URL(/^[a-z][a-z0-9+.-]*:\/\//i.test(v) ? v : `http://${v}`).hostname; } catch { return null; }
+}
+
+export async function render(root, { api, params, meta, go }) {
+  const [{ live, past }, mem] = await Promise.all([api.get("/api/runs"), api.get("/api/memory")]);
+  const projects = meta.projects || [];
+  const startKind = RUN_KINDS.some((k) => k.kind === params.get("kind")) ? params.get("kind") : "scan";
+
+  // ── Form ──
+  const radios = RUN_KINDS.map((k) => h("input", { type: "radio", name: "r-kind", value: k.kind, checked: k.kind === startKind }));
+  const kindOf = () => radios.find((r) => r.checked)?.value || "scan";
+  const repo = h("input", { type: "text", id: "r-repo", list: "r-projects", autocomplete: "off", spellcheck: "false", value: params.get("repo") || projects[0] || "", placeholder: "/path/to/project" });
+  const url = h("input", { type: "text", id: "r-url", autocomplete: "off", spellcheck: "false", value: params.get("url") || "", placeholder: "http://localhost:3000" });
+  const confirm = h("input", { type: "text", id: "r-confirm", autocomplete: "off", spellcheck: "false" });
+  const confirmHint = h("span", { class: "hint" });
+  const confirmWrap = h("label", { class: "field c12", for: "r-confirm", hidden: true }, h("span", {}, "Confirm the target"), confirm, confirmHint);
+  const iters = h("input", { type: "number", id: "r-iter", min: "1", max: "50", value: "5" });
+  const tests = h("input", { type: "checkbox", id: "r-tests" });
+  const urlWrap = h("label", { class: "field c4", for: "r-url" }, h("span", {}, "Running app URL ", h("span", { class: "hint" }, "(optional)")), url);
+  const iterWrap = h("label", { class: "field c2", for: "r-iter" }, h("span", {}, "Max rounds"), iters);
+  const testsWrap = h("label", { class: "check", for: "r-tests" }, tests, "also run the project's tests to verify");
+  const note = h("span", { class: "muted" });
+  const start = h("button", { type: "submit", class: "btn primary" });
+  const formErr = h("p", { class: "error", role: "alert", hidden: true });
+
+  const NOTES = {
+    scan: "Contacts only the URL's host (and nothing at all for a folder-only scan) while offline is on in Settings.",
+    deps: "Reads package-lock.json and node_modules. No network.",
+    agents: "Reads skills, MCP config, hooks and rule files. Read-only, no network.",
+    loop: "Always offline :: works on a local branch :: every diff waits for you :: never pushes.",
+  };
+  const sync = () => {
+    const k = kindOf();
+    const def = RUN_KINDS.find((x) => x.kind === k);
+    urlWrap.hidden = k === "deps" || k === "agents";
+    iterWrap.hidden = k !== "loop";
+    testsWrap.hidden = k !== "loop";
+    note.textContent = NOTES[k];
+    start.textContent = `${def.button} ▸`;
+    const host = urlWrap.hidden ? null : hostOf(url.value);
+    const remote = host && !LOCAL.test(host);
+    confirmWrap.hidden = !remote;
+    if (remote) {
+      confirm.placeholder = host;
+      confirmHint.textContent = `${host} is not on this machine. Type its name to confirm you own it or have written permission to test it.`;
+    }
+  };
+  url.addEventListener("input", sync);
+  for (const r of radios) r.addEventListener("change", sync);
+
+  const form = h("form", { class: "form-grid", novalidate: true },
+    h("div", { class: "c12" }, h("div", { class: "seg", role: "radiogroup", "aria-label": "What to run" },
+      RUN_KINDS.map((k, i) => h("label", {}, radios[i], h("span", {}, k.label))),
+    )),
+    h("label", { class: "field c6", for: "r-repo" }, h("span", {}, "Project folder"), repo, h("datalist", { id: "r-projects" }, projects.map((p) => h("option", { value: p })))),
+    urlWrap,
+    iterWrap,
+    confirmWrap,
+    h("div", { class: "c12 filters" }, testsWrap, note),
+    h("div", { class: "c12" }, start, formErr),
+  );
+
+  // ── Terminal ──
+  const term = h("div", { class: "term", role: "log", "aria-live": "off", "aria-label": "Run output", tabindex: "0" });
+  const statusChip = h("span", { class: "chip" }, "idle");
+  const stopBtn = h("button", { type: "button", class: "btn", disabled: true }, "Stop");
+  const approvalSlot = h("div");
+  const nextSlot = h("div");
+  const timeline = h("ol", { class: "timeline", "aria-label": "Rounds" });
+  const runInfo = h("div", { class: "muted" }, "tty :: idle");
+  const ttyTitle = h("span", { class: "title" }, "penthera :: tty");
+
+  const termWin = subwin("Terminal", { class: "span-8" },
+    h("div", { class: "term-head" }, runInfo, h("div", { class: "filters" }, statusChip, stopBtn)),
+    term,
+    approvalSlot,
+  );
+  termWin.querySelector(".titlebar .title").replaceWith(ttyTitle);
+
+  put(root, 
+    h("h1", {}, SCREENS.run.title),
+    h("p", { class: "lede" }, SCREENS.run.lede),
+    h("div", { class: "grid" },
+      panel("What to run", { class: "span-12" }, form),
+      termWin,
+      h("div", { class: "span-4 grid" },
+        panel("Rounds", { class: "span-12" }, timeline),
+        panel("Memory", { class: "span-12" }, memoryPanel(mem.projects)),
+      ),
+      h("div", { class: "span-12" }, nextSlot),
+      panel("Past loop runs", { class: "span-12" }, pastRuns(past)),
+    ),
+  );
+
+  let typer = createTyper(term);
+  let es = null;
+  let run = null;
+  let pending = null;
+  const its = new Map();
+
+  timeline.append(h("li", {}, h("span", { class: "muted" }, "Rounds appear here when the fix loop runs.")));
+  typer.push("Ready. Pick what to run, check the folder, and press the button.", "dim");
+  typer.push("The fix loop stops at every diff :: [y] approve  [n] skip  [q] stop.", "dim");
+
+  function setStatus(st) {
+    statusChip.textContent = st;
+    statusChip.className = `chip ${st === "running" ? "on" : st === "awaiting you" ? "blue" : st === "error" ? "inv" : ""}`;
+    stopBtn.disabled = !(st === "running" || st === "awaiting you");
+  }
+
+  function itemFor(n, of) {
+    if (!its.has(n)) {
+      const fixes = h("ul", { class: "fixes" });
+      const head = h("div", { class: "t1" }, `Round ${n}`, of ? h("span", { class: "muted" }, ` of ${of}`) : null);
+      const sub = h("div", { class: "muted" }, "scanning…");
+      const li = h("li", {}, head, sub, fixes);
+      timeline.append(li);
+      its.set(n, { li, sub, fixes, current: null });
+    }
+    return its.get(n);
+  }
+  let lastIt = null;
+  const mark = (li, txt, cls) => { li.firstChild.textContent = txt; li.firstChild.className = cls; };
+
+  function onEvent(ev) {
+    const d = ev.data;
+    switch (ev.type) {
+      case "log": {
+        const t = d.text.replace(/^\n/, "");
+        const cls = /^penthera /.test(t) ? "cmd" : /verified and committed|done:|^(scan|deps|agents) done/.test(t) ? "ok"
+          : /failed verification|^error|not applied/.test(t) ? "bad" : /^\s*iteration \d+/.test(t) ? "hl" : /^\s{3,}/.test(t) || /\.\.\.$/.test(t) ? "dim" : null;
+        typer.push(cls === "dim" || cls === "bad" ? t.trim() : t, cls);
+        break;
+      }
+      case "iteration": lastIt = itemFor(d.n, d.of); break;
+      case "scanned": if (lastIt) lastIt.sub.textContent = `${d.findings} findings :: ${d.fixable} fixable :: ${d.suppressed} suppressed`; break;
+      case "approval": {
+        pending = d;
+        const it = itemFor(d.iteration);
+        const li = h("li", {}, h("span", { class: "blue" }, "??"), h("span", { class: "t" }, d.plan.title));
+        it.fixes.append(li);
+        it.current = li;
+        showApproval(d);
+        setStatus("awaiting you");
+        announce(`Diff ${d.index} of ${d.total} is waiting for you: ${d.plan.title}`);
+        break;
+      }
+      case "decision": {
+        pending = null;
+        clear(approvalSlot);
+        const it = lastIt || itemFor(1);
+        const m = { y: ["..", "muted"], n: ["--", "muted"], skip: ["~~", "muted"], quit: ["xx", "bad"] }[d.answer] || ["..", "muted"];
+        if (it.current) mark(it.current, ...m);
+        if (d.answer !== "y") it.current = null;
+        setStatus("running");
+        break;
+      }
+      case "fix": {
+        if (lastIt?.current) {
+          const [txt, cls] = d.status === "verified" ? ["OK", "ok"] : d.status === "failed" ? ["!!", "bad"] : ["--", "muted"];
+          mark(lastIt.current, txt, cls);
+          lastIt.current = null;
+        }
+        break;
+      }
+      case "status": {
+        if (d.status === "running") { setStatus("running"); break; }
+        setStatus(d.status);
+        clear(approvalSlot);
+        start.disabled = false;
+        const sum = d.summary;
+        if (sum?.totals) {
+          const t = sum.totals;
+          typer.push(`done: ${sum.stopReason} after ${t.iterations} round${t.iterations === 1 ? "" : "s"} (${duration(sum.durationMs)})`, "ok");
+          typer.push(`${t.verified} verified and committed :: ${t.failed} failed and reverted :: ${t.declined} skipped`, t.failed ? "bad" : "ok");
+          for (const it of its.values()) if (it.sub.textContent === "scanning…") it.sub.textContent = "nothing left to fix";
+        }
+        if (d.status === "done" || d.status === "stopped") {
+          clear(nextSlot).append(whatNext(NEXT[run.kind] || NEXT.scan, go));
+        }
+        announce(`Run ${d.status}`);
+        break;
+      }
+      default: break;
+    }
+  }
+
+  function showApproval(d) {
+    typer.flush();
+    const p = d.plan;
+    const decide = async (answer) => {
+      for (const b of approvalSlot.querySelectorAll("button")) b.disabled = true;
+      try {
+        await api.post(`/api/runs/${run.id}/decision`, { approvalId: d.approvalId, answer });
+      } catch (e) {
+        typer.push(`error: ${e.message}`, "bad");
+        for (const b of approvalSlot.querySelectorAll("button")) b.disabled = false;
+      }
+    };
+    const approve = h("button", { type: "button", class: "btn primary", onclick: () => decide("approve") }, "Apply this fix", h("span", { class: "k" }, "y"));
+    clear(approvalSlot).append(h("section", { class: "alert", role: "alertdialog", "aria-labelledby": "ap-h", "aria-describedby": "ap-d" },
+      h("div", { class: "icon", "aria-hidden": "true" }, "?"),
+      h("h3", { id: "ap-h" }, `Apply fix ${d.index} of ${d.total}?`),
+      h("p", { id: "ap-d", class: "t1" }, p.title),
+      h("p", { class: "muted" }, d.memory ? `Memory :: this recipe verified ${d.memory.verified} times, failed ${d.memory.failed} on this stack.` : "Memory :: no history for this recipe yet."),
+      h("div", { class: "body" },
+        h("dl", { class: "kv" },
+          h("dt", {}, "recipe"), h("dd", {}, `${p.recipe}${p.framework ? ` (${p.framework})` : ""} :: confidence ${p.confidence}`),
+          h("dt", {}, "files"), h("dd", {}, p.files.join(", ")),
+          h("dt", {}, "fixes"), h("dd", {}, p.findings.map((f) => h("div", {}, sevBadge(f.severity), " ", f.title))),
+        ),
+        diffBlock(p.diff),
+        p.redacted ? h("p", { class: "muted" }, "Secret values are masked here; the real patch uses them.") : null,
+      ),
+      h("div", { class: "actions" },
+        h("button", { type: "button", class: "btn", onclick: () => decide("stop") }, "Stop the loop", h("span", { class: "k" }, "q")),
+        h("button", { type: "button", class: "btn", onclick: () => decide("skip") }, "Skip", h("span", { class: "k" }, "n")),
+        approve,
+      ),
+    ));
+    approve.focus({ preventScroll: true });
+    approvalSlot.scrollIntoView({ block: "nearest" });
+  }
+
+  function attach(r) {
+    run = r;
+    const what = RUN_KINDS.find((k) => k.kind === r.kind)?.label.toLowerCase() || r.kind;
+    runInfo.textContent = `${what} :: ${r.repo ? shortProject(r.repo) : ""}${r.url ? ` + ${r.url}` : ""} :: started ${ago(r.startedAt)}`;
+    ttyTitle.textContent = `penthera :: tty :: ${what}`;
+    es?.close();
+    es = new EventSource(`/api/runs/${r.id}/stream`);
+    for (const type of ["log", "iteration", "scanned", "approval", "decision", "fix", "status"]) {
+      es.addEventListener(type, (m) => { try { onEvent(JSON.parse(m.data)); } catch { /* malformed event */ } });
+    }
+    es.addEventListener("end", () => { es.close(); es = null; });
+  }
+
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    formErr.hidden = true;
+    start.disabled = true;
+    const kind = kindOf();
+    try {
+      const r = await api.post("/api/runs", {
+        kind, repo: repo.value, url: urlWrap.hidden ? "" : url.value, confirm: confirm.value,
+        maxIterations: Number(iters.value), runTests: kind === "loop" && tests.checked,
+      });
+      typer.stop();
+      clear(term);
+      clear(timeline);
+      clear(nextSlot);
+      its.clear();
+      lastIt = null;
+      typer = createTyper(term);
+      attach(r);
+    } catch (err) {
+      formErr.textContent = err.message;
+      formErr.hidden = false;
+      start.disabled = false;
+      if (err.status === 428) confirm.focus();
+    }
+  });
+
+  stopBtn.addEventListener("click", async () => {
+    if (!run) return;
+    stopBtn.disabled = true;
+    try { await api.post(`/api/runs/${run.id}/stop`); } catch (e) { typer.push(`error: ${e.message}`, "bad"); }
+  });
+
+  const onKey = (e) => {
+    if (!pending || e.metaKey || e.ctrlKey || e.altKey) return;
+    if (/^(INPUT|SELECT|TEXTAREA)$/.test(document.activeElement?.tagName || "")) return;
+    const btns = approvalSlot.querySelectorAll(".actions button");
+    const map = { q: 0, n: 1, y: 2 };
+    if (e.key in map && btns[map[e.key]] && !btns[map[e.key]].disabled) { e.preventDefault(); btns[map[e.key]].click(); }
+  };
+  document.addEventListener("keydown", onKey);
+
+  // Re-attach to a run that is still going (navigated away and back).
+  const running = live.find((r) => r.status === "running");
+  if (running) {
+    start.disabled = true;
+    typer.stop();
+    clear(term);
+    typer = createTyper(term);
+    attach(running);
+  }
+  sync();
+
+  return () => {
+    es?.close();
+    typer.stop();
+    document.removeEventListener("keydown", onKey);
+  };
+}
+
+function memoryPanel(projects) {
+  if (!projects.length) return empty(EMPTY.memory);
+  const recipes = new Map();
+  for (const p of projects) for (const r of p.recipes) {
+    const cur = recipes.get(r.recipe) || { verified: 0, failed: 0 };
+    cur.verified += r.verified;
+    cur.failed += r.failed;
+    recipes.set(r.recipe, cur);
+  }
+  const events = projects.reduce((n, p) => n + p.events, 0);
+  const verified = projects.reduce((n, p) => n + p.verifiedFixes, 0);
+  const failed = projects.reduce((n, p) => n + p.failedFixes, 0);
+  const broken = projects.filter((p) => p.chain !== "ok");
+  return h("div", {},
+    h("dl", { class: "kv" },
+      h("dt", {}, "projects"), h("dd", {}, String(projects.length)),
+      h("dt", {}, "events"), h("dd", {}, String(events)),
+      h("dt", {}, "chain"), h("dd", { class: broken.length ? "bad" : "ok" }, broken.length ? `${broken.length} broken :: ignored there` : "[OK] sha-256 hash chain"),
+      h("dt", {}, "fixes"), h("dd", {}, h("span", { class: "ok" }, `${verified} verified`), ` :: ${failed} failed`),
+    ),
+    h("p", { class: "label" }, "Recipe success"),
+    bars([...recipes].map(([recipe, r]) => ({ label: recipe, value: r.verified })), { width: 10 }),
+    h("p", { class: "panel-note" }, [...recipes].map(([recipe, r]) => `${recipe} ${pct(r.verified / Math.max(1, r.verified + r.failed))}`).join(" :: ")),
+  );
+}
+
+function pastRuns(past) {
+  if (!past.length) return empty(EMPTY.pastRuns);
+  return h("div", { class: "table-wrap" }, h("table", {},
+    h("thead", {}, h("tr", {}, ...["When", "Project", "Findings", "Verified", "Reverted", "Skipped", "Stopped because", "Branch"].map((t, i) => h("th", { class: [i >= 3 && i <= 5 ? "num" : null, i === 7 ? "hide-narrow" : null] }, t)))),
+    h("tbody", {}, past.map((l) => h("tr", {},
+      h("td", { class: "muted" }, ago(l.startedAt)),
+      h("td", { class: "trunc t1", title: l.target.repo || "" }, shortProject(l.target.repo)),
+      h("td", { class: "t1" }, `${l.findings.initial ?? "?"} → ${l.findings.final ?? "?"}`),
+      h("td", { class: "num ok" }, String(l.totals.verified)),
+      h("td", { class: ["num", l.totals.failed ? "bad" : "muted"] }, String(l.totals.failed)),
+      h("td", { class: "num muted" }, String(l.totals.declined + l.totals.skipped)),
+      h("td", { class: "muted" }, l.stopReason || "-"),
+      h("td", { class: "muted hide-narrow" }, l.branch || "-"),
+    ))),
+  ));
+}