fix(web): preserve dialog state through close transitions

apps/web/src/components/ChatView.logic.ts

@@ -298,6 +298,7 @@ export function collectUserMessageBlobPreviewUrls(message: ChatMessage): string[
 }
 
 export interface PullRequestDialogState {
+  open: boolean;
   initialReference: string | null;
   key: number;
 }

apps/web/src/components/ChatView.tsx

@@ -1392,7 +1392,12 @@ function ChatViewContent(props: ChatViewProps) {
   const composerRef = useComposerHandleContext() ?? localComposerRef;
   const [isWorkspaceFileDragActive, setIsWorkspaceFileDragActive] = useState(false);
   const [showScrollToBottom, setShowScrollToBottom] = useState(false);
-  const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
+  const [expandedImageDialog, setExpandedImageDialog] = useState<{
+    readonly open: boolean;
+    readonly preview: ExpandedImagePreview;
+    readonly generation: number;
+  } | null>(null);
+  const expandedImage = expandedImageDialog?.preview ?? null;
   const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);
   const [feedbackSubmissionsByThreadKey, setFeedbackSubmissionsByThreadKey] = useState<
     Record<string, ReadonlyArray<CodexFeedbackSubmission>>
@@ -1978,6 +1983,7 @@ function ChatViewContent(props: ChatViewProps) {
         return;
       }
       setPullRequestDialogState({
+        open: true,
         initialReference: reference ?? null,
         key: Date.now(),
       });
@@ -1986,7 +1992,7 @@ function ChatViewContent(props: ChatViewProps) {
   );
 
   const closePullRequestDialog = useCallback(() => {
-    setPullRequestDialogState(null);
+    setPullRequestDialogState((current) => (current ? { ...current, open: false } : current));
   }, []);
 
   const openOrReuseProjectDraftThread = useCallback(
@@ -4232,11 +4238,11 @@ function ChatViewContent(props: ChatViewProps) {
       return [];
     });
     resetLocalDispatch();
-    setExpandedImage(null);
+    setExpandedImageDialog(null);
   }, [draftId, resetLocalDispatch, threadId]);
 
   const closeExpandedImage = useCallback(() => {
-    setExpandedImage(null);
+    setExpandedImageDialog((current) => (current ? { ...current, open: false } : current));
   }, []);
 
   const activeWorktreePath = activeThread?.worktreePath ?? null;
@@ -6382,7 +6388,11 @@ function ChatViewContent(props: ChatViewProps) {
   };
 
   const onExpandTimelineImage = useCallback((preview: ExpandedImagePreview) => {
-    setExpandedImage(preview);
+    setExpandedImageDialog((current) => ({
+      open: true,
+      preview,
+      generation: (current?.generation ?? 0) + 1,
+    }));
   }, []);
   const onOpenTurnDiff = useCallback(
     (turnId: TurnId, filePath?: string) => {
@@ -6943,7 +6953,7 @@ function ChatViewContent(props: ChatViewProps) {
             {pullRequestDialogState ? (
               <PullRequestThreadDialog
                 key={pullRequestDialogState.key}
-                open
+                open={pullRequestDialogState.open}
                 environmentId={activeThread.environmentId}
                 threadId={activeThread.id}
                 cwd={activeProject?.workspaceRoot ?? null}
@@ -6953,6 +6963,9 @@ function ChatViewContent(props: ChatViewProps) {
                     closePullRequestDialog();
                   }
                 }}
+                onOpenChangeComplete={(open) => {
+                  if (!open) setPullRequestDialogState(null);
+                }}
                 onPrepared={handlePreparedPullRequestThread}
               />
             ) : null}
@@ -7016,8 +7029,8 @@ function ChatViewContent(props: ChatViewProps) {
           {rightPanelContent}
         </RightPanelTabs>
       ) : null}
-      {shouldUseRightPanelSheet && rightPanelOpen && activeThreadRef ? (
-        <RightPanelSheet open onClose={closePreviewPanel}>
+      {shouldUseRightPanelSheet && activeThreadRef ? (
+        <RightPanelSheet open={rightPanelOpen} onClose={closePreviewPanel}>
           <RightPanelTabs
             mode="sheet"
             // Same effective inset as the closed-state titlebar controls
@@ -7058,13 +7071,19 @@ function ChatViewContent(props: ChatViewProps) {
         </RightPanelSheet>
       ) : null}
 
-      {expandedImage && (
+      {expandedImageDialog ? (
         <ExpandedImageDialog
-          key={`${expandedImage.images[expandedImage.index]?.src ?? "image"}:${expandedImage.index}`}
+          key={expandedImageDialog.generation}
+          open={expandedImageDialog.open}
           preview={expandedImage}
-          onClose={closeExpandedImage}
+          onOpenChange={(open) => {
+            if (!open) closeExpandedImage();
+          }}
+          onOpenChangeComplete={(open) => {
+            if (!open) setExpandedImageDialog(null);
+          }}
         />
-      )}
+      ) : null}
     </div>
   );
 }

apps/web/src/components/CommandPalette.tsx

@@ -396,13 +396,23 @@ export function CommandPalette({ children }: { children: ReactNode }) {
     mode: "command",
     openIntent: null,
   });
