@cueloop/client 0.1.0-alpha.0 → 0.1.0-alpha.100

package/src/diff/diff-syntax.ts

@@ -0,0 +1,186 @@
+/**
+ * Syntax highlighting for diff rows: tree-sitter token colors mapped onto the
+ * diff sheet's hand-rolled rows, so annotation cards still interleave. A hunk is
+ * highlighted as a contiguous fragment (its context+addition lines as the new
+ * side, context+deletion lines as the old side) - never per single line, which
+ * would lose the multi-line grammar context - and the resulting token spans are
+ * mapped back to each row in line-relative columns. Async: the shared tree-sitter
+ * client resolves off the render path, so callers draw unstyled first.
+ */
+
+import { getTreeSitterClient, type SimpleHighlight } from "@opentui/core";
+import type { DiffRow } from "./view-diff";
+import { filetypeForPath } from "../ui/components/syntax-highlight";
+
+/** A syntax-colored run within one row, in line-relative columns [start, end). */
+export interface SyntaxSpan {
+  start: number;
+  end: number;
+  group: string;
+}
+
+function stripTrailingNewline(text: string): string {
+  return text.replace(/\n$/, "");
+}
+
+interface HighlightJob {
+  filetype: string;
+  source: string;
+  rowIndexByLine: number[];
+}
+
+/**
+ * Split diff rows into per-hunk highlight jobs, one per side. Plain project
+ * files contain only context rows, so detect their language from the row path.
+ */
+export function highlightJobs(rows: DiffRow[]): HighlightJob[] {
+  const jobs: HighlightJob[] = [];
+  let oldLines: string[] = [];
+  let newLines: string[] = [];
+  let oldRowIndexByLine: number[] = [];
+  let newRowIndexByLine: number[] = [];
+  let filetype: string | undefined;
+  let path: string | undefined;
+  let hasChange = false;
+
+  const flush = (): void => {
+    if (filetype) {
+      if (oldLines.length && (hasChange || newLines.length === 0))
+        jobs.push({ filetype, source: oldLines.join("\n"), rowIndexByLine: oldRowIndexByLine });
+      if (newLines.length)
+        jobs.push({ filetype, source: newLines.join("\n"), rowIndexByLine: newRowIndexByLine });
+    }
+    oldLines = [];
+    newLines = [];
+    oldRowIndexByLine = [];
+    newRowIndexByLine = [];
+    hasChange = false;
+  };
+
+  for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+    const row = rows[rowIndex]!;
+
+    if (row.file !== path) {
+      flush();
+      path = row.file;
+      filetype = filetypeForPath(path);
+    }
+
+    if (row.kind === "file" || row.kind === "hunk") {
+      flush();
+      continue;
+    }
+    const text = stripTrailingNewline(row.text);
+
+    if (row.kind === "ctx" || row.kind === "del") {
+      oldLines.push(text);
+      oldRowIndexByLine.push(rowIndex);
+    }
+    if (row.kind === "ctx" || row.kind === "add") {
+      newLines.push(text);
+      newRowIndexByLine.push(rowIndex);
+    }
+    if (row.kind === "add" || row.kind === "del") hasChange = true;
+  }
+  flush();
+
+  return jobs;
+}
+
+/**
+ * Resolve one source's flat, possibly-overlapping token highlights into
+ * per-line spans. Offsets are absolute into `source`; later highlights win on
+ * overlap, and a highlight is clamped to the line its start falls on.
+ */
+export function spansByLine(source: string, highlights: SimpleHighlight[]): SyntaxSpan[][] {
+  const lineStarts: number[] = [0];
+
+  for (let index = 0; index < source.length; index++) {
+    if (source[index] === "\n") lineStarts.push(index + 1);
+  }
+  const lineOf = (offset: number): number => {
+    let low = 0;
+    let high = lineStarts.length - 1;
+
+    while (low < high) {
+      const mid = (low + high + 1) >> 1;
+
+      if (lineStarts[mid]! <= offset) low = mid;
+      else high = mid - 1;
+    }
+
+    return low;
+  };
+  // Per-line char->group, later highlights overriding, then coalesce into spans.
+  const groupsByLine: Array<Array<string | undefined>> = lineStarts.map((start, line) => {
+    const end = line + 1 < lineStarts.length ? lineStarts[line + 1]! - 1 : source.length;
+
+    return Array.from({ length: Math.max(0, end - start) }, () => undefined);
+  });
+
+  for (const [start, rawEnd, group] of highlights) {
+    // A capture can span newlines (block comments, template literals); color the
+    // covered columns on every line it crosses, not just the starting line. Offsets
+    // past the source (byte offsets from a multi-byte line) clamp to its end, or the
+    // walk below would sit on the last line forever.
+    const end = Math.min(rawEnd, source.length);
+    let cursor = Math.max(0, start);
+
+    while (cursor < end) {
+      const line = lineOf(cursor);
+      const lineStart = lineStarts[line]!;
+      const lineEnd = line + 1 < lineStarts.length ? lineStarts[line + 1]! - 1 : source.length;
+      const chars = groupsByLine[line]!;
+      const to = Math.min(end, lineEnd) - lineStart;
+
+      for (let column = cursor - lineStart; column < to; column++) chars[column] = group;
+      cursor = lineEnd + 1;
+    }
+  }
+
+  return groupsByLine.map((chars) => {
+    const spans: SyntaxSpan[] = [];
+
+    for (let column = 0; column < chars.length; column++) {
+      const group = chars[column];
+
+      if (group === undefined) continue;
+      const previous = spans[spans.length - 1];
+
+      if (previous && previous.group === group && previous.end === column)
+        previous.end = column + 1;
+      else spans.push({ start: column, end: column + 1, group });
+    }
+
+    return spans;
+  });
+}
+
+/**
+ * Highlight the diff's rows and return the token spans per row index. Rows in a
+ * file with no known filetype, and any row while highlighting is still resolving,
+ * are absent - the caller renders those unstyled.
+ */
+export async function highlightDiffRows(rows: DiffRow[]): Promise<Map<number, SyntaxSpan[]>> {
+  const spansByRow = new Map<number, SyntaxSpan[]>();
+  const jobs = highlightJobs(rows);
+
+  if (!jobs.length) return spansByRow;
+  const client = getTreeSitterClient();
+
+  await client.initialize();
+  for (const job of jobs) {
+    const result = await client.highlightOnce(job.source, job.filetype);
+
+    if (!result.highlights) continue;
+    const lineSpans = spansByLine(job.source, result.highlights);
+
+    job.rowIndexByLine.forEach((rowIndex, line) => {
+      const spans = lineSpans[line];
+
+      if (spans && spans.length) spansByRow.set(rowIndex, spans);
+    });
+  }
+
+  return spansByRow;
+}

