arcadia-admin/app/routes/monitoring.tsx

import { useCallback, useEffect, useMemo, useState } from "react"
import { Link } from "react-router"
import {
  Activity,
  AlertTriangle,
  Cpu,
  Database,
  Globe,
  HardDrive,
  Loader2,
  RefreshCw,
  RotateCw,
  Server,
  Users,
  Zap,
} from "lucide-react"

import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-client"
import { AlertBanner } from "@crema/feedback-ui"
import {
  BarChart,
  Donut,
  Heatmap,
  LineChart,
  Sparkline,
  type ChartDatum,
  type SeriesPoint,
} from "@crema/chart-ui"
import { KpiTile, formatCompact, formatPercent } from "@crema/dashboard-ui"
import {
  ComponentRow,
  IncidentTimeline,
  OverallStatus,
  type ComponentState,
  type StatusComponent,
  type StatusIncident,
} from "@crema/status-ui"
import {
  ChoroplethMap,
  WorldMapSvg,
} from "@crema/map-ui"
import { formatBytes } from "@crema/file-ui"

import { AppShell } from "~/components/layout/app-shell"
import { Badge } from "~/components/ui/badge"
import { Button } from "~/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs"
import {
  getActiveSessions,
  getAuditStats,
  getInfrastructureSummary,
  getJobStats,
  getRateLimits,
  getRecentJobs,
  getSpaces,
  listDroplets,
  retryJob,
  type ActiveSession,
  type AuditStats,
  type Droplet,
  type InfrastructureSummary,
  type JobStats,
  type ObanJob,
  type RateLimit,
  type Space,
} from "~/lib/arcadia/monitoring"
import { pageTitle } from "~/lib/page-meta"
import { useSession } from "~/lib/session"
import { useRegisterAdminContext } from "~/lib/admin-context"

export const meta = () => pageTitle("Monitoring")

interface DashboardData {
  jobStats: JobStats | null
  recentJobs: ObanJob[]
  sessions: { sessions: ActiveSession[]; count: number } | null
  rateLimits: RateLimit[]
  infraSummary: InfrastructureSummary | null
  spaces: Space[]
  droplets: Droplet[]
  auditStats: AuditStats | null
}

const EMPTY: DashboardData = {
  jobStats: null,
  recentJobs: [],
  sessions: null,
  rateLimits: [],
  infraSummary: null,
  spaces: [],
  droplets: [],
  auditStats: null,
}

