penthera 1.7.0 → 1.8.0

package/src/ui/static/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" shape-rendering="crispEdges"><rect width="8" height="8" fill="#000"/><path d="M1 1h4v1h1v2H5v1H3v2H1zM3 2v2h2V2z" fill="#fff"/><rect x="6" y="6" width="1" height="1" fill="#0000ed"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="#0000ed"/><path transform="translate(10 4) scale(0.0857)" 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="#fff"/></svg>

package/src/ui/static/fonts/DepartureMono-LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright 2022–2024 Helena Zhang (helenazhang.com).
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/ui/static/index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="color-scheme" content="dark light">
   <meta name="referrer" content="no-referrer">
-  <title>penthera ui</title>
+  <title>Penthera</title>
   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <script src="/js/theme.js"></script>
   <link rel="stylesheet" href="/app.css">
@@ -13,12 +13,13 @@
 </head>
 <body>
   <a class="skip" href="#center">Skip to content</a>
+  <header class="menubar" id="menubar"></header>
   <div class="app" id="app">
-    <aside class="left" id="left" aria-label="Projects and runs"></aside>
-    <main class="center" id="center" tabindex="-1">
+    <aside class="left pane" id="left" aria-label="Projects and runs"></aside>
+    <main class="center pane" 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>
+    <aside class="right pane" 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>

package/src/ui/static/js/api.js

@@ -1,6 +1,11 @@
-// Same-origin JSON client. The session cookie is HttpOnly and SameSite=Strict,
-// so it rides along on its own; POSTs send JSON so the server's Origin and
-// Content-Type checks pass for this page and fail for every other site.
+// Same-origin JSON client. `penthera ui` prints a link with a one-time token
+// after the # (never sent over the network). signIn() posts it once, gets a
+// session id back and keeps that in this tab's sessionStorage; every request
+// then carries it as `Authorization: Bearer`. No cookie: cookies are not bound
+// to a port, so every other server on 127.0.0.1 would receive one.
+
+const SESSION_KEY = "penthera-ui-session";
+let sid = null;
 
 export class ApiError extends Error {
   constructor(message, status) {
@@ -9,12 +14,34 @@ export class ApiError extends Error {
   }
 }
 
-async function call(method, path, body) {
+function stored() {
+  try { return sessionStorage.getItem(SESSION_KEY); } catch { return null; }
+}
+
+/** Redeem `#t=<token>` from the address bar (and remove it from there), or reuse this tab's session. */
+export async function signIn() {
+  const m = /^#t=([A-Za-z0-9_-]{16,128})$/.exec(location.hash);
+  if (m) {
+    history.replaceState(null, "", location.pathname);
+    const r = await call("POST", "/api/session", { token: m[1] }, false);
+    sid = r.session;
+    try { sessionStorage.setItem(SESSION_KEY, sid); } catch { /* storage off: this page load only */ }
+    return;
+  }
+  sid = stored();
+}
+
+function headers(extra = {}) {
+  return sid ? { ...extra, Authorization: `Bearer ${sid}` } : extra;
+}
+
+async function call(method, path, body, auth = true) {
+  const base = body === undefined ? { Accept: "application/json" } : { Accept: "application/json", "Content-Type": "application/json" };
   const res = await fetch(path, {
     method,
-    credentials: "same-origin",
+    credentials: "omit",
     cache: "no-store",
-    headers: body === undefined ? { Accept: "application/json" } : { Accept: "application/json", "Content-Type": "application/json" },
+    headers: auth ? headers(base) : base,
     body: body === undefined ? undefined : JSON.stringify(body),
   });
   let data = null;
@@ -23,7 +50,88 @@ async function call(method, path, body) {
   return data;
 }
 
+/** Fetch a file the API serves as an attachment and hand it to the browser as a download. */
+async function download(path) {
+  const res = await fetch(path, { credentials: "omit", cache: "no-store", headers: headers() });
+  if (!res.ok) {
+    let data = null;
+    try { data = await res.json(); } catch { /* not JSON */ }
+    throw new ApiError(data?.error || `${res.status} ${res.statusText}`, res.status);
+  }
+  const name = /filename="([^"]+)"/.exec(res.headers.get("Content-Disposition") || "")?.[1] || "penthera-report.md";
+  const href = URL.createObjectURL(await res.blob());
+  const a = document.createElement("a");
+  a.href = href;
+  a.download = name;
+  document.body.append(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(href), 10_000);
+}
+
+/**
+ * Read a run's event stream with fetch, so it carries the Authorization
+ * header (EventSource cannot). Reconnects with Last-Event-ID after a dropped
+ * connection. Returns { close }.
+ * @param {string} path
+ * @param {(type: string, data: string) => void} onEvent
+ */
+function stream(path, onEvent) {
+  const ctl = new AbortController();
+  let last = 0;
+  let done = false;
+  let tries = 0;
+  const dispatch = (block) => {
+    let type = "message";
+    let id = null;
+    const data = [];
+    for (const line of block.split("\n")) {
+      if (!line || line.startsWith(":")) continue;
+      const i = line.indexOf(":");
+      const field = i < 0 ? line : line.slice(0, i);
+      const value = i < 0 ? "" : line.slice(i + 1).replace(/^ /, "");
+      if (field === "event") type = value;
+      else if (field === "data") data.push(value);
+      else if (field === "id") id = value;
+    }
+    if (id != null && /^\d+$/.test(id)) last = Number(id);
+    if (type === "end") done = true;
+    onEvent(type, data.join("\n"));
+  };
+  (async () => {
+    while (!done && !ctl.signal.aborted) {
+      try {
+        const res = await fetch(path, {
+          credentials: "omit", cache: "no-store", signal: ctl.signal,
+          headers: headers({ Accept: "text/event-stream", ...(last ? { "Last-Event-ID": String(last) } : {}) }),
+        });
+        if (!res.ok || !res.body) { onEvent("error", JSON.stringify({ status: res.status })); return; }
+        tries = 0;
+        const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
+        let buf = "";
+        for (;;) {
+          const { value, done: eof } = await reader.read();
+          if (eof) break;
+          buf += value.replace(/\r\n?/g, "\n");
+          let cut;
+          while ((cut = buf.indexOf("\n\n")) >= 0) {
+            dispatch(buf.slice(0, cut));
+            buf = buf.slice(cut + 2);
+          }
+        }
+      } catch {
+        if (ctl.signal.aborted) return;
+      }
+      if (done || ++tries > 5) return;
+      await new Promise((r) => setTimeout(r, 500 * tries));
+    }
+  })();
+  return { close: () => ctl.abort() };
+}
+
 export const api = {
   get: (path) => call("GET", path),
   post: (path, body = {}) => call("POST", path, body),
+  download,
+  stream,
 };

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

@@ -1,17 +1,23 @@
-// penthera ui: one view. Left: projects and runs. Centre: the selected project
-// or run. Right: cards, or the open finding, or settings.
+// penthera ui: a menu bar over three tiled windows. Projects on the left, the
+// selected project (five tabs) or run in the centre, the inspector on the
+// right. Runs start from the New scan dialog; every action is also in a menu.
 import { h, clear, announce } from "./dom.js";
-import { api } from "./api.js";
-import { patternDefs } from "./charts.js";
-import { state, set, on } from "./state.js";
+import { api, signIn } from "./api.js";
+import { patternDefs, riskLevel } from "./charts.js";
+import { state, set, on, TABS, countsInView } from "./state.js";
+import { renderMenubar, closeMenus } from "./menubar.js";
 import { renderLeft } from "./left.js";
-import { renderCenter, renderBar, refreshList, moveFinding, answerPending } from "./center.js";
+import { renderCenter, refreshList, moveFinding, answerPending } from "./center.js";
 import { renderRight } from "./right.js";
+import { newScan, about } from "./dialog.js";
+import { setup } from "./onboarding.js";
 import { ERR } from "./copy.js";
 
 const THEME_KEY = "penthera-ui-theme";
+const UX_KEY = "penthera-ui-mode";
 const PANELS_KEY = "penthera-ui-panels";
 const app = document.getElementById("app");
+const menubar = document.getElementById("menubar");
 const left = document.getElementById("left");
 const center = document.getElementById("center");
 const right = document.getElementById("right");
@@ -27,73 +33,83 @@ const theme = {
   },
 };
 
