@worca/app 1.5.0 → 1.6.0-rc.2

package/ui/public/bridge-view.mjs

@@ -74,7 +74,10 @@ export function degradationLine(m) {
   const limit = caps.maxPromptTokens ? `, prompt limit ~${Math.round(caps.maxPromptTokens / 1000)}k tokens` : '';
   const lead = m.upstream.api === 'openai-responses'
     ? 'translated — reasoning summaries only, no WebSearch/WebFetch'
-    : 'translated — no thinking blocks, no WebSearch/WebFetch';
+    : caps.reasoning
+      // A reasoning model's streamed reasoning arrives as thinking; chat completions takes none back.
+      ? 'translated — reasoning shown but not carried across turns, no WebSearch/WebFetch'
+      : 'translated — no thinking blocks, no WebSearch/WebFetch';
   return `${lead}${limit}`;
 }
 
@@ -103,11 +106,48 @@ export function needsSignInPill(m, { doc = globalThis.document } = {}) {
 // ── Providers card (§8.1) ────────────────────────────────────────────────────
 
 function providerStatePill(doc, c) {
-  if (!c.termsCurrent) return h(doc, 'span', 'badge grey', 'sign-in blocked until acknowledged');
+  if (!c.termsCurrent) {
+    // What unblocks sign-in, in the "Read notice" button's own words — and it opens that notice.
+    const pill = h(doc, 'button', 'badge grey mv-cp-terms mv-cp-terms-pill',
+      c.acknowledgedTerms ? 'please re-read the updated notice' : 'please read the notice first');
+    pill.type = 'button';
+    pill.title = 'Sign-in is blocked until you acknowledge the GitHub Copilot notice. Click to read it.';
+    return pill;
+  }
   if (!c.connected) return h(doc, 'span', 'badge grey', 'not connected');
   return h(doc, 'span', 'badge green', `connected${c.login ? ` as @${c.login}` : ''}`);
 }
 
+/**
+ * With the credential broker: the viewer's own state in the slot `name` spends from (key page),
+ * not worca's settings, which hold no key. A missing key links to the key page.
+ */
+function brokerPill(doc, b, name) {
+  const p = (b.providers || {})[name] || {};
+  const what = name === 'copilot' ? 'sign-in' : 'key';
+  if (b.signInNeeded) return h(doc, 'span', 'badge grey', `sign in to see your ${what}`);
+  if (p.state === 'none') {
+    const x = h(doc, 'span', 'badge red', 'no broker slot for this URL');
+    x.title = p.error || 'The credential broker has no slot for this base URL.';
+    return x;
+  }
+  if (p.state === 'keyless') return h(doc, 'span', 'badge green', 'local — no key needed');
+  if (b.error) {
+    const x = h(doc, 'span', 'badge grey', 'key page unreachable');
+    x.title = b.error;
+    return x;
+  }
+  if (p.state === 'set') return h(doc, 'span', 'badge green', `your ${what}${p.suffix ? ` ••••${p.suffix}` : ''}`);
+  if (p.state === 'operator') return h(doc, 'span', 'badge green', 'team key');
+  const label = p.state === 'invalid' ? `your ${what} was rejected` : `add your ${what} on the key page`;
+  const cls = p.state === 'invalid' ? 'badge red' : 'badge grey';
+  if (!b.keyPage) return h(doc, 'span', cls, label);
+  const a = h(doc, 'a', `${cls} mv-broker-pill`, label);
+  a.href = b.keyPage; a.target = '_blank'; a.rel = 'noopener';
+  a.title = 'Opens the key page in a new tab. Reopen this tab afterwards to see the change.';
+  return a;
+}
+
 function quotaLine(q) {
   if (!q) return '';
   if (q.unlimited) return 'Premium requests: unlimited on this plan';
@@ -148,6 +188,19 @@ export function renderProvidersCard(providers, { doc = globalThis.document, sign
   }
   root.appendChild(h(doc, 'small', 'hint mv-providers-hint',
     "Providers let Worca run models that don't speak the Anthropic API — through its own in-process bridge. Sign in or set a key once; then import or add models on the Models tab and pick them anywhere a model is picked."));
+  // Credential broker: keys and the Copilot sign-in are per person, on the broker's key page.
+  // This card keeps the shared settings (base URLs, concurrency, the Copilot notice, imports);
+  // its key fields, sign-in and key test are hidden (style.css .mv-providers--broker).
+  if (p.broker && p.broker.enabled) {
+    root.classList.add('mv-providers--broker');
+    const note = h(doc, 'p', 'hint mv-broker-note', 'Keys and the GitHub Copilot sign-in are held by the credential broker: each person adds their own on the key page. Imports list models with your own key.');
+    if (p.broker.keyPage) {
+      const a = h(doc, 'a', 'mv-broker-link', 'Open the key page');
+      a.href = p.broker.keyPage; a.target = '_blank'; a.rel = 'noopener';
+      note.append(' ', a);
+    }
+    root.appendChild(note);
+  }
   /** One provider's row, in its own card when the tab hosts it. */
   const place = (row, title) => {
     if (!split) { root.appendChild(row); return; }
@@ -165,7 +218,9 @@ export function renderProvidersCard(providers, { doc = globalThis.document, sign
   const cpMain = h(doc, 'div', 'mv-pv-main');
   const cpHead = h(doc, 'div', 'mv-head');
   cpHead.appendChild(h(doc, 'b', 'mv-name', 'GitHub Copilot'));
-  cpHead.appendChild(providerStatePill(doc, c));
+  const brokered = !!(p.broker && p.broker.enabled);
+  // The notice gates Copilot models either way; past it, the broker's view of your sign-in.
+  cpHead.appendChild(brokered && c.termsCurrent ? brokerPill(doc, p.broker, 'copilot') : providerStatePill(doc, c));
   cpMain.appendChild(cpHead);
   cpMain.appendChild(h(doc, 'small', 'hint',
     c.acknowledgedTerms
@@ -198,8 +253,9 @@ export function renderProvidersCard(providers, { doc = globalThis.document, sign
 
   const cpBtns = h(doc, 'div', 'mv-pv-btns');
   const imp = h(doc, 'button', 'btn-ghost mv-cp-fetch-models', 'Import models…');
-  imp.type = 'button'; imp.disabled = !c.connected;
-  if (!c.connected) imp.title = 'Sign in first';
+  // With the broker, the import runs with the viewer's own Copilot sign-in (on the key page).
+  imp.type = 'button'; imp.disabled = !c.connected && !brokered;
+  if (imp.disabled) imp.title = 'Sign in first';
   cpBtns.appendChild(imp);
   const quotaBtn = h(doc, 'button', 'btn-ghost mv-cp-quota-refresh', 'Refresh usage');
   quotaBtn.type = 'button'; quotaBtn.disabled = !c.connected;
@@ -227,7 +283,7 @@ export function renderProvidersCard(providers, { doc = globalThis.document, sign
     const main = h(doc, 'div', 'mv-pv-main');
     const rh = h(doc, 'div', 'mv-head');
     rh.appendChild(h(doc, 'b', 'mv-name', PROVIDER_LABELS[name]));
-    rh.appendChild(k.configured ? h(doc, 'span', 'badge green', 'key set')
+    rh.appendChild(p.broker && p.broker.enabled ? brokerPill(doc, p.broker, name) : k.configured ? h(doc, 'span', 'badge green', 'key set')
       : k.keySet ? h(doc, 'span', 'badge red', 'key ${VAR} not set')
         : k.keyOptional ? h(doc, 'span', 'badge green', 'local — no key needed') : h(doc, 'span', 'badge grey', 'no key'));
     main.appendChild(rh);
@@ -245,6 +301,16 @@ export function renderProvidersCard(providers, { doc = globalThis.document, sign
     buIn.type = 'text'; buIn.value = k.baseUrl || ''; buIn.dataset.provider = name;
     buIn.placeholder = name === 'openai' ? 'https://api.openai.com/v1' : 'https://api.anthropic.com';
     bu.appendChild(buIn);
+    if (name === 'openai') {
+      // One click to a hosted catalog: fills the URL (and a ${VAR} key when none is set), then the
+      // user Tests and Saves as for any endpoint. Nothing is stored until Save.
+      const pre = h(doc, 'small', 'hint mv-pv-presets', 'Preset: ');
+      const or = h(doc, 'button', 'link-btn mv-pv-preset', 'OpenRouter');
+      or.type = 'button'; or.dataset.provider = name; or.dataset.preset = 'openrouter';
+      or.title = `Point this provider at OpenRouter (${OPENROUTER_PRESET.baseUrl})`;
+      pre.appendChild(or);
+      bu.appendChild(pre);
+    }
     ctl.appendChild(bu);
     const key = h(doc, 'label', 'mv-field');
     key.appendChild(h(doc, 'span', 'mv-field-label', 'API key'));
@@ -282,6 +348,25 @@ export function renderProvidersCard(providers, { doc = globalThis.document, sign
   return root;
 }
 
+/** The OpenRouter preset (docs/models.md "OpenRouter"); mirrors provider-ops OPENROUTER_BASE_URL. */
+export const OPENROUTER_PRESET = Object.freeze({ baseUrl: 'https://openrouter.ai/api/v1', keyRef: '${OPENROUTER_KEY}' });
+
+/**
+ * Apply a preset to a provider row's fields — the base URL always, the key only when the row has
+ * none (a stored or typed key is never replaced). Returns whether anything changed.
+ */
+export function applyProviderPreset(rootEl, name, preset) {
+  const p = preset === 'openrouter' ? OPENROUTER_PRESET : null;
+  const row = p && rootEl.querySelector(`.mv-pv-row[data-provider="${name}"]`);
+  if (!row) return false;
+  const bu = row.querySelector('.mv-pv-baseurl');
+  const key = row.querySelector('.mv-pv-key');
+  let changed = false;
+  if (bu && bu.value.trim() !== p.baseUrl) { bu.value = p.baseUrl; changed = true; }
+  if (key && !key.value.trim()) { key.value = p.keyRef; changed = true; }
+  return changed;
+}
+
 /** Collect a key-based provider row into a PATCH body (masked echo dropped). */
 export function collectProviderRow(rootEl, name) {
   const row = rootEl.querySelector(`.mv-pv-row[data-provider="${name}"]`);
@@ -398,12 +483,38 @@ export function renderImportSheet(models, { doc = globalThis.document } = {}) {
 export function renderEndpointSheet(payload, { doc = globalThis.document } = {}) {
   const p = payload || {};
   const list = Array.isArray(p.models) ? p.models : [];
+  const hosted = p.server === 'openrouter';
   const root = h(doc, 'section', 'card mv-editor mvi mvi-ep');
   root.dataset.source = 'endpoint';
   root.dataset.baseurl = p.baseUrl || '';
+  if (p.server) root.dataset.server = p.server;
   root.appendChild(h(doc, 'h3', 'mv-editor-title', `Import from ${p.serverLabel || 'this endpoint'}`));
-  root.appendChild(h(doc, 'small', 'hint', `${p.baseUrl || ''} — these run through the translation layer (no thinking blocks, no web tools) and are priced free: a model on your own machine bills nothing. Worca pins the prompt limit only when the server reports the window it really serves.`));
+  root.appendChild(h(doc, 'small', 'hint', hosted
+    ? `${p.baseUrl || ''} — these run through the translation layer (no web tools). Worca reads each model's window, output cap, tool and reasoning support and its listed price, and pins them on the entry.`
+    : `${p.baseUrl || ''} — these run through the translation layer (no thinking blocks, no web tools) and are priced free: a model on your own machine bills nothing. Worca pins the prompt limit only when the server reports the window it really serves.`));
   for (const w of Array.isArray(p.warnings) ? p.warnings : []) root.appendChild(h(doc, 'small', 'hint mvi-warn', w));
+  // A hosted catalog lists hundreds of models: beside the dialog's text filter, narrow by what a
+  // pipeline decides on. The controls only mark the view — endpointRowMatches reads them.
+  if (hosted && list.length) {
+    const bar = h(doc, 'div', 'chip-select mvi-or-filters');
+    const chip = (cls, text) => {
+      const l = h(doc, 'label', 'mvi-chip');
+      const cb = h(doc, 'input', cls); cb.type = 'checkbox';
+      l.appendChild(cb); l.appendChild(h(doc, 'span', null, text));
+      bar.appendChild(l);
+    };
+    chip('mvi-f-free', 'Free');
+    chip('mvi-f-tools', 'Tools');
+    const ctxL = h(doc, 'label', 'mvi-chip');
+    ctxL.appendChild(h(doc, 'span', null, 'Window ≥'));
+    const ctx = h(doc, 'select', 'select mvi-f-ctx');
+    for (const [v, t] of [['0', 'any'], ['65536', '64k'], ['131072', '128k'], ['262144', '256k'], ['1000000', '1M']]) {
+      const o = h(doc, 'option', null, t); o.value = v; ctx.appendChild(o);
+    }
+    ctxL.appendChild(ctx);
+    bar.appendChild(ctxL);
+    root.appendChild(bar);
+  }
   if (!list.length) {
     root.appendChild(h(doc, 'div', 'hist-empty', 'This endpoint lists no models.'));
   } else {
@@ -421,6 +532,9 @@ export function renderEndpointSheet(payload, { doc = globalThis.document } = {})
     for (const m of list) {
       const tr = h(doc, 'tr');
       tr.dataset.id = m.id;
+      tr.dataset.free = m.free ? '1' : '0';
+      tr.dataset.tools = m.toolCalls === true ? '1' : '0';
+      tr.dataset.ctx = String(m.servedContext || 0);
       const blocked = m.importable === false;
       if (blocked) tr.className = 'mvi-disabled';
       const cbTd = h(doc, 'td');
@@ -470,6 +584,21 @@ export function collectImportSheet(rootEl) {
   return [...rootEl.querySelectorAll('.mvi-cb')].filter((c) => c.checked && !c.disabled).map((c) => c.value);
 }
 
+/**
+ * Whether an import-sheet row passes the dialog's text query and, on a hosted sheet, its Free /
+ * Tools / window filters. A view filter only — the tick on a hidden row is kept. Pure over the DOM.
+ */
+export function endpointRowMatches(tr, sheet, query = '') {
+  const q = String(query || '').trim().toLowerCase();
+  if (q && !tr.textContent.toLowerCase().includes(q) && !String(tr.dataset.id || '').toLowerCase().includes(q)) return false;
+  const bar = sheet && sheet.querySelector('.mvi-or-filters');
+  if (!bar) return true;
+  if (bar.querySelector('.mvi-f-free')?.checked && tr.dataset.free !== '1') return false;
+  if (bar.querySelector('.mvi-f-tools')?.checked && tr.dataset.tools !== '1') return false;
+  const min = Number(bar.querySelector('.mvi-f-ctx')?.value || 0);
+  return !(min > 0 && Number(tr.dataset.ctx || 0) < min);
+}
+
 /** The select-all box: tick every importable row. */
 export function applyImportSelectAll(rootEl, on) {
   for (const c of rootEl.querySelectorAll('.mvi-cb')) if (!c.disabled) c.checked = !!on;
@@ -477,6 +606,50 @@ export function applyImportSelectAll(rootEl, on) {
 
 // ── Editor: Connection section (§8.3) ───────────────────────────────────────
 
+/** Whether a base URL is OpenRouter's (mirrors model-env.mjs isOpenRouterBaseUrl; this module imports nothing). */
+export function isOpenRouterUrl(v) {
+  if (typeof v !== 'string' || !v.trim()) return false;
+  let host;
+  try { host = new URL(v.trim()).hostname.toLowerCase(); } catch { return false; }
+  return host === 'openrouter.ai' || host.endsWith('.openrouter.ai');
+}
+
+/** Whether the Connection form resolves to OpenRouter chat completions: its own base URL, else the provider's. */
+function openRouterApplies(conn) {
+  if ((conn.querySelector('.mv-conn-mode-rb:checked')?.value || 'direct') !== 'provider') return false;
+  if (conn.querySelector('.mv-conn-provider')?.value !== 'openai' || conn.querySelector('.mv-conn-api')?.value !== 'openai-chat') return false;
+  const own = (conn.querySelector('.mv-conn-baseurl')?.value || '').trim();
+  return isOpenRouterUrl(own || conn._providers?.openai?.baseUrl || '');
+}
+
+/** Load an `upstream.openrouter` block (or nothing: the defaults) into the routing fields. */
+function fillOpenRouter(root, or) {
+  const o = or || {};
+  const p = o.provider || {};
+  const set = (sel, v) => { const el = root.querySelector(sel); if (el) el.value = v; };
+  set('.mv-conn-or-models', Array.isArray(o.models) ? o.models.join(', ') : '');
+  set('.mv-conn-or-order', Array.isArray(p.order) ? p.order.join(', ') : '');
+  set('.mv-conn-or-sort', p.sort || '');
+  const fb = root.querySelector('.mv-conn-or-fallbacks');
+  if (fb) fb.checked = p.allow_fallbacks !== false;   // OpenRouter's default is on
+}
+
+/** The routing fields as an `upstream.openrouter` block, or undefined when all are at their defaults. */
+function collectOpenRouter(conn) {
+  const list = (sel) => (conn.querySelector(sel)?.value || '').split(',').map((s) => s.trim()).filter(Boolean);
+  const out = {};
+  const models = list('.mv-conn-or-models');
+  if (models.length) out.models = models;
+  const provider = {};
+  const order = list('.mv-conn-or-order');
+  if (order.length) provider.order = order;
+  if (conn.querySelector('.mv-conn-or-fallbacks')?.checked === false) provider.allow_fallbacks = false;
+  const sort = conn.querySelector('.mv-conn-or-sort')?.value || '';
+  if (sort) provider.sort = sort;
+  if (Object.keys(provider).length) out.provider = provider;
+  return Object.keys(out).length ? out : undefined;
+}
+
 /**
  * The Connection block for the model editor. `model` is the MASKED entry or
  * null; `providers` the GET /api/providers payload (for the readiness hints);
@@ -552,7 +725,13 @@ export function renderConnectionSection(model, { doc = globalThis.document, prov
 
   // Advanced: per-entry overrides for the key-based providers.
   const adv = h(doc, 'details', 'advanced mv-conn-adv');
-  const sum = h(doc, 'summary', null, 'Advanced — base URL, API key, extra headers');
+  // Same summary as New pipeline's Advanced (index.html #advanced-config): the chevron is
+  // what says "expandable" — without it the label reads as a plain heading.
+  const sum = h(doc, 'summary');
+  const chev = h(doc, 'span', 'adv-chev');
+  chev.setAttribute('aria-hidden', 'true');
+  sum.appendChild(chev);
+  sum.appendChild(h(doc, 'span', null, 'Advanced — base URL, API key, extra headers'));
   adv.appendChild(sum);
   const advBody = h(doc, 'div', 'advanced-body mv-conn-adv-body');
   const bu = h(doc, 'input', 'input mv-conn-baseurl');
@@ -567,6 +746,28 @@ export function renderConnectionSection(model, { doc = globalThis.document, prov
   hdr.rows = 2; hdr.placeholder = 'One per line: Header-Name: value';
   hdr.value = upstream && upstream.headers ? Object.entries(upstream.headers).map(([k, v]) => `${k}: ${v}`).join('\n') : '';
   advBody.appendChild(field('Extra headers', hdr));
+  // OpenRouter routing: shown only while the entry resolves to OpenRouter (applyConnectionMode).
+  const orBox = h(doc, 'div', 'mv-conn-or');
+  orBox.appendChild(h(doc, 'small', 'hint', 'OpenRouter routing — fallback models are tried in order when this one is rate-limited or down (a :free model’s shared pool often is); provider order and sort pick who serves it.'));
+  const orModels = h(doc, 'input', 'input mv-conn-or-models');
+  orModels.type = 'text'; orModels.placeholder = 'e.g. qwen/qwen3.8-27b (comma-separated)';
+  orBox.appendChild(field('Fallback models', orModels));
+  const orOrder = h(doc, 'input', 'input mv-conn-or-order');
+  orOrder.type = 'text'; orOrder.placeholder = 'provider names, comma-separated — empty lets OpenRouter choose';
+  orBox.appendChild(field('Provider order', orOrder));
+  const orSort = h(doc, 'select', 'select mv-conn-or-sort');
+  for (const [value, text] of [['', 'OpenRouter default'], ['price', 'Price'], ['throughput', 'Throughput'], ['latency', 'Latency']]) {
+    const o = h(doc, 'option', null, text); o.value = value; orSort.appendChild(o);
+  }
+  orBox.appendChild(field('Sort providers by', orSort));
+  const orFbLab = h(doc, 'label', 'mv-conn-cap');
+  const orFb = h(doc, 'input', 'mv-conn-or-fallbacks');
+  orFb.type = 'checkbox';
+  orFbLab.appendChild(orFb);
+  orFbLab.appendChild(h(doc, 'span', null, 'Allow other providers when these are unavailable'));
+  orBox.appendChild(orFbLab);
+  advBody.appendChild(orBox);
+  fillOpenRouter(orBox, upstream && upstream.openrouter);
   adv.appendChild(advBody);
   body.appendChild(adv);
 
@@ -640,6 +841,8 @@ export function applyConnectionMode(connEl) {
   const api = apiSel ? apiSel.value : '';
   const adv = conn.querySelector('.mv-conn-adv');
   if (adv) adv.hidden = provider === 'copilot';
+  const orBox = conn.querySelector('.mv-conn-or');
+  if (orBox) orBox.hidden = !openRouterApplies(conn);
   const hint = conn.querySelector('.mv-conn-provider-hint');
   const p = conn._providers;
   if (hint) {
@@ -652,7 +855,7 @@ export function applyConnectionMode(connEl) {
   if (note) {
     const copilotPricing = provider === 'copilot' ? ' Copilot bills premium requests, so Pricing defaults to Free.' : '';
     note.textContent = mode !== 'provider' ? '' : api === 'openai-chat'
-      ? `Translated: no thinking blocks, WebSearch/WebFetch withheld, prompt limit per the capabilities above.${copilotPricing}`
+      ? `Translated: reasoning the endpoint streams (OpenRouter, vLLM) is shown as thinking but not carried across turns, WebSearch/WebFetch withheld, prompt limit per the capabilities above.${copilotPricing}`
       : api === 'openai-responses'
         ? `Translated to the Responses API: reasoning summaries arrive as thinking, WebSearch/WebFetch withheld, prompt limit per the capabilities above.${copilotPricing}`
         : provider === 'copilot' ? 'Copilot’s native Anthropic endpoint: thinking blocks and cache accounting arrive intact. Copilot bills premium requests, so Pricing defaults to Free.'
@@ -704,6 +907,7 @@ export function setModelUpstream(connEl, upstream) {
     const bu = conn.querySelector('.mv-conn-baseurl'); if (bu) bu.value = upstream.baseUrl || '';
     const key = conn.querySelector('.mv-conn-key'); if (key) { key.value = upstream.apiKey || ''; if (key.value) key.dataset.original = key.value; }
     const hdr = conn.querySelector('.mv-conn-headers'); if (hdr) hdr.value = upstream.headers ? Object.entries(upstream.headers).map(([k, v]) => `${k}: ${v}`).join('\n') : '';
+    fillOpenRouter(conn, upstream.openrouter);
     const caps = upstream.capabilities || {};
     for (const cb of conn.querySelectorAll('.mv-conn-cap-cb')) cb.checked = caps[cb.dataset.cap] === undefined ? cb.dataset.cap === 'toolCalls' : !!caps[cb.dataset.cap];
     for (const inp of conn.querySelectorAll('.mv-conn-limit-in')) inp.value = caps[inp.dataset.limit] ? String(caps[inp.dataset.limit]) : '';
@@ -737,6 +941,9 @@ export function collectConnection(connEl) {
       if (i > 0) headers[l.slice(0, i).trim()] = l.slice(i + 1).trim();
     }
     if (Object.keys(headers).length) upstream.headers = headers;
+    // Only while the entry resolves to OpenRouter: another endpoint would reject the fields.
+    const or = openRouterApplies(conn) ? collectOpenRouter(conn) : undefined;
+    if (or) upstream.openrouter = or;
   }
   const capabilities = {};
   for (const cb of conn.querySelectorAll('.mv-conn-cap-cb')) capabilities[cb.dataset.cap] = !!cb.checked;

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

@@ -2,7 +2,8 @@
 // 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.
+// node:test drives these via jsdom. (One exception: the Ask web fields keep their own
+// dirty flag with input/change listeners on their detached wrapper — no I/O.)
 
 function h(doc, tag, cls, text) {
   const n = doc.createElement(tag);
@@ -115,3 +116,53 @@ export function collectScriptToolsToggle(root) {
   const cb = root && typeof root.querySelector === 'function' ? root.querySelector('input.ask-script-tools') : null;
   return { scriptTools: cb ? cb.checked : true };
 }
+
+/** Ask Worca → Web access (docs/guardrails.md "Web access"): off by default; the allowlist is enforced by worca's server. */
+export function renderAskWebFields({ askWeb } = {}, { doc = globalThis.document } = {}) {
+  const w = askWeb || { enabled: false, anyHost: false, allowedDomains: [], search: null };
+  const wrap = h(doc, 'div', 'ask-web');
+  wrap.append(h(doc, 'div', 'label-row', 'Web access'));
+  const row = h(doc, 'label', 'check-row'); row.setAttribute('for', 'askWebEnabled');
+  const cb = h(doc, 'input'); cb.type = 'checkbox'; cb.id = 'askWebEnabled'; cb.checked = w.enabled === true;
+  row.append(cb, doc.createTextNode(' Let Ask Worca read web pages'));
+  const anyRow = h(doc, 'label', 'check-row'); anyRow.setAttribute('for', 'askWebAnyHost');
+  const any = h(doc, 'input'); any.type = 'checkbox'; any.id = 'askWebAnyHost'; any.checked = w.anyHost === true;
+  anyRow.append(any, doc.createTextNode(' Any site, without asking'));
+  const anyHint = h(doc, 'small', 'hint', 'Risky: a web page or a file Ask reads can then make it send data to any site in a URL. Leave off to approve each new site from the chat.');
+  const domains = h(doc, 'textarea', 'input'); domains.id = 'askWebDomains'; domains.rows = 4;
+  domains.placeholder = 'docs.python.org\n*.mozilla.org'; domains.value = (w.allowedDomains || []).join('\n');
+  const dHint = h(doc, 'small', 'hint', 'Sites Ask may read without asking. One host per line: example.com, or *.example.com for its subdomains. For any other site Ask shows a card in the chat: allow it for that chat, always (it is added here), or deny. https only. A site sees every URL Ask requests from it, so only allow sites you trust.');
+  const field = (id, label, placeholder, value) => {
+    const box = h(doc, 'div', 'field');
+    const l = h(doc, 'label', null, label); l.setAttribute('for', id);
+    const i = h(doc, 'input', 'input'); i.id = id; i.placeholder = placeholder; i.value = value || '';
+    box.append(l, i); return box;
+  };
+  const s = w.search || {};
+  // Dirty flag: the card posts askWeb only after the user touched a web field, so saving the other
+  // Ask limits never rewrites the stored web settings.
+  const markDirty = () => { wrap.dataset.dirty = '1'; };
+  wrap.addEventListener('input', markDirty);
+  wrap.addEventListener('change', markDirty);
+  wrap.append(row, anyRow, anyHint, domains, dHint,
+    field('askWebSearchUrl', 'Search endpoint (optional)', 'https://api.search.brave.com/res/v1/web/search?q={query}', s.url),
+    field('askWebSearchKey', 'Search key variable', '${BRAVE_API_KEY}', s.key),
+    field('askWebSearchHeader', 'Key header', 'X-Subscription-Token', s.keyHeader),
+    field('askWebSearchPrefix', 'Key prefix', 'Bearer ', s.keyPrefix),
+    h(doc, 'small', 'hint', 'Any GET search API that returns JSON. Use {query} (and optionally {key}) in the URL; the key is always a ${VAR} read from worca\'s environment.'));
+  return wrap;
+}
+
+/** The askWeb POST value, or null when the user did not touch the web fields (nothing to send). */
+export function collectAskWebFields(root) {
+  if (root.querySelector('.ask-web')?.dataset.dirty !== '1') return null;
+  const q = (id) => root.querySelector(`#${id}`);
+  const val = (id) => (q(id) ? q(id).value.trim() : '');
+  const url = val('askWebSearchUrl');
+  return {
+    enabled: !!q('askWebEnabled')?.checked,
+    anyHost: !!q('askWebAnyHost')?.checked,
+    allowedDomains: (q('askWebDomains')?.value || '').split('\n').map((x) => x.trim()).filter(Boolean),
+    search: url ? { url, key: val('askWebSearchKey'), keyHeader: val('askWebSearchHeader'), keyPrefix: q('askWebSearchPrefix') ? q('askWebSearchPrefix').value : '' } : null,
+  };
+}

package/ui/public/credential-badges.mjs

@@ -0,0 +1,63 @@
+// ui/public/credential-badges.mjs
+// "Your key / No key" badges on model pickers (credential broker, docs/credential-broker.md).
+// One cache of GET /api/credentials — which slot each catalog model spends from, and the
+// signed-in person's key state per slot — that every picker asks for a model's badge.
+// Nothing here without a broker: credentialBadge() returns null and no picker changes.
+
+let data = null;
+let pending = null;
+const listeners = new Set();
+
+/** Replace the cached payload (app.js after a fetch; tests directly). */
+export function setCredentialData(d) {
+  data = d && d.enabled ? d : null;
+  for (const fn of listeners) { try { fn(); } catch { /* a listener must not break the rest */ } }
+}
+
+/** Repaint hook: called whenever the cached payload changes. */
+export function onCredentialsChange(fn) { listeners.add(fn); return () => listeners.delete(fn); }
+
+/** Fetch /api/credentials once at a time; never throws (no broker or no answer = no badges). */
+export function loadCredentials(fetchImpl = globalThis.fetch) {
+  if (pending) return pending;
+  pending = (async () => {
+    try {
+      const r = await fetchImpl('/api/credentials');
+      setCredentialData(r.ok ? await r.json() : null);
+    } catch { setCredentialData(null); } finally { pending = null; }
+    return data;
+  })();
+  return pending;
+}
+
+/** The key page URL, when the broker has one. */
+export function keyPageUrl() { return data?.keyPage || null; }
+
+/**
+ * The badge for one model, or null (no broker, unknown model, nobody signed in).
+ * @returns {{text:string, tone:'green'|'blue'|'red', title:string, missing:boolean}|null}
+ */
+export function credentialBadge(modelId, d = data) {
+  if (!d || !d.enabled || !d.models) return null;
+  const m = d.models[modelId];
+  if (!m) return null;
+  if (m.keyless) return { text: 'local', tone: 'blue', title: 'A local model: no key needed.', missing: false };
+  if (m.error) return { text: 'no route', tone: 'red', title: m.error, missing: true };
+  if (d.mode === 'multi' && !d.person) return null;
+  const s = (d.slots || []).find((x) => x.id === m.slot);
+  const label = s?.label || m.slot;
+  const where = d.keyPage ? ' on the key page' : ' to the credential broker';
+  switch (s?.state) {
+    case 'set': return { text: 'your key', tone: 'green', title: `Runs with your ${label}.`, missing: false };
+    case 'operator': return { text: 'team key', tone: 'blue', title: `Runs with the team's ${label}.`, missing: false };
+    case 'keyless': return { text: 'local', tone: 'blue', title: 'No key needed.', missing: false };
+    case 'invalid': return { text: 'key rejected', tone: 'red', title: `The provider rejected your ${label}: replace it${where}.`, missing: true };
+    default: return { text: 'no key', tone: 'red', title: `Add your ${label}${where} to use this model.`, missing: true };
+  }
+}
+
+/** A short suffix for a plain <option> label (a select can't hold a styled badge). */
+export function credentialSuffix(modelId, d = data) {
+  const b = credentialBadge(modelId, d);
+  return b && b.missing ? ` · ${b.text}` : '';
+}

package/ui/public/credentials-view.mjs

@@ -0,0 +1,57 @@
+// ui/public/credentials-view.mjs
+// Pure DOM renderer for the Settings "My model credentials" card
+// (docs/credential-broker.md). Same contract as chat-settings-view.mjs: a detached
+// element, no fetch, no listeners — app.js owns I/O and mounting; node:test drives
+// it via jsdom. Status only: which of the signed-in person's credential slots hold a
+// key, as the credential broker reports it (GET /api/credentials). Keys are entered
+// on the broker's own key page, never here.
+
+function h(doc, tag, cls, text) {
+  const n = doc.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+
+export const CREDENTIAL_STATE_TEXT = Object.freeze({
+  set: 'Set', missing: 'Not set', invalid: 'Rejected', keyless: 'No key needed', operator: 'Provided by the team',
+});
+const STATE_TONE = Object.freeze({ set: 'green', missing: 'slate', invalid: 'red', keyless: 'blue', operator: 'blue' });
+
+/**
+ * @param {{enabled:boolean, mode?:string, keyPage?:string|null, person?:string|null, slots?:object[], error?:string}} data
+ * @param {Document} [doc]
+ * @returns {HTMLElement}
+ */
+export function renderCredentials(data, doc = document) {
+  const box = h(doc, 'div', 'cred-view');
+  if (data?.error) {
+    box.append(h(doc, 'p', 'hint err', `The credential broker didn't answer: ${data.error}`));
+    return box;
+  }
+  if (data?.mode === 'single') {
+    box.append(h(doc, 'p', 'hint', 'Model keys are held by the credential broker. To change them, update the broker\'s secrets and restart it.'));
+  } else if (!data?.person) {
+    box.append(h(doc, 'p', 'hint', 'Sign in through your team\'s sign-in page to see your credentials.'));
+    return box;
+  }
+  const list = h(doc, 'ul', 'cred-list');
+  for (const s of data.slots || []) {
+    const text = s.state === 'set' && s.suffix ? `Set ••••${s.suffix}` : (CREDENTIAL_STATE_TEXT[s.state] || s.state);
+    const row = h(doc, 'li', 'cred-row');
+    row.append(h(doc, 'span', 'cred-name', s.label || s.id), h(doc, 'span', `cred-chip tone-${STATE_TONE[s.state] || 'slate'}`, text));
+    list.append(row);
+  }
+  box.append(list);
+  if (data.mode === 'multi' && data.keyPage) {
+    const missing = (data.slots || []).some((s) => s.state === 'missing' || s.state === 'invalid');
+    const actions = h(doc, 'div', 'cred-actions');
+    const a = h(doc, 'a', `btn ${missing ? 'btn-primary' : 'btn-ghost'} btn-mini`, 'Manage keys');
+    a.href = data.keyPage;
+    a.target = '_blank';
+    a.rel = 'noopener';
+    actions.append(a, h(doc, 'small', 'hint', 'Opens the key page in a new tab. Reopen Settings afterwards to see the change.'));
+    box.append(actions);
+  }
+  return box;
+}