@cueloop/client 0.1.0-alpha.75 → 0.1.0-alpha.77

package/src/components/AnnotationCards.tsx

@@ -7,9 +7,15 @@
  */
 
 import React, { useContext, useLayoutEffect, useRef, useState } from "react";
-import type { BoxRenderable, KeyBinding, TextareaRenderable } from "@opentui/core";
+import type {
+  BoxRenderable,
+  KeyBinding,
+  MouseEvent as TerminalMouseEvent,
+  TextareaRenderable,
+} from "@opentui/core";
 import type { Annotation } from "@cueloop/schema";
 import type { Theme } from "../theme";
+import { useTooltip } from "./Tooltip";
 import { lighten } from "../annotation-palette";
 import { useFrameMeasure } from "../use-frame-measure";
 import { skillReferenceRanges, type SlashItem } from "../slash-palette";
@@ -281,22 +287,34 @@ export function DiscussionCard({
 export function CommentRow({
   annotation,
   tokens,
+  authorLabel,
 }: {
   annotation: Annotation;
   tokens: Theme;
+  /** The author's resolved display name, shown as a tooltip when the dot is hovered. */
+  authorLabel?: string;
 }): React.ReactNode {
   // own comments (no author) wear the filled dot, collaborators the outline
   const own = annotation.author === undefined;
   const glyph = own ? "●" : "○";
   const glyphColor = own ? tokens.text : tokens.textMuted;
+  const { showTooltip, hideTooltip } = useTooltip();
+  const dotHover = authorLabel
+    ? {
+        onMouseOver: (event: TerminalMouseEvent) => showTooltip(authorLabel, event.x, event.y),
+        onMouseOut: hideTooltip,
+      }
+    : {};
 
   return (
     <box style={{ flexDirection: "column" }}>
       {annotation.body.split("\n").map((line, lineIndex) => (
         <box key={lineIndex} style={{ flexDirection: "row" }}>
-          <text selectable={false} fg={glyphColor} style={{ flexShrink: 0 }}>
-            {lineIndex === 0 ? `${glyph} ` : "  "}
-          </text>
+          <box style={{ flexShrink: 0 }} {...(lineIndex === 0 ? dotHover : {})}>
+            <text selectable={false} fg={glyphColor}>
+              {lineIndex === 0 ? `${glyph} ` : "  "}
+            </text>
+          </box>
           <text fg={tokens.text} style={{ wrapMode: "word", flexGrow: 1, flexShrink: 1 }}>
             {line}
           </text>

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

@@ -22,7 +22,7 @@ async function brandFrame(): Promise<string[]> {
       onOpenMenu={() => {}}
       threadsPanel={<text>threads</text>}
       threadTitle={LONG_TITLE}
-      threadPanel={<text>review the changes on the right</text>}
+      threadPanel={<text>Select a thread</text>}
       changesOpen
       projectOpen
       onToggleChanges={() => {}}

package/src/components/AppShell.tsx

@@ -69,8 +69,11 @@ export interface AppShellProps {
   theme?: Theme;
   threadsWidth?: number;
   projectWidth?: number;
+  onFocusPane?: (pane: FocusPane) => void;
 }
 
+export type FocusPane = "threads" | "thread" | "changes" | "project";
+
 /** The right region's reserved width: the open project pane, nothing when the region is closed, else the collapsed rail. */
 function rightRegionColumns(
   projectOpen: boolean,
@@ -122,6 +125,7 @@ export function AppShell({
   theme,
   threadsWidth = 30,
   projectWidth = 32,
+  onFocusPane,
 }: AppShellProps): React.ReactNode {
   const tokens = theme ?? DARK;
   const { width: terminalWidth } = useTerminalDimensions();
@@ -214,7 +218,13 @@ export function AppShell({
         <TooltipProvider theme={tokens}>
           <box style={{ flexGrow: 1, flexDirection: "row" }}>
             {sidebarOpen ? (
-              <PanelColumn width={threadsWidth} border="right" header={brandChrome} theme={tokens}>
+              <PanelColumn
+                width={threadsWidth}
+                border="right"
+                header={brandChrome}
+                onFocus={() => onFocusPane?.("threads")}
+                theme={tokens}
+              >
                 {threadsPanel}
               </PanelColumn>
             ) : null}
@@ -237,6 +247,7 @@ export function AppShell({
                   reopenRightControl,
                   rightRegionClosed,
                 )}
+                onFocus={() => onFocusPane?.("thread")}
                 theme={tokens}
               >
                 {threadPanel}
@@ -244,6 +255,7 @@ export function AppShell({
             ) : null}
             {changesOpen ? (
               <box
+                onMouseDown={() => onFocusPane?.("changes")}
                 style={{
                   flexDirection: "column",
                   flexGrow: 1,
@@ -266,6 +278,7 @@ export function AppShell({
                 border="left"
                 header={null}
                 headerRight={projectToggles}
+                onFocus={() => onFocusPane?.("project")}
                 theme={tokens}
               >
                 {projectPanel}

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,8 +9,8 @@
  */
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { createTextAttributes, type ScrollBoxRenderable } from "@opentui/core";
-import type { Thread } from "@cueloop/schema";
+import { createTextAttributes, type KeyEvent, type ScrollBoxRenderable } from "@opentui/core";
+import type { Annotation, Thread } from "@cueloop/schema";
 import { diffRowText, fileChangeCounts, type DiffRow, type Mark } from "../view-diff";
 import type { TextSpan } from "../thread-selection";
 import type { QuickAction } from "../config";
@@ -95,6 +95,10 @@ export interface DiffContentViewProps {
   onAnnotate: (span: TextSpan, body: string) => void;
   onReply: (rootAnnotationId: string, body: string) => void;
   onUpdateAnnotation: (id: string, body: string) => void;
+  /** The author's display name for a comment's hover tooltip. */
+  resolveAuthorLabel?: (annotation: Annotation) => string | undefined;
+  leaderCombos?: readonly string[];
+  onLeaderCommand?: (key: KeyEvent) => void;
   onExit: () => void;
   /** Row indices the owner rejected during curation; drawn struck through. */
   rejectedRows?: Set<number>;
@@ -487,6 +491,9 @@ export function DiffContentView({
   onAnnotate,
   onReply,
   onUpdateAnnotation,
+  resolveAuthorLabel,
+  leaderCombos,
+  onLeaderCommand,
   onExit,
   rejectedRows = EMPTY_REJECTED,
   fold,
@@ -520,6 +527,9 @@ export function DiffContentView({
     onAnnotate,
     onReply,
     onUpdateAnnotation,
+    resolveAuthorLabel,
+    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,9 @@ export type DiffSurfaceProps = Pick<
   | "onAnnotate"
   | "onReply"
   | "onUpdateAnnotation"
+  | "resolveAuthorLabel"
+  | "leaderCombos"
+  | "onLeaderCommand"
   | "onExit"
 >;
 
@@ -56,7 +59,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>
     );
@@ -112,6 +122,7 @@ export function GridTabContent(props: {
         onAddComment={(anchor, body) => props.onAddFileComment(filePath, anchor, body)}
         onReply={props.surface.onReply}
         onUpdateAnnotation={props.surface.onUpdateAnnotation}
+        resolveAuthorLabel={props.surface.resolveAuthorLabel}
         onExit={props.surface.onExit}
         theme={props.theme}
       />

package/src/components/ManageAccessDialog.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ManageAccessDialog } from "./ManageAccessDialog";
+
+export const meta: StoryMeta = { title: "Dialogs/ManageAccess" };
+
+export const WithHandles: Story = {
+  render: () => (
+    <ManageAccessDialog
+      isOpen
+      logins={["octocat", "hubot"]}
+      onAdd={() => {}}
+      onRemove={() => {}}
+      onCreateLink={() => {}}
+      onClose={() => {}}
+      theme={DARK}
+    />
+  ),
+  size: { width: 60, height: 18 },
+};
+
+export const Empty: Story = {
+  render: () => (
+    <ManageAccessDialog
+      isOpen
+      logins={[]}
+      onAdd={() => {}}
+      onRemove={() => {}}
+      onCreateLink={() => {}}
+      onClose={() => {}}
+      theme={DARK}
+    />
+  ),
+  size: { width: 60, height: 18 },
+};