synabun 2.0.7 → 2.0.10

package/neural-interface/public/shared/assistant/asst-brain-picker.js

@@ -29,11 +29,14 @@ import {
 import { getHiddenModels, HIDDEN_MODELS_EVENT, hiddenModelMatch } from '../ocp-hidden-models.js';
 import { getProviderMeta } from '../provider-icons.js';
 import { on } from '../state.js';
+import { registerLaunchPrefetch } from '../launch-prefetch.js';
 import { fetchAssistantCatalog, fetchProjects, patchClaudeAccount, patchCodexAccount, setClaudeWorkerAccount, setCodexWorkerAccount } from './asst-api.js';
-import { accountBadge, accountCompactMode, accountIdentity, accountName, accountUsable, modeChoices } from '../account-view.js';
-import { accountUsageText, autoAccountLabel } from '../account-usage.js';
+import { accountBadge, accountIdentity, accountName, accountText } from '../account-view.js';
+import { autoAccountLabel } from '../account-usage.js';
+import { accountChoiceItems, accountManageItem, accountMenuRow, accountModeItem, openAccountMenu } from './asst-account-menu.js';
 import { closeMenu, currentMenu, isMenuOpen, openMenu } from './asst-menu.js';
 import { createMascotControl } from './asst-mascot.js';
+import { modelChipForms, modelChipName, modelChipTag } from './asst-model-chip.js';
 import {
   ACCOUNT_PROVIDERS,
   brainRequiresSwitch,
@@ -52,6 +55,9 @@ import {
 } from './asst-state.js';
 
 let _projectsCache = null;
+// Providers whose field menus have everything they read loaded once (models, catalog, accounts or agents,
+// presets, projects): their menus open from it at once and read it again in the background.
+const _warmProviders = new Set();
 
 /** SynaBun's registered projects as the last load saw them ([{ path, label }]; [] before the first). */
 export function cachedProjects() { return _projectsCache || []; }
@@ -79,6 +85,10 @@ const TEST_DENSITY_COPY = {
   thorough: ['Thorough', 'Full coverage, whole suite, live checks.'],
 };
 
+// English copy of the Admin sandbox row (i18n: assistant.adminSandbox.hint). Names only Codex: the
+// one provider it changes (lib/agent-sandbox-elevation.js; Claude Code and OpenCode are no-ops).
+export const ADMIN_SANDBOX_HINT = 'Only changes anything when SynaBun runs on Windows. On: Codex can set up its strongest sandbox, which asks for administrator approval once per account. Off: no admin prompt; Codex uses a sandbox that needs no admin, with weaker isolation.';
+
 /** "Light" — the level's name (a missing or unknown level is the default one). */
 export function testDensityLabel(level, t) {
   const id = normalizeTestDensity(level);
@@ -315,11 +325,41 @@ export async function loadModelCatalog({ force = false } = {}) {
     // while it loaded: the next open asks again.
     _catalogAt = remote && epoch === _catalogEpoch ? Date.now() : 0;
     _catalogPartial = !remote;
+    if (_catalogAt) keepCatalog(out, sets);
     return out;
   })().finally(() => { _catalogLoading = null; });
   return _catalogLoading;
 }
 
+// The last complete catalog is also kept in sessionStorage (this tab only): after a reload the model menus
+// paint from it at once. Read back, it is due: the first load asks the server again.
+const CATALOG_STORE_KEY = 'synabun:assistant-model-catalog:v1';
+function keepCatalog(catalog, sets) {
+  try {
+    if (typeof sessionStorage === 'undefined') return;
+    const hidden = {};
+    for (const provider of PROVIDERS) hidden[provider] = [...(sets?.[provider] || [])];
+    const rowOnly = {};
+    for (const provider of PROVIDERS) rowOnly[provider] = [...(sets?.rowOnly?.[provider] || [])];
+    sessionStorage.setItem(CATALOG_STORE_KEY, JSON.stringify({ catalog, hidden, rowOnly }));
+  } catch { /* full or unavailable */ }
+}
+(() => {
+  try {
+    if (typeof sessionStorage === 'undefined' || _catalog) return;
+    const kept = JSON.parse(sessionStorage.getItem(CATALOG_STORE_KEY) || 'null');
+    if (!kept?.catalog || typeof kept.catalog !== 'object') return;
+    _catalog = kept.catalog;
+    _catalogAt = 0;
+    const sets = { rowOnly: {} };
+    for (const provider of PROVIDERS) {
+      sets[provider] = new Set(Array.isArray(kept.hidden?.[provider]) ? kept.hidden[provider] : []);
+      sets.rowOnly[provider] = new Set(Array.isArray(kept.rowOnly?.[provider]) ? kept.rowOnly[provider] : []);
+    }
+    _hidden = sets;
+  } catch { /* unreadable: the first load builds it */ }
+})();
+
 /** The last loadModelCatalog() result, synchronously (null before the first load). */
 export function cachedModelCatalog() { return _catalog; }
 
@@ -340,6 +380,8 @@ export function invalidateModelCatalog() {
   _catalogAt = 0;
   _catalogPartial = false;
   _catalogEpoch += 1;
+  // A reload must not paint the lists this replaced.
+  try { if (typeof sessionStorage !== 'undefined') sessionStorage.removeItem(CATALOG_STORE_KEY); } catch { /* unavailable */ }
 }
 
 /**
@@ -360,6 +402,15 @@ function modelListsChanged() {
   for (const listener of [..._catalogListeners]) {
     try { listener(); } catch { /* a listener's failure is its own */ }
   }
