@giamme/forge 0.0.0-stage → 0.8.0

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';
+        textEl(g, pass ? '✓' : '✗', {
+          'class': 'fg-verdict' + (pass ? ' fg-pass' : ''), x: NODE_W - 8, y: 17, 'text-anchor': 'end', 'font-size': 14, 'font-weight': 'bold'
+        });
+      }
+
+      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/index.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
+  <meta name="referrer" content="no-referrer">
+  <title>forge-ui</title>
+  <script type="importmap">
+  { "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
+  } }
+  </script>
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="style.css">
+  <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="panel.js" defer></script>
+  <script src="diffview.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="search.js" defer></script>
+  <script src="notify.js" defer></script>
+  <script src="app.js" defer></script>
+</head>
+<body>
+  <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>
+  </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">
+      <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>
+  </div>
+  <div id="live" class="visually-hidden" aria-live="polite"></div>
+</body>
+</html>