style: abbreviate trace token counts with k and M

changelogs/unreleased.md

@@ -1,5 +1,7 @@
 # Unreleased
 
+- Show the Tokens card total with two-decimal k/M notation while keeping precise counts in its tooltip.
+
 - Add an Agent-only Tokens statistics card with input/output/cache breakdown, latest-snapshot deduplication, and an unavailable-state placeholder instead of a misleading zero.
 
 - Add Type before UMO in the trace table, with independent blue Agent and green Command chips. Persist command flags in summaries and derive legacy flags for the current page; use explicit colors because the generic Vuetify color pack is disabled.

dashboard/src/components/shared/TraceDisplayer.vue

@@ -953,7 +953,7 @@ onBeforeUnmount(() => {
           <div class="trace-stat"><Send :size="15" /><span>{{ tm("responses") }}</span><strong>{{ selectedStats.responses }}</strong></div>
           <v-tooltip v-if="matchesFilter(selectedEvent, 'models')" location="top">
             <template #activator="{ props }">
-              <div v-bind="props" class="trace-stat" tabindex="0"><Hash :size="15" /><span>{{ tm("tokens.title") }}</span><strong>{{ selectedTokenUsage ? selectedTokenUsage.total.toLocaleString() : "—" }}</strong></div>
+              <div v-bind="props" class="trace-stat" tabindex="0"><Hash :size="15" /><span>{{ tm("tokens.title") }}</span><strong>{{ selectedTokenUsage ? selectedTokenUsage.total >= 1000000 ? (selectedTokenUsage.total / 1000000).toFixed(2) + " M" : (selectedTokenUsage.total / 1000).toFixed(2) + " k" : "—" }}</strong></div>
             </template>
             <div class="trace-token-breakdown">{{ selectedTokenUsage ? tm('tokens.breakdown', { input: selectedTokenUsage.input.toLocaleString(), output: selectedTokenUsage.output.toLocaleString(), cached: selectedTokenUsage.cached.toLocaleString() }) : tm('tokens.unavailable') }}</div>
           </v-tooltip>

dashboard/tests/traceTimelineGroups.test.mjs

@@ -278,6 +278,9 @@ test("missing parents and cyclic span links cannot hang the timeline or hide unr
 
 test("group template and stacked icon styles compile, and all locales include group labels", () => {
   assert.equal(translations.compact.pluginHandler, "调用插件");
+  assert.match(descriptor.template.content, /selectedTokenUsage.total >= 1000000/);
+  assert.match(descriptor.template.content, /toFixed\(2\) \+ " M"/);
+  assert.match(descriptor.template.content, /toFixed\(2\) \+ " k"/);
   assert.match(descriptor.template.content, /v-if="record.fields.handler_type && record.fields.handler_type !== 'AdapterMessageEvent'"/);
   const template = compileTemplate({ source: descriptor.template.content, filename: "TraceDisplayer.vue", id: "trace-groups" });
   assert.deepEqual(template.errors, []);

docs/en/use/webui.md

@@ -172,7 +172,7 @@ The toolbar contains search, fullscreen, font-size controls, and `Install Pip pa
 
 ### Trace
 
-Traces containing Agent calls add a borderless Tokens statistics card. Its total sums this execution's input (including cached input) and output; hover or focus to inspect input, output, and cached-input counts. Only the latest cumulative snapshot per Agent is used, and separate Agents are summed. Unavailable usage shows an em dash rather than a reported zero.
+Traces containing Agent calls add a borderless Tokens statistics card. Its total sums this execution's input (including cached input) and output, displayed with two-decimal k/M notation while the tooltip retains exact counts; hover or focus to inspect input, output, and cached-input counts. Only the latest cumulative snapshot per Agent is used, and separate Agents are summed. Unavailable usage shows an em dash rather than a reported zero.
 
 The Type column precedes UMO. Blue Agent indicates an Agent call; green Command indicates a command-handler call. Both can appear independently on the same trace. Ordinary listeners and event hooks do not count as commands. Summaries provide these flags; legacy command flags are derived for the current page without opening each trace's details.
 

docs/zh/use/webui.md

@@ -172,7 +172,7 @@ ChatUI 支持以下常用能力：
 
 ### 追踪
 
-包含 Agent 调用时，详情统计区增加无边框的 Tokens 卡片，展示本轮输入（含缓存输入）与输出的累计总量；悬停或键盘聚焦可查看输入、输出及缓存命中明细。同一 Agent 的累计快照只取最新一份，多个 Agent 分别累计。没有已上报用量时显示“—”，不按 0 处理。
+包含 Agent 调用时，详情统计区增加无边框的 Tokens 卡片，展示本轮输入（含缓存输入）与输出的累计总量，以两位小数的 k/M 格式显示，悬浮提示保留精确数量；悬停或键盘聚焦可查看输入、输出及缓存命中明细。同一 Agent 的累计快照只取最新一份，多个 Agent 分别累计。没有已上报用量时显示“—”，不按 0 处理。
 
 UMO 前新增“类型”列：蓝色 Agent 表示 Agent 调用，绿色“指令”表示指令处理器调用。同一追踪可同时显示两个标签；普通监听器和事件钩子不算作指令。类型由追踪摘要提供，旧记录的指令标记按当前页数据推导，无需逐条打开详情。