@worca/app 1.0.0 → 1.2.0-rc.1

package/ui/public/graph/inspector.mjs

@@ -0,0 +1,183 @@
+// ui/public/graph/inspector.mjs
+// Pure DOM renderers for the composer's floating rail. Every function takes the
+// target `document` via opts and returns a DETACHED element — no fetch, no
+// listeners. composer.mjs mounts the result and binds ONE delegated `change`
+// listener, routing on `data-field`. Capability rows are gated by META
+// BOOLEANS: a new agent's sidecar drives its panel with no UI change.
+import { resolveOrOutType } from '../../../src/shared/graph/ports.mjs';
+
+const ARITY_KINDS = new Set(['and', 'or', 'combine']);
+const FLOW_TITLES = { task: 'Task', end: 'End', and: 'AND', or: 'OR', combine: 'Combine' };
+const FLOW_BLURB = {
+  task: 'The pipeline entry: the prompt and its attached files.',
+  end: 'The pipeline sink. A token arriving here completes the run.',
+  and: 'Fires when ALL of its inputs are fresh. Payloads are discarded — pure sequencing.',
+  or: 'Fires on ANY fresh input and forwards the freshest payload.',
+  combine: 'Joins its md inputs into one document, in port order.',
+};
+
+const h = (doc, tag, cls, text) => { const n = doc.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; };
+const field = (doc, cls, label) => { const w = h(doc, 'div', `ins-f ${cls}`); w.appendChild(h(doc, 'label', 'ins-label', label)); return w; };
+
+function select(doc, cls, name, label, items, value, { disabled = false, title = '' } = {}) {
+  const wrap = field(doc, cls, label);
+  if (title) wrap.title = title;
+  const sel = h(doc, 'select', 'ins-select');
+  sel.dataset.field = name;
+  sel.disabled = Boolean(disabled);
+  for (const opt of items) {
+    const o = doc.createElement('option');
+    o.value = opt.value; o.textContent = opt.text;
+    if (opt.value === (value == null ? '' : String(value))) o.selected = true;
+    sel.appendChild(o);
+  }
+  wrap.appendChild(sel);
+  return wrap;
+}
+function toggle(doc, cls, name, label, hint, { checked = false, disabled = false, title = '' } = {}) {
+  const row = h(doc, 'div', `ins-tog ${cls}`);
+  if (title) row.title = title;
+  const box = doc.createElement('input');
+  box.type = 'checkbox'; box.dataset.field = name; box.checked = Boolean(checked); box.disabled = Boolean(disabled);
+  const body = h(doc, 'span', 'ins-tog-b');
+  body.appendChild(h(doc, 'span', 'ins-tog-t', label));
+  if (hint) body.appendChild(h(doc, 'small', 'ins-tog-h', hint));
+  row.append(box, body);
+  return row;
+}
+function head(doc, title, sub) {
+  const w = h(doc, 'div', 'ins-head');
+  w.appendChild(h(doc, 'div', 'ins-name', title));
+  if (sub) w.appendChild(h(doc, 'div', 'ins-sub', sub));
+  return w;
+}
+function number(doc, cls, name, label, value, min) {
+  const wrap = field(doc, cls, label);
+  const input = doc.createElement('input');
+  input.type = 'number'; input.className = 'ins-number'; input.dataset.field = name;
+  input.min = String(min); input.step = '1'; input.value = String(value);
+  wrap.appendChild(input);
+  return wrap;
+}
+/** Read-only listing of a node's resolved ports. */
+function portList(doc, ports) {
+  const wrap = h(doc, 'div', 'ins-ports');
+  const zone = (label, list, dir) => {
+    if (!list.length) return;
+    wrap.appendChild(h(doc, 'div', 'ins-zone', label));
+    const ul = h(doc, 'div', 'ins-plist');
+    for (const p of list) {
+      const item = h(doc, 'div', `ins-pitem${p.synthetic ? ' gate' : ''}`);
+      item.appendChild(h(doc, 'i', p.synthetic ? 'gdot' : `dot ${p.type}`));
+      item.appendChild(h(doc, 'span', 'pn', p.id));
+      const bits = [p.type];
+      if (p.synthetic) bits.push('engine');
+      else if (dir === 'in') bits.push(p.loop ? 'loop' : (p.required === false ? 'optional' : 'required'));
+      else if (p.when && p.when !== 'always') bits.push(`on ${p.when}`);
+      if (p.expands) bits.push('fan-out');
+      item.appendChild(h(doc, 'span', 'pt mla', bits.join(' · ')));
+      ul.appendChild(item);
+    }
+    wrap.appendChild(ul);
+  };
+  zone('Inputs', ports.inputs, 'in');
+  zone('Outputs', ports.outputs, 'out');
+  return wrap;
+}
+
+export function renderNodeInspector(node, { template, portsFn, meta = null, models = [], efforts = [], subagentModels = [], doc = globalThis.document } = {}) {
+  const ports = portsFn(node) || { inputs: [], outputs: [] };
+  const root = h(doc, 'div', `ins-panel ins-${node.kind === 'agent' ? 'agent' : `flow ins-${node.kind}`}`);
+  root.dataset.nodeId = node.id;
+  const body = h(doc, 'div', 'ins-body-in');
+
+  if (node.kind === 'agent') {
+    root.appendChild(head(doc, (meta && meta.displayName) || node.key || node.id, `${node.key} · ${node.id}`));
+    body.appendChild(select(doc, 'ins-model', 'model', 'Model',
+      [{ value: '', text: 'inherit' }, ...models.map((m) => ({ value: m.id, text: m.label || m.id }))], node.config.model));
+    body.appendChild(select(doc, 'ins-effort', 'effort', 'Effort',
+      [{ value: '', text: 'default' }, ...efforts.map((e) => ({ value: e, text: e }))], node.config.effort));
+    if (meta && meta.fanOut) {
+      body.appendChild(toggle(doc, 'ins-fanout', 'fanOut', 'Research fan-out', 'parallel research sub-agents',
+        { checked: node.config.fanOut === true }));
+      // What this node's sub-agents run on. Gated by the SAME meta flag as the
+      // toggle above: an agent that cannot fan out has no children to place.
+      // '' = unset — the run resolves the auto default (a per-spawn choice
+      // rubric in the agent's prompt), so the blank option says so; 'inherit'
+      // is the stored opt-out (children ride the CLI's own resolution).
+      // A ROUTED model (custom-endpoint catalog entry) locks the control: the
+      // run degrades every stored value to the same-endpoint policy, so
+      // offering aliases here would be a lie. The stored value is kept — the
+      // per-field change handler writes only the field the user edited, and
+      // the locked option carries the stored value — and the full control
+      // returns when the node moves back to a plain model.
+      const chosen = node.config.model ? models.find((m) => m && m.id === node.config.model) : null;
+      body.appendChild(chosen && chosen.routed
+        ? select(doc, 'ins-subagent', 'subagentModel', 'Sub-agent model',
+          [{ value: node.config.subagentModel || '', text: 'same endpoint (locked)' }],
+          node.config.subagentModel || '',
+          { disabled: true, title: 'This model routes to a custom endpoint; its sub-agents run the same model. Pick a non-routed model to edit.' })
+        : select(doc, 'ins-subagent', 'subagentModel', 'Sub-agent model',
+          [{ value: '', text: 'default (agent picks)' },
+            ...subagentModels.map((m) => ({ value: m, text: m === 'auto' ? 'agent picks' : m }))],
+          node.config.subagentModel));
+    }
+    if (meta && meta.asksQuestions) {
+      const locked = Boolean(meta.questionsLocked);
+      const saved = node.config.askQuestions;
+      body.appendChild(toggle(doc, 'ins-questions', 'askQuestions', 'Ask questions', 'pauses the run for input', {
+        checked: locked ? Boolean(meta.questionsDefault) : (typeof saved === 'boolean' ? saved : Boolean(meta.questionsDefault)),
+        disabled: locked,
+        title: locked ? (meta.questionsDefault ? 'Always on for this agent' : 'Always off for this agent') : '',
+      }));
+    }
+    body.appendChild(toggle(doc, 'ins-awaitall', 'awaitAll', 'Await all inputs', 'gate until every wire fires',
+      { checked: node.config.awaitAll === true }));
+  } else {
+    root.appendChild(head(doc, FLOW_TITLES[node.kind] || node.kind, node.id));
+    body.appendChild(h(doc, 'p', 'ins-blurb', FLOW_BLURB[node.kind] || ''));
+    if (ARITY_KINDS.has(node.kind)) {
+      // "Input count", not "Inputs": the read-only port listing below already
+      // carries an `Inputs` heading, and two of them in one 308px rail read as
+      // one control and its own list.
+      body.appendChild(number(doc, 'ins-arity', 'arity', 'Input count', Number.isInteger(node.config.arity) ? node.config.arity : 2, 2));
+    }
+    if (node.kind === 'or') {
+      const resolved = resolveOrOutType(template, portsFn, node.id, new Set());
+      body.appendChild(h(doc, 'div', 'ins-resolved', resolved ? `forwards: ${resolved}` : 'unresolved'));
+    }
+    if (node.kind === 'task') {
+      body.appendChild(toggle(doc, 'ins-seed', 'planStoreSeed', 'Seed the plan store', 'treat an attached plan as the run’s plan',
+        { checked: node.config.planStoreSeed === true }));
+    }
+    if (node.kind === 'end') body.appendChild(h(doc, 'div', 'ins-result', ''));
+  }
+  body.appendChild(h(doc, 'div', 'ins-sep'));
+  body.appendChild(portList(doc, ports));
+  root.appendChild(body);
+  return root;
+}
+
+/** Loop wires carry the per-wire cycle budget; a plain wire must NOT expose one
+ *  (maxCycles on a non-loop wire is V13's error). */
+export function renderWireInspector(wire, { loop = false, doc = globalThis.document } = {}) {
+  const root = h(doc, 'div', `ins-panel ins-wire${loop ? ' ins-loop' : ''}`);
+  root.dataset.wireId = wire.id;
+  root.appendChild(head(doc, loop ? 'Loop wire' : 'Wire', `${wire.from.node}.${wire.from.port} → ${wire.to.node}.${wire.to.port}`));
+  const body = h(doc, 'div', 'ins-body-in');
+  if (loop) {
+    body.appendChild(number(doc, 'ins-maxcycles', 'maxCycles', 'Max cycles',
+      wire.config && Number.isInteger(wire.config.maxCycles) ? wire.config.maxCycles : 3, 1));
+    body.appendChild(h(doc, 'small', 'ins-hint', 'How many times this loop may re-deliver before the gate asks.'));
+  } else {
+    body.appendChild(h(doc, 'p', 'ins-blurb', 'Plain data wire. Delete it to rewire the target input.'));
+  }
+  root.appendChild(body);
+  return root;
+}
+
+export function renderEmptyInspector({ doc = globalThis.document } = {}) {
+  const root = h(doc, 'div', 'ins-panel ins-empty');
+  root.appendChild(h(doc, 'p', 'ins-blurb', 'Select a node or a wire to configure it.'));
+  return root;
+}

