Action card
An optional next action that does not block the agent turn.
Connect your accounting software
Bring your transactions into Commenda.
Usage
import { ActionCard } from '@commenda/pathfinder/action-card';
<ActionCard
title="Connect your accounting software"
description="Bring transactions into Commenda."
artwork={<IntegrationLogo />}
actionConfig={{
label: 'Connect account',
onAction: connectAccount,
pendingDescription: 'Finish connecting in the window that opened.',
}}
dismissConfig={{ onDismiss: persistDismissal }}
/>;Inline action
Connect your accounting software
Bring your transactions into Commenda.
Failure and retry
Connect your accounting software
Bring your transactions into Commenda.
Reset restores the example. Simulate failure retains the card for retry; no backend request is made.
API reference
| Prop | Type | Behavior |
|---|---|---|
titleRequired | string | Required title and optional supporting text |
description | string | Required title and optional supporting text |
artworkRequired | ReactElement<any, string | React.JSXElementConstructor<any>> | Decorative artwork rendered in the existing 40px Avatar |
actionConfigRequired | ObjectView fields | Handler returns { status: 'completed' } or { status: 'failed', message }, synchronously or asynchronously |
dismissConfig | ObjectView fields | Optional secondary action, defaults to Not now; persists permanent dismissal |
state | "ready"|"pending"|"completed"|"dismissed" | Host status; local pending/completion also tracked |
placement | "docked"|"inline" | Docked radius16/raised, inline radius10/flat |
className | string | Layout override |
actionConfigObject fields
| Field | Type | Requirement |
|---|---|---|
label | string | Required |
onAction | () => ActionResult | Promise<ActionResult> | Required |
pendingDescription | string | Optional |
dismissConfigObject fields
| Field | Type | Requirement |
|---|---|---|
label | string | Optional |
onDismiss | () => void | Required |
Design rules
- ACTION-01: Optional next action outside the blocking request flow. The frame is not a click target; only buttons activate.
- ACTION-02: One primary action and at most one secondary dismissal. Loading retains the action label with a spinner. Explain external-window work in the pending description when relevant.
- ACTION-03: Completion or dismissal removes the card. The host persists that outcome. No automatic agent turn, success toast, or promised follow-up. Historical cards remain usable until acted on or dismissed.
Return completion only when the action succeeds, not merely when an external window opens. If a blocked popup fails, return a failure message. Use a new React key for a new action, and store its completion/dismissal independently from conversational requests.
Integration and accessibility
Buttons have explicit names and keyboard focus. No network transport or AI SDK provider is required. Requests, tool execution, permission checks, durable outcomes and composer coordination stay in the application. See AI content integration for migration mappings; application migration is outside this build.