@giamme/forge 0.8.0 → 0.10.0

package/ui/forge_ui/static/icons.js

@@ -0,0 +1,94 @@
+/* forge-ui icons: one hairline set drawn for forge-ui on a 24-unit grid, 1.5 stroke, round joins, currentColor.
+   States come from CSS (colour, opacity); an icon never carries its own colour. Built with createElementNS: the page CSP
+   refuses markup parsed from strings. Also the model name plate, the one way a model is shown everywhere.
+   window.ForgeIcons = { icon(name, title?) → <svg class="icon icon-<name>">, modelPlate(spec) → <span class="model-plate">, names } */
+window.ForgeIcons = (() => {
+  'use strict';
+  const NS = 'http://www.w3.org/2000/svg';
+  const P = d => ['path', { d }], C = (cx, cy, r) => ['circle', { cx, cy, r }], R = (x, y, width, height, rx = 1.5) => ['rect', { x, y, width, height, rx }];
+  const SET = {
+    map: [R(3, 4, 18, 16, 2), P('M7 9h4v3H7zM13 9h4v6h-4zM7 14h4v2H7')],
+    cloud: [C(12, 12, 2.2), P('M3.5 12c0-2.5 3.8-4.5 8.5-4.5s8.5 2 8.5 4.5-3.8 4.5-8.5 4.5S3.5 14.5 3.5 12Z'), C(18.5, 9.2, 1)],
+    models: [P('M5 20V11M10 20V5M15 20v-7M20 20V8M3 20h18')],
+    search: [C(10.5, 10.5, 6), P('m15 15 5.5 5.5')],
+    bell: [P('M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 1.5h-15Z'), P('M10 20.5a2.2 2.2 0 0 0 4 0')],
+    live: [C(12, 12, 2), P('M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4M5 5a10 10 0 0 0 0 14M19 5a10 10 0 0 1 0 14')],
+    sun: [C(12, 12, 3.8), P('M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4')],
+    moon: [P('M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10Z')],
+    system: [R(3, 4.5, 18, 12, 1.5), P('M9 20h6M12 16.5V20')],
+    immersive: [R(3, 4, 18, 16, 2), R(5.5, 6.5, 4, 8, 1), R(14.5, 6.5, 4, 11, 1)],
+    workbench: [R(3, 4, 18, 16, 2), P('M8 4v16M16 4v16M8 15h8')],
+    'panel-left': [R(3, 4, 18, 16, 2), P('M9 4v16')],
+    'panel-right': [R(3, 4, 18, 16, 2), P('M15 4v16')],
+    'panel-bottom': [R(3, 4, 18, 16, 2), P('M3 14h18')],
+    close: [P('M6 6l12 12M18 6 6 18')],
+    'chevron-down': [P('m6 9 6 6 6-6')],
+    'chevron-up': [P('m6 15 6-6 6 6')],
+    'chevron-right': [P('m9 6 6 6-6 6')],
+    'chevron-left': [P('m15 6-6 6 6 6')],
+    play: [P('M8 5.5v13l10-6.5Z')],
+    pause: [P('M8 5.5v13M16 5.5v13')],
+    plan: [P('M4 5v14M10 5v14M16 5v14'), R(5.5, 7, 3, 3, .8), R(11.5, 9, 3, 3, .8), R(11.5, 14, 3, 3, .8), R(17.5, 11, 3, 3, .8)],
+    exec: [P('M3 5v14'), R(5, 6, 8, 3, 1), R(9, 10.5, 10, 3, 1), R(6, 15, 6, 3, 1)],
+    files: [P('M6 3.5h8l4 4v13H6Z'), P('M14 3.5v4h4M9 12h6M9 15.5h6')],
+    cube: [P('M12 3 20 7.5v9L12 21l-8-4.5v-9Z'), P('M4 7.5 12 12l8-4.5M12 12v9')],
+    square: [R(5, 5, 14, 14, 1.5), P('M5 12h14M12 5v14')],
+    layers: [P('m12 4 9 4.5-9 4.5-9-4.5Z'), P('m3 12.5 9 4.5 9-4.5'), P('m3 16.5 9 4.5 9-4.5')],
+    fit: [P('M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'), R(9, 9, 6, 6, 1)],
+    persp: [P('M3.5 19 8.5 5h7l5 14Z'), P('M10.5 5 9.5 19M13.5 5l1 14M6 12h12')],
+    iso: [P('M12 4.5 18.5 8v8L12 19.5 5.5 16V8Z'), P('M5.5 8 12 11.5 18.5 8M12 11.5v8')],
+    top: [R(4, 4, 16, 16, 2), R(8.5, 8.5, 7, 7, 1)],
+    reset: [P('M4.5 12a7.5 7.5 0 1 0 2.2-5.3'), P('M4.5 4.5v3.5H8')],
+    'zoom-in': [C(11, 11, 6.5), P('m16 16 4.5 4.5M8.5 11h5M11 8.5v5')],
+    'zoom-out': [C(11, 11, 6.5), P('m16 16 4.5 4.5M8.5 11h5')],
+    fullscreen: [P('M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5')],
+    legend: [C(6, 7, 1.5), C(6, 12, 1.5), C(6, 17, 1.5), P('M10 7h9M10 12h9M10 17h6')],
+    help: [C(12, 12, 9), P('M9.5 9.5a2.6 2.6 0 0 1 5 1c0 1.8-2.5 2.2-2.5 3.8'), C(12, 17, .6)],
+    sort: [P('M8 5v14M5 8l3-3 3 3M16 19V5M13 16l3 3 3-3')],
+    'sort-asc': [P('M12 19V5M7 10l5-5 5 5')],
+    'sort-desc': [P('M12 5v14M7 14l5 5 5-5')],
+    columns: [R(3, 4, 18, 16, 2), P('M9 4v16M15 4v16')],
+    grip: [C(9, 7, .9), C(15, 7, .9), C(9, 12, .9), C(15, 12, .9), C(9, 17, .9), C(15, 17, .9)],
+    download: [P('M12 4v11M7.5 10.5 12 15l4.5-4.5M5 19.5h14')],
+    flag: [P('M6 21V4M6 4.5h11l-2.5 4 2.5 4H6')],
+    check: [P('m5 12.5 4.5 4.5L19 7.5')],
+    cross: [P('M6 6l12 12M18 6 6 18')],
+    filter: [P('M4 5h16l-6 7.5V19l-4-2v-4.5Z')],
+    arrow: [P('M5 12h14M13 6l6 6-6 6')],
+    eye: [P('M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'), C(12, 12, 3)],
+    route: [C(5, 17, 2), C(19, 7, 2), P('M7 17h4l2-10h4')],
+    keyboard: [R(2.5, 6, 19, 12, 2), P('M6 10h1M9.5 10h1M13 10h1M16.5 10h1M7 14h10')],
+    chat: [P('M4 5.5h16v10.5H10l-4.5 3.5V16H4Z'), P('M8 9.5h8M8 12.5h5')],
+    terminal: [R(3, 4.5, 18, 15, 2), P('m7 9.5 3 2.5-3 2.5M12.5 15H17')],
+    pencil: [P('M4.5 19.5 5.5 15 15.5 5a2.1 2.1 0 0 1 3 3l-10 10Z'), P('m13.5 7 3 3')],
+    tool: [P('M14.5 5.5a4 4 0 0 0-5 5L4.5 15.5a2.1 2.1 0 0 0 3 3l5-5a4 4 0 0 0 5-5l-2.4 2.4-2.4-.6-.6-2.4Z')],
+    thought: [P('M7 15.5a5 5 0 1 1 8.5-3.5 4 4 0 0 1 2 7.5H8a3 3 0 0 1-1-4Z'), C(6, 20.5, .8)],
+  };
+  function icon(name, title) {
+    const svg = document.createElementNS(NS, 'svg');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('class', 'icon icon-' + name);
+    svg.setAttribute('focusable', 'false');
+    if (title) { const t = document.createElementNS(NS, 'title'); t.textContent = title; svg.append(t); svg.setAttribute('role', 'img'); }
+    else svg.setAttribute('aria-hidden', 'true');
+    for (const [tag, attrs] of SET[name] || SET.square) {
+      const n = document.createElementNS(NS, tag);
+      for (const [k, v] of Object.entries(attrs)) n.setAttribute(k, String(v));
+      svg.append(n);
+    }
+    return svg;
+  }
+  // a model's name plate: the alias engraved, the effort beside it ("luna:high" → LUNA | high); a bare id stays whole
+  function modelPlate(spec) {
+    const s = String(spec || '').trim(), i = s.lastIndexOf(':'), out = document.createElement('span');
+    out.className = 'model-plate'; out.title = s;
+    if (!s) { out.textContent = '—'; out.className = 'muted'; return out; }
+    const name = document.createElement('span'); name.className = 'mp-name'; name.textContent = i > 0 ? s.slice(0, i) : s; out.append(name);
+    if (i > 0 && i < s.length - 1) {                    // the colon stays in the text, for copying and screen readers
+      const c = document.createElement('span'); c.className = 'visually-hidden'; c.textContent = ':';
+      const e = document.createElement('span'); e.className = 'mp-effort'; e.textContent = s.slice(i + 1); out.append(c, e);
+    }
+    return out;
+  }
+  return { icon, modelPlate, names: Object.keys(SET) };
+})();

