@cueloop/client 0.1.0-alpha.67 → 0.1.0-alpha.69

package/src/test-support.ts

@@ -7,10 +7,59 @@
  */
 
 import { join } from "node:path";
-import type { TestRendererSetup } from "@opentui/core/testing";
+import { cloneElement, isValidElement, type ReactNode } from "react";
+import type { TestRendererOptions, TestRendererSetup } from "@opentui/core/testing";
+import { testRender } from "@opentui/react/test-utils";
+import type { AppProps } from "./App";
 
-/** Pass budget for waits that include daemon or subprocess round-trips. */
-export const WAIT_PASSES = { maxPasses: 400 };
+/**
+ * A probe for the App's ready signal in an in-process suite: pass `onReady`
+ * to the App and await `ready` before the first interaction, instead of
+ * waiting for a piece of text and hoping the keyboard is bound by then.
+ */
+export interface AppReadyProbe {
+  /** Pass as the App's `onReady` prop. */
+  onReady: () => void;
+  /** Resolves once the App has fired its ready signal. */
+  ready: Promise<void>;
+}
+
+export function appReadyProbe(): AppReadyProbe {
+  let resolve: () => void = () => {};
+  const ready = new Promise<void>((done) => {
+    resolve = done;
+  });
+
+  return { onReady: () => resolve(), ready };
+}
+
+/**
+ * Boot an App element and resolve once it has fired its ready signal: the
+ * first usable screen is painted and its keyboard handlers are subscribed.
+ * Every App suite starts here so no boot waits on a piece of text and hopes.
+ */
+export async function renderReadyApp(
+  element: ReactNode,
+  options: TestRendererOptions,
+): Promise<TestRendererSetup> {
+  if (!isValidElement<AppProps>(element)) throw new Error("renderReadyApp needs an App element");
+  const probe = appReadyProbe();
+  const setup = await testRender(cloneElement(element, { onReady: probe.onReady }), options);
+
+  await probe.ready;
+
+  return setup;
+}
+
+/**
+ * The CUELOOP_CONFIG path that isolates a test from the developer's real user
+ * config: a file inside the test home that does not exist unless the test
+ * writes it. Subprocess harnesses set this in the child env; in-process suites
+ * use `isolateUserConfig`.
+ */
+export function isolatedUserConfigPath(home: string, fileName = "no-config.toml"): string {
+  return join(home, fileName);
+}
 
 /**
  * Isolate the user config: point CUELOOP_CONFIG into the test home so
@@ -20,10 +69,10 @@ export const WAIT_PASSES = { maxPasses: 400 };
  * defaults; pass a file name for suites that write and assert a config of
  * their own. Call in beforeEach; invoke the returned restore in afterEach.
  */
