dsh-recent-usage-metrics 0.3.2 → 0.3.4

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 0.3.4
+
+- 实时行也能显示模型名了：形态与编号行相同——本步窗口内有 `request/header` 判为切换、
+  直接用它的模型；否则沿用上一步的模型。回复落地后由 `assistant/message.source` 覆盖。
+  实测 3202 步：22 次切换全部命中，沿用 99.84%，唯一缺口是回合第一步且无 header。
+- 实时行补上速度列的悬浮提示。未知时显示破折号而不是「使用对话模型」——后者读起来像
+  一个事实，其实只是插件当时的假设。
+- 新增两种行高亮：模型切换用业务蓝，缓存命中低于 90% 用警告黄。
+  阈值来自实测：2921 条回复的中位数是 99.9%，1% 分位是 92.4%，90% 只标记 0.9% 的行。
+  两者同时成立时文字取警告色、左侧色条保留业务蓝，两个信号都不丢。
+  压缩行不参与缓存高亮——它已在速度列自报家门，且它的缓存数字描述的是重放而非应答。
+- 未上报缓存读取的 provider（如 trae 把缓存并入输入）不会被当作 0% 而误标。
+
+## 0.3.3
+
+- 输出 Token 列的悬浮提示里，输入 token 改为带千分位的完整数字（`370,683 tok`），
+  不再是缩写。单元格本身仍缩写以保持对齐，提示存在的意义正是补回被缩写省掉的精度。
+
 ## 0.3.2
 
 - 修复：速度列的悬浮提示常常拿不到模型名，或显示成别的模型。

package/README.en.md

@@ -151,9 +151,24 @@ Every drawer column and every header carries a hint:
 | --- | --- |
 | Clock column | the full timestamp `11-06 10:47:41.828` |
 | Speed column | the model that served that row |
-| Tokens column | input tokens and cache hit rate |
+| Tokens column | input tokens (with thousands separators, e.g. `370,683 tok`) and cache hit rate |
 | Headers | what the column measures (the `#` header draws the four state glyphs) |
 
+**Row highlights:**
+
+| Trigger | Colour | Frequency |
+| --- | --- | --- |
+| The request switched models | business blue (text + left bar) | 0.7% |
+| Cache hit below 90% | warn yellow (text + left bar) | 0.9% |
+
+When both hold, the text takes the warn colour and the bar keeps the business colour. A
+compaction row never takes the cache highlight.
+
+**Where the model name comes from:** a `request/header` inside the step's window means a switch
+and supplies the model; otherwise the previous step's model carries over, and a landed reply
+overrides both via `assistant/message.source`. The live row follows the same rule, so the model
+is visible while the reply is still streaming.
+
 The hints are a real overlay rather than `title`: `title` can only show plain text, and the
 `#` header has to draw glyphs.
 

package/README.md

@@ -135,9 +135,21 @@ DSH 的极客级请求指标。它在 **设置 → 通用 → 性能与用量**
 | --- | --- |
 | 时间列 | 完整时间戳 `11-06 10:47:41.828` |
 | 速度列 | 该行使用的模型 |
-| 输出 Token 列 | 输入 token 与缓存命中率 |
+| 输出 Token 列 | 输入 token（带千分位，如 `370,683 tok`）与缓存命中率 |
 | 表头 | 该列的含义（`#` 一列用图标展示四种状态） |
 
+**行高亮：**
+
+| 触发 | 颜色 | 实测频率 |
+| --- | --- | --- |
+| 该请求切换了模型 | 业务蓝（文字 + 左侧色条） | 0.7% |
+| 缓存命中低于 90% | 警告黄（文字 + 左侧色条） | 0.9% |
+
+两者同时成立时文字取警告色、色条保留业务蓝。压缩行不参与缓存高亮。
+
+**模型名的来源：** 本步窗口内的 `request/header` 判为切换，否则沿用上一步；回复落地后
+由 `assistant/message.source` 覆盖。实时行同样适用，所以生成期间就能看到模型名。
+
 提示是自建的浮层而不是 `title`：`title` 只能显示纯文本，而 `#` 列的说明要画出图标。
 
 ## 数字是怎么算出来的

package/client/client.js

