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

package/src/components/AnnotationCards.tsx

@@ -7,11 +7,19 @@
  */
 
 import React, { useContext, useLayoutEffect, useRef, useState } from "react";
-import type { BoxRenderable, KeyBinding, TextareaRenderable } from "@opentui/core";
+import { usePaste } from "@opentui/react";
+import type {
+  BoxRenderable,
+  KeyBinding,
+  MouseEvent as TerminalMouseEvent,
+  TextareaRenderable,
+} from "@opentui/core";
 import type { Annotation } from "@cueloop/schema";
 import type { Theme } from "../theme";
+import { useTooltip } from "./Tooltip";
 import { lighten } from "../annotation-palette";
 import { useFrameMeasure } from "../use-frame-measure";
+import { imagePlaceholder, looksLikeBinaryPaste } from "../pasted-image";
 import { skillReferenceRanges, type SlashItem } from "../slash-palette";
 import { PaletteNamesContext } from "../skills";
 import { referenceStyleFor } from "./syntax-highlight";
@@ -29,7 +37,7 @@ const COMPOSE_KEY_BINDINGS: KeyBinding[] = [
   { name: "return", shift: true, action: "newline" },
 ];
 
-function composeRowCount(text: string, contentWidth: number): number {
+export function composeRowCount(text: string, contentWidth: number): number {
   const usableWidth = contentWidth > 0 ? contentWidth : Number.MAX_SAFE_INTEGER;
   let visualRowCount = 0;
 
@@ -48,6 +56,7 @@ export function Composer({
   onSave,
   onReady,
   onInput,
+  placeholder,
 }: {
   seed: string;
   glyph: string;
@@ -55,12 +64,23 @@ export function Composer({
   onSave: (body: string) => void;
   onReady: () => void;
   onInput: (text: string, caret: number) => void;
+  placeholder?: string;
 }): React.ReactNode {
   const editorRef = useRef<TextareaRenderable | null>(null);
+  const pastedImageCount = useRef(0);
   const [rows, setRows] = useState(1);
   // action and skill names whose "/name" references paint in the accent color
   const referenceNames = useContext(PaletteNamesContext);
 
+  usePaste((event) => {
+    const editor = editorRef.current;
+
+    if (!editor || !editor.focused || !looksLikeBinaryPaste(event.bytes)) return;
+    event.preventDefault();
+    pastedImageCount.current += 1;
+    editor.editBuffer.insertText(imagePlaceholder(pastedImageCount.current));
+  });
+
   const paintReferences = (editor: TextareaRenderable): void => {
     const { styleId } = referenceStyleFor(tokens);
 
@@ -92,6 +112,8 @@ export function Composer({
         ref={editorRef}
         focused
         initialValue={seed}
+        placeholder={placeholder}
+        placeholderColor={tokens.textDim}
         cursorStyle={{ style: "block", blinking: true }}
         keyBindings={COMPOSE_KEY_BINDINGS}
         onSubmit={() => onSave(editorRef.current?.plainText ?? "")}
@@ -241,7 +263,7 @@ export function DiscussionCard({
   });
 
   return (
-    <box style={{ flexDirection: "row", marginTop: 1, marginLeft: 2 }}>
+    <box style={{ flexDirection: "row", marginTop: 0, marginLeft: 2 }}>
       <text selectable={false} style={{ flexShrink: 0, width: 1 }}>
         {edgeRows.map((row, index) => (
           <span key={index} fg={row.color}>
@@ -281,22 +303,34 @@ export function DiscussionCard({
 export function CommentRow({
   annotation,
   tokens,
+  authorLabel,
 }: {
   annotation: Annotation;
   tokens: Theme;
+  /** The author's resolved display name, shown as a tooltip when the dot is hovered. */
+  authorLabel?: string;
 }): React.ReactNode {
   // own comments (no author) wear the filled dot, collaborators the outline
   const own = annotation.author === undefined;
   const glyph = own ? "●" : "○";
   const glyphColor = own ? tokens.text : tokens.textMuted;
+  const { showTooltip, hideTooltip } = useTooltip();
+  const dotHover = authorLabel
+    ? {
+        onMouseOver: (event: TerminalMouseEvent) => showTooltip(authorLabel, event.x, event.y),
+        onMouseOut: hideTooltip,
+      }
+    : {};
 
   return (
     <box style={{ flexDirection: "column" }}>
       {annotation.body.split("\n").map((line, lineIndex) => (
         <box key={lineIndex} style={{ flexDirection: "row" }}>
-          <text selectable={false} fg={glyphColor} style={{ flexShrink: 0 }}>
-            {lineIndex === 0 ? `${glyph} ` : "  "}
-          </text>
+          <box style={{ flexShrink: 0 }} {...(lineIndex === 0 ? dotHover : {})}>
+            <text selectable={false} fg={glyphColor}>
+              {lineIndex === 0 ? `${glyph} ` : "  "}
+            </text>
+          </box>
           <text fg={tokens.text} style={{ wrapMode: "word", flexGrow: 1, flexShrink: 1 }}>
             {line}
           </text>

package/src/components/AnsiScreen.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import type { Story, StoryMeta } from "./story";
+import { AnsiScreen } from "./AnsiScreen";
+
+export const meta: StoryMeta = { title: "Primitives/AnsiScreen" };
+
+const POSITIONED = "\x1b[2;4HHello from\x1b[4;6Hraw, positioned ANSI";
+
+export const Positioned: Story = {
+  render: () => <AnsiScreen ansi={POSITIONED} cols={40} rows={6} />,
+  size: { width: 44, height: 8 },
+};

package/src/components/AnsiScreen.tsx

@@ -0,0 +1,28 @@
+/** Paints a raw ANSI screen (cursor-positioned text) as a terminal would, for previewing SSH surfaces. */
+
+import React from "react";
+import type { Theme } from "../theme";
+import { ansiScreenToLines } from "../ansi-screen";
+import { useComponentTheme } from "./theme-context";
+
+export interface AnsiScreenProps {
+  ansi: string;
+  cols: number;
+  rows: number;
+  theme?: Theme;
+}
+
+export function AnsiScreen({ ansi, cols, rows, theme }: AnsiScreenProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const lines = ansiScreenToLines(ansi, cols, rows);
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {lines.map((line, index) => (
+        <text key={index} fg={tokens.text} selectable={false} style={{ wrapMode: "none" }}>
+          {line === "" ? " " : line}
+        </text>
+      ))}
+    </box>
+  );
+}

package/src/components/CompletionOverlay.stories.tsx

@@ -5,8 +5,19 @@ import { CompletionOverlay } from "./CompletionOverlay";
 
 export const meta: StoryMeta = { title: "Overlays/CompletionOverlay" };
 
+const noop = () => {};
+
 export const ApprovedPrompt: Story = {
-  render: () => <CompletionOverlay verdict="approve" completion={{ phase: "prompt" }} status="" />,
+  render: () => (
+    <CompletionOverlay
+      verdict="approve"
+      completion={{ phase: "prompt" }}
+      status=""
+      onClose={noop}
+      onBackToPlan={noop}
+      onAlways={noop}
+    />
+  ),
   expectedColors: [DARK.green],
 };
 
@@ -17,6 +28,9 @@ export const FeedbackCounting: Story = {
       completion={{ phase: "counting", remaining: 3 }}
       status="exported to vault/cueloop/plan.md"
       returnsTo="agent/worker-3"
+      onClose={noop}
+      onBackToPlan={noop}
+      onAlways={noop}
     />
   ),
   expectedColors: [DARK.accent],

package/src/components/CompletionOverlay.tsx

@@ -8,6 +8,8 @@ import React from "react";
 import type { VerdictKind } from "@cueloop/schema";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
+import { Toolbar } from "./primitives/Toolbar";
+import { Button } from "./primitives/Button";
 
 export interface CompletionOverlayProps {
   verdict: VerdictKind;
@@ -16,6 +18,9 @@ export interface CompletionOverlayProps {
   status: string;
   /** Where focus goes on close (the agent's pane), when known. */
   returnsTo?: string;
+  onClose: () => void;
+  onBackToPlan: () => void;
+  onAlways: () => void;
   theme?: Theme;
 }
 
@@ -24,6 +29,9 @@ export function CompletionOverlay({
   completion,
   status,
   returnsTo,
+  onClose,
+  onBackToPlan,
+  onAlways,
   theme,
 }: CompletionOverlayProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
@@ -49,12 +57,21 @@ export function CompletionOverlay({
       </text>
       {returnsTo ? <text fg={tokens.textDim}>returning to {returnsTo} on close</text> : null}
       {status ? <text fg={tokens.textDim}>{status}</text> : null}
+      {completion.phase === "counting" ? (
+        <text fg={tokens.textDim}>closing in {completion.remaining}s</text>
+      ) : null}
       <text> </text>
-      <text fg={tokens.textDim}>
-        close [return]
-        {completion.phase === "counting" ? ` · closing in ${completion.remaining}s` : ""}
-        {" · return to plan [esc] · always [a]"}
-      </text>
+      <Toolbar>
+        <Button variant="solid" marginRight={2} onPress={onClose} theme={theme}>
+          {" close "}
+        </Button>
+        <Button marginRight={2} onPress={onBackToPlan} theme={theme}>
+          {" back to plan "}
+        </Button>
+        <Button onPress={onAlways} theme={theme}>
+          {" always "}
+        </Button>
+      </Toolbar>
     </box>
   );
 }

package/src/components/ConfirmCard.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
 import type { Story, StoryMeta } from "./story";
 import { ConfirmCard } from "./ConfirmCard";
 
@@ -10,6 +11,7 @@ const callbacks = {
   onSelectVerdict: () => {},
   onSubmit: () => {},
   onCancel: () => {},
+  quickActions: DEFAULT_QUICK_ACTIONS,
 };
 
 export const ApproveDefault: Story = {

package/src/components/ConfirmCard.tsx

@@ -5,13 +5,21 @@
  * derives from the content rows through Card, so layout and render never drift.
  */
 
-import React from "react";
+import React, { useContext } from "react";
+import { useTerminalDimensions } from "@opentui/react";
 import type { VerdictKind } from "@cueloop/schema";
 import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { SlashSkillsContext } from "../skills";
+import { activeSlashToken, mergeSlashItems, slashFilter, slashItemsFrom } from "../slash-palette";
 import { useComponentTheme } from "./theme-context";
 import { Card } from "./primitives/Card";
-import { Button } from "./primitives/Button";
-import { Toolbar } from "./primitives/Toolbar";
+import { composeRowCount } from "./AnnotationCards";
+import { SlashComposer } from "./SlashComposer";
+import { DialogActions } from "./primitives/DialogActions";
+
+const SUBMIT_CARD_MAX_WIDTH = 48;
+const PALETTE_WINDOW = 5;
 
 export const VERDICTS: VerdictKind[] = ["comment", "approve", "request_changes"];
 
@@ -34,6 +42,7 @@ export interface ConfirmCardProps {
   onSelectVerdict: (verdict: VerdictKind) => void;
   onSubmit: () => void;
   onCancel: () => void;
+  quickActions: QuickAction[];
   theme?: Theme;
 }
 
@@ -66,7 +75,7 @@ function VerdictSelector({
   const tokens = useComponentTheme(theme);
 
   return (
-    <box style={{ flexDirection: "row", height: 1 }}>
+    <box style={{ flexDirection: "row", height: 1, width: "100%", justifyContent: "center" }}>
       {VERDICTS.map((candidate) => (
         <box
           key={candidate}
@@ -92,14 +101,33 @@ export function ConfirmCard({
   onSelectVerdict,
   onSubmit,
   onCancel,
+  quickActions,
   theme,
 }: ConfirmCardProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+  const skills = useContext(SlashSkillsContext);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const cardWidth = Math.max(24, Math.min(terminalWidth - 6, SUBMIT_CARD_MAX_WIDTH));
+
+  const composerRows = composeRowCount(summary, cardWidth - 4);
+  const token = activeSlashToken(summary, summary.length);
+  const paletteItems =
+    token !== null
+      ? slashFilter(mergeSlashItems(slashItemsFrom(quickActions), skills), token.slice(1))
+      : [];
+  const paletteRows =
+    paletteItems.length > 0
+      ? Math.min(PALETTE_WINDOW, paletteItems.length) +
+        (paletteItems.length > PALETTE_WINDOW ? 1 : 0)
+      : 0;
+  const contentRows =
+    CONFIRM_CONTENT_ROWS - 1 + composerRows + paletteRows + (viewedSummary !== undefined ? 2 : 0);
 
   return (
     <Card
-      contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 2 : 0)}
-      borderColor={tokens.text}
+      contentRows={contentRows}
+      width={cardWidth}
+      borderColor={tokens.accent}
       backgroundColor={tokens.elevated}
       theme={theme}
     >
@@ -107,21 +135,20 @@ export function ConfirmCard({
       {viewedSummary !== undefined ? <box style={{ height: 1 }} /> : null}
       <VerdictSelector verdict={verdict} onSelectVerdict={onSelectVerdict} theme={theme} />
       <box style={{ height: 1 }} />
-      <input
-        focused
-        value={summary}
-        onInput={onInput}
+      <SlashComposer
+        seed={summary}
+        glyph=""
+        quickActions={quickActions}
+        tokens={tokens}
         placeholder="summary for the agent (optional)"
+        onSubmit={(text) => {
+          onInput(text);
+          onSubmit();
+        }}
+        onInput={onInput}
       />
       <box style={{ height: 1 }} />
-      <Toolbar>
-        <Button variant="solid" marginRight={2} onPress={onSubmit} theme={theme}>
-          {" send message "}
-        </Button>
-        <Button onPress={onCancel} theme={theme}>
-          {" Cancel "}
-        </Button>
-      </Toolbar>
+      <DialogActions confirmLabel="send" onConfirm={onSubmit} onCancel={onCancel} theme={theme} />
     </Card>
   );
 }

package/src/components/ConfirmDialog.tsx

@@ -10,8 +10,7 @@ import { useTerminalDimensions } from "@opentui/react";
 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";
+import { DialogActions } from "./primitives/DialogActions";
 
 export interface ConfirmDialogProps {
   isOpen: boolean;
@@ -28,8 +27,8 @@ export function ConfirmDialog({
   isOpen,
   title,
   message,
-  confirmLabel = "Delete",
-  cancelLabel = "Cancel",
+  confirmLabel = "delete",
+  cancelLabel = "cancel",
   onConfirm,
   onCancel,
   theme,
@@ -45,6 +44,7 @@ export function ConfirmDialog({
       title={title}
       width={Math.min(54, terminalWidth - 6)}
       height={7}
+      background={tokens.elevated}
       onDismiss={onCancel}
       theme={theme}
     >
@@ -59,14 +59,13 @@ export function ConfirmDialog({
       >
         <text fg={tokens.text}>{message}</text>
         <box style={{ flexGrow: 1 }} />
-        <Toolbar>
-          <Button variant="solid" onPress={onConfirm} theme={theme}>
-            {` ${confirmLabel} `}
-          </Button>
-          <Button onPress={onCancel} theme={theme}>
-            {` ${cancelLabel} esc `}
-          </Button>
-        </Toolbar>
+        <DialogActions
+          confirmLabel={confirmLabel}
+          cancelLabel={cancelLabel}
+          onConfirm={onConfirm}
+          onCancel={onCancel}
+          theme={theme}
+        />
       </box>
     </Dialog>
   );

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";
@@ -18,7 +18,7 @@ import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { IconButton } from "./primitives/IconButton";
 import { NERD } from "./primitives/icons";
-import { intralineRunsByRow, type IntralineRun } from "../diff-intraline";
+import { createIntralineResolver, type IntralineRun } from "../diff-intraline";
 import { highlightDiffRows, type SyntaxSpan } from "../diff-syntax";
 import { splitDiffRows, type SplitLine, type SplitRow } from "../split-diff";
 import { UNDERLINE, type AnnotationPalette } from "../annotation-palette";
@@ -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,
@@ -531,7 +535,7 @@ export function DiffContentView({
   const { palette } = surface;
   const numberWidth = useMemo(() => lineNumberWidth(rows), [rows]);
   const unifiedGutterColumns = numberWidth * 2 + UNIFIED_GUTTER_CHROME;
-  const intralineByRow = useMemo(() => intralineRunsByRow(rows), [rows]);
+  const intralineResolver = useMemo(() => createIntralineResolver(rows), [rows]);
   const syntaxByRow = useSyntaxHighlights(rows);
   const splitRows = useMemo(() => (split ? splitDiffRows(rows) : []), [split, rows]);
   const localStats = useMemo(() => fileChangeCounts(rows), [rows]);
@@ -591,13 +595,13 @@ export function DiffContentView({
     const fgByColumn = foregroundColumns(
       text,
       rowBaseColor(row, tokens),
-      intralineByRow.get(rowIndex),
+      intralineResolver.runsForRow(rowIndex),
       syntaxByRow.get(rowIndex),
       tokens,
     );
     const emphasisBgByColumn = emphasisBackgroundColumns(
       text,
-      intralineByRow.get(rowIndex),
+      intralineResolver.runsForRow(rowIndex),
       rowEmphasisBackground(row, tokens),
     );
     const rowBg = rowBackground(row, tokens);

package/src/components/FileContentsView.tsx

@@ -1,5 +1,5 @@
 // A Changes/Project file tab in contents mode: a workspace file rendered read-only with line
-// numbers, for surfaces with no review session to anchor notes to (the bare-launch welcome shell).
+// numbers, for surfaces with no thread to anchor notes to (the bare-launch welcome shell).
 // Loads on mount and whenever the path changes; a null read renders a centered "File deleted".
 // Syntax highlighting comes from the native code renderable (tree-sitter), the language
 // auto-detected from the path; unknown languages simply render unstyled.

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