dsh-recent-usage-metrics 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 0.3.6
+
+- `#` 表头的提示加了一行颜色说明：黄色表示缓存命中过低，蓝色表示这一步切换了模型。
+  颜色用色块画出来而不是写成文字，读者按颜色对号即可，不必在脑内翻译一个词。
+  色块与行高亮取同一组主题令牌，两者不会各自漂移。
+
+## 0.3.5
+
+- 修复：模型切换或缓存偏低时，高亮只染了数字列，时间与速度列仍是灰色——那三列各自设置了
+  颜色，把行级颜色挡掉了。现在高亮会覆盖所有单元格，整行才真的变色。
+- 总用时列新增悬浮提示，说明工具调用的用时：`工具调用 3 次 · 串行 12.4 s · 并行合并 5.1 s`。
+  两个口径都报，因为差值正是并行省下的时间。无工具时写「无工具调用」，
+  压缩行写明「压缩上下文不计工具时间」。
+- 总用时的表头提示补上一句「不含工具调用时间」，把口径歧义说清。
+
 ## 0.3.4
 
 - 实时行也能显示模型名了：形态与编号行相同——本步窗口内有 `request/header` 判为切换、

package/README.en.md

@@ -152,7 +152,8 @@ 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 (with thousands separators, e.g. `370,683 tok`) and cache hit rate |
-| Headers | what the column measures (the `#` header draws the four state glyphs) |
+| Time column | how much of the request was tool time, both summed and parallel-merged |
+| Headers | what the column measures (the `#` header draws the four state glyphs and swatches for the two row colours) |
 
 **Row highlights:**
 

package/README.md

@@ -136,7 +136,8 @@ DSH 的极客级请求指标。它在 **设置 → 通用 → 性能与用量**
 | 时间列 | 完整时间戳 `11-06 10:47:41.828` |
 | 速度列 | 该行使用的模型 |
 | 输出 Token 列 | 输入 token（带千分位，如 `370,683 tok`）与缓存命中率 |
-| 表头 | 该列的含义（`#` 一列用图标展示四种状态） |
+| 总用时列 | 工具调用的用时（串行累加与并行合并两个口径）；无工具时说明没有调用 |
+| 表头 | 该列的含义（`#` 一列用图标展示四种状态，并用色块说明两种行高亮的颜色） |
 
 **行高亮：**
 

package/client/client.js

