spb/websensor

1import type { Stats } from "@/lib/api";2import { fmtInt, relTime } from "@/lib/format";3import { Stat } from "./ui";45export function StatsStrip({ stats }: { stats: Stats }) {6  const items: { label: string; value: string; hint?: string }[] = [7    { label: "Sources monitored", value: fmtInt(stats.sources), hint: `${fmtInt(stats.entities)} entities` },8    { label: "Sensors", value: fmtInt(stats.sensors), hint: stats.sensors_degraded ? `${fmtInt(stats.sensors_degraded)} degraded` : "all healthy" },9    { label: "Checks today", value: fmtInt(stats.checks_today), hint: stats.checks_today ? `${Math.round(((stats.not_modified_today ?? 0) / Math.max(1, stats.checks_today ?? 1)) * 100)}% served 304` : undefined },10    { label: "Changes 24h", value: fmtInt(stats.changes_24h), hint: `${fmtInt(stats.snapshots)} snapshots preserved` },11    { label: "Meaningful events 24h", value: fmtInt(stats.events_24h), hint: stats.last_event_at ? `last ${relTime(stats.last_event_at)}` : undefined },12    { label: "Silent changes 24h", value: fmtInt(stats.silent_24h), hint: `${fmtInt(stats.breaking_24h)} breaking` },13  ];14  return (15    <div className="panel mb-4 grid grid-cols-2 divide-x divide-y divide-line sm:grid-cols-3 lg:grid-cols-6 lg:divide-y-0">16      {items.map((s) => (17        <Stat key={s.label} label={s.label} value={s.value} hint={s.hint} />18      ))}19    </div>20  );21}22