synabun 2.0.0 → 2.0.7

package/neural-interface/public/shared/assistant/asst-route.js

@@ -16,12 +16,14 @@
 // open. `synabun.route` events (phase card|auto|decided|pending|expired|
 // declined|cancelled) update the line in place by routeId.
 
-import { clampEffortId, getEffortLevelsForModel, modelEffortIds } from '../agent-runtime-options.js';
 import { getProviderMeta } from '../provider-icons.js';
-import { fetchManageCatalog, getRouting, patchHiddenModels, putRouting } from './asst-api.js';
-import { catalogModelRow, fmtModelPrice, hiddenModelFor, ICON_CARET, invalidateModelCatalog, loadModelCatalog, openModelMenu } from './asst-brain-picker.js';
+import { fetchManageCatalog, patchHiddenModels } from './asst-api.js';
+import { catalogModelRow, fmtModelPrice, hiddenModelFor, ICON_CARET, invalidateModelCatalog, openModelMenu } from './asst-brain-picker.js';
+// The Routes editor's model lists (where they come from, how they stay current): asst-route-models.js.
 import { closeMenu, isMenuOpen, openMenu } from './asst-menu.js';
 import { decorateControlHead } from './asst-control.js';
+import { accountSummary } from '../account-view.js';
+import { accountUsageText, autoAccountLabel } from '../account-usage.js';
 import {
   DEFAULT_ROUTE_MODE,
   fmtConfidence,
@@ -39,6 +41,18 @@ function obj(v) { return v && typeof v === 'object' && !Array.isArray(v) ? v : n
 function arr(v) { return Array.isArray(v) ? v : []; }
 function firstStr(...values) { for (const v of values) { const s = str(v); if (s) return s; } return ''; }
 
+export function routeDisplayAccount(target, t = null) {
+  if (target?.accountId === 'auto') return autoAccountLabel(t);
+  if (target?.account) return [accountSummary(target.account, target.provider === 'codex' ? 'codex' : 'claude'), accountUsageText(target.account, t)].join(' · ');
+  return target?.accountId ? tf(t)('assistant.routes.account.removed', '{id} · account removed', { id: target.accountId }) : '';
+}
+function routeAccountError(error, t) {
+  if (error?.code === 'ACCOUNT_NO_SUBSCRIPTION') return tf(t)('assistant.accountUsage.noSubscription', 'Auto requires a signed-in subscription account.');
+  return error?.code === 'ACCOUNT_NOT_FOUND'
+    ? tf(t)('assistant.routes.account.removedHint', 'Account removed. Save another account choice before running this route.')
+    : tf(t)('assistant.routes.account.signedOut', 'Signed out. Sign in from the provider account menu before running this route.');
+}
+
 /** Local translator: hooks.t when it resolves, else the fallback with {param} interpolation. */
 function tf(t) {
   return (key, fallback, params) => {
@@ -63,13 +77,12 @@ export function routeModeLabel(mode, t) {
   return tr('assistant.routes.mode.unsure', 'Ask when unsure');
 }
 
-export function routeModeDescription(mode, model, t) {
+export function routeModeDescription(mode, model, t, askBelow = 0.75) {
   const tr = tf(t);
-  const who = str(model) || tr('assistant.routes.theBrain', 'The assistant');
   const m = normalizeRouteMode(mode, DEFAULT_ROUTE_MODE);
-  if (m === 'always-ask') return tr('assistant.routes.mode.alwaysDesc', 'Show the route card before every task.');
-  if (m === 'never') return tr('assistant.routes.mode.neverDesc', '{model} sorts each request; your task routes apply without asking.', { model: who });
-  return tr('assistant.routes.mode.unsureDesc', '{model} routes on its own when confident, asks otherwise.', { model: who });
+  if (m === 'always-ask') return tr('assistant.routes.mode.alwaysDesc', 'Confirm every actionable task.');
+  if (m === 'never') return tr('assistant.routes.mode.neverDesc', 'Run saved routes immediately; otherwise the assistant chooses.');
+  return tr('assistant.routes.mode.unsureDesc', 'Confirm below {pct}% confidence or when a model cannot run the task.', { pct: Math.round(askBelow * 100) });
 }
 
 // ── Pure model ──────────────────────────────────────────────────────────────
@@ -94,6 +107,7 @@ function normalizeRouteOption(o) {
     provider: normalizeProvider(src.provider, str(src.provider) || null),
     model: str(src.model),
     effort: str(src.effort) || null,
+    ...(Object.hasOwn(src, 'accountId') ? { accountId: src.accountId, account: obj(src.account), accountError: obj(src.accountError) } : {}),
     label: str(src.label),
     badge: str(src.badge) || null,
     tier: str(src.tier) || null,
@@ -102,6 +116,7 @@ function normalizeRouteOption(o) {
     contextWindow: num(src.contextWindow),
     reason: str(src.reason),
     warning: str(src.warning) || null,
+    budget: str(src.budget) || null,
     disabled: src.disabled === true,
     disabledReason: str(src.disabledReason) || null,
   };
@@ -175,7 +190,7 @@ export function sameRouteTarget(a, b) {
   return (str(a.kind) || 'direct') === (str(b.kind) || 'direct')
     && str(a.provider) === str(b.provider)
     && modelKey(a.model) === modelKey(b.model)
-    && (str(a.effort) || '') === (str(b.effort) || '');
+    && (str(a.effort) || '') === (str(b.effort) || '') && str(a.accountId) === str(b.accountId);
 }
 
 const BADGE_RANK = { suggested: 0, remembered: 1, current: 2, capable: 3, cheaper: 4, stronger: 5 };
@@ -208,7 +223,7 @@ function badgeText(o, n, tr) {
   const pct = fmtConfidence(n?.confidence);
   switch (o.badge) {
     case 'suggested': return pct ? tr('assistant.routes.badge.suggestedPct', 'Suggested · {pct}', { pct }) : tr('assistant.routes.badge.suggested', 'Suggested');
-    case 'remembered': return tr('assistant.routes.badge.remembered', 'Remembered');
+    case 'remembered': return tr('assistant.routes.badge.remembered', 'Your choice');
     case 'current': return tr('assistant.routes.badge.current', 'Current');
     case 'capable':
       if (!n?.requires && n?.visionOnly) return tr('assistant.routes.badge.canSee', 'Can see');
@@ -270,6 +285,7 @@ export function routeOptions(n, { brainLabel = '', t = null } = {}) {
       // "here" is the brain's own model: prefer its display label over a raw id.
       title: isHere ? tr('assistant.routes.doHere', 'Do it here with {model}', { model: str(o.label) || hereModel }) : (label || o.id),
       badgeText: badgeText(o, n, tr),
+      disabledReason: o.budget === 'share_used_up' ? routeBudgetReason({ provider: o.provider }, t) : o.disabledReason,
       selected: o.id === defaultId,
     };
   });
@@ -344,6 +360,23 @@ export function designRouteSight(pref, catalog) {
   return row.status === 'unavailable' ? 'unavailable' : 'ok';
 }
 
+/** Saved ids may resolve through a listed alias; all metadata still comes from this catalog. */
+export function routeCatalogRow(pref, catalog) {
+  if (!pref?.provider || !catalog) return null;
+  const rows = Array.isArray(catalog[pref.provider]) ? catalog[pref.provider] : [];
+  return pref.model ? catalogModelRow(pref.provider, pref.model, catalog) || aliasRow(pref.provider, pref.model, rows) : rows.find(m => m.isDefault) || null;
+}
+
+/** Budget messages are UI copy; never show the server's English disabledReason. */
+export function routeBudgetReason({ provider, dry } = {}, t) {
+  const tr = tf(t), names = { 'claude-code': 'Claude Code', codex: 'Codex', opencode: 'OpenCode' };
+  if (provider) return tr('assistant.routes.budgetProvider', "Budget: the {provider} share of this session's budget is used up.", { provider: names[provider] || provider });
+  const list = [...new Set(arr(dry))].map(id => names[id] || id);
+  if (!list.length) return tr('assistant.routes.budgetSpent', "Budget: this session's budget is spent.");
+  return tr(list.length === 1 ? 'assistant.routes.budgetDryOne' : 'assistant.routes.budgetDryMany',
+    list.length === 1 ? 'Budget: the {list} share is used up.' : 'Budget: the {list} shares are used up.', { list: list.join(', ') });
+}
+
 /** Text parts of a route line (pure). */
 export function routeLineParts(route, phase = 'decided', { brainLabel = '', t = null } = {}) {
   const tr = tf(t);
@@ -360,17 +393,21 @@ export function routeLineParts(route, phase = 'decided', { brainLabel = '', t =
   else if (phase === 'declined' && str(r.reasonCode) === 'no_capable_model') {
     state = str(r.needs) === 'vision' ? tr('assistant.routes.reason.noSeeingModel', 'no model can see images') : tr('assistant.routes.reason.noCapableModel', 'no model can make this');
   }
+  else if (str(r.reasonCode) === 'budget_exhausted') state = routeBudgetReason({ dry: r.dry }, t);
   else if (phase === 'declined') state = tr('assistant.routes.state.declined', 'declined');
   else if (phase === 'cancelled') state = tr('assistant.routes.state.cancelled', 'cancelled');
   let decided = '';
-  switch (str(r.decidedBy)) {
+  switch (r.source === 'budget' ? 'budget' : str(r.decidedBy)) {
+    case 'budget': decided = tr('assistant.routes.budgetDecision', 'budget re-route'); break;
     case 'brain': decided = tr('assistant.routes.decidedBy', 'decided by {model}', { model: brainLabel || tr('assistant.routes.theBrainLower', 'the assistant') }); break;
     case 'user': decided = tr('assistant.routes.youChose', 'you chose'); break;
-    case 'remembered': decided = tr('assistant.routes.remembered', 'remembered'); break;
+    case 'remembered': decided = tr('assistant.routes.remembered', 'your saved choice'); break;
     case 'timeout': decided = tr('assistant.routes.timeout', 'default after timeout'); break;
-    default: decided = r.remembered ? tr('assistant.routes.remembered', 'remembered') : '';
+    default: decided = r.remembered ? tr('assistant.routes.remembered', 'your saved choice') : '';
   }
   const meta = [];
+  const accountLabel = routeDisplayAccount(target, t);
+  if (accountLabel) meta.push(accountLabel);
   if (effort && effort !== 'off') meta.push(effort);
   if (confidence) meta.push(confidence);
   return {
@@ -384,7 +421,7 @@ export function routeLineParts(route, phase = 'decided', { brainLabel = '', t =
     muted: phase === 'expired' || phase === 'declined' || phase === 'cancelled',
     pending: phase === 'pending' || phase === 'card',
     decidedText: decided,
-    reason: str(r.reason),
+    reason: target?.accountError ? routeAccountError(target.accountError, t) : str(r.reason),
     alternatives: arr(r.alternatives).map(a => routeTargetLabel(a, { effort: true })).filter(Boolean),
     corrections: arr(r.corrections).map(c => correctionText(c, tr)).filter(Boolean),
   };
@@ -394,9 +431,15 @@ export function routeLineParts(route, phase = 'decided', { brainLabel = '', t =
 function correctionText(c, tr) {
   if (typeof c === 'string') return c;
   if (!c || typeof c !== 'object') return '';
+  if (['account_auto', 'account_limited', 'accounts_all_limited'].includes(c.reason) && c.usage) {
+    const key = c.reason === 'account_auto' ? 'autoPicked' : c.reason === 'account_limited' ? 'fallbackPicked' : 'allLimitedPicked';
+    const fallbacks = { autoPicked: 'Auto chose {to}: {usage}', fallbackPicked: '{from} out of usage → {to}: {usage}', allLimitedPicked: 'All subscriptions limited; soonest reset → {to}: {usage}' };
+    const text = tr(`assistant.accountUsage.${key}`, fallbacks[key], { from: str(c.from), to: str(c.to), usage: accountUsageText({ mode: 'subscription', usage: c.usage }, (key, params) => tr(key, key, params)) });
+    return text + (c.workerForAccount ? ' · ' + tr('assistant.accountUsage.directWorkerHint', 'Runs on a worker because this conversation belongs to another account.') : '');
+  }
   if (c.reason === 'remembered_route') return tr('assistant.routes.correction.remembered', 'your saved route {to} replaced {from}', { to: str(c.to), from: str(c.from) });
   if (c.reason === 'remembered_disabled') return tr('assistant.routes.correction.rememberedDisabled', 'saved route {from} is disabled, kept the pick', { from: str(c.from) });
-  const text = firstStr(c.text, c.summary);
+  const text = firstStr(c.text, c.summary, c.message);
   if (text) return text;
   if (c.field && (c.from || c.to)) return `${c.field}: ${str(c.from) || '—'} → ${str(c.to) || 'default'}`;
   return str(c.field);
@@ -410,6 +453,14 @@ export function routeLineText(route, phase, opts) {
   return [`⇄ ${p.taskClass} → ${head}`, ...p.meta].join(' · ');
 }
 
+/** Everything the one-line row can cut short (meta, state included): its tooltip. */
+export function routeLineTitle(route, phase, opts) {
+  const p = routeLineParts(route, phase, opts);
+  const tail = [p.kindLabel, p.targetLabel, ...p.meta, p.stateText].filter(Boolean).join(' · ');
+  if (!tail) return `⇄ ${p.taskClass}`;
+  return `⇄ ${p.taskClass} ${p.kindLabel || p.targetLabel ? '→' : '·'} ${tail}`;
+}
+
 // ═══════════════════════════════════════════
 // DOM
 // ═══════════════════════════════════════════
@@ -443,8 +494,12 @@ function providerColor(provider) {
 let _lineUid = 0;
 
 /**
- * The compact route line. opts: { phase, t, providerIcon, brainLabel() , onChangeRoutes() }
- * Returns { el, routeId, update(route, phase) }.
+ * The compact route line, always one line: the glyph, arrow, kind and mark
+ * hold; the rest (model · account · usage, or the state) gives way first,
+ * then the class; the title has it all. data-live: "waiting" while it waits
+ * for a choice, "working" while a run it dispatched is (setRunning).
+ * opts: { phase, t, providerIcon, brainLabel() , onChangeRoutes() }
+ * Returns { el, routeId, update(route, phase), setRunning(on) }.
  */
 export function createRouteLine(route, opts = {}) {
   const tr = tf(opts.t);
@@ -452,20 +507,19 @@ export function createRouteLine(route, opts = {}) {
   const detailId = `asst-route-detail-${++_lineUid}`;
   node.innerHTML = `
     <button type="button" class="asst-route-line-head" aria-expanded="false" aria-controls="${detailId}">
-      <span class="asst-route-glyph" aria-hidden="true">⇄</span>
+      <span class="asst-route-glyph asst-icon" aria-hidden="true">${ICON_ROUTE}</span>
       <span class="asst-route-class"></span>
       <span class="asst-route-arrow" aria-hidden="true">→</span>
       <span class="asst-route-kind"></span>
       <span class="asst-route-icon asst-icon" aria-hidden="true"></span>
-      <span class="asst-route-target"></span>
-      <span class="asst-route-meta"></span>
-      <span class="asst-route-state"></span>
+      <span class="asst-route-rest"><span class="asst-route-target"></span> <span class="asst-route-meta"></span> <span class="asst-route-state"></span></span>
       <span class="asst-route-chev" aria-hidden="true">&#x203A;</span>
+      <span class="asst-route-sweep" aria-hidden="true"></span>
     </button>
     <div class="asst-route-detail" id="${detailId}" hidden></div>`;
   const head = node.querySelector('.asst-route-line-head');
   const detail = node.querySelector('.asst-route-detail');
-  let current = { route: obj(route) || {}, phase: opts.phase || 'decided' };
+  let current = { route: obj(route) || {}, phase: opts.phase || 'decided', running: false };
 
   head.addEventListener('click', () => {
     const open = head.getAttribute('aria-expanded') !== 'true';
@@ -481,6 +535,8 @@ export function createRouteLine(route, opts = {}) {
     node.dataset.phase = current.phase;
     node.classList.toggle('muted', p.muted);
     node.classList.toggle('pending', p.pending);
+    const live = p.pending ? 'waiting' : current.running && !p.muted && !p.stateText ? 'working' : '';
+    if (live) node.dataset.live = live; else delete node.dataset.live;
     node.querySelector('.asst-route-class').textContent = p.taskClass;
     const arrow = node.querySelector('.asst-route-arrow');
     const kindEl = node.querySelector('.asst-route-kind');
@@ -488,7 +544,7 @@ export function createRouteLine(route, opts = {}) {
     const targetEl = node.querySelector('.asst-route-target');
     const metaEl = node.querySelector('.asst-route-meta');
     const stateEl = node.querySelector('.asst-route-state');
-    arrow.hidden = !p.targetLabel && !p.pending;
+    arrow.hidden = !p.targetLabel && !p.pending && !p.kindLabel;
     kindEl.textContent = p.kindLabel;
     kindEl.hidden = !p.kindLabel;
     iconEl.innerHTML = p.targetLabel ? providerIconHtml(p.provider, opts) : '';
@@ -500,7 +556,9 @@ export function createRouteLine(route, opts = {}) {
     metaEl.hidden = !p.meta.length;
     stateEl.textContent = p.stateText;
     stateEl.hidden = !p.stateText;
+    node.querySelector('.asst-route-rest').hidden = targetEl.hidden && metaEl.hidden && stateEl.hidden;
     head.setAttribute('aria-label', routeLineText(current.route, current.phase, { brainLabel, t: opts.t }));
+    head.title = routeLineTitle(current.route, current.phase, { brainLabel, t: opts.t });
 
     detail.innerHTML = '';
     const rows = [];
@@ -529,6 +587,12 @@ export function createRouteLine(route, opts = {}) {
       if (phase) current.phase = phase;
       render();
     },
+    /** A run this route dispatched is queued or working (the renderer knows from its run cards). */
+    setRunning(on) {
+      if (current.running === !!on) return;
+      current.running = !!on;
+      render();
+    },
   };
 }
 
@@ -598,7 +662,7 @@ export function createRouteModeControl(hostEl, hooks = {}) {
           kind: 'radio',
           id,
           label: routeModeLabel(id, hooks.t),
-          desc: routeModeDescription(id, model, hooks.t),
+          desc: routeModeDescription(id, model, hooks.t, hooks.getMode?.()?.askBelow ?? 0.75),
           selected: id === mode,
           onSelect: () => { if (id !== mode) hooks.onChange?.(id); },
         })),
@@ -699,7 +763,7 @@ export function renderRouteCard(container, input, hooks = {}) {
     row.setAttribute('aria-disabled', o.disabled ? 'true' : 'false');
     row.tabIndex = -1;
     const kindWord = o.kind && o.kind !== 'direct' ? routeKindLabel(o.kind) : '';
-    const sub = [kindWord, o.effort && o.effort !== 'off' ? o.effort : '', o.price ? priceText(o.price) : '', o.vision ? tr('assistant.brain.vision', 'vision') : '', o.reason].filter(Boolean).join(' · ');
+    const sub = [kindWord, routeDisplayAccount(o, hooks.t), o.effort && o.effort !== 'off' ? o.effort : '', o.price ? priceText(o.price) : '', o.vision ? tr('assistant.brain.vision', 'vision') : '', o.reason].filter(Boolean).join(' · ');
     row.innerHTML = `
       <span class="asst-route-num" aria-hidden="true">${esc(o.number)}</span>
       <span class="asst-route-opt-icon asst-icon" aria-hidden="true"${o.provider ? ` style="color:${esc(providerColor(o.provider))}"` : ''}>${providerIconHtml(o.provider, hooks)}</span>
@@ -712,7 +776,7 @@ export function renderRouteCard(container, input, hooks = {}) {
     row.querySelector('.asst-route-opt-title').textContent = o.title;
     if (sub) row.querySelector('.asst-route-opt-sub').textContent = sub;
     const warn = row.querySelector('.asst-route-opt-warn');
-    if (warn) warn.textContent = o.disabled && o.disabledReason ? o.disabledReason : o.warning;
+    if (warn) warn.textContent = o.accountError ? routeAccountError(o.accountError, hooks.t) : o.disabled && o.disabledReason ? o.disabledReason : o.warning;
     if (o.badgeText) row.querySelector('.asst-route-badge').textContent = o.badgeText;
     row.addEventListener('click', () => { if (!o.disabled) select(o.id, { focus: true }); });
     return row;
@@ -779,7 +843,7 @@ export function renderRouteCard(container, input, hooks = {}) {
         state.other = {
           id: 'other', kind, provider: target.provider, model: target.model, effort: null,
           label: target.label || '', badge: null, number: options.length + 1, here: false,
-          title: target.label || target.model, badgeText: tr('assistant.routes.badge.other', 'Your pick'),
+          title: target.label || target.model, badgeText: tr('assistant.routes.badge.other', 'Your choice'),
           vision: target.vision === true, price: target.price || null, reason: '', warning: null, disabled: false,
         };
         state.selectedId = 'other';
@@ -798,7 +862,7 @@ export function renderRouteCard(container, input, hooks = {}) {
     rememberInput.type = 'checkbox';
     rememberInput.addEventListener('change', () => { state.remember = rememberInput.checked; });
     // `remember.label` is the task-class label ("Code"), not a sentence.
-    const text = tr('assistant.routes.rememberFor', 'Remember for {taskClass} tasks', { taskClass: (n.remember.label || n.taskClassLabel).toLowerCase() });
+    const text = tr('assistant.routes.rememberFor', 'Use this choice for {taskClass} tasks', { taskClass: (n.remember.label || n.taskClassLabel).toLowerCase() });
     label.append(rememberInput, el('span', null, text));
     if (n.remember.current) label.appendChild(el('span', 'asst-route-remember-current', tr('assistant.routes.rememberCurrent', 'now: {current}', { current: n.remember.current })));
     card.appendChild(label);
@@ -1005,321 +1069,9 @@ export function renderRouteCard(container, input, hooks = {}) {
   return entry;
 }
 
-// ── Routes editor (modal) ───────────────────────────────────────────────────
-
-let _editor = null;
-
-/**
- * "Model routes…" editor. hooks: { t, providerIcon, getBrain() → brain, onSaved(routing), onClose() }
- * Returns { el, close } (async: resolves after the first load).
- */
-export async function openRoutesEditor(hooks = {}) {
-  if (_editor) { _editor.close(); }
-  const tr = tf(hooks.t);
-  const overlay = el('div', 'asst-modal-overlay');
-  overlay.setAttribute('role', 'dialog');
-  overlay.setAttribute('aria-modal', 'true');
-  overlay.setAttribute('aria-label', tr('assistant.routes.editorTitle', 'Model routes'));
-  const modal = el('div', 'asst-modal asst-routes-modal');
-  modal.innerHTML = `
-    <div class="asst-modal-head"><span class="asst-icon" aria-hidden="true">${ICON_ROUTE}</span><span>${esc(tr('assistant.routes.editorTitle', 'Model routes'))}</span><button type="button" class="asst-iconbtn asst-modal-close" aria-label="${esc(tr('common.close', 'Close'))}">${ICON_X}</button></div>
-    <div class="asst-modal-body"><div class="asst-modal-note">${esc(tr('common.loading', 'Loading...'))}</div></div>
-    <div class="asst-modal-foot">
-      <button type="button" class="asst-btn asst-btn-secondary asst-routes-reset-all">${esc(tr('assistant.routes.resetAll', 'Reset all'))}</button>
-      <span class="asst-modal-spacer"></span>
-      <button type="button" class="asst-btn asst-btn-secondary asst-routes-cancel">${esc(tr('common.cancel', 'Cancel'))}</button>
-      <button type="button" class="asst-btn asst-btn-primary asst-routes-save">${esc(tr('common.save', 'Save'))}</button>
-    </div>`;
-  overlay.appendChild(modal);
-  const body = modal.querySelector('.asst-modal-body');
-  const saveBtn = modal.querySelector('.asst-routes-save');
-  const resetAllBtn = modal.querySelector('.asst-routes-reset-all');
-  const returnTo = document.activeElement;
-
-  const state = { data: null, catalog: null, version: null, defaultMode: DEFAULT_ROUTE_MODE, prefs: {}, patch: {}, error: '', conflict: false, saving: false };
-
-  function close() {
-    if (!overlay.isConnected) return;
-    closeMenu();
-    document.removeEventListener('keydown', onKey, true);
-    overlay.remove();
-    _editor = null;
-    try { hooks.onClose?.(); } catch { /* ignore */ }
-    if (returnTo?.isConnected) { try { returnTo.focus({ preventScroll: true }); } catch { /* ignore */ } }
-  }
-  function onKey(e) {
-    if (e.key === 'Escape') {
-      if (isMenuOpen()) return; // the menu closes itself first
-      e.preventDefault(); e.stopPropagation(); close();
-      return;
-    }
-    e.stopPropagation();
-  }
-  document.addEventListener('keydown', onKey, true);
-  overlay.addEventListener('mousedown', (e) => { if (e.target === overlay) close(); });
-  modal.querySelector('.asst-modal-close').addEventListener('click', close);
-  modal.querySelector('.asst-routes-cancel').addEventListener('click', close);
-  document.body.appendChild(overlay);
-  _editor = { close };
-
-  function effectivePref(key) {
-    return Object.prototype.hasOwnProperty.call(state.patch, key) ? state.patch[key] : (state.prefs[key] || null);
-  }
-
-  function sourceOf(key) {
-    if (Object.prototype.hasOwnProperty.call(state.patch, key)) return state.patch[key] ? 'yours' : 'default';
-    const pref = state.prefs[key];
-    if (!pref) return 'default';
-    return pref.by === 'user' ? 'yours' : 'remembered';
-  }
-
-  function sourceLabel(source) {
-    if (source === 'disabled') return tr('assistant.routes.source.disabled', 'disabled');
-    if (source === 'incapable') return tr('assistant.routes.source.incapable', 'incapable');
-    if (source === 'yours') return tr('assistant.routes.source.yours', 'yours');
-    if (source === 'remembered') return tr('assistant.routes.source.remembered', 'remembered');
-    return tr('assistant.routes.source.default', 'default');
-  }
-
-  /** Does the route's model generate `medium`? true | false | null (the catalog cannot tell). */
-  function routeMakes(pref, medium) {
-    if (!medium || !pref?.provider || !state.catalog) return null;
-    const rows = Array.isArray(state.catalog[pref.provider]) ? state.catalog[pref.provider] : [];
-    const row = pref.model ? catalogModelRow(pref.provider, pref.model, state.catalog) : rows.find(m => m.isDefault) || null;
-    if (!row?.outputs || typeof row.outputs !== 'object') return null;
-    return row.outputs[medium] === true;
-  }
-  /** No model in the loaded catalog makes `medium` (false while the catalog has no output data). */
-  function noMaker(medium) {
-    const rows = Object.values(state.catalog || {}).flatMap(list => (Array.isArray(list) ? list : []));
-    return rows.some(m => m?.outputs && typeof m.outputs === 'object') && !rows.some(m => m?.outputs?.[medium] === true);
-  }
-  /** No model in the loaded catalog can see (false while no catalog is loaded). */
-  function noSeer() {
-    const rows = Object.values(state.catalog || {}).flatMap(list => (Array.isArray(list) ? list : []));
-    return rows.length > 0 && !rows.some(m => m?.vision === true);
-  }
-
-  function taskRows() {
-    const classes = Array.isArray(state.data?.taskClasses) ? state.data.taskClasses.filter(c => c?.id) : [];
-    const rows = classes.map(c => ({
-      id: String(c.id), label: str(c.label) || humanizeClass(c.id), description: str(c.description), defaultKind: str(c.defaultKind) || 'direct',
-      // Image / video creation: only models that generate the medium, always on a worker; design: only models that can see.
-      requires: c.requires === 'image' || c.requires === 'video' ? c.requires : null, dispatchOnly: c.dispatchOnly === true, visionOnly: c.vision === true,
-    }));
-    if (!rows.some(r => r.id === 'vision')) rows.push({ id: 'vision', label: tr('assistant.routes.visionRow', 'Screenshots & images'), description: tr('assistant.routes.visionDesc', 'Used when a task needs a model that can see.'), defaultKind: 'direct' });
-    return rows;
-  }
-
-  function render() {
-    body.innerHTML = '';
-    if (state.error) {
-      const banner = el('div', 'asst-routes-error');
-      banner.setAttribute('role', 'alert');
-      banner.appendChild(el('span', null, state.error));
-      if (state.conflict) {
-        const reload = el('button', 'asst-btn asst-btn-secondary', tr('assistant.routes.reload', 'Reload'));
-        reload.type = 'button';
-        reload.addEventListener('click', () => load());
-        banner.appendChild(reload);
-      }
-      body.appendChild(banner);
-    }
-    if (!state.data) return;
-
-    // When to ask (default route mode)
-    const modeSection = el('section', 'asst-routes-section');
-    modeSection.appendChild(el('div', 'asst-routes-section-title', tr('assistant.routes.whenToAsk', 'When to ask')));
-    const modes = el('div', 'asst-routes-modes');
-    modes.setAttribute('role', 'radiogroup');
-    modes.setAttribute('aria-label', tr('assistant.routes.whenToAsk', 'When to ask'));
-    const brainName = hooks.brainName?.() || '';
-    for (const id of ROUTE_MODES) {
-      const b = el('button', 'asst-routes-mode');
-      b.type = 'button';
-      b.setAttribute('role', 'radio');
-      b.setAttribute('aria-checked', state.defaultMode === id ? 'true' : 'false');
-      b.dataset.mode = id;
-      b.innerHTML = `<span class="asst-routes-mode-label">${esc(routeModeLabel(id, hooks.t))}</span><span class="asst-routes-mode-desc">${esc(routeModeDescription(id, brainName, hooks.t))}</span>`;
-      b.addEventListener('click', () => { state.defaultMode = id; render(); modal.querySelector(`.asst-routes-mode[data-mode="${id}"]`)?.focus(); });
-      modes.appendChild(b);
-    }
-    modeSection.appendChild(modes);
-    body.appendChild(modeSection);
-
-    // Task routes
-    const section = el('section', 'asst-routes-section');
-    section.appendChild(el('div', 'asst-routes-section-title', tr('assistant.routes.taskRoutes', 'Task routes')));
-    const list = el('div', 'asst-routes-list');
-    for (const row of taskRows()) list.appendChild(taskRow(row));
-    section.appendChild(list);
-    body.appendChild(section);
-    saveBtn.disabled = state.saving;
-  }
-
-  function taskRow(row) {
-    const pref = effectivePref(row.id);
-    const medium = row.requires || null;
-    const seeing = !medium && row.visionOnly === true;
-    // A saved route onto a model the user hid is never applied (the brain decides); nor, for
-    // image / video creation, one onto a model that cannot generate the medium, or for design one
-    // the router would skip (not known to see, missing from the catalog, unavailable).
-    const sight = seeing && pref ? designRouteSight(pref, state.catalog) : null;
-    const source = pref?.model && hiddenModelFor(pref.provider, pref.model) ? 'disabled'
-      : medium && pref && routeMakes(pref, medium) === false ? 'incapable'
-        : sight && sight !== 'ok' ? 'incapable' : sourceOf(row.id);
-    const emptyLabel = medium ? tr('assistant.routes.noCapableModel', 'No model in your catalog can make {medium} yet.', { medium: mediumWords(medium, tr) })
-      : seeing ? tr('assistant.routes.noSeeingModel', 'No model in your catalog can see images yet.') : '';
-    const node = el('div', 'asst-routes-row');
-    node.dataset.taskClass = row.id;
-    const main = el('div', 'asst-routes-row-main');
-    main.appendChild(el('div', 'asst-routes-row-label', row.label));
-    if (row.description) main.appendChild(el('div', 'asst-routes-row-desc', row.description));
-    if ((medium && noMaker(medium)) || (seeing && noSeer())) main.appendChild(el('div', 'asst-routes-row-note', emptyLabel));
-    node.appendChild(main);
-
-    const modelBtn = el('button', 'asst-dd asst-routes-model');
-    modelBtn.type = 'button';
-    modelBtn.setAttribute('aria-haspopup', 'menu');
-    const label = pref ? routeTargetLabel(pref) : tr('assistant.routes.brainDecides', 'Let the brain decide');
-    modelBtn.innerHTML = `${pref?.provider ? `<span class="asst-icon" aria-hidden="true" style="color:${esc(providerColor(pref.provider))}">${providerIconHtml(pref.provider, hooks)}</span>` : ''}<span class="asst-dd-label"></span>`;
-    modelBtn.querySelector('.asst-dd-label').textContent = label;
-    modelBtn.setAttribute('aria-label', `${row.label}: ${label}`);
-    modelBtn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (isMenuOpen(modelBtn)) { closeMenu(); return; }
-      openModelMenu(modelBtn, {
-        brain: hooks.getBrain?.() || null,
-        t: hooks.t,
-        includeHere: true,
-        hereLabel: tr('assistant.routes.brainDecides', 'Let the brain decide'),
-        title: row.label,
-        current: pref ? { provider: pref.provider, model: pref.model } : null,
-        onToast: hooks.onToast,
-        // Image / video creation: only models that generate the medium (no custom id: its output is unknown);
-        // design: only models that can see.
-        ...(medium ? { accept: (_p, m) => m?.outputs?.[medium] === true, allowCustom: false, emptyLabel } : {}),
-        ...(seeing ? { accept: (_p, m) => m?.vision === true && m?.status !== 'unavailable', allowCustom: false, emptyLabel } : {}),
-        onSelect: (target) => {
-          if (target?.here) state.patch[row.id] = null;
-          else if (target?.model) {
-            // The effort survives when the new model runs it; otherwise the nearest level it does.
-            const ids = modelEffortIds(catalogModelRow(target.provider, target.model, state.catalog));
-            const effort = !pref?.effort ? null : (ids ? clampEffortId(pref.effort, ids) : (pref.provider === target.provider ? pref.effort : null));
-            state.patch[row.id] = { kind: row.defaultKind || 'direct', provider: target.provider, model: target.model, effort, label: target.label || '' };
-          }
-          render();
-          modal.querySelector(`.asst-routes-row[data-task-class="${CSS.escape(row.id)}"] .asst-routes-model`)?.focus();
-        },
-      });
-    });
-    node.appendChild(modelBtn);
-
-    // Exactly the selected model's levels (the provider list only for an unknown model).
-    const modelRow = pref?.provider ? catalogModelRow(pref.provider, pref.model, state.catalog) : null;
-    const efforts = pref?.provider ? getEffortLevelsForModel(pref.provider, modelRow) : [];
-    if (pref && efforts.some(e => e.id !== 'off')) {
-      const effortBtn = el('button', 'asst-dd asst-routes-effort');
-      effortBtn.type = 'button';
-      effortBtn.setAttribute('aria-haspopup', 'menu');
-      const level = efforts.find(e => e.id === pref.effort);
-      const autoLabel = modelRow?.defaultEffort
-        ? tr('assistant.routes.effortAutoDefault', 'auto ({effort})', { effort: efforts.find(e => e.id === modelRow.defaultEffort)?.label?.toLowerCase() || modelRow.defaultEffort })
-        : tr('assistant.routes.effortAuto', 'auto effort');
-      const effortLabel = level ? level.label
-        : pref.effort ? tr('assistant.routes.effortUnsupported', '{effort} · unsupported', { effort: pref.effort })
-          : autoLabel;
-      effortBtn.innerHTML = '<span class="asst-dd-label"></span>';
-      effortBtn.querySelector('.asst-dd-label').textContent = effortLabel;
-      effortBtn.setAttribute('aria-label', `${tr('assistant.brain.effort', 'Thinking effort')}: ${effortLabel}`);
-      effortBtn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        if (isMenuOpen(effortBtn)) { closeMenu(); return; }
-        openMenu(effortBtn, {
-          title: tr('assistant.brain.effort', 'Thinking effort'),
-          role: 'menu',
-          items: [
-            { kind: 'radio', id: '', label: autoLabel, selected: !pref.effort, onSelect: () => { state.patch[row.id] = { ...pref, effort: null }; render(); } },
-            ...efforts.filter(x => x.id !== 'off').map(x => ({ kind: 'radio', id: x.id, label: x.label, desc: x.desc || '', selected: pref.effort === x.id, onSelect: () => { state.patch[row.id] = { ...pref, effort: x.id }; render(); } })),
-          ],
-        });
-      });
-      node.appendChild(effortBtn);
-    }
-
-    const badge = el('span', 'asst-routes-source', sourceLabel(source));
-    badge.dataset.source = source;
-    if (source === 'incapable') {
-      badge.setAttribute('data-tooltip', !seeing ? tr('assistant.routes.incapableTip', "This model can't generate {medium}, so the route is not applied.", { medium: mediumWords(medium, tr) })
-        : sight === 'blind' ? tr('assistant.routes.incapableSeeTip', "This model can't see images, so the route is not applied.")
-          : sight === 'unavailable' ? tr('assistant.routes.unavailableTip', "This model isn't available right now, so the route is not applied.")
-            : tr('assistant.routes.unknownSeeTip', "This model isn't known to see images, so the route is not applied."));
-    }
-    node.appendChild(badge);
-
-    const reset = el('button', 'asst-iconbtn asst-routes-reset', '↺');
-    reset.type = 'button';
-    reset.setAttribute('aria-label', tr('assistant.routes.reset', 'Reset {taskClass}', { taskClass: row.label }));
-    reset.setAttribute('data-tooltip', tr('assistant.routes.resetTip', 'Back to default'));
-    reset.hidden = source === 'default';
-    reset.addEventListener('click', () => { state.patch[row.id] = null; render(); });
-    node.appendChild(reset);
-    return node;
-  }
-
-  async function load() {
-    state.error = '';
-    state.conflict = false;
-    try {
-      const [data, catalog] = await Promise.all([getRouting(), loadModelCatalog().catch(() => null)]);
-      state.catalog = catalog || null;
-      state.data = data || {};
-      state.version = data?.version ?? null;
-      state.defaultMode = normalizeRouteMode(data?.routing?.defaultMode, DEFAULT_ROUTE_MODE);
-      state.prefs = obj(data?.routing?.preferences) ? { ...data.routing.preferences } : {};
-      state.patch = {};
-    } catch (err) {
-      state.data = null;
-      state.error = err?.status === 404
-        ? tr('assistant.routes.unavailable', 'Model routing is not available on this server yet.')
-        : `${tr('assistant.routes.loadFailed', 'Could not load model routes')}: ${err?.message || err}`;
-    }
-    render();
-    modal.querySelector('.asst-routes-mode[aria-checked="true"]')?.focus();
-  }
-
-  resetAllBtn.addEventListener('click', () => {
-    for (const key of new Set([...Object.keys(state.prefs), ...Object.keys(state.patch)])) state.patch[key] = null;
-    render();
-  });
-
-  saveBtn.addEventListener('click', async () => {
-    if (!state.data || state.saving) return;
-    state.saving = true;
-    saveBtn.disabled = true;
-    const patch = { defaultMode: state.defaultMode };
-    if (Object.keys(state.patch).length) patch.preferences = { ...state.patch };
-    try {
-      const res = await putRouting(patch, state.version);
-      try { hooks.onSaved?.(res?.routing || null, res); } catch { /* ignore */ }
-      close();
-    } catch (err) {
-      state.saving = false;
-      if (err?.status === 409 || err?.code === 'VERSION_CONFLICT') {
-        state.error = tr('assistant.routes.conflict', 'Changed elsewhere — reload');
-        state.conflict = true;
-      } else if (err?.code === 'ROUTING_INVALID') {
-        state.error = tr('assistant.routes.invalidField', 'Invalid routing setting: {field}', { field: err?.message || '' });
-      } else {
-        state.error = `${tr('assistant.routes.saveFailed', 'Could not save')}: ${err?.message || err}`;
-      }
-      render();
-    }
-  });
-
-  await load();
-  return { el: overlay, close };
-}
+// ── Routes editor (draft, modes, task choices) ───────────────────────────────
+// Its model lists still come only through asst-route-models.js.
+export { openRoutesEditor } from './asst-routes-editor.js';
 
 // ── Models manager (Assistant → Models…) ───────────────────────────────────