dsh-usage-state 0.4.2 → 0.4.3

package/README.en.md

@@ -63,9 +63,9 @@ A very long provider name never pushes the controls around: the card header stay
 
 ## Screenshots
 
-The reading directly below the composer's stats row (shown here with OpenCode Zen Go's three windows; hover any segment for source, mode and the absolute reset time):
+The reading on its own line above the composer (shown here with OpenCode Zen Go's three windows; the row under the card is DSH's own statistics, untouched by this plugin — hover any segment for source, mode and the absolute reset time):
 
-![The reading below the composer](https://raw.githubusercontent.com/takboo/dsh-usage-state/main/assets/screenshots/status-line.webp)
+![The reading on its own line above the composer](https://raw.githubusercontent.com/takboo/dsh-usage-state/main/assets/screenshots/status-line.webp)
 
 Settings: one row per provider; **Auto** detects the data source and its primary mode:
 
@@ -92,7 +92,7 @@ Expanding **Advanced** lets you override the source and endpoint, name a credent
 ## Display, refresh, credentials
 
 - **Placement**: directly below the composer's stats row, aligned with the native row's geometry. The line is always visible — it never depends on hover or a click.
-- **Elements**: provider label · balance + currency · each window (5h / 7d / 30d) used % · reset countdown · mini progress bar · threshold colours (defaults: amber ≥80%, red ≥95%).
+- **Elements**: provider label · balance + currency · each window (5h / 7d / 30d) used % · reset countdown · mini progress ring · threshold colours (defaults: amber ≥80%, red ≥95%).
 - **Semantics**: percentages are always *used*; balances only appear in API mode, and coding-plan mode shows the windows the source actually has (5h / 7d for z.ai and Sub2API, plus 30d for OpenCode Zen Go); a stale reading shows its age instead of hiding.
 - **Refresh**: 2s after a turn ends, plus a 5-minute idle fallback; at most one real request per source per 60s, in-flight calls are shared, failures are not throttled.
 - **Credentials**: override → the provider's declared `apiKeyEnv` → the source's built-in ref → DSH credential store. Keys are written to `~/.dsh/.credentials.yaml`; **this plugin never stores a plaintext key** and the browser never receives a key value.
@@ -124,6 +124,28 @@ npm run build        # tsdown → lib/ (host index.js + typert.js, browser clien
 npm run watch        # rebuilds client.js only; client changes hot-reload, no page refresh
 ```
 
+**Local loop (no release needed)**: `scripts/dev-local.sh` creates a throwaway profile under `/tmp/dsh-dev` (override with `DSH_HOME`), installs this repository into it as a `link:` and boots a host on its own port with the Desktop app's bundled CLI. Your real profiles are never touched.
+
+```bash
+npm run build                 # lib/ must exist
+scripts/dev-local.sh          # creates/reuses the dev profile, prints the token URL
+# second terminal:
+npm run watch                 # rebuilds client.js on save
+```
+
+Because the profile links this working tree, a rebuild is picked up by the running host: client changes are hot-swapped by `dsh-client-hmr` (the host stat-polls every bundle at 500ms and tells the browser to reload the module over `/plugins/events`) — no restart, no release. Host-side changes (`src/host/**`, `src/index.ts`, `cordis.patch.yml`) need this script restarted.
+
+⚠️ **This profile has no credentials**: `$DSH_HOME/.credentials.yaml` is home-level, and a fresh home starts without keys and without your other plugins (a font plugin changes the very glyph metrics a layout depends on). It is for **structural / host-side** checks only. To judge how something *looks*, install the same build into a profile that already has your keys and plugins — still without publishing:
+
+```bash
+npm pack --pack-destination /tmp --cache /tmp/npm-cache
+dsh plugin --profile web add /tmp/dsh-usage-state-<version>.tgz   # file: install
+dsh plugin --profile web add "$PWD"                               # link: install, for hot reload
+dsh plugin --profile web add dsh-usage-state@<published>          # back to the published build
+```
+
+Bump the version and publish only after you have **seen** the change work.
+
 Host-side changes need a DSH restart; client-side changes do not. The `lib/` output is **committed on purpose**: `dsh plugin add github:...` installs straight from the repository with no build step, and `npm test` guards the bundle envelope, the require allow-list and the `exports` targets.
 
 ## Docs

package/README.md

@@ -65,9 +65,9 @@ dsh plugin --profile web add /path/to/dsh-usage-state
 
 ## 截图
 
-输入框上方独占一行的账户读数（图示为 OpenCode Zen Go 的三个窗口，悬停任意一段可看数据源、模式与绝对重置时刻）：
+输入框上方独占一行的账户读数（图示为 OpenCode Zen Go 的三个窗口；卡片下方那排是 DSH 原生统计，两者互不干扰。悬停任意一段可看数据源、模式与绝对重置时刻）：
 
-![输入框下方的账户读数](https://raw.githubusercontent.com/takboo/dsh-usage-state/main/assets/screenshots/status-line.webp)
+![输入框上方独占一行的账户读数](https://raw.githubusercontent.com/takboo/dsh-usage-state/main/assets/screenshots/status-line.webp)
 
 设置页：每个 provider 一行，默认「自动」会识别数据源与主模式：
 
@@ -95,7 +95,7 @@ dsh plugin --profile web add /path/to/dsh-usage-state
 
 **位置**：输入框统计行的正下方（与原生统计行的几何对齐，跟随 DSH 的会话内容宽度）。读数**始终可见**，不依赖悬停，也不需要点击。
 
-**元素**：供应商标签 · 余额金额 + 币种 · 各窗口（5h / 7d / 30d）已用百分比 · 重置倒计时 · 迷你进度条 · 阈值变色（默认 ≥80% 黄、≥95% 红，可在设置里改）。
+**元素**：供应商标签 · 余额金额 + 币种 · 各窗口（5h / 7d / 30d）已用百分比 · 重置倒计时 · 迷你进度环 · 阈值变色（默认 ≥80% 黄、≥95% 红，可在设置里改）。
 
 **口径**：百分比一律是**已用**（与 z.ai / Claude 官方一致）；API 模式显示余额，Coding Plan 模式显示该数据源实际提供的窗口（z.ai 与 Sub2API 是 5h / 7d，OpenCode Zen Go 多一个 30d）。
 
@@ -148,6 +148,28 @@ npm run build        # tsdown → lib/（宿主 index.js + typert.js，浏览器
 npm run watch        # 只重建 client.js；客户端会被 HMR 热替换，无需刷新页面
 ```
 
+**本地回路（不需要发版）**：`scripts/dev-local.sh` 会在 `/tmp/dsh-dev` 建一个**一次性 profile**，把本仓库以 `link:` 装进去并起一个独立端口的宿主；你的真实 profile 完全不受影响。
+
+```bash
+npm run build                 # 先有 lib/
+scripts/dev-local.sh          # 建/复用 dev profile + 起宿主，打印带 token 的 URL
+# 另一个终端：
+npm run watch                 # 保存即重建 client.js
+```
+
+客户端改动由 `dsh-client-hmr` 热替换（宿主每 500ms 轮询 bundle，经 `/plugins/events` 通知浏览器重载模块）——**不用重启、不用发版**；宿主改动（`src/host/**`、`src/index.ts`、`cordis.patch.yml`）需要重启该脚本。
+
+⚠️ **这个 profile 没有凭据**：`$DSH_HOME/.credentials.yaml` 是 home 级的，全新 home 里没有 key，也没有你其它插件（**字体插件会改变排版所依赖的字形度量**）。所以它只适合**结构/宿主侧**核对。要看**实际观感**，把同一份构建装进已有 key 与插件的 profile，同样不用发版：
+
+```bash
+npm pack --pack-destination /tmp --cache /tmp/npm-cache
+dsh plugin --profile web add /tmp/dsh-usage-state-<version>.tgz   # file: 安装
+dsh plugin --profile web add "$PWD"                               # 想热迭代就用 link:
+dsh plugin --profile web add dsh-usage-state@<已发布版本>          # 回到线上版本
+```
+
+只有当你**亲眼确认**改动可用之后，才值得动版本号与 npm 发布。
+
 宿主机改动需要重启 DSH；客户端改动 `npm run watch` 即可。`lib/` 产物**必须提交进仓库**——`dsh plugin add github:...` 直接装仓库、没有构建步骤（`npm test` 里的构建守卫会检查信封、require 白名单与 `exports` 指向）。
 
 ```

package/lib/client.js

@@ -1056,7 +1056,6 @@ window.__ModuleLoader__.load({
 			CNY: "¥",
 			USD: "$"
 		};
-		const PROGRESS_WIDTH = 8;
 		/** `¥66.28`, `$6.80`, `EUR 1.50`; an unknown code keeps its numeric form. */
 		function formatBalance(balance) {
 			const amount = balance.amount.toFixed(2);
@@ -1088,10 +1087,6 @@ window.__ModuleLoader__.load({
 			const minutes = Math.floor(seconds / 60);
 			return minutes >= 1 ? `${minutes}m` : `${seconds}s`;
 		}
-		function progressBar(percent, width = PROGRESS_WIDTH) {
-			const filled = Math.min(width, Math.max(0, Math.round(percent / 100 * width)));
-			return "█".repeat(filled) + "░".repeat(width - filled);
-		}
 		function severityOf(usedPercent, display) {
 			if (usedPercent >= display.thresholdCriticalPercent) return "critical";
 			if (usedPercent >= display.thresholdWarnPercent) return "warn";
@@ -1162,7 +1157,7 @@ window.__ModuleLoader__.load({
 					severity: severityOf(window.usedPercent, display)
 				};
 				if (window.resetsAt !== void 0 && window.resetsAt > now) segment.resetsAt = window.resetsAt;
-				if (display.progressBar) segment.bar = progressBar(window.usedPercent);
+				if (display.progressBar) segment.progress = Math.min(100, Math.max(0, window.usedPercent));
 				segments.push(segment);
 			}
 			return segments;
@@ -1245,7 +1240,7 @@ window.__ModuleLoader__.load({
 						percent: segment.percent,
 						severity: segment.severity,
 						...countdown === void 0 ? {} : { countdown },
-						...segment.bar === void 0 ? {} : { bar: segment.bar },
+						...segment.progress === void 0 ? {} : { progress: segment.progress },
 						...tooltipOf([resetHint, context]) === void 0 ? {} : { tooltip: tooltipOf([resetHint, context]) }
 					});
 					break;
@@ -1283,8 +1278,21 @@ window.__ModuleLoader__.load({
 			alignItems: "center",
 			justifyContent: "center",
 			gap: "6px",
-			font: "inherit",
-			lineHeight: "inherit",
+			/**
+			* Exactly the typography the platform's own stats row uses under the card
+			* (`StatsPills.module.css`, `.root`), copied expression for expression:
+			*
+			*   font-size: calc(var(--dsh-content-font-size-secondary, 13px) - 1px)
+			*   line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px))
+			*
+			* `font: inherit` looked right in the dock row (the platform's pills inherit there)
+			* but not above the card: this element is a child of `.composerStack`, so it
+			* inherited the *input card's* `--dsh-content-font-size` (14px) and rendered a size
+			* larger than the row below it. Font family is deliberately left alone, so a
+			* UI-font plugin still applies.
+			*/
+			fontSize: "calc(var(--dsh-content-font-size-secondary, 13px) - 1px)",
+			lineHeight: "calc(20px + var(--dsh-content-font-delta-secondary, 0px))",
 			fontVariantNumeric: "tabular-nums",
 			whiteSpace: "nowrap",
 			flexWrap: "wrap",
@@ -1296,6 +1304,65 @@ window.__ModuleLoader__.load({
 		};
 		const LABEL_STYLE = { color: "var(--dsw-alias-label-tertiary)" };
 		const SEPARATOR_STYLE = { color: "var(--dsw-alias-separator-primary, var(--dsw-alias-label-dimmed))" };
+		/**
+		* One segment and the separator that introduces it, boxed together.
+		*
+		* The line wraps between these boxes, never inside one: with the separator as a
+		* sibling of the segments, a wrap ended a line on a dangling `·` while the segment it
+		* introduces moved to the next line.
+		*/
+		const PART_STYLE = {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "6px"
+		};
+		/**
+		* The platform's own ring geometry (`ContextMeter.module.css`): a 14x14 viewBox with
+		* two circles of radius 5.5 and a 2px stroke, the filled one rotated so the arc
+		* starts at twelve o'clock.
+		*/
+		const RING_RADIUS = 5.5;
+		const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+		/**
+		* How full a window is, drawn rather than typed.
+		*
+		* This replaced an eight-cell `█`/`░` text bar. Those glyphs are not covered by the
+		* shell's UI font, so a fallback served them at roughly twice the advance width and
+		* three bars wrapped the line — and pinning them to a monospace stack only made the
+		* width predictable, not small. An SVG ring has no glyph metrics at all, and it
+		* matches the context meter sitting in the platform's stats row.
+		*
+		* The stroke uses `currentColor`, so the severity colour on the segment carries into
+		* the ring; the track copies the platform's `--dsw-alias-border-l3`.
+		*/
+		function ProgressRing({ percent }) {
+			const filled = RING_CIRCUMFERENCE * Math.min(100, Math.max(0, percent)) / 100;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				viewBox: "0 0 14 14",
+				width: "14",
+				height: "14",
+				"aria-hidden": "true",
+				style: { flex: "none" },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "7",
+					cy: "7",
+					r: RING_RADIUS,
+					fill: "none",
+					stroke: "var(--dsw-alias-border-l3)",
+					strokeWidth: "2"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "7",
+					cy: "7",
+					r: RING_RADIUS,
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeDasharray: `${filled} ${RING_CIRCUMFERENCE}`,
+					transform: "rotate(-90 7 7)"
+				})]
+			});
+		}
 		function severityColor(severity) {
 			if (severity === "critical") return "var(--dsw-alias-state-error-primary)";
 			if (severity === "warn") return "var(--dsw-alias-state-warn-primary)";
@@ -1325,11 +1392,16 @@ window.__ModuleLoader__.load({
 					children: part.text
 				}, key);
 				case "window": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					style: { color: severityColor(part.severity) },
+					style: {
+						color: severityColor(part.severity),
+						display: "inline-flex",
+						alignItems: "center",
+						gap: "4px"
+					},
 					children: [
+						part.progress === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressRing, { percent: part.progress }),
 						part.text,
-						part.countdown === void 0 ? "" : ` (${part.countdown})`,
-						part.bar === void 0 ? "" : ` ${part.bar}`
+						part.countdown === void 0 ? "" : ` (${part.countdown})`
 					]
 				}, key);
 				case "state": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1402,11 +1474,15 @@ window.__ModuleLoader__.load({
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-usage-state": "dock",
 				style: DOCK_STYLE,
-				children: fullParts.map((part, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [index > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					style: SEPARATOR_STYLE,
-					"aria-hidden": "true",
-					children: "·"
-				}) : null, withTooltip(renderPart(part, t, index), part.tooltip, index)] }, index))
+				children: fullParts.map((part, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					"data-usage-part": index === 0 ? "first" : "following",
+					style: PART_STYLE,
+					children: [index > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: SEPARATOR_STYLE,
+						"aria-hidden": "true",
+						children: "·"
+					}) : null, withTooltip(renderPart(part, t, index), part.tooltip, index)]
+				}, index))
 			});
 		}
 		//#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-usage-state",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "type": "module",
   "description": "DSH plugin: show account balance (API mode) or coding-plan quota (5h/7d/30d) for the model in use",
   "license": "MIT",