synabun 2.0.7 → 2.0.10

package/neural-interface/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neural-memory-interface",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "private": true,
   "description": "Private local SynaBun interface for memory visualization and multi-agent workflows",
   "license": "Apache-2.0",
@@ -61,9 +61,13 @@
     "@codemirror/search": "6.7.2",
     "@codemirror/state": "6.7.6",
     "@codemirror/view": "6.43.14",
+    "@highlightjs/cdn-assets": "11.12.0",
     "@lezer/highlight": "1.2.5",
     "@replit/codemirror-indentation-markers": "6.5.3",
     "esbuild": "^0.28.1",
+    "html2canvas": "1.4.1",
+    "marked": "14.1.4",
+    "mermaid": "11.17.2",
     "three": "0.169.0"
   }
 }

package/neural-interface/public/index.html

@@ -56,8 +56,8 @@
 </head>
 <body>
 
-<!-- html2canvas for card screenshot MCP tool -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" defer></script>
+<!-- html2canvas for card screenshot MCP tool (vendored: public/vendor/html2canvas/) -->
+<script src="/vendor/html2canvas/html2canvas-1.4.1.min.js" defer></script>
 
 <script type="module" src="/variant/3d/main.js"></script>
 </body>

package/neural-interface/public/shared/account-menu.js

