/* Shared atomic components */
const { useState, useEffect, useRef, useMemo } = React;
// Score ring
function ScoreRing({ score, size = 56, stroke = 4, animate = true }) {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const [dash, setDash] = useState(animate ? c : c - (score / 100) * c);
useEffect(() => {
if (!animate) return;
const t = setTimeout(() => setDash(c - (score / 100) * c), 50);
return () => clearTimeout(t);
}, [score, c, animate]);
// Read actual hex for gradient stops (needs concrete color, not var())
const themeColor = useThemeColor(score < 40 ? '--red' : score < 75 ? '--amber' : '--accent');
const gridColor = useThemeColor('--border');
const gradId = `g-${score}-${size}-${themeColor.replace('#','')}`;
return (
);
}
// Read current theme value of a CSS variable (forces a re-render via window-level theme tick)
function useThemeColor(varName) {
const [tick, setTick] = useState(0);
useEffect(() => {
const onTheme = () => setTick(t => t + 1);
window.addEventListener('theme-change', onTheme);
return () => window.removeEventListener('theme-change', onTheme);
}, []);
if (typeof window === 'undefined') return '#00FF87';
return getComputedStyle(document.documentElement).getPropertyValue(varName).trim() || '#00FF87';
}
// Score mini badge (no number, just ring + number for table)
function ScoreBadge({ score }) {
let color = 'var(--accent)';
if (score < 40) color = 'var(--red)';
else if (score < 75) color = 'var(--amber)';
return (
{score}
);
}
// Sparkline
function Sparkline({ data, w = 80, h = 22, strokeW = 1.5 }) {
const accent = useThemeColor('--accent');
const red = useThemeColor('--red');
if (!data || data.length === 0) return null;
const min = Math.min(...data);
const max = Math.max(...data);
const range = max - min || 1;
const step = w / (data.length - 1);
const pts = data.map((v, i) => `${i * step},${h - ((v - min) / range) * (h - 2) - 1}`).join(' ');
const last = data[data.length - 1];
const first = data[0];
const trendColor = last >= first ? accent : red;
return (
);
}
// Status icon
function StatusIcon({ status }) {
if (status === 'ok') return ✓;
if (status === 'fail') return ✗;
return ⚠;
}
// Category pill
function CatPill({ cat, small }) {
const cls = `pill cat-${cat.toLowerCase()}`;
return {cat};
}
// Address with truncation + hover
function AddrLink({ addr, full, color }) {
return {full || addr};
}
// Latency color
function Latency({ ms }) {
let cls = 'lat-good';
if (ms > 500) cls = 'lat-bad';
else if (ms > 200) cls = 'lat-mid';
return {ms}ms;
}
// Stat card
function StatCard({ label, value, sub, color, big }) {
return (
{label}
{value}
{sub &&
{sub}
}
);
}
// Bar row (used for sub-scores)
function BarRow({ label, value, max = 100, color }) {
const pct = Math.min(100, (value / max) * 100);
let c = color;
if (!c) {
if (value < 40) c = 'var(--red)';
else if (value < 75) c = 'var(--amber)';
else c = 'var(--accent)';
}
return (
{label}
{value}
);
}
// Line+volume chart (success/fail rate + volume bars)
function ReliabilityChart({ days = 30, w = 760, h = 220 }) {
// Generate deterministic-ish data
const pts = useMemo(() => {
const out = [];
let succ = 96 + Math.random() * 2;
let fail = 100 - succ;
for (let i = 0; i < days; i++) {
succ += (Math.random() - 0.5) * 1.2;
succ = Math.max(85, Math.min(99.9, succ));
// create a dip somewhere
if (i === 18) succ = 91.4;
if (i === 19) succ = 93.8;
fail = 100 - succ;
const vol = 400 + Math.random() * 800 + (i > 20 ? 200 : 0);
out.push({ succ, fail, vol });
}
return out;
}, [days]);
const padL = 36, padR = 12, padT = 12, padB = 64;
const chartW = w - padL - padR;
const chartH = h - padT - padB;
const stepX = chartW / (days - 1);
// Volume area
const volMax = Math.max(...pts.map(p => p.vol));
const volBarsH = 40;
const volBarsY = h - padB + 14;
// y axes: 85–100
const yMin = 85, yMax = 100;
const yFor = v => padT + chartH - ((v - yMin) / (yMax - yMin)) * chartH;
const succPath = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${padL + i*stepX} ${yFor(p.succ)}`).join(' ');
// Failure as inverse — show on second axis (0–15%) but inverted in same area for contrast
const failYFor = v => padT + chartH - ((15 - v) / 15) * chartH; // wait, want fail near bottom
// Simpler: scale fail (0..15) to bottom band
const failYFor2 = v => padT + chartH * 0.7 + (v / 15) * (chartH * 0.3);
const failPath = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${padL + i*stepX} ${failYFor2(p.fail)}`).join(' ');
// y grid
const yTicks = [85, 90, 95, 100];
const grid = useThemeColor('--border');
const subText = useThemeColor('--text-3');
const text1 = useThemeColor('--text-1');
const accent = useThemeColor('--accent');
const red = useThemeColor('--red');
const borderStrong = useThemeColor('--border-strong');
return (
);
}
// Animated counter
function Counter({ value, fmt }) {
const [v, setV] = useState(value);
const prev = useRef(value);
const [tick, setTick] = useState(false);
useEffect(() => {
if (value !== prev.current) {
setTick(true);
setV(value);
prev.current = value;
const t = setTimeout(() => setTick(false), 400);
return () => clearTimeout(t);
}
}, [value]);
return {fmt ? fmt(v) : v};
}
function fmtNum(n) { return n.toLocaleString('en-US'); }
function fmtUSDC(n) {
if (n >= 1000) return '$' + n.toLocaleString('en-US', {maximumFractionDigits: 0});
if (n >= 1) return '$' + n.toFixed(2);
return '$' + n.toFixed(4);
}
// JSON renderer with syntax highlighting
function JsonView({ data }) {
function render(v, indent = 0) {
const pad = ' '.repeat(indent);
if (v === null) return null;
if (typeof v === 'boolean') return {String(v)};
if (typeof v === 'number') return {v};
if (typeof v === 'string') return "{v}";
if (Array.isArray(v)) {
return (
<>
[
{v.map((x, i) => (