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

package/src/components/ProjectTreeView.test.tsx

@@ -1,14 +1,26 @@
-/** The Project tree navigates by keyboard when focused: j/k move the cursor, tab folds a folder or
+/** The Project 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, type Renderable } from "@opentui/core";
 import { ProjectTreeView } from "./ProjectTreeView";
-import { locateText, settle, waitForText } from "../test-support";
+import { locateText, settle, waitForText, waitForTextGone } from "../test-support";
 import { DARK } from "../theme";
 
-test("tab expands a folder, then j moves down and tab opens the file", async () => {
+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;
+}
+
+test("Enter expands a folder, then j moves down and Enter opens the file", async () => {
   const opened: string[] = [];
   const setup = await testRender(
     <ProjectTreeView
@@ -22,14 +34,14 @@ test("tab expands a folder, then j moves down and tab opens the file", async ()
   await settle(setup);
   await waitForText(setup, "src");
 
-  // cursor starts on the "src" folder; tab expands it
-  setup.mockInput.pressKey("TAB");
+  // cursor starts on the "src" folder; Enter expands it
+  setup.mockInput.pressKey("RETURN");
   await waitForText(setup, "a.ts");
 
-  // j moves onto the file, tab opens it
+  // j moves onto the file, Enter opens it
   setup.mockInput.pressKey("j");
   await settle(setup);
-  setup.mockInput.pressKey("TAB");
+  setup.mockInput.pressKey("RETURN");
   await settle(setup);
 
   expect(opened).toEqual(["src/a.ts"]);
@@ -37,6 +49,91 @@ test("tab expands a folder, then j moves down and tab opens the file", async ()
   setup.renderer.destroy();
 });
 
+test("keyboard navigation reveals the selected project row", async () => {
+  const paths = Array.from(
+    { length: 35 },
+    (_, index) => `file-${String(index).padStart(2, "0")}.ts`,
+  );
+  const setup = await testRender(
+    <ProjectTreeView loadFiles={async () => paths} 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("project wheel scrolling accelerates during a gesture and resets after a pause", async () => {
+  const paths = Array.from(
+    { length: 35 },
+    (_, index) => `file-${String(index).padStart(2, "0")}.ts`,
+  );
+  const setup = await testRender(
+    <ProjectTreeView loadFiles={async () => paths} onSelectFile={() => {}} 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 acceleration = scrollbox.scrollAcceleration;
+  const first = acceleration.tick(1000);
+  const burst = Array.from({ length: 10 }, (_, index) => acceleration.tick(1016 + index * 16));
+  const tail = acceleration.tick(1400);
+
+  expect(first).toBe(1);
+  expect(Math.max(...burst)).toBeGreaterThan(first);
+  expect(tail).toBe(1);
+  acceleration.reset();
+  await setup.mockMouse.scroll(10, 4, "down");
+  await settle(setup);
+  expect(scrollbox.scrollTop).toBeGreaterThan(0);
+  setup.renderer.destroy();
+});
+
+test("long project filenames stay on one row without an ellipsis", async () => {
+  const path = "src/ChangesFileTree.test.tsx";
+  const setup = await testRender(
+    <ProjectTreeView loadFiles={async () => [path]} onSelectFile={() => {}} focused theme={DARK} />,
+    { width: 22, height: 8 },
+  );
+
+  await waitForText(setup, "src");
+  setup.mockInput.pressKey("RETURN");
+  await settle(setup);
+  const frame = setup.captureCharFrame();
+  const row = findById(setup.renderer.root, `tree-row-${path}`);
+
+  expect(row?.height).toBe(1);
+  expect(frame).not.toContain("…");
+  expect(frame).toContain("ChangesFile");
+  setup.renderer.destroy();
+});
+
 test("without focus the keyboard does nothing", async () => {
   const opened: string[] = [];
   const setup = await testRender(
@@ -50,7 +147,7 @@ test("without focus the keyboard does nothing", async () => {
   await settle(setup);
   await waitForText(setup, "src");
 
-  setup.mockInput.pressKey("TAB");
+  setup.mockInput.pressKey("RETURN");
   await settle(setup);
   expect(setup.captureCharFrame()).not.toContain("a.ts");
   expect(opened).toEqual([]);
@@ -73,3 +170,64 @@ test("the empty project hint stays centered in the panel", async () => {
   expect(position.row).toBeLessThanOrEqual(6);
   setup.renderer.destroy();
 });
+
+test("the visible tree removes deleted files without remounting", async () => {
+  let files = ["README.md", "gone.ts"];
+  const setup = await testRender(
+    <ProjectTreeView loadFiles={async () => files} onSelectFile={() => {}} theme={DARK} />,
+    { width: 40, height: 12 },
+  );
+
+  await waitForText(setup, "gone.ts");
+  files = ["README.md"];
+  await waitForTextGone(setup, "gone.ts");
+  expect(setup.captureCharFrame()).toContain("README.md");
+  setup.renderer.destroy();
+});
+
+test("refresh keeps the selected file when an earlier file disappears", async () => {
+  let files = ["a.ts", "b.ts", "c.ts"];
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ProjectTreeView
+      loadFiles={async () => files}
+      onSelectFile={(path) => opened.push(path)}
+      focused
+      theme={DARK}
+    />,
+    { width: 40, height: 12 },
+  );
+
+  await waitForText(setup, "b.ts");
+  setup.mockInput.pressKey("j");
+  await settle(setup);
+  files = ["b.ts", "c.ts"];
+  await waitForTextGone(setup, "a.ts");
+  setup.mockInput.pressKey("RETURN");
+  await settle(setup);
+
+  expect(opened).toEqual(["b.ts"]);
+  setup.renderer.destroy();
+});
+
+test("a double-click requests a persistent file tab", async () => {
+  const opened: { path: string; persistent: boolean }[] = [];
+  const setup = await testRender(
+    <ProjectTreeView
+      loadFiles={async () => ["README.md"]}
+      onSelectFile={(path, persistent) => opened.push({ path, persistent: persistent === true })}
+      theme={DARK}
+    />,
+    { width: 40, height: 12 },
+  );
+
+  await waitForText(setup, "README.md");
+  const file = locateText(setup, "README.md");
+  await setup.mockMouse.doubleClick(file.column, file.row);
+  expect(opened).toEqual([
+    { path: "README.md", persistent: false },
+    { path: "README.md", persistent: false },
+    { path: "README.md", persistent: true },
+  ]);
+  setup.renderer.destroy();
+});

package/src/components/ProjectTreeView.tsx

@@ -3,7 +3,7 @@
 // on the session id so switching sessions remounts it and never shows the previous repository's paths.
 
 import { ScrollArea } from "./ScrollArea";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useEffectEvent, useMemo, useState } from "react";
 import { useKeyboard } from "@opentui/react";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
@@ -11,10 +11,12 @@ import { Tree } from "./primitives/Tree";
 import { flattenTree } from "./primitives/tree-model";
 import { buildPathTree } from "./file-tree";
 
+const PROJECT_FILES_REFRESH_MS = 2000;
+
 export interface ProjectTreeViewProps {
   loadFiles: () => Promise<string[]>;
-  onSelectFile: (path: string) => void;
-  /** The pane owns the keyboard: j/k and arrows move the cursor, tab/enter open or fold. */
+  onSelectFile: (path: string, persistent?: boolean) => void;
+  /** The pane owns the keyboard: j/k and arrows move the cursor; Enter opens or folds. */
   focused?: boolean;
   theme?: Theme;
 }
