@cueloop/client 0.1.0-alpha.66 → 0.1.0-alpha.68

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: "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;
     }
   }