fix: use Date x-values in agent charts for proper time axes

All chart series now use Date objects from the API response instead
of integer indices. This gives proper date/time on x-axes and in
tooltips (leveraging DS v0.1.46 responsive charts + timestamp
tooltips). GC chart switched from BarChart to AreaChart for
consistency with Date x-values.

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

ui/src/pages/AgentInstance/AgentInstance.tsx

@@ -80,7 +80,7 @@ export default function AgentInstance() {
         ? (new Date(buckets[1].timestamp).getTime() - new Date(buckets[0].timestamp).getTime()) / 1000
         : 60;
     return buckets.map((b: any) => ({
-      time: new Date(b.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+      date: new Date(b.timestamp),
       throughput: bucketSecs > 0 ? b.totalCount / bucketSecs : b.totalCount,
       latency: b.avgDurationMs,
       errorPct: b.totalCount > 0 ? (b.failedCount / b.totalCount) * 100 : 0,
@@ -104,31 +104,31 @@ export default function AgentInstance() {
   const cpuSeries = useMemo(() => {
     const pts = jvmMetrics?.metrics?.['process.cpu.usage.value'];
     if (!pts?.length) return null;
-    return [{ label: 'CPU %', data: pts.map((p: any, i: number) => ({ x: i, y: p.value * 100 })) }];
+    return [{ label: 'CPU %', data: pts.map((p: any) => ({ x: new Date(p.time), y: p.value * 100 })) }];
   }, [jvmMetrics]);
 
   const heapSeries = useMemo(() => {
     const pts = jvmMetrics?.metrics?.['jvm.memory.used.value'];
     if (!pts?.length) return null;
-    return [{ label: 'Heap MB', data: pts.map((p: any, i: number) => ({ x: i, y: p.value / (1024 * 1024) })) }];
+    return [{ label: 'Heap MB', data: pts.map((p: any) => ({ x: new Date(p.time), y: p.value / (1024 * 1024) })) }];
   }, [jvmMetrics]);
 
   const threadSeries = useMemo(() => {
     const pts = jvmMetrics?.metrics?.['jvm.threads.live.value'];
     if (!pts?.length) return null;
-    return [{ label: 'Threads', data: pts.map((p: any, i: number) => ({ x: i, y: p.value })) }];
+    return [{ label: 'Threads', data: pts.map((p: any) => ({ x: new Date(p.time), y: p.value })) }];
   }, [jvmMetrics]);
 
   const gcSeries = useMemo(() => {
     const pts = jvmMetrics?.metrics?.['jvm.gc.pause.total_time'];
     if (!pts?.length) return null;
-    return [{ label: 'GC ms', data: pts.map((p: any, i: number) => ({ x: String(i), y: p.value })) }];
+    return [{ label: 'GC ms', data: pts.map((p: any) => ({ x: new Date(p.time), y: p.value })) }];
   }, [jvmMetrics]);
 
   const throughputSeries = useMemo(
     () =>
       chartData.length
-        ? [{ label: 'msg/s', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]
+        ? [{ label: 'msg/s', data: chartData.map((d: any) => ({ x: d.date, y: d.throughput })) }]
         : null,
     [chartData],
   );
@@ -136,7 +136,7 @@ export default function AgentInstance() {
   const errorSeries = useMemo(
     () =>
       chartData.length
-        ? [{ label: 'Error %', data: chartData.map((d: any, i: number) => ({ x: i, y: d.errorPct })) }]
+        ? [{ label: 'Error %', data: chartData.map((d: any) => ({ x: d.date, y: d.errorPct })) }]
         : null,
     [chartData],
   );
@@ -398,7 +398,7 @@ export default function AgentInstance() {
             <span className={styles.chartMeta} />
           </div>
           {gcSeries ? (
-            <BarChart series={gcSeries} height={160} yLabel="ms" />
+            <AreaChart series={gcSeries} height={160} yLabel="ms" />
           ) : (
             <EmptyState title="No data" description="No GC metrics available" />
           )}