-export function isolateUserConfig(home: string, fileName = "no-config.toml"): () => void {
+export function isolateUserConfig(home: string, fileName?: string): () => void {
   const priorUserConfig = process.env.CUELOOP_CONFIG;
 
-  process.env.CUELOOP_CONFIG = join(home, fileName);
+  process.env.CUELOOP_CONFIG = isolatedUserConfigPath(home, fileName);
 
   return () => {
     if (priorUserConfig === undefined) delete process.env.CUELOOP_CONFIG;
@@ -114,17 +163,27 @@ export interface FrameLocation {
   column: number;
 }
 
-/** Locate the first visual line containing the needle: 0-based row and start column. */
-export function locateText(setup: TestRendererSetup, needle: string): FrameLocation {
-  const frame = setup.captureCharFrame();
-
+/** Locate the first line of a text frame containing the needle; null when absent. */
+export function locateTextInFrame(frame: string, needle: string): FrameLocation | null {
   for (const [row, line] of frame.split("\n").entries()) {
     const column = line.indexOf(needle);
 
     if (column !== -1) return { row, column };
   }
 
-  throw new Error(`locateText ${JSON.stringify(needle)} not found.\nframe:\n${frame}`);
+  return null;
+}
+
+/** Locate the first visual line containing the needle: 0-based row and start column. */
+export function locateText(setup: TestRendererSetup, needle: string): FrameLocation {
+  const frame = setup.captureCharFrame();
+  const location = locateTextInFrame(frame, needle);
+
+  if (location === null) {
+    throw new Error(`locateText ${JSON.stringify(needle)} not found.\nframe:\n${frame}`);
+  }
+
+  return location;
 }
 
 /** The 0-based visual row of the needle - for relative vertical-layout assertions. */

package/src/theme-presets.ts

@@ -50,6 +50,10 @@ const ROSE_PINE_MOON: Theme = {
   markCommentBackground: "#382a37",
   insertedForeground: "#9ccfd8",
   deletedForeground: "#eb6f92",
+  insertedBackground: "#243a3f",
+  insertedEmphasisBackground: "#31555c",
+  deletedBackground: "#3a2530",
+  deletedEmphasisBackground: "#563643",
   backdrop: "transparent",
 };
 
@@ -71,6 +75,10 @@ const CATPPUCCIN_MOCHA: Theme = {
   markCommentBackground: "#33222b",
   insertedForeground: "#a6e3a1",
   deletedForeground: "#f38ba8",
+  insertedBackground: "#26372b",
+  insertedEmphasisBackground: "#375140",
+  deletedBackground: "#382530",
+  deletedEmphasisBackground: "#553844",
   backdrop: "transparent",
 };
 
@@ -92,6 +100,10 @@ const TOKYO_NIGHT: Theme = {
   markCommentBackground: "#2f2230",
   insertedForeground: "#9ece6a",
   deletedForeground: "#f7768e",
+  insertedBackground: "#233028",
+  insertedEmphasisBackground: "#33493a",
+  deletedBackground: "#32232e",
+  deletedEmphasisBackground: "#4d3543",
   backdrop: "transparent",
 };
 
@@ -113,6 +125,10 @@ const GRUVBOX_DARK: Theme = {
   markCommentBackground: "#3a2823",
   insertedForeground: "#b8bb26",
   deletedForeground: "#fb4934",
+  insertedBackground: "#333521",
+  insertedEmphasisBackground: "#4a4d2c",
+  deletedBackground: "#3c2a24",
+  deletedEmphasisBackground: "#5a3a30",
   backdrop: "transparent",
 };
 
@@ -134,6 +150,10 @@ const NORD: Theme = {
   markCommentBackground: "#3a2f33",
   insertedForeground: "#a3be8c",
   deletedForeground: "#bf616a",
+  insertedBackground: "#333d33",
+  insertedEmphasisBackground: "#454f42",
+  deletedBackground: "#3c2f33",
+  deletedEmphasisBackground: "#544045",
   backdrop: "transparent",
 };
 

package/src/theme.ts

@@ -22,6 +22,12 @@ export interface Theme {
   markCommentBackground: string;
   insertedForeground: string;
   deletedForeground: string;
+  /** The band behind a whole added line, and the stronger tint under its intra-line changed words. */
+  insertedBackground: string;
+  insertedEmphasisBackground: string;
+  /** The band behind a whole removed line, and the stronger tint under its intra-line changed words. */
+  deletedBackground: string;
+  deletedEmphasisBackground: string;
   /** Layer behind centered dialogs; transparent keeps the session visible. */
   backdrop: string;
 }
@@ -42,6 +48,10 @@ export function dimmedTheme(theme: Theme): Theme {
     blue: theme.textDim,
     insertedForeground: theme.textDim,
     deletedForeground: theme.textDim,
+    insertedBackground: theme.panel,
+    insertedEmphasisBackground: theme.elevated,
+    deletedBackground: theme.panel,
+    deletedEmphasisBackground: theme.elevated,
   };
 }
 
@@ -63,6 +73,10 @@ export const DARK: Theme = {
   markCommentBackground: "#3d2a2e",
   insertedForeground: "#62d96b",
   deletedForeground: "#ff6b6b",
+  insertedBackground: "#16321d",
+  insertedEmphasisBackground: "#245c30",
+  deletedBackground: "#341c1f",
+  deletedEmphasisBackground: "#5a2a2e",
   backdrop: "transparent",
 };
 
@@ -89,5 +103,9 @@ export const LIGHT: Theme = {
   markCommentBackground: "#f2e2e8",
   insertedForeground: "#2f8a3e",
   deletedForeground: "#c0392b",
+  insertedBackground: "#d8f5dd",
+  insertedEmphasisBackground: "#a9e6b6",
+  deletedBackground: "#fbdcdc",
+  deletedEmphasisBackground: "#f5b7b7",
   backdrop: "transparent",
 };

package/src/thread-chords.ts

@@ -33,7 +33,7 @@ export const DIFF_CHORD_ENTRIES = [
   { keys: "⌥x / ⌥X", label: "reject the change / the hunk" },
   { keys: "⌥u", label: "restore the last rejection" },
   { keys: "⌥c", label: "collapse the file to its band" },
-  { keys: "⌥d", label: "unified / split (when zoomed)" },
+  { keys: "⌥d", label: "split / stacked (when wide)" },
   { keys: "⌥k", label: "start the guided walk" },
 ] as const;
 

package/src/use-annotation-surface.tsx

@@ -73,6 +73,12 @@ export interface AnnotationSurfaceOptions {
   quickActions: QuickAction[];
   tokens: Theme;
   observer: boolean;
+  /**
+   * Whether this surface accepts comments. False for a non-diff thread's live
+   * working-tree diff, which is view-only: its rows are diff rows, but the
+   * thread anchors comments in plan coordinates, so a draft here would misanchor.
+   */
+  commentsEnabled?: boolean;
   /** A verdict is in: no draft may open; the app answers with its read-only status. */
   resolved: boolean;
   /** True while a menu, dialog, or overlay owns the keyboard. */
@@ -152,6 +158,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     quickActions,
     tokens,
     observer,
+    commentsEnabled = true,
     resolved,
     suspended,
     onComposingChange,
@@ -283,6 +290,8 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     }));
 
   const openCompose = (state: ComposeState): void => {
+    // a view-only surface (a non-diff thread's live diff) never opens a draft
+    if (!commentsEnabled) return;
     if (observer) return onObserverBlocked?.("observer");
     if (resolved) return onObserverBlocked?.("resolved");
     composerReady.current = false;
@@ -296,7 +305,8 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     setCompose(null);
     setComposeText("");
   };
-  const slashActive = compose !== null && composeText.startsWith("/");
+  // open only while typing the token: a leading "/" with no space yet
+  const slashActive = compose !== null && /^\/\S*$/.test(composeText);
   const slashItems = slashActive
     ? slashFilter(slashItemsFrom(quickActions), composeText.slice(1).trim())
     : [];
@@ -417,7 +427,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
       return true;
     }
     if (key.name === "return" || key.name === "tab") {
-      openCompose({ ...activeCompose, seed: slashItems[selected]!.body });
+      openCompose({ ...activeCompose, seed: `/${slashItems[selected]!.name} ` });
 
       return true;
     }