-  const setOpen = useCallback((open: boolean) => dispatch({ _tag: "SetOpen", open }), []);
-  const toggleMode = useCallback(
-    (mode: SearchOverlayMode) => dispatch({ _tag: "ToggleMode", mode }),
-    [],
-  );
-  const openAddProject = useCallback(() => dispatch({ _tag: "OpenAddProject" }), []);
-  const openNewThreadIn = useCallback(() => dispatch({ _tag: "OpenNewThreadIn" }), []);
+  const [dialogContentMounted, setDialogContentMounted] = useState(false);
+  const setOpen = useCallback((open: boolean) => {
+    if (open) setDialogContentMounted(true);
+    dispatch({ _tag: "SetOpen", open });
+  }, []);
+  const toggleMode = useCallback((mode: SearchOverlayMode) => {
+    setDialogContentMounted(true);
+    dispatch({ _tag: "ToggleMode", mode });
+  }, []);
+  const openAddProject = useCallback(() => {
+    setDialogContentMounted(true);
+    dispatch({ _tag: "OpenAddProject" });
+  }, []);
+  const openNewThreadIn = useCallback(() => {
+    setDialogContentMounted(true);
+    dispatch({ _tag: "OpenNewThreadIn" });
+  }, []);
   const clearOpenIntent = useCallback(() => dispatch({ _tag: "ClearOpenIntent" }), []);
   const keybindings = useAtomValue(primaryServerKeybindingsAtom);
   const { theme, themeHalves, resolvedTheme } = useTheme();
@@ -496,15 +506,20 @@ export function CommandPalette({ children }: { children: ReactNode }) {
           }
           setOpen(open);
         }}
+        onOpenChangeComplete={(open) => {
+          if (!open) setDialogContentMounted(false);
+        }}
       >
         {children}
-        <CommandPaletteDialog
-          mode={state.mode}
-          openIntent={state.openIntent}
-          setOpen={setOpen}
-          openOverlayMode={toggleMode}
-          clearOpenIntent={clearOpenIntent}
-        />
+        {dialogContentMounted ? (
+          <CommandPaletteDialog
+            mode={state.mode}
+            openIntent={state.openIntent}
+            setOpen={setOpen}
+            openOverlayMode={toggleMode}
+            clearOpenIntent={clearOpenIntent}
+          />
+        ) : null}
       </CommandDialog>
     </ComposerHandleContext>
   );

apps/web/src/components/GitActionsControl.tsx

