HumanApprovalCard

Approval card sent to a human reviewer: action summary, requester, evidence, and response controls.

Preview

DataOps AgentrequestsDelete 47 user records from databasehigh

Permanent removal of inactive accounts flagged for GDPR erasure. This action cannot be undone without a backup restore.

waiting 2m 14s

Variants

Medium urgency with diff

CI AgentrequestsMerge pull request #214medium

Adds OAuth2 PKCE support to the authentication flow. 3 reviewer approvals, all checks green.

+342 −87 lineswaiting 5m 02s

Static preview — actions disabled

Low urgency

Reporting AgentrequestsPublish weekly analytics reportlow

PDF report generated for the week of 9 June. Sent to the analytics mailing list.

Static preview — actions disabled

Props

Prop	Type	Description
agent*	{ name: string; initials?: string }	The agent requesting approval.
action*	string	The action headline.
summary	string	One- or two-sentence description of what the action entails.
urgency	"low" \| "medium" \| "high"	Urgency level. Influences border and badge colour. Defaults to "medium".
waitingFor	string	Human-readable wait duration — e.g. "2m 14s".
diffLines	{ added?: number; removed?: number }	Line-count diff summary shown below the summary.
staticPreview	boolean	Disables action buttons.
onApprove	() => void	Called on Approve.
onDeny	() => void	Called on Deny.
onReview	() => void	Called on "Review diff".
className	string	Additional CSS classes for the card root.

* required.

Usage

import { HumanApprovalCard } from "@/components/agent/human-approval-card";

<HumanApprovalCard
  agent={{ name: "DataOps Agent" }}
  action="Delete 47 user records from database"
  summary="Permanent removal of inactive accounts flagged for GDPR erasure."
  urgency="high"
  waitingFor="2m 14s"
  onApprove={() => {}}
  onDeny={() => {}}
  onReview={() => {}}
/>