@worca/app 1.5.0 → 1.6.0-rc.1

package/ui/public/ask-panel.mjs

@@ -7,6 +7,7 @@
 import { openScheduleSheet, browserTimeZone } from './schedule-sheet.mjs';
 import { formatInstant, describeRule } from '../../src/shared/schedule/recurrence.mjs';
 import { createThreadModel } from './ask-model.mjs';
+import { credentialBadge } from './credential-badges.mjs';
 import { createMarkdownRenderer } from './ask-markdown.mjs';
 import { createThinkingOrb } from './thinking-orb.mjs';
 import { workflowPickerLabel } from './results-view.mjs';
@@ -164,21 +165,22 @@ const PILL_MORPH_IN_MS = 520;
 const PILL_MORPH_OUT_MS = 800;
 const PILL_SETTLE_FALLBACK_MS = PILL_MORPH_OUT_MS + 150;
 
-export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContext, openNewPipeline, openComposer = null, loadMarkdown, hljsLoader, storage, raf, now, runStore = null }) {
-  const storedPick = readStoredModel();   // hoisted declaration (defined below); null when nothing is stored
+export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContext, openNewPipeline, openComposer = null, openClaudeSetup = null, loadMarkdown, hljsLoader, storage, raf, now, runStore = null }) {
+  const homePick = browserPick();         // hoisted declaration (defined below)
   const st = {
     open: false,
     threadId: null,
     model: null,              // createThreadModel for the active thread (Task 4+)
-    picker: {
-      model: storedPick && storedPick.model ? storedPick.model : FALLBACK_PICK.model,
-      effort: storedPick ? storedPick.effort : FALLBACK_PICK.effort,
-    },
+    picker: homePick.picker,
     // D11 provenance, tracked per slot: only a MODEL the user actually picked
     // outranks the backend default. An effort-only record leaves the model slot
     // unclaimed, so a later change to ASK_LIMITS.defaultModel still reaches here.
-    pickerFromStore: !!(storedPick && storedPick.model),
-    effortFromStore: storedPick !== null,
+    pickerFromStore: homePick.pickerFromStore,
+    effortFromStore: homePick.effortFromStore,
+    // The picker shows the open thread's own last pick (its row's model/effort).
+    // It outranks the backend default like a stored pick, but it is the chat's,
+    // not the browser's: nothing sourced from a thread reaches worca-cc.ask.model.
+    pickerFromThread: false,
     catalog: null,
     // #397: the thread's project/workspace scope. pinned:false = Auto (follow the
     // page — today's behaviour). label caches the display name once resolved.
@@ -237,11 +239,28 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     } catch { /* storage unavailable */ }
     return null;                                    // no stored pick — the catalog decides (D5/D6/D11)
   }
+  /** The browser-level pick — what a new chat starts with: the stored record over the cold-start literal, with each slot's provenance. */
+  function browserPick() {
+    const stored = readStoredModel();
+    return {
+      picker: {
+        model: stored && stored.model ? stored.model : FALLBACK_PICK.model,
+        effort: stored ? stored.effort : FALLBACK_PICK.effort,
+      },
+      pickerFromStore: !!(stored && stored.model),
+      effortFromStore: stored !== null,
+    };
+  }
   function storeModel() {
     // Provenance travels with the record: writing st.picker.model when the user never
     // chose one would pin the cold-start literal (or a default they merely saw), and
-    // the backend would be authoritative exactly once per browser.
-    const rec = { model: st.pickerFromStore ? st.picker.model : null, effort: st.picker.effort };
+    // the backend would be authoritative exactly once per browser. A thread's model
+    // is not the user's browser-level choice either: an effort picked on it leaves
+    // the record's model slot as it was.
+    const model = st.pickerFromThread
+      ? (readStoredModel() || { model: null }).model
+      : (st.pickerFromStore ? st.picker.model : null);
+    const rec = { model, effort: st.picker.effort };
     try { storage.setItem('worca-cc.ask.model', JSON.stringify(rec)); } catch { /* ignore */ }
   }
   function readStoredThread() { try { return storage.getItem('worca-cc.ask.thread') || null; } catch { return null; } }
