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

package/src/components/ManageAccessDialog.test.tsx

@@ -0,0 +1,94 @@
+import { describe, expect, test } from "bun:test";
+import React, { useState } from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DARK } from "../theme";
+import { clickText, locateTextInFrame, settle, typeText } from "../test-support";
+import { ManageAccessDialog } from "./ManageAccessDialog";
+
+function AccessHarness({ initial }: { initial: string[] }): React.ReactNode {
+  const [logins, setLogins] = useState<string[]>(initial);
+  const [open, setOpen] = useState(true);
+
+  return (
+    <box style={{ width: 60, height: 18 }}>
+      <ManageAccessDialog
+        isOpen={open}
+        logins={logins}
+        onAdd={(login) => setLogins((prev) => [...prev, login])}
+        onRemove={(login) => setLogins((prev) => prev.filter((entry) => entry !== login))}
+        onCreateLink={() => {}}
+        onClose={() => setOpen(false)}
+        theme={DARK}
+      />
+    </box>
+  );
+}
+
+async function renderAccess(initial: string[]): Promise<Awaited<ReturnType<typeof testRender>>> {
+  const setup = await testRender(<AccessHarness initial={initial} />, { width: 60, height: 18 });
+
+  await settle(setup);
+
+  return setup;
+}
+
+describe("ManageAccessDialog", () => {
+  test("renders the allowlist of GitHub handles", async () => {
+    const setup = await renderAccess(["octocat", "hubot"]);
+    const frame = setup.captureCharFrame();
+
+    expect(locateTextInFrame(frame, "@octocat")).not.toBeNull();
+    expect(locateTextInFrame(frame, "@hubot")).not.toBeNull();
+  });
+
+  test("clicking a row removes that handle from the allowlist", async () => {
+    const setup = await renderAccess(["octocat", "hubot"]);
+
+    await clickText(setup, "@octocat");
+
+    expect(locateTextInFrame(setup.captureCharFrame(), "@octocat")).toBeNull();
+    expect(locateTextInFrame(setup.captureCharFrame(), "@hubot")).not.toBeNull();
+  });
+
+  test("typing a handle and pressing add appends it to the allowlist", async () => {
+    const setup = await renderAccess([]);
+
+    await typeText(setup, "octocat");
+    await clickText(setup, "add");
+
+    expect(locateTextInFrame(setup.captureCharFrame(), "@octocat")).not.toBeNull();
+  });
+
+  test("clicking create link publishes the private link", async () => {
+    let created = false;
+    const setup = await testRender(
+      <box style={{ width: 60, height: 18 }}>
+        <ManageAccessDialog
+          isOpen
+          logins={["octocat"]}
+          onAdd={() => {}}
+          onRemove={() => {}}
+          onCreateLink={() => {
+            created = true;
+          }}
+          onClose={() => {}}
+          theme={DARK}
+        />
+      </box>,
+      { width: 60, height: 18 },
+    );
+
+    await settle(setup);
+    await clickText(setup, "create link");
+
+    expect(created).toBe(true);
+  });
+
+  test("clicking close dismisses the dialog", async () => {
+    const setup = await renderAccess([]);
+
+    await clickText(setup, "close");
+
+    expect(locateTextInFrame(setup.captureCharFrame(), "Manage access")).toBeNull();
+  });
+});

package/src/components/ManageAccessDialog.tsx

