@cueloop/client 0.1.0-alpha.65 → 0.1.0-alpha.67

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

@@ -1,15 +1,18 @@
-/** Keyboard scroll is smooth: cursor-follow never drifts past wrapped cards. */
+/** Keyboard scroll is smooth: the caret-follow reveal never scrolls the caret off screen, nor rebounds. */
 
 import { expect, test } from "bun:test";
-import React, { useState } from "react";
+import React from "react";
 import { testRender } from "@opentui/react/test-utils";
-import { useKeyboard } from "@opentui/react";
 import { ScrollBoxRenderable, type Renderable } from "@opentui/core";
 import type { Annotation } from "@cueloop/schema";
 import { DiffSheet } from "./DiffSheet";
-import { diffRows, type DiffRow } from "../view-diff";
+import { diffRows, marksByRows } from "../view-diff";
 import { DARK } from "../theme";
+import { annotationPaletteFor } from "../annotation-palette";
 import { press } from "../test-support";
+import { fixtureDiffSession } from "./story-fixtures";
+
+const noop = (): void => {};
 
 /** Find a renderable by id anywhere in the tree (getRenderable is not recursive). */
 function findById(node: Renderable, id: string): Renderable | undefined {
@@ -46,26 +49,9 @@ function tallPatch(count: number): string {
   ].join("\n");
 }
 
