@cueloop/client 0.1.0-alpha.7 → 0.1.0-alpha.71

package/src/attribution.ts

@@ -0,0 +1,42 @@
+/**
+ * Attribution labels for annotations. An annotation's `author` is an identity
+ * id (an SSH fingerprint today). The rail resolves it against the share's
+ * participant registry and the planner's local rename overrides; ADR 0006.
+ */
+
+import type { Identity } from "@cueloop/schema";
+
+const FINGERPRINT_PREFIX = "SHA256:";
+
+/** Shown for a known participant who chose not to give a name. */
+export const ANONYMOUS_LABEL = "-- anonymous --";
+
+/** A short, stable handle from a raw author id when no name is known. */
+export function shortHandle(authorId: string): string {
+  const base = authorId.startsWith(FINGERPRINT_PREFIX)
+    ? authorId.slice(FINGERPRINT_PREFIX.length)
+    : authorId;
+
+  return base.slice(0, 8) || authorId;
+}
+
+/**
+ * The rail label for an author id: a local rename wins, then the collaborator's
+ * own name, then anonymous for a known-but-unnamed participant, then a short
+ * handle for an id we hold no identity for.
+ */
+export function resolveDisplayName(
+  authorId: string,
+  participants: Identity[] | undefined,
+  overrides: Record<string, string>,
+): string {
+  const override = overrides[authorId];
+
+  if (override) return override;
+  const identity = participants?.find((participant) => participant.id === authorId);
+
+  if (identity?.name) return identity.name;
+  if (identity) return ANONYMOUS_LABEL;
+
+  return shortHandle(authorId);
+}

package/src/clipboard.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, test } from "bun:test";
+import { clipboardCommands } from "./clipboard";
+
+describe(clipboardCommands, () => {
+  test("uses pbcopy on macOS", () => {
+    // Assert
+    expect(clipboardCommands("darwin")).toEqual([["pbcopy"]]);
+  });
+
+  test("uses clip.exe on Windows", () => {
+    // Assert
+    expect(clipboardCommands("win32")).toEqual([["clip.exe"]]);
+  });
+
+  test("prefers wayland, then X11 tools on Linux", () => {
+    // Act
+    const commands = clipboardCommands("linux");
+
+    // Assert
+    expect(commands[0]).toEqual(["wl-copy"]);
+    expect(commands.map((command) => command[0])).toEqual(["wl-copy", "xclip", "xsel"]);
+  });
+});

package/src/clipboard.ts

@@ -0,0 +1,33 @@
+/**
+ * Best-effort system clipboard. Each platform has its own tool; we try them in
+ * order and report whether one worked, so the caller can fall back to printing
+ * the line (the over-SSH case, where no clipboard tool exists). Mirrors how
+ * herdr confirms a copy.
+ */
+
+/** The clipboard-write commands to try, most-preferred first, for this platform. */
+export function clipboardCommands(platform: NodeJS.Platform = process.platform): string[][] {
+  if (platform === "darwin") return [["pbcopy"]];
+  if (platform === "win32") return [["clip.exe"]];
+
+  return [["wl-copy"], ["xclip", "-selection", "clipboard"], ["xsel", "--clipboard", "--input"]];
+}
+
+/** Copy `text` to the clipboard; false when no tool is available or all fail. */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  for (const command of clipboardCommands()) {
+    try {
+      const proc = Bun.spawn(command, {
+        stdin: Buffer.from(text),
+        stdout: "ignore",
+        stderr: "ignore",
+      });
+
+      if ((await proc.exited) === 0) return true;
+    } catch {
+      // tool not installed - try the next one
+    }
+  }
+
+  return false;
+}

