fix(code-review): stabilize comment filtering

Generated-By: PostHog Code
Task-Id: 199c1147-fca6-415b-9ea1-00a45d9b7267

Author: MattPua

packages/ui/src/features/code-review/components/CloudReviewPage.tsx

@@ -13,7 +13,7 @@ import {
 } from "../commentFileFilter";
 import { useReviewNavigationStore } from "../reviewNavigationStore";
 import { PatchedFileDiff } from "./PatchedFileDiff";
-import { buildItemIndex, ReviewShell, useReviewState } from "./ReviewShell";
+import { ReviewShell, useReviewState } from "./ReviewShell";
 import { changedFileSignature } from "./reviewItemBuilders";
 
 interface CloudReviewPageProps {
@@ -35,12 +35,15 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
     toolCalls,
     isLoading,
   } = useCloudChangedFiles(taskId, task, isReviewOpen);
-  const { commentThreads } = usePrDetails(prUrl, {
-    includeComments: isReviewOpen,
+  const { commentThreads, commentsLoading } = usePrDetails(prUrl, {
+    includeComments: isReviewOpen && showReviewComments,
   });
   const commentedFilePaths = useMemo(
-    () => (prUrl ? getCommentedFilePaths(commentThreads) : undefined),
-    [commentThreads, prUrl],
+    () =>
+      prUrl && !commentsLoading
+        ? getCommentedFilePaths(commentThreads)
+        : undefined,
+    [commentThreads, commentsLoading, prUrl],
   );
 
   const allPaths = useMemo(() => reviewFiles.map((f) => f.path), [reviewFiles]);
@@ -117,8 +120,6 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
     toolCallFallbacks,
   ]);
 
