Components · Control

Approval Gate

The core of a delegation contract. The agent states what it wants to do, itemizes the exact scope, and marks what can't be undone. Denying is as prominent as approving. After the decision, the gate collapses to a one-line receipt so the transcript keeps its audit trail without the clutter.

When to use

Before irreversible or externally visible actions only: sending, publishing, purchasing, deleting. Never gate reads or reversible operations; an agent that asks permission to read a file trains users to click through permission to send an email.

Behavior

Three states: awaiting, approved, denied. Scope items marked risky get a visible can't-undo tag. The decision collapses the gate into a compact receipt, preserving the audit trail. Works controlled (pass state) or uncontrolled.

Usage

tsx

import { ApprovalGate } from "@/components/approval-gate";

<ApprovalGate
  title="Send the Q3 summary email?"
  reason="Draft is ready for the three stakeholders."
  scope={[
    { label: "Send email to 3 recipients", detail: "alice@, bob@, carol@", risky: true },
    { label: "Attach Q3-summary.pdf", detail: "412 KB" },
  ]}
  onApprove={send}
  onDeny={cancel}
/>

Install

shell

npx shadcn@latest add https://agent-pitstop.vercel.app/r/approval-gate.json

Or copy the source from registry/approval-gate. MIT licensed.

Waiting for you

Send the Q3 summary email?

Draft is ready. I want to send it to the three stakeholders you mentioned this morning.

Send email to 3 recipientsCan't undoalice@, bob@, carol@acme.com
Attach Q3-summary.pdf412 KB, generated 2 min ago
CC yourselfac.design.px@gmail.com