@giamme/forge 0.8.0 → 0.9.0

package/ui/forge_ui/static/diffview.js

@@ -1,12 +1,11 @@
 /* forge-ui diff viewer: a task's diff (current, previous, committed, or exactly what one reviewer read), a final
    review's combined diff or a Fractal node's candidate, with each review finding shown under the line it points
    at. Defines window.ForgeDiff.render(host, ctx). All API values enter the DOM as text.
-   ctx = { run, spec: {kind: 'task'|'final'|'fractal', task, source, file, name, node}, fetchJSON(path),
+   ctx = { run, spec: {kind: 'task'|'final'|'fractal', task, source, file, name, node, finding}, fetchJSON(path),
            rerender(), href(spec) → hash, closeHref }. */
 window.ForgeDiff = (() => {
   'use strict';
   const list = v => Array.isArray(v) ? v : [];
-  const SEV = { P0: 'fail', P1: 'conflict', P2: 'timeout', P3: 'unknown' };
   const RANK = { P0: 0, P1: 1, P2: 2, P3: 3 };
   const BUDGET = 4000;                                       // lines drawn before the rest of the files wait for a click
   const cache = new Map();                                   // url → {data, error, pending, fresh}
@@ -18,6 +17,7 @@ window.ForgeDiff = (() => {
     return n;
   }
   const chip = (text, st) => el('span', text, 'chip st-' + st);
+  const sevChip = (text, sev) => el('span', text, 'chip sev-chip sev-' + (/^P[0-3]$/.test(sev) ? sev : 'none'));
   const enc = encodeURIComponent;
   const TASK_FILES = new Set(['current', 'prev', 'committed', 'existing']);
   function urlFor(run, spec) {
@@ -47,8 +47,9 @@ window.ForgeDiff = (() => {
   /* ---------- one finding, as a row under its line or in a list ---------- */
   function findingBox(f, where) {
     const box = el('div', undefined, 'diff-finding sev-' + (f.severity || 'P3'));
+    if (f.id) box.dataset.finding = f.id;                    // a mark on the stage opens the diff at this finding
     const head = el('div', undefined, 'diff-finding-head');
-    head.append(chip(f.severity || '?', SEV[f.severity] || 'unknown'));
+    head.append(sevChip(f.severity || '?', f.severity));
     if (f.status) head.append(el('span', f.status.toLowerCase(), 'tag'));
     const r = f.review || {};
     head.append(el('span', `${r.kind || 'review'}${r.attempt != null ? ' · attempt ' + r.attempt : ''}${r.spec ? ' · ' + r.spec : ''}`, 'muted'));
@@ -66,7 +67,7 @@ window.ForgeDiff = (() => {
     const st = { modified: 'running', added: 'merged', deleted: 'fail', renamed: 'nochanges', copied: 'nochanges' }[f.status] || 'unknown';
     head.append(chip(f.status, st));
     const name = el('a', f.status === 'renamed' || f.status === 'copied' ? `${f.old} → ${f.new}` : pathOf(f), 'mono diff-path');
-    name.href = ctx.href({ ...ctx.spec, file: pathOf(f) });
+    name.href = ctx.href({ ...ctx.spec, finding: null, file: pathOf(f) });
     head.append(name, el('span', `+${f.additions} −${f.deletions}`, 'diff-stat'));
     if (f.binary) head.append(el('span', 'binary', 'tag'));
     if (f.truncated) head.append(el('span', 'cut short', 'tag'));
@@ -118,15 +119,20 @@ window.ForgeDiff = (() => {
   function render(host, ctx) {
     const run = ctx.run, spec = ctx.spec, url = urlFor(run, spec), entry = load(ctx, url);
     // a poll that brought nothing new leaves thousands of rows alone
-    const sig = [url, entry.at || 0, !!entry.error, spec.file, opened.size].join('|');
+    const sig = [url, entry.at || 0, !!entry.error, spec.file, spec.finding, opened.size].join('|');
     if (host.diffSig === sig) return;
     host.diffSig = sig;
+    // the finding the keyboard is on keeps it through the rebuild (a poll, a fold)
+    const had = document.activeElement && host.contains(document.activeElement) && document.activeElement.closest('[data-finding]');
+    const keep = had ? had.dataset.finding : null;
     host.replaceChildren();
     const D = entry.data;
     const top = el('div', undefined, 'diff-top');
     const what = spec.kind === 'final' ? 'Final review' : spec.kind === 'fractal' ? `${spec.task} · Fractal node ${spec.node}` : spec.task === 'solo' && run.kind === 'solo' ? 'Solo run' : `Task ${spec.task}`;
     const title = el('h2'); title.append(el('span', 'Diff · ', 'muted'), document.createTextNode(what)); top.append(title);
-    const close = el('a', 'Close ✕', 'diff-close'); close.href = ctx.closeHref; top.append(close);
+    const close = el('a', undefined, 'diff-close button'); close.href = ctx.closeHref;
+    if (window.ForgeIcons) close.append(window.ForgeIcons.icon('close'));
+    close.append(document.createTextNode('Close')); top.append(close);
     host.append(top);
     if (!D) {
       host.append(el('p', entry.error ? (entry.error.snapshot ? 'This diff is not in this export.' : `Could not load this diff (${entry.error.status === 404 ? 'not found' : entry.error.message}).`) : 'Loading the diff…', entry.error ? 'warn' : 'muted'));
@@ -140,7 +146,7 @@ window.ForgeDiff = (() => {
       const cur = spec.kind === 'final' ? spec.name : spec.kind === 'fractal' ? 'candidate' : spec.source || 'current';
       for (const s of sources) {
         const a = el('a', s.label || s.id, 'diff-source'); a.setAttribute('aria-current', String(s.id === cur));
-        a.href = spec.kind === 'final' ? ctx.href({ kind: 'final', name: s.id }) : ctx.href({ ...spec, source: s.id, file: null });
+        a.href = spec.kind === 'final' ? ctx.href({ kind: 'final', name: s.id }) : ctx.href({ ...spec, source: s.id, file: null, finding: null });
         if (s.verdict) a.append(document.createTextNode(' '), chip(s.verdict, String(s.verdict).toLowerCase()));
         a.title = `${s.bytes != null ? s.bytes + ' bytes' : ''}${s.kind ? ' · ' + s.kind : ''}`;
         bar.append(a);
@@ -166,13 +172,13 @@ window.ForgeDiff = (() => {
     const nav = el('nav', undefined, 'diff-files'); nav.setAttribute('aria-label', 'Files in this diff');
     const ul = el('ul');
     files.forEach((f, fi) => {
-      const li = el('li'), a = el('a', undefined, 'diff-file-link'); a.href = ctx.href({ ...spec, file: pathOf(f) }); a.dataset.fi = String(fi);
+      const li = el('li'), a = el('a', undefined, 'diff-file-link'); a.href = ctx.href({ ...spec, finding: null, file: pathOf(f) }); a.dataset.fi = String(fi);
       const p = pathOf(f), cut = p.lastIndexOf('/');
       a.append(el('span', cut >= 0 ? p.slice(0, cut + 1) : '', 'diff-dir'), el('span', cut >= 0 ? p.slice(cut + 1) : p, 'diff-base'));
       const stat = el('span', undefined, 'diff-stat'); stat.append(el('span', `+${f.additions}`, 'diff-add'), document.createTextNode(' '), el('span', `−${f.deletions}`, 'diff-del'));
       a.append(stat);
       const ps = byFile.get(fi) || [];
-      if (ps.length) { const w = worst(ps.map(x => x.f)); a.append(chip(`${ps.length}`, SEV[w] || 'unknown')); a.title = `${ps.length} finding${ps.length === 1 ? '' : 's'}, worst ${w}`; }
+      if (ps.length) { const w = worst(ps.map(x => x.f)); a.append(sevChip(`${ps.length}`, w)); a.title = `${ps.length} finding${ps.length === 1 ? '' : 's'}, worst ${w}`; }
       if (spec.file && spec.file === p) a.setAttribute('aria-current', 'true');
       li.append(a); ul.append(li);
     });
@@ -207,7 +213,20 @@ window.ForgeDiff = (() => {
         fileEls[i].scrollIntoView({ block: 'start' }); e.preventDefault();
       }
     };
-    if (spec.file) {
+    const flash = n => { n.classList.add('flash'); setTimeout(() => n.classList.remove('flash'), 1600); };
+    const back = keep && order.find(n => n.dataset.finding === keep);
+    if (back) back.focus({ preventScroll: true });
+    if (spec.finding) {
+      const target = order.find(n => n.dataset.finding === spec.finding);
+      if (target && host.dataset.scrolledTo !== url + '\n#' + spec.finding) {
+        host.dataset.scrolledTo = url + '\n#' + spec.finding; fIdx = order.indexOf(target);
+        requestAnimationFrame(() => {
+          const live = target.isConnected ? target : [...host.querySelectorAll('.diff-finding[id]')].find(n => n.dataset.finding === spec.finding);
+          if (!live) return;
+          live.scrollIntoView({ block: 'center' }); flash(live); live.focus({ preventScroll: true });
+        });
+      }
+    } else if (spec.file) {
       const target = fileEls.find(s => s.dataset.path === spec.file);
       if (target && host.dataset.scrolledTo !== url + '\n' + spec.file) { host.dataset.scrolledTo = url + '\n' + spec.file; requestAnimationFrame(() => target.scrollIntoView({ block: 'start' })); }
     }

package/ui/forge_ui/static/findings3d.js

@@ -0,0 +1,134 @@
+/* forge-ui finding beacons: every review finding as a small mark over the stage. Its shape is its severity
+   (P0 spike, P1 diamond, P2 cone, P3 pin, no severity a ring), drawn like the blocks: a hairline in its --sev-*
+   colour over a translucent fill of the same, on a short post, its foot on the block it is about; a confirmed
+   finding is full size and fuller, a plausible one smaller and paler. Seen from straight above (the top-down
+   projection) the marks lie flat, so each keeps its silhouette. scene3d.js says where each one stands (an anchor
+   that follows its block as it lifts, opens or travels); this module draws them, one instanced mesh per shape
+   with the engine's hairline outline, and picks them. Marks stand still, so an idle stage draws no frames; one
+   that arrives (a new finding on a poll, one a replay reaches, one moving onto an opened task) drops in. */
+export const SHAPES = ['P0', 'P1', 'P2', 'P3', 'none'];
+const MAX = 512;                                           // marks per shape
+const SIZE = 18;                                           // plan units per unit of the shapes below: a mark stands ~40 tall
+const MIN_PX = 28;                                         // a mark stands at least this tall on screen while the plate is near
+const FAR_PPU = .5;                                        // screen px per plan unit below which that floor shrinks with the plate, to half
+const TALL = 2.2;                                          // a mark's height in shape units (post and head)
+
+export function createBeacons(E, { reduce = false } = {}) {
+  const { THREE, W, TS } = E;
+  const POST = .3;                                         // the post's height; every head sits on it
+  const post = () => new THREE.CylinderGeometry(.035, .035, POST, 6).translate(0, POST / 2, 0);
+  const geo = {
+    P0: mergeTwo(THREE, new THREE.ConeGeometry(.42, 1.6, 4).translate(0, POST + .8, 0), post()),
+    P1: mergeTwo(THREE, new THREE.OctahedronGeometry(.62).scale(1, 1.3, 1).translate(0, POST + .8, 0), post()),
+    P2: mergeTwo(THREE, new THREE.ConeGeometry(.62, 1.2, 16).rotateX(Math.PI).translate(0, POST + .6, 0), post()),
+    P3: mergeTwo(THREE, new THREE.SphereGeometry(.5, 18, 12).translate(0, POST + .48, 0), post()),
+    none: mergeTwo(THREE, new THREE.TorusGeometry(.5, .12, 8, 24).translate(0, POST + .56, 0), post()),
+  };
+  const group = new THREE.Group(); group.name = 'beacons';
+  const meshes = {}, outlines = {};
+  for (const k of SHAPES) {
+    const m = new THREE.InstancedMesh(geo[k], new THREE.MeshBasicMaterial({ toneMapped: false, transparent: true, depthWrite: false }), MAX);
+    m.count = 0; m.frustumCulled = false; m.userData = { beacons: k }; m.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+    m.setColorAt(0, new THREE.Color());                    // allocates the per-instance colours
+    const o = new THREE.InstancedMesh(geo[k], E.outlineInstanced(), MAX);
+    o.material.side = THREE.BackSide; o.count = 0; o.frustumCulled = false; o.instanceMatrix = m.instanceMatrix; o.raycast = () => {};
+    group.add(m, o); meshes[k] = m; outlines[k] = o;
+  }
+  let unit = SIZE;                                         // plan units per shape unit this frame (marks grow when far away)
+  let items = [], byShape = Object.fromEntries(SHAPES.map(k => [k, []])), seen = null, visible = true, hot = null, flat = false;
+  const FLAT = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), -Math.PI / 2);   // the head toward the top of the screen
+  const M4 = new THREE.Matrix4(), Q = new THREE.Quaternion(), S = new THREE.Vector3(), P = new THREE.Vector3(), C = new THREE.Color();
+  const ez = t => 1 - Math.pow(1 - t, 3);
+
+  // items: [{key, sev: 'P0'..'P3'|null, plausible, anchor() → [x, y, z, scale?] in plan units | null (hidden), data}]
+  function set(next) {
+    const now = performance.now(), first = seen === null;
+    seen = seen || new Set();
+    items = next.map(it => ({ ...it, shape: SHAPES.includes(it.sev) ? it.sev : 'none', born: first || seen.has(it.key) || reduce ? -Infinity : now,
+      phase: (hash(it.key) % 628) / 100 }));
+    for (const it of items) seen.add(it.key);
+    byShape = Object.fromEntries(SHAPES.map(k => [k, []]));
+    for (const it of items) if (byShape[it.shape].length < MAX) byShape[it.shape].push(it);
+    paint();
+  }
+  // the fill is the severity's colour seen through: fuller when confirmed, paler when plausible; the hairline is the colour itself
+  function paint() {
+    const bg = E.BG_COL, light = E.theme === 'light';
+    for (const k of SHAPES) {
+      const m = meshes[k], list = byShape[k];
+      list.forEach((it, i) => {
+        C.copy(E.sevColor(it.sev || 'none')).lerp(bg, it.plausible ? .7 : .45);
+        if (hot === it.key) C.lerp(E.INKHI, .3);
+        m.setColorAt(i, C);
+      });
+      if (m.instanceColor) m.instanceColor.needsUpdate = true;
+      m.material.opacity = light ? .82 : .75;
+      outlines[k].material.uniforms.color.value.copy(E.sevColor(k));
+    }
+  }
+  // every frame: each mark where its anchor is; one that just arrived falls in. Returns whether anything moves.
+  function tick(now) {
+    if (!visible) { for (const k of SHAPES) meshes[k].count = outlines[k].count = 0; return false; }
+    let moving = false;
+    const ppu = Math.max(1e-6, E.pxPerUnit()), least = MIN_PX * Math.min(1, Math.max(.5, ppu / FAR_PPU)) / (ppu * TALL);
+    unit = Math.max(SIZE, least);
+    for (const k of SHAPES) {
+      const m = meshes[k], list = byShape[k];
+      let n = 0;
+      for (const it of list) {
+        const a = it.anchor();
+        if (!a) { it.hidden = true; continue; }
+        if (it.hidden && !reduce) it.born = now;               // shown again: it arrives
+        it.hidden = false;
+        const age = (now - it.born) / 650, drop = age < 1 ? 1 - ez(Math.max(0, age)) : 0;
+        if (drop > 0) moving = true;
+        const sc = unit * (a[3] || 1) * (it.plausible ? .8 : 1) * (hot === it.key ? 1.2 : 1);
+        const lie = flat ? .7 * sc : 0;                        // lying flat, it floats its own thickness over the roof
+        P.copy(W(a[0], a[1], a[2] + drop * 60 + lie));
+        it.head = flat ? [a[0], a[1] - 1.15 * sc, a[2] + lie] : [a[0], a[1], a[2] + drop * 60 + 1.15 * sc];   // where its head is drawn, in plan units
+        Q.setFromAxisAngle(UP, it.phase); if (flat) Q.premultiply(FLAT);
+        S.setScalar(sc * TS);
+        M4.compose(P, Q, S); m.setMatrixAt(n, M4); it.slot = n; n++;
+      }
+      m.count = outlines[k].count = n; m.instanceMatrix.needsUpdate = true;
+      m.boundingSphere = null;                             // three.js keeps the first one it computes: picking needs today's
+    }
+    return moving;
+  }
+  const UP = new THREE.Vector3(0, 1, 0);
+  // the item under the pointer, or null
+  function pick(cx, cy) {
+    if (!visible) return null;
+    const h = E.pickHit(cx, cy, SHAPES.map(k => meshes[k]).filter(m => m.count));
+    if (!h || h.instanceId == null) return null;
+    const k = h.object.userData.beacons;
+    return byShape[k].find(it => it.slot === h.instanceId && it.anchor()) || null;
+  }
+  function setHot(key) { if (key !== hot) { hot = key; paint(); } }
+  E.themeHooks.add(() => paint());
+  return {
+    group, set, tick, pick, setHot, repaint: paint,
+    get count() { return items.length; },
+    get unit() { return unit; },                          // what scene3d spaces marks by
+    get items() { return items; },
+    setVisible(v) { visible = !!v; group.visible = visible; },
+    setFlat(v) { flat = !!v; },                           // the top-down projection
+    get flat() { return flat; },
+    dispose() { for (const k of SHAPES) { meshes[k].dispose(); outlines[k].dispose(); geo[k].dispose(); } },
+  };
+}
+
+function hash(s) { let h = 7; for (const c of String(s)) h = (h * 31 + c.charCodeAt(0)) >>> 0; return h; }
+// two geometries as one (positions and normals), so the pin is one instance; one without an index (the
+// octahedron) draws its vertices in order
+function mergeTwo(THREE, a, b) {
+  const out = new THREE.BufferGeometry(), na = a.attributes.position.count, nb = b.attributes.position.count;
+  const cat = (x, y, n) => { const r = new Float32Array(x.length + y.length); r.set(x); r.set(y, x.length); return new THREE.BufferAttribute(r, n); };
+  out.setAttribute('position', cat(a.attributes.position.array, b.attributes.position.array, 3));
+  out.setAttribute('normal', cat(a.attributes.normal.array, b.attributes.normal.array, 3));
+  const order = (g, n) => g.index ? Array.from(g.index.array) : Array.from({ length: n }, (_, i) => i);
+  const ia = order(a, na), ib = order(b, nb).map(i => i + na);
+  out.setIndex(ia.concat(ib));
+  a.dispose(); b.dispose();
+  return out;
+}

package/ui/forge_ui/static/graph.js

@@ -240,9 +240,9 @@
 
       if (t.verdict === 'PASS' || t.verdict === 'FAIL') {
         var pass = t.verdict === 'PASS';
-        textEl(g, pass ? '✓' : '✗', {
-          'class': 'fg-verdict' + (pass ? ' fg-pass' : ''), x: NODE_W - 8, y: 17, 'text-anchor': 'end', 'font-size': 14, 'font-weight': 'bold'
-        });
+        // a drawn tick or cross, in the verdict's colour
+        el('path', { 'class': 'fg-verdict' + (pass ? ' fg-pass' : ''), d: pass ? 'M' + (NODE_W - 20) + ' 12l4 4 7-8' : 'M' + (NODE_W - 19) + ' 8l8 8m0-8l-8 8',
+          fill: 'none', 'stroke-width': 1.8, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, g);
       }
 
       function select() { if (typeof options.onSelect === 'function') options.onSelect(t.id); }

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,7 +13,11 @@
   } }
   </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="datatable.js" defer></script>
   <script src="runmodel.js" defer></script>
   <script src="cloudmodel.js" defer></script>
   <script src="modelstats.js" defer></script>
@@ -21,6 +25,7 @@
   <script src="gantt.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>
@@ -29,23 +34,30 @@
   <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, read only"><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>
+    </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,
   };