package/src/use-settings-dialog.tsx

@@ -142,9 +142,9 @@ export function useSettingsDialog(params: {
         },
         {
           key: "diffView",
-          label: "Diff view (when zoomed)",
+          label: "Diff view (when wide)",
           kind: "cycle",
-          options: ["Unified", "Split"],
+          options: ["Split", "Stacked"],
         },
       ],
     },
@@ -191,7 +191,7 @@ export function useSettingsDialog(params: {
   ];
   const settingsValues = {
     autoClose: autoClose === "off" ? "off" : `${autoClose}s`,
-    diffView: diffView === "split" ? "Split" : "Unified",
+    diffView: diffView === "split" ? "Split" : "Stacked",
     theme: THEME_LABELS[themeName],
   };
   const cycleSetting = (rowKey: string): void => {
@@ -201,7 +201,7 @@ export function useSettingsDialog(params: {
       setAutoClose(next);
       persistAutoClose(next);
     } else if (rowKey === "diffView") {
-      const next: DiffViewMode = diffView === "unified" ? "split" : "unified";
+      const next: DiffViewMode = diffView === "stacked" ? "split" : "stacked";
 
       setDiffView(next);
       persistDiffView(next);

package/src/view-diff.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test";
-import { diffRowAnchor, diffRows } from "./view-diff";
+import { makeAnchor, type Annotation } from "@cueloop/schema";
+import { diffRowAnchor, diffRowBlocks, diffRows, fileRowRange, fileTargetMarks } from "./view-diff";
 
 const PATCH = `diff --git a/src/store.ts b/src/store.ts
 index 111..222 100644
@@ -67,3 +68,45 @@ describe("diffRowAnchor", () => {
     expect(anchor.suffix.length).toBeGreaterThan(0);
   });
 });
+
+describe("fileTargetMarks", () => {
+  // two files whose added line is byte-identical; a note on one must never mark the other
+  const TWO_FILE = `diff --git a/a.ts b/a.ts
+--- a/a.ts
++++ b/a.ts
+@@ -1,1 +1,2 @@
+ const keep = 0;
++const dup = 1;
+diff --git a/b.ts b/b.ts
+--- a/b.ts
++++ b/b.ts
+@@ -1,1 +1,2 @@
+ const keep = 0;
++const dup = 1;
+`;
+
+  test("a file-target note marks only its own file, never identical text in another", () => {
+    // Arrange - anchor the added line inside a.ts, file-relative like the controller does
+    const rows = diffRows(TWO_FILE);
+    const range = fileRowRange(rows, "a.ts")!;
+    const fileRows = rows.slice(range.start, range.end);
+    const addRelative = fileRows.findIndex((row) => row.kind === "add");
+    const quote = fileRows[addRelative]!.text.replace(/\n$/, "");
+    const anchor = makeAnchor(diffRowBlocks(fileRows), addRelative, 0, quote.length, addRelative);
+    const annotation: Annotation = {
+      id: "a1",
+      kind: "comment",
+      anchor,
+      target: { kind: "file", path: "a.ts", rev: "worktree" },
+      body: "note",
+      createdAt: "2026-01-01T00:00:00Z",
+    };
+
+    // Act
+    const marked = [...fileTargetMarks([annotation], rows).keys()];
+
+    // Assert - every marked row sits inside a.ts's range, and b.ts's identical line is untouched
+    expect(marked.length).toBeGreaterThan(0);
+    expect(marked.every((index) => index >= range.start && index < range.end)).toBe(true);
+  });
+});

package/src/view-diff.ts

@@ -7,6 +7,7 @@
 
 import { parsePatchFiles, type FileDiffMetadata } from "@pierre/diffs";
 import {
+  annotationTarget,
   isAddressed,
   resolveAnchor,
   type Annotation,
@@ -167,6 +168,86 @@ export function marksByRows(
   return marksByIndex;
 }
 
+/**
+ * A whole file rendered as context rows, so the diff sheet can show and annotate a plain file the
+ * same way it does a diff: every line is unchanged, numbered on both sides (the file view collapses
+ * that to one number). A trailing newline does not add an empty final row.
+ */
+export function fileContentsRows(path: string, contents: string): DiffRow[] {
+  const lines = contents.replace(/\n$/, "").split("\n");
+
+  return lines.map((text, index) => ({
+    kind: "ctx",
+    text,
+    file: path,
+    oldLine: index + 1,
+    newLine: index + 1,
+  }));
+}
+
+/** The contiguous row range a file occupies in the aggregate diff, or null when it is not shown. */
+export function fileRowRange(rows: DiffRow[], path: string): { start: number; end: number } | null {
+  const start = rows.findIndex((row) => row.file === path);
+
+  if (start === -1) return null;
+  let end = start;
+
+  while (end < rows.length && rows[end]!.file === path) end++;
+
+  return { start, end };
+}
+
+/**
+ * Marks for file-target notes on the aggregate working-tree diff. Each note resolves against only
+ * its own file's rows, then the row index and span shift back to aggregate coordinates - so a quote
+ * never attaches to the same text in another file or on the opposite diff side.
+ */
+export function fileTargetMarks(
+  annotations: Annotation[],
+  rows: DiffRow[],
+  focusedId?: string,
+): Map<number, Mark[]> {
+  const byFile = new Map<string, Annotation[]>();
+
+  for (const annotation of annotations) {
+    const target = annotationTarget(annotation);
+
+    if (target.kind !== "file") continue;
+    const forPath = byFile.get(target.path) ?? [];
+
+    forPath.push(annotation);
+    byFile.set(target.path, forPath);
+  }
+  const result = new Map<number, Mark[]>();
+
+  for (const [path, fileAnnotations] of byFile) {
+    const range = fileRowRange(rows, path);
+
+    if (!range) continue;
+    const base = range.start;
+    const fileMarks = marksByRows(fileAnnotations, rows.slice(range.start, range.end), focusedId);
+
+    for (const [relativeRow, marks] of fileMarks) {
+      result.set(
+        relativeRow + base,
+        marks.map((mark) =>
+          mark.span
+            ? {
+                ...mark,
+                span: {
+                  start: { ...mark.span.start, blockIndex: mark.span.start.blockIndex + base },
+                  end: { ...mark.span.end, blockIndex: mark.span.end.blockIndex + base },
+                },
+              }
+            : mark,
+        ),
+      );
+    }
+  }
+
+  return result;
+}
+
 /**
  * Comments per file path across the diff: each discussion counts its comments (root plus
  * replies) toward the file its span ends in. Feeds the changed-files tree and tab badges, so a

package/src/components/AnnotationCard.compose-rows.test.ts

@@ -1,49 +0,0 @@
-/**
- * The composer's auto-grow row math as a pure function: hard newlines and soft
- * wrapping both add rows, growth stops at the cap, and a non-positive width
- * (before layout is known) degrades to a hard-newline count. The live textarea
- * scrolls internally past the cap, so this only needs to get the growth curve
- * and the ceiling right.
- */
-
-import { describe, expect, test } from "bun:test";
-import { COMPOSE_MAX_ROWS, composeRowCount } from "./AnnotationCard";
-
-describe("composeRowCount", () => {
-  const width = 10;
-
-  test("empty and short text are one row", () => {
-    expect(composeRowCount("", width)).toBe(1);
-    expect(composeRowCount("hi", width)).toBe(1);
-    expect(composeRowCount("exactly-10", width)).toBe(1); // length 10 / width 10
-  });
-
-  test("hard newlines add rows", () => {
-    expect(composeRowCount("a\nb", width)).toBe(2);
-    expect(composeRowCount("a\nb\nc", width)).toBe(3);
-    // a blank trailing line still occupies a row
-    expect(composeRowCount("a\n", width)).toBe(2);
-  });
-
-  test("a soft-wrapped long line grows the box", () => {
-    expect(composeRowCount("a".repeat(11), width)).toBe(2); // ceil(11/10)
-    expect(composeRowCount("a".repeat(25), width)).toBe(3); // ceil(25/10)
-  });
-
-  test("wrapping and hard newlines combine", () => {
-    // 1 row for "short" plus ceil(21/10)=3 rows for the long line
-    expect(composeRowCount("short\n" + "b".repeat(21), width)).toBe(4);
-  });
-
-  test("growth is capped", () => {
-    expect(composeRowCount("a".repeat(100), width)).toBe(COMPOSE_MAX_ROWS);
-    expect(composeRowCount("l\ni\nn\ne\ns\nx", width)).toBe(COMPOSE_MAX_ROWS);
-    expect(composeRowCount("a\nb", width, 1)).toBe(1); // custom cap
-  });
-
-  test("a non-positive width counts hard newlines only, never divides by zero", () => {
-    expect(composeRowCount("a".repeat(100), 0)).toBe(1);
-    expect(composeRowCount("a\nb\nc", 0)).toBe(3);
-    expect(composeRowCount("a".repeat(100), -5)).toBe(1);
-  });
-});

package/src/components/AnnotationCard.stories.tsx

@@ -1,94 +0,0 @@
-import React from "react";
-import { DARK } from "../theme";
-import type { Story, StoryMeta } from "./story";
-import { AnnotationCard } from "./AnnotationCard";
-
-export const meta: StoryMeta = { title: "Cards/AnnotationCard" };
-
-const draftCallbacks = { onInput: () => {}, onSave: () => {}, onCancel: () => {} };
-
-export const CommentDraft: Story = {
-  render: () => (
-    <AnnotationCard
-      kind="comment"
-      quote="persists sessions"
-      draft={{ text: "Which daemon?", ...draftCallbacks }}
-    />
-  ),
-  expectedColors: [DARK.blue],
-};
-
-export const SavedSelected: Story = {
-  render: () => (
-    <AnnotationCard
-      kind="comment"
-      quote="persists sessions"
-      saved={{
-        body: "Which daemon owns this?",
-        isSelected: true,
-        isOrphan: false,
-        author: "me",
-        tone: DARK.blue,
-        editing: null,
-        onPress: () => {},
-      }}
-    />
-  ),
-  expectedColors: [DARK.blue],
-};
-
-export const SavedCollaborator: Story = {
-  render: () => (
-    <AnnotationCard
-      kind="comment"
-      quote="persists sessions"
-      saved={{
-        body: "Which daemon owns this?",
-        isSelected: false,
-        isOrphan: false,
-        author: "Priya",
-        tone: DARK.blue,
-        editing: null,
-        onPress: () => {},
-      }}
-    />
-  ),
-  expectedColors: [DARK.blue],
-};
-
-export const SavedOrphan: Story = {
-  render: () => (
-    <AnnotationCard
-      kind="comment"
-      quote="a removed passage"
-      saved={{
-        body: "The passage is gone.",
-        isSelected: false,
-        isOrphan: true,
-        author: "me",
-        tone: DARK.blue,
-        editing: null,
-        onPress: () => {},
-      }}
-    />
-  ),
-  expectedColors: [DARK.blue],
-};
-
-export const SavedEditing: Story = {
-  render: () => (
-    <AnnotationCard
-      kind="comment"
-      quote="move the store"
-      saved={{
-        body: "old body",
-        isSelected: true,
-        isOrphan: false,
-        author: "me",
-        tone: DARK.blue,
-        editing: { text: "new body", ...draftCallbacks },
-        onPress: () => {},
-      }}
-    />
-  ),
-};