@worca/app 1.3.0 → 1.4.0

package/ui/public/graph/inspector.mjs

@@ -5,6 +5,12 @@
 // 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';
+import { DEFAULT_TIMEOUT_MS, MAX_TIMEOUT_MS, wirableParams, hasParamsPort } from '../../../src/shared/graph/script-meta.mjs';
+// The DOM primitives and the two script forms live in ../script-forms.mjs so the
+// composer, the Scripts page's Overview tab and the Test tab share ONE copy (C3).
+import {
+  h, field, select, toggle, number, renderParamsForm, renderPortEditor,
+} from '../script-forms.mjs';
 
 const ARITY_KINDS = new Set(['and', 'or', 'combine']);
 const FLOW_TITLES = { task: 'Task', end: 'End', and: 'AND', or: 'OR', combine: 'Combine' };
@@ -16,51 +22,12 @@ const FLOW_BLURB = {
   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);
-  }
-  const shell = h(doc, 'span', 'ins-select-wrap');   // the product's .select-wrap idea: the chevron is a token-coloured ::after on a wrapper
-  shell.appendChild(sel);
-  wrap.appendChild(shell);
-  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');
@@ -73,7 +40,7 @@ function portList(doc, ports) {
       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');
+      if (p.synthetic || p.engine) 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');
@@ -86,10 +53,9 @@ function portList(doc, ports) {
   zone('Outputs', ports.outputs, 'out');
   return wrap;
 }
-
-export function renderNodeInspector(node, { template, portsFn, meta = null, models = [], efforts = [], subagentModels = [], doc = globalThis.document } = {}) {
+export function renderNodeInspector(node, { template, portsFn, meta = null, models = [], efforts = [], subagentModels = [], editorFor = null, 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}`}`);
+  const root = h(doc, 'div', `ins-panel ins-${node.kind === 'agent' ? 'agent' : node.kind === 'script' ? 'script' : `flow ins-${node.kind}`}`);
   root.dataset.nodeId = node.id;
   const body = h(doc, 'div', 'ins-body-in');
 
@@ -103,8 +69,8 @@ export function renderNodeInspector(node, { template, portsFn, meta = null, mode
     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 }));
+      body.appendChild(lv(toggle(doc, 'ins-fanout', 'fanOut', 'Research fan-out', 'parallel research sub-agents',
+        { checked: node.config.fanOut === true }), 'expert', 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
@@ -117,7 +83,7 @@ export function renderNodeInspector(node, { template, portsFn, meta = null, mode
       // 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
+      body.appendChild(lv(chosen && chosen.routed
         ? select(doc, 'ins-subagent', 'subagentModel', 'Sub-agent model',
           [{ value: node.config.subagentModel || '', text: 'same endpoint (locked)' }],
           node.config.subagentModel || '',
@@ -125,19 +91,44 @@ export function renderNodeInspector(node, { template, portsFn, meta = null, mode
         : 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));
+          node.config.subagentModel), 'expert', !!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', {
+      body.appendChild(lv(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') : '',
-      }));
+      }), 'expert', !locked && typeof saved === 'boolean'));
+    }
+    body.appendChild(lv(toggle(doc, 'ins-awaitall', 'awaitAll', 'Await all inputs', 'gate until every wire fires',
+      { checked: node.config.awaitAll === true }), 'expert', node.config.awaitAll === true));
+  } else if (node.kind === 'script') {
+    root.appendChild(head(doc, (meta && meta.displayName) || node.key || node.id, `${node.key} · ${node.id}`));
+    const chips = h(doc, 'div', 'ins-chiprow');
+    chips.append(h(doc, 'span', 'badge', (meta && meta.origin) || 'builtin'), h(doc, 'span', 'chip rt', (meta && meta.runtime) || 'script'));
+    body.appendChild(chips);
+    body.appendChild(renderParamsForm(meta, node.config, { doc, editorFor }));
+    const ms = Number.isInteger(node.config.timeoutMs) ? node.config.timeoutMs : ((meta && meta.timeoutMs) || DEFAULT_TIMEOUT_MS);
+    // Interface mode (docs/ui-levels.md): what the card RUNS is never hidden; per-node tuning and ports are expert.
+    const timeout = number(doc, 'ins-timeout', 'timeoutMs', 'Timeout (s)', Math.round(ms / 1000), 1);
+    timeout.querySelector('input').max = String(MAX_TIMEOUT_MS / 1000);
+    body.appendChild(lv(timeout, 'expert', Number.isInteger(node.config.timeoutMs)));
+    body.appendChild(lv(toggle(doc, 'ins-awaitall', 'awaitAll', 'Await all inputs', 'gate until every wire fires',
+      { checked: node.config.awaitAll === true }), 'expert', node.config.awaitAll === true));
+    // Offered only where ticking it takes effect: `meta` here is the registry entry, so the forced-on probe is honest.
+    // A ticked box always renders, so an opt-in V22 refuses (the script changed under the card) can still be un-ticked.
+    if (node.config.paramsPort === true || hasParamsPort(meta, { ...node.config, paramsPort: true })) {
+      body.appendChild(lv(toggle(doc, 'ins-paramsport', 'paramsPort', 'Params from a wire', `json sets: ${wirableParams(meta).map((p) => p.id).join(', ') || 'nothing'}`,
+        { checked: node.config.paramsPort === true }), 'expert', node.config.paramsPort === true));
     }
-    body.appendChild(toggle(doc, 'ins-awaitall', 'awaitAll', 'Await all inputs', 'gate until every wire fires',
-      { checked: node.config.awaitAll === true }));
+    body.appendChild(lv(h(doc, 'div', 'ins-sep'), 'expert'));
+    body.appendChild(lv(meta && meta.ports === 'config'
+      ? renderPortEditor(node.config.ports, { doc, hasVerdict: Boolean(meta && meta.verdict) })
+      : portList(doc, ports), 'expert'));
+    root.appendChild(body);
+    return root;
   } else {
     root.appendChild(head(doc, FLOW_TITLES[node.kind] || node.kind, node.id));
     body.appendChild(h(doc, 'p', 'ins-blurb', FLOW_BLURB[node.kind] || ''));
@@ -152,28 +143,40 @@ export function renderNodeInspector(node, { template, portsFn, meta = null, mode
       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 }));