package/ui/forge_ui/static/index.html

@@ -13,39 +13,57 @@
   } }
   </script>
   <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="preload" href="D-DINCondensed-Bold.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="stylesheet" href="style.css">
+  <script src="theme.js"></script>
+  <script src="icons.js" defer></script>
+  <script src="uikit.js" defer></script>
+  <script src="datatable.js" defer></script>
   <script src="runmodel.js" defer></script>
   <script src="cloudmodel.js" defer></script>
   <script src="modelstats.js" defer></script>
   <script src="graph.js" defer></script>
   <script src="gantt.js" defer></script>
+  <script src="controls.js" defer></script>
   <script src="panel.js" defer></script>
   <script src="diffview.js" defer></script>
+  <script src="convo.js" defer></script>
   <script src="files.js" defer></script>
   <script src="map3d.js" defer></script>
   <script src="cloudui.js" defer></script>
   <script src="leaderboard.js" defer></script>
+  <script src="findingsview.js" defer></script>
+  <script src="rundelete.js" defer></script>
+  <script src="settings.js" defer></script>
   <script src="search.js" defer></script>
   <script src="notify.js" defer></script>
   <script src="app.js" defer></script>
 </head>
-<body>
+<body data-shell="immersive" data-runs="open" data-insp="open" data-tasks="open">
+  <script src="shell.js"></script>
   <header class="topbar">
