feat: migrate agent charts to ThemedChart + Recharts

Replace custom LineChart/AreaChart/BarChart usage with ThemedChart
wrapper. Data format changed from ChartSeries[] to Recharts-native
flat objects. Uses DS v0.1.47.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/pages/DashboardTab/DashboardL3.tsx

@@ -3,8 +3,11 @@ import { useParams } from 'react-router';
 import {
   KpiStrip,
   DataTable,
-  AreaChart,
-  LineChart,
+  ThemedChart,
+  Area,
+  Line,
+  ReferenceLine,
+  CHART_COLORS,
   Card,
   MonoText,
   Badge,
@@ -285,31 +288,16 @@ export default function DashboardL3() {
     [stats, slaThresholdMs, bottleneck, throughputSparkline, windowSeconds],
   );
 
-  // ── Chart series ────────────────────────────────────────────────────────
-  const throughputChartSeries = useMemo(() => [{
-    label: 'Throughput',
-    data: (timeseries?.buckets || []).map((b: any, i: number) => ({
-      x: i,
-      y: b.totalCount,
+  // ── Chart data ───────────────────────────────────────────────────────────
+  const chartData = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any, i: number) => ({
+      idx: i,
+      throughput: b.totalCount,
+      p99: b.p99DurationMs,
+      errorRate: b.totalCount > 0 ? (b.failedCount / b.totalCount) * 100 : 0,
     })),
-  }], [timeseries]);
-
-  const latencyChartSeries = useMemo(() => [{
-    label: 'P99',
-    data: (timeseries?.buckets || []).map((b: any, i: number) => ({
-      x: i,
-      y: b.p99DurationMs,
-    })),
-  }], [timeseries]);
-
-  const errorRateChartSeries = useMemo(() => [{
-    label: 'Error Rate',
-    data: (timeseries?.buckets || []).map((b: any, i: number) => ({
-      x: i,
-      y: b.totalCount > 0 ? (b.failedCount / b.totalCount) * 100 : 0,
-    })),
-    color: 'var(--error)',
-  }], [timeseries]);
+    [timeseries],
+  );
 
   // ── Processor table rows ────────────────────────────────────────────────
   const processorRows: ProcessorRow[] = useMemo(() => {
@@ -364,28 +352,25 @@ export default function DashboardL3() {
       {(timeseries?.buckets?.length ?? 0) > 0 && (
         <div className={styles.chartRow}>
           <Card title="Throughput">
-            <AreaChart
-              series={throughputChartSeries}
-              yLabel="msg/s"
-              height={200}
-            />
+            <ThemedChart data={chartData} height={200} xDataKey="idx" yLabel="msg/s">
+              <Area dataKey="throughput" name="Throughput" stroke={CHART_COLORS[0]}
+                fill={CHART_COLORS[0]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+            </ThemedChart>
           </Card>
 
           <Card title="Latency Percentiles">
-            <LineChart
-              series={latencyChartSeries}
-              yLabel="ms"
-              threshold={{ value: slaThresholdMs, label: `SLA ${slaThresholdMs}ms` }}
-              height={200}
-            />
+            <ThemedChart data={chartData} height={200} xDataKey="idx" yLabel="ms">
+              <Line dataKey="p99" name="P99" stroke={CHART_COLORS[0]} strokeWidth={2} dot={false} />
+              <ReferenceLine y={slaThresholdMs} stroke="var(--error)" strokeDasharray="5 3"
+                label={{ value: `SLA ${slaThresholdMs}ms`, position: 'right', fill: 'var(--error)', fontSize: 9 }} />
+            </ThemedChart>
           </Card>
 
           <Card title="Error Rate">
-            <AreaChart
-              series={errorRateChartSeries}
-              yLabel="%"
-              height={200}
-            />
+            <ThemedChart data={chartData} height={200} xDataKey="idx" yLabel="%">
+              <Area dataKey="errorRate" name="Error Rate" stroke={CHART_COLORS[1]}
+                fill={CHART_COLORS[1]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+            </ThemedChart>
           </Card>
         </div>
       )}