dsh-token-total 1.0.2 → 1.0.3

package/lib/client.js

@@ -5,9 +5,30 @@ window.__ModuleLoader__.load({
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		//#region \0rolldown/runtime.js
+		var __create = Object.create;
+		var __defProp = Object.defineProperty;
+		var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+		var __getOwnPropNames = Object.getOwnPropertyNames;
+		var __getProtoOf = Object.getPrototypeOf;
+		var __hasOwnProp = Object.prototype.hasOwnProperty;
 		var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod, mod.exports), cb = null), mod.exports);
+		var __copyProps = (to, from, except, desc) => {
+			if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+				key = keys[i];
+				if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+			return to;
+		};
+		var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+			value: mod,
+			enumerable: true
+		}) : target, mod));
 		//#endregion
 		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+		_deepseek_ai_dsh_client_ui_primitives = __toESM(_deepseek_ai_dsh_client_ui_primitives, 1);
 		let react = require("react");
 		let react_dom = require("react-dom");
 		let react_jsx_runtime = require("react/jsx-runtime");
@@ -30783,6 +30804,80 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/stats-icons.tsx
+		/**
+		* The stat-pill glyphs.
+		*
+		* The shell freezes its primitives table, and that table's icon names moved
+		* with the host line: 0.2.1-rc.2 exports `IconGaugeOutlineRegular` /
+		* `IconDatabaseOutlineRegular` (plus the `Medium` weight) and no longer
+		* exports the `…Outline16` names this plugin used to import. A missing named
+		* export is `undefined` at runtime, and React then throws "Element type is
+		* invalid" on the entry's first render — the shell's slot boundary catches it,
+		* ABDICATES the entry, and the shadowed official pill silently returns. That
+		* failure mode is invisible in types (the package's own declarations still
+		* describe the old names) and looks exactly like "the plugin did nothing".
+		*
+		* So the glyph is resolved from the runtime table by preference order and
+		* falls back to an inline drawing of the same shape when no name exists, which
+		* keeps one published build rendering on every host line.
+		*/
+		const table = _deepseek_ai_dsh_client_ui_primitives;
+		/** First exported function component among `names`, or null when the shell
+		*  exports none of them (an older or newer icon roster). */
+		function resolveIcon(...names) {
+			for (const name of names) {
+				const candidate = table[name];
+				if (typeof candidate === "function") return candidate;
+			}
+			return null;
+		}
+		const resolvedGauge = resolveIcon("IconGaugeOutlineRegular", "IconGaugeOutlineMedium", "IconGaugeOutline16");
+		const resolvedDatabase = resolveIcon("IconDatabaseOutlineRegular", "IconDatabaseOutlineMedium", "IconDatabaseOutline16");
+		/** Gauge glyph for the activity pill (counts + throughput). */
+		function GaugeIcon() {
+			if (resolvedGauge !== null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(resolvedGauge, {});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				viewBox: "0 0 16 16",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M8 2.5a5.5 5.5 0 0 1 5.5 5.5M8 8l2.6-2.6M2.5 8A5.5 5.5 0 0 1 8 2.5",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.3",
+					strokeLinecap: "round"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "8",
+					cy: "8",
+					r: "1",
+					fill: "currentColor"
+				})]
+			});
+		}
+		/** Database glyph for the token-usage pill. */
+		function DatabaseIcon() {
+			if (resolvedDatabase !== null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(resolvedDatabase, {});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				viewBox: "0 0 16 16",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ellipse", {
+					cx: "8",
+					cy: "3.6",
+					rx: "4.6",
+					ry: "1.9",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.3"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M3.4 3.6v8.8c0 1.05 2.06 1.9 4.6 1.9s4.6-.85 4.6-1.9V3.6M3.4 8c0 1.05 2.06 1.9 4.6 1.9s4.6-.85 4.6-1.9",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.3",
+					strokeLinecap: "round"
+				})]
+			});
+		}
+		//#endregion
 		//#region src/client/stat-dialog.ts
 		/**
 		* One trigger-anchored stat dialog seat for the composer-dock pills.
@@ -30866,29 +30961,51 @@ window.__ModuleLoader__.load({
 		function billedInputTokens(usage) {
 			return usage.uncachedInputTokens + usage.cacheReadTokens + usage.cacheWriteTokens;
 		}
+		/** Round a cache-read ratio to an integer percentage, ties rounded up (official). */
+		function roundedIntegerPercent(cacheReadTokens, denominator) {
+			const denominatorQuotient = Math.floor(denominator / 200);
+			const denominatorRemainder = denominator % 200;
+			let lower = 0;
+			let upper = 100;
+			while (lower < upper) {
+				const candidate = Math.floor((lower + upper + 1) / 2);
+				const factor = candidate * 2 - 1;
+				if (cacheReadTokens >= factor * denominatorQuotient + Math.ceil(factor * denominatorRemainder / 200)) lower = candidate;
+				else upper = candidate - 1;
+			}
+			return lower;
+		}
 		/**
-		* Plugin readout: the same ratio with exactly two decimals (85.25% → "85.25",
-		* full hit → "100.00"); returns the display digits without the percent sign.
+		* Display-ready cache-hit share of prompt-side input (official replica):
+		* integer text when integer rounding stays below 100, otherwise the minimum
+		* decimal precision that still rounds below 100; full hit returns 100, and
+		* no billed input returns null.
 		*/
