@worca/app 1.2.0 → 1.3.0-rc.2

package/ui/public/ask-run-card.mjs

@@ -0,0 +1,209 @@
+// ui/public/ask-run-card.mjs — the Ask Worca run progress card: a STATELESS view over one run snapshot.
+// Two producers feed the same shape: app.js askRunSnapshot(r) (live, from the run model) and
+// snapshotFromState(state) here (REST rowToState). Pure DOM (`doc` injected), no fetch, no timers;
+// the panel owns the store, the hydration and the tick. Mirrors app.js statusPill/activeCopy so the
+// card and the Running list never disagree on a family (one wording deviation: the question state
+// reads "Waiting for your answer", the request's own name for it).
+import { decorFromState, applyDecor, manifestTemplate, manifestPortsFn, manifestAgents, isGraphManifest, fmtDur, fmtUsd } from './graph/run-decor.mjs';
+import { mountStaticGraph } from './graph/view.mjs';
+import { FLOW_SCALE } from './graph/model.mjs';
+
+export const PROGRESS_CARD_TYPE = 'progress';
+/** app.js isTerminalStatus's set, verbatim (app.js:4304-4306). */
+export const TERMINAL_RUN_STATUS = new Set(['done', 'error', 'stopped', 'aborted', 'failed', 'complete', 'completed', 'interrupted']);
+/** app.js isLive's status arm (app.js:14663-14666): a run that is scheduling work. A REST row carries no pendingQuestion. */
+const LIVE_STATUS = new Set(['starting', 'running', 'pausing']);
+/** The six manifest colours the view's h-* / --c vocabulary knows (style.css .gv-world .h-*; app.js PILL_FAMILIES). */
+const NODE_COLORS = new Set(['violet', 'blue', 'green', 'red', 'peach', 'amber']);
+const PAUSE_WHY = { cost_pipeline: 'cost limit', cost_total: 'total budget', error: 'error', recoverable: 'recoverable', usage_limit: 'usage limit' };
+
+/** A frozen snapshot from GET /api/ask/runs/:id `state` (artifacts.mjs rowToState). null for a non-object. */
+export function snapshotFromState(state, { now = Date.now() } = {}) {
+  if (!state || typeof state !== 'object') return null;
+  const status = String(state.status || '').toLowerCase();
+  const graph = isGraphManifest(state.stepper);
+  // live derives from the status exactly as app.js isLive does for the Running list: a row that is still running
+  // marches its ants and paints unfinished executions active; a paused/finished row is resolved (run-decor.mjs:162).
+  const live = LIVE_STATUS.has(status);
+  const decor = graph ? decorFromState(state, { live, now }) : null;
+  const ws = state.target === 'workspace';
+  return {
+    source: 'rest',
+    runId: null,
+    pipelineId: state.id || null,
+    kind: ws ? 'workspace-run' : 'run',
+    title: state.title || '',
+    projectKey: ws ? null : (state.projectKey || null),
+    workspaceId: ws ? (state.workspaceId || null) : null,
+    projectDir: state.projectDir || '',
+    projectNames: ws && Array.isArray(state.projects) ? state.projects.map((p) => p && p.projectName).filter(Boolean) : null,
+    status,
+    pauseReason: state.pauseReason || null,
+    pendingQuestion: null,
+    live,
+    terminal: TERMINAL_RUN_STATUS.has(status),
+    startedAt: state.startedAt || null,
+    elapsedMs: Number(state.totalActiveMs) || 0,
+    costUsd: Number(state.totalCostUsd) || 0,
+    progress: decor ? decor.progress : null,
+    active: decor ? decor.activeNodes : [],          // a v1 row names no agent even when state.active is set
+    stepper: graph ? state.stepper : null,
+    decor,
+  };
+}
+
+/** {family, text} — app.js statusPill + activeCopy, in the SAME branch order (parked-ness before the question, the question before done/stopped/error). */
+export function runPill(snap) {
+  if (!snap) return { family: 'peach', text: 'Starting' };
+  const s = snap.status;
+  if (s === 'pausing') return { family: 'amber', text: 'Pausing…' };
+  if (s === 'paused') { const why = PAUSE_WHY[snap.pauseReason]; return { family: 'amber', text: why ? `Paused · ${why}` : 'Paused' }; }
+  if (s === 'interrupted') return { family: 'amber', text: 'Interrupted' };
+  if (snap.pendingQuestion) return { family: 'amber', text: snap.pendingQuestion.kind === 'workflow' ? 'Waiting · your decision' : 'Waiting for your answer' };
+  if (s === 'starting') return { family: 'peach', text: 'Starting' };
+  if (s === 'done') return { family: 'green', text: 'Done' };
+  if (s === 'stopped') return { family: 'red', text: 'Stopped' };
+  if (s === 'error') return { family: 'red', text: 'Error' };
+  if (TERMINAL_RUN_STATUS.has(s)) return { family: 'red', text: s.charAt(0).toUpperCase() + s.slice(1) };
+  const list = Array.isArray(snap.active) ? snap.active : [];
+  if (list.length >= 2) return { family: 'peach', text: `${list.length} agents running` };
+  if (list.length === 1) return { family: NODE_COLORS.has(list[0].color) ? list[0].color : 'peach', text: list[0].label };
+  return { family: 'peach', text: 'Running' };
+}
+
+/** Where "Open run" goes (D12). */
+export function progressRoute(ident, snap) {
+  if (snap && snap.source === 'live' && snap.runId) return `#running/${snap.runId}`;
+  const pipelineId = ident.pipelineId || (snap && snap.pipelineId) || null;
+  const workspaceId = ident.workspaceId || (snap && snap.workspaceId) || null;
+  const projectKey = ident.projectKey || (snap && snap.projectKey) || null;
+  const key = workspaceId ? `workspaces/${workspaceId}` : projectKey;
+  const history = pipelineId && key ? `#history/${key}/${pipelineId}` : null;
+  if (snap && snap.source === 'rest') return history || `#running/${ident.runId || ''}`;
+  if (ident.runId) return `#running/${ident.runId}`;
+  return history || '#running/';
+}
+
+const nodeSig = (stepper) => (stepper && stepper.graph && Array.isArray(stepper.graph.nodes) ? stepper.graph.nodes.filter(Boolean).map((n) => n.id).join('|') : '');
+const projectLabel = (ident, snap) => {
+  if (ident.label) return ident.label;
+  if (snap && Array.isArray(snap.projectNames) && snap.projectNames.length) return snap.projectNames.join(' · ');
+  if (snap && snap.projectDir) return String(snap.projectDir).split(/[\\/]/).filter(Boolean).pop() || '';
+  return ident.workspaceId ? `workspace ${ident.workspaceId}` : (ident.projectKey || '');
+};
+
+/**
+ * @param {{doc: Document, ident: object, onOpen?: (href: string) => void}} opts
+ * @returns {{el, parts:{graph}, update(snap, now), relayout(w), setReason(text), destroy(), snapshot}}
+ */
+export function createRunProgressCard({ doc, ident, onOpen = null }) {
+  const h = (tag, cls, text) => { const n = doc.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; };
+  const el = h('div', 'ask-card ask-rc');
+  el.dataset.cardId = ident.cardId || '';
+  const head = h('div', 'ask-rc-head');
+  const pill = h('span', 'ask-rc-pill st-peach');
+  const pillText = h('span', 'ask-rc-pill-text', 'Starting');
+  pill.append(h('span', 'ask-rc-dot'), pillText);
+  const open = h('a', 'ask-rc-open', 'Open run');   // class-free pin (.ask-card a[href]); never .ask-card-link — its colour rule would leak
+  open.setAttribute('href', progressRoute(ident, null));
+  open.addEventListener('click', (e) => { e.preventDefault(); if (typeof onOpen === 'function') onOpen(open.getAttribute('href') || ''); });
+  head.append(h('span', 'ask-rc-kicker', 'Pipeline run'), pill, h('span', 'ask-rc-spacer'), open);
+  const title = h('div', 'ask-rc-title', ident.title || 'Run');
+  const sub = h('div', 'ask-rc-sub');
+  const stats = h('div', 'ask-rc-stats');
+  const stat = (label, cls) => { const box = h('div', 'ask-rc-stat'); const v = h('span', `ask-rc-stat-v ${cls}`); box.append(h('span', 'ask-rc-stat-k', label), v); stats.appendChild(box); return v; };
+  const timeEl = stat('Elapsed', 'ask-rc-time mono');
+  const costEl = stat('Cost', 'ask-rc-cost mono');
+  const progEl = stat('Progress', 'ask-rc-prog mono');
+  const activeBox = h('div', 'ask-rc-active'); activeBox.hidden = true;
+  const banner = h('div', 'ask-rc-banner'); banner.hidden = true;
+  const graphHost = h('div', 'ask-rc-graph'); graphHost.hidden = true; graphHost.setAttribute('role', 'img');
+  graphHost.addEventListener('click', () => open.click());
+  const reason = h('div', 'ask-rc-reason'); reason.hidden = true;
+  el.append(head, title, sub, stats, activeBox, banner, graphHost, reason);
+
+  let graph = null, graphSig = '', lastDecor = null, activeSig = null, lastSnap = null;
+  // G1 (D7/D19): footer bands change a card's height, which the flow layout never billed, and the per-node
+  // total pips hang outside the card box — strip both (and the End result band) before applyDecor.
+  const bagOf = (decor) => ({ ...decor, footers: {}, totals: {}, endResult: null, expanded: null });
+  // G2 (D18): every re-render rewrites the wire classes and badge text (view.mjs:511, 517) — put the ornaments back.
+  const redecorate = () => { if (graph && lastDecor) applyDecor(graph, bagOf(lastDecor)); };
+
+  function paintGraph(snap) {
+    const stepper = snap && snap.stepper;
+    const sig = stepper && isGraphManifest(stepper) ? nodeSig(stepper) : '';
+    if (!sig) { if (graph) { graph.destroy(); graph = null; graphSig = ''; lastDecor = null; } graphHost.hidden = true; return; }
+    if (!graph || sig !== graphSig) {
+      if (graph) graph.destroy();
+      graphHost.replaceChildren();
+      graphHost.hidden = false;
+      lastDecor = null;
+      // onLayout fires inside the mount's own paint() — once synchronously here (graph is still null → no-op)
+      // and again on every host width change its ResizeObserver sees (the path relayoutCards() never covers).
+      graph = mountStaticGraph(graphHost, manifestTemplate(stepper), {
+        doc, portsFn: manifestPortsFn(stepper), agents: manifestAgents(stepper), scale: FLOW_SCALE, layout: 'flow',
+        onLayout: redecorate,
+      });
+      graphSig = sig;
+      graphHost.setAttribute('aria-label', `Workflow graph: ${graph.flowLayout().order.map((id) => { const n = stepper.graph.nodes.find((x) => x && x.id === id); return (n && n.label) || id; }).join(' → ')}`);
+    }
+    if (snap.decor && snap.decor !== lastDecor) { lastDecor = snap.decor; redecorate(); }
+  }
+  function paintActive(list) {
+    const sig = list.map((a) => `${a.nodeId}:${a.label}:${a.color}`).join(',');
+    if (sig === activeSig) return;
+    activeSig = sig;
+    activeBox.replaceChildren();
+    activeBox.hidden = !list.length;
+    for (const a of list) {
+      const chip = h('span', 'ask-rc-agent');
+      chip.append(h('span', 'ask-rc-agent-dot'), doc.createTextNode(a.label || a.nodeId));   // a REAL dot (D25): the dock's reduced-motion blanket cannot reach a ::before
+      chip.style.setProperty('--c', NODE_COLORS.has(a.color) ? `var(--${a.color})` : 'var(--ink-3)');
+      activeBox.appendChild(chip);
+    }
+  }
+  function paintBanner(snap) {
+    const q = snap && snap.pendingQuestion;
+    banner.hidden = !q;
+    if (!q) return;
+    const n = Array.isArray(q.questions) && q.questions.length ? q.questions.length : (Array.isArray(q.issues) && q.issues.length ? q.issues.length : 1);
+    banner.textContent = q.kind === 'workflow' ? 'Waiting for your decision on the proposed workflow' : `Waiting for your answer — ${n} question${n === 1 ? '' : 's'}`;
+  }
+  function update(snap, now = Date.now()) {
+    lastSnap = snap || null;
+    const p = runPill(snap);
+    const live = !!snap && !snap.terminal && (LIVE_STATUS.has(snap.status) || !!snap.pendingQuestion);
+    el.classList.toggle('is-live', live);
+    el.classList.toggle('is-terminal', !!snap && !!snap.terminal);
+    el.classList.toggle('is-question', !!snap && !!snap.pendingQuestion);
+    pill.className = `ask-rc-pill st-${p.family}`;
+    pillText.textContent = p.text;
+    if (snap && snap.title) title.textContent = snap.title;
+    const pid = (snap && snap.pipelineId) || ident.pipelineId;
+    sub.textContent = [projectLabel(ident, snap), pid ? `#${pid}` : ''].filter(Boolean).join(' · ');
+    timeEl.textContent = fmtDur(snap ? snap.elapsedMs : 0);
+    costEl.textContent = fmtUsd(snap ? snap.costUsd : 0);
+    const prog = snap && snap.progress;
+    progEl.textContent = prog && prog.total ? `${prog.done}/${prog.total} agents` : '—';
+    paintActive(snap && Array.isArray(snap.active) ? snap.active : []);
+    paintBanner(snap);
+    open.setAttribute('href', progressRoute(ident, snap));
+    paintGraph(snap);
+    void now;   // the panel's tick passes its clock; nothing here extrapolates (the store recomputes elapsed)
+  }
+  function relayout(w = 0) {
+    if (!graph) return;
+    const lay = graph.relayout(w || graphHost.clientWidth || 0);
+    graphHost.style.height = `${lay.height}px`;
+    redecorate();                         // G2: render() rebuilt the wires without their ants/badges
+  }
+  return {
+    el,
+    parts: { graph: graphHost },          // relayoutCards() measures parts.graph
+    update,
+    relayout,
+    setReason(text) { reason.textContent = text || ''; reason.hidden = !text; },
+    destroy() { if (graph) { graph.destroy(); graph = null; graphSig = ''; lastDecor = null; } },
+    get snapshot() { return lastSnap; },
+  };
+}

