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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.77",
+  "version": "0.1.0-alpha.78",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -27,10 +27,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.77",
-    "@cueloop/extension-api": "0.1.0-alpha.77",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.77",
-    "@cueloop/schema": "0.1.0-alpha.77",
+    "@cueloop/daemon": "0.1.0-alpha.78",
+    "@cueloop/extension-api": "0.1.0-alpha.78",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.78",
+    "@cueloop/schema": "0.1.0-alpha.78",
     "@opentui/core": "^0.5.8",
     "@opentui/keymap": "0.5.8",
     "@opentui/react": "^0.5.8",

package/src/App.autoclose.test.tsx

@@ -57,7 +57,7 @@ type Setup = Awaited<ReturnType<typeof renderApp>>;
 
 async function submitApprove(setup: Setup): Promise<void> {
   await pressKey(setup, "RETURN", { meta: true }); // open submit (approve default: no pending items)
-  await press(setup, "enter"); // confirm
+  await pressKey(setup, "RETURN", { meta: true }); // confirm
   await waitForText(setup, "review approved");
 }
 
@@ -74,8 +74,8 @@ describe("completion overlay", () => {
     const frame = await waitForText(setup, "closing in 5s");
 
     expect(frame).toContain("review approved");
-    expect(frame).toContain("close [return]");
-    expect(frame).toContain("return to plan [esc]");
+    expect(frame).toContain("close");
+    expect(frame).toContain("back to plan");
 
     // Act
     await press(setup, "enter");

package/src/App.diff.test.tsx

@@ -13,7 +13,6 @@ import {
   clickText,
   dragText,
   isolateUserConfig,
-  press,
   pressKey,
   renderReadyApp,
   typeText,
@@ -95,7 +94,7 @@ describe("diff review", () => {
 
     // Act - submit with the session chord (cmd+enter, no composer open), confirm request_changes
     await pressKey(setup, "RETURN", { meta: true });
-    await press(setup, "enter");
+    await pressKey(setup, "RETURN", { meta: true });
 
     // Assert
     await waitForText(setup, "feedback sent");
@@ -105,6 +104,19 @@ describe("diff review", () => {
     expect(resolved.verdict!.feedback).toContain("Map needs an eviction story.");
   });
 
+  test("pasting an image into a diff comment drops in an [Image #n] placeholder", async () => {
+    // Arrange - mark the added line and open the inline comment composer
+    const setup = await renderApp();
+    await dragText(setup, "new Map()", "new Map()", "new Map()".length);
+    await typeText(setup, "see ");
+
+    // Act - a burst of control bytes stands in for the binary an image paste delivers
+    await setup.mockInput.pasteBracketedText("
");
+
+    // Assert - the same placeholder the summary composer shows
+    await waitForText(setup, "see [Image #1]");
+  });
+
   test("a comment reopens with its mark painted on the code", async () => {
     // Arrange - a stored comment anchored to the added line's words
     server.core.sessionAnnotate(session.id, {

package/src/App.export.test.tsx

@@ -18,7 +18,6 @@ import type { Thread } from "@cueloop/schema";
 import { App } from "./App";
 import {
   isolateUserConfig,
-  press,
   waitForState,
   waitForText,
   pressKey,
@@ -81,7 +80,7 @@ describe("obsidian export on resolve", () => {
     await waitForText(setup, "[Approve]");
 
     // Act
-    await press(setup, "enter"); // submit
+    await pressKey(setup, "RETURN", { meta: true }); // submit
 
     // Assert
     // the export is an async round-trip after resolve; the status line lands

package/src/App.plan-review.test.tsx

@@ -228,6 +228,22 @@ describe("the mark stays painted while composing", () => {
     await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
     await waitForState(setup, () => backgroundsOf(setup, "The daemon").includes(THREAD_MARK));
   }, 60_000);
+
+  test("backspace on an empty draft dismisses the composer back to the mark", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    // Act: mark, type one character, then delete it and backspace again on the now-empty draft
+    await dragText(setup, "The daemon", "daemon persists", "daemon".length);
+    await type(setup, "x");
+    await waitForText(setup, "● x");
+    await press(setup, "backspace");
+    await press(setup, "backspace");
+
+    // Assert: the composer is gone and the mark stays, ready to re-type
+    await waitForTextGone(setup, "● x");
+    expect(backgroundsOf(setup, "The daemon")).toContain(THREAD_MARK);
+  }, 60_000);
 });
 
 describe("compose newline convention", () => {

package/src/App.submit-confirm.test.tsx

@@ -99,8 +99,8 @@ describe("send message confirm", () => {
     const frame = setup.captureCharFrame();
 
     expect(frame).toContain("[Approve]");
-    expect(frame).toContain(" send message ");
-    expect(frame).toContain(" Cancel ");
+    expect(frame).toContain(" send ");
+    expect(frame).toContain(" cancel ");
   });
 
   test("left/right cycles the verdict selector in the overlay", async () => {
@@ -146,7 +146,7 @@ describe("send message confirm", () => {
     // Assert - a bare ESC settles after the parser's escape-sequence window
     const frame = await waitForTextGone(setup, "[Approve]");
 
-    expect(frame).not.toContain(" Cancel ");
+    expect(frame).not.toContain(" cancel ");
   });
 
   test("enter in the overlay resolves the session through the controller", async () => {
@@ -162,7 +162,7 @@ describe("send message confirm", () => {
 
     // Act
     await setup.mockInput.typeText("Tighten the steps.");
-    await press(setup, "enter");
+    await pressKey(setup, "RETURN", { meta: true });
 
     // Assert - the completion flow after submit is unchanged
     await waitForText(setup, "feedback sent");
@@ -172,6 +172,35 @@ describe("send message confirm", () => {
     expect(stored.verdict!.kind).toBe("request_changes");
   });
 
+  test("typing / in the summary opens the skills/actions palette", async () => {
+    // Arrange
+    seedAnnotations(1);
+    const setup = await renderApp();
+    await pressKey(setup, "RETURN", { meta: true });
+    await waitForText(setup, "[Changes]");
+
+    // Act
+    await setup.mockInput.typeText("/restate");
+
+    // Assert - the same slash palette the inline composer shows
+    await waitForText(setup, "restate-simplified");
+  });
+
+  test("pasting an image into the summary drops in an [Image #n] placeholder", async () => {
+    // Arrange
+    const setup = await renderApp();
+    await pressKey(setup, "RETURN", { meta: true });
+    await waitForText(setup, "[Approve]");
+
+    // Act - a burst of control bytes stands in for the binary an image paste delivers
+    await setup.mockInput.typeText("look at this ");
+    await setup.mockInput.pasteBracketedText("
");
+
+    // Assert - the raw bytes never reach the draft; a numbered placeholder does
+    await waitForText(setup, "[Image #1]");
+    expect(setup.captureCharFrame()).toContain("look at this [Image #1]");
+  });
+
   test("read-only observers cannot open the confirm overlay", async () => {
     // Arrange
     seedAnnotations(1);
@@ -185,7 +214,7 @@ describe("send message confirm", () => {
     const frame = setup.captureCharFrame();
 
     expect(frame).not.toContain("[Changes]");
-    expect(frame).not.toContain(" Cancel ");
+    expect(frame).not.toContain(" cancel ");
     expect(server.core.sessionGet(session.id).status).toBe("pending");
   });
 });

package/src/App.test.tsx

@@ -207,7 +207,7 @@ describe("submit", () => {
 
     // Act
     await type(setup, "Expand the steps.");
-    await press(setup, "enter");
+    await pressKey(setup, "RETURN", { meta: true });
 
     // Assert
     await waitForText(setup, "feedback sent");
@@ -231,7 +231,7 @@ describe("submit", () => {
     await waitForText(setup, "[Approve]"); // no pending items → approve default
 
     // Act
-    await press(setup, "enter");
+    await pressKey(setup, "RETURN", { meta: true });
 
     // Assert
     await waitForState(setup, () => server.core.sessionGet(session.id).verdict !== undefined);

package/src/App.tsx

@@ -1068,6 +1068,9 @@ export function App({
         verdict={activeSession.verdict.kind}
         completion={completion}
         status={status}
+        onClose={() => dispatch({ type: "finishReview" })}
+        onBackToPlan={() => dispatch({ type: "dismissCompletion" })}
+        onAlways={() => dispatch({ type: "optInAutoClose" })}
       />
     );
 
@@ -1086,6 +1089,7 @@ export function App({
     session: activeSession,
     walkFileList,
     viewedPaths,
+    quickActions,
     liveInput,
     setMode,
     dispatch,

package/src/App.walk.test.tsx

@@ -162,7 +162,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");
@@ -253,7 +253,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");

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/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

@@ -388,7 +388,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 +411,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 +423,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 +515,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 })}

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";
@@ -136,6 +137,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 +147,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 = {