@worca/app 0.0.1

package/ui/public/log-filter.mjs

@@ -0,0 +1,81 @@
+// ui/public/log-filter.mjs
+
+// Pure, DOM-free log-filtering rules shared by the run-card live log and the
+// History "Live logs" panel. Extracted so the narrowing semantics are
+// unit-testable without booting app.js (mirrors log-line.mjs).
+//
+// A filter is { source, level, step, cycle, search } where '' / undefined means
+// "all". Every axis composes with AND.
+// - level: exact match; a record with no level counts as 'info' (the same
+//   default logLineClass applies when rendering).
+// - source: matches the role itself AND its fanned-out sub-agents — a child
+//   line's source is "role ▸ label", so filtering by "planner" keeps
+//   "planner ▸ research auth" but not "plannerX".
+// - step: matches String(rec.stepIndex). Lines with no step attribution
+//   (preflight, orchestrator, ui notices) only show when no step is chosen.
+// - cycle: matches String(rec.cycle) — the feedback-loop rewind counter, which is
+//   orthogonal to step (a re-run keeps its stepIndex and bumps its cycle). Same
+//   attribution rule as step: cycle-less lines only show when no cycle is chosen.
+// - search: case-insensitive substring of rec.text. Text only — the source column
+//   is already a dropdown, so matching it here would make that filter ambiguous.
+
+const SUB_SEP = ' ▸ ';
+
+/** Compile a filter into a predicate. Per-axis normalization (notably the
+ *  search term's toLowerCase) happens ONCE here instead of once per record —
+ *  a repaint runs the predicate over up to MAX_LOG_LINES records per
+ *  keystroke tick. Same semantics as logLineVisible by construction. */
+export function compileLogFilter(filter) {
+  if (!filter) return () => true;
+  const level = filter.level || '';
+  const source = filter.source || '';
+  const hasStep = filter.step !== undefined && filter.step !== '';
+  const step = hasStep ? String(filter.step) : '';
+  const hasCycle = filter.cycle !== undefined && filter.cycle !== '';
+  const cycle = hasCycle ? String(filter.cycle) : '';
+  const term = filter.search ? String(filter.search).toLowerCase() : '';
+  return (rec) => {
+    if (level && (rec.level || 'info') !== level) return false;
+    if (source) {
+      const src = rec.source || '';
+      if (src !== source && !src.startsWith(source + SUB_SEP)) return false;
+    }
+    if (hasStep && (rec.stepIndex == null || String(rec.stepIndex) !== step)) return false;
+    if (hasCycle && (rec.cycle == null || String(rec.cycle) !== cycle)) return false;
+    if (term && !String(rec.text || '').toLowerCase().includes(term)) return false;
+    return true;
+  };
+}
+
+export function logLineVisible(rec, filter) {
+  return compileLogFilter(filter)(rec);
+}
+
+// Distinct facet values the filter dropdowns offer, from the lines seen so far:
+// sources collapsed to their parent role (sub-agents fold into the role they
+// belong to), levels defaulted to 'info', steps = the stepIndex values present,
+// cycles = the cycle values present. All sorted (steps/cycles numerically) for
+// stable dropdowns. `search` is free text and has no facet.
+export function logFacets(lines) {
+  const sources = new Set();
+  const levels = new Set();
+  const steps = new Set();
+  const cycles = new Set();
+  for (const rec of lines || []) {
+    if (!rec) continue;
+    const src = rec.source || '';
+    if (src) {
+      const sep = src.indexOf(SUB_SEP);
+      sources.add(sep === -1 ? src : src.slice(0, sep));
+    }
+    levels.add(rec.level || 'info');
+    if (rec.stepIndex != null) steps.add(rec.stepIndex);
+    if (rec.cycle != null) cycles.add(rec.cycle);
+  }
+  return {
+    sources: [...sources].sort(),
+    levels: [...levels].sort(),
+    steps: [...steps].sort((a, b) => a - b),
+    cycles: [...cycles].sort((a, b) => a - b),
+  };
+}