@@ -28,14 +30,14 @@ export function ProjectTreeView({
   const tokens = useComponentTheme(theme);
   const [paths, setPaths] = useState<readonly string[] | null>(null);
   const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(new Set());
-  const [cursor, setCursor] = useState(0);
+  const [cursorId, setCursorId] = useState<string | null>(null);
   const nodes = useMemo(() => (paths ? buildPathTree(paths) : []), [paths]);
   const rows = useMemo(() => flattenTree(nodes, { expandedIds }), [nodes, expandedIds]);
-  const cursorIndex = Math.min(cursor, Math.max(0, rows.length - 1));
-  const loadRef = useRef(loadFiles);
-  useEffect(() => {
-    loadRef.current = loadFiles;
-  });
+  const cursorIndex = Math.max(
+    0,
+    rows.findIndex((row) => row.id === cursorId),
+  );
+  const loadLatestFiles = useEffectEvent(loadFiles);
 
   const toggle = (id: string): void =>
     setExpandedIds((current) => {
@@ -50,29 +52,49 @@ export function ProjectTreeView({
   useKeyboard((key) => {
     if (!focused || rows.length === 0) return;
     if (key.name === "j" || key.name === "down")
-      return setCursor(Math.min(cursorIndex + 1, rows.length - 1));
-    if (key.name === "k" || key.name === "up") return setCursor(Math.max(cursorIndex - 1, 0));
+      return setCursorId(rows[Math.min(cursorIndex + 1, rows.length - 1)]!.id);
+    if (key.name === "k" || key.name === "up")
+      return setCursorId(rows[Math.max(cursorIndex - 1, 0)]!.id);
     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 && !expandedIds.has(row.id)) return toggle(row.id);
     if (key.name === "h" && row.isFolder && expandedIds.has(row.id)) return toggle(row.id);
   });
 
   useEffect(() => {
-    let alive = true;
-    void loadRef.current().then(
-      (files) => {
-        if (alive) setPaths(files);
-      },
-      () => {
-        if (alive) setPaths([]);
-      },
-    );
+    let cancelled = false;
+    let requestInFlight = false;
+
+    const refreshFiles = async (): Promise<void> => {
+      if (requestInFlight) return;
+      requestInFlight = true;
+
+      try {
+        const files = await loadLatestFiles();
+
+        if (!cancelled) {
+          setPaths((previous) =>
+            previous?.length === files.length &&
+            previous.every((path, index) => path === files[index])
+              ? previous
+              : files,
+          );
+        }
+      } catch {
+        if (!cancelled) setPaths((previous) => previous ?? []);
+      } finally {
+        requestInFlight = false;
+      }
+    };
+
+    void refreshFiles();
+    const timer = setInterval(() => void refreshFiles(), PROJECT_FILES_REFRESH_MS);
 
     return () => {
-      alive = false;
+      cancelled = true;
+      clearInterval(timer);
     };
   }, []);
 
@@ -106,17 +128,21 @@ export function ProjectTreeView({
   }
 
   return (
-    <ScrollArea>
+    <ScrollArea
+      id="tree-scroll"
+      revealId={focused ? rows[cursorIndex]?.id : undefined}
+      gestureWheel
+    >
       <Tree
         nodes={nodes}
         expandedIds={expandedIds}
         selectedId={focused ? rows[cursorIndex]?.id : undefined}
+        singleLine
         onSelect={(id) => {
-          const index = rows.findIndex((row) => row.id === id);
-
-          if (index >= 0) setCursor(index);
+          setCursorId(id);
           onSelectFile(id);
         }}
+        onDoubleSelect={(id) => onSelectFile(id, true)}
         onToggle={toggle}
         theme={theme}
       />

package/src/components/ScrollArea.tsx

@@ -4,8 +4,8 @@
  * Pass scrollRef to keep scrollTo / scrollChildIntoView on the underlying ScrollBox.
  */
 
-import React, { useRef, type ReactNode, type RefObject } from "react";
-import type { ScrollBoxRenderable } from "@opentui/core";
+import React, { useLayoutEffect, useMemo, useRef, type ReactNode, type RefObject } from "react";
+import { MacOSScrollAccel, type ScrollBoxRenderable } from "@opentui/core";
 import type { Theme } from "../theme";
 import { OverlayScrollbar } from "./OverlayScrollbar";
 
@@ -14,6 +14,11 @@ export interface ScrollAreaProps {
   focused?: boolean;
   theme?: Theme;
   scrollRef?: RefObject<ScrollBoxRenderable | null>;
+  id?: string;
+  /** Reveal this mounted row when keyboard selection changes. */
+  revealId?: string;
+  /** Use gesture acceleration for a scrollable file tree. */
+  gestureWheel?: boolean;
 }
 
 export function ScrollArea({
@@ -21,19 +26,33 @@ export function ScrollArea({
   focused = false,
   theme,
   scrollRef,
+  id,
+  revealId,
+  gestureWheel = false,
 }: ScrollAreaProps): React.ReactNode {
   const innerRef = useRef<ScrollBoxRenderable | null>(null);
+  const wheelAcceleration = useMemo(
+    () => (gestureWheel ? new MacOSScrollAccel({ A: 0.4, tau: 4, maxMultiplier: 3 }) : undefined),
+    [gestureWheel],
+  );
   const attach = (node: ScrollBoxRenderable | null): void => {
     innerRef.current = node;
     if (scrollRef) scrollRef.current = node;
   };
 
+  useLayoutEffect(() => {
+    if (revealId === undefined) return;
+    innerRef.current?.scrollChildIntoView(`tree-row-${revealId}`);
+  }, [revealId]);
+
   return (
     <box style={{ flexGrow: 1, flexDirection: "row" }}>
       <scrollbox
+        id={id}
         ref={attach}
         style={{ flexGrow: 1 }}
         focused={focused}
+        scrollAcceleration={wheelAcceleration}
         verticalScrollbarOptions={{ visible: false }}
       >
         {children}

package/src/components/Toast.tsx

@@ -7,13 +7,14 @@ import { Dialog } from "./primitives/Dialog";
 export interface ToastProps {
   title?: string;
   body: string;
+  onDismiss?: () => void;
   theme?: Theme;
 }
 
 /** A toast never spans the screen: a long message wraps inside this, like the settings dialog. */
 const TOAST_MAX_WIDTH = 64;
 
-export function Toast({ title, body, theme }: ToastProps): React.ReactNode {
+export function Toast({ title, body, onDismiss, theme }: ToastProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
   const width = Math.min(
@@ -34,6 +35,7 @@ export function Toast({ title, body, theme }: ToastProps): React.ReactNode {
       width={width}
       height={height}
       background={tokens.elevated}
+      onDismiss={onDismiss}
       theme={theme}
     >
       <box

package/src/components/WelcomePlayground.test.tsx

@@ -10,7 +10,7 @@ import React from "react";
 import { WelcomePlayground } from "./WelcomePlayground";
 import { DARK } from "../theme";
 import { CLIENT_VERSION } from "../version";
-import { dragText, typeText, pressKey, waitForText } from "../test-support";
+import { dragText, locateText, press, typeText, pressKey, waitForText } from "../test-support";
 
 describe("WelcomePlayground", () => {
   test("the copy prompts the select-and-type and the slash gestures", async () => {
@@ -46,4 +46,31 @@ describe("WelcomePlayground", () => {
 
     setup.renderer.destroy();
   });
+
+  test("the caret marker remains visible when Up crosses an empty line", async () => {
+    const setup = await testRender(<WelcomePlayground quickActions={[]} theme={DARK} />, {
+      width: 100,
+      height: 28,
+    });
+
+    await waitForText(setup, "Start");
+    const start = locateText(setup, "Start");
+
+    await setup.mockMouse.click(start.column, start.row);
+    await press(setup, "escape");
+
+    const markerRows = () =>
+      setup
+        .captureCharFrame()
+        .split("\n")
+        .flatMap((line, row) => (line.includes("▎") ? [row] : []));
+
+    expect(markerRows()).toEqual([start.row]);
+    await press(setup, "up");
+    expect(markerRows()).toEqual([start.row - 1]);
+    await press(setup, "up");
+    expect(markerRows()).toEqual([start.row - 2]);
+
+    setup.renderer.destroy();
+  });
 });

package/src/components/__snapshots__/stories.test.tsx.snap

@@ -181,12 +181,12 @@ exports[`stories catalog Chrome/Breadcrumb/SessionHeader renders, snapshots, and
 exports[`stories catalog Surfaces/ChangesColumn/Changed renders, snapshots, and carries its colors: Surfaces/ChangesColumn/Changed 1`] = `
 "│  packages                                                
 │    client/src                                            
-│      App.tsx              M                              
+│      App.tsx               M                             
 │      components                                          
-│        ChangesColumn.tsx  A                              
+│        ChangesColumn.tsx   A                             
 │    daemon/src                                            
-│      thread-review.ts     D                              
-│  README.md                M                              
+│      thread-review.ts      D                             
+│  README.md                 M                             
 │                                                           
 │                                                           
 │                                                           
@@ -555,7 +555,7 @@ exports[`stories catalog Chrome/DiscussionMarkerRail/Dots renders, snapshots, an
 `;
 
 exports[`stories catalog Surfaces/EditorGrid/OneGroup renders, snapshots, and carries its colors: Surfaces/EditorGrid/OneGroup 1`] = `
-" Changes   │ App.tsx   │                                                      ⛶ 
+" Changes   │ App.tsx   │                                               split  ⛶ 
 ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
                                                                                 
  the whole diff                                                                 
@@ -575,22 +575,42 @@ exports[`stories catalog Surfaces/EditorGrid/OneGroup renders, snapshots, and ca
 `;
 
 exports[`stories catalog Surfaces/EditorGrid/SplitGroups renders, snapshots, and carries its colors: Surfaces/EditorGrid/SplitGroups 1`] = `
-" plugin.json   │                         split  ⛶ │ plugin.json   │                         split  ⛶
-‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾│‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
-                                                  │                                                 
- .claude-plugin/plugin.json                       │ .claude-plugin/plugin.json                      
-                                                  │                                                 
-                                                  │                                                 
-                                                  │                                                 
-                                                  │                                                 
-                                                  │                                                 
-                                                  │                                                 
-                                                  │                                                 
-                                                  │                                                 
-                                                  │                                                 
-                                                  │                                                 
-                                                  │                                                 
-                                                  │                                                 
+" Changes   │                               split │ plugin.json   │                         split  ⛶ 
+‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾│‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
+                                                 │                                                  
+ the whole diff                                  │ .claude-plugin/plugin.json                       
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+"
+`;
+
+exports[`stories catalog Surfaces/EditorGrid/WholeCellSizing renders, snapshots, and carries its colors: Surfaces/EditorGrid/WholeCellSizing 1`] = `
+"Whole-cell split sizing                                                                             
+100 cells = 49 left + 1 divider + 50 right                                                          
+Fix the leading width; let the last group take the remainder.                                       
+ Changes   │                               split │ plugin.json   │                         split  ⛶ 
+‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾│‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
+                                                 │                                                  
+ the whole diff                                  │ .claude-plugin/plugin.json                       
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
+                                                 │                                                  
 "
 `;