@cueloop/client 0.1.0-alpha.5 → 0.1.0-alpha.50

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: "ConfirmDialog" };
+
+const callbacks = { onConfirm: () => {}, onCancel: () => {} };
+
+export const DeletePlan: Story = {
+  render: () => (
+    <ConfirmDialog
+      isOpen
+      title=" Delete plan "
+      message={'Delete "Auth rollout"? This removes the plan and its review.'}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 64, height: 16 },
+};

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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 { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+
+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} theme={theme}>
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <text fg={tokens.text}>{message}</text>
+        <box style={{ flexGrow: 1 }} />
+        <Toolbar>
+          <Button variant="solid" onPress={onConfirm} theme={theme}>
+            {` ${confirmLabel} `}
+          </Button>
+          <Button onPress={onCancel} theme={theme}>
+            {` ${cancelLabel} esc `}
+          </Button>
+        </Toolbar>
+      </box>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,123 @@
+/** Keyboard scroll is smooth: cursor-follow never drifts past wrapped cards. */
+
+import { expect, test } from "bun:test";
+import React, { useState } from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { useKeyboard } from "@opentui/react";
+import type { Renderable, ScrollBoxRenderable } from "@opentui/core";
+import type { Annotation } from "@cueloop/schema";
+import { DiffSheet } from "./DiffSheet";
+import { diffRows, type DiffRow } from "../view-diff";
+import { DARK } from "../theme";
+import { press } from "../test-support";
+
+/** 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");
+}
+
+/** 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
+  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, prefix: "", suffix: "" },
+    createdAt: "2026-01-01T00:00:00Z",
+  }));
+  const setup = await testRender(<ScrollHarness rows={rows} annotations={annotations} />, {
+    width: 60,
+    height: 12,
+  });
+  await setup.waitForVisualIdle();
+  const scrollbox = findById(setup.renderer.root, "diff-scroll") as ScrollBoxRenderable;
+
+  // the cursor row is the one painted with the cursor background
+  const cursorScreenRow = (): 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;
+    }
+    return -1;
+  };
+
+  // Act - walk the cursor down through the whole diff, sampling the scroll each step
+  const scrollTops: number[] = [];
+  const screenRows: number[] = [];
+  for (let step = 0; step < rows.length; step++) {
+    scrollTops.push(scrollbox.scrollTop);
+    screenRows.push(cursorScreenRow());
+    await press(setup, "j");
+  }
+
+  // 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 cursor never scrolls off screen (the pre-fix bug walked it off
+  // the viewport as it passed 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);
+
+  setup.renderer.destroy();
+}, 25000);

package/src/components/DiffSheet.stories.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { DiffSheet } from "./DiffSheet";
+import { FIXTURE_PATCH, fixtureDiffRows } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "DiffSheet" };
+
+export const SignedRows: Story = {
+  render: () => <DiffSheet rows={fixtureDiffRows()} cursor={0} annotations={[]} />,
+  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: () => <DiffSheet rows={fixtureDiffRows()} cursor={0} annotations={[]} />,
+  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],
+  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 },
+};
+
+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 },
+};

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

@@ -0,0 +1,62 @@
+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 { DiffSheet } from "./DiffSheet";
+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 setup = await testRender(<DiffSheet rows={diffRows(PATCH)} cursor={0} annotations={[]} />, {
+    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));
+    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;
+      }
+    }
+  }
+
+  // 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);