Access scopePro

What the agent can reach right now in one line, expandable to a list with revoke.

Markdown

On this page

ProA travel assistant's live access with revoke on each grant.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/access-scope

Usage

tsx

import { AccessScope } from "@/components/ui/chatcn/pro/access-scope"

<AccessScope
  grants={[{ id: "mail", name: "Mail", scope: "Read and draft, not send", level: "write" }]}
  onRevoke={(id) => api.revoke(id)}
/>

The line names the sources and counts how many can change things. Each grant has a reach mark of three ticks (read, write, acts as you), the same scale as the risk badge; acting as the person is the only level in amber, always with its words. Revoked grants stay struck through so the person sees what they took away.

Examples

States

ProCollapsed, read only, revoke failing and no access.

Props

Prop	Type	Notes
`grants`	`{ id, name, scope?, level, icon?, expires? }[]`	`level`: read, write or act
`onRevoke`	`(id) => void \| Promise<void>`	Reject to keep the grant and show why. Omit to hide Revoke
`subject`	`string`	Default "The agent"
`size`	`"sm" \| "md"`	Default `md`
`open`, `defaultOpen`, `onOpenChange`		Controlled or uncontrolled

Keyboard

Key	Action
Enter or Space	Expand or collapse the list
Tab	Move through Revoke buttons

Accessibility

The line is a button with aria-expanded; each Revoke names its source.
Revoke errors are announced as alerts under the grant.

Motion

The list slides 4 px and fades in 180 ms; the chevron turns in 180 ms. Nothing moves under reduced motion.