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

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: () => {},
-      }}
-    />
-  ),
-};

package/src/components/AnnotationCard.tsx

@@ -1,250 +0,0 @@
-/**
- * One annotation component in three modes: a draft composer (bordered card
- * inline in the document flow), a saved rail card, and the rail card editing
- * its body in place. Compose, saved, and re-edit share this rendering path,
- * so the kind-color and quote treatment can never drift between them.
- *
- * Bodies are multiline: the composer is a textarea (wrap, undo/redo). Plain ⏎
- * stays the save key while ⌥/Alt+⏎ and shift+⏎ insert a new line (the Slack
- * convention). The box auto-grows with the wrapped text up to a cap, then
- * scrolls internally.
- */
-
-import React, { useEffect, useRef, useState } from "react";
-import type { KeyBinding, TextareaRenderable } from "@opentui/core";
-import type { Theme } from "../theme";
-import { useComponentTheme } from "./theme-context";
-import { Card, cardHeight } from "./primitives/Card";
-import { FRAME_BORDER_STYLE } from "./primitives/frame";
-import { Button } from "./primitives/Button";
-import { Toolbar } from "./primitives/Toolbar";
-import { truncateToSingleLine } from "./truncate-text";
-
-export interface AnnotationDraft {
-  text: string;
-  onInput: (text: string) => void;
-  onSave: () => void;
-  onCancel: () => void;
-  /**
-   * When set, ⏎ in the textarea saves through this handler. The plan and diff
-   * composers leave it unset because the app keymap owns ⏎ there; the prototype
-   * composer sets it because the app keymap is suppressed while it is open.
-   */
-  onSubmit?: () => void;
-}
-
-export interface AnnotationSaved {
-  body: string;
-  isSelected: boolean;
-  isOrphan: boolean;
-  /** Border-title author: a collaborator's display name, or "me" for the reviewer's own note. */
-  author: string;
-  /** Border + title color for this card (comment cards read blue). */
-  tone: string;
-  /** Non-null while the card body is being rewritten in place. */
-  editing: AnnotationDraft | null;
-  onPress: () => void;
-}
-
-export interface AnnotationCardProps {
-  id?: string;
-  kind: string;
-  quote: string;
-  draft?: AnnotationDraft;
-  saved?: AnnotationSaved;
-  theme?: Theme;
-}
-
-/**
- * ⏎ submits (which keeps the textarea from inserting its default newline; the
- * grammar owns the actual save). ⌥/Alt+⏎ and shift+⏎ insert a newline so the
- * body can grow multiline without leaving the composer.
- *
- * Option/Alt reaches a binding as `meta`, not `option`: a binding key here is
- * built from name+ctrl+shift+meta+super only, so the newline binding matches on
- * `meta`. This also overrides the textarea default that maps meta+⏎ to submit.
- */
-const COMPOSE_KEY_BINDINGS: KeyBinding[] = [
-  { name: "return", action: "submit" },
-  { name: "return", meta: true, action: "newline" },
-  { name: "return", shift: true, action: "newline" },
-];
-
-/** The composer never grows past this many rows; beyond it the textarea scrolls. */
-export const COMPOSE_MAX_ROWS = 4;
-
-/**
- * Visible row count for the composer, so a soft-wrapped long line grows the box
- * just like a hard newline does. Each logical line takes `ceil(length /
- * contentWidth)` visual rows (at least one), summed over the hard-newline lines
- * and capped. A non-positive width (before layout is known) counts hard
- * newlines only. Beyond the cap the textarea scrolls internally and keeps the
- * caret line in view.
- */
-export function composeRowCount(
-  text: string,
-  contentWidth: number,
-  cap: number = COMPOSE_MAX_ROWS,
-): number {
-  const usableWidth = contentWidth > 0 ? contentWidth : Number.MAX_SAFE_INTEGER;
-  let visualRowCount = 0;
-
-  for (const line of text.split("\n")) {
-    visualRowCount += Math.max(1, Math.ceil(line.length / usableWidth));
-  }
-
-  return Math.min(cap, Math.max(1, visualRowCount));
-}
-
-function DraftEditor({
-  draft,
-  rows,
-  onRowsChange,
-  theme,
-}: {
-  draft: AnnotationDraft;
-  /** Current visible height in rows; owned by the parent so the card frame agrees. */
-  rows: number;
-  onRowsChange: (rows: number) => void;
-  theme?: Theme;
-}): React.ReactNode {
-  const tokens = useComponentTheme(theme);
-  const editorRef = useRef<TextareaRenderable | null>(null);
-  // re-edit opens with the caret after the existing body, like a text field
-  const initialTextLength = useRef(draft.text.length);
-
-  useEffect(() => {
-    const editor = editorRef.current;
-
-    if (!editor) return;
-    editor.cursorOffset = initialTextLength.current;
-    // the box is laid out now, so its width is known: size to the wrapped body
-    onRowsChange(composeRowCount(editor.plainText, editor.width));
-  }, [onRowsChange]);
-
-  return (
-    <>
-      <textarea
-        ref={editorRef}
-        focused
-        initialValue={draft.text}
-        placeholder="write a note..."
-        keyBindings={COMPOSE_KEY_BINDINGS}
-        {...(draft.onSubmit ? { onSubmit: draft.onSubmit } : {})}
-        onContentChange={() => {
-          const editor = editorRef.current;
-
-          if (!editor) return;
-          draft.onInput(editor.plainText);
-          onRowsChange(composeRowCount(editor.plainText, editor.width));
-        }}
-        style={{
-          height: rows,
-          backgroundColor: "transparent",
-          focusedBackgroundColor: "transparent",
-          textColor: tokens.text,
-          focusedTextColor: tokens.text,
-        }}
-      />
-      <Toolbar>
-        <Button variant="solid" marginRight={2} onPress={draft.onSave} theme={theme}>
-          {" Save "}
-        </Button>
-        <Button onPress={draft.onCancel} theme={theme}>
-          {" Cancel "}
-        </Button>
-      </Toolbar>
-    </>
-  );
-}
-
-export function AnnotationCard({
-  id,
-  kind,
-  quote,
-  draft,
-  saved,
-  theme,
-}: AnnotationCardProps): React.ReactNode {
-  const tokens = useComponentTheme(theme);
-  // the composer wears the same blue as the saved comment card it becomes
-  const kindColor = tokens.blue;
-  const activeDraft = draft ?? saved?.editing ?? null;
-  // The composer's visible height, grown from the wrapped text. It is shared
-  // with the card frame (contentRows) so the border never clips the textarea
-  // or the toolbar. Seeded from hard newlines, then corrected once the mounted
-  // textarea reports its measured width.
-  const [editorRowCount, setEditorRowCount] = useState(() =>
-    // Width 0 is the "layout not known yet" contract: count hard newlines only,
-    // until the mounted textarea reports its measured width below.
-    composeRowCount(activeDraft?.text ?? "", 0),
-  );
-
-  if (draft) {
-    const primitive = "comment on";
-
-    return (
-      <Card
-        title={` ${primitive} "${truncateToSingleLine(quote, 20)}" `}
-        contentRows={editorRowCount + 1}
-        borderColor={kindColor}
-        backgroundColor="transparent"
-        theme={theme}
-      >
-        <DraftEditor
-          draft={draft}
-          rows={editorRowCount}
-          onRowsChange={setEditorRowCount}
-          theme={theme}
-        />
-      </Card>
-    );
-  }
-  const card = saved!;
-  // border = "what + who" (+ an orphaned flag when the anchor no longer resolves)
-  const flags = card.isOrphan ? ["ORPHANED"] : [];
-  const title = ` ${[kind.toUpperCase(), card.author, ...flags].join(" · ")} `;
-  // every saved card is bordered, so the border + side padding always eat this width
-  const borderInset = 4;
-  // a bordered box must declare a height or it collapses: quote + body, or the editor
-  const contentRows = card.editing ? editorRowCount + 2 : 2;
-
-  return (
-    <box
-      id={id}
-      title={title}
-      style={{
-        flexDirection: "column",
-        height: cardHeight(contentRows),
-        border: true,
-        borderStyle: FRAME_BORDER_STYLE,
-        // the border (and its title) always wears the card's tone - salmon for
-        // own notes, blue for a collaborator's; the card background stays
-        // transparent so it sits flat on the terminal theme. Selection reads
-        // from the quote line taking the card's tone (below) and from the
-        // matching text highlight in the document.
-        borderColor: card.tone,
-        backgroundColor: "transparent",
-        paddingLeft: 1,
-        paddingRight: 1,
-      }}
-      onMouseUp={card.onPress}
-    >
-      <text
-        fg={card.isSelected ? card.tone : tokens.textDim}
-      >{`"${truncateToSingleLine(quote, 26 - borderInset)}"`}</text>
-      {card.editing ? (
-        <DraftEditor
-          draft={card.editing}
-          rows={editorRowCount}
-          onRowsChange={setEditorRowCount}
-          theme={theme}
-        />
-      ) : (
-        <text fg={card.isOrphan ? tokens.textDim : tokens.textMuted}>
-          {truncateToSingleLine(card.body, 28 - borderInset)}
-        </text>
-      )}
-    </box>
-  );
-}

