@giamme/forge 0.0.0-stage → 0.9.0

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/gantt.js

@@ -0,0 +1,97 @@
+/* forge-ui execution chart (2D): every attempt on wall-clock time in the lane it ran in, with its dwarf and
+   review inside, projected attempts for what has not started, and the concurrency strip under the stage.
+   Defines window.ForgeGantt.{render, strip}. SVG drawn with classes only (style.css colours it). */
+window.ForgeGantt = (() => {
+  'use strict';
+  const RM = window.ForgeRunModel;
+  const NS = 'http://www.w3.org/2000/svg';
+  const list = v => Array.isArray(v) ? v : [];
+  function svg(name, attrs, parent) {
+    const e = document.createElementNS(NS, name);
+    for (const k in attrs || {}) e.setAttribute(k, attrs[k]);
+    if (parent) parent.append(e);
+    return e;
+  }
+  const stc = s => 'st-' + String(s || 'pending').toLowerCase().replace(/[^a-z0-9_-]/g, '');
+  const LANE = 34, LABEL = 70, TOP = 26;
+
+  function render(container, run, { now = null, onSelect = null, sel = null, replay = null, critical = null, ghosts = true } = {}) {
+    container.replaceChildren();
+    const X = RM.execModel(run, { now, ghosts });
+    const all = X.items.concat(X.extra);
+    if (!all.length) { const p = document.createElement('p'); p.className = 'fg-empty'; p.textContent = 'Nothing has run yet: no attempt timings are recorded for this run.'; container.append(p); return; }
+    const width = Math.max(640, container.clientWidth || 900), plot = width - LABEL - 12;
+    const xs = t => LABEL + (t - X.t0) / (X.t1 - X.t0) * plot;
+    const laneOf = it => typeof it.lane === 'number' ? it.lane : X.lanes + (it.kind === 'verification' ? 0 : X.finishLanes.length > 1 ? 1 : 0);
+    const rows = X.lanes + X.finishLanes.length;
+    const height = TOP + rows * LANE + 8;
+    const root = svg('svg', { class: 'gantt', viewBox: `0 0 ${width} ${height}`, width, height, role: 'group', 'aria-label': 'Attempts on wall-clock time' });
+    for (const r of X.ruler) {
+      svg('line', { class: 'gt-tick', x1: xs(r.t), x2: xs(r.t), y1: TOP - 6, y2: height - 4 }, root);
+      svg('text', { class: 'gt-tick-label', x: xs(r.t) + 3, y: TOP - 10 }, root).textContent = '+' + r.label;
+    }
+    for (let i = 0; i < rows; i++) {
+      const over = i < X.lanes && i >= X.cap, y = TOP + i * LANE;
+      svg('rect', { class: 'gt-lane' + (over ? ' gt-over' : ''), x: LABEL, y: y + 2, width: plot, height: LANE - 4, rx: 4 }, root);
+      const name = i < X.lanes ? `lane ${i + 1}${over ? ' !' : ''}` : X.finishLanes[i - X.lanes].name.toLowerCase();
+      const t = svg('text', { class: 'gt-lane-label' + (over ? ' gt-over' : ''), x: 6, y: y + LANE / 2 + 4 }, root); t.textContent = name;
+      if (over) svg('title', {}, t).textContent = `More attempts overlapped than --max-parallel ${X.cap} allows: separate run invocations, or a resumed run.`;
+    }
+    const critSet = new Set(critical && critical.ids || []);
+    for (const it of all) {
+      const y = TOP + laneOf(it) * LANE + 5, x = xs(it.start), w = Math.max(3, xs(it.end) - x);
+      const future = replay !== null && it.start > replay;
+      const g = svg('g', { class: `gt-item ${stc(it.status)}${it.ghost ? ' gt-ghost' : ''}${future ? ' gt-future' : ''}${critSet.has(it.task) && !it.ghost ? ' gt-crit' : ''}${sel && (sel.exec === it.id || (sel.kind === 'task' && sel.id === it.task)) ? ' gt-sel' : ''}`, tabindex: 0, role: 'button' }, root);
+      svg('rect', { class: 'gt-box', x, y, width: w, height: LANE - 10, rx: 3 }, g);
+      for (const s of it.segs) {
+        const sx = xs(s.start), sw = Math.max(1.5, xs(s.end ?? it.end) - sx);
+        svg('rect', { class: `gt-seg gt-${s.role} ${stc(s.status)}`, x: sx, y: y + LANE - 17, width: sw, height: 5, rx: 1.5 }, g);
+      }
+      const label = it.kind === 'verification' ? 'verify' : it.kind === 'review' ? 'review' : `${it.task}${it.attempt ? ' A' + it.attempt : ''}`;
+      if (w > label.length * 6.4 + 6) svg('text', { class: 'gt-label', x: x + 4, y: y + 11 }, g).textContent = label;
+      svg('title', {}, g).textContent = `${label} · ${it.status} · ${RM.fmtDur(it.end - it.start)}${it.ghost ? ' (projected)' : ''}`;
+      const pick = () => {
+        if (!onSelect) return;
+        if (it.kind === 'review') onSelect({ kind: 'final', name: it.review });
+        else if (it.kind === 'verification') onSelect({ kind: 'execution', task: null, exec: it.id });
+        else if (it.ghost || String(it.id).startsWith('span:')) onSelect({ kind: 'task', id: it.task });
+        else onSelect({ kind: 'execution', task: it.task, id: it.task, exec: it.id });
+      };
+      g.addEventListener('click', pick);
+      g.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(); } });
+    }
+    const cursorT = replay !== null ? replay : X.live && now !== null ? now : null;
+    if (cursorT !== null && cursorT >= X.t0 && cursorT <= X.t1) svg('line', { class: 'gt-now', x1: xs(cursorT), x2: xs(cursorT), y1: TOP - 8, y2: height - 2 }, root);
+    container.append(root);
+  }
+
+  // How many attempts, dwarves and reviewers were busy at each moment, against the concurrency limit.
+  function strip(container, run, { now = null, replay = null } = {}) {
+    container.replaceChildren();
+    const c = RM.concurrency(run, { now }), range = RM.timeRange(run, now);
+    if (!c.series.length || !range) return;
+    const width = Math.max(640, container.clientWidth || 900), H = 62, plot = width - LABEL - 12;
+    const t0 = range.start, t1 = Math.max(range.end, now !== null && list(run.tasks).some(t => t.status === 'RUNNING') ? now : range.end, t0 + 1);
+    const xs = t => LABEL + (t - t0) / (t1 - t0) * plot;
+    const top = Math.max(c.cap, c.peak, 1), ys = v => H - 8 - v / top * (H - 18);
+    const root = svg('svg', { class: 'strip', viewBox: `0 0 ${width} ${H}`, width, height: H, role: 'img', 'aria-label': `Concurrency: peak ${c.peak} attempts at once, limit ${c.cap}` });
+    const step = key => {
+      let d = `M${xs(c.series[0].t)} ${ys(0)}`, prev = 0;
+      for (const p of c.series) { d += ` L${xs(p.t)} ${ys(prev)} L${xs(p.t)} ${ys(p[key])}`; prev = p[key]; }
+      return d + ` L${xs(t1)} ${ys(prev)} L${xs(t1)} ${ys(0)} Z`;
+    };
+    svg('path', { class: 'cc-area cc-tasks', d: step('task') }, root);
+    const models = c.series.map(p => ({ t: p.t, m: p.dwarf + p.qa }));
+    let d = `M${xs(models[0].t)} ${ys(0)}`, prev = 0;
+    for (const p of models) { d += ` L${xs(p.t)} ${ys(prev)} L${xs(p.t)} ${ys(p.m)}`; prev = p.m; }
+    svg('path', { class: 'cc-line cc-models', d }, root);
+    svg('line', { class: 'cc-cap', x1: LABEL, x2: width - 12, y1: ys(c.cap), y2: ys(c.cap) }, root);
+    svg('text', { class: 'gt-lane-label', x: 6, y: 16 }, root).textContent = 'busy';
+    svg('text', { class: 'gt-lane-label', x: 6, y: 30 }, root).textContent = `peak ${c.peak}`;
+    svg('text', { class: 'gt-lane-label cc-cap-label', x: 6, y: 44 }, root).textContent = `limit ${c.cap}`;
+    const cursorT = replay !== null ? replay : null;
+    if (cursorT !== null) svg('line', { class: 'gt-now', x1: xs(cursorT), x2: xs(cursorT), y1: 2, y2: H - 2 }, root);
+    container.append(root);
+  }
+  return { render, strip };
+})();

