synabun 1.3.0 → 2.0.0

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

@@ -0,0 +1,1372 @@
+// SynaBun — Codex Panel: DOM, Events & Lifecycle
+// ═══════════════════════════════════════════
+
+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 { nativeLoopWindowId } from '../ui-native-window-id.js';
+import { createStickyScrollController, getStickyScrollController } from '../ui-scroll-follow.js';
+import { injectStyles } from './cdx-styles.js';
+import { mountContextMenu } from './cdx-context-menu.js';
+import { teardownMcpApps } from './cdx-mcp-app-host.js';
+import { appendSystem, renderPostPlanActions, syncPlanEditorActions } from './cdx-render.js';
+import { codexAutomationBufferCoversRun, codexAutomationItem, codexAutomationTurnKey } from './cdx-protocol.js';
+import {
+  OPENAI_ICON, ICON_SPARK, ICON_PLUS, ICON_MINIMIZE, ICON_X, ICON_STOP,
+  ICON_EDIT, ICON_SHIELD, ICON_PLAN, ICON_BRAIN, SYNABUN_LOGO_ICON,
+  STOR, EFFORT_LEVELS, PANEL_OWNER, STATUS_TONE,
+} from './cdx-icons.js';
+import {
+  setCallbacks, setPanelRef, setPanelState, connectTab, disconnectTab, activeTab, allTabs, isActiveTab,
+  createTab, switchTab, closeTab, closeActiveTab, saveTabs, restoreTabs,
+  initContextBridge,
+  renderPills, renderProjects, updateActiveTabView,
+  sendPrompt, dispatchPrompt, interruptTurn, queueCurrentDraft, steerActiveTurn,
+  cycleEffort, toggleEffortMenu, togglePlanMode, toggleAutoAccept, toggleContextMode, syncToolbarState,
+  requestModelList, populateModelDropdown,
+  setSessionLabel, renameActiveSession, promptNameNewSession, openSettingsPanel, renderSessionMenu,
+  toggleAccountMenu,
+  contextMenuData, contextMenuReading, refreshContextMenuDetails,
+  addImageFromFile, removeImage, renderImageStrip,
+  addPathChip, removePathChip, renderPathStrip,
+  initVoiceInput, showSlashHints, hideComposerHints, selectSlashHint, navigateSlashHints, confirmSlashHint,
+  syncQueueTray, editQueueItem, toggleQueuePause, clearQueue,
+  startCompaction,
+  syncInputEnabled, syncReservedWidth, scheduleThreadSnapshotSave,
+  flushAllThreadSnapshots,
+  resetStallTimer, stopStallTimer, setRunning,
+  handleNotify,
+  appendLocalUserMessage, hydrateCodexAutomationHistory,
+  clearPlanHandoffState,
+  withTab,
+  ensureProjectsLoaded,
+  setActiveProject,
+  requestSocketPayload,
+} from './cdx-tabs.js';
+
+window.addEventListener('beforeunload', () => { try { flushAllThreadSnapshots(); } catch {} });
+window.addEventListener('pagehide', () => { try { flushAllThreadSnapshots(); } catch {} });
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) { try { flushAllThreadSnapshots(); } catch {} }
+});
+
+// ═══════════════════════════════════════════
+//  Module-level State (panel owns)
+// ═══════════════════════════════════════════
+
+let _panel = null;
+let _visible = false;
+let _resizeBound = false;
+let _cliInstalled = null;
+let _cliUnsub = null;
+
+// ═══════════════════════════════════════════
+//  Bound State (mirrors active tab — managed by cdx-tabs)
+// ═══════════════════════════════════════════
+
+let _messagesEl = null;
+let _ws = null;
+let _connected = false;
+let _bootstrapped = false;
+let _running = false;
+let _activeTurnId = null;
+let _freshThread = false;
+let _threadId = null;
+let _project = '';
+let _boundTab = null;
+let _tabs = [];
+let _activeTabIdx = -1;
+let _sessionLabel = 'New session';
+let _items = new Map();
+let _requestCards = new Map();
+let _startingThread = false;
+let _statusText = 'Connecting to Codex…';
+let _statusTone = 'working';
+let _statusDetail = '';
+let _slashActiveIdx = -1;
+let _planContent = '';
+let _editedPlanContent = '';
+let _showPostPlanActions = false;
+let _postPlanHeader = 'PLAN COMPLETE';
+let _planTurnActive = false;
+let _planApprovalPending = false;
+let _lastPlanTurnId = '';
+let _planFilePath = '';
+
+// ═══════════════════════════════════════════
+//  Host Callbacks (provided by monolith via setHostCallbacks)
+// ═══════════════════════════════════════════
+
+let _host = {};
+// The header cog and its Context settings popover (cdx-context-menu.js).
+let _contextMenu = null;
+
+/**
+ * Register host-side callbacks for functions that still live in the
+ * monolith and are referenced by wireEvents / ensurePanel.
+ *
+ * Expected shape:
+ *   maybeOpenProjectFileLink(href, event) -> bool
+ *   flushCardBody(itemState)
+ *   resetThreadState(opts)
+ *   appendSystem(text, tone)
+ *   sendServerRequestReply(requestId, opts)
+ *   getRequestCardEntry(requestId) -> object|null
+ *   restoreChangelogButtons(buttons)
+ *   syncStatusTicker()
+ *   loadBranches(path)
+ *   setStatus(text, tone)
+ *   syncSessionControls()
+ *   renderStatusChrome()
+ *   setCompactingUI(on)
+ *   clearTranscript(emptyText)
+ *   getBoundState() -> object   (returns current bound-state snapshot)
+ *   setBoundVar(name, value)
+ */
+export function setHostCallbacks(callbacks) {
+  _host = callbacks || {};
+}
+
+/**
+ * Sync bound-state variables from the active tab.
+ * Called by cdx-tabs whenever the active tab changes or state is committed.
+ */
+export function syncBoundState(s) {
+  if (!s) return;
+  _messagesEl = s.messagesEl ?? _messagesEl;
+  _ws = s.ws ?? _ws;
+  _connected = s.connected ?? _connected;
+  _bootstrapped = s.bootstrapped ?? _bootstrapped;
+  _running = s.running ?? _running;
+  _activeTurnId = s.activeTurnId ?? _activeTurnId;
+  _freshThread = s.freshThread ?? _freshThread;
+  _threadId = s.threadId ?? _threadId;
+  _project = s.project ?? _project;
+  _boundTab = s.boundTab ?? _boundTab;
+  _tabs = s.tabs ?? _tabs;
+  _activeTabIdx = s.activeTabIdx ?? _activeTabIdx;
+  _sessionLabel = s.sessionLabel ?? _sessionLabel;
+  _items = s.items ?? _items;
+  _requestCards = s.requestCards ?? _requestCards;
+  _startingThread = s.startingThread ?? _startingThread;
+  _statusText = s.statusText ?? _statusText;
+  _statusTone = s.statusTone ?? _statusTone;
+  _statusDetail = s.statusDetail ?? _statusDetail;
+  _planContent = s.planContent ?? _planContent;
+  _editedPlanContent = s.editedPlanContent ?? _editedPlanContent;
+  _showPostPlanActions = s.showPostPlanActions ?? _showPostPlanActions;
+  _postPlanHeader = s.postPlanHeader ?? _postPlanHeader;
+  _planTurnActive = s.planTurnActive ?? _planTurnActive;
+  _planApprovalPending = s.planApprovalPending ?? _planApprovalPending;
+  _lastPlanTurnId = s.lastPlanTurnId ?? _lastPlanTurnId;
+  _planFilePath = s.planFilePath ?? _planFilePath;
+}
+
+// ═══════════════════════════════════════════
+//  Utility — HTML Escape
+// ═══════════════════════════════════════════
+
+function esc(s) {
+  return String(s)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function parseStoredJson(key, fallback) {
+  try {
+    const raw = storage.getItem(key);
+    return raw ? JSON.parse(raw) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+// ═══════════════════════════════════════════
+//  Dropdown Utilities
+// ═══════════════════════════════════════════
+
+function ddSetup(dd) {
+  if (!dd) return;
+  dd._value = dd._value || '';
+  dd.addEventListener('click', (event) => {
+    if (event.target.closest('.cxp-dd-item')) return;
+    _panel?.querySelectorAll('.cxp-dropdown.open').forEach((node) => {
+      if (node !== dd) node.classList.remove('open');
+    });
+    dd.classList.toggle('open');
+  });
+}
+
+function ddPopulate(dd, items, selectedValue) {
+  if (!dd) return;
+  const menu = dd.querySelector('.cxp-dd-menu');
+  const label = dd.querySelector('.cxp-dd-label');
+  if (!menu || !label) return;
+  menu.innerHTML = '';
+  dd._value = '';
+  label.textContent = dd.dataset.placeholder || 'select...';
+  dd.classList.remove('has-value');
+  for (const item of items) {
+    const el = document.createElement('div');
+    el.className = 'cxp-dd-item' + (item.value === selectedValue ? ' selected' : '');
+    el.textContent = item.label;
+    el.dataset.value = item.value;
+    el.addEventListener('click', () => {
+      dd._value = item.value;
+      label.textContent = item.label;
+      dd.classList.add('has-value');
+      dd.classList.remove('open');
+      menu.querySelectorAll('.cxp-dd-item').forEach((node) => node.classList.remove('selected'));
+      el.classList.add('selected');
+      dd.dispatchEvent(new Event('change'));
+    });
+    menu.appendChild(el);
+  }
+  if (selectedValue) {
+    const match = items.find((item) => item.value === selectedValue);
+    if (match) {
+      dd._value = match.value;
+      label.textContent = match.label;
+      dd.classList.add('has-value');
+    }
+  }
+}
+
+function ddGetValue(dd) {
+  return dd?._value || '';
+}
+
+// ═══════════════════════════════════════════
+//  panelEl — DOM Accessor
+// ═══════════════════════════════════════════
+
+export function panelEl(selector) {
+  return _panel?.querySelector(selector) || null;
+}
+
+// ═══════════════════════════════════════════
+//  buildPanel — DOM Construction
+// ═══════════════════════════════════════════
+
+function buildPanel() {
+  const panel = document.createElement('div');
+  panel.id = 'codex-panel';
+  panel.className = 'codex-panel';
+  panel.innerHTML = `
+    <div class="cxp-resize-handle"></div>
+    <div class="cxp-header">
+      <button class="cxp-session-btn" id="cxp-session-btn" type="button">
+        <span class="cxp-session-label" id="cxp-session-label">${esc(_sessionLabel)}</span>
+        <span class="cxp-dd-arrow">&#x25BE;</span>
+      </button>
+      <button class="cxp-header-rename" id="cxp-header-rename" type="button" title="Rename session">
+        ${ICON_EDIT}
+      </button>
+      <div class="cxp-actions">
+        <button class="cxp-btn" id="cxp-new" title="New Codex tab">${ICON_PLUS}</button>
+        <button class="cxp-btn" id="cxp-minimize" title="Minimize to pill">${ICON_MINIMIZE}</button>
+        <button class="cxp-btn cxp-btn-danger" id="cxp-close" title="Close current tab">${ICON_X}</button>
+        <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">
+      <div class="cxp-queue-tray" id="cxp-queue-tray" hidden>
+        <div class="cxp-queue-header">
+          <span class="cxp-queue-title">Queue <span class="cxp-queue-badge" id="cxp-queue-badge">0</span></span>
+          <div class="cxp-queue-actions">
+            <button class="cxp-btn cxp-btn-sm cxp-queue-pause" id="cxp-queue-pause" title="Pause queue">&#x23F8;</button>
+            <button class="cxp-btn cxp-btn-sm cxp-queue-clear" id="cxp-queue-clear" title="Clear queue">&#x2715;</button>
+          </div>
+        </div>
+        <div class="cxp-queue-list" id="cxp-queue-list"></div>
+      </div>
+      <div class="cxp-projectbar">
+        <div class="cxp-dropdown" id="cxp-project" data-placeholder="project..." data-tooltip="Project">
+          <span class="cxp-dd-label">project...</span>
+          <span class="cxp-dd-arrow">&#x25BE;</span>
+          <div class="cxp-dd-menu"></div>
+        </div>
+        <div class="cxp-dropdown cxp-dropdown-sm" id="cxp-branch" data-placeholder="branch" data-tooltip="Branch">
+          <span class="cxp-dd-label">branch</span>
+          <span class="cxp-dd-arrow">&#x25BE;</span>
+          <div class="cxp-dd-menu"></div>
+        </div>
+        <div class="cxp-dropdown cxp-dropdown-sm" id="cxp-profile" data-placeholder="profile" data-tooltip="Tool profile">
+          <span class="cxp-dd-label">full</span>
+          <span class="cxp-dd-arrow">&#x25BE;</span>
+          <div class="cxp-dd-menu"></div>
+        </div>
+        <div class="cxp-dropdown cxp-dropdown-sm" id="cxp-recall" data-placeholder="recall" data-tooltip="Recall profile">
+          <span class="cxp-dd-label">recall</span>
+          <span class="cxp-dd-arrow">&#x25BE;</span>
+          <div class="cxp-dd-menu"></div>
+        </div>
+        <div class="cxp-projectbar-actions">
+          <button class="cxp-bar-action" id="cxp-action-changelog" title="Generate changelog"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 1.5h8.5v13H4a1.5 1.5 0 01-1.5-1.5V3A1.5 1.5 0 014 1.5z"/><path d="M5.5 5h5M5.5 7.5h3M5.5 10h4"/></svg></button>
+        </div>
+      </div>
+      <div class="cxp-image-strip" id="cxp-image-strip" hidden></div>
+      <div class="cxp-path-strip" id="cxp-path-strip" hidden></div>
+      <div class="cxp-input-wrap">
+        <div class="cxp-input-shell">
+          <input type="file" id="cxp-file-input" accept="image/*" multiple hidden />
+          <textarea class="cxp-input" id="cxp-input" rows="1" placeholder="Message Codex…" spellcheck="false"></textarea>
+          <button class="cxp-mic-btn" id="cxp-mic-btn" title="Hold to talk" hidden>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="9" y="1" width="6" height="11" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M12 17v4M8 21h8"/></svg>
+          </button>
+          <button class="cxp-send" id="cxp-send" disabled title="Send">
+            <svg class="cxp-send-icon" viewBox="0 0 24 24"><path d="M12 5v14"/><path d="m5 12 7-7 7 7"/></svg>
+            <svg class="cxp-stop-icon" viewBox="0 0 24 24" style="display:none"><rect x="7" y="7" width="10" height="10" rx="2"/></svg>
+          </button>
+        </div>
+      </div>
+      <div class="cxp-slash-hints" id="cxp-slash-hints" hidden></div>
+      <div class="cxp-footer-toolbar">
+        <div class="cxp-footer-left">
+          <a class="cxp-brand-link" href="https://chatgpt.com/codex/settings/usage" target="_blank" rel="noopener noreferrer" title="Open Codex usage settings">
+            <svg class="cxp-brand" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.998 5.998 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>
+          </a>
+          <button class="cxp-attach-btn" id="cxp-attach-btn" title="Attach images">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+          </button>
+        </div>
+        <div class="cxp-footer-right">
+          <div class="cxp-effort-wrap">
+            <button class="cxp-toolbar-toggle" id="cxp-effort-toggle" title="Reasoning effort" data-effort="off" type="button">${ICON_BRAIN}<span class="cxp-btn-label">Effort</span><span class="cxp-effort-dots"><i></i><i></i><i></i><i></i><i></i></span></button>
+            <div class="cxp-effort-menu" id="cxp-effort-menu"></div>
+          </div>
+          <button class="cxp-toolbar-toggle" id="cxp-plan-toggle" title="Plan mode: off">${ICON_PLAN}<span class="cxp-btn-label">Plan</span></button>
+          <button class="cxp-toolbar-toggle" id="cxp-autoaccept-toggle" title="Auto-accept: off">${ICON_SHIELD}<span class="cxp-btn-label">Auto</span></button>
+          <button class="cxp-toolbar-toggle" id="cxp-context-toggle" type="button" aria-pressed="false" title="Context: provider default">${ICON_SPARK}<span class="cxp-btn-label">Default</span></button>
+          <button class="cxp-toolbar-toggle" id="cxp-context-retry" type="button" hidden aria-label="Retry model capabilities" title="Reload model capabilities">Retry</button>
+          <div class="cxp-dropdown" id="cxp-model" data-placeholder="model...">
+            <span class="cxp-dd-label">model...</span>
+            <span class="cxp-dd-arrow">&#x25BE;</span>
+            <div class="cxp-dd-menu"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+  return panel;
+}
+
+// ═══════════════════════════════════════════
+//  DOM Helpers
+// ═══════════════════════════════════════════
+
+function scrollEnd(force) {
+  const el = activeTab()?.messagesEl;
+  if (!el) return;
+  const controller = getStickyScrollController(el) || createStickyScrollController(el);
+  controller?.scrollToBottom({ force: !!force });
+}
+
+function autosizeInput() {
+  const input = panelEl('#cxp-input');
+  if (!input) return;
+  input.style.height = 'auto';
+  input.style.height = `${Math.min(input.scrollHeight, 160)}px`;
+  if (input.scrollHeight > input.clientHeight + 2) {
+    input.classList.add('scrollable');
+  } else {
+    input.classList.remove('scrollable');
+  }
+}
+
+function hideEmpty() {
+  const empty = activeTab()?.messagesEl?.querySelector('.cxp-empty');
+  if (empty) empty.style.display = 'none';
+}
+
+function showEmpty(text) {
+  const empty = activeTab()?.messagesEl?.querySelector('.cxp-empty');
+  if (!empty) return;
+  const statusEl = empty.querySelector('.cxp-empty-status');
+  if (statusEl) statusEl.textContent = text;
+  empty.style.display = '';
+}
+
+function freshThreadText() {
+  return '';
+}
+
+function startupEmptyText() {
+  if (activeTab()?.threadId) return 'Restoring Codex thread…';
+  return '';
+}
+
+// ── 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.');
+  }
+}
+
+function removeCliBannerEl() {
+  if (!_panel) return;
+  const container = panelEl('#cxp-messages-container');
+  const banner = container?.parentNode?.querySelector(':scope > .cxp-cli-banner');
+  banner?.remove();
+}
+
+function refreshCliBanner() {
+  if (!_panel) return;
+  const missing = _cliInstalled === null || _cliInstallFailureForced;
+  _panel.classList.toggle('cxp-cli-blocked', missing);
+  if (missing) ensureCliBannerEl();
+  else removeCliBannerEl();
+  try { syncInputEnabled(); } catch {}
+}
+
+export function isCdxCliInstalled() {
+  return _cliInstalled !== null && !_cliInstallFailureForced;
+}
+
+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(() => {});
+}
+
+function ensureCliSubscription() {
+  if (_cliUnsub) return;
+  _cliUnsub = subscribeCliStatus('codex', (info) => {
+    _cliInstalled = info?.installed || null;
+    if (_cliInstalled) { _cliInstallFailureForced = false; _cliFailureReason = null; }
+    refreshCliBanner();
+  });
+}
+
+// ═══════════════════════════════════════════
+//  setVisible — Show / Hide Panel
+// ═══════════════════════════════════════════
+
+function _cdxDocEscHandler(event) {
+  if (event.key !== 'Escape') return;
+  if (!_visible || !sidepanelAcceptsKeyboard('codex', event)) return;
+  // The open Context settings popover takes this Escape (cdx-context-menu.js).
+  if (_contextMenu?.isOpen()) return;
+  if (!activeTab()?.running) return;
+  const hintsEl = panelEl('#cxp-slash-hints');
+  if (hintsEl && !hintsEl.hidden) return; // let input-level handler dismiss hints first
+  event.preventDefault();
+  event.stopImmediatePropagation();
+  interruptTurn();
+}
+
+// The whiteboard takes Escape at the document, ahead of this panel, whenever
+// the focus is not in a text field. A request waiting for an answer disables
+// the composer, so after a re-attach that is every Escape. A key pressed inside
+// the panel is the panel's: it is handled one step earlier, at the window.
+function _cdxPanelEscHandler(event) {
+  if (_panel?.contains(event.target)) _cdxDocEscHandler(event);
+}
+
+function setVisible(nextVisible) {
+  setSidepanelVisible(PANEL_OWNER, nextVisible);
+}
+
+function applyVisibility(nextVisible) {
+  if (!_panel) return;
+  if (!nextVisible) {
+    _contextMenu?.close();
+    teardownMcpApps(null, 'Panel closed');
+    const tab = activeTab();
+    const input = panelEl('#cxp-input');
+    if (tab && input) tab.draft = input.value;
+  }
+  _visible = !!nextVisible;
+  _panel.classList.toggle('open', _visible);
+  syncReservedWidth();
+  _host.syncStatusTicker?.();
+  renderPills();
+  emit('codex-panel:visibility', _visible);
+  if (_visible) {
+    window.addEventListener('keydown', _cdxPanelEscHandler, { capture: true });
+    document.addEventListener('keydown', _cdxDocEscHandler, { capture: true });
+    if (!_tabs.length) createTab({ project: storage.getItem(STOR.project) || '' });
+    state.lastActivePanel = 'codex';
+    updateActiveTabView();
+    loadCurrentProfile();
+    loadRecallProfile();
+    panelEl('#cxp-input')?.focus();
+    refreshCliBanner();
+  } else {
+    window.removeEventListener('keydown', _cdxPanelEscHandler, { capture: true });
+    document.removeEventListener('keydown', _cdxDocEscHandler, { capture: true });
+  }
+  window.dispatchEvent(new Event('resize'));
+}
+
+// ═══════════════════════════════════════════
+//  loadBranches — Fetch git branches for project
+// ═══════════════════════════════════════════
+
+async function loadBranches(path) {
+  const $branch = panelEl('#cxp-branch');
+  if (!$branch) return;
+  if (!path) { $branch.dataset.current = ''; ddPopulate($branch, [], ''); return; }
+  try {
+    const res = await fetch(`/api/terminal/branches?path=${encodeURIComponent(path)}`).then(r => r.json());
+    $branch.dataset.current = res.current || '';
+    const tab = activeTab();
+    if (tab && tab.project === path) tab.branch = res.current || '';
+    if (res.branches?.length) {
+      const items = res.branches.map(b => ({ value: b, label: b }));
+      ddPopulate($branch, items, res.current || '');
+    } else {
+      ddPopulate($branch, [], '');
+    }
+  } catch {}
+}
+
+// ═══════════════════════════════════════════
+//  MCP Profile — live profile switching
+// ═══════════════════════════════════════════
+
+let _mcpProfiles = [];
+let _currentProfile = 'full';
+let _defaultMcpProfile = 'full';
+
+function mcpProfileItemsFromPresets(presets) {
+  if (!presets || typeof presets !== 'object') return null;
+  return Object.entries(presets).map(([value, p]) => ({
+    value,
+    label: p?.label || value,
+    hint: `${p?.tools || '?'} tools`,
+  }));
+}
+
+function applyMcpProfileState(profile, presets) {
+  if (profile) _currentProfile = profile;
+  const items = mcpProfileItemsFromPresets(presets);
+  if (items) _mcpProfiles = items;
+  const $profile = panelEl('#cxp-profile');
+  if ($profile) populateProfileDropdown($profile);
+}
+
+async function loadCurrentProfile() {
+  const $profile = panelEl('#cxp-profile');
+  if (!$profile) return;
+  try {
+    const resp = await fetch('/api/mcp/profile');
+    const data = await resp.json();
+    if (data.ok) {
+      _defaultMcpProfile = data.defaultProfile || data.profile || 'full';
+      const tab = activeTab();
+      if (tab && !tab.mcpProfile) {
+        tab.mcpProfile = _defaultMcpProfile;
+        saveTabs();
+      }
+      applyMcpProfileState(tab?.mcpProfile || _defaultMcpProfile, data.presets);
+      return;
+    }
+  } catch {}
+  populateProfileDropdown($profile);
+}
+
+function populateProfileDropdown($dd) {
+  const menu = $dd.querySelector('.cxp-dd-menu');
+  const label = $dd.querySelector('.cxp-dd-label');
+  if (!menu || !label) return;
+  menu.innerHTML = '';
+  const matched = _mcpProfiles.find(p => p.value === _currentProfile);
+  label.textContent = matched ? matched.label : _currentProfile;
+  $dd.classList.add('has-value');
+  $dd._value = _currentProfile;
+  for (const p of _mcpProfiles) {
+    const el = document.createElement('div');
+    el.className = 'cxp-dd-item' + (p.value === _currentProfile ? ' selected' : '');
+    el.dataset.value = p.value;
+    el.innerHTML = `<span>${p.label}</span><span style="opacity:0.35;margin-left:auto;font-size:9px">${p.hint}</span>`;
+    el.style.display = 'flex'; el.style.gap = '6px';
+    el.addEventListener('click', async () => {
+      if (p.value === _currentProfile) { $dd.classList.remove('open'); return; }
+      const previous = _currentProfile;
+      _currentProfile = p.value;
+      $dd._value = p.value;
+      label.textContent = p.label;
+      $dd.classList.remove('open');
+      menu.querySelectorAll('.cxp-dd-item').forEach(o => o.classList.remove('selected'));
+      el.classList.add('selected');
+      try {
+        await updateMcpProfile(p.value);
+        populateProfileDropdown($dd);
+      } catch (err) {
+        _currentProfile = previous;
+        populateProfileDropdown($dd);
+        _host.appendSystem?.(err.message || 'Could not switch MCP profile', 'error');
+      }
+    });
+    menu.appendChild(el);
+  }
+}
+
+async function updateMcpProfile(profile) {
+  const tab = activeTab();
+  if (!tab) throw new Error('No active Codex tab');
+  if (tab.running || tab.startingThread || tab.automationActive) {
+    throw new Error('Wait for the active Codex turn or automation to finish before changing its MCP profile.');
+  }
+  const result = await requestSocketPayload('mcp_profile_set', {
+    profile,
+    threadId: tab.threadId || null,
+    cwd: tab.project || null,
+    model: tab.model || null,
+    contextMode: tab.contextMode === 'extended' ? 'extended' : 'default',
+  });
+  const effective = result?.profile || profile;
+  tab.mcpProfile = effective;
+  _currentProfile = effective;
+  saveTabs();
+  // This selector is tab-scoped. The shared default is changed only through
+  // an explicit future-runtime/default control, never as a side effect of
+  // restarting the active Codex app-server.
+  return effective;
+}
+
+// ═══════════════════════════════════════════
+//  Recall Profile — live recall preset switching
+// ═══════════════════════════════════════════
+
+const RECALL_PROFILES_META = [
+  { value: 'quick',    label: 'Quick',    hint: '3 results' },
+  { value: 'balanced', label: 'Balanced', hint: '5 results' },
+  { value: 'deep',     label: 'Deep',     hint: '10 results' },
+  { value: 'custom',   label: 'Custom',   hint: 'custom' },
+];
+const RECALL_PROFILE_DEFAULTS = {
+  quick:    { limit: 3,  minImportance: 5, minScore: 0.45, maxChars: 300,  includeSessions: 'never',  recencyBoost: false },
+  balanced: { limit: 5,  minImportance: 0, minScore: 0.30, maxChars: 0,    includeSessions: 'auto',   recencyBoost: false },
+  deep:    { limit: 10, minImportance: 0, minScore: 0.20, maxChars: 0,    includeSessions: 'always', recencyBoost: false },
+};
+
+let _recallProfile = 'balanced';
+
+async function loadRecallProfile() {
+  const $recall = panelEl('#cxp-recall');
+  if (!$recall) return;
+  try {
+    const data = await fetch('/api/display-settings').then(r => r.json());
+    if (data.profile) _recallProfile = data.profile;
+  } catch {}
+  populateRecallDropdown($recall);
+}
+
+function populateRecallDropdown($dd) {
+  const menu = $dd.querySelector('.cxp-dd-menu');
+  const label = $dd.querySelector('.cxp-dd-label');
+  if (!menu || !label) return;
+  menu.innerHTML = '';
+  const matched = RECALL_PROFILES_META.find(p => p.value === _recallProfile);
+  label.textContent = matched ? matched.label : _recallProfile;
+  $dd.classList.add('has-value');
+  $dd._value = _recallProfile;
+  for (const p of RECALL_PROFILES_META) {
+    const el = document.createElement('div');
+    el.className = 'cxp-dd-item' + (p.value === _recallProfile ? ' selected' : '');
+    el.dataset.value = p.value;
+    el.innerHTML = `<span>${p.label}</span><span style="opacity:0.35;margin-left:auto;font-size:9px">${p.hint}</span>`;
+    el.style.display = 'flex'; el.style.gap = '6px';
+    el.addEventListener('click', () => {
+      if (p.value === _recallProfile) { $dd.classList.remove('open'); return; }
+      _recallProfile = p.value;
+      $dd._value = p.value;
+      label.textContent = p.label;
+      $dd.classList.remove('open');
+      menu.querySelectorAll('.cxp-dd-item').forEach(o => o.classList.remove('selected'));
+      el.classList.add('selected');
+      saveRecallProfile(p.value);
+    });
+    menu.appendChild(el);
+  }
+}
+
+async function saveRecallProfile(profile) {
+  try {
+    const current = await fetch('/api/display-settings').then(r => r.json());
+    const defaults = RECALL_PROFILE_DEFAULTS[profile] || current.recallDefaults || RECALL_PROFILE_DEFAULTS.balanced;
+    await fetch('/api/display-settings', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ...current, profile, recallDefaults: profile !== 'custom' ? defaults : current.recallDefaults }),
+    });
+  } catch (e) {
+    console.error('Failed to save recall profile:', e);
+  }
+}
+
+// ═══════════════════════════════════════════
+//  wireEvents — Attach All Event Handlers
+// ═══════════════════════════════════════════
+
+function wireEvents() {
+  // Project links retain their existing handling; card heads bind in cdx-render.
+  const msgContainer = panelEl('#cxp-messages-container');
+  if (msgContainer) {
+    msgContainer.addEventListener('click', (e) => {
+      const link = e.target.closest('a[href]');
+      if (link && msgContainer.contains(link) && _host.maybeOpenProjectFileLink?.(link.getAttribute('href'), e)) return;
+    });
+  }
+
+  const input = panelEl('#cxp-input');
+  const send = panelEl('#cxp-send');
+  const minimizeBtn = panelEl('#cxp-minimize');
+  const newBtn = panelEl('#cxp-new');
+  const closeBtn = panelEl('#cxp-close');
+  const projectDd = panelEl('#cxp-project');
+  const sessionBtn = panelEl('#cxp-session-btn');
+  const sessionLabelEl = panelEl('#cxp-session-label');
+  const sessionMenu = panelEl('#cxp-session-menu');
+  const renameBtn = panelEl('#cxp-header-rename');
+
+  input?.addEventListener('input', () => {
+    const tab = activeTab();
+    if (tab) {
+      tab.draft = input.value;
+      if (tab.pendingMentions?.length) {
+        const nextMentions = tab.pendingMentions.filter((mention) => input.value.includes(`@${mention.name}`));
+        if (nextMentions.length !== tab.pendingMentions.length) {
+          tab.pendingMentions = nextMentions;
+          renderPathStrip();
+        }
+      }
+    }
+    autosizeInput();
+    syncInputEnabled();
+    showSlashHints(input.value);
+  });
+  input?.addEventListener('keydown', (event) => {
+    // Slash hint navigation
+    if (event.key === 'ArrowDown' && navigateSlashHints(1)) { event.preventDefault(); return; }
+    if (event.key === 'ArrowUp' && navigateSlashHints(-1)) { event.preventDefault(); return; }
+    if (event.key === 'Enter' && !event.shiftKey && confirmSlashHint()) { event.preventDefault(); return; }
+    if (event.key === 'Escape') {
+      const hintsEl = panelEl('#cxp-slash-hints');
+      if (hintsEl && !hintsEl.hidden) { hideComposerHints(); event.preventDefault(); return; }
+      if (activeTab()?.running) { event.preventDefault(); interruptTurn(); return; }
+    }
+    if (event.key === 'Tab' && activeTab()?.running) {
+      const tab = activeTab();
+      const hasDraft = !!input.value.trim() || !!tab?.attachedImages?.length || !!tab?.pendingPaths?.length || !!tab?.pendingMentions?.length;
+      if (hasDraft) {
+        event.preventDefault();
+        queueCurrentDraft();
+        return;
+      }
+    }
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      if (activeTab()?.running && !input.value.trim().startsWith('/')) {
+        steerActiveTurn();
+        return;
+      }
+      sendPrompt();
+    }
+  });
+  // Image paste
+  input?.addEventListener('paste', (event) => {
+    const items = event.clipboardData?.items;
+    if (!items) return;
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        event.preventDefault();
+        const file = item.getAsFile();
+        if (file) addImageFromFile(file);
+      }
+    }
+  });
+  // File input change
+  const fileInput = panelEl('#cxp-file-input');
+  const attachBtn = panelEl('#cxp-attach-btn');
+  attachBtn?.addEventListener('click', () => fileInput?.click());
+  fileInput?.addEventListener('change', () => {
+    if (!fileInput.files) return;
+    for (const file of fileInput.files) {
+      if (file.type.startsWith('image/')) addImageFromFile(file);
+    }
+    fileInput.value = '';
+  });
+  send?.addEventListener('click', () => {
+    if (activeTab()?.running) {
+      interruptTurn();
+      return;
+    }
+    sendPrompt();
+  });
+  minimizeBtn?.addEventListener('click', () => setVisible(false));
+  newBtn?.addEventListener('click', () => {
+    if (openAnotherSidepanelSession(PANEL_OWNER, 'codex', { project: activeTab()?.project || '' })) return;
+    const tab = createTab({ project: activeTab()?.project || storage.getItem(STOR.project) || '' });
+    if (!tab) return;
+    promptNameNewSession();
+  });
+  closeBtn?.addEventListener('click', () => closeActiveTab());
+  // Context settings: the cog and its popover take the place of the context bar.
+  _contextMenu?.destroy();
+  _contextMenu = mountContextMenu(panelEl('.cxp-actions'), _panel, {
+    reading: contextMenuReading,
+    data: () => {
+      const data = contextMenuData();
+      // A new conversation since the last read: its servers and settings are read again.
+      if (data?.detailsPending) refreshContextMenuDetails();
+      return data;
+    },
+    onOpen: () => {
+      sessionMenu?.classList.remove('open');
+      panelEl('#cxp-account-menu')?.classList.remove('open');
+      panelEl('#cxp-effort-menu')?.classList.remove('open');
+      refreshContextMenuDetails();
+    },
+    onCompact: () => startCompaction(),
+    onManage: () => openSettingsPanel({ section: 'mcp' }),
+    onSettings: () => openSettingsPanel(),
+    // 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());
+  const slideBtn = panelEl('#cxp-slide');
+  slideBtn?.addEventListener('click', () => setVisible(false));
+  const changelogBtn = panelEl('#cxp-action-changelog');
+  changelogBtn?.addEventListener('click', () => {
+    const tab = activeTab();
+    if (!tab || tab.running || !tab.connected || !tab.bootstrapped) return;
+    const inp = panelEl('#cxp-input');
+    if (!inp) return;
+    inp.value = '/synabun changelog';
+    autosizeInput();
+    sendPrompt();
+  });
+  ddSetup(projectDd);
+  const modelDd = panelEl('#cxp-model');
+  ddSetup(modelDd);
+  modelDd?.addEventListener('click', event => {
+    if (!event.target.closest('.cxp-dd-menu') && modelDd.classList.contains('open')) {
+      requestModelList(activeTab(), { force: true });
+    }
+  });
+  const effortToggle = panelEl('#cxp-effort-toggle');
+  const planToggle = panelEl('#cxp-plan-toggle');
+  const autoAcceptToggle = panelEl('#cxp-autoaccept-toggle');
+  const contextToggle = panelEl('#cxp-context-toggle');
+  effortToggle?.addEventListener('click', (event) => { event.stopPropagation(); toggleEffortMenu(); });
+  planToggle?.addEventListener('click', () => togglePlanMode());
+  autoAcceptToggle?.addEventListener('click', () => toggleAutoAccept());
+  contextToggle?.addEventListener('click', () => toggleContextMode());
+  panelEl('#cxp-context-retry')?.addEventListener('click', () => requestModelList(activeTab(), { force: true }));
+  const queuePauseBtn = panelEl('#cxp-queue-pause');
+  const queueClearBtn = panelEl('#cxp-queue-clear');
+  queuePauseBtn?.addEventListener('click', () => toggleQueuePause());
+  queueClearBtn?.addEventListener('click', () => clearQueue());
+  const branchDd = panelEl('#cxp-branch');
+  ddSetup(branchDd);
+  branchDd?.addEventListener('change', async () => {
+    const tab = activeTab();
+    const project = tab?.project || '';
+    const branch = ddGetValue(branchDd);
+    const previous = branchDd.dataset.current || tab?.branch || '';
+    if (!tab || !project || !branch || branch === previous) return;
+    if (tab.running) {
+      _host.appendSystem?.('Stop the active Codex turn before switching branches.', 'error');
+      await loadBranches(project);
+      return;
+    }
+    branchDd.classList.add('cxp-dropdown--busy');
+    try {
+      const statusResponse = await fetch(`/api/git/status?path=${encodeURIComponent(project)}`);
+      const status = statusResponse.ok ? await statusResponse.json() : null;
+      if (status?.changes?.length) {
+        const confirmed = window.confirm(`Switch from ${previous || 'the current branch'} to ${branch} with ${status.changes.length} uncommitted change${status.changes.length === 1 ? '' : 's'}? Git will preserve them when possible.`);
+        if (!confirmed) {
+          await loadBranches(project);
+          return;
+        }
+      }
+      const response = await fetch('/api/terminal/checkout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: project, branch }),
+      });
+      const result = await response.json().catch(() => ({}));
+      if (!response.ok || !result.ok) throw new Error(result.error || 'Branch checkout failed');
+      branchDd.dataset.current = result.branch || branch;
+      for (const entry of _tabs) {
+        if (entry.project === project) entry.branch = result.branch || branch;
+      }
+      hideComposerHints();
+      _host.appendSystem?.(`Switched working tree to ${result.branch || branch}.`, 'muted');
+      saveTabs();
+      await loadBranches(project);
+    } catch (error) {
+      _host.appendSystem?.(error.message || 'Branch checkout failed', 'error');
+      await loadBranches(project);
+    } finally {
+      branchDd.classList.remove('cxp-dropdown--busy');
+    }
+  });
+  const profileDd = panelEl('#cxp-profile');
+  ddSetup(profileDd);
+  const recallDd = panelEl('#cxp-recall');
+  ddSetup(recallDd);
+  loadRecallProfile();
+  projectDd?.addEventListener('change', () => {
+    const tab = activeTab();
+    const project = ddGetValue(projectDd);
+    sessionMenu?.classList.remove('open');
+    setActiveProject(project, {
+      preserveStatus: !tab?.connected,
+      tone: tab?.connected ? 'ready' : 'working',
+    });
+  });
+  sessionBtn?.addEventListener('click', (event) => {
+    if (sessionLabelEl?.querySelector('.cxp-rename-input')) return;
+    if (event.target === sessionLabelEl || event.target.closest('#cxp-session-label')) return;
+    const isOpen = sessionMenu?.classList.toggle('open');
+    if (isOpen) renderSessionMenu();
+  });
+  sessionLabelEl?.addEventListener('click', (event) => {
+    event.stopPropagation();
+    sessionMenu?.classList.remove('open');
+    renameActiveSession();
+  });
+  sessionLabelEl?.addEventListener('mousedown', (event) => {
+    if (sessionLabelEl.querySelector('.cxp-rename-input')) event.stopPropagation();
+  });
+  renameBtn?.addEventListener('mousedown', (event) => {
+    if (sessionLabelEl?.querySelector('.cxp-rename-input')) event.preventDefault();
+  });
+  renameBtn?.addEventListener('click', (event) => {
+    event.stopPropagation();
+    sessionMenu?.classList.remove('open');
+    renameActiveSession();
+  });
+  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'));
+    }
+    if (!event.target.closest('.cxp-effort-wrap')) panelEl('#cxp-effort-menu')?.classList.remove('open');
+  });
+
+  if (!_resizeBound) {
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState !== 'visible') {
+        // Page hidden — pause stall timer to prevent false interrupts from browser throttling
+        stopStallTimer();
+        return;
+      }
+      // Page visible — reconnect if needed and resume stall detection
+      const tab = activeTab();
+      if (!tab || tab.closed) return;
+      if (!tab.ws || tab.ws.readyState !== WebSocket.OPEN) {
+        connectTab(tab);
+      }
+      if (tab.running) resetStallTimer();
+    });
+    _resizeBound = true;
+  }
+
+  // Drag-drop image support
+  _panel?.addEventListener('dragover', (event) => {
+    if (!event.dataTransfer?.types?.includes('Files')) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+    if (!_panel.querySelector('.cxp-drop-overlay')) {
+      const overlay = document.createElement('div');
+      overlay.className = 'cxp-drop-overlay';
+      overlay.textContent = 'Drop images here';
+      _panel.appendChild(overlay);
+    }
+  });
+  _panel?.addEventListener('dragleave', (event) => {
+    if (event.relatedTarget && _panel.contains(event.relatedTarget)) return;
+    _panel.querySelector('.cxp-drop-overlay')?.remove();
+  });
+  _panel?.addEventListener('drop', (event) => {
+    event.preventDefault();
+    _panel.querySelector('.cxp-drop-overlay')?.remove();
+    if (!event.dataTransfer?.files) return;
+    for (const file of event.dataTransfer.files) {
+      if (file.type.startsWith('image/')) addImageFromFile(file);
+    }
+  });
+
+  // Initialize voice input
+  initVoiceInput();
+
+  on('mcp:profile-changed', (msg = {}) => {
+    _defaultMcpProfile = msg.defaultProfile || msg.profile || _defaultMcpProfile;
+    applyMcpProfileState(activeTab()?.mcpProfile || _defaultMcpProfile, msg.presets);
+  });
+
+  on('codex-panel:show', async (data) => {
+    setVisible(true);
+    if (data?.tabId) {
+      const idx = _tabs.findIndex((entry) => entry.id === data.tabId);
+      if (idx >= 0) switchTab(idx);
+    }
+  });
+
+  const findPlanEditorTab = ({ source, tabId, planId, accountId, threadId } = {}) => {
+    if (source !== 'codex' || !tabId || !planId || !accountId || !threadId) return null;
+    return _tabs.find((entry) => entry.id === tabId
+      && entry.planDocument?.id === planId
+      && entry.planDocument?.accountId === accountId
+      && entry.planDocument?.threadId === threadId) || null;
+  };
+
+  on('plan-editor-state', (event = {}) => {
+    const tab = findPlanEditorTab(event);
+    if (!tab || (tab.planEditor?.open && tab.planEditor.revision !== event.revision)) return;
+    if (tab.planDocument.revision !== event.revision && tab.planEditor?.revision !== event.revision) return;
+    tab.planEditor = { planId: event.planId, revision: event.revision, dirty: !!event.dirty, saving: !!event.saving, open: !!event.open };
+    syncPlanEditorActions(tab);
+  });
+
+  on('plan-saved', (event = {}) => {
+    const { filePath, content, savedRevision } = event;
+    const tab = findPlanEditorTab(event);
+    // The optional editor save callback commits atomically before this event.
+    // Never route an unscoped/old event to whichever tab happens to be active.
+    if (!tab || !event.persisted || tab.planDocument.revision !== savedRevision || tab.planDocument.markdown !== content) return;
+    tab.planEditor = null;
+    tab.planContent = content;
+    tab.editedPlanContent = content;
+    tab.planFeedbackDraft = '';
+    tab.showPostPlanActions = true;
+    tab.postPlanHeader = 'PLAN UPDATED';
+    tab.planApprovalPending = true;
+    tab.planTurnActive = false;
+    tab.lastPlanTurnId = '';
+    if (filePath) tab.planFilePath = filePath;
+    if (isActiveTab(tab)) {
+      _planContent = tab.planContent;
+      _editedPlanContent = tab.editedPlanContent;
+      _showPostPlanActions = true;
+      _postPlanHeader = 'PLAN UPDATED';
+      _planApprovalPending = true;
+      _planTurnActive = false;
+      _lastPlanTurnId = '';
+      if (filePath) _planFilePath = filePath;
+    }
+    renderPostPlanActions(tab, 'PLAN UPDATED');
+    saveTabs();
+  });
+
+  on('changelog-saved', ({ content }) => {
+    const tab = activeTab();
+    if (!tab) return;
+    const request = tab._changelogRequest || null;
+    tab._changelogRequest = null;
+    if (request?.buttons?.length) _host.restoreChangelogButtons?.(request.buttons);
+
+    const editedText = `Edit first — here are the edited entries:\n\n${content || ''}`.trim();
+    if (request?.requestId != null && request?.answerKey) {
+      const isMcpChoice = request.responseKind === 'mcp';
+      const responseMeta = request.responseMeta || {};
+      _host.sendServerRequestReply?.(request.requestId, {
+        result: isMcpChoice
+          ? {
+              action: 'accept',
+              content: {
+                [request.answerKey]: responseMeta.otherValue || '__synabun_other__',
+                [responseMeta.otherField || `${request.answerKey}__other`]: editedText,
+              },
+            }
+          : {
+              answers: {
+                [request.answerKey]: { answers: [editedText] },
+              },
+            },
+        label: 'submitted',
+      });
+      return;
+    }
+
+    const sent = dispatchPrompt(editedText, { tab });
+    if (!sent) _host.appendSystem?.('Failed to send edited changelog entries back to Codex.', 'error');
+  });
+
+  on('plan-edit-cancelled', (event = {}) => {
+    const tab = findPlanEditorTab(event);
+    if (!tab || (tab.planEditor?.open && tab.planEditor.revision !== event.revision)) return;
+    if (tab.planDocument.revision !== event.revision && tab.planEditor?.revision !== event.revision) return;
+    tab.planEditor = null;
+    const reviewPending = tab.planDocument?.status === 'complete' && !tab.planDocument.approvedRevision;
+    tab.showPostPlanActions = reviewPending;
+    tab.planApprovalPending = reviewPending;
+    tab.postPlanHeader = tab.postPlanHeader || 'PLAN COMPLETE';
+    if (isActiveTab(tab)) {
+      _showPostPlanActions = reviewPending;
+      _planApprovalPending = reviewPending;
+      _postPlanHeader = tab.postPlanHeader;
+    }
+    renderPostPlanActions(tab, tab.postPlanHeader);
+    saveTabs();
+  });
+
+  on('changelog-edit-cancelled', () => {
+    const tab = activeTab();
+    if (!tab) return;
+    const request = tab._changelogRequest || null;
+    tab._changelogRequest = null;
+    if (request?.buttons?.length) _host.restoreChangelogButtons?.(request.buttons);
+    if (request?.requestId != null) {
+      const entry = _host.getRequestCardEntry?.(request.requestId);
+      if (entry?.pillEl) entry.pillEl.textContent = 'waiting';
+    }
+  });
+}
+
+// ═══════════════════════════════════════════
+//  ensurePanel — One-time Panel Bootstrap
+// ═══════════════════════════════════════════
+
+function ensurePanel() {
+  if (_panel) return;
+  injectStyles();
+  _panel = buildPanel();
+  document.body.appendChild(_panel);
+  registerSidepanel({
+    owner: PANEL_OWNER, provider: 'codex', element: _panel,
+    header: panelEl('.cxp-header'), actions: panelEl('.cxp-actions'),
+    buttonClass: 'cxp-btn', dockHandle: panelEl('.cxp-resize-handle'), applyVisibility,
+  });
+
+  // Wire cdx-tabs with DOM callbacks
+  setPanelRef(() => _panel);
+  setPanelState({
+    getVisible: () => _visible,
+    setVisible,
+    toggleCodexPanel,
+  });
+  setCallbacks({
+    scrollEnd,
+    autosizeInput,
+    emit,
+    on,
+    loadBranches,
+    activeTabChanged: (tab) => {
+      applyMcpProfileState(tab?.mcpProfile || _defaultMcpProfile, null);
+    },
+    contextMenuSync: () => _contextMenu?.sync(),
+  });
+
+  initContextBridge();
+  wireEvents();
+  autosizeInput();
+  restoreTabs();
+  syncInputEnabled();
+  ensureCliSubscription();
+  window.dispatchEvent(new CustomEvent('sidepanel-tray:provider-loaded', { detail: { provider: 'codex' } }));
+}
+
+// ═══════════════════════════════════════════
+//  Public API
+// ═══════════════════════════════════════════
+
+export function isCodexPanelOpen() {
+  return _visible;
+}
+
+export async function toggleCodexPanel() {
+  ensurePanel();
+  if (_visible) {
+    setVisible(false);
+    return;
+  }
+  await ensureProjectsLoaded();
+  setVisible(true);
+}
+
+export async function attachCodexAutomation(run, {
+  focus = !!run?.focus, isCancelled = () => false, bufferedEvents = [], bufferTruncated = false,
+} = {}) {
+  const threadId = run?.providerThreadId || run?.providerSessionId;
+  if (!run?.runId || !threadId) return { ok: false, reason: 'identity_pending' };
+  ensurePanel();
+  await ensureProjectsLoaded();
+  if (isCancelled()) return { ok: false, reason: 'dismissed' };
+  let tab = allTabs().find((entry) => entry.automationRunId === run.runId);
+  if (!tab) {
+    tab = createTab({
+      id: run.runId,
+      automationRunId: run.runId,
+      threadId,
+      project: run.cwd || '',
+      accountId: run.accountId || 'default',
+      model: run.model || '',
+      effort: run.effort || 'off',
+      mcpProfile: run.mcpProfile || null,
+      autoAccept: true,
+      planMode: false,
+      title: run.title || 'Automation',
+    }, { autoSwitch: false });
+  }
+  if (!tab) return { ok: false, reason: 'tab_limit' };
+  const running = run.status === 'starting' || run.status === 'running';
+  // A task-mode worker between turns (waiting for a follow-up) is alive, not working.
+  const working = running && run.turnState !== 'idle' && run.turnState !== 'terminal';
+  tab.automationRunId = run.runId;
+  tab.automationActive = running;
+  tab.automationOwnerId = nativeLoopWindowId;
+  tab.threadId = threadId;
+  tab.project = run.cwd || tab.project;
+  tab.mcpProfile = run.mcpProfile || tab.mcpProfile || _defaultMcpProfile;
+  tab.sessionLabel = run.title || tab.sessionLabel || 'Automation';
+  tab._automationIteration = run.currentIteration;
+  tab.planMode = false;
+  if (focus) applyMcpProfileState(tab.mcpProfile, null);
+  clearPlanHandoffState(tab);
+  withTab(tab, () => setRunning(working));
+  // The router replays what it buffered right after this attach; when that
+  // reaches back to the first prompt, history would only render it twice.
+  if (running && !tab._automationHydrated && !codexAutomationBufferCoversRun(bufferedEvents, bufferTruncated)) {
+    await hydrateCodexAutomationHistory(tab);
+    if (isCancelled() || tab.closed) {
+      await detachCodexAutomation(run.runId);
+      return { ok: false, reason: 'dismissed' };
+    }
+  }
+  if (run.status === 'failed' && run.error && tab._automationLifecycleError !== run.error) {
+    tab._automationLifecycleError = run.error;
+    withTab(tab, () => appendSystem(run.error, 'error'));
+  }
+  saveTabs();
+  renderPills();
+  if (focus) {
+    if (!_visible) await toggleCodexPanel();
+    const idx = allTabs().indexOf(tab);
+    if (idx >= 0) switchTab(idx);
+  }
+  if (!running && isActiveTab(tab) && _visible) connectTab(tab);
+  return { ok: true, tabId: tab.id };
+}
+
+export function handleCodexAutomationEvent(runId, payload) {
+  const tab = allTabs().find((entry) => entry.automationRunId === runId);
+  const event = payload?.event || payload;
+  if (!tab || !event?.type) return false;
+  tab._automationLiveEvents = (tab._automationLiveEvents || 0) + 1;
+  const turnId = codexAutomationTurnKey(runId, payload, tab._automationIteration);
+  return withTab(tab, () => {
+    if (event.type === 'synabun.user_prompt') {
+      const key = `${turnId}:${event.text || ''}`;
+      tab._automationPromptKeys ||= new Set();
+      if (!tab._automationPromptKeys.has(key)) {
+        tab._automationPromptKeys.add(key);
+        appendLocalUserMessage(event.text || '');
+      }
+    } else if (event.type === 'synabun.error') {
+      appendSystem(event.message || 'Codex automation failed', 'error');
+    } else if (event.type === 'turn.started') handleNotify('turn/started', { turn: { id: turnId } });
+    else if (event.type === 'turn.completed') handleNotify('turn/completed', { turn: { id: turnId }, usage: event.usage });
+    else if (event.type === 'turn.failed') handleNotify('turn/completed', { turn: { id: turnId, error: event.error } });
+    else if (event.type === 'item.started' || event.type === 'item.updated' || event.type === 'item.completed') {
+      const item = codexAutomationItem(event.item, event.type, {
+        runId, turnKey: turnId, accountId: tab.accountId, threadId: tab.threadId,
+      });
+      if (item) handleNotify(event.type === 'item.completed' ? 'item/completed' : 'item/started', { item });
+    } else if (event.type === 'error') {
+      const item = codexAutomationItem({ id: 'error', type: 'error', status: 'failed', message: event.message }, 'item.completed', {
+        runId, turnKey: turnId, accountId: tab.accountId, threadId: tab.threadId,
+      });
+      handleNotify('item/completed', { item });
+    }
+    return true;
+  });
+}
+
+export async function detachCodexAutomation(runId) {
+  const idx = allTabs().findIndex((entry) => entry.automationRunId === runId);
+  if (idx < 0) return false;
+  closeTab(idx, { detachAutomation: true });
+  return true;
+}