@cueloop/client 0.1.0-alpha.92 → 0.1.0-alpha.93

package/src/app-screens.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo, type Dispatch, type SetStateAction } from
 import type { Thread, MessageOutcome } from "@cueloop/schema";
 import { returnPaneFor } from "@cueloop/schema";
 import type { Theme } from "./theme";
-import type { QuickAction } from "./config";
+import type { DiffViewMode, QuickAction } from "./config";
 import type { LaunchLayout } from "./launch-layout";
 import { useRememberLayout } from "./use-remember-layout";
 import type { Mode, TreeAsk } from "./intent-dispatch";
@@ -30,6 +30,7 @@ import { ProjectTreeView } from "./components/ProjectTreeView";
 import { ChangesFileTree } from "./components/ChangesColumn";
 import { BareWorkbenchFileView, draftThread } from "./components/BareWorkbenchFileView";
 import { GridTabContent, type DiffSurfaceProps } from "./components/GridTabContent";
+import type { DiffFoldControls } from "./components/DiffContentView";
 import { useChangesWorkbench } from "./use-changes-workbench";
 import { useRepoChanges } from "./use-repo-changes";
 import { ConfirmDialog } from "./components/ConfirmDialog";
@@ -112,9 +113,9 @@ function WelcomeProjectPanel({
   mode: ProjectPanelMode;
   controller: ReviewController;
   /** Changes tree click -> open the file's working-tree diff. */
-  onOpenChangedFile: (path: string) => void;
+  onOpenChangedFile: (path: string, persistent?: boolean) => void;
   /** Project tree click -> open the file's read-only contents. */
-  onOpenProjectFile: (path: string) => void;
+  onOpenProjectFile: (path: string, persistent?: boolean) => void;
   focused?: boolean;
   theme: Theme;
 }): React.ReactNode {
@@ -177,6 +178,7 @@ export function NoThreadShell(props: {
   onRename: (id: string, title: string) => void;
   /** Drives the "/" quick actions and skills in the welcome playground's composer. */
   quickActions: QuickAction[];
+  diffView: DiffViewMode;
   /** Reports the welcome composer's open state, so the shell suspends its inbox keys while typing. */
   onWelcomeComposingChange: (composing: boolean) => void;
   /** The pane composition this vanilla launch restores; changes here are remembered for the next one. */
@@ -201,6 +203,7 @@ export function NoThreadShell(props: {
     onPin,
     onRename,
     quickActions,
+    diffView,
     onWelcomeComposingChange,
     layout,
   } = props;
@@ -222,13 +225,14 @@ export function NoThreadShell(props: {
     workbench.zoomed,
   );
   // the Changes tree opens a file's working-tree diff; the Project tree opens read-only contents
-  const openChangedFile = (path: string): void => {
+  const openChangedFile = (path: string, persistent?: boolean): void => {
     // no thread means no live-diff refresh loop, so re-capture on open or a long-lived shell goes
     // stale; the catch keeps a fire-and-forget refresh from throwing when the shell tears down
     void controller.repoChanges().catch(() => undefined);
-    workbench.openFile(path, "diff");
+    workbench.openFile(path, "diff", persistent);
   };
-  const openProjectFile = (path: string): void => workbench.openFile(path, "contents");
+  const openProjectFile = (path: string, persistent?: boolean): void =>
+    workbench.openFile(path, "contents", persistent);
   // a bare launch has no thread yet, so the diff renders against a draft session; the first note
   // promotes it to the per-repo workbench thread (commentOnWorkbenchDiff)
   const draft = useMemo(() => draftThread(), []);
@@ -256,6 +260,15 @@ export function NoThreadShell(props: {
     onUpdateAnnotation: () => {},
     onExit: () => {},
   };
+  const diffFold: DiffFoldControls = {
+    isCollapsed: (file) => controller.isFileCollapsed(file),
+    isExpanded: (file) => controller.isFileExpanded(file),
+    canExpand: (file) => controller.canExpandFile(file),
+    onToggleCollapse: (file) =>
+      controller.setFileCollapsed(file, !controller.isFileCollapsed(file)),
+    onToggleExpand: (file) => controller.setFileExpanded(file, !controller.isFileExpanded(file)),
+    onCopyPath: (file) => controller.copyFilePath(file),
+  };
 
   return (
     <ThemeProvider theme={theme}>
@@ -313,6 +326,7 @@ export function NoThreadShell(props: {
               focusedGroupId={workbench.activeGroup}
               onFocusGroup={workbench.focusGroup}
               onActivateTab={workbench.activate}
+              onKeepTab={workbench.keepTab}
               onCloseTab={workbench.close}
               onSplit={workbench.split}
               onZoom={workbench.toggleZoom}
@@ -340,6 +354,9 @@ export function NoThreadShell(props: {
                     rows={controller.rows()}
                     surface={bareSurface}
                     rejectedRows={EMPTY_ROWS}
+                    fold={diffFold}
+                    fileStats={controller.fileStats()}
+                    split={diffView === "split" && workbench.zoomed}
                     dimmed={false}
                     readFile={(path) => controller.repoReadFile(path)}
                     onAddFileComment={(path, anchor, body) =>
@@ -396,7 +413,12 @@ export function NoThreadShell(props: {
             />
           ) : null}
           {props.toast ? (
-            <Toast title={props.toast.title} body={props.toast.body} theme={theme} />
+            <Toast
+              title={props.toast.title}
+              body={props.toast.body}
+              onDismiss={() => controller.dismissToast()}
+              theme={theme}
+            />
           ) : null}
         </AppShell>
       </MenuControlProvider>
@@ -460,6 +482,7 @@ export function TrailingOverlays(props: {
   theme: Theme;
   mode: Mode;
   toast: ToastState | null;
+  onDismissToast: () => void;
   setMode: Dispatch<SetStateAction<Mode>>;
   dispatch: (intent: Intent) => void;
 }): React.ReactNode {
@@ -473,6 +496,7 @@ export function TrailingOverlays(props: {
     theme,
     mode,
     toast,
+    onDismissToast,
     setMode,
     dispatch,
   } = props;
@@ -571,7 +595,9 @@ export function TrailingOverlays(props: {
           theme={theme}
         />
       ) : null}
-      {toast ? <Toast title={toast.title} body={toast.body} theme={theme} /> : null}
+      {toast ? (
+        <Toast title={toast.title} body={toast.body} onDismiss={onDismissToast} theme={theme} />
+      ) : null}
     </>
   );
 }

package/src/components/AppShell.zoom.test.tsx

@@ -11,7 +11,7 @@ import { testRender } from "@opentui/react/test-utils";
 import React from "react";
 import { AppShell } from "./AppShell";
 import { EditorGrid } from "./EditorGrid";
-import { changesTab, makeGroup } from "./editor-grid";
+import { changesTab, makeGroup, splitGroup } from "./editor-grid";
 import { NERD } from "./primitives/icons";
 import { allowEventLoopUpdates } from "../test-support";
 
@@ -21,7 +21,11 @@ async function zoomIconColumn(
   width: number,
   zoomed: boolean,
   sidebarOpen: boolean,
+  splitEditor = false,
 ): Promise<number> {
+  const editor = splitEditor
+    ? splitGroup(grid, grid.id, "right")
+    : { tree: grid, focusGroupId: grid.id };
   const setup = await testRender(
     <AppShell
       sidebarOpen={sidebarOpen}
@@ -40,8 +44,8 @@ async function zoomIconColumn(
       projectPanel={<text>project</text>}
       changesPanel={
         <EditorGrid
-          tree={grid}
-          focusedGroupId={grid.id}
+          tree={editor.tree}
+          focusedGroupId={editor.focusGroupId}
           onFocusGroup={() => {}}
           onActivateTab={() => {}}
           onCloseTab={() => {}}
@@ -132,4 +136,13 @@ describe("zoom icon in the shell", () => {
     // before it, the same inset the right-sidebar icon keeps from its own edge
     for (const column of setupColumns) expect(128 - column).toBe(2);
   });
+
+  test("a split editor keeps the zoom icon clear of the Project border", async () => {
+    const columns = await Promise.all([
+      zoomIconColumn(160, false, false, true),
+      zoomIconColumn(160, true, false, true),
+    ]);
+
+    for (const column of columns) expect(128 - column).toBe(2);
+  });
 });

package/src/components/ChangesColumn.tsx

@@ -86,7 +86,7 @@ export interface ChangesColumnProps {
   files?: readonly DiffFileContents[];
   /** The path whose diff the sheet is scrolled to, highlighted in the tree. */
   selectedPath?: string;
-  onSelectFile: (path: string) => void;
+  onSelectFile: (path: string, persistent?: boolean) => void;
   /** Comments per file path, shown as a dot-and-count badge on each entry. */
   commentCounts?: ReadonlyMap<string, number>;
   focused?: boolean;
@@ -141,18 +141,23 @@ export function ChangesFileTree({
     if (key.name === "k" || key.name === "up") return setCursor(Math.max(cursorIndex - 1, 0));
     const row = rows[cursorIndex];
     if (!row) return;
-    if (key.name === "tab" || key.name === "return" || key.name === "enter")
-      return row.isFolder ? toggle(row.id) : onSelectFile(row.id);
+    if (key.name === "return" || key.name === "enter")
+      return row.isFolder ? toggle(row.id) : onSelectFile(row.id, true);
     if (key.name === "l" && row.isFolder && collapsedIds.has(row.id)) return toggle(row.id);
     if (key.name === "h" && row.isFolder && !collapsedIds.has(row.id)) return toggle(row.id);
   });
 
   return (
-    <ScrollArea>
+    <ScrollArea
+      id="tree-scroll"
+      revealId={focused ? rows[cursorIndex]?.id : undefined}
+      gestureWheel
+    >
       <Tree
         nodes={nodes}
         expandedIds={expandedIds}
         selectedId={focused ? rows[cursorIndex]?.id : selectedPath}
+        singleLine
         flattenEmptyDirectories
         showStatus
         onSelect={(id) => {
@@ -161,6 +166,7 @@ export function ChangesFileTree({
           if (index >= 0) setCursor(index);
           onSelectFile(id);
         }}
+        onDoubleSelect={(id) => onSelectFile(id, true)}
         onToggle={toggle}
         theme={theme}
       />

package/src/components/ChangesFileTree.test.tsx

@@ -1,14 +1,26 @@
-/** The changed-files tree navigates by keyboard when focused: j/k move the cursor, tab folds a folder
+/** The changed-files tree navigates by keyboard when focused: j/k move the cursor, Enter folds a folder
  * or opens a file. */
 
 import { test, expect } from "bun:test";
 import React from "react";
 import { testRender } from "@opentui/react/test-utils";
+import { ScrollBoxRenderable, TextRenderable, type Renderable } from "@opentui/core";
 import type { DiffFileContents } from "@cueloop/schema";
 import { ChangesFileTree } from "./ChangesColumn";
 import { settle, waitForText } from "../test-support";
 import { DARK } from "../theme";
 
+function findById(node: Renderable, id: string): Renderable | undefined {
+  if (node.id === id) return node;
+  for (const child of node.getChildren()) {
+    const found = findById(child, id);
+
+    if (found) return found;
+  }
+
+  return undefined;
+}
+
 const file = (path: string): DiffFileContents => ({
   path,
   oldContents: "",
@@ -18,7 +30,7 @@ const file = (path: string): DiffFileContents => ({
 
 const files = [file("src/a.ts"), file("src/b.ts")];
 
-test("j moves onto a file and tab opens it", async () => {
+test("j moves onto a file and Enter opens it", async () => {
   const opened: string[] = [];
   const setup = await testRender(
     <ChangesFileTree
@@ -35,7 +47,7 @@ test("j moves onto a file and tab opens it", async () => {
   // folders open by default; cursor starts on the "src" folder, j steps onto a.ts
   setup.mockInput.pressKey("j");
   await settle(setup);
-  setup.mockInput.pressKey("TAB");
+  setup.mockInput.pressKey("RETURN");
   await settle(setup);
 
   expect(opened).toEqual(["src/a.ts"]);
@@ -43,6 +55,62 @@ test("j moves onto a file and tab opens it", async () => {
   setup.renderer.destroy();
 });
 
+test("Tab leaves the focused tree without opening a file", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ChangesFileTree
+      files={files}
+      onSelectFile={(path) => opened.push(path)}
+      focused
+      theme={DARK}
+    />,
+    { width: 40, height: 12 },
+  );
+
+  await waitForText(setup, "a.ts");
+  setup.mockInput.pressKey("j");
+  setup.mockInput.pressKey("TAB");
+  await settle(setup);
+  expect(opened).toEqual([]);
+  setup.renderer.destroy();
+});
+
+test("keyboard navigation reveals the selected changed file", async () => {
+  const manyFiles = Array.from({ length: 35 }, (_, index) =>
+    file(`file-${String(index).padStart(2, "0")}.ts`),
+  );
+  const setup = await testRender(
+    <ChangesFileTree files={manyFiles} onSelectFile={() => {}} focused theme={DARK} />,
+    { width: 28, height: 8 },
+  );
+
+  await waitForText(setup, "file-00.ts");
+  const scrollbox = findById(setup.renderer.root, "tree-scroll");
+
+  if (!(scrollbox instanceof ScrollBoxRenderable)) throw new Error("tree scrollbox missing");
+  const scrollSteps: number[] = [];
+
+  for (const [index, key] of Array.from({ length: 15 }, () => "j").entries()) {
+    const before = scrollbox.scrollTop;
+
+    setup.mockInput.pressKey(key);
+    // eslint-disable-next-line no-await-in-loop
+    await settle(setup);
+    scrollSteps.push(scrollbox.scrollTop - before);
+    const row = scrollbox.content.findDescendantById(
+      `tree-row-file-${String(index + 1).padStart(2, "0")}.ts`,
+    );
+
+    expect(row?.y).toBeGreaterThanOrEqual(scrollbox.viewport.y);
+    expect(row?.y).toBeLessThan(scrollbox.viewport.y + scrollbox.viewport.height);
+  }
+
+  expect(scrollbox.scrollTop).toBeGreaterThan(0);
+  expect(Math.max(...scrollSteps)).toBe(1);
+  expect(setup.captureCharFrame()).toContain("file-15.ts");
+  setup.renderer.destroy();
+});
+
 test("without focus the keyboard opens nothing", async () => {
   const opened: string[] = [];
   const setup = await testRender(
@@ -53,9 +121,59 @@ test("without focus the keyboard opens nothing", async () => {
   await waitForText(setup, "a.ts");
 
   setup.mockInput.pressKey("j");
-  setup.mockInput.pressKey("TAB");
+  setup.mockInput.pressKey("RETURN");
   await settle(setup);
   expect(opened).toEqual([]);
 
   setup.renderer.destroy();
 });
+
+test("a selected long filename has no empty continuation row", async () => {
+  for (const width of [33, 32, 31, 30, 29, 28, 27, 26, 25, 24]) {
+    const setup = await testRender(
+      <ChangesFileTree
+        files={[
+          file("packages/client/src/App.workbench.test.tsx"),
+          file("packages/client/src/next.ts"),
+        ]}
+        onSelectFile={() => {}}
+        focused
+        theme={DARK}
+      />,
+      { width, height: 12 },
+    );
+
+    await settle(setup);
+    setup.mockInput.pressKey("j");
+    await settle(setup);
+    const frame = setup.captureCharFrame().split("\n");
+    const selectedLine = frame.findIndex((line) => line.includes("App.wor"));
+    const row = findById(
+      setup.renderer.root,
+      "tree-row-packages/client/src/App.workbench.test.tsx",
+    );
+
+    expect(selectedLine).toBeGreaterThanOrEqual(0);
+    expect(frame[selectedLine + 1]).toContain("next.ts");
+    expect(row?.height).toBe(1);
+    setup.renderer.destroy();
+  }
+});
+
+test("horizontal name scrolling reveals the final extension beside the status", async () => {
+  const path = "src/sidebar-scroll.test.tsx";
+  const setup = await testRender(
+    <ChangesFileTree files={[file(path)]} onSelectFile={() => {}} focused theme={DARK} />,
+    { width: 24, height: 8 },
+  );
+
+  await waitForText(setup, "src");
+  const label = findById(setup.renderer.root, `tree-label-${path}`);
+
+  if (!(label instanceof TextRenderable)) throw new Error("file label missing");
+  expect(label.maxScrollX).toBeGreaterThan(0);
+  label.scrollX = label.maxScrollX;
+  await settle(setup);
+  expect(setup.captureCharFrame()).toContain(".tsx");
+  setup.renderer.destroy();
+});

package/src/components/DiffContentView.scroll.test.tsx

@@ -107,9 +107,24 @@ test("walking the caret down past wrapped discussion cards keeps it on screen an
     await press(setup, "down");
   }
 
-  // Assert - scrollTop only ever grows going down (never rebounds/jitters)
+  // A key advances the viewport by at most one visual line, even across a tall card.
   for (let step = 1; step < scrollTops.length; step++) {
     expect(scrollTops[step]!).toBeGreaterThanOrEqual(scrollTops[step - 1]!);
+    expect(scrollTops[step]! - scrollTops[step - 1]!).toBeLessThanOrEqual(1);
+  }
+
+  // Walk back through the same cards: upward reveal must also stay one row at a time.
+  const upwardTops: number[] = [];
+
+  for (let step = 0; step < codeRowCount + 20; step++) {
+    upwardTops.push(scrollbox.scrollTop);
+    screenRows.push(caretScreenRow());
+    await press(setup, "up");
+  }
+
+  for (let step = 1; step < upwardTops.length; step++) {
+    expect(upwardTops[step]!).toBeLessThanOrEqual(upwardTops[step - 1]!);
+    expect(upwardTops[step - 1]! - upwardTops[step]!).toBeLessThanOrEqual(1);
   }
 
   // Assert - the caret never scrolls off screen while it walks past each wrapped card
@@ -120,6 +135,220 @@ test("walking the caret down past wrapped discussion cards keeps it on screen an
   setup.renderer.destroy();
 }, 25000);
 
+test("wheel input accelerates a continuous gesture and settles back to precise steps", async () => {
+  const rows = diffRows(tallPatch(80));
+  const setup = await testRender(
+    <DiffContentView
+      rows={rows}
+      session={fixtureDiffSession()}
+      marks={marksByRows([], rows)}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 60, height: 12 },
+  );
+
+  await settle(setup);
+  const found = findById(setup.renderer.root, "diff-scroll");
+
+  if (!(found instanceof ScrollBoxRenderable)) throw new Error("diff-scroll is not a scrollbox");
+  const scrollbox = found;
+  const acceleration = scrollbox.scrollAcceleration;
+  const first = acceleration.tick(1000);
+  const burst = Array.from({ length: 10 }, (_, index) => acceleration.tick(1016 + index * 16));
+  const tail = acceleration.tick(1400);
+
+  expect(scrollbox.verticalScrollBar.scrollStep).toBe(1);
+  expect(first).toBe(1);
+  expect(Math.max(...burst)).toBeGreaterThan(first);
+  expect(tail).toBe(1);
+
+  acceleration.reset();
+  await setup.mockMouse.scroll(20, 5, "down");
+  await settle(setup);
+  expect(scrollbox.scrollTop).toBeGreaterThan(0);
+
+  setup.renderer.destroy();
+});
+
+test("wheel scrolling up keeps the caret on the bottom visible code row", async () => {
+  const rows = diffRows(tallPatch(80));
+  const setup = await testRender(
+    <DiffContentView
+      rows={rows}
+      session={fixtureDiffSession()}
+      marks={marksByRows([], rows)}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 60, height: 12 },
+  );
+
+  await settle(setup);
+  const found = findById(setup.renderer.root, "diff-scroll");
+
+  if (!(found instanceof ScrollBoxRenderable)) throw new Error("diff-scroll is not a scrollbox");
+  const scrollbox = found;
+
+  for (const key of Array.from({ length: 30 }, () => "down" as const)) {
+    // eslint-disable-next-line no-await-in-loop
+    await press(setup, key);
+  }
+  const before = scrollbox.scrollTop;
+  const markerRows = (): number[] =>
+    setup
+      .captureCharFrame()
+      .split("\n")
+      .flatMap((line, row) => (line.includes("▎") ? [row] : []));
+  const top = scrollbox.viewport.screenY;
+  const bottom = top + scrollbox.viewport.height - 1;
+
+  for (const direction of Array.from({ length: 8 }, () => "up" as const)) {
+    // eslint-disable-next-line no-await-in-loop
+    await setup.mockMouse.scroll(20, 5, direction);
+    // eslint-disable-next-line no-await-in-loop
+    await settle(setup);
+    expect(markerRows()).toEqual([bottom]);
+  }
+  expect(scrollbox.scrollTop).toBeLessThan(before);
+  for (const direction of Array.from({ length: 20 }, () => "down" as const)) {
+    // eslint-disable-next-line no-await-in-loop
+    await setup.mockMouse.scroll(20, 5, direction);
+    // eslint-disable-next-line no-await-in-loop
+    await settle(setup);
+    expect(markerRows()).toHaveLength(1);
+  }
+  expect(markerRows()).toEqual([top]);
+  setup.renderer.destroy();
+});
+
+test("rapid wheel scrolling through a large wrapped diff does not loop React updates", async () => {
+  const filePatches = Array.from({ length: 80 }, (_, fileIndex) => [
+    `diff --git a/file-${fileIndex}.ts b/file-${fileIndex}.ts`,
+    `--- a/file-${fileIndex}.ts`,
+    `+++ b/file-${fileIndex}.ts`,
+    "@@ -0,0 +1,12 @@",
+    ...Array.from(
+      { length: 12 },
+      (_, lineIndex) => `+line ${lineIndex} ${"dense source text ".repeat(80)}`,
+    ),
+  ]).flat();
+  const rows = diffRows([...filePatches, ""].join("\n"));
+  const StatefulDiff = (): React.ReactNode => {
+    const [, setCursor] = React.useState(0);
+
+    return (
+      <DiffContentView
+        rows={rows}
+        session={fixtureDiffSession()}
+        marks={marksByRows([], rows)}
+        quickActions={[]}
+        observer={false}
+        onCursorChange={setCursor}
+        onAnnotate={noop}
+        onReply={noop}
+        onUpdateAnnotation={noop}
+        onExit={noop}
+      />
+    );
+  };
+  const setup = await testRender(<StatefulDiff />, { width: 60, height: 12 });
+
+  await settle(setup);
+  const found = findById(setup.renderer.root, "diff-scroll");
+
+  if (!(found instanceof ScrollBoxRenderable)) throw new Error("diff-scroll is not a scrollbox");
+
+  for (const [index, direction] of Array.from({ length: 240 }, () => "down" as const).entries()) {
+    // eslint-disable-next-line no-await-in-loop
+    await setup.mockMouse.scroll(20, 5, direction);
+    if (index % 12 === 0) {
+      // eslint-disable-next-line no-await-in-loop
+      await settle(setup);
+    }
+  }
+  await settle(setup);
+  expect(found.scrollTop).toBeGreaterThan(0);
+  setup.renderer.destroy();
+}, 60000);
+
+test("walking long wrapped code lines advances the viewport one visual row per key", async () => {
+  const lines = Array.from(
+    { length: 36 },
+    (_, index) =>
+      `+line ${String(index).padStart(2, "0")} ${"a paragraph with several wrapped phrases ".repeat(5)}`,
+  );
+  const rows = diffRows(
+    [
+      "diff --git a/long.md b/long.md",
+      "--- a/long.md",
+      "+++ b/long.md",
+      "@@ -0,0 +1,36 @@",
+      ...lines,
+      "",
+    ].join("\n"),
+  );
+  const setup = await testRender(
+    <DiffContentView
+      rows={rows}
+      session={fixtureDiffSession()}
+      marks={marksByRows([], rows)}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 60, height: 12 },
+  );
+
+  await settle(setup);
+  const found = findById(setup.renderer.root, "diff-scroll");
+
+  if (!(found instanceof ScrollBoxRenderable)) throw new Error("diff-scroll is not a scrollbox");
+  const scrollbox = found;
+  const steps: number[] = [];
+  const caretCell = annotationPaletteFor(DARK).caretCell;
+
+  for (let index = 0; index < 45; index++) {
+    const before = scrollbox.scrollTop;
+
+    await press(setup, "down");
+    steps.push(scrollbox.scrollTop - before);
+    const caretRow = setup
+      .captureSpans()
+      .lines.findIndex((line) => line.spans.some((span) => hex(span.bg) === caretCell));
+    const markerRows = setup
+      .captureCharFrame()
+      .split("\n")
+      .flatMap((line, row) => (line.includes("▎") ? [row] : []));
+
+    expect(caretRow).toBeGreaterThanOrEqual(0);
+    expect(markerRows).toEqual([caretRow]);
+  }
+
+  expect(Math.max(...steps)).toBeLessThanOrEqual(1);
+  expect(steps.some((step) => step > 0)).toBe(true);
+  await setup.mockMouse.scroll(20, 5, "up");
+  await settle(setup);
+  const wrappedMarkerRows = setup
+    .captureCharFrame()
+    .split("\n")
+    .flatMap((line, row) => (line.includes("▎") ? [row] : []));
+
+  expect(wrappedMarkerRows).toEqual([scrollbox.viewport.screenY + scrollbox.viewport.height - 1]);
+  setup.renderer.destroy();
+});
+
 test("opening a comment on the diff's last line reveals its composer", async () => {
   const rows = diffRows(tallPatch(24));
   const setup = await testRender(
@@ -147,3 +376,58 @@ test("opening a comment on the diff's last line reveals its composer", async ()
   expect(setup.captureCharFrame()).toContain("● bottom comment");
   setup.renderer.destroy();
 }, 25000);
+
+test("Up keeps the caret on the first screen row while wrapped lines scroll", async () => {
+  const lines = Array.from({ length: 24 }, (_, index) =>
+    index % 3 === 2 ? "-" : `-line ${index} ${"wrapped words here ".repeat(5)}`,
+  );
+  const rows = diffRows(
+    [
+      "diff --git a/long.md b/long.md",
+      "--- a/long.md",
+      "+++ /dev/null",
+      "@@ -1,24 +0,0 @@",
+      ...lines,
+      "",
+    ].join("\n"),
+  );
+  const setup = await testRender(
+    <DiffContentView
+      rows={rows}
+      session={fixtureDiffSession()}
+      marks={marksByRows([], rows)}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 60, height: 12 },
+  );
+  await settle(setup);
+  const found = findById(setup.renderer.root, "diff-scroll");
+
+  if (!(found instanceof ScrollBoxRenderable)) throw new Error("diff-scroll is not a scrollbox");
+  const scrollbox = found;
+
+  for (let index = 0; index < 40; index++) await press(setup, "down");
+  let previousTop = scrollbox.scrollTop;
+  let scrolled = false;
+
+  for (let index = 0; index < 80; index++) {
+    await press(setup, "up");
+    const frame = setup.captureCharFrame().split("\n");
+    const marker = frame.findIndex((line) => line.includes("▎"));
+    const top = scrollbox.scrollTop;
+
+    expect(previousTop - top).toBeLessThanOrEqual(1);
+    if (top < previousTop) {
+      expect(marker).toBe(0);
+      scrolled = true;
+    }
+    previousTop = top;
+  }
+  expect(scrolled).toBe(true);
+  setup.renderer.destroy();
+});