{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "runtime-health-indicator",
  "title": "RuntimeHealthIndicator",
  "description": "A visual indicator for kernel connection status. Shows idle, busy, connecting, or disconnected states with color-coded dots. Can display kernel name and optionally function as a button.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/cell/RuntimeHealthIndicator.tsx",
      "content": "import { Circle, Terminal } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type RuntimeStatus = \"idle\" | \"busy\" | \"disconnected\" | \"connecting\";\n\ninterface RuntimeHealthIndicatorProps {\n  status: RuntimeStatus;\n  kernelName?: string;\n  onClick?: () => void;\n  showStatus?: boolean;\n  className?: string;\n}\n\nexport function getStatusColor(status: RuntimeStatus): string {\n  switch (status) {\n    case \"idle\":\n      return \"text-green-500\";\n    case \"busy\":\n      return \"text-amber-500\";\n    case \"connecting\":\n      return \"text-blue-500\";\n    default:\n      return \"text-red-500\";\n  }\n}\n\nexport function getStatusText(status: RuntimeStatus): string {\n  switch (status) {\n    case \"idle\":\n      return \"Connected\";\n    case \"busy\":\n      return \"Busy\";\n    case \"connecting\":\n      return \"Connecting...\";\n    default:\n      return \"Disconnected\";\n  }\n}\n\nexport function getStatusTextColor(status: RuntimeStatus): string {\n  switch (status) {\n    case \"idle\":\n      return \"text-green-600\";\n    case \"busy\":\n      return \"text-amber-600\";\n    case \"connecting\":\n      return \"text-blue-600\";\n    default:\n      return \"text-red-600\";\n  }\n}\n\nexport const RuntimeHealthIndicator: React.FC<RuntimeHealthIndicatorProps> = ({\n  status,\n  kernelName,\n  onClick,\n  showStatus = false,\n  className,\n}) => {\n  const content = (\n    <>\n      {kernelName && (\n        <>\n          <Terminal className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n          <span className=\"hidden text-xs sm:block sm:text-sm\">\n            {kernelName}\n          </span>\n        </>\n      )}\n      <Circle className={cn(\"size-2 fill-current\", getStatusColor(status))} />\n      {showStatus && (\n        <span className={cn(\"text-xs\", getStatusTextColor(status))}>\n          {getStatusText(status)}\n        </span>\n      )}\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"runtime-health-indicator\"\n        onClick={onClick}\n        className={cn(\n          \"flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1 text-sm transition-colors hover:bg-accent hover:text-accent-foreground sm:gap-2\",\n          className,\n        )}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"runtime-health-indicator\"\n      className={cn(\"flex items-center gap-1 sm:gap-2\", className)}\n    >\n      {content}\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/cell/RuntimeHealthIndicator.tsx"
    }
  ],
  "type": "registry:component"
}