@cueloop/client 0.1.0-alpha.3 → 0.1.0-alpha.30

package/src/components/ConfirmCard.tsx

@@ -0,0 +1,117 @@
+/**
+ * The Submit button expanded into a bordered confirm card at the rail bottom:
+ * honest counts, 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;
+  annotationCount: number;
+  blockingCount: number;
+  /**
+   * 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;
+}
+
+/** Counts, spacer, 1-row verdict selector, spacer, summary input, spacer, buttons. */
+const CONFIRM_CONTENT_ROWS = 7;
+
+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,
+  annotationCount,
+  blockingCount,
+  viewedSummary,
+  onInput,
+  onSelectVerdict,
+  onSubmit,
+  onCancel,
+  theme,
+}: ConfirmCardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <Card
+      title=" submit review "
+      contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 1 : 0)}
+      borderColor={tokens.accent}
+      marginRight={1}
+      theme={theme}
+    >
+      <text fg={tokens.textDim}>{`${annotationCount} annotations · ${blockingCount} blocking`}</text>
+      {viewedSummary !== undefined ? <text fg={tokens.textDim}>{viewedSummary}</text> : null}
+      <box style={{ height: 1 }} />
+      <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.backdrop, DARK.panel, DARK.accent],
+  size: { width: 64, height: 16 },
+};

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,56 @@
+/**
+ * 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.stories.tsx

@@ -0,0 +1,44 @@
+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.insFg, DARK.delFg],
+  size: { width: 90, height: 16 },
+};
+
+export const CursorOnAddedLine: Story = {
+  render: () => <DiffSheet rows={fixtureDiffRows()} cursor={4} annotations={[]} />,
+  expectedColors: [DARK.cursorBg],
+  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.markCommentBg],
+  size: { width: 90, height: 16 },
+};

package/src/components/DiffSheet.tsx

@@ -0,0 +1,243 @@
+/**
+ * The diff review sheet: every row of the patch renders (no window cap)
+ * inside a scrollbox, with file headers, hunk headers, and contiguous line
+ * chunks. Line chunks draw through the native line-number gutter - custom
+ * numbers per row (old numbers on deletions), the cursor as a gutter sign,
+ * and annotation markers as line signs. Chunks split after an annotated row
+ * so the annotation body renders directly under its line.
+ */
+
+import React, { useEffect, useMemo, useRef } from "react";
+import type { LineNumberRenderable, LineSign, ScrollBoxRenderable } from "@opentui/core";
+import type { Annotation } from "@cueloop/schema";
+import type { DiffRow } from "../view-diff";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { truncateToSingleLine } from "./truncate-text";
+
+export interface DiffSheetProps {
+  rows: DiffRow[];
+  cursor: number;
+  annotations: Annotation[];
+  focusedAnnotationId?: string;
+  theme?: Theme;
+}
+
+type DiffSegment =
+  | { kind: "header"; rowIndex: number; row: DiffRow }
+  | { kind: "chunk"; firstRowIndex: number; rows: DiffRow[]; annotation: Annotation | null };
+
+/** Row text carries the patch's trailing newline; rendering strips it. */
+function rowLine(row: DiffRow): string {
+  return row.text.replace(/\n$/, "");
+}
+
+/** Chunks split after an annotated row so its card can sit directly below. */
+function segmentRows(rows: DiffRow[], annotatedByRow: Map<number, Annotation>): DiffSegment[] {
+  const segments: DiffSegment[] = [];
+  let chunk: DiffRow[] = [];
+  let chunkStart = 0;
+  const closeChunk = (annotation: Annotation | null): void => {
+    if (chunk.length) segments.push({ kind: "chunk", firstRowIndex: chunkStart, rows: chunk, annotation });
+    chunk = [];
+  };
+  for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+    const row = rows[rowIndex]!;
+    if (row.kind === "file" || row.kind === "hunk") {
+      closeChunk(null);
+      segments.push({ kind: "header", rowIndex, row });
+      chunkStart = rowIndex + 1;
+      continue;
+    }
+    if (!chunk.length) chunkStart = rowIndex;
+    chunk.push(row);
+    const annotation = annotatedByRow.get(rowIndex);
+    if (annotation) {
+      closeChunk(annotation);
+      chunkStart = rowIndex + 1;
+    }
+  }
+  closeChunk(null);
+  return segments;
+}
+
+function DiffChunk({
+  segment,
+  cursor,
+  focusedAnnotationId,
+  theme,
+}: {
+  segment: Extract<DiffSegment, { kind: "chunk" }>;
+  cursor: number;
+  focusedAnnotationId?: string;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const gutterRef = useRef<LineNumberRenderable | null>(null);
+  const cursorInChunk = cursor - segment.firstRowIndex;
+
+  const lineNumbers = useMemo(() => {
+    const numbers = new Map<number, number>();
+    segment.rows.forEach((row, lineIndex) => {
+      const gutterNumber = row.kind === "del" ? row.oldLine : row.newLine;
+      if (gutterNumber !== undefined) numbers.set(lineIndex, gutterNumber);
+    });
+    return numbers;
+  }, [segment]);
+
+  const lineSigns = useMemo(() => {
+    const signs = new Map<number, LineSign>();
+    if (cursorInChunk >= 0 && cursorInChunk < segment.rows.length) {
+      signs.set(cursorInChunk, { before: "▎", beforeColor: tokens.accent });
+    }
+    if (segment.annotation) {
+      signs.set(segment.rows.length - 1, { after: "◆", afterColor: tokens.accent });
+    }
+    return signs;
+  }, [segment, cursorInChunk, tokens]);
+
+  const lineColors = useMemo(() => {
+    // the renderable's config parser requires the gutter key to be present
+    const colors = new Map<number, { gutter: string | undefined; content: string }>();
+    if (segment.annotation) {
+      colors.set(segment.rows.length - 1, { gutter: undefined, content: tokens.markCommentBg });
+    }
+    if (cursorInChunk >= 0 && cursorInChunk < segment.rows.length) {
+      colors.set(cursorInChunk, { gutter: tokens.cursorBg, content: tokens.cursorBg });
+    }
+    return colors;
+  }, [segment, cursorInChunk, tokens]);
+
+  // gutter state flows through the imperative surface: the renderable keeps
+  // no prop setters for these maps, so updates land via effects
+  useEffect(() => {
+    const gutter = gutterRef.current;
+    if (!gutter) return;
+    gutter.setLineNumbers(lineNumbers);
+    gutter.setLineSigns(lineSigns);
+    gutter.clearAllLineColors();
+    for (const [line, colorConfig] of lineColors) gutter.setLineColor(line, colorConfig);
+  }, [lineNumbers, lineSigns, lineColors]);
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <line-number
+        ref={gutterRef}
+        fg={tokens.textDim}
+        bg={tokens.bg}
+        minWidth={4}
+        paddingRight={1}
+        lineNumbers={lineNumbers}
+        lineSigns={lineSigns}
+      >
+        <text style={{ wrapMode: "none" }} selectable={false}>
+          {segment.rows.map((row, lineIndex) => {
+            const sign = row.kind === "add" ? "+" : row.kind === "del" ? "-" : " ";
+            const foreground = row.kind === "add" ? tokens.insFg : row.kind === "del" ? tokens.delFg : tokens.textMuted;
+            const isCursorRow = lineIndex === cursorInChunk;
+            const isAnnotatedRow = segment.annotation !== null && lineIndex === segment.rows.length - 1;
+            return (
+              <span
+                key={lineIndex}
+                fg={foreground}
+                bg={isCursorRow ? tokens.cursorBg : isAnnotatedRow ? tokens.markCommentBg : undefined}
+              >
+                {(lineIndex > 0 ? "\n" : "") + sign + rowLine(row)}
+              </span>
+            );
+          })}
+        </text>
+      </line-number>
+      {segment.annotation ? (
+        <text>
+          <span fg={tokens.textDim}>{"      "}</span>
+          <span fg={segment.annotation.id === focusedAnnotationId ? tokens.text : tokens.accent}>
+            ◆ {truncateToSingleLine(segment.annotation.body, 70)}
+          </span>
+        </text>
+      ) : null}
+    </box>
+  );
+}
+
+export function DiffSheet({ rows, cursor, annotations, focusedAnnotationId, theme }: DiffSheetProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+
+  const annotatedByRow = useMemo(() => {
+    const byRow = new Map<number, Annotation>();
+    for (const annotation of annotations) {
+      const rowIndex = rows.findIndex(
+        (row) => row.text === annotation.anchor.quote && (row.kind === "ctx" || row.kind === "add" || row.kind === "del"),
+      );
+      if (rowIndex !== -1) byRow.set(rowIndex, annotation);
+    }
+    return byRow;
+  }, [rows, annotations]);
+
+  const segments = useMemo(() => segmentRows(rows, annotatedByRow), [rows, annotatedByRow]);
+
+  // content y offset per row index, for cursor-following scroll
+  const rowOffsets = useMemo(() => {
+    const offsets: number[] = [];
+    let contentY = 0;
+    for (const segment of segments) {
+      if (segment.kind === "header") {
+        offsets[segment.rowIndex] = contentY;
+        contentY += 1;
+      } else {
+        segment.rows.forEach((_, lineIndex) => {
+          offsets[segment.firstRowIndex + lineIndex] = contentY + lineIndex;
+        });
+        contentY += segment.rows.length + (segment.annotation ? 1 : 0);
+      }
+    }
+    return offsets;
+  }, [segments]);
+
+  useEffect(() => {
+    const scrollbox = scrollRef.current;
+    const cursorOffset = rowOffsets[cursor];
+    if (!scrollbox || cursorOffset === undefined) return;
+    const viewportHeight = Math.max(1, scrollbox.height);
+    if (cursorOffset < scrollbox.scrollTop + 2) {
+      scrollbox.scrollTo({ x: 0, y: Math.max(0, cursorOffset - 2) });
+    } else if (cursorOffset > scrollbox.scrollTop + viewportHeight - 3) {
+      scrollbox.scrollTo({ x: 0, y: cursorOffset - viewportHeight + 3 });
+    }
+  }, [cursor, rowOffsets]);
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
+        {segments.map((segment, segmentIndex) => {
+          if (segment.kind === "header") {
+            const isCursor = segment.rowIndex === cursor;
+            if (segment.row.kind === "file") {
+              return (
+                <text key={segmentIndex} fg={tokens.text} bg={isCursor ? tokens.cursorBg : tokens.panel}>
+                  {isCursor ? "▎" : " "}■ {rowLine(segment.row)}
+                </text>
+              );
+            }
+            return (
+              <text key={segmentIndex} fg={tokens.blue} bg={isCursor ? tokens.cursorBg : undefined}>
+                {isCursor ? "▎" : " "}
+                {rowLine(segment.row)}
+              </text>
+            );
+          }
+          return (
+            <DiffChunk
+              key={segmentIndex}
+              segment={segment}
+              cursor={cursor}
+              focusedAnnotationId={focusedAnnotationId}
+              theme={theme}
+            />
+          );
+        })}
+      </scrollbox>
+    </box>
+  );
+}

