synabun 2.0.9 → 2.1.0

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

@@ -1,23 +1,26 @@
+import { wireDropdowns, closeDropdowns, setDropdownDisabled, dropdownOf } from '../cc-dropdown.js';
+import { configureToolPickerTranslation, toolPickerHTML, updateToolPicker, readToolPicker, toolWord } from '../tool-list-picker.js';
+import { toolListView } from '../tool-list-view.js';
 // ═══════════════════════════════════════════
 // SynaBun Assistant — brain picker (toolbar fields)
 // ═══════════════════════════════════════════
 // Dropdown fields for the brain: model (provider icon + model; switching
 // provider happens inside the model menu, grouped by provider), effort (or the
 // OpenCode agent), permission mode and account (Claude/Codex, inline only when
-// there is more than one to pick) in the composer row; project and MCP profile
+// there is more than one to pick) in the composer row; project and SynaBun tools
 // in the toolbar. Every field opens an asst-menu popover (it flips when there
-// is no room). A provider/account/profile change reports
+// is no room). A provider/account/tools change reports
 // { requiresSwitch: true } so the panel sends `switch_brain`.
 
 import {
   ensureModelsForProfile,
   fetchClaudeAccounts,
   fetchCodexAccounts,
-  fetchMcpProfilePresets,
+  fetchToolCatalog,
   fetchOpencodeAgents,
   getCachedClaudeAccounts,
   getCachedCodexAccounts,
-  getCachedMcpProfilePresets,
+  getCachedToolCatalog,
   getCachedOpencodeAgents,
   getClaudeWorkerAccountId,
   getCodexWorkerAccountId,
@@ -29,6 +32,7 @@ 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, accountIdentity, accountName, accountText } from '../account-view.js';
 import { autoAccountLabel } from '../account-usage.js';
@@ -54,6 +58,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 || []; }
@@ -321,11 +328,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; }
 
@@ -346,6 +383,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 */ }
 }
 
 /**
@@ -366,6 +405,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);
 }
 
 /**
@@ -397,6 +445,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(), fetchToolCatalog(), fetchOpencodeAgents()]), { order: 14, owner: true });
+}
+
 function sameModel(selected, m) {
   if (!selected) return false;
   return selected === m.id || selected === m.selector;
@@ -435,74 +489,29 @@ 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: 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() });
+  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;
   }
+  if (opts.shouldOpen && !opts.shouldOpen()) return null;
+  const items = buildModelMenuItems(catalog);
   const menu = openMenu(anchor, {
     title: title || tr('assistant.brain.model', 'Model'),
     items,
@@ -516,7 +525,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');
@@ -546,7 +627,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 ──────────────────────────────────────────────────────────────────
@@ -554,7 +639,7 @@ export async function openModelMenu(anchor, opts = {}) {
 // Creation order is DOM order within a slot: model · effort · variant · mode · tests · account in the composer.
 // `effort` is the OpenCode agent for OpenCode; `variant` is OpenCode's effort (the model's variants).
 // `tests` is the session's Test density, not a brain field: it shows only while the host supplies a level.
-const FIELDS = ['model', 'effort', 'variant', 'mode', 'tests', 'account', 'project', 'mcp'];
+const FIELDS = ['model', 'effort', 'variant', 'mode', 'tests', 'account', 'project'];
 // Slot of each field: the composer row (the brain and how it acts) · the toolbar (where it works).
 const FIELD_GROUP = { model: 'brain', effort: 'brain', variant: 'brain', mode: 'brain', tests: 'brain', account: 'brain', project: 'context', mcp: 'context' };
 
@@ -569,6 +654,7 @@ const FIELD_GROUP = { model: 'brain', effort: 'brain', variant: 'brain', mode: '
  *          onProjects(projects) — the registered projects were (re)loaded }
  */
 export function createBrainPicker(host, hooks = {}) {
+  configureToolPickerTranslation(hooks.t);
   const t = tf(hooks.t);
   const placement = hooks.menuPlacement || 'below';
 
@@ -593,6 +679,31 @@ export function createBrainPicker(host, hooks = {}) {
     buttons[field] = btn;
   }
 
+  const toolsSlot = el('div', 'asst-tools-picker');
+  (single ? root : host.context || root).appendChild(toolsSlot);
+  const toolsLife = new AbortController();
+  wireDropdowns(toolsSlot, { signal: toolsLife.signal });
+  let toolsSessionId = null;
+  toolsSlot.addEventListener('cc-dropdown-open', () => { toolsSessionId = hooks.getSessionId?.() ?? null; }, { signal: toolsLife.signal });
+  toolsSlot.addEventListener('change', (event) => {
+    if (currentBrain().provider !== 'opencode' || toolsSessionId !== (hooks.getSessionId?.() ?? null)) return;
+    commit({ tools: readToolPicker(event.target, { inherit: false }) }, 'tools');
+  }, { signal: toolsLife.signal });
+  function renderTools(brain) {
+    if (toolsSessionId !== (hooks.getSessionId?.() ?? null)) closeDropdowns(toolsSlot, { cancel: true });
+    const catalog = getCachedToolCatalog();
+    toolsSlot.hidden = brain.provider !== 'opencode' || !catalog;
+    if (toolsSlot.hidden) { closeDropdowns(toolsSlot, { cancel: true }); toolsSlot.innerHTML = ''; return; }
+    let input = toolsSlot.querySelector('input');
+    const options = { catalog, includeServers: false, label: t('assistant.brain.mcp') };
+    const tools = brain.tools ?? [...new Set([...(catalog.default || []).filter(id => id !== 'git'), 'browser'])];
+    if (!input) {
+      toolsSlot.innerHTML = toolPickerHTML(`asst-tools-${globalThis.crypto.randomUUID()}`, tools, options);
+      input = toolsSlot.querySelector('input');
+    } else if (!dropdownOf(input)?.classList.contains('open')) updateToolPicker(input, tools, options);
+    setDropdownDisabled(input, hooks.getRunning?.() === true);
+  }
+
   let destroyed = false;
   let loading = null;
   // The empty state's "Choose a project" (mountEmptyProject): the project field's second button.
@@ -613,8 +724,7 @@ export function createBrainPicker(host, hooks = {}) {
         codex: getCachedCodexAccounts(),
       },
       agents: getCachedOpencodeAgents(),
-      mcpProfiles: getCachedMcpProfilePresets(),
-      defaultMcpProfile: 'full',
+      toolCatalog: getCachedToolCatalog(),
       projects: _projectsCache || [],
     };
   }
