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

package/src/components/agent-launcher.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AgentLauncher } from "./agent-launcher";
+import { fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "Chrome/AgentLauncher" };
+
+/** The launcher expects the rail's narrow, height-constrained column. */
+function RailFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ width: 40, height: 24, paddingLeft: 2, backgroundColor: DARK.panel }}>
+      {children}
+    </box>
+  );
+}
+
+export const Launcher: Story = {
+  render: () => (
+    <RailFrame>
+      <AgentLauncher session={fixturePlanSession()} onLaunchHarness={() => {}} theme={DARK} />
+    </RailFrame>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 40, height: 24 },
+};

package/src/components/agent-launcher.test.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DARK } from "../theme";
+import { fixturePlanSession } from "./story-fixtures";
+import { waitForText } from "../test-support";
+import { AgentLauncher, HARNESS_LAUNCHERS, planHandoffBriefing } from "./agent-launcher";
+
+describe("planHandoffBriefing", () => {
+  test("references the session by id and directs the agent to read then annotate, not rewrite", () => {
+    // Act
+    const briefing = planHandoffBriefing("ses_42");
+
+    // Assert
+    expect(briefing).toContain("cueloop session get ses_42");
+    expect(briefing).toContain("cueloop session annotate ses_42");
+    expect(briefing).toContain("Do not rewrite the plan");
+  });
+});
+
+describe("HARNESS_LAUNCHERS", () => {
+  test("carries the three harnesses with real binary commands (never the `cc` alias)", () => {
+    // Assert - `cc` resolves to the system C compiler when spawned on a PTY, so
+    // the Claude harness must run `claude`, the real binary, not the shell alias
+    expect(HARNESS_LAUNCHERS.map((harness) => harness.command)).toEqual(["claude", "pi", "codex"]);
+  });
+});
+
+describe("AgentLauncher", () => {
+  test("renders a button for every harness, in order", async () => {
+    // Arrange
+    const setup = await testRender(
+      <box style={{ width: 44, height: 20, flexDirection: "column" }}>
+        <AgentLauncher session={fixturePlanSession()} onLaunchHarness={() => {}} theme={DARK} />
+      </box>,
+      { width: 44, height: 20 },
+    );
+
+    // Act
+    await waitForText(setup, "Claude Code");
+    const frame = setup.captureCharFrame();
+
+    // Assert - all three launcher names present, in launch order
+    const names = HARNESS_LAUNCHERS.map((harness) => harness.name);
+    const positions = names.map((name) => frame.indexOf(name));
+
+    expect(positions.every((position) => position >= 0)).toBe(true);
+    expect(positions).toEqual(positions.toSorted((left, right) => left - right));
+  });
+});

package/src/components/agent-launcher.tsx

