Approval Card

Install

pnpm exec vegastack-design verify approval-card

pnpm dlx shadcn@4.21.0 add @vegastack/approval-card

Usage

import { ApprovalCard } from "@/components/ui/approval-card";

<ApprovalCard
  actor={{ name: "Claude Code", kind: "agent", via: "Manoj" }}
  verb={
    <>
      wants to <strong>move 2 tasks to Trash</strong>
    </>
  }
  items={tasks.map((t) => ({
    id: t.id,
    title: t.title,
    href: t.href,
    meta: t.space,
  }))}
  reason="These duplicate #10 and #11."
  reassurance="You can restore them from Trash for 30 days."
  requestedAt={request.createdAt}
  expiresAt={request.expiresAt}
  status={request.status}
  onApprove={() => approve(request.id)}
  onDecline={() => decline(request.id)}
/>;

The host owns the request: it passes status back after a decision, and an onApprove or onDecline that returns a promise keeps its button busy (a rejection shows its message under the card). The actor is a Person with kind: "agent", so it reads exactly as the agent does in comments, activity and pickers: the purple bot, "Claude Code via Manoj" and the "Agent" label.

Scope

One decision covers the whole request — all or nothing. List the first few records in items and count the rest in moreCount ("and 3 more"). Put it above a record's description, in an inbox detail sheet, or in a dialog; it fills its container.

Examples

Outcomes

approved, declined, expired, cancelled and already (answered on another device) replace the buttons with a line; statusLine swaps in your own words ("Approved by you · just now"). A viewer who canDecide={false} sees whose approval it waits for.

Narrow

Under a 24rem container the buttons stack full width, Approve on top, and the times move under them.

API Reference

Accessibility

• The card is a region named by its title: "Claude Code via Manoj, agent wants to move 2 tasks to Trash". Approve and Decline are described by the same title.
• A decision made while the card is on screen is announced politely; the first paint is not.
• Status is never colour alone: each outcome is a sentence with its icon.

Do / Don't