@mars-sea/dsh-commandcode-provider 0.6.0 → 0.6.2

package/lib/client.js

@@ -59,8 +59,15 @@ window.__ModuleLoader__.load({
 				}
 			};
 		}
-		/** A whole-number field; an empty draft clears it, anything non-numeric blocks save. */
-		function numberField$1(field) {
+		/**
+		* A numeric field; an empty draft clears it, anything non-numeric blocks
+		* save, and an optional inclusive `bounds` range rejects out-of-range values
+		* with a specific reason (the Host schema would reject them at save time with
+		* only a generic failure — catching it here names the problem while typing).
+		* Decimals pass: the Host schema is `z.number()` too, and a fractional
+		* millisecond value is harmless even if pointless.
+		*/
+		function numberField$1(field, bounds) {
 			return {
 				field,
 				format: (value) => typeof value === "number" ? String(value) : "",
@@ -68,10 +75,22 @@ window.__ModuleLoader__.load({
 					const trimmed = text.trim();
 					if (trimmed === "") return { kind: "clear" };
 					const parsed = Number(trimmed);
-					return Number.isFinite(parsed) ? {
+					if (!Number.isFinite(parsed)) return {
+						kind: "invalid",
+						reason: "format"
+					};
+					if (bounds?.min !== void 0 && parsed < bounds.min) return {
+						kind: "invalid",
+						reason: "tooSmall"
+					};
+					if (bounds?.max !== void 0 && parsed > bounds.max) return {
+						kind: "invalid",
+						reason: "tooLarge"
+					};
+					return {
 						kind: "set",
 						value: parsed
-					} : { kind: "invalid" };
+					};
 				}
 			};
 		}
@@ -95,16 +114,26 @@ window.__ModuleLoader__.load({
 						kind: "set",
 						value: false
 					};
-					return { kind: "invalid" };
+					return {
+						kind: "invalid",
+						reason: "format"
+					};
 				}
 			};
 		}
+		const MAX_TIMEOUT_MS = 2147483647;
 		/** The fields this page edits inside the `llm-commandcode` namespace. */
 		const SECTION_FIELDS = [
 			textField("apiBase"),
 			textField("workingDir"),
-			numberField$1("requestTimeoutMs"),
-			numberField$1("streamIdleTimeoutMs"),
+			numberField$1("requestTimeoutMs", {
+				min: 1,
+				max: MAX_TIMEOUT_MS
+			}),
+			numberField$1("streamIdleTimeoutMs", {
+				min: 1,
+				max: MAX_TIMEOUT_MS
+			}),
 			booleanField$1("filterModelsByPlan"),
 			textField("activeAccount")
 		];