package/ui/public/log-line.mjs

@@ -0,0 +1,86 @@
+// ui/public/log-line.mjs
+
+// Pure, DOM-free: the className for one log line, given its level and whether it
+// belongs to a fanned-out sub-agent. Extracted so the sub-agent styling decision
+// is unit-testable without booting app.js (mirrors composer-core.mjs).
+export function logLineClass(level, sub) {
+  return 'log-line lvl-' + (level || 'info') + (sub ? ' sub-agent' : '');
+}
+
+/** Local wall-clock hh:mm:ss for a log record's ts (ISO string or epoch ms).
+ *  Shared by the rendered line and the clipboard serializer so a copied log
+ *  reads exactly like the pane it came from. */
+export function logLineTime(ts) {
+  const d = ts ? new Date(ts) : new Date();
+  const hh = String(d.getHours()).padStart(2, '0');
+  const mm = String(d.getMinutes()).padStart(2, '0');
+  const ss = String(d.getSeconds()).padStart(2, '0');
+  return `${hh}:${mm}:${ss}`;
+}
+
+/** One log record as plain text, in the same order the DOM line renders it:
+ *  `<hh:mm:ss> [source] text`. The pane spaces its ts/src/msg spans with a flex
+ *  `gap` rather than whitespace, so a native selection-copy would run them
+ *  together — the copy affordance serializes from the model through here
+ *  instead of reading the DOM. */
+export function logLineText(rec) {
+  if (!rec) return '';
+  const src = rec.source ? `[${rec.source}] ` : '';
+  return `${logLineTime(rec.ts)} ${src}${rec.text == null ? '' : String(rec.text)}`;
+}
+
+/** A whole (already filtered) sequence of records as newline-joined text, with
+ *  the SAME "Cycle N" rules the pane draws (one cycleSeparatorBefore walk) —
+ *  without them a copied re-run repeats its steps with no visible boundary.
+ *  Rendered as `── Cycle N ──`: the pane's rule lines are CSS, plain text
+ *  needs the dashes. */
+export function serializeLog(recs) {
+  const out = [];
+  let prevCycle = null;
+  for (const rec of recs || []) {
+    if (!rec) continue;
+    const sep = cycleSeparatorBefore(prevCycle, rec);
+    if (sep) out.push(`── ${sep} ──`);
+    if (rec.cycle != null) prevCycle = rec.cycle;
+    out.push(logLineText(rec));
+  }
+  return out.join('\n');
+}
+
+/** One persisted NDJSON record projected to the UI log-record shape. EVERY
+ *  consumer of the persisted log goes through here — the live-card resume seed
+ *  and the History replay must agree on which fields survive, or an axis works
+ *  in one pane while silently dead in the other (`cycle` was dropped by one of
+ *  three hand-rolled copies of this projection). `cycle` drives the cycle
+ *  picker AND the "── Cycle N ──" separators; `stream` is stderr provenance.
+ *  Absent attribution stays ABSENT (the filters test `!= null`). */
+export function projectLogRecord(rec) {
+  return {
+    source: rec.source, level: rec.level, text: rec.text, ts: rec.ts, sub: !!rec.sub,
+    ...(rec.stepIndex != null ? { stepIndex: rec.stepIndex } : {}),
+    ...(rec.cycle != null ? { cycle: rec.cycle } : {}),
+    ...(rec.stream ? { stream: rec.stream } : {}),
+  };
+}
+
+/**
+ * The separator label to draw BEFORE `rec`, or null for none.
+ *
+ * `cycle` is the feedback-loop rewind counter: when a reviewer returns blocking
+ * issues the pipeline rewinds and re-runs the same steps with cycle+1, so a
+ * re-run is otherwise indistinguishable from its first pass. A rule drawn at the
+ * boundary makes that legible without the reader having to filter for it.
+ *
+ * `prevCycle` is the cycle of the last RENDERED record that HAD one — the
+ * caller carries it past cycle-less notices (artifact events, git/orchestrator
+ * lines), which land exactly at rewind boundaries and must not mask them. It
+ * must come from rendered records, not the model, so a filter that hides an
+ * entire cycle cannot orphan a separator. null (no cycled record rendered yet)
+ * yields null: no leading "Cycle 1" header.
+ */
+export function cycleSeparatorBefore(prevCycle, rec) {
+  if (!rec || rec.cycle == null) return null;
+  if (prevCycle == null) return null;
+  if (String(prevCycle) === String(rec.cycle)) return null;
+  return `Cycle ${rec.cycle}`;
+}

