@cueloop/client 0.1.0-alpha.66 → 0.1.0-alpha.68

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

@@ -1,99 +1,169 @@
 import { describe, expect, test } from "bun:test";
 import type { Annotation } from "@cueloop/schema";
-import type { DiffRow } from "../view-diff";
+import {
+  commentCountsByFile,
+  diffRowText,
+  fileChangeCounts,
+  marksByRows,
+  type DiffRow,
+} from "../view-diff";
+import { fixtureDiffSession } from "./story-fixtures";
 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";
+import { coloredRowSpans } 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",
-  };
+function annotation(id: string, anchor: Annotation["anchor"]): Annotation {
+  return { id, kind: "comment", body: "note", anchor, createdAt: "2026-01-01T00:00:00Z" };
 }
 
-describe("rowLine", () => {
+describe("diffRowText", () => {
   test("strips the trailing newline the patch carries", () => {
     // Arrange / Act / Assert
-    expect(rowLine(row("add", "const x = 1;\n"))).toBe("const x = 1;");
+    expect(diffRowText(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", () => {
+describe("fileChangeCounts", () => {
+  test("tallies added and removed lines per file, ignoring context and headers", () => {
     // Arrange
-    const rows = [row("file", "a.ts"), row("ctx", "keep"), row("add", "new line")];
+    const rows = [
+      row("file", "a.ts"),
+      row("hunk", "@@"),
+      row("ctx", "unchanged"),
+      row("del", "gone"),
+      row("add", "one"),
+      row("add", "two"),
+      row("file", "b.ts", { file: "b.ts" }),
+      row("add", "only add", { file: "b.ts" }),
+    ];
 
     // Act
-    const byRow = annotatedRowsByIndex(rows, [annotation("new line")]);
+    const counts = fileChangeCounts(rows);
 
     // Assert
-    expect([...byRow.keys()]).toEqual([2]);
+    expect(counts.get("a.ts")).toEqual({ additions: 2, deletions: 1 });
+    expect(counts.get("b.ts")).toEqual({ additions: 1, deletions: 0 });
   });
 });
 
-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")]]);
+describe("marksByRows", () => {
+  const rows = [
+    row("file", "a.ts"),
+    row("hunk", "@@"),
+    row("ctx", "keep\n"),
+    row("add", "const items = new Map();\n"),
+    row("add", "return items;\n"),
+  ];
 
+  test("a whole-row quote (the legacy row anchor) marks that row end to end", () => {
     // Act
-    const segments = segmentRows(rows, annotatedByRow);
+    const marks = marksByRows(
+      [annotation("a1", { quote: "return items;", prefix: "", suffix: "" })],
+      rows,
+    );
 
     // Assert
-    expect(segments.map((segment) => segment.kind)).toEqual(["header", "header", "chunk"]);
-    const chunk = segments[2];
+    expect([...marks.keys()]).toEqual([4]);
+    expect(marks.get(4)![0]).toMatchObject({ start: 0, end: 13, annotationId: "a1" });
+  });
+
+  test("a word quote marks only its characters and carries the span", () => {
+    // Act
+    const marks = marksByRows(
+      [annotation("a1", { quote: "new Map()", prefix: "const items = ", suffix: ";" })],
+      rows,
+    );
 
-    expect(chunk?.kind).toBe("chunk");
-    if (chunk?.kind === "chunk") expect(chunk.annotation?.id).toBe("a1");
+    // Assert
+    const mark = marks.get(3)![0]!;
+
+    expect(mark.start).toBe(14);
+    expect(mark.end).toBe(23);
+    expect(mark.span).toEqual({
+      start: { blockIndex: 3, char: 14 },
+      end: { blockIndex: 3, char: 23 },
+    });
   });
 
-  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")];
+  test("a quote across two rows paints a mark on each row with one shared span", () => {
+    // Arrange - the anchor a two-row drag produces: rows joined by the block separator
+    const marks = marksByRows(
+      [
+        annotation("a1", {
+          quote: "Map();\n\nreturn",
+          prefix: "const items = new ",
+          suffix: " items;",
+          blockIndex: 3,
+          start: 18,
+          end: 6,
+          endBlockIndex: 4,
+        }),
+      ],
+      rows,
+    );
+
+    // Assert
+    expect([...marks.keys()].toSorted()).toEqual([3, 4]);
+    expect(marks.get(3)![0]!.span).toEqual(marks.get(4)![0]!.span);
+    expect(marks.get(3)![0]).toMatchObject({ start: 18, end: 24 });
+    expect(marks.get(4)![0]).toMatchObject({ start: 0, end: 6 });
+  });
 
+  test("the focused annotation wears the focus role", () => {
     // Act
-    const segments = segmentRows(rows, new Map(), 0);
+    const marks = marksByRows(
+      [annotation("a1", { quote: "keep", prefix: "", suffix: "" })],
+      rows,
+      "a1",
+    );
 
-    // 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);
+    // Assert
+    expect(marks.get(2)![0]!.role).toBe("mark-focus");
   });
 });
 
-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);
+describe("commentCountsByFile", () => {
+  const rows = [
+    row("file", "a.ts"),
+    row("add", "const items = new Map();\n"),
+    row("file", "b.ts", { file: "b.ts" }),
+    row("add", "return other;\n", { file: "b.ts" }),
+  ];
+  const annotation = (id: string, quote: string, replyTo?: string): Annotation => {
+    const comment: Annotation = {
+      id,
+      kind: "comment",
+      body: id,
+      anchor: { quote, prefix: "", suffix: "" },
+      createdAt: "2026-01-01T00:00:00Z",
+    };
+
+    if (replyTo !== undefined) comment.replyTo = replyTo;
+
+    return comment;
+  };
+
+  test("counts a discussion's comments (root plus replies) toward its file", () => {
+    // Arrange - one thread on a.ts with a reply, one on b.ts
+    const session = fixtureDiffSession({
+      annotations: [
+        annotation("a1", "const items = new Map();"),
+        annotation("a1r", "const items = new Map();", "a1"),
+        annotation("b1", "return other;"),
+      ],
+    });
 
     // Act
-    const offsets = rowContentOffsets(segments);
+    const counts = commentCountsByFile(session, rows);
 
-    // 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);
+    // Assert
+    expect(counts.get("a.ts")).toBe(2);
+    expect(counts.get("b.ts")).toBe(1);
   });
 });
 

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

@@ -1,120 +1,20 @@
 /**
- * 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.
+ * Pure color logic for the diff review sheet, split out so it can be tested
+ * without rendering: a row's colored spans (syntax under the intra-line change
+ * color). DiffSheet.tsx paints marks and the caret over these per character.
  */
 
-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

package/src/components/editor-grid.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, test } from "bun:test";
+import {
+  addTab,
+  changesTab,
+  closeTab,
+  containsGroup,
+  fileTab,
+  firstGroupId,
+  makeGroup,
+  splitGroup,
+  type EditorBranch,
+  type EditorGroup,
+  type EditorNode,
+} from "./editor-grid";
+
+function asBranch(node: EditorNode | null): EditorBranch {
+  if (node === null || node.type !== "branch") throw new Error("expected a branch node");
+  return node;
+}
+function asGroup(node: EditorNode | null): EditorGroup {
+  if (node === null || node.type !== "group") throw new Error("expected a group node");
+  return node;
+}
+
+describe("editor grid", () => {
+  test("a fresh group holds its tabs with the first active", () => {
+    const tab = changesTab();
+    const group = makeGroup([tab]);
+    expect(group.type).toBe("group");
+    expect(group.activeTabId).toBe(tab.id);
+  });
+
+  test("adding a tab focuses it", () => {
+    const group = makeGroup([changesTab()]);
+    const file = fileTab("App.tsx", "src/App.tsx", "diff");
+    const next = asGroup(addTab(group, group.id, file));
+    expect(next.tabs).toHaveLength(2);
+    expect(next.activeTabId).toBe(file.id);
+  });
+
+  test("splitting right makes a horizontal branch and focuses the new group", () => {
+    const group = makeGroup([fileTab("App.tsx", "src/App.tsx", "diff")]);
+    const { tree, focusGroupId } = splitGroup(group, group.id, "right");
+    expect(tree.type).toBe("branch");
+    const branch = asBranch(tree);
+    expect(branch.orientation).toBe("horizontal");
+    expect(branch.children).toHaveLength(2);
+    // the new group is the second child (right edge) and takes focus
+    expect(branch.children[1]!.id).toBe(focusGroupId);
+    expect(firstGroupId(tree)).toBe(group.id);
+  });
+
+  test("splitting up makes a vertical branch with the new group first", () => {
+    const group = makeGroup([fileTab("a.ts", "a.ts", "contents")]);
+    const { tree, focusGroupId } = splitGroup(group, group.id, "up");
+    const branch = asBranch(tree);
+    expect(branch.orientation).toBe("vertical");
+    expect(branch.children[0]!.id).toBe(focusGroupId);
+  });
+
+  test("closing the last tab of a split collapses the branch back to one group", () => {
+    const group = makeGroup([fileTab("a.ts", "a.ts", "diff")]);
+    const { tree } = splitGroup(group, group.id, "right");
+    const branch = asBranch(tree);
+    const rightGroup = asGroup(branch.children[1]!);
+    const collapsed = closeTab(tree, rightGroup.id, rightGroup.tabs[0]!.id);
+    expect(collapsed?.type).toBe("group");
+    expect(asGroup(collapsed).id).toBe(group.id);
+  });
+
+  test("closing the only tab of the whole grid returns null", () => {
+    const tab = changesTab();
+    const group = makeGroup([tab]);
+    expect(closeTab(group, group.id, tab.id)).toBeNull();
+  });
+
+  test("containsGroup finds a live group and misses a pruned one", () => {
+    const group = makeGroup([fileTab("a.ts", "a.ts", "diff")]);
+    const { tree } = splitGroup(group, group.id, "right");
+    const branch = asBranch(tree);
+    const rightGroup = asGroup(branch.children[1]!);
+    expect(containsGroup(tree, group.id)).toBe(true);
+    const collapsed = closeTab(tree, rightGroup.id, rightGroup.tabs[0]!.id);
+    expect(containsGroup(asGroup(collapsed), rightGroup.id)).toBe(false);
+  });
+});

package/src/components/editor-grid.ts

@@ -0,0 +1,138 @@
+// The Changes pane's editor layout: a tree of nodes where a leaf is an editor group (a tab strip plus
+// its one active tab) and a branch splits child nodes along an orientation. Splitting an editor group
+// moves its active tab into a new group; a group is pruned when its last tab closes, collapsing the
+// branch that held it.
+
+/** One editor in a group's tab strip: the Changes tab (the whole diff), a per-file tab, or Welcome. */
+export interface EditorTab {
+  id: string;
+  kind: "changes" | "file" | "welcome";
+  label: string;
+  /** Repo-relative path for a file tab; absent for the Changes and Welcome tabs. */
+  path?: string;
+  /** A file tab shows either a single-file diff or the file's plain contents. */
+  fileView?: "diff" | "contents";
+}
+
+/** A leaf of the grid: one editor group holding tabs, with the active tab id. */
+export interface EditorGroup {
+  type: "group";
+  id: string;
+  tabs: EditorTab[];
+  activeTabId: string | null;
+}
+
+/** A branch of the grid: children laid out along one orientation (horizontal = side by side). */
+export interface EditorBranch {
+  type: "branch";
+  id: string;
+  orientation: "horizontal" | "vertical";
+  children: EditorNode[];
+}
+
+export type EditorNode = EditorGroup | EditorBranch;
+
+/** Which edge a split places the new group on; Left/Right split horizontally, Up/Down vertically. */
+export type SplitDirection = "left" | "right" | "up" | "down";
+
+/** A split's outcome: the new grid and the id of the group that should take focus. */
+export interface SplitResult {
+  tree: EditorNode;
+  focusGroupId: string;
+}
+
+const freshId = (): string => crypto.randomUUID();
+
+/** A new editor group holding the given tabs, with the first tab active. */
+export function makeGroup(tabs: EditorTab[]): EditorGroup {
+  return { type: "group", id: freshId(), tabs, activeTabId: tabs[0]?.id ?? null };
+}
+
+/** The Changes tab: the whole diff in one scroll, the disposable default of the Changes pane. */
+export function changesTab(): EditorTab {
+  return { id: freshId(), kind: "changes", label: "Changes" };
+}
+
+/** The Welcome tab: the getting-started surface, a disposable tab shown before any thread is opened. */
+export function welcomeTab(): EditorTab {
+  return { id: freshId(), kind: "welcome", label: "Welcome" };
+}
+
+/** A file tab, opened from a tree; a diff view for a changed file, plain contents otherwise. */
+export function fileTab(label: string, path: string, fileView: "diff" | "contents"): EditorTab {
+  return { id: freshId(), kind: "file", label, path, fileView };
+}
+
+/** The id of the first editor group in reading order; the fallback focus target. */
+export function firstGroupId(node: EditorNode): string {
+  return node.type === "group" ? node.id : firstGroupId(node.children[0]!);
+}
+
+/** Whether a group id still exists in the grid; used to re-home focus after a prune. */
+export function containsGroup(node: EditorNode, groupId: string): boolean {
+  if (node.type === "group") return node.id === groupId;
+  return node.children.some((child) => containsGroup(child, groupId));
+}
+
+function replaceGroup(
+  node: EditorNode,
+  id: string,
+  fn: (group: EditorGroup) => EditorNode,
+): EditorNode {
+  if (node.type === "group") return node.id === id ? fn(node) : node;
+  return { ...node, children: node.children.map((child) => replaceGroup(child, id, fn)) };
+}
+
+/** Make a tab the active one in its group. */
+export function activateTab(node: EditorNode, groupId: string, tabId: string): EditorNode {
+  return replaceGroup(node, groupId, (group) => ({ ...group, activeTabId: tabId }));
+}
+
+/** Append a tab to a group and focus it. */
+export function addTab(node: EditorNode, groupId: string, tab: EditorTab): EditorNode {
+  return replaceGroup(node, groupId, (group) => ({
+    ...group,
+    tabs: [...group.tabs, tab],
+    activeTabId: tab.id,
+  }));
+}
+
+/** Drop empty groups and collapse a branch that ends up with one child; null when nothing remains. */
+export function pruneEmpty(node: EditorNode): EditorNode | null {
+  if (node.type === "group") return node.tabs.length > 0 ? node : null;
+  const kept = node.children.map(pruneEmpty).filter((child): child is EditorNode => child !== null);
+  if (kept.length === 0) return null;
+  if (kept.length === 1) return kept[0]!;
+  return { ...node, children: kept };
+}
+
+/** Close a tab; returns the pruned tree, or null when the last tab of the whole grid is closed. */
+export function closeTab(node: EditorNode, groupId: string, tabId: string): EditorNode | null {
+  const next = replaceGroup(node, groupId, (group) => {
+    const tabs = group.tabs.filter((tab) => tab.id !== tabId);
+    const activeTabId = group.activeTabId === tabId ? (tabs[0]?.id ?? null) : group.activeTabId;
+    return { ...group, tabs, activeTabId };
+  });
+  return pruneEmpty(next);
+}
+
+/** Split a group's active tab into a new group on the given edge; returns the tree and the new focus. */
+export function splitGroup(
+  node: EditorNode,
+  groupId: string,
+  direction: SplitDirection,
+): SplitResult {
+  let focusGroupId = groupId;
+  const tree = replaceGroup(node, groupId, (group) => {
+    const active = group.tabs.find((tab) => tab.id === group.activeTabId) ?? group.tabs[0];
+    if (active === undefined) return group;
+    const movedTab: EditorTab = { ...active, id: freshId() };
+    const newGroup = makeGroup([movedTab]);
+    focusGroupId = newGroup.id;
+    const orientation = direction === "left" || direction === "right" ? "horizontal" : "vertical";
+    const newFirst = direction === "left" || direction === "up";
+    const children = newFirst ? [newGroup, group] : [group, newGroup];
+    return { type: "branch", id: freshId(), orientation, children };
+  });
+  return { tree, focusGroupId };
+}

package/src/components/fade-title.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, test } from "bun:test";
+import { fadeTitle, mixHex } from "./fade-title";
+
+describe("mixHex", () => {
+  test("returns the endpoints at t=0 and t=1", () => {
+    expect(mixHex("#000000", "#ffffff", 0)).toBe("#000000");
+    expect(mixHex("#000000", "#ffffff", 1)).toBe("#ffffff");
+  });
+
+  test("blends halfway", () => {
+    expect(mixHex("#000000", "#ffffff", 0.5)).toBe("#808080");
+  });
+
+  test("clamps out-of-range t", () => {
+    expect(mixHex("#101010", "#202020", 2)).toBe("#202020");
+    expect(mixHex("#101010", "#202020", -1)).toBe("#101010");
+  });
+});
+
+describe("fadeTitle", () => {
+  test("a title that fits is one plain segment", () => {
+    const segments = fadeTitle("short", 20, "#aabbcc", "#000000");
+
+    expect(segments).toEqual([{ text: "short", fg: "#aabbcc" }]);
+  });
+
+  test("a long title is clipped to the width and its tail fades toward the background", () => {
+    const segments = fadeTitle("Review the accent change in the theme", 20, "#ffffff", "#000000");
+
+    expect(segments.map((segment) => segment.text).join("")).toHaveLength(20);
+    // the head keeps the base color, the last characters step toward the fade color
+    expect(segments[0]!.fg).toBe("#ffffff");
+    expect(segments.at(-1)!.fg).not.toBe("#ffffff");
+    // the very last character is the most faded (closest to the background)
+    const lastTwo = segments.slice(-2);
+
+    expect(mixHex("#ffffff", "#000000", 0)).not.toBe(lastTwo[1]!.fg);
+  });
+
+  test("newlines collapse to spaces so the row never wraps", () => {
+    const segments = fadeTitle("line one\nline two", 40, "#ffffff", "#000000");
+
+    expect(segments[0]!.text).toBe("line one line two");
+  });
+
+  test("a zero width yields nothing", () => {
+    expect(fadeTitle("anything", 0, "#ffffff", "#000000")).toEqual([]);
+  });
+});