PermissionRequest

Full permission gate: action description, scope pills, approve/deny controls, and risk context.

Preview

Write to production database

high risk

The migration agent needs write access to apply the pending schema change to the users table.

Requested scope

db:writedb:schema

db:write → postgres/prod/users
db:schema → ALTER TABLE users

Variants

High risk

Delete repository branch

high risk

Cleanup agent wants to remove the merged feature branch after the PR was closed.

Requested scope

git:delete-branch

git:delete-branch → feature/user-auth-v2

Static preview — actions disabled

Medium risk

Send email to 2,400 users

medium risk

Campaign agent is ready to dispatch the re-engagement sequence to the lapsed segment.

Requested scope

email:sendemail:template:read

Static preview — actions disabled

Low risk

Read analytics dashboard

low risk

Reporting agent needs read-only access to generate the weekly performance summary.

Requested scope

analytics:readmetrics:read

Static preview — actions disabled

Atoms — ApprovalCardBase

ApprovalCardBase atom

The bare layout shell. Accepts any header icon, header node, summary, details, and footer. PermissionRequest and HumanApprovalCard both compose this.

Atoms — ApprovalActions

Static preview mode

Static preview — actions disabled

Props

Prop	Type	Description
title*	string	Short headline for the requested permission.
rationale*	string	One- or two-sentence justification from the agent.
scopes*	PermissionScope[]	Array of scope labels (and optional detail strings) to render as tags.
risk	"low" \| "medium" \| "high"	Risk tier badge. Defaults to "medium".
staticPreview	boolean	Disables action buttons — use in docs or design previews.
onApprove	() => void	Called when the user taps Approve.
onDeny	() => void	Called when the user taps Deny.
onAlwaysAllow	() => void	Called when the user taps "Always allow for this agent".
onEdit	() => void	When provided, renders an Edit button inside the scope block.
className	string	Additional CSS classes for the card root.

* required.

Usage

import { PermissionRequest } from "@/components/agent/permission-request";

<PermissionRequest
  title="Write to production database"
  rationale="Migration agent needs write access to apply the pending schema change."
  scopes={[
    { label: "db:write", detail: "→ postgres/prod/users" },
    { label: "db:schema", detail: "→ ALTER TABLE users" },
  ]}
  risk="high"
  onApprove={() => {}}
  onDeny={() => {}}
  onAlwaysAllow={() => {}}
/>