Approval mode
Manual, Auto or Skip, each with one sentence that says what the agent will do without you, a list of saved grants per site and per tool, and calm notices for actions that stay blocked in every mode.
On this page
Manual, Auto or Skip, saved grants per site and tool, and the actions that stay blocked in every mode.
Installation
Usage
import {
ApprovalGrants,
ApprovalHardBlocks,
ApprovalMode,
} from "@/components/ui/chatcn/approval-mode"
<ApprovalMode value={mode} onValueChange={setMode} />
<ApprovalGrants grants={grants} onRevoke={(grant) => revoke(grant.id)} />
<ApprovalHardBlocks />Skip is marked risky: it carries a No approvals tag, inverts when on, and asks once, inline, before it turns on. Pass modes to change the copy or add your own.
Examples
Hard block in a run
HardBlockNotice is the moment the agent reaches a purchase or a permanent delete. It reads as a handoff, not an error: a lock, one line, and Take over.
The calm inline notice when the agent reaches a blocked action, and the empty grants list.
Props
ApprovalMode
| Prop | Type | Notes |
|---|---|---|
modes | ApprovalModeOption[] | { id, label, description, icon?, risky?, disabled? } |
value, defaultValue, onValueChange | string | Controlled or uncontrolled |
skipConfirm | boolean | Turn off the inline confirmation for risky modes |
label | string | Group name. Default Approval mode |
disabled | boolean |
ApprovalGrants
| Prop | Type | Notes |
|---|---|---|
grants | ApprovalGrant[] | { id, kind: site | tool, name, label?, scope, detail?, icon? } |
scope | once | session | always | Allowed once, This session, Always allowed |
onRevoke | (grant) => void | Called after the row folds away |
onRevokeAll | () => void | Shows Revoke all |
ApprovalHardBlocks and HardBlockNotice
| Prop | Type | Notes |
|---|---|---|
items | ReactNode[] | Defaults to purchases, accounts, permanent deletes and security settings |
action, target | ReactNode | What the agent was about to do, and where |
onTakeOver | () => void | Shows Take over on the notice |
Keyboard
| Key | Action |
|---|---|
ArrowUp, ArrowDown | Move between modes (native radio group) |
Esc in the confirmation | Cancel and return to the current mode |
Tab | Reach each Revoke button. Focus moves to the next one after a revoke |
Accessibility
- Modes are real radio inputs inside labels, so the group, the checked state and arrow keys come from the platform.
- Revoke buttons are named after what they revoke: Revoke github.com.
- Hard blocks use plain words and a lock, never red, because nothing is wrong.
Motion
- The radio fills with a 150 ms inset shadow. Rows change background over 150 ms.
- The risky confirmation drops in 4 px with a 200 ms fade. Revoked rows fold away over 160 ms.
- Under reduced motion rows fade without folding.