feat(usage): move traffic metrics into summary panels

NGLSL · NGLSL · commit a1c61be02e75 · 2026-04-19T18:01:50.000+08:00
diff --git a/src/components/usage/ModelStatsCard.tsx b/src/components/usage/ModelStatsCard.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import {
   LATENCY_SOURCE_FIELD,
+  formatBytes,
   formatCompactNumber,
   formatDurationMs,
   formatUsd,
@@ -25,13 +26,32 @@ type SortKey =
   | 'cost'
   | 'successRate'
   | 'averageLatencyMs'
-  | 'totalLatencyMs';
+  | 'totalLatencyMs'
+  | 'averageChunkCount'
+  | 'averageResponseBytes'
+  | 'averageAPIResponseBytes';
 type SortDir = 'asc' | 'desc';
 
 interface ModelStatWithRate extends ModelStat {
   successRate: number;
 }
 
+const formatAverageCount = (value: number | null): string => {
+  if (value === null || !Number.isFinite(value)) {
+    return '--';
+  }
+  if (value >= 1000) {
+    return formatCompactNumber(value);
+  }
+  if (value >= 100) {
+    return value.toFixed(0);
+  }
+  if (value >= 10) {
+    return value.toFixed(1);
+  }
+  return value.toFixed(2);
+};
+
 export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCardProps) {
   const { t } = useTranslation();
   const [sortKey, setSortKey] = useState<SortKey>('requests');
@@ -75,6 +95,12 @@ export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCar
   const ariaSort = (key: SortKey): 'none' | 'ascending' | 'descending' =>
     sortKey === key ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none';
   const hasLatencyData = sorted.some((stat) => stat.latencySampleCount > 0);
+  const hasRequestMetricData = sorted.some(
+    (stat) =>
+      stat.averageChunkCount !== null ||
+      stat.averageResponseBytes !== null ||
+      stat.averageAPIResponseBytes !== null
+  );
 
   return (
     <Card title={t('usage_stats.models')} className={styles.detailsFixedCard}>
@@ -140,6 +166,40 @@ export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCar
                         {arrow('totalLatencyMs')}
                       </button>
                     </th>
+                    {hasRequestMetricData && (
+                      <>
+                        <th className={styles.sortableHeader} aria-sort={ariaSort('averageChunkCount')}>
+                          <button
+                            type="button"
+                            className={styles.sortHeaderButton}
+                            onClick={() => handleSort('averageChunkCount')}
+                          >
+                            {t('usage_stats.avg_chunk_per_request')}
+                            {arrow('averageChunkCount')}
+                          </button>
+                        </th>
+                        <th className={styles.sortableHeader} aria-sort={ariaSort('averageResponseBytes')}>
+                          <button
+                            type="button"
+                            className={styles.sortHeaderButton}
+                            onClick={() => handleSort('averageResponseBytes')}
+                          >
+                            {t('usage_stats.avg_response_bytes')}
+                            {arrow('averageResponseBytes')}
+                          </button>
+                        </th>
+                        <th className={styles.sortableHeader} aria-sort={ariaSort('averageAPIResponseBytes')}>
+                          <button
+                            type="button"
+                            className={styles.sortHeaderButton}
+                            onClick={() => handleSort('averageAPIResponseBytes')}
+                          >
+                            {t('usage_stats.avg_api_response_bytes')}
+                            {arrow('averageAPIResponseBytes')}
+                          </button>
+                        </th>
+                      </>
+                    )}
                     <th className={styles.sortableHeader} aria-sort={ariaSort('successRate')}>
                       <button
                         type="button"
@@ -190,6 +250,21 @@ export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCar
                       <td className={styles.durationCell}>
                         {formatDurationMs(stat.totalLatencyMs)}
                       </td>
+                      {hasRequestMetricData && (
+                        <>
+                          <td>{formatAverageCount(stat.averageChunkCount)}</td>
+                          <td>
+                            {stat.averageResponseBytes !== null
+                              ? formatBytes(stat.averageResponseBytes)
+                              : '--'}
+                          </td>
+                          <td>
+                            {stat.averageAPIResponseBytes !== null
+                              ? formatBytes(stat.averageAPIResponseBytes)
+                              : '--'}
+                          </td>
+                        </>
+                      )}
                       <td>
                         <span
                           className={
diff --git a/src/components/usage/RequestEventsDetailsCard.tsx b/src/components/usage/RequestEventsDetailsCard.tsx
@@ -524,9 +524,6 @@ export function RequestEventsDetailsCard({
                     <th title={latencyHint}>{t('usage_stats.first_byte_latency')}</th>
                   )}
                   {hasLatencyData && <th title={latencyHint}>{t('usage_stats.time')}</th>}
-                  <th>{t('usage_stats.chunk_count')}</th>
-                  <th>{t('usage_stats.response_bytes')}</th>
-                  <th>{t('usage_stats.api_response_bytes')}</th>
                   <th>{t('usage_stats.input_tokens')}</th>
                   <th>{t('usage_stats.output_tokens')}</th>
                   <th>{t('usage_stats.reasoning_tokens')}</th>
@@ -570,9 +567,6 @@ export function RequestEventsDetailsCard({
                     {hasLatencyData && (
                       <td className={styles.durationCell}>{formatDurationMs(row.latencyMs)}</td>
                     )}
-                    <td>{row.chunkCount !== null ? row.chunkCount.toLocaleString() : '--'}</td>
-                    <td>{row.responseBytes !== null ? row.responseBytes.toLocaleString() : '--'}</td>
-                    <td>{row.apiResponseBytes !== null ? row.apiResponseBytes.toLocaleString() : '--'}</td>
                     <td>{row.inputTokens.toLocaleString()}</td>
                     <td>{row.outputTokens.toLocaleString()}</td>
                     <td>{row.reasoningTokens.toLocaleString()}</td>
diff --git a/src/components/usage/StatCards.tsx b/src/components/usage/StatCards.tsx
@@ -7,11 +7,14 @@ import {
   IconSatellite,
   IconTimer,
   IconTrendingUp,
+  IconChartLine,
+  IconDownload,
 } from '@/components/ui/icons';
 import {
   LATENCY_SOURCE_FIELD,
   calculateLatencyStatsFromDetails,
   calculateCost,
+  formatBytes,
   formatCompactNumber,
   formatDurationMs,
   formatPerMinuteValue,
@@ -60,7 +63,7 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
 
   const hasPrices = Object.keys(modelPrices).length > 0;
 
-  const { tokenBreakdown, rateStats, totalCost, latencyStats } = useMemo(() => {
+  const { tokenBreakdown, rateStats, totalCost, latencyStats, requestMetrics } = useMemo(() => {
     const empty = {
       tokenBreakdown: { cachedTokens: 0, reasoningTokens: 0 },
       rateStats: { rpm: 0, tpm: 0, windowMinutes: 30, requestCount: 0, tokenCount: 0 },
@@ -70,6 +73,11 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
         totalMs: null as number | null,
         sampleCount: 0,
       },
+      requestMetrics: {
+        chunkCount: 0,
+        responseBytes: 0,
+        apiResponseBytes: 0,
+      },
     };
 
     if (!usage) return empty;
@@ -81,6 +89,9 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
     let cachedTokens = 0;
     let reasoningTokens = 0;
     let totalCost = 0;
+    let chunkCount = 0;
+    let responseBytes = 0;
+    let apiResponseBytes = 0;
 
     const now = nowMs;
     const windowMinutes = 30;
@@ -98,6 +109,18 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
       if (typeof tokens.reasoning_tokens === 'number') {
         reasoningTokens += tokens.reasoning_tokens;
       }
+      chunkCount +=
+        typeof detail.chunk_count === 'number' && Number.isFinite(detail.chunk_count)
+          ? Math.max(detail.chunk_count, 0)
+          : 0;
+      responseBytes +=
+        typeof detail.response_bytes === 'number' && Number.isFinite(detail.response_bytes)
+          ? Math.max(detail.response_bytes, 0)
+          : 0;
+      apiResponseBytes +=
+        typeof detail.api_response_bytes === 'number' && Number.isFinite(detail.api_response_bytes)
+          ? Math.max(detail.api_response_bytes, 0)
+          : 0;
 
       const timestamp = detail.__timestampMs ?? 0;
       if (
@@ -127,6 +150,11 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
       },
       totalCost,
       latencyStats,
+      requestMetrics: {
+        chunkCount,
+        responseBytes,
+        apiResponseBytes,
+      },
     };
   }, [hasPrices, modelPrices, nowMs, usage]);
 
@@ -151,14 +179,58 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
           </span>
           {latencyStats.sampleCount > 0 && (
             <span className={styles.statMetaItem} title={latencyHint}>
-              {t('usage_stats.avg_time')}:{' '}
-              {loading ? '-' : formatDurationMs(latencyStats.averageMs)}
+              {t('usage_stats.avg_time')}: {loading ? '-' : formatDurationMs(latencyStats.averageMs)}
             </span>
           )}
         </>
       ),
       trend: sparklines.requests,
     },
+    {
+      key: 'chunks',
+      label: t('usage_stats.total_chunk_count'),
+      icon: <IconChartLine size={16} />,
+      accent: '#0ea5e9',
+      accentSoft: 'rgba(14, 165, 233, 0.18)',
+      accentBorder: 'rgba(14, 165, 233, 0.32)',
+      value: loading ? '-' : formatCompactNumber(requestMetrics.chunkCount),
+      meta: (
+        <>
+          <span className={styles.statMetaItem}>
+            {t('usage_stats.total_requests')}: {loading ? '-' : (usage?.total_requests ?? 0).toLocaleString()}
+          </span>
+          <span className={styles.statMetaItem}>
+            {t('usage_stats.avg_chunk_per_request')}:{' '}
+            {loading
+              ? '-'
+              : (usage?.total_requests ?? 0) > 0
+                ? (requestMetrics.chunkCount / Math.max(usage?.total_requests ?? 0, 1)).toFixed(1)
+                : '0.0'}
+          </span>
+        </>
+      ),
+      trend: null,
+    },
+    {
+      key: 'traffic',
+      label: t('usage_stats.traffic_stats'),
+      icon: <IconDownload size={16} />,
+      accent: '#14b8a6',
+      accentSoft: 'rgba(20, 184, 166, 0.18)',
+      accentBorder: 'rgba(20, 184, 166, 0.32)',
+      value: loading ? '-' : formatBytes(requestMetrics.responseBytes + requestMetrics.apiResponseBytes),
+      meta: (
+        <>
+          <span className={styles.statMetaItem}>
+            {t('usage_stats.response_bytes')}: {loading ? '-' : formatBytes(requestMetrics.responseBytes)}
+          </span>
+          <span className={styles.statMetaItem}>
+            {t('usage_stats.api_response_bytes')}: {loading ? '-' : formatBytes(requestMetrics.apiResponseBytes)}
+          </span>
+        </>
+      ),
+      trend: null,
+    },
     {
       key: 'tokens',
       label: t('usage_stats.total_tokens'),
@@ -170,12 +242,10 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
       meta: (
         <>
           <span className={styles.statMetaItem}>
-            {t('usage_stats.cached_tokens')}:{' '}
-            {loading ? '-' : formatCompactNumber(tokenBreakdown.cachedTokens)}
+            {t('usage_stats.cached_tokens')}: {loading ? '-' : formatCompactNumber(tokenBreakdown.cachedTokens)}
           </span>
           <span className={styles.statMetaItem}>
-            {t('usage_stats.reasoning_tokens')}:{' '}
-            {loading ? '-' : formatCompactNumber(tokenBreakdown.reasoningTokens)}
+            {t('usage_stats.reasoning_tokens')}: {loading ? '-' : formatCompactNumber(tokenBreakdown.reasoningTokens)}
           </span>
         </>
       ),
@@ -191,8 +261,7 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
       value: loading ? '-' : formatPerMinuteValue(rateStats.rpm),
       meta: (
         <span className={styles.statMetaItem}>
-          {t('usage_stats.total_requests')}:{' '}
-          {loading ? '-' : rateStats.requestCount.toLocaleString()}
+          {t('usage_stats.total_requests')}: {loading ? '-' : rateStats.requestCount.toLocaleString()}
         </span>
       ),
       trend: sparklines.rpm,
@@ -207,8 +276,7 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
       value: loading ? '-' : formatPerMinuteValue(rateStats.tpm),
       meta: (
         <span className={styles.statMetaItem}>
-          {t('usage_stats.total_tokens')}:{' '}
-          {loading ? '-' : formatCompactNumber(rateStats.tokenCount)}
+          {t('usage_stats.total_tokens')}: {loading ? '-' : formatCompactNumber(rateStats.tokenCount)}
         </span>
       ),
       trend: sparklines.tpm,
@@ -224,8 +292,7 @@ export function StatCards({ usage, loading, modelPrices, nowMs, sparklines }: St
       meta: (
         <>
           <span className={styles.statMetaItem}>
-            {t('usage_stats.total_tokens')}:{' '}
-            {loading ? '-' : formatCompactNumber(usage?.total_tokens ?? 0)}
+            {t('usage_stats.total_tokens')}: {loading ? '-' : formatCompactNumber(usage?.total_tokens ?? 0)}
           </span>
           {!hasPrices && (
             <span className={`${styles.statMetaItem} ${styles.statSubtle}`}>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -1062,8 +1062,13 @@
     "request_events_count": "{{count}} events",
     "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",
+    "traffic_stats": "Traffic",
     "response_bytes": "Response Bytes",
     "api_response_bytes": "Upstream Response Bytes",
+    "avg_response_bytes": "Avg Downstream Traffic",
+    "avg_api_response_bytes": "Avg Upstream Traffic",
     "input_tokens": "Input Tokens",
     "output_tokens": "Output Tokens",
     "last_updated": "Updated"
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
@@ -1059,8 +1059,13 @@
     "request_events_count": "{{count}} событий",
     "request_events_limit_hint": "Показано {{shown}} из {{total}} событий для стабильной производительности.",
     "chunk_count": "Количество chunk",
+    "total_chunk_count": "Всего chunk",
+    "avg_chunk_per_request": "Среднее chunk на запрос",
+    "traffic_stats": "Трафик",
     "response_bytes": "Байты ответа",
     "api_response_bytes": "Байты upstream-ответа",
+    "avg_response_bytes": "Средний downstream-трафик",
+    "avg_api_response_bytes": "Средний upstream-трафик",
     "input_tokens": "Входные токены",
     "output_tokens": "Выходные токены",
     "last_updated": "Обновлено"
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
@@ -1062,8 +1062,13 @@
     "request_events_count": "{{count}} 条事件",
     "request_events_limit_hint": "为保证渲染性能，仅展示 {{shown}} / {{total}} 条事件。",
     "chunk_count": "Chunk 数",
+    "total_chunk_count": "Chunk 总数",
+    "avg_chunk_per_request": "平均每请求 Chunk 数",
+    "traffic_stats": "流量统计",
     "response_bytes": "下游响应字节",
     "api_response_bytes": "上游响应字节",
+    "avg_response_bytes": "平均下游响应流量",
+    "avg_api_response_bytes": "平均上游响应流量",
     "input_tokens": "输入 Tokens",
     "output_tokens": "输出 Tokens",
     "last_updated": "更新于"
diff --git a/src/utils/usage.ts b/src/utils/usage.ts