@@ -114,14 +114,20 @@ window.__ModuleLoader__.load({
       hoursAgo: '{count} 小时前',
       // Column-header hints. `{bolt}` / `{tools}` / `{compact}` are replaced by the glyphs
       // themselves, which is why these are rendered by the tooltip component and not by title.
-      hintIndex: '行号：1–10 为已完成的最近记录，{bolt} 为模型输出中，{tools} 为工具调用中，{compact} 为压缩上下文中',
+      hintIndex:
+        '行号：1–10 为已完成的最近记录，{bolt} 为模型输出中，{tools} 为工具调用中，{compact} 为压缩上下文中',
+      hintColour: '整行黄色表示缓存命中过低，蓝色表示这一步切换了模型',
       hintTime: '请求发出的时刻（本地时间）',
       hintTtft: '从发出到收到第一个 token 的耗时',
       hintSpeed: '模型生成速度 = 输出 token ÷ 解码时长',
       hintTokens: '模型本次生成的 token 数',
-      hintTotal: '请求耗时：从发出请求一直到模型输出结束',
+      hintTotal: '请求耗时：从发出请求一直到模型输出结束，不含工具调用时间',
       hintAmortized: '输出 token ÷ 总用时，包含请求时间和响应时间，更加能表明本地到模型输出完整链路的速度',
       tokensHint: '输入 {input} · 缓存命中 {hit}',
+      toolHintOne: '工具调用 {count} 次 · {total}',
+      toolHintTwo: '工具调用 {count} 次 · 串行 {total} · 并行合并 {wall}',
+      toolHintNone: '无工具调用',
+      toolHintCompaction: '压缩上下文不计工具时间',
     }
 
     const en = {
@@ -172,14 +178,20 @@ window.__ModuleLoader__.load({
       secondsAgo: '{count}s ago',
       minutesAgo: '{count}m ago',
       hoursAgo: '{count}h ago',
-      hintIndex: 'Row number: 1–10 are the most recent finished records; {bolt} is a model reply, {tools} is a tool call, {compact} is a context compaction',
+      hintIndex:
+        'Row number: 1–10 are the most recent finished records; {bolt} is a model reply, {tools} is a tool call, {compact} is a context compaction',
+      hintColour: 'A yellow row means a low cache hit; a blue row means this step switched models',
       hintTime: 'When the request was issued (local time)',
       hintTtft: 'Time from issuing the request to receiving its first token',
       hintSpeed: 'Generation speed = output tokens ÷ decode time',
       hintTokens: 'Tokens this reply generated',
-      hintTotal: 'Request time: from issuing the request until the model finished replying',
+      hintTotal: 'Request time: from issuing the request until the model finished replying, not counting tool calls',
       hintAmortized: 'Output tokens ÷ total time, including both queueing and response — the throughput of the whole local-to-model path',
       tokensHint: 'Input {input} · cache hit {hit}',
+      toolHintOne: 'Tool calls: {count} · {total}',
+      toolHintTwo: 'Tool calls: {count} · serial {total} · parallel-merged {wall}',
+      toolHintNone: 'No tool calls',
+      toolHintCompaction: 'A compaction spends no time on tools',
     }
 
     const STYLE_TEXT = `
@@ -450,6 +462,26 @@ window.__ModuleLoader__.load({
   color: var(--dsw-alias-label-tertiary);
   text-align: left;
 }
+/*
+ * A highlighted row colours EVERY cell, not just the ones that inherit.
+ *
+ * The index, clock and primary cells each set their own colour, so without this they stay
+ * grey inside a blue or yellow row and the highlight reads as a stray word rather than as a
+ * whole row. Their own rules stay in place for every unhighlighted row.
+ *
+ * The specificity is deliberately higher than each of those cell rules: one class plus two
+ * attribute selectors beats a plain class selector.
+ */
+.dsh-rum-item[data-switched="true"] .dsh-rum-col,
+.dsh-rum-item[data-switched="true"] .dsh-rum-index,
+.dsh-rum-item[data-switched="true"] .dsh-rum-clock {
+  color: inherit;
+}
+.dsh-rum-item[data-lowcache="true"] .dsh-rum-col,
+.dsh-rum-item[data-lowcache="true"] .dsh-rum-index,
+.dsh-rum-item[data-lowcache="true"] .dsh-rum-clock {
+  color: inherit;
+}
 /*
  * The index cells are flex boxes so a row number and the streaming dot share one alignment
  * rule. With inline content, a 6px dot aligned on the text baseline sits visibly lower than
@@ -611,6 +643,39 @@ window.__ModuleLoader__.load({
 .dsh-rum-tip .dsh-rum-tip-icon {
   color: var(--dsw-alias-brand-primary);
 }
+/*
+ * The index hint is two lines: what the glyphs mean, then what the row colours mean.
+ *
+ * The colour line leads with two swatches instead of naming the hues, so a reader matches a
+ * row against the legend by colour rather than by translating a word. The swatches take the
+ * same tokens the rows take, so the two can never disagreement.
+ */
+.dsh-rum-tip-body {
+  display: block;
+}
+.dsh-rum-tip-line {
+  display: block;
+}
+.dsh-rum-tip-line + .dsh-rum-tip-line {
+  margin-top: 5px;
+}
+.dsh-rum-tip-swatch {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  margin-right: 3px;
+  vertical-align: 0;
+}
+.dsh-rum-tip-swatch + .dsh-rum-tip-swatch {
+  margin-left: 6px;
+}
+.dsh-rum-tip-swatch[data-hue="lowcache"] {
+  background: var(--dsw-alias-state-warn-primary, var(--dsw-alias-state-warn-label));
+}
+.dsh-rum-tip-swatch[data-hue="switched"] {
+  background: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary));
+}
 .dsh-rum-empty {
   flex: 1 1 auto;
   padding: 14px 6px 16px;
@@ -1084,6 +1149,16 @@ window.__ModuleLoader__.load({
         provider: null,
         context: numberOrNull(stats.context),
         cacheRead: numberOrNull(stats.cacheRead),
+        /*
+         * Tool time, for the total column hint. `tool` sums each call from its dispatch to its
+         * result, so three parallel 10 s tools report 30 s; `toolWall` unions the intervals, so
+         * the same three report 10 s. Both are reported because the gap between them is exactly
+         * how much the parallelism bought.
+         */
+        toolMs: numberOrNull(stats.tool),
+        toolWallMs: numberOrNull(stats.toolWall),
+        /** How many calls the step made, from the fold's own call list. */
+        toolCalls: Array.isArray(stats.calls) ? stats.calls.length : null,
         cacheHit: numberOrNull(stats.cacheHit),
       }
     }
@@ -1824,6 +1899,42 @@ window.__ModuleLoader__.load({
       return provider === null ? model : `${provider} / ${model}`
     }
 
+    /**
+     * The total column's hint: how much of the request was tool time.
+     *
+     * Two figures, because they answer different questions. `tool` adds up each call, so it
+     * says how much tool work there was; `toolWall` unions the intervals, so it says how much
+     * wall time the tools occupied. Three parallel 10 s calls are 30 s of work in 10 s of
+     * elapsed time, and the gap is what parallelism bought.
+     *
+     * Neither is part of the total above, which is model time only — the header says so.
+     */
+    function toolHintText(row, t) {
+      if (row.compaction === true) return t('toolHintCompaction')
+      const calls = numberOrNull(row.toolCalls)
+      const serial = numberOrNull(row.toolMs)
+      if (serial === null && calls === null) return t('toolHintNone')
+      if (serial === null) return t('toolHintNone')
+      const wall = numberOrNull(row.toolWallMs)
+      const count = calls === null ? 0 : calls
+      if (wall === null || wall === serial) {
+        return t('toolHintOne', { count, total: secondsValue(serial, t) })
+      }
+      return t('toolHintTwo', {
+        count,
+        total: secondsValue(serial, t),
+        wall: secondsValue(wall, t),
+      })
+    }
+
+    /** A duration as the hint spells it: seconds, one decimal, no unit label of its own. */
+    function secondsValue(ms, t) {
+      if (ms === null || ms === undefined || !Number.isFinite(ms)) return t('none')
+      const seconds = ms / 1000
+      const text = seconds < 100 ? seconds.toFixed(1) : String(Math.round(seconds))
+      return `${text} s`
+    }
+
     /** The tokens column's hint: the input side, which the cell itself does not show. */
     function tokensHintText(row, t) {
       const none = t('none')
@@ -1864,7 +1975,23 @@ window.__ModuleLoader__.load({
         else if (token === '{compact}') nodes.push(glyph(CompactionIcon))
         else nodes.push(token)
       }
-      return h('span', null, ...nodes)
+      /*
+       * The colour legend is its own line, with the two highlights drawn as swatches rather than
+       * named. A reader can then match a row to the legend by colour instead of translating a
+       * word, and the swatches use the same tokens the rows do, so the two cannot drift.
+       */
+      return h(
+        'span',
+        { className: 'dsh-rum-tip-body' },
+        h('span', { className: 'dsh-rum-tip-line' }, ...nodes),
+        h(
+          'span',
+          { className: 'dsh-rum-tip-line' },
+          h('span', { className: 'dsh-rum-tip-swatch', 'data-hue': 'lowcache' }),
+          h('span', { className: 'dsh-rum-tip-swatch', 'data-hue': 'switched' }),
+          t('hintColour'),
+        ),
+      )
     }
 
     /**
@@ -3787,7 +3914,13 @@ window.__ModuleLoader__.load({
                           h('span', { className: 'dsh-rum-col', role: 'cell' }, tokensText(live.tokens, live.estimated === true, t)),
                           h(
                             'span',
-                            { className: 'dsh-rum-col', role: 'cell' },
+                            {
+                              className: 'dsh-rum-col',
+                              role: 'cell',
+                              /* Same hint as the numbered rows, so the meaning never changes. */
+                              onMouseEnter: (event) => hint.show(toolHintText(live, t), event),
+                              onMouseLeave: hint.hide,
+                            },
                             secondsText(
                               live.compaction !== null && live.compaction !== undefined
                                 ? compactionSpan(live.compaction, now)
@@ -3902,7 +4035,17 @@ window.__ModuleLoader__.load({
                         ),
                         h(
                           'span',
-                          { className: 'dsh-rum-col', role: 'cell' },
+                          {
+                            className: 'dsh-rum-col',
+                            role: 'cell',
+                            /*
+                             * The hint explains how much of the request was tool time. The figure
+                             * in the cell deliberately excludes it, which is exactly why the two
+                             * need to be shown together.
+                             */
+                            onMouseEnter: (event) => hint.show(toolHintText(entry.row, t), event),
+                            onMouseLeave: hint.hide,
+                          },
                           secondsText(
                             /*
                              * A running compaction counts up from its own start, exactly as the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-recent-usage-metrics",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "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",