@cueloop/client 0.1.0-alpha.63 → 0.1.0-alpha.65

package/src/tree-view.test.ts

@@ -0,0 +1,128 @@
+import { describe, expect, test } from "bun:test";
+import {
+  appendEntry,
+  createBranch,
+  historyFromLinear,
+  labelTip,
+  navigateTo,
+  switchBranch,
+  tipOf,
+  type SessionHistory,
+} from "@cueloop/schema";
+import { entryTarget, treeRows } from "./tree-view";
+
+const AT = "2026-09-01T10:00:00.000Z";
+const LATER = "2026-09-01T11:00:00.000Z";
+
+/** rev1 -> comment a1 on main; a branch "alt" off a1 with its own comment; main continues with rev2. */
+function forked(): SessionHistory {
+  let history = historyFromLinear({
+    id: "ses_1",
+    revisions: [{ revision: 1, content: "v1", submittedAt: AT }],
+    annotations: [],
+    verdict: null,
+    createdAt: AT,
+  });
+
+  history = appendEntry(history, { type: "comment", annotationId: "a1", createdAt: AT }).history;
+  history = labelTip(history, "start");
+  history = createBranch(history, "alt");
+  history = appendEntry(history, { type: "comment", annotationId: "b1", createdAt: AT }).history;
+  history = switchBranch(history, "main");
+  history = appendEntry(history, {
+    type: "revision",
+    by: "agent",
+    content: "v2",
+    createdAt: LATER,
+  }).history;
+
+  return history;
+}
+
+describe("treeRows", () => {
+  test("the current branch is the trunk; other segments indent under the entry they grew from", () => {
+    // Act
+    const rows = treeRows(forked());
+
+    // Assert: rev1, a1 (labelled, alt hangs off it), the alt comment indented, then rev2 as main's tip
+    expect(rows.map((row) => [row.depth, row.text, row.onPath])).toEqual([
+      [0, "revision 1", true],
+      [0, "comment", true],
+      [1, "comment", false],
+      [0, "revision 2", true],
+    ]);
+    expect(rows[1]!.label).toBe("start");
+    expect(rows[2]!.tips).toEqual(["alt"]);
+    expect(rows[3]!.tips).toEqual(["main"]);
+    expect(rows[3]!.isCurrentTip).toBe(true);
+  });
+
+  test("on the other branch the trunk follows it and main's continuation indents", () => {
+    // Act
+    const rows = treeRows(switchBranch(forked(), "alt"));
+
+    // Assert
+    expect(rows.map((row) => [row.depth, row.text, row.onPath])).toEqual([
+      [0, "revision 1", true],
+      [0, "comment", true],
+      [1, "revision 2", false],
+      [0, "comment", true],
+    ]);
+    expect(rows[3]!.isCurrentTip).toBe(true);
+  });
+
+  test("a branch summary reads as a return with its text", () => {
+    // Arrange
+    const history = navigateTo(forked(), forked().entries[0]!.id, { summary: "too early" });
+
+    // Act
+    const rows = treeRows(history);
+
+    // Assert: the summary hangs under rev1 as the trunk, the abandoned segment indents
+    expect(rows.find((row) => row.glyph === "↩")?.text).toBe('"too early"');
+    expect(rows.find((row) => row.glyph === "↩")?.isCurrentTip).toBe(true);
+  });
+});
+
+describe("entryTarget", () => {
+  test("the tip is here, another tip is a switch, an ancestor is a navigate on its branch", () => {
+    // Arrange
+    const history = forked();
+    const [rev1, a1, altComment, rev2] = history.entries;
+
+    // Assert
+    expect(entryTarget(history, rev2!.id)).toEqual({ kind: "here" });
+    expect(entryTarget(history, altComment!.id)).toEqual({ kind: "switch", branch: "alt" });
+    expect(entryTarget(history, a1!.id)).toEqual({
+      kind: "navigate",
+      entryId: a1!.id,
+      branch: "main",
+    });
+    expect(entryTarget(history, rev1!.id)?.kind).toBe("navigate");
+    expect(tipOf(history)).toBe(rev2!.id);
+  });
+
+  test("an entry only another branch reaches is a navigate on that branch", () => {
+    // Arrange: alt gets a second comment so its first is no longer a tip
+    let history = switchBranch(forked(), "alt");
+
+    history = appendEntry(history, {
+      type: "comment",
+      annotationId: "b2",
+      createdAt: LATER,
+    }).history;
+    const altFirst = history.entries.find(
+      (entry) => entry.type === "comment" && entry.annotationId === "b1",
+    )!;
+
+    history = switchBranch(history, "main");
+
+    // Assert
+    expect(entryTarget(history, altFirst.id)).toEqual({
+      kind: "navigate",
+      entryId: altFirst.id,
+      branch: "alt",
+    });
+    expect(entryTarget(history, "e_nope")).toBeNull();
+  });
+});

