fix: keep file navigation focused on the active hunk

Author: benvinegar

src/ui/App.tsx

@@ -1,6 +1,6 @@
 import { MouseButton, type KeyEvent, type MouseEvent as TuiMouseEvent, type ScrollBoxRenderable } from "@opentui/core";
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
-import { Suspense, lazy, startTransition, useDeferredValue, useEffect, useRef, useState } from "react";
+import { Suspense, lazy, startTransition, useDeferredValue, useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { AppBootstrap, LayoutMode } from "../core/types";
 import { MenuBar } from "./components/chrome/MenuBar";
 import { MENU_ORDER, buildMenuSpecs, menuWidth, nextMenuItemIndex, type MenuEntry, type MenuId } from "./components/chrome/menu";
@@ -133,18 +133,28 @@ export function App({ bootstrap, onQuit = () => process.exit(0) }: { bootstrap:
     setSelectedHunkIndex((current) => clamp(current, 0, maxIndex));
   }, [selectedFile]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!selectedFile) {
       return;
     }
 
-    filesScrollRef.current?.scrollChildIntoView(fileRowId(selectedFile.id));
-    if (selectedFile.metadata.hunks[selectedHunkIndex]) {
-      diffScrollRef.current?.scrollChildIntoView(diffHunkId(selectedFile.id, selectedHunkIndex));
-      return;
-    }
+    const scrollSelectionIntoView = () => {
+      filesScrollRef.current?.scrollChildIntoView(fileRowId(selectedFile.id));
+      if (selectedFile.metadata.hunks[selectedHunkIndex]) {
+        diffScrollRef.current?.scrollChildIntoView(diffHunkId(selectedFile.id, selectedHunkIndex));
+        return;
+      }
+
+      diffScrollRef.current?.scrollChildIntoView(diffSectionId(selectedFile.id));
+    };
 
-    diffScrollRef.current?.scrollChildIntoView(diffSectionId(selectedFile.id));
+    // Selection changes can race with section windowing, so retry briefly while the new target mounts.
+    scrollSelectionIntoView();
+    const retryDelays = [0, 16, 48];
+    const timeouts = retryDelays.map((delay) => setTimeout(scrollSelectionIntoView, delay));
+    return () => {
+      timeouts.forEach((timeout) => clearTimeout(timeout));
+    };
   }, [selectedFile, selectedHunkIndex]);
 
   useEffect(() => {

test/app-interactions.test.tsx

@@ -122,6 +122,35 @@ function createWrapBootstrap(): AppBootstrap {
   };
 }
 
+function createFileScrollBootstrap(): AppBootstrap {
+  const files = ["alpha", "beta", "gamma", "delta", "epsilon", "zeta"].map((name, index) =>
+    createDiffFile(
+      name,
+      `${name}.ts`,
+      `export const ${name}Marker = ${index + 1};\n`,
+      `export const ${name}Marker = ${index + 2};\nexport const ${name}Added = true;\n`,
+    ),
+  );
+
+  return {
+    input: {
+      kind: "git",
+      staged: false,
+      options: {
+        mode: "auto",
+      },
+    },
+    changeset: {
+      id: "changeset:app-file-scroll",
+      sourceLabel: "repo",
+      title: "repo working tree",
+      files,
+    },
+    initialMode: "auto",
+    initialTheme: "midnight",
+  };
+}
+
 
 async function flush(setup: Awaited<ReturnType<typeof testRender>>) {
   await act(async () => {
@@ -189,7 +218,7 @@ describe("App interactions", () => {
       frame = setup.captureCharFrame();
       expect(frame).toContain("this is a very");
       expect(frame).toContain("long wrapped line");
-      expect(frame).toContain("rendering coverage");
+      expect(frame).toContain("coverage");
     } finally {
       await act(async () => {
         setup.renderer.destroy();
@@ -268,6 +297,36 @@ describe("App interactions", () => {
     }
   });
 
+  test("arrow-key file navigation scrolls the review pane to the selected file hunk", async () => {
+    const setup = await testRender(<App bootstrap={createFileScrollBootstrap()} />, { width: 280, height: 12 });
+
+    try {
+      await flush(setup);
+
+      for (let index = 0; index < 4; index += 1) {
+        await act(async () => {
+          await setup.mockInput.pressArrow("down");
+        });
+        await flush(setup);
+      }
+
+      await act(async () => {
+        await Bun.sleep(80);
+        await setup.renderOnce();
+      });
+
+      const frame = setup.captureCharFrame();
+      expect(frame).toContain("M epsilon.ts");
+      expect(frame).toContain("epsilon.ts");
+      expect(frame).toContain("▌@@ -1,1 +1,2 @@");
+      expect(frame).not.toContain("alphaMarker");
+    } finally {
+      await act(async () => {
+        setup.renderer.destroy();
+      });
+    }
+  });
+
   test("filter focus accepts typed input and narrows the visible file set", async () => {
     const setup = await testRender(<App bootstrap={createBootstrap()} />, { width: 240, height: 24 });