@@ -134,8 +163,11 @@ window.__ModuleLoader__.load({
 			labelDrafts = /* @__PURE__ */ new Map();
 			/** Staged key drafts, by credential reference (blank = keep stored key). */
 			keyDrafts = /* @__PURE__ */ new Map();
+			/** Credential references staged for removal on the next save. */
+			keyClears = /* @__PURE__ */ new Set();
 			saving = false;
 			failed = false;
+			savedCount = 0;
 			/**
 			* @param scope - bound scope for the `llm-commandcode` namespace.
 			* @param api - credentials wire face.
@@ -206,8 +238,10 @@ window.__ModuleLoader__.load({
 						text: this.staged.get("apiKey")?.text ?? "",
 						clear: false,
 						overridden: false,
-						invalid: false
+						invalid: false,
+						invalidReason: void 0
 					},
+					apiKeyClearStaged: this.keyClears.has(this.credentialRef),
 					apiBase: this.field("apiBase"),
 					workingDir: this.field("workingDir"),
 					defaultWorkingDir: this.defaultWorkingDir,
@@ -220,7 +254,8 @@ window.__ModuleLoader__.load({
 					dirty: plan.length > 0 || this.accountsDirty(),
 					invalid: plan.some((item) => item.run === void 0),
 					saving: this.saving,
-					failed: this.failed
+					failed: this.failed,
+					savedCount: this.savedCount
 				};
 			}
 			/** Stage a new extra account (saved on the next `save()`). */
@@ -265,15 +300,37 @@ window.__ModuleLoader__.load({
 			/** Stage one extra account's key draft (blank keeps the stored key). */
 			editAccountKey(id, text) {
 				this.keyDrafts.set(id, text);
+				this.keyClears.delete(id);
 				this.failed = false;
 				this.publish();
 			}
+			/**
+			* Toggle the staged removal of one account's stored key: the next save
+			* unsets the credential so the account reports unconfigured and falls back
+			* to its other key sources. Only meaningful while a key is actually
+			* stored. `target` is `'default'` (the implicit first account) or an extra
+			* account's credential reference.
+			*/
+			toggleKeyClear(target) {
+				const ref = target === "default" ? this.credentialRef : target;
+				if (this.keyClears.has(ref)) this.keyClears.delete(ref);
+				else {
+					if (this.credentialStates.get(ref)?.configured !== true) return;
+					this.keyDrafts.delete(ref);
+					if (ref === this.credentialRef) this.staged.delete("apiKey");
+					this.keyClears.add(ref);
+				}
+				this.failed = false;
+				this.describeAll();
+				this.publish();
+			}
 			/** Stage one field's draft text. */
 			edit(field, text) {
 				this.staged.set(field, {
 					text,
 					clear: false
 				});
+				if (field === "apiKey") this.keyClears.delete(this.credentialRef);
 				this.failed = false;
 				this.publish();
 			}
@@ -322,6 +379,7 @@ window.__ModuleLoader__.load({
 				this.saving = false;
 				this.failed = !landed;
 				if (landed) {
+					this.savedCount += 1;
 					this.staged.clear();
 					this.clearAccountStaging();
 				} else this.reconcileAccountStaging();
@@ -342,6 +400,7 @@ window.__ModuleLoader__.load({
 					const storedLabel = this.storedExtras().find((extra) => extra.ref === ref)?.label;
 					if (storedLabel === void 0 || storedLabel === text.trim()) this.labelDrafts.delete(ref);
 				}
+				for (const ref of [...this.keyClears]) if (this.credentialStates.get(ref)?.configured !== true) this.keyClears.delete(ref);
 			}
 			spec(field) {
 				const spec = this.specs.get(field);
@@ -356,14 +415,16 @@ window.__ModuleLoader__.load({
 					text: spec.format(this.sectionValue(field)),
 					clear: false,
 					overridden: this.stored(field),
-					invalid: false
+					invalid: false,
+					invalidReason: void 0
 				};
 				const parsed = staged.clear ? { kind: "clear" } : spec.parse(staged.text);
 				return {
 					text: staged.text,
 					clear: staged.clear,
 					overridden: parsed.kind === "set",
-					invalid: parsed.kind === "invalid"
+					invalid: parsed.kind === "invalid",
+					invalidReason: parsed.kind === "invalid" ? parsed.reason : void 0
 				};
 			}
 			sectionValue(field) {
@@ -510,12 +571,13 @@ window.__ModuleLoader__.load({
 					keyText: this.keyDrafts.get(extra.ref) ?? "",
 					configured: this.credentialStates.get(extra.ref)?.configured ?? false,
 					writable: this.credentialStates.get(extra.ref)?.writable ?? true,
-					added: extra.added
+					added: extra.added,
+					clearStaged: this.keyClears.has(extra.ref)
 				}));
 			}
-			/** Whether any account-level staging (add/remove/label/key) exists. */
+			/** Whether any account-level staging (add/remove/label/key/clear) exists. */
 			accountsStaged() {
-				return this.addedAccounts.length > 0 || this.removedRefs.size > 0 || this.labelDrafts.size > 0 || this.keyDrafts.size > 0;
+				return this.addedAccounts.length > 0 || this.removedRefs.size > 0 || this.labelDrafts.size > 0 || this.keyDrafts.size > 0 || this.keyClears.size > 0;
 			}
 			/** Whether the staged account edits differ from the stored section. */
 			accountsDirty() {
@@ -525,6 +587,7 @@ window.__ModuleLoader__.load({
 					if (base !== void 0 && text.trim() !== "" && text !== base) return true;
 				}
 				for (const text of this.keyDrafts.values()) if (text.trim() !== "") return true;
+				for (const ref of this.keyClears) if (this.credentialStates.get(ref)?.configured === true) return true;
 				return false;
 			}
 			/** Reset every account-level staged edit. */
@@ -533,14 +596,26 @@ window.__ModuleLoader__.load({
 				this.removedRefs.clear();
 				this.labelDrafts.clear();
 				this.keyDrafts.clear();
+				this.keyClears.clear();
+			}
+			/** Unset one stored credential, then re-read the Host's credential states. */
+			async unsetKey(ref) {
+				try {
+					if (!(await this.api.credentials.unset({ ref })).result.ok) return false;
+				} catch {
+					return false;
+				}
+				await this.describeAll();
+				return this.credentialStates.get(ref)?.configured !== true;
 			}
 			/** The account-level writes a save performs (empty when nothing staged). */
 			accountPlan() {
 				if (!this.accountsDirty()) return [];
 				const runs = [];
+				for (const ref of this.keyClears) if (this.credentialStates.get(ref)?.configured === true) runs.push(() => this.unsetKey(ref));
 				for (const [ref, text] of this.keyDrafts) {
 					const value = text.trim();
-					if (value !== "" && !this.removedRefs.has(ref)) runs.push(() => this.writeKeyTo(ref, value));
+					if (value !== "" && !this.removedRefs.has(ref) && !this.keyClears.has(ref)) runs.push(() => this.writeKeyTo(ref, value));
 				}
 				runs.push(() => this.writeAccounts());
 				return runs;
@@ -726,6 +801,11 @@ window.__ModuleLoader__.load({
 			const failures = source.failures;
 			if (!Array.isArray(failures) || failures.some((entry) => typeof entry !== "string")) reject("failures");
 			const report = { failures };
+			if (source.blocked !== void 0) {
+				const blocked = source.blocked;
+				if (blocked !== "invalid-key" && blocked !== "service-unavailable" && blocked !== "network") reject("blocked");
+				report.blocked = blocked;
+			}
 			if (source.account !== void 0) {
 				const account = record(source.account, "account");
 				report.account = {
@@ -809,6 +889,21 @@ window.__ModuleLoader__.load({
 			}]
 		};
 		//#endregion
+		//#region src/client/version.ts
+		/**
+		* The plugin's own version, read from package.json at build time.
+		*
+		* The client bundle inlines the JSON import (rolldown resolves it during the
+		* tsdown build; node tests read it through tsx), so the rendered value always
+		* matches the published package version with no second constant to keep in
+		* sync. Rendered as a muted footer line on the settings page so a user can
+		* report the exact build they run.
+		*
+		* @module dsh-commandcode-provider/client/version
+		*/
+		/** The published package version (e.g. `'0.6.0'`). */
+		const PLUGIN_VERSION = "0.6.2";
+		//#endregion
 		//#region src/client/section.tsx
 		/**
 		* React component for the "Command Code" settings page (browser half).
@@ -861,11 +956,17 @@ window.__ModuleLoader__.load({
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: state.invalid ? "cc-invalid" : "cc-hint",
-						children: state.invalid ? t("invalidNumber") : hint
+						children: state.invalid ? invalidCopy(state.invalidReason, t) : hint
 					})
 				]
 			});
 		}
+		/** The per-field error copy for a staged draft's failure reason. */
+		function invalidCopy(reason, t) {
+			if (reason === "tooSmall") return t("numberTooSmall");
+			if (reason === "tooLarge") return t("numberTooLarge");
+			return t("invalidNumber");
+		}
 		/**
 		* One boolean field row rendered as a toggle. The staged text is `'true'` /
 		* `'false'` / `''` (unset → `defaultChecked`); toggling stages the string the
@@ -911,8 +1012,14 @@ window.__ModuleLoader__.load({
 				})]
 			});
 		}
-		/** The API-key control: write-only, reports configured state, never echoes the key. */
-		function SecretKeyField({ label, hint, state, disabled, configured, configuredLabel, unconfiguredLabel, onEdit }) {
+		/**
+		* The API-key control: write-only, reports configured state, never echoes the
+		* key. The input is masked by default with a Show/Hide toggle so a pasted key
+		* can be spot-checked without leaving the field, and a stored key can be
+		* staged for removal (the next save unsets it) when it is bad or unwanted.
+		*/
+		function SecretKeyField({ label, hint, state, disabled, configured, configuredLabel, unconfiguredLabel, clearStaged, showLabel, hideLabel, clearLabel, clearStagedLabel, undoClearLabel, onEdit, onToggleClear }) {
+			const [visible, setVisible] = (0, react.useState)(false);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cc-field",
 				children: [
@@ -922,19 +1029,40 @@ window.__ModuleLoader__.load({
 							className: "cc-label",
 							htmlFor: "cc-api-key",
 							children: label
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 							className: "cc-badges",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: configured ? "cc-badge" : "cc-badgeMuted",
-								children: configured ? configuredLabel : unconfiguredLabel
-							})
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: configured ? "cc-badge" : "cc-badgeMuted",
+									children: configured ? configuredLabel : unconfiguredLabel
+								}),
+								clearStaged ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-badge cc-badgeWarn",
+									children: clearStagedLabel
+								}) : null,
+								configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "cc-reset",
+									disabled,
+									onClick: onToggleClear,
+									children: clearStaged ? undoClearLabel : clearLabel
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "cc-reset",
+									disabled,
+									onClick: () => setVisible((value) => !value),
+									children: visible ? hideLabel : showLabel
+								})
+							]
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 						id: "cc-api-key",
 						className: "cc-input",
-						type: "password",
+						type: visible ? "text" : "password",
 						autoComplete: "off",
+						spellCheck: false,
 						value: state.text,
 						disabled,
 						onChange: (event) => onEdit(event.target.value)
@@ -1087,6 +1215,17 @@ window.__ModuleLoader__.load({
 						className: "cc-usageHint",
 						children: t("usageUnconfigured")
 					}) : null,
+					report.blocked !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-usageBlocked",
+						role: "alert",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "cc-usageBlockedTitle",
+							children: blockedTitle(report.blocked, t)
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "cc-usageBlockedHint",
+							children: blockedHint(report.blocked, t)
+						})]
+					}) : null,
 					report.usage !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-usageStats",
 						children: [
@@ -1152,13 +1291,13 @@ window.__ModuleLoader__.load({
 								]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-usageMetaSpacer" }),
-							report.failures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							report.failures.length > 0 && report.blocked === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								className: "cc-usagePartial",
 								title: report.failures.join("; "),
 								children: t("usagePartial")
 							}) : null
 						]
-					}) : report.failures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					}) : report.failures.length > 0 && report.blocked === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-usageMeta",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-usageMetaSpacer" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							className: "cc-usagePartial",
@@ -1169,6 +1308,18 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/** The headline copy for a report whose every endpoint failed the same way. */
+		function blockedTitle(reason, t) {
+			if (reason === "invalid-key") return t("usageKeyInvalid");
+			if (reason === "service-unavailable") return t("usageServiceUnavailable");
+			return t("usageNetworkError");
+		}
+		/** The actionable hint under a blocked report's headline. */
+		function blockedHint(reason, t) {
+			if (reason === "invalid-key") return t("usageKeyInvalidHint");
+			if (reason === "service-unavailable") return t("usageServiceUnavailableHint");
+			return t("usageNetworkHint");
+		}
 		/** The status dot on an account tab: cooling/invalid warn, everything else ok. */
 		function AccountTabDot({ entry }) {
 			const cls = entry.mark === "invalid-credential" ? "cc-tabDot cc-tabDotError" : entry.mark !== "" || entry.cooldownUntil > 0 ? "cc-tabDot cc-tabDotWarn" : "cc-tabDot cc-tabDotOk";
@@ -1285,8 +1436,9 @@ window.__ModuleLoader__.load({
 		* otherwise the only way to undo a mistaken Add would be discarding every
 		* other staged edit.
 		*/
-		function AccountRow({ account, disabled, t, onLabel, onKey, onRemove }) {
+		function AccountRow({ account, disabled, t, onLabel, onKey, onToggleClear, onRemove }) {
 			const locked = !account.writable;
+			const [keyVisible, setKeyVisible] = (0, react.useState)(false);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cc-field",
 				children: [
@@ -1307,6 +1459,31 @@ window.__ModuleLoader__.load({
 									className: account.configured ? "cc-badge" : "cc-badgeMuted",
 									children: account.configured ? t("apiKeySet") : t("apiKeyUnset")
 								}),
+								account.clearStaged ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-badge cc-badgeWarn",
+									children: t("usageKeyClearStaged")
+								}) : null,
+								account.configured && !account.clearStaged ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "cc-reset",
+									disabled,
+									onClick: onToggleClear,
+									children: t("usageKeyClear")
+								}) : null,
+								account.clearStaged ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "cc-reset",
+									disabled,
+									onClick: onToggleClear,
+									children: t("usageUndoKeyClear")
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "cc-reset",
+									disabled,
+									onClick: () => setKeyVisible((value) => !value),
+									children: keyVisible ? t("hide") : t("show")
+								}),
 								account.added ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									className: "cc-reset",
