dsh-connect-trae 3.4.1 → 3.4.3

package/lib/client.js

@@ -478,6 +478,51 @@ window.__ModuleLoader__.load({
    an error: it is Trae's one-per-device-per-day rule, and the day is simply
    spent. Rendering it in the error colour would read as a plugin fault. */
 .dsm-trae-checkin-note{margin:8px 0 0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#c6c9d0)}
+/* The busy veil: one overlay for every account write whose result only lands
+   after the Host re-reads its settings document. Fixed so it covers the card
+   no matter which section started the operation, and translucent so the table
+   stays visible underneath — the user is watching a specific row change, and
+   hiding it would defeat the point.
+
+   The mask and card surface are the HOST's own tokens, not this file's
+   invention. --dsw-alias-bg-mask-1 + --dsw-mask-blur is exactly what the
+   host's own overlays use, so the veil dims the way every other overlay in the
+   shell does instead of laying its own black wash on top. A hardcoded flat
+   black mask (e.g. a mid-transparency black) was tuned against neither theme:
+   too weak next to the host's .24 mask in light mode, and it ignored the
+   host's blur entirely.
+
+   bg-layer-2 (not bg-primary, which does not exist in the host's token set at
+   all and therefore always fell through to this file's near-black #1b1c20) is
+   the same surface the host puts behind its panels — that near-black fallback
+   is what made the veil read as a black slab with unreadable text on it. */
+.dsm-trae-veil{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:var(--dsw-alias-bg-mask-1,rgba(0,0,0,.32));backdrop-filter:var(--dsw-mask-blur);cursor:progress}
+/* --dsw-elevation-prominent is the host's own panel shadow (a hairline stroke
+   plus two soft layers); a hand-rolled drop shadow read as a heavy grey box. */
+.dsm-trae-veil-card{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(340px,80vw);padding:16px 20px;border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:12px;background:var(--dsw-alias-bg-layer-2,#fff);box-shadow:var(--dsw-elevation-prominent,0 8px 28px rgba(0,0,0,.35))}
+.dsm-trae-veil-text{font-size:13px;line-height:20px;color:var(--dsw-alias-label-primary,#0f1115);text-align:center}
+/* label-secondary, not label-tertiary: this line carries the operation's
+   detail and must stay legible. tertiary is the host's dimmest tier
+   (neutral-bluish-600 on light, neutral-bluish-400 on dark) and is meant for
+   metadata, not for a sentence the user has to read while waiting. */
+.dsm-trae-veil-hint{font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#61666b);text-align:center}
+/* The spinner proves the UI is alive when the row under it has not changed yet
+   — which is precisely the confusion the veil exists to remove. It follows the
+   host's own state spinner (dsh's _dsh-state-dot-spin): an SVG arc whose dash
+   breathes while it turns, currentColor so it inherits the tier it sits in,
+   and the same 1.5s beat. The previous 18px border-ring at .7s was roughly
+   twice the host's speed and visibly out of step with every other spinner in
+   the shell — that mismatch, more than the shape itself, is what made it look
+   cheap.
+
+   Reduced-motion users get the static arc rather than a frozen ring, matching
+   how the host degrades its own spinner. */
+.dsm-trae-veil-spinner{width:20px;height:20px;color:var(--dsw-alias-label-secondary,#61666b);animation:dsm-trae-veil-spin 1.5s linear infinite}
+.dsm-trae-veil-spinner-track{opacity:.25}
+.dsm-trae-veil-spinner-arc{stroke-dasharray:12 150;animation:dsm-trae-veil-dash 1.5s ease-in-out infinite}
+@keyframes dsm-trae-veil-spin{to{transform:rotate(360deg)}}
+@keyframes dsm-trae-veil-dash{0%{stroke-dasharray:12 150;stroke-dashoffset:0}50%{stroke-dasharray:24 150;stroke-dashoffset:-6}to{stroke-dasharray:12 150;stroke-dashoffset:0}}
+@media (prefers-reduced-motion: reduce){.dsm-trae-veil-spinner{animation:none}.dsm-trae-veil-spinner-arc{animation:none;stroke-dasharray:18 150;stroke-dashoffset:-3}}
 `;
 		/**
 		* Composer-row readout styles, injected by the readout itself.
@@ -626,6 +671,76 @@ window.__ModuleLoader__.load({
 }
 .dsm-trae-expiry-detail{font-size:11px;line-height:16px;opacity:.85}
 `;
+		//#endregion
+		//#region src/client/BusyOverlay.tsx
+		/**
+		* The shared busy veil's spinner: an arc that breathes while it turns.
+		*
+		* Deliberately the host's own state-spinner shape (dsh's `_dsh-state-dot-spin`)
+		* rather than a border-ring: a two-tone CSS ring at .7s read as a loading
+		* indicator from another decade and was out of step with every spinner in the
+		* shell. The motion lives in CSS (`dsm-trae-veil-spin` / `-dash`), so this
+		* element only describes the geometry; `currentColor` lets it inherit whatever
+		* tier it sits in.
+		*
+		* `aria-hidden` because the veil's `role="status"` already announces the
+		* message — a second announcement from a decorative arc is noise.
+		*/
+		function VeilSpinner() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				className: "dsm-trae-veil-spinner",
+				viewBox: "0 0 20 20",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					className: "dsm-trae-veil-spinner-track",
+					cx: "10",
+					cy: "10",
+					r: "8",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					className: "dsm-trae-veil-spinner-arc",
+					cx: "10",
+					cy: "10",
+					r: "8",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round"
+				})]
+			});
+		}
+		/**
+		* The veil. Deliberately NOT a modal dialog: it carries no focusable control
+		* and no dismissal — there is nothing for the user to decide, only a step to
+		* wait through. `aria-busy` plus a polite live region state that to screen
+		* readers, which is the whole accessibility contract a wait screen needs.
+		*/
+		function BusyOverlay({ message, hint, visible }) {
+			if (!visible) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dsm-trae-veil",
+				role: "status",
+				"aria-busy": "true",
+				"aria-live": "polite",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsm-trae-veil-card",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VeilSpinner, {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsm-trae-veil-text",
+							children: message
+						}),
+						hint === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsm-trae-veil-hint",
+							children: hint
+						})
+					]
+				})
+			});
+		}
 		//#endregion
 		//#region src/client/plan-text.ts
 		/**
@@ -1706,539 +1821,546 @@ window.__ModuleLoader__.load({
 			const label = status.status === "signed-in" ? t("row.signedIn", { accountName: status.accountName }) : status.status === "error" ? t("row.requestFailed") : t("row.signedOut");
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 				className: `dsm-plugin-card${open ? " dsm-plugin-card-open" : ""}`,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					className: "dsm-plugin-card-header",
-					"aria-expanded": open,
-					"aria-label": `${t(open ? "row.collapse" : "row.expand")}: ${title}`,
-					onClick: () => {
-						setOpen(!open);
-					},
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-							className: "dsm-plugin-card-icon",
-							src: TRAE_PLUGIN_ICON,
-							alt: ""
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "dsm-plugin-card-head",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsm-plugin-card-title",
-								children: title
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsm-plugin-card-description",
-								children: t("row.desc")
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							"aria-hidden": "true",
-							className: `dsm-plugin-card-chevron${open ? " dsm-plugin-card-chevron-open" : ""}`
-						})
-					]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "dsm-plugin-card-body",
-					hidden: !open,
-					children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dsm-trae-usage",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "dsm-plugin-card-header",
+						"aria-expanded": open,
+						"aria-label": `${t(open ? "row.collapse" : "row.expand")}: ${title}`,
+						onClick: () => {
+							setOpen(!open);
+						},
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dsm-trae-tabs",
-								role: "tablist",
-								"aria-label": title,
-								children: TRAE_REGIONS.map((item) => {
-									const regionStatus = statusByRegion[item];
-									const on = regionOn(item);
-									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "dsm-trae-tab-cell",
-										role: "presentation",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-											type: "button",
-											role: "tab",
-											"aria-selected": item === activeRegion,
-											className: `dsm-trae-tab${item === activeRegion ? " dsm-trae-tab-active" : ""}${on ? "" : " dsm-trae-tab-off"}`,
-											onClick: () => {
-												setActiveRegion(item);
-											},
-											children: [regionStatus === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												"aria-hidden": "true",
-												className: "dsm-trae-tab-dot",
-												style: dotStyle(regionStatus.status)
-											}), item === "cn" ? t("row.tabCn") : t("row.tabAi")]
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-											className: "dsm-trae-switch dsm-trae-tab-switch",
-											title: t("row.tabSwitchHint"),
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-												type: "checkbox",
-												checked: on,
-												disabled: settingsScope?.getSnapshot().writable !== true || togglingRegion !== void 0,
-												"aria-label": t("row.tabSwitchAria", { region: item === "cn" ? t("row.tabCn") : t("row.tabAi") }),
-												onChange: (event) => {
-													toggleRegion(item, event.currentTarget.checked);
-												}
-											})
-										})]
-									}, item);
-								})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "dsm-trae-tab-hint",
-								children: t("row.tabHint")
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								className: "dsm-plugin-card-icon",
+								src: TRAE_PLUGIN_ICON,
+								alt: ""
 							}),
-							writeError === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "dsm-trae-usage-error",
-								role: "alert",
-								children: t("row.settingsWriteFailed", { message: writeError })
-							}),
-							regionOn(activeRegion) ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "dsm-trae-tab-off-notice",
-								role: "status",
-								children: t("row.tabOffNotice")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "dsm-trae-prefs",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-									className: "dsm-trae-pref",
-									title: t("row.followAppLoginHint"),
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										type: "checkbox",
-										checked: settingsEdits.followAppLogin,
-										disabled: settingsScope?.getSnapshot().writable !== true || savingSettings,
-										"aria-describedby": followHintId,
-										onChange: (event) => {
-											writePreference("followAppLogin", event.currentTarget.checked);
-										}
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-										id: followHintId,
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", {
-												id: followLabelId,
-												children: t("row.followAppLogin")
-											}),
-											" ",
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dsm-trae-pref-hint",
-												children: t("row.followAppLoginHint")
-											})
-										]
-									})]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-									className: "dsm-trae-pref",
-									title: t(activeRegion === "cn" ? "row.showPointsInMainUiHint" : "row.showPointsInMainUiHintAi"),
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										type: "checkbox",
-										checked: settingsEdits.showPointsInMainUi,
-										disabled: settingsScope?.getSnapshot().writable !== true || savingSettings,
-										"aria-describedby": creditsHintId,
-										onChange: (event) => {
-											writePreference("showPointsInMainUi", event.currentTarget.checked);
-										}
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-										id: creditsHintId,
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", {
-												id: creditsLabelId,
-												children: t("row.showPointsInMainUi")
-											}),
-											" ",
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dsm-trae-pref-hint",
-												children: t(activeRegion === "cn" ? "row.showPointsInMainUiHint" : "row.showPointsInMainUiHintAi")
-											})
-										]
-									})]
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "dsm-plugin-card-head",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsm-plugin-card-title",
+									children: title
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsm-plugin-card-description",
+									children: t("row.desc")
 								})]
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-								className: "dsm-trae-accounts",
-								"aria-label": t("row.accountsTitle"),
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "dsm-trae-accounts-head",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-											className: "dsm-trae-accounts-title",
-											children: t("row.accountsTitle")
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "dsm-trae-accounts-hint",
-											children: t("row.accountsHint")
-										})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											type: "button",
-											className: "dsm-btn dsm-btn-outline",
-											disabled: busy,
-											onClick: () => {
-												rescanAccounts();
-											},
-											children: busy ? t("row.accountsScanning") : t("row.refreshTokens")
-										})]
-									}),
-									status.status !== "signed-in" || status.accounts.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "dsm-trae-usage-account",
-										role: "status",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "dsm-trae-usage-account-copy",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-												className: "dsm-trae-usage-status",
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"aria-hidden": "true",
+								className: `dsm-plugin-card-chevron${open ? " dsm-plugin-card-chevron-open" : ""}`
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsm-plugin-card-body",
+						hidden: !open,
+						children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsm-trae-usage",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dsm-trae-tabs",
+									role: "tablist",
+									"aria-label": title,
+									children: TRAE_REGIONS.map((item) => {
+										const regionStatus = statusByRegion[item];
+										const on = regionOn(item);
+										return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "dsm-trae-tab-cell",
+											role: "presentation",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+												type: "button",
+												role: "tab",
+												"aria-selected": item === activeRegion,
+												className: `dsm-trae-tab${item === activeRegion ? " dsm-trae-tab-active" : ""}${on ? "" : " dsm-trae-tab-off"}`,
+												onClick: () => {
+													setActiveRegion(item);
+												},
+												children: [regionStatus === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 													"aria-hidden": "true",
-													className: "dsm-trae-usage-dot",
-													style: dotStyle(status.status)
-												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
-											}), status.status === "signed-in" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dsm-trae-usage-expiry",
-												children: t("row.tokenExpiry", { expiresAt: formatDateTime(status.tokenExpiresAtMs) })
-											}) : null]
-										})
-									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: `dsm-trae-account-table${activeRegion === "cn" ? " dsm-trae-account-table-checkin" : ""}`,
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "dsm-trae-account-row dsm-trae-account-row-head",
-											role: "row",
+													className: "dsm-trae-tab-dot",
+													style: dotStyle(regionStatus.status)
+												}), item === "cn" ? t("row.tabCn") : t("row.tabAi")]
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+												className: "dsm-trae-switch dsm-trae-tab-switch",
+												title: t("row.tabSwitchHint"),
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+													type: "checkbox",
+													checked: on,
+													disabled: settingsScope?.getSnapshot().writable !== true || togglingRegion !== void 0,
+													"aria-label": t("row.tabSwitchAria", { region: item === "cn" ? t("row.tabCn") : t("row.tabAi") }),
+													onChange: (event) => {
+														toggleRegion(item, event.currentTarget.checked);
+													}
+												})
+											})]
+										}, item);
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dsm-trae-tab-hint",
+									children: t("row.tabHint")
+								}),
+								writeError === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dsm-trae-usage-error",
+									role: "alert",
+									children: t("row.settingsWriteFailed", { message: writeError })
+								}),
+								regionOn(activeRegion) ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dsm-trae-tab-off-notice",
+									role: "status",
+									children: t("row.tabOffNotice")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsm-trae-prefs",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+										className: "dsm-trae-pref",
+										title: t("row.followAppLoginHint"),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											type: "checkbox",
+											checked: settingsEdits.followAppLogin,
+											disabled: settingsScope?.getSnapshot().writable !== true || savingSettings,
+											"aria-describedby": followHintId,
+											onChange: (event) => {
+												writePreference("followAppLogin", event.currentTarget.checked);
+											}
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											id: followHintId,
 											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.accountColumnAccount") }),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.accountColumnValue") }),
-												activeRegion === "cn" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.accountColumnCheckin") }) : null,
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {})
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", {
+													id: followLabelId,
+													children: t("row.followAppLogin")
+												}),
+												" ",
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-pref-hint",
+													children: t("row.followAppLoginHint")
+												})
 											]
-										}), status.accounts.map((account) => {
-											const current = status.status === "signed-in" && account.id === status.accountId;
-											const state = accountStatusByRegion[activeRegion][account.id];
-											const error = claimErrorByRegion[activeRegion][account.id];
-											return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-												className: `dsm-trae-account-row${current ? " dsm-trae-account-row-current" : ""}`,
-												role: "row",
-												children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-														className: "dsm-trae-account-who",
-														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-															"aria-hidden": "true",
-															className: "dsm-trae-usage-dot",
-															style: dotStyle(account.selected ? "signed-in" : "signed-out")
-														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-															className: "dsm-trae-account-name",
-															children: [
-																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: account.accountName }),
-																current ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																	className: "dsm-trae-account-badge",
-																	children: t("row.accountCurrentBadge")
-																}) : null,
-																/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-																	className: "dsm-trae-account-meta",
-																	children: [
-																		editionLabel(account.edition),
-																		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-																			"aria-hidden": "true",
-																			children: "·"
-																		}),
-																		sourceLabel(account.source)
-																	]
-																}),
-																error === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																	className: "dsm-trae-account-note",
-																	role: "alert",
-																	children: t("row.checkinError", { message: error })
-																})
-															]
-														})]
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: "dsm-trae-account-worth",
-														children: rowValue(state)
-													}),
-													activeRegion === "cn" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: "dsm-trae-account-checkin-cell",
-														children: checkinControl(account, state)
-													}) : null,
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: "dsm-trae-account-actions",
-														children: current ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-															type: "button",
-															className: "dsm-btn dsm-btn-outline dsm-trae-account-switch",
-															disabled: switchingAccount || settingsScope?.getSnapshot()?.writable !== true,
-															onClick: () => {
-																switchAccount(account.id);
-															},
-															children: switchingAccount ? t("row.accountSwitching") : t("row.accountSwitch")
-														})
-													})
-												]
-											}, account.id);
 										})]
-									}),
-									status.status === "signed-in" && status.alternatives !== void 0 && status.alternatives.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "dsm-trae-usage-alternative",
-										role: "status",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-											className: "dsm-trae-usage-alternative-text",
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+										className: "dsm-trae-pref",
+										title: t(activeRegion === "cn" ? "row.showPointsInMainUiHint" : "row.showPointsInMainUiHintAi"),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											type: "checkbox",
+											checked: settingsEdits.showPointsInMainUi,
+											disabled: settingsScope?.getSnapshot().writable !== true || savingSettings,
+											"aria-describedby": creditsHintId,
+											onChange: (event) => {
+												writePreference("showPointsInMainUi", event.currentTarget.checked);
+											}
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											id: creditsHintId,
 											children: [
-												t("row.creditsExhausted", { account: status.accountName }),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", {
+													id: creditsLabelId,
+													children: t("row.showPointsInMainUi")
+												}),
 												" ",
-												t("row.creditsAlternative", { accounts: status.alternatives.map((alt) => `${alt.accountName}（${t(`row.edition${alt.edition === "cn" ? "Cn" : alt.edition === "sg" ? "Sg" : alt.edition === "solo" ? "Solo" : "SoloSg"}`)}：${formatNumber(alt.workAvailable + alt.generalAvailable)}）`).join("、") })
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-pref-hint",
+													children: t(activeRegion === "cn" ? "row.showPointsInMainUiHint" : "row.showPointsInMainUiHintAi")
+												})
 											]
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											type: "button",
-											className: "dsm-trae-usage-switch-button",
-											disabled: switchingAccount || settingsScope?.getSnapshot()?.writable !== true,
-											onClick: () => {
-												const target = status.alternatives?.[0];
-												if (target !== void 0) switchAccount(target.id);
-											},
-											children: t("row.creditsAlternativeSwitch")
 										})]
-									}) : null,
-									status.status === "signed-in" && status.credits?.expiry !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpiryNotice, {
-										expiry: status.credits.expiry,
-										t,
-										formatNumber,
-										formatDateTime
-									}) : null,
-									status.status === "signed-in" && status.appLogin !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "dsm-trae-usage-alternative",
-										role: "status",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "dsm-trae-usage-alternative-text",
-											children: t("row.appLoginMismatch", {
-												account: status.appLogin.accountName,
-												bound: status.accountName
-											})
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											type: "button",
-											className: "dsm-trae-usage-switch-button",
-											disabled: switchingAccount || settingsScope?.getSnapshot()?.writable !== true,
-											onClick: () => {
-												followAppLogin();
-											},
-											children: t("row.appLoginFollow", { account: status.appLogin.accountName })
-										})]
-									}) : null,
-									rescanNote === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-										className: "dsm-trae-usage-note",
-										role: "status",
-										children: rescanNote
-									})
-								]
-							}),
-							status.status === "signed-in" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-								status.checkin !== void 0 && !status.checkin.enabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "dsm-trae-usage-error",
-									children: t("row.checkinDisabled")
-								}) : null,
-								status.checkinError === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "dsm-trae-usage-error",
-									children: t("row.checkinError", { message: status.checkinError })
+									})]
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-									className: "dsm-trae-models",
-									"aria-label": t("row.modelsTitle"),
+									className: "dsm-trae-accounts",
+									"aria-label": t("row.accountsTitle"),
 									children: [
 										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "dsm-trae-models-head",
+											className: "dsm-trae-accounts-head",
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-												className: "dsm-trae-models-title",
-												children: t("row.modelsTitle")
+												className: "dsm-trae-accounts-title",
+												children: t("row.accountsTitle")
 											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-												className: "dsm-trae-models-summary",
-												children: t("row.modelsSummary", { count: activeEnabledIds.size })
-											})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-												className: "dsm-trae-models-actions",
-												children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-														type: "button",
-														className: "dsm-btn dsm-btn-outline",
-														disabled: busy,
-														onClick: () => {
-															refreshModels();
-														},
-														children: busy ? t("row.modelsRefreshing") : t("row.modelsRefresh")
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-														type: "button",
-														className: "dsm-btn dsm-btn-outline",
-														disabled: busy || testing !== void 0 || activeEnabledIds.size === 0,
-														title: t("row.modelsTestHint"),
-														onClick: () => {
-															testEnabledModels();
-														},
-														children: testing === void 0 ? t("row.modelsTestEnabled") : t("row.modelsTesting", {
-															done: testing.done,
-															total: testing.total
-														})
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-														type: "button",
-														className: "dsm-btn dsm-btn-outline",
-														disabled: busy || testing !== void 0 || visibleModels.length === 0,
-														title: t("row.modelsTestAllHint"),
-														onClick: () => {
-															testAllModels();
-														},
-														children: testing === void 0 ? t("row.modelsTestAll") : t("row.modelsTesting", {
-															done: testing.done,
-															total: testing.total
-														})
-													})
-												]
+												className: "dsm-trae-accounts-hint",
+												children: t("row.accountsHint")
+											})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												className: "dsm-btn dsm-btn-outline",
+												disabled: busy,
+												onClick: () => {
+													rescanAccounts();
+												},
+												children: busy ? t("row.accountsScanning") : t("row.refreshTokens")
 											})]
 										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "dsm-trae-models-hint",
-											children: t("row.modelsTestHint")
-										}),
-										testSummary === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "dsm-trae-models-summary",
-											children: testSummary
-										}),
-										testError === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "dsm-trae-usage-error",
-											role: "alert",
-											children: testError
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											className: "dsm-trae-model-list",
-											children: visibleModels.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-												className: `dsm-trae-model${activeEnabledIds.has(model.id) ? "" : " dsm-trae-model-disabled"}`,
+										status.status !== "signed-in" || status.accounts.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "dsm-trae-usage-account",
+											role: "status",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-usage-account-copy",
 												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-													className: "dsm-trae-model-head",
-													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-														className: "dsm-trae-model-enabled",
-														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-															type: "checkbox",
-															checked: activeEnabledIds.has(model.id),
-															disabled: settingsScope?.getSnapshot().writable !== true || saving,
-															onChange: () => {
-																toggleModel(model.id);
-															}
-														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-															className: "dsm-trae-model-copy",
-															children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-																className: "dsm-trae-model-name",
+													className: "dsm-trae-usage-status",
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														"aria-hidden": "true",
+														className: "dsm-trae-usage-dot",
+														style: dotStyle(status.status)
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
+												}), status.status === "signed-in" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-usage-expiry",
+													children: t("row.tokenExpiry", { expiresAt: formatDateTime(status.tokenExpiresAtMs) })
+												}) : null]
+											})
+										}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: `dsm-trae-account-table${activeRegion === "cn" ? " dsm-trae-account-table-checkin" : ""}`,
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-account-row dsm-trae-account-row-head",
+												role: "row",
+												children: [
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.accountColumnAccount") }),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.accountColumnValue") }),
+													activeRegion === "cn" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.accountColumnCheckin") }) : null,
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {})
+												]
+											}), status.accounts.map((account) => {
+												const current = status.status === "signed-in" && account.id === status.accountId;
+												const state = accountStatusByRegion[activeRegion][account.id];
+												const error = claimErrorByRegion[activeRegion][account.id];
+												return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: `dsm-trae-account-row${current ? " dsm-trae-account-row-current" : ""}`,
+													role: "row",
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															className: "dsm-trae-account-who",
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																"aria-hidden": "true",
+																className: "dsm-trae-usage-dot",
+																style: dotStyle(account.selected ? "signed-in" : "signed-out")
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																className: "dsm-trae-account-name",
 																children: [
-																	model.name,
-																	model.creditMultiplier === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-																		className: "dsm-trae-model-name-rate",
-																		children: ["· x", model.creditMultiplier.toFixed(2)]
+																	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: account.accountName }),
+																	current ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		className: "dsm-trae-account-badge",
+																		children: t("row.accountCurrentBadge")
+																	}) : null,
+																	/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																		className: "dsm-trae-account-meta",
+																		children: [
+																			editionLabel(account.edition),
+																			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+																				"aria-hidden": "true",
+																				children: "·"
+																			}),
+																			sourceLabel(account.source)
+																		]
 																	}),
-																	probeBadge(probeByRegion[activeRegion][model.id], t)
+																	error === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		className: "dsm-trae-account-note",
+																		role: "alert",
+																		children: t("row.checkinError", { message: error })
+																	})
 																]
+															})]
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: "dsm-trae-account-worth",
+															children: rowValue(state)
+														}),
+														activeRegion === "cn" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: "dsm-trae-account-checkin-cell",
+															children: checkinControl(account, state)
+														}) : null,
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: "dsm-trae-account-actions",
+															children: current ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+																type: "button",
+																className: "dsm-btn dsm-btn-outline dsm-trae-account-switch",
+																disabled: switchingAccount || settingsScope?.getSnapshot()?.writable !== true,
+																onClick: () => {
+																	switchAccount(account.id);
+																},
+																children: switchingAccount ? t("row.accountSwitching") : t("row.accountSwitch")
 															})
-														})]
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-														className: "dsm-trae-model-options",
+														})
+													]
+												}, account.id);
+											})]
+										}),
+										status.status === "signed-in" && status.alternatives !== void 0 && status.alternatives.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "dsm-trae-usage-alternative",
+											role: "status",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+												className: "dsm-trae-usage-alternative-text",
+												children: [
+													t("row.creditsExhausted", { account: status.accountName }),
+													" ",
+													t("row.creditsAlternative", { accounts: status.alternatives.map((alt) => `${alt.accountName}（${t(`row.edition${alt.edition === "cn" ? "Cn" : alt.edition === "sg" ? "Sg" : alt.edition === "solo" ? "Solo" : "SoloSg"}`)}：${formatNumber(alt.workAvailable + alt.generalAvailable)}）`).join("、") })
+												]
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												className: "dsm-trae-usage-switch-button",
+												disabled: switchingAccount || settingsScope?.getSnapshot()?.writable !== true,
+												onClick: () => {
+													const target = status.alternatives?.[0];
+													if (target !== void 0) switchAccount(target.id);
+												},
+												children: t("row.creditsAlternativeSwitch")
+											})]
+										}) : null,
+										status.status === "signed-in" && status.credits?.expiry !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpiryNotice, {
+											expiry: status.credits.expiry,
+											t,
+											formatNumber,
+											formatDateTime
+										}) : null,
+										status.status === "signed-in" && status.appLogin !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "dsm-trae-usage-alternative",
+											role: "status",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "dsm-trae-usage-alternative-text",
+												children: t("row.appLoginMismatch", {
+													account: status.appLogin.accountName,
+													bound: status.accountName
+												})
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												className: "dsm-trae-usage-switch-button",
+												disabled: switchingAccount || settingsScope?.getSnapshot()?.writable !== true,
+												onClick: () => {
+													followAppLogin();
+												},
+												children: t("row.appLoginFollow", { account: status.appLogin.accountName })
+											})]
+										}) : null,
+										rescanNote === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+											className: "dsm-trae-usage-note",
+											role: "status",
+											children: rescanNote
+										})
+									]
+								}),
+								status.status === "signed-in" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+									status.checkin !== void 0 && !status.checkin.enabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "dsm-trae-usage-error",
+										children: t("row.checkinDisabled")
+									}) : null,
+									status.checkinError === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "dsm-trae-usage-error",
+										children: t("row.checkinError", { message: status.checkinError })
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+										className: "dsm-trae-models",
+										"aria-label": t("row.modelsTitle"),
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-models-head",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+													className: "dsm-trae-models-title",
+													children: t("row.modelsTitle")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+													className: "dsm-trae-models-summary",
+													children: t("row.modelsSummary", { count: activeEnabledIds.size })
+												})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: "dsm-trae-models-actions",
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+															type: "button",
+															className: "dsm-btn dsm-btn-outline",
+															disabled: busy,
+															onClick: () => {
+																refreshModels();
+															},
+															children: busy ? t("row.modelsRefreshing") : t("row.modelsRefresh")
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+															type: "button",
+															className: "dsm-btn dsm-btn-outline",
+															disabled: busy || testing !== void 0 || activeEnabledIds.size === 0,
+															title: t("row.modelsTestHint"),
+															onClick: () => {
+																testEnabledModels();
+															},
+															children: testing === void 0 ? t("row.modelsTestEnabled") : t("row.modelsTesting", {
+																done: testing.done,
+																total: testing.total
+															})
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+															type: "button",
+															className: "dsm-btn dsm-btn-outline",
+															disabled: busy || testing !== void 0 || visibleModels.length === 0,
+															title: t("row.modelsTestAllHint"),
+															onClick: () => {
+																testAllModels();
+															},
+															children: testing === void 0 ? t("row.modelsTestAll") : t("row.modelsTesting", {
+																done: testing.done,
+																total: testing.total
+															})
+														})
+													]
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "dsm-trae-models-hint",
+												children: t("row.modelsTestHint")
+											}),
+											testSummary === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "dsm-trae-models-summary",
+												children: testSummary
+											}),
+											testError === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "dsm-trae-usage-error",
+												role: "alert",
+												children: testError
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: "dsm-trae-model-list",
+												children: visibleModels.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: `dsm-trae-model${activeEnabledIds.has(model.id) ? "" : " dsm-trae-model-disabled"}`,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: "dsm-trae-model-head",
 														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-															className: "dsm-trae-model-image",
+															className: "dsm-trae-model-enabled",
 															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 																type: "checkbox",
-																checked: rowAcceptsImage(model),
-																disabled: rowImageIsAutomatic(model) || settingsScope?.getSnapshot().writable !== true || saving,
-																title: rowImageIsAutomatic(model) ? t("row.modelImageAuto") : void 0,
-																onChange: () => {
-																	toggleImage(model.id);
-																}
-															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.modelImage") })]
-														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
-															className: "dsm-trae-context-budget",
-															"aria-label": t("row.contextBudget"),
-															children: [model.maxContextWindow !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-																type: "radio",
-																name: `context-${model.id}`,
-																checked: activeContextBudgets[model.id] !== model.maxContextWindow,
+																checked: activeEnabledIds.has(model.id),
 																disabled: settingsScope?.getSnapshot().writable !== true || saving,
 																onChange: () => {
-																	setContextBudget(model.id, model.contextWindow);
-																}
-															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatCapacity(model.contextWindow, t("row.modelUnknown")) })] }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-																type: "radio",
-																name: `context-${model.id}`,
-																checked: model.maxContextWindow === void 0 || activeContextBudgets[model.id] === model.maxContextWindow,
-																disabled: model.maxContextWindow === void 0 || settingsScope?.getSnapshot().writable !== true || saving,
-																onChange: () => {
-																	setContextBudget(model.id, model.maxContextWindow);
+																	toggleModel(model.id);
 																}
-															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatCapacity(model.maxContextWindow ?? model.contextWindow, t("row.modelUnknown")) })] })]
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																className: "dsm-trae-model-copy",
+																children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																	className: "dsm-trae-model-name",
+																	children: [
+																		model.name,
+																		model.creditMultiplier === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																			className: "dsm-trae-model-name-rate",
+																			children: ["· x", model.creditMultiplier.toFixed(2)]
+																		}),
+																		probeBadge(probeByRegion[activeRegion][model.id], t)
+																	]
+																})
+															})]
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+															className: "dsm-trae-model-options",
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+																className: "dsm-trae-model-image",
+																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+																	type: "checkbox",
+																	checked: rowAcceptsImage(model),
+																	disabled: rowImageIsAutomatic(model) || settingsScope?.getSnapshot().writable !== true || saving,
+																	title: rowImageIsAutomatic(model) ? t("row.modelImageAuto") : void 0,
+																	onChange: () => {
+																		toggleImage(model.id);
+																	}
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.modelImage") })]
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+																className: "dsm-trae-context-budget",
+																"aria-label": t("row.contextBudget"),
+																children: [model.maxContextWindow !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+																	type: "radio",
+																	name: `context-${model.id}`,
+																	checked: activeContextBudgets[model.id] !== model.maxContextWindow,
+																	disabled: settingsScope?.getSnapshot().writable !== true || saving,
+																	onChange: () => {
+																		setContextBudget(model.id, model.contextWindow);
+																	}
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatCapacity(model.contextWindow, t("row.modelUnknown")) })] }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+																	type: "radio",
+																	name: `context-${model.id}`,
+																	checked: model.maxContextWindow === void 0 || activeContextBudgets[model.id] === model.maxContextWindow,
+																	disabled: model.maxContextWindow === void 0 || settingsScope?.getSnapshot().writable !== true || saving,
+																	onChange: () => {
+																		setContextBudget(model.id, model.maxContextWindow);
+																	}
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatCapacity(model.maxContextWindow ?? model.contextWindow, t("row.modelUnknown")) })] })]
+															})]
 														})]
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: "dsm-trae-model-meta",
+														children: [
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.modelContext", { context: formatCapacity(model.maxContextWindow ?? model.contextWindow, t("row.modelUnknown")) }) }),
+															model.maxTokens === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.modelOutput", { output: formatCapacity(model.maxTokens, t("row.modelUnknown")) }) }),
+															model.reasoning === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.modelReasoning", { efforts: model.reasoning.supported.join(" / ") }) })
+														]
+													})]
+												}, model.id))
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "dsm-trae-model-capability-note",
+												children: t("row.modelCapabilityPending")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-model-actions",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+													className: "dsm-trae-usage-cheer",
+													href: TRAE_GITHUB_URL,
+													target: "_blank",
+													rel: "noopener noreferrer",
+													children: [t("row.cheer"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "dsm-trae-usage-cheer-star",
+														"aria-hidden": "true",
+														children: "★"
 													})]
 												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-													className: "dsm-trae-model-meta",
-													children: [
-														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.modelContext", { context: formatCapacity(model.maxContextWindow ?? model.contextWindow, t("row.modelUnknown")) }) }),
-														model.maxTokens === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.modelOutput", { output: formatCapacity(model.maxTokens, t("row.modelUnknown")) }) }),
-														model.reasoning === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.modelReasoning", { efforts: model.reasoning.supported.join(" / ") }) })
-													]
+													className: "dsm-trae-model-actions-buttons",
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+														type: "button",
+														className: "dsm-btn dsm-btn-outline",
+														disabled: !dirty || saving,
+														onClick: discardModels,
+														children: t("row.discard")
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+														type: "button",
+														className: "dsm-btn dsm-btn-primary",
+														disabled: !dirty || saving || activeEnabledIds.size === 0,
+														onClick: () => {
+															saveModels();
+														},
+														children: saving ? t("row.saving") : t("row.save")
+													})]
 												})]
-											}, model.id))
-										}),
+											})
+										]
+									})
+								] }) : null,
+								status.status === "signed-out" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dsm-trae-usage-text",
+									children: status.message ?? t("row.signedOutHint")
+								}), status.searched && status.searched.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+									className: "dsm-trae-searched",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", { children: [
+											t("row.searchedTitle"),
+											" (",
+											status.searched.length,
+											")"
+										] }),
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "dsm-trae-model-capability-note",
-											children: t("row.modelCapabilityPending")
+											className: "dsm-trae-searched-hint",
+											children: t("row.searchedHint")
 										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "dsm-trae-model-actions",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-												className: "dsm-trae-usage-cheer",
-												href: TRAE_GITHUB_URL,
-												target: "_blank",
-												rel: "noopener noreferrer",
-												children: [t("row.cheer"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: "dsm-trae-usage-cheer-star",
-													"aria-hidden": "true",
-													children: "★"
-												})]
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-												className: "dsm-trae-model-actions-buttons",
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-													type: "button",
-													className: "dsm-btn dsm-btn-outline",
-													disabled: !dirty || saving,
-													onClick: discardModels,
-													children: t("row.discard")
-												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-													type: "button",
-													className: "dsm-btn dsm-btn-primary",
-													disabled: !dirty || saving || activeEnabledIds.size === 0,
-													onClick: () => {
-														saveModels();
-													},
-													children: saving ? t("row.saving") : t("row.save")
-												})]
-											})]
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+											className: "dsm-trae-searched-list",
+											children: status.searched.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: item.path }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: "dsm-trae-searched-reason",
+												children: [
+													t(item.source === "cli" ? "row.sourceCli" : "row.sourceDesktop"),
+													" · ",
+													t(item.reason === "missing" ? "row.reasonMissing" : item.reason === "unreadable" ? "row.reasonUnreadable" : "row.reasonInvalid")
+												]
+											})] }, `${item.source}:${item.path}`))
 										})
 									]
-								})
-							] }) : null,
-							status.status === "signed-out" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "dsm-trae-usage-text",
-								children: status.message ?? t("row.signedOutHint")
-							}), status.searched && status.searched.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-								className: "dsm-trae-searched",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", { children: [
-										t("row.searchedTitle"),
-										" (",
-										status.searched.length,
-										")"
-									] }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-										className: "dsm-trae-searched-hint",
-										children: t("row.searchedHint")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-										className: "dsm-trae-searched-list",
-										children: status.searched.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: item.path }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: "dsm-trae-searched-reason",
-											children: [
-												t(item.source === "cli" ? "row.sourceCli" : "row.sourceDesktop"),
-												" · ",
-												t(item.reason === "missing" ? "row.reasonMissing" : item.reason === "unreadable" ? "row.reasonUnreadable" : "row.reasonInvalid")
-											]
-										})] }, `${item.source}:${item.path}`))
-									})
-								]
-							}) : null] }) : null,
-							status.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "dsm-trae-usage-error",
-								children: status.message
-							}) : null
-						]
-					}) : null
-				})]
+								}) : null] }) : null,
+								status.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dsm-trae-usage-error",
+									children: status.message
+								}) : null
+							]
+						}) : null
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BusyOverlay, {
+						visible: saving || savingSettings,
+						message: t("row.veilSaving")
+					})
+				]
 			});
 		}
 		//#endregion
@@ -3029,6 +3151,7 @@ window.__ModuleLoader__.load({
 			"row.discard": "Discard changes",
 			"row.save": "Save",
 			"row.saving": "Saving…",
+			"row.veilSaving": "Saving changes…",
 			"row.modelContext": "Max context {context}",
 			"row.contextBudget": "DSH context budget",
 			"row.modelOutput": "Output {output}",
@@ -3170,6 +3293,7 @@ window.__ModuleLoader__.load({
 			"row.discard": "放弃修改",
 			"row.save": "保存",
 			"row.saving": "保存中…",
+			"row.veilSaving": "正在保存更改…",
 			"row.modelContext": "最大上下文 {context}",
 			"row.contextBudget": "DSH 上下文预算",
 			"row.modelOutput": "最大输出 {output}",