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

package/lib/client.js

@@ -105,7 +105,8 @@ window.__ModuleLoader__.load({
 			textField("workingDir"),
 			numberField$1("requestTimeoutMs"),
 			numberField$1("streamIdleTimeoutMs"),
-			booleanField$1("filterModelsByPlan")
+			booleanField$1("filterModelsByPlan"),
+			textField("activeAccount")
 		];
 		/**
 		* Controller bridging the `llm-commandcode` scope and the credentials domain
@@ -121,11 +122,18 @@ window.__ModuleLoader__.load({
 			disposers = [];
 			disposed = false;
 			defaultWorkingDir;
-			credential = {
-				ref: DEFAULT_API_KEY_REF,
-				configured: false,
-				writable: true
-			};
+			/** The credential reference the default account resolves. */
+			credentialRef = DEFAULT_API_KEY_REF;
+			/** Host-reported configured/writable state per credential reference. */
+			credentialStates = /* @__PURE__ */ new Map();
+			/** Staged account additions (not yet saved). */
+			addedAccounts = [];
+			/** Staged removals of stored extra accounts, by credential reference. */
+			removedRefs = /* @__PURE__ */ new Set();
+			/** Staged label drafts, by credential reference. */
+			labelDrafts = /* @__PURE__ */ new Map();
+			/** Staged key drafts, by credential reference (blank = keep stored key). */
+			keyDrafts = /* @__PURE__ */ new Map();
 			saving = false;
 			failed = false;
 			/**
@@ -139,6 +147,7 @@ window.__ModuleLoader__.load({
 				this.api = api;
 				this.disposers.push(scope.subscribe(() => {
 					this.recomputeCredentialRef();
+					this.describeAll();
 					this.publish();
 				}));
 				if (hostDescription !== void 0) {
@@ -153,7 +162,7 @@ window.__ModuleLoader__.load({
 					}));
 				}
 				this.recomputeCredentialRef();
-				this.readCredential();
+				this.describeAll();
 			}
 			/** Release every subscription held on external sources. Idempotent. */
 			dispose() {
@@ -172,13 +181,9 @@ window.__ModuleLoader__.load({
 			recomputeCredentialRef() {
 				const snapshot = this.scope.getSnapshot();
 				const named = typeof snapshot.value?.apiKeyEnv === "string" && snapshot.value.apiKeyEnv.length > 0 ? snapshot.value.apiKeyEnv : DEFAULT_API_KEY_REF;
-				if (named === this.credential.ref) return;
-				this.credential = {
-					ref: named,
-					configured: false,
-					writable: true
-				};
-				this.readCredential();
+				if (named === this.credentialRef) return;
+				this.credentialRef = named;
+				this.credentialStates.delete(named);
 			}
 			/** Subscribe to state projections. @returns the disposer. */
 			subscribe(listener) {
@@ -189,11 +194,14 @@ window.__ModuleLoader__.load({
 			state() {
 				const snapshot = this.scope.getSnapshot();
 				const plan = this.plan();
+				const credential = this.credentialStates.get(this.credentialRef);
+				const accounts = this.effectiveAccounts();
 				return {
 					available: snapshot.status === "ready",
 					writable: snapshot.writable,
-					apiKeyConfigured: this.credential.configured,
-					apiKeyWritable: this.credential.writable,
+					apiKeyConfigured: credential?.configured ?? false,
+					anyAccountConfigured: (credential?.configured ?? false) || accounts.some((account) => account.configured),
+					apiKeyWritable: credential?.writable ?? true,
 					apiKey: {
 						text: this.staged.get("apiKey")?.text ?? "",
 						clear: false,
@@ -206,12 +214,60 @@ window.__ModuleLoader__.load({
 					requestTimeoutMs: this.field("requestTimeoutMs"),
 					streamIdleTimeoutMs: this.field("streamIdleTimeoutMs"),
 					filterModelsByPlan: this.field("filterModelsByPlan"),
-					dirty: plan.length > 0,
+					activeAccount: this.field("activeAccount"),
+					accounts,
+					accountsRemoving: [...this.removedRefs],
+					dirty: plan.length > 0 || this.accountsDirty(),
 					invalid: plan.some((item) => item.run === void 0),
 					saving: this.saving,
 					failed: this.failed
 				};
 			}
+			/** Stage a new extra account (saved on the next `save()`). */
+			addAccount() {
+				const used = /* @__PURE__ */ new Set([
+					this.credentialRef,
+					...this.storedExtras().map((extra) => extra.ref),
+					...this.addedAccounts.map((extra) => extra.ref)
+				]);
+				let n = 2;
+				while (used.has(`COMMANDCODE_API_KEY_${n}`)) n += 1;
+				const index = this.storedExtras().length + this.addedAccounts.length + 2;
+				this.addedAccounts.push({
+					label: `Account ${index}`,
+					ref: `COMMANDCODE_API_KEY_${n}`
+				});
+				this.failed = false;
+				this.describeAll();
+				this.publish();
+			}
+			/** Stage one extra account's removal (or drop an unsaved addition). */
+			removeAccount(id) {
+				const addedIndex = this.addedAccounts.findIndex((extra) => extra.ref === id);
+				if (addedIndex >= 0) this.addedAccounts.splice(addedIndex, 1);
+				else this.removedRefs.add(id);
+				this.labelDrafts.delete(id);
+				this.keyDrafts.delete(id);
+				const stagedActive = this.staged.get("activeAccount");
+				if ((stagedActive !== void 0 ? stagedActive.clear ? "" : stagedActive.text : typeof this.sectionValue("activeAccount") === "string" ? this.sectionValue("activeAccount") : "") === id) this.staged.set("activeAccount", {
+					text: "",
+					clear: true
+				});
+				this.failed = false;
+				this.publish();
+			}
+			/** Stage one extra account's label draft. */
+			editAccountLabel(id, text) {
+				this.labelDrafts.set(id, text);
+				this.failed = false;
+				this.publish();
+			}
+			/** Stage one extra account's key draft (blank keeps the stored key). */
+			editAccountKey(id, text) {
+				this.keyDrafts.set(id, text);
+				this.failed = false;
+				this.publish();
+			}
 			/** Stage one field's draft text. */
 			edit(field, text) {
 				this.staged.set(field, {
@@ -239,15 +295,17 @@ window.__ModuleLoader__.load({
 			}
 			/** Discard every staged edit. */
 			discard() {
-				if (this.staged.size === 0 && !this.failed) return;
+				if (this.staged.size === 0 && !this.accountsStaged() && !this.failed) return;
 				this.staged.clear();
+				this.clearAccountStaging();
 				this.failed = false;
 				this.publish();
 			}
 			/** Write every staged edit, then re-read the Host's accepted state. */
 			async save() {
 				const plan = this.plan();
-				if (plan.length === 0 || this.saving) return;
+				const accountRuns = this.accountPlan();
+				if (plan.length === 0 && accountRuns.length === 0 || this.saving) return;
 				const runs = [];
 				for (const item of plan) {
 					if (item.run === void 0) return;
@@ -257,12 +315,34 @@ window.__ModuleLoader__.load({
 				this.failed = false;
 				this.publish();
 				let landed = true;
-				for (const run of runs) landed = await run() && landed;
+				for (const run of [...runs, ...accountRuns]) if (!await run()) {
+					landed = false;
+					break;
+				}
 				this.saving = false;
 				this.failed = !landed;
-				if (landed) this.staged.clear();
+				if (landed) {
+					this.staged.clear();
+					this.clearAccountStaging();
+				} else this.reconcileAccountStaging();
 				this.publish();
 			}
+			/**
+			* Drop account staging the stored section already reflects: additions whose
+			* ref is now stored, removals whose ref is gone, and label drafts matching
+			* the stored label. Key drafts are kept — a landed key write is idempotent
+			* on retry, and the draft carries the user's intent when it was the
+			* accounts write that failed.
+			*/
+			reconcileAccountStaging() {
+				const stored = new Set(this.storedExtras().map((extra) => extra.ref));
+				this.addedAccounts = this.addedAccounts.filter((extra) => !stored.has(extra.ref));
+				for (const ref of [...this.removedRefs]) if (!stored.has(ref)) this.removedRefs.delete(ref);
+				for (const [ref, text] of [...this.labelDrafts]) {
+					const storedLabel = this.storedExtras().find((extra) => extra.ref === ref)?.label;
+					if (storedLabel === void 0 || storedLabel === text.trim()) this.labelDrafts.delete(ref);
+				}
+			}
 			spec(field) {
 				const spec = this.specs.get(field);
 				if (spec === void 0) throw new Error(`commandcode settings page has no field ${field}`);
@@ -349,38 +429,136 @@ window.__ModuleLoader__.load({
 				await this.scope.set(field, value);
 				return this.userLayer()?.[field] === value;
 			}
-			/** Write the staged key, then re-read whether the Host now holds one. */
+			/** Write the staged default key, then re-read whether the Host holds it. */
 			async writeKey(value) {
+				return this.writeKeyTo(this.credentialRef, value);
+			}
+			/** Write one account's key, then re-read the Host's credential states. */
+			async writeKeyTo(ref, value) {
 				try {
 					if (!(await this.api.credentials.set({
-						ref: this.credential.ref,
+						ref,
 						value
 					})).result.ok) return false;
 				} catch {
 					return false;
 				}
-				await this.readCredential();
-				return this.credential.configured;
+				await this.describeAll();
+				return this.credentialStates.get(ref)?.configured ?? false;
 			}
-			/** Ask the credentials domain about the reference this page writes. */
-			async readCredential() {
-				const ref = this.credential.ref;
+			/** Ask the credentials domain about every reference this page writes. */
+			async describeAll() {
+				const refs = [
+					this.credentialRef,
+					...this.storedExtras().map((extra) => extra.ref),
+					...this.addedAccounts.map((extra) => extra.ref)
+				];
 				let response;
 				try {
-					response = await this.api.credentials.describe({ refs: [ref] });
+					response = await this.api.credentials.describe({ refs });
 				} catch {
 					return;
 				}
 				if (!response.result.ok) return;
-				const view = response.result.value.credentials[ref];
-				const next = {
-					ref,
-					configured: view?.configured ?? false,
-					writable: view?.writable ?? true
-				};
-				if (next.configured === this.credential.configured && next.writable === this.credential.writable) return;
-				this.credential = next;
-				this.publish();
+				let changed = false;
+				for (const ref of refs) {
+					const view = response.result.value.credentials[ref];
+					const next = {
+						configured: view?.configured ?? false,
+						writable: view?.writable ?? true
+					};
+					const prev = this.credentialStates.get(ref);
+					if (prev === void 0 || prev.configured !== next.configured || prev.writable !== next.writable) {
+						this.credentialStates.set(ref, next);
+						changed = true;
+					}
+				}
+				if (changed) this.publish();
+			}
+			/** The stored extra accounts from the settings section (`accounts`). */
+			storedExtras() {
+				const raw = this.scope.getSnapshot().value?.accounts;
+				if (!Array.isArray(raw)) return [];
+				const out = [];
+				for (const entry of raw) {
+					if (typeof entry !== "object" || entry === null || Array.isArray(entry)) continue;
+					const record = entry;
+					const ref = record.apiKeyEnv;
+					if (typeof ref !== "string" || ref === "") continue;
+					const label = record.label;
+					out.push({
+						label: typeof label === "string" && label !== "" ? label : ref,
+						ref
+					});
+				}
+				return out;
+			}
+			/** Every extra account row: stored (minus staged removals) + staged adds. */
+			effectiveAccounts() {
+				const stored = this.storedExtras().filter((extra) => !this.removedRefs.has(extra.ref)).map((extra) => ({
+					...extra,
+					added: false
+				}));
+				const added = this.addedAccounts.map((extra) => ({
+					...extra,
+					added: true
+				}));
+				return [...stored, ...added].map((extra) => ({
+					id: extra.ref,
+					ref: extra.ref,
+					label: this.labelDrafts.get(extra.ref) ?? extra.label,
+					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
+				}));
+			}
+			/** Whether any account-level staging (add/remove/label/key) exists. */
+			accountsStaged() {
+				return this.addedAccounts.length > 0 || this.removedRefs.size > 0 || this.labelDrafts.size > 0 || this.keyDrafts.size > 0;
+			}
+			/** Whether the staged account edits differ from the stored section. */
+			accountsDirty() {
+				if (this.addedAccounts.length > 0 || this.removedRefs.size > 0) return true;
+				for (const [ref, text] of this.labelDrafts) {
+					const base = this.storedExtras().find((extra) => extra.ref === ref)?.label;
+					if (base !== void 0 && text.trim() !== "" && text !== base) return true;
+				}
+				for (const text of this.keyDrafts.values()) if (text.trim() !== "") return true;
+				return false;
+			}
+			/** Reset every account-level staged edit. */
+			clearAccountStaging() {
+				this.addedAccounts = [];
+				this.removedRefs.clear();
+				this.labelDrafts.clear();
+				this.keyDrafts.clear();
+			}
+			/** The account-level writes a save performs (empty when nothing staged). */
+			accountPlan() {
+				if (!this.accountsDirty()) return [];
+				const runs = [];
+				for (const [ref, text] of this.keyDrafts) {
+					const value = text.trim();
+					if (value !== "" && !this.removedRefs.has(ref)) runs.push(() => this.writeKeyTo(ref, value));
+				}
+				runs.push(() => this.writeAccounts());
+				return runs;
+			}
+			/** Persist the staged accounts list into the settings section. */
+			async writeAccounts() {
+				const base = [...this.storedExtras().filter((extra) => !this.removedRefs.has(extra.ref)), ...this.addedAccounts];
+				const seen = /* @__PURE__ */ new Set();
+				const list = base.filter((extra) => !seen.has(extra.ref) && (seen.add(extra.ref), true)).map((extra) => {
+					const draft = this.labelDrafts.get(extra.ref)?.trim();
+					return {
+						label: draft !== void 0 && draft !== "" ? draft : extra.label,
+						apiKeyEnv: extra.ref
+					};
+				});
+				await this.scope.set("accounts", list);
+				const after = this.storedExtras();
+				return after.length === list.length && list.every((item, index) => after[index]?.ref === item.apiKeyEnv);
 			}
 			publish() {
 				if (this.disposed) return;
@@ -594,6 +772,25 @@ window.__ModuleLoader__.load({
 			}
 			return report;
 		}
+		/** Parse one untrusted boundary value into a {@link CommandCodeAccountUsage}. */
+		function parseAccountUsage(value) {
+			const source = record(value, "account");
+			return {
+				id: stringField(source, "id", "account.id"),
+				label: stringField(source, "label", "account.label"),
+				configured: booleanField(source, "configured", "account.configured"),
+				active: booleanField(source, "active", "account.active"),
+				mark: stringField(source, "mark", "account.mark"),
+				cooldownUntil: numberField(source, "cooldownUntil", "account.cooldownUntil"),
+				report: parseUsageReport(source.report)
+			};
+		}
+		/** Parse the wire result into a {@link CommandCodeAccountsReport}. */
+		function parseAccountsReport(value) {
+			const accounts = record(value, "result").accounts;
+			if (!Array.isArray(accounts)) reject("accounts");
+			return { accounts: accounts.map(parseAccountUsage) };
+		}
 		/** The Client-face contribution mounted on `ctx.remote`. */
 		const USAGE_REMOTE_CONTRIBUTION = {
 			package: USAGE_REMOTE_PACKAGE,
@@ -606,8 +803,8 @@ window.__ModuleLoader__.load({
 				parameters: [],
 				result: {
 					mode: "strict",
-					typeSymbol: `${USAGE_REMOTE_PACKAGE}#CommandCodeUsageReport`,
-					schema: { parse: parseUsageReport }
+					typeSymbol: `${USAGE_REMOTE_PACKAGE}#CommandCodeAccountsReport`,
+					schema: { parse: parseAccountsReport }
 				}
 			}]
 		};
@@ -815,38 +1012,55 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/** One account's rotation state as a short badge next to its label. */
+		function AccountMark({ entry, t }) {
+			if (entry.active) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cc-usagePlan",
+				children: t("usageActive")
+			});
+			if (entry.mark === "invalid-credential") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cc-usagePlanStatus",
+				children: t("usageInvalidKey")
+			});
+			if (entry.cooldownUntil > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "cc-usagePlanStatus",
+				children: [
+					t("usageCooldown"),
+					" ",
+					formatResetAt(entry.cooldownUntil)
+				]
+			});
+			if (entry.mark === "rate-limit") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cc-usagePlanStatus",
+				children: t("usageCooldown")
+			});
+			return null;
+		}
 		/**
-		* The account-usage card: the `/commandcode` dashboard's facts (account,
-		* totals, credits, window limits) rendered as a native settings card. Data
-		* arrives through the `commandcode/report` Remote; the API key never leaves
-		* the Host.
+		* One pool account's facts (identity, totals, credits, window limits)
+		* rendered inside the account-usage card.
 		*/
-		function UsageCard({ t, usage, apiKeyConfigured, onRefresh }) {
-			(0, react.useEffect)(() => {
-				if (apiKeyConfigured && usage.status === "idle") onRefresh();
-			}, [
-				apiKeyConfigured,
-				usage.status,
-				onRefresh
-			]);
-			const loading = usage.status === "loading";
-			const report = usage.report;
-			const account = report?.account;
+		function AccountReport({ entry, t, onRemove }) {
+			const report = entry.report;
+			const account = report.account;
 			const accountName = account === void 0 ? "" : account.userName || account.name;
-			const credits = report?.credits;
-			const plan = report?.plan;
+			const credits = report.credits;
+			const plan = report.plan;
 			const planName = plan?.name ?? "";
 			const planStatus = plan !== void 0 && plan.status !== "" && plan.status !== "active" ? plan.status : "";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cc-usageCard",
-				"aria-label": t("usageTitle"),
+				className: "cc-accountReport",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-usageHead",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
 								className: "cc-usageTitle",
-								children: t("usageTitle")
+								children: entry.label
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountMark, {
+								entry,
+								t
 							}),
 							accountName !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "cc-usageAccount",
@@ -860,29 +1074,20 @@ window.__ModuleLoader__.load({
 								className: "cc-usagePlanStatus",
 								children: planStatus
 							}) : null,
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-usageMetaSpacer" }),
+							onRemove !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: "cc-usageRefresh",
-								disabled: loading || !apiKeyConfigured,
-								onClick: onRefresh,
-								children: loading ? t("usageRefreshing") : t("usageRefresh")
-							})
+								onClick: onRemove,
+								children: t("accountRemove")
+							}) : null
 						]
 					}),
-					!apiKeyConfigured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					!entry.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "cc-usageHint",
-						children: t("usageNoKey")
+						children: t("usageUnconfigured")
 					}) : null,
-					apiKeyConfigured && report === void 0 && loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-usageHint",
-						children: t("usageLoading")
-					}) : null,
-					usage.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-usageError",
-						role: "status",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [t("usageError"), usage.error !== void 0 && usage.error !== "" ? ` — ${usage.error}` : ""] })
-					}) : null,
-					report?.usage !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					report.usage !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-usageStats",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
@@ -935,25 +1140,17 @@ window.__ModuleLoader__.load({
 							t
 						})]
 					}) : null,
