@konnga/dsh-hud 0.9.2 → 0.10.0

package/lib/client.js

@@ -61,9 +61,52 @@ const CSS = [
 	".dshh-pill:hover{color:var(--dsw-alias-label-primary,#e5e7eb);border-color:var(--dsw-alias-border-l2,rgba(127,127,127,0.45));}",
 	".dshh-timer{cursor:default;gap:5px;}",
 	".dshh-tip{position:fixed;z-index:60;box-sizing:border-box;max-width:420px;padding:6px 10px;border-radius:8px;background:var(--dsw-specific-menu,var(--dsw-alias-bg-layer-2,#2c2c2e));border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,0.25));box-shadow:0 6px 20px rgba(0,0,0,0.28);color:var(--dsw-alias-label-primary,#f9fafb);font-size:11.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;pointer-events:none;}",
+	".dshh-tipLine{display:block;}",
+	".dshh-tipSeg{white-space:pre-wrap;}",
+	".dshh-tipAccent,.dshh-tipSuccess,.dshh-tipWarn,.dshh-tipValue{font-variant-numeric:tabular-nums;}",
+	".dshh-tipLabel{color:var(--dsw-alias-label-secondary,#9aa0a6);}",
+	".dshh-tipValue{color:var(--dsw-alias-label-primary,#f9fafb);margin-left:2px;}",
+	".dshh-tipSuccess{color:var(--dsw-alias-state-success-primary,#22c55e);}",
+	".dshh-tipWarn{color:var(--dsw-alias-state-warn-primary,#f59e0b);}",
+	".dshh-tipAccent{color:var(--dsw-alias-state-business-primary,#7aaaff);}",
+	".dshh-tipMuted{color:var(--dsw-alias-label-tertiary,#6b7280);}",
 	".dshh-timerGlyph{flex:none;opacity:.85;}",
 	".dshh-timerValue{font-variant-numeric:tabular-nums;}",
+	".dshh-balance{cursor:pointer;gap:2px;font-variant-numeric:tabular-nums;}",
+	".dshh-balanceValue{letter-spacing:.2px;}",
+	".dshh-balanceBonus{opacity:.75;margin-left:1px;}",
+	".dshh-balanceStale{color:var(--dsw-alias-state-warning-primary,#d7a14a);margin-left:2px;}",
+	".dshh-balanceWarn{flex:none;color:var(--dsw-alias-state-warning-primary,#d7a14a);margin-right:2px;}",
+	".dshh-balanceLow{color:var(--dsw-alias-state-warning-primary,#d7a14a);}",
+	".dshh-balanceUsed{flex:none;opacity:.65;margin-right:1px;}",
+	".dshh-balanceUnknown{opacity:.7;}",
+	".dshh-balanceProvider{flex:none;margin-right:3px;opacity:.8;}",
 	".dshh-panel{color:var(--dsw-alias-label-primary,#e5e7eb);font-size:12.5px;line-height:1.6;}",
+	".dshh-tokenPanel{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:2147483000;",
+	"width:min(420px,calc(100vw - 32px));box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:12px 14px;",
+	"border-radius:12px;border:1px solid var(--dsw-alias-border-l2,rgba(127,127,127,0.28));",
+	"background:var(--dsw-alias-bg-layer-1,#1c1d21);color:var(--dsw-alias-label-primary,#e5e7eb);",
+	"box-shadow:0 12px 32px rgba(0,0,0,0.32);font-size:12.5px;line-height:1.55;}",
+	".dshh-tokenHead{display:flex;align-items:baseline;gap:6px;}",
+	".dshh-tokenTitle{font-size:13px;font-weight:600;}",
+	".dshh-tokenProvider{font-family:ui-monospace,Consolas,monospace;font-size:11px;padding:1px 6px;border-radius:6px;",
+	"background:var(--dsw-alias-bg-layer-2,rgba(127,127,127,0.14));color:var(--dsw-alias-label-secondary,#8a8f98);}",
+	".dshh-tokenHint{font-size:11.5px;color:var(--dsw-alias-label-secondary,#8a8f98);}",
+	".dshh-tokenInput{box-sizing:border-box;width:100%;height:30px;padding:0 9px;border-radius:8px;font:inherit;",
+	"font-family:ui-monospace,Consolas,monospace;font-size:12px;",
+	"border:1px solid var(--dsw-alias-border-l2,rgba(127,127,127,0.36));",
+	"background:var(--dsw-alias-bg-layer-2,rgba(127,127,127,0.10));color:var(--dsw-alias-label-primary,#e5e7eb);}",
+	".dshh-tokenInput:focus{outline:none;border-color:var(--dsw-alias-state-business-primary,#4b8bf5);}",
+	".dshh-tokenRef{font-size:10.5px;color:var(--dsw-alias-label-tertiary,#6b7280);",
+	"font-family:ui-monospace,Consolas,monospace;}",
+	".dshh-tokenActions{display:flex;gap:8px;justify-content:flex-end;}",
+	".dshh-tokenSave,.dshh-tokenCancel{height:26px;padding:0 12px;border-radius:7px;font:inherit;font-size:12px;cursor:pointer;}",
+	".dshh-tokenSave{border:1px solid transparent;background:var(--dsw-alias-button-primary-fill,#4b8bf5);",
+	"color:var(--dsw-alias-label-primary-foreground,#fff);}",
+	".dshh-tokenSave:disabled{opacity:.45;cursor:default;}",
+	".dshh-tokenCancel{border:1px solid var(--dsw-alias-border-l2,rgba(127,127,127,0.36));background:transparent;",
+	"color:var(--dsw-alias-label-secondary,#8a8f98);}",
+	".dshh-tokenError{font-size:11.5px;color:var(--dsw-alias-state-error-primary,#f87171);}",
 	".dshh-header{display:flex;align-items:center;gap:8px;padding:6px 8px;flex:none;cursor:move;line-height:1.4;",
 	"user-select:none;touch-action:none;border-bottom:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,0.22));}",
 	".dshh-title{font-size:13px;font-weight:600;flex:none;}",
@@ -257,6 +300,88 @@ const CSS = [
 * 于是依赖方向永远是"由外向内"，不会绕成环。
 */
 var h = react.default.createElement;
+/**
+* 一行在"拼平"（日志/断言/兼容 `state.text`）时长的样子。
+*
+* 标签与数值之间补一个空格：屏幕上它们之间是 CSS 的 `margin-left`，拼平之后没这个
+* 间距，`余额$742.23` 读起来是错的，日志里也不好 grep。
+*/
+function tipLineText(line) {
+	if (Array.isArray(line.segments)) return line.segments.map(function(segment) {
+		return segment.text;
+	}).join("");
+	if (typeof line.text === "string") return line.text;
+	var label = line.label ?? "";
+	var value = line.value ?? "";
+	if (label !== "" && value !== "") return label + " " + value;
+	return label + value;
+}
+/**
+* 把一句白话按给定的"读数"切成段：命中的部分高亮，其余保持普通文字。
+*
+* 做法是**字面量匹配**而不是猜数字：调用方知道这句话里哪些是读数
+*（`3h 24m`、`1469`、`$742.23`），交给我们按出现顺序切段。
+* 不去用 `\d+` 自动扫 —— 那样会把「2026-10-20 12:41」这类时间戳也染上，
+* 满屏都是颜色，等于没有重点。
+*
+* @param text - 整句白话。
+* @param readings - 要突出的字面量（按长度从长到短匹配，避免短串先吃长串）。
+* @param tone - 用什么颜色。
+* @returns 分段数组（没有命中就退化成一段）。
+*/
+function emphasize(text, readings, tone = "accent") {
+	var hits = readings.filter(function(item) {
+		return typeof item === "string" && item !== "";
+	}).map(function(item) {
+		return item;
+	}).sort(function(left, right) {
+		return right.length - left.length;
+	});
+	if (hits.length === 0 || text === "") return [{ text }];
+	var segments = [];
+	var plain = "";
+	var index = 0;
+	while (index < text.length) {
+		var matched = null;
+		for (var at = 0; at < hits.length; at += 1) if (text.startsWith(hits[at], index)) {
+			matched = hits[at];
+			break;
+		}
+		if (matched === null) {
+			plain += text[index];
+			index += 1;
+			continue;
+		}
+		if (plain !== "") {
+			segments.push({ text: plain });
+			plain = "";
+		}
+		segments.push({
+			text: matched,
+			tone
+		});
+		index += matched.length;
+	}
+	if (plain !== "") segments.push({ text: plain });
+	return segments.length === 0 ? [{ text }] : segments;
+}
+/**
+* 把气泡内容归一成「逐行结构 + 拼平文本」。
+*
+* 两处都用它：真 store 的 tip 片（渲染用 `lines`，`text` 留给日志与断言），
+* 以及测试 harness 的假 `showTip`（让老用例继续按字符串断言，不必全部重写）。
+*/
+function normalizeTipContent(content) {
+	var lines = typeof content === "string" ? [{ text: content }] : Array.isArray(content) ? content.filter(function(line) {
+		return line !== null && typeof line === "object";
+	}) : [];
+	return {
+		lines,
+		text: lines.map(function(line) {
+			return tipLineText(line);
+		}).join("\n")
+	};
+}
 var CHANNEL = "/dsh-hud-rpc";
 var NS = "dshHud";
 var UI_KEY = "dsh-hud.ui.v1";
@@ -282,6 +407,30 @@ var ROWS_POLL_MS = 3e4;
 * 密一点才能让"正在跑什么"真的看到；代价用"内容没变就不 set"抵掉。
 */
 var TOOLS_POLL_MS = 3e3;
+/**
+* 账号余额的轮询节拍：**比别的读数都慢**。
+*
+* 这一枚走的不是本地 git，而是宿主替我们去平台查账（一次真实网络请求），
+* 而且余额是按分钟变的，密了纯属浪费。页面隐藏时照例跳过，点击胶囊可强制刷新。
+*/
+var BALANCE_POLL_MS = 3e5;
+/** 同一次请求的 TTL：轮询与点击之间不重复打平台（失败时用更短的间隔重试，见切片）。 */
+var BALANCE_TTL_MS = 24e4;
+/** 失败后的重问间隔：账目查不到多半是网络/登录态，隔一小会儿再试就够。 */
+var BALANCE_RETRY_MS = 3e4;
+/** 「当前会话模型来源」余额的轮询节拍：真实请求由 store 的 TTL 兜着，这里只决定问的频率。 */
+var PROVIDER_POLL_MS = 3e4;
+/**
+* 「还没问出来」时的重问间隔。
+*
+* 重启/刚开会话的那一下，宿主往往还没读到模型选择投影 —— 第一次问会落空。
+* 用 30 秒节拍兜的话胶囊要空半分钟（用户报的就是这个）；1 秒问一次，
+* 正常情况一两秒内就补上了。真的出错时也不会打风暴：store 的失败退避是
+* 1s→2s→4s→…→30s，这里的轮询只是"看一眼"，多半被 TTL 直接挡回。
+*/
+var PROVIDER_RETRY_TICK_MS = 1e3;
+/** 覆盖低余额阈值的 localStorage 键（值是十进制数，比如 `50`）。 */
+var BALANCE_LOW_KEY = "dsh-hud.balanceLow";
 /** 面板默认宽度与“停靠在输入框上方”的锚点高度。 */
 var PANEL_WIDTH = 380;
 var VIEWPORT_MARGIN = 8;
@@ -863,6 +1012,727 @@ function errorText(code, t) {
 	if (code === "unknown-endpoint") return t("err.stale-host");
 	return t("err.git-failed");
 }
+/**
+* 这个金额真的大于 0 吗（不引 big.js：只看字符串里有没有非零数字、且不是负数）。
+*
+* 平台会给 0 余额的钱包（赠送额度用完了也还在列里），DSH 自己的账号卡片就是
+* 这么过滤的（`new Big(wallet.balance).gt(0)`）—— 两边判定要一致，否则会出现
+* "这里有 ¥0.00 的赠送余额"这种没人想看的一行。
+*
+* @param amount - 平台给的十进制字符串。
+* @returns 严格大于 0 为 `true`。
+*/
+function isPositiveAmount(amount) {
+	if (typeof amount !== "string") return false;
+	var raw = amount.trim();
+	if (raw.charAt(0) === "-") return false;
+	return /[1-9]/.test(raw);
+}
+/** 币种 → 符号。认不出的币种原样接在后面（`123.45 XYZ`），不猜符号。 */
+function currencySymbol(currency) {
+	if (currency === "CNY") return "¥";
+	if (currency === "USD") return "$";
+	return null;
+}
+/**
+* 十进制字符串 → 千分位整数部分，**不经过浮点**。
+*
+* 余额是账目数字：`Number('1234567.89')` 在极大值上会丢精度，所以整数部分只做字符串分组，
+* 小数部分原样保留。符号与小数位由调用方决定（两者在本插件里是两条独立规则）。
+*/
+function groupDigits(integer) {
+	var negative = integer.charAt(0) === "-";
+	var digits = negative ? integer.slice(1) : integer;
+	var out = "";
+	for (var index = 0; index < digits.length; index += 1) {
+		var rest = digits.length - index;
+		out += digits.charAt(index);
+		if (rest > 1 && rest % 3 === 1) out += ",";
+	}
+	return negative ? "-" + out : out;
+}
+/**
+* 把十进制字符串拆成符号 / 整数 / 小数三块。
+*
+* 允许的写法与平台一致：`123`、`123.45`、`.5`、`5.`、科学计数法。
+* 不接受空串、`+` 号以外的其它前缀、以及 `1,234`（千分位是我们**输出**的形状，不是输入）。
+*
+* @param amount - 十进制字符串。
+* @returns 分解结果；非法输入回 `null`。
+*/
+function parseAmount(amount) {
+	if (typeof amount !== "string") return null;
+	var raw = amount.trim();
+	if (!/^-?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/.test(raw)) return null;
+	var negative = raw.charAt(0) === "-";
+	var body = negative ? raw.slice(1) : raw;
+	if (/[eE]/.test(body)) {
+		var expanded = Number(raw);
+		if (!Number.isFinite(expanded)) return null;
+		negative = expanded < 0;
+		body = String(Math.abs(expanded));
+	}
+	var dot = body.indexOf(".");
+	var integerPart = dot === -1 ? body : body.slice(0, dot);
+	var fractionPart = dot === -1 ? "" : body.slice(dot + 1);
+	if (integerPart.length === 0) integerPart = "0";
+	integerPart = integerPart.replace(/^0+(?=\d)/, "");
+	if (fractionPart.length === 0) fractionPart = "0";
+	return {
+		negative,
+		integer: integerPart,
+		fraction: fractionPart
+	};
+}
+/** 参与加减的最大小数位（Decimal 的 8 位对账目足够，再长也没人会看）。 */
+var AMOUNT_SCALE_MAX = 8;
+/**
+* 把两个金额对齐到同一标度，转成 BigInt（值为 `真实值 × 10^scale`）。
+*
+* @param left - 第一个十进制字符串。
+* @param right - 第二个十进制字符串。
+* @returns 两个 BigInt 与它们共用的标度；任一非法回 `null`。
+*/
+function scaledPair(left, right) {
+	var a = parseAmount(left);
+	var b = parseAmount(right);
+	if (a === null || b === null) return null;
+	var scale = Math.min(AMOUNT_SCALE_MAX, Math.max(a.fraction.length, b.fraction.length));
+	var toScaled = function(value) {
+		var digits = (value.fraction + "0".repeat(scale)).slice(0, scale);
+		var magnitude = BigInt(value.integer + digits);
+		return value.negative ? -magnitude : magnitude;
+	};
+	return {
+		left: toScaled(a),
+		right: toScaled(b),
+		scale
+	};
+}
+/** 标度整数 → 十进制字符串（`-30` + scale 2 → `-0.30`）。 */
+function formatScaled(value, scale) {
+	var negative = value < BigInt(0);
+	var digits = (negative ? -value : value).toString();
+	if (scale === 0) return (negative ? "-" : "") + digits;
+	var padded = digits.padStart(scale + 1, "0");
+	var head = padded.slice(0, padded.length - scale);
+	var tail = padded.slice(padded.length - scale);
+	return (negative ? "-" : "") + head + "." + tail;
+}
+/**
+* 两个金额相减（`left - right`），精确到小数末位。
+*
+* 为什么不用 `Number`：余额是账目数字，`8.6 - 8.3` 在 double 里是 `0.2999999999999998`，
+* 两次刷新差一分钱就能看出误差。这里按十进制对齐后做整数减法，结果直接可用于展示。
+*
+* @param left - 被减数（十进制字符串）。
+* @param right - 减数。
+* @returns 差值（十进制字符串，可能带 `-`，小数位到 max(两侧位数)）；任一非法回 `null`。
+*/
+function subtractAmounts(left, right) {
+	var pair = scaledPair(left, right);
+	if (pair === null) return null;
+	return formatScaled(pair.left - pair.right, pair.scale);
+}
+/**
+* `amount` 是否严格小于 `limit`（同样走十进制对齐，不走浮点）。
+*
+* @param amount - 待比较的金额。
+* @param limit - 阈值（十进制字符串）。
+* @returns 严格小于为 `true`；任一非法回 `false`（拿不准就不报警）。
+*/
+function isBelowAmount(amount, limit) {
+	var pair = scaledPair(amount, limit);
+	if (pair === null) return false;
+	return pair.left < pair.right;
+}
+/**
+* 读取低余额阈值（`dsh-hud.balanceLow`，没有就用默认 10）。
+*
+* 键值是十进制数；解析不出正数就退回默认值 —— 一个写坏了的存储项不该让提醒消失。
+*
+* @param fallback - 默认阈值（`BALANCE_LOW_DEFAULT`）。
+* @returns 阈值字符串（交给 `isBelowAmount`）。
+*/
+function lowThresholdOf(fallback) {
+	try {
+		var raw = globalThis.localStorage ? globalThis.localStorage.getItem(BALANCE_LOW_KEY) : null;
+		if (typeof raw === "string" && raw.trim() !== "") {
+			var value = Number(raw.trim());
+			if (Number.isFinite(value) && value > 0) return String(value);
+		}
+	} catch (error) {}
+	return String(fallback);
+}
+/**
+* 变化量的展示文本：`+¥0.30` / `-¥0.30`（零值回 `null`，调用方据此不画那一行）。
+*
+* @param amount - `subtractAmounts` 的输出。
+* @param currency - 币种。
+* @returns 带正负号的文本；零值或金额非法回 `null`。
+*/
+function formatDelta(amount, currency) {
+	var parsed = parseAmount(amount);
+	if (parsed === null) return null;
+	var abs = parsed.negative ? amount.slice(1) : amount;
+	var text = formatBalance(abs, currency);
+	if (text === null) return null;
+	if (/^0*(\.0*)?$/.test(abs.trim())) return null;
+	return (parsed.negative ? "-" : "+") + text;
+}
+/**
+* 把一个钱包余额格式化成界面文本。
+*
+* 规则照 DSH 自己的账号卡片（`formatBalance`，`dsh-client-ui-settings-account`）：
+* 0 → `¥0.00`；不足一分 → `<¥0.01`；负的小额进位成 `-¥0.01`；其余**向零截断**到两位并加千分位。
+* 两边读同一份余额就该显示同一个数，所以这里刻意复刻而不是"差不多"。
+*
+* 认不出的币种没有符号可用：直接给 `123.45 XYZ` 这样带代码的文本，不做符号猜测。
+*
+* @param amount - 平台给的十进制字符串（可能带负号；非法输入按 0 处理）。
+* @param currency - `CNY` / `USD`，其它值按代码显示。
+* @returns 可展示文本；`amount` 非法时回 `null`（宁可不画，也不画错数字）。
+*/
+function formatBalance(amount, currency) {
+	var parsed = parseAmount(amount);
+	if (parsed === null) return null;
+	var symbol = currencySymbol(currency);
+	var suffix = symbol === null ? " " + currency : "";
+	var negative = parsed.negative;
+	var integerPart = parsed.integer;
+	var fractionPart = parsed.fraction;
+	var sign = negative ? "-" : "";
+	/** 按币种符号规则拼一段文本。 */
+	var render = function(value) {
+		return symbol === null ? sign + value + suffix : sign + symbol + value;
+	};
+	var integerIsZero = /^0*$/.test(integerPart);
+	var fractionHasDigit = /[1-9]/.test(fractionPart);
+	if (integerIsZero && !fractionHasDigit) return render("0.00");
+	if (integerIsZero && (fractionPart + "00").slice(0, 2) === "00") {
+		if (negative) return render("0.01");
+		return "<" + render("0.01");
+	}
+	var cents = (fractionPart + "00").slice(0, 2);
+	return render(groupDigits(integerPart) + "." + cents);
+}
+
+//#endregion
+//#region src/client/components/balance-pill.ts
+/**
+* 挑出要摆在胶囊上的那个钱包。
+*
+* 平台一般只给一个充值钱包；真给了多个，取**第一个**（顺序由平台决定），其余全在
+* 悬停里 —— 胶囊上塞两个币种会挤掉它"扫一眼"的价值。
+*
+* @param state - 快照（只读 `balance`）。
+* @returns 主钱包，或 `null`（没有可展示的钱包）。
+*/
+function primaryWallet(state) {
+	var balance = state.balance;
+	if (!balance || !Array.isArray(balance.wallets)) return null;
+	for (var index = 0; index < balance.wallets.length; index += 1) {
+		var wallet = balance.wallets[index];
+		if (!wallet || typeof wallet.balance !== "string") continue;
+		if (typeof wallet.currency !== "string") continue;
+		return wallet;
+	}
+	return null;
+}
+/**
+* 赠送钱包里**真正有钱**的那些。
+*
+* 平台会把用完的赠送额度继续挂在 `bonusWallets` 里（余额 `0`），过滤规则与 DSH 自己的
+* 账号卡片一致（`isPositiveAmount`，等价于它的 `new Big(…).gt(0)`）—— store 那侧已经过滤
+* 过一次，这里再兜一次：组件不该假设上游一定干净。
+*
+* @param balance - 余额快照。
+* @returns 余额大于 0 的赠送钱包。
+*/
+function visibleBonus(balance) {
+	var bonus = Array.isArray(balance.bonus) ? balance.bonus : [];
+	var out = [];
+	for (var index = 0; index < bonus.length; index += 1) {
+		var wallet = bonus[index];
+		if (!wallet || typeof wallet.balance !== "string") continue;
+		if (!isPositiveAmount(wallet.balance)) continue;
+		out.push(wallet);
+	}
+	return out;
+}
+/**
+* 某个钱包**较上一次成功刷新**变化了多少。
+*
+* 只在我们自己采样到的两个时刻之间比较（不是平台账单的"今日消耗"）：所以文案写的是
+* "较上次刷新"，而不是"今天花了多少"。上一次读数与这次币种对不上、或数值没变，都回
+* `null`（那时没有可展示的变化量）。
+*
+* @param balance - 余额快照（含 `prev`）。
+* @param wallet - 当前主钱包。
+* @returns `{ delta, at }`；没有变化或没有前一份读数时回 `null`。
+*/
+function deltaOf(balance, wallet) {
+	var prev = balance.prev;
+	if (!prev || !Array.isArray(prev.wallets)) return null;
+	for (var index = 0; index < prev.wallets.length; index += 1) {
+		var older = prev.wallets[index];
+		if (!older || older.currency !== wallet.currency) continue;
+		if (typeof older.balance !== "string") return null;
+		var diff = subtractAmounts(wallet.balance, older.balance);
+		if (diff === null) return null;
+		var text = formatDelta(diff, wallet.currency);
+		if (text === null) return null;
+		return {
+			delta: text,
+			at: prev.at
+		};
+	}
+	return null;
+}
+/**
+* 这个钱包是否低于低余额阈值。
+*
+* 阈值默认 `BALANCE_LOW_DEFAULT`，可被 `dsh-hud.balanceLow` 覆盖（见 README）。
+* 拿不准（金额非法、阈值读坏）时**不报警**：误报比漏报更烦人。
+*
+* @param wallet - 钱包。
+* @returns 严格低于阈值为 `true`。
+*/
+function isLowWallet(wallet) {
+	return isBelowAmount(wallet.balance, lowThresholdOf(10));
+}
+/**
+* 从提供方余额里挑出胶囊该画的那个数。
+*
+* 顺序是有讲究的：**剩余优先**。中转站把额度写成"无限"占位值时 `remaining` 是 `null`
+* （站点自己也不知道剩多少），这时只能画已用 —— 一个能核对的数字，胜过编一个天文数字。
+*
+* @param balance - 提供方余额快照。
+* @returns 主数字；一个能画的都没有时回 `null`（那就不画胶囊）。
+*/
+function providerFigureOf(balance) {
+	if (typeof balance.remaining === "string") return {
+		amount: balance.remaining,
+		currency: balance.currency,
+		kind: "remaining"
+	};
+	if (typeof balance.usedKey === "string") return {
+		amount: balance.usedKey,
+		currency: balance.currency,
+		kind: "used"
+	};
+	if (typeof balance.usedAccount === "string") return {
+		amount: balance.usedAccount,
+		currency: balance.currency,
+		kind: "used"
+	};
+	var wallets = Array.isArray(balance.wallets) ? balance.wallets : [];
+	for (var index = 0; index < wallets.length; index += 1) {
+		var wallet = wallets[index];
+		if (wallet && typeof wallet.balance === "string") return {
+			amount: wallet.balance,
+			currency: wallet.currency,
+			kind: "remaining"
+		};
+	}
+	return null;
+}
+/**
+* 金额文本：币种未知时不要凭空造一个符号。
+*
+* @param amount - 十进制字符串。
+* @param currency - 币种（可能为 `null`）。
+* @returns 展示文本；金额非法回 `null`。
+*/
+function amountText(amount, currency) {
+	var text = formatBalance(amount, currency === null ? "" : currency);
+	if (text === null) return null;
+	return currency === null ? text.trim() : text;
+}
+/** `amountText` 的"可能没有"版本：不是十进制字符串就回 `null`。 */
+function amountTextOf(amount, currency) {
+	if (typeof amount !== "string") return null;
+	return amountText(amount, currency);
+}
+/** i18n 模板里用来定位"标签/数值"分界点的哨兵（不可能出现在译文里）。 */
+const TIP_SPLIT = "\0";
+/**
+* 把 `'余额 {amount}'` 这样的模板拆成「标签 + 数值」两段。
+*
+* 为什么要拆：用户要「数字亮、标签灰」，而一整段文本在 DOM 里只有一个文本节点。
+* 做法是把参数换成一个哨兵再渲染，按哨兵位置切开 —— 这样**标签部分始终来自词典**，
+* 中英文都自动跟着走，不需要为每种语言另立一个"只有标签"的 key。
+*
+* @param t - 取词。
+* @param key - 词典里那条带 `{param}` 的模板。
+* @param param - 模板里的参数名。
+* @param value - 已经格式化好的数值文本。
+* @returns 逐行结构里的一行。
+*/
+function labelledLine(t, key, param, value, tone = "primary") {
+	var probe = {};
+	probe[param] = TIP_SPLIT;
+	var rendered = t(key, probe);
+	var at = rendered.indexOf(TIP_SPLIT);
+	if (at < 0) return { text: t(key, probe) };
+	return {
+		label: rendered.slice(0, at).trim(),
+		value,
+		tone
+	};
+}
+/**
+* 提供方余额的悬停明细。
+*
+* 只放读数：提供方 id、余额、账号已用、请求数、本 Key 已用、更新时间。
+* 不再解释"为什么没有剩余额度"—— 没有那一行本身就是答案。
+*
+* @param balance - 提供方余额快照。
+* @param t - 取词。
+* @returns 逐行结构（标签灰、数字亮）。
+*/
+function providerBalanceTitle(balance, t) {
+	var lines = [{
+		text: balance.provider,
+		tone: "muted"
+	}];
+	var figure = providerFigureOf(balance);
+	if (figure !== null && figure.kind === "remaining") {
+		var remainingText = amountText(figure.amount, figure.currency);
+		if (remainingText !== null) lines.push(labelledLine(t, "balance.providerRemaining", "amount", remainingText, "success"));
+	}
+	var bonus = Array.isArray(balance.bonus) ? balance.bonus : [];
+	var parts = [];
+	for (var index = 0; index < bonus.length; index += 1) {
+		if (!isPositiveAmount(bonus[index].balance)) continue;
+		var bonusText = amountText(bonus[index].balance, bonus[index].currency);
+		if (bonusText !== null) parts.push(bonusText);
+	}
+	if (parts.length > 0) lines.push({
+		label: t("balance.bonus"),
+		value: parts.join(" · "),
+		tone: "muted"
+	});
+	if (typeof balance.requests === "number" && balance.requests > 0) lines.push(labelledLine(t, "balance.providerRequests", "count", balance.requests.toLocaleString("en-US"), "accent"));
+	var accountUsed = amountTextOf(balance.usedAccount, balance.currency);
+	if (accountUsed !== null) lines.push(labelledLine(t, "balance.providerUsedAccount", "amount", accountUsed, "warn"));
+	var keyUsed = amountTextOf(balance.usedKey, balance.currency);
+	if (keyUsed !== null) lines.push(labelledLine(t, "balance.providerUsedKey", "amount", keyUsed, "warn"));
+	lines.push({
+		text: t("balance.updated", { time: fullWhen(balance.at) }),
+		tone: "muted"
+	});
+	return lines;
+}
+/**
+* 点胶囊该干什么。
+*
+* 分两种情况，因为"点了没反应"是最难查的那种问题：
+*   - 这个提供方的**后台凭据还没配**（`token.configured === false`）→ 直接弹设置面板。
+*     这才是用户此刻真正要做的事；让他自己去翻配置文件就是把人挡在门外。
+*   - 配了（或宿主没告诉我们状态）→ 刷新一次读数（跳过宿主 60 秒缓存）。
+*
+* @param ledger - 当前账本结论（`token` 在里面）。
+* @param store - 共享 store。
+*/
+function onPillClick(ledger, store) {
+	var token = ledger.token;
+	if (token !== null && token !== void 0 && token.configured === false) {
+		store.openTokenPanel(typeof ledger.provider === "string" && ledger.provider !== "" ? ledger.provider : "", token.ref);
+		return;
+	}
+	store.loadProviderBalance(true);
+}
+/** 平台用量页地址（没有就回 `null`：更旧的宿主不给这个链接）。 */
+function usageUrlOf(balance) {
+	var url = balance.usageUrl;
+	return typeof url === "string" && url !== "" ? url : null;
+}
+/**
+* 在新标签页打开一个外链。
+*
+* 为什么要 try/catch：`window.open` 在假 DOM 与某些沙箱里不存在，而"打不开链接"
+* 不该把整枚胶囊的点击路径打崩（它是只读读数，不是导航控件）。
+*
+* @param url - 目标地址。
+* @returns 是否成功发起打开。
+*/
+function openExternal(url) {
+	try {
+		var opened = globalThis.open;
+		if (typeof opened === "function") {
+			opened.call(globalThis, url, "_blank");
+			return true;
+		}
+	} catch (error) {}
+	return false;
+}
+/**
+* 悬停明细：每个钱包一行、赠送余额、变化量、低余额提醒、更新时间，以及失败时那句"可能已过期"。
+*
+* 刻意**不写操作说明**（"点一下刷新" / "右键开用量页"）：气泡是读数，不是帮助文档；
+* 两句话就把本来五行的明细撑成七行，还挤掉了真正会变的那几个数。
+*
+* @param balance - 余额快照。
+* @param t - 取词。
+* @returns 多行文本（气泡按 `pre-wrap` 原样显示）。
+*/
+function balanceTitle(balance, t) {
+	var lines = [{
+		text: t("balance.title"),
+		tone: "muted"
+	}];
+	var wallets = Array.isArray(balance.wallets) ? balance.wallets : [];
+	for (var index = 0; index < wallets.length; index += 1) {
+		var text = formatBalance(wallets[index].balance, wallets[index].currency);
+		if (text === null) continue;
+		lines.push({
+			text: index === 0 ? text : text + " (" + wallets[index].currency + ")",
+			tone: "success"
+		});
+	}
+	var bonus = visibleBonus(balance);
+	if (bonus.length > 0) {
+		var parts = [];
+		for (var k = 0; k < bonus.length; k += 1) {
+			var bonusText = formatBalance(bonus[k].balance, bonus[k].currency);
+			if (bonusText !== null) parts.push(bonusText);
+		}
+		if (parts.length > 0) lines.push({
+			label: t("balance.bonus"),
+			value: parts.join(" · "),
+			tone: "muted"
+		});
+	}
+	var wallet = primaryWallet({ balance });
+	if (wallet !== null) {
+		var move = deltaOf(balance, wallet);
+		if (move !== null) lines.push({
+			text: t("balance.delta", {
+				delta: move.delta,
+				time: fullWhen(move.at)
+			}),
+			tone: "muted"
+		});
+	}
+	lines.push({
+		text: t("balance.updated", { time: fullWhen(balance.at) }),
+		tone: "muted"
+	});
+	if (balance.failed === true) lines.push({
+		text: t("balance.stale", { time: fullWhen(balance.at) }),
+		tone: "muted"
+	});
+	return lines;
+}
+/**
+* 画那枚余额胶囊。
+* @param state - store 快照（只读 `balance`）。
+* @param options - 取词与 store（悬停接线、刷新都经它）。
+* @returns 胶囊节点；没有可展示的余额时 `null`。
+*/
+function balancePillNode(state, options) {
+	var t = options.t;
+	var ledger = state.provider;
+	if (ledger && ledger.mode === "provider" && ledger.balance !== null) {
+		var accountUsage = state.balance && typeof state.balance === "object" ? usageUrlOf(state.balance) : null;
+		return providerPillNode(ledger, ledger.balance, accountUsage, options);
+	}
+	if (ledger && ledger.mode === "unavailable") {
+		if (typeof ledger.provider === "string" && ledger.provider !== "") return unknownProviderPillNode(ledger, options);
+		return placeholderPillNode(ledger, options);
+	}
+	if (ledger !== void 0 && ledger !== null && ledger.mode === "unknown") return placeholderPillNode(ledger, options);
+	var snapshot = state.balance;
+	if (!snapshot || typeof snapshot !== "object") return null;
+	const balance = snapshot;
+	var wallet = primaryWallet({ balance });
+	if (wallet === null) return null;
+	var text = formatBalance(wallet.balance, wallet.currency);
+	if (text === null) return null;
+	var low = isLowWallet(wallet);
+	var children = [];
+	if (low) children.push(h("span", {
+		key: "low",
+		className: "dshh-balanceWarn"
+	}, "⚠"));
+	children.push(h("span", {
+		key: "value",
+		className: "dshh-balanceValue" + (low ? " dshh-balanceLow" : "")
+	}, text));
+	if (visibleBonus(balance).length > 0) children.push(h("span", {
+		key: "bonus",
+		className: "dshh-balanceBonus"
+	}, "+"));
+	if (balance.failed === true) children.push(h("span", {
+		key: "stale",
+		className: "dshh-balanceStale"
+	}, "?"));
+	probe.log("balance-pill", {
+		ledger: "account",
+		currency: wallet.currency,
+		failed: balance.failed === true,
+		bonus: Array.isArray(balance.bonus) ? balance.bonus.length : 0,
+		low,
+		delta: deltaOf(balance, wallet) === null ? null : "yes"
+	});
+	return h("button", Object.assign({
+		type: "button",
+		className: "dshh-pill dshh-balance",
+		"data-dsh-hud": "balance-pill",
+		key: "balance",
+		"aria-label": t("balance.title"),
+		onClick: function() {
+			options.store.loadBalance(true);
+		},
+		onContextMenu: function(event) {
+			var url = usageUrlOf(balance);
+			if (url === null) return;
+			if (event && typeof event.preventDefault === "function") event.preventDefault();
+			if (event && typeof event.stopPropagation === "function") event.stopPropagation();
+			openExternal(url);
+		}
+	}, options.store.tipHandlers("balance-pill", function() {
+		return balanceTitle(balance, t);
+	})), children);
+}
+/**
+* 画"还没有读数"的占位胶囊：`--`。
+*
+* 为什么不是干脆不画：不画就分不清"还在查"和"插件没装好"（用户当年正是这么误判的）。
+* 为什么不用平台账号的余额顶上：那是**另一个账本**的钱；新会话还不知道要用谁的钱，
+* 拿官方账号余额去填，等于报一个和本次会话无关的数。
+*
+* 点击照样重取一次 —— 用户点它，通常就是"怎么还没出来"。
+*
+* @param ledger - 当前账本结论（可能是 `null`：连结论都还没有）。
+* @param options - 取词与 store。
+* @returns 胶囊节点。
+*/
+function placeholderPillNode(ledger, options) {
+	var t = options.t;
+	probe.log("balance-pill", {
+		ledger: "placeholder",
+		reason: ledger?.reason ?? null
+	});
+	var text = t("balance.providerUnknown");
+	return h("button", Object.assign({
+		type: "button",
+		className: "dshh-pill dshh-balance dshh-balanceUnknown",
+		"data-dsh-hud": "balance-pill",
+		key: "balance",
+		"aria-label": text,
+		onClick: function() {
+			options.store.loadProviderBalance(true);
+		}
+	}, options.store.tipHandlers("balance-pill", function() {
+		return text;
+	})), [h("span", {
+		key: "value",
+		className: "dshh-balanceValue"
+	}, text)]);
+}
+/**
+* 画"知道是哪个提供方、但读不到它的余额"的胶囊：`ur --`。
+*
+* 为什么值得画：`—` 是一个**读数**（"这个账本的数读不到"），而空白只是一个疑点。
+* 用户看到空白的第一反应是"插件坏了"，于是去翻日志、重装、重启 —— 那才是真正的成本。
+*
+* @param ledger - 账本结论（含提供方与原因）。
+* @param options - 取词与 store。
+* @returns 胶囊节点。
+*/
+function unknownProviderPillNode(ledger, options) {
+	var t = options.t;
+	var provider = typeof ledger.provider === "string" ? ledger.provider : "?";
+	var reason = typeof ledger.reason === "string" && ledger.reason !== "" ? t("balance.reason." + ledger.reason) : "";
+	probe.log("balance-pill", {
+		ledger: "unavailable",
+		provider,
+		reason: ledger.reason
+	});
+	return h("button", Object.assign({
+		type: "button",
+		className: "dshh-pill dshh-balance dshh-balanceUnknown",
+		"data-dsh-hud": "balance-pill",
+		key: "balance",
+		"aria-label": provider,
+		onClick: function() {
+			onPillClick(ledger, options.store);
+		}
+	}, options.store.tipHandlers("balance-pill", function() {
+		return reason === "" ? provider : provider + "\n" + reason;
+	})), [h("span", {
+		key: "provider",
+		className: "dshh-balanceProvider"
+	}, provider), h("span", {
+		key: "value",
+		className: "dshh-balanceValue"
+	}, t("balance.providerUnknown"))]);
+}
+/**
+* 画"当前提供方"的余额胶囊（中转站 / 官方 API Key）。
+*
+* 与账号那一路的两处不同：
+*   - 没有赠送标记 `+` 那一套区分含义（中转站只报一个数），但官方 Key 带 `bonus`，照旧缀起来；
+*   - 只有"已用"可画时（站点把额度写成无限占位值）在数字前加一个词，否则读的人会把它当成余额。
+*
+* @param balance - 提供方余额快照。
+* @param options - 取词与 store。
+* @returns 胶囊节点；没有可画的数字时 `null`。
+*/
+function providerPillNode(ledger, balance, usageUrl, options) {
+	var t = options.t;
+	var figure = providerFigureOf(balance);
+	if (figure === null) return null;
+	var text = amountText(figure.amount, figure.currency);
+	if (text === null) return null;
+	var low = figure.kind === "remaining" && isBelowAmount(figure.amount, lowThresholdOf(10));
+	var children = [];
+	if (low) children.push(h("span", {
+		key: "low",
+		className: "dshh-balanceWarn"
+	}, "⚠"));
+	if (figure.kind === "used") children.push(h("span", {
+		key: "label",
+		className: "dshh-balanceUsed"
+	}, t("balance.usedShort")));
+	children.push(h("span", {
+		key: "value",
+		className: "dshh-balanceValue" + (low ? " dshh-balanceLow" : "")
+	}, text));
+	if (balance.bonus.length > 0) children.push(h("span", {
+		key: "bonus",
+		className: "dshh-balanceBonus"
+	}, "+"));
+	probe.log("balance-pill", {
+		ledger: "provider",
+		provider: balance.provider,
+		kind: balance.kind,
+		figure: figure.kind,
+		placeholder: balance.placeholderLimit,
+		low
+	});
+	return h("button", Object.assign({
+		type: "button",
+		className: "dshh-pill dshh-balance",
+		"data-dsh-hud": "balance-pill",
+		key: "balance",
+		"aria-label": balance.provider,
+		onClick: function() {
+			onPillClick(ledger, options.store);
+		},
+		onContextMenu: function(event) {
+			var url = usageUrl;
+			if (url === null) return;
+			if (event && typeof event.preventDefault === "function") event.preventDefault();
+			if (event && typeof event.stopPropagation === "function") event.stopPropagation();
+			openExternal(url);
+		}
+	}, options.store.tipHandlers("balance-pill", function() {
+		return providerBalanceTitle(balance, t);
+	})), children);
+}
 
 //#endregion
 //#region src/client/hooks/use-store.ts
@@ -919,6 +1789,7 @@ function HudDockPill(props) {
 			if (store.loadSessionTime !== void 0) store.loadSessionTime(id);
 			if (store.loadPromptHistory !== void 0) store.loadPromptHistory(id);
 		};
+		if (store.loadProviderBalance !== void 0) store.loadProviderBalance();
 		load();
 		var poll = window.setInterval(load, 3e3);
 		return function() {
@@ -1010,21 +1881,34 @@ function HudDockPill(props) {
 		}
 	}
 	if (sessionSegment !== null) children.push(sessionSegment);
-	var titleLines = [t("pill.title")];
-	if (sessionView !== null) titleLines.push(t("session.pill", { n: String(sessionView.mineCount) }));
-	if (cwd) titleLines.push(cwd);
+	var titleLines = [{
+		text: t("pill.title"),
+		tone: "muted"
+	}];
+	if (sessionView !== null) titleLines.push({ segments: emphasize(t("session.pill", { n: String(sessionView.mineCount) }), [String(sessionView.mineCount)]) });
+	if (cwd) titleLines.push({
+		text: cwd,
+		tone: "muted"
+	});
 	if (state.status && state.status.repo) {
 		var tip = branchLabel(state.status, t);
 		if (state.status.upstream) tip += " · " + t("panel.upstream") + " " + state.status.upstream;
-		titleLines.push(tip);
+		titleLines.push({ text: tip });
 		var labels = [];
+		var countReadings = [];
 		var counts2 = state.status.counts || {};
 		for (var i2 = 0; i2 < COUNT_ORDER.length; i2 += 1) {
 			var k2 = COUNT_ORDER[i2];
 			var v2 = counts2[k2] || 0;
-			if (v2 > 0) labels.push(t("count." + k2) + " " + String(v2));
+			if (v2 > 0) {
+				labels.push(t("count." + k2) + " " + String(v2));
+				countReadings.push(String(v2));
+			}
+		}
+		if (labels.length > 0) {
+			var aheadBehind = aheadBehindReadings(state.status);
+			titleLines.push({ segments: emphasize(labels.join(" · "), countReadings.concat(aheadBehind)) });
 		}
-		if (labels.length > 0) titleLines.push(labels.join(" · "));
 	}
 	return h("div", {
 		className: "dshh-dock",
@@ -1039,11 +1923,14 @@ function HudDockPill(props) {
 			store.togglePanel();
 		}
 	}, store.tipHandlers("pill", function() {
-		return titleLines.join("\n");
+		return titleLines;
 	})), children), toolPillNode(state, {
 		t,
 		store,
 		now: props.now === void 0 ? tick[0] : props.now
+	}), balancePillNode(state, {
+		t,
+		store
 	}), timerPillNode(state, {
 		t,
 		store,
@@ -1122,22 +2009,31 @@ function timerPillNode(state, options) {
 	var createdAt = value.createdAt;
 	if (typeof createdAt !== "number") return null;
 	var age = Math.max(0, now - createdAt);
+	var readings = [];
 	var hints = [t("timer.title"), t("timer.created", { time: fullWhen(createdAt) })];
-	if (typeof value.llmMs === "number" && typeof value.toolMs === "number") hints.push(t("timer.work", {
-		llm: formatDuration(value.llmMs),
-		tool: formatDuration(value.toolMs)
-	}));
-	if (typeof value.turns === "number" && typeof value.steps === "number") hints.push(t("timer.turns", {
-		turns: String(value.turns),
-		steps: String(value.steps)
-	}));
+	if (typeof value.llmMs === "number" && typeof value.toolMs === "number") {
+		var llmText = formatDuration(value.llmMs);
+		var toolText = formatDuration(value.toolMs);
+		readings.push(llmText, toolText);
+		hints.push(t("timer.work", {
+			llm: llmText,
+			tool: toolText
+		}));
+	}
+	if (typeof value.turns === "number" && typeof value.steps === "number") {
+		readings.push(String(value.turns), String(value.steps));
+		hints.push(t("timer.turns", {
+			turns: String(value.turns),
+			steps: String(value.steps)
+		}));
+	}
 	probe.log("timer-pill", { age: Math.round(age / 6e4) });
 	return h("span", Object.assign({
 		className: "dshh-pill dshh-timer",
 		"data-dsh-hud": "session-timer",
 		key: "timer"
 	}, options.store.tipHandlers("session-timer", function() {
-		return hints.join(" · ");
+		return [{ segments: emphasize(hints.join(" · "), readings) }];
 	})), [h("span", {
 		key: "glyph",
 		className: "dshh-timerGlyph"
@@ -1147,29 +2043,65 @@ function timerPillNode(state, options) {
 	}, formatDuration(age))]);
 }
 function toolsTitle(tools, t) {
+	var readings = [];
+	function countUnit() {
+		readings.push(String(tools.total));
+	}
 	var lines = [];
 	if (tools.active !== null) {
-		lines.push(t("tools.now", { name: String(tools.active.name) }));
-		if (typeof tools.active.summary === "string" && tools.active.summary.length > 0) lines.push(tools.active.summary);
-	}
-	lines.push(t("tools.total", { n: String(tools.total) }));
-	if (tools.counts.length > 0) lines.push(t("tools.byTool") + " " + tools.counts.map(function(item) {
-		return String(item.name) + " ×" + String(item.count);
-	}).join(" · "));
-	if (tools.skills && tools.skills.length > 0) lines.push(t("tools.skills") + " " + tools.skills.map(function(item) {
+		lines.push({
+			text: t("tools.now", { name: String(tools.active.name) }),
+			tone: "muted"
+		});
+		if (typeof tools.active.summary === "string" && tools.active.summary.length > 0) lines.push({
+			text: tools.active.summary,
+			tone: "muted"
+		});
+	}
+	var totalText = t("tools.total", { n: String(tools.total) });
+	countUnit();
+	lines.push({ segments: emphasize(totalText, readings) });
+	if (tools.counts.length > 0) {
+		var byTool = t("tools.byTool") + " ";
+		lines.push({ segments: emphasize(byTool + tools.counts.map(function(item) {
+			return String(item.name) + " ×" + String(item.count);
+		}).join(" · "), tools.counts.map(function(item) {
+			return "×" + String(item.count);
+		})) });
+	}
+	if (tools.skills && tools.skills.length > 0) lines.push({ segments: emphasize(t("tools.skills") + " " + tools.skills.map(function(item) {
 		return String(item.name) + " ×" + String(item.count) + (item.ok === false ? " (✗)" : "");
-	}).join(" · "));
+	}).join(" · "), tools.skills.map(function(item) {
+		return "×" + String(item.count);
+	})) });
 	var recent = tools.recent.slice(0, 3);
 	if (recent.length > 0) {
-		lines.push(t("tools.recent"));
-		lines.push(recent.map(function(item) {
-			var mark = item.ok === false ? "✗" : "✓";
-			var ms = typeof item.ms === "number" ? " " + (item.ms / 1e3).toFixed(1) + "s" : "";
-			var summary = typeof item.summary === "string" && item.summary.length > 0 ? " · " + item.summary : "";
-			return mark + " " + String(item.name) + ms + summary;
-		}).join("\n"));
+		lines.push({
+			text: t("tools.recent"),
+			tone: "muted"
+		});
+		var recentReadings = [];
+		for (var at = 0; at < recent.length; at += 1) {
+			var entry = recent[at];
+			var mark = entry.ok === false ? "✗" : "✓";
+			var ms = typeof entry.ms === "number" ? " " + (entry.ms / 1e3).toFixed(1) + "s" : "";
+			if (ms !== "") recentReadings.push(ms.trim());
+			var summary = typeof entry.summary === "string" && entry.summary.length > 0 ? " · " + entry.summary : "";
+			lines.push({ segments: emphasize(mark + " " + String(entry.name) + ms + summary, recentReadings) });
+		}
 	}
-	return lines.join("\n");
+	return lines;
+}
+/**
+* `↑2 ↓1` 这类领先/落后标记里的数字（给悬停高亮用）。
+*
+* 直接扫字符串而不是重算一遍 git 语义：这里要的只是"已经画出去的那几个数"。
+*/
+function aheadBehindReadings(status) {
+	var out = [];
+	if (typeof status.ahead === "number" && status.ahead > 0) out.push(String(status.ahead));
+	if (typeof status.behind === "number" && status.behind > 0) out.push(String(status.behind));
+	return out;
 }
 function toolElapsedLabel(active, now) {
 	if (active === null || typeof active !== "object") return null;
@@ -2486,7 +3418,176 @@ function PillTip(props) {
 			left: String(left) + "px",
 			bottom: String(bottom) + "px"
 		}
-	}, tip.text);
+	}, tipLines(tip));
+}
+/**
+* 把 `tip.lines` 画成一行一个元素。
+*
+* 为什么要拆元素：用户要「数字亮、标签灰」。一整段字符串在 DOM 里只有一个文本节点，
+* 一种颜色，做不到；拆成行以后标签与数字各自带类名，颜色由 CSS 决定。
+*
+* 三种行：`label + value`（两段）、整行 `text` 带 `tone`、以及只有 `text` 的普通行。
+*/
+/** `tone` → 类名。默认（`primary`）不加类，走 `.dshh-tipValue` 的主文字色。 */
+function toneClass(tone) {
+	if (tone === "muted") return " dshh-tipMuted";
+	if (tone === "success") return " dshh-tipSuccess";
+	if (tone === "warn") return " dshh-tipWarn";
+	if (tone === "accent") return " dshh-tipAccent";
+	return "";
+}
+function tipLines(tip) {
+	var lines = Array.isArray(tip.lines) ? tip.lines : [];
+	if (lines.length === 0) return [tip.text];
+	return lines.map(function(line, index) {
+		if (Array.isArray(line.segments)) return h("div", {
+			key: "line-" + index,
+			className: "dshh-tipLine"
+		}, line.segments.map(function(segment, at) {
+			var segmentTone = segment.tone === void 0 ? toneClass(line.tone) : toneClass(segment.tone);
+			return h("span", {
+				key: "seg-" + at,
+				className: "dshh-tipSeg" + segmentTone
+			}, segment.text);
+		}));
+		if (typeof line.label === "string" || typeof line.value === "string") return h("div", {
+			key: "line-" + index,
+			className: "dshh-tipLine"
+		}, h("span", {
+			key: "label",
+			className: "dshh-tipLabel"
+		}, line.label ?? ""), h("span", {
+			key: "value",
+			className: "dshh-tipValue" + toneClass(line.tone)
+		}, line.value ?? ""));
+		return h("div", {
+			key: "line-" + index,
+			className: "dshh-tipLine" + toneClass(line.tone)
+		}, line.text ?? "");
+	});
+}
+
+//#endregion
+//#region src/client/components/token-panel.ts
+/**
+* 「给这个中转站配一枚后台凭据」的小面板。
+*
+* 为什么要有它：中转站的**账号余额**（后台那个"当前余额"）挂在 new-api 的
+* `/api/user/self` 上，只认后台凭据（PAT / 登录会话），`sk-` API Key 读不到。
+* 没有这枚凭据，胶囊就只能报"本 Key 已用"。
+*
+* 而没有这个面板时，唯一的配法是让用户去手改 `~/.dsh/.credentials.yaml` ——
+* 那是 DSH 的凭据库，手滑一个缩进整份凭据就读不出来了。所以这里做三件事：
+*
+*   1. 只问**一样东西**：令牌。引用名（`UR_ACCESS_TOKEN`）由宿主从设置投影推导，
+*      用户不用知道它叫什么；
+*   2. 粘贴即存：`⌘V` 或按钮都行，存完立刻重取一次读数（`saveProviderToken` 里做）；
+*   3. 令牌**不回显**：输入框 `type=password`，store 不持有它，宿主也不回传。
+*
+* 令牌本身从不进 localStorage、不进日志、不进快照 —— 它只走一次 RPC 到宿主的凭据服务。
+*/
+/**
+* 后台凭据设置面板。
+*
+* 平时返回 `null`（不占位）；`tokenPanel.open` 为真时才渲染。
+*
+* @param props - 取词与 store。
+* @returns 面板节点或 `null`。
+*/
+function TokenPanel(props) {
+	var store = props.store;
+	var t = props.t || function(key) {
+		return key;
+	};
+	var panel = useStore(store).tokenPanel;
+	var draftRef = react.default.useState("");
+	var draft = draftRef[0];
+	var setDraft = draftRef[1];
+	react.default.useEffect(function() {
+		if (!panel.open) setDraft("");
+	}, [panel.open]);
+	if (!panel.open) return null;
+	var provider = panel.provider ?? "";
+	/** 存一次；失败原因由 store 写进 `tokenPanel.error`。 */
+	function submit() {
+		var value = draft.trim();
+		if (value === "" || panel.saving) return;
+		setDraft("");
+		store.saveProviderToken(value);
+	}
+	var children = [h("div", {
+		key: "head",
+		className: "dshh-tokenHead"
+	}, h("span", {
+		key: "title",
+		className: "dshh-tokenTitle"
+	}, t("balance.tokenTitle")), h("span", {
+		key: "provider",
+		className: "dshh-tokenProvider"
+	}, provider)), h("div", {
+		key: "hint",
+		className: "dshh-tokenHint"
+	}, t("balance.tokenHint"))];
+	children.push(h("input", {
+		key: "input",
+		className: "dshh-tokenInput",
+		"data-dsh-hud": "token-input",
+		type: "password",
+		value: draft,
+		placeholder: t("balance.tokenPlaceholder"),
+		spellCheck: false,
+		autoComplete: "off",
+		disabled: panel.saving,
+		onInput: function(event) {
+			var next = event && event.target ? event.target.value : "";
+			setDraft(typeof next === "string" ? next : "");
+		},
+		onKeyDown: function(event) {
+			if (event && event.key === "Enter") {
+				if (typeof event.preventDefault === "function") event.preventDefault();
+				submit();
+			}
+			if (event && event.key === "Escape") store.closeTokenPanel();
+		}
+	}));
+	var refTitle = typeof panel.ref === "string" && panel.ref !== "" ? (panel.provider ?? "") + " · " + panel.ref : void 0;
+	children.push(h("div", {
+		key: "ref",
+		className: "dshh-tokenRef",
+		"data-dsh-hud": "token-ref",
+		title: refTitle
+	}, t("balance.tokenRef")));
+	children.push(h("div", {
+		key: "actions",
+		className: "dshh-tokenActions",
+		"data-dsh-hud": "token-actions"
+	}, h("button", {
+		key: "cancel",
+		type: "button",
+		className: "dshh-tokenCancel",
+		"data-dsh-hud": "token-cancel",
+		onClick: function() {
+			store.closeTokenPanel();
+		}
+	}, t("balance.tokenCancel")), h("button", {
+		key: "save",
+		type: "button",
+		className: "dshh-tokenSave",
+		"data-dsh-hud": "token-save",
+		disabled: panel.saving || draft.trim() === "",
+		onClick: submit
+	}, panel.saving ? t("balance.tokenSaving") : t("balance.tokenSave"))));
+	if (panel.error !== null) children.push(h("div", {
+		key: "error",
+		className: "dshh-tokenError",
+		role: "alert"
+	}, t("balance.tokenError." + panel.error)));
+	return h("div", {
+		className: "dshh-tokenPanel",
+		"data-dsh-hud": "token-panel",
+		role: "dialog",
+		"aria-label": t("balance.tokenTitle")
+	}, children);
 }
 
 //#endregion
