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

package/src/components/__snapshots__/stories.test.tsx.snap

@@ -793,7 +793,7 @@ exports[`stories catalog Overlays/PromptDialog/NameYourself renders, snapshots,
      │ Your name (optional) - it attributes the notes     │     
      │ you leave:                                         │     
      │ your name                                          │     
-     │ enter save · esc cancel                            │     
+     │ enter save   esc cancel                            │     
      └────────────────────────────────────────────────────┘     
                                                                 
                                                                 
@@ -813,7 +813,7 @@ exports[`stories catalog Overlays/PromptDialog/RenameAuthor renders, snapshots,
      │ Display name for this collaborator:                │     
      │ Robin                                              │     
      │                                                    │     
-     │ enter save · esc cancel                            │     
+     │ enter save   esc cancel                            │     
      └────────────────────────────────────────────────────┘     
                                                                 
                                                                 
@@ -878,10 +878,10 @@ exports[`stories catalog Overlays/SettingsDialog/AppearanceThemed renders, snaps
                                                                                                     
                                                                                                     
             ┌─ Settings ───────────────────────────────────────────────────────────────┐            
-            │  General           │  Appearance                                         │            
-            │  Display           │  the color theme                                    │            
+            │  General           │   Theme                    Rosé Pine Moon           │            
+            │  Display           │                                                     │            
             │  Appearance        │                                                     │            
-            │                    │   Theme                    Rosé Pine Moon           │            
+            │                    │                                                     │            
             │                    │                                                     │            
             │                    │                                                     │            
             │                    │                                                     │            
@@ -912,11 +912,11 @@ exports[`stories catalog Overlays/SettingsDialog/BodyZone renders, snapshots, an
                                                                                                     
                                                                                                     
             ┌─ Settings ───────────────────────────────────────────────────────────────┐            
-            │  General           │  Display                                            │            
-            │  Display           │  plan width and chrome                              │            
+            │  General           │   Plan width               default                  │            
+            │  Display           │   Line numbers             on                       │            
             │  Appearance        │                                                     │            
-            │                    │   Plan width               default                  │            
-            │                    │   Line numbers             on                       │            
+            │                    │                                                     │            
+            │                    │                                                     │            
             │                    │                                                     │            
             │                    │                                                     │            
             │                    │                                                     │            
@@ -946,11 +946,11 @@ exports[`stories catalog Overlays/SettingsDialog/NavZone renders, snapshots, and
                                                                                                     
                                                                                                     
             ┌─ Settings ───────────────────────────────────────────────────────────────┐            
-            │  General           │  General                                            │            
-            │  Display           │  identity and submission                            │            
+            │  General           │   Display name             amber-heron              │            
+            │  Display           │   Auto-close on submit     3s                       │            
             │  Appearance        │                                                     │            
-            │                    │   Display name             amber-heron              │            
-            │                    │   Auto-close on submit     3s                       │            
+            │                    │                                                     │            
+            │                    │                                                     │            
             │                    │                                                     │            
             │                    │                                                     │            
             │                    │                                                     │            
@@ -1044,6 +1044,7 @@ exports[`stories catalog Surfaces/ThreadTree/TwoPending renders, snapshots, and
 " Projects                                                                       
    widget                                                                      
     Migration Plan                                                              
+                                                                                
  Threads                                                                        
     working tree                                                                
                                                                                 
@@ -1052,7 +1053,6 @@ exports[`stories catalog Surfaces/ThreadTree/TwoPending renders, snapshots, and
                                                                                 
                                                                                 
                                                                                 
-                                                                                
 "
 `;
 
@@ -1098,6 +1098,7 @@ exports[`stories catalog Surfaces/ThreadsSidebar/Open renders, snapshots, and ca
 " Projects                    │                              
    widget                   │                              
     Migration Plan           │                              
+                             │                              
  Threads                     │                              
     working tree             │                              
                              │                              
@@ -1106,7 +1107,6 @@ exports[`stories catalog Surfaces/ThreadsSidebar/Open renders, snapshots, and ca
                              │                              
                              │                              
                              │                              
-                             │                              
 "
 `;
 
@@ -1753,54 +1753,54 @@ exports[`stories catalog Primitives/Tree/ProjectsThreads renders, snapshots, and
 `;
 
 exports[`stories catalog Chrome/QuickActionsEditor/Collapsed renders, snapshots, and carries its colors: Chrome/QuickActionsEditor/Collapsed 1`] = `
-"  click a prompt to edit its system  reset to         
-  prompt                             defaults ▸       
+"                                                 reset
                                                       
-  ▸ Zoom out, research in depth                       
-    Research the broader problem, prior art, an…      
-  ▸ Restate simplified                                
-    Restate this as the simplest thing that wor…      
-  ▸ Out of scope                                      
-    This is out of scope for the task, so captu…      
-  ▸ Let's chat about this                             
-    Do not implement yet, and surface the open …      
-  ▸ Prototype this                                    
-    Build a throwaway prototype to answer the q…      
-  ▸ Ensure 0 regressions                              
-    Characterize the current behavior with test…      
-  ▸ Consider existing repo patterns                   
-    Follow the nearest existing pattern in this…      
-  ▸ LGTM                                              
-    This looks good to me.                            
+  Zoom out, research in depth                         
+  Research the broader problem, prior art, an…        
+  Restate simplified                                  
+  Restate this as the simplest thing that wor…        
+  Out of scope                                        
+  This is out of scope for the task, so captu…        
+  Let's chat about this                               
+  Do not implement yet, and surface the open …        
+  Prototype this                                      
+  Build a throwaway prototype to answer the q…        
+  Ensure 0 regressions                                
+  Characterize the current behavior with test…        
+  Consider existing repo patterns                     
+  Follow the nearest existing pattern in this…        
+  LGTM                                                
+  This looks good to me.                              
   + Add action                                        
                                                       
                                                       
+                                                      
 "
 `;
 
 exports[`stories catalog Chrome/QuickActionsEditor/RowExpanded renders, snapshots, and carries its colors: Chrome/QuickActionsEditor/RowExpanded 1`] = `
-"  click a prompt to edit its system  reset to         
-  prompt                             defaults ▸       
+"                                                 reset
                                                       
-  ▸ Zoom out, research in depth                       
-    Research the broader problem, prior art, an…      
-  ▾ Restate simplified                                
-    > Restate this as the simplest thing that works   
-  ▸ Out of scope                                      
-    This is out of scope for the task, so captu…      
-  ▸ Let's chat about this                             
-    Do not implement yet, and surface the open …      
-  ▸ Prototype this                                    
-    Build a throwaway prototype to answer the q…      
-  ▸ Ensure 0 regressions                              
-    Characterize the current behavior with test…      
-  ▸ Consider existing repo patterns                   
-    Follow the nearest existing pattern in this…      
-  ▸ LGTM                                              
-    This looks good to me.                            
+  Zoom out, research in depth                         
+  Research the broader problem, prior art, an…        
+  Restate simplified                                  
+  Restate this as the simplest thing that works and   
+  Out of scope                                        
+  This is out of scope for the task, so captu…        
+  Let's chat about this                               
+  Do not implement yet, and surface the open …        
+  Prototype this                                      
+  Build a throwaway prototype to answer the q…        
+  Ensure 0 regressions                                
+  Characterize the current behavior with test…        
+  Consider existing repo patterns                     
+  Follow the nearest existing pattern in this…        
+  LGTM                                                
+  This looks good to me.                              
   + Add action                                        
                                                       
                                                       
+                                                      
 "
 `;
 
@@ -1885,5 +1885,14 @@ exports[`stories catalog Foundations/Theme/ProviderSwap renders, snapshots, and
                                                                                 
                                                                                 
                                                                                 
+"
+`;
+
+exports[`stories catalog Layout/MenuControl/OneOpenAtATime renders, snapshots, and carries its colors: Layout/MenuControl/OneOpenAtATime 1`] = `
+"                              
+ alpha: open                  
+ beta: closed                 
+                              
+                              
 "
 `;

package/src/components/menu-control.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { MenuControlProvider, useMenuControl } from "./menu-control";
+
+export const meta: StoryMeta = { title: "Layout/MenuControl" };
+
+// One open menu at a time: with "alpha" open, only its row reads as open.
+function MenuControlDemo(): React.ReactNode {
+  const { openMenuId } = useMenuControl();
+  const row = (id: string): React.ReactNode => (
+    <text fg={openMenuId === id ? DARK.accent : DARK.textDim}>
+      {`${id}: ${openMenuId === id ? "open" : "closed"}`}
+    </text>
+  );
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {row("alpha")}
+      {row("beta")}
+    </box>
+  );
+}
+
+export const OneOpenAtATime: Story = {
+  render: () => (
+    <MenuControlProvider value={{ openMenuId: "alpha", toggleMenu: () => {}, closeMenu: () => {} }}>
+      <box style={{ padding: 1, backgroundColor: DARK.panel }}>
+        <MenuControlDemo />
+      </box>
+    </MenuControlProvider>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 30, height: 5 },
+};

package/src/components/menu-control.tsx

@@ -0,0 +1,43 @@
+// One open menu at a time across a shell: the thread row menu and the editor split menu share this
+// single open id, so opening either closes the other. Owned by App and by the no-thread shell, one each.
+
+import React, { createContext, useContext, useMemo, useState } from "react";
+
+export interface MenuControlApi {
+  openMenuId: string | null;
+  toggleMenu: (id: string) => void;
+  closeMenu: () => void;
+}
+
+const MenuControlContext = createContext<MenuControlApi>({
+  openMenuId: null,
+  toggleMenu: () => {},
+  closeMenu: () => {},
+});
+
+export function useMenuControl(): MenuControlApi {
+  return useContext(MenuControlContext);
+}
+
+export function useMenuControlState(): MenuControlApi {
+  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
+
+  return useMemo(
+    () => ({
+      openMenuId,
+      toggleMenu: (id: string) => setOpenMenuId((current) => (current === id ? null : id)),
+      closeMenu: () => setOpenMenuId(null),
+    }),
+    [openMenuId],
+  );
+}
+
+export function MenuControlProvider({
+  value,
+  children,
+}: {
+  value: MenuControlApi;
+  children: React.ReactNode;
+}): React.ReactNode {
+  return <MenuControlContext.Provider value={value}>{children}</MenuControlContext.Provider>;
+}

package/src/components/primitives/Dialog.test.tsx

@@ -0,0 +1,37 @@
+/** The dialog dismisses on a backdrop click (outside the panel) but never on a click inside it. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { Dialog } from "./Dialog";
+import { settle } from "../../test-support";
+import { DARK } from "../../theme";
+
+test("clicking the backdrop dismisses; clicking inside the panel does not", async () => {
+  let dismissed = 0;
+  const setup = await testRender(
+    <Dialog
+      isOpen
+      title=" test "
+      width={20}
+      height={5}
+      background={DARK.elevated}
+      onDismiss={() => (dismissed += 1)}
+      theme={DARK}
+    >
+      <text>body</text>
+    </Dialog>,
+    { width: 60, height: 20 },
+  );
+  await settle(setup);
+
+  // the top-left corner is backdrop, outside the centered panel
+  await setup.mockMouse.click(0, 0);
+  expect(dismissed).toBe(1);
+
+  // the screen centre lands inside the panel, so it must not dismiss
+  await setup.mockMouse.click(30, 10);
+  expect(dismissed).toBe(1);
+
+  setup.renderer.destroy();
+});

package/src/components/primitives/Dialog.tsx

@@ -17,6 +17,8 @@ export interface DialogProps {
   height: number;
   /** Solid panel fill for content-heavy dialogs; default transparent. */
   background?: string;
+  /** Dismiss on a click outside the panel. */
+  onDismiss?: () => void;
   theme?: Theme;
   children: React.ReactNode;
 }
@@ -27,6 +29,7 @@ export function Dialog({
   width,
   height,
   background,
+  onDismiss,
   theme,
   children,
 }: DialogProps): React.ReactNode {
@@ -36,6 +39,7 @@ export function Dialog({
 
   return (
     <box
+      onMouseUp={onDismiss}
       style={{
         position: "absolute",
         left: 0,
@@ -48,6 +52,7 @@ export function Dialog({
       }}
     >
       <box
+        onMouseUp={(event) => event.stopPropagation()}
         style={{
           width,
           height,

package/src/components/primitives/icons.ts

@@ -13,7 +13,7 @@ export const NERD = {
   copy: "",
   unfold: "",
   kebab: "⋮",
-  pin: "⚑",
+  star: "★",
   close: "✕",
   listTree: "",
   sidebarLeft: "",

package/src/components/quick-actions-editor.stories.tsx

@@ -24,6 +24,7 @@ export const Collapsed: Story = {
         actions={DEFAULT_QUICK_ACTIONS}
         selectedIndex={0}
         expandedIndex={null}
+        expandedField="prompt"
         onToggleExpand={noop}
         onEditPrompt={() => {}}
         onEditMetadata={noop}
@@ -43,6 +44,7 @@ export const RowExpanded: Story = {
         actions={DEFAULT_QUICK_ACTIONS}
         selectedIndex={1}
         expandedIndex={1}
+        expandedField="prompt"
         onToggleExpand={noop}
         onEditPrompt={() => {}}
         onEditMetadata={noop}

package/src/components/quick-actions-editor.test.tsx

@@ -4,7 +4,7 @@ import { describe, expect, test } from "bun:test";
 import React from "react";
 import { testRender } from "@opentui/react/test-utils";
 import type { QuickAction } from "../config";
-import { settle, typeText } from "../test-support";
+import { locateText, settle, typeText } from "../test-support";
 import { QuickActionsEditor } from "./quick-actions-editor";
 
 const MANY: QuickAction[] = Array.from({ length: 14 }, (_, index) => ({
@@ -17,6 +17,7 @@ async function mount(selectedIndex: number) {
       actions={MANY}
       selectedIndex={selectedIndex}
       expandedIndex={null}
+      expandedField="prompt"
       onToggleExpand={() => {}}
       onEditPrompt={() => {}}
       onEditMetadata={() => {}}
@@ -58,6 +59,7 @@ describe("editing an expanded action", () => {
         actions={[{ prompt: "Ship it", metadata: "be terse" }]}
         selectedIndex={0}
         expandedIndex={0}
+        expandedField="prompt"
         onToggleExpand={() => {}}
         onEditPrompt={(_index, prompt) => prompts.push(prompt)}
         onEditMetadata={(_index, metadata) => metadatas.push(metadata)}
@@ -80,4 +82,36 @@ describe("editing an expanded action", () => {
 
     setup.renderer.destroy();
   });
+
+  test("clicking the description row opens the editor on the metadata field directly", async () => {
+    const toggles: Array<{ index: number; field: "prompt" | "metadata" }> = [];
+    const setup = await testRender(
+      <QuickActionsEditor
+        actions={[{ prompt: "Ship it", metadata: "be terse" }]}
+        selectedIndex={0}
+        expandedIndex={null}
+        expandedField="prompt"
+        onToggleExpand={(index, field) => toggles.push({ index, field })}
+        onEditPrompt={() => {}}
+        onEditMetadata={() => {}}
+        onReset={() => {}}
+        onAdd={() => {}}
+      />,
+      { width: 60, height: 8 },
+    );
+    await settle(setup);
+
+    // clicking the title opens the title field; clicking the description opens the metadata field
+    const title = locateText(setup, "Ship it");
+    await setup.mockMouse.click(title.column, title.row);
+    const description = locateText(setup, "be terse");
+    await setup.mockMouse.click(description.column, description.row);
+
+    expect(toggles).toEqual([
+      { index: 0, field: "prompt" },
+      { index: 0, field: "metadata" },
+    ]);
+
+    setup.renderer.destroy();
+  });
 });

package/src/components/quick-actions-editor.tsx

@@ -22,8 +22,10 @@ export interface QuickActionsEditorProps {
   selectedIndex: number;
   /** The row whose system-prompt input is open and focused, or null. */
   expandedIndex: number | null;
-  /** Select and toggle a row's editor open/closed. */
-  onToggleExpand: (index: number) => void;
+  /** Which field the open editor focuses first - set by the clicked row. */
+  expandedField: "prompt" | "metadata";
+  /** Select and toggle a row's editor open/closed, focusing the given field. */
+  onToggleExpand: (index: number, field: "prompt" | "metadata") => void;
   onEditPrompt: (index: number, prompt: string) => void;
   onEditMetadata: (index: number, metadata: string) => void;
   onReset: () => void;
@@ -35,6 +37,7 @@ export function QuickActionsEditor({
   actions,
   selectedIndex,
   expandedIndex,
+  expandedField,
   onToggleExpand,
   onEditPrompt,
   onEditMetadata,
@@ -52,11 +55,9 @@ export function QuickActionsEditor({
   return (
     <box style={{ flexDirection: "column", flexGrow: 1 }}>
       <box style={{ flexDirection: "row" }}>
-        <box style={{ flexGrow: 1 }}>
-          <text fg={tokens.textDim}>click a prompt to edit its system prompt</text>
-        </box>
+        <box style={{ flexGrow: 1 }} />
         <box onMouseUp={onReset}>
-          <text fg={tokens.textDim}>reset to defaults ▸</text>
+          <text fg={tokens.textDim}>reset</text>
         </box>
       </box>
       <box style={{ height: 1 }} />
@@ -68,7 +69,8 @@ export function QuickActionsEditor({
             action={action}
             isSelected={index === selectedIndex}
             isExpanded={index === expandedIndex}
-            onToggleExpand={() => onToggleExpand(index)}
+            initialField={expandedField}
+            onToggleExpand={(field) => onToggleExpand(index, field)}
             onEditPrompt={(prompt) => onEditPrompt(index, prompt)}
             onEditMetadata={(metadata) => onEditMetadata(index, metadata)}
             theme={theme}
@@ -91,6 +93,7 @@ function ActionRow({
   action,
   isSelected,
   isExpanded,
+  initialField,
   onToggleExpand,
   onEditPrompt,
   onEditMetadata,
@@ -100,7 +103,8 @@ function ActionRow({
   action: QuickAction;
   isSelected: boolean;
   isExpanded: boolean;
-  onToggleExpand: () => void;
+  initialField: "prompt" | "metadata";
+  onToggleExpand: (field: "prompt" | "metadata") => void;
   onEditPrompt: (prompt: string) => void;
   onEditMetadata: (metadata: string) => void;
   theme?: Theme;
@@ -113,9 +117,10 @@ function ActionRow({
         <ActionEditor
           action={action}
           isSelected={isSelected}
+          initialField={initialField}
           onEditPrompt={onEditPrompt}
           onEditMetadata={onEditMetadata}
-          onDone={onToggleExpand}
+          onDone={() => onToggleExpand("prompt")}
           tokens={tokens}
         />
       </box>
@@ -126,12 +131,12 @@ function ActionRow({
     <box id={rowId} style={{ flexDirection: "column" }}>
       <box
         style={{ backgroundColor: isSelected ? tokens.border : undefined }}
-        onMouseUp={onToggleExpand}
+        onMouseUp={() => onToggleExpand("prompt")}
       >
-        <text fg={isSelected ? tokens.text : tokens.textMuted}>{`▸ ${action.prompt}`}</text>
+        <text fg={isSelected ? tokens.text : tokens.textMuted}>{action.prompt}</text>
       </box>
       {action.metadata ? (
-        <box style={{ paddingLeft: 2 }}>
+        <box onMouseUp={() => onToggleExpand("metadata")}>
           <text fg={tokens.textDim}>{truncateMetadata(action.metadata)}</text>
         </box>
       ) : null}
@@ -141,12 +146,13 @@ function ActionRow({
 
 /**
  * The two-field editor for an expanded row: the action title over its system
- * prompt. Mounts fresh per expand, so focus starts on the title without a reset
- * effect; ⏎ steps title -> description -> close, and a click focuses either.
+ * prompt. Mounts fresh per expand, so focus starts on the clicked field without a
+ * reset effect; ⏎ steps title -> description -> close, and a click focuses either.
  */
 function ActionEditor({
   action,
   isSelected,
+  initialField,
   onEditPrompt,
   onEditMetadata,
   onDone,
@@ -154,6 +160,7 @@ function ActionEditor({
 }: {
   action: QuickAction;
   isSelected: boolean;
+  initialField: "prompt" | "metadata";
   onEditPrompt: (prompt: string) => void;
   onEditMetadata: (metadata: string) => void;
   onDone: () => void;
@@ -161,7 +168,7 @@ function ActionEditor({
 }): React.ReactNode {
   const promptRef = useRef<TextareaRenderable | null>(null);
   const metadataRef = useRef<TextareaRenderable | null>(null);
-  const [activeField, setActiveField] = useState<"prompt" | "metadata">("prompt");
+  const [activeField, setActiveField] = useState<"prompt" | "metadata">(initialField);
 
   // the focused field types from its end, not from the caret parked at the start
   useEffect(() => {
@@ -184,9 +191,6 @@ function ActionEditor({
       <box
         style={{ flexDirection: "row", backgroundColor: isSelected ? tokens.border : undefined }}
       >
-        <box style={{ width: 2, flexShrink: 0 }}>
-          <text fg={isSelected ? tokens.text : tokens.textMuted}>{"▾ "}</text>
-        </box>
         <textarea
           ref={promptRef}
           focused={activeField === "prompt"}
@@ -199,10 +203,7 @@ function ActionEditor({
           style={fieldStyle}
         />
       </box>
-      <box style={{ flexDirection: "row", paddingLeft: 2 }}>
-        <box style={{ width: 2, flexShrink: 0 }}>
-          <text fg={tokens.textDim}>{">"}</text>
-        </box>
+      <box style={{ flexDirection: "row" }}>
         <textarea
           ref={metadataRef}
           focused={activeField === "metadata"}

package/src/components/session-tree.test.ts

@@ -112,19 +112,19 @@ describe("groupInbox", () => {
     expect(rows.some((row) => row.kind === "section" && row.label === "Threads")).toBe(true);
   });
 
-  test("a pinned thread lifts into a Pinned section at the top, out of its normal group", () => {
+  test("a pinned thread lifts into a Starred section at the top, out of its normal group", () => {
     // Arrange - one repo-bound thread, one standalone; pin the repo-bound one
     const sessions = [session("a", "Pinned one", "root-1"), session("b", "Loose two")];
 
     // Act
     const { rows, ordered } = groupInbox(sessions, new Set(["a"]));
 
-    // Assert - Pinned is the first section and holds thread a; a is gone from Projects
+    // Assert - Starred is the first section and holds thread a; a is gone from Projects
     const sections = rows
       .filter((row) => row.kind === "section")
       .map((row) => (row.kind === "section" ? row.label : ""));
 
-    expect(sections[0]).toBe("Pinned");
+    expect(sections[0]).toBe("Starred");
     expect(sections).not.toContain("Projects"); // its only member was pinned away
     expect(ordered[0]!.id).toBe("a"); // the cursor walks pinned threads first
     const pinnedThreadIds = rows.filter((row) => row.kind === "thread").map((row) => row.id);

package/src/components/session-tree.ts

@@ -84,7 +84,7 @@ export function groupInbox(
   };
 
   if (pinned.length > 0) {
-    rows.push({ kind: "section", id: "section:pinned", label: "Pinned" });
+    rows.push({ kind: "section", id: "section:pinned", label: "Starred" });
     for (const session of pinned) pushThread(session);
   }
 

package/src/config.ts

@@ -151,6 +151,7 @@ export const DEFAULT_KEYS: CueloopConfig["keys"] = {
   share: ["S"],
   quit: ["q"],
   walk: ["w"],
+  leader: ["ctrl+g"],
 };
 
 const SkillsSectionSchema = v.object({ path: v.optional(v.string()) });