{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-approval-card",
  "type": "registry:component",
  "title": "Approval card",
  "description": "Human in the loop: the agent asks before it runs anything with side effects.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/approval-card.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/approval-card.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { CheckIcon, Loader2Icon, TerminalIcon, XIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, inkButton, paper } from \"./surfaces\";\n\nexport type ApprovalState = \"request\" | \"running\" | \"done\" | \"denied\";\n\nexport function ApprovalCard({\n  state,\n  command,\n  title,\n  subtitle,\n  onAllowOnce,\n  onAlwaysAllow,\n  onDeny,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"state\"\n  | \"command\"\n  | \"title\"\n  | \"subtitle\"\n  | \"onAllowOnce\"\n  | \"onAlwaysAllow\"\n  | \"onDeny\"\n> & {\n  state: ApprovalState;\n  command: string;\n  title: string;\n  subtitle: string;\n  onAllowOnce?: () => void;\n  onAlwaysAllow?: () => void;\n  onDeny?: () => void;\n}) {\n  return (\n    <div\n      data-slot=\"approval-card\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-sm flex-col gap-3.5 rounded-[20px] p-4\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className=\"flex items-center gap-3\">\n        <span className=\"bg-foreground/[0.05] text-foreground/45 flex size-9 shrink-0 items-center justify-center rounded-xl\">\n          <TerminalIcon className=\"size-4\" />\n        </span>\n        <div className=\"flex flex-col\">\n          <p className=\"text-[13.5px] font-medium\">{title}</p>\n          <p className=\"text-foreground/45 text-xs\">{subtitle}</p>\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          field,\n          \"text-foreground/70 rounded-xl px-3.5 py-2.5 font-mono text-xs\",\n        )}\n      >\n        {command}\n      </div>\n\n      <div className=\"flex h-8 items-center justify-end gap-2\">\n        {state === \"request\" ? (\n          <>\n            <button\n              type=\"button\"\n              onClick={onDeny}\n              className=\"text-foreground/55 hover:bg-foreground/[0.06] hover:text-foreground/90 h-8 rounded-full px-3.5 text-xs font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]\"\n            >\n              Deny\n            </button>\n            <button\n              type=\"button\"\n              onClick={onAlwaysAllow}\n              className=\"text-foreground/55 hover:bg-foreground/[0.06] hover:text-foreground/90 h-8 rounded-full px-3.5 text-xs font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]\"\n            >\n              Always allow\n            </button>\n            <button\n              type=\"button\"\n              onClick={onAllowOnce}\n              className={cn(\n                inkButton,\n                \"flex h-8 items-center rounded-full px-3.5 text-xs font-medium\",\n              )}\n            >\n              Allow once\n            </button>\n          </>\n        ) : (\n          <div\n            key={state}\n            className=\"fade-in animate-in text-foreground/55 flex items-center gap-2 text-xs duration-300\"\n          >\n            {state === \"running\" ? (\n              <>\n                <Loader2Icon className=\"text-foreground/45 size-3.5 animate-spin\" />\n                Approved, running\n              </>\n            ) : state === \"denied\" ? (\n              <>\n                <XIcon className=\"text-foreground/45 size-3.5\" />\n                Denied\n              </>\n            ) : (\n              <>\n                <CheckIcon className=\"size-3.5 text-emerald-500\" />\n                Finished with exit 0\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}