🤖 Optimize Review tab performance & remove height limits (#330)

Fixes performance issues with j/k navigation and removes arbitrary 400px
height limit in Review tab.

## Performance fixes

**Problem**: Pressing j/k in Review tab caused ALL hunks to re-render
(200-500ms lag with 50+ hunks).

**Root cause**: Callback creators returned new functions each render,
breaking React.memo shallow comparison.

**Solution**: 
- Data-attribute pattern with single stable callbacks (no per-hunk
closures)
- Memoized HunkViewer, SelectableDiffRenderer, HighlightedContent
- Memoized expensive computations (language detection, line parsing)
- Batched localStorage writes with queueMicrotask

**Result**: Only 2 hunks re-render per j/k press (<16ms, even with 100+
hunks).

## Height limit removal

**Problem**: 400px max-height forced scrolling even for moderately-sized
diffs.

**Solution**:
- Added configurable `maxHeight` prop to DiffRenderer (defaults to
'400px')
- Review tab passes `maxHeight='none'` for unlimited height
- FileEdit tool keeps 400px limit (default behavior)
- Auto-collapse hunks >200 lines on load to preserve readability

**Result**: Full diff visibility in Review tab without scrolling, large
diffs remain scannable.

## Testing
- Verified with React DevTools Profiler: only active hunk re-renders on
navigation
- All 658 tests pass

Author: ammar-agent

src/components/RightSidebar/CodeReview/HunkViewer.tsx

@@ -6,13 +6,15 @@ import React, { useState } from "react";
 import styled from "@emotion/styled";
 import type { DiffHunk } from "@/types/review";
 import { SelectableDiffRenderer } from "../../shared/DiffRenderer";
+import { Tooltip, TooltipWrapper } from "../../Tooltip";
 
 interface HunkViewerProps {
   hunk: DiffHunk;
+  hunkId: string;
   isSelected?: boolean;
   isRead?: boolean;
-  onClick?: () => void;
-  onToggleRead?: () => void;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  onToggleRead?: (e: React.MouseEvent<HTMLElement>) => void;
   onReviewNote?: (note: string) => void;
 }
 
@@ -162,105 +164,135 @@ const ToggleReadButton = styled.button`
   }
 `;
 
-export const HunkViewer: React.FC<HunkViewerProps> = ({
-  hunk,
-  isSelected,
-  isRead = false,
-  onClick,
-  onToggleRead,
-  onReviewNote,
-}) => {
-  // Collapse by default if marked as read
-  const [isExpanded, setIsExpanded] = useState(!isRead);
-
-  // Auto-collapse when marked as read, auto-expand when unmarked
-  React.useEffect(() => {
-    setIsExpanded(!isRead);
-  }, [isRead]);
-
-  const handleToggleExpand = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsExpanded(!isExpanded);
-  };
-
-  const handleToggleRead = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onToggleRead?.();
-  };
-
-  // Parse diff lines
-  const diffLines = hunk.content.split("\n").filter((line) => line.length > 0);
-  const lineCount = diffLines.length;
-  const shouldCollapse = lineCount > 20; // Collapse hunks with more than 20 lines
-
-  // Calculate net LoC (additions - deletions)
-  const additions = diffLines.filter((line) => line.startsWith("+")).length;
-  const deletions = diffLines.filter((line) => line.startsWith("-")).length;
-
-  // Detect pure rename: if renamed and content hasn't changed (zero additions and deletions)
-  const isPureRename =
-    hunk.changeType === "renamed" && hunk.oldPath && additions === 0 && deletions === 0;
-
-  return (
-    <HunkContainer
-      isSelected={isSelected ?? false}
-      isRead={isRead}
-      onClick={onClick}
-      role="button"
-      tabIndex={0}
-      data-hunk-id={hunk.id}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick?.();
-        }
-      }}
-    >
-      <HunkHeader>
-        {isRead && <ReadIndicator title="Marked as read">✓</ReadIndicator>}
-        <FilePath>{hunk.filePath}</FilePath>
-        <LineInfo>
-          {!isPureRename && (
-            <LocStats>
-              {additions > 0 && <Additions>+{additions}</Additions>}
-              {deletions > 0 && <Deletions>-{deletions}</Deletions>}
-            </LocStats>
+export const HunkViewer = React.memo<HunkViewerProps>(
+  ({ hunk, hunkId, isSelected, isRead = false, onClick, onToggleRead, onReviewNote }) => {
+    // Parse diff lines (memoized - only recompute if hunk.content changes)
+    // Must be done before state initialization to determine initial collapse state
+    const { lineCount, additions, deletions, isLargeHunk } = React.useMemo(() => {
+      const lines = hunk.content.split("\n").filter((line) => line.length > 0);
+      const count = lines.length;
+      return {
+        lineCount: count,
+        additions: lines.filter((line) => line.startsWith("+")).length,
+        deletions: lines.filter((line) => line.startsWith("-")).length,
+        isLargeHunk: count > 200, // Memoize to prevent useEffect re-runs
+      };
+    }, [hunk.content]);
+
+    // Collapse by default if marked as read OR if hunk has >200 lines
+    const [isExpanded, setIsExpanded] = useState(() => !isRead && !isLargeHunk);
+
+    // Auto-collapse when marked as read, auto-expand when unmarked (but respect large hunk threshold)
+    React.useEffect(() => {
+      if (isRead) {
+        setIsExpanded(false);
+      } else if (!isLargeHunk) {
+        setIsExpanded(true);
+      }
+      // Note: When unmarking as read, large hunks remain collapsed
+    }, [isRead, isLargeHunk]);
+
+    const handleToggleExpand = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setIsExpanded(!isExpanded);
+    };
+
+    const handleToggleRead = (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      onToggleRead?.(e);
+    };
+
+    // Detect pure rename: if renamed and content hasn't changed (zero additions and deletions)
+    const isPureRename =
+      hunk.changeType === "renamed" && hunk.oldPath && additions === 0 && deletions === 0;
+
+    return (
+      <HunkContainer
+        isSelected={isSelected ?? false}
+        isRead={isRead}
+        onClick={onClick}
+        role="button"
+        tabIndex={0}
+        data-hunk-id={hunkId}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            // Cast to MouseEvent-like for onClick handler
+            onClick?.(e as unknown as React.MouseEvent<HTMLElement>);
+          }
+        }}
+      >
+        <HunkHeader>
+          {isRead && (
+            <TooltipWrapper inline>
+              <ReadIndicator aria-label="Marked as read">✓</ReadIndicator>
+              <Tooltip align="center" position="top">
+                Marked as read
+              </Tooltip>
+            </TooltipWrapper>
           )}
-          <LineCount>
-            ({lineCount} {lineCount === 1 ? "line" : "lines"})
-          </LineCount>
-          {onToggleRead && (
-            <ToggleReadButton onClick={handleToggleRead} title="Mark as read (m)">
-              {isRead ? "○" : "◉"}
-            </ToggleReadButton>
-          )}
-        </LineInfo>
-      </HunkHeader>
-
-      {isPureRename ? (
-        <RenameInfo>
-          Renamed from <code>{hunk.oldPath}</code>
-        </RenameInfo>
-      ) : isExpanded ? (
-        <HunkContent>
-          <SelectableDiffRenderer
-            content={hunk.content}
-            filePath={hunk.filePath}
-            oldStart={hunk.oldStart}
-            newStart={hunk.newStart}
-            onReviewNote={onReviewNote}
-            onLineClick={onClick}
-          />
-        </HunkContent>
-      ) : (
-        <CollapsedIndicator onClick={handleToggleExpand}>
-          {isRead && "Hunk marked as read. "}Click to expand ({lineCount} lines)
-        </CollapsedIndicator>
-      )}
-
-      {shouldCollapse && isExpanded && !isPureRename && (
-        <CollapsedIndicator onClick={handleToggleExpand}>Click to collapse</CollapsedIndicator>
-      )}
-    </HunkContainer>
-  );
-};
+          <FilePath>{hunk.filePath}</FilePath>
+          <LineInfo>
+            {!isPureRename && (
+              <LocStats>
+                {additions > 0 && <Additions>+{additions}</Additions>}
+                {deletions > 0 && <Deletions>-{deletions}</Deletions>}
+              </LocStats>
+            )}
+            <LineCount>
+              ({lineCount} {lineCount === 1 ? "line" : "lines"})
+            </LineCount>
+            {onToggleRead && (
+              <TooltipWrapper inline>
+                <ToggleReadButton
+                  data-hunk-id={hunkId}
+                  onClick={handleToggleRead}
+                  aria-label="Mark as read (m)"
+                >
+                  {isRead ? "○" : "◉"}
+                </ToggleReadButton>
+                <Tooltip align="right" position="top">
+                  Mark as read (m)
+                </Tooltip>
+              </TooltipWrapper>
+            )}
+          </LineInfo>
+        </HunkHeader>
+
+        {isPureRename ? (
+          <RenameInfo>
+            Renamed from <code>{hunk.oldPath}</code>
+          </RenameInfo>
+        ) : isExpanded ? (
+          <HunkContent>
+            <SelectableDiffRenderer
+              content={hunk.content}
+              filePath={hunk.filePath}
+              oldStart={hunk.oldStart}
+              newStart={hunk.newStart}
+              maxHeight="none"
+              onReviewNote={onReviewNote}
+              onLineClick={() => {
+                // Create synthetic event with data-hunk-id for parent handler
+                const syntheticEvent = {
+                  currentTarget: { dataset: { hunkId } },
+                } as unknown as React.MouseEvent<HTMLElement>;
+                onClick?.(syntheticEvent);
+              }}
+            />
+          </HunkContent>
+        ) : (
+          <CollapsedIndicator onClick={handleToggleExpand}>
+            {isRead && "Hunk marked as read. "}Click to expand ({lineCount} lines)
+          </CollapsedIndicator>
+        )}
+
+        {isLargeHunk && isExpanded && !isPureRename && (
+          <CollapsedIndicator onClick={handleToggleExpand}>Click to collapse</CollapsedIndicator>
+        )}
+      </HunkContainer>
+    );
+  }
+);
+
+HunkViewer.displayName = "HunkViewer";