@@ -332,7 +332,10 @@ export function mountAccountMenu({ provider = 'claude', container, before = null
 
   function place() {
     if (!open) return;
-    const rect = trigger.getBoundingClientRect();
+    let rect = trigger.getBoundingClientRect();
+    // A header too narrow for the trigger hides it (the panels' container queries); the menu,
+    // opened from the cog's Account row, then hangs from the row the trigger sits in.
+    if (!rect.width && !rect.height && trigger.parentElement) rect = trigger.parentElement.getBoundingClientRect();
     const owner = layer?.() || trigger.closest('[class*="panel"]');
     const ownerWidth = owner?.getBoundingClientRect?.().width;
     popup.style.width = `${Math.max(0, Math.min(320, ownerWidth > 240 ? ownerWidth - 16 : 320, window.innerWidth - 16))}px`;

package/neural-interface/public/shared/account-usage.js

@@ -1,9 +1,12 @@
 // Text only: keep the account menus in their existing component/token scope.
-export function accountUsageText(row, t) {
-  const tr = (key, fallback, params = {}) => {
+function translator(t) {
+  return (key, fallback, params = {}) => {
     const value = t?.(`assistant.accountUsage.${key}`, params);
     return value && value !== `assistant.accountUsage.${key}` ? value : fallback.replace(/\{(\w+)\}/g, (_, k) => params[k] ?? '');
   };
+}
+export function accountUsageText(row, t) {
+  const tr = translator(t);
   if (row?.mode === 'apiKey' || row?.mode === 'api') return tr('notApplicable', 'Usage n/a');
   const u = row?.usage;
   const reset = u?.resetsAt ? new Date(u.resetsAt) : null;
@@ -17,3 +20,60 @@ export function autoAccountLabel(t) {
   const value = t?.(key);
   return value && value !== key ? value : 'Auto · most usage left';
 }
+
+function pageLocale() {
+  try { return globalThis.document?.documentElement?.lang || undefined; } catch { return undefined; }
+}
+function dateFormat(locale, options) {
+  try { return new Intl.DateTimeFormat(locale, options); } catch { return new Intl.DateTimeFormat(undefined, options); }
+}
+const dayStart = (ms) => { const day = new Date(ms); day.setHours(0, 0, 0, 0); return day.getTime(); };
+const bare = (text) => String(text).replace(/\.$/, '');
+
+/**
+ * When an account's usage comes back, short enough for one menu line in the page's language:
+ * "15:59" today, "Thu 15:59" within the week, "Oct 19 15:59" / "19 out 15:59" later; '' without a
+ * valid date. `long` is the full form for a tooltip ("Thursday, October 22 at 15:59").
+ */
+export function resetTimeText(value, { now = Date.now(), locale = pageLocale(), long = false } = {}) {
+  const at = value ? new Date(value) : null;
+  if (!at || !Number.isFinite(at.getTime())) return '';
+  if (long) return dateFormat(locale, { weekday: 'long', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }).format(at);
+  const time = dateFormat(locale, { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }).format(at);
+  const days = Math.round((dayStart(at.getTime()) - dayStart(now)) / 86_400_000);
+  if (days === 0) return time;
+  if (days > 0 && days < 7) return `${bare(dateFormat(locale, { weekday: 'short' }).format(at))} ${time}`;
+  const date = dateFormat(locale, { day: 'numeric', month: 'short' }).formatToParts(at)
+    .filter((part) => part.type === 'day' || part.type === 'month').map((part) => bare(part.value)).join(' ');
+  return `${date} ${time}`;
+}
+
+/**
+ * An account's usage as one short line of a menu row: { text, tone: 'muted' | 'warn', title }
+ * ("50% left · resets Thu 15:59", "Limited until 23:10", "Usage unknown"), the title with the full
+ * reset date. null where usage does not apply: an API key, a signed-out or unchecked account.
+ */
+export function accountUsageLine(row, t, { now = Date.now(), locale = pageLocale() } = {}) {
+  if (!row || row.signedIn !== true || row.mode !== 'subscription') return null;
+  const tr = translator(t);
+  const u = row.usage;
+  const short = resetTimeText(u?.resetsAt, { now, locale });
+  const full = resetTimeText(u?.resetsAt, { now, locale, long: true });
+  if (u?.limited) {
+    return {
+      text: short ? tr('limitedUntil', 'Limited until {time}', { time: short }) : tr('limited', 'Limited'),
+      tone: 'warn',
+      title: full ? tr('limitedUntil', 'Limited until {time}', { time: full }) : tr('limited', 'Limited'),
+    };
+  }
+  if (typeof u?.remainingPercent !== 'number' || !Number.isFinite(u.remainingPercent)) {
+    const text = tr('unknown', 'Usage unknown');
+    return { text, tone: 'muted', title: text };
+  }
+  const left = tr('left', '{percent}% left', { percent: Math.round(Math.max(0, Math.min(100, u.remainingPercent))) });
+  return {
+    text: [left, short ? tr('resets', 'resets {time}', { time: short }) : ''].filter(Boolean).join(' · '),
+    tone: 'muted',
+    title: [left, full ? tr('resets', 'resets {time}', { time: full }) : ''].filter(Boolean).join(' · '),
+  };
+}

package/neural-interface/public/shared/account-view.js

@@ -145,7 +145,8 @@ export function accountBadge(row, provider = null) {
   return { text: accountText('checking', {}, p), tone: 'muted', mode: row.mode || null };
 }
 
-function planName(plan) {
+/** A subscription plan as its name ("max" → "Max"); '' for none. */
+export function planName(plan) {
   const value = String(plan || '').trim();
   return value ? value.charAt(0).toUpperCase() + value.slice(1) : '';
 }

package/neural-interface/public/shared/agent-runtime-options.js

@@ -1,6 +1,7 @@
 // Shared launch/runtime metadata for Automation Studio, Schedules Studio,
 // and agent sidepanels.
 import { normalizeAutomationSelection } from './automation-context.js';
+import { fetchOpencodeProviders, opencodeProviders } from './opencode-providers.js';
 
 export const CLI_PROFILES = [
   { id: 'claude-code', label: 'Claude Code', desc: 'Anthropic' },
@@ -145,6 +146,27 @@ let _opencodeModelsLoading = null;
 let _claudeModelsCache = null;
 let _claudeModelsLoading = null;
 let _mcpProfilePresets = null;
+let _mcpProfilePresetsLoading = null;
+
+// The verified Claude and Codex lists are also kept in sessionStorage (this tab only): after a reload the
+// pickers paint from them at once (a list read back is due, so the first load still asks the server).
+const LIST_STORE_PREFIX = 'synabun:runtime-models:v1:';
+function keepList(key, list) {
+  try { if (typeof sessionStorage !== 'undefined') sessionStorage.setItem(LIST_STORE_PREFIX + key, JSON.stringify(list)); } catch { /* full or unavailable */ }
+}
+function keptList(key) {
+  try {
+    if (typeof sessionStorage === 'undefined') return null;
+    const list = JSON.parse(sessionStorage.getItem(LIST_STORE_PREFIX + key) || 'null');
+    return Array.isArray(list) && list.length ? list : null;
+  } catch { return null; }
+}
+(() => {
+  const claude = keptList('claude-code');
+  if (claude && !_claudeModelsCache) _claudeModelsCache = claude;
+  const codex = keptList('codex:default');
+  if (codex && !_codexModelsCache.has('default')) _codexModelsCache.set('default', codex);
+})();
 
 function localJsonArray(key) {
   try {
@@ -287,6 +309,7 @@ export async function fetchCodexModels(force = false, accountId = 'default') {
       const normalized = mergeCodexModelOptions(models, { fallback: false });
       _codexModelsCache.set(account, normalized);
       _modelListAt.set(`codex:${account}`, Date.now());
+      if (normalized.length) keepList(`codex:${account}`, normalized);
       return normalized;
     } catch {
       const previous = _codexModelsCache.get(account) || [];
@@ -466,8 +489,8 @@ export async function fetchOpencodeModels(force = false) {
   if (_opencodeModelsLoading) return _opencodeModelsLoading;
   _opencodeModelsLoading = (async () => {
     try {
-      const resp = await fetch('/api/opencode/providers/full');
-      const data = await resp.json().catch(() => ({}));
+      // The connected providers, from the page's one kept read (opencode-providers.js).
+      const data = await fetchOpencodeProviders({ force }).catch(() => ({}));
       if (!data || data.ok === false) return [];
       const out = parseOpencodeProviderModels(data);
       if (out.length) _opencodeModelsCache = out;
@@ -497,6 +520,7 @@ export async function fetchClaudeModels(force = false) {
       if (models.length && data?.source !== 'fallback') {
         _claudeModelsCache = models.map(model => ({ ...model, catalogSource: data?.source || 'cli' }));
         _modelListAt.set('claude-code', Date.now());
+        keepList('claude-code', _claudeModelsCache);
       } else {
         _claudeModelsCache = verified() || (models.length ? models.map(model => ({ ...model, catalogSource: 'fallback' })) : [...CLAUDE_FALLBACK_MODELS]);
       }
@@ -524,9 +548,19 @@ export async function ensureModelsForProfile(profileId, force = false, accountId
   return getModelsForProfile(profileId, accountId);
 }
 
+// OpenCode's list parsed from the provider list the page already holds (read at launch, kept across a reload,
+// or by another module): no request, and the hidden models of this window are applied as it is parsed.
+function keptOpencodeModels() {
+  const kept = opencodeProviders.peek('');
+  if (!kept || kept.ok === false) return null;
+  const out = parseOpencodeProviderModels(kept);
+  if (out.length) _opencodeModelsCache = out;
+  return out;
+}
+
 export function getModelsForProfile(profileId, accountId = 'default') {
   if (profileId === 'codex') return _codexModelsCache.get(String(accountId || 'default')) || [];
-  if (profileId === 'opencode') return _opencodeModelsCache || [];
+  if (profileId === 'opencode') return _opencodeModelsCache || keptOpencodeModels() || [];
   if (profileId === 'claude-code') return _claudeModelsCache || [];
   return STATIC_MODELS[profileId] || [];
 }
@@ -601,14 +635,21 @@ export function normalizeEffortForProfile(profileId, effort) {
 
 export async function fetchMcpProfilePresets(force = false) {
   if (!force && _mcpProfilePresets) return _mcpProfilePresets;
-  try {
-    const resp = await fetch('/api/mcp/profile');
-    const data = await resp.json().catch(() => ({}));
-    _mcpProfilePresets = data?.ok && data.presets ? data.presets : {};
-    return _mcpProfilePresets;
-  } catch {
-    return {};
-  }
+  // Callers asking at the same time share one request.
+  if (_mcpProfilePresetsLoading) return _mcpProfilePresetsLoading;
+  _mcpProfilePresetsLoading = (async () => {
+    try {
+      const resp = await fetch('/api/mcp/profile');
+      const data = await resp.json().catch(() => ({}));
+      _mcpProfilePresets = data?.ok && data.presets ? data.presets : {};
+      return _mcpProfilePresets;
+    } catch {
+      return {};
+    } finally {
+      _mcpProfilePresetsLoading = null;
+    }
+  })();
+  return _mcpProfilePresetsLoading;
 }
 
 export function getCachedMcpProfilePresets() {
@@ -619,6 +660,7 @@ export function clearRuntimeOptionCaches() {
   _codexModelsCache.clear();
   _codexModelsLoading.clear();
   _opencodeModelsCache = null;
+  opencodeProviders.invalidate('');
   _claudeModelsCache = null;
   _modelListAt.clear();
   _mcpProfilePresets = null;
@@ -630,3 +672,5 @@ if (typeof document !== 'undefined') {
   document.addEventListener('ocp-hidden-models-changed', () => { _opencodeModelsCache = null; });
   document.addEventListener('ocp-providers-changed', () => { _opencodeModelsCache = null; });
 }
+// A background read of the provider list brought another one: the parsed copy is made again from it.
+opencodeProviders.subscribe(() => { _opencodeModelsCache = null; });

package/neural-interface/public/shared/assistant/asst-account-menu.js

@@ -0,0 +1,298 @@
+// ═══════════════════════════════════════════
+// SynaBun Assistant — account menu (⚙ → Account profile)
+// ═══════════════════════════════════════════
+// Which Claude or Codex account this conversation runs on and which one
+// dispatched workers use, in one popover that stays inside the panel
+// (asst-menu.js `bounds`; only the list scrolls, the footer stays). Every
+// account is listed once: its name, who it is when that adds to the name, the
+// plan or API key, the usage left or the limit, and when it comes back. Auto is
+// one line (its sentence is the tooltip). "Workers use" opens the workers'
+// choice in the same popover (Esc goes back). The words come from
+// account-view.js and account-usage.js; what a choice does is the caller's
+// (asst-brain-picker.js). accountMenuRow is DOM-free (node --test loads it).
+// The composer's Model menu lists the same rows (accountChoiceItems,
+// accountModeItem, accountManageItem), so both show an account the same way.
+
+import { accountBadge, accountName, accountText, accountUsable, modeChoices, planName } from '../account-view.js';
+import { accountUsageLine, autoAccountLabel } from '../account-usage.js';
+import { openMenu } from './asst-menu.js';
+
+const ICON_CHECK = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg>';
+// Auto: the usage gauge (the same drawing as the brain picker's effort icon).
+const ICON_AUTO = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 16a8 8 0 1 1 16 0"/><path d="m12 16 4-5"/></svg>';
+const ICON_NEXT = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5 10.5 8 6 12.5"/></svg>';
+const ICON_BACK = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.5 5.5 8l4.5 4.5"/></svg>';
+// As wide as this in a wide panel; a narrow panel gets its own width less the menu's margins.
+const MENU_WIDTH = 340;
+
+function tf(t) {
+  return (key, fallback, params) => {
+    const v = typeof t === 'function' ? t(key, params) : undefined;
+    if (v && v !== key && typeof v === 'string') return v;
+    return params ? String(fallback).replace(/\{(\w+)\}/g, (_, k) => (params[k] != null ? params[k] : `{${k}}`)) : fallback;
+  };
+}
+
+/** Who the account is, when that adds to its name: the subscription's email or the key's hint (never the name again). */
+function identityOf(row, name) {
+  const raw = row?.mode === 'apiKey' ? (row.apiKey?.hint || row.identity) : (row?.subscription?.email || row?.identity);
+  const text = String(raw || '').trim();
+  return text && text.toLowerCase() !== String(name || '').trim().toLowerCase() ? text : '';
+}
+
+/**
+ * One account as the menu shows it: { id, name, initial, badge: { text, tone }, identity,
+ * line: { text, tone, title } | null, usable, signedOut }. The badge is what it runs on (the
+ * plan, "API key"), or that it is signed out; `line` is its usage, or how to sign it in.
+ */
+export function accountMenuRow(row, { provider = 'claude', t = null, now = Date.now(), locale } = {}) {
+  const p = provider === 'codex' ? 'codex' : 'claude';
+  const name = accountName(row, p) || String(row?.id || '');
+  const signedOut = row?.signedIn === false;
+  let badge;
+  if (!signedOut && row?.mode === 'apiKey') badge = { text: accountText('apiKeyBadge', {}, p), tone: 'muted' };
+  else if (!signedOut && row?.mode === 'subscription' && row.signedIn === true) badge = { text: planName(row.subscription?.plan) || accountText('subscriptionShort', {}, p), tone: 'muted' };
+  else badge = accountBadge(row, p);
+  let line = accountUsageLine(row, t, { now, locale });
+  if (signedOut) {
+    const text = accountText(row?.apiKey?.error ? 'keyUnreadableLong' : 'signIn', {}, p);
+    line = { text, tone: 'muted', title: text };
+  }
+  return {
+    id: row?.id,
+    name,
+    initial: Array.from(name.trim())[0]?.toLocaleUpperCase() || '?',
+    badge: { text: badge.text || '', tone: badge.tone === 'warn' ? 'warn' : 'muted' },
+    identity: signedOut ? '' : identityOf(row, name),
+    line,
+    usable: accountUsable(row),
+    signedOut,
+  };
+}
+
+/** The full words of a row, for its tooltip and its accessible name. */
+function rowWords(r, extra = []) {
+  return [r.name, r.identity, r.badge.text, r.line?.title || r.line?.text, ...extra].filter(Boolean).join(' · ');
+}
+
+function node(tag, className, text) {
+  const n = document.createElement(tag);
+  if (className) n.className = className;
+  if (text != null) n.textContent = text;
+  return n;
+}
+function icon(className, svg) {
+  const n = node('span', className);
+  n.setAttribute('aria-hidden', 'true');
+  n.innerHTML = svg;
+  return n;
+}
+
+// avatar | name ✓ … badge / identity / usage
+function drawAccount(btn, r, checked) {
+  btn.classList.add('asst-acct-item');
+  const avatar = node('span', 'asst-acct-avatar', r.initial);
+  avatar.setAttribute('aria-hidden', 'true');
+  const head = node('span', 'asst-acct-head');
+  head.append(node('span', 'asst-acct-name', r.name));
+  if (checked) head.append(icon('asst-acct-check', ICON_CHECK));
+  if (r.badge.text) { const badge = node('span', 'asst-acct-badge', r.badge.text); badge.dataset.tone = r.badge.tone; head.append(badge); }
+  const main = node('span', 'asst-acct-main');
+  main.append(head);
+  if (r.identity) main.append(node('span', 'asst-acct-line', r.identity));
+  if (r.line) { const line = node('span', 'asst-acct-line', r.line.text); line.dataset.tone = r.line.tone; main.append(line); }
+  btn.append(avatar, main);
+}
+function drawAuto(btn, label, checked) {
+  btn.classList.add('asst-acct-item', 'asst-acct-auto');
+  const head = node('span', 'asst-acct-head');
+  head.append(node('span', 'asst-acct-name', label));
+  if (checked) head.append(icon('asst-acct-check', ICON_CHECK));
+  const main = node('span', 'asst-acct-main');
+  main.append(head);
+  btn.append(icon('asst-acct-avatar', ICON_AUTO), main);
+}
+// label … value ›
+function drawValue(btn, label, value, tone) {
+  btn.classList.add('asst-acct-value');
+  const text = node('span', 'asst-acct-value-text', value);
+  text.dataset.tone = tone;
+  btn.append(node('span', 'asst-acct-value-label', label), text, icon('asst-acct-next', ICON_NEXT));
+}
+function drawBack(btn, label) {
+  btn.classList.add('asst-acct-back');
+  btn.append(icon('asst-acct-next', ICON_BACK), node('span', 'asst-acct-value-label', label));
+}
+function drawChoice(btn, label, checked) {
+  btn.classList.add('asst-acct-choice');
+  if (checked) btn.append(icon('asst-acct-check', ICON_CHECK));
+  btn.append(node('span', '', label));
+}
+
+/**
+ * The account choices as menu items (this menu and the composer's Model menu): Auto, every account
+ * once, and the note that another account starts a new conversation. rows: accountMenuRow()s;
+ * onAuto(), onPick(id) (never for the current account), onSignIn(id) (a signed-out account is its sign-in).
+ */
+export function accountChoiceItems({ t = null, rows = [], currentId = null, onAuto, onPick, onSignIn } = {}) {
+  const tr = tf(t);
+  const newConversation = tr('assistant.brain.newConversation', 'starts a new conversation');
+  const items = [{
+    kind: 'radio', id: 'auto', label: autoAccountLabel(t), selected: currentId === 'auto',
+    title: tr('assistant.accountUsage.composerHint', 'Pick the subscription with most usage left and start a new conversation.'),
+    render: (btn, { checked }) => drawAuto(btn, autoAccountLabel(t), checked),
+    onSelect: () => onAuto?.(),
+  }];
+  for (const r of rows) {
+    const current = r.id === currentId;
+    // A signed-out account is listed with its way back in: choosing it opens its sign-in.
+    const words = rowWords(r, [!current && !r.signedOut ? newConversation : '']);
+    items.push({
+      kind: current ? 'radio' : r.signedOut ? 'item' : 'radio', id: r.id, label: r.name, keywords: r.identity,
+      selected: current, title: words, ariaLabel: words,
+      render: (btn, { checked }) => drawAccount(btn, r, checked),
+      onSelect: () => (r.signedOut ? onSignIn?.(r.id) : current ? null : onPick?.(r.id)),
+    });
+  }
+  items.push({ kind: 'info', className: 'asst-acct-note', label: tr('assistant.accountMenu.switchNote', 'Another account starts a new conversation.') });
+  return items;
+}
+
+/**
+ * What an account holding both credentials uses, as one row of two choices ("Work uses  Subscription |
+ * API key"); null for any other account. Waits while a turn runs. onSetMode(id, mode) for the other one.
+ */
+export function accountModeItem({ provider = 'claude', t = null, account = null, running = false, onSetMode } = {}) {
+  const p = provider === 'codex' ? 'codex' : 'claude';
+  const modes = modeChoices(account, p);
+  if (!modes.length) return null;
+  const tr = tf(t);
+  const newConversation = tr('assistant.brain.newConversation', 'starts a new conversation');
+  const name = accountName(account, p);
+  return {
+    kind: 'buttons', id: 'uses', label: tr('assistant.accountMenu.uses', '{label} uses', { label: name }), ariaLabel: accountText('usesGroup', { label: name }, p),
+    buttons: modes.map((m) => {
+      const text = accountText(m.mode === 'apiKey' ? 'apiKeyBadge' : 'subscriptionShort', {}, p);
+      return {
+        kind: 'radio', id: `mode:${m.mode}`, label: text, selected: m.current, disabled: running,
+        title: [m.label, m.detail, !m.current ? newConversation : ''].filter(Boolean).join(' · '),
+        render: (btn, { checked }) => drawChoice(btn, text, checked),
+        onSelect: () => { if (!m.current) onSetMode?.(account.id, m.mode); },
+      };
+    }),
+  };
+}
+
+/** Add account… and Manage… side by side. */
+export function accountManageItem({ t = null, onAdd, onManage } = {}) {
+  const tr = tf(t);
+  return {
+    kind: 'buttons', id: 'manage-row',
+    buttons: [
+      { id: '__add', label: tr('assistant.accounts.add', 'Add account…'), onSelect: () => onAdd?.() },
+      { id: '__manage', label: tr('assistant.accounts.manage', 'Manage…'), onSelect: () => onManage?.() },
+    ],
+  };
+}
+
+/**
+ * Open the menu from `anchor`. ctx: { provider: 'claude' | 'codex', t, placement, bounds,
+ *   read() → { accounts, currentId, workerId, running },
+ *   onAuto(), onPick(id), onSetWorker(id) → Promise, onSetMode(id, mode), onAdd(), onManage(id?), onError(err),
+ *   now, locale (the clock and language of the reset times; default: now and the page's) }
+ * Returns the asst-menu handle (or null).
+ */
+export function openAccountMenu(anchor, ctx = {}) {
+  const tr = tf(ctx.t);
+  const p = ctx.provider === 'codex' ? 'codex' : 'claude';
+  const workersTitle = p === 'codex' ? tr('assistant.accounts.codexWorkersHeader', 'Codex workers use') : tr('assistant.accounts.workersHeader', 'Claude Code workers use');
+  let view = 'main';
+  let busy = false;
+  let handle = null;
+
+  const state = () => {
+    const s = ctx.read?.() || {};
+    const accounts = Array.isArray(s.accounts) ? s.accounts : [];
+    const rows = accounts.map((a) => accountMenuRow(a, { provider: p, t: ctx.t, now: ctx.now, locale: ctx.locale }));
+    return { accounts, rows, currentId: s.currentId || null, workerId: s.workerId || 'default', running: s.running === true };
+  };
+
+  function mainItems(s) {
+    return accountChoiceItems({ t: ctx.t, rows: s.rows, currentId: s.currentId, onAuto: () => ctx.onAuto?.(), onPick: (id) => ctx.onPick?.(id), onSignIn: (id) => ctx.onManage?.(id) });
+  }
+
+  function mainFooter(s) {
+    const footer = [];
+    const uses = accountModeItem({ provider: p, t: ctx.t, account: s.accounts.find((a) => a.id === s.currentId), running: s.running, onSetMode: (id, mode) => ctx.onSetMode?.(id, mode) });
+    if (uses) footer.push(uses);
+    const worker = s.rows.find((r) => r.id === s.workerId);
+    const workerName = worker ? worker.name : (s.workerId === 'default' ? accountText('defaultName', {}, p) : s.workerId);
+    const workerState = worker?.signedOut ? worker.badge.text : worker?.line?.tone === 'warn' ? tr('assistant.accountUsage.limited', 'Limited') : '';
+    const value = [workerName, workerState].filter(Boolean).join(' · ');
+    const workersLabel = tr('assistant.accountMenu.workers', 'Workers use');
+    footer.push({
+      kind: 'item', id: 'workers', label: workersLabel, keywords: workerName, keepOpen: true,
+      title: [`${workersTitle}: ${value}`, tr('assistant.accountMenu.workersHint', 'Used when a dispatch names no account.')].join(' · '),
+      ariaLabel: `${workersTitle}: ${value}`,
+      render: (btn) => drawValue(btn, workersLabel, value, workerState ? 'warn' : 'muted'),
+      onSelect: () => showWorkers(),
+    });
+    footer.push(accountManageItem({ t: ctx.t, onAdd: () => ctx.onAdd?.(), onManage: () => ctx.onManage?.() }));
+    return footer;
+  }
+
+  function workerItems(s) {
+    const items = [{
+      kind: 'item', id: 'back', label: accountText('back', {}, p), keepOpen: true,
+      render: (btn) => drawBack(btn, accountText('back', {}, p)),
+      onSelect: () => showMain('workers'),
+    }];
+    for (const r of s.rows) {
+      const chosen = r.id === s.workerId;
+      const words = rowWords(r);
+      items.push({
+        kind: 'radio', id: `worker:${r.id}`, label: r.name, keywords: r.identity, selected: chosen,
+        disabled: !r.usable && !chosen, keepOpen: true, title: words, ariaLabel: words,
+        render: (btn, { checked }) => drawAccount(btn, r, checked),
+        onSelect: async () => {
+          if (chosen) { showMain('workers'); return; }
+          if (busy) return;
+          busy = true;
+          try { await ctx.onSetWorker?.(r.id); showMain('workers'); }
+          catch (err) { ctx.onError?.(err); }
+          finally { busy = false; }
+        },
+      });
+    }
+    items.push({ kind: 'info', className: 'asst-acct-note', label: tr('assistant.accountMenu.workersHint', 'Used when a dispatch names no account.') });
+    return items;
+  }
+
+  function showMain(focus = null) {
+    if (view === 'closed') return;
+    view = 'main';
+    const s = state();
+    handle?.update({ title: accountText('menuTitle', {}, p), items: mainItems(s), footer: mainFooter(s), focus });
+  }
+  function showWorkers() {
+    if (view === 'closed') return;
+    view = 'workers';
+    const s = state();
+    handle?.update({ title: workersTitle, items: workerItems(s), footer: [], focus: `worker:${s.workerId}` });
+  }
+
+  const s = state();
+  handle = openMenu(anchor, {
+    title: accountText('menuTitle', {}, p),
+    items: mainItems(s),
+    footer: mainFooter(s),
+    role: 'menu',
+    placement: ctx.placement || 'auto',
+    width: MENU_WIDTH,
+    bounds: ctx.bounds || null,
+    className: 'asst-account-menu',
+    onEscape: () => { if (view !== 'workers') return false; showMain('workers'); return true; },
+    onClose: () => { view = 'closed'; },
+  });
+  return handle;
+}