package/src/diff/split-diff.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, test } from "bun:test";
+import { diffRows } from "./view-diff";
+import { splitDiffRows, splitRowOffsets, type SplitRow } from "./split-diff";
+
+const PATCH = `diff --git a/greet.ts b/greet.ts
+--- a/greet.ts
++++ b/greet.ts
+@@ -1,4 +1,4 @@
+ const name = "world";
+-console.log("hi " + name);
+-console.log("done");
++console.log("hello " + name);
++console.log("finished");
+ export {};
+`;
+
+function pairs(rows: SplitRow[]): SplitRow[] {
+  return rows.filter((row) => row.kind === "pair");
+}
+
+describe("splitDiffRows", () => {
+  test("carries the file and hunk headers through unchanged", () => {
+    // Act
+    const split = splitDiffRows(diffRows(PATCH));
+
+    // Assert
+    expect(split[0]).toMatchObject({ kind: "file", file: "greet.ts", text: "greet.ts" });
+    expect(split[1]?.kind).toBe("hunk");
+  });
+
+  test("a context line sits on both sides with its own line numbers", () => {
+    // Act
+    const first = pairs(splitDiffRows(diffRows(PATCH)))[0]!;
+
+    // Assert
+    expect(first.left).toMatchObject({ kind: "ctx", lineNumber: 1 });
+    expect(first.right).toMatchObject({ kind: "ctx", lineNumber: 1 });
+    expect(first.left?.text).toBe(first.right?.text);
+  });
+
+  test("a balanced change block pairs each deletion against an addition", () => {
+    // Act - the two deletions zip against the two additions, one per row
+    const changed = pairs(splitDiffRows(diffRows(PATCH))).filter(
+      (row) => row.left?.kind === "del" || row.right?.kind === "add",
+    );
+
+    // Assert
+    expect(changed).toHaveLength(2);
+    expect(changed[0]).toMatchObject({
+      left: { kind: "del", lineNumber: 2 },
+      right: { kind: "add", lineNumber: 2 },
+    });
+    expect(changed[1]).toMatchObject({
+      left: { kind: "del", lineNumber: 3 },
+      right: { kind: "add", lineNumber: 3 },
+    });
+  });
+
+  test("an unbalanced block blank-fills the shorter side", () => {
+    // Arrange - one deletion, three additions
+    const patch = `diff --git a/x.ts b/x.ts
+--- a/x.ts
++++ b/x.ts
+@@ -1,2 +1,4 @@
+ keep;
+-old;
++new1;
++new2;
++new3;
+`;
+
+    // Act
+    const changed = pairs(splitDiffRows(diffRows(patch))).filter(
+      (row) => row.left?.kind === "del" || row.right?.kind === "add",
+    );
+
+    // Assert - three rows tall, only the first has a left deletion
+    expect(changed).toHaveLength(3);
+    expect(changed[0]?.left?.kind).toBe("del");
+    expect(changed[1]?.left).toBeUndefined();
+    expect(changed[2]?.left).toBeUndefined();
+    expect(changed.map((row) => row.right?.text.trim())).toEqual(["new1;", "new2;", "new3;"]);
+  });
+
+  test("each side keeps its originating unified row for anchoring", () => {
+    // Act
+    const base = diffRows(PATCH);
+    const changed = pairs(splitDiffRows(base)).find((row) => row.right?.kind === "add")!;
+
+    // Assert - the split line points back at a row from the base list
+    expect(base[changed.right!.rowIndex]).toBe(changed.right!.row);
+  });
+});
+
+describe("splitRowOffsets", () => {
+  test("maps both sides of a pair to the same y and steps a file band by three", () => {
+    // Arrange
+    const base = diffRows(PATCH);
+    const split = splitDiffRows(base);
+
+    // Act
+    const offsets = splitRowOffsets(split);
+
+    // Assert - the file band is three rows and the hunk one, so the first context pair sits at y 4
+    const firstContext = split.find((row) => row.kind === "pair" && row.left?.kind === "ctx")!;
+
+    expect(offsets.get(firstContext.left!.rowIndex)).toBe(4);
+    expect(offsets.get(firstContext.right!.rowIndex)).toBe(4);
+  });
+});

