@mzzsfy/dsh-usage-dash 0.2.0 → 0.3.0

package/README.md

@@ -9,9 +9,9 @@
 - 三粒度视图:天(7/30/90 天/自定义日期段)、小时(24 小时/3 天/7 天/15 天)、分钟(3 小时/24 小时/3 天/7 天,10 分钟桶粒度),后两者为滚动窗口;各视图时间范围统一 4 挡,时/分选择上限与数据保留期一致
 - 汇总卡六张:Tokens 用量(服务商总口径)、会话数量、请求数量、最常用模型、平均缓存命中率、活跃天数(恒按天口径,不随视图切换);配置定价规则后 Tokens 卡头部行右侧显示估算费用
 - 活动热力图:GitHub 风格周列×星期行,26 周窗口,五档色阶,悬停明细;仅按天视图展示
-- 缓存命中率曲线:日粒度命中率 + 右侧副轴,悬停显示当日命中率与 token 明细(配置定价规则后附当日估算费用行,受「费用显示」开关)
+- 缓存命中率曲线:日粒度命中率 + 右侧副轴,并叠加平均生成速度曲线(单独颜色,读数走悬停;仅含有时长数据的槽,整图无时长数据不绘制),悬停显示当前时段命中率、平均生成速度与 token 明细(配置定价规则后附当前时段估算费用行,受「费用显示」开关;三粒度趋势图通用)
 - 模型 donut 与列表:按 token 前 5 模型占比环形图(中心为总量),列表含命中率与占比,并为每模型显示平均生成速度(tok/s,无时长数据不显示),悬停联动
-- 三粒度堆叠柱状趋势图(数据量大时裁最旧并提示)
+- 三粒度堆叠柱状趋势图(数据量大时裁最旧并提示);图例可点击切换显隐:点击单选(仅显示该项,左轴刻度按可见项归一)/再点恢复全部,Ctrl+点击多选,隐藏最后一项无效
 - 回扫状态行默认隐藏:首次启用自动回扫历史会话,运行中显示进度(常显);右上角为折叠箭头与刷新图标,折叠层内展开扫描异常日志块(逐条:时间/类型/明细,计数即明细条数,上限 200 条超限丢最旧,重建时清空)与「重建」入口(二次确认 3 秒后清库重扫),采集错误常显;工具栏分主区与右侧操作区,窄宽度时挡位组在主区内换行
 - 会话底栏接管:替换官方信息行为增强版,偏好卡三个开关默认全开——精确缓存命中率(两位小数)、会话 Token 明细(总/命中缓存/未命中缓存/输出)、费用显示(底栏费用项与趋势 tooltip 费用行);三开关全关时与官方逐字节一致
 - 会话尾部单轮行:每轮对话结束后动作行上方显示该轮 token 摘要与估算费用(最新一轮常显,历史轮悬停显现,触屏恒显;有产出文件的轮次自动让位产物行)

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.2.0",
+  "version": "0.3.0",
   "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 = '60m'
+const DEFAULT_MINUTE_PRESET = '24h'
 
 // 天视图渲染上限;时/分上限 = 闭区间桶数(hour N+1 槽,minute N/10+1 槽)
 const DAY_MAX_SLOTS = 180
