A human-in-the-loop card for a proposed agent action, with a before and after summary, an Approve step that asks for confirmation, inline editing and a countdown that rejects on its own.
Partial refund to the card on file.
npx shadcn@latest add https://hyperblur.dev/r/agent-approval-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/agent-approval-card.tsx.
import { AgentApprovalCard } from "@/components/hyperblur/agent-approval-card"
<AgentApprovalCard title="Send invoice" tool="billing.send" timeout={20} onApprove={(c) => console.log(c)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Refund order #4821" | Short name of the proposed action. |
| summary | string | "Partial refund to the card on file." | One line explaining what will happen. |
| tool | string | "payments.refund" | Name of the tool the agent wants to call. |
| changes | { label: string; before?: string; after: string }[] | two sample rows | Parameters shown as a diff. Rows with a before value render a struck old value and an arrow. |
| timeout | number | 30 | Seconds until the action is rejected automatically. 0 disables the countdown. It pauses on hover, focus, edit and confirm. |
| resetAfter | number | 0 | Milliseconds after a decision before the card resets itself. Useful for demos. 0 keeps the result and shows a Review again button. |
| accent | string | "#2f7bff" | Color of the countdown bar and the primary button. |
| onApprove | (changes: ApprovalChange[]) => void | Called after the confirmation step with the current values. | |
| onReject | (reason: "manual" | "timeout") => void | Called when the user rejects or the countdown runs out. | |
| onEdit | (changes: ApprovalChange[]) => void | Called when edited values are saved. |