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

package/src/components/ShareChoiceDialog.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ShareChoiceDialog } from "./ShareChoiceDialog";
+
+export const meta: StoryMeta = { title: "Dialogs/ShareChoice" };
+
+export const PublicSelected: Story = {
+  render: () => (
+    <ShareChoiceDialog
+      isOpen
+      selectedIndex={0}
+      onPublicShare={() => {}}
+      onPrivateShare={() => {}}
+      onClose={() => {}}
+      theme={DARK}
+    />
+  ),
+  size: { width: 60, height: 12 },
+};
+
+export const PrivateSelected: Story = {
+  render: () => (
+    <ShareChoiceDialog
+      isOpen
+      selectedIndex={1}
+      onPublicShare={() => {}}
+      onPrivateShare={() => {}}
+      onClose={() => {}}
+      theme={DARK}
+    />
+  ),
+  size: { width: 60, height: 12 },
+};

package/src/components/ShareChoiceDialog.test.tsx

@@ -0,0 +1,103 @@
+import { describe, expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DARK } from "../theme";
+import { clickText, settle } from "../test-support";
+import { ShareChoiceDialog } from "./ShareChoiceDialog";
+
+interface ShareCounts {
+  publicShares: number;
+  privateShares: number;
+  closes: number;
+}
+
+async function renderDialog(selectedIndex = 0): Promise<{
+  setup: Awaited<ReturnType<typeof testRender>>;
+  counts: ShareCounts;
+}> {
+  const counts: ShareCounts = { publicShares: 0, privateShares: 0, closes: 0 };
+  const setup = await testRender(
+    <box style={{ width: 60, height: 12 }}>
+      <ShareChoiceDialog
+        isOpen
+        selectedIndex={selectedIndex}
+        onPublicShare={() => {
+          counts.publicShares += 1;
+        }}
+        onPrivateShare={() => {
+          counts.privateShares += 1;
+        }}
+        onClose={() => {
+          counts.closes += 1;
+        }}
+        theme={DARK}
+      />
+    </box>,
+    { width: 60, height: 12 },
+  );
+
+  await settle(setup);
+
+  return { setup, counts };
+}
+
+describe("ShareChoiceDialog", () => {
+  test("offers both the public and private choice", async () => {
+    // Arrange + Act
+    const { setup } = await renderDialog();
+
+    // Assert
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("public link");
+    expect(frame).toContain("private link");
+  });
+
+  test("clicking the public choice publishes and closes", async () => {
+    // Arrange
+    const { setup, counts } = await renderDialog();
+
+    // Act
+    await clickText(setup, "public link");
+
+    // Assert
+    expect(counts.publicShares).toBe(1);
+    expect(counts.privateShares).toBe(0);
+    expect(counts.closes).toBe(1);
+  });
+
+  test("clicking the private choice opens manage-access and closes", async () => {
+    // Arrange
+    const { setup, counts } = await renderDialog();
+
+    // Act
+    await clickText(setup, "private link");
+
+    // Assert
+    expect(counts.privateShares).toBe(1);
+    expect(counts.publicShares).toBe(0);
+    expect(counts.closes).toBe(1);
+  });
+
+  test("renders nothing while closed", async () => {
+    // Arrange + Act
+    const setup = await testRender(
+      <box style={{ width: 60, height: 12 }}>
+        <ShareChoiceDialog
+          isOpen={false}
+          selectedIndex={0}
+          onPublicShare={() => {}}
+          onPrivateShare={() => {}}
+          onClose={() => {}}
+          theme={DARK}
+        />
+      </box>,
+      { width: 60, height: 12 },
+    );
+
+    await settle(setup);
+
+    // Assert
+    expect(setup.captureCharFrame()).not.toContain("public link");
+  });
+});

package/src/components/ShareChoiceDialog.tsx

@@ -0,0 +1,82 @@
+/**
+ * The share public/private choice, as an app-level overlay the share shortcut
+ * opens from any view. Public publishes a link for anyone; private opens the
+ * manage-access allowlist surface. The header share button and the shortcut both
+ * open this one surface. Selection moves with the keyboard (owned by the App) or
+ * a pointer click on a row.
+ */
+
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+
+export type ShareChoice = "public" | "private";
+
+interface ShareChoiceRow {
+  choice: ShareChoice;
+  label: string;
+}
+
+export const SHARE_CHOICES: ShareChoiceRow[] = [
+  { choice: "public", label: "public link" },
+  { choice: "private", label: "private link" },
+];
+
+export interface ShareChoiceDialogProps {
+  isOpen: boolean;
+  /** The highlighted row; the App drives it from the shareChoice mode. */
+  selectedIndex: number;
+  /** Publish a public link and copy its connection line. */
+  onPublicShare: () => void;
+  /** Open the private-share manage-access allowlist surface. */
+  onPrivateShare: () => void;
+  onClose: () => void;
+  theme?: Theme;
+}
+
+export function ShareChoiceDialog({
+  isOpen,
+  selectedIndex,
+  onPublicShare,
+  onPrivateShare,
+  onClose,
+  theme,
+}: ShareChoiceDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+
+  const pick = (choice: ShareChoice): void => {
+    onClose();
+    if (choice === "public") onPublicShare();
+    else onPrivateShare();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      isOpen
+      title=" Share "
+      width={Math.min(46, terminalWidth - 6)}
+      height={7}
+      background={tokens.elevated}
+      onDismiss={onClose}
+      theme={theme}
+    >
+      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1 }}>
+        {SHARE_CHOICES.map((row, index) => (
+          <box key={row.choice} onMouseUp={() => pick(row.choice)} style={{ flexDirection: "row" }}>
+            <text fg={index === selectedIndex ? tokens.accent : tokens.text}>
+              {index === selectedIndex ? "› " : "  "}
+              {row.label}
+            </text>
+          </box>
+        ))}
+        <box style={{ flexGrow: 1 }} />
+        <text fg={tokens.textDim}>↑↓ choose · enter select · esc cancel</text>
+      </box>
+    </Dialog>
+  );
+}

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