From aa91b867c59b8f940b6b29ebdd97ef251d24a617 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 12 Apr 2026 18:51:18 +0200
Subject: [PATCH] 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 | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/src/pages/AgentInstance/AgentInstance.tsx b/ui/src/pages/AgentInstance/AgentInstance.tsx
index 5e0b6987..be84453c 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/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" />
           )}