package/ui/public/auto-build.mjs

@@ -0,0 +1,95 @@
+// ui/public/auto-build.mjs
+// The workflow card's BUILD choreography (mockup 2026-09-05 §B + §F "Motion"): the four-step trace while
+// propose_workflow runs (heuristic timing — no child→parent IPC, PD13) and the staged reveal of the REAL graph once
+// the proposed payload lands (cards in placement order, a wire after both ends, badges + match line last).
+// Pure DOM + injected timers; prefers-reduced-motion ⇒ everything lands at once. Names no agent key.
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const EASE_NODE_MS = 140;     // stagger between cards
+const WIRE_AFTER_MS = 120;    // a wire draws this long after its later end landed
+const TAIL_MS = 420;          // badges + match line after the last card
+
+export const BUILD_STEPS = Object.freeze([
+  ['Reading agent cards', 'meta + frontmatter'],
+  ['Sizing the task', 'kind · size · signals'],
+  ['Assembling the graph', 'cards and wires'],
+  ['Checking saved workflows', 'exact-topology match'],
+]);
+/** ms after START at which steps 0..2 turn live; step 3 turns live only with the proposed flip (the element is replaced). */
+export const TRACE_TIMING = Object.freeze({ task: [0, 600, 2000], shape: [0, 0, 400] });
+
+export function prefersReducedMotion(win) {
+  try { return !!(win && win.matchMedia && win.matchMedia('(prefers-reduced-motion: reduce)').matches); } catch { return false; }
+}
+
+const h = (doc, tag, cls, text) => { const n = doc.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; };
+
+/** The trace list of the building card. */
+export function buildTrace(doc, { mode = 'task' } = {}) {
+  const ul = h(doc, 'ul', 'ask-wfcard-trace');
+  ul.setAttribute('aria-live', 'polite');
+  const steps = BUILD_STEPS.map(([labelText, meter], i) => {
+    const li = h(doc, 'li', 'ask-wfcard-step');
+    const ico = h(doc, 'span', 'st-ico'); ico.appendChild(h(doc, 'span', 'st-dot'));
+    const check = doc.createElementNS(SVG_NS, 'svg'); check.setAttribute('viewBox', '0 0 24 24'); check.setAttribute('class', 'st-check'); check.setAttribute('aria-hidden', 'true');
+    const path = doc.createElementNS(SVG_NS, 'path'); path.setAttribute('d', 'M5 13l4 4L19 7'); check.appendChild(path); ico.appendChild(check);
+    const label = h(doc, 'span', 'st-label', mode === 'shape' && i === 1 ? 'Checking the shape' : labelText);
+    const met = h(doc, 'span', 'st-meter', '');
+    li.append(ico, label, met); ul.appendChild(li);
+    return { li, met, meter };
+  });
+  const setStep = (n, meterText = null) => {
+    steps.forEach((s, i) => {
+      s.li.classList.toggle('is-done', i < n);
+      s.li.classList.toggle('is-live', i === n);
+      s.met.textContent = i < n ? s.meter : (i === n && meterText != null ? meterText : '');
+    });
+  };
+  setStep(0);
+  return { el: ul, setStep };
+}
+
+/** Advance the trace on the heuristic clock; returns stop(). */
+export function scheduleTrace(trace, { win = globalThis, mode = 'task' } = {}) {
+  const at = TRACE_TIMING[mode] || TRACE_TIMING.task;
+  const timers = at.map((ms, i) => win.setTimeout(() => trace.setStep(i), ms));
+  return () => { for (const t of timers) win.clearTimeout(t); };
+}
+
+/**
+ * Reveal a mounted proposal's graph in placement order. `handle` = renderAutoProposal's return (its `graph` view is
+ * mountStaticGraph's handle: flowLayout().order, nodeEl, wiresEl, world, template). Returns cancel() — which LANDS
+ * everything (used when the card element is dropped mid-build).
+ */
+export function playAssembly(handle, { win = globalThis, onDone = null } = {}) {
+  const view = handle && handle.graph;
+  const land = () => {
+    if (view) {
+      for (const id of (view.flowLayout()?.order || [])) view.nodeEl(id)?.classList.remove('is-hid');
+      for (const p of view.wiresEl.querySelectorAll('path.wire.is-hid')) p.classList.remove('is-hid');
+      for (const b of view.world.querySelectorAll('.wbadge.is-hid')) b.classList.remove('is-hid');
+    }
+    handle?.parts?.match?.classList.remove('is-hid');
+    handle?.parts?.loops?.classList.remove('is-hid');
+  };
+  const order = view ? (view.flowLayout()?.order || []) : [];
+  if (!view || !order.length || prefersReducedMotion(win)) { land(); if (onDone) onDone(); return () => {}; }
+  const wires = [...view.wiresEl.querySelectorAll('path.wire[data-wire-id]')];   // committed wires only (the ghost has no id)
+  const badges = [...view.world.querySelectorAll('.wbadge')];
+  const tpl = view.template();
+  const endsOf = (p) => { const w = (tpl?.wires || []).find((x) => x.id === p.dataset.wireId); return w ? [w.from.node, w.to.node] : null; };
+  for (const id of order) view.nodeEl(id)?.classList.add('is-hid');
+  for (const p of wires) p.classList.add('is-hid');
+  for (const b of badges) b.classList.add('is-hid');
+  handle.parts.match?.classList.add('is-hid');
+  handle.parts.loops?.classList.add('is-hid');
+  const timers = [];
+  const later = (fn, ms) => timers.push(win.setTimeout(fn, ms));
+  const shown = new Set();
+  order.forEach((id, i) => {
+    later(() => { shown.add(id); view.nodeEl(id)?.classList.remove('is-hid'); }, i * EASE_NODE_MS);
+    later(() => { for (const p of wires) { const e = endsOf(p); if (e && shown.has(e[0]) && shown.has(e[1])) p.classList.remove('is-hid'); } }, i * EASE_NODE_MS + WIRE_AFTER_MS);
+  });
+  let finished = false;
+  later(() => { finished = true; land(); if (onDone) onDone(); }, order.length * EASE_NODE_MS + TAIL_MS);
+  return () => { if (finished) return; for (const t of timers) win.clearTimeout(t); land(); };
+}

