🤖 Add read-more feature to code review hunks

- Add HunkReadMoreState type to track expansion state (up/down lines)
- Add getReviewReadMoreStateKey storage helper for persistence
- Create readFileLines utility using sed over existing executeBash IPC
- Add expand up/down buttons in HunkViewer with ~30 line increments
- Load and display expanded context with proper diff formatting
- Store user expansion preferences per hunk in localStorage
- Support expanding until beginning of file (disable button when reached)
- Display loading states during line fetching

Author: ammar-agent

src/components/RightSidebar/CodeReview/HunkViewer.tsx

@@ -3,17 +3,23 @@
  */
 
 import React, { useState, useMemo } from "react";
-import type { DiffHunk } from "@/types/review";
+import type { DiffHunk, HunkReadMoreState } from "@/types/review";
 import { SelectableDiffRenderer } from "../../shared/DiffRenderer";
 import {
   type SearchHighlightConfig,
   highlightSearchInText,
 } from "@/utils/highlighting/highlightSearchTerms";
 import { Tooltip, TooltipWrapper } from "../../Tooltip";
 import { usePersistedState } from "@/hooks/usePersistedState";
-import { getReviewExpandStateKey } from "@/constants/storage";
+import { getReviewExpandStateKey, getReviewReadMoreStateKey } from "@/constants/storage";
 import { KEYBINDS, formatKeybind } from "@/utils/ui/keybinds";
 import { cn } from "@/lib/utils";
+import {
+  readFileLines,
+  calculateUpwardExpansion,
+  calculateDownwardExpansion,
+  formatAsContextLines,
+} from "@/utils/review/readFileLines";
 
 interface HunkViewerProps {
   hunk: DiffHunk;
@@ -105,6 +111,61 @@ export const HunkViewer = React.memo<HunkViewerProps>(
       }
     }, [hasManualState, manualExpandState]);
 
