Tool Permission Card

An authorization card that sits in the message stream right before an agent runs a tool with side effects. It lists the tool name, risk level, a one-sentence description and a parameter summary, with Deny, Always allow this tool and Allow at the bottom. Once a decision is made, the parameters and buttons fade away and the whole card collapses with a layout animation into a single-line record ("Allowed: Write file · src/notes/today.md"); click it to expand and review the parameters again. High-risk tools get a red stripe, hide always-allow and put default focus on Deny; you can also set a countdown that counts as a denial when it runs out. It complements the tool call card, which shows execution status — this one handles authorization before execution.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<ToolPermissionCard/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/tool-permission-card.en.json

Usage

import { ToolPermissionCard } from "@/components/ui/tool-permission-card";

<ToolPermissionCard
  toolName="Write file"
  description="The agent wants to create a new file in the project"
  risk="low"
  params={[
    { label: "Path", value: "src/notes/today.md", mono: true },
    { label: "Size", value: "1.2 KB" },
  ]}
  onDecision={async (decision) => {
    // Send the decision back to your agent runtime; a rejection keeps the card pending
    await sendToAgent({ tool: "write_file", decision });
  }}
/>

Props

ToolPermissionStatus is "pending" \| "allowed" \| "denied" \| "always".

ToolPermissionParam

How it works

• Collapse animation: the moment a decision is made, the parameters and button row exit through AnimatePresence (opacity and height to zero) while the outer motion.div carries layout, folding into a single line over collapseDuration with easeInOut. The result icon (✓ / ✕ / ∞) springs from 0.6× to full size, colored emerald, red or sky by outcome.
• The collapsed record is a button; click it to expand the description and parameters. The expanded view is read-only — the decision cannot be changed.
• When onDecision returns a Promise, the pressed button shows a spinner and sets aria-busy while the other buttons pause; if the Promise rejects, the card stays pending so you can try again.
• The expiresIn countdown is a thin progress bar along the bottom of the card that turns red in its last quarter; at zero it calls onDecision("deny") and collapses to Denied.
• Button hover transitions and the expand chevron rotation both use --wb-tool-permission-card-duration, which you can override globally.

Accessibility

• The card is role="group" with aria-labelledby pointing at the tool name
• While pending, Escape inside the card denies; Enter allows when focus is not on a button (a focused button handles Enter itself), with IME composition protection
• Allow is focused by default, switching to Deny for high risk so a stray keypress costs less; focusing never scrolls the page, and autoFocus={false} turns it off when several cards share a message stream
• After a decision, focus moves to the collapsed record (if focus was inside the card); the record exposes aria-expanded, and an aria-live="polite" region announces outcomes like "Allowed Write file"
• The countdown bar is hidden from assistive tech; the seconds remaining are provided as sr-only text
• When the user has reduce motion enabled, collapsing skips the height and layout animation and the record fades in over 120ms, the result icon does not bounce, and the countdown bar becomes a number