package/ui/public/auto-proposal.mjs

@@ -0,0 +1,174 @@
+// ui/public/auto-proposal.mjs
+// The ONE renderer of an Auto proposal body (spec §7.4 + the 2026-09-05 mockup, section D "one body, two hosts").
+// Hosts: the run page's question panel (Part A) and the chat card (Part B). Pure DOM: `doc` injected, no fetch,
+// no listeners except the name editor's own; the host owns buttons and I/O. Reads NO agent key (D23) — every
+// label, colour and icon comes from the manifest.
+import { mountStaticGraph } from './graph/view.mjs';
+import { manifestPortsFn, manifestTemplate, manifestAgents } from './graph/run-decor.mjs';
+import { FLOW_SCALE } from './graph/model.mjs';
+
+export const AUTO_PROPOSAL_ORDER_CARD = Object.freeze(['name', 'reason', 'signals', 'fp', 'graph', 'loops', 'match', 'warnings', 'meta']);
+export const AUTO_PROPOSAL_ORDER_QPANEL = Object.freeze(['reason', 'signals', 'fp', 'name', 'graph', 'loops', 'match', 'warnings', 'meta']);
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const ICO = {
+  pencil: '<path d="M4 20h4l10.5-10.5a2 2 0 0 0-4-4L4 16v4z"/><path d="M13 7l4 4"/>',
+  check: '<path d="M5 13l4 4L19 7"/>',
+  search: '<circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/>',
+};
+function h(doc, tag, cls, text) { const n = doc.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; }
+function icon(doc, inner, cls) { const s = doc.createElementNS(SVG_NS, 'svg'); s.setAttribute('viewBox', '0 0 24 24'); s.setAttribute('aria-hidden', 'true'); if (cls) s.setAttribute('class', cls); s.innerHTML = inner; return s; }
+const fmtUsd = (v) => `$${(Number(v) || 0).toFixed(2)}`;
+
+/** Loop lines from the manifest: every loop wire with a budget, ONE hop through an `or` valve (A20). */
+export function proposalLoops(manifest) {
+  const nodes = manifest?.graph?.nodes || []; const wires = manifest?.graph?.wires || [];
+  const byId = new Map(nodes.map((n) => [n.id, n]));
+  const label = (id) => byId.get(id)?.label || id;
+  const through = (id) => {
+    const n = byId.get(id);
+    if (!n || n.kind !== 'or') return id;
+    const out = wires.find((w) => w.from.node === id);
+    return out ? out.to.node : id;
+  };
+  return wires.filter((w) => w.loop && Number.isInteger(w.maxCycles)).map((w) => ({
+    wireId: w.id, from: w.from.node, to: through(w.to.node), fromLabel: label(w.from.node), toLabel: label(through(w.to.node)), maxCycles: w.maxCycles, self: w.from.node === w.to.node,
+  }));
+}
+
+/** Band data per agent node for view.mjs's `band` option (A7, A22). `pick` turns the model/effort
+ *  chips into buttons the host opens a picker for (P3); read-only hosts leave it off. */
+export function proposalBands(proposal, nodesState = null, { pick = false } = {}) {
+  const models = new Map((proposal.models || []).map((m) => [m.id, m.label || m.id]));
+  const loops = proposalLoops(proposal.manifest);
+  const out = {};
+  for (const [id, base] of Object.entries(proposal.nodes || {})) {
+    const cur = { ...base, ...((nodesState && nodesState[id]) || {}) };
+    const flags = [];
+    if (cur.askQuestions) flags.push({ text: 'asks', cls: 'q', title: 'may ask you questions' });
+    for (const l of loops.filter((x) => x.from === id)) flags.push({ text: `${l.self ? '⟳' : '↩'} ${l.maxCycles}`, title: `${l.self ? 'refines itself' : `loops to ${l.toLabel}`} · max ${l.maxCycles} cycles` });
+    out[id] = { model: cur.model ? (models.get(cur.model) || cur.model) : '', effort: cur.effort || '', flags, ...(pick ? { pick: true } : {}) };
+  }
+  return out;
+}
+
+/** The mono line under the chips (A8): a `fingerprint:` signal wins, else the fingerprint's `hints:` line, else its first line. */
+export function fingerprintLine(proposal) {
+  const sig = (proposal.signals || []).find((s) => /^fingerprint:/i.test(s));
+  if (sig) return sig.replace(/^fingerprint:\s*/i, '');
+  const lines = String(proposal.fingerprint || '').split('\n').map((l) => l.trim()).filter(Boolean);
+  const hints = lines.find((l) => /^hints:/i.test(l));
+  return hints ? hints.replace(/^hints:\s*/i, '') : (lines[0] || '');
+}
+
+/** The dispatch order for the flow layout: the proposal's agent order; the graph's flow cards are placed by the layout rule. */
+const agentOrderOf = (proposal) => (Array.isArray(proposal.order) && proposal.order.length ? [...proposal.order] : null);
+
+/**
+ * @param {object} proposal  the `workflow` question payload (buildProposal)
+ * @param {{doc?:Document, width?:number, order?:readonly string[], editableName?:boolean, costUsd?:number, rounds?:number,
+ *          scale?:number, pick?:boolean, onName?:(name:string)=>void}} [opts]
+ * @returns {{el:HTMLElement, parts:Record<string,HTMLElement|null>, graph:object|null, getName():string, setName(v:string):void,
+ *            setNodeTunables(id:string, sel:object):void, relayout(width?:number):void, destroy():void}}
+ */
+export function renderAutoProposal(proposal, {
+  doc = globalThis.document, width = 0, order = AUTO_PROPOSAL_ORDER_CARD, editableName = true,
+  costUsd = null, rounds = null, scale = FLOW_SCALE, pick = false, onName = null,
+} = {}) {
+  const p = proposal || {};
+  const state = { name: String(p.name || ''), nodes: {} };     // nodes: host-applied tunable edits, keyed by node id
+  const el = h(doc, 'div', 'ask-wfcard-body');
+  const parts = {};
+
+  // ---- name: static row + pencil → input variant (A18)
+  const nameRow = h(doc, 'div', 'ask-wfcard-namerow');
+  const nameEl = h(doc, 'div', 'ask-wfcard-name', state.name); nameEl.title = state.name;
+  nameRow.appendChild(nameEl);
+  const edit = h(doc, 'div', 'ask-wfcard-nameedit'); edit.hidden = true;
+  const field = h(doc, 'input', 'ask-wfcard-field'); field.type = 'text'; field.setAttribute('aria-label', 'Workflow name'); field.spellcheck = false; field.maxLength = 60;
+  edit.appendChild(field); edit.appendChild(h(doc, 'div', 'ask-wfcard-fieldhint', 'Enter saves · Esc reverts'));
+  const commit = (v) => { const t = String(v || '').trim(); if (t) state.name = t; nameEl.textContent = state.name; nameEl.title = state.name; paintMatch(); if (onName) onName(state.name); };
+  if (editableName) {
+    const pencil = h(doc, 'button', 'ask-wfcard-edit'); pencil.type = 'button'; pencil.appendChild(icon(doc, ICO.pencil)); pencil.appendChild(doc.createTextNode('Edit'));
+    pencil.title = 'Edit the name · Enter or blur saves, Esc reverts';   // the mockup's "Edit · saves on blur" copy, as a tooltip
+    const open = () => { field.value = state.name; nameRow.hidden = true; edit.hidden = false; field.focus(); field.select?.(); };
+    const close = () => { edit.hidden = true; nameRow.hidden = false; };
+    pencil.addEventListener('click', open);
+    field.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); commit(field.value); close(); } else if (e.key === 'Escape') { e.preventDefault(); close(); } });
+    field.addEventListener('blur', () => { if (!edit.hidden) { commit(field.value); close(); } });
+    nameRow.appendChild(pencil);
+  }
+  const nameWrap = h(doc, 'div', 'ask-wfcard-namewrap'); nameWrap.append(nameRow, edit); parts.name = nameWrap;
+
+  // ---- reasoning, chips, fingerprint
+  parts.reason = p.reasoning ? h(doc, 'p', 'ask-wfcard-reason', p.reasoning) : null;
+  const sig = h(doc, 'div', 'ask-wfcard-signals');
+  if (p.taskKind) sig.appendChild(h(doc, 'span', 'ask-wfcard-sig kind', p.taskKind));
+  if (p.size) sig.appendChild(h(doc, 'span', 'ask-wfcard-sig size', p.size));
+  for (const s of p.signals || []) if (!/^fingerprint:/i.test(s)) sig.appendChild(h(doc, 'span', 'ask-wfcard-sig', s));
+  parts.signals = sig.childElementCount ? sig : null;
+  const fpText = fingerprintLine(p);
+  if (fpText) { const fp = h(doc, 'div', 'ask-wfcard-fp'); fp.title = `fingerprint ${fpText}`; fp.appendChild(h(doc, 'span', 'k', 'fingerprint')); fp.appendChild(doc.createTextNode(fpText)); parts.fp = fp; } else parts.fp = null;
+
+  // ---- graph: the shared renderer, flow layout, chat scale, chip bands (Tasks 1-3)
+  const loops = proposalLoops(p.manifest);
+  const m = p.manifest || { graph: { nodes: [], wires: [] } };
+  const graphHost = h(doc, 'div', 'ask-wfcard-graph');
+  graphHost.setAttribute('role', 'img');
+  const labelOf = (id) => (m.graph?.nodes || []).find((n) => n.id === id)?.label || id;
+  let bands = proposalBands(p, state.nodes, { pick });
+  let graph = null;
+  if ((m.graph?.nodes || []).length) {
+    graph = mountStaticGraph(graphHost, manifestTemplate(m), {
+      doc, portsFn: manifestPortsFn(m), agents: manifestAgents(m), width, scale, layout: 'flow',
+      band: (node) => bands[node.id] || null, order: agentOrderOf(p),
+    });
+  }
+  // Accessibility (mockup F): the label names EVERY card in placement order — gates included — so it is read from
+  // the layout the view actually produced; `p.order` is agents-only and would drop the OR valve.
+  const placed = graph ? graph.flowLayout().order : (m.graph?.nodes || []).map((n) => n.id);
+  graphHost.setAttribute('aria-label', `Workflow graph: ${placed.map(labelOf).join(' → ')}${loops.length ? `; loops: ${loops.map((l) => `${l.fromLabel} → ${l.toLabel} max ${l.maxCycles}`).join(', ')}` : ''}`);
+  parts.graph = graphHost;
+
+  // ---- loops list, match line, warnings, meta
+  if (loops.length) {
+    const ul = h(doc, 'ul', 'ask-wfcard-loops');
+    for (const l of loops) { const li = h(doc, 'li', 'ask-wfcard-loop'); li.append(doc.createTextNode(`${l.fromLabel} → ${l.toLabel} · `), h(doc, 'b', null, `max ${l.maxCycles} cycles`)); ul.appendChild(li); }
+    parts.loops = ul;
+  } else parts.loops = null;
+  const match = h(doc, 'div', `ask-wfcard-match${p.match ? ' is-hit' : ''}`);
+  const matchText = h(doc, 'span');
+  function paintMatch() {
+    matchText.replaceChildren();
+    if (p.match) { matchText.append(doc.createTextNode('Same as your saved workflow '), h(doc, 'b', null, `"${p.match.name}"`)); }
+    else { matchText.append(doc.createTextNode('No saved workflow has this shape — will be saved as '), h(doc, 'b', null, `"${state.name}"`)); }
+  }
+  match.append(icon(doc, p.match ? ICO.check : ICO.search), matchText); paintMatch(); parts.match = match;
+  const warnBox = h(doc, 'div', 'ask-wfcard-warnings');
+  for (const w of p.warnings || []) warnBox.appendChild(h(doc, 'div', 'ask-wfcard-warn', w));
+  if (p.ignoredProjectOverrides) warnBox.appendChild(h(doc, 'div', 'ask-wfcard-warn', "This project's saved settings for that workflow are not applied to Auto runs."));
+  parts.warnings = warnBox.childElementCount ? warnBox : null;
+  const agents = Object.keys(p.nodes || {}).length;
+  const cost = costUsd == null ? p.costUsd : costUsd;
+  const r = rounds == null ? p.round : rounds;
+  parts.meta = h(doc, 'div', 'ask-wfcard-meta', `classifier ≈ ${fmtUsd(cost)} · ${agents} agent${agents === 1 ? '' : 's'} · ${loops.length} loop${loops.length === 1 ? '' : 's'}${r > 1 ? ` · ${r} rounds` : ''}`);
+
+  for (const key of order) if (parts[key]) el.appendChild(parts[key]);
+
+  return {
+    el, parts, graph,
+    getName: () => state.name,
+    setName: (v) => commit(v),
+    /** A tunable edit from the host's table: repaint that node's band (no geometry change). */
+    setNodeTunables(id, sel) {
+      state.nodes[id] = { ...(state.nodes[id] || {}), ...(sel || {}) };
+      bands = proposalBands(p, state.nodes, { pick });
+      if (graph) graph.setBands(bands);
+    },
+    /** Re-measure after the host attached `el` (a detached host has clientWidth 0 ⇒ the 702 default was used).
+     *  A host built with an explicit `width` keeps it as the last fallback, so a bare
+     *  relayout() on a still-unattached host cannot snap back to that default. */
+    relayout(w = 0) { if (graph) { const lay = graph.relayout(w || graphHost.clientWidth || width || 0); graphHost.style.height = `${lay.height}px`; } },
+    destroy() { if (graph) { graph.destroy(); graph = null; } },
+  };
+}

