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

package/src/App.workbench.test.tsx

@@ -112,7 +112,127 @@ const rightToggleColumn = (setup: Setup): number => toggleColumn(setup, NERD.sid
 // the collapsed rail shows the outline (off) variant, mirroring the left toggle's filled/outline states
 const railToggleColumn = (setup: Setup): number => toggleColumn(setup, NERD.sidebarRightOff);
 
+function changedFileVisibleInRightTree(frame: string, file: string): boolean {
+  return frame.split("\n").some((line) => {
+    const divider = line.lastIndexOf("│");
+
+    return divider >= 0 && line.slice(divider + 1).includes(file);
+  });
+}
+
 describe("the four-pane workbench", () => {
+  test("a bootstrapped workbench paints its changed-file list in the first usable frame", async () => {
+    const workbench = server.core.sessionCreate({
+      workspace: { repoRoot: repo, branch: "main" },
+      artifact: { type: "diff", content: "", meta: { title: "Workbench", workbench: true } },
+    });
+    const initialReview = {
+      session: workbench,
+      diff: {
+        patch: PATCH,
+        files: [
+          {
+            path: "src/store.ts",
+            oldContents: "export class Store { private items = []; }\n",
+            newContents: "export class Store { private items = new Map(); }\n",
+            status: "modified" as const,
+          },
+        ],
+      },
+    };
+    const setup = await renderReadyApp(
+      <App
+        home={home}
+        sessionId={workbench.id}
+        initialReview={initialReview}
+        layout={reviewLayout()}
+      />,
+      { width: 160, height: 20 },
+    );
+
+    expect(changedFileVisibleInRightTree(setup.captureCharFrame(), "store.ts")).toBe(true);
+    setup.renderer.destroy();
+  });
+
+  test("reopening Changes does not restore files from the launch snapshot", async () => {
+    const workbench = server.core.sessionCreate({
+      workspace: { repoRoot: repo, branch: "main" },
+      artifact: { type: "diff", content: "", meta: { title: "Workbench", workbench: true } },
+    });
+    const initialReview = {
+      session: workbench,
+      diff: {
+        patch: PATCH,
+        files: [
+          {
+            path: "src/store.ts",
+            oldContents: "before\n",
+            newContents: "after\n",
+            status: "modified" as const,
+          },
+        ],
+      },
+    };
+    const setup = await renderReadyApp(
+      <App
+        home={home}
+        sessionId={workbench.id}
+        initialReview={initialReview}
+        layout={reviewLayout()}
+      />,
+      { width: 160, height: 20 },
+    );
+
+    await waitForState(
+      setup,
+      () => !changedFileVisibleInRightTree(setup.captureCharFrame(), "store.ts"),
+    );
+    await setup.mockMouse.click(rightToggleColumn(setup), HEADER_ROW);
+    await waitForState(setup, () => diffToggleColumn(setup) === -1);
+    await setup.mockMouse.click(railToggleColumn(setup), HEADER_ROW);
+
+    expect(changedFileVisibleInRightTree(setup.captureCharFrame(), "store.ts")).toBe(false);
+    setup.renderer.destroy();
+  });
+
+  test("rapid wheel scrolling a large Changes diff keeps the app responsive", async () => {
+    const filePatches = Array.from({ length: 40 }, (_, fileIndex) => [
+      `diff --git a/file-${fileIndex}.ts b/file-${fileIndex}.ts`,
+      `--- a/file-${fileIndex}.ts`,
+      `+++ b/file-${fileIndex}.ts`,
+      "@@ -0,0 +1,10 @@",
+      ...Array.from(
+        { length: 10 },
+        (_, lineIndex) => `+line ${lineIndex} ${"dense source text ".repeat(40)}`,
+      ),
+    ]).flat();
+    const large = server.core.sessionCreate({
+      workspace: { repoRoot: repo, branch: "main" },
+      artifact: {
+        type: "diff",
+        content: [...filePatches, ""].join("\n"),
+        meta: { title: "large changes" },
+      },
+    });
+    const setup = await renderReadyApp(<App home={home} sessionId={large.id} />, {
+      width: 160,
+      height: 20,
+    });
+
+    await waitForText(setup, "file-0.ts");
+    for (const [index, direction] of Array.from({ length: 500 }, () => "down" as const).entries()) {
+      // eslint-disable-next-line no-await-in-loop
+      await setup.mockMouse.scroll(75, 10, direction);
+      if (index % 25 === 0) {
+        // eslint-disable-next-line no-await-in-loop
+        await setup.waitForVisualIdle();
+      }
+    }
+    await setup.waitForVisualIdle();
+    expect(setup.captureCharFrame()).toContain("changes");
+    setup.renderer.destroy();
+  }, 60000);
+
   test("pair starts focused on the Project tree beside the zoomed Changes editor", async () => {
     const setup = await renderReadyApp(
       <App home={home} sessionId={session.id} layout={pairLayout()} />,
@@ -198,6 +318,8 @@ describe("the four-pane workbench", () => {
     expect(frame).toContain("cueloop");
     expect(frame).toContain("Changes");
     expect(frame).toContain("store.ts");
+    expect(frame).toContain("src/store.ts");
+    expect(frame).toContain(NERD.copy);
     // the diff (±) toggle exists in the Project header
     expect(diffToggleColumn(setup)).toBeGreaterThan(0);
   });
@@ -233,6 +355,43 @@ describe("the four-pane workbench", () => {
     expect(frame.split("\n")[HEADER_ROW]!).toContain("README.md");
   });
 
+  test("project clicks reuse one preview and a double-click keeps the file open once", async () => {
+    const setup = await renderApp();
+
+    await setup.mockMouse.click(treeToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "README.md");
+    const readme = locateText(setup, "README.md");
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForState(setup, () =>
+      setup.captureCharFrame().split("\n")[HEADER_ROW]!.includes("README.md"),
+    );
+
+    const folder = locateText(setup, "src");
+    await setup.mockMouse.click(folder.column, folder.row);
+    await waitForText(setup, "util.ts");
+    const util = locateText(setup, "util.ts");
+    await setup.mockMouse.click(util.column, util.row);
+    await waitForState(setup, () => {
+      const header = setup.captureCharFrame().split("\n")[HEADER_ROW]!;
+
+      return header.includes("util.ts") && !header.includes("README.md");
+    });
+
+    await setup.mockMouse.doubleClick(util.column, util.row);
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForState(setup, () => {
+      const header = setup.captureCharFrame().split("\n")[HEADER_ROW]!;
+
+      return header.includes("util.ts") && header.includes("README.md");
+    });
+    await setup.mockMouse.click(util.column, util.row);
+    const header = setup.captureCharFrame().split("\n")[HEADER_ROW]!;
+
+    expect(header.match(/util\.ts/g)).toHaveLength(1);
+    expect(header.match(/README\.md/g)).toHaveLength(1);
+    setup.renderer.destroy();
+  });
+
   test("the split control offers four directions and arrow-right makes two groups", async () => {
     const setup = await renderApp();
 
@@ -255,8 +414,15 @@ describe("the four-pane workbench", () => {
 
     // the arrow keys drive the popover: right splits the group into two
     await pressKey(setup, "ARROW_RIGHT");
-    await waitForState(setup, () => setup.captureCharFrame().split("split").length - 1 >= 2);
-    expect((setup.captureCharFrame().match(/README\.md/g) ?? []).length).toBeGreaterThanOrEqual(2);
+    await waitForState(setup, () =>
+      /│ Changes\s+│.*│ README\.md/.test(setup.captureCharFrame().split("\n")[HEADER_ROW]!),
+    );
+    expect(
+      setup
+        .captureCharFrame()
+        .split("\n")
+        [HEADER_ROW]!.match(/README\.md/g),
+    ).toHaveLength(1);
   });
 
   test("dismissing the Changes tab collapses the Changes pane but keeps the Project sidebar", async () => {
@@ -461,6 +627,28 @@ describe("the bare-launch welcome shell", () => {
     expect(setup.captureCharFrame()).toContain("README.md");
   });
 
+  test("Review shows only the skill selected in TOML", async () => {
+    writeFileSync(process.env.CUELOOP_CONFIG!, '[review]\nskill = "custom-review"\n');
+    const setup = await renderWelcome();
+
+    await setup.mockMouse.click(1, HEADER_ROW);
+    await waitForText(setup, "settings");
+    const settings = locateText(setup, "settings");
+
+    await setup.mockMouse.click(settings.column, settings.row);
+    await waitForText(setup, "General");
+    const review = locateText(setup, "Review");
+
+    await setup.mockMouse.click(review.column, review.row);
+    await waitForText(setup, "custom-review");
+    expect(setup.captureCharFrame()).not.toContain("research");
+    const skill = locateText(setup, "custom-review");
+
+    await setup.mockMouse.click(skill.column, skill.row);
+    expect(setup.captureCharFrame()).toContain("custom-review");
+    setup.renderer.destroy();
+  });
+
   test("the first comment in the bare shell creates and persists a per-repo workbench thread", async () => {
     const setup = await renderWelcome();
 
@@ -501,6 +689,63 @@ describe("the bare-launch welcome shell", () => {
     expect(setup.captureCharFrame()).toContain("README.md");
   });
 
+  test("a changed file tab keeps copy and expand without a collapse action", async () => {
+    const setup = await renderWelcome();
+
+    await waitForText(setup, "README.md");
+    const readme = locateText(setup, "README.md");
+
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForText(setup, "edited in the working tree");
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain(NERD.copy);
+    expect(frame).not.toContain("v README.md");
+    expect(frame).toContain("expand");
+    setup.renderer.destroy();
+  });
+
+  test("a bare changed-file tab uses Split only when zoomed in", async () => {
+    const setup = await renderWelcome();
+
+    await waitForText(setup, "README.md");
+    const readme = locateText(setup, "README.md");
+
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForText(setup, "edited in the working tree");
+    const pairedLine = (line: string): boolean =>
+      line.includes("Workbench Fixture") && line.includes("+ # Fixture");
+
+    expect(setup.captureCharFrame().split("\n").some(pairedLine)).toBe(false);
+    const zoom = locateText(setup, NERD.zoom);
+
+    await setup.mockMouse.click(zoom.column, zoom.row);
+    await waitForState(setup, () => setup.captureCharFrame().split("\n").some(pairedLine));
+    expect(setup.captureCharFrame().split("\n").some(pairedLine)).toBe(true);
+    setup.renderer.destroy();
+  });
+
+  test("reopening Changes after dismissing Welcome keeps file actions", async () => {
+    const setup = await renderWelcome();
+    const welcome = locateText(setup, "Welcome");
+
+    await setup.mockMouse.click(welcome.column + 8, welcome.row);
+    await setup.mockMouse.click(diffToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "edited in the working tree");
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("README.md");
+    expect(frame).toContain(NERD.copy);
+    const title = locateText(setup, "README.md");
+
+    await setup.mockMouse.click(title.column, title.row);
+    await waitForTextGone(setup, "edited in the working tree");
+    expect(setup.captureCharFrame()).toContain("README.md");
+    await setup.mockMouse.click(title.column, title.row);
+    await waitForText(setup, "edited in the working tree");
+    setup.renderer.destroy();
+  });
+
   test("the changes tree clears after the launch repo becomes clean", async () => {
     const setup = await renderWelcome();
 
@@ -766,6 +1011,49 @@ describe("the bare-launch welcome shell", () => {
     await waitForState(setup, () => diffToggleColumn(setup) === -1);
   });
 
+  test("the changes sidebar label opens one Changes tab beside Welcome and reactivates it", async () => {
+    const setup = await renderWelcome();
+
+    await setup.mockMouse.click(diffToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "edited in the working tree");
+    const firstHeader = setup.captureCharFrame().split("\n")[HEADER_ROW]!;
+
+    expect(firstHeader).toContain("Welcome");
+    expect(firstHeader).toContain("Changes");
+
+    const welcome = locateText(setup, "Welcome");
+
+    await setup.mockMouse.click(welcome.column, welcome.row);
+    await waitForText(setup, "Getting started");
+    await setup.mockMouse.click(diffToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "edited in the working tree");
+    expect(
+      setup
+        .captureCharFrame()
+        .split("\n")
+        [HEADER_ROW]!.match(/Changes/g),
+    ).toHaveLength(1);
+    setup.renderer.destroy();
+  });
+
+  test("the changes sidebar label activates Changes beside an open file tab", async () => {
+    const setup = await renderWelcome();
+
+    await waitForText(setup, "README.md");
+    const file = locateText(setup, "README.md");
+
+    await setup.mockMouse.click(file.column, file.row);
+    await waitForText(setup, "README.md");
+    await setup.mockMouse.click(diffToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "edited in the working tree");
+    const header = setup.captureCharFrame().split("\n")[HEADER_ROW]!;
+
+    expect(header).toContain("Welcome");
+    expect(header).toContain("README.md");
+    expect(header).toContain("Changes");
+    setup.renderer.destroy();
+  });
+
   test("a closed region draws its reopen divider in the header only, not full-height", async () => {
     const setup = await renderWelcome();
 

package/src/app-screens.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo, type Dispatch, type SetStateAction } from
 import type { Thread, MessageOutcome } from "@cueloop/schema";
 import { returnPaneFor } from "@cueloop/schema";
 import type { Theme } from "./theme";
-import type { QuickAction } from "./config";
+import type { DiffViewMode, QuickAction } from "./config";
 import type { LaunchLayout } from "./launch-layout";
 import { useRememberLayout } from "./use-remember-layout";
 import type { Mode, TreeAsk } from "./intent-dispatch";
@@ -30,6 +30,7 @@ import { ProjectTreeView } from "./components/ProjectTreeView";
 import { ChangesFileTree } from "./components/ChangesColumn";
 import { BareWorkbenchFileView, draftThread } from "./components/BareWorkbenchFileView";
 import { GridTabContent, type DiffSurfaceProps } from "./components/GridTabContent";
+import type { DiffFoldControls } from "./components/DiffContentView";
 import { useChangesWorkbench } from "./use-changes-workbench";
 import { useRepoChanges } from "./use-repo-changes";
 import { ConfirmDialog } from "./components/ConfirmDialog";
@@ -112,9 +113,9 @@ function WelcomeProjectPanel({
   mode: ProjectPanelMode;
   controller: ReviewController;
   /** Changes tree click -> open the file's working-tree diff. */
-  onOpenChangedFile: (path: string) => void;
+  onOpenChangedFile: (path: string, persistent?: boolean) => void;
   /** Project tree click -> open the file's read-only contents. */
-  onOpenProjectFile: (path: string) => void;
+  onOpenProjectFile: (path: string, persistent?: boolean) => void;
   focused?: boolean;
   theme: Theme;
 }): React.ReactNode {
@@ -177,6 +178,7 @@ export function NoThreadShell(props: {
   onRename: (id: string, title: string) => void;
   /** Drives the "/" quick actions and skills in the welcome playground's composer. */
   quickActions: QuickAction[];
+  diffView: DiffViewMode;
   /** Reports the welcome composer's open state, so the shell suspends its inbox keys while typing. */
   onWelcomeComposingChange: (composing: boolean) => void;
   /** The pane composition this vanilla launch restores; changes here are remembered for the next one. */
@@ -201,6 +203,7 @@ export function NoThreadShell(props: {
     onPin,
     onRename,
     quickActions,
+    diffView,
     onWelcomeComposingChange,
     layout,
   } = props;
@@ -222,13 +225,14 @@ export function NoThreadShell(props: {
     workbench.zoomed,
   );
   // the Changes tree opens a file's working-tree diff; the Project tree opens read-only contents
-  const openChangedFile = (path: string): void => {
+  const openChangedFile = (path: string, persistent?: boolean): void => {
     // no thread means no live-diff refresh loop, so re-capture on open or a long-lived shell goes
     // stale; the catch keeps a fire-and-forget refresh from throwing when the shell tears down
     void controller.repoChanges().catch(() => undefined);
-    workbench.openFile(path, "diff");
+    workbench.openFile(path, "diff", persistent);
   };
-  const openProjectFile = (path: string): void => workbench.openFile(path, "contents");
+  const openProjectFile = (path: string, persistent?: boolean): void =>
+    workbench.openFile(path, "contents", persistent);
   // a bare launch has no thread yet, so the diff renders against a draft session; the first note
   // promotes it to the per-repo workbench thread (commentOnWorkbenchDiff)
   const draft = useMemo(() => draftThread(), []);
@@ -256,6 +260,15 @@ export function NoThreadShell(props: {
     onUpdateAnnotation: () => {},
     onExit: () => {},
   };
+  const diffFold: DiffFoldControls = {
+    isCollapsed: (file) => controller.isFileCollapsed(file),
+    isExpanded: (file) => controller.isFileExpanded(file),
+    canExpand: (file) => controller.canExpandFile(file),
+    onToggleCollapse: (file) =>
+      controller.setFileCollapsed(file, !controller.isFileCollapsed(file)),
+    onToggleExpand: (file) => controller.setFileExpanded(file, !controller.isFileExpanded(file)),
+    onCopyPath: (file) => controller.copyFilePath(file),
+  };
 
   return (
     <ThemeProvider theme={theme}>
@@ -313,6 +326,7 @@ export function NoThreadShell(props: {
               focusedGroupId={workbench.activeGroup}
               onFocusGroup={workbench.focusGroup}
               onActivateTab={workbench.activate}
+              onKeepTab={workbench.keepTab}
               onCloseTab={workbench.close}
               onSplit={workbench.split}
               onZoom={workbench.toggleZoom}
@@ -340,6 +354,9 @@ export function NoThreadShell(props: {
                     rows={controller.rows()}
                     surface={bareSurface}
                     rejectedRows={EMPTY_ROWS}
+                    fold={diffFold}
+                    fileStats={controller.fileStats()}
+                    split={diffView === "split" && workbench.zoomed}
                     dimmed={false}
                     readFile={(path) => controller.repoReadFile(path)}
                     onAddFileComment={(path, anchor, body) =>
@@ -396,7 +413,12 @@ export function NoThreadShell(props: {
             />
           ) : null}
           {props.toast ? (
-            <Toast title={props.toast.title} body={props.toast.body} theme={theme} />
+            <Toast
+              title={props.toast.title}
+              body={props.toast.body}
+              onDismiss={() => controller.dismissToast()}
+              theme={theme}
+            />
           ) : null}
         </AppShell>
       </MenuControlProvider>
@@ -460,6 +482,7 @@ export function TrailingOverlays(props: {
   theme: Theme;
   mode: Mode;
   toast: ToastState | null;
+  onDismissToast: () => void;
   setMode: Dispatch<SetStateAction<Mode>>;
   dispatch: (intent: Intent) => void;
 }): React.ReactNode {
@@ -473,6 +496,7 @@ export function TrailingOverlays(props: {
     theme,
     mode,
     toast,
+    onDismissToast,
     setMode,
     dispatch,
   } = props;
@@ -571,7 +595,9 @@ export function TrailingOverlays(props: {
           theme={theme}
         />
       ) : null}
-      {toast ? <Toast title={toast.title} body={toast.body} theme={theme} /> : null}
+      {toast ? (
+        <Toast title={toast.title} body={toast.body} onDismiss={onDismissToast} theme={theme} />
+      ) : null}
     </>
   );
 }

package/src/components/AppShell.zoom.test.tsx

@@ -11,7 +11,7 @@ import { testRender } from "@opentui/react/test-utils";
 import React from "react";
 import { AppShell } from "./AppShell";
 import { EditorGrid } from "./EditorGrid";
-import { changesTab, makeGroup } from "./editor-grid";
+import { changesTab, makeGroup, splitGroup } from "./editor-grid";
 import { NERD } from "./primitives/icons";
 import { allowEventLoopUpdates } from "../test-support";
 
@@ -21,7 +21,11 @@ async function zoomIconColumn(
   width: number,
   zoomed: boolean,
   sidebarOpen: boolean,
+  splitEditor = false,
 ): Promise<number> {
+  const editor = splitEditor
+    ? splitGroup(grid, grid.id, "right")
+    : { tree: grid, focusGroupId: grid.id };
   const setup = await testRender(
     <AppShell
       sidebarOpen={sidebarOpen}
@@ -40,8 +44,8 @@ async function zoomIconColumn(
       projectPanel={<text>project</text>}
       changesPanel={
         <EditorGrid
-          tree={grid}
-          focusedGroupId={grid.id}
+          tree={editor.tree}
+          focusedGroupId={editor.focusGroupId}
           onFocusGroup={() => {}}
           onActivateTab={() => {}}
           onCloseTab={() => {}}
@@ -132,4 +136,13 @@ describe("zoom icon in the shell", () => {
     // before it, the same inset the right-sidebar icon keeps from its own edge
     for (const column of setupColumns) expect(128 - column).toBe(2);
   });
+
+  test("a split editor keeps the zoom icon clear of the Project border", async () => {
+    const columns = await Promise.all([
+      zoomIconColumn(160, false, false, true),
+      zoomIconColumn(160, true, false, true),
+    ]);
+
+    for (const column of columns) expect(128 - column).toBe(2);
+  });
 });

package/src/components/ChangesColumn.tsx

@@ -86,7 +86,7 @@ export interface ChangesColumnProps {
   files?: readonly DiffFileContents[];
   /** The path whose diff the sheet is scrolled to, highlighted in the tree. */
   selectedPath?: string;
-  onSelectFile: (path: string) => void;
+  onSelectFile: (path: string, persistent?: boolean) => void;
   /** Comments per file path, shown as a dot-and-count badge on each entry. */
   commentCounts?: ReadonlyMap<string, number>;
   focused?: boolean;
@@ -141,18 +141,23 @@ export function ChangesFileTree({
     if (key.name === "k" || key.name === "up") return setCursor(Math.max(cursorIndex - 1, 0));
     const row = rows[cursorIndex];
     if (!row) return;
-    if (key.name === "tab" || key.name === "return" || key.name === "enter")
-      return row.isFolder ? toggle(row.id) : onSelectFile(row.id);
+    if (key.name === "return" || key.name === "enter")
+      return row.isFolder ? toggle(row.id) : onSelectFile(row.id, true);
     if (key.name === "l" && row.isFolder && collapsedIds.has(row.id)) return toggle(row.id);
     if (key.name === "h" && row.isFolder && !collapsedIds.has(row.id)) return toggle(row.id);
   });
 
   return (
-    <ScrollArea>
+    <ScrollArea
+      id="tree-scroll"
+      revealId={focused ? rows[cursorIndex]?.id : undefined}
+      gestureWheel
+    >
       <Tree
         nodes={nodes}
         expandedIds={expandedIds}
         selectedId={focused ? rows[cursorIndex]?.id : selectedPath}
+        singleLine
         flattenEmptyDirectories
         showStatus
         onSelect={(id) => {
@@ -161,6 +166,7 @@ export function ChangesFileTree({
           if (index >= 0) setCursor(index);
           onSelectFile(id);
         }}
+        onDoubleSelect={(id) => onSelectFile(id, true)}
         onToggle={toggle}
         theme={theme}
       />