+    // Read-more state: tracks expanded lines up/down per hunk
+    const [readMoreStateMap, setReadMoreStateMap] = usePersistedState<
+      Record<string, HunkReadMoreState>
+    >(getReviewReadMoreStateKey(workspaceId), {}, { listener: true });
+
+    const readMoreState = useMemo(
+      () => readMoreStateMap[hunkId] || { up: 0, down: 0 },
+      [readMoreStateMap, hunkId]
+    );
+
+    // State for expanded content
+    const [expandedContentUp, setExpandedContentUp] = useState<string>("");
+    const [expandedContentDown, setExpandedContentDown] = useState<string>("");
+    const [isLoadingUp, setIsLoadingUp] = useState(false);
+    const [isLoadingDown, setIsLoadingDown] = useState(false);
+
+    // Load expanded content when read-more state changes
+    React.useEffect(() => {
+      if (readMoreState.up > 0) {
+        const expansion = calculateUpwardExpansion(hunk.oldStart, readMoreState.up);
+        if (expansion.numLines > 0) {
+          setIsLoadingUp(true);
+          void readFileLines(workspaceId, hunk.filePath, expansion.startLine, expansion.endLine)
+            .then((lines) => {
+              if (lines) {
+                setExpandedContentUp(formatAsContextLines(lines));
+              }
+            })
+            .finally(() => setIsLoadingUp(false));
+        }
+      } else {
+        setExpandedContentUp("");
+      }
+    }, [readMoreState.up, hunk.oldStart, hunk.filePath, workspaceId]);
+
+    React.useEffect(() => {
+      if (readMoreState.down > 0) {
+        const expansion = calculateDownwardExpansion(
+          hunk.oldStart,
+          hunk.oldLines,
+          readMoreState.down
+        );
+        setIsLoadingDown(true);
+        void readFileLines(workspaceId, hunk.filePath, expansion.startLine, expansion.endLine)
+          .then((lines) => {
+            if (lines) {
+              setExpandedContentDown(formatAsContextLines(lines));
+            }
+          })
+          .finally(() => setIsLoadingDown(false));
+      } else {
+        setExpandedContentDown("");
+      }
+    }, [readMoreState.down, hunk.oldStart, hunk.oldLines, hunk.filePath, workspaceId]);
+
     const handleToggleExpand = React.useCallback(
       (e?: React.MouseEvent) => {
         e?.stopPropagation();
@@ -131,6 +192,39 @@ export const HunkViewer = React.memo<HunkViewerProps>(
       onToggleRead?.(e);
     };
 
+    const handleExpandUp = React.useCallback(
+      (e: React.MouseEvent) => {
+        e.stopPropagation();
+        const expansion = calculateUpwardExpansion(hunk.oldStart, readMoreState.up);
+        if (expansion.startLine < 1 || expansion.numLines <= 0) {
+          // Already at beginning of file
+          return;
+        }
+        setReadMoreStateMap((prev) => ({
+          ...prev,
+          [hunkId]: {
+            ...readMoreState,
+            up: readMoreState.up + 30,
+          },
+        }));
+      },
+      [hunkId, hunk.oldStart, readMoreState, setReadMoreStateMap]
+    );
+
+    const handleExpandDown = React.useCallback(
+      (e: React.MouseEvent) => {
+        e.stopPropagation();
+        setReadMoreStateMap((prev) => ({
+          ...prev,
+          [hunkId]: {
+            ...readMoreState,
+            down: readMoreState.down + 30,
+          },
+        }));
+      },
+      [hunkId, readMoreState, setReadMoreStateMap]
+    );
+
     // 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;
@@ -199,23 +293,86 @@ export const HunkViewer = React.memo<HunkViewerProps>(
             Renamed from <code>{hunk.oldPath}</code>
           </div>
         ) : isExpanded ? (
-          <div className="font-monospace bg-code-bg grid grid-cols-[minmax(min-content,1fr)] overflow-x-auto px-2 py-1.5 text-[11px] leading-[1.4]">
-            <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);
-              }}
-              searchConfig={searchConfig}
-            />
+          <div className="font-monospace bg-code-bg grid grid-cols-[minmax(min-content,1fr)] overflow-x-auto text-[11px] leading-[1.4]">
+            {/* Read more upward button */}
+            {(() => {
+              const expansion = calculateUpwardExpansion(hunk.oldStart, readMoreState.up);
+              const canExpandUp = expansion.startLine >= 1 && expansion.numLines > 0;
+              return (
+                canExpandUp && (
+                  <div className="border-border-light border-b px-2 py-1.5">
+                    <button
+                      onClick={handleExpandUp}
+                      disabled={isLoadingUp}
+                      className="text-muted hover:text-foreground disabled:text-muted w-full text-center text-[11px] italic disabled:cursor-not-allowed"
+                    >
+                      {isLoadingUp ? "Loading..." : `Read ${expansion.numLines} more lines ↑`}
+                    </button>
+                  </div>
+                )
+              );
+            })()}
+            {/* Expanded content upward */}
+            {expandedContentUp && (
+              <div className="px-2 py-1.5">
+                <SelectableDiffRenderer
+                  content={expandedContentUp}
+                  filePath={hunk.filePath}
+                  oldStart={calculateUpwardExpansion(hunk.oldStart, readMoreState.up).startLine}
+                  newStart={calculateUpwardExpansion(hunk.oldStart, readMoreState.up).startLine}
+                  maxHeight="none"
+                  searchConfig={searchConfig}
+                />
+              </div>
+            )}
+            {/* Original hunk content */}
+            <div className="px-2 py-1.5">
+              <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);
+                }}
+                searchConfig={searchConfig}
+              />
+            </div>
+            {/* Expanded content downward */}
+            {expandedContentDown && (
+              <div className="px-2 py-1.5">
+                <SelectableDiffRenderer
+                  content={expandedContentDown}
+                  filePath={hunk.filePath}
+                  oldStart={
+                    calculateDownwardExpansion(hunk.oldStart, hunk.oldLines, readMoreState.down)
+                      .startLine
+                  }
+                  newStart={
+                    calculateDownwardExpansion(hunk.oldStart, hunk.oldLines, readMoreState.down)
+                      .startLine
+                  }
+                  maxHeight="none"
+                  searchConfig={searchConfig}
+                />
+              </div>
+            )}
+            {/* Read more downward button */}
+            <div className="border-border-light border-t px-2 py-1.5">
+              <button
+                onClick={handleExpandDown}
+                disabled={isLoadingDown}
+                className="text-muted hover:text-foreground disabled:text-muted w-full text-center text-[11px] italic disabled:cursor-not-allowed"
+              >
+                {isLoadingDown ? "Loading..." : "Read 30 more lines ↓"}
+              </button>
+            </div>
           </div>
         ) : (
           <div

src/constants/storage.ts

@@ -111,6 +111,15 @@ export function getReviewSearchStateKey(workspaceId: string): string {
   return `reviewSearchState:${workspaceId}`;
 }
 
+/**
+ * Get the localStorage key for read-more expansion state in Review tab
+ * Stores user's expanded context preferences per hunk
+ * Format: "reviewReadMoreState:{workspaceId}"
+ */
+export function getReviewReadMoreStateKey(workspaceId: string): string {
+  return `reviewReadMoreState:${workspaceId}`;
+}
+
 /**
  * List of workspace-scoped key functions that should be copied on fork and deleted on removal
  * Note: Excludes ephemeral keys like getCompactContinueMessageKey
@@ -125,6 +134,7 @@ const PERSISTENT_WORKSPACE_KEY_FUNCTIONS: Array<(workspaceId: string) => string>
   getReviewExpandStateKey,
   getFileTreeExpandStateKey,
   getReviewSearchStateKey,
+  getReviewReadMoreStateKey,
 ];
 
 /**

src/types/review.ts

@@ -93,3 +93,14 @@ export interface ReviewStats {
   /** Number of unread hunks */
   unread: number;
 }
