dsh-plugin-subscription-oauth 0.3.0 → 0.5.0

package/lib/client.js

@@ -126,7 +126,9 @@ const en = {
 	detail_project: "Cloud project",
 	lastError: "Last login attempt failed: {message}",
 	loginFailed: "Could not start the sign-in: {message}",
-	actionFailed: "Action failed: {message}"
+	actionFailed: "Action failed: {message}",
+	usageChipTitle: "{provider} subscription usage",
+	usageChipFull: "{provider} allowance"
 };
 /** Chinese strings. */
 const zh = {
@@ -218,7 +220,9 @@ const zh = {
 	detail_project: "云项目",
 	lastError: "上次登录失败：{message}",
 	loginFailed: "无法开始登录：{message}",
-	actionFailed: "操作失败：{message}"
+	actionFailed: "操作失败：{message}",
+	usageChipTitle: "{provider} 订阅用量",
+	usageChipFull: "{provider} 额度"
 };
 
 //#endregion
@@ -468,7 +472,13 @@ ${scope} .dsh-subscription-disclosure:hover:not(:disabled) {
 ${scope} .dsh-subscription-meter {
   height: 6px;
   border-radius: 999px;
-  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2));
+  /* The track must stay visible when nothing is spent — a 0 % window otherwise reads as
+     "no meter at all", which is the opposite of "nothing used". The layer token falls
+     back to the card's own colour on a host that does not define it, so the neutral is
+     explicit and translucent, and the inset ring keeps the empty track visible on a
+     light theme as well as a dark one. */
+  background: #8a8f9826;
+  box-shadow: inset 0 0 0 1px #8a8f9833;
   overflow: hidden;
 }
 ${scope} .dsh-subscription-meter > span {
@@ -480,6 +490,127 @@ ${scope} .dsh-subscription-meter > span[data-exhausted="true"] {
   background: var(--dsw-alias-state-error-primary, #b42318);
 }
 `;
+/**
+* The composer usage chip's stylesheet.
+*
+* Separate from the page's, because the chip renders in the composer's own bar rather
+* than inside either page container — the page stylesheet is scoped to those
+* containers on purpose, so nothing here may leak into the shell.
+*
+* The chip inherits the bar's type and only draws a meter, so it sits beside the shell's
+* own stats pills without looking like a second design. The trigger is a bare control:
+* the host gives plugin markup no control classes, and a default `<button>` would
+* otherwise read as a raised chip. Every token carries a fallback for hosts that do not
+* define it.
+*/
+const usageChipCss = `
+.dsh-subscription-usage-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  /* The bar is a centred flex row whose children are this slot's entries followed by the
+     shell's context meter, and a list slot renders its entries as bare children (no
+     wrapper). So the chip is itself a flex item: a higher order places it after the
+     context meter, and no auto margin is set, so it sits immediately beside it rather
+     than being pushed to the edge of the bar. */
+  order: 1;
+  min-width: 0;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1;
+}
+.dsh-subscription-usage-chip-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 2px 6px;
+  border: 0;
+  border-radius: var(--dsw-radius-sm, 6px);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #8a8f98);
+  font: inherit;
+  cursor: pointer;
+}
+.dsh-subscription-usage-chip-trigger:hover {
+  background: var(--dsw-alias-interactive-bg-hover, #ffffff14);
+}
+.dsh-subscription-usage-chip-trigger:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-focus, #4d6bfe);
+  outline-offset: 1px;
+}
+.dsh-subscription-usage-chip-label {
+  overflow: hidden;
+  max-width: 6ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-subscription-usage-chip-cell {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 2px;
+}
+.dsh-subscription-usage-chip-window {
+  opacity: 0.75;
+}
+.dsh-subscription-usage-chip-value {
+  color: var(--dsw-alias-label-primary, #e8e8e8);
+  font-variant-numeric: tabular-nums;
+}
+.dsh-subscription-usage-chip-panel {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 168px;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-secondary, #ffffff1f);
+  border-radius: var(--dsw-radius-md, 10px);
+  background: var(--dsw-alias-bg-layer-2, #26262a);
+  box-shadow: var(--dsw-elevation-prominent, 0 12px 32px #0007);
+  color: var(--dsw-alias-label-primary, #e8e8e8);
+  white-space: nowrap;
+}
+.dsh-subscription-usage-chip-full {
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary, #8a8f98);
+}
+.dsh-subscription-usage-chip-meter {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.dsh-subscription-usage-chip-meterHead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+}
+.dsh-subscription-usage-chip-detail {
+  color: var(--dsw-alias-label-secondary, #8a8f98);
+  font-variant-numeric: tabular-nums;
+}
+.dsh-subscription-usage-chip-track {
+  display: block;
+  width: 100%;
+  height: 5px;
+  border-radius: 999px;
+  /* As on the settings meter: an unspent window has to show its track, so the neutral and
+     its ring are explicit rather than a layer token that may match the panel. */
+  background: #8a8f9826;
+  box-shadow: inset 0 0 0 1px #8a8f9833;
+  overflow: hidden;
+}
+.dsh-subscription-usage-chip-fill {
+  display: block;
+  height: 100%;
+  background: var(--dsw-alias-state-success-primary, #067647);
+}
+`;
 
 //#endregion
 //#region src/protocol.ts
@@ -501,6 +632,8 @@ const RPC_PREFIX = "subscription-oauth.";
 //#region src/client/subscriptions-rpc.ts
 /** The shared channel the node half's routes are mounted on. */
 const CHANNEL = "/api";
+/** The host's own DeepSeek account controller, from which the chip reads a balance. */
+const ACCOUNT_CHANNEL = "/api";
 /** A failed call: either the transport rejected or the endpoint answered `ok: false`. */
 var SubscriptionsRpcError = class extends Error {
 	constructor(message, code) {
@@ -530,6 +663,55 @@ function createSubscriptionsCall(rpc) {
 		return result.value;
 	};
 }
+/**
+* Read the DeepSeek account's balance through the host's own account controller.
+*
+* The host owns the DeepSeek OAuth grant and the platform endpoint, so this asks it
+* rather than re-deriving either. It returns `null` when the account is signed out or
+* the read fails, so a chip can simply not render in that case.
+*
+* @param rpc - the browser connection's RPC caller.
+* @returns the balance, or null when there is nothing to show.
+*/
+function createAccountBalanceCall(rpc) {
+	return async function call() {
+		let result;
+		try {
+			result = await rpc.call(ACCOUNT_CHANNEL, "account/getBalance", {
+				version: "1",
+				locale: Intl.DateTimeFormat().resolvedOptions().locale ?? "en-US",
+				timezoneOffsetSeconds: -(/* @__PURE__ */ new Date()).getTimezoneOffset()
+			});
+		} catch (error) {
+			throw new SubscriptionsRpcError(messageOf$1(error), "RPC_TRANSPORT");
+		}
+		if (!result.ok) throw new SubscriptionsRpcError(result.error.message, result.error.code);
+		return result.value;
+	};
+}
+/**
+* Read a manually added provider's balance through the plugin's cc-switch endpoint.
+*
+* The caller names the credential reference the provider's profile uses (its
+* `apiKeyEnv`), and the host's credential service resolves it to the API key. The result
+* is `undefined` when there is no key or the provider did not answer — never a wrong
+* figure.
+*
+* @param rpc - the browser connection's RPC caller.
+* @returns a narrow caller taking the credential reference.
+*/
+function createCcSwitchBalanceCall(rpc) {
+	return async function call(credentialRef) {
+		let result;
+		try {
+			result = await rpc.call(CHANNEL, `${RPC_PREFIX}ccswitch-balance`, { credentialRef });
+		} catch (error) {
+			throw new SubscriptionsRpcError(messageOf$1(error), "RPC_TRANSPORT");
+		}
+		if (!result.ok) throw new SubscriptionsRpcError(result.error.message, result.error.code);
+		return result.value;
+	};
+}
 
 //#endregion
 //#region src/client/SubscriptionsSection.tsx
@@ -586,7 +768,7 @@ const RESET_RELATIVE_MS = 1440 * 60 * 1e3;
 * @param t - translator, so the wording follows the page language.
 * @returns the reset text.
 */
-function formatReset(at, t) {
+function formatReset$1(at, t) {
 	const remaining = at - Date.now();
 	if (remaining <= 0) return t("usageResetDue");
 	if (remaining >= RESET_RELATIVE_MS) return t("usageReset", { time: formatTime(at) });
@@ -1051,7 +1233,7 @@ function UsageBlock(props) {
 							]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							style: styles.modelMeta,
-							children: window$1.resetsAt === void 0 ? "" : formatReset(window$1.resetsAt, t)
+							children: window$1.resetsAt === void 0 ? "" : formatReset$1(window$1.resetsAt, t)
 						})]
 					}), window$1.usedPercent !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "dsh-subscription-meter",
@@ -2050,13 +2232,465 @@ function SubscriptionsSection(props) {
 	});
 }
 
+//#endregion
+//#region src/client/UsageChip.tsx
+/** How often a visible chip refreshes its figures. */
+const REFRESH_INTERVAL_MS = 6e4;
+/**
+* Abbreviations for the routes this plugin serves.
+*
+* The bar is a status line under the composer, where a full product name crowds out the
+* shell's own pills; the full name is one click away. The fallback shortens an unknown
+* route's display name rather than dropping it.
+*/
+const SHORT_LABELS = {
+	kimi: "Kimi",
+	grok: "Grok",
+	antigravity: "Anti",
+	glm: "GLM",
+	ark: "Ark"
+};
+/**
+* Abbreviations for the window names the providers use.
+*
+* The bar has room for a token or two, so `weekly` becomes `7d` — the same figure in a
+* form that reads at a glance. An unrecognised window keeps its own name, shortened
+* only if it is long.
+*/
+const SHORT_WINDOWS = {
+	"weekly": "7d",
+	"7d": "7d",
+	"5h": "5h",
+	"monthly": "mo",
+	"daily": "1d",
+	"credits": "cr",
+	"free": "free",
+	"session": "s"
+};
+/** The session's provider, from its model-selection projection. */
+function providerOf(projection) {
+	return (projection?.next ?? projection?.lastUsed)?.provider;
+}
+/**
+* Reduce the host's account-balance payload to the wallets the chip shows.
+*
+* Bonus wallets are shown after the topped-up ones, so a reader sees their own credit
+* first and any promotional credit as a secondary figure.
+*
+* @param value - the host's ready balance, or undefined when there is none.
+* @returns the wallets, topped-up first then bonus, or undefined when nothing is usable.
+*/
+function balanceOf(value) {
+	if (value === null || value === void 0 || !("value" in value) || value.value === void 0) return void 0;
+	const wallets = [...value.value.map((wallet) => ({
+		currency: wallet.currency,
+		balance: wallet.balance,
+		bonus: false
+	})), ...(value.bonusWallets ?? []).map((wallet) => ({
+		currency: wallet.currency,
+		balance: wallet.balance,
+		bonus: true
+	}))];
+	return wallets.length === 0 ? void 0 : wallets;
+}
+/**
+* Format one wallet for the chip's compact line.
+*
+* A balance is money, not a percentage, so it renders as `¥6.89` rather than a meter;
+* the currency prefix keeps two currencies from being mistaken for one sum.
+*
+* @param wallet - the wallet to show.
+* @returns the short form, e.g. `¥6.89` or `+¥2` for a bonus wallet.
+*/
+function formatBalance(wallet) {
+	const amount = Number.parseFloat(wallet.balance);
+	const trimmed = Number.isFinite(amount) ? String(Math.round(amount * 100) / 100) : wallet.balance;
+	const symbol = wallet.currency === "CNY" ? "¥" : wallet.currency === "USD" ? "$" : `${wallet.currency} `;
+	return `${wallet.bonus ? "+" : ""}${symbol}${trimmed}`;
+}
+/**
+* The short form of a route's name.
+*
+* @param provider - the route id.
+* @param label - the route's own display name.
+* @returns an abbreviation that still identifies the route.
+*/
+function shortLabel(provider, label) {
+	const known = SHORT_LABELS[provider];
+	if (known !== void 0) return known;
+	const [first] = label.trim().split(/\s+/);
+	return first === void 0 || first === "" ? provider : first;
+}
+/**
+* The short form of a window's name.
+*
+* @param label - the window's own name, e.g. `weekly`.
+* @returns an abbreviation, or the label itself when it is already short.
+*/
+function shortWindow(label) {
+	const known = SHORT_WINDOWS[label.toLowerCase()];
+	if (known !== void 0) return known;
+	return label.length <= 4 ? label : label.slice(0, 4);
+}
+/**
+* Pick the window a single line should show.
+*
+* A plan can meter several windows at once (a rolling five-hour one and a weekly one).
+* The most constrained is the one that will stop work soonest, so it earns the space;
+* ties fall to the earlier window, which is the order the providers state them in.
+*
+* @param windows - the route's metered windows.
+* @returns the window to show, or undefined when none states a figure.
+*/
+function pickWindow(windows) {
+	let best;
+	for (const window$1 of windows) {
+		if (window$1.usedPercent === void 0) continue;
+		if (best?.usedPercent === void 0 || window$1.usedPercent > best.usedPercent) best = window$1;
+	}
+	return best;
+}
+/**
+* Reduce one route's usage to what the chip renders.
+*
+* @param provider - the route the figures came from.
+* @param label - the route's display name.
+* @param usage - the accounts the route answered for.
+* @returns the reading, or undefined when the route stated no figure.
+*/
+function readingOf(provider, label, usage) {
+	for (const entry of usage) {
+		const window$1 = pickWindow(entry.windows);
+		if (window$1 === void 0) continue;
+		return {
+			provider,
+			label,
+			windows: entry.windows.filter((candidate) => candidate.usedPercent !== void 0),
+			window: window$1,
+			...entry.plan === void 0 ? {} : { plan: entry.plan }
+		};
+	}
+}
+/**
+* Format a window's reset the way the settings cards do.
+*
+* The rule is shared with the cards on purpose: a figure reading `6d20h` here and
+* something else there would be two answers to one question.
+*
+* @param at - epoch milliseconds, or undefined when the provider states none.
+* @param now - the instant to measure from.
+* @returns a short phrase, or undefined when there is no reset to show.
+*/
+function formatReset(at, now) {
+	if (at === void 0) return void 0;
+	const remaining = at - now;
+	if (remaining <= 0) return "now";
+	const hours = remaining / 36e5;
+	if (hours < 1) return `${String(Math.max(1, Math.round(remaining / 6e4)))}m`;
+	if (hours < 24) return `${String(Math.round(hours))}h`;
+	const days = Math.floor(hours / 24);
+	return `${String(days)}d${String(Math.round(hours - days * 24))}h`;
+}
+/**
+* The composer's usage chip.
+*
+* @param props - injected RPC caller, copy, and the session's provider reader.
+* @returns the chip, or null when there is nothing true to say.
+*/
+function UsageChip({ call, t, isOwnProvider, accountBalance, ccSwitchBalance, ccSwitchCredentialRef, useProjection }) {
+	const [reading, setReading] = (0, react.useState)(void 0);
+	const [balance, setBalance] = (0, react.useState)(void 0);
+	const [ccBalance, setCcBalance] = (0, react.useState)(void 0);
+	const [now, setNow] = (0, react.useState)(() => Date.now());
+	const [open, setOpen] = (0, react.useState)(false);
+	const lastOwn = (0, react.useRef)(void 0);
+	const selected = useProjection("modelSelection", (value) => providerOf(value));
+	const isDeepSeek = selected === "deepseek-account";
+	const ccRef = selected === void 0 || isOwnProvider(selected) || isDeepSeek ? void 0 : ccSwitchCredentialRef(selected);
+	(0, react.useEffect)(() => {
+		if (ccRef === void 0) {
+			setCcBalance(void 0);
+			return;
+		}
+		let live = true;
+		const refresh = () => {
+			ccSwitchBalance(ccRef).then((value) => {
+				if (live) setCcBalance(value === void 0 ? void 0 : {
+					currency: value.currency,
+					total: value.total
+				});
+			}).catch(() => {});
+		};
+		refresh();
+		const timer = setInterval(refresh, REFRESH_INTERVAL_MS);
+		return () => {
+			live = false;
+			clearInterval(timer);
+		};
+	}, [ccRef, ccSwitchBalance]);
+	const load = (0, react.useCallback)(async (target) => {
+		try {
+			const result = await call("usage", { provider: target });
+			return readingOf(target, result.status.providers.find((entry) => entry.provider === target)?.displayName ?? target, result.usage);
+		} catch {
+			return;
+		}
+	}, [call]);
+	(0, react.useEffect)(() => {
+		if (!isDeepSeek) {
+			setBalance(void 0);
+			return;
+		}
+		let live = true;
+		const refresh = () => {
+			accountBalance().then((value) => {
+				if (live) setBalance(balanceOf(value));
+			}).catch(() => {});
+		};
+		refresh();
+		const timer = setInterval(refresh, REFRESH_INTERVAL_MS);
+		return () => {
+			live = false;
+			clearInterval(timer);
+		};
+	}, [isDeepSeek, accountBalance]);
+	(0, react.useEffect)(() => {
+		const target = selected !== void 0 && isOwnProvider(selected) ? selected : lastOwn.current;
+		if (target === void 0) {
+			setReading(void 0);
+			return;
+		}
+		let live = true;
+		const refresh = () => {
+			setNow(Date.now());
+			load(target).then((next) => {
+				if (!live || next === void 0) return;
+				lastOwn.current = target;
+				setReading(next);
+			});
+		};
+		refresh();
+		const timer = setInterval(refresh, REFRESH_INTERVAL_MS);
+		return () => {
+			live = false;
+			clearInterval(timer);
+		};
+	}, [
+		selected,
+		isOwnProvider,
+		load
+	]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const close = () => {
+			setOpen(false);
+		};
+		document.addEventListener("click", close);
+		return () => {
+			document.removeEventListener("click", close);
+		};
+	}, [open]);
+	if (ccRef !== void 0) {
+		if (ccBalance === void 0) return null;
+		const short$1 = shortLabel(selected ?? "", selected ?? "");
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "dsh-subscription-usage-chip",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: usageChipCss }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "dsh-subscription-usage-chip-trigger",
+					"aria-expanded": open,
+					title: t("usageChipTitle", { provider: selected ?? "" }),
+					onClick: (event) => {
+						event.stopPropagation();
+						setOpen((was) => !was);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-label",
+						children: short$1
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-cell",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-subscription-usage-chip-value",
+							children: `${ccBalance.currency === "CNY" ? "¥" : ccBalance.currency === "USD" ? "$" : `${ccBalance.currency} `}${ccBalance.total}`
+						})
+					})]
+				}),
+				open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "dsh-subscription-usage-chip-panel",
+					role: "status",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-full",
+						children: t("usageChipFull", { provider: selected ?? "" })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-meter",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "dsh-subscription-usage-chip-meterHead",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: ccBalance.currency }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-subscription-usage-chip-detail",
+								children: ccBalance.total
+							})]
+						})
+					})]
+				})
+			]
+		});
+	}
+	if (isDeepSeek) {
+		if (balance === void 0) return null;
+		const short$1 = shortLabel("deepseek-account", "DeepSeek Account");
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "dsh-subscription-usage-chip",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: usageChipCss }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "dsh-subscription-usage-chip-trigger",
+					"aria-expanded": open,
+					title: t("usageChipTitle", { provider: "DeepSeek Account" }),
+					onClick: (event) => {
+						event.stopPropagation();
+						setOpen((was) => !was);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-label",
+						children: short$1
+					}), balance.map((wallet) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-cell",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-subscription-usage-chip-value",
+							children: formatBalance(wallet)
+						})
+					}, `${wallet.currency}${wallet.bonus ? ":bonus" : ""}`))]
+				}),
+				open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "dsh-subscription-usage-chip-panel",
+					role: "status",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-full",
+						children: t("usageChipFull", { provider: "DeepSeek Account" })
+					}), balance.map((wallet) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-meter",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "dsh-subscription-usage-chip-meterHead",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: `${wallet.bonus ? "Bonus · " : ""}${wallet.currency}` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-subscription-usage-chip-detail",
+								children: formatBalance(wallet)
+							})]
+						})
+					}, `${wallet.currency}${wallet.bonus ? ":bonus" : ""}`))]
+				})
+			]
+		});
+	}
+	if (reading === void 0) return null;
+	if (reading.window.usedPercent === void 0) return null;
+	formatReset(reading.window.resetsAt, now);
+	const short = shortLabel(reading.provider, reading.label);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "dsh-subscription-usage-chip",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: usageChipCss }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: "dsh-subscription-usage-chip-trigger",
+				"aria-expanded": open,
+				title: t("usageChipTitle", { provider: reading.label }),
+				onClick: (event) => {
+					event.stopPropagation();
+					setOpen((was) => !was);
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-subscription-usage-chip-label",
+					children: short
+				}), reading.windows.map((window$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "dsh-subscription-usage-chip-cell",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-window",
+						children: shortWindow(window$1.label)
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-value",
+						children: `${String(Math.round(window$1.usedPercent ?? 0))}%`
+					})]
+				}, window$1.label))]
+			}),
+			open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "dsh-subscription-usage-chip-panel",
+				role: "status",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-full",
+						children: t("usageChipFull", { provider: reading.label })
+					}),
+					reading.windows.map((window$1) => {
+						const windowReset = formatReset(window$1.resetsAt, now);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "dsh-subscription-usage-chip-meter",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "dsh-subscription-usage-chip-meterHead",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: window$1.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-subscription-usage-chip-detail",
+									children: `${String(Math.round(window$1.usedPercent ?? 0))}%${windowReset === void 0 ? "" : ` · ${windowReset}`}`
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-subscription-usage-chip-track",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-subscription-usage-chip-fill",
+									style: { width: `${String(Math.max(0, Math.min(100, window$1.usedPercent ?? 0)))}%` }
+								})
+							})]
+						}, window$1.label);
+					}),
+					reading.plan === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-detail",
+						children: reading.plan
+					})
+				]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/client/index.ts
+/**
+* Routes this plugin serves.
+*
+* The chip only reports for these; a provider somebody else registered gets no chip,
+* because this plugin has no way to read its allowance.
+*/
+const OWN_PROVIDER_IDS = new Set([
+	"kimi",
+	"grok",
+	"antigravity",
+	"glm",
+	"ark"
+]);
 /** Dictionary namespace owned by this plugin. */
 const NS = "settings.subscriptions";
 /** Settings nav position: after the shipped sections, before plugin tooling. */
 const SECTION_ORDER = 92;
 /**
+* Composer-dock position: after the shell's own stats pills, which sit at 0.
+*
+* The shell owns that bar and registers `tok/s` and the cache-hit pill into it, so the
+* chip follows them rather than displacing them.
+*/
+const CHIP_ORDER = 10;
+/**
+* The credential reference a manually added provider's balance query uses, by provider
+* id.
+*
+* A manually added provider is not one this plugin serves, so the only way to read its
+* balance is cc-switch's query, which needs the provider's API key. The provider's
+* profile names that key by reference (`apiKeyEnv`), and the host's credential service
+* resolves the name; this map is the one place a provider id is tied to that name. A
+* provider with no entry gets no balance.
+*/
+const CC_SWITCH_CREDENTIAL_REFS = { huanling: "HUANLING_API_KEY" };
+/**
 * Required services: `slots` carries the registration seat, `connection` the
 * RPC caller, and `locale` the copy dictionaries.
 */
@@ -2091,6 +2725,19 @@ function apply(ctx) {
 			t
 		})
 	}, SubscriptionsSection));
+	ctx.slots.inject("conversation.composer.dock", () => ctx.slots.register({
+		name: "conversation.composer.dock",
+		id: "subscription-usage",
+		order: CHIP_ORDER,
+		inject: () => ({
+			call,
+			t,
+			isOwnProvider: (provider) => OWN_PROVIDER_IDS.has(provider),
+			accountBalance: createAccountBalanceCall(connection.rpc),
+			ccSwitchBalance: createCcSwitchBalanceCall(connection.rpc),
+			ccSwitchCredentialRef: (provider) => CC_SWITCH_CREDENTIAL_REFS[provider]
+		})
+	}, UsageChip));
 }
 
 //#endregion