@@ -0,0 +1,120 @@
+/**
+ * Owner surface for a private share's allowlist: the GitHub logins allowed to
+ * open the private link. Type a handle and add it; click a row to remove one.
+ * Editing persists through the controller, so the list survives a reload.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+
+// enter adds the handle rather than inserting a newline into the one-line field
+const ADD_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
+
+export interface ManageAccessDialogProps {
+  isOpen: boolean;
+  logins: string[];
+  onAdd: (login: string) => void;
+  onRemove: (login: string) => void;
+  /** Publish the private link with the current allowlist and copy its connection line. */
+  onCreateLink: () => void;
+  onClose: () => void;
+  theme?: Theme;
+}
+
+export function ManageAccessDialog({
+  isOpen,
+  logins,
+  onAdd,
+  onRemove,
+  onCreateLink,
+  onClose,
+  theme,
+}: ManageAccessDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const inputRef = useRef<TextareaRenderable | null>(null);
+  const [draft, setDraft] = useState("");
+  const [inputGeneration, setInputGeneration] = useState(0);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [inputGeneration]);
+
+  const addDraft = (): void => {
+    const handle = draft.trim().replace(/^@/, "").toLowerCase();
+
+    if (handle && !logins.includes(handle)) onAdd(handle);
+    setDraft("");
+    setInputGeneration((generation) => generation + 1);
+  };
+
+  useKeyboard((key) => {
+    if (isOpen && key.name === "escape") onClose();
+  });
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      isOpen
+      title=" Manage access "
+      width={Math.min(54, terminalWidth - 6)}
+      height={Math.min(18, 9 + logins.length)}
+      background={tokens.elevated}
+      onDismiss={onClose}
+      theme={theme}
+    >
+      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1 }}>
+        <text fg={tokens.textDim}>Only these GitHub users can open the private link.</text>
+        <box style={{ height: 1 }} />
+        {logins.length === 0 ? (
+          <text fg={tokens.textDim}>no one yet - add a handle below</text>
+        ) : (
+          logins.map((login) => (
+            <box key={login} onMouseUp={() => onRemove(login)} style={{ flexDirection: "row" }}>
+              <text fg={tokens.text}>{`@${login}`}</text>
+              <box style={{ flexGrow: 1 }} />
+              <text fg={tokens.textDim}>remove</text>
+            </box>
+          ))
+        )}
+        <box style={{ flexGrow: 1 }} />
+        <box style={{ flexDirection: "row" }}>
+          <text fg={tokens.textDim}>{"@"}</text>
+          <textarea
+            key={inputGeneration}
+            ref={inputRef}
+            focused
+            placeholder="handle"
+            keyBindings={ADD_KEY_BINDINGS}
+            onContentChange={() => setDraft(inputRef.current?.plainText ?? "")}
+            style={{
+              height: 1,
+              flexGrow: 1,
+              backgroundColor: tokens.elevated,
+              focusedBackgroundColor: tokens.elevated,
+              textColor: tokens.text,
+              focusedTextColor: tokens.text,
+            }}
+          />
+        </box>
+        <box style={{ flexDirection: "row" }}>
+          <box onMouseUp={addDraft} style={{ marginRight: 3 }}>
+            <text fg={tokens.accent}>add</text>
+          </box>
+          <box onMouseUp={onCreateLink} style={{ marginRight: 3 }}>
+            <text fg={tokens.accent}>create link</text>
+          </box>
+          <box onMouseUp={onClose}>
+            <text fg={tokens.textDim}>close</text>
+          </box>
+        </box>
+      </box>
+    </Dialog>
+  );
+}

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();
+});

package/src/components/PromptDialog.tsx

@@ -22,6 +22,8 @@ export interface PromptDialogProps {
   value: string;
   placeholder?: string;
   onInput: (text: string) => void;
+  onSave?: () => void;
+  onCancel?: () => void;
   theme?: Theme;
 }
 
