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

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();
+});