-		function cacheHitPercentPrecise(usage) {
+		function cacheHitPercent(usage) {
 			const denominator = billedInputTokens(usage);
 			if (denominator === 0) return null;
-			if (usage.uncachedInputTokens + usage.cacheWriteTokens === 0) return "100.00";
-			const percent = Math.round(usage.cacheReadTokens * 1e4 / denominator) / 100;
-			return Math.min(percent, 99.99).toFixed(2);
-		}
-		/** Plugin readout: the five-item breakdown of one usage sample. */
-		function tokenBreakdown(usage) {
-			const cacheHit = usage.cacheReadTokens;
-			const cacheMiss = usage.uncachedInputTokens + usage.cacheWriteTokens;
-			const input = cacheHit + cacheMiss;
-			return {
-				total: input + usage.outputTokens,
-				input,
-				cacheHit,
-				cacheMiss,
-				output: usage.outputTokens
-			};
+			const missedInputTokens = usage.uncachedInputTokens + usage.cacheWriteTokens;
+			if (missedInputTokens === 0) return "100";
+			const integerPercent = roundedIntegerPercent(usage.cacheReadTokens, denominator);
+			if (integerPercent < 100) return String(integerPercent);
+			let decimalPlaces = 1;
+			let scaledDoubleGap = missedInputTokens * 200;
+			const denominatorTens = Math.floor(denominator / 10);
+			while (scaledDoubleGap <= denominatorTens) {
+				scaledDoubleGap *= 10;
+				decimalPlaces += 1;
+			}
+			const denominatorOnes = denominator % 10;
+			let roundedLoss = 5;
+			for (let loss = 1; loss < 5; loss += 1) {
+				const factor = loss * 2 + 1;
+				const threshold = factor * denominatorTens + Math.floor(factor * denominatorOnes / 10);
+				if (scaledDoubleGap <= threshold) {
+					roundedLoss = loss;
+					break;
+				}
+			}
+			return `99.${"9".repeat(decimalPlaces - 1)}${10 - roundedLoss}`;
 		}
 		/** Compact token count: 517 / 12.2K / 517K / 1.2M (official formatTokens).
 		*  Named formatTokensCompact (not formatTokens) — the panel's format.ts
@@ -31285,7 +31402,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0token-total-css:/home/runner/work/dsh-token-total/dsh-token-total/src/client/StatsLineEnhanced.module.css?inline
-		const css$1 = "/* Session stats pills under the composer (shadow of the official StatsPills):\n   a gauge pill (counts + output speed, click opens the time dialog) and a\n   database pill (total tokens + cache hit, click opens the usage dialog).\n   Replicated from the official StatsPills.module_348665330.css_348665330 + stat-dialog.module_348665330.css_348665330\n   (13/20 tertiary tier, hover-pill affordance, shared dialog skin).\n\n   Host contract: the row serves two containers at once, and picks between them\n   at attach time — the component marks which one it landed in (see\n   StatsLineEnhanced's `markDockContainer`):\n   - through 0.1.6-alpha.1 the dock slot renders straight into InputBar's own\n     column, and this row owns the content-width clamp, its side gutters and\n     its 4px top pad — the official StatsPills.module_348665330.css_348665330 of that line;\n   - 0.1.6-alpha.2 renders it inside InputBar's flex `.dock_348665330` beside the resident\n     ContextMeter, which took all three jobs over, so the row only has to\n     shrink inside it (the official stylesheet's current form).\n   Both forms are kept side by side because one published build has to render\n   correctly on either host line. */\n\n.root_348665330 {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n  box-sizing: border-box;\n  /* <= 0.1.6-alpha.1: this row is the composer column's content-width box. */\n  width: 100%;\n  max-width: var(--dsh-chat-content-width);\n  margin: 0 auto;\n  padding: 4px calc(var(--dsh-composer-side-clearance) + 16px) 0px;\n  font-size: var(--dsh-content-font-size-secondary, 13px);\n  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));\n}\n\n/* 0.1.6-alpha.2+: InputBar's `.dock_348665330` owns the centring, the 12px gap, the top\n   pad and the side clearance. */\n.root_348665330[data-dock-row] {\n  width: auto;\n  min-width: 0;\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n}\n\n/* Dialog anchor: shrink-wraps its pill so the panel clamp measures the pill. */\n.anchor_348665330 {\n  display: inline-flex;\n  min-width: 0;\n}\n\n/* Split-mode anchor (DSH >= 0.2.1-alpha.1). The host split the single `stats`\n   dock entry into one entry per pill and let its own `.dock_348665330` flex row own the\n   layout, so the anchor IS the entry root and carries the text tier `.root_348665330`\n   used to set — the official StatsPills.module_348665330.css_348665330 moved exactly this pair of\n   declarations from `.root_348665330` onto `.anchor_348665330`. The tier stays off the plain\n   `.anchor_348665330` because the pre-split row must keep its own `.root_348665330` tier. */\n.dockAnchor_348665330 {\n  font-size: calc(var(--dsh-content-font-size-secondary, 13px) - 1px);\n  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));\n}\n\n.pill_348665330 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  box-sizing: border-box;\n  max-width: 100%;\n  padding: 1px 8px;\n  border: none;\n  border-radius: 24px;\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary);\n  font: inherit;\n  font-variant-numeric: tabular-nums;\n  line-height: inherit;\n  white-space: nowrap;\n}\n\n.pill_348665330 svg {\n  width: 14px;\n  height: 14px;\n  flex: none;\n}\n\n/* Only the button form (a pill with dialog rows to open) invites interaction;\n   the static span form keeps the resting tertiary reading. */\nbutton.pill_348665330 {\n  cursor: pointer;\n}\n\nbutton.pill_348665330:hover,\nbutton.pill_348665330[aria-expanded='true'] {\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-secondary);\n}\n\n.label_348665330 {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sep_348665330 {\n  color: var(--dsw-alias-separator-primary);\n  margin: 0 6px;\n}\n\n/* Reserved slot for the speed figure: the official pill's figure only changes\n   when a step settles, but the live reading refreshes on every beat. A width\n   that tracked the digits would reflow the centred row on each of them and drag\n   the counts pill beside it along; 10ch covers \"1200 tok/s\", the widest shape\n   formatTokensPerSecond can produce. */\n.speed_348665330 {\n  display: inline-block;\n  min-width: 10ch;\n}\n\n/* Marks a usage figure that now includes subagent spend. Deliberately quiet:\n   it rides inside the official pill's label and must not read as a badge or\n   compete with the token count beside it. */\n.subagentMark_348665330 {\n  color: var(--dsw-alias-label-tertiary);\n  font-variant-numeric: tabular-nums;\n}\n\n/* Portal dialog surface: fixed in the viewport, left/top supplied inline from\n   the anchored-position clamp (12px viewport margin, layers above overlays).\n   Material = the official stat-dialog PAIRING, which dsh 0.1.7's menu\n   redesign made mandatory: `--dsw-specific-menu` is translucent there\n   (rgba 58%/45%), so the blur token must ride along — the 0.1.5-era recipe\n   this file copied was a single opaque line, and a fill-only copy reads as\n   bare transparency over the page (issue #6). */\n.dialogPanel_348665330 {\n  position: fixed;\n  z-index: 1100;\n  box-sizing: border-box;\n  width: max-content;\n  min-width: min(300px, calc(100vw - 24px));\n  max-width: min(440px, calc(100vw - 24px));\n  padding: 16px;\n  border: 0;\n  border-radius: 12px;\n  background: var(--dsw-specific-menu);\n  backdrop-filter: var(--dsw-menu-backdrop-filter);\n  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);\n  box-shadow: var(--dsw-elevation-prominent);\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-secondary);\n  cursor: default;\n}\n\n/* Dialog heading row: the section name left, the headline value right. */\n.dialogTitle_348665330 {\n  display: flex;\n  justify-content: space-between;\n  gap: 16px;\n  margin-bottom: 8px;\n  color: var(--dsw-alias-label-primary);\n  font-weight: 500;\n}\n\n/* Rule under the heading, above its rows. */\n.dialogTitleRule_348665330 {\n  margin-bottom: 10px;\n  border-top: 0.5px solid var(--dsw-alias-border-l2);\n}\n\n.dialogTitleValue_348665330 {\n  font-variant-numeric: tabular-nums;\n}\n\n/* Heading glyph seated left of the section name. */\n.dialogTitleLabel_348665330 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n\n.dialogTitleLabel_348665330 svg {\n  width: 14px;\n  height: 14px;\n  flex: none;\n}\n\n.dialogDetails_348665330 {\n  display: grid;\n  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);\n  gap: 6px 16px;\n  margin: 0;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.dialogDetails_348665330 dt,\n.dialogDetails_348665330 dd {\n  min-width: 0;\n  margin: 0;\n}\n\n.dialogDetails_348665330 dd {\n  color: var(--dsw-alias-label-secondary);\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n";
+		const css$1 = "/* Session stats pills under the composer (shadow of the official StatsPills):\n   a gauge pill (counts + output speed, click opens the time dialog) and a\n   database pill (total tokens + cache hit, click opens the usage dialog).\n   Replicated from the official StatsPills.module_348665330.css_348665330 + stat-dialog.module_348665330.css_348665330\n   (13/20 tertiary tier, hover-pill affordance, shared dialog skin).\n\n   Host contract: the row serves two containers at once, and picks between them\n   at attach time — the component marks which one it landed in (see\n   StatsLineEnhanced's `markDockContainer`):\n   - through 0.1.6-alpha.1 the dock slot renders straight into InputBar's own\n     column, and this row owns the content-width clamp, its side gutters and\n     its 4px top pad — the official StatsPills.module_348665330.css_348665330 of that line;\n   - 0.1.6-alpha.2 renders it inside InputBar's flex `.dock_348665330` beside the resident\n     ContextMeter, which took all three jobs over, so the row only has to\n     shrink inside it (the official stylesheet's current form).\n   Both forms are kept side by side because one published build has to render\n   correctly on either host line. */\n\n.root_348665330 {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n  box-sizing: border-box;\n  /* <= 0.1.6-alpha.1: this row is the composer column's content-width box. */\n  width: 100%;\n  max-width: var(--dsh-chat-content-width);\n  margin: 0 auto;\n  padding: 4px calc(var(--dsh-composer-side-clearance) + 16px) 0px;\n  font-size: var(--dsh-content-font-size-secondary, 13px);\n  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));\n}\n\n/* 0.1.6-alpha.2+: InputBar's `.dock_348665330` owns the centring, the 12px gap, the top\n   pad and the side clearance. */\n.root_348665330[data-dock-row] {\n  width: auto;\n  min-width: 0;\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n}\n\n/* Dialog anchor: shrink-wraps its pill so the panel clamp measures the pill. */\n.anchor_348665330 {\n  display: inline-flex;\n  min-width: 0;\n}\n\n/* Split-mode anchor (DSH >= 0.2.1-alpha.1). The host split the single `stats`\n   dock entry into one entry per pill and let its own `.dock_348665330` flex row own the\n   layout, so the anchor IS the entry root and carries the text tier `.root_348665330`\n   used to set — the official StatsPills.module_348665330.css_348665330 moved exactly this pair of\n   declarations from `.root_348665330` onto `.anchor_348665330`. The tier stays off the plain\n   `.anchor_348665330` because the pre-split row must keep its own `.root_348665330` tier. */\n.dockAnchor_348665330 {\n  font-size: var(--dsh-content-font-size-secondary, 13px);\n  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));\n}\n\n.pill_348665330 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  box-sizing: border-box;\n  max-width: 100%;\n  padding: 1px 8px;\n  border: none;\n  border-radius: var(--dsw-radius-sm);\n  background: none;\n  color: var(--dsw-alias-label-tertiary);\n  font: inherit;\n  font-variant-numeric: tabular-nums;\n  line-height: inherit;\n  white-space: nowrap;\n}\n\n.pill_348665330 svg {\n  width: 14px;\n  height: 14px;\n  flex: none;\n}\n\n/* Only the button form (a pill with dialog rows to open) invites interaction;\n   the static span form keeps the resting tertiary reading. */\nbutton.pill_348665330 {\n  cursor: pointer;\n}\n\nbutton.pill_348665330:hover,\nbutton.pill_348665330[aria-expanded='true'] {\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-secondary);\n}\n\n.label_348665330 {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sep_348665330 {\n  color: var(--dsw-alias-separator-primary);\n  margin: 0 6px;\n}\n\n/* The live throughput reading sits inline exactly like the official figure:\n   no reserved width, no box of its own. The earlier `min-width: 10ch` slot kept\n   the centred row from shifting while the number grew, but it also left a\n   permanent gap before the separator — the official pill has no such slot, and\n   native parity wins over that jitter fix. */\n.speed_348665330 {\n  display: inline;\n}\n\n/* Portal dialog surface: fixed in the viewport, left/top supplied inline from\n   the anchored-position clamp (12px viewport margin, layers above overlays).\n   Material = the official stat-dialog PAIRING, which dsh 0.1.7's menu\n   redesign made mandatory: `--dsw-specific-menu` is translucent there\n   (rgba 58%/45%), so the blur token must ride along — the 0.1.5-era recipe\n   this file copied was a single opaque line, and a fill-only copy reads as\n   bare transparency over the page (issue #6). */\n.dialogPanel_348665330 {\n  position: fixed;\n  z-index: 1100;\n  box-sizing: border-box;\n  width: max-content;\n  min-width: min(300px, calc(100vw - 24px));\n  max-width: min(440px, calc(100vw - 24px));\n  padding: 12px;\n  border: 0;\n  border-radius: var(--dsw-radius-lg);\n  background: var(--dsw-specific-menu);\n  backdrop-filter: var(--dsw-menu-backdrop-filter);\n  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);\n  box-shadow: var(--dsw-elevation-prominent);\n  font-size: var(--dsh-content-font-size-secondary, 13px);\n  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));\n  color: var(--dsw-alias-label-secondary);\n  cursor: default;\n}\n\n/* Dialog heading row: the section name left, the headline value right. */\n.dialogTitle_348665330 {\n  display: flex;\n  justify-content: space-between;\n  gap: 16px;\n  margin-bottom: 8px;\n  color: var(--dsw-alias-label-primary);\n  font-weight: 500;\n}\n\n/* Rule under the heading, above its rows. */\n.dialogTitleRule_348665330 {\n  margin-bottom: 8px;\n  border-top: 0.5px solid var(--dsw-alias-border-l2);\n}\n\n.dialogTitleValue_348665330 {\n  font-variant-numeric: tabular-nums;\n}\n\n/* Heading glyph seated left of the section name. */\n.dialogTitleLabel_348665330 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n\n.dialogTitleLabel_348665330 svg {\n  width: 14px;\n  height: 14px;\n  flex: none;\n}\n\n.dialogDetails_348665330 {\n  display: grid;\n  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);\n  gap: 4px 12px;\n  margin: 0;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.dialogDetails_348665330 dt,\n.dialogDetails_348665330 dd {\n  min-width: 0;\n  margin: 0;\n}\n\n.dialogDetails_348665330 dd {\n  color: var(--dsw-alias-label-secondary);\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n";
 		const tagId$1 = "dsh-token-total/StatsLineEnhanced.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + tagId$1 + "\"]") === null) {
 			const tag = document.createElement("style");
@@ -31305,7 +31422,6 @@ window.__ModuleLoader__.load({
 			"label": "label_348665330",
 			"sep": "sep_348665330",
 			"speed": "speed_348665330",
-			"subagentMark": "subagentMark_348665330",
 			"dialogPanel": "dialogPanel_348665330",
 			"dialogTitle": "dialogTitle_348665330",
 			"dialogTitleRule": "dialogTitleRule_348665330",
@@ -31340,9 +31456,12 @@ window.__ModuleLoader__.load({
 		* Which pair to register is read from the dock's entry ledger in
 		* src/client/index.tsx.
 		*
-		* Cache-hit precision, the full session token breakdown and streaming
-		* throughput are always enabled; no stored preferences gate these readouts.
-		* The token dialog includes the cache-miss row alongside every billing bucket.
+		* Streaming throughput is always enabled; no stored preference gates it. The
+		* three columns are style-for-style the official ones: same tier, radius,
+		* colours, same dialog rows and the same integer cache-hit figure. The one
+		* difference is the middle figure's SCOPE — it totals the whole session tree
+		* (this agent plus every subagent it spawned), which the native projection
+		* cannot see.
 		*
 		* Streaming throughput replaces the gauge pill's speed
 		* figure with a live estimate while a step is still streaming and drops back to
@@ -31372,19 +31491,16 @@ window.__ModuleLoader__.load({
 		function anchorClass(dock) {
 			return dock ? `${StatsLineEnhanced_module_default.anchor} ${StatsLineEnhanced_module_default.dockAnchor}` : StatsLineEnhanced_module_default.anchor;
 		}
-		/** The separator + figure shape both speed arms render into the gauge pill.
-		*  The figure sits in a width-reserved slot (css.speed): the live reading
-		*  changes every second, and a slot that tracked its digits would reflow the
-		*  centred row — and with it the counts pill — on every refresh. The slot is
-		*  rendered even with no figure at all (an empty session has no official figure
-		*  to fall back to until its first step settles), so the row's layout never
-		*  depends on whether a number is available. */
+		/** The separator + figure shape both speed arms render into the gauge pill:
+		*  exactly the official pill's inline shape — separator and figure appear only
+		*  when there is a figure, and the figure occupies no reserved width, so the
+		*  row reads and reflows like the native one. */
 		function SpeedFigure({ text }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [text !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: StatsLineEnhanced_module_default.sep,
 				"aria-hidden": true,
 				children: "·"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			}), text !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: StatsLineEnhanced_module_default.speed,
 				"data-stats-speed": true,
 				children: text
@@ -31521,7 +31637,7 @@ window.__ModuleLoader__.load({
 				className: anchorClass(dock),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: StatsLineEnhanced_module_default.pill,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconGaugeOutline16, {}), label]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeIcon, {}), label]
 				})
 			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -31537,7 +31653,7 @@ window.__ModuleLoader__.load({
 					onClick: () => {
 						setOpen(!open);
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconGaugeOutline16, {}), label]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeIcon, {}), label]
 				}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					ref: panelRef,
 					className: StatsLineEnhanced_module_default.dialogPanel,
@@ -31550,7 +31666,7 @@ window.__ModuleLoader__.load({
 							className: StatsLineEnhanced_module_default.dialogTitle,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 								className: StatsLineEnhanced_module_default.dialogTitleLabel,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconGaugeOutline16, {}), t("stats.dialog.title")]
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeIcon, {}), t("stats.dialog.title")]
 							})
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -31573,13 +31689,10 @@ window.__ModuleLoader__.load({
 		}
 		function UsagePill({ usage, tree, t, dialog, dock }) {
 			const { open, setOpen, rootRef, panelRef, pos } = useStatDialog(dialog);
-			const display = sessionUsageForDisplay(usage, tree?.tree ?? null);
-			const subagentTotals = display.subagents;
-			const showSubagents = display.subagentSessions > 0;
-			const billed = display.total;
+			const billed = sessionUsageForDisplay(usage, tree?.tree ?? null).total;
 			const total = billedTotal(billed);
 			const totalText = t("message.turnUsage.count", { count: formatTokensCompact(total) });
-			const cacheHit = cacheHitPercentPrecise(billed);
+			const cacheHit = cacheHitPercent(billed);
 			const cacheHitText = cacheHit !== null ? t("stats.cacheHit", { percent: cacheHit }) : null;
 			const exactCount = (value) => t("message.turnUsage.count", { count: formatTokens(value) });
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -31595,26 +31708,13 @@ window.__ModuleLoader__.load({
 					onClick: () => {
 						setOpen(!open);
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDatabaseOutline16, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatabaseIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: StatsLineEnhanced_module_default.label,
-						children: [
-							totalText,
-							showSubagents && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: StatsLineEnhanced_module_default.sep,
-								"aria-hidden": true,
-								children: "·"
-							}),
-							showSubagents && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: StatsLineEnhanced_module_default.subagentMark,
-								title: t("stats.dialog.subagents"),
-								children: ["+", tree?.tree?.subagentSessions ?? 0]
-							}),
-							cacheHitText !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: StatsLineEnhanced_module_default.sep,
-								"aria-hidden": true,
-								children: "·"
-							}), cacheHitText] })
-						]
+						children: [totalText, cacheHitText !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: StatsLineEnhanced_module_default.sep,
+							"aria-hidden": true,
+							children: "·"
+						}), cacheHitText] })]
 					})]
 				}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					ref: panelRef,
