dsh-tokenlens 1.7.6 → 1.7.8

package/CHANGELOG.md

@@ -4,6 +4,26 @@
 
 **版本记录约定**：同一发布日只保留一个章节，标题取当日**最后一个**已发布版本号；当日多次发布的改动合并到该章节，并在标题下注明当日实际发布过的版本号（npm 上仍可安装这些独立版本）。若当日已有发布，后续小改动不再单独增加版本号，而是并入下一篇日志。这样日志按天规整、不出现同日多个小版本。
 
+## 1.7.8 — 2026-11-10
+
+（当日已发布版本：v1.7.7 / v1.7.8）
+
+- **fix(ui): 让 TPS 的小时级下钻可被发现**——v1.7.7 加了「点曲线上的某一天 → 该日 24 小时」的交互，但日视图提示只写了计算口径，没有任何地方告诉用户可以点。一个没人发现的交互等于不存在，这也是它「看起来没必要」的真正原因。现在提示末尾明确写出「点击曲线上的某一天可查看该日的小时级速度」
+- 依据实测（最近 14 天会话日志）：每天「有样本的小时数」中位数 **9 / 24**，只有 1 天 ≤4 小时，所以小时视图不是稀疏噪声，每个小时背后通常有上百个 step 支撑，聚合后具备统计意义
+- 小时级数据的诊断价值有实例：`2026-10-23` 日均 30.5 tok/s 看似正常，但 14 点那一小时只有 0.8 tok/s（2 个 step 几乎卡死）——日均视图无法暴露这类日内限速
+- 测试：377（新增断言：日视图提示必须写明可点击下钻）
+
+## 1.7.7 — 2026-11-10
+
+- **feat(ui): TPS 卡片锁定「当前供应商」**——不再跟随上方「当前供应商 / 全部 Harness」切换。这张卡片回答的是「我现在用的模型有多快」，所以始终使用所选供应商自己的日平均序列；没有供应商行时显示空态说明
+- **feat(ui): 点曲线上的点可下钻当日小时级 TPS**——与 token 柱状图的「点某天 → 24 小时」交互一致：点击后曲线切换为该日 24 个本地小时的速率曲线，标题栏显示「2026-11-05 · 小时级」并提供「返回日视图」；再点同一天也会切回日视图
+  - 无样本的小时是 `null` 而不是 0，曲线在该处**断开**而不是跌到零（跌到零是假信息）
+  - 小时级读数同样是「输出 Token ÷ 模型自身耗时」，悬停显示 `09:00 · 120.0 tok/s（600 输出 ÷ 5.0s）`
+  - 该日没有任何小时级样本时显示说明文字，不画空图
+- **feat(stats): Host 侧新增按小时的 TPS 采样**——`foldSession` 在记录每日速率的同时把样本写入按 epoch 小时分桶的 `speedHours`，聚合层再换算成本地 24 槽 `speedDayHours`，随 `speed.byDay[].hours` 下发（仅 provider 维度，合计序列不带）。缓存 schema 升至 7，首次会重扫
+- 文档：`PROTOCOL.md` 补上 `hours` 结构与「null 表示无样本」的约定
+- 测试：373 → 377（TPS 卡片不受作用域切换影响、点柱下钻与返回、无样本下钻的空态、按小时分桶与 null 槽位）
+
 ## 1.7.6 — 2026-11-06
 
 （当日已发布版本：v1.6.5 / v1.6.6 / v1.6.7 / v1.7.0 / v1.7.1 / v1.7.2 / v1.7.3 / v1.7.4 / v1.7.5 / v1.7.6）

package/PROTOCOL.md

@@ -324,7 +324,8 @@ folder basename, used by the client to match a sidebar hover card; the full
 `cwd` is Host-only and never sent on the wire), the rolling 5-hour local window
 (`fiveHours`, DSH-only because external harnesses are day-granular), and the
 bounded `daily[]` series used by the chart view, the `speed` series behind the
-TPS trend (v1.7.0), and the subscription window (`effectiveDay` is the plan's
+TPS trend (v1.7.0, with 24 local-hour slots per day for the drill-down in
+v1.7.7), and the subscription window (`effectiveDay` is the plan's
 period start when the Host learned it, and `sinceEffective` is summed from the
 per-day buckets inside `[window start, today]` rather than borrowed from the
 30-day or all-time bucket — v1.7.2). Absolute local paths are
@@ -392,7 +393,12 @@ with `[path]`.
     "speed": {
       "byDay": [
         { "day": "2026-11-05", "outputTokens": 516951, "seconds": 8493.1,
-          "tps": 60.9, "steps": 859 }
+          "tps": 60.9, "steps": 859,
+          // v1.7.7: 24 local-hour slots for the click-to-drill-down view. A slot
+          // with no sample is null rather than a zero, so the curve breaks
+          // instead of dipping to zero. Only provider-scoped series carry it.
+          "hours": [ null, null, …, { "outputTokens": 600, "seconds": 5,
+                                      "tps": 120, "steps": 1 }, … ] }
       ],
       "total": { "outputTokens": 939643, "seconds": 14123.9, "tps": 66.5, "steps": 1424 }
     },

package/README.en.md

@@ -144,7 +144,7 @@ Host bridge route: `/api/tokenlens`; agent tool: `tokenlens_usage`.
 
 ## Development
 
-Node.js ≥ 24, zero runtime dependencies: `node --test` runs the 373 tests.
+Node.js ≥ 24, zero runtime dependencies: `node --test` runs the 377 tests.
 
 Release: `node scripts/bump-version.mjs <version> "<note>"` updates `package.json`, `PLUGIN_VERSION` and `CHANGELOG.md`; see [CONTRIBUTING.md](CONTRIBUTING.md) and [SECURITY.md](SECURITY.md).
 

