Every question on the Health tab currently requires reading a full chart. A row of stat tiles at the top — current value + delta vs. the previous window + a small sparkline for the vitals (CPU, memory, main-thread utilization, error rate, p95 duration) — answers "is anything wrong right now?" at a glance and gives the tab a focal hierarchy. The per-metric queries already exist; this is aggregation of latest-bucket values plus a compact tile component.
Acceptance criteria
- Health tab shows a stat-tile row above the panel grid: CPU %, memory, main-thread utilization, error rate, p95 request duration.
- Each tile: latest-bucket value, delta vs the previous window of equal length (direction arrow + %), and a small sparkline of the current window; em-dash + no delta when data is absent; skeletons while loading.
- Adds at most one extra
get_analytics POST per metric (the previous-window fetch); current-window data reuses the panels' existing query keys (they dedupe via react-query).
Implementation notes
- Reuse
useAnalyticsRecords for both windows; the shifted window is just different start/end args.
- Read the repo dataviz guidance for stat-tile composition; build on
Card. Sparkline can be a bare LineChart with hideLegend and no axes, or inline SVG.
Filed from a Status tab code review.
Comment generated by kAIle (Claude Fable 5)
Every question on the Health tab currently requires reading a full chart. A row of stat tiles at the top — current value + delta vs. the previous window + a small sparkline for the vitals (CPU, memory, main-thread utilization, error rate, p95 duration) — answers "is anything wrong right now?" at a glance and gives the tab a focal hierarchy. The per-metric queries already exist; this is aggregation of latest-bucket values plus a compact tile component.
Acceptance criteria
get_analyticsPOST per metric (the previous-window fetch); current-window data reuses the panels' existing query keys (they dedupe via react-query).Implementation notes
useAnalyticsRecordsfor both windows; the shifted window is just different start/end args.Card. Sparkline can be a bareLineChartwithhideLegendand no axes, or inline SVG.Filed from a Status tab code review.
Comment generated by kAIle (Claude Fable 5)