-    <a class="brand" href="#/">forge-ui</a>
-    <a class="top-link" href="#/">Map of all runs</a>
-    <a class="top-link" href="#/cloud">Run cloud</a>
-    <a class="top-link" href="#/models">Models</a>
-    <span class="muted">Local run viewer · read only</span>
-    <button class="top-search" type="button" data-jump title="Jump to a run, task, project, model or command (/)">Search <kbd>Ctrl K</kbd></button>
-    <button id="bell" class="bell" type="button" aria-label="Notifications"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3a6 6 0 0 0-6 6v3.6L4.3 15.4A1 1 0 0 0 5.2 17h13.6a1 1 0 0 0 .9-1.6L18 12.6V9a6 6 0 0 0-6-6Zm-2.6 15.5a2.7 2.7 0 0 0 5.2 0Z"/></svg><span class="bell-count" hidden></span></button>
-    <label class="refresh-control"><input id="refresh" type="checkbox" checked> Live refresh</label>
+    <a class="brand" href="#/" title="forge-ui · local run viewer"><span class="brand-plate">forge</span><span class="brand-sub">ui</span></a>
+    <nav class="desk-nav" aria-label="Views">
+      <a class="top-link" href="#/">Map</a>
+      <a class="top-link" href="#/cloud">Cloud</a>
+      <a class="top-link" href="#/models">Models</a>
+      <a class="top-link" href="#/settings">Settings</a>
+    </nav>
+    <button class="top-search" type="button" data-jump title="Jump to a run, task, project, model or command (/)"><span class="top-search-label"><span>Search</span></span> <kbd>Ctrl K</kbd></button>
+    <div class="desk-tools">
+      <button id="bell" class="bell" type="button" aria-label="Notifications"><span class="bell-count" hidden></span></button>
+      <label class="refresh-control" title="Poll the runs for changes"><input id="refresh" type="checkbox" checked> Live</label>
+    </div>
   </header>
   <div id="errors" role="status" aria-live="polite" hidden></div>
   <div class="layout">
-    <aside class="sidebar" aria-label="Runs">
-      <div class="sidebar-heading"><h1>Runs</h1><span id="run-count" class="muted"></span></div>
-      <label class="filter-label" for="filter">Filter by goal, repo, ID, path or model</label>
-      <input id="filter" type="search" placeholder="Filter runs…" autocomplete="off">
+    <aside class="sidebar module" aria-label="Runs" data-overlay>
+      <div class="module-head"><h1 class="module-title">Runs</h1><span id="run-count" class="module-count"></span><span class="module-tools"></span></div>
+      <div class="runs-tools">
+        <label class="visually-hidden" for="filter">Filter by goal, repo, ID, path or model</label>
+        <input id="filter" type="search" placeholder="Filter runs…" autocomplete="off">
+        <select id="run-sort" aria-label="Sort the runs"><option value="updated">Latest</option><option value="state">State</option><option value="repo">Repo</option></select>
+      </div>
       <nav id="run-list" aria-label="Choose a run"><p class="empty">Loading runs…</p></nav>
     </aside>
     <main id="main" tabindex="-1"><p class="empty">Loading…</p></main>

package/ui/forge_ui/static/iso.js

@@ -41,14 +41,14 @@ const W = (x, y, z) => new THREE.Vector3(x * TS, z * TS, y * TS);   // plan x ri
 const MONO3 = 'ui-monospace, "SF Mono", Menlo, Consolas, monospace';
 const NOISE = `float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }`;
 const CW = .61;                                          // monospace advance, in em
-// same tokens as the iso figures' light and dark themes
+// the iso figures' light and dark themes, tinted to forge-ui's enamel panel; style.css's --stage-* tokens win when set
 const THEMES = {
-  dark: { bg: 0x121314, body: 0x1b1c1f, line: 0x4f5357, major: 0x393c3f, edge: 0x27292c, sky: 0xdde4ff, ground: 0x080808, hemi: .7, amb: 0, sun: .7, fill: .2, fadeMin: .45 },
-  light: { bg: 0xe9eaea, body: 0xf1f1f0, line: 0x5d6266, major: 0x8a8f93, edge: 0xb9bcbf, sky: 0xffffff, ground: 0xe6e6e6, hemi: .9, amb: 1.6, sun: .35, fill: .15, fadeMin: .8 },
+  dark: { bg: 0x0e1210, body: 0x161c19, line: 0x4f5b54, major: 0x36413b, edge: 0x242c28, recess: 0x0b0e0c, sky: 0xe4efe6, ground: 0x070908, hemi: .7, amb: 0, sun: .7, fill: .2, fadeMin: .45 },
+  light: { bg: 0xc6cec4, body: 0xf3f5f0, line: 0x454f48, major: 0x6f7a72, edge: 0x9aa49b, recess: 0xdce1d9, sky: 0xffffff, ground: 0xdfe5dc, hemi: .9, amb: 1.6, sun: .35, fill: .15, fadeMin: .85 },
 };
 const PAL = {
-  light: { line: '#8e9397', detail: '#c3c6c8', recess: '#dcdddd', ink: '#6a6f73', inkHi: '#16181a', glassOff: '#e4e5e5', glassOn: '#f6ece2', bg: '#f6f6f5' },
-  dark: { line: '#4f5357', detail: '#2b2e30', recess: '#0f1011', ink: '#868b8f', inkHi: '#e6e8e9', glassOff: '#141516', glassOn: '#22170f', bg: '#121314' },
+  light: { line: '#6f7a72', detail: '#a9b2a8', recess: '#dce1d9', ink: '#2c342f', inkHi: '#111613', glassOff: '#e3e7df', glassOn: '#f6ead0', bg: '#f3f5f0' },
+  dark: { line: '#4f5b54', detail: '#28302c', recess: '#0b0e0c', ink: '#86928b', inkHi: '#e4e8e2', glassOff: '#121714', glassOn: '#221d0e', bg: '#0e1210' },
 };
 
 /* ---------- text: wrap and fit monospace print into a box (archivision's figure.js) ---------- */
