@cueloop/client 0.1.0-alpha.78 → 0.1.0-alpha.79

package/src/components/ManageAccessDialog.tsx

@@ -1,122 +0,0 @@
-/**
- * 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";
-import { Button } from "./primitives/Button";
-import { Toolbar } from "./primitives/Toolbar";
-
-// 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>
-        <Toolbar>
-          <Button marginRight={2} onPress={addDraft} theme={theme}>
-            {" add "}
-          </Button>
-          <Button variant="solid" marginRight={2} onPress={onCreateLink} theme={theme}>
-            {" create link "}
-          </Button>
-          <Button onPress={onClose} theme={theme}>
-            {" close "}
-          </Button>
-        </Toolbar>
-      </box>
-    </Dialog>
-  );
-}

package/src/components/ShareChoiceDialog.stories.tsx

@@ -1,34 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,80 +0,0 @@
-/**
- * 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>
-    </Dialog>
-  );
-}

package/src/components/ThreadsSidebar.stories.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-import { DARK } from "../theme";
-import type { Story, StoryMeta } from "./story";
-import { ThreadsSidebar } from "./ThreadsSidebar";
-import { groupInbox } from "./session-tree";
-import { fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
-
-export const meta: StoryMeta = { title: "Surfaces/ThreadsSidebar" };
-
-function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
-  return <box style={{ width: "100%", height: "100%", flexDirection: "row" }}>{children}</box>;
-}
-
-const plan = fixturePlanSession();
-const projectPlan = {
-  ...plan,
-  workspace: { ...plan.workspace, rootCommit: "root-1", remote: "git@github.com:acme/widget.git" },
-};
-const { rows, ordered } = groupInbox([projectPlan, fixtureDiffSession()]);
-
-export const Open: Story = {
-  render: () => (
-    <Frame>
-      <ThreadsSidebar
-        open
-        rows={rows}
-        cursor={0}
-        activeId={ordered[0]!.id}
-        onSelect={() => {}}
-        theme={DARK}
-      />
-    </Frame>
-  ),
-  expectedColors: [DARK.accent, DARK.border],
-  size: { width: 60, height: 12 },
-};

package/src/components/ThreadsSidebar.tsx

@@ -1,71 +0,0 @@
-// The left Projects and Threads column: a collapsible, scrollable tree beside the
-// thread. A click jumps to that thread; the open thread stays highlighted. Renders
-// nothing when collapsed so the thread reclaims the width.
-
-import { ScrollArea } from "./ScrollArea";
-import React from "react";
-import type { Theme } from "../theme";
-import { ThreadTree } from "./ThreadTree";
-import type { InboxRow } from "./session-tree";
-
-export interface ThreadsSidebarProps {
-  open: boolean;
-  rows: InboxRow[];
-  cursor: number;
-  /** The open thread's id, highlighted in the list. */
-  activeId?: string;
-  /** Ids of pinned threads. */
-  pinnedIds?: ReadonlySet<string>;
-  onSelect: (sessionId: string) => void;
-  /** Ask to delete a thread (the row menu's Delete, wired to the confirm dialog). */
-  onRequestDelete?: (id: string, title: string) => void;
-  /** Toggle a thread's pinned state (the row menu's Pin/Unpin). */
-  onPin?: (id: string) => void;
-  /** Rename a thread's title (the row menu's Rename). */
-  onRename?: (id: string, title: string) => void;
-  width?: number;
-  theme?: Theme;
-}
-
-export function ThreadsSidebar({
-  open,
-  rows,
-  cursor,
-  activeId,
-  pinnedIds,
-  onSelect,
-  onRequestDelete,
-  onPin,
-  onRename,
-  width = 30,
-  theme,
-}: ThreadsSidebarProps): React.ReactNode {
-  if (!open) return null;
-
-  return (
-    <box
-      style={{
-        width,
-        flexDirection: "column",
-        borderStyle: "single",
-        border: ["right"],
-        borderColor: theme?.border,
-      }}
-    >
-      <ScrollArea>
-        <ThreadTree
-          rows={rows}
-          cursor={cursor}
-          activeId={activeId}
-          pinnedIds={pinnedIds}
-          width={width}
-          onSelect={onSelect}
-          onRequestDelete={onRequestDelete}
-          onPin={onPin}
-          onRename={onRename}
-          theme={theme}
-        />
-      </ScrollArea>
-    </box>
-  );
-}