-// ── Side panels: [ and ] toggle; drawers below 1180px / 760px ──
+// ── Side windows: [ 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; }
 }
-function applyPanels({ left: l, right: r }) {
-  app.classList.toggle("no-left", !l);
-  app.classList.toggle("no-right", !r);
-  scrim.hidden = !((r && narrowRight()) || (l && narrowLeft()));
+const panels = { left: true, right: true, ...(savedPanels() || {}) };
+function applyPanels() {
+  app.classList.toggle("no-left", !panels.left);
+  app.classList.toggle("no-right", !panels.right);
+  scrim.hidden = !((panels.right && narrowRight()) || (panels.left && narrowLeft()));
   if (!narrowRight()) {
-    try { localStorage.setItem(PANELS_KEY, JSON.stringify({ left: l, right: r })); } catch { /* per-viewer convenience only */ }
+    try { localStorage.setItem(PANELS_KEY, JSON.stringify(panels)); } catch { /* per-viewer convenience only */ }
   }
+  if (state.meta) renderMenubar(menubar, ctx);
 }
-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); }
+function toggleLeft() { panels.left = !panels.left; applyPanels(); }
+function toggleRight() { panels.right = !panels.right; applyPanels(); }
 scrim.addEventListener("click", () => {
   if (narrowLeft()) panels.left = false;
   if (narrowRight()) panels.right = false;
-  applyPanels(panels);
+  applyPanels();
 });
 
 // ── Context the renderers share ──
 const ctx = {
   theme,
+  panels,
   toggleLeft,
   toggleRight,
   refresh,
-  refreshMeta: async () => { state.meta = await api.get("/api/meta"); },
-  redrawRight: () => renderRight(right, ctx),
+  setTheme(t) { theme.set(t); renderMenubar(menubar, ctx); if (state.right === "settings") renderRight(right, ctx); },
+  newScan(kind, project) { closeMenus(); newScan(ctx, { kind, project }); },
+  about() { about(); },
+  setup() { closeMenus(); setup(ctx); },
+  setUx(ux) {
+    try { localStorage.setItem(UX_KEY, ux); } catch { /* this page only */ }
+    set({ ux, tab: "findings", filter: null });
+    announce(`${ux === "simple" ? "Simple" : "Advanced"} mode`);
+  },
+  /** Setup closed: keep what was chosen, Simple if nothing was. */
+  finishSetup(ux) { ctx.setUx(ux || "simple"); },
+  openTab(tab, project) {
+    const patch = { tab };
+    if (project) patch.sel = { kind: "project", key: project };
+    else if (state.sel.kind !== "all" && state.sel.kind !== "project") patch.sel = { kind: "all", key: null };
+    set(patch);
+  },
   openFinding(f) {
     set({ finding: { id: f.id, project: f.project }, right: "finding" });
-    if (!panels.right) { panels.right = true; applyPanels(panels); }
+    if (!panels.right) { panels.right = true; applyPanels(); }
     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();
-  },
 };
 
 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 });
