penthera 1.6.0 → 1.7.0

package/src/ui/static/index.html

@@ -12,45 +12,14 @@
   <script type="module" src="/js/app.js"></script>
 </head>
 <body>
-  <a class="skip" href="#main">Skip to content</a>
-  <header class="menubar">
-    <span class="mb-mark">
-      <svg width="14" height="16" viewBox="0 0 7 8" aria-hidden="true" shape-rendering="crispEdges"><path class="px" d="M0 0h5v1h1v1h1v2H6v1H5v1H2v2H0zM2 2v2h3V2z"/></svg>
-      penthera
-    </span>
-    <nav aria-label="Screens">
-      <ol>
-        <li><a href="#/overview" data-view="overview"><span class="key">1</span>Overview</a></li>
-        <li><a href="#/findings" data-view="findings"><span class="key">2</span>Findings</a></li>
-        <li><a href="#/run" data-view="run"><span class="key">3</span>Run</a></li>
-        <li><a href="#/history" data-view="history"><span class="key">4</span>History</a></li>
-        <li><a href="#/deps" data-view="deps"><span class="key">5</span>Dependencies</a></li>
-        <li><a href="#/ai" data-view="ai"><span class="key">6</span>AI tooling</a></li>
-        <li><a href="#/evidence" data-view="evidence"><span class="key">7</span>Evidence</a></li>
-        <li><a href="#/settings" data-view="settings"><span class="key">8</span>Settings</a></li>
-      </ol>
-    </nav>
-    <div class="mb-right">
-      <span id="mb-chips"></span>
-      <button type="button" class="themebtn" id="theme-btn" aria-label="Switch theme">◐ dark</button>
-      <span class="mb-clock" id="mb-clock" aria-hidden="true"></span>
-    </div>
-  </header>
-  <div class="desktop">
-    <div class="window">
-      <div class="titlebar"><span class="box close" aria-hidden="true"></span><span class="title" id="win-title">penthera :: overview</span><span class="box zoom" aria-hidden="true"></span></div>
-      <div class="prompt" id="prompt"><span class="user">penthera@127.0.0.1</span>:<span class="path">~/overview</span>$ <span id="prompt-cmd"></span><span class="cursor" aria-hidden="true"></span></div>
-      <main class="main" id="main" tabindex="-1">
-        <noscript><p>penthera ui needs JavaScript: every screen reads from the local API on this machine.</p></noscript>
-      </main>
-      <footer class="status">
-        <span><kbd>1</kbd>-<kbd>8</kbd> screens</span>
-        <span><kbd>/</kbd> filter findings</span>
-        <span><kbd>j</kbd> <kbd>k</kbd> move in tables</span>
-        <span><kbd>y</kbd> <kbd>n</kbd> <kbd>q</kbd> approve, skip, stop a diff</span>
-        <span id="status-bind"></span>
-      </footer>
-    </div>
+  <a class="skip" href="#center">Skip to content</a>
+  <div class="app" id="app">
+    <aside class="left" id="left" aria-label="Projects and runs"></aside>
+    <main class="center" id="center" tabindex="-1">
+      <noscript><p class="pad">penthera ui needs JavaScript: every view reads from the local API on this machine.</p></noscript>
+    </main>
+    <aside class="right" id="right" aria-label="Details"></aside>
+    <div class="scrim" id="scrim" hidden></div>
   </div>
   <div class="sr" role="status" aria-live="polite" id="announce"></div>
 </body>

package/src/ui/static/js/app.js

@@ -1,138 +1,136 @@
-// penthera ui: hash router, keyboard shortcuts, the menu bar and window chrome.
+// penthera ui: one view. Left: projects and runs. Centre: the selected project
+// or run. Right: cards, or the open finding, or settings.
 import { h, clear, announce } from "./dom.js";
 import { api } from "./api.js";
-import { typeInto } from "./typer.js";
 import { patternDefs } from "./charts.js";
