penthera 1.6.1 → 1.7.0

package/src/ui/static/js/center.js

@@ -0,0 +1,388 @@
+// The centre: one scrolling stream. A project (or all of them) as a compact
+// header, "Fix first" and the findings; a run as a transcript of tool output
+// with inline Apply / Skip / Stop; and the prompt bar that starts actions.
+import { h, clear, empty, sevBadge, diffBlock, announce } from "./dom.js";
+import { api } from "./api.js";
+import { state, set, projectOf, folderFor } from "./state.js";
+import { createTyper } from "./typer.js";
+import { stackedBar, sparkline, wordmark } from "./charts.js";
+import { ago, duration, shortProject, plural, SEVERITIES } from "./format.js";
+import { START, KINDS, NOTES, EMPTY } from "./copy.js";
+
+const LOCAL = /^(localhost|127\.\d+\.\d+\.\d+|\[::1\]|[a-z0-9-]+\.localhost)$/i;
+const SEV_RANK = Object.fromEntries(SEVERITIES.map((s, i) => [s, 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; }
+}
+
+// ── Stream state that outlives a redraw: the live run's typer and SSE ──
+let typer = null;
+let es = null;
+let pending = null;
+let visible = [];
+
+export function stopStream() {
+  es?.close();
+  es = null;
+  typer?.stop();
+  typer = null;
+}
+
+export function renderCenter(el, ctx) {
+  const { toggleLeft, toggleRight } = ctx;
+  const search = h("input", { type: "search", id: "q", placeholder: "Search  /", "aria-label": "Search findings", value: state.query });
+  search.addEventListener("input", () => { set({ query: search.value }); });
+  const title = state.sel.kind === "all" ? "All projects"
+    : state.sel.kind === "project" ? shortProject(state.sel.key)
+      : state.sel.kind === "run" ? `Run :: ${state.sel.run?.kind || ""}` : "Fix loop run";
+  const toolbar = h("div", { class: "toolbar" },
+    h("button", { type: "button", class: "icon", "aria-label": "Toggle the sidebar ([)", title: "Sidebar  [", onclick: toggleLeft }, "☰"),
+    h("span", { class: "title" }, title),
+    h("span", { class: "grow" }),
+    state.sel.kind === "all" || state.sel.kind === "project" ? search : null,
+    h("button", { type: "button", class: "icon", "aria-label": "Toggle the details panel (])", title: "Details  ]", onclick: toggleRight }, "◫"),
+  );
+  const stream = h("div", { class: "stream", id: "stream" });
+  const col = h("div", { class: "col" });
+  stream.append(col);
+  clear(el).append(toolbar, stream, promptBar(ctx));
+
+  if (state.sel.kind === "run") return runView(col, ctx);
+  stopStream();
+  if (state.sel.kind === "past") return pastRunView(col, ctx);
+  return projectView(col, ctx);
+}
+
+/** Redraw only the prompt bar (a refresh while a run is on screen must not rebuild its transcript). */
+export function renderBar(el, ctx) {
+  const old = el.querySelector(".bar");
+  if (old) old.replaceWith(promptBar(ctx));
+}
+
+/** Re-render only the findings list (search typing must not rebuild the toolbar). */
+export function refreshList(ctx) {
+  const list = document.getElementById("findings-list");
+  if (list) fillFindings(list, ctx);
+}
+
+// ── Project (or all projects) ──────────────────────────────────────────
+
+function projectView(col, ctx) {
+  const o = state.overview;
+  if (!o) return;
+  const all = state.sel.kind === "all";
+  const key = state.sel.key;
+  const p = all ? null : projectOf(key);
+
+  if (!o.projects.length && all) return startView(col, ctx);
+  if (!all && !p) return notScannedView(col, key, ctx);
+
+  const counts = all ? o.mix : p.counts;
+  const open = all ? o.open : p.open;
+  const fixed = all ? o.fixed : p.fixed;
+  const trend = all ? combinedTrend(o.projects) : p.trend.map((t) => t.total);
+  col.append(h("header", { class: "head" },
+    h("span", { class: `grade lg grade-${all ? "x" : p.grade}`, title: all ? "" : `score ${p.score}/100` }, all ? "∑" : p.grade),
+    h("h1", { title: key || "" }, all ? "All projects" : shortProject(key)),
+    h("div", { class: "meta" }, all ? `${plural(o.projects.length, "project")} · newest scan ${ago(o.lastScans[0]?.ts)}` : `${p.mode || "scan"} · last scan ${ago(p.lastScan)} · ${plural(p.trend.length, "scan")}`),
+    h("div", { class: "right-bits" },
+      stackedBar(counts, { width: 24 }),
+      sparkline(trend, { label: "open findings per scan" }),
+      h("div", { class: "counts" }, h("b", {}, String(open)), " open · ", h("span", { class: "ok" }, String(fixed)), " fixed"),
+    ),
+  ));
+
+  // Since the last scan (the old History page, condensed).
+  const since = h("div");
+  col.append(since);
+  if (!all && p.trend.length > 1) {
+    api.get(`/api/history?project=${encodeURIComponent(key)}`).then((hst) => {
+      if (state.sel.key !== key) return;
+      since.append(h("section", { class: "section" },
+        h("h2", {}, h("span", {}, "Since the last scan"), h("span", {}, `${hst.new.length} new · ${hst.fixed.length} fixed`)),
+        h("div", { class: "cols2" },
+          miniList(hst.new, "Nothing new."),
+          miniList(hst.fixed, "Nothing fixed since the last scan.", true),
+        )));
+    }).catch(() => {});
+  } else if (all && (o.columns.newest.length || o.columns.fixed.length)) {
+    since.append(h("section", { class: "section" },
+      h("h2", {}, h("span", {}, "Since the last scan"), h("span", {}, `${o.columns.newest.length} new · ${o.columns.fixed.length} fixed`)),
+      h("div", { class: "cols2" }, miniList(o.columns.newest, "Nothing new."), miniList(o.columns.fixed, "Nothing fixed.", true))));
+  }
+
+  const list = h("ul", { class: "rows", id: "findings-list", "aria-label": "Findings" });
+  col.append(h("section", { class: "section" }, h("h2", {}, h("span", {}, "Findings"), h("span", { id: "findings-count" })), list));
+  fillFindings(list, ctx);
+}
+
+function fillFindings(list, ctx) {
+  const all = state.sel.kind === "all";
+  const q = state.query.trim().toLowerCase();
+  const rows = state.findings
+    .filter((f) => !f.suppressed && (all || f.project === state.sel.key))
+    .filter((f) => !q || `${f.title} ${f.category} ${f.location} ${f.project}`.toLowerCase().includes(q))
+    .sort((a, b) => SEV_RANK[a.severity] - SEV_RANK[b.severity] || a.title.localeCompare(b.title));
+  visible = rows;
+  clear(list);
+  let group = null;
+  for (const f of rows) {
+    const fixFirst = f.severity === "critical" || f.severity === "high";
+    const g = fixFirst ? "Fix first" : "Then";
+    if (g !== group) {
+      group = g;
+      list.append(h("li", { class: "group-h" }, g === "Fix first" ? `Fix first :: ${rows.filter((x) => x.severity === "critical" || x.severity === "high").length}` : `Then :: ${rows.filter((x) => !(x.severity === "critical" || x.severity === "high")).length}`));
+    }
+    const cur = state.finding && state.finding.id === f.id && state.finding.project === f.project;
+    list.append(h("li", {}, h("button", {
+      type: "button", class: ["row", fixFirst ? "b" : null], "aria-current": String(Boolean(cur)), dataset: { id: f.id, project: f.project },
+      onclick: () => ctx.openFinding(f),
+    },
+    sevBadge(f.severity),
+    h("span", { class: "t" }, f.title),
+    h("span", { class: "tag" }, all ? shortProject(f.project) : f.category || ""),
+    f.location ? h("span", { class: "where" }, f.location) : null)));
+  }
+  if (!rows.length) list.append(h("li", {}, empty(state.findings.length && q ? `${EMPTY.filtered}` : EMPTY.findings)));
+  const count = document.getElementById("findings-count");
+  if (count) count.textContent = q ? `${rows.length} match` : plural(rows.length, "open finding");
+}
+
+/** j / k: move the selection and open the finding in the right panel. */
+export function moveFinding(step, ctx) {
+  if (!visible.length) return;
+  const i = visible.findIndex((f) => state.finding && f.id === state.finding.id && f.project === state.finding.project);
+  const next = visible[Math.max(0, Math.min(visible.length - 1, i < 0 ? 0 : i + step))];
+  ctx.openFinding(next);
+  const btn = document.querySelector(`#findings-list .row[data-id="${next.id}"]`);
+  btn?.focus({ preventScroll: false });
+}
+
+function miniList(rows, none, fixed = false) {
+  return rows.length
+    ? h("ul", { class: "mini" }, rows.slice(0, 8).map((r) => h("li", {}, h("span", { class: `sw sev-${r.severity}`, "aria-hidden": "true" }), h("span", { class: ["grow", fixed ? "muted" : null] }, fixed ? `✓ ${r.title}` : r.title))))
+    : h("p", { class: "empty" }, none);
+}
+
+function combinedTrend(projects) {
+  const len = Math.max(0, ...projects.map((p) => p.trend.length));
+  const out = [];
+  for (let i = 0; i < len; i++) out.push(projects.reduce((n, p) => n + ((p.trend[p.trend.length - len + i] || p.trend[0])?.total || 0), 0));
+  return out;
+}
+
+function startView(col, ctx) {
+  col.append(h("div", { class: "start" },
+    wordmark(),
+    h("p", { class: "muted" }, START.gate),
+    h("h1", {}, START.title),
+    h("p", {}, START.intro),
+    h("div", { class: "steps" }, START.steps.map((st, i) => h("div", { class: "step" },
+      h("span", { class: "n" }, `${i + 1}.`),
+      h("h3", {}, st.title),
+      h("button", { type: "button", class: "btn", onclick: () => ctx.focusBar(st.kind) }, "Choose ▸"),
+      h("p", {}, st.body)))),
+    h("p", { class: "muted" }, `${START.demo} `, h("code", {}, "penthera ui --demo"), "."),
+  ));
+}
+
+function notScannedView(col, key, ctx) {
+  col.append(h("div", { class: "start" },
+    h("h1", {}, shortProject(key)),
+    h("p", { class: "muted" }, key),
+    h("p", {}, "Not scanned yet. Pick what to run in the bar below; the folder is this project."),
+    h("div", { class: "actions" }, h("button", { type: "button", class: "btn", onclick: () => ctx.focusBar("scan") }, "Choose Scan ▸")),
+  ));
+}
+
+// ── A live run, as a transcript ─────────────────────────────────────────
+
+function runView(col, ctx) {
+  const run = state.sel.run;
+  if (!run) return;
+  const status = h("span", { class: "chip" }, run.status);
+  const stop = h("button", { type: "button", class: "btn small", disabled: run.status !== "running" }, "Stop");
+  const lines = h("div", { class: "transcript", role: "log", "aria-live": "off", "aria-label": "Run output" });
+  const tail = h("div");
+  col.append(
+    h("div", { class: "run-head" },
+      h("h1", {}, `${({ scan: "Scan", deps: "Dependency check", agents: "AI tooling audit", loop: "Fix loop" })[run.kind] || run.kind}`),
+      h("span", { class: "muted" }, `${shortProject(run.repo || run.url)}${run.url && run.repo ? ` + ${run.url}` : ""} · ${ago(run.startedAt)}`),
+      h("span", { class: "grow" }), status, stop),
+    lines, tail,
+  );
+  const setStatus = (st) => {
+    status.textContent = st;
+    status.className = `chip ${st === "running" ? "on" : st === "awaiting you" ? "blue" : st === "error" ? "inv" : ""}`;
+    stop.disabled = !(st === "running" || st === "awaiting you");
+  };
+  setStatus(run.status === "running" ? "running" : run.status);
+  stop.addEventListener("click", async () => {
+    stop.disabled = true;
+    try { await api.post(`/api/runs/${run.id}/stop`); } catch (e) { typer?.push(`error: ${e.message}`, "bad"); }
+  });
+
+  stopStream();
+  typer = createTyper(lines);
+  pending = null;
+  es = new EventSource(`/api/runs/${run.id}/stream`);
+  const scroll = () => { const st = document.getElementById("stream"); if (st) st.scrollTop = st.scrollHeight; };
+  const 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 "approval": {
+        pending = d;
+        typer.flush();
+        tail.append(approvalDialog(run, d, typer));
+        setStatus("awaiting you");
+        scroll();
+        announce(`Fix ${d.index} of ${d.total} is waiting for you: ${d.plan.title}`);
+        break;
+      }
+      case "decision": {
+        pending = null;
+        clear(tail);
+        setStatus("running");
+        break;
+      }
+      case "status": {
+        if (d.status === "running") break;
+        setStatus(d.status);
+        clear(tail);
+        const sum = d.summary;
+        if (sum?.totals) {
+          const t = sum.totals;
+          typer.push(`done: ${sum.stopReason} after ${plural(t.iterations, "round")} (${duration(sum.durationMs)})`, "ok");
+          typer.push(`${t.verified} verified and committed :: ${t.failed} failed and reverted :: ${t.declined} skipped${sum.branch ? ` :: branch ${sum.branch}` : ""}`, t.failed ? "bad" : "ok");
+        }
+        tail.append(h("div", { class: "actions" },
+          run.repo || run.url ? h("button", { type: "button", class: "btn primary", onclick: () => ctx.refresh().then(() => set({ sel: { kind: "project", key: run.repo || run.url } })) }, "Open the project ▸") : null));
+        ctx.refresh();
+        announce(`Run ${d.status}`);
+        break;
+      }
+      default: break;
+    }
+  };
+  for (const type of ["log", "approval", "decision", "status"]) {
+    es.addEventListener(type, (m) => { try { onEvent(JSON.parse(m.data)); } catch { /* malformed event */ } });
+  }
+  es.addEventListener("end", () => { es?.close(); es = null; });
+}
+
+function approvalDialog(run, d, ty) {
+  const p = d.plan;
+  const decide = async (answer, box) => {
+    for (const b of box.querySelectorAll("button")) b.disabled = true;
+    try {
+      await api.post(`/api/runs/${run.id}/decision`, { approvalId: d.approvalId, answer });
+    } catch (e) {
+      ty.push(`error: ${e.message}`, "bad");
+      for (const b of box.querySelectorAll("button")) b.disabled = false;
+    }
+  };
+  const box = h("section", { class: "dialog", role: "alertdialog", "aria-labelledby": "ap-h", "aria-describedby": "ap-d" });
+  const apply = h("button", { type: "button", class: "btn primary", onclick: () => decide("approve", box) }, "Apply", h("span", { class: "k" }, "y"));
+  box.append(
+    h("div", { class: "dialog-bar" }, h("span", {}, `Fix ${d.index} of ${d.total}`)),
+    h("div", { class: "dialog-body" },
+      h("h3", { id: "ap-h" }, p.title),
+      h("p", { id: "ap-d", class: "muted" }, `${p.recipe}${p.framework ? ` (${p.framework})` : ""} · ${p.files.join(", ")} · ${d.memory ? `memory: ${d.memory.verified} verified, ${d.memory.failed} failed` : "no history for this recipe yet"}`),
+      h("div", {}, p.findings.map((f) => h("div", {}, sevBadge(f.severity), " ", h("span", { class: "t1" }, 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", box) }, "Stop", h("span", { class: "k" }, "q")),
+        h("button", { type: "button", class: "btn", onclick: () => decide("skip", box) }, "Skip", h("span", { class: "k" }, "n")),
+        apply),
+    ),
+  );
+  queueMicrotask(() => apply.focus({ preventScroll: true }));
+  return box;
+}
+
+/** y / n / q while a diff waits. */
+export function answerPending(key) {
+  if (!pending) return false;
+  const btns = document.querySelectorAll(".dialog .actions button");
+  const i = { q: 0, n: 1, y: 2 }[key];
+  if (i == null || !btns[i] || btns[i].disabled) return false;
+  btns[i].click();
+  return true;
+}
+
+// ── A past loop run, rebuilt from its loopRun ───────────────────────────
+
+function pastRunView(col, ctx) {
+  const l = state.sel.past;
+  if (!l) return;
+  col.append(
+    h("div", { class: "run-head" }, h("h1", {}, "Fix loop"), h("span", { class: "muted" }, `${shortProject(l.target.repo)} · ${ago(l.startedAt)} · ${duration(l.durationMs)}`)),
+    h("div", { class: "transcript" },
+      h("div", { class: "ln cmd" }, `penthera agent --loop --repo ${l.target.repo}${l.target.url ? ` --url ${l.target.url}` : ""}`),
+      l.iterations.flatMap((it) => [
+        h("div", { class: "ln hl" }, `iteration ${it.n}`),
+        it.findings ? h("div", { class: "ln dim" }, `scan: ${it.findings.total} findings (${it.findings.suppressed} suppressed), ${it.findings.fixable} fixable`) : null,
+        ...it.fixes.map((f) => h("div", { class: `ln ${f.status === "verified" ? "ok" : f.status === "failed" ? "bad" : "dim"}` },
+          `${f.status === "verified" ? "OK " : f.status === "failed" ? "!! " : "-- "}${f.title} :: ${f.decision}${f.commit ? ` :: ${f.commit.slice(0, 10)}` : ""}`)),
+      ]),
+      h("div", { class: "ln ok" }, `done: ${l.stopReason} :: ${l.totals.verified} verified, ${l.totals.failed} failed, ${l.totals.declined + l.totals.skipped} skipped`),
+      h("div", { class: "ln" }, `branch ${l.branch} :: nothing was pushed`),
+    ),
+    h("div", { class: "actions" }, h("button", { type: "button", class: "btn", onclick: () => set({ sel: { kind: "project", key: l.target.repo } }) }, "Open the project ▸")),
+  );
+}
+
+// ── The prompt bar ──────────────────────────────────────────────────────
+
+function promptBar(ctx) {
+  const kind = state.mode;
+  const def = KINDS.find((k) => k.kind === kind);
+  const usesUrl = kind === "scan" || kind === "loop";
+  const input = h("input", { type: "text", id: "bar-input", autocomplete: "off", spellcheck: "false", placeholder: def.placeholder, "aria-label": usesUrl ? "Running app URL (optional)" : "Project folder", disabled: !usesUrl });
+  if (usesUrl && state.sel.kind === "project" && /^https?:/.test(state.sel.key || "")) input.value = state.sel.key;
+  const confirm = h("input", { type: "text", id: "bar-confirm", autocomplete: "off", spellcheck: "false", "aria-label": "Type the hostname to confirm" });
+  const confirmRow = h("div", { class: "confirm", hidden: true }, h("span", { id: "confirm-q" }), confirm);
+  const err = h("p", { class: "err", role: "alert", hidden: true });
+  const folder = folderFor(state.sel.kind === "project" ? state.sel.key : null);
+  // One primary action at a time: while a run is going, its dialog owns it.
+  const busy = state.runs.live.some((r) => r.status === "running");
+  const run = h("button", { type: "submit", class: busy ? "btn" : "btn primary", disabled: busy, title: busy ? "A run is in progress. Stop it or wait for it to finish." : null }, `${def.button} ▸`);
+  const sync = () => {
+    const host = usesUrl ? hostOf(input.value) : null;
+    const remote = host && !LOCAL.test(host);
+    confirmRow.hidden = !remote;
+    if (remote) document.getElementById("confirm-q").textContent = `${host} is not on this machine. Type its name to confirm you own it or may test it:`;
+  };
+  input.addEventListener("input", sync);
+  const form = h("form", { novalidate: true, "aria-label": "Start a run" }, input, run);
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    err.hidden = true;
+    run.disabled = true;
+    try {
+      const r = await api.post("/api/runs", { kind, repo: folder, url: usesUrl ? input.value : "", confirm: confirm.value, maxIterations: 5 });
+      await ctx.refresh();
+      set({ sel: { kind: "run", key: r.id, run: r } });
+    } catch (ex) {
+      err.textContent = ex.message;
+      err.hidden = false;
+      run.disabled = false;
+      if (ex.status === 428) confirm.focus();
+    }
+  });
+  const modes = KINDS.map((k) => h("button", { type: "button", class: "mode", "aria-pressed": String(k.kind === kind), onclick: () => { set({ mode: k.kind }); ctx.focusBar(); } }, k.label));
+  return h("div", { class: "bar" }, h("div", { class: "bar-inner" },
+    h("div", { class: "modes", role: "group", "aria-label": "What to run" }, modes, h("span", { class: "note" }, `${shortProject(folder) || "no folder"} · ${NOTES[kind]}`)),
+    form, confirmRow, err));
+}

package/src/ui/static/js/copy.js

@@ -1,79 +1,53 @@
 // Every user-facing sentence in one place, so the voice can be read and
-// proofed as a whole. Rules (voice.md): sentence case, "::" as connective,
-// no exclamation marks, verbs first on buttons, empty states name the
-// action that fills them, errors give the cause then the fix.
+// proofed as a whole. Rules: sentence case, "::" as connective, no
+// exclamation marks, verbs first on buttons, empty states name the action
+// that fills them, errors give the cause then the fix.
 
-export const TAGLINE = "Open-source security for the apps and AI systems you ship"; // README headline; display lines take no period
-
-export const SCREENS = {
-  overview: { title: "Overview", lede: "Where each project stands, from the reports and memory on this machine." },
-  findings: { title: "Findings", lede: "Every open finding in the latest report per project. Pick one to see what it means and how to fix it." },
-  run: { title: "Run", lede: "Scan, check dependencies, audit AI tooling, or let the agent fix things. Every diff waits for you. Nothing is pushed." },
-  history: { title: "History", lede: "Compare two scans of one project :: what is new, what got fixed, what is still open." },
-  deps: { title: "Dependencies", lede: "What your npm and Python packages can do, what changed, and what the install firewall let in." },
-  ai: { title: "AI tooling", lede: "Skills, MCP servers, hooks and rule files :: the grade, hidden content, and drift against penthera.lock." },
-  evidence: { title: "Evidence", lede: "Hashed, signable bundles for an auditor. Create one from the latest scan, verify any of them in one click." },
-  settings: { title: "Settings", lede: "For this session. Nothing here is written to disk except your theme choice." },
-};
+export const TAGLINE = "Open-source security for the apps and AI systems you ship"; // README headline
 
 export const START = {
-  welcome: "Welcome",
-  intro: "No reports yet. Start with a scan of something you own :: your localhost, a preview URL, or this repo. Each step writes a report into the reports folder, and this screen fills in.",
+  title: "Welcome",
+  intro: "No reports yet. Start with a scan of something you own :: your localhost, a preview URL, or this repo. Results land in the reports folder and this view fills in.",
   gate: "Only scan apps you own or have written permission to test.",
   steps: [
-    { title: "Scan your app", body: "TLS, headers, cookies, CORS, auth, exposed APIs and leaked secrets. About a minute.", kind: "scan", action: "Scan app" },
-    { title: "Check your dependencies", body: "What every npm package in the lockfile can do: install scripts, shell, network, obfuscated code.", kind: "deps", action: "Check dependencies" },
-    { title: "Audit your AI tooling", body: "Skills, MCP servers, hooks and rule files: hidden instructions, unpinned servers, wide permissions.", kind: "agents", action: "Audit AI tooling" },
+    { kind: "scan", title: "Scan your app", body: "TLS, headers, cookies, CORS, auth, exposed APIs and leaked secrets." },
+    { kind: "deps", title: "Check your dependencies", body: "What every npm and Python package can do: install scripts, shell, network, obfuscated code." },
+    { kind: "agents", title: "Audit your AI tooling", body: "Skills, MCP servers, hooks and rule files: hidden instructions, unpinned servers, wide permissions." },
   ],
-  demo: "Want to look around first? Stop this server and run",
+  demo: "To look around first, stop this server and run",
 };
 
-export const NEXT = {
-  heading: "What next?",
-  overview: [
-    { label: "Read the most serious finding", why: "what it means, how sure we are, the fix", go: ["findings"] },
-    { label: "Fix what can be fixed", why: "the agent proposes diffs, you approve each one", go: ["run", { kind: "loop" }] },
-    { label: "Compare with the last scan", why: "new, fixed, still open", go: ["history"] },
-    { label: "Create evidence for an auditor", why: "a hashed bundle plus the auditor report", go: ["evidence"] },
-  ],
-  scan: [
-    { label: "Read the findings", why: "start with the most serious one", go: ["findings"] },
-    { label: "Fix them with the agent", why: "you approve every diff", go: ["run", { kind: "loop" }] },
-    { label: "Compare with the previous scan", go: ["history"] },
-  ],
-  loop: [
-    { label: "Compare before and after", why: "what the loop fixed", go: ["history"] },
-    { label: "Create evidence for an auditor", go: ["evidence"] },
-    { label: "Back to the overview", go: ["overview"] },
-  ],
-  deps: [
-    { label: "See the capability diff", go: ["deps"] },
-    { label: "Back to the overview", go: ["overview"] },
-  ],
-  agents: [
-    { label: "See the grade and hidden content", go: ["ai"] },
-    { label: "Back to the overview", go: ["overview"] },
-  ],
-};
-
-export const RUN_KINDS = [
-  { kind: "scan", label: "Scan app", needs: "url-or-folder", button: "Run scan" },
-  { kind: "deps", label: "Check dependencies", needs: "folder", button: "Check dependencies" },
-  { kind: "agents", label: "Audit AI tooling", needs: "folder", button: "Audit AI tooling" },
-  { kind: "loop", label: "Fix loop", needs: "folder", button: "Run as agent" },
+export const KINDS = [
+  { kind: "scan", label: "Scan", button: "Scan", placeholder: "http://localhost:3000 (optional) :: the folder is the selected project" },
+  { kind: "deps", label: "Deps", button: "Check dependencies", placeholder: "reads package-lock.json, uv.lock, poetry.lock, .venv" },
+  { kind: "agents", label: "AI tooling", button: "Audit AI tooling", placeholder: "reads skills, MCP config, hooks and rule files" },
+  { kind: "loop", label: "Fix loop", button: "Run the fix loop", placeholder: "http://localhost:3000 (optional) :: every diff waits for you" },
 ];
 
+export const NOTES = {
+  scan: "Contacts only the URL's host while offline is on. A folder-only scan contacts nothing.",
+  deps: "Reads lockfiles and installed packages. No network.",
+  agents: "Read-only. No network.",
+  loop: "Offline, on a local branch. Every diff waits for you. Nothing is pushed.",
+};
+
 export const EMPTY = {
-  findingsNone: "No findings in the reports folder yet. Run a scan from Run, or write one with penthera <url> -o reports/scan.json.",
-  findingsFiltered: (which) => `Nothing matches :: ${which} hide${which.includes(",") ? "" : "s"} the rest. Clear them to see every finding.`,
-  history: "No project has two scans yet. Scan the same target again and the comparison appears here.",
-  deps: "No dependency report yet. Run Check dependencies, or penthera deps -o reports/deps.json.",
-  ai: "No AI tooling report yet. Run Audit AI tooling, or penthera agents . -o reports/agents.json.",
-  evidence: "No bundles yet. Create one from the latest scan of a project above.",
-  memory: "No memory yet. The agent loop and scans with --memory write it to ~/.penthera/memory.",
-  pastRuns: "No loop runs in the reports folder yet.",
+  projects: "No projects yet. Run a scan to add one.",
+  runs: "No runs yet.",
+  findings: "No open findings in the latest scan.",
+  filtered: "Nothing matches the filter. Press Esc to clear it.",
+  deps: "No dependency report yet. Run Deps from the bar below.",
+  ai: "No AI tooling report yet. Run AI tooling from the bar below.",
+  evidence: "No bundles yet. Create one from the latest scan.",
+  memory: "No memory yet. The fix loop and scans with --memory write it.",
+  changes: "No fixes applied yet. Run the fix loop to apply one.",
 };
 
 export const ERR = {
   session: "The session ended. Restart penthera ui and open the new one-time link it prints.",
 };
+
+export const KEYS = [
+  ["/", "search findings"], ["j k", "next / previous finding"], ["[ ]", "toggle side panels"],
+  ["y n q", "apply, skip, stop a diff"], ["Esc", "close the detail"],
+];

package/src/ui/static/js/dom.js

@@ -54,22 +54,6 @@ export function put(el, ...children) {
   return el;
 }
 
-/**
- * A section as a window: pinstriped title bar with a close box, the title
- * centred on its plate, optional metadata on the right (attrs.meta).
- */
-export function panel(title, attrs, ...children) {
-  const id = `p-${Math.random().toString(36).slice(2, 9)}`;
-  return h("section", { class: ["panel", attrs?.class], "aria-labelledby": id },
-    h("div", { class: "panel-bar" },
-      h("span", { class: "box", "aria-hidden": "true" }),
-      h("h2", { class: "panel-h", id }, title),
-      attrs?.meta ? h("span", { class: "panel-meta" }, attrs.meta) : null,
-      h("span", { class: "grip", "aria-hidden": "true" }),
-    ),
-    h("div", { class: "panel-body" }, ...children));
-}
-
 export const sevClass = (sev) => `sev sev-${sev || "info"}`;
 export const sevBadge = (sev) => h("span", { class: sevClass(sev) }, sev || "info");
 
@@ -96,25 +80,3 @@ export function diffBlock(diff) {
   }
   return pre;
 }
-
-/** A figure caption under a chart: what it is, where the numbers came from. */
-export function fig(left, right = "") {
-  return h("p", { class: "fig" }, h("span", {}, left), h("span", {}, right));
-}
-
-/** The CLI's "What next?" block: numbered choices that navigate. */
-export function whatNext(items, go, heading = "What next?") {
-  return h("section", { class: "next", "aria-label": heading },
-    h("h2", {}, heading),
-    h("ol", {}, items.map((it) => h("li", {},
-      h("button", { type: "button", onclick: () => go(...it.go) }, it.label),
-      it.why ? h("span", { class: "why" }, `:: ${it.why}`) : null,
-    ))));
-}
-
-/** A window inside the window: pinstriped title bar, close and zoom boxes. */
-export function subwin(title, attrs, ...children) {
-  return h("section", { class: ["subwin", attrs?.class], "aria-label": title },
-    h("div", { class: "titlebar" }, h("span", { class: "box close", "aria-hidden": "true" }), h("span", { class: "title" }, title), h("span", { class: "box zoom", "aria-hidden": "true" })),
-    ...children);
-}

package/src/ui/static/js/left.js

@@ -0,0 +1,83 @@
+// Left sidebar: brand, "+ New scan", projects with their grade, runs grouped
+// by project (like the session list in Claude Code), and the footer gear.
+import { h, s, clear } from "./dom.js";
+import { state, set, projectKeys, projectOf } from "./state.js";
+import { ago, shortProject } from "./format.js";
+import { EMPTY } from "./copy.js";
+
+const KIND_LABEL = { scan: "scan", deps: "deps", agents: "AI tooling", loop: "fix loop" };
+
+export function renderLeft(el, { onNewScan, toggleLeft, theme }) {
+  const projects = state.overview?.projects || [];
+  const keys = projectKeys();
+  const totalOpen = projects.reduce((n, p) => n + p.open, 0);
+
+  const item = (attrs, ...kids) => h("button", { type: "button", class: "item", ...attrs }, ...kids);
+  const current = (kind, key) => String(state.sel.kind === kind && (key == null || state.sel.key === key));
+
+  const projectList = h("ul", { class: "side-list", "aria-label": "Projects" },
+    h("li", {}, item({ "aria-current": current("all"), onclick: () => set({ sel: { kind: "all", key: null } }) },
+      h("span", { class: "grade" }, "∑"), h("span", { class: "name" }, "All projects"), h("span", { class: "count" }, String(totalOpen)),
+      h("span", { class: "sub" }, `${projects.length} scanned · ${totalOpen} open`))),
+    keys.map((key) => {
+      const p = projectOf(key);
+      return h("li", {}, item({ "aria-current": current("project", key), title: key, onclick: () => set({ sel: { kind: "project", key } }) },
+        h("span", { class: `grade grade-${p?.grade || "x"}` }, p ? p.grade : "·"),
+        h("span", { class: "name" }, shortProject(key)),
+        h("span", { class: "count" }, p ? String(p.open) : ""),
+        h("span", { class: "sub" }, p ? `${p.mode || "scan"} · ${ago(p.lastScan)}` : "not scanned yet")));
+    }),
+  );
+  if (!keys.length) projectList.append(h("li", { class: "group-h" }, EMPTY.projects));
+
+  // Runs: live ones from this session first, then past loop runs, grouped by project.
+  const runs = [
+    ...state.runs.live.map((r) => ({ live: true, id: r.id, kind: r.kind, project: r.repo || r.url, status: r.status, at: r.startedAt, run: r })),
+    ...state.runs.past.map((l, i) => ({ live: false, id: `past-${i}`, kind: "loop", project: l.target.repo || l.target.url, status: l.stopReason, at: l.startedAt, past: l })),
+  ];
+  const groups = new Map();
+  for (const r of runs) {
+    const k = r.project || "unknown";
+    if (!groups.has(k)) groups.set(k, []);
+    groups.get(k).push(r);
+  }
+  const runList = h("ul", { class: "side-list", "aria-label": "Runs" });
+  for (const [project, list] of groups) {
+    runList.append(h("li", { class: "group-h", title: project }, shortProject(project)));
+    for (const r of list.slice(0, 6)) {
+      const kindSel = r.live ? "run" : "past";
+      const sum = r.past ? `${r.past.totals.verified} verified · ${r.past.findings.initial ?? "?"} → ${r.past.findings.final ?? "?"}` : r.status;
+      runList.append(h("li", {}, item({
+        "aria-current": current(kindSel, r.id),
+        onclick: () => set({ sel: { kind: kindSel, key: r.id, run: r.run || null, past: r.past || null } }),
+      },
+      h("span", { class: `dot ${r.live && r.status === "running" ? "live" : r.live ? "done" : ""}`, "aria-hidden": "true" }),
+      h("span", { class: "name" }, KIND_LABEL[r.kind] || r.kind),
+      h("span", { class: "count muted" }, ago(r.at)),
+      h("span", { class: "sub" }, sum || ""))));
+    }
+  }
+  if (!runs.length) runList.append(h("li", { class: "group-h" }, EMPTY.runs));
+
+  clear(el).append(
+    h("div", { class: "brand" },
+      s("svg", { width: 14, height: 16, viewBox: "0 0 7 8", "aria-hidden": "true", "shape-rendering": "crispEdges" },
+        s("path", { class: "px", d: "M0 0h5v1h1v1h1v2H6v1H5v1H2v2H0zM2 2v2h3V2z" })),
+      h("span", { class: "grow" }, "penthera"),
+      h("button", { type: "button", class: "icon", "aria-label": "Hide the sidebar ([)", title: "Hide the sidebar  [", onclick: toggleLeft }, "⇤"),
+    ),
+    h("button", { type: "button", class: "btn new-scan", onclick: onNewScan }, "+ New scan"),
+    h("div", { class: "side-label" }, h("span", {}, "Projects")),
+    projectList,
+    h("div", { class: "side-label" }, h("span", {}, "Runs")),
+    runList,
+    h("div", { class: "side-foot" },
+      h("button", { type: "button", class: "icon", "aria-label": "Settings", title: "Settings", "aria-pressed": String(state.right === "settings"),
+        onclick: () => set({ right: state.right === "settings" ? "cards" : "settings", openRight: true }) }, "⚙"),
+      h("button", { type: "button", class: "icon", "aria-label": `Theme: ${theme.get()}. Switch`, title: "Switch theme", onclick: () => { theme.set(theme.get() === "light" ? "dark" : "light"); renderLeft(el, { onNewScan, toggleLeft, theme }); } }, theme.get() === "light" ? "◑" : "◐"),
+      h("span", { class: "grow" }),
+      h("span", {}, state.meta?.demo ? "demo · " : ""),
+      h("span", {}, `v${state.meta?.version || ""}`),
+    ),
+  );
+}