fix: keep active hunks clear of the viewport edge

Author: benvinegar

src/ui/components/panes/DiffPane.tsx

@@ -2,7 +2,7 @@ import type { ScrollBoxRenderable } from "@opentui/core";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useState, type RefObject } from "react";
 import type { AgentAnnotation, DiffFile, LayoutMode } from "../../../core/types";
 import type { VisibleAgentNote } from "../../lib/agentAnnotations";
-import { estimateDiffBodyRows } from "../../lib/sectionHeights";
+import { estimateDiffBodyRows, estimateHunkAnchorRow } from "../../lib/sectionHeights";
 import { diffHunkId, diffSectionId } from "../../lib/ids";
 import type { AppTheme } from "../../themes";
 import { DiffSection } from "./DiffSection";
@@ -185,18 +185,50 @@ export function DiffPane({
     return next;
   }, [adjacentPrefetchFileIds, selectedFileId, visibleViewportFileIds, windowingEnabled]);
 
-  const selectedFile = selectedFileId ? files.find((file) => file.id === selectedFileId) : undefined;
+  const selectedFileIndex = selectedFileId ? files.findIndex((file) => file.id === selectedFileId) : -1;
+  const selectedFile = selectedFileIndex >= 0 ? files[selectedFileIndex] : undefined;
   const selectedAnchorId = selectedFile
     ? (selectedFile.metadata.hunks[selectedHunkIndex] ? diffHunkId(selectedFile.id, selectedHunkIndex) : diffSectionId(selectedFile.id))
     : null;
