synabun 2.0.5 → 2.0.7

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',

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

@@ -4,7 +4,7 @@
 import { storage } from '../storage.js';
 import { state, emit, on } from '../state.js';
 import { registerSidepanel, setSidepanelVisible, sidepanelAcceptsKeyboard, openAnotherSidepanelSession } from '../ui-sidepanel-windows.js';
-import { subscribeCliStatus, recheckCliStatus, getCliDocUrl, getCliInstallCommand, getCliLabel } from '../cli-status.js';
+import { mountCliBanner } from '../ui-cli-banner.js';
 import { nativeLoopWindowId } from '../ui-native-window-id.js';
 import { createStickyScrollController, getStickyScrollController } from '../ui-scroll-follow.js';
 import { wireFileLinks } from '../ui-file-links.js';
@@ -30,6 +30,7 @@ import {
   requestModelList, populateModelDropdown,
   setSessionLabel, renameActiveSession, promptNameNewSession, openSettingsPanel, renderSessionMenu,
   toggleAccountMenu,
+  mountCodexAccountMenu,
   contextMenuData, contextMenuReading, refreshContextMenuDetails,
   addImageFromFile, removeImage, renderImageStrip,
   addPathChip, removePathChip, renderPathStrip,
@@ -62,8 +63,7 @@ document.addEventListener('visibilitychange', () => {
 let _panel = null;
 let _visible = false;
 let _resizeBound = false;
-let _cliInstalled = null;
-let _cliUnsub = null;
+let _cliBanner = null; // the CLI banner and send-block (ui-cli-banner.js)
 
 // ═══════════════════════════════════════════
 //  Bound State (mirrors active tab — managed by cdx-tabs)
@@ -275,7 +275,6 @@ function buildPanel() {
         <button class="cxp-btn" id="cxp-slide" title="Slide panel"><svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg></button>
       </div>
       <div class="cxp-session-menu" id="cxp-session-menu"></div>
-      <div class="cxp-account-menu" id="cxp-account-menu"></div>
     </div>
     <div class="cxp-messages-container" id="cxp-messages-container"></div>
     <div class="cxp-bottom">
@@ -406,122 +405,66 @@ function startupEmptyText() {
 }
 
 // ── CLI installation status (banner + send-block) ──
-let _cliInstallFailureForced = false;
-let _cliFailureReason = null;
-
-function ensureCliBannerEl() {
-  if (!_panel) return null;
-  const container = panelEl('#cxp-messages-container');
-  if (!container || !container.parentNode) return null;
-  let banner = container.parentNode.querySelector(':scope > .cxp-cli-banner');
-  if (banner) { renderCliBannerContent(banner); return banner; }
-  const url = getCliDocUrl('codex');
-  banner = document.createElement('div');
-  banner.className = 'cxp-cli-banner';
-  banner.innerHTML = `
-    <div class="cxp-cli-banner-icon">!</div>
-    <div class="cxp-cli-banner-text">
-      <div class="cxp-cli-banner-title"></div>
-      <div class="cxp-cli-banner-body"></div>
-    </div>
-    <div class="cxp-cli-banner-actions">
-      <a class="cxp-cli-banner-link" href="${url}" target="_blank" rel="noopener noreferrer">Install guide</a>
-      <button class="cxp-cli-banner-recheck" type="button">Re-check</button>
-    </div>
-  `;
-  container.parentNode.insertBefore(banner, container);
-  const btn = banner.querySelector('.cxp-cli-banner-recheck');
-  btn?.addEventListener('click', async () => {
-    btn.disabled = true;
-    btn.textContent = 'Checking…';
-    try { await recheckCliStatus('codex'); }
-    finally {
-      if (btn.isConnected) {
-        btn.disabled = false;
-        btn.textContent = 'Re-check';
-      }
-    }
-  });
-  renderCliBannerContent(banner);
-  return banner;
-}
-
-// Two very different situations reach this banner, and telling the user the
-// CLI is "not installed" when it is installed sends them off to reinstall
-// something that is already there. Distinguish them.
-function renderCliBannerContent(banner) {
-  const titleEl = banner.querySelector('.cxp-cli-banner-title');
-  const bodyEl = banner.querySelector('.cxp-cli-banner-body');
-  if (!titleEl || !bodyEl) return;
-  const label = getCliLabel('codex');
-  bodyEl.replaceChildren();
-
-  if (_cliInstalled === null) {
-    titleEl.textContent = `${label} CLI not installed`;
-    const cmd = getCliInstallCommand('codex');
-    bodyEl.append('Run ');
-    const code = document.createElement('code');
-    code.textContent = cmd;
-    bodyEl.append(code, ' or follow the install guide.');
-    return;
-  }
-
-  titleEl.textContent = `${label} CLI failed to start`;
-  bodyEl.append(`${label} v${_cliInstalled} is installed, but it could not be launched. `);
-  if (_cliFailureReason) {
-    const code = document.createElement('code');
-    code.textContent = _cliFailureReason;
-    bodyEl.append(code);
-  } else {
-    bodyEl.append('Check the CLI path in Settings, then re-check.');
+// One controller (ui-cli-banner.js) draws the banner above the transcript while
+// Codex is not usable: not installed (with Install, which runs OpenAI's own
+// installer on the server), being installed, failed to install, or found but
+// failed to start (with the error it gave). It toggles `cxp-cli-blocked` on the
+// panel, which syncInputEnabled (cdx-tabs.js) reads to keep Send off. What it
+// says is cli-install-view.js (`cliInstall.*` strings).
+let _cliWasBlocked = false;
+
+function cliBanner() {
+  if (!_cliBanner) {
+    _cliBanner = mountCliBanner({
+      toolKey: 'codex',
+      prefix: 'cxp',
+      panel: () => _panel,
+      anchor: () => panelEl('#cxp-messages-container'),
+      onBlockedChange: (blocked) => {
+        try { syncInputEnabled(); } catch {}
+        const usableAgain = _cliWasBlocked && !blocked;
+        _cliWasBlocked = blocked;
+        if (usableAgain) reconnectAfterCli();
+      },
+    });
   }
+  return _cliBanner;
 }
 
-function removeCliBannerEl() {
-  if (!_panel) return;
-  const container = panelEl('#cxp-messages-container');
-  const banner = container?.parentNode?.querySelector(':scope > .cxp-cli-banner');
-  banner?.remove();
+// Codex was installed (or found again) after this tab's session could not start it: the tab connects again, so
+// Send works without reopening the panel. A tab that is running, or one an automation owns, is left alone.
+function reconnectAfterCli() {
+  const tab = activeTab();
+  if (!tab || tab.closed || tab.automationActive || tab.running) return;
+  if (tab.connected && tab.bootstrapped) return;
+  try {
+    if (tab.ws && tab.ws.readyState === WebSocket.OPEN) disconnectTab(tab);
+    connectTab(tab);
+  } catch (error) {
+    console.warn('[cdx-panel] reconnect after Codex became usable failed', error);
+  }
 }
 
 function refreshCliBanner() {
   if (!_panel) return;
-  const missing = _cliInstalled === null || _cliInstallFailureForced;
-  _panel.classList.toggle('cxp-cli-blocked', missing);
-  if (missing) ensureCliBannerEl();
-  else removeCliBannerEl();
+  cliBanner().refresh();
   try { syncInputEnabled(); } catch {}
 }
 
 export function isCdxCliInstalled() {
-  return _cliInstalled !== null && !_cliInstallFailureForced;
+  return !cliBanner().blocked();
 }
 
+// A session could not start Codex: "failed to start" with its words at once,
+// then the server is asked again and its answer decides what stays. (The
+// answer is read from the re-check itself: a spawn failure does not change
+// the version, so a change-only notification would never clear the banner.)
 export function flagCdxCliInstallFailure(reason = null) {
-  _cliInstallFailureForced = true;
-  _cliFailureReason = reason ? String(reason).slice(0, 300) : null;
-  refreshCliBanner();
-  // Clear the latch from the value recheckCliStatus RETURNS. Relying on the
-  // subscriber callback alone deadlocked: the callback only fired when the
-  // version string changed, and a spawn failure does not change the version,
-  // so the banner could never be dismissed — the Re-check button included.
-  recheckCliStatus('codex')
-    .then((info) => {
-      if (!info?.installed) return;
-      _cliInstallFailureForced = false;
-      _cliFailureReason = null;
-      refreshCliBanner();
-    })
-    .catch(() => {});
+  cliBanner().flagFailure(reason);
 }
 
 function ensureCliSubscription() {
-  if (_cliUnsub) return;
-  _cliUnsub = subscribeCliStatus('codex', (info) => {
-    _cliInstalled = info?.installed || null;
-    if (_cliInstalled) { _cliInstallFailureForced = false; _cliFailureReason = null; }
-    refreshCliBanner();
-  });
+  cliBanner();
 }
 
 // ═══════════════════════════════════════════
@@ -906,7 +849,6 @@ function wireEvents() {
     },
     onOpen: () => {
       sessionMenu?.classList.remove('open');
-      panelEl('#cxp-account-menu')?.classList.remove('open');
       panelEl('#cxp-effort-menu')?.classList.remove('open');
       refreshContextMenuDetails();
     },
@@ -916,8 +858,8 @@ function wireEvents() {
     // After this click has reached the document, whose handler closes the menu.
     onAccount: () => setTimeout(() => toggleAccountMenu(), 0),
   });
-  // The account menu hangs under the header, which a floating window is moved by.
-  panelEl('#cxp-account-menu')?.addEventListener('pointerdown', (event) => event.stopPropagation());
+  // The header account menu (account-menu.js, shared with the Claude panel): before the cog.
+  mountCodexAccountMenu(panelEl('.cxp-actions'), _panel);
   const slideBtn = panelEl('#cxp-slide');
   slideBtn?.addEventListener('click', () => setVisible(false));
   const changelogBtn = panelEl('#cxp-action-changelog');
@@ -1035,7 +977,6 @@ function wireEvents() {
   });
   document.addEventListener('click', (event) => {
     if (!event.target.closest('.cxp-header')) sessionMenu?.classList.remove('open');
-    if (!event.target.closest('#cxp-account-menu')) panelEl('#cxp-account-menu')?.classList.remove('open');
     if (!event.target.closest('.cxp-dropdown')) {
       _panel?.querySelectorAll('.cxp-dropdown.open').forEach((node) => node.classList.remove('open'));
     }

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

@@ -0,0 +1,231 @@
+import { t, getLocale } from '../i18n.js';
+import { accountSummary } from '../account-view.js';
+import { configChanges, configRestriction, configValue, SESSION_CONFIG_FIELDS, sessionSettings, modelServiceTiers, capabilityAvailability } from './cdx-commands.js';
+import { mountCodexAccountSecurity } from './cdx-features.js';
+
+const overrideValue = (field, value) => field === 'sandboxPolicy' && value ? ({ readOnly: 'read-only', workspaceWrite: 'workspace-write', dangerFullAccess: 'danger-full-access' })[value.type] ?? null : value;
+const tr = (key, params) => t(`codexSettings.${key}`, params);
+const el = (tag, cls, text) => { const node = document.createElement(tag); if (cls) node.className = cls; if (text != null) node.textContent = text; return node; };
+const metadata = [
+  ['model', 'model', 'models'], ['review_model', 'reviewModel', 'models'],
+  ['model_reasoning_effort', 'effort', 'models'], ['model_reasoning_summary', 'summary', 'models'],
+  ['service_tier', 'serviceTier', 'models'], ['personality', 'personality', 'models'],
+  ['approval_policy', 'approval', 'permissions'], ['sandbox_mode', 'sandbox', 'permissions'],
+  ['web_search', 'webSearch', 'tools'], ['model_provider', 'provider', 'advanced'],
+  ['model_verbosity', 'verbosity', 'advanced'], ['model_context_window', 'contextWindow', 'advanced'],
+  ['model_auto_compact_token_limit', 'autoCompact', 'advanced'],
+];
+export function codexSettingsDefinitions(schema, models, cfg) {
+  const model = models.find(m => (m.model || m.id) === cfg.model) || models.find(m => m.isDefault) || models[0];
+  const modelOptions = models.map(m => ({ value: m.model || m.id, label: m.displayName || m.label || m.model || m.id }));
+  return metadata.flatMap(([key, label, section]) => {
+    const field = schema.fields?.[key]; if (!field) return [];
+    if (key === 'service_tier' && cfg.model_provider && cfg.model_provider !== 'openai') return [];
+    let options = (field.values || []).map(value => ({ value, label: tr(`values.${value}`) === `codexSettings.values.${value}` ? value : tr(`values.${value}`) }));
+    if (key === 'model' || key === 'review_model') options = modelOptions;
+    if (key === 'model_reasoning_effort') options = (model?.supportedReasoningEfforts || []).map(e => ({ value: e.reasoningEffort, label: e.reasoningEffort }));
+    if (key === 'service_tier') options = modelServiceTiers(model);
+    if (key === 'personality' && !model?.supportsPersonality) return [];
+    // The provider list is configured locally. Built-in OpenAI plus named providers.
+    if (key === 'model_provider') options = [...new Set(['openai', ...Object.keys(cfg.model_providers || {}), cfg.model_provider].filter(Boolean))].map(value => ({ value, label: value }));
+    if (field.type !== 'number' && !options.length) return [];
+    return [{ key, label: tr(label), section, type: field.type, options: [{ value: '', label: tr('default') }, ...options] }];
+  });
+}
+
+export async function mountCodexSettings({ host, tab, request, capabilities, account, models, normalizeConfig, manageAccount, authenticate, onSaved }) {
+  if (host.querySelector('.cxp-settings-overlay')) return;
+  const previousFocus = document.activeElement;
+  const overlay = el('div', 'cxp-settings-overlay');
+  const panel = el('div', 'cxp-settings-panel'); panel.setAttribute('role', 'dialog'); panel.setAttribute('aria-modal', 'true'); panel.setAttribute('aria-label', tr('title'));
+  const header = el('div', 'cxp-settings-header');
+  const close = el('button', 'cxp-settings-close', '×'); close.setAttribute('aria-label', tr('close'));
+  const dismiss = () => { overlay.remove(); if (previousFocus?.isConnected) previousFocus.focus(); };
+  close.onclick = dismiss; header.append(el('span', '', tr('title')), close);
+  const body = el('div', 'cxp-settings-body'); const sections = {};
+  for (const key of ['account', 'models', 'permissions', 'tools', 'advanced']) {
+    const group = el(key === 'advanced' ? 'details' : 'section', 'cxp-settings-section'); group.dataset.section = key;
+    group.append(el(key === 'advanced' ? 'summary' : 'h3', 'cxp-settings-section-title', tr(key)));
+    const content = el('div', 'cxp-settings-group'); group.append(content); sections[key] = content; body.append(group);
+  }
+  const result = el('div', 'cxp-settings-result'); result.setAttribute('role', 'status');
+  const footer = el('div', 'cxp-settings-footer');
+  panel.append(header, body, footer); overlay.append(panel); host.append(overlay);
+  const error = message => { result.textContent = tr('error', { message }); result.dataset.error = 'true'; };
+  overlay.onclick = event => { if (event.target === overlay) dismiss(); };
+  overlay.onkeydown = event => {
+    if (event.key === 'Escape') { event.stopPropagation(); dismiss(); }
+    if (event.key === 'Tab') {
+      const controls = [...panel.querySelectorAll('button,select,input,summary,a[href]')].filter(n => !n.disabled && n.getClientRects().length);
+      if (event.shiftKey && document.activeElement === controls[0]) { event.preventDefault(); controls.at(-1)?.focus(); }
+      else if (!event.shiftKey && document.activeElement === controls.at(-1)) { event.preventDefault(); controls[0]?.focus(); }
+    }
+  };
+  close.focus();
+  footer.append(result);
+  const action = (label, fn) => {
+    const button = el('button', 'cxp-btn cxp-btn-sm', label); button.type = 'button';
+    button.onclick = async () => { button.disabled = true; try { await fn(); } catch (failure) { error(failure.message); } finally { if (button.isConnected) button.disabled = false; } };
+    return button;
+  };
+  sections.account.append(el('div', 'cxp-settings-loading', tr('loading')));
+  try {
+    const [configData, mcpData, permissions, limits, requirements, accountData] = await Promise.allSettled([
+      request('config_read', { cwd: tab.project || null, threadId: tab.threadId || null }), request('mcp_status'),
+      request('permission_roots_list'), request('rate_limits_read'), request('config_requirements'),
+      request('account_read'),
+    ]);
+    if (!overlay.isConnected || tab.closed) return;
+    sections.account.replaceChildren();
+    const details = el('div', 'cxp-settings-account-details'); details.dataset.codexAccountDetails = 'true';
+    const currentAccount = accountData.status === 'fulfilled' ? (accountData.value?.accountState || account) : account;
+    details.append(el('div', 'cxp-settings-value', currentAccount ? accountSummary(currentAccount, 'codex') : tr('defaultAccount')));
+    const rateLimits = limits.status === 'fulfilled' ? limits.value?.rateLimits : null;
+    const buckets = Object.values(rateLimits?.rateLimitsByLimitId || {});
+    if (!buckets.length && rateLimits?.rateLimits) buckets.push(rateLimits.rateLimits);
+    for (const bucket of buckets) {
+      const percent = bucket.primary?.usedPercent;
+      if (!Number.isFinite(percent)) continue;
+      const time = bucket.primary?.resetsAt ? new Date(bucket.primary.resetsAt * 1000).toLocaleString(getLocale()) : tr('unknown');
+      details.append(el('div', 'cxp-settings-hint', tr('usage', { name: bucket.limitName || bucket.limitId || 'Codex', percent: Math.round(percent), time })));
+    }
+    details.append(action(tr('manage'), () => { dismiss(); manageAccount(); })); sections.account.append(details);
+    await mountCodexAccountSecurity({ host: sections.account, experimentalHost: sections.advanced, request, tab, capabilities });
+    const runtime = tab.codexRuntime || {};
+    sections.advanced.append(el('div', 'cxp-settings-hint cxp-settings-runtime', tr('runtime', { cli: runtime.cliVersion || tr('unknown'), sdk: runtime.sdkVersion || tr('unknown'), protocol: runtime.protocolBaseline || tr('unknown') })));
+    if (runtime.codexBin) sections.advanced.append(el('div', 'cxp-settings-hint', runtime.codexBin));
+    const mcp = el('div', ''); mcp.id = 'cxp-settings-mcp'; sections.tools.append(el('h4', 'cxp-settings-subtitle', tr('mcp')), mcp);
+    async function renderMcp(data) {
+      if (data.error) throw new Error(data.error);
+      mcp.replaceChildren();
+      for (const server of data.servers || []) {
+        const row = el('div', 'cxp-mcp-row');
+        const statusKey = server.requiresOAuth ? 'loginRequired' : server.status === 'running' ? 'running' : 'configured';
+        const status = el('span', 'cxp-mcp-status', tr(statusKey)); status.dataset.status = server.status;
+        row.append(el('span', 'cxp-mcp-name', server.name), status);
+        if (server.alwaysAllowed) row.append(el('span', 'cxp-mcp-status', tr('alwaysAllowed')));
+        row.append(
+          action(tr('refresh'), async () => { await request('mcp_refresh', { name: server.name }); await renderMcp(await request('mcp_status')); }));
+        if (server.alwaysAllowed) row.append(action(tr('revoke'), async () => {
+          await request('mcp_approval_set', { name: server.name, approvalMode: 'prompt' }); await renderMcp(await request('mcp_status'));
+        }));
+        if (server.requiresOAuth) row.append(action(tr('authenticate'), () => authenticate(server.name)));
+        mcp.append(row);
+      }
+      if (!mcp.childElementCount) mcp.append(el('div', 'cxp-settings-hint', tr('noMcp')));
+    }
+    if (mcpData.status === 'fulfilled') await renderMcp(mcpData.value); else error(mcpData.reason.message);
+    const roots = el('div', ''); roots.id = 'cxp-settings-permissions';
+    sections.permissions.append(el('h4', 'cxp-settings-subtitle', tr('folders')), roots);
+    async function renderRoots(data) {
+      if (data.error) throw new Error(data.error);
+      roots.replaceChildren(); const fs = data.permissions?.filesystem || {};
+      for (const access of ['write', 'read']) for (const path of fs[access] || []) {
+        const row = el('div', 'cxp-mcp-row'); const name = el('span', 'cxp-mcp-name cxp-permission-root-path', path); name.title = path;
+        row.append(name, el('span', 'cxp-mcp-status', tr(access)), action(tr('revoke'), async () => {
+          await request('permission_root_remove', { access, path }); await renderRoots(await request('permission_roots_list'));
+        })); roots.append(row);
+      }
+      if (!roots.childElementCount) roots.append(el('div', 'cxp-settings-hint', tr('none')));
+    }
+    if (permissions.status === 'fulfilled') await renderRoots(permissions.value); else error(permissions.reason.message);
+    if (configData.status !== 'fulfilled' || configData.value.error) throw new Error(configData.value?.error || configData.reason.message);
+    let cfg = normalizeConfig(configData.value.config).effective;
+    let overrides = Object.fromEntries(Object.entries(SESSION_CONFIG_FIELDS).filter(([, field]) => Object.hasOwn(configData.value.sessionOverrides || {}, field)).map(([key, field]) => [key, overrideValue(field, configData.value.sessionOverrides[field])]));
+    const schema = configData.value.settingsSchema;
+    if (!schema?.fields) throw new Error(tr('noSchema'));
+    const modelList = await models();
+    let defs = [], inputs = {}, restrictions = {};
+    const fields = {};
+    for (const key of ['models', 'permissions', 'tools', 'advanced']) { fields[key] = el('div', 'cxp-config-form'); sections[key].prepend(fields[key]); }
+    const scopeRow = el('label', 'cxp-config-row cxp-settings-scope'); scopeRow.append(el('span', '', tr('applyTo')));
+    const scope = el('select', 'cxp-config-input'); scope.id = 'cxp-settings-scope'; scope.setAttribute('aria-label', tr('applyTo'));
+    for (const [value, label] of [['saved', 'savedDefaults'], ['session', 'currentThread']]) { const o = el('option', '', tr(label)); o.value = value; o.disabled = value === 'session' && (!tab.threadId || !capabilityAvailability(capabilities, 'thread_settings_update').supported); scope.append(o); }
+    scopeRow.append(scope); body.prepend(scopeRow);
+    const scopeHint = el('div', 'cxp-settings-hint cxp-settings-scope-hint', tr('scopeHint')); scopeRow.after(scopeHint);
+    const featureHost = el('details', 'cxp-settings-features'); featureHost.append(el('summary', 'cxp-settings-subtitle', tr('features'))); sections.tools.append(featureHost);
+    const featureInputs = {};
+    for (const feature of schema.features || []) {
+      if (!['stable', 'beta'].includes(feature.stage) || feature.configurable === false) continue;
+      const row = el('label', 'cxp-config-row'); row.append(el('span', 'cxp-config-label', feature.name));
+      const input = el('button', 'cxp-settings-toggle'); input.type = 'button'; input.setAttribute('role', 'switch'); input.setAttribute('aria-label', feature.name); input.dataset.feature = feature.name;
+      const restriction = configRestriction(requirements.status === 'fulfilled' ? requirements.value : {}, `features.${feature.name}`);
+      input.dataset.fixed = String(typeof restriction.fixed === 'boolean');
+      const set = value => { input.dataset.enabled = String(value); input.setAttribute('aria-checked', String(value)); input.textContent = tr(value ? 'on' : 'off'); };
+      set(typeof restriction.fixed === 'boolean' ? restriction.fixed : feature.enabled);
+      input.onclick = () => set(input.dataset.enabled !== 'true'); row.append(input); featureHost.append(row); featureInputs[feature.name] = { input, feature, set };
+    }
+    const save = action(tr('saveDefaults'), async () => {
+      result.textContent = tr('saving'); delete result.dataset.error;
+      const current = scope.value === 'session' ? { ...cfg, ...overrides } : cfg;
+      const patch = configChanges(defs, inputs, current);
+      let featureEdits = {};
+      if (scope.value === 'session') {
+        if (tab.running) throw new Error(tr('busy'));
+        if (Object.keys(patch).length) await request('thread_settings_update', { threadId: tab.threadId, cwd: tab.project || null, ...sessionSettings(patch) });
+      } else {
+        const enablement = Object.fromEntries(Object.values(featureInputs).filter(({ input, feature }) => !input.disabled && (input.dataset.enabled === 'true') !== feature.enabled).map(({ input, feature }) => [feature.name, input.dataset.enabled === 'true']));
+        featureEdits = enablement;
+        const config = { ...patch, ...Object.fromEntries(Object.entries(enablement).map(([key, value]) => [`features.${key}`, value])) };
+        if (Object.keys(config).length) await request('config_write', { config, cwd: tab.project || null });
+      }
+      // Always re-read the runtime. Never report success from an optimistic UI copy.
+      const read = await request('config_read', { cwd: tab.project || null, threadId: tab.threadId || null });
+      if (read.error) throw new Error(read.error);
+      cfg = normalizeConfig(read.config).effective;
+      overrides = Object.fromEntries(Object.entries(SESSION_CONFIG_FIELDS).filter(([, field]) => Object.hasOwn(read.sessionOverrides || {}, field)).map(([key, field]) => [key, overrideValue(field, read.sessionOverrides[field])]));
+      for (const { input, feature, set } of Object.values(featureInputs)) {
+        const actual = read.settingsSchema?.features?.find(f => f.name === feature.name);
+        if (actual) { feature.enabled = actual.enabled; set(actual.enabled); }
+      }
+      renderFields(); onSaved({ scope: scope.value, patch, overrides });
+      const effective = scope.value === 'session' ? { ...cfg, ...overrides } : cfg;
+      const unapplied = Object.entries(patch).filter(([key, value]) => JSON.stringify(configValue(effective, key) ?? null) !== JSON.stringify(value));
+      for (const [key, value] of Object.entries(featureEdits)) if (featureInputs[key]?.feature.enabled !== value) unapplied.push([key]);
+      if (unapplied.length) throw new Error(tr('notApplied', { keys: unapplied.map(([key]) => key).join(', ') }));
+      result.textContent = tr('saved');
+    }); save.classList.add('cxp-config-save'); footer.prepend(save);
+    function renderFields(selection) {
+      const visible = scope.value === 'session' ? { ...cfg, ...overrides } : cfg;
+      const values = selection || visible;
+      defs = codexSettingsDefinitions(schema, modelList, values); inputs = {}; restrictions = {};
+      for (const node of Object.values(fields)) node.replaceChildren();
+      for (const def of defs) {
+        if (scope.value === 'session' && !SESSION_CONFIG_FIELDS[def.key]) continue;
+        const row = el('div', 'cxp-config-row'); const label = el('label', 'cxp-config-label', def.label);
+        const input = el(def.type === 'number' ? 'input' : 'select', 'cxp-config-input');
+        input.id = `cxp-setting-${def.key}`; input.dataset.configKey = def.key; label.htmlFor = input.id;
+        const value = configValue(values, def.key);
+        if (def.type === 'number') { input.type = 'number'; input.min = '1'; input.step = '1'; input.placeholder = tr('default'); }
+        else {
+          for (const option of def.options) { const o = el('option', '', option.label); o.value = option.value; input.append(o); }
+          if (value != null && !def.options.some(o => o.value === String(value))) {
+            const o = el('option', '', tr('configured', { value: typeof value === 'object' ? JSON.stringify(value) : value })); o.value = typeof value === 'object' ? JSON.stringify(value) : String(value); input.append(o); input.dataset.originalValue = JSON.stringify(value);
+          }
+        }
+        input.value = value == null ? '' : typeof value === 'object' ? JSON.stringify(value) : String(value);
+        const restriction = configRestriction(requirements.status === 'fulfilled' ? requirements.value : {}, def.key);
+        restrictions[def.key] = restriction;
+        input.disabled = Object.hasOwn(restriction, 'fixed');
+        for (const o of input.options || []) if (o.value && restriction.allowed && !restriction.allowed.some(v => JSON.stringify(v) === JSON.stringify(o.value))) o.disabled = true;
+        const layer = normalizeConfig(configData.value.config).layers[def.key];
+        if (layer || restriction.reason) input.title = tr(restriction.reason ? 'managed' : 'source', { layer });
+        inputs[def.key] = input; row.append(label, input);
+        if (def.type === 'number') row.append(el('span', 'cxp-settings-unit', tr('tokens')));
+        fields[def.section].append(row);
+      }
+      const modelInput = inputs.model;
+      if (modelInput) modelInput.onchange = () => {
+        const draft = { ...values };
+        for (const def of defs) if (inputs[def.key]) draft[def.key] = inputs[def.key].value || null;
+        draft.model_reasoning_effort = null; draft.service_tier = null; renderFields(draft);
+      };
+      for (const { input } of Object.values(featureInputs)) input.disabled = scope.value === 'session' || input.dataset.fixed === 'true';
+      featureHost.hidden = scope.value === 'session';
+      for (const key of ['models', 'permissions', 'tools', 'advanced']) sections[key].closest('.cxp-settings-section').hidden = scope.value === 'session' && !fields[key].childElementCount;
+      save.textContent = tr(scope.value === 'session' ? 'applyThread' : 'saveDefaults');
+    }
+    scope.onchange = () => renderFields(); renderFields();
+  } catch (failure) { error(failure.message); }
+  return { overlay, sections };
+}