{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agent-status",
  "title": "AI Agent Status",
  "description": "Display current agent handling a request with status indicators, animated pulse for active states, and handoff visualization for multi-agent workflows.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/blocks/ai/ai-agent-status/components/elements/ai-agent-status.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  ArrowRight,\n  Bot,\n  Brain,\n  Check,\n  Clock,\n  Loader2,\n  Pause,\n} from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype AgentStatus =\n  | \"idle\"\n  | \"thinking\"\n  | \"acting\"\n  | \"waiting\"\n  | \"done\"\n  | \"handoff\";\n\ninterface AgentInfo {\n  name: string;\n  icon?: React.ReactNode;\n  description?: string;\n}\n\ninterface AiAgentStatusContextValue {\n  agent: AgentInfo;\n  status: AgentStatus;\n  handoffTo?: string;\n  variant: \"badge\" | \"card\";\n}\n\nconst AiAgentStatusContext =\n  React.createContext<AiAgentStatusContextValue | null>(null);\n\nfunction useAgentStatusContext() {\n  const context = React.useContext(AiAgentStatusContext);\n  if (!context) {\n    throw new Error(\n      \"AiAgentStatus components must be used within <AiAgentStatus>\",\n    );\n  }\n  return context;\n}\n\ninterface AiAgentStatusProps {\n  agent: AgentInfo;\n  status: AgentStatus;\n  handoffTo?: string;\n  variant?: \"badge\" | \"card\";\n  children?: React.ReactNode;\n  className?: string;\n}\n\nfunction AiAgentStatus({\n  agent,\n  status,\n  handoffTo,\n  variant = \"badge\",\n  children,\n  className,\n}: AiAgentStatusProps) {\n  const contextValue = React.useMemo(\n    () => ({ agent, status, handoffTo, variant }),\n    [agent, status, handoffTo, variant],\n  );\n\n  if (variant === \"badge\") {\n    return (\n      <AiAgentStatusContext.Provider value={contextValue}>\n        <AiAgentStatusBadge className={className}>\n          {children}\n        </AiAgentStatusBadge>\n      </AiAgentStatusContext.Provider>\n    );\n  }\n\n  return (\n    <AiAgentStatusContext.Provider value={contextValue}>\n      <AiAgentStatusCard className={className}>{children}</AiAgentStatusCard>\n    </AiAgentStatusContext.Provider>\n  );\n}\n\ninterface AiAgentStatusBadgeProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nfunction AiAgentStatusBadge({ children, className }: AiAgentStatusBadgeProps) {\n  const { agent, status, handoffTo } = useAgentStatusContext();\n\n  const statusConfig = React.useMemo(() => {\n    const configs: Record<\n      AgentStatus,\n      { icon: React.ReactNode; label: string; className: string }\n    > = {\n      idle: {\n        icon: <Clock className=\"size-3\" />,\n        label: \"Idle\",\n        className: \"bg-muted text-muted-foreground\",\n      },\n      thinking: {\n        icon: <Brain className=\"size-3 animate-pulse\" />,\n        label: \"Thinking\",\n        className:\n          \"bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300\",\n      },\n      acting: {\n        icon: <Loader2 className=\"size-3 animate-spin\" />,\n        label: \"Acting\",\n        className:\n          \"bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300\",\n      },\n      waiting: {\n        icon: <Pause className=\"size-3\" />,\n        label: \"Waiting\",\n        className:\n          \"bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300\",\n      },\n      done: {\n        icon: <Check className=\"size-3\" />,\n        label: \"Done\",\n        className:\n          \"bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300\",\n      },\n      handoff: {\n        icon: <ArrowRight className=\"size-3 animate-pulse\" />,\n        label: \"Handing off\",\n        className:\n          \"bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300\",\n      },\n    };\n    return configs[status];\n  }, [status]);\n\n  const isActive = status === \"thinking\" || status === \"acting\";\n\n  return (\n    <div\n      data-slot=\"ai-agent-status\"\n      data-status={status}\n      data-variant=\"badge\"\n      className={cn(\n        \"inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm\",\n        isActive && \"ring-2 ring-offset-2 ring-offset-background\",\n        status === \"thinking\" && \"ring-purple-500/50\",\n        status === \"acting\" && \"ring-blue-500/50\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center gap-1.5\">\n        <span className=\"relative flex size-5 shrink-0 items-center justify-center\">\n          {agent.icon ?? <Bot className=\"size-4\" />}\n          {isActive && (\n            <span className=\"absolute -right-0.5 -top-0.5 size-2 rounded-full bg-green-500 animate-pulse\" />\n          )}\n        </span>\n        <span className=\"font-medium\">{agent.name}</span>\n      </div>\n      <span\n        className={cn(\n          \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium\",\n          statusConfig.className,\n        )}\n      >\n        {statusConfig.icon}\n        {statusConfig.label}\n      </span>\n      {status === \"handoff\" && handoffTo && (\n        <span className=\"inline-flex items-center gap-1 text-xs text-muted-foreground\">\n          <ArrowRight className=\"size-3\" />\n          <span>{handoffTo}</span>\n        </span>\n      )}\n      {children}\n    </div>\n  );\n}\n\ninterface AiAgentStatusCardProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nfunction AiAgentStatusCard({ children, className }: AiAgentStatusCardProps) {\n  const { agent, status, handoffTo } = useAgentStatusContext();\n\n  const statusConfig = React.useMemo(() => {\n    const configs: Record<\n      AgentStatus,\n      {\n        icon: React.ReactNode;\n        label: string;\n        className: string;\n        borderClassName: string;\n      }\n    > = {\n      idle: {\n        icon: <Clock className=\"size-4\" />,\n        label: \"Idle\",\n        className: \"bg-muted text-muted-foreground\",\n        borderClassName: \"border-border\",\n      },\n      thinking: {\n        icon: <Brain className=\"size-4 animate-pulse\" />,\n        label: \"Thinking\",\n        className:\n          \"bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300\",\n        borderClassName: \"border-purple-300 dark:border-purple-800\",\n      },\n      acting: {\n        icon: <Loader2 className=\"size-4 animate-spin\" />,\n        label: \"Acting\",\n        className:\n          \"bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300\",\n        borderClassName: \"border-blue-300 dark:border-blue-800\",\n      },\n      waiting: {\n        icon: <Pause className=\"size-4\" />,\n        label: \"Waiting\",\n        className:\n          \"bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300\",\n        borderClassName: \"border-amber-300 dark:border-amber-800\",\n      },\n      done: {\n        icon: <Check className=\"size-4\" />,\n        label: \"Done\",\n        className:\n          \"bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300\",\n        borderClassName: \"border-green-300 dark:border-green-800\",\n      },\n      handoff: {\n        icon: <ArrowRight className=\"size-4 animate-pulse\" />,\n        label: \"Handing off\",\n        className:\n          \"bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300\",\n        borderClassName: \"border-orange-300 dark:border-orange-800\",\n      },\n    };\n    return configs[status];\n  }, [status]);\n\n  const isActive = status === \"thinking\" || status === \"acting\";\n\n  return (\n    <div\n      data-slot=\"ai-agent-status\"\n      data-status={status}\n      data-variant=\"card\"\n      className={cn(\n        \"rounded-lg border bg-card p-4 text-card-foreground transition-colors\",\n        statusConfig.borderClassName,\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-3\">\n        <div className=\"relative flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted\">\n          {agent.icon ?? <Bot className=\"size-5 text-muted-foreground\" />}\n          {isActive && (\n            <span className=\"absolute -right-1 -top-1 size-3 rounded-full border-2 border-background bg-green-500 animate-pulse\" />\n          )}\n        </div>\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"flex items-center gap-2\">\n            <h3 className=\"font-semibold text-sm\">{agent.name}</h3>\n            <span\n              className={cn(\n                \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium\",\n                statusConfig.className,\n              )}\n            >\n              {statusConfig.icon}\n              {statusConfig.label}\n            </span>\n          </div>\n          {agent.description && (\n            <p className=\"mt-1 text-xs text-muted-foreground line-clamp-2\">\n              {agent.description}\n            </p>\n          )}\n          {status === \"handoff\" && handoffTo && (\n            <div className=\"mt-2 flex items-center gap-2 text-xs text-muted-foreground\">\n              <ArrowRight className=\"size-3\" />\n              <span>\n                Transferring to <span className=\"font-medium\">{handoffTo}</span>\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n      {children && <div className=\"mt-3 border-t pt-3\">{children}</div>}\n    </div>\n  );\n}\n\ninterface AiAgentStatusActionsProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nfunction AiAgentStatusActions({\n  children,\n  className,\n}: AiAgentStatusActionsProps) {\n  return (\n    <div\n      data-slot=\"ai-agent-status-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport {\n  AiAgentStatus,\n  AiAgentStatusBadge,\n  AiAgentStatusCard,\n  AiAgentStatusActions,\n};\nexport type { AiAgentStatusProps, AgentInfo, AgentStatus };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Compound component for agent status display. Variants: badge (compact) and card (detailed). States: idle, thinking, acting, waiting, done, handoff. Shows animated pulse when active and handoff indicator when transferring.",
  "categories": [
    "ai"
  ],
  "type": "registry:ui"
}