package/src/components/AnnotatableFileView.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { SCHEMA_VERSION, type Thread } from "@cueloop/schema";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AnnotatableFileView } from "./AnnotatableFileView";
+
+export const meta: StoryMeta = { title: "Surfaces/AnnotatableFileView" };
+
+const SAMPLE = `export function add(a: number, b: number): number {\n  return a + b;\n}\n`;
+
+const SESSION: Thread = {
+  schemaVersion: SCHEMA_VERSION,
+  id: "ses_story",
+  workspace: { repoRoot: "/repo", branch: "main" },
+  artifact: { type: "plan", content: "# Plan\n", meta: {} },
+  revisions: [{ revision: 1, content: "# Plan\n", submittedAt: "2026-01-01T00:00:00Z" }],
+  annotations: [],
+  verdict: null,
+  status: "pending",
+  createdAt: "2026-01-01T00:00:00Z",
+};
+
+const noop = (): void => {};
+
+export const Loaded: Story = {
+  render: () => (
+    <AnnotatableFileView
+      path="src/add.ts"
+      loadContents={() => Promise.resolve(SAMPLE)}
+      session={SESSION}
+      quickActions={[]}
+      observer={false}
+      onAddComment={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 60, height: 12 },
+};

package/src/components/AnnotatableFileView.test.tsx

@@ -0,0 +1,102 @@
+/**
+ * A project file is its own annotation surface: selecting a line and typing leaves a comment whose
+ * anchor quotes that file line, handed up as an Anchor the app persists with a file target.
+ */
+
+import { describe, expect, mock, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { SCHEMA_VERSION, type Anchor, type Thread } from "@cueloop/schema";
+import { AnnotatableFileView } from "./AnnotatableFileView";
+import { DARK } from "../theme";
+import { dragText, typeText, pressKey, waitForText } from "../test-support";
+
+const SAMPLE = "export function add(a: number, b: number) {\n  return a + b;\n}\n";
+
+function planSession(): Thread {
+  return {
+    schemaVersion: SCHEMA_VERSION,
+    id: "ses_plan",
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: { type: "plan", content: "# Plan\n", meta: {} },
+    revisions: [{ revision: 1, content: "# Plan\n", submittedAt: "2026-01-01T00:00:00Z" }],
+    annotations: [],
+    verdict: null,
+    status: "pending",
+    createdAt: "2026-01-01T00:00:00Z",
+  };
+}
+
+const noop = (): void => {};
+
+describe("AnnotatableFileView", () => {
+  test("commenting a file line hands up an anchor that quotes the line", async () => {
+    const onAddComment = mock((_anchor: Anchor, _body: string) => {});
+    const setup = await testRender(
+      <AnnotatableFileView
+        path="src/add.ts"
+        loadContents={() => Promise.resolve(SAMPLE)}
+        session={planSession()}
+        quickActions={[]}
+        observer={false}
+        onAddComment={onAddComment}
+        onReply={noop}
+        onUpdateAnnotation={noop}
+        onExit={noop}
+        theme={DARK}
+      />,
+      { width: 64, height: 12 },
+    );
+
+    // Act - select the middle line, type a comment, send it
+    await waitForText(setup, "return a + b");
+    await dragText(setup, "return a + b", "return a + b", "return a + b".length);
+    await typeText(setup, "why not reduce?");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    // Assert - the surface built an anchor quoting the file line and handed it up with the body
+    expect(onAddComment).toHaveBeenCalled();
+    const [anchor, body] = onAddComment.mock.calls[0]!;
+    expect(anchor.quote).toContain("return a + b");
+    expect(body).toContain("why not reduce?");
+
+    setup.renderer.destroy();
+  });
+
+  test("a head-side (deleted-line) note never rebinds onto the current file", async () => {
+    const session = planSession();
+    // a note left on the removed side of this file: the worktree view must not show it
+    session.annotations = [
+      {
+        id: "h1",
+        kind: "comment",
+        anchor: { quote: "return a + b", prefix: "", suffix: "" },
+        target: { kind: "file", path: "src/add.ts", rev: "head" },
+        body: "deleted-side note",
+        createdAt: "2026-01-01T00:00:00Z",
+      },
+    ];
+    const setup = await testRender(
+      <AnnotatableFileView
+        path="src/add.ts"
+        loadContents={() => Promise.resolve(SAMPLE)}
+        session={session}
+        quickActions={[]}
+        observer={false}
+        onAddComment={noop}
+        onReply={noop}
+        onUpdateAnnotation={noop}
+        onExit={noop}
+        theme={DARK}
+      />,
+      { width: 64, height: 12 },
+    );
+
+    await waitForText(setup, "return a + b");
+
+    // Assert - the current file shows, but the head-side note is not attached to it
+    expect(setup.captureCharFrame()).not.toContain("deleted-side note");
+
+    setup.renderer.destroy();
+  });
+});

package/src/components/AnnotatableFileView.tsx

@@ -0,0 +1,126 @@
+// A project file shown as its own annotatable surface: the file's lines render through the diff
+// sheet as context rows (one line-number gutter, no +/- sign), so selecting text leaves a comment
+// anchored to the file exactly as a plan or diff comment is. Used where a review session exists to
+// hold the notes; the bare-launch welcome shell uses the read-only FileContentsView instead.
+
+import React, { useEffect, useRef, useState } from "react";
+import { makeAnchor, annotationTarget, type Anchor, type Thread } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { useComponentTheme } from "./theme-context";
+import { DiffContentView } from "./DiffContentView";
+import { diffRowBlocks, fileContentsRows, marksByRows } from "../view-diff";
+
+export interface AnnotatableFileViewProps {
+  path: string;
+  loadContents: (path: string) => Promise<string | null>;
+  session: Thread;
+  quickActions: QuickAction[];
+  observer: boolean;
+  resolved?: boolean;
+  suspended?: boolean;
+  focusedAnnotationId?: string;
+  onFocusAnnotation?: (annotationId: string | undefined) => void;
+  onComposingChange?: (composing: boolean) => void;
+  onCursorChange?: (rowIndex: number) => void;
+  onObserverBlocked?: (reason: "observer" | "resolved") => void;
+  /** Persist a comment on this file; the view built the anchor against the file's own lines. */
+  onAddComment: (anchor: Anchor, body: string) => void;
+  onReply: (rootAnnotationId: string, body: string) => void;
+  onUpdateAnnotation: (id: string, body: string) => void;
+  onExit: () => void;
+  theme?: Theme;
+}
+
+/** A finished read for a specific path; `lines` is null when the file could not be read. */
+interface FileLoad {
+  path: string;
+  lines: string[] | null;
+}
+
+export function AnnotatableFileView(props: AnnotatableFileViewProps): React.ReactNode {
+  const tokens = useComponentTheme(props.theme);
+  const [loaded, setLoaded] = useState<FileLoad | null>(null);
+  const loadRef = useRef(props.loadContents);
+  useEffect(() => {
+    loadRef.current = props.loadContents;
+  });
+
+  useEffect(() => {
+    let alive = true;
+    void loadRef.current(props.path).then(
+      (contents) => {
+        if (alive)
+          setLoaded({ path: props.path, lines: contents === null ? null : contents.split("\n") });
+      },
+      () => {
+        if (alive) setLoaded({ path: props.path, lines: null });
+      },
+    );
+
+    return () => {
+      alive = false;
+    };
+  }, [props.path]);
+
+  if (loaded === null || loaded.path !== props.path) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>loading...</text>
+      </box>
+    );
+  }
+  if (loaded.lines === null) {
+    return (
+      <box
+        style={{ flexGrow: 1, alignItems: "center", justifyContent: "center", paddingBottom: 2 }}
+      >
+        <text fg={tokens.textDim}>File deleted</text>
+      </box>
+    );
+  }
+
+  const rows = fileContentsRows(props.path, loaded.lines.join("\n"));
+  // the file's worktree notes: these rows are the current file, so a head-side (deleted-line) note
+  // must stay orphaned here rather than rebind to similar surviving text
+  const fileNotes = props.session.annotations.filter((annotation) => {
+    const target = annotationTarget(annotation);
+
+    return target.kind === "file" && target.path === props.path && target.rev === "worktree";
+  });
+
+  return (
+    <DiffContentView
+      rows={rows}
+      session={props.session}
+      marks={marksByRows(fileNotes, rows, props.focusedAnnotationId)}
+      quickActions={props.quickActions}
+      observer={props.observer}
+      commentsEnabled
+      resolved={props.resolved}
+      suspended={props.suspended}
+      fileView
+      onComposingChange={props.onComposingChange}
+      onObserverBlocked={props.onObserverBlocked}
+      onCursorChange={props.onCursorChange}
+      focusedAnnotationId={props.focusedAnnotationId}
+      onFocusAnnotation={props.onFocusAnnotation}
+      onAnnotate={(span, body) =>
+        props.onAddComment(
+          makeAnchor(
+            diffRowBlocks(rows),
+            span.start.blockIndex,
+            span.start.char,
+            span.end.char,
+            span.end.blockIndex,
+          ),
+          body,
+        )
+      }
+      onReply={props.onReply}
+      onUpdateAnnotation={props.onUpdateAnnotation}
+      onExit={props.onExit}
+      theme={props.theme}
+    />
+  );
+}

