fix(dashboard): format chart timestamps as readable time labels (#403)

Author: micookie2

packages/frontend/src/components/dashboard/tabs/UsageTab.tsx

@@ -29,7 +29,7 @@ import { useEffect, useMemo, useState } from 'react';
  * from the `GET /v0/management/concurrency?timeRange=...` endpoint.
  */
 import { api, UsageData, PieChartDataPoint, type ConcurrencyData } from '../../../lib/api';
-import { formatNumber, formatTokens } from '../../../lib/format';
+import { formatNumber, formatTokens, formatTimeLabel, formatDateTimeLabel } from '../../../lib/format';
 import { Card } from '../../ui/Card';
 import { TotalEnergyComparison } from '../../TotalEnergyComparison';
 import { TimeRangeSelector } from '../TimeRangeSelector';
@@ -432,14 +432,15 @@ export const UsageTab: React.FC<UsageTabProps> = ({
             <ResponsiveContainer width="100%" height="100%">
               <AreaChart data={data}>
                 <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border-glass)" />
-                <XAxis dataKey="timestamp" stroke="var(--color-text-secondary)" />
+                <XAxis dataKey="timestamp" stroke="var(--color-text-secondary)" tickFormatter={(v) => formatTimeLabel(String(v))} />
                 <YAxis stroke="var(--color-text-secondary)" tickFormatter={formatNumber} />
                 <Tooltip
                   contentStyle={{
                     backgroundColor: 'var(--color-bg-card)',
                     borderColor: 'var(--color-border)',
                     color: 'var(--color-text)',
                   }}
+                  labelFormatter={(label) => formatDateTimeLabel(String(label))}
                   formatter={(value) => formatNumber(value as number)}
                 />
                 <Area
@@ -576,14 +577,15 @@ export const UsageTab: React.FC<UsageTabProps> = ({
             <ResponsiveContainer width="100%" height="100%">
               <AreaChart data={data}>
                 <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border-glass)" />
-                <XAxis dataKey="timestamp" stroke="var(--color-text-secondary)" />
+                <XAxis dataKey="timestamp" stroke="var(--color-text-secondary)" tickFormatter={(v) => formatTimeLabel(String(v))} />
                 <YAxis stroke="var(--color-text-secondary)" tickFormatter={formatTokens} />
                 <Tooltip
                   contentStyle={{
                     backgroundColor: 'var(--color-bg-card)',
                     borderColor: 'var(--color-border)',
                     color: 'var(--color-text)',
                   }}
+                  labelFormatter={(label) => formatDateTimeLabel(String(label))}
                   formatter={(value) => formatTokens(value as number)}
                 />
                 <Legend />

packages/frontend/src/lib/format.ts

@@ -155,19 +155,34 @@ export function formatPercent(value: number, decimals: number = 1): string {
  * Handles ISO strings and epoch-millisecond numeric strings.
  */
 export function formatTimeLabel(timestamp: string): string {
-  const date = new Date(timestamp);
-  if (!isNaN(date.getTime())) {
-    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const date = parseTimestamp(timestamp);
+  if (date) return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  return timestamp;
+}
+
+/**
+ * Format a timestamp string into a detailed date-time label for chart tooltips.
+ * Includes date and time (e.g., "2025/05/15 14:00").
+ */
+export function formatDateTimeLabel(timestamp: string): string {
+  const date = parseTimestamp(timestamp);
+  if (date) {
+    const dateStr = date.toLocaleDateString([], { year: 'numeric', month: '2-digit', day: '2-digit' });
+    const timeStr = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    return `${dateStr} ${timeStr}`;
   }
-  // Try parsing as a numeric string (epoch ms)
+  return timestamp;
+}
+
+function parseTimestamp(timestamp: string): Date | null {
+  const date = new Date(timestamp);
+  if (!isNaN(date.getTime())) return date;
   const num = Number(timestamp);
   if (!isNaN(num)) {
     const dateFromNum = new Date(num);
-    if (!isNaN(dateFromNum.getTime())) {
-      return dateFromNum.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    }
+    if (!isNaN(dateFromNum.getTime())) return dateFromNum;
   }
-  return timestamp;
+  return null;
 }
 
 /**