penthera 1.7.0 → 1.8.0

package/src/ui/static/js/right.js

@@ -1,11 +1,11 @@
-// The right panel: stacked cards (environment, memory, dependencies, AI
-// tooling, evidence, changes), or one finding's detail, or settings.
-import { h, clear, empty, sevBadge, diffBlock, announce } from "./dom.js";
+// The inspector: one finding in plain words with its evidence and fix, or
+// settings, or a short note on what goes here. Nothing else lives on the right.
+import { h, clear, empty, sevBadge, diffBlock } from "./dom.js";
 import { api } from "./api.js";
-import { state, set } from "./state.js";
-import { bars, SHADE } from "./charts.js";
-import { ago, shortProject, plural, pct } from "./format.js";
-import { EMPTY, KEYS } from "./copy.js";
+import { state, set, simple, countsInView, currentProject } from "./state.js";
+import { halftone, riskLevel } from "./charts.js";
+import { SEVERITIES } from "./format.js";
+import { EMPTY, KEYS, SEV_WORD } from "./copy.js";
 
 let seq = 0;
 
@@ -13,188 +13,33 @@ export async function renderRight(el, ctx) {
   const my = ++seq;
   if (state.right === "finding" && state.finding) return findingView(el, ctx, my);
   if (state.right === "settings") return settingsView(el, ctx, my);
-  return cardsView(el, ctx, my);
+  return emptyView(el, ctx);
 }
 
