@cueloop/client 0.1.0-alpha.92 → 0.1.0-alpha.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.92",
+  "version": "0.1.0-alpha.94",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -27,18 +27,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.92",
-    "@cueloop/extension-api": "0.1.0-alpha.92",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.92",
-    "@cueloop/schema": "0.1.0-alpha.92",
-    "@opentui/core": "^0.5.11",
-    "@opentui/keymap": "0.5.11",
-    "@opentui/react": "^0.5.11",
-    "@opentui/ssh": "0.5.11",
+    "@cueloop/daemon": "0.1.0-alpha.94",
+    "@cueloop/extension-api": "0.1.0-alpha.94",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.94",
+    "@cueloop/schema": "0.1.0-alpha.94",
+    "@opentui/core": "^0.5.12",
+    "@opentui/keymap": "0.5.12",
+    "@opentui/react": "^0.5.12",
+    "@opentui/ssh": "0.5.12",
     "@pierre/diffs": "^1.4.1",
     "@tanstack/virtual-core": "^3.17.11",
     "diff": "^9",
-    "puppeteer-core": "^25.10.0",
+    "puppeteer-core": "^25.11.0",
     "react": "^19.3.0",
     "valibot": "^1.5.0",
     "zustand": "^5.0.15"

package/src/App.deleted-scroll.test.tsx

