dsh-recent-usage-metrics 0.3.5 → 0.3.6

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 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,9 @@ 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 ÷ 解码时长',
@@ -176,7 +178,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',
+      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',
@@ -639,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;
@@ -1938,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'),
+        ),
+      )
     }
 
     /**

package/package.json

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