package/ui/public/graph/model.mjs

@@ -0,0 +1,37 @@
+// ui/public/graph/model.mjs                                          (depth 3)
+// The browser's door to the ONE graph model. ui/public cannot import src/core,
+// but src/shared/** is pure ESM served at /src/shared, so these specifiers
+// resolve to the SAME module instance in Node, jsdom and Chrome alike: three
+// `..` because this file sits three levels below the repo root. Absolute
+// specifiers ('/src/shared/...') are FORBIDDEN — they break the Node ESM
+// resolver the UI tests use. NOTHING may be redefined here: this file is
+// re-exports only, and test/shared-graph-single-source.test.mjs asserts the
+// function IDENTITY against the shared modules.
+export {
+  flowPorts, portsFnFor, portsOf, findPort, typeCompatible, resolveOrOutType,
+  inboundWires, outboundWires, firedOutputs,
+} from '../../../src/shared/graph/ports.mjs';
+export { tarjanSccs, classifyLoops } from '../../../src/shared/graph/loops.mjs';
+export { RULES, validateGraph, formatIssue } from '../../../src/shared/graph/validate.mjs';
+export {
+  normalizeTemplate, serializeTemplate, newNode, newWire, mintId, canWire,
+  removeNode, removeWire, nodeById, wireById,
+} from '../../../src/shared/graph/template.mjs';
+export {
+  NODE_W, HEAD_H, ROW_H, SEP_H, PAD_T, PAD_B, BORDER, DOT, FOOT_H, EXEC_ROW_H, SNAP,
+  PORT_HIT_R, WIRE_HIT_TOL, ZOOM_MIN, ZOOM_MAX, ZOOM_K, ROW0, GEOMETRY_CSS_VARS,
+  injectGeometry, nodeSize, portAnchor, snap,
+  hitNode, hitPort, graphBounds, fitBounds,
+} from '../../../src/shared/graph/geometry.mjs';
+export {
+  routeWire, routeAll, separateRoutes, routePathD, routeMid, hitRoute,
+  ROUTE_CLEARANCE, ROUTE_STUB, ROUTE_RADIUS, ROUTE_LANE_GAP,
+} from '../../../src/shared/graph/route.mjs'; // depth 3: ui/public/graph -> repo root
+export { rankNodes, autoLayout } from '../../../src/shared/graph/layout.mjs';
+export { thumbnailSvg } from '../../../src/shared/graph/thumbnail.mjs';
+export { normalizeAgentMeta, validateMetaV2, indexByKey, derivePortSummary } from '../../../src/shared/graph/agent-meta.mjs';
+export { buildGraphManifest, manifestPortsFn, manifestTemplate, sanitizeIcon, UI_PHASE } from '../../../src/shared/graph/manifest.mjs';
+export {
+  TEMPLATE_VERSION, KINDS, FLOW_KINDS, PORT_TYPES, AWAIT_PORT, TASK_PORTS, END_PORTS,
+  gatePorts, DEFAULT_MAX_CYCLES, MAX_PORTS_PER_SIDE, LIMITS, NODE_ID_RE, WIRE_ID_RE, PORT_ID_RE,
+} from '../../../src/shared/graph/constants.mjs';

