feat(code-review): mark files as viewed in diff review

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

@@ -50,7 +50,9 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
     expandAll,
     collapseAll,
     uncollapseFile,
-  } = useReviewState(reviewFiles, allPaths);
+    viewedFiles,
+    toggleViewed,
+  } = useReviewState(reviewFiles, allPaths, taskId);
 
   const toolCallFallbacks = useMemo(
     () =>
@@ -81,6 +83,7 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
             commentThreads={showReviewComments ? commentThreads : undefined}
             fallback={toolCallFallbacks?.get(file.path) ?? null}
             externalUrl={githubFileUrl}
+            viewedKey={file.path}
           />
         ),
       };
@@ -132,6 +135,8 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
       onUncollapseFile={uncollapseFile}
       items={items}
       itemIndexByFilePath={itemIndexByFilePath}
+      viewedFiles={viewedFiles}
+      onToggleViewed={toggleViewed}
     />
   );
 }

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

@@ -16,6 +16,7 @@ interface PatchedFileDiffProps {
   externalUrl?: string;
   prUrl?: string | null;
   commentThreads?: Map<number, PrCommentThread>;
+  viewedKey?: string;
 }
 
 export function PatchedFileDiff({
@@ -28,6 +29,7 @@ export function PatchedFileDiff({
   externalUrl,
   prUrl,
   commentThreads,
+  viewedKey,
 }: PatchedFileDiffProps) {
   const fileDiff = useMemo((): FileDiffMetadata | undefined => {
     if (!file.patch) return undefined;
@@ -56,6 +58,7 @@ export function PatchedFileDiff({
         collapsed={collapsed}
         onToggle={onToggle}
         externalUrl={externalUrl}
+        viewedKey={viewedKey}
       />
     );
   }
@@ -72,6 +75,7 @@ export function PatchedFileDiff({
           fileDiff={fd}
           collapsed={collapsed}
           onToggle={onToggle}
+          viewedKey={viewedKey}
         />
       )}
     />

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

@@ -134,7 +134,9 @@ export function ReviewPage({ task }: ReviewPageProps) {
     expandAll,
     collapseAll,
     uncollapseFile,
-  } = useReviewState(changedFiles, allPaths);
+    viewedFiles,
+    toggleViewed,
+  } = useReviewState(changedFiles, allPaths, taskId);
 
   const stagedPathSet = useMemo(
     () => new Set(stagedParsedFiles.map((f) => f.name ?? f.prevName ?? "")),
@@ -186,6 +188,8 @@ export function ReviewPage({ task }: ReviewPageProps) {
       expandAll={expandAll}
       collapseAll={collapseAll}
       uncollapseFile={uncollapseFile}
+      viewedFiles={viewedFiles}
+      toggleViewed={toggleViewed}
       refetch={refetch}
       hasStagedFiles={hasStagedFiles}
       stagedParsedFiles={stagedParsedFiles}
@@ -218,6 +222,8 @@ function LocalReviewContent({
   expandAll,
   collapseAll,
   uncollapseFile,
+  viewedFiles,
+  toggleViewed,
   refetch,
   hasStagedFiles,
   stagedParsedFiles,
@@ -246,6 +252,8 @@ function LocalReviewContent({
   expandAll: () => void;
   collapseAll: () => void;
   uncollapseFile: (filePath: string) => void;
+  viewedFiles: Set<string>;
+  toggleViewed: (key: string) => void;
   refetch: () => void;
   hasStagedFiles: boolean;
   stagedParsedFiles: ReturnType<typeof parsePatchFiles>[number]["files"];
@@ -357,6 +365,8 @@ function LocalReviewContent({
       defaultBranch={defaultBranch}
       items={items}
       itemIndexByFilePath={itemIndexByFilePath}
+      viewedFiles={viewedFiles}
+      onToggleViewed={toggleViewed}
     />
   );
 }
@@ -401,7 +411,7 @@ function RemoteReviewPage({
     : prLoading && files.length === 0;
 
   const allPaths = useMemo(() => files.map((f) => f.path), [files]);
-  const reviewState = useReviewState(files, allPaths);
+  const reviewState = useReviewState(files, allPaths, taskId);
 
   const items = useMemo(
     () =>
@@ -444,6 +454,8 @@ function RemoteReviewPage({
       defaultBranch={defaultBranch}
       items={items}
       itemIndexByFilePath={itemIndexByFilePath}
+      viewedFiles={reviewState.viewedFiles}
+      onToggleViewed={reviewState.toggleViewed}
     />
   );
 }

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

@@ -64,9 +64,10 @@ export const PatchRow = memo(function PatchRow({
         collapsed={collapsed}
         onToggle={onToggle}
         onOpenFile={onOpenFile}
+        viewedKey={itemKey}
       />
     ),
-    [collapsed, onToggle, onOpenFile],
+    [collapsed, onToggle, onOpenFile, itemKey],
   );
   return (
     <InteractiveFileDiff
@@ -113,6 +114,7 @@ export const UntrackedRow = memo(function UntrackedRow({
       collapsed={collapsed}
       onToggle={onToggle}
       taskId={taskId}
+      viewedKey={itemKey}
     />
   );
 });
@@ -152,6 +154,7 @@ export const RemoteRow = memo(function RemoteRow({
       onToggle={onToggle}
       commentThreads={commentThreads}
       externalUrl={externalUrl}
+      viewedKey={file.path}
     />
   );
 });
@@ -163,13 +166,15 @@ function UntrackedFileDiff({
   options,
   collapsed,
   onToggle,
+  viewedKey,
 }: {
   file: ChangedFile;
   repoPath: string;
   taskId: string;
   options: DiffOptions;
   collapsed: boolean;
   onToggle: () => void;
+  viewedKey?: string;
 }) {
   const [containerRef, inView] = useInView<HTMLDivElement>({
     rootMargin: REVIEW_PREFETCH_ROOT_MARGIN,
@@ -211,6 +216,7 @@ function UntrackedFileDiff({
         reason="line-limit"
         collapsed={collapsed}
         onToggle={onToggle}
+        viewedKey={viewedKey}
       />
     );
   }
@@ -231,6 +237,7 @@ function UntrackedFileDiff({
               fileDiff={fd}
               collapsed={collapsed}
               onToggle={onToggle}
+              viewedKey={viewedKey}
             />
           )}
         />
@@ -242,6 +249,7 @@ function UntrackedFileDiff({
           deletions={0}
           collapsed={collapsed}
           onToggle={onToggle}
+          viewedKey={viewedKey}
         />
       )}
     </div>

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

@@ -2,7 +2,7 @@ import { WorkerPoolContextProvider } from "@pierre/diffs/react";
 import { useService } from "@posthog/di/react";
 import type { Task } from "@posthog/shared/domain-types";
 import { Flex, Spinner, Text } from "@radix-ui/themes";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { VList, type VListHandle } from "virtua";
 import {
   REVIEW_LIST_BUFFER_PX,
@@ -12,6 +12,7 @@ import { useReviewDraftsStore } from "../reviewDraftsStore";
 import { REVIEW_HOST, type ReviewHost } from "../reviewHost";
 import { useReviewNavigationStore } from "../reviewNavigationStore";
 import type { ReviewListItem, ReviewShellProps } from "../reviewShellParts";
+import { ReviewViewedContext } from "../reviewViewedContext";
 import { PendingReviewBar } from "./PendingReviewBar";
 import { ReviewToolbar } from "./ReviewToolbar";
 
@@ -103,6 +104,8 @@ export function ReviewShell({
   isEmpty,
   items,
   itemIndexByFilePath,
+  viewedFiles,
+  onToggleViewed,
   onUncollapseFile,
   allExpanded,
   onExpandAll,
@@ -127,6 +130,11 @@ export function ReviewShell({
   );
   const isExpanded = reviewMode === "expanded";
 
+  const viewedContextValue = useMemo(
+    () => ({ viewedFiles, toggleViewed: onToggleViewed }),
+    [viewedFiles, onToggleViewed],
+  );
+
   const scrollRequest = useReviewNavigationStore(
     (s) => s.scrollRequests[taskId] ?? null,
   );
@@ -217,53 +225,63 @@ export function ReviewShell({
         ],
       }}
     >
-      <Flex direction="column" height="100%" id="review-shell">
-        <ReviewToolbar
-          taskId={taskId}
-          fileCount={fileCount}
-          linesAdded={linesAdded}
-          linesRemoved={linesRemoved}
-          allExpanded={allExpanded}
-          onExpandAll={onExpandAll}
-          onCollapseAll={onCollapseAll}
-          onRefresh={onRefresh}
-          effectiveSource={effectiveSource}
-          branchSourceAvailable={branchSourceAvailable}
-          prSourceAvailable={prSourceAvailable}
-          defaultBranch={defaultBranch}
-        />
-        <Flex className="min-h-0 flex-1">
-          <Flex direction="column" className="min-w-0 flex-1">
-            {isLoading ? (
-              <Flex align="center" justify="center" className="min-h-0 flex-1">
-                <Spinner size="2" />
-              </Flex>
-            ) : isEmpty ? (
-              <Flex align="center" justify="center" className="min-h-0 flex-1">
-                <Text color="gray" className="text-sm">
-                  No file changes to review
-                </Text>
-              </Flex>
-            ) : (
-              <VList
-                ref={listRef}
-                bufferSize={REVIEW_LIST_BUFFER_PX}
-                itemSize={REVIEW_LIST_ESTIMATED_ITEM_SIZE}
-                className="pierre-scroll-root scrollbar-overlay-y min-h-0 flex-1 overflow-auto bg-(--gray-2)"
-                shift={false}
-                style={{ scrollbarGutter: "stable" }}
-                onScroll={handleScroll}
-                data={items}
-              >
-                {renderItem}
-              </VList>
-            )}
-            <PendingReviewBar taskId={taskId} />
-          </Flex>
+      <ReviewViewedContext.Provider value={viewedContextValue}>
+        <Flex direction="column" height="100%" id="review-shell">
+          <ReviewToolbar
+            taskId={taskId}
+            fileCount={fileCount}
+            linesAdded={linesAdded}
+            linesRemoved={linesRemoved}
+            allExpanded={allExpanded}
+            onExpandAll={onExpandAll}
+            onCollapseAll={onCollapseAll}
+            onRefresh={onRefresh}
+            effectiveSource={effectiveSource}
+            branchSourceAvailable={branchSourceAvailable}
+            prSourceAvailable={prSourceAvailable}
+            defaultBranch={defaultBranch}
+          />
+          <Flex className="min-h-0 flex-1">
+            <Flex direction="column" className="min-w-0 flex-1">
+              {isLoading ? (
+                <Flex
+                  align="center"
+                  justify="center"
+                  className="min-h-0 flex-1"
+                >
+                  <Spinner size="2" />
+                </Flex>
+              ) : isEmpty ? (
+                <Flex
+                  align="center"
+                  justify="center"
+                  className="min-h-0 flex-1"
+                >
+                  <Text color="gray" className="text-sm">
+                    No file changes to review
+                  </Text>
+                </Flex>
+              ) : (
+                <VList
+                  ref={listRef}
+                  bufferSize={REVIEW_LIST_BUFFER_PX}
+                  itemSize={REVIEW_LIST_ESTIMATED_ITEM_SIZE}
+                  className="pierre-scroll-root scrollbar-overlay-y min-h-0 flex-1 overflow-auto bg-(--gray-2)"
+                  shift={false}
+                  style={{ scrollbarGutter: "stable" }}
+                  onScroll={handleScroll}
+                  data={items}
+                >
+                  {renderItem}
+                </VList>
+              )}
+              <PendingReviewBar taskId={taskId} />
+            </Flex>
 
-          {isExpanded && <ExpandedSidebar task={task} />}
+            {isExpanded && <ExpandedSidebar task={task} />}
+          </Flex>
         </Flex>
-      </Flex>
+      </ReviewViewedContext.Provider>
     </WorkerPoolContextProvider>
   );
 }