refactor(telemetry): chart scale labels, calmer vitals and error styling, usage-first tabs

- sparklines get start/end date and max-value footers
- vitals rating shown by value color instead of badges
- error rows use plain counts, subtle resolve button, terse empty state
- telemetry tab order: usage, players, functions, events, errors; usage is default

src/features/telemetry/components/charts/stat-tile.tsx

@@ -1,21 +1,32 @@
 import { ReactNode } from "react";
 import { Box, Group, Stack, Text, UnstyledButton } from "@mantine/core";
-import Sparkline from "./sparkline";
+import Sparkline, { SparklineScale } from "./sparkline";
 
 interface StatTileProps {
   label: ReactNode;
   value: ReactNode;
+  valueColor?: string;
   delta?: number;
   spark?: number[];
+  sparkScale?: SparklineScale;
   caption?: ReactNode;
   onClick?: () => void;
 }
 
-export const StatTile = ({ label, value, delta, spark, caption, onClick }: StatTileProps) => {
+export const StatTile = ({
+  label,
+  value,
+  valueColor,
+  delta,
+  spark,
+  sparkScale,
+  caption,
+  onClick,
+}: StatTileProps) => {
   const content = (
     <Stack gap={2}>
       <Group gap="xs" align="baseline" wrap="nowrap">
-        <Text fz="xl" fw={700} lh={1.2}>
+        <Text fz="xl" fw={700} lh={1.2} c={valueColor}>
           {value}
         </Text>
         {delta !== undefined && delta !== 0 && (
@@ -29,7 +40,9 @@ export const StatTile = ({ label, value, delta, spark, caption, onClick }: StatT
         {label}
       </Text>
       {caption && <Box>{caption}</Box>}
-      {spark && spark.length > 0 && <Sparkline data={spark} height={28} />}
+      {spark && spark.length > 0 && (
+        <Sparkline data={spark} height={28} scale={sparkScale} />
+      )}
     </Stack>
   );