@mars-sea/dsh-commandcode-provider 0.3.0 → 0.4.0

package/lib/client.js

@@ -5,6 +5,7 @@ window.__ModuleLoader__.load({
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let _deepseek_ai_dsh_client_runtime_client = require("@deepseek-ai/dsh-client-runtime/client");
+		let react = require("react");
 		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		//#region src/client/sessions.ts
@@ -59,7 +60,7 @@ window.__ModuleLoader__.load({
 			};
 		}
 		/** A whole-number field; an empty draft clears it, anything non-numeric blocks save. */
-		function numberField(field) {
+		function numberField$1(field) {
 			return {
 				field,
 				format: (value) => typeof value === "number" ? String(value) : "",
@@ -74,12 +75,37 @@ window.__ModuleLoader__.load({
 				}
 			};
 		}
+		/**
+		* A boolean field, staged as the strings `'true'`/`'false'` (an empty draft
+		* clears it). The component renders a toggle and only ever stages these two
+		* strings; anything else blocks save.
+		*/
+		function booleanField$1(field) {
+			return {
+				field,
+				format: (value) => typeof value === "boolean" ? String(value) : "",
+				parse: (text) => {
+					const trimmed = text.trim();
+					if (trimmed === "") return { kind: "clear" };
+					if (trimmed === "true") return {
+						kind: "set",
+						value: true
+					};
+					if (trimmed === "false") return {
+						kind: "set",
+						value: false
+					};
+					return { kind: "invalid" };
+				}
+			};
+		}
 		/** The fields this page edits inside the `llm-commandcode` namespace. */
 		const SECTION_FIELDS = [
 			textField("apiBase"),
 			textField("workingDir"),
-			numberField("requestTimeoutMs"),
-			numberField("streamIdleTimeoutMs")
+			numberField$1("requestTimeoutMs"),
+			numberField$1("streamIdleTimeoutMs"),
+			booleanField$1("filterModelsByPlan")
 		];
 		/**
 		* Controller bridging the `llm-commandcode` scope and the credentials domain
@@ -179,6 +205,7 @@ window.__ModuleLoader__.load({
 					defaultWorkingDir: this.defaultWorkingDir,
 					requestTimeoutMs: this.field("requestTimeoutMs"),
 					streamIdleTimeoutMs: this.field("streamIdleTimeoutMs"),
+					filterModelsByPlan: this.field("filterModelsByPlan"),
 					dirty: plan.length > 0,
 					invalid: plan.some((item) => item.run === void 0),
 					saving: this.saving,
@@ -361,6 +388,230 @@ window.__ModuleLoader__.load({
 			}
 		};
 		//#endregion
+		//#region src/client/usage.ts
+		const IDLE = {
+			status: "idle",
+			report: void 0,
+			error: void 0,
+			fetchedAt: void 0
+		};
+		/**
+		* Controller bridging the `commandcode/report` Remote onto the card. Public
+		* API mirrors {@link CommandCodeSettingsController}: `state()` projections,
+		* `subscribe`, and one `refresh()` action.
+		*/
+		var CommandCodeUsageController = class {
+			remote;
+			listeners = /* @__PURE__ */ new Set();
+			current = IDLE;
+			generation = 0;
+			inFlight = false;
+			disposed = false;
+			constructor(remote) {
+				this.remote = remote;
+			}
+			/** Release every subscription. Idempotent; in-flight results are dropped. */
+			dispose() {
+				this.disposed = true;
+				this.generation += 1;
+				this.listeners.clear();
+			}
+			/** Subscribe to state projections. @returns the disposer. */
+			subscribe(listener) {
+				this.listeners.add(listener);
+				return () => this.listeners.delete(listener);
+			}
+			/** The current card state face. */
+			state() {
+				return this.current;
+			}
+			/**
+			* Fetch (or refetch) the report. Concurrent refreshes collapse onto one
+			* request; a superseded fetch's late result is dropped, never published.
+			*/
+			async refresh() {
+				if (this.disposed || this.inFlight) return;
+				const generation = ++this.generation;
+				this.inFlight = true;
+				this.current = {
+					...this.current,
+					status: "loading",
+					error: void 0
+				};
+				this.publish();
+				try {
+					const response = await this.remote.report();
+					if (this.disposed || generation !== this.generation) return;
+					if (response.ok) this.current = {
+						status: "ready",
+						report: response.value,
+						error: void 0,
+						fetchedAt: Date.now()
+					};
+					else this.current = {
+						...this.current,
+						status: "error",
+						error: response.error.message
+					};
+				} catch (error) {
+					if (this.disposed || generation !== this.generation) return;
+					this.current = {
+						...this.current,
+						status: "error",
+						error: error instanceof Error ? error.message : String(error)
+					};
+				} finally {
+					if (generation === this.generation) this.inFlight = false;
+				}
+				this.publish();
+			}
+			publish() {
+				if (this.disposed) return;
+				for (const listener of this.listeners) listener();
+			}
+		};
+		/** Format a dollar amount compactly (2 decimals). */
+		function formatMoney(value) {
+			return `$${value.toFixed(2)}`;
+		}
+		/** Format a dollar amount precisely (4 decimals) for small totals. */
+		function formatMoneyExact(value) {
+			return `$${value.toFixed(4)}`;
+		}
+		/** Format a large token count compactly (1.9M style). */
+		function formatTokensCompact(value) {
+			if (value >= 1e9) return `${(value / 1e9).toFixed(1)}B`;
+			if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+			if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+			return String(value);
+		}
+		/** One window's fill ratio in [0, 1]; 0 when uncapped. */
+		function windowRatio(used, cap) {
+			if (cap <= 0) return 0;
+			return Math.max(0, Math.min(1, used / cap));
+		}
+		/** Format a millis timestamp as a local short date-time; empty when unset. */
+		function formatResetAt(ms) {
+			if (ms <= 0) return "";
+			return new Date(ms).toLocaleString();
+		}
+		//#endregion
+		//#region src/usage-wire.ts
+		/** The npm package identity both contribution registrations claim. */
+		const USAGE_REMOTE_PACKAGE = "@mars-sea/dsh-commandcode-provider";
+		/** Canonical `<namespace>/<method>` endpoint of the usage report Remote. */
+		const USAGE_REPORT_ENDPOINT = "commandcode/report";
+		/** Reject one boundary value with a field-naming error. */
+		function reject(field) {
+			throw new TypeError(`commandcode/report result: invalid ${field}`);
+		}
+		/** Read one required finite number field (`field` is the dotted error label). */
+		function numberField(source, key, field) {
+			const value = source[key];
+			if (typeof value !== "number" || !Number.isFinite(value)) reject(field);
+			return value;
+		}
+		/** Read one required string field (`field` is the dotted error label). */
+		function stringField(source, key, field) {
+			const value = source[key];
+			if (typeof value !== "string") reject(field);
+			return value;
+		}
+		/** Read one required boolean field (`field` is the dotted error label). */
+		function booleanField(source, key, field) {
+			const value = source[key];
+			if (typeof value !== "boolean") reject(field);
+			return value;
+		}
+		/** Narrow an unknown value to a plain record, or reject. */
+		function record(value, field) {
+			if (typeof value !== "object" || value === null || Array.isArray(value)) reject(field);
+			return value;
+		}
+		/** Validate one window-limit block (`fiveHour` / `weekly`). */
+		function windowLimit(value, field) {
+			const source = record(value, field);
+			return {
+				used: numberField(source, "used", `${field}.used`),
+				cap: numberField(source, "cap", `${field}.cap`),
+				exceeded: booleanField(source, "exceeded", `${field}.exceeded`),
+				resetAt: numberField(source, "resetAt", `${field}.resetAt`)
+			};
+		}
+		/**
+		* Parse one untrusted boundary value into a {@link CommandCodeUsageReport}.
+		* Optional sections stay optional; every present field is shape-checked so a
+		* malformed frame fails the boundary instead of rendering garbage.
+		*/
+		function parseUsageReport(value) {
+			const source = record(value, "report");
+			const failures = source.failures;
+			if (!Array.isArray(failures) || failures.some((entry) => typeof entry !== "string")) reject("failures");
+			const report = { failures };
+			if (source.account !== void 0) {
+				const account = record(source.account, "account");
+				report.account = {
+					id: stringField(account, "id", "account.id"),
+					name: stringField(account, "name", "account.name"),
+					userName: stringField(account, "userName", "account.userName")
+				};
+			}
+			if (source.usage !== void 0) {
+				const usage = record(source.usage, "usage");
+				report.usage = {
+					totalCount: numberField(usage, "totalCount", "usage.totalCount"),
+					totalCost: numberField(usage, "totalCost", "usage.totalCost"),
+					successRate: numberField(usage, "successRate", "usage.successRate"),
+					completedCount: numberField(usage, "completedCount", "usage.completedCount"),
+					failedCount: numberField(usage, "failedCount", "usage.failedCount"),
+					totalTokensIn: numberField(usage, "totalTokensIn", "usage.totalTokensIn"),
+					totalTokensOut: numberField(usage, "totalTokensOut", "usage.totalTokensOut"),
+					totalCredits: numberField(usage, "totalCredits", "usage.totalCredits"),
+					periodBasis: stringField(usage, "periodBasis", "usage.periodBasis")
+				};
+			}
+			if (source.credits !== void 0) {
+				const credits = record(source.credits, "credits");
+				report.credits = {
+					monthlyCredits: numberField(credits, "monthlyCredits", "credits.monthlyCredits"),
+					purchasedCredits: numberField(credits, "purchasedCredits", "credits.purchasedCredits"),
+					freeCredits: numberField(credits, "freeCredits", "credits.freeCredits"),
+					fiveHour: windowLimit(credits.fiveHour, "credits.fiveHour"),
+					weekly: windowLimit(credits.weekly, "credits.weekly")
+				};
+			}
+			if (source.plan !== void 0) {
+				const plan = record(source.plan, "plan");
+				const monthly = plan.monthlyCredits;
+				if (monthly !== null && (typeof monthly !== "number" || !Number.isFinite(monthly))) reject("plan.monthlyCredits");
+				report.plan = {
+					planId: stringField(plan, "planId", "plan.planId"),
+					name: stringField(plan, "name", "plan.name"),
+					status: stringField(plan, "status", "plan.status"),
+					monthlyCredits: monthly,
+					currentPeriodEnd: numberField(plan, "currentPeriodEnd", "plan.currentPeriodEnd")
+				};
+			}
+			return report;
+		}
+		/** The Client-face contribution mounted on `ctx.remote`. */
+		const USAGE_REMOTE_CONTRIBUTION = {
+			package: USAGE_REMOTE_PACKAGE,
+			descriptors: [{
+				id: `${USAGE_REMOTE_PACKAGE}#${USAGE_REPORT_ENDPOINT}`,
+				service: "commandcodeUsage",
+				namespace: "commandcode",
+				method: "report",
+				invocation: { kind: "direct" },
+				parameters: [],
+				result: {
+					mode: "strict",
+					typeSymbol: `${USAGE_REMOTE_PACKAGE}#CommandCodeUsageReport`,
+					schema: { parse: parseUsageReport }
+				}
+			}]
+		};
+		//#endregion
 		//#region src/client/section.tsx
 		/**
 		* React component for the "Command Code" settings page (browser half).
@@ -418,6 +669,51 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/**
+		* One boolean field row rendered as a toggle. The staged text is `'true'` /
+		* `'false'` / `''` (unset → `defaultChecked`); toggling stages the string the
+		* boolean field spec parses back into a real boolean on save.
+		*/
+		function ToggleField({ id, label, hint, state, disabled, defaultChecked, onEdit, onReset, t }) {
+			const checked = state.text === "" ? defaultChecked : state.text === "true";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-field",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cc-fieldHead",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						className: "cc-label",
+						htmlFor: id,
+						children: label
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "cc-badges",
+						children: [state.overridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cc-badge",
+							children: t("overridden")
+						}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "cc-reset",
+							disabled,
+							onClick: onReset,
+							children: t("reset")
+						})]
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "cc-toggleRow",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						id,
+						className: "cc-toggle",
+						type: "checkbox",
+						role: "switch",
+						checked,
+						disabled,
+						onChange: (event) => onEdit(event.target.checked ? "true" : "false")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cc-hint",
+						children: hint
+					})]
+				})]
+			});
+		}
 		/** The API-key control: write-only, reports configured state, never echoes the key. */
 		function SecretKeyField({ label, hint, state, disabled, configured, configuredLabel, unconfiguredLabel, onEdit }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -453,10 +749,227 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/** One stat tile in the account card's summary grid. */
+		function UsageStat({ label, value, sub }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-usageStat",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cc-usageStatLabel",
+						children: label
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cc-usageStatValue",
+						children: value
+					}),
+					sub !== void 0 && sub !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cc-usageStatSub",
+						children: sub
+					}) : null
+				]
+			});
+		}
+		/** One window-limit row: label, used/cap, a fill bar, and the reset time. */
+		function UsageWindow({ label, limit: { used, cap, exceeded, resetAt }, t }) {
+			const ratio = windowRatio(used, cap);
+			const reset = formatResetAt(resetAt);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-usageWindow",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-usageWindowHead",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-usageWindowLabel",
+								children: label
+							}),
+							exceeded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-usageExceeded",
+								children: t("usageExceeded")
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-usageWindowValue",
+								children: cap > 0 ? `${formatMoney(used)} / ${formatMoney(cap)}` : formatMoney(used)
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cc-usageBar",
+						role: "progressbar",
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": Math.round(ratio * 100),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: exceeded ? "cc-usageBarFill cc-usageBarFillWarn" : "cc-usageBarFill",
+							style: { width: `${ratio * 100}%` }
+						})
+					}),
+					reset !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "cc-usageWindowReset",
+						children: [
+							t("usageReset"),
+							" ",
+							reset
+						]
+					}) : null
+				]
+			});
+		}
+		/**
+		* The account-usage card: the `/commandcode` dashboard's facts (account,
+		* totals, credits, window limits) rendered as a native settings card. Data
+		* arrives through the `commandcode/report` Remote; the API key never leaves
+		* the Host.
+		*/
+		function UsageCard({ t, usage, apiKeyConfigured, onRefresh }) {
+			(0, react.useEffect)(() => {
+				if (apiKeyConfigured && usage.status === "idle") onRefresh();
+			}, [
+				apiKeyConfigured,
+				usage.status,
+				onRefresh
+			]);
+			const loading = usage.status === "loading";
+			const report = usage.report;
+			const account = report?.account;
+			const accountName = account === void 0 ? "" : account.userName || account.name;
+			const credits = report?.credits;
+			const plan = report?.plan;
+			const planName = plan?.name ?? "";
+			const planStatus = plan !== void 0 && plan.status !== "" && plan.status !== "active" ? plan.status : "";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-usageCard",
+				"aria-label": t("usageTitle"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-usageHead",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "cc-usageTitle",
+								children: t("usageTitle")
+							}),
+							accountName !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-usageAccount",
+								children: accountName
+							}) : null,
+							planName !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-usagePlan",
+								children: planName
+							}) : null,
+							planStatus !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-usagePlanStatus",
+								children: planStatus
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-usageRefresh",
+								disabled: loading || !apiKeyConfigured,
+								onClick: onRefresh,
+								children: loading ? t("usageRefreshing") : t("usageRefresh")
+							})
+						]
+					}),
+					!apiKeyConfigured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-usageHint",
+						children: t("usageNoKey")
+					}) : null,
+					apiKeyConfigured && report === void 0 && loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-usageHint",
+						children: t("usageLoading")
+					}) : null,
+					usage.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-usageError",
+						role: "status",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [t("usageError"), usage.error !== void 0 && usage.error !== "" ? ` — ${usage.error}` : ""] })
+					}) : null,
+					report?.usage !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-usageStats",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
+								label: t("usageRequests"),
+								value: String(report.usage.completedCount),
+								sub: `${t("usageFailed")} ${report.usage.failedCount}`
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
+								label: t("usageSuccessRate"),
+								value: `${report.usage.successRate}%`
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
+								label: t("usageCost"),
+								value: formatMoneyExact(report.usage.totalCost),
+								sub: `${formatMoney(report.usage.totalCredits)} credits`
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
+								label: t("usageTokens"),
+								value: formatTokensCompact(report.usage.totalTokensIn + report.usage.totalTokensOut),
+								sub: `${formatTokensCompact(report.usage.totalTokensIn)} ${t("usageTokensIn")} / ${formatTokensCompact(report.usage.totalTokensOut)} ${t("usageTokensOut")}`
+							})
+						]
+					}) : null,
+					credits !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-usageStats",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
+								label: t("usageMonthly"),
+								value: formatMoney(credits.monthlyCredits)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
+								label: t("usagePurchased"),
+								value: formatMoney(credits.purchasedCredits)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
+								label: t("usageFree"),
+								value: formatMoney(credits.freeCredits)
+							})
+						]
+					}) : null,
+					credits !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-usageWindows",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageWindow, {
+							label: t("usageFiveHour"),
+							limit: credits.fiveHour,
+							t
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageWindow, {
+							label: t("usageWeekly"),
+							limit: credits.weekly,
+							t
+						})]
+					}) : null,
+					report !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-usageMeta",
+						children: [
+							plan !== void 0 && plan.currentPeriodEnd > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "cc-usageUpdated",
+								children: [
+									t("usagePeriodEnd"),
+									" ",
+									new Date(plan.currentPeriodEnd).toLocaleDateString()
+								]
+							}) : null,
+							usage.fetchedAt !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "cc-usageUpdated",
+								children: [
+									t("usageUpdated"),
+									" ",
+									new Date(usage.fetchedAt).toLocaleTimeString()
+								]
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-usageMetaSpacer" }),
+							report.failures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "cc-usagePartial",
+								title: report.failures.join("; "),
+								children: t("usagePartial")
+							}) : null
+						]
+					}) : null
+				]
+			});
+		}
 		/** The settings page body: connection facts for the Command Code provider. */
 		function CommandCodeSettingsPage(props) {
 			const { t } = props;
 			const state = props.useCommandCodeSettings((snapshot) => snapshot);
+			const usage = props.useCommandCodeUsage((snapshot) => snapshot);
 			const disabled = !state.writable;
 			const keyLocked = !state.apiKeyWritable;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
@@ -476,6 +989,12 @@ window.__ModuleLoader__.load({
 						role: "status",
 						children: t("readOnly")
 					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageCard, {
+						t,
+						usage,
+						apiKeyConfigured: state.apiKeyConfigured,
+						onRefresh: props.refreshUsage
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-card",
 						children: [
@@ -531,6 +1050,17 @@ window.__ModuleLoader__.load({
 								onEdit: (text) => props.edit("streamIdleTimeoutMs", text),
 								onReset: () => props.resetField("streamIdleTimeoutMs"),
 								t
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
+								id: "cc-filter-models-by-plan",
+								label: t("filterModelsByPlan"),
+								hint: t("filterModelsByPlanHint"),
+								state: state.filterModelsByPlan,
+								disabled,
+								defaultChecked: true,
+								onEdit: (text) => props.edit("filterModelsByPlan", text),
+								onReset: () => props.resetField("filterModelsByPlan"),
+								t
 							})
 						]
 					}),
@@ -580,6 +1110,8 @@ window.__ModuleLoader__.load({
 			requestTimeoutMsHint: "等待响应首个字节的超时；默认 60000。",
 			streamIdleTimeoutMs: "流空闲超时（毫秒）",
 			streamIdleTimeoutMsHint: "生成流停滞多久视为断连；默认 300000（长思考模型可静默数分钟，默认值刻意放宽）。",
+			filterModelsByPlan: "隐藏套餐外模型",
+			filterModelsByPlanHint: "开启后，模型选择器只列出当前套餐可用的模型；账户持有按需余额时会显示全部。",
 			overridden: "已覆盖",
 			reset: "重置",
 			invalidNumber: "无效数字",
@@ -589,7 +1121,30 @@ window.__ModuleLoader__.load({
 			saving: "保存中",
 			saveFailed: "保存失败，请重试。",
 			discard: "放弃",
-			cancel: "取消"
+			cancel: "取消",
+			usageTitle: "账户用量",
+			usageRefresh: "刷新",
+			usageRefreshing: "刷新中…",
+			usageLoading: "正在获取账户用量…",
+			usageNoKey: "配置 API 密钥后，这里会显示账户的用量与额度状态。",
+			usageError: "用量获取失败",
+			usageRequests: "请求",
+			usageFailed: "失败",
+			usageSuccessRate: "成功率",
+			usageCost: "花费",
+			usageTokens: "Token",
+			usageTokensIn: "入",
+			usageTokensOut: "出",
+			usageMonthly: "月额度",
+			usagePurchased: "已购",
+			usageFree: "赠送",
+			usageFiveHour: "5 小时窗口",
+			usageWeekly: "每周窗口",
+			usageExceeded: "已超限",
+			usageReset: "重置于",
+			usagePartial: "部分端点数据不可用",
+			usageUpdated: "更新于",
+			usagePeriodEnd: "账期截止"
 		};
 		const en = {
 			nav: "Command Code",
@@ -608,6 +1163,8 @@ window.__ModuleLoader__.load({
 			requestTimeoutMsHint: "Time to wait for the first response byte; default 60000.",
 			streamIdleTimeoutMs: "Stream idle timeout (ms)",
 			streamIdleTimeoutMsHint: "How long a stalled stream is treated as dead; default 300000 (deliberately generous — long-thinking models can stay silent for minutes).",
+			filterModelsByPlan: "Hide out-of-plan models",
+			filterModelsByPlanHint: "When on, the model picker lists only models your subscription includes; any on-demand credit balance shows the full catalog.",
 			overridden: "Overridden",
 			reset: "Reset",
 			invalidNumber: "Invalid number",
@@ -617,7 +1174,30 @@ window.__ModuleLoader__.load({
 			saving: "Saving",
 			saveFailed: "Save failed, please retry.",
 			discard: "Discard",
-			cancel: "Cancel"
+			cancel: "Cancel",
+			usageTitle: "Account usage",
+			usageRefresh: "Refresh",
+			usageRefreshing: "Refreshing…",
+			usageLoading: "Fetching account usage…",
+			usageNoKey: "Configure an API key to see this account’s usage and credit state here.",
+			usageError: "Could not fetch usage",
+			usageRequests: "Requests",
+			usageFailed: "failed",
+			usageSuccessRate: "Success rate",
+			usageCost: "Spend",
+			usageTokens: "Tokens",
+			usageTokensIn: "in",
+			usageTokensOut: "out",
+			usageMonthly: "Monthly",
+			usagePurchased: "Purchased",
+			usageFree: "Free",
+			usageFiveHour: "5-hour window",
+			usageWeekly: "Weekly window",
+			usageExceeded: "Exceeded",
+			usageReset: "Resets",
+			usagePartial: "Some endpoint data unavailable",
+			usageUpdated: "Updated",
+			usagePeriodEnd: "Period ends"
 		};
 		//#endregion
 		//#region src/client/index.ts
@@ -645,7 +1225,44 @@ window.__ModuleLoader__.load({
 .cc-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
 .cc-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
 .cc-footer{justify-content:flex-end;align-items:center;gap:8px;display:flex}
+.cc-toggleRow{align-items:center;gap:8px;cursor:pointer;display:flex}
+.cc-toggleRow:has(.cc-toggle:disabled){cursor:default}
+.cc-toggle{appearance:none;flex-shrink:0;background:var(--dsw-alias-border-l2);border-radius:999px;width:30px;height:18px;margin:0;cursor:pointer;position:relative;transition:background .15s ease}
+.cc-toggle:checked{background:var(--dsw-alias-brand-primary)}
+.cc-toggle::after{content:'';background:#fff;border-radius:50%;width:14px;height:14px;position:absolute;top:2px;left:2px;transition:left .15s ease}
+.cc-toggle:checked::after{left:14px}
+.cc-toggle:disabled{cursor:default;opacity:.5}
 .cc-failed{min-width:0;color:var(--dsw-alias-label-error);flex:1;margin:0;font-size:12px;line-height:1.5}
+.cc-usageCard{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:14px 16px;flex-direction:column;gap:12px;display:flex}
+.cc-usageHead{align-items:center;gap:8px;display:flex}
+.cc-usageTitle{color:var(--dsw-alias-label-primary);flex:1;margin:0;font-size:13px;font-weight:600;line-height:1.5}
+.cc-usageAccount{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.cc-usagePlan{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-brand-primary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;line-height:17px}
+.cc-usagePlanStatus{white-space:nowrap;color:var(--dsw-alias-label-error);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.cc-usageRefresh{font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:1.5}
+.cc-usageRefresh:hover:not(:disabled){color:var(--dsw-alias-label-primary)}
+.cc-usageRefresh:disabled{cursor:default;opacity:.5}
+.cc-usageHint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
+.cc-usageError{align-items:center;gap:8px;color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5;display:flex}
+.cc-usageStats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;display:grid}
+.cc-usageStat{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:8px;padding:8px 10px;flex-direction:column;gap:2px;display:flex}
+.cc-usageStatLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5}
+.cc-usageStatValue{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
+.cc-usageStatSub{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5}
+.cc-usageWindows{flex-direction:column;gap:16px;display:flex}
+.cc-usageWindow{flex-direction:column;gap:6px;display:flex}
+.cc-usageWindowHead{align-items:baseline;gap:8px;display:flex}
+.cc-usageWindowLabel{color:var(--dsw-alias-label-secondary);flex:1;font-size:12px;font-weight:500;line-height:1.5}
+.cc-usageWindowValue{color:var(--dsw-alias-label-primary);font-size:12px;font-weight:500;line-height:1.5}
+.cc-usageExceeded{color:var(--dsw-alias-label-error);font-size:11px;font-weight:500;line-height:1.5}
+.cc-usageBar{overflow:hidden;background:var(--dsw-alias-bg-layer-1);border-radius:999px;height:6px}
+.cc-usageBarFill{background:var(--dsw-alias-brand-primary);border-radius:999px;height:100%;transition:width .3s ease}
+.cc-usageBarFillWarn{background:var(--dsw-alias-label-error)}
+.cc-usageWindowReset{color:var(--dsw-alias-label-tertiary);margin:0;font-size:11px;line-height:1.5}
+.cc-usageMeta{align-items:center;gap:8px;display:flex}
+.cc-usageMetaSpacer{flex:1}
+.cc-usageUpdated{color:var(--dsw-alias-label-tertiary);margin:0;font-size:11px;line-height:1.5}
+.cc-usagePartial{color:var(--dsw-alias-label-error);margin:0;font-size:11px;line-height:1.5}
 `;
 		/** Inject the page stylesheet once (idempotent per tag). */
 		function injectPageCss() {
@@ -678,12 +1295,56 @@ window.__ModuleLoader__.load({
 			ctx.effect(() => () => controller.dispose(), "dsh-commandcode-provider: settings controller");
 			const store = (0, _deepseek_ai_dsh_client_runtime_client.createSnapshotStore)(controller.state());
 			controller.subscribe(() => store.set(controller.state()));
+			let usageNamespace;
+			let usageMountError;
+			ctx.effect(() => {
+				let cancelled = false;
+				let unmount;
+				ctx.remote.$mount(USAGE_REMOTE_CONTRIBUTION).then((dispose) => {
+					if (cancelled) {
+						dispose();
+						return;
+					}
+					unmount = dispose;
+					ctx.inject(["remote.commandcode"], (namespaceCtx) => {
+						usageNamespace = namespaceCtx.remote.commandcode;
+						namespaceCtx.effect(() => () => {
+							usageNamespace = void 0;
+						}, "dsh-commandcode-provider: usage namespace");
+					});
+				}, (error) => {
+					usageMountError = error instanceof Error ? error.message : String(error);
+				});
+				return () => {
+					cancelled = true;
+					usageNamespace = void 0;
+					if (unmount !== void 0) unmount();
+				};
+			}, "dsh-commandcode-provider: usage remote");
+			const usageController = new CommandCodeUsageController({ report: async () => {
+				const namespace = usageNamespace;
+				if (namespace === void 0) return {
+					ok: false,
+					error: { message: usageMountError ?? "commandcode/report remote is not mounted" }
+				};
+				return namespace.report();
+			} });
+			ctx.effect(() => () => usageController.dispose(), "dsh-commandcode-provider: usage controller");
+			const usageStore = (0, _deepseek_ai_dsh_client_runtime_client.createSnapshotStore)(usageController.state());
+			usageController.subscribe(() => usageStore.set(usageController.state()));
 			const injected = () => ({
-				hooks: { commandCodeSettings: store },
+				hooks: {
+					commandCodeSettings: store,
+					commandCodeUsage: usageStore
+				},
 				edit: (field, text) => controller.edit(field, text),
 				resetField: (field) => controller.resetField(field),
-				save: () => void controller.save(),
-				discard: () => controller.discard()
+				save: () => void controller.save().then(() => {
+					const settled = controller.state();
+					if (!settled.failed && settled.apiKeyConfigured) usageController.refresh();
+				}),
+				discard: () => controller.discard(),
+				refreshUsage: () => void usageController.refresh()
 			});
 			ctx.slots.inject("settings.section", () => ctx.slots.register({
 				name: "settings.section",