A permission prompt for a file-writing tool call that previews the change as a diff per file, lets you include or drop each hunk and choose how long the permission lasts. Approve applies only the chosen hunks, and the card turns into a receipt with Undo.
Coder wants to run fs.write_file
Fix proration for months that are not 30 days long.
npx shadcn@latest add https://hyperblur.dev/r/agent-tool-permission.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/agent-tool-permission.tsx.
import { AgentToolPermission } from "@/components/hyperblur/agent-tool-permission"
<AgentToolPermission onApprove={({ hunks, scope }) => console.log(hunks, scope)} />| Prop | Type | Default | Description |
|---|---|---|---|
| agent | string | "Coder" | Name of the agent asking. |
| tool | string | "fs.write_file" | Tool the agent wants to call. |
| reason | string | "Fix proration for months that are not 30 days long." | One line the agent gave as its reason. |
| risk | "low" | "medium" | "high" | "medium" | Risk chip shown in the header. |
| files | PermissionFile[] | two sample files | Files with path and hunks. Each hunk has id, header and lines of { t: "+" | "-" | " ", s: string }. |
| defaultScope | "once" | "session" | "always" | "once" | Permission duration selected first. |
| resetAfter | number | 0 | Milliseconds after a decision before the card returns to the prompt. 0 keeps the receipt. |
| accent | string | "#2f7bff" | Color of the approve button, checkboxes and the active tab. |
| onApprove | (result: { hunks: string[]; scope: PermissionScope }) => void | Called by Approve or Cmd/Ctrl + Enter with the included hunk ids and the chosen scope. | |
| onDeny | () => void | Called by Deny. |