export default function MonitoringRoute() {
  const session = useSession()
  const arcadia = useArcadiaClient()

  const [data, setData] = useState<DashboardData>(EMPTY)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [autoRefresh, setAutoRefresh] = useState(true)

  const refresh = useCallback(async () => {
    setError(null)
    setLoading(true)
    try {
      const [
        jobStats,
        recentJobs,
        sessions,
        rateLimits,
        infraSummary,
        spaces,
        droplets,
        auditStats,
      ] = await Promise.all([
        getJobStats(arcadia).catch(() => null),
        getRecentJobs(arcadia, { limit: 50 }).catch(() => []),
        getActiveSessions(arcadia).catch(() => null),
        getRateLimits(arcadia).catch(() => []),
        getInfrastructureSummary(arcadia),
        getSpaces(arcadia),
        listDroplets(arcadia),
        getAuditStats(arcadia, {
          from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
        }).catch(() => null),
      ])
      setData({
        jobStats,
        recentJobs,
        sessions,
        rateLimits,
        infraSummary,
        spaces,
        droplets,
        auditStats,
      })
    } catch (err) {
      setError(err instanceof ArcadiaError ? err.message : "Failed to load monitoring data.")
    } finally {
      setLoading(false)
    }
  }, [arcadia])

  useEffect(() => {
    if (session) refresh()
  }, [session, refresh])

  // Auto-refresh every 30s for the live feel.
  useEffect(() => {
    if (!session || !autoRefresh) return
    const t = setInterval(refresh, 30000)
    return () => clearInterval(t)
  }, [session, autoRefresh, refresh])

  const components = useMemo(() => buildStatusComponents(data), [data])

  const summary = useMemo(
    () => ({
      jobs: data.jobStats?.counts ?? {},
      jobs_executing: data.jobStats?.counts?.executing ?? 0,
      jobs_retryable: data.jobStats?.counts?.retryable ?? 0,
      sessions_24h: data.sessions?.count ?? 0,
      droplets: data.droplets.length,
      spaces: data.spaces.length,
      audit_total_7d: data.auditStats?.total ?? 0,
    }),
    [data],
  )
  useRegisterAdminContext("monitoring", summary)

  if (!session) {
    return (
      <AppShell title="Monitoring">
        <div className="p-8">
          <Card className="max-w-md">
            <CardHeader>
              <CardTitle>Sign in required</CardTitle>
              <CardDescription>Monitoring requires an admin session.</CardDescription>
            </CardHeader>
            <CardContent>
              <Button asChild>
                <Link to="/login?next=/monitoring">Sign in</Link>
              </Button>
            </CardContent>
          </Card>
        </div>
      </AppShell>
    )
  }

  return (
    <AppShell title="Monitoring">
      <div className="flex flex-col gap-4 p-6">
        <header className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">Server stats &amp; health</h1>
            <p className="text-sm text-muted-foreground">
              Live view of background jobs, active sessions, infrastructure, and audit
              activity. Refreshes every 30s.
            </p>
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant={autoRefresh ? "outline" : "ghost"}
              size="sm"
              onClick={() => setAutoRefresh((v) => !v)}
              data-action="monitoring-auto-refresh"
            >
              <RotateCw className={`size-4 ${autoRefresh ? "animate-pulse" : ""}`} />
              Auto-refresh {autoRefresh ? "on" : "off"}
            </Button>
            <Button
              size="sm"
              onClick={refresh}
              disabled={loading}
              data-action="monitoring-refresh"
            >
              <RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
              Refresh
            </Button>
          </div>
        </header>

        {error ? (
          <AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
            {error}
          </AlertBanner>
        ) : null}

        {/* Service status board */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle>Service health</CardTitle>
              <CardDescription>Derived from live signals on each subsystem.</CardDescription>
            </div>
            <OverallStatus components={components} />
          </CardHeader>
          <CardContent className="flex flex-col gap-1">
            {components.map((c) => (
              <ComponentRow key={c.id} component={c} showUptime={false} />
            ))}
          </CardContent>
        </Card>

        {/* KPI tiles */}
        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
          <KpiTile
            label="Active sessions (24h)"
            value={formatCompact(data.sessions?.count ?? 0)}
            icon={<Users className="size-4" />}
          />
          <KpiTile
            label="Jobs executing"
            value={String(data.jobStats?.counts?.executing ?? 0)}
            icon={<Zap className="size-4" />}
            tone={
              (data.jobStats?.counts?.executing ?? 0) > 0 ? "info" : "neutral"
            }
          />
          <KpiTile
            label="Retryable jobs"
            value={String(data.jobStats?.counts?.retryable ?? 0)}
            icon={<AlertTriangle className="size-4" />}
            tone={
              (data.jobStats?.counts?.retryable ?? 0) > 0 ? "warning" : "neutral"
            }
          />
          <KpiTile
            label="Audit events (7d)"
            value={formatCompact(data.auditStats?.total ?? 0)}
            icon={<Activity className="size-4" />}
          />
        </div>

        <Tabs defaultValue="jobs">
          <TabsList>
            <TabsTrigger value="jobs" data-action="monitoring-tab-jobs">
              Background jobs
            </TabsTrigger>
            <TabsTrigger value="sessions" data-action="monitoring-tab-sessions">
              Sessions
            </TabsTrigger>
            <TabsTrigger value="audit" data-action="monitoring-tab-audit">
              Audit activity
            </TabsTrigger>
            <TabsTrigger value="infra" data-action="monitoring-tab-infra">
              Infrastructure
            </TabsTrigger>
            <TabsTrigger value="rate-limits" data-action="monitoring-tab-rate-limits">
              Rate limits
            </TabsTrigger>
          </TabsList>

          <TabsContent value="jobs" className="pt-4">
            <JobsPanel
              stats={data.jobStats}
              recent={data.recentJobs}
              onRetry={async (id) => {
                try {
                  await retryJob(arcadia, id)
                  await refresh()
                } catch (err) {
                  setError(
                    err instanceof ArcadiaError ? err.message : "Retry failed.",
                  )
                }
              }}
            />
          </TabsContent>

          <TabsContent value="sessions" className="pt-4">
            <SessionsPanel sessions={data.sessions} />
          </TabsContent>

          <TabsContent value="audit" className="pt-4">
            <AuditPanel stats={data.auditStats} />
          </TabsContent>

          <TabsContent value="infra" className="pt-4">
            <InfraPanel
              summary={data.infraSummary}
              spaces={data.spaces}
              droplets={data.droplets}
            />
          </TabsContent>

          <TabsContent value="rate-limits" className="pt-4">
            <RateLimitsPanel limits={data.rateLimits} />
          </TabsContent>
        </Tabs>
      </div>
    </AppShell>
  )
}

// Synthesize a status board from the live signals we have.
function buildStatusComponents(d: DashboardData): StatusComponent[] {
  const apiOk = d.rateLimits.length > 0
  const dbOk = d.sessions !== null
  const workersState: ComponentState = (() => {
    if (!d.jobStats) return "partial-outage"
    const r = d.jobStats.counts.retryable ?? 0
    const x = d.jobStats.counts.discarded ?? 0
    if (x > 100) return "major-outage"
    if (r > 50 || x > 0) return "degraded"
    return "operational"
  })()
  const storageState: ComponentState =
    d.spaces.length > 0 || d.infraSummary ? "operational" : "partial-outage"

  return [
    {
      id: "api",
      name: "API",
      description: "/api/v1 — auth, REST endpoints",
      state: apiOk ? "operational" : "partial-outage",
    },
    {
      id: "db",
      name: "Database",
      description: "Postgres — sessions, audit log",
      state: dbOk ? "operational" : "partial-outage",
    },
    {
      id: "workers",
      name: "Background workers",
      description: "Oban — webhook delivery, scheduled tasks",
      state: workersState,
    },
    {
      id: "storage",
      name: "Storage",
      description: "DigitalOcean Spaces / S3-compatible object storage",
      state: storageState,
    },
  ]
}

// --- Jobs panel --------------------------------------------------------

function JobsPanel({
  stats,
  recent,
  onRetry,
}: {
  stats: JobStats | null
  recent: ObanJob[]
  onRetry: (id: number) => Promise<void>
}) {
  if (!stats) {
    return <PanelStub icon={<Server className="size-5" />} text="No job stats available." />
  }

  const stateData: ChartDatum[] = (Object.entries(stats.counts) as [string, number][])
    .filter(([, n]) => n > 0)
    .map(([state, n]) => ({ label: state, value: n, color: jobStateColor(state) }))

  const queueData: ChartDatum[] = stats.queues.map((q) => {
    const totals = stats.by_queue[q] ?? {}
    const sum = Object.values(totals).reduce<number>((a, n) => a + (n ?? 0), 0)
    return { label: q, value: sum }
  })

  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-1 gap-3 lg:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Jobs by state</CardTitle>
          </CardHeader>
          <CardContent className="flex items-center justify-center">
            {stateData.length === 0 ? (
              <p className="py-6 text-sm text-muted-foreground">No active jobs.</p>
            ) : (
              <Donut data={stateData} size={180} thickness={28} />
            )}
            <ul className="ml-4 flex flex-col gap-1 text-xs">
              {stateData.map((d) => (
                <li key={d.label} className="flex items-center gap-2">
                  <span
                    className="size-2.5 rounded-full"
                    style={{ background: d.color }}
                    aria-hidden
                  />
                  <span className="font-mono">{d.label}</span>
                  <span className="ml-auto text-muted-foreground">{d.value}</span>
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>

        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="text-base">Active jobs by queue</CardTitle>
          </CardHeader>
          <CardContent>
            {queueData.length === 0 ? (
              <p className="py-6 text-center text-sm text-muted-foreground">
                No queued or executing jobs.
              </p>
            ) : (
              <BarChart data={queueData} width={520} height={180} />
            )}
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Recent jobs</CardTitle>
          <CardDescription>Latest 50 — newest first.</CardDescription>
        </CardHeader>
        <CardContent className="p-0">
          {recent.length === 0 ? (
            <p className="py-6 text-center text-sm text-muted-foreground">No recent jobs.</p>
          ) : (
            <ul className="divide-y border-y">
              {recent.map((j) => (
                <li key={j.id} className="flex items-center justify-between gap-3 px-3 py-2">
                  <div className="flex flex-col gap-0.5">
                    <span className="flex items-center gap-2 text-sm">
                      <Badge variant={jobStateVariant(j.state)}>{j.state}</Badge>
                      <code className="font-mono text-xs">{j.worker}</code>
                      <span className="text-xs text-muted-foreground">queue: {j.queue}</span>
                    </span>
                    <span className="text-[11px] text-muted-foreground">
                      attempt {j.attempt}/{j.max_attempts} · inserted{" "}
                      {new Date(j.inserted_at).toLocaleString()}
                      {j.completed_at
                        ? ` · completed ${new Date(j.completed_at).toLocaleString()}`
                        : ""}
                    </span>
                    {j.errors && j.errors.length > 0 ? (
                      <span className="text-xs text-destructive">
                        {j.errors[j.errors.length - 1]?.error ?? "(error)"}
                      </span>
                    ) : null}
                  </div>
                  {j.state === "retryable" || j.state === "discarded" ? (
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => onRetry(j.id)}
                      data-action={`monitoring-job-${j.id}-retry`}
                    >
                      <RotateCw className="size-3.5" />
                      Retry
                    </Button>
                  ) : null}
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

// --- Sessions panel ----------------------------------------------------

function SessionsPanel({
  sessions,
}: {
  sessions: { sessions: ActiveSession[]; count: number } | null
}) {
  if (!sessions) {
    return <PanelStub icon={<Users className="size-5" />} text="No session data available." />
  }

  // Bucket sign-ins by hour for a 24h sparkline.
  const hourly = useMemo(() => {
    const now = Date.now()
    const buckets = Array.from({ length: 24 }, (_, i) => ({
      x: i,
      y: 0,
    }))
    for (const s of sessions.sessions) {
      const t = new Date(s.last_sign_in_at).getTime()
      const ago = (now - t) / (60 * 60 * 1000)
      const idx = 23 - Math.floor(ago)
      if (idx >= 0 && idx < 24) buckets[idx].y++
    }
    return buckets
  }, [sessions])

  return (
    <div className="flex flex-col gap-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle className="text-base">Sign-ins over the last 24h</CardTitle>
            <CardDescription>One bar per hour, latest on the right.</CardDescription>
          </div>
          <Sparkline data={hourly} width={240} height={48} stroke="var(--primary)" />
        </CardHeader>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">{sessions.count} recent sessions</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          {sessions.sessions.length === 0 ? (
            <p className="py-6 text-center text-sm text-muted-foreground">
              No sign-ins in the last 24 hours.
            </p>
          ) : (
            <ul className="divide-y border-y">
              {sessions.sessions.map((s) => (
                <li
                  key={s.user_id}
                  className="flex items-center justify-between gap-3 px-3 py-2"
                >
                  <div className="flex flex-col gap-0.5">
                    <span className="text-sm font-medium">{s.email}</span>
                    <span className="text-xs text-muted-foreground">
                      {s.first_name || s.last_name
                        ? `${s.first_name ?? ""} ${s.last_name ?? ""}`.trim() + " · "
                        : ""}
                      {s.user_type ?? "user"} · status: {s.status}
                      {s.two_factor_enabled ? " · 2FA" : ""}
                    </span>
                  </div>
                  <span className="text-xs text-muted-foreground">
                    {new Date(s.last_sign_in_at).toLocaleString()}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

// --- Audit panel -------------------------------------------------------

function AuditPanel({ stats }: { stats: AuditStats | null }) {
  if (!stats) {
    return <PanelStub icon={<Activity className="size-5" />} text="No audit stats available." />
  }

  const bySeverity: ChartDatum[] = Object.entries(stats.by_severity ?? {}).map(
    ([k, v]) => ({ label: k, value: v, color: severityColor(k) }),
  )
  const byResource: ChartDatum[] = Object.entries(stats.by_resource_type ?? {})
    .sort((a, b) => b[1] - a[1])
    .slice(0, 10)
    .map(([k, v]) => ({ label: k, value: v }))

  // Time series — only render if backend supplied it.
  const series: SeriesPoint[] | null = stats.over_time
    ? stats.over_time.map((p, i) => ({ x: i, y: p.total }))
    : null

  return (
    <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Events by severity (7d)</CardTitle>
        </CardHeader>
        <CardContent>
          {bySeverity.length === 0 ? (
            <p className="py-6 text-center text-sm text-muted-foreground">No events.</p>
          ) : (
            <BarChart data={bySeverity} width={500} height={180} />
          )}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Top resource types</CardTitle>
        </CardHeader>
        <CardContent>
          {byResource.length === 0 ? (
            <p className="py-6 text-center text-sm text-muted-foreground">No events.</p>
          ) : (
            <BarChart data={byResource} width={500} height={Math.max(180, byResource.length * 22)} />
          )}
        </CardContent>
      </Card>

      {series ? (
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="text-base">Events over time</CardTitle>
          </CardHeader>
          <CardContent>
            <LineChart data={series} width={900} height={200} />
          </CardContent>
        </Card>
      ) : null}
    </div>
  )
}

// --- Infrastructure panel ----------------------------------------------

function InfraPanel({
  summary,
  spaces,
  droplets,
}: {
  summary: InfrastructureSummary | null
  spaces: Space[]
  droplets: Droplet[]
}) {
  const dropletsByRegion = useMemo(() => {
    const out: Record<string, number> = {}
    for (const d of droplets) {
      const r =
        typeof d.region === "string"
          ? d.region
          : d.region?.slug ?? d.region?.name ?? "unknown"
      out[r] = (out[r] ?? 0) + 1
    }
    return out
  }, [droplets])

  if (!summary && spaces.length === 0 && droplets.length === 0) {
    return (
      <PanelStub
        icon={<Globe className="size-5" />}
        text="No infrastructure connected. Wire a DigitalOcean token in arcadia's .env to see this section populate."
      />
    )
  }

  return (
    <div className="flex flex-col gap-4">
      {summary ? (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">DigitalOcean summary</CardTitle>
          </CardHeader>
          <CardContent>
            <pre className="overflow-x-auto rounded-md border bg-muted/50 p-3 text-xs">
              {JSON.stringify(summary, null, 2)}
            </pre>
          </CardContent>
        </Card>
      ) : null}

      <div className="grid grid-cols-1 gap-3 lg:grid-cols-3">
        <KpiTile
          label="Droplets"
          value={String(droplets.length)}
          icon={<Server className="size-4" />}
        />
        <KpiTile
          label="Spaces"
          value={String(spaces.length)}
          icon={<HardDrive className="size-4" />}
        />
        <KpiTile
          label="Regions in use"
          value={String(Object.keys(dropletsByRegion).length)}
          icon={<Globe className="size-4" />}
        />
      </div>

      {droplets.length > 0 ? (
        <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Droplet regions</CardTitle>
              <CardDescription>Coloured continents indicate any droplets in that hemisphere.</CardDescription>
            </CardHeader>
            <CardContent>
              <WorldMapSvg
                regionColors={regionColorsFor(dropletsByRegion)}
                className="w-full"
              />
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-base">Droplets ({droplets.length})</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <ul className="divide-y border-y">
                {droplets.slice(0, 20).map((d) => (
                  <li
                    key={String(d.id)}
                    className="flex items-center justify-between gap-3 px-3 py-2"
                  >
                    <div className="flex flex-col gap-0.5">
                      <span className="flex items-center gap-2 text-sm font-medium">
                        <Cpu className="size-3.5 text-muted-foreground" />
                        {d.name}
                      </span>
                      <span className="text-xs text-muted-foreground">
                        {typeof d.region === "string"
                          ? d.region
                          : d.region?.slug ?? "—"}
                        {d.size_slug ? ` · ${d.size_slug}` : ""}
                        {d.vcpus ? ` · ${d.vcpus} vCPU` : ""}
                        {d.memory ? ` · ${formatBytes(d.memory * 1024 * 1024)}` : ""}
                      </span>
                    </div>
                    <Badge
                      variant={d.status === "active" ? "default" : "secondary"}
                    >
                      {d.status}
                    </Badge>
                  </li>
                ))}
                {droplets.length > 20 ? (
                  <li className="px-3 py-2 text-center text-xs text-muted-foreground">
                    + {droplets.length - 20} more
                  </li>
                ) : null}
              </ul>
            </CardContent>
          </Card>
        </div>
      ) : null}

      {spaces.length > 0 ? (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Spaces ({spaces.length})</CardTitle>
          </CardHeader>
          <CardContent>
            <pre className="overflow-x-auto rounded-md border bg-muted/50 p-3 text-xs">
              {JSON.stringify(spaces, null, 2)}
            </pre>
          </CardContent>
        </Card>
      ) : null}
    </div>
  )
}

function regionColorsFor(byRegion: Record<string, number>): Record<string, string> {
  // Best-effort mapping from DO region slugs to continent IDs the WorldMapSvg knows.
  // The lib exposes regions like "north-america", "europe", "asia", etc.
  const colors: Record<string, string> = {}
  const continentOf = (r: string): string | null => {
    const lc = r.toLowerCase()
    if (/^(nyc|sfo|tor|ams_tor)/.test(lc)) return "north-america"
    if (/^(lon|ams|fra)/.test(lc)) return "europe"
    if (/^(blr|sgp)/.test(lc)) return "asia"
    if (/^(syd)/.test(lc)) return "oceania"
    return null
  }
  for (const r of Object.keys(byRegion)) {
    const c = continentOf(r)
    if (c) colors[c] = "var(--primary)"
  }
  return colors
}

// --- Rate limits panel -------------------------------------------------

function RateLimitsPanel({ limits }: { limits: RateLimit[] }) {
  if (limits.length === 0) {
    return (
      <PanelStub
        icon={<Database className="size-5" />}
        text="No rate-limit configuration available."
      />
    )
  }
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Configured rate limits</CardTitle>
        <CardDescription>
          The maximum requests allowed per window for each authenticated bucket.
        </CardDescription>
      </CardHeader>
      <CardContent className="p-0">
        <ul className="divide-y border-y">
          {limits.map((l) => (
            <li key={l.type} className="flex items-center justify-between gap-3 px-3 py-2">
              <div className="flex flex-col">
                <span className="text-sm font-medium capitalize">{l.type}</span>
                <span className="text-xs text-muted-foreground">
                  Window: {l.window_seconds}s
                </span>
              </div>
              <span className="font-mono text-sm">
                {l.max_requests.toLocaleString()} req
              </span>
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  )
}

// --- helpers ----------------------------------------------------------

function PanelStub({ icon, text }: { icon: React.ReactNode; text: string }) {
  return (
    <Card>
      <CardContent className="flex items-center gap-3 py-8 text-sm text-muted-foreground">
        {icon}
        {text}
      </CardContent>
    </Card>
  )
}

function jobStateColor(state: string): string {
  switch (state) {
    case "executing":
      return "#3b82f6"
    case "available":
    case "scheduled":
      return "#a3a3a3"
    case "retryable":
      return "#f59e0b"
    case "discarded":
      return "#ef4444"
    case "cancelled":
      return "#737373"
    case "completed":
      return "#10b981"
    default:
      return "#9ca3af"
  }
}

function jobStateVariant(
  state: string,
): "default" | "secondary" | "destructive" | "outline" {
  if (state === "executing" || state === "completed") return "default"
  if (state === "discarded") return "destructive"
  if (state === "retryable" || state === "scheduled") return "secondary"
  return "outline"
}

function severityColor(s: string): string {
  if (s === "critical" || s === "error") return "#ef4444"
  if (s === "warning") return "#f59e0b"
  return "#94a3b8"
}