@@ -1328,8 +1505,9 @@ window.__ModuleLoader__.load({
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 						id: `cc-account-key-${account.id}`,
 						className: "cc-input",
-						type: "password",
+						type: keyVisible ? "text" : "password",
 						autoComplete: "off",
+						spellCheck: false,
 						placeholder: t("accountKey"),
 						value: account.keyText,
 						disabled: disabled || locked,
@@ -1343,7 +1521,7 @@ window.__ModuleLoader__.load({
 			});
 		}
 		/** The multi-account card: the active-account selector + extra accounts in rotation order + add button. */
-		function AccountsCard({ t, state, disabled, onAdd, onRemove, onLabel, onKey, onActive, onActiveReset }) {
+		function AccountsCard({ t, state, disabled, onAdd, onRemove, onLabel, onKey, onToggleClear, onActive, onActiveReset }) {
 			const active = state.activeAccount;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cc-card",
@@ -1427,11 +1605,27 @@ window.__ModuleLoader__.load({
 						t,
 						onLabel: (text) => onLabel(account.id, text),
 						onKey: (text) => onKey(account.id, text),
+						onToggleClear: () => onToggleClear(account.id),
 						onRemove: () => onRemove(account.id)
 					}, account.id))
 				]
 			});
 		}
+		/**
+		* Show the "Saved ✓" affordance for a short window after each accepted save.
+		* The controller only counts saves (`savedCount`); the flash timing lives
+		* here so the state machine stays timer-free.
+		*/
+		function useSavedFlash(tick) {
+			const [visible, setVisible] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				if (tick === 0) return;
+				setVisible(true);
+				const timer = setTimeout(() => setVisible(false), 2500);
+				return () => clearTimeout(timer);
+			}, [tick]);
+			return visible;
+		}
 		/** The settings page body: connection facts for the Command Code provider. */
 		function CommandCodeSettingsPage(props) {
 			const { t } = props;
@@ -1439,6 +1633,7 @@ window.__ModuleLoader__.load({
 			const usage = props.useCommandCodeUsage((snapshot) => snapshot);
 			const disabled = !state.writable;
 			const keyLocked = !state.apiKeyWritable;
+			const savedVisible = useSavedFlash(state.savedCount);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: "cc-section",
 				"aria-label": t("title"),
@@ -1474,6 +1669,7 @@ window.__ModuleLoader__.load({
 						onRemove: props.removeAccount,
 						onLabel: props.editAccountLabel,
 						onKey: props.editAccountKey,
+						onToggleClear: (id) => props.toggleKeyClear(id),
 						onActive: (text) => props.edit("activeAccount", text),
 						onActiveReset: () => props.resetField("activeAccount")
 					}),
@@ -1488,7 +1684,14 @@ window.__ModuleLoader__.load({
 								configured: state.apiKeyConfigured,
 								configuredLabel: t("apiKeySet"),
 								unconfiguredLabel: t("apiKeyUnset"),
-								onEdit: (text) => props.edit("apiKey", text)
+								clearStaged: state.apiKeyClearStaged,
+								showLabel: t("show"),
+								hideLabel: t("hide"),
+								clearLabel: t("usageKeyClear"),
+								clearStagedLabel: t("usageKeyClearStaged"),
+								undoClearLabel: t("usageUndoKeyClear"),
+								onEdit: (text) => props.edit("apiKey", text),
+								onToggleClear: () => props.toggleKeyClear("default")
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
 								id: "cc-api-base",
@@ -1554,6 +1757,11 @@ window.__ModuleLoader__.load({
 								role: "status",
 								children: t("saveFailed")
 							}) : null,
+							savedVisible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "cc-saved",
+								role: "status",
+								children: t("saved")
+							}) : null,
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 								variant: "ghost",
 								size: "sm",
@@ -1569,6 +1777,10 @@ window.__ModuleLoader__.load({
 								children: t(state.saving ? "saving" : "save")
 							})
 						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "cc-version",
+						children: ["Command Code Provider v", PLUGIN_VERSION]
 					})
 				]
 			});
