Diagnostics Panel

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface DiagnosticMetric {
7  label: string;
8  status?: "ok" | "warning" | "critical";
9  value: number;
10}
11 
12interface DiagnosticsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
13  metrics: DiagnosticMetric[];
14  status?: "online" | "offline" | "degraded";
15  title?: string;
16}
17 
18const statusDot: Record<string, string> = {
19  degraded: "bg-amber-500 shadow-[0_0_6px_rgba(245,158,11,0.6)]",
20  offline: "bg-red-500 shadow-[0_0_6px_rgba(239,68,68,0.6)]",
21  online: "bg-green-500 shadow-[0_0_6px_rgba(34,197,94,0.6)]",
22};
23 
24const statusLabel: Record<string, string> = {
25  degraded: "text-amber-500",
26  offline: "text-red-500",
27  online: "text-green-500",
28};
29 
30const metricStatusColor: Record<string, string> = {
31  critical: "text-red-500",
32  ok: "text-green-500",
33  warning: "text-amber-500",
34};
35 
36const metricBarColor: Record<string, string> = {
37  critical: "bg-red-500",
38  ok: "bg-green-500",
39  warning: "bg-amber-500",
40};
41 
42const metricBarGlow: Record<string, string> = {
43  critical: "shadow-[0_0_6px_rgba(239,68,68,0.4)]",
44  ok: "shadow-[0_0_6px_rgba(34,197,94,0.4)]",
45  warning: "shadow-[0_0_6px_rgba(245,158,11,0.4)]",
46};
47 
48function getMetricStatus(
49  value: number,
50  explicit?: "ok" | "warning" | "critical"
51) {
52  if (explicit) {
53    return explicit;
54  }
55  if (value >= 80) {
56    return "critical";
57  }
58  if (value >= 60) {
59    return "warning";
60  }
61  return "ok";
62}
63 
64export function DiagnosticsPanel({
65  metrics,
66  title = "DIAGNOSTICS",
67  status = "online",
68  className,
69  ...props
70}: DiagnosticsPanelProps) {
71  const avgValue = metrics.length
72    ? Math.round(metrics.reduce((sum, m) => sum + m.value, 0) / metrics.length)
73    : 0;
74 
75  // Staggered bar fill animation
76  const [filledBars, setFilledBars] = React.useState<boolean[]>(
77    metrics.map(() => false)
78  );
79 
80  React.useEffect(() => {
81    const timers: ReturnType<typeof setTimeout>[] = [];
82    metrics.forEach((_, i) => {
83      timers.push(
84        setTimeout(
85          () => {
86            setFilledBars((prev) => {
87              const next = [...prev];
88              next[i] = true;
89              return next;
90            });
91          },
92          150 + i * 120
93        )
94      );
95    });
96    return () => timers.forEach(clearTimeout);
97  }, [metrics.forEach]); // eslint-disable-line react-hooks/exhaustive-deps
98 
99  return (
100    <div
101      data-slot="tron-diagnostics-panel"
102      data-status={status}
103      className={cn(
104// … truncated