feat(usage): add filtered chunk and traffic trends

Show sparkline trends for chunk and traffic summary cards and make them follow the selected time range. Also widen the model stats panel to reduce horizontal scrolling in the details area.

Author: NGLSL

src/components/usage/StatCards.tsx

@@ -51,6 +51,8 @@ export interface StatCardsProps {
     rpm: SparklineBundle | null;
     tpm: SparklineBundle | null;
     cost: SparklineBundle | null;
+    chunks: SparklineBundle | null;
+    traffic: SparklineBundle | null;
   };
 }
 
@@ -209,7 +211,7 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
           </span>
         </>
       ),
-      trend: null,
+      trend: sparklines.chunks,
     },
     {
       key: 'traffic',
@@ -229,7 +231,7 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
           </span>
         </>
       ),
-      trend: null,
+      trend: sparklines.traffic,
     },
     {
       key: 'tokens',

src/components/usage/hooks/useSparklines.ts

@@ -33,44 +33,102 @@ export interface UseSparklinesReturn {
   rpmSparkline: SparklineBundle | null;
   tpmSparkline: SparklineBundle | null;
   costSparkline: SparklineBundle | null;
+  chunksSparkline: SparklineBundle | null;
+  trafficSparkline: SparklineBundle | null;
 }
 
 export function useSparklines({ usage, loading, nowMs }: UseSparklinesOptions): UseSparklinesReturn {
   const lastHourSeries = useMemo(() => {
-    if (!usage) return { labels: [], requests: [], tokens: [] };
-    if (!Number.isFinite(nowMs) || nowMs <= 0) {
-      return { labels: [], requests: [], tokens: [] };
+    if (!usage) {
+      return {
+        labels: [],
+        requests: [],
+        tokens: [],
+        chunks: [],
+        traffic: []
+      };
     }
     const details = collectUsageDetails(usage);
-    if (!details.length) return { labels: [], requests: [], tokens: [] };
+    if (!details.length) {
+      return {
+        labels: [],
+        requests: [],
+        tokens: [],
+        chunks: [],
+        traffic: []
+      };
+    }
+
+    const minTimestamp = details.reduce((min, detail) => {
+      const timestamp = detail.__timestampMs ?? 0;
+      return Number.isFinite(timestamp) && timestamp > 0 ? Math.min(min, timestamp) : min;
+    }, Number.POSITIVE_INFINITY);
+    const maxTimestamp = details.reduce((max, detail) => {
+      const timestamp = detail.__timestampMs ?? 0;
+      return Number.isFinite(timestamp) && timestamp > 0 ? Math.max(max, timestamp) : max;
+    }, 0);
+    const fallbackNow = Number.isFinite(nowMs) && nowMs > 0 ? nowMs : 0;
+    const windowEnd = maxTimestamp > 0 ? maxTimestamp : fallbackNow;
+    if (!Number.isFinite(minTimestamp) || minTimestamp <= 0 || !Number.isFinite(windowEnd) || windowEnd <= 0) {
+      return {
+        labels: [],
+        requests: [],
+        tokens: [],
+        chunks: [],
+        traffic: []
+      };
+    }
 
-    const windowMinutes = 60;
-    const now = nowMs;
-    const windowStart = now - windowMinutes * 60 * 1000;
-    const requestBuckets = new Array(windowMinutes).fill(0);
-    const tokenBuckets = new Array(windowMinutes).fill(0);
+    const maxBuckets = 60;
+    const spanMs = Math.max(1, windowEnd - minTimestamp + 1);
+    const bucketMs = Math.max(60000, Math.ceil(spanMs / maxBuckets));
+    const bucketCount = Math.max(1, Math.min(maxBuckets, Math.ceil(spanMs / bucketMs)));
+    const windowStart = windowEnd - bucketMs * bucketCount;
+    const requestBuckets = new Array(bucketCount).fill(0);
+    const tokenBuckets = new Array(bucketCount).fill(0);
+    const chunkBuckets = new Array(bucketCount).fill(0);
+    const trafficBuckets = new Array(bucketCount).fill(0);
 
     details.forEach((detail) => {
       const timestamp = detail.__timestampMs ?? 0;
-      if (!Number.isFinite(timestamp) || timestamp < windowStart || timestamp > now) {
+      if (!Number.isFinite(timestamp) || timestamp < windowStart || timestamp > windowEnd) {
         return;
       }
-      const minuteIndex = Math.min(
-        windowMinutes - 1,
-        Math.floor((timestamp - windowStart) / 60000)
+      const bucketIndex = Math.min(
+        bucketCount - 1,
+        Math.max(0, Math.floor((timestamp - windowStart) / bucketMs))
       );
-      requestBuckets[minuteIndex] += 1;
-      tokenBuckets[minuteIndex] += extractTotalTokens(detail);
+      requestBuckets[bucketIndex] += 1;
+      tokenBuckets[bucketIndex] += extractTotalTokens(detail);
+      chunkBuckets[bucketIndex] +=
+        typeof detail.chunk_count === 'number' && Number.isFinite(detail.chunk_count)
+          ? Math.max(detail.chunk_count, 0)
+          : 0;
+      const responseBytes =
+        typeof detail.response_bytes === 'number' && Number.isFinite(detail.response_bytes)
+          ? Math.max(detail.response_bytes, 0)
+          : 0;
+      const apiResponseBytes =
+        typeof detail.api_response_bytes === 'number' && Number.isFinite(detail.api_response_bytes)
+          ? Math.max(detail.api_response_bytes, 0)
+          : 0;
+      trafficBuckets[bucketIndex] += responseBytes + apiResponseBytes;
     });
 
     const labels = requestBuckets.map((_, idx) => {
-      const date = new Date(windowStart + (idx + 1) * 60000);
+      const date = new Date(windowStart + (idx + 1) * bucketMs);
       const h = date.getHours().toString().padStart(2, '0');
       const m = date.getMinutes().toString().padStart(2, '0');
       return `${h}:${m}`;
     });
 
-    return { labels, requests: requestBuckets, tokens: tokenBuckets };
+    return {
+      labels,
+      requests: requestBuckets,
+      tokens: tokenBuckets,
+      chunks: chunkBuckets,
+      traffic: trafficBuckets
+    };
   }, [nowMs, usage]);
 
   const buildSparkline = useCallback(
@@ -155,11 +213,33 @@ export function useSparklines({ usage, loading, nowMs }: UseSparklinesOptions):
     [buildSparkline, lastHourSeries.labels, lastHourSeries.tokens]
   );
 
+  const chunksSparkline = useMemo(
+    () =>
+      buildSparkline(
+        { labels: lastHourSeries.labels, data: lastHourSeries.chunks },
+        '#0ea5e9',
+        'rgba(14, 165, 233, 0.18)'
+      ),
+    [buildSparkline, lastHourSeries.chunks, lastHourSeries.labels]
+  );
+
+  const trafficSparkline = useMemo(
+    () =>
+      buildSparkline(
+        { labels: lastHourSeries.labels, data: lastHourSeries.traffic },
+        '#14b8a6',
+        'rgba(20, 184, 166, 0.18)'
+      ),
+    [buildSparkline, lastHourSeries.labels, lastHourSeries.traffic]
+  );
+
   return {
     requestsSparkline,
     tokensSparkline,
     rpmSparkline,
     tpmSparkline,
-    costSparkline
+    costSparkline,
+    chunksSparkline,
+    trafficSparkline
   };
 }

src/i18n/locales/en.json

@@ -1063,7 +1063,7 @@
     "request_events_limit_hint": "Showing {{shown}} of {{total}} events to keep rendering responsive.",
     "chunk_count": "Chunk Count",
     "total_chunk_count": "Total Chunks",
-    "avg_chunk_per_request": "Avg Chunks / Request",
+    "avg_chunk_per_request": "Avg Chunks",
     "traffic_stats": "Traffic",
     "response_bytes": "Response Bytes",
     "api_response_bytes": "Upstream Response Bytes",

src/i18n/locales/ru.json

@@ -1060,7 +1060,7 @@
     "request_events_limit_hint": "Показано {{shown}} из {{total}} событий для стабильной производительности.",
     "chunk_count": "Количество chunk",
     "total_chunk_count": "Всего chunk",
-    "avg_chunk_per_request": "Среднее chunk на запрос",
+    "avg_chunk_per_request": "Среднее chunk",
     "traffic_stats": "Трафик",
     "response_bytes": "Байты ответа",
     "api_response_bytes": "Байты upstream-ответа",

src/i18n/locales/zh-CN.json

@@ -1063,7 +1063,7 @@
     "request_events_limit_hint": "为保证渲染性能，仅展示 {{shown}} / {{total}} 条事件。",
     "chunk_count": "Chunk 数",
     "total_chunk_count": "Chunk 总数",
-    "avg_chunk_per_request": "平均每请求 Chunk 数",
+    "avg_chunk_per_request": "平均 Chunk",
     "traffic_stats": "流量统计",
     "response_bytes": "下游响应字节",
     "api_response_bytes": "上游响应字节",

src/pages/UsagePage.module.scss

@@ -873,7 +873,7 @@
   }
 
   @include desktop {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
   }
 }
 

src/pages/UsagePage.tsx

@@ -38,6 +38,7 @@ import {
   getApiStats,
   getModelStats,
   filterUsageByTimeRange,
+  collectUsageDetails,
   type UsageTimeRange
 } from '@/utils/usage';
 import styles from './UsagePage.module.scss';
@@ -154,9 +155,21 @@ export function UsagePage() {
     [t]
   );
 
+  const nowMs = lastRefreshedAt?.getTime() ?? 0;
+  const usageLatestTimestampMs = useMemo(() => {
+    if (!usage) {
+      return 0;
+    }
+    return collectUsageDetails(usage).reduce((max, detail) => {
+      const timestamp = detail.__timestampMs ?? 0;
+      return Number.isFinite(timestamp) && timestamp > 0 ? Math.max(max, timestamp) : max;
+    }, 0);
+  }, [usage]);
+  const filterReferenceMs = nowMs > 0 ? nowMs : usageLatestTimestampMs;
+
   const filteredUsage = useMemo(
-    () => (usage ? filterUsageByTimeRange(usage, timeRange) : null),
-    [usage, timeRange]
+    () => (usage ? filterUsageByTimeRange(usage, timeRange, filterReferenceMs) : null),
+    [filterReferenceMs, usage, timeRange]
   );
   const hourWindowHours =
     timeRange === 'all' ? undefined : HOUR_WINDOW_BY_TIME_RANGE[timeRange];
@@ -187,15 +200,14 @@ export function UsagePage() {
     }
   }, [timeRange]);
 
-  const nowMs = lastRefreshedAt?.getTime() ?? 0;
-
-  // Sparklines hook
   const {
     requestsSparkline,
     tokensSparkline,
     rpmSparkline,
     tpmSparkline,
-    costSparkline
+    costSparkline,
+    chunksSparkline,
+    trafficSparkline
   } = useSparklines({ usage: filteredUsage, loading, nowMs });
 
   // Chart data hook
@@ -301,7 +313,9 @@ export function UsagePage() {
           tokens: tokensSparkline,
           rpm: rpmSparkline,
           tpm: tpmSparkline,
-          cost: costSparkline
+          cost: costSparkline,
+          chunks: chunksSparkline,
+          traffic: trafficSparkline
         }}
       />