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

package/src/components/DiffContentView.tsx

@@ -10,7 +10,7 @@
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { createTextAttributes, type KeyEvent, type ScrollBoxRenderable } from "@opentui/core";
-import type { Thread } from "@cueloop/schema";
+import type { Annotation, Thread } from "@cueloop/schema";
 import { diffRowText, fileChangeCounts, type DiffRow, type Mark } from "../view-diff";
 import type { TextSpan } from "../thread-selection";
 import type { QuickAction } from "../config";
@@ -95,6 +95,8 @@ export interface DiffContentViewProps {
   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;
@@ -489,6 +491,7 @@ export function DiffContentView({
   onAnnotate,
   onReply,
   onUpdateAnnotation,
+  resolveAuthorLabel,
   leaderCombos,
   onLeaderCommand,
   onExit,
@@ -524,6 +527,7 @@ export function DiffContentView({
     onAnnotate,
     onReply,
     onUpdateAnnotation,
+    resolveAuthorLabel,
     leaderCombos,
     onLeaderCommand,
     onExit,

package/src/components/GridTabContent.tsx

@@ -34,6 +34,7 @@ export type DiffSurfaceProps = Pick<
   | "onAnnotate"
   | "onReply"
   | "onUpdateAnnotation"
+  | "resolveAuthorLabel"
   | "leaderCombos"
   | "onLeaderCommand"
   | "onExit"
@@ -121,6 +122,7 @@ export function GridTabContent(props: {
         onAddComment={(anchor, body) => props.onAddFileComment(filePath, anchor, body)}
         onReply={props.surface.onReply}
         onUpdateAnnotation={props.surface.onUpdateAnnotation}
+        resolveAuthorLabel={props.surface.resolveAuthorLabel}
         onExit={props.surface.onExit}
         theme={props.theme}
       />

package/src/components/ManageAccessDialog.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ManageAccessDialog } from "./ManageAccessDialog";
+
+export const meta: StoryMeta = { title: "Dialogs/ManageAccess" };
+
+export const WithHandles: Story = {
+  render: () => (
+    <ManageAccessDialog
+      isOpen
+      logins={["octocat", "hubot"]}
+      onAdd={() => {}}
+      onRemove={() => {}}
+      onCreateLink={() => {}}
+      onClose={() => {}}
+      theme={DARK}
+    />
+  ),
+  size: { width: 60, height: 18 },
+};
+
+export const Empty: Story = {
+  render: () => (
+    <ManageAccessDialog
+      isOpen
+      logins={[]}
+      onAdd={() => {}}
+      onRemove={() => {}}
+      onCreateLink={() => {}}
+      onClose={() => {}}
+      theme={DARK}
+    />
+  ),
+  size: { width: 60, height: 18 },
+};

package/src/components/ManageAccessDialog.test.tsx

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

package/src/components/ManageAccessDialog.tsx

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

package/src/components/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/ThreadView.tsx

@@ -14,7 +14,7 @@
 
 import React, { useEffect, useRef } from "react";
 import type { KeyEvent, ScrollBoxRenderable } from "@opentui/core";
-import type { Thread } from "@cueloop/schema";
+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,8 @@ 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;
@@ -150,6 +152,7 @@ export function ThreadView({
   onAnnotate,
   onReply,
   onUpdateAnnotation,
+  resolveAuthorLabel,
   leaderCombos,
   onLeaderCommand,
   onExit,
@@ -178,6 +181,7 @@ export function ThreadView({
     onAnnotate,
     onReply,
     onUpdateAnnotation,
+    resolveAuthorLabel,
     leaderCombos,
     onLeaderCommand,
     onExit,

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                          │   
+   └────────────────────────────────────────────────────┘   
+                                                            
+                                                            
+                                                            
 "
 `;
 
@@ -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                                
+                                        
+                                        
+                                        
+                                        
+                                        
 "
 `;
 
@@ -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                 
+                              
+                              
 "
 `;
 
@@ -1888,11 +1951,34 @@ 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                 
-                              
-                              
+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      │       
+       └────────────────────────────────────────────┘       
+                                                            
+                                                            
 "
 `;