+  scheduleCatalogReload();
+}
+
+// In a page: the new lists are read right away, so the next menu opens from them (an open that comes
+// first joins this read).
+let _catalogReloadTimer = null;
+function scheduleCatalogReload() {
+  if (typeof document === 'undefined' || _catalogReloadTimer) return;
+  _catalogReloadTimer = setTimeout(() => { _catalogReloadTimer = null; loadModelCatalog().catch(() => {}); }, 250);
 }
 
 /**
@@ -391,6 +442,12 @@ on('sync:opencode:hidden-models-changed', modelListsChanged);
 on('sync:assistant:hidden-models-changed', modelListsChanged);
 on('sync:assistant:catalog-changed', modelListsChanged);
 
+// Launch: the menus' lists are read once the page has painted, so the first model menu opens from them.
+if (typeof document !== 'undefined') {
+  registerLaunchPrefetch('assistant-model-catalog', () => loadModelCatalog(), { order: 10, owner: true });
+  registerLaunchPrefetch('assistant-accounts', () => Promise.allSettled([fetchClaudeAccounts(), fetchCodexAccounts(), fetchMcpProfilePresets(), fetchOpencodeAgents()]), { order: 14, owner: true });
+}
+
 function sameModel(selected, m) {
   if (!selected) return false;
   return selected === m.id || selected === m.selector;
@@ -416,7 +473,8 @@ function tierTag(m, tr) {
  * opts: { brain, onSelect(target), includeHere, hereLabel, title, t, placement,
  *         current:{provider, model}|null, warnSwitch, providers, onToast(text),
  *         accept(provider, model) → bool (only those models), emptyLabel (when none
- *         passes), allowCustom (default true), zIndex (see asst-menu.js) }
+ *         passes), allowCustom (default true), zIndex (see asst-menu.js),
+ *         accountItems (menu items listed first, under accountTitle) }
  * target: { provider, model, label, tier, vision, outputs, efforts, price } | { here: true }
  */
 export async function openModelMenu(anchor, opts = {}) {
@@ -428,74 +486,28 @@ export async function openModelMenu(anchor, opts = {}) {
   if (!anchor) return null;
   const tr = tf(t);
   const b = normalizeBrain(brain);
-  anchor.setAttribute('aria-busy', 'true');
-  // Open immediately: a slow provider still has a visible, cancellable state.
-  const loading = opts.routingEditor ? openMenu(anchor, {
-    title, className: 'asst-model-menu asst-route-model-menu',
-    items: [{ kind: 'info', label: tr('assistant.routes.editorState.loadingModels', 'Loading models…') }],
-    width: 380, zIndex: opts.zIndex ?? null, repositionOnResize: true,
-  }) : null;
-  if (loading) loading.el.setAttribute('aria-busy', 'true');
-  if (loading) { loading.el.setAttribute('role', 'dialog'); anchor.setAttribute('aria-haspopup', 'dialog'); }
+  // The kept catalog paints the menu at once (it is read again in the background below, and an open menu
+  // follows it in place); only a first open, or a reload the user asked for, waits for the lists.
+  const kept = opts.forceReload === true ? null : cachedModelCatalog();
   let catalog = {};
   let failed = false;
-  try { catalog = await loadModelCatalog({ force: opts.forceReload === true }); } catch { failed = true; } finally { anchor.removeAttribute('aria-busy'); }
-  if (!anchor.isConnected || (loading && currentMenu() !== loading.el)) return null;
-  const metadata = modelCatalogStatus();
-  const items = [];
-  if (Array.isArray(opts.accountItems) && opts.accountItems.length) {
-    items.push({ kind: 'header', label: tr('assistant.brain.account', 'Account profile') }, ...opts.accountItems, { kind: 'separator' });
-  }
-  if (includeHere) {
-    items.push({ kind: 'radio', id: '__here', label: hereLabel || tr('assistant.routes.brainDecides', 'Let the brain decide'), selected: !current, onSelect: () => onSelect?.({ here: true }) });
-  }
-  const list = Array.isArray(providers) && providers.length ? PROVIDERS.filter(p => providers.includes(p)) : PROVIDERS;
-  let listed = 0;
-  for (const provider of list) {
-    const models = (catalog[provider] || []).filter(m => typeof accept !== 'function' || accept(provider, m));
-    if (!models.length && !opts.routingEditor) continue;
-    listed += models.length;
-    const meta = getProviderMeta(provider);
-    const hiddenCount = metadata.hiddenCounts[provider] || 0;
-    const note = opts.routingEditor ? tr('assistant.routes.menu.hiddenCount', '{count} hidden in Models', { count: hiddenCount }) : warnSwitch && provider !== b.provider ? tr('assistant.brain.newConversation', 'starts a new conversation') : '';
-    items.push({ kind: 'header', label: meta.label, icon: meta.icon, color: meta.color, note });
-    for (const m of models) {
-      items.push({
-        kind: 'radio',
-        id: `${provider}:${m.id}`,
-        label: m.label,
-        desc: modelDesc(m, tr, opts.routingEditor),
-        title: `${m.label || m.id} · ${m.id}`,
-        tag: tierTag(m, tr),
-        keywords: `${meta.label} ${m.id}`,
-        selected: !!current && current.provider === provider && sameModel(current.model, m),
-        onSelect: () => onSelect?.({ provider, model: m.id, label: m.label, tier: m.tier || null, vision: m.vision ?? null, outputs: m.outputs || null, efforts: m.efforts || null, price: m.price || null }),
-      });
-    }
-    if (opts.routingEditor && !models.length) items.push({ kind: 'info', label: typeof accept === 'function' ? tr('assistant.routes.menu.noCompatible', 'No compatible models shown for this provider.') : tr('assistant.routes.menu.providerEmpty', 'No models shown for this provider.') });
-  }
-  // Nothing passes the filter (e.g. no model makes video yet): say so instead of an empty list.
-  if (!listed && typeof accept === 'function' && emptyLabel) items.push({ kind: 'info', label: emptyLabel });
-  if (opts.routingEditor && !listed && typeof accept !== 'function') items.push({ kind: 'info', label: tr('assistant.routes.editorState.modelsEmpty', 'No models are available. Check Models or connect a provider, then reload.') });
-  if (allowCustom) {
-    items.push({ kind: 'separator' });
-    items.push({
-      kind: 'input',
-      placeholder: tr('assistant.brain.modelCustom', 'Custom model id…'),
-      onSubmit: (v) => {
-        const provider = current?.provider || b.provider;
-        const disabled = hiddenModelFor(provider, v);
-        if (disabled) {
-          onToast?.(tr('assistant.brain.modelDisabled', "{model} is disabled in the Assistant's Models list.", { model: disabled }));
-          return;
-        }
-        onSelect?.({ provider, model: v, label: modelShortName(v), custom: true });
-      },
-    });
-  }
-  if (!opts.routingEditor && typeof opts.onManageModels === 'function') {
-    items.push({ id: '__manage_models', label: tr('assistant.models.manage', 'Manage models…'), onSelect: () => opts.onManageModels() });
+  let loading = null;
+  if (kept) {
+    catalog = kept;
+  } else {
+    anchor.setAttribute('aria-busy', 'true');
+    // Open immediately: a slow provider still has a visible, cancellable state.
+    loading = opts.routingEditor ? openMenu(anchor, {
+      title, className: 'asst-model-menu asst-route-model-menu',
+      items: [{ kind: 'info', label: tr('assistant.routes.editorState.loadingModels', 'Loading models…') }],
+      width: 380, zIndex: opts.zIndex ?? null, repositionOnResize: true,
+    }) : null;
+    if (loading) loading.el.setAttribute('aria-busy', 'true');
+    if (loading) { loading.el.setAttribute('role', 'dialog'); anchor.setAttribute('aria-haspopup', 'dialog'); }
+    try { catalog = await loadModelCatalog({ force: opts.forceReload === true }); } catch { failed = true; } finally { anchor.removeAttribute('aria-busy'); }
+    if (!anchor.isConnected || (loading && currentMenu() !== loading.el)) return null;
   }
+  const items = buildModelMenuItems(catalog);
   const menu = openMenu(anchor, {
     title: title || tr('assistant.brain.model', 'Model'),
     items,
@@ -509,7 +521,79 @@ export async function openModelMenu(anchor, opts = {}) {
     repositionOnResize: true,
     filterEmptyLabel: tr('assistant.routes.menu.noMatches', 'No matching models. Check Models for hidden choices.'),
   });
-  if (opts.routingEditor && menu) {
+  if (opts.routingEditor && menu) decorateRouteMenu(menu, failed);
+  // Painted from the kept catalog: read it again (fresh within its minute, else a background request) and
+  // redraw the open menu in place when the lists changed, leaving the filter, the scroll and the focus alone.
+  if (kept && menu && !opts.routingEditor) {
+    loadModelCatalog().then((next) => {
+      if (!next || next === kept || currentMenu() !== menu.el || !anchor.isConnected) return;
+      const nextItems = buildModelMenuItems(next);
+      if (menuItemsSignature(nextItems) !== menuItemsSignature(items)) menu.update({ items: nextItems, keepPlace: true });
+    }).catch(() => { /* the kept list stays */ });
+  }
+  return menu;
+
+  function buildModelMenuItems(catalog) {
+    const metadata = modelCatalogStatus();
+    const items = [];
+    if (Array.isArray(opts.accountItems) && opts.accountItems.length) {
+      items.push({ kind: 'header', label: opts.accountTitle || tr('assistant.brain.account', 'Account profile') }, ...opts.accountItems, { kind: 'separator' });
+    }
+    if (includeHere) {
+      items.push({ kind: 'radio', id: '__here', label: hereLabel || tr('assistant.routes.brainDecides', 'Let the brain decide'), selected: !current, onSelect: () => onSelect?.({ here: true }) });
+    }
+    const list = Array.isArray(providers) && providers.length ? PROVIDERS.filter(p => providers.includes(p)) : PROVIDERS;
+    let listed = 0;
+    for (const provider of list) {
+      const models = (catalog[provider] || []).filter(m => typeof accept !== 'function' || accept(provider, m));
+      if (!models.length && !opts.routingEditor) continue;
+      listed += models.length;
+      const meta = getProviderMeta(provider);
+      const hiddenCount = metadata.hiddenCounts[provider] || 0;
+      const note = opts.routingEditor ? tr('assistant.routes.menu.hiddenCount', '{count} hidden in Models', { count: hiddenCount }) : warnSwitch && provider !== b.provider ? tr('assistant.brain.newConversation', 'starts a new conversation') : '';
+      items.push({ kind: 'header', label: meta.label, icon: meta.icon, color: meta.color, note });
+      for (const m of models) {
+        items.push({
+          kind: 'radio',
+          id: `${provider}:${m.id}`,
+          label: m.label,
+          desc: modelDesc(m, tr, opts.routingEditor),
+          title: `${m.label || m.id} · ${m.id}`,
+          tag: tierTag(m, tr),
+          keywords: `${meta.label} ${m.id}`,
+          selected: !!current && current.provider === provider && sameModel(current.model, m),
+          onSelect: () => onSelect?.({ provider, model: m.id, label: m.label, tier: m.tier || null, vision: m.vision ?? null, outputs: m.outputs || null, efforts: m.efforts || null, price: m.price || null }),
+        });
+      }
+      if (opts.routingEditor && !models.length) items.push({ kind: 'info', label: typeof accept === 'function' ? tr('assistant.routes.menu.noCompatible', 'No compatible models shown for this provider.') : tr('assistant.routes.menu.providerEmpty', 'No models shown for this provider.') });
+    }
+    // Nothing passes the filter (e.g. no model makes video yet): say so instead of an empty list.
+    if (!listed && typeof accept === 'function' && emptyLabel) items.push({ kind: 'info', label: emptyLabel });
+    if (opts.routingEditor && !listed && typeof accept !== 'function') items.push({ kind: 'info', label: tr('assistant.routes.editorState.modelsEmpty', 'No models are available. Check Models or connect a provider, then reload.') });
+    if (allowCustom) {
+      items.push({ kind: 'separator' });
+      items.push({
+        kind: 'input',
+        placeholder: tr('assistant.brain.modelCustom', 'Custom model id…'),
+        onSubmit: (v) => {
+          const provider = current?.provider || b.provider;
+          const disabled = hiddenModelFor(provider, v);
+          if (disabled) {
+            onToast?.(tr('assistant.brain.modelDisabled', "{model} is disabled in the Assistant's Models list.", { model: disabled }));
+            return;
+          }
+          onSelect?.({ provider, model: v, label: modelShortName(v), custom: true });
+        },
+      });
+    }
+    if (!opts.routingEditor && typeof opts.onManageModels === 'function') {
+      items.push({ id: '__manage_models', label: tr('assistant.models.manage', 'Manage models…'), onSelect: () => opts.onManageModels() });
+    }
+    return items;
+  }
+
+  function decorateRouteMenu(menu, failed) {
+    const metadata = modelCatalogStatus();
     // Search and a custom-id input belong to a dialog; choices are a radio group.
     // A menu role cannot contain these form fields or recovery buttons.
     menu.el.setAttribute('role', 'dialog');
@@ -539,7 +623,11 @@ export async function openModelMenu(anchor, opts = {}) {
     }
     menu.el.append(footer); menu.reposition();
   }
-  return menu;
+}
+
+/** What a model menu lists, for telling a fresher read from the one on screen. */
+function menuItemsSignature(items) {
+  return JSON.stringify((items || []).map((item) => [item.kind || '', item.id ?? '', item.label || '', item.desc || '', item.tag || '', item.note || '', !!item.selected]));
 }
 
 // ── Picker ──────────────────────────────────────────────────────────────────
@@ -642,11 +730,39 @@ export function createBrainPicker(host, hooks = {}) {
     return name;
   }
 
+  // The "⋯" item's value, in the account menu's words: the name and its plan, "API key" or "Signed out" ("Default · Max").
+  function accountValue(brain) {
+    const acc = accountOf(brain);
+    if (!acc) return brain.accountId === 'auto' ? autoAccountLabel(hooks.t) : (brain.accountId || t('assistant.brain.accountDefault', 'Default'));
+    const row = accountMenuRow(acc, { provider: accountProvider(brain), t: hooks.t });
+    return [row.name, row.badge.text].filter(Boolean).join(' · ');
+  }
+
+  // The model menu's own row first: it also names the "[1m]" / "[extended]" variants the provider list lacks.
+  function modelRow(brain) {
+    return catalogModelRow(brain.provider, brain.model) || modelOf(brain);
+  }
+
   function modelLabel(brain = currentBrain()) {
-    const model = modelOf(brain);
+    const model = modelRow(brain);
     return model ? (model.label || modelShortName(model.id)) : (brain.model ? modelShortName(brain.model) : t('assistant.brain.modelDefault', 'Default model'));
   }
 
+  // The composer chip's account cue: the account menu's initial avatar when the provider has more than one
+  // account (or the account is signed out), "Auto" for Auto; null otherwise. Its full words are the tooltip's.
+  function accountCue(brain) {
+    if (!ACCOUNT_PROVIDERS.has(brain.provider)) return null;
+    if (brain.accountId === 'auto') return { text: t('assistant.brain.accountAutoShort', 'Auto'), tone: 'muted' };
+    const accounts = brain.provider === 'codex' ? getCachedCodexAccounts() : getCachedClaudeAccounts();
+    const acc = accountOf(brain);
+    const signedOut = acc?.signedIn === false;
+    if (accounts.length < 2 && !signedOut) return null;
+    const initial = acc
+      ? accountMenuRow(acc, { provider: accountProvider(brain), t: hooks.t }).initial
+      : Array.from(String(brain.accountId || t('assistant.brain.accountDefault', 'Default')).trim())[0]?.toLocaleUpperCase();
+    return { text: initial || '?', tone: signedOut ? 'warn' : 'muted' };
+  }
+
   function values(brain = currentBrain()) {
     const meta = getProviderMeta(brain.provider);
     const efforts = effortsFor(brain);
@@ -669,6 +785,26 @@ export function createBrainPicker(host, hooks = {}) {
     };
   }
 
+  /**
+   * The permission menu's Admin sandbox row (a check: the global setting, every agent SynaBun starts),
+   * or null while the host has none to show (a server that does not serve it). Its tooltip and
+   * aria-label say the value in effect.
+   */
+  function adminSandboxItem() {
+    const on = typeof hooks.getAdminSandbox === 'function' ? hooks.getAdminSandbox() : null;
+    if (typeof on !== 'boolean') return null;
+    const label = t('assistant.adminSandbox.label', 'Admin sandbox');
+    const value = on ? t('assistant.adminSandbox.on', 'On') : t('assistant.adminSandbox.off', 'Off');
+    const hint = t('assistant.adminSandbox.hint', ADMIN_SANDBOX_HINT);
+    return {
+      kind: 'check', id: 'admin-sandbox', label, desc: hint, checked: on,
+      className: 'asst-admin-sandbox-item',
+      title: `${label}: ${value}. ${hint}`,
+      ariaLabel: t('assistant.adminSandbox.aria', '{label}: {value}. Only changes anything when SynaBun runs on Windows.', { label, value }),
+      onSelect: () => hooks.onAdminSandbox?.(!on),
+    };
+  }
+
   /** The session's Test density, or null while the host has none to show (a server that does not know it). */
   function testDensity() {
     const level = typeof hooks.getTestDensity === 'function' ? hooks.getTestDensity() : null;
@@ -689,21 +825,117 @@ export function createBrainPicker(host, hooks = {}) {
     btn.setAttribute('aria-label', aria || tooltip || label || field);
   }
 
+  // The composer's model chip (asst-model-chip.js): the model's short name, a context tag for a variant,
+  // the account cue and "API" on an API key, never the credential's name (the provider icon says it).
+  // Model label, id, account, who it is and what it runs on are the tooltip and aria-label.
+  // fitModelChip() draws the longest form that fits the row.
+  let chipForms = [];
+  let chipParts = null;
+  let chipCatalog = null;
+  function renderModelChip(brain, v) {
+    const btn = buttons.model;
+    // The catalog was dropped (a model hidden, a provider's list changed): read it again, then the label.
+    if (!cachedModelCatalog() && !chipCatalog) {
+      chipCatalog = loadModelCatalog().catch(() => null).then(() => {
+        chipCatalog = null;
+        if (!destroyed && cachedModelCatalog()) render();
+      });
+    }
+    const row = modelRow(brain);
+    const id = brain.model || row?.id || '';
+    const { name, raw } = id ? modelChipName(row?.label, id) : { name: v.model, raw: false };
+    const tag = modelChipTag(id, { contextWindow: row?.contextWindow, label: row?.label });
+    const cue = accountCue(brain);
+    const p = accountProvider(brain);
+    const acc = ACCOUNT_PROVIDERS.has(brain.provider) ? accountOf(brain) : null;
+    const api = acc && acc.signedIn !== false && acc.mode === 'apiKey' ? accountText('apiShort', {}, p) : '';
+    const names = (cachedModelCatalog()?.[brain.provider] || []).map(m => modelChipName(m.label, m.id).name);
+    chipForms = modelChipForms({ name, names, tag: !!tag, cue: !!cue, api: !!api });
+
+    const who = !ACCOUNT_PROVIDERS.has(brain.provider) ? ''
+      : brain.accountId === 'auto' ? autoAccountLabel(hooks.t)
+        : acc ? accountName(acc, p) : (brain.accountId || t('assistant.brain.accountDefault', 'Default'));
+    const model = brain.model && v.model !== brain.model ? `${v.model} · ${brain.model}` : (brain.model || v.model);
+    const tip = [
+      v.meta.label, model, who ? t('assistant.brain.asAccount', 'as {account}', { account: who }) : '',
+      acc ? accountIdentity(acc) : '', acc ? accountBadge(acc, p).text : '',
+    ].filter(Boolean).join(' · ');
+    setBtn('model', { label: '', icon: v.meta.icon, color: v.meta.color, tooltip: tip, aria: `${t('assistant.brain.model', 'Model')}: ${tip}` });
+
+    const label = btn.querySelector('.asst-dd-label');
+    label.classList.add('asst-model-label');
+    chipParts = {
+      name: el('span', 'asst-model-name', name),
+      tag: el('span', 'asst-model-tag', tag),
+      cue: el('span', 'asst-acct-avatar asst-model-cue', cue?.text || ''),
+      api: el('span', 'asst-acct-badge asst-model-api', api),
+    };
+    if (cue) chipParts.cue.dataset.tone = cue.tone;
+    label.replaceChildren(chipParts.name, chipParts.tag, chipParts.cue, chipParts.api);
+    // A display name ("Sonnet 5") reads in sans; a raw id nothing names ("opus") stays mono.
+    btn.toggleAttribute('data-raw', raw);
+    fitModelChip();
+  }
+
+  function drawChipForm(form) {
+    chipParts.name.textContent = form.name;
+    chipParts.tag.hidden = !form.tag;
+    chipParts.cue.hidden = !form.cue;
+    chipParts.api.hidden = !form.api;
+  }
+
+  // The first form, longest first, that leaves the row as the shortest one does: no part cut, no other
+  // field narrower, the row no taller (it wraps below 320px). None does: the shortest, its name squeezed.
+  function fitModelChip() {
+    const btn = buttons.model;
+    if (destroyed || !btn || !chipParts || !chipForms.length) return;
+    btn.removeAttribute('data-squeezed');
+    const label = btn.querySelector('.asst-dd-label');
+    const slot = btn.parentElement;
+    // Nothing to measure (not on screen, no layout): the whole chip, until the row has a width.
+    if (chipForms.length === 1 || !isRendered(btn) || !slot || typeof label?.getBoundingClientRect !== 'function') { drawChipForm(chipForms[0]); return; }
+    const row = slot.parentElement || null;
+    const others = [...slot.querySelectorAll('.asst-dd-label')].filter(n => n !== label && n.getClientRects().length > 0);
+    const width = n => n.getBoundingClientRect().width;
+    const cut = () => {
+      const right = label.getBoundingClientRect().right + 0.5;
+      return Object.values(chipParts).some(n => !n.hidden && n.getBoundingClientRect().right > right);
+    };
+    const shortest = chipForms[chipForms.length - 1];
+    drawChipForm(shortest);
+    const base = { height: row?.offsetHeight || 0, widths: others.map(width) };
+    const fits = () => !cut()
+      && (row?.offsetHeight || 0) <= base.height + 0.5
+      && others.every((n, i) => width(n) >= base.widths[i] - 0.5)
+      && !(slot.scrollWidth > slot.clientWidth + 1);
+    for (const form of chipForms.slice(0, -1)) {
+      drawChipForm(form);
+      if (fits()) return;
+    }
+    drawChipForm(shortest);
+    btn.toggleAttribute('data-squeezed', cut());
+  }
+
+  // The row's width decides the form (a panel resized, a tab shown, the fields that collapse to glyphs).
+  const fitHost = buttons.model.parentElement?.parentElement || buttons.model.parentElement;
+  let fitFrame = 0;
+  let fitWidth = -1;
+  const scheduleFit = () => {
+    if (fitFrame || destroyed || typeof requestAnimationFrame !== 'function') return;
+    fitFrame = requestAnimationFrame(() => { fitFrame = 0; fitModelChip(); });
+  };
+  const fitObserver = typeof ResizeObserver === 'function' && fitHost ? new ResizeObserver((entries) => {
+    const w = Math.round(entries[entries.length - 1]?.contentRect?.width || 0);
+    if (w !== fitWidth) { fitWidth = w; scheduleFit(); }
+  }) : null;
+  fitObserver?.observe(fitHost);
+  if (typeof document !== 'undefined') document.fonts?.ready?.then(scheduleFit).catch(() => {});
+
   function render() {
     if (destroyed) return;
     const brain = currentBrain();
     const v = values(brain);
-    const modelTip = [v.meta.label, brain.model || t('assistant.brain.modelDefault', 'Default model'), v.account ? t('assistant.brain.asAccount', 'as {account}', { account: v.account }) : ''].filter(Boolean).join(' · ');
-    setBtn('model', { label: v.model, icon: v.meta.icon, color: v.meta.color, tooltip: modelTip, aria: `${t('assistant.brain.model', 'Model')}: ${modelTip}` });
-    if (ACCOUNT_PROVIDERS.has(brain.provider)) {
-      const acc = accountOf(brain);
-      const label = buttons.model.querySelector('.asst-dd-label');
-      label.classList.add('asst-model-account-label');
-      const mode = acc ? accountCompactMode(acc, accountProvider(brain)) : t('accounts.checking', 'Checking…');
-      label.replaceChildren(el('span', 'asst-model-name', v.model), el('span', '', '·'), el('span', 'asst-model-account', acc ? accountName(acc, accountProvider(brain)) : brain.accountId || t('assistant.brain.accountDefault', 'Default')), el('span', '', '·'), el('span', 'asst-model-mode', mode));
-    } else buttons.model.querySelector('.asst-dd-label').classList.remove('asst-model-account-label');
-    // A display name ("Sonnet 5") reads in sans; a raw id nothing names ("opus[1m]") stays mono.
-    buttons.model?.toggleAttribute('data-raw', /^[a-z0-9][\w.\-[\]:/]*$/.test(String(v.model || '')));
+    renderModelChip(brain, v);
 
     if (brain.provider === 'opencode') {
       setBtn('effort', { label: v.effort, icon: ICON_AGENT, tooltip: `${t('assistant.brain.agent', 'OpenCode agent')}: ${v.effort}` });
@@ -791,7 +1023,7 @@ export function createBrainPicker(host, hooks = {}) {
       { field: 'mode', label: t('assistant.brain.mode', 'Permission mode'), value: v.mode, icon: ICON_SHIELD, hidden: false },
       { field: 'tests', label: t('assistant.tests.title', 'Test density'), value: testDensity() ? testDensityLabel(testDensity(), hooks.t) : '', icon: testsIcon(testDensityBars(testDensity())), hidden: !testDensity() },
       { field: 'mcp', label: t('assistant.brain.mcp', 'MCP tool profile'), value: v.mcp, icon: ICON_PLUG, hidden: false },
-      { field: 'account', label: t('assistant.brain.account', 'Account profile'), value: v.account, icon: ICON_ACCOUNT, hidden: !ACCOUNT_PROVIDERS.has(brain.provider) },
+      { field: 'account', label: t('assistant.brain.accountShort', 'Account'), value: accountValue(brain), icon: ICON_ACCOUNT, hidden: !ACCOUNT_PROVIDERS.has(brain.provider) },
     ];
   }
 
@@ -817,6 +1049,7 @@ export function createBrainPicker(host, hooks = {}) {
       }).catch(() => { _projectsCache = _projectsCache || []; }));
     }
     await Promise.allSettled(jobs);
+    if (cachedModelCatalog()) _warmProviders.add(provider);
   }
 
   async function refresh(force = false) {
@@ -848,14 +1081,19 @@ export function createBrainPicker(host, hooks = {}) {
     const anchor = anchorFor(field, anchorOverride);
     const brain = currentBrain();
     if (field === 'model') {
-      if (ACCOUNT_PROVIDERS.has(brain.provider)) await ensureLoaded(brain.provider);
+      // The account rows come from the kept lists; they are read again in the background once loaded.
+      if (ACCOUNT_PROVIDERS.has(brain.provider)) {
+        if (_warmProviders.has(brain.provider)) ensureLoaded(brain.provider).catch(() => {});
+        else await ensureLoaded(brain.provider);
+      }
       await openModelMenu(anchor, {
         brain,
         t: hooks.t,
         placement,
         current: { provider: brain.provider, model: brain.model },
         warnSwitch: true,
-        accountItems: ACCOUNT_PROVIDERS.has(brain.provider) ? accountItems(brain, { composer: true }) : [],
+        accountItems: ACCOUNT_PROVIDERS.has(brain.provider) ? accountItems(brain) : [],
+        accountTitle: accountText('menuTitle', {}, accountProvider(brain)),
         onToast: hooks.onToast,
         onManageModels: hooks.onManageModels,
         onSelect: (target) => {
@@ -882,12 +1120,48 @@ export function createBrainPicker(host, hooks = {}) {
       });
       return;
     }
-    // Everything else needs the provider catalog — load it lazily on first open.
-    anchor.setAttribute('aria-busy', 'true');
-    try { await ensureLoaded(brain.provider); } finally { anchor.removeAttribute('aria-busy'); }
-    if (destroyed || !anchor.isConnected) return;
-    const menu = (title, items, extra = {}) => openMenu(anchor, { title, items, placement, role: 'menu', ...extra });
+    // The account menu reads the kept rows and asks again by itself (asst-account-menu.js).
+    if (field === 'account') {
+      if (!ACCOUNT_PROVIDERS.has(brain.provider)) return;
+      if (!_warmProviders.has(brain.provider)) {
+        anchor.setAttribute('aria-busy', 'true');
+        try { await ensureLoaded(brain.provider); } finally { anchor.removeAttribute('aria-busy'); }
+        if (destroyed || !anchor.isConnected) return;
+      } else {
+        ensureLoaded(brain.provider).catch(() => {});
+      }
+      // Kept inside the panel that holds the anchor (the sidepanel, or the tab's own root).
+      openAccountMenu(anchor, accountMenu(brain, anchor.closest?.('.assistant-panel') || anchor.closest?.('.asst-root') || null));
+      return;
+    }
+    // Everything else needs the provider catalog — load it lazily on first open. Once it is loaded the menu
+    // opens from what is kept, the lists are read again in the background, and an open menu they change is
+    // redrawn in place (the filter, the scroll and the focus stay).
+    const warm = _warmProviders.has(brain.provider);
+    if (!warm) {
+      anchor.setAttribute('aria-busy', 'true');
+      try { await ensureLoaded(brain.provider); } finally { anchor.removeAttribute('aria-busy'); }
+      if (destroyed || !anchor.isConnected) return;
+    }
+    let shown = null;
+    drawField(field, brain, (title, items, extra = {}) => {
+      const opened = openMenu(anchor, { title, items, placement, role: 'menu', ...extra });
+      shown = opened ? { opened, items } : null;
+      return opened;
+    }, { anchor, restoreFocus });
+    if (warm && shown) {
+      ensureLoaded(brain.provider).then(() => {
+        if (destroyed || !shown || currentMenu() !== shown.opened.el || !anchor.isConnected) return;
+        let fresh = null;
+        drawField(field, currentBrain(), (_title, items) => { fresh = items; return null; }, { anchor, restoreFocus });
+        if (fresh && menuItemsSignature(fresh) !== menuItemsSignature(shown.items)) shown.opened.update({ items: fresh, keepPlace: true });
+      }).catch(() => {});
+    }
+  }
 
+  // The menu of one field, from the lists as they are kept now: `menu(title, items, extra)` opens it (or, for a
+  // redraw, only takes the items).
+  function drawField(field, brain, menu, { anchor, restoreFocus = false } = {}) {
     if (field === 'effort') {
       if (brain.provider === 'opencode') {
         const agents = getCachedOpencodeAgents();
@@ -918,12 +1192,6 @@ export function createBrainPicker(host, hooks = {}) {
       return;
     }
 
-    if (field === 'account') {
-      if (!ACCOUNT_PROVIDERS.has(brain.provider)) return;
-      menu(t('assistant.brain.account', 'Account profile'), accountItems(brain), { width: 300 });
-      return;
-    }
-
     if (field === 'project') {
       const actor = anchor === heroProject ? heroProjectMascot : null;
       const pick = project => {
@@ -975,70 +1243,74 @@ export function createBrainPicker(host, hooks = {}) {
           onSelect: () => commit({ permissionMode: m.id }, 'mode'),
         });
       }
+      // The global Admin sandbox switch (every agent SynaBun starts, not this conversation), under its own header.
+      const adminSandbox = adminSandboxItem();
+      if (adminSandbox) items.push({ kind: 'separator' }, { kind: 'header', label: t('assistant.adminSandbox.group', 'Every agent') }, adminSandbox);
       menu(t('assistant.brain.mode', 'Permission mode'), items);
     }
   }
 
-  // The brain's account menu (Claude or Codex): every account with what it runs on and who it is (a
-  // signed-out one is listed, not offered), the mode of the brain's account when it holds both credentials,
-  // and the account dispatched workers of that provider use when a dispatch names none.
-  function accountItems(brain, { composer = false } = {}) {
+  // The cog's account menu (asst-account-menu.js): every account once, the conversation's and the
+  // workers' choice, kept inside `bounds`. What each choice does is the same as the composer's.
+  function accountMenu(brain, bounds) {
+    const codex = brain.provider === 'codex';
+    const refetch = () => (codex ? fetchCodexAccounts(true) : fetchClaudeAccounts(true));
+    return {
+      provider: codex ? 'codex' : 'claude',
+      t: hooks.t,
+      placement,
+      bounds,
+      read: () => ({
+        accounts: codex ? getCachedCodexAccounts() : getCachedClaudeAccounts(),
+        currentId: currentBrain().accountId,
+        workerId: codex ? getCodexWorkerAccountId() : getClaudeWorkerAccountId(),
+        running: hooks.getRunning?.() === true,
+      }),
+      onAuto: () => commit({ accountId: 'auto' }, 'account'),
+      onPick: (id) => commit({ accountId: id }, 'account'),
+      onSetWorker: async (id) => { await (codex ? setCodexWorkerAccount : setClaudeWorkerAccount)(id); await refetch(); render(); },
+      onSetMode: async (id, mode) => {
+        const before = currentBrain();
+        try {
+          await (codex ? patchCodexAccount : patchClaudeAccount)(id, { mode }); await refetch();
+          hooks.onChange?.(currentBrain(), { requiresSwitch: true, restartBrain: true, field: 'accountMode', previous: before }); render();
+        }
+        catch (err) { hooks.onToast?.(err?.message || String(err)); }
+      },
+      onAdd: () => hooks.onAddAccount?.(brain.provider),
+      onManage: (id) => (id ? hooks.onManageAccounts?.(brain.provider, id) : hooks.onManageAccounts?.(brain.provider)),
+      onError: (err) => hooks.onToast?.(err?.message || String(err)),
+    };
+  }
+
+  // The composer's Model menu lists the brain's accounts too (Claude or Codex), as the cog's account menu
+  // does (asst-account-menu.js): Auto, every account once (a signed-out one opens its sign-in), the Uses
+  // switch of an account holding both credentials, Add account… and Manage….
+  function accountItems(brain) {
     const codex = brain.provider === 'codex';
     const p = codex ? 'codex' : 'claude';
     const accounts = codex ? getCachedCodexAccounts() : getCachedClaudeAccounts();
     const refetch = () => (codex ? fetchCodexAccounts(true) : fetchClaudeAccounts(true));
-    const items = accounts.map((a) => {
-      const badge = accountBadge(a, p);
-      const usable = accountUsable(a);
-      return {
-        kind: 'radio', id: a.id, label: accountName(a, p),
-        desc: [accountIdentity(a), accountUsageText(a, hooks.t), !usable ? t('assistant.accounts.signInFirst', 'Signed out: sign it in from Manage…') : composer && a.id !== brain.accountId ? t('assistant.brain.newConversation', 'starts a new conversation') : ''].filter(Boolean).join(' · '),
-        tag: badge.text, disabled: !usable,
-        selected: a.id === brain.accountId,
-        onSelect: () => commit({ accountId: a.id }, 'account'),
-      };
+    const items = accountChoiceItems({
+      t: hooks.t,
+      rows: accounts.map((a) => accountMenuRow(a, { provider: p, t: hooks.t })),
+      currentId: brain.accountId,
+      onAuto: () => commit({ accountId: 'auto' }, 'account'),
+      onPick: (id) => commit({ accountId: id }, 'account'),
+      onSignIn: (id) => hooks.onManageAccounts?.(brain.provider, id),
     });
-    items.unshift({ kind: 'radio', id: 'auto', label: autoAccountLabel(hooks.t), desc: t('assistant.accountUsage.composerHint', 'Pick the subscription with most usage left and start a new conversation.'), onSelect: () => commit({ accountId: 'auto' }, 'account') });
-    if (composer) for (const a of accounts.filter(a => !accountUsable(a))) items.push({ id: `signin:${a.id}`, label: t('assistant.accounts.signInAccount', 'Sign in to {label}…', { label: accountName(a, p) }), onSelect: () => hooks.onManageAccounts?.(brain.provider, a.id) });
-    const current = accounts.find((a) => a.id === brain.accountId);
-    const modes = modeChoices(current, p);
-    if (modes.length) {
-      items.push({ kind: 'separator' });
-      items.push({ kind: 'header', label: t('assistant.accounts.usesHeader', '{label} uses (every session on it)', { label: accountName(current, p) }) });
-      for (const m of modes) {
-        items.push({
-          kind: 'radio', id: `mode:${m.mode}`, label: m.label, desc: [m.detail, !m.current ? t('assistant.brain.newConversation', 'starts a new conversation') : ''].filter(Boolean).join(' · '), selected: m.current, disabled: hooks.getRunning?.() === true,
-          onSelect: async () => {
-            if (m.current) return;
-            try {
-              await (codex ? patchCodexAccount : patchClaudeAccount)(current.id, { mode: m.mode }); await refetch();
-              hooks.onChange?.(currentBrain(), { requiresSwitch: true, restartBrain: true, field: 'accountMode', previous: brain }); render();
-            }
-            catch (err) { hooks.onToast?.(err?.message || String(err)); }
-          },
-        });
-      }
-    }
-    const worker = codex ? getCodexWorkerAccountId() : getClaudeWorkerAccountId();
-    if (!composer) {
-    items.push({ kind: 'separator' });
-    items.push({ kind: 'header', label: codex ? t('assistant.accounts.codexWorkersHeader', 'Codex workers use') : t('assistant.accounts.workersHeader', 'Claude Code workers use') });
-    for (const a of accounts) {
-      const usable = accountUsable(a);
-      items.push({
-        kind: 'radio', id: `worker:${a.id}`, label: accountName(a, p), tag: accountBadge(a, p).text,
-        disabled: !usable && a.id !== worker, selected: a.id === worker,
-        onSelect: async () => {
-          if (a.id === worker) return;
-          try { await (codex ? setCodexWorkerAccount : setClaudeWorkerAccount)(a.id); await refetch(); render(); }
-          catch (err) { hooks.onToast?.(err?.message || String(err)); }
-        },
-      });
-    }
-    }
-    items.push({ kind: 'separator' });
-    items.push({ id: '__add', label: t('assistant.accounts.add', 'Add account…'), onSelect: () => hooks.onAddAccount?.(brain.provider) });
-    items.push({ id: '__manage', label: t('assistant.accounts.manage', 'Manage…'), onSelect: () => hooks.onManageAccounts?.(brain.provider) });
+    const uses = accountModeItem({
+      provider: p, t: hooks.t, account: accounts.find((a) => a.id === brain.accountId), running: hooks.getRunning?.() === true,
+      onSetMode: async (id, mode) => {
+        try {
+          await (codex ? patchCodexAccount : patchClaudeAccount)(id, { mode }); await refetch();
+          hooks.onChange?.(currentBrain(), { requiresSwitch: true, restartBrain: true, field: 'accountMode', previous: brain }); render();
+        }
+        catch (err) { hooks.onToast?.(err?.message || String(err)); }
+      },
+    });
+    if (uses) items.push(uses);
+    items.push(accountManageItem({ t: hooks.t, onAdd: () => hooks.onAddAccount?.(brain.provider), onManage: () => hooks.onManageAccounts?.(brain.provider) }));
     return items;
   }
 
@@ -1088,6 +1360,6 @@ export function createBrainPicker(host, hooks = {}) {
     mountEmptyProject,
     setBrain() { render(); },
     close: closeMenu,
-    destroy() { destroyed = true; for (const off of offAccounts) { try { off?.(); } catch {} } closeMenu(); heroProjectMascot?.destroy(); Object.values(buttons).forEach((b) => b.remove()); heroProject?.remove(); heroProject = null; root.remove(); },
+    destroy() { destroyed = true; fitObserver?.disconnect(); if (fitFrame && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(fitFrame); for (const off of offAccounts) { try { off?.(); } catch {} } closeMenu(); heroProjectMascot?.destroy(); Object.values(buttons).forEach((b) => b.remove()); heroProject?.remove(); heroProject = null; root.remove(); },
   };
 }