@cueloop/client 0.1.0-alpha.10 → 0.1.0-alpha.12

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 { truncate } from "./format";
+
+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.t === "file" || row.t === "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.t === "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.t === "add" ? "+" : row.t === "del" ? "-" : " ";
+            const foreground = row.t === "add" ? tokens.insFg : row.t === "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}>
+            ◆ {truncate(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.t === "ctx" || row.t === "add" || row.t === "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.t === "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,42 @@
+/**
+ * The pending-review inbox: a cursor-driven session list. Selection stays
+ * with the keyboard grammar; the list only renders the snapshot.
+ */
+
+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";
+
+export interface InboxListProps {
+  inbox: ReviewSession[];
+  cursor: number;
+  theme?: Theme;
+}
+
+export function InboxList({ inbox, cursor, 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) => (
+          <text
+            key={session.id}
+            fg={index === cursor ? tokens.text : tokens.textMuted}
+            bg={index === cursor ? tokens.cursorBg : undefined}
+          >
+            {index === cursor ? "▸ " : "  "}
+            {session.artifact.meta.title ?? session.id} · {session.workspace.branch} · {session.artifact.type}
+          </text>
+        ))
+      )}
+      <box style={{ flexGrow: 1 }} />
+      <StatusBar theme={theme}>j/k move · ⏎ open · 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: () => {} };
+
+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={{ dispIdx: 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={{ dispIdx: 2, start: 0, end: 10 }}
+      compose={{
+        kind: "comment",
+        dispIdx: 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 },
+};