@mars-sea/dsh-commandcode-provider 0.10.6 → 0.11.0

package/lib/client.js

@@ -1225,7 +1225,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/usage.ts
-		const IDLE = {
+		const IDLE$1 = {
 			status: "idle",
 			report: void 0,
 			error: void 0,
@@ -1239,7 +1239,7 @@ window.__ModuleLoader__.load({
 		var CommandCodeUsageController = class {
 			remote;
 			listeners = /* @__PURE__ */ new Set();
-			current = IDLE;
+			current = IDLE$1;
 			generation = 0;
 			inFlight = false;
 			disposed = false;
@@ -1341,6 +1341,166 @@ window.__ModuleLoader__.load({
 			if (ms <= 0) return "";
 			return new Date(ms).toLocaleString();
 		}
+		/** Host facts drive the usage card, including keys invisible to browser credentials. */
+		function usageCardState(usage) {
+			const accounts = usage.report?.accounts ?? [];
+			return {
+				loading: usage.status === "loading",
+				shouldRefresh: usage.status === "idle",
+				noKey: accounts.length > 0 && !accounts.some((account) => account.configured)
+			};
+		}
+		//#endregion
+		//#region src/client/prices.ts
+		const IDLE = {
+			status: "idle",
+			table: void 0,
+			error: void 0
+		};
+		const RETRY_TIMER = {
+			set(callback, ms) {
+				const handle = setTimeout(callback, ms);
+				handle.unref?.();
+				return handle;
+			},
+			clear(handle) {
+				clearTimeout(handle);
+			}
+		};
+		/**
+		* Cache over the `commandcode/prices` Remote, with a bounded transient-retry
+		* budget. Public API mirrors {@link CommandCodeUsageController}: `state()`,
+		* `subscribe`, and `ensure()`; `reload()` additionally drops the cache and
+		* restarts the budget when the Host namespace rebinds.
+		*
+		* Not a one-shot: the last fetch is cached until `reload()`, a transient
+		* failure is retried three times at 1/2/4 s (the delays are bounded, not a
+		* poll), and a MANUAL `ensure()` still fetches after that budget is spent. A
+		* PERMANENT failure — the Host serving no such endpoint — is terminal for the
+		* binding and is only cleared by `reload()`.
+		*/
+		var CommandCodePricesController = class {
+			remote;
+			listeners = /* @__PURE__ */ new Set();
+			current = IDLE;
+			generation = 0;
+			inFlight = false;
+			disposed = false;
+			retryHandle;
+			attempts = 0;
+			permanent = false;
+			timer;
+			constructor(remote, timer = RETRY_TIMER) {
+				this.timer = timer;
+				this.remote = remote;
+			}
+			/** Release every subscription. Idempotent; in-flight results are dropped. */
+			dispose() {
+				this.disposed = true;
+				this.clearRetry();
+				this.listeners.clear();
+			}
+			/** Subscribe to state projections. @returns the disposer. */
+			subscribe(listener) {
+				this.listeners.add(listener);
+				return () => this.listeners.delete(listener);
+			}
+			/** The current state face. */
+			state() {
+				return this.current;
+			}
+			/**
+			* Fetch the table unless it is already loaded, permanent, or in flight — and
+			* unless a bounded retry already owns the next attempt.
+			*
+			* The only callers are the client entry: `reload()` when the Remote namespace
+			* lands or rebinds, and a manual refresh. Nothing in the composer calls it, so
+			* a mounted readout does not trigger a fetch of its own — it renders whatever
+			* the table's state currently is.
+			*/
+			ensure() {
+				if (this.disposed || this.permanent || this.inFlight || this.current.status === "ready") return;
+				this.clearRetry();
+				const call = this.remote.prices;
+				if (typeof call !== "function") {
+					this.permanent = true;
+					this.publish({
+						status: "error",
+						table: void 0,
+						error: "the Host serves no commandcode/prices endpoint"
+					});
+					return;
+				}
+				const generation = this.generation;
+				this.inFlight = true;
+				this.attempts += 1;
+				this.publish({
+					status: "loading",
+					table: this.current.table,
+					error: void 0
+				});
+				let request;
+				try {
+					request = call.call(this.remote);
+				} catch (error) {
+					request = Promise.reject(error);
+				}
+				request.then((result) => {
+					if (this.disposed || generation !== this.generation) return;
+					this.inFlight = false;
+					if (result.ok) {
+						this.publish({
+							status: "ready",
+							table: result.value,
+							error: void 0
+						});
+						return;
+					}
+					this.permanent = result.error.permanent === true;
+					this.publish({
+						status: "error",
+						table: void 0,
+						error: result.error.message
+					});
+					this.scheduleRetry();
+				}, (error) => {
+					if (this.disposed || generation !== this.generation) return;
+					this.inFlight = false;
+					this.publish({
+						status: "error",
+						table: void 0,
+						error: error instanceof Error ? error.message : String(error)
+					});
+					this.scheduleRetry();
+				});
+			}
+			/** Rebinding a Host invalidates cached prices and restarts the bounded retry budget. */
+			reload() {
+				if (this.disposed) return;
+				this.generation += 1;
+				this.inFlight = false;
+				this.clearRetry();
+				this.permanent = false;
+				this.attempts = 0;
+				this.current = IDLE;
+				this.ensure();
+			}
+			clearRetry() {
+				if (this.retryHandle !== void 0) this.timer.clear(this.retryHandle);
+				this.retryHandle = void 0;
+			}
+			scheduleRetry() {
+				if (this.disposed || this.permanent || this.attempts >= 4) return;
+				this.retryHandle = this.timer.set(() => {
+					this.retryHandle = void 0;
+					this.ensure();
+				}, 1e3 * 2 ** (this.attempts - 1));
+			}
+			publish(next) {
+				this.current = next;
+				for (const listener of this.listeners) listener();
+			}
+		};
 		//#endregion
 		//#region src/client/login.ts
 		/** How often a live attempt is polled. */
@@ -1680,7 +1840,16 @@ window.__ModuleLoader__.load({
 		*/
 		const { reject: reject$1, record: record$1, stringField: stringField$1, numberField, booleanField } = makeBoundaryValidator("commandcode/report result:");
 		/** Validate one window-limit block (`fiveHour` / `weekly`). */
+		/**
+		* Parse one quota window, or undefined when the frame carries no such window.
+		*
+		* The distinction is load-bearing at this boundary: an ABSENT window means the
+		* billing endpoint reported none (an unlimited plan), while a present block with
+		* `cap: 0` means uncapped spend that was really reported. Collapsing the two
+		* would draw a zeroed quota row for an account that has no such limit.
+		*/
 		function windowLimit(value, field) {
+			if (value === void 0) return void 0;
 			const source = record$1(value, field);
 			return {
 				used: numberField(source, "used", `${field}.used`),
@@ -1728,13 +1897,18 @@ window.__ModuleLoader__.load({
 			}
 			if (source.credits !== void 0) {
 				const credits = record$1(source.credits, "credits");
-				report.credits = {
+				const parsed = {
 					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")
+					freeCredits: numberField(credits, "freeCredits", "credits.freeCredits")
 				};
+				if (credits.monthlyReported !== void 0) parsed.monthlyReported = booleanField(credits, "monthlyReported", "credits.monthlyReported");
+				for (const flag of ["purchasedReported", "freeReported"]) if (credits[flag] !== void 0) parsed[flag] = booleanField(credits, flag, `credits.${flag}`);
+				const fiveHour = windowLimit(credits.fiveHour, "credits.fiveHour");
+				const weekly = windowLimit(credits.weekly, "credits.weekly");
+				if (fiveHour !== void 0) parsed.fiveHour = fiveHour;
+				if (weekly !== void 0) parsed.weekly = weekly;
+				report.credits = parsed;
 			}
 			if (source.plan !== void 0) {
 				const plan = record$1(source.plan, "plan");
@@ -1803,6 +1977,72 @@ window.__ModuleLoader__.load({
 			package: USAGE_REMOTE_PACKAGE,
 			descriptors: [makeRemoteDescriptor(MODELS_ENDPOINT, "models", `${USAGE_REMOTE_PACKAGE}#CommandCodeCatalog`, { parse: parseCatalog })]
 		};
+		/** Canonical `<namespace>/<method>` endpoint of the price-table Remote. */
+		const PRICES_ENDPOINT = "commandcode/prices";
+		/**
+		* The shared read/validate helpers for the price-table endpoint — its own
+		* instance so price boundary errors name `commandcode/prices`.
+		*/
+		const { reject: priceReject, record: priceRecord, stringField: priceString, numberField: priceNumber, booleanField: priceBoolean } = makeBoundaryValidator("commandcode/prices result:");
+		/** Parse one rate block (`rates`, or a model's `peak` override). */
+		function parseRates(source, field) {
+			const rates = {
+				inputCost: priceNumber(source, "inputCost", `${field}.inputCost`),
+				outputCost: priceNumber(source, "outputCost", `${field}.outputCost`),
+				cacheReadCost: priceNumber(source, "cacheReadCost", `${field}.cacheReadCost`)
+			};
+			if (source.cacheWriteCost !== void 0) rates.cacheWriteCost = priceNumber(source, "cacheWriteCost", `${field}.cacheWriteCost`);
+			return rates;
+		}
+		/** Parse one untrusted boundary value into a {@link CommandCodeModelPrice}. */
+		function parseModelPrice(value) {
+			const source = priceRecord(value, "model");
+			const price = {
+				id: priceString(source, "id", "model.id"),
+				slug: priceString(source, "slug", "model.slug"),
+				...parseRates(source, "model")
+			};
+			if (source.peak !== void 0) price.peak = parseRates(priceRecord(source.peak, "model.peak"), "model.peak");
+			if (source.contextTiers !== void 0) {
+				if (!Array.isArray(source.contextTiers) || source.contextTiers.length === 0) priceReject("contextTiers");
+				let previous = 0;
+				price.contextTiers = source.contextTiers.map((value, index, tiers) => {
+					const tier = priceRecord(value, "contextTier");
+					const out = parseRates(tier, "contextTier");
+					if (tier.maxContext !== void 0) {
+						const max = priceNumber(tier, "maxContext", "contextTier.maxContext");
+						if (!Number.isSafeInteger(max) || max <= previous || index === tiers.length - 1) priceReject("contextTier.maxContext");
+						previous = max;
+						out.maxContext = max;
+					} else if (index !== tiers.length - 1) priceReject("contextTier.maxContext");
+					return out;
+				});
+			}
+			if (source.free !== void 0) price.free = priceBoolean(source, "free", "model.free");
+			return price;
+		}
+		/** Parse the wire result into a {@link CommandCodePriceTable}. */
+		function parsePriceTable(value) {
+			const source = priceRecord(value, "result");
+			const models = source.models;
+			if (!Array.isArray(models)) priceReject("models");
+			const peakHours = source.peakHours;
+			if (!Array.isArray(peakHours)) priceReject("peakHours");
+			return {
+				models: models.map(parseModelPrice),
+				peakHours: peakHours.map((window) => {
+					if (!Array.isArray(window) || window.length !== 2) priceReject("peakHours[]");
+					const [start, end] = window;
+					if (typeof start !== "number" || typeof end !== "number") priceReject("peakHours[]");
+					return [start, end];
+				})
+			};
+		}
+		/** The Client-face contribution for the price-table endpoint. */
+		const PRICES_REMOTE_CONTRIBUTION = {
+			package: USAGE_REMOTE_PACKAGE,
+			descriptors: [makeRemoteDescriptor(PRICES_ENDPOINT, "prices", `${USAGE_REMOTE_PACKAGE}#CommandCodePriceTable`, { parse: parsePriceTable })]
+		};
 		//#endregion
 		//#region src/login-wire.ts
 		/** The canonical endpoint paths of the three login Remotes. */
@@ -2051,7 +2291,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region package.json
-		var version = "0.10.6";
+		var version = "0.11.0";
 		var repository = {
 			"type": "git",
 			"url": "git+https://github.com/Mars-Sea/dsh-commandcode-provider.git"
@@ -2554,7 +2794,8 @@ window.__ModuleLoader__.load({
 			});
 		}
 		/** One window-limit row: label, used/cap, a fill bar, and the reset time. */
-		function UsageWindow({ label, limit: { used, cap, exceeded, resetAt }, t }) {
+		function UsageWindow({ label, limit, t }) {
+			const { used, cap, exceeded, resetAt } = limit;
 			const ratio = windowRatio(used, cap);
 			const reset = formatResetAt(resetAt);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2717,29 +2958,29 @@ window.__ModuleLoader__.load({
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
 								label: t("usageMonthly"),
-								value: formatMoney(credits.monthlyCredits)
+								value: credits.monthlyReported === false ? "—" : formatMoney(credits.monthlyCredits)
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
 								label: t("usagePurchased"),
-								value: formatMoney(credits.purchasedCredits)
+								value: credits.purchasedReported === false ? "—" : formatMoney(credits.purchasedCredits)
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
 								label: t("usageFree"),
-								value: formatMoney(credits.freeCredits)
+								value: credits.freeReported === false ? "—" : formatMoney(credits.freeCredits)
 							})
 						]
 					}) : null,
-					credits !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					credits?.fiveHour !== void 0 || credits?.weekly !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-usageWindows",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageWindow, {
+						children: [credits.fiveHour !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageWindow, {
 							label: t("usageFiveHour"),
 							limit: credits.fiveHour,
 							t
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageWindow, {
+						}) : null, credits.weekly !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageWindow, {
 							label: t("usageWeekly"),
 							limit: credits.weekly,
 							t
-						})]
+						}) : null]
 					}) : null,
 					showPeriod || showPartial || fetchedAt !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-usageMeta",
@@ -2800,15 +3041,11 @@ window.__ModuleLoader__.load({
 		* management card are hidden here immediately. Data arrives through the
 		* `commandcode/report` Remote; the API keys never leave the Host.
 		*/
-		function UsageCard({ t, usage, apiKeyConfigured, removingIds, removableIds, canManage, onRefresh, onRemoveAccount }) {
+		function UsageCard({ t, usage, removingIds, removableIds, canManage, onRefresh, onRemoveAccount }) {
+			const { loading, shouldRefresh, noKey } = usageCardState(usage);
 			(0, react.useEffect)(() => {
-				if (apiKeyConfigured && usage.status === "idle") onRefresh();
-			}, [
-				apiKeyConfigured,
-				usage.status,
-				onRefresh
-			]);
-			const loading = usage.status === "loading";
+				if (shouldRefresh) onRefresh();
+			}, [shouldRefresh, onRefresh]);
 			const report = usage.report;
 			const [locallyRemoved, setLocallyRemoved] = (0, react.useState)([]);
 			(0, react.useEffect)(() => {
@@ -2844,17 +3081,17 @@ window.__ModuleLoader__.load({
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: "cc-usageRefresh",
-								disabled: loading || !apiKeyConfigured,
+								disabled: loading,
 								onClick: onRefresh,
 								children: loading ? t("usageRefreshing") : t("usageRefresh")
 							})
 						]
 					}),
-					!apiKeyConfigured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					noKey ? /* @__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", {
+					report === void 0 && loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "cc-usageHint",
 						children: t("usageLoading")
 					}) : null,
@@ -3399,7 +3636,6 @@ window.__ModuleLoader__.load({
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageCard, {
 						t,
 						usage,
-						apiKeyConfigured: state.anyAccountConfigured,
 						removingIds: state.accountsRemoving,
 						removableIds: state.accounts.map((account) => account.id),
 						canManage: state.writable,
@@ -3535,7 +3771,7 @@ window.__ModuleLoader__.load({
 			return null;
 		}
 		/** The closed-panel style: the outlet stays mounted as the detection anchor. */
-		const HIDDEN_STYLE = { display: "none" };
+		const HIDDEN_STYLE$1 = { display: "none" };
 		/**
 		* Decide the card's posture from one settings snapshot. Pure: the component
 		* subscribes once and passes the snapshot in, so hook order never depends
@@ -3655,7 +3891,7 @@ window.__ModuleLoader__.load({
 				ref: rootRef,
 				className: "cc-providerCard",
 				"data-cc-models-card": "true",
-				style: editorOpen ? void 0 : HIDDEN_STYLE,
+				style: editorOpen ? void 0 : HIDDEN_STYLE$1,
 				children: [
 					editorOpen && mode.kind === "registration" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "cc-hint",
@@ -3728,172 +3964,1976 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
-		//#region src/client/locales.ts
-		const zh = {
+		//#region src/client/panel-copy.ts
+		/** The panel's literal string table. */
+		const PANEL_COPY = {
 			nav: "Command Code",
-			title: "Command Code",
-			intro: "配置 Command Code Provider 连接。API 密钥仅保存在本机凭据服务中，不会回显；其他字段写入用户设置，下次请求即生效。",
-			apiKey: "API 密钥",
-			apiKeyHint: "在 commandcode.ai 控制台创建。留空保存不会覆盖已存储的密钥。",
-			apiKeySet: "已配置",
-			apiKeyUnset: "未配置",
-			apiKeyLocked: "密钥由只读来源提供",
-			apiBase: "API 地址",
-			apiBaseHint: "默认 https://api.commandcode.ai，一般无需修改。",
-			workingDir: "工作目录",
-			workingDirHint: "可选。留空时使用占位符显示的进程工作目录；仅在需要固定路径时填写。",
-			requestTimeoutMs: "请求超时（毫秒）",
-			requestTimeoutMsHint: "等待响应首个字节的超时；默认 60000。",
-			streamIdleTimeoutMs: "流空闲超时（毫秒）",
-			streamIdleTimeoutMsHint: "生成流停滞多久视为断连；默认 300000（长思考模型可静默数分钟，默认值刻意放宽）。",
-			advancedSettings: "高级设置",
-			advancedSettingsHint: "API 地址、工作目录、超时与模型过滤等不常修改的选项。",
-			advancedOverriddenOne: "已自定义 1 项",
-			advancedOverriddenMany: "已自定义 {count} 项",
-			advancedInvalid: "高级设置中有未填好的数字，请展开修正后再保存。",
-			filterModelsByPlan: "隐藏套餐外模型",
-			filterModelsByPlanHint: "开启后，模型选择器只列出当前套餐可用的模型；账户持有按需余额时会显示全部。",
-			webSearch: "用 Command Code 承载联网搜索",
-			webSearchHint: "开启后，dsh 的 web_search 工具由 Command Code 承担（复用同一个 API key 与地址），并优先于其他搜索后端；关闭则把选择权交还给之前的后端（如 modsearch），而不是强制回退到 DeepSeek 搜索。",
-			accountsTitle: "多账户轮换",
-			accountsHint: "当前账户达到用量限额（429）或密钥失效（401）时，请求自动切换到下一个账户；全部耗尽时会提示最早的重置时间。",
-			accountAdd: "添加账户",
-			accountRemove: "移除",
-			accountLabel: "账户备注名",
-			accountKey: "API 密钥",
-			accountKeyHint: "该账户的 API 密钥。留空保存不会覆盖已存储的密钥。",
-			accountDefault: "默认账户",
-			activeAccount: "当前使用账户",
-			activeAccountAuto: "自动（第一个可用账户）",
-			activeAccountHint: "手动指定优先使用的账户，保存后下次请求即生效；所选账户耗尽时仍会自动切换到其他可用账户。",
-			rulesTitle: "按模型切换账户",
-			rulesHint: "选择模型并路由到某个账户（可多选）。命中规则的模型且该账户可用时优先使用；账户耗尽或密钥失效时仍自动回落到其他账户。规则按列表顺序匹配，第一条命中生效。",
-			rulesEmpty: "尚未配置规则。",
-			rulesCatalogFailed: "模型目录获取失败，暂时无法选择模型；已保存的规则仍会生效。",
-			ruleAdd: "添加规则",
-			ruleRemove: "移除",
-			ruleModel: "模型",
-			ruleModelPick: "选择模型…",
-			ruleModelCount: "已选 {count} 个模型",
-			ruleAccount: "目标账户",
-			ruleHint: "从下拉列表勾选要路由的模型（可多选），再选择目标账户。",
-			modelSearchPlaceholder: "搜索模型…",
-			modelSearchEmpty: "没有匹配的模型。",
-			modelStale: "已下架",
-			visibleModelsTitle: "模型白名单",
-			visibleModelsHint: "勾选要保留的模型，模型选择器就只列出这些；一个都不勾选时则显示全部模型。保存后，下次打开模型选择器生效。",
-			visibleModelsPick: "选择要保留的模型…",
-			visibleModelsCount: "已选 {count} 个模型",
-			visibleModelsShowAll: "显示全部",
-			visibleModelsStaleHint: "有 {count} 个已选模型在目录中找不到了（可能已下架），不影响其他模型；可清理或保留。",
-			visibleModelsCleanStale: "清理失效（{count}）",
-			overridden: "已覆盖",
-			reset: "重置",
-			invalidNumber: "无效数字",
-			numberTooSmall: "不能小于 1（毫秒）",
-			numberTooLarge: "超出允许上限（2147483647 毫秒）",
-			readOnly: "当前配置为只读。",
-			unsaved: "未保存",
-			save: "保存",
-			saving: "保存中",
-			saved: "已保存 ✓",
-			saveFailed: "保存失败，请重试。",
-			discard: "放弃",
-			cancel: "取消",
-			show: "显示",
-			hide: "隐藏",
-			usageTitle: "账户用量",
-			usageRefresh: "刷新",
-			usageRefreshing: "刷新中…",
-			usageLoading: "正在获取账户用量…",
-			usageNoKey: "配置 API 密钥后，这里会显示账户的用量与额度状态。",
-			usageError: "用量获取失败",
-			usageRequests: "请求",
-			usageFailed: "失败",
-			usageSuccessRate: "成功率",
-			usageCost: "花费",
-			usageTokens: "Token",
-			usageTokensIn: "入",
-			usageTokensOut: "出",
-			usageMonthly: "月额度",
-			usagePurchased: "已购",
-			usageFree: "赠送",
-			usageFiveHour: "5 小时窗口",
-			usageWeekly: "每周窗口",
-			usageExceeded: "已超限",
-			usageReset: "重置于",
-			usagePartial: "部分端点数据不可用",
-			usageKeyClear: "清除已存密钥",
-			usageKeyClearStaged: "将清除（保存后生效）",
-			usageUndoKeyClear: "撤销清除",
-			usageKeyInvalid: "API 密钥无效或已过期",
-			usageKeyInvalidHint: "服务端拒绝了全部请求（401）。请检查该账户配置的密钥，或到 commandcode.ai 控制台重新生成。",
-			usageServiceUnavailable: "Command Code 服务暂时不可用",
-			usageServiceUnavailableHint: "服务端返回了错误（5xx），稍后点击刷新重试。",
-			usageNetworkError: "无法连接 Command Code 服务",
-			usageNetworkHint: "所有请求都没有到达服务端。请检查网络连接或 API 地址设置。",
-			usageUpdated: "更新于",
-			usagePeriodEnd: "账期截止",
-			usageActive: "当前使用",
-			usageCooldown: "限额冷却中",
-			usageInvalidKey: "密钥无效",
-			usageUnconfigured: "该账户尚未配置 API 密钥。",
-			updateAvailable: "可更新",
-			updateHint: "已发布新版本，点击查看发布说明；更新插件后刷新本页，提示会自动消失。",
-			loginTitle: "通过官方登录获取密钥",
-			loginHintIdle: "不想手动创建密钥？点击登录后浏览器会打开 commandcode.ai 授权页，完成后密钥自动写入本机凭据服务，下次请求即生效。",
-			loginButton: "登录 Command Code",
-			loginStarting: "正在启动本地回调服务…",
-			loginWaiting: "等待在浏览器中完成授权…",
-			loginOpenLink: "打开授权页面 ↗",
-			loginCancel: "取消登录",
-			loginSuccess: "已登录为",
-			loginUnavailable: "此环境暂不支持登录流程，请手动粘贴密钥。",
-			loginDenied: "授权被拒绝。可重试，或手动粘贴密钥。",
-			loginTimeout: "等待超时：未在窗口期内收到授权回调，请重试。",
-			loginInvalidKey: "获取到的密钥未通过校验（401），请重试或手动粘贴。",
-			loginNetwork: "无法连接 Command Code 服务校验密钥，请检查网络后重试。",
-			loginStoreFailed: "密钥无法写入本机凭据服务，请手动粘贴。",
-			loginCancelled: "登录已取消。",
-			loginFailedGeneric: "登录失败，请重试或手动粘贴密钥。",
-			cardTitle: "Command Code",
-			cardRouteActive: "已启用",
-			cardLoadingHint: "正在读取 Command Code 配置…",
-			cardRegistrationHint: "此卡片随 Command Code 插件注册，需要较新版本的 DeepSeek Harness 才会显示完整内容。"
+			subtitle: "Plans, credits and quota windows",
+			refresh: "Refresh",
+			refreshing: "Refreshing…",
+			loading: "Loading account usage…",
+			noKey: "No API key configured",
+			noKeyHint: "Paste a key — or sign in — under Settings → Command Code, then refresh.",
+			plan: "Plan",
+			credits: "Credits",
+			limits: "Quota windows",
+			usage: "Usage",
+			monthly: "Monthly",
+			monthlyLimit: "Monthly limit",
+			monthlyUsed: "Monthly used",
+			remaining: "Remaining",
+			purchased: "Purchased",
+			free: "Free",
+			fiveHour: "5-hour window",
+			weekly: "Weekly window",
+			fiveHourShort: "5-hour",
+			weeklyShort: "Weekly",
+			windowUnlimited: "unlimited",
+			exceeded: "Exceeded",
+			exhausted: "Used up",
+			resets: "Resets",
+			requests: "Requests",
+			failed: "failed",
+			successRate: "Success rate",
+			spend: "Spend",
+			tokens: "Tokens",
+			tokensIn: "in",
+			tokensOut: "out",
+			periodEnds: "Period ends",
+			updated: "Updated",
+			partial: "Some endpoint data unavailable",
+			active: "Active",
+			coolingDown: "Cooling down",
+			invalidKey: "Invalid key",
+			unconfigured: "Not configured",
+			unavailable: "No data",
+			errorInvalidKey: "API key invalid or expired",
+			errorInvalidKeyHint: "The server rejected every request (401). Check the key for this account, or generate a new one in the commandcode.ai console.",
+			errorServiceUnavailable: "The Command Code service is temporarily unavailable",
+			errorServiceUnavailableHint: "The server returned errors (5xx). Try Refresh again in a moment.",
+			errorNetwork: "Could not reach the Command Code service",
+			errorNetworkHint: "No request reached the server. Check your network connection or the API base setting.",
+			errorGeneric: "Could not fetch account usage"
 		};
-		const en = {
-			nav: "Command Code",
-			title: "Command Code",
-			intro: "Configure the Command Code Provider connection. The API key is stored only in the local credential service and never echoed; other fields are written to user settings and take effect on the next request.",
-			apiKey: "API key",
-			apiKeyHint: "Create one in the commandcode.ai console. Saving with this field blank keeps the stored key.",
-			apiKeySet: "Configured",
-			apiKeyUnset: "Not configured",
-			apiKeyLocked: "Key provided by a read-only source",
-			apiBase: "API base URL",
-			apiBaseHint: "Defaults to https://api.commandcode.ai; usually leave as-is.",
-			workingDir: "Working directory",
-			workingDirHint: "Optional. Leave blank to use the process cwd shown as the placeholder; fill in only to pin a specific path.",
-			requestTimeoutMs: "Request timeout (ms)",
-			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).",
-			advancedSettings: "Advanced",
-			advancedSettingsHint: "Rarely touched options: API base URL, working directory, timeouts, and model filtering.",
-			advancedOverriddenOne: "1 customized",
-			advancedOverriddenMany: "{count} customized",
-			advancedInvalid: "A number in Advanced settings is not ready to save; expand to fix it.",
-			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.",
-			webSearch: "Serve dsh web search with Command Code",
-			webSearchHint: "When on, the model-facing web_search tool is backed by Command Code (same API key and base URL as chat), winning over other search backends. Off hands the selection back to the previous backend (e.g. modsearch) instead of forcing the shipped DeepSeek search.",
-			accountsTitle: "Account rotation",
-			accountsHint: "When the active account hits its usage limit (429) or its key fails (401), requests switch to the next account; when every account is exhausted the error names the earliest window reset.",
-			accountAdd: "Add account",
-			accountRemove: "Remove",
-			accountLabel: "Account label",
-			accountKey: "API key",
-			accountKeyHint: "This account’s API key. Saving with the field blank keeps the stored key.",
+		/** Look up one panel string. The fallback key keeps a bad call visible, never blank. */
+		function panelText(key) {
+			return PANEL_COPY[key] ?? key;
+		}
+		//#endregion
+		//#region src/client/panel.ts
+		/** `$1.23`, and `$0.0123` only when the amount is too small for cents to show it. */
+		function money(value) {
+			if (value === 0) return formatMoney(0);
+			return Math.abs(value) < .01 ? formatMoneyExact(value) : formatMoney(value);
+		}
+		/**
+		* What a figure shows when the endpoint that carries it did not report one.
+		* A dash, never a zero: the panel exists to state what the account has spent,
+		* so "we were not told" has to look different from "nothing".
+		*/
+		const UNREPORTED = "—";
+		/** Local reset time; empty when the endpoint reported none. */
+		function resetText(ms) {
+			if (ms <= 0) return "";
+			return new Date(ms).toLocaleString();
+		}
+		/** Local short date; empty when unset. */
+		function dateText(ms) {
+			if (ms <= 0) return "";
+			return new Date(ms).toLocaleDateString();
+		}
+		/** Local time-of-day; empty when unset. */
+		function timeText(ms) {
+			if (ms <= 0) return "";
+			return new Date(ms).toLocaleTimeString();
+		}
+		/**
+		* Consumption as a percentage, NOT clamped at 100 — an over-quota window
+		* reports its real overshoot (150%), which is what the printed figure should
+		* say. Bar widths clamp separately via {@link barPercent}.
+		*/
+		function rawPercent(used, cap) {
+			if (cap <= 0) return 0;
+			return Math.round(used / cap * 100);
+		}
+		/** A percentage usable as a CSS width, clamped into [0, 100]. */
+		function barPercent(percent) {
+			return Math.min(100, Math.max(0, percent));
+		}
+		/** Build one quota-window view. */
+		function windowView(label, limit) {
+			const percent = rawPercent(limit.used, limit.cap);
+			const capped = limit.cap > 0;
+			return {
+				label,
+				value: capped ? `${money(limit.used)} / ${money(limit.cap)}` : money(limit.used),
+				capped,
+				percent,
+				barPercent: barPercent(percent),
+				exceeded: limit.exceeded,
+				resetsAt: resetText(limit.resetAt)
+			};
+		}
+		/**
+		* Build the monthly credit view from the two endpoints that carry it.
+		*
+		* The limit is the PLAN's credit total, not the billing endpoint's
+		* `monthlyCredits` — that field is a remaining balance (see
+		* {@link PanelMonthlyView}). Unknown plans (no `monthlyCredits` on the plan
+		* record) therefore still show their balances, just without a ratio.
+		*
+		* The trap this guards: a MISSING balance is not a consumed one. The billing
+		* endpoint is one of four the report fetches in parallel, so it fails on its
+		* own while the plan still arrives — and reading the absent balance as 0 would
+		* turn that partial failure into `limit - 0 = limit`, i.e. a confident "100%
+		* used, quota exhausted" for an account that may have spent nothing. The
+		* official CLI draws no meter unless the credits payload is present at all
+		* (`hasCreditsInfo`), so "unreported" is the upstream-faithful reading here
+		* too. Every derived figure stays a placeholder until the balance reported.
+		*/
+		function monthlyView(report) {
+			const credits = report.credits;
+			const plan = report.plan;
+			if (credits === void 0 && plan === void 0) return void 0;
+			const limitValue = plan?.monthlyCredits ?? null;
+			const remainingReported = credits !== void 0 && credits.monthlyReported !== false;
+			const remaining = remainingReported ? Math.max(0, credits.monthlyCredits) : 0;
+			const known = limitValue !== null && limitValue > 0 && remainingReported;
+			const used = known ? Math.max(0, limitValue - remaining) : 0;
+			const percent = known ? rawPercent(used, limitValue) : 0;
+			return {
+				known,
+				limit: limitValue !== null ? money(limitValue) : UNREPORTED,
+				used: known ? money(used) : UNREPORTED,
+				remaining: remainingReported ? money(remaining) : UNREPORTED,
+				purchased: credits !== void 0 && credits.purchasedReported !== false ? money(Math.max(0, credits.purchasedCredits)) : UNREPORTED,
+				free: credits !== void 0 && credits.freeReported !== false ? money(Math.max(0, credits.freeCredits)) : UNREPORTED,
+				percent,
+				barPercent: barPercent(percent),
+				exhausted: known && remaining <= 0,
+				periodEnds: dateText(plan?.currentPeriodEnd ?? 0)
+			};
+		}
+		/** Build one account's view. */
+		function accountView(entry) {
+			const { report } = entry;
+			const account = report.account;
+			const plan = report.plan;
+			const credits = report.credits;
+			const usage = report.usage;
+			const stats = [];
+			if (usage !== void 0) {
+				stats.push({
+					label: "requests",
+					value: String(usage.completedCount),
+					sub: `${usage.failedCount} ${panelText("failed")}`
+				});
+				stats.push({
+					label: "successRate",
+					value: `${formatSuccessRate(usage.successRate)}%`,
+					sub: ""
+				});
+				stats.push({
+					label: "spend",
+					value: formatMoneyExact(usage.totalCost),
+					sub: `${formatMoney(usage.totalCredits)} credits`
+				});
+				stats.push({
+					label: "tokens",
+					value: formatTokensCompact(usage.totalTokensIn + usage.totalTokensOut),
+					sub: `${formatTokensCompact(usage.totalTokensIn)} ${panelText("tokensIn")} / ${formatTokensCompact(usage.totalTokensOut)} ${panelText("tokensOut")}`
+				});
+			}
+			const windows = [];
+			if (credits?.fiveHour !== void 0) windows.push(windowView("fiveHour", credits.fiveHour));
+			if (credits?.weekly !== void 0) windows.push(windowView("weekly", credits.weekly));
+			let mark;
+			if (entry.active) mark = "active";
+			else if (entry.mark === "invalid-credential") mark = "invalidKey";
+			else if (entry.cooldownUntil > 0 || entry.mark === "rate-limit") mark = "coolingDown";
+			return {
+				id: entry.id,
+				label: entry.label,
+				owner: account === void 0 ? "" : account.userName || account.name,
+				planName: plan?.name ?? "",
+				planStatus: plan !== void 0 && plan.status !== "" && plan.status !== "active" ? plan.status : "",
+				mark,
+				cooldownUntil: entry.cooldownUntil > 0 ? resetText(entry.cooldownUntil) : "",
+				unconfigured: !entry.configured,
+				periodEnds: dateText(plan?.currentPeriodEnd ?? 0),
+				active: entry.active,
+				monthly: monthlyView(report),
+				windows,
+				stats
+			};
+		}
+		/** The report-level failure box, or undefined when the report is usable. */
+		function failureView(state) {
+			const blocked = state.report?.accounts.find((entry) => entry.report.blocked !== void 0)?.report.blocked;
+			if (blocked === "invalid-key") return {
+				title: "errorInvalidKey",
+				hint: "errorInvalidKeyHint",
+				detail: ""
+			};
+			if (blocked === "service-unavailable") return {
+				title: "errorServiceUnavailable",
+				hint: "errorServiceUnavailableHint",
+				detail: ""
+			};
+			if (blocked === "network") return {
+				title: "errorNetwork",
+				hint: "errorNetworkHint",
+				detail: ""
+			};
+			if (state.status === "error" && state.report === void 0) return {
+				title: "errorGeneric",
+				hint: "errorGeneric",
+				detail: state.error ?? ""
+			};
+		}
+		/**
+		* Every panel string, resolved once per projection. One object with all keys
+		* (rather than per-field lookups in the components) keeps the copy table and
+		* the render sites in lockstep: a key cannot be read from `text` unless
+		* {@link PANEL_COPY} declares it.
+		*/
+		function panelStrings() {
+			const keys = Object.keys(PANEL_COPY);
+			const out = {};
+			for (const key of keys) out[key] = panelText(key);
+			return out;
+		}
+		/**
+		* Project the shared usage snapshot into the panel's render tree.
+		*
+		* Deduplication matches the settings card: hand-edited settings can name one
+		* credential twice, and removal staging hides an account before the post-save
+		* refresh lands.
+		*/
+		function buildPanelView(input) {
+			const { usage } = input;
+			const hidden = new Set(input.removingIds ?? []);
+			const seen = /* @__PURE__ */ new Set();
+			const entries = (usage.report?.accounts ?? []).filter((entry) => {
+				if (hidden.has(entry.id)) return false;
+				if (seen.has(entry.id)) return false;
+				seen.add(entry.id);
+				return true;
+			});
+			const accounts = entries.map(accountView);
+			const selectedEntry = entries.find((entry) => entry.active) ?? entries[0];
+			const selectedView = accounts.find((view) => view.id === selectedEntry?.id);
+			const footerBars = [];
+			const windowBars = [["fiveHourShort", selectedEntry?.report.credits?.fiveHour], ["weeklyShort", selectedEntry?.report.credits?.weekly]];
+			for (const [label, window] of windowBars) {
+				if (window === void 0 || window.cap <= 0) continue;
+				const percent = rawPercent(window.used, window.cap);
+				footerBars.push({
+					label,
+					percent: `${percent}%`,
+					barPercent: barPercent(percent),
+					warn: window.exceeded,
+					detail: `${money(window.used)} / ${money(window.cap)}`
+				});
+			}
+			const totalCost = selectedEntry?.report.usage?.totalCost;
+			const cost = totalCost === void 0 ? "" : money(totalCost);
+			let status = "";
+			if (entries.length > 0 && !entries.some((entry) => entry.configured)) status = panelText("unconfigured");
+			else if (selectedView?.mark !== void 0 && selectedView.mark !== "active") status = panelText(selectedView.mark);
+			else if (selectedEntry === void 0) status = panelText("unavailable");
+			const planName = selectedView !== void 0 && selectedView.planName !== "" ? selectedView.planName : panelText("nav");
+			const titleParts = planName === panelText("nav") ? [planName] : [panelText("nav"), planName];
+			for (const bar of footerBars) {
+				const figures = bar.detail === "" ? "" : ` ${bar.detail}`;
+				titleParts.push(`${panelText(bar.label)}${figures} (${bar.percent})`);
+			}
+			if (cost !== "") titleParts.push(`${panelText("spend")} ${cost}`);
+			return {
+				text: panelStrings(),
+				planName,
+				status,
+				footerBars,
+				cost,
+				footTitle: titleParts.join(" · "),
+				accounts,
+				selectedId: selectedEntry?.id,
+				selected: selectedView,
+				loading: usage.status === "loading" && usage.report === void 0,
+				noKey: entries.length > 0 && !entries.some((entry) => entry.configured),
+				failure: failureView(usage),
+				staleError: usage.status === "error" && usage.report !== void 0 ? usage.error ?? "" : void 0,
+				partial: usage.report?.accounts.some((entry) => entry.report.failures.length > 0 && entry.report.blocked === void 0) ?? false ? "partial" : void 0,
+				updatedAt: timeText(usage.fetchedAt ?? 0)
+			};
+		}
+		/**
+		* How often the panel re-reads the report while a surface is mounted. The
+		* quota windows move slowly and one report costs four upstream calls, so this
+		* is a background freshness tick, not a live meter.
+		*/
+		const PANEL_AUTO_REFRESH_MS = 12e4;
+		/** The default timer (the client bundle runs in a browser; node tests inject one). */
+		const REAL_TIMER = {
+			set: (callback, ms) => setTimeout(callback, ms),
+			clear: (handle) => clearTimeout(handle)
+		};
+		/** Live mount count of {@link startPanelAutoRefresh}. */
+		let references = 0;
+		/** Owner ticket of the running loop, if any. */
+		let activeTicket;
+		/** Ticket handed to the next starter. */
+		let ticketSeq = 0;
+		/** Pending timer handle of the running loop. */
+		let handle;
+		/**
+		* Start the shared auto refresh. One fetch when the surface appears (the
+		* sidebar row is the point of the panel — it must be current, not wait for a
+		* click), then a tick every {@link PANEL_AUTO_REFRESH_MS} while a surface
+		* stays mounted.
+		*
+		* Reference-counted: the sidebar entry and the dashboard can be mounted at
+		* once, so only the first start fetches and only the last stop halts the loop.
+		* Every tick goes through `usage.refresh()`, which already collapses a
+		* concurrent fetch onto the in-flight one — a tick never double-fetches
+		* against the settings page's own refresh.
+		*
+		* @param usage - the shared usage controller.
+		* @param isConfigured - whether a credential exists right now (re-read per tick).
+		* @param timer - timer seam for tests.
+		* @returns the disposer that drops this surface's reference.
+		*/
+		function startPanelAutoRefresh(usage, isConfigured, timer = REAL_TIMER) {
+			references += 1;
+			const ticket = ++ticketSeq;
+			const tick = () => {
+				if (activeTicket !== ticket) return;
+				if (isConfigured()) usage.refresh();
+				handle = timer.set(tick, PANEL_AUTO_REFRESH_MS);
+			};
+			if (activeTicket === void 0) {
+				activeTicket = ticket;
+				handle = timer.set(tick, PANEL_AUTO_REFRESH_MS);
+				if (isConfigured()) usage.refresh();
+			}
+			let stopped = false;
+			return () => {
+				if (stopped) return;
+				stopped = true;
+				references -= 1;
+				if (references > 0) return;
+				activeTicket = void 0;
+				if (handle !== void 0) {
+					timer.clear(handle);
+					handle = void 0;
+				}
+			};
+		}
+		//#endregion
+		//#region src/client/panel-view.tsx
+		/**
+		* React components for the Command Code plans & quota panel (browser half):
+		* the sidebar footer card and the dashboard it opens in the center column.
+		*
+		* Both render one {@link PanelView} projected by `./panel.ts` — no fact is
+		* derived here. Strings arrive as keys into `view.text`, and every one of them
+		* is English, because the view is built from `./panel-copy.ts` rather than the
+		* harness `ctx.locale` namespace (which follows the user's language and would
+		* render this panel in Chinese on a Chinese harness — the thing this surface
+		* exists to avoid).
+		*
+		* The footer card is the panel's home: the sidebar shell renders it in the foot
+		* area directly above the Settings seat, so each quota window's own spend and
+		* limit — the 5-hour and the weekly one — are on screen without opening
+		* anything. Clicking it selects the `main` panel this file also renders — and
+		* unlike a `sidebar.panellist` row, whose button chrome and label the SHELL
+		* owns, this entry owns its whole surface and therefore calls `open()` itself.
+		*
+		* Styles ride the stylesheet `./panel-styles.ts` returns, injected once by
+		* the client entry; classes are `ccp-` prefixed to stay clear of the settings
+		* page's `cc-` set.
+		*
+		* @module dsh-commandcode-provider/client/panel-view
+		*/
+		/** The panel's view, recomputed from both seats on every notification. */
+		function usePanelView(props) {
+			const usage = props.useCommandCodeUsage((state) => state);
+			const settings = props.useCommandCodeSettings((state) => state);
+			return buildPanelView({
+				usage,
+				apiKeyConfigured: settings.anyAccountConfigured,
+				removingIds: settings.accountsRemoving
+			});
+		}
+		/**
+		* The quota ring. One glyph serves the rail button, the footer card's top row
+		* and the dashboard header: a faint track plus an arc whose sweep is the
+		* consumption, drawn from 12 o'clock. Circumference 2πr = 45.55 at r = 7.25.
+		*/
+		function Ring({ percent, warn, size }) {
+			const clamped = Math.min(100, Math.max(0, percent));
+			const circumference = 45.55;
+			const dashoffset = Math.round(circumference * (1 - clamped / 100) * 1e3) / 1e3;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "ccp-glyph",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+					viewBox: "0 0 20 20",
+					width: size,
+					height: size,
+					focusable: "false",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "10",
+						cy: "10",
+						r: "7.25",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						opacity: "0.4"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "10",
+						cy: "10",
+						r: "7.25",
+						fill: "none",
+						stroke: warn ? "var(--dsw-alias-state-error-primary)" : "currentColor",
+						strokeWidth: "2.5",
+						strokeLinecap: "round",
+						strokeDasharray: String(circumference),
+						strokeDashoffset: String(dashoffset),
+						transform: "rotate(-90 10 10)"
+					})]
+				})
+			});
+		}
+		/** One labelled bar. `compact` drops the reset line; the footer draws its own. */
+		function QuotaBar({ label, value, percent, barPercent, warn, resetsAt, resetsLabel }) {
+			const clamped = Math.min(100, Math.max(0, barPercent));
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "ccp-window",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ccp-windowHead",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ccp-windowLabel",
+								children: label
+							}),
+							warn !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ccp-warnTag",
+								children: warn
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "ccp-spacer" }),
+							value !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ccp-windowValue",
+								children: value
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ccp-windowPct",
+								children: percent
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ccp-bar",
+						role: "progressbar",
+						"aria-label": label,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": clamped,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: warn !== "" ? "ccp-barFill ccp-barFillWarn" : "ccp-barFill",
+							style: { width: `${clamped}%` }
+						})
+					}),
+					resetsAt !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "ccp-windowReset",
+						children: [
+							resetsLabel,
+							" ",
+							resetsAt
+						]
+					}) : null
+				]
+			});
+		}
+		/** A labelled figure. */
+		function Tile({ label, value, sub }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "ccp-tile",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ccp-tileLabel",
+						children: label
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ccp-tileValue",
+						children: value
+					}),
+					sub !== void 0 && sub !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ccp-tileSub",
+						children: sub
+					}) : null
+				]
+			});
+		}
+		/** One usage tile. */
+		function StatTile({ stat, label }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
+				label,
+				value: stat.value,
+				sub: stat.sub
+			});
+		}
+		/** The rotation/credential badge line for one account. */
+		function markText(account, text) {
+			if (account.mark === void 0) return "";
+			if (account.mark === "coolingDown" && account.cooldownUntil !== "") return `${text("coolingDown")} · ${account.cooldownUntil}`;
+			return text(account.mark);
+		}
+		/** `Default account` → `D`; used for the card's monogram chip. */
+		function initial(label) {
+			const trimmed = label.trim();
+			return trimmed === "" ? "?" : trimmed[0].toUpperCase();
+		}
+		/**
+		* One account's full report: the monthly limit/usage bar, the two quota
+		* windows, then the credit and usage totals.
+		*/
+		function AccountCard({ account, view }) {
+			const text = (key) => view.text[key] ?? key;
+			const mark = markText(account, text);
+			const monthly = account.monthly;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "ccp-card",
+				"aria-label": account.label,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+						className: "ccp-cardHead",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ccp-avatar",
+								"aria-hidden": "true",
+								children: initial(account.label)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "ccp-cardIdentity",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "ccp-cardTitle",
+									children: account.label
+								}), account.owner !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "ccp-cardOwner",
+									children: account.owner
+								}) : null]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "ccp-spacer" }),
+							account.planName !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ccp-badge",
+								children: account.planName
+							}) : null,
+							account.planStatus !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ccp-badge ccp-badgeWarn",
+								children: account.planStatus
+							}) : null,
+							mark !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: account.mark === "invalidKey" ? "ccp-badge ccp-badgeError" : "ccp-badgeMuted",
+								children: mark
+							}) : null,
+							account.periodEnds !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "ccp-meta",
+								children: [
+									text("periodEnds"),
+									" ",
+									account.periodEnds
+								]
+							}) : null
+						]
+					}),
+					account.unconfigured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "ccp-hint",
+						children: text("unconfigured")
+					}) : null,
+					monthly !== void 0 && monthly.known ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaBar, {
+						label: text("monthly"),
+						value: `${monthly.used} / ${monthly.limit}`,
+						percent: `${monthly.percent}%`,
+						barPercent: monthly.barPercent,
+						warn: monthly.exhausted ? text("exhausted") : "",
+						resetsAt: "",
+						resetsLabel: ""
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ccp-planRow",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ccp-fieldLabel",
+							children: text("plan")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ccp-planName",
+							children: account.planName !== "" ? account.planName : text("unavailable")
+						})]
+					}),
+					monthly !== void 0 && monthly.remaining !== "—" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ccp-planRow",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ccp-fieldLabel",
+							children: text("remaining")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ccp-planName",
+							children: monthly.remaining
+						})]
+					}) : null,
+					account.windows.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ccp-windows",
+						children: account.windows.map((window) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaBar, {
+							label: text(window.label),
+							value: window.value,
+							percent: window.capped ? `${window.percent}%` : text("windowUnlimited"),
+							barPercent: window.barPercent,
+							warn: window.exceeded ? text("exceeded") : "",
+							resetsAt: window.resetsAt,
+							resetsLabel: text("resets")
+						}, window.label))
+					}) : null,
+					monthly !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ccp-block",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+							className: "ccp-blockTitle",
+							children: text("credits")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ccp-tiles",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
+									label: text("monthlyLimit"),
+									value: monthly.limit
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
+									label: text("monthlyUsed"),
+									value: monthly.used
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
+									label: text("remaining"),
+									value: monthly.remaining
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
+									label: text("purchased"),
+									value: monthly.purchased
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
+									label: text("free"),
+									value: monthly.free
+								})
+							]
+						})]
+					}) : null,
+					account.stats.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ccp-block",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+							className: "ccp-blockTitle",
+							children: text("usage")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "ccp-tiles",
+							children: account.stats.map((stat) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatTile, {
+								stat,
+								label: text(stat.label)
+							}, stat.label))
+						})]
+					}) : null
+				]
+			});
+		}
+		/**
+		* The center-column dashboard, registered into the layout's keyed `main` slot
+		* under the same id the footer card selects, so the two are one navigation
+		* entry: the card shows the plan, the monthly bar and the quota window; the
+		* panel shows everything, including the per-account breakdown.
+		*/
+		function CommandCodePanel(props) {
+			const view = usePanelView(props);
+			const text = (key) => view.text[key] ?? key;
+			const [selectedId, setSelectedId] = (0, react.useState)(void 0);
+			const startAutoRefresh = props.startAutoRefresh;
+			(0, react.useEffect)(() => startAutoRefresh(), [startAutoRefresh]);
+			const accounts = view.accounts;
+			const selected = accounts.find((account) => account.id === selectedId) ?? view.selected ?? accounts[0];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "ccp-main",
+				role: "region",
+				"aria-label": text("nav"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ccp-mainInner",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+							className: "ccp-header",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "ccp-headerText",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+										className: "ccp-title",
+										children: text("nav")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "ccp-subtitle",
+										children: text("subtitle")
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "ccp-spacer" }),
+								view.updatedAt !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "ccp-meta",
+									children: [
+										text("updated"),
+										" ",
+										view.updatedAt
+									]
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+									variant: "ghost",
+									size: "sm",
+									disabled: view.loading,
+									onClick: () => props.refresh(),
+									children: view.loading ? text("refreshing") : text("refresh")
+								})
+							]
+						}),
+						view.noKey ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ccp-notice",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "ccp-noticeTitle",
+								children: text("noKey")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "ccp-noticeHint",
+								children: text("noKeyHint")
+							})]
+						}) : null,
+						view.failure !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ccp-notice ccp-noticeError",
+							role: "alert",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "ccp-noticeTitle",
+									children: text(view.failure.title)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "ccp-noticeHint",
+									children: text(view.failure.hint)
+								}),
+								view.failure.detail !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "ccp-noticeDetail",
+									children: view.failure.detail
+								}) : null
+							]
+						}) : null,
+						!view.noKey && view.failure === void 0 && accounts.length === 0 && view.loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "ccp-hint",
+							children: text("loading")
+						}) : null,
+						view.staleError !== void 0 && view.staleError !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "ccp-hint",
+							role: "status",
+							children: [
+								text("errorGeneric"),
+								" — ",
+								view.staleError
+							]
+						}) : null,
+						accounts.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "ccp-tabs",
+							role: "tablist",
+							"aria-label": text("nav"),
+							children: accounts.map((account) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								role: "tab",
+								"aria-selected": selected?.id === account.id,
+								className: selected?.id === account.id ? "ccp-tab ccp-tabActive" : "ccp-tab",
+								onClick: () => setSelectedId(account.id),
+								children: account.label
+							}, account.id))
+						}) : null,
+						selected !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountCard, {
+							account: selected,
+							view
+						}) : null,
+						view.partial !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "ccp-hint",
+							children: text(view.partial)
+						}) : null
+					]
+				})
+			});
+		}
+		/**
+		* The sidebar footer card, registered into `sidebar.footer.action` — the list
+		* the shell renders in the sidebar's foot area directly ABOVE the Settings
+		* seat, so the panel reads as a bottom-pinned sibling of Settings rather than
+		* a global panel icon at the top of the column.
+		*
+		* The shell wraps nothing here, so this component owns the surface: the
+		* button, its chrome and its accessible name. In the expanded column it draws
+		* the title row, then one block per quota window (5-hour, then weekly) — the
+		* window's own spend and limit (`$1.32 / $6.00`), its percentage and its bar —
+		* and nothing else: the card's figures are the two windows the account runs
+		* into, so the period total stays in the tooltip rather than taking a third
+		* line. In the 56px rail it collapses to a 36px icon button carrying the ring,
+		* matching the shell's own rail geometry. `wide` comes from the shell as an
+		* owner prop — unlike the old `sidebar.panellist` row, this slot really does
+		* supply it.
+		*/
+		function CommandCodeFooterEntry(props) {
+			const view = usePanelView(props);
+			const startAutoRefresh = props.startAutoRefresh;
+			(0, react.useEffect)(() => startAutoRefresh(), [startAutoRefresh]);
+			const text = (key) => view.text[key] ?? key;
+			const headline = view.footerBars[0];
+			const title = view.footTitle;
+			if (!props.wide) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "ccp-railButton",
+				"aria-label": title,
+				title,
+				onClick: () => props.open(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Ring, {
+					percent: headline?.barPercent ?? 0,
+					warn: headline?.warn ?? false,
+					size: 18
+				})
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: "ccp-foot",
+				"aria-label": title,
+				title,
+				onClick: () => props.open(),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "ccp-footTop",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Ring, {
+							percent: headline?.barPercent ?? 0,
+							warn: headline?.warn ?? false,
+							size: 16
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ccp-footName",
+							children: text("nav")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "ccp-spacer" }),
+						view.status !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ccp-badgeMuted",
+							children: view.status
+						}) : view.planName !== text("nav") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ccp-badge",
+							children: view.planName
+						}) : null
+					]
+				}), view.footerBars.map((bar) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "ccp-footRow",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "ccp-footHead",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ccp-footLabel",
+								children: text(bar.label)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "ccp-spacer" }),
+							bar.detail !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ccp-footAmount",
+								children: bar.detail
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ccp-footPct",
+								children: bar.percent
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ccp-footBar",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: bar.warn ? "ccp-footFill ccp-footFillWarn" : "ccp-footFill",
+							style: { width: `${bar.barPercent}%` }
+						})
+					})]
+				}, bar.label))]
+			});
+		}
+		//#endregion
+		//#region src/cost-facts.ts
+		const zeroCostTokens = () => ({
+			uncachedInputTokens: 0,
+			outputTokens: 0,
+			cacheReadTokens: 0,
+			cacheWriteTokens: 0
+		});
+		const COST_TOKEN_KEYS = [
+			"uncachedInputTokens",
+			"outputTokens",
+			"cacheReadTokens",
+			"cacheWriteTokens"
+		];
+		function peakHour(at, windows) {
+			const time = new Date(at);
+			return time.getUTCDay() !== 0 && time.getUTCDay() !== 6 && windows.some(([start, end]) => time.getUTCHours() >= start && time.getUTCHours() < end);
+		}
+		/**
+		* All prompt billing buckets determine a request's band, never cumulative session input.
+		*
+		* A tiered model returns the matching band and does NOT then apply `peak`: the
+		* page publishes those two dimensions independently, no row carries both today,
+		* and the generator would report a tiered row on every sync — so the combination
+		* becoming real is visible before it reaches a user. This ordering is a latent
+		* choice, not a verified upstream rule.
+		*/
+		function requestRates(price, at, contextTokens, table) {
+			const tier = price.contextTiers?.find((tier) => tier.maxContext === void 0 || contextTokens <= tier.maxContext);
+			if (tier !== void 0) return tier;
+			return price.peak !== void 0 && at !== null && peakHour(at, table.peakHours) ? price.peak : price;
+		}
+		/** Cache version and wire guard: changing bands/rates must refold historical groups. */
+		function pricingKey(table) {
+			const rates = (r) => [
+				r.inputCost,
+				r.outputCost,
+				r.cacheReadCost,
+				r.cacheWriteCost ?? null
+			];
+			const canonical = JSON.stringify([
+				"commandCodeCost-v1",
+				table.peakHours,
+				table.models.map((p) => [
+					p.id,
+					p.slug,
+					p.free === true,
+					rates(p),
+					p.peak ? rates(p.peak) : null,
+					p.contextTiers?.map((t) => [t.maxContext ?? null, rates(t)]) ?? null
+				])
+			]);
+			let hash = 2166136261;
+			for (const c of canonical) hash = Math.imul(hash ^ c.charCodeAt(0), 16777619) >>> 0;
+			return hash;
+		}
+		//#endregion
+		//#region src/client/session-cost.ts
+		/**
+		* Session-cost view model for the composer readout.
+		*
+		* Deliberately JSX-free and React-free, mirroring `./panel.ts`: it turns the
+		* session's token accounting plus the Host's price table into one presentation
+		* value AND the exact text the two surfaces of the harness's token-usage UI
+		* receive — the amount appended to the shipped pill, and the rows appended to
+		* the shipped usage dialog. Node tests therefore drive the whole calculation,
+		* and every user-visible string, without a DOM.
+		*
+		* The figures it prices are the session's DURABLE cumulative buckets, which is
+		* what the composer's own "N tokens" pill reads too (`tokenUsage`), so the two
+		* surfaces can never disagree about how much was used. Dollars are computed
+		* here because Command Code publishes per-token rates and bills against
+		* dollar-denominated windows; the account's own reported `totalCost` is a
+		* billing PERIOD figure, not this session's.
+		*
+		* Three rules are load-bearing:
+		*
+		* 1. **Only Command Code usage is priced.** A session served by another
+		*    provider must render nothing, never a Command Code estimate.
+		* 2. **A missing rate is never invented.** The pricing page publishes
+		*    input/output/cache-read rates for every model but a cache-WRITE rate for
+		*    only some, so unpriced cache-write tokens are surfaced as such rather than
+		*    charged at a guessed multiple of the input rate.
+		* 3. **Unpriceable means invisible.** No usage, no model, no table, an unknown
+		*    model, or all-zero buckets renders nothing at all — a confident `$0.00`
+		*    would be a lie, and this module never returns one.
+		*
+		* @module dsh-commandcode-provider/client/session-cost
+		*/
+		/** Tokens per published rate unit — the pricing page quotes USD per million. */
+		const TOKENS_PER_RATE_UNIT = 1e6;
+		/** The provider route whose usage this surface prices. */
+		const COMMANDCODE_PROVIDER = "commandcode";
+		/**
+		* The English copy for this surface.
+		*
+		* A plain constant, NOT the `settings.commandcode` locale namespace: like the
+		* plans & quota panel, the readout stays English on a Chinese harness. Do not
+		* route it through `ctx.locale`.
+		*/
+		const SESSION_COST_COPY = {
+			/** Shown instead of an amount when the model costs nothing on every plan. */
+			free: "Free",
+			/**
+			* The separator the readout prefixes itself with, so the cost reads as the
+			* last item of the token-usage pill's text run rather than a control beside
+			* it. Rendered with the same colour and margins the shipped pill uses
+			* between its own items.
+			*/
+			separator: "·",
+			/** The heading the tooltip leads with. */
+			panelTitle: "Session cost",
+			/** Marks an estimate from published rates rather than an invoice. */
+			approximate: "≈",
+			/** Tooltip line for the unpriced cache-write tokens. */
+			unpricedCacheWrite: "cache write tokens have no published rate",
+			/** Tooltip line naming the rate half in force. */
+			peakRates: "peak rates",
+			/** Tooltip line naming the rate half in force. */
+			offPeakRates: "off-peak rates",
+			/** Tooltip line explaining the approximate marker. */
+			approximateNote: "estimate from published rates, not the provider invoice",
+			/** Row/tooltip label for uncached prompt tokens. */
+			uncachedInput: "uncached input",
+			/** Row/tooltip label for completion tokens. */
+			output: "output",
+			/** Row/tooltip label for cache-served input tokens. */
+			cacheRead: "cache read",
+			/** Row/tooltip label for cache-written input tokens. */
+			cacheWrite: "cache write"
+		};
+		/** A finite, non-negative count — anything else reads as absent. */
+		function count(value) {
+			return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 0;
+		}
+		/**
+		* Index a price table for lookup. Rows are keyed by catalog id and by pricing
+		* slug, both exact and lowercased, because a session reports a catalog id while
+		* a row no catalog model claims is served under the page's slug.
+		*/
+		function indexTable(table) {
+			const index = /* @__PURE__ */ new Map();
+			for (const price of table.models) for (const key of [price.id, price.slug]) {
+				if (typeof key !== "string" || key === "") continue;
+				if (!index.has(key)) index.set(key, price);
+				const lower = key.toLowerCase();
+				if (!index.has(lower)) index.set(lower, price);
+			}
+			return index;
+		}
+		function costOf(usage, rates, free) {
+			if (free) return {
+				uncachedInput: 0,
+				cacheRead: 0,
+				cacheWrite: 0,
+				output: 0,
+				total: 0,
+				unpricedCacheWriteTokens: 0
+			};
+			const perUnit = (tokens, rate) => tokens * rate / TOKENS_PER_RATE_UNIT;
+			const uncachedInput = perUnit(count(usage.uncachedInputTokens), rates.inputCost);
+			const output = perUnit(count(usage.outputTokens), rates.outputCost);
+			const cacheRead = perUnit(count(usage.cacheReadTokens), rates.cacheReadCost);
+			const cacheWriteTokens = count(usage.cacheWriteTokens);
+			const cacheWrite = rates.cacheWriteCost === void 0 ? void 0 : perUnit(cacheWriteTokens, rates.cacheWriteCost);
+			return {
+				uncachedInput,
+				cacheRead,
+				cacheWrite,
+				output,
+				total: uncachedInput + output + cacheRead + (cacheWrite ?? 0),
+				unpricedCacheWriteTokens: rates.cacheWriteCost === void 0 ? cacheWriteTokens : 0
+			};
+		}
+		/**
+		* Amount text for a session cost.
+		*
+		* The panel's `money()` convention (2 decimals, 4 below a cent) is right for
+		* billing windows, but a live session total starts far below a cent, where
+		* `toFixed(4)` would print a flat `$0.0000` — which reads as broken rather than
+		* as small. So a total under $0.0001 is stated as a bound instead.
+		*/
+		function sessionCostAmount(total) {
+			if (!Number.isFinite(total) || total <= 0) return formatMoney(0);
+			if (total < 1e-4) return `<$0.0001`;
+			return total < .01 ? formatMoneyExact(total) : formatMoney(total);
+		}
+		/** One `label value` clause of the tooltip. */
+		function clause(label, tokens) {
+			return tokens > 0 ? `${label} ${formatTokensCompact(tokens)}` : void 0;
+		}
+		/**
+		* Build the composer readout, or undefined when there is nothing honest to show.
+		*
+		* Undefined is the correct answer for a session with no usage yet, a session
+		* another provider served, a model the price table does not know, and a table
+		* that has not landed — the pill simply is not there.
+		*/
+		function buildSessionCostView(input) {
+			const { usage, table, facts } = input;
+			if (!usage || !table || !facts || facts.pricingKey !== pricingKey(table)) return void 0;
+			const totals = zeroCostTokens();
+			const index = indexTable(table);
+			const breakdown = {
+				uncachedInput: 0,
+				cacheRead: 0,
+				cacheWrite: 0,
+				output: 0,
+				total: 0,
+				unpricedCacheWriteTokens: 0
+			};
+			let free = true;
+			let peak = false;
+			let partial = false;
+			let priced = false;
+			const notes = [];
+			for (const group of facts.groups) {
+				for (const key of COST_TOKEN_KEYS) totals[key] += group.tokens[key];
+				if (group.provider !== COMMANDCODE_PROVIDER) {
+					partial = true;
+					continue;
+				}
+				const price = index.get(group.model);
+				if (!price) {
+					partial = true;
+					continue;
+				}
+				const isFree = price.free === true;
+				free &&= isFree;
+				if (price.peak && group.at === null) {
+					partial = true;
+					notes.push("request time unavailable; off-peak lower bound");
+				}
+				const rates = requestRates(price, group.at, group.contextTokens, table);
+				const part = costOf(group.tokens, rates, isFree);
+				priced ||= isFree || part.total > 0;
+				for (const key of [
+					"uncachedInput",
+					"cacheRead",
+					"output",
+					"total",
+					"unpricedCacheWriteTokens"
+				]) breakdown[key] += part[key];
+				breakdown.cacheWrite = (breakdown.cacheWrite ?? 0) + (part.cacheWrite ?? 0);
+				if (price.peak) {
+					const isPeak = group.at !== null && peakHour(group.at, table.peakHours);
+					peak ||= isPeak;
+					notes.push(isPeak ? SESSION_COST_COPY.peakRates : SESSION_COST_COPY.offPeakRates);
+				}
+			}
+			if (COST_TOKEN_KEYS.some((key) => totals[key] !== count(usage[key])) || !priced) return void 0;
+			const { total, unpricedCacheWriteTokens } = breakdown;
+			partial ||= unpricedCacheWriteTokens > 0;
+			free &&= !partial;
+			if (partial) notes.push("Command Code priced subtotal only; unpriced or other-provider usage excluded");
+			notes.push(SESSION_COST_COPY.approximateNote);
+			const uncachedInput = totals.uncachedInputTokens;
+			const output = totals.outputTokens;
+			const cacheRead = totals.cacheReadTokens;
+			const cacheWrite = totals.cacheWriteTokens;
+			if (uncachedInput === 0 && output === 0 && cacheRead === 0 && cacheWrite === 0) return void 0;
+			if (!free && total <= 0) return void 0;
+			const value = free ? SESSION_COST_COPY.free : `${partial ? "≥" : SESSION_COST_COPY.approximate}${sessionCostAmount(total)}`;
+			const money = (amount) => amount === void 0 ? void 0 : sessionCostAmount(amount);
+			const rows = [
+				{
+					key: "uncachedInput",
+					label: SESSION_COST_COPY.uncachedInput,
+					tokens: uncachedInput,
+					costText: money(breakdown.uncachedInput)
+				},
+				{
+					key: "cacheRead",
+					label: SESSION_COST_COPY.cacheRead,
+					tokens: cacheRead,
+					costText: money(breakdown.cacheRead)
+				},
+				{
+					key: "cacheWrite",
+					label: SESSION_COST_COPY.cacheWrite,
+					tokens: cacheWrite,
+					costText: unpricedCacheWriteTokens === cacheWrite && cacheWrite > 0 ? void 0 : money(breakdown.cacheWrite)
+				},
+				{
+					key: "output",
+					label: SESSION_COST_COPY.output,
+					tokens: output,
+					costText: money(breakdown.output)
+				}
+			];
+			if (unpricedCacheWriteTokens > 0) notes.push(SESSION_COST_COPY.unpricedCacheWrite);
+			return {
+				total,
+				value,
+				title: [
+					`${SESSION_COST_COPY.panelTitle} ${free ? SESSION_COST_COPY.free : sessionCostAmount(total)}`,
+					clause(SESSION_COST_COPY.uncachedInput, uncachedInput),
+					clause(SESSION_COST_COPY.output, output),
+					clause(SESSION_COST_COPY.cacheRead, cacheRead),
+					clause(SESSION_COST_COPY.cacheWrite, cacheWrite),
+					...notes
+				].filter((part) => part !== void 0).join(" · "),
+				rows,
+				notes: [...new Set(notes)],
+				free,
+				peak,
+				unpricedCacheWriteTokens,
+				approximate: !free
+			};
+		}
+		/** Split the appended run into the two nodes the display creates. */
+		function sessionCostPillRun(view) {
+			return {
+				separator: SESSION_COST_COPY.separator,
+				value: view.value
+			};
+		}
+		/**
+		* Decorate the harness's usage dialog, row by row.
+		*
+		* The row sequence mirrors the shipped component's conditions exactly — the
+		* cache-hit row exists while there is billed prompt input, the cache-write row
+		* while those tokens are non-zero — because the display layer matches what it
+		* finds positionally. A shape it cannot confirm is a shape it does not touch.
+		*
+		* A free model decorates nothing: every row's cost is zero by definition, the
+		* pill already says `Free`, and a column of `$0.00` would be noise. A bucket
+		* whose rate the page does not publish is likewise left unfilled rather than
+		* filled with an invented number.
+		*/
+		function sessionCostRowDecorations(view) {
+			const bucket = (key) => view.rows.find((row) => row.key === key)?.tokens ?? 0;
+			const price = (key) => {
+				if (view.free) return void 0;
+				return view.rows.find((row) => row.key === key)?.costText;
+			};
+			const uncachedInput = bucket("uncachedInput");
+			const cacheRead = bucket("cacheRead");
+			const cacheWrite = bucket("cacheWrite");
+			const output = bucket("output");
+			const plan = [];
+			if (uncachedInput + cacheRead + cacheWrite > 0) plan.push({
+				row: "cacheHit",
+				tokens: void 0,
+				amount: void 0,
+				hidden: false
+			});
+			plan.push({
+				row: "uncachedInput",
+				tokens: uncachedInput,
+				amount: price("uncachedInput"),
+				hidden: false
+			});
+			plan.push({
+				row: "cacheRead",
+				tokens: cacheRead,
+				amount: price("cacheRead"),
+				hidden: false
+			});
+			if (cacheWrite !== 0) {
+				const amount = price("cacheWrite");
+				plan.push({
+					row: "cacheWrite",
+					tokens: cacheWrite,
+					amount,
+					hidden: amount === void 0
+				});
+			}
+			plan.push({
+				row: "output",
+				tokens: output,
+				amount: price("output"),
+				hidden: false
+			});
+			return plan;
+		}
+		//#endregion
+		//#region src/client/session-cost-display.ts
+		/** The shipped composer stats row (dsh-client-ui-chat `StatsPills`). */
+		const STATS_ROOT = "[data-composer-stats]";
+		/**
+		* The shipped token-usage dialog's `<dl>`. Unique in the whole of
+		* `dsh-client-ui-chat`: the per-message turn-usage panel has its own dialog with
+		* different markup, so the composer's is unambiguous.
+		*/
+		const USAGE_DIALOG = "[data-session-stats-usage]";
+		/**
+		* The usage dialog's trigger. Both pills announce a dialog, but the token one is
+		* rendered LAST — and when no step carries timing the time pill is not a button
+		* at all, so "last" still selects the token pill in both cases.
+		*/
+		const DIALOG_TRIGGER = "button[aria-haspopup=\"dialog\"]";
+		/**
+		* Stable id for the hidden node the appended cost is described by. The pill's
+		* own `aria-label` is computed by the harness on every render and cannot be
+		* extended, so a description is how the cost reaches assistive technology.
+		*/
+		const A11Y_ID = "dsh-commandcode-session-cost";
+		/** How many consecutive misses before the missing anchor is worth a console line. */
+		const MISSES_BEFORE_WARNING = 3;
+		/**
+		* The default observer: `childList` on `body`, and deliberately NOT `subtree`, so
+		* streaming text inside the page never wakes it while the panel the harness
+		* portals straight onto `body` does.
+		*/
+		const observeBodyChildren = (target, listener) => {
+			if (typeof MutationObserver === "undefined") return void 0;
+			const observer = new MutationObserver(listener);
+			observer.observe(target, { childList: true });
+			return () => observer.disconnect();
+		};
+		/**
+		* Owns the nodes injected into the shipped token-usage UI.
+		*
+		* One instance per mounted entry. `sync()` is cheap and idempotent: it re-reads
+		* both targets on every call, which is what lets it self-heal when React
+		* remounts the row or replaces the dialog, and it rewrites a node only when its
+		* text actually changed.
+		*/
+		var SessionCostDisplay = class {
+			doc;
+			scope;
+			observe;
+			view = void 0;
+			/** Detaches the observer installed by `start()`. */
+			detach = void 0;
+			/** The button we appended into, while it is still connected. */
+			pillHost = void 0;
+			/** Our appended root, and the two nodes whose text changes. */
+			pillRoot = void 0;
+			pillValue = void 0;
+			pillA11y = void 0;
+			/** Whether WE set `aria-describedby` on the button (so only we take it back). */
+			described = false;
+			/** The dialog we decorated, the price nodes we own, and the cells we hid. */
+			dialogHost = void 0;
+			dialogPrices = /* @__PURE__ */ new Map();
+			dialogHidden = /* @__PURE__ */ new Set();
+			pillMisses = 0;
+			constructor(options) {
+				this.doc = options.doc;
+				this.scope = options.scope;
+				this.observe = options.observe ?? observeBodyChildren;
+			}
+			/** Begin watching for the shipped usage dialog opening and closing. */
+			start() {
+				if (this.detach !== void 0) return;
+				const body = this.doc.body;
+				if (body === null || body === void 0) return;
+				this.detach = this.observe(body, () => this.apply());
+			}
+			/**
+			* Hand the display the current figure.
+			*
+			* Undefined — nothing priceable about this session — removes everything this
+			* module injected, leaving both shipped surfaces exactly as they ship.
+			*/
+			sync(view) {
+				this.view = view;
+				this.apply();
+			}
+			/** Remove every injected node and stop observing. Safe to call twice. */
+			dispose() {
+				this.detach?.();
+				this.detach = void 0;
+				this.removePill();
+				this.clearDialog();
+				this.view = void 0;
+			}
+			/** Re-apply the last known view to whatever both targets are right now. */
+			apply() {
+				this.applyPill();
+				this.applyDialog();
+			}
+			applyPill() {
+				const view = this.view;
+				if (view === void 0) {
+					this.removePill();
+					return;
+				}
+				if (this.pillHost?.isConnected !== true) {
+					const button = this.resolvePillButton();
+					if (button === null) {
+						this.pillMisses += 1;
+						if (this.pillMisses === MISSES_BEFORE_WARNING) console.warn(`[dsh-commandcode-provider] no ${STATS_ROOT} row to append the session cost to; the figure stays in the usage dialog only`);
+						return;
+					}
+					this.pillMisses = 0;
+					this.removePill();
+					this.buildPill(button, sessionCostPillRun(view));
+				}
+				if (this.pillValue !== void 0) {
+					const amount = sessionCostPillRun(view).value;
+					if (this.pillValue.textContent !== amount) this.pillValue.textContent = amount;
+				}
+				if (this.pillRoot !== void 0) {
+					if (this.pillRoot.title !== view.title) this.pillRoot.title = view.title;
+					const approximate = view.approximate ? "true" : null;
+					if (this.pillRoot.getAttribute("data-approximate") !== approximate) {
+						if (approximate === null) this.pillRoot.removeAttribute("data-approximate");
+						else this.pillRoot.setAttribute("data-approximate", approximate);
+					}
+				}
+				if (this.pillA11y !== void 0) {
+					const described = `${SESSION_COST_COPY.panelTitle} ${view.value}`;
+					if (this.pillA11y.textContent !== described) this.pillA11y.textContent = described;
+				}
+			}
+			/** The shipped token pill, scoped to this entry's own composer. */
+			resolvePillButton() {
+				const root = (this.scope() ?? this.doc).querySelector(STATS_ROOT);
+				if (root === null) return null;
+				const triggers = root.querySelectorAll(DIALOG_TRIGGER);
+				return triggers.length === 0 ? null : triggers[triggers.length - 1] ?? null;
+			}
+			/**
+			* Create and append the cost run. The button's child list is static
+			* (`[svg, label]`), so appending once is enough for it to stay last.
+			*/
+			buildPill(button, run) {
+				const doc = this.doc;
+				const root = doc.createElement("span");
+				root.setAttribute("data-composer-session-cost", "");
+				const separator = doc.createElement("span");
+				separator.textContent = run.separator;
+				separator.setAttribute("aria-hidden", "true");
+				separator.style.color = "var(--dsw-alias-separator-primary)";
+				separator.style.margin = "0 6px 0 0";
+				const value = doc.createElement("span");
+				value.textContent = run.value;
+				value.style.fontWeight = "500";
+				const a11y = doc.createElement("span");
+				a11y.id = A11Y_ID;
+				a11y.style.display = "none";
+				root.appendChild(separator);
+				root.appendChild(value);
+				root.appendChild(a11y);
+				button.appendChild(root);
+				if (!button.hasAttribute("aria-describedby")) {
+					button.setAttribute("aria-describedby", A11Y_ID);
+					this.described = true;
+				}
+				this.pillHost = button;
+				this.pillRoot = root;
+				this.pillValue = value;
+				this.pillA11y = a11y;
+			}
+			removePill() {
+				if (this.pillRoot !== void 0 && this.pillRoot.parentNode !== null) this.pillRoot.parentNode.removeChild(this.pillRoot);
+				if (this.described) {
+					this.pillHost?.removeAttribute("aria-describedby");
+					this.described = false;
+				}
+				this.pillHost = void 0;
+				this.pillRoot = void 0;
+				this.pillValue = void 0;
+				this.pillA11y = void 0;
+			}
+			applyDialog() {
+				const view = this.view;
+				const host = view === void 0 ? null : this.resolveDialog();
+				if (host === null || view === void 0) {
+					this.clearDialog();
+					return;
+				}
+				this.pruneDialog(host);
+				const plan = sessionCostRowDecorations(view);
+				const pairs = dialogPairs(host);
+				if (!dialogShapeMatches(pairs, plan, this.dialogPrices)) {
+					this.clearDialog();
+					return;
+				}
+				const hidden = /* @__PURE__ */ new Set();
+				for (const [index, row] of plan.entries()) {
+					const pair = pairs[index];
+					if (pair === void 0) continue;
+					const span = this.dialogPrices.get(pair.dd);
+					if (row.hidden) {
+						if (pair.dt.style.display !== "none") pair.dt.style.display = "none";
+						if (pair.dd.style.display !== "none") pair.dd.style.display = "none";
+						hidden.add(pair.dt);
+						hidden.add(pair.dd);
+						this.removeDialogPrice(pair.dd, span);
+						continue;
+					}
+					if (pair.dt.style.display === "none") pair.dt.style.display = "";
+					if (pair.dd.style.display === "none") pair.dd.style.display = "";
+					if (row.amount === void 0) {
+						this.removeDialogPrice(pair.dd, span);
+						continue;
+					}
+					const price = span ?? this.createDialogPrice(pair.dd, row.row);
+					if (price.parentNode !== pair.dd) pair.dd.appendChild(price);
+					if (price.textContent !== row.amount) price.textContent = row.amount;
+				}
+				for (const cell of [...this.dialogHidden]) {
+					if (hidden.has(cell)) continue;
+					if (cell.style.display === "none") cell.style.display = "";
+					this.dialogHidden.delete(cell);
+				}
+				for (const cell of hidden) this.dialogHidden.add(cell);
+				this.dialogHost = host;
+			}
+			/** Forget the cells and prices a re-rendered dialog took with it. */
+			pruneDialog(host) {
+				for (const [dd, price] of [...this.dialogPrices]) {
+					if (dd.parentNode === host) continue;
+					if (price.parentNode !== null) price.parentNode.removeChild(price);
+					this.dialogPrices.delete(dd);
+				}
+				for (const cell of [...this.dialogHidden]) {
+					if (cell.parentNode === host) continue;
+					if (cell.style.display === "none") cell.style.display = "";
+					this.dialogHidden.delete(cell);
+				}
+			}
+			/** The price node for one shipped value cell, appended as its last child. */
+			createDialogPrice(dd, row) {
+				const price = this.doc.createElement("span");
+				price.setAttribute("data-session-cost-price", row);
+				price.style.marginLeft = "6px";
+				price.style.display = "inline-block";
+				price.style.minWidth = "56px";
+				price.style.textAlign = "right";
+				price.style.fontWeight = "500";
+				dd.appendChild(price);
+				this.dialogPrices.set(dd, price);
+				return price;
+			}
+			removeDialogPrice(dd, price) {
+				if (price === void 0) return;
+				if (price.parentNode !== null) price.parentNode.removeChild(price);
+				this.dialogPrices.delete(dd);
+			}
+			/**
+			* The shipped usage dialog, or null while it is closed.
+			*
+			* The dialog is portaled onto `body`, so unlike the pill it cannot be scoped
+			* from this entry; DSH renders one composer, and the attribute is unique in
+			* the chat client, so a document-level lookup is exact. Should a future build
+			* mount two composers at once, both dialogs would describe whichever session
+			* this entry belongs to — noted rather than defended against.
+			*/
+			resolveDialog() {
+				if (this.dialogHost?.isConnected === true) return this.dialogHost;
+				this.clearDialog();
+				return this.doc.querySelector(USAGE_DIALOG);
+			}
+			/** Give the dialog back: every price removed, every hidden row restored. */
+			clearDialog() {
+				for (const price of this.dialogPrices.values()) if (price.parentNode !== null) price.parentNode.removeChild(price);
+				this.dialogPrices.clear();
+				for (const cell of this.dialogHidden) if (cell.style.display === "none") cell.style.display = "";
+				this.dialogHidden.clear();
+				this.dialogHost = void 0;
+			}
+		};
+		/** The shipped dialog's `dt`/`dd` pairs, in document order. */
+		function dialogPairs(host) {
+			const pairs = [];
+			let label = null;
+			for (const node of Array.from(host.childNodes)) {
+				const tag = tagNameOf(node);
+				if (tag === "DT") label = node;
+				else if (tag === "DD" && label !== null) {
+					pairs.push({
+						dt: label,
+						dd: node
+					});
+					label = null;
+				}
+			}
+			return pairs;
+		}
+		/** `tagName` upper-cased, or an empty string for a non-element node. */
+		function tagNameOf(node) {
+			const tag = node.tagName;
+			return typeof tag === "string" ? tag.toUpperCase() : "";
+		}
+		/**
+		* Whether the dialog really holds the rows this session's buckets predict.
+		*
+		* The shipped labels belong to the `chat` locale — they are `Uncached input` in
+		* English and something else entirely in Chinese — so rows are matched by
+		* POSITION, and this is what makes that safe: the row count must agree, the
+		* cache-hit row must be the percentage it is, and every other value must carry
+		* exactly the token count of the bucket predicted for it. A mismatch means the
+		* dialog is not what this view describes, and nothing is decorated.
+		*/
+		function dialogShapeMatches(pairs, plan, prices) {
+			if (pairs.length !== plan.length) return false;
+			return plan.every((row, index) => {
+				const pair = pairs[index];
+				if (pair === void 0) return false;
+				const text = hostValueText(pair.dd, prices.get(pair.dd));
+				if (row.tokens === void 0) return text.includes("%");
+				return digitsOf(text) === String(row.tokens);
+			});
+		}
+		/**
+		* A value cell's own text, without the price this module appended to it — the
+		* digits of `3,206,544 tok` are the host's, the digits of `$0.07` are ours.
+		*/
+		function hostValueText(dd, price) {
+			let text = "";
+			for (const node of Array.from(dd.childNodes)) {
+				if (node === price) continue;
+				text += node.textContent ?? "";
+			}
+			return text;
+		}
+		/** Every digit of a display string, so locale grouping cannot break the match. */
+		function digitsOf(text) {
+			return text.replace(/\D/g, "");
+		}
+		//#endregion
+		//#region src/client/session-cost-view.tsx
+		/** The dock outlet this entry renders inside, i.e. what it can scope itself from. */
+		const DOCK_ANCHOR = "[data-slot=\"conversation.composer.dock\"]";
+		/** Module-level constant so the marker's `style` prop never diffs. */
+		const HIDDEN_STYLE = { display: "none" };
+		/** Log a missing seat once per page, so a silent no-op stays diagnosable. */
+		let warnedMissingSeat = false;
+		/**
+		* The composer's session-cost entry. Guards the two seats before rendering the
+		* mount: a dsh that does not supply the projection seat to dock occupants gets
+		* an absent cost and one console line, never a render crash — which the renderer
+		* would answer by abdicating the entry with no visible trace.
+		*/
+		function CommandCodeSessionCost(props) {
+			if (typeof props.useProjection !== "function" || typeof props.useCommandCodePrices !== "function") {
+				if (!warnedMissingSeat) {
+					warnedMissingSeat = true;
+					console.error("[dsh-commandcode-provider] the composer does not supply the projection/hook seats the session-cost readout needs; the readout stays hidden");
+				}
+				return null;
+			}
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SessionCostEntry, { ...props });
+		}
+		/** The mount: one injection lifetime, one hidden marker. Every hook lives here. */
+		function SessionCostEntry(props) {
+			const markerRef = (0, react.useRef)(null);
+			const displayRef = (0, react.useRef)(null);
+			const prices = props.useCommandCodePrices((state) => state);
+			const view = buildSessionCostView({
+				usage: props.useProjection("tokenUsage"),
+				selection: props.useProjection("modelSelection"),
+				facts: props.useProjection("commandCodeCost"),
+				table: prices.table,
+				now: Date.now()
+			});
+			(0, react.useEffect)(() => {
+				if (typeof document === "undefined") return;
+				const display = new SessionCostDisplay({
+					doc: document,
+					scope: () => markerRef.current?.closest(DOCK_ANCHOR)?.parentElement ?? null
+				});
+				displayRef.current = display;
+				display.start();
+				return () => {
+					displayRef.current = null;
+					display.dispose();
+				};
+			}, []);
+			(0, react.useEffect)(() => {
+				displayRef.current?.sync(view);
+			});
+			if (view === void 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				ref: markerRef,
+				style: HIDDEN_STYLE,
+				"data-ccp-session-cost-anchor": ""
+			});
+		}
+		//#endregion
+		//#region src/client/panel-styles.ts
+		/**
+		* Stylesheet for the Command Code plans & quota panel (the sidebar footer card
+		* and the dashboard it opens).
+		*
+		* Returned as a string rather than injected here so the modules stay free of
+		* DOM side effects at import time — the client entry installs it once, keyed
+		* by the same `data-plugin-css` attribute the settings-page stylesheet uses,
+		* and removes it again when the plugin's fiber unwinds.
+		*
+		* Every colour comes from a harness theme alias with a neutral fallback, so
+		* the panel follows the active theme (light/dark and any brand pack) without
+		* hardcoded values. Classes are `ccp-` prefixed to stay clear of the settings
+		* page's `cc-` set.
+		*
+		* @module dsh-commandcode-provider/client/panel-styles
+		*/
+		/**
+		* Stylesheet id (the `data-plugin-css` value that makes injection idempotent).
+		*
+		* The package prefix must match the one the settings-page stylesheet uses
+		* (`injectPageCss` in `./index.ts`) and this package's real name: an id is the
+		* injection's identity, so a stale fork prefix would let a second copy of the
+		* plugin inject the same rules twice and would misreport the owner in the DOM.
+		*/
+		const PANEL_CSS_ID = "@mars-sea/dsh-commandcode-provider/CommandCodePanel.module.css";
+		/** The panel stylesheet. */
+		const PANEL_CSS = `
+/* ------------------------------------------------- sidebar footer card */
+/* The shell's foot area renders this list ABOVE the Settings seat, so the card
+   is the sidebar's bottom-most content. The shell supplies no chrome: the entry
+   is the button. It is deliberately quiet — a surface that sits beside Settings
+   should read as part of the column, not as a call to action — with one hover
+   step and a hairline border.
+
+   The shell's container is a flex ROW whose occupants (this card and ui-cordis's
+   footer chip) each declare a full-width line and shrink-proof flex, so as a row
+   it would overflow the column. Both were written for a full-width line, which
+   is exactly what a column gives them. Matched by the CSS-module class STEM —
+   never a hashed name — so a dsh that renames it degrades to the shell's own
+   row rather than breaking. */
+[class*="_footerActions"]{flex-direction:column}
+.ccp-foot{box-sizing:border-box;flex:0 0 auto;width:100%;min-width:0;font:inherit;color:var(--dsw-alias-label-secondary);text-align:left;cursor:pointer;background:0 0;border:1px solid transparent;border-radius:10px;flex-direction:column;gap:6px;margin:0 0 4px;padding:8px;display:flex}
+.ccp-foot:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover);border-color:var(--dsw-alias-border-l2)}
+.ccp-foot:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.ccp-footTop{align-items:center;gap:8px;min-width:0;display:flex}
+.ccp-footName{white-space:nowrap;text-overflow:ellipsis;color:var(--dsw-alias-label-primary);min-width:0;overflow:hidden;font-size:13px;font-weight:500;line-height:20px}
+/* One block per quota window: a head line carrying the window's own spend and
+   limit, then the FULL-WIDTH bar under it. Stacking the two lets the card show
+   the dollar figures — the reason this surface exists — without squeezing the
+   bar into what is left beside them. Mirrors the dashboard's own window block. */
+.ccp-footRow{flex-direction:column;gap:4px;min-width:0;display:flex}
+.ccp-footHead{align-items:baseline;gap:8px;min-width:0;display:flex}
+.ccp-footLabel{flex:1;color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}
+.ccp-footAmount{flex:none;color:var(--dsw-alias-label-secondary);font-size:11px;line-height:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
+/* The card's markup must stay PHRASING content — it renders inside the shell's
+   own button — so these bars are spans, not divs. That makes display:block
+   load-bearing on BOTH: an inline box ignores width and height outright, so
+   without it the 5px track still painted (a flex item is blockified by its
+   container) while the fill collapsed to 0x0 and the bar showed no usage. */
+.ccp-footBar{display:block;background:var(--dsw-alias-bg-layer-2);border-radius:999px;height:5px;overflow:hidden}
+.ccp-footFill{display:block;background:var(--dsw-alias-brand-primary);border-radius:999px;height:100%;transition:width .3s ease}
+.ccp-footFillWarn{background:var(--dsw-alias-state-error-primary)}
+.ccp-footPct{flex:none;width:34px;color:var(--dsw-alias-label-secondary);text-align:right;font-size:11px;line-height:16px;font-variant-numeric:tabular-nums}
+
+/* The 56px rail: one icon button on the shell's own rail geometry (36px cell),
+   so the collapsed column keeps a single 18px glyph like its siblings. */
+.ccp-railButton{box-sizing:border-box;width:36px;height:36px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:1px solid transparent;border-radius:8px;flex:none;justify-content:center;align-items:center;margin:0 0 4px;padding:0;display:inline-flex}
+.ccp-railButton:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}
+.ccp-railButton:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+
+/* The ring glyph. Sized entirely by its own width/height attribute, so the
+   footer row, the rail button and the dashboard can each ask for their own. */
+.ccp-glyph{flex:none;justify-content:center;align-items:center;display:inline-flex;color:var(--dsw-alias-brand-primary)}
+
+/* ------------------------------------------------------------ dashboard */
+/* The center column in the layout frame: fill it, scroll the content column,
+   and cap the reading width like the harness's own panels. */
+.ccp-main{background:var(--dsw-alias-bg-layer-1);width:100%;height:100%;overflow:auto;display:block}
+.ccp-mainInner{max-width:760px;margin:0 auto;padding:24px 20px 40px;flex-direction:column;gap:14px;display:flex;color:var(--dsw-alias-label-primary)}
+.ccp-header{align-items:center;gap:10px;display:flex;flex-wrap:wrap}
+.ccp-headerText{flex-direction:column;gap:2px;display:flex;min-width:0}
+.ccp-title{margin:0;font-size:18px;font-weight:600;line-height:1.4}
+.ccp-subtitle{margin:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}
+.ccp-spacer{flex:1}
+.ccp-meta{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums}
+.ccp-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
+
+/* Notices: the no-key guidance, a blocked report, and a stale-data error. */
+.ccp-notice{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:12px 14px;flex-direction:column;gap:4px;display:flex}
+.ccp-noticeError{border-color:var(--dsw-alias-state-error-primary)}
+.ccp-noticeTitle{margin:0;font-size:13px;font-weight:600;line-height:1.5}
+.ccp-noticeError .ccp-noticeTitle{color:var(--dsw-alias-state-error-primary)}
+.ccp-noticeHint{margin:0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.55}
+.ccp-noticeDetail{margin:0;color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5;word-break:break-word}
+
+.ccp-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:14px;padding:16px 18px;flex-direction:column;gap:16px;display:flex}
+.ccp-cardHead{align-items:center;gap:10px;display:flex;flex-wrap:wrap}
+.ccp-avatar{flex:none;width:28px;height:28px;color:var(--dsw-alias-brand-primary);background:var(--dsw-alias-bg-module-platform);border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:600;line-height:1;display:inline-flex}
+.ccp-cardIdentity{flex-direction:column;gap:1px;min-width:0;display:flex}
+.ccp-cardTitle{font-size:13px;font-weight:600;line-height:1.4}
+.ccp-cardOwner{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
+.ccp-block{flex-direction:column;gap:8px;display:flex}
+.ccp-blockTitle{margin:0;color:var(--dsw-alias-label-tertiary);font-size:11px;font-weight:600;line-height:1.5;text-transform:uppercase;letter-spacing:.04em}
+.ccp-planRow{align-items:center;gap:8px;display:flex;flex-wrap:wrap}
+.ccp-fieldLabel{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}
+.ccp-planName{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:600;line-height:1.5}
+
+/* Stat tiles: the monthly credits and the usage totals share one grid. */
+.ccp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
+.ccp-tile{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;min-width:0}
+.ccp-tileLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5}
+.ccp-tileValue{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums}
+.ccp-tileSub{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+/* Quota bars: the monthly bar and the two windows stack in one column, each a
+   label row plus the track. */
+.ccp-windows{flex-direction:column;gap:14px;display:flex}
+.ccp-window{flex-direction:column;gap:6px;display:flex}
+.ccp-windowHead{align-items:baseline;gap:8px;display:flex}
+.ccp-windowLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:500;line-height:1.5}
+.ccp-windowValue{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap}
+.ccp-windowPct{color:var(--dsw-alias-label-primary);min-width:38px;text-align:right;font-size:12px;font-weight:600;line-height:1.5;font-variant-numeric:tabular-nums}
+.ccp-warnTag{white-space:nowrap;background:var(--dsw-alias-state-warn-tertiary,var(--dsw-alias-bg-module-platform));color:var(--dsw-alias-state-warn-primary,var(--dsw-alias-label-secondary));border-radius:999px;padding:0 8px;font-size:11px;font-weight:600;line-height:17px}
+.ccp-bar{overflow:hidden;background:var(--dsw-alias-bg-layer-1);border-radius:999px;height:8px}
+.ccp-barFill{background:var(--dsw-alias-brand-primary);border-radius:999px;height:100%;transition:width .3s ease}
+.ccp-barFillWarn{background:var(--dsw-alias-state-error-primary)}
+.ccp-windowReset{color:var(--dsw-alias-label-tertiary);margin:0;font-size:11px;line-height:1.5}
+
+/* Badges. */
+.ccp-badge{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}
+.ccp-badgeError{background:transparent;color:var(--dsw-alias-state-error-primary)}
+.ccp-badgeWarn{background:var(--dsw-alias-state-warn-tertiary,var(--dsw-alias-bg-module-platform));color:var(--dsw-alias-state-warn-primary,var(--dsw-alias-label-secondary))}
+.ccp-badgeMuted{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;max-width:220px;overflow:hidden;text-overflow:ellipsis}
+
+/* Account switch: plain buttons, like the settings page's usage carousel. */
+.ccp-tabs{flex-wrap:wrap;gap:6px;display:flex}
+.ccp-tab{align-items:center;font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);border-radius:999px;padding:2px 10px;font-size:12px;line-height:18px;display:inline-flex;gap:6px}
+.ccp-tab:hover:not(.ccp-tabActive){color:var(--dsw-alias-label-primary)}
+.ccp-tabActive{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-brand-primary)}
+
+@media (prefers-reduced-motion:reduce){.ccp-footFill,.ccp-barFill{transition:none}}
+`;
+		//#endregion
+		//#region src/client/locales.ts
+		const zh = {
+			nav: "Command Code",
+			title: "Command Code",
+			intro: "配置 Command Code Provider 连接。API 密钥仅保存在本机凭据服务中，不会回显；其他字段写入用户设置，下次请求即生效。",
+			apiKey: "API 密钥",
+			apiKeyHint: "在 commandcode.ai 控制台创建。留空保存不会覆盖已存储的密钥。",
+			apiKeySet: "已配置",
+			apiKeyUnset: "未配置",
+			apiKeyLocked: "密钥由只读来源提供",
+			apiBase: "API 地址",
+			apiBaseHint: "默认 https://api.commandcode.ai，一般无需修改。",
+			workingDir: "工作目录",
+			workingDirHint: "可选。留空时使用占位符显示的进程工作目录；仅在需要固定路径时填写。",
+			requestTimeoutMs: "请求超时（毫秒）",
+			requestTimeoutMsHint: "等待响应首个字节的超时；默认 60000。",
+			streamIdleTimeoutMs: "流空闲超时（毫秒）",
+			streamIdleTimeoutMsHint: "生成流停滞多久视为断连；默认 300000（长思考模型可静默数分钟，默认值刻意放宽）。",
+			advancedSettings: "高级设置",
+			advancedSettingsHint: "API 地址、工作目录、超时与模型过滤等不常修改的选项。",
+			advancedOverriddenOne: "已自定义 1 项",
+			advancedOverriddenMany: "已自定义 {count} 项",
+			advancedInvalid: "高级设置中有未填好的数字，请展开修正后再保存。",
+			filterModelsByPlan: "隐藏套餐外模型",
+			filterModelsByPlanHint: "开启后，模型选择器只列出当前套餐可用的模型；账户持有按需余额时会显示全部。",
+			webSearch: "用 Command Code 承载联网搜索",
+			webSearchHint: "开启后，dsh 的 web_search 工具由 Command Code 承担（复用同一个 API key 与地址），并优先于其他搜索后端；关闭则把选择权交还给之前的后端（如 modsearch），而不是强制回退到 DeepSeek 搜索。",
+			accountsTitle: "多账户轮换",
+			accountsHint: "当前账户达到用量限额（429）或密钥失效（401）时，请求自动切换到下一个账户；全部耗尽时会提示最早的重置时间。",
+			accountAdd: "添加账户",
+			accountRemove: "移除",
+			accountLabel: "账户备注名",
+			accountKey: "API 密钥",
+			accountKeyHint: "该账户的 API 密钥。留空保存不会覆盖已存储的密钥。",
+			accountDefault: "默认账户",
+			activeAccount: "当前使用账户",
+			activeAccountAuto: "自动（第一个可用账户）",
+			activeAccountHint: "手动指定优先使用的账户，保存后下次请求即生效；所选账户耗尽时仍会自动切换到其他可用账户。",
+			rulesTitle: "按模型切换账户",
+			rulesHint: "选择模型并路由到某个账户（可多选）。命中规则的模型且该账户可用时优先使用；账户耗尽或密钥失效时仍自动回落到其他账户。规则按列表顺序匹配，第一条命中生效。",
+			rulesEmpty: "尚未配置规则。",
+			rulesCatalogFailed: "模型目录获取失败，暂时无法选择模型；已保存的规则仍会生效。",
+			ruleAdd: "添加规则",
+			ruleRemove: "移除",
+			ruleModel: "模型",
+			ruleModelPick: "选择模型…",
+			ruleModelCount: "已选 {count} 个模型",
+			ruleAccount: "目标账户",
+			ruleHint: "从下拉列表勾选要路由的模型（可多选），再选择目标账户。",
+			modelSearchPlaceholder: "搜索模型…",
+			modelSearchEmpty: "没有匹配的模型。",
+			modelStale: "已下架",
+			visibleModelsTitle: "模型白名单",
+			visibleModelsHint: "勾选要保留的模型，模型选择器就只列出这些；一个都不勾选时则显示全部模型。保存后，下次打开模型选择器生效。",
+			visibleModelsPick: "选择要保留的模型…",
+			visibleModelsCount: "已选 {count} 个模型",
+			visibleModelsShowAll: "显示全部",
+			visibleModelsStaleHint: "有 {count} 个已选模型在目录中找不到了（可能已下架），不影响其他模型；可清理或保留。",
+			visibleModelsCleanStale: "清理失效（{count}）",
+			overridden: "已覆盖",
+			reset: "重置",
+			invalidNumber: "无效数字",
+			numberTooSmall: "不能小于 1（毫秒）",
+			numberTooLarge: "超出允许上限（2147483647 毫秒）",
+			readOnly: "当前配置为只读。",
+			unsaved: "未保存",
+			save: "保存",
+			saving: "保存中",
+			saved: "已保存 ✓",
+			saveFailed: "保存失败，请重试。",
+			discard: "放弃",
+			cancel: "取消",
+			show: "显示",
+			hide: "隐藏",
+			usageTitle: "账户用量",
+			usageRefresh: "刷新",
+			usageRefreshing: "刷新中…",
+			usageLoading: "正在获取账户用量…",
+			usageNoKey: "配置 API 密钥后，这里会显示账户的用量与额度状态。",
+			usageError: "用量获取失败",
+			usageRequests: "请求",
+			usageFailed: "失败",
+			usageSuccessRate: "成功率",
+			usageCost: "花费",
+			usageTokens: "Token",
+			usageTokensIn: "入",
+			usageTokensOut: "出",
+			usageMonthly: "月额度",
+			usagePurchased: "已购",
+			usageFree: "赠送",
+			usageFiveHour: "5 小时窗口",
+			usageWeekly: "每周窗口",
+			usageExceeded: "已超限",
+			usageReset: "重置于",
+			usagePartial: "部分端点数据不可用",
+			usageKeyClear: "清除已存密钥",
+			usageKeyClearStaged: "将清除（保存后生效）",
+			usageUndoKeyClear: "撤销清除",
+			usageKeyInvalid: "API 密钥无效或已过期",
+			usageKeyInvalidHint: "服务端拒绝了全部请求（401）。请检查该账户配置的密钥，或到 commandcode.ai 控制台重新生成。",
+			usageServiceUnavailable: "Command Code 服务暂时不可用",
+			usageServiceUnavailableHint: "服务端返回了错误（5xx），稍后点击刷新重试。",
+			usageNetworkError: "无法连接 Command Code 服务",
+			usageNetworkHint: "所有请求都没有到达服务端。请检查网络连接或 API 地址设置。",
+			usageUpdated: "更新于",
+			usagePeriodEnd: "账期截止",
+			usageActive: "当前使用",
+			usageCooldown: "限额冷却中",
+			usageInvalidKey: "密钥无效",
+			usageUnconfigured: "该账户尚未配置 API 密钥。",
+			updateAvailable: "可更新",
+			updateHint: "已发布新版本，点击查看发布说明；更新插件后刷新本页，提示会自动消失。",
+			loginTitle: "通过官方登录获取密钥",
+			loginHintIdle: "不想手动创建密钥？点击登录后浏览器会打开 commandcode.ai 授权页，完成后密钥自动写入本机凭据服务，下次请求即生效。",
+			loginButton: "登录 Command Code",
+			loginStarting: "正在启动本地回调服务…",
+			loginWaiting: "等待在浏览器中完成授权…",
+			loginOpenLink: "打开授权页面 ↗",
+			loginCancel: "取消登录",
+			loginSuccess: "已登录为",
+			loginUnavailable: "此环境暂不支持登录流程，请手动粘贴密钥。",
+			loginDenied: "授权被拒绝。可重试，或手动粘贴密钥。",
+			loginTimeout: "等待超时：未在窗口期内收到授权回调，请重试。",
+			loginInvalidKey: "获取到的密钥未通过校验（401），请重试或手动粘贴。",
+			loginNetwork: "无法连接 Command Code 服务校验密钥，请检查网络后重试。",
+			loginStoreFailed: "密钥无法写入本机凭据服务，请手动粘贴。",
+			loginCancelled: "登录已取消。",
+			loginFailedGeneric: "登录失败，请重试或手动粘贴密钥。",
+			cardTitle: "Command Code",
+			cardRouteActive: "已启用",
+			cardLoadingHint: "正在读取 Command Code 配置…",
+			cardRegistrationHint: "此卡片随 Command Code 插件注册，需要较新版本的 DeepSeek Harness 才会显示完整内容。"
+		};
+		const en = {
+			nav: "Command Code",
+			title: "Command Code",
+			intro: "Configure the Command Code Provider connection. The API key is stored only in the local credential service and never echoed; other fields are written to user settings and take effect on the next request.",
+			apiKey: "API key",
+			apiKeyHint: "Create one in the commandcode.ai console. Saving with this field blank keeps the stored key.",
+			apiKeySet: "Configured",
+			apiKeyUnset: "Not configured",
+			apiKeyLocked: "Key provided by a read-only source",
+			apiBase: "API base URL",
+			apiBaseHint: "Defaults to https://api.commandcode.ai; usually leave as-is.",
+			workingDir: "Working directory",
+			workingDirHint: "Optional. Leave blank to use the process cwd shown as the placeholder; fill in only to pin a specific path.",
+			requestTimeoutMs: "Request timeout (ms)",
+			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).",
+			advancedSettings: "Advanced",
+			advancedSettingsHint: "Rarely touched options: API base URL, working directory, timeouts, and model filtering.",
+			advancedOverriddenOne: "1 customized",
+			advancedOverriddenMany: "{count} customized",
+			advancedInvalid: "A number in Advanced settings is not ready to save; expand to fix it.",
+			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.",
+			webSearch: "Serve dsh web search with Command Code",
+			webSearchHint: "When on, the model-facing web_search tool is backed by Command Code (same API key and base URL as chat), winning over other search backends. Off hands the selection back to the previous backend (e.g. modsearch) instead of forcing the shipped DeepSeek search.",
+			accountsTitle: "Account rotation",
+			accountsHint: "When the active account hits its usage limit (429) or its key fails (401), requests switch to the next account; when every account is exhausted the error names the earliest window reset.",
+			accountAdd: "Add account",
+			accountRemove: "Remove",
+			accountLabel: "Account label",
+			accountKey: "API key",
+			accountKeyHint: "This account’s API key. Saving with the field blank keeps the stored key.",
 			accountDefault: "Default account",
 			activeAccount: "Active account",
 			activeAccountAuto: "Auto (first usable account)",