+      body.appendChild(lv(toggle(doc, 'ins-seed', 'planStoreSeed', 'Seed the plan store', 'treat an attached plan as the run’s plan',
+        { checked: node.config.planStoreSeed === true }), 'expert', 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));
+  body.appendChild(lv(h(doc, 'div', 'ins-sep'), 'expert'));
+  body.appendChild(lv(portList(doc, ports), 'expert'));
   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). */
+/** Interface mode (docs/ui-levels.md): model and effort are the advanced inspector; everything else
+ *  here is expert. `keep` = the control holds a non-default value, so it stays on screen. */
+function lv(el, min, keep = false) {
+  el.dataset.minLevel = min;
+  if (keep) el.dataset.levelKeep = '1';
+  return el;
+}
+
 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.'));
+    const budgeted = !!(wire.config && Number.isInteger(wire.config.maxCycles));
+    body.appendChild(lv(number(doc, 'ins-maxcycles', 'maxCycles', 'Max cycles',
+      budgeted ? wire.config.maxCycles : 3, 1), 'expert', budgeted));
+    body.appendChild(lv(h(doc, 'small', 'ins-hint', 'How many times this loop may re-deliver before the gate asks.'), 'expert', budgeted));
+    const plain = h(doc, 'p', 'ins-blurb ins-loop-plain', 'A loop: work flows back here until it passes, up to a cycle limit. Expert mode sets the limit.');
+    plain.dataset.maxLevel = 'advanced';
+    body.appendChild(plain);
   } else {
     body.appendChild(h(doc, 'p', 'ins-blurb', 'Plain data wire. Delete it to rewire the target input.'));
   }

package/ui/public/graph/palette.mjs

@@ -1,9 +1,11 @@
 // ui/public/graph/palette.mjs