src/components/RightSidebar/CodeReview/ReviewPanel.tsx

@@ -312,7 +312,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
   );
 
   // Initialize review state hook
-  const reviewState = useReviewState(workspaceId);
+  const { isRead, toggleRead } = useReviewState(workspaceId);
 
   const [filters, setFilters] = useState<ReviewFiltersType>({
     showReadHunks: showReadHunks,
@@ -477,59 +477,78 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
         return null; // Unknown state - no hunks loaded for this file
       }
       const total = fileHunks.length;
-      const read = fileHunks.filter((h) => reviewState.isRead(h.id)).length;
+      const read = fileHunks.filter((h) => isRead(h.id)).length;
       return { total, read };
     },
-    [hunks, reviewState]
+    [hunks, isRead]
   );
 
   // Filter hunks based on read state
   const filteredHunks = useMemo(() => {
     if (filters.showReadHunks) {
       return hunks;
     }
-    return hunks.filter((hunk) => !reviewState.isRead(hunk.id));
-  }, [hunks, filters.showReadHunks, reviewState]);
+    return hunks.filter((hunk) => !isRead(hunk.id));
+  }, [hunks, filters.showReadHunks, isRead]);
 
   // Handle toggling read state with auto-navigation
   const handleToggleRead = useCallback(
     (hunkId: string) => {
-      const wasRead = reviewState.isRead(hunkId);
-      reviewState.toggleRead(hunkId);
+      const wasRead = isRead(hunkId);
+      toggleRead(hunkId);
 
       // If toggling the selected hunk, check if it will still be visible after toggle
       if (hunkId === selectedHunkId) {
         // Hunk is visible if: showReadHunks is on OR it will be unread after toggle
         const willBeVisible = filters.showReadHunks || wasRead;
 
         if (!willBeVisible) {
+          // Compute filtered hunks here to avoid dependency on filteredHunks array
+          const currentFiltered = filters.showReadHunks
+            ? hunks
+            : hunks.filter((h) => !isRead(h.id));
+
           // Hunk will be filtered out - move to next visible hunk
-          const currentIndex = filteredHunks.findIndex((h) => h.id === hunkId);
+          const currentIndex = currentFiltered.findIndex((h) => h.id === hunkId);
           if (currentIndex !== -1) {
-            if (currentIndex < filteredHunks.length - 1) {
-              setSelectedHunkId(filteredHunks[currentIndex + 1].id);
+            if (currentIndex < currentFiltered.length - 1) {
+              setSelectedHunkId(currentFiltered[currentIndex + 1].id);
             } else if (currentIndex > 0) {
-              setSelectedHunkId(filteredHunks[currentIndex - 1].id);
+              setSelectedHunkId(currentFiltered[currentIndex - 1].id);
             } else {
               setSelectedHunkId(null);
             }
           }
         }
       }
     },
-    [reviewState, filters.showReadHunks, filteredHunks, selectedHunkId]
+    [isRead, toggleRead, filters.showReadHunks, hunks, selectedHunkId]
+  );
+
+  // Stable callbacks for HunkViewer (single callback shared across all hunks)
+  const handleHunkClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
+    const hunkId = e.currentTarget.dataset.hunkId;
+    if (hunkId) setSelectedHunkId(hunkId);
+  }, []);
+
+  const handleHunkToggleRead = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      const hunkId = e.currentTarget.dataset.hunkId;
+      if (hunkId) handleToggleRead(hunkId);
+    },
+    [handleToggleRead]
   );
 
   // Calculate stats
   const stats = useMemo(() => {
     const total = hunks.length;
-    const read = hunks.filter((h) => reviewState.isRead(h.id)).length;
+    const read = hunks.filter((h) => isRead(h.id)).length;
     return {
       total,
       read,
       unread: total - read,
     };
-  }, [hunks, reviewState]);
+  }, [hunks, isRead]);
 
   // Scroll selected hunk into view
   useEffect(() => {
@@ -672,16 +691,17 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
               ) : (
                 filteredHunks.map((hunk) => {
                   const isSelected = hunk.id === selectedHunkId;
-                  const isRead = reviewState.isRead(hunk.id);
+                  const hunkIsRead = isRead(hunk.id);
 
                   return (
                     <HunkViewer
                       key={hunk.id}
                       hunk={hunk}
+                      hunkId={hunk.id}
                       isSelected={isSelected}
-                      isRead={isRead}
-                      onClick={() => setSelectedHunkId(hunk.id)}
-                      onToggleRead={() => handleToggleRead(hunk.id)}
+                      isRead={hunkIsRead}
+                      onClick={handleHunkClick}
+                      onToggleRead={handleHunkToggleRead}
                       onReviewNote={onReviewNote}
                     />
                   );