package/src/diff/split-diff.ts

@@ -0,0 +1,144 @@
+/**
+ * Side-by-side diff projection: fold the unified DiffRow list into paired rows,
+ * old on the left and new on the right. A context line sits on both sides; a
+ * change block zips its deletions against its additions to the taller side, with
+ * a blank filler where one side runs out. Each side keeps its originating unified
+ * row, so the cursor, anchors, and curation keep working through the base rows.
+ */
+
+import type { DiffRow } from "./view-diff";
+
+/** One code line on one side of the split, carrying its originating unified row. */
+export interface SplitLine {
+  row: DiffRow;
+  rowIndex: number;
+  kind: "ctx" | "del" | "add";
+  text: string;
+  lineNumber?: number;
+}
+
+/** A rendered split row: a file band, a hunk header, or an old|new line pair. */
+export interface SplitRow {
+  kind: "file" | "hunk" | "pair";
+  file: string;
+  text?: string;
+  rowIndex?: number;
+  left?: SplitLine;
+  right?: SplitLine;
+}
+
+/** A base row paired with its index in the base list. */
+interface IndexedRow {
+  row: DiffRow;
+  index: number;
+}
+
+function contextLine({ row, index }: IndexedRow, side: "left" | "right"): SplitLine {
+  return {
+    row,
+    rowIndex: index,
+    kind: "ctx",
+    text: row.text,
+    lineNumber: side === "left" ? row.oldLine : row.newLine,
+  };
+}
+
+function deletionLine({ row, index }: IndexedRow): SplitLine {
+  return { row, rowIndex: index, kind: "del", text: row.text, lineNumber: row.oldLine };
+}
+
+function additionLine({ row, index }: IndexedRow): SplitLine {
+  return { row, rowIndex: index, kind: "add", text: row.text, lineNumber: row.newLine };
+}
+
+/** Zip a change block's deletions against its additions, blank-filling the shorter side. */
+function zipChangeBlock(
+  deletions: IndexedRow[],
+  additions: IndexedRow[],
+  file: string,
+): SplitRow[] {
+  const pairs: SplitRow[] = [];
+  const height = Math.max(deletions.length, additions.length);
+
+  for (let index = 0; index < height; index++) {
+    const del = deletions[index];
+    const add = additions[index];
+
+    pairs.push({
+      kind: "pair",
+      file,
+      left: del ? deletionLine(del) : undefined,
+      right: add ? additionLine(add) : undefined,
+    });
+  }
+
+  return pairs;
+}
+
+/** Project unified diff rows into side-by-side split rows. */
+export function splitDiffRows(rows: DiffRow[]): SplitRow[] {
+  const split: SplitRow[] = [];
+  let pendingDeletions: IndexedRow[] = [];
+  let pendingAdditions: IndexedRow[] = [];
+  let blockFile = "";
+
+  const flushChangeBlock = (): void => {
+    if (pendingDeletions.length === 0 && pendingAdditions.length === 0) return;
+    split.push(...zipChangeBlock(pendingDeletions, pendingAdditions, blockFile));
+    pendingDeletions = [];
+    pendingAdditions = [];
+  };
+
+  rows.forEach((row, index) => {
+    if (row.kind === "add") {
+      blockFile = row.file;
+      pendingAdditions.push({ row, index });
+
+      return;
+    }
+    if (row.kind === "del") {
+      blockFile = row.file;
+      pendingDeletions.push({ row, index });
+
+      return;
+    }
+    // any non-change row closes the current change block before it renders
+    flushChangeBlock();
+    if (row.kind === "file" || row.kind === "hunk") {
+      split.push({ kind: row.kind, file: row.file, text: row.text, rowIndex: index });
+    } else
+      split.push({
+        kind: "pair",
+        file: row.file,
+        left: contextLine({ row, index }, "left"),
+        right: contextLine({ row, index }, "right"),
+      });
+  });
+  flushChangeBlock();
+
+  return split;
+}
+
+/**
+ * Visual y of each base row index in the split layout, so the cursor scrolls into
+ * view. A file band spans three rows (rule, name, rule), a hunk one, a pair one; a
+ * pair's two sides share the row, so both base indices map to the same y.
+ */
+export function splitRowOffsets(splitRows: SplitRow[]): Map<number, number> {
+  const offsets = new Map<number, number>();
+  let contentY = 0;
+
+  for (const row of splitRows) {
+    if (row.kind === "file") {
+      contentY += 3;
+    } else if (row.kind === "hunk") {
+      contentY += 1;
+    } else {
+      if (row.left) offsets.set(row.left.rowIndex, contentY);
+      if (row.right) offsets.set(row.right.rowIndex, contentY);
+      contentY += 1;
+    }
+  }
+
+  return offsets;
+}