@@ -687,7 +797,7 @@ export function createBrainPicker(host, hooks = {}) {
     const efforts = effortsFor(brain);
     const level = efforts.find(e => e.id === brain.effort);
     const hasEfforts = efforts.some(e => e.id !== 'off');
-    const presets = getCachedMcpProfilePresets();
+    const toolCatalog = getCachedToolCatalog();
     return {
       meta,
       model: modelLabel(brain),
@@ -699,7 +809,7 @@ export function createBrainPicker(host, hooks = {}) {
       variant: level ? level.label : (brain.effort || t('assistant.brain.variantDefault', 'default variant')),
       project: brain.project ? projectLabel(brain.project, _projectsCache || []) : t('assistant.brain.projectHome', 'Home'),
       mode: permissionModeLabel(brain, (id, fallback) => t(`assistant.brain.modes.${id}`, fallback)),
-      mcp: presets[brain.mcpProfile]?.label || brain.mcpProfile || 'full',
+      mcp: toolListView(toolCatalog, brain.tools, { translate: hooks.t }).summary,
       account: ACCOUNT_PROVIDERS.has(brain.provider) ? accountLabel(brain) : '',
     };
   }
@@ -874,7 +984,7 @@ export function createBrainPicker(host, hooks = {}) {
     const testsLabel = tests ? testDensityLabel(tests, hooks.t) : '';
     setBtn('tests', { label: testsLabel, icon: testsIcon(testDensityBars(tests)), hidden: !tests, tooltip: `${t('assistant.tests.title', 'Test density')}: ${testsLabel}` });
     if (tests) buttons.tests.dataset.level = tests; else delete buttons.tests.dataset.level;
-    setBtn('mcp', { label: v.mcp, icon: ICON_PLUG, tooltip: `${t('assistant.brain.mcp', 'MCP tool profile')}: ${v.mcp}` });
+    renderTools(brain);
     renderEmptyProject(brain);
   }
 
@@ -941,7 +1051,6 @@ export function createBrainPicker(host, hooks = {}) {
       { field: 'project', label: t('assistant.brain.project', 'Working project'), value: brain.project || v.project, icon: ICON_FOLDER, hidden: false },
       { 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.accountShort', 'Account'), value: accountValue(brain), icon: ICON_ACCOUNT, hidden: !ACCOUNT_PROVIDERS.has(brain.provider) },
     ];
   }
@@ -957,7 +1066,7 @@ export function createBrainPicker(host, hooks = {}) {
 
   async function ensureLoaded(provider, { force = false } = {}) {
     // The catalog too: defaults resolve against the menu's list (context variants, disabled models out).
-    const jobs = [ensureModelsForProfile(provider, force), fetchMcpProfilePresets(force), loadModelCatalog()];
+    const jobs = [ensureModelsForProfile(provider, force), fetchToolCatalog(force), loadModelCatalog()];
     if (provider === 'codex') jobs.push(fetchCodexAccounts(force));
     if (provider === 'claude-code') jobs.push(fetchClaudeAccounts(force));
     if (provider === 'opencode') jobs.push(fetchOpencodeAgents(force));
@@ -968,6 +1077,7 @@ export function createBrainPicker(host, hooks = {}) {
       }).catch(() => { _projectsCache = _projectsCache || []; }));
     }
     await Promise.allSettled(jobs);
