@mars-sea/dsh-commandcode-provider 0.14.5 → 0.15.0

package/lib/client.js

@@ -591,7 +591,7 @@ window.__ModuleLoader__.load({
 			}
 			return map;
 		}
-		const record$2 = (value) => value !== null && typeof value === "object" && !Array.isArray(value) ? value : {};
+		const record$3 = (value) => value !== null && typeof value === "object" && !Array.isArray(value) ? value : {};
 		const result = () => ({
 			config: "none",
 			credential: "none",
@@ -605,16 +605,16 @@ window.__ModuleLoader__.load({
 		});
 		const fieldBaseline = (snapshot, field) => ({
 			value: snapshot.value?.[field],
-			base: record$2(snapshot.base)[field],
-			user: record$2(snapshot.user)[field],
-			overridden: Object.hasOwn(record$2(snapshot.user), field)
+			base: record$3(snapshot.base)[field],
+			user: record$3(snapshot.user)[field],
+			overridden: Object.hasOwn(record$3(snapshot.user), field)
 		});
 		/** 不用显示文本比较配置；数组顺序与显式覆盖／继承也是写入事实。 */
 		function sameValue(a, b) {
 			if (Object.is(a, b)) return true;
 			if (Array.isArray(a) || Array.isArray(b)) return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((value, i) => sameValue(value, b[i]));
 			if (a === null || b === null || typeof a !== "object" || typeof b !== "object") return false;
-			const left = record$2(a), right = record$2(b);
+			const left = record$3(a), right = record$3(b);
 			const keys = Object.keys(left);
 			return keys.length === Object.keys(right).length && keys.every((key) => Object.hasOwn(right, key) && sameValue(left[key], right[key]));
 		}
@@ -657,7 +657,7 @@ window.__ModuleLoader__.load({
 						snapshot.base,
 						snapshot.user,
 						snapshot.value
-					]) for (const id of Object.keys(readVisibility(record$2(layer).modelVisibility))) keys.add(id);
+					]) for (const id of Object.keys(readVisibility(record$3(layer).modelVisibility))) keys.add(id);
 					ops.push({
 						op: "set",
 						path: ["visibleModels"],
@@ -731,7 +731,7 @@ window.__ModuleLoader__.load({
 				const raw = this.value("modelAccountRules");
 				if (!Array.isArray(raw)) return [];
 				return raw.flatMap((item) => {
-					const rule = record$2(item);
+					const rule = record$3(item);
 					const models = Array.isArray(rule.models) ? rule.models.filter((id) => typeof id === "string" && id !== "") : [];
 					return models.length ? [{
 						models,
@@ -863,7 +863,7 @@ window.__ModuleLoader__.load({
 						} : { ...account })
 					}]);
 				} else if (intent.kind === "active") {
-					const base = record$2(this.scope.getSnapshot().base).activeAccount;
+					const base = record$3(this.scope.getSnapshot().base).activeAccount;
 					const op = intent.id !== "" || typeof base === "string" && base !== "" ? {
 						op: "set",
 						path: ["activeAccount"],
@@ -912,7 +912,7 @@ window.__ModuleLoader__.load({
 								value: [.../* @__PURE__ */ new Set([...this.cleanupRefs(), intent.ref])]
 							}
 						];
-						if (this.value("activeAccount") === intent.ref) ops.push(record$2(snapshot.base).activeAccount === intent.ref ? {
+						if (this.value("activeAccount") === intent.ref) ops.push(record$3(snapshot.base).activeAccount === intent.ref ? {
 							op: "set",
 							path: ["activeAccount"],
 							value: ""
@@ -945,8 +945,8 @@ window.__ModuleLoader__.load({
 					outcome.issue = "closed";
 					return;
 				}
-				const inherited = record$2(this.scope.getSnapshot().base).accounts;
-				if (!(ref === this.defaultRef() || this.accounts().some((account) => account.apiKeyEnv === ref) || Array.isArray(inherited) && inherited.some((account) => record$2(account).apiKeyEnv === ref) || this.rules().some((rule) => rule.account === ref) || this.value("activeAccount") === ref) && this.facts.get(ref)?.configured === true) {
+				const inherited = record$3(this.scope.getSnapshot().base).accounts;
+				if (!(ref === this.defaultRef() || this.accounts().some((account) => account.apiKeyEnv === ref) || Array.isArray(inherited) && inherited.some((account) => record$3(account).apiKeyEnv === ref) || this.rules().some((rule) => rule.account === ref) || this.value("activeAccount") === ref) && this.facts.get(ref)?.configured === true) {
 					await this.changeCredential(outcome, ref, void 0);
 					if (!writeCompleted(outcome) || outcome.refreshFailed) {
 						if (outcome.issue === void 0 && outcome.credential === "confirmed") outcome.issue = "cleanup-pending";
@@ -995,7 +995,7 @@ window.__ModuleLoader__.load({
 		* only a generic failure — catching it here names the problem while typing).
 		* Decimals pass, like the Host schema's `z.number()`.
 		*/
-		function numberField$1(field, bounds) {
+		function numberField$2(field, bounds) {
 			return {
 				field,
 				format: (value) => typeof value === "number" ? String(value) : "",
@@ -1046,7 +1046,7 @@ window.__ModuleLoader__.load({
 		* `max_tokens`"), so no single numeric range can serve both.
 		*/
 		function tokenCountField(field, bounds, isValid) {
-			const plain = numberField$1(field, bounds);
+			const plain = numberField$2(field, bounds);
 			return {
 				field,
 				format: plain.format,
@@ -1167,7 +1167,7 @@ window.__ModuleLoader__.load({
 				min: MIN_TIMEOUT_SECONDS,
 				max: MAX_TIMEOUT_SECONDS
 			}),
-			numberField$1("transportMaxRetries", {
+			numberField$2("transportMaxRetries", {
 				min: 0,
 				max: 50
 			}),
@@ -1815,6 +1815,19 @@ window.__ModuleLoader__.load({
 		function formatResetAt(ms) {
 			return ms <= 0 ? "" : new Date(ms).toLocaleString();
 		}
+		/**
+		* {@link formatResetAt} without the year and seconds ("10/21 18:41"): the
+		* settings page shows several of these per card, and a reset moment never
+		* needs seconds. Empty for an unknown time, like the long form.
+		*/
+		function formatResetAtShort(ms) {
+			return ms <= 0 ? "" : new Date(ms).toLocaleString(void 0, {
+				month: "numeric",
+				day: "numeric",
+				hour: "2-digit",
+				minute: "2-digit"
+			});
+		}
 		/** 只有官方汇总与订阅共同确认同一起点，才展示完整账期；旧宿主和部分响应保持未知。 */
 		function formatUsageBillingPeriod(usageStart, planStart, planEnd) {
 			if (usageStart === void 0 || planStart !== usageStart || planEnd === void 0 || usageStart <= 0 || planEnd <= usageStart) return "";
@@ -2433,7 +2446,7 @@ window.__ModuleLoader__.load({
 		* The shared read/validate helpers for the usage report endpoint, prefixed
 		* so rejection messages name the offending boundary.
 		*/
-		const { reject: reject$1, record: record$1, stringField: stringField$1, numberField, booleanField } = makeBoundaryValidator("commandcode/report result:");
+		const { reject: reject$2, record: record$2, stringField: stringField$2, numberField: numberField$1, booleanField } = makeBoundaryValidator("commandcode/report result:");
 		/**
 		* Parse one quota window, or undefined when the frame carries no such window.
 		*
@@ -2444,12 +2457,12 @@ window.__ModuleLoader__.load({
 		*/
 		function windowLimit(value, field) {
 			if (value === void 0) return void 0;
-			const source = record$1(value, field);
+			const source = record$2(value, field);
 			return {
-				used: numberField(source, "used", `${field}.used`),
-				cap: numberField(source, "cap", `${field}.cap`),
+				used: numberField$1(source, "used", `${field}.used`),
+				cap: numberField$1(source, "cap", `${field}.cap`),
 				exceeded: booleanField(source, "exceeded", `${field}.exceeded`),
-				resetAt: numberField(source, "resetAt", `${field}.resetAt`)
+				resetAt: numberField$1(source, "resetAt", `${field}.resetAt`)
 			};
 		}
 		/**
@@ -2458,44 +2471,44 @@ window.__ModuleLoader__.load({
 		* malformed frame fails the boundary instead of rendering garbage.
 		*/
 		function parseUsageReport(value) {
-			const source = record$1(value, "report");
+			const source = record$2(value, "report");
 			const failures = source.failures;
-			if (!Array.isArray(failures) || failures.some((entry) => typeof entry !== "string")) reject$1("failures");
+			if (!Array.isArray(failures) || failures.some((entry) => typeof entry !== "string")) reject$2("failures");
 			const report = { failures };
 			if (source.blocked !== void 0) {
 				const blocked = source.blocked;
 				if (blocked === "invalid-key" || blocked === "service-unavailable" || blocked === "invalid-response" || blocked === "network") report.blocked = blocked;
-				else reject$1("blocked");
+				else reject$2("blocked");
 			}
 			if (source.account !== void 0) {
-				const account = record$1(source.account, "account");
+				const account = record$2(source.account, "account");
 				report.account = {
-					id: stringField$1(account, "id", "account.id"),
-					name: stringField$1(account, "name", "account.name"),
-					userName: stringField$1(account, "userName", "account.userName")
+					id: stringField$2(account, "id", "account.id"),
+					name: stringField$2(account, "name", "account.name"),
+					userName: stringField$2(account, "userName", "account.userName")
 				};
 			}
 			if (source.usage !== void 0) {
-				const usage = record$1(source.usage, "usage");
+				const usage = record$2(source.usage, "usage");
 				report.usage = {
-					totalCount: numberField(usage, "totalCount", "usage.totalCount"),
-					totalCost: numberField(usage, "totalCost", "usage.totalCost"),
-					successRate: numberField(usage, "successRate", "usage.successRate"),
-					completedCount: numberField(usage, "completedCount", "usage.completedCount"),
-					failedCount: numberField(usage, "failedCount", "usage.failedCount"),
-					totalTokensIn: numberField(usage, "totalTokensIn", "usage.totalTokensIn"),
-					totalTokensOut: numberField(usage, "totalTokensOut", "usage.totalTokensOut"),
-					totalCredits: numberField(usage, "totalCredits", "usage.totalCredits"),
-					periodBasis: stringField$1(usage, "periodBasis", "usage.periodBasis")
+					totalCount: numberField$1(usage, "totalCount", "usage.totalCount"),
+					totalCost: numberField$1(usage, "totalCost", "usage.totalCost"),
+					successRate: numberField$1(usage, "successRate", "usage.successRate"),
+					completedCount: numberField$1(usage, "completedCount", "usage.completedCount"),
+					failedCount: numberField$1(usage, "failedCount", "usage.failedCount"),
+					totalTokensIn: numberField$1(usage, "totalTokensIn", "usage.totalTokensIn"),
+					totalTokensOut: numberField$1(usage, "totalTokensOut", "usage.totalTokensOut"),
+					totalCredits: numberField$1(usage, "totalCredits", "usage.totalCredits"),
+					periodBasis: stringField$2(usage, "periodBasis", "usage.periodBasis")
 				};
-				if (usage.periodStart !== void 0) report.usage.periodStart = numberField(usage, "periodStart", "usage.periodStart");
+				if (usage.periodStart !== void 0) report.usage.periodStart = numberField$1(usage, "periodStart", "usage.periodStart");
 			}
 			if (source.credits !== void 0) {
-				const credits = record$1(source.credits, "credits");
+				const credits = record$2(source.credits, "credits");
 				const parsed = {
-					monthlyCredits: numberField(credits, "monthlyCredits", "credits.monthlyCredits"),
-					purchasedCredits: numberField(credits, "purchasedCredits", "credits.purchasedCredits"),
-					freeCredits: numberField(credits, "freeCredits", "credits.freeCredits")
+					monthlyCredits: numberField$1(credits, "monthlyCredits", "credits.monthlyCredits"),
+					purchasedCredits: numberField$1(credits, "purchasedCredits", "credits.purchasedCredits"),
+					freeCredits: numberField$1(credits, "freeCredits", "credits.freeCredits")
 				};
 				if (credits.monthlyReported !== void 0) parsed.monthlyReported = booleanField(credits, "monthlyReported", "credits.monthlyReported");
 				for (const flag of ["purchasedReported", "freeReported"]) if (credits[flag] !== void 0) parsed[flag] = booleanField(credits, flag, `credits.${flag}`);
@@ -2506,38 +2519,38 @@ window.__ModuleLoader__.load({
 				report.credits = parsed;
 			}
 			if (source.plan !== void 0) {
-				const plan = record$1(source.plan, "plan");
+				const plan = record$2(source.plan, "plan");
 				const monthly = plan.monthlyCredits;
-				if (monthly !== null && (typeof monthly !== "number" || !Number.isFinite(monthly))) reject$1("plan.monthlyCredits");
+				if (monthly !== null && (typeof monthly !== "number" || !Number.isFinite(monthly))) reject$2("plan.monthlyCredits");
 				report.plan = {
-					planId: stringField$1(plan, "planId", "plan.planId"),
-					name: stringField$1(plan, "name", "plan.name"),
-					status: stringField$1(plan, "status", "plan.status"),
+					planId: stringField$2(plan, "planId", "plan.planId"),
+					name: stringField$2(plan, "name", "plan.name"),
+					status: stringField$2(plan, "status", "plan.status"),
 					monthlyCredits: monthly,
-					currentPeriodEnd: numberField(plan, "currentPeriodEnd", "plan.currentPeriodEnd")
+					currentPeriodEnd: numberField$1(plan, "currentPeriodEnd", "plan.currentPeriodEnd")
 				};
-				if (plan.currentPeriodStart !== void 0) report.plan.currentPeriodStart = numberField(plan, "currentPeriodStart", "plan.currentPeriodStart");
+				if (plan.currentPeriodStart !== void 0) report.plan.currentPeriodStart = numberField$1(plan, "currentPeriodStart", "plan.currentPeriodStart");
 			}
 			return report;
 		}
 		/** Parse one untrusted boundary value into a {@link CommandCodeAccountUsage}. */
 		function parseAccountUsage(value) {
-			const source = record$1(value, "account");
+			const source = record$2(value, "account");
 			return {
-				id: stringField$1(source, "id", "account.id"),
-				label: stringField$1(source, "label", "account.label"),
+				id: stringField$2(source, "id", "account.id"),
+				label: stringField$2(source, "label", "account.label"),
 				configured: booleanField(source, "configured", "account.configured"),
 				active: booleanField(source, "active", "account.active"),
-				mark: stringField$1(source, "mark", "account.mark"),
-				cooldownUntil: numberField(source, "cooldownUntil", "account.cooldownUntil"),
+				mark: stringField$2(source, "mark", "account.mark"),
+				cooldownUntil: numberField$1(source, "cooldownUntil", "account.cooldownUntil"),
 				report: parseUsageReport(source.report)
 			};
 		}
 		/** Parse the wire result into a {@link CommandCodeAccountsReport}. */
 		function parseAccountsReport(value) {
-			const accounts = record$1(value, "result").accounts;
+			const accounts = record$2(value, "result").accounts;
 			if (Array.isArray(accounts)) return { accounts: accounts.map(parseAccountUsage) };
-			return reject$1("accounts");
+			return reject$2("accounts");
 		}
 		/** The Client-face contribution mounted on `ctx.remote`. */
 		const USAGE_REMOTE_CONTRIBUTION = {
@@ -2641,6 +2654,34 @@ window.__ModuleLoader__.load({
 			descriptors: [makeRemoteDescriptor(PRICES_ENDPOINT, "prices", `${USAGE_REMOTE_PACKAGE}#CommandCodePriceTable`, { parse: parsePriceTable })]
 		};
 		//#endregion
+		//#region src/service-probe-wire.ts
+		/** Canonical `<namespace>/<method>` endpoint of the probe Remote. */
+		const PROBE_ENDPOINT = "commandcode/probe";
+		const OUTCOMES = [
+			"ok",
+			"http-error",
+			"timeout",
+			"unreachable"
+		];
+		const { reject: reject$1, record: record$1, stringField: stringField$1, numberField } = makeBoundaryValidator("commandcode/probe result:");
+		/** Strict result codec, shared verbatim by the Host registration and Client mount. */
+		function parseProbeResult(value) {
+			const source = record$1(value, "result");
+			const outcome = stringField$1(source, "outcome", "outcome");
+			if (!OUTCOMES.includes(outcome)) reject$1("outcome");
+			return {
+				outcome,
+				status: numberField(source, "status", "status"),
+				latencyMs: numberField(source, "latencyMs", "latencyMs"),
+				checkedAt: numberField(source, "checkedAt", "checkedAt")
+			};
+		}
+		/** The Client-face contribution mounted on `ctx.remote`. */
+		const PROBE_REMOTE_CONTRIBUTION = {
+			package: REMOTE_PACKAGE,
+			descriptors: [makeRemoteDescriptor(PROBE_ENDPOINT, "probe", `${REMOTE_PACKAGE}#CommandCodeProbeResult`, { parse: parseProbeResult })]
+		};
+		//#endregion
 		//#region src/login-wire.ts
 		/** The canonical endpoint paths of the three login Remotes. */
 		const LOGIN_BEGIN_ENDPOINT = "commandcode/loginBegin";
@@ -3083,37 +3124,46 @@ window.__ModuleLoader__.load({
 			openAnalytics: "查看模型用量、成本与性能分析",
 			nav: "Command Code",
 			title: "Command Code",
-			intro: "账户操作立即生效；其余设置修改后点击底部「保存」。API 密钥仅保存在本机凭据服务中，不会回显。",
+			intro: "账户操作立即生效；其余改动点底部「保存」。密钥仅存于本机凭据服务，不回显。",
 			apiKey: "API 密钥",
 			apiKeyHint: "在 commandcode.ai 控制台创建。留空保存不会覆盖已存储的密钥。",
 			apiKeySet: "已配置",
 			apiKeyUnset: "未配置",
 			apiKeyLocked: "密钥由只读来源提供",
 			apiBase: "API 地址",
-			apiBaseHint: "默认 https://api.commandcode.ai，一般无需修改。",
-			requestTimeoutMs: "请求超时（秒）",
-			requestTimeoutMsHint: "等待响应首个字节的超时；默认 300 秒（与官方 CLI 一致）。Provider API 路由要等上游模型吐出第一个 token 才返回响应头，上游慢时仍可能不够；报超时时可按提示调高。",
-			streamIdleTimeoutMs: "流空闲超时（秒）",
-			streamIdleTimeoutMsHint: "生成流停滞多久视为断连；默认 300 秒（长思考模型可静默数分钟，默认值刻意放宽）。",
+			requestTimeoutMs: "请求超时",
+			requestTimeoutMsHint: "等待首个字节的超时，默认 300 秒；Provider API 要等上游模型吐出第一个 token 才返回，上游慢时可调高。",
+			streamIdleTimeoutMs: "流空闲超时",
+			streamIdleTimeoutMsHint: "生成流停滞多久视为断连，默认 300 秒（长思考模型可能静默数分钟）。",
 			transportMaxRetries: "网络失败重试次数",
-			transportMaxRetriesHint: "连接失败时自动重试几次，默认 5（各次等待 0.5+1+2+4+8 秒，合计约 15 秒）。超过后直接报错，不再按指数退避长时间等待；填 0 表示不重试。限流、5xx 等由服务端要求重试的失败不受此项影响。",
+			transportMaxRetriesHint: "连接失败时自动重试的次数，默认 5 次（约 15 秒）；填 0 不重试，限流与 5xx 的重试不受影响。",
 			offloadSeenImagesForCache: "已看过的图片不再重复发送",
-			offloadSeenImagesForCacheHint: "仅 CLI 传输。模型看过图片并回复后，永久用文字占位替代旧图片，以减少新增图片时的缓存回退。模型如需重看旧图，必须重新读取文件或让用户重新附加。默认关闭。",
+			offloadSeenImagesForCacheHint: "仅 CLI 传输。模型回复过的旧图片改用文字占位，减少新增图片时的缓存回退；重看需重新读取或附加。",
 			advancedSettings: "高级设置",
 			advancedSettingsHint: "API 地址和网络参数，一般无需修改。",
-			advancedOverriddenOne: "已自定义 1 项",
-			advancedOverriddenMany: "已自定义 {count} 项",
-			advancedInvalid: "高级设置中有未填好的数字，请展开修正后再保存。",
+			groupOverriddenOne: "已自定义 1 项",
+			groupOverriddenMany: "已自定义 {count} 项",
+			groupInvalid: "有未填好的数字",
+			saveLocate: "定位",
+			accountsSummaryOne: "1 个账户",
+			accountsSummaryMany: "{count} 个账户",
+			accountsSummaryIssues: "{count} 个异常",
+			visibleModelsSummary: "白名单 {count} 个",
+			visibleModelsSummaryAll: "显示全部模型",
+			zdrSummaryOn: "ZDR 开启",
+			zdrSummaryOff: "ZDR 关闭",
+			webSearchSummaryOn: "联网搜索开启",
+			webSearchSummaryOff: "联网搜索关闭",
 			filterModelsByPlan: "隐藏套餐外模型",
 			filterModelsByPlanHint: "只显示套餐内模型；按需余额账户仍显示全部。",
 			webSearch: "用 Command Code 承载联网搜索",
-			webSearchHint: "使用同一密钥承载 dsh 的 web_search；关闭后恢复原搜索后端。若「网页搜索」设置里已显式选择其他后端，本开关不生效。",
+			webSearchHint: "用同一密钥承载 dsh 的 web_search；「网页搜索」里已指定其他后端时本开关不生效。",
 			showSidebarQuota: "在侧边栏显示额度卡片",
-			showSidebarQuotaHint: "在侧边栏底部显示套餐与额度卡片，点击可打开完整仪表盘。默认关闭，关闭时不会为它后台刷新用量。",
+			showSidebarQuotaHint: "在侧边栏底部显示套餐与额度卡片，点击打开完整仪表盘；关闭时不在后台刷新用量。",
 			zdr: "零数据保留（ZDR）",
 			zdrHint: "仅使用不留存、不训练的上游；可用模型可能更少且价格通常更高。",
 			accountsTitle: "账户",
-			accountsHint: "账户操作立即生效，无需保存。可以添加多个账户：当前账户达到用量限额或密钥失效时，请求会自动切换到下一个。",
+			accountsHint: "可以添加多个账户：当前账户达到用量限额或密钥失效时，请求会自动切换到下一个。",
 			accountAdd: "添加账户",
 			accountDefault: "默认账户",
 			modelSearchPlaceholder: "搜索模型…",
@@ -3122,16 +3172,16 @@ window.__ModuleLoader__.load({
 			modelAllowance: "${amount}/月",
 			modelAllowanceTitle: "该模型每月可用的额度（美元）。套餐内所有模型共用同一个月度额度池，这不是额外赠送的额度。",
 			visibleModelsTitle: "模型白名单",
-			visibleModelsHint: "勾选要保留的模型，模型选择器就只列出这些；一个都不勾选时则显示全部模型。这里显示网页与终端合并后的有效选择；保存后两端一致，套餐权限仍独立过滤。",
+			visibleModelsHint: "模型选择器只列出勾选的模型，都不勾选则显示全部；网页与终端共用这份选择。",
 			visibleModelsPick: "选择要保留的模型…",
 			visibleModelsCount: "已选 {count} 个模型",
 			visibleModelsShowAll: "显示全部",
 			visibleModelsStaleHint: "有 {count} 个已选模型在目录中找不到了（可能已下架），不影响其他模型；可清理或保留。",
 			visibleModelsCleanStale: "清理失效（{count}）",
 			contextWindow: "自定义上下文长度",
-			contextWindowHint: "覆盖模型目录公布的上下文窗口（对未单独覆盖的模型生效），影响上下文计量与自动压缩；留空跟随目录。支持 32K、1M 简写。",
+			contextWindowHint: "覆盖目录公布的上下文窗口，影响上下文计量与自动压缩；留空跟随目录，支持 32K、1M。",
 			contextOverridesTitle: "按模型覆盖",
-			contextOverridesHint: "为单个模型单独设置上下文长度，优先于上面的全局值；模型下拉只列出模型白名单中的可见模型（显示全部时即整个目录）。",
+			contextOverridesHint: "为单个模型设置上下文长度，优先于上面的全局值；只能选白名单中的模型。",
 			contextOverrideAdd: "添加模型",
 			contextOverrideRemove: "移除该模型的上下文覆盖",
 			contextOverrideModel: "模型",
@@ -3141,12 +3191,17 @@ window.__ModuleLoader__.load({
 			contextWindowTooLarge: "上下文长度不能大于 10,000,000",
 			contextWindowInvalid: "请输入有效的整数 token 数",
 			maxOutputTokens: "单轮输出上限",
-			maxOutputTokensHint: "留空＝按模型推导（默认）；正整数＝不超过模型上限与网关上限 131072；0＝不发送该字段（仅 CLI 与 OpenAI 有效，Claude 的 Messages 端点必填）。支持 64K 简写。",
+			maxOutputTokensHint: "留空按模型推导；0＝不发送该字段（仅 CLI 与 OpenAI，Claude 的 Messages 端点必填）。上限 131072，支持 64K。",
 			maxOutputTokensTooSmall: "输出上限不能小于 0（0 表示不发送该字段）",
 			maxOutputTokensTooLarge: "输出上限不能大于 131072（网关上限）",
 			maxOutputTokensInvalid: "请输入 0 或有效的整数 token 数",
-			overridden: "已覆盖",
+			overridden: "已自定义",
 			reset: "重置",
+			unitSeconds: "秒",
+			unitTokens: "tokens",
+			unitRetries: "次",
+			placeholderCatalog: "跟随目录",
+			placeholderAuto: "自动",
 			invalidNumber: "无效数字",
 			numberTooSmall: "重试次数不能小于 0",
 			numberTooLarge: "重试次数不能大于 50",
@@ -3192,12 +3247,12 @@ window.__ModuleLoader__.load({
 			usageTokens: "Token",
 			usageTokensIn: "入",
 			usageTokensOut: "出",
-			usageMonthly: "月额度",
 			usagePurchased: "已购",
 			usageFree: "赠送",
 			usageFiveHour: "5 小时窗口",
 			usageWeekly: "每周窗口",
 			usageMonthlyLeft: "月额度剩余",
+			usageMonthlyDepleted: "月额度已用完，已购与赠送余额将无法使用。",
 			usageExceeded: "已超限",
 			usageReset: "重置于",
 			usagePartial: "部分端点数据不可用",
@@ -3222,7 +3277,7 @@ window.__ModuleLoader__.load({
 			loginButton: "登录 Command Code",
 			loginStarting: "正在启动本地回调服务…",
 			loginWaiting: "等待在浏览器中完成授权；若页面未自动打开，请点击授权链接。",
-			loginOpenLink: "打开授权页面 ↗",
+			loginOpenLink: "打开授权页面",
 			loginCancel: "取消登录",
 			loginSuccess: "已登录为",
 			loginUnavailable: "此环境暂不支持登录流程，请手动粘贴密钥。",
@@ -3237,7 +3292,7 @@ window.__ModuleLoader__.load({
 			cardRouteActive: "已启用",
 			cardLoadingHint: "正在读取 Command Code 配置…",
 			cardRegistrationHint: "此卡片由 Command Code 插件提供，正在等待设置页装配，稍后即可显示完整内容。",
-			accountsRotationHint: "账户操作立即生效。当前账户达到限额或密钥失效时，请求会按列表顺序切换到下一个可用账户。",
+			accountsRotationHint: "当前账户达到限额或密钥失效时，请求会按列表顺序切换到下一个可用账户。",
 			accountModeAuto: "使用方式：自动切换（按列表顺序）",
 			accountModePinned: "使用方式：固定使用「{name}」，不可用时仍会自动切换",
 			accountStatusPinned: "已固定",
@@ -3260,6 +3315,8 @@ window.__ModuleLoader__.load({
 			accountAddPaste: "粘贴密钥",
 			accountAddConfirm: "添加",
 			accountAddCancel: "取消开通",
+			accountAddStart: "开始登录",
+			accountAddMethod: "添加方式",
 			accountAddLinkHint: "若登录页面未自动打开，请点击下方链接。",
 			accountAddOpenLink: "打开浏览器登录",
 			accountNamePlaceholder: "备注名（可选，网页登录时默认使用账户名）",
@@ -3273,15 +3330,45 @@ window.__ModuleLoader__.load({
 			accountEnrollmentCleanupRetry: "重试清理",
 			accountRefSeparator: "：",
 			accountModels: "专用模型",
-			accountModelsHint: "选中的模型优先由此账户处理，此账户不可用时仍会自动切换。一个模型只属于一个账户，选中会把它从其他账户移过来。",
+			accountModelsHint: "选中的模型优先由此账户处理，不可用时仍会自动切换；一个模型只归属一个账户。",
 			accountModelOwner: "属于 {name}",
 			modelPick: "选择模型…",
 			modelCount: "已选 {count} 个模型",
 			modelCatalogFailed: "模型目录获取失败，暂时无法选择模型；已保存的设置仍会生效。",
 			modelsTitle: "模型与上下文",
-			modelsInvalid: "模型与上下文中有未填好的数字，请展开修正后再保存。",
 			privacyTitle: "隐私与安全",
 			integrationsTitle: "集成与显示",
+			serviceStatusTitle: "服务状态",
+			serviceStatusHint: "官方数据来自状态页的公开记录，仅在状态变化或每日汇总时发布；本机连通由宿主刚探测。",
+			serviceStatusChecking: "正在检查…",
+			serviceStatusUp: "服务正常",
+			serviceStatusDegraded: "部分降级",
+			serviceStatusDown: "服务中断",
+			serviceStatusUnknown: "状态未知",
+			serviceStatusOfficial: "官方",
+			serviceStatusLocal: "本机",
+			serviceStatusUptime: "可用率 {value}",
+			serviceStatusBadgeLocalHttp: "本机连接异常",
+			serviceStatusBadgeLocalTimeout: "本机连接超时",
+			serviceStatusBadgeLocalUnreachable: "本机无法连接",
+			serviceStatusUptimeWeek: "7 天 {value}",
+			serviceStatusUptimeMonth: "30 天 {value}",
+			serviceStatusResponseWeek: "平均响应 {value}",
+			serviceStatusUpdatedJustNow: "刚刚更新",
+			serviceStatusUpdatedMinutes: "{count} 分钟前更新",
+			serviceStatusUpdatedHours: "{count} 小时前更新",
+			serviceStatusUpdatedDays: "{count} 天前更新",
+			serviceStatusUpdatedUnknown: "更新时间未知",
+			serviceStatusLag: "官方数据仅在状态变化或每日汇总时发布，可能滞后数小时。",
+			serviceStatusLocalChecking: "正在探测…",
+			serviceStatusLocalOk: "连通正常 · {latency} ms",
+			serviceStatusLocalHttp: "连接异常（HTTP {status}）",
+			serviceStatusLocalTimeout: "连接超时",
+			serviceStatusLocalUnreachable: "无法连接",
+			serviceStatusLocalUnavailable: "未知（宿主未提供探测）",
+			serviceStatusStale: "无法获取状态数据，以下为上次成功获取的结果。",
+			serviceStatusUnavailable: "无法获取状态数据。",
+			serviceStatusOpen: "打开状态页",
 			enrollmentCreating: "正在创建账号",
 			enrollmentWaiting: "等待浏览器登录",
 			enrollmentWriting: "正在保存凭据",
@@ -3309,37 +3396,46 @@ window.__ModuleLoader__.load({
 			openAnalytics: "View model usage, cost and performance",
 			nav: "Command Code",
 			title: "Command Code",
-			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.",
+			intro: "Account actions apply immediately; other changes need Save below. The 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",
 			apiKeyUnset: "Not configured",
 			apiKeyLocked: "Key provided by a read-only source",
 			apiBase: "API base URL",
-			apiBaseHint: "Defaults to https://api.commandcode.ai; usually leave as-is.",
-			requestTimeoutMs: "Request timeout (seconds)",
-			requestTimeoutMsHint: "Time to wait for the first response byte; default 300 s (the official CLI’s). The Provider API route withholds headers until the upstream model emits its first token, so a slow upstream can still outlast the default; raise it when a timeout message suggests it.",
-			streamIdleTimeoutMs: "Stream idle timeout (seconds)",
-			streamIdleTimeoutMsHint: "How long a stalled stream is treated as dead; default 300 s (deliberately generous — long-thinking models can stay silent for minutes).",
+			requestTimeoutMs: "Request timeout",
+			requestTimeoutMsHint: "Wait for the first response byte; default 300 s. The Provider API route answers only after the upstream’s first token, so raise it for a slow upstream.",
+			streamIdleTimeoutMs: "Stream idle timeout",
+			streamIdleTimeoutMsHint: "How long a stalled stream counts as dead; default 300 s (long-thinking models can go quiet for minutes).",
 			transportMaxRetries: "Transport retries",
-			transportMaxRetriesHint: "How many times a failed connection is retried automatically; default 5 (waits of 0.5+1+2+4+8s, ~15s in total). After that the failure is reported instead of waiting on the exponential backoff. 0 disables the retries. Rate limits and 5xx answers keep their own, longer retry window.",
+			transportMaxRetriesHint: "Automatic retries after a failed connection; default 5 (~15 s in all). 0 disables them; rate limits and 5xx keep their own retries.",
 			offloadSeenImagesForCache: "Stop replaying images already seen",
-			offloadSeenImagesForCacheHint: "CLI transport only. After this model responds to an image, durably replace older pixels with text to avoid cache rollback when another image arrives. To inspect an old image again, the model must reread its file or the user must attach it again. Off by default.",
+			offloadSeenImagesForCacheHint: "CLI transport only. Images the model already answered become text placeholders, so a new image no longer rolls back the cache; to see one again, reread or reattach it.",
 			advancedSettings: "Advanced",
 			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.",
+			groupOverriddenOne: "1 customized",
+			groupOverriddenMany: "{count} customized",
+			groupInvalid: "Needs a fix",
+			saveLocate: "Show",
+			accountsSummaryOne: "1 account",
+			accountsSummaryMany: "{count} accounts",
+			accountsSummaryIssues: "{count} need attention",
+			visibleModelsSummary: "{count} allowlisted",
+			visibleModelsSummaryAll: "All models shown",
+			zdrSummaryOn: "ZDR on",
+			zdrSummaryOff: "ZDR off",
+			webSearchSummaryOn: "Web search on",
+			webSearchSummaryOff: "Web search off",
 			filterModelsByPlan: "Hide out-of-plan models",
 			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: "Use the same key for dsh web search; turning it off restores the previous backend. When the Web search settings already pin another backend, this switch has no effect.",
+			webSearchHint: "Use the same key for dsh web search. No effect while the Web search settings pin another backend.",
 			showSidebarQuota: "Show the quota card in the sidebar",
-			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.",
+			showSidebarQuotaHint: "Show a plan and quota card at the bottom of the sidebar that opens the full dashboard; while off, nothing refreshes in the background.",
 			zdr: "Zero data retention (ZDR)",
 			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.",
+			accountsHint: "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",
 			accountDefault: "Default account",
 			modelSearchPlaceholder: "Search models…",
@@ -3348,16 +3444,16 @@ window.__ModuleLoader__.load({
 			modelAllowance: "${amount}/mo",
 			modelAllowanceTitle: "Monthly usage this model can draw, in USD. Every model shares one monthly pool — this is not extra credit on top of the plan.",
 			visibleModelsTitle: "Model allowlist",
-			visibleModelsHint: "Check the models you want to keep, and model pickers will list only those. If nothing is checked, every model is shown. After saving, the change applies in both web and terminal settings. This page shows their effective selection; plan access is filtered separately.",
+			visibleModelsHint: "Model pickers list only the checked models; check none to show all. Web and terminal share this selection.",
 			visibleModelsPick: "Select models to keep…",
 			visibleModelsCount: "{count} model(s) selected",
 			visibleModelsShowAll: "Show all",
 			visibleModelsStaleHint: "{count} selected model(s) are no longer in the catalog (possibly retired); other models are unaffected. Clean them up or keep them.",
 			visibleModelsCleanStale: "Clean stale ({count})",
 			contextWindow: "Custom context length",
-			contextWindowHint: "Overrides the context window published by the model catalog, for every model without an override of its own below; the context meter and auto-compaction follow it. Empty follows the catalog. Shorthand like 32K or 1M is accepted.",
+			contextWindowHint: "Overrides the catalog’s context window; the context meter and auto-compaction follow it. Empty follows the catalog; 32K or 1M accepted.",
 			contextOverridesTitle: "Per-model overrides",
-			contextOverridesHint: "Set a context length for one model; it wins over the global value above. The picker lists only the models kept by the visible-models allowlist (the whole catalog while showing all).",
+			contextOverridesHint: "Set one model’s context length; it wins over the global value above. Only allowlisted models can be picked.",
 			contextOverrideAdd: "Add model",
 			contextOverrideRemove: "Remove this model’s context override",
 			contextOverrideModel: "Model",
@@ -3367,12 +3463,17 @@ window.__ModuleLoader__.load({
 			contextWindowTooLarge: "Context length must not exceed 10,000,000",
 			contextWindowInvalid: "Enter a valid whole-token count",
 			maxOutputTokens: "Output limit per turn",
-			maxOutputTokensHint: "Empty derives it from the model (default). A positive number never exceeds the model ceiling or the gateway’s 131,072. 0 omits the field (CLI and OpenAI only; Claude’s Messages endpoint requires it). 64K shorthand accepted.",
+			maxOutputTokensHint: "Empty derives it from the model. 0 omits the field (CLI and OpenAI only; Claude’s Messages endpoint requires it). Capped at 131,072; 64K accepted.",
 			maxOutputTokensTooSmall: "Output limit must be at least 0 (0 omits the field)",
 			maxOutputTokensTooLarge: "Output limit must not exceed 131,072 (the gateway cap)",
 			maxOutputTokensInvalid: "Enter 0 or a valid whole-token count",
-			overridden: "Overridden",
+			overridden: "Customized",
 			reset: "Reset",
+			unitSeconds: "s",
+			unitTokens: "tokens",
+			unitRetries: "times",
+			placeholderCatalog: "Catalog",
+			placeholderAuto: "Auto",
 			invalidNumber: "Invalid number",
 			numberTooSmall: "Retries must be at least 0",
 			numberTooLarge: "Retries must not exceed 50",
@@ -3418,12 +3519,12 @@ window.__ModuleLoader__.load({
 			usageTokens: "Tokens",
 			usageTokensIn: "in",
 			usageTokensOut: "out",
-			usageMonthly: "Monthly",
 			usagePurchased: "Purchased",
 			usageFree: "Free",
 			usageFiveHour: "5-hour window",
 			usageWeekly: "Weekly window",
 			usageMonthlyLeft: "Monthly left",
+			usageMonthlyDepleted: "Monthly credit is used up; purchased and free credit can no longer be spent.",
 			usageExceeded: "Exceeded",
 			usageReset: "Resets",
 			usagePartial: "Some endpoint data unavailable",
@@ -3448,7 +3549,7 @@ window.__ModuleLoader__.load({
 			loginButton: "Sign in to Command Code",
 			loginStarting: "Starting the local callback server…",
 			loginWaiting: "Waiting for authorization in your browser. If the page did not open automatically, use the authorization link.",
-			loginOpenLink: "Open the authorization page ↗",
+			loginOpenLink: "Open the authorization page",
 			loginCancel: "Cancel sign-in",
 			loginSuccess: "Signed in as",
 			loginUnavailable: "Sign-in is unavailable in this environment; paste the API key instead.",
@@ -3463,7 +3564,7 @@ window.__ModuleLoader__.load({
 			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.",
-			accountsRotationHint: "Account actions apply immediately. When the current account hits its limit or its key stops working, requests switch to the next usable account in list order.",
+			accountsRotationHint: "When the current account hits its 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",
@@ -3486,6 +3587,8 @@ window.__ModuleLoader__.load({
 			accountAddPaste: "Paste key",
 			accountAddConfirm: "Add",
 			accountAddCancel: "Cancel setup",
+			accountAddStart: "Start sign-in",
+			accountAddMethod: "Method",
 			accountAddLinkHint: "If the sign-in page did not open automatically, use the link below.",
 			accountAddOpenLink: "Open the sign-in page",
 			accountNamePlaceholder: "Name (optional; sign-in uses the account name)",
@@ -3499,15 +3602,45 @@ window.__ModuleLoader__.load({
 			accountEnrollmentCleanupRetry: "Retry cleanup",
 			accountRefSeparator: ": ",
 			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.",
+			accountModelsHint: "These models prefer this account and still switch when it is unavailable; a model belongs to one account.",
 			accountModelOwner: "on {name}",
 			modelPick: "Choose models…",
 			modelCount: "{count} models selected",
 			modelCatalogFailed: "The model catalog could not be loaded; saved settings still apply.",
 			modelsTitle: "Models & context",
-			modelsInvalid: "A number in Models & context is not ready to save; expand to fix it.",
 			privacyTitle: "Privacy & security",
 			integrationsTitle: "Integrations & display",
+			serviceStatusTitle: "Service status",
+			serviceStatusHint: "Published data comes from the official status page and is only written on a status change or the daily summary; local connectivity is probed by the host just now.",
+			serviceStatusChecking: "Checking…",
+			serviceStatusUp: "Operational",
+			serviceStatusDegraded: "Degraded performance",
+			serviceStatusDown: "Service outage",
+			serviceStatusUnknown: "Status unknown",
+			serviceStatusOfficial: "Official",
+			serviceStatusLocal: "This device",
+			serviceStatusUptime: "uptime {value}",
+			serviceStatusBadgeLocalHttp: "Connection error here",
+			serviceStatusBadgeLocalTimeout: "Timing out here",
+			serviceStatusBadgeLocalUnreachable: "Unreachable here",
+			serviceStatusUptimeWeek: "7d {value}",
+			serviceStatusUptimeMonth: "30d {value}",
+			serviceStatusResponseWeek: "avg {value}",
+			serviceStatusUpdatedJustNow: "updated just now",
+			serviceStatusUpdatedMinutes: "updated {count} min ago",
+			serviceStatusUpdatedHours: "updated {count} h ago",
+			serviceStatusUpdatedDays: "updated {count} d ago",
+			serviceStatusUpdatedUnknown: "update time unknown",
+			serviceStatusLag: "Official data is only published on a status change or the daily summary, so it may lag by hours.",
+			serviceStatusLocalChecking: "Probing…",
+			serviceStatusLocalOk: "Reachable · {latency} ms",
+			serviceStatusLocalHttp: "Error (HTTP {status})",
+			serviceStatusLocalTimeout: "Timed out",
+			serviceStatusLocalUnreachable: "Unreachable",
+			serviceStatusLocalUnavailable: "Unknown (host provides no probe)",
+			serviceStatusStale: "Status data unavailable; showing the last known result.",
+			serviceStatusUnavailable: "Status data unavailable.",
+			serviceStatusOpen: "Open status page",
 			enrollmentCreating: "Creating the account",
 			enrollmentWaiting: "Waiting for the browser sign-in",
 			enrollmentWriting: "Saving the credential",
@@ -3704,7 +3837,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region package.json
-		var version = "0.14.5";
+		var version = "0.15.0";
 		var repository = {
 			"type": "git",
 			"url": "git+https://github.com/Mars-Sea/dsh-commandcode-provider.git"
@@ -3876,6 +4009,392 @@ window.__ModuleLoader__.load({
 			return hintOf(version);
 		}
 		//#endregion
+		//#region src/client/service-status.ts
+		/** The public status page the row links to. */
+		const STATUS_PAGE_URL = "https://status.commandcode.ai/";
+		/** Upptime data files, freshest host first. */
+		const STATUS_SOURCES = ["https://raw.githubusercontent.com/CommandCodeAI/commandcode-status/master/history", "https://cdn.jsdelivr.net/gh/CommandCodeAI/commandcode-status@master/history"];
+		/** Files inside a source directory (the monitor's naming, not ours to change). */
+		const SUMMARY_FILE = "summary.json";
+		const STATE_FILE = "command-code.yml";
+		/** The one site the Upptime config monitors. */
+		const MONITORED_URL = "https://api.commandcode.ai";
+		const MONITORED_SLUG = "command-code";
+		/** The `localStorage` key holding the last successful snapshot. */
+		const SERVICE_STATUS_CACHE_KEY = "@mars-sea/dsh-commandcode-provider/service-status";
+		const LEVELS = [
+			"up",
+			"degraded",
+			"down",
+			"unknown"
+		];
+		function levelOf(value) {
+			return typeof value === "string" && LEVELS.includes(value) ? value : void 0;
+		}
+		function stringOrUndefined(value) {
+			return typeof value === "string" && value !== "" ? value : void 0;
+		}
+		function finiteNumber(value) {
+			return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+		}
+		/**
+		* Read the monitored site's verdict out of `summary.json`.
+		*
+		* The file is an array because an Upptime config may monitor several sites; we
+		* match our API host, then the known slug, then the first record so a rename on
+		* their side degrades to "show what the page shows" rather than to nothing.
+		* Rejects only when the payload cannot answer at all — a rejection makes the
+		* caller try the next mirror.
+		*/
+		function parseSummary(payload) {
+			if (!Array.isArray(payload)) throw new Error("status summary is not an array");
+			const records = payload.filter((entry) => typeof entry === "object" && entry !== null);
+			const record = records.find((entry) => entry["url"] === MONITORED_URL) ?? records.find((entry) => entry["slug"] === MONITORED_SLUG) ?? records[0];
+			if (record === void 0) throw new Error("status summary has no site record");
+			const level = levelOf(record["status"]);
+			if (level === void 0) throw new Error("status summary has no usable status");
+			return {
+				level,
+				uptimeWeek: stringOrUndefined(record["uptimeWeek"]),
+				uptimeMonth: stringOrUndefined(record["uptimeMonth"]),
+				responseTimeWeekMs: finiteNumber(record["timeWeek"])
+			};
+		}
+		/**
+		* Read the monitor's own state file (`key: value` YAML the robot writes).
+		*
+		* Only scalar lines are needed, so this stays a line parser: pulling a YAML
+		* library into the client bundle for five fields would be the larger risk. A
+		* malformed line is ignored; the caller treats missing fields as unknown rather
+		* than failing the whole source, because the summary (not this file) is what
+		* carries the verdict.
+		*/
+		function parseStateFile(text) {
+			const fields = /* @__PURE__ */ new Map();
+			for (const line of text.split("\n")) {
+				const match = /^([A-Za-z][A-Za-z0-9]*):[ \t]*(.*)$/.exec(line.trim());
+				if (match !== null) fields.set(match[1], match[2].trim());
+			}
+			const checkedRaw = fields.get("lastUpdated");
+			const checkedAt = checkedRaw === void 0 ? NaN : Date.parse(checkedRaw);
+			const codeRaw = fields.get("code");
+			const code = codeRaw === void 0 ? NaN : Number.parseInt(codeRaw, 10);
+			const responseRaw = fields.get("responseTime");
+			const responseTime = responseRaw === void 0 ? NaN : Number.parseFloat(responseRaw);
+			return {
+				level: levelOf(fields.get("status")),
+				checkedAt: Number.isFinite(checkedAt) ? checkedAt : void 0,
+				responseTimeMs: Number.isFinite(responseTime) ? responseTime : void 0,
+				code: Number.isFinite(code) ? code : void 0
+			};
+		}
+		/** Fetch one text resource with a hard timeout; rejects on any non-OK answer. */
+		async function fetchText(url, fetchImpl, timeoutMs) {
+			const controller = new AbortController();
+			const timer = setTimeout(() => controller.abort(), timeoutMs);
+			try {
+				const response = await fetchImpl(url, { signal: controller.signal });
+				if (!response.ok) throw new Error(`status source responded ${response.status}`);
+				return await response.text();
+			} finally {
+				clearTimeout(timer);
+			}
+		}
+		/** Read one mirror: the summary is required, the state file is best-effort. */
+		async function readSource(base, fetchImpl, timeoutMs) {
+			const [summaryText, stateText] = await Promise.all([fetchText(`${base}/${SUMMARY_FILE}`, fetchImpl, timeoutMs), fetchText(`${base}/${STATE_FILE}`, fetchImpl, timeoutMs).catch(() => void 0)]);
+			return {
+				summary: parseSummary(JSON.parse(summaryText)),
+				state: stateText === void 0 ? {} : parseStateFile(stateText)
+			};
+		}
+		/**
+		* A {@link ServiceStatusStore} backed by `localStorage`. Tolerates a missing or
+		* throwing storage (private modes): reads yield `undefined`, writes are
+		* dropped, and the status row still works for the lifetime of the page.
+		*/
+		function localStorageServiceStatusStore(storage = typeof localStorage === "undefined" ? void 0 : localStorage) {
+			return {
+				read() {
+					if (storage === void 0) return void 0;
+					try {
+						const raw = storage.getItem(SERVICE_STATUS_CACHE_KEY);
+						if (raw === null) return void 0;
+						return snapshotFrom(JSON.parse(raw));
+					} catch {
+						return;
+					}
+				},
+				write(snapshot) {
+					if (storage === void 0) return;
+					try {
+						storage.setItem(SERVICE_STATUS_CACHE_KEY, JSON.stringify(snapshot));
+					} catch {}
+				}
+			};
+		}
+		/** Validate a cached payload; storage may have been written by an older build. */
+		function snapshotFrom(value) {
+			if (typeof value !== "object" || value === null) return void 0;
+			const record = value;
+			const level = levelOf(record["level"]);
+			const fetchedAt = finiteNumber(record["fetchedAt"]);
+			if (level === void 0 || fetchedAt === void 0) return void 0;
+			return {
+				level,
+				checkedAt: finiteNumber(record["checkedAt"]),
+				uptimeWeek: stringOrUndefined(record["uptimeWeek"]),
+				uptimeMonth: stringOrUndefined(record["uptimeMonth"]),
+				responseTimeWeekMs: finiteNumber(record["responseTimeWeekMs"]),
+				live: record["live"] === true,
+				stale: record["stale"] === true,
+				fetchedAt
+			};
+		}
+		/** The cached snapshot, for an instant first paint before the check lands. */
+		function readCachedServiceStatus(store) {
+			return store.read();
+		}
+		/**
+		* Resolve the service status, preferring the cache while it is fresh and the
+		* freshest mirror otherwise. Resolves with a snapshot in every case; the only
+		* "failure" the caller sees is `live: false` (+ `stale` when a cache existed).
+		*/
+		async function checkServiceStatus(options) {
+			const now = options.now ?? Date.now();
+			const cached = options.store.read();
+			if (cached !== void 0 && now - cached.fetchedAt < 3e5) return cached;
+			const fetchImpl = options.fetchImpl ?? fetch;
+			const sources = options.sources ?? STATUS_SOURCES;
+			const timeoutMs = options.timeoutMs ?? 5e3;
+			for (const source of sources) try {
+				const { summary, state } = await readSource(source, fetchImpl, timeoutMs);
+				const snapshot = {
+					level: state.level ?? summary.level,
+					checkedAt: state.checkedAt,
+					uptimeWeek: summary.uptimeWeek,
+					uptimeMonth: summary.uptimeMonth,
+					responseTimeWeekMs: summary.responseTimeWeekMs ?? state.responseTimeMs,
+					live: true,
+					stale: false,
+					fetchedAt: now
+				};
+				options.store.write(snapshot);
+				return snapshot;
+			} catch {}
+			if (cached !== void 0) return {
+				...cached,
+				live: false,
+				stale: true
+			};
+			return {
+				level: "unknown",
+				live: false,
+				stale: false,
+				fetchedAt: now
+			};
+		}
+		/** The published record's age: `官方数据更新：刚刚` / N minutes / hours / days. */
+		function updatedCopy(checkedAt, now, t) {
+			const age = Math.max(0, now - checkedAt);
+			if (age < 6e4) return t("serviceStatusUpdatedJustNow");
+			const minutes = Math.floor(age / 6e4);
+			if (minutes < 60) return t("serviceStatusUpdatedMinutes", { count: minutes });
+			const hours = Math.floor(minutes / 60);
+			if (hours < 24) return t("serviceStatusUpdatedHours", { count: hours });
+			return t("serviceStatusUpdatedDays", { count: Math.floor(hours / 24) });
+		}
+		/** The publication-lag explanation, shown once the record is old enough. */
+		function lagCopy(checkedAt, now, t) {
+			if (checkedAt === void 0) return void 0;
+			return now - checkedAt >= 72e5 ? t("serviceStatusLag") : void 0;
+		}
+		/** The local-connectivity line and its dot tone. */
+		function localCopy(probe, t) {
+			if (probe.kind === "checking") return {
+				text: t("serviceStatusLocalChecking"),
+				tone: "muted"
+			};
+			if (probe.kind === "unavailable") return {
+				text: t("serviceStatusLocalUnavailable"),
+				tone: "muted"
+			};
+			const { result } = probe;
+			if (result.outcome === "ok") return {
+				text: t("serviceStatusLocalOk", { latency: result.latencyMs }),
+				tone: "ok"
+			};
+			if (result.outcome === "http-error") return {
+				text: t("serviceStatusLocalHttp", { status: result.status }),
+				tone: "error"
+			};
+			if (result.outcome === "timeout") return {
+				text: t("serviceStatusLocalTimeout"),
+				tone: "error"
+			};
+			return {
+				text: t("serviceStatusLocalUnreachable"),
+				tone: "error"
+			};
+		}
+		/**
+		* A published uptime without its padding zeros: the summary prints two
+		* decimals verbatim (`100.00%`), which reads as noise, so `100.00%` becomes
+		* `100%` and `99.90%` becomes `99.9%`; anything that is not a plain percentage
+		* is shown as published.
+		*/
+		function compactUptime(value) {
+			const match = /^(\d+)(?:\.(\d+))?%$/.exec(value.trim());
+			if (match === null) return value;
+			const fraction = (match[2] ?? "").replace(/0+$/, "");
+			return fraction === "" ? `${match[1]}%` : `${match[1]}.${fraction}%`;
+		}
+		/** The aggregate line, or undefined when this check carried no aggregates. */
+		function detailCopy(snapshot, t) {
+			const parts = [];
+			const uptimes = [];
+			if (snapshot.uptimeWeek !== void 0) uptimes.push(t("serviceStatusUptimeWeek", { value: compactUptime(snapshot.uptimeWeek) }));
+			if (snapshot.uptimeMonth !== void 0) uptimes.push(t("serviceStatusUptimeMonth", { value: compactUptime(snapshot.uptimeMonth) }));
+			if (uptimes.length > 0) parts.push(t("serviceStatusUptime", { value: uptimes.join(" / ") }));
+			if (snapshot.responseTimeWeekMs !== void 0) parts.push(t("serviceStatusResponseWeek", { value: `${Math.round(snapshot.responseTimeWeekMs)} ms` }));
+			return parts.length === 0 ? void 0 : parts.join(" · ");
+		}
+		/** The heading verdict: a failed local probe first, else the published one. */
+		function badgeOf(probe, official, t) {
+			if (probe.kind !== "result" || probe.result.outcome === "ok") return official;
+			const { outcome } = probe.result;
+			return {
+				label: outcome === "http-error" ? t("serviceStatusBadgeLocalHttp") : outcome === "timeout" ? t("serviceStatusBadgeLocalTimeout") : t("serviceStatusBadgeLocalUnreachable"),
+				tone: "warn"
+			};
+		}
+		/**
+		* Project a snapshot + the live probe into the row's copy. Pure and React-free
+		* so the labels, the age buckets, the lag rule and the failure wording are
+		* pinned by node tests rather than by rendering.
+		*
+		* `snapshot === undefined` means the first published-data check is still in
+		* flight (the hook paints the cache first, so this only shows on a cold cache).
+		* The probe is independent: the row always renders both halves, and the local
+		* half never borrows the published verdict.
+		*/
+		function serviceStatusView(snapshot, probe, t, now) {
+			const local = localCopy(probe, t);
+			const hint = t("serviceStatusHint");
+			if (snapshot === void 0) {
+				const label = t("serviceStatusChecking");
+				return {
+					level: "unknown",
+					checking: true,
+					label,
+					officialTone: "checking",
+					badge: badgeOf(probe, {
+						label,
+						tone: "checking"
+					}, t),
+					local: local.text,
+					localTone: local.tone,
+					localChecking: probe.kind === "checking",
+					hint,
+					linkLabel: t("serviceStatusOpen")
+				};
+			}
+			const label = snapshot.level === "up" ? t("serviceStatusUp") : snapshot.level === "degraded" ? t("serviceStatusDegraded") : snapshot.level === "down" ? t("serviceStatusDown") : t("serviceStatusUnknown");
+			const notice = snapshot.live ? void 0 : snapshot.stale ? t("serviceStatusStale") : t("serviceStatusUnavailable");
+			const officialTone = snapshot.level === "up" ? "ok" : snapshot.level === "degraded" ? "warn" : snapshot.level === "down" ? "error" : "idle";
+			return {
+				level: snapshot.level,
+				checking: false,
+				label,
+				officialTone,
+				badge: badgeOf(probe, {
+					label,
+					tone: officialTone
+				}, t),
+				detail: detailCopy(snapshot, t),
+				updated: snapshot.checkedAt === void 0 ? t("serviceStatusUpdatedUnknown") : updatedCopy(snapshot.checkedAt, now, t),
+				lag: lagCopy(snapshot.checkedAt, now, t),
+				local: local.text,
+				localTone: local.tone,
+				localChecking: probe.kind === "checking",
+				notice,
+				hint,
+				linkLabel: t("serviceStatusOpen")
+			};
+		}
+		//#endregion
+		//#region src/client/group-fold.ts
+		const FOLD_GROUPS = [
+			"accounts",
+			"models",
+			"privacy",
+			"integrations",
+			"advanced"
+		];
+		/** First visit: only Accounts open. */
+		const DEFAULT_FOLD_STATE = {
+			accounts: true,
+			models: false,
+			privacy: false,
+			integrations: false,
+			advanced: false
+		};
+		/** The `localStorage` key holding the serialized {@link FoldState}. */
+		const FOLD_STATE_KEY = "@mars-sea/dsh-commandcode-provider/settings-fold";
+		/**
+		* Read a stored value back. Anything unusable — absent, not JSON, not an
+		* object — yields the defaults; within an object, each group takes its stored
+		* flag only when it is a real boolean, so a partial or older record keeps the
+		* groups it knows and defaults the rest.
+		*/
+		function parseFoldState(raw) {
+			if (raw === null || raw === void 0 || raw === "") return DEFAULT_FOLD_STATE;
+			let parsed;
+			try {
+				parsed = JSON.parse(raw);
+			} catch {
+				return DEFAULT_FOLD_STATE;
+			}
+			if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) return DEFAULT_FOLD_STATE;
+			const record = parsed;
+			const next = { ...DEFAULT_FOLD_STATE };
+			for (const group of FOLD_GROUPS) {
+				const value = record[group];
+				if (typeof value === "boolean") next[group] = value;
+			}
+			return next;
+		}
+		/** Open the given groups, leaving the rest as they are (the save bar's locate action). */
+		function expandGroups(state, groups) {
+			if (groups.every((group) => state[group])) return state;
+			const next = { ...state };
+			for (const group of groups) next[group] = true;
+			return next;
+		}
+		/**
+		* A {@link FoldStateStore} backed by `localStorage`. A missing or throwing
+		* storage (private mode, blocked site data) reads as the defaults and drops
+		* writes: the page must render the same either way.
+		*/
+		function localStorageFoldStore(storage = typeof localStorage === "undefined" ? void 0 : localStorage) {
+			return {
+				read() {
+					if (storage === void 0) return DEFAULT_FOLD_STATE;
+					try {
+						return parseFoldState(storage.getItem(FOLD_STATE_KEY));
+					} catch {
+						return DEFAULT_FOLD_STATE;
+					}
+				},
+				write(state) {
+					if (storage === void 0) return;
+					try {
+						storage.setItem(FOLD_STATE_KEY, JSON.stringify(state));
+					} catch {}
+				}
+			};
+		}
+		//#endregion
 		//#region src/client/section.tsx
 		/**
 		* React component for the "Command Code" settings page (browser half).
@@ -3889,21 +4408,172 @@ window.__ModuleLoader__.load({
 		* actions and dedicated models — every operation commits immediately), Models
 		* & context (plan filter + visible-model allowlist, then the context-length
 		* rows: the global custom window and the per-model overrides, issue #86),
-		* Privacy & security (ZDR), Integrations & display (web search, sidebar quota
-		* card), and a collapsed Advanced card (API base + network limits). Everything
+		* Privacy & security (ZDR), Integrations & display (service status, web search,
+		* sidebar quota card), and Advanced (API base + network limits). Everything
 		* below Accounts is a flat group of rows (title/description left, control
 		* right) inside the staged form the floating save bar writes.
 		*
-		* Two of those groups fold from their own heading — Models & context (issue
-		* #94) and Advanced — and both start collapsed on every visit, with no
-		* remembered state. While a group is collapsed its rows are not on screen, so
-		* anything inside it that blocks the save is reported on the heading itself
-		* (see `CollapsibleGroup`); the save bar alone would leave the disabled Save
-		* button unexplained.
+		* All five groups fold from their own heading (`FoldableGroup`, 决策记录第十章
+		* 第4条): Accounts opens by default, the rest start folded, and the choice is
+		* remembered per browser (./group-fold.ts). A folded heading still summarizes its group, and anything
+		* inside it that blocks the save is reported on the heading; the save bar's
+		* Locate action opens that group and focuses the invalid field.
 		*
 		* Styles are injected once by the client entry (see src/client/index.ts) and
 		* class-prefixed `cc-` to stay local.
 		*/
+		const ICON_PATHS = {
+			swap: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.5 5h9l-2-2" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M13.5 11h-9l2 2" })] }),
+			chevron: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 6l4 4 4-4" }),
+			more: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "8",
+					cy: "3.5",
+					r: ".9",
+					fill: "currentColor",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "8",
+					cy: "8",
+					r: ".9",
+					fill: "currentColor",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "8",
+					cy: "12.5",
+					r: ".9",
+					fill: "currentColor",
+					stroke: "none"
+				})
+			] }),
+			chart: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.5 13.5h11" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4.5 13.5V8.5M8 13.5V4.5M11.5 13.5V6.5" })] }),
+			arrowRight: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 8h10M9 4l4 4-4 4" }),
+			check: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "8",
+				cy: "8",
+				r: "6"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.5 8.2 7.2 9.8 10.5 6.5" })] }),
+			reset: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.5 8a5.5 5.5 0 1 0 1.6-3.9" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.5 2.5v3h3" })] }),
+			close: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }),
+			refresh: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M13.5 2.5v3h-3" })] }),
+			plus: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 3v10M3 8h10" }),
+			external: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M9 2.5h4.5V7" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M13.5 2.5 7.5 8.5" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M11.5 9.5v3a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3" })
+			] }),
+			info: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "8",
+				cy: "8",
+				r: "6"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 7.25v3.5M8 5.25v.01" })] }),
+			warn: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 2.5 14 13H2z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 6.5v3M8 11.25v.01" })] }),
+			error: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "8",
+				cy: "8",
+				r: "6"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6 6l4 4M10 6l-4 4" })] }),
+			lock: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				x: "3",
+				y: "7",
+				width: "10",
+				height: "7",
+				rx: "1.5"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.5 7V5a2.5 2.5 0 0 1 5 0v2" })] })
+		};
+		function Icon({ name, className = "cc-icon" }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				className,
+				viewBox: "0 0 16 16",
+				width: "16",
+				height: "16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: ICON_PATHS[name]
+			});
+		}
+		const PAGE_BUTTON_VARIANT = {
+			primary: "cc-btnPrimary",
+			outline: "cc-btnSecondary",
+			ghost: "cc-btnGhost",
+			danger: "cc-btnDanger"
+		};
+		const PAGE_BUTTON_SIZE = {
+			sm: " cc-btnSm",
+			md: "",
+			lg: " cc-btnLg"
+		};
+		function PageButton({ variant = "ghost", size = "md", icon, className, type = "button", children, ...rest }) {
+			const classes = `cc-btn ${PAGE_BUTTON_VARIANT[variant]}${PAGE_BUTTON_SIZE[size]}${className === void 0 ? "" : ` ${className}`}`;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				...rest,
+				type,
+				className: classes,
+				children: [icon, children]
+			});
+		}
+		const NOTICE_ICON = {
+			neutral: "info",
+			success: "check",
+			warn: "warn",
+			error: "error"
+		};
+		const NOTICE_CLASS = {
+			neutral: "cc-notice",
+			success: "cc-notice cc-noticeSuccess",
+			warn: "cc-notice cc-noticeWarn",
+			error: "cc-notice cc-noticeError"
+		};
+		/**
+		* The one block every result, warning and failure on this page uses (read-only
+		* config, a failed account operation, a cleanup still owed, …), so status no
+		* longer arrives as loose red paragraphs in a different shape each time.
+		* Actions sit under the text; the caller keeps the live-region role.
+		*/
+		function Notice({ tone = "neutral", icon, title, actions, role = "status", label, children }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: NOTICE_CLASS[tone],
+				role,
+				"aria-label": label,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: icon ?? NOTICE_ICON[tone],
+					className: "cc-noticeIcon"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cc-noticeBody",
+					children: [
+						title !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "cc-noticeTitle",
+							children: title
+						}) : null,
+						children,
+						actions !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "cc-noticeActions",
+							children: actions
+						}) : null
+					]
+				})]
+			});
+		}
+		/**
+		* The Host-side defaults an empty field falls back to, shown as placeholders so
+		* an empty box reads "300 s" rather than looking broken. They are literals
+		* because the client bundle must not pull in the adapter; `tests/section.test.ts`
+		* pins each one to the constant it mirrors (DEFAULT_API_BASE,
+		* DEFAULT_REQUEST_TIMEOUT_MS / DEFAULT_STREAM_IDLE_TIMEOUT_MS in seconds,
+		* DEFAULT_TRANSPORT_MAX_RETRIES).
+		*/
+		const FIELD_DEFAULTS = {
+			apiBase: "https://api.commandcode.ai",
+			requestTimeoutSeconds: "300",
+			streamIdleTimeoutSeconds: "300",
+			transportMaxRetries: "5"
+		};
 		const ADVANCED_FIELDS = [
 			"apiBase",
 			"requestTimeoutMs",
@@ -3933,16 +4603,76 @@ window.__ModuleLoader__.load({
 		function modelsGroupInvalid(state) {
 			return MODELS_FIELDS.some((field) => state[field].invalid) || state.contextWindowOverrides.some((row) => row.invalid);
 		}
-		/** The "customized" tag and reset link a staged field shows once it differs from the default. */
+		/**
+		* The groups holding a draft that blocks the save, in page order — what the
+		* save bar's locate action opens before focusing the first invalid field.
+		* Privacy and Integrations hold switches only and Accounts is not staged, so
+		* only these two can ever appear.
+		*/
+		function invalidGroups(state) {
+			const groups = [];
+			if (modelsGroupInvalid(state)) groups.push("models");
+			if (advancedGroupInvalid(state)) groups.push("advanced");
+			return groups;
+		}
+		/**
+		* "N customized" on the Models & context heading: its staged fields that
+		* differ from the default, plus one per per-model context override (each row
+		* is a customization the user made).
+		*/
+		function modelsOverriddenCount(state) {
+			return MODELS_FIELDS.filter((field) => state[field].overridden).length + state.contextWindowOverrides.length;
+		}
+		/** "N customized" on the Advanced heading. */
+		function advancedOverriddenCount(state) {
+			return ADVANCED_FIELDS.filter((field) => state[field].overridden).length;
+		}
+		/**
+		* The effective value of a staged switch: an unset draft (`''`) means the
+		* field's default. Used by the summary badges, which must say what the switch
+		* on screen says.
+		*/
+		function stagedSwitch(field, defaultValue) {
+			return field.text === "" ? defaultValue : field.text === "true";
+		}
+		/**
+		* Accounts that need attention, for the Accounts heading. Uses the same
+		* verdicts as each row's status dot (`statusDotClass`): a rejected key is a
+		* hard failure, a cooldown or any other mark a warning.
+		*/
+		function accountIssues(entries) {
+			let count = 0;
+			let severe = false;
+			for (const entry of entries) {
+				if (entry === void 0) continue;
+				if (entry.mark === "invalid-credential") {
+					count += 1;
+					severe = true;
+				} else if (entry.mark !== "" || entry.cooldownUntil > 0) count += 1;
+			}
+			return {
+				count,
+				severe
+			};
+		}
+		/**
+		* The reset button a staged field shows once it differs from the default. It
+		* trails the control, and a row with nothing to reset keeps an empty slot of
+		* the same width, so every staged control in a group ends on one right edge.
+		*/
 		function FieldOverride({ label, state, disabled, t, onReset }) {
-			if (!state.overridden && !state.clear) return null;
+			if (!state.overridden && !state.clear) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cc-resetSlot",
+				"aria-hidden": "true"
+			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
-				className: "cc-linkButton",
+				className: "cc-iconButton",
 				disabled,
 				onClick: onReset,
 				"aria-label": `${label} — ${t("reset")}`,
-				children: t("reset")
+				title: t("reset"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "reset" })
 			});
 		}
 		/**
@@ -3992,7 +4722,18 @@ window.__ModuleLoader__.load({
 			}) : null;
 		}
 		/** One text/number field row. */
-		function Field({ id, label, hint, state, disabled, numeric, decimal, context, output, wide, placeholder, onEdit, onReset, t }) {
+		function Field({ id, label, hint, state, disabled, numeric, decimal, context, output, wide, unit, placeholder, onEdit, onReset, t }) {
+			const input = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				id,
+				className: unit === void 0 ? `cc-fieldInput ${wide ? "cc-rowInputWide" : "cc-rowInput"}${state.invalid ? " cc-fieldInputInvalid" : ""}` : "cc-fieldInput",
+				type: "text",
+				inputMode: decimal ? "decimal" : numeric ? "numeric" : void 0,
+				"aria-invalid": state.invalid || void 0,
+				value: state.text,
+				placeholder,
+				disabled,
+				onChange: (event) => onEdit(event.target.value)
+			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
 				title: label,
 				titleFor: id,
@@ -4002,22 +4743,18 @@ window.__ModuleLoader__.load({
 				}),
 				description: hint,
 				error: state.invalid ? invalidCopy(state.invalidReason, t, output === true ? "output" : context === true ? "context" : decimal === true ? "duration" : "number") : void 0,
-				control: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldOverride, {
+				control: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [unit === void 0 ? input : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: state.invalid ? "cc-unitBox cc-unitBoxInvalid" : "cc-unitBox",
+					children: [input, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cc-unit",
+						children: unit
+					})]
+				}), /* @__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: decimal ? "decimal" : numeric ? "numeric" : void 0,
-					"aria-invalid": state.invalid || void 0,
-					value: state.text,
-					placeholder,
-					disabled,
-					onChange: (event) => onEdit(event.target.value)
 				})] })
 			});
 		}
@@ -4057,13 +4794,7 @@ window.__ModuleLoader__.load({
 					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", {
+				control: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					id,
 					className: "cc-toggle",
 					type: "checkbox",
@@ -4071,6 +4802,12 @@ window.__ModuleLoader__.load({
 					checked,
 					disabled,
 					onChange: (event) => onEdit(event.target.checked ? "true" : "false")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldOverride, {
+					label,
+					state,
+					disabled,
+					t,
+					onReset
 				})] })
 			});
 		}
@@ -4099,7 +4836,7 @@ window.__ModuleLoader__.load({
 		function UsageWindow({ label, limit, t }) {
 			const { used, cap, exceeded, resetAt } = limit;
 			const ratio = windowRatio(used, cap);
-			const reset = formatResetAt(resetAt);
+			const reset = formatResetAtShort(resetAt);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cc-usageWindow",
 				children: [
@@ -4170,7 +4907,7 @@ window.__ModuleLoader__.load({
 								children: accountName
 							}) : null,
 							planName !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "cc-usagePlan",
+								className: "cc-badge cc-badgeOutline",
 								children: planName
 							}) : null
 						]
@@ -4183,25 +4920,44 @@ window.__ModuleLoader__.load({
 						className: "cc-usageHint",
 						children: t("usageUnconfigured")
 					}) : null,
-					report.blocked !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-usageBlocked",
+					report.blocked !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Notice, {
+						tone: "error",
 						role: "alert",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "cc-usageBlockedTitle",
-								children: blockedTitle(report.blocked, t)
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "cc-usageBlockedHint",
-								children: blockedHint(report.blocked, t)
-							}),
-							report.failures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "cc-usageBlockedDetail",
-								title: report.failures.join("; "),
-								children: report.failures.join(" · ")
-							}) : null
-						]
+						title: blockedTitle(report.blocked, t),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: blockedHint(report.blocked, t) }), report.failures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "cc-noticeDetail",
+							title: report.failures.join("; "),
+							children: report.failures.join(" · ")
+						}) : null]
 					}) : null,
+					credits !== void 0 ? (() => {
+						const monthlyKnown = credits.monthlyReported !== false;
+						const depleted = monthlyKnown && credits.monthlyCredits <= 0;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: depleted ? "cc-balance cc-balanceEmpty" : "cc-balance",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "cc-balanceMain",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "cc-balanceLabel",
+										children: t("usageMonthlyLeft")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "cc-balanceValue",
+										children: monthlyKnown ? formatMoney(Math.max(0, credits.monthlyCredits)) : "—"
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-balanceSub",
+									children: `${t("usagePurchased")} ${credits.purchasedReported === false ? "—" : formatMoney(credits.purchasedCredits)} · ${t("usageFree")} ${credits.freeReported === false ? "—" : formatMoney(credits.freeCredits)}`
+								}),
+								depleted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "cc-balanceNote",
+									role: "status",
+									children: t("usageMonthlyDepleted")
+								}) : null
+							]
+						});
+					})() : null,
 					report.usage !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "cc-usageUpdated",
 						children: usagePeriod ? `${t("usageBillingPeriod")} ${usagePeriod}` : t("usagePeriodUnknown")
@@ -4212,7 +4968,7 @@ window.__ModuleLoader__.load({
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
 								label: t("usageRequests"),
 								value: formatCompactCount(report.usage.totalCount),
-								sub: `${t("usageCompleted")} ${formatCompactCount(report.usage.completedCount)} / ${t("usageFailed")} ${formatCompactCount(report.usage.failedCount)}`,
+								sub: `${t("usageFailed")} ${formatCompactCount(report.usage.failedCount)}`,
 								title: compactCountTitle([
 									[t("usageRequests"), report.usage.totalCount],
 									[t("usageCompleted"), report.usage.completedCount],
@@ -4235,23 +4991,6 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}) : null,
-					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"),
-								value: credits.monthlyReported === false ? "—" : formatMoney(credits.monthlyCredits)
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
-								label: t("usagePurchased"),
-								value: credits.purchasedReported === false ? "—" : formatMoney(credits.purchasedCredits)
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageStat, {
-								label: t("usageFree"),
-								value: credits.freeReported === false ? "—" : formatMoney(credits.freeCredits)
-							})
-						]
-					}) : null,
 					credits?.fiveHour !== void 0 || credits?.weekly !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-usageWindows",
 						children: [credits.fiveHour !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageWindow, {
@@ -4286,7 +5025,10 @@ window.__ModuleLoader__.load({
 								children: [
 									t("usageUpdated"),
 									" ",
-									new Date(fetchedAt).toLocaleTimeString()
+									new Date(fetchedAt).toLocaleTimeString(void 0, {
+										hour: "2-digit",
+										minute: "2-digit"
+									})
 								]
 							}) : null
 						]
@@ -4362,12 +5104,12 @@ window.__ModuleLoader__.load({
 							children: t("modelStale")
 						}) : null,
 						option.allowance !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cc-badgeMuted",
+							className: "cc-badge cc-badgeOutline",
 							title: t("modelAllowanceTitle"),
 							children: t("modelAllowance", { amount: option.allowance })
 						}) : null,
 						!selected.includes(option.value) && ownerOf?.(option.value) !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cc-badgeMuted",
+							className: "cc-badge cc-badgeOutline",
 							children: t("accountModelOwner", { name: ownerOf(option.value) })
 						}) : null
 					]
@@ -4400,9 +5142,9 @@ window.__ModuleLoader__.load({
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "cc-selectorText",
 							children: selected.length === 0 ? t("modelPick") : t("modelCount", { count: selected.length })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cc-selectorCaret",
-							"aria-hidden": "true"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							name: "chevron",
+							className: "cc-icon cc-selectorChevron"
 						})]
 					}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 						type: "search",
@@ -4436,16 +5178,16 @@ window.__ModuleLoader__.load({
 				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",
+					catalogReady && staleIds.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+						variant: "ghost",
+						size: "sm",
 						disabled,
 						onClick: () => onSelect(state.visibleModels.filter((id) => !staleIds.includes(id))),
 						children: t("visibleModelsCleanStale", { count: staleIds.length })
 					}) : null,
-					!state.visibleModelsAll ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "cc-linkButton",
+					!state.visibleModelsAll ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+						variant: "ghost",
+						size: "sm",
 						disabled,
 						onClick: onClear,
 						children: t("visibleModelsShowAll")
@@ -4462,86 +5204,87 @@ window.__ModuleLoader__.load({
 			});
 		}
 		/**
-		* One titled group of rows. No card surface: like the harness's own settings
-		* pages, a group is a heading over its rows. The hairline between sections is
-		* `cc-groupDivided`, so it belongs to every group but the first one on the page
-		* (accounts opens it) and never to the rows inside a group.
+		* One top-level group of the page (决策记录第十章第4条). All five groups share
+		* this one shape so they cannot drift apart: the heading is an `h3` wrapping a
+		* single full-width button — chevron first, then the title and the summary
+		* badges — and a group action such as Refresh sits OUTSIDE that button, so
+		* using it never folds the group. Which groups are open is page state (see
+		* ./group-fold.ts), passed in here.
+		*
+		* The body stays mounted and is hidden with the `hidden` attribute rather than
+		* unrendered: `aria-controls` then always points at a real element, and the
+		* save bar's locate action can focus an invalid field right after opening its
+		* group. Folding is presentation only — staged drafts, validation and the save
+		* path are untouched (第六章第1、2条).
 		*/
-		function SettingsGroup({ title, action, divided = false, children }) {
+		function FoldableGroup({ id, title, divided = true, expanded, onToggle, badges, action, children }) {
+			const titleId = `cc-group-${id}-title`;
+			const bodyId = `cc-group-${id}-body`;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: divided ? "cc-group cc-groupDivided" : "cc-group",
-				"aria-label": title,
+				"aria-labelledby": titleId,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "cc-groupHead",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: "cc-groupTitle",
-						children: title
+						className: "cc-groupHeading",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: "cc-disclosure",
+							"aria-expanded": expanded,
+							"aria-controls": bodyId,
+							onClick: onToggle,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+									name: "chevron",
+									className: expanded ? "cc-icon cc-foldChevron" : "cc-icon cc-foldChevron cc-foldChevronClosed"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									id: titleId,
+									className: "cc-groupTitle",
+									children: title
+								}),
+								badges
+							]
+						})
 					}), action]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cc-rows",
-					children
+					id: bodyId,
+					className: "cc-groupBody",
+					hidden: !expanded,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cc-rows",
+						children
+					})
 				})]
 			});
 		}
 		/**
-		* The heading of a foldable group: the whole row is the toggle and the chevron
-		* sits at its trailing edge. Shared by Models & context (issue #94: the
-		* reporter asked for it to fold "like Advanced below") and Advanced itself, so
-		* the two cannot drift apart in either markup or behaviour.
-		*
-		* The title is a `span`, not the `h3` a static group uses, because a heading
-		* element cannot sit inside a button — the same trade-off Advanced has always
-		* made on its own.
+		* A heading's neutral summary as quiet text ("3 allowlisted · 1 customized"),
+		* like the harness's own section captions; only warnings and errors get a
+		* tinted pill, so a pill always means "look here". Empty parts are skipped.
 		*/
-		function DisclosureHead({ title, bodyId, expanded, onToggle, badges }) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-				type: "button",
-				className: "cc-groupHead cc-disclosure",
-				"aria-expanded": expanded,
-				"aria-controls": bodyId,
-				onClick: onToggle,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "cc-groupTitle",
-						children: title
-					}),
-					badges?.(expanded),
-					/* @__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"
-					})
-				]
+		function GroupSummary({ parts }) {
+			const text = parts.filter((part) => part !== void 0 && part !== "").join(" · ");
+			return text === "" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cc-groupSummary",
+				children: text
 			});
 		}
+		/** "N customized" for a heading summary; undefined at zero. */
+		function overriddenText(count, t) {
+			if (count === 0) return void 0;
+			return count === 1 ? t("groupOverriddenOne") : t("groupOverriddenMany", { count });
+		}
 		/**
-		* A titled group that folds from its own heading and starts collapsed. The
-		* state is deliberately component-local — not persisted, not lifted into the
-		* controller — so every visit opens at the same, predictable page length, and
-		* folding can never turn into a stored preference the settings document would
-		* have to carry.
+		* The badge a FOLDED group shows while something inside it blocks the save:
+		* its rows are off screen, so without it Save would sit disabled with nothing
+		* visible explaining why (issue #94). Expanded, the row errors speak for it.
 		*/
-		function CollapsibleGroup({ title, bodyId, divided = false, badges, footer, children }) {
-			const [expanded, setExpanded] = (0, react.useState)(false);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: divided ? "cc-group cc-groupDivided" : "cc-group",
-				"aria-label": title,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DisclosureHead, {
-						title,
-						bodyId,
-						expanded,
-						onToggle: () => setExpanded((value) => !value),
-						badges
-					}),
-					expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						id: bodyId,
-						className: "cc-rows",
-						children
-					}) : null,
-					expanded ? footer : null
-				]
-			});
+		function InvalidBadge({ show, t }) {
+			return show ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cc-badge cc-badgeError",
+				children: t("groupInvalid")
+			}) : null;
 		}
 		/**
 		* Models & context: the plan filter and the allowlist sit together because both
@@ -4549,21 +5292,20 @@ window.__ModuleLoader__.load({
 		* filter), and the context-length fields follow them because they are the same
 		* subject seen from the other side — the window each listed model advertises.
 		* Those fields carry no heading or divider of their own: they are rows of this
-		* group, not a section inside it. The group folds from its heading and starts
-		* collapsed (issue #94, "same as Advanced below"): it is the longest group on
-		* the page and its rows are set-and-forget, so folding keeps Accounts and the
-		* two switches below it reachable without scrolling past the allowlist.
-		*/
-		function ModelsCard({ state, disabled, t, onEdit, onReset, onSelect, onClear, onOverrides }) {
-			const invalid = modelsGroupInvalid(state);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CollapsibleGroup, {
+		* group, not a section inside it. Folded by default like every group but
+		* Accounts; the heading then summarizes the allowlist size and how much of the
+		* group is customized.
+		*/
+		function ModelsCard({ state, disabled, t, onEdit, onReset, onSelect, onClear, onOverrides, expanded, onToggle }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FoldableGroup, {
+				id: "models",
 				title: t("modelsTitle"),
-				bodyId: "cc-models-body",
-				divided: true,
-				badges: (expanded) => !expanded && invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "cc-badge cc-badgeWarn",
-					children: t("modelsInvalid")
-				}) : null,
+				expanded,
+				onToggle,
+				badges: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupSummary, { parts: [state.visibleModelsAll ? t("visibleModelsSummaryAll") : t("visibleModelsSummary", { count: state.visibleModels.length }), overriddenText(modelsOverriddenCount(state), t)] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InvalidBadge, {
+					show: !expanded && modelsGroupInvalid(state),
+					t
+				})] }),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
 						id: "cc-filter-models-by-plan",
@@ -4653,6 +5395,8 @@ window.__ModuleLoader__.load({
 					state: state.contextWindow,
 					disabled,
 					context: true,
+					unit: t("unitTokens"),
+					placeholder: t("placeholderCatalog"),
 					onEdit: (text) => onEdit("contextWindow", text),
 					onReset: () => onReset("contextWindow"),
 					t
@@ -4665,6 +5409,8 @@ window.__ModuleLoader__.load({
 					disabled,
 					numeric: true,
 					output: true,
+					unit: t("unitTokens"),
+					placeholder: t("placeholderAuto"),
 					onEdit: (text) => onEdit("maxOutputTokens", text),
 					onReset: () => onReset("maxOutputTokens"),
 					t
@@ -4672,9 +5418,13 @@ window.__ModuleLoader__.load({
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
 					title: t("contextOverridesTitle"),
 					description: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("contextOverridesHint") }),
-					control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "cc-linkButton",
+					control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+						variant: "outline",
+						size: "sm",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							name: "plus",
+							className: "cc-icon cc-btnIcon"
+						}),
 						disabled: disabled || available.length === 0,
 						onClick: addRow,
 						children: t("contextOverrideAdd")
@@ -4685,78 +5435,80 @@ window.__ModuleLoader__.load({
 					children: t("contextOverrideNoCatalog")
 				}) : null,
 				rows.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "cc-contextHead",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cc-contextHeadModel",
-							children: t("contextOverrideModel")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cc-contextHeadValue",
-							children: t("contextOverrideValue")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cc-contextHeadGap",
-							"aria-hidden": "true"
-						})
-					]
-				}) : null,
-				rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "cc-contextItem",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "cc-contextSelect",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-								className: "cc-input cc-contextModel",
-								value: row.model,
-								"aria-label": t("contextOverrideModel"),
-								disabled,
-								onChange: (event) => setModel(row.model, event.target.value),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					className: "cc-contextTable",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-contextHead",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("contextOverrideModel") }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("contextOverrideValue") }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "aria-hidden": "true" })
+						]
+					}), rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-contextItem",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "cc-contextSelect",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+									className: "cc-fieldInput cc-contextModel",
 									value: row.model,
