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

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

@@ -1,4 +1,4 @@
-// Bun Snapshot v1, https://goo.gl/fbAQLP
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
 
 exports[`stories catalog Surfaces/AnnotatableFileView/Loaded renders, snapshots, and carries its colors: Surfaces/AnnotatableFileView/Loaded 1`] = `
 " ▎1 export function add(a: number, b: number): number {     
@@ -667,6 +667,50 @@ exports[`stories catalog Overlays/KeybindsDialog/Cheatsheet renders, snapshots,
                                                                       
                                                                       
                                                                       
+"
+`;
+
+exports[`stories catalog Dialogs/ManageAccess/Empty renders, snapshots, and carries its colors: Dialogs/ManageAccess/Empty 1`] = `
+"                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+   ┌─ Manage access ────────────────────────────────────┐   
+   │ Only these GitHub users can open the private link. │   
+   │                                                    │   
+   │ no one yet - add a handle below                    │   
+   │                                                    │   
+   │                                                    │   
+   │ @handle                                            │   
+   │ add   create link   close                          │   
+   └────────────────────────────────────────────────────┘   
+                                                            
+                                                            
+                                                            
+                                                            
+"
+`;
+
+exports[`stories catalog Dialogs/ManageAccess/WithHandles renders, snapshots, and carries its colors: Dialogs/ManageAccess/WithHandles 1`] = `
+"                                                            
+                                                            
+                                                            
+                                                            
+   ┌─ Manage access ────────────────────────────────────┐   
+   │ Only these GitHub users can open the private link. │   
+   │                                                    │   
+   │ @octocat                                    remove │   
+   │ @hubot                                      remove │   
+   │                                                    │   
+   │                                                    │   
+   │                                                    │   
+   │ @handle                                            │   
+   │ add   create link   close                          │   
+   └────────────────────────────────────────────────────┘   
+                                                            
+                                                            
+                                                            
 "
 `;
 
@@ -793,7 +837,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 +857,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 +922,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 +956,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 +990,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                       │            
+            │                    │                                                     │            
+            │                    │                                                     │            
             │                    │                                                     │            
             │                    │                                                     │            
             │                    │                                                     │            
@@ -999,6 +1043,16 @@ exports[`stories catalog Chrome/SettingsRows/AllKinds renders, snapshots, and ca
                                                                                 
                                                                                 
                                                                                 
+"
+`;
+
+exports[`stories catalog Chrome/ShareMenu/Closed renders, snapshots, and carries its colors: Chrome/ShareMenu/Closed 1`] = `
+"   share                                
+                                        
+                                        
+                                        
+                                        
+                                        
 "
 `;
 
@@ -1044,6 +1098,7 @@ exports[`stories catalog Surfaces/ThreadTree/TwoPending renders, snapshots, and
 " Projects                                                                       
    widget                                                                      
     Migration Plan                                                              
+                                                                                
  Threads                                                                        
     working tree                                                                
                                                                                 
@@ -1052,7 +1107,6 @@ exports[`stories catalog Surfaces/ThreadTree/TwoPending renders, snapshots, and
                                                                                 
                                                                                 
                                                                                 
-                                                                                
 "
 `;
 
@@ -1098,6 +1152,7 @@ exports[`stories catalog Surfaces/ThreadsSidebar/Open renders, snapshots, and ca
 " Projects                    │                              
    widget                   │                              
     Migration Plan           │                              
+                             │                              
  Threads                     │                              
     working tree             │                              
                              │                              
@@ -1106,7 +1161,6 @@ exports[`stories catalog Surfaces/ThreadsSidebar/Open renders, snapshots, and ca
                              │                              
                              │                              
                              │                              
-                             │                              
 "
 `;
 
@@ -1367,6 +1421,15 @@ exports[`stories catalog Chrome/AgentLauncher/Launcher renders, snapshots, and c
                                         
                                         
                                         
+"
+`;
+
+exports[`stories catalog Layout/MenuControl/OneOpenAtATime renders, snapshots, and carries its colors: Layout/MenuControl/OneOpenAtATime 1`] = `
+"                              
+ alpha: open                  
+ beta: closed                 
+                              
+                              
 "
 `;
 
@@ -1753,54 +1816,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 +1948,37 @@ exports[`stories catalog Foundations/Theme/ProviderSwap renders, snapshots, and
                                                                                 
                                                                                 
                                                                                 
+"
+`;
+
+exports[`stories catalog Dialogs/ShareChoice/PrivateSelected renders, snapshots, and carries its colors: Dialogs/ShareChoice/PrivateSelected 1`] = `
+"                                                            
+                                                            
+                                                            
+       ┌─ Share ────────────────────────────────────┐       
+       │   public link                              │       
+       │ › private link                             │       
+       │                                            │       
+       │                                            │       
+       │ ↑↓ choose · enter select · esc cancel      │       
+       └────────────────────────────────────────────┘       
+                                                            
+                                                            
+"
+`;
+
+exports[`stories catalog Dialogs/ShareChoice/PublicSelected renders, snapshots, and carries its colors: Dialogs/ShareChoice/PublicSelected 1`] = `
+"                                                            
+                                                            
+                                                            
+       ┌─ Share ────────────────────────────────────┐       
+       │ › public link                              │       
+       │   private link                             │       
+       │                                            │       
+       │                                            │       
+       │ ↑↓ choose · enter select · esc cancel      │       
+       └────────────────────────────────────────────┘       
+                                                            
+                                                            
 "
 `;

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