package/ui/public/models-view.mjs

@@ -0,0 +1,433 @@
+// ui/public/models-view.mjs
+// Pure DOM renderers for the Models view (configurable-models-design.md §4.10).
+// Mirrors guardrails-view.mjs: every function takes `doc` via opts (defaults to
+// the browser global) and returns DETACHED elements — no fetch, no listeners
+// outside the returned tree. app.js owns endpoint calls and mounting.
+// Interactive elements carry data-id + a routing class (mv-edit, mv-delete,
+// mv-promote, mv-save, mv-cancel, mv-env-add, mv-env-rm) 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;
+}
+
+/** "medium · high" or "all efforts" (the full set carries no signal). */
+export function effortsSummary(efforts, allEfforts) {
+  const list = Array.isArray(efforts) ? efforts : [];
+  if (!list.length || (allEfforts && list.length === allEfforts.length)) return 'all efforts';
+  return list.join(' · ');
+}
+
+/** "2 env vars · routes via base URL" | "1 env var" | '' (none). */
+export function envSummary(env) {
+  const keys = Object.keys(env || {});
+  if (!keys.length) return '';
+  const n = `${keys.length} env var${keys.length === 1 ? '' : 's'}`;
+  return keys.includes('ANTHROPIC_BASE_URL') ? `${n} · routes via base URL` : n;
+}
+
+/**
+ * The Models view body: global entries (editable), the selected project's
+ * legacy custom models (promotable), and the built-in catalog (read-only).
+ * `globals` come MASKED from GET /api/models. `predefinedShadowedIds` marks
+ * built-ins currently overridden by a global entry.
+ */
+export function renderModelsList({ globals = [], legacy = [], plugins = [], predefined = [], efforts = [], projectName = '' } = {}, { doc = globalThis.document } = {}) {
+  const root = h(doc, 'div', 'mv-list');
+  const predefLc = new Set(predefined.map((m) => m.id.toLowerCase()));
+  const pluginLc = new Set(plugins.map((m) => m.id.toLowerCase()));
+
+  const section = (title, hint) => {
+    const s = h(doc, 'div', 'mv-section');
+    s.appendChild(h(doc, 'h3', 'mv-section-title', title));
+    if (hint) s.appendChild(h(doc, 'small', 'hint', hint));
+    return s;
+  };
+
+  // ── Your models (global) ──
+  const yours = section('Your models', 'Defined once, available in every project. An entry with a built-in id overrides that built-in.');
+  if (!globals.length) {
+    yours.appendChild(h(doc, 'div', 'hist-empty', 'No global models yet — Add model to define one.'));
+  }
+  for (const m of globals) {
+    const card = h(doc, 'section', 'card mv-card');
+    card.dataset.id = m.id;
+    const body = h(doc, 'div', 'mv-body');
+    const head = h(doc, 'div', 'mv-head');
+    head.appendChild(h(doc, 'b', 'mv-name', m.label || m.id));
+    if (predefLc.has(m.id.toLowerCase())) head.appendChild(h(doc, 'span', 'badge violet mv-shadow', 'overrides built-in'));
+    else if (pluginLc.has(m.id.toLowerCase())) head.appendChild(h(doc, 'span', 'badge violet mv-shadow', 'overrides plugin'));
+    if (m.costUnreliable) head.appendChild(h(doc, 'span', 'badge waiting mv-cost', 'cost not verified'));
+    body.appendChild(head);
+    const bits = [m.id, effortsSummary(m.efforts, efforts), envSummary(m.env)].filter(Boolean);
+    body.appendChild(h(doc, 'small', 'mv-summary hint', bits.join(' — ')));
+    card.appendChild(body);
+    const del = h(doc, 'button', 'btn-ghost mv-delete', 'Delete');
+    del.type = 'button'; del.dataset.id = m.id;
+    card.appendChild(del);
+    const edit = h(doc, 'button', 'btn-ghost mv-edit', 'Edit');
+    edit.type = 'button'; edit.dataset.id = m.id;
+    card.appendChild(edit);
+    yours.appendChild(card);
+  }
+  root.appendChild(yours);
+
+  // ── Legacy per-project models (promotable) ──
+  if (legacy.length) {
+    const leg = section(
+      `Project models${projectName ? ` — ${projectName}` : ''} (legacy)`,
+      'Defined only for this project. Promote to make them global; the id keeps working everywhere it is referenced.'
+    );
+    for (const m of legacy) {
+      const card = h(doc, 'section', 'card mv-card mv-legacy');
+      card.dataset.id = m.id;
+      const body = h(doc, 'div', 'mv-body');
+      const head = h(doc, 'div', 'mv-head');
+      head.appendChild(h(doc, 'b', 'mv-name', m.label || m.id));
+      head.appendChild(h(doc, 'span', 'badge waiting mv-origin', 'project (legacy)'));
+      body.appendChild(head);
+      body.appendChild(h(doc, 'small', 'mv-summary hint', m.id));
+      card.appendChild(body);
+      const promote = h(doc, 'button', 'btn-ghost mv-promote', 'Promote to global');
+      promote.type = 'button'; promote.dataset.id = m.id;
+      card.appendChild(promote);
+      leg.appendChild(card);
+    }
+    root.appendChild(leg);
+  }
+
+  // ── From plugins (read-only; design §9.6) ──
+  const globalLc = new Set(globals.map((m) => m.id.toLowerCase()));
+  if (plugins.length) {
+    const plug = section('From plugins',
+      'Installed by plugins — read-only and updated with the plugin. "Edit a copy" clones one into Your models, which then overrides it.');
+    for (const m of plugins) {
+      const card = h(doc, 'section', 'card mv-card mv-plugin');
+      card.dataset.id = m.id;
+      card.dataset.plugin = m.plugin;
+      const body = h(doc, 'div', 'mv-body');
+      const head = h(doc, 'div', 'mv-head');
+      head.appendChild(h(doc, 'b', 'mv-name', m.label || m.id));
+      head.appendChild(h(doc, 'span', 'badge waiting mv-origin', `plugin: ${m.plugin}`));
+      if (globalLc.has(m.id.toLowerCase())) head.appendChild(h(doc, 'span', 'badge violet mv-shadowed', 'overridden by your copy'));
+      if (m.costUnreliable) head.appendChild(h(doc, 'span', 'badge waiting mv-cost', 'cost not verified'));
+      body.appendChild(head);
+      const bits = [m.id, effortsSummary(m.efforts, efforts), envSummary(m.env)].filter(Boolean);
+      body.appendChild(h(doc, 'small', 'mv-summary hint', bits.join(' — ')));
+      for (const s of m.secrets || []) {
+        body.appendChild(h(doc, 'small', `mv-secret hint${s.set ? '' : ' err'}`,
+          s.set ? `secret ${s.key}: set` : `secret ${s.key}: NOT SET — configure it in the plugin's settings`));
+      }
+      card.appendChild(body);
+      const copy = h(doc, 'button', 'btn-ghost mv-copy', 'Edit a copy');
+      copy.type = 'button'; copy.dataset.id = m.id; copy.dataset.plugin = m.plugin;
+      card.appendChild(copy);
+      plug.appendChild(card);
+    }
+    root.appendChild(plug);
+  }
+
+  // ── Built-ins (read-only) ──
+  const builtins = section('Built-in models', 'Shipped with worca. Add a model with the same id to override its label, efforts, or routing.');
+  for (const m of predefined) {
+    const row = h(doc, 'div', 'mv-builtin');
+    row.dataset.id = m.id;
+    row.appendChild(h(doc, 'b', 'mv-name', m.label));
+    if (globalLc.has(m.id.toLowerCase()) || pluginLc.has(m.id.toLowerCase())) {
+      row.appendChild(h(doc, 'span', 'badge violet mv-shadowed', 'overridden'));
+    }
+    row.appendChild(h(doc, 'small', 'mv-summary hint', `${m.id} — ${effortsSummary(m.efforts, efforts)}`));
+    builtins.appendChild(row);
+  }
+  root.appendChild(builtins);
+  return root;
+}
+
+/** One env key/value editor row. Existing values arrive MASKED; leaving a
+ *  masked value untouched means "keep" (the server drops masked echoes).
+ *  STORED rows (a key was persisted) also get a copy button that fetches the
+ *  RAW value — the user owns it on disk anyway (design note: same trust
+ *  boundary as ~/.worca-cc/settings.json, made deliberate by the click). */
+function envRow(doc, key = '', value = '') {
+  const row = h(doc, 'div', 'mv-env-row');
+  const k = h(doc, 'input', 'input mv-env-key');
+  k.type = 'text'; k.placeholder = 'ANTHROPIC_BASE_URL'; k.value = key;
+  const v = h(doc, 'input', 'input mv-env-val');
+  v.type = 'text'; v.placeholder = 'value, or ${VAR} to read your shell env'; v.value = value;
+  if (value) v.dataset.original = value; // masked echo detection on collect
+  row.appendChild(k); row.appendChild(v);
+  if (key) {
+    // The STORED key, frozen at render time — the copy must reveal what is on
+    // disk even after the user edits the key input.
+    row.dataset.key = key;
+    const cp = h(doc, 'button', 'btn-ghost mv-env-copy', '⧉');
+    cp.type = 'button';
+    cp.title = 'Copy the real (unmasked) value';
+    row.appendChild(cp);
+  }
+  const rm = h(doc, 'button', 'btn-ghost mv-env-rm', '✕');
+  rm.type = 'button';
+  row.appendChild(rm);
+  return row;
+}
+
+/**
+ * The add/edit form. `model` is a MASKED global entry, or null for create.
+ * Returns detached DOM; app.js wires mv-save / mv-cancel / mv-env-add /
+ * mv-env-rm and calls collectModelEditor on save.
+ */
+export function renderModelEditor(model, efforts, { doc = globalThis.document } = {}) {
+  const editing = !!model;
+  const root = h(doc, 'section', 'card mv-editor');
+  root.dataset.mode = editing ? 'edit' : 'create';
+  if (editing) {
+    root.dataset.id = model.id;
+    // The stored env keys, so collect can send null (= delete) for rows the
+    // user removed — the write-only PATCH can't infer deletions otherwise.
+    root.dataset.envKeys = Object.keys(model.env || {}).join('\n');
+  }
+  root.appendChild(h(doc, 'h3', 'mv-editor-title', editing ? `Edit ${model.label || model.id}` : 'Add model'));
+
+  const grid = h(doc, 'div', 'mv-editor-grid');
+  const field = (labelText, input, hint) => {
+    const wrap = h(doc, 'label', 'mv-field');
+    wrap.appendChild(h(doc, 'span', 'mv-field-label', labelText));
+    wrap.appendChild(input);
+    if (hint) wrap.appendChild(h(doc, 'small', 'hint', hint));
+    return wrap;
+  };
+
+  const idInput = h(doc, 'input', 'input mv-id');
+  idInput.type = 'text';
+  idInput.placeholder = 'claude-opus-4-8, glm-4.7, a fine-tune id…';
+  idInput.value = editing ? model.id : '';
+  idInput.disabled = editing; // the id IS the reference — delete + re-add to rename
+  grid.appendChild(field('Model id (passed to claude --model)', idInput,
+    editing ? '' : 'Use a built-in id to override that built-in.'));
+
+  const labelInput = h(doc, 'input', 'input mv-label');
+  labelInput.type = 'text';
+  labelInput.placeholder = 'Display name (defaults to the id)';
+  labelInput.value = editing ? (model.label === model.id ? '' : model.label) : '';
+  grid.appendChild(field('Label', labelInput));
+
+  const effWrap = h(doc, 'div', 'mv-efforts');
+  const selected = new Set(editing && Array.isArray(model.efforts) ? model.efforts : efforts);
+  for (const e of efforts) {
+    const lab = h(doc, 'label', 'mv-effort');
+    const cb = h(doc, 'input', 'mv-effort-cb');
+    cb.type = 'checkbox'; cb.value = e; cb.checked = selected.has(e);
+    lab.appendChild(cb);
+    lab.appendChild(h(doc, 'span', null, e));
+    effWrap.appendChild(lab);
+  }
+  grid.appendChild(field('Supported efforts', effWrap, 'All checked = every effort (the default).'));
+
+  const envWrap = h(doc, 'div', 'mv-env');
+  const rows = editing && model.env ? Object.entries(model.env) : [];
+  for (const [k, v] of rows) envWrap.appendChild(envRow(doc, k, v));
+  const add = h(doc, 'button', 'btn-ghost mv-env-add', '+ env var');
+  add.type = 'button';
+  grid.appendChild(field('Routing env (merged into the claude spawn for this model)', envWrap,
+    'e.g. ANTHROPIC_BASE_URL / ANTHROPIC_AUTH_TOKEN. Stored values show masked; leave masked to keep. WORCA_* and process keys are reserved.'));
+  const envBtns = h(doc, 'div', 'mv-env-btns');
+  envBtns.appendChild(add);
+  if (rows.length) {
+    // Reveal toggle: swaps the masked inputs to the REAL stored values (the
+    // user owns them on disk in ~/.worca-cc/settings.json). app.js wires it.
+    const reveal = h(doc, 'button', 'btn-ghost mv-env-reveal', 'Show values');
+    reveal.type = 'button';
+    reveal.title = 'Reveal the real stored values';
+    envBtns.appendChild(reveal);
+  }
+  grid.appendChild(envBtns);
+
+  root.appendChild(grid);
+  const msg = h(doc, 'p', 'form-msg mv-editor-msg');
+  msg.setAttribute('aria-live', 'polite');
+  root.appendChild(msg);
+
+  const btns = h(doc, 'div', 'mv-editor-btns');
+  const save = h(doc, 'button', 'btn-go mv-save', editing ? 'Save' : 'Add model');
+  save.type = 'button';
+  const cancel = h(doc, 'button', 'btn-ghost mv-cancel', 'Cancel');
+  cancel.type = 'button';
+  btns.appendChild(save); btns.appendChild(cancel);
+  root.appendChild(btns);
+  return root;
+}
+
+/** app.js exposes envRow creation to the delegated mv-env-add handler. */
+export function makeEnvRow({ doc = globalThis.document } = {}) {
+  return envRow(doc);
+}
+
+/**
+ * Collect the editor into a request body. For EDIT mode the env is a write-only
+ * PATCH: unchanged masked values are echoed (the server treats them as "keep"),
+ * removed keys are sent as null. Returns { id, body } — id is null in create
+ * mode (POST carries it in the body instead).
+ */
+export function collectModelEditor(rootEl) {
+  const editing = rootEl.dataset.mode === 'edit';
+  const id = editing ? rootEl.dataset.id : (rootEl.querySelector('.mv-id')?.value || '').trim();
+  const label = (rootEl.querySelector('.mv-label')?.value || '').trim();
+  const efforts = [...rootEl.querySelectorAll('.mv-effort-cb')].filter((c) => c.checked).map((c) => c.value);
+  const allCount = rootEl.querySelectorAll('.mv-effort-cb').length;
+
+  const env = {};
+  const seen = new Set();
+  for (const row of rootEl.querySelectorAll('.mv-env-row')) {
+    const k = (row.querySelector('.mv-env-key')?.value || '').trim();
+    const v = row.querySelector('.mv-env-val')?.value ?? '';
+    if (!k) continue;
+    seen.add(k);
+    env[k] = v;
+  }
+  if (editing) {
+    // Keys the stored entry had but the editor no longer shows -> delete (null).
+    for (const k of (rootEl.dataset.envKeys || '').split('\n').filter(Boolean)) {
+      if (!seen.has(k)) env[k] = null;
+    }
+  }
+
+  const body = {
+    ...(editing ? {} : { id }),
+    label,
+    // All boxes checked = the full set = store the default (empty).
+    efforts: efforts.length === allCount ? [] : efforts,
+    env,
+  };
+  return { id: editing ? id : null, body };
+}
+
+// ── Share-as-plugin export wizard (design §9.5) ─────────────────────────────
+
+// Credential-looking env keys default to "Require at install". Word-ish
+// boundaries keep limits like MAX_OUTPUT_TOKENS or MAX_THINKING_TOKENS (a
+// count, not a credential) out of the net.
+const SECRETISH_RE = /auth|secret|password|credential|api_?key|(?:^|_)key(?:_|$)|(?:^|_)token(?:_|$)/i;
+
+/**
+ * The export wizard: pick global models, set the per-env-key policy, name the
+ * plugin, choose a destination folder. `globals` are MASKED entries from
+ * GET /api/models (only KEYS matter here — values are read server-side at
+ * export). Detached DOM; app.js wires mvx-export / mvx-cancel.
+ */
+export function renderExportWizard(globals, { doc = globalThis.document } = {}) {
+  const root = h(doc, 'section', 'card mv-editor mvx');
+  root.appendChild(h(doc, 'h3', 'mv-editor-title', 'Share models as a plugin'));
+
+  const step = (title, hint) => {
+    const s = h(doc, 'div', 'mvx-step');
+    s.appendChild(h(doc, 'h4', 'mvx-step-title', title));
+    if (hint) s.appendChild(h(doc, 'small', 'hint', hint));
+    root.appendChild(s);
+    return s;
+  };
+
+  const pick = step('1 — Models to include', 'Only your global models can be shared.');
+  for (const m of globals) {
+    const lab = h(doc, 'label', 'mvx-model');
+    const cb = h(doc, 'input', 'mvx-model-cb');
+    cb.type = 'checkbox'; cb.value = m.id;
+    cb.dataset.envKeys = Object.keys(m.env || {}).join('\n');
+    lab.appendChild(cb);
+    lab.appendChild(h(doc, 'span', null, `${m.label || m.id} `));
+    lab.appendChild(h(doc, 'small', 'hint', m.id));
+    pick.appendChild(lab);
+  }
+  if (!globals.length) pick.appendChild(h(doc, 'div', 'hist-empty', 'No global models to share yet.'));
+
+  const envKeys = [...new Set(globals.flatMap((m) => Object.keys(m.env || {})))];
+  const pol = step('2 — Env var policy',
+    'Include value commits the stored value to the plugin (it will live in a git repo). ' +
+    'Require at install strips it — teammates are prompted once and the value stays on their machine.');
+  for (const k of envKeys) {
+    const row = h(doc, 'div', 'mvx-env-row');
+    row.dataset.key = k;
+    row.appendChild(h(doc, 'span', 'mono mvx-env-key', k));
+    const sel = h(doc, 'select', 'select mvx-mode');
+    for (const [v, label] of [['include', 'Include value'], ['secret', 'Require at install'], ['omit', 'Omit']]) {
+      const opt = h(doc, 'option', null, label);
+      opt.value = v;
+      sel.appendChild(opt);
+    }
+    sel.value = SECRETISH_RE.test(k) ? 'secret' : 'include';
+    row.appendChild(sel);
+    if (SECRETISH_RE.test(k)) row.appendChild(h(doc, 'small', 'hint mvx-warn', 'looks like a credential'));
+    pol.appendChild(row);
+  }
+  if (!envKeys.length) pol.appendChild(h(doc, 'small', 'hint', 'No env vars on your models — nothing to decide.'));
+
+  const meta = step('3 — Plugin metadata + destination');
+  const field = (labelText, cls, placeholder, hint) => {
+    const wrap = h(doc, 'label', 'mv-field');
+    wrap.appendChild(h(doc, 'span', 'mv-field-label', labelText));
+    const input = h(doc, 'input', `input ${cls}`);
+    input.type = 'text'; input.placeholder = placeholder;
+    wrap.appendChild(input);
+    if (hint) wrap.appendChild(h(doc, 'small', 'hint', hint));
+    meta.appendChild(wrap);
+    return input;
+  };
+  field('Plugin name', 'mvx-name', 'discretestack-models', 'kebab-case; becomes the folder + install name');
+  field('Description', 'mvx-desc', 'Team routing for …');
+  field('Version', 'mvx-version', '0.1.0');
+  field('Destination folder', 'mvx-dest', '~/dev/discretestack-models',
+    'Must be new or empty. The scaffold goes here — git init + push it to share.');
+
+  const msg = h(doc, 'p', 'form-msg mvx-msg');
+  msg.setAttribute('aria-live', 'polite');
+  root.appendChild(msg);
+  const btns = h(doc, 'div', 'mv-editor-btns');
+  const go = h(doc, 'button', 'btn-go mvx-export', 'Export scaffold');
+  go.type = 'button';
+  const cancel = h(doc, 'button', 'btn-ghost mvx-cancel', 'Cancel');
+  cancel.type = 'button';
+  btns.appendChild(go); btns.appendChild(cancel);
+  root.appendChild(btns);
+  return root;
+}
+
+/** Collect the wizard into the POST /api/models/export-plugin body. */
+export function collectExportWizard(rootEl) {
+  const modes = {};
+  for (const row of rootEl.querySelectorAll('.mvx-env-row')) {
+    modes[row.dataset.key] = row.querySelector('.mvx-mode')?.value || 'include';
+  }
+  const models = [...rootEl.querySelectorAll('.mvx-model-cb')]
+    .filter((cb) => cb.checked)
+    .map((cb) => ({
+      id: cb.value,
+      env: Object.fromEntries((cb.dataset.envKeys || '').split('\n').filter(Boolean)
+        .map((k) => [k, modes[k] || 'include'])),
+    }));
+  const val = (cls) => (rootEl.querySelector(`.${cls}`)?.value || '').trim();
+  return {
+    name: val('mvx-name'),
+    description: val('mvx-desc'),
+    ...(val('mvx-version') ? { version: val('mvx-version') } : {}),
+    dest: val('mvx-dest'),
+    models,
+  };
+}
+
+/** Human summary of what deleting `id` clears, for the confirmation prompt. */
+export function deleteRefsSummary(id, refs) {
+  if (refs && refs.predefinedShadow) {
+    return `Remove the override of built-in "${id}"? The built-in entry comes back; nothing else changes.`;
+  }
+  const nodes = refs && Array.isArray(refs.nodes) ? refs.nodes.length : 0;
+  const steps = refs && Array.isArray(refs.steps) ? refs.steps.length : 0;
+  const projects = new Set([
+    ...((refs && refs.nodes) || []).map((n) => n.projectKey),
+    ...((refs && refs.steps) || []).map((s) => s.projectKey),
+  ]).size;
+  if (!nodes && !steps) return `Delete model "${id}"? No pipeline configuration references it.`;
+  return `Delete model "${id}"? This also clears ${nodes} node selection${nodes === 1 ? '' : 's'} and ` +
+    `${steps} role selection${steps === 1 ? '' : 's'} across ${projects} project${projects === 1 ? '' : 's'}.`;
+}