@cueloop/client 0.1.0-alpha.6 → 0.1.0-alpha.61

package/src/components/CompletionOverlay.tsx

@@ -0,0 +1,60 @@
+/**
+ * Post-submit hand-back overlay: the agent is unblocked, the reviewer either
+ * closes now, opts into auto-close, or dismisses back to the resolved view.
+ * The latest status line (e.g. the vault-export path) stays visible here.
+ */
+
+import React from "react";
+import type { VerdictKind } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+
+export interface CompletionOverlayProps {
+  verdict: VerdictKind;
+  completion: { phase: "prompt" } | { phase: "counting"; remaining: number };
+  /** Latest status line (e.g. the vault-export path) stays visible here. */
+  status: string;
+  /** Where focus goes on close (the agent's pane), when known. */
+  returnsTo?: string;
+  theme?: Theme;
+}
+
+export function CompletionOverlay({
+  verdict,
+  completion,
+  status,
+  returnsTo,
+  theme,
+}: CompletionOverlayProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const approved = verdict === "approve";
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.background,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <text fg={approved ? tokens.green : tokens.accent}>
+        {approved ? "review approved" : "feedback sent"}
+      </text>
+      <text> </text>
+      <text fg={tokens.text}>
+        The agent has your {approved ? "approval" : "feedback"} and is unblocked.
+      </text>
+      {returnsTo ? <text fg={tokens.textDim}>returning to {returnsTo} on close</text> : null}
+      {status ? <text fg={tokens.textDim}>{status}</text> : null}
+      <text> </text>
+      <text fg={tokens.textDim}>
+        close [return]
+        {completion.phase === "counting" ? ` · closing in ${completion.remaining}s` : ""}
+        {" · return to plan [esc] · always [a]"}
+      </text>
+    </box>
+  );
+}

package/src/components/ConfirmCard.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ConfirmCard } from "./ConfirmCard";
+
+export const meta: StoryMeta = { title: "ConfirmCard" };
+
+const callbacks = {
+  onInput: () => {},
+  onSelectVerdict: () => {},
+  onSubmit: () => {},
+  onCancel: () => {},
+};
+
+export const ApproveDefault: Story = {
+  render: () => <ConfirmCard verdict="approve" summary="" {...callbacks} />,
+  expectedColors: [DARK.green, DARK.accent],
+  size: { width: 40, height: 14 },
+};
+
+export const RequestChanges: Story = {
+  render: () => (
+    <ConfirmCard verdict="request_changes" summary="Tighten the steps." {...callbacks} />
+  ),
+  expectedColors: [DARK.red],
+  size: { width: 40, height: 14 },
+};
+
+export const WithViewedSummary: Story = {
+  render: () => (
+    <ConfirmCard verdict="approve" summary="" viewedSummary="2/3 files viewed" {...callbacks} />
+  ),
+  expectedColors: [DARK.green, DARK.textDim],
+  size: { width: 40, height: 14 },
+};

package/src/components/ConfirmCard.tsx

@@ -0,0 +1,129 @@
+/**
+ * The Submit button expanded into a bordered confirm card at the rail bottom:
+ * the verdict selector (arrow keys or click), the optional summary, and plain
+ * word-buttons - key hints live in the status line only. The bordered height
+ * derives from the content rows through Card, so layout and render never drift.
+ */
+
+import React from "react";
+import type { VerdictKind } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Card } from "./primitives/Card";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+
+export const VERDICTS: VerdictKind[] = ["comment", "approve", "request_changes"];
+
+/** Selector words in the confirm card - one word per verdict. */
+export const VERDICT_LABEL: Record<VerdictKind, string> = {
+  comment: "Comment",
+  approve: "Approve",
+  request_changes: "Changes",
+};
+
+export interface ConfirmCardProps {
+  verdict: VerdictKind;
+  summary: string;
+  /**
+   * The guided walk's honest coverage line for diff sessions, e.g.
+   * "2/3 files viewed". Undefined = no walk data, the row does not render.
+   */
+  viewedSummary?: string;
+  onInput: (summary: string) => void;
+  onSelectVerdict: (verdict: VerdictKind) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+  theme?: Theme;
+}
+
+/** 1-row verdict selector, spacer, summary input, spacer, buttons. */
+const CONFIRM_CONTENT_ROWS = 5;
+
+export function verdictColor(verdict: VerdictKind, tokens: Theme): string {
+  return verdict === "approve"
+    ? tokens.green
+    : verdict === "request_changes"
+      ? tokens.red
+      : tokens.blue;
+}
+
+/**
+ * The verdict selector: one row of pressable words, matching the reading
+ * direction of a choice between three peers. Selection stays controlled by
+ * the grammar (←/→ cycle the verdict); a click selects directly. The
+ * selected verdict wears brackets and its color.
+ */
+function VerdictSelector({
+  verdict,
+  onSelectVerdict,
+  theme,
+}: {
+  verdict: VerdictKind;
+  onSelectVerdict: (verdict: VerdictKind) => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box style={{ flexDirection: "row", height: 1 }}>
+      {VERDICTS.map((candidate) => (
+        <box
+          key={candidate}
+          style={{ paddingRight: 1 }}
+          onMouseUp={() => onSelectVerdict(candidate)}
+        >
+          <text fg={candidate === verdict ? verdictColor(candidate, tokens) : tokens.textDim}>
+            {candidate === verdict
+              ? `[${VERDICT_LABEL[candidate]}]`
+              : ` ${VERDICT_LABEL[candidate]} `}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+export function ConfirmCard({
+  verdict,
+  summary,
+  viewedSummary,
+  onInput,
+  onSelectVerdict,
+  onSubmit,
+  onCancel,
+  theme,
+}: ConfirmCardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <Card
+      title=" submit review "
+      contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 2 : 0)}
+      borderColor={tokens.text}
+      backgroundColor="transparent"
+      marginRight={1}
+      theme={theme}
+    >
+      {viewedSummary !== undefined ? <text fg={tokens.textDim}>{viewedSummary}</text> : null}
+      {viewedSummary !== undefined ? <box style={{ height: 1 }} /> : null}
+      <VerdictSelector verdict={verdict} onSelectVerdict={onSelectVerdict} theme={theme} />
+      <box style={{ height: 1 }} />
+      <input
+        focused
+        value={summary}
+        onInput={onInput}
+        placeholder="summary for the agent (optional)"
+      />
+      <box style={{ height: 1 }} />
+      <Toolbar>
+        <Button variant="solid" marginRight={2} onPress={onSubmit} theme={theme}>
+          {" Submit "}
+        </Button>
+        <Button onPress={onCancel} theme={theme}>
+          {" Cancel "}
+        </Button>
+      </Toolbar>
+    </Card>
+  );
+}

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,66 @@
+/**
+ * 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,135 @@
+/** 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,65 @@
+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);