package/src/tree-view.ts

@@ -0,0 +1,148 @@
+/**
+ * The session tree as rows for the rail's Tree tab. The trunk is the current
+ * branch's path (falling back to main), drawn at depth 0; every other segment
+ * indents under the entry it grew from. Rows know whether they sit on the
+ * active path, which branch tips rest on them, and the checkpoint name they
+ * carry, so the pane only paints. Pure: no controller, no daemon.
+ */
+
+import {
+  MAIN_BRANCH,
+  pathOf,
+  tipOf,
+  type SessionEntry,
+  type SessionHistory,
+} from "@cueloop/schema";
+
+export interface TreeRow {
+  entryId: string;
+  /** Branch nesting: 0 is the trunk, each segment off it one deeper. */
+  depth: number;
+  /** One glyph naming the entry kind, for the left column. */
+  glyph: string;
+  /** What the entry is, in a few words. */
+  text: string;
+  /** On the current branch's path: painted bright; everything else dim. */
+  onPath: boolean;
+  /** Branches whose tip rests on this entry. */
+  tips: string[];
+  /** The current branch's tip: where the next entry lands. */
+  isCurrentTip: boolean;
+  /** The checkpoint name, when labelled. */
+  label?: string;
+}
+
+/** What going to an entry means from where the reviewer stands. */
+export type EntryTarget =
+  | { kind: "here" }
+  | { kind: "switch"; branch: string }
+  | { kind: "navigate"; entryId: string; branch: string };
+
+/** The one-glyph, few-words reading of an entry a row shows. */
+export interface EntryDescription {
+  glyph: string;
+  text: string;
+}
+
+/** The entry's kind, said briefly; agent revisions count their round along the path. */
+export function describeEntry(entry: SessionEntry, round?: number): EntryDescription {
+  switch (entry.type) {
+    case "revision":
+      return entry.by === "agent"
+        ? { glyph: "◉", text: round === undefined ? "revision" : `revision ${round}` }
+        : { glyph: "○", text: "edit" };
+    case "comment":
+      return { glyph: "·", text: "comment" };
+    case "comment-removed":
+      return { glyph: "·", text: "comment removed" };
+    case "verdict":
+      return {
+        glyph: entry.verdict.kind === "approve" ? "✓" : "✗",
+        text: entry.verdict.kind.replace("_", " "),
+      };
+    case "branch-summary":
+      return { glyph: "↩", text: entry.text ? `"${entry.text}"` : "returned" };
+  }
+}
+
+/** Rows in drawing order: trunk first at each fork, older segments before newer. */
+export function treeRows(history: SessionHistory): TreeRow[] {
+  const children = new Map<string | null, SessionEntry[]>();
+
+  for (const entry of history.entries) {
+    const siblings = children.get(entry.parentId) ?? [];
+
+    siblings.push(entry);
+    children.set(entry.parentId, siblings);
+  }
+  for (const siblings of children.values()) {
+    siblings.sort(
+      (left, right) =>
+        left.createdAt.localeCompare(right.createdAt) || left.id.localeCompare(right.id),
+    );
+  }
+  const onPath = new Set(pathOf(history).map((entry) => entry.id));
+  const onMain = new Set(pathOf(history, tipOf(history, MAIN_BRANCH)).map((entry) => entry.id));
+  const tipsByEntry = new Map<string, string[]>();
+
+  for (const [branch, tip] of Object.entries(history.tips)) {
+    tipsByEntry.set(tip, [...(tipsByEntry.get(tip) ?? []), branch]);
+  }
+  const currentTip = tipOf(history);
+  const rows: TreeRow[] = [];
+  // the trunk continues through the child on the active path, else on main, else the oldest
+  const trunkChild = (siblings: SessionEntry[]): SessionEntry =>
+    siblings.find((entry) => onPath.has(entry.id)) ??
+    siblings.find((entry) => onMain.has(entry.id)) ??
+    siblings[0]!;
+  const walk = (entry: SessionEntry, depth: number, round: number): void => {
+    const nextRound = entry.type === "revision" && entry.by === "agent" ? round + 1 : round;
+    const described = describeEntry(
+      entry,
+      entry.type === "revision" && entry.by === "agent" ? nextRound : undefined,
+    );
+    const label = history.labels[entry.id];
+    const row: TreeRow = {
+      entryId: entry.id,
+      depth,
+      glyph: described.glyph,
+      text: described.text,
+      onPath: onPath.has(entry.id),
+      tips: tipsByEntry.get(entry.id) ?? [],
+      isCurrentTip: entry.id === currentTip,
+    };
+
+    if (label !== undefined) row.label = label;
+    rows.push(row);
+    const siblings = children.get(entry.id) ?? [];
+
+    if (siblings.length === 0) return;
+    const trunk = trunkChild(siblings);
+
+    for (const child of siblings) if (child !== trunk) walk(child, depth + 1, nextRound);
+    walk(trunk, depth, nextRound);
+  };
+
+  for (const root of children.get(null) ?? []) walk(root, 0, 0);
+
+  return rows;
+}
+
+/**
+ * Going to an entry: nothing when it is the current tip; a switch when it is
+ * another branch's tip; otherwise a navigate on the branch whose path holds
+ * it - the current branch when it can, else the first branch that reaches it.
+ */
+export function entryTarget(history: SessionHistory, entryId: string): EntryTarget | null {
+  if (entryId === tipOf(history)) return { kind: "here" };
+  const tipBranch = Object.entries(history.tips).find(([, tip]) => tip === entryId);
+
+  if (tipBranch) return { kind: "switch", branch: tipBranch[0] };
+  const holds = (branch: string): boolean =>
+    pathOf(history, tipOf(history, branch)).some((entry) => entry.id === entryId);
+  const branch = holds(history.branch)
+    ? history.branch
+    : Object.keys(history.tips).find((candidate) => holds(candidate));
+
+  return branch === undefined ? null : { kind: "navigate", entryId, branch };
+}

