fix(desktop): expose exact usage totals

Compact summaries stay readable while token breakdowns remain available
on hover and keyboard focus.

Signed-off-by: Jiawei Zhao <Phoenix500526@163.com>

Generated-by: OpenAI Codex

Author: Phoenix500526

apps/desktop/src/renderer/locales/settings-usage-copy.ts

@@ -23,6 +23,7 @@ export type UsageSettingsCopy = {
   saveFailed: string; toolbarAria: string; rangeAria: string; ranges: readonly [string, string, string, string];
   refreshingAria: string; refreshAria: string; summaryAria: string; totalRequests: string; totalCost: string; costHelp: string;
   totalTokens: string; tokenDetail(input: string, output: string): string; cacheTokens: string; cacheDetail(miss: string, read: string, creation: string): string;
+  tokenTooltip: { total: string; input: string; output: string; cached: string; new: string; hit: string; created: string };
   viewAria: string; tabs: readonly [string, string, string, string, string]; filtersAria: string; filterPlaceholder: string; filterAria: string;
   statusAria: string; statuses: readonly [string, string, string, string]; details: string; detailsAria: string; recordCount(count: number): string; clearFilters: string;
   summaryOnly: string; showDetails: string; filteredEmpty: string; filteredEmptyHelp: string; requestEmpty: string;
@@ -42,6 +43,7 @@ const SETTINGS_USAGE_COPY = {
     refreshingAria: '正在刷新使用统计', refreshAria: '刷新使用统计', summaryAria: '使用统计汇总指标', totalRequests: '模型调用', totalCost: '总费用', costHelp: '以模型供应商最终结算为准',
     totalTokens: '总 Token', tokenDetail: (input, output) => `输入 ${input} / 输出 ${output}`, cacheTokens: '缓存 Token',
     cacheDetail: (miss, read, creation) => `新 ${miss} / 命中 ${read} / 创建 ${creation}`, viewAria: '使用统计视图', tabs: ['活动记录', '供应商统计', '模型统计', '工具统计', '定价配置'],
+    tokenTooltip: { total: '总计', input: '输入', output: '输出', cached: '缓存', new: '新', hit: '命中', created: '创建' },
     filtersAria: '活动记录筛选', filterPlaceholder: '按模型或工具筛选…', filterAria: '按模型或工具筛选活动记录', statusAria: '活动状态筛选',
     statuses: ['全部状态', '成功', '错误', '已中止'], details: '详情记录', detailsAria: '显示使用统计详情记录', recordCount: (count) => `共 ${count} 条记录`, clearFilters: '清除筛选',
     summaryOnly: '当前仅显示汇总指标。打开详情记录后，可以查看逐条模型调用和工具调用，按模型、工具或状态筛选，并用于排查费用与失败调用。',
@@ -64,6 +66,7 @@ const SETTINGS_USAGE_COPY = {
     refreshingAria: 'Refreshing usage', refreshAria: 'Refresh usage', summaryAria: 'Usage summary metrics', totalRequests: 'Model calls', totalCost: 'Total cost', costHelp: 'Final billing is determined by the model provider',
     totalTokens: 'Total tokens', tokenDetail: (input, output) => `Input ${input} / output ${output}`, cacheTokens: 'Cache tokens',
     cacheDetail: (miss, read, creation) => `New ${miss} / hit ${read} / created ${creation}`, viewAria: 'Usage view', tabs: ['Activity log', 'Providers', 'Models', 'Tools', 'Pricing'],
+    tokenTooltip: { total: 'Total', input: 'Input', output: 'Output', cached: 'Cached', new: 'New', hit: 'Hit', created: 'Created' },
     filtersAria: 'Activity filters', filterPlaceholder: 'Filter by model or tool…', filterAria: 'Filter activity by model or tool', statusAria: 'Filter by activity status',
     statuses: ['All statuses', 'Success', 'Error', 'Aborted'], details: 'Detailed records', detailsAria: 'Show detailed usage records', recordCount: (count) => `${count} ${count === 1 ? 'record' : 'records'}`, clearFilters: 'Clear filters',
     summaryOnly: 'Only summary metrics are shown. Enable detailed records to inspect individual model calls and tool calls, filter by model, tool, or status, and investigate costs or failures.',

apps/desktop/src/renderer/settings/settings-metric-card.tsx

@@ -17,11 +17,12 @@
  * under the License.
  */
 
+import type { ReactNode } from 'react';
 import { StatTile } from '@maka/ui';
 
 /** Thin alias over the shared StatTile (convergence R4) — usage/bot call
  *  sites keep their name; the recipe lives in the primitive. */
-export function MetricCard(props: { title: string; value: string; detail?: string }) {
+export function MetricCard(props: { title: string; value: ReactNode; detail?: string }) {
   return (
     /* Detail audit: was emphasis="filled" — gray-plate tiles while the
        Permission/Health summaries use the outlined StatTile. One tile

apps/desktop/src/renderer/settings/usage-settings-page.tsx

@@ -64,6 +64,18 @@ import { useOptimisticSettingsDraft } from './use-optimistic-settings-draft';
 
 type UsageActiveTab = AppSettings['usage']['activeTab'];
 
+function TokenTooltipContent(props: {
+  rows: ReadonlyArray<readonly [label: string, value: string]>;
+}) {
+  return (
+    <div>
+      {props.rows.map(([label, value]) => (
+        <div key={label}>{label}: {value}</div>
+      ))}
+    </div>
+  );
+}
+
 export function UsageSettingsPage(props: {
   settings: AppSettings;
   stats: UsageStats | null;
@@ -73,6 +85,10 @@ export function UsageSettingsPage(props: {
 }) {
   const locale = useUiLocale();
   const copy = getUsageSettingsCopy(locale);
+  const exactTokenFormatter = useMemo(
+    () => new Intl.NumberFormat(uiLocaleToIntlLocale(locale)),
+    [locale],
+  );
   const persistedUsage = props.settings.usage;
   const [refreshing, setRefreshing] = useState(false);
   const usageRefreshGuard = useActionGuard<'refresh'>();
@@ -200,8 +216,43 @@ export function UsageSettingsPage(props: {
         <div className="settingsUsageSummary" role="group" aria-label={copy.summaryAria}>
           <MetricCard title={copy.totalRequests} value={stats ? String(stats.summary.totalRequests) : '—'} />
           <MetricCard title={copy.totalCost} value={totalCostDisplay} detail={copy.costHelp} />
-          <MetricCard title={copy.totalTokens} value={stats ? formatCompactTokenCount(stats.summary.totalTokens) : '—'} detail={stats ? copy.tokenDetail(formatCompactTokenCount(stats.summary.inputTokens), formatCompactTokenCount(stats.summary.outputTokens)) : undefined} />
-          <MetricCard title={copy.cacheTokens} value={stats ? formatCompactTokenCount(stats.summary.cacheTokens) : '—'} detail={stats ? copy.cacheDetail(formatCompactTokenCount(stats.summary.cacheMiss), formatCompactTokenCount(stats.summary.cacheRead), formatCompactTokenCount(stats.summary.cacheCreation)) : undefined} />
+          <MetricCard
+            title={copy.totalTokens}
+            value={stats ? (
+              <Tooltip
+                content={(
+                  <TokenTooltipContent rows={[
+                    [copy.tokenTooltip.total, exactTokenFormatter.format(stats.summary.totalTokens)],
+                    [copy.tokenTooltip.input, exactTokenFormatter.format(stats.summary.inputTokens)],
+                    [copy.tokenTooltip.output, exactTokenFormatter.format(stats.summary.outputTokens)],
+                  ]} />
+                )}
+                hasHoverIndication={false}
+              >
+                {formatCompactTokenCount(stats.summary.totalTokens)}
+              </Tooltip>
+            ) : '—'}
+            detail={stats ? copy.tokenDetail(formatCompactTokenCount(stats.summary.inputTokens), formatCompactTokenCount(stats.summary.outputTokens)) : undefined}
+          />
+          <MetricCard
+            title={copy.cacheTokens}
+            value={stats ? (
+              <Tooltip
+                content={(
+                  <TokenTooltipContent rows={[
+                    [copy.tokenTooltip.cached, exactTokenFormatter.format(stats.summary.cacheTokens)],
+                    [copy.tokenTooltip.new, exactTokenFormatter.format(stats.summary.cacheMiss)],
+                    [copy.tokenTooltip.hit, exactTokenFormatter.format(stats.summary.cacheRead)],
+                    [copy.tokenTooltip.created, exactTokenFormatter.format(stats.summary.cacheCreation)],
+                  ]} />
+                )}
+                hasHoverIndication={false}
+              >
+                {formatCompactTokenCount(stats.summary.cacheTokens)}
+              </Tooltip>
+            ) : '—'}
+            detail={stats ? copy.cacheDetail(formatCompactTokenCount(stats.summary.cacheMiss), formatCompactTokenCount(stats.summary.cacheRead), formatCompactTokenCount(stats.summary.cacheCreation)) : undefined}
+          />
         </div>
       </div>