@worca/app 1.0.0 → 1.1.1

package/ui/public/log-filter.mjs

@@ -4,8 +4,8 @@
 // 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.
+// A filter is { source, level, step, node, execution, 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
@@ -13,6 +13,10 @@
 //   "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.
+// - node: matches String(rec.nodeId) — the v2 graph node the line was attributed
+//   to; attribution-less lines only show when no node is chosen.
+// - execution: matches String(rec.executionId) — ONE execution of one node
+//   (x:<nodeId>:<ordinal>), so a loop's second cycle can be read alone.
 // - 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.
@@ -31,6 +35,10 @@ export function compileLogFilter(filter) {
   const source = filter.source || '';
   const hasStep = filter.step !== undefined && filter.step !== '';
   const step = hasStep ? String(filter.step) : '';
+  const hasNode = filter.node !== undefined && filter.node !== '';
+  const node = hasNode ? String(filter.node) : '';
+  const hasExec = filter.execution !== undefined && filter.execution !== '';
+  const execution = hasExec ? String(filter.execution) : '';
   const hasCycle = filter.cycle !== undefined && filter.cycle !== '';
   const cycle = hasCycle ? String(filter.cycle) : '';
   const term = filter.search ? String(filter.search).toLowerCase() : '';
@@ -41,6 +49,8 @@ export function compileLogFilter(filter) {
       if (src !== source && !src.startsWith(source + SUB_SEP)) return false;
     }
     if (hasStep && (rec.stepIndex == null || String(rec.stepIndex) !== step)) return false;
+    if (hasNode && (rec.nodeId == null || String(rec.nodeId) !== node)) return false;
+    if (hasExec && (rec.executionId == null || String(rec.executionId) !== execution)) 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;
@@ -54,13 +64,17 @@ export function logLineVisible(rec, filter) {
 // 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.
+// cycles = the cycle values present, nodes = the v2 nodeId values present,
+// executions = the v2 executionId values present. All sorted (steps/cycles
+// numerically, ids lexically) 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();
+  const nodes = new Set();
+  const executions = new Set();
   for (const rec of lines || []) {
     if (!rec) continue;
     const src = rec.source || '';
@@ -71,11 +85,15 @@ export function logFacets(lines) {
     levels.add(rec.level || 'info');
     if (rec.stepIndex != null) steps.add(rec.stepIndex);
     if (rec.cycle != null) cycles.add(rec.cycle);
+    if (rec.nodeId != null) nodes.add(rec.nodeId);
+    if (rec.executionId != null) executions.add(rec.executionId);
   }
   return {
     sources: [...sources].sort(),
     levels: [...levels].sort(),
     steps: [...steps].sort((a, b) => a - b),
     cycles: [...cycles].sort((a, b) => a - b),
+    nodes: [...nodes].sort(),
+    executions: [...executions].sort(),
   };
 }

package/ui/public/log-line.mjs

@@ -36,12 +36,11 @@ export function logLineText(rec) {
  *  needs the dashes. */
 export function serializeLog(recs) {
   const out = [];
-  let prevCycle = null;
+  const state = newCycleState();
   for (const rec of recs || []) {
     if (!rec) continue;
-    const sep = cycleSeparatorBefore(prevCycle, rec);
+    const sep = cycleSeparatorBefore(state, rec);
     if (sep) out.push(`── ${sep} ──`);
-    if (rec.cycle != null) prevCycle = rec.cycle;
     out.push(logLineText(rec));
   }
   return out.join('\n');
@@ -52,35 +51,62 @@ export function serializeLog(recs) {
  *  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`). */
+ *  picker AND the "── Cycle N ──" separators; `stream` is stderr provenance;
+ *  `nodeId` / `executionId` (v2 graph runs) drive the node select and the
+ *  execution chip. 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.nodeId != null ? { nodeId: rec.nodeId } : {}),
+    ...(rec.executionId != null ? { executionId: rec.executionId } : {}),
     ...(rec.stream ? { stream: rec.stream } : {}),
   };
 }
 
+/** The separator cursor: nodeId -> the HIGHEST ordinal rendered for that node
+ *  so far ('' buckets a record with no nodeId — orchestrator notices, and every
+ *  v1-shaped log). One per pane, carried across a filter repaint so a live
+ *  append after one agrees with it. */
+export function newCycleState() {
+  return new Map();
+}
+
 /**
- * The separator label to draw BEFORE `rec`, or null for none.
+ * The separator label to draw BEFORE `rec`, or null for none — and the ONE
+ * place `state` advances.
+ *
+ * In v2 `cycle` is the PER-NODE ordinal (`orchestrator.mjs` stamps
+ * `cycle: ctx.ordinal` beside `nodeId`), NOT v1's pipeline-wide rewind counter.
+ * Two nodes stream concurrently at unrelated ordinals, so comparing `rec.cycle`
+ * to "the last cycle rendered by ANY node" drew a rule on nearly every
+ * alternation (MIN-37). The rule belongs where a NODE re-runs: `rec.cycle`
+ * strictly exceeds the highest ordinal that node has already rendered.
+ *
+ * Consequences that are deliberate:
+ *   · a node's FIRST line never gets a header, whatever its ordinal — so a node
+ *     that starts late at ordinal 1 draws nothing;
+ *   · alternation between nodes draws nothing;
+ *   · a cycle-less notice (artifact event, git line) landing exactly at a
+ *     boundary neither draws nor masks a rule — it does not touch the state.
  *
- * `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.
+ * The state must be advanced from RENDERED records only, never from the model,
+ * so a filter that hides an entire cycle cannot orphan a separator.
  *
- * `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.
+ * @param {Map<string, number>} state from newCycleState(); mutated in place
+ * @param {object|null} rec
+ * @returns {string|null}
  */
-export function cycleSeparatorBefore(prevCycle, rec) {
+export function cycleSeparatorBefore(state, rec) {
   if (!rec || rec.cycle == null) return null;
-  if (prevCycle == null) return null;
-  if (String(prevCycle) === String(rec.cycle)) return null;
+  const seen = state instanceof Map ? state : null;
+  if (!seen) return null;
+  const key = rec.nodeId == null ? '' : String(rec.nodeId);
+  const n = Number(rec.cycle);
+  if (!Number.isFinite(n)) return null;
+  const last = seen.get(key);
+  seen.set(key, last == null ? n : Math.max(last, n));
+  if (last == null || n <= last) return null;
   return `Cycle ${rec.cycle}`;
 }

package/ui/public/models-view.mjs

@@ -29,6 +29,48 @@ export function envSummary(env) {
   return keys.includes('ANTHROPIC_BASE_URL') ? `${n} · routes via base URL` : n;
 }
 
+/** The per-Mtok rate keys, in editor order, with their display labels. Mirrors
+ *  settings.mjs COST_RATE_KEYS — the server is the validator, this is the form. */
+export const COST_RATES = [
+  ['input', 'Input'],
+  ['output', 'Output'],
+  ['cacheRead', 'Cache read'],
+  ['cacheWrite', 'Cache write (5m)'],
+  ['cacheWrite1h', 'Cache write (1h)'],
+];
+
+/** One-line pricing summary for a card, or '' when the model has no override
+ *  (the overwhelming default — the CLI's own figure is trusted). */
+export function costSummary(cost) {
+  if (!cost || typeof cost !== 'object') return '';
+  if (cost.free) return 'priced free';
+  const p = cost.perMtok;
+  if (!p || typeof p !== 'object') return '';
+  const set = COST_RATES.filter(([k]) => p[k] != null);
+  if (!set.length) return '';
+  return `${set.map(([k, lab]) => `${lab.toLowerCase()} $${p[k]}`).join(' · ')} /Mtok`;
+}
+
+/**
+ * A free id for a duplicate of `id`: `<id>-copy`, then `-copy-2`, `-copy-3`…
+ * Compared case-insensitively against EVERY id the catalog knows (global,
+ * plugin, built-in, legacy) — the add would be rejected for colliding with any
+ * of them, and a suggestion the server refuses is worse than no suggestion.
+ * @param {string} id  the source model's id
+ * @param {Iterable<string>} takenIds
+ * @returns {string}
+ */
+export function suggestDuplicateId(id, takenIds = []) {
+  const taken = new Set([...takenIds].map((t) => String(t).toLowerCase()));
+  const base = `${id}-copy`;
+  if (!taken.has(base.toLowerCase())) return base;
+  for (let n = 2; n < 1000; n += 1) {
+    const c = `${base}-${n}`;
+    if (!taken.has(c.toLowerCase())) return c;
+  }
+  return base; // 998 copies of one model: let the server reject the duplicate
+}
+
 /**
  * The Models view body: global entries (editable), the selected project's
  * legacy custom models (promotable), and the built-in catalog (read-only).
@@ -60,10 +102,15 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], pred
     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'));
+    // The §4.6 "unreliable" badge is meaningless once an override GOVERNS this
+    // model's spend — and the backend only lifts the stored flag on the model's
+    // next result event, so suppress it here the moment pricing is pinned.
+    if (m.costUnreliable && !m.cost) head.appendChild(h(doc, 'span', 'badge waiting mv-cost', 'cost not verified'));
+    if (m.cost) head.appendChild(h(doc, 'span', 'badge violet mv-cost-pinned', m.cost.free ? 'free' : 'priced'));
     body.appendChild(head);
-    const bits = [m.id, effortsSummary(m.efforts, efforts), envSummary(m.env)].filter(Boolean);
+    const bits = [m.id, effortsSummary(m.efforts, efforts), envSummary(m.env), costSummary(m.cost)].filter(Boolean);
     body.appendChild(h(doc, 'small', 'mv-summary hint', bits.join(' — ')));
+    body.appendChild(h(doc, 'small', 'mv-test-result hint')); // app.js paints the Test outcome here
     card.appendChild(body);
     const del = h(doc, 'button', 'btn-ghost mv-delete', 'Delete');
     del.type = 'button'; del.dataset.id = m.id;
@@ -71,6 +118,15 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], pred
     const edit = h(doc, 'button', 'btn-ghost mv-edit', 'Edit');
     edit.type = 'button'; edit.dataset.id = m.id;
     card.appendChild(edit);
+    // Duplicate opens a CREATE editor seeded from this entry (app.js fetches the
+    // raw env values first — the card only ever holds masked ones). The point is
+    // deriving a sibling: same routing, one parameter changed.
+    const dup = h(doc, 'button', 'btn-ghost mv-duplicate', 'Duplicate');
+    dup.type = 'button'; dup.dataset.id = m.id;
+    card.appendChild(dup);
+    const tst = h(doc, 'button', 'btn-ghost mv-test', 'Test');
+    tst.type = 'button'; tst.dataset.id = m.id;
+    card.appendChild(tst);
     yours.appendChild(card);
   }
   root.appendChild(yours);
@@ -113,18 +169,30 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], pred
       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'));
+      // Same rule as a global card: a manifest-pinned price governs the spend,
+      // so the §4.6 "unreliable" flag says nothing about it.
+      if (m.costUnreliable && !m.cost) head.appendChild(h(doc, 'span', 'badge waiting mv-cost', 'cost not verified'));
+      if (m.cost) head.appendChild(h(doc, 'span', 'badge violet mv-cost-pinned', m.cost.free ? 'free' : 'priced'));
       body.appendChild(head);
-      const bits = [m.id, effortsSummary(m.efforts, efforts), envSummary(m.env)].filter(Boolean);
+      const bits = [m.id, effortsSummary(m.efforts, efforts), envSummary(m.env), costSummary(m.cost)].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`));
       }
+      body.appendChild(h(doc, 'small', 'mv-test-result hint')); // app.js paints the Test outcome here
       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);
+      const tst = h(doc, 'button', 'btn-ghost mv-test', 'Test');
+      tst.type = 'button'; tst.dataset.id = m.id; tst.dataset.plugin = m.plugin;
+      if ((m.secrets || []).some((s) => !s.set)) {
+        // A test would only prove what the NOT SET line already says.
+        tst.disabled = true;
+        tst.title = 'set the plugin secret first';
+      }
+      card.appendChild(tst);
       plug.appendChild(card);
     }
     root.appendChild(plug);
