From a63e81db060ef2c839ca9c7c4e07c7c4c889906a Mon Sep 17 00:00:00 2001
From: Evan Yang <evan@evanfy.com>
Date: Mon, 2 Mar 2026 22:00:31 +0800
Subject: [PATCH] fix(ui): improve admin usage chart timestamp precision

---
 ui/components/top-models-usage-chart.tsx | 57 ++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 4 deletions(-)

diff --git a/ui/components/top-models-usage-chart.tsx b/ui/components/top-models-usage-chart.tsx
index 26eb5330..90b3cf77 100644
--- a/ui/components/top-models-usage-chart.tsx
+++ b/ui/components/top-models-usage-chart.tsx
@@ -86,11 +86,25 @@ function getSeriesColor(model: string, index: number): string {
   return `hsl(${hue} 70% 56%)`;
 }
 
-function formatTooltipTimestamp(label: string): string {
+function formatTooltipTimestamp(
+  label: string,
+  intervalMinutes: number,
+  hoursBack: number
+): string {
   const date = parseBucketDate(label);
   if (!date) {
     return label;
   }
+  const shouldShowTime = intervalMinutes <= 6 * 60 || hoursBack <= 48;
+  if (shouldShowTime) {
+    return date.toLocaleString([], {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }
   return date.toLocaleString([], {
     month: 'long',
     day: 'numeric',
@@ -100,13 +114,39 @@ function formatTooltipTimestamp(label: string): string {
 
 function formatAxisTimestamp(
   timestamp: string,
-  hasMultipleDays: boolean
+  hasMultipleDays: boolean,
+  intervalMinutes: number,
+  hoursBack: number
 ): string {
   const date = parseBucketDate(timestamp);
   if (!date) {
     return '';
   }
 
+  const shouldShowTime = intervalMinutes <= 6 * 60 || hoursBack <= 48;
+  if (shouldShowTime && hasMultipleDays) {
+    return date.toLocaleString([], {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }
+
+  if (shouldShowTime) {
+    return date.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }
+
+  if (intervalMinutes >= 24 * 60 && hoursBack >= 24 * 180) {
+    return date.toLocaleDateString([], {
+      month: 'short',
+      year: '2-digit',
+    });
+  }
+
   if (hasMultipleDays) {
     return date.toLocaleDateString([], {
       month: 'short',
@@ -610,7 +650,12 @@ export function TopModelsUsageChart({
                 axisLine={false}
                 minTickGap={isMobile ? 14 : 24}
                 tickFormatter={(value) =>
-                  formatAxisTimestamp(String(value), hasMultipleDays)
+                  formatAxisTimestamp(
+                    String(value),
+                    hasMultipleDays,
+                    mix.interval_minutes,
+                    mix.hours_back
+                  )
                 }
               />
               <YAxis
@@ -655,7 +700,11 @@ export function TopModelsUsageChart({
                   return (
                     <div className='border-border/50 bg-background min-w-[220px] rounded-lg border px-2.5 py-2 text-xs shadow-xl'>
                       <p className='text-foreground mb-2 text-sm font-medium'>
-                        {formatTooltipTimestamp(String(label || ''))}
+                        {formatTooltipTimestamp(
+                          String(label || ''),
+                          mix.interval_minutes,
+                          mix.hours_back
+                        )}
                       </p>
                       <div className='space-y-1.5'>
                         {rows.map((row) => (