jupyterlab-codex-sidebar 0.1.4 → 0.1.6

package/lib/codexChat.js

@@ -0,0 +1,2506 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { ReactWidget, Dialog, showDialog } from '@jupyterlab/apputils';
+import { useCodexSocket } from './hooks/useCodexSocket';
+import { handleCodexSocketMessage } from './handlers/handleCodexSocketMessage';
+import { blobToDataUrl, MessageText, SelectionPreviewCode, StatusPill } from './codexChatRender';
+import { parseModelCatalog, buildCancelMessage, buildDeleteAllSessionsMessage, buildSendMessage, buildStartSessionMessage } from './protocol';
+import { coerceMessageContextPreview as coerceMessageContextPreviewShared, coerceSessionHistory as coerceSessionHistoryShared, coerceSelectionPreview as coerceSelectionPreviewShared, truncateEnd as truncateEndShared } from './handlers/codexMessageUtils';
+import { clampNumber, coerceRateLimitsSnapshot, formatDurationShort, formatResetsIn, formatRunDuration, formatTokenCount, getBrowserNotificationPermission, percentLeftFromUsed, safeParseDateMs, truncateMiddle } from './codexChatFormatting';
+import { isSessionStartNotice, normalizeSessionStartedNotice } from './codexChatNotice';
+import { STORAGE_KEY_SESSION_THREADS, STORAGE_KEY_SESSION_THREADS_EVENT, buildSessionThreadSyncEvent, coerceSessionThreadSyncEvent, getStoredSessionThreadCount, writeSessionThreadSyncEvent, markDeleteAllPending, clearDeleteAllPending, hasDeleteAllPending, parseSessionKey, persistStoredSessionThreads, readStoredThreadId } from './codexChatPersistence';
+import { createSession as createBaseSession, createThreadResetSession as createBaseThreadResetSession } from './codexChatSessionFactory';
+import { resolveCurrentSessionKey, resolveSessionKey } from './codexChatSessionKey';
+import { resolveMessageSessionKey as resolveMessageSessionKeyForMessage } from './codexSessionResolver';
+import { MESSAGE_SELECTION_PREVIEW_STORED_MAX_CHARS, captureDocumentViewState, findDocumentWidgetByPath, getActiveCellOutput, getActiveCellText, getActiveDocumentWidget, getDocumentContext, getSelectedContext, getSelectedTextFromActiveCell, getSelectedTextFromFileEditor, getSupportedDocumentPath, isNotebookWidget, normalizeSelectionPreviewText, restoreDocumentViewState, toCellOutputPreview, toMessageSelectionPreview, } from './codexChatDocumentUtils';
+import { resolveCellAttachmentState } from './codexChatAttachmentState';
+import { buildActiveCellOutputSignature, buildActiveCellSelectionSignature, isDuplicateActiveCellAttachmentSignature, makeActiveCellAttachmentDedupKey } from './codexChatAttachmentDedup';
+import { buildAttachmentTruncationNotice, limitActiveCellAttachmentPayload, resolveSentAttachmentTruncation } from './codexChatAttachmentLimit';
+import { ArrowDownIcon, ArrowUpIcon, BatteryIcon, CellAttachmentIcon, CheckIcon, ContextWindowIcon, FileIcon, GearIcon, ImageIcon, PlusIcon, PortalMenu, ReasoningEffortIcon, ShieldIcon, StopIcon, XIcon } from './codexChatPrimitives';
+import { hasStoredValue, safeLocalStorageGet, safeLocalStorageRemove, safeLocalStorageSet } from './codexChatStorage';
+const truncateEnd = truncateEndShared;
+export class CodexPanel extends ReactWidget {
+    constructor(app, notebooks) {
+        super();
+        this._app = app;
+        this._notebooks = notebooks;
+        this.addClass('jp-CodexPanel');
+    }
+    render() {
+        return _jsx(CodexChat, { app: this._app, notebooks: this._notebooks });
+    }
+    onAfterAttach(msg) {
+        super.onAfterAttach(msg);
+        this.focusComposer();
+    }
+    onActivateRequest(msg) {
+        super.onActivateRequest(msg);
+        this.focusComposer();
+    }
+    focusComposer() {
+        window.setTimeout(() => {
+            const textarea = this.node.querySelector('.jp-CodexComposer textarea');
+            if (!textarea || textarea.disabled) {
+                return;
+            }
+            textarea.focus({ preventScroll: true });
+            const cursor = textarea.value.length;
+            textarea.setSelectionRange(cursor, cursor);
+        }, 0);
+    }
+}
+function markLocalizedStartNotice(session) {
+    const firstEntry = session.messages[0];
+    if (firstEntry &&
+        firstEntry.kind === 'text' &&
+        firstEntry.role === 'system' &&
+        isSessionStartNotice(firstEntry.text)) {
+        firstEntry.sessionResolution = 'client';
+    }
+    return session;
+}
+const FALLBACK_MODEL_OPTIONS = [];
+const DEFAULT_REASONING_EFFORT = 'medium';
+const MAX_REASONING_EFFORT_BARS = 4;
+const SANDBOX_OPTIONS = [
+    { label: 'Default permission', value: 'workspace-write' },
+    { label: 'Full access', value: 'danger-full-access' },
+    { label: 'Read only', value: 'read-only' }
+];
+function readDefaultModelOption() {
+    const savedModel = readStoredModel();
+    if (savedModel && savedModel !== '__config__' && savedModel !== '__custom__') {
+        return savedModel;
+    }
+    return '__config__';
+}
+function readDefaultReasoningEffortOption() {
+    return readStoredReasoningEffort();
+}
+function readDefaultSandboxModeOption() {
+    return readStoredSandboxMode();
+}
+const AUTO_SAVE_STORAGE_KEY = 'jupyterlab-codex:auto-save-before-send';
+const MODEL_STORAGE_KEY = 'jupyterlab-codex:model';
+const COMMAND_PATH_STORAGE_KEY = 'jupyterlab-codex:command-path';
+const REASONING_STORAGE_KEY = 'jupyterlab-codex:reasoning-effort';
+const SANDBOX_MODE_STORAGE_KEY = 'jupyterlab-codex:sandbox-mode';
+const SETTINGS_OPEN_STORAGE_KEY = 'jupyterlab-codex:settings-open';
+const NOTIFY_ON_DONE_STORAGE_KEY = 'jupyterlab-codex:notify-on-done';
+const NOTIFY_ON_DONE_MIN_SECONDS_STORAGE_KEY = 'jupyterlab-codex:notify-on-done-min-seconds';
+const INCLUDE_ACTIVE_CELL_STORAGE_KEY = 'jupyterlab-codex:include-active-cell';
+const INCLUDE_ACTIVE_CELL_OUTPUT_STORAGE_KEY = 'jupyterlab-codex:include-active-cell-output';
+const SELECTION_PREVIEWS_STORAGE_KEY = 'jupyterlab-codex:selection-previews';
+const MAX_IMAGE_ATTACHMENTS = 4;
+const MAX_IMAGE_ATTACHMENT_BYTES = 4 * 1024 * 1024; // Avoid huge WebSocket payloads.
+const MAX_IMAGE_ATTACHMENT_TOTAL_BYTES = 6 * 1024 * 1024;
+const MAX_ACTIVE_CELL_SELECTION_CHARS = 4000;
+const MAX_ACTIVE_CELL_OUTPUT_CHARS = 20000;
+const MAX_STORED_SELECTION_PREVIEW_THREADS = 80;
+const MAX_STORED_SELECTION_PREVIEW_MESSAGES_PER_THREAD = 10;
+const MAX_SESSION_MESSAGES = 100;
+const SOCKET_MESSAGE_BATCH_SIZE = 8;
+const SOCKET_MESSAGE_MAX_QUEUE = 1200;
+const SOCKET_MESSAGE_FALLBACK_FLUSH_MS = 16;
+const READ_ONLY_PERMISSION_WARNING = 'Code changes are not available with the current permission (Read only).';
+function findModelLabel(model, options) {
+    const match = options.find(option => option.value === model);
+    return match ? match.label : truncateMiddle(model, 32);
+}
+function coerceReasoningEffort(value) {
+    return typeof value === 'string' ? value.trim().toLowerCase() : '';
+}
+function coerceReasoningText(value) {
+    return typeof value === 'string' ? value.trim() : '';
+}
+function coerceReasoningEffortEntry(value) {
+    if (typeof value === 'string') {
+        return coerceReasoningText(value);
+    }
+    if (value && typeof value === 'object' && 'reasoningEffort' in value) {
+        return coerceReasoningText(value.reasoningEffort);
+    }
+    return '';
+}
+function readModelOptions(rawModels) {
+    const catalog = parseModelCatalog(rawModels);
+    return catalog.map(entry => ({ label: entry.displayName, value: entry.model }));
+}
+function getReasoningEffortBars(effort, effortOptions) {
+    if (!effort || effort === '__config__') {
+        return 0;
+    }
+    if (effortOptions.length <= 0) {
+        return 0;
+    }
+    const index = effortOptions.findIndex(option => option.value === effort);
+    if (index < 0) {
+        return 0;
+    }
+    if (effortOptions.length === 1) {
+        return 1;
+    }
+    const scale = MAX_REASONING_EFFORT_BARS - 1;
+    return Math.max(1, Math.min(MAX_REASONING_EFFORT_BARS, Math.floor((index * scale) / (effortOptions.length - 1)) + 1));
+}
+function buildReasoningOptions(rawModels, selectedModel) {
+    const catalog = parseModelCatalog(rawModels);
+    const normalizedModel = selectedModel.trim();
+    const modelByName = catalog.find(item => item.model === normalizedModel);
+    const reasons = modelByName?.reasoningEfforts && modelByName.reasoningEfforts.length > 0
+        ? modelByName.reasoningEfforts
+        : modelByName?.defaultReasoningEffort
+            ? [modelByName.defaultReasoningEffort]
+            : catalog.flatMap(item => item.reasoningEfforts ?? []);
+    const deduped = new Map();
+    for (const reason of reasons) {
+        const label = coerceReasoningEffortEntry(reason);
+        const normalized = coerceReasoningEffort(label);
+        if (!normalized || deduped.has(normalized)) {
+            continue;
+        }
+        deduped.set(normalized, { value: normalized, label: label || normalized });
+    }
+    return Array.from(deduped.values());
+}
+function resolveFallbackReasoningEffort(options) {
+    const medium = options.find(option => coerceReasoningEffort(option.value) === DEFAULT_REASONING_EFFORT);
+    if (medium) {
+        return medium.value;
+    }
+    return options[0]?.value ?? DEFAULT_REASONING_EFFORT;
+}
+function findReasoningLabel(value, options) {
+    const match = options.find(option => option.value === value);
+    if (match) {
+        return match.label;
+    }
+    const raw = coerceReasoningText(value);
+    if (!raw) {
+        return 'Reasoning';
+    }
+    return raw;
+}
+function isKnownSandboxMode(value) {
+    return SANDBOX_OPTIONS.some(option => option.value === value);
+}
+function coerceSandboxMode(value) {
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const normalized = value.trim().toLowerCase().replace(/_/g, '-');
+    return isKnownSandboxMode(normalized) ? normalized : null;
+}
+function coerceNotebookMode(value) {
+    if (value === 'ipynb' || value === 'jupytext_py' || value === 'plain_py' || value === 'unsupported') {
+        return value;
+    }
+    return null;
+}
+function coerceConversationMode(value) {
+    if (value === 'resume' || value === 'fallback') {
+        return value;
+    }
+    return null;
+}
+function inferNotebookModeFromPath(path) {
+    const normalized = (path || '').trim().toLowerCase();
+    if (normalized.endsWith('.ipynb')) {
+        return 'ipynb';
+    }
+    if (normalized.endsWith('.py')) {
+        return 'plain_py';
+    }
+    return 'unsupported';
+}
+function createSessionEventId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    return `${Date.now()}-${Math.floor(Math.random() * 0x100000000).toString(16)}`;
+}
+function hashSelectionPreviewContent(content) {
+    // Stable lightweight hash for local UI-only metadata matching.
+    const normalized = (content || '').replace(/\r\n/g, '\n');
+    let hash = 2166136261;
+    for (let idx = 0; idx < normalized.length; idx += 1) {
+        hash ^= normalized.charCodeAt(idx);
+        hash +=
+            (hash << 1) +
+                (hash << 4) +
+                (hash << 7) +
+                (hash << 8) +
+                (hash << 24);
+    }
+    return (hash >>> 0).toString(16).padStart(8, '0');
+}
+function normalizeStoredSelectionPreviewEntry(value) {
+    if (!value || typeof value !== 'object') {
+        return null;
+    }
+    const raw = value;
+    const contentHash = typeof raw.contentHash === 'string' ? raw.contentHash.trim() : '';
+    if (!contentHash) {
+        return null;
+    }
+    const previewRaw = raw.preview;
+    if (!previewRaw) {
+        return { contentHash, preview: null };
+    }
+    const preview = coerceMessageContextPreview(previewRaw);
+    if (!preview) {
+        return { contentHash, preview: null };
+    }
+    return {
+        contentHash,
+        preview
+    };
+}
+function readStoredSelectionPreviewsByThread() {
+    const raw = safeLocalStorageGet(SELECTION_PREVIEWS_STORAGE_KEY);
+    if (!raw) {
+        return new Map();
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== 'object') {
+            return new Map();
+        }
+        const next = new Map();
+        for (const [threadIdRaw, entriesRaw] of Object.entries(parsed)) {
+            const threadId = typeof threadIdRaw === 'string' ? threadIdRaw.trim() : '';
+            if (!threadId || !Array.isArray(entriesRaw)) {
+                continue;
+            }
+            const entries = [];
+            for (const entryCandidate of entriesRaw) {
+                const entry = normalizeStoredSelectionPreviewEntry(entryCandidate);
+                if (!entry) {
+                    continue;
+                }
+                entries.push(entry);
+            }
+            if (entries.length <= 0) {
+                continue;
+            }
+            next.set(threadId, entries.slice(-MAX_STORED_SELECTION_PREVIEW_MESSAGES_PER_THREAD));
+        }
+        return next;
+    }
+    catch {
+        return new Map();
+    }
+}
+function persistStoredSelectionPreviewsByThread(previewsByThread) {
+    const serialized = {};
+    const entries = Array.from(previewsByThread.entries()).slice(-MAX_STORED_SELECTION_PREVIEW_THREADS);
+    for (const [threadId, threadEntries] of entries) {
+        if (!threadId || !Array.isArray(threadEntries) || threadEntries.length <= 0) {
+            continue;
+        }
+        const normalizedEntries = threadEntries
+            .filter(item => item && typeof item.contentHash === 'string' && item.contentHash)
+            .slice(-MAX_STORED_SELECTION_PREVIEW_MESSAGES_PER_THREAD)
+            .map(item => item.preview
+            ? { contentHash: item.contentHash, preview: item.preview }
+            : { contentHash: item.contentHash });
+        if (normalizedEntries.length > 0) {
+            serialized[threadId] = normalizedEntries;
+        }
+    }
+    safeLocalStorageSet(SELECTION_PREVIEWS_STORAGE_KEY, JSON.stringify(serialized));
+}
+function coerceSelectionPreview(value) {
+    return coerceSelectionPreviewShared(value, {
+        normalize: normalizeSelectionPreviewText,
+        maxChars: MESSAGE_SELECTION_PREVIEW_STORED_MAX_CHARS
+    });
+}
+function coerceMessageContextPreview(value) {
+    return coerceMessageContextPreviewShared(value, {
+        normalize: normalizeSelectionPreviewText,
+        maxChars: MESSAGE_SELECTION_PREVIEW_STORED_MAX_CHARS
+    });
+}
+function coerceSessionHistory(raw) {
+    return coerceSessionHistoryShared(raw, {
+        normalize: normalizeSelectionPreviewText,
+        maxChars: MESSAGE_SELECTION_PREVIEW_STORED_MAX_CHARS
+    });
+}
+function createSession(path, intro, options) {
+    const session = createBaseSession(path, intro, options, {
+        readStoredThreadId,
+        readDefaultModelOption,
+        readDefaultReasoningEffortOption,
+        readDefaultSandboxModeOption,
+        normalizeSystemText
+    });
+    return markLocalizedStartNotice(session);
+}
+function createThreadResetSession(path, sessionKey, threadId) {
+    const session = createBaseThreadResetSession(path, sessionKey, threadId, {
+        readStoredThreadId,
+        readDefaultModelOption,
+        readDefaultReasoningEffortOption,
+        readDefaultSandboxModeOption,
+        normalizeSystemText
+    });
+    return markLocalizedStartNotice(session);
+}
+function normalizeSystemText(role, text) {
+    if (role !== 'system') {
+        return text;
+    }
+    return normalizeSessionStartedNotice(text) ?? text;
+}
+function readStoredModel() {
+    return safeLocalStorageGet(MODEL_STORAGE_KEY) ?? '';
+}
+function readStoredCommandPath() {
+    return safeLocalStorageGet(COMMAND_PATH_STORAGE_KEY) ?? '';
+}
+function readStoredAutoSave() {
+    return (safeLocalStorageGet(AUTO_SAVE_STORAGE_KEY) ?? 'true') !== 'false';
+}
+function readStoredIncludeActiveCell() {
+    return (safeLocalStorageGet(INCLUDE_ACTIVE_CELL_STORAGE_KEY) ?? 'true') !== 'false';
+}
+function readStoredIncludeActiveCellOutput() {
+    return (safeLocalStorageGet(INCLUDE_ACTIVE_CELL_OUTPUT_STORAGE_KEY) ?? 'true') !== 'false';
+}
+function readStoredReasoningEffort() {
+    try {
+        const stored = safeLocalStorageGet(REASONING_STORAGE_KEY) ?? '';
+        if (stored === '__config__') {
+            return '__config__';
+        }
+        const normalized = stored.trim();
+        return normalized ? normalized : '__config__';
+    }
+    catch {
+        return '__config__';
+    }
+}
+function readStoredSandboxMode() {
+    const stored = safeLocalStorageGet(SANDBOX_MODE_STORAGE_KEY) ?? '';
+    return isKnownSandboxMode(stored) ? stored : SANDBOX_OPTIONS[0].value;
+}
+function persistModel(model) {
+    safeLocalStorageSet(MODEL_STORAGE_KEY, model);
+}
+function persistCommandPath(commandPath) {
+    safeLocalStorageSet(COMMAND_PATH_STORAGE_KEY, commandPath);
+}
+function persistAutoSave(enabled) {
+    safeLocalStorageSet(AUTO_SAVE_STORAGE_KEY, enabled ? 'true' : 'false');
+}
+function persistIncludeActiveCell(enabled) {
+    safeLocalStorageSet(INCLUDE_ACTIVE_CELL_STORAGE_KEY, enabled ? 'true' : 'false');
+}
+function persistIncludeActiveCellOutput(enabled) {
+    safeLocalStorageSet(INCLUDE_ACTIVE_CELL_OUTPUT_STORAGE_KEY, enabled ? 'true' : 'false');
+}
+function persistReasoningEffort(value) {
+    safeLocalStorageSet(REASONING_STORAGE_KEY, value);
+}
+function persistSandboxMode(value) {
+    safeLocalStorageSet(SANDBOX_MODE_STORAGE_KEY, value);
+}
+function readStoredSettingsOpen() {
+    return (safeLocalStorageGet(SETTINGS_OPEN_STORAGE_KEY) ?? 'false') === 'true';
+}
+function persistSettingsOpen(enabled) {
+    safeLocalStorageSet(SETTINGS_OPEN_STORAGE_KEY, enabled ? 'true' : 'false');
+}
+function readStoredNotifyOnDone() {
+    return (safeLocalStorageGet(NOTIFY_ON_DONE_STORAGE_KEY) ?? 'true') === 'true';
+}
+function persistNotifyOnDone(enabled) {
+    safeLocalStorageSet(NOTIFY_ON_DONE_STORAGE_KEY, enabled ? 'true' : 'false');
+}
+function readStoredNotifyOnDoneMinSeconds() {
+    const raw = safeLocalStorageGet(NOTIFY_ON_DONE_MIN_SECONDS_STORAGE_KEY);
+    if (raw == null) {
+        return 30;
+    }
+    const parsed = Number(raw);
+    return Number.isFinite(parsed) ? Math.max(0, Math.trunc(parsed)) : 0;
+}
+function persistNotifyOnDoneMinSeconds(seconds) {
+    safeLocalStorageSet(NOTIFY_ON_DONE_MIN_SECONDS_STORAGE_KEY, String(Math.max(0, Math.trunc(seconds))));
+}
+function CodexChat(props) {
+    const [sessions, setSessions] = useState(new Map());
+    const sessionsRef = useRef(new Map());
+    const [currentNotebookPath, setCurrentNotebookPath] = useState('');
+    const currentNotebookPathRef = useRef('');
+    const [currentNotebookSessionKey, setCurrentNotebookSessionKey] = useState('');
+    const currentNotebookSessionKeyRef = useRef('');
+    const [cliDefaults, setCliDefaults] = useState({ model: null, reasoningEffort: null });
+    const [modelOptions, setModelOptions] = useState(() => FALLBACK_MODEL_OPTIONS);
+    const [modelOption, setModelOption] = useState(() => readDefaultModelOption());
+    const [reasoningEffort, setReasoningEffort] = useState(() => readDefaultReasoningEffortOption());
+    const [sandboxMode, setSandboxMode] = useState(() => readDefaultSandboxModeOption());
+    const [commandPath, setCommandPath] = useState(() => readStoredCommandPath());
+    const [autoSaveBeforeSend, setAutoSaveBeforeSend] = useState(() => readStoredAutoSave());
+    const [includeActiveCell, setIncludeActiveCell] = useState(() => readStoredIncludeActiveCell());
+    const [includeActiveCellOutput, setIncludeActiveCellOutput] = useState(() => readStoredIncludeActiveCellOutput());
+    const [currentDocumentIsNotebookEditor, setCurrentDocumentIsNotebookEditor] = useState(false);
+    const [notifyOnDone, setNotifyOnDone] = useState(() => readStoredNotifyOnDone());
+    const [notifyOnDoneMinSeconds, setNotifyOnDoneMinSeconds] = useState(() => readStoredNotifyOnDoneMinSeconds());
+    const [settingsOpen, setSettingsOpen] = useState(() => readStoredSettingsOpen());
+    const [input, setInput] = useState('');
+    const [pendingImages, setPendingImages] = useState([]);
+    const pendingImagesRef = useRef([]);
+    const inputRef = useRef('');
+    const inputDraftsRef = useRef(new Map());
+    const { socketRef: wsRef, socketConnected, isReconnecting, reconnect: reconnectSocket } = useCodexSocket({
+        onOpen: onSocketOpen,
+        onClose: onSocketClose,
+        onMessage: onSocketMessage
+    });
+    const [isAtBottom, setIsAtBottom] = useState(true);
+    const [modelMenuOpen, setModelMenuOpen] = useState(false);
+    const [reasoningMenuOpen, setReasoningMenuOpen] = useState(false);
+    const [usagePopoverOpen, setUsagePopoverOpen] = useState(false);
+    const [permissionMenuOpen, setPermissionMenuOpen] = useState(false);
+    const [contextPopoverOpen, setContextPopoverOpen] = useState(false);
+    const [isPlainPyRunInProgress, setIsPlainPyRunInProgress] = useState(false);
+    const [cellAttachmentPopoverOpen, setCellAttachmentPopoverOpen] = useState(false);
+    const [selectionPopover, setSelectionPopover] = useState(null);
+    const storedSelectionPreviewsRef = useRef(readStoredSelectionPreviewsByThread());
+    const previousSessionThreadIdsRef = useRef(new Map());
+    const [rateLimits, setRateLimits] = useState(null);
+    const runToSessionKeyRef = useRef(new Map());
+    const activeSessionKeyByPathRef = useRef(new Map());
+    const sessionThreadSyncIdRef = useRef(createSessionEventId());
+    const lastRateLimitsRefreshRef = useRef(0);
+    const pendingRefreshPathsRef = useRef(new Set());
+    const activeDocumentWidgetRef = useRef(null);
+    const socketMessageQueueRef = useRef([]);
+    const socketMessageFlushTimerRef = useRef(null);
+    const socketMessageFlushRafRef = useRef(null);
+    const lastActiveCellAttachmentSignatureRef = useRef(new Map());
+    const notifyOnDoneRef = useRef(notifyOnDone);
+    const notifyOnDoneMinSecondsRef = useRef(notifyOnDoneMinSeconds);
+    const scrollRef = useRef(null);
+    const endRef = useRef(null);
+    const modelMenuWrapRef = useRef(null);
+    const reasoningMenuWrapRef = useRef(null);
+    const usageMenuWrapRef = useRef(null);
+    const permissionMenuWrapRef = useRef(null);
+    const contextMenuWrapRef = useRef(null);
+    const modelBtnRef = useRef(null);
+    const modelPopoverRef = useRef(null);
+    const reasoningBtnRef = useRef(null);
+    const reasoningPopoverRef = useRef(null);
+    const usageBtnRef = useRef(null);
+    const usagePopoverRef = useRef(null);
+    const permissionBtnRef = useRef(null);
+    const permissionPopoverRef = useRef(null);
+    const contextBtnRef = useRef(null);
+    const contextPopoverRef = useRef(null);
+    const plainPyRunSessionKeyRef = useRef('');
+    const cellAttachmentAnchorRef = useRef(null);
+    const cellAttachmentPopoverRef = useRef(null);
+    const cellAttachmentPopoverCloseTimerRef = useRef(null);
+    const contextPopoverCloseTimerRef = useRef(null);
+    const selectionPopoverAnchorRef = useRef(null);
+    const selectionPopoverRef = useRef(null);
+    const notebookLabelRef = useRef(null);
+    const [isNotebookLabelTruncated, setIsNotebookLabelTruncated] = useState(false);
+    const composerTextareaRef = useRef(null);
+    const storedThreadCount = useMemo(() => getStoredSessionThreadCount(), [sessions]);
+    const selectedModel = modelOption === '__config__' ? '' : modelOption;
+    const autoModel = cliDefaults.model;
+    const autoReasoningEffort = cliDefaults.reasoningEffort;
+    const reasoningModel = modelOption === '__config__' ? (autoModel || '') : modelOption;
+    const reasoningOptions = useMemo(() => buildReasoningOptions(cliDefaults.availableModels, reasoningModel), [cliDefaults.availableModels, reasoningModel]);
+    useEffect(() => {
+        const dynamicModelOptions = readModelOptions(cliDefaults.availableModels);
+        setModelOptions(dynamicModelOptions);
+    }, [cliDefaults.availableModels]);
+    useEffect(() => {
+        if (reasoningEffort === '__config__') {
+            return;
+        }
+        if (reasoningOptions.length > 0 && !reasoningOptions.some(option => option.value === reasoningEffort)) {
+            setCurrentSessionReasoningEffort('__config__');
+        }
+    }, [reasoningEffort, reasoningOptions]);
+    useEffect(() => {
+        if (reasoningEffort !== '__config__') {
+            return;
+        }
+        if (coerceReasoningEffort(autoReasoningEffort || '')) {
+            return;
+        }
+        const fallbackReasoning = resolveFallbackReasoningEffort(reasoningOptions);
+        setCurrentSessionReasoningEffort(fallbackReasoning);
+    }, [reasoningEffort, autoReasoningEffort, reasoningOptions]);
+    useEffect(() => {
+        if (modelOption === '__config__') {
+            return;
+        }
+        if (!modelOptions.some(option => option.value === modelOption)) {
+            setCurrentSessionModelOption('__config__');
+        }
+    }, [modelOption, modelOptions]);
+    useEffect(() => {
+        if (modelOption !== '__config__') {
+            return;
+        }
+        if ((autoModel || '').trim()) {
+            return;
+        }
+        const firstModel = modelOptions[0]?.value;
+        if (!firstModel) {
+            return;
+        }
+        setCurrentSessionModelOption(firstModel);
+    }, [modelOption, autoModel, modelOptions]);
+    function setInputDraftForSession(sessionKey, value) {
+        if (!sessionKey) {
+            return;
+        }
+        const nextDrafts = new Map(inputDraftsRef.current);
+        if (value) {
+            nextDrafts.set(sessionKey, value);
+        }
+        else {
+            nextDrafts.delete(sessionKey);
+        }
+        inputDraftsRef.current = nextDrafts;
+    }
+    function saveCurrentInputDraft(value) {
+        const sessionKey = currentNotebookSessionKeyRef.current || '';
+        if (!sessionKey) {
+            return;
+        }
+        setInputDraftForSession(sessionKey, value);
+    }
+    function clearInputForCurrentSession() {
+        const sessionKey = currentNotebookSessionKeyRef.current || '';
+        if (!sessionKey) {
+            setInput('');
+            inputRef.current = '';
+            return;
+        }
+        saveCurrentInputDraft('');
+        setInput('');
+        inputRef.current = '';
+    }
+    function updateInput(nextValue) {
+        saveCurrentInputDraft(nextValue);
+        setInput(nextValue);
+        inputRef.current = nextValue;
+    }
+    function restoreInput(sessionKey) {
+        const restoredInput = sessionKey ? inputDraftsRef.current.get(sessionKey) || '' : '';
+        inputRef.current = restoredInput;
+        setInput(restoredInput);
+    }
+    useEffect(() => {
+        inputRef.current = input;
+    }, [input]);
+    useEffect(() => {
+        sessionsRef.current = sessions;
+        currentNotebookSessionKeyRef.current = currentNotebookSessionKey;
+    }, [sessions]);
+    useEffect(() => {
+        currentNotebookSessionKeyRef.current = currentNotebookSessionKey;
+        persistStoredSessionThreads(sessions);
+    }, [sessions, currentNotebookSessionKey]);
+    useEffect(() => {
+        const sessionKey = currentNotebookSessionKey || '';
+        if (!sessionKey) {
+            return;
+        }
+        const session = sessions.get(sessionKey);
+        if (!session) {
+            return;
+        }
+        setModelOption(prev => (prev === session.selectedModelOption ? prev : session.selectedModelOption));
+        setReasoningEffort(prev => prev === session.selectedReasoningEffort ? prev : session.selectedReasoningEffort);
+        setSandboxMode(prev => (prev === session.selectedSandboxMode ? prev : session.selectedSandboxMode));
+    }, [currentNotebookSessionKey, sessions]);
+    useEffect(() => {
+        pendingImagesRef.current = pendingImages;
+    }, [pendingImages]);
+    useEffect(() => {
+        return () => {
+            // Avoid leaking blob URLs if the panel unmounts.
+            for (const image of pendingImagesRef.current) {
+                URL.revokeObjectURL(image.previewUrl);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        persistModel(selectedModel);
+    }, [selectedModel]);
+    useEffect(() => {
+        persistAutoSave(autoSaveBeforeSend);
+    }, [autoSaveBeforeSend]);
+    useEffect(() => {
+        persistIncludeActiveCell(includeActiveCell);
+    }, [includeActiveCell]);
+    useEffect(() => {
+        // If the user enables "Include active cell" for the first time, default output to ON as well.
+        if (includeActiveCell && !includeActiveCellOutput && !hasStoredValue(INCLUDE_ACTIVE_CELL_OUTPUT_STORAGE_KEY)) {
+            setIncludeActiveCellOutput(true);
+        }
+    }, [includeActiveCell, includeActiveCellOutput]);
+    useEffect(() => {
+        persistIncludeActiveCellOutput(includeActiveCellOutput);
+    }, [includeActiveCellOutput]);
+    useEffect(() => {
+        persistCommandPath(commandPath);
+    }, [commandPath]);
+    useEffect(() => {
+        persistReasoningEffort(reasoningEffort);
+    }, [reasoningEffort]);
+    useEffect(() => {
+        persistSandboxMode(sandboxMode);
+    }, [sandboxMode]);
+    useEffect(() => {
+        persistSettingsOpen(settingsOpen);
+    }, [settingsOpen]);
+    useEffect(() => {
+        notifyOnDoneRef.current = notifyOnDone;
+        persistNotifyOnDone(notifyOnDone);
+    }, [notifyOnDone]);
+    useEffect(() => {
+        const normalized = Number.isFinite(notifyOnDoneMinSeconds) ? Math.max(0, Math.floor(notifyOnDoneMinSeconds)) : 0;
+        notifyOnDoneMinSecondsRef.current = normalized;
+        persistNotifyOnDoneMinSeconds(normalized);
+    }, [notifyOnDoneMinSeconds]);
+    useEffect(() => {
+        if (!modelMenuOpen && !reasoningMenuOpen && !usagePopoverOpen && !permissionMenuOpen && !contextPopoverOpen) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (!target) {
+                return;
+            }
+            const inModel = modelMenuWrapRef.current?.contains(target) ?? false;
+            const inReasoning = reasoningMenuWrapRef.current?.contains(target) ?? false;
+            const inUsage = usageMenuWrapRef.current?.contains(target) ?? false;
+            const inPermission = permissionMenuWrapRef.current?.contains(target) ?? false;
+            const inContext = contextMenuWrapRef.current?.contains(target) ?? false;
+            const inModelPopover = modelPopoverRef.current?.contains(target) ?? false;
+            const inReasoningPopover = reasoningPopoverRef.current?.contains(target) ?? false;
+            const inUsagePopover = usagePopoverRef.current?.contains(target) ?? false;
+            const inPermissionPopover = permissionPopoverRef.current?.contains(target) ?? false;
+            const inContextPopover = contextPopoverRef.current?.contains(target) ?? false;
+            if (inModel ||
+                inReasoning ||
+                inUsage ||
+                inPermission ||
+                inContext ||
+                inModelPopover ||
+                inReasoningPopover ||
+                inUsagePopover ||
+                inPermissionPopover ||
+                inContextPopover) {
+                return;
+            }
+            setModelMenuOpen(false);
+            setReasoningMenuOpen(false);
+            setUsagePopoverOpen(false);
+            setPermissionMenuOpen(false);
+            setContextPopoverOpen(false);
+        };
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            event.preventDefault();
+            setModelMenuOpen(false);
+            setReasoningMenuOpen(false);
+            setUsagePopoverOpen(false);
+            setPermissionMenuOpen(false);
+            setContextPopoverOpen(false);
+        };
+        window.addEventListener('pointerdown', onPointerDown, true);
+        window.addEventListener('keydown', onKeyDown);
+        return () => {
+            window.removeEventListener('pointerdown', onPointerDown, true);
+            window.removeEventListener('keydown', onKeyDown);
+        };
+    }, [modelMenuOpen, reasoningMenuOpen, usagePopoverOpen, permissionMenuOpen, contextPopoverOpen]);
+    useEffect(() => {
+        if (!selectionPopover) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (!target) {
+                return;
+            }
+            const inAnchor = selectionPopoverAnchorRef.current?.contains(target) ?? false;
+            const inPopover = selectionPopoverRef.current?.contains(target) ?? false;
+            if (inAnchor || inPopover) {
+                return;
+            }
+            setSelectionPopover(null);
+            selectionPopoverAnchorRef.current = null;
+        };
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            event.preventDefault();
+            setSelectionPopover(null);
+            selectionPopoverAnchorRef.current = null;
+        };
+        window.addEventListener('pointerdown', onPointerDown, true);
+        window.addEventListener('keydown', onKeyDown);
+        return () => {
+            window.removeEventListener('pointerdown', onPointerDown, true);
+            window.removeEventListener('keydown', onKeyDown);
+        };
+    }, [selectionPopover]);
+    function closeSelectionPopover() {
+        setSelectionPopover(null);
+        selectionPopoverAnchorRef.current = null;
+    }
+    function clearCellAttachmentPopoverCloseTimer() {
+        if (cellAttachmentPopoverCloseTimerRef.current !== null) {
+            window.clearTimeout(cellAttachmentPopoverCloseTimerRef.current);
+            cellAttachmentPopoverCloseTimerRef.current = null;
+        }
+    }
+    function clearContextPopoverCloseTimer() {
+        if (contextPopoverCloseTimerRef.current !== null) {
+            window.clearTimeout(contextPopoverCloseTimerRef.current);
+            contextPopoverCloseTimerRef.current = null;
+        }
+    }
+    function openCellAttachmentPopover() {
+        clearCellAttachmentPopoverCloseTimer();
+        if (!showCellAttachmentBadge) {
+            setCellAttachmentPopoverOpen(false);
+            return;
+        }
+        setCellAttachmentPopoverOpen(true);
+    }
+    function scheduleCloseCellAttachmentPopover() {
+        clearCellAttachmentPopoverCloseTimer();
+        cellAttachmentPopoverCloseTimerRef.current = window.setTimeout(() => {
+            setCellAttachmentPopoverOpen(false);
+            cellAttachmentPopoverCloseTimerRef.current = null;
+        }, 90);
+    }
+    function openContextPopover() {
+        clearContextPopoverCloseTimer();
+        if (!hasContextUsageSnapshot) {
+            setContextPopoverOpen(false);
+            return;
+        }
+        setContextPopoverOpen(true);
+    }
+    function scheduleCloseContextPopover() {
+        clearContextPopoverCloseTimer();
+        contextPopoverCloseTimerRef.current = window.setTimeout(() => {
+            setContextPopoverOpen(false);
+            contextPopoverCloseTimerRef.current = null;
+        }, 90);
+    }
+    function handleContextPopoverBlur(event) {
+        const nextFocused = event.relatedTarget;
+        const inAnchor = nextFocused ? contextMenuWrapRef.current?.contains(nextFocused) ?? false : false;
+        const inPopover = nextFocused ? contextPopoverRef.current?.contains(nextFocused) ?? false : false;
+        if (inAnchor || inPopover) {
+            return;
+        }
+        scheduleCloseContextPopover();
+    }
+    function handleCellAttachmentBlur(event) {
+        const nextFocused = event.relatedTarget;
+        const inAnchor = nextFocused ? cellAttachmentAnchorRef.current?.contains(nextFocused) ?? false : false;
+        const inPopover = nextFocused ? cellAttachmentPopoverRef.current?.contains(nextFocused) ?? false : false;
+        if (inAnchor || inPopover) {
+            return;
+        }
+        scheduleCloseCellAttachmentPopover();
+    }
+    function toggleSelectionPopover(messageId, preview, event) {
+        if (!messageId) {
+            return;
+        }
+        if (selectionPopover?.messageId === messageId) {
+            closeSelectionPopover();
+            return;
+        }
+        selectionPopoverAnchorRef.current = event.currentTarget;
+        setSelectionPopover({ messageId, preview });
+    }
+    function commitStoredSelectionPreviews(nextByThread) {
+        const trimmed = new Map();
+        const entries = Array.from(nextByThread.entries()).slice(-MAX_STORED_SELECTION_PREVIEW_THREADS);
+        for (const [threadId, threadEntries] of entries) {
+            if (!threadId || !Array.isArray(threadEntries) || threadEntries.length <= 0) {
+                continue;
+            }
+            trimmed.set(threadId, threadEntries.slice(-MAX_STORED_SELECTION_PREVIEW_MESSAGES_PER_THREAD));
+        }
+        storedSelectionPreviewsRef.current = trimmed;
+        persistStoredSelectionPreviewsByThread(trimmed);
+    }
+    function appendStoredSelectionPreviewEntry(threadId, content, preview) {
+        const normalizedThreadId = (threadId || '').trim();
+        if (!normalizedThreadId) {
+            return;
+        }
+        const hash = hashSelectionPreviewContent(content || '');
+        if (!hash) {
+            return;
+        }
+        const next = new Map(storedSelectionPreviewsRef.current);
+        const existing = next.get(normalizedThreadId) ?? [];
+        const entry = {
+            contentHash: hash,
+            preview: preview ?? null
+        };
+        next.delete(normalizedThreadId);
+        next.set(normalizedThreadId, [...existing, entry].slice(-MAX_STORED_SELECTION_PREVIEW_MESSAGES_PER_THREAD));
+        commitStoredSelectionPreviews(next);
+    }
+    function migrateStoredSelectionPreviewEntries(fromThreadId, toThreadId) {
+        const from = (fromThreadId || '').trim();
+        const to = (toThreadId || '').trim();
+        if (!from || !to || from === to) {
+            return;
+        }
+        const current = storedSelectionPreviewsRef.current;
+        const sourceEntries = current.get(from);
+        if (!sourceEntries || sourceEntries.length <= 0) {
+            return;
+        }
+        const next = new Map(current);
+        const targetEntries = next.get(to) ?? [];
+        next.delete(from);
+        next.delete(to);
+        next.set(to, [...targetEntries, ...sourceEntries].slice(-MAX_STORED_SELECTION_PREVIEW_MESSAGES_PER_THREAD));
+        commitStoredSelectionPreviews(next);
+    }
+    function clearStoredSelectionPreviews() {
+        storedSelectionPreviewsRef.current = new Map();
+        safeLocalStorageRemove(SELECTION_PREVIEWS_STORAGE_KEY);
+    }
+    function replaceSessions(next) {
+        sessionsRef.current = next;
+        setSessions(next);
+    }
+    function trimSessionMessages(messages) {
+        if (messages.length <= MAX_SESSION_MESSAGES) {
+            return messages;
+        }
+        return messages.slice(messages.length - MAX_SESSION_MESSAGES);
+    }
+    function updateSessions(updater) {
+        setSessions(prev => {
+            const next = updater(prev);
+            sessionsRef.current = next;
+            return next;
+        });
+    }
+    function ensureSession(path, sessionKey) {
+        const normalizedPath = path || '';
+        const effectiveSessionKey = sessionKey || resolveCurrentSessionKey(normalizedPath);
+        const existing = sessionsRef.current.get(effectiveSessionKey);
+        if (existing) {
+            return existing;
+        }
+        const created = createSession(normalizedPath, `Session started`, { sessionKey: effectiveSessionKey });
+        const seeded = {
+            ...created,
+            selectedModelOption: modelOption,
+            selectedReasoningEffort: reasoningEffort,
+            selectedSandboxMode: sandboxMode,
+        };
+        const next = new Map(sessionsRef.current);
+        next.set(effectiveSessionKey, seeded);
+        activeSessionKeyByPathRef.current.set(normalizedPath, effectiveSessionKey);
+        replaceSessions(next);
+        return seeded;
+    }
+    function updateSessionSelection(sessionKey, selection) {
+        const targetSessionKey = sessionKey || currentNotebookSessionKeyRef.current || '';
+        if (!targetSessionKey) {
+            return;
+        }
+        updateSessions(prev => {
+            const next = new Map(prev);
+            const existing = next.get(targetSessionKey) ?? createSession('', `Session started`, { sessionKey: targetSessionKey });
+            const selectedModelOption = selection.selectedModelOption ?? existing.selectedModelOption;
+            const selectedReasoningEffort = selection.selectedReasoningEffort ?? existing.selectedReasoningEffort;
+            const selectedSandboxMode = selection.selectedSandboxMode ?? existing.selectedSandboxMode;
+            const effectiveSandboxMode = selection.effectiveSandboxMode ?? existing.effectiveSandboxMode;
+            if (selectedModelOption === existing.selectedModelOption &&
+                selectedReasoningEffort === existing.selectedReasoningEffort &&
+                selectedSandboxMode === existing.selectedSandboxMode &&
+                effectiveSandboxMode === existing.effectiveSandboxMode) {
+                return prev;
+            }
+            next.set(targetSessionKey, {
+                ...existing,
+                selectedModelOption,
+                selectedReasoningEffort,
+                selectedSandboxMode,
+                effectiveSandboxMode,
+            });
+            return next;
+        });
+    }
+    function setCurrentSessionModelOption(nextValue) {
+        setModelOption(nextValue);
+        updateSessionSelection(currentNotebookSessionKeyRef.current || '', { selectedModelOption: nextValue });
+    }
+    function setCurrentSessionReasoningEffort(nextValue) {
+        setReasoningEffort(nextValue);
+        updateSessionSelection(currentNotebookSessionKeyRef.current || '', { selectedReasoningEffort: nextValue });
+    }
+    function setCurrentSessionSandboxMode(nextValue) {
+        setSandboxMode(nextValue);
+        updateSessionSelection(currentNotebookSessionKeyRef.current || '', { selectedSandboxMode: nextValue });
+    }
+    function requestRateLimitsRefresh(force = false) {
+        const socket = wsRef.current;
+        if (!socket || socket.readyState !== WebSocket.OPEN) {
+            return;
+        }
+        const now = Date.now();
+        if (!force && now - lastRateLimitsRefreshRef.current < 15000) {
+            return;
+        }
+        lastRateLimitsRefreshRef.current = now;
+        safeSocketSend(JSON.stringify({ type: 'refresh_rate_limits' }));
+    }
+    function safeSocketSend(payload) {
+        const socket = wsRef.current;
+        if (!socket || socket.readyState !== WebSocket.OPEN) {
+            return false;
+        }
+        try {
+            socket.send(payload);
+        }
+        catch {
+            return false;
+        }
+        return true;
+    }
+    function toggleUsagePopover() {
+        setUsagePopoverOpen(open => {
+            const next = !open;
+            if (next) {
+                requestRateLimitsRefresh();
+            }
+            return next;
+        });
+        setModelMenuOpen(false);
+        setReasoningMenuOpen(false);
+        setPermissionMenuOpen(false);
+        setContextPopoverOpen(false);
+    }
+    async function updateNotifyOnDone(enabled) {
+        if (!enabled) {
+            setNotifyOnDone(false);
+            return;
+        }
+        const permission = getBrowserNotificationPermission();
+        const systemSessionKey = currentNotebookSessionKeyRef.current || '';
+        if (permission === 'unsupported') {
+            appendMessage(systemSessionKey, 'system', 'Browser notifications are not supported in this environment.');
+            setNotifyOnDone(false);
+            return;
+        }
+        if (permission === 'granted') {
+            setNotifyOnDone(true);
+            return;
+        }
+        if (permission === 'denied') {
+            appendMessage(systemSessionKey, 'system', 'Browser notifications are blocked for this site. Allow notifications in browser settings to enable this option.');
+            setNotifyOnDone(false);
+            return;
+        }
+        try {
+            const requested = await window.Notification.requestPermission();
+            if (requested === 'granted') {
+                setNotifyOnDone(true);
+                return;
+            }
+            if (requested === 'denied') {
+                appendMessage(systemSessionKey, 'system', 'Browser notification permission was denied. Allow notifications in browser settings to enable this option.');
+            }
+            setNotifyOnDone(false);
+        }
+        catch {
+            appendMessage(systemSessionKey, 'system', 'Failed to request browser notification permission.');
+            setNotifyOnDone(false);
+        }
+    }
+    function getRunDurationMs(sessionKey) {
+        if (!sessionKey) {
+            return null;
+        }
+        const session = sessionsRef.current.get(sessionKey);
+        if (!session || typeof session.runStartedAt !== 'number' || !Number.isFinite(session.runStartedAt)) {
+            return null;
+        }
+        return Math.max(0, Date.now() - session.runStartedAt);
+    }
+    function formatElapsedForNotification(elapsedMs) {
+        const totalSeconds = Math.round(Math.max(0, elapsedMs) / 1000);
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+        if (minutes === 0) {
+            return `${totalSeconds}s`;
+        }
+        return `${minutes}m ${seconds}s`;
+    }
+    function notifyRunDone(sessionKey, notebookPath, cancelled, exitCode) {
+        if (!notifyOnDoneRef.current) {
+            return;
+        }
+        const permission = getBrowserNotificationPermission();
+        if (permission !== 'granted' || typeof window === 'undefined' || typeof window.Notification === 'undefined') {
+            return;
+        }
+        const elapsedMs = getRunDurationMs(sessionKey);
+        const minimumMs = notifyOnDoneMinSecondsRef.current * 1000;
+        if (minimumMs > 0 && (elapsedMs === null || elapsedMs < minimumMs)) {
+            return;
+        }
+        const parsed = parseSessionKey(sessionKey);
+        const pathLabel = parsed.path || notebookPath || currentNotebookPathRef.current || 'current notebook';
+        const pathSummary = truncateMiddle(pathLabel, 120);
+        const elapsedText = elapsedMs === null ? '' : ` (${formatElapsedForNotification(elapsedMs)} elapsed)`;
+        const body = cancelled
+            ? `Run cancelled in ${pathSummary}${elapsedText}`
+            : exitCode === null || exitCode === 0
+                ? `Run completed in ${pathSummary}${elapsedText}`
+                : `Run failed (exit ${exitCode}) in ${pathSummary}${elapsedText}`;
+        try {
+            const notification = new window.Notification('Codex run finished', {
+                body,
+                tag: sessionKey ? `codex-done-${sessionKey}` : undefined
+            });
+            window.setTimeout(() => notification.close(), 12000);
+        }
+        catch {
+            // Ignore failures; completion is still shown in the panel.
+        }
+    }
+    function emitSessionThreadEvent(sessionKey, notebookPath, threadId) {
+        const source = sessionThreadSyncIdRef.current;
+        const payload = buildSessionThreadSyncEvent({
+            sessionKey,
+            notebookPath,
+            threadId,
+            source,
+            createEventId: createSessionEventId
+        });
+        writeSessionThreadSyncEvent(payload);
+    }
+    function sendStartSession(session, notebookPath, sessionKey, options) {
+        if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+            return;
+        }
+        const normalizedCommandPath = commandPath.trim();
+        safeSocketSend(JSON.stringify(buildStartSessionMessage({
+            sessionId: session.threadId,
+            sessionContextKey: sessionKey,
+            notebookPath,
+            forceNewThread: options?.forceNewThread === true,
+            commandPath: normalizedCommandPath || undefined
+        })));
+    }
+    function syncEffectiveSandboxFromStatus(sessionKey, rawMode) {
+        if (!sessionKey) {
+            return;
+        }
+        const nextMode = coerceSandboxMode(rawMode);
+        if (!nextMode) {
+            return;
+        }
+        updateSessionSelection(sessionKey, { effectiveSandboxMode: nextMode });
+    }
+    function deleteAllSessionsOnServer() {
+        if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+            return false;
+        }
+        const sent = safeSocketSend(JSON.stringify(buildDeleteAllSessionsMessage()));
+        if (sent) {
+            return true;
+        }
+        return false;
+    }
+    function setSessionRunState(sessionKey, runState, runId) {
+        if (!sessionKey) {
+            return;
+        }
+        const targetSessionKey = sessionKey.trim();
+        const isRunStart = runState === 'running';
+        const isRunDone = runState === 'ready';
+        let shouldClearPythonRunState = false;
+        const now = Date.now();
+        updateSessions(prev => {
+            const next = new Map(prev);
+            const existing = next.get(targetSessionKey) ?? createSession('', `Session started`, { sessionKey: targetSessionKey });
+            const session = next.get(targetSessionKey) ?? existing;
+            let messages = session.messages;
+            let runStartedAt = session.runStartedAt;
+            let activeRunId = session.activeRunId;
+            const wasRunning = session.runState === 'running';
+            const hasActiveRunId = Boolean(activeRunId && activeRunId.trim());
+            if (isRunStart && !runId && wasRunning && hasActiveRunId) {
+                return prev;
+            }
+            if (isRunDone && wasRunning && hasActiveRunId) {
+                if (!runId || runId !== activeRunId) {
+                    return prev;
+                }
+            }
+            if (isRunStart) {
+                if (!wasRunning) {
+                    runStartedAt = now;
+                }
+                if (runId) {
+                    activeRunId = runId;
+                }
+            }
+            if (isRunDone && wasRunning) {
+                const startedAt = runStartedAt;
+                if (typeof startedAt === 'number' && Number.isFinite(startedAt)) {
+                    const elapsedMs = Math.max(0, now - startedAt);
+                    messages = [...messages, { kind: 'run-divider', id: crypto.randomUUID(), elapsedMs }];
+                }
+                runStartedAt = null;
+                activeRunId = null;
+                shouldClearPythonRunState = true;
+            }
+            else if (isRunDone) {
+                activeRunId = null;
+            }
+            const progress = session.runState === runState ? session.progress : '';
+            const progressKind = session.runState === runState ? session.progressKind : '';
+            next.set(sessionKey, {
+                ...session,
+                messages: trimSessionMessages(messages),
+                runState,
+                activeRunId,
+                runStartedAt,
+                progress,
+                progressKind
+            });
+            return next;
+        });
+        if (isRunStart && plainPyRunSessionKeyRef.current === targetSessionKey) {
+            setIsPlainPyRunInProgress(true);
+        }
+        else if (isRunDone && shouldClearPythonRunState && plainPyRunSessionKeyRef.current === targetSessionKey) {
+            plainPyRunSessionKeyRef.current = '';
+            setIsPlainPyRunInProgress(false);
+        }
+    }
+    function setSessionProgress(sessionKey, progress, kind = '') {
+        const targetSessionKey = sessionKey || currentNotebookSessionKeyRef.current || '';
+        if (!targetSessionKey) {
+            return;
+        }
+        const nextProgress = progress ? truncateMiddle(progress, 260) : '';
+        const nextKind = nextProgress ? kind : '';
+        updateSessions(prev => {
+            const next = new Map(prev);
+            const session = next.get(targetSessionKey) ?? createSession('', `Session started`, { sessionKey: targetSessionKey });
+            if (session.progress === nextProgress && session.progressKind === nextKind) {
+                return prev;
+            }
+            next.set(targetSessionKey, { ...session, progress: nextProgress, progressKind: nextKind });
+            return next;
+        });
+    }
+    function appendActivityItem(sessionKey, item) {
+        const targetSessionKey = sessionKey || currentNotebookSessionKeyRef.current || '';
+        if (!targetSessionKey) {
+            return;
+        }
+        updateSessions(prev => {
+            const next = new Map(prev);
+            const session = next.get(targetSessionKey) ?? createSession('', `Session started`, { sessionKey: targetSessionKey });
+            const entry = { id: crypto.randomUUID(), ts: Date.now(), ...item };
+            const extractCommandKey = (detail) => {
+                const raw = (detail || '').trim();
+                if (!raw) {
+                    return '';
+                }
+                // Completed entries may include extra lines (e.g. exit code).
+                return raw.split('\n')[0].trim();
+            };
+            const normalizePhaseBaseTitle = (title) => {
+                const raw = (title || '').trim();
+                if (!raw) {
+                    return '';
+                }
+                return raw.replace(/\s+(started|completed)\s*$/i, '').trim();
+            };
+            const extractGenericKey = (title, detail) => {
+                const base = normalizePhaseBaseTitle(title);
+                const firstLine = (detail || '').trim().split('\n')[0].trim();
+                return `${base}::${firstLine}`;
+            };
+            const messages = session.messages;
+            // Avoid noisy duplicates like repeated "Reasoning step" lines.
+            if (entry.category === 'reasoning') {
+                const last = messages[messages.length - 1];
+                if (last && last.kind === 'activity') {
+                    const previousItem = last.item;
+                    if (previousItem.category === entry.category &&
+                        previousItem.phase === entry.phase &&
+                        previousItem.title === entry.title &&
+                        previousItem.detail === entry.detail) {
+                        return prev;
+                    }
+                }
+            }
+            // If we have a corresponding "started" command, update it in place instead of appending.
+            if (entry.category === 'command' && entry.phase === 'completed') {
+                const key = extractCommandKey(entry.detail);
+                if (key) {
+                    for (let idx = messages.length - 1; idx >= 0; idx -= 1) {
+                        const msg = messages[idx];
+                        if (msg.kind !== 'activity') {
+                            continue;
+                        }
+                        const existing = msg.item;
+                        if (existing.category !== 'command' || existing.phase !== 'started') {
+                            continue;
+                        }
+                        if (extractCommandKey(existing.detail) !== key) {
+                            continue;
+                        }
+                        const updated = {
+                            ...existing,
+                            phase: 'completed',
+                            title: entry.title,
+                            detail: entry.detail,
+                            raw: entry.raw,
+                        };
+                        const updatedMessages = [
+                            ...messages.slice(0, idx),
+                            { ...msg, item: updated },
+                            ...messages.slice(idx + 1),
+                        ];
+                        next.set(targetSessionKey, { ...session, messages: trimSessionMessages(updatedMessages) });
+                        return next;
+                    }
+                }
+            }
+            // Generic: If we have a corresponding "started" tool/event line, update it in place.
+            // This keeps pairs like "Web Search started" -> "Web Search completed" on a single line.
+            if (entry.phase === 'completed') {
+                const key = extractGenericKey(entry.title, entry.detail);
+                if (key) {
+                    for (let idx = messages.length - 1; idx >= 0; idx -= 1) {
+                        const msg = messages[idx];
+                        if (msg.kind !== 'activity') {
+                            continue;
+                        }
+                        const existing = msg.item;
+                        if (existing.phase !== 'started') {
+                            continue;
+                        }
+                        if (extractGenericKey(existing.title, existing.detail) !== key) {
+                            continue;
+                        }
+                        const updated = {
+                            ...existing,
+                            phase: 'completed',
+                            title: entry.title,
+                            detail: entry.detail,
+                            raw: entry.raw,
+                        };
+                        const updatedMessages = [
+                            ...messages.slice(0, idx),
+                            { ...msg, item: updated },
+                            ...messages.slice(idx + 1),
+                        ];
+                        next.set(targetSessionKey, { ...session, messages: trimSessionMessages(updatedMessages) });
+                        return next;
+                    }
+                }
+            }
+            const updatedMessages = [...messages, { kind: 'activity', id: entry.id, item: entry }];
+            next.set(targetSessionKey, { ...session, messages: trimSessionMessages(updatedMessages) });
+            return next;
+        });
+    }
+    function setSessionPairing(sessionKey, pairing) {
+        const targetSessionKey = sessionKey || currentNotebookSessionKeyRef.current || '';
+        if (!targetSessionKey) {
+            return;
+        }
+        updateSessions(prev => {
+            const next = new Map(prev);
+            const session = next.get(targetSessionKey) ?? createSession('', `Session started`, { sessionKey: targetSessionKey });
+            next.set(targetSessionKey, {
+                ...session,
+                ...pairing,
+                notebookMode: pairing.notebookMode ?? session.notebookMode,
+            });
+            return next;
+        });
+    }
+    function setSessionConversationMode(sessionKey, rawMode) {
+        const mode = coerceConversationMode(rawMode);
+        if (!mode) {
+            return;
+        }
+        const targetSessionKey = sessionKey || currentNotebookSessionKeyRef.current || '';
+        if (!targetSessionKey) {
+            return;
+        }
+        updateSessions(prev => {
+            const next = new Map(prev);
+            const session = next.get(targetSessionKey) ?? createSession('', `Session started`, { sessionKey: targetSessionKey });
+            if (session.conversationMode === mode) {
+                return prev;
+            }
+            next.set(targetSessionKey, { ...session, conversationMode: mode });
+            return next;
+        });
+    }
+    function resolveMessageSessionKey(msg) {
+        return resolveMessageSessionKeyForMessage({
+            message: msg,
+            runToSessionKey: runToSessionKeyRef.current,
+            activeSessionKeyByPath: activeSessionKeyByPathRef.current,
+            currentSessionKey: currentNotebookSessionKeyRef.current || ''
+        });
+    }
+    function appendMessage(sessionKey, role, text) {
+        if (!text) {
+            return;
+        }
+        const targetSessionKey = sessionKey || currentNotebookSessionKeyRef.current || '';
+        if (!targetSessionKey) {
+            return;
+        }
+        const nextText = normalizeSystemText(role, text);
+        updateSessions(prev => {
+            const next = new Map(prev);
+            const session = next.get(targetSessionKey) ?? createSession('', `Session started`, { sessionKey: targetSessionKey });
+            const messages = session.messages;
+            const updatedMessages = [
+                ...messages,
+                { kind: 'text', id: crypto.randomUUID(), role, text: nextText }
+            ];
+            next.set(targetSessionKey, { ...session, messages: trimSessionMessages(updatedMessages) });
+            return next;
+        });
+    }
+    function scrollToBottom() {
+        endRef.current?.scrollIntoView({ block: 'end' });
+    }
+    function onScrollMessages() {
+        const node = scrollRef.current;
+        if (!node) {
+            return;
+        }
+        const threshold = 80;
+        const atBottom = node.scrollHeight - (node.scrollTop + node.clientHeight) < threshold;
+        setIsAtBottom(atBottom);
+    }
+    function clearRunMappingForSessionKey(targetSessionKey) {
+        const runToSessionKey = runToSessionKeyRef.current;
+        const next = new Map(runToSessionKey);
+        for (const [runId, mappedSessionKey] of runToSessionKey) {
+            if (mappedSessionKey === targetSessionKey) {
+                next.delete(runId);
+            }
+        }
+        runToSessionKeyRef.current = next;
+    }
+    async function clearAllSessions() {
+        const count = getStoredSessionThreadCount();
+        if (!count && sessions.size === 0) {
+            return;
+        }
+        const result = await showDialog({
+            title: 'Delete all conversations',
+            body: `This will delete ${count} saved conversation(s) and all in-memory messages in this panel.`,
+            buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Delete' })]
+        });
+        if (!result.button.accept) {
+            return;
+        }
+        const activeSessionKey = currentNotebookSessionKeyRef.current || '';
+        if (activeSessionKey) {
+            clearRunMappingForSessionKey(activeSessionKey);
+        }
+        markDeleteAllPending();
+        if (!deleteAllSessionsOnServer() && activeSessionKey) {
+            appendMessage(activeSessionKey, 'system', 'Delete request could not be sent now. It will be retried when you reconnect.');
+        }
+        runToSessionKeyRef.current = new Map();
+        activeSessionKeyByPathRef.current = new Map();
+        lastActiveCellAttachmentSignatureRef.current = new Map();
+        safeLocalStorageRemove(STORAGE_KEY_SESSION_THREADS);
+        clearStoredSelectionPreviews();
+        replaceSessions(new Map());
+        clearInputForCurrentSession();
+        clearPendingImages();
+    }
+    async function refreshNotebook(sessionKey) {
+        const { path } = parseSessionKey(sessionKey);
+        if (!path) {
+            return;
+        }
+        const activeWidget = getActiveDocumentWidget(props.app, activeDocumentWidgetRef.current);
+        const activePath = getSupportedDocumentPath(activeWidget);
+        const isSessionStillRunning = sessionsRef.current.get(sessionKey)?.runState === 'running';
+        if (isSessionStillRunning && activePath !== path) {
+            pendingRefreshPathsRef.current.add(sessionKey);
+            return;
+        }
+        const widget = findDocumentWidgetByPath(props.app, path, activeDocumentWidgetRef.current);
+        if (!widget) {
+            pendingRefreshPathsRef.current.add(sessionKey);
+            return;
+        }
+        const context = getDocumentContext(widget);
+        if (!context || typeof context.revert !== 'function') {
+            pendingRefreshPathsRef.current.add(sessionKey);
+            return;
+        }
+        activeDocumentWidgetRef.current = widget;
+        if (context.model.dirty) {
+            pendingRefreshPathsRef.current.add(sessionKey);
+            appendMessage(sessionKey, 'system', 'Codex updated files, but this document has unsaved changes. Reload manually when ready.');
+            return;
+        }
+        const viewState = captureDocumentViewState(widget);
+        try {
+            await context.revert();
+            restoreDocumentViewState(widget, viewState);
+            appendMessage(sessionKey, 'system', 'Document refreshed due to file changes.');
+            pendingRefreshPathsRef.current.delete(sessionKey);
+        }
+        catch (err) {
+            appendMessage(sessionKey, 'system', `Failed to refresh document: ${String(err)}`);
+            pendingRefreshPathsRef.current.add(sessionKey);
+        }
+    }
+    useEffect(() => {
+        const updateNotebook = () => {
+            const activeWidget = getActiveDocumentWidget(props.app, activeDocumentWidgetRef.current);
+            if (activeWidget) {
+                activeDocumentWidgetRef.current = activeWidget;
+            }
+            const nextIsNotebookEditor = isNotebookWidget(activeWidget);
+            setCurrentDocumentIsNotebookEditor(prev => (prev === nextIsNotebookEditor ? prev : nextIsNotebookEditor));
+            const path = getSupportedDocumentPath(activeWidget);
+            const sessionKey = resolveSessionKey(path);
+            const previousKey = currentNotebookSessionKeyRef.current;
+            if (sessionKey && sessionKey === previousKey) {
+                return;
+            }
+            if (previousKey) {
+                saveCurrentInputDraft(inputRef.current);
+            }
+            currentNotebookPathRef.current = path;
+            setCurrentNotebookPath(path);
+            setCurrentNotebookSessionKey(sessionKey);
+            currentNotebookSessionKeyRef.current = sessionKey;
+            if (!sessionKey) {
+                clearInputForCurrentSession();
+                return;
+            }
+            restoreInput(sessionKey);
+            clearPendingImages();
+            setIsAtBottom(true);
+            if (!path) {
+                return;
+            }
+            const session = ensureSession(path, sessionKey);
+            activeSessionKeyByPathRef.current.set(path, sessionKey);
+            sendStartSession(session, path, sessionKey);
+            if (pendingRefreshPathsRef.current.has(sessionKey)) {
+                void refreshNotebook(sessionKey);
+                return;
+            }
+        };
+        updateNotebook();
+        const shellChanged = props.app.shell.currentChanged;
+        if (shellChanged) {
+            shellChanged.connect(updateNotebook);
+        }
+        props.notebooks.currentChanged.connect(updateNotebook);
+        return () => {
+            if (shellChanged) {
+                shellChanged.disconnect(updateNotebook);
+            }
+            props.notebooks.currentChanged.disconnect(updateNotebook);
+        };
+    }, [props.app, props.notebooks]);
+    useEffect(() => {
+        const onStorage = (event) => {
+            if (event.key !== STORAGE_KEY_SESSION_THREADS_EVENT || !event.newValue) {
+                return;
+            }
+            const syncEvent = coerceSessionThreadSyncEvent(event.newValue);
+            if (!syncEvent) {
+                return;
+            }
+            if (syncEvent.source === sessionThreadSyncIdRef.current) {
+                return;
+            }
+            const notebookPath = syncEvent.notebookPath;
+            const sessionKey = syncEvent.sessionKey;
+            const threadId = syncEvent.threadId;
+            if (!notebookPath || !sessionKey || !threadId) {
+                return;
+            }
+            const resolvedSessionKey = resolveSessionKey(notebookPath);
+            if (!resolvedSessionKey || resolvedSessionKey !== sessionKey) {
+                return;
+            }
+            const resetSession = createThreadResetSession(notebookPath, sessionKey, threadId);
+            const currentPath = currentNotebookPathRef.current;
+            const existingSession = sessionsRef.current.get(sessionKey);
+            if (existingSession && existingSession.threadId === threadId) {
+                return;
+            }
+            if (existingSession?.threadId) {
+                const previousDedupKey = makeActiveCellAttachmentDedupKey(sessionKey, existingSession.threadId);
+                lastActiveCellAttachmentSignatureRef.current.delete(previousDedupKey);
+            }
+            updateSessions(prev => {
+                const next = new Map(prev);
+                next.set(sessionKey, resetSession);
+                return next;
+            });
+            activeSessionKeyByPathRef.current.set(notebookPath, sessionKey);
+            clearRunMappingForSessionKey(sessionKey);
+            if (currentPath === notebookPath && currentNotebookSessionKeyRef.current !== sessionKey) {
+                setCurrentNotebookSessionKey(sessionKey);
+            }
+            if (currentPath === notebookPath) {
+                clearInputForCurrentSession();
+                clearPendingImages();
+            }
+            sendStartSession(resetSession, notebookPath, sessionKey);
+        };
+        window.addEventListener('storage', onStorage);
+        return () => {
+            window.removeEventListener('storage', onStorage);
+        };
+    }, []);
+    function onSocketOpen() {
+        resetSocketMessageQueue();
+        if (hasDeleteAllPending()) {
+            deleteAllSessionsOnServer();
+        }
+        const activeWidget = getActiveDocumentWidget(props.app, activeDocumentWidgetRef.current);
+        if (activeWidget) {
+            activeDocumentWidgetRef.current = activeWidget;
+        }
+        const notebookPath = currentNotebookPathRef.current || getSupportedDocumentPath(activeWidget);
+        if (!notebookPath) {
+            return;
+        }
+        const currentSessionKey = resolveCurrentSessionKey(notebookPath);
+        const session = ensureSession(notebookPath, currentSessionKey);
+        sendStartSession(session, notebookPath, currentSessionKey);
+    }
+    function onSocketClose() {
+        resetSocketMessageQueue();
+        runToSessionKeyRef.current = new Map();
+        setIsPlainPyRunInProgress(false);
+        plainPyRunSessionKeyRef.current = '';
+    }
+    function processSocketMessage(rawMessage) {
+        try {
+            handleCodexSocketMessage(rawMessage, {
+                appendMessage,
+                clearDeleteAllPending,
+                coerceModelCatalog: parseModelCatalog,
+                coerceReasoningEffort,
+                coerceRateLimitsSnapshot,
+                coerceSessionHistory,
+                coerceNotebookMode,
+                createSession,
+                deleteAllSessionsOnServer,
+                getCommandPath: () => commandPath,
+                getCurrentSessionKey: () => currentNotebookSessionKeyRef.current,
+                getStoredSelectionPreviews: () => storedSelectionPreviewsRef.current,
+                hashSelectionPreviewContent,
+                hasDeleteAllPending,
+                isSessionStartNotice,
+                markDeleteAllPending,
+                normalizeSystemText,
+                notifyRunDone,
+                refreshNotebook,
+                resolveMessageSessionKey,
+                runToSessionKeyRef,
+                setCliDefaults,
+                setCommandPath,
+                setRateLimits,
+                setSessionConversationMode,
+                setSessionPairing,
+                setSessionProgress,
+                setSessionRunState,
+                getSessionThreadId: (sessionKey) => {
+                    const normalizedSessionKey = (sessionKey || '').trim();
+                    if (!normalizedSessionKey) {
+                        return '';
+                    }
+                    const session = sessionsRef.current.get(normalizedSessionKey);
+                    return (session?.threadId || '').trim();
+                },
+                appendActivityItem,
+                syncEffectiveSandboxFromStatus,
+                updateSessions: updater => updateSessions(previous => updater(previous))
+            });
+        }
+        catch (err) {
+            const sessionKey = currentNotebookSessionKeyRef.current || '';
+            if (sessionKey) {
+                appendMessage(sessionKey, 'system', `Internal UI error while processing a server message: ${String(err)}`);
+            }
+            console.error('[Codex] onSocketMessage failed', err, rawMessage);
+        }
+    }
+    function clearSocketMessageFlushTimer() {
+        const rafId = socketMessageFlushRafRef.current;
+        if (rafId !== null) {
+            window.cancelAnimationFrame(rafId);
+            socketMessageFlushRafRef.current = null;
+        }
+        const timerId = socketMessageFlushTimerRef.current;
+        if (timerId === null) {
+            return;
+        }
+        window.clearTimeout(timerId);
+        socketMessageFlushTimerRef.current = null;
+    }
+    function flushSocketMessageQueue() {
+        clearSocketMessageFlushTimer();
+        const queue = socketMessageQueueRef.current;
+        if (queue.length === 0) {
+            return;
+        }
+        const batch = queue.splice(0, SOCKET_MESSAGE_BATCH_SIZE);
+        for (const rawMessage of batch) {
+            processSocketMessage(rawMessage);
+        }
+        if (queue.length > 0) {
+            scheduleSocketMessageFlush();
+        }
+    }
+    function scheduleSocketMessageFlush() {
+        if (socketMessageFlushTimerRef.current !== null || socketMessageFlushRafRef.current !== null) {
+            return;
+        }
+        if (typeof window.requestAnimationFrame === 'function') {
+            socketMessageFlushRafRef.current = window.requestAnimationFrame(() => {
+                socketMessageFlushRafRef.current = null;
+                flushSocketMessageQueue();
+            });
+            return;
+        }
+        socketMessageFlushTimerRef.current = window.setTimeout(flushSocketMessageQueue, SOCKET_MESSAGE_FALLBACK_FLUSH_MS);
+    }
+    function resetSocketMessageQueue() {
+        socketMessageQueueRef.current = [];
+        clearSocketMessageFlushTimer();
+    }
+    function onSocketMessage(rawMessage) {
+        const queue = socketMessageQueueRef.current;
+        queue.push(rawMessage);
+        if (queue.length > SOCKET_MESSAGE_MAX_QUEUE) {
+            queue.splice(0, queue.length - SOCKET_MESSAGE_MAX_QUEUE);
+        }
+        scheduleSocketMessageFlush();
+    }
+    useEffect(() => {
+        return () => {
+            resetSocketMessageQueue();
+        };
+    }, []);
+    useEffect(() => {
+        if (!isAtBottom) {
+            return;
+        }
+        const id = window.requestAnimationFrame(() => scrollToBottom());
+        return () => window.cancelAnimationFrame(id);
+    }, [isAtBottom, sessions, currentNotebookPath, socketConnected]);
+    function autosizeComposerTextarea(el) {
+        const textarea = el ?? composerTextareaRef.current;
+        if (!textarea) {
+            return;
+        }
+        // Reset first so it can shrink as content is removed.
+        textarea.style.height = 'auto';
+        const cs = window.getComputedStyle(textarea);
+        // Prefer CSS-controlled min/max heights so the JS sizing stays consistent
+        // with the visual design (and any future CSS tweaks).
+        let minHeight = Number.parseFloat(cs.minHeight || '');
+        let maxHeight = Number.parseFloat(cs.maxHeight || '');
+        if (!Number.isFinite(minHeight) || minHeight <= 0) {
+            const fontSize = Number.parseFloat(cs.fontSize || '13');
+            let lineHeight = Number.parseFloat(cs.lineHeight || '');
+            if (!Number.isFinite(lineHeight)) {
+                lineHeight = fontSize * 1.35;
+            }
+            minHeight = lineHeight;
+        }
+        if (!Number.isFinite(maxHeight) || maxHeight <= 0) {
+            const fontSize = Number.parseFloat(cs.fontSize || '13');
+            let lineHeight = Number.parseFloat(cs.lineHeight || '');
+            if (!Number.isFinite(lineHeight)) {
+                lineHeight = fontSize * 1.35;
+            }
+            maxHeight = lineHeight * 3;
+        }
+        const scrollHeight = textarea.scrollHeight;
+        const isEmpty = textarea.value.length === 0;
+        const unclampedHeight = isEmpty ? minHeight : scrollHeight;
+        const nextHeight = Math.ceil(Math.min(Math.max(unclampedHeight, minHeight), maxHeight));
+        textarea.style.height = `${nextHeight}px`;
+        textarea.style.overflowY = scrollHeight > maxHeight + 1 ? 'auto' : 'hidden';
+    }
+    useEffect(() => {
+        // Defer to the next frame so layout reflects the latest value.
+        const id = window.requestAnimationFrame(() => autosizeComposerTextarea());
+        return () => window.cancelAnimationFrame(id);
+    }, [input]);
+    useEffect(() => {
+        const onResize = () => autosizeComposerTextarea();
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
+    }, []);
+    async function startNewThread() {
+        const path = currentNotebookPathRef.current || '';
+        const sessionKey = currentNotebookSessionKeyRef.current || '';
+        if (!path) {
+            return;
+        }
+        if (!sessionKey) {
+            return;
+        }
+        const existing = sessionsRef.current.get(sessionKey);
+        const hasConversation = existing?.messages.some(msg => msg.kind === 'text' && (msg.role === 'user' || msg.role === 'assistant')) ?? false;
+        if (hasConversation) {
+            const result = await showDialog({
+                title: 'Start a new thread?',
+                body: 'Starting a new thread will reset the current conversation, and you will not be able to view the previous conversation in this panel.\nContinue?',
+                buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'New thread' })]
+            });
+            if (!result.button.accept) {
+                return;
+            }
+        }
+        const newSessionBase = createThreadResetSession(path, sessionKey, createSessionEventId());
+        const newSession = {
+            ...newSessionBase,
+            selectedModelOption: modelOption,
+            selectedReasoningEffort: reasoningEffort,
+            selectedSandboxMode: sandboxMode,
+        };
+        if (existing?.threadId) {
+            const previousDedupKey = makeActiveCellAttachmentDedupKey(sessionKey, existing.threadId);
+            lastActiveCellAttachmentSignatureRef.current.delete(previousDedupKey);
+        }
+        updateSessions(prev => {
+            const next = new Map(prev);
+            next.set(sessionKey, newSession);
+            return next;
+        });
+        clearRunMappingForSessionKey(sessionKey);
+        clearInputForCurrentSession();
+        clearPendingImages();
+        sendStartSession(newSession, path, sessionKey, { forceNewThread: true });
+        emitSessionThreadEvent(sessionKey, path, newSession.threadId);
+    }
+    function cancelRun() {
+        const sessionKey = currentNotebookSessionKeyRef.current || '';
+        if (!sessionKey) {
+            return;
+        }
+        const session = sessionKey ? sessionsRef.current.get(sessionKey) : null;
+        const runId = session?.activeRunId ?? null;
+        if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+            appendMessage(sessionKey, 'system', 'Cancel failed: WebSocket is not connected.');
+            return;
+        }
+        if (!runId) {
+            appendMessage(sessionKey, 'system', 'Cancel not available yet (waiting for run id).');
+            return;
+        }
+        setSessionProgress(sessionKey, 'Cancelling...');
+        safeSocketSend(JSON.stringify(buildCancelMessage(runId)));
+    }
+    function clearPendingImages() {
+        for (const image of pendingImagesRef.current) {
+            URL.revokeObjectURL(image.previewUrl);
+        }
+        pendingImagesRef.current = [];
+        setPendingImages([]);
+    }
+    function removePendingImage(id) {
+        setPendingImages(prev => {
+            const removed = prev.find(image => image.id === id);
+            if (removed) {
+                URL.revokeObjectURL(removed.previewUrl);
+            }
+            const next = prev.filter(image => image.id !== id);
+            pendingImagesRef.current = next;
+            return next;
+        });
+    }
+    function onComposerPaste(event) {
+        const items = event.clipboardData?.items;
+        if (!items || items.length === 0) {
+            return;
+        }
+        const found = [];
+        for (let idx = 0; idx < items.length; idx += 1) {
+            const item = items[idx];
+            if (!item || item.kind !== 'file' || !item.type.startsWith('image/')) {
+                continue;
+            }
+            const file = item.getAsFile();
+            if (file) {
+                found.push(file);
+            }
+        }
+        if (found.length === 0) {
+            return;
+        }
+        const existingCount = pendingImagesRef.current.length;
+        if (existingCount >= MAX_IMAGE_ATTACHMENTS) {
+            appendMessage(currentNotebookSessionKeyRef.current || '', 'system', `Too many images attached (max ${MAX_IMAGE_ATTACHMENTS}).`);
+            return;
+        }
+        const remainingSlots = MAX_IMAGE_ATTACHMENTS - existingCount;
+        const toAdd = [];
+        let skippedLarge = 0;
+        let skippedTotal = 0;
+        let totalBytes = pendingImagesRef.current.reduce((sum, image) => sum + image.file.size, 0);
+        for (const file of found.slice(0, remainingSlots)) {
+            if (file.size > MAX_IMAGE_ATTACHMENT_BYTES) {
+                skippedLarge += 1;
+                continue;
+            }
+            if (totalBytes + file.size > MAX_IMAGE_ATTACHMENT_TOTAL_BYTES) {
+                skippedTotal += 1;
+                continue;
+            }
+            toAdd.push({ id: crypto.randomUUID(), file, previewUrl: URL.createObjectURL(file) });
+            totalBytes += file.size;
+        }
+        if (skippedLarge > 0) {
+            appendMessage(currentNotebookSessionKeyRef.current || '', 'system', `Skipped ${skippedLarge} image(s): each must be <= ${Math.round(MAX_IMAGE_ATTACHMENT_BYTES / (1024 * 1024))}MB.`);
+        }
+        if (skippedTotal > 0) {
+            appendMessage(currentNotebookSessionKeyRef.current || '', 'system', `Skipped ${skippedTotal} image(s): total attachments must be <= ${Math.round(MAX_IMAGE_ATTACHMENT_TOTAL_BYTES / (1024 * 1024))}MB.`);
+        }
+        if (toAdd.length === 0) {
+            return;
+        }
+        setPendingImages(prev => {
+            const next = [...prev, ...toAdd];
+            pendingImagesRef.current = next;
+            return next;
+        });
+    }
+    async function buildQueuedImagePayloads(attachments) {
+        if (attachments.length === 0) {
+            return [];
+        }
+        try {
+            const output = [];
+            for (const image of attachments) {
+                output.push({
+                    name: image.file.name || 'image',
+                    dataUrl: await blobToDataUrl(image.file)
+                });
+            }
+            return output;
+        }
+        catch (err) {
+            appendMessage(currentNotebookSessionKeyRef.current || '', 'system', `Failed to prepare image attachment: ${String(err)}`);
+            return null;
+        }
+    }
+    async function sendMessage(options) {
+        const socket = wsRef.current;
+        const notebookPath = (options?.forcedNotebookPath ?? currentNotebookPathRef.current) || '';
+        const sessionKey = (options?.forcedSessionKey ?? currentNotebookSessionKeyRef.current) || '';
+        if (!notebookPath) {
+            return false;
+        }
+        if (!sessionKey) {
+            return false;
+        }
+        if (!socket || socket.readyState !== WebSocket.OPEN) {
+            appendMessage(sessionKey, 'system', 'WebSocket is not connected.');
+            return false;
+        }
+        const existing = sessionKey ? sessionsRef.current.get(sessionKey) : null;
+        if (existing?.pairedOk === false) {
+            appendMessage(sessionKey, 'system', existing.pairedMessage ||
+                `Jupytext paired file not found. Expected: ${existing.pairedOsPath || existing.pairedPath || '<notebook>.py'}`);
+            return false;
+        }
+        const forcedText = typeof options?.forcedText === 'string' ? options.forcedText : null;
+        const trimmed = (forcedText ?? inputRef.current).trim();
+        const hasImages = forcedText == null && pendingImagesRef.current.length > 0;
+        if (!trimmed && !hasImages) {
+            return false;
+        }
+        const current = sessionKey ? sessionsRef.current.get(sessionKey) : null;
+        if (current?.runState === 'running' && options?.skipRunStateCheck !== true) {
+            return false;
+        }
+        const activeWidget = findDocumentWidgetByPath(props.app, notebookPath, activeDocumentWidgetRef.current);
+        if (activeWidget) {
+            activeDocumentWidgetRef.current = activeWidget;
+        }
+        const activeWidgetPath = getSupportedDocumentPath(activeWidget);
+        const activeContext = activeWidget ? getDocumentContext(activeWidget) : null;
+        if (autoSaveBeforeSend &&
+            activeContext &&
+            typeof activeContext.save === 'function' &&
+            activeWidgetPath === notebookPath &&
+            activeContext.model.dirty) {
+            try {
+                await activeContext.save();
+            }
+            catch (err) {
+                appendMessage(sessionKey, 'system', `Auto-save failed: ${String(err)}`);
+                return false;
+            }
+        }
+        const notebookMode = current?.notebookMode ?? inferNotebookModeFromPath(notebookPath);
+        const session = ensureSession(notebookPath, sessionKey);
+        const selectedContext = getSelectedContext(activeWidget, notebookMode);
+        const selectedTextForContext = selectedContext?.text || '';
+        let includeSelectionKey = false;
+        let selection = '';
+        if (includeActiveCell) {
+            if (notebookMode === 'plain_py') {
+                const selectedText = selectedTextForContext || getSelectedTextFromActiveCell(activeWidget) || getSelectedTextFromFileEditor(activeWidget);
+                if (selectedText) {
+                    includeSelectionKey = true;
+                    selection = selectedText;
+                }
+            }
+            else {
+                includeSelectionKey = true;
+                selection =
+                    selectedTextForContext || getActiveCellText(activeWidget) || getSelectedTextFromFileEditor(activeWidget);
+            }
+        }
+        const includeCellOutputKey = includeActiveCell &&
+            includeActiveCellOutput &&
+            (notebookMode === 'ipynb' || notebookMode === 'jupytext_py');
+        const cellOutputRaw = includeCellOutputKey ? getActiveCellOutput(activeWidget) : '';
+        const attachmentLimit = limitActiveCellAttachmentPayload(includeSelectionKey ? selection : '', includeCellOutputKey ? cellOutputRaw : '', MAX_ACTIVE_CELL_SELECTION_CHARS, MAX_ACTIVE_CELL_OUTPUT_CHARS);
+        const selectionForAttachment = includeSelectionKey ? attachmentLimit.selection : '';
+        const cellOutputForAttachment = includeCellOutputKey ? attachmentLimit.cellOutput : '';
+        const includeSelectionKeyAfterLimit = Boolean(selectionForAttachment);
+        const includeCellOutputKeyAfterLimit = Boolean(cellOutputForAttachment);
+        const messageSelectionPreview = includeSelectionKeyAfterLimit
+            ? toMessageSelectionPreview(selectedContext, activeWidget, notebookMode, selectionForAttachment)
+            : undefined;
+        const messageCellOutputPreview = includeCellOutputKeyAfterLimit
+            ? toCellOutputPreview(selectedContext, activeWidget, notebookMode, cellOutputForAttachment)
+            : undefined;
+        const shouldDeduplicateSelection = includeActiveCell && includeSelectionKeyAfterLimit;
+        const shouldDeduplicateCellOutput = includeActiveCell && includeCellOutputKeyAfterLimit;
+        const activeCellAttachmentDedupKey = makeActiveCellAttachmentDedupKey(sessionKey, session.threadId);
+        const previousActiveCellSignatures = lastActiveCellAttachmentSignatureRef.current.get(activeCellAttachmentDedupKey);
+        const activeCellSelectionSignature = shouldDeduplicateSelection
+            ? buildActiveCellSelectionSignature({
+                notebookMode,
+                text: selection,
+                locationLabel: messageSelectionPreview?.locationLabel
+            })
+            : '';
+        const activeCellOutputSignature = shouldDeduplicateCellOutput
+            ? buildActiveCellOutputSignature({
+                notebookMode,
+                text: cellOutputRaw,
+                locationLabel: messageCellOutputPreview?.locationLabel
+            })
+            : '';
+        const hasDuplicateSelectionAttachment = shouldDeduplicateSelection &&
+            isDuplicateActiveCellAttachmentSignature(previousActiveCellSignatures?.selectionSignature, activeCellSelectionSignature);
+        const hasDuplicateCellOutputAttachment = shouldDeduplicateCellOutput &&
+            isDuplicateActiveCellAttachmentSignature(previousActiveCellSignatures?.cellOutputSignature, activeCellOutputSignature);
+        const includeSelectionKeyForSend = includeSelectionKeyAfterLimit && !hasDuplicateSelectionAttachment;
+        const includeCellOutputKeyForSend = includeCellOutputKeyAfterLimit && !hasDuplicateCellOutputAttachment;
+        const sentAttachmentTruncation = resolveSentAttachmentTruncation({
+            includeSelection: includeSelectionKeyForSend,
+            includeCellOutput: includeCellOutputKeyForSend,
+            selectionTruncated: attachmentLimit.selectionTruncated,
+            cellOutputTruncated: attachmentLimit.cellOutputTruncated
+        });
+        const messageSelectionPreviewForSend = hasDuplicateSelectionAttachment ? undefined : messageSelectionPreview;
+        const messageCellOutputPreviewForSend = hasDuplicateCellOutputAttachment ? undefined : messageCellOutputPreview;
+        const messageContextPreview = messageSelectionPreviewForSend || messageCellOutputPreviewForSend
+            ? {
+                ...(messageSelectionPreviewForSend ? { selectionPreview: messageSelectionPreviewForSend } : {}),
+                ...(messageCellOutputPreviewForSend ? { cellOutputPreview: messageCellOutputPreviewForSend } : {})
+            }
+            : undefined;
+        const modelForSend = current?.selectedModelOption ?? modelOption;
+        const reasoningForSend = current?.selectedReasoningEffort ?? reasoningEffort;
+        const sandboxForSend = current?.selectedSandboxMode ?? sandboxMode;
+        const selectedModelForSend = modelForSend === '__config__' ? (autoModel || '').trim() : modelForSend.trim();
+        const selectedReasoningForSend = reasoningForSend === '__config__'
+            ? coerceReasoningEffort(autoReasoningEffort || '') || resolveFallbackReasoningEffort(reasoningOptions)
+            : reasoningForSend;
+        if (!selectedModelForSend) {
+            appendMessage(sessionKey, 'system', 'Model is not resolved yet. Wait for model defaults to load, or pick a model explicitly.');
+            return false;
+        }
+        if (!selectedReasoningForSend) {
+            appendMessage(sessionKey, 'system', 'Reasoning level is not resolved yet. Wait for defaults to load, or pick a reasoning level explicitly.');
+            return false;
+        }
+        const content = trimmed || (hasImages ? 'Please analyze the attached image(s).' : '');
+        const imagePayloads = hasImages ? await buildQueuedImagePayloads(pendingImagesRef.current) : null;
+        if (hasImages && !imagePayloads) {
+            return false;
+        }
+        let images;
+        if (imagePayloads && imagePayloads.length > 0) {
+            images = imagePayloads;
+        }
+        if (!safeSocketSend(JSON.stringify(buildSendMessage({
+            sessionId: session.threadId,
+            sessionContextKey: sessionKey,
+            content,
+            notebookPath,
+            commandPath: commandPath.trim(),
+            model: selectedModelForSend,
+            reasoningEffort: selectedReasoningForSend,
+            sandbox: sandboxForSend,
+            ...(includeSelectionKeyForSend ? { selection: selectionForAttachment } : {}),
+            ...(includeCellOutputKeyForSend ? { cellOutput: cellOutputForAttachment } : {}),
+            ...(sentAttachmentTruncation.selectionTruncated ? { selectionTruncated: true } : {}),
+            ...(sentAttachmentTruncation.cellOutputTruncated ? { cellOutputTruncated: true } : {}),
+            ...(images ? { images } : {}),
+            ...(messageSelectionPreviewForSend ? { uiSelectionPreview: messageSelectionPreviewForSend } : {}),
+            ...(messageCellOutputPreviewForSend ? { uiCellOutputPreview: messageCellOutputPreviewForSend } : {})
+        })))) {
+            appendMessage(sessionKey, 'system', 'Failed to send message to Codex: WebSocket is unavailable.');
+            return false;
+        }
+        if (shouldDeduplicateSelection || shouldDeduplicateCellOutput) {
+            const nextActiveCellSignatures = { ...(previousActiveCellSignatures ?? {}) };
+            if (shouldDeduplicateSelection && activeCellSelectionSignature) {
+                nextActiveCellSignatures.selectionSignature = activeCellSelectionSignature;
+            }
+            if (shouldDeduplicateCellOutput && activeCellOutputSignature) {
+                nextActiveCellSignatures.cellOutputSignature = activeCellOutputSignature;
+            }
+            if (nextActiveCellSignatures.selectionSignature || nextActiveCellSignatures.cellOutputSignature) {
+                lastActiveCellAttachmentSignatureRef.current.set(activeCellAttachmentDedupKey, nextActiveCellSignatures);
+            }
+            else {
+                lastActiveCellAttachmentSignatureRef.current.delete(activeCellAttachmentDedupKey);
+            }
+        }
+        appendStoredSelectionPreviewEntry(session.threadId, content, messageContextPreview);
+        const imageCount = images ? images.length : 0;
+        const showReadOnlyWarning = sandboxForSend === 'read-only';
+        const attachmentTruncationNotice = buildAttachmentTruncationNotice(sentAttachmentTruncation.selectionTruncated, sentAttachmentTruncation.cellOutputTruncated, MAX_ACTIVE_CELL_SELECTION_CHARS, MAX_ACTIVE_CELL_OUTPUT_CHARS);
+        if (notebookMode === 'plain_py' || notebookMode === 'jupytext_py') {
+            plainPyRunSessionKeyRef.current = sessionKey;
+            setIsPlainPyRunInProgress(true);
+        }
+        updateSessions(prev => {
+            const next = new Map(prev);
+            const existing = next.get(sessionKey) ?? createSession('', `Session started`, { sessionKey });
+            const warningEntry = showReadOnlyWarning
+                ? [
+                    {
+                        kind: 'text',
+                        id: crypto.randomUUID(),
+                        role: 'system',
+                        text: normalizeSystemText('system', READ_ONLY_PERMISSION_WARNING)
+                    }
+                ]
+                : [];
+            const truncationNoticeEntry = attachmentTruncationNotice
+                ? [
+                    {
+                        kind: 'text',
+                        id: crypto.randomUUID(),
+                        role: 'system',
+                        text: normalizeSystemText('system', attachmentTruncationNotice)
+                    }
+                ]
+                : [];
+            const updatedMessages = [
+                ...existing.messages,
+                ...warningEntry,
+                {
+                    kind: 'text',
+                    id: crypto.randomUUID(),
+                    role: 'user',
+                    text: content,
+                    attachments: imageCount > 0 ? { images: imageCount } : undefined,
+                    selectionPreview: messageSelectionPreviewForSend,
+                    cellOutputPreview: messageCellOutputPreviewForSend
+                },
+                ...truncationNoticeEntry
+            ];
+            next.set(sessionKey, {
+                ...existing,
+                messages: trimSessionMessages(updatedMessages),
+                runState: 'running',
+                activeRunId: null,
+                runStartedAt: Date.now(),
+                progress: '',
+                progressKind: ''
+            });
+            return next;
+        });
+        if (forcedText == null) {
+            clearInputForCurrentSession();
+            clearPendingImages();
+        }
+        return true;
+    }
+    const currentSession = currentNotebookSessionKey ? sessions.get(currentNotebookSessionKey) : null;
+    const messages = currentSession?.messages ?? [];
+    const progress = currentSession?.progress ?? '';
+    const progressKind = currentSession?.progressKind ?? '';
+    const status = socketConnected ? currentSession?.runState ?? 'ready' : 'disconnected';
+    useEffect(() => {
+        closeSelectionPopover();
+    }, [currentNotebookSessionKey]);
+    useEffect(() => {
+        if (!selectionPopover) {
+            return;
+        }
+        const exists = messages.some(entry => entry.kind === 'text' && entry.id === selectionPopover.messageId);
+        if (exists) {
+            return;
+        }
+        closeSelectionPopover();
+    }, [messages, selectionPopover]);
+    useEffect(() => {
+        const previous = previousSessionThreadIdsRef.current;
+        for (const [sessionKey, session] of sessions) {
+            const nextThreadId = (session?.threadId || '').trim();
+            const previousThreadId = (previous.get(sessionKey) || '').trim();
+            if (previousThreadId && nextThreadId && previousThreadId !== nextThreadId) {
+                migrateStoredSelectionPreviewEntries(previousThreadId, nextThreadId);
+            }
+        }
+        const nextBySessionKey = new Map();
+        for (const [sessionKey, session] of sessions) {
+            const threadId = (session?.threadId || '').trim();
+            if (!sessionKey || !threadId) {
+                continue;
+            }
+            nextBySessionKey.set(sessionKey, threadId);
+        }
+        previousSessionThreadIdsRef.current = nextBySessionKey;
+    }, [sessions]);
+    const displayPath = currentNotebookPath
+        ? currentNotebookPath.split('/').pop() || 'Untitled'
+        : 'No notebook';
+    const composerNotebookMode = currentSession?.notebookMode ?? inferNotebookModeFromPath(currentNotebookPath);
+    const cellAttachmentState = resolveCellAttachmentState({
+        includeActiveCell,
+        includeActiveCellOutput,
+        notebookMode: composerNotebookMode,
+        isNotebookEditor: currentDocumentIsNotebookEditor,
+        currentNotebookPath,
+        pairedOk: currentSession?.pairedOk
+    });
+    const includeCellOutputForNextSend = cellAttachmentState.outputEnabled;
+    const showCellAttachmentBadge = cellAttachmentState.showBadge;
+    const cellAttachmentContentEnabled = cellAttachmentState.contentEnabled;
+    const cellAttachmentOutputEnabled = cellAttachmentState.outputEnabled;
+    useEffect(() => {
+        if (showCellAttachmentBadge) {
+            return;
+        }
+        setCellAttachmentPopoverOpen(false);
+        clearCellAttachmentPopoverCloseTimer();
+    }, [showCellAttachmentBadge]);
+    useEffect(() => {
+        return () => {
+            clearCellAttachmentPopoverCloseTimer();
+        };
+    }, []);
+    useEffect(() => {
+        return () => {
+            clearContextPopoverCloseTimer();
+        };
+    }, []);
+    const trimmedInput = input.trim();
+    const canSend = status !== 'disconnected' &&
+        currentNotebookPath.length > 0 &&
+        currentSession?.pairedOk !== false;
+    const sendButtonMode = status === 'running' ? 'stop' : 'send';
+    const runningSummary = status === 'running' ? progress || 'Working...' : '';
+    const activeModelOption = currentSession?.selectedModelOption ?? modelOption;
+    const activeReasoningEffort = currentSession?.selectedReasoningEffort ?? reasoningEffort;
+    const activeSandboxMode = currentSession?.selectedSandboxMode ?? sandboxMode;
+    const autoModelLabel = autoModel
+        ? findModelLabel(autoModel, modelOptions)
+        : 'Auto';
+    const selectedModelLabel = activeModelOption === '__config__'
+        ? autoModelLabel
+        : findModelLabel(activeModelOption, modelOptions);
+    const autoReasoningLabel = autoReasoningEffort
+        ? findReasoningLabel(autoReasoningEffort, reasoningOptions)
+        : 'Auto';
+    const selectedReasoningLabel = activeReasoningEffort === '__config__'
+        ? autoReasoningLabel
+        : findReasoningLabel(activeReasoningEffort, reasoningOptions);
+    const selectedSandboxLabel = SANDBOX_OPTIONS.find(option => option.value === activeSandboxMode)?.label ?? 'Permission';
+    const notificationPermission = getBrowserNotificationPermission();
+    const notificationsUnsupported = notificationPermission === 'unsupported';
+    const minimumNotifyDurationLabel = notifyOnDoneMinSeconds === 0
+        ? 'All completed runs'
+        : `Runs taking at least ${notifyOnDoneMinSeconds} second${notifyOnDoneMinSeconds === 1 ? '' : 's'}`;
+    const notificationHelpText = notificationPermission === 'unsupported'
+        ? 'Browser notifications are not available in this environment.'
+        : notificationPermission === 'denied'
+            ? 'Notifications are blocked for this site. Allow them in browser settings.'
+            : notificationPermission === 'default'
+                ? 'Permission will be requested when enabling this option.'
+                : `Shows a browser notification for ${minimumNotifyDurationLabel}.`;
+    const hasPythonRunInProgress = Array.from(sessions.entries()).some(([sessionKey, session]) => {
+        if (session.runState !== 'running') {
+            return false;
+        }
+        const mode = session.notebookMode ?? inferNotebookModeFromPath(parseSessionKey(sessionKey).path);
+        return mode === 'plain_py' || mode === 'jupytext_py';
+    });
+    const hasPythonRunLockRef = Boolean(plainPyRunSessionKeyRef.current);
+    const canStop = status === 'running' && Boolean(currentSession?.activeRunId);
+    const canSendNow = canSend && (Boolean(trimmedInput) || pendingImages.length > 0);
+    const isPythonNotebookModeForLock = composerNotebookMode === 'plain_py' || composerNotebookMode === 'jupytext_py';
+    const plainPythonSessionActive = isPythonNotebookModeForLock && (hasPythonRunInProgress || hasPythonRunLockRef) && sendButtonMode === 'send';
+    const sendButtonDisabled = sendButtonMode === 'send'
+        ? !canSendNow || plainPythonSessionActive
+        : sendButtonMode === 'stop'
+            ? !canStop
+            : false;
+    const nowMs = Date.now();
+    const rateUpdatedAtMs = safeParseDateMs(rateLimits?.updatedAt ?? null);
+    const rateAgeMs = rateUpdatedAtMs == null ? null : nowMs - rateUpdatedAtMs;
+    const usageIsStale = rateAgeMs == null ? true : rateAgeMs > 10 * 60 * 1000;
+    const sessionLeftPercent = percentLeftFromUsed(rateLimits?.primary?.usedPercent ?? null);
+    const weeklyLeftPercent = percentLeftFromUsed(rateLimits?.secondary?.usedPercent ?? null);
+    const usageIsUnknown = rateUpdatedAtMs == null && sessionLeftPercent == null && weeklyLeftPercent == null;
+    const sessionResetsIn = formatResetsIn(rateLimits?.primary?.resetsAt ?? null, nowMs);
+    const weeklyResetsIn = formatResetsIn(rateLimits?.secondary?.resetsAt ?? null, nowMs);
+    const usageIsOverdue = sessionResetsIn === 'Overdue' || weeklyResetsIn === 'Overdue' || (rateAgeMs != null && rateAgeMs > 60 * 60 * 1000);
+    const batteryLevel = sessionLeftPercent == null ? null : sessionLeftPercent / 100;
+    const usageUpdatedAgo = rateAgeMs == null ? 'Unknown' : `${formatDurationShort(rateAgeMs)} ago`;
+    const sessionWindowMinutes = rateLimits?.primary?.windowMinutes ?? null;
+    const weeklyWindowMinutes = rateLimits?.secondary?.windowMinutes ?? null;
+    const sessionWindowLabel = sessionWindowMinutes == null ? '' : `Window: ${Math.round(sessionWindowMinutes / 60)}h`;
+    const weeklyWindowLabel = weeklyWindowMinutes == null ? '' : `Window: ${Math.round(weeklyWindowMinutes / (60 * 24))}d`;
+    const contextWindowTokens = rateLimits?.contextWindow?.windowTokens ?? null;
+    const contextUsedTokens = rateLimits?.contextWindow?.usedTokens ?? null;
+    const contextLeftTokens = rateLimits?.contextWindow?.leftTokens ?? null;
+    const contextUsedPercent = rateLimits?.contextWindow?.usedPercent ?? null;
+    const contextLevel = typeof contextUsedPercent === 'number' && Number.isFinite(contextUsedPercent)
+        ? clampNumber(contextUsedPercent / 100, 0, 1)
+        : null;
+    const contextUsedLabel = formatTokenCount(contextUsedTokens);
+    const contextLeftLabel = formatTokenCount(contextLeftTokens);
+    const contextWindowLabel = formatTokenCount(contextWindowTokens);
+    const contextUsedPercentLabel = typeof contextUsedPercent === 'number' && Number.isFinite(contextUsedPercent)
+        ? `${Math.round(clampNumber(contextUsedPercent, 0, 100))}%`
+        : 'Unknown';
+    const hasContextUsageSnapshot = rateLimits?.contextWindow != null;
+    useEffect(() => {
+        if (hasContextUsageSnapshot) {
+            return;
+        }
+        setContextPopoverOpen(false);
+        clearContextPopoverCloseTimer();
+    }, [hasContextUsageSnapshot]);
+    useLayoutEffect(() => {
+        const target = notebookLabelRef.current;
+        if (!target) {
+            setIsNotebookLabelTruncated(false);
+            return;
+        }
+        const update = () => {
+            const next = target.scrollWidth - target.clientWidth > 1;
+            setIsNotebookLabelTruncated(prev => (prev === next ? prev : next));
+        };
+        update();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', update);
+            return () => {
+                window.removeEventListener('resize', update);
+            };
+        }
+        const observer = new ResizeObserver(() => {
+            update();
+        });
+        observer.observe(target);
+        if (target.parentElement) {
+            observer.observe(target.parentElement);
+        }
+        window.addEventListener('resize', update);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', update);
+        };
+    }, [currentNotebookPath]);
+    return (_jsxs("div", { className: "jp-CodexChat", children: [_jsxs("div", { className: "jp-CodexChat-header", children: [_jsxs("div", { className: "jp-CodexChat-header-top", children: [_jsxs("div", { className: "jp-CodexChat-header-left", children: [_jsx(StatusPill, { status: status }), _jsx("span", { className: "jp-CodexChat-notebookWrap", "data-full-name": isNotebookLabelTruncated ? displayPath : undefined, children: _jsx("span", { className: "jp-CodexChat-notebook", ref: notebookLabelRef, title: isNotebookLabelTruncated ? displayPath : undefined, children: displayPath }) })] }), _jsxs("div", { className: "jp-CodexChat-header-actions", children: [_jsx("button", { type: "button", onClick: () => void startNewThread(), className: "jp-CodexHeaderBtn", disabled: !currentNotebookPath || status === 'running', "aria-label": "New thread", title: "New thread", children: _jsx(PlusIcon, { width: 16, height: 16 }) }), _jsx("div", { className: "jp-CodexMenuWrap", ref: usageMenuWrapRef, children: _jsx("button", { type: "button", className: `jp-CodexHeaderBtn jp-CodexHeaderBtn-icon jp-CodexUsageBtn${usagePopoverOpen ? ' is-active is-open' : ''}${usageIsStale ? ' is-stale' : ''}${usageIsOverdue ? ' is-overdue' : ''}`, ref: usageBtnRef, onClick: () => toggleUsagePopover(), "aria-label": sessionLeftPercent == null ? 'Codex usage' : `Codex usage: ${sessionLeftPercent}% left`, "aria-haspopup": "dialog", "aria-expanded": usagePopoverOpen, title: sessionLeftPercent == null
+                                                ? 'Codex usage: unknown'
+                                                : `Codex usage: ${sessionLeftPercent}% left (resets in ${sessionResetsIn})`, children: _jsx(BatteryIcon, { level: batteryLevel, width: 16, height: 16 }) }) }), _jsxs(PortalMenu, { open: usagePopoverOpen, anchorRef: usageBtnRef, popoverRef: usagePopoverRef, className: "jp-CodexUsagePopover", ariaLabel: "Codex usage", role: "dialog", align: "right", children: [(usageIsOverdue || usageIsStale) && (_jsxs("div", { className: `jp-CodexUsageNotice${usageIsOverdue ? ' is-overdue' : usageIsStale ? ' is-stale' : ''}`, children: [_jsx("div", { className: "jp-CodexUsageNoticeTitle", children: usageIsUnknown
+                                                            ? 'Usage unavailable'
+                                                            : usageIsOverdue
+                                                                ? 'Overdue usage snapshot'
+                                                                : 'Stale usage snapshot' }), _jsx("div", { className: "jp-CodexUsageNoticeBody", children: usageIsUnknown ? 'Run Codex once to fetch usage limits.' : 'Run Codex again to refresh these numbers.' })] })), _jsxs("div", { className: "jp-CodexUsageSection", children: [_jsxs("div", { className: "jp-CodexUsageSectionTop", children: [_jsx("div", { className: "jp-CodexUsageSectionTitle", children: "Session" }), _jsxs("div", { className: "jp-CodexUsageSectionReset", children: ["Resets in ", sessionResetsIn] })] }), _jsx("div", { className: "jp-CodexUsageBar", children: _jsx("div", { className: `jp-CodexUsageBarFill${usageIsStale ? ' is-stale' : ''}`, style: { width: `${sessionLeftPercent ?? 0}%` } }) }), _jsxs("div", { className: "jp-CodexUsageMeta", children: [_jsx("div", { className: "jp-CodexUsageMetaLeft", children: sessionLeftPercent == null ? '--% left' : `${sessionLeftPercent}% left` }), _jsx("div", { className: "jp-CodexUsageMetaRight", children: sessionWindowLabel })] })] }), _jsx("div", { className: "jp-CodexMenuDivider", role: "separator" }), _jsxs("div", { className: "jp-CodexUsageSection", children: [_jsxs("div", { className: "jp-CodexUsageSectionTop", children: [_jsx("div", { className: "jp-CodexUsageSectionTitle", children: "Weekly" }), _jsxs("div", { className: "jp-CodexUsageSectionReset", children: ["Resets in ", weeklyResetsIn] })] }), _jsx("div", { className: "jp-CodexUsageBar", children: _jsx("div", { className: `jp-CodexUsageBarFill${usageIsStale ? ' is-stale' : ''}`, style: { width: `${weeklyLeftPercent ?? 0}%` } }) }), _jsxs("div", { className: "jp-CodexUsageMeta", children: [_jsx("div", { className: "jp-CodexUsageMetaLeft", children: weeklyLeftPercent == null ? '--% left' : `${weeklyLeftPercent}% left` }), _jsx("div", { className: "jp-CodexUsageMetaRight", children: weeklyWindowLabel })] })] }), _jsxs("div", { className: "jp-CodexUsageFooter", children: ["Last updated: ", usageUpdatedAgo] })] }), _jsx("button", { type: "button", onClick: () => {
+                                            setSettingsOpen(open => !open);
+                                            setModelMenuOpen(false);
+                                            setReasoningMenuOpen(false);
+                                            setUsagePopoverOpen(false);
+                                            setPermissionMenuOpen(false);
+                                            setContextPopoverOpen(false);
+                                        }, className: `jp-CodexHeaderBtn jp-CodexHeaderBtn-icon${settingsOpen ? ' is-active' : ''}`, "aria-label": "Settings", "aria-expanded": settingsOpen, title: "Settings", children: _jsx(GearIcon, { width: 16, height: 16 }) })] })] }), currentSession?.pairedOk === false && (_jsxs("div", { className: "jp-CodexPairingNotice", role: "status", "aria-live": "polite", children: [_jsx("div", { className: "jp-CodexPairingNotice-title", children: "Jupytext pairing required" }), _jsx("div", { className: "jp-CodexPairingNotice-body", children: currentSession.pairedMessage ||
+                                    'This notebook must be paired (.ipynb ↔ .py) via Jupytext to enable running.' })] }))] }), _jsx("div", { className: "jp-CodexChat-body", children: _jsxs("div", { className: "jp-CodexChat-messages", ref: scrollRef, onScroll: onScrollMessages, children: [status === 'disconnected' && !isReconnecting && (_jsxs("div", { className: "jp-CodexChat-message jp-CodexChat-system jp-CodexChat-reconnectNotice", children: [_jsx("div", { className: "jp-CodexChat-role", children: "system" }), _jsx("div", { className: "jp-CodexChat-text", children: "Codex connection was lost. Reconnect to continue." }), _jsx("button", { type: "button", className: "jp-CodexReconnectBtn", onClick: () => reconnectSocket(), disabled: isReconnecting, "aria-label": isReconnecting ? 'Codex reconnecting' : 'Reconnect to Codex', title: isReconnecting ? 'Attempting to reconnect...' : 'Reconnect to Codex', children: isReconnecting ? 'Connecting...' : 'Reconnect' })] })), messages.length === 0 && (_jsxs("div", { className: "jp-CodexChat-message jp-CodexChat-system", children: [_jsx("div", { className: "jp-CodexChat-role", children: "system" }), _jsx("div", { className: "jp-CodexChat-text", children: "Select a notebook, then start a conversation." })] })), messages.map(entry => {
+                            if (entry.kind === 'text') {
+                                const systemVariant = entry.role === 'system'
+                                    ? isSessionStartNotice(entry.text, entry.sessionResolution)
+                                        ? ' is-success'
+                                        : ''
+                                    : '';
+                                const imageCount = entry.attachments?.images ?? 0;
+                                const selectionPreview = entry.selectionPreview;
+                                const cellOutputPreview = entry.cellOutputPreview;
+                                const hasSelectionPreview = entry.role === 'user' &&
+                                    Boolean(selectionPreview?.locationLabel && selectionPreview?.previewText);
+                                const hasCellOutputPreview = entry.role === 'user' &&
+                                    Boolean(cellOutputPreview?.locationLabel && cellOutputPreview?.previewText);
+                                const hasContextPreview = hasSelectionPreview || hasCellOutputPreview;
+                                const isSelectionPreviewOpen = hasContextPreview && selectionPopover?.messageId === entry.id;
+                                const messageClassName = `jp-CodexChat-message jp-CodexChat-${entry.role}${systemVariant}${hasContextPreview ? ' has-selection-preview' : ''}${isSelectionPreviewOpen ? ' is-selection-open' : ''}`;
+                                return (_jsxs("div", { className: messageClassName, children: [_jsx("div", { className: "jp-CodexChat-role", children: entry.role }), _jsx(MessageText, { text: entry.text, canCopyCode: entry.role === 'assistant' }), imageCount > 0 && (_jsx("div", { className: "jp-CodexChat-attachments", "aria-label": `${imageCount} image attachment(s)`, title: `${imageCount} image attachment(s)`, children: _jsxs("span", { className: "jp-CodexChat-attachmentPill", children: [_jsx(ImageIcon, { width: 14, height: 14 }), _jsx("span", { className: "jp-CodexChat-attachmentCount", children: imageCount })] }) })), hasContextPreview && (_jsx("button", { type: "button", className: `jp-CodexChat-selectionToggle${isSelectionPreviewOpen ? ' is-open' : ''}`, onClick: event => toggleSelectionPopover(entry.id, {
+                                                ...(selectionPreview ? { selectionPreview } : {}),
+                                                ...(cellOutputPreview ? { cellOutputPreview } : {})
+                                            }, event), "aria-label": isSelectionPreviewOpen ? 'Hide message context' : 'Show message context', children: _jsx(PlusIcon, { width: "1em", height: "1em" }) }))] }, entry.id));
+                            }
+                            if (entry.kind === 'run-divider') {
+                                return (_jsx("div", { className: "jp-CodexRunDivider", role: "separator", "aria-label": "Run duration", children: _jsxs("span", { className: "jp-CodexRunDividerLabel", children: ["Worked for ", formatRunDuration(entry.elapsedMs)] }) }, entry.id));
+                            }
+                            const item = entry.item;
+                            const trimmedDetail = (item.detail || '').trim();
+                            const isExpandable = Boolean(trimmedDetail);
+                            const activityClassName = `jp-CodexChat-message jp-CodexChat-activity${isExpandable ? ' is-expandable' : ''} is-${item.category}${item.phase ? ` is-${item.phase}` : ''}`;
+                            const icon = item.category === 'file' ? (_jsx(FileIcon, { width: 14, height: 14 })) : item.phase === 'completed' ? (_jsx(CheckIcon, { width: 14, height: 14 })) : item.phase === 'started' ? (_jsx("span", { className: "jp-CodexActivityDot" })) : (_jsx("span", { className: "jp-CodexActivityDot is-idle" }));
+                            const summaryContent = (_jsxs(_Fragment, { children: [_jsx("span", { className: "jp-CodexActivityLineIcon", "aria-hidden": "true", children: icon }), _jsx("span", { className: "jp-CodexActivityLineText", children: _jsx("span", { className: "jp-CodexActivityLineTitle", children: item.title }) })] }));
+                            if (isExpandable) {
+                                return (_jsxs("details", { className: activityClassName, role: "status", "aria-live": "polite", children: [_jsx("summary", { className: "jp-CodexActivitySummary", children: summaryContent }), _jsx("div", { className: "jp-CodexActivityBody", children: _jsx("pre", { className: "jp-CodexActivityCode", children: _jsx("code", { children: trimmedDetail }) }) })] }, entry.id));
+                            }
+                            return (_jsx("div", { className: activityClassName, role: "status", "aria-live": "polite", children: _jsx("div", { className: "jp-CodexActivitySummary jp-CodexActivitySummaryStatic", children: summaryContent }) }, entry.id));
+                        }), status === 'running' && (_jsx("div", { className: `jp-CodexChat-loading${progressKind === 'reasoning' ? ' is-reasoning' : ''}`, "aria-label": progressKind === 'reasoning' ? 'Reasoning' : 'Running', children: _jsxs("div", { className: "jp-CodexChat-loading-dots", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }) })), _jsx("div", { ref: endRef })] }) }), _jsx(PortalMenu, { open: Boolean(selectionPopover), anchorRef: selectionPopoverAnchorRef, popoverRef: selectionPopoverRef, className: "jp-CodexChat-selectionPopover", ariaLabel: "Message context", constrainHeightToViewport: true, viewportMargin: 20, role: "dialog", align: "right", children: selectionPopover && (_jsxs("div", { className: "jp-CodexChat-selectionCard", role: "note", "aria-label": "Message context", children: [selectionPopover.preview.selectionPreview && (_jsxs("div", { className: "jp-CodexChat-contextSection", children: [_jsx("div", { className: "jp-CodexChat-selectionMeta", children: selectionPopover.preview.selectionPreview.locationLabel }), _jsx(SelectionPreviewCode, { code: selectionPopover.preview.selectionPreview.previewText })] })), selectionPopover.preview.cellOutputPreview && (_jsxs("div", { className: "jp-CodexChat-contextSection", children: [_jsx("div", { className: "jp-CodexChat-selectionMeta", children: selectionPopover.preview.cellOutputPreview.locationLabel }), _jsx(SelectionPreviewCode, { code: selectionPopover.preview.cellOutputPreview.previewText })] }))] })) }), _jsx(PortalMenu, { open: cellAttachmentPopoverOpen && showCellAttachmentBadge, anchorRef: cellAttachmentAnchorRef, popoverRef: cellAttachmentPopoverRef, className: "jp-CodexCellAttachmentPopoverMenu", ariaLabel: "Cell attachment details", role: "dialog", align: "left", onMouseEnter: openCellAttachmentPopover, onMouseLeave: scheduleCloseCellAttachmentPopover, children: _jsxs("div", { className: "jp-CodexCellAttachmentPopoverCard", role: "note", "aria-label": "Cell attachment details", children: [_jsx("div", { className: "jp-CodexCellAttachmentPopoverTitle", children: "Attach On Next Send" }), _jsxs("div", { className: "jp-CodexCellAttachmentPopoverRow", children: [_jsx("span", { children: "Current cell content" }), _jsx("span", { className: `jp-CodexCellAttachmentDot ${cellAttachmentContentEnabled ? 'is-on' : 'is-off'}`, "aria-label": cellAttachmentContentEnabled ? 'Attached' : 'Not attached', title: cellAttachmentContentEnabled ? 'Attached' : 'Not attached' })] }), _jsxs("div", { className: "jp-CodexCellAttachmentPopoverRow", children: [_jsx("span", { children: "Current cell output" }), _jsx("span", { className: `jp-CodexCellAttachmentDot ${cellAttachmentOutputEnabled ? 'is-on' : 'is-off'}`, "aria-label": cellAttachmentOutputEnabled ? 'Attached' : 'Not attached', title: cellAttachmentOutputEnabled ? 'Attached' : 'Not attached' })] })] }) }), _jsxs("div", { className: "jp-CodexChat-input", children: [_jsx("div", { className: `jp-CodexJumpBar${isAtBottom ? '' : ' is-visible'}`, children: _jsx("button", { type: "button", className: "jp-CodexJumpToLatestBtn", onClick: scrollToBottom, "aria-label": "Jump to latest", "aria-hidden": isAtBottom, tabIndex: isAtBottom ? -1 : 0, title: "Jump to latest", children: _jsx(ArrowDownIcon, { width: 20, height: 20 }) }) }), _jsxs("div", { className: "jp-CodexComposer", children: [_jsx("div", { className: `jp-CodexCellAttachmentWrap jp-CodexComposer-cellAttachmentWrap${showCellAttachmentBadge ? ' is-visible' : ''}`, ref: cellAttachmentAnchorRef, "aria-hidden": !showCellAttachmentBadge, onMouseEnter: openCellAttachmentPopover, onMouseLeave: scheduleCloseCellAttachmentPopover, onFocusCapture: openCellAttachmentPopover, onBlurCapture: handleCellAttachmentBlur, children: _jsx("div", { role: "group", "aria-label": "Active-cell attachment", children: _jsxs("button", { type: "button", className: `jp-CodexComposer-cellAttachment${cellAttachmentContentEnabled ? '' : ' is-off'}`, onClick: () => setIncludeActiveCell(value => !value), "aria-pressed": cellAttachmentContentEnabled, "aria-label": cellAttachmentContentEnabled ? 'Disable active-cell attachment' : 'Enable active-cell attachment', title: cellAttachmentContentEnabled ? 'Disable active-cell attachment' : 'Enable active-cell attachment', disabled: !showCellAttachmentBadge, tabIndex: showCellAttachmentBadge ? 0 : -1, children: [_jsx(CellAttachmentIcon, { active: cellAttachmentContentEnabled, width: 15, height: 15 }), _jsx("span", { className: "jp-CodexComposer-cellAttachmentLabel", children: "Cell Attatch" })] }) }) }), _jsx("textarea", { ref: composerTextareaRef, value: input, onChange: e => {
+                                    updateInput(e.currentTarget.value);
+                                    // Resize using the current target so typing feels immediate.
+                                    window.requestAnimationFrame(() => autosizeComposerTextarea(e.currentTarget));
+                                }, onPaste: onComposerPaste, placeholder: currentSession?.pairedOk === false
+                                    ? 'Disabled: missing Jupytext paired file (.py)'
+                                    : currentNotebookPath
+                                        ? 'Ask Codex...'
+                                        : 'Select a notebook first', rows: 1, onKeyDown: e => {
+                                    // Avoid interfering with IME composition (Korean/Japanese/etc.)
+                                    const native = e.nativeEvent;
+                                    if (native.isComposing || native.keyCode === 229) {
+                                        return;
+                                    }
+                                    if (e.key !== 'Enter' || e.shiftKey) {
+                                        return;
+                                    }
+                                    if (status === 'running') {
+                                        e.preventDefault();
+                                        return;
+                                    }
+                                    if (canSendNow) {
+                                        e.preventDefault();
+                                        void sendMessage();
+                                    }
+                                } }), pendingImages.length > 0 && (_jsx("div", { className: "jp-CodexComposer-attachments", role: "group", "aria-label": "Attachments", children: pendingImages.map(image => (_jsxs("div", { className: "jp-CodexComposer-attachment", children: [_jsx("img", { src: image.previewUrl, alt: image.file.name || 'Pasted image' }), _jsx("button", { type: "button", className: "jp-CodexComposer-attachmentRemove", onClick: () => removePendingImage(image.id), "aria-label": "Remove image", title: "Remove image", children: _jsx(XIcon, { width: 14, height: 14 }) })] }, image.id))) })), _jsxs("div", { className: "jp-CodexComposer-toolbar", children: [_jsxs("div", { className: "jp-CodexComposer-toolbarLeft", children: [_jsx("div", { className: "jp-CodexMenuWrap jp-CodexModelWrap", ref: modelMenuWrapRef, children: _jsx("button", { type: "button", ref: modelBtnRef, className: `jp-CodexModelBtn ${modelMenuOpen ? 'is-open' : ''}`, onClick: () => {
+                                                        setModelMenuOpen(open => !open);
+                                                        setReasoningMenuOpen(false);
+                                                        setUsagePopoverOpen(false);
+                                                        setPermissionMenuOpen(false);
+                                                        setContextPopoverOpen(false);
+                                                    }, disabled: status === 'running', "aria-label": `Model: ${selectedModelLabel}`, "aria-haspopup": "menu", "aria-expanded": modelMenuOpen, title: `Model: ${selectedModelLabel}`, children: _jsx("span", { className: "jp-CodexModelBtn-label", children: selectedModelLabel }) }) }), _jsxs(PortalMenu, { open: modelMenuOpen, anchorRef: modelBtnRef, popoverRef: modelPopoverRef, role: "menu", ariaLabel: "Model", align: "left", children: [modelOptions.length === 0 && (_jsx("div", { className: "jp-CodexMenuItem", children: "No models available" })), modelOptions.map(option => {
+                                                        const inferred = activeModelOption === '__config__' && autoModel && modelOptions.some(option => option.value === autoModel)
+                                                            ? autoModel
+                                                            : activeModelOption;
+                                                        const isActive = inferred === option.value;
+                                                        return (_jsxs("button", { type: "button", className: `jp-CodexMenuItem ${isActive ? 'is-active' : ''}`, onClick: () => {
+                                                                setCurrentSessionModelOption(option.value);
+                                                                setModelMenuOpen(false);
+                                                            }, children: [_jsx("span", { className: "jp-CodexMenuItemLabel", children: option.label }), isActive && (_jsx(CheckIcon, { className: "jp-CodexMenuCheck", width: 16, height: 16 }))] }, option.value));
+                                                    })] }), _jsx("div", { className: "jp-CodexMenuWrap", ref: reasoningMenuWrapRef, children: _jsx("button", { type: "button", ref: reasoningBtnRef, className: `jp-CodexIconBtn ${reasoningMenuOpen ? 'is-open' : ''}`, onClick: () => {
+                                                        setReasoningMenuOpen(open => !open);
+                                                        setModelMenuOpen(false);
+                                                        setUsagePopoverOpen(false);
+                                                        setPermissionMenuOpen(false);
+                                                        setContextPopoverOpen(false);
+                                                    }, disabled: status === 'running', "aria-label": `Reasoning: ${selectedReasoningLabel}`, "aria-haspopup": "menu", "aria-expanded": reasoningMenuOpen, title: `Reasoning: ${selectedReasoningLabel}`, children: _jsx(ReasoningEffortIcon, { isConfig: activeReasoningEffort === '__config__' && !autoReasoningEffort, activeBars: getReasoningEffortBars((activeReasoningEffort === '__config__' && autoReasoningEffort
+                                                            ? autoReasoningEffort
+                                                            : activeReasoningEffort), reasoningOptions), width: 17, height: 17 }) }) }), _jsxs(PortalMenu, { open: reasoningMenuOpen, anchorRef: reasoningBtnRef, popoverRef: reasoningPopoverRef, role: "menu", ariaLabel: "Reasoning", align: "left", children: [reasoningOptions.length === 0 && (_jsx("div", { className: "jp-CodexMenuItem", children: "No reasoning options" })), reasoningOptions.map(option => {
+                                                        const inferred = activeReasoningEffort === '__config__' && autoReasoningEffort ? autoReasoningEffort : activeReasoningEffort;
+                                                        const isActive = inferred === option.value;
+                                                        return (_jsxs("button", { type: "button", className: `jp-CodexMenuItem ${isActive ? 'is-active' : ''}`, onClick: () => {
+                                                                setCurrentSessionReasoningEffort(option.value);
+                                                                setReasoningMenuOpen(false);
+                                                            }, children: [_jsx("span", { className: "jp-CodexMenuItemLabel", children: option.label }), isActive && (_jsx(CheckIcon, { className: "jp-CodexMenuCheck", width: 16, height: 16 }))] }, option.value));
+                                                    })] }), _jsx("div", { className: "jp-CodexMenuWrap", ref: permissionMenuWrapRef, children: _jsx("button", { type: "button", className: `jp-CodexIconBtn jp-CodexPermissionBtn${permissionMenuOpen ? ' is-open' : ''}${activeSandboxMode === 'danger-full-access' ? ' is-danger' : ''}${activeSandboxMode === 'read-only' ? ' is-warning' : ''}`, ref: permissionBtnRef, onClick: () => {
+                                                        setPermissionMenuOpen(open => !open);
+                                                        setModelMenuOpen(false);
+                                                        setReasoningMenuOpen(false);
+                                                        setUsagePopoverOpen(false);
+                                                        setContextPopoverOpen(false);
+                                                    }, disabled: status === 'running', "aria-label": `Permission: ${selectedSandboxLabel}`, "aria-haspopup": "menu", "aria-expanded": permissionMenuOpen, title: `Permission: ${selectedSandboxLabel}`, children: _jsx(ShieldIcon, { width: 17, height: 17 }) }) }), _jsx(PortalMenu, { open: permissionMenuOpen, anchorRef: permissionBtnRef, popoverRef: permissionPopoverRef, role: "menu", ariaLabel: "Permissions", align: "right", children: SANDBOX_OPTIONS.map(option => (_jsxs("button", { type: "button", className: `jp-CodexMenuItem ${activeSandboxMode === option.value ? 'is-active' : ''}`, onClick: () => {
+                                                        setCurrentSessionSandboxMode(option.value);
+                                                        setPermissionMenuOpen(false);
+                                                    }, children: [_jsx("span", { className: "jp-CodexMenuItemLabel", children: option.label }), activeSandboxMode === option.value && _jsx(CheckIcon, { className: "jp-CodexMenuCheck", width: 16, height: 16 })] }, option.value))) }), hasContextUsageSnapshot && (_jsxs("div", { className: "jp-CodexContextWrap", ref: contextMenuWrapRef, onMouseEnter: openContextPopover, onMouseLeave: scheduleCloseContextPopover, onFocusCapture: openContextPopover, onBlurCapture: handleContextPopoverBlur, children: [_jsx("button", { type: "button", className: `jp-CodexIconBtn jp-CodexContextBtn${usageIsStale ? ' is-stale' : ''}`, ref: contextBtnRef, "aria-label": contextUsedTokens == null || contextLeftTokens == null
+                                                            ? 'Context window usage unavailable'
+                                                            : `Context window: used ${contextUsedLabel} tokens, left ${contextLeftLabel} tokens`, title: contextUsedTokens == null || contextLeftTokens == null
+                                                            ? 'Context window usage unavailable'
+                                                            : `Used ${contextUsedLabel} / left ${contextLeftLabel}`, children: _jsx(ContextWindowIcon, { level: contextLevel, width: 20, height: 20 }) }), _jsxs(PortalMenu, { open: contextPopoverOpen, anchorRef: contextBtnRef, popoverRef: contextPopoverRef, className: "jp-CodexContextPopover", role: "tooltip", ariaLabel: "Context window", align: "right", onMouseEnter: openContextPopover, onMouseLeave: scheduleCloseContextPopover, children: [_jsx("div", { className: "jp-CodexContextPopoverTitle", children: "Context window" }), _jsxs("div", { className: "jp-CodexContextPopoverRow", children: [_jsx("span", { children: "Used" }), _jsx("strong", { children: contextUsedLabel })] }), _jsxs("div", { className: "jp-CodexContextPopoverRow", children: [_jsx("span", { children: "Left" }), _jsx("strong", { children: contextLeftLabel })] }), _jsx("div", { className: "jp-CodexContextPopoverMeta", children: contextWindowTokens == null
+                                                                    ? 'Window size unavailable'
+                                                                    : `Window: ${contextWindowLabel} tokens (${contextUsedPercentLabel} used)` })] })] }))] }), _jsx("div", { className: "jp-CodexComposer-toolbarRight", children: _jsx("button", { type: "button", className: `jp-CodexSendBtn${sendButtonMode === 'stop' ? ' is-stop' : ''}`, onClick: () => {
+                                                if (sendButtonMode === 'stop') {
+                                                    cancelRun();
+                                                    return;
+                                                }
+                                                void sendMessage();
+                                            }, disabled: sendButtonDisabled, "aria-label": sendButtonMode === 'stop' ? 'Stop run' : 'Send', title: sendButtonMode === 'stop'
+                                                ? currentSession?.activeRunId
+                                                    ? `runId: ${currentSession.activeRunId}`
+                                                    : 'Waiting for run id...'
+                                                : status === 'disconnected'
+                                                    ? 'Connecting...'
+                                                    : 'Send', children: sendButtonMode === 'stop' ? (_jsx(StopIcon, { width: 18, height: 18 })) : (_jsx(ArrowUpIcon, { width: 18, height: 18 })) }) })] })] })] }), settingsOpen && (_jsxs("div", { className: "jp-CodexSettingsOverlay", role: "dialog", "aria-modal": "true", "aria-label": "Settings", children: [_jsx("button", { type: "button", className: "jp-CodexSettingsBackdrop", onClick: () => setSettingsOpen(false), "aria-label": "Dismiss settings", title: "Dismiss settings" }), _jsxs("div", { className: "jp-CodexSettingsPanel", onClick: e => e.stopPropagation(), children: [_jsxs("div", { className: "jp-CodexSettingsPanel-top", children: [_jsx("div", { className: "jp-CodexSettingsPanel-title", children: "Settings" }), _jsx("button", { type: "button", className: "jp-CodexHeaderBtn jp-CodexHeaderBtn-icon", onClick: () => setSettingsOpen(false), "aria-label": "Close settings", title: "Close", children: _jsx(XIcon, { width: 16, height: 16 }) })] }), _jsxs("div", { className: "jp-CodexSettingsPanel-sections", children: [_jsxs("section", { className: "jp-CodexSettingsSection", "aria-label": "General settings", children: [_jsx("div", { className: "jp-CodexSettingsSection-title", children: "General" }), _jsxs("label", { className: "jp-CodexSettingsField", children: [_jsx("span", { className: "jp-CodexSettingsField-label", children: "Codex command path" }), _jsx("input", { type: "text", className: "jp-CodexChat-model-input", placeholder: "codex", value: commandPath, disabled: status === 'running', onChange: e => setCommandPath(e.currentTarget.value.trimStart()), title: "Leave empty to use PATH lookup." }), _jsx("span", { className: "jp-CodexSettingsField-help", children: "Leave empty to use PATH lookup." })] })] }), _jsxs("section", { className: "jp-CodexSettingsSection", "aria-label": "Message options", children: [_jsx("div", { className: "jp-CodexSettingsSection-title", children: "Message Options" }), _jsxs("div", { className: "jp-CodexSettingsOptions", children: [_jsxs("label", { className: "jp-CodexChat-toggle", children: [_jsx("input", { type: "checkbox", checked: autoSaveBeforeSend, onChange: e => setAutoSaveBeforeSend(e.currentTarget.checked), disabled: status === 'running' }), "Auto-save before send"] }), _jsxs("label", { className: "jp-CodexChat-toggle", children: [_jsx("input", { type: "checkbox", checked: includeActiveCell, onChange: e => setIncludeActiveCell(e.currentTarget.checked), disabled: status === 'running' }), "Include active cell"] }), _jsxs("label", { className: "jp-CodexChat-toggle", children: [_jsx("input", { type: "checkbox", checked: includeActiveCellOutput, onChange: e => setIncludeActiveCellOutput(e.currentTarget.checked), disabled: status === 'running' || !includeActiveCell }), "Include active cell output"] })] })] }), _jsxs("section", { className: "jp-CodexSettingsSection", "aria-label": "Notification options", children: [_jsx("div", { className: "jp-CodexSettingsSection-title", children: "NOTIFICATION" }), _jsxs("div", { className: "jp-CodexSettingsOptions", children: [_jsxs("label", { className: "jp-CodexChat-toggle", children: [_jsx("input", { type: "checkbox", checked: notifyOnDone, onChange: e => void updateNotifyOnDone(e.currentTarget.checked), disabled: status === 'running' || notificationsUnsupported }), "Notify when run finishes"] }), _jsxs("label", { className: "jp-CodexSettingsField", children: [_jsx("span", { className: "jp-CodexSettingsField-label", children: "Minimum runtime (seconds)" }), _jsx("input", { type: "number", min: "0", step: "1", className: "jp-CodexChat-model-input", value: notifyOnDoneMinSeconds, onChange: e => setNotifyOnDoneMinSeconds(Number.isFinite(Number(e.currentTarget.value)) ? Math.max(0, Math.floor(Number(e.currentTarget.value))) : 0), disabled: notificationsUnsupported }), _jsx("span", { className: "jp-CodexSettingsField-help", children: "0 means notify for every finished run. Enter only when you want delayed notifications." })] }), _jsx("span", { className: "jp-CodexSettingsField-help", children: notificationHelpText })] })] }), _jsxs("section", { className: "jp-CodexSettingsSection jp-CodexSettingsSection-danger", "aria-label": "Danger zone", children: [_jsx("div", { className: "jp-CodexSettingsSection-title jp-CodexSettingsSection-title-danger", children: "Danger Zone" }), _jsx("div", { className: "jp-CodexSettingsPanel-stats", children: _jsxs("span", { className: "jp-CodexSettingsPanel-stat", children: ["Saved conversations: ", storedThreadCount] }) }), _jsx("div", { className: "jp-CodexSettingsDanger", children: _jsx("button", { type: "button", className: "jp-CodexBtn jp-CodexBtn-xs jp-CodexBtn-danger", onClick: () => void clearAllSessions(), disabled: status === 'running' || (storedThreadCount === 0 && sessions.size === 0), title: status === 'running'
+                                                        ? 'Cannot delete while a run is in progress.'
+                                                        : 'Delete all saved conversations', children: "Delete all" }) })] })] })] })] }))] }));
+}
+//# sourceMappingURL=codexChat.js.map