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

package/src/App.walk.test.tsx

@@ -12,6 +12,7 @@ import { DARK } from "./theme";
 import {
   isolateUserConfig,
   press,
+  navCommand,
   pressKey,
   renderReadyApp,
   waitForState,
@@ -104,7 +105,7 @@ describe("the guided walk", () => {
     const setup = await renderApp();
 
     // Act
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
 
     // Assert
     await waitForText(setup, "file 1 of 3 · 0 viewed");
@@ -162,7 +163,7 @@ describe("the guided walk", () => {
     expect(setup.captureCharFrame()).toContain("3/3 files viewed");
 
     // Act
-    await press(setup, "enter");
+    await pressKey(setup, "RETURN", { meta: true });
 
     // Assert
     await waitForState(setup, () => server.core.sessionGet(session.id).status === "resolved");
@@ -172,7 +173,7 @@ describe("the guided walk", () => {
     // Arrange
     const setup = await renderApp();
 
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
     await waitForText(setup, "file 1 of 3 · 0 viewed");
     await press(setup, "]");
     await waitForText(setup, "file 2 of 3 · 1 viewed");
@@ -186,7 +187,7 @@ describe("the guided walk", () => {
     expect(setup.captureCharFrame()).not.toContain("· 1 viewed");
 
     // Act
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
 
     // Assert
     await waitForText(setup, "file 2 of 3 · 1 viewed");
@@ -196,7 +197,7 @@ describe("the guided walk", () => {
     // Arrange
     const first = await renderApp();
 
-    await pressKey(first, "k", { meta: true });
+    await navCommand(first, "k");
     await waitForText(first, "file 1 of 3 · 0 viewed");
     await press(first, "]");
     await press(first, "]");
@@ -211,7 +212,7 @@ describe("the guided walk", () => {
     // a fresh client reads the viewed set back from the session record
     const second = await renderApp();
 
-    await pressKey(second, "k", { meta: true });
+    await navCommand(second, "k");
 
     // Assert
     await waitForText(second, "file 3 of 3 · 2 viewed");
@@ -232,7 +233,7 @@ describe("the guided walk", () => {
     const setup = await renderApp();
 
     // Act
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
 
     // Assert
     await waitForText(setup, "file 1 of 3");
@@ -253,7 +254,7 @@ describe("the guided walk", () => {
     await pressKey(setup, "RETURN", { meta: true });
     // nothing pending despite the note, so the confirm card defaults to approve
     await waitForText(setup, "[Approve]");
-    await press(setup, "enter");
+    await pressKey(setup, "RETURN", { meta: true });
 
     // Assert
     await waitForState(setup, () => server.core.sessionGet(session.id).status === "resolved");
@@ -273,7 +274,7 @@ describe("the guided walk", () => {
     expect(foregroundsOf(setup, "new")).toContain(DARK.insertedForeground);
 
     // Act
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
 
     // Assert
     await waitForText(setup, "file 1 of 3 · 0 viewed");
@@ -289,7 +290,7 @@ describe("the guided walk", () => {
     const setup = await renderApp();
 
     // Act - renderApp already waited for the diff to load; the session is resolved
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
 
     // Assert
     await waitForText(setup, "review submitted - read-only");

package/src/App.workbench.test.tsx

@@ -21,10 +21,12 @@ import {
   dragText,
   isolateUserConfig,
   locateText,
+  press,
   pressKey,
   typeText,
   waitForState,
   waitForText,
+  waitForTextGone,
   renderReadyApp,
 } from "./test-support";
 import { NERD } from "./components/primitives/icons";
@@ -98,6 +100,7 @@ type Setup = Awaited<ReturnType<typeof renderApp>>;
 
 /** The header controls sit on the top content row of the compact header. */
 const HEADER_ROW = 0;
+const BARE_NAV_HINT = "c comment · z fold · type to leave";
 
 /** Column of a Project-header toggle, located by its own glyph so spacing changes never break the click. */
 function toggleColumn(setup: Setup, glyph: string): number {
@@ -496,6 +499,89 @@ describe("the bare-launch welcome shell", () => {
     expect(frame).toContain("edited in the working tree");
   });
 
+  test("nav mode on the Welcome tab offers only comment and fold; a diff letter types", async () => {
+    const setup = await renderReadyApp(
+      <App home={welcomeHome} sessionId={undefined} cwd={welcomeRepo} />,
+      { width: 160, height: 28 },
+    );
+    await waitForText(setup, "quick brown fox");
+    const line = locateText(setup, "quick brown fox");
+    await setup.mockMouse.click(line.column, line.row);
+
+    // esc enters nav; the footer names what this surface can do, not the diff commands
+    await press(setup, "escape");
+    await waitForText(setup, BARE_NAV_HINT);
+    expect(setup.captureCharFrame()).not.toContain("x reject");
+
+    // a diff letter has no command here, so it leaves nav and types, as the footer says
+    await pressKey(setup, "d");
+    await waitForText(setup, "● d");
+    await press(setup, "escape");
+    await waitForTextGone(setup, "● d");
+
+    // c opens a comment on the caret word; z folds the saved card
+    await press(setup, "escape");
+    await waitForText(setup, BARE_NAV_HINT);
+    await pressKey(setup, "c");
+    await typeText(setup, "note");
+    await waitForText(setup, "● note");
+    await pressKey(setup, "RETURN", { meta: true });
+    await waitForText(setup, "note");
+    await press(setup, "escape");
+    await waitForText(setup, BARE_NAV_HINT);
+    await pressKey(setup, "z");
+    await waitForText(setup, "○ 1 comment ›");
+
+    setup.renderer.destroy();
+  });
+
+  test("nav mode on a bare changed-file diff has no reject or walk; x types instead", async () => {
+    const setup = await renderReadyApp(
+      <App home={welcomeHome} sessionId={undefined} cwd={welcomeRepo} />,
+      { width: 160, height: 28 },
+    );
+    await waitForText(setup, "README.md");
+    const readme = locateText(setup, "README.md");
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForText(setup, "edited in the working tree");
+    const line = locateText(setup, "edited in the working tree");
+    await setup.mockMouse.click(line.column, line.row);
+
+    await press(setup, "escape");
+    await waitForText(setup, BARE_NAV_HINT);
+    expect(setup.captureCharFrame()).not.toContain("x reject");
+    await pressKey(setup, "x");
+    await waitForText(setup, "● x");
+    const frame = setup.captureCharFrame();
+    expect(frame).toContain("edited in the working tree");
+    expect(frame).not.toContain("change rejected");
+
+    setup.renderer.destroy();
+  });
+
+  test("nav mode on a project file offers only comment and fold", async () => {
+    const setup = await renderReadyApp(
+      <App home={welcomeHome} sessionId={undefined} cwd={welcomeRepo} />,
+      { width: 160, height: 28 },
+    );
+    await waitForText(setup, "README.md");
+    await setup.mockMouse.click(treeToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "README.md");
+    const readme = locateText(setup, "README.md");
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForText(setup, "edited in the working tree");
+    const line = locateText(setup, "edited in the working tree");
+    await setup.mockMouse.click(line.column, line.row);
+
+    await press(setup, "escape");
+    await waitForText(setup, BARE_NAV_HINT);
+    expect(setup.captureCharFrame()).not.toContain("x reject");
+    await pressKey(setup, "d");
+    await waitForText(setup, "● d");
+
+    setup.renderer.destroy();
+  });
+
   test("a bare launch rides a Welcome tab in the editor while the Thread pane waits empty", async () => {
     const setup = await renderWelcome();
 

package/src/__snapshots__/view-plan.regression.test.ts.snap

@@ -1,4 +1,4 @@
-// Bun Snapshot v1, https://goo.gl/fbAQLP
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
 
 exports[`view-plan regression harness (M0) blockRuns output is stable across the representative blocks 1`] = `
 [

package/src/annotation-palette.ts

@@ -11,6 +11,7 @@ import type { Theme } from "./theme";
 export const UNDERLINE = createTextAttributes({ underline: true });
 export const CUT = createTextAttributes({ strikethrough: true, dim: true });
 export const BOLD = createTextAttributes({ bold: true });
+export const ITALIC = createTextAttributes({ italic: true });
 
 /** The marked-words treatment: a violet backdrop under an underline. */
 const MARK_BACKDROP_DARK = "#463852";

package/src/ansi-screen.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test";
+import { ansiScreenToLines } from "./ansi-screen";
+
+describe("ansiScreenToLines", () => {
+  test("places text at the positioned cursor", () => {
+    const lines = ansiScreenToLines("\x1b[2;3Hhi", 10, 4);
+
+    expect(lines[0]).toBe("");
+    expect(lines[1]).toBe("  hi");
+    expect(lines[2]).toBe("");
+  });
+
+  test("clears the screen before repositioning", () => {
+    const lines = ansiScreenToLines("\x1b[1;1Hold\x1b[2J\x1b[1;1Hnew", 10, 2);
+
+    expect(lines[0]).toBe("new");
+  });
+
+  test("ignores colour, cursor-visibility, and clipboard sequences", () => {
+    const lines = ansiScreenToLines("\x1b[?25l\x1b[1;1H\x1b[32mgo\x1b]52;c;AA\x07", 10, 2);
+
+    expect(lines[0]).toBe("go");
+  });
+
+  test("clamps writes outside the grid instead of throwing", () => {
+    expect(() => ansiScreenToLines("\x1b[99;99Hx", 5, 3)).not.toThrow();
+  });
+});

package/src/ansi-screen.ts

@@ -0,0 +1,72 @@
+/** Interpret an absolute-positioned ANSI byte stream (cursor moves plus printed text) into a grid of rows. */
+
+const CSI = "\x1b[";
+
+export function ansiScreenToLines(ansi: string, cols: number, rows: number): string[] {
+  const grid: string[][] = Array.from({ length: rows }, () =>
+    Array.from({ length: cols }, () => " "),
+  );
+  let row = 0;
+  let column = 0;
+  let index = 0;
+
+  const put = (character: string): void => {
+    if (row >= 0 && row < rows && column >= 0 && column < cols) grid[row]![column] = character;
+    column += 1;
+  };
+
+  while (index < ansi.length) {
+    const character = ansi[index]!;
+
+    if (character === "\x1b") {
+      index = consumeEscape(ansi, index, (nextRow, nextColumn) => {
+        if (nextRow === "clear") {
+          for (const line of grid) line.fill(" ");
+          row = 0;
+          column = 0;
+        } else {
+          row = nextRow;
+          column = nextColumn;
+        }
+      });
+      continue;
+    }
+    if (character === "\n") {
+      row += 1;
+      column = 0;
+    } else if (character === "\r") {
+      column = 0;
+    } else {
+      put(character);
+    }
+    index += 1;
+  }
+
+  return grid.map((line) => line.join("").replace(/\s+$/, ""));
+}
+
+type EscapeEffect = (row: number | "clear", column: number) => void;
+
+function consumeEscape(ansi: string, start: number, apply: EscapeEffect): number {
+  if (ansi[start + 1] === "]") {
+    const bell = ansi.indexOf("\x07", start);
+
+    return bell === -1 ? ansi.length : bell + 1;
+  }
+  if (ansi.slice(start, start + CSI.length) !== CSI) return start + 1;
+  let index = start + CSI.length;
+
+  while (index < ansi.length && !/[A-Za-z]/.test(ansi[index]!)) index += 1;
+  const final = ansi[index];
+  const parameters = ansi.slice(start + CSI.length, index);
+
+  if (final === "H" || final === "f") {
+    const [rowParameter = "1", columnParameter = "1"] = parameters.split(";");
+
+    apply(Math.max(0, Number(rowParameter) - 1), Math.max(0, Number(columnParameter) - 1));
+  } else if (final === "J" && parameters === "2") {
+    apply("clear", 0);
+  }
+
+  return index + 1;
+}

package/src/app-screens.tsx

@@ -371,12 +371,8 @@ export function NoThreadShell(props: {
           {menuChrome}
           <ConfirmDialog
             isOpen={confirming !== null}
-            title=" Delete plan "
-            message={
-              confirming
-                ? `Delete "${confirming.title}"? This removes the plan and its review.`
-                : ""
-            }
+            title=" delete thread "
+            message={confirming ? `Delete "${confirming.title}"? This removes the thread.` : ""}
             onConfirm={() => {
               if (confirming) controller.deleteSession(confirming.sessionId);
               setMode({ type: "normal" });
@@ -388,7 +384,6 @@ export function NoThreadShell(props: {
             <PromptDialog
               isOpen
               title=" rename thread "
-              label="new title for this thread:"
               value={mode.text}
               placeholder="a short title"
               onInput={(text) => setMode({ ...mode, text })}
@@ -412,8 +407,11 @@ export function CompletionScreen(props: {
   verdict: VerdictKind;
   completion: { phase: "prompt" } | { phase: "counting"; remaining: number };
   status: string;
+  onClose: () => void;
+  onBackToPlan: () => void;
+  onAlways: () => void;
 }): React.ReactNode {
-  const { theme, session, verdict, completion, status } = props;
+  const { theme, session, verdict, completion, status, onClose, onBackToPlan, onAlways } = props;
 
   return (
     <ThemeProvider theme={theme}>
@@ -421,6 +419,9 @@ export function CompletionScreen(props: {
         verdict={verdict}
         completion={completion}
         status={status}
+        onClose={onClose}
+        onBackToPlan={onBackToPlan}
+        onAlways={onAlways}
         returnsTo={
           returnPaneFor(session.artifact.meta.herdrPane)
             ? (session.artifact.meta.agent ?? "the agent")
@@ -510,7 +511,6 @@ export function TrailingOverlays(props: {
         <PromptDialog
           isOpen
           title=" rename thread "
-          label="new title for this thread:"
           value={mode.text}
           placeholder="a short title"
           onInput={(text) => setMode({ ...mode, text })}
@@ -519,6 +519,16 @@ export function TrailingOverlays(props: {
           theme={theme}
         />
       ) : null}
+      {mode.type === "confirmDelete" ? (
+        <ConfirmDialog
+          isOpen
+          title=" delete thread "
+          message={`Delete "${mode.title}"? This removes the thread.`}
+          onConfirm={() => dispatch({ type: "confirmDialog" })}
+          onCancel={() => setMode({ type: "normal" })}
+          theme={theme}
+        />
+      ) : null}
       {mode.type === "nameSelf" ? (
         <PromptDialog
           isOpen

package/src/app-view-model.ts

@@ -4,6 +4,7 @@ import type { Mode } from "./intent-dispatch";
 import type { Intent, KeyState } from "./keymap";
 import type { Completion } from "./thread-controller";
 import type { WalkFile } from "./walk";
+import type { QuickAction } from "./config";
 import { viewedCount } from "./walk";
 import type { ConfirmCardProps } from "./components/ConfirmCard";
 import type { BreadcrumbItem } from "./components/Breadcrumb";
@@ -57,7 +58,6 @@ export function resolveOverlay(
     mode.type === "treePrompt"
   )
     return "prompt";
-  if (mode.type === "shareChoice") return "shareChoice";
   if (mode.type === "spanActions") return "spanActions";
   if (completionPhase === "prompt") return "completion-prompt";
   if (completionPhase === "counting") return "completion-counting";
@@ -136,6 +136,7 @@ export function buildSubmitConfirmState(
     session: Thread;
     walkFileList: WalkFile[];
     viewedPaths: Set<string>;
+    quickActions: QuickAction[];
   },
 ): Omit<ConfirmCardProps, "theme"> | null {
   const { mode, isDiff, session, walkFileList, viewedPaths, liveInput, setMode, dispatch } = deps;
@@ -145,6 +146,7 @@ export function buildSubmitConfirmState(
   return {
     verdict: mode.verdict,
     summary: mode.summary,
+    quickActions: deps.quickActions,
     viewedSummary:
       isDiff && session.viewedPaths !== undefined
         ? `${viewedCount(walkFileList, viewedPaths)}/${walkFileList.length} files viewed`

package/src/components/AnnotatableFileView.tsx

@@ -1,6 +1,6 @@
 // A project file shown as its own annotatable surface: the file's lines render through the diff
 // sheet as context rows (one line-number gutter, no +/- sign), so selecting text leaves a comment
-// anchored to the file exactly as a plan or diff comment is. Used where a review session exists to
+// anchored to the file exactly as a plan or diff comment is. Used where a thread exists to
 // hold the notes; the bare-launch welcome shell uses the read-only FileContentsView instead.
 
 import React, { useEffect, useRef, useState } from "react";

package/src/components/AnnotationCards.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, { useContext, useLayoutEffect, useRef, useState } from "react";
+import { usePaste } from "@opentui/react";
 import type {
   BoxRenderable,
   KeyBinding,
@@ -18,6 +19,7 @@ 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";
@@ -35,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;
 
@@ -54,6 +56,7 @@ export function Composer({
   onSave,
   onReady,
   onInput,
+  placeholder,
 }: {
   seed: string;
   glyph: string;
@@ -61,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);
 
@@ -98,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 ?? "")}
@@ -247,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}>

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 = {