synabun 2.0.5 → 2.0.9

package/neural-interface/public/shared/assistant/asst-routes-editor.js

@@ -1,6 +1,8 @@
 // Model routes: draft-only editor. All model data comes through asst-route-models.
 // The global default and saved preferences are written together only on Save.
-import { clampEffortId, getEffortLevelsForModel, modelEffortIds } from '../agent-runtime-options.js';
+import { clampEffortId, getEffortLevelsForModel, modelEffortIds, fetchClaudeAccounts, fetchCodexAccounts, getCachedClaudeAccounts, getCachedCodexAccounts, getClaudeWorkerAccountId, getCodexWorkerAccountId } from '../agent-runtime-options.js';
+import { accountSummary, accountName, accountBadge, accountIdentity } from '../account-view.js';
+import { accountUsageText, autoAccountLabel } from '../account-usage.js';
 import { getProviderMeta } from '../provider-icons.js';
 import { getRouting, putRouting } from './asst-api.js';
 import { catalogModelRow, hiddenModelFor, ICON_CARET, openModelMenu } from './asst-brain-picker.js';
@@ -30,7 +32,33 @@ function translator(t) {
     return typeof text === 'string' && text !== key ? text : String(fallback).replace(/\{(\w+)\}/g, (_, k) => params?.[k] ?? `{${k}}`);
   };
 }
-function choiceKey(p) { return p ? JSON.stringify([p.kind || 'direct', p.provider || '', p.model || '', p.effort || '']) : ''; }
+function choiceKey(p) { return p ? JSON.stringify([p.kind || 'direct', p.provider || '', p.model || '', p.effort || '', p.accountId || '']) : ''; }
+
+export function routeAccountView(pref, task, brain, accounts, workers = {}, t = null) {
+  const tr = translator(t);
+  const empty = { label: tr('assistant.routes.editorUnusedValue', '—'), readOnly: true, options: [], hint: '' };
+  if (!pref || pref.provider === 'opencode') return empty;
+  const direct = task.id === 'chat' || routeExecutionKind(pref, task, brain) === 'direct';
+  const provider = task.id === 'chat' ? brain.provider : pref.provider;
+  if (!['claude-code', 'codex'].includes(provider)) return empty;
+  const rows = accounts[provider] || [];
+  const providerView = provider === 'codex' ? 'codex' : 'claude';
+  const id = task.id === 'chat' ? brain.accountId || 'default' : pref.accountId || (direct ? brain.accountId || 'default' : null);
+  const selected = rows.find(a => a.id === id);
+  const missing = id && id !== 'auto' && !selected;
+  const removed = tr('assistant.routes.account.removed', '{id} · account removed', { id });
+  const warning = missing ? tr('assistant.routes.account.removedHint', 'Account removed. Save another account choice before running this route.') : selected?.signedIn === false ? tr('assistant.routes.account.signedOut', 'Signed out. Sign in from the provider account menu before running this route.') : '';
+  const worker = rows.find(a => a.id === (workers[provider] || 'default'));
+  const label = id === 'auto' ? autoAccountLabel(t) : selected ? accountSummary(selected, providerView) : missing ? removed : tr('assistant.routes.account.workersDefault', 'Workers default');
+  const options = [
+    { id: '', label: direct ? tr('assistant.routes.editorInConversation', 'This conversation') : tr('assistant.routes.account.workersDefault', 'Workers default'), desc: worker ? accountSummary(worker, providerView) : '', selected: !pref.accountId },
+    { id: 'auto', label: autoAccountLabel(t), desc: tr('assistant.accountUsage.autoHint', 'Signed-in subscriptions only. Another account runs on a worker.'), selected: id === 'auto' },
+    ...rows.map(a => ({ id: a.id, label: accountName(a, providerView), tag: accountBadge(a, providerView).text, desc: a.signedIn === false ? tr('assistant.routes.account.signedOut', 'Signed out. Sign in from the provider account menu before running this route.') : [accountIdentity(a), accountUsageText(a, t)].filter(Boolean).join(' · '), selected: !!pref.accountId && a.id === id })),
+  ];
+  return { label, readOnly: task.id === 'chat', options, warning, hint: warning || (selected ? `${label} · ${accountUsageText(selected, t)}` : label) };
+}
+
+export function routeModelAccount(pref, provider) { return pref?.provider === provider ? pref.accountId || null : null; }
 
 /** Only actual choices change the draft. Catalog label/by updates are not user edits. */
 export function routeEditorPatch(mode, initialMode, prefs, edits) {
@@ -307,7 +335,7 @@ export async function openRoutesEditor(hooks = {}) {
       const note = el('div', 'asst-routes-catalog-note'); note.setAttribute('role', 'status'); note.append(el('span', '', tr('assistant.routes.editorState.modelsFailed', 'Could not refresh the model list. Showing provider lists where available. Reload models to verify your choices.'))); table.append(note);
     } else if (!rowsOf(state.catalog).length) table.append(el('div', 'asst-routes-catalog-note', tr('assistant.routes.editorState.modelsEmpty', 'No models are available. Check Models or connect a provider, then reload.')));
     const columns = el('div', 'asst-routes-columns'); columns.setAttribute('aria-hidden', 'true');
-    for (const key of ['task', 'model', 'effort', 'run', 'reset']) columns.append(el('span', '', tr(`assistant.routes.columns.${key}`, key)));
+    for (const key of ['task', 'model', 'effort', 'run', 'account', 'reset']) columns.append(el('span', '', tr(`assistant.routes.columns.${key}`, key)));
     table.append(columns);
     const list = el('div', 'asst-routes-list');
     const taskList = tasks();
@@ -363,7 +391,7 @@ export async function openRoutesEditor(hooks = {}) {
           else if (target?.model) {
             const levels = modelEffortIds(catalogModelRow(target.provider, target.model, state.catalog));
             const effort = !pref?.effort ? null : levels ? clampEffortId(pref.effort, levels) : pref.provider === target.provider ? pref.effort : null;
-            setChoice(task.id, { kind: task.dispatchOnly ? 'dispatch' : pref?.kind || task.defaultKind || 'direct', provider: target.provider, model: target.model, effort, label: target.label || target.model }, modelBtn.dataset.focusKey);
+            setChoice(task.id, { kind: task.dispatchOnly ? 'dispatch' : pref?.kind || task.defaultKind || 'direct', provider: target.provider, model: target.model, effort, accountId: routeModelAccount(pref, target.provider), label: target.label || target.model }, modelBtn.dataset.focusKey);
           }
         },
       });