@@ -0,0 +1,186 @@
+/** Keyboard scrolling in a changed-file tab uses caret navigation, even when the file was deleted. */
+
+import { expect, test } from "bun:test";
+import { mkdtempSync, rmSync, unlinkSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import React from "react";
+import { ScrollBoxRenderable, type Renderable } from "@opentui/core";
+import { DaemonServer } from "@cueloop/daemon";
+import { App } from "./App";
+import { annotationPaletteFor } from "./annotation-palette";
+import { DARK } from "./theme";
+import {
+  isolateUserConfig,
+  locateText,
+  press,
+  renderReadyApp,
+  settle,
+  waitForText,
+} from "./test-support";
+
+function findScrollbox(node: Renderable): ScrollBoxRenderable | null {
+  if (node.id === "diff-scroll" && node instanceof ScrollBoxRenderable) return node;
+
+  for (const child of node.getChildren()) {
+    const found = findScrollbox(child);
+
+    if (found) return found;
+  }
+
+  return null;
+}
+
+function hex(color: { toInts(): [number, number, number, number] }): string {
+  const [red, green, blue] = color.toInts();
+
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
+}
+
+test("deleted file caret scrolls one row and stays at the file boundaries", async () => {
+  const home = mkdtempSync(join(tmpdir(), "cueloop-scroll-home-"));
+  const repo = mkdtempSync(join(tmpdir(), "cueloop-scroll-repo-"));
+  const restoreConfig = isolateUserConfig(home);
+  const server = new DaemonServer({ home, idleExitMs: 0 });
+  let setup: Awaited<ReturnType<typeof renderReadyApp>> | undefined;
+
+  try {
+    const file = join(repo, "long.md");
+    const lines = Array.from({ length: 180 }, (_, index) =>
+      index === 113
+        ? "[nodejs/node#36005](https://github.com/nodejs/node/issues/36005)."
+        : `row ${String(index).padStart(3, "0")} ${"a paragraph with wrapped text and a link [source](https://example.test/page) ".repeat((index % 3) + 1)}`,
+    );
+    const git = (args: string[]) => Bun.spawnSync(["git", "-C", repo, ...args]);
+
+    writeFileSync(file, lines.join("\n") + "\n");
+    git(["init", "-q"]);
+    git(["config", "user.email", "fixture@example.com"]);
+    git(["config", "user.name", "Fixture"]);
+    git(["add", "-A"]);
+    git(["commit", "-q", "-m", "seed"]);
+    unlinkSync(file);
+    server.start();
+    setup = await renderReadyApp(<App home={home} sessionId={undefined} cwd={repo} />, {
+      width: 180,
+      height: 48,
+    });
+    await waitForText(setup, "long.md");
+    const treeFile = locateText(setup, "long.md");
+
+    await setup.mockMouse.click(treeFile.column, treeFile.row);
+    await waitForText(setup, "row 00");
+    const box = findScrollbox(setup.renderer.root);
+
+    if (!box) throw new Error("file diff scrollbox missing");
+    for (let offset = 0; offset < 1000; offset += 20) {
+      box.scrollTo({ x: 0, y: offset });
+      await settle(setup);
+      if (setup.captureCharFrame().includes("row 130")) break;
+    }
+    const target = locateText(setup, "row 130");
+
+    await setup.mockMouse.click(target.column, target.row);
+    await press(setup, "escape");
+
+    const steps: number[] = [];
+    const caretCell = annotationPaletteFor(DARK).caretCell;
+    const frameTrace: Array<{ markers: number[]; caret: number }> = [];
+    const captureFrame = () => {
+      const lines = setup!.captureCharFrame().split("\n");
+      const markers = lines.flatMap((line, row) => (line.includes("▎") ? [row] : []));
+      const caret = setup!
+        .captureSpans()
+        .lines.findIndex((line) => line.spans.some((span) => hex(span.bg) === caretCell));
+
+      frameTrace.push({ markers, caret });
+    };
+
+    setup.renderer.on("frame", captureFrame);
+
+    for (let index = 0; index < 12; index++) {
+      const before = box.scrollTop;
+      await press(setup, "down");
+      steps.push(box.scrollTop - before);
+      const caretRow = setup
+        .captureSpans()
+        .lines.findIndex((line) => line.spans.some((span) => hex(span.bg) === caretCell));
+      const markerRows = setup
+        .captureCharFrame()
+        .split("\n")
+        .flatMap((line, row) => (line.includes("▎") ? [row] : []));
+
+      expect(caretRow).toBeGreaterThanOrEqual(0);
+      expect(markerRows).toEqual([caretRow]);
+    }
+
+    expect(Math.max(...steps)).toBeLessThanOrEqual(1);
+    expect(Math.min(...steps)).toBeGreaterThanOrEqual(0);
+    let anchored = false;
+
+    for (let index = 0; index < 80; index++) {
+      await press(setup, "up");
+      const marker = setup
+        .captureCharFrame()
+        .split("\n")
+        .findIndex((line) => line.includes("▎"));
+
+      if (marker === box.viewport.screenY) anchored = true;
+      if (anchored && box.scrollTop > 0) expect(marker).toBe(box.viewport.screenY);
+    }
+    expect(anchored).toBe(true);
+    box.scrollTo({ x: 0, y: 100000 });
+    await settle(setup);
+    const last = locateText(setup, "row 179");
+
+    await setup.mockMouse.click(last.column, last.row);
+    await press(setup, "escape");
+    let lastMarker = -1;
+
+    for (let index = 0; index < 12; index++) {
+      const traceStart = frameTrace.length;
+      const before = box.scrollTop;
+
+      await press(setup, "down");
+      const states = frameTrace.slice(traceStart);
+
+      expect(box.scrollTop).toBe(before);
+      expect(states.length).toBeGreaterThan(0);
+      for (const state of states) {
+        expect(state.markers).toEqual([state.caret]);
+        expect(state.caret).toBeGreaterThanOrEqual(lastMarker);
+        lastMarker = state.caret;
+      }
+    }
+    box.scrollTo({ x: 0, y: 0 });
+    await settle(setup);
+    const first = locateText(setup, "row 000");
+
+    await setup.mockMouse.click(first.column, first.row);
+    await press(setup, "escape");
+    let firstMarker = Number.POSITIVE_INFINITY;
+
+    for (let index = 0; index < 12; index++) {
+      const traceStart = frameTrace.length;
+      const before = box.scrollTop;
+
+      await press(setup, "up");
+      const states = frameTrace.slice(traceStart);
+
+      expect(box.scrollTop).toBe(before);
+      expect(states.length).toBeGreaterThan(0);
+      for (const state of states) {
+        expect(state.markers).toEqual([state.caret]);
+        expect(state.caret).toBeLessThanOrEqual(firstMarker);
+        firstMarker = state.caret;
+      }
+    }
+    setup.renderer.off("frame", captureFrame);
+  } finally {
+    setup?.renderer.destroy();
+    server.stop();
+    restoreConfig();
+    rmSync(home, { recursive: true, force: true });
+    rmSync(repo, { recursive: true, force: true });
+  }
+}, 30000);

package/src/App.diff.test.tsx

@@ -10,7 +10,6 @@ import type { Thread } from "@cueloop/schema";
 import { App } from "./App";
 import { pullRequestReviewLayout } from "./launch-layout";
 import { DARK } from "./theme";
-import { NERD } from "./components/primitives/icons";
 import {
   clickText,
   dragText,
@@ -220,7 +219,7 @@ describe("diff review", () => {
     await waitForText(setup, "● Existing note.");
   });
 
-  test("option+c folds the caret's file to its band; the chevron restores its body", async () => {
+  test("option+c folds the caret's file to its band; its title restores the body", async () => {
     // Arrange - the caret opens on the file's first code line
     const setup = await renderApp();
 
@@ -234,8 +233,8 @@ describe("diff review", () => {
     expect(collapsed).toContain("src/store.ts");
     expect(collapsed).toContain("+1");
 
-    // Act - the band's chevron unfolds it again
-    await clickText(setup, NERD.chevronRight);
+    // Act - the title unfolds it again
+    await clickText(setup, "src/store.ts");
 
     // Assert
     await waitForText(setup, "new Map()");

package/src/App.test.tsx

@@ -442,6 +442,7 @@ describe("the thread view and the menu", () => {
     const dialog = setup.captureCharFrame();
 
     expect(dialog).toContain("nav mode");
+    expect(dialog).toContain("open selected file or toggle folder");
     expect(dialog).toContain("place the caret");
     expect(dialog).not.toContain("grow/shrink");
 

package/src/App.toast.test.tsx

@@ -1,6 +1,6 @@
 /** The share toast is non-modal: while it is up, escape still cancels an open overlay. */
 
-import { afterEach, beforeEach, describe, mock, test } from "bun:test";
+import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
 import { mkdtempSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
@@ -13,6 +13,7 @@ import type { ShareTransport } from "./thread-controller";
 import {
   clickText,
   isolateUserConfig,
+  locateText,
   press,
   pressKey,
   typeText,
@@ -63,6 +64,31 @@ afterEach(() => {
 });
 
 describe("share toast", () => {
+  test("clicking outside dismisses the toast while clicking inside keeps it open", async () => {
+    const setup = await testRender(
+      <App home={home} sessionId={session.id} shareTransport={shareTransport} />,
+      { width: 120, height: 32 },
+    );
+
+    await waitForText(setup, "cueloop");
+    await pressKey(setup, "s", { ctrl: true });
+    await waitForText(setup, "+ new link");
+    await press(setup, "enter");
+    await press(setup, "enter");
+    await waitForText(setup, "link name");
+    await press(setup, "enter");
+    await waitForText(setup, "link copied");
+    await press(setup, "escape");
+    await waitForTextGone(setup, "share externally");
+    const body = locateText(setup, "ssh p_share01@cueloop.dev");
+
+    await setup.mockMouse.click(body.column, body.row);
+    expect(setup.captureCharFrame()).toContain("link copied");
+    await setup.mockMouse.click(1, 1);
+    await waitForTextGone(setup, "link copied");
+    setup.renderer.destroy();
+  });
+
   test("escape cancels an open composer even while the toast is up", async () => {
     // Arrange
     const setup = await testRender(

package/src/App.tsx

@@ -112,6 +112,10 @@ const TOAST_DISMISS_MS = 2000;
 export interface AppProps {
   home?: string;
   sessionId?: string;
+  /** Review data already captured by the command before the UI mounts. */
+  initialReview?: { session: Thread; diff: { patch: string; files: DiffFileContents[] } };
+  /** An owner connection already opened by the launching command. */
+  initialClient?: ThreadClient;
   /** The launch directory whose git repo backs the no-session welcome tree; defaults to process.cwd(). */
   cwd?: string;
   /**
@@ -151,6 +155,18 @@ export interface AppProps {
   extensionRegistry?: ClientExtensionRegistry;
 }
 
+function initialReviewControllerOptions(initialReview: AppProps["initialReview"]) {
+  const options = { initialSession: initialReview?.session, initialDiff: initialReview?.diff };
+
+  return options;
+}
+
+function initialReviewFiles(initialReview: AppProps["initialReview"], sessionId: string) {
+  const files = initialReview?.session.id === sessionId ? initialReview.diff.files : undefined;
+
+  return files;
+}
+
 function extensionContext(cwd: string | undefined, threadId: string | null): ExtensionUIContext {
   return { workspace: cwd ?? process.cwd(), threadId };
 }
@@ -326,12 +342,13 @@ function authorLabelResolver(
 function ProjectPanelBody(props: {
   mode: ProjectPanelMode;
   loadChanges: () => Promise<readonly DiffFileContents[]>;
+  initialFiles?: readonly DiffFileContents[];
   loadProjectFiles: () => Promise<string[]>;
   diffSourceKey: string;
   liveWorkingTree: boolean;
   frozenFiles?: readonly DiffFileContents[];
-  onOpenChangedFile: (path: string) => void;
-  onOpenProjectFile: (path: string) => void;
+  onOpenChangedFile: (path: string, persistent?: boolean) => void;
+  onOpenProjectFile: (path: string, persistent?: boolean) => void;
   commentCounts?: ReadonlyMap<string, number>;
   focused?: boolean;
   theme: Theme;
@@ -340,6 +357,7 @@ function ProjectPanelBody(props: {
     loadChanges: props.loadChanges,
     visible: props.mode === "changes" && props.liveWorkingTree,
     diffSourceKey: props.diffSourceKey,
+    initialFiles: props.initialFiles,
   });
 
   if (props.mode === "changes") {
@@ -391,12 +409,20 @@ function usableScreenReached(
 /** The keybinds dialog content: the thread grammar while the thread view owns the keys. */
 function cheatsheetFor(keyBindings: KeyBindings, threadViewActive: boolean): CheatsheetSection[] {
   const base = keyBindings.cheatsheet();
+  const fileTree: CheatsheetSection = {
+    title: "Changes / Project files",
+    entries: [
+      { keys: "enter", label: "open selected file or toggle folder" },
+      { keys: "tab", label: "cycle panes" },
+    ],
+  };
 
   if (!threadViewActive) {
-    return base;
+    return [fileTree, ...base];
   }
 
   return [
+    fileTree,
     ...THREAD_VIEW_CHEATSHEET,
     { title: "Nav mode · session", entries: sessionCommandEntries() },
     { title: "Nav mode · diff", entries: diffCommandEntries() },
@@ -523,6 +549,8 @@ export function reconciledFocus(navigable: FocusPane[], focusedPane: FocusPane):
 export function App({
   home,
   sessionId,
+  initialReview,
+  initialClient,
   cwd,
   readOnly = false,
   onExit,
@@ -543,6 +571,8 @@ export function App({
       createReviewController({
         home,
         sessionId,
+        ...initialReviewControllerOptions(initialReview),
+        initialClient,
         cwd,
         readOnly: observer,
         onExit,
@@ -573,6 +603,11 @@ export function App({
   );
   const { session, inbox, status, toast, error, completion, editOrphanCount, walk } =
     useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+  const initialReviewForFirstMount = useRef(initialReview);
+
+  useEffect(() => {
+    initialReviewForFirstMount.current = undefined;
+  }, []);
 
   // A shared plan you own polls for collaborator notes while it is open; the
   // merge refreshes through the normal event path. Stops on leave.
@@ -630,7 +665,7 @@ export function App({
   const [menuDialog, setMenuDialog] = useState<"keybinds" | "settings" | null>(null);
   const [shareDialogOpen, setShareDialogOpen] = useState(false);
   const [autoClose, setAutoClose] = useState<AutoClose>("off");
-  // unified or side-by-side diff; split only lays out when the Changes pane is zoomed
+  // unified or side-by-side diff; split lays out when the Changes pane is zoomed
   const [diffView, setDiffView] = useState<DiffViewMode>("split");
   const [defaultMessage, setDefaultMessage] = useState<MessageOutcome>("approved");
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | undefined>(undefined);
@@ -656,10 +691,6 @@ export function App({
   const [skills, setSkills] = useState<SlashItem[]>([]);
   const [reviewSkill, setReviewSkill] = useState("code-review");
   const [reviewWorkspace, setReviewWorkspace] = useState<ReviewWorkspaceMode>("worktree");
-  const reviewSkillOptions = useMemo(
-    () => [...new Set([reviewSkill, "code-review", ...skills.map((skill) => skill.name)])],
-    [reviewSkill, skills],
-  );
   const paletteNames = useMemo(
     () => new Set(mergeSlashItems(slashItemsFrom(quickActions), skills).map((item) => item.name)),
     [quickActions, skills],
@@ -767,8 +798,6 @@ export function App({
       setMode({ type: "renameSelf", text: identity.name ?? "" });
     },
     reviewSkill,
-    reviewSkillOptions,
-    setReviewSkill,
     reviewWorkspace,
     setReviewWorkspace,
   });
@@ -1116,6 +1145,7 @@ export function App({
             onPin={togglePin}
             onRename={(id, title) => setMode({ type: "renameThread", sessionId: id, text: title })}
             quickActions={quickActions}
+            diffView={diffView}
             onWelcomeComposingChange={setWelcomeComposing}
             layout={layout}
           />
@@ -1367,6 +1397,7 @@ export function App({
                   commentCounts={diffCommentCounts}
                   onFocusGroup={workbench.focusGroup}
                   onActivateTab={workbench.activate}
+                  onKeepTab={workbench.keepTab}
                   onCloseTab={workbench.close}
                   onSplit={workbench.split}
                   onZoom={workbench.toggleZoom}
@@ -1442,13 +1473,21 @@ export function App({
                 <ProjectPanelBody
                   mode={workbench.projectMode}
                   loadChanges={() => controller.repoChanges()}
+                  initialFiles={initialReviewFiles(
+                    initialReviewForFirstMount.current,
+                    activeSession.id,
+                  )}
                   loadProjectFiles={() => controller.repoFiles()}
                   diffSourceKey={activeSession.id}
                   {...projectDiffFiles(activeSession)}
                   // the Changes navigator always opens a changed file as a diff - a diff review shows its
                   // captured snapshot, every other thread the live working-tree diff
-                  onOpenChangedFile={(path) => workbench.openFile(path, "diff")}
-                  onOpenProjectFile={(path) => workbench.openFile(path, "contents")}
+                  onOpenChangedFile={(path, persistent) =>
+                    workbench.openFile(path, "diff", persistent)
+                  }
+                  onOpenProjectFile={(path, persistent) =>
+                    workbench.openFile(path, "contents", persistent)
+                  }
                   commentCounts={diffCommentCounts}
                   focused={focusedPane === "project"}
                   theme={theme}
@@ -1466,6 +1505,7 @@ export function App({
                 theme={theme}
                 mode={mode}
                 toast={toast}
+                onDismissToast={() => controller.dismissToast()}
                 setMode={setMode}
                 dispatch={dispatch}
               />