-									children: labelOf(row.model)
-								}), available.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-									value: model.id,
-									children: labelOf(model.id)
-								}, model.id))]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "cc-contextCaret",
-								"aria-hidden": "true"
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-							className: `cc-input cc-contextValue${row.invalid ? " cc-inputInvalid" : ""}`,
-							type: "text",
-							"aria-label": t("contextOverrideValue"),
-							"aria-invalid": row.invalid || void 0,
-							value: row.text,
-							disabled,
-							onChange: (event) => setText(row.model, event.target.value)
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: "cc-iconButton",
-							"aria-label": t("contextOverrideRemove"),
-							disabled,
-							onClick: () => removeRow(row.model),
-							children: "×"
-						}),
-						row.invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "cc-rowError cc-contextError",
-							children: invalidCopy(row.invalidReason, t, "context")
-						}) : null
-					]
-				}, row.model))
+									"aria-label": t("contextOverrideModel"),
+									disabled,
+									onChange: (event) => setModel(row.model, event.target.value),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: row.model,
+										children: labelOf(row.model)
+									}), available.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: model.id,
+										children: labelOf(model.id)
+									}, model.id))]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+									name: "chevron",
+									className: "cc-icon cc-contextCaret"
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: row.invalid ? "cc-unitBox cc-unitBoxInvalid" : "cc-unitBox",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									className: "cc-fieldInput",
+									type: "text",
+									"aria-label": t("contextOverrideValue"),
+									"aria-invalid": row.invalid || void 0,
+									value: row.text,
+									disabled,
+									onChange: (event) => setText(row.model, event.target.value)
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-unit",
+									children: t("unitTokens")
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-iconButton",
+								"aria-label": t("contextOverrideRemove"),
+								disabled,
+								onClick: () => removeRow(row.model),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "close" })
+							}),
+							row.invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "cc-rowError cc-contextError",
+								children: invalidCopy(row.invalidReason, t, "context")
+							}) : null
+						]
+					}, row.model))]
+				}) : null
 			] });
 		}
 		/**
 		* Privacy & security: the opt-in that changes where data goes. ZDR restricts
 		* which upstream serves a request, so it starts off.
 		*/