@@ -31628,7 +31728,7 @@ window.__ModuleLoader__.load({
 							className: StatsLineEnhanced_module_default.dialogTitle,
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 								className: StatsLineEnhanced_module_default.dialogTitleLabel,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDatabaseOutline16, {}), t("stats.dialog.usageTitle")]
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatabaseIcon, {}), t("stats.dialog.usageTitle")]
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: StatsLineEnhanced_module_default.dialogTitleValue,
 								children: exactCount(total)
@@ -31647,24 +31747,9 @@ window.__ModuleLoader__.load({
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billed.uncachedInputTokens) }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.cacheRead") }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billed.cacheReadTokens) }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.cacheWrite") }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billed.cacheWriteTokens) }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("stats.cacheMiss") }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(tokenBreakdown(billed).cacheMiss) }),
+								billed.cacheWriteTokens !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.cacheWrite") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billed.cacheWriteTokens) })] }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.output") }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billed.outputTokens) }),
-								showSubagents && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("stats.dialog.main") }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billedTotal(display.self)) }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("stats.dialog.subagents") }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", { children: [
-										exactCount(billedTotal(subagentTotals)),
-										" · ",
-										t("stats.dialog.subagentCount", { count: tree?.tree?.subagentSessions ?? 0 })
-									] }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("stats.dialog.treeTotal") }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billedTotal(billed)) })
-								] })
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billed.outputTokens) })
 							]
 						})
 					]