package/ui/forge_ui/static/graph.js

@@ -0,0 +1,266 @@
+/* forge-ui graph: tasks as SVG nodes in wave columns, dependencies as edges.
+   Defines window.ForgeGraph.render(container, run, {selected, onSelect}). Colours come from style.css
+   classes (.fg-box, .fg-bar, .fg-verdict): the page CSP refuses style attributes. */
+(function () {
+  'use strict';
+  if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+  var NS = 'http://www.w3.org/2000/svg';
+  var NODE_W = 176, NODE_H = 46, COL_GAP = 72, ROW_GAP = 14;
+  var PAD = 16, HEADER_H = 26;
+  var uid = 0;
+
+  function el(name, attrs, parent) {
+    var e = document.createElementNS(NS, name);
+    if (attrs) for (var k in attrs) if (Object.prototype.hasOwnProperty.call(attrs, k)) e.setAttribute(k, attrs[k]);
+    if (parent) parent.appendChild(e);
+    return e;
+  }
+
+  function textEl(parent, str, attrs) {
+    var t = el('text', attrs, parent);
+    t.textContent = str;
+    return t;
+  }
+
+  // Conservative per-glyph advance (in em) so wide letters cannot overflow the node.
+  function glyphEm(c) {
+    if (/[WM@%]/.test(c)) return 1.0;
+    if (/[mw]/.test(c)) return 0.9;
+    if (/[A-Z0-9_#&$]/.test(c)) return 0.75;
+    if (/[il.,:;'|!\[\]() \-]/.test(c)) return 0.4;
+    if (c.charCodeAt(0) > 0x7e) return 1.1; // em dash, ellipsis, CJK, emoji: about one em or more
+    return 0.64;
+  }
+
+  // Cut s so its estimated width at fontSize (times extra, e.g. 1.1 for bold) fits maxPx.
+  function ellipsize(s, maxPx, fontSize, extra) {
+    s = String(s);
+    var k = fontSize * (extra || 1), w = 0, i, total = 0;
+    for (i = 0; i < s.length; i++) total += glyphEm(s.charAt(i)) * k;
+    if (total <= maxPx) return s;
+    var room = maxPx - glyphEm('…') * k;
+    for (i = 0; i < s.length; i++) {
+      var cw = glyphEm(s.charAt(i)) * k;
+      if (w + cw > room) break;
+      w += cw;
+    }
+    return s.slice(0, Math.max(1, i)) + '…';
+  }
+
+  function str(v, dflt) {
+    return v === null || v === undefined || v === '' ? dflt : String(v);
+  }
+
+  function message(container, text) {
+    var p = document.createElement('p');
+    p.className = 'fg-empty';
+    p.textContent = text;
+    container.appendChild(p);
+  }
+
+  // Column (1-based) of every task: its wave, else one right of its deepest dep.
+  function computeColumns(tasks, byId) {
+    var col = Object.create(null), i, pass;
+    for (i = 0; i < tasks.length; i++) {
+      var w = Math.floor(Number(tasks[i].wave));
+      col[tasks[i].id] = isFinite(w) && w >= 1 && tasks[i].wave !== null ? w : 0;
+    }
+    var floating = tasks.filter(function (t) { return col[t.id] === 0; });
+    floating.forEach(function (t) { col[t.id] = 1; });
+    for (pass = 0; pass < tasks.length; pass++) {
+      var changed = false;
+      for (i = 0; i < floating.length; i++) {
+        var t = floating[i], deepest = 0;
+        var deps = Array.isArray(t.deps) ? t.deps : [];
+        for (var d = 0; d < deps.length; d++) {
+          if (deps[d] === t.id || !byId[deps[d]]) continue;
+          if (col[deps[d]] > deepest) deepest = col[deps[d]];
+        }
+        var want = deepest ? deepest + 1 : 1;
+        if (want !== col[t.id]) { col[t.id] = want; changed = true; }
+      }
+      if (!changed) break;
+    }
+    return col;
+  }
+
+  function edgePath(a, b, self) {
+    var x1 = a.x + NODE_W, y1 = a.y + NODE_H / 2;
+    var x2 = b.x, y2 = b.y + NODE_H / 2;
+    if (self) {
+      return 'M' + x1 + ' ' + y1 + ' C' + (x1 + 34) + ' ' + (y1 - NODE_H) + ' ' +
+        (x2 - 34) + ' ' + (y2 - NODE_H) + ' ' + x2 + ' ' + y2;
+    }
+    var dx = x2 - x1;
+    var k = dx >= 2 * 30 ? dx / 2 : 60; // backward/same-column edges bulge out so they stay visible
+    return 'M' + x1 + ' ' + y1 + ' C' + (x1 + k) + ' ' + y1 + ' ' + (x2 - k) + ' ' + y2 + ' ' + x2 + ' ' + y2;
+  }
+
+  function render(container, run, options) {
+    if (!container) return;
+    options = options || {};
+    while (container.firstChild) container.removeChild(container.firstChild);
+
+    var tasks = run && Array.isArray(run.tasks) ? run.tasks.filter(function (t) {
+      return t && t.id !== null && t.id !== undefined;
+    }) : [];
+    if (!tasks.length) { message(container, 'No tasks'); return; }
+
+    var byId = Object.create(null);
+    tasks.forEach(function (t) { if (!byId[t.id]) byId[t.id] = t; });
+    var col = computeColumns(tasks, byId);
+
+    // Densify columns: only waves actually used get a column, so a huge wave number can't blow up the layout.
+    var used = Object.create(null), waves = [];
+    tasks.forEach(function (t) { if (!used[col[t.id]]) { used[col[t.id]] = true; waves.push(col[t.id]); } });
+    waves.sort(function (a, b) { return a - b; });
+    var idx = Object.create(null);
+    waves.forEach(function (w, i) { idx[w] = i + 1; });
+    var label = {};
+    waves.forEach(function (w) { label[idx[w]] = w; });
+    tasks.forEach(function (t) { col[t.id] = idx[col[t.id]]; });
+
+    var maxCol = 1, rows = Object.create(null), pos = Object.create(null), maxRows = 0;
+    tasks.forEach(function (t) { if (col[t.id] > maxCol) maxCol = col[t.id]; });
+    tasks.forEach(function (t) {
+      if (pos[t.id]) return;
+      var c = col[t.id];
+      var r = rows[c] = (rows[c] || 0);
+      rows[c] = r + 1;
+      if (rows[c] > maxRows) maxRows = rows[c];
+      pos[t.id] = {
+        x: PAD + (c - 1) * (NODE_W + COL_GAP),
+        y: PAD + HEADER_H + r * (NODE_H + ROW_GAP)
+      };
+    });
+
+    var width = PAD * 2 + maxCol * NODE_W + (maxCol - 1) * COL_GAP;
+    var height = PAD * 2 + HEADER_H + maxRows * NODE_H + (maxRows - 1) * ROW_GAP + 20;
+
+    var svg = el('svg', {
+      'class': 'fg-svg', viewBox: '0 0 ' + width + ' ' + height,
+      width: width, height: height, role: 'group', 'aria-label': 'Task dependency graph'
+    });
+    svg.style.maxWidth = 'none';
+
+    var markerId = 'fg-arrow-' + (++uid);
+    var defs = el('defs', null, svg);
+    var marker = el('marker', {
+      id: markerId, viewBox: '0 0 10 10', refX: 9, refY: 5,
+      markerWidth: 7, markerHeight: 7, orient: 'auto'
+    }, defs);
+    el('path', { d: 'M0 0 L10 5 L0 10 z', fill: 'currentColor', 'fill-opacity': 0.6 }, marker);
+
+    for (var c = 1; c <= maxCol; c++) {
+      textEl(svg, 'wave ' + label[c], {
+        'class': 'fg-wave', x: PAD + (c - 1) * (NODE_W + COL_GAP), y: PAD + 10,
+        'font-size': 12, fill: 'currentColor', 'fill-opacity': 0.6
+      });
+    }
+
+    var edgeLayer = el('g', { 'class': 'fg-edges', color: 'inherit' }, svg);
+    var edgesOf = Object.create(null);
+    var seen = Object.create(null);
+    tasks.forEach(function (t) {
+      if (seen[t.id]) return;
+      seen[t.id] = true;
+      var deps = Array.isArray(t.deps) ? t.deps : [];
+      var done = Object.create(null);
+      deps.forEach(function (d) {
+        if (!byId[d] || done[d]) return;
+        done[d] = true;
+        var path = el('path', {
+          'class': 'fg-edge', d: edgePath(pos[d], pos[t.id], d === t.id),
+          fill: 'none', stroke: 'currentColor', 'stroke-opacity': 0.4,
+          'stroke-width': 1.5, 'marker-end': 'url(#' + markerId + ')'
+        }, edgeLayer);
+        var ends = { path: path, from: d, to: t.id };
+        (edgesOf[t.id] = edgesOf[t.id] || []).push(ends);
+        if (d !== t.id) (edgesOf[d] = edgesOf[d] || []).push(ends);
+      });
+    });
+
+    var active = Object.create(null); // id -> {hover, focus}
+    function highlight(id, kind, flag) {
+      var a = active[id] = active[id] || {};
+      a[kind] = flag;
+      (edgesOf[id] || []).forEach(function (e) {
+        var p = e.path;
+        var fa = active[e.from], ta = active[e.to];
+        var on = !!((fa && (fa.hover || fa.focus)) || (ta && (ta.hover || ta.focus)));
+        p.setAttribute('stroke-opacity', on ? 0.95 : 0.4);
+        p.setAttribute('stroke-width', on ? 2.5 : 1.5);
+        if (on) p.setAttribute('class', 'fg-edge fg-edge-hi');
+        else p.setAttribute('class', 'fg-edge');
+      });
+    }
+
+    var drawn = Object.create(null);
+    tasks.forEach(function (t) {
+      if (drawn[t.id]) return;
+      drawn[t.id] = true;
+      var p = pos[t.id];
+      var status = str(t.status, 'pending');
+      var stClass = 'st-' + status.toLowerCase().replace(/[^a-z0-9_-]/g, '');
+      var selected = options.selected === t.id;
+      var id = String(t.id);
+
+      var g = el('g', {
+        'class': 'fg-node ' + stClass + (selected ? ' fg-selected' : ''),
+        transform: 'translate(' + p.x + ' ' + p.y + ')',
+        tabindex: 0, role: 'button',
+        'aria-label': 'Task ' + id + ', status ' + status,
+        'data-id': id
+      }, svg);
+      g.style.cursor = 'pointer';
+
+      var tip = [str(t.title, id), 'status: ' + status,
+        'dwarf: ' + str(t.dwarf, '—') + ' / qa: ' + str(t.qa, '—')];
+      if (t.verdict) tip.push('verdict: ' + t.verdict);
+      if (t.explored) tip.push('explored');
+      var title = el('title', null, g);
+      title.textContent = tip.join('\n');
+
+      el('rect', {
+        'class': 'fg-box', x: 0, y: 0, width: NODE_W, height: NODE_H, rx: 8, ry: 8,
+        'stroke-width': selected ? 3.5 : 1.5,
+        'stroke-dasharray': t.explored ? '5 3' : 'none'
+      }, g);
+      el('rect', { 'class': 'fg-bar', x: 0, y: 6, width: 4, height: NODE_H - 12, rx: 2 }, g);
+
+      var maxPx = NODE_W - 36;
+      textEl(g, ellipsize(id, maxPx, 13, 1.1), {
+        x: 12, y: 19, 'font-size': 13, 'font-weight': 'bold', fill: 'currentColor'
+      });
+      var spec = t.explored ? ellipsize(str(t.dwarf, '—'), maxPx - 12, 12) + ' *' : ellipsize(str(t.dwarf, '—'), maxPx, 12);
+      textEl(g, spec, {
+        x: 12, y: 36, 'font-size': 12, fill: 'currentColor', 'fill-opacity': 0.75
+      });
+
+      if (t.verdict === 'PASS' || t.verdict === 'FAIL') {
+        var pass = t.verdict === 'PASS';
+        // 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); }
+      g.addEventListener('click', select);
+      g.addEventListener('keydown', function (ev) {
+        if (ev.key === 'Enter' || ev.key === ' ' || ev.key === 'Spacebar') {
+          ev.preventDefault();
+          select();
+        }
+      });
+      g.addEventListener('mouseenter', function () { highlight(t.id, 'hover', true); });
+      g.addEventListener('mouseleave', function () { highlight(t.id, 'hover', false); });
+      g.addEventListener('focus', function () { highlight(t.id, 'focus', true); });
+      g.addEventListener('blur', function () { highlight(t.id, 'focus', false); });
+    });
+
+    container.appendChild(svg);
+  }
+
+  window.ForgeGraph = { render: render };
+})();

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) };
+})();