-		function PrivacyCard({ state, disabled, t, onEdit, onReset }) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingsGroup, {
+		function PrivacyCard({ state, disabled, t, onEdit, onReset, expanded, onToggle }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FoldableGroup, {
+				id: "privacy",
 				title: t("privacyTitle"),
-				divided: true,
+				expanded,
+				onToggle,
+				badges: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupSummary, { parts: [stagedSwitch(state.zdr, false) ? t("zdrSummaryOn") : t("zdrSummaryOff")] }),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
 					id: "cc-zdr",
 					label: t("zdr"),
@@ -4770,59 +5522,161 @@ window.__ModuleLoader__.load({
 				})
 			});
 		}
-		/** 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"),
-				divided: true,
-				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 service-status row: the official status page's published record and the
+		* Host's live probe of the configured API base, both projected by
+		* ./service-status.ts (source order, cache TTL, the lag rule and every
+		* degradation path live there). It is display-only — it writes no setting and
+		* never blocks Save; the link opens the page for the full history.
+		*/
+		function ServiceStatusRow({ view, t }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+				title: t("serviceStatusTitle"),
+				description: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cc-statusLines",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cc-statusKey",
+							children: t("serviceStatusOfficial")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "cc-statusValue",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+									state: toneDot(view.officialTone),
+									size: 8
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-statusVerdict",
+									children: view.label
+								}),
+								view.detail !== void 0 || view.updated !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "cc-statusMeta",
+									children: [
+										view.detail,
+										view.detail !== void 0 && view.updated !== void 0 ? "\xA0· " : null,
+										view.updated !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											title: view.lag ?? view.hint,
+											children: view.updated
+										}) : null
+									]
+								}) : null
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cc-statusKey",
+							children: t("serviceStatusLocal")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "cc-statusValue",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+								state: localDotState(view),
+								size: 8
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: view.localTone === "error" ? "cc-statusVerdict cc-statusBad" : "cc-statusVerdict",
+								children: view.local
+							})]
+						})
+					]
+				}), view.notice !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "cc-statusNotice",
+					children: view.notice
+				}) : null] }),
+				control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					className: "cc-statusLink",
+					href: STATUS_PAGE_URL,
+					target: "_blank",
+					rel: "noreferrer",
+					children: view.linkLabel
+				})
+			});
+		}
+		/**
+		* The status dot and verdict, shared by the status row and the Integrations
+		* heading. The primitive's five states already carry the theme's
+		* success/warn/error tokens, so the colours are the design system's own.
+		*/
+		function ServiceStatusBadge({ view }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "cc-statusBadge",
+				title: view.hint,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: toneDot(view.badge.tone) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: view.badge.tone === "warn" || view.badge.tone === "error" ? "cc-statusLabel cc-statusBad" : "cc-statusLabel",
+					children: view.badge.label
 				})]
 			});
 		}