package/README.md

@@ -445,7 +445,7 @@ Host 半注册 `tokenlens_usage`，参数 `action`（默认 `snapshot`）与可
 
 ## 验证
 
-- `node --test`：**373 个自动化用例**，覆盖 Host 数据层、供应商适配器（含小米 MiMo 控制台 Cookie 适配器、Command Code 月度额度反推）、统计折叠、各 harness 读取、Design Plan 周期账本与额度计价、TPS 速度序列、窗口锚点切片、工作区自动识别、插件集成与浏览器端渲染 / 交互。
+- `node --test`：**377 个自动化用例**，覆盖 Host 数据层、供应商适配器（含小米 MiMo 控制台 Cookie 适配器、Command Code 月度额度反推）、统计折叠、各 harness 读取、Design Plan 周期账本与额度计价、TPS 速度序列、窗口锚点切片、工作区自动识别、插件集成与浏览器端渲染 / 交互。
 - 在真实环境中验证过 **5 个 harness** 的数据源；本机统计与独立的 SQLite 查询、独立的日志解析逐项对账（差额为 0），跨 harness 合并与供应商映射算术自洽。
 - 供应商接口按各官方文档与参考客户端行为验证；未配置凭据时 chip 静默隐藏，接口异常时按可重试错误降级。
 

package/client.js