package/ui/public/graph/palette.mjs

@@ -0,0 +1,144 @@
+// ui/public/graph/palette.mjs
+// The rail's Agents tab: one DISCLOSURE per domain (plus the PINNED Flow group),
+// a filter, and agent pills stacked one per row. Pure DOM + one delegated
+// controller; it never touches the template — it calls back into the composer,
+// which owns every mutation.
+export const FLOW_GROUP = 'flow';
+/** Flow pills advertise their ports the way agent pills do (pill line 2). */
+export const FLOW_PORT_LINE = {
+  task: 'source · out task',
+  end: 'in result · terminal',
+  and: 'in in1..inN · out out',
+  or: 'in in1..inN · out out',
+  combine: 'in in1, in2 · out out',
+};
+export const FLOW_PILLS = Object.freeze([
+  Object.freeze({ kind: 'task', displayName: 'Task', description: 'The pipeline entry: the prompt and its attached files.' }),
+  Object.freeze({ kind: 'end', displayName: 'End', description: 'The pipeline sink. A token arriving here completes the run.' }),
+  Object.freeze({ kind: 'and', displayName: 'AND', description: 'Fires when ALL of its inputs are fresh. Payloads discarded — pure sequencing.' }),
+  Object.freeze({ kind: 'or', displayName: 'OR', description: 'Fires on ANY fresh input and forwards the freshest payload.' }),
+  Object.freeze({ kind: 'combine', displayName: 'Combine', description: 'Joins its md inputs into one document, in port order.' }),
+]);
+const SINGLETON_KINDS = new Set(['task', 'end']);
+
+/** Pill line 2: META port ids only. The synthesized `await` gate is never listed —
+ *  it is not part of the agent's declared contract and every agent has one. */
+export function portLineOf(entry) {
+  const ids = (ports) => (Array.isArray(ports) ? ports : []).filter((p) => p && !p.synthetic).map((p) => p.id);
+  const reads = ids(entry && entry.inputs);
+  const writes = ids(entry && entry.outputs);
+  return [reads.length ? `in ${reads.join(', ')}` : '', writes.length ? `out ${writes.join(', ')}` : ''].filter(Boolean).join(' · ');
+}
+
+/** Ordered groups: every non-shared, non-general domain in first-seen order,
+ *  then `general`, then the pinned Flow group. `shared` agents are folded into
+ *  every domain group; `placeable:false` agents are dropped everywhere (that is
+ *  how workspaceScanner never reaches a canvas). Empty groups are omitted. */
+export function paletteEntries(agents, { placedKinds = [] } = {}) {
+  const list = (Array.isArray(agents) ? agents : []).filter((a) => a && a.placeable !== false)
+    .map((a) => ({ ...a, order: typeof a.order === 'number' ? a.order : 99, domain: a.domain || 'general' }));
+  const shared = list.filter((a) => a.domain === 'shared');
+  const byOrder = (x, y) => x.order - y.order || String(x.key).localeCompare(String(y.key));
+  const domains = [];
+  for (const a of list) if (a.domain !== 'shared' && a.domain !== 'general' && !domains.includes(a.domain)) domains.push(a.domain);
+  domains.push('general');
+  const groups = domains
+    .map((domain) => ({ domain, flow: false, agents: [...shared, ...list.filter((a) => a.domain === domain)].sort(byOrder) }))
+    .filter((g) => g.agents.length);
+  const placed = new Set(placedKinds);
+  groups.push({
+    domain: FLOW_GROUP, flow: true,
+    agents: FLOW_PILLS.map((p) => ({ ...p, portLine: FLOW_PORT_LINE[p.kind] || '', disabled: SINGLETON_KINDS.has(p.kind) && placed.has(p.kind) })),
+  });
+  return groups;
+}
+
+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 pill(doc, entry) {
+  const btn = h(doc, 'button', 'ap');
+  btn.type = 'button';
+  if (entry.key) btn.dataset.key = entry.key; else btn.dataset.kind = entry.kind;
+  btn.disabled = Boolean(entry.disabled);
+  if (entry.disabled) btn.classList.add('dim');
+  const dot = h(doc, 'span', 'd');
+  dot.dataset.color = entry.kind ? 'flow' : (entry.color || 'blue');
+  const body = h(doc, 'span', 'b');
+  body.append(h(doc, 'span', 'n', entry.displayName || entry.key || entry.kind),
+    h(doc, 'span', 'p pt', entry.portLine != null ? entry.portLine : portLineOf(entry)));
+  btn.append(dot, body);
+  if (entry.disabled) btn.appendChild(h(doc, 'span', 'chip', '1 placed'));
+  if (entry.description) btn.title = entry.description;
+  return btn;
+}
+
+/** The disclosure caret. Turned by CSS off `aria-expanded`, so the header's
+ *  state can never disagree with the pills it hides. */
+function chevron(doc) {
+  const NS = 'http://www.w3.org/2000/svg';
+  const svg = doc.createElementNS(NS, 'svg');
+  for (const [k, v] of [['class', 'chev'], ['width', '13'], ['height', '13'], ['viewBox', '0 0 24 24'],
+    ['fill', 'none'], ['stroke', 'currentColor'], ['stroke-width', '2.6'], ['aria-hidden', 'true']]) svg.setAttribute(k, v);
+  const path = doc.createElementNS(NS, 'path');
+  path.setAttribute('d', 'M6 9l6 6 6-6');
+  path.setAttribute('stroke-linecap', 'round');
+  path.setAttribute('stroke-linejoin', 'round');
+  svg.appendChild(path);
+  return svg;
+}
+
+export function renderPalette(host, { agents = [], placedKinds = [], collapsed = new Set(), query = '', doc = globalThis.document } = {}) {
+  if (!host) return;
+  const groups = paletteEntries(agents, { placedKinds });
+  const frag = doc.createDocumentFragment();
+  for (const g of groups) {
+    const sec = h(doc, 'section', `pal-group${g.flow ? ' pal-pinned' : ''}`);
+    sec.dataset.domain = g.domain;
+    // The group HEAD is the control: there is no separate chip row, so a domain
+    // can only be reached — and only be folded away — through its own header.
+    const head = h(doc, 'button', 'pal-grp');
+    head.type = 'button';
+    head.dataset.domain = g.domain;
+    head.append(chevron(doc), h(doc, 'span', 'lab', g.flow ? 'Flow' : g.domain), h(doc, 'span', 'chip', String(g.agents.length)));
+    if (g.flow) head.appendChild(h(doc, 'span', 'chip pinned-tag', 'pinned'));
+    const pills = h(doc, 'div', 'pills');
+    for (const a of g.agents) pills.appendChild(pill(doc, a));
+    sec.append(head, pills);
+    frag.appendChild(sec);
+  }
+  // host IS the scroll container: replaceChildren collapses scrollHeight, which
+  // clamps scrollTop to 0 and would bounce the list to the top after every
+  // spawn, throwing the pinned Flow group out of reach.
+  const keep = host.scrollTop;
+  host.replaceChildren(frag);
+  if (keep) host.scrollTop = keep;
+  applyFilter(host, query, collapsed);
+}
+
+/** Hides non-matching pills, then settles each group's disclosure. A LIVE QUERY
+ *  force-expands every matching group: a hit folded away inside a collapsed
+ *  header reads as a broken filter. Clearing the query restores the collapse. */
+export function applyFilter(host, query, collapsed = new Set()) {
+  if (!host) return;
+  const q = String(query || '').trim().toLowerCase();
+  for (const sec of host.querySelectorAll('.pal-group')) {
+    let any = false;
+    for (const btn of sec.querySelectorAll('.ap')) {
+      const hay = `${btn.querySelector('.n').textContent} ${btn.dataset.key || btn.dataset.kind || ''} ${btn.querySelector('.p').textContent}`.toLowerCase();
+      const show = !q || hay.includes(q);
+      btn.hidden = !show;
+      if (show) any = true;
+    }
+    const open = Boolean(q) || !collapsed.has(sec.dataset.domain);
+    sec.hidden = !any;
+    const head = sec.querySelector('.pal-grp');
+    if (head) head.setAttribute('aria-expanded', open ? 'true' : 'false');
+    const pills = sec.querySelector('.pills');
+    if (pills) pills.hidden = !open;
+  }
+}