+		/** A view tone on the harness StateDot. */
+		function toneDot(tone) {
+			return tone === "ok" ? "done" : tone === "warn" ? "warning" : tone === "error" ? "error" : tone === "checking" ? "ongoing" : "idle";
+		}
+		/**
+		* The local probe's dot: done/error once it answered, breathing while the
+		* request is in flight, idle when the Host offers no probe at all.
+		*/
+		function localDotState(view) {
+			if (view.localTone === "ok") return "done";
+			if (view.localTone === "error") return "error";
+			return view.localChecking ? "ongoing" : "idle";
+		}
+		/**
+		* Integrations & display: surfaces outside chat that reuse this provider. The
+		* status snapshot comes from the page, which probes once per open even while
+		* this group is folded — its heading shows the verdict either way.
+		*/
+		function IntegrationsCard({ state, disabled, t, onEdit, onReset, expanded, onToggle, status, probe }) {
+			const view = serviceStatusView(status, probe, t, Date.now());
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FoldableGroup, {
+				id: "integrations",
+				title: t("integrationsTitle"),
+				expanded,
+				onToggle,
+				badges: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServiceStatusBadge, { view }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupSummary, { parts: [stagedSwitch(state.webSearch, true) ? t("webSearchSummaryOn") : t("webSearchSummaryOff")] })] }),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServiceStatusRow, {
+						view,
+						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
+					})
+				]
+			});
+		}
 		/**
-		* The collapsed "Advanced" card: the API base and the network limits. Folds
-		* through the same `CollapsibleGroup` the Models & context group uses, so the
-		* two disclosures stay identical; while collapsed, a badge names the customized
-		* count and an invalid number (which blocks save) is surfaced on the header.
+		* The "Advanced" group: the API base and the network limits. Its heading
+		* names the customized count, and while folded, an invalid number (which
+		* blocks save); expanded, the row's own error says it.
 		*/