package/src/components/AnnotationCards.stories.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import type { Annotation } from "@cueloop/schema";
+import { DARK } from "../theme";
+import { annotationPaletteFor } from "../annotation-palette";
+import { slashItemsFrom } from "../slash-palette";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { CommentRow, ComposerPalette, DiscussionCard } from "./AnnotationCards";
+
+export const meta: StoryMeta = { title: "Chrome/AnnotationCards" };
+
+const palette = annotationPaletteFor(DARK);
+
+function annotation(id: string, body: string, author?: string): Annotation {
+  const comment: Annotation = {
+    id,
+    kind: "comment",
+    anchor: { quote: "the daemon", prefix: "", suffix: "" },
+    body,
+    createdAt: "2026-09-07T10:00:00.000Z",
+  };
+
+  if (author !== undefined) comment.author = author;
+
+  return comment;
+}
+
+// A two-voice discussion: the owner's comment then a collaborator's reply, each
+// segment wearing its own accent edge.
+export const TwoVoices: Story = {
+  render: () => (
+    <DiscussionCard
+      tokens={DARK}
+      segments={[
+        {
+          color: palette.cardEdge,
+          node: <CommentRow annotation={annotation("a", "Which daemon?")} tokens={DARK} />,
+        },
+        {
+          color: DARK.text,
+          node: (
+            <CommentRow
+              annotation={annotation("b", "The one the CLI spawns.", "fp:collab")}
+              tokens={DARK}
+            />
+          ),
+        },
+      ]}
+    />
+  ),
+  expectedColors: [palette.cardEdge, DARK.text],
+  size: { width: 60, height: 8 },
+};
+
+export const FocusedCard: Story = {
+  render: () => (
+    <DiscussionCard
+      focused
+      tokens={DARK}
+      segments={[
+        {
+          color: palette.cardEdge,
+          node: (
+            <CommentRow annotation={annotation("a", "Needs an eviction story.")} tokens={DARK} />
+          ),
+        },
+      ]}
+    />
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 60, height: 6 },
+};
+
+// The palette a leading "/" opens under the composer, with the second item selected.
+export const SlashPaletteOpen: Story = {
+  render: () => (
+    <ComposerPalette
+      slashActive
+      slashItems={slashItemsFrom(DEFAULT_QUICK_ACTIONS)}
+      slashIndex={1}
+      inline={null}
+      tokens={DARK}
+    />
+  ),
+  expectedColors: [DARK.accent, DARK.textDim],
+  size: { width: 90, height: 8 },
+};