@cueloop/client 0.1.0-alpha.91 → 0.1.0-alpha.93

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/AnnotatableFileView.test.tsx

@@ -4,12 +4,13 @@
  */
 
 import { describe, expect, mock, test } from "bun:test";
+import type { RGBA } from "@opentui/core";
 import { testRender } from "@opentui/react/test-utils";
 import React from "react";
 import { SCHEMA_VERSION, type Anchor, type Thread } from "@cueloop/schema";
 import { AnnotatableFileView } from "./AnnotatableFileView";
 import { DARK } from "../theme";
-import { dragText, typeText, pressKey, waitForText } from "../test-support";
+import { allowEventLoopUpdates, dragText, typeText, pressKey, waitForText } from "../test-support";
 
 const SAMPLE = "export function add(a: number, b: number) {\n  return a + b;\n}\n";
 
@@ -29,7 +30,53 @@ function planSession(): Thread {
 
 const noop = (): void => {};
 
+function colorHex(color: RGBA): string {
+  const [red, green, blue] = color.toInts();
+
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
+}
+
 describe("AnnotatableFileView", () => {
+  for (const { path, source, keyword } of [
+    { path: "src/add.ts", source: "export const add = 1;", keyword: "export" },
+    { path: "src/add.js", source: "const add = 1;", keyword: "const" },
+  ]) {
+    test(`highlights ${path} by its detected language`, async () => {
+      allowEventLoopUpdates();
+      const setup = await testRender(
+        <AnnotatableFileView
+          path={path}
+          loadContents={() => Promise.resolve(source)}
+          session={planSession()}
+          quickActions={[]}
+          observer={false}
+          onAddComment={noop}
+          onReply={noop}
+          onUpdateAnnotation={noop}
+          onExit={noop}
+          theme={DARK}
+        />,
+        { width: 64, height: 12 },
+      );
+      let highlighted = false;
+
+      for (let attempt = 0; attempt < 60 && !highlighted; attempt++) {
+        await setup.renderOnce();
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        highlighted = setup.captureSpans().lines.some((line) =>
+          line.spans
+            .filter((span) => colorHex(span.fg) === DARK.accent)
+            .map((span) => span.text)
+            .join("")
+            .includes(keyword),
+        );
+      }
+
+      expect(highlighted).toBe(true);
+      setup.renderer.destroy();
+    }, 25000);
+  }
+
   test("commenting a file line hands up an anchor that quotes the line", async () => {
     const onAddComment = mock((_anchor: Anchor, _body: string) => {});
     const setup = await testRender(

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}
       />

package/src/components/ChangesFileTree.test.tsx

@@ -1,14 +1,26 @@
-/** The changed-files tree navigates by keyboard when focused: j/k move the cursor, tab folds a folder
+/** The changed-files tree navigates by keyboard when focused: j/k move the cursor, Enter folds a folder
  * or opens a file. */
 
 import { test, expect } from "bun:test";
 import React from "react";
 import { testRender } from "@opentui/react/test-utils";
+import { ScrollBoxRenderable, TextRenderable, type Renderable } from "@opentui/core";
 import type { DiffFileContents } from "@cueloop/schema";
 import { ChangesFileTree } from "./ChangesColumn";
 import { settle, waitForText } from "../test-support";
 import { DARK } from "../theme";
 
+function findById(node: Renderable, id: string): Renderable | undefined {
+  if (node.id === id) return node;
+  for (const child of node.getChildren()) {
+    const found = findById(child, id);
+
+    if (found) return found;
+  }
+
+  return undefined;
+}
+
 const file = (path: string): DiffFileContents => ({
   path,
   oldContents: "",
@@ -18,7 +30,7 @@ const file = (path: string): DiffFileContents => ({
 
 const files = [file("src/a.ts"), file("src/b.ts")];
 
-test("j moves onto a file and tab opens it", async () => {
+test("j moves onto a file and Enter opens it", async () => {
   const opened: string[] = [];
   const setup = await testRender(
     <ChangesFileTree
@@ -35,7 +47,7 @@ test("j moves onto a file and tab opens it", async () => {
   // folders open by default; cursor starts on the "src" folder, j steps onto a.ts
   setup.mockInput.pressKey("j");
   await settle(setup);
-  setup.mockInput.pressKey("TAB");
+  setup.mockInput.pressKey("RETURN");
   await settle(setup);
 
   expect(opened).toEqual(["src/a.ts"]);
@@ -43,6 +55,62 @@ test("j moves onto a file and tab opens it", async () => {
   setup.renderer.destroy();
 });
 
+test("Tab leaves the focused tree without opening a file", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ChangesFileTree
+      files={files}
+      onSelectFile={(path) => opened.push(path)}
+      focused
+      theme={DARK}
+    />,
+    { width: 40, height: 12 },
+  );
+
+  await waitForText(setup, "a.ts");
+  setup.mockInput.pressKey("j");
+  setup.mockInput.pressKey("TAB");
+  await settle(setup);
+  expect(opened).toEqual([]);
+  setup.renderer.destroy();
+});
+
+test("keyboard navigation reveals the selected changed file", async () => {
+  const manyFiles = Array.from({ length: 35 }, (_, index) =>
+    file(`file-${String(index).padStart(2, "0")}.ts`),
+  );
+  const setup = await testRender(
+    <ChangesFileTree files={manyFiles} onSelectFile={() => {}} focused theme={DARK} />,
+    { width: 28, height: 8 },
+  );
+
+  await waitForText(setup, "file-00.ts");
+  const scrollbox = findById(setup.renderer.root, "tree-scroll");
+
+  if (!(scrollbox instanceof ScrollBoxRenderable)) throw new Error("tree scrollbox missing");
+  const scrollSteps: number[] = [];
+
+  for (const [index, key] of Array.from({ length: 15 }, () => "j").entries()) {
+    const before = scrollbox.scrollTop;
+
+    setup.mockInput.pressKey(key);
+    // eslint-disable-next-line no-await-in-loop
+    await settle(setup);
+    scrollSteps.push(scrollbox.scrollTop - before);
+    const row = scrollbox.content.findDescendantById(
+      `tree-row-file-${String(index + 1).padStart(2, "0")}.ts`,
+    );
+
+    expect(row?.y).toBeGreaterThanOrEqual(scrollbox.viewport.y);
+    expect(row?.y).toBeLessThan(scrollbox.viewport.y + scrollbox.viewport.height);
+  }
+
+  expect(scrollbox.scrollTop).toBeGreaterThan(0);
+  expect(Math.max(...scrollSteps)).toBe(1);
+  expect(setup.captureCharFrame()).toContain("file-15.ts");
+  setup.renderer.destroy();
+});
+
 test("without focus the keyboard opens nothing", async () => {
   const opened: string[] = [];
   const setup = await testRender(
@@ -53,9 +121,59 @@ test("without focus the keyboard opens nothing", async () => {
   await waitForText(setup, "a.ts");
 
   setup.mockInput.pressKey("j");
-  setup.mockInput.pressKey("TAB");
+  setup.mockInput.pressKey("RETURN");
   await settle(setup);
   expect(opened).toEqual([]);
 
   setup.renderer.destroy();
 });
+
+test("a selected long filename has no empty continuation row", async () => {
+  for (const width of [33, 32, 31, 30, 29, 28, 27, 26, 25, 24]) {
+    const setup = await testRender(
+      <ChangesFileTree
+        files={[
+          file("packages/client/src/App.workbench.test.tsx"),
+          file("packages/client/src/next.ts"),
+        ]}
+        onSelectFile={() => {}}
+        focused
+        theme={DARK}
+      />,
+      { width, height: 12 },
+    );
+
+    await settle(setup);
+    setup.mockInput.pressKey("j");
+    await settle(setup);
+    const frame = setup.captureCharFrame().split("\n");
+    const selectedLine = frame.findIndex((line) => line.includes("App.wor"));
+    const row = findById(
+      setup.renderer.root,
+      "tree-row-packages/client/src/App.workbench.test.tsx",
+    );
+
+    expect(selectedLine).toBeGreaterThanOrEqual(0);
+    expect(frame[selectedLine + 1]).toContain("next.ts");
+    expect(row?.height).toBe(1);
+    setup.renderer.destroy();
+  }
+});
+
+test("horizontal name scrolling reveals the final extension beside the status", async () => {
+  const path = "src/sidebar-scroll.test.tsx";
+  const setup = await testRender(
+    <ChangesFileTree files={[file(path)]} onSelectFile={() => {}} focused theme={DARK} />,
+    { width: 24, height: 8 },
+  );
+
+  await waitForText(setup, "src");
+  const label = findById(setup.renderer.root, `tree-label-${path}`);
+
+  if (!(label instanceof TextRenderable)) throw new Error("file label missing");
+  expect(label.maxScrollX).toBeGreaterThan(0);
+  label.scrollX = label.maxScrollX;
+  await settle(setup);
+  expect(setup.captureCharFrame()).toContain(".tsx");
+  setup.renderer.destroy();
+});