-  const itemIndexByFilePath = useMemo(() => buildItemIndex(items), [items]);
-
   if (!prUrl && !effectiveBranch && reviewFiles.length === 0) {
     if (isRunActive) {
       return (
@@ -152,7 +153,6 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
       onUncollapseFile={uncollapseFile}
       onCollapseFiles={collapseFiles}
       items={items}
-      itemIndexByFilePath={itemIndexByFilePath}
       commentedFilePaths={commentedFilePaths?.all}
       unresolvedCommentedFilePaths={commentedFilePaths?.unresolved}
       currentSignatures={currentSignatures}

packages/ui/src/features/code-review/components/ReviewPage.tsx

@@ -27,7 +27,7 @@ import { useEffectiveDiffSource } from "../hooks/useEffectiveDiffSource";
 import { useReviewDiffs } from "../hooks/useReviewDiffs";
 import { useReviewNavigationStore } from "../reviewNavigationStore";
 import type { DiffOptions } from "../types";
-import { buildItemIndex, ReviewShell, useReviewState } from "./ReviewShell";
+import { ReviewShell, useReviewState } from "./ReviewShell";
 import {
   buildPatchReviewItems,
   buildRemoteReviewItems,
@@ -108,15 +108,18 @@ export function ReviewPage({ task }: ReviewPageProps) {
   } = useEffectiveDiffSource(taskId);
 
   const showReviewComments = useDiffViewerStore((s) => s.showReviewComments);
-  const { commentThreads } = usePrDetails(prUrl, {
-    includeComments: isReviewOpen,
+  const { commentThreads, commentsLoading } = usePrDetails(prUrl, {
+    includeComments: isReviewOpen && showReviewComments,
   });
   const effectiveCommentThreads = showReviewComments
     ? commentThreads
     : undefined;
   const commentedFilePaths = useMemo(
-    () => (prUrl ? getCommentedFilePaths(commentThreads) : undefined),
-    [commentThreads, prUrl],
+    () =>
+      prUrl && !commentsLoading
+        ? getCommentedFilePaths(commentThreads)
+        : undefined,
+    [commentThreads, commentsLoading, prUrl],
   );
 
   const isLocalActive = isReviewOpen && effectiveSource === "local";
@@ -425,8 +428,6 @@ function LocalReviewContent({
     unstagedParsedFiles,
   ]);
 
-  const itemIndexByFilePath = useMemo(() => buildItemIndex(items), [items]);
-
   return (
     <ReviewShell
       task={task}
@@ -447,7 +448,6 @@ function LocalReviewContent({
       prSourceAvailable={prSourceAvailable}
       defaultBranch={defaultBranch}
       items={items}
-      itemIndexByFilePath={itemIndexByFilePath}
       commentedFilePaths={commentedFilePaths}
       unresolvedCommentedFilePaths={unresolvedCommentedFilePaths}
       currentSignatures={currentSignatures}
@@ -543,8 +543,6 @@ function RemoteReviewPage({
       taskId,
     ],
   );
-  const itemIndexByFilePath = useMemo(() => buildItemIndex(items), [items]);
-
   return (
     <ReviewShell
       task={task}
@@ -564,7 +562,6 @@ function RemoteReviewPage({
       prSourceAvailable={prSourceAvailable}
       defaultBranch={defaultBranch}
       items={items}
-      itemIndexByFilePath={itemIndexByFilePath}
       commentedFilePaths={commentedFilePaths}
       unresolvedCommentedFilePaths={unresolvedCommentedFilePaths}
       currentSignatures={currentSignatures}

packages/ui/src/features/code-review/components/ReviewShell.tsx

@@ -15,7 +15,6 @@ import {
 } from "react";
 import { VList, type VListHandle } from "virtua";
 import {
-  type CommentFileFilter,
   deriveCommentFileFilterState,
   getEmptyReviewMessage,
   type ReviewListItem,
@@ -126,7 +125,6 @@ export function ReviewShell({
   isLoading,
   isEmpty,
   items,
-  itemIndexByFilePath,
   commentedFilePaths,
   unresolvedCommentedFilePaths,
   currentSignatures,
@@ -151,7 +149,12 @@ export function ReviewShell({
   const lastActiveRef = useRef<string | null>(null);
   const pendingNavigationRef = useRef<string | null>(null);
   const navigationFrameRef = useRef<number | null>(null);
-  const [commentFilter, setCommentFilter] = useState<CommentFileFilter>("none");
+  const commentFilter = useReviewNavigationStore(
+    (state) => state.commentFileFilters[taskId] ?? "none",
+  );
+  const setCommentFileFilter = useReviewNavigationStore(
+    (state) => state.setCommentFileFilter,
+  );
   const {
     activeFilter: activeCommentFilter,
     visibleItems,
@@ -265,15 +268,7 @@ export function ReviewShell({
   useEffect(() => {
     if (!scrollRequest) return;
     const targetIndex = visibleItemIndexByFilePath.get(scrollRequest);
-    if (targetIndex === undefined) {
-      if (
-        activeCommentFilter !== "none" &&
-        itemIndexByFilePath.has(scrollRequest)
-      ) {
-        setCommentFilter("none");
-      }
-      return;
-    }
+    if (targetIndex === undefined) return;
 
     const currentSignature = currentSignatures.get(scrollRequest);
     const viewed =
@@ -313,11 +308,9 @@ export function ReviewShell({
   }, [
     clearScrollRequest,
     currentSignatures,
-    itemIndexByFilePath,
     onUncollapseFile,
     scrollRequest,
     setActiveFilePath,
-    activeCommentFilter,
     taskId,
     visibleItemIndexByFilePath,
     viewedRecord,
@@ -417,7 +410,7 @@ export function ReviewShell({
             commentFilter={activeCommentFilter}
             onCommentFilterChange={
               commentedFilePaths && unresolvedCommentedFilePaths
-                ? setCommentFilter
+                ? (filter) => setCommentFileFilter(taskId, filter)
                 : undefined
             }
             linesAdded={linesAdded}

packages/ui/src/features/code-review/reviewNavigationStore.test.ts

@@ -0,0 +1,24 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { useReviewNavigationStore } from "./reviewNavigationStore";
+
+describe("reviewNavigationStore", () => {
+  beforeEach(() => {
+    useReviewNavigationStore.setState({
+      activeFilePaths: {},
+      scrollRequests: {},
+      reviewModes: {},
+      commentFileFilters: {},
+    });
+  });
+
+  it("clears the comment filter when navigating to a file", () => {
+    const store = useReviewNavigationStore.getState();
+    store.setCommentFileFilter("task-1", "unresolved");
+
+    store.requestScrollToFile("task-1", "src/example.ts");
+
+    const state = useReviewNavigationStore.getState();
+    expect(state.scrollRequests["task-1"]).toBe("src/example.ts");
+    expect(state.commentFileFilters["task-1"]).toBe("none");
+  });
+});

packages/ui/src/features/code-review/reviewNavigationStore.ts

@@ -1,11 +1,13 @@
 import { create } from "zustand";
+import type { CommentFileFilter } from "./commentFileFilter";
 
 export type ReviewMode = "closed" | "split" | "expanded";
 
 interface ReviewNavigationStoreState {
   activeFilePaths: Record<string, string | null>;
   scrollRequests: Record<string, string | null>;
   reviewModes: Record<string, ReviewMode>;
+  commentFileFilters: Record<string, CommentFileFilter>;
 }
 
 interface ReviewNavigationStoreActions {
@@ -14,6 +16,7 @@ interface ReviewNavigationStoreActions {
   clearScrollRequest: (taskId: string) => void;
   clearTask: (taskId: string) => void;
   setReviewMode: (taskId: string, mode: ReviewMode) => void;
+  setCommentFileFilter: (taskId: string, filter: CommentFileFilter) => void;
   getReviewMode: (taskId: string) => ReviewMode;
 }
 
@@ -25,6 +28,7 @@ export const useReviewNavigationStore = create<ReviewNavigationStore>()(
     activeFilePaths: {},
     scrollRequests: {},
     reviewModes: {},
+    commentFileFilters: {},
 
     setActiveFilePath: (taskId, path) =>
       set((state) => ({
@@ -34,6 +38,10 @@ export const useReviewNavigationStore = create<ReviewNavigationStore>()(
     requestScrollToFile: (taskId, path) =>
       set((state) => ({
         scrollRequests: { ...state.scrollRequests, [taskId]: path },
+        commentFileFilters: {
+          ...state.commentFileFilters,
+          [taskId]: "none",
+        },
       })),
 
     clearScrollRequest: (taskId) =>
@@ -45,13 +53,25 @@ export const useReviewNavigationStore = create<ReviewNavigationStore>()(
       set((state) => ({
         activeFilePaths: { ...state.activeFilePaths, [taskId]: null },
         scrollRequests: { ...state.scrollRequests, [taskId]: null },
+        commentFileFilters: {
+          ...state.commentFileFilters,
+          [taskId]: "none",
+        },
       })),
 
     setReviewMode: (taskId, mode) =>
       set((state) => ({
         reviewModes: { ...state.reviewModes, [taskId]: mode },
       })),
 
+    setCommentFileFilter: (taskId, filter) =>
+      set((state) => ({
+        commentFileFilters: {
+          ...state.commentFileFilters,
+          [taskId]: filter,
+        },
+      })),
+
     getReviewMode: (taskId) => get().reviewModes[taskId] ?? "closed",
   }),
 );

packages/ui/src/features/code-review/reviewShellParts.test.tsx

@@ -280,4 +280,18 @@ describe("commented file filtering", () => {
     expect(state.commentedFileCount).toBe(2);
     expect(state.unresolvedCommentedFileCount).toBe(1);
   });
+
+  it("keeps all files visible while comment paths are loading", () => {
+    const items: ReviewListItem[] = [
+      { key: "a.ts", filePaths: ["a.ts"], node: <span>A</span> },
+    ];
+
+    const state = deriveCommentFileFilterState({
+      items,
+      requestedFilter: "unresolved",
+    });
+
+    expect(state.activeFilter).toBe("none");
+    expect(state.visibleItems).toBe(items);
+  });
 });

packages/ui/src/features/code-review/reviewShellParts.tsx

@@ -209,7 +209,6 @@ export interface ReviewShellProps {
   isLoading: boolean;
   isEmpty: boolean;
   items: ReviewListItem[];
-  itemIndexByFilePath: Map<string, number>;
   commentedFilePaths?: ReadonlySet<string>;
   unresolvedCommentedFilePaths?: ReadonlySet<string>;
   currentSignatures: Map<string, string>;

packages/ui/src/features/git-interaction/usePrDetails.ts

@@ -85,5 +85,6 @@ export function usePrDetails(
       isLoading: metaQuery.isLoading,
     },
     commentThreads,
+    commentsLoading: commentsQuery.isLoading,
   };
 }