@@ -205,7 +273,7 @@ export function renderModelEditor(model, efforts, { doc = globalThis.document }
   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,
+  grid.appendChild(field('Model id (worca’s handle; sent to claude --model unless ANTHROPIC_MODEL overrides)', idInput,
     editing ? '' : 'Use a built-in id to override that built-in.'));
 
   const labelInput = h(doc, 'input', 'input mv-label');
@@ -232,7 +300,7 @@ export function renderModelEditor(model, efforts, { doc = globalThis.document }
   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.'));
+    'e.g. ANTHROPIC_BASE_URL / ANTHROPIC_AUTH_TOKEN. ANTHROPIC_MODEL sets the wire id sent to --model (the id above stays worca’s handle). 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) {
@@ -245,7 +313,48 @@ export function renderModelEditor(model, efforts, { doc = globalThis.document }
   }
   grid.appendChild(envBtns);
 
+  // ── Pricing (opt-in per-model cost override, config.mjs resolveModelCost) ──
+  // The CLI computes total_cost_usd from its OWN table keyed on the model NAME,
+  // so an on-prem/proxied endpoint gets a fabricated figure worca cannot tell
+  // from a real one. Three mutually exclusive modes; the default is unchanged
+  // behavior. Rendered detached like everything else here — app.js wires the
+  // mode change to applyCostMode.
+  const costWrap = h(doc, 'div', 'mv-cost-edit');
+  const modes = h(doc, 'div', 'mv-cost-modes');
+  const groupName = `mv-cost-mode-${editing ? model.id : 'new'}`;
+  for (const [value, text] of [
+    ['cli', 'Trust the CLI'],
+    ['free', 'Free ($0)'],
+    ['perMtok', 'Per million tokens'],
+  ]) {
+    const lab = h(doc, 'label', 'mv-cost-mode');
+    const rb = h(doc, 'input', 'mv-cost-mode-rb');
+    rb.type = 'radio'; rb.name = groupName; rb.value = value;
+    lab.appendChild(rb);
+    lab.appendChild(h(doc, 'span', null, text));
+    modes.appendChild(lab);
+  }
+  costWrap.appendChild(modes);
+
+  const rates = h(doc, 'div', 'mv-cost-rates');
+  for (const [key, labelText] of COST_RATES) {
+    const lab = h(doc, 'label', 'mv-cost-rate');
+    lab.appendChild(h(doc, 'span', 'mv-cost-rate-label', labelText));
+    const inp = h(doc, 'input', 'input mv-cost-rate-in');
+    inp.type = 'number'; inp.min = '0'; inp.step = '0.01'; inp.placeholder = '0';
+    inp.dataset.rate = key;
+    lab.appendChild(inp);
+    lab.appendChild(h(doc, 'span', 'mv-cost-rate-unit', '$/Mtok'));
+    rates.appendChild(lab);
+  }
+  costWrap.appendChild(rates);
+  grid.appendChild(field('Pricing', costWrap,
+    'Only for an endpoint the CLI prices by NAME rather than from what the endpoint reports — an on-prem or proxied model. '
+    + 'Trust the CLI is the default and leaves spend exactly as today. Blank rates count as $0, except Cache write (1h), '
+    + 'which falls back to the 5m rate when blank.'));
+
   root.appendChild(grid);
+  setModelCost(root, editing ? model.cost : null); // grid is attached now — the block is reachable from root
   const msg = h(doc, 'p', 'form-msg mv-editor-msg');
   msg.setAttribute('aria-live', 'polite');
   root.appendChild(msg);
@@ -260,6 +369,41 @@ export function renderModelEditor(model, efforts, { doc = globalThis.document }
   return root;
 }
 
+/**
+ * Load a `cost` override into an editor: pick the matching mode and fill the
+ * rates. The ONE place that maps a stored cost onto the form, shared by the
+ * initial render and by "Edit a copy"'s prefill of a plugin model's pricing —
+ * a second implementation of this mapping is exactly how the two would drift.
+ * Safe on an editor with no pricing block. Pass null/undefined for no override.
+ * @param {Element} rootEl  the .mv-editor root
+ * @param {{free?:boolean, perMtok?:Record<string,number>}|null} [cost]
+ */
+export function setModelCost(rootEl, cost) {
+  const rates = rootEl && rootEl.querySelector('.mv-cost-rates');
+  if (!rates) return;
+  const mode = !cost ? 'cli' : (cost.free ? 'free' : 'perMtok');
+  for (const rb of rootEl.querySelectorAll('.mv-cost-mode-rb')) rb.checked = rb.value === mode;
+  const p = cost && cost.perMtok && typeof cost.perMtok === 'object' ? cost.perMtok : {};
+  for (const inp of rootEl.querySelectorAll('.mv-cost-rate-in')) {
+    const v = p[inp.dataset.rate];
+    inp.value = v == null ? '' : String(v);
+  }
+  applyCostMode(rootEl);
+}
+
+/**
+ * Show the per-Mtok rate inputs only in that mode. The single place that knows
+ * the rule, so the initial render and the delegated `change` handler in app.js
+ * can never drift apart. Safe on an editor with no pricing block.
+ * @param {Element} rootEl  the .mv-editor root
+ */
+export function applyCostMode(rootEl) {
+  const rates = rootEl && rootEl.querySelector('.mv-cost-rates');
+  if (!rates) return;
+  const picked = rootEl.querySelector('.mv-cost-mode-rb:checked');
+  rates.hidden = (picked ? picked.value : 'cli') !== 'perMtok';
+}
+
 /** app.js exposes envRow creation to the delegated mv-env-add handler. */
 export function makeEnvRow({ doc = globalThis.document } = {}) {
   return envRow(doc);
@@ -294,12 +438,30 @@ export function collectModelEditor(rootEl) {
     }
   }
 
+  // Pricing. The editor renders the STORED override, so it round-trips: a user
+  // who came to change a label leaves it untouched. 'cli' is therefore an
+  // explicit CLEAR (null), not an omission — it is what the form now shows.
+  // Rate values are sent raw for the server to validate (settings.mjs
+  // assertModelCost owns the rules; duplicating them here would let them drift).
+  const mode = rootEl.querySelector('.mv-cost-mode-rb:checked')?.value || 'cli';
+  let cost = null;
+  if (mode === 'free') cost = { free: true };
+  else if (mode === 'perMtok') {
+    const perMtok = {};
+    for (const inp of rootEl.querySelectorAll('.mv-cost-rate-in')) {
+      const raw = (inp.value ?? '').trim();
+      if (raw !== '') perMtok[inp.dataset.rate] = Number(raw);
+    }
+    cost = { perMtok };   // empty -> the server rejects it by name, surfaced in the form
+  }
+
   const body = {
     ...(editing ? {} : { id }),
     label,
     // All boxes checked = the full set = store the default (empty).
     efforts: efforts.length === allCount ? [] : efforts,
     env,
+    cost,
   };
   return { id: editing ? id : null, body };
 }
@@ -331,13 +493,13 @@ export function renderExportWizard(globals, { doc = globalThis.document } = {})
 
   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 lab = h(doc, 'label', 'mvx-model opt-row');
     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));