-// The rail's Agents tab: one DISCLOSURE per domain (plus the PINNED Flow group),
+// The rail's Agents tab: one DISCLOSURE per domain (plus the Scripts group and 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';
+/** The Scripts group (D4): its own disclosure between the domain groups and the pinned Flow group. */
+export const SCRIPTS_GROUP = 'scripts';
 /** Flow pills advertise their ports the way agent pills do (pill line 2). */
 export const FLOW_PORT_LINE = {
   task: 'source · out task',
@@ -34,7 +36,7 @@ export function portLineOf(entry) {
  *  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 = [] } = {}) {
+export function paletteEntries(agents, { scripts = [], 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');
@@ -45,6 +47,13 @@ export function paletteEntries(agents, { placedKinds = [] } = {}) {
   const groups = domains
     .map((domain) => ({ domain, flow: false, agents: [...shared, ...list.filter((a) => a.domain === domain)].sort(byOrder) }))
     .filter((g) => g.agents.length);
+  // Scripts: one group, ordered by `order`, placeable only; a config-ported
+  // script advertises "in/out (per card)" because its ports live on the card.
+  const scriptList = (Array.isArray(scripts) ? scripts : []).filter((s) => s && s.placeable !== false)
+    .map((s) => ({ ...s, kind: 'script', order: typeof s.order === 'number' ? s.order : 99 }))
+    .sort(byOrder)
+    .map((s) => ({ ...s, chip: s.runtime || '', portLine: s.ports === 'config' ? 'in/out (per card)' : portLineOf(s) }));
+  if (scriptList.length) groups.push({ domain: SCRIPTS_GROUP, scripts: true, flow: false, agents: scriptList });
   const placed = new Set(placedKinds);
   groups.push({
     domain: FLOW_GROUP, flow: true,
@@ -63,17 +72,24 @@ function h(doc, tag, cls, text) {
 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;
+  const script = entry.kind === 'script';
+  if (entry.key) { btn.dataset.key = entry.key; if (script) { btn.dataset.kind = 'script'; btn.dataset.rt = entry.chip || ''; } }
+  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');
+  dot.dataset.color = entry.kind && !script ? 'flow' : (entry.color || 'blue');
   const body = h(doc, 'span', 'b');
-  body.append(h(doc, 'span', 'n', entry.displayName || entry.key || entry.kind),
+  const nrow = h(doc, 'span', 'nrow');
+  nrow.appendChild(h(doc, 'span', 'n', entry.displayName || entry.key || entry.kind));
+  if (script && entry.chip) nrow.appendChild(h(doc, 'span', 'chip rt', entry.chip));
+  body.append(nrow,
     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;
+  // Logic nodes are expert building blocks (docs/ui-levels.md); Task and End stay with everyone.
+  if (entry.kind && !SINGLETON_KINDS.has(entry.kind)) btn.dataset.minLevel = 'expert';
   return btn;
 }
 
@@ -92,19 +108,21 @@ function chevron(doc) {
   return svg;
 }
 
-export function renderPalette(host, { agents = [], placedKinds = [], collapsed = new Set(), query = '', doc = globalThis.document } = {}) {
+export function renderPalette(host, { agents = [], scripts = [], placedKinds = [], collapsed = new Set(), query = '', doc = globalThis.document } = {}) {
   if (!host) return;
-  const groups = paletteEntries(agents, { placedKinds });
+  const groups = paletteEntries(agents, { scripts, 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;
+    // Placing a card that runs a command is authoring: expert (docs/ui-levels.md).
+    if (g.scripts) sec.dataset.minLevel = 'expert';
     // 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)));
+    head.append(chevron(doc), h(doc, 'span', 'lab', g.flow ? 'Flow' : g.scripts ? 'Scripts' : 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));
@@ -129,7 +147,7 @@ export function applyFilter(host, query, collapsed = new Set()) {
   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 hay = `${btn.querySelector('.n').textContent} ${btn.dataset.key || btn.dataset.kind || ''} ${btn.dataset.rt || ''} ${btn.querySelector('.p').textContent}`.toLowerCase();
       const show = !q || hay.includes(q);
       btn.hidden = !show;
       if (show) any = true;

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

@@ -7,8 +7,9 @@
 // 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 { levelAtLeast } from '../ui-level.mjs';
 import { manifestPortsFn, manifestTemplate } from '../../../src/shared/graph/manifest.mjs';
-import { BOOKEND_EXECUTION_IDS, DEFAULT_MAX_CYCLES } from '../../../src/shared/graph/constants.mjs';
+import { BOOKEND_EXECUTION_IDS, DEFAULT_MAX_CYCLES, KEYED_KINDS } 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. */
@@ -69,7 +70,9 @@ export function manifestWires(stepper) {
 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 || '' };
+    if (KEYED_KINDS.includes(n.kind) && n.key && !out[n.key]) {
+      out[n.key] = { displayName: n.label || n.key, color: n.color || '', icon: n.icon || '', ...(n.kind === 'script' ? { runtime: n.runtime || '' } : {}) };
+    }
   }
   return out;
 }
@@ -153,7 +156,7 @@ export function statusOf(node, rows, ctx) {
  * @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 } = {}) {
+export function decorFromState(st, { live = true, now = Date.now(), subsOf = null, lastLines = null } = {}) {
   const state = st || {};
   const stepper = state.stepper || null;
   const nodes = manifestNodes(stepper);
@@ -186,9 +189,9 @@ export function decorFromState(st, { live = true, now = Date.now(), subsOf = nul
     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 };
+  // Progress = done KEYED nodes / keyed nodes (D15: a number, never a bar). A script is a keyed card.
+  const keyed = nodes.filter((n) => KEYED_KINDS.includes(n.kind));
+  const progress = { done: keyed.filter((n) => status[n.id] === 'done').length, total: keyed.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").
@@ -226,7 +229,7 @@ export function decorFromState(st, { live = true, now = Date.now(), subsOf = nul
     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 });
+  decorateExecutions(decor, { stepper, nodes, wires, grouped, rows, activeList, rowFor, stepByExec, state, now, live, subsOf, lastLines, status });
   return decor;
 }
 
@@ -289,26 +292,29 @@ export function execBandLayout(label, right) {
 }
 
 function decorateExecutions(decor, ctx) {
-  const { nodes, wires, grouped, activeList, rowFor, state, now, live, subsOf } = ctx;
+  const { nodes, wires, grouped, activeList, rowFor, state, now, live, subsOf, lastLines, status } = 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 flow = !KEYED_KINDS.includes(node.kind);
+    // A SCRIPT runs a child process: real duration, no cost pill — an exit code where an agent shows cost (S5).
+    const script = node.kind === 'script';
     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);
+      const costUsd = flow || script ? 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),
+        cost: flow || script ? '' : fmtUsd(costUsd),
+        exit: script && row.exitCode != null ? `exit ${row.exitCode}` : '',
         durMs, costUsd, flow,
       };
     });
@@ -321,11 +327,17 @@ function decorateExecutions(decor, ctx) {
     if (rows.length || fan) {
       decor.footers[node.id] = { rows, summary: stripText(rows), leds: rows.map((r) => r.led), fan };
     }
+    // S4: the last captured line of a RUNNING script, when the page has one.
+    const liveLine = script && live && status[node.id] === 'active' && lastLines && typeof lastLines.get === 'function' ? lastLines.get(node.id) : null;
+    if (liveLine) {
+      if (!decor.footers[node.id]) decor.footers[node.id] = { rows: [], summary: '', leds: [], fan: null };
+      decor.footers[node.id].live = String(liveLine);
+    }
     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),
+        durMs, dur: fmtDur(durMs), costUsd, cost: script ? '' : fmtUsd(costUsd),
         hasStep: rows.some((r) => r.dur !== ''),
       };
     }
@@ -376,16 +388,20 @@ function decorateExecutions(decor, ctx) {
  */
 export function applyDecor(view, decor) {
   if (!view || !decor) return;
-  const expanded = decor.expanded || null;
+  // Interface mode (docs/ui-levels.md): status colours, the gate pip, the End result and live wires
+  // are for everyone; per-node totals, the fan and execution strips and loop-count badges are
+  // expert detail. Gated HERE, not in CSS — a footer band sets the card's height.
+  const full = decor.detail !== undefined ? !!decor.detail : levelAtLeast('expert');
+  const expanded = full ? (decor.expanded || null) : 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,
+      totals: full ? (decor.totals[nodeId] || null) : null,
     });
-    const foot = decor.footers[nodeId] || null;
+    const foot = full ? (decor.footers[nodeId] || null) : 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) });
@@ -394,17 +410,18 @@ export function applyDecor(view, decor) {
       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(' · ');
+          const right = [r.dur, r.cost || r.exit].filter(Boolean).join(' · ');
           bands.push({ kind: 'exec', executionId: r.executionId, led: r.led, label: r.label,
             right, ...execBandLayout(r.label, right) });
         }
       }
     }
+    if (foot && foot.live) bands.push({ kind: 'live', text: foot.live });
     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);
+  for (const wireId of decor.wireIds || []) view.setWireBadge(wireId, full ? (decor.loopBadges[wireId] || null) : null);
   view.setWireLive(decor.liveWireIds || []);
 }

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