+  const live = runs.live.find((r) => r.status === "running" && r.pending);
+  set({ overview, findings: findings.findings, runs, ...(live && !state.pending ? { pending: { index: live.pending.index, total: live.pending.total } } : {}) });
 }
 
-// ── Redraw on state changes, one column at a time ──
+// ── Redraw on state changes, one window 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); }
+  if (keys.some((k) => ["overview", "runs", "sel", "meta", "right", "tab", "pending", "ux"].includes(k))) renderMenubar(menubar, ctx);
+  if (keys.some((k) => ["overview", "runs", "sel", "meta"].includes(k))) renderLeft(left, ctx);
+  if (keys.some((k) => ["overview", "sel"].includes(k))) app.dataset.risk = String(riskLevel(countsInView()));
+  if (keys.some((k) => ["overview", "findings", "sel", "tab", "filter", "ux"].includes(k))) {
+    // A live transcript is rebuilt only when the selection changes, never on a data refresh.
+    if (!(state.sel.kind === "run" && !keys.includes("sel"))) renderCenter(center, ctx);
+    if (keys.includes("sel") && narrowLeft() && panels.left) { panels.left = false; applyPanels(); }
   }
-  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); }
+  if (keys.some((k) => ["sel", "right", "finding", "ux"].includes(k)) || (keys.includes("overview") && state.right === "none")) {
+    if (state.right !== "none" && !panels.right) { panels.right = true; applyPanels(); }
     renderRight(right, ctx);
   }
 });
@@ -103,29 +119,52 @@ function isTyping(e) {
   const t = e.target;
   return t instanceof HTMLElement && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName));
 }
+document.addEventListener("pointerdown", (e) => { if (!menubar.contains(e.target)) closeMenus(); });
 document.addEventListener("keydown", (e) => {
   if (e.metaKey || e.ctrlKey || e.altKey) return;
+  if (document.querySelector("dialog[open]")) return; // the dialog owns the keyboard
   if (e.key === "Escape") {
+    if (closeMenus()) return;
     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 (state.right !== "none") { set({ right: "none", finding: null }); return; }
     if ((narrowRight() && panels.right) || (narrowLeft() && panels.left)) scrim.click();
     return;
   }
-  if (isTyping(e)) return;
+  if (isTyping(e) || menubar.contains(e.target)) return;
   if (answerPending(e.key)) { e.preventDefault(); return; }
-  if (e.key === "/") { const q = document.getElementById("q"); if (q) { e.preventDefault(); q.focus(); } return; }
+  const tab = state.ux === "advanced" && TABS.find((t) => t.key === e.key);
+  if (tab) { e.preventDefault(); ctx.openTab(tab.id); return; }
+  if (e.key === "n") { e.preventDefault(); ctx.newScan(); return; }
+  if (e.key === "/") {
+    e.preventDefault();
+    if (state.tab !== "findings" || !(state.sel.kind === "all" || state.sel.kind === "project")) ctx.openTab("findings");
+    document.getElementById("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(); }
 });
 
+if (narrowLeft()) panels.left = false;
+if (narrowRight()) panels.right = false;
+applyPanels();
+
+let savedUx = null;
+try { savedUx = localStorage.getItem(UX_KEY); } catch { /* storage off */ }
+state.ux = savedUx === "advanced" ? "advanced" : "simple";
+
 (async function boot() {
   document.body.append(patternDefs());
   try {
+    await signIn();
     state.meta = await api.get("/api/meta");
+    renderMenubar(menubar, ctx);
+    renderRight(right, ctx);
     await refresh();
-    document.title = `penthera ui${state.meta.demo ? " :: demo" : ""}`;
+    document.title = `Penthera${state.meta.demo ? " :: demo" : ""}`;
+    if (!savedUx) ctx.setup(); // first visit in this browser
   } catch (e) {
     clear(center).append(h("div", { class: "col" },
       h("h1", {}, "Not signed in"),