-					report !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					plan !== void 0 && plan.currentPeriodEnd > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-usageMeta",
 						children: [
-							plan !== void 0 && plan.currentPeriodEnd > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 								className: "cc-usageUpdated",
 								children: [
 									t("usagePeriodEnd"),
 									" ",
 									new Date(plan.currentPeriodEnd).toLocaleDateString()
 								]
-							}) : null,
-							usage.fetchedAt !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-								className: "cc-usageUpdated",
-								children: [
-									t("usageUpdated"),
-									" ",
-									new Date(usage.fetchedAt).toLocaleTimeString()
-								]
-							}) : null,
+							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-usageMetaSpacer" }),
 							report.failures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								className: "cc-usagePartial",
@@ -961,10 +1158,280 @@ window.__ModuleLoader__.load({
 								children: t("usagePartial")
 							}) : null
 						]
+					}) : report.failures.length > 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",
+							title: report.failures.join("; "),
+							children: t("usagePartial")
+						})]
 					}) : null
 				]
 			});
 		}
+		/** 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";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cls });
+		}
+		/**
+		* The account-usage card: the `/commandcode` dashboard's facts rendered as
+		* a native settings card. With several accounts the card is a carousel — a
+		* tab strip (label + status dot) switches between accounts so the page stays
+		* short; each account's report carries its own remove affordance (the
+		* default account is not removable). Accounts staged for removal in the
+		* 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 }) {
+			(0, react.useEffect)(() => {
+				if (apiKeyConfigured && usage.status === "idle") onRefresh();
+			}, [
+				apiKeyConfigured,
+				usage.status,
+				onRefresh
+			]);
+			const loading = usage.status === "loading";
+			const report = usage.report;
+			const [locallyRemoved, setLocallyRemoved] = (0, react.useState)([]);
+			(0, react.useEffect)(() => {
+				setLocallyRemoved([]);
+			}, [usage.fetchedAt]);
+			const hidden = /* @__PURE__ */ new Set([...removingIds, ...locallyRemoved]);
+			const seenIds = /* @__PURE__ */ new Set();
+			const entries = (report?.accounts ?? []).filter((entry) => {
+				if (hidden.has(entry.id)) return false;
+				if (seenIds.has(entry.id)) return false;
+				seenIds.add(entry.id);
+				return true;
+			});
+			const [selectedId, setSelectedId] = (0, react.useState)(void 0);
+			const selected = entries.find((entry) => entry.id === selectedId) ?? entries.find((entry) => entry.active) ?? entries[0];
+			const removeSelected = canManage && selected !== void 0 && removableIds.includes(selected.id) ? () => {
+				const id = selected.id;
+				setLocallyRemoved((prev) => [...prev, id]);
+				onRemoveAccount(id);
+			} : void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-usageCard",
+				"aria-label": t("usageTitle"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-usageHead",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "cc-usageTitle",
+								children: t("usageTitle")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-usageMetaSpacer" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-usageRefresh",
+								disabled: loading || !apiKeyConfigured,
+								onClick: onRefresh,
+								children: loading ? t("usageRefreshing") : t("usageRefresh")
+							})
+						]
+					}),
+					!apiKeyConfigured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-usageHint",
+						children: t("usageNoKey")
+					}) : null,
+					apiKeyConfigured && report === void 0 && loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-usageHint",
+						children: t("usageLoading")
+					}) : null,
+					usage.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-usageError",
+						role: "status",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [t("usageError"), usage.error !== void 0 && usage.error !== "" ? ` — ${usage.error}` : ""] })
+					}) : null,
+					entries.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cc-tabs",
+						role: "tablist",
+						"aria-label": t("accountsTitle"),
+						children: entries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							role: "tab",
+							"aria-selected": selected?.id === entry.id,
+							className: selected?.id === entry.id ? "cc-tab cc-tabActive" : "cc-tab",
+							onClick: () => setSelectedId(entry.id),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountTabDot, { entry }), entry.label]
+						}, entry.id))
+					}) : null,
+					selected !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountReport, {
+						entry: selected,
+						t,
+						onRemove: removeSelected
+					}, selected.id) : null,
+					report !== void 0 && usage.fetchedAt !== 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.jsxs)("p", {
+							className: "cc-usageUpdated",
+							children: [
+								t("usageUpdated"),
+								" ",
+								new Date(usage.fetchedAt).toLocaleTimeString()
+							]
+						})]
+					}) : null
+				]
+			});
+		}
+		/**
+		* One extra account row: label, key, configured badge. Saved accounts are
+		* removed from the usage card above; a NOT-YET-SAVED addition never appears
+		* there (the usage report is Host-side), so it keeps its own remove button —
+		* otherwise the only way to undo a mistaken Add would be discarding every
+		* other staged edit.
+		*/
+		function AccountRow({ account, disabled, t, onLabel, onKey, onRemove }) {
+			const locked = !account.writable;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-field",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-fieldHead",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+							className: "cc-label",
+							htmlFor: `cc-account-label-${account.id}`,
+							children: t("accountLabel")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "cc-badges",
+							children: [
+								account.added ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-badge",
+									children: t("unsaved")
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: account.configured ? "cc-badge" : "cc-badgeMuted",
+									children: account.configured ? t("apiKeySet") : t("apiKeyUnset")
+								}),
+								account.added ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "cc-reset",
+									disabled,
+									onClick: onRemove,
+									children: t("accountRemove")
+								}) : null
+							]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						id: `cc-account-label-${account.id}`,
+						className: "cc-input",
+						type: "text",
+						value: account.label,
+						disabled,
+						onChange: (event) => onLabel(event.target.value)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						id: `cc-account-key-${account.id}`,
+						className: "cc-input",
+						type: "password",
+						autoComplete: "off",
+						placeholder: t("accountKey"),
+						value: account.keyText,
+						disabled: disabled || locked,
+						onChange: (event) => onKey(event.target.value)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-hint",
+						children: locked ? t("apiKeyLocked") : t("accountKeyHint")
+					})
+				]
+			});
+		}
+		/** 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 }) {
+			const active = state.activeAccount;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-card",
+				"aria-label": t("accountsTitle"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-field",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "cc-fieldHead",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+								className: "cc-label",
+								children: t("accountsTitle")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-badges",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "cc-reset",
+									disabled,
+									onClick: onAdd,
+									children: t("accountAdd")
+								})
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "cc-hint",
+							children: t("accountsHint")
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-field",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "cc-fieldHead",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+									className: "cc-label",
+									htmlFor: "cc-active-account",
+									children: t("activeAccount")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "cc-badges",
+									children: [active.overridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "cc-badge",
+										children: t("overridden")
+									}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "cc-reset",
+										disabled,
+										onClick: onActiveReset,
+										children: t("reset")
+									})]
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+								id: "cc-active-account",
+								className: "cc-input",
+								value: active.text,
+								disabled,
+								onChange: (event) => onActive(event.target.value),
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "",
+										children: t("activeAccountAuto")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "default",
+										children: t("accountDefault")
+									}),
+									state.accounts.filter((account) => !account.added).map((account) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: account.ref,
+										children: account.label
+									}, account.id))
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "cc-hint",
+								children: t("activeAccountHint")
+							})
+						]
+					}),
+					state.accounts.map((account) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountRow, {
+						account,
+						disabled,
+						t,
+						onLabel: (text) => onLabel(account.id, text),
+						onKey: (text) => onKey(account.id, text),
+						onRemove: () => onRemove(account.id)
+					}, account.id))
+				]
+			});
+		}
 		/** The settings page body: connection facts for the Command Code provider. */
 		function CommandCodeSettingsPage(props) {
 			const { t } = props;
@@ -992,8 +1459,23 @@ window.__ModuleLoader__.load({
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageCard, {
 						t,
 						usage,
-						apiKeyConfigured: state.apiKeyConfigured,
-						onRefresh: props.refreshUsage
+						apiKeyConfigured: state.anyAccountConfigured,
+						removingIds: state.accountsRemoving,
+						removableIds: state.accounts.map((account) => account.id),
+						canManage: state.writable,
+						onRefresh: props.refreshUsage,
+						onRemoveAccount: props.removeAccount
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountsCard, {
+						t,
+						state,
+						disabled,
+						onAdd: props.addAccount,
+						onRemove: props.removeAccount,
+						onLabel: props.editAccountLabel,
+						onKey: props.editAccountKey,
+						onActive: (text) => props.edit("activeAccount", text),
+						onActiveReset: () => props.resetField("activeAccount")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-card",
@@ -1112,6 +1594,17 @@ window.__ModuleLoader__.load({
 			streamIdleTimeoutMsHint: "生成流停滞多久视为断连；默认 300000（长思考模型可静默数分钟，默认值刻意放宽）。",
 			filterModelsByPlan: "隐藏套餐外模型",
 			filterModelsByPlanHint: "开启后，模型选择器只列出当前套餐可用的模型；账户持有按需余额时会显示全部。",
+			accountsTitle: "多账户轮换",
+			accountsHint: "当前账户达到用量限额（429）或密钥失效（401）时，请求自动切换到下一个账户；全部耗尽时会提示最早的重置时间。",
+			accountAdd: "添加账户",
+			accountRemove: "移除",
+			accountLabel: "账户备注名",
+			accountKey: "API 密钥",
+			accountKeyHint: "该账户的 API 密钥。留空保存不会覆盖已存储的密钥。",
+			accountDefault: "默认账户",
+			activeAccount: "当前使用账户",
+			activeAccountAuto: "自动（第一个可用账户）",
+			activeAccountHint: "手动指定优先使用的账户，保存后下次请求即生效；所选账户耗尽时仍会自动切换到其他可用账户。",
 			overridden: "已覆盖",
 			reset: "重置",
 			invalidNumber: "无效数字",
@@ -1144,7 +1637,11 @@ window.__ModuleLoader__.load({
 			usageReset: "重置于",
 			usagePartial: "部分端点数据不可用",
 			usageUpdated: "更新于",
-			usagePeriodEnd: "账期截止"
+			usagePeriodEnd: "账期截止",
+			usageActive: "当前使用",
+			usageCooldown: "限额冷却中",
+			usageInvalidKey: "密钥无效",
+			usageUnconfigured: "该账户尚未配置 API 密钥。"
 		};
 		const en = {
 			nav: "Command Code",
@@ -1165,6 +1662,17 @@ window.__ModuleLoader__.load({
 			streamIdleTimeoutMsHint: "How long a stalled stream is treated as dead; default 300000 (deliberately generous — long-thinking models can stay silent for minutes).",
 			filterModelsByPlan: "Hide out-of-plan models",
 			filterModelsByPlanHint: "When on, the model picker lists only models your subscription includes; any on-demand credit balance shows the full catalog.",
+			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)",
+			activeAccountHint: "Pin the preferred account; applies to the next request after saving. If the selected account is exhausted, requests still rotate to another usable account.",
 			overridden: "Overridden",
 			reset: "Reset",
 			invalidNumber: "Invalid number",
@@ -1197,7 +1705,11 @@ window.__ModuleLoader__.load({
 			usageReset: "Resets",
 			usagePartial: "Some endpoint data unavailable",
 			usageUpdated: "Updated",
-			usagePeriodEnd: "Period ends"
+			usagePeriodEnd: "Period ends",
+			usageActive: "Active",
+			usageCooldown: "Cooling down",
+			usageInvalidKey: "Invalid key",
+			usageUnconfigured: "No API key configured for this account yet."
 		};
 		//#endregion
 		//#region src/client/index.ts
@@ -1260,6 +1772,14 @@ window.__ModuleLoader__.load({
 .cc-usageBarFillWarn{background:var(--dsw-alias-label-error)}
 .cc-usageWindowReset{color:var(--dsw-alias-label-tertiary);margin:0;font-size:11px;line-height:1.5}
 .cc-usageMeta{align-items:center;gap:8px;display:flex}
+.cc-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}
@@ -1341,10 +1861,14 @@ window.__ModuleLoader__.load({
 				resetField: (field) => controller.resetField(field),
 				save: () => void controller.save().then(() => {
 					const settled = controller.state();
-					if (!settled.failed && settled.apiKeyConfigured) usageController.refresh();
+					if (!settled.failed && settled.anyAccountConfigured) usageController.refresh();
 				}),
 				discard: () => controller.discard(),
-				refreshUsage: () => void usageController.refresh()
+				refreshUsage: () => void usageController.refresh(),
+				addAccount: () => controller.addAccount(),
+				removeAccount: (id) => controller.removeAccount(id),
+				editAccountLabel: (id, text) => controller.editAccountLabel(id, text),
+				editAccountKey: (id, text) => controller.editAccountKey(id, text)
 			});
 			ctx.slots.inject("settings.section", () => ctx.slots.register({
 				name: "settings.section",