@cueloop/client 0.1.0-alpha.33 → 0.1.0-alpha.34

package/src/components/diff-sheet-layout.test.ts

@@ -0,0 +1,127 @@
+import { describe, expect, test } from "bun:test";
+import type { Annotation } from "@cueloop/schema";
+import type { DiffRow } from "../view-diff";
+import type { IntralineRun } from "../diff-intraline";
+import type { SyntaxSpan } from "../diff-syntax";
+import { DARK } from "../theme";
+import {
+  annotatedRowsByIndex,
+  coloredRowSpans,
+  rowContentOffsets,
+  rowLine,
+  segmentRows,
+} from "./diff-sheet-layout";
+
+function row(kind: DiffRow["kind"], text: string, extra: Partial<DiffRow> = {}): DiffRow {
+  return { kind, text, file: "a.ts", ...extra };
+}
+
+function annotation(quote: string): Annotation {
+  return {
+    id: "a1",
+    kind: "comment",
+    body: "note",
+    anchor: { quote, prefix: "", suffix: "" },
+    createdAt: "2026-01-01T00:00:00Z",
+  };
+}
+
+describe("rowLine", () => {
+  test("strips the trailing newline the patch carries", () => {
+    // Arrange / Act / Assert
+    expect(rowLine(row("add", "const x = 1;\n"))).toBe("const x = 1;");
+  });
+});
+
+describe("annotatedRowsByIndex", () => {
+  test("maps an annotation to the code row whose text matches its quote", () => {
+    // Arrange
+    const rows = [row("file", "a.ts"), row("ctx", "keep"), row("add", "new line")];
+
+    // Act
+    const byRow = annotatedRowsByIndex(rows, [annotation("new line")]);
+
+    // Assert
+    expect([...byRow.keys()]).toEqual([2]);
+  });
+});
+
+describe("segmentRows", () => {
+  test("splits header rows out and closes a chunk after an annotated row", () => {
+    // Arrange
+    const rows = [
+      row("file", "a.ts"),
+      row("hunk", "@@"),
+      row("ctx", "keep"),
+      row("add", "changed"),
+    ];
+    const annotatedByRow = new Map<number, Annotation>([[3, annotation("changed")]]);
+
+    // Act
+    const segments = segmentRows(rows, annotatedByRow);
+
+    // Assert
+    expect(segments.map((segment) => segment.kind)).toEqual(["header", "header", "chunk"]);
+    const chunk = segments[2];
+    expect(chunk?.kind).toBe("chunk");
+    if (chunk?.kind === "chunk") expect(chunk.annotation?.id).toBe("a1");
+  });
+
+  test("closes a chunk at the compose row so a draft card can follow it", () => {
+    // Arrange - two code rows, composing on the first
+    const rows = [row("add", "one"), row("add", "two")];
+
+    // Act
+    const segments = segmentRows(rows, new Map(), 0);
+
+    // Assert - the first row is its own chunk, the second a separate chunk
+    expect(segments).toHaveLength(2);
+    expect(segments.every((segment) => segment.kind === "chunk")).toBe(true);
+  });
+});
+
+describe("rowContentOffsets", () => {
+  test("counts one row per header and an extra row for a chunk's annotation card", () => {
+    // Arrange
+    const rows = [row("file", "a.ts"), row("add", "changed")];
+    const annotatedByRow = new Map<number, Annotation>([[1, annotation("changed")]]);
+    const segments = segmentRows(rows, annotatedByRow);
+
+    // Act
+    const offsets = rowContentOffsets(segments);
+
+    // Assert - header at y0, its chunk row at y1; the card would sit at y2
+    expect(offsets[0]).toBe(0);
+    expect(offsets[1]).toBe(1);
+  });
+});
+
+describe("coloredRowSpans", () => {
+  test("a changed word keeps the diff color while unchanged text dims", () => {
+    // Arrange - "old" is the change, " tail" unchanged, on a modified line
+    const runs: IntralineRun[] = [
+      { text: "old", changed: true },
+      { text: " tail", changed: false },
+    ];
+
+    // Act
+    const spans = coloredRowSpans("old tail", runs, undefined, DARK.deletedForeground, DARK);
+
+    // Assert
+    expect(spans).toEqual([
+      { text: "old", foreground: DARK.deletedForeground },
+      { text: " tail", foreground: DARK.textDim },
+    ]);
+  });
+
+  test("syntax color applies to unchanged text when there is no intra-line run", () => {
+    // Arrange - a keyword span over the whole word, no intra-line runs
+    const syntax: SyntaxSpan[] = [{ start: 0, end: 6, group: "keyword" }];
+
+    // Act
+    const spans = coloredRowSpans("return", undefined, syntax, DARK.textMuted, DARK);
+
+    // Assert
+    expect(spans).toEqual([{ text: "return", foreground: DARK.accent }]);
+  });
+});