@@ -134,6 +134,7 @@ export function mountRunGraph(hostEl, opts = {}) {
   }
   function buildNav() {
     nav = doc.createElement('div');
+    nav.dataset.minLevel = 'advanced';            // zoom cluster: interface mode (docs/ui-levels.md)
     nav.className = 'gv-nav';
     for (const [key, label, glyph] of NAV_BTNS) {
       const b = doc.createElement('button');
@@ -214,6 +215,7 @@ export function mountRunGraph(hostEl, opts = {}) {
     if (!isStatic) {
       const hint = doc.createElement('div');
       hint.className = 'rg-hint';
+      hint.dataset.minLevel = 'advanced';
       hint.textContent = HINT_TEXT;
       wrap.appendChild(hint);
       buildNav();
@@ -258,5 +260,9 @@ export function mountRunGraph(hostEl, opts = {}) {
     bound = false;
   }
 
-  return { update, fit, destroy, get view() { return view; } };
+  /** Re-run the decor pass with the bag already held (an interface-mode change alters which
+   *  footer bands show, hence the card heights, hence the fit). */
+  function repaint() { paint(); refit(); }
+
+  return { update, fit, repaint, destroy, get view() { return view; } };
 }

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

@@ -22,6 +22,9 @@ export function renderSaveDialog({ name = '', domain = '', domains = [], title =
   form.appendChild(nameWrap);
 
   const domWrap = h(doc, 'div', 'sd-field');
+  // Grouping by domain is expert housekeeping (docs/ui-levels.md); a non-default one stays visible.
+  domWrap.dataset.minLevel = 'expert';
+  if (domain && domain !== 'general') domWrap.dataset.levelKeep = '1';
   domWrap.appendChild(h(doc, 'label', null, 'Domain'));
   const domInput = doc.createElement('input');
   domInput.type = 'text'; domInput.className = 'sd-domain'; domInput.value = domain;

package/ui/public/graph/view.mjs

@@ -26,6 +26,7 @@ import { portsOf, resolveOrOutType } from '../../../src/shared/graph/ports.mjs';
 import { classifyLoops } from '../../../src/shared/graph/loops.mjs';
 import { thumbnailSvg } from '../../../src/shared/graph/thumbnail.mjs';
 import { sanitizeIcon } from '../../../src/shared/graph/manifest.mjs';
+import { KEYED_KINDS } from '../../../src/shared/graph/constants.mjs';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
@@ -77,6 +78,10 @@ export function safeAgentIcon(meta) {
   return sanitizeIcon(raw) || USER_AGENT_ICON;
 }
 
+// The ƒ glyph lives with the icon set (one source for the page's tile and this canvas).
+import { SCRIPT_GLYPH } from '../../../src/shared/graph/script-icons.mjs';
+export { SCRIPT_GLYPH };
+
 const dotClass = (t) => `dot ${t === 'md' || t === 'json' || t === 'void' || t === 'any' ? t : 'md'}`;
 const whenCaption = (w) => (w === 'blocking' ? 'on blocking' : w === 'clean' ? 'on clean' : '');
 
@@ -199,17 +204,19 @@ export function createGraphView(host, {
   }
 
   function headerOf(node) {
-    if (node.kind === 'agent') {
-      const meta = agents[node.key] || null;
+    if (KEYED_KINDS.includes(node.kind)) {
+      const meta = agents[node.key] || null;                // the MERGED key -> meta index (agents + scripts)
+      const script = node.kind === 'script';
       return {
-        cls: `h-${(meta && meta.color) || 'blue'}`,
+        cls: `h-${(meta && meta.color) || (script ? 'amber' : 'blue')}`,
         title: (meta && meta.displayName) || node.key || node.id,
-        icon: safeAgentIcon(meta),
+        icon: safeAgentIcon(meta) || (script ? SCRIPT_GLYPH : ''),
         viewBox: AGENT_VIEWBOX,
+        chip: script ? ((meta && meta.runtime) || 'script') : '',
       };
     }
     const flow = FLOW_META[node.kind] || { title: node.kind, icon: '' };
-    return { cls: 'h-flow', title: flow.title, icon: flow.icon, viewBox: FLOW_VIEWBOX };
+    return { cls: 'h-flow', title: flow.title, icon: flow.icon, viewBox: FLOW_VIEWBOX, chip: '' };
   }
 
   function portRow(port, dir, resolvedType) {
@@ -310,6 +317,12 @@ export function createGraphView(host, {
       row.append(h('i', 'led'), h('span', 'xl', band.label || ''), h('span', 'xr', band.right || ''));
       return row;
     }
+    if (band.kind === 'live') {
+      const l = h('div', 'xlive mono');
+      l.textContent = band.text || '';
+      l.title = band.text || '';
+      return l;
+    }
     const res = h('div', 'xresult');           // kind: 'result'
     if (!band.path) { res.textContent = band.text || ''; return res; }
     const a = h('a', null, band.text || '');
@@ -363,6 +376,7 @@ export function createGraphView(host, {
       if (sum && sum.textContent !== t) sum.textContent = t;
       return true;
     }
+    if (band.kind === 'live') { if (el.textContent !== band.text) { el.textContent = band.text || ''; el.title = band.text || ''; } return true; }
     if (band.kind === 'exec') {
       const cls = execRowClass(band);
       if (el.className !== cls) el.className = cls;
@@ -427,7 +441,7 @@ export function createGraphView(host, {
     el.style.height = `${box.h}px`;
     const head = el.querySelector(':scope > .nhead');
     const hd = headerOf(node);
-    const sig = `${hd.cls}|${hd.title}|${hd.icon}`;
+    const sig = `${hd.cls}|${hd.title}|${hd.icon}|${hd.chip}`;
     if (head.dataset.sig !== sig) {
       head.dataset.sig = sig;
       head.className = `nhead ${hd.cls}`;
@@ -438,7 +452,9 @@ export function createGraphView(host, {
       icon.innerHTML = hd.icon;
       const tt = h('span', 'tt', hd.title);
       tt.title = hd.title;                          // A35: an ellipsised name keeps its tooltip
-      head.replaceChildren(icon, tt);
+      const kids = [icon, tt];
+      if (hd.chip) kids.push(h('span', 'chip rt', hd.chip));
+      head.replaceChildren(...kids);
     }
     paintBand(el, node);
     paintBody(el, node, p, orType, awaitWired);

package/ui/public/guardrails-view.mjs

@@ -23,9 +23,20 @@ export function guardrailSummary(s) {
 function originBadge(doc, origin) {
   if (origin === 'builtin') return h(doc, 'span', 'badge waiting grv-origin', 'built-in');
   if (typeof origin === 'string' && origin.startsWith('plugin:')) return h(doc, 'span', 'badge violet grv-origin', origin);
+  // Team policy sets (gp:<id>): blue, like every policy origin; the title names the home.
+  if (typeof origin === 'string' && origin.startsWith('policy:')) {
+    const b = h(doc, 'span', 'badge blue grv-origin', 'policy');
+    b.title = `Shipped by the team policy on ${origin.slice(7)} — edit it on the Team policy page`;
+    return b;
+  }
   return h(doc, 'span', 'badge green grv-origin', 'user');
 }
 
+/** Built-ins and team-policy sets are read-only here: View, Save as new set, never Delete. */
+export function isReadOnlyGuardrailSet(s) {
+  return !!s && (s.origin === 'builtin' || (typeof s.origin === 'string' && s.origin.startsWith('policy:')));
+}
+
 // renderGuardrailList(sets) -> <div.grv-list> of cards; built-ins get View + no Delete.
 export function renderGuardrailList(sets, { doc = globalThis.document } = {}) {
   const root = h(doc, 'div', 'grv-list');
@@ -39,8 +50,9 @@ export function renderGuardrailList(sets, { doc = globalThis.document } = {}) {
     body.appendChild(head);
     body.appendChild(h(doc, 'small', 'grv-summary hint', guardrailSummary(s.settings)));
     card.appendChild(body);
-    if (s.origin !== 'builtin') {
+    if (!isReadOnlyGuardrailSet(s)) {
       const del = h(doc, 'button', 'btn-ghost grv-delete', 'Delete');
+      del.dataset.minLevel = 'expert';                    // authoring sets is expert (docs/ui-levels.md)
       del.type = 'button';
       del.dataset.id = s.id;
       card.appendChild(del);
@@ -52,7 +64,7 @@ export function renderGuardrailList(sets, { doc = globalThis.document } = {}) {
     const open = h(doc, 'button', 'btn-ghost grv-edit grv-details', 'Details');
     open.type = 'button';
     open.dataset.id = s.id;
-    open.title = s.origin === 'builtin' ? 'View' : 'Edit';
+    open.title = isReadOnlyGuardrailSet(s) ? 'View' : 'Edit';
     card.appendChild(open);
     root.appendChild(card);
   }
@@ -172,7 +184,7 @@ export function renderGuardrailEditor(set, { doc = globalThis.document, mode = '
   }
   if (readOnly) {
     head.appendChild(h(doc, 'b', 'grv-name', set.name));
-    head.appendChild(h(doc, 'span', 'badge waiting grv-origin', 'built-in'));
+    head.appendChild(originBadge(doc, set.origin || 'builtin'));
   } else {
     const name = h(doc, 'input', 'input grv-name-input');
     name.type = 'text';