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/Routes/RouteDetail.tsx

@@ -8,9 +8,12 @@ import {
   DataTable,
   EmptyState,
   Tabs,
-  AreaChart,
-  LineChart,
-  BarChart,
+  ThemedChart,
+  Area,
+  Line,
+  Bar,
+  ReferenceLine,
+  CHART_COLORS,
   RouteFlow,
   Spinner,
   MonoText,
@@ -752,44 +755,31 @@ export default function RouteDetail() {
           <div className={styles.chartGrid} style={{ marginTop: 16 }}>
             <div className={chartCardStyles.chartCard}>
               <div className={styles.chartTitle}>Throughput</div>
-              <AreaChart
-                series={[{
-                  label: 'Throughput',
-                  data: chartData.map((d, i) => ({ x: i, y: d.throughput })),
-                }]}
-                height={200}
-              />
+              <ThemedChart data={chartData} height={200} xDataKey="time" yLabel="msg/s">
+                <Area dataKey="throughput" name="Throughput" stroke={CHART_COLORS[0]}
+                  fill={CHART_COLORS[0]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+              </ThemedChart>
             </div>
             <div className={chartCardStyles.chartCard}>
               <div className={styles.chartTitle}>Latency</div>
-              <LineChart
-                series={[{
-                  label: 'Latency',
-                  data: chartData.map((d, i) => ({ x: i, y: d.latency })),
-                }]}
-                height={200}
-                threshold={{ value: 300, label: 'SLA 300ms' }}
-              />
+              <ThemedChart data={chartData} height={200} xDataKey="time" yLabel="ms">
+                <Line dataKey="latency" name="Latency" stroke={CHART_COLORS[0]} strokeWidth={2} dot={false} />
+                <ReferenceLine y={300} stroke="var(--error)" strokeDasharray="5 3"
+                  label={{ value: 'SLA 300ms', position: 'right', fill: 'var(--error)', fontSize: 9 }} />
+              </ThemedChart>
             </div>
             <div className={chartCardStyles.chartCard}>
               <div className={styles.chartTitle}>Errors</div>
-              <BarChart
-                series={[{
-                  label: 'Errors',
-                  data: chartData.map((d) => ({ x: d.time, y: d.errors })),
-                }]}
-                height={200}
-              />
+              <ThemedChart data={chartData} height={200} xDataKey="time" yLabel="errors">
+                <Bar dataKey="errors" name="Errors" fill={CHART_COLORS[1]} />
+              </ThemedChart>
             </div>
             <div className={chartCardStyles.chartCard}>
               <div className={styles.chartTitle}>Success Rate</div>
-              <AreaChart
-                series={[{
-                  label: 'Success Rate',
-                  data: chartData.map((d, i) => ({ x: i, y: d.successRate })),
-                }]}
-                height={200}
-              />
+              <ThemedChart data={chartData} height={200} xDataKey="time" yLabel="%">
+                <Area dataKey="successRate" name="Success Rate" stroke={CHART_COLORS[0]}
+                  fill={CHART_COLORS[0]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+              </ThemedChart>
             </div>
           </div>
         )}