@@ -3229,6 +4330,37 @@ const zh = {
 	"timer.created": "创建于 {time}",
 	"timer.work": "其中模型 {llm}、工具 {tool}",
 	"timer.turns": "{turns} 轮 / {steps} 步",
+	"balance.title": "DeepSeek 账号余额",
+	"balance.bonus": "赠送余额",
+	"balance.updated": "更新于 {time}",
+	"balance.stale": "最近一次刷新失败，显示的是 {time} 的数",
+	"balance.delta": "较上次刷新 {delta}（{time}）",
+	"balance.providerRemaining": "余额 {amount}",
+	"balance.providerUsedKey": "本 Key 已用 {amount}",
+	"balance.providerUsedAccount": "账号已用 {amount}",
+	"balance.providerRequests": "API 请求 {count}",
+	"balance.tokenTitle": "添加访问令牌",
+	"balance.tokenHint": "去站点「个人设置 → 访问令牌」新建，权限勾 profile:read，粘贴即可",
+	"balance.tokenPlaceholder": "粘贴访问令牌",
+	"balance.tokenSave": "保存",
+	"balance.tokenSaving": "保存中…",
+	"balance.tokenCancel": "取消",
+	"balance.tokenRef": "只存储于本地",
+	"balance.tokenError.unknown-provider": "不认识这个提供方，先确认会话用的模型来自哪个站",
+	"balance.tokenError.not-supported": "这个站不支持后台令牌",
+	"balance.tokenError.no-credentials": "凭据服务不可用",
+	"balance.tokenError.bad-token": "令牌格式不对（不该有空格或换行）",
+	"balance.tokenError.failed": "保存失败，稍后再试",
+	"balance.tokenError.unsupported": "这个宿主不支持在这里保存",
+	"balance.tokenError.reason": "保存失败",
+	"balance.usedShort": "已用",
+	"balance.providerUnknown": "--",
+	"balance.reason.unsupported": "该站不提供余额接口",
+	"balance.reason.no-key": "未配置密钥",
+	"balance.reason.network": "网络失败",
+	"balance.reason.unknown-provider": "模型来源不在设置里",
+	"balance.reason.no-provider": "会话还没定下模型来源",
+	"balance.reason.no-session": "会话还没就绪",
 	"turnImages.title": "本轮图片改动",
 	"turnImages.titleSession": "本会话图片改动",
 	"turnImages.open": "在内置预览里打开",
@@ -3365,6 +4497,37 @@ const en = {
 	"timer.created": "started {time}",
 	"timer.work": "model {llm}, tools {tool}",
 	"timer.turns": "{turns} turns / {steps} steps",
+	"balance.title": "DeepSeek account balance",
+	"balance.bonus": "Bonus balance",
+	"balance.updated": "updated {time}",
+	"balance.stale": "Last refresh failed; this is the balance from {time}",
+	"balance.delta": "{delta} since last refresh ({time})",
+	"balance.providerRemaining": "balance {amount}",
+	"balance.providerUsedKey": "{amount} used on this key",
+	"balance.providerUsedAccount": "{amount} used on this account",
+	"balance.providerRequests": "API requests {count}",
+	"balance.tokenTitle": "Add a dashboard access token",
+	"balance.tokenHint": "This site only exposes its current balance to a dashboard session (API keys cannot read it). Create an access token with the profile:read scope in the site settings, then paste it here.",
+	"balance.tokenPlaceholder": "Paste access token",
+	"balance.tokenSave": "Save",
+	"balance.tokenSaving": "Saving…",
+	"balance.tokenCancel": "Cancel",
+	"balance.tokenRef": "Stored locally only",
+	"balance.tokenError.unknown-provider": "Unknown provider — check which site this session’s model comes from",
+	"balance.tokenError.not-supported": "This site does not support dashboard tokens",
+	"balance.tokenError.no-credentials": "Credentials service unavailable",
+	"balance.tokenError.bad-token": "Malformed token (it must not contain spaces or newlines)",
+	"balance.tokenError.failed": "Could not save; try again",
+	"balance.tokenError.unsupported": "This host cannot save tokens here",
+	"balance.tokenError.reason": "Could not save",
+	"balance.usedShort": "used",
+	"balance.providerUnknown": "--",
+	"balance.reason.unsupported": "this site exposes no balance API",
+	"balance.reason.no-key": "no key configured",
+	"balance.reason.network": "network failure",
+	"balance.reason.unknown-provider": "model provider not in settings",
+	"balance.reason.no-provider": "session has no model provider yet",
+	"balance.reason.no-session": "session not ready",
 	"turnImages.title": "Images this turn",
 	"turnImages.titleSession": "Images this session",
 	"turnImages.open": "Open in the built-in preview",
@@ -3442,6 +4605,720 @@ const en = {
 	"err.transport": "Cannot reach the host half"
 };
 
+//#endregion
+//#region src/client/model-watch.ts
+/** 多久检查一次"这个会话的投影挂上了没"（纯本地读取，不发请求）。 */
+const BIND_RETRY_MS = 2e3;
+/**
+* 从投影读数里取"当前属于哪个提供方"。
+*
+* `pending` 优先：菜单里刚点下的那个模型还没真正用过，但账本已经该换了 ——
+* 胶囊跟的是"接下来要花谁的钱"，不是"上一次花了谁的钱"。
+*/
+function providerOf(value) {
+	if (value === null || typeof value !== "object") return null;
+	const chosen = value.pending ?? value.lastUsed;
+	if (chosen === null || typeof chosen !== "object") return null;
+	const provider = chosen.provider;
+	return typeof provider === "string" && provider !== "" ? provider : null;
+}
+/**
+* 盯着当前会话的 `modelSelection`：提供方一变就**立刻**重取一次余额。
+*
+* @param ctx - 客户端插件上下文（只用 `get`）。
+* @param store - 共享 store（`loadProviderBalance(true)` 会跳过 TTL）。
+* @returns 卸载函数（停掉定时器与订阅）。
+*/
+function watchModelSelection(ctx, store) {
+	const raw = ctx.get("sessions");
+	if (raw === void 0 || raw === null || typeof raw.binding !== "function") return function() {};
+	const sessions = raw;
+	let disposed = false;
+	let boundSession = null;
+	let unsubscribe = null;
+	let lastProvider = null;
+	let retry = null;
+	/** 投影还没就绪时才需要补挂；挂上了就把定时器停掉（不白跑）。 */
+	function startRetry() {
+		if (retry !== null || disposed) return;
+		retry = window.setInterval(function() {
+			sync(store.getSnapshot());
+		}, BIND_RETRY_MS);
+	}
+	function stopRetry() {
+		if (retry === null) return;
+		window.clearInterval(retry);
+		retry = null;
+	}
+	function detach() {
+		if (unsubscribe !== null) {
+			const stop = unsubscribe;
+			unsubscribe = null;
+			try {
+				stop();
+			} catch {}
+		}
+		boundSession = null;
+		lastProvider = null;
+	}
+	/** 把订阅挂到当前会话的投影上（投影/绑定还没就绪就下次再试）。 */
+	function attach(sessionId) {
+		const faceOf = (sessions.binding?.(sessionId))?.session?.projections?.faceOf;
+		if (typeof faceOf !== "function") return;
+		let face;
+		try {
+			face = faceOf("modelSelection");
+		} catch {
+			return;
+		}
+		if (face === void 0 || face === null || typeof face.subscribe !== "function") return;
+		boundSession = sessionId;
+		stopRetry();
+		lastProvider = providerOf(face.getSnapshot());
+		unsubscribe = face.subscribe(function() {
+			if (disposed) return;
+			const next = providerOf(face.getSnapshot());
+			if (next === null || next === lastProvider) return;
+			lastProvider = next;
+			store.loadProviderBalance(true);
+		});
+	}
+	/** 看一眼当前会话，必要时重挂。 */
+	function sync(state) {
+		if (disposed) return;
+		const sessionId = state.sessionId;
+		if (typeof sessionId !== "string" || sessionId === "") {
+			detach();
+			return;
+		}
+		if (sessionId === boundSession) return;
+		detach();
+		attach(sessionId);
+		if (boundSession === null) startRetry();
+	}
+	const stopStore = store.subscribe(function() {
+		sync(store.getSnapshot());
+	});
+	sync(store.getSnapshot());
+	return function() {
+		disposed = true;
+		stopRetry();
+		stopStore();
+		detach();
+	};
+}
+
+//#endregion
+//#region src/client/store/account.ts
+/**
+* 建「账号余额」这一片。
+* @param ctx - 客户端根上下文（用到 `effect` / `inject` / `locale`）。
+* @param getState - 读当前快照。
+* @param set - 浅合并写快照。
+* @returns 本片对外暴露的方法。
+*/
+function createAccountSlice(ctx, getState, set) {
+	/** 账号命名空间；没注入到就是 `null`（这个宿主没有账号插件，或还没起来）。 */
+	var accountService = null;
+	/** 启动清单服务：只借用它的 `manifest.release.version`。 */
+	var modulesService = null;
+	/** 平台链接（用量页 / 充值页）：`getState()` 给，取到一次就一直用。 */
+	var links = {
+		usageUrl: null,
+		topUpUrl: null
+	};
+	/** 在途请求：三次触发撞到一起时共用一次。 */
+	var inflight = null;
+	/** 上次真正发请求的时刻（TTL 的起点）。 */
+	var lastAttemptAt = 0;
+	/** 上次的结果档位：成功用长 TTL，其它用短 TTL。 */
+	var lastReady = false;
+	if (typeof ctx.inject === "function") {
+		ctx.effect(function() {
+			return ctx.inject(["remote", "remote.account"], function(scope) {
+				accountService = scope.remote && scope.remote.account ? scope.remote.account : null;
+				probe.log("account", { bound: accountService !== null });
+				if (accountService !== null) loadBalance();
+				return function() {
+					accountService = null;
+				};
+			});
+		}, "dsh-hud: account service");
+		ctx.effect(function() {
+			return ctx.inject(["modules"], function(scope) {
+				modulesService = scope.modules || null;
+				if (modulesService !== null) loadBalance();
+				return function() {
+					modulesService = null;
+				};
+			});
+		}, "dsh-hud: boot manifest");
+	}
+	/**
+	* 宿主这一版的版本号。
+	*
+	* 为什么非要它：账号接口的调用元数据要带 `x-client-version`，而 DSH 内置插件那半边
+	* 是打包时**内联**了版本常量的（`"0.2.1-rc.3"`），外部插件的产物里没有这行字面量。
+	* 所以从启动清单里现取：`window.__DSH_BOOT__.release.version` 是宿主自己发布在每份
+	* 图里的发布身份，`ctx.modules.manifest.release.version` 是同一份数据的服务视角。
+	* 两条都取不到就**不发请求**（宁可没有这一枚胶囊，也不要带一个假版本号去问平台）。
+	*
+	* @returns 版本字符串；都取不到回 `null`。
+	*/
+	function releaseVersion() {
+		var boot = globalThis.__DSH_BOOT__;
+		var fromBoot = boot && boot.release ? boot.release.version : void 0;
+		if (typeof fromBoot === "string" && fromBoot !== "") return fromBoot;
+		var manifest = modulesService ? modulesService.manifest : null;
+		var fromModules = manifest && manifest.release ? manifest.release.version : void 0;
+		if (typeof fromModules === "string" && fromModules !== "") return fromModules;
+		return null;
+	}
+	/** 当前界面语言（宿主再把它折成平台用的 `zh_CN` / `en_US`）。 */
+	function activeLocale() {
+		try {
+			var locale = ctx.locale;
+			var snapshot = locale && typeof locale.getSnapshot === "function" ? locale.getSnapshot() : null;
+			var active = snapshot && snapshot.active;
+			if (typeof active === "string" && active !== "") return active;
+		} catch (error) {}
+		return "en-US";
+	}
+	/**
+	* 读账号投影里的两个平台链接。
+	*
+	* 为什么单独要它：余额接口只回钱包，**累计消耗 / 本月消耗只在平台用量页上**
+	* （平台页还有「今天 / 本月 / 自定」那种时间维度，DSH 不代理那份数据）。
+	* 这一枚胶囊因此提供一条直达那一页的路 —— 链接从账号投影里拿，不写死域名。
+	*
+	* `getState` 是直连方法（不碰网络），也不是所有宿主版本都有：缺了就安静地
+	* 返回上一次的值，胶囊退化成"只有余额"。
+	*
+	* @param service - 账号命名空间。
+	* @returns 两个链接（取不到就是上一次的、可能都是 `null`）。
+	*/
+	function readLinks(service) {
+		if (typeof service.getState !== "function") return Promise.resolve(links);
+		return Promise.resolve().then(function() {
+			return service.getState();
+		}).then(function(result) {
+			var value = result && result.ok === true ? result.value : null;
+			var next = value && value.links ? value.links : null;
+			if (next === null) return links;
+			var usageUrl = typeof next.usageUrl === "string" ? next.usageUrl : null;
+			var topUpUrl = typeof next.topUpUrl === "string" ? next.topUpUrl : null;
+			if (usageUrl === null && topUpUrl === null) return links;
+			return {
+				usageUrl,
+				topUpUrl
+			};
+		}).catch(function() {
+			return links;
+		});
+	}
+	/** 账号接口的调用元数据（时区偏移按"东为正"给，与 DSH 自己一致）。 */
+	function clientMetadata(version) {
+		return {
+			version,
+			locale: activeLocale(),
+			timezoneOffsetSeconds: -(/* @__PURE__ */ new Date()).getTimezoneOffset() * 60
+		};
+	}
+	/** 平台给的数组 → 本片的钱包列表（逐项校验；形状不对的项直接丢，不猜）。 */
+	function walletsOf(value) {
+		if (!Array.isArray(value)) return [];
+		var out = [];
+		for (var index = 0; index < value.length; index += 1) {
+			var item = value[index];
+			if (!item || typeof item !== "object") continue;
+			if (typeof item.currency !== "string" || typeof item.balance !== "string") continue;
+			out.push({
+				currency: item.currency,
+				balance: item.balance
+			});
+		}
+		return out;
+	}
+	/** 两份快照的账目是否一致（一致就不 set，省一次重渲染）。 */
+	function sameWallets(left, right) {
+		if (left.length !== right.length) return false;
+		for (var index = 0; index < left.length; index += 1) {
+			if (left[index].currency !== right[index].currency) return false;
+			if (left[index].balance !== right[index].balance) return false;
+		}
+		return true;
+	}
+	function publish(next) {
+		var previous = getState().balance;
+		if (next === null) {
+			if (previous !== null) set({ balance: null });
+			return null;
+		}
+		var previousPrev = previous !== null && previous.prev ? previous.prev.at : null;
+		var nextPrev = next.prev ? next.prev.at : null;
+		if (!(previous !== null && previous.failed === next.failed && previous.usageUrl === next.usageUrl && previousPrev === nextPrev && sameWallets(previous.wallets, next.wallets) && sameWallets(previous.bonus, next.bonus))) set({ balance: next });
+		return next;
+	}
+	/** 读失败：留着上一次的数字、打上 `failed`，让界面能说"可能已过期"。 */
+	function markFailed() {
+		lastReady = false;
+		var previous = getState().balance;
+		if (previous === null) {
+			probe.log("balance", {
+				failed: true,
+				had: false
+			});
+			return null;
+		}
+		probe.log("balance", {
+			failed: true,
+			had: true
+		});
+		return publish({
+			wallets: previous.wallets,
+			bonus: previous.bonus,
+			at: previous.at,
+			failed: true,
+			usageUrl: previous.usageUrl,
+			topUpUrl: previous.topUpUrl,
+			prev: previous.prev || {
+				wallets: previous.wallets,
+				at: previous.at
+			}
+		});
+	}
+	/**
+	* 取一次余额。
+	* @param force - 跳过 TTL（点击胶囊时用）。
+	* @returns 最新快照；没法取时回上一次的（可能为 `null`）。**从不 reject**。
+	*/
+	function loadBalance(force) {
+		var now = Date.now();
+		if (force !== true && lastAttemptAt !== 0) {
+			var ttl = lastReady ? BALANCE_TTL_MS : BALANCE_RETRY_MS;
+			if (now - lastAttemptAt < ttl) return Promise.resolve(getState().balance);
+		}
+		if (accountService === null) return Promise.resolve(getState().balance);
+		var version = releaseVersion();
+		if (version === null) {
+			probe.log("balance", { skipped: "no-release-version" });
+			return Promise.resolve(getState().balance);
+		}
+		if (inflight !== null) return inflight;
+		var service = accountService;
+		lastAttemptAt = now;
+		inflight = Promise.resolve().then(function() {
+			return Promise.all([service.getBalance(clientMetadata(version)), readLinks(service)]);
+		}).then(function(pair) {
+			links = pair[1];
+			inflight = null;
+			var result = pair[0];
+			if (!result || result.ok !== true) return markFailed();
+			var payload = result.value;
+			if (payload === null || payload === void 0) {
+				lastReady = false;
+				probe.log("balance", { signedOut: true });
+				return publish(null);
+			}
+			if (payload.status !== "ready") return markFailed();
+			var wallets = walletsOf(payload.value);
+			var bonus = walletsOf(payload.bonusWallets).filter(function(wallet) {
+				return isPositiveAmount(wallet.balance);
+			});
+			if (wallets.length === 0 && bonus.length === 0) {
+				lastReady = false;
+				probe.log("balance", { empty: true });
+				return publish(null);
+			}
+			lastReady = true;
+			var at = Date.now();
+			var before = getState().balance;
+			probe.log("balance", {
+				wallets: wallets.length,
+				bonus: bonus.length
+			});
+			return publish({
+				wallets,
+				bonus,
+				at,
+				failed: false,
+				usageUrl: links.usageUrl,
+				topUpUrl: links.topUpUrl,
+				prev: before !== null ? {
+					wallets: before.wallets,
+					at: before.at
+				} : null
+			});
+		}).catch(function(error) {
+			inflight = null;
+			probe.log("balance", { thrown: error instanceof Error ? error.message : String(error) });
+			return markFailed();
+		});
+		return inflight;
+	}
+	return { loadBalance };
+}
+
+//#endregion
+//#region src/client/store/provider.ts
+/** 同一会话两次取数的最小间隔（宿主侧缓存一分钟，这里配合它不空转）。 */
+const PROVIDER_TTL_MS = 6e4;
+/** 没取到时多久再试。 */
+const PROVIDER_RETRY_MS = 3e4;
+/**
+* 失败后的第一次重试间隔，之后逐次翻倍，到 `PROVIDER_RETRY_MS` 封顶。
+*
+* 为什么要退避而不是一上来就 30 秒：重启/刚开会话时**宿主常常还答不上来**
+*（模型选择投影还没就绪），第一次问必然落空。用固定 30 秒兜的话，胶囊要空半分钟 ——
+* 用户看到的就是"重启后没立即显示"。1 秒起、翻倍到 30 秒，正常情况一两秒内就出来了，
+* 而真出故障时也不会变成每秒一次的重试风暴。
+*/
+const PROVIDER_RETRY_BASE_MS = 1e3;
+/** 端点名（宿主半 `rpc.ts` 里登记的那个）。 */
+const ENDPOINT = "provider-balance";
+/** 一个可展示的钱包列表（逐项校验，形状不对的项直接丢，不猜）。 */
+function walletsOf(value) {
+	if (!Array.isArray(value)) return [];
+	var out = [];
+	for (var index = 0; index < value.length; index += 1) {
+		var item = value[index];
+		if (!item || typeof item !== "object") continue;
+		if (typeof item.currency !== "string" || typeof item.balance !== "string") continue;
+		out.push({
+			currency: item.currency,
+			balance: item.balance
+		});
+	}
+	return out;
+}
+/** 十进制字符串校验（不合法就当没给）。 */
+function amountOf(value) {
+	if (typeof value !== "string") return null;
+	var raw = value.trim();
+	return /^-?\d+(?:\.\d+)?$/.test(raw) ? raw : null;
+}
+/** 端点答复 → 快照；形状不对回 `null`（当作"读不到"）。 */
+function balanceOf(payload) {
+	if (payload.available !== true || payload.account === true) return null;
+	var raw = payload.balance;
+	if (raw === null || typeof raw !== "object") return null;
+	var item = raw;
+	if (typeof item.provider !== "string" || item.provider === "") return null;
+	if (item.kind !== "official" && item.kind !== "relay") return null;
+	var remaining = amountOf(item.remaining);
+	var usedAccount = amountOf(item.usedAccount);
+	var usedKey = amountOf(item.usedKey);
+	var requests = typeof item.requests === "number" && Number.isFinite(item.requests) ? item.requests : null;
+	var wallets = walletsOf(item.wallets);
+	if (remaining === null && usedAccount === null && usedKey === null && wallets.length === 0) return null;
+	return {
+		provider: item.provider,
+		kind: item.kind,
+		currency: typeof item.currency === "string" && item.currency !== "" ? item.currency : null,
+		remaining,
+		usedAccount,
+		usedKey,
+		requests,
+		placeholderLimit: item.placeholderLimit === true,
+		wallets,
+		bonus: walletsOf(item.bonus),
+		at: typeof item.at === "number" && Number.isFinite(item.at) ? item.at : Date.now()
+	};
+}
+/**
+* 失败答复里的"是哪个提供方 / 为什么读不到"。
+*
+* 有这两个字段，胶囊就能画成 `ur —`（并说清是"该站没有余额接口"还是"没配密钥"），
+* 而不是直接消失 —— 消失分不清"这个站真的没有"和"插件坏了"。
+*
+* @param result - 宿主的答复信封。
+* @returns `{provider, reason}`；读不出就给 `null`（调用方按无信息处理）。
+*/
+function failureFieldsOf(result) {
+	var payload = result?.value;
+	if (payload === null || typeof payload !== "object") return {
+		provider: null,
+		reason: null
+	};
+	var item = payload;
+	return {
+		provider: typeof item.provider === "string" && item.provider !== "" ? item.provider : null,
+		reason: typeof item.reason === "string" && item.reason !== "" ? item.reason : null
+	};
+}
+/** 宿主给的「后台凭据配了没」；形状不对就当没有（老宿主不给这个字段）。 */
+function tokenOf(payload) {
+	if (payload === null || typeof payload !== "object") return null;
+	var item = payload.token;
+	if (item === null || typeof item !== "object") return null;
+	var token = item;
+	if (typeof token.ref !== "string" || token.ref === "") return null;
+	return {
+		ref: token.ref,
+		configured: token.configured === true
+	};
+}
+/**
+* 建「提供方余额」这一片。
+* @param ctx - 客户端根上下文（只用 `connection.rpc`）。
+* @param getState - 读当前快照。
+* @param set - 浅合并写快照。
+* @returns 本片对外暴露的方法。
+*/
+/**
+* 失败后的重试间隔：1s、2s、4s、8s、16s，然后封顶在 `PROVIDER_RETRY_MS`。
+*
+* @param failStreak - 连续失败次数（0 = 还没失败过）。
+* @returns 毫秒。
+*/
+function providerRetryDelayMs(failStreak) {
+	if (!(failStreak > 0)) return PROVIDER_RETRY_BASE_MS;
+	var delay = PROVIDER_RETRY_BASE_MS * Math.pow(2, failStreak - 1);
+	return delay > 3e4 ? PROVIDER_RETRY_MS : delay;
+}
+function createProviderSlice(ctx, getState, set) {
+	/** 在途请求（一次只打一个）。 */
+	var inflight = null;
+	/** 请求代次：每发一次 +1，落地时对不上号就作废（见 `loadProviderBalance`）。 */
+	var requestTicket = 0;
+	/** 连续失败次数（成功即归零）：只用来算退避间隔。 */
+	var failStreak = 0;
+	/** 上次真正发请求的时刻。 */
+	var lastAttemptAt = 0;
+	/** 上次取数针对哪个会话 —— 换了会话就必须重取，不能吃上一个会话的账本。 */
+	var lastSessionId = null;
+	/** 上次是成功（长 TTL）还是失败（短 TTL）。 */
+	var lastReady = false;
+	/** 写一份新结论（没变化就不 set，省一次重渲染）。 */
+	function publish(mode, balance, extra, token) {
+		var previous = getState().provider;
+		var nextToken = token === void 0 ? previous?.token ?? null : token;
+		var next = {
+			mode,
+			balance,
+			provider: extra?.provider ?? balance?.provider ?? null,
+			reason: extra?.reason ?? null,
+			token: nextToken
+		};
+		if (previous === void 0 || previous.mode !== next.mode || previous.provider !== next.provider || previous.reason !== next.reason || (previous.token?.configured ?? null) !== (next.token?.configured ?? null) || (previous.token?.ref ?? null) !== (next.token?.ref ?? null) || previous.balance === null !== (next.balance === null) || previous.balance !== null && next.balance !== null && (previous.balance.provider !== next.balance.provider || previous.balance.remaining !== next.balance.remaining || previous.balance.usedAccount !== next.balance.usedAccount || previous.balance.usedKey !== next.balance.usedKey || previous.balance.requests !== next.balance.requests || previous.balance.at !== next.balance.at)) set({ provider: next });
+		return next;
+	}
+	/**
+	* 换会话时把账本清成"还不知道"。
+	*
+	* 为什么必须清：不清就会**在新会话里继续挂着上一个会话的读数和站名**，直到新答案回来。
+	* 那段时间屏幕上写的是 `ur` 的钱，而这次会话可能花的是 `muyuan` 的钱 —— 正是
+	* "绝不把别人的钱画成你的"那条约束要防的事。清成 `unknown` 后胶囊画 `--`，
+	* 一眼就知道"还在查"，比显示一个错的数强。
+	*/
+	function resetForSession() {
+		requestTicket += 1;
+		inflight = null;
+		lastAttemptAt = 0;
+		lastSessionId = null;
+		failStreak = 0;
+		lastReady = false;
+		set({ provider: {
+			mode: "unknown",
+			balance: null,
+			provider: null,
+			reason: null,
+			token: null
+		} });
+	}
+	/**
+	* 取一次"当前会话模型来源"的余额。
+	* @param force - 跳过 TTL（点击胶囊时用）。
+	* @returns 最新结论（可能沿用上一次）；**从不 reject**。
+	*/
+	function loadProviderBalance(force) {
+		var sessionId = getState().sessionId;
+		var now = Date.now();
+		var switched = sessionId !== lastSessionId;
+		if (force !== true && !switched && lastAttemptAt !== 0) {
+			var ttl = lastReady ? PROVIDER_TTL_MS : providerRetryDelayMs(failStreak);
+			if (now - lastAttemptAt < ttl) return Promise.resolve(getState().provider);
+		}
+		if (inflight !== null && !switched && force !== true) return inflight;
+		if (typeof sessionId !== "string" || sessionId === "") {
+			lastSessionId = null;
+			return Promise.resolve(publish("unknown", null));
+		}
+		if (switched) failStreak = 0;
+		lastAttemptAt = now;
+		lastSessionId = sessionId;
+		var ticket = ++requestTicket;
+		inflight = Promise.resolve().then(function() {
+			return ctx.connection.rpc.call(CHANNEL, ENDPOINT, { args: {
+				sessionId,
+				force: force === true
+			} });
+		}).then(function(result) {
+			if (ticket !== requestTicket) return getState().provider;
+			inflight = null;
+			if (getState().sessionId !== sessionId) return getState().provider;
+			if (!result || result.ok !== true || !result.value) {
+				lastReady = false;
+				failStreak += 1;
+				probe.log("provider-balance", { failed: true });
+				return keepOr("unavailable", failureFieldsOf(result), tokenOf(result?.value));
+			}
+			var payload = result.value;
+			var token = tokenOf(payload);
+			if (payload.available === true && payload.account === true) {
+				lastReady = true;
+				failStreak = 0;
+				probe.log("provider-balance", { account: true });
+				return publish("account", null, void 0, token);
+			}
+			var balance = balanceOf(payload);
+			if (balance === null) {
+				lastReady = false;
+				failStreak += 1;
+				probe.log("provider-balance", {
+					unavailable: payload.available !== true ? payload.reason : "empty",
+					message: payload.message ?? null
+				});
+				return keepOr("unavailable", failureFieldsOf(result), token);
+			}
+			lastReady = true;
+			failStreak = 0;
+			probe.log("provider-balance", {
+				provider: balance.provider,
+				kind: balance.kind,
+				remaining: balance.remaining === null,
+				usedAccount: balance.usedAccount === null,
+				usedKey: balance.usedKey === null,
+				placeholder: balance.placeholderLimit
+			});
+			return publish("provider", balance, void 0, token);
+		}).catch(function(error) {
+			if (ticket !== requestTicket) return getState().provider;
+			inflight = null;
+			lastReady = false;
+			failStreak += 1;
+			probe.log("provider-balance", { thrown: error instanceof Error ? error.message : String(error) });
+			return keepOr("unavailable");
+		});
+		return inflight;
+	}
+	/**
+	* 读不到时的结论：**有**上一次的 provider 余额就继续用它（网络抖一下不该让胶囊消失），
+	* 没有才落到 `unavailable`。
+	*
+	* @param fallbackMode - 没有上一次结果时用的模式。
+	* @returns 写进快照的结论。
+	*/
+	function keepOr(fallbackMode, extra, token) {
+		var previous = getState().provider;
+		var stale = previous !== void 0 && previous.mode === "provider" && previous.balance !== null ? previous.balance : null;
+		if (stale !== null) return publish("provider", stale, void 0, token);
+		return publish(fallbackMode, null, extra, token);
+	}
+	/**
+	* 打开后台凭据设置面板。
+	*
+	* @param provider - 哪个提供方。
+	* @param ref - 宿主给的凭据引用名（老宿主不给就 `null`，面板照样能存）。
+	*/
+	function openTokenPanel(provider, ref) {
+		set({ tokenPanel: {
+			open: true,
+			provider,
+			ref,
+			supported: true,
+			saving: false,
+			error: null
+		} });
+	}
+	/** "关着"的面板状态：取消、存成功、初始值都从这里来（免得三份各自漂移）。 */
+	function closedTokenPanel() {
+		return {
+			open: false,
+			provider: null,
+			ref: null,
+			supported: true,
+			saving: false,
+			error: null
+		};
+	}
+	/** 收起设置面板（取消 / 存完自动收起都走这里）。 */
+	function closeTokenPanel() {
+		set({ tokenPanel: closedTokenPanel() });
+	}
+	/**
+	* 把用户粘贴的令牌交给宿主，写进凭据存储。
+	*
+	* 为什么由宿主写：令牌只该落在 DSH 自己的凭据库里（`~/.dsh/.credentials.yaml`），
+	* 客户端不碰文件、不存 localStorage —— 存那里等于把密钥摊在一个任何脚本都读得到的地方。
+	*
+	* @param token - 用户粘贴的令牌（宿主会校验长度与形状）。
+	* @returns 是否存成功（面板据此显示错误或自动收起）。
+	*/
+	async function saveProviderToken(token) {
+		var panel = getState().tokenPanel;
+		var provider = panel.provider;
+		if (provider === null || provider === "") {
+			probe.log("provider-credential", { failed: "no-provider" });
+			set({ tokenPanel: {
+				...getState().tokenPanel,
+				saving: false,
+				error: "unknown-provider"
+			} });
+			return false;
+		}
+		set({ tokenPanel: {
+			...panel,
+			saving: true,
+			error: null
+		} });
+		try {
+			var result = await ctx.connection.rpc.call(CHANNEL, "provider-credential", { args: {
+				provider,
+				token
+			} });
+			var value = result && result.ok === true ? result.value : null;
+			if (!value || value.saved !== true) {
+				var reason = value?.reason ?? "failed";
+				probe.log("provider-credential", {
+					provider,
+					reason,
+					message: value?.message ?? null
+				});
+				set({ tokenPanel: {
+					...getState().tokenPanel,
+					saving: false,
+					error: reason
+				} });
+				return false;
+			}
+			probe.log("provider-credential", {
+				provider,
+				saved: true,
+				ref: value.ref ?? null
+			});
+			set({ tokenPanel: closedTokenPanel() });
+			loadProviderBalance(true);
+			return true;
+		} catch (error) {
+			probe.log("provider-credential", { thrown: error instanceof Error ? error.message : String(error) });
+			set({ tokenPanel: {
+				...getState().tokenPanel,
+				saving: false,
+				error: "failed"
+			} });
+			return false;
+		}
+	}
+	return {
+		loadProviderBalance,
+		resetForSession,
+		openTokenPanel,
+		closeTokenPanel,
+		saveProviderToken
+	};
+}
+
 //#endregion
 //#region src/client/store/attribution.ts
 function createAttributionSlice(ctx, getState, set, helpers) {
@@ -4180,20 +6057,23 @@ function createSessionInfoSlice(ctx, getState, set) {
 //#region src/client/store/tip.ts
 function createTipSlice(getState, set) {
 	/** 显示某枚胶囊的悬停提示（`rect` 由调用方从 `getBoundingClientRect()` 给）。 */
-	function showTip(key, text, rect) {
-		if (typeof text !== "string" || text.length === 0) return;
+	function showTip(key, content, rect) {
+		var normalized = normalizeTipContent(content);
+		if (normalized.text.length === 0) return;
+		var at = rect && typeof rect === "object" ? {
+			left: rect.left,
+			top: rect.top,
+			right: rect.right
+		} : {
+			left: 0,
+			top: 0,
+			right: 0
+		};
 		set({ tip: {
 			key,
-			text,
-			rect: rect && typeof rect === "object" ? {
-				left: rect.left,
-				top: rect.top,
-				right: rect.right
-			} : {
-				left: 0,
-				top: 0,
-				right: 0
-			}
+			text: normalized.text,
+			lines: normalized.lines,
+			rect: at
 		} });
 	}
 	/** 收起悬停提示。带 `key` 时只在"还是这一枚"的情况下收 —— 免得旧的 leave 把新的提示关掉。 */
@@ -4209,12 +6089,12 @@ function createTipSlice(getState, set) {
 	* 为什么走 store 而不是就地渲染气泡：气泡必须**逃出行内盒**（不被 dock 那行的裁切与
 	* 堆叠上下文限制），所以它由 `shell.overlay` 里一枚单独的座位画，位置用 `position:fixed`。
 	*/
-	function tipHandlers(key, textOf) {
+	function tipHandlers(key, contentOf) {
 		return {
 			onPointerEnter: function(event) {
 				var target = event && event.currentTarget ? event.currentTarget : null;
 				var rect = target && typeof target.getBoundingClientRect === "function" ? target.getBoundingClientRect() : null;
-				showTip(key, textOf(), rect);
+				showTip(key, contentOf(), rect);
 			},
 			onPointerLeave: function() {
 				hideTip(key);
@@ -4547,6 +6427,19 @@ function createStore(ctx) {
 			sessionId: null,
 			value: null
 		},
+		balance: null,
+		provider: {
+			mode: "unknown",
+			balance: null
+		},
+		tokenPanel: {
+			open: false,
+			provider: null,
+			ref: null,
+			supported: true,
+			saving: false,
+			error: null
+		},
 		tip: null,
 		/** 侧栏行内 chip 要的摘要：一次批量取回，按 sessionId 索引。 */
 		rows: {
@@ -4600,6 +6493,12 @@ function createStore(ctx) {
 	var sessionInfoSlice = createSessionInfoSlice(ctx, function() {
 		return state;
 	}, set);
+	var accountSlice = createAccountSlice(ctx, function() {
+		return state;
+	}, set);
+	var providerSlice = createProviderSlice(ctx, function() {
+		return state;
+	}, set);
 	var toolsSlice = createToolsSlice(ctx, function() {
 		return state;
 	}, set);
@@ -4798,7 +6697,21 @@ function createStore(ctx) {
 	return {
 		getSnapshot,
 		subscribe,
-		bindSession: attributionSlice.bindSession,
+		/**
+		* 绑定当前会话（胶囊/turn-images 的 effect 调它）。
+		*
+		* 绑完之后**立刻**去问"这个会话的模型来源是哪个账本"：早先这一步挂在另一个 effect 里，
+		* 而那个 effect 的依赖只有 `sessionId` —— 它先于 `bindSession` 跑，此时 store 里的
+		* `sessionId` 还是 `null`，于是 provider 侧永远是 `unknown`（胶囊一直画平台账号余额），
+		* 要等五分钟那一次轮询才会纠正。会话一换就顺手问，才是对的时机。
+		*/
+		bindSession: function(sessionId, cwd) {
+			var previous = state.sessionId;
+			attributionSlice.bindSession(sessionId, cwd);
+			if (state.sessionId === previous) return;
+			providerSlice.resetForSession();
+			if (state.sessionId !== null) providerSlice.loadProviderBalance();
+		},
 		refresh,
 		openPanel,
 		togglePanel,
@@ -4815,6 +6728,12 @@ function createStore(ctx) {
 		loadSessionChanges: attributionSlice.loadSessionChanges,
 		loadSessionTime: sessionInfoSlice.loadSessionTime,
 		loadPromptHistory: sessionInfoSlice.loadPromptHistory,
+		loadBalance: accountSlice.loadBalance,
+		resetForSession: providerSlice.resetForSession,
+		loadProviderBalance: providerSlice.loadProviderBalance,
+		openTokenPanel: providerSlice.openTokenPanel,
+		closeTokenPanel: providerSlice.closeTokenPanel,
+		saveProviderToken: providerSlice.saveProviderToken,
 		showTip: tipSlice.showTip,
 		hideTip: tipSlice.hideTip,
 		tipHandlers: tipSlice.tipHandlers,
@@ -4961,6 +6880,53 @@ function apply(ctx) {
 			window.removeEventListener("focus", onFocus);
 		};
 	}, "dsh-hud: focus refresh");
+	ctx.effect(function() {
+		store.loadBalance();
+		var id = window.setInterval(function() {
+			if (document.visibilityState === "hidden") return;
+			store.loadBalance();
+		}, BALANCE_POLL_MS);
+		return function() {
+			window.clearInterval(id);
+		};
+	}, "dsh-hud: account balance poll");
+	/**
+	* 「当前会话模型来源」的余额：自己的节拍，比账号那一路快。
+	*
+	* 为什么是 30 秒而不是 5 分钟：第一次取数常常赶在投影就绪之前（刚开会话、刚换模型），
+	* 那时宿主答不上来；如果下一次机会在五分钟之后，胶囊就有五分钟是空白的。
+	* 真实请求次数由 store 自己的 TTL 兜着（成功 60s、失败 30s），这里只是"多久问一次"。
+	*/
+	ctx.effect(function() {
+		var stopped = false;
+		var handle = null;
+		/**
+		* 下一次隔多久再问。
+		*
+		* 稳态是 `PROVIDER_POLL_MS`（30 秒）；**还没问出来**的时候用 1 秒重问 ——
+		* 这才是"重启后胶囊迟迟不出现"的症结：宿主在刚启动那一下常常还读不到模型选择投影，
+		* 第一次问必然落空，而原来的固定 30 秒节拍意味着胶囊要空半分钟。
+		* 真实请求次数仍由 store 的 TTL 兜着（成功 60s、失败按 1s 起指数退避到 30s），
+		* 这里只是"多久看一眼"，看的时候多半是空转。
+		*/
+		function nextDelay() {
+			var ledger = store.getSnapshot().provider;
+			return ledger !== void 0 && ledger !== null && ledger.mode !== "unknown" && typeof ledger.provider === "string" && ledger.provider !== "" ? PROVIDER_POLL_MS : PROVIDER_RETRY_TICK_MS;
+		}
+		function tick() {
+			if (stopped) return;
+			if (document.visibilityState !== "hidden") store.loadProviderBalance();
+			handle = window.setTimeout(tick, nextDelay());
+		}
+		tick();
+		return function() {
+			stopped = true;
+			if (handle !== null) window.clearTimeout(handle);
+		};
+	}, "dsh-hud: provider balance poll");
+	ctx.effect(function() {
+		return watchModelSelection(ctx, store);
+	}, "dsh-hud: model selection -> provider balance");
 	ctx.slots.inject("shell.overlay", function() {
 		return ctx.slots.register({
 			name: "shell.overlay",
@@ -4972,6 +6938,17 @@ function apply(ctx) {
 			}
 		}, PillTip);
 	});
+	ctx.slots.inject("shell.overlay", function() {
+		return ctx.slots.register({
+			name: "shell.overlay",
+			id: "dsh-hud-token-panel",
+			order: 15,
+			locale: NS,
+			inject: function() {
+				return { store };
+			}
+		}, TokenPanel);
+	});
 	ctx.slots.inject("shell.overlay", function() {
 		return ctx.slots.register({
 			name: "shell.overlay",