package/src/components/diff-sheet-layout.ts

@@ -0,0 +1,167 @@
+/**
+ * Pure layout logic for the diff review sheet, split out so it can be tested
+ * without rendering: grouping rows into chunks around headers and annotations,
+ * resolving each row's colored spans (syntax under the intra-line change color),
+ * mapping annotations to rows, and the content-y offset of each row for scroll.
+ * DiffSheet.tsx is the thin renderer over these.
+ */
+
+import type { Annotation } from "@cueloop/schema";
+import type { DiffRow } from "../view-diff";
+import type { Theme } from "../theme";
+import type { IntralineRun } from "../diff-intraline";
+import type { SyntaxSpan } from "../diff-syntax";
+import { colorForSyntaxGroup } from "./syntax-highlight";
+
+/** A header row rendered on its own line, or a contiguous run of code rows. */
+export type DiffSegment =
+  | { kind: "header"; rowIndex: number; row: DiffRow }
+  | { kind: "chunk"; firstRowIndex: number; rows: DiffRow[]; annotation: Annotation | null };
+
+/** One rendered span of a row: its text and its resolved foreground color. */
+export interface ColoredSpan {
+  text: string;
+  foreground: string;
+}
+
+/** Row text carries the patch's trailing newline; rendering strips it. */
+export function rowLine(row: DiffRow): string {
+  return row.text.replace(/\n$/, "");
+}
+
+/** The annotation anchored to each row, matched by its verbatim quote. */
+export function annotatedRowsByIndex(
+  rows: DiffRow[],
+  annotations: Annotation[],
+): Map<number, Annotation> {
+  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;
+}
+
+/** Group rows into header segments and code chunks; a chunk closes after an
+ *  annotated or composed row so a card can render directly below that line. */
+export function segmentRows(
+  rows: DiffRow[],
+  annotatedByRow: Map<number, Annotation>,
+  composeRowIndex?: number,
+): 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;
+    } else if (rowIndex === composeRowIndex) {
+      closeChunk(null);
+      chunkStart = rowIndex + 1;
+    }
+  }
+  closeChunk(null);
+  return segments;
+}
+
+/** The content-y offset of each row index, so the cursor can be scrolled into
+ *  view; a chunk's annotation adds one row for its card. */
+export function rowContentOffsets(segments: DiffSegment[]): number[] {
+  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;
+}
+
+/**
+ * Colored spans for one row, resolved per character: an intra-line changed word
+ * keeps the diff color, otherwise the syntax color applies, falling back to the
+ * dim token on the unchanged part of a modified line or the row's base color.
+ * Adjacent same-color characters coalesce so a row stays a few spans.
+ */
+export function coloredRowSpans(
+  text: string,
+  intralineRuns: IntralineRun[] | undefined,
+  syntaxSpans: SyntaxSpan[] | undefined,
+  baseColor: string,
+  tokens: Theme,
+): ColoredSpan[] {
+  const changed = changedColumns(text.length, intralineRuns);
+  const syntaxColorByColumn = syntaxColorColumns(text.length, syntaxSpans, tokens);
+  const isModifiedLine = intralineRuns !== undefined;
+
+  const spans: ColoredSpan[] = [];
+  for (let column = 0; column < text.length; column++) {
+    const color = changed[column]
+      ? baseColor
+      : (syntaxColorByColumn[column] ?? (isModifiedLine ? tokens.textDim : baseColor));
+    const previous = spans[spans.length - 1];
+    if (previous && previous.foreground === color) previous.text += text[column];
+    else spans.push({ text: text[column]!, foreground: color });
+  }
+  return spans;
+}
+
+/** Which columns are the intra-line change on a modified line. */
+function changedColumns(length: number, intralineRuns: IntralineRun[] | undefined): boolean[] {
+  const changed = Array.from({ length }, () => false);
+  if (!intralineRuns) return changed;
+  let offset = 0;
+  for (const run of intralineRuns) {
+    if (run.changed)
+      for (let index = 0; index < run.text.length; index++) changed[offset + index] = true;
+    offset += run.text.length;
+  }
+  return changed;
+}
+
+/** The syntax color per column, or undefined where a column has no token. */
+function syntaxColorColumns(
+  length: number,
+  syntaxSpans: SyntaxSpan[] | undefined,
+  tokens: Theme,
+): Array<string | undefined> {
+  const colors: Array<string | undefined> = Array.from({ length }, () => undefined);
+  for (const span of syntaxSpans ?? []) {
+    const color = colorForSyntaxGroup(span.group, tokens);
+    if (!color) continue;
+    for (let column = span.start; column < span.end && column < length; column++) {
+      colors[column] = color;
+    }
+  }
+  return colors;
+}

