Sensitive action gatePro

Confirm before the agent pays, sends, deletes or signs in, with the exact details.

Markdown

On this page

ProPaying at checkout: the exact total, the site checked, hold to pay.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/sensitive-action-gate

Usage

tsx

import { SensitiveActionGate } from "@/components/ui/chatcn/pro/sensitive-action-gate"

<SensitiveActionGate
  kind="pay"
  title="Pay $136.42"
  target="to Fieldhouse"
  url={checkoutUrl}
  expectedHost="fieldhouserunning.com"
  onConfirm={pay}
  onDeny={stop}
/>

Pass expectedHost, the site from the task, and the gate checks the page against it: a lookalike domain turns the site row red and forces a hold. Pay and delete are a press and hold by default; the fill is linear, so it shows exactly how long is left. Once answered, the gate collapses into one line saying what happened.

Examples

Kinds

ProSend with the message, delete with a hold, sign in, and a lookalike site.

States

ProWorking, approved, denied, timed out and failed.

Props

Prop	Type	Notes
`kind`	`"pay" \| "send" \| "delete" \| "login" \| "submit" \| "share"`	Icon, verbs and default confirm mode
`title`, `target`, `reason`	`ReactNode`	The action, who it goes to, why
`url`, `expectedHost`	`string`	Site check
`details`, `preview`, `consequence`		Exactly what happens
`confirmMode`, `holdMs`	`"hold" \| "click"`, `number`	Default 1200 ms
`status`	`"pending" \| "confirming" \| "approved" \| "denied" \| "expired" \| "error"`
`expiresAt`	`number`	Countdown, amber under 30 s
`onConfirm`, `onDeny`, `onRetry`	`() => void`

Keyboard

Key	Action
`Space`, `Enter` held	Hold to confirm

Accessibility

The hold button announces how long to hold.
The site check is stated in words, not only with the shield glyph.

Motion

The hold fill wipes with clip-path, linear for the hold and 200 ms back on release. It runs under reduced motion because it is the progress.