@@ -105,6 +105,7 @@ interface GitActionsControlProps {
 }
 
 interface PendingDefaultBranchAction {
+  open: boolean;
   action: DefaultBranchConfirmableAction;
   branchName: string;
   includesCommit: boolean;
@@ -538,11 +539,8 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
   const handleOpenChange = useCallback(
     (open: boolean) => {
       props.onOpenChange(open);
-      if (!open) {
-        resetState();
-      }
     },
-    [props, resetState],
+    [props.onOpenChange],
   );
 
   const openSourceControlSettings = useCallback(() => {
@@ -551,7 +549,13 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
   }, [handleOpenChange, navigate]);
 
   return (
-    <Dialog open={props.open} onOpenChange={handleOpenChange}>
+    <Dialog
+      open={props.open}
+      onOpenChange={handleOpenChange}
+      onOpenChangeComplete={(open) => {
+        if (!open) resetState();
+      }}
+    >
       <DialogPopup className="max-w-xl overflow-hidden">
         <div className="flex min-h-0 flex-col overflow-hidden border-foreground/10 bg-transparent">
           <DialogHeader className="border-b border-border/70 bg-foreground/[0.025] dark:border-transparent dark:bg-transparent">
@@ -1293,6 +1297,7 @@ export default function GitActionsControl({
           return;
         }
         setPendingDefaultBranchAction({
+          open: true,
           action,
           branchName: actionBranch,
           includesCommit,
@@ -1496,9 +1501,9 @@ export default function GitActionsControl({
   );
 
   const continuePendingDefaultBranchAction = () => {
-    if (!pendingDefaultBranchAction) return;
+    if (!pendingDefaultBranchAction?.open) return;
     const { action, commitMessage, onConfirmed, filePaths } = pendingDefaultBranchAction;
-    setPendingDefaultBranchAction(null);
+    setPendingDefaultBranchAction({ ...pendingDefaultBranchAction, open: false });
     void runGitActionWithToast({
       action,
       ...(commitMessage ? { commitMessage } : {}),
@@ -1509,9 +1514,9 @@ export default function GitActionsControl({
   };
 
   const checkoutFeatureBranchAndContinuePendingAction = () => {
-    if (!pendingDefaultBranchAction) return;
+    if (!pendingDefaultBranchAction?.open) return;
     const { action, commitMessage, onConfirmed, filePaths } = pendingDefaultBranchAction;
-    setPendingDefaultBranchAction(null);
+    setPendingDefaultBranchAction({ ...pendingDefaultBranchAction, open: false });
     void runGitActionWithToast({
       action,
       ...(commitMessage ? { commitMessage } : {}),
@@ -1527,9 +1532,6 @@ export default function GitActionsControl({
     const commitMessage = dialogCommitMessage.trim();
 
     setIsCommitDialogOpen(false);
-    setDialogCommitMessage("");
-    setExcludedFiles(new Set());
-    setIsEditingFiles(false);
 
     void runGitActionWithToast({
       action: "commit",
@@ -1626,9 +1628,6 @@ export default function GitActionsControl({
     if (!isCommitDialogOpen) return;
     const commitMessage = dialogCommitMessage.trim();
     setIsCommitDialogOpen(false);
-    setDialogCommitMessage("");
-    setExcludedFiles(new Set());
-    setIsEditingFiles(false);
     void runGitActionWithToast({
       action: "commit",
       ...(commitMessage ? { commitMessage } : {}),
@@ -1835,13 +1834,12 @@ export default function GitActionsControl({
 
       <Dialog
         open={isCommitDialogOpen}
-        onOpenChange={(open) => {
-          if (!open) {
-            setIsCommitDialogOpen(false);
-            setDialogCommitMessage("");
-            setExcludedFiles(new Set());
-            setIsEditingFiles(false);
-          }
+        onOpenChange={setIsCommitDialogOpen}
+        onOpenChangeComplete={(open) => {
+          if (open) return;
+          setDialogCommitMessage("");
+          setExcludedFiles(new Set());
+          setIsEditingFiles(false);
         }}
       >
         <DialogPopup>
@@ -1972,16 +1970,7 @@ export default function GitActionsControl({
             </div>
           </DialogPanel>
           <DialogFooter variant="bare">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => {
-                setIsCommitDialogOpen(false);
-                setDialogCommitMessage("");
-                setExcludedFiles(new Set());
-                setIsEditingFiles(false);
-              }}
-            >
+            <Button variant="outline" size="sm" onClick={() => setIsCommitDialogOpen(false)}>
               Cancel
             </Button>
             <Button
@@ -2007,12 +1996,15 @@ export default function GitActionsControl({
       />
 
       <Dialog
-        open={pendingDefaultBranchAction !== null}
+        open={pendingDefaultBranchAction?.open ?? false}
         onOpenChange={(open) => {
-          if (!open) {
-            setPendingDefaultBranchAction(null);
+          if (!open && pendingDefaultBranchAction) {
+            setPendingDefaultBranchAction({ ...pendingDefaultBranchAction, open: false });
           }
         }}
+        onOpenChangeComplete={(open) => {
+          if (!open) setPendingDefaultBranchAction(null);
+        }}
       >
         <DialogPopup className="max-w-xl">
           <DialogHeader>
@@ -2026,7 +2018,11 @@ export default function GitActionsControl({
               className="w-full sm:mr-auto sm:w-auto"
               variant="outline"
               size="sm"
-              onClick={() => setPendingDefaultBranchAction(null)}
+              onClick={() => {
+                if (pendingDefaultBranchAction) {
+                  setPendingDefaultBranchAction({ ...pendingDefaultBranchAction, open: false });
+                }
+              }}
             >
               Abort
             </Button>

apps/web/src/components/PullRequestThreadDialog.tsx

@@ -33,6 +33,7 @@ interface PullRequestThreadDialogProps {
   cwd: string | null;
   initialReference: string | null;
   onOpenChange: (open: boolean) => void;
+  onOpenChangeComplete: (open: boolean) => void;
   onPrepared: (input: { branch: string; worktreePath: string | null }) => Promise<void> | void;
 }
 
@@ -43,6 +44,7 @@ export function PullRequestThreadDialog({
   cwd,
   initialReference,
   onOpenChange,
+  onOpenChangeComplete,
   onPrepared,
 }: PullRequestThreadDialogProps) {
   const referenceInputRef = useRef<HTMLInputElement>(null);
@@ -193,6 +195,7 @@ export function PullRequestThreadDialog({
           onOpenChange(nextOpen);
         }
       }}
+      onOpenChangeComplete={onOpenChangeComplete}
     >
       <DialogPopup className="max-w-xl">
         <DialogHeader>

apps/web/src/components/RightPanelSheet.tsx

@@ -17,12 +17,7 @@ export function RightPanelSheet(props: {
         }
       }}
     >
-      <SheetPopup
-        side="right"
-        showCloseButton={false}
-        keepMounted
-        className={RIGHT_PANEL_SHEET_CLASS_NAME}
-      >
+      <SheetPopup side="right" showCloseButton={false} className={RIGHT_PANEL_SHEET_CLASS_NAME}>
         {props.children}
       </SheetPopup>
     </Sheet>