package/src/components/primitives/Button.tsx

@@ -30,7 +30,11 @@ export function Button({
   const tokens = useComponentTheme(theme);
   const backgroundColor = variant === "solid" ? tokens.accent : undefined;
   const foreground =
-    variant === "solid" ? tokens.accentInk : variant === "accent-text" ? tokens.accent : tokens.textDim;
+    variant === "solid"
+      ? tokens.accentInk
+      : variant === "accent-text"
+        ? tokens.accent
+        : tokens.textDim;
   return (
     <box
       style={{ backgroundColor, marginRight }}

package/src/components/primitives/Dialog.tsx

@@ -21,7 +21,15 @@ export interface DialogProps {
   children: React.ReactNode;
 }
 
-export function Dialog({ isOpen, title, width, height, background, theme, children }: DialogProps): React.ReactNode {
+export function Dialog({
+  isOpen,
+  title,
+  width,
+  height,
+  background,
+  theme,
+  children,
+}: DialogProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   if (!isOpen) return null;
   return (

package/src/components/primitives/Tabs.tsx

@@ -29,7 +29,13 @@ export interface TabsProps {
   children: React.ReactNode;
 }
 
-export function Tabs({ selectedKey, onSelectionChange, selectedColor, theme, children }: TabsProps): React.ReactNode {
+export function Tabs({
+  selectedKey,
+  onSelectionChange,
+  selectedColor,
+  theme,
+  children,
+}: TabsProps): React.ReactNode {
   return (
     <TabsContext.Provider value={{ selectedKey, onSelectionChange, selectedColor, theme }}>
       {children}
@@ -63,13 +69,27 @@ export function TabList({ children }: TabListProps): React.ReactNode {
   });
   return (
     <box
-      style={{ width: "100%", height: 3, border: true, borderStyle: FRAME_BORDER_STYLE, borderColor: tokens.text, flexDirection: "row", paddingLeft: 1 }}
+      style={{
+        width: "100%",
+        height: 3,
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: tokens.text,
+        flexDirection: "row",
+        paddingLeft: 1,
+      }}
     >
       {items.map((item) => {
         const selected = item.id === tabs.selectedKey;
         return (
-          <box key={item.id} style={{ marginRight: 2 }} onMouseUp={() => tabs.onSelectionChange(item.id)}>
-            <text fg={selected ? (tabs.selectedColor ?? tokens.accent) : tokens.textDim}>{item.label}</text>
+          <box
+            key={item.id}
+            style={{ marginRight: 2 }}
+            onMouseUp={() => tabs.onSelectionChange(item.id)}
+          >
+            <text fg={selected ? (tabs.selectedColor ?? tokens.accent) : tokens.textDim}>
+              {item.label}
+            </text>
           </box>
         );
       })}

package/src/components/stories-app.tsx

@@ -13,8 +13,17 @@ import { ThemeProvider } from "./theme-context";
 import { loadStories, type LoadedStory } from "./story";
 import { FRAME_BORDER_STYLE } from "./primitives/frame";
 
-function StoriesApp({ stories, onExit }: { stories: LoadedStory[]; onExit: () => void }): React.ReactNode {
-  const moduleTitles = useMemo(() => [...new Set(stories.map((story) => story.moduleTitle))], [stories]);
+function StoriesApp({
+  stories,
+  onExit,
+}: {
+  stories: LoadedStory[];
+  onExit: () => void;
+}): React.ReactNode {
+  const moduleTitles = useMemo(
+    () => [...new Set(stories.map((story) => story.moduleTitle))],
+    [stories],
+  );
   const [moduleIndex, setModuleIndex] = useState(0);
   const [storyIndex, setStoryIndex] = useState(0);
   const moduleTitle = moduleTitles[moduleIndex]!;
@@ -38,17 +47,33 @@ function StoriesApp({ stories, onExit }: { stories: LoadedStory[]; onExit: () =>
 
   return (
     <ThemeProvider theme={DARK}>
-      <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: DARK.background }}>
+      <box
+        style={{
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          backgroundColor: DARK.background,
+        }}
+      >
         <box style={{ height: 1, backgroundColor: DARK.panel, paddingLeft: 1 }}>
           <text fg={DARK.text}>
             <span fg={DARK.accent}>cueloop stories</span>
             <span fg={DARK.textDim}>
-              {" "}· {moduleTitle} / {current.storyName}
+              {" "}
+              · {moduleTitle} / {current.storyName}
             </span>
           </text>
         </box>
         <box style={{ flexDirection: "row", flexGrow: 1 }}>
-          <box style={{ width: 28, backgroundColor: DARK.panel, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+          <box
+            style={{
+              width: 28,
+              backgroundColor: DARK.panel,
+              flexDirection: "column",
+              paddingLeft: 1,
+              paddingTop: 1,
+            }}
+          >
             {moduleTitles.map((title, index) => (
               <text key={title} fg={index === moduleIndex ? DARK.accent : DARK.textMuted}>
                 {index === moduleIndex ? "▸ " : "  "}
@@ -67,7 +92,10 @@ function StoriesApp({ stories, onExit }: { stories: LoadedStory[]; onExit: () =>
             title={` ${current.storyName} (${moduleStories.indexOf(current) + 1}/${moduleStories.length}) `}
           >
             {/* remount per story so component-local state never leaks across */}
-            <box key={`${moduleTitle}/${current.storyName}`} style={{ flexGrow: 1, flexDirection: "column" }}>
+            <box
+              key={`${moduleTitle}/${current.storyName}`}
+              style={{ flexGrow: 1, flexDirection: "column" }}
+            >
               {current.story.render()}
             </box>
           </box>

package/src/components/story-fixtures.ts

@@ -44,7 +44,7 @@ export const FIXTURE_ANNOTATIONS: Annotation[] = [
   },
   {
     id: "a_story_2",
-    kind: "suggestion",
+    kind: "comment",
     anchor: { quote: "move the store", prefix: "", suffix: "" },
     body: "move the store behind one interface",
     createdAt: "2026-01-01T00:00:01Z",
@@ -56,7 +56,11 @@ export function fixturePlanSession(overrides: Partial<ReviewSession> = {}): Revi
     schemaVersion: "1",
     id: "s_story_plan",
     workspace: { repoRoot: "/repo", branch: "main" },
-    artifact: { type: "plan", content: FIXTURE_PLAN, meta: { title: "Migration Plan", agent: "agent/worker-3" } },
+    artifact: {
+      type: "plan",
+      content: FIXTURE_PLAN,
+      meta: { title: "Migration Plan", agent: "agent/worker-3" },
+    },
     revisions: [{ revision: 1, content: FIXTURE_PLAN, submittedAt: "2026-01-01T00:00:00Z" }],
     annotations: FIXTURE_ANNOTATIONS,
     status: "pending",
@@ -69,7 +73,11 @@ export function fixtureDiffSession(overrides: Partial<ReviewSession> = {}): Revi
     schemaVersion: "1",
     id: "s_story_diff",
     workspace: { repoRoot: "/repo", branch: "main" },
-    artifact: { type: "diff", content: FIXTURE_PATCH, meta: { title: "working tree", agent: "agent/worker-3" } },
+    artifact: {
+      type: "diff",
+      content: FIXTURE_PATCH,
+      meta: { title: "working tree", agent: "agent/worker-3" },
+    },
     revisions: [{ revision: 1, content: FIXTURE_PATCH, submittedAt: "2026-01-01T00:00:00Z" }],
     annotations: [],
     status: "pending",

package/src/components/story.ts

@@ -31,7 +31,9 @@ export interface LoadedStory {
 }
 
 export function isStory(value: unknown): value is Story {
-  return typeof value === "object" && value !== null && typeof (value as Story).render === "function";
+  return (
+    typeof value === "object" && value !== null && typeof (value as Story).render === "function"
+  );
 }
 
 /** Import every *.stories.tsx next to the components and flatten the exports. */

package/src/components/syntax-highlight.ts

@@ -1,12 +1,17 @@
 /**
- * Code highlighting tokens: the theme's named tokens projected onto
- * tree-sitter capture names for the native code renderable. One SyntaxStyle
- * per theme object, cached, so every code block on screen shares a handle.
- * Unknown languages simply render unstyled - highlighting is an enhancement,
- * never a blocker.
+ * Code highlighting tokens: the theme's named colors projected onto tree-sitter
+ * capture names. One group -> color map is the single source of truth, feeding
+ * both the native code renderable (via a cached SyntaxStyle per theme) and the
+ * diff sheet's per-row spans. Unknown languages simply render unstyled -
+ * highlighting is an enhancement, never a blocker.
  */
 
-import { SyntaxStyle, infoStringToFiletype } from "@opentui/core";
+import {
+  SyntaxStyle,
+  infoStringToFiletype,
+  extensionToFiletype,
+  basenameToFiletype,
+} from "@opentui/core";
 import type { Theme } from "../theme";
 
 /** Markdown fence info -> tree-sitter filetype, with the aliases we accept. */
@@ -27,12 +32,24 @@ export function filetypeFor(language?: string): string | undefined {
   return infoStringToFiletype(aliases[info] ?? info) ?? aliases[info] ?? info;
 }
 
-const syntaxStyleCache = new WeakMap<Theme, SyntaxStyle>();
+/** A diff/code file path -> tree-sitter filetype, by basename then extension. */
+export function filetypeForPath(path: string): string | undefined {
+  const basename = path.split("/").pop() ?? path;
+  const byBasename = basenameToFiletype.get(basename);
+  if (byBasename) return byBasename;
+  const dotIndex = basename.lastIndexOf(".");
+  if (dotIndex <= 0) return undefined;
+  return extensionToFiletype.get(basename.slice(dotIndex + 1).toLowerCase());
+}
 
-export function syntaxStyleFor(theme: Theme): SyntaxStyle {
-  const cached = syntaxStyleCache.get(theme);
-  if (cached) return cached;
-  const style = SyntaxStyle.fromStyles({
+interface SyntaxGroupStyle {
+  fg: string;
+  italic?: boolean;
+}
+
+/** The one group -> style map, keyed by tree-sitter capture name. */
+function syntaxGroupStyles(theme: Theme): Record<string, SyntaxGroupStyle> {
+  return {
     default: { fg: theme.textMuted },
     comment: { fg: theme.textDim, italic: true },
     string: { fg: theme.green },
@@ -51,7 +68,25 @@ export function syntaxStyleFor(theme: Theme): SyntaxStyle {
     parameter: { fg: theme.textMuted },
     tag: { fg: theme.accent },
     attribute: { fg: theme.blue },
-  });
+  };
+}
+
+const syntaxStyleCache = new WeakMap<Theme, SyntaxStyle>();
+
+export function syntaxStyleFor(theme: Theme): SyntaxStyle {
+  const cached = syntaxStyleCache.get(theme);
+  if (cached) return cached;
+  const style = SyntaxStyle.fromStyles(syntaxGroupStyles(theme));
   syntaxStyleCache.set(theme, style);
   return style;
 }
+
+/** The foreground for a tree-sitter capture group; undefined when unstyled. */
+export function colorForSyntaxGroup(group: string, theme: Theme): string | undefined {
+  const styles = syntaxGroupStyles(theme);
+  const direct = styles[group];
+  if (direct) return direct.fg;
+  // capture names are dotted (e.g. "keyword.control"); match the broadest prefix
+  const base = group.split(".")[0]!;
+  return styles[base]?.fg;
+}

package/src/components/theme-context.stories.tsx

@@ -32,7 +32,12 @@ export const ProviderSwap: Story = {
 export const PropOverride: Story = {
   render: () => (
     <ThemeProvider theme={DARK}>
-      <Card title=" prop-overridden theme " contentRows={1} theme={HIGH_CONTRAST} borderColor={HIGH_CONTRAST.accent}>
+      <Card
+        title=" prop-overridden theme "
+        contentRows={1}
+        theme={HIGH_CONTRAST}
+        borderColor={HIGH_CONTRAST.accent}
+      >
         <text>the theme prop beats the context</text>
       </Card>
     </ThemeProvider>

package/src/components/theme-context.tsx

@@ -12,7 +12,13 @@ import { DARK, type Theme } from "../theme";
 
 const ThemeContext = createContext<Theme>(DARK);
 
-export function ThemeProvider({ theme, children }: { theme: Theme; children: React.ReactNode }): React.ReactNode {
+export function ThemeProvider({
+  theme,
+  children,
+}: {
+  theme: Theme;
+  children: React.ReactNode;
+}): React.ReactNode {
   return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 }