@@ -31803,7 +31888,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0token-total-css:/home/runner/work/dsh-token-total/dsh-token-total/src/client/ContextUsageEntry.module.css?inline
-		const css = ".root_1877794043 { display: inline-flex; align-items: center; min-width: 0; font: inherit; font-variant-numeric: tabular-nums; line-height: inherit; }\n.trigger_1877794043 { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; max-width: 100%; padding: 1px 8px; border: 0; border-radius: 24px; background: transparent; color: var(--dsw-alias-label-tertiary); font: inherit; line-height: inherit; white-space: nowrap; cursor: pointer; }\n.trigger_1877794043 svg { flex: none; }\n.track_1877794043 { fill: none; stroke: var(--dsw-alias-separator-primary); stroke-width: 1.5; }\n.fill_1877794043 { fill: none; stroke: var(--dsw-alias-label-tertiary); stroke-width: 2; stroke-linecap: round; }\n.trigger_1877794043:hover, .trigger_1877794043[aria-expanded='true'] { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-secondary); }\n.panel_1877794043 { position: fixed; z-index: 1100; box-sizing: border-box; width: max-content; min-width: min(300px, calc(100vw - 24px)); max-width: min(440px, calc(100vw - 24px)); padding: 16px; border-radius: 12px; background: var(--dsw-specific-menu); backdrop-filter: var(--dsw-menu-backdrop-filter); box-shadow: var(--dsw-elevation-prominent); color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; }\n.header_1877794043 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--dsw-alias-label-primary); font-weight: 500; }\n.percent_1877794043 { font-variant-numeric: tabular-nums; }\n.figures_1877794043 { margin-left: auto; color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.bar_1877794043 { display: flex; width: 100%; height: 8px; overflow: hidden; border-radius: 4px; background: var(--dsw-alias-separator-primary); }\n.segment_1877794043 { height: 100%; }\n.systemTokens_1877794043 { background: var(--dsw-alias-label-primary); }\n.toolsTokens_1877794043 { background: var(--dsw-alias-label-secondary); }\n.messageTokens_1877794043 { background: var(--dsw-alias-label-tertiary); }\n.rows_1877794043 { display: grid; gap: 6px; margin: 12px 0 0; color: var(--dsw-alias-label-tertiary); }\n.row_1877794043 { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n.row_1877794043 dt { display: flex; align-items: center; gap: 8px; }\n.row_1877794043 dd { margin: 0; color: var(--dsw-alias-label-secondary); font-variant-numeric: tabular-nums; }\n.swatch_1877794043 { width: 8px; height: 8px; border-radius: 2px; }\n";
+		const css = "/* Mirror the host ContextMeter, including its theme and font-size tokens. */\n.root_1877794043 {\n  flex: none;\n  display: inline-flex;\n}\n\n.trigger_1877794043 {\n  border-radius: var(--dsw-radius-sm);\n  color: var(--dsw-alias-label-tertiary);\n  font-family: inherit;\n  font-size: var(--dsh-content-font-size-secondary, 13px);\n  font-variant-numeric: tabular-nums;\n  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));\n  white-space: nowrap;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  flex: none;\n  align-items: center;\n  gap: 6px;\n  padding: 1px 8px;\n  display: inline-flex;\n}\n\n.trigger_1877794043:hover,\n.trigger_1877794043[aria-expanded='true'] {\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-secondary);\n}\n\n.track_1877794043 {\n  fill: none;\n  stroke: var(--dsw-alias-border-l3);\n  stroke-width: 2px;\n}\n\n.fill_1877794043 {\n  fill: none;\n  stroke: var(--dsw-alias-label-tertiary);\n  stroke-width: 2px;\n  stroke-linecap: round;\n}\n\n.panel_1877794043 {\n  z-index: 1100;\n  box-sizing: border-box;\n  border-radius: var(--dsw-radius-lg);\n  background: var(--dsw-specific-menu);\n  width: min(264px, calc(100vw - 24px));\n  backdrop-filter: var(--dsw-menu-backdrop-filter);\n  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);\n  box-shadow: var(--dsw-elevation-prominent);\n  color: var(--dsw-alias-label-secondary);\n  cursor: default;\n  border: 0;\n  padding: 12px;\n  font-size: 12px;\n  line-height: 20px;\n  position: fixed;\n}\n\n.header_1877794043 {\n  align-items: center;\n  gap: 6px;\n  display: flex;\n}\n\n.figures_1877794043 {\n  font-variant-numeric: tabular-nums;\n  color: var(--dsw-alias-label-primary);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n.percent_1877794043 {\n  color: var(--dsw-alias-label-primary);\n  font-weight: 500;\n}\n\n.headline_1877794043 { color: var(--dsw-alias-label-tertiary); }\n.headline_1877794043:empty { display: none; }\n\n.bar_1877794043 {\n  corner-shape: round;\n  background: var(--dsw-alias-interactive-bg-hover);\n  border-radius: 999px;\n  gap: 1px;\n  height: 4px;\n  margin: 10px 0 12px;\n  display: flex;\n  overflow: hidden;\n}\n\n.segment_1877794043 {\n  background: var(--meter-tint, var(--dsw-alias-label-tertiary));\n  border-radius: 1px;\n  flex: none;\n  min-width: 2px;\n  height: 100%;\n}\n\n.swatch_1877794043 {\n  background: var(--meter-tint);\n  vertical-align: baseline;\n  border-radius: 2px;\n  width: 8px;\n  height: 8px;\n  margin-right: 6px;\n  display: inline-block;\n}\n\n.colorSystem_1877794043 { --meter-tint: var(--dsw-static-neutral-bluish-400); }\n.colorTools_1877794043 { --meter-tint: #a78bfa; }\n.colorMessages_1877794043 { --meter-tint: var(--dsw-static-blue-450); }\n.rows_1877794043 { margin: 6px 0 0; }\n\n.row_1877794043 {\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  padding: 2px 0;\n  display: flex;\n}\n\n.row_1877794043 dt { color: var(--dsw-alias-label-secondary); }\n.row_1877794043 dd {\n  font-variant-numeric: tabular-nums;\n  color: var(--dsw-alias-label-primary);\n  margin: 0;\n}\n";
 		const tagId = "dsh-token-total/ContextUsageEntry.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + tagId + "\"]") === null) {
 			const tag = document.createElement("style");
@@ -31819,16 +31904,17 @@ window.__ModuleLoader__.load({
 			"fill": "fill_1877794043",
 			"panel": "panel_1877794043",
 			"header": "header_1877794043",
-			"percent": "percent_1877794043",
 			"figures": "figures_1877794043",
+			"percent": "percent_1877794043",
+			"headline": "headline_1877794043",
 			"bar": "bar_1877794043",
 			"segment": "segment_1877794043",
-			"systemTokens": "systemTokens_1877794043",
-			"toolsTokens": "toolsTokens_1877794043",
-			"messageTokens": "messageTokens_1877794043",
+			"swatch": "swatch_1877794043",
+			"colorSystem": "colorSystem_1877794043",
+			"colorTools": "colorTools_1877794043",
+			"colorMessages": "colorMessages_1877794043",
 			"rows": "rows_1877794043",
-			"row": "row_1877794043",
-			"swatch": "swatch_1877794043"
+			"row": "row_1877794043"
 		};
 		//#endregion
 		//#region src/client/ContextUsageEntry.tsx
@@ -31836,13 +31922,13 @@ window.__ModuleLoader__.load({
 		const CONTEXT_LOCALES = {
 			zh: {
 				label: "上下文",
-				used: "已用上下文",
+				used: "上下文已用",
 				system: "系统提示词",
-				tools: "工具",
-				messages: "对话",
-				aria: "上下文占用 {percent}",
-				thousand: "{value}千",
-				million: "{value}百万"
+				tools: "工具定义",
+				messages: "对话消息",
+				aria: "上下文已用 {percent}",
+				thousand: "{value}K",
+				million: "{value}M"
 			},
 			en: {
 				label: "Context",
@@ -31900,13 +31986,27 @@ window.__ModuleLoader__.load({
 			if (context === null) return null;
 			const percent = context.percent;
 			const reading = `${percent}%`;
-			const total = breakdown === void 0 ? 0 : breakdown.systemTokens + breakdown.toolsTokens + breakdown.messageTokens;
 			const segments = contextBreakdownSegments(percent, breakdown);
 			const format = (value) => formatContextTokens(value, {
 				thousand: t("thousand"),
 				million: t("million")
 			});
-			const label = (part) => t(part);
+			const [headBefore = "", headAfter = ""] = t("aria", { percent: "\0" }).split("\0").map((part) => part.trim());
+			const rowLabels = [
+				"system",
+				"tools",
+				"messages"
+			];
+			const rowColors = [
+				"colorSystem",
+				"colorTools",
+				"colorMessages"
+			];
+			const segmentColors = {
+				systemTokens: ContextUsageEntry_module_default.colorSystem,
+				toolsTokens: ContextUsageEntry_module_default.colorTools,
+				messageTokens: ContextUsageEntry_module_default.colorMessages
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				ref: rootRef,
 				className: ContextUsageEntry_module_default.root,
@@ -31947,11 +32047,18 @@ window.__ModuleLoader__.load({
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: ContextUsageEntry_module_default.header,
 							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("used") }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: ContextUsageEntry_module_default.headline,
+									children: headBefore
+								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: ContextUsageEntry_module_default.percent,
 									children: reading
 								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: ContextUsageEntry_module_default.headline,
+									children: headAfter
+								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: ContextUsageEntry_module_default.figures,
 									children: `~${format(context.usedTokens)} / ${format(context.contextWindow)}`
@@ -31961,11 +32068,11 @@ window.__ModuleLoader__.load({
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: ContextUsageEntry_module_default.bar,
 							children: segments.map((segment) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: `${ContextUsageEntry_module_default.segment} ${ContextUsageEntry_module_default[segment.key] ?? ""}`,
+								className: segmentColors[segment.key] === void 0 ? ContextUsageEntry_module_default.segment : `${ContextUsageEntry_module_default.segment} ${segmentColors[segment.key]}`,
 								style: { width: `${segment.width}%` }
 							}, segment.key))
 						}),
-						breakdown !== void 0 && total > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+						breakdown !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
 							className: ContextUsageEntry_module_default.rows,
 							children: [
 								"systemTokens",
@@ -31973,11 +32080,7 @@ window.__ModuleLoader__.load({
 								"messageTokens"
 							].map((key, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: ContextUsageEntry_module_default.row,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dt", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${ContextUsageEntry_module_default.swatch} ${ContextUsageEntry_module_default[key]}` }), label([
-									"system",
-									"tools",
-									"messages"
-								][index])] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: `~${format(breakdown[key])}` })]
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dt", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${ContextUsageEntry_module_default.swatch} ${ContextUsageEntry_module_default[rowColors[index]]}` }), t(rowLabels[index])] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: `~${format(breakdown[key])}` })]
 							}, key))
 						})
 					]

