synabun 2.0.0 → 2.0.7

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 };
+}

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

@@ -10,11 +10,13 @@ export function injectStyles() {
        tokens (docs/codex-sidepanel.md → Visual language). Add a value here
        before using it anywhere else. The lightbox, the minimized pill and
        the Context settings popover live outside the panel, so they carry the
-       tokens too. */
+       tokens too, as does the header account menu (account-menu.js), whose
+       --acct-* values read them. */
     .codex-panel,
     .cxp-lightbox,
     .cxp-session-pill,
-    .cxp-ctxpop {
+    .cxp-ctxpop,
+    .acct-menu--codex {
       /* Surfaces: one treatment per level */
       --cxp-shell: rgba(16, 18, 22, 0.92);
       --cxp-shell-border: rgba(255,255,255,0.08);
@@ -135,7 +137,7 @@ export function injectStyles() {
       outline-offset: 2px;
     }
     /* Inside clipping containers the ring sits on the element instead of around it. */
-    .codex-panel :is(.cxp-fold-summary, .cxp-reasoning summary, .cxp-effort-menu-item, .cxp-account-row-main, .cxp-account-row-remove, .cxp-image-chip-remove, .cxp-sess-rename, .cxp-sess-archive-btn, .cxp-sess-unarchive-btn, .cxp-sess-search-input, .cxp-session-btn, .cxp-header-rename):focus-visible {
+    .codex-panel :is(.cxp-fold-summary, .cxp-reasoning summary, .cxp-effort-menu-item, .cxp-image-chip-remove, .cxp-sess-rename, .cxp-sess-archive-btn, .cxp-sess-unarchive-btn, .cxp-sess-search-input, .cxp-session-btn, .cxp-header-rename):focus-visible {
       outline-offset: -2px;
     }
     .cxp-resize-handle {
@@ -254,6 +256,8 @@ export function injectStyles() {
       margin-left: auto;
       flex-shrink: 0;
     }
+    /* The header account menu's trigger (account-menu.js) gives way before the session name does. */
+    .cxp-actions:has(> .acct-menu-trigger) { flex-shrink: 1; min-width: 0; }
     .cxp-btn {
       width: 24px;
       height: 24px;
@@ -840,97 +844,6 @@ export function injectStyles() {
       color: var(--cxp-text-3);
     }
 
-    /* ── Account menu (under the header; opened from the Context settings popover) ── */
-    .cxp-account-menu {
-      position: absolute;
-      top: calc(100% + 6px);
-      right: 8px;
-      min-width: 230px;
-      max-width: 300px;
-      background: var(--cxp-pop);
-      border: 1px solid var(--cxp-border);
-      border-radius: var(--cxp-radius-md);
-      box-shadow: var(--cxp-shadow-pop);
-      padding: 6px;
-      z-index: 50;
-      display: none;
-      flex-direction: column;
-      gap: 2px;
-    }
-    .cxp-account-menu.open { display: flex; }
-    .cxp-account-empty {
-      padding: 8px 10px;
-      font-size: var(--cxp-fs-sm);
-      color: var(--cxp-text-3);
-    }
-    .cxp-account-row {
-      display: flex;
-      align-items: stretch;
-      gap: 2px;
-      border-radius: var(--cxp-radius-sm);
-      overflow: hidden;
-    }
-    .cxp-account-row.active { background: var(--cxp-surface-2); }
-    .cxp-account-row-main {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex: 1;
-      min-width: 0;
-      padding: 7px 9px;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      text-align: left;
-      font-family: var(--cxp-font);
-      color: var(--cxp-text);
-    }
-    .cxp-account-row-main:hover { background: var(--cxp-surface-1); }
-    .cxp-account-check {
-      width: 12px;
-      flex-shrink: 0;
-      color: var(--cxp-text);
-      font-size: var(--cxp-fs-sm);
-    }
-    .cxp-account-row-text { display: flex; flex-direction: column; min-width: 0; }
-    .cxp-account-row-label {
-      font-size: var(--cxp-fs-md);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .cxp-account-row-sub {
-      font-size: var(--cxp-fs-xs);
-      color: var(--cxp-text-3);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .cxp-account-row-remove {
-      flex-shrink: 0;
-      width: 26px;
-      background: transparent;
-      border: none;
-      color: var(--cxp-text-3);
-      cursor: pointer;
-      font-size: var(--cxp-fs-sm);
-      transition: color var(--cxp-dur-fast), background var(--cxp-dur-fast);
-    }
-    .cxp-account-row-remove:hover { color: var(--cxp-danger); background: var(--cxp-surface-1); }
-    .cxp-account-add {
-      margin-top: 4px;
-      padding: 8px 10px;
-      background: transparent;
-      border: 1px dashed var(--cxp-border-strong);
-      border-radius: var(--cxp-radius-sm);
-      color: var(--cxp-text-2);
-      font-size: var(--cxp-fs-sm);
-      font-family: var(--cxp-font);
-      cursor: pointer;
-      text-align: center;
-      transition: color var(--cxp-dur-fast), background var(--cxp-dur-fast);
-    }
-    .cxp-account-add:hover { background: var(--cxp-surface-1); color: var(--cxp-text); }
 
     /* ── Context settings: the header cog and its popover (cdx-context-menu.js) ──
        One grammar: a 28px head (title, at most one action) and 28px rows (label
@@ -1133,12 +1046,16 @@ export function injectStyles() {
     .cxp-empty-logo svg { width: 32px; height: 32px; }
     .cxp-empty-name { font-size: var(--cxp-fs-lg); font-weight: 500; color: var(--cxp-text-3); }
     .cxp-empty-status { font-size: var(--cxp-fs-sm); color: var(--cxp-text-3); line-height: 1.5; min-height: 1em; }
+    /* The CLI banner (ui-cli-banner.js): Codex not installed (with Install),
+       being installed, failed to install, or found but failed to start. A
+       left edge in the colour of what it says; the Install button is the
+       panel's solid action. */
     .cxp-cli-banner {
       flex-shrink: 0;
       display: grid;
-      grid-template-columns: auto 1fr auto;
+      grid-template-columns: auto minmax(0, 1fr);
       gap: 10px;
-      align-items: center;
+      align-items: start;
       margin: 6px 8px 0;
       padding: 10px 12px;
       border: 1px solid var(--cxp-border);
@@ -1150,6 +1067,11 @@ export function injectStyles() {
       position: relative;
       z-index: 5;
     }
+    .cxp-cli-banner [hidden] { display: none !important; }
+    .cxp-cli-banner--broken,
+    .cxp-cli-banner--failed { box-shadow: inset 2px 0 0 var(--cxp-danger); }
+    .cxp-cli-banner--installing { box-shadow: inset 2px 0 0 var(--cxp-running); }
+    .cxp-cli-banner--done { box-shadow: inset 2px 0 0 var(--cxp-success); }
     .cxp-cli-banner-icon {
       width: 22px; height: 22px;
       display: flex; align-items: center; justify-content: center;
@@ -1158,30 +1080,81 @@ export function injectStyles() {
       color: var(--cxp-warning);
       font-weight: 700;
     }
-    .cxp-cli-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+    .cxp-cli-banner--broken .cxp-cli-banner-icon,
+    .cxp-cli-banner--failed .cxp-cli-banner-icon { border-color: var(--cxp-danger); color: var(--cxp-danger); }
+    .cxp-cli-banner--installing .cxp-cli-banner-icon { border-color: var(--cxp-running); color: var(--cxp-running); animation: cxp-working 1.2s ease-in-out infinite; }
+    .cxp-cli-banner--done .cxp-cli-banner-icon { border-color: var(--cxp-success); color: var(--cxp-success); }
+    .cxp-cli-banner--nudge { animation: cxp-cli-nudge 0.5s var(--cxp-ease); }
+    @keyframes cxp-cli-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
+    .cxp-cli-banner-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
     .cxp-cli-banner-title {
       font-size: var(--cxp-fs-md); font-weight: 600;
       color: var(--cxp-text);
     }
-    .cxp-cli-banner-body {
+    .cxp-cli-banner-body,
+    .cxp-cli-banner-note,
+    .cxp-cli-banner-step {
       font-size: var(--cxp-fs-sm);
       color: var(--cxp-text-2);
-      word-break: break-word;
+      overflow-wrap: anywhere;
     }
-    .cxp-cli-banner-body code {
-      padding: 1px 4px;
+    .cxp-cli-banner-command { display: flex; align-items: flex-start; gap: 6px; }
+    .cxp-cli-banner-command code,
+    .cxp-cli-banner-error code {
+      flex: 1;
+      min-width: 0;
+      padding: 3px 6px;
       background: var(--cxp-surface-2);
       border-radius: var(--cxp-radius-sm);
       font-family: var(--cxp-mono);
       font-size: var(--cxp-fs-sm);
       color: var(--cxp-text);
+      white-space: pre-wrap;
+      word-break: break-all;
+      user-select: text;
     }
-    .cxp-cli-banner-actions { display: flex; gap: 6px; }
-    .cxp-cli-banner-link, .cxp-cli-banner-recheck {
-      display: inline-flex; align-items: center; gap: 4px;
-      padding: 4px 9px;
+    .cxp-cli-banner-error code { display: block; max-height: 96px; overflow: auto; }
+    .cxp-cli-banner-copy {
+      flex-shrink: 0;
+      height: 22px;
+      padding: 0 8px;
+      border: 1px solid var(--cxp-border-strong);
+      border-radius: var(--cxp-radius-sm);
+      background: transparent;
+      color: var(--cxp-text-2);
+      font-family: inherit;
       font-size: var(--cxp-fs-sm);
+      cursor: pointer;
+    }
+    .cxp-cli-banner-copy:hover { color: var(--cxp-text); background: var(--cxp-surface-2); }
+    .cxp-cli-banner-progress { display: flex; flex-direction: column; gap: 4px; }
+    .cxp-cli-banner-bar { height: 3px; border-radius: 2px; background: var(--cxp-surface-2); overflow: hidden; }
+    .cxp-cli-banner-bar > span { display: block; height: 100%; width: 0; background: var(--cxp-running); transition: width var(--cxp-dur-fast) var(--cxp-ease); }
+    .cxp-cli-banner-log {
+      margin: 0;
+      max-height: 84px;
+      overflow: auto;
+      padding: 4px 6px;
+      background: var(--cxp-surface-1);
+      border-radius: var(--cxp-radius-sm);
+      font-family: var(--cxp-mono);
+      font-size: var(--cxp-fs-xs);
+      line-height: 1.45;
+      color: var(--cxp-text-3);
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+    .cxp-cli-banner-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
+    .cxp-cli-banner-install,
+    .cxp-cli-banner-link,
+    .cxp-cli-banner-path, .cxp-cli-banner-recheck,
+    .cxp-cli-banner-dismiss {
+      display: inline-flex; align-items: center; gap: 4px;
+      height: 24px;
+      padding: 0 10px;
+      font-size: var(--cxp-fs-md);
       font-weight: 500;
+      line-height: 1;
       border-radius: var(--cxp-radius-md);
       border: 1px solid var(--cxp-border-strong);
       background: transparent;
@@ -1192,10 +1165,27 @@ export function injectStyles() {
       font-family: inherit;
       transition: background var(--cxp-dur-fast);
     }
-    .cxp-cli-banner-link:hover, .cxp-cli-banner-recheck:hover {
+    .cxp-cli-banner-install {
+      background: var(--cxp-solid);
+      border-color: var(--cxp-solid);
+      color: var(--cxp-on-solid);
+    }
+    .cxp-cli-banner-install:hover:not(:disabled) { background: var(--cxp-solid-hover); border-color: var(--cxp-solid-hover); }
+    .cxp-cli-banner-link:hover,
+    .cxp-cli-banner-path:hover:not(:disabled), .cxp-cli-banner-recheck:hover:not(:disabled),
+    .cxp-cli-banner-dismiss:hover {
       background: var(--cxp-surface-2);
     }
-    .cxp-cli-banner-recheck:disabled { opacity: 0.5; cursor: default; }
+    .cxp-cli-banner-install:disabled,
+    .cxp-cli-banner-path:disabled, .cxp-cli-banner-recheck:disabled { opacity: 0.5; cursor: default; }
+    .cxp-cli-banner button:focus-visible,
+    .cxp-cli-banner a:focus-visible { outline: 2px solid var(--cxp-focus); outline-offset: 2px; }
+    @media (prefers-reduced-motion: reduce) {
+      .cxp-cli-banner--installing .cxp-cli-banner-icon,
+      .cxp-cli-banner--nudge { animation: none; }
+      .cxp-cli-banner--nudge { box-shadow: inset 2px 0 0 var(--cxp-warning), 0 0 0 1px var(--cxp-warning); }
+      .cxp-cli-banner-bar > span { transition: none; }
+    }
     .codex-panel.cxp-cli-blocked .cxp-send { opacity: 0.4 !important; cursor: not-allowed !important; }
     .codex-panel.cxp-cli-blocked .cxp-input { opacity: 0.7; }
 
@@ -2442,6 +2432,42 @@ export function injectStyles() {
       .cxp-post-plan-utilities .cxp-request-btn { flex: 1; justify-content: center; }
     }
 
+    /* ── A dispatched worker's end (ui-worker-end.js): the post-plan header and note in the
+       compaction card's hairline frame, in the transcript column. The title says the state in words. ── */
+    .cxp-worker-end {
+      display: grid;
+      gap: var(--cxp-space-2);
+      min-width: 0;
+      margin: var(--cxp-space-2) var(--cxp-space-2) var(--cxp-space-3) calc(var(--cxp-space-2) + 24px + var(--cxp-space-2));
+      padding: var(--cxp-space-3) var(--cxp-space-4);
+      border: 1px solid var(--cxp-border-strong);
+      border-radius: var(--cxp-radius-md);
+      font-family: var(--cxp-font);
+    }
+    .cxp-worker-end[data-tone="ok"] .cxp-post-plan-header { color: var(--cxp-success); }
+    .cxp-worker-end[data-tone="warn"] .cxp-post-plan-header { color: var(--cxp-warning); }
+    .cxp-worker-end[data-tone="err"] .cxp-post-plan-header { color: var(--cxp-danger); }
+    .cxp-worker-end .cxp-post-plan-note { overflow-wrap: anywhere; }
+    .cxp-worker-end .worker-end-meta {
+      font-family: var(--cxp-mono);
+      font-size: var(--cxp-fs-xs);
+      color: var(--cxp-text-3);
+    }
+    .cxp-worker-end .worker-end-note {
+      font-size: var(--cxp-fs-sm);
+      line-height: var(--cxp-lh-tight);
+      color: var(--cxp-text-3);
+    }
+    .cxp-worker-end .worker-end-actions { display: flex; margin-top: var(--cxp-space-1); }
+    .cxp-worker-end .cxp-request-btn:focus-visible {
+      outline: 2px solid var(--cxp-focus);
+      outline-offset: 2px;
+    }
+    @media (max-width: 390px) {
+      .cxp-worker-end { margin-left: var(--cxp-space-2); padding: var(--cxp-space-3); }
+      .cxp-worker-end .cxp-request-btn { flex: 1; justify-content: center; }
+    }
+
     /* ── Composer ── */
     .cxp-bottom {
       flex-shrink: 0;
@@ -2911,6 +2937,37 @@ export function injectStyles() {
       opacity: 0.4;
       cursor: default;
     }
+    /* Codex Settings: scoped compact groups and consistent native controls. */
+    .cxp-settings-panel { display: flex; flex-direction: column; overflow: hidden; }
+    .cxp-settings-body { overflow-y: auto; min-height: 0; }
+    .cxp-settings-header { flex: none; font-size: var(--cxp-fs-md); padding: 12px 14px; }
+    .cxp-settings-section { padding: 12px 0; margin: 0; }
+    .cxp-settings-section .cxp-settings-section { border: 0; }
+    .cxp-settings-section[hidden], .cxp-settings-features[hidden] { display: none; }
+    .cxp-settings-section-title { font-size: var(--cxp-fs-sm); text-transform: none; letter-spacing: 0; color: var(--cxp-text-2); margin: 0 0 8px; }
+    details.cxp-settings-section > summary, .cxp-settings-features > summary { cursor: pointer; }
+    .cxp-settings-section:not([open]) > summary { margin-bottom: 0; }
+    .cxp-settings-subtitle { font-size: var(--cxp-fs-xs); font-weight: 500; color: var(--cxp-text-3); margin: 10px 0 6px; }
+    .cxp-config-row { border: 0; padding: 4px 0; min-width: 0; }
+    .cxp-config-label { text-align: left; flex-basis: 42%; font-size: var(--cxp-fs-sm); color: var(--cxp-text-2); overflow-wrap: anywhere; }
+    .cxp-settings-panel .cxp-config-input { min-height: 26px; padding: 3px 6px; border-radius: var(--cxp-radius-sm); background: var(--cxp-surface-1); }
+    .cxp-settings-panel .cxp-config-input option { background: var(--cxp-pop); color: var(--cxp-text); }
+    .cxp-settings-scope { gap: 12px; }
+    .cxp-settings-scope-hint { margin-bottom: 8px; }
+    .cxp-settings-footer { flex: none; border-top: 1px solid var(--cxp-border); padding: 10px 14px; background: var(--cxp-pop); }
+    .cxp-settings-footer .cxp-config-save { margin: 0; width: 100%; text-transform: none; letter-spacing: 0; padding: 6px 10px; }
+    .cxp-settings-result { font-size: var(--cxp-fs-xs); color: var(--cxp-text-3); overflow-wrap: anywhere; }
+    .cxp-settings-result:not(:empty) { padding-top: 6px; }
+    .cxp-settings-result[data-error=true] { color: var(--cxp-danger); }
+    .cxp-settings-unit { font-size: var(--cxp-fs-xs); color: var(--cxp-text-3); }
+    .cxp-settings-toggle { margin-left: auto; min-width: 70px; padding: 3px 8px; border: 1px solid var(--cxp-border-input); border-radius: var(--cxp-radius-sm); color: var(--cxp-text-3); background: var(--cxp-surface-1); font: inherit; cursor: pointer; }
+    .cxp-settings-toggle[data-enabled=true] { color: var(--cxp-text); background: var(--cxp-surface-3); border-color: var(--cxp-text-3); }
+    .cxp-settings-toggle:disabled { opacity: .45; cursor: default; }
+    .cxp-settings-features { margin-top: 10px; }
+    .cxp-settings-features .cxp-config-label { flex-basis: auto; }
+    .cxp-settings-runtime { margin-top: 12px; }
+    .cxp-settings-panel .cxp-mcp-row { flex-wrap: wrap; border: 0; padding: 4px 0; }
+    .cxp-config-warning { padding: 8px 12px; color: var(--cxp-warning); font-size: var(--cxp-fs-xs); white-space: pre-wrap; }
     .cxp-config-layer {
       font-size: var(--cxp-fs-xs);
       color: var(--cxp-text-3);