package/src/components/InboxList.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { InboxList } from "./InboxList";
+import { fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "InboxList" };
+
+export const TwoPending: Story = {
+  render: () => <InboxList inbox={[fixturePlanSession(), fixtureDiffSession()]} cursor={0} />,
+  expectedColors: [DARK.accent, DARK.cursorBg],
+  size: { width: 80, height: 12 },
+};
+
+export const Empty: Story = {
+  render: () => <InboxList inbox={[]} cursor={0} />,
+  size: { width: 80, height: 8 },
+};

package/src/components/InboxList.tsx

@@ -0,0 +1,55 @@
+/**
+ * The pending-review inbox: a cursor-driven session list. Selection stays with
+ * the keyboard grammar; the list only renders the snapshot. The selected row
+ * carries a [delete] word-button (click, or `d` in the grammar) that asks the
+ * caller to confirm removal.
+ */
+
+import React from "react";
+import type { ReviewSession } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { StatusBar } from "./primitives/StatusBar";
+import { Button } from "./primitives/Button";
+
+export interface InboxListProps {
+  inbox: ReviewSession[];
+  cursor: number;
+  /** Ask to delete a plan (the selected row's [delete] button). */
+  onRequestDelete?: (id: string, title: string) => void;
+  theme?: Theme;
+}
+
+export function InboxList({ inbox, cursor, onRequestDelete, theme }: InboxListProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: tokens.bg, padding: 1 }}>
+      <text fg={tokens.accent}>cueloop · inbox ({inbox.length} pending)</text>
+      <text> </text>
+      {inbox.length === 0 ? (
+        <text fg={tokens.textDim}>nothing waiting for review</text>
+      ) : (
+        inbox.map((session, index) => {
+          const selected = index === cursor;
+          const title = session.artifact.meta.title ?? session.id;
+          return (
+            <box key={session.id} style={{ flexDirection: "row", backgroundColor: selected ? tokens.cursorBg : undefined }}>
+              <text fg={selected ? tokens.text : tokens.textMuted}>
+                {selected ? "▸ " : "  "}
+                {title} · {session.workspace.branch} · {session.artifact.type}
+              </text>
+              <box style={{ flexGrow: 1 }} />
+              {selected && onRequestDelete ? (
+                <Button onPress={() => onRequestDelete(session.id, title)} theme={theme}>
+                  {" [delete] "}
+                </Button>
+              ) : null}
+            </box>
+          );
+        })
+      )}
+      <box style={{ flexGrow: 1 }} />
+      <StatusBar theme={theme}>j/k move · ⏎ open · d delete · q quit</StatusBar>
+    </box>
+  );
+}