-		function AdvancedSection({ state, disabled, t, onEdit, onReset }) {
-			const overridden = ADVANCED_FIELDS.filter((field) => state[field].overridden).length;
-			const invalid = advancedGroupInvalid(state);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CollapsibleGroup, {
+		function AdvancedSection({ state, disabled, t, onEdit, onReset, expanded, onToggle }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FoldableGroup, {
+				id: "advanced",
 				title: t("advancedSettings"),
-				bodyId: "cc-advanced-body",
-				divided: true,
-				badges: (expanded) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [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] }),
-				footer: invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "cc-rowError",
-					role: "status",
-					children: t("advancedInvalid")
-				}) : null,
+				expanded,
+				onToggle,
+				badges: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupSummary, { parts: [overriddenText(advancedOverriddenCount(state), t)] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InvalidBadge, {
+					show: !expanded && advancedGroupInvalid(state),
+					t
+				})] }),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "cc-groupDesc",
@@ -4831,10 +5685,10 @@ window.__ModuleLoader__.load({
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
 						id: "cc-api-base",
 						label: t("apiBase"),
-						hint: t("apiBaseHint"),
 						state: state.apiBase,
 						disabled,
 						wide: true,
+						placeholder: FIELD_DEFAULTS.apiBase,
 						onEdit: (text) => onEdit("apiBase", text),
 						onReset: () => onReset("apiBase"),
 						t
@@ -4847,6 +5701,8 @@ window.__ModuleLoader__.load({
 						disabled,
 						numeric: true,
 						decimal: true,
+						unit: t("unitSeconds"),
+						placeholder: FIELD_DEFAULTS.requestTimeoutSeconds,
 						onEdit: (text) => onEdit("requestTimeoutMs", text),
 						onReset: () => onReset("requestTimeoutMs"),
 						t
@@ -4859,6 +5715,8 @@ window.__ModuleLoader__.load({
 						disabled,
 						numeric: true,
 						decimal: true,
+						unit: t("unitSeconds"),
+						placeholder: FIELD_DEFAULTS.streamIdleTimeoutSeconds,
 						onEdit: (text) => onEdit("streamIdleTimeoutMs", text),
 						onReset: () => onReset("streamIdleTimeoutMs"),
 						t
@@ -4870,6 +5728,8 @@ window.__ModuleLoader__.load({
 						state: state.transportMaxRetries,
 						disabled,
 						numeric: true,
+						unit: t("unitRetries"),
+						placeholder: FIELD_DEFAULTS.transportMaxRetries,
 						onEdit: (text) => onEdit("transportMaxRetries", text),
 						onReset: () => onReset("transportMaxRetries"),
 						t
@@ -5044,21 +5904,22 @@ window.__ModuleLoader__.load({
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "cc-inlineActions",
 					children: [
-						secret && value !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						secret && value !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+							variant: "ghost",
+							size: "sm",
 							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, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
 							variant: "ghost",
 							size: "sm",
 							type: "button",
 							onClick: onCancel,
 							children: t("cancel")
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
 							variant: "primary",
 							size: "sm",
 							type: "submit",
@@ -5069,35 +5930,26 @@ window.__ModuleLoader__.load({
 				})]
 			});
 		}
-		/** A destructive confirmation bar shown in place of a menu action. */
+		/** A destructive confirmation, shown in place in the card as an error notice (no modal). */
 		function ConfirmBar({ text, confirmLabel, disabled, t, onConfirm, onCancel }) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cc-confirmBar",
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+				tone: "error",
+				icon: "warn",
 				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
-						})
-					]
-				})]
+				label: text,
+				title: text,
+				actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+					variant: "danger",
+					size: "sm",
+					disabled,
+					onClick: onConfirm,
+					children: confirmLabel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+					variant: "ghost",
+					size: "sm",
+					onClick: onCancel,
+					children: t("cancel")
+				})] })
 			});
 		}
 		/** One account row: identity, status, quota summary, actions and expandable details. */