@@ -1608,13 +1820,18 @@ window.__ModuleLoader__.load({
 			overridden: "已覆盖",
 			reset: "重置",
 			invalidNumber: "无效数字",
+			numberTooSmall: "不能小于 1（毫秒）",
+			numberTooLarge: "超出允许上限（2147483647 毫秒）",
 			readOnly: "当前配置为只读。",
 			unsaved: "未保存",
 			save: "保存",
 			saving: "保存中",
+			saved: "已保存 ✓",
 			saveFailed: "保存失败，请重试。",
 			discard: "放弃",
 			cancel: "取消",
+			show: "显示",
+			hide: "隐藏",
 			usageTitle: "账户用量",
 			usageRefresh: "刷新",
 			usageRefreshing: "刷新中…",
@@ -1636,6 +1853,15 @@ window.__ModuleLoader__.load({
 			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: "当前使用",
@@ -1676,13 +1902,18 @@ window.__ModuleLoader__.load({
 			overridden: "Overridden",
 			reset: "Reset",
 			invalidNumber: "Invalid number",
+			numberTooSmall: "Must be at least 1 (ms)",
+			numberTooLarge: "Above the allowed maximum (2147483647 ms)",
 			readOnly: "Settings are read-only.",
 			unsaved: "Unsaved",
 			save: "Save",
 			saving: "Saving",
+			saved: "Saved ✓",
 			saveFailed: "Save failed, please retry.",
 			discard: "Discard",
 			cancel: "Cancel",
+			show: "Show",
+			hide: "Hide",
 			usageTitle: "Account usage",
 			usageRefresh: "Refresh",
 			usageRefreshing: "Refreshing…",
@@ -1704,6 +1935,15 @@ window.__ModuleLoader__.load({
 			usageExceeded: "Exceeded",
 			usageReset: "Resets",
 			usagePartial: "Some endpoint data unavailable",
+			usageKeyClear: "Clear stored key",
+			usageKeyClearStaged: "Will be cleared on save",
+			usageUndoKeyClear: "Undo clear",
+			usageKeyInvalid: "API key invalid or expired",
+			usageKeyInvalidHint: "The server rejects every request (401). Check the key configured for this account, or generate a new one in the commandcode.ai console.",
+			usageServiceUnavailable: "The Command Code service is temporarily unavailable",
+			usageServiceUnavailableHint: "The server returned errors (5xx); try Refresh again later.",
+			usageNetworkError: "Could not reach the Command Code service",
+			usageNetworkHint: "No request reached the server. Check your network connection or the API base setting.",
 			usageUpdated: "Updated",
 			usagePeriodEnd: "Period ends",
 			usageActive: "Active",
@@ -1783,6 +2023,12 @@ window.__ModuleLoader__.load({
 .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}
+.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() {
@@ -1868,7 +2114,8 @@ window.__ModuleLoader__.load({
 				addAccount: () => controller.addAccount(),
 				removeAccount: (id) => controller.removeAccount(id),
 				editAccountLabel: (id, text) => controller.editAccountLabel(id, text),
-				editAccountKey: (id, text) => controller.editAccountKey(id, text)
+				editAccountKey: (id, text) => controller.editAccountKey(id, text),
+				toggleKeyClear: (id) => controller.toggleKeyClear(id)
 			});
 			ctx.slots.inject("settings.section", () => ctx.slots.register({
 				name: "settings.section",