@worca/app 1.3.0 → 1.4.0-rc.1

package/ui/public/chat-settings-view.mjs

@@ -91,3 +91,27 @@ export function collectChatSettings(root) {
   }
   return { notify, channels };
 }
+
+/**
+ * The Settings → Ask Worca "Create and run scripts" row (scripts-workbench W20). Lives here
+ * with the other chat-pref controls because the value is one of `chatPrefs()`; it is mounted
+ * in the Ask Worca card, not in Chat notifications, and saves with that card's Save button.
+ * Default ON: only a stored `false` switches the chat's save_script / test_script off.
+ */
+export function renderScriptToolsToggle({ prefs } = {}, { doc = globalThis.document } = {}) {
+  const row = h(doc, 'label', 'check-row');
+  row.setAttribute('for', 'askScriptTools');
+  const cb = h(doc, 'input', 'ask-script-tools');
+  cb.type = 'checkbox';
+  cb.id = 'askScriptTools';
+  cb.checked = prefs?.scriptTools !== false;
+  row.appendChild(cb);
+  row.appendChild(doc.createTextNode(' Create and run scripts'));
+  return row;
+}
+
+/** collectScriptToolsToggle(root) -> the POST /api/settings {chat} patch of the Ask Worca card. */
+export function collectScriptToolsToggle(root) {
+  const cb = root && typeof root.querySelector === 'function' ? root.querySelector('input.ask-script-tools') : null;
+  return { scriptTools: cb ? cb.checked : true };
+}

package/ui/public/code-editor.mjs