+    lab.appendChild(h(doc, 'span', 'opt-name', `${m.label || m.id} `));
+    lab.appendChild(h(doc, 'small', 'hint opt-sub', m.id));
     pick.appendChild(lab);
   }
   if (!globals.length) pick.appendChild(h(doc, 'div', 'hist-empty', 'No global models to share yet.'));

package/ui/public/plugins-view.mjs

@@ -57,17 +57,33 @@ export function renderPluginList(plugins, { doc = globalThis.document, channelSt
     head.appendChild(h(doc, 'b', 'pl-name', p.name));
     head.appendChild(h(doc, 'span', 'pl-version mono', p.version || sha7(p.pinnedSha)));
     if (p.linked) head.appendChild(h(doc, 'span', 'badge waiting pl-linked', 'linked'));
-    if (p.broken) head.appendChild(h(doc, 'span', 'badge red pl-broken', 'broken'));
+    if (p.apiMismatch) head.appendChild(h(doc, 'span', 'badge amber pl-api-mismatch', 'needs update'));
+    else if (p.broken) head.appendChild(h(doc, 'span', 'badge red pl-broken', 'broken'));
+    // Enabling a plugin acts on a live system the moment it flips, so it reads
+    // as a switch. `.switch` MUST be the input's immediate next sibling — the
+    // `.sw-input:checked + .switch` rule is what paints the on state.
     const toggle = h(doc, 'label', 'pl-enable');
-    const cb = h(doc, 'input', 'pl-toggle');
+    const cb = h(doc, 'input', 'sw-input pl-toggle');
     cb.type = 'checkbox';
     cb.checked = p.enabled !== false;
     cb.dataset.name = p.name;
+    cb.setAttribute('aria-label', `Enable ${p.name}`);
     toggle.appendChild(cb);
+    toggle.appendChild(h(doc, 'span', 'switch switch-sm'));
     toggle.appendChild(h(doc, 'span', '', p.enabled !== false ? 'enabled' : 'disabled'));
     head.appendChild(toggle);
     card.appendChild(head);
     card.appendChild(h(doc, 'small', 'pl-contrib hint', contribSummary(p.contributions)));
+    if (p.apiMismatch) card.appendChild(h(doc, 'small', 'pl-api-note hint err', p.apiMismatch.message || ''));
+    // Contributions worca refused to load. Same note treatment as the API note:
+    // the contributions line above counts what the plugin SHIPS, so without this
+    // the card claims an agent or a template that exists nowhere.
+    if (p.ignored && p.ignored.length) {
+      const n = p.ignored.length;
+      card.appendChild(h(doc, 'small', 'pl-ignored-note hint err',
+        `${n} contribution${n > 1 ? 's' : ''} ignored: `
+        + p.ignored.map((i) => `${i.file} — ${i.reason}`).join('; ')));
+    }
     if (p.repo || p.marketplaceName) {
       const prov = [p.marketplaceName, p.repo].filter(Boolean).join(' · ');
       card.appendChild(h(doc, 'small', 'pl-provenance hint mono',
@@ -234,6 +250,37 @@ export function renderUpdatePreview(preview, { doc = globalThis.document } = {})
   return root;
 }
 
+// The roster row for a multiProfile source: which configuration is being
+// edited, plus add/remove. app.js owns the actions (each is a server round trip
+// that re-opens the pane), so this only renders the controls and marks them.
+function profileBar(doc, src) {
+  const bar = h(doc, 'div', 'pl-profile-bar');
+  bar.dataset.sourceId = src.id || '';
+  bar.appendChild(h(doc, 'label', '', 'Profile'));
+  const sel = h(doc, 'select', 'select pl-profile-sel');
+  sel.dataset.sourceId = src.id || '';
+  for (const p of src.profiles || []) {
+    const id = typeof p === 'string' ? p : String(p.id || '');
+    const label = typeof p === 'string' ? '' : (p.label || '');
+    const opt = h(doc, 'option', '', label ? `${label} (${id})` : id);
+    opt.value = id;
+    sel.appendChild(opt);
+  }
+  if (src.profile) sel.value = src.profile;
+  if (!(src.profiles || []).length) sel.disabled = true;
+  bar.appendChild(sel);
+  const add = h(doc, 'button', 'btn btn-ghost btn-mini pl-profile-add', 'Add');
+  add.type = 'button';
+  add.dataset.sourceId = src.id || '';
+  bar.appendChild(add);
+  const del = h(doc, 'button', 'btn btn-ghost btn-mini pl-profile-del', 'Remove');
+  del.type = 'button';
+  del.dataset.sourceId = src.id || '';
+  if (!src.profile) del.disabled = true;
+  bar.appendChild(del);
+  return bar;
+}
+
 // renderConfigForm(sections) — one <form.pl-config-form>
 // per task source. secret:true fields (text-only per normalizeManifest) render
 // type=password, NEVER prefilled; a stored value arrives redacted as {set:true}
@@ -250,12 +297,25 @@ export function renderConfigForm(sections, { doc = globalThis.document } = {}) {
     ...channels.map((x) => ({ ...x, _kind: 'channel' })),
   ];
   for (const src of rows) {
+    // A multiProfile source is a ROSTER of configurations, not one form: the
+    // bar picks which profile the form below edits. Rendered before the form so
+    // "which instance am I editing" is answered above the fields, not after.
+    if (src._kind === 'source' && src.multiProfile) {
+      root.appendChild(profileBar(doc, src));
+      // Nothing to write into: creating the profile is a separate call, and the
+      // server rejects a save without one. Offer the add button, not a form.
+      if (!src.profile) {
+        root.appendChild(h(doc, 'p', 'hint', 'No profiles yet — add one to configure this source.'));
+        continue;
+      }
+    }
     const form = h(doc, 'form', 'pl-config-form');
     if (src._kind === 'channel') {
       form.dataset.channelId = src.id || '';
       form.appendChild(h(doc, 'div', 'pl-config-h', `${src.displayName || src.id} (${src.platform || 'chat'} channel)`));
     } else {
       form.dataset.sourceId = src.id || '';
+      if (src.multiProfile) form.dataset.profile = src.profile;
     }
     for (const f of src.schema || []) {
       const field = h(doc, 'div', 'field');
@@ -291,7 +351,9 @@ export function renderConfigForm(sections, { doc = globalThis.document } = {}) {
   return root;
 }
 
-// collectConfigForm(formEl) -> { sourceId | channelId, values }. An untouched
+// collectConfigForm(formEl) -> { sourceId | channelId, values } (+ profile for
+// a multiProfile source; the key is ABSENT otherwise, so a single-profile save
+// stays byte-identical to what it sent before profiles existed). An untouched
 // {set:true} secret (data-set="1", still empty) is OMITTED — saving never
 // wipes a secret. Channel forms carry data-channel-id instead of data-source-id.
 export function collectConfigForm(formEl) {
@@ -301,7 +363,47 @@ export function collectConfigForm(formEl) {
     values[input.dataset.key] = input.value;
   }
   if (formEl.dataset.channelId) return { channelId: formEl.dataset.channelId, values };
-  return { sourceId: formEl.dataset.sourceId || '', values };
+  const out = { sourceId: formEl.dataset.sourceId || '', values };
+  if (formEl.dataset.profile) out.profile = formEl.dataset.profile;
+  return out;
+}
+
+// renderConnectResult(result) — outcome of a source's validateConfig, rendered
+// under the settings form. Three states, because setup can legitimately be
+// mid-flight: connected (ok), waiting (ok:false + pending — the caller keeps
+// polling), or failed (ok:false + errors[], each pinned to its config field).
+// A connector may return no envelope at all on a transport error; `result`
+// then carries { error: { kind, message } } from the /api/sources/call frame.
+export function renderConnectResult(result, { doc = globalThis.document } = {}) {
+  const r = result || {};
+  const root = h(doc, 'div', 'pl-connect-result');
+  if (r.ok) {
+    root.appendChild(h(doc, 'div', 'badge green', 'connected'));
+    if (r.identity) root.appendChild(h(doc, 'span', 'hint', `signed in as ${r.identity}`));
+    // Which server/project the connector actually resolved — a mistyped sample
+    // URL otherwise connects successfully to the wrong instance.
+    if (r.instance && r.instance.baseUrl) {
+      const where = r.instance.project ? `${r.instance.baseUrl} · ${r.instance.project}` : r.instance.baseUrl;
+      root.appendChild(h(doc, 'div', 'hint mono', where));
+    }
+    return root;
+  }
+  if (r.pending) {
+    root.appendChild(h(doc, 'div', 'badge', 'waiting'));
+    root.appendChild(h(doc, 'span', 'hint', r.message || 'Waiting…'));
+    return root;
+  }
+  root.appendChild(h(doc, 'div', 'badge red', 'not connected'));
+  const errors = Array.isArray(r.errors) && r.errors.length
+    ? r.errors
+    : [{ message: (r.error && r.error.message) || r.message || 'connection failed' }];
+  for (const e of errors) {
+    const row = h(doc, 'div', 'pl-connect-err');
+    if (e.field) row.appendChild(h(doc, 'span', 'mono', e.field));
+    row.appendChild(h(doc, 'span', 'hint err', e.message || ''));
+    root.appendChild(row);
+  }
+  return root;
 }
 
 // renderDoctorReport(report: {ok, checks:[{id,ok,detail}]}) — row per check.