@mars-sea/dsh-commandcode-provider 0.11.1 → 0.11.3

package/lib/client.js

@@ -36,150 +36,6 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
-		//#region src/command-locales.ts
-		const commandcodeCommand = {
-			zh: {
-				title: "📊 Command Code 用量{account}",
-				accountTitle: "📊 {label}{badges}",
-				accountSeparator: "────────────────────",
-				activeBadge: "  ✅ 当前使用",
-				invalidCredentialBadge: "  ⛔ 密钥无效",
-				cooldownBadge: "  ⏳ 限额冷却中，重置 {when}",
-				rateLimitBadge: "  ⏳ 已达限额（等待窗口探测）",
-				unconfigured: "  (未配置 API 密钥)",
-				blockedInvalidKey: "⛔ API 密钥无效或已过期 — 服务端拒绝了全部请求（401），请检查该账户的密钥配置",
-				blockedServiceUnavailable: "⚠️ Command Code 服务暂时不可用（5xx），稍后重试",
-				blockedNetwork: "⚠️ 无法连接 Command Code 服务 — 请检查网络或 API 地址",
-				planLine: "  📦 套餐    {name}{status}{period}",
-				planPeriodSuffix: " · 账期截止 {date}",
-				usageHeader: "── 请求 ──────────────────────────────",
-				requestsLine: "  💬 请求    {n} 次 / 失败 {f}  成功率 {r}%",
-				costLine: "  💰 花费    {money}  ({credits} credits)",
-				tokensLine: "  🔤 Token   {in} 入 / {out} 出",
-				creditsHeader: "── 信用 ──────────────────────────────",
-				monthlyLine: "  💳 月额度  {monthly}   (已购 {purchased} / 赠送 {free})",
-				barLine: "     └ {bar}  {pct}%",
-				windowsHeader: "── 窗口用量 ──────────────────────────",
-				fiveHourLine: "  ⏱ 5 小时  {used} / {cap}{warn}",
-				weeklyLine: "  📅 每周    {used} / {cap}{warn}",
-				windowBarLine: "     └ {bar}  重置 {when}",
-				exceededWarning: "  ⚠️ 超限!",
-				resetSuffix: "重置 {when}",
-				partialFailures: "⚠️  部分端点失败: {list}",
-				noData: "（无数据 — 请检查 API 密钥）",
-				errorText: "获取 Command Code 用量失败：{message}",
-				imageGate: "当前会话已包含图片，而模型 {model} 不支持图片输入；请选择支持图片的模型，或先移除会话中的图片。"
-			},
-			en: {
-				title: "📊 Command Code usage{account}",
-				accountTitle: "📊 {label}{badges}",
-				accountSeparator: "────────────────────",
-				activeBadge: "  ✅ active",
-				invalidCredentialBadge: "  ⛔ invalid key",
-				cooldownBadge: "  ⏳ cooling down, resets {when}",
-				rateLimitBadge: "  ⏳ rate-limited (waiting for window probe)",
-				unconfigured: "  (no API key configured)",
-				blockedInvalidKey: "⛔ API key invalid or expired — the server rejected every request (401); check the key configured for this account",
-				blockedServiceUnavailable: "⚠️ Command Code service temporarily unavailable (5xx); try again later",
-				blockedNetwork: "⚠️ could not reach the Command Code service — check your network or the API base setting",
-				planLine: "  📦 Plan     {name}{status}{period}",
-				planPeriodSuffix: " · period ends {date}",
-				usageHeader: "── Requests ──────────────────────────",
-				requestsLine: "  💬 Requests {n} / failed {f}  success rate {r}%",
-				costLine: "  💰 Spend    {money}  ({credits} credits)",
-				tokensLine: "  🔤 Tokens   {in} in / {out} out",
-				creditsHeader: "── Credits ───────────────────────────",
-				monthlyLine: "  💳 Monthly  {monthly}   (purchased {purchased} / free {free})",
-				barLine: "     └ {bar}  {pct}%",
-				windowsHeader: "── Window usage ──────────────────────",
-				fiveHourLine: "  ⏱ 5-hour   {used} / {cap}{warn}",
-				weeklyLine: "  📅 Weekly   {used} / {cap}{warn}",
-				windowBarLine: "     └ {bar}  resets {when}",
-				exceededWarning: "  ⚠️ exceeded!",
-				resetSuffix: "resets {when}",
-				partialFailures: "⚠️  some endpoints failed: {list}",
-				noData: "(no data — check your API key)",
-				errorText: "Could not fetch Command Code usage: {message}",
-				imageGate: "This session already contains images, and model {model} does not accept image input; please select an image-capable model, or remove the images from the session first."
-			}
-		};
-		//#endregion
-		//#region src/client/sessions.ts
-		/**
-		* Friendly-error wrapper for the harness's image-session gate.
-		*
-		* The host rejects switching to a text-only model while the session already
-		* contains images with a `model-unavailable` error
-		* (`dsh-host-apiproxy`'s `session.selectModel` handler). That rejection is
-		* intentional and cannot be relaxed from the plugin side — the adapter's
-		* `inputModalities` is exactly what makes the guard work. What we CAN do is
-		* make the error message friendlier: wrap the shared
-		* `connection.api.sessions.selectModel` face so a `model-unavailable`
-		* rejection shows a clear, actionable hint (with the requested model name)
-		* instead of the raw English harness message.
-		*
-		* The wrapper is deliberately narrow: only the `model-unavailable` code is
-		* rewritten, only when the message matches the image-session gate, and only
-		* the message text changes — the error code and details pass through
-		* untouched so any caller that switches on `error.code` keeps working.
-		*
-		* The wire types are spelled structurally here (not imported from
-		* `@deepseek-ai/dsh-host-apiproxy`) so this client bundle does not drag an
-		* extra peer dependency into the package; the shapes are stable and the
-		* client build inlines them anyway.
-		*
-		* The wrapper takes a `getLocale` thunk because it is reached from a
-		* non-React path that has no `t` in scope; the supplied thunk reads the
-		* active locale at call time (typically `() => ctx.locale.getLocale().active`
-		* in the client entry), and the message template lives in the shared
-		* `commandcodeCommand` dictionary used by the Host-side `/commandcode`
-		* command — the same bilingual surface serves both.
-		*
-		* This module is deliberately free of React and other client-platform
-		* imports so the node test runner can exercise it directly.
-		*/
-		/** Whether a selectModel rejection is the harness's image-session gate. */
-		function isImageSessionRejection(result) {
-			return !result.result.ok && result.result.error.code === "model-unavailable" && result.result.error.message.includes("does not accept image input");
-		}
-		/** Wrap the shared sessions API so selectModel failures read friendlier. */
-		function withFriendlyImageError(sessions, getLocale) {
-			const selectModel = sessions.selectModel.bind(sessions);
-			return {
-				...sessions,
-				selectModel: async (payload, signal) => {
-					const result = await selectModel(payload, signal);
-					if (!isImageSessionRejection(result)) return result;
-					const model = result.result.error.details?.model ?? payload.model;
-					const template = commandcodeCommand[getLocale()].imageGate ?? commandcodeCommand.en.imageGate;
-					return {
-						...result,
-						result: {
-							...result.result,
-							error: {
-								...result.result.error,
-								message: template.replace("{model}", model)
-							}
-						}
-					};
-				}
-			};
-		}
-		/**
-		* Install the friendly-error wrapper when a legacy sessions face is present.
-		*
-		* @returns whether the wrapper was installed. The rewrite is only UX polish;
-		* a 0.1.2 connection has no `api.sessions`, and its absence must never block
-		* the plugin from mounting its settings, credential, or usage surfaces.
-		*/
-		function installFriendlyImageError(connection, getLocale) {
-			const api = connection.api;
-			const sessions = api?.sessions;
-			if (api === void 0 || sessions === void 0 || typeof sessions.selectModel !== "function") return false;
-			api.sessions = withFriendlyImageError(sessions, getLocale);
-			return true;
-		}
-		//#endregion
 		//#region src/client/settings.ts
 		/**
 		* Browser controller for the "Command Code" settings page.
@@ -301,6 +157,10 @@ window.__ModuleLoader__.load({
 				min: 1,
 				max: MAX_TIMEOUT_MS
 			}),
+			numberField$1("transportMaxRetries", {
+				min: 0,
+				max: 50
+			}),
 			booleanField$1("filterModelsByPlan"),
 			booleanField$1("webSearch"),
 			booleanField$1("showSidebarQuota"),
@@ -454,6 +314,7 @@ window.__ModuleLoader__.load({
 					defaultWorkingDir: this.defaultWorkingDir,
 					requestTimeoutMs: this.field("requestTimeoutMs"),
 					streamIdleTimeoutMs: this.field("streamIdleTimeoutMs"),
+					transportMaxRetries: this.field("transportMaxRetries"),
 					filterModelsByPlan: this.field("filterModelsByPlan"),
 					webSearch: this.field("webSearch"),
 					showSidebarQuota: this.field("showSidebarQuota"),
@@ -2294,7 +2155,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region package.json
-		var version = "0.11.1";
+		var version = "0.11.3";
 		var repository = {
 			"type": "git",
 			"url": "git+https://github.com/Mars-Sea/dsh-commandcode-provider.git"
@@ -2493,6 +2354,7 @@ window.__ModuleLoader__.load({
 			"workingDir",
 			"requestTimeoutMs",
 			"streamIdleTimeoutMs",
+			"transportMaxRetries",
 			"filterModelsByPlan",
 			"webSearch",
 			"showSidebarQuota"
@@ -2638,6 +2500,17 @@ window.__ModuleLoader__.load({
 								onReset: () => onReset("streamIdleTimeoutMs"),
 								t
 							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+								id: "cc-transport-max-retries",
+								label: t("transportMaxRetries"),
+								hint: t("transportMaxRetriesHint"),
+								state: state.transportMaxRetries,
+								disabled,
+								numeric: true,
+								onEdit: (text) => onEdit("transportMaxRetries", text),
+								onReset: () => onReset("transportMaxRetries"),
+								t
+							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
 								id: "cc-filter-models-by-plan",
 								label: t("filterModelsByPlan"),
@@ -3981,12 +3854,68 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/panel-copy.ts
-		/** The panel's literal string table. */
-		const PANEL_COPY = {
+		/** The locale namespace both panel slots bind their `t` seat to. */
+		const PANEL_LOCALE_NS = "panel.commandcode";
+		/** The panel's Simplified Chinese string table (the key-set source of truth). */
+		const PANEL_COPY_ZH = {
+			nav: "Command Code",
+			subtitle: "套餐、额度与配额窗口",
+			refresh: "刷新",
+			refreshing: "刷新中…",
+			close: "关闭",
+			closeHint: "返回会话",
+			loading: "正在获取账户用量…",
+			noKey: "尚未配置 API 密钥",
+			noKeyHint: "在 设置 → Command Code 中粘贴密钥或登录后，点击刷新。",
+			plan: "套餐",
+			credits: "额度",
+			limits: "配额窗口",
+			usage: "用量",
+			monthly: "月额度",
+			monthlyLimit: "月额度上限",
+			monthlyUsed: "本月已用",
+			remaining: "剩余",
+			purchased: "已购",
+			free: "赠送",
+			fiveHour: "5 小时窗口",
+			weekly: "每周窗口",
+			fiveHourShort: "5 小时",
+			weeklyShort: "每周",
+			windowUnlimited: "不限",
+			exceeded: "已超限",
+			exhausted: "已用尽",
+			resets: "重置于",
+			requests: "请求",
+			failed: "失败",
+			successRate: "成功率",
+			spend: "花费",
+			tokens: "Token",
+			tokensIn: "入",
+			tokensOut: "出",
+			periodEnds: "账期截止",
+			updated: "更新于",
+			partial: "部分端点数据不可用",
+			active: "当前使用",
+			coolingDown: "限额冷却中",
+			invalidKey: "密钥无效",
+			unconfigured: "未配置",
+			unavailable: "无数据",
+			errorInvalidKey: "API 密钥无效或已过期",
+			errorInvalidKeyHint: "服务端拒绝了全部请求（401）。请检查该账户的密钥，或到 commandcode.ai 控制台重新生成。",
+			errorServiceUnavailable: "Command Code 服务暂时不可用",
+			errorServiceUnavailableHint: "服务端返回错误（5xx），请稍后点击刷新重试。",
+			errorNetwork: "无法连接 Command Code 服务",
+			errorNetworkHint: "所有请求都没有到达服务端。请检查网络连接或 API 地址设置。",
+			errorGeneric: "用量获取失败"
+		};
+		/** The panel's English string table (must mirror {@link PANEL_COPY_ZH}). */
+		const PANEL_COPY_EN = {
 			nav: "Command Code",
 			subtitle: "Plans, credits and quota windows",
 			refresh: "Refresh",
 			refreshing: "Refreshing…",
+			close: "Close",
+			closeHint: "Back to the conversation",
 			loading: "Loading account usage…",
 			noKey: "No API key configured",
 			noKeyHint: "Paste a key — or sign in — under Settings → Command Code, then refresh.",
@@ -4031,9 +3960,15 @@ window.__ModuleLoader__.load({
 			errorNetworkHint: "No request reached the server. Check your network connection or the API base setting.",
 			errorGeneric: "Could not fetch account usage"
 		};
-		/** Look up one panel string. The fallback key keeps a bad call visible, never blank. */
-		function panelText(key) {
-			return PANEL_COPY[key] ?? key;
+		/** Every panel key, in the English table's declaration order. */
+		const PANEL_KEYS = Object.keys(PANEL_COPY_EN);
+		/**
+		* The English translator. Used as the fallback when no locale seat is
+		* available (a defensive path: every supported engine supplies one) and as the
+		* default in tests that only assert the projection's figures.
+		*/
+		function panelTextEN(key) {
+			return PANEL_COPY_EN[key] ?? key;
 		}
 		//#endregion
 		//#region src/client/panel.ts
@@ -4131,7 +4066,7 @@ window.__ModuleLoader__.load({
 			};
 		}
 		/** Build one account's view. */
-		function accountView(entry) {
+		function accountView(entry, t) {
 			const { report } = entry;
 			const account = report.account;
 			const plan = report.plan;
@@ -4142,7 +4077,7 @@ window.__ModuleLoader__.load({
 				stats.push({
 					label: "requests",
 					value: String(usage.completedCount),
-					sub: `${usage.failedCount} ${panelText("failed")}`
+					sub: `${usage.failedCount} ${t("failed")}`
 				});
 				stats.push({
 					label: "successRate",
@@ -4157,7 +4092,7 @@ window.__ModuleLoader__.load({
 				stats.push({
 					label: "tokens",
 					value: formatTokensCompact(usage.totalTokensIn + usage.totalTokensOut),
-					sub: `${formatTokensCompact(usage.totalTokensIn)} ${panelText("tokensIn")} / ${formatTokensCompact(usage.totalTokensOut)} ${panelText("tokensOut")}`
+					sub: `${formatTokensCompact(usage.totalTokensIn)} ${t("tokensIn")} / ${formatTokensCompact(usage.totalTokensOut)} ${t("tokensOut")}`
 				});
 			}
 			const windows = [];
@@ -4208,15 +4143,14 @@ window.__ModuleLoader__.load({
 			};
 		}
 		/**
-		* 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.
+		* Every panel string, resolved once per projection through the translator.
+		* 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_KEYS} declares it.
 		*/
-		function panelStrings() {
-			const keys = Object.keys(PANEL_COPY);
+		function panelStrings(t) {
 			const out = {};
-			for (const key of keys) out[key] = panelText(key);
+			for (const key of PANEL_KEYS) out[key] = t(key);
 			return out;
 		}
 		/**
@@ -4228,6 +4162,7 @@ window.__ModuleLoader__.load({
 		*/
 		function buildPanelView(input) {
 			const { usage } = input;
+			const t = input.t ?? panelTextEN;
 			const hidden = new Set(input.removingIds ?? []);
 			const seen = /* @__PURE__ */ new Set();
 			const entries = (usage.report?.accounts ?? []).filter((entry) => {
@@ -4236,7 +4171,7 @@ window.__ModuleLoader__.load({
 				seen.add(entry.id);
 				return true;
 			});
-			const accounts = entries.map(accountView);
+			const accounts = entries.map((entry) => accountView(entry, t));
 			const selectedEntry = entries.find((entry) => entry.active) ?? entries[0];
 			const selectedView = accounts.find((view) => view.id === selectedEntry?.id);
 			const footerBars = [];
@@ -4255,18 +4190,18 @@ window.__ModuleLoader__.load({
 			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];
+			if (entries.length > 0 && !entries.some((entry) => entry.configured)) status = t("unconfigured");
+			else if (selectedView?.mark !== void 0 && selectedView.mark !== "active") status = t(selectedView.mark);
+			else if (selectedEntry === void 0) status = t("unavailable");
+			const planName = selectedView !== void 0 && selectedView.planName !== "" ? selectedView.planName : t("nav");
+			const titleParts = planName === t("nav") ? [planName] : [t("nav"), planName];
 			for (const bar of footerBars) {
 				const figures = bar.detail === "" ? "" : ` ${bar.detail}`;
-				titleParts.push(`${panelText(bar.label)}${figures} (${bar.percent})`);
+				titleParts.push(`${t(bar.label)}${figures} (${bar.percent})`);
 			}
-			if (cost !== "") titleParts.push(`${panelText("spend")} ${cost}`);
+			if (cost !== "") titleParts.push(`${t("spend")} ${cost}`);
 			return {
-				text: panelStrings(),
+				text: panelStrings(t),
 				planName,
 				status,
 				footerBars,
@@ -4352,11 +4287,11 @@ window.__ModuleLoader__.load({
 		* 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).
+		* derived here. Strings arrive already localized in `view.text`: the slots
+		* declare the `panel.commandcode` locale namespace, so the renderer hands this
+		* component a `t` seat that is passed into `buildPanelView` — the panel follows
+		* the harness's active language (a language switch mints a new `t`, so the
+		* surfaces re-render without an extra channel).
 		*
 		* 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
@@ -4378,7 +4313,8 @@ window.__ModuleLoader__.load({
 			return buildPanelView({
 				usage,
 				apiKeyConfigured: settings.anyAccountConfigured,
-				removingIds: settings.accountsRemoving
+				removingIds: settings.accountsRemoving,
+				t: props.t ?? panelTextEN
 			});
 		}
 		/**
@@ -4704,6 +4640,18 @@ window.__ModuleLoader__.load({
 									disabled: view.loading,
 									onClick: () => props.refresh(),
 									children: view.loading ? text("refreshing") : text("refresh")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+									variant: "ghost",
+									size: "sm",
+									className: "ccp-close",
+									"aria-label": text("close"),
+									title: text("closeHint"),
+									onClick: () => props.close(),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										"aria-hidden": "true",
+										children: "×"
+									})
 								})
 							]
 						}),
@@ -5651,6 +5599,165 @@ window.__ModuleLoader__.load({
 				"data-ccp-session-cost-anchor": ""
 			});
 		}
+		//#endregion
+		//#region src/client/page-styles.ts
+		/**
+		* Stylesheet for the Command Code settings page — and the Models-page provider
+		* card, which shares its `cc-` classes.
+		*
+		* Returned as a string rather than injected here so the modules stay free of
+		* DOM side effects at import time: `./index.ts` installs it once, keyed by
+		* `PAGE_CSS_ID`. It is a module of its own rather than a literal inside the
+		* client entry so `tests/styles.test.ts` can audit every rule without importing
+		* the React tree (which pulls `*.module.css` through the primitives package and
+		* needs a loader registered first).
+		*
+		* Every colour comes from a harness theme alias with a neutral fallback, so the
+		* page follows the active theme (light/dark and any brand pack) without
+		* hardcoded values. Classes are `cc-` prefixed to stay clear of the panel's
+		* `ccp-` set.
+		*
+		* @module dsh-commandcode-provider/client/page-styles
+		*/
+		/**
+		* Stylesheet id (the `data-plugin-css` value that makes injection idempotent).
+		*
+		* The package prefix must match the one the panel stylesheet uses
+		* (`PANEL_CSS_ID` in `./panel-styles.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. The two ids must also stay distinct from each other — they key two
+		* separate style tags, and a shared id would make the second injection a no-op
+		* that silently drops one stylesheet.
+		*/
+		const PAGE_CSS_ID = "@mars-sea/dsh-commandcode-provider/CommandCodeSettingsPage.module.css";
+		/** The settings-page stylesheet. */
+		const PAGE_CSS = `
+.cc-section{max-width:720px;color:var(--dsw-alias-label-primary);flex-direction:column;gap:12px;display:flex}
+.cc-title{margin:0;font-size:18px;font-weight:600}
+.cc-intro{color:var(--dsw-alias-label-tertiary);margin:0;font-size:13px;line-height:1.5}
+.cc-readOnly{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
+.cc-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:4px 16px}
+.cc-field{flex-direction:column;gap:6px;padding:12px 0;display:flex}
+.cc-field+.cc-field{border-top:1px solid var(--dsw-alias-border-l2)}
+.cc-fieldHead{align-items:center;gap:8px;display:flex}
+.cc-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
+.cc-badges{align-items:center;gap:8px;display:inline-flex}
+.cc-badge{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.cc-badgeMuted{white-space:nowrap;color:var(--dsw-alias-label-tertiary);border-radius:999px;padding:1px 8px;font-size:11px;line-height:17px}
+.cc-reset{font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:1.5}
+.cc-reset:hover:not(:disabled){color:var(--dsw-alias-label-primary)}
+.cc-reset:disabled{cursor:default;opacity:.5}
+.cc-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;line-height:1.5}
+.cc-input:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
+.cc-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
+/* The routing-rule model multi-select: a button trigger that opens an
+ * anchored Menu of checkbox rows. The trigger mirrors .cc-input sizing so it
+ * sits flush with the sibling account select. */
+.cc-ruleTrigger{align-items:center;gap:8px;display:flex;width:100%;text-align:left;cursor:pointer}
+.cc-ruleTrigger:disabled{cursor:default}
+.cc-ruleTriggerText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cc-ruleCaret{flex-shrink:0;border-right:1.5px solid var(--dsw-alias-label-tertiary);border-bottom:1.5px solid var(--dsw-alias-label-tertiary);width:6px;height:6px;margin-right:4px;margin-bottom:2px;transform:rotate(45deg)}
+.cc-checkRow{align-items:center;gap:8px;display:inline-flex;min-width:0}
+.cc-checkRow:hover{cursor:pointer}
+.cc-check{appearance:none;flex-shrink:0;width:15px;height:15px;margin:0;border:1px solid var(--dsw-alias-border-l2);border-radius:4px;background:var(--dsw-alias-bg-layer-1);position:relative}
+.cc-check:checked{background:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary)}
+.cc-check:checked::after{content:'';position:absolute;top:2px;left:5px;width:3px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
+.cc-checkName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* The model multi-select search box: stacked under the trigger while the
+ * dropdown is open, same input sizing so the pair reads as one control. The
+ * box lives inside the Menu anchor (which renders inside the Menu's root
+ * span), so focusing/typing it never trips the Menu's outside-click close. */
+.cc-modelSelectAnchor{flex-direction:column;gap:6px;display:flex;width:100%}
+.cc-modelSearch{width:100%}
+.cc-modelSearch::-webkit-search-cancel-button{cursor:pointer}
+/* Selects need their own treatment to sit flush with the text inputs:
+ * the UA stylesheet renders <select> border-box (34px total vs the inputs'
+ * 36px) and forces its own menulist text metrics, so drop the native
+ * chrome entirely (appearance:none), restore content-box so the outer box
+ * matches the inputs again, and draw the chevron ourselves. Longhand
+ * background-* only — the shorthand would reset .cc-input's background. */
+select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:content-box;padding-right:32px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888f98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
+.cc-inputInvalid{border-color:var(--dsw-alias-label-error)}
+.cc-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
+/* The Advanced card: its header row is one full-width toggle button; the
+ * chevron is two borders on a rotated square (no icon dependency). */
+.cc-advancedHead{align-items:center;gap:8px;display:flex;width:100%;padding:12px 0;background:0 0;border:none;cursor:pointer;font:inherit;text-align:left}
+.cc-advancedHead:hover .cc-advancedTitle{color:var(--dsw-alias-label-primary)}
+.cc-advancedTitle{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:500;line-height:1.5}
+.cc-advancedSpacer{flex:1}
+.cc-chevron{flex-shrink:0;border-right:1.5px solid var(--dsw-alias-label-tertiary);border-bottom:1.5px solid var(--dsw-alias-label-tertiary);width:8px;height:8px;margin-right:4px;margin-bottom:2px;transform:rotate(45deg);transition:transform .15s ease}
+.cc-chevronUp{transform:rotate(-135deg);margin-bottom:-3px}
+.cc-advancedBody{flex-direction:column;display:flex}
+.cc-advancedBody>.cc-field:first-of-type{border-top:1px solid var(--dsw-alias-border-l2)}
+.cc-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
+.cc-footer{justify-content:flex-end;align-items:center;gap:8px;display:flex}
+.cc-toggleRow{align-items:center;gap:8px;cursor:pointer;display:flex}
+.cc-toggleRow:has(.cc-toggle:disabled){cursor:default}
+.cc-toggle{appearance:none;flex-shrink:0;background:var(--dsw-alias-border-l2);border-radius:999px;width:30px;height:18px;margin:0;cursor:pointer;position:relative;transition:background .15s ease}
+.cc-toggle:checked{background:var(--dsw-alias-brand-primary)}
+.cc-toggle::after{content:'';background:#fff;border-radius:50%;width:14px;height:14px;position:absolute;top:2px;left:2px;transition:left .15s ease}
+.cc-toggle:checked::after{left:14px}
+.cc-toggle:disabled{cursor:default;opacity:.5}
+.cc-failed{min-width:0;color:var(--dsw-alias-label-error);flex:1;margin:0;font-size:12px;line-height:1.5}
+.cc-usageCard{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:14px 16px;flex-direction:column;gap:12px;display:flex}
+.cc-usageHead{align-items:center;gap:8px;display:flex}
+.cc-usageTitle{color:var(--dsw-alias-label-primary);flex:1;margin:0;font-size:13px;font-weight:600;line-height:1.5}
+.cc-usageAccount{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.cc-usagePlan{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-brand-primary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;line-height:17px}
+.cc-usagePlanStatus{white-space:nowrap;color:var(--dsw-alias-label-error);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.cc-usageRefresh{font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:1.5}
+.cc-usageRefresh:hover:not(:disabled){color:var(--dsw-alias-label-primary)}
+.cc-usageRefresh:disabled{cursor:default;opacity:.5}
+.cc-usageHint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
+.cc-usageError{align-items:center;gap:8px;color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5;display:flex}
+.cc-usageStats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;display:grid}
+.cc-usageStat{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:8px;padding:8px 10px;flex-direction:column;gap:2px;display:flex}
+.cc-usageStatLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5}
+.cc-usageStatValue{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
+.cc-usageStatSub{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5}
+.cc-usageWindows{flex-direction:column;gap:16px;display:flex}
+.cc-usageWindow{flex-direction:column;gap:6px;display:flex}
+.cc-usageWindowHead{align-items:baseline;gap:8px;display:flex}
+.cc-usageWindowLabel{color:var(--dsw-alias-label-secondary);flex:1;font-size:12px;font-weight:500;line-height:1.5}
+.cc-usageWindowValue{color:var(--dsw-alias-label-primary);font-size:12px;font-weight:500;line-height:1.5}
+.cc-usageExceeded{color:var(--dsw-alias-label-error);font-size:11px;font-weight:500;line-height:1.5}
+.cc-usageBar{overflow:hidden;background:var(--dsw-alias-bg-layer-1);border-radius:999px;height:6px}
+.cc-usageBarFill{background:var(--dsw-alias-brand-primary);border-radius:999px;height:100%;transition:width .3s ease}
+.cc-usageBarFillWarn{background:var(--dsw-alias-label-error)}
+@media (prefers-reduced-motion:reduce){.cc-chevron,.cc-toggle,.cc-toggle::after,.cc-usageBarFill{transition:none}}.cc-usageWindowReset{color:var(--dsw-alias-label-tertiary);margin:0;font-size:11px;line-height:1.5}
+.cc-usageMeta{align-items:center;gap:8px;display:flex}
+.cc-accountReport{flex-direction:column;gap:12px;display:flex}
+.cc-tabs{flex-wrap:wrap;gap:6px;display:flex}
+.cc-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}
+.cc-tab:hover:not(.cc-tabActive){color:var(--dsw-alias-label-primary)}
+.cc-tabActive{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-brand-primary)}
+.cc-tabDotOk{background:var(--dsw-alias-brand-primary);border-radius:50%;width:6px;height:6px}
+.cc-tabDotWarn{background:#d97706;border-radius:50%;width:6px;height:6px}
+.cc-tabDotError{background:var(--dsw-alias-label-error);border-radius:50%;width:6px;height:6px}
+.cc-usageMetaSpacer{flex:1}
+.cc-usageUpdated{color:var(--dsw-alias-label-tertiary);margin:0;font-size:11px;line-height:1.5}
+.cc-usagePartial{color:var(--dsw-alias-label-error);margin:0;font-size:11px;line-height:1.5}
+.cc-usageBlocked{border:1px solid var(--dsw-alias-label-error);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
+.cc-usageBlockedTitle{color:var(--dsw-alias-label-error);margin:0;font-size:13px;font-weight:600;line-height:1.5}
+.cc-usageBlockedHint{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px;line-height:1.5}
+.cc-version{margin:4px 0 0;text-align:center;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}
+/* The Models-page provider panel root: unstyled by design — the row card the
+ * Models page owns supplies the surface, the panel only stacks its controls. */
+.cc-providerCard{flex-direction:column;display:flex}
+/* The update hint rides the footer version line: warning-tinted (with a
+ * muted fallback for themes without the alias), quiet until hovered. */
+.cc-versionLink{color:var(--dsw-alias-state-warning-primary,var(--dsw-alias-label-secondary));text-decoration:none}
+.cc-versionLink:hover{color:var(--dsw-alias-label-primary);text-decoration:underline;text-underline-position:under}
+/* The login panel rides the connection card as one more field row; the
+ * authorization link is the only branded element on it. */
+.cc-loginLink{color:var(--dsw-alias-brand-primary);text-decoration:none;font-size:12px;line-height:1.5}
+.cc-loginLink:hover{text-decoration:underline;text-underline-position:under}
+.cc-loginDone{color:var(--dsw-alias-state-success-primary,var(--dsw-alias-label-secondary))}
+.cc-loginError{color:var(--dsw-alias-label-error)}
+.cc-saved{color:var(--dsw-alias-state-success-primary,var(--dsw-alias-label-secondary));margin:0;font-size:12px;font-weight:500;line-height:1.5}
+.cc-badgeWarn{background:var(--dsw-alias-state-warning-secondary,var(--dsw-alias-bg-module-platform));color:var(--dsw-alias-state-warning-primary,var(--dsw-alias-label-secondary))}
+`;
 		//#endregion
 		//#region src/client/panel-styles.ts
 		/**
@@ -5659,8 +5766,16 @@ window.__ModuleLoader__.load({
 		*
 		* 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.
+		* by the same `data-plugin-css` attribute the settings-page stylesheet
+		* (`./page-styles.ts`) uses, and removes it again when the plugin's fiber
+		* unwinds.
+		*
+		* These rules are GLOBAL CSS: every selector in here can match markup this
+		* plugin did not render. So each one is either qualified by a `ccp-` class of
+		* our own, or anchored to the sidebar region it has to lay out — and the one
+		* foreign anchor carries its justification in place (see the footer card
+		* block; issue #48). `tests/styles.test.ts` audits that containment for both
+		* stylesheets and simulates it against the real foreign class stems.
 		*
 		* 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
@@ -5673,9 +5788,12 @@ window.__ModuleLoader__.load({
 		* 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.
+		* (`PAGE_CSS_ID` in `./page-styles.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. The two ids must also stay distinct from each other — they key two
+		* separate style tags, and a shared id would make the second injection a no-op
+		* that silently drops one stylesheet.
 		*/
 		const PANEL_CSS_ID = "@mars-sea/dsh-commandcode-provider/CommandCodePanel.module.css";
 		/** The panel stylesheet. */
@@ -5689,11 +5807,28 @@ window.__ModuleLoader__.load({
 
    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}
+   it would overflow the column: this card's flex:0 0 auto cannot shrink, and the
+   chip's width:100% basis would absorb the whole overflow and collapse to
+   nothing. 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.
+
+   THE ANCHOR IS LOAD-BEARING, and it is the whole reason this selector is not
+   just [class*="_footerActions"] (issue #48). "footerActions" is NOT a stem this
+   shell owns alone: @deepseek-ai/dsh-client-ui-user-questions renders the
+   ask-user-question dialog's button row as Mbwy4a_footerActions, so the
+   unanchored rule forced THAT row into a column too and stacked the dialog's
+   side-by-side buttons on every page. "footArea" is declared by
+   dsh-client-ui-sidebar alone — verified against every client bundle of the
+   0.1.6-alpha.1 engine, and against our own cc-/ccp- class names, which collide
+   with no engine class — so anchoring under it keeps the sidebar layout fix and
+   cannot reach another component's markup. The descendant combinator (rather
+   than a child one) deliberately survives a wrapper element appearing between
+   the two: a renamed or restructured shell should degrade to its own row, not
+   lose the fix. tests/styles.test.ts pins both halves of this — the dialog row
+   is no longer matched, the sidebar row still is. */
+[class*="_footArea"] [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}
@@ -5738,6 +5873,11 @@ window.__ModuleLoader__.load({
 .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}
+/* The dashboard's exit: an icon-sized glyph button. The primitive's own
+   geometry is kept (size="sm"); only the glyph is enlarged and optically
+   centred, so it reads as a dismiss control rather than a text button. */
+.ccp-close{min-width:28px;justify-content:center;padding-left:0;padding-right:0}
+.ccp-close span{font-size:16px;line-height:1}
 .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. */
@@ -5814,6 +5954,8 @@ window.__ModuleLoader__.load({
 			requestTimeoutMsHint: "等待响应首个字节的超时；默认 60000。",
 			streamIdleTimeoutMs: "流空闲超时（毫秒）",
 			streamIdleTimeoutMsHint: "生成流停滞多久视为断连；默认 300000（长思考模型可静默数分钟，默认值刻意放宽）。",
+			transportMaxRetries: "网络失败重试次数",
+			transportMaxRetriesHint: "连接失败时自动重试几次，默认 5（各次等待 0.5+1+2+4+8 秒，合计约 15 秒）。超过后直接报错，不再按指数退避长时间等待；填 0 表示不重试。限流、5xx 等由服务端要求重试的失败不受此项影响。",
 			advancedSettings: "高级设置",
 			advancedSettingsHint: "API 地址、工作目录、超时、模型过滤、联网搜索与侧边栏额度卡片等不常修改的选项。",
 			advancedOverriddenOne: "已自定义 1 项",
@@ -5948,6 +6090,8 @@ window.__ModuleLoader__.load({
 			requestTimeoutMsHint: "Time to wait for the first response byte; default 60000.",
 			streamIdleTimeoutMs: "Stream idle timeout (ms)",
 			streamIdleTimeoutMsHint: "How long a stalled stream is treated as dead; default 300000 (deliberately generous — long-thinking models can stay silent for minutes).",
+			transportMaxRetries: "Transport retries",
+			transportMaxRetriesHint: "How many times a failed connection is retried automatically; default 5 (waits of 0.5+1+2+4+8s, ~15s in total). After that the failure is reported instead of waiting on the exponential backoff. 0 disables the retries. Rate limits and 5xx answers keep their own, longer retry window.",
 			advancedSettings: "Advanced",
 			advancedSettingsHint: "Rarely touched options: API base URL, working directory, timeouts, model filtering, web search, and the sidebar quota card.",
 			advancedOverriddenOne: "1 customized",
@@ -6067,141 +6211,13 @@ window.__ModuleLoader__.load({
 		};
 		//#endregion
 		//#region src/client/index.ts
-		/** CSS for the settings page, injected once (harness bundle convention). */
-		const PAGE_CSS = `
-.cc-section{max-width:720px;color:var(--dsw-alias-label-primary);flex-direction:column;gap:12px;display:flex}
-.cc-title{margin:0;font-size:18px;font-weight:600}
-.cc-intro{color:var(--dsw-alias-label-tertiary);margin:0;font-size:13px;line-height:1.5}
-.cc-readOnly{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
-.cc-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:4px 16px}
-.cc-field{flex-direction:column;gap:6px;padding:12px 0;display:flex}
-.cc-field+.cc-field{border-top:1px solid var(--dsw-alias-border-l2)}
-.cc-fieldHead{align-items:center;gap:8px;display:flex}
-.cc-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
-.cc-badges{align-items:center;gap:8px;display:inline-flex}
-.cc-badge{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
-.cc-badgeMuted{white-space:nowrap;color:var(--dsw-alias-label-tertiary);border-radius:999px;padding:1px 8px;font-size:11px;line-height:17px}
-.cc-reset{font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:1.5}
-.cc-reset:hover:not(:disabled){color:var(--dsw-alias-label-primary)}
-.cc-reset:disabled{cursor:default;opacity:.5}
-.cc-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;line-height:1.5}
-.cc-input:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
-.cc-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
-/* The routing-rule model multi-select: a button trigger that opens an
- * anchored Menu of checkbox rows. The trigger mirrors .cc-input sizing so it
- * sits flush with the sibling account select. */
-.cc-ruleTrigger{align-items:center;gap:8px;display:flex;width:100%;text-align:left;cursor:pointer}
-.cc-ruleTrigger:disabled{cursor:default}
-.cc-ruleTriggerText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.cc-ruleCaret{flex-shrink:0;border-right:1.5px solid var(--dsw-alias-label-tertiary);border-bottom:1.5px solid var(--dsw-alias-label-tertiary);width:6px;height:6px;margin-right:4px;margin-bottom:2px;transform:rotate(45deg)}
-.cc-checkRow{align-items:center;gap:8px;display:inline-flex;min-width:0}
-.cc-checkRow:hover{cursor:pointer}
-.cc-check{appearance:none;flex-shrink:0;width:15px;height:15px;margin:0;border:1px solid var(--dsw-alias-border-l2);border-radius:4px;background:var(--dsw-alias-bg-layer-1);position:relative}
-.cc-check:checked{background:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary)}
-.cc-check:checked::after{content:'';position:absolute;top:2px;left:5px;width:3px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
-.cc-checkName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-/* The model multi-select search box: stacked under the trigger while the
- * dropdown is open, same input sizing so the pair reads as one control. The
- * box lives inside the Menu anchor (which renders inside the Menu's root
- * span), so focusing/typing it never trips the Menu's outside-click close. */
-.cc-modelSelectAnchor{flex-direction:column;gap:6px;display:flex;width:100%}
-.cc-modelSearch{width:100%}
-.cc-modelSearch::-webkit-search-cancel-button{cursor:pointer}
-/* Selects need their own treatment to sit flush with the text inputs:
- * the UA stylesheet renders <select> border-box (34px total vs the inputs'
- * 36px) and forces its own menulist text metrics, so drop the native
- * chrome entirely (appearance:none), restore content-box so the outer box
- * matches the inputs again, and draw the chevron ourselves. Longhand
- * background-* only — the shorthand would reset .cc-input's background. */
-select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:content-box;padding-right:32px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888f98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
-.cc-inputInvalid{border-color:var(--dsw-alias-label-error)}
-.cc-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
-/* The Advanced card: its header row is one full-width toggle button; the
- * chevron is two borders on a rotated square (no icon dependency). */
-.cc-advancedHead{align-items:center;gap:8px;display:flex;width:100%;padding:12px 0;background:0 0;border:none;cursor:pointer;font:inherit;text-align:left}
-.cc-advancedHead:hover .cc-advancedTitle{color:var(--dsw-alias-label-primary)}
-.cc-advancedTitle{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:500;line-height:1.5}
-.cc-advancedSpacer{flex:1}
-.cc-chevron{flex-shrink:0;border-right:1.5px solid var(--dsw-alias-label-tertiary);border-bottom:1.5px solid var(--dsw-alias-label-tertiary);width:8px;height:8px;margin-right:4px;margin-bottom:2px;transform:rotate(45deg);transition:transform .15s ease}
-.cc-chevronUp{transform:rotate(-135deg);margin-bottom:-3px}
-.cc-advancedBody{flex-direction:column;display:flex}
-.cc-advancedBody>.cc-field:first-of-type{border-top:1px solid var(--dsw-alias-border-l2)}
-.cc-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
-.cc-footer{justify-content:flex-end;align-items:center;gap:8px;display:flex}
-.cc-toggleRow{align-items:center;gap:8px;cursor:pointer;display:flex}
-.cc-toggleRow:has(.cc-toggle:disabled){cursor:default}
-.cc-toggle{appearance:none;flex-shrink:0;background:var(--dsw-alias-border-l2);border-radius:999px;width:30px;height:18px;margin:0;cursor:pointer;position:relative;transition:background .15s ease}
-.cc-toggle:checked{background:var(--dsw-alias-brand-primary)}
-.cc-toggle::after{content:'';background:#fff;border-radius:50%;width:14px;height:14px;position:absolute;top:2px;left:2px;transition:left .15s ease}
-.cc-toggle:checked::after{left:14px}
-.cc-toggle:disabled{cursor:default;opacity:.5}
-.cc-failed{min-width:0;color:var(--dsw-alias-label-error);flex:1;margin:0;font-size:12px;line-height:1.5}
-.cc-usageCard{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:14px 16px;flex-direction:column;gap:12px;display:flex}
-.cc-usageHead{align-items:center;gap:8px;display:flex}
-.cc-usageTitle{color:var(--dsw-alias-label-primary);flex:1;margin:0;font-size:13px;font-weight:600;line-height:1.5}
-.cc-usageAccount{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
-.cc-usagePlan{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-brand-primary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;line-height:17px}
-.cc-usagePlanStatus{white-space:nowrap;color:var(--dsw-alias-label-error);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
-.cc-usageRefresh{font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:1.5}
-.cc-usageRefresh:hover:not(:disabled){color:var(--dsw-alias-label-primary)}
-.cc-usageRefresh:disabled{cursor:default;opacity:.5}
-.cc-usageHint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
-.cc-usageError{align-items:center;gap:8px;color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5;display:flex}
-.cc-usageStats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;display:grid}
-.cc-usageStat{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:8px;padding:8px 10px;flex-direction:column;gap:2px;display:flex}
-.cc-usageStatLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5}
-.cc-usageStatValue{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
-.cc-usageStatSub{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5}
-.cc-usageWindows{flex-direction:column;gap:16px;display:flex}
-.cc-usageWindow{flex-direction:column;gap:6px;display:flex}
-.cc-usageWindowHead{align-items:baseline;gap:8px;display:flex}
-.cc-usageWindowLabel{color:var(--dsw-alias-label-secondary);flex:1;font-size:12px;font-weight:500;line-height:1.5}
-.cc-usageWindowValue{color:var(--dsw-alias-label-primary);font-size:12px;font-weight:500;line-height:1.5}
-.cc-usageExceeded{color:var(--dsw-alias-label-error);font-size:11px;font-weight:500;line-height:1.5}
-.cc-usageBar{overflow:hidden;background:var(--dsw-alias-bg-layer-1);border-radius:999px;height:6px}
-.cc-usageBarFill{background:var(--dsw-alias-brand-primary);border-radius:999px;height:100%;transition:width .3s ease}
-.cc-usageBarFillWarn{background:var(--dsw-alias-label-error)}
-@media (prefers-reduced-motion:reduce){.cc-chevron,.cc-toggle,.cc-toggle::after,.cc-usageBarFill{transition:none}}.cc-usageWindowReset{color:var(--dsw-alias-label-tertiary);margin:0;font-size:11px;line-height:1.5}
-.cc-usageMeta{align-items:center;gap:8px;display:flex}
-.cc-accountReport{flex-direction:column;gap:12px;display:flex}
-.cc-tabs{flex-wrap:wrap;gap:6px;display:flex}
-.cc-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}
-.cc-tab:hover:not(.cc-tabActive){color:var(--dsw-alias-label-primary)}
-.cc-tabActive{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-brand-primary)}
-.cc-tabDotOk{background:var(--dsw-alias-brand-primary);border-radius:50%;width:6px;height:6px}
-.cc-tabDotWarn{background:#d97706;border-radius:50%;width:6px;height:6px}
-.cc-tabDotError{background:var(--dsw-alias-label-error);border-radius:50%;width:6px;height:6px}
-.cc-usageMetaSpacer{flex:1}
-.cc-usageUpdated{color:var(--dsw-alias-label-tertiary);margin:0;font-size:11px;line-height:1.5}
-.cc-usagePartial{color:var(--dsw-alias-label-error);margin:0;font-size:11px;line-height:1.5}
-.cc-usageBlocked{border:1px solid var(--dsw-alias-label-error);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
-.cc-usageBlockedTitle{color:var(--dsw-alias-label-error);margin:0;font-size:13px;font-weight:600;line-height:1.5}
-.cc-usageBlockedHint{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px;line-height:1.5}
-.cc-version{margin:4px 0 0;text-align:center;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}
-/* The Models-page provider panel root: unstyled by design — the row card the
- * Models page owns supplies the surface, the panel only stacks its controls. */
-.cc-providerCard{flex-direction:column;display:flex}
-/* The update hint rides the footer version line: warning-tinted (with a
- * muted fallback for themes without the alias), quiet until hovered. */
-.cc-versionLink{color:var(--dsw-alias-state-warning-primary,var(--dsw-alias-label-secondary));text-decoration:none}
-.cc-versionLink:hover{color:var(--dsw-alias-label-primary);text-decoration:underline;text-underline-position:under}
-/* The login panel rides the connection card as one more field row; the
- * authorization link is the only branded element on it. */
-.cc-loginLink{color:var(--dsw-alias-brand-primary);text-decoration:none;font-size:12px;line-height:1.5}
-.cc-loginLink:hover{text-decoration:underline;text-underline-position:under}
-.cc-loginDone{color:var(--dsw-alias-state-success-primary,var(--dsw-alias-label-secondary))}
-.cc-loginError{color:var(--dsw-alias-label-error)}
-.cc-saved{color:var(--dsw-alias-state-success-primary,var(--dsw-alias-label-secondary));margin:0;font-size:12px;font-weight:500;line-height:1.5}
-.cc-badgeWarn{background:var(--dsw-alias-state-warning-secondary,var(--dsw-alias-bg-module-platform));color:var(--dsw-alias-state-warning-primary,var(--dsw-alias-label-secondary))}
-`;
 		/** Inject the page stylesheet once (idempotent per tag). */
 		function injectPageCss() {
 			if (typeof document === "undefined") return;
-			const id = "@mars-sea/dsh-commandcode-provider/CommandCodeSettingsPage.module.css";
-			if (document.querySelector(`style[data-plugin-css="${id}"]`) !== null) return;
+			if (document.querySelector(`style[data-plugin-css="@mars-sea/dsh-commandcode-provider/CommandCodeSettingsPage.module.css"]`) !== null) return;
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@mars-sea/dsh-commandcode-provider";
-			tag.dataset.pluginCss = id;
+			tag.dataset.pluginCss = PAGE_CSS_ID;
 			tag.textContent = PAGE_CSS;
 			document.head.appendChild(tag);
 		}
@@ -6231,6 +6247,15 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 		*/
 		const PANEL_ID = "commandcode-panel";
 		/**
+		* ui-conversation's reserved `main` key, used only as the exit fallback for a
+		* layout whose `selectPanel` predates the `null` "show the Conversation"
+		* selection (see `close` in {@link applyClientSurfaces}). Declared locally for
+		* the same reason as {@link PANEL_ID}: ui-conversation is not a dependency of
+		* this bundle, and the key is a published contract of the layout (its README
+		* names `conversation` as reserved for the Conversation).
+		*/
+		const CONVERSATION_PANEL_ID = "conversation";
+		/**
 		* 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
@@ -6245,12 +6270,15 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 		*/
 		function apply(ctx) {
 			injectPageCss();
-			const connection = ctx.get("connection");
-			if (connection !== void 0) installFriendlyImageError(connection, () => ctx.locale.getLocale().active === "zh" ? "zh" : "en");
 			ctx.effect(() => ctx.locale.register("settings.commandcode", {
 				zh,
 				en
 			}), "dsh-commandcode-provider: page copy");
+			ctx.effect(() => ctx.locale.register(PANEL_LOCALE_NS, {
+				zh: PANEL_COPY_ZH,
+				en: PANEL_COPY_EN
+			}), "dsh-commandcode-provider: panel copy");
+			const connection = ctx.get("connection");
 			const legacyApi = adaptLegacyCredentials(connection?.api?.credentials);
 			if (legacyApi !== void 0) {
 				applyClientSurfaces(ctx, legacyApi, connection?.hostDescription);
@@ -6463,6 +6491,19 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 				open: () => {
 					const layout = ctx.get("layout");
 					if (typeof layout?.selectPanel === "function") layout.selectPanel(PANEL_ID);
+				},
+				close: () => {
+					const layout = ctx.get("layout");
+					if (typeof layout?.selectPanel !== "function") return;
+					try {
+						layout.selectPanel(null);
+					} catch {
+						try {
+							layout.selectPanel(CONVERSATION_PANEL_ID);
+						} catch (error) {
+							console.error("[dsh-commandcode-provider] could not close the plans & quota panel:", error);
+						}
+					}
 				}
 			});
 			ctx.effect(() => injectPanelCss(), "dsh-commandcode-provider: panel styles");
@@ -6470,6 +6511,7 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 				ctx.slots.inject("main", () => ctx.slots.register({
 					name: "main",
 					key: PANEL_ID,
+					locale: PANEL_LOCALE_NS,
 					inject: panelFace
 				}, CommandCodePanel));
 			} catch (error) {
@@ -6482,6 +6524,7 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 						name: "sidebar.footer.action",
 						id: PANEL_ID,
 						order: 1,
+						locale: PANEL_LOCALE_NS,
 						inject: panelFace
 					}, CommandCodeFooterEntry));
 				} catch (error) {
@@ -6509,8 +6552,6 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 		//#endregion
 		exports.apply = apply;
 		exports.inject = inject;
-		exports.isImageSessionRejection = isImageSessionRejection;
-		exports.withFriendlyImageError = withFriendlyImageError;
 		return module.exports;
 	}
 });