-import { SCREENS, ERR } from "./copy.js";
-import * as overview from "./views/overview.js";
-import * as findings from "./views/findings.js";
-import * as run from "./views/run.js";
-import * as history from "./views/history.js";
-import * as deps from "./views/deps.js";
-import * as ai from "./views/ai.js";
-import * as evidence from "./views/evidence.js";
-import * as settings from "./views/settings.js";
+import { state, set, on } from "./state.js";
+import { renderLeft } from "./left.js";
+import { renderCenter, renderBar, refreshList, moveFinding, answerPending } from "./center.js";
+import { renderRight } from "./right.js";
+import { ERR } from "./copy.js";
 
-const VIEWS = { overview, findings, run, history, deps, ai, evidence, settings };
-const ORDER = Object.keys(VIEWS);
 const THEME_KEY = "penthera-ui-theme";
+const PANELS_KEY = "penthera-ui-panels";
+const app = document.getElementById("app");
+const left = document.getElementById("left");
+const center = document.getElementById("center");
+const right = document.getElementById("right");
+const scrim = document.getElementById("scrim");
 
-const main = document.getElementById("main");
-const ctx = { api, meta: null, go, params: new URLSearchParams(), theme: { get: getTheme, set: setTheme } };
-let cleanup = null;
-let renderSeq = 0;
+// ── Theme: one system, [data-theme] on <html>; theme.js set it before paint ──
+const theme = {
+  get: () => (document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark"),
+  set(t) {
+    document.documentElement.setAttribute("data-theme", t);
+    try { localStorage.setItem(THEME_KEY, t); } catch { /* storage off: this page only */ }
+    announce(`${t === "light" ? "Light" : "Dark"} theme`);
+  },
+};
 
-function parseHash() {
-  const raw = location.hash.replace(/^#\/?/, "");
-  const [name, query = ""] = raw.split("?");
-  const alias = name === "agent" ? "run" : name;
-  return { name: VIEWS[alias] ? alias : "overview", params: new URLSearchParams(query) };
+// ── Side panels: [ and ] toggle; drawers below 1180px / 760px ──
+const narrowRight = () => window.matchMedia("(max-width: 1180px)").matches;
+const narrowLeft = () => window.matchMedia("(max-width: 760px)").matches;
+function savedPanels() {
+  try { return JSON.parse(localStorage.getItem(PANELS_KEY) || "null"); } catch { return null; }
 }
-
-export function go(name, params = {}) {
-  const q = new URLSearchParams(params).toString();
-  const next = `#/${name}${q ? `?${q}` : ""}`;
-  if (location.hash === next) render();
-  else location.hash = next;
+function applyPanels({ left: l, right: r }) {
+  app.classList.toggle("no-left", !l);
+  app.classList.toggle("no-right", !r);
+  scrim.hidden = !((r && narrowRight()) || (l && narrowLeft()));
+  if (!narrowRight()) {
+    try { localStorage.setItem(PANELS_KEY, JSON.stringify({ left: l, right: r })); } catch { /* per-viewer convenience only */ }
+  }
 }
+const panels = { left: true, right: true, ...(savedPanels() || {}) };
+if (narrowLeft()) panels.left = false;
+if (narrowRight()) panels.right = false;
+applyPanels(panels);
+function toggleLeft() { panels.left = !panels.left; applyPanels(panels); }
+function toggleRight() { panels.right = !panels.right; applyPanels(panels); }
+scrim.addEventListener("click", () => {
+  if (narrowLeft()) panels.left = false;
+  if (narrowRight()) panels.right = false;
+  applyPanels(panels);
+});
 
-// ── Theme: one system, [data-theme] on <html>. theme.js set it before paint. ──
-function getTheme() { return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark"; }
-function setTheme(t) {
-  document.documentElement.setAttribute("data-theme", t);
-  try { localStorage.setItem(THEME_KEY, t); } catch { /* storage off: the choice lasts this page only */ }
-  paintThemeButton();
-  announce(`${t === "light" ? "Light" : "Dark"} theme`);
-}
-function paintThemeButton() {
-  const b = document.getElementById("theme-btn");
-  const t = getTheme();
-  b.textContent = t === "light" ? "◑ light" : "◐ dark";
-  b.setAttribute("aria-label", `Theme: ${t}. Switch to ${t === "light" ? "dark" : "light"}`);
-}
-document.getElementById("theme-btn").addEventListener("click", () => setTheme(getTheme() === "light" ? "dark" : "light"));
-paintThemeButton();
+// ── Context the renderers share ──
+const ctx = {
+  theme,
+  toggleLeft,
+  toggleRight,
+  refresh,
+  refreshMeta: async () => { state.meta = await api.get("/api/meta"); },
+  redrawRight: () => renderRight(right, ctx),
+  openFinding(f) {
+    set({ finding: { id: f.id, project: f.project }, right: "finding" });
+    if (!panels.right) { panels.right = true; applyPanels(panels); }
+    for (const b of document.querySelectorAll("#findings-list .row")) {
+      b.setAttribute("aria-current", String(b.dataset.id === f.id && b.dataset.project === f.project));
+    }
+  },
+  focusBar(kind) {
+    if (kind && kind !== state.mode) set({ mode: kind });
+    if (narrowLeft() && panels.left) { panels.left = false; applyPanels(panels); }
+    const input = document.getElementById("bar-input");
+    (input && !input.disabled ? input : document.querySelector(".bar .btn.primary"))?.focus();
+  },
+};
 
-function clock() {
-  const d = new Date();
-  document.getElementById("mb-clock").textContent = `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+async function refresh() {
+  const [overview, findings, runs] = await Promise.all([api.get("/api/overview"), api.get("/api/findings"), api.get("/api/runs")]);
+  set({ overview, findings: findings.findings, runs });
 }
-clock();
-setInterval(clock, 15_000);
 
-async function render() {
-  const seq = ++renderSeq;
-  const { name, params } = parseHash();
-  ctx.params = params;
-  for (const a of document.querySelectorAll(".menubar nav a")) {
-    if (a.dataset.view === name) a.setAttribute("aria-current", "page");
-    else a.removeAttribute("aria-current");
+// ── Redraw on state changes, one column at a time ──
+on((patch) => {
+  const keys = Object.keys(patch);
+  if (keys.includes("query") && keys.length === 1) { refreshList(ctx); return; }
+  if (keys.some((k) => ["overview", "runs", "sel", "meta", "right"].includes(k))) renderLeft(left, { onNewScan: () => ctx.focusBar("scan"), toggleLeft, theme });
+  if (keys.some((k) => ["overview", "findings", "sel", "mode"].includes(k))) {
+    // A live transcript is rebuilt only when the selection changes; data refreshes redraw the bar.
+    if (state.sel.kind === "run" && !keys.includes("sel")) renderBar(center, ctx);
+    else renderCenter(center, ctx);
+    if (keys.includes("sel") && narrowLeft() && panels.left) { panels.left = false; applyPanels(panels); }
   }
-  const title = SCREENS[name].title;
-  document.title = `${title} :: penthera ui`;
-  document.getElementById("win-title").textContent = `penthera :: ${title.toLowerCase()}`;
-  document.querySelector("#prompt .path").textContent = `~/${name}`;
-  typeInto(document.getElementById("prompt-cmd"), `penthera ui --view ${name}`);
-
-  if (cleanup) { try { cleanup(); } catch { /* view already gone */ } cleanup = null; }
-  clear(main);
-  const root = h("div"); // no enter animation: screens switch from the keyboard (1-8)
-  main.append(root);
-  try {
-    const c = await VIEWS[name].render(root, ctx);
-    if (seq !== renderSeq) { c?.(); return; }
-    cleanup = c || null;
-  } catch (e) {
-    if (seq !== renderSeq) return;
-    clear(root).append(
-      h("h1", {}, title),
-      h("p", { class: "error", role: "alert" }, e.message),
-      e.status === 401 ? h("p", { class: "muted" }, ERR.session) : null,
-    );
+  if (keys.some((k) => ["sel", "right", "finding"].includes(k)) || (keys.includes("runs") && state.right === "cards")) {
+    if (patch.openRight && !panels.right) { panels.right = true; applyPanels(panels); }
+    renderRight(right, ctx);
   }
-  announce(`${title} screen`);
-}
-
-function chrome(meta) {
-  // Only real elements go into the bar: a null child would render as the text "null".
-  const chips = [
-    meta.demo ? h("span", { class: "chip inv", title: "Fake data seeded by --demo" }, "DEMO DATA") : null,
-    h("span", { class: meta.settings.offline ? "chip on" : "chip" }, meta.settings.offline ? "offline" : "online"),
-  ].filter(Boolean);
-  clear(document.getElementById("mb-chips")).append(...chips);
-  document.getElementById("status-bind").textContent = `v${meta.version} :: bound to ${location.host} :: no network :: no telemetry`;
-}
+});
 
+// ── Keyboard ──
 function isTyping(e) {
   const t = e.target;
   return t instanceof HTMLElement && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName));
 }
-
 document.addEventListener("keydown", (e) => {
-  if (e.metaKey || e.ctrlKey || e.altKey || isTyping(e)) return;
-  const n = Number(e.key);
-  if (Number.isInteger(n) && n >= 1 && n <= ORDER.length) {
-    e.preventDefault();
-    go(ORDER[n - 1]);
-    main.focus({ preventScroll: true });
+  if (e.metaKey || e.ctrlKey || e.altKey) return;
+  if (e.key === "Escape") {
+    const q = document.getElementById("q");
+    if (document.activeElement === q && q.value) { q.value = ""; set({ query: "" }); return; }
+    if (state.right !== "cards") { set({ right: "cards", finding: null }); return; }
+    if ((narrowRight() && panels.right) || (narrowLeft() && panels.left)) scrim.click();
+    return;
   }
+  if (isTyping(e)) return;
+  if (answerPending(e.key)) { e.preventDefault(); return; }
+  if (e.key === "/") { const q = document.getElementById("q"); if (q) { e.preventDefault(); q.focus(); } return; }
+  if (e.key === "j" || e.key === "k") { e.preventDefault(); moveFinding(e.key === "j" ? 1 : -1, ctx); return; }
+  if (e.key === "[") { e.preventDefault(); toggleLeft(); return; }
+  if (e.key === "]") { e.preventDefault(); toggleRight(); }
 });
 
-window.addEventListener("hashchange", render);
-
 (async function boot() {
   document.body.append(patternDefs());
   try {
-    ctx.meta = await api.get("/api/meta");
-    chrome(ctx.meta);
+    state.meta = await api.get("/api/meta");
+    await refresh();
+    document.title = `penthera ui${state.meta.demo ? " :: demo" : ""}`;
   } catch (e) {
-    clear(main).append(
+    clear(center).append(h("div", { class: "col" },
       h("h1", {}, "Not signed in"),
-      h("p", { class: "error", role: "alert" }, e.message),
-      h("p", { class: "muted" }, "Run penthera ui and open the one-time link it prints. The link works once."),
-    );
-    return;
+      h("p", { class: "bad", role: "alert" }, e.message),
+      h("p", { class: "muted" }, e.status === 401 ? ERR.session : "Run penthera ui and open the one-time link it prints. The link works once."),
+    ));
   }
-  ctx.refreshMeta = async () => { ctx.meta = await api.get("/api/meta"); chrome(ctx.meta); };
-  render();
 })();