-function card(title, aside, open, ...body) {
-  return h("details", { class: "card", open: open || null },
-    h("summary", {}, h("span", {}, title), aside ? h("span", { class: "aside" }, aside) : null),
-    h("div", { class: "card-body" }, ...body));
-}
-
-function head(title, ctx, extra) {
-  return h("div", { class: "detail-head" },
-    h("span", { class: "t1" }, title),
+function head(title, ctx, extra, closable = true) {
+  return h("div", { class: "win-bar" },
+    closable ? h("button", { type: "button", class: "icon close-box", "aria-label": "Close (Esc)", title: "Close  Esc", onclick: () => set({ right: "none", finding: null }) }) : null,
+    h("span", { class: "title" }, title),
     h("span", { class: "grow" }),
     extra || null,
-    h("button", { type: "button", class: "icon", "aria-label": "Close (Esc)", title: "Close  Esc", onclick: () => set({ right: "cards", finding: null }) }, "×"));
-}
-
-// ── Cards ───────────────────────────────────────────────────────────────
-
-async function cardsView(el, ctx, my) {
-  const project = state.sel.kind === "project" ? state.sel.key : state.sel.kind === "past" ? state.sel.past?.target?.repo : state.sel.run?.repo || null;
-  const [env, mem, deps, ai, ev, settings] = await Promise.all([
-    api.get(`/api/env?project=${encodeURIComponent(project || "")}`),
-    api.get("/api/memory"), api.get("/api/deps"), api.get("/api/ai"), api.get("/api/evidence"), api.get("/api/settings"),
-  ]).catch((e) => { clear(el).append(h("p", { class: "pad error" }, e.message)); return []; });
-  if (my !== seq || !env) return;
-
-  clear(el).append(h("div", { class: "cards" },
-    envCard(env, settings, project, ctx),
-    memoryCard(mem.projects),
-    depsCard(deps),
-    aiCard(ai),
-    evidenceCard(ev.bundles, project, ctx),
-    changesCard(env, project),
-  ));
-}
-
-function envCard(env, settings, project, ctx) {
-  const sw = h("button", { type: "button", class: "switch", role: "switch", "aria-checked": String(settings.offline) }, h("span", {}, "Offline"), h("span", { class: "state" }, settings.offline ? "on" : "off"));
-  sw.addEventListener("click", async () => {
-    const s = await api.post("/api/settings", { offline: sw.getAttribute("aria-checked") !== "true" });
-    sw.setAttribute("aria-checked", String(s.offline));
-    sw.lastChild.textContent = s.offline ? "on" : "off";
-    announce(`Offline ${s.offline ? "on" : "off"}`);
-    ctx.refreshMeta?.();
-  });
-  return card("Environment", settings.offline ? "offline" : "online", true,
-    h("dl", { class: "kv" },
-      h("dt", {}, "folder"), h("dd", {}, env.folder || (project ? "a URL target" : state.meta?.projects?.[0] || "-")),
-      h("dt", {}, "branch"), h("dd", {}, env.branch ? `${env.branch}${env.head ? ` @ ${env.head}` : ""}` : "-"),
-      h("dt", {}, "bound to"), h("dd", {}, `${location.host}, no network`),
-    ),
-    sw,
-    h("p", { class: "muted" }, settings.offline ? "Scans started here contact only their target." : "Scans may also contact recon sources and fetch the Retire.js database."),
-    env.hosts.length ? h("div", {},
-      h("p", { class: "label" }, "Hosts the last scan contacted"),
-      h("ul", { class: "mini" }, env.hosts.map((x) => h("li", {}, h("span", { class: x.thirdParty ? "t1" : "ok" }, x.thirdParty ? "3P" : "OK"), h("span", { class: "grow" }, x.host), h("span", { class: "muted" }, String(x.requests))))),
-      env.blocked.length ? h("ul", { class: "mini" }, env.blocked.map((x) => h("li", {}, h("span", { class: "muted" }, "--"), h("span", { class: "grow muted" }, `${x.host} (blocked)`)))) : null,
-    ) : null,
-  );
-}
-
-function memoryCard(projects) {
-  if (!projects.length) return card("Memory", "", false, empty(EMPTY.memory));
-  const recipes = new Map();
-  for (const p of projects) for (const r of p.recipes) {
-    const c = recipes.get(r.recipe) || { verified: 0, failed: 0 };
-    c.verified += r.verified;
-    c.failed += r.failed;
-    recipes.set(r.recipe, c);
-  }
-  const broken = projects.filter((p) => p.chain !== "ok");
-  const ttf = projects.map((p) => p.medianTimeToFixDays).filter((x) => x != null);
-  return card("Memory", broken.length ? `${broken.length} broken` : "chain ok", false,
-    h("dl", { class: "kv" },
-      h("dt", {}, "chain"), h("dd", { class: broken.length ? "bad" : "ok" }, broken.length ? `[!] broken in ${plural(broken.length, "project")} :: ignored there` : "[OK] sha-256 hash chain"),
-      h("dt", {}, "events"), h("dd", {}, String(projects.reduce((n, p) => n + p.events, 0))),
-      h("dt", {}, "fixes"), h("dd", {}, `${projects.reduce((n, p) => n + p.verifiedFixes, 0)} verified · ${projects.reduce((n, p) => n + p.failedFixes, 0)} failed`),
-      h("dt", {}, "time to fix"), h("dd", {}, ttf.length ? `median ${Math.min(...ttf)}-${Math.max(...ttf)} days` : "-"),
-    ),
-    h("p", { class: "label" }, "Recipe success"),
-    bars([...recipes].map(([recipe, r]) => ({ label: recipe, value: r.verified })), { width: 10 }),
-    h("p", { class: "muted" }, [...recipes].map(([recipe, r]) => `${recipe} ${pct(r.verified / Math.max(1, r.verified + r.failed))}`).join(" · ")),
-  );
+    h("button", { type: "button", class: "icon", "aria-label": "Hide the inspector (])", title: "Hide the inspector  ]", onclick: ctx.toggleRight }, "⇥"));
 }
 
-const CAP_SEV = { "install-scripts": "high", obfuscated: "high", "ai-config-write": "critical", "ai-cli-invoke": "critical", "token-harvest": "critical" };
-
-function depsCard(d) {
-  const l = d.latest;
-  if (!l) return card("Dependencies", "", false, empty(EMPTY.deps));
-  const diff = l.diff;
-  const gained = diff ? diff.upgraded.reduce((n, u) => n + u.gained.length, 0) + diff.added.reduce((n, a) => n + a.capabilities.length, 0) : 0;
-  const chip = (id, plus) => h("span", { class: `chip ${CAP_SEV[id] ? "inv" : ""}` }, `${plus ? "+" : ""}${id}`);
-  return card("Dependencies", `${l.ecosystem} · ${l.total} packages`, false,
-    h("dl", { class: "kv" },
-      h("dt", {}, "packages"), h("dd", {}, `${l.total} (${l.direct} direct) · ${l.lockfile}`),
-      h("dt", {}, "diff"), h("dd", {}, diff ? `+${diff.added.length} added · ~${diff.upgraded.length} upgraded · -${diff.removed.length} removed vs ${diff.base}` : "no base compared"),
-      h("dt", {}, "gained"), h("dd", {}, `${gained} capabilities`),
-      h("dt", {}, "typosquats"), h("dd", { class: l.typosquats.length ? "bad" : null }, l.typosquats.length ? l.typosquats.map((t) => `${t.name} ~ ${t.similarTo}`).join(", ") : "none"),
-    ),
-    diff ? h("ul", { class: "mini" },
-      diff.added.map((a) => h("li", { class: "stacked" }, h("span", {}, `+ ${a.name}@${a.version}`), h("span", { class: "chips" }, a.capabilities.slice(0, 4).map((c) => chip(c, true))))),
-      diff.upgraded.filter((u) => u.gained.length).map((u) => h("li", { class: "stacked" }, h("span", {}, `${u.name} ${u.from} → ${u.to}`), h("span", { class: "chips" }, u.gained.slice(0, 4).map((c) => chip(c, true)))))) : null,
-    h("p", { class: "label" }, "Capabilities in the tree"),
-    bars(Object.entries(l.capabilityCounts).filter(([, n]) => n > 0).sort((a, b) => b[1] - a[1]).slice(0, 6).map(([id, n]) => ({ label: id, value: n, ch: SHADE[CAP_SEV[id] || "low"] })), { width: 10 }),
-    d.installs.length ? h("div", {},
-      h("p", { class: "label" }, "Install firewall"),
-      h("ul", { class: "mini" }, d.installs.slice(0, 5).map((i) => {
-        const deny = i.changes.some((c) => c.deny.length) || i.action === "refused";
-        return h("li", {}, h("span", { class: deny ? "bad" : i.clean ? "ok" : "t1" }, deny ? "REFUSED" : i.clean ? "CLEAN" : "APPROVED"), h("span", { class: "grow" }, i.specs.join(" ")), h("span", { class: "muted" }, ago(i.ts)));
-      }))) : null,
-  );
-}
+// ── Nothing selected ────────────────────────────────────────────────────
 
-function aiCard(d) {
-  const l = d.latest;
-  if (!l) return card("AI tooling", "", false, empty(EMPTY.ai));
-  const lock = l.lock || {};
-  const drift = (lock.changed || 0) + (lock.added || 0) + (lock.removed || 0);
-  return card("AI tooling", `grade ${l.grade}`, false,
-    h("div", { class: "head" }, h("span", { class: `grade lg grade-${l.grade}` }, l.grade), h("div", {}, h("div", { class: "t1" }, `score ${l.score}/100`), h("div", { class: "muted" }, `${d.history.map((x) => x.grade).join(" → ")} · ${ago(l.ts)}`))),
-    h("dl", { class: "kv" },
-      h("dt", {}, "penthera.lock"), h("dd", { class: drift ? "bad" : null }, lock.status === "missing" ? "not pinned" : drift ? `${lock.changed || 0} changed · ${lock.added || 0} new · ${lock.removed || 0} removed` : "no drift"),
-      h("dt", {}, "inventory"), h("dd", {}, `${l.inventory.skills || 0} skills · ${l.inventory.mcpServers || 0} MCP · ${l.inventory.hooks || 0} hooks`),
-      h("dt", {}, "hidden content"), h("dd", { class: l.hidden.length ? "bad" : "ok" }, l.hidden.length ? `${l.hidden.length} hits` : "none"),
+function emptyView(el, ctx) {
+  const counts = countsInView();
+  const risk = riskLevel(counts);
+  const said = counts ? SEVERITIES.filter((s) => counts[s]).map((s) => `${counts[s]} ${s}`).join(", ") : "";
+  clear(el).append(
+    head("Inspector", ctx, null, false),
+    h("div", { class: "pane-body detail inspector-empty" },
+      h("p", { class: "prose" }, EMPTY.inspector),
+      simple() ? null : h("section", {}, h("p", { class: "label" }, "Keys"), h("dl", { class: "kv" }, KEYS.flatMap(([k, v]) => [h("dt", {}, h("kbd", {}, k)), h("dd", {}, v)]))),
+      // The field: dark with dots when something serious is open, plain paper when nothing is.
+      halftone({ risk, seed: currentProject() || "all projects", label: risk ? `Open risk: ${said}` : "Nothing open" }),
+      h("p", { class: "muted field-note" }, risk ? "The darker this field, the more serious what is open." : "Nothing open: the field is clear."),
     ),
-    l.hidden.length ? h("ul", { class: "mini" }, l.hidden.slice(0, 4).map((x) => h("li", {}, sevBadge(x.severity), h("span", { class: "grow" }, `${x.title} · ${x.location || ""}`)))) : null,
-  );
-}
-
-function evidenceCard(bundles, project, ctx) {
-  const target = project || state.overview?.projects?.[0]?.key || "";
-  const msg = h("p", { class: "muted", "aria-live": "polite" });
-  const out = h("div");
-  const create = h("button", { type: "button", class: "btn", disabled: !target || !state.overview?.projects?.some((p) => p.key === target) }, "Create bundle");
-  create.addEventListener("click", async () => {
-    create.disabled = true;
-    msg.textContent = "Writing the bundle and hashing every file…";
-    try {
-      const r = await api.post("/api/evidence/create", { project: target });
-      const v = await api.post("/api/evidence/verify", { id: r.id });
-      msg.textContent = `${r.path} :: ${v.ok ? "verified" : "verification failed"}`;
-      ctx.redrawRight();
-    } catch (e) { msg.textContent = e.message; create.disabled = false; }
-  });
-  const list = h("ul", { class: "mini" }, bundles.map((b) => {
-    const res = h("span", { class: "muted" }, b.signed ? "signed" : "unsigned");
-    const btn = h("button", { type: "button", class: "btn small" }, "Verify");
-    btn.addEventListener("click", async () => {
-      btn.disabled = true;
-      res.textContent = "hashing…";
-      const r = await api.post("/api/evidence/verify", { id: b.id }).catch((e) => ({ ok: false, problems: [e.message], files: [] }));
-      res.textContent = r.ok ? "[OK]" : `[!] ${plural(r.problems.length, "problem")}`;
-      res.className = r.ok ? "ok" : "bad";
-      clear(out).append(r.ok ? null : h("pre", { class: "block" }, r.problems.map((p) => `- ${p}`).join("\n")));
-      btn.disabled = false;
-    });
-    return h("li", {}, h("span", { class: "grow", title: b.target || "" }, `${b.path} · ${ago(b.generatedAt)}`), res, btn);
-  }));
-  return card("Evidence", plural(bundles.length, "bundle"), false,
-    target ? h("div", { class: "actions" },
-      h("span", { class: "muted grow" }, shortProject(target)),
-      create,
-      ...["auditor", "owner", "developer"].map((a) => h("a", { class: "btn small", href: `/api/report?${new URLSearchParams({ project: target, audience: a })}`, download: "" }, `${a}.md`)),
-    ) : null,
-    msg,
-    bundles.length ? list : empty(EMPTY.evidence),
-    out,
-  );
-}
-
-function changesCard(env, project) {
-  const past = state.runs.past.filter((l) => !project || l.target.repo === project || l.target.url === project);
-  const fixes = past.flatMap((l) => l.iterations.flatMap((it) => it.fixes.filter((f) => f.commit).map((f) => ({ ...f, branch: l.branch, at: l.startedAt }))));
-  return card("Changes", plural(fixes.length, "fix", "fixes"), false,
-    fixes.length ? h("ul", { class: "mini" }, fixes.slice(0, 12).map((f) => h("li", {},
-      h("span", { class: "ok" }, "OK"),
-      h("span", { class: "grow" }, f.title, h("span", { class: "muted" }, ` · ${f.branch}`)),
-      h("code", { class: "muted", title: `git show ${f.commit}` }, f.commit.slice(0, 7))))) : empty(EMPTY.changes),
-    env.fixBranches.length ? h("div", {}, h("p", { class: "label" }, "Local fix branches"), h("ul", { class: "mini" }, env.fixBranches.map((b) => h("li", {}, h("code", { class: "grow" }, b))))) : null,
-    h("p", { class: "muted" }, "Nothing is pushed. Review with git log --stat main..<branch>, then merge or push it yourself."),
   );
 }
 
@@ -211,9 +56,37 @@ async function findingView(el, ctx, my) {
   if (my !== seq) return;
   const x = d.explain || {};
   const section = (label, ...body) => h("section", {}, h("p", { class: "label" }, label), ...body);
+  const canFix = d.fix && f.project.startsWith("/");
+  if (simple()) {
+    // Plain words first, one action, the detail folded away.
+    const sure = { confirmed: "Penthera is sure about this one.", likely: "Penthera is fairly sure; worth checking.", "needs-human-review": "Penthera cannot be sure; a person should look." }[d.confidence] || "";
+    clear(el).append(
+      head("Problem", ctx),
+      h("div", { class: "pane-body detail" },
+        h("div", {}, h("span", { class: `sev sev-${d.severity}` }, SEV_WORD[d.severity] || d.severity)),
+        h("h2", { tabindex: "-1" }, d.title),
+        h("div", { class: "plain", "aria-label": "In plain words" },
+          d.description ? h("p", {}, h("b", {}, "What is wrong :: "), d.description) : null,
+          h("p", {}, h("b", {}, "How sure :: "), sure),
+          x.fixText || d.remediation ? h("p", {}, h("b", {}, "What to do :: "), x.fixText || d.remediation) : null),
+        canFix
+          ? h("div", { class: "actions start" }, h("button", { type: "button", class: "btn primary", onclick: () => ctx.newScan("loop", f.project) }, "Fix it for me…"),
+            h("p", { class: "muted prose" }, "You will see the change and approve it first."))
+          : h("p", { class: "muted prose" }, "Penthera has no automatic fix for this one. The steps above say what to change; a developer can do it in minutes."),
+        h("details", { class: "more" }, h("summary", {}, "Show the details"),
+          h("dl", { class: "kv" },
+            h("dt", {}, "where"), h("dd", {}, d.location || "-"),
+            h("dt", {}, "project"), h("dd", {}, f.project)),
+          d.evidence ? section("Evidence", h("pre", { class: "block" }, d.evidence)) : null,
+          d.fix ? section("The change", diffBlock(d.fix.diff)) : null,
+          d.sources?.length ? section("Read more", h("ul", { class: "mini" }, d.sources.map((s) => h("li", {}, h("a", { href: s.url, target: "_blank", rel: "noopener noreferrer" }, s.cite))))) : null),
+      ),
+    );
+    return;
+  }
   clear(el).append(
     head("Finding", ctx),
-    h("div", { class: "detail" },
+    h("div", { class: "pane-body detail" },
       h("div", {}, sevBadge(d.severity), " ", h("span", { class: "chip" }, d.confidence || "unrated"), " ", d.category ? h("span", { class: "chip" }, d.category) : null),
       h("h2", { tabindex: "-1" }, d.title),
       h("dl", { class: "kv" },
@@ -230,9 +103,9 @@ async function findingView(el, ctx, my) {
       d.remediation ? section("How to fix", h("p", {}, d.remediation)) : null,
       d.sources?.length ? section("Sources", h("ul", { class: "mini" }, d.sources.map((s) => h("li", {}, h("a", { href: s.url, target: "_blank", rel: "noopener noreferrer" }, s.cite))))) : null,
       d.fix ? section("Fix recipe",
-        h("p", {}, h("span", { class: "ok" }, d.fix.recipe), ` :: ${d.fix.title}`),
+        h("p", {}, h("span", { class: "chip" }, d.fix.recipe), ` :: ${d.fix.title}`),
         diffBlock(d.fix.diff),
-        f.project.startsWith("/") ? h("div", { class: "actions" }, h("button", { type: "button", class: "btn primary", onclick: () => { set({ mode: "loop", sel: { kind: "project", key: f.project } }); ctx.focusBar("loop"); } }, "Fix it with the loop ▸")) : null)
+        f.project.startsWith("/") ? h("div", { class: "actions" }, h("button", { type: "button", class: "btn primary", onclick: () => ctx.newScan("loop", f.project) }, "Fix it with the loop…")) : null)
         : section("Fix recipe", h("p", { class: "muted" }, "No recipe matches. Fix it by hand, or run the loop with a local model (--fix-model) from the CLI.")),
     ),
   );
@@ -245,12 +118,20 @@ async function settingsView(el, ctx, my) {
   if (my !== seq) return;
   const radios = ["dark", "light"].map((t) => {
     const r = h("input", { type: "radio", name: "theme", value: t, checked: ctx.theme.get() === t });
-    r.addEventListener("change", () => ctx.theme.set(t));
+    r.addEventListener("change", () => ctx.setTheme(t));
     return h("label", {}, r, h("span", {}, t === "dark" ? "Dark" : "Light"));
   });
   clear(el).append(
     head("Settings", ctx),
-    h("div", { class: "detail" },
+    h("div", { class: "pane-body detail" },
+      h("section", {}, h("p", { class: "label" }, "Mode"),
+        h("div", { class: "seg", role: "radiogroup", "aria-label": "Mode" }, ["simple", "advanced"].map((m) => {
+          const r = h("input", { type: "radio", name: "ux", value: m, checked: state.ux === m });
+          r.addEventListener("change", () => ctx.setUx(m));
+          return h("label", {}, r, h("span", {}, m === "simple" ? "Simple" : "Advanced"));
+        })),
+        h("p", { class: "muted prose" }, "Simple shows what to fix in plain words. Advanced adds dependencies, AI tooling, history, evidence and the raw detail."),
+        h("div", { class: "actions start" }, h("button", { type: "button", class: "btn", onclick: () => ctx.setup() }, "Run setup again…"))),
       h("section", {}, h("p", { class: "label" }, "Theme"), h("div", { class: "seg", role: "radiogroup", "aria-label": "Theme" }, radios),
         h("p", { class: "muted" }, "Remembered in this browser. The first visit follows your system.")),
       h("section", {}, h("p", { class: "label" }, "Where data comes from"),
@@ -261,10 +142,10 @@ async function settingsView(el, ctx, my) {
         h("p", { class: "muted" }, "Only these folders and ~/.penthera are read. Add folders with penthera ui --project <dir>.")),
       h("section", {}, h("p", { class: "label" }, "Egress for scans started here"), h("p", {}, settings.offline ? "Offline: only the target." : "Online: target plus recon sources.")),
       h("section", {}, h("p", { class: "label" }, "Memory chains"),
-        mem.projects.length ? h("ul", { class: "mini" }, mem.projects.map((p) => h("li", {}, h("span", { class: p.chain === "ok" ? "ok" : "bad" }, p.chain === "ok" ? "[OK]" : "[!]"), h("span", { class: "grow" }, p.label), h("span", { class: "muted" }, `${p.events} events`)))) : empty(EMPTY.memory)),
+        mem.projects.length ? h("ul", { class: "mini" }, mem.projects.map((p) => h("li", {}, h("span", { class: p.chain === "ok" ? "t1" : "bad" }, p.chain === "ok" ? "✓" : "[!]"), h("span", { class: "grow" }, p.label), h("span", { class: "muted" }, `${p.events} events`)))) : empty(EMPTY.memory)),
       h("section", {}, h("p", { class: "label" }, "Keys"), h("dl", { class: "kv" }, KEYS.flatMap(([k, v]) => [h("dt", {}, h("kbd", {}, k)), h("dd", {}, v)]))),
       h("section", {}, h("p", { class: "label" }, "Session"),
-        h("p", { class: "muted" }, `127.0.0.1 only · one-time link swapped for an HttpOnly, SameSite=Strict cookie · Host and Origin checked · strict CSP · ${state.meta.demo ? "demo data" : "local reports"}`)),
+        h("p", { class: "muted" }, `127.0.0.1 only · one-time link swapped for a session kept in this tab only · Host and Origin checked · strict CSP · ${state.meta.demo ? "demo data" : "local reports"}`)),
     ),
   );
 }

package/src/ui/static/js/state.js

@@ -1,17 +1,29 @@
-// One store for the single view. Renderers subscribe and redraw their column.
+// One store for the single view. Renderers subscribe and redraw their window.
 export const state = {
   meta: null,
   overview: null,
   findings: [],
   runs: { live: [], past: [] },
   sel: { kind: "all", key: null },   // all | project | run | past
-  finding: null,                     // { id, project } open in the right panel
-  right: "cards",                    // cards | finding | settings
+  tab: "findings",                   // findings | deps | ai | history | proof (for all / project)
+  finding: null,                     // { id, project } open in the inspector
+  right: "none",                     // none | finding | settings
   query: "",
-  mode: "scan",
-  activeRun: null,                   // the live run object being streamed
+  filter: null,                      // { severity, confidence } from the triage matrix, advanced only
+  pending: null,                     // the live run's diff waiting for a decision, if any
+  ux: "simple",                      // simple | advanced, chosen in setup, remembered per browser
 };
 
+export const simple = () => state.ux === "simple";
+
+export const TABS = [
+  { id: "findings", label: "Findings", key: "1" },
+  { id: "deps", label: "Dependencies", key: "2" },
+  { id: "ai", label: "AI tooling", key: "3" },
+  { id: "history", label: "History", key: "4" },
+  { id: "proof", label: "Proof", key: "5" },
+];
+
 const subs = new Set();
 export function on(fn) { subs.add(fn); return () => subs.delete(fn); }
 export function set(patch) {
@@ -33,3 +45,22 @@ export function folderFor(key) {
   if (key && key.startsWith("/")) return key;
   return state.meta?.projects?.[0] || "";
 }
+
+/** The project the current view is about, if any (a run or past run counts as its project). */
+export function currentProject() {
+  const s = state.sel;
+  if (s.kind === "project") return s.key;
+  if (s.kind === "past") return s.past?.target?.repo || s.past?.target?.url || null;
+  if (s.kind === "run") return s.run?.repo || s.run?.url || null;
+  return null;
+}
+
+/** The live run that is still going, if any. */
+export const liveRun = () => state.runs.live.find((r) => r.status === "running") || null;
+
+/** Severity counts for what is on screen: the selected project, or all of them. */
+export function countsInView() {
+  const key = currentProject();
+  if (key) return projectOf(key)?.counts || null;
+  return state.overview?.mix || null;
+}

package/src/ui/static/logo.svg

@@ -0,0 +1,10 @@
+<svg width="279" height="63" viewBox="0 0 279 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0292 54.9484L20.4241 57.491H0L7.39494 54.9484V3.53139L0 0.988789H16.7619C25.5654 0.988789 31.0588 5.36771 31.0588 12.0774C31.0588 21.9652 20.4241 27.0504 13.0292 27.5448V54.9484ZM13.0292 1.69507V26.8386C17.4661 26.4854 25.0019 24.0135 25.0019 13.9137C25.0019 7.06278 20.7763 1.69507 13.0292 1.69507Z" fill="currentColor"/>
+<path d="M46.8324 56.7848C53.7344 56.7848 58.453 52.8296 61.4815 42.1648L62.6083 38.2096H63.0309L58.1713 57.491H29.4367L36.8316 54.9484V3.53139L29.4367 0.988789H58.1009L61.1997 18.7164H60.7772L60.0025 14.6906C58.2418 5.50896 53.9457 1.69507 46.0577 1.69507H42.4659V23.3778H57.5375V23.5191L42.4659 26.9092V56.7848H46.8324Z" fill="currentColor"/>
+<path d="M101.382 0.988789L93.9873 3.46076L93.2126 58.6917L68.2811 4.52018L69.1262 54.9484L76.5916 57.491H59.4071L66.8725 54.9484L67.6472 3.60202L59.8297 0.988789H73.211L92.79 44.7074L91.9449 3.53139L84.5499 0.988789H101.382Z" fill="currentColor"/>
+<path d="M129.767 0.988789L132.866 18.7164H132.444L131.599 14.1962C129.838 4.73206 124.415 1.69507 119.415 1.69507H118.288V54.9484L125.823 57.491H105.118L112.653 54.9484V1.69507H111.808C107.09 1.69507 101.385 4.66143 99.6243 14.1962L98.7791 18.7164H98.3566L101.455 0.988789H129.767Z" fill="currentColor"/>
+<path d="M137.934 3.53139L130.539 0.988789H150.964L143.569 3.53139V25.7791H160.119V3.53139L152.724 0.988789H173.148L165.753 3.53139V54.9484L173.148 57.491H152.724L160.119 54.9484V26.4854H143.569V54.9484L150.964 57.491H130.539L137.934 54.9484V3.53139Z" fill="currentColor"/>
+<path d="M188.032 56.7848C194.934 56.7848 199.653 52.8296 202.681 42.1648L203.808 38.2096H204.231L199.371 57.491H170.637L178.032 54.9484V3.53139L170.637 0.988789H199.301L202.4 18.7164H201.977L201.202 14.6906C199.442 5.50896 195.146 1.69507 187.258 1.69507H183.666V23.3778H198.737V23.5191L183.666 26.9092V56.7848H188.032Z" fill="currentColor"/>
+<path d="M214.34 54.9484L221.735 57.491H201.311L208.706 54.9484V3.53139L201.311 0.988789H218.073C226.877 0.988789 232.37 5.15583 232.37 11.0179C232.37 17.3744 227.018 21.4002 221.383 23.3072L235.891 63H235.68L214.34 24.6491V54.9484ZM214.34 1.69507V24.0135C221.172 23.8016 226.313 19.2814 226.313 12.5011C226.313 6.42713 222.088 1.69507 214.34 1.69507Z" fill="currentColor"/>
+<path d="M258.576 57.491L265.971 55.0191L259.21 31.5H247.589L241.814 55.0191L249.279 57.491H232.518L239.49 54.8778L255.195 0L271.605 54.9484L279 57.491H258.576ZM247.8 30.7937H258.998L252.871 9.88789L247.8 30.7937Z" fill="currentColor"/>
+</svg>

package/src/ui/static/mark.svg

@@ -0,0 +1,3 @@
+<svg width="140" height="280" viewBox="0 0 140 280" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M58.7302 243.645L108.182 280L58.7302 255.125H0L33.3333 243.645V11.4806L0 0H75.5556C115.238 0 140 19.7722 140 50.0683C140 94.7152 92.0635 117.676 58.7302 119.909V243.645ZM58.7302 3.18906V116.72C78.7302 115.125 112.698 103.964 112.698 58.3599C112.698 27.4259 93.6508 3.18906 58.7302 3.18906Z" fill="currentColor"/>
+</svg>