@@ -5206,11 +6058,11 @@ window.__ModuleLoader__.load({
 									children: accountName
 								}) : null,
 								planName !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cc-usagePlan",
+									className: "cc-badge cc-badgeOutline",
 									children: planName
 								}) : null,
 								entry?.active && multi ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cc-badge",
+									className: "cc-badge cc-badgeOk",
 									children: t("usageActive")
 								}) : null,
 								pinned ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -5218,21 +6070,21 @@ window.__ModuleLoader__.load({
 									children: t("accountStatusPinned")
 								}) : null,
 								!row.credentialKnown || !row.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cc-badgeMuted",
+									className: "cc-badge cc-badgeOutline",
 									children: t(row.credentialKnown ? "apiKeyUnset" : "writeStateUnknown")
 								}) : null,
 								entry?.mark === "invalid-credential" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cc-usagePlanStatus",
+									className: "cc-badge cc-badgeError",
 									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)}` : ""]
+									className: "cc-badge cc-badgeWarn",
+									children: [t("usageCooldown"), entry.cooldownUntil > 0 ? ` ${formatResetAtShort(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"
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+									name: "chevron",
+									className: expanded ? "cc-icon cc-foldChevron cc-chevronOpen" : "cc-icon cc-foldChevron"
 								})
 							]
 						}), items.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Menu, {
@@ -5250,14 +6102,11 @@ window.__ModuleLoader__.load({
 								"aria-haspopup": "menu",
 								"aria-expanded": menuOpen,
 								onClick: () => setMenuOpen((value) => !value),
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cc-kebab",
-									"aria-hidden": "true"
-								})
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "more" })
 							})
 						}) : null]
 					}),
-					credits !== void 0 && (credits.fiveHour !== void 0 || credits.weekly !== void 0 || monthlyReported) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					!expanded && 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, {
@@ -5274,60 +6123,61 @@ window.__ModuleLoader__.load({
 							}) : null
 						]
 					}) : null,
-					row.credentialKnown && !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]
+					row.credentialKnown && !row.configured && row.managed && mode === void 0 && !showLogin ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+						icon: row.keyWritable ? "info" : "lock",
+						actions: keyActions ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+							variant: "primary",
+							size: "sm",
+							disabled: loginBusy || busyElsewhere,
+							onClick: () => actions.beginLogin(loginTarget),
+							children: t("accountAddLogin")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => setMode("key"),
+							children: t("accountAddPaste")
+						})] }) : void 0,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: row.keyWritable ? t("accountNoKeyHint") : t("apiKeyLocked") })
 					}) : 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,
+						state: loginState,
 						t,
-						onCancel: () => setMode(void 0),
-						onSubmit: (value) => {
-							actions.rename(row.ref, value).then((ok) => {
-								if (ok) setMode(void 0);
-							});
-						}
+						onCancel: actions.cancelLogin
+					}) : null,
+					mode === "key" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cc-panel",
+						children: /* @__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)("div", {
+						className: "cc-panel",
+						children: /* @__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 }),
@@ -5389,163 +6239,218 @@ window.__ModuleLoader__.load({
 		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
-				]
+			const tone = hint.className === "cc-loginError" ? "error" : hint.className === "cc-loginDone" ? "success" : "neutral";
+			const link = state.authUrl !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+				className: "cc-loginLink",
+				href: state.authUrl,
+				target: "_blank",
+				rel: "noreferrer",
+				children: [t("loginOpenLink"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: "external",
+					className: "cc-icon cc-iconInline"
+				})]
+			}) : null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+				tone,
+				actions: link !== null || busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [link, busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+					variant: "ghost",
+					size: "sm",
+					onClick: onCancel,
+					children: t("loginCancel")
+				}) : null] }) : void 0,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					title: hint.title,
+					children: hint.text
+				})
 			});
 		}
-		/** 新增面板只负责输入和操作意图；账号、登录、命名与补偿由宿主过程负责。 */
+		/** Enrollment phases during which the panel only offers "cancel setup". */
+		const ENROLLMENT_BUSY_PHASES = [
+			"creating",
+			"waiting",
+			"writing",
+			"cancelling"
+		];
+		/**
+		* What the add-account panel's action row shows, from the enrollment phase
+		* and the panel's own inputs — a pure function so the button logic is tested
+		* without rendering:
+		* - `naming`: the host could not save the name; retry / accept / cancel.
+		* - `cancelSetup`: a sign-in or key write is in flight; only "cancel setup",
+		*   with the method switch and inputs locked.
+		* - `start`: idle; cancel plus the mode's primary action ("Start sign-in", or
+		*   "Add" once a key is typed in paste mode).
+		*/
+		function addAccountPanelView({ phase, mode, keyReady, disabled }) {
+			if (phase === "naming") return {
+				actions: "naming",
+				locked: true,
+				canSubmit: false
+			};
+			if (phase !== void 0 && ENROLLMENT_BUSY_PHASES.includes(phase)) return {
+				actions: "cancelSetup",
+				locked: true,
+				canSubmit: false
+			};
+			return {
+				actions: "start",
+				locked: disabled,
+				canSubmit: !disabled && (mode === "browser" || keyReady)
+			};
+		}
+		/**
+		* 新增面板只负责输入和操作意图；账号、登录、命名与补偿由宿主过程负责。
+		* Drawn as the design canvas does: a "sign in / paste key" segmented switch,
+		* the optional name, the key field in paste mode, then cancel + the primary
+		* action on the right. Leaving paste mode clears the typed key, so a key never
+		* lingers in a field the user has moved away from.
+		*/
 		function AddAccountPanel({ state, disabled, t, enrollment, snapshot, onClose }) {
 			const [label, setLabel] = (0, react.useState)("");
-			const [pasting, setPasting] = (0, react.useState)(false);
+			const [mode, setMode] = (0, react.useState)("browser");
+			const [key, setKey] = (0, react.useState)("");
+			const [keyVisible, setKeyVisible] = (0, react.useState)(false);
 			const active = snapshot.active;
-			const busy = active !== void 0 && [
-				"creating",
-				"waiting",
-				"writing",
-				"cancelling",
-				"naming"
-			].includes(active.phase);
+			const view = addAccountPanelView({
+				phase: active?.phase,
+				mode,
+				keyReady: key.trim() !== "",
+				disabled
+			});
 			const fallbackName = t("accountNameN", { n: state.accounts.length + 2 });
 			(0, react.useEffect)(() => {
 				if (active?.phase === "finished") onClose();
 			}, [active?.phase, onClose]);
-			const start = (key) => enrollment.begin({
-				mode: key === void 0 ? "browser" : "manual",
+			const start = () => enrollment.begin({
+				mode: mode === "browser" ? "browser" : "manual",
 				label: label.trim() || fallbackName,
 				automaticName: label.trim() === "",
-				...key === void 0 ? {} : { key }
+				...mode === "browser" ? {} : { key }
 			});
 			const close = () => {
 				enrollment.cancel();
 				onClose();
 			};
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cc-addPanel",
+			const pick = (next) => {
+				setMode(next);
+				if (next === "browser") {
+					setKey("");
+					setKeyVisible(false);
+				}
+			};
+			const waitingLink = active?.authUrl && active.phase === "waiting" ? active.authUrl : void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "cc-panel",
 				"aria-label": t("accountAdd"),
+				onSubmit: (event) => {
+					event.preventDefault();
+					if (view.canSubmit) start();
+				},
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "cc-panelTitle",
 						children: t("accountAdd")
 					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-rowDesc",
+						children: t("accountAddHint")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cc-seg",
+						role: "group",
+						"aria-label": t("accountAddMethod"),
+						children: ["browser", "paste"].map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: mode === option ? "cc-segItem cc-segOn" : "cc-segItem",
+							"aria-pressed": mode === option,
+							disabled: view.locked,
+							onClick: () => pick(option),
+							children: option === "browser" ? t("accountAddLogin") : t("accountAddPaste")
+						}, option))
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						className: "cc-input",
+						className: "cc-fieldInput cc-panelInput",
 						type: "text",
 						"aria-label": t("accountNamePlaceholder"),
 						placeholder: t("accountNamePlaceholder"),
 						value: label,
-						disabled: disabled || busy,
+						disabled: view.locked,
 						onChange: (event) => setLabel(event.target.value)
 					}),
-					active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-hint",
-						role: "status",
-						children: t(active.messageKey)
-					}) : null,
-					active?.authUrl && active.phase === "waiting" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-hint",
-						children: t("accountAddLinkHint")
+					mode === "paste" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-keyField",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							id: "cc-add-account-key",
+							className: "cc-fieldInput cc-panelInput",
+							type: keyVisible ? "text" : "password",
+							"aria-label": t("accountKeyPlaceholder"),
+							placeholder: t("accountKeyPlaceholder"),
+							autoComplete: "new-password",
+							spellCheck: false,
+							autoFocus: true,
+							value: key,
+							disabled: view.locked,
+							onChange: (event) => setKey(event.target.value)
+						}), key !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+							variant: "ghost",
+							size: "sm",
+							disabled: view.locked,
+							onClick: () => setKeyVisible((shown) => !shown),
+							children: keyVisible ? t("hide") : t("show")
+						}) : null]
 					}) : null,
-					active?.authUrl && active.phase === "waiting" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-						className: "cc-linkButton",
-						href: active.authUrl,
-						target: "_blank",
-						rel: "noreferrer",
-						children: t("accountAddOpenLink")
+					active ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Notice, {
+						actions: waitingLink !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+							className: "cc-loginLink",
+							href: waitingLink,
+							target: "_blank",
+							rel: "noreferrer",
+							children: [t("accountAddOpenLink"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+								name: "external",
+								className: "cc-icon cc-iconInline"
+							})]
+						}) : void 0,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(active.messageKey) }), waitingLink !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("accountAddLinkHint") }) : null]
 					}) : null,
-					snapshot.error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-loginError",
-						role: "status",
-						children: t(snapshot.error)
+					snapshot.error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+						tone: "error",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(snapshot.error) })
 					}) : null,
-					active?.phase === "naming" ? /* @__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,
-								onClick: () => void enrollment.name(active.suggestedName || label || fallbackName),
-								children: t("accountNameSaveRetry")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "cc-panelActions",
+						children: view.actions === "naming" && active !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
 								variant: "ghost",
-								size: "sm",
+								onClick: close,
+								children: t("cancel")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+								variant: "outline",
 								disabled,
 								onClick: () => void enrollment.name(),
 								children: t("accountNameAcceptExisting")
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-								variant: "ghost",
-								size: "sm",
-								onClick: close,
-								children: t("cancel")
-							})
-						]
-					}) : 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: close,
-						onSubmit: (key) => {
-							start(key);
-						}
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-inlineActions",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
 								variant: "primary",
-								size: "sm",
-								disabled: disabled || busy,
-								onClick: () => void start(),
-								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",
-								onClick: close,
-								children: t("cancel")
+								disabled,
+								onClick: () => void enrollment.name(active.suggestedName || label || fallbackName),
+								children: t("accountNameSaveRetry")
 							})
-						]
-					}),
-					busy && active?.phase !== "naming" && pasting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-						variant: "ghost",
-						size: "sm",
-						onClick: close,
-						children: t("accountAddCancel")
-					}) : null
+						] }) : view.actions === "cancelSetup" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+							variant: "ghost",
+							onClick: close,
+							children: t("accountAddCancel")
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+							variant: "ghost",
+							onClick: close,
+							children: t("cancel")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+							variant: "primary",
+							type: "submit",
+							disabled: !view.canSubmit,
+							children: mode === "browser" ? t("accountAddStart") : t("accountAddConfirm")
+						})] })
+					})
 				]
 			});
 		}
@@ -5554,7 +6459,7 @@ window.__ModuleLoader__.load({
 		* each, with its status and quota inline — so one account's facts no longer
 		* have to be cross-read across separate surfaces.
 		*/
-		function AccountsCard({ t, state, usage, login, disabled, actions, onRefresh, openAnalytics, createEnrollment }) {
+		function AccountsCard({ t, state, usage, login, disabled, actions, onRefresh, openAnalytics, createEnrollment, expanded, onToggle }) {
 			const [adding, setAdding] = (0, react.useState)(false);
 			const [enrollment] = (0, react.useState)(createEnrollment);
 			const snapshot = (0, react.useSyncExternalStore)(enrollment.store.subscribe, enrollment.store.getSnapshot);
@@ -5570,124 +6475,128 @@ window.__ModuleLoader__.load({
 			const rows = accountRows(state, usage, t).filter((row) => row.ref === void 0 || !state.accountEnrollmentRefs.includes(row.ref));
 			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-groupHead",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-								className: "cc-groupTitle",
-								children: t("accountsTitle")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-spacer" }),
-							openAnalytics ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-								variant: "ghost",
-								size: "sm",
-								onClick: openAnalytics,
-								children: t("openAnalytics")
-							}) : null,
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "cc-linkButton",
-								disabled: loading,
-								onClick: () => {
-									onRefresh();
-									enrollment.refresh();
-								},
-								children: loading ? t("usageRefreshing") : t("usageRefresh")
-							})
-						]
+			const issues = accountIssues(rows.map((row) => row.usage));
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FoldableGroup, {
+				id: "accounts",
+				title: t("accountsTitle"),
+				divided: false,
+				expanded,
+				onToggle,
+				badges: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupSummary, { parts: [rows.length === 1 ? t("accountsSummaryOne") : t("accountsSummaryMany", { count: rows.length })] }), issues.count > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: issues.severe ? "cc-badge cc-badgeError" : "cc-badge cc-badgeWarn",
+					children: t("accountsSummaryIssues", { count: issues.count })
+				}) : null] }),
+				action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+					variant: "ghost",
+					size: "sm",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: "refresh",
+						className: "cc-icon cc-btnIcon"
 					}),
