{
  "name": "health-checks",
  "type": "registry:ui",
  "title": "Health Checks",
  "description": "Endpoint probes with status, latency and history. A 200 that takes four seconds reads as degraded — a probe list that only reports the status code is why slow outages get noticed by customers first.",
  "category": "Operations",
  "dependencies": [
    "lucide-react@^1.39.0"
  ],
  "registryDependencies": [
    "badge",
    "lib-motion",
    "lib-styles",
    "lib-utils",
    "sparkline"
  ],
  "files": [
    {
      "path": "components/ui/health-checks.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { Check, TriangleAlert, X } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Sparkline } from '@/components/ui/sparkline'\nimport { enterFade } from '@/lib/motion'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * Endpoint probes: status, latency, and recent history.\n *\n * Latency carries a threshold so \"200 OK in 4 seconds\" reads as degraded rather\n * than healthy. A probe list that only reports the status code is why slow\n * outages get noticed by customers first.\n *\n * The sparkline is latency over recent probes, which turns \"is this getting\n * worse\" into something answerable at a glance — the single number cannot say\n * whether 400ms is the new normal or the start of something.\n */\nexport type HealthCheck = {\n  id: string\n  name: string\n  url?: string\n  status: 'healthy' | 'degraded' | 'down'\n  /** Milliseconds. */\n  latency?: number\n  /** Above this, a healthy response still reads as degraded. */\n  latencyThreshold?: number\n  code?: number\n  history?: number[]\n  region?: ReactNode\n}\n\nconst STATUS = {\n  healthy: { Icon: Check, tone: 'text-[var(--green-soft-foreground)]', color: 'green', label: 'Healthy' },\n  degraded: { Icon: TriangleAlert, tone: 'text-[var(--amber-soft-foreground)]', color: 'amber', label: 'Degraded' },\n  down: { Icon: X, tone: 'text-[var(--destructive-soft-foreground)]', color: 'destructive', label: 'Down' },\n} as const\n\n/** A slow success is not a success. */\nfunction effectiveStatus(check: HealthCheck) {\n  if (check.status === 'healthy' && check.latencyThreshold && check.latency) {\n    return check.latency > check.latencyThreshold ? 'degraded' : 'healthy'\n  }\n  return check.status\n}\n\nfunction HealthChecks({\n  checks,\n  className,\n  ...props\n}: ComponentProps<'div'> & { checks: HealthCheck[] }) {\n  return (\n    <div\n      data-slot=\"health-checks\"\n      className={cn(enterFade, surface, radius.surface, 'overflow-hidden', className)}\n      {...props}\n    >\n      <ul className=\"list-none divide-y divide-[var(--border)]\">\n        {checks.map((check) => {\n          const status = effectiveStatus(check)\n          const { Icon, tone, color, label } = STATUS[status]\n          const slow =\n            status === 'degraded' && check.status === 'healthy'\n\n          return (\n            <li key={check.id} className=\"flex flex-wrap items-center gap-x-3 gap-y-2 p-3\">\n              <Icon className={cn('size-4 shrink-0', tone)} aria-hidden=\"true\" />\n\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"flex items-center gap-2\">\n                  <span className=\"truncate text-sm font-medium\">{check.name}</span>\n                  {check.region}\n                </p>\n                {check.url && (\n                  <p className=\"text-muted-foreground truncate font-mono text-xs\">\n                    {check.url}\n                  </p>\n                )}\n              </div>\n\n              {check.history && check.history.length > 1 && (\n                <Sparkline\n                  values={check.history}\n                  color={\n                    status === 'healthy'\n                      ? 'var(--green)'\n                      : status === 'degraded'\n                        ? 'var(--amber)'\n                        : 'var(--destructive)'\n                  }\n                  className=\"h-6 w-20 shrink-0\"\n                />\n              )}\n\n              {check.latency !== undefined && (\n                <span\n                  className={cn(\n                    'min-w-16 shrink-0 text-end text-xs tabular-nums whitespace-nowrap',\n                    slow ? 'text-[var(--amber-soft-foreground)]' : 'text-muted-foreground',\n                  )}\n                >\n                  {check.latency} ms\n                </span>\n              )}\n\n              {check.code !== undefined && (\n                <code className=\"text-muted-foreground shrink-0 font-mono text-xs\">\n                  {check.code}\n                </code>\n              )}\n\n              <Badge size=\"sm\" color={color}>\n                {label}\n              </Badge>\n            </li>\n          )\n        })}\n      </ul>\n    </div>\n  )\n}\n\nexport { HealthChecks, effectiveStatus }\n"
    }
  ]
}