package/src/components/agent-launcher.stories.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { DARK } from "../theme";
-import type { Story, StoryMeta } from "./story";
-import { AgentLauncher } from "./agent-launcher";
-import { fixturePlanSession } from "./story-fixtures";
-
-export const meta: StoryMeta = { title: "Chrome/AgentLauncher" };
-
-/** The launcher expects the rail's narrow, height-constrained column. */
-function RailFrame({ children }: { children: React.ReactNode }): React.ReactNode {
-  return (
-    <box style={{ width: 40, height: 24, paddingLeft: 2, backgroundColor: DARK.panel }}>
-      {children}
-    </box>
-  );
-}
-
-export const Launcher: Story = {
-  render: () => (
-    <RailFrame>
-      <AgentLauncher session={fixturePlanSession()} onLaunchHarness={() => {}} theme={DARK} />
-    </RailFrame>
-  ),
-  expectedColors: [DARK.accent],
-  size: { width: 40, height: 24 },
-};

package/src/components/agent-launcher.test.tsx

@@ -1,50 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import React from "react";
-import { testRender } from "@opentui/react/test-utils";
-import { DARK } from "../theme";
-import { fixturePlanSession } from "./story-fixtures";
-import { waitForText } from "../test-support";
-import { AgentLauncher, HARNESS_LAUNCHERS, planHandoffBriefing } from "./agent-launcher";
-
-describe("planHandoffBriefing", () => {
-  test("references the session by id and directs the agent to read then annotate, not rewrite", () => {
-    // Act
-    const briefing = planHandoffBriefing("ses_42");
-
-    // Assert
-    expect(briefing).toContain("cueloop session get ses_42");
-    expect(briefing).toContain("cueloop session annotate ses_42");
-    expect(briefing).toContain("Do not rewrite the plan");
-  });
-});
-
-describe("HARNESS_LAUNCHERS", () => {
-  test("carries the three harnesses with real binary commands (never the `cc` alias)", () => {
-    // Assert - `cc` resolves to the system C compiler when spawned on a PTY, so
-    // the Claude harness must run `claude`, the real binary, not the shell alias
-    expect(HARNESS_LAUNCHERS.map((harness) => harness.command)).toEqual(["claude", "pi", "codex"]);
-  });
-});
-
-describe("AgentLauncher", () => {
-  test("renders a button for every harness, in order", async () => {
-    // Arrange
-    const setup = await testRender(
-      <box style={{ width: 44, height: 20, flexDirection: "column" }}>
-        <AgentLauncher session={fixturePlanSession()} onLaunchHarness={() => {}} theme={DARK} />
-      </box>,
-      { width: 44, height: 20 },
-    );
-
-    // Act
-    await waitForText(setup, "Claude Code");
-    const frame = setup.captureCharFrame();
-
-    // Assert - all three launcher names present, in launch order
-    const names = HARNESS_LAUNCHERS.map((harness) => harness.name);
-    const positions = names.map((name) => frame.indexOf(name));
-
-    expect(positions.every((position) => position >= 0)).toBe(true);
-    expect(positions).toEqual(positions.toSorted((left, right) => left - right));
-  });
-});

package/src/components/agent-launcher.tsx

