AI Action Ledger
What an agent actually did, classified by what can be undone.
- AI
- 1 file
- 2 npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add ai-action-ledgernpm packages installed: class-variance-authority, radix-ui.
import { ActionLedger } from "@/components/ui/ai-action-ledger";Default
Three Kinds Of Undo
Compensable Warning
Partial Failure
Nothing Undoable
With Payload
Interactive
<ActionLedger>
| Prop | Type | Default |
|---|---|---|
actions (required) | LedgerAction[] | — |
onRevertReceives the selected actions. The application performs the revert. | (actions: LedgerAction[]) => void | — |
children | ReactNode | — |
Plus every attribute of <div> except onSelect.
<ActionLedgerToolbar>
Plus every attribute of <div>.
<ActionLedgerEntry>
| Prop | Type | Default |
|---|---|---|
action (required) | LedgerAction | — |
status | "applied" | "reverting" | "reverted" | "failed" | "applied" |
childrenThe payload inspector. Collapsed, because it is provenance not content. | ReactNode | — |
Plus every attribute of <li> except children.
<ActionLedgerList>
Plus every attribute of <ul>.
<ActionLedgerPayload>
| Prop | Type | Default |
|---|---|---|
label | string | "Details" |
Every prop of Radix UI’s Collapsible.Root, plus className.
<ActionLedgerSelectionSummary>
Plus every attribute of <p>.
Reversibility is stated in words on every entry, never by colour or icon alone — it decides whether the undo control means anything, so it cannot be decoration. Selection uses native checkboxes with real labels, and the revert button carries the count in its accessible name so it says what pressing it will do. The selection summary is an aria-live region because the wording changes as the choice changes, and warns before the click when something can only be offset rather than undone.
9/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes