@mars-sea/dsh-commandcode-provider 0.11.12 → 0.11.14

package/lib/client.js

@@ -37,7 +37,6 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/settings-scope.ts
-		const MEMORY_STATUS = "unavailable";
 		/**
 		* Backoff before re-reading a directory whose FIRST read failed, in millis.
 		*
@@ -89,7 +88,6 @@ window.__ModuleLoader__.load({
 			resolveRemote;
 			timer;
 			store;
-			persistence;
 			inFlight;
 			rerun = false;
 			generation = 0;
@@ -99,15 +97,13 @@ window.__ModuleLoader__.load({
 			disposed = false;
 			/**
 			* @param resolveRemote - Reads the inject-captured `remote.settings` namespace.
-			* @param persistence - Client-selected Host persistence; non-loopback pages may stay process-local.
 			* @param timer - Retry timer seam (see {@link SETTINGS_DESCRIBE_RETRY_MS}).
 			*/
-			constructor(resolveRemote, persistence, timer = REAL_SETTINGS_TIMER) {
+			constructor(resolveRemote, timer = REAL_SETTINGS_TIMER) {
 				this.resolveRemote = resolveRemote;
 				this.timer = timer;
-				this.persistence = persistence;
 				this.store = createSnapshotStore({
-					status: persistence === "host" ? "idle" : MEMORY_STATUS,
+					status: "idle",
 					view: null,
 					error: null
 				});
@@ -118,7 +114,7 @@ window.__ModuleLoader__.load({
 			subscribe(listener) {
 				return this.store.subscribe(listener);
 			}
-			/** The cheap idempotent entry: kick a first read (a no-op on memory persistence). */
+			/** The cheap idempotent entry: kick a first read. */
 			ensure() {
 				this.load();
 			}
@@ -128,7 +124,7 @@ window.__ModuleLoader__.load({
 			* @returns settlement after this call's freshness is reflected.
 			*/
 			load() {
-				if (this.disposed || this.persistence === "memory") return Promise.resolve();
+				if (this.disposed) return Promise.resolve();
 				this.clearRetry();
 				if (this.inFlight !== void 0) {
 					this.rerun = true;
@@ -242,33 +238,29 @@ window.__ModuleLoader__.load({
 			store;
 			mirror;
 			namespace;
-			persistence;
 			tail = Promise.resolve();
 			writeGeneration = 0;
 			disposed = false;
 			unsubscribe;
 			/** Revision answered by a superseded write still ahead of the mirror. */
 			pendingRevision;
-			constructor(resolveRemote, mirror, namespace, persistence) {
+			constructor(resolveRemote, mirror, namespace) {
 				this.resolveRemote = resolveRemote;
 				this.mirror = mirror;
 				this.namespace = namespace;
-				this.persistence = persistence;
 				this.store = createSnapshotStore({
-					status: persistence === "host" ? "loading" : "unavailable",
+					status: "loading",
 					value: void 0,
 					base: void 0,
 					user: void 0,
 					revision: void 0,
 					writable: false,
-					mode: persistence
+					mode: "host"
 				});
-				if (persistence === "host") {
-					this.unsubscribe = mirror.subscribe(() => {
-						this.derive();
-					});
+				this.unsubscribe = mirror.subscribe(() => {
 					this.derive();
-				}
+				});
+				this.derive();
 			}
 			getSnapshot() {
 				return this.store.getSnapshot();
@@ -377,9 +369,9 @@ window.__ModuleLoader__.load({
 				if (sameSnapshot(candidate, current)) return;
 				this.store.set(candidate);
 			}
-			/** Queue operations one at a time; memory persistence and disposal are no-ops. */
+			/** Queue operations one at a time; disposal makes the queue inert. */
 			enqueue(operation) {
-				if (this.persistence === "memory" || this.disposed) return Promise.resolve();
+				if (this.disposed) return Promise.resolve();
 				const task = this.tail.then(async () => {
 					if (this.disposed) return;
 					await operation();
@@ -418,26 +410,22 @@ window.__ModuleLoader__.load({
 		* @returns The scope plus the refresh/dispose handles the entry wires into its fiber.
 		*/
 		function createSettingsScope(context, namespace, resolveRemote, timer = REAL_SETTINGS_TIMER) {
-			const loopback = context.remote.$host?.isLoopback === true;
-			const persistence = loopback ? "host" : "memory";
-			const mirror = new SettingsDescribeMirror(resolveRemote, persistence, timer);
-			const scope = new RemoteSettingsScope(resolveRemote, mirror, namespace, persistence);
+			const mirror = new SettingsDescribeMirror(resolveRemote, timer);
+			const scope = new RemoteSettingsScope(resolveRemote, mirror, namespace);
 			const disposers = [];
-			if (loopback) {
-				if (typeof context.remote.$on === "function") {
-					const off = context.remote.$on("settings/document-updated", () => {
-						mirror.ensure();
-					});
-					if (typeof off === "function") disposers.push(off);
-				}
-				if (typeof context.on === "function") {
-					const off = context.on("connection/reset", () => {
-						mirror.load();
-					});
-					if (typeof off === "function") disposers.push(off);
-				}
-				mirror.ensure();
+			if (typeof context.remote.$on === "function") {
+				const off = context.remote.$on("settings/document-updated", () => {
+					mirror.ensure();
+				});
+				if (typeof off === "function") disposers.push(off);
+			}
+			if (typeof context.on === "function") {
+				const off = context.on("connection/reset", () => {
+					mirror.load();
+				});
+				if (typeof off === "function") disposers.push(off);
 			}
+			mirror.ensure();
 			return {
 				getSnapshot: () => scope.getSnapshot(),
 				subscribe: (listener) => scope.subscribe(listener),
@@ -471,7 +459,10 @@ window.__ModuleLoader__.load({
 		*                  so the control only reports whether one is configured.
 		*   - API base  -> the `llm-commandcode` settings namespace (`apiBase`), same
 		*                  namespace the Models page card addresses.
-		*   - Working dir, request/stream timeouts -> the same namespace.
+		*   - Timeouts, behavior switches, model visibility -> the same namespace,
+		*                  staged and written on save.
+		*   - Accounts  -> `accounts`, `activeAccount`, `modelAccountRules` and the
+		*                  per-account credentials, committed immediately.
 		*
 		* The controller mirrors the plugin-card pattern from the harness's own
 		* settings UI: it binds the `llm-commandcode` namespace through a
@@ -539,6 +530,24 @@ window.__ModuleLoader__.load({
 				}
 			};
 		}
+		/** A field limited to fixed string choices; an empty draft clears it. */
+		function choiceField(field, choices) {
+			return {
+				field,
+				format: (value) => typeof value === "string" && choices.includes(value) ? value : "",
+				parse: (text) => {
+					const trimmed = text.trim();
+					if (trimmed === "") return { kind: "clear" };
+					return choices.includes(trimmed) ? {
+						kind: "set",
+						value: trimmed
+					} : {
+						kind: "invalid",
+						reason: "format"
+					};
+				}
+			};
+		}
 		/**
 		* A boolean field, staged as the strings `'true'`/`'false'` (an empty draft
 		* clears it). The component renders a toggle and only ever stages these two
@@ -567,10 +576,17 @@ window.__ModuleLoader__.load({
 			};
 		}
 		const MAX_TIMEOUT_MS = 2147483647;
+		/** The command guard's auto-approve levels, strictest first. */
+		const COMMAND_GUARD_LEVEL_CHOICES = [
+			"high",
+			"medium",
+			"low"
+		];
+		/** The level an unset `commandGuardLevel` reads as on the Host. */
+		const COMMAND_GUARD_DEFAULT_LEVEL_CHOICE = "medium";
 		/** The fields this page edits inside the `llm-commandcode` namespace. */
 		const SECTION_FIELDS = [
 			textField("apiBase"),
-			textField("workingDir"),
 			numberField$1("requestTimeoutMs", {
 				min: 1,
 				max: MAX_TIMEOUT_MS
@@ -587,16 +603,8 @@ window.__ModuleLoader__.load({
 			booleanField$1("webSearch"),
 			booleanField$1("showSidebarQuota"),
 			booleanField$1("commandGuard"),
-			numberField$1("commandGuardThreshold", {
-				min: .5,
-				max: 1
-			}),
-			numberField$1("commandGuardTimeoutMs", {
-				min: 200,
-				max: 1e4
-			}),
-			booleanField$1("zdr"),
-			textField("activeAccount")
+			choiceField("commandGuardLevel", COMMAND_GUARD_LEVEL_CHOICES),
+			booleanField$1("zdr")
 		];
 		/** Whether two model-id lists are equal as sets (order-insensitive). */
 		function sameModels(a, b) {
@@ -605,17 +613,47 @@ window.__ModuleLoader__.load({
 			return b.every((id) => set.has(id));
 		}
 		/**
-		* Order-sensitive content fingerprint of the stored routing rules. Stored rule
-		* ids are positional (`rule-<index>`), so equality of this fingerprint across a
-		* save is exactly the statement "no rules write landed and no row shifted".
+		* Fold routing rules into one model list per account with the runtime's
+		* first-match-wins order (`matchModelRule()` in src/accounts.ts): a model
+		* claimed by an earlier rule is ignored by every later one. Account order is
+		* first appearance, which keeps a rewrite's rule order stable.
 		*/
-		function ruleFingerprint(rules) {
-			return JSON.stringify(rules.map((rule) => [rule.models, rule.account]));
+		function accountModelMap(rules) {
+			const claimed = /* @__PURE__ */ new Set();
+			const map = /* @__PURE__ */ new Map();
+			for (const rule of rules) {
+				const list = map.get(rule.account) ?? [];
+				for (const model of rule.models) {
+					if (claimed.has(model)) continue;
+					claimed.add(model);
+					list.push(model);
+				}
+				map.set(rule.account, list);
+			}
+			return map;
+		}
+		/** Serialize a per-account model map back into `modelAccountRules`. */
+		function rulesFromMap(map) {
+			const out = [];
+			for (const [account, models] of map) if (models.length > 0) out.push({
+				models: [...models],
+				account
+			});
+			return out;
 		}
 		/**
 		* Controller bridging the `llm-commandcode` scope and the credentials domain
-		* onto the page. Public API mirrors the harness's CardForm actions, so the
-		* component stays thin.
+		* onto the page.
+		*
+		* Two write paths with different contracts:
+		* - The staged form (connection, behavior and model-visibility fields, plus
+		*   the Models-page card's default key draft) lands on `save()`.
+		* - Account management (create, rename, remove, key replacement, pinning and
+		*   per-account models) commits IMMEDIATELY and serially. A new account had to
+		*   be saved before browser sign-in could target it (the Host refuses a login
+		*   for a reference the stored `accounts` list does not name), which turned
+		*   "add an account" into edit → save → sign in; committing each operation
+		*   removes that dance and keeps unrelated staged edits out of it.
 		*/
 		var CommandCodeSettingsController = class {
 			scope;
@@ -629,34 +667,6 @@ window.__ModuleLoader__.load({
 			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();
-			/** Credential references staged for removal on the next save. */
-			keyClears = /* @__PURE__ */ new Set();
-			/** Staged model→account routing rules (not yet saved). */
-			addedRules = [];
-			/** Staged edits to stored routing rules, by stored row id. */
-			ruleDrafts = /* @__PURE__ */ new Map();
-			/**
-			* Stored routing rule rows staged for removal, by stored row id with a
-			* content snapshot. The snapshot makes reconcile content-based: stored
-			* row ids are positional (`rule-N`) and shift after any write, so an
-			* id-only check would misread a landed removal as pending (and a retry
-			* would delete the wrong row).
-			*/
-			removedRuleIds = /* @__PURE__ */ new Map();
-			/**
-			* Fingerprint of the stored routing rules when the last `save()` started;
-			* `undefined` outside a save. Lets reconcile distinguish a landed rules
-			* write from a save that failed before reaching it.
-			*/
-			rulesBeforeSave = void 0;
 			/** Staged visible-model allowlist (undefined = no draft). */
 			visibleModelsDraft = void 0;
 			/** The catalog the model editors offer (Host-side). */
@@ -665,6 +675,10 @@ window.__ModuleLoader__.load({
 			saving = false;
 			failed = false;
 			savedCount = 0;
+			/** Tail of the serial account-operation queue. */
+			accountQueue = Promise.resolve();
+			accountPending = 0;
+			accountFailed = void 0;
 			/**
 			* @param scope - bound scope for the `llm-commandcode` namespace.
 			* @param api - credentials wire face.
@@ -691,9 +705,9 @@ window.__ModuleLoader__.load({
 			}
 			/**
 			* The credential reference the section names, or the provider default. A
-			* user who renamed `apiKeyEnv` in `settings.yaml` (or the composition
-			* config) gets a page that addresses the renamed ref instead of silently
-			* writing the default — mirroring the Models page's `refFor()`.
+			* user who renamed `apiKeyEnv` in the profile Config gets a page that
+			* addresses the renamed ref instead of silently writing the default —
+			* mirroring the Models page's `refFor()`.
 			*/
 			recomputeCredentialRef() {
 				const snapshot = this.scope.getSnapshot();
@@ -713,6 +727,7 @@ window.__ModuleLoader__.load({
 				const plan = this.plan();
 				const credential = this.credentialStates.get(this.credentialRef);
 				const accounts = this.effectiveAccounts();
+				const active = this.sectionValue("activeAccount");
 				return {
 					available: snapshot.status === "ready",
 					writable: snapshot.writable,
@@ -726,9 +741,7 @@ window.__ModuleLoader__.load({
 						invalid: false,
 						invalidReason: void 0
 					},
-					apiKeyClearStaged: this.keyClears.has(this.credentialRef),
 					apiBase: this.field("apiBase"),
-					workingDir: this.field("workingDir"),
 					requestTimeoutMs: this.field("requestTimeoutMs"),
 					streamIdleTimeoutMs: this.field("streamIdleTimeoutMs"),
 					transportMaxRetries: this.field("transportMaxRetries"),
@@ -736,164 +749,31 @@ window.__ModuleLoader__.load({
 					webSearch: this.field("webSearch"),
 					showSidebarQuota: this.field("showSidebarQuota"),
 					commandGuard: this.field("commandGuard"),
-					commandGuardThreshold: this.field("commandGuardThreshold"),
-					commandGuardTimeoutMs: this.field("commandGuardTimeoutMs"),
+					commandGuardLevel: this.field("commandGuardLevel"),
 					zdr: this.field("zdr"),
 					sidebarQuota: this.sectionValue("showSidebarQuota") === true,
-					activeAccount: this.field("activeAccount"),
+					activeAccount: typeof active === "string" ? active : "",
 					accounts,
-					accountsRemoving: [...this.removedRefs],
-					rules: this.effectiveRules(),
+					accountModels: Object.fromEntries(accountModelMap(this.storedRules())),
+					accountBusy: this.accountPending > 0,
+					accountFailed: this.accountFailed,
 					visibleModels: this.effectiveVisibleModels(),
 					catalogModels: this.catalogModels,
 					catalogFailed: this.catalogFailed,
-					dirty: plan.length > 0 || this.accountsDirty() || this.rulesDirty() || this.visibleModelsDirty(),
+					dirty: plan.length > 0 || this.visibleModelsDirty(),
 					invalid: plan.some((item) => item.run === void 0),
 					saving: this.saving,
 					failed: this.failed,
 					savedCount: this.savedCount
 				};
 			}
-			/** 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(`${this.credentialRef}_${n}`)) n += 1;
-				const index = this.storedExtras().length + this.addedAccounts.length + 2;
-				this.addedAccounts.push({
-					label: `Account ${index}`,
-					ref: `${this.credentialRef}_${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.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 a new model → account routing rule (saved on the next `save()`). */
-			addRule() {
-				this.addedRules.push({
-					models: [],
-					account: "default"
-				});
-				this.failed = false;
-				this.publish();
-			}
-			/** Stage one routing rule's removal (or drop an unsaved addition). */
-			removeRule(id) {
-				const addedIndex = this.addedRules.findIndex((_, index) => `new-${index}` === id);
-				if (addedIndex >= 0) this.addedRules.splice(addedIndex, 1);
-				else {
-					const stored = this.storedRules().find((rule) => rule.id === id);
-					this.removedRuleIds.set(id, stored === void 0 ? {
-						models: [],
-						account: ""
-					} : {
-						models: [...stored.models],
-						account: stored.account
-					});
-				}
-				this.ruleDrafts.delete(id);
-				this.failed = false;
-				this.publish();
-			}
-			/** Stage one routing rule's selected model ids (multi-select). */
-			editRuleModels(id, models) {
-				const addedIndex = this.addedRules.findIndex((_, index) => `new-${index}` === id);
-				if (addedIndex >= 0) this.addedRules[addedIndex] = {
-					...this.addedRules[addedIndex],
-					models
-				};
-				else {
-					const current = this.ruleDrafts.get(id) ?? this.storedRules().find((rule) => rule.id === id) ?? {
-						models: [],
-						account: "default"
-					};
-					this.ruleDrafts.set(id, {
-						...current,
-						models
-					});
-				}
-				this.failed = false;
-				this.publish();
-			}
-			/** Stage one routing rule's target account draft. */
-			editRuleAccount(id, text) {
-				const addedIndex = this.addedRules.findIndex((_, index) => `new-${index}` === id);
-				if (addedIndex >= 0) this.addedRules[addedIndex] = {
-					...this.addedRules[addedIndex],
-					account: text
-				};
-				else {
-					const current = this.ruleDrafts.get(id) ?? this.storedRules().find((rule) => rule.id === id) ?? {
-						models: [],
-						account: "default"
-					};
-					this.ruleDrafts.set(id, {
-						...current,
-						account: text
-					});
-				}
-				this.failed = false;
-				this.publish();
-			}
 			/** Stage one field's draft text. */
 			edit(field, text) {
+				if (field !== "apiKey") this.spec(field);
 				this.staged.set(field, {
 					text,
 					clear: false
 				});
-				if (field === "apiKey") this.keyClears.delete(this.credentialRef);
 				this.failed = false;
 				this.publish();
 			}
@@ -915,11 +795,9 @@ window.__ModuleLoader__.load({
 			}
 			/** Discard every staged edit. */
 			discard() {
-				if (this.staged.size === 0 && !this.accountsStaged() && !this.rulesStaged() && !this.visibleModelsStaged() && !this.failed) return;
+				if (this.staged.size === 0 && this.visibleModelsDraft === void 0 && !this.failed) return;
 				this.staged.clear();
-				this.clearAccountStaging();
-				this.clearRuleStaging();
-				this.clearVisibleModelsStaging();
+				this.visibleModelsDraft = void 0;
 				this.failed = false;
 				this.publish();
 			}
@@ -934,10 +812,8 @@ window.__ModuleLoader__.load({
 			/** Write every staged edit, then re-read the Host's accepted state. */
 			async save() {
 				const plan = this.plan();
-				const accountRuns = this.accountPlan();
-				const ruleRuns = this.rulesPlan();
 				const visibleRuns = this.visibleModelsPlan();
-				if (plan.length === 0 && accountRuns.length === 0 && ruleRuns.length === 0 && visibleRuns.length === 0 || this.saving) return;
+				if (plan.length === 0 && visibleRuns.length === 0 || this.saving) return;
 				const runs = [];
 				for (const item of plan) {
 					if (item.run === void 0) return;
@@ -945,15 +821,9 @@ window.__ModuleLoader__.load({
 				}
 				this.saving = true;
 				this.failed = false;
-				this.rulesBeforeSave = ruleFingerprint(this.storedRules());
 				this.publish();
 				let landed = true;
-				for (const run of [
-					...runs,
-					...accountRuns,
-					...ruleRuns,
-					...visibleRuns
-				]) {
+				for (const run of [...runs, ...visibleRuns]) {
 					let ok = false;
 					try {
 						ok = await run();
@@ -970,32 +840,148 @@ window.__ModuleLoader__.load({
 				if (landed) {
 					this.savedCount += 1;
 					this.staged.clear();
-					this.clearAccountStaging();
-					this.clearRuleStaging();
-					this.clearVisibleModelsStaging();
-				} else {
-					this.reconcileAccountStaging();
-					this.reconcileRuleStaging();
-					this.reconcileVisibleModelsStaging();
-				}
+					this.visibleModelsDraft = void 0;
+				} else this.reconcileStaging();
+				this.publish();
+			}
+			/** Stage the visible-model allowlist (multi-select). */
+			editVisibleModels(models) {
+				this.visibleModelsDraft = [...models];
+				this.failed = false;
+				this.publish();
+			}
+			/** Stage "show all models" (clears the allowlist). */
+			clearVisibleModels() {
+				this.visibleModelsDraft = [];
+				this.failed = false;
 				this.publish();
 			}
 			/**
-			* Drop account staging the stored section already reflects: additions whose
-			* ref is now stored, removals whose ref is gone, and label drafts that the
-			* stored label proves landed. 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.
+			* Create one extra account now and return its credential reference, or
+			* undefined when the account could not be stored. With `key` the key lands
+			* first, so a stored row never names a reference whose key write failed;
+			* without it the row is stored keyless so browser sign-in can target it.
 			*/
-			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);
-				}
-				for (const ref of [...this.keyClears]) if (this.credentialStates.get(ref)?.configured !== true) this.keyClears.delete(ref);
+			async createAccount(input) {
+				let created;
+				await this.runAccountOp("create", async () => {
+					const ref = this.nextAccountRef();
+					const key = input.key?.trim() ?? "";
+					if (key !== "" && !await this.writeKeyTo(ref, key)) return false;
+					const label = input.label.trim() === "" ? ref : input.label.trim();
+					let ok = false;
+					try {
+						ok = await this.writeAccountList([...this.rawStoredAccounts(), {
+							label,
+							apiKeyEnv: ref
+						}]);
+					} catch {
+						ok = false;
+					}
+					if (!ok) {
+						if (key !== "") await this.unsetKey(ref);
+						return false;
+					}
+					created = ref;
+					return true;
+				});
+				return created;
+			}
+			/** Rename one stored extra account now. */
+			renameAccount(ref, label) {
+				const next = label.trim();
+				return this.runAccountOp("rename", async () => {
+					if (next === "") return false;
+					const list = this.rawStoredAccounts().map((entry) => entry.apiKeyEnv === ref ? {
+						...entry,
+						label: next
+					} : { ...entry });
+					return this.writeAccountList(list);
+				});
+			}
+			/**
+			* Remove one stored extra account now: its stored key, its dedicated
+			* models and a pin naming it go with it, so nothing orphaned remains.
+			*/
+			removeAccount(ref) {
+				return this.runAccountOp("remove", async () => {
+					if (this.credentialStates.get(ref)?.configured === true && !await this.unsetKey(ref)) return false;
+					const list = this.rawStoredAccounts().filter((entry) => entry.apiKeyEnv !== ref).map((entry) => ({ ...entry }));
+					if (!await this.writeAccountList(list)) return false;
+					const map = accountModelMap(this.storedRules());
+					if (map.has(ref)) {
+						map.delete(ref);
+						if (!await this.writeRules(rulesFromMap(map))) return false;
+					}
+					if (this.sectionValue("activeAccount") === ref) return this.clear("activeAccount");
+					return true;
+				});
+			}
+			/** Store a replacement key now; `target` is `'default'` or an extra account's reference. */
+			setAccountKey(target, key) {
+				const value = key.trim();
+				return this.runAccountOp("key", async () => {
+					if (value === "") return false;
+					return this.writeKeyTo(this.refFor(target), value);
+				});
+			}
+			/** Remove a stored key now; `target` is `'default'` or an extra account's reference. */
+			clearAccountKey(target) {
+				return this.runAccountOp("key", () => this.unsetKey(this.refFor(target)));
+			}
+			/** Pin the serving account now (`''` returns to automatic rotation). */
+			setActiveAccount(id) {
+				return this.runAccountOp("active", () => id === "" ? this.clear("activeAccount") : this.store("activeAccount", id));
+			}
+			/**
+			* Replace one account's dedicated models now. A model belongs to one
+			* account at a time, so each selected model is moved out of any other
+			* account's list — the stored rules then carry no shadowed entries.
+			*/
+			setAccountModels(target, models) {
+				return this.runAccountOp("models", async () => {
+					const chosen = [...new Set(models.filter((id) => id !== ""))];
+					const taken = new Set(chosen);
+					const map = accountModelMap(this.storedRules());
+					for (const [account, list] of map) if (account !== target) map.set(account, list.filter((id) => !taken.has(id)));
+					map.set(target, chosen);
+					return this.writeRules(rulesFromMap(map));
+				});
+			}
+			/** Run one account operation after every earlier one, tracking busy/failure. */
+			runAccountOp(op, run) {
+				this.accountPending += 1;
+				this.accountFailed = void 0;
+				this.publish();
+				const result = this.accountQueue.then(async () => {
+					if (!this.scope.getSnapshot().writable) return false;
+					try {
+						return await run();
+					} catch {
+						return false;
+					}
+				});
+				this.accountQueue = result;
+				return result.then((ok) => {
+					this.accountPending -= 1;
+					if (!ok) this.accountFailed = op;
+					this.publish();
+					return ok;
+				});
+			}
+			refFor(target) {
+				return target === "default" ? this.credentialRef : target;
+			}
+			/**
+			* The first free `<credentialRef>_<n>` reference. Derived from the default
+			* reference's name, so a renamed `apiKeyEnv` yields `MY_KEY_2`-style refs
+			* consistent with the default slot.
+			*/
+			nextAccountRef() {
+				const used = /* @__PURE__ */ new Set([this.credentialRef, ...this.storedExtras().map((extra) => extra.ref)]);
+				let n = 2;
+				while (used.has(`${this.credentialRef}_${n}`)) n += 1;
+				return `${this.credentialRef}_${n}`;
 			}
 			spec(field) {
 				const spec = this.specs.get(field);
@@ -1048,7 +1034,7 @@ window.__ModuleLoader__.load({
 						const value = staged.text.trim();
 						if (value !== "") plan.push({
 							field,
-							run: () => this.writeKey(value)
+							run: () => this.writeKeyTo(this.credentialRef, value)
 						});
 						continue;
 					}
@@ -1077,7 +1063,16 @@ window.__ModuleLoader__.load({
 				}
 				return plan;
 			}
+			/** Drop staged drafts a partially landed save already stored. */
+			reconcileStaging() {
+				for (const [field, staged] of [...this.staged]) {
+					if (field === "apiKey" || staged.clear) continue;
+					if (staged.text === this.spec(field).format(this.sectionValue(field))) this.staged.delete(field);
+				}
+				if (this.visibleModelsDraft !== void 0 && sameModels(this.visibleModelsDraft, this.storedVisibleModels())) this.visibleModelsDraft = void 0;
+			}
 			async clear(field) {
+				if (!this.stored(field)) return true;
 				await this.scope.unset(field);
 				return !this.stored(field);
 			}
@@ -1085,10 +1080,6 @@ window.__ModuleLoader__.load({
 				await this.scope.set(field, value);
 				return this.userLayer()?.[field] === value;
 			}
-			/** 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 {
@@ -1096,16 +1087,29 @@ window.__ModuleLoader__.load({
 				} catch {
 					return false;
 				}
-				await this.describeAll();
+				await this.describeAll([ref]);
 				return this.credentialStates.get(ref)?.configured ?? false;
 			}
-			/** Ask the credentials domain about every reference this page writes. */
-			async describeAll() {
-				const refs = [
+			/** Unset one stored credential, then re-read the Host's credential states. */
+			async unsetKey(ref) {
+				try {
+					if (!(await this.api.credentials.unset(ref)).ok) return false;
+				} catch {
+					return false;
+				}
+				await this.describeAll([ref]);
+				return this.credentialStates.get(ref)?.configured !== true;
+			}
+			/**
+			* Ask the credentials domain about every reference this page writes, plus
+			* `extra` — a key written for an account whose row is not stored yet.
+			*/
+			async describeAll(extra = []) {
+				const refs = [.../* @__PURE__ */ new Set([
 					this.credentialRef,
-					...this.storedExtras().map((extra) => extra.ref),
-					...this.addedAccounts.map((extra) => extra.ref)
-				];
+					...this.storedExtras().map((account) => account.ref),
+					...extra
+				])];
 				let response;
 				try {
 					response = await this.api.credentials.describe(refs);
@@ -1168,20 +1172,19 @@ window.__ModuleLoader__.load({
 				return raw.filter((entry) => typeof entry === "object" && entry !== null && !Array.isArray(entry));
 			}
 			/**
-			* The stored extra accounts from the settings section (`accounts`): the rows
-			* this page can address, i.e. the ones carrying a credential reference.
-			*
-			* Entries the page cannot name are deliberately NOT listed here but are also
-			* never dropped — `writeAccounts()` rebuilds the stored list from
-			* {@link rawStoredAccounts} and only rewrites the reference-carrying entries
-			* it manages (see the note there), so a literal-key entry stays in the
-			* document and simply has no row.
+			* The stored extra accounts this page can address: the rows carrying a
+			* credential reference. Entries it cannot name (a composition entry with a
+			* literal `apiKey`, or an unknown shape) are never dropped — every list
+			* write starts from {@link rawStoredAccounts} and copies them verbatim,
+			* because the settings layer replaces the whole array.
 			*/
 			storedExtras() {
 				const out = [];
+				const seen = /* @__PURE__ */ new Set();
 				for (const record of this.rawStoredAccounts()) {
 					const ref = record.apiKeyEnv;
-					if (typeof ref !== "string" || ref === "") continue;
+					if (typeof ref !== "string" || ref === "" || seen.has(ref)) continue;
+					seen.add(ref);
 					const label = record.label;
 					out.push({
 						label: typeof label === "string" && label !== "" ? label : ref,
@@ -1190,197 +1193,43 @@ window.__ModuleLoader__.load({
 				}
 				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) => ({
+				return this.storedExtras().map((extra) => ({
 					id: extra.ref,
 					ref: extra.ref,
-					label: this.labelDrafts.get(extra.ref) ?? extra.label,
-					keyText: this.keyDrafts.get(extra.ref) ?? "",
+					label: extra.label,
 					configured: this.credentialStates.get(extra.ref)?.configured ?? false,
-					writable: this.credentialStates.get(extra.ref)?.writable ?? true,
-					added: extra.added,
-					clearStaged: this.keyClears.has(extra.ref)
+					writable: this.credentialStates.get(extra.ref)?.writable ?? true
 				}));
 			}
-			/** 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 || this.keyClears.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;
-				for (const ref of this.keyClears) if (this.credentialStates.get(ref)?.configured === true) return true;
-				return false;
-			}
-			/** Reset every account-level staged edit. */
-			clearAccountStaging() {
-				this.addedAccounts = [];
-				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)).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) && !this.keyClears.has(ref)) runs.push(() => this.writeKeyTo(ref, value));
-				}
-				runs.push(() => this.writeAccounts());
-				return runs;
-			}
-			/**
-			* Persist the staged accounts list into the settings section.
-			*
-			* The stored list is the base — NOT a list rebuilt from this page's rows.
-			* A composition-config entry may carry a literal `apiKey` (or a shape this
-			* page does not know), and the settings layer replaces the whole array, so a
-			* rebuilt list would silently delete every entry the page cannot name along
-			* with the literal keys of the entries it can. Entries are therefore carried
-			* over verbatim and only the reference-carrying rows are rewritten (label
-			* draft applied, staged removals dropped, staged additions appended).
-			*/
-			async writeAccounts() {
-				const removed = this.removedRefs;
-				const written = /* @__PURE__ */ new Set();
-				const list = [];
-				for (const entry of this.rawStoredAccounts()) {
-					const ref = entry.apiKeyEnv;
-					if (typeof ref !== "string" || ref === "") {
-						list.push({ ...entry });
-						continue;
-					}
-					if (removed.has(ref) || written.has(ref)) continue;
-					written.add(ref);
-					list.push(this.accountEntry(ref, entry));
-				}
-				for (const extra of this.addedAccounts) {
-					if (written.has(extra.ref)) continue;
-					written.add(extra.ref);
-					list.push(this.accountEntry(extra.ref, extra));
-				}
+			/** Persist a full accounts list and verify the Host stored it. */
+			async writeAccountList(list) {
 				await this.scope.set("accounts", list);
 				const after = this.rawStoredAccounts();
-				return after.length === list.length && list.every((item, index) => after[index]?.apiKeyEnv === item.apiKeyEnv);
-			}
-			/**
-			* One written account entry: the stored/added facts plus the label draft.
-			* `fallback` contributes the non-managed fields (a stored entry's literal
-			* `apiKey`, or any future field) so a rewrite never strips them.
-			*/
-			accountEntry(ref, fallback) {
-				const draft = this.labelDrafts.get(ref)?.trim();
-				const base = "ref" in fallback ? { label: fallback.label } : { ...fallback };
-				const storedLabel = base.label;
-				return {
-					...base,
-					label: draft !== void 0 && draft !== "" ? draft : typeof storedLabel === "string" && storedLabel !== "" ? storedLabel : ref,
-					apiKeyEnv: ref
-				};
+				return after.length === list.length && list.every((item, index) => after[index]?.apiKeyEnv === item.apiKeyEnv && after[index]?.label === item.label);
 			}
 			/** The stored routing rules from the settings section (`modelAccountRules`). */
 			storedRules() {
 				const raw = this.scope.getSnapshot().value?.modelAccountRules;
 				if (!Array.isArray(raw)) return [];
 				const out = [];
-				for (const [index, entry] of raw.entries()) {
+				for (const entry of raw) {
 					if (typeof entry !== "object" || entry === null || Array.isArray(entry)) continue;
 					const record = entry;
-					const models = record.models;
-					const account = record.account;
-					const modelsList = Array.isArray(models) && models.every((m) => typeof m === "string") ? models.filter((m) => m !== "") : [];
-					if (modelsList.length === 0) continue;
+					const models = Array.isArray(record.models) ? record.models.filter((m) => typeof m === "string" && m !== "") : [];
+					if (models.length === 0) continue;
 					out.push({
-						id: `rule-${index}`,
-						models: modelsList,
-						account: typeof account === "string" && account !== "" ? account : "default"
+						models,
+						account: typeof record.account === "string" && record.account !== "" ? record.account : "default"
 					});
 				}
 				return out;
 			}
-			/** Every routing rule row: stored (minus staged removals, with drafts) + staged adds. */
-			effectiveRules() {
-				const stored = this.storedRules().filter((rule) => !this.removedRuleIds.has(rule.id)).map((rule) => {
-					const draft = this.ruleDrafts.get(rule.id);
-					return {
-						id: rule.id,
-						models: draft?.models ?? rule.models,
-						account: draft?.account ?? rule.account,
-						added: false
-					};
-				});
-				const added = this.addedRules.map((rule, index) => ({
-					id: `new-${index}`,
-					models: rule.models,
-					account: rule.account,
-					added: true
-				}));
-				return [...stored, ...added];
-			}
-			/** Whether any routing-rule staging (add/remove/edit) exists. */
-			rulesStaged() {
-				return this.addedRules.length > 0 || this.removedRuleIds.size > 0 || this.ruleDrafts.size > 0;
-			}
-			/** Whether the staged routing rules differ from the stored section. */
-			rulesDirty() {
-				if (this.addedRules.length > 0 || this.removedRuleIds.size > 0) return true;
-				for (const [id, draft] of this.ruleDrafts) {
-					const base = this.storedRules().find((rule) => rule.id === id);
-					if (base === void 0) continue;
-					if (draft.models.length > 0 && !sameModels(draft.models, base.models)) return true;
-					if (draft.account !== base.account) return true;
-				}
-				return false;
-			}
-			/** Reset every routing-rule staged edit. */
-			clearRuleStaging() {
-				this.addedRules = [];
-				this.ruleDrafts.clear();
-				this.removedRuleIds.clear();
-			}
-			/**
-			* Drop rule staging the stored section already reflects (partial-save
-			* retry). Stored row ids are positional (`rule-N`) and shift after any
-			* write, so every check here is content-based, never id-based:
-			* - landed additions (in `addedRules`, already in stored) are dropped, or
-			*   a retry would persist them twice;
-			* - staged removals whose snapshot row is gone from stored have landed
-			*   (drop them); a removal whose snapshot still matches a stored row is
-			*   still pending (keep it).
-			*/
-			reconcileRuleStaging() {
-				const stored = this.storedRules();
-				this.addedRules = this.addedRules.filter((added) => !stored.some((rule) => sameModels(added.models, rule.models) && added.account === rule.account));
-				for (const [id, snapshot] of [...this.removedRuleIds]) if (!stored.some((rule) => sameModels(snapshot.models, rule.models) && snapshot.account === rule.account)) this.removedRuleIds.delete(id);
-				if (this.rulesBeforeSave !== void 0 && ruleFingerprint(stored) === this.rulesBeforeSave) return;
-				this.ruleDrafts.clear();
+			/** Persist routing rules and verify the Host stored them. */
+			async writeRules(list) {
+				await this.scope.set("modelAccountRules", list);
+				const after = this.storedRules();
+				return after.length === list.length && list.every((item, index) => after[index] !== void 0 && sameModels(after[index].models, item.models) && after[index].account === item.account);
 			}
 			/** The stored visible-model allowlist (`visibleModels`); empty = show all. */
 			storedVisibleModels() {
@@ -1388,79 +1237,19 @@ window.__ModuleLoader__.load({
 				if (!Array.isArray(raw)) return [];
 				return raw.filter((m) => typeof m === "string" && m !== "");
 			}
-			/** Effective visible-model allowlist: staged draft or stored value. */
 			effectiveVisibleModels() {
 				return this.visibleModelsDraft ?? this.storedVisibleModels();
 			}
-			/** Whether the staged visible-model selection differs from stored. */
 			visibleModelsDirty() {
 				return this.visibleModelsDraft !== void 0 && !sameModels(this.visibleModelsDraft, this.storedVisibleModels());
 			}
-			/** Whether any visible-model staging exists. */
-			visibleModelsStaged() {
-				return this.visibleModelsDraft !== void 0;
-			}
-			/** Reset the visible-model staged edit. */
-			clearVisibleModelsStaging() {
-				this.visibleModelsDraft = void 0;
-			}
-			/** Drop visible-model staging the stored section already reflects. */
-			reconcileVisibleModelsStaging() {
-				if (this.visibleModelsDraft !== void 0 && sameModels(this.visibleModelsDraft, this.storedVisibleModels())) this.visibleModelsDraft = void 0;
-			}
-			/** The visible-model writes a save performs (empty when nothing staged). */
 			visibleModelsPlan() {
 				if (!this.visibleModelsDirty()) return [];
-				return [() => this.writeVisibleModels()];
-			}
-			/** Persist the staged visible-model allowlist into the settings section. */
-			async writeVisibleModels() {
-				const list = this.visibleModelsDraft ?? [];
-				await this.scope.set("visibleModels", list);
-				return sameModels(this.storedVisibleModels(), list);
-			}
-			/** Stage the visible-model allowlist (multi-select). */
-			editVisibleModels(models) {
-				this.visibleModelsDraft = [...models];
-				this.failed = false;
-				this.publish();
-			}
-			/** Stage "show all models" (clears the allowlist). */
-			clearVisibleModels() {
-				this.visibleModelsDraft = [];
-				this.failed = false;
-				this.publish();
-			}
-			/** The routing-rule writes a save performs (empty when nothing staged). */
-			rulesPlan() {
-				if (!this.rulesDirty()) return [];
-				return [() => this.writeRules()];
-			}
-			/** Persist the staged routing rules into the settings section. */
-			async writeRules() {
-				const list = [...this.storedRules().filter((rule) => {
-					const snapshot = this.removedRuleIds.get(rule.id);
-					return snapshot === void 0 || !sameModels(snapshot.models, rule.models) || snapshot.account !== rule.account;
-				}).map((rule) => {
-					const draft = this.ruleDrafts.get(rule.id);
-					return {
-						models: draft !== void 0 && draft.models.length > 0 ? draft.models : rule.models,
-						account: draft?.account !== void 0 && draft.account !== "" ? draft.account : rule.account
-					};
-				}), ...this.addedRules.map((rule) => ({
-					models: rule.models,
-					account: rule.account
-				}))].filter((rule) => rule.models.length > 0);
-				const seen = /* @__PURE__ */ new Set();
-				const deduped = list.filter((rule) => {
-					const key = `${rule.account}\u0001${[...rule.models].sort().join("
")}`;
-					if (seen.has(key)) return false;
-					seen.add(key);
-					return true;
-				});
-				await this.scope.set("modelAccountRules", deduped);
-				const after = this.storedRules();
-				return after.length === deduped.length && deduped.every((item, index) => after[index] !== void 0 && sameModels(after[index].models, item.models) && after[index].account === item.account);
+				return [async () => {
+					const list = this.visibleModelsDraft ?? [];
+					await this.scope.set("visibleModels", list);
+					return sameModels(this.storedVisibleModels(), list);
+				}];
 			}
 			publish() {
 				if (this.disposed) return;
@@ -2381,55 +2170,6 @@ window.__ModuleLoader__.load({
 			]
 		};
 		//#endregion
-		//#region src/client/login-row.tsx
-		/** The sign-in alternative to pasting a key (settings page + Models card). */
-		function LoginRow({ state, targetRef, disabled, disabledHint, t, onBegin, onCancel }) {
-			const { visible: visibleState, busyElsewhere } = loginStateForTarget(state, targetRef);
-			const busy = visibleState.phase === "starting" || visibleState.phase === "waiting";
-			const hint = loginHint(visibleState, t);
-			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)("span", {
-							className: "cc-label",
-							children: t("loginTitle")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cc-badges",
-							children: busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "cc-reset",
-								onClick: onCancel,
-								children: t("loginCancel")
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "cc-reset",
-								disabled: disabled || busyElsewhere,
-								onClick: onBegin,
-								children: t("loginButton")
-							})
-						})]
-					}),
-					visibleState.authUrl !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-hint",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-							className: "cc-loginLink",
-							href: visibleState.authUrl,
-							target: "_blank",
-							rel: "noreferrer",
-							children: t("loginOpenLink")
-						})
-					}) : null,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: hint.className,
-						title: hint.title,
-						children: disabled && !busy && disabledHint !== void 0 ? disabledHint : hint.text
-					})
-				]
-			});
-		}
-		//#endregion
 		//#region src/client/model-select.ts
 		/**
 		* Model-select helpers for the settings page's model editors (browser half).
@@ -2573,7 +2313,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region package.json
-		var version = "0.11.12";
+		var version = "0.11.14";
 		var repository = {
 			"type": "git",
 			"url": "git+https://github.com/Mars-Sea/dsh-commandcode-provider.git"
@@ -2759,69 +2499,112 @@ window.__ModuleLoader__.load({
 		* `settings.commandcode` locale namespace; all state comes from the
 		* `CommandCodeSettingsController` injected by the slot registration.
 		*
-		* The layout mirrors the harness's settings pages: a max-width content
-		* column, labelled fields with hints, a reset affordance, and a
-		* save/discard footer. Rarely touched connection facts (API base, working
-		* directory, timeouts, plan filter) fold into a collapsed Advanced card
-		* (`AdvancedSection`) so the page leads with the key and the usage facts.
-		* Styles are injected once by the client entry
-		* (see src/client/index.ts) and class-prefixed `cc-` to stay local.
+		* Layout, top to bottom:
+		*   1. Accounts — one card per account with its status, quota, actions and
+		*      dedicated models. Every account operation commits immediately.
+		*   2. Models — the plan filter and the visible-model allowlist.
+		*   3. Privacy & security — zero data retention and the command guard.
+		*   4. Integrations & display — web search and the sidebar quota card.
+		*   5. Advanced (collapsed) — API base and the network limits.
+		* Sections 2–5 are flat groups of rows (title and description left, control
+		* right, as on the harness's own settings pages), a staged form written by
+		* the floating save bar.
+		*
+		* Styles are injected once by the client entry (see src/client/index.ts) and
+		* class-prefixed `cc-` to stay local.
 		*/
 		const ADVANCED_FIELDS = [
 			"apiBase",
-			"workingDir",
 			"requestTimeoutMs",
 			"streamIdleTimeoutMs",
-			"transportMaxRetries",
-			"filterModelsByPlan",
-			"webSearch",
-			"showSidebarQuota",
-			"commandGuard",
-			"commandGuardThreshold",
-			"commandGuardTimeoutMs",
-			"zdr"
+			"transportMaxRetries"
 		];
-		/** One labelled field row in the page body. */
-		function Field({ id, label, hint, state, disabled, numeric, placeholder, onEdit, onReset, t }) {
+		/** The "customized" tag and reset link a staged field shows once it differs from the default. */
+		function FieldOverride({ label, state, disabled, t, onReset }) {
+			if (!state.overridden && !state.clear) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "cc-linkButton",
+				disabled,
+				onClick: onReset,
+				"aria-label": `${label} — ${t("reset")}`,
+				children: t("reset")
+			});
+		}
+		/**
+		* One settings row, laid out like the harness's own General page: the title
+		* and description on the left, the control on the right, a hairline between
+		* rows.
+		*/
+		function SettingRow({ title, titleFor, titleId, tag, description, error, control, className }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cc-field",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-fieldHead",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-							className: "cc-label",
-							htmlFor: id,
-							children: label
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "cc-badges",
-							children: [state.overridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "cc-badge",
-								children: t("overridden")
-							}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "cc-reset",
-								disabled,
-								onClick: onReset,
-								"aria-label": `${label} — ${t("reset")}`,
-								children: t("reset")
-							})]
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						id,
-						className: state.invalid ? "cc-input cc-inputInvalid" : "cc-input",
-						type: "text",
-						inputMode: numeric ? "numeric" : void 0,
-						value: state.text,
-						placeholder,
-						disabled,
-						onChange: (event) => onEdit(event.target.value)
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: state.invalid ? "cc-invalid" : "cc-hint",
-						children: state.invalid ? invalidCopy(state.invalidReason, t) : hint
-					})
-				]
+				className: className === void 0 ? "cc-row" : `cc-row ${className}`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cc-rowText",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "cc-rowTitleLine",
+							children: [titleFor !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+								className: "cc-rowTitle",
+								id: titleId,
+								htmlFor: titleFor,
+								children: title
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-rowTitle",
+								id: titleId,
+								children: title
+							}), tag]
+						}),
+						error !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "cc-rowError",
+							children: error
+						}) : null,
+						error === void 0 && description !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "cc-rowDesc",
+							children: description
+						}) : null
+					]
+				}), control !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cc-rowControl",
+					children: control
+				}) : null]
+			});
+		}
+		/** The tag a row title carries while its field overrides the default. */
+		function OverrideTag({ state, t }) {
+			return state.overridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cc-badge",
+				children: t("overridden")
+			}) : null;
+		}
+		/** One text/number field row. */
+		function Field({ id, label, hint, state, disabled, numeric, wide, placeholder, onEdit, onReset, t }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+				title: label,
+				titleFor: id,
+				tag: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverrideTag, {
+					state,
+					t
+				}),
+				description: hint,
+				error: state.invalid ? invalidCopy(state.invalidReason, t) : void 0,
+				control: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldOverride, {
+					label,
+					state,
+					disabled,
+					t,
+					onReset
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					id,
+					className: `cc-input ${wide ? "cc-rowInputWide" : "cc-rowInput"}${state.invalid ? " cc-inputInvalid" : ""}`,
+					type: "text",
+					inputMode: numeric ? "numeric" : void 0,
+					"aria-invalid": state.invalid || void 0,
+					value: state.text,
+					placeholder,
+					disabled,
+					onChange: (event) => onEdit(event.target.value)
+				})] })
 			});
 		}
 		/** The per-field error copy for a staged draft's failure reason. */
@@ -2831,299 +2614,82 @@ window.__ModuleLoader__.load({
 			return t("invalidNumber");
 		}
 		/**
-		* The collapsed "Advanced" card: API base, working dir, both timeouts, the
-		* plan filter, the web-search backend and the sidebar quota card live here so
-		* the page leads with the facts a user actually touches. Starts collapsed on
-		* every visit; expands on demand. While collapsed, a badge names the
-		* customized count so a nonzero override stays visible (a number field's error
-		* blocks save and must be reachable).
-		*/
-		function AdvancedSection({ state, disabled, t, onEdit, onReset }) {
-			const [expanded, setExpanded] = (0, react.useState)(false);
-			const overridden = ADVANCED_FIELDS.filter((field) => state[field].overridden).length;
-			const invalid = ADVANCED_FIELDS.some((field) => state[field].invalid);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cc-card",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "cc-advancedHead",
-						"aria-expanded": expanded,
-						"aria-controls": "cc-advanced-body",
-						onClick: () => setExpanded((value) => !value),
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "cc-advancedTitle",
-								children: t("advancedSettings")
-							}),
-							overridden > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "cc-badge",
-								children: overridden === 1 ? t("advancedOverriddenOne") : t("advancedOverriddenMany", { count: overridden })
-							}) : null,
-							!expanded && invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "cc-badge cc-badgeWarn",
-								children: t("advancedInvalid")
-							}) : null,
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-advancedSpacer" }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: expanded ? "cc-chevron cc-chevronUp" : "cc-chevron",
-								"aria-hidden": "true"
-							})
-						]
-					}),
-					expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						id: "cc-advanced-body",
-						className: "cc-advancedBody",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "cc-hint",
-								children: t("advancedSettingsHint")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								id: "cc-api-base",
-								label: t("apiBase"),
-								hint: t("apiBaseHint"),
-								state: state.apiBase,
-								disabled,
-								onEdit: (text) => onEdit("apiBase", text),
-								onReset: () => onReset("apiBase"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								id: "cc-working-dir",
-								label: t("workingDir"),
-								hint: t("workingDirHint"),
-								state: state.workingDir,
-								disabled,
-								onEdit: (text) => onEdit("workingDir", text),
-								onReset: () => onReset("workingDir"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								id: "cc-request-timeout",
-								label: t("requestTimeoutMs"),
-								hint: t("requestTimeoutMsHint"),
-								state: state.requestTimeoutMs,
-								disabled,
-								numeric: true,
-								onEdit: (text) => onEdit("requestTimeoutMs", text),
-								onReset: () => onReset("requestTimeoutMs"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								id: "cc-stream-idle-timeout",
-								label: t("streamIdleTimeoutMs"),
-								hint: t("streamIdleTimeoutMsHint"),
-								state: state.streamIdleTimeoutMs,
-								disabled,
-								numeric: true,
-								onEdit: (text) => onEdit("streamIdleTimeoutMs", text),
-								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"),
-								hint: t("filterModelsByPlanHint"),
-								state: state.filterModelsByPlan,
-								disabled,
-								defaultChecked: true,
-								onEdit: (text) => onEdit("filterModelsByPlan", text),
-								onReset: () => onReset("filterModelsByPlan"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
-								id: "cc-web-search",
-								label: t("webSearch"),
-								hint: t("webSearchHint"),
-								state: state.webSearch,
-								disabled,
-								defaultChecked: true,
-								onEdit: (text) => onEdit("webSearch", text),
-								onReset: () => onReset("webSearch"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
-								id: "cc-show-sidebar-quota",
-								label: t("showSidebarQuota"),
-								hint: t("showSidebarQuotaHint"),
-								state: state.showSidebarQuota,
-								disabled,
-								defaultChecked: false,
-								onEdit: (text) => onEdit("showSidebarQuota", text),
-								onReset: () => onReset("showSidebarQuota"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
-								id: "cc-command-guard",
-								label: t("commandGuard"),
-								hint: t("commandGuardHint"),
-								state: state.commandGuard,
-								disabled,
-								defaultChecked: false,
-								onEdit: (text) => onEdit("commandGuard", text),
-								onReset: () => onReset("commandGuard"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								id: "cc-command-guard-threshold",
-								label: t("commandGuardThreshold"),
-								hint: t("commandGuardThresholdHint"),
-								state: state.commandGuardThreshold,
-								disabled,
-								onEdit: (text) => onEdit("commandGuardThreshold", text),
-								onReset: () => onReset("commandGuardThreshold"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								id: "cc-command-guard-timeout",
-								label: t("commandGuardTimeoutMs"),
-								hint: t("commandGuardTimeoutMsHint"),
-								state: state.commandGuardTimeoutMs,
-								disabled,
-								numeric: true,
-								onEdit: (text) => onEdit("commandGuardTimeoutMs", text),
-								onReset: () => onReset("commandGuardTimeoutMs"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
-								id: "cc-zdr",
-								label: t("zdr"),
-								hint: t("zdrHint"),
-								state: state.zdr,
-								disabled,
-								defaultChecked: false,
-								onEdit: (text) => onEdit("zdr", text),
-								onReset: () => onReset("zdr"),
-								t
-							})
-						]
-					}) : null,
-					expanded && invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-invalid",
-						role: "status",
-						children: t("advancedInvalid")
-					}) : null
-				]
-			});
-		}
-		/**
-		* One boolean field row rendered as a toggle. The staged text is `'true'` /
+		* One boolean field row rendered as a switch. The staged text is `'true'` /
 		* `'false'` / `''` (unset → `defaultChecked`); toggling stages the string the
 		* boolean field spec parses back into a real boolean on save.
 		*/
 		function ToggleField({ id, label, hint, state, disabled, defaultChecked, onEdit, onReset, t }) {
 			const checked = state.text === "" ? defaultChecked : state.text === "true";
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cc-field",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "cc-fieldHead",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "cc-label",
-						"aria-hidden": "true",
-						children: label
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "cc-badges",
-						children: [state.overridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cc-badge",
-							children: t("overridden")
-						}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: "cc-reset",
-							disabled,
-							onClick: onReset,
-							"aria-label": `${label} — ${t("reset")}`,
-							children: t("reset")
-						})]
-					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-					className: "cc-toggleRow",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						id,
-						className: "cc-toggle",
-						type: "checkbox",
-						role: "switch",
-						checked,
-						disabled,
-						onChange: (event) => onEdit(event.target.checked ? "true" : "false")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "cc-hint",
-						children: hint
-					})]
-				})]
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+				title: label,
+				titleFor: id,
+				tag: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverrideTag, {
+					state,
+					t
+				}),
+				description: hint,
+				control: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldOverride, {
+					label,
+					state,
+					disabled,
+					t,
+					onReset
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					id,
+					className: "cc-toggle",
+					type: "checkbox",
+					role: "switch",
+					checked,
+					disabled,
+					onChange: (event) => onEdit(event.target.checked ? "true" : "false")
+				})] })
 			});
 		}
 		/**
-		* 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.
+		* One fixed-choice field rendered as a segmented control. The staged text is
+		* one of `options`' values or `''` (unset → `defaultValue`); picking the
+		* default while unset stages nothing new.
 		*/
-		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: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-fieldHead",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-							className: "cc-label",
-							htmlFor: "cc-api-key",
-							children: label
-						}), /* @__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
-								}),
-								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: visible ? "text" : "password",
-						autoComplete: "off",
-						spellCheck: false,
-						value: state.text,
+		function SegmentedField({ label, hint, state, disabled, options, defaultValue, className, onEdit, onReset, t }) {
+			const current = state.text === "" ? defaultValue : state.text;
+			const index = Math.max(0, options.findIndex((option) => option.value === current));
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+				title: label,
+				tag: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverrideTag, {
+					state,
+					t
+				}),
+				description: hint,
+				...className === void 0 ? {} : { className },
+				control: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldOverride, {
+					label,
+					state,
+					disabled,
+					t,
+					onReset
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cc-segmented",
+					role: "radiogroup",
+					"aria-label": label,
+					style: {
+						"--cc-segment-count": options.length,
+						"--cc-segment-index": index
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cc-segmentIndicator",
+						"aria-hidden": "true"
+					}), options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						role: "radio",
+						"aria-checked": current === option.value,
+						className: "cc-segment",
 						disabled,
-						onChange: (event) => onEdit(event.target.value)
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-hint",
-						children: hint
-					})
-				]
+						onClick: () => {
+							if (current !== option.value) onEdit(option.value);
+						},
+						children: option.label
+					}, option.value))]
+				})] })
 			});
 		}
 		/** One stat tile in the account card's summary grid. */
@@ -3194,35 +2760,11 @@ 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;
-		}
 		/**
 		* One pool account's facts (identity, totals, credits, window limits)
-		* rendered inside the account-usage card.
+		* rendered inside an account row's details.
 		*/
-		function AccountReport({ entry, fetchedAt, t, onRemove }) {
+		function AccountReport({ entry, fetchedAt, t, summaryOnly = false, headless = false }) {
 			const report = entry.report;
 			const account = report.account;
 			const accountName = account === void 0 ? "" : account.userName || account.name;
@@ -3235,17 +2777,13 @@ window.__ModuleLoader__.load({
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cc-accountReport",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					!headless ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-usageHead",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
 								className: "cc-usageTitle",
 								children: entry.label
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountMark, {
-								entry,
-								t
-							}),
 							accountName !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "cc-usageAccount",
 								children: accountName
@@ -3253,21 +2791,14 @@ window.__ModuleLoader__.load({
 							planName !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "cc-usagePlan",
 								children: planName
-							}) : null,
-							planStatus !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "cc-usagePlanStatus",
-								children: planStatus
-							}) : null,
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-usageMetaSpacer" }),
-							onRemove !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "cc-usageRefresh",
-								onClick: onRemove,
-								children: t("accountRemove")
 							}) : null
 						]
-					}),
-					!entry.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					}) : null,
+					planStatus !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-usagePlanStatus",
+						children: planStatus
+					}) : null,
+					!entry.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "cc-usageHint",
 						children: t("usageUnconfigured")
 					}) : null,
@@ -3290,8 +2821,8 @@ window.__ModuleLoader__.load({
 							}) : null
 						]
 					}) : null,
-					report.usage !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-usageStats",
+					!summaryOnly && report.usage !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-usageStats cc-usageStatsActivity",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
 								label: t("usageRequests"),
@@ -3314,8 +2845,8 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}) : null,
-					credits !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-usageStats",
+					!summaryOnly && credits !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-usageStats cc-usageStatsBalance",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
 								label: t("usageMonthly"),
@@ -3387,360 +2918,6 @@ window.__ModuleLoader__.load({
 			if (reason === "invalid-response") return t("usageInvalidResponseHint");
 			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";
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: cls,
-				"aria-hidden": "true"
-			});
-		}
-		/**
-		* 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, removingIds, removableIds, canManage, onRefresh, onRemoveAccount }) {
-			const { loading, shouldRefresh, noKey } = usageCardState(usage);
-			(0, react.useEffect)(() => {
-				if (shouldRefresh) onRefresh();
-			}, [shouldRefresh, onRefresh]);
-			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,
-								onClick: onRefresh,
-								children: loading ? t("usageRefreshing") : t("usageRefresh")
-							})
-						]
-					}),
-					noKey ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-usageHint",
-						children: t("usageNoKey")
-					}) : null,
-					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",
-						"aria-label": t("accountsTitle"),
-						children: entries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							"aria-pressed": 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,
-						fetchedAt: usage.fetchedAt,
-						t,
-						onRemove: removeSelected
-					}, selected.id) : 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, 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: [
-					/* @__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.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",
-									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: keyVisible ? "text" : "password",
-						autoComplete: "off",
-						spellCheck: false,
-						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, login, disabled, onAdd, onRemove, onLabel, onKey, onToggleClear, onActive, onActiveReset, onBeginLogin, onCancelLogin }) {
-			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.jsxs)("div", {
-						className: "cc-accountEditor",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountRow, {
-							account,
-							disabled: disabled || login.targetRef === account.ref && (login.phase === "starting" || login.phase === "waiting"),
-							t,
-							onLabel: (text) => onLabel(account.id, text),
-							onKey: (text) => onKey(account.id, text),
-							onToggleClear: () => onToggleClear(account.id),
-							onRemove: () => onRemove(account.id)
-						}), account.added ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "cc-accountLoginHint",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "cc-hint",
-								children: t("accountLoginAfterSave")
-							})
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoginRow, {
-							state: login,
-							targetRef: account.ref,
-							disabled: disabled || !account.writable || state.dirty,
-							disabledHint: state.dirty ? t("loginSaveBefore") : void 0,
-							t,
-							onBegin: () => onBeginLogin(account.ref),
-							onCancel: onCancelLogin
-						})]
-					}, account.id))
-				]
-			});
-		}
-		/** One model → account routing rule row. */
-		function RuleRow({ rule, accounts, catalog, disabled, t, onModels, onAccount, onRemove }) {
-			const targets = [{
-				value: "default",
-				label: t("accountDefault")
-			}, ...accounts.filter((account) => !account.added).map((account) => ({
-				value: account.ref,
-				label: account.label
-			}))];
-			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-rule-model-${rule.id}`,
-							children: t("ruleModel")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "cc-badges",
-							children: [rule.added ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "cc-badge",
-								children: t("unsaved")
-							}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "cc-reset",
-								disabled,
-								onClick: onRemove,
-								children: t("ruleRemove")
-							})]
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMultiSelect, {
-						id: `cc-rule-model-${rule.id}`,
-						selected: rule.models,
-						catalog,
-						disabled,
-						t,
-						onSelect: onModels
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-						id: `cc-rule-account-${rule.id}`,
-						className: "cc-input",
-						value: rule.account,
-						disabled,
-						onChange: (event) => onAccount(event.target.value),
-						"aria-label": t("ruleAccount"),
-						children: targets.map((target) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-							value: target.value,
-							children: target.label
-						}, target.value))
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-hint",
-						children: t("ruleHint")
-					})
-				]
-			});
-		}
 		/**
 		* A checkbox multi-select dropdown for picking catalog models (the
 		* routing-rule rows and the visible-models filter share it). The trigger
@@ -3752,13 +2929,26 @@ window.__ModuleLoader__.load({
 		* longer carries still render — flagged stale — so a saved selection never
 		* silently loses an entry, and the VisibleModelsCard offers a one-click
 		* cleanup.
+		*
+		* With `deferCommit` the toggles collect in a local draft that is handed to
+		* `onSelect` once, when the menu closes: the per-account picker writes
+		* immediately, and one write per click would be a burst of document writes.
 		*/
-		function ModelMultiSelect({ id, selected, catalog, disabled, t, onSelect }) {
+		function ModelMultiSelect({ id, selected: committed, catalog, disabled, deferCommit = false, ownerOf, t, onSelect }) {
 			const [open, setOpen] = (0, react.useState)(false);
 			const [query, setQuery] = (0, react.useState)("");
+			const [draft, setDraft] = (0, react.useState)(void 0);
+			const selected = draft ?? committed;
 			(0, react.useEffect)(() => {
 				if (open) setQuery("");
 			}, [open]);
+			const close = () => {
+				setOpen(false);
+				if (draft !== void 0) {
+					setDraft(void 0);
+					if (draft.length !== committed.length || draft.some((modelId) => !committed.includes(modelId))) onSelect(draft);
+				}
+			};
 			const tiers = (0, react.useMemo)(() => Object.fromEntries(catalog.flatMap((model) => model.tier === void 0 ? [] : [[model.id, model.tier]])), [catalog]);
 			const options = buildModelSelectOptions(catalog, selected, query);
 			const items = groupModelSelectOptions(options, (modelId) => tierHeadingFor(modelId, tiers)).flatMap((group) => [...group.heading === void 0 ? [] : [{
@@ -3784,15 +2974,21 @@ window.__ModuleLoader__.load({
 						option.stale ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "cc-badge",
 							children: t("modelStale")
+						}) : null,
+						!selected.includes(option.value) && ownerOf?.(option.value) !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cc-badgeMuted",
+							children: t("accountModelOwner", { name: ownerOf(option.value) })
 						}) : null
 					]
 				})
 			}))]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Menu, {
 				open,
-				onClose: () => setOpen(false),
+				onClose: close,
 				onSelect: (modelId) => {
-					onSelect(toggleModelSelection(selected, modelId));
+					const next = toggleModelSelection(selected, modelId);
+					if (deferCommit) setDraft(next);
+					else onSelect(next);
 				},
 				selectedIds: selected,
 				items,
@@ -3807,14 +3003,14 @@ window.__ModuleLoader__.load({
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						id,
 						type: "button",
-						className: "cc-input cc-ruleTrigger",
+						className: "cc-selector",
 						disabled: disabled || catalog.length === 0,
-						onClick: () => setOpen((value) => !value),
+						onClick: () => open ? close() : setOpen(true),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cc-ruleTriggerText",
-							children: selected.length === 0 ? t("ruleModelPick") : t("ruleModelCount", { count: selected.length })
+							className: "cc-selectorText",
+							children: selected.length === 0 ? t("modelPick") : t("modelCount", { count: selected.length })
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cc-ruleCaret",
+							className: "cc-selectorCaret",
 							"aria-hidden": "true"
 						})]
 					}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -3830,133 +3026,1014 @@ window.__ModuleLoader__.load({
 				})
 			});
 		}
-		/** The model → account routing card: rules in list order (first match wins). */
-		function RulesCard({ t, state, disabled, onAdd, onRemove, onModels, onAccount }) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cc-card",
-				"aria-label": t("rulesTitle"),
+		/** The visible-model filter row: an allowlist over the catalog. Empty = show all. */
+		function VisibleModelsRow({ t, state, disabled, onSelect, onClear }) {
+			const count = state.visibleModels.length;
+			const pickT = (key, params) => {
+				if (key === "modelPick") return t("visibleModelsPick");
+				if (key === "modelCount") return t("visibleModelsCount", params);
+				return t(key, params);
+			};
+			const readiness = {
+				catalogIds: state.catalogModels.map((model) => model.id),
+				catalogFailed: state.catalogFailed
+			};
+			const staleIds = staleModelIds(state.visibleModels, readiness);
+			const catalogReady = catalogIsReady(readiness);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+				title: t("visibleModelsTitle"),
+				titleFor: "cc-visible-models",
+				description: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("visibleModelsHint") }), staleIds.length > 0 && catalogReady ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("visibleModelsStaleHint", { count: staleIds.length }) }) : null] }),
+				error: state.catalogFailed ? t("modelCatalogFailed") : void 0,
+				control: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					catalogReady && staleIds.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "cc-linkButton",
+						disabled,
+						onClick: () => onSelect(state.visibleModels.filter((id) => !staleIds.includes(id))),
+						children: t("visibleModelsCleanStale", { count: staleIds.length })
+					}) : null,
+					count > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "cc-linkButton",
+						disabled,
+						onClick: onClear,
+						children: t("visibleModelsShowAll")
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMultiSelect, {
+						id: "cc-visible-models",
+						selected: state.visibleModels,
+						catalog: state.catalogModels,
+						disabled,
+						t: pickT,
+						onSelect
+					})
+				] })
+			});
+		}
+		/**
+		* One titled group of rows. No card surface: like the harness's own settings
+		* pages, a group is a heading over hairline-separated rows.
+		*/
+		function SettingsGroup({ title, action, children }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "cc-group",
+				"aria-label": title,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cc-groupHead",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "cc-groupTitle",
+						children: title
+					}), action]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cc-rows",
+					children
+				})]
+			});
+		}
+		/**
+		* Models: the plan filter and the allowlist sit together because both decide
+		* what the model picker lists (the allowlist applies after the plan filter).
+		*/
+		function ModelsCard({ state, disabled, t, onEdit, onReset, onSelect, onClear }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SettingsGroup, {
+				title: t("modelsTitle"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
+					id: "cc-filter-models-by-plan",
+					label: t("filterModelsByPlan"),
+					hint: t("filterModelsByPlanHint"),
+					state: state.filterModelsByPlan,
+					disabled,
+					defaultChecked: true,
+					onEdit: (text) => onEdit("filterModelsByPlan", text),
+					onReset: () => onReset("filterModelsByPlan"),
+					t
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisibleModelsRow, {
+					t,
+					state,
+					disabled,
+					onSelect,
+					onClear
+				})]
+			});
+		}
+		/**
+		* Privacy & security: the two opt-ins that change where data goes. ZDR
+		* restricts which upstream serves a request; the command guard sends command
+		* text to a decision model with no ZDR upstream and can skip an approval the
+		* user would otherwise have seen, so both start off.
+		*/
+		function PrivacyCard({ state, disabled, t, onEdit, onReset }) {
+			const showGuardLevel = state.commandGuard.text === "true" || state.commandGuardLevel.overridden || state.commandGuardLevel.clear;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SettingsGroup, {
+				title: t("privacyTitle"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
+						id: "cc-zdr",
+						label: t("zdr"),
+						hint: t("zdrHint"),
+						state: state.zdr,
+						disabled,
+						defaultChecked: false,
+						onEdit: (text) => onEdit("zdr", text),
+						onReset: () => onReset("zdr"),
+						t
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
+						id: "cc-command-guard",
+						label: t("commandGuard"),
+						hint: t("commandGuardHint"),
+						state: state.commandGuard,
+						disabled,
+						defaultChecked: false,
+						onEdit: (text) => onEdit("commandGuard", text),
+						onReset: () => onReset("commandGuard"),
+						t
+					}),
+					showGuardLevel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedField, {
+						className: "cc-rowNested",
+						label: t("commandGuardLevel"),
+						hint: t("commandGuardLevelHint"),
+						state: state.commandGuardLevel,
+						disabled,
+						options: [
+							{
+								value: "high",
+								label: t("commandGuardLevelHigh")
+							},
+							{
+								value: "medium",
+								label: t("commandGuardLevelMedium")
+							},
+							{
+								value: "low",
+								label: t("commandGuardLevelLow")
+							}
+						],
+						defaultValue: COMMAND_GUARD_DEFAULT_LEVEL_CHOICE,
+						onEdit: (text) => onEdit("commandGuardLevel", text),
+						onReset: () => onReset("commandGuardLevel"),
+						t
+					}) : null
+				]
+			});
+		}
+		/** Integrations & display: surfaces outside chat that reuse this provider. */
+		function IntegrationsCard({ state, disabled, t, onEdit, onReset }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SettingsGroup, {
+				title: t("integrationsTitle"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
+					id: "cc-web-search",
+					label: t("webSearch"),
+					hint: t("webSearchHint"),
+					state: state.webSearch,
+					disabled,
+					defaultChecked: true,
+					onEdit: (text) => onEdit("webSearch", text),
+					onReset: () => onReset("webSearch"),
+					t
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
+					id: "cc-show-sidebar-quota",
+					label: t("showSidebarQuota"),
+					hint: t("showSidebarQuotaHint"),
+					state: state.showSidebarQuota,
+					disabled,
+					defaultChecked: false,
+					onEdit: (text) => onEdit("showSidebarQuota", text),
+					onReset: () => onReset("showSidebarQuota"),
+					t
+				})]
+			});
+		}
+		/**
+		* The collapsed "Advanced" card: the API base and the network limits. Starts
+		* collapsed on every visit; while collapsed, a badge names the customized
+		* count and an invalid number (which blocks save) is surfaced on the header.
+		*/
+		function AdvancedSection({ state, disabled, t, onEdit, onReset }) {
+			const [expanded, setExpanded] = (0, react.useState)(false);
+			const overridden = ADVANCED_FIELDS.filter((field) => state[field].overridden).length;
+			const invalid = ADVANCED_FIELDS.some((field) => state[field].invalid);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "cc-group",
+				"aria-label": t("advancedSettings"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "cc-groupHead cc-disclosure",
+						"aria-expanded": expanded,
+						"aria-controls": "cc-advanced-body",
+						onClick: () => setExpanded((value) => !value),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-groupTitle",
+								children: t("advancedSettings")
+							}),
+							overridden > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-badge",
+								children: overridden === 1 ? t("advancedOverriddenOne") : t("advancedOverriddenMany", { count: overridden })
+							}) : null,
+							!expanded && invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-badge cc-badgeWarn",
+								children: t("advancedInvalid")
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-spacer" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: expanded ? "cc-chevron cc-chevronUp" : "cc-chevron",
+								"aria-hidden": "true"
+							})
+						]
+					}),
+					expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						id: "cc-advanced-body",
+						className: "cc-rows",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "cc-groupDesc",
+								children: t("advancedSettingsHint")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+								id: "cc-api-base",
+								label: t("apiBase"),
+								hint: t("apiBaseHint"),
+								state: state.apiBase,
+								disabled,
+								wide: true,
+								onEdit: (text) => onEdit("apiBase", text),
+								onReset: () => onReset("apiBase"),
+								t
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+								id: "cc-request-timeout",
+								label: t("requestTimeoutMs"),
+								hint: t("requestTimeoutMsHint"),
+								state: state.requestTimeoutMs,
+								disabled,
+								numeric: true,
+								onEdit: (text) => onEdit("requestTimeoutMs", text),
+								onReset: () => onReset("requestTimeoutMs"),
+								t
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+								id: "cc-stream-idle-timeout",
+								label: t("streamIdleTimeoutMs"),
+								hint: t("streamIdleTimeoutMsHint"),
+								state: state.streamIdleTimeoutMs,
+								disabled,
+								numeric: true,
+								onEdit: (text) => onEdit("streamIdleTimeoutMs", text),
+								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
+							})
+						]
+					}) : null,
+					expanded && invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-rowError",
+						role: "status",
+						children: t("advancedInvalid")
+					}) : null
+				]
+			});
+		}
+		/**
+		* Merge the controller's accounts with the usage report. The default slot is
+		* always first; report entries this page cannot manage (literal keys from the
+		* composition config) still render, read-only, so the list names every
+		* account the pool rotates through.
+		*/
+		function accountRows(state, usage, t) {
+			const report = new Map((usage.report?.accounts ?? []).map((entry) => [entry.id, entry]));
+			const defaultUsage = report.get("default");
+			const rows = [{
+				id: "default",
+				label: t("accountDefault"),
+				ref: void 0,
+				isDefault: true,
+				managed: true,
+				configured: state.apiKeyConfigured || defaultUsage?.configured === true,
+				storedKey: state.apiKeyConfigured,
+				keyWritable: state.apiKeyWritable,
+				usage: defaultUsage
+			}];
+			for (const account of state.accounts) {
+				const entry = report.get(account.id);
+				rows.push({
+					id: account.id,
+					label: account.label,
+					ref: account.ref,
+					isDefault: false,
+					managed: true,
+					configured: account.configured || entry?.configured === true,
+					storedKey: account.configured,
+					keyWritable: account.writable,
+					usage: entry
+				});
+			}
+			const known = new Set(rows.map((row) => row.id));
+			for (const entry of usage.report?.accounts ?? []) {
+				if (known.has(entry.id)) continue;
+				known.add(entry.id);
+				rows.push({
+					id: entry.id,
+					label: entry.label,
+					ref: void 0,
+					isDefault: false,
+					managed: false,
+					configured: entry.configured,
+					storedKey: false,
+					keyWritable: false,
+					usage: entry
+				});
+			}
+			return rows;
+		}
+		/** The row's status dot: error for a rejected key, warning while cooling down. */
+		function statusDotClass(row) {
+			const entry = row.usage;
+			if (!row.configured || entry?.mark === "invalid-credential") return "cc-tabDot cc-tabDotError";
+			if (entry !== void 0 && (entry.mark !== "" || entry.cooldownUntil > 0)) return "cc-tabDot cc-tabDotWarn";
+			return "cc-tabDot cc-tabDotOk";
+		}
+		/** One compact quota meter for a row's summary line. */
+		function MiniMeter({ label, limit }) {
+			const ratio = windowRatio(limit.used, limit.cap);
+			const percent = limit.cap > 0 ? `${Math.round(ratio * 100)}%` : formatMoney(limit.used);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "cc-miniMeter",
+				title: limit.cap > 0 ? `${formatMoney(limit.used)} / ${formatMoney(limit.cap)}` : void 0,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cc-miniMeterLabel",
+						children: label
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cc-miniMeterTrack",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: limit.exceeded ? "cc-miniMeterFill cc-usageBarFillWarn" : "cc-miniMeterFill",
+							style: { width: `${ratio * 100}%` }
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cc-miniMeterValue",
+						children: percent
+					})
+				]
+			});
+		}
+		/**
+		* The monthly credit balance for a row's summary line: the billing endpoint's
+		* `monthlyCredits` is what is LEFT, shown as the amount alone.
+		*/
+		function MonthlyBalance({ label, remaining }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "cc-miniMeter",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "cc-miniMeterLabel",
+					children: label
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "cc-miniMeterValue",
+					children: formatMoney(Math.max(0, remaining))
+				})]
+			});
+		}
+		/** A single-input inline form (paste key, rename) with confirm/cancel. */
+		function InlineInput({ id, label, secret, initial, placeholder, confirmLabel, disabled, t, onSubmit, onCancel }) {
+			const [value, setValue] = (0, react.useState)(initial ?? "");
+			const [visible, setVisible] = (0, react.useState)(false);
+			const ready = value.trim() !== "";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "cc-inlineForm",
+				onSubmit: (event) => {
+					event.preventDefault();
+					if (ready && !disabled) onSubmit(value);
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					id,
+					className: "cc-input",
+					type: secret && !visible ? "password" : "text",
+					"aria-label": label,
+					autoComplete: "off",
+					spellCheck: false,
+					autoFocus: true,
+					placeholder,
+					value,
+					disabled,
+					onChange: (event) => setValue(event.target.value),
+					onKeyDown: (event) => {
+						if (event.key === "Escape") onCancel();
+					}
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cc-inlineActions",
+					children: [
+						secret && value !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "cc-reset",
+							onClick: () => setVisible((shown) => !shown),
+							children: visible ? t("hide") : t("show")
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-spacer" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "ghost",
+							size: "sm",
+							type: "button",
+							onClick: onCancel,
+							children: t("cancel")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "primary",
+							size: "sm",
+							type: "submit",
+							disabled: !ready || disabled,
+							children: confirmLabel
+						})
+					]
+				})]
+			});
+		}
+		/** A destructive confirmation bar shown in place of a menu action. */
+		function ConfirmBar({ text, confirmLabel, disabled, t, onConfirm, onCancel }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-confirmBar",
+				role: "alertdialog",
+				"aria-label": text,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "cc-confirmText",
+					children: text
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cc-inlineActions",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-spacer" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "ghost",
+							size: "sm",
+							onClick: onCancel,
+							children: t("cancel")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "outline",
+							size: "sm",
+							className: "cc-dangerButton",
+							disabled,
+							onClick: onConfirm,
+							children: confirmLabel
+						})
+					]
+				})]
+			});
+		}
+		/** One account row: identity, status, quota summary, actions and expandable details. */
+		function AccountItem({ row, rows, state, usage, login, disabled, pinned, t, actions }) {
+			const [expanded, setExpanded] = (0, react.useState)(false);
+			const [menuOpen, setMenuOpen] = (0, react.useState)(false);
+			const [mode, setMode] = (0, react.useState)(void 0);
+			const entry = row.usage;
+			const report = entry?.report;
+			const accountName = report?.account === void 0 ? "" : report.account.userName || report.account.name;
+			const planName = report?.plan?.name ?? "";
+			const credits = report?.credits;
+			const monthlyReported = credits !== void 0 && credits.monthlyReported !== false;
+			const multi = rows.length > 1;
+			const loginTarget = row.ref;
+			const { visible: loginState, busyElsewhere } = loginStateForTarget(login, loginTarget);
+			const loginBusy = loginState.phase === "starting" || loginState.phase === "waiting";
+			const showLogin = loginState.phase !== "idle";
+			const locked = disabled || !row.managed;
+			const keyActions = !locked && row.keyWritable;
+			const items = [];
+			if (row.managed && multi) items.push(pinned ? {
+				id: "unpin",
+				label: t("accountActionUnpin"),
+				disabled: locked
+			} : {
+				id: "pin",
+				label: t("accountActionPin"),
+				disabled: locked || !row.configured
+			});
+			if (row.managed) {
+				if (items.length > 0) items.push({
+					type: "separator",
+					id: "sep-key"
+				});
+				items.push({
+					id: "login",
+					label: t("accountActionLogin"),
+					disabled: !keyActions || loginBusy || busyElsewhere
+				}, {
+					id: "key",
+					label: t("accountActionKey"),
+					disabled: !keyActions
+				});
+				if (!row.isDefault) items.push({
+					id: "rename",
+					label: t("accountActionRename"),
+					disabled: locked
+				});
+				if (row.isDefault && row.storedKey) items.push({
+					type: "separator",
+					id: "sep-danger"
+				}, {
+					id: "clearKey",
+					label: t("accountActionClearKey"),
+					disabled: !keyActions,
+					danger: true
+				});
+				if (!row.isDefault) items.push({
+					type: "separator",
+					id: "sep-danger"
+				}, {
+					id: "remove",
+					label: t("accountActionRemove"),
+					disabled: locked,
+					danger: true
+				});
+			}
+			const onAction = (id) => {
+				setMenuOpen(false);
+				if (id === "pin") actions.setActive(row.id);
+				else if (id === "unpin") actions.setActive("");
+				else if (id === "login") actions.beginLogin(loginTarget);
+				else if (id === "key" || id === "rename" || id === "remove" || id === "clearKey") setMode(id);
+			};
+			const models = state.accountModels[row.id] ?? [];
+			const ownerOf = (modelId) => {
+				for (const [account, list] of Object.entries(state.accountModels)) {
+					if (account === row.id || !list.includes(modelId)) continue;
+					return rows.find((candidate) => candidate.id === account)?.label ?? account;
+				}
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: row.usage?.active ? "cc-accountItem cc-accountItemActive" : "cc-accountItem",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-accountHead",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: "cc-accountToggle",
+							"aria-expanded": expanded,
+							"aria-controls": `cc-account-${row.id}-details`,
+							onClick: () => setExpanded((value) => !value),
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: statusDotClass(row),
+									"aria-hidden": "true"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-accountName",
+									children: row.label
+								}),
+								accountName !== "" && accountName !== row.label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-usageAccount",
+									children: accountName
+								}) : null,
+								planName !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-usagePlan",
+									children: planName
+								}) : null,
+								entry?.active && multi ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-badge",
+									children: t("usageActive")
+								}) : null,
+								pinned ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-badge",
+									children: t("accountStatusPinned")
+								}) : null,
+								!row.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-badgeMuted",
+									children: t("apiKeyUnset")
+								}) : null,
+								entry?.mark === "invalid-credential" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-usagePlanStatus",
+									children: t("usageInvalidKey")
+								}) : null,
+								entry !== void 0 && entry.mark !== "invalid-credential" && (entry.cooldownUntil > 0 || entry.mark === "rate-limit") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "cc-usagePlanStatus",
+									children: [t("usageCooldown"), entry.cooldownUntil > 0 ? ` ${formatResetAt(entry.cooldownUntil)}` : ""]
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-spacer" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: expanded ? "cc-chevron cc-chevronUp" : "cc-chevron",
+									"aria-hidden": "true"
+								})
+							]
+						}), items.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Menu, {
+							open: menuOpen,
+							onClose: () => setMenuOpen(false),
+							onSelect: onAction,
+							items,
+							align: "end",
+							portal: true,
+							anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-iconButton",
+								"aria-label": `${row.label} — ${t("accountActions")}`,
+								title: t("accountActions"),
+								"aria-haspopup": "menu",
+								"aria-expanded": menuOpen,
+								onClick: () => setMenuOpen((value) => !value),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-kebab",
+									"aria-hidden": "true"
+								})
+							})
+						}) : null]
+					}),
+					credits !== void 0 && (credits.fiveHour !== void 0 || credits.weekly !== void 0 || monthlyReported) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-accountMeters",
+						children: [
+							credits.fiveHour !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MiniMeter, {
+								label: t("usageFiveHour"),
+								limit: credits.fiveHour
+							}) : null,
+							credits.weekly !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MiniMeter, {
+								label: t("usageWeekly"),
+								limit: credits.weekly
+							}) : null,
+							monthlyReported ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthlyBalance, {
+								label: t("usageMonthlyLeft"),
+								remaining: credits.monthlyCredits
+							}) : null
+						]
+					}) : null,
+					!row.configured && row.managed && mode === void 0 && !showLogin ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-accountSetup",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "cc-hint",
+							children: row.keyWritable ? t("accountNoKeyHint") : t("apiKeyLocked")
+						}), keyActions ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "cc-inlineActions",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "primary",
+								size: "sm",
+								disabled: loginBusy || busyElsewhere,
+								onClick: () => actions.beginLogin(loginTarget),
+								children: t("accountAddLogin")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "ghost",
+								size: "sm",
+								onClick: () => setMode("key"),
+								children: t("accountAddPaste")
+							})]
+						}) : null]
+					}) : null,
+					showLogin ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoginStatus, {
+						state: loginState,
+						t,
+						onCancel: actions.cancelLogin
+					}) : null,
+					mode === "key" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineInput, {
+						id: `cc-account-${row.id}-key`,
+						label: t("accountKeyPlaceholder"),
+						secret: true,
+						placeholder: t("accountKeyPlaceholder"),
+						confirmLabel: t("accountApply"),
+						disabled: disabled || state.accountBusy,
+						t,
+						onCancel: () => setMode(void 0),
+						onSubmit: (value) => {
+							actions.setKey(row.id, value).then((ok) => {
+								if (ok) setMode(void 0);
+							});
+						}
+					}) : null,
+					mode === "rename" && row.ref !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineInput, {
+						id: `cc-account-${row.id}-rename`,
+						label: t("accountActionRename"),
+						initial: row.label,
+						confirmLabel: t("accountApply"),
+						disabled: disabled || state.accountBusy,
+						t,
+						onCancel: () => setMode(void 0),
+						onSubmit: (value) => {
+							actions.rename(row.ref, value).then((ok) => {
+								if (ok) setMode(void 0);
+							});
+						}
+					}) : null,
+					mode === "remove" && row.ref !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfirmBar, {
+						text: t("accountRemoveConfirm", { name: row.label }),
+						confirmLabel: t("accountConfirmRemove"),
+						disabled: disabled || state.accountBusy,
+						t,
+						onCancel: () => setMode(void 0),
+						onConfirm: () => {
+							actions.remove(row.ref).then((ok) => {
+								if (ok) setMode(void 0);
+							});
+						}
+					}) : null,
+					mode === "clearKey" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfirmBar, {
+						text: t("accountClearKeyConfirm"),
+						confirmLabel: t("accountConfirmClear"),
+						disabled: disabled || state.accountBusy,
+						t,
+						onCancel: () => setMode(void 0),
+						onConfirm: () => {
+							actions.clearKey(row.id).then((ok) => {
+								if (ok) setMode(void 0);
+							});
+						}
+					}) : null,
+					expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						id: `cc-account-${row.id}-details`,
+						className: "cc-accountDetails",
+						children: [entry !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountReport, {
+							entry,
+							fetchedAt: usage.fetchedAt,
+							t,
+							headless: true
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "cc-usageHint",
+							children: usage.status === "loading" ? t("usageLoading") : t("usageUnconfigured")
+						}), multi && row.managed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+							className: "cc-rowFlush",
+							title: t("accountModels"),
+							titleFor: `cc-account-${row.id}-models`,
+							description: t("accountModelsHint"),
+							error: state.catalogFailed ? t("modelCatalogFailed") : void 0,
+							control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMultiSelect, {
+								id: `cc-account-${row.id}-models`,
+								selected: models,
+								catalog: state.catalogModels,
+								disabled: disabled || state.accountBusy,
+								deferCommit: true,
+								ownerOf,
+								t,
+								onSelect: (ids) => void actions.setModels(row.id, ids)
+							})
+						}) : null]
+					}) : null
+				]
+			});
+		}
+		/** The live status of one browser sign-in: link while waiting, outcome after. */
+		function LoginStatus({ state, t, onCancel }) {
+			const hint = loginHint(state, t);
+			const busy = state.phase === "starting" || state.phase === "waiting";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-loginStatus",
+				role: "status",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: hint.className,
+						title: hint.title,
+						children: hint.text
+					}),
+					state.authUrl !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						className: "cc-loginLink",
+						href: state.authUrl,
+						target: "_blank",
+						rel: "noreferrer",
+						children: t("loginOpenLink")
+					}) : null,
+					busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "cc-reset",
+						onClick: onCancel,
+						children: t("loginCancel")
+					}) : null
+				]
+			});
+		}
+		/**
+		* The add-account panel. Both paths store the account at once: pasting a key
+		* writes key then row; browser sign-in stores a keyless row first (the Host
+		* only signs in to a reference the stored list names) and drops it again if
+		* the sign-in does not complete, so a failed attempt leaves no empty account.
+		*/
+		function AddAccountPanel({ state, login, disabled, t, actions, pendingRef, setPendingRef, onClose }) {
+			const [label, setLabel] = (0, react.useState)("");
+			const [pasting, setPasting] = (0, react.useState)(false);
+			const [loginFailure, setLoginFailure] = (0, react.useState)(void 0);
+			const fallbackName = t("accountNameN", { n: state.accounts.length + 2 });
+			const pending = pendingRef === void 0 ? void 0 : loginStateForTarget(login, pendingRef).visible;
+			const busy = state.accountBusy || pending?.phase === "starting" || pending?.phase === "waiting";
+			const loginBusyElsewhere = login.phase === "starting" || login.phase === "waiting";
+			(0, react.useEffect)(() => {
+				if (pendingRef === void 0 || login.targetRef !== pendingRef) return;
+				if (login.phase === "success") {
+					const named = label.trim() === "" && login.userName !== void 0 && login.userName !== "";
+					setPendingRef(void 0);
+					(named ? actions.rename(pendingRef, login.userName) : Promise.resolve(true)).then(onClose);
+					return;
+				}
+				if (login.phase === "failed" || login.phase === "unavailable") {
+					setLoginFailure(loginHint(login, t).text);
+					setPendingRef(void 0);
+					actions.remove(pendingRef);
+				}
+			}, [
+				login,
+				pendingRef,
+				setPendingRef,
+				label,
+				actions,
+				onClose,
+				t
+			]);
+			const startLogin = async () => {
+				setLoginFailure(void 0);
+				const ref = await actions.create({ label: label.trim() === "" ? fallbackName : label });
+				if (ref === void 0) return;
+				setPendingRef(ref);
+				actions.beginLogin(ref);
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-addPanel",
+				"aria-label": t("accountAdd"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cc-panelTitle",
+						children: t("accountAdd")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						className: "cc-input",
+						type: "text",
+						"aria-label": t("accountNamePlaceholder"),
+						placeholder: t("accountNamePlaceholder"),
+						value: label,
+						disabled: disabled || busy,
+						onChange: (event) => setLabel(event.target.value)
+					}),
+					pending !== void 0 && pending.phase !== "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoginStatus, {
+						state: pending,
+						t,
+						onCancel: actions.cancelLogin
+					}) : null,
+					loginFailure !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-loginError",
+						children: loginFailure
+					}) : null,
+					pasting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineInput, {
+						id: "cc-add-account-key",
+						label: t("accountKeyPlaceholder"),
+						secret: true,
+						placeholder: t("accountKeyPlaceholder"),
+						confirmLabel: t("accountAddConfirm"),
+						disabled: disabled || busy,
+						t,
+						onCancel: () => setPasting(false),
+						onSubmit: (key) => {
+							actions.create({
+								label: label.trim() === "" ? fallbackName : label,
+								key
+							}).then((ref) => {
+								if (ref !== void 0) onClose();
+							});
+						}
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-hint",
+						children: t("accountAddHint")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-inlineActions",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "primary",
+								size: "sm",
+								disabled: disabled || busy || loginBusyElsewhere,
+								onClick: () => void startLogin(),
+								children: t("accountAddLogin")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "ghost",
+								size: "sm",
+								disabled: disabled || busy,
+								onClick: () => setPasting(true),
+								children: t("accountAddPaste")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-spacer" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "ghost",
+								size: "sm",
+								disabled: busy,
+								onClick: onClose,
+								children: t("cancel")
+							})
+						]
+					})] })
+				]
+			});
+		}
+		/**
+		* The unified account card: every account the pool rotates through, one row
+		* each, with its status and quota inline. Replaces the former split between
+		* a credentials card, a usage card and a routing-rules card, so one account's
+		* facts no longer have to be cross-read across three surfaces.
+		*/
+		function AccountsCard({ t, state, usage, login, disabled, actions, onRefresh }) {
+			const [adding, setAdding] = (0, react.useState)(false);
+			const [pendingRef, setPendingRef] = (0, react.useState)(void 0);
+			const closeAdd = (0, react.useCallback)(() => setAdding(false), []);
+			const { loading, shouldRefresh } = usageCardState(usage);
+			(0, react.useEffect)(() => {
+				if (shouldRefresh) onRefresh();
+			}, [shouldRefresh, onRefresh]);
+			const rows = accountRows(state, usage, t).filter((row) => row.ref === void 0 || row.ref !== pendingRef);
+			const multi = rows.length > 1;
+			const pinnedRow = rows.find((row) => row.id === state.activeAccount);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "cc-group",
+				"aria-label": t("accountsTitle"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-field",
+						className: "cc-groupHead",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "cc-fieldHead",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-									className: "cc-label",
-									children: t("rulesTitle")
-								}), /* @__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("ruleAdd")
-									})
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "cc-hint",
-								children: t("rulesHint")
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "cc-groupTitle",
+								children: t("accountsTitle")
 							}),
-							state.catalogFailed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "cc-invalid",
-								children: t("rulesCatalogFailed")
-							}) : null
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-spacer" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-linkButton",
+								disabled: loading,
+								onClick: onRefresh,
+								children: loading ? t("usageRefreshing") : t("usageRefresh")
+							})
 						]
 					}),
-					state.rules.map((rule) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleRow, {
-						rule,
-						accounts: state.accounts,
-						catalog: state.catalogModels,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-groupDesc",
+						children: multi ? t("accountsRotationHint") : t("accountsHint")
+					}),
+					multi ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-accountMode",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: pinnedRow !== void 0 ? t("accountModePinned", { name: pinnedRow.label }) : t("accountModeAuto") }), pinnedRow !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "cc-reset",
+							disabled: disabled || state.accountBusy,
+							onClick: () => void actions.setActive(""),
+							children: t("accountActionUnpin")
+						}) : null]
+					}) : null,
+					usage.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "cc-rowError",
+						role: "status",
+						children: [t("usageError"), usage.error !== void 0 && usage.error !== "" ? ` — ${usage.error}` : ""]
+					}) : null,
+					state.accountFailed !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-rowError",
+						role: "status",
+						children: t("accountOpFailed")
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cc-accountList",
+						children: rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountItem, {
+							row,
+							rows,
+							state,
+							usage,
+							login,
+							disabled,
+							pinned: state.activeAccount === row.id,
+							t,
+							actions
+						}, row.id))
+					}),
+					adding ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddAccountPanel, {
+						state,
+						login,
 						disabled,
 						t,
-						onModels: (ids) => onModels(rule.id, ids),
-						onAccount: (text) => onAccount(rule.id, text),
-						onRemove: () => onRemove(rule.id)
-					}, rule.id)),
-					state.rules.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-hint",
-						children: t("rulesEmpty")
-					}) : null
+						actions,
+						pendingRef,
+						setPendingRef,
+						onClose: closeAdd
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "cc-addButton",
+						disabled,
+						onClick: () => setAdding(true),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cc-addGlyph",
+							"aria-hidden": "true"
+						}), t("accountAdd")]
+					})
 				]
 			});
 		}
-		/** The visible-model filter card: an allowlist over the catalog. Empty = show all. */
-		function VisibleModelsCard({ t, state, disabled, onSelect, onClear }) {
-			const count = state.visibleModels.length;
-			const pickT = (key, params) => {
-				if (key === "ruleModelPick") return t("visibleModelsPick");
-				if (key === "ruleModelCount") return t("visibleModelsCount", params);
-				return t(key, params);
-			};
-			const readiness = {
-				catalogIds: state.catalogModels.map((model) => model.id),
-				catalogFailed: state.catalogFailed
-			};
-			const staleIds = staleModelIds(state.visibleModels, readiness);
-			const catalogReady = catalogIsReady(readiness);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cc-card",
-				"aria-label": t("visibleModelsTitle"),
-				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("visibleModelsTitle")
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: "cc-badges",
-								children: [catalogReady && staleIds.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "cc-reset",
-									disabled,
-									onClick: () => onSelect(state.visibleModels.filter((id) => !staleIds.includes(id))),
-									children: t("visibleModelsCleanStale", { count: staleIds.length })
-								}) : null, count > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "cc-reset",
-									disabled,
-									onClick: onClear,
-									children: t("visibleModelsShowAll")
-								}) : null]
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "cc-hint",
-							children: t("visibleModelsHint")
-						}),
-						state.catalogFailed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "cc-invalid",
-							children: t("rulesCatalogFailed")
-						}) : null,
-						staleIds.length > 0 && catalogReady ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "cc-hint",
-							children: t("visibleModelsStaleHint", { count: staleIds.length })
-						}) : null,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMultiSelect, {
-							id: "cc-visible-models",
-							selected: state.visibleModels,
-							catalog: state.catalogModels,
-							disabled,
-							t: pickT,
-							onSelect
-						})
-					]
-				})
-			});
-		}
 		/**
-		* Show the "Saved ✓" affordance for a short window after each accepted save.
+		* Show the save bar's "saved" confirmation 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);
+			const seen = (0, react.useRef)(tick);
 			(0, react.useEffect)(() => {
-				if (tick === 0) return;
+				if (tick === seen.current) return;
+				seen.current = tick;
 				setVisible(true);
 				const timer = setTimeout(() => setVisible(false), 2500);
 				return () => clearTimeout(timer);
@@ -3986,29 +4063,157 @@ window.__ModuleLoader__.load({
 			}, []);
 			return available;
 		}
-		/** The settings page body: connection facts for the Command Code provider. */
+		/**
+		* What the save bar says. It exists only while there is something to act on
+		* or to confirm: pending edits, a save in flight, a failure, or the brief
+		* confirmation after a save landed. Account operations never reach it, they
+		* commit on their own.
+		*/
+		function saveBarView(state, savedVisible, t) {
+			if (state.failed) return {
+				visible: true,
+				tone: "error",
+				message: t("saveFailed"),
+				actions: state.dirty
+			};
+			if (state.dirty || state.saving) return state.invalid ? {
+				visible: true,
+				tone: "error",
+				message: t("saveInvalid"),
+				actions: true
+			} : {
+				visible: true,
+				tone: "pending",
+				message: t("unsavedChanges"),
+				actions: true
+			};
+			if (savedVisible) return {
+				visible: true,
+				tone: "success",
+				message: t("saved"),
+				actions: false
+			};
+			return {
+				visible: false,
+				tone: "success",
+				message: "",
+				actions: false
+			};
+		}
+		/** The save bar's leading status mark: a soft dot while pending, a glyph once there is an outcome. */
+		function SaveBarIcon({ tone }) {
+			if (tone === "pending") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cc-saveBarIcon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-saveBarPulse" })
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cc-saveBarIcon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+					viewBox: "0 0 16 16",
+					width: "16",
+					height: "16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.6",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "8",
+						cy: "8",
+						r: "6.5"
+					}), tone === "success" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.2 8.2l1.9 1.9 3.7-3.9" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 4.8v3.6M8 11.1v.1" })]
+				})
+			});
+		}
+		/**
+		* The floating save bar: pinned to the bottom of the settings scrollport and
+		* slid out of view when there is nothing to save. It stays mounted so it can
+		* animate out, and keeps showing its last message while it does (the state
+		* that hid it has no message of its own).
+		*/
+		function SaveBar({ view, state, t, onDiscard, onSave }) {
+			const last = (0, react.useRef)(view);
+			if (view.visible) last.current = view;
+			const shown = view.visible ? view : last.current;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cc-saveBarDock",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: `cc-saveBar cc-saveBar-${shown.tone}${view.visible ? " cc-saveBarShown" : ""}`,
+					role: "region",
+					"aria-label": t("save"),
+					"aria-hidden": !view.visible,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SaveBarIcon, { tone: shown.tone }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "cc-saveBarText",
+							role: "status",
+							"aria-live": "polite",
+							title: shown.message,
+							children: shown.message
+						}),
+						shown.actions ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "cc-saveBarActions",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-saveBarButton cc-saveBarGhost",
+								disabled: !view.visible || !state.dirty || state.saving,
+								onClick: onDiscard,
+								children: t("discard")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-saveBarButton cc-saveBarPrimary",
+								disabled: !view.visible || !state.dirty || state.invalid || state.saving,
+								onClick: onSave,
+								children: t(state.saving ? "saving" : "save")
+							})]
+						}) : null
+					]
+				})
+			});
+		}
+		/** The settings page body: accounts, then the staged provider settings. */
 		function CommandCodeSettingsPage(props) {
 			const { t } = props;
-			const footerMarker = (0, react.useRef)(null);
-			const [footerFloating, setFooterFloating] = (0, react.useState)(false);
 			const state = props.useCommandCodeSettings((snapshot) => snapshot);
 			const usage = props.useCommandCodeUsage((snapshot) => snapshot);
 			const login = props.useCommandCodeLogin((snapshot) => snapshot);
 			const disabled = !state.writable;
-			const keyLocked = !state.apiKeyWritable;
 			const savedVisible = useSavedFlash(state.savedCount);
 			const updateVersion = usePluginUpdate();
-			(0, react.useEffect)(() => {
-				const marker = footerMarker.current;
-				if (!marker || typeof IntersectionObserver === "undefined") return;
-				const observer = new IntersectionObserver(([entry]) => {
-					if (entry) setFooterFloating(!entry.isIntersecting);
-				});
-				observer.observe(marker);
-				return () => observer.disconnect();
-			}, []);
+			const { createAccount, renameAccount, removeAccount, setAccountKey, clearAccountKey, setActiveAccount, setAccountModels, beginLogin, cancelLogin } = props;
+			const actions = (0, react.useMemo)(() => ({
+				create: createAccount,
+				rename: renameAccount,
+				remove: removeAccount,
+				setKey: setAccountKey,
+				clearKey: clearAccountKey,
+				setActive: setActiveAccount,
+				setModels: setAccountModels,
+				beginLogin,
+				cancelLogin
+			}), [
+				createAccount,
+				renameAccount,
+				removeAccount,
+				setAccountKey,
+				clearAccountKey,
+				setActiveAccount,
+				setAccountModels,
+				beginLogin,
+				cancelLogin
+			]);
+			const bar = saveBarView(state, savedVisible, t);
+			const form = {
+				state,
+				disabled,
+				t,
+				onEdit: props.edit,
+				onReset: props.resetField
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: "cc-section",
+				className: bar.visible ? "cc-section cc-sectionWithBar" : "cc-section",
 				"aria-label": t("title"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
@@ -4024,117 +4229,23 @@ window.__ModuleLoader__.load({
 						role: "status",
 						children: t("readOnly")
 					}) : null,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageCard, {
-						t,
-						usage,
-						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,
+						usage,
 						login,
 						disabled,
-						onAdd: props.addAccount,
-						onRemove: props.removeAccount,
-						onLabel: props.editAccountLabel,
-						onKey: props.editAccountKey,
-						onToggleClear: (id) => props.toggleKeyClear(id),
-						onActive: (text) => props.edit("activeAccount", text),
-						onActiveReset: () => props.resetField("activeAccount"),
-						onBeginLogin: props.beginLogin,
-						onCancelLogin: props.cancelLogin
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RulesCard, {
-						t,
-						state,
-						disabled,
-						onAdd: props.addRule,
-						onRemove: props.removeRule,
-						onModels: props.editRuleModels,
-						onAccount: props.editRuleAccount
+						actions,
+						onRefresh: props.refreshUsage
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisibleModelsCard, {
-						t,
-						state,
-						disabled,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelsCard, {
+						...form,
 						onSelect: props.editVisibleModels,
 						onClear: props.clearVisibleModels
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-card",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecretKeyField, {
-							label: t("apiKey"),
-							hint: keyLocked ? t("apiKeyLocked") : t("apiKeyHint"),
-							state: state.apiKey,
-							disabled: disabled || keyLocked || login.targetRef === void 0 && (login.phase === "starting" || login.phase === "waiting"),
-							configured: state.apiKeyConfigured,
-							configuredLabel: t("apiKeySet"),
-							unconfiguredLabel: t("apiKeyUnset"),
-							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)(LoginRow, {
-							state: login,
-							disabled: disabled || keyLocked || state.dirty,
-							disabledHint: state.dirty ? t("loginSaveBefore") : void 0,
-							t,
-							onBegin: props.beginLogin,
-							onCancel: props.cancelLogin
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdvancedSection, {
-						state,
-						disabled,
-						t,
-						onEdit: props.edit,
-						onReset: props.resetField
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						ref: footerMarker,
-						className: "cc-footerMarker",
-						"aria-hidden": "true"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `cc-footer cc-footerSticky${footerFloating ? " cc-footerFloating" : ""}`,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "cc-footerActions",
-							children: [
-								state.failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "cc-failed",
-									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",
-									disabled: !state.dirty || state.saving,
-									onClick: props.discard,
-									children: t("discard")
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-									variant: "primary",
-									size: "sm",
-									disabled: !state.dirty || state.invalid || state.saving,
-									onClick: props.save,
-									children: t(state.saving ? "saving" : "save")
-								})
-							]
-						})
-					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrivacyCard, { ...form }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IntegrationsCard, { ...form }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdvancedSection, { ...form }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 						className: "cc-version",
 						children: [
@@ -4154,6 +4265,62 @@ window.__ModuleLoader__.load({
 								]
 							})] }) : null
 						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SaveBar, {
+						view: bar,
+						state,
+						t,
+						onDiscard: props.discard,
+						onSave: props.save
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/login-row.tsx
+		/** The sign-in alternative to pasting a key (settings page + Models card). */
+		function LoginRow({ state, targetRef, disabled, disabledHint, t, onBegin, onCancel }) {
+			const { visible: visibleState, busyElsewhere } = loginStateForTarget(state, targetRef);
+			const busy = visibleState.phase === "starting" || visibleState.phase === "waiting";
+			const hint = loginHint(visibleState, t);
+			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)("span", {
+							className: "cc-label",
+							children: t("loginTitle")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cc-badges",
+							children: busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-reset",
+								onClick: onCancel,
+								children: t("loginCancel")
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-reset",
+								disabled: disabled || busyElsewhere,
+								onClick: onBegin,
+								children: t("loginButton")
+							})
+						})]
+					}),
+					visibleState.authUrl !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-hint",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							className: "cc-loginLink",
+							href: visibleState.authUrl,
+							target: "_blank",
+							rel: "noreferrer",
+							children: t("loginOpenLink")
+						})
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: hint.className,
+						title: hint.title,
+						children: disabled && !busy && disabledHint !== void 0 ? disabledHint : hint.text
 					})
 				]
 			});
@@ -4682,16 +4849,13 @@ window.__ModuleLoader__.load({
 		* Project the shared usage snapshot into the panel's render tree.
 		*
 		* Deduplication matches the settings card: hand-edited settings can name one
-		* credential twice, and removal staging hides an account before the post-save
-		* refresh lands.
+		* credential twice.
 		*/
 		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) => {
-				if (hidden.has(entry.id)) return false;
 				if (seen.has(entry.id)) return false;
 				seen.add(entry.id);
 				return true;
@@ -4833,12 +4997,9 @@ window.__ModuleLoader__.load({
 		*/
 		/** The panel's view, recomputed from both seats on every notification. */
 		function usePanelView(props) {
-			const usage = props.useCommandCodeUsage((state) => state);
-			const settings = props.useCommandCodeSettings((state) => state);
 			return buildPanelView({
-				usage,
-				apiKeyConfigured: settings.anyAccountConfigured,
-				removingIds: settings.accountsRemoving,
+				usage: props.useCommandCodeUsage((state) => state),
+				apiKeyConfigured: props.useCommandCodeSettings((state) => state).anyAccountConfigured,
 				t: props.t ?? panelTextEN
 			});
 		}
@@ -6204,33 +6365,88 @@ window.__ModuleLoader__.load({
 		* that silently drops one stylesheet.
 		*/
 		const PAGE_CSS_ID = "@mars-sea/dsh-commandcode-provider/CommandCodeSettingsPage.module.css";
-		/** The settings-page stylesheet. */
+		/**
+		* The settings-page stylesheet.
+		*
+		* The metrics are the harness's own settings pages', read out of the 0.1.7
+		* bundles so the page sits beside General and Models without looking foreign:
+		* a row is 16px of padding over a 0.5px border-l2 hairline, its title 14/22
+		* label-primary and its description 12/18 label-tertiary, the control on the
+		* right. Selectors and buttons are capsules (36px / 28px compact), inputs are
+		* 32px with an 8px radius and a 0.5px border-l4 edge, a card is a 0.5px
+		* border-l4 outline with a 16px radius, and a nested panel is a
+		* bg-module-platform fill with a 12px radius. Errors use state-error-primary,
+		* the platform's error colour (label-error is its text-only sibling).
+		*/
 		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-section{max-width:720px;color:var(--dsw-alias-label-primary);flex-direction:column;display:flex}
+.cc-title{margin:0;color:var(--dsw-alias-label-primary);font-size:16px;font-weight:500;line-height:24px}
+.cc-intro{margin:4px 0 0;color:var(--dsw-alias-label-tertiary);font-size:14px;line-height:22px}
+.cc-readOnly{margin:8px 0 0;color:var(--dsw-alias-state-warn-label,var(--dsw-alias-label-tertiary));font-size:12px;line-height:18px}
+.cc-spacer{flex:1}
+/* Groups: a heading over hairline-separated rows, no card surface. */
+.cc-group{flex-direction:column;display:flex;margin-top:28px}
+.cc-groupHead{align-items:center;gap:8px;display:flex;min-height:28px;padding-bottom:4px}
+.cc-groupTitle{margin:0;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500;line-height:22px}
+.cc-groupDesc{margin:0 0 12px;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.cc-rows>.cc-groupDesc{margin:0;padding:4px 0 0}
+.cc-disclosure{width:100%;padding:0 0 4px;border:0;background:0 0;font:inherit;text-align:left;cursor:pointer;border-radius:6px}
+.cc-disclosure:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
+.cc-rows{flex-direction:column;display:flex}
+.cc-row{align-items:center;gap:8px;display:flex;padding:16px 0;border-bottom:.5px solid var(--dsw-alias-border-l2)}
+.cc-rows>.cc-row:last-child{border-bottom:0}
+.cc-rowNested{padding-left:16px}
+.cc-rowFlush{padding:0;border-bottom:0}
+.cc-rowText{flex-direction:column;flex:1;gap:4px;min-width:0;padding-right:32px;display:flex}
+.cc-rowTitleLine{align-items:center;gap:8px;display:flex;min-width:0}
+.cc-rowTitle{min-width:0;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:22px}
+.cc-rowDesc{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.cc-rowDesc p{margin:0}
+.cc-rowDesc p+p{margin-top:4px}
+.cc-rowError{margin:0;color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
+.cc-rowControl{flex:none;align-items:center;justify-content:flex-end;gap:8px;display:inline-flex;max-width:60%}
+.cc-rowInput{width:200px}
+.cc-rowInputWide{width:280px}
+/* The platform's link button: a compact capsule with no fill until hovered. */
+.cc-linkButton{box-sizing:border-box;flex:none;align-items:center;display:inline-flex;height:28px;padding:0 10px;border:0;border-radius:14px;background:0 0;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:12px;line-height:18px;white-space:nowrap;cursor:pointer}
+.cc-linkButton:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}
+.cc-linkButton:disabled{cursor:default;opacity:.4}
+.cc-linkButton:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3)}
+/* Tags: the platform Tag's capsule (11/17, weight 500). */
+.cc-badges{align-items:center;gap:8px;display:inline-flex}
+.cc-badge,.cc-badgeMuted{flex:none;align-items:center;display:inline-flex;white-space:nowrap;border-radius:999px;corner-shape:round;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.cc-badge{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary)}
+.cc-badgeMuted{border:.5px solid var(--dsw-alias-border-l4);color:var(--dsw-alias-label-tertiary)}
+.cc-badgeWarn{background:var(--dsw-alias-state-warn-tertiary,var(--dsw-alias-bg-module-platform));color:var(--dsw-alias-state-warn-label,var(--dsw-alias-label-secondary))}
+/* The stacked field (the Models-page provider card and the account forms):
+ * the platform SettingsForm field's metrics. */
 .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-field+.cc-field{border-top:.5px 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{font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:18px}
 .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-reset:disabled{cursor:default;opacity:.4}
+.cc-input{box-sizing:border-box;height:32px;min-width:0;padding:0 10px;border:.5px solid var(--dsw-alias-border-l4);border-radius:8px;background:var(--dsw-alias-bg-layer-1);font:inherit;color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
+.cc-input::placeholder{color:var(--dsw-alias-label-dimmed)}
 .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-input:disabled{opacity:.6;cursor:default}
+.cc-inputInvalid{border-color:var(--dsw-alias-state-error-primary)}
+.cc-invalid{color:var(--dsw-alias-state-error-primary);margin:0;font-size:12px;line-height:18px}
+.cc-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:18px}
+/* The model multi-select trigger: the platform's selector capsule (the
+ * language / permission pickers on General). */
+.cc-modelSelectAnchor{flex-direction:column;align-items:stretch;gap:6px;display:inline-flex;min-width:160px}
+.cc-selector{box-sizing:border-box;align-items:center;gap:12px;display:inline-flex;height:36px;padding:0 14px;border:0;border-radius:18px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary);font:inherit;font-size:14px;line-height:22px;text-align:left;cursor:pointer}
+.cc-selector:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.cc-selector:disabled{cursor:default;opacity:.4}
+.cc-selector:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3)}
+.cc-selectorText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cc-selectorCaret{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-bottom:3px;transform:rotate(45deg)}
+/* The search box sits inside the Menu anchor, so typing in it never trips
+ * the Menu's outside-click close. */
+.cc-modelSearch{width:100%}
+.cc-modelSearch::-webkit-search-cancel-button{cursor:pointer}
 .cc-checkRow{align-items:center;gap:8px;display:inline-flex;min-width:0}
 .cc-checkRow:hover{cursor:pointer}
 /* A hand-drawn box rather than the platform's accent-color checkbox: the
@@ -6246,126 +6462,168 @@ window.__ModuleLoader__.load({
 .cc-check:checked{background:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary)}
 .cc-check:checked::after{content:'';position:absolute;top:3px;left:5px;width:3px;height:7px;border:solid var(--dsw-alias-label-primary-foreground,#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}
-/* Keep the original footer in flow and inside the settings scrollport. */
-.cc-footerMarker{height:1px;margin:-6px 0 -7px;pointer-events:none}
-.cc-footerSticky{position:sticky;bottom:0;z-index:2;flex-shrink:0;min-height:48px;pointer-events:none}
-.cc-footerActions{align-items:center;gap:8px;display:flex;pointer-events:auto}
-.cc-footerFloating .cc-footerActions{padding:6px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-3,var(--dsw-alias-bg-layer-2));box-shadow:0 8px 24px rgba(0,0,0,.12)}
-.cc-accountEditor{border-top:1px solid var(--dsw-alias-border-l2)}
-.cc-accountLoginHint{padding:0 0 12px}
-.cc-toggleRow{align-items:center;gap:8px;cursor:pointer;display:flex}
-.cc-toggleRow:has(.cc-toggle:disabled){cursor:default}
+/* The platform SegmentedControl: a translucent track and one raised pill that
+ * slides under the picked segment. Segments are equal grid tracks, so the
+ * indicator's width and offset follow from the count and the index alone. */
+.cc-segmented{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:3px;border-radius:9px;background:var(--dsw-alias-interactive-bg-hover)}
+.cc-segmentIndicator{position:absolute;top:3px;left:3px;width:calc((100% - 6px - 2px * (var(--cc-segment-count) - 1)) / var(--cc-segment-count));height:calc(100% - 6px);border-radius:7px;background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-elevation-soft,0 1px 2px rgba(0,0,0,.12));transform:translateX(calc(var(--cc-segment-index) * (100% + 2px)));transition:transform .16s ease;pointer-events:none}
+.cc-segment{box-sizing:border-box;position:relative;z-index:1;height:28px;padding:0 16px;border:0;border-radius:7px;background:0 0;color:var(--dsw-alias-label-secondary);font:inherit;font-size:13px;font-weight:500;line-height:20px;white-space:nowrap;cursor:pointer;transition:color .12s ease}
+.cc-segment:hover:not(:disabled),.cc-segment[aria-checked=true]{color:var(--dsw-alias-label-primary)}
+.cc-segment:disabled{cursor:default;opacity:.4}
+.cc-segment:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
 /* Modelled on the platform's own Switch primitive (ui-primitives
- * Switch.module.css, dsh 0.1.6+): a 36x20 capsule that pads its track by 2px
- * and slides a 16px thumb across the 32px content box, so the control is the
- * same shape, size and motion as every other switch in the app.
+ * Switch.module.css): a 36x20 capsule that pads its track by 2px and slides a
+ * 16px thumb across the 32px content box.
  *
  * Three things are load-bearing. (1) corner-shape:round on BOTH the track and
  * the thumb: the theme sets a global superellipse corner shape on every
  * element, and a superellipse capsule squares its ends off around a round
- * thumb (the primitive's own comment is about exactly this).
- * (2) No literal colours. --dsw-alias-brand-primary INVERTS between the two
- * modes (near-black in light, near-white in dark, on every engine generation
- * this plugin supports), so the old hardcoded white thumb vanished on the
- * checked track in dark mode; the brand foreground is the token the platform
- * paints on that fill, so it contrasts in both modes and in any brand pack.
- * (3) --dsw-alias-border-l3 as the off track: --dsw-alias-border-l2
- * (#ffffff1f in dark) left the unchecked track indistinguishable from the card
- * — the dark-mode half of the same report. */
+ * thumb. (2) No literal colours. --dsw-alias-brand-primary INVERTS between the
+ * two modes (near-black in light, near-white in dark), so a hardcoded white
+ * thumb vanishes on the checked track in dark mode; the brand foreground is the
+ * token the platform paints on that fill. (3) --dsw-alias-border-l3 as the off
+ * track: border-l2 (#ffffff1f in dark) leaves it indistinguishable from the
+ * page. */
 .cc-toggle{box-sizing:border-box;appearance:none;flex-shrink:0;width:36px;height:20px;margin:0;padding:2px;border:0;border-radius:10px;corner-shape:round;background:var(--dsw-alias-border-l3);cursor:pointer;position:relative}
 .cc-toggle:checked{background:var(--dsw-alias-brand-primary)}
-.cc-toggle::after{content:'';display:block;width:16px;height:16px;border-radius:50%;corner-shape:round;background:var(--dsw-alias-label-primary-foreground);box-shadow:0 0 0 .5px var(--dsw-alias-border-l2);transition:transform .12s ease}
+.cc-toggle::after{content:'';display:block;width:16px;height:16px;border-radius:50%;corner-shape:round;background:var(--dsw-alias-label-primary-foreground);transition:transform .12s ease}
 /* 32px content box minus the 16px thumb. */
 .cc-toggle:checked::after{transform:translateX(16px)}
 .cc-toggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .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-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:7px;height:7px;margin-right:6px;margin-bottom:3px;transform:rotate(45deg);transition:transform .15s ease}
+.cc-chevronUp{transform:rotate(-135deg);margin-bottom:-3px}
+/* Accounts: one outlined card per account, the Models page's provider card. */
+.cc-accountMode{align-items:center;gap:4px;display:flex;margin:-4px 0 12px;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cc-accountList{flex-direction:column;gap:8px;display:flex}
+.cc-accountList+.cc-addButton,.cc-accountList+.cc-addPanel{margin-top:8px}
+.cc-accountItem{flex-direction:column;gap:10px;display:flex;padding:12px 14px;border:.5px solid var(--dsw-alias-border-l4);border-radius:16px}
+.cc-accountItemActive{border-color:var(--dsw-static-neutral-bluish-400,var(--dsw-alias-border-l3))}
+.cc-accountHead{align-items:center;gap:4px;display:flex;min-height:28px}
+.cc-accountToggle{align-items:center;gap:8px;display:flex;flex:1;min-width:0;padding:0;background:0 0;border:0;color:inherit;cursor:pointer;font:inherit;text-align:left}
+.cc-accountToggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px;border-radius:4px}
+.cc-accountName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500;line-height:22px}
+.cc-iconButton{flex-shrink:0;align-items:center;justify-content:center;display:inline-flex;width:28px;height:28px;padding:0;background:0 0;border:0;border-radius:6px;color:var(--dsw-alias-label-tertiary);cursor:pointer}
+.cc-iconButton:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.cc-iconButton:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3)}
+/* Three dots from one element: the dot itself plus two box-shadow copies. */
+.cc-kebab{width:3px;height:3px;border-radius:50%;corner-shape:round;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
+.cc-tabDot{flex-shrink:0;width:8px;height:8px;border-radius:50%;corner-shape:round}
+.cc-tabDotOk{background:var(--dsw-alias-state-success-primary)}
+.cc-tabDotWarn{background:var(--dsw-alias-state-warn-primary,#d97706)}
+.cc-tabDotError{background:var(--dsw-alias-state-error-primary)}
+.cc-accountMeters{flex-wrap:wrap;gap:6px 20px;display:flex;padding-left:16px}
+.cc-miniMeter{align-items:center;gap:8px;display:inline-flex;font-size:12px;line-height:18px}
+.cc-miniMeterLabel{color:var(--dsw-alias-label-tertiary)}
+.cc-miniMeterTrack{overflow:hidden;background:var(--dsw-alias-bg-module-platform);border-radius:999px;width:64px;height:4px}
+.cc-miniMeterFill{display:block;background:var(--dsw-alias-brand-primary);border-radius:999px;height:100%}
+.cc-miniMeterValue{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums}
+.cc-accountSetup,.cc-loginStatus{flex-direction:column;gap:8px;display:flex;padding-left:16px}
+.cc-loginStatus{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px}
+.cc-loginStatus>p{margin:0;font-size:12px;line-height:18px}
+.cc-accountDetails{container-type:inline-size;border-top:.5px solid var(--dsw-alias-border-l2);flex-direction:column;gap:14px;display:flex;padding-top:12px}
+.cc-inlineForm,.cc-confirmBar{flex-direction:column;gap:8px;display:flex}
+.cc-inlineActions{align-items:center;gap:8px;display:flex}
+.cc-confirmBar{border:.5px solid var(--dsw-alias-state-error-primary);border-radius:12px;padding:12px 14px}
+.cc-confirmText{color:var(--dsw-alias-label-primary);margin:0;font-size:14px;line-height:22px}
+.cc-dangerButton{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary)}
+.cc-dangerButton:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover-danger)}
+/* Adding an account: the Models page's dashed add button, opening a filled
+ * panel in its place. */
+.cc-addButton{box-sizing:border-box;align-items:center;justify-content:center;gap:6px;display:flex;width:100%;height:44px;border:1px dashed var(--dsw-alias-border-l3);border-radius:16px;background:0 0;color:var(--dsw-alias-label-primary);font:inherit;font-size:14px;line-height:22px;cursor:pointer}
+.cc-addButton:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.cc-addButton:disabled{cursor:default;opacity:.4}
+.cc-addButton:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3)}
+/* A plus from two crossed bars. */
+.cc-addGlyph{position:relative;width:12px;height:12px}
+.cc-addGlyph::before,.cc-addGlyph::after{content:'';position:absolute;background:currentColor;border-radius:1px}
+.cc-addGlyph::before{left:0;right:0;top:5.25px;height:1.5px}
+.cc-addGlyph::after{top:0;bottom:0;left:5.25px;width:1.5px}
+.cc-addPanel{flex-direction:column;gap:12px;display:flex;padding:14px 16px;border-radius:12px;background:var(--dsw-alias-bg-module-platform)}
+.cc-panelTitle{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500;line-height:22px}
+/* Account report: stat tiles are filled panels, like the platform's editors. */
+.cc-accountReport{flex-direction:column;gap:14px;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-usageTitle{color:var(--dsw-alias-label-primary);flex:1;margin:0;font-size:14px;font-weight:500;line-height:22px}
+.cc-usageAccount{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.cc-usagePlan{flex:none;white-space:nowrap;border:.5px solid var(--dsw-alias-border-l3);color:var(--dsw-alias-label-secondary);border-radius:999px;corner-shape:round;padding:0 7px;font-size:11px;font-weight:500;line-height:17px}
+.cc-usagePlanStatus{flex:none;margin:0;white-space:nowrap;color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
+.cc-usageHint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:18px}
+/* Two fixed grids instead of one auto-fit track: auto-fit wrapped the four
+ * activity tiles 3 + 1 at the details' width. Each group fills its own row
+ * (four activity tiles, three balances) and the activity row folds to 2 × 2
+ * in a narrow details panel. */
 .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-usageStatsActivity{grid-template-columns:repeat(4,minmax(0,1fr))}
+.cc-usageStatsBalance{grid-template-columns:repeat(3,minmax(0,1fr))}
+@container (max-width:460px){.cc-usageStatsActivity{grid-template-columns:repeat(2,minmax(0,1fr))}}
+.cc-usageStat{min-width:0;flex-direction:column;gap:2px;display:flex;padding:10px 12px;border-radius:12px;background:var(--dsw-alias-bg-module-platform)}
+.cc-usageStatLabel{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.cc-usageStatValue{color:var(--dsw-alias-label-primary);font-size:16px;font-weight:500;line-height:24px;font-variant-numeric:tabular-nums}
+.cc-usageStatSub{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cc-usageWindows{flex-direction:column;gap:14px;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-usageWindowLabel{color:var(--dsw-alias-label-secondary);flex:1;font-size:12px;line-height:18px}
+.cc-usageWindowValue{color:var(--dsw-alias-label-primary);font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}
+.cc-usageExceeded{color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
+.cc-usageBar{overflow:hidden;background:var(--dsw-alias-bg-module-platform);border-radius:999px;height:4px}
 .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::after,.cc-usageBarFill{transition:none}}.cc-usageWindowReset{color:var(--dsw-alias-label-tertiary);margin:0;font-size:11px;line-height:1.5}
+.cc-usageBarFillWarn{background:var(--dsw-alias-state-error-primary)}
+.cc-usageWindowReset{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:18px}
 .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-usageBlockedDetail{color:var(--dsw-alias-label-secondary);margin:0;font-size:11px;line-height:1.5;word-break:break-word;opacity:.85}
-.cc-version{margin:4px 0 0;text-align:center;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}
+.cc-usageUpdated{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:18px}
+.cc-usagePartial{color:var(--dsw-alias-state-error-primary);margin:0;font-size:12px;line-height:18px}
+.cc-usageBlocked{border:.5px solid var(--dsw-alias-state-error-primary);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
+.cc-usageBlockedTitle{color:var(--dsw-alias-state-error-primary);margin:0;font-size:14px;font-weight:500;line-height:22px}
+.cc-usageBlockedHint{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px;line-height:18px}
+.cc-usageBlockedDetail{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:18px;word-break:break-word}
+.cc-version{margin:32px 0 0;text-align:center;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+/* The update hint rides the footer version line, quiet until hovered. */
+.cc-versionLink{color:var(--dsw-alias-state-warn-label,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 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-footer{justify-content:flex-end;align-items:center;gap:8px;display:flex}
+.cc-failed{display:inline-block;max-width:260px;min-width:0;color:var(--dsw-alias-state-error-primary);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px}
+/* The authorization link is the only link-coloured element on a login row. */
+.cc-loginLink{color:var(--dsw-alias-link,var(--dsw-alias-brand-primary));text-decoration:none;font-size:12px;line-height:18px}
 .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))}
+.cc-loginError{color:var(--dsw-alias-state-error-primary)}
+/* The floating save bar: a centered capsule pinned to the bottom of the
+ * settings scrollport. The dock is a zero-height sticky strip at the end of
+ * the page, so the bar overlays the scrolling content instead of taking a row
+ * of its own; while it is shown the section reserves room at its end so the
+ * last line can still scroll clear of it. Hidden, it sinks and fades, and
+ * visibility (switched after the transition) takes its buttons out of the tab
+ * order.
+ *
+ * Its surface is an elevated layer (bg-layer-1 over the settings panel's
+ * layer-2) with the platform's prominent elevation and no stroke. The corners
+ * are concentric: a 44px capsule around 36px capsule buttons inset by 4px, so
+ * the gap around each button is even. */
+.cc-sectionWithBar{padding-bottom:80px}
+.cc-saveBarDock{position:sticky;bottom:0;z-index:2;height:0;pointer-events:none}
+.cc-saveBar{--cc-saveBar-tone:var(--dsw-alias-state-warn-primary,#d97706);position:absolute;left:50%;bottom:20px;box-sizing:border-box;width:max-content;max-width:calc(100% - 24px);align-items:center;gap:10px;display:flex;height:44px;padding:4px 4px 4px 16px;border:0;border-radius:22px;corner-shape:round;background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-elevation-prominent,0 12px 32px -8px rgba(0,0,0,.24),0 2px 8px rgba(0,0,0,.08));opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
+.cc-saveBarShown{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;transition:opacity .2s ease,transform .24s cubic-bezier(.2,.9,.3,1.1),visibility 0s}
+.cc-saveBar-error{--cc-saveBar-tone:var(--dsw-alias-state-error-primary)}
+.cc-saveBar-success{--cc-saveBar-tone:var(--dsw-alias-state-success-primary,#16a34a);padding-right:18px}
+.cc-saveBarIcon{flex-shrink:0;align-items:center;justify-content:center;display:inline-flex;width:16px;height:16px;color:var(--cc-saveBar-tone)}
+.cc-saveBarPulse{width:8px;height:8px;border-radius:50%;corner-shape:round;background:var(--cc-saveBar-tone)}
+.cc-saveBarText{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
+.cc-saveBar-error .cc-saveBarText{color:var(--dsw-alias-state-error-primary)}
+.cc-saveBarActions{flex-shrink:0;align-items:center;gap:4px;display:flex;margin-left:8px}
+.cc-saveBarButton{box-sizing:border-box;height:36px;padding:0 16px;border:0;border-radius:18px;corner-shape:round;font:inherit;font-size:14px;line-height:22px;white-space:nowrap;cursor:pointer}
+.cc-saveBarButton:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3)}
+.cc-saveBarButton:disabled{cursor:default;opacity:.4}
+.cc-saveBarGhost{background:0 0;color:var(--dsw-alias-label-primary)}
+.cc-saveBarGhost:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.cc-saveBarPrimary{background:var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary));color:var(--dsw-alias-label-primary-foreground,#fff)}
+.cc-saveBarPrimary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover,var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary)))}
+@media (prefers-reduced-motion:reduce){.cc-chevron,.cc-toggle::after,.cc-usageBarFill,.cc-saveBar,.cc-saveBarShown,.cc-segmentIndicator,.cc-segment{transition:none}}
 `;
 		//#endregion
 		//#region src/client/panel-styles.ts
@@ -6549,7 +6807,7 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 		const zh = {
 			nav: "Command Code",
 			title: "Command Code",
-			intro: "配置 Command Code Provider 连接。API 密钥仅保存在本机凭据服务中，不会回显；其他字段写入用户设置，下次请求即生效。",
+			intro: "账户操作立即生效；其余设置修改后点击底部「保存」。API 密钥仅保存在本机凭据服务中，不会回显。",
 			apiKey: "API 密钥",
 			apiKeyHint: "在 commandcode.ai 控制台创建。留空保存不会覆盖已存储的密钥。",
 			apiKeySet: "已配置",
@@ -6557,8 +6815,6 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			apiKeyLocked: "密钥由只读来源提供",
 			apiBase: "API 地址",
 			apiBaseHint: "默认 https://api.commandcode.ai，一般无需修改。",
-			workingDir: "工作目录",
-			workingDirHint: "可选。留空时使用占位符显示的进程工作目录；仅在需要固定路径时填写。",
 			requestTimeoutMs: "请求超时（毫秒）",
 			requestTimeoutMsHint: "等待响应首个字节的超时；默认 60000。",
 			streamIdleTimeoutMs: "流空闲超时（毫秒）",
@@ -6566,47 +6822,29 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			transportMaxRetries: "网络失败重试次数",
 			transportMaxRetriesHint: "连接失败时自动重试几次，默认 5（各次等待 0.5+1+2+4+8 秒，合计约 15 秒）。超过后直接报错，不再按指数退避长时间等待；填 0 表示不重试。限流、5xx 等由服务端要求重试的失败不受此项影响。",
 			advancedSettings: "高级设置",
-			advancedSettingsHint: "API 地址、工作目录、超时、模型过滤、联网搜索与侧边栏额度卡片等不常修改的选项。",
+			advancedSettingsHint: "API 地址和网络参数，一般无需修改。",
 			advancedOverriddenOne: "已自定义 1 项",
 			advancedOverriddenMany: "已自定义 {count} 项",
 			advancedInvalid: "高级设置中有未填好的数字，请展开修正后再保存。",
 			filterModelsByPlan: "隐藏套餐外模型",
-			filterModelsByPlanHint: "开启后，模型选择器只列出当前套餐可用的模型；账户持有按需余额时会显示全部。",
+			filterModelsByPlanHint: "只显示套餐内模型；按需余额账户仍显示全部。",
 			webSearch: "用 Command Code 承载联网搜索",
-			webSearchHint: "开启后，dsh 的 web_search 工具由 Command Code 承担（复用同一个 API key 与地址），并优先于其他搜索后端；关闭则把选择权交还给之前的后端（如 modsearch），而不是强制回退到 DeepSeek 搜索。",
+			webSearchHint: "使用同一密钥承载 dsh 的 web_search；关闭后恢复原搜索后端。",
 			showSidebarQuota: "在侧边栏显示额度卡片",
-			showSidebarQuotaHint: "开启后，侧边栏底部（Settings 上方）显示 Command Code 套餐与配额卡片，点击可在中间栏打开完整仪表盘。默认关闭：左侧不显示任何额度信息，也不会为其后台刷新用量。保存后立即生效。",
+			showSidebarQuotaHint: "在侧边栏底部显示套餐与额度卡片，点击可打开完整仪表盘。默认关闭，关闭时不会为它后台刷新用量。",
 			commandGuard: "AI 命令安全预判",
-			commandGuardHint: "命令确认弹窗前，先由 typesafe/jev 判断它是否安全：安全就自动放行，其余照常弹窗。默认关闭。",
-			commandGuardThreshold: "自动放行阈值（0.5–1）",
-			commandGuardThresholdHint: "typesafe/jev 判定\"安全\"的概率达到该值即放行，默认 0.9。",
-			commandGuardTimeoutMs: "判定超时（毫秒，200–10000）",
-			commandGuardTimeoutMsHint: "typesafe/jev 超过该时间未返回就照常弹窗，默认 1500。",
+			commandGuardHint: "命令确认弹窗前，先由 typesafe/jev 判断它是否安全；沙箱提权还会额外判断范围与必要性。三项都足够确定才自动放行，其余照常弹窗。默认关闭。",
+			commandGuardLevel: "自动放行阈值",
+			commandGuardLevelHint: "阈值越高，需要越确定才放行，弹窗越多。高 = 0.95，中 = 0.9（默认），低 = 0.8。判定超过 3 秒未返回会照常弹窗。",
+			commandGuardLevelHigh: "高",
+			commandGuardLevelMedium: "中",
+			commandGuardLevelLow: "低",
 			zdr: "零数据保留（ZDR）",
-			zdrHint: "开启后，请求只经由不留存提示词与回复、也不用于训练的上游（等价于 CLI 的 CMD_ZDR=1）。没有可用 ZDR 上游的模型会返回错误，请换用其他模型或关闭此开关。ZDR 容量按上游实价透传，通常更贵；费用读数仍按常规目录价估算。默认关闭。",
-			accountsTitle: "多账户轮换",
-			accountsHint: "当前账户达到用量限额（429）或密钥失效（401）时，请求自动切换到下一个账户；全部耗尽时会提示最早的重置时间。",
+			zdrHint: "仅使用不留存、不训练的上游；可用模型可能更少且价格通常更高。",
+			accountsTitle: "账户",
+			accountsHint: "账户操作立即生效，无需保存。可以添加多个账户：当前账户达到用量限额或密钥失效时，请求会自动切换到下一个。",
 			accountAdd: "添加账户",
-			accountRemove: "移除",
-			accountLabel: "账户备注名",
-			accountKey: "API 密钥",
-			accountKeyHint: "该账户的 API 密钥。留空保存不会覆盖已存储的密钥。",
-			accountLoginAfterSave: "先点击页面底部的「保存」，再点击该账户的「登录 Command Code」通过网页获取密钥。",
 			accountDefault: "默认账户",
-			activeAccount: "当前使用账户",
-			activeAccountAuto: "自动（第一个可用账户）",
-			activeAccountHint: "手动指定优先使用的账户，保存后下次请求即生效；所选账户耗尽时仍会自动切换到其他可用账户。",
-			rulesTitle: "按模型切换账户",
-			rulesHint: "选择模型并路由到某个账户（可多选）。命中规则的模型且该账户可用时优先使用；账户耗尽或密钥失效时仍自动回落到其他账户。规则按列表顺序匹配，第一条命中生效。",
-			rulesEmpty: "尚未配置规则。",
-			rulesCatalogFailed: "模型目录获取失败，暂时无法选择模型；已保存的规则仍会生效。",
-			ruleAdd: "添加规则",
-			ruleRemove: "移除",
-			ruleModel: "模型",
-			ruleModelPick: "选择模型…",
-			ruleModelCount: "已选 {count} 个模型",
-			ruleAccount: "目标账户",
-			ruleHint: "从下拉列表勾选要路由的模型（可多选），再选择目标账户。",
 			modelSearchPlaceholder: "搜索模型…",
 			modelSearchEmpty: "没有匹配的模型。",
 			modelStale: "已下架",
@@ -6623,20 +6861,19 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			numberTooSmall: "不能小于 1（毫秒）",
 			numberTooLarge: "超出允许上限（2147483647 毫秒）",
 			readOnly: "当前配置为只读。",
-			unsaved: "未保存",
 			save: "保存",
 			saving: "保存中",
-			saved: "已保存 ✓",
+			saved: "设置已保存",
 			saveFailed: "保存失败，请重试。",
+			unsavedChanges: "有未保存的更改",
+			saveInvalid: "有字段填写不正确，修正后才能保存",
 			discard: "放弃",
 			cancel: "取消",
 			show: "显示",
 			hide: "隐藏",
-			usageTitle: "账户用量",
 			usageRefresh: "刷新",
 			usageRefreshing: "刷新中…",
 			usageLoading: "正在获取账户用量…",
-			usageNoKey: "配置 API 密钥后，这里会显示账户的用量与额度状态。",
 			usageError: "用量获取失败",
 			usageRequests: "请求",
 			usageFailed: "失败",
@@ -6650,12 +6887,10 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			usageFree: "赠送",
 			usageFiveHour: "5 小时窗口",
 			usageWeekly: "每周窗口",
+			usageMonthlyLeft: "月额度剩余",
 			usageExceeded: "已超限",
 			usageReset: "重置于",
 			usagePartial: "部分端点数据不可用",
-			usageKeyClear: "清除已存密钥",
-			usageKeyClearStaged: "将清除（保存后生效）",
-			usageUndoKeyClear: "撤销清除",
 			usageKeyInvalid: "API 密钥无效或已过期",
 			usageKeyInvalidHint: "服务端拒绝了全部请求（401）。请检查该账户配置的密钥，或到 commandcode.ai 控制台重新生成。",
 			usageServiceUnavailable: "Command Code 服务暂时不可用",
@@ -6673,8 +6908,7 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			updateAvailable: "可更新",
 			updateHint: "已发布新版本，点击查看发布说明；更新插件后刷新本页，提示会自动消失。",
 			loginTitle: "通过官方登录获取密钥",
-			loginHintIdle: "不想手动创建密钥？点击登录后浏览器会打开 commandcode.ai 授权页，完成后密钥自动写入本机凭据服务，下次请求即生效。",
-			loginSaveBefore: "请先保存本页更改，再通过网页登录此账户。",
+			loginHintIdle: "也可通过网页授权自动获取并保存密钥。",
 			loginButton: "登录 Command Code",
 			loginStarting: "正在启动本地回调服务…",
 			loginWaiting: "等待在浏览器中完成授权…",
@@ -6692,12 +6926,47 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			cardTitle: "Command Code",
 			cardRouteActive: "已启用",
 			cardLoadingHint: "正在读取 Command Code 配置…",
-			cardRegistrationHint: "此卡片由 Command Code 插件提供，正在等待设置页装配，稍后即可显示完整内容。"
+			cardRegistrationHint: "此卡片由 Command Code 插件提供，正在等待设置页装配，稍后即可显示完整内容。",
+			accountsRotationHint: "账户操作立即生效。当前账户达到用量限额或密钥失效时，请求会按列表顺序自动切换到下一个可用账户。",
+			accountModeAuto: "使用方式：自动切换（按列表顺序）",
+			accountModePinned: "使用方式：固定使用「{name}」，不可用时仍会自动切换",
+			accountStatusPinned: "已固定",
+			accountActions: "账户操作",
+			accountActionPin: "固定使用此账户",
+			accountActionUnpin: "恢复自动切换",
+			accountActionLogin: "网页登录获取新密钥",
+			accountActionKey: "粘贴新密钥",
+			accountActionRename: "重命名",
+			accountActionClearKey: "删除密钥",
+			accountActionRemove: "移除账户",
+			accountRemoveConfirm: "移除「{name}」？它保存的密钥和专用模型设置会一起删除。",
+			accountClearKeyConfirm: "删除默认账户保存的密钥？之后会回退到环境变量或官方 CLI 的登录信息。",
+			accountConfirmRemove: "移除",
+			accountConfirmClear: "删除",
+			accountApply: "确定",
+			accountNoKeyHint: "还没有密钥：通过网页登录自动获取，或粘贴在 commandcode.ai 控制台创建的 API 密钥。",
+			accountAddHint: "网页登录会打开 Command Code 授权页，授权完成后账户自动添加；也可以直接粘贴 API 密钥。",
+			accountAddLogin: "网页登录",
+			accountAddPaste: "粘贴密钥",
+			accountAddConfirm: "添加",
+			accountNamePlaceholder: "备注名（可选，网页登录时默认使用账户名）",
+			accountNameN: "账户 {n}",
+			accountKeyPlaceholder: "粘贴 API 密钥",
+			accountOpFailed: "账户操作未能完成，请重试。",
+			accountModels: "专用模型",
+			accountModelsHint: "选中的模型优先由此账户处理，此账户不可用时仍会自动切换。一个模型只属于一个账户，选中会把它从其他账户移过来。",
+			accountModelOwner: "属于 {name}",
+			modelPick: "选择模型…",
+			modelCount: "已选 {count} 个模型",
+			modelCatalogFailed: "模型目录获取失败，暂时无法选择模型；已保存的设置仍会生效。",
+			modelsTitle: "模型",
+			privacyTitle: "隐私与安全",
+			integrationsTitle: "集成与显示"
 		};
 		const en = {
 			nav: "Command Code",
 			title: "Command Code",
-			intro: "Configure the Command Code Provider connection. The API key is stored only in the local credential service and never echoed; other fields are written to user settings and take effect on the next request.",
+			intro: "Account actions apply immediately; other settings are written by Save at the bottom. The API key stays in the local credential service and is never echoed.",
 			apiKey: "API key",
 			apiKeyHint: "Create one in the commandcode.ai console. Saving with this field blank keeps the stored key.",
 			apiKeySet: "Configured",
@@ -6705,8 +6974,6 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			apiKeyLocked: "Key provided by a read-only source",
 			apiBase: "API base URL",
 			apiBaseHint: "Defaults to https://api.commandcode.ai; usually leave as-is.",
-			workingDir: "Working directory",
-			workingDirHint: "Optional. Leave blank to use the process cwd shown as the placeholder; fill in only to pin a specific path.",
 			requestTimeoutMs: "Request timeout (ms)",
 			requestTimeoutMsHint: "Time to wait for the first response byte; default 60000.",
 			streamIdleTimeoutMs: "Stream idle timeout (ms)",
@@ -6714,47 +6981,29 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			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.",
+			advancedSettingsHint: "API base URL and network limits; usually leave as-is.",
 			advancedOverriddenOne: "1 customized",
 			advancedOverriddenMany: "{count} customized",
 			advancedInvalid: "A number in Advanced settings is not ready to save; expand to fix it.",
 			filterModelsByPlan: "Hide out-of-plan models",
-			filterModelsByPlanHint: "When on, the model picker lists only models your subscription includes; any on-demand credit balance shows the full catalog.",
+			filterModelsByPlanHint: "Show only models in your plan; on-demand credit accounts still see the full catalog.",
 			webSearch: "Serve dsh web search with Command Code",
-			webSearchHint: "When on, the model-facing web_search tool is backed by Command Code (same API key and base URL as chat), winning over other search backends. Off hands the selection back to the previous backend (e.g. modsearch) instead of forcing the shipped DeepSeek search.",
+			webSearchHint: "Use the same key for dsh web search; turning it off restores the previous backend.",
 			showSidebarQuota: "Show the quota card in the sidebar",
-			showSidebarQuotaHint: "When on, a Command Code plan & quota card sits at the bottom of the sidebar (above Settings) and opens the full dashboard in the centre column. Off by default: nothing is shown on the left, and no background usage poll runs for it. Applies on save.",
+			showSidebarQuotaHint: "Show a plan and quota card at the bottom of the sidebar that opens the full dashboard. Off by default; while off, no background usage refresh runs for it.",
 			commandGuard: "AI command guard",
-			commandGuardHint: "Before a shell command asks for approval, typesafe/jev judges whether it is safe: safe commands run without a prompt, everything else asks as usual. Off by default.",
-			commandGuardThreshold: "Auto-approve threshold (0.5–1)",
-			commandGuardThresholdHint: "Approve when typesafe/jev rates the command \"safe\" at least this likely; default 0.9.",
-			commandGuardTimeoutMs: "Judgement timeout (ms, 200–10000)",
-			commandGuardTimeoutMsHint: "If typesafe/jev does not answer in time, the normal prompt appears; default 1500.",
+			commandGuardHint: "Before a shell command asks for approval, typesafe/jev judges whether it is safe. A sandbox escalation also needs separate scope and necessity verdicts; all three must be confident enough to skip the prompt. Off by default.",
+			commandGuardLevel: "Auto-approve threshold",
+			commandGuardLevelHint: "A higher threshold needs more confidence to skip the prompt, so you see more prompts. High = 0.95, Medium = 0.9 (default), Low = 0.8. A judgement that takes longer than 3 seconds shows the normal prompt.",
+			commandGuardLevelHigh: "High",
+			commandGuardLevelMedium: "Medium",
+			commandGuardLevelLow: "Low",
 			zdr: "Zero data retention (ZDR)",
-			zdrHint: "Serve requests only through upstreams that keep no prompts or completions and never train on them (the same opt-in as the CLI's CMD_ZDR=1). A few models have no ZDR upstream; requests for those models fail rather than losing ZDR protection. ZDR capacity is billed at the upstream's pass-through rates and usually costs more; the cost readout keeps quoting the ordinary catalog rates. Off by default.",
-			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.",
+			zdrHint: "Use only upstreams that retain no data and do not train on requests; availability and pricing may differ.",
+			accountsTitle: "Accounts",
+			accountsHint: "Account actions apply immediately, no save needed. Add more accounts and requests switch to the next one when the current account hits its usage limit or its key stops working.",
 			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.",
-			accountLoginAfterSave: "Use Save at the bottom of the page, then sign in to this account in your browser to obtain a 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.",
-			rulesTitle: "Route models to accounts",
-			rulesHint: "Pick models (multi-select) and route them to an account. When the request’s model is in a rule and that account is usable, it serves; an exhausted or invalid routed account falls back to the normal rotation. Rules match in list order — the first hit wins.",
-			rulesEmpty: "No rules yet.",
-			rulesCatalogFailed: "Could not load the model catalog — selecting models is unavailable; saved rules still apply.",
-			ruleAdd: "Add rule",
-			ruleRemove: "Remove",
-			ruleModel: "Models",
-			ruleModelPick: "Select models…",
-			ruleModelCount: "{count} model(s) selected",
-			ruleAccount: "Target account",
-			ruleHint: "Check the models to route from the dropdown (multi-select), then pick the target account.",
 			modelSearchPlaceholder: "Search models…",
 			modelSearchEmpty: "No matching models.",
 			modelStale: "Retired",
@@ -6771,20 +7020,19 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			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 ✓",
+			saved: "Settings saved",
 			saveFailed: "Save failed, please retry.",
+			unsavedChanges: "You have unsaved changes",
+			saveInvalid: "Fix the highlighted field before saving",
 			discard: "Discard",
 			cancel: "Cancel",
 			show: "Show",
 			hide: "Hide",
-			usageTitle: "Account usage",
 			usageRefresh: "Refresh",
 			usageRefreshing: "Refreshing…",
 			usageLoading: "Fetching account usage…",
-			usageNoKey: "Configure an API key to see this account’s usage and credit state here.",
 			usageError: "Could not fetch usage",
 			usageRequests: "Requests",
 			usageFailed: "failed",
@@ -6798,12 +7046,10 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			usageFree: "Free",
 			usageFiveHour: "5-hour window",
 			usageWeekly: "Weekly window",
+			usageMonthlyLeft: "Monthly left",
 			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",
@@ -6821,8 +7067,7 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			updateAvailable: "update available",
 			updateHint: "A newer version has been published; click for release notes. The notice disappears once the plugin is updated.",
 			loginTitle: "Sign in to fetch a key",
-			loginHintIdle: "Rather not create a key by hand? Sign in and your browser opens the commandcode.ai authorization page; the approved key is stored in the local credential service and applies to the next request.",
-			loginSaveBefore: "Save page changes before signing in to this account.",
+			loginHintIdle: "Alternatively, sign in to fetch and store a key automatically.",
 			loginButton: "Sign in to Command Code",
 			loginStarting: "Starting the local callback server…",
 			loginWaiting: "Waiting for authorization in your browser…",
@@ -6840,7 +7085,42 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			cardTitle: "Command Code",
 			cardRouteActive: "Active",
 			cardLoadingHint: "Loading the Command Code configuration…",
-			cardRegistrationHint: "This card is contributed by the Command Code plugin and is waiting for the settings page to finish assembling."
+			cardRegistrationHint: "This card is contributed by the Command Code plugin and is waiting for the settings page to finish assembling.",
+			accountsRotationHint: "Account actions apply immediately. When the current account hits its usage limit or its key stops working, requests switch to the next usable account in list order.",
+			accountModeAuto: "Mode: switch automatically (list order)",
+			accountModePinned: "Mode: pinned to \"{name}\", still switching when it is unavailable",
+			accountStatusPinned: "Pinned",
+			accountActions: "Account actions",
+			accountActionPin: "Pin this account",
+			accountActionUnpin: "Switch automatically",
+			accountActionLogin: "Sign in for a new key",
+			accountActionKey: "Paste a new key",
+			accountActionRename: "Rename",
+			accountActionClearKey: "Delete key",
+			accountActionRemove: "Remove account",
+			accountRemoveConfirm: "Remove \"{name}\"? Its stored key and dedicated models are deleted with it.",
+			accountClearKeyConfirm: "Delete the default account's stored key? The provider then falls back to the environment or the official CLI sign-in.",
+			accountConfirmRemove: "Remove",
+			accountConfirmClear: "Delete",
+			accountApply: "Apply",
+			accountNoKeyHint: "No key yet: sign in through the browser, or paste an API key created in the commandcode.ai console.",
+			accountAddHint: "Sign-in opens the Command Code authorization page and adds the account once you approve; you can also paste an API key.",
+			accountAddLogin: "Sign in",
+			accountAddPaste: "Paste key",
+			accountAddConfirm: "Add",
+			accountNamePlaceholder: "Name (optional; sign-in uses the account name)",
+			accountNameN: "Account {n}",
+			accountKeyPlaceholder: "Paste an API key",
+			accountOpFailed: "The account change did not complete. Try again.",
+			accountModels: "Dedicated models",
+			accountModelsHint: "These models prefer this account and still switch when it is unavailable. A model belongs to one account; selecting it here moves it from any other.",
+			accountModelOwner: "on {name}",
+			modelPick: "Choose models…",
+			modelCount: "{count} models selected",
+			modelCatalogFailed: "The model catalog could not be loaded; saved settings still apply.",
+			modelsTitle: "Models",
+			privacyTitle: "Privacy & security",
+			integrationsTitle: "Integrations & display"
 		};
 		//#endregion
 		//#region src/client/index.ts
@@ -7055,6 +7335,10 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 				lastLoginPhase = phase;
 				loginStore.set(loginController.state());
 			});
+			const refreshUsageOn = (ok) => {
+				if (ok) usageController.refresh();
+				return ok;
+			};
 			const injected = () => ({
 				hooks: {
 					commandCodeSettings: store,
@@ -7071,15 +7355,16 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 				refreshUsage: () => void usageController.refresh(),
 				beginLogin: (targetRef) => void loginController.begin(targetRef),
 				cancelLogin: () => void loginController.cancel(),
-				addAccount: () => controller.addAccount(),
-				removeAccount: (id) => controller.removeAccount(id),
-				editAccountLabel: (id, text) => controller.editAccountLabel(id, text),
-				editAccountKey: (id, text) => controller.editAccountKey(id, text),
-				toggleKeyClear: (id) => controller.toggleKeyClear(id),
-				addRule: () => controller.addRule(),
-				removeRule: (id) => controller.removeRule(id),
-				editRuleModels: (id, ids) => controller.editRuleModels(id, ids),
-				editRuleAccount: (id, text) => controller.editRuleAccount(id, text),
+				createAccount: (input) => controller.createAccount(input).then((ref) => {
+					if (ref !== void 0 && input.key) usageController.refresh();
+					return ref;
+				}),
+				renameAccount: (ref, label) => controller.renameAccount(ref, label),
+				removeAccount: (ref) => controller.removeAccount(ref).then(refreshUsageOn),
+				setAccountKey: (target, key) => controller.setAccountKey(target, key).then(refreshUsageOn),
+				clearAccountKey: (target) => controller.clearAccountKey(target).then(refreshUsageOn),
+				setActiveAccount: (id) => controller.setActiveAccount(id).then(refreshUsageOn),
+				setAccountModels: (target, ids) => controller.setAccountModels(target, ids),
 				editVisibleModels: (ids) => controller.editVisibleModels(ids),
 				clearVisibleModels: () => controller.clearVisibleModels()
 			});