@worca/app 0.0.1

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

@@ -0,0 +1,89 @@
+// ui/public/chat-settings-view.mjs
+// Pure DOM renderers for the Settings "Chat notifications" card
+// (chat-connectivity-design.md §4.8). Same contract as plugins-view.mjs:
+// detached elements, no fetch, no listeners — app.js owns I/O and mounting;
+// node:test drives these via jsdom.
+
+function h(doc, tag, cls, text) {
+  const n = doc.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+
+const EVENTS = [
+  ['question', 'Approval / question needed', 'a pipeline is blocked waiting on you — the one to keep on'],
+  ['done', 'Run finished (done / stopped)', ''],
+  ['error', 'Run failed', ''],
+  ['paused', 'Run paused (incl. cost limits)', ''],
+];
+
+/**
+ * renderChatSettings({prefs, channels}) -> detached card body.
+ * prefs = chatPrefs() shape {notify, channels}; channels = /api/chat/status
+ * rows. Inputs carry data-ev / data-channel-key; the Test button carries
+ * data-plugin + data-channel-id + .chat-test for app.js's delegated listener.
+ */
+export function renderChatSettings({ prefs, channels } = {}, { doc = globalThis.document } = {}) {
+  const p = prefs || { notify: {}, channels: {} };
+  const root = h(doc, 'div', 'chat-settings');
+
+  const evBox = h(doc, 'div', 'chat-events');
+  evBox.appendChild(h(doc, 'div', 'label-row', 'Notify on'));
+  for (const [key, label, hint] of EVENTS) {
+    const row = h(doc, 'label', 'chat-event-row');
+    const cb = h(doc, 'input', 'chat-ev');
+    cb.type = 'checkbox';
+    cb.dataset.ev = key;
+    cb.checked = p.notify?.[key] !== false;
+    row.appendChild(cb);
+    row.appendChild(h(doc, 'span', '', label));
+    if (hint) row.appendChild(h(doc, 'small', 'hint', hint));
+    evBox.appendChild(row);
+  }
+  root.appendChild(evBox);
+
+  const chBox = h(doc, 'div', 'chat-channels');
+  chBox.appendChild(h(doc, 'div', 'label-row', 'Channels'));
+  const rows = channels || [];
+  if (!rows.length) {
+    chBox.appendChild(h(doc, 'small', 'hint chat-none', 'No chat channels installed. Install a chat plugin (e.g. telegram-chat) in the Plugins view.'));
+  }
+  for (const c of rows) {
+    const key = `${c.plugin}/${c.channelId}`;
+    const row = h(doc, 'div', 'chat-channel-row');
+    row.dataset.channelKey = key;
+    const toggle = h(doc, 'label', 'chat-channel-toggle');
+    const cb = h(doc, 'input', 'chat-ch');
+    cb.type = 'checkbox';
+    cb.dataset.channelKey = key;
+    cb.checked = p.channels?.[key]?.enabled !== false;
+    toggle.appendChild(cb);
+    toggle.appendChild(h(doc, 'span', '', `${c.displayName || c.channelId} (${c.platform})`));
+    row.appendChild(toggle);
+    const stateCls = { connected: 'green', degraded: 'waiting', connecting: 'waiting', unconfigured: 'waiting' }[c.state] || 'red';
+    const badge = h(doc, 'span', `badge ${stateCls} chat-state`, c.state);
+    badge.dataset.channelKey = key;
+    if (c.detail) badge.title = c.detail;
+    row.appendChild(badge);
+    const test = h(doc, 'button', 'btn-ghost btn-mini chat-test', 'Test');
+    test.type = 'button';
+    test.dataset.plugin = c.plugin;
+    test.dataset.channelId = c.channelId;
+    row.appendChild(test);
+    chBox.appendChild(row);
+  }
+  root.appendChild(chBox);
+  return root;
+}
+
+/** collectChatSettings(root) -> the POST /api/settings {chat} patch. */
+export function collectChatSettings(root) {
+  const notify = {};
+  for (const cb of root.querySelectorAll('input.chat-ev[data-ev]')) notify[cb.dataset.ev] = cb.checked;
+  const channels = {};
+  for (const cb of root.querySelectorAll('input.chat-ch[data-channel-key]')) {
+    channels[cb.dataset.channelKey] = { enabled: cb.checked };
+  }
+  return { notify, channels };
+}

package/ui/public/composer-core.mjs

@@ -0,0 +1,211 @@
+// ui/public/composer-core.mjs
+// Framework-free, DOM-free helpers for the Pipeline Composer. Imported by
+// ui/public/app.js (browser, type="module") AND by test/composer-ui.test.mjs
+// (node:test, no jsdom). KEEP THIS FILE FREE OF document/window references so it
+// stays unit-testable in isolation — DOM wiring lives in app.js.
+
+// ---------------------------------------------------------------------------
+// topology(steps, feedbacks) -> WorkflowTemplate {steps,feedbacks} body.
+// Canvas model uses throwaway local ids (n1, n7…). The persisted contract uses
+// stable instance ids "s{stepIndex}_{memberIndex}" (e.g. "s0_0"); feedback
+// from/to reference those instance ids. We rebuild the id map and remap edges,
+// dropping any edge whose endpoint is gone (defensive; the UI prunes these too).
+// ---------------------------------------------------------------------------
+export function topology(steps, feedbacks) {
+  const idMap = {}; // localId -> "sI_J"
+  const outSteps = steps.map((col, i) =>
+    col.map((node, j) => {
+      const id = `s${i}_${j}`;
+      idMap[node.id] = id;
+      return { id, key: node.key };
+    }),
+  );
+  const outFeedbacks = [];
+  (feedbacks || []).forEach((fb) => {
+    const from = idMap[fb.from];
+    const to = idMap[fb.to];
+    if (from && to) outFeedbacks.push({ id: `fb_${outFeedbacks.length}`, from, to });
+  });
+  return { steps: outSteps, feedbacks: outFeedbacks };
+}
+
+// metaLine(steps, feedbacks) -> "N steps · M agents[ · K feedback loop(s)]"
+// (saved-pipelines card meta line). Mirrors the mockup's renderList meta string.
+export function metaLine(steps, feedbacks) {
+  const nSteps = steps.length;
+  const nAgents = steps.reduce((sum, col) => sum + col.length, 0);
+  const nLoops = (feedbacks || []).length;
+  let s = `${nSteps} steps · ${nAgents} agents`;
+  if (nLoops) s += ` · ${nLoops} feedback loop${nLoops > 1 ? 's' : ''}`;
+  return s;
+}
+
+// distinctAgents(steps) -> ordered unique role keys (for the chip row).
+export function distinctAgents(steps) {
+  const seen = [];
+  steps.forEach((col) => col.forEach((node) => {
+    if (!seen.includes(node.key)) seen.push(node.key);
+  }));
+  return seen;
+}
+
+// Embedded agent registry — fallback for the palette when /api/agents is
+// unavailable (e.g. a sibling phase's endpoint not yet wired). Keys are the
+// canonical camelCase agent keys; icon = inner SVG markup, viewBox "0 0 24 24"
+// (glyphs copied from the standalone mockup's ICON map). The live registry from
+// GET /api/agents overrides this whenever present (see mergePalette).
+export const EMBEDDED_AGENTS = {
+  clarify: {
+    key: 'clarify', displayName: 'Clarify', description: 'Turns hidden decisions into questions before planning. Multiple-choice, so later steps never guess.',
+    color: 'red', order: 0, connectsTo: ['planner'],
+    icon: '<circle cx="12" cy="12" r="9"/><path d="M9.4 9.3a2.7 2.7 0 0 1 5.2 1c0 1.8-2.6 2.1-2.6 3.6" stroke-linecap="round" fill="none"/><circle cx="12" cy="17" r="0.7" fill="currentColor" stroke="none"/>',
+  },
+  planner: {
+    key: 'planner', displayName: 'Plan', description: 'Explores the codebase and writes the implementation plan. Architecture, task breakdown, concrete code snippets; can ask clarifying questions first.',
+    color: 'violet', order: 1, connectsTo: ['refiner', 'implementer', 'decomposer'],
+    icon: '<path d="M8 6h11M8 12h11M8 18h8" stroke-linecap="round"/><circle cx="4" cy="6" r="1.1"/><circle cx="4" cy="12" r="1.1"/><circle cx="4" cy="18" r="1.1"/>',
+  },
+  refiner: {
+    key: 'refiner', displayName: 'Refine Plan', description: 'Rewrites the latest plan into a tighter version. Fixes structure, correctness, and code snippets until no blocking issues remain.',
+    color: 'green', order: 2, connectsTo: ['implementer', 'refiner', 'decomposer'],
+    icon: '<path d="M12 3v3M12 18v3M4.5 7.5l2 1M17.5 15.5l2 1M4.5 16.5l2-1M17.5 8.5l2-1" stroke-linecap="round"/><path d="M12 8.2l1.2 2.6L16 12l-2.8 1.2L12 15.8l-1.2-2.6L8 12l2.8-1.2L12 8.2Z" stroke-linejoin="round"/>',
+  },
+  decomposer: {
+    key: 'decomposer', displayName: 'Decompose', description: 'Splits an approved plan into vertical-slice tasks. Each task gets its own implementer.',
+    color: 'blue', order: 2.5, connectsTo: ['implementer'],
+  },
+  implementer: {
+    key: 'implementer', displayName: 'Implementation', description: 'Writes the code from the approved plan, strict TDD. In fix mode, addresses only the issues a review flagged.',
+    color: 'peach', order: 3, connectsTo: ['reviewer', 'manualTestsChecklist'],
+    icon: '<path d="M9 8l-4 4 4 4M15 8l4 4-4 4" stroke-linecap="round" stroke-linejoin="round"/>',
+  },
+  reviewer: {
+    key: 'reviewer', displayName: 'Review Implementation', description: 'Reviews the implementation diff against the plan. Honest verdict; blocking findings loop back to the implementer.',
+    color: 'blue', order: 4, connectsTo: ['implementer', 'manualTestsChecklist'],
+    icon: '<path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3Z" stroke-linejoin="round"/><path d="M9 12l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/>',
+  },
+  manualTestsChecklist: {
+    key: 'manualTestsChecklist', displayName: 'Manual Tests Checklist', description: 'Drafts a manual test checklist for the change. User-visible flows, edge cases, regressions worth clicking through.',
+    color: 'blue', order: 5, connectsTo: ['manualWebUiTesting'],
+    icon: '<rect x="6" y="4" width="12" height="17" rx="2"/><path d="M9.5 4V2.8h5V4" stroke-linejoin="round"/><path d="M8.8 12l1.6 1.6L13.4 10" stroke-linecap="round" stroke-linejoin="round"/>',
+  },
+  manualWebUiTesting: {
+    key: 'manualWebUiTesting', displayName: 'Manual web UI testing', description: 'Runs the manual checklist in the live web UI via Playwright. Reports what passed, failed, or blocked.',
+    color: 'violet', order: 6, connectsTo: ['implementer'],
+    icon: '<circle cx="12" cy="12" r="9"/><path d="M10 8.5l5 3.5-5 3.5V8.5Z" fill="currentColor" stroke="none"/>',
+  },
+  planReviewer: {
+    key: 'planReviewer', displayName: 'Plan Review', description: 'Reviews the plan against the request and the codebase. Blocking issues bounce it back for a cold re-plan.',
+    color: 'amber', order: 7, connectsTo: ['planner', 'implementer', 'decomposer'],
+    icon: '<path d="M10.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z"/><path d="M15.5 15.5L21 21" stroke-linecap="round"/><path d="M7.6 10.3l2 2 3.3-3.6" stroke-linecap="round" stroke-linejoin="round"/>',
+  },
+};
+
+// mergePalette(agentsResponse) -> ordered Array<{key,displayName,description,color,icon,origin,order}>.
+// Prefers the live registry (GET /api/agents -> { agents:[…] } or a bare array);
+// falls back to EMBEDDED_AGENTS. Always sorted by .order so the palette is stable.
+export function mergePalette(agentsResponse) {
+  let list = null;
+  if (Array.isArray(agentsResponse)) list = agentsResponse;
+  else if (agentsResponse && Array.isArray(agentsResponse.agents)) list = agentsResponse.agents;
+  if (!list || !list.length) list = Object.values(EMBEDDED_AGENTS);
+  return list
+    .map((a) => ({
+      key: a.key,
+      displayName: a.displayName || a.key,
+      description: a.description || '',
+      color: a.color || 'blue',
+      icon: a.icon || '',
+      // Trusted-icon gate: only 'user' is untrusted; the EMBEDDED_AGENTS
+      // fallback has no origin and is repo-shipped -> 'builtin' is correct.
+      origin: a.origin === 'user' ? 'user' : 'builtin',
+      order: typeof a.order === 'number' ? a.order : 99,
+      domain: typeof a.domain === 'string' && a.domain ? a.domain : 'general',
+      connectsTo: a.connectsTo === undefined ? '*' : a.connectsTo,
+      produces: Array.isArray(a.produces) ? a.produces : [],
+      consumes: Array.isArray(a.consumes) ? a.consumes : [],
+      optionalConsumes: Array.isArray(a.optionalConsumes) ? a.optionalConsumes : [],
+    }))
+    .sort((x, y) => x.order - y.order);
+}
+
+// groupPaletteByDomain(palette, domains) -> ordered [{domain, agents:[...]}].
+// Each group = that domain's own agents PLUS every `shared` agent prepended,
+// then sorted by .order. Pure: no DOM. `domains` is the ordered header list
+// (general last, shared excluded) — see collectDomains / paletteDomains.
+export function groupPaletteByDomain(palette, domains) {
+  const list = Array.isArray(palette) ? palette : [];
+  const shared = list.filter((a) => a.domain === 'shared');
+  const byOrder = (x, y) => x.order - y.order;
+  return (Array.isArray(domains) ? domains : []).map((domain) => ({
+    domain,
+    agents: [...shared, ...list.filter((a) => a.domain === domain)].sort(byOrder),
+  }));
+}
+
+// defaultTopologyFromTemplate(tpl, mk) -> canvas model {steps,feedbacks} with
+// FRESH local ids (mk(key) -> {id,key}). The server template's instance ids
+// (s*_*) are deliberately discarded: once on the canvas, nodes get throwaway
+// local ids and topology() re-stamps contract ids on save. Feedback edges are
+// rewired from server ids to the new local ids by walking the same order.
+export function defaultTopologyFromTemplate(tpl, mk) {
+  if (!tpl || !Array.isArray(tpl.steps) || !tpl.steps.length) {
+    return { steps: [], feedbacks: [] };
+  }
+  const remap = {}; // serverId -> localId
+  const steps = tpl.steps.map((col) =>
+    col.map((node) => {
+      const local = mk(node.key);
+      remap[node.id] = local.id;
+      return local;
+    }),
+  );
+  const feedbacks = (tpl.feedbacks || [])
+    .filter((fb) => remap[fb.from] && remap[fb.to])
+    .map((fb) => ({ from: remap[fb.from], to: remap[fb.to] }));
+  return { steps, feedbacks };
+}
+
+// Channels a pipeline gets without any producing NODE adjacent on the canvas: the
+// user prompt, the shared worktree, the frozen workspace snapshot, and the clarify
+// pre-step. Module-local on purpose — this is NOT channels.mjs PRESEEDED_CHANNELS
+// (that one lists the validator's value-bearing bus seeds and includes
+// plan/checklist; here plan/checklist stay checkable so a producer-less consumer
+// of real content still warns, while this no-build browser module keeps zero
+// imports from src/core).
+const SOFT_PRESEEDED = ['userPrompt', 'code', 'workspace', 'clarify'];
+
+// canConnect(fromKey, toKey, agents) -> { ok, reason, warn? }.
+// Governance (connectsTo) is the HARD gate, exactly as before — and an explicit
+// allowlist that admits the target is treated as AUTHOR-CURATED: the soft channel
+// check is skipped (e.g. decomposer -> implementer, where the plan flows through
+// from upstream via the bus). Only wildcard links get the soft pairwise check:
+// when the source produces nothing the target consumes AND the target's required
+// inputs are not all pre-seeded, we return ok:true with a `warn` string the UI
+// surfaces as a toast.
+export function canConnect(fromKey, toKey, agents) {
+  const from = agents && agents[fromKey];
+  const ct = from ? from.connectsTo : '*';
+  if (Array.isArray(ct)) {
+    if (!ct.includes(toKey)) {
+      const fn = (from && from.displayName) || fromKey;
+      const tn = (agents[toKey] && agents[toKey].displayName) || toKey;
+      return { ok: false, reason: `${fn} can’t connect to ${tn}` };
+    }
+    return { ok: true, reason: '' }; // curated allowlist: author vetted this link
+  }
+  const to = agents && agents[toKey];
+  if (from && to && Array.isArray(from.produces) && Array.isArray(to.consumes)
+      && from.produces.length && to.consumes.length) {
+    const feeds = from.produces.some((c) => to.consumes.includes(c));
+    const required = to.consumes.filter((c) =>
+      !(Array.isArray(to.optionalConsumes) && to.optionalConsumes.includes(c)) &&
+      !SOFT_PRESEEDED.includes(c));
+    if (!feeds && required.length) {
+      const fn = from.displayName || fromKey;
+      const tn = to.displayName || toKey;
+      return { ok: true, reason: '', warn: `${fn} produces [${from.produces.join(', ')}] but ${tn} needs [${required.join(', ')}]` };
+    }
+  }
+  return { ok: true, reason: '' };
+}

package/ui/public/guardrails-view.mjs

@@ -0,0 +1,244 @@
+// ui/public/guardrails-view.mjs
+// Pure DOM renderers for the Guardrails view. Every function takes the target
+// `document` via opts (defaults to the browser global) and returns DETACHED
+// elements — no fetch, no listeners outside the returned tree. app.js owns
+// endpoint calls, the modal shell, and mounting; node:test drives these via jsdom.
+// Interactive elements carry data-id / data-value / data-list + a routing class
+// (grv-edit, grv-delete, grv-back, grv-save, grv-discard, gr-rm, gr-add-btn) so
+// app.js wires ONE delegated listener on the list container.
+
+function h(doc, tag, cls, text) {
+  const n = doc.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+
+// settings -> "2 deny · 1 paths · scrub on" (raw 5-key counts, NOT the Read/Edit expansion).
+export function guardrailSummary(s) {
+  const n = (v) => (Array.isArray(v) ? v.length : 0);
+  return `${n(s && s.deny)} deny · ${n(s && s.protectedPaths)} paths · scrub ${s && s.envScrub ? 'on' : 'off'}`;
+}
+
+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);
+  return h(doc, 'span', 'badge green grv-origin', 'user');
+}
+
+// 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');
+  for (const s of sets || []) {
+    const card = h(doc, 'section', 'card grv-card');
+    card.dataset.id = s.id;
+    const body = h(doc, 'div', 'grv-body');
+    const head = h(doc, 'div', 'grv-head');
+    head.appendChild(h(doc, 'b', 'grv-name', s.name));
+    head.appendChild(originBadge(doc, s.origin));
+    body.appendChild(head);
+    body.appendChild(h(doc, 'small', 'grv-summary hint', guardrailSummary(s.settings)));
+    card.appendChild(body);
+    if (s.origin !== 'builtin') {
+      const del = h(doc, 'button', 'btn-ghost grv-delete', 'Delete');
+      del.type = 'button';
+      del.dataset.id = s.id;
+      card.appendChild(del);
+    }
+    // Open affordance: a "Details" button on the card's right edge. Keeps the
+    // .grv-edit routing class so app.js's one delegated listener still opens
+    // the editor. Built-ins open a read-only view; user sets open for editing
+    // (the title reflects that; the visible label is the accessible name).
+    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';
+    card.appendChild(open);
+    root.appendChild(card);
+  }
+  if (!sets || !sets.length) {
+    root.appendChild(h(doc, 'div', 'hist-empty', 'No guardrail sets.'));
+  }
+  return root;
+}
+
+// Wizard Step 1: choose a starting point (Blank, a built-in, or a saved set).
+// sources: [{id, name, origin}]. Returns detached DOM; app.js wires .grv-next/.grv-cancel.
+export function renderStartStep(sources, { doc = globalThis.document, selectedId = '' } = {}) {
+  const root = h(doc, 'div', 'grv-wizard grv-step1');
+  root.appendChild(h(doc, 'p', 'hint', 'Choose a starting point'));
+  const list = h(doc, 'div', 'grv-source-list');
+  list.setAttribute('role', 'radiogroup');
+  list.setAttribute('aria-label', 'Starting point');
+  const addRow = (id, label, builtin) => {
+    const row = h(doc, 'label', 'grv-source-row');
+    const radio = h(doc, 'input', 'grv-source');
+    radio.type = 'radio';
+    radio.name = 'grv-source';
+    radio.value = id;
+    if (id === selectedId) radio.checked = true;
+    row.appendChild(radio);
+    row.appendChild(h(doc, 'span', 'grv-source-name', label));
+    if (builtin) row.appendChild(h(doc, 'span', 'badge waiting', 'built-in'));
+    list.appendChild(row);
+  };
+  addRow('', 'Blank (custom)', false);
+  for (const s of sources || []) addRow(s.id, s.name, s.origin === 'builtin');
+  root.appendChild(list);
+  const actions = h(doc, 'div', 'actions grv-wizard-actions');
+  const cancel = h(doc, 'button', 'btn btn-ghost btn-mini grv-cancel', 'Cancel');
+  cancel.type = 'button';
+  const next = h(doc, 'button', 'btn btn-primary btn-mini grv-next', 'Next →');
+  next.type = 'button';
+  actions.appendChild(cancel);
+  actions.appendChild(next);
+  root.appendChild(actions);
+  return root;
+}
+
+export function collectStartStep(rootEl) {
+  const sel = rootEl.querySelector('.grv-source:checked');
+  return sel ? sel.value : '';
+}
+
+function listEditor(doc, cls, entries, placeholder, readOnly = false) {
+  const wrap = h(doc, 'div');
+  const list = h(doc, 'div', `gr-list ${cls}`);
+  for (const v of entries || []) {
+    const row = h(doc, 'div', 'gr-row');
+    row.appendChild(h(doc, 'span', 'mono', v));
+    if (!readOnly) {
+      const rm = h(doc, 'button', 'gr-rm', '✕');
+      rm.type = 'button';
+      rm.dataset.value = v;
+      rm.title = 'Remove';
+      rm.setAttribute('aria-label', 'Remove');
+      row.appendChild(rm);
+    }
+    list.appendChild(row);
+  }
+  if (!entries || !entries.length) list.appendChild(h(doc, 'div', 'gr-empty', 'none'));
+  wrap.appendChild(list);
+  if (readOnly) return wrap; // no add-row in read-only view
+  const add = h(doc, 'div', 'path-row gr-add');
+  add.dataset.list = cls;
+  const input = h(doc, 'input', 'input');
+  input.type = 'text';
+  input.placeholder = placeholder;
+  input.spellcheck = false;
+  add.appendChild(input);
+  const btn = h(doc, 'button', 'btn btn-ghost btn-mini gr-add-btn', '+ add');
+  btn.type = 'button';
+  add.appendChild(btn);
+  wrap.appendChild(add);
+  return wrap;
+}
+
+function switchRow(doc, cls, on, label, readOnly = false) {
+  const row = h(doc, 'div', 'switch-row');
+  const sw = h(doc, 'div', `switch ${cls}${on ? ' on' : ''}${readOnly ? ' disabled' : ''}`);
+  sw.setAttribute('role', 'switch');
+  sw.setAttribute('aria-checked', String(!!on));
+  if (readOnly) sw.setAttribute('aria-disabled', 'true');
+  else sw.tabIndex = 0;
+  row.appendChild(sw);
+  row.appendChild(h(doc, 'span', 'txt', label));
+  return row;
+}
+
+function field(doc, label, child) {
+  const f = h(doc, 'div', 'field');
+  f.appendChild(h(doc, 'label', null, label));
+  f.appendChild(child);
+  return f;
+}
+
+// renderGuardrailEditor(set, {mode}) -> detached editor card (wizard Step 2).
+// mode: 'create' (Back-to-step-1 + "Create set") | 'edit' ("Save") | 'view'
+// (read-only built-in + "Save as new set"). app.js owns state; mutations re-render.
+export function renderGuardrailEditor(set, { doc = globalThis.document, mode = 'edit', dirty = false, msg = '', msgErr = false } = {}) {
+  const s = set.settings || {};
+  const readOnly = mode === 'view';
+  const root = h(doc, 'section', 'card grv-editor');
+  root.dataset.id = set.id || '';
+  root.dataset.mode = mode;
+  const head = h(doc, 'div', 'grv-head');
+  if (mode === 'create') {
+    const back = h(doc, 'button', 'btn btn-mini grv-back', '← Back');
+    back.type = 'button';
+    head.appendChild(back);
+  }
+  if (readOnly) {
+    head.appendChild(h(doc, 'b', 'grv-name', set.name));
+    head.appendChild(h(doc, 'span', 'badge waiting grv-origin', 'built-in'));
+  } else {
+    const name = h(doc, 'input', 'input grv-name-input');
+    name.type = 'text';
+    name.value = set.name || '';
+    name.placeholder = 'Set name';
+    name.spellcheck = false;
+    head.appendChild(name);
+  }
+  root.appendChild(head);
+  root.appendChild(switchRow(doc, 'gr-honor', s.honorProjectSettings, 'Honor project .claude/settings.json', readOnly));
+  root.appendChild(switchRow(doc, 'gr-scrub', s.envScrub, 'Scrub environment on agent spawn', readOnly));
+  root.appendChild(field(doc, 'Env allowlist (passed through when scrub is on)',
+    listEditor(doc, 'gr-allow', s.envAllowlist, 'NPM_TOKEN', readOnly)));
+  root.appendChild(field(doc, 'Protected paths (denies Read/Edit)',
+    listEditor(doc, 'gr-paths', s.protectedPaths, '.env*   |   **/secrets/**', readOnly)));
+  root.appendChild(field(doc, 'Deny rules (pairs: Bash(git push) + Bash(git push:*))',
+    listEditor(doc, 'gr-deny', s.deny, 'Bash(curl:*)', readOnly)));
+  const msgEl = h(doc, 'p', `hint grv-msg${msgErr ? ' err' : ''}`, msg || '');
+  msgEl.setAttribute('role', 'status');
+  msgEl.setAttribute('aria-live', 'polite');
+  root.appendChild(msgEl);
+  const actions = h(doc, 'div', 'actions grv-editor-actions');
+  if (!readOnly) {
+    const discard = h(doc, 'button', 'btn btn-ghost btn-mini grv-discard', 'Discard');
+    discard.type = 'button';
+    discard.disabled = !dirty;
+    actions.appendChild(discard);
+  }
+  const save = h(doc, 'button', 'btn btn-primary btn-mini grv-save',
+    mode === 'create' ? 'Create set' : (mode === 'view' ? 'Save as new set' : 'Save'));
+  save.type = 'button';
+  save.disabled = readOnly ? false : !dirty;
+  actions.appendChild(save);
+  root.appendChild(actions);
+  return root;
+}
+
+// The inverse of renderGuardrailEditor: read the live DOM back into {name, settings}.
+export function collectGuardrailEditor(rootEl) {
+  const nameInput = rootEl.querySelector('.grv-name-input');
+  const nameEl = rootEl.querySelector('.grv-name');
+  const listVals = (cls) =>
+    [...rootEl.querySelectorAll(`.gr-list.${cls} .gr-row .mono`)].map((n) => n.textContent);
+  return {
+    name: nameInput ? nameInput.value.trim() : ((nameEl && nameEl.textContent) || ''),
+    settings: {
+      honorProjectSettings: !!(rootEl.querySelector('.gr-honor') || {}).classList?.contains('on'),
+      envScrub: !!(rootEl.querySelector('.gr-scrub') || {}).classList?.contains('on'),
+      envAllowlist: listVals('gr-allow'),
+      protectedPaths: listVals('gr-paths'),
+      deny: listVals('gr-deny'),
+    },
+  };
+}
+
+// 409 body: who still pins the set ([{id, referencedBy: string[]}] flattened —
+// referencedBy entries are "pipeline <id>" resume-point pins).
+export function renderGuardrailReferences409(references, { doc = globalThis.document } = {}) {
+  const root = h(doc, 'div', 'grv-refs409');
+  root.appendChild(h(doc, 'p', 'hint err', 'Cannot delete: still referenced by'));
+  const list = h(doc, 'div', 'gr-list');
+  for (const r of references || []) {
+    for (const by of (r && Array.isArray(r.referencedBy)) ? r.referencedBy : []) {
+      const row = h(doc, 'div', 'gr-row');
+      row.appendChild(h(doc, 'span', 'mono', by));
+      list.appendChild(row);
+    }
+  }
+  root.appendChild(list);
+  return root;
+}