package/src/components/MarkerPopover.stories.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import { DARK } from "../theme";
-import { DEFAULT_QUICK_ACTIONS } from "../config";
-import type { Story, StoryMeta } from "./story";
-import { MarkerPopover } from "./MarkerPopover";
-
-export const meta: StoryMeta = { title: "Overlays/MarkerPopover" };
-
-const callbacks = {
-  onComment: () => {},
-  onCut: () => {},
-  onOpenActions: () => {},
-  onClose: () => {},
-  onPickAction: () => {},
-  onBack: () => {},
-};
-
-export const Toolbar: Story = {
-  render: () => (
-    <MarkerPopover
-      view="toolbar"
-      actions={DEFAULT_QUICK_ACTIONS}
-      actionIndex={0}
-      canCut
-      {...callbacks}
-    />
-  ),
-  expectedColors: [DARK.accent, DARK.red, DARK.textMuted, DARK.textDim],
-  size: { width: 60, height: 4 },
-};
-
-export const ToolbarNoCut: Story = {
-  render: () => (
-    <MarkerPopover
-      view="toolbar"
-      actions={DEFAULT_QUICK_ACTIONS}
-      actionIndex={0}
-      canCut={false}
-      {...callbacks}
-    />
-  ),
-  expectedColors: [DARK.accent, DARK.textMuted, DARK.textDim],
-  size: { width: 60, height: 4 },
-};
-
-export const ActionsList: Story = {
-  render: () => (
-    <MarkerPopover
-      view="actions"
-      actions={DEFAULT_QUICK_ACTIONS}
-      actionIndex={2}
-      canCut
-      {...callbacks}
-    />
-  ),
-  expectedColors: [DARK.accent, DARK.textMuted, DARK.textDim],
-  size: { width: 60, height: 8 },
-};