@@ -1,149 +0,0 @@
-/**
- * The Agent rail launcher: bring-your-own review harness. Branded claude code /
- * pi / codex cards that, on click, run that harness in a herdr split beside the
- * review (see launchHarnessInSplit) so a reviewer can ask an agent about the plan
- * without leaving the tab. A plan-context toggle seeds a briefing into the split.
- */
-
-import React, { useEffect, useRef, useState } from "react";
-import type { Thread } from "@cueloop/schema";
-import type { Theme } from "../theme";
-import { useComponentTheme } from "./theme-context";
-import { FRAME_BORDER_STYLE } from "./primitives/frame";
-import {
-  embeddedTerminalAvailable,
-  registerTerminalPane,
-  type TerminalPaneRenderable,
-} from "./terminal-pane";
-
-registerTerminalPane();
-
-/** A running in-tab agent terminal, handed to the app so it can route keys and detach. */
-export interface AgentTerminalHandle {
-  write: (data: string) => void;
-  detach: () => void;
-}
-
-/** One launchable harness: its display name and the rail command. */
-export interface HarnessLauncher {
-  id: string;
-  name: string;
-  /** The shell command that starts the harness, run in the split. */
-  command: string;
-}
-
-/** Off-white for the running-terminal header, shared by every harness. */
-const HARNESS_HEADER_COLOR = "#e4e6ec";
-
-/** The bring-your-own harnesses, in launch order. The command is the real binary
- *  name spawned on a PTY (not a shell alias, so `claude` - never `cc`, which is
- *  the system C compiler). */
-export const HARNESS_LAUNCHERS: HarnessLauncher[] = [
-  { id: "claude", name: "Claude Code", command: "claude" },
-  { id: "pi", name: "Pi", command: "pi" },
-  { id: "codex", name: "OpenAI Codex", command: "codex" },
-];
-
-/** The briefing typed into a launched harness when the plan-context toggle is on. */
-export function planHandoffBriefing(sessionId: string): string {
-  return `Review this cueloop plan: read it with 'cueloop session get ${sessionId}', then comment with 'cueloop session annotate ${sessionId} --author me --quote "<exact span>" --body "<comment>"'. Do not rewrite the plan.`;
-}
-
-/** Props for the Agent tab body: the session under review plus the launch callbacks. */
-export interface AgentLauncherProps {
-  session: Thread;
-  /**
-   * Fallback launch when no embedded terminal ships for this platform: run the
-   * harness in a herdr split. seedText is the plan-context briefing.
-   */
-  onLaunchHarness: (command: string, seedText?: string) => void;
-  /** Notifies the app of the in-tab terminal handle (or null when detached) so it can route keys. */
-  onAgentTerminal?: (handle: AgentTerminalHandle | null) => void;
-  theme?: Theme;
-}
-
-/**
- * The Agent tab body: branded launcher cards plus a plan-context toggle. Replaces
- * the old dead agent/status/revision placeholder (now a dim footer line). When a
- * prebuilt libghostty-vt ships for the platform, a picked harness runs embedded
- * inside this tab; otherwise it falls back to a herdr split.
- */
-export function AgentLauncher({
-  session,
-  onLaunchHarness,
-  onAgentTerminal,
-  theme,
-}: AgentLauncherProps): React.ReactNode {
-  const tokens = useComponentTheme(theme);
-  const [seedContext, setSeedContext] = useState(true);
-  const [running, setRunning] = useState<{ harness: HarnessLauncher; seed?: string } | null>(null);
-  const paneRef = useRef<TerminalPaneRenderable | null>(null);
-
-  const launch = (harness: HarnessLauncher): void => {
-    const seed = seedContext ? planHandoffBriefing(session.id) : undefined;
-
-    if (embeddedTerminalAvailable()) setRunning({ harness, seed });
-    else onLaunchHarness(harness.command, seed);
-  };
-  const detach = (): void => {
-    // The reconciler's removeChild detaches the pane without destroying it, so
-    // kill the child + free the VT here or they leak. shutdown() is idempotent.
-    paneRef.current?.shutdown();
-    setRunning(null);
-  };
-
-  useEffect(() => {
-    if (!running) return onAgentTerminal?.(null);
-    onAgentTerminal?.({ write: (data) => paneRef.current?.write(data), detach });
-
-    return () => onAgentTerminal?.(null);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [running]);
-
-  if (running) {
-    return (
-      <box style={{ flexDirection: "column", flexGrow: 1 }}>
-        <box style={{ flexDirection: "row" }} onMouseUp={detach}>
-          <text fg={HARNESS_HEADER_COLOR}>{running.harness.name}</text>
-          <box style={{ flexGrow: 1 }} />
-          <text fg={tokens.textDim}>✕ detach</text>
-        </box>
-        {React.createElement("terminalPane", {
-          ref: paneRef,
-          command: running.harness.command,
-          cwd: session.artifact.meta.cwd ?? process.cwd(),
-          seedText: running.seed,
-          onExit: detach,
-          style: { flexGrow: 1 },
-        })}
-      </box>
-    );
-  }
-
-  return (
-    <box style={{ flexDirection: "column", flexGrow: 1 }}>
-      {HARNESS_LAUNCHERS.map((harness) => (
-        <box
-          key={harness.id}
-          style={{
-            flexDirection: "row",
-            height: 3,
-            border: true,
-            borderStyle: FRAME_BORDER_STYLE,
-            backgroundColor: "transparent",
-            borderColor: tokens.text,
-            paddingLeft: 1,
-            paddingRight: 1,
-          }}
-          onMouseUp={() => launch(harness)}
-        >
-          <text fg={tokens.textMuted}>{harness.name}</text>
-        </box>
-      ))}
-      <box style={{ flexDirection: "row" }} onMouseUp={() => setSeedContext((on) => !on)}>
-        <text fg={tokens.textDim}>plan context: </text>
-        <text fg={tokens.accent}>{seedContext ? "seed the plan" : "none"}</text>
-      </box>
-    </box>
-  );
-}