@@ -0,0 +1,149 @@
+/**
+ * The Agent rail launcher: bring-your-own review harness. Branded claude code /
+ * pi / codex cards that, on click, run that harness in a herdr split beside the
+ * review (see launchHarnessInSplit) so a reviewer can ask an agent about the plan
+ * without leaving the tab. A plan-context toggle seeds a briefing into the split.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import type { Thread } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+import {
+  embeddedTerminalAvailable,
+  registerTerminalPane,
+  type TerminalPaneRenderable,
+} from "./terminal-pane";
+
+registerTerminalPane();
+
+/** A running in-tab agent terminal, handed to the app so it can route keys and detach. */
+export interface AgentTerminalHandle {
+  write: (data: string) => void;
+  detach: () => void;
+}
+
+/** One launchable harness: its display name and the rail command. */
+export interface HarnessLauncher {
+  id: string;
+  name: string;
+  /** The shell command that starts the harness, run in the split. */
+  command: string;
+}
+
+/** Off-white for the running-terminal header, shared by every harness. */
+const HARNESS_HEADER_COLOR = "#e4e6ec";
+
+/** The bring-your-own harnesses, in launch order. The command is the real binary
+ *  name spawned on a PTY (not a shell alias, so `claude` - never `cc`, which is
+ *  the system C compiler). */
+export const HARNESS_LAUNCHERS: HarnessLauncher[] = [
+  { id: "claude", name: "Claude Code", command: "claude" },
+  { id: "pi", name: "Pi", command: "pi" },
+  { id: "codex", name: "OpenAI Codex", command: "codex" },
+];
+
+/** The briefing typed into a launched harness when the plan-context toggle is on. */
+export function planHandoffBriefing(sessionId: string): string {
+  return `Review this cueloop plan: read it with 'cueloop session get ${sessionId}', then comment with 'cueloop session annotate ${sessionId} --author me --quote "<exact span>" --body "<comment>"'. Do not rewrite the plan.`;
+}
+
+/** Props for the Agent tab body: the session under review plus the launch callbacks. */
+export interface AgentLauncherProps {
+  session: Thread;
+  /**
+   * Fallback launch when no embedded terminal ships for this platform: run the
+   * harness in a herdr split. seedText is the plan-context briefing.
+   */
+  onLaunchHarness: (command: string, seedText?: string) => void;
+  /** Notifies the app of the in-tab terminal handle (or null when detached) so it can route keys. */
+  onAgentTerminal?: (handle: AgentTerminalHandle | null) => void;
+  theme?: Theme;
+}
+
+/**
+ * The Agent tab body: branded launcher cards plus a plan-context toggle. Replaces
+ * the old dead agent/status/revision placeholder (now a dim footer line). When a
+ * prebuilt libghostty-vt ships for the platform, a picked harness runs embedded
+ * inside this tab; otherwise it falls back to a herdr split.
+ */
+export function AgentLauncher({
+  session,
+  onLaunchHarness,
+  onAgentTerminal,
+  theme,
+}: AgentLauncherProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const [seedContext, setSeedContext] = useState(true);
+  const [running, setRunning] = useState<{ harness: HarnessLauncher; seed?: string } | null>(null);
+  const paneRef = useRef<TerminalPaneRenderable | null>(null);
+
+  const launch = (harness: HarnessLauncher): void => {
+    const seed = seedContext ? planHandoffBriefing(session.id) : undefined;
+
+    if (embeddedTerminalAvailable()) setRunning({ harness, seed });
+    else onLaunchHarness(harness.command, seed);
+  };
+  const detach = (): void => {
+    // The reconciler's removeChild detaches the pane without destroying it, so
+    // kill the child + free the VT here or they leak. shutdown() is idempotent.
+    paneRef.current?.shutdown();
+    setRunning(null);
+  };
+
+  useEffect(() => {
+    if (!running) return onAgentTerminal?.(null);
+    onAgentTerminal?.({ write: (data) => paneRef.current?.write(data), detach });
+
+    return () => onAgentTerminal?.(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [running]);
+
+  if (running) {
+    return (
+      <box style={{ flexDirection: "column", flexGrow: 1 }}>
+        <box style={{ flexDirection: "row" }} onMouseUp={detach}>
+          <text fg={HARNESS_HEADER_COLOR}>{running.harness.name}</text>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>✕ detach</text>
+        </box>
+        {React.createElement("terminalPane", {
+          ref: paneRef,
+          command: running.harness.command,
+          cwd: session.artifact.meta.cwd ?? process.cwd(),
+          seedText: running.seed,
+          onExit: detach,
+          style: { flexGrow: 1 },
+        })}
+      </box>
+    );
+  }
+
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1 }}>
+      {HARNESS_LAUNCHERS.map((harness) => (
+        <box
+          key={harness.id}
+          style={{
+            flexDirection: "row",
+            height: 3,
+            border: true,
+            borderStyle: FRAME_BORDER_STYLE,
+            backgroundColor: "transparent",
+            borderColor: tokens.text,
+            paddingLeft: 1,
+            paddingRight: 1,
+          }}
+          onMouseUp={() => launch(harness)}
+        >
+          <text fg={tokens.textMuted}>{harness.name}</text>
+        </box>
+      ))}
+      <box style={{ flexDirection: "row" }} onMouseUp={() => setSeedContext((on) => !on)}>
+        <text fg={tokens.textDim}>plan context: </text>
+        <text fg={tokens.accent}>{seedContext ? "seed the plan" : "none"}</text>
+      </box>
+    </box>
+  );
+}