@@ -229,10 +229,17 @@ window.__ModuleLoader__.load({
       statsDshTotalLabel: 'DSH 合计',
       statsLast30Days: '最近30天',
       statsSpeedTitle: '输出速度（TPS）',
-      statsSpeedHint: '输出 Token ÷ 模型自身耗时（step 开始到消息返回）；不含工具调用等待，但输出含思考 Token',
+      statsSpeedHint:
+        '输出 Token ÷ 模型自身耗时（step 开始到消息返回）；不含工具调用等待，但输出含思考 Token。点击曲线上的某一天可查看该日的小时级速度',
       statsSpeedTotal: '均值 {tps} tok/s',
       statsSpeedPeak: '峰值 {tps} tok/s',
       statsSpeedEmpty: '暂无可计算的速度样本（需要 step 计时数据）',
+      statsSpeedHourTitle: '{date} · 小时级',
+      statsSpeedHourHint: '同一天按本地小时切分；仍是输出 Token ÷ 模型自身耗时，无样本的小时留空',
+      statsSpeedHourEmpty: '该日没有可下钻的小时级样本',
+      statsSpeedHourBarTitle: '{hour} · {tps} tok/s（{tokens} 输出 ÷ {seconds}s）',
+      statsSpeedHourAria: '{date} 的小时级输出速度',
+      statsSpeedBack: '返回日视图',
       statsSpeedBarTitle: '{date} · {tps} tok/s（{tokens} 输出 ÷ {seconds}s）',
       statsSpeedDetail: '{tokens} 输出 ÷ {seconds}s',
       statsLast7Days: '最近7天',
@@ -506,10 +513,17 @@ window.__ModuleLoader__.load({
       statsLast30Days: 'Last 30 days',
       statsSpeedTitle: 'Output speed (TPS)',
       statsSpeedHint:
-        'Output tokens ÷ the model’s own request time (step start to message); tool waits excluded, reasoning tokens included',
+        'Output tokens ÷ the model’s own request time (step start to message); tool waits excluded, reasoning tokens included. Click a day on the curve for that day’s hourly speed',
       statsSpeedTotal: 'avg {tps} tok/s',
       statsSpeedPeak: 'peak {tps} tok/s',
       statsSpeedEmpty: 'No speed samples yet (needs step timing data)',
+      statsSpeedHourTitle: '{date} · hourly',
+      statsSpeedHourHint:
+        'The same day split by local hour; still output tokens ÷ model time, hours without samples stay empty',
+      statsSpeedHourEmpty: 'No hourly samples to drill into for this day',
+      statsSpeedHourBarTitle: '{hour} · {tps} tok/s ({tokens} output ÷ {seconds}s)',
+      statsSpeedHourAria: 'Hourly output speed for {date}',
+      statsSpeedBack: 'Back to daily',
       statsSpeedBarTitle: '{date} · {tps} tok/s ({tokens} output ÷ {seconds}s)',
       statsSpeedDetail: '{tokens} output ÷ {seconds}s',
       statsLast7Days: 'Last 7 days',
@@ -1611,13 +1625,31 @@ window.__ModuleLoader__.load({
       const byDay = Array.isArray(raw.byDay)
         ? raw.byDay
             .filter((entry) => entry !== null && typeof entry === 'object' && typeof entry.day === 'string')
-            .map((entry) => ({
-              day: entry.day,
-              outputTokens: numberOrNull(entry.outputTokens) ?? 0,
-              seconds: numberOrNull(entry.seconds) ?? 0,
-              tps: numberOrNull(entry.tps),
-              steps: numberOrNull(entry.steps) ?? 0,
-            }))
+            .map((entry) => {
+              // v1.7.7: the day's 24 local-hour slots (null where there is no
+              // sample), used by the click-to-drill-down hourly view.
+              const hours = Array.isArray(entry.hours)
+                ? entry.hours.map((cell) => {
+                    if (cell === null || typeof cell !== 'object') return null
+                    const tps = numberOrNull(cell.tps)
+                    if (tps === null || tps < 0) return null
+                    return {
+                      outputTokens: numberOrNull(cell.outputTokens) ?? 0,
+                      seconds: numberOrNull(cell.seconds) ?? 0,
+                      tps,
+                      steps: numberOrNull(cell.steps) ?? 0,
+                    }
+                  })
+                : null
+              return {
+                day: entry.day,
+                outputTokens: numberOrNull(entry.outputTokens) ?? 0,
+                seconds: numberOrNull(entry.seconds) ?? 0,
+                tps: numberOrNull(entry.tps),
+                steps: numberOrNull(entry.steps) ?? 0,
+                hours: hours === null ? null : hours.slice(0, 24),
+              }
+            })
             .filter((entry) => entry.tps !== null && entry.tps >= 0)
         : []
       const totalRaw = raw.total !== null && typeof raw.total === 'object' ? raw.total : {}
@@ -2107,6 +2139,9 @@ window.__ModuleLoader__.load({
         chartHover: null,
         // v1.7.2: the hovered point of the output-speed (TPS) curve.
         speedHover: null,
+        // v1.7.7: the day whose 24 local hours the TPS card charts, or null
+        // (daily trend). Clicking a point on the curve toggles it.
+        speedDay: null,
         // v1.2.0 chart drill-down: the clicked day whose 0..23 hour histogram
         // is charted instead of the daily trend, or null (daily trend).
         chartDay: null,
@@ -2219,6 +2254,9 @@ window.__ModuleLoader__.load({
         // v1.7.6: the TPS hover index is view state like the chart's, so it must
         // not survive a provider switch (the series behind it changed).
         speedHover: null,
+        // v1.7.7: an hourly TPS drill-down belongs to one provider's series, so a
+        // provider switch returns to the daily trend.
+        speedDay: null,
       }
     }
 
@@ -3503,6 +3541,10 @@ window.__ModuleLoader__.load({
 .dsh-tokenlens-speed-yaxis{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:var(--dsw-alias-label-tertiary);font-size:10px;line-height:1;font-variant-numeric:tabular-nums;flex:0 0 auto;padding:1px 0}
 .dsh-tokenlens-speed-plot{position:relative;flex:1 1 auto;min-width:0}
 .dsh-tokenlens-speed-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#2e9e5b;box-shadow:0 0 0 2px var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.35));pointer-events:none}
+/* v1.7.7: the daily curve is clickable (drills into that day's hours). */
+.dsh-tokenlens-speed-svg[data-speed-mode=day] rect[data-speed-day]{cursor:pointer}
+.dsh-tokenlens-link-button{border:0;background:none;padding:0 0 0 6px;color:var(--dsw-alias-label-secondary,currentColor);font:inherit;font-size:11px;line-height:inherit;text-decoration:underline;cursor:pointer}
+.dsh-tokenlens-link-button:hover,.dsh-tokenlens-link-button:focus-visible{color:var(--dsw-alias-label-primary,currentColor)}
 .dsh-tokenlens-speed-axis{display:flex;justify-content:space-between;gap:6px;color:var(--dsw-alias-label-tertiary);font-size:10px;line-height:1.2;font-variant-numeric:tabular-nums;min-width:0}
 .dsh-tokenlens-speed-axis>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 @media (max-width:680px){.dsh-tokenlens-chart-layout-row>*{flex-basis:100%!important}}
@@ -4729,6 +4771,24 @@ window.__ModuleLoader__.load({
       if (store.get().speedHover !== next) store.set({ speedHover: next })
     }
 
+    /**
+     * Drill the TPS card into one day's 24 local hours (v1.7.7), or back out.
+     *
+     * Toggling mirrors the token chart's `activateChartDay`: clicking the already
+     * active day returns to the daily trend, so no separate "back" button is
+     * needed — but one is still offered in the header for discoverability.
+     */
+    function activateSpeedDay(day) {
+      if (typeof day !== 'string' || day === '') return
+      const next = store.get().speedDay === day ? null : day
+      store.set({ speedDay: next, speedHover: null })
+    }
+
+    /** Leave the hourly TPS drill-down and chart the daily trend again (v1.7.7). */
+    function clearSpeedDay() {
+      if (store.get().speedDay !== null) store.set({ speedDay: null, speedHover: null })
+    }
+
     /** The active today bucket of the current stats scope (v0.27.2). */
     function todayBucketOf(ctx) {
       return ctx.providerScoped ? ctx.currentRow?.today ?? null : ctx.stats?.today ?? null
@@ -6136,17 +6196,33 @@ window.__ModuleLoader__.load({
     }
 
     /**
-     * The output-speed (TPS) trend card (v1.7.0), shown under 明细.
+     * The output-speed (TPS) trend card (v1.7.0, reworked in v1.7.7).
+     *
+     * Always the CURRENT provider's series (v1.7.7): the user reads this card as
+     * "how fast is the model I am using right now", so it deliberately ignores
+     * the 当前供应商 / 全部 Harness switch above it.
      *
      * `tps` is output tokens over the model's OWN request time (`step/start` to
-     * `assistant/message`), so the step's tool calls do not dilute it — but
+     * `assistant/message`), so a step's tool calls do not dilute it — but
      * reasoning tokens are included in "output", which the hint says.
+     *
+     * Clicking a point drills into that day's 24 local hours (v1.7.7), the same
+     * interaction the token chart uses for its daily bars.
      */
     function buildSpeedSection(state, ctx, t) {
-      const stats = ctx.stats
-      const scoped = ctx.providerScoped ? ctx.currentRow?.speed ?? null : stats?.speed ?? null
-      const series = scoped === null || scoped === undefined ? null : scoped
+      // v1.7.7: always provider-scoped, whatever the scope tabs say.
+      const series = ctx.currentRow?.speed ?? null
       const byDay = series === null ? [] : series.byDay
+      const drilledDay = typeof state.speedDay === 'string' ? state.speedDay : null
+      const drilled = drilledDay === null ? null : byDay.find((entry) => entry.day === drilledDay) ?? null
+      // v1.7.7: being drilled into a day is a MODE, independent of whether that
+      // day actually carries hourly samples — otherwise a day without them would
+      // silently fall back to the daily chart instead of saying so.
+      const hourlyMode = drilledDay !== null && drilled !== null
+      const hourly = hourlyMode && Array.isArray(drilled.hours) ? drilled.hours : null
+      const pointsSeries = hourlyMode ? hourly ?? [] : byDay
+      const dailyMode = !hourlyMode
+
       const head = h(
         'div',
         { key: 'head', className: 'dsh-tokenlens-section-head' },
@@ -6156,205 +6232,266 @@ window.__ModuleLoader__.load({
           Icon('chart', 14),
           t('statsSpeedTitle'),
         ),
-        series !== null && series.total.tps !== null
-          ? h(
-              'span',
-              { className: 'dsh-tokenlens-hint', 'data-speed-total': String(series.total.tps) },
-              t('statsSpeedTotal', { tps: series.total.tps.toFixed(1) }),
-            )
-          : null,
-      )
-      const body =
-        byDay.length === 0
-          ? h(
-              'div',
-              { key: 'empty', className: 'dsh-tokenlens-chart-empty', 'data-speed-empty': 'true' },
-              h('span', { key: 'hint', className: 'dsh-tokenlens-hint' }, t('statsSpeedEmpty')),
-            )
-          : (() => {
-              // v1.7.1: a CURVE, not bars — the trend is a rate, and a line reads
-              // it far better than per-day columns. The SVG scales to the card
-              // width; `preserveAspectRatio="none"` lets it fill without keeping
-              // the viewBox ratio, and the per-day hover targets are transparent
-              // columns so nothing is distorted.
-              const width = 320
-              const height = 90
-              const pad = 4
-              const max = Math.max(...byDay.map((entry) => entry.tps ?? 0), 1)
-              const stepX = byDay.length > 1 ? (width - pad * 2) / (byDay.length - 1) : 0
-              const points = byDay.map((entry, index) => {
-                const x = byDay.length > 1 ? pad + stepX * index : width / 2
-                const y = height - pad - ((entry.tps ?? 0) / max) * (height - pad * 2)
-                return { x, y }
-              })
-              const line = points.map((point) => `${point.x.toFixed(1)},${point.y.toFixed(1)}`).join(' ')
-              const area = `${pad.toFixed(1)},${(height - pad).toFixed(1)} ${line} ${(width - pad).toFixed(1)},${(height - pad).toFixed(1)}`
-              const columnWidth = byDay.length > 1 ? stepX : width - pad * 2
-              const columns = byDay.map((entry, index) =>
-                h(
-                  'rect',
-                  {
-                    key: `hit-${entry.day}-${index}`,
-                    // v1.7.6: clamp the hit column into the viewBox — a single-day
-                    // series used to start at a negative x and lose half its area.
-                    x: Math.max(0, Math.min(width - 1, points[index].x - columnWidth / 2)).toFixed(1),
-                    y: 0,
-                    width: Math.max(1, Math.min(columnWidth, width)).toFixed(1),
-                    height: String(height),
-                    fill: 'transparent',
-                    'data-speed-day': entry.day,
-                    'data-speed-tps': String(entry.tps ?? 0),
-                  },
-                  h(
-                    'title',
-                    { key: 'tip' },
-                    t('statsSpeedBarTitle', {
-                      date: entry.day,
-                      tps: (entry.tps ?? 0).toFixed(1),
-                      tokens: formatTokensPrecise(entry.outputTokens),
-                      seconds: entry.seconds.toFixed(1),
-                    }),
-                  ),
-                ),
+        // While drilled in, the header says which day and offers a way back.
+        hourly === null
+          ? series !== null && series.total.tps !== null
+            ? h(
+                'span',
+                { className: 'dsh-tokenlens-hint', 'data-speed-total': String(series.total.tps) },
+                t('statsSpeedTotal', { tps: series.total.tps.toFixed(1) }),
               )
-              const svg = h(
-                'svg',
+            : null
+          : h(
+              'span',
+              { key: 'drill', className: 'dsh-tokenlens-hint', 'data-speed-drill': drilled.day },
+              t('statsSpeedHourTitle', { date: drilled.day }),
+              h(
+                'button',
                 {
-                  key: 'svg',
-                  className: 'dsh-tokenlens-speed-svg',
-                  'data-speed-plot': 'true',
-                  viewBox: `0 0 ${width} ${height}`,
-                  preserveAspectRatio: 'none',
-                  role: 'img',
-                  'aria-label': t('statsSpeedTitle'),
+                  key: 'back',
+                  type: 'button',
+                  className: 'dsh-tokenlens-link-button',
+                  'data-speed-back': 'true',
+                  onClick: () => clearSpeedDay(),
                 },
-                h('polygon', {
-                  key: 'area',
+                t('statsSpeedBack'),
+              ),
+            ),
+      )
+
+      const plotOf = () => {
+        if (pointsSeries.length === 0) {
+          return h(
+            'div',
+            { key: 'empty', className: 'dsh-tokenlens-chart-empty', 'data-speed-empty': 'true' },
+            h('span', { key: 'hint', className: 'dsh-tokenlens-hint' }, t('statsSpeedEmpty')),
+          )
+        }
+        // The SVG scales to the card width; `preserveAspectRatio="none"` lets it
+        // fill without keeping the viewBox ratio, and the hover targets are
+        // transparent columns so nothing is distorted.
+        const width = 320
+        const height = 90
+        const pad = 4
+        const real = pointsSeries.filter((entry) => entry !== null)
+        const max = Math.max(...real.map((entry) => entry.tps ?? 0), 1)
+        const count = pointsSeries.length
+        const stepX = count > 1 ? (width - pad * 2) / (count - 1) : 0
+        // A null slot (an hour with no sample) breaks the line instead of being
+        // drawn as a dip to zero, which would be a lie.
+        let segment = []
+        const segments = []
+        pointsSeries.forEach((entry, index) => {
+          if (entry === null) {
+            if (segment.length > 0) segments.push(segment)
+            segment = []
+            return
+          }
+          const x = count > 1 ? pad + stepX * index : width / 2
+          const y = height - pad - ((entry.tps ?? 0) / max) * (height - pad * 2)
+          segment.push({ x, y })
+        })
+        if (segment.length > 0) segments.push(segment)
+        const xOf = (index) => (count > 1 ? pad + stepX * index : width / 2)
+        const yOf = (entry) => height - pad - ((entry.tps ?? 0) / max) * (height - pad * 2)
+        const columnWidth = count > 1 ? stepX : width - pad * 2
+        const columns = pointsSeries.map((entry, index) => {
+          if (entry === null) return null
+          const label = dailyMode
+            ? t('statsSpeedBarTitle', {
+                date: entry.day,
+                tps: (entry.tps ?? 0).toFixed(1),
+                tokens: formatTokensPrecise(entry.outputTokens),
+                seconds: entry.seconds.toFixed(1),
+              })
+            : t('statsSpeedHourBarTitle', {
+                hour: `${String(index).padStart(2, '0')}:00`,
+                tps: (entry.tps ?? 0).toFixed(1),
+                tokens: formatTokensPrecise(entry.outputTokens),
+                seconds: entry.seconds.toFixed(1),
+              })
+          return h(
+            'rect',
+            {
+              key: `hit-${index}`,
+              x: Math.max(0, Math.min(width - 1, xOf(index) - columnWidth / 2)).toFixed(1),
+              y: 0,
+              width: Math.max(1, Math.min(columnWidth, width)).toFixed(1),
+              height: String(height),
+              fill: 'transparent',
+              // In daily mode the column is also the drill-down target.
+              ...(dailyMode ? { 'data-speed-day': entry.day, onClick: () => activateSpeedDay(entry.day) } : {}),
+              ...(dailyMode ? {} : { 'data-speed-hour': String(index) }),
+              'data-speed-tps': String(entry.tps ?? 0),
+            },
+            h('title', { key: 'tip' }, label),
+          )
+        })
+        const lineNodes = segments.map((segment, index) => {
+          const line = segment.map((point) => `${point.x.toFixed(1)},${point.y.toFixed(1)}`).join(' ')
+          const area =
+            segment.length > 1
+              ? `${segment[0].x.toFixed(1)},${(height - pad).toFixed(1)} ${line} ${segment[segment.length - 1].x.toFixed(1)},${(height - pad).toFixed(1)}`
+              : null
+          return [
+            area === null
+              ? null
+              : h('polygon', {
+                  key: `area-${index}`,
                   className: 'dsh-tokenlens-speed-area',
                   points: area,
                   fill: 'rgba(46,158,91,.18)',
                   'aria-hidden': 'true',
                 }),
-                h('polyline', {
-                  key: 'line',
-                  className: 'dsh-tokenlens-speed-line',
-                  points: line,
-                  fill: 'none',
-                  stroke: '#2e9e5b',
-                  'stroke-width': '1.6',
-                  'stroke-linecap': 'round',
-                  'stroke-linejoin': 'round',
-                  'vector-effect': 'non-scaling-stroke',
-                  'aria-hidden': 'true',
-                }),
-                columns,
-              )
-              const hoverIndex =
-                Number.isInteger(state.speedHover) && state.speedHover >= 0 && state.speedHover < byDay.length
-                  ? state.speedHover
-                  : null
-              const hovered = hoverIndex === null ? null : byDay[hoverIndex]
-              const handleMove = (event) => {
-                const index = chartIndexFromEvent(event, byDay.length)
-                if (index !== null) setSpeedHover(index)
-              }
-              const handleLeave = () => setSpeedHover(null)
-              // v1.7.2: a Y axis, like the native charts — the curve alone gives no
-              // sense of magnitude.
-              const ticks = [max, max / 2, 0]
-              const yAxis = h(
-                'div',
-                { key: 'y', className: 'dsh-tokenlens-speed-yaxis', 'aria-hidden': 'true' },
-                ticks.map((value, index) =>
-                  h('span', { key: `tick-${index}`, className: 'dsh-tokenlens-chart-tick' }, `${Math.round(value)}`),
-                ),
-              )
-              const crosshair =
-                hoverIndex === null
-                  ? null
-                  : h('div', {
-                      key: 'cross',
-                      className: 'dsh-tokenlens-chart-crosshair',
-                      'data-speed-crosshair': String(hoverIndex),
-                      'aria-hidden': 'true',
-                      style: { left: `${(points[hoverIndex].x / width) * 100}%` },
-                    })
-              const marker =
-                hoverIndex === null
-                  ? null
-                  : h('div', {
-                      key: 'dot',
-                      className: 'dsh-tokenlens-speed-dot',
-                      'aria-hidden': 'true',
-                      style: {
-                        left: `${(points[hoverIndex].x / width) * 100}%`,
-                        top: `${(points[hoverIndex].y / height) * 100}%`,
-                      },
-                    })
-              const readout =
-                hovered === null
-                  ? null
-                  : h(
-                      'div',
-                      {
-                        key: 'readout',
-                        className: 'dsh-tokenlens-chart-readout',
-                        'data-speed-readout': 'true',
-                        role: 'status',
-                        style:
-                          hoverIndex === 0
-                            ? { left: '0%' }
-                            : hoverIndex === byDay.length - 1
-                              ? { right: '0%' }
-                              : {
-                                  left: `${(points[hoverIndex].x / width) * 100}%`,
-                                  transform: 'translateX(-50%)',
-                                },
-                      },
-                      `${hovered.day} · ${(hovered.tps ?? 0).toFixed(1)} tok/s`,
-                      ` · ${t('statsSpeedDetail', {
-                        tokens: formatTokensPrecise(hovered.outputTokens),
-                        seconds: hovered.seconds.toFixed(1),
-                      })}`,
-                    )
-              const axis = h(
-                'div',
-                { key: 'axis', className: 'dsh-tokenlens-speed-axis', 'aria-hidden': 'true' },
-                h('span', { key: 'first' }, byDay[0].day),
-                byDay.length > 1 ? h('span', { key: 'last' }, byDay[byDay.length - 1].day) : null,
-              )
-              return h(
+            h('polyline', {
+              key: `line-${index}`,
+              className: 'dsh-tokenlens-speed-line',
+              points: line,
+              fill: 'none',
+              stroke: '#2e9e5b',
+              'stroke-width': '1.6',
+              'stroke-linecap': 'round',
+              'stroke-linejoin': 'round',
+              'vector-effect': 'non-scaling-stroke',
+              'aria-hidden': 'true',
+            }),
+          ].filter(Boolean)
+        })
+        const svg = h(
+          'svg',
+          {
+            key: 'svg',
+            className: 'dsh-tokenlens-speed-svg',
+            'data-speed-mode': dailyMode ? 'day' : 'hour',
+            viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: 'none',
+            role: 'img',
+            'aria-label': dailyMode ? t('statsSpeedTitle') : t('statsSpeedHourAria', { date: drilled.day }),
+          },
+          lineNodes.flat(),
+          columns.filter(Boolean),
+        )
+        const hoverIndex =
+          Number.isInteger(state.speedHover) && state.speedHover >= 0 && state.speedHover < count
+            ? state.speedHover
+            : null
+        const hovered = hoverIndex === null ? null : pointsSeries[hoverIndex]
+        const handleMove = (event) => {
+          const index = chartIndexFromEvent(event, count)
+          if (index !== null && pointsSeries[index] !== null) setSpeedHover(index)
+        }
+        const handleLeave = () => setSpeedHover(null)
+        const ticks = [max, max / 2, 0]
+        const yAxis = h(
+          'div',
+          { key: 'y', className: 'dsh-tokenlens-speed-yaxis', 'aria-hidden': 'true' },
+          ticks.map((value, index) =>
+            h('span', { key: `tick-${index}`, className: 'dsh-tokenlens-chart-tick' }, `${Math.round(value)}`),
+          ),
+        )
+        const crosshair =
+          hovered === null || hovered === undefined
+            ? null
+            : h('div', {
+                key: 'cross',
+                className: 'dsh-tokenlens-chart-crosshair',
+                'data-speed-crosshair': String(hoverIndex),
+                'aria-hidden': 'true',
+                style: { left: `${(xOf(hoverIndex) / width) * 100}%` },
+              })
+        const marker =
+          hovered === null || hovered === undefined
+            ? null
+            : h('div', {
+                key: 'dot',
+                className: 'dsh-tokenlens-speed-dot',
+                'aria-hidden': 'true',
+                style: {
+                  left: `${(xOf(hoverIndex) / width) * 100}%`,
+                  top: `${(yOf(hovered) / height) * 100}%`,
+                },
+              })
+        const readoutLabel = dailyMode ? hovered?.day : `${String(hoverIndex).padStart(2, '0')}:00`
+        const readout =
+          hovered === null || hovered === undefined
+            ? null
+            : h(
                 'div',
-                { key: 'plot', className: 'dsh-tokenlens-speed-body' },
-                yAxis,
-                h(
-                  'div',
-                  {
-                    key: 'plotarea',
-                    className: 'dsh-tokenlens-speed-plot',
-                    'data-speed-plot': 'true',
-                    onMouseMove: handleMove,
-                    onMouseLeave: handleLeave,
-                    onPointerMove: handleMove,
-                    onPointerLeave: handleLeave,
-                  },
-                  svg,
-                  crosshair,
-                  marker,
-                  readout,
-                  axis,
-                ),
+                {
+                  key: 'readout',
+                  className: 'dsh-tokenlens-chart-readout',
+                  'data-speed-readout': 'true',
+                  role: 'status',
+                  style:
+                    hoverIndex === 0
+                      ? { left: '0%' }
+                      : hoverIndex === count - 1
+                        ? { right: '0%' }
+                        : {
+                            left: `${(xOf(hoverIndex) / width) * 100}%`,
+                            transform: 'translateX(-50%)',
+                          },
+                },
+                `${readoutLabel} · ${(hovered.tps ?? 0).toFixed(1)} tok/s`,
+                ` · ${t('statsSpeedDetail', {
+                  tokens: formatTokensPrecise(hovered.outputTokens),
+                  seconds: hovered.seconds.toFixed(1),
+                })}`,
               )
-            })()
+        const axis = h(
+          'div',
+          { key: 'axis', className: 'dsh-tokenlens-speed-axis', 'aria-hidden': 'true' },
+          h('span', { key: 'first' }, dailyMode ? (pointsSeries[0]?.day ?? '') : '00:00'),
+          h('span', { key: 'last' }, dailyMode ? (pointsSeries[count - 1]?.day ?? '') : '23:00'),
+        )
+        return h(
+          'div',
+          { key: 'plot', className: 'dsh-tokenlens-speed-body' },
+          yAxis,
+          h(
+            'div',
+            {
+              key: 'plotarea',
+              className: `dsh-tokenlens-speed-plot${dailyMode ? '' : ' dsh-tokenlens-speed-plot-hourly'}`,
+              'data-speed-mode': dailyMode ? 'day' : 'hour',
+              onMouseMove: handleMove,
+              onMouseLeave: handleLeave,
+              onPointerMove: handleMove,
+              onPointerLeave: handleLeave,
+            },
+            svg,
+            crosshair,
+            marker,
+            readout,
+            axis,
+          ),
+        )
+      }
+
+      // A drilled-in day with no hourly samples explains itself instead of
+      // silently drawing nothing.
+      const allEmpty =
+        pointsSeries.length === 0 || pointsSeries.every((entry) => entry === null || entry === undefined)
+      const body = allEmpty
+        ? h(
+            'div',
+            { key: 'empty', className: 'dsh-tokenlens-chart-empty', 'data-speed-empty': 'true' },
+            h('span', { key: 'hint', className: 'dsh-tokenlens-hint' }, hourlyMode ? t('statsSpeedHourEmpty') : t('statsSpeedEmpty')),
+          )
+        : plotOf()
+
       return h(
         'div',
         { key: 'speed', className: 'dsh-tokenlens-section', 'data-speed-section': 'true' },
         head,
-        h('div', { key: 'hint', className: 'dsh-tokenlens-subtitle' }, t('statsSpeedHint')),
+        h(
+          'div',
+          { key: 'hint', className: 'dsh-tokenlens-subtitle' },
+          dailyMode ? t('statsSpeedHint') : t('statsSpeedHourHint'),
+        ),
         body,
       )
     }
-
     function buildStatsDetails(state, ctx, t) {
       const { stats, hasMonth } = ctx
       if (stats === null) return null

package/index.js

@@ -84,7 +84,7 @@ export const inject = []
 export const PLUGIN_NAME = 'dsh-tokenlens'
 
 /** Plugin version; mirrors package.json (kept here so diagnostics need no fs read). */
-export const PLUGIN_VERSION = '1.7.6'
+export const PLUGIN_VERSION = '1.7.8'
 
 /**
  * Providers whose monthly allowance depends on the SELECTED model (v1.7.6).

package/lib/usage-stats.mjs

@@ -61,7 +61,7 @@ const DECODES_CONCATENATED_FRAMES = (() => {
 const SESSION_FILE = 'session.v4.jsonl.zstd'
 
 /** Cache schema version; a mismatch discards the cache. */
-const CACHE_VERSION = 6
+const CACHE_VERSION = 7
 
 /**
  * How many days the daily series (and therefore the 图表 mode and the
@@ -249,6 +249,9 @@ export function foldSession(records) {
   // `assistant/message.time − step/start.time`: the step's tool calls are emitted
   // AFTER the message, so they do not dilute it.
   const speed = Object.create(null)
+  // v1.7.7: the same samples bucketed per epoch HOUR, so the TPS curve can be
+  // drilled into one day's 24 local hours (mirrors `hours` above).
+  const speedHours = Object.create(null)
   const stepStarts = new Map()
   let latestTime = 0
   let sessionCwd = null
@@ -341,6 +344,13 @@ export function foldSession(records) {
         slot.output += usage.output
         slot.seconds += elapsedMs / 1000
         slot.steps += 1
+        // v1.7.7: the hour bucket reuses `hour`, already computed for the token
+        // histogram, so both drill-downs describe exactly the same slot.
+        const hourSpeed = (speedHours[hour] ??= { providers: Object.create(null) })
+        const hourSlot = (hourSpeed.providers[attributedProvider] ??= { output: 0, seconds: 0, steps: 0 })
+        hourSlot.output += usage.output
+        hourSlot.seconds += elapsedMs / 1000
+        hourSlot.steps += 1
         stepStarts.delete(`${turn}:${step}`)
       }
     }
@@ -361,7 +371,7 @@ export function foldSession(records) {
       if (Number(key) < cutoff) delete hours[key]
     }
   }
-  return { days, providers, models, hours, workspaces, session, speed }
+  return { days, providers, models, hours, workspaces, session, speed, speedHours }
 }
 
 /** Merge one file's folded contribution into an aggregate being built. */
@@ -382,6 +392,16 @@ function mergeFold(aggregate, fold) {
       into.steps += slot.steps
     }
   }
+  // v1.7.7: the hourly speed buckets merge with the hourly token buckets.
+  for (const [hour, hourSpeed] of Object.entries(fold.speedHours ?? {})) {
+    const target = (aggregate.speedHours[hour] ??= { providers: Object.create(null) })
+    for (const [provider, slot] of Object.entries(hourSpeed.providers ?? {})) {
+      const into = (target.providers[provider] ??= { output: 0, seconds: 0, steps: 0 })
+      into.output += slot.output
+      into.seconds += slot.seconds
+      into.steps += slot.steps
+    }
+  }
   for (const [provider, bucket] of Object.entries(fold.providers ?? {})) {
     addBucket((aggregate.providers[provider] ??= emptyBucket()), bucket)
   }
@@ -562,7 +582,18 @@ export function createUsageStats(input) {
     const workspacesAggregate = Object.create(null)
     // v1.7.0: `speedAggregate[day].providers[providerId] = {output, seconds, steps}`
     const speedAggregate = Object.create(null)
+    // v1.7.7: the same, per epoch hour (drives the TPS hour drill-down).
+    const speedHoursAggregate = Object.create(null)
     for (const entry of Object.values(cache.files)) {
+      for (const [hour, hourSpeed] of Object.entries(entry.speedHours ?? {})) {
+        const target = (speedHoursAggregate[hour] ??= { providers: Object.create(null) })
+        for (const [provider, slot] of Object.entries(hourSpeed.providers ?? {})) {
+          const into = (target.providers[provider] ??= { output: 0, seconds: 0, steps: 0 })
+          into.output += typeof slot.output === 'number' ? slot.output : 0
+          into.seconds += typeof slot.seconds === 'number' ? slot.seconds : 0
+          into.steps += typeof slot.steps === 'number' ? slot.steps : 0
+        }
+      }
       for (const [day, daySpeed] of Object.entries(entry.speed ?? {})) {
         const target = (speedAggregate[day] ??= { providers: Object.create(null) })
         for (const [provider, slot] of Object.entries(daySpeed.providers ?? {})) {
@@ -626,6 +657,26 @@ export function createUsageStats(input) {
       }
     }
 
+    // v1.7.7: local-hour OUTPUT-SPEED series per day, for the TPS drill-down.
+    // `speedDayHours[day][providerId]` is 24 `{output, seconds, steps}` slots in
+    // local time, built from the same epoch-hour buckets as the token histogram
+    // so both drill-downs describe the same slot.
+    const daySpeedHours = Object.create(null)
+    for (const [epochHour, bucket] of Object.entries(speedHoursAggregate)) {
+      const hourStart = Number(epochHour) * 3600_000
+      const date = new Date(hourStart)
+      if (!Number.isFinite(date.getTime())) continue
+      const slot = date.getHours()
+      const dayEntry = (daySpeedHours[dayKey(hourStart)] ??= Object.create(null))
+      for (const [provider, sample] of Object.entries(bucket.providers ?? {})) {
+        if (sample === null || typeof sample !== 'object') continue
+        const series = (dayEntry[provider] ??= Array.from({ length: 24 }, () => ({ output: 0, seconds: 0, steps: 0 })))
+        series[slot].output += typeof sample.output === 'number' ? sample.output : 0
+        series[slot].seconds += typeof sample.seconds === 'number' ? sample.seconds : 0
+        series[slot].steps += typeof sample.steps === 'number' ? sample.steps : 0
+      }
+    }
+
     const allTime = emptyBucket()
     for (const bucket of Object.values(providersAggregate)) addBucket(allTime, bucket)
     // Rolling 5-hour window from the hourly DSH buckets.
@@ -791,6 +842,10 @@ export function createUsageStats(input) {
       daily,
       // v1.7.0: raw per-day output-speed samples for the wire builder below.
       speed: speedAggregate,
+      // v1.7.7: per-hour samples, converted to 24 local slots by the composer.
+      speedHours: speedHoursAggregate,
+      // v1.7.7: ready-to-ship 24-slot local-hour speed series per day/provider.
+      speedDayHours: daySpeedHours,
       scan,
     }
   }
@@ -857,6 +912,8 @@ export function createUsageStats(input) {
         workspaces: fold.workspaces,
         // v1.7.0: per-day output-speed samples (CACHE_VERSION 6).
         speed: fold.speed,
+        // v1.7.7: per-hour samples for the TPS drill-down (CACHE_VERSION 7).
+        speedHours: fold.speedHours,
       }
       nextFiles[path] = entry
       scanned += 1
@@ -902,6 +959,8 @@ export function createUsageStats(input) {
       allTime: emptyBucket(),
       providers: [],
       models: [],
+      speed: Object.create(null),
+      speedHours: Object.create(null),
       scan: {
         sessions: 0,
         scanned: 0,
@@ -1390,13 +1449,32 @@ export function createUsageStats(input) {
           daySteps += slot.steps
         }
         if (daySeconds <= 0 || dayOutput <= 0) continue
-        byDay.push({
+        const entry = {
           day,
           outputTokens: dayOutput,
           seconds: Math.round(daySeconds * 10) / 10,
           tps: Math.round((dayOutput / daySeconds) * 10) / 10,
           steps: daySteps,
-        })
+        }
+        // v1.7.7: the day's 24 local-hour slots, for the click-to-drill-down
+        // chart. Only a provider-scoped series carries them: the combined series
+        // is not what the TPS card renders any more.
+        if (providerId !== null) {
+          const slots = dsh.speedDayHours?.[day]?.[providerId]
+          if (Array.isArray(slots)) {
+            entry.hours = slots.map((cell) => {
+              if (cell === null || typeof cell !== 'object') return null
+              if (!(cell.seconds > 0) || !(cell.output > 0)) return null
+              return {
+                outputTokens: cell.output,
+                seconds: Math.round(cell.seconds * 10) / 10,
+                tps: Math.round((cell.output / cell.seconds) * 10) / 10,
+                steps: cell.steps,
+              }
+            })
+          }
+        }
+        byDay.push(entry)
         output += dayOutput
         seconds += daySeconds
         steps += daySteps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-tokenlens",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "type": "module",
   "description": "dsh-TokenLens (词元透镜) — provider-aware plan capacity plus local token statistics (today/7d/30d/all-time, by harness/provider/model/workspace) for DSH.",
   "license": "MIT",