React Approval Gate

Copy Page

Autonomy is fine until the next step scraps a lot, emails a customer, or spends money — then a human belongs in the loop. The gate shows exactly what the agent proposes to do, with its parameters and risk, and refuses to proceed without a decision.

Installation

Props

Show the action, not just the ask

A blank "the agent wants to do something — approve?" is worse than no gate, because it trains people to click through. So the gate lays out the parameters of the proposed action — which lots, which destination, recipe match verified, estimated delay — in a small spec block, because approval only means something if the approver can see what they're approving. The risk level sets the treatment and, at high, the approve button turns destructive-red so a serious action never wears a neutral colour.

Deliberate, not reflexive

High-risk actions require a typed confirmation — the operator types REROUTE before Approve enables — borrowing the same friction as Mode Selector's guarded transitions and the typed-confirm pattern. It is the difference between a decision and a reflex. Once resolved the gate collapses to a one-line record of who decided and what happens next; wire onApprove to release the agent and onReject to halt it, and enforce the gate server-side too — the UI is the prompt for a decision, not the authority that carries it out.