dsh-subusage 0.10.9 → 0.10.11

package/README.md

@@ -6,7 +6,7 @@
 
 > **English.** dsh-subusage shows subscription quota and balance for the AI providers you already use, as a pill next to the model selector in DeepSeek Harness. Provider switches and credentials live in one settings page, and other plugins or agents can read the same snapshot through a read-only quota API.
 
-[![npm version](https://img.shields.io/badge/npm-0.10.9-blue)](https://www.npmjs.com/package/dsh-subusage)
+[![npm version](https://img.shields.io/badge/npm-0.10.11-blue)](https://www.npmjs.com/package/dsh-subusage)
 [![license](https://img.shields.io/badge/license-MIT-green)](#license--security--许可与安全)
 [![DSH](https://img.shields.io/badge/DSH-%3E%3D0.2.0--rc.1%20%3C0.3.0--0-informational)](#compatibility--兼容性)
 
@@ -18,7 +18,7 @@
 | 设置页 | 开关与凭据集中管理；缺凭据、Cookie 过期时把修复入口直接送到卡片上 | 设置 → 订阅用量 → 提供商管理 |
 | 只读额度 API | 其他插件与 Agent 复用同一份额度数据，不必各自对接各家接口 | Agent 工具 `subusage_quota`、Host 服务 `subUsage.quota()` |
 
-药丸示例：`✓ 余 87%`、`⚠ 7d 余 12%`、`✕ 7d 已达限额`。多窗口取最差一窗，点击查看完整明细；成功结果按提供商缓存 **60 秒**，手动刷新可跳过普通 TTL（仍遵守上游限流退避与 `Retry-After`）。
+药丸只画图形：每个额度窗口一根彩色余量条（绿 / 黄 / 橙 / 红，满 = 100% 剩余），正常时不写字；需要留意时追加一个词，如 `周 偏少`、`5时 已用尽`、`需配置`、`拉取失败`。点击弹层，顶部先给结论（额度充足 / 余量偏低 / 即将用尽 / 额度已用尽…），下面是各窗口的剩余百分比与重置倒计时；成功结果按提供商缓存 **60 秒**，手动刷新可跳过普通 TTL（仍遵守上游限流退避与 `Retry-After`）。
 
 本插件**不注册模型路由**，药丸按 provider id 匹配；因此使用哪个插件提供该模型路由不影响匹配，id 对不上时才不显示。
 
@@ -385,13 +385,13 @@ node scripts/check-browser-runtime.mjs   # 需要工作区可解析 playwright-c
 
 ### 界面预览
 
-以下为 0.7.0 的离线组件测试截图，使用虚构用量数据，不包含真实账号信息，也不是运行中的 DSH 截图。
+以下为 0.10.11 的离线组件测试截图，使用虚构用量数据，不包含真实账号信息，也不是运行中的 DSH 截图。
 
 深色设置页：查看订阅用量、管理凭据与提供商。
 
 ![深色订阅设置页（离线测试预览）](https://raw.githubusercontent.com/KouzakiUmi/dsh-subusage/main/assets/screenshots/settings-dark.png)
 
-浅色用量弹层：查看每日与每周额度、用量明细。
+浅色用量弹层：顶部先给结论（额度充足 / 余量偏低 / 即将用尽…），下面是各窗口的剩余百分比与重置时间。右下角是收起态药丸——每个窗口一根彩条，正常时不写字。
 
 ![浅色 NanoGPT 用量弹层（离线测试预览）](https://raw.githubusercontent.com/KouzakiUmi/dsh-subusage/main/assets/screenshots/usage-popover-light.png)
 

package/lib/client.js

@@ -31,7 +31,7 @@ window.__ModuleLoader__.load({
 			lightOk: "全部拉取成功",
 			lightFail: "存在拉取失败",
 			statusOk: "数据获取成功",
-			statusPartial: "数据不完整，额度未知",
+			statusPartial: "数据不完整",
 			statusCache: "缓存数据",
 			cacheAge: "缓存 · {n} 分钟前",
 			cacheUnknown: "缓存时间未知",
@@ -91,16 +91,27 @@ window.__ModuleLoader__.load({
 			restDays: "{n} 天",
 			restHours: "{n} 小时",
 			restMins: "{n} 分钟",
-			badgeOk: "可用",
-			badgeHigh: "偏高",
-			badgeTight: "紧张",
-			badgeLimited: "不可用",
+			// 档位词只描述「还剩多少」；旧的「偏高」没写清主语（用量高还是余量高），读起来自相矛盾。
+			// 键名 badgeHigh 保留（它对应已用 71–90% 的档位），文案改成「偏少」。
+			badgeOk: "充足",
+			badgeHigh: "偏少",
+			badgeTight: "即将用尽",
+			badgeLimited: "已用尽",
 			badgeBlocked: "受连累",
+			statusPlenty: "额度充足",
+			statusLow: "余量偏低",
+			statusTight: "即将用尽",
+			statusExhausted: "额度已用尽",
+			statusBlocked: "暂不可用",
+			statusWorst: "最紧张：{w} · 剩 {p}%",
+			statusOnly: "{w} · 剩 {p}%",
+			statusResetIn: "{rest}后重置",
+			remainWord: "剩余",
 			numUsed: "已用 {p}%",
 			numLimited: "⚠ 已达限额",
 			numBlocked: "⚠ 暂不可用",
 			pillRemaining: "余 {p}%",
-			pillLimited: "已达限额",
+			pillLimited: "已用尽",
 			pillBlocked: "受连累",
 			needConfigShort: "需配置",
 			pillNeedKey: "未配置 API Key —— 请打开 设置 → 订阅用量 填写，或导出同名环境变量后重启。",
@@ -144,7 +155,7 @@ window.__ModuleLoader__.load({
 			lightOk: "All fetches succeeded",
 			lightFail: "Some fetches failed",
 			statusOk: "Fetch OK",
-			statusPartial: "Partial data; quota unknown",
+			statusPartial: "Partial data",
 			statusCache: "Cached data",
 			cacheAge: "Cached · {n} min ago",
 			cacheUnknown: "Cache age unknown",
@@ -204,16 +215,26 @@ window.__ModuleLoader__.load({
 			restDays: "{n} d",
 			restHours: "{n} h",
 			restMins: "{n} min",
-			badgeOk: "OK",
-			badgeHigh: "High",
-			badgeTight: "Tight",
-			badgeLimited: "Unavailable",
+			// Tier words describe what is LEFT; the old "High" never said high what.
+			badgeOk: "Plenty",
+			badgeHigh: "Low",
+			badgeTight: "Almost out",
+			badgeLimited: "Used up",
 			badgeBlocked: "Blocked",
+			statusPlenty: "Plenty left",
+			statusLow: "Running low",
+			statusTight: "Almost out",
+			statusExhausted: "Quota used up",
+			statusBlocked: "Temporarily blocked",
+			statusWorst: "Tightest: {w} · {p}% left",
+			statusOnly: "{w} · {p}% left",
+			statusResetIn: "resets in {rest}",
+			remainWord: "left",
 			numUsed: "Used {p}%",
 			numLimited: "⚠ Limit reached",
 			numBlocked: "⚠ Unavailable",
 			pillRemaining: "{p}% left",
-			pillLimited: "Limit reached",
+			pillLimited: "Used up",
 			pillBlocked: "Blocked",
 			needConfigShort: "Setup",
 			pillNeedKey: "No API key — open Settings → Subscription usage to fill one in, or export the same-named env variable and restart.",
@@ -389,13 +410,16 @@ window.__ModuleLoader__.load({
 			}
 			return worst;
 		}
+		function remainingPercent(percent) {
+			return Math.round(Math.max(0, 100 - (Number(percent) || 0)) * 10) / 10;
+		}
 		/** 药丸文案：永远答「还能用多少」（余），限额/连坐直说。多窗带窗口短名。 */
 		function pillText(w, multi, t) {
 			// 短标签走 locale（中文「周 / 月 / 日」，英文 1w / 1m / 1d），不让人猜 W 是哪个窗口。
 			const short = multi ? `${t(KIND_SHORT[w.kind] ?? "srolling")} ` : "";
 			if (w.status === "rate-limited" && !w.cascade) return `${short}${t("pillLimited")}`;
 			if (w.status === "rate-limited") return `${short}${t("pillBlocked")}`;
-			return `${short}${t("pillRemaining").replace("{p}", String(Math.round(Math.max(0, 100 - w.percent) * 10) / 10))}`;
+			return `${short}${t("pillRemaining").replace("{p}", String(remainingPercent(w.percent)))}`;
 		}
 		/** extras 标签：plan / account / balance 三类，未知类型回退为余额。 */
 		function extraLabel(x, t) {
@@ -917,14 +941,136 @@ window.__ModuleLoader__.load({
 			);
 		}
 
+		// ── 视觉原语：扁平 + 状态色（药丸 / 弹层 / 设置页共用同一套）────────────────
+		// 注意：下面这些都是**普通函数调用**而不是 React 组件元素——它们不用 Hook，直接内联展开，
+		// 测试里的 React 桩也能看到它们渲染出的文字。
+		const TRACK = "rgba(128,128,128,.22)";
+		const NEUTRAL = "#94a3b8";
+		const INFO = "#3b82f6";
+		/** #rrggbb → rgba(r,g,b,a)：底色与描边都由状态色派生，保证同一状态到处同一个颜色。 */
+		function alpha(color, a) {
+			const m = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color || "");
+			return m ? `rgba(${parseInt(m[1], 16)},${parseInt(m[2], 16)},${parseInt(m[3], 16)},${a})` : `rgba(128,128,128,${a})`;
+		}
+		/** 状态色实心圆上的字形色：黄色配深字，其余白字。 */
+		function onColor(color) { return color === "#eab308" ? "#1f1300" : "#fff"; }
+		/** 状态色用作文字时的版本：纯黄在浅色主题上看不清，加深一档。 */
+		function textTone(color) { return color === "#eab308" ? "#ca8a04" : color; }
+		function windowLeft(w) { return w.status === "rate-limited" ? 0 : remainingPercent(w.percent); }
+		/** 状态色实心圆 + 字形（✓ ⚠ ✕ ? ! ⚙ ℹ …）：颜色之外还有形状，不靠颜色单独传达。 */
+		function statusGlyph(color, icon, size) {
+			return h("span", { "aria-hidden": "true", style: { flex: "none", width: size, height: size, borderRadius: "50%", background: color, color: onColor(color), display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: Math.round(size * 0.62), fontWeight: 700, lineHeight: 1 } }, icon);
+		}
+		/** 小标签：状态色圆点 + 继承前景色的文字（文字不着色，深浅主题都清晰）。 */
+		function statusChip(text, color) {
+			return h("span", { style: { display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, lineHeight: 1.5, padding: "1px 8px", borderRadius: 999, background: alpha(color, ".14"), whiteSpace: "nowrap" } },
+				h("span", { "aria-hidden": "true", style: { width: 6, height: 6, borderRadius: "50%", background: color } }), text);
+		}
+		/**
+		 * 药丸里的迷你余量条：一个窗口一根横条，满 = 100% 剩余，颜色是该窗口自己的档位色。
+		 * 条的顺序与弹层里窗口行的顺序一致，所以不用文字也能一眼对上；窗口越多条越细（最多 5 根）。
+		 */
+		function miniBars(windows, muted) {
+			const list = windows.slice(0, 5), n = list.length;
+			const barH = n <= 1 ? 6 : n === 2 ? 5 : n === 3 ? 4 : n === 4 ? 3 : 2;
+			return h("span", { "aria-hidden": "true", style: { display: "inline-flex", flexDirection: "column", justifyContent: "center", gap: n <= 2 ? 3 : 2, width: 34, flex: "none", opacity: muted ? 0.5 : 1 } },
+				list.map((w, i) => {
+					const left = windowLeft(w);
+					return h("span", { key: `${w.kind}:${i}`, style: { display: "block", height: barH, borderRadius: 99, background: TRACK, overflow: "hidden" } },
+						h("span", { style: { display: "block", width: `${left}%`, minWidth: left > 0 ? 3 : 0, height: "100%", borderRadius: 99, background: usageTier(w).color } }));
+				}));
+		}
+		/**
+		 * 订阅整体状态：一个对象回答「现在订阅怎么样」，药丸、弹层横幅、设置页横幅共用，
+		 * 所以三处永远同一个结论、同一个颜色。优先级：额度用尽 > Cookie 到期 > 需配置 > 读取失败 > 缓存/不完整 > 额度档位。
+		 * 返回 { key, color, icon, title, sub, short, tinted, ... }：
+		 *   title/sub 给弹层横幅；short 是药丸上的**一个词**（正常时为空——绿色余量条本身就是答案）；
+		 *   tinted 为真时药丸整体染色，提醒「这里需要你看一眼」。
+		 */
+		function computeStatus(rawEntry, { failed = null, failState, providerId, t, getLocale }) {
+			const entry = canShowUsage(rawEntry) ? rawEntry : null;
+			const windows = entry ? entry.windows || [] : [];
+			const worst = windows.length ? worstWindow(windows) : null;
+			const worstTier = worst ? usageTier(worst) : null;
+			const multi = windows.length > 1;
+			const degraded = !!(rawEntry && (rawEntry.state !== "ok" || rawEntry.freshness === "stale" || rawEntry.coverage === "partial"));
+			const state = rawEntry ? rawEntry.state : failState;
+			const expiry = cookieExpiry(rawEntry, t);
+			const expiring = !!(expiry && expiry.rank >= 2);
+			// 倒计时只用于展示，永远不能盖过官方接口的判定：凭据已被拒绝（state=error）时主文案仍是失败原因；
+			// 例外是已过期——它本身就是「请重新登录」的行动项。
+			const expiryActionable = expiring && (!(rawEntry && rawEntry.state === "error") || expiry.expired);
+			const windowName = (w) => t(KIND_LABEL[w.kind] ?? "wall");
+			const windowShort = (w) => multi ? `${t(KIND_SHORT[w.kind] ?? "srolling")} ` : "";
+			const windowSub = (w) => {
+				const head = t(multi ? "statusWorst" : "statusOnly").replace("{w}", windowName(w)).replace("{p}", String(windowLeft(w)));
+				const ms = w.resetsAt ? Date.parse(w.resetsAt) - Date.now() : NaN;
+				return ms > 0 ? `${head} · ${t("statusResetIn").replace("{rest}", durationText(ms, t))}` : head;
+			};
+			const needConfig = state === "no-key" ? (providerId === "commandcode" ? t("pillNeedCommandcode") : providerId === "xai-oauth" ? t("pillNeedGrok") : t("pillNeedKey"))
+				: state === "no-cookie" ? t("pillNeedCookie") : null;
+			const base = { entry, windows, worst, worstTier, multi, degraded, expiry, expiring, expiryActionable, needConfig };
+			if ((!rawEntry && !failed && !failState) || state === "loading") return { ...base, key: "loading", color: NEUTRAL, icon: "…", title: t("loading"), sub: "", short: "", tinted: false };
+			if (state === "disabled") return { ...base, key: "disabled", color: NEUTRAL, icon: "–", title: t("statusDisabled"), sub: "", short: t("statusDisabled"), tinted: false };
+			if (worstTier && worstTier.rank >= 4) {
+				const title = t(worst.cascade ? "statusBlocked" : "statusExhausted");
+				return { ...base, key: "blocked", color: worstTier.color, icon: "✕", title, sub: windowSub(worst), short: windowShort(worst) + t(worst.cascade ? "pillBlocked" : "pillLimited"), tinted: true };
+			}
+			if (expiryActionable) {
+				return { ...base, key: "cookie", color: expiry.color, icon: expiry.icon, title: expiry.label, sub: t("mimoCookieExpiresAt").replace("{time}", new Date(expiry.expiresAt).toLocaleString(getLocale())), short: expiry.label, tinted: true };
+			}
+			if (needConfig) {
+				return { ...base, key: "config", color: INFO, icon: "⚙", title: t(state === "no-key" ? "statusNoKey" : "statusNoCookie"), sub: needConfig, short: t(state === "no-key" ? "needConfigShort" : "statusNoCookie"), tinted: true };
+			}
+			if (!entry) {
+				return { ...base, key: "error", color: "#ef4444", icon: "!", title: t("statusError"), sub: failed || (rawEntry && rawEntry.error) || "", short: t("statusError"), tinted: true };
+			}
+			if (degraded) {
+				// 过期缓存即使 state=error 也要叫「缓存数据」：读取失败是原因，用户看到的是上次的数字。
+				const label = rawEntry.freshness === "stale" ? t("statusCache") : rawEntry.coverage === "partial" ? t("statusPartial") : statusText(rawEntry, t);
+				const worse = worstTier && worstTier.rank >= 3;
+				return { ...base, key: "degraded", color: worse ? worstTier.color : "#eab308", icon: "?", title: label, sub: [cacheAge(rawEntry, t), worst ? windowSub(worst) : null].filter(Boolean).join(" · "), short: label, tinted: true };
+			}
+			if (worstTier) {
+				const sub = windowSub(worst);
+				if (worstTier.rank >= 3) return { ...base, key: "tight", color: worstTier.color, icon: "⚠", title: t("statusTight"), sub, short: windowShort(worst) + t(worstTier.badge), tinted: true };
+				if (worstTier.rank === 2) return { ...base, key: "low", color: worstTier.color, icon: "⚠", title: t("statusLow"), sub, short: windowShort(worst) + t(worstTier.badge), tinted: true };
+				return { ...base, key: "ok", color: worstTier.color, icon: "✓", title: t("statusPlenty"), sub, short: "", tinted: false };
+			}
+			// 成功但没有额度窗口：只有余额（或什么都没有）。余额就是唯一信息，不画成「充足」。
+			const balance = balanceText(entry, t);
+			return { ...base, key: "balance", color: NEUTRAL, icon: "ℹ", title: balance ?? t("noUsageData"), sub: "", short: balance ?? t("noUsageData"), tinted: false };
+		}
+		/** 弹层 / 设置页顶部的状态横幅：左侧实心状态圆，右侧一句结论 + 一行依据。 */
+		function statusBanner(status) {
+			return h("div", { role: "status", style: { display: "flex", alignItems: "center", gap: 12, marginTop: 10, padding: "12px 14px", borderRadius: 12, background: alpha(status.color, ".10"), border: `1px solid ${alpha(status.color, ".28")}` } },
+				statusGlyph(status.color, status.icon, 30),
+				h("div", { style: { minWidth: 0, flex: 1 } },
+					h("div", { style: { fontSize: 15, fontWeight: 700, lineHeight: 1.3, overflowWrap: "anywhere" } }, status.title),
+					status.sub ? h("div", { style: { fontSize: 11.5, opacity: 0.75, marginTop: 2, overflowWrap: "anywhere", whiteSpace: "pre-wrap" } }, status.sub) : null));
+		}
+		/** 套餐名（extras 里 kind=plan）：放在标题行右侧做成小标签，不再混在余额明细里。 */
+		function planName(entry) {
+			const row = entry && Array.isArray(entry.extras) ? entry.extras.find((x) => x.kind === "plan") : undefined;
+			return row ? row.value : null;
+		}
+		function RemainingBar({ value, color, label }) {
+			const pct = Math.max(0, Math.min(100, Number(value) || 0));
+			return h("div", {
+				role: "progressbar",
+				"aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, "aria-label": label,
+				style: { width: "100%", height: 8, marginTop: 8, borderRadius: 99, background: TRACK, overflow: "hidden" }
+			}, h("div", { style: { width: `${pct}%`, minWidth: pct > 0 ? 4 : 0, height: "100%", borderRadius: 99, background: color } }));
+		}
 		/**
-		 * 单窗口行（药丸弹层与设置页共用）：徽标 + 已用% 主数字 + 进度条 + 明细行。
+		 * 单窗口行（药丸弹层与设置页共用）：徽标 + 余量% 主数字 + 进度条（满格=100% 剩余，随已用扣减）+ 明细行。
 		 * 明细分两行：用量/适用范围一行，重置时间一行。挤在一行时「重置于 …（还有 …）」
 		 * 会在窄弹层里被从中间折断，读起来像属性和数值分了家。
 		 */
 		function UsageWindowRow({ w, t, getLocale, uncertain = false }) {
 			const tier = uncertain && w.status !== "rate-limited" ? { icon: "?", badge: "badgeUnknown", color: "#b7791f", rank: 2 } : usageTier(w);
 			const blocked = w.status === "rate-limited";
+			const left = blocked ? 0 : remainingPercent(w.percent);
 			const usageLine = [
 				w.detail && typeof w.detail.used === "number" && typeof w.detail.limit === "number" && w.detail.limit > 0
 					? t("detailUsed").replace("{used}", fmtTokens(w.detail.used)).replace("{limit}", fmtTokens(w.detail.limit)).replace("{unit}", w.detail.unit || "")
@@ -938,31 +1084,22 @@ window.__ModuleLoader__.load({
 				resetLine(w, t, getLocale),
 				w.cascade ? t("cascadeLimited") + (w.detail && w.detail.blockedBy ? ` [${w.detail.blockedBy.join(", ")}]` : "") : null
 			].filter(Boolean).join(" · ");
+			// 档位词只在「需要留意」时出现：充足时绿色长条与大数字已经说明一切，再贴一个「充足」只是噪音。
+			const alert = tier.rank >= 2;
+			const label = blocked ? t(tier.num) : t("pillRemaining").replace("{p}", String(left));
 			return h("div", {
-				style: {
-					marginTop: 8, padding: "8px 10px", borderRadius: 8,
-					background: blocked ? "rgba(239,68,68,.08)" : "transparent",
-					border: blocked ? "1px solid rgba(239,68,68,.35)" : "1px solid transparent"
-				}
+				style: { marginTop: 8, padding: "10px 12px", borderRadius: 10, background: blocked ? alpha(tier.color, ".09") : "rgba(128,128,128,.07)" }
 			},
 				h("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
-					h("span", { style: { fontSize: 12, opacity: 0.85, minWidth: 52 } }, t(KIND_LABEL[w.kind] ?? "wall")),
-					h("span", {
-						style: {
-							fontSize: 11, padding: "1px 8px", borderRadius: 999, whiteSpace: "nowrap",
-							border: `1px solid ${tier.color}`, color: tier.color
-						}
-					}, `${tier.icon} ${t(tier.badge)}`),
+					h("span", { style: { fontSize: 12.5, fontWeight: 600 } }, t(KIND_LABEL[w.kind] ?? "wall")),
+					alert ? statusChip(t(tier.badge), tier.color) : null,
 					h("span", { style: { flex: 1 } }),
-					h("strong", { style: { fontSize: 13, color: numColor(w), whiteSpace: "nowrap" } },
-						blocked ? t(tier.num) : t("numUsed").replace("{p}", String(w.percent)))
+					h("strong", { style: { fontSize: 18, lineHeight: 1.1, color: alert ? textTone(tier.color) : "inherit", whiteSpace: "nowrap" } }, `${left}%`),
+					h("span", { style: { fontSize: 11, opacity: 0.65, whiteSpace: "nowrap" } }, t("remainWord"))
 				),
-				h("progress", {
-					max: 100, value: Math.min(100, w.percent),
-					style: { width: "100%", height: 6, marginTop: 6, accentColor: tier.color }
-				}),
+				RemainingBar({ value: left, color: tier.color, label }),
 				usageLine || resetParts
-					? h("div", { style: { fontSize: 11, opacity: 0.7, marginTop: 4 } },
+					? h("div", { style: { fontSize: 11, opacity: 0.7, marginTop: 6 } },
 						usageLine ? h("div", { style: { overflowWrap: "anywhere" } }, usageLine) : null,
 						resetParts ? h("div", { style: { marginTop: usageLine ? 2 : 0, overflowWrap: "anywhere" } }, resetParts) : null)
 					: null
@@ -1061,72 +1198,53 @@ window.__ModuleLoader__.load({
 			}, [open]);
 			const rawEntry = snapshot && snapshot.entry;
 			if (rawEntry?.visible === false || rawEntry?.state === "disabled") return null;
-			const entry = canShowUsage(rawEntry) ? rawEntry : null;
-			const ok = !!(rawEntry && rawEntry.state === "ok" && rawEntry.freshness !== "stale" && rawEntry.coverage !== "partial");
-			const light = ok ? "🟢" : (snapshot !== null || failed !== null ? "🔴" : "🟡");
-			const windows = entry ? entry.windows || [] : [];
-			const worst = windows.length > 0 ? worstWindow(windows) : null;
-			const worstTier = worst ? usageTier(worst) : null;
-			const degraded = !!(rawEntry && (rawEntry.state !== "ok" || rawEntry.freshness === "stale" || rawEntry.coverage === "partial"));
+			// 整体状态由 computeStatus 一处判定：药丸、弹层横幅、设置页横幅读的是同一个结论。
+			const st = computeStatus(rawEntry, { failed, failState, providerId, t, getLocale });
+			const { entry, windows, worst, degraded, expiry, expiring } = st;
 			const summary = worst ? pillText(worst, windows.length > 1, t) : entry ? (balanceText(entry, t) ?? t("noUsageData")) : t("providerUnavailable");
-			const stateText = !ok ? (snapshot && snapshot.entry ? snapshot.entry.state : failState) : void 0;
-			const stateLabel = rawEntry ? statusText(rawEntry, t) : failState === "no-key" ? t("statusNoKey") : failState === "no-cookie" ? t("statusNoCookie") : failed ? t("statusError") : t("loading");
-			// 配置缺失类失败给可行动指引，不倒裸报错。
-			const needConfig = stateText === "no-key" ? (providerId === "commandcode" ? t("pillNeedCommandcode") : providerId === "xai-oauth" ? t("pillNeedGrok") : t("pillNeedKey"))
-				: stateText === "no-cookie" ? t("pillNeedCookie")
-				: null;
-			const isConfig = stateText === "no-key" || stateText === "no-cookie";
-			// 余额请求成功不代表有额度窗口（例如小米接口暂时只返回余额）。
-			// Cookie 临近到期是需要重新登录的行动项：除额度已用尽外，优先于普通余量与降级提示。
-			const expiry = cookieExpiry(rawEntry, t);
-			const quotaBlocked = !!(worstTier && worstTier.rank >= 4);
-			const expiring = !!(expiry && expiry.rank >= 2);
-			// 倒计时只用于展示，永远不能盖过官方接口的判定：凭据已被拒绝（state=error）时
-			// 主文案必须仍是失败原因，否则「还有 2 小时到期」会把重新登录推迟掉。
-			// 例外是已过期：它本身就是「请重新登录」的行动项，比通用错误文案更具体。
-			const expiryActionable = expiring && (!(rawEntry && rawEntry.state === "error") || (expiry && expiry.expired));
-			// 底色与文字沿用额度告警语汇：已过期与额度用尽同为红，30 分钟内为橙，2 小时内为黄。
-			const alertStyle = quotaBlocked || (expiry && expiry.expired) ? { background: "rgba(239,68,68,.10)", borderColor: "rgba(239,68,68,.45)" } : expiryActionable && expiry.rank >= 3 ? { background: "rgba(249,115,22,.10)", borderColor: "rgba(249,115,22,.45)" } : expiryActionable ? { background: "rgba(234,179,8,.10)", borderColor: "rgba(234,179,8,.45)" } : {};
-			const triggerColor = quotaBlocked ? worstTier.color : expiryActionable ? expiry.color : worstTier && worstTier.rank > 1 ? worstTier.color : null;
-			const triggerIcon = quotaBlocked ? worstTier.icon : expiryActionable ? expiry.icon : degraded ? "⚠" : worstTier ? worstTier.icon : ok ? "ℹ" : isConfig ? "⚙" : light;
-			const triggerText = quotaBlocked ? (worst ? pillText(worst, windows.length > 1, t) : entry ? t("noUsageData") : stateLabel) : expiryActionable ? expiry.label : worst ? `${degraded ? statusText(rawEntry, t) + " · " : ""}${pillText(worst, windows.length > 1, t)}` : entry ? `${degraded ? stateLabel + " · " : ""}${(balanceText(entry, t) ?? t("noUsageData"))}` : isConfig ? t("needConfigShort") : stateLabel;
+			// 药丸只回答「订阅现在怎么样」：状态图形 + 至多一个词。正常时只剩彩色余量条——
+			// 厂商名就是旁边的模型选择器，具体百分比点开再看；文字与数字都收进 title / aria-label。
+			const tip = `${label}: ${st.title}${st.key === "ok" || st.key === "low" || st.key === "tight" || st.key === "blocked" || st.key === "degraded" ? " · " + summary : ""}${expiring && st.key !== "cookie" && st.key !== "blocked" ? " · " + expiry.label : ""}`;
+			const glyph = windows.length && st.key !== "cookie" && st.key !== "config" ? miniBars(windows, degraded) : statusGlyph(st.color, st.icon, 16);
 			return h("span", { ref: root, style: { position: "relative", display: "inline-flex", alignItems: "center" } },
 				h("button", {
 					type: "button",
 					"aria-expanded": open,
 					"aria-haspopup": "dialog",
-					"aria-label": `${label}: ${stateLabel} · ${summary}${expiring && !quotaBlocked ? " · " + expiry.label : ""}`,
-					title: `${label}: ${stateLabel} · ${summary}${expiring && !quotaBlocked ? " · " + expiry.label : ""}`,
+					"aria-label": tip,
+					title: tip,
 					onClick: () => setOpen(!open),
 					style: {
-						display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 10px",
-						borderRadius: 999, border: "1px solid rgba(128,128,128,.35)", background: "transparent",
-						color: "inherit", font: "inherit", cursor: "pointer", whiteSpace: "nowrap",
-						...alertStyle
+						display: "inline-flex", alignItems: "center", gap: 8, padding: st.short ? "4px 11px 4px 9px" : "5px 10px", minHeight: 26, boxSizing: "border-box",
+						borderRadius: 999, border: `1px solid ${st.tinted ? alpha(st.color, ".45") : "rgba(128,128,128,.3)"}`,
+						background: st.tinted ? alpha(st.color, ".10") : "transparent",
+						color: "inherit", font: "inherit", fontSize: 12, fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap"
 					}
 				},
-					h("span", { "aria-hidden": "true", style: { fontSize: 11, lineHeight: 1 } }, triggerIcon),
-					h("span", { style: triggerColor ? { color: triggerColor } : null }, triggerText),
-					failed && ok ? h("span", { style: { opacity: 0.7, fontSize: 11 } }, `(${t("unavailable")})`) : null
+					glyph,
+					st.short ? h("span", null, st.short) : null
 				),
 				open && h("div", {
 					role: "dialog",
 					"aria-label": `${label} ${t("nav")}`,
 					style: {
 						position: "absolute", bottom: "calc(100% + 6px)", right: 0, zIndex: 50,
-						width: "min(340px, calc(100vw - 24px))", boxSizing: "border-box", overflowWrap: "anywhere", padding: 12, borderRadius: 10,
+						width: "min(340px, calc(100vw - 24px))", boxSizing: "border-box", overflowWrap: "anywhere", padding: 14, borderRadius: 14,
 						background: "var(--dsh-surface, Canvas)", color: "var(--dsh-text, CanvasText)",
-						border: "1px solid rgba(128,128,128,.35)",
-						boxShadow: "0 8px 24px rgba(0,0,0,.35)", font: "12px/1.6 sans-serif"
+						border: "1px solid rgba(128,128,128,.28)",
+						boxShadow: "0 12px 32px rgba(0,0,0,.28)", font: "12px/1.5 sans-serif"
 					}
 				},
-					h("strong", null, label),
-					needConfig ? h("p", { style: { margin: "6px 0 0", opacity: 0.9 } }, needConfig) : null,
-					failed && !needConfig ? h("p", { style: { color: "#f87171", margin: "6px 0 0", whiteSpace: "pre-wrap" } }, failed) : null,
-					!ok && !snapshot && !failed ? h("p", { style: { margin: "6px 0 0", opacity: 0.8 } }, t("loading")) : null,
-					cacheAge(rawEntry, t) ? h("p", { style: { color: "#b7791f" } }, cacheAge(rawEntry, t)) : null,
-					// 到期提醒常驻弹层：即使用量正常，也让用户看见 Cookie 还剩多久。
-					expiry ? h("p", { role: "status", style: { margin: "6px 0 0", color: expiring ? expiry.color : "inherit" } }, `${expiry.label} · ${t("mimoCookieExpiresAt").replace("{time}", new Date(expiry.expiresAt).toLocaleString(getLocale()))}`) : null,
+					// 标题行：厂商名 + 套餐名小标签。
+					h("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
+						h("strong", { style: { fontSize: 13 } }, label),
+						h("span", { style: { flex: 1 } }),
+						planName(entry) ? h("span", { style: { fontSize: 11, fontWeight: 600, padding: "1px 8px", borderRadius: 999, background: "rgba(128,128,128,.16)", whiteSpace: "nowrap" } }, planName(entry)) : null),
+					// 状态横幅：先给结论（充足 / 偏少 / 即将用尽 / 已用尽 / 需配置 / 失败…）与一行依据。
+					statusBanner(st),
+					failed && st.key !== "error" && !st.needConfig ? h("p", { style: { color: "#f87171", margin: "8px 0 0", whiteSpace: "pre-wrap" } }, failed) : null,
+					// Cookie 到期常驻弹层：即使用量正常，也让用户看见 Cookie 还剩多久（已在横幅里说明时不重复）。
+					expiry && st.key !== "cookie" ? h("p", { role: "status", style: { margin: "8px 0 0", fontSize: 11, color: expiring ? textTone(expiry.color) : "inherit", opacity: expiring ? 1 : 0.75 } }, `${expiry.label} · ${t("mimoCookieExpiresAt").replace("{time}", new Date(expiry.expiresAt).toLocaleString(getLocale()))}`) : null,
 					// 用量账户标注：账户区 ready 时说明上方数字属于哪个账户；自动轮换时明确不跟随实际服务账户。
 					providerId === "commandcode" && ccState && ccState.status === "ready"
 						? h("p", { style: { margin: "6px 0 0", fontSize: 11, opacity: 0.75 } },
@@ -1136,18 +1254,24 @@ window.__ModuleLoader__.load({
 					// 额度线切换时插一条分组标题：AFP 的日限额只覆盖视觉 / 语音模型与 Harness，与文本模型的
 					// 5 小时 / 周 / 月不是同一条线，混排会让人把两条线的配额当成一组来互相比较。
 					UsageWindowList({ windows, t, getLocale, uncertain: degraded }),
-					entry && entry.extras && entry.extras.length > 0
-						? h("div", { style: { marginTop: 10, opacity: 0.85 } },
-							entry.extras.map((x) => h("div", { key: x.kind }, `${extraLabel(x, t)}: ${x.value}`)))
+					// 余额等补充项：套餐名已在标题行，这里只剩「标签 … 数值」两列。
+					entry && entry.extras && entry.extras.some((x) => x.kind !== "plan")
+						? h("div", { style: { marginTop: 10, padding: "6px 12px", borderRadius: 10, background: "rgba(128,128,128,.07)" } },
+							entry.extras.filter((x) => x.kind !== "plan").map((x) => h("div", { key: x.kind, style: { display: "flex", justifyContent: "space-between", gap: 12, padding: "3px 0" } },
+								h("span", { style: { opacity: 0.7 } }, extraLabel(x, t)),
+								h("strong", { style: { fontWeight: 600, textAlign: "right" } }, x.value))))
 						: null,
 					providerId === "commandcode" ? h(CommandCodeAccountSwitch, { cc, ccState, t }) : null,
-					snapshot ? h("div", { style: { marginTop: 10, opacity: 0.7 } }, `${t("lastUpdated")} ${new Date(snapshot.updatedAt).toLocaleString(getLocale())}`) : null,
-					h("button", {
-						type: "button",
-						onClick: () => retry.current(),
-						disabled: refreshing,
-						style: { marginTop: 10, padding: "4px 12px", borderRadius: 6, border: "1px solid rgba(128,128,128,.5)", background: "transparent", color: "inherit", cursor: "pointer" }
-					}, t(refreshing ? "refreshing" : "retry"))
+					// 页脚：更新时间 + 刷新。
+					h("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 12 } },
+						h("span", { style: { flex: 1, minWidth: 0, fontSize: 11, opacity: 0.6 } }, snapshot ? `${t("lastUpdated")} ${new Date(snapshot.updatedAt).toLocaleString(getLocale())}` : ""),
+						h("button", {
+							type: "button",
+							onClick: () => retry.current(),
+							disabled: refreshing,
+							style: { padding: "4px 12px", borderRadius: 8, border: "none", background: alpha(INFO, ".14"), color: "inherit", font: "inherit", fontWeight: 600, cursor: refreshing ? "default" : "pointer", whiteSpace: "nowrap" }
+						}, t(refreshing ? "refreshing" : "refresh"))
+					)
 				)
 			);
 		}
@@ -1362,6 +1486,7 @@ window.__ModuleLoader__.load({
 			const usageMeta = PROVIDER_META[usageId];
 			// 需要行动时（缺凭据/凭据被拒/Cookie 即将到期）在用量面板里内联修复入口。
 			const usageAction = usageActionKind(usageEntry, usageId, t);
+			const usageStatus = computeStatus(usageEntry, { failed: usageEntry && usageEntry.state !== "ok" ? usageEntry.error || usageEntry.state : null, failState: usageEntry && usageEntry.state, providerId: usageId, t, getLocale });
 			// 行动按钮把人送到对应厂商的凭据编辑器：展开管理区、打开该行、滚动过去。
 			const revealEditor = (target) => {
 				openEditor(target);
@@ -1503,20 +1628,28 @@ window.__ModuleLoader__.load({
 								else if (event.key === "Home") next = 0; else if (event.key === "End") next = visibleIds.length - 1; else return;
 								event.preventDefault(); chooseUsage(visibleIds[next]);
 								const button = event.currentTarget.parentElement.querySelectorAll('[role="tab"]')[next]; if (button) button.focus();
-							}, style: { ...btnStyle, minWidth: 0, padding: "7px 10px", whiteSpace: "nowrap", fontSize: 12, borderRadius: "6px 6px 0 0", border: "1px solid transparent", borderBottom: active ? "2px solid #3b82f6" : "2px solid transparent", background: active ? "rgba(59,130,246,.10)" : "transparent" }
-						}, h("span", { "aria-hidden": true, style: { display: "inline-block", width: 6, height: 6, marginRight: 4, borderRadius: 99, background: tagColor(e) } }), h("span", { "aria-hidden": true, style: { marginRight: 3 } }, providerIcon(e)), PROVIDER_META[id].short);
+							}, style: { ...btnStyle, display: "inline-flex", alignItems: "center", gap: 6, minWidth: 0, padding: "5px 12px 5px 8px", whiteSpace: "nowrap", fontSize: 12, fontWeight: active ? 600 : 400, borderRadius: 999, border: "1px solid transparent", background: active ? alpha(INFO, ".16") : "transparent" }
+						}, statusGlyph(tagColor(e), providerIcon(e), 14), PROVIDER_META[id].short);
 					})),
-				!!usageId ? h("section", { role: "tabpanel", id: "subusage-provider-panel", "aria-label": usageMeta.label, style: { marginTop: 12, border: "1px solid rgba(128,128,128,.25)", borderRadius: 10, padding: 14 } },
-					h("strong", null, usageMeta.label),
-					h("p", { role: "status", style: { margin: "4px 0", color: usageEntry && usageEntry.state !== "ok" ? "#dc2626" : "inherit" } }, statusText(usageEntry, t)),
-					cacheAge(usageEntry, t) ? h("p", { style: { color: "#b7791f" } }, cacheAge(usageEntry, t)) : null,
-					usageEntry && usageEntry.error ? h("p", { role: "alert", style: { color: "#dc2626", overflowWrap: "anywhere" } }, usageEntry.error) : null,
+				!!usageId ? h("section", { role: "tabpanel", id: "subusage-provider-panel", "aria-label": usageMeta.label, style: { marginTop: 12, border: "1px solid rgba(128,128,128,.25)", borderRadius: 14, padding: 16 } },
+					h("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
+						h("strong", { style: { fontSize: 14 } }, usageMeta.label),
+						h("span", { style: { flex: 1 } }),
+						planName(usageEntry) ? h("span", { style: { fontSize: 11, fontWeight: 600, padding: "1px 8px", borderRadius: 999, background: "rgba(128,128,128,.16)", whiteSpace: "nowrap" } }, planName(usageEntry)) : null),
+					// 一眼结论：与药丸、弹层同一个状态判定。读取成功只说明接口健康，额度档位另有结论。
+					statusBanner(usageStatus),
+					usageEntry && usageEntry.error && usageStatus.key !== "error" ? h("p", { role: "alert", style: { color: "#dc2626", overflowWrap: "anywhere" } }, usageEntry.error) : null,
 					usageAction ? h("div", { role: "group", "aria-label": text("建议操作", "Suggested action"), style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", margin: "10px 0", padding: "8px 10px", border: "1px solid rgba(234,179,8,.45)", borderRadius: 8, background: "rgba(234,179,8,.08)" } },
 						h("span", { style: { flex: 1, minWidth: 150, fontSize: 12 } }, usageAction === "mimo-relogin" ? text("Cookie 已过期，重新登录即可恢复。", "Cookie expired — sign in again to restore.") : usageAction === "mimo-login" ? text("需要登录 MiMo（或 Cookie 即将到期）。", "MiMo sign-in needed (or the cookie is about to expire).") : text("这家还没有可用的凭据。", "No usable credentials for this provider.")),
 						usageAction !== "credentials" ? h("button", { type: "button", style: primary, disabled: busy || loginActive, onClick: startLogin }, usageAction === "mimo-relogin" ? text("重新登录", "Sign in again") : text("登录并自动导入", "Sign in & import")) : null,
 						h("button", { type: "button", style: usageAction === "credentials" ? primary : btnStyle, disabled: busy, onClick: () => revealEditor(usageId) }, usageAction === "credentials" ? text("配置凭据", "Configure credentials") : text("手动填写", "Enter manually"))) : null,
 					canShowUsage(usageEntry) && (usageEntry.windows || []).length ? UsageWindowList({ windows: usageEntry.windows, t, getLocale, uncertain: usageEntry.coverage === "partial" || usageEntry.freshness === "stale" || usageEntry.state !== "ok" }) : h("p", { style: { opacity: .75 } }, usageEntry ? t("noUsageData") : t("loading")),
-					canShowUsage(usageEntry) && usageEntry.extras ? h("p", { style: { opacity: .75 } }, usageEntry.extras.map((x) => `${extraLabel(x, t)}: ${x.value}`).join(" · ")) : null,
+					canShowUsage(usageEntry) && usageEntry.extras && usageEntry.extras.some((x) => x.kind !== "plan")
+						? h("div", { style: { marginTop: 10, padding: "6px 12px", borderRadius: 10, background: "rgba(128,128,128,.07)" } },
+							usageEntry.extras.filter((x) => x.kind !== "plan").map((x) => h("div", { key: x.kind, style: { display: "flex", justifyContent: "space-between", gap: 12, padding: "3px 0" } },
+								h("span", { style: { opacity: 0.7 } }, extraLabel(x, t)),
+								h("strong", { style: { fontWeight: 600, textAlign: "right" } }, x.value))))
+						: null,
 					usageEntry?.lastAttemptAt ? h("p", { style: { opacity: .65 } }, `${t("lastUpdated")} ${new Date(usageEntry.lastAttemptAt).toLocaleString(getLocale())}`) : null
 				) : null,
 				providerManagement

package/lib/index.js

@@ -411,7 +411,7 @@ function volcFailure(action, error) {
 }
 async function fetchJson(fetcher, url, headers, lifetimeSignal, init = {}) {
  let response;
- try { response = await fetcher(url, { method: init.method ?? "GET", ...(init.body !== undefined ? { body: init.body } : {}), headers: { accept: "application/json", "user-agent": "dsh-subusage/0.10.9", ...headers }, signal: lifetimeSignal ? AbortSignal.any([AbortSignal.timeout(10000), lifetimeSignal]) : AbortSignal.timeout(10000), redirect: "manual" }); }
+ try { response = await fetcher(url, { method: init.method ?? "GET", ...(init.body !== undefined ? { body: init.body } : {}), headers: { accept: "application/json", "user-agent": "dsh-subusage/0.10.10", ...headers }, signal: lifetimeSignal ? AbortSignal.any([AbortSignal.timeout(10000), lifetimeSignal]) : AbortSignal.timeout(10000), redirect: "manual" }); }
  catch { throw failure("subusage/network", "网络请求失败或超时", true); }
  if (response.status >= 300 && response.status < 400 || response.status === 401 || response.status === 403) throw failure("subusage/auth", "登录或凭据已失效");
  if (!response.ok) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-subusage",
-  "version": "0.10.9",
+  "version": "0.10.11",
   "displayName": "订阅用量显示",
   "description": "显示 DeepSeek 官方余额、火山方舟（arkcli 官方 CLI 路由：Agent / Coding Plan 个人版与企业版席位，设置页合并为一组）、Z.ai（中国与国际）、Kimi、MiMo、OpenCode Go、Command Code、SuperGrok、Codex（ChatGPT 订阅，默认关闭）、MiniMax（中国）、Synthetic、NanoGPT、SiliconFlow、OpenRouter、Novita、Hyperbolic、DeepInfra、Chutes、Ollama Cloud、Vercel AI Gateway、ZenMux、LiteLLM 的订阅余量与余额；共享刷新与凭据管理，默认关闭 17 家。",
   "keywords": [