synabun 2.0.5 → 2.0.9

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

@@ -19,6 +19,8 @@ import {
   getCachedCodexAccounts,
   getCachedMcpProfilePresets,
   getCachedOpencodeAgents,
+  getClaudeWorkerAccountId,
+  getCodexWorkerAccountId,
   getEffortLevelsForModel,
   getModelsForProfile,
   modelEffortIds,
@@ -27,8 +29,13 @@ import {
 import { getHiddenModels, HIDDEN_MODELS_EVENT, hiddenModelMatch } from '../ocp-hidden-models.js';
 import { getProviderMeta } from '../provider-icons.js';
 import { on } from '../state.js';
-import { fetchAssistantCatalog, fetchProjects } from './asst-api.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';
+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,
@@ -74,6 +81,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);
@@ -411,7 +422,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 = {}) {
@@ -438,6 +450,9 @@ export async function openModelMenu(anchor, opts = {}) {
   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 }) });
   }
@@ -498,7 +513,7 @@ export async function openModelMenu(anchor, opts = {}) {
     role: 'menu',
     className: `asst-model-menu${opts.routingEditor ? ' asst-route-model-menu' : ''}`,
     zIndex: opts.zIndex ?? null,
-    repositionOnResize: opts.routingEditor === true,
+    repositionOnResize: true,
     filterEmptyLabel: tr('assistant.routes.menu.noMatches', 'No matching models. Check Models for hidden choices.'),
   });
   if (opts.routingEditor && menu) {
@@ -582,6 +597,7 @@ export function createBrainPicker(host, hooks = {}) {
   let loading = null;
   // The empty state's "Choose a project" (mountEmptyProject): the project field's second button.
   let heroProject = null;
+  let heroProjectMascot = null;
 
   function currentBrain() {
     return normalizeBrain(hooks.getBrain?.());
@@ -621,16 +637,51 @@ export function createBrainPicker(host, hooks = {}) {
     return accounts.find(a => a.id === brain.accountId) || null;
   }
 
+  const accountProvider = (brain) => (brain.provider === 'codex' ? 'codex' : 'claude');
   function accountLabel(brain) {
     const acc = accountOf(brain);
-    return acc ? (acc.label || acc.email || acc.id) : (brain.accountId || t('assistant.brain.accountDefault', 'Default'));
+    const name = acc ? accountName(acc, accountProvider(brain)) : (brain.accountId || t('assistant.brain.accountDefault', 'Default'));
+    // An account says what it runs on (its subscription or its API key), or that it is signed out.
+    if (acc && acc.mode !== undefined) {
+      const badge = accountBadge(acc, accountProvider(brain));
+      return badge.text ? `${name} · ${badge.text}` : name;
+    }
+    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);
@@ -653,6 +704,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;
@@ -673,14 +744,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}` });
-    // 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}` });
@@ -688,9 +862,12 @@ export function createBrainPicker(host, hooks = {}) {
       setBtn('effort', { label: v.effort, icon: ICON_EFFORT, hidden: !v.effortSupported, tooltip: `${t('assistant.brain.effort', 'Thinking effort')}: ${v.effort}` });
     }
     setBtn('variant', { label: v.variant, icon: ICON_EFFORT, hidden: !v.variantSupported, tooltip: `${t('assistant.brain.variant', 'Model variant')}: ${v.variant}` });
-    // Inline only when there is a choice to make; the "⋯" menu always has it (add / manage).
-    const accountChoices = ACCOUNT_PROVIDERS.has(brain.provider) ? (brain.provider === 'codex' ? getCachedCodexAccounts() : getCachedClaudeAccounts()).length : 0;
-    setBtn('account', { label: v.account, icon: ICON_ACCOUNT, hidden: accountChoices < 2, tooltip: `${t('assistant.brain.account', 'Account profile')}: ${v.account}` });
+    // A Claude or Codex brain always shows it: which account and which credential (its subscription or
+    // its API key) it runs on, or that the account is signed out.
+    const brainAcc = ACCOUNT_PROVIDERS.has(brain.provider) ? accountOf(brain) : null;
+    const accountTip = [v.account, brainAcc ? accountIdentity(brainAcc) : ''].filter(Boolean).join(' · ');
+    setBtn('account', { label: v.account, icon: ICON_ACCOUNT, hidden: true, tooltip: `${t('assistant.brain.account', 'Account profile')}: ${accountTip}` });
+    buttons.account?.classList.toggle('asst-dd-warn', !!brainAcc && brainAcc.signedIn === false);
     setBtn('project', { label: v.project, icon: ICON_FOLDER, tooltip: brain.project || t('assistant.brain.projectNoneTip', 'Working project: home directory'), aria: `${t('assistant.brain.project', 'Working project')}: ${brain.project || v.project}` });
     setBtn('mode', { label: v.mode, icon: ICON_SHIELD, tooltip: `${t('assistant.brain.mode', 'Permission mode')}: ${v.mode}` });
     const tests = testDensity();