+  const selectedEstimatedScrollTop = useMemo(() => {
+    if (!selectedFile || selectedFileIndex < 0) {
+      return null;
+    }
+
+    let top = 0;
+    for (let index = 0; index < selectedFileIndex; index += 1) {
+      top += (index > 0 ? 1 : 0) + 1 + (estimatedBodyHeights[index] ?? 0);
+    }
+
+    if (selectedFileIndex > 0) {
+      top += 1;
+    }
+
+    top += 1;
+    top += estimateHunkAnchorRow(selectedFile, layout, showHunkHeaders, selectedHunkIndex);
+    return top;
+  }, [estimatedBodyHeights, files, layout, selectedFile, selectedFileIndex, selectedHunkIndex, showHunkHeaders]);
 
   useLayoutEffect(() => {
     if (!selectedAnchorId) {
       return;
     }
 
     const scrollSelectionIntoView = () => {
-      scrollRef.current?.scrollChildIntoView(selectedAnchorId);
+      const scrollBox = scrollRef.current;
+      if (!scrollBox) {
+        return;
+      }
+
+      // In the common no-wrap/no-note path we can estimate the selected hunk row and keep it
+      // comfortably below the top edge instead of merely making it barely visible.
+      if (!wrapLines && visibleAgentNotesByFile.size === 0 && selectedEstimatedScrollTop !== null) {
+        const topPaddingRows = Math.max(2, Math.floor(scrollViewport.height * 0.25));
+        scrollBox.scrollTo(Math.max(0, selectedEstimatedScrollTop - topPaddingRows));
+        return;
+      }
+
+      scrollBox.scrollChildIntoView(selectedAnchorId);
     };
 
     // Run after this pane renders the selected section/hunk, then retry briefly while layout settles.
@@ -206,7 +238,7 @@ export function DiffPane({
     return () => {
       timeouts.forEach((timeout) => clearTimeout(timeout));
     };
-  }, [selectedAnchorId, scrollRef]);
+  }, [scrollRef, scrollViewport.height, selectedAnchorId, selectedEstimatedScrollTop, visibleAgentNotesByFile.size, wrapLines]);
 
   return (
     <box

src/ui/lib/sectionHeights.ts

@@ -18,6 +18,40 @@ function trailingCollapsedLines(metadata: FileDiffMetadata) {
   return Math.max(additionRemaining, 0);
 }
 
+/** Count render rows for one hunk when wrapping and note cards are off. */
+function estimateHunkRows(
+  file: DiffFile,
+  layout: Exclude<LayoutMode, "auto">,
+  showHunkHeaders: boolean,
+  hunkIndex: number,
+) {
+  const hunk = file.metadata.hunks[hunkIndex];
+  if (!hunk) {
+    return 0;
+  }
+
+  let rows = 0;
+
+  if (hunk.collapsedBefore > 0) {
+    rows += 1;
+  }
+
+  if (showHunkHeaders) {
+    rows += 1;
+  }
+
+  for (const content of hunk.hunkContent) {
+    if (content.type === "context") {
+      rows += content.lines;
+      continue;
+    }
+
+    rows += layout === "split" ? Math.max(content.deletions, content.additions) : content.deletions + content.additions;
+  }
+
+  return rows;
+}
+
 /** Estimate the number of diff-body rows for one file when wrapping and note cards are off. */
 export function estimateDiffBodyRows(
   file: DiffFile,
@@ -30,26 +64,37 @@ export function estimateDiffBodyRows(
 
   let rows = 0;
 
-  for (const hunk of file.metadata.hunks) {
-    if (hunk.collapsedBefore > 0) {
-      rows += 1;
-    }
+  for (const [hunkIndex] of file.metadata.hunks.entries()) {
+    rows += estimateHunkRows(file, layout, showHunkHeaders, hunkIndex);
+  }
 
-    if (showHunkHeaders) {
-      rows += 1;
-    }
+  if (trailingCollapsedLines(file.metadata) > 0) {
+    rows += 1;
+  }
 
-    for (const content of hunk.hunkContent) {
-      if (content.type === "context") {
-        rows += content.lines;
-        continue;
-      }
+  return rows;
+}
 
-      rows += layout === "split" ? Math.max(content.deletions, content.additions) : content.deletions + content.additions;
-    }
+/** Estimate the body-row offset for the anchor that should represent the selected hunk. */
+export function estimateHunkAnchorRow(
+  file: DiffFile,
+  layout: Exclude<LayoutMode, "auto">,
+  showHunkHeaders: boolean,
+  hunkIndex: number,
+) {
+  if (file.metadata.hunks.length === 0) {
+    return 0;
   }
 
-  if (trailingCollapsedLines(file.metadata) > 0) {
+  const clampedHunkIndex = Math.max(0, Math.min(hunkIndex, file.metadata.hunks.length - 1));
+  let rows = 0;
+
+  for (let index = 0; index < clampedHunkIndex; index += 1) {
+    rows += estimateHunkRows(file, layout, showHunkHeaders, index);
+  }
+
+  const selectedHunk = file.metadata.hunks[clampedHunkIndex]!;
+  if (selectedHunk.collapsedBefore > 0) {
     rows += 1;
   }
 

test/app-interactions.test.tsx

@@ -160,6 +160,10 @@ async function flush(setup: Awaited<ReturnType<typeof testRender>>) {
   });
 }
 
+function lineIndexOf(frame: string, needle: string) {
+  return frame.split("\n").findIndex((line) => line.includes(needle));
+}
+
 
 describe("App interactions", () => {
   test("keyboard shortcuts toggle notes, line numbers, and hunk metadata", async () => {
@@ -320,6 +324,10 @@ describe("App interactions", () => {
       expect(frame).toContain("epsilon.ts");
       expect(frame).toContain("▌@@ -1,1 +1,2 @@");
       expect(frame).not.toContain("alphaMarker");
+
+      const selectedHunkLine = lineIndexOf(frame, "▌@@ -1,1 +1,2 @@");
+      expect(selectedHunkLine).toBeGreaterThanOrEqual(0);
+      expect(selectedHunkLine).toBeLessThanOrEqual(8);
     } finally {
       await act(async () => {
         setup.renderer.destroy();