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

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

package/src/components/ThreadFooter.test.tsx

@@ -1,10 +1,11 @@
-/** The thread footer keeps its repo/branch context on one line: a long branch truncates to fit rather
- * than wrapping and pushing the send control onto a second row. */
+/** The thread footer keeps its repo/branch context on one line: a long branch truncates to an
+ * ellipsis rather than wrapping and pushing the send control onto a second row. */
 
 import { test, expect } from "bun:test";
 import React from "react";
 import { testRender } from "@opentui/react/test-utils";
 import { ThreadFooter } from "./ThreadFooter";
+import { settle } from "../test-support";
 import { DARK } from "../theme";
 
 test("a long branch truncates on one line and keeps the send control in place", async () => {
@@ -20,12 +21,16 @@ test("a long branch truncates on one line and keeps the send control in place",
     </box>,
     { width: 60, height: 3 },
   );
-  await setup.renderOnce();
+  await settle(setup);
+  await settle(setup);
 
-  const lines = setup.captureCharFrame().split("\n");
-  const footerRow = lines.find((line) => line.includes("cueloop"))!;
+  const frame = setup.captureCharFrame();
+  const footerRow = frame.split("\n").find((line) => line.includes("cueloop"))!;
   // the repo/branch context and the send control share the single footer row
   expect(footerRow).toContain("send message");
-  // the branch is clipped, not wrapped: it never reaches its tail on a second row
-  expect(setup.captureCharFrame()).not.toContain("long-name");
+  // the branch is clipped to an ellipsis, not wrapped onto a second row
+  expect(footerRow).toContain("…");
+  expect(frame).not.toContain("long-name");
+
+  setup.renderer.destroy();
 });

package/src/components/ThreadFooter.tsx

@@ -2,8 +2,11 @@
 // Changes column when a zoom drops the thread column. It carries the repo/branch
 // context on the left and a written, clickable "Send message" control on the right.
 
-import React from "react";
+import React, { useRef } from "react";
+import type { BoxRenderable } from "@opentui/core";
 import { DARK, type Theme } from "../theme";
