fix: align RoutesMetrics with mock — chart titles, Invalid Date bug

- Fix Invalid Date in Errors bar chart (guard against null timestamps)
- Table header: "Route Metrics" → "Per-Route Performance"
- Chart titles: add units — "Throughput (msg/s)", "Latency (ms)",
  "Errors by Route", "Message Volume (msg/min)"
- Add yLabel to charts for axis labels

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/Routes/RoutesMetrics.tsx

@@ -47,13 +47,19 @@ export default function RoutesMetrics() {
   );
 
   const chartData = useMemo(() =>
-    (timeseries?.buckets || []).map((b: any) => ({
-      time: new Date(b.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-      throughput: b.totalCount,
-      latency: b.avgDurationMs,
-      errors: b.failedCount,
-      successRate: b.totalCount > 0 ? ((b.totalCount - b.failedCount) / b.totalCount) * 100 : 100,
-    })),
+    (timeseries?.buckets || []).map((b: any, i: number) => {
+      const ts = b.timestamp ? new Date(b.timestamp) : null;
+      const time = ts && !isNaN(ts.getTime())
+        ? ts.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+        : String(i);
+      return {
+        time,
+        throughput: b.totalCount ?? 0,
+        latency: b.avgDurationMs ?? 0,
+        errors: b.failedCount ?? 0,
+        successRate: b.totalCount > 0 ? ((b.totalCount - b.failedCount) / b.totalCount) * 100 : 100,
+      };
+    }),
     [timeseries],
   );
 
@@ -163,7 +169,7 @@ export default function RoutesMetrics() {
 
       <div className={styles.tableSection}>
         <div className={styles.tableHeader}>
-          <span className={styles.tableTitle}>Route Metrics</span>
+          <span className={styles.tableTitle}>Per-Route Performance</span>
           <span className={styles.tableMeta}>{rows.length} routes</span>
         </div>
         <DataTable
@@ -177,24 +183,25 @@ export default function RoutesMetrics() {
       {chartData.length > 0 && (
         <div className={styles.chartGrid}>
           <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Throughput</div>
-            <AreaChart series={[{ label: 'Throughput', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]} height={200} />
+            <div className={styles.chartTitle}>Throughput (msg/s)</div>
+            <AreaChart series={[{ label: 'Throughput', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]} yLabel="msg/s" height={200} />
           </div>
           <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Latency</div>
+            <div className={styles.chartTitle}>Latency (ms)</div>
             <LineChart
               series={[{ label: 'Latency', data: chartData.map((d: any, i: number) => ({ x: i, y: d.latency })) }]}
+              yLabel="ms"
               height={200}
               threshold={{ value: 300, label: 'SLA 300ms' }}
             />
           </div>
           <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Errors</div>
+            <div className={styles.chartTitle}>Errors by Route</div>
             <BarChart series={[{ label: 'Errors', data: chartData.map((d: any) => ({ x: d.time as string, y: d.errors })) }]} height={200} />
           </div>
           <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Success Rate</div>
-            <AreaChart series={[{ label: 'Success Rate', data: chartData.map((d: any, i: number) => ({ x: i, y: d.successRate })) }]} height={200} />
+            <div className={styles.chartTitle}>Message Volume (msg/min)</div>
+            <AreaChart series={[{ label: 'Volume', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]} yLabel="msg/min" height={200} />
           </div>
         </div>
       )}