@@ -287,7 +287,7 @@ export async function createEngine(host, { reduceMotion = false } = {}) {
   function palette() {
     const C = PAL[theme], light = theme === 'light', hi = TMPC.copy(accent).lerp(new THREE.Color(light ? 0x000000 : 0xffffff), light ? .3 : .42);
     PALC = { ...C, acc: '#' + accent.getHexString(), accHi: '#' + hi.getHexString(), light };
-    INKHI.set(C.inkHi); DETAIL.set(light ? '#c3c6c8' : '#34373a'); GLASSON.set(C.glassOn);
+    INKHI.set(C.inkHi); DETAIL.set(C.detail); GLASSON.set(C.glassOn);
   }
   palette();
   const setOp = (m, o) => { m.opacity = o; const t = o < .999; if (m.transparent !== t) { m.transparent = t; m.needsUpdate = true; } };
@@ -391,18 +391,25 @@ export async function createEngine(host, { reduceMotion = false } = {}) {
   const probe = document.createElement('span');
   probe.className = 'stage-probe'; probe.setAttribute('aria-hidden', 'true'); host.append(probe);
   const COLORS = new Map();
+  // a custom property's colour, resolved by the browser (tokens are light-dark() pairs, so the raw value is not a colour)
   function cssColor(className, prop) {
     const key = className + '|' + prop;
     if (!COLORS.has(key)) {
       probe.className = 'stage-probe ' + className;
-      const v = getComputedStyle(probe).getPropertyValue(prop).trim();
+      probe.style.setProperty('color', `var(${prop})`);
+      const cs = getComputedStyle(probe), v = cs.getPropertyValue(prop).trim() ? cs.color : '';
       let c = null; try { if (v) c = new THREE.Color(v); } catch (_) { c = null; }
       COLORS.set(key, c);
     }
     return COLORS.get(key);
   }
-  const statusColor = s => cssColor('st-' + String(s || 'unknown').toLowerCase().replace(/[^a-z0-9_-]/g, ''), '--st') || new THREE.Color('#888888');
-  const statusHex = s => '#' + statusColor(s).getHexString();
+  // a state's lamp as lit on the plate (--st-lit), and as ink for print on it (--st)
+  const stClass = s => 'st-' + String(s || 'unknown').toLowerCase().replace(/[^a-z0-9_-]/g, '');
+  const statusColor = s => cssColor(stClass(s), '--st-lit') || cssColor(stClass(s), '--st') || new THREE.Color('#888888');
+  const statusHex = s => '#' + (cssColor(stClass(s), '--st') || statusColor(s)).getHexString();
+  // a finding severity's colour (--sev on .sev-P0…P3): a ramp of its own, never a status lamp
+  const sevColor = p => cssColor('sev-' + String(p).replace(/[^A-Za-z0-9]/g, ''), '--sev') || statusColor('unknown');
+  const sevHex = p => '#' + sevColor(p).getHexString();
 
   /* ---------- theme: follows the page (prefers-color-scheme), colours from style.css ---------- */
   const themeHooks = new Set();
@@ -413,9 +420,10 @@ export async function createEngine(host, { reduceMotion = false } = {}) {
     const bg = cssColor('', '--stage-bg'), acc = cssColor('', '--stage-accent');
     BG_COL.set(bg || T.bg); scene.background.copy(BG_COL);
     if (acc) accent.copy(acc);
-    bodyMat.color.set(T.body);
-    LINE_COL.set(T.line); MAJOR_COL.set(T.major); EDGE_COL.set(T.edge); appliedKey = '';
-    recessMat.color.set(light ? 0xdcdddd : 0x0f1011);
+    const tok = (name, d) => cssColor('', name) || new THREE.Color(d);
+    bodyMat.color.copy(tok('--stage-body', T.body));
+    LINE_COL.copy(tok('--stage-line', T.line)); MAJOR_COL.copy(tok('--stage-major', T.major)); EDGE_COL.copy(tok('--stage-edge', T.edge)); appliedKey = '';
+    recessMat.color.copy(tok('--stage-recess', T.recess));
     accentLineMat.color.copy(accent);
     hemi.color.set(T.sky); hemi.groundColor.set(T.ground); hemi.intensity = T.hemi; ambient.intensity = T.amb; sun.intensity = T.sun; fill.intensity = T.fill;
     for (const m of glowMats) { m.blending = light ? THREE.NormalBlending : THREE.AdditiveBlending; m.uniforms.light.value = light ? 1 : 0; m.needsUpdate = true; m.visible = !light; }
@@ -425,16 +433,20 @@ export async function createEngine(host, { reduceMotion = false } = {}) {
     for (const t of TXT) if (!t.gone) t.redraw();
     invalidate();
   }
+  // the page's theme: forge-ui's own switch (theme.js) when it is there, else the system setting
   const media = matchMedia('(prefers-color-scheme: light)');
-  const onScheme = () => setTheme(media.matches ? 'light' : 'dark');
+  const resolved = () => window.ForgeTheme ? window.ForgeTheme.resolved() : media.matches ? 'light' : 'dark';
+  const onScheme = () => setTheme(resolved());
   media.addEventListener('change', onScheme);
+  window.addEventListener('forge-theme', onScheme);
 
   function applyWeight() {
     const dist = camera.position.distanceTo(controls.target);
     const ppm = camera === ortho ? VH * ortho.zoom / orthoH : VH / (dist * fovK());
     const k = THREE.MathUtils.clamp((ppm / 40 - .35) / .65, 0, 1);
     const fm = THEMES[theme].fadeMin, fade = fm + (1 - fm) * k, dpr = renderer.getPixelRatio();
-    const key = fade.toFixed(2) + '|' + dpr + '|' + theme + '|' + (camera === ortho); if (key === appliedKey) return; appliedKey = key;
+    // orthographic zoom too: a screen sprite's world size follows it
+    const key = fade.toFixed(2) + '|' + dpr + '|' + theme + '|' + (camera === ortho ? ortho.zoom.toFixed(4) : 'p'); if (key === appliedKey) return; appliedKey = key;
     lineMat.linewidth = majorMat.linewidth = dpr; accentLineMat.linewidth = 1.6 * dpr;
     lineMat.color.copy(BG_COL).lerp(EDGE_COL, fade);
     majorMat.color.copy(BG_COL).lerp(MAJOR_COL, fade);
@@ -443,6 +455,8 @@ export async function createEngine(host, { reduceMotion = false } = {}) {
     for (const f of weightHooks) f();
   }
   const weightHooks = new Set();
+  // screen pixels per plan unit at the point the camera looks at
+  const pxPerUnit = () => (camera === ortho ? VH * ortho.zoom / orthoH : VH / (camera.position.distanceTo(controls.target) * fovK())) * TS;
 
   /* ---------- camera: frame a box, keeping the user's angle ---------- */
   const fovK = () => 2 * Math.tan(THREE.MathUtils.degToRad(persp.fov / 2));
@@ -484,14 +498,33 @@ export async function createEngine(host, { reduceMotion = false } = {}) {
     let D = .5;
     for (const p0 of pts) {
       const p = p0.clone().sub(c), px = p.dot(r), py = p.dot(u), pz = p.dot(f);
-      D = Math.max(D, Math.abs(px) / (th * fw * .96) - pz, Math.abs(py) / (tv * fh * .92) - pz);
+      D = Math.max(D, Math.abs(px) / (th * fw * .97) - pz, Math.abs(py) / (tv * fh * .95) - pz);
     }
     // what is framed sits in the middle of the uncovered part of the stage
     c.addScaledVector(r, -(I.l - I.r) / VW * D * th).addScaledVector(u, (I.t - I.b) / VH * D * tv);
     return { c, D };
   }
+  // the stage covered by modules floating over it (marked data-overlay): a tall one covers a side, a wide one a top or bottom
+  function overlayInset() {
+    const H = host.getBoundingClientRect(), I = { l: 0, r: 0, t: 0, b: 0 };
+    if (!H.width || !H.height) return I;
+    const full = document.fullscreenElement;
+    for (const n of document.querySelectorAll('[data-overlay]')) {
+      if (full && !full.contains(n)) continue;              // full screen: the modules are behind the stage
+      const R = n.getBoundingClientRect();
+      if (!R.width || !R.height || R.right <= H.left || R.left >= H.right || R.bottom <= H.top || R.top >= H.bottom) continue;
+      const cl = Math.max(R.left, H.left), cr = Math.min(R.right, H.right), ct = Math.max(R.top, H.top), cb = Math.min(R.bottom, H.bottom);
+      if (cb - ct > H.height * .5) { if (cl - H.left < H.right - cr) I.l = Math.max(I.l, cr - H.left); else I.r = Math.max(I.r, H.right - cl); }
+      else if (ct - H.top < H.bottom - cb) I.t = Math.max(I.t, cb - H.top); else I.b = Math.max(I.b, H.bottom - ct);
+    }
+    return I;
+  }
+  // the last framing, redone when the stage changes size, until the user moves the camera themselves
+  let autoFrame = null;
   function frameBox(bx, dur = 900, minEl = 26, dirOverride = null, inset = null) {
     resize();                                               // the host may have just been shown or moved: fit its real size
+    autoFrame = { bx, minEl, dirOverride, inset };
+    if (!inset) inset = overlayInset();
     let dir = dirOverride ? dirOverride.clone().normalize() : camera.position.clone().sub(controls.target);
     dir = dir.lengthSq() > 1e-8 ? dir.normalize() : DIR_ISO.clone();
     const el = Math.asin(THREE.MathUtils.clamp(dir.y, -1, 1)), lo = THREE.MathUtils.degToRad(minEl);
@@ -515,6 +548,22 @@ export async function createEngine(host, { reduceMotion = false } = {}) {
     if (k >= 1) { controls.enableDamping = true; CAMT = null; }
     return true;
   }
+  // closer (k > 1) or farther (k < 1) toward what the camera looks at, as a short glide; the angle stays
+  function zoomBy(k, dur = 260) {
+    settleCam();
+    const off = camera.position.clone().sub(controls.target);
+    let zoom = null;
+    if (camera === ortho) zoom = THREE.MathUtils.clamp(ortho.zoom * k, .05, 40);
+    else off.setLength(THREE.MathUtils.clamp(off.length() / k, controls.minDistance || .01, controls.maxDistance));
+    autoFrame = null;
+    if (reduceMotion || dur <= 1) {
+      camera.position.copy(controls.target).add(off);
+      if (zoom) { ortho.zoom = zoom; ortho.updateProjectionMatrix(); }
+      invalidate(); return;
+    }
+    CAMT = { t0: performance.now(), dur, fromT: controls.target.clone(), fromO: camera.position.clone().sub(controls.target), fromZ: zoom ? ortho.zoom : null, to: { t: controls.target.clone(), off, zoom } };
+    controls.enableDamping = false; invalidate();
+  }
   const cancelCam = () => { if (CAMT) { controls.enableDamping = true; CAMT = null; } };
   const settleCam = () => { if (CAMT) { camStep(CAMT.t0 + CAMT.dur + 1); controls.update(); } };   // jump to where a glide ends (tests)
 
@@ -544,6 +593,7 @@ export async function createEngine(host, { reduceMotion = false } = {}) {
     else if (!raf) last = 0;
   }
   controls.addEventListener('change', () => invalidate());
+  controls.addEventListener('start', () => { autoFrame = null; });
   const onVisibility = () => { visible = document.visibilityState === 'visible'; if (visible) invalidate(); };
   document.addEventListener('visibilitychange', onVisibility);
   const io = typeof IntersectionObserver === 'function' ? new IntersectionObserver(es => { onScreen = es.some(e => e.isIntersecting); if (onScreen) invalidate(); }) : null;
@@ -556,6 +606,7 @@ export async function createEngine(host, { reduceMotion = false } = {}) {
     const res = devRes();
     outlineMat.uniforms.res.value.copy(res); lineMat.resolution.copy(res); majorMat.resolution.copy(res); accentLineMat.resolution.copy(res);
     appliedKey = ''; invalidate();
+    if (autoFrame) { const f = autoFrame; frameBox(f.bx, 0, f.minEl, f.dirOverride, f.inset); }
   }
   const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(resize) : null;
   if (ro) ro.observe(host);
@@ -740,7 +791,7 @@ export async function createEngine(host, { reduceMotion = false } = {}) {
   }
   function dispose() {
     disposed = true; if (raf) cancelAnimationFrame(raf); raf = 0;
-    media.removeEventListener('change', onScheme); document.removeEventListener('visibilitychange', onVisibility);
+    media.removeEventListener('change', onScheme); window.removeEventListener('forge-theme', onScheme); document.removeEventListener('visibilitychange', onVisibility);
     if (io) io.disconnect(); if (ro) ro.disconnect();
     controls.dispose(); disposeGroup(scene); target.dispose(); composer.dispose && composer.dispose(); renderer.dispose();
     canvas.remove(); probe.remove();
@@ -756,9 +807,9 @@ export async function createEngine(host, { reduceMotion = false } = {}) {
     glowPoints, softMat, fat, loopL, noRay, rbox, inset, seg, polyLine, cumLen, alongPts, moveGlow, roundRect,
     mats, lmat, paint, lineCol, setOp, solid, loopAt, roofPlate, cone,
     tplane, release, roofAt, frontAt, lines, rr, font, fit, wrap, ellipsis, pxIn,
-    ends, curve, arc, statusColor, statusHex, cssColor,
-    frameBox, fitFor, cancelCam, settleCam, setOrtho, isOrtho: () => camera === ortho, invalidate, tickers, themeHooks, weightHooks,
-    pick, pickHit, rayAt, project, handlers, disposeGroup, dispose, reduceMotion, now: () => NOW,
+    ends, curve, arc, statusColor, statusHex, sevColor, sevHex, cssColor,
+    frameBox, fitFor, zoomBy, cancelCam, settleCam, setOrtho, overlayInset, isOrtho: () => camera === ortho, invalidate, tickers, themeHooks, weightHooks,
+    pick, pickHit, rayAt, project, pxPerUnit, handlers, disposeGroup, dispose, reduceMotion, now: () => NOW,
     setProfile, get profile() { return profile; }, unitSolid, solidFrom, disposeShared, sprite, outlineInstanced, mixColor,
     LineSegments2, LineSegmentsGeometry, creaseLines,
   };

package/ui/forge_ui/static/leaderboard.js

@@ -63,8 +63,9 @@ window.ForgeLeaderboard = (() => {
   function modelCell(alias, ctx, few) {
     const td = el('td', undefined, 'lb-model');
     const href = ctx.modelHref ? ctx.modelHref(alias) : null;
-    if (href) { const a = el('a', alias, 'mono lb-alias'); a.href = href; a.title = 'show its runs in the cloud'; td.append(a); }
-    else td.append(el('span', alias, 'mono'));
+    const plate = window.ForgeIcons ? window.ForgeIcons.modelPlate(alias) : el('span', alias, 'mono');
+    if (href) { const a = el('a', undefined, 'lb-alias'); a.href = href; a.title = 'show its runs in the cloud'; a.append(plate); td.append(a); }
+    else td.append(plate);
     if (few) { const s = el('span', 'few', 'lb-few'); s.title = few; td.append(s); }
     return td;
   }
@@ -96,11 +97,6 @@ window.ForgeLeaderboard = (() => {
     td.title = `input ${count(t.input)} (cached ${count(t.cached)}) · output ${count(t.output)} · recorded by ${count(used)} of ${plural(total, unit)}`;
     return td;
   }
-  function head(table, cols) {
-    const thead = el('thead'), tr = el('tr');
-    for (const [label, cls, title] of cols) { const th = el('th', label, cls || ''); th.scope = 'col'; if (title) th.title = title; tr.append(th); }
-    thead.append(tr); table.append(thead);
-  }
 
   /* ---------- implementers ---------- */
   const IMPL_COLS = [
@@ -116,31 +112,31 @@ window.ForgeLeaderboard = (() => {
     ['Median model time', 'lb-num', 'Median time in the model phase per attempt'],
     ['Tokens in / out', 'lb-num', 'Summed over the attempts that recorded tokens'],
   ];
+  const colsOf = (spec, cells) => spec.map(([label, cls, title], i) => ({ ...cells[i], label, cls, title }));
+  // a sortable, reorderable table (datatable.js); one set of preferences per kind of table, shared by its copies
+  function table(id, label, columns, rows, ctx, rowClass) {
+    const host = el('div', undefined, 'lb-dt');
+    window.ForgeTable.render(host, { id, label, columns, rows, className: 'lb-table', rowClass,
+      prefs: ctx.tablePrefs ? ctx.tablePrefs(id) : null, savePrefs: p => ctx.saveTablePrefs && ctx.saveTablePrefs(id, p) });
+    return host;
+  }
   function implementerTable(rows, ctx, minN, caption) {
-    const wrap = el('div', undefined, 'table-scroll'), table = el('table', undefined, 'lb-table');
-    table.append(el('caption', caption, 'visually-hidden'));
-    head(table, IMPL_COLS);
-    const body = el('tbody');
-    for (const r of rows) {
-      const tr = el('tr', undefined, r.small ? 'lb-small' : '');
-      const reasons = Object.entries(r.first.reasons).map(([k, v]) => `${v} ${k.replace(/_/g, ' ')}`).join(', ');
-      const tk = r.timeoutKinds;
-      tr.append(
-        modelCell(r.alias, ctx, r.small ? `Fewer than ${plural(minN, 'first-attempt outcome')}: too few to rank` : ''),
-        numCell(r.tasks),
-        rateCell(r.first),
-        numCell(r.first.censored, reasons || undefined),
-        numCell(r.retries),
-        numCell(r.escalationsAway),
-        numCell(r.timeouts, r.timeouts ? `implementer ${tk.implementer} · reviewer ${tk.reviewer} · forge ${tk.forge}` : undefined),
-        numCell(r.gateAccepts),
-        numCell(r.humanAccepts),
-        numCell(dur(r.medianModelS), `median wall time per attempt ${dur(r.medianDurationS)}`),
-        tokenCell(r.tokens, r.attempts.total, 'attempt'));
-      body.append(tr);
-    }
-    table.append(body); wrap.append(table);
-    return wrap;
+    const tk = r => r.timeoutKinds;
+    const columns = colsOf(IMPL_COLS, [
+      { id: 'model', value: r => r.alias, cell: r => modelCell(r.alias, ctx, r.small ? `Fewer than ${plural(minN, 'first-attempt outcome')}: too few to rank` : '') },
+      { id: 'tasks', value: r => r.tasks, cell: r => numCell(r.tasks) },
+      { id: 'pass', value: r => r.first.n ? r.first.lo : null, cell: r => rateCell(r.first) },
+      { id: 'censored', value: r => r.first.censored, cell: r => numCell(r.first.censored, Object.entries(r.first.reasons).map(([k, v]) => `${v} ${k.replace(/_/g, ' ')}`).join(', ') || undefined) },
+      { id: 'retries', value: r => r.retries, cell: r => numCell(r.retries) },
+      { id: 'escalated', value: r => r.escalationsAway, cell: r => numCell(r.escalationsAway) },
+      { id: 'timeouts', value: r => r.timeouts, cell: r => numCell(r.timeouts, r.timeouts ? `implementer ${tk(r).implementer} · reviewer ${tk(r).reviewer} · forge ${tk(r).forge}` : undefined) },
+      { id: 'gate', value: r => r.gateAccepts, cell: r => numCell(r.gateAccepts) },
+      { id: 'human', value: r => r.humanAccepts, cell: r => numCell(r.humanAccepts) },
+      { id: 'model-time', value: r => num(r.medianModelS), cell: r => numCell(dur(r.medianModelS), `median wall time per attempt ${dur(r.medianDurationS)}`) },
+      { id: 'tokens', value: r => (r.tokens.attempts ?? r.tokens.reviews) ? (r.tokens.input || 0) + (r.tokens.output || 0) : null, cell: r => tokenCell(r.tokens, r.attempts.total, 'attempt') },
+    ]);
+    columns[2].title += '. Sorts by the lower end of the interval, as the ranking does';
+    return table('implementers', caption, columns, rows, ctx, r => r.small ? 'lb-small' : '');
   }
 
   /* ---------- reviewers ---------- */
@@ -176,7 +172,7 @@ window.ForgeLeaderboard = (() => {
     const avg = r.findings[s];
     if (avg === null) return numCell('—', 'No review reply could be read');
     const td = numCell(avg === 0 ? 0 : avg.toFixed(avg < 10 ? 2 : 1), `${count(r.findingTotals[s])} confirmed ${s} over ${plural(r.findings.n, 'review')}`);
-    if (s === 'P0' && avg > 0) td.classList.add('lb-p0', 'st-fail');
+    if (s === 'P0' && avg > 0) td.classList.add('lb-p0');
     return td;
   }
   function agreementCell(a) {
@@ -187,25 +183,25 @@ window.ForgeLeaderboard = (() => {
     return td;
   }
   function reviewerTable(rows, ctx) {
-    const wrap = el('div', undefined, 'table-scroll'), table = el('table', undefined, 'lb-table');
-    table.append(el('caption', 'Reviewers', 'visually-hidden'));
-    head(table, REV_COLS);
-    const body = el('tbody');
-    for (const r of rows) {
-      const tr = el('tr');
-      tr.append(modelCell(r.alias, ctx, ''), numCell(r.reviews.primary), numCell(r.reviews.shadow), numCell(r.reviews.final), verdictCell(r.verdicts),
-        ...MS.SEVERITIES.map(s => findingCell(r, s)), agreementCell(r.agreement), numCell(dur(r.medianDurationS)), tokenCell(r.tokens, r.reviews.total, 'review'));
-      body.append(tr);
-    }
-    table.append(body); wrap.append(table);
-    return wrap;
+    const columns = colsOf(REV_COLS, [
+      { id: 'model', value: r => r.alias, cell: r => modelCell(r.alias, ctx, '') },
+      { id: 'primary', value: r => r.reviews.primary, cell: r => numCell(r.reviews.primary) },
+      { id: 'shadow', value: r => r.reviews.shadow, cell: r => numCell(r.reviews.shadow) },
+      { id: 'final', value: r => r.reviews.final, cell: r => numCell(r.reviews.final) },
+      { id: 'verdicts', value: r => { const v = r.verdicts, t = v.PASS + v.FAIL + v.other; return t ? v.PASS / t : null; }, cell: r => verdictCell(r.verdicts) },
+      ...MS.SEVERITIES.map(sv => ({ id: 'sev-' + sv, value: r => r.findings[sv], cell: r => findingCell(r, sv) })),
+      { id: 'agreement', value: r => r.agreement.n ? r.agreement.p : null, cell: r => agreementCell(r.agreement) },
+      { id: 'time', value: r => num(r.medianDurationS), cell: r => numCell(dur(r.medianDurationS)) },
+      { id: 'tokens', value: r => (r.tokens.attempts ?? r.tokens.reviews) ? (r.tokens.input || 0) + (r.tokens.output || 0) : null, cell: r => tokenCell(r.tokens, r.reviews.total, 'review') },
+    ]);
+    return table('reviewers', 'Reviewers', columns, rows, ctx);
   }
 
   /* ---------- header, caveat and filters ---------- */
   function header(L, O, f, update, withNote) {
     const t = L.totals, frag = document.createDocumentFragment();
     const top = el('header', undefined, 'lb-head');
-    top.append(el('h1', 'Models'), el('p', `${plural(t.runs, 'run')} · ${plural(t.tasks, 'task')} · ${plural(t.attempts, 'attempt')} · ${plural(t.reviews, 'review')} counted`, 'muted lb-summary'));
+    top.append(el('h1', 'Models', 'module-title'), el('p', `${plural(t.runs, 'run')} · ${plural(t.tasks, 'task')} · ${plural(t.attempts, 'attempt')} · ${plural(t.reviews, 'review')} counted`, 'muted lb-summary'));
     const note = el('div', undefined, 'lb-caveat'); note.setAttribute('role', 'note');
     const p = el('p');
     p.append(el('strong', 'Observational, not causal. '), document.createTextNode('Forge routes each task to a model by its difficulty and by how models did before, so a model sent the hard tasks looks worse here than it is. Exploratory picks, the tasks where forge drew the model at random, are the fairest comparison.'));
@@ -276,12 +272,12 @@ window.ForgeLeaderboard = (() => {
       root.append(emptyNote('No tasks or reviews match these filters.', [], reset));
     } else {
       const impl = el('section', undefined, 'lb-section');
-      impl.append(el('h2', 'Implementers'), el('p', 'Each task counts once, for the model that ran its first attempt; retries, escalations and accepts show what happened after. Ranked by the lower end of the 95% interval, so a high rate on few tasks does not jump the table.', 'lb-lead'));
+      impl.append(el('h2', 'Implementers', 'plate'), el('p', 'Each task counts once, for the model that ran its first attempt; retries, escalations and accepts show what happened after. Ranked by the lower end of the 95% interval, so a high rate on few tasks does not jump the table.', 'lb-lead'));
       impl.append(L.implementers.length ? implementerTable(L.implementers, ctx, f.minN, 'Implementers') : el('p', 'No attempts with a recorded model match these filters.', 'muted'));
       root.append(impl);
       if (!f.difficulty && L.implementers.length) {
         const by = el('section', undefined, 'lb-section');
-        by.append(el('h2', 'By difficulty'), el('p', 'The same table for the tasks of one declared difficulty: the comparison routing distorts least.', 'lb-lead'));
+        by.append(el('h2', 'By difficulty', 'plate'), el('p', 'The same table for the tasks of one declared difficulty: the comparison routing distorts least.', 'lb-lead'));
         for (const d of MS.DIFFS) {
           const rows = L.byDifficulty[d];
           if (!rows.length) continue;
@@ -299,7 +295,7 @@ window.ForgeLeaderboard = (() => {
         root.append(by);
       }
       const rev = el('section', undefined, 'lb-section');
-      rev.append(el('h2', 'Reviewers'), el('p', 'Primary reviews of each attempt, shadow reviews run beside them and final reviews of a whole run. Findings are confirmed findings per review.', 'lb-lead'));
+      rev.append(el('h2', 'Reviewers', 'plate'), el('p', 'Primary reviews of each attempt, shadow reviews run beside them and final reviews of a whole run. Findings are confirmed findings per review.', 'lb-lead'));
       rev.append(L.reviewers.length ? reviewerTable(L.reviewers, ctx) : el('p', 'No reviews with a recorded model match these filters.', 'muted'));
       root.append(rev);
     }