@cueloop/client 0.1.0-alpha.8 → 0.1.0-alpha.80

package/src/components/ConfirmDialog.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ConfirmDialog } from "./ConfirmDialog";
+
+export const meta: StoryMeta = { title: "Overlays/ConfirmDialog" };
+
+const callbacks = { onConfirm: () => {}, onCancel: () => {} };
+
+export const DeleteThread: Story = {
+  render: () => (
+    <ConfirmDialog
+      isOpen
+      title=" delete thread "
+      message={'Delete "Auth rollout"? This removes the thread.'}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 64, height: 16 },
+};

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,72 @@
+/**
+ * A centered yes/no confirmation on the shared Dialog overlay. Presentational:
+ * the key grammar (⏎ confirm, esc cancel) is driven by the reducer; the buttons
+ * carry the same intents for the mouse. Used for destructive actions like the
+ * inbox delete.
+ */
+
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+import { DialogActions } from "./primitives/DialogActions";
+
+export interface ConfirmDialogProps {
+  isOpen: boolean;
+  title?: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  theme?: Theme;
+}
+
+export function ConfirmDialog({
+  isOpen,
+  title,
+  message,
+  confirmLabel = "delete",
+  cancelLabel = "cancel",
+  onConfirm,
+  onCancel,
+  theme,
+}: ConfirmDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      isOpen
+      title={title}
+      width={Math.min(54, terminalWidth - 6)}
+      height={7}
+      background={tokens.elevated}
+      onDismiss={onCancel}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <text fg={tokens.text}>{message}</text>
+        <box style={{ flexGrow: 1 }} />
+        <DialogActions
+          confirmLabel={confirmLabel}
+          cancelLabel={cancelLabel}
+          onConfirm={onConfirm}
+          onCancel={onCancel}
+          theme={theme}
+        />
+      </box>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,121 @@
+/** Keyboard scroll is smooth: the caret-follow reveal never scrolls the caret off screen, nor rebounds. */
+
+import { expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { ScrollBoxRenderable, type Renderable } from "@opentui/core";
+import type { Annotation } from "@cueloop/schema";
+import { DiffContentView } from "./DiffContentView";
+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 {
+  if (node.id === id) return node;
+  for (const child of node.getChildren()) {
+    const found = findById(child, id);
+
+    if (found) return found;
+  }
+
+  return undefined;
+}
+
+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("");
+}
+
+/** A single-hunk patch of `count` added lines, taller than any test viewport. */
+function tallPatch(count: number): string {
+  const adds = Array.from(
+    { length: count },
+    (_, index) => `+line ${String(index).padStart(2, "0")}`,
+  );
+
+  return [
+    "diff --git a/f.ts b/f.ts",
+    "--- a/f.ts",
+    "+++ b/f.ts",
+    `@@ -0,0 +1,${count} @@`,
+    ...adds,
+    "",
+  ].join("\n");
+}
+
+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";
+  const annotations: Annotation[] = [8, 16, 24].map((rowIndex) => ({
+    id: `a${rowIndex}`,
+    kind: "comment",
+    body: longBody,
+    anchor: { quote: rows[rowIndex]!.text.replace(/\n$/, ""), prefix: "", suffix: "" },
+    createdAt: "2026-01-01T00:00:00Z",
+  }));
+  const setup = await testRender(
+    <DiffContentView
+      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 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) === caretCell)) return index;
+    }
+
+    return -1;
+  };
+
+  // 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 < codeRowCount; step++) {
+    await setup.waitForVisualIdle();
+    scrollTops.push(scrollbox.scrollTop);
+    screenRows.push(caretScreenRow());
+    await press(setup, "down");
+  }
+
+  // Assert - scrollTop only ever grows going down (never rebounds/jitters)
+  for (let step = 1; step < scrollTops.length; step++) {
+    expect(scrollTops[step]!).toBeGreaterThanOrEqual(scrollTops[step - 1]!);
+  }
+
+  // Assert - the caret never scrolls off screen while it walks past each wrapped card
+  expect(screenRows.every((row) => row >= 0)).toBe(true);
+  // 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/DiffContentView.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 { DiffContentView } from "./DiffContentView";
+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(
+    <DiffContentView
+      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(
+      <DiffContentView
+        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/DiffContentView.stories.tsx

@@ -0,0 +1,80 @@
+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 { DiffContentView } from "./DiffContentView";
+import { fixtureDiffRows, fixtureDiffSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "Surfaces/DiffContentView" };
+
+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 (
+    <DiffContentView
+      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: () => sheet([]),
+  expectedColors: [DARK.insertedForeground, DARK.deletedForeground],
+  size: { width: 90, height: 16 },
+};
+
+// 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: () => sheet([]),
+  expectedColors: [DARK.insertedForeground, DARK.deletedForeground, DARK.textDim],
+  size: { width: 90, height: 16 },
+};
+
+// 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 },
+};
+
+// 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 },
+};
+
+// 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/DiffContentView.syntax.test.tsx

@@ -0,0 +1,82 @@
+import { afterEach, beforeEach, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import type { RGBA } from "@opentui/core";
+import React from "react";
+import { DiffContentView } from "./DiffContentView";
+import { fixtureDiffSession } from "./story-fixtures";
+import { diffRows } from "../view-diff";
+import { DARK } from "../theme";
+import { allowEventLoopUpdates } from "../test-support";
+
+const PATCH = `diff --git a/src/x.ts b/src/x.ts
+--- a/src/x.ts
++++ b/src/x.ts
+@@ -1,3 +1,3 @@
+ export class Store {
+-  const limit = 100;
++  const limit = 250;
+ }
+`;
+
+function hex(color: RGBA): string {
+  const [red, green, blue] = color.toInts();
+
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
+}
+
+beforeEach(() => allowEventLoopUpdates());
+afterEach(() => allowEventLoopUpdates());
+
+test("renders tree-sitter colors, with the changed word in the diff color on top", async () => {
+  // Arrange
+  const noop = (): void => {};
+  const setup = await testRender(
+    <DiffContentView
+      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
+  let keywordAccent = false;
+
+  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) {
+      const accentText = line.spans
+        .filter((span) => hex(span.fg) === DARK.accent)
+        .map((span) => span.text)
+        .join("");
+
+      if (accentText.includes("export")) keywordAccent = true;
+    }
+  }
+
+  // Assert
+  expect(keywordAccent).toBe(true);
+  // the intra-line changed number keeps the diff color over its syntax color
+  const changedColors = new Set<string>();
+
+  for (const line of setup.captureSpans().lines) {
+    for (const span of line.spans) {
+      if (span.text.includes("250")) changedColors.add(hex(span.fg));
+      if (span.text.includes("100")) changedColors.add(hex(span.fg));
+    }
+  }
+  expect(changedColors.has(DARK.insertedForeground)).toBe(true);
+  expect(changedColors.has(DARK.deletedForeground)).toBe(true);
+
+  setup.renderer.destroy();
+}, 25000);