@@ -32,6 +34,8 @@ export function PromptDialog({
   value,
   placeholder,
   onInput,
+  onSave,
+  onCancel,
   theme,
 }: PromptDialogProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
@@ -39,8 +43,9 @@ export function PromptDialog({
   const inputRef = useRef<TextareaRenderable | null>(null);
 
   useEffect(() => {
-    // open with the caret after the seeded value, like a text field
-    if (inputRef.current) inputRef.current.cursorOffset = value.length;
+    if (!inputRef.current) return;
+    inputRef.current.focus();
+    inputRef.current.cursorOffset = value.length;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   if (!isOpen) return null;
@@ -52,6 +57,7 @@ export function PromptDialog({
       width={Math.min(54, terminalWidth - 6)}
       height={7}
       background={tokens.elevated}
+      onDismiss={onCancel}
       theme={theme}
     >
       <box
@@ -80,7 +86,14 @@ export function PromptDialog({
           }}
         />
         <box style={{ flexGrow: 1 }} />
-        <text fg={tokens.textDim}>enter save · esc cancel</text>
+        <box style={{ flexDirection: "row" }}>
+          <box onMouseUp={onSave} style={{ marginRight: 3 }}>
+            <text fg={tokens.textDim}>enter save</text>
+          </box>
+          <box onMouseUp={onCancel}>
+            <text fg={tokens.textDim}>esc cancel</text>
+          </box>
+        </box>
       </box>
     </Dialog>
   );

package/src/components/RootOverlay.stories.tsx

@@ -11,6 +11,7 @@ function OverlayDemo(): React.ReactNode {
 
   useEffect(() => {
     setOverlay(
+      "demo",
       <box
         style={{
           position: "absolute",

package/src/components/RootOverlay.tsx

@@ -1,13 +1,14 @@
 // A root overlay slot: OpenTUI has no z-index, so an overlay drawn inside a pane is sliced by the
 // next pane's border. Anything pushed here renders after every pane (last in draw order), so it sits
 // on top of the whole shell - the same trick the tooltip uses. Callers position their node with
-// absolute screen coordinates.
+// absolute screen coordinates and hold a stable key, so several overlays (a menu, a hover preview)
+// coexist instead of clobbering one shared slot.
 
 import React, { createContext, useContext, useMemo, useState } from "react";
 
 interface RootOverlayApi {
-  setOverlay: (node: React.ReactNode) => void;
-  clearOverlay: () => void;
+  setOverlay: (key: string, node: React.ReactNode) => void;
+  clearOverlay: (key: string) => void;
 }
 
 const RootOverlayContext = createContext<RootOverlayApi>({
@@ -20,16 +21,28 @@ export function useRootOverlay(): RootOverlayApi {
 }
 
 export function RootOverlayProvider({ children }: { children: React.ReactNode }): React.ReactNode {
-  const [overlay, setOverlay] = useState<React.ReactNode>(null);
+  const [overlays, setOverlays] = useState<Map<string, React.ReactNode>>(new Map());
   const api = useMemo<RootOverlayApi>(
-    () => ({ setOverlay, clearOverlay: () => setOverlay(null) }),
+    () => ({
+      setOverlay: (key, node) => setOverlays((current) => new Map(current).set(key, node)),
+      clearOverlay: (key) =>
+        setOverlays((current) => {
+          if (!current.has(key)) return current;
+          const next = new Map(current);
+          next.delete(key);
+
+          return next;
+        }),
+    }),
     [],
   );
 
   return (
     <RootOverlayContext.Provider value={api}>
       {children}
-      {overlay}
+      {[...overlays].map(([key, node]) => (
+        <React.Fragment key={key}>{node}</React.Fragment>
+      ))}
     </RootOverlayContext.Provider>
   );
 }

package/src/components/SettingsDialog.stories.tsx

@@ -10,7 +10,6 @@ const CATEGORIES: SettingsCategory[] = [
   {
     id: "general",
     name: "General",
-    description: "identity and submission",
     rows: [
       { key: "displayName", label: "Display name", kind: "text" },
       {
@@ -24,7 +23,6 @@ const CATEGORIES: SettingsCategory[] = [
   {
     id: "display",
     name: "Display",
-    description: "plan width and chrome",
     rows: [
       {
         key: "planWidth",
@@ -38,7 +36,6 @@ const CATEGORIES: SettingsCategory[] = [
   {
     id: "appearance",
     name: "Appearance",
-    description: "the color theme",
     rows: [
       {
         key: "theme",
@@ -71,6 +68,7 @@ export const NavZone: Story = {
       activeZone="nav"
       onCategorySelect={() => {}}
       onRowActivate={() => {}}
+      onClose={() => {}}
     />
   ),
   expectedColors: [DARK.accent],
@@ -90,6 +88,7 @@ export const BodyZone: Story = {
       activeZone="body"
       onCategorySelect={() => {}}
       onRowActivate={() => {}}
+      onClose={() => {}}
     />
   ),
   expectedColors: [DARK.green],
@@ -109,6 +108,7 @@ export const AppearanceThemed: Story = {
       activeZone="body"
       onCategorySelect={() => {}}
       onRowActivate={() => {}}
+      onClose={() => {}}
       theme={THEME_PRESETS["rose-pine-moon"]}
     />
   ),

package/src/components/SettingsDialog.tsx

@@ -21,7 +21,6 @@ import { CycleRow, TextRow, ToggleRow, type SettingsRowDescriptor } from "./Sett
 export interface SettingsCategory {
   id: string;
   name: string;
-  description: string;
   rows: SettingsRowDescriptor[];
   /** A bespoke body (e.g. the quick-actions editor) rendered instead of typed rows. */
   customBody?: React.ReactNode;
@@ -45,6 +44,7 @@ export interface SettingsDialogProps {
   activeZone: "nav" | "body";
   onCategorySelect: (categoryId: string) => void;
   onRowActivate: (row: SettingsRowDescriptor) => void;
+  onClose: () => void;
   theme?: Theme;
 }
 
@@ -88,6 +88,7 @@ export function SettingsDialog({
   activeZone,
   onCategorySelect,
   onRowActivate,
+  onClose,
   theme,
 }: SettingsDialogProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
@@ -107,6 +108,7 @@ export function SettingsDialog({
       width={Math.min(76, terminalWidth - 6)}
       height={Math.min(22, terminalHeight - 4)}
       background={tokens.elevated}
+      onDismiss={onClose}
       theme={theme}
     >
       <box style={{ flexDirection: "row", flexGrow: 1 }}>
@@ -123,9 +125,6 @@ export function SettingsDialog({
         </box>
         <box style={{ borderStyle: "single", border: ["left"], borderColor: tokens.border }} />
         <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 2, paddingRight: 1 }}>
-          <text fg={tokens.text}>{category.name}</text>
-          <text fg={tokens.textDim}>{category.description}</text>
-          <box style={{ height: 1 }} />
           {onKeybinds ? <KeybindsBody sections={keybindsSections} tokens={tokens} /> : null}
           {onKeybinds ? null : category.customBody}
           {onKeybinds