-/** DiffSheet with j-driven cursor, mirroring the App's down-navigation. */
-function ScrollHarness({
-  rows,
-  annotations,
-}: {
-  rows: DiffRow[];
-  annotations: Annotation[];
-}): React.ReactNode {
-  const [cursor, setCursor] = useState(0);
-
-  useKeyboard((key) => {
-    if (key.name === "j") setCursor((current) => Math.min(rows.length - 1, current + 1));
-  });
-
-  return <DiffSheet rows={rows} cursor={cursor} annotations={annotations} />;
-}
-
-test("scrolling down past wrapped annotation cards keeps the cursor pinned and the scroll monotonic", async () => {
-  // Arrange - a tall diff whose annotation bodies would wrap at this width; the
-  // wrapped card is exactly the layout the cursor-follow model used to mis-measure
+test("walking the caret down past wrapped discussion cards keeps it on screen and the scroll monotonic", async () => {
+  // Arrange - a tall diff whose comment bodies wrap at this width, so the cards
+  // between rows are taller than one line
   const rows = diffRows(tallPatch(40));
   const longBody =
     "this is a deliberately long annotation body that would wrap across the narrow test viewport";
@@ -73,39 +59,52 @@ test("scrolling down past wrapped annotation cards keeps the cursor pinned and t
     id: `a${rowIndex}`,
     kind: "comment",
     body: longBody,
-    anchor: { quote: rows[rowIndex]!.text, prefix: "", suffix: "" },
+    anchor: { quote: rows[rowIndex]!.text.replace(/\n$/, ""), prefix: "", suffix: "" },
     createdAt: "2026-01-01T00:00:00Z",
   }));
-  const setup = await testRender(<ScrollHarness rows={rows} annotations={annotations} />, {
-    width: 60,
-    height: 12,
-  });
+  const setup = await testRender(
+    <DiffSheet
+      rows={rows}
+      session={fixtureDiffSession({ annotations })}
+      marks={marksByRows(annotations, rows)}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 60, height: 12 },
+  );
 
   await setup.waitForVisualIdle();
   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 caretCell = annotationPaletteFor(DARK).caretCell;
 
-  // the cursor row is the one painted with the cursor background
-  const cursorScreenRow = (): number => {
+  // the caret row is the one painting the caret cell
+  const caretScreenRow = (): number => {
     const lines = setup.captureSpans().lines;
 
     for (let index = 0; index < lines.length; index++) {
-      if (lines[index]!.spans.some((span) => hex(span.bg) === DARK.cursorBackground)) return index;
+      if (lines[index]!.spans.some((span) => hex(span.bg) === caretCell)) return index;
     }
 
     return -1;
   };
 
-  // Act - walk the cursor down through the whole diff, sampling the scroll each step
+  // Act - walk the caret down through every code row, sampling the scroll each step
   const scrollTops: number[] = [];
   const screenRows: number[] = [];
+  const codeRowCount = rows.filter((row) => row.kind === "add").length;
 
-  for (let step = 0; step < rows.length; step++) {
+  for (let step = 0; step < codeRowCount; step++) {
+    await setup.waitForVisualIdle();
     scrollTops.push(scrollbox.scrollTop);
-    screenRows.push(cursorScreenRow());
-    await press(setup, "j");
+    screenRows.push(caretScreenRow());
+    await press(setup, "down");
   }
 
   // Assert - scrollTop only ever grows going down (never rebounds/jitters)
@@ -113,26 +112,10 @@ test("scrolling down past wrapped annotation cards keeps the cursor pinned and t
     expect(scrollTops[step]!).toBeGreaterThanOrEqual(scrollTops[step - 1]!);
   }
 
-  // Assert - the cursor never scrolls off screen (the pre-fix bug walked it off
-  // the viewport as it passed each wrapped card)
+  // Assert - the caret never scrolls off screen while it walks past each wrapped card
   expect(screenRows.every((row) => row >= 0)).toBe(true);
-
-  // Assert - through the steady scroll region (not the initial fill, not the
-  // final clamp at the content end) the cursor holds ONE stable row near the
-  // bottom; pre-fix it drifted down a row per wrapped card
-  const maxScroll = scrollbox.scrollHeight - scrollbox.height;
-  const steadyRows = screenRows.filter(
-    (_, step) => scrollTops[step]! > 0 && scrollTops[step]! < maxScroll,
-  );
-
-  expect(steadyRows.length).toBeGreaterThan(0);
-  expect(new Set(steadyRows).size).toBe(1);
-  const pinnedRow = steadyRows[0]!;
-  const viewportBottom = scrollbox.height;
-
-  // the cursor sits a couple of rows inside the bottom edge, per the follow rule
-  expect(viewportBottom - pinnedRow).toBeGreaterThanOrEqual(2);
-  expect(viewportBottom - pinnedRow).toBeLessThanOrEqual(3);
+  // and the walk did scroll: the tall diff does not fit the viewport
+  expect(scrollTops[scrollTops.length - 1]!).toBeGreaterThan(0);
 
   setup.renderer.destroy();
 }, 25000);

package/src/components/DiffSheet.split.test.tsx

@@ -0,0 +1,140 @@
+/**
+ * Visual regression for the side-by-side split: the divider must be one unbroken
+ * column with no holes on wrapped continuation lines, and the two columns must not
+ * merge into each other. Rendered in a virtual terminal and asserted on the char frame.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { DiffSheet } from "./DiffSheet";
+import { diffRows } from "../view-diff";
+import { allowEventLoopUpdates } from "../test-support";
+import { fixtureDiffSession } from "./story-fixtures";
+import { annotationPaletteFor } from "../annotation-palette";
+import { DARK } from "../theme";
+
+const noop = (): void => {};
+
+function hex(color: { toInts(): [number, number, number, number] }): string {
+  const [red, green, blue] = color.toInts();
+
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
+}
+
+// spaced words so each side word-wraps several visual lines, plus an unbalanced block (filler);
+// spaced (not one long token) so a whole word lands on a continuation line for the assertions
+const WRAPPING_PATCH = `diff --git a/app.ts b/app.ts
+--- a/app.ts
++++ b/app.ts
+@@ -1,4 +1,5 @@
+ const alpha = the quick brown fox jumps over the lazy dog and then keeps running past the far edge
+-const beta = old value that used to sit on this single line before the review had changed it wholly
++const beta = new value that now sits upon this single line after the review has changed it entirely
++const gamma = an added line with no deletion partner so the whole left column stays blank filler now
+ export { alpha, beta };
+`;
+
+async function splitFrameLines(width: number): Promise<string[]> {
+  const setup = await testRender(
+    <DiffSheet
+      rows={diffRows(WRAPPING_PATCH)}
+      session={fixtureDiffSession()}
+      marks={new Map()}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+      split
+    />,
+    { width, height: 18 },
+  );
+
+  allowEventLoopUpdates();
+  await setup.waitForVisualIdle();
+  const frame = setup.captureCharFrame();
+
+  setup.renderer.destroy();
+
+  return frame.split("\n");
+}
+
+describe("split diff rendering", () => {
+  test("the caret marks only the change side, not both columns", async () => {
+    // Arrange - the caret opens on a context row, which is shown in both columns
+    const setup = await testRender(
+      <DiffSheet
+        rows={diffRows(WRAPPING_PATCH)}
+        session={fixtureDiffSession()}
+        marks={new Map()}
+        quickActions={[]}
+        observer={false}
+        onAnnotate={noop}
+        onReply={noop}
+        onUpdateAnnotation={noop}
+        onExit={noop}
+        split
+      />,
+      { width: 100, height: 18 },
+    );
+
+    allowEventLoopUpdates();
+    await setup.waitForVisualIdle();
+    const caretCell = annotationPaletteFor(DARK).caretCell;
+    let cells = 0;
+
+    for (const line of setup.captureSpans().lines) {
+      for (const span of line.spans) {
+        if (span.bg && hex(span.bg) === caretCell) cells += span.text.length;
+      }
+    }
+
+    // Assert - one caret cell (the change side), not one per column
+    expect(cells).toBe(1);
+    setup.renderer.destroy();
+  });
+
+  test("the divider is one unbroken column across wrapped lines", async () => {
+    // Act
+    const lines = await splitFrameLines(80);
+    const dividerLines = lines.filter((line) => line.includes("│"));
+    const dividerColumns = new Set(dividerLines.map((line) => line.indexOf("│")));
+
+    // Assert - every divider sits in the same column (the columns never drift or merge)
+    expect(dividerColumns.size).toBe(1);
+    // and the code region is contiguous: no code row is missing its divider
+    const firstDivider = lines.findIndex((line) => line.includes("│"));
+    const lastDivider = lines.map((line) => line.includes("│")).lastIndexOf(true);
+
+    for (let index = firstDivider; index <= lastDivider; index++) {
+      expect(lines[index]).toContain("│");
+    }
+  });
+
+  test("wrapped continuation lines carry the divider, not just the first line", async () => {
+    // Act - the alpha line wraps, so a late word sits on a continuation line (no gutter number)
+    const lines = await splitFrameLines(80);
+    const continuation = lines.find(
+      (line) => line.includes("running") && !line.includes("const alpha"),
+    );
+
+    // Assert - the continuation still shows the divider
+    expect(continuation).toBeDefined();
+    expect(continuation).toContain("│");
+  });
+
+  test("an addition with no deletion partner keeps the divider over blank left filler", async () => {
+    // Act - the gamma line has no left partner, so its left column is blank filler
+    const lines = await splitFrameLines(80);
+    const fillerRow = lines.find((line) => line.includes("no deletion partner"));
+
+    // Assert - the row still has a divider, and the left of it is blank (no merged text)
+    expect(fillerRow).toBeDefined();
+    const dividerAt = fillerRow!.indexOf("│");
+
+    expect(dividerAt).toBeGreaterThan(0);
+    expect(fillerRow!.slice(0, dividerAt).trim()).toBe("");
+  });
+});

package/src/components/DiffSheet.stories.tsx

@@ -1,13 +1,49 @@
 import React from "react";
+import type { Annotation } from "@cueloop/schema";
 import { DARK } from "../theme";
+import { annotationPaletteFor } from "../annotation-palette";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import { marksByRows } from "../view-diff";
 import type { Story, StoryMeta } from "./story";
 import { DiffSheet } from "./DiffSheet";
-import { FIXTURE_PATCH, fixtureDiffRows } from "./story-fixtures";
+import { fixtureDiffRows, fixtureDiffSession } from "./story-fixtures";
 
-export const meta: StoryMeta = { title: "DiffSheet" };
+export const meta: StoryMeta = { title: "Surfaces/DiffSheet" };
+
+const palette = annotationPaletteFor(DARK);
+const noop = (): void => {};
+
+/** A comment on the added line, anchored the way the surface anchors a marked word. */
+const LINE_COMMENT: Annotation = {
+  id: "a_diff_1",
+  kind: "comment",
+  anchor: { quote: "new Map()", prefix: "  private items = ", suffix: ";" },
+  body: "Map needs an eviction story.",
+  createdAt: "2026-01-01T00:00:00Z",
+};
+
+function sheet(annotations: Annotation[], split = false): React.ReactNode {
+  const rows = fixtureDiffRows();
+  const session = fixtureDiffSession({ annotations });
+
+  return (
+    <DiffSheet
+      rows={rows}
+      session={session}
+      marks={marksByRows(annotations, rows)}
+      quickActions={DEFAULT_QUICK_ACTIONS}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+      split={split}
+    />
+  );
+}
 
 export const SignedRows: Story = {
-  render: () => <DiffSheet rows={fixtureDiffRows()} cursor={0} annotations={[]} />,
+  render: () => sheet([]),
   expectedColors: [DARK.insertedForeground, DARK.deletedForeground],
   size: { width: 90, height: 16 },
 };
@@ -15,64 +51,30 @@ export const SignedRows: Story = {
 // A modified line keeps the diff color on the changed words and dims the
 // unchanged prefix to the dim token, so the intra-line change stands out.
 export const IntralineWordDiff: Story = {
-  render: () => <DiffSheet rows={fixtureDiffRows()} cursor={0} annotations={[]} />,
+  render: () => sheet([]),
   expectedColors: [DARK.insertedForeground, DARK.deletedForeground, DARK.textDim],
   size: { width: 90, height: 16 },
 };
 
-export const CursorOnAddedLine: Story = {
-  render: () => <DiffSheet rows={fixtureDiffRows()} cursor={4} annotations={[]} />,
-  expectedColors: [DARK.cursorBackground],
+// The caret opens on the first code line: its cell wears the caret backdrop.
+export const CaretOnFirstLine: Story = {
+  render: () => sheet([]),
+  expectedColors: [palette.caretCell],
   size: { width: 90, height: 16 },
 };
 
-export const ComposingOnLine: Story = {
-  render: () => (
-    <DiffSheet
-      rows={fixtureDiffRows()}
-      cursor={4}
-      annotations={[]}
-      compose={{
-        kind: "comment",
-        rowIndex: 4,
-        quote: "  private items = new Map();",
-        draft: {
-          text: "Map needs an eviction story.",
-          onInput: () => {},
-          onSave: () => {},
-          onCancel: () => {},
-        },
-      }}
-    />
-  ),
-  expectedColors: [DARK.accent],
-  size: { width: 90, height: 16 },
+// A saved comment marks its words (backdrop + underline) and hangs its discussion
+// card under the line, exactly as the thread view does for prose.
+export const AnnotatedLine: Story = {
+  render: () => sheet([LINE_COMMENT]),
+  expectedColors: [palette.markBackdrop, palette.cardEdge],
+  size: { width: 90, height: 18 },
 };
 
-export const AnnotatedLine: Story = {
-  render: () => (
-    <DiffSheet
-      rows={fixtureDiffRows()}
-      cursor={0}
-      annotations={[
-        {
-          id: "a_story_diff",
-          kind: "comment",
-          anchor: {
-            // diff anchors quote the row text verbatim, trailing newline included
-            quote:
-              FIXTURE_PATCH.split("\n")
-                .find((line) => line.startsWith("+  "))!
-                .slice(1) + "\n",
-            prefix: "",
-            suffix: "",
-          },
-          body: "Map needs an eviction story.",
-          createdAt: "2026-01-01T00:00:00Z",
-        },
-      ]}
-    />
-  ),
-  expectedColors: [DARK.markCommentBackground],
-  size: { width: 90, height: 16 },
+// Side by side: old on the left, new on the right, divided by a thin rule; the
+// comment card spans the full width under its pair.
+export const SplitView: Story = {
+  render: () => sheet([LINE_COMMENT], true),
+  expectedColors: [DARK.insertedForeground, DARK.deletedForeground, palette.markBackdrop],
+  size: { width: 120, height: 18 },
 };

package/src/components/DiffSheet.syntax.test.tsx

@@ -3,6 +3,7 @@ import { testRender } from "@opentui/react/test-utils";
 import type { RGBA } from "@opentui/core";
 import React from "react";
 import { DiffSheet } from "./DiffSheet";
+import { fixtureDiffSession } from "./story-fixtures";
 import { diffRows } from "../view-diff";
 import { DARK } from "../theme";
 import { allowEventLoopUpdates } from "../test-support";
@@ -28,10 +29,21 @@ afterEach(() => allowEventLoopUpdates());
 
 test("renders tree-sitter colors, with the changed word in the diff color on top", async () => {
   // Arrange
-  const setup = await testRender(<DiffSheet rows={diffRows(PATCH)} cursor={0} annotations={[]} />, {
-    width: 60,
-    height: 12,
-  });
+  const noop = (): void => {};
+  const setup = await testRender(
+    <DiffSheet
+      rows={diffRows(PATCH)}
+      session={fixtureDiffSession()}
+      marks={new Map()}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 60, height: 12 },
+  );
 
   // Act
   // syntax highlighting resolves off the render path; pump until a keyword paints
@@ -40,10 +52,15 @@ test("renders tree-sitter colors, with the changed word in the diff color on top
   for (let attempt = 0; attempt < 60 && !keywordAccent; attempt++) {
     await setup.renderOnce();
     await new Promise((resolve) => setTimeout(resolve, 20));
+    // the caret cell splits the keyword's first character into its own span, so read the
+    // accent-colored text of a whole line rather than one span
     for (const line of setup.captureSpans().lines) {
-      for (const span of line.spans) {
-        if (span.text.includes("export") && hex(span.fg) === DARK.accent) keywordAccent = true;
-      }
+      const accentText = line.spans
+        .filter((span) => hex(span.fg) === DARK.accent)
+        .map((span) => span.text)
+        .join("");
+
+      if (accentText.includes("export")) keywordAccent = true;
     }
   }