Avoid effect-driven renders in image preview dialog

apps/web/src/components/ChatView.tsx

@@ -147,7 +147,10 @@
 import { PullRequestThreadDialog } from "./PullRequestThreadDialog";
 import { MessagesTimeline } from "./chat/MessagesTimeline";
 import { ChatHeader } from "./chat/ChatHeader";
-import { type ExpandedImagePreview } from "./chat/ExpandedImagePreview";
+import {
+  getExpandedImagePreviewIdentityKey,
+  type ExpandedImagePreview,
+} from "./chat/ExpandedImagePreview";
 import { NoActiveThreadState } from "./NoActiveThreadState";
 import { resolveEffectiveEnvMode, resolveEnvironmentOptionLabel } from "./BranchToolbar.logic";
 import { ProviderStatusBanner } from "./chat/ProviderStatusBanner";
@@ -1780,7 +1783,7 @@
   );
 
   const focusComposer = useCallback(() => {
     composerRef.current?.focusAtEnd();
   }, []);
   const scheduleComposerFocus = useCallback(() => {
     window.requestAnimationFrame(() => {
@@ -1788,7 +1791,7 @@
     });
   }, [focusComposer]);
   const addTerminalContextToDraft = useCallback((selection: TerminalContextSelection) => {
     composerRef.current?.addTerminalContext(selection);
   }, []);
   const setTerminalOpen = useCallback(
     (open: boolean) => {
@@ -2467,7 +2470,7 @@
       const shortcutContext = {
         terminalFocus: isTerminalFocused(),
         terminalOpen: Boolean(terminalState.terminalOpen),
         modelPickerOpen: composerRef.current?.isModelPickerOpen() ?? false,
       };
 
       const command = resolveShortcutCommand(event, keybindings, {
@@ -3019,7 +3022,7 @@
         };
       });
       promptRef.current = "";
       composerRef.current?.resetCursorState({ cursor: 0 });
     },
     [activePendingProgress?.activeQuestion, activePendingUserInput],
   );
@@ -3046,7 +3049,7 @@
           ),
         },
       }));
       const snapshot = composerRef.current?.readSnapshot();
       if (
         snapshot?.value !== value ||
         snapshot.cursor !== nextCursor ||
@@ -3109,7 +3112,7 @@
         return;
       }
 
       const sendCtx = composerRef.current?.getSendContext();
       if (!sendCtx) {
         return;
       }
@@ -3246,7 +3249,7 @@
       return;
     }
 
     const sendCtx = composerRef.current?.getSendContext();
     if (!sendCtx) {
       return;
     }
@@ -3773,7 +3776,11 @@
       ) : null}
 
       {expandedImage && (
-        <ExpandedImageDialog preview={expandedImage} onClose={closeExpandedImage} />
+        <ExpandedImageDialog
+          key={getExpandedImagePreviewIdentityKey(expandedImage)}
+          preview={expandedImage}
+          onClose={closeExpandedImage}
+        />
       )}
     </div>
   );

apps/web/src/components/chat/ExpandedImageDialog.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useEffectEvent, useState } from "react";
 import { ChevronLeftIcon, ChevronRightIcon, XIcon } from "lucide-react";
 import { Button } from "../ui/button";
 import type { ExpandedImagePreview } from "./ExpandedImagePreview";
@@ -8,52 +8,65 @@
   onClose: () => void;
 }
 
-export const ExpandedImageDialog = memo(function ExpandedImageDialog({
-  preview: initialPreview,
-  onClose,
-}: ExpandedImageDialogProps) {
-  const [preview, setPreview] = useState(initialPreview);
-
-  // Sync when the parent hands us a new preview reference.
-  useEffect(() => {
-    setPreview(initialPreview);
-  }, [initialPreview]);
-
-  const navigateImage = useCallback((direction: -1 | 1) => {
-    setPreview((existing) => {
-      if (existing.images.length <= 1) return existing;
-      const nextIndex =
-        (existing.index + direction + existing.images.length) % existing.images.length;
-      if (nextIndex === existing.index) return existing;
-      return { ...existing, index: nextIndex };
-    });
-  }, []);
+function useExpandedImageDialogKeyboardShortcuts(input: {
+  readonly imageCount: number;
+  readonly onClose: () => void;
+  readonly onNavigate: (direction: -1 | 1) => void;
+}) {
+  const close = useEffectEvent(input.onClose);
+  const navigate = useEffectEvent(input.onNavigate);
 
   useEffect(() => {
     const onKeyDown = (event: globalThis.KeyboardEvent) => {
       if (event.key === "Escape") {
         event.preventDefault();
         event.stopPropagation();
-        onClose();
+        close();
         return;
       }
-      if (preview.images.length <= 1) return;
+      if (input.imageCount <= 1) return;
       if (event.key === "ArrowLeft") {
         event.preventDefault();
         event.stopPropagation();
-        navigateImage(-1);
+        navigate(-1);
         return;
       }
       if (event.key !== "ArrowRight") return;
       event.preventDefault();
       event.stopPropagation();
-      navigateImage(1);
+      navigate(1);
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [navigateImage, onClose, preview.images.length]);
+  }, [close, input.imageCount, navigate]);
+}
+
+export const ExpandedImageDialog = memo(function ExpandedImageDialog({
+  preview,
+  onClose,
+}: ExpandedImageDialogProps) {
+  const [navigationOffset, setNavigationOffset] = useState(0);
+  const imageCount = preview.images.length;
+  const activeIndex =
+    imageCount > 0 ? (preview.index + navigationOffset + imageCount) % imageCount : preview.index;
+
+  const navigateImage = useCallback(
+    (direction: -1 | 1) => {
+      setNavigationOffset((offset) => {
+        if (imageCount <= 1) return offset;
+        return offset + direction;
+      });
+    },
+    [imageCount],
+  );
+
+  useExpandedImageDialogKeyboardShortcuts({
+    imageCount,
+    onClose,
+    onNavigate: navigateImage,
+  });
 
-  const item = preview.images[preview.index];
+  const item = preview.images[activeIndex];
   if (!item) return null;
 
   return (
@@ -69,7 +82,7 @@
         aria-label="Close image preview"
         onClick={onClose}
       />
-      {preview.images.length > 1 && (
+      {imageCount > 1 && (
         <Button
           type="button"
           size="icon"
@@ -100,10 +113,10 @@
         />
         <p className="mt-2 max-w-[92vw] truncate text-center text-xs text-muted-foreground/80">
           {item.name}
-          {preview.images.length > 1 ? ` (${preview.index + 1}/${preview.images.length})` : ""}
+          {imageCount > 1 ? ` (${activeIndex + 1}/${imageCount})` : ""}
         </p>
       </div>
-      {preview.images.length > 1 && (
+      {imageCount > 1 && (
         <Button
           type="button"
           size="icon"

apps/web/src/components/chat/ExpandedImagePreview.tsx

@@ -8,6 +8,14 @@ export interface ExpandedImagePreview {
   index: number;
 }
 
+export function getExpandedImagePreviewIdentityKey(preview: ExpandedImagePreview): string {
+  const selectedImage = preview.images[preview.index];
+  const selectedImageKey = selectedImage
+    ? `${selectedImage.name.length}:${selectedImage.name}:${selectedImage.src.length}:${selectedImage.src}`
+    : "missing";
+  return `${preview.images.length}:${preview.index}:${selectedImageKey}`;
+}
+
 export function buildExpandedImagePreview(
   images: ReadonlyArray<{ id: string; name: string; previewUrl?: string }>,
   selectedImageId: string,