package/ui/public/comment-thread.mjs

@@ -0,0 +1,55 @@
+// comment-thread.mjs — pure helpers for the Diff tab's comment layer. DOM-free on
+// purpose (pattern: diff-view.mjs / log-line.mjs) so node:test covers them without
+// jsdom. app.js imports both.
+
+/**
+ * Group a run's FLAT comment list (server order: path, line, creation) into
+ * threads. Roots keep their order; each thread's replies keep theirs. A reply whose
+ * root is not in the list (deleted meanwhile, or filtered out) is NEVER dropped —
+ * it becomes a one-card thread at the end, so a stale poke can hide nothing.
+ * @param {Array<{id:string, parentId?:string|null}>} list
+ * @returns {Array<{root: object, replies: object[]}>}
+ */
+export function groupCommentThreads(list) {
+  const rows = Array.isArray(list) ? list : [];
+  const threads = [];
+  const byRoot = new Map();
+  for (const c of rows) {
+    if (c.parentId) continue;
+    const t = { root: c, replies: [] };
+    threads.push(t);
+    byRoot.set(c.id, t);
+  }
+  const strays = [];
+  for (const c of rows) {
+    if (!c.parentId) continue;
+    const t = byRoot.get(c.parentId);
+    if (t) t.replies.push(c); else strays.push(c);
+  }
+  for (const c of strays) threads.push({ root: c, replies: [] });
+  return threads;
+}
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const MIN = 60_000;
+const HOUR = 60 * MIN;
+const DAY = 24 * HOUR;
+
+/**
+ * The card's time label (D11): relative for the last seven days, then the calendar
+ * date WITH the year, so a fixture from last year renders the same forever. UTC
+ * date parts, exactly like the `hdCmtStamp` tooltip it sits under — the suite pins
+ * UTC instants and sets no TZ, so a local-time label would fail east of +13.
+ * The absolute stamp belongs in `title`, not here.
+ */
+export function commentWhen(iso, now = Date.now()) {
+  const t = new Date(iso ?? NaN).getTime();
+  if (Number.isNaN(t)) return '';
+  const diff = Math.max(0, now - t);
+  if (diff < MIN) return 'just now';
+  if (diff < HOUR) return `${Math.floor(diff / MIN)}m ago`;
+  if (diff < DAY) return `${Math.floor(diff / HOUR)}h ago`;
+  if (diff < 7 * DAY) return `${Math.floor(diff / DAY)}d ago`;
+  const d = new Date(t);
+  return `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}, ${d.getUTCFullYear()}`;
+}