@@ -481,6 +481,30 @@ window.__ModuleLoader__.load({
 .dsh-rum-live-row {
   background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent);
 }
+/*
+ * Two reasons a finished row is worth a second look.
+ *
+ * Both use the theme's own state tokens, never a literal colour, so they follow dark mode and
+ * any future palette change. The text colour carries the meaning; the left bar makes the row
+ * findable when the drawer is scanned rather than read.
+ *
+ * Cache-outranks-switch: a cold prompt is a performance fact the user can act on, while a model
+ * change is context. When both are true the warn colour wins and the bar keeps the business
+ * colour, so neither signal is lost.
+ */
+.dsh-rum-item[data-switched="true"] {
+  color: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary));
+  box-shadow: inset 2px 0 0 var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary));
+}
+.dsh-rum-item[data-lowcache="true"] {
+  color: var(--dsw-alias-state-warn-primary, var(--dsw-alias-state-warn-label));
+  box-shadow: inset 2px 0 0 var(--dsw-alias-state-warn-primary, var(--dsw-alias-state-warn-label));
+}
+/* The bar keeps the switch signal when a cold prompt outranks it in the text. */
+.dsh-rum-item[data-switched="true"][data-lowcache="true"] {
+  color: var(--dsw-alias-state-warn-primary, var(--dsw-alias-state-warn-label));
+  box-shadow: inset 2px 0 0 var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary));
+}
 /*
  * The streaming marker: the same bolt the status pill pulses, sized for the index column.
  *
@@ -1196,11 +1220,98 @@ window.__ModuleLoader__.load({
         const provider = typeof meta.provider === 'string' && meta.provider !== '' ? meta.provider : null
         if (model === null && provider === null) continue
         if (typeof node.turn !== 'number' || typeof node.step !== 'number') continue
-        index.set(`${node.turn}:${node.step}`, { provider, model })
+        index.set(`${node.turn}:${node.step}`, { provider, model, switched: false, source: 'trajectory' })
       }
       return index
     }
 
+    /**
+     * Which model a step used, and whether that request changed models.
+     *
+     * A `request/header` is written only when the routed model or tool set CHANGES, so its
+     * placement is itself the signal:
+     *
+     * - inside a step's own seq window (from its `step/start` to the next one) → this request
+     *   changed the routed configuration, and the header names the model it switched to;
+     * - absent → the step reused whatever was already routed, so it inherits the previous
+     *   step's model.
+     *
+     * Measured on a real 3202-step session: 22 steps carried a header and all 22 were genuine
+     * switches; 3180 inherited, of which every one with a known predecessor matched the model
+     * the reply later reported. The only gaps are a turn's first step with no header, where
+     * nothing earlier is known and the model stays null.
+     *
+     * A finished reply overrides both, because `assistant/message.source` is the authority.
+     */
+    function modelPlanFromStats(statsSnapshot, known) {
+      const plan = new Map()
+      const turns = statsSnapshot?.turns
+      if (!Array.isArray(turns)) return plan
+      for (const turn of turns) {
+        if (!Array.isArray(turn.steps)) continue
+        const headers = []
+        if (Array.isArray(turn.events)) {
+          for (const event of turn.events) {
+            if (event?.kind !== 'request-header') continue
+            const at = numberOrNull(event.time)
+            if (at === null) continue
+            if (typeof event.model !== 'string' && typeof event.provider !== 'string') continue
+            headers.push({ time: at, provider: event.provider ?? null, model: event.model ?? null })
+          }
+          headers.sort((left, right) => left.time - right.time)
+        }
+        const starts = []
+        for (const step of turn.steps) {
+          const at = numberOrNull(step.startTime)
+          if (at === null || typeof step.step !== 'number') continue
+          starts.push({ at, step: step.step })
+        }
+        if (starts.length === 0) continue
+        starts.sort((left, right) => left.at - right.at)
+
+        /*
+         * The model currently in force, carried forward while the plan is built.
+         *
+         * A step whose header names a switch becomes the new carrier, so the step AFTER it
+         * inherits the switched-to model — not the one before the switch, which `known` alone
+         * would give.
+         */
+        let inForce = null
+
+        for (let i = 0; i < starts.length; i += 1) {
+          const key = `${turn.turn}:${starts[i].step}`
+          const from = starts[i].at
+          const until = i + 1 < starts.length ? starts[i + 1].at : Number.POSITIVE_INFINITY
+          let inside = null
+          for (const header of headers) {
+            if (header.time < from) continue
+            if (header.time >= until) break
+            inside = header
+          }
+          if (inside !== null) {
+            // The header was written for THIS request, so the model changed here.
+            inForce = { provider: inside.provider, model: inside.model }
+            plan.set(key, { provider: inside.provider, model: inside.model, switched: true, source: 'header' })
+            continue
+          }
+          /*
+           * No header: inherit. A finished reply outranks the carried model, because
+           * `assistant/message.source` is the authority for a step that has settled.
+           */
+          const settled = known === undefined ? undefined : known.get(key)
+          if (settled !== undefined && settled.model !== null) {
+            inForce = { provider: settled.provider, model: settled.model }
+            plan.set(key, { provider: settled.provider, model: settled.model, switched: false, source: 'reply' })
+            continue
+          }
+          if (inForce !== null) {
+            plan.set(key, { provider: inForce.provider, model: inForce.model, switched: false, source: 'inherit' })
+          }
+        }
+      }
+      return plan
+    }
+
     /**
      * Whether any step started after this compaction finished.
      *
@@ -1256,17 +1367,23 @@ window.__ModuleLoader__.load({
      */
     function historyFromStats(statsSnapshot, models) {
       const steps = statsSteps(statsSnapshot)
+      /*
+       * `models` carries the per-step attribution worked out from the trajectory nodes and the
+       * turn's request headers. It answers two questions at once: which model, and whether this
+       * request changed it — the drawer colours a row for the second.
+       */
+      const plan = modelPlanFromStats(statsSnapshot, models)
       const rows = []
       for (const entry of steps) {
         // A step only has a row once it has started; `step/start` is what supplies this.
         if (numberOrNull(entry.metrics.startTime) === null) continue
         if (!statsStepHasFigures(entry.metrics)) continue
         const row = readingOfStatsStep(entry)
-        // Attribute the request to the model that served it, for the speed column's tooltip.
-        const owner = models === undefined ? undefined : models.get(row.key)
+        const owner = plan.get(row.key) ?? (models === undefined ? undefined : models.get(row.key))
         if (owner !== undefined) {
           row.model = owner.model
           row.provider = owner.provider
+          row.switched = owner.switched === true
         }
         rows.push(row)
       }
@@ -1529,6 +1646,55 @@ window.__ModuleLoader__.load({
       return approximate ? t('approxTokensUnit', { value: rounded }) : t('tokensUnit', { value: rounded })
     }
 
+    /**
+     * Cache-hit rate below which a row is worth flagging.
+     *
+     * Measured over 2921 replies in a real session: the median is 99.9% and the 1st percentile
+     * is 92.4%, because a warm conversation re-reads its prefix almost every time. 90% therefore
+     * marks a genuinely cold request rather than ordinary variation, and flags only 0.9% of rows.
+     * A threshold at 70% would flag 0.6% — nearly the same rows, with less headroom above the
+     * noise.
+     */
+    const LOW_CACHE_HIT = 0.9
+
+    /**
+     * Whether a row should be drawn as a low-cache-hit row.
+     *
+     * Only a REPORTED rate counts. A provider that folds cache reads into its input count (trae
+     * does) reports none, and treating "not reported" as "0%" would flag every one of its rows.
+     * A compaction is excluded: it already announces itself in the speed column, and its cache
+     * figure describes replaying the conversation rather than serving a request.
+     */
+    function isLowCacheHit(row) {
+      if (row.compaction === true) return false
+      const rate = numberOrNull(row.cacheHit)
+      if (rate === null) return false
+      return rate < LOW_CACHE_HIT
+    }
+
+    /**
+     * A whole token count with thousands separators, for a hover hint.
+     *
+     * The cell itself has to stay narrow, so it abbreviates (`4.9k tok`). The hint has room, and
+     * a reader comparing an input of 370683 against one of 1914 needs the exact digits — `370k`
+     * and `371k` would hide the difference.
+     *
+     * The separator is a comma in both languages this plugin ships, so it is written out rather
+     * than derived from the host locale: that keeps the hint identical in zh and en, and avoids
+     * depending on a locale tag the slot props do not provide.
+     */
+    function tokensExact(value, t) {
+      if (value === null || value === undefined || !Number.isFinite(value)) return t('none')
+      const digits = String(Math.round(Math.abs(value)))
+      let grouped = ''
+      for (let i = 0; i < digits.length; i += 1) {
+        const fromEnd = digits.length - i
+        grouped += digits[i]
+        if (fromEnd > 1 && (fromEnd - 1) % 3 === 0) grouped += ','
+      }
+      return t('tokensUnit', { value: value < 0 ? `-${grouped}` : grouped })
+    }
+
     function clockText(at) {
       const date = new Date(at)
       if (Number.isNaN(date.getTime())) return '—'
@@ -1638,19 +1804,34 @@ window.__ModuleLoader__.load({
       )
     }
 
-    /** The speed column's hint: which model served this row. */
+    /**
+     * The speed column's hint: which model served this row.
+     *
+     * A request with no attribution shows the dash rather than a guess. "Chat model" would read
+     * as a fact about the request when it is only what the plugin would have assumed, and a
+     * wrong model name is worse than none — that is the whole reason this column stopped
+     * borrowing `request/header` rows.
+     *
+     * A compaction is different: it does not "have no model", it has one that is only reported
+     * once the summary lands, so while it runs the generic wording is honest.
+     */
     function modelHintText(row, t) {
       if (row.compaction === true) return compactionModelName(row, t)
       const model = typeof row.model === 'string' && row.model !== '' ? row.model : null
       const provider = typeof row.provider === 'string' && row.provider !== '' ? row.provider : null
-      if (model === null) return t('usingChatModel')
+      if (model === null && provider === null) return t('none')
+      if (model === null) return provider
       return provider === null ? model : `${provider} / ${model}`
     }
 
     /** The tokens column's hint: the input side, which the cell itself does not show. */
     function tokensHintText(row, t) {
       const none = t('none')
-      const input = row.context === null || row.context === undefined ? none : tokensText(row.context, false, t)
+      /*
+       * The input is spelled out with thousands separators; the cell above it abbreviates. The
+       * hint exists precisely for the cases where the abbreviation loses information.
+       */
+      const input = row.context === null || row.context === undefined ? none : tokensExact(row.context, t)
       const hit =
         row.cacheHit === null || row.cacheHit === undefined
           ? none
@@ -2131,6 +2312,7 @@ window.__ModuleLoader__.load({
       sessionTurnOpen,
       sessionRunning,
       sessionStats,
+      models,
     ) {
       const partial = useChat((snapshot) => snapshot.legacy.partial)
       const nodes = useChat((snapshot) => snapshot.legacy.nodes)
@@ -2314,6 +2496,20 @@ window.__ModuleLoader__.load({
        *    lag the fold.
        * 3. Reconstruction from the previous step's last tool result, then the turn's start.
        */
+      /*
+       * The model for the running step, worked out the same way the drawer does it: a header
+       * written inside this step names a switch, otherwise the previous step's model carries
+       * over. A finished reply overrides both, which is why the plan prefers it.
+       *
+       * This is what lets the live row show a model while it is still streaming instead of
+       * waiting for `assistant/message` to land.
+       */
+      const livePlan =
+        sessionStats === undefined ? undefined : modelPlanFromStats(sessionStats, models)
+      const liveOwner =
+        liveStep === null || livePlan === undefined
+          ? undefined
+          : livePlan.get(`${liveStep.turn}:${liveStep.step}`)
       /*
        * A compaction has no step to measure, so the reading is built from the compaction alone:
        * its own clock, its own span and its own model. Returning here keeps every step-shaped
@@ -2419,6 +2615,9 @@ window.__ModuleLoader__.load({
               : null,
           replyLanded: true,
           phase: livePhase,
+          model: liveOwner?.model ?? null,
+          provider: liveOwner?.provider ?? null,
+          switched: liveOwner?.switched === true,
           compaction: activeCompaction,
         }
       }
@@ -2445,6 +2644,9 @@ window.__ModuleLoader__.load({
         amortized: tokens > 0 && elapsedMs !== null && elapsedMs > 0 ? tokens / (elapsedMs / 1000) : null,
         replyLanded: false,
         phase: livePhase,
+        model: liveOwner?.model ?? null,
+        provider: liveOwner?.provider ?? null,
+        switched: liveOwner?.switched === true,
           compaction: activeCompaction,
       }
     }
@@ -2909,6 +3111,14 @@ window.__ModuleLoader__.load({
         return last.running !== false
       }, [sessionStats])
       const chatNodes = useChat((snapshot) => snapshot.legacy.nodes)
+      /*
+       * The per-step model attribution, computed once and shared by the live reading and the
+       * history so the two can never disagree about which model a step used.
+       */
+      const models = useMemo(
+        () => modelIndexFromTrajectory(trajectory),
+        [trajectory],
+      )
       const live = useLiveReading(
         useChat,
         geek,
@@ -2917,6 +3127,7 @@ window.__ModuleLoader__.load({
         sessionTurnOpen,
         sessionRunning,
         sessionStats,
+        models,
       )
 
       const triggerRef = useRef(null)
@@ -2960,8 +3171,8 @@ window.__ModuleLoader__.load({
         () =>
           sessionStats === undefined
             ? undefined
-            : historyFromStats(sessionStats, modelIndexFromTrajectory(trajectory)),
-        [sessionStats, trajectory],
+            : historyFromStats(sessionStats, models),
+        [sessionStats, models],
       )
       /*
        * Fallback for a composition without the statistics target: derive rows from the Chat
@@ -3485,7 +3696,17 @@ window.__ModuleLoader__.load({
                     live !== null
                       ? h(
                           'div',
-                          { className: 'dsh-rum-row dsh-rum-live-row', role: 'row' },
+                          {
+                            className: 'dsh-rum-row dsh-rum-live-row',
+                            role: 'row',
+                            /*
+                             * The live row carries the same two highlights as a settled one, so a
+                             * model switch is visible the moment the request starts rather than
+                             * only once its row is numbered.
+                             */
+                            'data-switched': live.switched === true ? 'true' : undefined,
+                            'data-lowcache': isLowCacheHit(live) ? 'true' : undefined,
+                          },
                           /*
                            * A pulsing dot, no word.
                            *
@@ -3547,7 +3768,18 @@ window.__ModuleLoader__.load({
                           h('span', { className: 'dsh-rum-col', role: 'cell' }, secondsText(live.ttftMs, t)),
                           h(
                             'span',
-                            { className: 'dsh-rum-col dsh-rum-primary', role: 'cell' },
+                            {
+                              className: 'dsh-rum-col dsh-rum-primary',
+                              role: 'cell',
+                              /*
+                               * The same hint the numbered rows carry: which model is answering.
+                               * A compaction names its own summarizer; a request names the model
+                               * the plan worked out, and falls back to the generic wording while
+                               * nothing is known yet — a turn's first step with no header.
+                               */
+                              onMouseEnter: (event) => hint.show(modelHintText(live, t), event),
+                              onMouseLeave: hint.hide,
+                            },
                             live.compaction !== null && live.compaction !== undefined
                               ? t('compactionSpeed')
                               : speedText(live.speed, live.estimated === true, t),
@@ -3579,6 +3811,14 @@ window.__ModuleLoader__.load({
                             'dsh-rum-row dsh-rum-item' +
                             (entry.row.compaction === true ? ' dsh-rum-compaction-row' : ''),
                           'data-phase': entry.phase,
+                          /*
+                           * Two independent highlights. A request that changed the routed model
+                           * gets the business colour; one whose cache hit fell below the threshold
+                           * gets the warn colour. Both are attributes rather than inline colours so
+                           * the stylesheet owns the tokens and the dark-mode behaviour.
+                           */
+                          'data-switched': entry.row.switched === true ? 'true' : undefined,
+                          'data-lowcache': isLowCacheHit(entry.row) ? 'true' : undefined,
                           role: 'row',
                         },
                         /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-recent-usage-metrics",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Geek level for the Performance & usage setting: a live reading of the newest request (first-token latency, speed, tokens, total, amortised) plus a drawer listing the last ten, all derived from the shipped Statistics view data",
   "repository": {
     "type": "git",