{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-monitoring",
  "title": "Status Monitoring",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/status-monitoring/StatusMonitoring.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { SectionCard } from '@/components/ui/section-card'\n\nexport type DayStatus = 'up' | 'degraded' | 'down' | 'maintenance' | 'none'\n\nexport type IncidentSeverity = 'minor' | 'major' | 'critical'\n\nexport interface ServiceStatus {\n  name: string\n  /** One entry per day, oldest first. Expected length: 90. */\n  days: DayStatus[]\n}\n\nexport interface MonitoringIncident {\n  id: string\n  date: Date\n  title: string\n  description: string\n  duration: string\n  severity: IncidentSeverity\n  resolved?: boolean\n}\n\nexport interface StatusMonitoringProps {\n  services?: ServiceStatus[]\n  incidents?: MonitoringIncident[]\n  className?: string\n}\n\nconst DAY_COUNT = 90\n\n// Deterministic stubs (no Math.random) so SSR and client markup match exactly.\nfunction buildDays(blips: Array<{ ago: number; length: number; status: DayStatus }> = []): DayStatus[] {\n  const days: DayStatus[] = Array.from({ length: DAY_COUNT }, () => 'up')\n  for (const blip of blips) {\n    for (let k = 0; k < blip.length; k++) {\n      const idx = DAY_COUNT - 1 - blip.ago - k\n      if (idx >= 0 && idx < DAY_COUNT) days[idx] = blip.status\n    }\n  }\n  return days\n}\n\nconst now = new Date()\nconst daysAgoDate = (d: number) => new Date(now.getTime() - d * 86_400_000)\n\nconst stubServices: ServiceStatus[] = [\n  {\n    name: 'API Gateway',\n    days: buildDays([\n      { ago: 34, length: 1, status: 'down' },\n      { ago: 33, length: 1, status: 'degraded' },\n    ]),\n  },\n  { name: 'Web application', days: buildDays() },\n  { name: 'Webhooks', days: buildDays([{ ago: 61, length: 1, status: 'degraded' }]) },\n]\n\nconst stubIncidents: MonitoringIncident[] = [\n  {\n    id: 'i1',\n    date: daysAgoDate(33),\n    title: 'Elevated error rates on API Gateway',\n    description: 'A bad deploy caused intermittent 502s for roughly forty minutes. Rolled back; error rates recovered.',\n    duration: 'Lasted 42 minutes',\n    severity: 'major',\n    resolved: true,\n  },\n  {\n    id: 'i2',\n    date: daysAgoDate(34),\n    title: 'API Gateway unavailable',\n    description: 'Provider network maintenance dropped traffic between 02:14 and 02:51 UTC.',\n    duration: 'Lasted 37 minutes',\n    severity: 'critical',\n    resolved: true,\n  },\n  {\n    id: 'i3',\n    date: daysAgoDate(61),\n    title: 'Delayed webhook deliveries',\n    description: 'A queue backlog delayed deliveries by up to six minutes. The backlog drained on its own.',\n    duration: 'Lasted 1 hour, 12 minutes',\n    severity: 'minor',\n    resolved: true,\n  },\n]\n\ntype OverallState = 'operational' | 'degraded' | 'outage'\n\nconst bannerMeta: Record<OverallState, { label: string; box: string; text: string; dot: string }> = {\n  operational: {\n    label: 'All systems operational',\n    box: 'border-success/25 bg-success/10',\n    text: 'text-success',\n    dot: 'bg-success',\n  },\n  degraded: {\n    label: 'Degraded performance',\n    box: 'border-warning/25 bg-warning/10',\n    text: 'text-warning',\n    dot: 'bg-warning',\n  },\n  outage: {\n    label: 'Partial outage',\n    box: 'border-destructive/25 bg-destructive/10',\n    text: 'text-destructive',\n    dot: 'bg-destructive',\n  },\n}\n\nconst dayClass: Record<DayStatus, string> = {\n  up: 'bg-success',\n  degraded: 'bg-warning',\n  down: 'bg-destructive',\n  maintenance: 'bg-info',\n  none: 'bg-muted',\n}\n\nconst dayLabel: Record<DayStatus, string> = {\n  up: 'Operational',\n  degraded: 'Degraded',\n  down: 'Outage',\n  maintenance: 'Maintenance',\n  none: 'No data',\n}\n\n// Built once per module load so 90 segments × N services never rebuild Date objects during render.\nconst dayStamps = Array.from({ length: DAY_COUNT }, (_, i) =>\n  daysAgoDate(DAY_COUNT - 1 - i).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }),\n)\n\nconst updatedStamp = now.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })\n\nfunction tooltipFor(days: DayStatus[], i: number): string {\n  return `${dayStamps[i]} · ${dayLabel[days[i]]}`\n}\n\nfunction uptimePct(days: DayStatus[]): string {\n  const counted = days.filter((d) => d !== 'none')\n  if (counted.length === 0) return '—'\n  const up = counted.filter((d) => d === 'up').length\n  return `${((up / counted.length) * 100).toFixed(2)}%`\n}\n\nfunction formatDay(d: Date): string {\n  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })\n}\n\nconst severityVariant: Record<IncidentSeverity, 'info' | 'warning' | 'destructive'> = {\n  minor: 'info',\n  major: 'warning',\n  critical: 'destructive',\n}\n\nexport function StatusMonitoring({ services, incidents, className }: StatusMonitoringProps) {\n  const list = services ?? stubServices\n  const incidentList = [...(incidents ?? stubIncidents)].sort((a, b) => b.date.getTime() - a.date.getTime())\n\n  const latest = list.map((s) => [...s.days].reverse().find((d) => d !== 'none'))\n  const overall: OverallState = latest.includes('down')\n    ? 'outage'\n    : latest.includes('degraded')\n      ? 'degraded'\n      : 'operational'\n  const banner = bannerMeta[overall]\n\n  return (\n    <div className={cn('space-y-4', className)} data-slot=\"status-monitoring\">\n      <div role=\"status\" className={cn('flex items-center gap-3 rounded-xl border px-4 py-3', banner.box)}>\n        <span className=\"relative flex size-2.5 shrink-0\">\n          <span className={cn('absolute inline-flex h-full w-full rounded-full opacity-60', banner.dot)} />\n          <span className={cn('relative inline-flex size-2.5 rounded-full', banner.dot)} />\n        </span>\n        <p className={cn('text-sm font-medium', banner.text)}>{banner.label}</p>\n        <span className=\"text-muted-foreground ml-auto text-xs whitespace-nowrap\">Updated {updatedStamp}</span>\n      </div>\n\n      <SectionCard\n        title=\"Service status\"\n        description=\"Daily availability over the last 90 days.\"\n        headerAction={\n          <ul className=\"text-muted-foreground hidden flex-wrap items-center gap-3 text-xs md:flex\">\n            {(Object.keys(dayLabel) as DayStatus[]).map((status) => (\n              <li key={status} className=\"flex shrink-0 items-center gap-1.5 whitespace-nowrap\">\n                <span className={cn('size-2 rounded-full', dayClass[status])} />\n                {dayLabel[status]}\n              </li>\n            ))}\n          </ul>\n        }\n      >\n        <ul className=\"divide-y\">\n          {list.map((s, si) => (\n            <li key={s.name} className={cn('space-y-2 py-4', si === 0 && 'pt-0')}>\n              <div className=\"flex flex-wrap items-baseline justify-between gap-4\">\n                <p className=\"text-sm font-medium\">{s.name}</p>\n                <p className=\"text-muted-foreground text-sm tabular-nums\">{uptimePct(s.days)}</p>\n              </div>\n              <div\n                role=\"img\"\n                aria-label={`${s.name} uptime ${uptimePct(s.days)} over the last 90 days`}\n                className=\"flex w-full gap-px overflow-hidden sm:gap-[2px]\"\n              >\n                {s.days.map((d, di) => (\n                  <span\n                    key={di}\n                    title={tooltipFor(s.days, di)}\n                    className={cn(\n                      'h-6 w-full min-w-px flex-1 rounded-sm transition-transform hover:scale-y-125',\n                      dayClass[d],\n                    )}\n                  />\n                ))}\n              </div>\n            </li>\n          ))}\n        </ul>\n        <p className=\"text-muted-foreground mt-4 flex justify-between text-xs\">\n          <span>90 days ago</span>\n          <span>Today</span>\n        </p>\n      </SectionCard>\n\n      <SectionCard title=\"Incident history\" description=\"Reported incidents over the same period.\">\n        {incidentList.length > 0 ? (\n          <ul className=\"divide-y\">\n            {incidentList.map((inc, ii) => (\n              <li key={inc.id} className={cn('py-4', ii === 0 && 'pt-0')}>\n                <p className=\"text-muted-foreground text-xs font-medium\">{formatDay(inc.date)}</p>\n                <div className=\"mt-1.5 flex flex-wrap items-center gap-2\">\n                  <Badge variant={inc.resolved ? 'success' : severityVariant[inc.severity]} className=\"capitalize\">\n                    {inc.resolved ? 'Resolved' : inc.severity}\n                  </Badge>\n                  <p className=\"text-sm font-medium\">{inc.title}</p>\n                  <span className=\"text-muted-foreground ml-auto text-xs whitespace-nowrap\">{inc.duration}</span>\n                </div>\n                <p className=\"text-muted-foreground mt-1 text-sm leading-relaxed\">{inc.description}</p>\n              </li>\n            ))}\n          </ul>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center px-6 py-10 text-center\">\n            <p className=\"text-sm font-medium\">No incidents reported</p>\n            <p className=\"text-muted-foreground mt-0.5 text-xs\">Every day in this window has been quiet.</p>\n          </div>\n        )}\n      </SectionCard>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/status-monitoring/StatusMonitoring.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/section-card.json"
  ],
  "description": "Uptime page. Banner derives All systems operational / Degraded performance / Partial outage from the newest day of each service. Per-service rows render a 90-segment day bar (success/warning/destructive/info/muted per status) with hover tooltips and a right-aligned uptime percentage, followed by an incident timeline with severity badges. Pass `services` (name + days array of up/degraded/down/maintenance/none) and `incidents` to replace the stubs.",
  "categories": [
    "devops",
    "dashboard",
    "analytics"
  ]
}