@@ -4134,6 +6174,38 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			document.head.appendChild(tag);
 		}
 		/**
+		* Install the plans & quota panel's stylesheet and return its disposer, for
+		* `ctx.effect` to own. Keyed by its own `data-plugin-css` id, so the injection
+		* is idempotent even if a second surface asks for it later.
+		*/
+		function injectPanelCss() {
+			if (typeof document === "undefined") return () => {};
+			if (document.querySelector(`style[data-plugin-css="@mars-sea/dsh-commandcode-provider/CommandCodePanel.module.css"]`) !== null) return () => {};
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "@mars-sea/dsh-commandcode-provider";
+			tag.dataset.pluginCss = PANEL_CSS_ID;
+			tag.textContent = PANEL_CSS;
+			document.head.appendChild(tag);
+			return () => {
+				tag.remove();
+			};
+		}
+		/**
+		* Plans & quota panel id. It is the layout's `MainPanelId`: one string shared
+		* by the `sidebar.footer.action` card and the `main` slot cell, so the card
+		* selects this panel and nothing else. `dsh-client-ui-layout` is not a
+		* dependency of this bundle (its type is only a brand over `string`), so the
+		* brand is applied at the call site instead of importing the package.
+		*/
+		const PANEL_ID = "commandcode-panel";
+		/**
+		* The composer figure's entry id in `conversation.composer.dock`. Its own id,
+		* not the shipped `stats` cell's: reusing `stats` would REPLACE the tokens /
+		* cache-hit / throughput readout rather than inject into it, and that readout
+		* is the harness's to format (see `./session-cost-display.ts`).
+		*/
+		const SESSION_COST_ID = "commandcode-session-cost";
+		/**
 		* Client plugin body. Gates on the services shared by both client generations
 		* (`slots`, `locale`, `connection`, `remote`, `settingsScope`). Current clients
 		* mount the page after `remote.credentials` appears; legacy clients mount it
@@ -4176,11 +6248,13 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			}), "dsh-commandcode-provider: credential invalidations");
 			let usageNamespace;
 			let usageMountError;
+			let pricesController;
 			const contribution = {
 				package: USAGE_REMOTE_CONTRIBUTION.package,
 				descriptors: [
 					...USAGE_REMOTE_CONTRIBUTION.descriptors,
 					...MODELS_REMOTE_CONTRIBUTION.descriptors,
+					...PRICES_REMOTE_CONTRIBUTION.descriptors,
 					...LOGIN_REMOTE_CONTRIBUTION.descriptors
 				]
 			};
@@ -4196,6 +6270,7 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 					ctx.inject(["remote.commandcode"], (namespaceCtx) => {
 						usageNamespace = namespaceCtx.remote.commandcode;
 						controller.refreshCatalog();
+						pricesController?.reload();
 						namespaceCtx.effect(() => () => {
 							usageNamespace = void 0;
 						}, "dsh-commandcode-provider: usage namespace");
@@ -4225,6 +6300,22 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 						error: { message: usageMountError ?? "commandcode/models remote is not mounted" }
 					};
 					return namespace.models();
+				},
+				prices: async () => {
+					const namespace = usageNamespace;
+					if (namespace === void 0) return {
+						ok: false,
+						error: { message: usageMountError ?? "commandcode/prices remote is not mounted" }
+					};
+					const call = namespace.prices;
+					if (typeof call !== "function") return {
+						ok: false,
+						error: {
+							message: "the Host serves no commandcode/prices endpoint",
+							permanent: true
+						}
+					};
+					return call.call(namespace);
 				}
 			};
 			modelsRemote = () => usageRemote.models();
@@ -4232,6 +6323,10 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			ctx.effect(() => () => usageController.dispose(), "dsh-commandcode-provider: usage controller");
 			const usageStore = createSnapshotStore(usageController.state());
 			usageController.subscribe(() => usageStore.set(usageController.state()));
+			pricesController = new CommandCodePricesController(usageRemote);
+			ctx.effect(() => () => pricesController?.dispose(), "dsh-commandcode-provider: price table");
+			const pricesStore = createSnapshotStore(pricesController.state());
+			pricesController.subscribe(() => pricesStore.set(pricesController.state()));
 			const loginRemote = {
 				loginBegin: async () => {
 					if (usageNamespace === void 0) return {
@@ -4323,6 +6418,54 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 					cancelLogin: () => void loginController.cancel()
 				})
 			}, CommandCodeProviderCard));
+			const panelFace = () => ({
+				hooks: {
+					commandCodeUsage: usageStore,
+					commandCodeSettings: store
+				},
+				refresh: () => {
+					pricesController?.ensure();
+					usageController.refresh();
+				},
+				startAutoRefresh: () => startPanelAutoRefresh(usageController, () => true),
+				open: () => {
+					const layout = ctx.get("layout");
+					if (typeof layout?.selectPanel === "function") layout.selectPanel(PANEL_ID);
+				}
+			});
+			ctx.effect(() => injectPanelCss(), "dsh-commandcode-provider: panel styles");
+			try {
+				ctx.slots.inject("main", () => ctx.slots.register({
+					name: "main",
+					key: PANEL_ID,
+					inject: panelFace
+				}, CommandCodePanel));
+			} catch (error) {
+				console.error("[dsh-commandcode-provider] could not register the plans & quota panel:", error);
+			}
+			ctx.inject(["layout"], (layoutCtx) => {
+				if (typeof layoutCtx.get("layout")?.selectPanel !== "function") return;
+				try {
+					layoutCtx.slots.inject("sidebar.footer.action", () => layoutCtx.slots.register({
+						name: "sidebar.footer.action",
+						id: PANEL_ID,
+						order: 1,
+						inject: panelFace
+					}, CommandCodeFooterEntry));
+				} catch (error) {
+					console.error("[dsh-commandcode-provider] could not register the sidebar footer card:", error);
+				}
+			});
+			const sessionCostFace = () => ({ hooks: { commandCodePrices: pricesStore } });
+			try {
+				ctx.slots.inject("conversation.composer.dock", () => ctx.slots.register({
+					name: "conversation.composer.dock",
+					id: SESSION_COST_ID,
+					inject: sessionCostFace
+				}, CommandCodeSessionCost));
+			} catch (error) {
+				console.error("[dsh-commandcode-provider] could not register the composer session-cost readout:", error);
+			}
 		}
 		const inject = [
 			"slots",