@@ -1231,15 +1250,20 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
   }
 
   function applyCatalogToPicker() {
+    const list = st.catalog && Array.isArray(st.catalog.models) ? st.catalog.models : [];
+    // A thread's model the catalog no longer has (a removed user model) falls back
+    // to the browser-level pick, then the backend default. The thread is not
+    // patched: its next send stores whatever is used.
+    if (st.pickerFromThread && list.length && !catalogEntry(st.picker.model)) { restoreBrowserPick(); return; }
     const fallback = catalogDefault();
     // Each slot is decided by its own provenance: a stored MODEL outranks the backend
     // default, and a stored EFFORT survives even when the model comes from the default.
     // (effortFromStore ⊇ pickerFromStore — a stored model always carries its effort.)
+    // A thread's pick claims both slots.
     const wanted = {
-      model: st.pickerFromStore ? st.picker.model : fallback.model,
-      effort: st.effortFromStore ? st.picker.effort : fallback.effort,
+      model: st.pickerFromThread || st.pickerFromStore ? st.picker.model : fallback.model,
+      effort: st.pickerFromThread || st.effortFromStore ? st.picker.effort : fallback.effort,
     };
-    const list = st.catalog && Array.isArray(st.catalog.models) ? st.catalog.models : [];
     const wantedEntry = catalogEntry(wanted.model);
     // Unknown stored/default id -> the backend default -> the first model we do
     // have that is not a hidden built-in (#422; a hidden id is still a valid pick).
@@ -1250,11 +1274,43 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     const changed = next.model !== st.picker.model || next.effort !== st.picker.effort;
     st.picker = next;
     // D11: persist ONLY a repair of a pick the user actually made. Writing the
-    // backend default here would make it authoritative exactly once, ever.
-    if (changed && st.pickerFromStore) storeModel();
+    // backend default here would make it authoritative exactly once, ever — and a
+    // thread's pick is never the browser's.
+    if (changed && st.pickerFromStore && !st.pickerFromThread) storeModel();
     updatePickerButton();
   }
 
