@cueloop/client 0.1.0-alpha.64 → 0.1.0-alpha.66

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/use-settings-dialog.tsx

@@ -191,6 +191,12 @@ export function useSettingsDialog(params: {
         />
       ),
     },
+    {
+      id: "keybinds",
+      name: "Keybinds",
+      description: "keyboard reference",
+      rows: [],
+    },
   ];
   const settingsValues = {
     autoClose: autoClose === "off" ? "off" : `${autoClose}s`,
@@ -219,6 +225,9 @@ export function useSettingsDialog(params: {
   };
 
   const onCategorySelect = (categoryId: string): void => {
+    // the nav tree carries a synthetic Settings group folder; clicking it must
+    // not become the active category, or the key handler dereferences nothing
+    if (!settingsCategories.some((category) => category.id === categoryId)) return;
     setActionsExpandedIndex(null);
     setSettingsNav({ categoryId, rowIndex: 0, zone: "body" });
   };

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;

package/src/App.review-panel.test.tsx

@@ -1,143 +0,0 @@
-/** The review panel end to end: the b key cycles expanded -> compact -> hidden -> expanded on the live App, and the collapse mode persists to the user config so it survives a restart. Rendering details are locked by the ReviewPanel stories; this suite proves the App wiring and the persistence. */
-
-import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import { mkdtempSync, rmSync } from "node:fs";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
-import React from "react";
-import { testRender } from "@opentui/react/test-utils";
-import { DaemonServer } from "@cueloop/daemon";
-import type { ReviewSession } from "@cueloop/schema";
-import { App } from "./App";
-import { loadConfig } from "./config";
-import { isolateUserConfig, press, settle, waitForText, waitForTextGone } from "./test-support";
-
-const PLAN = "# Plan\n\nShip the thing.\n";
-
-let home: string;
-let server: DaemonServer;
-let session: ReviewSession;
-let configPath: string;
-let restoreUserConfig: () => void;
-
-beforeEach(() => {
-  home = mkdtempSync(join(tmpdir(), "cueloop-panel-"));
-  configPath = join(home, "config.toml");
-  restoreUserConfig = isolateUserConfig(home, "config.toml");
-  server = new DaemonServer({ home, idleExitMs: 0 });
-  server.start();
-  session = server.core.sessionCreate({
-    workspace: { repoRoot: "/repo", branch: "main" },
-    artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
-  });
-});
-afterEach(() => {
-  restoreUserConfig();
-  server.stop();
-  rmSync(home, { recursive: true, force: true });
-});
-
-async function renderApp() {
-  const setup = await testRender(<App home={home} sessionId={session.id} />, {
-    width: 120,
-    height: 30,
-  });
-
-  await waitForText(setup, "Review");
-
-  return setup;
-}
-
-describe("review panel", () => {
-  test("b cycles expanded -> compact -> hidden -> expanded", async () => {
-    // Arrange
-    const setup = await renderApp();
-    // the plan frame widens as the rail shrinks: expanded < compact < hidden.
-    // its width is the column of its top-right corner (the first ╮ on the row).
-    const planWidth = () =>
-      setup
-        .captureCharFrame()
-        .split("\n")
-        .find((line) => line.includes("╮"))
-        ?.indexOf("╮") ?? 0;
-
-    // Assert: expanded shows the submit button and leaves room for the rail
-    expect(setup.captureCharFrame()).toContain("Submit review");
-    const expandedWidth = planWidth();
-
-    // Act
-    await press(setup, "b");
-
-    // Assert: compact drops the submit button and widens the plan (rail is a strip)
-    await waitForTextGone(setup, "Submit review");
-    const compactWidth = planWidth();
-
-    expect(compactWidth).toBeGreaterThan(expandedWidth);
-
-    // Act
-    await press(setup, "b");
-    await settle(setup);
-
-    // Assert: hidden spans the plan full width, no rail column
-    const hiddenWidth = planWidth();
-
-    expect(hiddenWidth).toBeGreaterThan(compactWidth);
-    expect(hiddenWidth).toBeGreaterThan(115);
-
-    // Act
-    await press(setup, "b");
-
-    // Assert
-    await waitForText(setup, "Submit review"); // back to expanded
-  });
-
-  test("the collapse mode persists to the user config", async () => {
-    // Arrange
-    const setup = await renderApp();
-
-    // Act
-    await press(setup, "b"); // -> compact
-
-    // Assert
-    expect(loadConfig({ userConfigPath: configPath }).ui.reviewState).toBe("compact");
-  });
-
-  test("] widens the rail and persists the new width", async () => {
-    // Arrange
-    const setup = await renderApp();
-    const startWidth = loadConfig({ userConfigPath: configPath }).ui.reviewWidth;
-
-    // Act
-    await press(setup, "]");
-
-    // Assert
-    const widened = loadConfig({ userConfigPath: configPath }).ui.reviewWidth;
-
-    expect(widened).toBeGreaterThan(startWidth);
-  });
-
-  test("submitting from a hidden panel force-opens the rail so the confirm card is reachable", async () => {
-    // Arrange
-    const setup = await renderApp();
-
-    await press(setup, "b"); // -> compact
-    await press(setup, "b"); // -> hidden
-
-    // Assert
-    await waitForTextGone(setup, "Submit review"); // rail is gone
-    expect(setup.captureCharFrame()).not.toContain("Submit review");
-
-    // Act
-    await press(setup, "enter"); // submit while hidden must not trap in an invisible modal
-
-    // Assert
-    await waitForText(setup, "submit review");
-    const frame = setup.captureCharFrame();
-
-    expect(frame).toContain("submit review"); // the confirm card is visible again
-    expect(frame).toContain("[Approve]");
-
-    // the reveal is live-only: the saved panel preference stays as the user left it
-    expect(loadConfig({ userConfigPath: configPath }).ui.reviewState).toBe("hidden");
-  });
-});

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 },
-};