package/lib/types/client/stats-icons.d.ts

@@ -0,0 +1,4 @@
+/** Gauge glyph for the activity pill (counts + throughput). */
+export declare function GaugeIcon(): JSX.Element;
+/** Database glyph for the token-usage pill. */
+export declare function DatabaseIcon(): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-token-total",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "DSH web plugin: token 用量统计看板 + 单会话（主智能体 + 子智能体）用量统计。提供今日/近3天/近7天/近1月/近3月/自定义筛选、六个汇总卡片、活跃热力图、缓存命中率折线与分模型柱状图、按模型/按供应商 Top5 列表。",
   "icon": "./icon.svg",
   "type": "module",

package/src/client/ContextUsageEntry.module.css

@@ -1,20 +1,130 @@
-.root { display: inline-flex; align-items: center; min-width: 0; font: inherit; font-variant-numeric: tabular-nums; line-height: inherit; }
-.trigger { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; max-width: 100%; padding: 1px 8px; border: 0; border-radius: 24px; background: transparent; color: var(--dsw-alias-label-tertiary); font: inherit; line-height: inherit; white-space: nowrap; cursor: pointer; }
-.trigger svg { flex: none; }
-.track { fill: none; stroke: var(--dsw-alias-separator-primary); stroke-width: 1.5; }
-.fill { fill: none; stroke: var(--dsw-alias-label-tertiary); stroke-width: 2; stroke-linecap: round; }
-.trigger:hover, .trigger[aria-expanded='true'] { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-secondary); }
-.panel { position: fixed; z-index: 1100; box-sizing: border-box; width: max-content; min-width: min(300px, calc(100vw - 24px)); max-width: min(440px, calc(100vw - 24px)); padding: 16px; border-radius: 12px; background: var(--dsw-specific-menu); backdrop-filter: var(--dsw-menu-backdrop-filter); box-shadow: var(--dsw-elevation-prominent); color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; }
-.header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--dsw-alias-label-primary); font-weight: 500; }
-.percent { font-variant-numeric: tabular-nums; }
-.figures { margin-left: auto; color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
-.bar { display: flex; width: 100%; height: 8px; overflow: hidden; border-radius: 4px; background: var(--dsw-alias-separator-primary); }
-.segment { height: 100%; }
-.systemTokens { background: var(--dsw-alias-label-primary); }
-.toolsTokens { background: var(--dsw-alias-label-secondary); }
-.messageTokens { background: var(--dsw-alias-label-tertiary); }
-.rows { display: grid; gap: 6px; margin: 12px 0 0; color: var(--dsw-alias-label-tertiary); }
-.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
-.row dt { display: flex; align-items: center; gap: 8px; }
-.row dd { margin: 0; color: var(--dsw-alias-label-secondary); font-variant-numeric: tabular-nums; }
-.swatch { width: 8px; height: 8px; border-radius: 2px; }
+/* Mirror the host ContextMeter, including its theme and font-size tokens. */
+.root {
+  flex: none;
+  display: inline-flex;
+}
+
+.trigger {
+  border-radius: var(--dsw-radius-sm);
+  color: var(--dsw-alias-label-tertiary);
+  font-family: inherit;
+  font-size: var(--dsh-content-font-size-secondary, 13px);
+  font-variant-numeric: tabular-nums;
+  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));
+  white-space: nowrap;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  padding: 1px 8px;
+  display: inline-flex;
+}
+
+.trigger:hover,
+.trigger[aria-expanded='true'] {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.track {
+  fill: none;
+  stroke: var(--dsw-alias-border-l3);
+  stroke-width: 2px;
+}
+
+.fill {
+  fill: none;
+  stroke: var(--dsw-alias-label-tertiary);
+  stroke-width: 2px;
+  stroke-linecap: round;
+}
+
+.panel {
+  z-index: 1100;
+  box-sizing: border-box;
+  border-radius: var(--dsw-radius-lg);
+  background: var(--dsw-specific-menu);
+  width: min(264px, calc(100vw - 24px));
+  backdrop-filter: var(--dsw-menu-backdrop-filter);
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  box-shadow: var(--dsw-elevation-prominent);
+  color: var(--dsw-alias-label-secondary);
+  cursor: default;
+  border: 0;
+  padding: 12px;
+  font-size: 12px;
+  line-height: 20px;
+  position: fixed;
+}
+
+.header {
+  align-items: center;
+  gap: 6px;
+  display: flex;
+}
+
+.figures {
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-label-primary);
+  margin-left: auto;
+  font-weight: 500;
+}
+
+.percent {
+  color: var(--dsw-alias-label-primary);
+  font-weight: 500;
+}
+
+.headline { color: var(--dsw-alias-label-tertiary); }
+.headline:empty { display: none; }
+
+.bar {
+  corner-shape: round;
+  background: var(--dsw-alias-interactive-bg-hover);
+  border-radius: 999px;
+  gap: 1px;
+  height: 4px;
+  margin: 10px 0 12px;
+  display: flex;
+  overflow: hidden;
+}
+
+.segment {
+  background: var(--meter-tint, var(--dsw-alias-label-tertiary));
+  border-radius: 1px;
+  flex: none;
+  min-width: 2px;
+  height: 100%;
+}
+
+.swatch {
+  background: var(--meter-tint);
+  vertical-align: baseline;
+  border-radius: 2px;
+  width: 8px;
+  height: 8px;
+  margin-right: 6px;
+  display: inline-block;
+}
+
+.colorSystem { --meter-tint: var(--dsw-static-neutral-bluish-400); }
+.colorTools { --meter-tint: #a78bfa; }
+.colorMessages { --meter-tint: var(--dsw-static-blue-450); }
+.rows { margin: 6px 0 0; }
+
+.row {
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 2px 0;
+  display: flex;
+}
+
+.row dt { color: var(--dsw-alias-label-secondary); }
+.row dd {
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-label-primary);
+  margin: 0;
+}