+  /** Back to the browser-level pick (new chat, a thread with no model of its own). */
+  function restoreBrowserPick() {
+    const home = browserPick();
+    st.picker = home.picker;
+    st.pickerFromStore = home.pickerFromStore;
+    st.effortFromStore = home.effortFromStore;
+    st.pickerFromThread = false;
+    if (st.catalog) applyCatalogToPicker();
+    else updatePickerButton();
+  }
+
+  /** A thread SWITCH shows that thread's last model/effort; a row without one gets the browser-level pick. */
+  function applyThreadPick(thread) {
+    const t = thread && typeof thread === 'object' ? thread : null;
+    if (!t || typeof t.model !== 'string' || !t.model || typeof t.effort !== 'string' || !t.effort) { restoreBrowserPick(); return; }
+    st.picker = { model: t.model, effort: t.effort };
+    st.pickerFromThread = true;
+    if (st.catalog) applyCatalogToPicker();   // effort coerced against the entry; a dropped model falls back
+    else updatePickerButton();               // the raw id shows until the catalog lands
+  }
+
+  /** Keep the pick on the open thread, so switching away and back finds it before any send. */
+  function persistThreadPick() {
+    const id = st.threadId;
+    if (!id) return;                           // a brand-new chat: the first send stores it
+    const body = JSON.stringify({ model: st.picker.model, effort: st.picker.effort });
+    Promise.resolve()
+      .then(() => fetch(`/api/ask/threads/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body }))
+      .catch(() => { /* the next message stores the pick anyway */ });
+  }
+
   function loadCatalog() {
     if (st.catalog) return Promise.resolve(st.catalog);
     if (st.catalogLoading) return st.catalogLoading;
@@ -1313,7 +1369,9 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     st.picker = { model: id, effort: coerceEffort(catalogEntry(id), st.picker.effort) };
     st.pickerFromStore = true;                      // an explicit model choice claims the slot (D11)
     st.effortFromStore = true;
+    st.pickerFromThread = false;                    // the user's own pick now, not the thread's
     storeModel();
+    persistThreadPick();
     updatePickerButton();
     closePopover({ focusTrigger: false });
     focusComposer();
@@ -1323,6 +1381,7 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     st.picker = { ...st.picker, effort };
     st.effortFromStore = true;                      // the effort only — the model slot is untouched (D11)
     storeModel();
+    persistThreadPick();
     updatePickerButton();
     closePopover({ focusTrigger: false });
     focusComposer();
@@ -1355,6 +1414,9 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
       if (m.needsSignIn) {
         item.appendChild(tag('needs sign-in', 'is-err', m.signInMessage || 'The provider behind this model is not usable yet — Settings › Models › Providers.'));
       }
+      // Credential broker: whether the signed-in person has the key this model spends from.
+      const cb = credentialBadge(m.id);
+      if (cb) item.appendChild(tag(cb.text, cb.missing ? 'is-err' : 'is-key', cb.title));
       if (m.id === st.picker.model) item.appendChild(make('span', 'ask-model-check', '✓'));
       return item;
     };
@@ -1640,6 +1702,7 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     storeThread(null);
     el.title.textContent = 'Ask Worca';
     applyThreadScope(null);             // #397: a brand-new chat starts on Auto
+    restoreBrowserPick();               // …and on the browser-level pick, not the last chat's
     pruneCardEls();                     // st.model is already null — renderTranscript's keep set cannot see the old ids
     renderTranscript();
     updateMeters();
@@ -2404,6 +2467,55 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     return { el: rootEl };
   }
 
+  /** The web card (propose_web_access): proposed → applied | failed, or declined. The exact URL is shown, so a
+   *  request that smuggles data is visible before the click. Every value is text. */
+  function buildWebCard(block) {
+    const card = block.card || {};
+    const host = card.host || 'a website';
+    if (block.state === 'declined') return { el: make('div', 'ask-card-stub', `Declined — ${card.summary || `Read ${host}`}`) };
+    const rootEl = make('div', `ask-card ask-mcard ask-webcard is-${block.state}`);
+    rootEl.setAttribute('data-ask-webcard', block.state);
+    const result = card.result || null;
+    const head = make('div', 'ask-mcard-head');
+    const title = block.state === 'failed' ? 'Web access not granted'
+      : block.state === 'applied' ? (result && result.scope === 'always' ? 'Always allowed' : 'Allowed for this chat')
+        : 'Ask Worca wants to read a new site';
+    head.appendChild(make('span', 'ask-mcard-title', title));
+    head.appendChild(make('span', 'ask-mcard-kind', 'Web'));
+    rootEl.appendChild(head);
+    const body = make('div', 'ask-mcard-body');
+    const sum = make('div', 'ask-mcard-summary');
+    if (block.state === 'applied') sum.appendChild(svgIcon(WF_ICO.check, 15, 2.4));
+    sum.appendChild(make('span', null, host));
+    body.appendChild(sum);
+    if (card.reason) body.appendChild(make('div', 'ask-mcard-note', card.reason));
+    const ul = make('ul', 'ask-mcard-changes');
+    const li = make('li');
+    li.appendChild(make('span', 'ask-mcard-change-label', 'URL'));
+    const val = make('span', 'ask-mcard-change-val');
+    val.appendChild(make('span', 'ask-mcard-after', String(card.url || '')));
+    li.appendChild(val);
+    ul.appendChild(li);
+    body.appendChild(ul);
+    if (block.state === 'failed') body.appendChild(make('div', 'ask-mcard-failed', `Could not allow: ${block.error || (result && result.error) || 'unknown error'}`));
+    rootEl.appendChild(body);
+    rootEl.appendChild(make('div', 'ask-card-err'));
+    if (block.state === 'proposed') {
+      const actions = make('div', 'ask-mcard-actions');
+      const btn = (cls, text, attr) => { const b = make('button', cls, text); b.type = 'button'; b.setAttribute(attr, ''); return b; };
+      const decline = btn('ask-card-not-now', 'Deny', 'data-ask-web-decline');
+      decline.addEventListener('click', () => postCard(block, rootEl, { state: 'declined' }, decline));
+      const always = btn('ask-card-not-now', 'Always allow', 'data-ask-web-always');
+      always.title = `Adds ${host} to Settings → Ask Worca → Web access`;
+      always.addEventListener('click', () => postCard(block, rootEl, { state: 'applied', scope: 'always' }, always));
+      const chat = btn('ask-card-start', 'Allow for this chat', 'data-ask-web-chat');
+      chat.addEventListener('click', () => postCard(block, rootEl, { state: 'applied', scope: 'chat' }, chat));
+      actions.append(make('span', 'ask-card-actions-spacer'), decline, always, chat);
+      rootEl.appendChild(actions);
+    }
+    return { el: rootEl };
+  }
+
   /** The clone card (propose_clone_project): proposed → cloning → applied | failed, or declined. Every value is text. */
   function buildCloneCard(block) {
     const card = block.card || {};
@@ -2480,6 +2592,12 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
             closePopover({ focusTrigger: true });
           });
           item.appendChild(make('span', 'ask-model-name', m.label || m.id));
+          const cb = credentialBadge(m.id);
+          if (cb) {
+            const t = make('span', `ask-model-tag ${cb.missing ? 'is-err' : 'is-key'}`, cb.text);
+            t.title = cb.title;
+            item.appendChild(t);
+          }
           if (m.id === cur().model) item.appendChild(make('span', 'ask-model-check', '✓'));
           p.appendChild(item);
         }
@@ -3122,7 +3240,7 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
   function isProgressBlock(block) {
     const card = block.card || {};
     if (card.type === PROGRESS_CARD_TYPE) return true;
-    if (card.type === 'workflow' || card.type === 'metrics' || card.type === 'policy' || card.type === 'schedule' || card.type === 'model' || card.type === 'clone') return false;
+    if (card.type === 'workflow' || card.type === 'metrics' || card.type === 'policy' || card.type === 'schedule' || card.type === 'model' || card.type === 'clone' || card.type === 'web') return false;
     return block.state === 'started' || (block.state === 'failed' && !!block.runId);
   }
   function buildCard(block) {
@@ -3134,14 +3252,16 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     const isSchedule = !!(block.card && block.card.type === 'schedule');
     const isModel = !!(block.card && block.card.type === 'model');
     const isClone = !!(block.card && block.card.type === 'clone');
+    const isWeb = !!(block.card && block.card.type === 'web');
     const isProgress = isProgressBlock(block);
-    if (cached && cached.state === block.state && (isWorkflow || isMetrics || isSchedule || isModel || isClone || isProgress || block.state === 'proposed')) return cached.el;
+    if (cached && cached.state === block.state && (isWorkflow || isMetrics || isSchedule || isModel || isClone || isWeb || isProgress || block.state === 'proposed')) return cached.el;
     if (cached) disposeCardEntry(cached);
     const built = isWorkflow ? buildWorkflowCard(block, cached)
       : isMetrics ? buildMetricsCard(block)
       : isSchedule ? buildScheduleCard(block)
       : isModel ? buildModelCard(block)
       : isClone ? buildCloneCard(block)
+      : isWeb ? buildWebCard(block)
       : isProgress ? buildProgressCard(block)
         : { el: block.state === 'proposed' ? buildCardForm(block) : buildCardTerminal(block) };
     st.cardEls.set(block.id, { el: built.el, state: block.state, handle: built.handle || null, dispose: built.dispose || null, animate: !!built.animate, cancelAnim: null, lastW: -1 });
@@ -3386,10 +3506,15 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
       // Stopped after — and nothing more while the turn is live: the orb row at the
       // bottom of the message owns the elapsed and the meter, and printing either
       // set twice is the noise this replaced. A turn that ended badly says so
-      // instead of Done; nothing else marks a stop.
+      // instead of Done; nothing else marks a stop. A turn that ended before any
+      // result, or within a few ms (a signed-out CLI answers in ~20 ms), has no
+      // duration worth printing: plain Stopped, never a dangling "Stopped after"
+      // or "Stopped after 0.0s".
       if (!isLive) {
-        if (stopped) parts.push(make('span', 'ask-activity-label', 'Stopped after'));
-        parts.push(make('span', 'ask-activity-elapsed', fmtElapsed(r.durationMs) || ''));
+        const shown = fmtElapsed(r.durationMs);
+        const elapsed = shown && shown !== '0.0s' ? shown : '';
+        if (stopped) parts.push(make('span', 'ask-activity-label', elapsed ? 'Stopped after' : 'Stopped'));
+        parts.push(make('span', 'ask-activity-elapsed', elapsed));
         parts.push(make('span', 'ask-activity-spacer'));
         const meter = [fmtCtx(r.usage && r.usage.ctx), fmtUsd(r.costUsd)].filter(Boolean).join(' · ');
         parts.push(make('span', 'ask-activity-meter', meter));
@@ -3515,7 +3640,7 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
       if (b.kind === 'notice') parts.push(`n:${b.id ?? ''}:${b.text || ''}:${b.href || ''}`);
       else if (b.kind === 'card') parts.push(`c:${b.id}:${b.state || ''}:${(b.card && b.card.type) || ''}:${b.runId || ''}:${b.error || ''}`);
     }
-    parts.push(`r:${row.status || ''}:${row.errorMessage || ''}:${isLiveRow(row) ? 1 : 0}`);
+    parts.push(`r:${row.status || ''}:${row.errorMessage || ''}:${row.errorCode || ''}:${isLiveRow(row) ? 1 : 0}`);
     return parts.join('|');
   }
 
@@ -3565,7 +3690,15 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
         }
         if (cur.status === 'error') {
           const explained = (cur.blocks || []).some((b) => b && b.kind === 'notice');
-          if (cur.errorMessage) wrap.appendChild(make('div', 'ask-error-line', cur.errorMessage));
+          if (cur.errorCode === 'claude-signed-out' && typeof openClaudeSetup === 'function') {
+            // The CLI's raw "Not logged in" → one line whose link opens Connect Claude Code.
+            const line = make('div', 'ask-error-line', "Claude Code isn't signed in. ");
+            const link = make('a', '', 'Sign in…');
+            link.href = '#';
+            link.addEventListener('click', (e) => { e.preventDefault(); openClaudeSetup(); });
+            line.appendChild(link);
+            wrap.appendChild(line);
+          } else if (cur.errorMessage) wrap.appendChild(make('div', 'ask-error-line', cur.errorMessage));
           else if (!explained) wrap.appendChild(make('div', 'ask-error-line', 'This turn ended with an error.'));
         }
         if (isLiveRow(cur)) {
@@ -3643,12 +3776,16 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     // A SWITCH starts a fresh ledger, so the new chat rises in. A resync or a
     // reconnect re-loads the SAME thread and must keep it: those repaint rows the
     // user is already reading, mid-turn.
-    if (st.threadId !== id) st.seenRows = new Set();
+    const switched = st.threadId !== id;
+    if (switched) st.seenRows = new Set();
     st.threadId = id;
     st.model = createThreadModel({ threadId: id });
     st.model.load(snap);
     el.title.textContent = (snap.thread && snap.thread.title) || 'Ask Worca';
     applyThreadScope(snap.thread && snap.thread.context);   // #397: restore the pin
+    // The picker follows the chat — on a SWITCH only: a resync of the same thread
+    // would otherwise clobber a pick the user just made (its PATCH may not have landed).
+    if (switched) applyThreadPick(snap.thread);
     renderTranscript();
     updateMeters();
     // P4: the count rides the snapshot loadThread ALREADY fetched — no extra GET.

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}`;
 }
 
@@ -148,6 +151,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; }
@@ -198,8 +214,10 @@ 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).
+  const brokered = !!(p.broker && p.broker.enabled);
+  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;
@@ -245,6 +263,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 +310,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 +445,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 +494,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 +546,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 +568,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 +687,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 +708,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 +803,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 +817,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 +869,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 +903,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;