@@ -420,9 +448,20 @@ export async function openRoutesEditor(hooks = {}) {
     if (task.dispatchOnly) run.title = tr('assistant.routes.workerOnly', 'Worker only');
     else if (pref && pref.provider !== brain().provider && task.id !== 'chat') run.title = tr('assistant.routes.otherProviderWorker', 'A model from another provider runs on a worker.');
     const runCell = el('div', 'asst-routes-cell asst-routes-run-cell'); runCell.append(el('span', 'asst-routes-cell-label', tr('assistant.routes.columns.run', 'Runs in')), run); node.append(runCell);
+    const account = routeAccountView(pref, task, brain(), { 'claude-code': getCachedClaudeAccounts(), codex: getCachedCodexAccounts() }, { 'claude-code': getClaudeWorkerAccountId(), codex: getCodexWorkerAccountId() }, hooks.t);
+    const accountCell = el('div', 'asst-routes-cell asst-routes-account-cell');
+    const accountBtn = fieldButton('asst-routes-account', task, tr('assistant.routes.columns.account', 'Account'), account.label, () => {
+      state.menuFocus = `${task.id}-account`;
+      openMenuFor(accountBtn, tr('assistant.routes.columns.account', 'Account'), account.options.map(o => ({ ...o, kind: 'radio', onSelect: () => setChoice(task.id, { ...pref, accountId: o.id || null }, `${task.id}-account`) })));
+    });
+    accountBtn.dataset.focusKey = `${task.id}-account`; accountBtn.disabled = account.readOnly; accountBtn.title = account.hint;
+    if (!account.readOnly) caret(accountBtn);
+    if (account.warning) accountBtn.classList.add('asst-dd-warn');
+    accountCell.append(el('span', 'asst-routes-cell-label', tr('assistant.routes.columns.account', 'Account')), accountBtn); node.append(accountCell);
     const resetCell = el('div', 'asst-routes-reset-cell');
     if (pref) { const reset = button('asst-iconbtn asst-routes-reset', tr('assistant.routes.reset', 'Reset {taskClass}', { taskClass: task.label }), () => setChoice(task.id, null, `${task.id}-model`)); reset.dataset.focusKey = `${task.id}-reset`; reset.title = reset.getAttribute('aria-label'); reset.innerHTML = ICON_RESET; resetCell.append(reset); }
     node.append(resetCell);
+    if (account.warning) { const note = el('div', 'asst-routes-row-warning', account.warning); note.id = `${nameId}-account-warning`; accountBtn.setAttribute('aria-describedby', note.id); node.append(note); }
     if (capabilityNote) node.append(capabilityNote);
     if (issue) { description.hidden = true; node.querySelector('.asst-routes-row-note')?.remove(); const note = el('div', 'asst-routes-row-warning', issueText(issue, task)); note.title = note.textContent; note.id = `${nameId}-issue`; modelBtn.setAttribute('aria-describedby', `${source.id} ${note.id}`); modelBtn.title = `${label} — ${note.textContent}`; node.append(note); }
     if (task.id === 'chat' || task.id === 'vision') {
@@ -453,7 +492,7 @@ export async function openRoutesEditor(hooks = {}) {
     const pending = preserve ? changes() : {};
     state.loading = true; state.error = ''; state.modelsLoading = true; render();
     try {
-      const [data, result] = await Promise.all([getRouting(), loadRouteModels().then(catalog => ({ catalog })).catch(() => ({ catalog: state.catalog, error: true }))]);
+      const [data, result] = await Promise.all([getRouting(), loadRouteModels().then(catalog => ({ catalog })).catch(() => ({ catalog: state.catalog, error: true })), Promise.allSettled([fetchClaudeAccounts(true), fetchCodexAccounts(true)])]);
       if (!overlay.isConnected) return;
       state.data = data; state.version = data.version ?? null; state.initialMode = normalizeRouteMode(data.routing?.defaultMode, DEFAULT_ROUTE_MODE);
       state.mode = pending.defaultMode || state.initialMode; state.prefs = { ...(data.routing?.preferences || {}) }; state.patch = pending.preferences || {};
@@ -485,7 +524,7 @@ export async function openRoutesEditor(hooks = {}) {
 import { openMenu } from './asst-menu.js';
 function openMenuFor(anchor, title, items) {
   if (currentMenu()) { closeMenu({ restoreFocus: true }); return null; }
-  const menu = openMenu(anchor, { title, items, className: 'asst-route-field-menu', role: 'menu' });
+  const menu = openMenu(anchor, { title, items, className: `asst-route-field-menu${anchor.classList.contains('asst-routes-account') ? ' asst-route-account-menu' : ''}`, role: 'menu' });
   const overlay = anchor.closest('.asst-routes-overlay'); if (overlay) adoptMenu(menu, overlay); return menu;
 }
 function adoptMenu(menu, overlay) {

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

@@ -15,7 +15,7 @@ export const SLASH_COMMANDS = [
   { name: 'project', usage: '/project <path>', descKey: 'assistant.slash.project', desc: 'Set the working project' },
   { name: 'routes', usage: '/routes [always|unsure|never]', descKey: 'assistant.slash.routes', desc: 'Set when to ask before routing (or open the model routes)' },
   { name: 'models', usage: '/models [list | archived | hide <id…> | show <id…>]', descKey: 'assistant.slash.models', desc: 'Switch models off or on for the Assistant (or open the Models list)' },
-  { name: 'budget', usage: '/budget', descKey: 'assistant.slash.budget', desc: 'Set the money caps (per run, session, brain)' },
+  { name: 'budget', usage: '/budget', descKey: 'assistant.slash.budget', desc: 'Set the session budget and view provider shares' },
   { name: 'computer', usage: '/computer [on|off]', descKey: 'assistant.slash.computer', desc: 'Let the assistant use your Mac' },
   { name: 'stop', usage: '/stop [runId|all]', descKey: 'assistant.slash.stop', desc: 'Stop a run, everything, or the current turn' },
   { name: 'new', usage: '/new [provider]', descKey: 'assistant.slash.new', desc: 'Start a fresh session' },

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

@@ -181,7 +181,7 @@ export function resolveBrainDefaults(brain, catalog = {}) {
 
   if (ACCOUNT_PROVIDERS.has(b.provider)) {
     const accounts = catalog.accounts?.[b.provider] || [];
-    if (!b.accountId || (accounts.length && !accounts.some(a => a?.id === b.accountId))) {
+    if (!b.accountId || (b.accountId !== 'auto' && accounts.length && !accounts.some(a => a?.id === b.accountId))) {
       b.accountId = accounts.find(a => a?.isDefault)?.id || accounts[0]?.id || 'default';
     }
   } else {

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

@@ -367,10 +367,10 @@ export function injectAssistantStyles() {
     .asst-chip.asst-suggestion > .asst-icon svg { width: 20px; height: 14px; }
     .asst-chip.asst-suggestion > .asst-icon { color: var(--asst-text-3); }
     .asst-chip.asst-suggestion:is(:hover, :focus-visible) > .asst-icon { color: var(--asst-text); }
-    /* "Choose a project": the toolbar's Working project field, centred under the lead (asst-brain-picker.js mountEmptyProject). An md capsule like the suggestions. */
-    .asst-empty-project { display: flex; justify-content: center; max-width: 100%; }
-    .asst-dd.asst-empty-project-btn { max-width: min(100%, 360px); }
-    .asst-empty-project-btn .asst-dd-label { max-width: 30ch; }
+    /* Project and Budget: shared md capsules under the lead, like the suggestions. */
+    .asst-empty-project { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 100%; }
+    .asst-dd.asst-empty-control-btn { max-width: min(100%, 360px); }
+    .asst-empty-control-btn .asst-dd-label { max-width: 30ch; }
     .asst-empty-project-key { flex-shrink: 0; color: var(--asst-text-3); font-weight: 400; }
 
     /* ── Messages ───────────────────────────────────────────────────── */
@@ -578,32 +578,61 @@ export function injectAssistantStyles() {
       color: var(--asst-text-2);
     }
 
-    /* ── Route lines ────────────────────────────────────────────────── */
+    /* ── Route lines ────────────────────────────────────────────────────
+       One line at any width, in the cards' column (the rack's 560px, no
+       hang): the glyph, arrow, kind and mark hold; the rest (model ·
+       account · usage, or the state) takes only the room left (flex-basis 0)
+       and ellipsizes first; the class gives way once the rest is down to
+       its "…". The head's title carries the whole text. */
     .asst-route-line { font-size: 12.5px; }
     .asst-route-line-head {
-      display: inline-flex;
+      position: relative;
+      display: flex;
       align-items: center;
       gap: 6px;
-      max-width: calc(100% + 8px);
+      width: fit-content;
+      max-width: min(100%, 560px);
+      min-width: 0;
       min-height: 26px;
-      margin-left: -8px;
       padding: 3px 8px;
+      overflow: hidden;
       border: 0;
       border-radius: var(--asst-r-ctl);
       background: transparent;
       color: var(--asst-text-2);
       font: inherit;
+      white-space: nowrap;
       text-align: left;
       cursor: pointer;
     }
     .asst-route-line-head:hover { background: var(--asst-fill-1); }
     .asst-route-glyph { color: var(--asst-brand); }
+    .asst-route-glyph svg, .asst-route-icon svg { width: 12px; height: 12px; }
+    .asst-route-glyph, .asst-route-arrow, .asst-route-kind, .asst-route-icon, .asst-route-chev { flex: none; }
     .asst-route-arrow, .asst-route-chev { color: var(--asst-text-4); }
     .asst-route-kind { color: var(--asst-text-3); font-size: 11.5px; }
-    .asst-route-icon svg { width: 12px; height: 12px; }
-    .asst-route-target { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--asst-text); font-weight: 500; }
+    .asst-route-class { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    .asst-route-rest { flex: 1 1 0; min-width: 1.2em; overflow: hidden; text-overflow: ellipsis; color: var(--asst-text-3); }
+    .asst-route-target { color: var(--asst-text); font-weight: 500; }
     .asst-route-meta, .asst-route-state { flex-shrink: 0; color: var(--asst-text-3); white-space: nowrap; }
+    .asst-route-meta:not([hidden]) + .asst-route-state::before { content: '· '; color: var(--asst-text-3); }
     .asst-route-line.pending .asst-route-state { color: var(--asst-warn); }
+    /* Live: the rack's sweep (asst-rk-sweep, asst-rack-styles.js) on the row's bottom edge, gold while
+       a run it dispatched works (the mark ticks like the rack's running tick), the warn tone while it
+       waits for your choice. Settled rows hold still. */
+    .asst-route-sweep { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; overflow: hidden; pointer-events: none; }
+    .asst-route-line[data-live] .asst-route-sweep::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 38%;
+      background: linear-gradient(90deg, transparent, var(--asst-brand), transparent);
+      animation: asst-rk-sweep 1.8s cubic-bezier(.45, 0, .55, 1) infinite;
+    }
+    .asst-route-line[data-live="waiting"] .asst-route-sweep::after { background: linear-gradient(90deg, transparent, var(--asst-warn), transparent); }
+    .asst-route-line[data-live="working"] .asst-route-icon { animation: asst-rk-tick 1.1s ease-in-out infinite; }
     .asst-route-line.muted .asst-route-glyph { color: var(--asst-text-4); }
     .asst-route-line.muted .asst-route-class { color: var(--asst-text-3); }
     .asst-route-chev { transition: transform var(--asst-dur-base) var(--asst-ease-standard); }
@@ -1079,8 +1108,21 @@ export function injectAssistantStyles() {
     /* Fields (toolbar and composer): glyph · seam · value ▾ */
     .asst-dd { flex: 0 1 auto; justify-content: flex-start; max-width: calc(18ch + 60px); }
     .asst-dd .asst-dd-label { min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
-    /* A display name ("Sonnet 5", a project) is sans; a raw model id (opus[1m]) is mono. */
-    .asst-dd.asst-dd-model[data-raw] .asst-dd-label { font-family: var(--asst-mono); font-weight: 400; }
+    /* The model chip: name · context tag · account cue · API (asst-model-chip.js). The picker
+       draws the longest form that fits the row, so no part shrinks or ends in an ellipsis; the
+       cue and the API badge are the account menu's avatar and badge at the row's xs size. */
+    .asst-dd.asst-dd-model { max-width: calc(30ch + 60px); }
+    .asst-dd-model .asst-dd-label.asst-model-label { display: inline-flex; align-items: center; gap: 4px; max-width: none; }
+    .asst-model-label > * { flex: none; }
+    .asst-model-label > [hidden] { display: none; }
+    .asst-model-tag { color: var(--asst-text-3); font-family: var(--asst-mono); font-size: 10.5px; font-weight: 400; }
+    .asst-model-label > .asst-acct-avatar { flex: 0 0 auto; min-width: 16px; width: auto; height: 16px; padding: 0 4px; font-size: 10px; }
+    .asst-model-label > .asst-acct-avatar[data-tone="warn"] { box-shadow: inset 0 0 0 1px var(--asst-pill-warn-ring); color: var(--asst-warn); }
+    .asst-model-label > .asst-acct-badge { margin: 0; }
+    /* Even the shortest form does not fit (a row narrower than 320px that cannot wrap): the name gives. */
+    .asst-dd-model[data-squeezed] .asst-model-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    /* A display name ("Sonnet 5", a project) is sans; a raw model id (opus) is mono. */
+    .asst-dd.asst-dd-model[data-raw] .asst-model-name { font-family: var(--asst-mono); font-weight: 400; }
     .asst-dd-caret {
       display: inline-flex;
       flex-shrink: 0;
@@ -1386,8 +1428,9 @@ export function injectAssistantStyles() {
       z-index: 100030; /* above modals (100020): the routes editor opens model menus */
       display: flex;
       flex-direction: column;
-      min-width: 200px;
-      max-width: min(380px, calc(100vw - 16px));
+      /* --asst-dd-room: the width of the box the menu stays inside, less its margins (asst-menu.js positionMenu). */
+      min-width: min(200px, var(--asst-dd-room, 200px));
+      max-width: min(380px, calc(100vw - 16px), var(--asst-dd-room, 100vw));
       max-height: 380px;
       overflow: hidden;
       padding: 4px;
@@ -1434,6 +1477,8 @@ export function injectAssistantStyles() {
     .asst-dd-item-desc { color: var(--asst-text-3); font-size: 11px; }
     /* Test density: each level's description is a sentence, so it wraps instead of truncating. */
     .asst-tests-menu .asst-dd-item-desc { white-space: normal; }
+    /* Admin sandbox (permission menu): its note is a sentence too. */
+    .asst-dd-item.asst-admin-sandbox-item .asst-dd-item-desc { white-space: normal; }
     .asst-dd-item-tag { flex-shrink: 0; margin-left: auto; color: var(--asst-text-3); font-size: 11px; }
     .asst-dd-kbd { flex-shrink: 0; margin-left: auto; color: var(--asst-text-3); font-family: var(--asst-mono); font-size: 10.5px; }
     .asst-dd-sep { flex-shrink: 0; height: 1px; margin: 4px 6px; background: var(--asst-line); }
@@ -1463,6 +1508,45 @@ export function injectAssistantStyles() {
     .asst-dd-input::placeholder { color: var(--asst-text-3); }
     .asst-dd-filter { margin: 2px 0 4px; }
     .asst-dd-empty { padding: 8px 10px; color: var(--asst-text-3); }
+    /* A footer stays under a scrolling list; a button row is one line of compact items. */
+    .asst-dd-foot { flex-shrink: 0; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--asst-line); }
+    .asst-dd-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
+    .asst-dd-btnrow-label { flex: 1 1 auto; min-width: 0; padding: 5px 10px; color: var(--asst-text-2); overflow-wrap: anywhere; }
+    .asst-dd-btnrow .asst-dd-item { flex: 0 1 auto; width: auto; }
+
+    /* ── Account menu (asst-account-menu.js) ────────────────────────
+       Every account once: initial · name ✓ · plan or credential badge, then who it is and its
+       usage in full (lines wrap, nothing is cut). Kept inside the panel by asst-menu.js. The
+       composer's Model menu lists the same rows: the rules follow the rows' own classes. */
+    .asst-dd-item.asst-acct-item { gap: 8px; padding: 6px 8px; }
+    :is(.asst-account-menu .asst-dd-item, .asst-dd-item:is(.asst-acct-item, .asst-acct-choice))[data-checked="1"] { background: var(--asst-fill-1); }
+    :is(.asst-account-menu .asst-dd-item, .asst-dd-item:is(.asst-acct-item, .asst-acct-choice)):is(:hover, .focused) { background: var(--asst-fill-2); }
+    .asst-acct-avatar { display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--asst-pill-r-xs); background: var(--asst-fill-2); color: var(--asst-text-2); font-size: 11px; font-weight: 600; line-height: 1; }
+    .asst-acct-avatar svg { width: 14px; height: 14px; }
+    .asst-acct-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; }
+    /* A long name wraps; its check and badge stay on its first line. */
+    .asst-acct-head { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
+    .asst-acct-name { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
+    .asst-acct-check { display: inline-flex; flex: none; margin-top: 3px; color: var(--asst-text); }
+    .asst-acct-check svg { width: 12px; height: 12px; }
+    .asst-acct-badge { flex: none; margin: 1px 0 0 auto; padding: 0 var(--asst-pill-px-xs); border-radius: var(--asst-pill-r-xs); background: var(--asst-fill-1); box-shadow: inset 0 0 0 1px var(--asst-line); color: var(--asst-text-2); font-size: 10.5px; font-weight: 500; line-height: 16px; white-space: nowrap; }
+    .asst-acct-line { color: var(--asst-text-3); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
+    .asst-dd-item:is(:hover, .focused) .asst-acct-line:not([data-tone="warn"]) { color: var(--asst-text-2); }
+    :is(.asst-acct-badge, .asst-acct-line, .asst-acct-value-text)[data-tone="warn"] { color: var(--asst-warn); }
+    /* The note under the accounts lines up with their names. */
+    .asst-dd-info.asst-acct-note { padding: 3px 8px 5px 40px; font-size: 11px; }
+    .asst-dd-item.asst-acct-value { gap: 6px; }
+    /* Footer rows read "label … value": the label muted, as the button row's. */
+    .asst-acct-value-label { flex: 1 1 auto; min-width: 0; color: var(--asst-text-2); overflow-wrap: anywhere; }
+    .asst-acct-value-text { flex: 0 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
+    .asst-acct-next { display: inline-flex; flex: none; color: var(--asst-text-3); }
+    .asst-acct-next svg { width: 12px; height: 12px; }
+    .asst-dd-item.asst-acct-back { gap: 6px; color: var(--asst-text-2); }
+    .asst-dd-item.asst-acct-choice { gap: 4px; padding: 5px 8px; }
+    .asst-dd-btnrow[data-id="manage-row"] .asst-dd-item { flex: 1 1 0; }
+    @media (pointer: coarse) {
+      :is(.asst-account-menu .asst-dd-item, .asst-dd-item:is(.asst-acct-item, .asst-acct-choice), .asst-dd-btnrow[data-id="manage-row"] .asst-dd-item) { min-height: 44px; }
+    }
 
     /* ── Modals (help, accounts, model routes) ──────────────────────── */
     .asst-modal-overlay {
@@ -1503,11 +1587,50 @@ export function injectAssistantStyles() {
     .asst-account-label { color: var(--asst-text); }
     .asst-account-sub { color: var(--asst-text-3); font-size: 11px; }
     .asst-account-row input.asst-dd-input { margin: 0; }
+    /* Claude accounts (claude-account-view.js): what each runs on, its credentials and their actions. */
+    .asst-account-row.claude { flex-wrap: wrap; align-items: flex-start; }
+    .asst-account-row.claude .asst-account-main { flex-basis: 60%; }
+    .asst-account-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
+    .asst-account-badge { flex-shrink: 0; padding: 1px 6px; border-radius: var(--asst-pill-r-xs); color: var(--asst-text-2); font-size: 10.5px; box-shadow: inset 0 0 0 1px var(--asst-line-2); }
+    .asst-account-badge[data-tone="ok"] { color: var(--asst-text); box-shadow: inset 0 0 0 1px var(--asst-pill-on-ring); }
+    .asst-account-badge[data-tone="warn"] { color: var(--asst-warn); box-shadow: inset 0 0 0 1px var(--asst-pill-warn-ring); }
+    .asst-account-creds { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; color: var(--asst-text-3); font-size: 11px; }
+    .asst-account-cred { display: flex; align-items: center; gap: 6px; }
+    .asst-account-cred-k { min-width: 120px; }
+    .asst-account-actions { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 6px; margin-top: 6px; }
+    .asst-account-form { display: flex; flex-basis: 100%; gap: 6px; margin-top: 6px; }
+    .asst-account-form input { flex: 1; min-width: 0; }
+    .asst-account-msg { flex-basis: 100%; margin-top: 4px; color: var(--asst-text-3); font-size: 11px; }
+    .asst-dd.asst-dd-warn { color: var(--asst-warn); box-shadow: inset 0 0 0 1px var(--asst-pill-warn-ring); }
     .asst-login-box { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--asst-r-field); box-shadow: inset 0 0 0 1px var(--asst-line-2); }
     .asst-login-code { color: var(--asst-text); font-family: var(--asst-mono); font-size: 15px; letter-spacing: .1em; }
 
     .asst-routes-modal { width: min(660px, 100%); }
-    .asst-budget-row { align-items: flex-start; }
+    .asst-budget-modal { width: min(560px, calc(100vw - 24px)); }
+    .asst-budget-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; }
+    .asst-budget-controls > :is(.asst-modal-note, .asst-budget-field-error, .asst-budget-switch-label) { grid-column: 1 / -1; }
+    .asst-budget-controls > .asst-btn { justify-self: start; }
+    .asst-budget-controls .asst-budget-input { width: 96px; min-width: 0; box-sizing: border-box; }
+    .asst-budget-switch-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--asst-text); cursor: pointer; }
+    .asst-budget-switch { appearance: none; position: relative; width: 30px; height: 18px; margin: 0; border: 0; border-radius: var(--asst-pill-r-xs); background: var(--asst-fill-3); box-shadow: inset 0 0 0 1px var(--asst-line-2); cursor: pointer; }
+    .asst-budget-switch::before { content: ''; position: absolute; width: 12px; height: 12px; top: 3px; left: 3px; border-radius: var(--asst-pill-r-xs); background: var(--asst-text-3); transition: transform var(--asst-dur-fast) var(--asst-ease-standard); }
+    .asst-budget-switch:checked { background: var(--asst-brand); }
+    .asst-budget-switch:checked::before { background: var(--asst-ink); transform: translateX(12px); }
+    .asst-budget-controls :is(input, button):focus-visible { outline: 2px solid var(--asst-focus); outline-offset: 2px; }
+    .asst-budget-controls input:disabled { opacity: .5; }
+    .asst-budget-popover .asst-dd-list { padding: 8px; }
+    .asst-budget-session { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--asst-line); }
+    .asst-budget-total { font-family: var(--asst-mono); }
+    .asst-budget-session[data-tone="warn"] .asst-budget-total, .asst-budget-dry { color: var(--asst-warn); }
+    .asst-budget-session[data-tone="over"] .asst-budget-total { color: var(--asst-live); }
+    .asst-budget-providers { display: flex; flex-direction: column; gap: 8px; }
+    .asst-budget-provider { padding: 8px; border-radius: var(--asst-r-field); background: var(--asst-fill-1); overflow-wrap: anywhere; }
+    .asst-budget-provider[data-eligible="false"] { color: var(--asst-text-3); }
+    .asst-budget-provider-name { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+    .asst-budget-provider-money { margin-top: 4px; font: 12px/1.5 var(--asst-mono); }
+    .asst-budget-brain { padding: 0 6px; border-radius: var(--asst-pill-r-xs); background: var(--asst-fill-2); font-size: 11.5px; }
+    .asst-budget-dry { font-size: 12px; }
+    .asst-budget-meter { width: 100%; accent-color: var(--asst-brand); }
     .asst-budget-desc, .asst-budget-meta { color: var(--asst-text-3); font-size: 11.5px; line-height: 1.4; }
     .asst-budget-meta { font-variant-numeric: tabular-nums; }
     .asst-budget-field-error { color: var(--asst-live); font-size: 11.5px; line-height: 1.4; }
@@ -1592,7 +1715,7 @@ export function injectAssistantStyles() {
     /* Model routes editor: Settings density on a desktop pointer. Scoped here
        so route cards, the model manager and other Assistant menus keep their UI. */
     .asst-routes-overlay { font-family: var(--stg-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, sans-serif); }
-    .asst-routes-overlay .asst-routes-modal { width: min(800px, 100%); max-height: calc(100dvh - 32px); border-radius: var(--asst-r-card); line-height: 1.4; }
+    .asst-routes-overlay .asst-routes-modal { width: min(1040px, 100%); max-height: calc(100dvh - 32px); border-radius: var(--asst-r-card); line-height: 1.4; }
     .asst-routes-modal :is(.asst-btn, .asst-dd, .asst-iconbtn) { --cap-h: var(--asst-pill-h-sm); --cap-r: var(--asst-pill-r-xs); --cap-px: var(--asst-pill-px-sm); --cap-icon: 12px; --cap-gap: 4px; }
     .asst-routes-modal .asst-modal-head { min-height: 40px; padding: 8px 14px 8px 22px; font-size: 13px; }
     .asst-routes-modal .asst-modal-head .asst-icon { color: var(--asst-text-2); }
@@ -1616,7 +1739,7 @@ export function injectAssistantStyles() {
     .asst-routes-modal .asst-routes-list-actions .asst-btn:hover:not(:disabled) { color: var(--asst-text); background: var(--asst-fill-1); }
     /* Reserve the widths the current model names, effort words and destinations
        need; give all remaining space to task descriptions instead of a share. */
-    .asst-routes-modal .asst-routes-columns, .asst-routes-modal .asst-routes-row { display: grid; grid-template-columns: minmax(0, 1fr) 208px 84px 128px var(--asst-pill-h-sm); column-gap: 6px; }
+    .asst-routes-modal .asst-routes-columns, .asst-routes-modal .asst-routes-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(120px, 200px) 70px 116px minmax(120px, 190px) var(--asst-pill-h-sm); column-gap: 6px; }
     .asst-routes-columns { position: sticky; top: -14px; z-index: 1; padding: 4px 8px; color: var(--asst-text-3); font-size: 11.5px; background: var(--asst-popover); }
     .asst-routes-columns span:last-child { visibility: hidden; }
     .asst-routes-modal .asst-routes-list { padding: 0 8px; border: 1px solid var(--asst-line); border-radius: var(--radius-group, 9px); background: var(--asst-field); }
@@ -1650,11 +1773,16 @@ export function injectAssistantStyles() {
     .asst-routes-catalog-note { padding: 8px; color: var(--asst-warn); font-size: 12px; line-height: 1.45; background: var(--asst-fill-1); border-radius: var(--asst-pill-r-xs); }
     .asst-routes-modal .asst-routes-error { flex-wrap: wrap; }
     .asst-routes-modal .asst-routes-error span { min-width: 0; overflow-wrap: anywhere; }
-    .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) { max-width: min(440px, calc(100vw - 16px)); font-family: inherit; font-size: 12px; }
+    .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) { max-width: min(440px, calc(100vw - 16px), var(--asst-dd-room, 100vw)); font-family: inherit; font-size: 12px; }
     .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) .asst-dd-item { height: var(--asst-pill-h-sm); min-height: var(--asst-pill-h-sm); padding: 0 8px; border-radius: var(--asst-pill-r-xs); }
     .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) .asst-dd-item-main { flex-direction: row; align-items: center; gap: 8px; }
     .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) .asst-dd-item-label { flex-shrink: 0; max-width: 60%; }
     .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) .asst-dd-item-desc { flex: 1; text-align: end; }
+    /* Account identities and quota windows need a second line in their menu. */
+    .asst-routes-overlay .asst-route-account-menu .asst-dd-item { height: auto; min-height: var(--asst-pill-h-sm); padding: 4px 8px; }
+    .asst-routes-overlay .asst-route-account-menu .asst-dd-item-main { flex-direction: column; align-items: stretch; gap: 2px; }
+    .asst-routes-overlay .asst-route-account-menu :is(.asst-dd-item-label, .asst-dd-item-desc) { white-space: normal; max-width: none; text-align: start; overflow-wrap: anywhere; }
+    .asst-model-menu .asst-dd-item[data-kind="radio"]:not([data-id*=":"]) .asst-dd-item-desc { white-space: normal; overflow-wrap: anywhere; }
     .asst-routes-overlay .asst-route-model-menu .asst-dd-input { height: var(--asst-pill-h-sm); min-height: var(--asst-pill-h-sm); font-size: 12px; border-radius: var(--asst-pill-r-xs); }
     .asst-routes-overlay .asst-route-model-menu .asst-dd-input:focus-visible { outline: 2px solid var(--asst-focus); outline-offset: -2px; }
     .asst-route-menu-foot { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--asst-line-2); padding-top: 4px; }
@@ -1665,7 +1793,7 @@ export function injectAssistantStyles() {
       .asst-routes-modal :is(.asst-btn, .asst-dd, .asst-iconbtn) { --cap-h: 44px; }
       .asst-routes-modal .asst-routes-mode { height: auto; min-height: 44px; }
       .asst-routes-modal .asst-routes-mode-label { white-space: normal; }
-      .asst-routes-modal .asst-routes-columns, .asst-routes-modal .asst-routes-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr) minmax(0, .7fr) minmax(0, .9fr) 44px; }
+      .asst-routes-modal .asst-routes-columns, .asst-routes-modal .asst-routes-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, .9fr) minmax(0, 1.4fr) 44px; }
       .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) :is(.asst-dd-item, .asst-dd-input) { min-height: 44px; height: auto; padding: 8px; }
       .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) .asst-dd-item-main { flex-direction: column; align-items: stretch; gap: 2px; }
       .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) :is(.asst-dd-item-label, .asst-dd-item-desc) { white-space: normal; max-width: none; text-align: start; overflow-wrap: anywhere; }
@@ -1678,7 +1806,7 @@ export function injectAssistantStyles() {
       .asst-routes-modal .asst-routes-modes { grid-template-columns: 1fr; }
       .asst-routes-modal .asst-routes-columns { display: none; }
       .asst-routes-modal .asst-routes-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; padding: 12px 0; }
-      .asst-routes-modal .asst-routes-row-main, .asst-routes-modal .asst-routes-model-cell { grid-column: 1 / -1; }
+      .asst-routes-modal .asst-routes-row-main, .asst-routes-modal .asst-routes-model-cell, .asst-routes-modal .asst-routes-account-cell { grid-column: 1 / -1; }
       .asst-routes-cell { flex-direction: column; gap: 4px; }
       .asst-routes-cell-label { display: block; color: var(--asst-text-3); font-size: 11.5px; }
       .asst-routes-reset-cell { align-self: end; }
@@ -1749,8 +1877,9 @@ export function injectAssistantStyles() {
        density is its gauge alone. A capsule that runs out of
        room drops its label half first and stays a glyph (its words remain in
        aria-label and the tooltip): route mode and Computer ≤960px, the mode
-       ≤540px, every composer field but the model ≤440px. Model, history, new
-       and "⋯" never hide; whatever hides stays in "⋯". A toolbar placed
+       ≤540px, every composer field but the model ≤440px, where the model
+       drops its caret and keeps its name (its form fits the row: see the
+       model chip above). Model, history, new and "⋯" never hide; whatever hides stays in "⋯". A toolbar placed
        outside the root (the sidepanel header) is out of reach of these rules:
        its host sizes it (asst-sidepanel-styles.js).
        Glyph only is the same three rules everywhere (see Capsules): the
@@ -1776,13 +1905,13 @@ export function injectAssistantStyles() {
       .asst-composer-brain .asst-dd.asst-dd-mode { display: grid; place-content: center; place-items: center; padding: 0; }
       .asst-composer-brain .asst-dd.asst-dd-mode > :is(.asst-dd-label, .asst-dd-caret) { display: none; }
       .asst-composer-brain .asst-dd.asst-dd-mode > .asst-icon:not([hidden]) { margin: 0; padding: 0 var(--cap-glyph-pad); box-shadow: none; }
-      .asst-dd-model .asst-dd-label { max-width: 14ch; }
       .asst-route-badge { display: none; }
     }
     @container asst (max-width: 440px) {
       .asst-composer-brain .asst-dd:is(.asst-dd-effort, .asst-dd-variant, .asst-dd-mode, .asst-dd-account) { display: grid; place-content: center; place-items: center; padding: 0; }
       .asst-composer-brain .asst-dd:is(.asst-dd-effort, .asst-dd-variant, .asst-dd-mode, .asst-dd-account) > :is(.asst-dd-label, .asst-dd-caret) { display: none; }
       .asst-composer-brain .asst-dd:is(.asst-dd-effort, .asst-dd-variant, .asst-dd-mode, .asst-dd-account) > .asst-icon:not([hidden]) { margin: 0; padding: 0 var(--cap-glyph-pad); box-shadow: none; }
+      .asst-composer-brain .asst-dd.asst-dd-model > .asst-dd-caret { display: none; }
     }
     @container asst (max-width: 400px) {
       .asst-root > * { --asst-inline: 6px; }
@@ -1790,19 +1919,17 @@ export function injectAssistantStyles() {
       .asst-suggestions { flex-direction: column; align-items: stretch; width: 100%; }
       .asst-chip.asst-suggestion { justify-content: flex-start; max-width: none; }
       .asst-empty-project { width: 100%; }
-      .asst-dd.asst-empty-project-btn { flex: 1 1 auto; justify-content: flex-start; max-width: none; }
-      .asst-empty-project-btn .asst-dd-label { flex: 1 1 auto; max-width: none; text-align: start; }
+      .asst-dd.asst-empty-control-btn { flex: 1 1 auto; justify-content: flex-start; max-width: none; }
+      .asst-empty-control-btn .asst-dd-label { flex: 1 1 auto; max-width: none; text-align: start; }
       .asst-msg.msg-user .asst-msg-content { max-width: 92%; }
-      .asst-dd-model .asst-dd-label { max-width: 9ch; }
       .asst-route-opt-sub { display: none; }
       .asst-run-main { flex-wrap: wrap; row-gap: 2px; }
       .asst-run-title { flex-basis: 100%; }
     }
     @container asst (max-width: 320px) {
       .asst-bar-group[data-group="computer"] { display: none !important; }
-      /* The model keeps a readable name (at least 5ch): the composer row wraps instead of truncating it. */
-      .asst-dd-model .asst-dd-label { min-width: 5ch; max-width: 14ch; }
-      /* A tighter gap keeps attach · model · effort · variant · mode · tests · send on one row at 320px. */
+      /* A tighter gap keeps attach · model · effort · variant · mode · tests · send on one row at 320px;
+         narrower, the row wraps rather than cut the model chip. */
       .asst-composer-actions { flex-wrap: wrap; gap: 6px 4px; }
       .asst-composer-brain { flex-wrap: wrap; gap: 6px 4px; }
     }
@@ -1825,6 +1952,8 @@ export function injectAssistantStyles() {
     @keyframes asst-spin { to { transform: rotate(360deg); } }
 
     body.ui-interacting :is(.asst-live-dot, .asst-spinner, .asst-computer-dot, .syna-cameo-eye) { animation-play-state: paused !important; }
+    body.ui-interacting .asst-route-line[data-live] .asst-route-icon,
+    body.ui-interacting .asst-route-line[data-live] .asst-route-sweep::after { animation-play-state: paused !important; }
 
     @media (prefers-reduced-motion: reduce) {
       .asst-transcript { scroll-behavior: auto; }
@@ -1834,6 +1963,8 @@ export function injectAssistantStyles() {
       .term-minimized-pill,
       .term-minimized-pill::before,
       .term-minimized-pill::after { animation: none !important; transition: none !important; }
+      /* A frozen sweep would be a stray stub: the route row draws none (its run card and state words remain). */
+      .asst-route-sweep { display: none; }
     }
   `;
   document.head.appendChild(style);

package/neural-interface/public/shared/cdx/cdx-commands.js

@@ -20,6 +20,8 @@ const definitions = [
   ['hooks', 'Inspect configured hooks', 'hooks_list'],
   ['init', 'Create or update AGENTS.md guidance', null, true],
   ['logout', 'Sign out of Codex', 'account_logout'],
+  ['login', 'Sign in with ChatGPT'],
+  ['account', 'Choose an account or sign in'],
   ['mcp', 'Search MCP servers and tools', 'mcp_status'],
   ['mention', 'Add a structured file mention', null, true],
   ['model', 'Choose model'],
@@ -146,10 +148,11 @@ export function configChanges(definitions, inputs, original) {
 export const SESSION_CONFIG_FIELDS = Object.freeze({
   model: 'model', model_reasoning_effort: 'effort', model_reasoning_summary: 'summary',
   personality: 'personality', service_tier: 'serviceTier', approval_policy: 'approvalPolicy',
+  sandbox_mode: 'sandboxPolicy',
 });
 
 export function sessionSettings(config) {
-  return Object.fromEntries(Object.entries(config).filter(([key]) => SESSION_CONFIG_FIELDS[key]).map(([key, value]) => [SESSION_CONFIG_FIELDS[key], value]));
+  return Object.fromEntries(Object.entries(config).filter(([key]) => SESSION_CONFIG_FIELDS[key]).map(([key, value]) => [key === 'sandbox_mode' ? 'sandboxMode' : SESSION_CONFIG_FIELDS[key], value]));
 }
 
 export function modelServiceTiers(model) {

package/neural-interface/public/shared/cdx/cdx-features.js

@@ -1,4 +1,5 @@
 import { capabilityAvailability, flattenNativeCatalog, reviewTarget } from './cdx-commands.js';
+import { t } from '../i18n.js';
 import { knownCodexCapabilities } from './cdx-capabilities.js';
 import { codexReadableValue, parseCodexAttachmentPayload, codexGatewayState, codexVerificationState, codexHttpsHandoff } from './cdx-protocol.js';
 
@@ -333,23 +334,27 @@ export function updateCodexGateway(tab, value) {
   accountSecurityViews.get(tab)?.();
 }
 
-export async function mountCodexAccountSecurity({ host, request, tab, capabilities }) {
+export async function mountCodexAccountSecurity({ host, experimentalHost = host, request, tab, capabilities }) {
+  const tr = (key, params) => t(`codexSettings.${key}`, params);
   const view = { error: message => { error.textContent = message; } };
   const error = element('div', 'cxp-settings-hint'); error.setAttribute('role', 'alert');
   const gateway = element('div', 'cxp-settings-section');
   const verification = element('div', 'cxp-settings-section');
-  host.append(gateway, verification, error);
+  host.append(gateway, error);
+  experimentalHost.append(verification);
   const available = name => capabilityAvailability(knownCodexCapabilities(tab) || capabilities, name);
   const renderGateway = () => {
     if (!host.isConnected || tab.closed) { accountSecurityViews.delete(tab); return; }
     gateway.replaceChildren();
     if (!available('gateway_oauth_read').supported) return;
     const value = tab.gatewayOAuth || {};
+    gateway.hidden = !value.required;
+    if (!value.required) return;
     const state = codexGatewayState(value);
-    gateway.append(element('div', 'cxp-settings-section-title', 'Gateway OAuth'));
-    gateway.append(element('div', 'cxp-settings-hint', `${value.providerName || value.providerId || 'Provider'} · ${state.label}`));
+    gateway.append(element('div', 'cxp-settings-section-title', tr('gateway')));
+    gateway.append(element('div', 'cxp-settings-hint', `${value.providerName || value.providerId || tr('provider')} · ${tr(`gatewayStates.${value.status || 'notReady'}`)}`));
     const action = state.pending ? 'gateway_oauth_cancel' : 'gateway_oauth_login';
-    gateway.append(button(state.pending ? 'Cancel' : 'Sign in', async () => {
+    gateway.append(button(tr(state.pending ? 'cancel' : 'signIn'), async () => {
       if (!available(action).supported) throw new Error(available(action).reason);
       await request(action, {});
       // Notification is authoritative; do not overwrite a completed login with a stale optimistic state.
@@ -360,10 +365,10 @@ export async function mountCodexAccountSecurity({ host, request, tab, capabiliti
     }, view, available(action)));
     if (!available(action).supported) gateway.append(element('div', 'cxp-settings-hint', available(action).reason));
     const handoff = codexHttpsHandoff(value.authUrl);
-    if (value.authUrl && !handoff) gateway.append(element('div', 'cxp-settings-hint', 'Authorization URL is unavailable: HTTPS is required.'));
+    if (value.authUrl && !handoff) gateway.append(element('div', 'cxp-settings-hint', tr('httpsRequired')));
     if (handoff && state.pending) {
-      gateway.append(element('div', 'cxp-settings-hint', `Continue sign-in at ${handoff.host}`));
-      gateway.append(button(`Open ${handoff.host}`, () => {
+      gateway.append(element('div', 'cxp-settings-hint', tr('continueAt', { host: handoff.host })));
+      gateway.append(button(tr('openHost', { host: handoff.host }), () => {
         window.open(handoff.url, '_blank', 'noopener,noreferrer');
       }, view));
     }
@@ -386,12 +391,15 @@ export async function mountCodexAccountSecurity({ host, request, tab, capabiliti
       const response = await request('verification_status', {});
       if (!host.isConnected || tab.closed) return;
       const state = codexVerificationState(response.verification);
-      verification.append(element('div', 'cxp-settings-section-title', 'User verification · Experimental'));
-      verification.append(element('div', 'cxp-settings-hint', state.label));
-      verification.append(element('div', 'cxp-settings-hint', 'Local device credential only; backend registration is managed by the verifier.'));
+      const reason = response.verification?.unavailableReason;
+      verification.hidden = !!reason && reason !== 'credentialMissing';
+      if (verification.hidden) return;
+      verification.append(element('div', 'cxp-settings-section-title', tr('verification')));
+      verification.append(element('div', 'cxp-settings-hint', tr(state.enrolled ? 'credentialReady' : 'credentialMissing')));
+      verification.append(element('div', 'cxp-settings-hint', tr('localCredential')));
       const action = state.enrolled ? 'verification_delete' : 'verification_enroll';
-      const control = button(state.enrolled ? 'Remove' : 'Enroll', async () => {
-        if (state.enrolled && !window.confirm('Remove the local user verification credential?')) return;
+      const control = button(tr(state.enrolled ? 'remove' : 'enroll'), async () => {
+        if (state.enrolled && !window.confirm(tr('removeCredential'))) return;
         await request(action, {}); await readVerification();
       }, view, available(action));
       if (state.enrolled) control.style.color = 'var(--cxp-danger)';
@@ -399,7 +407,7 @@ export async function mountCodexAccountSecurity({ host, request, tab, capabiliti
       if (!available(action).supported) verification.append(element('div', 'cxp-settings-hint', available(action).reason));
     } catch (failure) {
       if (available('verification_status').supported) {
-        verification.append(element('div', 'cxp-settings-hint', `User verification unavailable: ${failure.message}`));
+        verification.append(element('div', 'cxp-settings-hint', tr('error', { message: failure.message })));
       }
     }
   }

package/neural-interface/public/shared/cdx/cdx-icons.js

@@ -41,6 +41,8 @@ export let windowId = hostedSidepanelId || sessionStorage.getItem('cxp-window-id
 // ── Storage Keys ──
 export const STOR = {
   threadId: 'synabun-codex-panel-thread',
+  // The account that thread belongs to (its rollout lives in that account's CODEX_HOME).
+  threadAccount: 'synabun-codex-panel-thread-account',
   title: 'synabun-codex-panel-title',
   project: 'synabun-codex-panel-project',
   projectThreads: 'synabun-codex-panel-project-threads',