package/src/view-diff.ts

@@ -73,10 +73,7 @@ function fileLabel(file: FileDiffMetadata): string {
 }
 
 /** Quote-primary anchor for a diff row: neighbors as context selectors. */
-export function diffRowAnchor(
-  rows: DiffRow[],
-  rowIndex: number,
-): { quote: string; prefix: string; suffix: string } {
+export function diffRowAnchor(rows: DiffRow[], rowIndex: number) {
   const row = rows[rowIndex]!;
   const prev = rows[rowIndex - 1];
   const next = rows[rowIndex + 1];

package/src/view-plan.ts

@@ -17,6 +17,7 @@ import {
   type Block,
 } from "@cueloop/schema";
 import { wordLevelChanges } from "./diff-intraline";
+import { spanRangeInBlock, type TextSpan } from "./thread-selection";
 
 // ── display model ─────────────────────────────
 
@@ -182,6 +183,8 @@ export interface Mark {
   end: number;
   role: RunRole;
   annotationId?: string;
+  /** The whole anchored stretch in display coordinates; one thread per span. */
+  span?: TextSpan;
 }
 
 /**
@@ -207,18 +210,32 @@ export function marksByDisplay(
     const resolved = resolveAnchor(annotation.anchor, workBlocks);
 
     if (!resolved) continue;
-    const entry = workEntries[resolved.blockIndex];
-
-    if (!entry) continue;
-    const marks = marksByIndex.get(entry.displayIndex) ?? [];
-
-    marks.push({
-      start: resolved.start,
-      end: resolved.end,
-      role: annotation.id === focusedId ? "mark-focus" : "mark-comment",
-      annotationId: annotation.id,
-    });
-    marksByIndex.set(entry.displayIndex, marks);
+    const startEntry = workEntries[resolved.blockIndex];
+    const endEntry = workEntries[resolved.endBlockIndex];
+
+    if (!startEntry || !endEntry) continue;
+    const span: TextSpan = {
+      start: { blockIndex: startEntry.displayIndex, char: resolved.start },
+      end: { blockIndex: endEntry.displayIndex, char: resolved.end },
+    };
+
+    // a span paints on every block it covers; the mark carries the whole span
+    for (let workIndex = resolved.blockIndex; workIndex <= resolved.endBlockIndex; workIndex++) {
+      const entry = workEntries[workIndex]!;
+      const range = spanRangeInBlock(span, entry.displayIndex, entry.block.work!.text.length);
+
+      if (!range) continue;
+      const marks = marksByIndex.get(entry.displayIndex) ?? [];
+
+      marks.push({
+        start: range.start,
+        end: range.end,
+        role: annotation.id === focusedId ? "mark-focus" : "mark-comment",
+        annotationId: annotation.id,
+        span,
+      });
+      marksByIndex.set(entry.displayIndex, marks);
+    }
   }
 
   return marksByIndex;
@@ -285,12 +302,14 @@ export function inlineStyleRuns(text: string, base: number): StyleRun[] {
 
   for (const run of inlineRuns(text)) {
     if (run.role === "marker" || run.start === null) continue;
-    runs.push({
+    const styleRun: StyleRun = {
       text: run.text,
       role: run.role === "text" ? "plain" : run.role,
       start: base + run.start,
-      ...(run.href !== undefined ? { href: run.href } : {}),
-    });
+    };
+
+    if (run.href !== undefined) styleRun.href = run.href;
+    runs.push(styleRun);
   }
 
   return runs;
@@ -437,10 +456,7 @@ export function workRangeForRendered(
 }
 
 /** Line delta between two revision contents, for the sheet-header summary. */
-export function revisionDelta(
-  previousContent: string,
-  nextContent: string,
-): { added: number; removed: number } {
+export function revisionDelta(previousContent: string, nextContent: string) {
   const ops = lcsDiff(previousContent.split("\n"), nextContent.split("\n"));
   let added = 0;
   let removed = 0;

package/src/components/PlanSheet.stories.tsx

@@ -1,113 +0,0 @@
-import React from "react";
-import { DARK } from "../theme";
-import type { Story, StoryMeta } from "./story";
-import { buildDisplay } from "../view-plan";
-import { PlanSheet } from "./PlanSheet";
-import { FIXTURE_PLAN, fixtureDisplay, fixtureMarks, fixturePlanSession } from "./story-fixtures";
-
-export const meta: StoryMeta = { title: "PlanSheet" };
-
-const callbacks = { onLineActivate: () => {} };
-
-// a working copy with the context paragraph cut, so it renders as a del block
-const CUT_WORKING = FIXTURE_PLAN.replace("The daemon persists sessions to disk atomically.\n", "");
-
-export const AnnotatedPlan: Story = {
-  render: () => (
-    <PlanSheet
-      session={fixturePlanSession()}
-      display={fixtureDisplay()}
-      marks={fixtureMarks()}
-      cursor={2}
-      activeSpan={null}
-      compose={null}
-      popover={null}
-      editOrphanCount={0}
-      {...callbacks}
-    />
-  ),
-  expectedColors: [DARK.markCommentBackground, DARK.cursorBackground],
-  size: { width: 90, height: 28 },
-};
-
-export const SpanSelection: Story = {
-  render: () => (
-    <PlanSheet
-      session={fixturePlanSession({ annotations: [] })}
-      display={fixtureDisplay()}
-      marks={new Map()}
-      cursor={2}
-      activeSpan={{ displayIndex: 2, start: 0, end: 10 }}
-      compose={null}
-      popover={null}
-      editOrphanCount={0}
-      {...callbacks}
-    />
-  ),
-  expectedColors: [DARK.accent],
-  size: { width: 90, height: 28 },
-};
-
-export const InlineCompose: Story = {
-  render: () => (
-    <PlanSheet
-      session={fixturePlanSession({ annotations: [] })}
-      display={fixtureDisplay()}
-      marks={new Map()}
-      cursor={2}
-      activeSpan={{ displayIndex: 2, start: 0, end: 10 }}
-      compose={{
-        kind: "comment",
-        displayIndex: 2,
-        quote: "The daemon",
-        draft: { text: "Which daemon?", onInput: () => {}, onSave: () => {}, onCancel: () => {} },
-      }}
-      popover={null}
-      editOrphanCount={0}
-      {...callbacks}
-    />
-  ),
-  size: { width: 90, height: 30 },
-};
-
-/** Span mode shows the marker-actions toolbar inline below the marked block. */
-// The marker popover floats as an absolute overlay; the virtual terminal used
-// for story snapshots cannot composite it, so it is covered by the standalone
-// MarkerPopover stories and a functional App test rather than a PlanSheet snapshot.
-
-/** A cut block renders struck-through and grayed inline - no red, no [cut] tag. */
-export const WithCutBlock: Story = {
-  render: () => (
-    <PlanSheet
-      session={fixturePlanSession()}
-      display={buildDisplay(FIXTURE_PLAN, CUT_WORKING)}
-      marks={new Map()}
-      cursor={0}
-      activeSpan={null}
-      compose={null}
-      popover={null}
-      editOrphanCount={0}
-      {...callbacks}
-    />
-  ),
-  expectedColors: [DARK.textDim],
-  size: { width: 90, height: 28 },
-};
-
-export const OrphanBanner: Story = {
-  render: () => (
-    <PlanSheet
-      session={fixturePlanSession()}
-      display={fixtureDisplay()}
-      marks={new Map()}
-      cursor={0}
-      activeSpan={null}
-      compose={null}
-      popover={null}
-      editOrphanCount={1}
-      {...callbacks}
-    />
-  ),
-  expectedColors: [DARK.red],
-  size: { width: 90, height: 28 },
-};