package/src/components/diff-content-view-layout.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, test } from "bun:test";
+import type { Annotation } from "@cueloop/schema";
+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 { coloredRowSpans } from "./diff-content-view-layout";
+
+function row(kind: DiffRow["kind"], text: string, extra: Partial<DiffRow> = {}): DiffRow {
+  return { kind, text, file: "a.ts", ...extra };
+}
+
+function annotation(id: string, anchor: Annotation["anchor"]): Annotation {
+  return { id, kind: "comment", body: "note", anchor, createdAt: "2026-01-01T00:00:00Z" };
+}
+
+describe("diffRowText", () => {
+  test("strips the trailing newline the patch carries", () => {
+    // Arrange / Act / Assert
+    expect(diffRowText(row("add", "const x = 1;\n"))).toBe("const x = 1;");
+  });
+});
+
+describe("fileChangeCounts", () => {
+  test("tallies added and removed lines per file, ignoring context and headers", () => {
+    // Arrange
+    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 counts = fileChangeCounts(rows);
+
+    // Assert
+    expect(counts.get("a.ts")).toEqual({ additions: 2, deletions: 1 });
+    expect(counts.get("b.ts")).toEqual({ additions: 1, deletions: 0 });
+  });
+});
+
+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 marks = marksByRows(
+      [annotation("a1", { quote: "return items;", prefix: "", suffix: "" })],
+      rows,
+    );
+
+    // Assert
+    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,
+    );
+
+    // 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("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 marks = marksByRows(
+      [annotation("a1", { quote: "keep", prefix: "", suffix: "" })],
+      rows,
+      "a1",
+    );
+
+    // Assert
+    expect(marks.get(2)![0]!.role).toBe("mark-focus");
+  });
+});
+
+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 counts = commentCountsByFile(session, rows);
+
+    // Assert
+    expect(counts.get("a.ts")).toBe(2);
+    expect(counts.get("b.ts")).toBe(1);
+  });
+});
+
+describe("coloredRowSpans", () => {
+  test("a changed word keeps the diff color while unchanged text dims", () => {
+    // Arrange - "old" is the change, " tail" unchanged, on a modified line
+    const runs: IntralineRun[] = [
+      { text: "old", changed: true },
+      { text: " tail", changed: false },
+    ];
+
+    // Act
+    const spans = coloredRowSpans("old tail", runs, undefined, DARK.deletedForeground, DARK);
+
+    // Assert
+    expect(spans).toEqual([
+      { text: "old", foreground: DARK.deletedForeground },
+      { text: " tail", foreground: DARK.textDim },
+    ]);
+  });
+
+  test("syntax color applies to unchanged text when there is no intra-line run", () => {
+    // Arrange - a keyword span over the whole word, no intra-line runs
+    const syntax: SyntaxSpan[] = [{ start: 0, end: 6, group: "keyword" }];
+
+    // Act
+    const spans = coloredRowSpans("return", undefined, syntax, DARK.textMuted, DARK);
+
+    // Assert
+    expect(spans).toEqual([{ text: "return", foreground: DARK.accent }]);
+  });
+});

package/src/components/diff-content-view-layout.ts

@@ -0,0 +1,84 @@
+/**
+ * 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). DiffContentView.tsx paints marks and the caret over these per character.
+ */
+
+import type { Theme } from "../theme";
+import type { IntralineRun } from "../diff-intraline";
+import type { SyntaxSpan } from "../diff-syntax";
+import { colorForSyntaxGroup } from "./syntax-highlight";
+
+/** One rendered span of a row: its text and its resolved foreground color. */
+export interface ColoredSpan {
+  text: string;
+  foreground: string;
+}
+
+/**
+ * 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
+ * dim token on the unchanged part of a modified line or the row's base color.
+ * Adjacent same-color characters coalesce so a row stays a few spans.
+ */
+export function coloredRowSpans(
+  text: string,
+  intralineRuns: IntralineRun[] | undefined,
+  syntaxSpans: SyntaxSpan[] | undefined,
+  baseColor: string,
+  tokens: Theme,
+): ColoredSpan[] {
+  const changed = changedColumns(text.length, intralineRuns);
+  const syntaxColorByColumn = syntaxColorColumns(text.length, syntaxSpans, tokens);
+  const isModifiedLine = intralineRuns !== undefined;
+
+  const spans: ColoredSpan[] = [];
+
+  for (let column = 0; column < text.length; column++) {
+    const color = changed[column]
+      ? baseColor
+      : (syntaxColorByColumn[column] ?? (isModifiedLine ? tokens.textDim : baseColor));
+    const previous = spans[spans.length - 1];
+
+    if (previous && previous.foreground === color) previous.text += text[column];
+    else spans.push({ text: text[column]!, foreground: color });
+  }
+
+  return spans;
+}
+
+/** Which columns are the intra-line change on a modified line. */
+function changedColumns(length: number, intralineRuns: IntralineRun[] | undefined): boolean[] {
+  const changed = Array.from({ length }, () => false);
+
+  if (!intralineRuns) return changed;
+  let offset = 0;
+
+  for (const run of intralineRuns) {
+    if (run.changed)
+      for (let index = 0; index < run.text.length; index++) changed[offset + index] = true;
+    offset += run.text.length;
+  }
+
+  return changed;
+}
+
+/** The syntax color per column, or undefined where a column has no token. */
+function syntaxColorColumns(
+  length: number,
+  syntaxSpans: SyntaxSpan[] | undefined,
+  tokens: Theme,
+): Array<string | undefined> {
+  const colors: Array<string | undefined> = Array.from({ length }, () => undefined);
+
+  for (const span of syntaxSpans ?? []) {
+    const color = colorForSyntaxGroup(span.group, tokens);
+
+    if (!color) continue;
+    for (let column = span.start; column < span.end && column < length; column++) {
+      colors[column] = color;
+    }
+  }
+
+  return colors;
+}

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);
+  });
+});