@@ -721,10 +898,13 @@ export function createBrainPicker(host, hooks = {}) {
    * sends focus back to it. A new slot replaces the last one; null removes it.
    */
   function mountEmptyProject(slot) {
+    if (heroProject && isMenuOpen(heroProject)) closeMenu();
+    heroProjectMascot?.destroy();
+    heroProjectMascot = null;
     heroProject?.remove();
     heroProject = null;
     if (destroyed || !slot || typeof slot.appendChild !== 'function') return null;
-    const btn = el('button', 'asst-dd asst-empty-project-btn');
+    const btn = el('button', 'asst-dd asst-empty-control-btn asst-empty-project-btn');
     btn.type = 'button';
     btn.dataset.field = 'project';
     btn.setAttribute('aria-haspopup', 'menu');
@@ -743,6 +923,7 @@ export function createBrainPicker(host, hooks = {}) {
     });
     slot.appendChild(btn);
     heroProject = btn;
+    heroProjectMascot = createMascotControl(btn, { director: hooks.mascot, pose: 'project' });
     renderEmptyProject();
     return btn;
   }
@@ -761,7 +942,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) },
     ];
   }
 
@@ -818,12 +999,15 @@ 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);
       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) : [],
+        accountTitle: accountText('menuTitle', {}, accountProvider(brain)),
         onToast: hooks.onToast,
         onManageModels: hooks.onManageModels,
         onSelect: (target) => {
@@ -888,29 +1072,24 @@ export function createBrainPicker(host, hooks = {}) {
 
     if (field === 'account') {
       if (!ACCOUNT_PROVIDERS.has(brain.provider)) return;
-      const accounts = brain.provider === 'codex' ? getCachedCodexAccounts() : getCachedClaudeAccounts();
-      const items = accounts.map((a) => ({
-        kind: 'radio',
-        id: a.id,
-        label: a.label || a.email || a.id,
-        desc: a.email && a.email !== a.label ? a.email : (a.isDefault ? t('assistant.accounts.ambient', 'ambient config') : ''),
-        selected: a.id === brain.accountId,
-        onSelect: () => commit({ accountId: a.id }, 'account'),
-      }));
-      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) });
-      menu(t('assistant.brain.account', 'Account profile'), items);
+      // 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 => {
+        const changed = (currentBrain().project || null) !== (project || null);
+        commit({ project }, 'project');
+        actor?.commit(changed ? 'hop' : 'nod');
+      };
       const projects = _projectsCache || [];
-      const items = [{ kind: 'radio', id: '', label: t('assistant.brain.projectNone', 'Home directory'), desc: t('assistant.brain.projectNoneDesc', 'no project'), selected: !brain.project, restoreFocus, onSelect: () => commit({ project: null }, 'project') }];
-      for (const p of projects) items.push({ kind: 'radio', id: p.path, label: p.label || basename(p.path), desc: p.path, selected: p.path === brain.project, restoreFocus, onSelect: () => commit({ project: p.path }, 'project') });
+      const items = [{ kind: 'radio', id: '', label: t('assistant.brain.projectNone', 'Home directory'), desc: t('assistant.brain.projectNoneDesc', 'no project'), selected: !brain.project, restoreFocus, onSelect: () => pick(null) }];
+      for (const p of projects) items.push({ kind: 'radio', id: p.path, label: p.label || basename(p.path), desc: p.path, selected: p.path === brain.project, restoreFocus, onSelect: () => pick(p.path) });
       items.push({ kind: 'separator' });
-      items.push({ kind: 'input', placeholder: t('assistant.brain.projectCustom', 'Type a directory path…'), value: brain.project && !projects.some(p => p.path === brain.project) ? brain.project : '', restoreFocus, onSubmit: (v) => commit({ project: v }, 'project') });
-      menu(t('assistant.brain.project', 'Working project'), items, { width: 280, filter: projects.length > 8, filterPlaceholder: t('assistant.brain.filterProjects', 'Filter projects…') });
+      items.push({ kind: 'input', placeholder: t('assistant.brain.projectCustom', 'Type a directory path…'), value: brain.project && !projects.some(p => p.path === brain.project) ? brain.project : '', restoreFocus, onSubmit: pick });
+      menu(t('assistant.brain.project', 'Working project'), items, { width: 280, filter: projects.length > 8, filterPlaceholder: t('assistant.brain.filterProjects', 'Filter projects…'), onOpen: node => actor?.open(node), onClose: () => actor?.close() });
       return;
     }
 
@@ -949,10 +1128,77 @@ 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 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 = 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),
+    });
+    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;
+  }
+
   async function switchProvider(provider, model = '') {
     const before = currentBrain();
     if (provider === before.provider) return;
@@ -976,6 +1222,16 @@ export function createBrainPicker(host, hooks = {}) {
 
   render();
   refresh().catch(() => {});
+  // Any window changed a Claude or Codex account (signed in or out, a key, its mode, the worker choice,
+  // added, removed): its list is read again and the picker re-drawn, so it never shows a stale state.
+  const accountsChanged = (provider) => (msg) => {
+    const which = provider || (msg?.provider === 'codex' ? 'codex' : msg?.provider === 'claude-code' ? 'claude-code' : null);
+    const jobs = [];
+    if (!which || which === 'claude-code') jobs.push(fetchClaudeAccounts(true));
+    if (!which || which === 'codex') jobs.push(fetchCodexAccounts(true));
+    Promise.all(jobs).then(() => { if (!destroyed) render(); }).catch(() => {});
+  };
+  const offAccounts = [on('sync:claude:accounts-changed', accountsChanged('claude-code')), on('sync:codex:accounts-changed', accountsChanged('codex')), on('sync:assistant:accounts-changed', accountsChanged(null))];
 
   return {
     el: root,
@@ -989,6 +1245,6 @@ export function createBrainPicker(host, hooks = {}) {
     mountEmptyProject,
     setBrain() { render(); },
     close: closeMenu,
-    destroy() { destroyed = true; closeMenu(); 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(); },
   };
 }