dsh-recent-usage-metrics 0.3.5 → 0.3.7

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 0.3.7
+
+- `#` 表头的提示拆成三行：最近记录、三个状态图标、两种行颜色。原来挤成一句，
+  三件事连在一起读起来费劲。
+- 实时行不再显示总用时的工具提示。还在跑的请求尚未结算工具时间，提示只能给出
+  「无工具调用」或一个不完整的数，对一个仍在进行的请求都是错的；行结算后再出现。
+
+## 0.3.6
+
+- `#` 表头的提示加了一行颜色说明：黄色表示缓存命中过低，蓝色表示这一步切换了模型。
+  颜色用色块画出来而不是写成文字，读者按颜色对号即可，不必在脑内翻译一个词。
+  色块与行高亮取同一组主题令牌，两者不会各自漂移。
+
 ## 0.3.5
 
 - 修复：模型切换或缓存偏低时，高亮只染了数字列，时间与速度列仍是灰色——那三列各自设置了

package/README.en.md

@@ -153,7 +153,7 @@ Every drawer column and every header carries a hint:
 | Speed column | the model that served that row |
 | Tokens column | input tokens (with thousands separators, e.g. `370,683 tok`) and cache hit rate |
 | 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) |
+| Headers | what the column measures (the `#` header draws the four state glyphs and swatches for the two row colours) |
 
 **Row highlights:**
 

package/README.md

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

package/client/client.js

@@ -114,7 +114,14 @@ 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} 为压缩上下文中',
+      /*
+       * The index hint is three lines: what the column holds, what the glyphs mean, then what
+       * the row colours mean. Splitting them keeps each line short enough to read at a glance
+       * instead of being one long sentence the eye has to parse.
+       */
+      hintIndexRows: '行号：1–10 为已完成的最近记录',
+      hintIndexGlyphs: '{bolt} 为模型输出中，{tools} 为工具调用中，{compact} 为压缩上下文中',
+      hintColour: '整行黄色表示缓存命中过低，蓝色表示这一步切换了模型',
       hintTime: '请求发出的时刻（本地时间）',
       hintTtft: '从发出到收到第一个 token 的耗时',
       hintSpeed: '模型生成速度 = 输出 token ÷ 解码时长',
@@ -176,7 +183,9 @@ 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',
+      hintIndexRows: 'Row number: 1–10 are the most recent finished records',
+      hintIndexGlyphs: '{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',
@@ -639,6 +648,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;
@@ -1924,21 +1966,41 @@ window.__ModuleLoader__.load({
     function indexHint(t) {
       const glyph = (Icon) => h(Icon, { className: 'dsh-rum-tip-icon' })
       /*
-       * Split on every placeholder first, then walk the pieces: a string piece is literal text,
-       * a placeholder becomes its glyph. Walking once over a token list is simpler to follow
-       * than nesting one split per placeholder.
+       * Turn one sentence into elements, replacing each glyph placeholder with the glyph itself.
+       * A single pass over a token list is simpler to follow than nesting one split per
+       * placeholder, and it keeps the placeholders in whatever order a translation uses.
        */
-      const tokens = t('hintIndex').split(/(\{bolt\}|\{tools\}|\{compact\})/)
-      const nodes = []
-      for (let i = 0; i < tokens.length; i += 1) {
-        const token = tokens[i]
-        if (token === '') continue
-        if (token === '{bolt}') nodes.push(glyph(BoltIcon))
-        else if (token === '{tools}') nodes.push(glyph(ToolIcon))
-        else if (token === '{compact}') nodes.push(glyph(CompactionIcon))
-        else nodes.push(token)
+      const withGlyphs = (text) => {
+        const tokens = text.split(/(\{bolt\}|\{tools\}|\{compact\})/)
+        const nodes = []
+        for (const token of tokens) {
+          if (token === '') continue
+          if (token === '{bolt}') nodes.push(glyph(BoltIcon))
+          else if (token === '{tools}') nodes.push(glyph(ToolIcon))
+          else if (token === '{compact}') nodes.push(glyph(CompactionIcon))
+          else nodes.push(token)
+        }
+        return nodes
       }
-      return h('span', null, ...nodes)
+      /*
+       * Three lines: what the column holds, 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 cannot drift apart.
+       */
+      return h(
+        'span',
+        { className: 'dsh-rum-tip-body' },
+        h('span', { className: 'dsh-rum-tip-line' }, t('hintIndexRows')),
+        h('span', { className: 'dsh-rum-tip-line' }, ...withGlyphs(t('hintIndexGlyphs'))),
+        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'),
+        ),
+      )
     }
 
     /**
@@ -3859,15 +3921,17 @@ window.__ModuleLoader__.load({
                               : speedText(live.speed, live.estimated === true, t),
                           ),
                           h('span', { className: 'dsh-rum-col', role: 'cell' }, tokensText(live.tokens, live.estimated === true, t)),
+                          /*
+                           * No hint on the live row's total.
+                           *
+                           * A running request has not reported its tool time yet, so the only
+                           * possible readings are "no tools" or a partial count — both would be
+                           * wrong about a request that is still going. The hint appears when the
+                           * row settles and the fold has the real figures.
+                           */
                           h(
                             'span',
-                            {
-                              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,
-                            },
+                            { className: 'dsh-rum-col', role: 'cell' },
                             secondsText(
                               live.compaction !== null && live.compaction !== undefined
                                 ? compactionSpan(live.compaction, now)

package/package.json

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