package/src/client/ContextUsageEntry.tsx

@@ -10,7 +10,7 @@ export const CONTEXT_LOCALE_NS = 'tokenTotalContext'
 const keys = ['label', 'used', 'system', 'tools', 'messages', 'aria', 'thousand', 'million'] as const
 export type ContextLocaleKey = typeof keys[number]
 export const CONTEXT_LOCALES: Record<string, Record<ContextLocaleKey, string>> = {
-  zh: { label: '上下文', used: '已用上下文', system: '系统提示词', tools: '工具', messages: '对话', aria: '上下文占用 {percent}', thousand: '{value}千', million: '{value}百万' },
+  zh: { label: '上下文', used: '上下文已用', system: '系统提示词', tools: '工具定义', messages: '对话消息', aria: '上下文已用 {percent}', thousand: '{value}K', million: '{value}M' },
   en: { label: 'Context', used: 'Context used', system: 'System', tools: 'Tools', messages: 'Conversation', aria: 'Context usage {percent}', thousand: '{value}K', million: '{value}M' },
   'zh-TW': { label: '上下文', used: '已用上下文', system: '系統提示詞', tools: '工具', messages: '對話', aria: '上下文使用量 {percent}', thousand: '{value}千', million: '{value}百萬' },
 }
@@ -50,12 +50,14 @@ export function ContextUsageEntry({ useProjection, t, installContextTakeover }:
   if (context === null) return null
   const percent = context.percent
   const reading = `${percent}%`
-  const total = breakdown === undefined ? 0 : breakdown.systemTokens + breakdown.toolsTokens + breakdown.messageTokens
   const segments = contextBreakdownSegments(percent, breakdown)
   const format = (value: number): string => formatContextTokens(value, {
     thousand: t('thousand'), million: t('million'),
   })
-  const label = (part: 'system' | 'tools' | 'messages'): string => t(part)
+  const [headBefore = '', headAfter = ''] = t('aria', { percent: '\0' }).split('\0').map(part => part.trim())
+  const rowLabels = ['system', 'tools', 'messages'] as const
+  const rowColors = ['colorSystem', 'colorTools', 'colorMessages'] as const
+  const segmentColors: Record<string, string> = { systemTokens: css.colorSystem, toolsTokens: css.colorTools, messageTokens: css.colorMessages }
   return (
     <span ref={rootRef} className={css.root} data-dsh-token-total-stat="context">
       <button type="button" className={css.trigger} aria-label={t('aria', { percent: reading })} aria-haspopup="dialog" aria-expanded={open} onClick={() => setOpen(!open)}>
@@ -68,13 +70,15 @@ export function ContextUsageEntry({ useProjection, t, installContextTakeover }:
       {open && createPortal(
         <div ref={panelRef} className={css.panel} style={position ?? MEASURE_STYLE} role="dialog" aria-label={t('used')}>
           <div className={css.header}>
-            <span>{t('used')}</span><span className={css.percent}>{reading}</span>
+            <span className={css.headline}>{headBefore}</span>
+            <span className={css.percent}>{reading}</span>
+            <span className={css.headline}>{headAfter}</span>
             <span className={css.figures}>{`~${format(context.usedTokens)} / ${format(context.contextWindow)}`}</span>
           </div>
-          <div className={css.bar}>{segments.map(segment => <div key={segment.key} className={`${css.segment} ${css[segment.key] ?? ''}`} style={{ width: `${segment.width}%` }} />)}</div>
-          {breakdown !== undefined && total > 0 && <dl className={css.rows}>
+          <div className={css.bar}>{segments.map(segment => <div key={segment.key} className={segmentColors[segment.key] === undefined ? css.segment : `${css.segment} ${segmentColors[segment.key]}`} style={{ width: `${segment.width}%` }} />)}</div>
+          {breakdown !== undefined && <dl className={css.rows}>
             {(['systemTokens', 'toolsTokens', 'messageTokens'] as const).map((key, index) => <div className={css.row} key={key}>
-              <dt><span className={`${css.swatch} ${css[key]}`} />{label((['system', 'tools', 'messages'] as const)[index])}</dt>
+              <dt><span className={`${css.swatch} ${css[rowColors[index]]}`} />{t(rowLabels[index])}</dt>
               <dd>{`~${format(breakdown[key])}`}</dd>
             </div>)}
           </dl>}

package/src/client/StatsLineEnhanced.module.css

@@ -53,7 +53,7 @@
    declarations from `.root` onto `.anchor`. The tier stays off the plain
    `.anchor` because the pre-split row must keep its own `.root` tier. */
 .dockAnchor {
-  font-size: calc(var(--dsh-content-font-size-secondary, 13px) - 1px);
+  font-size: var(--dsh-content-font-size-secondary, 13px);
   line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));
 }
 
@@ -65,8 +65,8 @@
   max-width: 100%;
   padding: 1px 8px;
   border: none;
-  border-radius: 24px;
-  background: transparent;
+  border-radius: var(--dsw-radius-sm);
+  background: none;
   color: var(--dsw-alias-label-tertiary);
   font: inherit;
   font-variant-numeric: tabular-nums;
@@ -103,22 +103,13 @@ button.pill[aria-expanded='true'] {
   margin: 0 6px;
 }
 
-/* Reserved slot for the speed figure: the official pill's figure only changes
-   when a step settles, but the live reading refreshes on every beat. A width
-   that tracked the digits would reflow the centred row on each of them and drag
-   the counts pill beside it along; 10ch covers "1200 tok/s", the widest shape
-   formatTokensPerSecond can produce. */
+/* The live throughput reading sits inline exactly like the official figure:
+   no reserved width, no box of its own. The earlier `min-width: 10ch` slot kept
+   the centred row from shifting while the number grew, but it also left a
+   permanent gap before the separator — the official pill has no such slot, and
+   native parity wins over that jitter fix. */
 .speed {
-  display: inline-block;
-  min-width: 10ch;
-}
-
-/* Marks a usage figure that now includes subagent spend. Deliberately quiet:
-   it rides inside the official pill's label and must not read as a badge or
-   compete with the token count beside it. */
-.subagentMark {
-  color: var(--dsw-alias-label-tertiary);
-  font-variant-numeric: tabular-nums;
+  display: inline;
 }
 
 /* Portal dialog surface: fixed in the viewport, left/top supplied inline from
@@ -135,15 +126,15 @@ button.pill[aria-expanded='true'] {
   width: max-content;
   min-width: min(300px, calc(100vw - 24px));
   max-width: min(440px, calc(100vw - 24px));
-  padding: 16px;
+  padding: 12px;
   border: 0;
-  border-radius: 12px;
+  border-radius: var(--dsw-radius-lg);
   background: var(--dsw-specific-menu);
   backdrop-filter: var(--dsw-menu-backdrop-filter);
   --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
   box-shadow: var(--dsw-elevation-prominent);
-  font-size: 12px;
-  line-height: 18px;
+  font-size: var(--dsh-content-font-size-secondary, 13px);
+  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));
   color: var(--dsw-alias-label-secondary);
   cursor: default;
 }
@@ -160,7 +151,7 @@ button.pill[aria-expanded='true'] {
 
 /* Rule under the heading, above its rows. */
 .dialogTitleRule {
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   border-top: 0.5px solid var(--dsw-alias-border-l2);
 }
 
@@ -185,7 +176,7 @@ button.pill[aria-expanded='true'] {
 .dialogDetails {
   display: grid;
   grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
-  gap: 6px 16px;
+  gap: 4px 12px;
   margin: 0;
   color: var(--dsw-alias-label-tertiary);
 }

package/src/client/StatsLineEnhanced.tsx

@@ -23,9 +23,12 @@
  * Which pair to register is read from the dock's entry ledger in
  * src/client/index.tsx.
  *
- * Cache-hit precision, the full session token breakdown and streaming
- * throughput are always enabled; no stored preferences gate these readouts.
- * The token dialog includes the cache-miss row alongside every billing bucket.
+ * Streaming throughput is always enabled; no stored preference gates it. The
+ * three columns are style-for-style the official ones: same tier, radius,
+ * colours, same dialog rows and the same integer cache-hit figure. The one
+ * difference is the middle figure's SCOPE — it totals the whole session tree
+ * (this agent plus every subagent it spawned), which the native projection
+ * cannot see.
  *
  * Streaming throughput replaces the gauge pill's speed
  * figure with a live estimate while a step is still streaming and drops back to
@@ -44,14 +47,14 @@
  */
 import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { IconDatabaseOutline16, IconGaugeOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { PropsLocale, SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
+import { DatabaseIcon, GaugeIcon } from './stats-icons.tsx'
 import { LOCALE_NS } from './locales.ts'
 import { MEASURE_STYLE, useStatDialog, type StatDialogSeat } from './stat-dialog.ts'
 import {
-  billedInputTokens, cacheHitPercentPrecise, deriveStats,
+  billedInputTokens, cacheHitPercent, deriveStats,
   estimateOutputTokens, formatDuration, formatTokensCompact, formatTokensPerSecond,
-  measuredTokenScale, StreamingRateSampler, tokenBreakdown,
+  measuredTokenScale, StreamingRateSampler,
   type ConversationNodeLike, type PartialAssistantLike, type UseProjection, type WindowStats,
 } from './stats-line-core.ts'
 import { formatTokens } from './format.ts'
@@ -112,18 +115,15 @@ function anchorClass(dock: boolean): string | undefined {
   return dock ? `${css.anchor} ${css.dockAnchor}` : css.anchor
 }
 
-/** The separator + figure shape both speed arms render into the gauge pill.
- *  The figure sits in a width-reserved slot (css.speed): the live reading
- *  changes every second, and a slot that tracked its digits would reflow the
- *  centred row — and with it the counts pill — on every refresh. The slot is
- *  rendered even with no figure at all (an empty session has no official figure
- *  to fall back to until its first step settles), so the row's layout never
- *  depends on whether a number is available. */
+/** The separator + figure shape both speed arms render into the gauge pill:
+ *  exactly the official pill's inline shape — separator and figure appear only
+ *  when there is a figure, and the figure occupies no reserved width, so the
+ *  row reads and reflows like the native one. */
 function SpeedFigure({ text }: { text: string | null }) {
   return (
     <>
       {text !== null && <span className={css.sep} aria-hidden>·</span>}
-      <span className={css.speed} data-stats-speed>{text}</span>
+      {text !== null && <span className={css.speed} data-stats-speed>{text}</span>}
     </>
   )
 }
@@ -290,7 +290,7 @@ function TimePill({ stats, t, dialog, useChat, scale, dock }: {
     return (
       <span className={anchorClass(dock)}>
         <span className={css.pill}>
-          <IconGaugeOutline16 />
+          <GaugeIcon />
           {label}
         </span>
       </span>
@@ -306,7 +306,7 @@ function TimePill({ stats, t, dialog, useChat, scale, dock }: {
         aria-label={officialTps === null ? counts : counts + ' · ' + officialTps}
         onClick={() => { setOpen(!open) }}
       >
-        <IconGaugeOutline16 />
+        <GaugeIcon />
         {label}
       </button>
       {open && createPortal(
@@ -320,7 +320,7 @@ function TimePill({ stats, t, dialog, useChat, scale, dock }: {
         >
           <div className={css.dialogTitle}>
             <span className={css.dialogTitleLabel}>
-              <IconGaugeOutline16 />
+              <GaugeIcon />
               {t('stats.dialog.title')}
             </span>
           </div>
@@ -372,13 +372,15 @@ function UsagePill({ usage, tree, t, dialog, dock }: {
 }) {
   const { open, setOpen, rootRef, panelRef, pos } = useStatDialog(dialog)
   const display = sessionUsageForDisplay(usage, tree?.tree ?? null)
-  const subagentTotals = display.subagents
-  const showSubagents = display.subagentSessions > 0
   const billed = display.total
   // Same aggregate as the official pill total: every prompt-side billing bucket plus output.
   const total = billedTotal(billed)
   const totalText = t('message.turnUsage.count', { count: formatTokensCompact(total) })
-  const cacheHit = cacheHitPercentPrecise(billed)
+  // Native formatting, one consistent scope: the ratio comes from the same
+  // aggregate the headline uses, so "33M tok · 87%" can never contradict the
+  // number printed beside it. The integer shape and its >99% guard are the
+  // official ones, untouched.
+  const cacheHit = cacheHitPercent(billed)
   const cacheHitText = cacheHit !== null ? t('stats.cacheHit', { percent: cacheHit }) : null
   const exactCount = (value: number): string =>
     t('message.turnUsage.count', { count: formatTokens(value) })
@@ -392,19 +394,13 @@ function UsagePill({ usage, tree, t, dialog, dock }: {
         aria-label={cacheHitText === null ? totalText : totalText + ' · ' + cacheHitText}
         onClick={() => { setOpen(!open) }}
       >
-        <IconDatabaseOutline16 />
+        <DatabaseIcon />
         <span className={css.label}>
           {totalText}
-          {showSubagents && (
-            <span className={css.sep} aria-hidden>·</span>
-          )}
-          {showSubagents && (
-            <span className={css.subagentMark} title={t('stats.dialog.subagents')}>
-              +{tree?.tree?.subagentSessions ?? 0}
-            </span>
-          )}
           {cacheHitText !== null && (
             <>
+              {/* Separator only when the second figure exists: an empty span
+                  would still take the label's gap and read as a trailing dot. */}
               <span className={css.sep} aria-hidden>·</span>
               {cacheHitText}
             </>
@@ -422,12 +418,14 @@ function UsagePill({ usage, tree, t, dialog, dock }: {
         >
           <div className={css.dialogTitle}>
             <span className={css.dialogTitleLabel}>
-              <IconDatabaseOutline16 />
+              <DatabaseIcon />
               {t('stats.dialog.usageTitle')}
             </span>
             <span className={css.dialogTitleValue}>{exactCount(total)}</span>
           </div>
           <div className={css.dialogTitleRule} aria-hidden />
+          {/* Exactly the official dialog's rows, in the official order: the
+              takeover adds the tree to the TOTAL, not to the breakdown. */}
           <dl className={css.dialogDetails} data-session-stats-usage>
             {cacheHit !== null && (
               <>
@@ -439,28 +437,14 @@ function UsagePill({ usage, tree, t, dialog, dock }: {
             <dd>{exactCount(billed.uncachedInputTokens)}</dd>
             <dt>{t('message.turnUsage.cacheRead')}</dt>
             <dd>{exactCount(billed.cacheReadTokens)}</dd>
-            <dt>{t('message.turnUsage.cacheWrite')}</dt>
-            <dd>{exactCount(billed.cacheWriteTokens)}</dd>
-            <dt>{t('stats.cacheMiss')}</dt>
-            <dd>{exactCount(tokenBreakdown(billed).cacheMiss)}</dd>
-            <dt>{t('message.turnUsage.output')}</dt>
-            <dd>{exactCount(billed.outputTokens)}</dd>
-            {/* The split that the native figure cannot show: this session's own
-                main agent against every subagent it delegated to. */}
-            {showSubagents && (
+            {billed.cacheWriteTokens !== 0 && (
               <>
-                <dt>{t('stats.dialog.main')}</dt>
-                <dd>{exactCount(billedTotal(display.self))}</dd>
-                <dt>{t('stats.dialog.subagents')}</dt>
-                <dd>
-                  {exactCount(billedTotal(subagentTotals))}
-                  {' · '}
-                  {t('stats.dialog.subagentCount', { count: tree?.tree?.subagentSessions ?? 0 })}
-                </dd>
-                <dt>{t('stats.dialog.treeTotal')}</dt>
-                <dd>{exactCount(billedTotal(billed))}</dd>
+                <dt>{t('message.turnUsage.cacheWrite')}</dt>
+                <dd>{exactCount(billed.cacheWriteTokens)}</dd>
               </>
             )}
+            <dt>{t('message.turnUsage.output')}</dt>
+            <dd>{exactCount(billed.outputTokens)}</dd>
           </dl>
         </div>,
         document.body,

package/src/client/stats-icons.tsx

@@ -0,0 +1,83 @@
+/**
+ * The stat-pill glyphs.
+ *
+ * The shell freezes its primitives table, and that table's icon names moved
+ * with the host line: 0.2.1-rc.2 exports `IconGaugeOutlineRegular` /
+ * `IconDatabaseOutlineRegular` (plus the `Medium` weight) and no longer
+ * exports the `…Outline16` names this plugin used to import. A missing named
+ * export is `undefined` at runtime, and React then throws "Element type is
+ * invalid" on the entry's first render — the shell's slot boundary catches it,
+ * ABDICATES the entry, and the shadowed official pill silently returns. That
+ * failure mode is invisible in types (the package's own declarations still
+ * describe the old names) and looks exactly like "the plugin did nothing".
+ *
+ * So the glyph is resolved from the runtime table by preference order and
+ * falls back to an inline drawing of the same shape when no name exists, which
+ * keeps one published build rendering on every host line.
+ */
+import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
+
+type IconComponent = () => JSX.Element
+
+const table = primitives as unknown as Record<string, unknown>
+
+/** First exported function component among `names`, or null when the shell
+ *  exports none of them (an older or newer icon roster). */
+function resolveIcon(...names: readonly string[]): IconComponent | null {
+  for (const name of names) {
+    const candidate = table[name]
+    if (typeof candidate === 'function') return candidate as IconComponent
+  }
+  return null
+}
+
+const resolvedGauge = resolveIcon(
+  'IconGaugeOutlineRegular',
+  'IconGaugeOutlineMedium',
+  'IconGaugeOutline16',
+)
+const resolvedDatabase = resolveIcon(
+  'IconDatabaseOutlineRegular',
+  'IconDatabaseOutlineMedium',
+  'IconDatabaseOutline16',
+)
+
+/** Gauge glyph for the activity pill (counts + throughput). */
+export function GaugeIcon(): JSX.Element {
+  if (resolvedGauge !== null) {
+    const Icon = resolvedGauge
+    return <Icon />
+  }
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true">
+      <path
+        d="M8 2.5a5.5 5.5 0 0 1 5.5 5.5M8 8l2.6-2.6M2.5 8A5.5 5.5 0 0 1 8 2.5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.3"
+        strokeLinecap="round"
+      />
+      <circle cx="8" cy="8" r="1" fill="currentColor" />
+    </svg>
+  )
+}
+
+/** Database glyph for the token-usage pill. */
+export function DatabaseIcon(): JSX.Element {
+  if (resolvedDatabase !== null) {
+    const Icon = resolvedDatabase
+    return <Icon />
+  }
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true">
+      <ellipse cx="8" cy="3.6" rx="4.6" ry="1.9" fill="none" stroke="currentColor" strokeWidth="1.3" />
+      <path
+        d="M3.4 3.6v8.8c0 1.05 2.06 1.9 4.6 1.9s4.6-.85 4.6-1.9V3.6M3.4 8c0 1.05 2.06 1.9 4.6 1.9s4.6-.85 4.6-1.9"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.3"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}