@cueloop/client 0.1.0-alpha.74 → 0.1.0-alpha.76

package/src/components/ChangesColumn.tsx

@@ -5,11 +5,12 @@
 
 import { ScrollArea } from "./ScrollArea";
 import React, { useMemo, useState } from "react";
+import { useKeyboard } from "@opentui/react";
 import type { DiffFileContents, Thread } from "@cueloop/schema";
 import type { Theme } from "../theme";
 import type { DiffRow } from "../view-diff";
 import { Tree } from "./primitives/Tree";
-import { allFolderIds } from "./primitives/tree-model";
+import { allFolderIds, flattenTree } from "./primitives/tree-model";
 import { IconButton } from "./primitives/IconButton";
 import { NERD } from "./primitives/icons";
 import { buildFileTree } from "./file-tree";
@@ -88,6 +89,7 @@ export interface ChangesColumnProps {
   onSelectFile: (path: string) => void;
   /** Comments per file path, shown as a dot-and-count badge on each entry. */
   commentCounts?: ReadonlyMap<string, number>;
+  focused?: boolean;
   width?: number;
   theme?: Theme;
 }
@@ -101,12 +103,14 @@ export function ChangesFileTree({
   selectedPath,
   onSelectFile,
   commentCounts,
+  focused = false,
   theme,
 }: Omit<ChangesColumnProps, "open" | "width">): React.ReactNode {
   const nodes = useMemo(() => buildFileTree(files, commentCounts), [files, commentCounts]);
   // every folder opens by default so each changed file is reachable; the user
   // only ever names the folders they fold shut, so a new file set stays open
   const [collapsedIds, setCollapsedIds] = useState<ReadonlySet<string>>(new Set());
+  const [cursor, setCursor] = useState(0);
   const expandedIds = useMemo(() => {
     const expanded = allFolderIds(nodes);
 
@@ -114,26 +118,50 @@ export function ChangesFileTree({
 
     return expanded;
   }, [nodes, collapsedIds]);
+  const rows = useMemo(
+    () => flattenTree(nodes, { expandedIds, flattenEmptyDirectories: true }),
+    [nodes, expandedIds],
+  );
+  const cursorIndex = Math.min(cursor, Math.max(0, rows.length - 1));
+
+  const toggle = (id: string): void =>
+    setCollapsedIds((current) => {
+      const next = new Set(current);
+
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+
+      return next;
+    });
+
+  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));
+    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 === "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>
       <Tree
         nodes={nodes}
         expandedIds={expandedIds}
-        selectedId={selectedPath}
+        selectedId={focused ? rows[cursorIndex]?.id : selectedPath}
         flattenEmptyDirectories
         showStatus
-        onSelect={onSelectFile}
-        onToggle={(id) =>
-          setCollapsedIds((current) => {
-            const next = new Set(current);
-
-            if (next.has(id)) next.delete(id);
-            else next.add(id);
+        onSelect={(id) => {
+          const index = rows.findIndex((row) => row.id === id);
 
-            return next;
-          })
-        }
+          if (index >= 0) setCursor(index);
+          onSelectFile(id);
+        }}
+        onToggle={toggle}
         theme={theme}
       />
     </ScrollArea>

package/src/components/ChangesFileTree.test.tsx

@@ -0,0 +1,61 @@
+/** The changed-files tree navigates by keyboard when focused: j/k move the cursor, tab 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 type { DiffFileContents } from "@cueloop/schema";
+import { ChangesFileTree } from "./ChangesColumn";
+import { settle, waitForText } from "../test-support";
+import { DARK } from "../theme";
+
+const file = (path: string): DiffFileContents => ({
+  path,
+  oldContents: "",
+  newContents: "x",
+  status: "modified",
+});
+
+const files = [file("src/a.ts"), file("src/b.ts")];
+
+test("j moves onto a file and tab opens it", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ChangesFileTree
+      files={files}
+      onSelectFile={(path) => opened.push(path)}
+      focused
+      theme={DARK}
+    />,
+    { width: 40, height: 12 },
+  );
+  await settle(setup);
+  await waitForText(setup, "a.ts");
+
+  // 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");
+  await settle(setup);
+
+  expect(opened).toEqual(["src/a.ts"]);
+
+  setup.renderer.destroy();
+});
+
+test("without focus the keyboard opens nothing", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ChangesFileTree files={files} onSelectFile={(path) => opened.push(path)} theme={DARK} />,
+    { width: 40, height: 12 },
+  );
+  await settle(setup);
+  await waitForText(setup, "a.ts");
+
+  setup.mockInput.pressKey("j");
+  setup.mockInput.pressKey("TAB");
+  await settle(setup);
+  expect(opened).toEqual([]);
+
+  setup.renderer.destroy();
+});

package/src/components/ConfirmDialog.tsx

@@ -40,7 +40,14 @@ export function ConfirmDialog({
   if (!isOpen) return null;
 
   return (
-    <Dialog isOpen title={title} width={Math.min(54, terminalWidth - 6)} height={7} theme={theme}>
+    <Dialog
+      isOpen
+      title={title}
+      width={Math.min(54, terminalWidth - 6)}
+      height={7}
+      onDismiss={onCancel}
+      theme={theme}
+    >
       <box
         style={{
           flexDirection: "column",

package/src/components/DiffContentView.tsx

@@ -9,7 +9,7 @@
  */
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { createTextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { createTextAttributes, type KeyEvent, type ScrollBoxRenderable } from "@opentui/core";
 import type { Thread } from "@cueloop/schema";
 import { diffRowText, fileChangeCounts, type DiffRow, type Mark } from "../view-diff";
 import type { TextSpan } from "../thread-selection";
@@ -95,6 +95,8 @@ export interface DiffContentViewProps {
   onAnnotate: (span: TextSpan, body: string) => void;
   onReply: (rootAnnotationId: string, body: string) => void;
   onUpdateAnnotation: (id: string, body: string) => void;
+  leaderCombos?: readonly string[];
+  onLeaderCommand?: (key: KeyEvent) => void;
   onExit: () => void;
   /** Row indices the owner rejected during curation; drawn struck through. */
   rejectedRows?: Set<number>;
@@ -487,6 +489,8 @@ export function DiffContentView({
   onAnnotate,
   onReply,
   onUpdateAnnotation,
+  leaderCombos,
+  onLeaderCommand,
   onExit,
   rejectedRows = EMPTY_REJECTED,
   fold,
@@ -520,6 +524,8 @@ export function DiffContentView({
     onAnnotate,
     onReply,
     onUpdateAnnotation,
+    leaderCombos,
+    onLeaderCommand,
     onExit,
   });
   const { palette } = surface;

package/src/components/DiscussionMarkerRail.tsx

@@ -160,9 +160,9 @@ export function DiscussionMarkerRail({
   // render the preview at the app root (above every pane rule); OpenTUI has no z-index, so an
   // absolute box inside this pane would be sliced by the next pane's border
   useEffect(() => {
-    setOverlay(preview());
+    setOverlay("discussion-preview", preview());
 
-    return () => clearOverlay();
+    return () => clearOverlay("discussion-preview");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hovered, discussions, tokens]);
 

package/src/components/EditorGrid.tsx

@@ -2,10 +2,13 @@
 // editor group with its own tab strip and header controls. The caller supplies renderTab so the grid
 // stays layout-only - a tab becomes a diff, a file's contents, or the aggregate Changes view upstream.
 
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { useKeyboard } from "@opentui/react";
 import type { BoxRenderable } from "@opentui/core";
 import { DARK, type Theme } from "../theme";
 import { useFrameMeasure } from "../use-frame-measure";
+import { useRootOverlay } from "./RootOverlay";
+import { useMenuControl } from "./menu-control";
 import { IconButton } from "./primitives/IconButton";
 import { NERD, HEADER_UNDERLINE_CHARS } from "./primitives/icons";
 import type { EditorGroup, EditorNode, EditorTab, SplitDirection } from "./editor-grid";
@@ -27,12 +30,21 @@ export interface EditorGridProps {
 }
 
 const SPLIT_ITEMS: ReadonlyArray<{ label: string; direction: SplitDirection; arrow: string }> = [
-  { label: "Split Left", direction: "left", arrow: "←" },
-  { label: "Split Right", direction: "right", arrow: "→" },
-  { label: "Split Up", direction: "up", arrow: "↑" },
-  { label: "Split Down", direction: "down", arrow: "↓" },
+  { label: "left", direction: "left", arrow: "←" },
+  { label: "right", direction: "right", arrow: "→" },
+  { label: "up", direction: "up", arrow: "↑" },
+  { label: "down", direction: "down", arrow: "↓" },
 ];
 
+const MENU_WIDTH = 12;
+
+/** An arrow key maps straight to its split direction; other keys leave the menu untouched. */
+function splitDirectionForKey(name: string): SplitDirection | null {
+  const item = SPLIT_ITEMS.find((entry) => entry.direction === name);
+
+  return item ? item.direction : null;
+}
+
 function EditorTabButton({
   tab,
   active,
@@ -151,13 +163,13 @@ function SplitMenu({
 }): React.ReactNode {
   return (
     <box
+      onMouseUp={(event) => event.stopPropagation()}
       style={{
+        width: MENU_WIDTH,
         flexDirection: "column",
-        flexShrink: 0,
         borderStyle: "single",
         borderColor: tokens.border,
-        // the panel token is transparent in the branded theme, so the menu reads terminal-through
-        backgroundColor: tokens.panel,
+        backgroundColor: tokens.elevated,
       }}
     >
       {SPLIT_ITEMS.map((item) => (
@@ -168,7 +180,7 @@ function SplitMenu({
         >
           <text fg={tokens.text}>{item.label}</text>
           <box style={{ flexGrow: 1 }} />
-          <text fg={tokens.textDim}>{` ${item.arrow}`}</text>
+          <text fg={tokens.textDim}>{item.arrow}</text>
         </box>
       ))}
     </box>
@@ -183,9 +195,63 @@ function EditorGroupPane({
   props: EditorGridProps;
 }): React.ReactNode {
   const tokens = props.theme ?? DARK;
-  const [menuOpen, setMenuOpen] = useState(false);
+  const menuControl = useMenuControl();
+  const { setOverlay, clearOverlay } = useRootOverlay();
+  const menuId = `split:${group.id}`;
+  const menuOpen = menuControl.openMenuId === menuId;
+  const splitRef = useRef<BoxRenderable | null>(null);
+  const anchor = useFrameMeasure(
+    () => ({
+      x: splitRef.current?.x ?? 0,
+      y: splitRef.current?.y ?? 0,
+      width: splitRef.current?.width ?? 0,
+    }),
+    (left, right) => left.x === right.x && left.y === right.y && left.width === right.width,
+    { x: 0, y: 0, width: 0 },
+    menuOpen,
+  );
   const active = group.tabs.find((tab) => tab.id === group.activeTabId) ?? group.tabs[0];
   const isFile = active?.kind === "file";
+
+  useKeyboard((key) => {
+    if (!menuOpen) return;
+    if (key.name === "escape") return menuControl.closeMenu();
+    const direction = splitDirectionForKey(key.name);
+    if (direction) {
+      props.onSplit(group.id, direction);
+      menuControl.closeMenu();
+    }
+  });
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    setOverlay(
+      "split-menu",
+      <box
+        onMouseUp={menuControl.closeMenu}
+        style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }}
+      >
+        <box
+          style={{
+            position: "absolute",
+            top: anchor.y + 1,
+            left: Math.max(0, anchor.x + anchor.width - MENU_WIDTH),
+          }}
+        >
+          <SplitMenu
+            onPick={(direction) => {
+              props.onSplit(group.id, direction);
+              menuControl.closeMenu();
+            }}
+            tokens={tokens}
+          />
+        </box>
+      </box>,
+    );
+
+    return () => clearOverlay("split-menu");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menuOpen, anchor, tokens]);
   // The strip windows its tabs rather than scrolling a nested scrollbox (which stalls the
   // renderer inside this header): tabs keep the width of their names, only the run that fits
   // renders, and the window follows the active tab so a tab opened past the edge is never hidden.
@@ -281,13 +347,14 @@ function EditorGroupPane({
         <box style={{ flexDirection: "row", flexShrink: 0, paddingLeft: 1, paddingRight: 1 }}>
           {/* search sits out until it does something; split takes its place */}
           {isFile ? (
-            <IconButton
-              glyph="split"
-              active={menuOpen}
-              onPress={() => setMenuOpen((open) => !open)}
-              marginRight={2}
-              theme={tokens}
-            />
+            <box ref={splitRef} style={{ flexShrink: 0, marginRight: 2 }}>
+              <IconButton
+                glyph="split"
+                active={menuOpen}
+                onPress={() => menuControl.toggleMenu(menuId)}
+                theme={tokens}
+              />
+            </box>
           ) : null}
           <IconButton
             glyph={NERD.zoom}
@@ -298,15 +365,6 @@ function EditorGroupPane({
           />
         </box>
       </box>
-      {menuOpen ? (
-        <SplitMenu
-          onPick={(direction) => {
-            setMenuOpen(false);
-            props.onSplit(group.id, direction);
-          }}
-          tokens={tokens}
-        />
-      ) : null}
       <box style={{ flexGrow: 1, flexDirection: "column" }}>
         {active ? props.renderTab(active, props.focusedGroupId === group.id) : null}
       </box>

package/src/components/GridTabContent.tsx

@@ -34,6 +34,8 @@ export type DiffSurfaceProps = Pick<
   | "onAnnotate"
   | "onReply"
   | "onUpdateAnnotation"
+  | "leaderCombos"
+  | "onLeaderCommand"
   | "onExit"
 >;
 
@@ -56,7 +58,14 @@ export function ChangesTabBody(props: {
 
   if (props.rows.length === 0) {
     return (
-      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+      <box
+        style={{
+          flexGrow: 1,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
         <text fg={props.theme.textDim}>No changes</text>
       </box>
     );

package/src/components/PanelColumn.tsx

@@ -44,6 +44,7 @@ export interface PanelColumnProps {
   header: React.ReactNode;
   /** Right-aligned header controls (toggles, search). */
   headerRight?: React.ReactNode;
+  onFocus?: () => void;
   children: React.ReactNode;
   theme?: Theme;
 }
@@ -53,11 +54,13 @@ export function PanelColumn({
   border,
   header,
   headerRight,
+  onFocus,
   children,
   theme,
 }: PanelColumnProps): React.ReactNode {
   return (
     <box
+      onMouseDown={onFocus}
       style={{
         width,
         // grow panes split evenly and clip wide content (a long diff line) rather than stretching

package/src/components/ProjectTreeView.test.tsx

@@ -1,32 +1,59 @@
-import { expect, test } from "bun:test";
+/** The Project tree navigates by keyboard when focused: j/k move the cursor, tab 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 { ProjectTreeView } from "./ProjectTreeView";
-import { clickText, waitForText } from "../test-support";
+import { settle, waitForText } from "../test-support";
 import { DARK } from "../theme";
 
-test("renders the loaded files as a tree and opens a file on click", async () => {
+test("tab expands a folder, then j moves down and tab opens the file", async () => {
   const opened: string[] = [];
   const setup = await testRender(
     <ProjectTreeView
-      loadFiles={() => Promise.resolve(["src/App.tsx", "README.md"])}
+      loadFiles={async () => ["src/a.ts", "README.md"]}
       onSelectFile={(path) => opened.push(path)}
+      focused
       theme={DARK}
     />,
-    { width: 40, height: 16 },
+    { width: 40, height: 12 },
   );
+  await settle(setup);
+  await waitForText(setup, "src");
+
+  // cursor starts on the "src" folder; tab expands it
+  setup.mockInput.pressKey("TAB");
+  await waitForText(setup, "a.ts");
+
+  // j moves onto the file, tab opens it
+  setup.mockInput.pressKey("j");
+  await settle(setup);
+  setup.mockInput.pressKey("TAB");
+  await settle(setup);
 
-  await waitForText(setup, "README.md");
-  await clickText(setup, "README.md");
+  expect(opened).toEqual(["src/a.ts"]);
 
-  expect(opened).toContain("README.md");
+  setup.renderer.destroy();
 });
 
-test("shows an empty hint when there are no files", async () => {
+test("without focus the keyboard does nothing", async () => {
+  const opened: string[] = [];
   const setup = await testRender(
-    <ProjectTreeView loadFiles={() => Promise.resolve([])} onSelectFile={() => {}} theme={DARK} />,
-    { width: 40, height: 8 },
+    <ProjectTreeView
+      loadFiles={async () => ["src/a.ts"]}
+      onSelectFile={(path) => opened.push(path)}
+      theme={DARK}
+    />,
+    { width: 40, height: 12 },
   );
+  await settle(setup);
+  await waitForText(setup, "src");
+
+  setup.mockInput.pressKey("TAB");
+  await settle(setup);
+  expect(setup.captureCharFrame()).not.toContain("a.ts");
+  expect(opened).toEqual([]);
 
-  await waitForText(setup, "empty");
+  setup.renderer.destroy();
 });

package/src/components/ProjectTreeView.tsx

@@ -4,31 +4,62 @@
 
 import { ScrollArea } from "./ScrollArea";
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useKeyboard } from "@opentui/react";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { Tree } from "./primitives/Tree";
+import { flattenTree } from "./primitives/tree-model";
 import { buildPathTree } from "./file-tree";
 
 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. */
+  focused?: boolean;
   theme?: Theme;
 }
 
 export function ProjectTreeView({
   loadFiles,
   onSelectFile,
+  focused = false,
   theme,
 }: ProjectTreeViewProps): React.ReactNode {
   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 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 toggle = (id: string): void =>
+    setExpandedIds((current) => {
+      const next = new Set(current);
+
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+
+      return next;
+    });
+
+  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));
+    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 === "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(
@@ -65,17 +96,14 @@ export function ProjectTreeView({
       <Tree
         nodes={nodes}
         expandedIds={expandedIds}
-        onSelect={onSelectFile}
-        onToggle={(id) =>
-          setExpandedIds((current) => {
-            const next = new Set(current);
-
-            if (next.has(id)) next.delete(id);
-            else next.add(id);
+        selectedId={focused ? rows[cursorIndex]?.id : undefined}
+        onSelect={(id) => {
+          const index = rows.findIndex((row) => row.id === id);
 
-            return next;
-          })
-        }
+          if (index >= 0) setCursor(index);
+          onSelectFile(id);
+        }}
+        onToggle={toggle}
         theme={theme}
       />
     </ScrollArea>

package/src/components/PromptDialog.test.tsx

@@ -0,0 +1,61 @@
+/** The prompt dialog's footer actions are mouse-clickable: clicking "save" commits and "cancel"
+ * dismisses, the same as pressing enter or esc. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { PromptDialog } from "./PromptDialog";
+import { locateText, settle, typeText } from "../test-support";
+import { DARK } from "../theme";
+
+test("the input is focused on open, so typing lands in the dialog", async () => {
+  const inputs: string[] = [];
+  const setup = await testRender(
+    <PromptDialog
+      isOpen
+      title=" rename thread "
+      label="new title for this thread:"
+      value="hi"
+      onInput={(text) => inputs.push(text)}
+      theme={DARK}
+    />,
+    { width: 60, height: 12 },
+  );
+  await settle(setup);
+
+  await typeText(setup, "!");
+  expect(inputs.at(-1)).toBe("hi!");
+
+  setup.renderer.destroy();
+});
+
+test("clicking save fires onSave and clicking cancel fires onCancel", async () => {
+  let saved = 0;
+  let cancelled = 0;
+  const setup = await testRender(
+    <PromptDialog
+      isOpen
+      title=" rename thread "
+      label="new title for this thread:"
+      value="a title"
+      onInput={() => {}}
+      onSave={() => (saved += 1)}
+      onCancel={() => (cancelled += 1)}
+      theme={DARK}
+    />,
+    { width: 60, height: 12 },
+  );
+  await settle(setup);
+
+  const save = locateText(setup, "enter save");
+  await setup.mockMouse.click(save.column, save.row);
+  expect(saved).toBe(1);
+  expect(cancelled).toBe(0);
+
+  const cancel = locateText(setup, "esc cancel");
+  await setup.mockMouse.click(cancel.column, cancel.row);
+  expect(cancelled).toBe(1);
+  expect(saved).toBe(1);
+
+  setup.renderer.destroy();
+});