@mzzsfy/dsh-usage-dash 0.10.1 → 0.10.2

package/README.md

@@ -1,6 +1,6 @@
 # @mzzsfy/dsh-usage-dash
 
-用量统计面板(dsh 插件)。天/小时/分钟三粒度 token 与请求统计,设置页自绘面板:汇总卡、活动热力图、缓存命中率曲线、模型 donut 与列表、回扫状态行、会话底栏接管与回合费用芯片,支持 en/zh 双语与可选费用估算。复刻自 [HaoyueQin/dsh-usage-statistics-panel](https://github.com/HaoyueQin/dsh-usage-statistics-panel),感谢原作者。
+用量统计面板(dsh 插件)。天/小时/分钟三粒度 token 与请求统计,设置页自绘面板:汇总卡、活动热力图、缓存命中率曲线、模型 donut 与列表、回扫状态行、会话底栏追加与回合费用芯片,支持 en/zh 双语与可选费用估算。复刻自 [HaoyueQin/dsh-usage-statistics-panel](https://github.com/HaoyueQin/dsh-usage-statistics-panel),感谢原作者。
 
 ## 功能(全阶段已交付)
 
@@ -13,7 +13,7 @@
 - 模型 donut 与列表:按 token 排序的模型占比环形图(中心为总量,模型不超过 5 个时全展示,超过时折叠为前 4 +「其他」,「其他」可展开),每行名称两行展示(厂商/模型名),右侧三排:第一排 token 数·占比,第二排输入输出占比构成(缓存/输入/输出 三段各占该模型 token 总量,缓存=读+写,三段合计 100%,无四桶数据不显示),第三排估算费用·TTFT·生成速度(费用需配置定价规则,TTFT/速度无配对数据不显示),悬停明细含输入/缓存读/缓存写/输出四桶 token 拆分并联动
 - 三粒度堆叠柱状趋势图(数据量大时裁最旧并提示);节头「金额」开关把柱状图从 token 消耗切到金额消耗——柱按模型堆叠估算费用,标题与左轴同步切金额读数(悬停明细保持 token 口径与估算费用行不变,命中率/速度/首 token 延迟曲线不受影响),三粒度通用;开关仅在存在正计价数据时显示(未配置规则或全量未计价时不渲染,避免全零金额柱误导);图例可点击切换显隐:点击单选(仅显示该项,左轴刻度按可见项归一)/再点恢复全部,Ctrl+点击多选,隐藏最后一项无效;悬停明细按当前时段数据展示,零用量模型不显示,全零时段不显示悬浮框
 - 回扫状态行默认隐藏:首次启用自动回扫历史会话,运行中显示进度(常显);右上角为折叠箭头与刷新图标,折叠层内展开扫描异常日志块(逐条:时间/类型/明细,计数即明细条数,上限 200 条超限丢最旧,重建时清空)与「重建」入口(二次确认 3 秒后清库重扫),采集错误常显;折叠且有待读信息(异常日志或写入失败)时箭头带红点提醒,展开后消失;工具栏分主区与右侧操作区,窄宽度时挡位组在主区内换行
-- 会话底栏接管:替换官方信息行为增强版,偏好卡三个开关默认全开——精确缓存命中率(两位小数)、会话 Token 明细(总/命中缓存/未命中缓存/输出)、费用显示(底栏费用项、趋势 tooltip 费用行与回合费用芯片);三开关全关时与官方逐字节一致
+- 会话底栏追加(append 模式):本插件在官方 activity/usage 胶囊之后仅显示估算费用,不另建明细按钮或浮层。精确缓存命中率开关(`cachePrecision`)原位修改官方 usage 胶囊的命中率文字、按钮 `aria-label` 与官方弹窗原命中率 `dd`,统一显示两位小数;关闭开关或卸载增强时还原,保留官方节点与交互。「会话 Token 明细」开关(`tokenDetail`)只在已打开的官方 `[data-session-stats-usage]` 用量弹窗 `dl` 末尾追加「输入合计（含缓存）」(未缓存输入+缓存读+缓存写),仅当 `cacheWriteTokens > 0` 再追加「未命中合计（含缓存写入）」(未缓存输入+缓存写入)。合计使用完整千分位计数,官方已有的总量、缓存读写、输出与命中率不重复追加;无输入用量时不追加零值合计。偏好卡三个开关仍默认全开,已有偏好继续生效;「费用显示」控制底栏费用、趋势 tooltip 费用行与回合费用芯片。官方弹窗关闭时不挂载补充行;空用量无插件可见条目,精度或明细单独开启均不产生底栏入口。官方未公开用量弹窗扩展 slot,上述增强依赖宿主 DOM 语义标记,标记改变或无法唯一确认弹窗归属时停用相应增强,底栏费用仍独立显示。
 - 回合费用芯片:经官方 `conversation.chat.assistant-actions` 槽注入动作行(复制与分支图标之间,官方赞/踩与上下文跳转同排),每轮对话结束后显示该轮估算费用(悬停 title 带 token 摘要与估算口径;显隐节奏随官方动作行——最新一轮常显,历史轮悬停显现;受「费用显示」开关;官方用量芯片弹窗已有 token 明细,芯片只承载费用)。旧宿主无该插槽时告警禁用
 - 定价规则编辑器:设置面板内按**模型分组**编辑,组头 = 模型键(整组一次改名,改后即时重新聚合)+ 删除整组;组内 = **默认价**槽(价格四桶,不设条件——附加规则全不命中时兜底,禁排序/删除)+ **附加计费规则**列表(四桶单价 + 条件组合,「+添加条件」追加条件行,行内下拉切换类型,规则带 ↑/↓ 调序与删除),「添加额外计费规则」追加一条(默认带全天时段条件);货币为全局切换(「定价规则」标题右侧,仅 ¥/$ 两档,整表统一),显式「保存」整表写入
 - 双语:跟随宿主语言设置(设置 → 通用 → 语言)即时切换 en/zh
@@ -43,7 +43,7 @@
 
 本插件复刻自 [HaoyueQin/dsh-usage-statistics-panel](https://github.com/HaoyueQin/dsh-usage-statistics-panel)(npm 包 [dsh-usage-statistics-panel](https://www.npmjs.com/package/dsh-usage-statistics-panel)),感谢原作者 HaoyueQin 的开源实现。在其基础上补足缺失的小时/分钟粒度与热力图/曲线/donut,移除其远程访问限制。路由(`/api/usage-dash/*`)与存储域(`usage_stats`)均不冲突,共存只是重复采集。
 
-同装时两插件争抢会话底栏 'stats' 槽位:槽注册表对同 id 同 priority 直接抛错,本插件以更低 priority 注册遮蔽原插件(lowest renders),同装时本插件胜出、卸载本插件后原插件恢复。仍建议卸载原插件以避免重复采集。
+同装时两插件争抢会话底栏 'stats' 槽位(append 后位增强条目):槽注册表对同 id 同 priority 直接抛错,本插件以更低 priority 注册遮蔽原插件(lowest renders),同装时本插件胜出、卸载本插件后原插件恢复。仍建议卸载原插件以避免重复采集。
 
 ## 存档兼容
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mzzsfy/dsh-usage-dash",
-  "description": "用量统计面板:天/小时/分钟三粒度 token 与请求统计,26 周活跃热力图、缓存命中率/生成速度/首 token 延迟曲线、模型占比与四桶明细,会话底栏信息接管与官方动作行回合费用芯片,多条件分时段定价规则与费用估算,en/zh 双语;复刻自 github.com/HaoyueQin/dsh-usage-statistics-panel,感谢原作者 HaoyueQin",
-  "version": "0.10.1",
+  "description": "用量统计面板:天/小时/分钟三粒度 token 与请求统计,26 周活跃热力图、缓存命中率/生成速度/首 token 延迟曲线、模型占比与四桶明细,会话底栏官方数据后追加增强项与官方动作行回合费用芯片,多条件分时段定价规则与费用估算,en/zh 双语;复刻自 github.com/HaoyueQin/dsh-usage-statistics-panel,感谢原作者 HaoyueQin",
+  "version": "0.10.2",
   "type": "module",
   "main": "src/index.js",
   "exports": {

package/src/client.js

@@ -246,19 +246,14 @@ const MESSAGES_ZH = {
   anomalyLog: '扫描异常日志',
   logKindSkipped: '跳过会话',
   logKindRecord: '写入失败',
-  'stats.counts': '{turns} 轮 · {steps} 步',
-  'stats.llm': 'LLM {duration}',
-  'stats.toolCall': '工具调用 {duration}',
-  'stats.ttftAverage': '首 token 平均 {duration}',
-  'stats.tokensPerSecond': '{throughput} tok/s',
-  'stats.cacheHit': '缓存命中 {percent}%',
+  'stats.inputTotal': '输入合计（含缓存）',
+  'stats.missTotal': '未命中合计（含缓存写入）',
   'stats.tokens': '输入 {input} tok · 输出 {output} tok',
   'turnCostChip': '{cost}',
-  'stats.tokensDetail': '总 {total} tok · 输入 {input} tok · 命中缓存 {hit} tok · 未命中缓存 {miss} tok · 输出 {output} tok',
   cachePrecision: '精确缓存命中率',
-  cachePrecisionDesc: '在会话底部信息栏以两位小数显示缓存命中率。',
+  cachePrecisionDesc: '将官方用量胶囊及弹窗中的命中率显示为两位小数。',
   tokenDetail: '会话 Token 明细',
-  tokenDetailDesc: '在会话底部信息栏显示总 Token、命中/未命中缓存与输出明细。',
+  tokenDetailDesc: '在官方 Token 用量弹窗末尾追加含缓存输入合计；存在缓存写入时追加未命中合计。',
   costDisplay: '费用显示',
   costDisplayDesc: '在信息栏、趋势悬浮与回合费用芯片中显示按当前费率估算的费用。',
   costTitle: '按当前费率对历史用量估算,精度为小时级',
@@ -394,19 +389,14 @@ const MESSAGES_EN = {
   anomalyLog: 'Scan anomaly log',
   logKindSkipped: 'skipped',
   logKindRecord: 'write failed',
-  'stats.counts': '{turns} turns · {steps} steps',
-  'stats.llm': 'LLM {duration}',
-  'stats.toolCall': 'Tool call {duration}',
-  'stats.ttftAverage': 'TTFT avg {duration}',
-  'stats.tokensPerSecond': '{throughput} tok/s',
-  'stats.cacheHit': 'Cache hit {percent}%',
+  'stats.inputTotal': 'Total input (including cache)',
+  'stats.missTotal': 'Total cache miss (including writes)',
   'stats.tokens': 'Input {input} tok · Output {output} tok',
   'turnCostChip': '{cost}',
-  'stats.tokensDetail': 'Total {total} tok · Input {input} tok · Cache hit {hit} tok · Cache miss {miss} tok · Output {output} tok',
   cachePrecision: 'Precise cache-hit rate',
-  cachePrecisionDesc: 'Show the cache-hit rate with two decimals in the session stats line.',
+  cachePrecisionDesc: 'Show two decimals in the official usage pill and Token usage dialog.',
   tokenDetail: 'Session token detail',
-  tokenDetailDesc: 'Show total, cache hit/miss and output tokens in the session stats line.',
+  tokenDetailDesc: 'Append total input including cache to the official Token usage dialog; add total cache misses when cache writes exist.',
   costDisplay: 'Cost display',
   costDisplayDesc: 'Show costs estimated at current rates in the stats line, trend tooltips and the turn cost chip.',
   costTitle: 'Estimated at current rates over historical usage, hourly precision',
@@ -1029,19 +1019,13 @@ function tipPlace(anchor, tip, bounds, gap = TIP_GAP_PX, margin = TIP_MARGIN_PX)
   return { left, top }
 }
 
-// ===== 底部信息栏:官方 StatsLine 口径(dsh-client-ui-chat/lib/client.js 同构)+ usp 双开关 =====
+// ===== 底部信息栏(append 模式):官方 pill 数据后追加增强项 + usp 双开关 =====
 const STATS_LINE_STORAGE_KEY = 'dsh-usage-dash:stats-line'
 const LOCALE_NS = 'usage-dash'
-const STATS_ITEM_SEPARATOR = ' · '
 const MS_PER_SECOND = 1000
 const SECONDS_PER_MINUTE = 60
 const NUMBER_ONE_DECIMAL = 10
 const NUMBER_COMPACT_INT_THRESHOLD = 100
-const PERCENT_TENTH_SCALE = 10
-const PERCENT_GAP_DOUBLE_SCALE = 2 * PERCENT_SCALE
-const PERCENT_LOSS_BASE = 10
-const PERCENT_LOSS_CAP = 4
-const PERCENT_LOSS_DEFAULT = 5
 const PERCENT_PRECISE_CAP = 99.99
 const DURATION_MINUTE_SECONDS = 60
 const TPS_INTEGER_THRESHOLD = 10
@@ -1051,65 +1035,6 @@ function billedInputTokens(usage) {
   return usage.uncachedInputTokens + usage.cacheReadTokens + usage.cacheWriteTokens
 }
 
-// 官方二分取整:求最大 units 使 hit ≥ (2u-1)q + ceil((2u-1)r/2s),Math.round(hit·scale/D) 的保守复刻
-function roundedPercentUnits(cacheReadTokens, denominator, decimalPlaces) {
-  const scale = (decimalPlaces === 0 ? 1 : PERCENT_TENTH_SCALE) * PERCENT_SCALE
-  const doubledScale = scale * 2
-  const quotient = Math.floor(denominator / doubledScale)
-  const remainder = denominator % doubledScale
-  const holds = (candidate) => {
-    const doubled = candidate * 2 - 1
-    return cacheReadTokens >= doubled * quotient + Math.ceil((doubled * remainder) / doubledScale)
-  }
-  let low = 0
-  let high = scale
-  while (low < high) {
-    const mid = Math.floor((low + high + 1) / 2)
-    if (holds(mid)) low = mid
-    else high = mid - 1
-  }
-  return low
-}
-
-function displayPercentUnits(units, decimalPlaces) {
-  if (decimalPlaces === 0) return String(units)
-  const whole = Math.floor(units / PERCENT_TENTH_SCALE)
-  const tenths = units % PERCENT_TENTH_SCALE
-  return tenths === 0 ? String(whole) : `${whole}.${tenths}`
-}
-
-// 官方整数百分比:0.5 进位;舍入溢出 100 而仍有 miss 时以 99.x 闭式诚实呈现
-function formatCacheHitPercent(cacheReadTokens, promptTokens, decimalPlaces = 0) {
-  if (promptTokens === 0) return null
-  const missed = promptTokens - cacheReadTokens
-  if (missed === 0) return '100'
-  const roundedUnits = roundedPercentUnits(cacheReadTokens, promptTokens, decimalPlaces)
-  const unitsCeiling = decimalPlaces === 0 ? PERCENT_SCALE : PERCENT_SCALE * PERCENT_TENTH_SCALE
-  if (roundedUnits < unitsCeiling) return displayPercentUnits(roundedUnits, decimalPlaces)
-  let distinguishingPlaces = 1
-  let scaledDoubleGap = missed * PERCENT_GAP_DOUBLE_SCALE
-  const denominatorTens = Math.floor(promptTokens / PERCENT_TENTH_SCALE)
-  while (scaledDoubleGap <= denominatorTens) {
-    scaledDoubleGap *= PERCENT_TENTH_SCALE
-    distinguishingPlaces += 1
-  }
-  const denominatorOnes = promptTokens % PERCENT_TENTH_SCALE
-  let roundedLoss = PERCENT_LOSS_DEFAULT
-  for (let loss = 1; loss <= PERCENT_LOSS_CAP; loss++) {
-    const factor = loss * 2 + 1
-    const threshold = factor * denominatorTens + Math.floor((factor * denominatorOnes) / PERCENT_TENTH_SCALE)
-    if (scaledDoubleGap <= threshold) {
-      roundedLoss = loss
-      break
-    }
-  }
-  return `99.${'9'.repeat(distinguishingPlaces - 1)}${PERCENT_LOSS_BASE - roundedLoss}`
-}
-
-function cacheHitPercent(usage) {
-  return formatCacheHitPercent(usage.cacheReadTokens, billedInputTokens(usage), 0)
-}
-
 // usp 增强:恒两位小数,有 miss 即 99.99 封顶(镜像官方整数路径的诚实性)
 function cacheHitPercentPrecise(usage) {
   const billed = billedInputTokens(usage)
@@ -1148,90 +1073,68 @@ function formatTokensPerSecond(tps) {
   return String(Math.round(clamped * NUMBER_ONE_DECIMAL) / NUMBER_ONE_DECIMAL)
 }
 
-// 官方节点读数:TTFT/decode 仅在对应时间戳齐全时产出,usage 须为非负有限数
-function assistantStepReading(node) {
-  const timing = node.timing
-  const ttftMs = timing !== undefined && timing.stepStartTime !== null && timing.firstTokenTime !== null
-    ? Math.max(0, timing.firstTokenTime - timing.stepStartTime)
-    : null
-  const decodeMs = timing !== undefined && timing.firstTokenTime !== null
-    ? Math.max(0, timing.completedTime - timing.firstTokenTime)
-    : null
-  const outputTokens = typeof node.usage === 'number' && Number.isFinite(node.usage) && node.usage >= 0
-    ? node.usage
-    : null
-  return { ttftMs, decodeMs, outputTokens }
-}
-
-// 官方窗口折叠:tool-result 累计工具时长,assistant 计轮次/步数/LLM 时长并聚合读数
-function deriveStats(nodes) {
-  const turns = new Set()
-  const stats = { turns: 0, steps: 0, llmMs: 0, toolMs: 0, ttftMs: 0, ttftSteps: 0, decodeMs: 0, decodeTokens: 0 }
-  for (const node of nodes) {
-    if (node.kind === 'tool-result') {
-      if (node.callTime !== null) stats.toolMs += Math.max(0, node.time - node.callTime)
-      continue
-    }
-    if (node.kind !== 'assistant') continue
-    turns.add(node.turn)
-    stats.steps += 1
-    const timing = node.timing
-    if (timing !== undefined && timing.stepStartTime !== null) {
-      stats.llmMs += Math.max(0, timing.completedTime - timing.stepStartTime)
-    }
-    const reading = assistantStepReading(node)
-    if (reading.ttftMs !== null) {
-      stats.ttftMs += reading.ttftMs
-      stats.ttftSteps += 1
+function buildUsageDialogRows(usage, prefs, t) {
+  if (!usage || billedInputTokens(usage) === 0) return []
+  const rows = []
+  if (prefs.tokenDetail) {
+    rows.push({ key: 'input', label: t('stats.inputTotal'), value: `${formatTokens(billedInputTokens(usage))} tok` })
+    if (usage.cacheWriteTokens > 0) rows.push({ key: 'miss', label: t('stats.missTotal'), value: `${formatTokens(usage.uncachedInputTokens + usage.cacheWriteTokens)} tok` })
+  }
+  return rows
+}
+
+// 仅改写百分比文本，保留官方节点与事件；卸载时只还原仍由本次增强持有的值。
+function observeUsageDialog(anchor, document, Observer, onTarget, percent) {
+  let current
+  const changes = new Map()
+  const patch = (node, key, read, write) => {
+    const before = read()
+    if (typeof before !== 'string') return
+    const after = before.replace(/\d+(?:\.\d+)?%/g, `${percent}%`)
+    if (after === before) return
+    let fields = changes.get(node)
+    if (!fields) changes.set(node, fields = new Map())
+    fields.set(key, { before, after, read, write })
+    write(after)
+  }
+  const patchText = (element) => {
+    if (!element || percent === null) return
+    const walker = document.createTreeWalker(element, 4)
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      const textNode = node
+      patch(textNode, 'text', () => textNode.nodeValue, (value) => { textNode.nodeValue = value })
     }
-    if (reading.decodeMs !== null && reading.outputTokens !== null) {
-      stats.decodeMs += reading.decodeMs
-      stats.decodeTokens += reading.outputTokens
+  }
+  const releaseChanged = (records) => {
+    for (const record of records) {
+      const fields = changes.get(record.target)
+      if (record.type === 'characterData') fields?.delete('text')
+      if (record.type === 'attributes' && record.attributeName === 'aria-label') fields?.delete('aria')
     }
+    for (const [node, fields] of changes) if (fields.size === 0 || !document.contains(node)) changes.delete(node)
   }
-  stats.turns = turns.size
-  return stats
-}
-
-// 分组装配:官方 StatsLine 分组序 + usp 双开关(精确命中率/Token 明细)+ 费用开关;
-// 费用组在 Token 组后追加:开关关/无用量/价格未加载不渲染,规则已载无命中价显示占位符
-function buildStatsGroups(stats, usage, prefs, t, pricingRules = null) {
-  const groups = []
-  if (stats.steps > 0) {
-    groups.push(t('stats.counts', { turns: stats.turns, steps: stats.steps }))
-    const durations = []
-    if (stats.llmMs > 0) durations.push(t('stats.llm', { duration: formatDuration(stats.llmMs, t) }))
-    if (stats.toolMs > 0) durations.push(t('stats.toolCall', { duration: formatDuration(stats.toolMs, t) }))
-    if (durations.length > 0) groups.push(durations.join(STATS_ITEM_SEPARATOR))
-    const speeds = []
-    if (stats.ttftSteps > 0) speeds.push(t('stats.ttftAverage', { duration: formatDuration(stats.ttftMs / stats.ttftSteps, t) }))
-    if (stats.decodeMs > 0) speeds.push(t('stats.tokensPerSecond', {
-      throughput: formatTokensPerSecond(stats.decodeTokens / (stats.decodeMs / MS_PER_SECOND)),
-    }))
-    if (speeds.length > 0) groups.push(speeds.join(STATS_ITEM_SEPARATOR))
+  const update = (records = []) => {
+    releaseChanged(records)
+    const pill = anchor?.closest('[data-slot="conversation.composer.dock"]')?.querySelector('[data-composer-stat="usage"]')
+    const button = pill?.querySelector('button')
+    patchText(pill)
+    if (button && percent !== null) patch(button, 'aria', () => button.getAttribute('aria-label'), (value) => button.setAttribute('aria-label', value))
+    const dialogs = document.querySelectorAll('[data-session-stats-usage]')
+    const next = button?.getAttribute('aria-expanded') === 'true' && dialogs.length === 1 ? dialogs[0] : null
+    patchText(next?.querySelector('dd'))
+    observer.takeRecords()
+    if (next !== current) { current = next; onTarget(next) }
   }
-  if (usage !== undefined && (billedInputTokens(usage) > 0 || usage.outputTokens > 0)) {
-    const percent = prefs.cachePrecision ? cacheHitPercentPrecise(usage) : cacheHitPercent(usage)
-    if (percent !== null) groups.push(t('stats.cacheHit', { percent }))
-    if (prefs.tokenDetail) {
-      const billed = billedInputTokens(usage)
-      groups.push(t('stats.tokensDetail', {
-        total: formatTokensCompact(billed + usage.outputTokens, t),
-        input: formatTokensCompact(billed, t),
-        hit: formatTokensCompact(usage.cacheReadTokens, t),
-        miss: formatTokensCompact(usage.uncachedInputTokens + usage.cacheWriteTokens, t),
-        output: formatTokensCompact(usage.outputTokens, t),
-      }))
-    } else {
-      groups.push(t('stats.tokens', {
-        input: formatTokensCompact(billedInputTokens(usage), t),
-        output: formatTokensCompact(usage.outputTokens, t),
-      }))
+  const observer = new Observer(update)
+  observer.observe(document.body, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['aria-expanded', 'aria-label'] })
+  update()
+  return () => {
+    releaseChanged(observer.takeRecords())
+    observer.disconnect()
+    for (const fields of changes.values()) for (const change of fields.values()) {
+      if (change.read() === change.after) change.write(change.before)
     }
-    const costItem = buildCostItem(usage, pricingRules, prefs, t)
-    if (costItem !== null) groups.push(costItem)
   }
-  return groups
 }
 
 // usp stats-line 偏好状态工厂:storage 注入便于 Node 测试,读写全防御,内存值始终生效
@@ -1949,7 +1852,6 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__) {
     // 遮蔽语义:同 id 同 priority 属注册冲突(注册表抛错),需取更低值压过
     // 同格竞争者;usp 同款接管注册用 -1,本插件取次低值,官方无显式 priority(默认 0)
     const STATS_SLOT_PRIORITY = -2
-    const STATS_LINE_TITLE_SEPARATOR = ' | '
     const VIEW_TABS = [
       { id: 'day', labelKey: 'viewDay' },
       { id: 'hour', labelKey: 'viewHour' },
@@ -2192,8 +2094,8 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
 .ud-pricing-actions{display:flex;align-items:center;gap:8px}
 .ud-rule-add{border:1px dashed var(--dsw-alias-border-l2);border-radius:8px;background:transparent;color:var(--dsw-alias-label-tertiary);padding:8px;font-size:12px;cursor:pointer}
 .ud-rule-add:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
-.ud-statsline-root{text-align:center;max-width:var(--dsh-chat-content-width);box-sizing:border-box;width:100%;padding:4px calc(var(--dsh-composer-side-clearance) + 16px) 0px;font-size:var(--dsh-content-font-size-secondary,13px);line-height:calc(20px + var(--dsh-content-font-delta-secondary,0px));color:var(--dsw-alias-label-tertiary);white-space:nowrap;text-overflow:ellipsis;margin:0 auto;display:block;overflow:hidden}
-.ud-statsline-sep{color:var(--dsw-alias-separator-primary);margin:0 10px}
+/* dock 内并列条目:官方 pill 满宽不动,空间不足时高收缩因子让自身先收缩(min-width:0 配合 ellipsis),挤压力不转嫁官方 */
+.ud-statsline-root{text-align:center;max-width:var(--dsh-chat-content-width);box-sizing:border-box;flex:0 999 auto;min-width:0;padding:0;font-size:var(--dsh-content-font-size-secondary,13px);line-height:calc(20px + var(--dsh-content-font-delta-secondary,0px));color:var(--dsw-alias-label-tertiary);white-space:nowrap;text-overflow:ellipsis;margin:0;margin-left:calc(0px - var(--ud-dock-gap,0px));text-indent:var(--ud-dock-gap,0px);display:block;overflow:hidden}
 /* 芯片 portal 至动作行末尾,历史轮悬停/焦点显隐随父级 data-actions-reveal,无需自绘规则 */
 .ud-turn-cost{font-size:var(--dsh-content-font-size-secondary,13px);color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:${TURN_COST_GAP_PX}px}
 `
@@ -2691,17 +2593,18 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
           h('span', { className: 'ud-switch__thumb' })))
     }
 
-    // 底部信息栏接管:与官方 StatsLine 同 id 'stats' 的槽条目,双开关控制增强项
-    // 语言切换经槽的 locale 座以新 t 引用驱动 memo 重渲染
-    const StatsLineEnhanced = React.memo(function StatsLineEnhanced({ useChat, useProjection, t = defaultT }) {
-      if (typeof useProjection !== 'function' || typeof useChat !== 'function') return null
+    function useUsageDialogTarget(anchorRef, percent) {
+      const [target, setTarget] = useState(null)
+      useEffect(() => observeUsageDialog(anchorRef.current, document, MutationObserver, setTarget, percent), [percent])
+      return target
+    }
+
+    // 官方明细末尾仅追加补充项，底栏保留费用。
+    const StatsLineAppended = React.memo(function StatsLineAppended({ useProjection, t = defaultT }) {
+      if (typeof useProjection !== 'function') return null
       const usage = useProjection('tokenUsage')
-      const projected = useProjection('sessionStats')
-      const settledNodes = useChat((state) => state.legacy.nodes)
-      const stats = useMemo(() => projected ?? deriveStats(settledNodes ?? []), [projected, settledNodes])
       const [prefs, setPrefs] = useState(() => statsLineState.get())
       useEffect(() => statsLineState.subscribe(() => setPrefs(statsLineState.get())), [])
-      // 价格异步首帧可能未回:回包经状态刷新补渲染,未回期间费用组不渲染
       const [pricingRules, setPricingRules] = useState(null)
       useEffect(() => {
         let alive = true
@@ -2710,31 +2613,28 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
         })
         return () => { alive = false }
       }, [])
-      const groups = buildStatsGroups(stats, usage, prefs, t, pricingRules)
-      const costItem = buildCostItem(usage, pricingRules, prefs, t)
-      const entries = groups.map((text) => ({ text }))
-      if (costItem !== null && groups[groups.length - 1] === costItem) {
-        entries[entries.length - 1] = { text: costItem, title: t('statsCostTitle') }
-      }
-      const rootRef = useRef(null)
-      const [truncated, setTruncated] = useState(false)
+      const anchorRef = useRef(null)
+      const costRef = useRef(null)
       useLayoutEffect(() => {
-        const element = rootRef.current
-        if (!element) return undefined
-        const measure = () => setTruncated(element.scrollWidth > element.clientWidth)
-        measure()
-        const observer = new ResizeObserver(measure)
-        observer.observe(element)
-        return () => observer.disconnect()
-      }, [groups])
-      if (entries.length === 0) return null
-      return h('div', {
-        className: 'ud-statsline-root',
-        ref: rootRef,
-        title: truncated ? entries.map((entry) => entry.text).join(STATS_LINE_TITLE_SEPARATOR) : undefined,
-      }, entries.map((entry, index) => h(React.Fragment, { key: index },
-        index > 0 && h('span', { className: 'ud-statsline-sep', 'aria-hidden': true }, '|'),
-        entry.title ? h('span', { title: entry.title }, entry.text) : entry.text)))
+        const element = costRef.current
+        const dock = anchorRef.current?.closest('[data-slot="conversation.composer.dock"]')?.parentElement
+        if (element && dock) element.style.setProperty('--ud-dock-gap', getComputedStyle(dock).columnGap)
+      })
+      const percent = prefs.cachePrecision && usage ? cacheHitPercentPrecise(usage) : null
+      const target = useUsageDialogTarget(anchorRef, percent)
+      const rows = buildUsageDialogRows(usage, prefs, t)
+      const costItem = usage && (billedInputTokens(usage) > 0 || usage.outputTokens > 0)
+        ? buildCostItem(usage, pricingRules, prefs, t)
+        : null
+      const details = target && createPortal && rows.length > 0
+        ? createPortal(rows.map((row) => h(React.Fragment, { key: row.key },
+          h('dt', { 'data-ud-usage-detail': row.key }, row.label),
+          h('dd', { 'data-ud-usage-detail': row.key }, row.value))), target)
+        : null
+      return h(React.Fragment, null,
+        h('span', { ref: anchorRef, hidden: true }),
+        costItem !== null && h('div', { ref: costRef, className: 'ud-statsline-root', title: t('statsCostTitle') }, costItem),
+        details)
     })
 
     // 注入点B 组件:回合费用芯片,官方动作行内渲染(复制与分支图标之间,赞踩/上下文跳转同排);
@@ -3550,12 +3450,13 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
             { name: 'settings.section', id: 'usage-dash', order: 45, label: () => ctx.locale.bind(LOCALE_NS)('nav'), locale: LOCALE_NS },
             UsageDashPanel,
           ))
-        // 两段式接管官方 stats 格:宿主缺该插槽时注册抛错即禁用本功能
+        // 两段式注册官方 dock 槽增强条目:宿主缺该插槽时注册抛错即禁用本功能;
+        // order 2 排官方 activity(0)/usage(1) 之后,append 在官方数据后面
         try {
           ctx.slots.inject('conversation.composer.dock', () =>
             ctx.slots.register(
-              { name: 'conversation.composer.dock', id: 'stats', order: 0, priority: STATS_SLOT_PRIORITY, locale: LOCALE_NS },
-              StatsLineEnhanced,
+              { name: 'conversation.composer.dock', id: 'stats', order: 2, priority: STATS_SLOT_PRIORITY, locale: LOCALE_NS },
+              StatsLineAppended,
             ))
         } catch (error) {
           console.warn('[usage-dash] 底部信息栏未注册(宿主无 conversation.composer.dock 插槽)', error)

package/test/stats-line-render.test.mjs

@@ -0,0 +1,75 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { CLIENT_BODY, DECLARATION_NAMES } from './client-eval.mjs'
+
+const core = new Function(`${CLIENT_BODY}\nreturn { ${DECLARATION_NAMES.join(', ')} }`)()
+const usage = { uncachedInputTokens: 1000, cacheReadTokens: 4000, cacheWriteTokens: 0, outputTokens: 500 }
+const on = { cachePrecision: true, tokenDetail: true, costDisplay: true }
+const rules = [{ model: '*/*', currency: '¥', price: { input: 2, cacheRead: 0, cacheWrite: 0, output: 0 }, conditions: [] }]
+
+function render(options = {}) {
+  const { prefs = on, lang = 'zh', pricing = rules, target = {} } = options
+  const value = Object.hasOwn(options, 'value') ? options.value : usage
+  const source = CLIENT_BODY.match(/const StatsLineAppended = React\.memo\(([\s\S]*?)\n    \}\)/)?.[1] + '\n}'
+  let stateIndex = 0
+  const React = { Fragment: 'fragment', useId: () => ':test:' }
+  const h = (type, props, ...children) => ({ type, props: props ?? {}, children: children.flat(Infinity).filter((x) => x != null && x !== false) })
+  const useState = (init) => [stateIndex++ === 1 ? pricing : typeof init === 'function' ? init() : init, () => {}]
+  const noop = () => {}
+  const names = Object.keys(core)
+  const component = new Function(...names, 'React', 'h', 'useState', 'useEffect', 'useLayoutEffect', 'useRef', 'statsLineState', 'defaultT', 'fetchPricing', 'useUsageDialogTarget', 'createPortal', `return (${source})`)(...Object.values(core), React, h, useState, noop, noop, () => ({ current: null }), { get: () => prefs }, core.createTranslator(core.MESSAGES_ZH), noop, () => target, (content, container) => ({ type: 'portal', props: { container }, children: [content].flat(Infinity) }))
+  return component({ useProjection: () => value, t: core.createTranslator(lang === 'en' ? core.MESSAGES_EN : core.MESSAGES_ZH) })
+}
+const nodes = (tree) => tree && typeof tree === 'object' ? [tree, ...tree.children.flatMap(nodes)] : []
+const text = (tree) => typeof tree === 'string' ? tree : tree?.children.map(text).join('') ?? ''
+const inlineText = (tree) => tree?.type === 'portal' ? '' : typeof tree === 'string' ? tree : tree?.children.map(inlineText).join('') ?? ''
+
+test('Given 旧三开偏好 When 渲染 Then 底栏只有费用，补充项追加到官方弹窗', () => {
+  const target = {}
+  const tree = render({ target })
+  assert.equal(inlineText(tree), '费用 ≈ ¥0.0020')
+  assert.equal(nodes(tree).filter((n) => n.type === 'button' || n.props.popover).length, 0)
+  const portal = nodes(tree).find((n) => n.type === 'portal')
+  assert.equal(portal.props.container, target)
+  assert.doesNotMatch(text(portal), /命中率/)
+  assert.match(text(portal), /输入合计（含缓存）5,000 tok/)
+  assert.doesNotMatch(text(portal), /总 |输出|未命中缓存|命中缓存/)
+})
+
+test('Given 英文与费用关闭 When 渲染 Then 仅向官方弹窗追加英文补充项', () => {
+  const tree = render({ prefs: { ...on, costDisplay: false }, lang: 'en' })
+  assert.equal(inlineText(tree), '')
+  assert.doesNotMatch(text(tree), /cache-hit/)
+  assert.match(text(tree), /Total input \(including cache\)5,000 tok/)
+})
+
+test('Given 官方弹窗未打开 When 渲染 Then 没有额外入口或补充节点', () => {
+  const tree = render({ target: null })
+  assert.equal(text(tree), '费用 ≈ ¥0.0020')
+  assert.equal(nodes(tree).filter((n) => n.type === 'portal').length, 0)
+})
+
+test('Given 明细开关全关 When 渲染 Then 只显示费用', () => {
+  const tree = render({ prefs: { cachePrecision: false, tokenDetail: false, costDisplay: true } })
+  assert.equal(text(tree), '费用 ≈ ¥0.0020')
+  assert.equal(nodes(tree).filter((n) => n.type === 'portal').length, 0)
+})
+
+test('Given 空用量或全关 When 渲染 Then 不留下空条目', () => {
+  for (const value of [undefined, { uncachedInputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0, outputTokens: 0 }]) assert.equal(text(render({ value })), '')
+  assert.equal(text(render({ prefs: { cachePrecision: false, tokenDetail: false, costDisplay: false } })), '')
+})
+
+test('Given 只有输出且费用未加载 When 渲染 Then 官方已有输出，不追加零值明细', () => {
+  assert.equal(text(render({ value: { uncachedInputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0, outputTokens: 500 }, pricing: null })), '')
+})
+
+test('Given 有缓存写入 When 渲染 Then 追加合计未命中量且两开关独立', () => {
+  const value = { ...usage, cacheWriteTokens: 2000 }
+  const detailOnly = render({ value, prefs: { cachePrecision: false, tokenDetail: true, costDisplay: false } })
+  assert.match(text(detailOnly), /输入合计（含缓存）7,000 tok/)
+  assert.match(text(detailOnly), /未命中合计（含缓存写入）3,000 tok/)
+  assert.doesNotMatch(text(detailOnly), /命中率/)
+  const precisionOnly = render({ value, prefs: { cachePrecision: true, tokenDetail: false, costDisplay: false } })
+  assert.equal(text(precisionOnly), '')
+})

package/test/stats-line.test.mjs

@@ -1,4 +1,4 @@
-// 底部信息栏增强纯函数层测试:官方 StatsLine 口径(dsh-client-ui-chat 同构)+ usp 双开关状态
+// 底部信息栏 append 条目纯函数层测试:官方 pill 数据后追加增强项 + usp 双开关状态
 // Given/When/Then 场景内嵌于用例描述
 // client.js 为经典 script bundle(禁 import/export),整文件 IIFE 书挡;经 client-eval 剥壳后整源求值,按顶层声明名收集
 import { test } from 'node:test'
@@ -12,24 +12,16 @@ const {
   MESSAGES_EN,
   MESSAGES_ZH,
   billedInputTokens,
-  roundedPercentUnits,
-  displayPercentUnits,
-  formatCacheHitPercent,
-  cacheHitPercent,
   cacheHitPercentPrecise,
   formatTokensCompact,
   formatDuration,
   formatTokensPerSecond,
-  assistantStepReading,
-  deriveStats,
-  buildStatsGroups,
   buildCostItem,
   createStatsLineState,
   createTranslator,
 } = core
 
 const USAGE = { uncachedInputTokens: 1000, cacheReadTokens: 4000, cacheWriteTokens: 0, outputTokens: 500 }
-const STATS = { turns: 2, steps: 3, llmMs: 1500, toolMs: 2000, ttftMs: 200, ttftSteps: 1, decodeMs: 800, decodeTokens: 50 }
 const PREFS_OFF = { cachePrecision: false, tokenDetail: false, costDisplay: false }
 const PREFS_COST_ON = { cachePrecision: false, tokenDetail: false, costDisplay: true }
 const zhT = createTranslator(MESSAGES_ZH)
@@ -54,20 +46,13 @@ function fakeStorage(initial = {}) {
   }
 }
 
-test('stats 词典 zh 关键值逐字节对齐官方,en 族逐字节取官方 chat', () => {
+test('stats 词典关键值逐字节,en 族逐字节', () => {
   assert.equal(STATS_LINE_STORAGE_KEY, 'dsh-usage-dash:stats-line')
-  assert.equal(MESSAGES_ZH['stats.counts'], '{turns} 轮 · {steps} 步')
-  assert.equal(MESSAGES_ZH['stats.llm'], 'LLM {duration}')
-  assert.equal(MESSAGES_ZH['stats.toolCall'], '工具调用 {duration}')
-  assert.equal(MESSAGES_ZH['stats.ttftAverage'], '首 token 平均 {duration}')
-  assert.equal(MESSAGES_ZH['stats.tokensPerSecond'], '{throughput} tok/s')
-  assert.equal(MESSAGES_ZH['stats.cacheHit'], '缓存命中 {percent}%')
   assert.equal(MESSAGES_ZH['stats.tokens'], '输入 {input} tok · 输出 {output} tok')
-  assert.equal(MESSAGES_ZH['stats.tokensDetail'], '总 {total} tok · 输入 {input} tok · 命中缓存 {hit} tok · 未命中缓存 {miss} tok · 输出 {output} tok')
   assert.equal(MESSAGES_ZH.cachePrecision, '精确缓存命中率')
-  assert.equal(MESSAGES_ZH.cachePrecisionDesc, '在会话底部信息栏以两位小数显示缓存命中率。')
+  assert.equal(MESSAGES_ZH.cachePrecisionDesc, '将官方用量胶囊及弹窗中的命中率显示为两位小数。')
   assert.equal(MESSAGES_ZH.tokenDetail, '会话 Token 明细')
-  assert.equal(MESSAGES_ZH.tokenDetailDesc, '在会话底部信息栏显示总 Token、命中/未命中缓存与输出明细。')
+  assert.equal(MESSAGES_ZH.tokenDetailDesc, '在官方 Token 用量弹窗末尾追加含缓存输入合计；存在缓存写入时追加未命中合计。')
   assert.equal(MESSAGES_ZH['stats.cost'], '费用 ≈ {cost}')
   assert.equal(MESSAGES_ZH.costDisplay, '费用显示')
   assert.equal(MESSAGES_EN['stats.cost'], 'Cost ≈ {cost}')
@@ -76,14 +61,6 @@ test('stats 词典 zh 关键值逐字节对齐官方,en 族逐字节取官方 ch
   assert.equal(MESSAGES_ZH['duration.compactMinutes'], '{minutes}分{seconds}秒')
   assert.equal(MESSAGES_ZH['number.thousand'], '{value}K')
   assert.equal(MESSAGES_ZH['number.million'], '{value}M')
-  assert.equal(MESSAGES_EN['stats.counts'], '{turns} turns · {steps} steps')
-  assert.equal(MESSAGES_EN['stats.llm'], 'LLM {duration}')
-  assert.equal(MESSAGES_EN['stats.toolCall'], 'Tool call {duration}')
-  assert.equal(MESSAGES_EN['stats.ttftAverage'], 'TTFT avg {duration}')
-  assert.equal(MESSAGES_EN['stats.tokensPerSecond'], '{throughput} tok/s')
-  assert.equal(MESSAGES_EN['stats.cacheHit'], 'Cache hit {percent}%')
-  assert.equal(MESSAGES_EN['stats.tokens'], 'Input {input} tok · Output {output} tok')
-  assert.equal(MESSAGES_EN['stats.tokensDetail'], 'Total {total} tok · Input {input} tok · Cache hit {hit} tok · Cache miss {miss} tok · Output {output} tok')
   assert.equal(MESSAGES_EN['duration.compactSeconds'], '{seconds}s')
   assert.equal(MESSAGES_EN['duration.compactMinutes'], '{minutes}m{seconds}s')
   assert.equal(MESSAGES_EN['number.thousand'], '{value}K')
@@ -95,46 +72,6 @@ test('billedInputTokens 为三个互斥 prompt 桶之和', () => {
   assert.equal(billedInputTokens({ uncachedInputTokens: 100, cacheReadTokens: 200, cacheWriteTokens: 300, outputTokens: 0 }), 600)
 })
 
-test('roundedPercentUnits 整数位 0.5 进位', () => {
-  // 125*100/200 = 62.5 → 63(0.5 进位,非银行家舍入)
-  assert.equal(roundedPercentUnits(125, 200, 0), 63)
-  assert.equal(roundedPercentUnits(75, 100, 0), 75)
-  assert.equal(roundedPercentUnits(999946, 1000000, 0), 100)
-})
-
-test('roundedPercentUnits 十分位单位 0.5 进位', () => {
-  // 755*1000/1000 = 755 个十分位 → 755('75.5')
-  assert.equal(roundedPercentUnits(755, 1000, 1), 755)
-  assert.equal(roundedPercentUnits(125, 200, 1), 625)
-})
-
-test('displayPercentUnits 按小数位渲染,十分位为 0 时省略小数点', () => {
-  assert.equal(displayPercentUnits(75, 0), '75')
-  assert.equal(displayPercentUnits(805, 1), '80.5')
-  assert.equal(displayPercentUnits(800, 1), '80')
-})
-
-test('formatCacheHitPercent 无分母为 null,无 miss 为 100', () => {
-  assert.equal(formatCacheHitPercent(100, 0, 0), null)
-  assert.equal(formatCacheHitPercent(100, 100, 0), '100')
-})
-
-test('formatCacheHitPercent 整数位四舍五入', () => {
-  assert.equal(formatCacheHitPercent(75, 100), '75')
-  assert.equal(formatCacheHitPercent(125, 200), '63')
-  assert.equal(formatCacheHitPercent(52, 100), '52')
-})
-
-test('formatCacheHitPercent 溢出 100 时闭式构造 99.x', () => {
-  assert.equal(formatCacheHitPercent(999946, 1000000), '99.99')
-  assert.equal(formatCacheHitPercent(99995, 100000), '99.995')
-})
-
-test('cacheHitPercent 官方整数口径与空数据 null', () => {
-  assert.equal(cacheHitPercent(USAGE), '80')
-  assert.equal(cacheHitPercent({ uncachedInputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0, outputTokens: 500 }), null)
-})
-
 test('cacheHitPercentPrecise 恒两位小数且 99.99 封顶', () => {
   assert.equal(cacheHitPercentPrecise({ uncachedInputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0, outputTokens: 0 }), null)
   assert.equal(cacheHitPercentPrecise({ uncachedInputTokens: 0, cacheReadTokens: 8000, cacheWriteTokens: 0, outputTokens: 10 }), '100.00')
@@ -163,123 +100,6 @@ test('formatTokensPerSecond 钳负值且阈值上下分别取整', () => {
   assert.equal(formatTokensPerSecond(3.24), '3.2')
 })
 
-test('assistantStepReading 时间戳齐全时产出 TTFT/decode/输出 token', () => {
-  assert.deepEqual(
-    assistantStepReading({ timing: { stepStartTime: 1000, firstTokenTime: 1200, completedTime: 2000 }, usage: 50 }),
-    { ttftMs: 200, decodeMs: 800, outputTokens: 50 },
-  )
-})
-
-test('assistantStepReading 负时长钳 0 且非法 usage 为 null', () => {
-  // completedTime 早于 firstTokenTime → decode 钳 0
-  assert.deepEqual(
-    assistantStepReading({ timing: { stepStartTime: 1000, firstTokenTime: 2000, completedTime: 1500 }, usage: 30 }),
-    { ttftMs: 1000, decodeMs: 0, outputTokens: 30 },
-  )
-  assert.equal(assistantStepReading({ timing: { stepStartTime: 0, firstTokenTime: 100, completedTime: 200 }, usage: 'oops' }).outputTokens, null)
-  assert.equal(assistantStepReading({ timing: { stepStartTime: 0, firstTokenTime: 100, completedTime: 200 }, usage: -1 }).outputTokens, null)
-  assert.equal(assistantStepReading({ timing: { stepStartTime: 0, firstTokenTime: 100, completedTime: 200 }, usage: Number.NaN }).outputTokens, null)
-})
-
-test('assistantStepReading 无 timing 时读数双 null', () => {
-  assert.deepEqual(assistantStepReading({ usage: 50 }), { ttftMs: null, decodeMs: null, outputTokens: 50 })
-})
-
-test('deriveStats 折叠窗口节点:轮次去重/负值钳制/读数按有值步聚合', () => {
-  // When:混合 tool-result 与 assistant(含 turn 重复、stepStart null、firstToken null、非法 usage)
-  const nodes = [
-    { kind: 'user' },
-    { kind: 'tool-result', time: 5000, callTime: 3000 },
-    { kind: 'tool-result', time: 1000, callTime: 3000 },
-    { kind: 'tool-result', time: 9000, callTime: null },
-    { kind: 'assistant', turn: 1, timing: { stepStartTime: 1000, firstTokenTime: 1200, completedTime: 2000 }, usage: 50 },
-    { kind: 'assistant', turn: 1, timing: { stepStartTime: null, firstTokenTime: 1300, completedTime: 2100 }, usage: 10 },
-    { kind: 'assistant', turn: 2, timing: { stepStartTime: 3000, firstTokenTime: null, completedTime: 3500 }, usage: 30 },
-    { kind: 'assistant', turn: 3, timing: { stepStartTime: 4000, firstTokenTime: 4100, completedTime: 4600 }, usage: 'oops' },
-  ]
-  // Then:llm 1000+0+500+600;ttft 分母=有值 2 步;decode 只算时间戳与 usage 双全的步
-  assert.deepEqual(deriveStats(nodes), {
-    turns: 3,
-    steps: 4,
-    llmMs: 2100,
-    toolMs: 2000,
-    ttftMs: 300,
-    ttftSteps: 2,
-    decodeMs: 1600,
-    decodeTokens: 60,
-  })
-})
-
-test('deriveStats 空节点为零值统计', () => {
-  assert.deepEqual(deriveStats([]), { turns: 0, steps: 0, llmMs: 0, toolMs: 0, ttftMs: 0, ttftSteps: 0, decodeMs: 0, decodeTokens: 0 })
-})
-
-test('buildStatsGroups 双开关全关与官方行逐字节一致', () => {
-  assert.deepEqual(buildStatsGroups(STATS, USAGE, PREFS_OFF, zhT), [
-    '2 轮 · 3 步',
-    'LLM 1.5秒 · 工具调用 2秒',
-    '首 token 平均 0.2秒 · 63 tok/s',
-    '缓存命中 80%',
-    '输入 5K tok · 输出 500 tok',
-  ])
-})
-
-test('buildStatsGroups 传 en 翻译器输出官方 en 口径逐字节', () => {
-  assert.deepEqual(buildStatsGroups(STATS, USAGE, PREFS_OFF, enT), [
-    '2 turns · 3 steps',
-    'LLM 1.5s · Tool call 2s',
-    'TTFT avg 0.2s · 63 tok/s',
-    'Cache hit 80%',
-    'Input 5K tok · Output 500 tok',
-  ])
-})
-
-test('buildStatsGroups en 零命中率呈现 Cache hit 0%', () => {
-  const zeroHitStats = { turns: 2, steps: 3, llmMs: 0, toolMs: 0, ttftMs: 0, ttftSteps: 0, decodeMs: 0, decodeTokens: 0 }
-  const zeroHitUsage = { uncachedInputTokens: 4000, cacheReadTokens: 0, cacheWriteTokens: 1000, outputTokens: 0 }
-  assert.deepEqual(buildStatsGroups(zeroHitStats, zeroHitUsage, PREFS_OFF, enT), [
-    '2 turns · 3 steps',
-    'Cache hit 0%',
-    'Input 5K tok · Output 0 tok',
-  ])
-})
-
-test('buildStatsGroups tokenDetail 开关切换五项明细组', () => {
-  const groups = buildStatsGroups(STATS, USAGE, { cachePrecision: false, tokenDetail: true }, zhT)
-  assert.deepEqual(groups.slice(0, 4), [
-    '2 轮 · 3 步',
-    'LLM 1.5秒 · 工具调用 2秒',
-    '首 token 平均 0.2秒 · 63 tok/s',
-    '缓存命中 80%',
-  ])
-  assert.equal(groups[4], '总 5.5K tok · 输入 5K tok · 命中缓存 4K tok · 未命中缓存 1K tok · 输出 500 tok')
-})
-
-test('buildStatsGroups cachePrecision 开关切精确命中率', () => {
-  const groups = buildStatsGroups(STATS, USAGE, { cachePrecision: true, tokenDetail: false }, zhT)
-  assert.equal(groups[3], '缓存命中 80.00%')
-})
-
-test('buildStatsGroups usage 缺席时命中与 Token 组整体缺席', () => {
-  assert.deepEqual(buildStatsGroups(STATS, undefined, PREFS_OFF, zhT), [
-    '2 轮 · 3 步',
-    'LLM 1.5秒 · 工具调用 2秒',
-    '首 token 平均 0.2秒 · 63 tok/s',
-  ])
-})
-
-test('buildStatsGroups 无步进且用量空为空数组', () => {
-  const zeroStats = { turns: 0, steps: 0, llmMs: 0, toolMs: 0, ttftMs: 0, ttftSteps: 0, decodeMs: 0, decodeTokens: 0 }
-  const zeroUsage = { uncachedInputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0, outputTokens: 0 }
-  assert.deepEqual(buildStatsGroups(zeroStats, zeroUsage, PREFS_OFF, zhT), [])
-})
-
-test('buildStatsGroups 仅输出时命中率组因 null 丢弃', () => {
-  const zeroStats = { turns: 0, steps: 0, llmMs: 0, toolMs: 0, ttftMs: 0, ttftSteps: 0, decodeMs: 0, decodeTokens: 0 }
-  const usage = { uncachedInputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0, outputTokens: 500 }
-  assert.deepEqual(buildStatsGroups(zeroStats, usage, PREFS_OFF, zhT), ['输入 0 tok · 输出 500 tok'])
-})
-
 test('createStatsLineState 默认三开,非法 JSON 回落三开,显式 false 才视为关', () => {
   assert.deepEqual(createStatsLineState(fakeStorage()).get(), { cachePrecision: true, tokenDetail: true, costDisplay: true })
   assert.deepEqual(createStatsLineState(null).get(), { cachePrecision: true, tokenDetail: true, costDisplay: true })
@@ -334,15 +154,8 @@ test('createStatsLineState 写入失败仅丢持久化,内存仍生效', () => {
 
 // —— S14 费用组(buildCostItem) ——
 
-test('buildCostItem 开关关恒为 null,组数组不受 rules 影响', () => {
+test('buildCostItem 开关关恒为 null', () => {
   assert.equal(buildCostItem(COST_USAGE, COST_RULES, PREFS_OFF, zhT, COST_NOW), null)
-  assert.deepEqual(buildStatsGroups(STATS, USAGE, PREFS_OFF, zhT, COST_RULES), [
-    '2 轮 · 3 步',
-    'LLM 1.5秒 · 工具调用 2秒',
-    '首 token 平均 0.2秒 · 63 tok/s',
-    '缓存命中 80%',
-    '输入 5K tok · 输出 500 tok',
-  ])
 })
 
 test('buildCostItem routes 缺席按全通配规则匹配,符号取全局口径(首个非空货币)', () => {
@@ -376,24 +189,22 @@ test('buildCostItem usage 缺席为 null', () => {
   assert.equal(buildCostItem(undefined, COST_RULES, PREFS_COST_ON, zhT, COST_NOW), null)
 })
 
-test('buildCostItem buildStatsGroups 费用组符号同全局口径', () => {
-  // USAGE 无 routes → 通配价 input 1:1000 × 1 / 每百万 = 0.001 → 四位小数微观格式;符号取首个非空 ¥
-  assert.deepEqual(buildStatsGroups(STATS, USAGE, PREFS_COST_ON, zhT, COST_RULES), [
-    '2 轮 · 3 步',
-    'LLM 1.5秒 · 工具调用 2秒',
-    '首 token 平均 0.2秒 · 63 tok/s',
-    '缓存命中 80%',
-    '输入 5K tok · 输出 500 tok',
-    '费用 ≈ ¥0.0010',
-  ])
-})
-
-test('buildStatsGroups 开+无价不追加费用组', () => {
-  assert.deepEqual(buildStatsGroups(STATS, USAGE, PREFS_COST_ON, zhT, null), [
-    '2 轮 · 3 步',
-    'LLM 1.5秒 · 工具调用 2秒',
-    '首 token 平均 0.2秒 · 63 tok/s',
-    '缓存命中 80%',
-    '输入 5K tok · 输出 500 tok',
-  ])
+test('dock 注册 append 契约:order 排官方 pill(activity 0/usage 1)之后,条目只消费 useProjection', () => {
+  assert.ok(CLIENT_BODY.includes("id: 'stats', order: 2, priority: STATS_SLOT_PRIORITY"))
+  assert.ok(CLIENT_BODY.includes('StatsLineAppended({ useProjection, t = defaultT })'))
+  assert.ok(!CLIENT_BODY.includes("useProjection('sessionStats')"))
+  assert.ok(!CLIENT_BODY.includes('deriveStats'))
+})
+
+test('dock append 条目布局契约:官方 pill 满宽不受挤压,空间不足时增强条目先让位', () => {
+  // 失效方式:回退为整行 width:100% 或去掉让位收缩/截断,官方胶囊被压缩或被溢出文本遮挡(独立环境实测 147→96px)
+  const rule = CLIENT_BODY.match(/\.ud-statsline-root\{[^}]*\}/)?.[0]
+  assert.ok(rule, '存在 .ud-statsline-root 规则')
+  assert.ok(!/(^|[^-a-z])width:100%/.test(rule), '不再整行占满,dock 内为并列条目')
+  assert.ok(!rule.includes('--dsh-composer-side-clearance'), '不再沿用整行侧边距')
+  assert.ok(rule.includes('flex:0 999 auto'), '高收缩因子锁定,空间不足时先收缩自身,挤压亏损不由官方 pill 承担')
+  assert.ok(rule.includes('padding:0;'), '费用收缩到零时不留下固定内边距挤压官方胶囊')
+  assert.ok(rule.includes('margin-left:calc(0px - var(--ud-dock-gap,0px))') && rule.includes('text-indent:var(--ud-dock-gap,0px)'), '抵消新增 flex gap，文字缩进提供可收缩间距')
+  assert.ok(rule.includes('min-width:0'), '允许收缩到零')
+  assert.ok(rule.includes('overflow:hidden') && rule.includes('white-space:nowrap') && rule.includes('text-overflow:ellipsis'), '收缩残态截断三件套在位,溢出不遮挡官方 pill')
 })

package/test/usage-dialog.test.mjs

@@ -0,0 +1,106 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { CLIENT_BODY, DECLARATION_NAMES } from './client-eval.mjs'
+const core = new Function(`${CLIENT_BODY}\nreturn { ${DECLARATION_NAMES.join(', ')} }`)()
+
+function fixture() {
+  const label = { nodeValue: '缓存命中 80%' }
+  const other = { nodeValue: '5.5K tok' }
+  const value = { nodeValue: '80%' }
+  const button = { aria: '5.5K tok · 缓存命中 80%', expanded: 'false', getAttribute(name) { return name === 'aria-expanded' ? this.expanded : this.aria }, setAttribute(name, v) { this.aria = v } }
+  const pill = { querySelector: () => button, texts: [other, label] }
+  const dock = { querySelector: () => pill }
+  const anchor = { closest: () => dock }
+  const dd = { texts: [value] }
+  const dialog = { querySelector: () => dd }
+  let dialogs = []
+  let callback
+  let disconnected = false
+  let pending = []
+  const document = { body: {}, contains: (node) => !node.detached, querySelectorAll: () => dialogs, createTreeWalker(node) { let i = 0; return { nextNode: () => node.texts[i++] ?? null } } }
+  class Observer { constructor(cb) { callback = cb } observe() {} takeRecords() { const records = pending; pending = []; return records } disconnect() { disconnected = true } }
+  return { label, other, value, button, anchor, dialog, document, Observer, notify: (records = []) => callback(records), setDialogs: (v) => { dialogs = v }, setPending: (v) => { pending = v }, disconnected: () => disconnected }
+}
+
+test('Given 官方命中率 When 精度增强 Then 原位替换文本及 aria，关闭时还原，不增加精度行', () => {
+  const f = fixture(), seen = []
+  const stop = core.observeUsageDialog(f.anchor, f.document, f.Observer, (v) => seen.push(v), '80.00')
+  assert.equal(f.label.nodeValue, '缓存命中 80.00%')
+  assert.equal(f.button.aria, '5.5K tok · 缓存命中 80.00%')
+  assert.equal(f.other.nodeValue, '5.5K tok')
+  f.button.expanded = 'true'; f.setDialogs([f.dialog]); f.notify([{ type: 'attributes', attributeName: 'aria-expanded', target: f.button }])
+  assert.equal(f.value.nodeValue, '80.00%')
+  f.notify()
+  assert.deepEqual(seen, [null, f.dialog])
+  stop()
+  assert.equal(f.disconnected(), true)
+  assert.equal(f.label.nodeValue, '缓存命中 80%')
+  assert.equal(f.button.aria, '5.5K tok · 缓存命中 80%')
+  assert.equal(f.value.nodeValue, '80%')
+})
+
+test('Given 官方重渲染和重建弹窗 When 观察变更 Then 更新读数且清理不覆盖官方新值', () => {
+  const f = fixture(), seen = []
+  const stop = core.observeUsageDialog(f.anchor, f.document, f.Observer, (v) => seen.push(v), '80.00')
+  f.label.nodeValue = 'Cache hit 81%'; f.button.aria = '5.5K tok · Cache hit 81%'; f.notify()
+  assert.equal(f.label.nodeValue, 'Cache hit 80.00%')
+  f.label.nodeValue = 'Cache hit 82%'
+  f.button.expanded = 'true'; f.setDialogs([f.dialog]); f.notify()
+  f.setDialogs([]); f.notify()
+  f.setDialogs([f.dialog]); f.notify()
+  assert.deepEqual(seen, [null, f.dialog, null, f.dialog])
+  f.label.nodeValue = 'Cache hit 83%'
+  stop()
+  assert.equal(f.label.nodeValue, 'Cache hit 83%')
+  assert.equal(f.button.aria, '5.5K tok · Cache hit 81%')
+})
+
+test('Given 另一窗格用量弹窗已打开 When 本胶囊未展开 Then 不注入也不修改别窗格读数', () => {
+  const f = fixture(), seen = []
+  f.setDialogs([f.dialog])
+  const stop = core.observeUsageDialog(f.anchor, f.document, f.Observer, (v) => seen.push(v), '80.00')
+  assert.deepEqual(seen, [null])
+  assert.equal(f.value.nodeValue, '80%')
+  f.button.expanded = 'true'; f.setDialogs([f.dialog, {}]); f.notify()
+  assert.deepEqual(seen, [null])
+  stop()
+})
+
+test('Given 官方更新恰好等于增强值 When 关闭增强 Then 保留官方新值', () => {
+  const f = fixture()
+  f.label.nodeValue = 'Cache hit 99.999%'
+  const stop = core.observeUsageDialog(f.anchor, f.document, f.Observer, () => {}, '99.99')
+  f.label.nodeValue = 'Cache hit 99.99%'
+  f.notify([{ type: 'characterData', target: f.label }])
+  stop()
+  assert.equal(f.label.nodeValue, 'Cache hit 99.99%')
+})
+
+test('Given 弹窗节点已脱离文档 When 后续更新 Then 清理不再持有或还原旧节点', () => {
+  const f = fixture()
+  f.button.expanded = 'true'; f.setDialogs([f.dialog])
+  const stop = core.observeUsageDialog(f.anchor, f.document, f.Observer, () => {}, '80.00')
+  f.value.detached = true; f.setDialogs([]); f.notify()
+  stop()
+  assert.equal(f.value.nodeValue, '80.00%')
+})
+
+test('Given 官方更新记录尚未投递 When 立即卸载 Then 不恢复过期值', () => {
+  const f = fixture()
+  f.label.nodeValue = 'Cache hit 99.999%'
+  const stop = core.observeUsageDialog(f.anchor, f.document, f.Observer, () => {}, '99.99')
+  f.label.nodeValue = 'Cache hit 99.99%'
+  f.setPending([{ type: 'characterData', target: f.label }])
+  stop()
+  assert.equal(f.label.nodeValue, 'Cache hit 99.99%')
+})
+
+test('Given 精度关闭 When 弹窗出现 Then 原始读数不变但仍可定位追加合计项', () => {
+  const f = fixture(), seen = []
+  f.button.expanded = 'true'; f.setDialogs([f.dialog])
+  const stop = core.observeUsageDialog(f.anchor, f.document, f.Observer, (v) => seen.push(v), null)
+  assert.equal(f.label.nodeValue, '缓存命中 80%')
+  assert.equal(f.value.nodeValue, '80%')
+  assert.deepEqual(seen, [f.dialog])
+  stop()
+})