+
+/**
+ * Read-more expansion state for a hunk
+ * Tracks how many lines have been expanded in each direction
+ */
+export interface HunkReadMoreState {
+  /** Lines expanded upward from the hunk start */
+  up: number;
+  /** Lines expanded downward from the hunk end */
+  down: number;
+}

src/utils/review/readFileLines.ts

@@ -0,0 +1,101 @@
+/**
+ * Utility functions for reading file lines using sed
+ * Used by the read-more feature in code review
+ */
+
+const LINES_PER_EXPANSION = 30;
+
+/**
+ * Read lines from a file using sed
+ * @param workspaceId - The workspace ID
+ * @param filePath - Path to the file relative to workspace root
+ * @param startLine - Starting line number (1-indexed)
+ * @param endLine - Ending line number (inclusive)
+ * @returns Array of lines or null if error
+ */
+export async function readFileLines(
+  workspaceId: string,
+  filePath: string,
+  startLine: number,
+  endLine: number
+): Promise<string[] | null> {
+  // Ensure valid line range
+  if (startLine < 1 || endLine < startLine) {
+    return null;
+  }
+
+  // Use sed to read lines from the file
+  // sed -n 'START,ENDp' FILE reads lines from START to END (inclusive)
+  const script = `sed -n '${startLine},${endLine}p' "${filePath.replace(/"/g, '\\"')}"`;
+
+  const result = await window.api.workspace.executeBash(workspaceId, script, {
+    timeout_secs: 3,
+  });
+
+  if (!result.success) {
+    console.error("Failed to read file lines:", result.error);
+    return null;
+  }
+
+  // When success is true, output is always a string (type narrowing)
+  const bashResult = result.data;
+  if (!bashResult.output) {
+    console.error("No output from bash command");
+    return null;
+  }
+
+  // Split output into lines
+  const lines = bashResult.output.split("\n");
+  // Remove trailing empty line if present
+  if (lines.length > 0 && lines[lines.length - 1] === "") {
+    lines.pop();
+  }
+
+  return lines;
+}
+
+/**
+ * Calculate line range for expanding context upward
+ * @param oldStart - Starting line number of the hunk in the old file
+ * @param currentExpansion - Current number of lines expanded upward
+ * @returns Object with startLine and endLine for the expansion
+ */
+export function calculateUpwardExpansion(
+  oldStart: number,
+  currentExpansion: number
+): { startLine: number; endLine: number; numLines: number } {
+  const newExpansion = currentExpansion + LINES_PER_EXPANSION;
+  const startLine = Math.max(1, oldStart - newExpansion);
+  const endLine = oldStart - currentExpansion - 1;
+  const numLines = endLine - startLine + 1;
+
+  return { startLine, endLine, numLines };
+}
+
+/**
+ * Calculate line range for expanding context downward
+ * @param oldStart - Starting line number of the hunk in the old file
+ * @param oldLines - Number of lines in the hunk
+ * @param currentExpansion - Current number of lines expanded downward
+ * @returns Object with startLine and endLine for the expansion
+ */
+export function calculateDownwardExpansion(
+  oldStart: number,
+  oldLines: number,
+  currentExpansion: number
+): { startLine: number; endLine: number; numLines: number } {
+  const newExpansion = currentExpansion + LINES_PER_EXPANSION;
+  const hunkEnd = oldStart + oldLines - 1;
+  const startLine = hunkEnd + currentExpansion + 1;
+  const endLine = hunkEnd + newExpansion;
+  const numLines = endLine - startLine + 1;
+
+  return { startLine, endLine, numLines };
+}
+
+/**
+ * Format expanded lines as diff context lines (prefix with space)
+ */
+export function formatAsContextLines(lines: string[]): string {
+  return lines.map((line) => ` ${line}`).join("\n");
+}