package/src/components/PlanSheet.stories.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PlanSheet } from "./PlanSheet";
+import { fixtureDisplay, fixtureMarks, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "PlanSheet" };
+
+const callbacks = { onLineActivate: () => {}, onEditRequest: () => {}, onShareRequest: () => {}, canEdit: true };
+
+export const AnnotatedPlan: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession()}
+      display={fixtureDisplay()}
+      marks={fixtureMarks()}
+      cursor={2}
+      activeSpan={null}
+      compose={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.markCommentBg, DARK.markSuggestionBg, DARK.cursorBg],
+  size: { width: 90, height: 28 },
+};
+
+export const SpanSelection: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession({ annotations: [] })}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={2}
+      activeSpan={{ displayIndex: 2, start: 0, end: 10 }}
+      compose={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 90, height: 28 },
+};
+
+export const InlineCompose: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession({ annotations: [] })}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={2}
+      activeSpan={{ displayIndex: 2, start: 0, end: 10 }}
+      compose={{
+        kind: "comment",
+        displayIndex: 2,
+        quote: "The daemon",
+        draft: { text: "Which daemon?", onInput: () => {}, onSave: () => {}, onCancel: () => {} },
+      }}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  size: { width: 90, height: 30 },
+};
+
+export const OrphanBanner: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession()}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={0}
+      activeSpan={null}
+      compose={null}
+      editOrphanCount={1}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.red],
+  size: { width: 90, height: 28 },
+};