@@ -0,0 +1,181 @@
+// ui/public/code-editor.mjs
+// The app's one code editor (scripts-workbench design §W16): a transparent
+// <textarea> laid over a highlighted <pre><code>. The browser keeps the caret,
+// IME and selection of a plain textarea — and its undo ring for TYPED text (a Tab
+// indent assigns `.value`, which resets that ring: the price of no dependency);
+// the colours are painted underneath. No contenteditable, no dependency, no build step.
+//
+// The highlighter is INJECTED (C11): app.js passes one built on the vendored
+// hljs loader, tests pass an escaping stub, and the DEFAULT escapes HTML — so a
+// script's own source can never reach innerHTML unescaped. That injected
+// function is the ONLY thing in this module allowed near innerHTML.
+//
+// The textarea keeps the caller's `name` as data-field, so an editor dropped
+// into the composer's inspector routes through the same delegated change
+// listener a plain textarea did (P1b Task 6).
+
+const ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+
+/** Escape the five HTML metacharacters. Pure; the default highlighter. */
+export function escapeHtml(s) {
+  return String(s ?? '').replace(/[&<>"']/g, (c) => ESCAPES[c]);
+}
+
+// Trailing-edge: a burst of keystrokes costs ONE highlight pass. 60 ms is below
+// the threshold where a repaint reads as lag and well above a fast typist's
+// inter-key gap.
+export const HIGHLIGHT_DEBOUNCE_MS = 60;
+// Two spaces, matching the repo's own indentation; a literal tab would render at
+// the browser's default width and fight the highlighted layer's alignment.
+export const TAB_SPACES = '  ';
+
+/**
+ * @param {object} opts
+ * @param {Document} [opts.doc]
+ * @param {string}   [opts.value]      initial text
+ * @param {string}   [opts.language]   hljs language id, mirrored on data-language
+ * @param {boolean}  [opts.readOnly]
+ * @param {number}   [opts.rows]
+ * @param {string}   [opts.name]       data-field on the textarea ('' = none)
+ * @param {?function} [opts.onInput]   called with the new text on every keystroke
+ * @param {function} [opts.highlight]  (text, language) -> Promise<string html>
+ * @returns {{el:HTMLElement, getValue:()=>string, setValue:(v:string)=>void,
+ *            setLanguage:(l:string)=>void, setReadOnly:(b:boolean)=>void,
+ *            focus:()=>void, destroy:()=>void}}
+ */
+export function createCodeEditor({
+  doc = globalThis.document, value = '', language = 'javascript', readOnly = false,
+  rows = 18, name = '', onInput = null, highlight = async (text) => escapeHtml(text),
+} = {}) {
+  const win = doc.defaultView || globalThis;
+  let lang = String(language || '');
+  let seq = 0;            // paint token: only the newest result may be applied
+  let timer = null;
+  let dead = false;
+
+  const el = doc.createElement('div');
+  el.className = `code-editor${readOnly ? ' ro' : ''}`;
+  el.dataset.language = lang;
+
+  const pre = doc.createElement('pre');
+  pre.className = 'code-editor-hl';
+  pre.setAttribute('aria-hidden', 'true');   // the textarea is the accessible control
+  const code = doc.createElement('code');
+  pre.appendChild(code);
+
+  const ta = doc.createElement('textarea');
+  ta.className = 'code-editor-ta mono';
+  ta.spellcheck = false;
+  ta.rows = rows;
+  ta.readOnly = Boolean(readOnly);
+  ta.value = String(value ?? '');
+  if (name) ta.dataset.field = name;
+  el.append(pre, ta);
+
+  /** The one innerHTML write. `html` comes from the injected highlighter (or the
+   *  escaping default); anything that is not a string falls back to escaped text.
+   *  The extra '\n' keeps the last row visible — <pre> swallows one trailing
+   *  newline, which would otherwise scroll the layers out of step. */
+  function apply(html, text) {
+    code.innerHTML = (typeof html === 'string' ? html : escapeHtml(text)) + '\n';
+  }
+
+  async function paint() {
+    const my = ++seq;
+    const text = ta.value;
+    const at = lang;
+    let html = null;
+    try { html = await highlight(text, at); } catch { html = null; }
+    if (dead || my !== seq) return;            // destroyed, or a newer paint won
+    apply(html, text);
+  }
+
+  function schedule() {
+    if (timer != null) win.clearTimeout(timer);
+    timer = win.setTimeout(() => { timer = null; void paint(); }, HIGHLIGHT_DEBOUNCE_MS);
+  }
+
+  function onInputEvent() {
+    if (typeof onInput === 'function') onInput(ta.value);
+    schedule();
+  }
+
+  function onScroll() {
+    pre.scrollTop = ta.scrollTop;
+    pre.scrollLeft = ta.scrollLeft;
+  }
+
+  // Escape arms the NEXT Tab to move focus instead of indenting. The textarea is
+  // the accessible control here (the <pre> is aria-hidden), and an indent handler
+  // that swallows every Tab and Shift+Tab would make it a keyboard trap — no
+  // keyboard user could ever leave it. Escape-then-Tab is the editor convention.
+  let tabOut = false;
+  /** Leaving the field cancels a pending Escape: coming back and pressing Tab must
+   *  indent again, the way it does on a field nobody armed. */
+  function onBlur() { tabOut = false; }
+
+  /** Tab / Shift+Tab. A caret with no multi-line selection inserts two spaces;
+   *  anything spanning a newline (and every Shift+Tab) re-indents whole lines,
+   *  which is what an editor user expects from a code field. Read-only lets Tab
+   *  through so focus still moves on. */
+  function onKeyDown(ev) {
+    if (ev.key === 'Escape') { tabOut = true; return; }
+    const armed = tabOut;
+    tabOut = false;
+    if (ev.key !== 'Tab' || ev.ctrlKey || ev.metaKey || ev.altKey || ta.readOnly || armed) return;
+    const v = ta.value;
+    const start = ta.selectionStart;
+    const end = ta.selectionEnd;
+    ev.preventDefault();
+    if (!ev.shiftKey && !v.slice(start, end).includes('\n')) {
+      ta.value = v.slice(0, start) + TAB_SPACES + v.slice(end);
+      ta.selectionStart = start + TAB_SPACES.length;
+      ta.selectionEnd = ta.selectionStart;
+      ta.dispatchEvent(new win.Event('input', { bubbles: true }));
+      return;
+    }
+    const lineStart = v.lastIndexOf('\n', start - 1) + 1;
+    const nl = v.indexOf('\n', end);
+    const blockEnd = nl === -1 ? v.length : nl;
+    let first = 0;
+    let total = 0;
+    const lines = v.slice(lineStart, blockEnd).split('\n').map((line, i) => {
+      if (ev.shiftKey) {
+        const cut = line.startsWith(TAB_SPACES) ? TAB_SPACES.length : (line.startsWith(' ') ? 1 : 0);
+        if (i === 0) first = -cut;
+        total -= cut;
+        return line.slice(cut);
+      }
+      if (i === 0) first = TAB_SPACES.length;
+      total += TAB_SPACES.length;
+      return TAB_SPACES + line;
+    });
+    ta.value = v.slice(0, lineStart) + lines.join('\n') + v.slice(blockEnd);
+    ta.selectionStart = Math.max(lineStart, start + first);
+    ta.selectionEnd = Math.max(ta.selectionStart, end + total);
+    ta.dispatchEvent(new win.Event('input', { bubbles: true }));
+  }
+
+  ta.addEventListener('input', onInputEvent);
+  ta.addEventListener('scroll', onScroll);
+  ta.addEventListener('keydown', onKeyDown);
+  ta.addEventListener('blur', onBlur);
+  void paint();
+
+  return {
+    el,
+    getValue: () => ta.value,
+    setValue(v) { ta.value = String(v ?? ''); void paint(); },
+    setLanguage(l) { lang = String(l || ''); el.dataset.language = lang; void paint(); },
+    setReadOnly(b) { ta.readOnly = Boolean(b); el.classList.toggle('ro', Boolean(b)); },
+    focus() { if (typeof ta.focus === 'function') ta.focus(); },
+    destroy() {
+      dead = true;
+      if (timer != null) { win.clearTimeout(timer); timer = null; }
+      ta.removeEventListener('input', onInputEvent);
+      ta.removeEventListener('scroll', onScroll);
+      ta.removeEventListener('keydown', onKeyDown);
+      ta.removeEventListener('blur', onBlur);
+    },
+  };
+}

package/ui/public/getting-started.mjs

@@ -13,12 +13,19 @@ export const GETTING_STARTED_STEPS = Object.freeze([
   { id: 'project',     label: 'Add your first project',          vig: 'project' },
   { id: 'run',         label: 'Watch a run end to end',          vig: 'run' },
   { id: 'ask',         label: 'Ask Worca about a run',           vig: 'ask' },
-  { id: 'workflows',   label: 'Explore the built-in workflows',  vig: 'workflow' },
   { id: 'realRun',     label: 'Run a real pipeline',             vig: 'realRun' },
-  { id: 'workspace',   label: 'Group projects into a workspace', vig: 'workspace' },
-  { id: 'teamMetrics', label: 'Turn on team metrics',            vig: 'teamMetrics' },
+  { id: 'workflows',   label: 'Explore the built-in workflows',  vig: 'workflow',    level: 'advanced' },
+  { id: 'workspace',   label: 'Group projects into a workspace', vig: 'workspace',   level: 'advanced' },
+  { id: 'teamMetrics', label: 'Turn on team metrics',            vig: 'teamMetrics', level: 'expert' },
+  { id: 'teamPolicy',  label: 'Set a team policy',               vig: 'teamPolicy',  level: 'expert' },
 ]);
 
+// `level` (docs/ui-levels.md) is the interface mode a step's controls live in; absent = simple.
+// Every tile shows at every mode — the count stays "n of 9" — but a step above the current mode
+// wears its level, and its guide opens by ringing the mode switch.
+const LEVEL_ORDER = ['simple', 'advanced', 'expert'];
+const LEVEL_LABEL = { advanced: 'Advanced', expert: 'Expert' };
+
 /** Seconds a tile holds the reveal sequence before the next arrives: an
  *  unfinished tile paints its drawing first, a finished one arrives already
  *  drawn and still, so it only needs its own fade. */
@@ -110,6 +117,18 @@ const VIGNETTES = {
     wire(0.65, 'M64 35h30'),
     shape(0.85, 'path', 'gs-chart gs-accent', 'd="M84 46l6-8 5 4 7-10"'),
   ],
+  // One document, read by every teammate: a page with its rules ticked, wired to three nodes.
+  teamPolicy: () => [
+    shape(0.05, 'rect', 'gs-frame', 'x="12" y="12" width="40" height="46" rx="6"'),
+    shape(0.25, 'path', 'gs-glyph', 'd="M22 24h20M22 33h20"'),
+    shape(0.4, 'path', 'gs-chart gs-accent', 'd="M22 45l4 4 8-8"'),
+    wire(0.5, 'M52 35 C 70 35, 76 20, 94 20'),
+    wire(0.6, 'M52 35h42'),
+    wire(0.7, 'M52 35 C 70 35, 76 50, 94 50'),
+    node(0.85, 100, 20, 5),
+    node(0.9, 100, 35, 5),
+    node(0.95, 100, 50, 5),
+  ],
 };
 
 /**
@@ -138,9 +157,9 @@ export function vignette(doc, id, { animate = true, delay = 0 } = {}) {
  * they are done, so any guide can be replayed.
  * @param {Element} host
  * @param {{steps?:Record<string,boolean>, hidden?:boolean}|null} status
- * @param {{onStep?:(id:string)=>void, onHide?:()=>void, animate?:boolean, hideLabel?:string}} [handlers]
+ * @param {{onStep?:(id:string)=>void, onHide?:()=>void, animate?:boolean, hideLabel?:string, level?:string}} [handlers]  `level`: the current interface mode
  */
-export function renderGettingStarted(host, status, { onStep, onHide, animate = true, hideLabel = 'Hide' } = {}) {
+export function renderGettingStarted(host, status, { onStep, onHide, animate = true, hideLabel = 'Hide', level = 'expert' } = {}) {
   if (!host) return;
   const doc = host.ownerDocument;
   host.replaceChildren();
@@ -173,7 +192,7 @@ export function renderGettingStarted(host, status, { onStep, onHide, animate = t
   const tiles = doc.createElement('div');
   tiles.className = 'gs-tiles';
   // Tiles arrive one at a time IN ORDER, so a new user reads one idea at a
-  // time instead of eight at once. A finished tile takes its turn but arrives
+  // time instead of nine at once. A finished tile takes its turn but arrives
   // already drawn and still, so it holds the sequence only briefly.
   let at = 0;
   for (const s of GETTING_STARTED_STEPS) {
@@ -197,6 +216,14 @@ export function renderGettingStarted(host, status, { onStep, onHide, animate = t
     label.className = 'gs-label';
     label.textContent = s.label;
     tile.append(mark, vig, label);
+    if (s.level && LEVEL_ORDER.indexOf(s.level) > LEVEL_ORDER.indexOf(level)) {
+      const lv = doc.createElement('span');
+      lv.className = 'lv-pill gs-level';
+      lv.dataset.lv = s.level;
+      lv.textContent = LEVEL_LABEL[s.level];
+      tile.appendChild(lv);
+      tile.setAttribute('aria-label', `${tile.getAttribute('aria-label')} — part of ${LEVEL_LABEL[s.level]} mode`);
+    }
     tile.addEventListener('click', () => onStep && onStep(s.id));
     tiles.appendChild(tile);
   }
@@ -207,7 +234,7 @@ export function renderGettingStarted(host, status, { onStep, onHide, animate = t
 /* ------------------------------------------------------------------- pill */
 
 /**
- * The sidebar row under New pipeline: "Getting started · 2/8". It follows the
+ * The sidebar row under New pipeline: "Getting started · 2/9". It follows the
  * user to every view (the guides leave the shelf behind) and vanishes once the
  * checklist is hidden or complete — nothing left to nag about.
  * @param {Element} host

package/ui/public/graph/composer.mjs

@@ -13,10 +13,12 @@
 import { createGraphView } from './view.mjs';
 import { renderPalette, applyFilter, FLOW_GROUP } from './palette.mjs';
 import { renderNodeInspector, renderWireInspector, renderEmptyInspector } from './inspector.mjs';
+import { paramEditorHook } from '../script-forms.mjs';
 import { renderSaveDialog, openDialog, closeDialog } from './save-dialog.mjs';
 import { PORT_HIT_R, SNAP, ZOOM_MIN, ZOOM_MAX, ZOOM_K, ZOOM_STEP, NODE_W, snap }
   from '../../../src/shared/graph/geometry.mjs';
 import { hitRoute } from '../../../src/shared/graph/route.mjs';
+import { PARAMS_PORT } from '../../../src/shared/graph/constants.mjs';
 import { canWire, newNode, newWire, normalizeTemplate, serializeTemplate }
   from '../../../src/shared/graph/template.mjs';
 import { validateGraph } from '../../../src/shared/graph/validate.mjs';
@@ -47,7 +49,7 @@ export const pluginOriginName = (origin) => (typeof origin === 'string' && origi
   ? origin.slice('plugin:'.length) : '');
 const isTyping = (t) => !!t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT' || t.isContentEditable);
 
-export function createComposer(hostEls, { doc = globalThis.document, api, raf = null, viewport = null, storage = null, portsFn } = {}) {
+export function createComposer(hostEls, { doc = globalThis.document, api, raf = null, viewport = null, storage = null, portsFn, highlight = null } = {}) {
   const win = doc.defaultView || globalThis;
   const schedule = raf || ((fn) => win.requestAnimationFrame(fn));
   const stats = { rectReads: 0, frames: 0, pointerMoves: 0, validations: 0 };
@@ -65,7 +67,9 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
   let lastReport = { ok: true, errors: [], warnings: [] };
   const undoStack = [];
   const redoStack = [];
-  let agents = {};                // key -> meta (palette + header tint)
+  let agents = {};                // key -> agent meta (palette domain groups)
+  let scripts = {};               // key -> script meta (palette Scripts group); the view gets the MERGED index
+  const headerIndex = () => ({ ...agents, ...scripts });   // keys never collide (D16)
 
   const view = createGraphView(hostEls.canvas, {
     doc, mode: 'edit', portsFn, agents, viewport,
@@ -512,7 +516,7 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
 
   function paintPalette() {
     renderPalette(hostEls.palette, {
-      agents: Object.values(agents), placedKinds: tpl.nodes.map((n) => n.kind), collapsed, query, doc,
+      agents: Object.values(agents), scripts: Object.values(scripts), placedKinds: tpl.nodes.map((n) => n.kind), collapsed, query, doc,
     });
   }
   /** Diagonal de-stacker: 24 tries, SNAP*2 per try so each attempt lands one
@@ -535,10 +539,15 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
     const p = at || freeSlot(centerWorld());
     let node = null;
     commit('add', () => {
-      node = entry.kind
-        ? newNode(entry.kind, null, snap(p.x), snap(p.y))
-        : newNode('agent', entry.key, snap(p.x), snap(p.y));
+      node = entry.kind === 'script'
+        ? newNode('script', entry.key, snap(p.x), snap(p.y))
+        : entry.kind
+          ? newNode(entry.kind, null, snap(p.x), snap(p.y))
+          : newNode('agent', entry.key, snap(p.x), snap(p.y));
       if (entry.kind === 'and' || entry.kind === 'or' || entry.kind === 'combine') node.config.arity = 2;
+      // D14: a config-ported script starts from the sidecar's defaultPorts, deep-copied — the card owns its ports from here.
+      const meta = entry.kind === 'script' ? scripts[entry.key] : null;
+      if (meta && meta.ports === 'config' && meta.defaultPorts) node.config.ports = JSON.parse(JSON.stringify(meta.defaultPorts));
       tpl.nodes.push(node);
     });
     select({ kind: 'node', id: node.id });
@@ -551,7 +560,9 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
   function onPalDown(ev) {
     const btn = ev.target.closest && ev.target.closest('.ap');
     if (!btn || btn.disabled || ev.button !== 0) return;
-    drag = { entry: btn.dataset.kind ? { kind: btn.dataset.kind } : { key: btn.dataset.key },
+    const entry = btn.dataset.kind === 'script' ? { kind: 'script', key: btn.dataset.key }
+      : btn.dataset.kind ? { kind: btn.dataset.kind } : { key: btn.dataset.key };
+    drag = { entry,
       sx: ev.clientX, sy: ev.clientY, id: ev.pointerId, label: btn.querySelector('.n').textContent, ghost: null, btn };
     try { btn.setPointerCapture?.(ev.pointerId); } catch { /* synthetic */ }
     doc.addEventListener('pointermove', onPalMove);
@@ -618,15 +629,28 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
     paintInspector();
   }
 
+  // Code editors mounted into the inspector. Each owns a debounce timer and three
+  // listeners, so every repaint destroys the previous set before the tree goes —
+  // a pending highlight against a detached node is a leak, not a crash, and this
+  // is the only place that sees both sides of the swap. With no `highlight`
+  // injected the hook is null and renderParamsForm keeps P1b's plain textarea.
+  const insEditors = [];
+  const insEditorFor = paramEditorHook({ doc, highlight, editors: insEditors });
+  function disposeInsEditors() {
+    for (const ed of insEditors) ed.destroy();
+    insEditors.length = 0;
+  }
+
   function paintInspector() {
     const hostBody = hostEls.insBody;
     if (!hostBody) return;
+    disposeInsEditors();
     if (!sel) return void hostBody.replaceChildren(renderEmptyInspector({ doc }));
     if (sel.kind === 'node') {
       const node = nodeById(sel.id);
       if (!node) return void hostBody.replaceChildren(renderEmptyInspector({ doc }));
-      const meta = node.kind === 'agent' ? (agents[node.key] || null) : null;
-      return void hostBody.replaceChildren(renderNodeInspector(node, { template: tpl, portsFn, meta, models, efforts, subagentModels, doc }));
+      const meta = node.kind === 'agent' ? (agents[node.key] || null) : (node.kind === 'script' ? (scripts[node.key] || null) : null);
+      return void hostBody.replaceChildren(renderNodeInspector(node, { template: tpl, portsFn, meta, models, efforts, subagentModels, editorFor: insEditorFor, doc }));
     }
     const wire = wireById(sel.id);
     if (!wire) return void hostBody.replaceChildren(renderEmptyInspector({ doc }));
@@ -664,6 +688,22 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
     setTab(btn.dataset.tab, { persist: true });
   }
 
+  /** node.config.ports, cloned one level deep so a commit never mutates the undo ring's copy. */
+  const clonePorts = (raw) => ({
+    inputs: (Array.isArray(raw && raw.inputs) ? raw.inputs : []).map((p) => ({ ...p })),
+    outputs: (Array.isArray(raw && raw.outputs) ? raw.outputs : []).map((p) => ({ ...p })),
+  });
+  const nextPortId = (list, base) => { let i = 0; for (;;) { const id = i ? `${base}${i + 1}` : base; if (!list.some((p) => p.id === id)) return id; i += 1; } };
+  /** A param control's value in the declared type; undefined = delete the key. */
+  function coerceParam(decl, target) {
+    if (!decl) return target.value === '' ? undefined : target.value;
+    if (decl.type === 'boolean') return Boolean(target.checked);
+    if (decl.type === 'number') { const n = Number(target.value); return target.value === '' || !Number.isFinite(n) ? undefined : n; }
+    // A command or code value of blanks alone is no value: the runner trims it away, so V22 must see it as missing.
+    if ((decl.type === 'command' || decl.type === 'code') && target.value.trim() === '') return undefined;
+    return target.value === '' ? undefined : target.value;
+  }
+
   function onInspectorChange(ev) {
     const name = ev.target.dataset && ev.target.dataset.field;
     if (!name || !sel) return;
@@ -680,12 +720,72 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
     }
     const node = nodeById(sel.id);
     if (!node) return;
+    if (node.kind === 'script' && name.startsWith('param:')) {
+      const id = name.slice('param:'.length);
+      const decl = ((scripts[node.key] && scripts[node.key].params) || []).find((p) => p.id === id);
+      commit(name, () => {
+        const params = { ...(node.config.params || {}) };
+        const v = coerceParam(decl, ev.target);
+        if (v === undefined) delete params[id]; else params[id] = v;
+        if (Object.keys(params).length) node.config.params = params; else delete node.config.params;
+      });
+      paintInspector();
+      return;
+    }
+    if (node.kind === 'script' && name === 'timeoutMs') {
+      const secs = Number(ev.target.value);
+      commit(name, () => {
+        if (ev.target.value !== '' && Number.isFinite(secs) && secs >= 1) node.config.timeoutMs = Math.round(secs * 1000);
+        else delete node.config.timeoutMs;
+      });
+      paintInspector();
+      return;
+    }
+    if (node.kind === 'script' && name.startsWith('port:')) {
+      const [, dir, idx, fieldName] = name.split(':');
+      if (fieldName === 'id') {
+        // Wires follow a port BY ID (below), so an id that is blank, reserved or already taken on this side is
+        // refused and the box snaps back: passing through '' would strand the wires on a port that cannot be
+        // drawn, and two ports sharing an id would hand one port's wires to the other on the next rename.
+        const next = ev.target.value.trim();
+        const side = node.config.ports && Array.isArray(node.config.ports[dir]) ? node.config.ports[dir] : [];
+        const engineOwned = next === 'await' || (dir === 'inputs' && next === PARAMS_PORT.id && node.config.paramsPort === true);
+        if (!next || engineOwned || side.some((q, j) => j !== Number(idx) && q && q.id === next)) return void paintInspector();
+      }
+      commit(name, () => {
+        const ports = clonePorts(node.config.ports);
+        const p = ports[dir] && ports[dir][Number(idx)];
+        if (!p) return;
+        if (fieldName === 'required') p.required = Boolean(ev.target.checked);
+        else if (fieldName === 'loop') { if (ev.target.checked) p.loop = true; else delete p.loop; }
+        else if (fieldName === 'id') {
+          // A rename carries the port's wires with it: a wire into a port id that no longer exists is
+          // never drawn, so it could be neither selected nor deleted and the graph would stay invalid.
+          const old = p.id;
+          p.id = ev.target.value.trim();
+          if (old && old !== p.id) for (const w of tpl.wires) { const end = dir === 'inputs' ? w.to : w.from; if (end.node === node.id && end.port === old) end.port = p.id; }
+        }
+        else if (ev.target.value === '') delete p[fieldName];
+        else p[fieldName] = ev.target.value;
+        if (fieldName === 'type' && ev.target.value === 'void') delete p.filename;
+        node.config.ports = ports;
+      });
+      paintInspector();
+      return;
+    }
     commit(name, () => {
       if (name === 'arity') {
         const n = Number.parseInt(ev.target.value, 10);
         node.config.arity = Number.isInteger(n) && n >= 2 ? n : 2;   // V12 floor
       } else if (ev.target.type === 'checkbox') {
         if (ev.target.checked) node.config[name] = true; else delete node.config[name];
+        // The params port leaves with its toggle, and its wires with it — a wire into a port that no longer
+        // exists is never drawn, so it could be neither selected nor deleted (same reason as a removed config port).
+        // Resolved AFTER the delete: an input still called `params` is the script's OWN (a stuck opt-in V22
+        // refuses), and the wires into it are the user's.
+        if (name === 'paramsPort' && !ev.target.checked && !(portsFn(node)?.inputs || []).some((p) => p && p.id === PARAMS_PORT.id)) {
+          tpl.wires = tpl.wires.filter((w) => !(w.to.node === node.id && w.to.port === PARAMS_PORT.id));
+        }
       } else if (ev.target.value === '') {
         delete node.config[name];
       } else {
@@ -695,6 +795,30 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
     paintInspector();                                  // re-read the committed value
   }
 
+  /** The port editor's add/remove buttons (script cards only). */
+  function onInspectorClick(ev) {
+    const add = ev.target.closest && ev.target.closest('[data-port-add]');
+    const rm = ev.target.closest && ev.target.closest('[data-port-remove]');
+    if ((!add && !rm) || !sel || sel.kind !== 'node') return;
+    const node = nodeById(sel.id);
+    if (!node || node.kind !== 'script') return;
+    commit('ports', () => {
+      const ports = clonePorts(node.config.ports);
+      if (add) {
+        const dir = add.dataset.portAdd;
+        if (dir === 'inputs') ports.inputs.push({ id: nextPortId(ports.inputs, 'in'), type: 'md', required: false });
+        else { const id = nextPortId(ports.outputs, 'out'); ports.outputs.push({ id, type: 'md', when: 'always', filename: `${id}-cycle{cycle}.md` }); }
+      } else {
+        const [dir, idx] = rm.dataset.portRemove.split(':');
+        const gone = ports[dir] ? ports[dir].splice(Number(idx), 1)[0] : null;
+        // The removed port's wires go with it (same reason as the rename above).
+        if (gone && gone.id) tpl.wires = tpl.wires.filter((w) => { const end = dir === 'inputs' ? w.to : w.from; return !(end.node === node.id && end.port === gone.id); });
+      }
+      node.config.ports = ports;
+    });
+    paintInspector();
+  }
+
   let dialog = null;
   let savedDomains = [];
 
@@ -812,6 +936,7 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
     hostEls.palette?.addEventListener('click', onPalClick);
     hostEls.filter?.addEventListener('input', onFilterInput);
     hostEls.insBody?.addEventListener('change', onInspectorChange);
+    hostEls.insBody?.addEventListener('click', onInspectorClick);
     hostEls.insToggle?.addEventListener('click', onRailToggle);
     hostEls.insTabs?.addEventListener('click', onTabClick);
     hostEls.saveBtn?.addEventListener('click', onSaveClick);
@@ -852,6 +977,8 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
     hostEls.palette?.removeEventListener('click', onPalClick);
     hostEls.filter?.removeEventListener('input', onFilterInput);
     hostEls.insBody?.removeEventListener('change', onInspectorChange);
+    hostEls.insBody?.removeEventListener('click', onInspectorClick);
+    disposeInsEditors();
     hostEls.insToggle?.removeEventListener('click', onRailToggle);
     hostEls.insTabs?.removeEventListener('click', onTabClick);
     hostEls.saveBtn?.removeEventListener('click', onSaveClick);
@@ -922,7 +1049,8 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
     setReady(v) { ready = v; paintChrome(); },
     // A registry reload (MAJ-16) must re-validate the OPEN canvas: a wire into a
     // port the Agents view just deleted is an error now, not at the next edit.
-    setAgents(map) { agents = map || {}; view.setAgents(agents); if (tpl.nodes.length) scheduleValidate(); },
+    setAgents(map) { agents = map || {}; view.setAgents(headerIndex()); if (tpl.nodes.length) scheduleValidate(); },
+    setScripts(map) { scripts = map || {}; view.setAgents(headerIndex()); if (tpl.nodes.length) scheduleValidate(); },
     /** Rename: an unsaved edit, so it sets `dirty` — it never clears it. */
     setName(name) { tpl.name = String(name || ''); metaDirty = true; dirty = true; paintChrome(); },
     /** 'plugin:<name>' of the loaded row, '' when user-created. */