@jrkropp/codex-js 0.1.2 → 0.1.3

package/dist/chunk-ILXA6HLX.js

@@ -0,0 +1,1973 @@
+import { buildOptimisticUserMessageTurnItem, deriveContextWindowSnapshotFromTokenUsage, proposedPlanTitle, normalizePendingUserInputQuestion, TooltipProvider, ChatView, ChatComposer, useComposerDraftStore, defaultCodexModel, defaultCodexReasoningEffort, resolvePlanFollowUpSubmission, buildRequestUserInputResponse, buildPlanImplementationPrompt, createComposerImageAttachments } from './chunk-NCI4MAWZ.js';
+import { Sidebar, SidebarProvider, SidebarInset } from './chunk-FN3SWHRH.js';
+import { ThreadEventStore, AppServerSession, threadEventSnapshotHasStarted } from './chunk-6ZMJ34KE.js';
+import { thread_token_usage_updated_notification_from_rollout_items } from './chunk-V4BMZWBM.js';
+import { asThreadId } from './chunk-LWQNX4LI.js';
+import { createContext, useMemo, useState, useRef, useCallback, useEffect, createElement, Fragment as Fragment$1, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function createLocalDispatchSnapshot(threadState) {
+  return {
+    errorCount: threadState?.errors.length ?? 0,
+    itemIds: threadTurnItemIds(threadState),
+    runningTurnIds: [...threadState?.activeTurnIds ?? []],
+    startedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+function hasServerAcknowledgedLocalDispatch(input) {
+  const localDispatch = input.localDispatch;
+  if (!localDispatch) {
+    return false;
+  }
+  if (input.hasPendingRequest || Boolean(input.runtimeError)) {
+    return true;
+  }
+  const runningTurnIds = input.threadState?.activeTurnIds ?? [];
+  if (runningTurnIds.some(
+    (turnId) => !localDispatch.runningTurnIds.includes(turnId)
+  )) {
+    return true;
+  }
+  if (threadTurnItemIds(input.threadState).some(
+    (itemId) => !localDispatch.itemIds.includes(itemId)
+  )) {
+    return true;
+  }
+  return (input.threadState?.errors.length ?? 0) > localDispatch.errorCount;
+}
+function useLocalDispatchState(input) {
+  const [localDispatch, setLocalDispatch] = useState(null);
+  const beginLocalDispatch = useCallback(() => {
+    setLocalDispatch(
+      (current) => current ?? createLocalDispatchSnapshot(input.threadState)
+    );
+  }, [input.threadState]);
+  const resetLocalDispatch = useCallback(() => {
+    setLocalDispatch(null);
+  }, []);
+  const serverAcknowledgedLocalDispatch = useMemo(
+    () => hasServerAcknowledgedLocalDispatch({
+      hasPendingRequest: input.hasPendingRequest,
+      localDispatch,
+      runtimeError: input.runtimeError,
+      threadState: input.threadState
+    }),
+    [
+      input.hasPendingRequest,
+      input.runtimeError,
+      input.threadState,
+      localDispatch
+    ]
+  );
+  return {
+    beginLocalDispatch,
+    isSendBusy: localDispatch !== null && !serverAcknowledgedLocalDispatch,
+    localDispatch,
+    localDispatchStartedAt: localDispatch?.startedAt ?? null,
+    resetLocalDispatch,
+    serverAcknowledgedLocalDispatch
+  };
+}
+function deriveActiveWorkStartedAt(input) {
+  if (!input.isWorking) {
+    return null;
+  }
+  return input.sendStartedAt ?? input.runtimeStartedAt;
+}
+function deriveAssistantStreaming(threadState) {
+  if (!threadState || threadState.activeTurnIds.length === 0) {
+    return false;
+  }
+  const activeTurnIds = new Set(threadState.activeTurnIds);
+  return threadState.turns.some(
+    (turn) => activeTurnIds.has(turn.id) && turn.items.some(
+      (item) => item.type === "agentMessage" && item.text.length > 0
+    )
+  );
+}
+function deriveChatLifecycleWorkingState(input) {
+  return Boolean(input.threadState?.activeTurnIds.length) || input.isSendBusy || input.connectionStatus === "connecting" || input.connectionStatus === "reconnecting";
+}
+function threadTurnItemIds(threadState) {
+  return threadState?.turns.flatMap((turn) => turn.items.map((item) => item.id)) ?? [];
+}
+function createDefaultTurnStartParams({
+  clientMessageId,
+  imageUrls,
+  interactionMode = "default",
+  runtimeMode,
+  sendContext,
+  threadId
+}) {
+  const collaborationMode = interactionMode === "plan" ? {
+    mode: "plan",
+    settings: {
+      model: sendContext.model,
+      reasoning_effort: sendContext.effort ?? null,
+      developer_instructions: null
+    }
+  } : void 0;
+  return {
+    clientMessageId,
+    ...collaborationMode ? { collaborationMode } : {},
+    ...runtimeModeToTurnPolicy(runtimeMode),
+    effort: sendContext.effort,
+    input: [
+      ...sendContext.items.map(composerUserInputToProtocolUserInput),
+      ...imageUrls.map((url) => ({ type: "image", url }))
+    ],
+    model: sendContext.model,
+    threadId
+  };
+}
+function runtimeModeToTurnPolicy(runtimeMode) {
+  if (runtimeMode === "approval-required") {
+    return {
+      approvalPolicy: "on-request",
+      sandboxPolicy: {
+        type: "workspaceWrite",
+        writableRoots: [],
+        networkAccess: false,
+        excludeTmpdirEnvVar: false,
+        excludeSlashTmp: false
+      }
+    };
+  }
+  if (runtimeMode === "auto-accept-edits") {
+    return {
+      approvalPolicy: "on-failure",
+      sandboxPolicy: {
+        type: "workspaceWrite",
+        writableRoots: [],
+        networkAccess: false,
+        excludeTmpdirEnvVar: false,
+        excludeSlashTmp: false
+      }
+    };
+  }
+  if (runtimeMode === "full-access") {
+    return {
+      approvalPolicy: "never",
+      sandboxPolicy: { type: "dangerFullAccess" }
+    };
+  }
+  return {};
+}
+function useCodexChatLifecycle(options) {
+  const threadId = useMemo(() => normalizeThreadId(options.threadId), [options.threadId]);
+  const [threadSnapshot, setThreadSnapshot] = useState(
+    options.initialState?.thread?.id === threadId ? options.initialState : null
+  );
+  const [activeThread, setActiveThread] = useState(null);
+  const [runtimeError, setRuntimeError] = useState(null);
+  const [isSending, setIsSending] = useState(false);
+  const [reconnectToken, setReconnectToken] = useState(0);
+  const [optimisticUserMessages, setOptimisticUserMessages] = useState([]);
+  const [activeRuntimeStartedAt, setActiveRuntimeStartedAt] = useState(
+    null
+  );
+  const activeRuntimeStartedAtRef = useRef(null);
+  const localDispatchStartedAtRef = useRef(null);
+  const pendingComposerSendRef = useRef(null);
+  const sendInFlightRef = useRef(false);
+  const threadStoreRef = useRef(
+    options.initialState?.thread?.id === threadId ? ThreadEventStore.fromThread(options.initialState.thread) : null
+  );
+  const threadSnapshotRef = useRef(threadSnapshot);
+  const activeEventsIteratorRef = useRef(null);
+  const lifecycleGenerationRef = useRef(0);
+  const lifecycleKeyRef = useRef(null);
+  const subscriptionAbortRef = useRef(null);
+  const appServerSession = useMemo(
+    () => new AppServerSession(options.appServer),
+    [options.appServer]
+  );
+  const lifecycleKey = `${threadId}:${options.connectOnMount === false ? "draft" : "server"}`;
+  if (lifecycleKeyRef.current !== lifecycleKey) {
+    lifecycleKeyRef.current = lifecycleKey;
+    lifecycleGenerationRef.current += 1;
+  }
+  const visibleRuntimeError = runtimeError?.threadId === threadId ? runtimeError.message : null;
+  const closeActiveSubscription = useCallback(() => {
+    subscriptionAbortRef.current?.abort();
+    subscriptionAbortRef.current = null;
+    const iterator = activeEventsIteratorRef.current;
+    activeEventsIteratorRef.current = null;
+    void iterator?.return?.();
+  }, []);
+  const visibleOptimisticUserMessages = useMemo(
+    () => optimisticUserMessages.filter((message) => message.threadId === threadId).map((message) => message.item),
+    [optimisticUserMessages, threadId]
+  );
+  const setProtocolConnectionStatus = useCallback(
+    (status) => {
+      const store = threadStoreRef.current;
+      if (!store) {
+        return;
+      }
+      const snapshot = store.setConnectionStatus(status);
+      threadSnapshotRef.current = snapshot;
+      setThreadSnapshot(snapshot);
+    },
+    []
+  );
+  const hasPendingRequest = Boolean(threadSnapshot?.pendingRequests.length);
+  const {
+    beginLocalDispatch,
+    isSendBusy,
+    localDispatchStartedAt,
+    resetLocalDispatch,
+    serverAcknowledgedLocalDispatch
+  } = useLocalDispatchState({
+    hasPendingRequest,
+    runtimeError: visibleRuntimeError,
+    threadState: threadSnapshot
+  });
+  useEffect(() => {
+    threadSnapshotRef.current = threadSnapshot;
+    options.onState?.(threadSnapshot);
+  }, [options, threadSnapshot]);
+  useEffect(() => {
+    activeRuntimeStartedAtRef.current = activeRuntimeStartedAt;
+  }, [activeRuntimeStartedAt]);
+  useEffect(() => {
+    localDispatchStartedAtRef.current = localDispatchStartedAt;
+  }, [localDispatchStartedAt]);
+  const removeOptimisticUserMessage = useCallback((itemId) => {
+    setOptimisticUserMessages(
+      (current) => current.filter((message) => message.item.id !== itemId)
+    );
+  }, []);
+  const restorePendingComposerSend = useCallback(() => {
+    const pendingComposerSend = pendingComposerSendRef.current;
+    if (!pendingComposerSend) {
+      return;
+    }
+    removeOptimisticUserMessage(pendingComposerSend.optimisticItemId);
+    pendingComposerSend.restore?.();
+  }, [removeOptimisticUserMessage]);
+  const handleRuntimeError = useCallback(
+    (error) => {
+      options.onRuntimeError?.(error);
+      if (options.isRecoverableConnectionError?.(error) && !pendingComposerSendRef.current) {
+        resetLocalDispatch();
+        setActiveRuntimeStartedAt(null);
+        setIsSending(false);
+        setProtocolConnectionStatus("error");
+        return;
+      }
+      setRuntimeError({ message: error.message, threadId });
+      if (pendingComposerSendRef.current) {
+        if (!pendingComposerSendRef.current.serverUserMessageAcknowledged) {
+          restorePendingComposerSend();
+        }
+        pendingComposerSendRef.current = null;
+        sendInFlightRef.current = false;
+        setIsSending(false);
+        resetLocalDispatch();
+        setActiveRuntimeStartedAt(null);
+      }
+      setProtocolConnectionStatus("error");
+    },
+    [
+      options,
+      resetLocalDispatch,
+      restorePendingComposerSend,
+      setProtocolConnectionStatus,
+      threadId
+    ]
+  );
+  const handleSubmittedUserMessage = useCallback(
+    (state) => {
+      const pendingComposerSend = pendingComposerSendRef.current;
+      if (pendingComposerSend) {
+        pendingComposerSendRef.current = {
+          ...pendingComposerSend,
+          serverUserMessageAcknowledged: true
+        };
+      }
+      sendInFlightRef.current = false;
+      setIsSending(false);
+      options.onThreadListChanged?.();
+      options.onSubmittedUserMessage?.(state);
+      pendingComposerSendRef.current = null;
+    },
+    [options]
+  );
+  const handleThreadStarted = useCallback(
+    (state) => {
+      const runtimeStartedAt = activeRuntimeStartedAtRef.current ?? localDispatchStartedAtRef.current ?? (/* @__PURE__ */ new Date()).toISOString();
+      setActiveRuntimeStartedAt((current) => current ?? runtimeStartedAt);
+      if (pendingComposerSendRef.current) {
+        pendingComposerSendRef.current = null;
+        sendInFlightRef.current = false;
+        setIsSending(false);
+        options.onThreadListChanged?.();
+      }
+      options.onThreadStarted?.(state);
+    },
+    [options]
+  );
+  const applyServerNotification = useCallback(
+    (notification) => {
+      const store = threadStoreRef.current;
+      if (!store) {
+        return;
+      }
+      const next = store.applyNotification(notification);
+      threadSnapshotRef.current = next;
+      setThreadSnapshot(next);
+      if (notification.method === "item/completed" && notification.params.item.type === "userMessage") {
+        window.setTimeout(() => handleSubmittedUserMessage(next), 0);
+      }
+      if (threadEventSnapshotHasStarted(next)) {
+        window.setTimeout(() => handleThreadStarted(next), 0);
+      }
+    },
+    [handleSubmittedUserMessage, handleThreadStarted]
+  );
+  const applyServerRequest = useCallback(
+    (request) => {
+      const store = threadStoreRef.current;
+      if (!store) {
+        return;
+      }
+      const next = store.applyRequest(request);
+      threadSnapshotRef.current = next;
+      setThreadSnapshot(next);
+    },
+    []
+  );
+  const connectThread = useCallback(
+    async (input = {}) => {
+      const generation = lifecycleGenerationRef.current;
+      const isCurrentLifecycle = (abortController2) => !abortController2.signal.aborted && lifecycleGenerationRef.current === generation;
+      closeActiveSubscription();
+      const abortController = new AbortController();
+      subscriptionAbortRef.current = abortController;
+      try {
+        setRuntimeError(null);
+        let resumeThread = null;
+        if (options.buildThreadStartParams) {
+          const response = await appServerSession.threadStart(
+            options.buildThreadStartParams({ threadId })
+          );
+          resumeThread = response.thread;
+        } else {
+          const response = await appServerSession.threadResume({ threadId });
+          resumeThread = response.thread;
+        }
+        if (!isCurrentLifecycle(abortController)) {
+          return;
+        }
+        const currentSnapshot = threadSnapshotRef.current;
+        const handoffSnapshot = currentSnapshot?.thread?.id === threadId && threadEventSnapshotHasStarted(currentSnapshot) ? currentSnapshot : options.initialState?.thread?.id === threadId ? options.initialState : null;
+        const shouldDeferVisibleResumeSnapshot = Boolean(pendingComposerSendRef.current) && !handoffSnapshot && currentSnapshot === null;
+        const handoffWorkStartedAt = activeRuntimeStartedAtRef.current ?? localDispatchStartedAtRef.current;
+        if (handoffWorkStartedAt) {
+          setActiveRuntimeStartedAt((current) => current ?? handoffWorkStartedAt);
+        }
+        if (!handoffSnapshot) {
+          threadStoreRef.current = ThreadEventStore.fromThread(resumeThread);
+        }
+        const storedThread = options.threadReader ? await options.threadReader.readThread({
+          thread_id: threadId,
+          include_archived: false,
+          include_history: false
+        }) : storedThreadFromAppServerThread(resumeThread);
+        const tokenUsageReplay = options.threadReader ? await storedTokenUsageReplayNotification({
+          thread: resumeThread,
+          threadId,
+          threadReader: options.threadReader
+        }) : null;
+        if (!isCurrentLifecycle(abortController)) {
+          return;
+        }
+        setActiveThread(storedThread);
+        options.onActiveThread?.(storedThread);
+        const store = threadStoreRef.current ?? ThreadEventStore.fromThread(resumeThread);
+        threadStoreRef.current = store;
+        if (tokenUsageReplay) {
+          store.applyNotification(tokenUsageReplay);
+        }
+        const nextSnapshot = store.setConnectionStatus(
+          input.force ? "reconnecting" : "connecting"
+        );
+        if (!shouldDeferVisibleResumeSnapshot) {
+          threadSnapshotRef.current = nextSnapshot;
+          setThreadSnapshot(nextSnapshot);
+          if (threadEventSnapshotHasStarted(nextSnapshot)) {
+            window.setTimeout(() => handleThreadStarted(nextSnapshot), 0);
+          }
+        }
+        const events = appServerSession.events();
+        if (!events) {
+          setProtocolConnectionStatus("connected");
+          return;
+        }
+        if (shouldDeferVisibleResumeSnapshot) {
+          store.setConnectionStatus("connected");
+        } else {
+          setProtocolConnectionStatus("connected");
+        }
+        const iterator = events[Symbol.asyncIterator]();
+        activeEventsIteratorRef.current = iterator;
+        void (async () => {
+          try {
+            while (true) {
+              const result = await iterator.next();
+              if (!isCurrentLifecycle(abortController)) {
+                return;
+              }
+              if (result.done) {
+                break;
+              }
+              applyAppServerEvent(result.value, {
+                applyServerNotification,
+                applyServerRequest,
+                onServerRequest: options.onServerRequest
+              });
+            }
+            if (isCurrentLifecycle(abortController)) {
+              setProtocolConnectionStatus("closed");
+            }
+          } catch (error) {
+            if (isCurrentLifecycle(abortController)) {
+              handleRuntimeError(
+                error instanceof Error ? error : new Error("Codex chat connection failed.")
+              );
+            }
+          } finally {
+            if (activeEventsIteratorRef.current === iterator) {
+              activeEventsIteratorRef.current = null;
+            }
+          }
+        })();
+      } catch (error) {
+        if (isCurrentLifecycle(abortController)) {
+          handleRuntimeError(
+            error instanceof Error ? error : new Error("Codex chat could not connect.")
+          );
+        }
+      }
+    },
+    [
+      appServerSession,
+      applyServerNotification,
+      applyServerRequest,
+      closeActiveSubscription,
+      handleRuntimeError,
+      handleThreadStarted,
+      options,
+      setProtocolConnectionStatus,
+      threadId
+    ]
+  );
+  useEffect(() => {
+    if (options.connectOnMount === false) {
+      closeActiveSubscription();
+      setActiveThread(null);
+      options.onActiveThread?.(null);
+      setRuntimeError(null);
+      if (!pendingComposerSendRef.current) {
+        setActiveRuntimeStartedAt(null);
+        threadStoreRef.current = null;
+        threadSnapshotRef.current = null;
+        setThreadSnapshot(null);
+        setIsSending(false);
+      }
+      return;
+    }
+    void connectThread({ force: reconnectToken > 0 });
+    return () => {
+      closeActiveSubscription();
+    };
+  }, [closeActiveSubscription, connectThread, options, options.connectOnMount, reconnectToken]);
+  useEffect(() => {
+    if (!threadSnapshot?.turns.length || optimisticUserMessages.length === 0) {
+      return;
+    }
+    const serverUserMessages = threadSnapshot.turns.flatMap(
+      (turn) => turn.items.flatMap(
+        (item) => item.type === "userMessage" ? [
+          {
+            contentFingerprint: protocolUserInputFingerprint(item.content),
+            id: item.id
+          }
+        ] : []
+      )
+    );
+    const serverUserMessageIds = new Set(
+      serverUserMessages.map((message) => message.id)
+    );
+    const serverUserMessageFingerprints = new Set(
+      serverUserMessages.map((message) => message.contentFingerprint)
+    );
+    const acknowledgedOptimisticIds = optimisticUserMessages.flatMap((message) => {
+      if (message.threadId !== threadId) {
+        return [];
+      }
+      if (serverUserMessageIds.has(message.item.id)) {
+        return [message.item.id];
+      }
+      return serverUserMessageFingerprints.has(
+        coreUserInputFingerprint(message.item.content)
+      ) ? [message.item.id] : [];
+    });
+    if (acknowledgedOptimisticIds.length === 0) {
+      return;
+    }
+    const timerId = window.setTimeout(() => {
+      setOptimisticUserMessages(
+        (current) => current.filter(
+          (message) => !acknowledgedOptimisticIds.includes(message.item.id)
+        )
+      );
+    }, 0);
+    return () => window.clearTimeout(timerId);
+  }, [optimisticUserMessages, threadId, threadSnapshot?.turns]);
+  useEffect(() => {
+    const timerId = window.setTimeout(() => {
+      setOptimisticUserMessages((current) => {
+        const next = current.filter((message) => message.threadId === threadId);
+        return next.length === current.length ? current : next;
+      });
+    }, 0);
+    return () => window.clearTimeout(timerId);
+  }, [threadId]);
+  useEffect(() => {
+    if (!serverAcknowledgedLocalDispatch) {
+      return;
+    }
+    const timerId = window.setTimeout(() => {
+      resetLocalDispatch();
+      sendInFlightRef.current = false;
+      setIsSending(false);
+    }, 0);
+    return () => window.clearTimeout(timerId);
+  }, [resetLocalDispatch, serverAcknowledgedLocalDispatch]);
+  const connectionStatus = threadSnapshot?.connectionStatus ?? "idle";
+  const turnRunning = Boolean(threadSnapshot?.activeTurnIds.length);
+  const assistantStreaming = deriveAssistantStreaming(threadSnapshot);
+  const isWorking = deriveChatLifecycleWorkingState({
+    connectionStatus,
+    isSendBusy,
+    threadState: threadSnapshot
+  });
+  const activeWorkStartedAt = deriveActiveWorkStartedAt({
+    isWorking,
+    runtimeStartedAt: activeRuntimeStartedAt,
+    sendStartedAt: localDispatchStartedAt
+  });
+  useEffect(() => {
+    if (isWorking || activeRuntimeStartedAt === null) {
+      return;
+    }
+    const timerId = window.setTimeout(() => {
+      setActiveRuntimeStartedAt(null);
+    }, 0);
+    return () => window.clearTimeout(timerId);
+  }, [activeRuntimeStartedAt, isWorking]);
+  const resolveServerRequest = useCallback(
+    async (requestId, response) => {
+      try {
+        await appServerSession.resolveServerRequest(requestId, response);
+        return true;
+      } catch (error) {
+        setRuntimeError({
+          message: error instanceof Error ? error.message : "Codex server-request response failed.",
+          threadId
+        });
+        return false;
+      }
+    },
+    [appServerSession, threadId]
+  );
+  const rejectServerRequest = useCallback(
+    async (requestId, error) => {
+      try {
+        await appServerSession.rejectServerRequest(requestId, error);
+        return true;
+      } catch (rejectError) {
+        setRuntimeError({
+          message: rejectError instanceof Error ? rejectError.message : "Codex server-request rejection failed.",
+          threadId
+        });
+        return false;
+      }
+    },
+    [appServerSession, threadId]
+  );
+  const sendComposerMessage = useCallback(
+    async (sendContext, controls, sendOptions = {}) => {
+      if (sendInFlightRef.current || isSending || isSendBusy) {
+        return;
+      }
+      if (sendContext.items.length === 0 && sendContext.files.length === 0) {
+        return;
+      }
+      sendInFlightRef.current = true;
+      setIsSending(true);
+      beginLocalDispatch();
+      try {
+        const imageUrls = await Promise.all(sendContext.files.map(fileToDataUrl));
+        const clientMessageId = defaultId();
+        const turnStartParams = (options.buildTurnStartParams ?? createDefaultTurnStartParams)({
+          clientMessageId,
+          imageUrls,
+          interactionMode: sendOptions.interactionMode,
+          runtimeMode: sendOptions.runtimeMode,
+          sendContext,
+          threadId
+        });
+        const optimisticItemId = optimisticUserMessageIdForClientMessageId(
+          clientMessageId
+        );
+        const optimisticMessage = buildOptimisticUserMessageTurnItem({
+          id: optimisticItemId,
+          imageUrls,
+          items: sendContext.items
+        });
+        pendingComposerSendRef.current = {
+          optimisticItemId,
+          restore: () => controls.restoreComposer(sendContext),
+          serverUserMessageAcknowledged: false,
+          targetThreadId: threadId
+        };
+        await controls.prepareForOptimisticAppend();
+        setOptimisticUserMessages((current) => [
+          ...current.filter((message) => message.item.id !== optimisticItemId),
+          { item: optimisticMessage, threadId }
+        ]);
+        controls.clearComposer();
+        options.onThreadListChanged?.();
+        if (options.connectOnMount === false || !threadSnapshotRef.current) {
+          await connectThread({ force: true });
+        }
+        const activeTurnId = currentActiveTurnId(threadSnapshotRef.current);
+        if (activeTurnId) {
+          await appServerSession.turnSteer({
+            expectedTurnId: activeTurnId,
+            input: turnStartParams.input,
+            threadId
+          });
+        } else {
+          await appServerSession.turnStart(turnStartParams);
+        }
+      } catch (error) {
+        restorePendingComposerSend();
+        pendingComposerSendRef.current = null;
+        sendInFlightRef.current = false;
+        resetLocalDispatch();
+        setActiveRuntimeStartedAt(null);
+        setIsSending(false);
+        setRuntimeError({
+          message: error instanceof Error ? error.message : "Codex could not send the message.",
+          threadId
+        });
+      }
+    },
+    [
+      beginLocalDispatch,
+      appServerSession,
+      connectThread,
+      isSendBusy,
+      isSending,
+      options,
+      resetLocalDispatch,
+      restorePendingComposerSend,
+      threadId
+    ]
+  );
+  const interrupt = useCallback(async () => {
+    const turnId = currentActiveTurnId(threadSnapshotRef.current);
+    if (!turnId) {
+      setRuntimeError({
+        message: "Codex has no active response to stop.",
+        threadId
+      });
+      return false;
+    }
+    try {
+      await appServerSession.turnInterrupt({ threadId, turnId });
+    } catch (error) {
+      setRuntimeError({
+        message: error instanceof Error ? error.message : "Codex could not stop the active response.",
+        threadId
+      });
+      return false;
+    }
+    if (pendingComposerSendRef.current) {
+      removeOptimisticUserMessage(pendingComposerSendRef.current.optimisticItemId);
+    }
+    pendingComposerSendRef.current = null;
+    sendInFlightRef.current = false;
+    resetLocalDispatch();
+    setActiveRuntimeStartedAt(null);
+    setIsSending(false);
+    return true;
+  }, [appServerSession, removeOptimisticUserMessage, resetLocalDispatch, threadId]);
+  const compact = useCallback(async () => {
+    if (turnRunning || isSending || isSendBusy) {
+      setRuntimeError({
+        message: "Wait for the current response to finish before compacting.",
+        threadId
+      });
+      return false;
+    }
+    try {
+      await appServerSession.threadCompactStart({ threadId });
+      return true;
+    } catch (error) {
+      setRuntimeError({
+        message: error instanceof Error ? error.message : "Codex compact failed.",
+        threadId
+      });
+      return false;
+    }
+  }, [appServerSession, isSendBusy, isSending, threadId, turnRunning]);
+  const reconnect = useCallback(() => {
+    closeActiveSubscription();
+    if (pendingComposerSendRef.current) {
+      removeOptimisticUserMessage(pendingComposerSendRef.current.optimisticItemId);
+    }
+    pendingComposerSendRef.current = null;
+    sendInFlightRef.current = false;
+    setIsSending(false);
+    resetLocalDispatch();
+    setActiveRuntimeStartedAt(null);
+    setRuntimeError(null);
+    setProtocolConnectionStatus("reconnecting");
+    setReconnectToken((current) => current + 1);
+  }, [
+    closeActiveSubscription,
+    removeOptimisticUserMessage,
+    resetLocalDispatch,
+    setProtocolConnectionStatus
+  ]);
+  return {
+    activeThread,
+    activeWorkStartedAt,
+    assistantStreaming,
+    compact,
+    connectionStatus,
+    interrupt,
+    isSendBusy,
+    isSending,
+    isWorking,
+    pendingPermissionRequestActive: Boolean(
+      threadSnapshot?.pendingRequests.some(
+        (request) => request.method === "item/permissions/requestApproval"
+      )
+    ),
+    pendingUserInputActive: Boolean(
+      threadSnapshot?.pendingRequests.some(
+        (request) => request.method === "item/tool/requestUserInput"
+      )
+    ),
+    reconnect,
+    rejectServerRequest,
+    runtimeError: visibleRuntimeError,
+    sendComposerMessage,
+    resolveServerRequest,
+    threadSnapshot,
+    threadId,
+    turnRunning,
+    visibleOptimisticUserMessages
+  };
+}
+function normalizeThreadId(threadId) {
+  return typeof threadId === "string" ? asThreadId(threadId) : threadId;
+}
+function optimisticUserMessageIdForClientMessageId(clientMessageId) {
+  return `user-${clientMessageId}`;
+}
+function fileToDataUrl(file) {
+  const blob = new Blob([file], { type: file.type || "image/png" });
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(reader.error ?? new Error("Could not read file."));
+    reader.readAsDataURL(blob);
+  });
+}
+function defaultId() {
+  return globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
+}
+function currentActiveTurnId(snapshot) {
+  return snapshot?.activeTurnIds.at(-1) ?? null;
+}
+function protocolUserInputFingerprint(items) {
+  return JSON.stringify(items.map(protocolUserInputFingerprintPart));
+}
+function protocolUserInputFingerprintPart(item) {
+  switch (item.type) {
+    case "text":
+      return { text: item.text, type: "text" };
+    case "image":
+      return { type: "image", url: item.url };
+    case "localImage":
+      return { path: item.path, type: "localImage" };
+    case "skill":
+      return { name: item.name, path: item.path, type: "skill" };
+    case "mention":
+      return { name: item.name, path: item.path, type: "mention" };
+  }
+}
+function coreUserInputFingerprint(items) {
+  return JSON.stringify(items.map(coreUserInputFingerprintPart));
+}
+function coreUserInputFingerprintPart(item) {
+  switch (item.type) {
+    case "text":
+      return { text: item.text, type: "text" };
+    case "image":
+      return { type: "image", url: item.image_url };
+    case "local_image":
+      return { path: item.path, type: "localImage" };
+    case "skill":
+      return { name: item.name, path: item.path, type: "skill" };
+    case "mention":
+      return { name: item.name, path: item.path, type: "mention" };
+  }
+}
+function composerUserInputToProtocolUserInput(item) {
+  switch (item.type) {
+    case "text":
+      return {
+        text: item.text,
+        text_elements: (item.text_elements ?? []).map((element) => ({
+          byteRange: element.byte_range,
+          placeholder: element.placeholder ?? null
+        })),
+        type: "text"
+      };
+    case "image":
+      return { type: "image", url: item.image_url };
+    case "local_image":
+      return { path: item.path, type: "localImage" };
+    case "skill":
+      return { name: item.name, path: item.path, type: "skill" };
+    case "mention":
+      return { name: item.name, path: item.path, type: "mention" };
+  }
+}
+async function storedTokenUsageReplayNotification(input) {
+  try {
+    const history = await input.threadReader.loadHistory({
+      thread_id: input.threadId,
+      include_archived: false
+    });
+    return thread_token_usage_updated_notification_from_rollout_items({
+      rolloutItems: history.items,
+      thread: input.thread,
+      threadId: input.threadId
+    });
+  } catch {
+    return null;
+  }
+}
+function storedThreadFromAppServerThread(thread) {
+  return {
+    thread_id: asThreadId(thread.id),
+    rollout_path: thread.path ?? null,
+    forked_from_id: thread.forkedFromId ? asThreadId(thread.forkedFromId) : null,
+    preview: thread.preview,
+    name: thread.name,
+    model_provider: thread.modelProvider,
+    model: null,
+    reasoning_effort: null,
+    created_at: new Date(thread.createdAt * 1e3).toISOString(),
+    updated_at: new Date(thread.updatedAt * 1e3).toISOString(),
+    archived_at: null,
+    cwd: thread.cwd,
+    cli_version: thread.cliVersion,
+    source: typeof thread.source === "string" ? thread.source : "custom",
+    thread_source: typeof thread.threadSource === "string" ? thread.threadSource : null,
+    agent_nickname: thread.agentNickname,
+    agent_role: thread.agentRole,
+    git_info: thread.gitInfo,
+    history: null
+  };
+}
+function applyAppServerEvent(event, handlers) {
+  switch (event.type) {
+    case "server_notification":
+      handlers.applyServerNotification(event.notification);
+      return;
+    case "server_request":
+      handlers.applyServerRequest(event.request);
+      handlers.onServerRequest?.(event.request);
+      return;
+    case "disconnected":
+      throw new Error(event.message);
+    case "lagged":
+      return;
+  }
+}
+
+// src/components/codex-chat-render-state.ts
+function createCodexChatRenderState({
+  interactionMode = "default",
+  lifecycle,
+  snapshot
+}) {
+  const activeTurnIds = new Set(snapshot?.activeTurnIds ?? []);
+  const turns = (snapshot?.turns ?? []).map(
+    (turn) => t3TurnFromAppServerTurn(turn, activeTurnIds.has(turn.id))
+  );
+  const pendingRequests = (snapshot?.pendingRequests ?? []).map(codexChatPendingRequest);
+  const pendingDynamicToolCallRequests = pendingRequests.flatMap(
+    (request) => request.kind === "dynamicToolCall" ? [request.compatRequest] : []
+  );
+  const pendingPermissionRequest = pendingRequests.find((request) => request.kind === "permissions") ?? null;
+  const pendingUserInputRequest = pendingRequests.find((request) => request.kind === "userInput") ?? null;
+  const activeTurnStartedAt = lifecycle?.activeWorkStartedAt ?? null;
+  const errors = snapshot?.errors ?? [];
+  const isWorking = lifecycle?.isWorking ?? false;
+  const optimisticUserMessages = lifecycle?.visibleOptimisticUserMessages ?? [];
+  const runtimeError = lifecycle?.runtimeError ?? null;
+  const warnings = snapshot?.warnings ?? [];
+  const activeProposedPlan = findActiveProposedPlan(snapshot);
+  const contextWindow = deriveContextWindowSnapshotFromTokenUsage({
+    tokenUsage: snapshot?.tokenUsage?.tokenUsage,
+    updatedAt: snapshot?.tokenUsage?.updatedAt
+  });
+  const banners = defaultRenderBanners({
+    pendingRequests,
+    runtimeError
+  });
+  return {
+    activeProposedPlan,
+    activeTurnStartedAt,
+    banners,
+    composer: {
+      contextWindow,
+      pendingUserInput: pendingUserInputRequest?.pendingUserInput ?? null,
+      pendingUserInputAdapter: pendingUserInputRequest
+    },
+    errors,
+    interactionMode,
+    items: turns.flatMap((turn) => turn.items),
+    isWorking,
+    optimisticUserMessages,
+    pending_dynamic_tool_call_requests: pendingDynamicToolCallRequests,
+    pendingRequests,
+    pendingPermissionRequest,
+    pendingUserInputRequest,
+    runtimeError,
+    running_turn_ids: snapshot?.activeTurnIds ?? [],
+    showPlanFollowUpPrompt: interactionMode === "plan" && Boolean(activeProposedPlan) && !isWorking && !pendingUserInputRequest,
+    timeline: {
+      activeTurnStartedAt,
+      errors,
+      isWorking,
+      optimisticUserMessages,
+      runtimeError,
+      turns,
+      warnings
+    },
+    turns,
+    warnings
+  };
+}
+function findActiveProposedPlan(snapshot) {
+  if (!snapshot) {
+    return null;
+  }
+  for (const turn of [...snapshot.turns].reverse()) {
+    for (const item of [...turn.items].reverse()) {
+      if (item.type !== "plan" || item.text.trim().length === 0) {
+        continue;
+      }
+      return {
+        id: `${turn.id}:${item.id}`,
+        planMarkdown: item.text,
+        title: proposedPlanTitle(item.text),
+        turnId: turn.id
+      };
+    }
+  }
+  return null;
+}
+function codexChatPendingRequest(request) {
+  switch (request.method) {
+    case "item/tool/requestUserInput":
+      return {
+        kind: "userInput",
+        itemId: request.params.itemId,
+        pendingUserInput: pendingUserInputFromServerRequest(request),
+        request,
+        requestId: request.id,
+        threadId: request.params.threadId,
+        turnId: request.params.turnId
+      };
+    case "item/permissions/requestApproval":
+      return {
+        kind: "permissions",
+        composerRequest: requestPermissionsFromServerRequest(request),
+        request,
+        requestId: request.id,
+        threadId: request.params.threadId,
+        turnId: request.params.turnId
+      };
+    case "item/tool/call":
+      return {
+        kind: "dynamicToolCall",
+        compatRequest: {
+          arguments: request.params.arguments,
+          call_id: request.params.callId,
+          namespace: request.params.namespace,
+          tool: request.params.tool,
+          turn_id: request.params.turnId
+        },
+        request,
+        requestId: request.id,
+        threadId: request.params.threadId,
+        turnId: request.params.turnId
+      };
+    case "mcpServer/elicitation/request":
+      return {
+        kind: "mcpElicitation",
+        request,
+        requestId: request.id,
+        threadId: request.params.threadId,
+        turnId: request.params.turnId
+      };
+    case "item/commandExecution/requestApproval":
+      return {
+        kind: "commandApproval",
+        request,
+        requestId: request.id,
+        threadId: request.params.threadId,
+        turnId: request.params.turnId
+      };
+    case "item/fileChange/requestApproval":
+      return {
+        kind: "fileChangeApproval",
+        request,
+        requestId: request.id,
+        threadId: request.params.threadId,
+        turnId: request.params.turnId
+      };
+    case "account/chatgptAuthTokens/refresh":
+      return {
+        kind: "chatgptAuthTokensRefresh",
+        request,
+        requestId: request.id,
+        threadId: null,
+        turnId: null
+      };
+    case "applyPatchApproval":
+      return {
+        kind: "applyPatchApproval",
+        request,
+        requestId: request.id,
+        threadId: request.params.conversationId,
+        turnId: null
+      };
+    case "execCommandApproval":
+      return {
+        kind: "execCommandApproval",
+        request,
+        requestId: request.id,
+        threadId: request.params.conversationId,
+        turnId: null
+      };
+  }
+}
+function defaultRenderBanners({
+  pendingRequests,
+  runtimeError
+}) {
+  const banners = [];
+  if (runtimeError) {
+    banners.push({
+      id: "runtime-error",
+      title: "Codex connection interrupted",
+      description: runtimeError,
+      variant: "error",
+      tone: "destructive"
+    });
+  }
+  for (const request of pendingRequests) {
+    if (request.kind === "userInput" || request.kind === "dynamicToolCall") {
+      continue;
+    }
+    if (request.kind === "permissions") {
+      banners.push({
+        id: `request-permissions:${request.requestId}`,
+        request,
+        title: "Permissions requested",
+        description: "Codex requested extra permissions. Approval controls are not available yet, so the request was denied for this turn.",
+        variant: "warning"
+      });
+      continue;
+    }
+    banners.push({
+      id: `server-request:${request.requestId}`,
+      request,
+      title: "Codex needs input",
+      description: `No default renderer is available for ${request.request.method}.`,
+      variant: "warning"
+    });
+  }
+  return banners;
+}
+function t3TurnFromAppServerTurn(turn, isActive) {
+  return {
+    completed_at: epochMillis(turn.completedAt),
+    duration_ms: turn.durationMs,
+    error: turn.error ? {
+      additional_details: turn.error.additionalDetails,
+      codex_error_info: turn.error.codexErrorInfo,
+      message: turn.error.message
+    } : null,
+    id: turn.id,
+    items: turn.items.flatMap((item) => t3TurnItemFromThreadItem(item, isActive)),
+    items_view: turn.itemsView === "notLoaded" ? "not_loaded" : turn.itemsView,
+    started_at: epochMillis(turn.startedAt),
+    status: t3TurnStatusFromAppServer(turn.status)
+  };
+}
+function t3TurnItemFromThreadItem(item, turnIsActive) {
+  switch (item.type) {
+    case "userMessage":
+      return [
+        {
+          content: item.content.map(coreUserInputFromAppServer),
+          id: item.id,
+          type: "UserMessage"
+        }
+      ];
+    case "agentMessage":
+      return [
+        {
+          content: [{ text: item.text, type: "Text" }],
+          id: item.id,
+          memory_citation: item.memoryCitation ? {
+            entries: item.memoryCitation.entries,
+            rolloutIds: item.memoryCitation.threadIds
+          } : null,
+          phase: turnIsActive && item.text.trim().length > 0 ? "streaming" : item.phase,
+          type: "AgentMessage"
+        }
+      ];
+    case "plan":
+      return [{ id: item.id, text: item.text, type: "Plan" }];
+    case "reasoning":
+      return [
+        {
+          id: item.id,
+          raw_content: item.content,
+          summary_text: item.summary,
+          type: "Reasoning"
+        }
+      ];
+    case "commandExecution":
+      return [
+        {
+          command: [item.command],
+          cwd: item.cwd,
+          duration_ms: item.durationMs,
+          exit_code: item.exitCode,
+          id: item.id,
+          status: item.status === "inProgress" ? "in_progress" : item.status === "declined" ? "cancelled" : item.status,
+          stdout: item.aggregatedOutput ?? "",
+          type: "CommandExecution"
+        }
+      ];
+    case "fileChange":
+      return [
+        {
+          auto_approved: false,
+          changes: {},
+          id: item.id,
+          status: item.status === "completed" || item.status === "failed" || item.status === "declined" ? item.status : null,
+          stderr: "",
+          stdout: "",
+          type: "FileChange"
+        }
+      ];
+    case "dynamicToolCall":
+      return [
+        {
+          arguments: item.arguments,
+          content_items: item.contentItems,
+          duration: item.durationMs === null ? null : String(item.durationMs),
+          id: item.id,
+          namespace: item.namespace,
+          status: item.status,
+          success: item.success,
+          tool: item.tool,
+          type: "DynamicToolCall"
+        }
+      ];
+    case "contextCompaction":
+      return [{ id: item.id, type: "ContextCompaction" }];
+    default:
+      return [];
+  }
+}
+function pendingUserInputFromServerRequest(request) {
+  return {
+    itemId: request.params.itemId,
+    questions: request.params.questions.map((question) => {
+      const normalized = normalizePendingUserInputQuestion(question);
+      return {
+        ...normalized,
+        options: normalized.options.map((option) => ({ ...option }))
+      };
+    }),
+    requestId: request.id,
+    threadId: request.params.threadId,
+    turnId: request.params.turnId
+  };
+}
+function requestPermissionsFromServerRequest(request) {
+  return {
+    call_id: String(request.id),
+    cwd: request.params.cwd,
+    permissions: request.params.permissions,
+    reason: request.params.reason,
+    turn_id: request.params.turnId
+  };
+}
+function coreUserInputFromAppServer(input) {
+  if (input.type === "image") {
+    return { image_url: input.url, type: "image" };
+  }
+  if (input.type === "localImage") {
+    return { path: input.path, type: "local_image" };
+  }
+  if (input.type === "text") {
+    return {
+      text: input.text,
+      text_elements: input.text_elements.map((element) => ({
+        byte_range: element.byteRange,
+        placeholder: element.placeholder ?? void 0
+      })),
+      type: "text"
+    };
+  }
+  return {
+    text: input.name,
+    text_elements: [],
+    type: "text"
+  };
+}
+function t3TurnStatusFromAppServer(status) {
+  return status === "inProgress" ? "in_progress" : status;
+}
+function epochMillis(value) {
+  return typeof value === "number" ? value * 1e3 : null;
+}
+function CodexChatView(props) {
+  if (isLifecycleCodexChatViewProps(props)) {
+    return createElement(CodexLifecycleChatView, props);
+  }
+  const { composer, ...chatViewProps } = props;
+  return createElement(
+    TooltipProvider,
+    null,
+    createElement(ChatView, {
+      ...chatViewProps,
+      composer: createElement(ChatComposer, composer)
+    })
+  );
+}
+function CodexLifecycleChatView({
+  actions,
+  bannerItems = [],
+  className,
+  composerCommands,
+  composerSkills,
+  composerDraftKey,
+  composerRef: externalComposerRef,
+  defaultInteractionMode = "default",
+  defaultRuntimeMode = "full-access",
+  editorAriaLabel,
+  headerLeading,
+  interactionMode,
+  isEnvironmentUnavailable = false,
+  listRef: externalListRef,
+  lifecycle: lifecycleOptions,
+  mentionRefs,
+  modelOptions,
+  placeholder,
+  providerStatus = null,
+  realtimeConversation,
+  renderBannerItems,
+  renderPendingRequest,
+  renderPendingUserInput,
+  renderTimelineExtras,
+  runtimeMode,
+  showInteractionModeToggle = true,
+  showPlanToggle = false,
+  planSidebarLabel = "Plan",
+  planSidebarOpen = false,
+  subtitle,
+  threadKey,
+  title,
+  onCommand,
+  onComposerError,
+  onControlsChange,
+  onInteractionModeChange,
+  onRuntimeModeChange,
+  onTogglePlanSidebar,
+  onImplementProposedPlan,
+  onIsAtEndChange
+}) {
+  const lifecycle = useCodexChatLifecycle(lifecycleOptions);
+  const [localInteractionMode, setLocalInteractionMode] = useState(defaultInteractionMode);
+  const [localRuntimeMode, setLocalRuntimeMode] = useState(defaultRuntimeMode);
+  const effectiveInteractionMode = interactionMode ?? localInteractionMode;
+  const effectiveRuntimeMode = runtimeMode ?? localRuntimeMode;
+  const setInteractionMode = useCallback(
+    (nextMode) => {
+      if (interactionMode === void 0) {
+        setLocalInteractionMode(nextMode);
+      }
+      onInteractionModeChange?.(nextMode);
+    },
+    [interactionMode, onInteractionModeChange]
+  );
+  const setRuntimeMode = useCallback(
+    (nextMode) => {
+      if (runtimeMode === void 0) {
+        setLocalRuntimeMode(nextMode);
+      }
+      onRuntimeModeChange?.(nextMode);
+    },
+    [runtimeMode, onRuntimeModeChange]
+  );
+  const effectiveThreadKey = threadKey ?? String(lifecycle.threadId);
+  const effectiveComposerDraftKey = composerDraftKey ?? `codex:${String(lifecycle.threadId)}`;
+  const effectiveEditorAriaLabel = editorAriaLabel ?? "Message Codex";
+  const effectivePlaceholder = placeholder ?? "Ask anything, @tag files/folders, or use / to show available commands";
+  const effectiveTitle = title ?? "Codex";
+  const renderState = createCodexChatRenderState({
+    interactionMode: effectiveInteractionMode,
+    lifecycle,
+    snapshot: lifecycle.threadSnapshot
+  });
+  const activeProposedPlan = renderState.activeProposedPlan;
+  const showPlanFollowUpPrompt = renderState.showPlanFollowUpPrompt && Boolean(activeProposedPlan);
+  const pendingUserInput = renderState.composer.pendingUserInputAdapter;
+  const pendingRequestRenderItems = renderPendingRequest ? renderState.pendingRequests.flatMap((request) => {
+    if (request.kind === "userInput") {
+      return [];
+    }
+    const defaultNode = defaultPendingRequestNode(request);
+    const node = renderPendingRequest({
+      defaultNode,
+      reject: (error) => rejectPendingRequest(request, error),
+      request,
+      resolve: (result) => lifecycle.resolveServerRequest(request.requestId, result),
+      state: renderState
+    });
+    if (node === defaultNode) {
+      return [];
+    }
+    return node ? [{ node, request }] : [];
+  }) : [];
+  const customPendingRequestIds = new Set(
+    pendingRequestRenderItems.map(({ request }) => request.requestId)
+  );
+  const customUserInputNode = pendingUserInput ? renderPendingUserInput?.({
+    defaultNode: null,
+    reject: (error) => rejectPendingRequest(pendingUserInput, error),
+    request: pendingUserInput,
+    resolve: (result) => lifecycle.resolveServerRequest(pendingUserInput.requestId, result),
+    state: renderState
+  }) : null;
+  const timelineExtras = renderTimelineExtras?.({ state: renderState });
+  const internalComposerRef = useRef(null);
+  const composerRef = externalComposerRef ?? internalComposerRef;
+  const internalListRef = useRef(null);
+  const listRef = externalListRef ?? internalListRef;
+  const controlsRef = useRef(null);
+  const shouldAutoScrollRef = useRef(true);
+  const [composerNotice, setComposerNotice] = useState(null);
+  const setComposerDraftPrompt = useComposerDraftStore((store) => store.setPrompt);
+  const addComposerDraftImages = useComposerDraftStore((store) => store.addImages);
+  const setNotice = useCallback(
+    (message) => {
+      setComposerNotice(message);
+      onComposerError?.(message);
+    },
+    [onComposerError]
+  );
+  const scheduleStickToBottom = useCallback(() => {
+    controlsRef.current?.scheduleStickToBottom();
+  }, []);
+  function restoreComposer(sendContext) {
+    const snapshot = composerRef.current?.readSnapshot();
+    const composerIsEmpty = !snapshot || snapshot.value.trim().length === 0;
+    if (!composerIsEmpty) {
+      return;
+    }
+    const restoredImages = createComposerImageAttachments(sendContext.files);
+    setComposerDraftPrompt(effectiveComposerDraftKey, sendContext.text);
+    addComposerDraftImages(effectiveComposerDraftKey, restoredImages);
+    composerRef.current?.setDraft({
+      mentionBindings: sendContext.mentionBindings,
+      message: sendContext.text
+    });
+  }
+  async function sendComposerMessage() {
+    const sendContext = composerRef.current?.getSendContext();
+    if (!sendContext) {
+      setNotice("Composer is not ready. Try again.");
+      return;
+    }
+    const activePlan = activeProposedPlan;
+    const shouldSubmitPlanFollowUp = Boolean(activePlan) && showPlanFollowUpPrompt && sendContext.items.length === 0 && sendContext.files.length === 0;
+    const effectiveSendContext = shouldSubmitPlanFollowUp && activePlan ? planImplementationSendContext(sendContext, activePlan) : sendContext;
+    const submitInteractionMode = shouldSubmitPlanFollowUp && activePlan ? resolvePlanFollowUpSubmission({
+      draftText: sendContext.text,
+      planMarkdown: activePlan.planMarkdown
+    }).interactionMode : effectiveInteractionMode;
+    if (effectiveSendContext.items.length === 0 && effectiveSendContext.files.length === 0) {
+      return;
+    }
+    await lifecycle.sendComposerMessage(effectiveSendContext, {
+      clearComposer: () => {
+        composerRef.current?.clear();
+        setNotice(null);
+      },
+      prepareForOptimisticAppend: async () => {
+        shouldAutoScrollRef.current = true;
+        await (controlsRef.current?.prepareForOptimisticAppend?.() ?? listRef.current?.scrollToEnd?.({ animated: false }));
+      },
+      restoreComposer
+    }, { interactionMode: submitInteractionMode, runtimeMode: effectiveRuntimeMode });
+    if (submitInteractionMode !== effectiveInteractionMode) {
+      setInteractionMode(submitInteractionMode);
+    }
+  }
+  const submitPendingUserInput = (response) => {
+    const request = pendingUserInput;
+    if (!request) {
+      setNotice("Codex thread is not connected. Reconnect and try again.");
+      return false;
+    }
+    void lifecycle.resolveServerRequest(request.requestId, response);
+    return true;
+  };
+  const dismissPendingUserInput = () => {
+    const request = pendingUserInput;
+    if (!request) {
+      return;
+    }
+    submitPendingUserInput(buildRequestUserInputResponse(request.pendingUserInput, {}));
+  };
+  function rejectPendingRequest(request, error = "Codex server request was dismissed.") {
+    const jsonRpcError = typeof error === "string" ? { code: -32e3, message: error } : error;
+    return lifecycle.rejectServerRequest(request.requestId, jsonRpcError);
+  }
+  const interrupt = useCallback(() => {
+    void lifecycle.interrupt().then((accepted) => {
+      if (!accepted) {
+        setNotice(
+          "Codex could not stop the active response. Reconnect and try again."
+        );
+      }
+    });
+  }, [lifecycle, setNotice]);
+  const handleCommand = useCallback(
+    (command) => {
+      if (command === "plan") {
+        setInteractionMode("plan");
+        return;
+      }
+      if (command === "default") {
+        setInteractionMode("default");
+        return;
+      }
+      if (command === "compact") {
+        void lifecycle.compact().then((accepted) => {
+          if (!accepted) {
+            setNotice("Codex thread is not connected. Reconnect and try again.");
+          }
+        });
+        return;
+      }
+      onCommand?.(command);
+    },
+    [lifecycle, onCommand, setInteractionMode, setNotice]
+  );
+  const implementProposedPlanInNewThread = useCallback(
+    (plan) => {
+      onImplementProposedPlan?.(plan);
+    },
+    [onImplementProposedPlan]
+  );
+  const lifecycleBannerItems = [...bannerItems];
+  if (composerNotice) {
+    lifecycleBannerItems.push({
+      id: "composer-notice",
+      title: "Composer needs attention",
+      description: composerNotice,
+      variant: "warning",
+      onDismiss: () => setNotice(null)
+    });
+  }
+  if (providerStatus && providerStatus.status !== "ready" && providerStatus.status !== "disabled") {
+    const providerLabel = providerStatus.displayName?.trim() || (providerStatus.driver ? providerStatus.driver.split(/[-_\s]+/g).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ") : "Codex");
+    const description = providerStatus.message ?? (providerStatus.status === "error" ? `${providerLabel} provider is unavailable.` : `${providerLabel} provider has limited availability.`);
+    lifecycleBannerItems.push({
+      description,
+      id: "provider-status",
+      title: `${providerLabel} provider status`,
+      variant: providerStatus.status === "error" ? "error" : "warning"
+    });
+  }
+  lifecycleBannerItems.push(
+    ...renderState.banners.filter(
+      (banner) => !banner.request || !customPendingRequestIds.has(banner.request.requestId)
+    ).map((banner) => ({
+      ...banner,
+      action: banner.id === "runtime-error" ? { label: "Reconnect", onClick: lifecycle.reconnect } : void 0
+    }))
+  );
+  lifecycleBannerItems.push(
+    ...pendingRequestRenderItems.map(({ node, request }) => ({
+      id: `custom-pending-request:${request.requestId}`,
+      title: "Codex needs input",
+      description: node,
+      variant: "info"
+    }))
+  );
+  if (customUserInputNode) {
+    lifecycleBannerItems.push({
+      id: `custom-pending-request:${pendingUserInput?.requestId ?? "user-input"}`,
+      title: "Codex needs input",
+      description: customUserInputNode,
+      variant: "info"
+    });
+  }
+  lifecycleBannerItems.push(...renderBannerItems?.(renderState) ?? []);
+  const effectiveActions = showInteractionModeToggle ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      CodexInteractionModeToggle,
+      {
+        mode: effectiveInteractionMode,
+        onChange: setInteractionMode
+      }
+    ),
+    actions
+  ] }) : actions;
+  const chatView = /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
+    ChatView,
+    {
+      actions: effectiveActions,
+      bannerItems: lifecycleBannerItems,
+      className,
+      headerLeading,
+      listRef,
+      subtitle,
+      threadKey: effectiveThreadKey,
+      timeline: renderState.timeline,
+      title: effectiveTitle,
+      onControlsChange: (controls) => {
+        controlsRef.current = controls;
+        onControlsChange?.(controls);
+      },
+      onIsAtEndChange: (isAtEnd) => {
+        shouldAutoScrollRef.current = isAtEnd;
+        onIsAtEndChange?.(isAtEnd);
+      },
+      composer: /* @__PURE__ */ jsx(
+        ChatComposer,
+        {
+          ref: composerRef,
+          contextWindow: renderState.composer.contextWindow,
+          disabled: Boolean(lifecycle.runtimeError) || lifecycle.connectionStatus === "connecting" || lifecycle.connectionStatus === "reconnecting",
+          draftKey: effectiveComposerDraftKey,
+          editorAriaLabel: effectiveEditorAriaLabel,
+          interactionMode: effectiveInteractionMode,
+          isConnecting: lifecycle.connectionStatus === "connecting" || lifecycle.connectionStatus === "reconnecting",
+          isEnvironmentUnavailable,
+          isRunning: lifecycle.turnRunning,
+          isSending: lifecycle.isSending || lifecycle.isSendBusy,
+          mentionRefs: mentionRefs ?? [],
+          composerCommands,
+          composerSkills,
+          modelOptions,
+          pendingUserInput: customUserInputNode ? null : renderState.composer.pendingUserInput,
+          pendingRequestDisabled: lifecycle.connectionStatus !== "connected",
+          placeholder: effectivePlaceholder,
+          planFollowUpTitle: activeProposedPlan?.title ?? null,
+          planSidebarLabel,
+          planSidebarOpen,
+          realtimeConversation,
+          runtimeMode: effectiveRuntimeMode,
+          showInteractionModeToggle,
+          showPlanFollowUpPrompt,
+          showPlanToggle,
+          onCommand: handleCommand,
+          onComposerError: setNotice,
+          onImplementPlanInNewThread: activeProposedPlan && onImplementProposedPlan ? () => implementProposedPlanInNewThread(activeProposedPlan) : void 0,
+          onToggleInteractionMode: () => setInteractionMode(
+            effectiveInteractionMode === "plan" ? "default" : "plan"
+          ),
+          onRuntimeModeChange: setRuntimeMode,
+          onTogglePlanSidebar,
+          onPendingRequestDismiss: dismissPendingUserInput,
+          onPendingRequestSubmit: submitPendingUserInput,
+          onInterrupt: interrupt,
+          scheduleStickToBottom,
+          shouldAutoScrollRef,
+          onSend: () => void sendComposerMessage()
+        }
+      )
+    }
+  ) });
+  if (!timelineExtras) {
+    return chatView;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    chatView,
+    timelineExtras
+  ] });
+}
+function isLifecycleCodexChatViewProps(props) {
+  return "lifecycle" in props && Boolean(props.lifecycle);
+}
+function defaultPendingRequestNode(request) {
+  if (request.kind === "permissions") {
+    return null;
+  }
+  return `No default renderer is available for ${request.request.method}.`;
+}
+function CodexInteractionModeToggle({
+  mode,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Interaction mode",
+      className: "flex shrink-0 items-center rounded-md border bg-background p-0.5",
+      role: "group",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-pressed": mode === "default",
+            className: mode === "default" ? "rounded px-2 py-1 font-medium text-foreground text-xs shadow-xs" : "rounded px-2 py-1 text-muted-foreground text-xs hover:text-foreground",
+            type: "button",
+            onClick: () => onChange("default"),
+            children: "Build"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-pressed": mode === "plan",
+            className: mode === "plan" ? "rounded px-2 py-1 font-medium text-foreground text-xs shadow-xs" : "rounded px-2 py-1 text-muted-foreground text-xs hover:text-foreground",
+            type: "button",
+            onClick: () => onChange("plan"),
+            children: "Plan"
+          }
+        )
+      ]
+    }
+  );
+}
+function planImplementationSendContext(sendContext, plan) {
+  const text = buildPlanImplementationPrompt(plan.planMarkdown);
+  return {
+    ...sendContext,
+    files: [],
+    items: [{ text, text_elements: [], type: "text" }],
+    text
+  };
+}
+
+// src/components/codex-chat.tsx
+function CodexChat({
+  appServer,
+  buildThreadStartParams,
+  buildTurnStartParams,
+  connectOnMount,
+  initialState,
+  isRecoverableConnectionError,
+  onActiveThread,
+  onRuntimeError,
+  onServerRequest,
+  onState,
+  onSubmittedUserMessage,
+  onThreadListChanged,
+  onThreadStarted,
+  threadId,
+  threadReader,
+  ...viewProps
+}) {
+  const lifecycle = {
+    appServer,
+    buildThreadStartParams,
+    buildTurnStartParams: buildTurnStartParams ?? createDefaultTurnStartParams,
+    connectOnMount,
+    initialState,
+    isRecoverableConnectionError,
+    onActiveThread,
+    onRuntimeError,
+    onServerRequest,
+    onState,
+    onSubmittedUserMessage,
+    onThreadListChanged,
+    onThreadStarted,
+    threadId,
+    threadReader
+  };
+  return createElement(CodexChatView, {
+    ...viewProps,
+    lifecycle
+  });
+}
+function CodexChatSidebar(props) {
+  return createElement(Sidebar, props);
+}
+function CodexChatLayout({
+  children,
+  className,
+  collapsible,
+  defaultOpen,
+  onOpenChange,
+  open,
+  side,
+  sidebar
+}) {
+  if (!sidebar) {
+    return createElement(Fragment$1, null, children);
+  }
+  return createElement(
+    SidebarProvider,
+    {
+      className,
+      defaultOpen,
+      onOpenChange,
+      open
+    },
+    createElement(CodexChatSidebar, { collapsible, side }, sidebar),
+    createElement(SidebarInset, null, children)
+  );
+}
+var CodexChatContext = createContext(null);
+function CodexChatProvider({
+  appServer,
+  children,
+  threadReader,
+  threadId
+}) {
+  const runtime = useCodexChat({ appServer, threadReader, threadId });
+  return createElement(
+    CodexChatContext.Provider,
+    { value: runtime },
+    children
+  );
+}
+function useCodexChatRuntime() {
+  const runtime = useContext(CodexChatContext);
+  if (!runtime) {
+    throw new Error("useCodexChatRuntime must be used inside CodexChatProvider.");
+  }
+  return runtime;
+}
+function useCodexChat(options) {
+  const [activeThreadId, setActiveThreadId] = useState(options.threadId ?? null);
+  const normalizedThreadId = useMemo(
+    () => activeThreadId ? normalizeThreadId2(activeThreadId) : asThreadId("00000000-0000-4000-8000-000000000000"),
+    [activeThreadId]
+  );
+  const lifecycle = useCodexChatLifecycle({
+    appServer: options.appServer,
+    connectOnMount: activeThreadId !== null,
+    threadId: normalizedThreadId,
+    threadReader: options.threadReader
+  });
+  const threadState = useMemo(
+    () => createCodexChatRenderState({
+      lifecycle,
+      snapshot: lifecycle.threadSnapshot
+    }),
+    [lifecycle]
+  );
+  const error = lifecycle.runtimeError ? new Error(lifecycle.runtimeError) : null;
+  return {
+    error,
+    messages: messagesFromRenderState(threadState),
+    async sendMessage(input) {
+      if (!activeThreadId) {
+        throw new Error("Cannot send a Codex chat message without a thread.");
+      }
+      const sendContext = sendContextFromMessageInput(input);
+      await lifecycle.sendComposerMessage(sendContext, {
+        clearComposer: () => {
+        },
+        prepareForOptimisticAppend: async () => {
+        },
+        restoreComposer: () => {
+        }
+      });
+    },
+    setThread(nextThreadId) {
+      setActiveThreadId(nextThreadId);
+    },
+    status: chatRuntimeStatus(lifecycle, activeThreadId !== null),
+    async stop() {
+      await lifecycle.interrupt();
+    },
+    threadId: activeThreadId,
+    threadSnapshot: lifecycle.threadSnapshot,
+    threadState
+  };
+}
+function chatRuntimeStatus(lifecycle, hasThread) {
+  if (!hasThread) {
+    return "idle";
+  }
+  if (lifecycle.runtimeError) {
+    return "error";
+  }
+  if (lifecycle.connectionStatus === "connecting" || lifecycle.connectionStatus === "reconnecting") {
+    return "loading";
+  }
+  if (lifecycle.isSending || lifecycle.isSendBusy) {
+    return "submitting";
+  }
+  if (lifecycle.turnRunning || lifecycle.assistantStreaming) {
+    return "streaming";
+  }
+  return "ready";
+}
+function sendContextFromMessageInput(input) {
+  const text = input.text?.trim() ?? "";
+  const files = messageInputFiles(input.files);
+  const fileParts = input.files && !isFileList(input.files) && !isFileArray(input.files) ? input.files : [];
+  const items = [
+    ...text ? [{
+      text,
+      text_elements: [],
+      type: "text"
+    }] : [],
+    ...fileParts.flatMap(messagePartToComposerItem)
+  ];
+  return {
+    effort: defaultCodexReasoningEffort,
+    files,
+    items,
+    mentionBindings: [],
+    model: defaultCodexModel,
+    text
+  };
+}
+function messageInputFiles(files) {
+  if (!files) {
+    return [];
+  }
+  if (isFileList(files)) {
+    return Array.from(files);
+  }
+  if (isFileArray(files)) {
+    return files;
+  }
+  return [];
+}
+function messagePartToComposerItem(part) {
+  if (part.type === "image") {
+    return [{ image_url: part.url, type: "image" }];
+  }
+  if (part.type === "file") {
+    return [{ path: part.url, type: "local_image" }];
+  }
+  return [];
+}
+function isFileList(files) {
+  return typeof FileList !== "undefined" && files instanceof FileList;
+}
+function isFileArray(files) {
+  return typeof File !== "undefined" && Array.isArray(files) && files.every((file) => file instanceof File);
+}
+function messagesFromRenderState(threadState) {
+  return threadState.items.flatMap((item) => {
+    if (item.type === "UserMessage") {
+      return [
+        {
+          id: item.id,
+          parts: item.content.flatMap(userInputToMessageParts),
+          role: "user"
+        }
+      ];
+    }
+    if (item.type === "AgentMessage") {
+      return [
+        {
+          id: item.id,
+          parts: item.content.map((part) => ({
+            type: "text",
+            text: part.text
+          })),
+          role: "assistant"
+        }
+      ];
+    }
+    return [];
+  });
+}
+function userInputToMessageParts(input) {
+  if (input.type === "text") {
+    return [{ type: "text", text: input.text }];
+  }
+  if (input.type === "image") {
+    return [{ type: "image", url: input.image_url }];
+  }
+  if (input.type === "local_image") {
+    return [{ type: "file", url: input.path }];
+  }
+  return [];
+}
+function normalizeThreadId2(threadId) {
+  return typeof threadId === "string" ? asThreadId(threadId) : threadId;
+}
+function CodexThread({ children }) {
+  return createElement("div", { "data-codex-thread": "" }, children);
+}
+function CodexMessages() {
+  const runtime = useCodexChatRuntime();
+  return createElement(
+    "div",
+    { "data-codex-messages": "" },
+    runtime.messages.map(
+      (message) => createElement(
+        "div",
+        { "data-role": message.role, key: message.id },
+        message.parts.filter((part) => part.type === "text").map((part) => part.text).join("\n")
+      )
+    )
+  );
+}
+function CodexComposer() {
+  const runtime = useCodexChatRuntime();
+  const sendMessage = useCallback(
+    async (formData) => {
+      const text = String(formData.get("message") ?? "");
+      if (text.trim()) {
+        await runtime.sendMessage({ text });
+      }
+    },
+    [runtime]
+  );
+  return createElement(
+    "form",
+    { action: sendMessage, "data-codex-composer": "" },
+    createElement("textarea", { name: "message" }),
+    createElement("button", { type: "submit" }, "Send")
+  );
+}
+
+export { CodexChat, CodexChatLayout, CodexChatProvider, CodexChatSidebar, CodexChatView, CodexComposer, CodexMessages, CodexThread, createCodexChatRenderState, createDefaultTurnStartParams, useCodexChat, useCodexChatLifecycle, useCodexChatRuntime };
+//# sourceMappingURL=chunk-ILXA6HLX.js.map
+//# sourceMappingURL=chunk-ILXA6HLX.js.map