penthera 1.7.0 → 1.8.0

package/src/ui/static/js/charts.js

@@ -144,24 +144,77 @@ export function bigGrade(letter) {
   return h("pre", { class: `grade-big grade-${letter}`, "aria-hidden": "true" }, rows.join("\n"));
 }
 
-// The CLI's wordmark (src/cli/ansi.js LOGO_BIG), ANSI Shadow block letters.
-const LOGO = [
-  "██████╗ ███████╗███╗   ██╗████████╗██╗  ██╗███████╗██████╗  █████╗ ",
-  "██╔══██╗██╔════╝████╗  ██║╚══██╔══╝██║  ██║██╔════╝██╔══██╗██╔══██╗",
-  "██████╔╝█████╗  ██╔██╗ ██║   ██║   ███████║█████╗  ██████╔╝███████║",
-  "██╔═══╝ ██╔══╝  ██║╚██╗██║   ██║   ██╔══██║██╔══╝  ██╔══██╗██╔══██║",
-  "██║     ███████╗██║ ╚████║   ██║   ██║  ██║███████╗██║  ██║██║  ██║",
-  "╚═╝     ╚══════╝╚═╝  ╚═══╝   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝",
-];
-
-/** The wordmark: solid blocks in #0000ed, the box-drawing shadow in a second tone. */
-export function wordmark() {
-  const pre = h("pre", { class: "wordmark", "aria-hidden": "true" });
-  for (const row of LOGO) {
-    for (const run of row.match(/█+|[^█]+/g)) pre.append(h("span", { class: run[0] === "█" ? "fill" : "edge" }, run));
-    pre.append("\n");
-  }
-  return pre;
+// ── The halftone field ──────────────────────────────────────────────────
+//
+// The one strange element: a field of halftone dots whose density is the
+// open risk. A clean project shows plain paper; a critical one is dark with
+// dots. The blobs are placed by a seed (the project key), so each project
+// keeps its own shape between visits. Drawn once per size or theme change,
+// never animated.
+
+function seeded(str) {
+  let a = 2166136261;
+  for (const c of String(str)) a = Math.imul(a ^ c.charCodeAt(0), 16777619);
+  return () => {
+    a = (a + 0x6d2b79f5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/** Risk 0 (nothing open) to 4 (something critical), from severity counts. */
+export function riskLevel(counts) {
+  if (!counts) return 0;
+  if (counts.critical) return 4;
+  if (counts.high) return 3;
+  if (counts.medium) return 2;
+  if (counts.low || counts.info) return 1;
+  return 0;
+}
+
+export function halftone({ risk = 0, seed = "penthera", label = "" } = {}) {
+  const canvas = h("canvas", { class: "halftone", "aria-hidden": "true", dataset: { risk: String(risk) } });
+  const wrap = h("div", { class: "halftone-wrap", role: label ? "img" : null, "aria-label": label || null }, canvas);
+  if (!risk) return wrap;
+  const rnd = seeded(seed);
+  const blobs = Array.from({ length: 2 + risk }, () => ({ x: rnd(), y: rnd(), r: 0.12 + rnd() * 0.22 }));
+  const strength = [0, 0.35, 0.55, 0.75, 1][risk];
+  const draw = () => {
+    if (!canvas.isConnected) { ro.disconnect(); mo.disconnect(); return; }
+    const w = wrap.clientWidth;
+    const hgt = wrap.clientHeight;
+    if (!w || !hgt) return;
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.round(w * dpr);
+    canvas.height = Math.round(hgt * dpr);
+    const g = canvas.getContext("2d");
+    g.scale(dpr, dpr);
+    g.clearRect(0, 0, w, hgt);
+    g.fillStyle = getComputedStyle(canvas).color;
+    const cell = 6;
+    const span = Math.max(w, hgt);
+    for (let y = cell / 2; y < hgt; y += cell) {
+      for (let x = cell / 2; x < w; x += cell) {
+        let v = 0;
+        for (const b of blobs) {
+          const dx = (x - b.x * w) / (b.r * span);
+          const dy = (y - b.y * hgt) / (b.r * span);
+          v = Math.max(v, Math.exp(-(dx * dx + dy * dy) * 2.2));
+        }
+        const r = v * strength * cell * 0.48;
+        if (r < 0.45) continue;
+        g.beginPath();
+        g.arc(x, y, r, 0, Math.PI * 2);
+        g.fill();
+      }
+    }
+  };
+  const ro = new ResizeObserver(draw);
+  const mo = new MutationObserver(draw);
+  ro.observe(wrap);
+  mo.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+  return wrap;
 }
 
 /**
@@ -205,3 +258,31 @@ export function ganttChart(rows, scans, { width = 1100 } = {}) {
   });
   return svg;
 }
+
+const CONFIDENCE = [["confirmed", "Confirmed"], ["likely", "Likely"], ["needs-human-review", "Needs a person"]];
+
+/**
+ * Triage matrix: severity down, how sure across. Each cell is a button with
+ * its count; the cell is filled with the severity's pattern when it has
+ * findings, so the dangerous, certain corner reads first. Picking a cell
+ * filters the list; picking it again clears the filter.
+ */
+export function matrix(findings, current, onPick) {
+  const table = h("table", { class: "matrix" });
+  table.append(h("thead", {}, h("tr", {}, h("th", { scope: "col" }, h("span", { class: "sr" }, "Severity")), CONFIDENCE.map(([, label]) => h("th", { scope: "col" }, label)))));
+  const body = h("tbody");
+  for (const sev of SEVERITIES) {
+    const row = h("tr", {}, h("th", { scope: "row" }, h("span", { class: `sev sev-${sev}` }, sev)));
+    for (const [conf, label] of CONFIDENCE) {
+      const n = findings.filter((f) => f.severity === sev && (f.confidence || "likely") === conf).length;
+      const on = current && current.severity === sev && current.confidence === conf;
+      row.append(h("td", {}, h("button", {
+        type: "button", class: ["cell", n ? `fill-${sev}` : null], disabled: !n, "aria-pressed": String(Boolean(on)),
+        "aria-label": `${n} ${sev}, ${label.toLowerCase()}`, onclick: () => onPick(on ? null : { severity: sev, confidence: conf }),
+      }, h("span", { class: "n" }, n ? String(n) : "·"))));
+    }
+    body.append(row);
+  }
+  table.append(body);
+  return table;
+}

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

@@ -3,11 +3,12 @@
 // 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
+export const TAGLINE = "Your open-source cyber security agent"; // README headline
 
 export const START = {
   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.",
+  introSimple: "Nothing checked yet. Set up your project and run a first check: it takes a minute or two, and everything stays on this computer.",
   gate: "Only scan apps you own or have written permission to test.",
   steps: [
     { kind: "scan", title: "Scan your app", body: "TLS, headers, cookies, CORS, auth, exposed APIs and leaked secrets." },
@@ -18,10 +19,10 @@ export const START = {
 };
 
 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" },
+  { kind: "scan", label: "Scan", title: "Scan a site or folder", button: "Scan" },
+  { kind: "deps", label: "Deps", title: "Check dependencies", button: "Check dependencies" },
+  { kind: "agents", label: "AI tooling", title: "Audit AI tooling", button: "Audit AI tooling" },
+  { kind: "loop", label: "Fix loop", title: "Run the fix loop", button: "Run the fix loop" },
 ];
 
 export const NOTES = {
@@ -36,8 +37,10 @@ export const EMPTY = {
   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.",
+  deps: "No dependency report yet. Choose Scan ▸ Check dependencies in the menu bar.",
+  ai: "No AI tooling report yet. Choose Scan ▸ Audit AI tooling in the menu bar.",
+  inspector: "Pick a finding to read it here in plain words, with its evidence and the fix.",
+  history: "No runs for this project yet.",
   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.",
@@ -48,6 +51,62 @@ export const ERR = {
 };
 
 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"],
+  ["n", "new scan"], ["/", "search findings"], ["j k", "next / previous finding"], ["1-5", "switch tab (Advanced)"],
+  ["[ ]", "toggle the side windows"], ["y n q", "apply, skip, stop a diff"], ["Esc", "close the detail or a menu"],
 ];
+
+export const ABOUT = {
+  line: "Your open-source cyber security agent: the security review you never had time for. This window reads your reports and runs scans on this machine.",
+  license: "MIT",
+  type: "Departure Mono by Helena Zhang (OFL)",
+  local: "Bound to 127.0.0.1. Nothing on this page loads from another host.",
+};
+
+// ── Simple mode: the same data, in words a non-programmer uses ──────────
+
+/** Severity as a word anyone reads the same way. */
+export const SEV_WORD = { critical: "Critical", high: "Serious", medium: "Worth fixing", low: "Minor", info: "Note" };
+
+export const SIMPLE_KINDS = [
+  { kind: "scan", title: "Check my app", body: "Looks at your app and code for security problems. Takes a minute or two.", button: "Check my app" },
+  { kind: "loop", title: "Fix problems for me", body: "Proposes a fix for each problem it knows how to fix. You approve every change; nothing is published.", button: "Start fixing" },
+];
+
+export const SETUP = {
+  steps: 3,
+  welcome: {
+    title: "Welcome to Penthera",
+    body: [
+      "Penthera checks the apps you build for security problems, explains each one in plain words and can fix many of them for you.",
+      "Everything runs on this computer. Nothing is sent anywhere, and no change is made without your OK.",
+    ],
+    gate: "Only check apps you own or have written permission to test.",
+  },
+  mode: {
+    title: "How much do you want to see?",
+    simple: { title: "Simple", body: "Is my app safe, and what do I do about it? Plain words, one list, one button at a time." },
+    advanced: { title: "Advanced", body: "Everything: dependencies, AI tooling, run history, evidence for auditors, confidence and the raw diffs." },
+    note: "You can switch any time in the Penthera menu.",
+  },
+  project: {
+    title: "Your project",
+    folder: "The folder with your app's code",
+    folderNote: "Penthera reads only this folder. To add another, start it with penthera ui --project <folder>.",
+    url: "Where your app runs (optional)",
+    urlNote: "For example the address you open while building it. Leave it empty to check only the code.",
+    check: "Check my app now",
+    skip: "Skip, look around first",
+  },
+};
+
+/** One sentence that answers "can I ship?" for a project or all of them. */
+export function verdict({ counts, open, top, scanned, when }) {
+  if (!scanned) return { text: "Not checked yet.", sub: "Run a first check to see where you stand." };
+  const c = counts?.critical || 0;
+  const hi = counts?.high || 0;
+  const from = `From the check ${when}.`;
+  if (c) return { level: "stop", text: `Not ready to ship: ${c === 1 ? "1 critical problem" : `${c} critical problems`} to fix first.`, sub: from, top };
+  if (hi) return { level: "fix", text: `Fix ${hi === 1 ? "1 serious problem" : `${hi} serious problems`} before you ship.`, sub: from, top };
+  if (open) return { level: "ok", text: `Nothing blocks a launch. ${open === 1 ? "1 smaller thing is" : `${open} smaller things are`} worth fixing.`, sub: from, top };
+  return { level: "clear", text: "Nothing open. The last check found no problems.", sub: from };
+}

package/src/ui/static/js/dialog.js

@@ -0,0 +1,152 @@
+// Floating windows: the New scan dialog and About. A native <dialog> opened
+// with showModal(), so focus is trapped, Esc closes it and the page behind is
+// inert. Focus returns to whatever opened it.
+import { h, announce } from "./dom.js";
+import { api } from "./api.js";
+import { state, set, folderFor, liveRun, simple } from "./state.js";
+import { shortProject } from "./format.js";
+import { KINDS, NOTES, ABOUT, SIMPLE_KINDS } 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; }
+}
+
+/** Open a modal window. Returns { el, close }. */
+export function openWindow({ title, label, body, wide = false, striped = false }) {
+  const opener = document.activeElement;
+  const dlg = h("dialog", { class: ["window", wide ? "wide" : null], "aria-label": label || title });
+  const close = () => { if (dlg.open) dlg.close(); };
+  dlg.append(
+    h("div", { class: ["win-bar", striped ? "striped" : null] },
+      h("button", { type: "button", class: "icon close-box", "aria-label": "Close (Esc)", title: "Close  Esc", onclick: close }),
+      h("span", { class: "title" }, title)),
+    h("div", { class: "window-body" }, body),
+  );
+  dlg.addEventListener("close", () => {
+    dlg.remove();
+    if (opener instanceof HTMLElement && opener.isConnected) opener.focus({ preventScroll: true });
+  });
+  // A click on the backdrop (the dialog element itself, outside its box) closes it.
+  dlg.addEventListener("click", (e) => {
+    if (e.target !== dlg) return;
+    const r = dlg.getBoundingClientRect();
+    if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) close();
+  });
+  document.body.append(dlg);
+  dlg.showModal();
+  return { el: dlg, close };
+}
+
+/**
+ * New scan: what to run, on which folder, against which URL. The hostname of
+ * a URL that is not on this machine must be typed back before the run starts.
+ */
+export function newScan(ctx, { kind = "scan", project = null } = {}) {
+  const selected = project ?? (state.sel.kind === "project" ? state.sel.key : null);
+  const folders = state.meta?.projects || [];
+  const busy = liveRun();
+
+  const easy = simple();
+  const kinds = easy ? SIMPLE_KINDS : KINDS.map((k) => ({ ...k, body: NOTES[k.kind] }));
+  if (!kinds.some((k) => k.kind === kind)) kind = kinds[0].kind;
+  const radios = kinds.map((k) => {
+    const input = h("input", { type: "radio", name: "kind", value: k.kind, checked: k.kind === kind });
+    return h("label", { class: "choice" }, input,
+      h("span", {}, h("span", { class: "t1" }, k.title), h("span", { class: "note prose" }, k.body)));
+  });
+  const kindNow = () => radios.map((r) => r.querySelector("input")).find((i) => i.checked)?.value || "scan";
+
+  const folder = h("select", { id: "ns-folder", "aria-describedby": "ns-folder-note" },
+    folders.map((f) => h("option", { value: f, selected: f === folderFor(selected) }, shortProject(f))));
+  const url = h("input", { type: "text", id: "ns-url", autocomplete: "off", spellcheck: "false", placeholder: "http://localhost:3000" });
+  if (selected && /^https?:/.test(selected)) url.value = selected;
+  const urlRow = h("div", { class: "field" }, h("label", { for: "ns-url" }, easy ? "Where your app runs " : "Running app URL ", h("span", { class: "muted" }, "(optional)")), url);
+
+  const confirm = h("input", { type: "text", id: "ns-confirm", autocomplete: "off", spellcheck: "false" });
+  const confirmQ = h("label", { for: "ns-confirm", class: "prose" });
+  const confirmRow = h("div", { class: "field confirm", hidden: true }, confirmQ, confirm);
+
+  const offline = h("input", { type: "checkbox", id: "ns-offline", checked: state.meta?.settings?.offline !== false });
+  offline.addEventListener("change", async () => {
+    const s = await api.post("/api/settings", { offline: offline.checked }).catch(() => null);
+    if (!s) { offline.checked = !offline.checked; return; }
+    state.meta.settings = s;
+    set({ meta: state.meta });
+    announce(`Offline ${s.offline ? "on" : "off"}`);
+  });
+
+  const err = h("p", { class: "err", role: "alert", hidden: true });
+  const start = h("button", { type: "submit", class: "btn primary", disabled: Boolean(busy) });
+  const cancel = h("button", { type: "button", class: "btn" }, "Cancel");
+
+  const sync = () => {
+    const k = kindNow();
+    const def = kinds.find((x) => x.kind === k);
+    const usesUrl = k === "scan" || k === "loop";
+    urlRow.hidden = !usesUrl;
+    const host = usesUrl ? hostOf(url.value) : null;
+    const remote = Boolean(host && !LOCAL.test(host));
+    confirmRow.hidden = !remote;
+    if (remote) confirmQ.textContent = `${host} is not on this machine. Type its name to confirm you own it or may test it:`;
+    start.textContent = `${def.button} ▸`;
+  };
+  for (const r of radios) r.querySelector("input").addEventListener("change", sync);
+  url.addEventListener("input", sync);
+
+  const form = h("form", { class: "form", novalidate: true },
+    h("fieldset", {}, h("legend", {}, easy ? "What do you want to do?" : "What to run"), h("div", { class: "choices" }, radios)),
+    h("div", { class: "field" }, h("label", { for: "ns-folder" }, easy ? "Your app's folder" : "Project folder"), folders.length ? folder : h("p", { class: "muted" }, "No folders. Start penthera ui with --project <dir>."),
+      h("p", { id: "ns-folder-note", class: "muted prose" }, "Runs read and write only inside this folder.")),
+    urlRow,
+    confirmRow,
+    h("label", { class: "check" }, offline, h("span", {}, h("span", { class: "t1" }, "Offline"), h("span", { class: "note prose" }, " :: contact only the target. Applies to every run started here."))),
+    busy ? h("p", { class: "muted prose" }, "A run is in progress. Stop it or wait for it to finish first.") : null,
+    err,
+    h("div", { class: "actions" }, h("span", { class: "grow muted" }, "Only scan what you own or may test."), cancel, start),
+  );
+  const win = openWindow({ title: easy ? "Check my app" : "New scan", body: form });
+  cancel.addEventListener("click", win.close);
+  sync();
+
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    err.hidden = true;
+    start.disabled = true;
+    const k = kindNow();
+    const usesUrl = k === "scan" || k === "loop";
+    try {
+      const r = await api.post("/api/runs", { kind: k, repo: folder.value || folderFor(selected), url: usesUrl ? url.value : "", confirm: confirm.value, maxIterations: 5 });
+      win.close();
+      await ctx.refresh();
+      set({ sel: { kind: "run", key: r.id, run: r } });
+    } catch (ex) {
+      err.textContent = ex.message;
+      err.hidden = false;
+      start.disabled = false;
+      if (ex.status === 428) confirm.focus();
+    }
+  });
+  queueMicrotask(() => (radios.find((r) => r.querySelector("input").checked)?.querySelector("input"))?.focus());
+}
+
+/** About Penthera: the wordmark, the version and what this page is. */
+export function about() {
+  const body = h("div", { class: "about" },
+    h("span", { class: "logotype xl", role: "img", "aria-label": "Penthera" }),
+    h("p", { class: "prose" }, ABOUT.line),
+    h("dl", { class: "kv" },
+      h("dt", {}, "version"), h("dd", {}, `v${state.meta?.version || ""}${state.meta?.demo ? " · demo data" : ""}`),
+      h("dt", {}, "license"), h("dd", {}, ABOUT.license),
+      h("dt", {}, "type"), h("dd", {}, ABOUT.type)),
+    h("p", { class: "muted prose" }, ABOUT.local),
+  );
+  const win = openWindow({ title: "About Penthera", body });
+  const ok = h("button", { type: "button", class: "btn primary", onclick: win.close }, "OK");
+  body.append(h("div", { class: "actions" }, ok));
+  ok.focus();
+}
+

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

@@ -1,83 +1,46 @@
-// 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";
+// The projects window: "New scan…", then every project with its grade, open
+// findings and last scan, "All projects" first. Runs live with their project
+// (History tab) and in the menu bar while one is going; a project with a run
+// in progress shows a blinking half-tone square.
+import { h, clear } from "./dom.js";
 import { state, set, projectKeys, projectOf } from "./state.js";
-import { ago, shortProject } from "./format.js";
+import { ago, shortProject, plural } 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 }) {
+export function renderLeft(el, ctx) {
   const projects = state.overview?.projects || [];
   const keys = projectKeys();
   const totalOpen = projects.reduce((n, p) => n + p.open, 0);
+  const running = new Set(state.runs.live.filter((r) => r.status === "running").flatMap((r) => [r.repo, r.url]).filter(Boolean));
+  const viewing = state.sel.kind === "all" || state.sel.kind === "project";
 
   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 current = (key) => String(viewing && (key == null ? state.sel.kind === "all" : 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 } }) },
+  const list = h("ul", { class: "side-list", "aria-label": "Projects" },
+    h("li", {}, item({ "aria-current": current(null), 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`))),
+      h("span", { class: "sub" }, `${plural(projects.length, "project")} · ${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 } }) },
+      return h("li", {}, item({ "aria-current": current(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) : ""),
+        running.has(key) ? h("span", { class: "dot live", role: "img", "aria-label": "a run is in progress" }) : 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));
+  if (!keys.length) list.append(h("li", { class: "group-h" }, EMPTY.projects));
 
   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("div", { class: "win-bar" },
+      h("span", { class: "title" }, "Projects"),
       h("span", { class: "grow" }),
-      h("span", {}, state.meta?.demo ? "demo · " : ""),
-      h("span", {}, `v${state.meta?.version || ""}`),
+      h("button", { type: "button", class: "icon", "aria-label": "Hide the projects window ([)", title: "Hide  [", onclick: ctx.toggleLeft }, "⇤"),
+    ),
+    h("div", { class: "pane-body" },
+      h("button", { type: "button", class: "btn new-scan", onclick: () => ctx.newScan() }, "New scan…", h("kbd", {}, "n")),
+      list,
     ),
   );
 }