@@ -126,6 +126,8 @@ const MESSAGES_ZH = {
   cacheRateHint: '时间段内缓存命中 token 占输入 token 的比例',
   cacheHitRate: '缓存命中率',
   hitRateLegend: '缓存命中率',
+  avgSpeed: '平均生成速度',
+  speedLegend: '平均生成速度',
   topModel: '最常用模型',
   topModelHint: '按 token 用量排序,非调用次数',
   heatmap: '活跃热力图',
@@ -251,6 +253,8 @@ const MESSAGES_EN = {
   cacheRateHint: 'Cache-hit tokens as a share of input tokens within the range',
   cacheHitRate: 'Cache-hit rate',
   hitRateLegend: 'Cache-hit rate',
+  avgSpeed: 'Avg speed',
+  speedLegend: 'Avg speed',
   topModel: 'Top model',
   topModelHint: 'Ranked by token usage, not call count',
   heatmap: 'Activity heatmap',
@@ -383,13 +387,15 @@ function formatCompact(value) {
 function formatPercent(value) {
   return (Math.round(value * 10) / 10).toFixed(1) + '%'
 }
+// tooltip 数值缺席占位
+const TOOLTIP_MISSING = '—'
 function cacheRate(hit, miss) {
   const total = hit + miss
   return total <= 0 ? null : (hit / total) * 100
 }
 function cacheRateText(hit, miss) {
   const rate = cacheRate(hit, miss)
-  return rate === null ? '—' : formatPercent(rate)
+  return rate === null ? TOOLTIP_MISSING : formatPercent(rate)
 }
 
 // 模型键展示分段与定价/存储口径同源:首个 / 前 vendor 段,余为模型段
@@ -417,6 +423,15 @@ function minuteTickLabel(key) {
   return time === MIDNIGHT_TIME ? `${shortDay(key.slice(0, DAY_KEY_LENGTH))} ${time}` : time
 }
 
+// 悬浮窗槽标签:完整日期去 T 分隔,小时以 h 后缀标定(避免 i18n 单位问题),分钟保留 HH:MM
+function hourSlotLabel(key) {
+  return `${key.slice(0, DAY_KEY_LENGTH)} ${key.slice(DAY_KEY_LENGTH + 1)}h`
+}
+
+function minuteSlotLabel(key) {
+  return `${key.slice(0, DAY_KEY_LENGTH)} ${key.slice(DAY_KEY_LENGTH + 1)}`
+}
+
 function isEmptyRange(value) {
   return value.tokens === 0 && value.cacheHit === 0 && value.requests === 0 && value.turns === 0
 }
@@ -488,6 +503,13 @@ const BAR_WIDTH_RATIO = 0.62
 const BAR_MIN_WIDTH = 3
 const BAR_MAX_WIDTH = 30
 const AXIS_TICK_COUNT = 4
+// 速度刻度上限钳底:全零或无速度防除零(速度不设轴,读数走 tooltip)
+const SPEED_SCALE_FLOOR = 1
+// 轴上限留白系数:数据峰不顶满绘图区,顶部留出标注空间
+const AXIS_SCALE_HEADROOM = 1.1
+// 图例键:折线项与模型项共处同一显隐集合
+const LEGEND_KEY_RATE = 'rate'
+const LEGEND_KEY_SPEED = 'speed'
 
 function niceTicks(max, count) {
   if (max <= 0 || count <= 0) return []
@@ -500,14 +522,43 @@ function niceTicks(max, count) {
   return ticks
 }
 
-// 堆叠柱几何:模型序即堆叠序(哨兵最后画柱顶),输出槽分段与左轴刻度
+// 图例显隐切换:current 为 null 表示全部可见;普通点击单选/再点恢复,
+// ctrl 单项切换,隐藏最后一项为无操作(返回原引用)
+function legendToggle(current, key, ctrl) {
+  if (ctrl) {
+    const next = new Set(current ?? [])
+    if (next.has(key)) next.delete(key)
+    else next.add(key)
+    return next.size === 0 ? current : next
+  }
+  const solo = current !== null && current.size === 1 && current.has(key)
+  return solo ? null : new Set([key])
+}
+
+// 左轴刻度:速度刻度存在时左轴标定速度(tok/s),否则标定 token;
+// 刻度值统一换算为绘图区高度占比
+function leftAxisTicks(tokenTicks, tokenMax, speedTicks, speedMax) {
+  const useSpeed = speedTicks.length > 0
+  return (useSpeed ? speedTicks : tokenTicks).map((tick) => ({
+    label: formatCompact(tick),
+    ratio: tick / (useSpeed ? speedMax : tokenMax),
+  }))
+}
+
+// 堆叠柱几何:模型序即堆叠序(哨兵最后画柱顶),输出槽分段与左轴刻度;
+// maxTotal 按可见模型求和,单选模型时刻度跟随归一
 function trendLayout(slots, modelOrder, avail, labelMinPitch) {
   const plotHeight = CHART_HEIGHT - CHART_PAD.top - CHART_PAD.bottom
   const innerWidth = Math.max(1, avail - CHART_PAD.left - CHART_PAD.right)
   const count = slots.length
   const step = count > 1 ? innerWidth / (count - 1) : innerWidth
   const barWidth = Math.max(BAR_MIN_WIDTH, Math.min(BAR_MAX_WIDTH, step * BAR_WIDTH_RATIO))
-  const maxTotal = Math.max(1, ...slots.map((slot) => slot.total))
+  const slotVisibleTotal = (slot) => modelOrder.reduce((sum, model) => sum + (slot.byModel[model] ?? 0), 0)
+  const maxTotal = Math.max(1, ...slots.map(slotVisibleTotal))
+  // 轴上限 = 数据峰 × 留白系数,柱高分母与左轴刻度分母同源
+  const scaleMax = maxTotal * AXIS_SCALE_HEADROOM
+  // 可见模型无任何数据时左轴无标定对象,空刻度防钳底值漏成假刻度
+  const visibleTotal = slots.reduce((sum, slot) => sum + slotVisibleTotal(slot), 0)
   const bars = slots.map((slot, index) => {
     const centerX = CHART_PAD.left + barWidth / 2 + index * step
     let yBottom = CHART_PAD.top + plotHeight
@@ -515,7 +566,7 @@ function trendLayout(slots, modelOrder, avail, labelMinPitch) {
     for (const model of modelOrder) {
       const tokens = slot.byModel[model] ?? 0
       if (tokens === 0) continue
-      const height = (tokens / maxTotal) * plotHeight
+      const height = (tokens / scaleMax) * plotHeight
       yBottom -= height
       segments.push({ model, y: yBottom, height })
     }
@@ -528,7 +579,8 @@ function trendLayout(slots, modelOrder, avail, labelMinPitch) {
     step,
     barWidth,
     maxTotal,
-    ticks: niceTicks(maxTotal, AXIS_TICK_COUNT),
+    scaleMax,
+    ticks: visibleTotal === 0 ? [] : niceTicks(maxTotal, AXIS_TICK_COUNT),
     labelEvery: Math.max(1, Math.ceil(labelMinPitch / step)),
     bars,
   }
@@ -560,6 +612,20 @@ function trendRatePoints(slots, bars, plotHeight) {
   return points
 }
 
+// 速度曲线点:仅带速度槽产出,高度按刻度上限归一
+function trendSpeedPoints(slots, bars, plotHeight, scaleMax) {
+  const points = []
+  slots.forEach((slot, index) => {
+    if (slot.speed === undefined) return
+    points.push({
+      day: slot.day,
+      x: bars[index].x,
+      y: CHART_PAD.top + plotHeight - (slot.speed / scaleMax) * plotHeight,
+    })
+  })
+  return points
+}
+
 // Catmull-Rom 转三次贝塞尔:控制点取邻点差六分之一,端点折返
 function smoothPath(points) {
   if (points.length === 0) return ''
@@ -619,6 +685,16 @@ function modelSpeedText(speed) {
   return `${formatTokensPerSecond(speed)} tok/s`
 }
 
+// tooltip 速度行文本:无速度与命中率同款占位符
+function speedTipText(speed) {
+  return speed === undefined ? TOOLTIP_MISSING : modelSpeedText(speed)
+}
+
+// 速度刻度上限:全零或无速度钳底,防除零
+function speedScaleMax(slots) {
+  return Math.max(SPEED_SCALE_FLOOR, ...slots.map((slot) => slot.speed ?? 0))
+}
+
 // 热力图:窗口固定 26 周,与所选范围无关
 const HEAT_WEEKS = 26
 const HEAT_ROW_COUNT = 7
@@ -1473,9 +1549,9 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__) {
     const STYLE_CSS = `
 .ud-panel{display:flex;flex-direction:column;gap:12px;font-size:13px;color:var(--dsw-alias-label-primary);
 --ud-chart-1:color-mix(in srgb,#0576ff 70%,white);--ud-chart-2:color-mix(in srgb,#2f6f37 70%,white);--ud-chart-3:color-mix(in srgb,#c46212 70%,white);--ud-chart-4:color-mix(in srgb,#975bf1 70%,white);--ud-chart-5:color-mix(in srgb,#d34591 70%,white);--ud-chart-other:color-mix(in srgb,#576270 70%,white);
---dsw-heat-0:#ebedf0;--dsw-heat-1:#dbe3ff;--dsw-heat-2:#b7c5ff;--dsw-heat-3:#8ea4ff;--dsw-heat-4:#6884ff;--dsw-heat-5:#4d6bfe;--ud-trend-line:#0576ff}
+--dsw-heat-0:#ebedf0;--dsw-heat-1:#dbe3ff;--dsw-heat-2:#b7c5ff;--dsw-heat-3:#8ea4ff;--dsw-heat-4:#6884ff;--dsw-heat-5:#4d6bfe;--ud-trend-line:#0576ff;--ud-trend-speed:#0ca678}
 body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,white);--ud-chart-2:color-mix(in srgb,#2f6f37 65%,white);--ud-chart-3:color-mix(in srgb,#c46212 65%,white);--ud-chart-4:color-mix(in srgb,#975bf1 65%,white);--ud-chart-5:color-mix(in srgb,#d34591 65%,white);--ud-chart-other:color-mix(in srgb,#576270 65%,white);
---dsw-heat-0:#21262d;--dsw-heat-1:#2f4bd0;--dsw-heat-2:#4d6bfe;--dsw-heat-3:#6e8bff;--dsw-heat-4:#93aaff;--dsw-heat-5:#c4d0ff;--ud-trend-line:#4d6bfe}
+--dsw-heat-0:#21262d;--dsw-heat-1:#2f4bd0;--dsw-heat-2:#4d6bfe;--dsw-heat-3:#6e8bff;--dsw-heat-4:#93aaff;--dsw-heat-5:#c4d0ff;--ud-trend-line:#4d6bfe;--ud-trend-speed:#2fbf8f}
 .ud-toolbar{display:flex;align-items:flex-start;gap:8px}
 .ud-toolbar-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
 .ud-group{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--dsw-alias-border-l2);border-radius:9px;background:var(--dsw-alias-bg-layer-1)}
@@ -1535,7 +1611,8 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
 .ud-grid{stroke:var(--dsw-alias-border-l1);stroke-width:1}
 .ud-axis{fill:var(--dsw-alias-label-tertiary);font-size:11px;font-variant-numeric:tabular-nums}
 .ud-legend{display:flex;flex-wrap:wrap;gap:4px 12px}
-.ud-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--dsw-alias-label-secondary);min-width:0}
+.ud-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--dsw-alias-label-secondary);min-width:0;user-select:none;cursor:pointer}
+.ud-legend-item--off{opacity:.35}
 .ud-legend-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ud-legend-swatch{width:8px;height:8px;border-radius:2px;flex:none}
 .ud-heat-wrap{width:100%;min-width:0;overflow:hidden}
@@ -1558,8 +1635,11 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
 .ud-bar{transform-box:fill-box;transform-origin:center}
 .ud-bar-hit{fill:transparent;pointer-events:all}
 .ud-trend{stroke:var(--ud-trend-line);opacity:.9;fill:none;pointer-events:none}
+.ud-trend--speed{stroke:var(--ud-trend-speed)}
 .ud-trend-dot{fill:var(--ud-trend-line);stroke:var(--dsw-alias-bg-layer-1);stroke-width:${TREND_DOT_RING}px;pointer-events:none}
+.ud-trend-dot--speed{fill:var(--ud-trend-speed)}
 .ud-legend-swatch--line{height:2px;border-radius:1px;background:var(--ud-trend-line)}
+.ud-legend-swatch--line--speed{background:var(--ud-trend-speed)}
 .ud-model-usage{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}
 .ud-donut-wrap{flex:0 0 auto}
 .ud-donut-seg{cursor:pointer;outline:none;transition:stroke-width .12s ease}
@@ -1701,14 +1781,22 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
           h(FitText, null, String(stats.activeDays))))
     }
 
-    function Legend({ models, colorFor, t = defaultT }) {
+    function Legend({ models, colorFor, speedEnabled = false, isVisible, onItem, t = defaultT }) {
+      const itemProps = (key) => ({
+        className: cx('ud-legend-item', isVisible && !isVisible(key) && 'ud-legend-item--off'),
+        onClick: onItem ? (event) => onItem(key, event.ctrlKey || event.metaKey) : undefined,
+        role: onItem ? 'button' : undefined,
+      })
       return h('div', { className: 'ud-legend' },
-        models.map((item) => h('span', { key: item.model, className: 'ud-legend-item', title: item.model === OTHER_MODEL ? t('other') : item.model },
+        models.map((item) => h('span', { key: item.model, title: item.model === OTHER_MODEL ? t('other') : item.model, ...itemProps(item.model) },
           h('i', { className: 'ud-legend-swatch', style: { background: colorFor(item.model) } }),
           h('span', null, item.model === OTHER_MODEL ? t('other') : item.model))),
-        h('span', { key: 'hit-rate', className: 'ud-legend-item', title: t('hitRateLegend') },
+        h('span', { key: 'hit-rate', title: t('hitRateLegend'), ...itemProps(LEGEND_KEY_RATE) },
           h('i', { className: 'ud-legend-swatch ud-legend-swatch--line' }),
-          h('span', null, t('hitRateLegend'))))
+          h('span', null, t('hitRateLegend'))),
+        speedEnabled ? h('span', { key: 'speed', title: t('speedLegend'), ...itemProps(LEGEND_KEY_SPEED) },
+          h('i', { className: 'ud-legend-swatch ud-legend-swatch--line ud-legend-swatch--line--speed' }),
+          h('span', null, t('speedLegend'))) : null)
     }
 
     const colorForModel = (models) => (model) => {
@@ -1718,10 +1806,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, modelOrder, colorFor, labelFor, labelMinPitch, busy, legendModels, panelRef, costCurrency = '', costEnabled = false, t = defaultT }) {
+    function TrendChart({ title, notes, slots, modelOrder, colorFor, labelFor, slotLabelFor, labelMinPitch, busy, legendModels, panelRef, costCurrency = '', costEnabled = false, t = defaultT }) {
       const wrapRef = useRef(null)
       const [avail, setAvail] = useState(CHART_NOMINAL_WIDTH)
       const [hover, setHover] = useState(null)
+      // 图例显隐:null = 全部可见;键集 = 模型项与折线项(rate/speed)
+      const [visibleKeys, setVisibleKeys] = useState(null)
       // prefs 仅用于 hover tooltip 的费用显隐,经 ref 读取:开关切换不触发本组件重渲染,
       // 避免宿主设置弹窗滚动锚定被重渲染扰动而跳变
       const prefsRef = useRef(statsLineState.get())
@@ -1735,11 +1825,23 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
         observer.observe(element)
         return () => observer.disconnect()
       }, [])
-      const layout = trendLayout(slots, modelOrder, avail, labelMinPitch)
+      const hasSpeed = slots.some((slot) => slot.speed !== undefined)
+      const visibleSet = visibleKeys ?? new Set([...modelOrder, LEGEND_KEY_RATE, ...(hasSpeed ? [LEGEND_KEY_SPEED] : [])])
+      const visibleModels = modelOrder.filter((model) => visibleSet.has(model))
+      const showRate = visibleSet.has(LEGEND_KEY_RATE)
+      const showSpeed = hasSpeed && visibleSet.has(LEGEND_KEY_SPEED)
+      const layout = trendLayout(slots, visibleModels, avail, labelMinPitch)
       const plotRight = CHART_PAD.left + (slots.length - 1) * layout.step + layout.barWidth
       const ratePoints = trendRatePoints(slots, layout.bars, layout.plotHeight)
+      const speedMax = speedScaleMax(slots)
+      const speedAxisMax = speedMax * AXIS_SCALE_HEADROOM
+      const speedPoints = showSpeed ? trendSpeedPoints(slots, layout.bars, layout.plotHeight, speedAxisMax) : []
+      // 左轴标定:可见柱有数据标 token;无柱数据且速度线可见标速度(tok/s);否则空
+      const speedAxisTicks = layout.ticks.length === 0 && showSpeed ? niceTicks(speedMax, AXIS_TICK_COUNT) : []
+      const yTicks = leftAxisTicks(layout.ticks, layout.scaleMax, speedAxisTicks, speedAxisMax)
       const hoverSlot = hover ? slots[hover.index] : null
-      const hoverRatePoint = hoverSlot ? ratePoints.find((point) => point.day === hoverSlot.day) : null
+      const hoverRatePoint = showRate && hoverSlot ? ratePoints.find((point) => point.day === hoverSlot.day) : null
+      const hoverSpeedPoint = hoverSlot ? speedPoints.find((point) => point.day === hoverSlot.day) : null
       const pick = (index) => (event) => setHover({ index, anchor: event.currentTarget })
       const clear = () => setHover(null)
       const otherEntries = hoverSlot
@@ -1754,13 +1856,16 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
             className: 'ud-chart', viewBox: `0 0 ${avail} ${CHART_HEIGHT}`, width: '100%', role: 'img',
             'aria-label': title, onMouseLeave: clear,
           },
-            layout.ticks.map((tick) => {
-              const y = CHART_PAD.top + layout.plotHeight - (tick / layout.maxTotal) * layout.plotHeight
-              return h('g', { key: tick },
+            yTicks.map((tick) => {
+              const y = CHART_PAD.top + layout.plotHeight - tick.ratio * layout.plotHeight
+              return h('g', { key: tick.label },
                 h('line', { className: 'ud-grid', x1: CHART_PAD.left, x2: plotRight, y1: y, y2: y }),
-                h('text', { className: 'ud-axis', x: CHART_PAD.left - AXIS_LABEL_GAP, y: y + AXIS_LABEL_BASELINE, textAnchor: 'end' }, formatCompact(tick)))
+                h('text', { className: 'ud-axis', x: CHART_PAD.left - AXIS_LABEL_GAP, y: y + AXIS_LABEL_BASELINE, textAnchor: 'end' }, tick.label))
             }),
-            rateAxisTicks().map((tick) => {
+            speedAxisTicks.length > 0
+              ? h('text', { className: 'ud-axis', x: CHART_PAD.left - AXIS_LABEL_GAP, y: CHART_PAD.top + AXIS_LABEL_BASELINE, textAnchor: 'end' }, 'tok/s')
+              : null,
+            (showRate ? rateAxisTicks() : []).map((tick) => {
               const y = CHART_PAD.top + layout.plotHeight - (tick / PERCENT_SCALE) * layout.plotHeight
               return h('text', {
                 key: `rate-${tick}`, className: 'ud-axis-rate',
@@ -1778,30 +1883,42 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
             slots.map((slot, index) => (index % layout.labelEvery === 0 || index === slots.length - 1)
               ? h('text', { key: slot.day, className: 'ud-axis', x: layout.bars[index].x, y: CHART_HEIGHT - X_LABEL_OFFSET, textAnchor: 'middle' }, labelFor(slot.day))
               : null),
-            h('path', {
+            showRate ? h('path', {
               className: 'ud-trend', d: smoothPath(ratePoints),
               strokeWidth: TREND_LINE_WIDTH, strokeLinejoin: 'round', strokeLinecap: 'round',
-            }),
+            }) : null,
+            showSpeed ? h('path', {
+              className: cx('ud-trend', 'ud-trend--speed'), d: smoothPath(speedPoints),
+              strokeWidth: TREND_LINE_WIDTH, strokeLinejoin: 'round', strokeLinecap: 'round',
+            }) : null,
             hoverRatePoint
               ? h('circle', { className: 'ud-trend-dot', cx: hoverRatePoint.x, cy: hoverRatePoint.y, r: TREND_DOT_RADIUS })
               : null,
+            hoverSpeedPoint
+              ? h('circle', { className: cx('ud-trend-dot', 'ud-trend-dot--speed'), cx: hoverSpeedPoint.x, cy: hoverSpeedPoint.y, r: TREND_DOT_RADIUS })
+              : null,
             slots.map((slot, index) => h('rect', {
               key: `hit-${slot.day}`, className: 'ud-bar-hit',
               x: layout.bars[index].x - layout.step / 2, y: CHART_PAD.top, width: layout.step, height: layout.plotHeight,
               onMouseEnter: pick(index), onFocus: pick(index), onMouseLeave: clear, onBlur: clear,
             })))),
-        h(Legend, { models: legendModels, colorFor }),
+        h(Legend, {
+          models: legendModels, colorFor, speedEnabled: hasSpeed,
+          isVisible: (key) => visibleSet.has(key),
+          onItem: (key, ctrl) => setVisibleKeys(legendToggle(visibleKeys, key, ctrl)),
+        }),
         h(ChartTip, { anchor: hover ? hover.anchor : null, panelRef },
           hoverSlot
             ? [
-                h('div', { key: 'title', className: 'ud-tip-title' }, hoverSlot.day),
+                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.map((item) => h('div', { key: `m-${item.model}`, className: 'ud-tip-row' },
+                ...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)}`)),
-                ...otherEntries.map(([model, tokens]) => h('div', { key: `om-${model}`, className: 'ud-tip-row ud-tip-row--sub' },
-                  `${model}: ${formatTokens(tokens)}`)),
-                h('div', { key: 'rate', className: 'ud-tip-row' }, `${t('cacheHitRate')}: ${cacheRateText(hoverSlot.cacheHit, hoverSlot.cacheMiss)}`),
+                ...(visibleSet.has(OTHER_MODEL) ? otherEntries.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,
                 costEnabled && prefsRef.current.costDisplay && hoverSlot.cost !== undefined
                   ? h('div', { key: 'cost', className: 'ud-tip-row' }, `≈ ${formatCost(hoverSlot.cost, costCurrency)}`)
                   : null,
@@ -2413,6 +2530,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       : id === 'hour' ? t('trendLimitedHour', { n: count }) : t('trendLimitedMinute', { n: count }))
     const presetLabel = (t, view, id) => t(`${view === 'hour' ? 'hourPreset' : 'minutePreset'}.${id}`)
     const tickLabelFor = (view) => (view === 'day' ? shortDay : view === 'hour' ? hourTickLabel : minuteTickLabel)
+    const slotLabelFor = (view) => (view === 'hour' ? hourSlotLabel : view === 'minute' ? minuteSlotLabel : (day) => day)
 
     function UsageDashPanel({ t = defaultT }) {
       const [view, setView] = useState('day')
@@ -2667,6 +2785,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
               modelOrder: trendSource.models.map((item) => item.model),
               colorFor,
               labelFor: tickLabelFor(view),
+              slotLabelFor: slotLabelFor(view),
               labelMinPitch: pointActive ? LABEL_PITCH_TIME : LABEL_PITCH_DAY,
               busy,
               legendModels: trendSource.models,

package/src/query.js

@@ -105,6 +105,8 @@ export function aggregateRange(rows, g, from, to) {
   const modelTotals = new Map()
   const providerTotals = new Map()
   const activeBuckets = new Set()
+  // 槽级速度配对:桶串 → {outputTokens, durationMs},与模型级同口径(仅带时长行)
+  const slotSpeeds = new Map()
   for (const row of rows) {
     const slot = slotByKey.get(row.bucket)
     // 桶串未落在枚举序列(如改粒度前的历史残行)不可归属,跳过防崩
@@ -115,6 +117,12 @@ export function aggregateRange(rows, g, from, to) {
     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) ?? { outputTokens: 0, durationMs: 0 }
+      pair.outputTokens += row.outputTokens
+      pair.durationMs += row.durationMs
+      slotSpeeds.set(row.bucket, pair)
+    }
     const modelTotal = modelTotals.get(row.model)
     if (modelTotal) {
       modelTotal.tokens += tokens
@@ -130,6 +138,11 @@ export function aggregateRange(rows, g, from, to) {
     }
     providerTotals.set(row.provider, (providerTotals.get(row.provider) ?? 0) + tokens)
   }
+  // 槽级 speed 条件挂:无时长数据的槽不挂字段(存量槽形契约不变)
+  for (const slot of slots) {
+    const pair = slotSpeeds.get(slot.day)
+    if (pair && pair.durationMs > 0) slot.speed = pair.outputTokens / (pair.durationMs / MS_PER_SECOND)
+  }
   const totals = { tokens: 0, requests: 0, turns: 0, cacheHit: 0, cacheMiss: 0 }
   for (const slot of slots) {
     totals.tokens += slot.total

package/test/client.test.mjs

@@ -15,6 +15,9 @@ const {
   CHART_PAD,
   DAY_MAX_SLOTS,
   DAY_PRESETS,
+  DEFAULT_HOUR_PRESET,
+  DEFAULT_MINUTE_PRESET,
+  DEFAULT_RANGE,
   DONUT_CENTER_XY,
   DONUT_CIRCUMFERENCE,
   DONUT_OUTER_RADIUS,
@@ -80,6 +83,13 @@ const {
   trimSlots,
   trendLayout,
   trendRatePoints,
+  trendSpeedPoints,
+  speedTipText,
+  speedScaleMax,
+  legendToggle,
+  leftAxisTicks,
+  hourSlotLabel,
+  minuteSlotLabel,
   validatePricingRules,
 } = core
 
@@ -129,6 +139,13 @@ test('预设定义表覆盖三视图', () => {
   assert.deepEqual(MINUTE_PRESETS, ['3h', '24h', '3d', '7d'])
 })
 
+test('默认挡位均在其挡位列表内,分钟窗口可解析', () => {
+  assert.ok(DAY_PRESETS.includes(DEFAULT_RANGE))
+  assert.ok(HOUR_PRESETS.includes(DEFAULT_HOUR_PRESET))
+  assert.ok(MINUTE_PRESETS.includes(DEFAULT_MINUTE_PRESET))
+  assert.notEqual(resolveMinuteRange(DEFAULT_MINUTE_PRESET, NOW), null)
+})
+
 test('时/分挡位文案键逐挡齐备,含跨表同 id 挡位', () => {
   // Given 时/分挡位表存在同 id('24h') When 逐挡查词典 Then 两语言均有对应键,漏配即回退键名
   for (const id of HOUR_PRESETS) {
@@ -320,23 +337,53 @@ test('trendLayout 单槽列距铺满且柱宽取上限', () => {
   assert.equal(layout.maxTotal, 50)
 })
 
-test('trendLayout 零值槽无分段但保留刻度', () => {
+test('trendLayout 零值槽无分段,无可见数据时刻度为空表', () => {
   const layout = trendLayout([{ day: '2026-03-15', total: 0, byModel: {} }], [], 720, 46)
   assert.deepEqual(layout.bars[0].segments, [])
-  assert.deepEqual(layout.ticks, [0.5, 1])
+  assert.deepEqual(layout.ticks, [])
 })
 
-test('trendLayout 堆叠分段自底向上且高度求和等于绘图高', () => {
+test('trendLayout 堆叠分段自底向上,轴上限为数据峰乘留白系数', () => {
   const layout = trendLayout([{ day: 'd', total: 50, byModel: { a: 30, b: 20 } }], ['a', 'b'], 720, 46)
   const [segA, segB] = layout.bars[0].segments
   assert.deepEqual(segA.model, 'a')
   assert.deepEqual(segB.model, 'b')
-  approx(segA.height, (30 / 50) * 184)
-  approx(segB.height, (20 / 50) * 184)
-  approx(segA.height + segB.height, 184)
+  approx(segA.height, (30 / (50 * 1.1)) * 184)
+  approx(segB.height, (20 / (50 * 1.1)) * 184)
+  approx(segA.height + segB.height, (50 / (50 * 1.1)) * 184)
   approx(segB.y + segB.height, segA.y)
 })
 
+test('trendLayout 数据峰不顶满绘图区,留白系数 1.1', () => {
+  const layout = trendLayout([{ day: 'd', total: 30, byModel: { a: 30 } }], ['a'], 720, 46)
+  const [segA] = layout.bars[0].segments
+  approx(segA.height + CHART_PAD.top, CHART_PAD.top + (1 / 1.1) * 184)
+})
+
+test('trendLayout 可见模型无数据时左轴刻度为空表', () => {
+  const slots = [{ day: 'd', total: 50, byModel: { a: 50 } }]
+  assert.deepEqual(trendLayout(slots, [], 720, 46).ticks, [])
+  assert.deepEqual(trendLayout(slots, ['b'], 720, 46).ticks, [])
+  assert.ok(trendLayout(slots, ['a'], 720, 46).ticks.length > 0)
+})
+
+test('leftAxisTicks 速度模式标定速度刻度,否则标定 token 刻度', () => {
+  const tokenTicks = leftAxisTicks([100, 200], 200, [], 1)
+  assert.deepEqual(tokenTicks.map((tick) => tick.label), ['100', '200'])
+  approx(tokenTicks[0].ratio, 0.5)
+  const speedTicks = leftAxisTicks([], 1, [0.5, 1], 1)
+  assert.deepEqual(speedTicks.map((tick) => tick.label), ['0.5', '1'])
+  approx(speedTicks[0].ratio, 0.5)
+  approx(speedTicks[1].ratio, 1)
+})
+
+test('hour/minute 悬浮窗槽标签:T 换空格,小时带 h 后缀,分钟保 HH:MM', () => {
+  assert.equal(hourSlotLabel('2026-03-15T14'), '2026-03-15 14h')
+  assert.equal(hourSlotLabel('2026-03-15T00'), '2026-03-15 00h')
+  assert.equal(minuteSlotLabel('2026-03-15T14:30'), '2026-03-15 14:30')
+  assert.equal(minuteSlotLabel('2026-03-15T00:00'), '2026-03-15 00:00')
+})
+
 test('trendLayout 标签密度随列距收敛', () => {
   const slots = Array.from({ length: 100 }, (_, i) => ({ day: `d${i}`, total: 0, byModel: {} }))
   const layout = trendLayout(slots, [], 720, 46)
@@ -473,6 +520,61 @@ test('trendRatePoints 点映射列中心与百分比高度且零数据日跳过'
   approx(points[1].y, CHART_PAD.top + plotHeight - 0.5 * plotHeight)
 })
 
+test('trendSpeedPoints 点映射列中心与刻度上限比例高度且无速度槽跳过', () => {
+  const slots = [
+    { day: 'd0', speed: 50 },
+    { day: 'd1', total: 10 },
+    { day: 'd2', speed: 25 },
+  ]
+  const bars = [{ x: 10 }, { x: 20 }, { x: 30 }]
+  const plotHeight = CHART_HEIGHT - CHART_PAD.top - CHART_PAD.bottom
+  const points = trendSpeedPoints(slots, bars, plotHeight, 100)
+  assert.equal(points.length, 2)
+  assert.equal(points[0].day, 'd0')
+  assert.equal(points[0].x, 10)
+  approx(points[0].y, CHART_PAD.top + plotHeight - 0.5 * plotHeight)
+  assert.equal(points[1].day, 'd2')
+  assert.equal(points[1].x, 30)
+  approx(points[1].y, CHART_PAD.top + plotHeight - 0.25 * plotHeight)
+})
+
+test('speedTipText 无速度为占位符有速度为官方吞吐口径', () => {
+  assert.equal(speedTipText(undefined), '—')
+  assert.equal(speedTipText(5.5556), '5.6 tok/s')
+  assert.equal(speedTipText(12.34), '12 tok/s')
+})
+
+test('legendToggle 普通点击单选,再点恢复全部,ctrl 多选且禁全藏', () => {
+  // null 表示全部可见
+  assert.deepEqual(legendToggle(null, 'a', false), new Set(['a']))
+  // 单选态再点同项恢复全部(null)
+  assert.equal(legendToggle(new Set(['a']), 'a', false), null)
+  // 单选态点他项 → 切换单选目标
+  assert.deepEqual(legendToggle(new Set(['a']), 'b', false), new Set(['b']))
+  // ctrl 切换单项:加入与移除
+  assert.deepEqual(legendToggle(new Set(['a']), 'b', true), new Set(['a', 'b']))
+  assert.deepEqual(legendToggle(new Set(['a', 'b']), 'b', true), new Set(['a']))
+  // ctrl 隐藏最后一项:无操作,保持原态
+  const solo = new Set(['a'])
+  assert.equal(legendToggle(solo, 'a', true), solo)
+})
+
+test('trendLayout 刻度跟随可见模型:单模型刻度按该槽内合计归一', () => {
+  const slots = [
+    { day: 'd0', total: 50, byModel: { a: 30, b: 20 } },
+    { day: 'd1', total: 90, byModel: { a: 40, b: 50 } },
+  ]
+  assert.equal(trendLayout(slots, ['a', 'b'], 720, 46).maxTotal, 90)
+  assert.equal(trendLayout(slots, ['a'], 720, 46).maxTotal, 40)
+  assert.equal(trendLayout(slots, [], 720, 46).maxTotal, 1)
+})
+
+test('speedScaleMax 全零或空槽钳底防除零,混合取最大速度', () => {
+  assert.equal(speedScaleMax([]), 1)
+  assert.equal(speedScaleMax([{ day: 'd0' }, { day: 'd1', speed: 0 }]), 1)
+  assert.equal(speedScaleMax([{ day: 'd0', speed: 30 }, { day: 'd1', speed: 12.5 }]), 30)
+})
+
 test('smoothPath 空点集为空串单点为移动命令', () => {
   assert.equal(smoothPath([]), '')
   assert.equal(smoothPath([{ x: 1, y: 2 }]), 'M 1 2')

package/test/query.test.mjs

@@ -296,6 +296,26 @@ test('纯缓存行带时长:输出 0 计入分母,speed 为 0', () => {
   assert.equal(out.models[0].speed, 0)
 })
 
+test('槽级 speed 配对聚合:同槽带时长行合计,无时长槽无 speed 字段', () => {
+  const rows = [
+    makeRow({ bucket: '2020-01-01', model: 'm1', provider: 'p1', outputTokens: 20, durationMs: 6500 }),
+    makeRow({ bucket: '2020-01-01', model: 'm2', provider: 'p2', outputTokens: 30, durationMs: 2500 }),
+    makeRow({ bucket: '2020-01-02', model: 'm1', provider: 'p1', outputTokens: 100 }),
+  ]
+  const out = aggregateRange(rows, 'D', '2020-01-01', '2020-01-02')
+  assert.equal(out.daily[0].speed, (20 + 30) / ((6500 + 2500) / 1000))
+  assert.equal('speed' in out.daily[1], false)
+})
+
+test('attachCosts 保留槽级 speed 字段供曲线消费', () => {
+  const rows = [
+    makeRow({ bucket: '2020-01-01T01', model: 'm1', provider: 'p1', outputTokens: 20, durationMs: 4000 }),
+  ]
+  const result = aggregateRange(rows, 'H', '2020-01-01T00', '2020-01-01T02')
+  const out = attachCosts(result, rows, 'H', [ruleOf()])
+  assert.equal(out.daily[1].speed, 5)
+})
+
 test('attachCosts H 槽按桶起点计价并归集 totals 与 models', () => {
   const rows = [
     makeRow({ bucket: '2020-01-01T01', model: 'm1', provider: 'p1', inputTokens: 1000000, outputTokens: 500000 }),