+    if (cachedModelCatalog()) _warmProviders.add(provider);
   }
 
   async function refresh(force = false) {
@@ -995,13 +1105,19 @@ export function createBrainPicker(host, hooks = {}) {
    * Open a field menu; `anchorOverride` (e.g. the toolbar "⋯") when the inline
    * button is hidden. `restoreFocus`: a pick sends focus back to the anchor.
    */
-  async function openField(field, anchorOverride = null, { restoreFocus = false } = {}) {
+  async function openField(field, anchorOverride = null, { restoreFocus = false, shouldOpen = () => true } = {}) {
+    if (!shouldOpen()) return;
     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,
+        shouldOpen,
         t: hooks.t,
         placement,
         current: { provider: brain.provider, model: brain.model },
@@ -1034,12 +1150,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 || !shouldOpen()) 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 || !shouldOpen()) 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();
@@ -1070,13 +1222,6 @@ export function createBrainPicker(host, hooks = {}) {
       return;
     }
 
-    if (field === 'account') {
-      if (!ACCOUNT_PROVIDERS.has(brain.provider)) return;
-      // 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;
-    }
-
     if (field === 'project') {
       const actor = anchor === heroProject ? heroProjectMascot : null;
       const pick = project => {
@@ -1093,21 +1238,6 @@ export function createBrainPicker(host, hooks = {}) {
       return;
     }
 
-    if (field === 'mcp') {
-      const presets = getCachedMcpProfilePresets();
-      const items = Object.entries(presets).map(([id, preset]) => ({
-        kind: 'radio',
-        id,
-        label: preset?.label || id,
-        desc: preset?.description || '',
-        tag: preset?.tools != null ? `${preset.tools} ${t('assistant.brain.tools', 'tools')}` : '',
-        selected: id === brain.mcpProfile,
-        onSelect: () => commit({ mcpProfile: id }, 'mcp'),
-      }));
-      menu(t('assistant.brain.mcp', 'MCP tool profile'), items);
-      return;
-    }
-
     if (field === 'mode') {
       const modes = PERMISSION_MODES[brain.provider] || PERMISSION_MODES['claude-code'];
       // Plan mode is its own switch: it combines with every approval mode below.
@@ -1204,15 +1334,14 @@ export function createBrainPicker(host, hooks = {}) {
     if (provider === before.provider) return;
     await ensureLoaded(provider);
     if (destroyed) return;
-    const draft = { ...before, provider, model: model || '', effort: null, agent: null, accountId: null };
+    const draft = { ...before, provider, model: model || '', effort: null, agent: null, accountId: null, tools: null };
     // resolveBrainDefaults reads the new provider's catalog.
     const next = resolveBrainDefaults(draft, {
       models: { [provider]: resolvableModels(provider, draft.model) },
       efforts: { [provider]: effortsFor(normalizeBrain(draft)) },
       accounts: { 'claude-code': getCachedClaudeAccounts(), codex: getCachedCodexAccounts() },
       agents: getCachedOpencodeAgents(),
-      mcpProfiles: getCachedMcpProfilePresets(),
-      defaultMcpProfile: 'full',
+      toolCatalog: getCachedToolCatalog(),
       projects: _projectsCache || [],
     });
     if (model && !next.model) next.model = model;
@@ -1245,6 +1374,6 @@ export function createBrainPicker(host, hooks = {}) {
     mountEmptyProject,
     setBrain() { render(); },
     close: closeMenu,
-    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(); },
+    destroy() { toolsLife.abort(); toolsSlot.remove(); 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(); },
   };
 }

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

@@ -204,7 +204,7 @@ export function createComposer(hostEl, hooks = {}) {
   function renderAttachments() {
     const chips = [];
     state.images.forEach((img, i) => {
-      chips.push(`<span class="asst-chip static" data-kind="image" data-idx="${i}"><img src="data:${esc(img.mediaType)};base64,${img.base64}" alt=""><span class="asst-chip-text">${esc(img.name || 'image')}</span><button type="button" class="asst-chip-x" aria-label="${esc(t('common.remove', 'Remove'))}">${ICON_X}</button></span>`);
+      chips.push(`<span class="asst-chip static" data-kind="image" data-idx="${i}"><img src="data:${esc(img.mediaType)};base64,${esc(img.base64)}" alt=""><span class="asst-chip-text">${esc(img.name || 'image')}</span><button type="button" class="asst-chip-x" aria-label="${esc(t('common.remove', 'Remove'))}">${ICON_X}</button></span>`);
     });
     state.files.forEach((f, i) => {
       chips.push(`<span class="asst-chip static" data-kind="file" data-idx="${i}"><span class="asst-chip-text">${esc(f.name)}</span><span class="asst-chip-meta">${esc(Math.ceil(f.content.length / 1024))}k</span><button type="button" class="asst-chip-x" aria-label="${esc(t('common.remove', 'Remove'))}">${ICON_X}</button></span>`);