fix: align all pages with design system mocks — stat cards, tables, detail panels

Dashboard: correct stat card labels (Exchanges/Success Rate/Errors/Throughput/Latency p99),
add detail text, trends, sparklines on all cards, Agent column, LIVE badge,
expanded detail panel with Agent/Correlation/Timestamp, "Open full details" link.

Agent Health: per-group meta (TPS/routes) in GroupCard header, proper HTML table
with column headers for instance list.

Agent Instance: stat card detail props (heap info, start date), scope trail with
inline status/version/routes badges.

Routes: 5th In-Flight stat card, enriched stat card props (detail/trend/sparkline),
SLA threshold line on latency chart.

Exchange Detail: Agent stat box in header.

Also: vite proxy CORS fix, cross-env dev scripts.

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

ui/src/pages/Routes/RoutesMetrics.module.css

@@ -1,6 +1,6 @@
 .statStrip {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(5, 1fr);
   gap: 10px;
   margin-bottom: 16px;
 }

ui/src/pages/Routes/RoutesMetrics.tsx

@@ -81,13 +81,84 @@ export default function RoutesMetrics() {
     },
   ];
 
+  const errorRate = stats?.totalCount
+    ? (((stats.failedCount ?? 0) / stats.totalCount) * 100)
+    : 0;
+  const prevErrorRate = stats?.prevTotalCount
+    ? (((stats.prevFailedCount ?? 0) / stats.prevTotalCount) * 100)
+    : 0;
+  const errorTrend: 'up' | 'down' | 'neutral' = errorRate > prevErrorRate ? 'up' : errorRate < prevErrorRate ? 'down' : 'neutral';
+  const errorTrendValue = stats?.prevTotalCount
+    ? `${Math.abs(errorRate - prevErrorRate).toFixed(2)}%`
+    : undefined;
+
+  const p99Ms = stats?.p99LatencyMs ?? 0;
+  const prevP99Ms = stats?.prevP99LatencyMs ?? 0;
+  const latencyTrend: 'up' | 'down' | 'neutral' = p99Ms > prevP99Ms ? 'up' : p99Ms < prevP99Ms ? 'down' : 'neutral';
+  const latencyTrendValue = prevP99Ms ? `${Math.abs(p99Ms - prevP99Ms)}ms` : undefined;
+
+  const totalCount = stats?.totalCount ?? 0;
+  const prevTotalCount = stats?.prevTotalCount ?? 0;
+  const throughputTrend: 'up' | 'down' | 'neutral' = totalCount > prevTotalCount ? 'up' : totalCount < prevTotalCount ? 'down' : 'neutral';
+  const throughputTrendValue = prevTotalCount
+    ? `${Math.abs(((totalCount - prevTotalCount) / prevTotalCount) * 100).toFixed(0)}%`
+    : undefined;
+
+  const successRate = stats?.totalCount
+    ? (((stats.totalCount - (stats.failedCount ?? 0)) / stats.totalCount) * 100)
+    : 100;
+
+  const activeCount = stats?.activeCount ?? 0;
+
+  const errorSparkline = (timeseries?.buckets || []).map((b: any) => b.failedCount as number);
+  const latencySparkline = (timeseries?.buckets || []).map((b: any) => b.p99DurationMs as number);
+
   return (
     <div>
       <div className={styles.statStrip}>
-        <StatCard label="Total Throughput" value={stats?.totalCount ?? 0} sparkline={sparklineData} />
-        <StatCard label="Error Rate" value={stats?.totalCount ? `${(((stats.failedCount ?? 0) / stats.totalCount) * 100).toFixed(1)}%` : '0%'} accent="error" />
-        <StatCard label="P99 Latency" value={`${stats?.p99LatencyMs ?? 0}ms`} accent="warning" />
-        <StatCard label="Success Rate" value={stats?.totalCount ? `${(((stats.totalCount - (stats.failedCount ?? 0)) / stats.totalCount) * 100).toFixed(1)}%` : '100%'} accent="success" />
+        <StatCard
+          label="Total Throughput"
+          value={totalCount.toLocaleString()}
+          detail="exchanges"
+          trend={throughputTrend}
+          trendValue={throughputTrendValue}
+          accent="amber"
+          sparkline={sparklineData}
+        />
+        <StatCard
+          label="System Error Rate"
+          value={`${errorRate.toFixed(2)}%`}
+          detail={`${stats?.failedCount ?? 0} errors / ${totalCount.toLocaleString()} total`}
+          trend={errorTrend}
+          trendValue={errorTrendValue}
+          accent={errorRate < 1 ? 'success' : 'error'}
+          sparkline={errorSparkline}
+        />
+        <StatCard
+          label="P99 Latency"
+          value={`${p99Ms}ms`}
+          detail={`Avg: ${stats?.avgDurationMs ?? 0}ms`}
+          trend={latencyTrend}
+          trendValue={latencyTrendValue}
+          accent={p99Ms > 300 ? 'error' : p99Ms > 200 ? 'warning' : 'success'}
+          sparkline={latencySparkline}
+        />
+        <StatCard
+          label="Success Rate"
+          value={`${successRate.toFixed(1)}%`}
+          detail={`${activeCount} active routes`}
+          accent="success"
+          sparkline={sparklineData.map((v, i) => {
+            const failed = errorSparkline[i] ?? 0;
+            return v > 0 ? ((v - failed) / v) * 100 : 100;
+          })}
+        />
+        <StatCard
+          label="In-Flight"
+          value={activeCount}
+          detail="active exchanges"
+          accent="amber"
+        />
       </div>
 
       <div className={styles.tableSection}>
@@ -111,7 +182,11 @@ export default function RoutesMetrics() {
           </div>
           <div className={styles.chartCard}>
             <div className={styles.chartTitle}>Latency</div>
-            <LineChart series={[{ label: 'Latency', data: chartData.map((d: any, i: number) => ({ x: i, y: d.latency })) }]} height={200} />
+            <LineChart
+              series={[{ label: 'Latency', data: chartData.map((d: any, i: number) => ({ x: i, y: d.latency })) }]}
+              height={200}
+              threshold={{ value: 300, label: 'SLA 300ms' }}
+            />
           </div>
           <div className={styles.chartCard}>
             <div className={styles.chartTitle}>Errors</div>