@mzzsfy/dsh-usage-dash 0.6.0 → 0.7.0

package/README.md

@@ -10,8 +10,8 @@
 - 汇总卡六张:Tokens 用量(服务商总口径)、会话数量、请求数量、最常用模型、平均缓存命中率、活跃天数(恒按天口径,不随视图切换);配置定价规则后 Tokens 卡头部行右侧显示估算费用
 - 活动热力图:GitHub 风格周列×星期行,26 周窗口,五档色阶,悬停明细;仅按天视图展示
 - 缓存命中率曲线:日粒度命中率 + 右侧副轴,并叠加平均生成速度曲线与首 token 延迟曲线(各自单独颜色,读数走悬停;仅含配对数据的槽参与,整图无数据不绘制),悬停显示当前时段命中率、平均生成速度、首 token 延迟与 token 明细(配置定价规则后附当前时段估算费用行,受「费用显示」开关;三粒度趋势图通用)
-- 模型 donut 与列表:按 token 前 5 模型占比环形图(中心为总量),列表含命中率与占比;每模型右侧两行:第一行占比%·token 数,第二行估算费用·TTFT·生成速度(语言中立,点分隔;费用需配置定价规则,TTFT/速度无配对数据不显示),悬停联动
-- 三粒度堆叠柱状趋势图(数据量大时裁最旧并提示);图例可点击切换显隐:点击单选(仅显示该项,左轴刻度按可见项归一)/再点恢复全部,Ctrl+点击多选,隐藏最后一项无效
+- 模型 donut 与列表:按 token 前 5 模型占比环形图(中心为总量);每行名称两行展示(厂商/模型名,其余折叠为「其他」),右侧三排:第一排 token 数·占比,第二排输入输出占比构成(缓存/输入/输出 三段各占该模型 token 总量,缓存=读+写,三段合计 100%,无四桶数据不显示),第三排估算费用·TTFT·生成速度(费用需配置定价规则,TTFT/速度无配对数据不显示),悬停明细含输入/缓存读/缓存写/输出四桶 token 拆分并联动
+- 三粒度堆叠柱状趋势图(数据量大时裁最旧并提示);图例可点击切换显隐:点击单选(仅显示该项,左轴刻度按可见项归一)/再点恢复全部,Ctrl+点击多选,隐藏最后一项无效;悬停明细按当前时段数据展示,零用量模型不显示,全零时段不显示悬浮框
 - 回扫状态行默认隐藏:首次启用自动回扫历史会话,运行中显示进度(常显);右上角为折叠箭头与刷新图标,折叠层内展开扫描异常日志块(逐条:时间/类型/明细,计数即明细条数,上限 200 条超限丢最旧,重建时清空)与「重建」入口(二次确认 3 秒后清库重扫),采集错误常显;工具栏分主区与右侧操作区,窄宽度时挡位组在主区内换行
 - 会话底栏接管:替换官方信息行为增强版,偏好卡三个开关默认全开——精确缓存命中率(两位小数)、会话 Token 明细(总/命中缓存/未命中缓存/输出)、费用显示(底栏费用项、趋势 tooltip 费用行与回合费用芯片);三开关全关时与官方逐字节一致
 - 回合费用芯片:经官方 `conversation.chat.assistant-actions` 槽注入动作行(复制与分支图标之间,官方赞/踩与上下文跳转同排),每轮对话结束后显示该轮估算费用(悬停 title 带 token 摘要与估算口径;显隐节奏随官方动作行——最新一轮常显,历史轮悬停显现;受「费用显示」开关;官方用量芯片弹窗已有 token 明细,芯片只承载费用)。旧宿主无该插槽时告警禁用
@@ -19,7 +19,7 @@
 - 双语:跟随宿主语言设置(设置 → 通用 → 语言)即时切换 en/zh
 - 数据 API 守卫:POST 同源校验 + JSON content-type(与 dsh-usage-panel 同构),局域网远程访问可用
 
