@mzzsfy/dsh-usage-dash 0.8.0 → 0.9.1

package/README.md

@@ -90,3 +90,7 @@ dsh --profile <profile> --no-open --port 9191
 装载本插件需要它在 `dsh.profile.bundles`(`dsh plugin --profile web add @mzzsfy/dsh-usage-dash`);bundles 表变化不支持热重载,需重启 dsh 生效。之后代码改动:宿主半区经 dev-link 自动热重载,client 半区刷新页面即生效。
 
 双语能力经宿主 `locale` 服务声明装载(与官方插件同构);极端旧宿主无该服务时插件整体未激活(cordis 门控,升级宿主即自愈)。
+
+## dsh 版本兼容
+
+三版本全部通过:用量仪表盘渲染、激活 live。

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.8.0",
+  "version": "0.9.1",
   "type": "module",
   "main": "src/index.js",
   "exports": {

package/src/client.js

@@ -13,7 +13,7 @@ const MINUTE_PRESET_MINUTES = { '3h': 3 * 60, '24h': 24 * 60, '3d': 3 * 24 * 60,
 
 const DEFAULT_RANGE = '30'
 const DEFAULT_HOUR_PRESET = '24h'
-const DEFAULT_MINUTE_PRESET = '24h'
+const DEFAULT_MINUTE_PRESET = '3h'
 
 // 天视图渲染上限;时/分上限 = 闭区间桶数(hour N+1 槽,minute N/10+1 槽)
 const DAY_MAX_SLOTS = 180
@@ -196,6 +196,7 @@ const MESSAGES_ZH = {
   avgSpeed: '平均生成速度',
   speedLegend: '平均生成速度',
   ttftLegend: '首 token 延迟',
+  avgPrice: '均价',
   topModel: '最常用模型',
   topModelHint: '按 token 用量排序,非调用次数',
   heatmap: '活跃热力图',
@@ -343,6 +344,7 @@ const MESSAGES_EN = {
   avgSpeed: 'Avg speed',
   speedLegend: 'Avg speed',
   ttftLegend: 'First-token latency',
+  avgPrice: 'Avg price',
   topModel: 'Top model',
   topModelHint: 'Ranked by token usage, not call count',
   heatmap: 'Activity heatmap',
@@ -634,6 +636,15 @@ function groupPointSlots(slots) {
   return { models, daily: foldSlotsByTop(slots, topModels) }
 }
 
+// 聚合展示区(统计卡/模型用量/统计截至)数据源:随视图联动——天视图用 range 聚合,时/分视图
+// (预设与自定义挡)用点端点聚合,字段同形;点数据未回为 null,调用方判空不渲染
+const cardsStatsOf = (view, stats, pointView) => (view === 'day' ? stats : pointView)
+
+// 模型用量列表:天视图用预折叠分组,时/分视图折叠点窗口模型(top5+other),点数据未回为 null
+const usageModelsOf = (view, grouped, pointView) => (
+  view === 'day' ? grouped?.models ?? null : pointView ? topWithOther(pointView.models) : null
+)
+
 // 趋势图视口常量
 const CHART_HEIGHT = 220
 const CHART_PAD = { left: 46, right: 65, top: 10, bottom: 26 }
@@ -665,7 +676,7 @@ function niceTicks(max, count) {
   return ticks
 }
 
-// 图例显隐切换:current 为 null 表示全部可见;普通点击单选/再点恢复,
+// 图例显隐切换:current 为当前实际生效集;普通点击单选/再点恢复,
 // ctrl 单项切换,隐藏最后一项为无操作(返回原引用)
 function legendToggle(current, key, ctrl) {
   if (ctrl) {
@@ -905,6 +916,13 @@ const hasTipContent = (hoverSlot) => Boolean(hoverSlot) && hoverSlot.total > 0
 const hasAnomalyNews = (status) => !!status
   && ((status.log?.length ?? 0) > 0 || (status.recordFailures ?? 0) > 0)
 
+// 趋势折线默认显隐集:模型全显 + 速度线(有数据时);缓存命中率与首 token 延迟默认隐藏,
+// 图例切换后以组件内键集接管(不持久化)
+const trendDefaultVisibleKeys = (modelOrder, hasSpeed) => new Set([
+  ...modelOrder,
+  ...(hasSpeed ? [LEGEND_KEY_SPEED] : []),
+])
+
 // 趋势 tooltip 模型行数据:主行 = 可见且当前时段有用量的模型;OTHER 子行 = OTHER 可见
 // 且当前时段有用量的其余模型明细,按 tokens 降序由本函数保证
 const tipModelEntries = (hoverSlot, visibleSet) => {
@@ -918,6 +936,11 @@ const tipModelEntries = (hoverSlot, visibleSet) => {
   return { main, other }
 }
 
+// 趋势 tooltip 槽级均价:槽费用折每百万 token 单价;无槽或无有效费用(含零值)为 null
+const tipAvgPriceText = (hoverSlot, currency) => (
+  hoverSlot ? avgPriceText(hoverSlot.cost, hoverSlot.total, currency) || null : null
+)
+
 // 热力图:窗口固定 26 周,与所选范围无关
 const HEAT_WEEKS = 26
 const HEAT_ROW_COUNT = 7
@@ -1421,10 +1444,11 @@ const COST_MICRO_THRESHOLD = 0.01
 const COST_PLACEHOLDER = '—'
 const THOUSANDS_PATTERN = /(\d)(?=(\d{3})+(?!\d))/g
 
-// 千分位 + 至少两位小数,正值小于 0.01 时四位;货币空串不加符号,「≈」前缀由调用方拼
-function formatCost(value, currency) {
-  const decimals = value > 0 && value < COST_MICRO_THRESHOLD ? COST_MICRO_DECIMALS : COST_DECIMALS
-  const [whole, fraction] = value.toFixed(decimals).split('.')
+// 千分位 + 至少 decimals 位小数,正值小于 10^-decimals 时小数位 +2;货币空串不加符号,「≈」前缀由调用方拼
+function formatCost(value, currency, decimals = COST_DECIMALS) {
+  const microThreshold = 10 ** -decimals
+  const used = value > 0 && value < microThreshold ? decimals + (COST_MICRO_DECIMALS - COST_DECIMALS) : decimals
+  const [whole, fraction] = value.toFixed(used).split('.')
   return `${currency}${whole.replace(THOUSANDS_PATTERN, '$1,')}.${fraction}`
 }
 
@@ -1439,10 +1463,16 @@ function formatCostCompact(value, currency) {
   return `${currency}${Math.round(value * COST_MICRO_SCALE) / COST_MICRO_SCALE}`
 }
 
+// 模型均价:费用折算每百万 token 单价;无费用(cost 恒正数才有效,0 视为未配价)或零 token 无均价
+const AVG_PRICE_DECIMALS = 3
+function avgPriceText(cost, tokens, currency) {
+  if (!(cost > 0) || !(tokens > 0)) return ''
+  return `${formatCost(cost / (tokens / TOKENS_PER_MILLION), currency, AVG_PRICE_DECIMALS)}/M`
+}
+
 // 全局显示货币:规则表首个非空 currency,所有费用显示点统一取此值(全局价格定位);
 // 无则空串即不带符号。数值仍按命中规则单价计算,符号不随命中规则变化
-function aggregateCurrencyOf(rules) {
-  if (!Array.isArray(rules)) return ''
+function aggregateCurrencyOf(rules) {  if (!Array.isArray(rules)) return ''
   const found = rules.find((rule) => typeof rule?.currency === 'string' && rule.currency !== '')
   return found ? found.currency : ''
 }
@@ -1906,7 +1936,8 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__) {
     const ICON_STROKE_WIDTH = 2
     const NOTE_SEPARATOR = ' · '
     const TIP_Z_INDEX = 1100
-    const STYLE_ID = 'dsh-usage-dash'
+    // 与注册 id 同源:既作样式查重键,又作 data-plugin 标记值,短名会使自身 rebuilt 删不到旧样式
+    const STYLE_ID = '@mzzsfy/dsh-usage-dash'
     // 开关视觉常量(规约形态:隐藏 checkbox + track 胶囊 + thumb 圆点)
     const SWITCH_TRACK_WIDTH = 40
     const SWITCH_TRACK_HEIGHT = 22
@@ -2112,8 +2143,9 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
 .ud-model-other--open{grid-template-rows:1fr}
 .ud-model-other-list{overflow:hidden;min-height:0}
 .ud-model-row--sub{min-height:0;padding:4px 4px 4px 28px;background:color-mix(in srgb,var(--dsw-alias-bg-layer-2) 55%,transparent);border-bottom:none}
-.ud-switch{display:inline-flex;align-items:center;cursor:pointer}
-.ud-switch input[type="checkbox"] { position:absolute; opacity:0; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); }
+.ud-switch{display:inline-flex;align-items:center;cursor:pointer;position:relative}
+/* 透明覆盖 label 而非几何隐藏:聚焦位置即点击位置,防聚焦 scroll-into-view 连锁滚动嵌套滚动容器(弹窗导航被滚走整屏空白) */
+.ud-switch input[type="checkbox"] { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
 .ud-switch__track{position:relative;width:${SWITCH_TRACK_WIDTH}px;height:${SWITCH_TRACK_HEIGHT}px;border-radius:999px;box-sizing:border-box;flex:none;background:var(--dsw-alias-border-l2);transition:background ${SWITCH_TRANSITION_MS}ms var(--ds-ease-in-out)}
 .ud-switch__thumb{position:absolute;top:${SWITCH_EDGE_INSET}px;left:${SWITCH_EDGE_INSET}px;width:${SWITCH_THUMB_SIZE}px;height:${SWITCH_THUMB_SIZE}px;border-radius:50%;background:var(--dsw-alias-bg-layer-1);transition:transform ${SWITCH_TRANSITION_MS}ms var(--ds-ease-in-out)}
 .ud-switch:not(:has(input[type="checkbox"]:disabled)):hover .ud-switch__track{background:color-mix(in srgb,var(--dsw-alias-border-l2) 85%,var(--dsw-alias-label-tertiary))}
@@ -2265,12 +2297,12 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       return `var(--ud-chart-${rank})`
     }
 
-    function TrendChart({ title, notes, slots, tipSlots, modelOrder, colorFor, labelFor, slotLabelFor, labelMinPitch, busy, legendModels, panelRef, costCurrency = '', costEnabled = false, money = false, costAvailable = false, onMetricToggle, t = defaultT }) {
+    function TrendChart({ title, notes, slots, tipSlots, modelOrder, colorFor, labelFor, slotLabelFor, labelMinPitch, busy, legendModels, panelRef, costCurrency = '', money = false, costAvailable = false, onMetricToggle, t = defaultT }) {
       const metricId = React.useId()
       const wrapRef = useRef(null)
       const [avail, setAvail] = useState(CHART_NOMINAL_WIDTH)
       const [hover, setHover] = useState(null)
-      // 图例显隐:null = 全部可见;键集 = 模型项与折线项(rate/speed)
+      // 图例显隐:null = 默认集(trendDefaultVisibleKeys);切换以实际生效集为基线展开为键集
       const [visibleKeys, setVisibleKeys] = useState(null)
       // prefs 仅用于 hover tooltip 的费用显隐,经 ref 读取:开关切换不触发本组件重渲染,
       // 避免宿主设置弹窗滚动锚定被重渲染扰动而跳变
@@ -2287,11 +2319,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       }, [])
       const hasSpeed = slots.some((slot) => slot.speed !== undefined)
       const hasTtft = slots.some((slot) => slot.ttft !== undefined)
-      const visibleSet = visibleKeys ?? new Set([
-        ...modelOrder, LEGEND_KEY_RATE,
-        ...(hasSpeed ? [LEGEND_KEY_SPEED] : []),
-        ...(hasTtft ? [LEGEND_KEY_TTFT] : []),
-      ])
+      const visibleSet = visibleKeys ?? trendDefaultVisibleKeys(modelOrder, hasSpeed)
       const visibleModels = modelOrder.filter((model) => visibleSet.has(model))
       const showRate = visibleSet.has(LEGEND_KEY_RATE)
       const showSpeed = hasSpeed && visibleSet.has(LEGEND_KEY_SPEED)
@@ -2319,6 +2347,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       const pick = (index) => (event) => setHover({ index, anchor: pointerAt(event) })
       const clear = () => setHover(null)
       const tipEntries = hasTipContent(hoverSlot) ? tipModelEntries(hoverSlot, visibleSet) : null
+      const avgPrice = tipAvgPriceText(hoverSlot, costCurrency)
       return h('div', { className: 'ud-section' },
         h('div', { className: 'ud-section-head' },
           h('span', { className: 'ud-section-title' }, title),
@@ -2387,7 +2416,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
         h(Legend, {
           models: legendModels, colorFor, speedEnabled: hasSpeed, ttftEnabled: hasTtft,
           isVisible: (key) => visibleSet.has(key),
-          onItem: (key, ctrl) => setVisibleKeys(legendToggle(visibleKeys, key, ctrl)),
+          onItem: (key, ctrl) => setVisibleKeys(legendToggle(visibleSet, key, ctrl)),
         }),
         h(ChartTip, { anchor: hover ? hover.anchor : null, panelRef },
           tipEntries
@@ -2402,8 +2431,11 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
                 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,
-                costEnabled && prefsRef.current.costDisplay && hoverSlot.cost !== undefined
-                  ? h('div', { key: 'cost', className: 'ud-tip-row' }, `≈ ${formatCost(hoverSlot.cost, costCurrency)}`)
+                prefsRef.current.costDisplay && hoverSlot.cost !== undefined
+                  ? [
+                      h('div', { key: 'cost', className: 'ud-tip-row' }, `≈ ${formatCost(hoverSlot.cost, costCurrency)}`),
+                      avgPrice ? h('div', { key: 'avg-price', className: 'ud-tip-row' }, `${t('avgPrice')}: ${avgPrice}`) : null,
+                    ]
                   : null,
               ]
             : null))
@@ -2572,6 +2604,8 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
               const speedText = modelSpeedText(item.speed)
               const ttftText = modelTtftText(item.ttft)
               const ioText = modelIoPercentText(item, t)
+              const avgText = avgPriceText(item.cost, item.tokens, costCurrency)
+              const tokensText = `${formatTokens(item.tokens)} (${formatPercent((item.tokens / total) * PERCENT_SCALE)})`
               const metaParts = [
                 item.cost !== undefined ? `≈ ${formatCost(item.cost, costCurrency)}` : null,
                 ttftText,
@@ -2602,8 +2636,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
                       }, '›')
                     : null,
                   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-tokens' }, avgText ? `${tokensText} · ${avgText}` : tokensText),
                     ioText ? h('span', { className: 'ud-model-io' }, ioText) : null,
                     h('span', { className: 'ud-model-meta' }, metaParts.join(' · ')))),
                 isOther
@@ -3371,12 +3404,16 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       const grouped = useMemo(() => (stats ? groupStats(stats) : null), [stats])
       const pointView = activeQuery && pointStatsMatches(pointStats, view, activeQuery.key) ? pointStats.value : null
       const pointGrouped = useMemo(() => (pointView ? groupPointSlots(pointView.daily) : null), [pointView])
-      const colorFor = useMemo(() => colorForModel(stats ? stats.models : []), [stats])
 
       const pointActive = view !== 'day'
       const trendSource = pointActive
         ? (pointGrouped ? { slots: pointGrouped.daily, models: pointGrouped.models, value: pointView } : null)
         : (grouped ? { slots: grouped.daily, models: grouped.models, value: stats } : null)
+      // 聚合展示区(统计卡/模型用量/统计截至)与趋势图同源,随视图联动;点数据未回为 null 不渲染
+      const cardsStats = cardsStatsOf(view, stats, pointView)
+      const usageModels = usageModelsOf(view, grouped, pointView)
+      // 模型配色取当期窗口模型排名,防跨窗口取色错位
+      const colorFor = useMemo(() => colorForModel(cardsStats ? cardsStats.models : []), [cardsStats])
       const maxSlots = pointActive ? maxSlotsFor(view, rawPreset) : DAY_MAX_SLOTS
       const trimmedSlots = trendSource ? trimSlots(trendSource.slots, maxSlots) : null
       const { costReady, money, chartSlots } = moneyViewOf(trimmedSlots, costView)
@@ -3469,7 +3506,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
           : null,
         error ? h('div', { className: 'ud-error' }, error) : null,
         loadingVisible ? h('div', { className: 'ud-loading' }, `${t('loading')}…`) : null,
-        stats ? h(StatCards, { key: 'cards', stats, costCurrency, t }) : null,
+        cardsStats ? h(StatCards, { key: 'cards', stats: cardsStats, costCurrency, t }) : null,
         // 活跃热力图仅按天视图展示:热力图口径为日桶,时/分视图无对应语义
         view === 'day' ? h(HeatSection, { key: 'heat', days: heatDays, panelRef, costCurrency, t }) : null,
         trimmedSlots
@@ -3488,15 +3525,14 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
               legendModels: trendSource.models,
               panelRef,
               costCurrency,
-              costEnabled: view === 'day',
               money,
               costAvailable: costReady,
               onMetricToggle: setCostView,
               t,
             })
           : null,
-        grouped ? h(ModelUsage, { key: 'models', models: grouped.models, colorFor, panelRef, costCurrency, t }) : null,
-        stats?.to ? h('div', { className: 'ud-foot' }, `${t('asOf')} ${stats.to}`) : null,
+        usageModels ? h(ModelUsage, { key: 'models', models: usageModels, colorFor, panelRef, costCurrency, t }) : null,
+        cardsStats?.to ? h('div', { className: 'ud-foot' }, `${t('asOf')} ${slotLabelFor(view)(cardsStats.to)}`) : null,
         emptyVisible ? h('div', { className: 'ud-empty' }, t('empty')) : null,
         h(StatsLineOptions, { key: 'prefs', t }),
         h(PricingEditor, { key: 'pricing', t }))

package/src/query.js

@@ -14,7 +14,7 @@ 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 妗?
+// 妗朵覆鍓嶇紑瀹?D 娈靛畾浣嶆棩妗?M 琛屾埅鍙栫埗 H 妗?
 const DAY_KEY_WIDTH = 'YYYY-MM-DD'.length
 const HOUR_KEY_WIDTH = 'YYYY-MM-DDTHH'.length
 
@@ -39,10 +39,10 @@ const nextMinute = (date) => {
   return next
 }
 
-// 鍒嗛挓妗剁矑搴?鏋氫妇涓庢《閿叡鐢ㄥ悓涓€姝ラ暱,from 蹇呴』瀵归綈妗惰竟鐣?
+// 鍒嗛挓妗剁矑搴?鏋氫妇涓庢《閿叡鐢ㄥ悓涓€姝ラ暱,from 蹇呴』瀵归綈妗惰竟鐣?
 const MINUTE_STEP_MINUTES = 10
 
-// pattern 閿氬畾妗朵覆澶栧舰,suffix 琛ュ叏涓烘湰鍦版椂鍖哄彲瑙ｆ瀽鏃ユ湡涓?format 鍥炶鏍￠獙鍒嗛噺鍚堟硶鎬?
+// 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 },
@@ -105,7 +105,8 @@ export function aggregateRange(rows, g, from, to) {
   const slotByKey = new Map(slots.map((slot) => [slot.day, slot]))
   const modelTotals = new Map()
   const providerTotals = new Map()
-  const activeBuckets = new Set()
+  // 活跃天 = 有 token 产出的自然日(桶键按日去重,跨粒度统一口径)
+  const activeDays = new Set()
   // 妲界骇閰嶅:妗朵覆 鈫?閫熷害瀵?{decodeTokens, durationMs} 涓庨瀛楀 {ttftMs, ttftSteps},
   const slotSpeeds = new Map()
   const slotTtfts = new Map()
@@ -115,9 +116,9 @@ export function aggregateRange(rows, g, from, to) {
     if (!slot) continue
     const tokens = rowTokens(row)
     addRowToSlot(slot, row, tokens)
-    // 绾?timing 琛?闆?token 妗?+ decode 閰嶅)涓嶅弬涓庡綊灞?浣嗕粛杩涢厤瀵硅仛鍚?
+    // 绾?timing 琛?闆?token 妗?+ decode 閰嶅)涓嶅弬涓庡綊灞?浣嗕粛杩涢厤瀵硅仛鍚?
     if (tokens > 0) {
-      activeBuckets.add(row.bucket)
+      activeDays.add(row.bucket.slice(0, DAY_KEY_WIDTH))
       slot.byModel[row.model] = (slot.byModel[row.model] ?? 0) + tokens
       slot.byProvider[row.provider] = (slot.byProvider[row.provider] ?? 0) + tokens
     }
@@ -175,7 +176,7 @@ export function aggregateRange(rows, g, from, to) {
     totals.cacheMiss += slot.cacheMiss
   }
   // speed = decode 閰嶅鍙ｅ緞(decodeTokens 梅 鏃堕暱绉?;ttft = 棣?token 寤惰繜
-  // 鍔犳潈骞冲潎(姣);浠呴厤瀵规暟鎹瓨鍦ㄧ殑鏉＄洰鎸傚瓧娈?鏃犳暟鎹潯鐩笉鎸?
+  // 鍔犳潈骞冲潎(姣);浠呴厤瀵规暟鎹瓨鍦ㄧ殑鏉＄洰鎸傚瓧娈?鏃犳暟鎹潯鐩笉鎸?
   // 绾?timing 琛屽彲鑳戒骇鐢?0-token 鏉＄洰,鍒楄〃淇濇寔鍙惈 token 琛?瀛橀噺濂戠害)
   const models = [...modelTotals.entries()]
     .filter(([, agg]) => agg.tokens > 0)
@@ -207,7 +208,7 @@ export function aggregateRange(rows, g, from, to) {
     turns: totals.turns,
     cacheHit: totals.cacheHit,
     cacheMiss: totals.cacheMiss,
-    activeDays: activeBuckets.size,
+    activeDays: activeDays.size,
     topModel: top?.model ?? '',
     topProvider: top?.provider ?? '',
     daily,
@@ -218,7 +219,7 @@ export function aggregateRange(rows, g, from, to) {
   return result
 }
 
-// 鑱氬悎璁′环鐨勬Ы瀹氫綅:D 鎶樺彔鍒版棩妲?H/M 鍗虫湰妲?璁′环涓€寰嬪彇琛屾墍灞?H 妲借捣鐐?
+// 鑱氬悎璁′环鐨勬Ы瀹氫綅:D 鎶樺彔鍒版棩妲?H/M 鍗虫湰妲?璁′环涓€寰嬪彇琛屾墍灞?H 妲借捣鐐?
 const COST_SLOT_KEYS = {
   [GRANULARITY_DAILY]: (bucket) => bucket.slice(0, DAY_KEY_WIDTH),
   [GRANULARITY_HOURLY]: (bucket) => bucket,
@@ -226,7 +227,7 @@ const COST_SLOT_KEYS = {
 }
 
 // 鑱氬悎璁′环:浠ュ彲瑙佹Ы涓哄敮涓€鍙ｅ緞,cost 琛屾寜 H 妲借捣鐐瑰尮閰嶄环鏍煎悗绱姞;
-// 妲界骇閫愭ā鍨嬫媶鍒?costByModel 渚涢噾棰濇煴鐘跺浘鎸夋ā鍨嬪爢鍙?
+// 妲界骇閫愭ā鍨嬫媶鍒?costByModel 渚涢噾棰濇煴鐘跺浘鎸夋ā鍨嬪爢鍙?
 export function attachCosts(result, costRows, granularity, rules) {
   const slotKeyOf = COST_SLOT_KEYS[granularity]
   const slotOfDay = new Map(result.daily.map((slot) => [slot.day, slot]))

package/test/client-id.test.mjs

@@ -0,0 +1,26 @@
+// client.js 注册 id 与样式标记守卫:loader 按 graph row id(完整包名)匹配注册,短名即加载失败;
+// 样式查重键 STYLE_ID 兼作 data-plugin 标记值,短名会使自身 rebuilt 删不到旧样式,重注被跳过。
+import { readFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import test from 'node:test'
+import assert from 'node:assert/strict'
+
+const PKG_ROOT = join(dirname(fileURLToPath(import.meta.url)), '..')
+const { name } = JSON.parse(readFileSync(join(PKG_ROOT, 'package.json'), 'utf8'))
+
+test('client.js 注册 id 为完整包名', () => {
+  const source = readFileSync(join(PKG_ROOT, 'src', 'client.js'), 'utf8')
+  const match = source.match(/__ModuleLoader__\.load\(\{\s*id:\s*'([^']+)'/)
+  assert.ok(match, 'client.js 缺少 __ModuleLoader__.load 注册')
+  assert.equal(match[1], name)
+})
+
+test('client.js 样式注入自带 data-plugin 且值为注册包名', () => {
+  const source = readFileSync(join(PKG_ROOT, 'src', 'client.js'), 'utf8')
+  const injections = source.split("createElement('style')").length - 1
+  assert.ok(injections > 0, 'client.js 无样式注入点')
+  assert.ok(source.includes(`STYLE_ID = '${name}'`), 'STYLE_ID 必须等于注册包名(值=注册 id),短名会使自身 rebuilt 删不到旧样式')
+  const marked = source.split("setAttribute('data-plugin'").length - 1
+  assert.equal(marked, injections, '每个样式注入点都必须设置 data-plugin,防宿主 claimStyles 误归属后随他插件 HMR 整批误删')
+})

package/test/client.test.mjs

@@ -36,7 +36,9 @@ const {
   OTHER_MODEL,
   aggregateCurrencyOf,
   applyCurrencyToRules,
+  avgPriceText,
   cacheRateText,
+  cardsStatsOf,
   coerceConditions,
   coercePricingRules,
   costOf,
@@ -74,6 +76,8 @@ const {
   hasTipContent,
   hasAnomalyNews,
   tipModelEntries,
+  tipAvgPriceText,
+  trendDefaultVisibleKeys,
   modelSegmentLabel,
   modelSpeedText,
   modelNameOf,
@@ -111,9 +115,13 @@ const {
   speedTipText,
   speedScaleMax,
   legendToggle,
+  LEGEND_KEY_RATE,
+  LEGEND_KEY_SPEED,
+  LEGEND_KEY_TTFT,
   leftAxisTicks,
   hourSlotLabel,
   minuteSlotLabel,
+  usageModelsOf,
   validatePricingRules,
 } = core
 
@@ -163,10 +171,12 @@ test('预设定义表覆盖三视图', () => {
   assert.deepEqual(MINUTE_PRESETS, ['3h', '24h', '3d', '7d'])
 })
 
-test('默认挡位均在其挡位列表内,分钟窗口可解析', () => {
+test('默认挡位均在其挡位列表内,分钟默认挡为最短窗口 3 小时,分钟窗口可解析', () => {
   assert.ok(DAY_PRESETS.includes(DEFAULT_RANGE))
   assert.ok(HOUR_PRESETS.includes(DEFAULT_HOUR_PRESET))
   assert.ok(MINUTE_PRESETS.includes(DEFAULT_MINUTE_PRESET))
+  // Given 分钟视图初始挂载 When 取默认挡 Then 为 3 小时(分钟粒度下 24 小时过粗,近端细节优先)
+  assert.equal(DEFAULT_MINUTE_PRESET, '3h')
   assert.notEqual(resolveMinuteRange(DEFAULT_MINUTE_PRESET, NOW), null)
 })
 
@@ -454,6 +464,35 @@ test('groupPointSlots 窗口模型超上限折叠其他', () => {
   assert.deepEqual(grouped.daily[0].byModel, { m1: 1, m2: 1, m3: 1, m4: 1, m6: 1, [OTHER_MODEL]: 1 })
 })
 
+test('cardsStatsOf 天视图用 range 聚合,时/分视图用点聚合,点未回为 null', () => {
+  const stats = { tokens: 1 }
+  const pointView = { tokens: 2 }
+  assert.equal(cardsStatsOf('day', stats, pointView), stats)
+  assert.equal(cardsStatsOf('hour', stats, pointView), pointView)
+  assert.equal(cardsStatsOf('minute', stats, null), null)
+})
+
+test('usageModelsOf 天视图用预折叠分组,时/分视图折叠点窗口模型,点未回为 null', () => {
+  const grouped = { models: [{ model: 'p/m1', tokens: 1 }] }
+  assert.equal(usageModelsOf('day', grouped, null), grouped.models)
+  assert.equal(usageModelsOf('day', null, null), null)
+  const ranked = [
+    { model: 'p/m1', tokens: 3 },
+    { model: 'p/m2', tokens: 2 },
+    { model: 'p/m3', tokens: 1 },
+    { model: 'p/m4', tokens: 1 },
+    { model: 'p/m5', tokens: 1 },
+    { model: 'p/m6', tokens: 1 },
+  ]
+  const folded = usageModelsOf('hour', null, { models: ranked })
+  assert.equal(folded.length, 6)
+  assert.equal(folded.at(-1).model, OTHER_MODEL)
+  assert.equal(folded.at(-1).tokens, 1)
+  // 空窗口契约:返回空数组渲染空环(与天视图空数据行为一致),非 null 隐藏
+  assert.deepEqual(usageModelsOf('minute', null, { models: [] }), [])
+  assert.equal(usageModelsOf('minute', null, null), null)
+})
+
 test('niceTicks 产生 1/2/5 序列且零上限为空', () => {
   assert.deepEqual(niceTicks(0, 4), [])
   assert.deepEqual(niceTicks(50, 4), [20, 40])
@@ -698,7 +737,7 @@ test('speedTipText 无速度为占位符有速度为官方吞吐口径', () => {
 })
 
 test('legendToggle 普通点击单选,再点恢复全部,ctrl 多选且禁全藏', () => {
-  // null 表示全部可见
+  // null 输入(仅 historic 契约面):普通点击得单键集
   assert.deepEqual(legendToggle(null, 'a', false), new Set(['a']))
   // 单选态再点同项恢复全部(null)
   assert.equal(legendToggle(new Set(['a']), 'a', false), null)
@@ -976,6 +1015,44 @@ test('formatCost 微观值四位小数', () => {
   assert.equal(formatCost(0.009999, '$'), '$0.0100')
 })
 
+test('avgPriceText 费用折每百万 token 均价', () => {
+  assert.equal(avgPriceText(3357.85, 6232901270, '¥'), '¥0.539/M')
+  assert.equal(avgPriceText(2, 1000 * 1000, '$'), '$2.000/M')
+  assert.equal(avgPriceText(0.5, 1000 * 1000, ''), '0.500/M')
+  assert.equal(avgPriceText(0.0004, 1000 * 1000, '¥'), '¥0.00040/M')
+})
+
+test('avgPriceText 无费用或零 token 不显示', () => {
+  assert.equal(avgPriceText(undefined, 6232901270, '¥'), '')
+  assert.equal(avgPriceText(0, 6232901270, '¥'), '')
+  assert.equal(avgPriceText(3357.85, 0, '¥'), '')
+})
+
+test('tipAvgPriceText 槽费用折每百万 token 均价,无费用或零槽为 null', () => {
+  assert.equal(tipAvgPriceText({ total: 6232901270, cost: 3357.85 }, '¥'), '¥0.539/M')
+  assert.equal(tipAvgPriceText({ total: 6232901270, cost: 0 }, '¥'), null)
+  assert.equal(tipAvgPriceText({ total: 6232901270 }, '¥'), null)
+  assert.equal(tipAvgPriceText({ total: 0, cost: 3357.85 }, '¥'), null)
+})
+
+test('trendDefaultVisibleKeys 默认集含模型与速度线,不含缓存命中率与首 token 延迟', () => {
+  const keys = trendDefaultVisibleKeys(['m1', 'm2'], true)
+  assert.deepEqual([...keys], ['m1', 'm2', 'speed'])
+  assert.deepEqual([...trendDefaultVisibleKeys(['m1'], false)], ['m1'])
+  assert.deepEqual([...trendDefaultVisibleKeys([], false)], [])
+})
+
+test('图例默认态点击以实际生效集为基线,ctrl 恢复隐藏线不坍缩', () => {
+  const base = trendDefaultVisibleKeys(['m1', 'm2'], true)
+  // ctrl 点击默认隐藏的缓存命中率:默认集其余项保持,仅追加该线;再点回默认集
+  const withRate = legendToggle(base, LEGEND_KEY_RATE, true)
+  assert.deepEqual([...withRate].sort(), ['m1', 'm2', LEGEND_KEY_SPEED, LEGEND_KEY_RATE].sort())
+  assert.deepEqual([...legendToggle(withRate, LEGEND_KEY_RATE, true)].sort(), ['m1', 'm2', LEGEND_KEY_SPEED].sort())
+  // 普通点击单选隐藏线,再点回 null 由调用方 ?? 默认集承接
+  assert.deepEqual([...legendToggle(base, LEGEND_KEY_TTFT, false)], [LEGEND_KEY_TTFT])
+  assert.equal(legendToggle(new Set([LEGEND_KEY_TTFT]), LEGEND_KEY_TTFT, false), null)
+})
+
 test('镜像函数基本行为:非法输入 null 与命中计价', () => {
   assert.equal(matchPrice(null, 'x/m', NOW), null)
   assert.equal(matchPrice([], 'x/m', NOW), null)

package/test/query.test.mjs

@@ -183,6 +183,23 @@ test('H 粒度零值槽全枚举含无数据槽', () => {
   assert.equal(out.activeDays, 1)
 })
 
+test('H/M 粒度活跃天数为有用量自然日数,同日多桶计 1', () => {
+  const hourRows = [
+    makeRow({ bucket: '2020-01-01T01', model: 'm1', provider: 'p1', inputTokens: 5 }),
+    makeRow({ bucket: '2020-01-01T05', model: 'm1', provider: 'p1', inputTokens: 5 }),
+    makeRow({ bucket: '2020-01-02T01', model: 'm1', provider: 'p1', inputTokens: 5 }),
+  ]
+  const hourOut = aggregateRange(hourRows, 'H', '2020-01-01T00', '2020-01-02T23')
+  assert.equal(hourOut.activeDays, 2)
+  const minuteRows = [
+    makeRow({ bucket: '2020-01-01T00:00', model: 'm1', provider: 'p1', inputTokens: 5 }),
+    makeRow({ bucket: '2020-01-01T00:10', model: 'm1', provider: 'p1', inputTokens: 5 }),
+    makeRow({ bucket: '2020-01-01T00:20', model: 'm1', provider: 'p1', inputTokens: 5 }),
+  ]
+  const minuteOut = aggregateRange(minuteRows, 'M', '2020-01-01T00:00', '2020-01-01T23:50')
+  assert.equal(minuteOut.activeDays, 1)
+})
+
 test('M 粒度纯计数行不计入模型与活跃桶,未对齐残行跳过', () => {
   const rows = [
     makeRow({ bucket: '2020-01-01T00:00', model: '(turns)', provider: 'default', turns: 1 }),