@cueloop/client 0.1.0-alpha.33 → 0.1.0-alpha.34

package/src/App.walk.test.tsx

@@ -10,7 +10,13 @@ import { DaemonServer } from "@cueloop/daemon";
 import type { ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
 import { DARK } from "./theme";
-import { isolateUserConfig, press, waitForState, waitForText, waitForTextGone } from "./test-support";
+import {
+  isolateUserConfig,
+  press,
+  waitForState,
+  waitForText,
+  waitForTextGone,
+} from "./test-support";
 
 const PATCH = `diff --git a/src/a.ts b/src/a.ts
 index 111..222 100644
@@ -59,7 +65,10 @@ afterEach(() => {
 });
 
 async function renderApp() {
-  const setup = await testRender(<App home={home} sessionId={session.id} />, { width: 120, height: 34 });
+  const setup = await testRender(<App home={home} sessionId={session.id} />, {
+    width: 120,
+    height: 34,
+  });
   // Wait for session content, not just the chrome: pressing w before the diff
   // loads drops the walk intent (no session, no diff view) and hangs the test.
   await waitForText(setup, "src/a.ts");
@@ -75,7 +84,9 @@ function foregroundsOf(setup: Setup, needle: string): string[] {
     for (const span of line.spans) {
       if (!span.text.includes(needle)) continue;
       const [red, green, blue] = span.fg.toInts();
-      foregrounds.push("#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join(""));
+      foregrounds.push(
+        "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join(""),
+      );
     }
   }
   return foregrounds;
@@ -100,7 +111,9 @@ describe("the guided walk", () => {
     // Assert
     await waitForText(setup, "file 2 of 3 · 1 viewed");
     // the viewed mark rides the session record, not the client
-    await waitForState(setup, () => (server.core.sessionGet(session.id).viewedPaths ?? []).includes("src/a.ts"));
+    await waitForState(setup, () =>
+      (server.core.sessionGet(session.id).viewedPaths ?? []).includes("src/a.ts"),
+    );
 
     // Act
     // [ steps back; the revisited card shows its viewed marker
@@ -128,7 +141,11 @@ describe("the guided walk", () => {
     // Assert
     await waitForText(setup, "walk complete");
     expect(setup.captureCharFrame()).toContain("every file viewed (3/3)");
-    expect(server.core.sessionGet(session.id).viewedPaths).toEqual(["src/a.ts", "src/b.ts", "src/c.ts"]);
+    expect(server.core.sessionGet(session.id).viewedPaths).toEqual([
+      "src/a.ts",
+      "src/b.ts",
+      "src/c.ts",
+    ]);
 
     // Act
     // the end card's return leaves the walk and opens the rail confirm
@@ -176,7 +193,10 @@ describe("the guided walk", () => {
     await press(first, "]");
     await press(first, "]");
     await waitForText(first, "file 3 of 3 · 2 viewed");
-    await waitForState(first, () => (server.core.sessionGet(session.id).viewedPaths ?? []).length === 2);
+    await waitForState(
+      first,
+      () => (server.core.sessionGet(session.id).viewedPaths ?? []).length === 2,
+    );
     first.renderer.destroy();
 
     // Act
@@ -237,17 +257,17 @@ describe("the guided walk", () => {
     const setup = await renderApp();
 
     // Assert
-    // before the walk the sheet's added line wears the insertion color
+    // before the walk the changed word on the added line wears the insertion color
     await waitForText(setup, "+new line");
-    expect(foregroundsOf(setup, "+new line")).toContain(DARK.insertedForeground);
+    expect(foregroundsOf(setup, "new")).toContain(DARK.insertedForeground);
 
     // Act
     await press(setup, "w");
 
     // Assert
     await waitForText(setup, "file 1 of 3 · 0 viewed");
-    // dimmed: the sheet line drops to the dim token...
-    expect(foregroundsOf(setup, "+new line")).toEqual([DARK.textDim]);
+    // dimmed: the sheet's changed word drops to the dim token...
+    expect(foregroundsOf(setup, "new")).toEqual([DARK.textDim]);
     // ...while the wizard preview keeps the insertion color
     expect(foregroundsOf(setup, "+export const b = 3;")).toContain(DARK.insertedForeground);
   });

package/src/attribution.ts

@@ -13,7 +13,9 @@ export const ANONYMOUS_LABEL = "-- anonymous --";
 
 /** A short, stable handle from a raw author id when no name is known. */
 export function shortHandle(authorId: string): string {
-  const base = authorId.startsWith(FINGERPRINT_PREFIX) ? authorId.slice(FINGERPRINT_PREFIX.length) : authorId;
+  const base = authorId.startsWith(FINGERPRINT_PREFIX)
+    ? authorId.slice(FINGERPRINT_PREFIX.length)
+    : authorId;
   return base.slice(0, 8) || authorId;
 }
 
@@ -22,7 +24,11 @@ export function shortHandle(authorId: string): string {
  * own name, then anonymous for a known-but-unnamed participant, then a short
  * handle for an id we hold no identity for.
  */
-export function resolveDisplayName(authorId: string, participants: Identity[] | undefined, overrides: Record<string, string>): string {
+export function resolveDisplayName(
+  authorId: string,
+  participants: Identity[] | undefined,
+  overrides: Record<string, string>,
+): string {
   const override = overrides[authorId];
   if (override) return override;
   const identity = participants?.find((participant) => participant.id === authorId);

package/src/clipboard.ts

@@ -16,7 +16,11 @@ export function clipboardCommands(platform: NodeJS.Platform = process.platform):
 export async function copyToClipboard(text: string): Promise<boolean> {
   for (const command of clipboardCommands()) {
     try {
-      const proc = Bun.spawn(command, { stdin: Buffer.from(text), stdout: "ignore", stderr: "ignore" });
+      const proc = Bun.spawn(command, {
+        stdin: Buffer.from(text),
+        stdout: "ignore",
+        stderr: "ignore",
+      });
       if ((await proc.exited) === 0) return true;
     } catch {
       // tool not installed - try the next one

package/src/components/AnnotationCard.stories.tsx

@@ -9,34 +9,51 @@ const draftCallbacks = { onInput: () => {}, onSave: () => {}, onCancel: () => {}
 
 export const CommentDraft: Story = {
   render: () => (
-    <AnnotationCard kind="comment" quote="persists sessions" draft={{ text: "Which daemon?", ...draftCallbacks }} />
+    <AnnotationCard
+      kind="comment"
+      quote="persists sessions"
+      draft={{ text: "Which daemon?", ...draftCallbacks }}
+    />
   ),
   expectedColors: [DARK.accent],
 };
 
-export const SuggestionDraft: Story = {
+export const SavedSelected: Story = {
   render: () => (
-    <AnnotationCard kind="suggestion" quote="move the store" draft={{ text: "", ...draftCallbacks }} />
+    <AnnotationCard
+      kind="comment"
+      quote="persists sessions"
+      saved={{
+        body: "Which daemon owns this?",
+        isSelected: true,
+        isOrphan: false,
+        isBlocking: false,
+        author: "me",
+        editing: null,
+        onPress: () => {},
+      }}
+    />
   ),
-  expectedColors: [DARK.green],
+  expectedColors: [DARK.accent],
 };
 
-export const SavedSelected: Story = {
+export const SavedCollaborator: Story = {
   render: () => (
     <AnnotationCard
       kind="comment"
       quote="persists sessions"
       saved={{
         body: "Which daemon owns this?",
-        isSelected: true,
+        isSelected: false,
         isOrphan: false,
         isBlocking: false,
+        author: "Priya",
         editing: null,
         onPress: () => {},
       }}
     />
   ),
-  expectedColors: [DARK.elevated],
+  expectedColors: [DARK.border],
 };
 
 export const SavedOrphanBlocking: Story = {
@@ -49,24 +66,26 @@ export const SavedOrphanBlocking: Story = {
         isSelected: false,
         isOrphan: true,
         isBlocking: true,
+        author: "me",
         editing: null,
         onPress: () => {},
       }}
     />
   ),
-  expectedColors: [DARK.red],
+  expectedColors: [DARK.border],
 };
 
 export const SavedEditing: Story = {
   render: () => (
     <AnnotationCard
-      kind="suggestion"
+      kind="comment"
       quote="move the store"
       saved={{
         body: "old body",
         isSelected: true,
         isOrphan: false,
         isBlocking: false,
+        author: "me",
         editing: { text: "new body", ...draftCallbacks },
         onPress: () => {},
       }}

package/src/components/AnnotationCard.tsx

@@ -32,10 +32,8 @@ export interface AnnotationSaved {
   isSelected: boolean;
   isOrphan: boolean;
   isBlocking: boolean;
-  /** A collaborator's resolved display name; own notes carry none. Set = name-in-border, blue. */
-  authorLabel?: string;
-  /** The viewer's own note when collaborators are also present (e.g. "me"). Set = tag-in-border, accent. */
-  selfLabel?: string;
+  /** Border-title author: a collaborator's display name, or "me" for the reviewer's own note. */
+  author: string;
   /** Non-null while the card body is being rewritten in place. */
   editing: AnnotationDraft | null;
   onPress: () => void;
@@ -76,7 +74,11 @@ export const COMPOSE_MAX_ROWS = 4;
  * newlines only. Beyond the cap the textarea scrolls internally and keeps the
  * caret line in view.
  */
-export function composeRowCount(text: string, contentWidth: number, cap: number = COMPOSE_MAX_ROWS): number {
+export function composeRowCount(
+  text: string,
+  contentWidth: number,
+  cap: number = COMPOSE_MAX_ROWS,
+): number {
   const usableWidth = contentWidth > 0 ? contentWidth : Number.MAX_SAFE_INTEGER;
   let visualRowCount = 0;
   for (const line of text.split("\n")) {
@@ -107,7 +109,7 @@ function DraftEditor({
     editor.cursorOffset = initialTextLength.current;
     // the box is laid out now, so its width is known: size to the wrapped body
     onRowsChange(composeRowCount(editor.plainText, editor.width));
-  }, []);
+  }, [onRowsChange]);
   return (
     <>
       <textarea
@@ -135,16 +137,23 @@ function DraftEditor({
           {" Save "}
         </Button>
         <Button onPress={draft.onCancel} theme={theme}>
-          {" Cancel esc "}
+          {" Cancel "}
         </Button>
       </Toolbar>
     </>
   );
 }
 
-export function AnnotationCard({ id, kind, quote, draft, saved, theme }: AnnotationCardProps): React.ReactNode {
+export function AnnotationCard({
+  id,
+  kind,
+  quote,
+  draft,
+  saved,
+  theme,
+}: AnnotationCardProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
-  const kindColor = kind === "suggestion" ? tokens.green : tokens.accent;
+  const kindColor = tokens.accent;
   const activeDraft = draft ?? saved?.editing ?? null;
   // The composer's visible height, grown from the wrapped text. It is shared
   // with the card frame (contentRows) so the border never clips the textarea
@@ -156,57 +165,63 @@ export function AnnotationCard({ id, kind, quote, draft, saved, theme }: Annotat
     composeRowCount(activeDraft?.text ?? "", 0),
   );
   if (draft) {
-    const verb = kind === "suggestion" ? "suggest replacement for" : "comment on";
+    const verb = "comment on";
     return (
       <Card
         title={` ${verb} "${truncateToSingleLine(quote, 40)}" `}
         contentRows={editorRowCount + 1}
         borderColor={kindColor}
         backgroundColor="transparent"
-        marginLeft={2}
-        marginRight={2}
         theme={theme}
       >
-        <DraftEditor draft={draft} rows={editorRowCount} onRowsChange={setEditorRowCount} theme={theme} />
+        <DraftEditor
+          draft={draft}
+          rows={editorRowCount}
+          onRowsChange={setEditorRowCount}
+          theme={theme}
+        />
       </Card>
     );
   }
   const card = saved!;
-  const collaboratorName = card.authorLabel !== undefined && card.authorLabel !== "" ? card.authorLabel : undefined;
-  const ownTag = card.selfLabel !== undefined && card.selfLabel !== "" ? card.selfLabel : undefined;
-  const borderLabel = collaboratorName ?? ownTag;
-  const borderColor = ownTag ? tokens.accent : tokens.blue;
-  const indent = borderLabel ? "" : "  ";
-  const marker = card.isSelected ? "▸ " : indent;
-  // Fixed content rows (a bordered box must declare a height or it collapses): header + quote + body, or the editor.
-  const contentRows = card.editing ? editorRowCount + 3 : 3;
-  // The border + its side padding eat this much content width, so text truncates shorter.
-  const borderInset = borderLabel ? 4 : 0;
+  // border = "what + who" (+ any exceptional flag); body = the content only
+  const flags = [card.isBlocking ? "BLOCKING" : null, card.isOrphan ? "ORPHANED" : null].filter(
+    (flag): flag is string => flag !== null,
+  );
+  const title = ` ${[kind.toUpperCase(), card.author, ...flags].join(" · ")} `;
+  // every saved card is bordered, so the border + side padding always eat this width
+  const borderInset = 4;
+  // a bordered box must declare a height or it collapses: quote + body, or the editor
+  const contentRows = card.editing ? editorRowCount + 2 : 2;
   return (
     <box
       id={id}
-      title={borderLabel ? ` ${borderLabel} ` : undefined}
+      title={title}
       style={{
         flexDirection: "column",
-        marginBottom: 0,
-        backgroundColor: card.isSelected && !card.editing ? tokens.elevated : undefined,
-        ...(borderLabel
-          ? { height: cardHeight(contentRows), border: true, borderStyle: FRAME_BORDER_STYLE, borderColor, paddingLeft: 1, paddingRight: 1 }
-          : {}),
+        height: cardHeight(contentRows),
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        // cards stay transparent in every theme; selection is the bright
+        // kind-colored border, while unselected cards recede to a dim border
+        borderColor: card.isSelected || card.editing ? kindColor : tokens.border,
+        paddingLeft: 1,
+        paddingRight: 1,
       }}
       onMouseUp={card.onPress}
     >
-      <text fg={card.isSelected ? tokens.text : kindColor}>
-        {marker}
-        {kind.toUpperCase()}
-        {card.isBlocking ? <span fg={tokens.red}> · BLOCKING</span> : null}
-        <span fg={tokens.textDim}>{card.isOrphan ? " · ORPHANED" : " · pending"}</span>
-      </text>
-      <text fg={tokens.textDim}>{indent}"{truncateToSingleLine(quote, 26 - borderInset)}"</text>
+      <text fg={tokens.textDim}>"{truncateToSingleLine(quote, 26 - borderInset)}"</text>
       {card.editing ? (
-        <DraftEditor draft={card.editing} rows={editorRowCount} onRowsChange={setEditorRowCount} theme={theme} />
+        <DraftEditor
+          draft={card.editing}
+          rows={editorRowCount}
+          onRowsChange={setEditorRowCount}
+          theme={theme}
+        />
       ) : (
-        <text fg={card.isOrphan ? tokens.textDim : tokens.textMuted}>{indent}{truncateToSingleLine(card.body, 28 - borderInset)}</text>
+        <text fg={card.isOrphan ? tokens.textDim : tokens.textMuted}>
+          {truncateToSingleLine(card.body, 28 - borderInset)}
+        </text>
       )}
     </box>
   );

package/src/components/Breadcrumb.tsx

@@ -23,7 +23,13 @@ export interface BreadcrumbProps {
 export function Breadcrumb({ items, theme }: BreadcrumbProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const toneColor = (tone?: BreadcrumbTone): string =>
-    tone === "accent" ? tokens.accent : tone === "green" ? tokens.green : tone === "text" ? tokens.text : tokens.textDim;
+    tone === "accent"
+      ? tokens.accent
+      : tone === "green"
+        ? tokens.green
+        : tone === "text"
+          ? tokens.text
+          : tokens.textDim;
   return (
     <box style={{ height: 1, backgroundColor: tokens.panel, paddingLeft: 1, flexDirection: "row" }}>
       <text fg={tokens.text}>

package/src/components/CodeBlock.stories.tsx

@@ -16,10 +16,27 @@ export const Typescript: Story = {
 };
 
 export const CursorAnnotatedEdited: Story = {
-  render: () => <CodeBlock language="ts" content={SNIPPET} isCursor isAnnotated changeTag="edited" marginTop={1} />,
+  render: () => (
+    <CodeBlock
+      language="ts"
+      content={SNIPPET}
+      isCursor
+      isAnnotated
+      changeTag="edited"
+      marginTop={1}
+    />
+  ),
   expectedColors: [DARK.accent],
 };
 
 export const UnknownLanguage: Story = {
-  render: () => <CodeBlock language="brainfog" content={"plain verbatim lines\n  with indentation"} />,
+  render: () => (
+    <CodeBlock language="brainfog" content={"plain verbatim lines\n  with indentation"} />
+  ),
+};
+
+/** A cut code block: struck-through gray content, no [cut] tag. */
+export const Cut: Story = {
+  render: () => <CodeBlock language="ts" content={SNIPPET} cut />,
+  expectedColors: [DARK.elevated],
 };

package/src/components/CodeBlock.tsx

@@ -6,10 +6,14 @@
  */
 
 import React from "react";
+import { createTextAttributes } from "@opentui/core";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { filetypeFor, syntaxStyleFor } from "./syntax-highlight";
 
+/** A cut code block reads as removed: struck through and grayed, never red. */
+const CUT_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: true });
+
 export interface CodeBlockProps {
   id?: string;
   /** Markdown fence info string ("tsx", "python", ...). */
@@ -20,7 +24,9 @@ export interface CodeBlockProps {
   marginTop?: number;
   isAnnotated?: boolean;
   /** Working-copy change tag rendered after the language label. */
-  changeTag?: "cut" | "new" | "edited";
+  changeTag?: "new" | "edited";
+  /** A cut (removed) block: struck-through gray content, no tag. */
+  cut?: boolean;
   theme?: Theme;
 }
 
@@ -32,10 +38,11 @@ export function CodeBlock({
   marginTop = 0,
   isAnnotated = false,
   changeTag,
+  cut = false,
   theme,
 }: CodeBlockProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
-  const tagColor = changeTag === "cut" ? tokens.red : changeTag === "new" ? tokens.green : tokens.accent;
+  const tagColor = changeTag === "new" ? tokens.green : tokens.accent;
   return (
     <box id={id} style={{ flexDirection: "column", marginTop }}>
       <text>
@@ -55,13 +62,21 @@ export function CodeBlock({
           marginLeft: 2,
         }}
       >
-        <code
-          content={content}
-          filetype={filetypeFor(language)}
-          syntaxStyle={syntaxStyleFor(tokens)}
-          selectable={false}
-          style={{ wrapMode: "none", fg: tokens.textMuted, bg: tokens.elevated }}
-        />
+        {cut ? (
+          <text style={{ wrapMode: "none" }} selectable={false}>
+            <span fg={tokens.textDim} attributes={CUT_ATTRIBUTES}>
+              {content}
+            </span>
+          </text>
+        ) : (
+          <code
+            content={content}
+            filetype={filetypeFor(language)}
+            syntaxStyle={syntaxStyleFor(tokens)}
+            selectable={false}
+            style={{ wrapMode: "none", fg: tokens.textMuted, bg: tokens.elevated }}
+          />
+        )}
       </box>
     </box>
   );

package/src/components/CompletionOverlay.tsx

@@ -19,7 +19,13 @@ export interface CompletionOverlayProps {
   theme?: Theme;
 }
 
-export function CompletionOverlay({ verdict, completion, status, returnsTo, theme }: CompletionOverlayProps): React.ReactNode {
+export function CompletionOverlay({
+  verdict,
+  completion,
+  status,
+  returnsTo,
+  theme,
+}: CompletionOverlayProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const approved = verdict === "approve";
   return (
@@ -33,9 +39,13 @@ export function CompletionOverlay({ verdict, completion, status, returnsTo, them
         alignItems: "center",
       }}
     >
-      <text fg={approved ? tokens.green : tokens.accent}>{approved ? "review approved" : "feedback sent"}</text>
+      <text fg={approved ? tokens.green : tokens.accent}>
+        {approved ? "review approved" : "feedback sent"}
+      </text>
       <text> </text>
-      <text fg={tokens.text}>The agent has your {approved ? "approval" : "feedback"} and is unblocked.</text>
+      <text fg={tokens.text}>
+        The agent has your {approved ? "approval" : "feedback"} and is unblocked.
+      </text>
       {returnsTo ? <text fg={tokens.textDim}>returning to {returnsTo} on close</text> : null}
       {status ? <text fg={tokens.textDim}>{status}</text> : null}
       <text> </text>

package/src/components/ConfirmCard.stories.tsx

@@ -5,17 +5,36 @@ import { ConfirmCard } from "./ConfirmCard";
 
 export const meta: StoryMeta = { title: "ConfirmCard" };
 
-const callbacks = { onInput: () => {}, onSelectVerdict: () => {}, onSubmit: () => {}, onCancel: () => {} };
+const callbacks = {
+  onInput: () => {},
+  onSelectVerdict: () => {},
+  onSubmit: () => {},
+  onCancel: () => {},
+};
 
 export const ApproveDefault: Story = {
-  render: () => <ConfirmCard verdict="approve" summary="" annotationCount={0} blockingCount={0} {...callbacks} />,
+  render: () => (
+    <ConfirmCard
+      verdict="approve"
+      summary=""
+      annotationCount={0}
+      blockingCount={0}
+      {...callbacks}
+    />
+  ),
   expectedColors: [DARK.green, DARK.accent],
   size: { width: 40, height: 14 },
 };
 
 export const RequestChanges: Story = {
   render: () => (
-    <ConfirmCard verdict="request_changes" summary="Tighten the steps." annotationCount={3} blockingCount={1} {...callbacks} />
+    <ConfirmCard
+      verdict="request_changes"
+      summary="Tighten the steps."
+      annotationCount={3}
+      blockingCount={1}
+      {...callbacks}
+    />
   ),
   expectedColors: [DARK.red],
   size: { width: 40, height: 14 },

package/src/components/ConfirmCard.tsx

@@ -44,7 +44,11 @@ export interface ConfirmCardProps {
 const CONFIRM_CONTENT_ROWS = 7;
 
 export function verdictColor(verdict: VerdictKind, tokens: Theme): string {
-  return verdict === "approve" ? tokens.green : verdict === "request_changes" ? tokens.red : tokens.blue;
+  return verdict === "approve"
+    ? tokens.green
+    : verdict === "request_changes"
+      ? tokens.red
+      : tokens.blue;
 }
 
 /**
@@ -66,9 +70,15 @@ function VerdictSelector({
   return (
     <box style={{ flexDirection: "row", height: 1 }}>
       {VERDICTS.map((candidate) => (
-        <box key={candidate} style={{ paddingRight: 1 }} onMouseUp={() => onSelectVerdict(candidate)}>
+        <box
+          key={candidate}
+          style={{ paddingRight: 1 }}
+          onMouseUp={() => onSelectVerdict(candidate)}
+        >
           <text fg={candidate === verdict ? verdictColor(candidate, tokens) : tokens.textDim}>
-            {candidate === verdict ? `[${VERDICT_LABEL[candidate]}]` : ` ${VERDICT_LABEL[candidate]} `}
+            {candidate === verdict
+              ? `[${VERDICT_LABEL[candidate]}]`
+              : ` ${VERDICT_LABEL[candidate]} `}
           </text>
         </box>
       ))}
@@ -98,12 +108,19 @@ export function ConfirmCard({
       marginRight={1}
       theme={theme}
     >
-      <text fg={tokens.textDim}>{`${annotationCount} annotations · ${blockingCount} blocking`}</text>
+      <text
+        fg={tokens.textDim}
+      >{`${annotationCount} annotations · ${blockingCount} blocking`}</text>
       {viewedSummary !== undefined ? <text fg={tokens.textDim}>{viewedSummary}</text> : null}
       <box style={{ height: 1 }} />
       <VerdictSelector verdict={verdict} onSelectVerdict={onSelectVerdict} theme={theme} />
       <box style={{ height: 1 }} />
-      <input focused value={summary} onInput={onInput} placeholder="summary for the agent (optional)" />
+      <input
+        focused
+        value={summary}
+        onInput={onInput}
+        placeholder="summary for the agent (optional)"
+      />
       <box style={{ height: 1 }} />
       <Toolbar>
         <Button variant="solid" marginRight={2} onPress={onSubmit} theme={theme}>

package/src/components/ConfirmDialog.tsx

@@ -39,7 +39,15 @@ export function ConfirmDialog({
   if (!isOpen) return null;
   return (
     <Dialog isOpen title={title} width={Math.min(54, terminalWidth - 6)} height={7} theme={theme}>
-      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1, paddingTop: 1 }}>
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
         <text fg={tokens.text}>{message}</text>
         <box style={{ flexGrow: 1 }} />
         <Toolbar>