+import { useFrameMeasure } from "../use-frame-measure";
+import { truncateTitle } from "./truncate-title";
 import { NERD } from "./primitives/icons";
 
 export interface ThreadFooterProps {
@@ -15,6 +18,9 @@ export interface ThreadFooterProps {
   theme?: Theme;
 }
 
+const ICON_COLUMNS = 2; // folder glyph + its trailing space
+const SEPARATOR = " / ";
+
 export function ThreadFooter({
   repo,
   branch,
@@ -23,6 +29,14 @@ export function ThreadFooter({
   theme,
 }: ThreadFooterProps): React.ReactNode {
   const tokens = theme ?? DARK;
+  const boxRef = useRef<BoxRenderable | null>(null);
+  const width = useFrameMeasure(
+    () => boxRef.current?.width ?? 0,
+    (left, right) => left === right,
+    0,
+  );
+  const branchBudget = width - ICON_COLUMNS - repo.length - SEPARATOR.length;
+  const clippedBranch = width > 0 ? truncateTitle(branch, Math.max(0, branchBudget)) : branch;
 
   return (
     <box
@@ -38,11 +52,11 @@ export function ThreadFooter({
         borderColor: tokens.border,
       }}
     >
-      <box style={{ flexShrink: 1, minWidth: 0, marginRight: 2 }}>
-        <text truncate>
+      <box ref={boxRef} style={{ flexShrink: 1, minWidth: 0, marginRight: 2 }}>
+        <text wrapMode="none">
           <span fg={tokens.blue}>{`${NERD.folderClosed} `}</span>
           <span fg={tokens.textMuted}>{repo}</span>
-          <span fg={tokens.textDim}>{` / ${branch}`}</span>
+          <span fg={tokens.textDim}>{`${SEPARATOR}${clippedBranch}`}</span>
         </text>
       </box>
       <box style={{ flexGrow: 1 }} />

package/src/components/ThreadTree.tsx

@@ -1,14 +1,19 @@
 /**
- * The sidebar thread tree: a Pinned / Projects / Threads listing. Selection stays
+ * The sidebar thread tree: a Starred / Projects / Threads listing. Selection stays
  * with the keyboard grammar - the cursor indexes the flat thread order and this
  * component renders the snapshot. A hovered or selected thread reveals a kebab
- * that opens an inline pin / rename / delete menu; a long title clips to an
- * ellipsis rather than wrapping. App supplies the surrounding chrome.
+ * that opens a floating pin / rename / delete menu below the row (so the list
+ * never shifts); a long title clips to an ellipsis rather than wrapping. App
+ * supplies the surrounding chrome.
  */
 
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import type { BoxRenderable } from "@opentui/core";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
+import { useFrameMeasure } from "../use-frame-measure";
+import { useRootOverlay } from "./RootOverlay";
+import { useMenuControl } from "./menu-control";
 import { IconButton } from "./primitives/IconButton";
 import { NERD } from "./primitives/icons";
 import { truncateTitle } from "./truncate-title";
@@ -19,7 +24,8 @@ export interface ThreadTreeProps {
   cursor: number;
   /** The open thread's id; highlights it instead of the cursor (the left sidebar case). */
   activeId?: string;
-  /** Ids of pinned threads; a pinned row carries the pin glyph and the menu offers Unpin. */
+  focused?: boolean;
+  /** Ids of starred threads; a starred row carries the star glyph and the menu offers Unstar. */
   pinnedIds?: ReadonlySet<string>;
   /** The column width, so titles fade to fit one line. */
   width?: number;
@@ -27,13 +33,15 @@ export interface ThreadTreeProps {
   onSelect?: (sessionId: string) => void;
   /** Ask to delete a thread (the menu's Delete, wired to the confirm dialog). */
   onRequestDelete?: (id: string, title: string) => void;
-  /** Toggle a thread's pinned state (the menu's Pin/Unpin). */
+  /** Toggle a thread's starred state (the menu's Star/Unstar). */
   onPin?: (id: string) => void;
   /** Rename a thread's title (the menu's Rename). */
   onRename?: (id: string, title: string) => void;
   theme?: Theme;
 }
 
+const MENU_WIDTH = 12;
+
 function ActionsMenu({
   pinned,
   onPin,
@@ -47,31 +55,28 @@ function ActionsMenu({
   onDelete?: () => void;
   tokens: Theme;
 }): React.ReactNode {
-  const item = (
-    glyph: string,
-    label: string,
-    color: string,
-    onPick?: () => void,
-  ): React.ReactNode =>
+  const item = (label: string, color: string, onPick?: () => void): React.ReactNode =>
     onPick !== undefined ? (
-      <box onMouseUp={onPick} style={{ flexDirection: "row", paddingLeft: 4, paddingRight: 1 }}>
-        <text fg={color}>{`${glyph} ${label}`}</text>
+      <box onMouseUp={onPick} style={{ paddingLeft: 1, paddingRight: 1 }}>
+        <text fg={color}>{label}</text>
       </box>
     ) : null;
 
   return (
     <box
+      onMouseUp={(event) => event.stopPropagation()}
       style={{
+        width: MENU_WIDTH,
         flexDirection: "column",
-        marginLeft: 3,
+        border: true,
         borderStyle: "single",
-        border: ["left"],
         borderColor: tokens.border,
+        backgroundColor: tokens.elevated,
       }}
     >
-      {item(NERD.pin, pinned ? "Unpin" : "Pin", tokens.text, onPin)}
-      {item(NERD.file, "Rename", tokens.text, onRename)}
-      {item(NERD.close, "Delete", tokens.red, onDelete)}
+      {item(pinned ? "unstar" : "star", tokens.text, onPin)}
+      {item("rename", tokens.text, onRename)}
+      {item("delete", tokens.red, onDelete)}
     </box>
   );
 }
@@ -94,13 +99,57 @@ interface ThreadRowProps {
 function ThreadRow(props: ThreadRowProps): React.ReactNode {
   const { title, selected, pinned, titleWidth, menuOpen, onToggleMenu, tokens, theme } = props;
   const [hovered, setHovered] = useState(false);
+  const rowRef = useRef<BoxRenderable | null>(null);
+  const { setOverlay, clearOverlay } = useRootOverlay();
+  const anchor = useFrameMeasure(
+    () => ({
+      x: rowRef.current?.x ?? 0,
+      y: rowRef.current?.y ?? 0,
+      width: rowRef.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 clippedTitle = truncateTitle(title, titleWidth);
   const hasActions =
     props.onPin !== undefined || props.onRename !== undefined || props.onDelete !== undefined;
 
+  useEffect(() => {
+    if (!menuOpen) return;
+    // the full-screen box closes the menu on an outside click; the menu drops from under the kebab
+    setOverlay(
+      "thread-menu",
+      <box
+        onMouseUp={onToggleMenu}
+        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),
+          }}
+        >
+          <ActionsMenu
+            pinned={pinned}
+            onPin={props.onPin}
+            onRename={props.onRename}
+            onDelete={props.onDelete}
+            tokens={tokens}
+          />
+        </box>
+      </box>,
+    );
+
+    return () => clearOverlay("thread-menu");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menuOpen, anchor, pinned, tokens]);
+
   return (
     <box style={{ flexDirection: "column" }} onMouseOut={() => setHovered(false)}>
       <box
+        ref={rowRef}
         onMouseUp={props.onSelect}
         onMouseOver={() => setHovered(true)}
         style={{
@@ -109,7 +158,7 @@ function ThreadRow(props: ThreadRowProps): React.ReactNode {
         }}
       >
         <text wrapMode="none">
-          <span fg={tokens.textDim}>{pinned ? ` ${NERD.pin} ` : "   "}</span>
+          <span fg={tokens.textDim}>{pinned ? ` ${NERD.star} ` : "   "}</span>
           <span fg={selected ? tokens.accent : tokens.textMuted}>{clippedTitle}</span>
         </text>
         <box style={{ flexGrow: 1 }} />
@@ -123,15 +172,6 @@ function ThreadRow(props: ThreadRowProps): React.ReactNode {
           />
         ) : null}
       </box>
-      {menuOpen ? (
-        <ActionsMenu
-          pinned={pinned}
-          onPin={props.onPin}
-          onRename={props.onRename}
-          onDelete={props.onDelete}
-          tokens={tokens}
-        />
-      ) : null}
     </box>
   );
 }
@@ -140,6 +180,7 @@ export function ThreadTree({
   rows,
   cursor,
   activeId,
+  focused = false,
   pinnedIds,
   width = 30,
   onSelect,
@@ -149,21 +190,21 @@ export function ThreadTree({
   theme,
 }: ThreadTreeProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
-  const [actionsForId, setActionsForId] = useState<string | null>(null);
+  const menuControl = useMenuControl();
   // leave room for the 3-char prefix, the border, and the hover kebab so a row
   // never wraps: the title fades to fit whatever is left
   const titleWidth = Math.max(8, width - 9);
-  const closeMenu = (): void => setActionsForId(null);
+  const closeMenu = (): void => menuControl.closeMenu();
 
   return (
     <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1 }}>
       {rows.length === 0 ? (
         <text fg={tokens.textDim}>no threads</text>
       ) : (
-        rows.map((row) => {
+        rows.map((row, index) => {
           if (row.kind === "section") {
             return (
-              <text key={row.id} fg={tokens.textDim}>
+              <text key={row.id} fg={tokens.textDim} style={{ marginTop: index > 0 ? 1 : 0 }}>
                 {row.label}
               </text>
             );
@@ -185,11 +226,13 @@ export function ThreadTree({
             <ThreadRow
               key={row.id}
               title={title}
-              selected={activeId !== undefined ? activeId === id : row.selectionIndex === cursor}
+              selected={
+                focused || activeId === undefined ? row.selectionIndex === cursor : activeId === id
+              }
               pinned={pinnedIds?.has(id) ?? false}
               titleWidth={titleWidth}
-              menuOpen={actionsForId === id}
-              onToggleMenu={() => setActionsForId(actionsForId === id ? null : id)}
+              menuOpen={menuControl.openMenuId === `thread:${id}`}
+              onToggleMenu={() => menuControl.toggleMenu(`thread:${id}`)}
               onSelect={onSelect ? () => onSelect(id) : undefined}
               onPin={onPin ? () => (onPin(id), closeMenu()) : undefined}
               onRename={onRename ? () => (onRename(id, title), closeMenu()) : undefined}

package/src/components/ThreadView.slash.test.tsx

@@ -60,6 +60,42 @@ async function mountComposerWithSkills(skills: SlashItem[] = [], width = 72) {
 
 const mountComposer = () => mountComposerWithSkills();
 
+describe("the command leader", () => {
+  test("the leader chord then a letter runs a command instead of composing a comment", async () => {
+    const commands: string[] = [];
+    const display = buildDisplay(PLAN, undefined);
+    const setup = await testRender(
+      <ThreadView
+        session={fixturePlanSession({
+          artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
+        })}
+        display={display}
+        marks={marksByDisplay([], display)}
+        quickActions={[]}
+        observer={false}
+        leaderCombos={["ctrl+g"]}
+        onLeaderCommand={(key) => commands.push(key.name)}
+        onAnnotate={() => {}}
+        onReply={() => {}}
+        onUpdateAnnotation={() => {}}
+        onExit={() => {}}
+      />,
+      { width: 72, height: 20 },
+    );
+    await settle(setup);
+
+    setup.mockInput.pressKey("g", { ctrl: true });
+    setup.mockInput.pressKey("x");
+    await settle(setup);
+
+    // the command fired and no composer opened (a bare "x" would have started a draft)
+    expect(commands).toEqual(["x"]);
+    expect(setup.captureCharFrame()).not.toContain("enter save");
+
+    setup.renderer.destroy();
+  });
+});
+
 describe("skills in the palette", () => {
   test("a skill from context lists in the / palette and a pick inserts its /name", async () => {
     const setup = await mountComposerWithSkills([

package/src/components/ThreadView.tsx

@@ -13,7 +13,7 @@
  */
 
 import React, { useEffect, useRef } from "react";
-import type { ScrollBoxRenderable } from "@opentui/core";
+import type { KeyEvent, ScrollBoxRenderable } from "@opentui/core";
 import type { Thread } from "@cueloop/schema";
 import { displayText, type DisplayBlock, type Mark } from "../view-plan";
 import type { TextSpan } from "../thread-selection";
@@ -127,6 +127,8 @@ export interface ThreadViewProps {
   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;
   theme?: Theme;
 }
@@ -148,6 +150,8 @@ export function ThreadView({
   onAnnotate,
   onReply,
   onUpdateAnnotation,
+  leaderCombos,
+  onLeaderCommand,
   onExit,
   theme,
 }: ThreadViewProps): React.ReactNode {
@@ -174,6 +178,8 @@ export function ThreadView({
     onAnnotate,
     onReply,
     onUpdateAnnotation,
+    leaderCombos,
+    onLeaderCommand,
     onExit,
   });
   const { palette, discussions } = surface;

package/src/components/WelcomePlayground.tsx

@@ -22,6 +22,7 @@ export interface WelcomePlaygroundProps {
   quickActions: QuickAction[];
   /** Reports whether the playground composer is open, so the shell suspends its inbox keys while typing. */
   onComposingChange?: (composing: boolean) => void;
+  suspended?: boolean;
   theme?: Theme;
 }
 
@@ -86,6 +87,7 @@ export function WelcomePlayground(props: WelcomePlaygroundProps): React.ReactNod
       observer={false}
       commentsEnabled
       fileView
+      suspended={props.suspended}
       onComposingChange={props.onComposingChange}
       onAnnotate={(span, body) =>
         setAnnotations((current) => [