@worca/app 1.0.0-rc.1 → 1.1.1

package/ui/public/graph/run-decor.mjs

@@ -0,0 +1,410 @@
+// ui/public/graph/run-decor.mjs   (depth 3 below the repo root)
+//
+// Run monitor v2. ONE pure reducer turns a run's `state` into ONE decor bag, and
+// ONE DOM pass (applyDecor, Task 4) lays that bag over the shared graph view.
+//
+// Genericity charter: nothing here keys off an agent key or a phase name. Row
+// labels read the manifest's port metadata (`loop: true`), statuses read the
+// execution ledger (state.steps[], one row per execution, key === executionId),
+// colours read the manifest node. History renders with the registry absent.
+import { manifestPortsFn, manifestTemplate } from '../../../src/shared/graph/manifest.mjs';
+import { BOOKEND_EXECUTION_IDS, DEFAULT_MAX_CYCLES } from '../../../src/shared/graph/constants.mjs';
+import { fanLines } from '../../../src/shared/graph/geometry.mjs';
+
+/** The run-level warning a run that drained without binding End carries. */
+export const QUIESCENCE_WARNING = 'finished at quiescence — End not reached';
+
+/** Composite (kind:'task') rows label from the task title; keep the card readable. */
+const TITLE_MAX = 40;
+/** Squares in a sub-agent fan strip before the count alone carries the tail.
+ *  Wraps at FAN_PER_ROW (16), so the cap must stay ≤ 32 — style.css spells the
+ *  two-line fan height (`.fan.f2`) and no taller. */
+const SUB_SQUARE_CAP = 24;
+/** Leds on the collapsed strip before the `N runs · $…` text alone carries the
+ *  tail — 6 squares + the summary + the chevron is what the 220px card fits. */
+const STRIP_LED_CAP = 6;
+/** Run statuses that mean "nothing is running any more". */
+const TERMINAL_RUN = new Set(['done', 'stopped', 'error', 'paused']);
+/** Row statuses that mean "this execution is over". */
+const TERMINAL_ROW = new Set(['done', 'error', 'stopped', 'paused']);
+/** P8's bookend EXECUTIONS (`x:preflight:1` / `x:done:1`); never executions, never progress. */
+const BOOKEND_EXECS = new Set(BOOKEND_EXECUTION_IDS);
+
+// Re-exported so run-hosts has ONE import for the manifest readers.
+export { manifestPortsFn, manifestTemplate };
+
+// ── formatters ──────────────────────────────────────────────────────────────
+
+/** `4s` / `2m 10s` / `1h 1m` — integer seconds FIRST, then the same shape as
+ *  app.js `fmtDuration`, so a card and the header never spell one duration two ways. */
+export function fmtDur(ms) {
+  const s = Math.max(0, Math.round((Number(ms) || 0) / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${s % 60}s`;
+  return `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+
+/** `$0.42`, with a `<$0.01` floor so a real-but-tiny spend never reads as free. */
+export function fmtUsd(n) {
+  const v = Number(n);
+  if (!Number.isFinite(v)) return '$0.00';
+  if (v > 0 && v < 0.01) return '<$0.01';
+  return `$${v.toFixed(2)}`;
+}
+
+// ── manifest readers ────────────────────────────────────────────────────────
+
+export function isGraphManifest(stepper) {
+  return !!(stepper && stepper.version === 2 && stepper.graph && Array.isArray(stepper.graph.nodes));
+}
+export function manifestNodes(stepper) {
+  return isGraphManifest(stepper) ? stepper.graph.nodes.filter(Boolean) : [];
+}
+export function manifestWires(stepper) {
+  return isGraphManifest(stepper) && Array.isArray(stepper.graph.wires) ? stepper.graph.wires.filter(Boolean) : [];
+}
+/** The header registry the view reads (`agents[node.key]` -> tint, title, icon),
+ *  built from the manifest's own agent nodes so History never needs the registry. */
+export function manifestAgents(stepper) {
+  const out = {};
+  for (const n of manifestNodes(stepper)) {
+    if (n.kind === 'agent' && n.key && !out[n.key]) out[n.key] = { displayName: n.label || n.key, color: n.color || '', icon: n.icon || '' };
+  }
+  return out;
+}
+const nodeById = (stepper, id) => manifestNodes(stepper).find((n) => n.id === id) || null;
+
+// ── the execution ledger (state.steps[]) ────────────────────────────────────
+
+/** Ledger rows in arrival order, bookends dropped. An EXECUTION row ALWAYS
+ *  carries `executionId` (=== key; graph/orchestrator `_execStep`). Today's
+ *  framework bookends are run-harness `_recordStep('preflight'|'done', 0, …)`
+ *  rows — `{ key:'preflight'|'done', phase, cycle:0 }`, NO nodeId, NO
+ *  executionId — so the executionId guard drops them; P8's bookend EXECUTIONS
+ *  (`x:preflight:1` / `x:done:1`) are dropped by the shared id set. */
+export function ledgerRows(st) {
+  const out = [];
+  for (const s of Array.isArray(st && st.steps) ? st.steps : []) {
+    if (!s || !s.executionId) continue;
+    if (BOOKEND_EXECS.has(s.executionId)) continue;
+    out.push(s);
+  }
+  return out;
+}
+
+/** nodeId -> rows, in arrival order. */
+function rowsByNode(rows) {
+  const map = new Map();
+  for (const r of rows) {
+    if (r.nodeId == null) continue;
+    if (!map.has(r.nodeId)) map.set(r.nodeId, []);
+    map.get(r.nodeId).push(r);
+  }
+  return map;
+}
+
+/** A row's active ms, extended by the live clock while it is running. */
+export function rowMs(row, now, live) {
+  if (!row) return 0;
+  const base = Number(row.activeMs) || 0;
+  if (!live || !row.runningSince) return base;
+  return base + Math.max(0, (now || Date.now()) - new Date(row.runningSince).getTime());
+}
+
+/**
+ * The status precedence. NOTE the deliberate deviation from spec §8, which
+ * checks `active` AFTER the error rule: here membership in `state.active`
+ * wins FIRST, so a node whose OLDER execution errored and whose newer one
+ * is in flight reads `active` (the error stays visible in that node's
+ * footer rows). `rows` are THIS node's ledger
+ * rows in arrival order; `ctx.active` is the Set of node ids in state.active
+ * (already filtered: an entry whose own row is terminal is dropped by the
+ * reducer); `ctx.stepByExec` maps executionId -> row; `ctx.resolved` means
+ * nothing runs any more.
+ */
+export function statusOf(node, rows, ctx) {
+  const list = Array.isArray(rows) ? rows : [];
+  // 1. in flight. `state.active` is the scheduler's own word and can precede the
+  //    node's first row (the parent exec `start` lands before `_execStep`).
+  if (ctx.active.has(node.id)) return 'active';
+  // 2. never fired. A DONE run means the scheduler drained without ever reaching
+  //    this node — including End when endReached === false (quiescence). A
+  //    stopped/error run stopped early, so its unreached nodes stay `pending`.
+  if (!list.length) return ctx.runStatus === 'done' ? 'skipped' : 'pending';
+  const last = list[list.length - 1];
+  // 3. only the ledger knows a pause/stop: a paused execution completes as `done`
+  //    on the wire, so the exec status alone would read it as finished.
+  if (last.status === 'paused' || last.status === 'stopped') return last.status;
+  // 4. any error in the node's history sticks.
+  if (list.some((r) => r.status === 'error')) return 'error';
+  // 5. finished cleanly.
+  if (last.status === 'done') return 'done';
+  // 6. started, not in flight, no terminal transition.
+  return ctx.resolved ? 'stopped' : 'active';
+}
+
+// ── the reducer ─────────────────────────────────────────────────────────────
+
+/**
+ * ONE decor bag from ONE state snapshot. `st` is the SAME shape live
+ * (orchestrator `state` events) and frozen (`rowToState` off pipelines +
+ * pipeline_steps), so both surfaces call this with no adapter.
+ * @param {object} st                 { stepper, status, steps, active, endReached, result, warnings, wireDeliveries, tokens, gate }
+ * @param {{live?:boolean, now?:number, subsOf?:(nodeId:string)=>Array}} opts
+ */
+export function decorFromState(st, { live = true, now = Date.now(), subsOf = null } = {}) {
+  const state = st || {};
+  const stepper = state.stepper || null;
+  const nodes = manifestNodes(stepper);
+  const wires = manifestWires(stepper);
+  const runStatus = String(state.status || '').toLowerCase();
+  const resolved = !live || TERMINAL_RUN.has(runStatus);
+  const rows = ledgerRows(state);
+  const grouped = rowsByNode(rows);
+  const stepByExec = new Map(rows.map((r) => [r.executionId, r]));
+  // A composite (fan-out) PARENT execution has NO ledger row of its own — only its
+  // kind:'task' slices do (`parentExecutionId`), and they carry the parent's
+  // trigger verbatim. The last slice stands in for the parent.
+  const rowFor = (a) => stepByExec.get(a.executionId)
+    || (grouped.get(a.nodeId) || []).filter((r) => r.parentExecutionId === a.executionId).pop() || null;
+  // `_execStep(ctx,'done')` emits its state snapshot BEFORE the scheduler's own
+  // `exec done` drops the execution from `active`, so one frame can name an
+  // execution whose OWN row is already terminal. The row wins.
+  const activeList = (Array.isArray(state.active) ? state.active : []).filter((a) => {
+    if (!a) return false;
+    const own = stepByExec.get(a.executionId);
+    return !own || !TERMINAL_ROW.has(own.status);
+  });
+  const activeSet = new Set(activeList.map((a) => a.nodeId));
+  const ctx = { active: activeSet, stepByExec, resolved, runStatus };
+
+  const status = {};
+  const colors = {};
+  for (const node of nodes) {
+    status[node.id] = statusOf(node, grouped.get(node.id) || [], ctx);
+    colors[node.id] = node.color || '';
+  }
+
+  // Progress = done AGENT nodes / AGENT nodes (D15: a number, never a bar).
+  const agents = nodes.filter((n) => n.kind === 'agent');
+  const progress = { done: agents.filter((n) => status[n.id] === 'done').length, total: agents.length };
+
+  // Active nodes, most recently started FIRST (the compact row and the pill name
+  // the newest one; two or more collapse to "N agents running").
+  const startedAt = (a) => {
+    const r = rowFor(a);
+    const t = r && r.startedAt ? Date.parse(r.startedAt) : NaN;
+    return Number.isFinite(t) ? t : 0;
+  };
+  const activeNodes = activeList
+    .map((a) => {
+      const node = nodeById(stepper, a.nodeId);
+      return { nodeId: a.nodeId, executionId: a.executionId || null,
+        label: (node && (node.label || node.id)) || a.nodeId, color: (node && node.color) || '', _t: startedAt(a) };
+    })
+    .sort((x, y) => y._t - x._t)
+    .map(({ _t, ...a }) => a);
+
+  const endReached = state.endReached === true;
+  const endNode = nodes.find((n) => n.kind === 'end') || null;
+  const endResult = endReached && state.result && endNode ? buildEndResult(endNode, state.result) : null;
+
+  const warnings = (Array.isArray(state.warnings) ? state.warnings : []).filter(Boolean);
+  // The engine's own definition: `finish('done') && !ended`. A paused, stopped or
+  // errored run also has endReached:false, and is NOT quiescence.
+  const quiescent = runStatus === 'done' && state.endReached === false;
+  if (quiescent && !warnings.includes(QUIESCENCE_WARNING)) warnings.push(QUIESCENCE_WARNING);
+
+  const deliveries = state.wireDeliveries && typeof state.wireDeliveries === 'object' ? state.wireDeliveries : {};
+  const loopDeliveries = wires.reduce((a, w) => a + (w.loop ? (Number(deliveries[w.id]) || 0) : 0), 0);
+
+  const decor = {
+    version: 2, live, resolved, runStatus, status, colors,
+    footers: {}, totals: {}, liveWireIds: [], loopBadges: {}, gate: null,
+    endResult, progress, activeNodes, warnings, quiescent,
+    executions: rows.length, loopDeliveries,
+    nodeIds: nodes.map((n) => n.id), wireIds: wires.map((w) => w.id), expanded: null,
+  };
+  decorateExecutions(decor, { stepper, nodes, wires, grouped, rows, activeList, rowFor, stepByExec, state, now, live, subsOf });
+  return decor;
+}
+
+/** End's result chip: basename link for a path, the void treatment otherwise. */
+function buildEndResult(endNode, result) {
+  const path = result && result.path ? String(result.path) : null;
+  const rel = path ? path.split('/').filter(Boolean).pop() : null;
+  return { nodeId: endNode.id, path, rel, text: path ? rel : '— completed', kind: path ? 'path' : 'void' };
+}
+
+/** `cycle 2 · fix` (loop-port re-fire) / `cycle 2` / the task title for slices. */
+export function rowLabel(node, row) {
+  if (row.kind === 'task') {
+    const t = String(row.title || '').trim();
+    return truncate(t || `cycle ${row.ordinal}`);
+  }
+  const base = `cycle ${row.ordinal}`;
+  const loopIns = new Set(((node && node.ports && node.ports.inputs) || []).filter((p) => p && p.loop).map((p) => p.id));
+  const port = ((row.trigger && row.trigger.freshPorts) || []).find((p) => loopIns.has(p));
+  return port ? `${base} · ${port}` : base;
+}
+
+function truncate(s) {
+  return s.length > TITLE_MAX ? `${s.slice(0, TITLE_MAX - 1)}…` : s;
+}
+
+/** Money is CENTS: `0.1 + 0.32 === 0.42000000000000004` in doubles, and the raw
+ *  `costUsd` number is part of the frozen bag shape, so it is rounded here once. */
+const round2 = (v) => Math.round((Number(v) || 0) * 100) / 100;
+const sumUsd = (rows) => round2(rows.reduce((a, r) => a + (Number(r.costUsd) || 0), 0));
+
+/** `3 runs · $1.12`; the cost half is dropped when the total is zero. */
+export function stripText(rows) {
+  const list = Array.isArray(rows) ? rows : [];
+  if (!list.length) return '';
+  const total = sumUsd(list);
+  const runs = `${list.length} ${list.length === 1 ? 'run' : 'runs'}`;
+  return total > 0 ? `${runs} · ${fmtUsd(total)}` : runs;
+}
+
+/** The status the 7px leds / row classes use ('start' is the wire's word for active). */
+const ledOf = (status) => (status === 'start' ? 'active' : (status || 'pending'));
+
+/**
+ * How many 22px lines an exec row takes, decided from its texts so the model
+ * bills the exact height style.css renders (the card height is model-driven;
+ * CSS can never measure for it). Conservative per-glyph estimates — a wide
+ * outlier degrades to the ellipsis, never to a taller row:
+ *   1 = label + `dur · cost` share one line (the short-cycle common case);
+ *   2 = `dur · cost` moves to its own right-aligned line (`.stack`);
+ *   3 = the label itself takes two clamped lines above it (`.stack.l2`).
+ */
+export function execBandLayout(label, right) {
+  const l = String(label || '');
+  const r = String(right || '');
+  if (!r) return { units: 1, stack: false, l2: false };            // flow rows: label alone
+  if (l.length * 5.8 + r.length * 6.1 <= 168) return { units: 1, stack: false, l2: false };
+  const l2 = l.length * 5.8 > 180;                                 // past one 180px label line
+  return { units: l2 ? 3 : 2, stack: true, l2 };
+}
+
+function decorateExecutions(decor, ctx) {
+  const { nodes, wires, grouped, activeList, rowFor, state, now, live, subsOf } = ctx;
+
+  for (const node of nodes) {
+    const list = grouped.get(node.id) || [];
+    // A FLOW node (task/and/or/combine/end) executes instantly and for free: its
+    // rows carry no duration and no cost pill, and its card no header totals.
+    const flow = node.kind !== 'agent';
+    const rows = list.map((row) => {
+      // A flow node executes instantly and for free: the NUMBERS are zeroed with
+      // the pill texts, so `durMs`/`costUsd` never contradict `dur`/`cost` (a
+      // consumer that sums the numbers must not pick up a flow row's real ms).
+      const durMs = flow ? 0 : rowMs(row, now, live);
+      const costUsd = flow ? 0 : round2(row.costUsd);
+      return {
+        executionId: row.executionId, nodeId: node.id,
+        kind: row.kind === 'task' ? 'task' : 'cycle',
+        ordinal: Number(row.ordinal ?? row.cycle) || 1,
+        label: rowLabel(node, row), led: ledOf(row.status),
+        dur: !flow && row.activeMs != null ? fmtDur(durMs) : '',
+        cost: flow ? '' : fmtUsd(costUsd),
+        durMs, costUsd, flow,
+      };
+    });
+
+    const subs = typeof subsOf === 'function' ? (subsOf(node.id) || []) : [];
+    const fan = subs.length
+      ? { leds: subs.slice(0, SUB_SQUARE_CAP).map((s) => (s && s.status === 'running' ? 'run' : 'done')), count: subs.length }
+      : null;
+
+    if (rows.length || fan) {
+      decor.footers[node.id] = { rows, summary: stripText(rows), leds: rows.map((r) => r.led), fan };
+    }
+    if (rows.length && !flow) {
+      const durMs = rows.reduce((a, r) => a + r.durMs, 0);
+      const costUsd = sumUsd(rows);
+      decor.totals[node.id] = {
+        durMs, dur: fmtDur(durMs), costUsd, cost: fmtUsd(costUsd),
+        hasStep: rows.some((r) => r.dur !== ''),
+      };
+    }
+  }
+
+  // Ants: the trigger wires of the IN-FLIGHT executions (a composite parent
+  // marches on its slices' trigger — the slices carry the parent's verbatim).
+  // A resolved run marches nothing: a drain publish after End routes nowhere.
+  // Ants are NEVER restricted to loop wires — a re-fire through an OR valve
+  // names the valve's out wire; only the badges below are loop-wire-only.
+  if (live && !decor.resolved) {
+    const ants = new Set();
+    for (const a of activeList) {
+      const row = rowFor(a);
+      for (const id of (row && row.trigger && row.trigger.wireIds) || []) ants.add(id);
+    }
+    decor.liveWireIds = [...ants];
+  }
+
+  // Loop badges from the scheduler's own delivery counters (authoritative;
+  // `wireDeliveries` is keyed by LOOP wire ids only and counts tokens that went
+  // THROUGH the wire — a held token is not counted).
+  const deliveries = state.wireDeliveries && typeof state.wireDeliveries === 'object' ? state.wireDeliveries : {};
+  for (const w of wires) {
+    if (!w.loop) continue;
+    const n = Number(deliveries[w.id]) || 0;
+    if (n < 1) continue;
+    const max = Number(w.maxCycles) || DEFAULT_MAX_CYCLES;
+    decor.loopBadges[w.id] = { n, max, text: `${n}×`, title: `${n} of ${max} cycles` };
+  }
+
+  // Gate pip: the gate holds at the SOURCE's publish.
+  const g = state.gate && typeof state.gate === 'object' ? state.gate : null;
+  if (g && g.wireId) {
+    const wire = wires.find((w) => w.id === g.wireId) || null;
+    const nodeId = g.fromNode || (wire && wire.from && wire.from.node) || null;
+    if (nodeId) decor.gate = { nodeId, wireId: g.wireId, askId: g.askId || null };
+  }
+}
+
+/**
+ * Lay the decor over an already-rendered view. Idempotent and self-clearing:
+ * every ornament is rebuilt from the bag, so a repaint after the run settles
+ * cannot strand an ant, a badge or a gate pip. NEVER writes a card height —
+ * `view.setFooter` re-runs `nodeSize` for the band count it was handed.
+ * Band order inside a footer, top → bottom: fan → strip → exec×N (only for the
+ * ONE expanded node) → result.
+ */
+export function applyDecor(view, decor) {
+  if (!view || !decor) return;
+  const expanded = decor.expanded || null;
+  for (const nodeId of decor.nodeIds || []) {
+    view.setStatus(nodeId, decor.status[nodeId] || 'pending');
+    view.setNodeChrome(nodeId, {
+      color: decor.colors[nodeId] || '',
+      gate: decor.gate && decor.gate.nodeId === nodeId
+        ? { wireId: decor.gate.wireId, title: 'waiting on a loop gate — open the question panel' } : null,
+      totals: decor.totals[nodeId] || null,
+    });
+    const foot = decor.footers[nodeId] || null;
+    const bands = [];
+    if (foot && foot.fan) {
+      bands.push({ kind: 'fan', leds: foot.fan.leds, count: foot.fan.count, lines: fanLines(foot.fan.leds.length) });
+    }
+    if (foot && foot.rows.length) {
+      bands.push({ kind: 'strip', leds: foot.leds.slice(0, STRIP_LED_CAP), summary: foot.summary, expanded: expanded === nodeId });
+      if (expanded === nodeId) {
+        for (const r of foot.rows) {
+          const right = [r.dur, r.cost].filter(Boolean).join(' · ');
+          bands.push({ kind: 'exec', executionId: r.executionId, led: r.led, label: r.label,
+            right, ...execBandLayout(r.label, right) });
+        }
+      }
+    }
+    if (decor.endResult && decor.endResult.nodeId === nodeId) {
+      bands.push({ kind: 'result', text: decor.endResult.text, path: decor.endResult.path });
+    }
+    view.setFooter(nodeId, bands);
+  }
+  for (const wireId of decor.wireIds || []) view.setWireBadge(wireId, decor.loopBadges[wireId] || null);
+  view.setWireLive(decor.liveWireIds || []);
+}

package/ui/public/graph/run-hosts.mjs

@@ -0,0 +1,201 @@
+// ui/public/graph/run-hosts.mjs   (depth 3 below the repo root)
+//
+// The three run-graph HOSTS. One renderer (view.mjs) + one decor pass
+// (run-decor.mjs) mounted with per-host mode, zoom clamp, wheel policy and
+// sizing. Nothing here knows about the app's run model — app.js hands it a
+// manifest + a decor bag and gets clicks back.
+//
+// Measurement: `viewport` is a FUNCTION `() => ({left, top, width, height})`
+// (or null), handed VERBATIM to createGraphView; every size this module needs
+// is `view.readRect()` — the ONE measurement path the renderer already owns.
+// Bounds: `view.bounds(pad)` — the shared geometry over the RENDERED template
+// with the footer rows the view actually painted (never a second band count).
+import { createGraphView } from './view.mjs';
+import { applyDecor, manifestAgents, manifestNodes, manifestPortsFn, manifestTemplate } from './run-decor.mjs';
+import { fitBounds } from '../../../src/shared/graph/geometry.mjs';
+
+export const STATIC_HOST_H = 300;      // D5: the Running list card's graph height
+export const STATIC_INSET = 32;        // wrap padding allowance on both axes (16 each side)
+export const DETAIL_MIN_H = 360, DETAIL_MAX_H = 600, DETAIL_PAD_H = 48;
+export const HINT_TEXT = 'click to pan · ⌘+scroll to zoom';
+const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+
+/** Centre `b` (already padded) in a vw×vh viewport through the SHARED `fitBounds`;
+ *  fit NEVER magnifies past 1× (spec §7.6). Returns the view's `{x, y, z}`. */
+export function fitInto(b, vw, vh, { zoomMin = 0.3 } = {}) {
+  const f = fitBounds(b, { width: vw, height: vh }, { zoomMin, zoomMax: 1 });
+  return { x: f.tx, y: f.ty, z: f.z };
+}
+
+/** The node-id set as a string — a change of it is the ONE structural change
+ *  short of a new run (the manifest is never rewritten mid-run, spec §5.8). */
+const nodeSig = (stepper) => manifestNodes(stepper).map((n) => n.id).join(',');
+
+export function mountRunGraph(hostEl, opts = {}) {
+  const { mode = 'monitor', doc = hostEl.ownerDocument, raf = null, viewport = null,
+    onRowClick = null, onGateClick = null, onResultClick = null } = opts;
+  const wrap = hostEl.closest('.run-flow-wrap') || hostEl.parentElement || hostEl;
+  const win = doc.defaultView || globalThis;
+  const isStatic = mode === 'static';
+  const zoomMin = 0.3, zoomMax = isStatic ? 1 : 1.6;
+
+  let view = null, stepper = null, decor = null, runId = null, expanded = null, ro = null, lastFit = null, bound = false;
+  // The last width `view.readRect()` reported. A host inside a `display:none`
+  // subtree (compact density, a closed detail) measures 0×0, and both fitters
+  // BAIL on that rather than poison the transform / --run-host-h with it; the
+  // first paint that sees a real box has to re-fit even when nothing structural
+  // changed, or the graph keeps the transform it had while it was hidden.
+  let lastRectW = 0;
+  const listeners = [];
+  const on = (target, type, fn, o) => { target.addEventListener(type, fn, o); listeners.push([target, type, fn, o]); };
+
+  /** True until the user pans or zooms away from the last auto-fit. */
+  const untouched = () => {
+    if (!view || !lastFit) return true;
+    const t = view.getTransform();
+    return Math.abs(t.x - lastFit.x) < 0.5 && Math.abs(t.y - lastFit.y) < 0.5 && Math.abs(t.z - lastFit.z) < 1e-6;
+  };
+
+  // Static (the Running list card): fit BOTH axes into (width − 32, 300 − 32),
+  // 0.3–1×. CSS scrollable overflow only extends rightwards, so a graph that is
+  // wider than the card even at the 0.3 floor is LEFT-aligned and the host is
+  // widened inline; `.gv-wrap-static{overflow-x:auto}` then scrolls it natively.
+  function fitStatic() {
+    // FIRST, before ANY measurement: `.gv-stage` is `inset:0` inside
+    // `.run-flow.gv-host`, so `view.readRect()` returns the HOST's box — including
+    // the inline width this very function writes on the wide branch. Leaving it on
+    // would make the next fit measure the widened host, take the centred branch,
+    // clear the width, and take the wide branch again: consecutive fits oscillate.
+    hostEl.style.width = '';
+    const r = view.readRect();
+    if (!(r.width > 0)) return;                 // hidden host (0×0): nothing to fit into
+    const b = view.bounds(16);
+    if (!b) return;
+    const vw = Math.max(1, r.width - STATIC_INSET), vh = STATIC_HOST_H - STATIC_INSET;
+    const f = fitInto(b, vw, vh, { zoomMin });
+    const sw = b.w * f.z;
+    if (sw > vw) {
+      hostEl.style.width = `${Math.ceil(sw + STATIC_INSET)}px`;
+      view.setTransform({ x: 16 - b.x * f.z, y: 16 + f.y, z: f.z });
+    } else {
+      hostEl.style.width = '';
+      view.setTransform({ x: 16 + f.x, y: 16 + f.y, z: f.z });
+    }
+  }
+
+  // Monitor (the detail pages), two-pass: the WIDTH decides the zoom, the zoom
+  // decides the host height (clamp 360..600 via --run-host-h on the wrap), then
+  // both axes fit into (width, hostH). `applyTransform: false` is the height
+  // pass alone — a touched view keeps its pan/zoom while a taller card lands.
+  function fitMonitor(applyTransform) {
+    const r = view.readRect();
+    if (!(r.width > 0)) return;                 // hidden host (0×0): a 0-width fit would
+    const b = view.bounds(24);                  // pin --run-host-h at the 360px floor and
+    if (!b) return;                             // zoom to the 0.3 clamp for good.
+    const vw = Math.max(1, r.width);
+    const zw = clamp(Math.min(vw / b.w, 1), zoomMin, 1);
+    const hostH = clamp(Math.round((b.h - 48) * zw + DETAIL_PAD_H), DETAIL_MIN_H, DETAIL_MAX_H);   // b is padded 24 each side
+    wrap.style.setProperty('--run-host-h', `${hostH}px`);
+    if (applyTransform) view.setTransform(fitInto(b, vw, hostH, { zoomMin }));
+  }
+
+  function fit() {
+    if (!view || !stepper) return;
+    if (isStatic) fitStatic(); else fitMonitor(true);
+    lastFit = view.getTransform();
+  }
+  /** The size pass without the transform (monitor only; static hosts never grow). */
+  function sizeHost() {
+    if (!view || !stepper || isStatic) return;
+    fitMonitor(false);
+  }
+  /** Re-fit while the user has not touched the view; otherwise only re-size the host. */
+  function refit() { if (untouched()) fit(); else sizeHost(); }
+
+  function paint() {
+    if (!view || !decor) return;
+    applyDecor(view, { ...decor, expanded });
+  }
+
+  function mount() {
+    // `.run-flow` is the v1 flex column box (padding 66/52, width:max-content).
+    // The v2 renderer's `.gv-stage{position:absolute;inset:0}` would fill THAT
+    // padding box, not the wrap — `.gv-host` / `.gv-wrap-*` (style.css) reset it.
+    hostEl.classList.add('gv-host');
+    wrap.classList.add('gv-wrap', isStatic ? 'gv-wrap-static' : 'gv-wrap-monitor');
+    view = createGraphView(hostEl, { mode, doc, raf, viewport,
+      portsFn: manifestPortsFn(stepper), agents: manifestAgents(stepper), zoomMin, zoomMax,
+      wheelPan: isStatic ? 'always' : 'engaged' });
+    // The view never auto-binds a nav: monitor hosts ask for one (D8 engaged-only)
+    // and learn engagement from it — run-hosts keeps NO engagement state of its own,
+    // and view.destroy() destroys every nav, so the handle is not kept.
+    if (!isStatic) view.createNav({ wheelPan: 'engaged', onEngaged: (engaged) => wrap.classList.toggle('rg-engaged', engaged) });
+  }
+
+  function update(nextRunId, nextStepper, nextDecor) {
+    const runChanged = nextRunId !== runId;
+    const structural = !view || runChanged || nodeSig(nextStepper) !== nodeSig(stepper);
+    const sameBag = !structural && nextDecor === decor;
+    if (runChanged) { runId = nextRunId; expanded = null; lastFit = null; }   // one node open per surface; a new run is a new build
+    // A node-set change needs a view whose portsFn/headers read the NEW manifest.
+    if (view && structural && nodeSig(nextStepper) !== nodeSig(stepper)) { view.destroy(); view = null; lastFit = null; }
+    stepper = nextStepper; decor = nextDecor;
+    if (!view) mount();
+    if (!bound) { bind(); bound = true; }
+    if (structural) view.render(manifestTemplate(stepper), {});   // the O(n) wire rewrite: structural only
+    if (!sameBag) paint();                                       // statuses/footers/badges: fast paths
+    // A host that was hidden (0×0) when it was last painted never got a real fit:
+    // re-fit on the first paint that sees a box, structural or not.
+    const rectW = view.readRect().width || 0;
+    const revealed = rectW > 0 && !(lastRectW > 0);
+    lastRectW = rectW;
+    if ((structural || revealed) && untouched()) fit();
+  }
+
+  function bind() {
+    if (!isStatic) {
+      const hint = doc.createElement('div');
+      hint.className = 'rg-hint';
+      hint.textContent = HINT_TEXT;
+      wrap.appendChild(hint);
+      // (engage/disengage listeners live in the view's nav — see mount() above)
+      on(hostEl, 'click', (e) => {
+        const toggle = e.target.closest && e.target.closest('.xtoggle');
+        if (toggle) { expanded = expanded === toggle.dataset.nodeId ? null : toggle.dataset.nodeId; paint(); refit(); return; }
+        const link = e.target.closest && e.target.closest('.xresult a');
+        if (link) { e.preventDefault(); if (onResultClick) onResultClick(link.dataset.path); return; }
+        const gate = e.target.closest && e.target.closest('.ngate');
+        if (gate) { if (onGateClick) onGateClick(gate.dataset.wireId); return; }
+        const row = e.target.closest && e.target.closest('.xrow');
+        if (row && onRowClick) onRowClick(row.dataset.executionId, row.dataset.nodeId);
+      });
+    }
+    // jsdom has no ResizeObserver — guard through the document's window (P5's idiom).
+    if (typeof win.ResizeObserver === 'function') {
+      ro = new win.ResizeObserver(() => { if (isStatic) fit(); else refit(); });
+      ro.observe(wrap);
+    }
+  }
+
+  function destroy() {
+    for (const [t, type, fn, o] of listeners) t.removeEventListener(type, fn, o);
+    listeners.length = 0;
+    if (ro) { try { ro.disconnect(); } catch { /* jsdom */ } ro = null; }
+    const hint = wrap.querySelector(':scope > .rg-hint');
+    if (hint) hint.remove();
+    if (view) { view.destroy(); view = null; }   // view.destroy() tears every nav down
+    hostEl.classList.remove('gv-host');
+    wrap.classList.remove('gv-wrap', 'gv-wrap-static', 'gv-wrap-monitor', 'rg-engaged');
+    wrap.style.removeProperty('--run-host-h');
+    hostEl.style.width = '';
+    hostEl.innerHTML = '';
+    lastFit = null;
+    lastRectW = 0;
+    // bind() is called once per mount, guarded by `bound`. destroy() removed every
+    // listener, the hint chip and the ResizeObserver, so a later update() must be
+    // allowed to bind them again — otherwise the re-mounted view is inert.
+    bound = false;
+  }
+
+  return { update, fit, destroy, get view() { return view; } };
+}

package/ui/public/graph/save-dialog.mjs

@@ -0,0 +1,56 @@
+// ui/public/graph/save-dialog.mjs
+// The composer's save modal — a real <dialog>, never window.prompt. Pure
+// renderer: it returns a DETACHED dialog; composer.mjs mounts it and owns the POST.
+function h(doc, tag, cls, text) { const n = doc.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; }
+
+export function renderSaveDialog({ name = '', domain = '', domains = [], title = 'Save pipeline', note = '', doc = globalThis.document } = {}) {
+  const dlg = doc.createElement('dialog');
+  dlg.className = 'save-dialog';
+  const form = h(doc, 'div', 'sd-body');
+  form.appendChild(h(doc, 'h2', 'sd-title', title));
+  // `note` is standing provenance ("this row belongs to a plugin"), NOT an
+  // error: it sits above the fields and never shares the .sd-msg line, which
+  // the server's 422/409 refusals own.
+  if (note) form.appendChild(h(doc, 'p', 'sd-note', note));
+
+  const nameWrap = h(doc, 'div', 'sd-field');
+  nameWrap.appendChild(h(doc, 'label', null, 'Name'));
+  const nameInput = doc.createElement('input');
+  nameInput.type = 'text'; nameInput.className = 'sd-name'; nameInput.value = name;
+  nameInput.setAttribute('spellcheck', 'false'); nameInput.placeholder = 'e.g. Full pipeline';
+  nameWrap.appendChild(nameInput);
+  form.appendChild(nameWrap);
+
+  const domWrap = h(doc, 'div', 'sd-field');
+  domWrap.appendChild(h(doc, 'label', null, 'Domain'));
+  const domInput = doc.createElement('input');
+  domInput.type = 'text'; domInput.className = 'sd-domain'; domInput.value = domain;
+  domInput.setAttribute('spellcheck', 'false'); domInput.placeholder = 'general';
+  const listId = `sd-domains-${Math.random().toString(36).slice(2, 8)}`;
+  domInput.setAttribute('list', listId);
+  const list = doc.createElement('datalist');
+  list.id = listId;
+  for (const d of domains) { const o = doc.createElement('option'); o.value = d; list.appendChild(o); }
+  domWrap.append(domInput, list);
+  form.appendChild(domWrap);
+
+  form.appendChild(h(doc, 'p', 'sd-msg'));
+  const actions = h(doc, 'div', 'sd-actions');
+  const cancel = h(doc, 'button', 'btn-ghost sd-cancel', 'Cancel'); cancel.type = 'button';
+  const confirm = h(doc, 'button', 'btn-go sd-confirm', 'Save'); confirm.type = 'button';
+  actions.append(cancel, confirm);
+  form.appendChild(actions);
+  dlg.appendChild(form);
+  return dlg;
+}
+
+/** jsdom (and older browsers) lack showModal — fall back to the `open`
+ *  attribute so the modal is still in the accessibility tree. */
+export function openDialog(dlg) {
+  if (typeof dlg.showModal === 'function') { try { dlg.showModal(); return; } catch { /* already open */ } }
+  dlg.setAttribute('open', '');
+}
+export function closeDialog(dlg) {
+  if (typeof dlg.close === 'function') { try { dlg.close(); return; } catch { /* not open */ } }
+  dlg.removeAttribute('open');
+}