+					disabled: loading,
+					onClick: () => {
+						onRefresh();
+						enrollment.refresh();
+					},
+					children: loading ? t("usageRefreshing") : t("usageRefresh")
+				}),
+				children: [
 					/* @__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,
-					settingsWriteNotice(state.accountResult, t) || state.accountFailed !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-rowError",
-						role: "status",
-						children: settingsWriteNotice(state.accountResult, t) || t("accountOpFailed")
-					}) : null,
-					state.credentialRefreshFailed || state.accountResult?.refreshFailed || state.saveResult?.refreshFailed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-rowError",
-						role: "status",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("writeRefreshFailed") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: "cc-btn cc-btnSm",
-							onClick: actions.refreshCredentials,
-							children: t("writeRefreshRetry")
-						})]
-					}) : null,
-					!adding && snapshot.error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-rowError",
-						role: "status",
-						children: t(snapshot.error)
-					}) : null,
-					state.pendingCredentialCleanup.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-rowError",
-						role: "status",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("accountCleanupPending") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: "cc-btn cc-btnSm",
-							disabled: disabled || state.accountBusy,
-							onClick: () => {
-								for (const ref of state.pendingCredentialCleanup) actions.cleanup(ref);
-							},
-							children: t("accountCleanupRetry")
-						})]
-					}) : null,
-					snapshot.pending.filter((record) => record.id !== snapshot.active?.id).map((record) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-rowError",
-						role: "status",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
-								record.ref,
-								t("accountRefSeparator"),
-								t(record.messageKey)
-							] }),
-							record.phase === "naming" && record.suggestedName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+								name: "swap",
+								className: "cc-icon cc-btnIcon"
+							}),
+							/* @__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)(PageButton, {
 								variant: "ghost",
 								size: "sm",
+								disabled: disabled || state.accountBusy,
+								onClick: () => void actions.setActive(""),
+								children: t("accountActionUnpin")
+							}) : null
+						]
+					}) : null,
+					(() => {
+						const writeNotice = settingsWriteNotice(state.accountResult, t);
+						const notices = [];
+						if (usage.status === "error") notices.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+							tone: "error",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [t("usageError"), usage.error !== void 0 && usage.error !== "" ? ` — ${usage.error}` : ""] })
+						}, "usage"));
+						if (writeNotice || state.accountFailed !== void 0) notices.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+							tone: "error",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: writeNotice || t("accountOpFailed") })
+						}, "op"));
+						if (state.credentialRefreshFailed || state.accountResult?.refreshFailed || state.saveResult?.refreshFailed) notices.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+							tone: "warn",
+							actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+								variant: "outline",
+								size: "sm",
+								onClick: actions.refreshCredentials,
+								children: t("writeRefreshRetry")
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("writeRefreshFailed") })
+						}, "refresh"));
+						if (!adding && snapshot.error) notices.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+							tone: "error",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(snapshot.error) })
+						}, "enroll"));
+						if (state.pendingCredentialCleanup.length > 0) notices.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+							tone: "warn",
+							actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+								variant: "outline",
+								size: "sm",
+								disabled: disabled || state.accountBusy,
+								onClick: () => {
+									for (const ref of state.pendingCredentialCleanup) actions.cleanup(ref);
+								},
+								children: t("accountCleanupRetry")
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("accountCleanupPending") })
+						}, "cleanup"));
+						for (const record of snapshot.pending.filter((candidate) => candidate.id !== snapshot.active?.id)) notices.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+							tone: "warn",
+							actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [record.phase === "naming" && record.suggestedName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+								variant: "outline",
+								size: "sm",
 								disabled,
 								onClick: () => void enrollment.recover(record, record.suggestedName),
 								children: t("accountNameSaveRetry")
-							}) : null,
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-								variant: "ghost",
+							}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+								variant: "outline",
 								size: "sm",
 								disabled,
 								onClick: () => void enrollment.recover(record),
 								children: record.phase === "naming" ? t("accountNameAcceptExisting") : t("accountEnrollmentCleanupRetry")
-							})
-						]
-					}, record.id)),
-					snapshot.active?.phase === "cleanup-needed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-rowError",
-						role: "status",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(snapshot.active.messageKey) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-							variant: "ghost",
-							size: "sm",
-							disabled,
-							onClick: () => void enrollment.recover(snapshot.active),
-							children: t("accountEnrollmentCleanupRetry")
-						})]
-					}) : null,
+							})] }),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
+								record.ref,
+								t("accountRefSeparator"),
+								t(record.messageKey)
+							] })
+						}, record.id));
+						if (snapshot.active?.phase === "cleanup-needed") notices.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+							tone: "warn",
+							actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+								variant: "outline",
+								size: "sm",
+								disabled,
+								onClick: () => void enrollment.recover(snapshot.active),
+								children: t("accountEnrollmentCleanupRetry")
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(snapshot.active.messageKey) })
+						}, "active-cleanup"));
+						return notices.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "cc-notices",
+							children: notices
+						}) : null;
+					})(),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "cc-accountList",
 						children: rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountItem, {
@@ -5709,19 +6618,44 @@ window.__ModuleLoader__.load({
 						enrollment,
 						snapshot,
 						onClose: closeAdd
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "cc-addButton",
-						disabled,
-						onClick: () => {
-							enrollment.reset();
-							setAdding(true);
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cc-addGlyph",
-							"aria-hidden": "true"
-						}), t("accountAdd")]
-					})
+					}) : null,
+					!adding || openAnalytics ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-accountActions",
+						children: [
+							!adding ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+								variant: "outline",
+								size: "md",
+								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+									name: "plus",
+									className: "cc-icon cc-btnIcon"
+								}),
+								disabled,
+								onClick: () => {
+									enrollment.reset();
+									setAdding(true);
+								},
+								children: t("accountAdd")
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-spacer" }),
+							openAnalytics ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageButton, {
+								variant: "ghost",
+								size: "md",
+								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+									name: "chart",
+									className: "cc-icon cc-btnIcon"
+								}),
+								className: "cc-analyticsEntry",
+								onClick: openAnalytics,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-analyticsEntryText",
+									children: t("openAnalytics")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+									name: "arrowRight",
+									className: "cc-icon cc-btnIcon"
+								})]
+							}) : null
+						]
+					}) : null
 				]
 			});
 		}
@@ -5766,6 +6700,51 @@ window.__ModuleLoader__.load({
 			return available;
 		}
 		/**
+		* The service status: paint the cached snapshot immediately, then run one
+		* throttled check per page open (the TTL and every failure path live in
+		* ./service-status.ts, which never rejects). The Host probe runs alongside it
+		* and is the row's real-time half — the published record only moves on a status
+		* change or the daily summary, so it can legitimately be hours old.
+		*/
+		function useServiceStatus(probeService) {
+			const [snapshot, setSnapshot] = (0, react.useState)(() => readCachedServiceStatus(localStorageServiceStatusStore()));
+			const [probe, setProbe] = (0, react.useState)({ kind: "checking" });
+			(0, react.useEffect)(() => {
+				let cancelled = false;
+				checkServiceStatus({ store: localStorageServiceStatusStore() }).then((next) => {
+					if (!cancelled) setSnapshot(next);
+				}, () => {});
+				probeService().then((result) => {
+					if (cancelled) return;
+					setProbe(result.ok ? {
+						kind: "result",
+						result: result.value
+					} : { kind: "unavailable" });
+				}, () => {
+					if (!cancelled) setProbe({ kind: "unavailable" });
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, []);
+			return {
+				snapshot,
+				probe
+			};
+		}
+		/**
+		* The page's fold state, read once from this browser's storage and written
+		* back on every change (./group-fold.ts holds the defaults and fallbacks).
+		*/
+		function useGroupFold() {
+			const [store] = (0, react.useState)(localStorageFoldStore);
+			const [fold, setFoldState] = (0, react.useState)(() => store.read());
+			return [fold, (0, react.useCallback)((next) => {
+				setFoldState(next);
+				store.write(next);
+			}, [store])];
+		}
+		/**
 		* 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
@@ -5842,7 +6821,7 @@ window.__ModuleLoader__.load({
 		* 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 }) {
+		function SaveBar({ view, state, t, onDiscard, onSave, onLocate }) {
 			const last = (0, react.useRef)(view);
 			if (view.visible) last.current = view;
 			const shown = view.visible ? view : last.current;
@@ -5864,19 +6843,29 @@ window.__ModuleLoader__.load({
 						}),
 						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.failed || 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")
-							})]
+							children: [
+								state.invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+									variant: "ghost",
+									size: "lg",
+									disabled: !view.visible,
+									onClick: onLocate,
+									children: t("saveLocate")
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+									variant: "ghost",
+									size: "lg",
+									disabled: !view.visible || !state.dirty && !state.failed || state.saving,
+									onClick: onDiscard,
+									children: t("discard")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageButton, {
+									variant: "primary",
+									size: "lg",
+									disabled: !view.visible || !state.dirty || state.invalid || state.saving,
+									onClick: onSave,
+									children: t(state.saving ? "saving" : "save")
+								})
+							]
 						}) : null
 					]
 				})
@@ -5923,7 +6912,30 @@ window.__ModuleLoader__.load({
 				onEdit: props.edit,
 				onReset: props.resetField
 			};
+			const status = useServiceStatus(props.probeService);
+			const [fold, setFold] = useGroupFold();
+			const foldProps = (group) => ({
+				expanded: fold[group],
+				onToggle: () => setFold({
+					...fold,
+					[group]: !fold[group]
+				})
+			});
+			const sectionRef = (0, react.useRef)(null);
+			const [locateTick, setLocateTick] = (0, react.useState)(0);
+			(0, react.useEffect)(() => {
+				if (locateTick === 0) return;
+				const target = sectionRef.current?.querySelector("[aria-invalid=\"true\"]");
+				if (target === null || target === void 0) return;
+				target.scrollIntoView({ block: "center" });
+				target.focus({ preventScroll: true });
+			}, [locateTick]);
+			const locate = () => {
+				setFold(expandGroups(fold, invalidGroups(state)));
+				setLocateTick((tick) => tick + 1);
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				ref: sectionRef,
 				className: bar.visible ? "cc-section cc-sectionWithBar" : "cc-section",
 				"aria-label": t("title"),
 				children: [
@@ -5935,10 +6947,9 @@ window.__ModuleLoader__.load({
 						className: "cc-intro",
 						children: t("intro")
 					}),
-					!state.writable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-readOnly",
-						role: "status",
-						children: t("readOnly")
+					!state.writable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
+						icon: "lock",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("readOnly") })
 					}) : null,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountsCard, {
 						t,
@@ -5949,17 +6960,30 @@ window.__ModuleLoader__.load({
 						actions,
 						onRefresh: props.refreshUsage,
 						openAnalytics: props.openAnalytics,
-						createEnrollment: props.createEnrollment
+						createEnrollment: props.createEnrollment,
+						...foldProps("accounts")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelsCard, {
 						...form,
+						...foldProps("models"),
 						onSelect: props.editVisibleModels,
 						onClear: props.clearVisibleModels,
 						onOverrides: props.editContextWindowOverrides
 					}),
-					/* @__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.jsx)(PrivacyCard, {
+						...form,
+						...foldProps("privacy")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IntegrationsCard, {
+						...form,
+						...foldProps("integrations"),
+						status: status.snapshot,
+						probe: status.probe
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdvancedSection, {
+						...form,
+						...foldProps("advanced")
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 						className: "cc-version",
 						children: [
@@ -5985,7 +7009,8 @@ window.__ModuleLoader__.load({
 						state,
 						t,
 						onDiscard: props.discard,
-						onSave: props.save
+						onSave: props.save,
+						onLocate: locate
 					})
 				]
 			});
@@ -9202,53 +10227,105 @@ window.__ModuleLoader__.load({
 		/**
 		* 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 12px of padding, its title 14/22 label-primary and its description
-		* 12/18 label-tertiary, the control on the right. The hairline rhythm is
-		* section-level: a 0.5px border-l2 rule separates the GROUPS (see
-		* `cc-groupDivided`), never the rows inside one, so a group's rows read as one
-		* list. 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.
+		* Every size is the design canvas's (the cc-kit.css of the "CommandCode 设置页
+		* 重设计" artboards, 2026-10-21), with its colour tokens mapped onto the
+		* harness theme aliases so dark mode keeps working: a row is 12px of vertical
+		* padding with no line between rows, title 14/22, description 12/18, a 24px
+		* gap to the control; a group is 16px of padding under a 1px border-l2 rule,
+		* its heading 36px high; the page title is 18/26 and group titles 14/22, both
+		* 600. The page renders with grayscale antialiasing and descriptive text in
+		* label-secondary.
+		*
+		* Shapes follow one rule — clickable things are pills, fillable things are
+		* 8px. Buttons are drawn here (PageButton → cc-btn: md 32px, sm 28px, lg 36px
+		* for the save bar), not taken from the harness primitive. Inputs and the
+		* model selector are 32px with a 1px border-l3 stroke on the raised surface; a
+		* number field draws its unit inside the box (cc-unitBox). Account cards and
+		* the per-model override table are 1px border-l2 cards with 12px corners;
+		* panels and notices are 12px-radius fills; badges are 20px pills. Errors use
+		* state-error-primary; tinted surfaces fall back to a color-mix of the state
+		* colour where the theme has no tertiary token. The Models-page provider card
+		* shares cc-hint / cc-badgeMuted / cc-input and keeps their colours.
 		*/
 		const PAGE_CSS = `
-.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-section{max-width:720px;color:var(--dsw-alias-label-primary);flex-direction:column;display:flex;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
+.cc-title{margin:0;color:var(--dsw-alias-label-primary);font-size:18px;font-weight:600;line-height:26px}
+.cc-intro{margin:4px 0 0;color:var(--dsw-alias-label-secondary);font-size:14px;line-height:22px}
 .cc-spacer{flex:1}
-.cc-group{flex-direction:column;display:flex;margin-top:28px}
-.cc-groupDivided{margin-top:24px;padding-top:20px;border-top:.5px solid var(--dsw-alias-border-l2)}
-.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-group{flex-direction:column;display:flex;padding:16px 0}
+.cc-group:not(.cc-groupDivided){padding-top:24px}
+.cc-groupDivided{border-top:1px solid var(--dsw-alias-border-l2)}
+.cc-groupHead{align-items:center;gap:8px;display:flex;min-height:36px}
+.cc-groupTitle{margin:0;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:600;line-height:22px}
+.cc-groupDesc{margin:2px 0 0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cc-rows>.cc-groupDesc{margin:0}
+.cc-groupHeading{flex:1;min-width:0;margin:0;font:inherit;display:flex}
+/* The whole heading row is the fold toggle: chevron, title, summary badges. */
+.cc-disclosure{box-sizing:border-box;flex-wrap:wrap;flex:1;align-items:center;gap:6px 8px;min-width:0;min-height:36px;padding:0;border:0;background:0 0;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:8px;display:flex}
+.cc-foldChevron{color:var(--dsw-alias-label-tertiary);transition:transform .15s ease}
+.cc-foldChevronClosed{transform:rotate(-90deg)}
+.cc-groupBody{flex-direction:column;display:flex;padding-top:4px}
+.cc-groupBody[hidden]{display:none}
 .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:12px 0}
+.cc-row{flex-wrap:wrap;align-items:center;gap:8px 24px;display:flex;padding:12px 0}
 .cc-rowFlush{padding:0}
-.cc-rowText{flex-direction:column;flex:1;gap:4px;min-width:0;padding-right:32px;display:flex}
+.cc-rowText{flex-direction:column;flex:1 1 300px;gap:2px;min-width:0;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{color:var(--dsw-alias-label-secondary);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-rowControl{flex:none;align-items:center;gap:8px;display:inline-flex;margin-left:auto}
 .cc-rowInput{width:200px}
 .cc-rowInputWide{width:280px}
-.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)}
+/* The row-level field, drawn to the design canvas: 32px, 8px corners, a 1px
+ * border-l3 stroke on the raised surface. A number field draws its unit inside
+ * the same box (cc-unitBox), right of the value. */
+.cc-fieldInput{box-sizing:border-box;flex:none;height:32px;min-width:0;padding:0 10px;border:1px solid var(--dsw-alias-border-l3);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-fieldInput::placeholder{color:var(--dsw-alias-label-dimmed)}
+.cc-fieldInput:hover:not(:disabled){border-color:var(--dsw-alias-label-tertiary)}
+.cc-fieldInput:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
+.cc-fieldInput:disabled{opacity:.5;cursor:default}
+.cc-fieldInputInvalid,.cc-fieldInputInvalid:hover{border-color:var(--dsw-alias-state-error-primary)}
+.cc-unitBox{box-sizing:border-box;flex:none;align-items:center;display:inline-flex;width:160px;height:32px;border:1px solid var(--dsw-alias-border-l3);border-radius:8px;background:var(--dsw-alias-bg-layer-1);overflow:hidden}
+.cc-unitBox:hover{border-color:var(--dsw-alias-label-tertiary)}
+.cc-unitBox:focus-within{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
+.cc-unitBoxInvalid,.cc-unitBoxInvalid:hover{border-color:var(--dsw-alias-state-error-primary)}
+.cc-unitBox:has(>.cc-fieldInput:disabled){opacity:.5}
+.cc-unitBox>.cc-fieldInput{flex:1;width:auto;height:30px;border:0;border-radius:0;background:0 0;outline:none;text-align:right;font-variant-numeric:tabular-nums}
+.cc-unit{flex:none;padding:0 10px 0 2px;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;white-space:nowrap}
+/* Holds the reset button's column on rows that have nothing to reset, so the
+ * staged controls of one group line up on a single right edge. */
+.cc-resetSlot{flex:none;width:28px;height:28px}
+.cc-icon{flex:none;width:16px;height:16px}
+/* The page's buttons (PageButton), drawn to the design canvas: one capsule
+ * shape, md 32px / 14px text / 14px icon, sm 28px / 12px text, lg 36px for
+ * the save bar; primary is the brand fill, secondary the quiet grey fill,
+ * ghost label-secondary text, danger the error fill. */
+.cc-btn{box-sizing:border-box;flex:none;align-items:center;justify-content:center;gap:6px;display:inline-flex;height:32px;padding:0 14px;border:0;border-radius:999px;corner-shape:round;font:inherit;font-size:14px;line-height:22px;white-space:nowrap;cursor:pointer;text-decoration:none}
+.cc-btnSm{height:28px;padding:0 10px;gap:4px;font-size:12px;line-height:18px}
+.cc-btnLg{height:36px;padding:0 16px}
+.cc-btn .cc-btnIcon{width:14px;height:14px}
+.cc-btnPrimary{background:var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary));color:var(--dsw-alias-label-primary-foreground,#fff)}
+.cc-btnPrimary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover,var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary)))}
+.cc-btnSecondary{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary)}
+.cc-btnSecondary:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.cc-btnGhost{background:0 0;color:var(--dsw-alias-label-secondary)}
+.cc-btnGhost:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.cc-btnDanger{background:var(--dsw-alias-state-error-primary);color:#fff}
+.cc-btnDanger:hover:not(:disabled){background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 88%,#000)}
+.cc-btn:disabled{cursor:default;opacity:.4}
+.cc-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
+.cc-groupSummary{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:400;line-height:18px;white-space:nowrap}
 .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:12px;font-weight:500;line-height:17px}
+.cc-badge,.cc-badgeMuted{box-sizing:border-box;flex:none;align-items:center;gap:4px;display:inline-flex;height:20px;white-space:nowrap;border-radius:999px;corner-shape:round;padding:0 8px;font-size:12px;font-weight:500;line-height:18px}
 .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-badgeOutline{background:0 0;box-shadow:inset 0 0 0 1px var(--dsw-alias-border-l3);color:var(--dsw-alias-label-tertiary)}
+.cc-badgeOk{background:var(--dsw-alias-state-success-tertiary,color-mix(in srgb,var(--dsw-alias-state-success-primary,#16a34a) 10%,transparent));color:var(--dsw-alias-state-success-primary,#15803d)}
+.cc-badgeError{background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent);color:var(--dsw-alias-state-error-primary)}
 .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))}
 .cc-field{flex-direction:column;gap:6px;padding:12px 0;display:flex}
 .cc-field+.cc-field{border-top:.5px solid var(--dsw-alias-border-l2)}
@@ -9263,13 +10340,13 @@ window.__ModuleLoader__.load({
 .cc-input:disabled{opacity:.6;cursor:default}
 .cc-inputInvalid{border-color:var(--dsw-alias-state-error-primary)}
 .cc-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:18px}
-.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-modelSelectAnchor{flex-direction:column;align-items:stretch;gap:6px;display:inline-flex;width:200px}
+.cc-selector{box-sizing:border-box;justify-content:space-between;align-items:center;gap:8px;display:inline-flex;height:32px;padding:0 10px;border:1px solid var(--dsw-alias-border-l3);border-radius:8px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:14px;line-height:22px;text-align:left;cursor:pointer}
+.cc-selector:hover:not(:disabled){border-color:var(--dsw-alias-label-tertiary)}
 .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-selector:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .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)}
+.cc-selectorChevron{color:var(--dsw-alias-label-tertiary)}
 /* The search box sits inside the Menu anchor, so typing in it never trips
  * the Menu's outside-click close. */
 .cc-modelSearch{width:100%}
@@ -9300,79 +10377,74 @@ window.__ModuleLoader__.load({
 .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);transition:transform .12s ease}
 .cc-toggle:checked::after{transform:translateX(16px)}
+.cc-toggle:not(:checked)::after{background:var(--dsw-alias-switch-thumb,var(--dsw-alias-label-primary-foreground))}
 .cc-toggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .cc-toggle:disabled{cursor:default;opacity:.5}
-.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}
-.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-accountMode{align-items:center;gap:8px;display:flex;margin:12px 0;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-accountList+.cc-panel{margin-top:8px}
+/* One row under the list: Add account (outline) leads, the analytics exit
+ * (ghost) trails; the exit's long label clamps instead of wrapping the row. */
+.cc-accountActions{flex-wrap:wrap;align-items:center;gap:8px;display:flex;margin-top:12px}
+.cc-analyticsEntry{max-width:100%;min-width:0}
+.cc-analyticsEntryText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cc-chevronOpen{transform:rotate(180deg)}
+.cc-accountItem{flex-direction:column;display:flex;border:1px solid var(--dsw-alias-border-l2);border-radius:12px}
+.cc-accountItem>.cc-notice,.cc-accountItem>.cc-panel{margin:0 16px 14px}
+.cc-accountItemActive{border-color:var(--dsw-alias-border-l3)}
+.cc-accountHead{align-items:center;gap:4px;display:flex;padding:8px 8px 8px 0}
+.cc-accountToggle{flex-wrap:wrap;align-items:center;gap:6px 8px;display:flex;flex:1;min-width:0;min-height:44px;padding:0 0 0 16px;background:0 0;border:0;border-radius:12px;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{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:8px;color:var(--dsw-alias-label-tertiary);cursor:pointer}
+.cc-iconButton:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.cc-iconButton:disabled{cursor:default;opacity:.4}
 .cc-iconButton:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3)}
-/* Per-model context-length override rows (issue #86): the error wraps onto
-   its own line beneath the select/input/remove trio. The three cells form a
-   fixed column contract — flexible model, 112px value, 28px remove — and the
-   cc-contextHead labels repeat the first two (plus the remove cell's width
-   as a spacer) so they sit exactly over their columns. */
-.cc-contextItem{align-items:center;gap:8px;display:flex;flex-wrap:wrap;padding:8px 0}
-.cc-contextHead{align-items:center;gap:8px;display:flex;flex-wrap:wrap;padding:4px 0 0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
-.cc-contextHeadModel{flex:1;min-width:200px}
-.cc-contextHeadValue{flex:none;width:112px}
-.cc-contextHeadGap{flex:none;width:28px}
-.cc-contextSelect{position:relative;display:block;flex:1;min-width:200px}
-/* appearance:none swaps the platform arrow for the cc-contextCaret, shaped
-   like cc-selectorCaret so every dropdown in the plugin opens with the same
-   hand-drawn chevron. */
-.cc-contextModel{box-sizing:border-box;appearance:none;-webkit-appearance:none;width:100%;padding-inline-end:26px;text-overflow:ellipsis;cursor:pointer}
-.cc-contextCaret{position:absolute;inset-inline-end:12px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--dsw-alias-label-tertiary);border-bottom:1.5px solid var(--dsw-alias-label-tertiary);transform:translateY(-50%) rotate(45deg);pointer-events:none}
+/* Per-model context-length overrides (issue #86) as the design's small table:
+ * a card holding a head row over a model / value / remove grid, a line
+ * between rows; a row's error wraps onto its own line across the grid. */
+.cc-contextTable{flex-direction:column;display:flex;margin:0 0 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px}
+.cc-contextItem{grid-template-columns:minmax(0,1fr) 144px 28px;align-items:center;gap:8px;display:grid;padding:8px 8px 8px 12px}
+.cc-contextItem+.cc-contextItem{border-top:1px solid var(--dsw-alias-border-l2)}
+.cc-contextHead{grid-template-columns:minmax(0,1fr) 144px 28px;align-items:center;gap:8px;display:grid;height:32px;padding:0 8px 0 12px;border-bottom:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.cc-contextSelect{position:relative;display:block;min-width:0}
+/* appearance:none swaps the platform arrow for the page's own chevron icon. */
+.cc-contextModel{box-sizing:border-box;appearance:none;-webkit-appearance:none;width:100%;padding-inline-end:30px;text-overflow:ellipsis;cursor:pointer}
+.cc-contextCaret{position:absolute;inset-inline-end:10px;top:50%;color:var(--dsw-alias-label-tertiary);transform:translateY(-50%);pointer-events:none}
 .cc-contextSelect:has(.cc-contextModel:disabled) .cc-contextCaret{opacity:.6}
-.cc-contextValue{flex:none;width:112px}
-.cc-contextError{flex-basis:100%}
-/* Three dots from one element: the dot 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-contextItem>.cc-unitBox{width:100%}
+.cc-contextError{grid-column:1/-1}
 .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-tabDotBlank{background:0 0;border:0}
 .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-accountMeters{flex-wrap:wrap;gap:6px 24px;display:flex;padding:0 16px 14px 32px}
 .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-miniMeterLabel{color:var(--dsw-alias-label-secondary)}
 .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-accountDetails{container-type:inline-size;border-top:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:16px;display:flex;padding:16px}
+.cc-inlineForm{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)}
-.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)}
-.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}
-.cc-accountReport{flex-direction:column;gap:14px;display:flex}
+.cc-panel{flex-direction:column;gap:12px;display:flex;padding:16px;border-radius:12px;background:var(--dsw-alias-bg-module-platform)}
+.cc-panelInput{width:100%}
+.cc-keyField{align-items:center;gap:8px;display:flex}
+.cc-panelActions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}
+/* The add-account method switch, drawn as the design's segmented control: a
+ * pill track on the raised surface, the chosen segment in the brand fill. */
+.cc-seg{align-self:flex-start;display:inline-flex;padding:2px;border-radius:999px;corner-shape:round;background:var(--dsw-alias-bg-layer-1);box-shadow:inset 0 0 0 1px var(--dsw-alias-border-l2)}
+.cc-segItem{height:28px;padding:0 12px;border:0;border-radius:999px;corner-shape:round;background:0 0;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;line-height:18px;cursor:pointer}
+.cc-segItem:hover:not(:disabled):not(.cc-segOn){color:var(--dsw-alias-label-primary)}
+.cc-segItem:disabled{cursor:default;opacity:.4}
+.cc-segItem:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
+.cc-segOn{background:var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary));color:var(--dsw-alias-label-primary-foreground,#fff)}
+.cc-panelTitle{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:600;line-height:22px}
+.cc-accountReport{flex-direction:column;gap:16px;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: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:12px;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, not one auto-fit track: auto-fit wrapped the four activity
@@ -9380,12 +10452,18 @@ window.__ModuleLoader__.load({
  * narrow details panel. */
 .cc-usageStats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;display:grid}
 .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-balance{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:4px 16px;display:flex}
+.cc-balanceMain{flex-direction:column;gap:2px;display:flex}
+.cc-balanceLabel{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cc-balanceValue{color:var(--dsw-alias-label-primary);font-size:20px;font-weight:600;line-height:28px;font-variant-numeric:tabular-nums}
+.cc-balanceSub{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}
+.cc-balanceEmpty .cc-balanceValue{color:var(--dsw-alias-state-error-primary)}
+.cc-balanceNote{flex-basis:100%;margin:0;color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
+.cc-usageStat{min-width:0;flex-direction:column;gap:2px;display:flex;padding:10px 12px;border-radius:8px;background:var(--dsw-alias-bg-module-platform)}
+.cc-usageStatLabel{color:var(--dsw-alias-label-secondary);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-usageStatSub{color:var(--dsw-alias-label-secondary);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}
@@ -9395,26 +10473,59 @@ window.__ModuleLoader__.load({
 .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-state-error-primary)}
-.cc-usageWindowReset{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:18px}
+.cc-usageWindowReset{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px;line-height:18px}
 .cc-usageMeta{align-items:center;gap:8px;display:flex}
 .cc-usageMetaSpacer{flex:1}
-.cc-usageUpdated{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:18px}
+.cc-usageUpdated{color:var(--dsw-alias-label-secondary);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-notices{flex-direction:column;gap:8px;display:flex;margin-bottom:12px}
+.cc-section>.cc-notice{margin-top:12px}
+/* One block for every result, warning and blocked state: neutral (read-only,
+ * in progress), warn (partly done, needs a retry) and error (failed). The
+ * icon and title take the tone; the body stays label-secondary for contrast. */
+.cc-notice{box-sizing:border-box;align-items:flex-start;gap:10px;display:flex;padding:10px 12px;border-radius:12px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cc-noticeIcon{flex:none;width:16px;height:16px;margin-top:1px;color:var(--dsw-alias-label-tertiary)}
+.cc-noticeBody{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex;word-break:break-word}
+.cc-noticeBody>p{margin:0}
+.cc-noticeTitle{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500;line-height:22px}
+.cc-noticeActions{flex-wrap:wrap;align-items:center;gap:8px;display:flex;margin-top:8px}
+.cc-noticeDetail{color:var(--dsw-alias-label-tertiary)}
+.cc-noticeSuccess{background:var(--dsw-alias-state-success-tertiary,color-mix(in srgb,var(--dsw-alias-state-success-primary,#16a34a) 10%,transparent))}
+.cc-noticeSuccess>.cc-noticeIcon{color:var(--dsw-alias-state-success-primary,#16a34a)}
+.cc-noticeWarn{background:var(--dsw-alias-state-warn-tertiary,color-mix(in srgb,var(--dsw-alias-state-warn-primary,#d97706) 12%,transparent))}
+.cc-noticeWarn>.cc-noticeIcon,.cc-noticeWarn .cc-noticeTitle{color:var(--dsw-alias-state-warn-label,var(--dsw-alias-state-warn-primary,#b45309))}
+.cc-noticeError{background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent)}
+.cc-noticeError>.cc-noticeIcon,.cc-noticeError .cc-noticeTitle{color:var(--dsw-alias-state-error-primary)}
 .cc-version{margin:32px 0 0;text-align:center;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
 .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}
 .cc-providerCard{flex-direction:column;display:flex}
 .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}
-.cc-loginLink{color:var(--dsw-alias-link,var(--dsw-alias-brand-primary));text-decoration:none;font-size:12px;line-height:18px}
+.cc-loginLink{align-items:center;gap:4px;display:inline-flex;color:var(--dsw-alias-link,var(--dsw-alias-brand-primary));text-decoration:none;font-size:12px;line-height:18px}
+.cc-loginLink>.cc-iconInline{width:12px;height:12px}
 .cc-loginLink:hover{text-decoration:underline;text-underline-position:under}
+/* The status row's dot + verdict sit beside the row title; the primitive's own
+ * state tokens colour the dot, so only the neutral label and the failure note
+ * need styling here. */
+.cc-statusBadge{align-items:center;gap:6px;display:inline-flex;white-space:nowrap}
+.cc-statusLabel{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cc-statusNotice{color:var(--dsw-alias-state-warn-label,var(--dsw-alias-label-tertiary));margin:0;font-size:12px;line-height:18px}
+/* One muted line in the status description: the local-connectivity probe and
+ * the publication-lag note both use it, so the dot and the text stay aligned. */
+/* The service-status row's two sources: a key column (Official / This device)
+ * beside a value line that wraps under itself, never under the key. */
+.cc-statusLines{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px 12px;display:grid;margin:2px 0 0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cc-statusKey{color:var(--dsw-alias-label-tertiary);white-space:nowrap}
+.cc-statusValue{flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0;display:flex}
+.cc-statusVerdict{color:var(--dsw-alias-label-primary)}
+.cc-statusMeta{flex:1 1 200px;min-width:0}
+.cc-statusBad{color:var(--dsw-alias-state-warn-label,var(--dsw-alias-state-warn-primary,#b45309))}
+.cc-statusLink{color:var(--dsw-alias-link,var(--dsw-alias-brand-primary));text-decoration:none;font-size:12px;line-height:18px;white-space:nowrap}
+.cc-statusLink: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-state-error-primary)}
-/* The floating save bar: a centered capsule pinned to the bottom of the
+/* The floating save bar: a centered bar 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 shown, the section reserves room at its end so the last line
@@ -9422,8 +10533,8 @@ window.__ModuleLoader__.load({
  * 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, and its corners are concentric
- * (a 44px capsule around 36px buttons inset by 4px) so the gap around each
- * button is even. */
+ * with the capsule buttons inside it (36px pills inset by 4px in a 44px pill)
+ * 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}
@@ -9435,14 +10546,7 @@ window.__ModuleLoader__.load({
 .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{transition:none}}
+@media (prefers-reduced-motion:reduce){.cc-foldChevron,.cc-toggle::after,.cc-usageBarFill,.cc-saveBar,.cc-saveBarShown{transition:none}}
 `;
 		//#endregion
 		//#region src/client/panel-styles.ts
@@ -9892,6 +10996,7 @@ window.__ModuleLoader__.load({
 					...MODELS_REMOTE_CONTRIBUTION.descriptors,
 					...PRICES_REMOTE_CONTRIBUTION.descriptors,
 					...ANALYTICS_REMOTE_CONTRIBUTION.descriptors,
+					...PROBE_REMOTE_CONTRIBUTION.descriptors,
 					...LOGIN_REMOTE_CONTRIBUTION.descriptors,
 					...ENROLLMENT_REMOTE_CONTRIBUTION.descriptors
 				]
@@ -10027,6 +11132,14 @@ window.__ModuleLoader__.load({
 				return ok;
 			};
 			const injected = () => ({
+				probeService: () => {
+					const namespace = usageNamespace;
+					if (typeof namespace?.probe !== "function") return Promise.resolve({
+						ok: false,
+						error: { message: "宿主未提供连通性探测" }
+					});
+					return namespace.probe();
+				},
 				createEnrollment: () => new AccountEnrollmentController(() => {
 					if (!usageNamespace?.enrollmentBegin) throw new Error("宿主不支持账号开通，请更新插件");
 					return usageNamespace;