-口径:token 总量 = 未缓存输入 + 输出 + 缓存读 + 缓存写;命中率 = 缓存读 / (缓存读 + 未缓存输入 + 缓存写);桶按 host 本地时区。平均生成速度 = decode 配对分子 ÷ 解码时长,两者均取官方吞吐口径(与官方 session-stats 投影同构):解码时长为该步首 token 时刻(首个产出 token 的 attempt 流,回落 message 自带流)到 usage 汇报时刻,不含首 token 前的排队与提示处理等待;首 token 延迟(TTFT)= 首 token 时刻 − `step/start`(起点不随 `llm/retry-started` 重置,即含失败尝试时间)。首 token 时刻在 chunk token 样本上不可得,由后续 usage 报告(message 为主)补发零桶 timing 增量行承载(decodeTokens 与时长同源配对,不重复计 token);存量旧行(时长为旧全时长口径)速度分子回落输出 token,聚合随新数据自然收敛,重建(重扫)可全量按新口径重建。保留策略:天桶永久,小时桶固定 15 天,分钟桶默认 7 天且上限 7 天(设置项 `minuteRetentionDays`,0 = 禁用分钟桶)。
+口径:token 总量 = 未缓存输入 + 输出 + 缓存读 + 缓存写;命中率 = 缓存读 / (缓存读 + 未缓存输入 + 缓存写);桶按 host 本地时区。聚合响应 `models` 数组每模型带 `inputTokens`/`outputTokens`/`cacheReadTokens`/`cacheWriteTokens` 四桶拆分(与定价四桶同口径),模型列表据此展示输入输出对比。平均生成速度 = decode 配对分子 ÷ 解码时长,两者均取官方吞吐口径(与官方 session-stats 投影同构):解码时长为该步首 token 时刻(首个产出 token 的 attempt 流,回落 message 自带流)到 usage 汇报时刻,不含首 token 前的排队与提示处理等待;首 token 延迟(TTFT)= 首 token 时刻 − `step/start`(起点不随 `llm/retry-started` 重置,即含失败尝试时间)。首 token 时刻在 chunk token 样本上不可得,由后续 usage 报告(message 为主)补发零桶 timing 增量行承载(decodeTokens 与时长同源配对,不重复计 token);存量旧行(时长为旧全时长口径)速度分子回落输出 token,聚合随新数据自然收敛,重建(重扫)可全量按新口径重建。保留策略:天桶永久,小时桶固定 15 天,分钟桶默认 7 天且上限 7 天(设置项 `minuteRetentionDays`,0 = 禁用分钟桶)。
 
 写入模型:样本先同步合并进内存 pending,按 2 秒周期批量落盘(单布局存储域每次持久化写都全量重发布 unit 文档,合并把每样本 3 次写降为每脏行 1 次,回扫万级样本写放大降约 99%);查询前自动 flush 保证读己之写;flush 失败的行留 pending 下轮重试并经异常日志可观测,崩溃丢失窗口 = flush 周期,统计可由会话重扫重建。
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mzzsfy/dsh-usage-dash",
   "description": "用量统计面板:天/小时/分钟三粒度 token 与请求统计,26 周活跃热力图,会话底栏信息接管与官方动作行回合费用芯片,多条件分时段定价规则与费用估算;复刻自 github.com/HaoyueQin/dsh-usage-statistics-panel,感谢原作者 HaoyueQin",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "main": "src/index.js",
   "exports": {

package/src/client.js

@@ -204,6 +204,9 @@ const MESSAGES_ZH = {
   dailyTrend: '按天 Token 趋势',
   trendLimited: '仅显示最近 {n} 天',
   modelUsage: '模型用量',
+  modelCache: '缓存',
+  modelInput: '输入',
+  modelOutput: '输出',
   other: '其他',
   total: '总用量',
   percent: '占比',
@@ -344,6 +347,9 @@ const MESSAGES_EN = {
   dailyTrend: 'Daily token trend',
   trendLimited: 'Showing only the last {n} days',
   modelUsage: 'Model usage',
+  modelCache: 'Cache',
+  modelInput: 'Input',
+  modelOutput: 'Output',
   other: 'Other',
   total: 'Total',
   percent: 'Share',
@@ -561,10 +567,12 @@ const topWithOther = (ranked) => {
   const models = ranked.slice(0, GROUP_TOP_COUNT)
   if (ranked.length > GROUP_TOP_COUNT) {
     const rest = ranked.slice(GROUP_TOP_COUNT)
+    // 四桶与费用同源条件挂载:输入条目无该字段(旧形数据/未配价)时哨兵同样不带,防零值假数据
     models.push({
       model: OTHER_MODEL,
       tokens: rest.reduce((sum, item) => sum + item.tokens, 0),
-      cost: rest.reduce((sum, item) => sum + (item.cost ?? 0), 0),
+      ...(rest.some(hasTokenBuckets) ? { ...bucketSumsOf(rest) } : {}),
+      ...(rest.some((item) => item.cost !== undefined) ? { cost: rest.reduce((sum, item) => sum + (item.cost ?? 0), 0) } : {}),
       items: rest,
     })
   }
@@ -820,7 +828,7 @@ function ttftTipText(ttft, t) {
   return ttft === undefined ? TOOLTIP_MISSING : formatDuration(ttft, t)
 }
 
-// 语言中立短时长:60 秒内一位小数秒,以上整秒折分秒(模型列表第二行用,禁本地化)
+// 语言中立短时长:60 秒内一位小数秒,以上整秒折分秒(模型列表 meta 行用,禁本地化)
 function formatDurationShort(ms) {
   const seconds = ms / MS_PER_SECOND
   if (seconds < DURATION_MINUTE_SECONDS) return `${Math.round(seconds * NUMBER_ONE_DECIMAL) / NUMBER_ONE_DECIMAL}s`
@@ -834,6 +842,39 @@ function modelTtftText(ttft) {
   return `TTFT ${formatDurationShort(ttft)}`
 }
 
+// 模型条目四桶齐备判定:生产端同源恒齐,旧形数据缺桶即视为不可渲染
+const hasTokenBuckets = (item) => TOKEN_BUCKET_KEYS.every((key) => typeof item?.[key] === 'number')
+
+// 逐桶求和:按共享桶键列表产出四桶聚合形态
+const bucketSumsOf = (items) => Object.fromEntries(TOKEN_BUCKET_KEYS.map((key) => [
+  key,
+  items.reduce((sum, item) => sum + (item[key] ?? 0), 0),
+]))
+
+// 模型输入输出占比构成:缓存/输入/输出 三段各占该模型 token 总量百分比(缓存=读+写,
+// 三段合计恒 100%);四桶缺失(旧数据)或零总量为空串
+function modelIoPercentText(item, t) {
+  if (!hasTokenBuckets(item) || !(item.tokens > 0)) return ''
+  const share = (value) => formatPercent((value / item.tokens) * PERCENT_SCALE)
+  return `${t('modelCache')} ${share(item.cacheReadTokens + item.cacheWriteTokens)} · ${t('modelInput')} ${share(item.inputTokens)} · ${t('modelOutput')} ${share(item.outputTokens)}`
+}
+
+// 趋势 tooltip 内容门:全零槽(无任何用量)不渲染 tooltip
+const hasTipContent = (hoverSlot) => Boolean(hoverSlot) && hoverSlot.total > 0
+
+// 趋势 tooltip 模型行数据:主行 = 可见且当前时段有用量的模型;OTHER 子行 = OTHER 可见
+// 且当前时段有用量的其余模型明细,按 tokens 降序由本函数保证
+const tipModelEntries = (hoverSlot, visibleSet) => {
+  if (!hasTipContent(hoverSlot)) return { main: [], other: [] }
+  const main = Object.entries(hoverSlot.byModel)
+    .filter(([model, tokens]) => visibleSet.has(model) && tokens > 0)
+    .map(([model, tokens]) => ({ model, tokens }))
+  const other = visibleSet.has(OTHER_MODEL)
+    ? Object.entries(hoverSlot.otherByModel ?? {}).filter(([, tokens]) => tokens > 0).sort((a, b) => b[1] - a[1])
+    : []
+  return { main, other }
+}
+
 // 热力图:窗口固定 26 周,与所选范围无关
 const HEAT_WEEKS = 26
 const HEAT_ROW_COUNT = 7
@@ -1316,6 +1357,9 @@ const BUCKET_PRICE_KEYS = [
   { tokens: 'cacheWriteTokens', price: 'cacheWrite' },
 ]
 
+// 展示侧四桶键单一来源:模型分组求和与齐备判定共用,禁止各处手工复制键名
+const TOKEN_BUCKET_KEYS = BUCKET_PRICE_KEYS.map(({ tokens }) => tokens)
+
 const toFiniteNumber = (value) => (Number.isFinite(value) ? value : 0)
 
 // 费用 = Σ(桶 token × 桶单价) / 每百万;缺桶或非法值按 0,原始浮点不圆整(展示层负责)
@@ -1383,15 +1427,20 @@ const TURN_COST_CHIP_ORDER = 20 + 10
 // messageId 反查:节点表为 chat 节点仓库(values() 可枚举,Map/仓库两态兼容);
 // 回合级用量优先取回合位置数据(location.turn.data.get('turn-tail')).tokenUsage(官方 tokenUsage 聚合,
 // 分页窗口缺 turn/start 时缺席),回退视图节点 data.closing.usage(末步用量采样,输入侧已含缓存,计费口径同源)
-// 索引缓存:每份节点表快照只全量扫描一次建 messageId→turn-tail 索引(WeakMap 随快照释放),
-// 长会话流式期间多芯片各自全量扫描是 O(消息数×节点数) 放大,索引后单快照 O(节点数)
+// 索引缓存:键取节点集数组身份 —— 官方 chat store 实例身份跨回合恒定,values() 返回的缓存数组
+// 随节点集更替换新引用:未变时全芯片共享一次扫描,新增回合节点经 values() 换引用自动失效重建
+// (按 store 实例为键会让新节点永远查不到旧索引,表现为回合费用芯片刷新后才出现);
+// Map/迭代器形态(测试兼容)仍按容器为键
 const TURN_USAGE_INDEX_CACHE = new WeakMap()
 
 function turnUsageIndexOf(nodes) {
-  let index = TURN_USAGE_INDEX_CACHE.get(nodes)
+  const source = nodes && typeof nodes.values === 'function' ? nodes.values() : nodes
+  const snapshotForm = Array.isArray(source)
+  const cacheKey = snapshotForm ? source : nodes
+  let index = TURN_USAGE_INDEX_CACHE.get(cacheKey)
   if (index !== undefined) return index
   index = new Map()
-  const list = nodes && typeof nodes.values === 'function' ? [...nodes.values()] : nodes
+  const list = snapshotForm ? source : typeof source?.[Symbol.iterator] === 'function' ? [...source] : source
   if (Array.isArray(list)) {
     for (const node of list) {
       try {
@@ -1402,13 +1451,13 @@ function turnUsageIndexOf(nodes) {
       } catch { /* 单节点形状残缺跳过 */ }
     }
   }
-  TURN_USAGE_INDEX_CACHE.set(nodes, index)
+  TURN_USAGE_INDEX_CACHE.set(cacheKey, index)
   return index
 }
 
 function turnTokenUsageOfMessage(nodes, messageId) {
   // 非对象(含 null/undefined)直接 null:WeakMap 键要求对象,展开校验收进索引构建,
-  // 每快照只物化一次节点序列
+  // 每份节点集只物化一次节点序列
   if (nodes === null || typeof nodes !== 'object') return null
   const node = turnUsageIndexOf(nodes).get(messageId)
   if (node === undefined) return null
@@ -1934,11 +1983,11 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
 .ud-heat-l5{fill:var(--dsw-heat-5);background:var(--dsw-heat-5)}
 .ud-heat-legend{display:inline-flex;align-items:center;gap:${HEAT_GAP}px;margin-left:auto;flex:none;font-size:11px;color:var(--dsw-alias-label-secondary)}
 .ud-heat-legend i{display:inline-block;width:${HEAT_BASE}px;height:${HEAT_BASE}px;border-radius:${HEAT_RX}px;flex:none}
-.ud-tip{position:fixed;z-index:${TIP_Z_INDEX};visibility:hidden;pointer-events:none;white-space:nowrap;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-overlay);box-shadow:0 4px 12px var(--dsw-alias-bg-mask-2);color:var(--dsw-alias-label-primary);font-size:13px;padding:8px 10px}
-.ud-tip-title{font-weight:600}
-.ud-tip-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dsw-alias-label-secondary)}
-.ud-tip-row--sub{padding-left:12px;color:var(--dsw-alias-label-tertiary);font-size:11px}
-.ud-tip-breakdown{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--dsw-alias-border-l1);margin-top:6px;padding-top:6px}
+.ud-tip{position:fixed;z-index:${TIP_Z_INDEX};visibility:hidden;pointer-events:none;white-space:nowrap;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-overlay);box-shadow:0 1px 2px var(--dsw-alias-bg-mask-2),0 6px 20px var(--dsw-alias-bg-mask-2);color:var(--dsw-alias-label-primary);font-size:13px;padding:10px 12px;font-variant-numeric:tabular-nums}
+.ud-tip-title{font-weight:600;margin-bottom:6px}
+.ud-tip-row{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.6;color:var(--dsw-alias-label-secondary)}
+.ud-tip-row--sub{padding-left:14px;color:var(--dsw-alias-label-tertiary);font-size:11px}
+.ud-tip-breakdown{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--dsw-alias-border-l1);margin-top:8px;padding-top:8px}
 .ud-axis-rate{fill:var(--dsw-alias-label-tertiary);font-size:11px;font-variant-numeric:tabular-nums}
 .ud-bar{transform-box:fill-box;transform-origin:center}
 .ud-bar-hit{fill:transparent;pointer-events:all}
@@ -1958,17 +2007,17 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
 .ud-donut-center{font-size:18px;font-weight:600;fill:var(--dsw-alias-label-primary)}
 .ud-donut-label{font-size:11px;fill:var(--dsw-alias-label-tertiary)}
 .ud-models{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column}
-.ud-model-row{display:flex;align-items:center;gap:8px;min-height:44px;padding:2px 4px;border-bottom:1px solid var(--dsw-alias-border-l1)}
+.ud-model-row{display:flex;align-items:center;gap:8px;min-height:48px;padding:2px 4px;border-bottom:1px solid var(--dsw-alias-border-l1)}
 .ud-model-row--expand{cursor:pointer}
 .ud-model-row--expand:hover{background:var(--dsw-alias-interactive-bg-hover)}
 .ud-model-swatch{width:10px;height:10px;border-radius:2px;flex:none}
 .ud-model-id{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
-.ud-model-name{font-size:13px;color:var(--dsw-alias-label-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.ud-model-provider{font-size:11px;color:var(--dsw-alias-label-tertiary)}
+.ud-model-name{font-size:14px;font-weight:500;color:var(--dsw-alias-label-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ud-model-provider{font-size:12px;color:var(--dsw-alias-label-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ud-model-values{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-variant-numeric:tabular-nums;flex:none}
 .ud-model-tokens{font-size:12px;color:var(--dsw-alias-label-secondary)}
-.ud-model-pct{font-size:11px;color:var(--dsw-alias-label-tertiary);white-space:nowrap}
-.ud-model-cost{font-size:11px;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}
+.ud-model-io{font-size:11px;color:var(--dsw-alias-label-secondary);white-space:nowrap}
+.ud-model-meta{font-size:11px;color:var(--dsw-alias-label-tertiary);white-space:nowrap}
 .ud-model-toggle{border:none;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer;padding:2px 6px;font-size:14px;line-height:1;transition:transform .2s ease}
 .ud-model-toggle[aria-expanded="true"]{transform:rotate(90deg)}
 .ud-model-toggle:focus-visible{outline:1px solid var(--dsw-alias-state-business-primary);border-radius:4px}
@@ -2178,9 +2227,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       const hoverTtftPoint = hoverSlot ? ttftPoints.find((point) => point.day === hoverSlot.day) : null
       const pick = (index) => (event) => setHover({ index, anchor: pointerAt(event) })
       const clear = () => setHover(null)
-      const otherEntries = hoverSlot
-        ? Object.entries(hoverSlot.otherByModel ?? {}).sort((a, b) => b[1] - a[1])
-        : []
+      const tipEntries = hasTipContent(hoverSlot) ? tipModelEntries(hoverSlot, visibleSet) : null
       return h('div', { className: 'ud-section' },
         h('div', { className: 'ud-section-head' },
           h('span', { className: 'ud-section-title' }, title),
@@ -2249,15 +2296,15 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
           onItem: (key, ctrl) => setVisibleKeys(legendToggle(visibleKeys, key, ctrl)),
         }),
         h(ChartTip, { anchor: hover ? hover.anchor : null, panelRef },
-          hoverSlot
+          tipEntries
             ? [
                 h('div', { key: 'title', className: 'ud-tip-title' }, slotLabelFor ? slotLabelFor(hoverSlot.day) : hoverSlot.day),
                 h('div', { key: 'total', className: 'ud-tip-row' }, `${t('total')}: ${formatTokens(hoverSlot.total)}`),
-                ...legendModels.filter((item) => visibleSet.has(item.model)).map((item) => h('div', { key: `m-${item.model}`, className: 'ud-tip-row' },
-                  h('i', { className: 'ud-legend-swatch', style: { background: colorFor(item.model) } }),
-                  `${item.model === OTHER_MODEL ? t('other') : item.model}: ${formatTokens(hoverSlot.byModel[item.model] ?? 0)}`)),
-                ...(visibleSet.has(OTHER_MODEL) ? otherEntries.map(([model, tokens]) => h('div', { key: `om-${model}`, className: 'ud-tip-row ud-tip-row--sub' },
-                  `${model}: ${formatTokens(tokens)}`)) : []),
+                ...tipEntries.main.map((row) => h('div', { key: `m-${row.model}`, className: 'ud-tip-row' },
+                  h('i', { className: 'ud-legend-swatch', style: { background: colorFor(row.model) } }),
+                  `${row.model === OTHER_MODEL ? t('other') : row.model}: ${formatTokens(row.tokens)}`)),
+                ...tipEntries.other.map(([model, tokens]) => h('div', { key: `om-${model}`, className: 'ud-tip-row ud-tip-row--sub' },
+                  `${model}: ${formatTokens(tokens)}`)),
                 showRate ? h('div', { key: 'rate', className: 'ud-tip-row' }, `${t('cacheHitRate')}: ${cacheRateText(hoverSlot.cacheHit, hoverSlot.cacheMiss)}`) : null,
                 showSpeed ? h('div', { key: 'speed', className: 'ud-tip-row' }, `${t('avgSpeed')}: ${speedTipText(hoverSlot.speed)}`) : null,
                 showTtft ? h('div', { key: 'ttft', className: 'ud-tip-row' }, `${t('ttftLegend')}: ${ttftTipText(hoverSlot.ttft, t)}`) : null,
@@ -2301,15 +2348,17 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
           observer.disconnect()
         }
       }, [place])
+      // 空内容(无子节点或空数组)不显示悬浮盒,防零尺寸守卫下出现纯背景空壳
+      const show = Boolean(anchor && children != null && (!Array.isArray(children) || children.length > 0))
       const element = h('div', {
         className: 'ud-tip',
         ref: tipRef,
         style: {
           left: pos ? pos.left : 0,
           top: pos ? pos.top : 0,
-          visibility: pos && anchor ? 'visible' : 'hidden',
+          visibility: show && pos ? 'visible' : 'hidden',
         },
-      }, anchor ? children : null)
+      }, show ? children : null)
       return createPortal && typeof document !== 'undefined' && document.body
         ? createPortal(element, document.body)
         : element
@@ -2422,6 +2471,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
               const isOther = item.model === OTHER_MODEL
               const speedText = modelSpeedText(item.speed)
               const ttftText = modelTtftText(item.ttft)
+              const ioText = modelIoPercentText(item, t)
               const metaParts = [
                 item.cost !== undefined ? `≈ ${formatCost(item.cost, costCurrency)}` : null,
                 ttftText,
@@ -2436,8 +2486,12 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
                 },
                   h('i', { className: 'ud-model-swatch', style: { background: colorFor(item.model) } }),
                   h('div', { className: 'ud-model-id' },
-                    h('span', { className: 'ud-model-name' }, displayName(item.model)),
-                    isOther ? null : h('span', { className: 'ud-model-provider' }, providerOf(item.model))),
+                    isOther
+                      ? h('span', { className: 'ud-model-name' }, displayName(item.model))
+                      : [
+                          h('span', { className: 'ud-model-provider' }, providerOf(item.model)),
+                          h('span', { className: 'ud-model-name' }, modelNameOf(item.model)),
+                        ]),
                   isOther
                     ? h('button', {
                         className: 'ud-model-toggle', 'aria-expanded': expandedOther, 'aria-label': t('other'),
@@ -2450,7 +2504,8 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
                   h('div', { className: 'ud-model-values' },
                     h('span', { className: 'ud-model-tokens' },
                       `${formatTokens(item.tokens)} (${formatPercent((item.tokens / total) * PERCENT_SCALE)})`),
-                    h('span', { className: 'ud-model-pct' }, metaParts.join(' · ')))),
+                    ioText ? h('span', { className: 'ud-model-io' }, ioText) : null,
+                    h('span', { className: 'ud-model-meta' }, metaParts.join(' · ')))),
                 isOther
                   ? h('div', { className: cx('ud-model-other', expandedOther && 'ud-model-other--open') },
                       h('div', { className: 'ud-model-other-list' },
@@ -2469,6 +2524,14 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
                 h('div', { key: 'title', className: 'ud-tip-title' }, displayName(tipSegment.model)),
                 h('div', { key: 'tokens', className: 'ud-tip-row' }, `${t('total')}: ${formatTokens(tipSegment.tokens)}`),
                 h('div', { key: 'pct', className: 'ud-tip-row' }, `${t('percent')}: ${formatPercent(tipSegment.percent)}`),
+                hasTokenBuckets(tipSegment)
+                  ? [
+                      h('div', { key: 'input', className: 'ud-tip-row' }, `${t('priceInput')}: ${formatTokens(tipSegment.inputTokens)}`),
+                      h('div', { key: 'cacheRead', className: 'ud-tip-row' }, `${t('priceCacheRead')}: ${formatTokens(tipSegment.cacheReadTokens)}`),
+                      h('div', { key: 'cacheWrite', className: 'ud-tip-row' }, `${t('priceCacheWrite')}: ${formatTokens(tipSegment.cacheWriteTokens)}`),
+                      h('div', { key: 'output', className: 'ud-tip-row' }, `${t('priceOutput')}: ${formatTokens(tipSegment.outputTokens)}`),
+                    ]
+                  : null,
                 tipSegment.model === OTHER_MODEL && (tipSegment.items ?? []).length > 0
                   ? h('div', { key: 'breakdown', className: 'ud-tip-breakdown' },
                       tipSegment.items.map((detail) => h('div', { key: detail.model, className: 'ud-tip-row ud-tip-row--sub' },

package/src/query.js

@@ -1,249 +1,254 @@
-// 用量聚合纯函数:store 行形状仅作数据约定,零宿主依赖。
-// 桶串本地时区推导,同粒度字典序即时间序;daily 零值槽全枚举,超槽数保最新丢最旧。
-
-import { costOf, matchPrice } from './pricing.js'
-
-export const MAX_SLOTS = 2000
-
-const PAD_WIDTH = 2
-const PERCENT_SCALE = 100
-const MS_PER_SECOND = 1000
-
-const GRANULARITY_DAILY = 'D'
-const GRANULARITY_HOURLY = 'H'
-const GRANULARITY_MINUTE = 'M'
-
-const DAY_KEY_PATTERN = /^\d{4}-\d{2}-\d{2}$/
-const HOUR_KEY_PATTERN = /^\d{4}-\d{2}-\d{2}T\d{2}$/
-const MINUTE_KEY_PATTERN = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/
-
-// 桶串前缀宽:D 段定位日槽,M 行截取父 H 桶
-const DAY_KEY_WIDTH = 'YYYY-MM-DD'.length
-const HOUR_KEY_WIDTH = 'YYYY-MM-DDTHH'.length
-
-const pad = (value) => String(value).padStart(PAD_WIDTH, '0')
-const formatDate = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
-const formatHour = (date) => `${formatDate(date)}T${pad(date.getHours())}`
-const formatMinute = (date) => `${formatHour(date)}:${pad(date.getMinutes())}`
-
-const nextDay = (date) => {
-  const next = new Date(date)
-  next.setDate(next.getDate() + 1)
-  return next
-}
-const nextHour = (date) => {
-  const next = new Date(date)
-  next.setHours(next.getHours() + 1)
-  return next
-}
-const nextMinute = (date) => {
-  const next = new Date(date)
-  next.setMinutes(next.getMinutes() + MINUTE_STEP_MINUTES)
-  return next
-}
-
-// 分钟桶粒度:枚举与桶键共用同一步长,from 必须对齐桶边界
-const MINUTE_STEP_MINUTES = 10
-
-// pattern 锚定桶串形态,suffix 补全为本地时区可解析日期串,format 回读校验分量合法性
-const BUCKET_FORMS = {
-  [GRANULARITY_DAILY]: { pattern: DAY_KEY_PATTERN, suffix: 'T00:00:00', format: formatDate, step: nextDay },
-  [GRANULARITY_HOURLY]: { pattern: HOUR_KEY_PATTERN, suffix: ':00:00', format: formatHour, step: nextHour },
-  [GRANULARITY_MINUTE]: { pattern: MINUTE_KEY_PATTERN, suffix: ':00', format: formatMinute, step: nextMinute, align: MINUTE_STEP_MINUTES },
-}
-
-const parseBucketKey = (key, form) => {
-  if (typeof key !== 'string' || !form.pattern.test(key)) return null
-  const parsed = new Date(`${key}${form.suffix}`)
-  return Number.isNaN(parsed.getTime()) || form.format(parsed) !== key ? null : parsed
-}
-
-const enumerateBucketKeys = (form) => (from, to) => {
-  const start = parseBucketKey(from, form)
-  const end = parseBucketKey(to, form)
-  if (!start || !end) return []
-  if (form.align && start.getMinutes() % form.align !== 0) return []
-  const keys = []
-  for (let cursor = start, key = form.format(cursor); key <= to; key = form.format(cursor)) {
-    keys.push(key)
-    cursor = form.step(cursor)
-  }
-  return keys
-}
-
-export const daysInRange = enumerateBucketKeys(BUCKET_FORMS[GRANULARITY_DAILY])
-export const hourKeysInRange = enumerateBucketKeys(BUCKET_FORMS[GRANULARITY_HOURLY])
-export const minuteKeysInRange = enumerateBucketKeys(BUCKET_FORMS[GRANULARITY_MINUTE])
-
-const emptySlot = (day) => ({
-  day,
-  total: 0,
-  byModel: {},
-  byProvider: {},
-  requests: 0,
-  turns: 0,
-  cacheHit: 0,
-  cacheMiss: 0,
-})
-
-const addRowToSlot = (slot, row, tokens) => {
-  slot.total += tokens
-  slot.requests += row.requests
-  slot.turns += row.turns
-  slot.cacheHit += row.cacheReadTokens
-  slot.cacheMiss += row.inputTokens + row.cacheWriteTokens
-}
-
-const percentOf = (part, total) => (total === 0 ? 0 : (part / total) * PERCENT_SCALE)
-
-const rowTokens = (row) => row.inputTokens + row.outputTokens + row.cacheReadTokens + row.cacheWriteTokens
-
-// 速度配对分子:decode 口径取 decodeTokens;存量旧格式行(带时长无 decodeTokens)
-// 回落 outputTokens,聚合随新数据自然收敛
-const speedTokensOf = (row) => (row.durationMs ? row.decodeTokens ?? row.outputTokens : 0)
-
-export function aggregateRange(rows, g, from, to) {
-  const form = BUCKET_FORMS[g]
-  const slots = enumerateBucketKeys(form)(from, to).map((key) => emptySlot(key))
-  const slotByKey = new Map(slots.map((slot) => [slot.day, slot]))
-  const modelTotals = new Map()
-  const providerTotals = new Map()
-  const activeBuckets = new Set()
-  // 槽级配对:桶串 → 速度对 {decodeTokens, durationMs} 与首字对 {ttftMs, ttftSteps},
-  // 与模型级同口径(仅带配对数据的行计入)
-  const slotSpeeds = new Map()
-  const slotTtfts = new Map()
-  for (const row of rows) {
-    const slot = slotByKey.get(row.bucket)
-    // 桶串未落在枚举序列(如改粒度前的历史残行)不可归属,跳过防崩
-    if (!slot) continue
-    const tokens = rowTokens(row)
-    addRowToSlot(slot, row, tokens)
-    // 纯 timing 行(零 token 桶 + decode 配对)不参与归因,但仍进配对聚合
-    if (tokens > 0) {
-      activeBuckets.add(row.bucket)
-      slot.byModel[row.model] = (slot.byModel[row.model] ?? 0) + tokens
-      slot.byProvider[row.provider] = (slot.byProvider[row.provider] ?? 0) + tokens
-    }
-    if (row.durationMs) {
-      const pair = slotSpeeds.get(row.bucket) ?? { decodeTokens: 0, durationMs: 0 }
-      pair.decodeTokens += speedTokensOf(row)
-      pair.durationMs += row.durationMs
-      slotSpeeds.set(row.bucket, pair)
-    }
-    if (row.ttftSteps > 0) {
-      const pair = slotTtfts.get(row.bucket) ?? { ttftMs: 0, ttftSteps: 0 }
-      pair.ttftMs += row.ttftMs ?? 0
-      pair.ttftSteps += row.ttftSteps
-      slotTtfts.set(row.bucket, pair)
-    }
-    const modelTotal = modelTotals.get(row.model)
-    if (modelTotal) {
-      modelTotal.tokens += tokens
-      modelTotal.speedDurationMs += row.durationMs ?? 0
-      modelTotal.speedOutputTokens += speedTokensOf(row)
-      modelTotal.ttftMs += row.ttftMs ?? 0
-      modelTotal.ttftSteps += row.ttftSteps ?? 0
-    } else {
-      modelTotals.set(row.model, {
-        provider: row.provider,
-        tokens,
-        speedDurationMs: row.durationMs ?? 0,
-        speedOutputTokens: speedTokensOf(row),
-        ttftMs: row.ttftMs ?? 0,
-        ttftSteps: row.ttftSteps ?? 0,
-      })
-    }
-    providerTotals.set(row.provider, (providerTotals.get(row.provider) ?? 0) + tokens)
-  }
-  // 槽级 speed/ttft 条件挂:无配对数据的槽不挂字段(存量槽形契约不变)
-  for (const slot of slots) {
-    const speedPair = slotSpeeds.get(slot.day)
-    if (speedPair && speedPair.durationMs > 0) slot.speed = speedPair.decodeTokens / (speedPair.durationMs / MS_PER_SECOND)
-    const ttftPair = slotTtfts.get(slot.day)
-    if (ttftPair && ttftPair.ttftSteps > 0) slot.ttft = ttftPair.ttftMs / ttftPair.ttftSteps
-  }
-  const totals = { tokens: 0, requests: 0, turns: 0, cacheHit: 0, cacheMiss: 0 }
-  for (const slot of slots) {
-    totals.tokens += slot.total
-    totals.requests += slot.requests
-    totals.turns += slot.turns
-    totals.cacheHit += slot.cacheHit
-    totals.cacheMiss += slot.cacheMiss
-  }
-  // speed = decode 配对口径(decodeTokens ÷ 时长秒);ttft = 首 token 延迟
-  // 加权平均(毫秒);仅配对数据存在的条目挂字段,无数据条目不挂;
-  // 纯 timing 行可能产生 0-token 条目,列表保持只含 token 行(存量契约)
-  const models = [...modelTotals.entries()]
-    .filter(([, agg]) => agg.tokens > 0)
-    .map(([model, agg]) => ({
-      model,
-      provider: agg.provider,
-      tokens: agg.tokens,
-      percent: percentOf(agg.tokens, totals.tokens),
-      ...(agg.speedDurationMs > 0 ? { speed: agg.speedOutputTokens / (agg.speedDurationMs / MS_PER_SECOND) } : {}),
-      ...(agg.ttftSteps > 0 ? { ttft: agg.ttftMs / agg.ttftSteps } : {}),
-    }))
-    .sort((a, b) => b.tokens - a.tokens)
-  const providers = [...providerTotals.entries()]
-    .filter(([, tokens]) => tokens > 0)
-    .map(([provider, tokens]) => ({ provider, tokens, percent: percentOf(tokens, totals.tokens) }))
-    .sort((a, b) => b.tokens - a.tokens)
-  const truncated = slots.length > MAX_SLOTS
-  const daily = truncated ? slots.slice(-MAX_SLOTS) : slots
-  const top = models[0]
-  const result = {
-    from,
-    to,
-    tokens: totals.tokens,
-    requests: totals.requests,
-    turns: totals.turns,
-    cacheHit: totals.cacheHit,
-    cacheMiss: totals.cacheMiss,
-    activeDays: activeBuckets.size,
-    topModel: top?.model ?? '',
-    topProvider: top?.provider ?? '',
-    daily,
-    models,
-    providers,
-  }
-  if (truncated) result.truncated = true
-  return result
-}
-
-// 聚合计价的槽定位:D 折叠到日槽,H/M 即本槽;计价一律取行所属 H 桶起点
-const COST_SLOT_KEYS = {
-  [GRANULARITY_DAILY]: (bucket) => bucket.slice(0, DAY_KEY_WIDTH),
-  [GRANULARITY_HOURLY]: (bucket) => bucket,
-  [GRANULARITY_MINUTE]: (bucket) => bucket,
-}
-
-// 聚合计价:以可见槽为唯一口径,cost 行按 H 桶起点匹配价格后累加;
-// unpriced = 有 token 而未命中价的去重 H 桶数,被截断丢弃的行整体不参与。
-// 纯函数返回新 result,不修改入参;调用方不调用则响应无 cost/unpriced 字段
-export function attachCosts(result, costRows, granularity, rules) {
-  const slotKeyOf = COST_SLOT_KEYS[granularity]
-  const slotOfDay = new Map(result.daily.map((slot) => [slot.day, slot]))
-  const slotCosts = new Map()
-  const modelCosts = new Map(result.models.map((entry) => [entry.model, 0]))
-  const unpricedHours = new Set()
-  for (const row of costRows) {
-    const slot = slotOfDay.get(slotKeyOf(row.bucket))
-    if (!slot || rowTokens(row) === 0) continue
-    const hourKey = row.bucket.slice(0, HOUR_KEY_WIDTH)
-    const date = parseBucketKey(hourKey, BUCKET_FORMS[GRANULARITY_HOURLY])
-    if (!date) continue
-    const price = matchPrice(rules, row.model, date)
-    if (!price) {
-      unpricedHours.add(hourKey)
-      continue
-    }
-    const cost = costOf(price, row)
-    slotCosts.set(slot.day, (slotCosts.get(slot.day) ?? 0) + cost)
-    if (modelCosts.has(row.model)) modelCosts.set(row.model, modelCosts.get(row.model) + cost)
-  }
-  const daily = result.daily.map((slot) => ({ ...slot, cost: slotCosts.get(slot.day) ?? 0 }))
-  const cost = daily.reduce((sum, slot) => sum + slot.cost, 0)
-  const models = result.models.map((entry) => ({ ...entry, cost: modelCosts.get(entry.model) }))
-  return { ...result, daily, models, cost, unpriced: unpricedHours.size }
-}
+import { costOf, matchPrice } from './pricing.js'
+
+export const MAX_SLOTS = 2000
+
+const PAD_WIDTH = 2
+const PERCENT_SCALE = 100
+const MS_PER_SECOND = 1000
+
+const GRANULARITY_DAILY = 'D'
+const GRANULARITY_HOURLY = 'H'
+const GRANULARITY_MINUTE = 'M'
+
+const DAY_KEY_PATTERN = /^\d{4}-\d{2}-\d{2}$/
+const HOUR_KEY_PATTERN = /^\d{4}-\d{2}-\d{2}T\d{2}$/
+const MINUTE_KEY_PATTERN = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/
+
+// 桶串前缀宽:D 段定位日桶,M 行截取父 H 桶
+const DAY_KEY_WIDTH = 'YYYY-MM-DD'.length
+const HOUR_KEY_WIDTH = 'YYYY-MM-DDTHH'.length
+
+const pad = (value) => String(value).padStart(PAD_WIDTH, '0')
+const formatDate = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+const formatHour = (date) => `${formatDate(date)}T${pad(date.getHours())}`
+const formatMinute = (date) => `${formatHour(date)}:${pad(date.getMinutes())}`
+
+const nextDay = (date) => {
+  const next = new Date(date)
+  next.setDate(next.getDate() + 1)
+  return next
+}
+const nextHour = (date) => {
+  const next = new Date(date)
+  next.setHours(next.getHours() + 1)
+  return next
+}
+const nextMinute = (date) => {
+  const next = new Date(date)
+  next.setMinutes(next.getMinutes() + MINUTE_STEP_MINUTES)
+  return next
+}
+
+// 分钟桶粒度:枚举与桶键共用同一步长,from 必须对齐桶边界
+const MINUTE_STEP_MINUTES = 10
+
+// pattern 锚定桶串外形,suffix 补全为本地时区可解析日期串,format 回读校验分量合法性
+const BUCKET_FORMS = {
+  [GRANULARITY_DAILY]: { pattern: DAY_KEY_PATTERN, suffix: 'T00:00:00', format: formatDate, step: nextDay },
+  [GRANULARITY_HOURLY]: { pattern: HOUR_KEY_PATTERN, suffix: ':00:00', format: formatHour, step: nextHour },
+  [GRANULARITY_MINUTE]: { pattern: MINUTE_KEY_PATTERN, suffix: ':00', format: formatMinute, step: nextMinute, align: MINUTE_STEP_MINUTES },
+}
+
+const parseBucketKey = (key, form) => {
+  if (typeof key !== 'string' || !form.pattern.test(key)) return null
+  const parsed = new Date(`${key}${form.suffix}`)
+  return Number.isNaN(parsed.getTime()) || form.format(parsed) !== key ? null : parsed
+}
+
+const enumerateBucketKeys = (form) => (from, to) => {
+  const start = parseBucketKey(from, form)
+  const end = parseBucketKey(to, form)
+  if (!start || !end) return []
+  if (form.align && start.getMinutes() % form.align !== 0) return []
+  const keys = []
+  for (let cursor = start, key = form.format(cursor); key <= to; key = form.format(cursor)) {
+    keys.push(key)
+    cursor = form.step(cursor)
+  }
+  return keys
+}
+
+export const daysInRange = enumerateBucketKeys(BUCKET_FORMS[GRANULARITY_DAILY])
+export const hourKeysInRange = enumerateBucketKeys(BUCKET_FORMS[GRANULARITY_HOURLY])
+export const minuteKeysInRange = enumerateBucketKeys(BUCKET_FORMS[GRANULARITY_MINUTE])
+
+const emptySlot = (day) => ({
+  day,
+  total: 0,
+  byModel: {},
+  byProvider: {},
+  requests: 0,
+  turns: 0,
+  cacheHit: 0,
+  cacheMiss: 0,
+})
+
+const addRowToSlot = (slot, row, tokens) => {
+  slot.total += tokens
+  slot.requests += row.requests
+  slot.turns += row.turns
+  slot.cacheHit += row.cacheReadTokens
+  slot.cacheMiss += row.inputTokens + row.cacheWriteTokens
+}
+
+const percentOf = (part, total) => (total === 0 ? 0 : (part / total) * PERCENT_SCALE)
+
+const rowTokens = (row) => row.inputTokens + row.outputTokens + row.cacheReadTokens + row.cacheWriteTokens
+
+// 速度配对分子:decode 口径取 decodeTokens;存量旧格式行(带时长无 decodeTokens)
+// 回落 outputTokens,聚合随新数据自然收敛
+const speedTokensOf = (row) => (row.durationMs ? row.decodeTokens ?? row.outputTokens : 0)
+
+export function aggregateRange(rows, g, from, to) {
+  const form = BUCKET_FORMS[g]
+  const slots = enumerateBucketKeys(form)(from, to).map((key) => emptySlot(key))
+  const slotByKey = new Map(slots.map((slot) => [slot.day, slot]))
+  const modelTotals = new Map()
+  const providerTotals = new Map()
+  const activeBuckets = new Set()
+  // 槽级配对:桶串 → 速度对 {decodeTokens, durationMs} 与首字对 {ttftMs, ttftSteps},
+  const slotSpeeds = new Map()
+  const slotTtfts = new Map()
+  for (const row of rows) {
+    const slot = slotByKey.get(row.bucket)
+    // 桶串未落在枚举序列(如改粒度前的历史残行)不可归属,跳过防崩
+    if (!slot) continue
+    const tokens = rowTokens(row)
+    addRowToSlot(slot, row, tokens)
+    // 纯 timing 行(零 token 桶 + decode 配对)不参与归属,但仍进配对聚合
+    if (tokens > 0) {
+      activeBuckets.add(row.bucket)
+      slot.byModel[row.model] = (slot.byModel[row.model] ?? 0) + tokens
+      slot.byProvider[row.provider] = (slot.byProvider[row.provider] ?? 0) + tokens
+    }
+    if (row.durationMs) {
+      const pair = slotSpeeds.get(row.bucket) ?? { decodeTokens: 0, durationMs: 0 }
+      pair.decodeTokens += speedTokensOf(row)
+      pair.durationMs += row.durationMs
+      slotSpeeds.set(row.bucket, pair)
+    }
+    if (row.ttftSteps > 0) {
+      const pair = slotTtfts.get(row.bucket) ?? { ttftMs: 0, ttftSteps: 0 }
+      pair.ttftMs += row.ttftMs ?? 0
+      pair.ttftSteps += row.ttftSteps
+      slotTtfts.set(row.bucket, pair)
+    }
+    const modelTotal = modelTotals.get(row.model)
+    if (modelTotal) {
+      modelTotal.tokens += tokens
+      modelTotal.inputTokens += row.inputTokens
+      modelTotal.outputTokens += row.outputTokens
+      modelTotal.cacheReadTokens += row.cacheReadTokens
+      modelTotal.cacheWriteTokens += row.cacheWriteTokens
+      modelTotal.speedDurationMs += row.durationMs ?? 0
+      modelTotal.speedOutputTokens += speedTokensOf(row)
+      modelTotal.ttftMs += row.ttftMs ?? 0
+      modelTotal.ttftSteps += row.ttftSteps ?? 0
+    } else {
+      modelTotals.set(row.model, {
+        provider: row.provider,
+        tokens,
+        inputTokens: row.inputTokens,
+        outputTokens: row.outputTokens,
+        cacheReadTokens: row.cacheReadTokens,
+        cacheWriteTokens: row.cacheWriteTokens,
+        speedDurationMs: row.durationMs ?? 0,
+        speedOutputTokens: speedTokensOf(row),
+        ttftMs: row.ttftMs ?? 0,
+        ttftSteps: row.ttftSteps ?? 0,
+      })
+    }
+    providerTotals.set(row.provider, (providerTotals.get(row.provider) ?? 0) + tokens)
+  }
+  for (const slot of slots) {
+    const speedPair = slotSpeeds.get(slot.day)
+    if (speedPair && speedPair.durationMs > 0) slot.speed = speedPair.decodeTokens / (speedPair.durationMs / MS_PER_SECOND)
+    const ttftPair = slotTtfts.get(slot.day)
+    if (ttftPair && ttftPair.ttftSteps > 0) slot.ttft = ttftPair.ttftMs / ttftPair.ttftSteps
+  }
+  const totals = { tokens: 0, requests: 0, turns: 0, cacheHit: 0, cacheMiss: 0 }
+  for (const slot of slots) {
+    totals.tokens += slot.total
+    totals.requests += slot.requests
+    totals.turns += slot.turns
+    totals.cacheHit += slot.cacheHit
+    totals.cacheMiss += slot.cacheMiss
+  }
+  // speed = decode 配对口径(decodeTokens ÷ 时长秒);ttft = 首 token 延迟
+  // 加权平均(毫秒);仅配对数据存在的条目挂字段,无数据条目不挂
+  // 纯 timing 行可能产生 0-token 条目,列表保持只含 token 行(存量契约)
+  const models = [...modelTotals.entries()]
+    .filter(([, agg]) => agg.tokens > 0)
+    .map(([model, agg]) => ({
+      model,
+      provider: agg.provider,
+      tokens: agg.tokens,
+      inputTokens: agg.inputTokens,
+      outputTokens: agg.outputTokens,
+      cacheReadTokens: agg.cacheReadTokens,
+      cacheWriteTokens: agg.cacheWriteTokens,
+      percent: percentOf(agg.tokens, totals.tokens),
+      ...(agg.speedDurationMs > 0 ? { speed: agg.speedOutputTokens / (agg.speedDurationMs / MS_PER_SECOND) } : {}),
+      ...(agg.ttftSteps > 0 ? { ttft: agg.ttftMs / agg.ttftSteps } : {}),
+    }))
+    .sort((a, b) => b.tokens - a.tokens)
+  const providers = [...providerTotals.entries()]
+    .filter(([, tokens]) => tokens > 0)
+    .map(([provider, tokens]) => ({ provider, tokens, percent: percentOf(tokens, totals.tokens) }))
+    .sort((a, b) => b.tokens - a.tokens)
+  const truncated = slots.length > MAX_SLOTS
+  const daily = truncated ? slots.slice(-MAX_SLOTS) : slots
+  const top = models[0]
+  const result = {
+    from,
+    to,
+    tokens: totals.tokens,
+    requests: totals.requests,
+    turns: totals.turns,
+    cacheHit: totals.cacheHit,
+    cacheMiss: totals.cacheMiss,
+    activeDays: activeBuckets.size,
+    topModel: top?.model ?? '',
+    topProvider: top?.provider ?? '',
+    daily,
+    models,
+    providers,
+  }
+  if (truncated) result.truncated = true
+  return result
+}
+
+// 聚合计价的槽定位:D 折叠到日槽,H/M 即本槽,计价一律取行所属 H 槽起点
+const COST_SLOT_KEYS = {
+  [GRANULARITY_DAILY]: (bucket) => bucket.slice(0, DAY_KEY_WIDTH),
+  [GRANULARITY_HOURLY]: (bucket) => bucket,
+  [GRANULARITY_MINUTE]: (bucket) => bucket,
+}
+
+// 聚合计价:以可见槽为唯一口径,cost 行按 H 槽起点匹配价格后累加;
+export function attachCosts(result, costRows, granularity, rules) {
+  const slotKeyOf = COST_SLOT_KEYS[granularity]
+  const slotOfDay = new Map(result.daily.map((slot) => [slot.day, slot]))
+  const slotCosts = new Map()
+  const modelCosts = new Map(result.models.map((entry) => [entry.model, 0]))
+  const unpricedHours = new Set()
+  for (const row of costRows) {
+    const slot = slotOfDay.get(slotKeyOf(row.bucket))
+    if (!slot || rowTokens(row) === 0) continue
+    const hourKey = row.bucket.slice(0, HOUR_KEY_WIDTH)
+    const date = parseBucketKey(hourKey, BUCKET_FORMS[GRANULARITY_HOURLY])
+    if (!date) continue
+    const price = matchPrice(rules, row.model, date)
+    if (!price) {
+      unpricedHours.add(hourKey)
+      continue
+    }
+    const cost = costOf(price, row)
+    slotCosts.set(slot.day, (slotCosts.get(slot.day) ?? 0) + cost)
+    if (modelCosts.has(row.model)) modelCosts.set(row.model, modelCosts.get(row.model) + cost)
+  }
+  const daily = result.daily.map((slot) => ({ ...slot, cost: slotCosts.get(slot.day) ?? 0 }))
+  const cost = daily.reduce((sum, slot) => sum + slot.cost, 0)
+  const models = result.models.map((entry) => ({ ...entry, cost: modelCosts.get(entry.model) }))
+  return { ...result, daily, models, cost, unpriced: unpricedHours.size }
+}

package/test/client.test.mjs

@@ -67,6 +67,9 @@ const {
   matchPrice,
   maxSlotsFor,
   minuteTickLabel,
+  modelIoPercentText,
+  hasTipContent,
+  tipModelEntries,
   modelSegmentLabel,
   modelSpeedText,
   modelNameOf,
@@ -810,6 +813,56 @@ test('donutSegments 全零 total 回落下限防除零', () => {
   assert.equal(segments[0].percent, 0)
 })
 
+test('groupStats 哨兵折叠四桶求和,top 模型四桶透传', () => {
+  // Given 超 top 上限模型条目带四桶 When 分组 Then 哨兵四桶为 rest 求和,top 条目原字段保留
+  const stats = {
+    models: [
+      { model: 'p/m1', tokens: 500, inputTokens: 300, outputTokens: 200, cacheReadTokens: 0, cacheWriteTokens: 0 },
+      { model: 'p/m2', tokens: 400, inputTokens: 100, outputTokens: 300, cacheReadTokens: 0, cacheWriteTokens: 0 },
+      { model: 'p/m3', tokens: 300, inputTokens: 0, outputTokens: 100, cacheReadTokens: 150, cacheWriteTokens: 50 },
+      { model: 'p/m4', tokens: 200, inputTokens: 80, outputTokens: 120, cacheReadTokens: 0, cacheWriteTokens: 0 },
+      { model: 'p/m5', tokens: 100, inputTokens: 60, outputTokens: 40, cacheReadTokens: 0, cacheWriteTokens: 0 },
+      { model: 'p/m6', tokens: 50, inputTokens: 10, outputTokens: 30, cacheReadTokens: 5, cacheWriteTokens: 5 },
+    ],
+    daily: [],
+  }
+  const grouped = groupStats(stats)
+  assert.equal(grouped.models[0].inputTokens, 300)
+  assert.equal(grouped.models[0].outputTokens, 200)
+  assert.deepEqual(grouped.models[5], {
+    model: OTHER_MODEL,
+    tokens: 50,
+    inputTokens: 10,
+    outputTokens: 30,
+    cacheReadTokens: 5,
+    cacheWriteTokens: 5,
+    items: [stats.models[5]],
+  })
+})
+
+test('groupStats 哨兵费用同源:无 cost 输入不挂 cost,有 cost 求和', () => {
+  // Given rest 条目无 cost When 折叠 Then 哨兵无 cost 字段;Given rest 带 cost When 折叠 Then 哨兵求和
+  const bare = groupStats({ models: [
+    { model: 'p/m1', tokens: 500 },
+    { model: 'p/m2', tokens: 400 },
+    { model: 'p/m3', tokens: 300 },
+    { model: 'p/m4', tokens: 200 },
+    { model: 'p/m5', tokens: 100 },
+    { model: 'p/m6', tokens: 50 },
+  ], daily: [] })
+  assert.equal('cost' in bare.models[5], false)
+  const priced = groupStats({ models: [
+    { model: 'p/m1', tokens: 500, cost: 1 },
+    { model: 'p/m2', tokens: 400, cost: 2 },
+    { model: 'p/m3', tokens: 300, cost: undefined },
+    { model: 'p/m4', tokens: 200, cost: 4 },
+    { model: 'p/m5', tokens: 100, cost: 8 },
+    { model: 'p/m6', tokens: 50, cost: 16 },
+    { model: 'p/m7', tokens: 25, cost: 32 },
+  ], daily: [] })
+  assert.equal(priced.models[5].cost, 16 + 32)
+})
+
 test('groupStats 哨兵保留其他模型明细供展开与提示', () => {
   const stats = {
     models: [
@@ -824,6 +877,8 @@ test('groupStats 哨兵保留其他模型明细供展开与提示', () => {
   }
   const grouped = groupStats(stats)
   assert.deepEqual(grouped.models[5].items, [{ model: 'p/m6', tokens: 50 }])
+  // Given 旧形条目无四桶 When 折叠 Then 哨兵不合成零值四桶,与 top 条目降级形态一致
+  assert.equal('inputTokens' in grouped.models[5], false)
 })
 
 test('groupStats 逐日保留其他明细映射供 tooltip', () => {
@@ -856,6 +911,45 @@ test('模型速度文本:官方吞吐口径格式化,无速度为空串', () =>
   assert.equal(modelSpeedText(undefined), '')
 })
 
+test('模型输入输出占比构成:缓存/输入/输出 三段各占该模型 token 总量', () => {
+  // Given 四桶齐备的模型条目 When 格式化 Then 三段占比相对 tokens 总量,缓存=读+写,合计 100%,顺序缓存/输入/输出
+  const zhT = createTranslator(MESSAGES_ZH)
+  const enT = createTranslator(MESSAGES_EN)
+  const item = { tokens: 1000, inputTokens: 31, cacheReadTokens: 954, cacheWriteTokens: 10, outputTokens: 5 }
+  assert.equal(modelIoPercentText(item, zhT), '缓存 96.4% · 输入 3.1% · 输出 0.5%')
+  assert.equal(modelIoPercentText(item, enT), 'Cache 96.4% · Input 3.1% · Output 0.5%')
+})
+
+test('趋势 tooltip 模型行:仅含可见且当前时段有用量的模型', () => {
+  // Given 槽内 byModel 含零值与非零值,OTHER 明细含零值与无序多元素 When 取行数据 Then 主行与子行均过滤零用量,子行按 tokens 降序,OTHER 不可见时子行为空
+  const hoverSlot = {
+    total: 300,
+    byModel: { 'p/a': 200, 'p/b': 0, [OTHER_MODEL]: 100 },
+    otherByModel: { 'p/y': 0, 'p/x': 20, 'p/z': 50 },
+  }
+  const visible = new Set(['p/a', 'p/b', OTHER_MODEL])
+  const rows = tipModelEntries(hoverSlot, visible)
+  assert.deepEqual(rows.main, [{ model: 'p/a', tokens: 200 }, { model: OTHER_MODEL, tokens: 100 }])
+  assert.deepEqual(rows.other, [['p/z', 50], ['p/x', 20]])
+  const hiddenOther = tipModelEntries(hoverSlot, new Set(['p/a']))
+  assert.deepEqual(hiddenOther.main, [{ model: 'p/a', tokens: 200 }])
+  assert.deepEqual(hiddenOther.other, [])
+})
+
+test('趋势 tooltip 内容门:仅 total>0 的槽渲染', () => {
+  // Given 全零槽/常规槽 When 判定 Then 全零槽无内容,常规槽有内容,null 槽无内容
+  assert.equal(hasTipContent(null), false)
+  assert.equal(hasTipContent({ total: 0 }), false)
+  assert.equal(hasTipContent({ total: 5 }), true)
+})
+
+test('模型输入输出占比构成:缺四桶或零总量为空串', () => {
+  const zhT = createTranslator(MESSAGES_ZH)
+  assert.equal(modelIoPercentText({ tokens: 100 }, zhT), '')
+  assert.equal(modelIoPercentText(undefined, zhT), '')
+  assert.equal(modelIoPercentText({ tokens: 0, inputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0, outputTokens: 0 }, zhT), '')
+})
+
 test('模型首字文本:语言中立短时长,无 ttft 为空串', () => {
   assert.equal(modelTtftText(200), 'TTFT 0.2s')
   assert.equal(modelTtftText(162000), 'TTFT 2m42s')

package/test/query.test.mjs

@@ -117,8 +117,26 @@ test('D 粒度聚合总量排序与占比正确', () => {
   assert.equal(out.topModel, 'deepseek/deepseek-chat')
   assert.equal(out.topProvider, 'deepseek')
   assert.deepEqual(out.models, [
-    { model: 'deepseek/deepseek-chat', provider: 'deepseek', tokens: 350, percent: (350 / 410) * 100 },
-    { model: 'deepseek-chat', provider: 'default', tokens: 60, percent: (60 / 410) * 100 },
+    {
+      model: 'deepseek/deepseek-chat',
+      provider: 'deepseek',
+      tokens: 350,
+      percent: (350 / 410) * 100,
+      inputTokens: 100,
+      outputTokens: 50,
+      cacheReadTokens: 200,
+      cacheWriteTokens: 0,
+    },
+    {
+      model: 'deepseek-chat',
+      provider: 'default',
+      tokens: 60,
+      percent: (60 / 410) * 100,
+      inputTokens: 10,
+      outputTokens: 20,
+      cacheReadTokens: 0,
+      cacheWriteTokens: 30,
+    },
   ])
   assert.deepEqual(out.providers, [
     { provider: 'deepseek', tokens: 350, percent: (350 / 410) * 100 },
@@ -351,6 +369,38 @@ test('ttft 模型级聚合:加权平均,无 ttft 行不参与,无数据不挂字
   assert.equal('ttft' in m2, false)
 })
 
+test('模型级四桶聚合:models 条目带输入输出与缓存拆分,按该模型行累加', () => {
+  // Given 两模型多行四桶用量 When D 粒度聚合 Then models 每项四桶为该模型行累加,排序与占比不变
+  const rows = [
+    makeRow({ bucket: '2020-01-01', model: 'm1', provider: 'p1', inputTokens: 100, outputTokens: 50, cacheReadTokens: 200, cacheWriteTokens: 10 }),
+    makeRow({ bucket: '2020-01-02', model: 'm1', provider: 'p1', inputTokens: 30, outputTokens: 70 }),
+    makeRow({ bucket: '2020-01-01', model: 'm2', provider: 'p2', inputTokens: 5, outputTokens: 25, cacheWriteTokens: 8 }),
+  ]
+  const out = aggregateRange(rows, 'D', '2020-01-01', '2020-01-02')
+  assert.deepEqual(out.models, [
+    {
+      model: 'm1',
+      provider: 'p1',
+      tokens: 460,
+      percent: (460 / 498) * 100,
+      inputTokens: 130,
+      outputTokens: 120,
+      cacheReadTokens: 200,
+      cacheWriteTokens: 10,
+    },
+    {
+      model: 'm2',
+      provider: 'p2',
+      tokens: 38,
+      percent: (38 / 498) * 100,
+      inputTokens: 5,
+      outputTokens: 25,
+      cacheReadTokens: 0,
+      cacheWriteTokens: 8,
+    },
+  ])
+})
+
 test('槽级 ttft 聚合:同槽配对,无 ttft 槽不挂字段,attachCosts 保留', () => {
   const rows = [
     makeRow({ bucket: '2020-01-01', model: 'm1', provider: 'p1', outputTokens: 20, ttftMs: 2000, ttftSteps: 1 }),
@@ -373,7 +423,7 @@ test('attachCosts H 槽按桶起点计价并归集 totals 与 models', () => {
   assert.equal(out.daily[1].cost, 2)
   assert.equal(out.cost, 2)
   assert.equal(out.unpriced, 0)
-  assert.deepEqual(out.models, [{ model: 'm1', provider: 'p1', tokens: 1500000, percent: 100, cost: 2 }])
+  assert.deepEqual(out.models, [{ model: 'm1', provider: 'p1', tokens: 1500000, inputTokens: 1000000, outputTokens: 500000, cacheReadTokens: 0, cacheWriteTokens: 0, percent: 100, cost: 2 }])
   assert.equal(out.from, '2020-01-01T00')
   assert.equal(out.tokens, 1500000)
   // 纯函数:入参 result 不被修改

package/test/turn-tail.test.mjs

@@ -151,6 +151,22 @@ test('反查:容器换引用(快照更替)后新节点可见', () => {
   assert.equal(turnTokenUsageOfMessage(oldNodes, 'm-1'), oldUsage)
 })
 
+test('反查:仓库身份恒定而节点集更替时新增回合可见', () => {
+  // Given 官方 chat 仓库语义:store 实例身份跨回合恒定,values() 返回的节点集数组随 upsert 换新引用
+  const usage1 = { uncachedInputTokens: 1, outputTokens: 1, totalTokens: 2 }
+  const usage2 = { uncachedInputTokens: 7, outputTokens: 7, totalTokens: 14 }
+  let snapshot = [tailNode('m-1', usage1)]
+  const store = { values: () => snapshot }
+  assert.equal(turnUsageSourceOfMessage(store, 'm-1'), usage1)
+  // When 第二回合 turn-tail 节点入库(同一 store,节点集数组换引用)
+  snapshot = [...snapshot, tailNode('m-2', usage2)]
+  // Then 新回合反查命中,不依赖页面刷新重建索引
+  assert.equal(turnUsageSourceOfMessage(store, 'm-2'), usage2)
+  assert.equal(turnTokenUsageOfMessage(store, 'm-2'), usage2)
+  // 旧回合反查不受重建影响
+  assert.equal(turnUsageSourceOfMessage(store, 'm-1'), usage1)
+})
+
 test('计价模型键:双全拼两段,仅 model 用裸名,双缺回退全通配键', () => {
   assert.equal(turnModelOf({ routes: [{ provider: 'p', model: 'm' }] }), 'p/m')
   assert.equal(turnModelOf({ routes: [{ model: 'm' }] }), 'm')