dsh-connect-trae 4.2.0 → 4.3.0

package/lib/client.js

@@ -18,6 +18,11 @@ window.__ModuleLoader__.load({
 		function regionOfPanel(panel) {
 			return panel === "ai" ? "ai" : "cn";
 		}
+		/** The provider id a panel publishes. */
+		function providerOfPanel(panel) {
+			if (panel === "enterprise") return "trae-enterprise";
+			return panel === "ai" ? "trae-global" : "trae";
+		}
 		//#endregion
 		//#region src/status-paths.ts
 		/** Plugin-owned usage endpoint consumed by its browser half. */
@@ -556,6 +561,45 @@ window.__ModuleLoader__.load({
 .dsm-trae-tab-switch{flex:none;margin-left:auto;padding-left:10px;border-left:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.24))}
 .dsm-trae-tab-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:baseline}
 .dsm-trae-tab-hint{margin:0;padding:0 2px;color:var(--dsw-alias-label-tertiary,#999);font-size:12px;line-height:18px}
+/* SECTION TABS: the card's own top-level split (account / models / diagnostics).
+ *
+ * Deliberately NOT the boxed chips above. Those are the REGION scope — a
+ * three-way choice of which PROVIDER this whole card is about, each chip
+ * carrying its own on/off switch — while these are panels of ONE document, the
+ * shape a reader already knows from the app's own settings window. Two rows of
+ * boxes would read as one six-way choice.
+ *
+ * The hidden ATTRIBUTE on each panel is what does the work: an inactive panel
+ * stays MOUNTED, so switching back does not refetch, a half-filled model draft
+ * survives the trip, and the account pool keeps its log. It also takes the
+ * inactive panel out of the accessibility tree, which is exactly what
+ * role="tabpanel" wants — unlike display:none reached by a CSS class, the user
+ * agent's own rule for [hidden] cannot be overridden by a later declaration. */
+.dsm-trae-panels{display:flex;align-items:stretch;gap:2px;margin:4px 0 0;border-bottom:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.24))}
+.dsm-trae-panel-tab{appearance:none;font:inherit;cursor:pointer;border:0;background:transparent;padding:7px 11px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--dsw-alias-label-tertiary,#999);font-size:13px;font-weight:600;line-height:20px;white-space:nowrap;transition:color .15s,border-color .15s}
+.dsm-trae-panel-tab:hover:not(.dsm-trae-panel-tab-active){color:var(--dsw-alias-label-primary,#e6e6e6)}
+.dsm-trae-panel-tab:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#5686fe);outline-offset:1px}
+.dsm-trae-panel-tab-active{color:var(--dsw-alias-label-primary,#e6e6e6);border-bottom-color:var(--dsw-alias-brand-primary,#5686fe)}
+/* No top margin of its own: the strip above already carries a border, and the
+   card's 16px stack gap would double the separation. */
+.dsm-trae-panel{margin-top:0}
+/* DIAGNOSTICS: a two-column fact table rather than prose. Each row is one thing
+ * the card actually READ, so a bug report can quote a line instead of
+ * paraphrasing the UI. No control lives here on purpose — a diagnostics panel
+ * that can change settings is a settings panel with a worse name. */
+.dsm-trae-diag{display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-l2,#36373b);border-radius:10px;overflow:hidden;background:var(--dsw-alias-bg-layer-2,#232529)}
+.dsm-trae-diag-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:8px 12px}
+.dsm-trae-diag-row+.dsm-trae-diag-row{border-top:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.24))}
+.dsm-trae-diag-label{flex:none;color:var(--dsw-alias-label-tertiary,#999);font-size:12px;line-height:18px}
+.dsm-trae-diag-value{min-width:0;color:var(--dsw-alias-label-primary,#e6e6e6);font-size:12px;line-height:18px;text-align:right;overflow-wrap:anywhere}
+.dsm-trae-diag-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+/* A failure line, in the same warn tone the card already uses for an expiring
+   credit — NOT a hand-rolled amber. The token set the card asks DSH for is
+   audited by the card-styles spec (every name must be one the host actually
+   defines), so this deliberately names state-warn-primary rather than the
+   sibling card's label-caution, which this suite has never verified. */
+.dsm-trae-diag-bad{color:var(--dsw-alias-state-warn-primary,#b45309)}
+.dsm-trae-diag-hint{margin:10px 0 0;color:var(--dsw-alias-label-tertiary,#999);font-size:12px;line-height:18px}
 .dsm-trae-credits-unavailable{margin:10px 0 0;padding:10px 12px;border:1px solid var(--dsw-alias-border-l2,#3a3d45);border-radius:10px;color:var(--dsw-alias-label-secondary,#c6c9d0);font-size:12px;line-height:18px;background:var(--dsw-alias-bg-layer-3,#2a2c33)}
 .dsm-trae-account-value-muted{color:var(--dsw-alias-label-secondary,#c6c9d0);font-size:12px}
 .dsm-trae-tab-off-notice{margin:0;padding:10px 12px;border:1px solid var(--dsw-alias-border-l2,#3a3d45);border-radius:10px;color:var(--dsw-alias-label-secondary,#c6c9d0);font-size:12px;line-height:18px;background:var(--dsw-alias-bg-layer-3,#2a2c33)}
@@ -738,6 +782,17 @@ window.__ModuleLoader__.load({
 .dsm-trae-models-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
 .dsm-trae-models-title{margin:0;color:var(--dsw-alias-label-primary,#e6e6e6);font-size:14px;font-weight:600;line-height:20px}
 .dsm-trae-models-summary{margin:2px 0 0;color:var(--dsw-alias-label-tertiary,#999);font-size:12px;line-height:18px}
+/* EVERY model is on the page — no inner scroller, no max-height.
+ *
+ * A capped list with its own scrollbar was tried and rejected by the user: it
+ * turned a settings section into a little window that has to be scrolled inside
+ * a page that already scrolls, and put the models a user is looking for behind a
+ * gesture that does not match the rest of the card. The section is allowed to be
+ * as tall as the catalog is; the card's own page scroll is the only scroll.
+ *
+ * overflow:hidden is for the rounded border only (so the row hairlines cannot
+ * paint outside the radius). It is deliberately NOT auto: nothing here clips
+ * content vertically. */
 .dsm-trae-model-list{display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-l2,#36373b);border-radius:10px;overflow:hidden}
 .dsm-trae-model{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding:10px 12px;background:var(--dsw-alias-bg-layer-2,#232529);transition:opacity .16s}
 .dsm-trae-model-disabled{opacity:.55}
@@ -2928,6 +2983,418 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/display.ts
+		/** A group-separated integer, in the reader's own locale. */
+		function formatNumber(value) {
+			return new Intl.NumberFormat(void 0, {
+				minimumFractionDigits: 0,
+				maximumFractionDigits: 0
+			}).format(value);
+		}
+		/** A date and time, in the reader's own locale. */
+		function formatDateTime(value) {
+			return new Intl.DateTimeFormat(void 0, {
+				year: "numeric",
+				month: "2-digit",
+				day: "2-digit",
+				hour: "2-digit",
+				minute: "2-digit"
+			}).format(new Date(value));
+		}
+		/**
+		* The colour of a status dot, as an inline style.
+		*
+		* Inline rather than a class because the colour IS the value (signed-in / error
+		* / signed-out); a class per state would be three names that say the same thing.
+		*/
+		function dotStyle(status) {
+			return { background: status === "signed-in" ? "var(--dsw-alias-state-success-primary, #22a06b)" : status === "error" ? "var(--dsw-alias-state-error-primary, #d92d20)" : "var(--dsw-alias-label-dimmed, #9aa0a6)" };
+		}
+		/** How close a refresh token must be to lapsing before the card warns, in days. */
+		const REFRESH_WARN_DAYS = 30;
+		/**
+		* The refresh-token warning for one account, or undefined when there is nothing
+		* worth saying.
+		*
+		* The access token renews itself every few minutes, so its own expiry answers
+		* "when does this need attention" with "never, until the refresh token lapses".
+		* The refresh token is therefore the only honest countdown on this card, and it
+		* has to be shown BEFORE it runs out: once it lapses the plugin cannot renew at
+		* all and the only recovery is signing in to Trae again, which a user who has
+		* been reading "auto-renewal" for months has no reason to expect.
+		*
+		* Three tones, matching the credit-expiry notice: `lapsed` (renewal already
+		* dead), `soon` (inside the warning window), and nothing otherwise — a healthy
+		* token must not add a line to every account row forever.
+		*/
+		function refreshTokenWarning(expiresAtMs, nowMs, t, formatTime) {
+			if (expiresAtMs === void 0) return void 0;
+			const text = formatTime(expiresAtMs);
+			if (expiresAtMs <= nowMs) return {
+				tone: "lapsed",
+				text: t("row.refreshTokenLapsed", { expiresAt: text })
+			};
+			const days = Math.ceil((expiresAtMs - nowMs) / 864e5);
+			if (days > REFRESH_WARN_DAYS) return void 0;
+			return {
+				tone: "soon",
+				text: t("row.refreshTokenExpiring", {
+					expiresAt: text,
+					days
+				})
+			};
+		}
+		//#endregion
+		//#region src/client/TraeAccountPanel.tsx
+		/**
+		* A warning that credit is about to lapse.
+		*
+		* The balance alone cannot express this: a pack lapsing in an hour and one
+		* lapsing next month both render as "150", so a user watching only the total
+		* loses the first one silently. The notice names the amount, the pack count and
+		* the soonest expiry, and escalates 7d → 24h → already-lapsed.
+		*
+		* Renders nothing when the upstream reported no end times at all — absence of
+		* expiry data is not evidence that nothing lapses, so the component stays silent
+		* rather than reassuring.
+		*/
+		function ExpiryNotice({ expiry, t }) {
+			const { expired, within24h, within7d } = expiry;
+			let message;
+			let soonest;
+			let tone;
+			if (within24h.packs > 0) {
+				message = t("row.expiryWarningSoon", {
+					total: formatNumber(within24h.total),
+					packs: String(within24h.packs)
+				});
+				soonest = within24h.earliestExpiresAtMs;
+				tone = "dsm-trae-expiry-soon";
+			} else if (within7d.packs > 0) {
+				message = t("row.expiryWarningWeek", {
+					total: formatNumber(within7d.total),
+					packs: String(within7d.packs)
+				});
+				soonest = within7d.earliestExpiresAtMs;
+				tone = "dsm-trae-expiry-week";
+			} else if (expired.packs > 0) {
+				message = t("row.expiryWarningLapsed", {
+					total: formatNumber(expired.total),
+					packs: String(expired.packs)
+				});
+				tone = "dsm-trae-expiry-lapsed";
+			} else return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `dsm-trae-expiry ${tone}`,
+				role: "status",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: message }), soonest === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsm-trae-expiry-detail",
+					children: t("row.expiryEarliest", { time: formatDateTime(soonest) })
+				})]
+			});
+		}
+		/** The CN check-in cell for one row: an outcome once there is nothing left to do. */
+		function ClaimCell({ claim, onClaim, t }) {
+			if (!claim.claimable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsm-trae-account-checkin-state",
+				children: claim.settled === "claimed" ? t("row.poolCheckedIn") : t("row.poolDeviceUsed")
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "dsm-trae-account-checkin",
+				disabled: claim.disabled,
+				title: claim.title,
+				onClick: onClaim,
+				children: claim.label
+			});
+		}
+		/**
+		* The account section: preferences, the roster, the pool, and every notice about
+		* the credential.
+		*
+		* Everything here commits ON THE CLICK (the preference boxes write themselves,
+		* the check-in claims immediately, the pool saves through its own footer). That
+		* is precisely why this section has no 「保存」 of its own — the model catalog,
+		* which does, lives in its own section.
+		*/
+		function TraeAccountPanel({ t, settingsScope, panel, status, statusLabel, credentialRegionIsAi, regionOn, showPointsInMainUi, onToggleShowPoints, creditPosition, onCreditPositionChange, savingPreferences, creditsLabelId, creditsHintId, rows, busy, rescanNote, onRescan, switchingAccount, onSwitchAccount, onClaim, onTransferChanged, poolDetails, poolClaims, models, deviceClaimed, onPoolChanged, onPoolRefresh, creditsUnavailable, creditsExpiry, alternatives, onSwitchToAlternative }) {
+			const writable = settingsScope?.getSnapshot().writable === true;
+			const signedIn = status.status === "signed-in";
+			const accounts = signedIn ? status.accounts : [];
+			const pool = signedIn ? status.pool : void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__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(credentialRegionIsAi ? "row.showPointsInMainUiHintAi" : "row.showPointsInMainUiHint"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "checkbox",
+							className: "dsm-trae-pref-check",
+							checked: showPointsInMainUi,
+							disabled: !writable || savingPreferences,
+							"aria-describedby": creditsHintId,
+							onChange: (event) => {
+								onToggleShowPoints(event.currentTarget.checked);
+							}
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "dsm-trae-pref-copy",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsm-trae-pref-label",
+								id: creditsLabelId,
+								children: t("row.showPointsInMainUi")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsm-trae-pref-hint",
+								id: creditsHintId,
+								children: t(credentialRegionIsAi ? "row.showPointsInMainUiHintAi" : "row.showPointsInMainUiHint")
+							})]
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						className: "dsm-trae-pref dsm-trae-credit-position-pref",
+						title: t("row.creditPositionHint"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "dsm-trae-pref-copy",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "dsm-trae-pref-lead",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsm-trae-pref-label",
+									children: t("row.creditPositionLabel")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+									className: "dsm-trae-credit-position",
+									value: regionOn ? creditPosition : "composer",
+									disabled: !regionOn || !writable || savingPreferences,
+									"aria-label": t("row.creditPositionAria", { region: panel === "cn" ? t("row.tabCn") : panel === "enterprise" ? t("row.tabEnterprise") : t("row.tabAi") }),
+									onChange: (event) => {
+										onCreditPositionChange(event.currentTarget.value === "stats" ? "stats" : "composer");
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "composer",
+										children: t("row.creditPositionComposer")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "stats",
+										children: t("row.creditPositionStats")
+									})]
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsm-trae-pref-hint",
+								children: t("row.creditPositionHint")
+							})]
+						})
+					})]
+				}),
+				pool !== void 0 ? null : /* @__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: onRescan,
+								children: busy ? t("row.accountsScanning") : t("row.refreshTokens")
+							})]
+						}),
+						!signedIn || 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", {
+										"aria-hidden": "true",
+										className: "dsm-trae-usage-dot",
+										style: dotStyle(status.status)
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: statusLabel })]
+								}), signedIn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsm-trae-usage-expiry",
+									children: t("row.tokenExpiry", { expiresAt: formatDateTime(status.tokenExpiresAtMs) })
+								}) : null]
+							})
+						}) : null,
+						status.status !== "error" && rows.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: `dsm-trae-account-table${credentialRegionIsAi ? "" : " 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") }),
+									credentialRegionIsAi ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.accountColumnCheckin") }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {})
+								]
+							}), rows.map((row) => {
+								const warning = refreshTokenWarning(row.refreshExpiresAtMs, Date.now(), t, formatDateTime);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: `dsm-trae-account-row${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(row.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: row.accountName }),
+													row.current ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "dsm-trae-account-badge",
+														children: t("row.accountCurrentBadge")
+													}) : null,
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "dsm-trae-account-meta",
+														children: row.meta
+													}),
+													warning === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: `dsm-trae-refresh-warn dsm-trae-refresh-warn-${warning.tone}`,
+														role: "status",
+														children: warning.text
+													}),
+													row.error === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "dsm-trae-account-note",
+														role: "alert",
+														children: row.error
+													})
+												]
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dsm-trae-account-worth",
+											children: row.value
+										}),
+										credentialRegionIsAi ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dsm-trae-account-checkin-cell",
+											children: row.claim === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClaimCell, {
+												claim: row.claim,
+												t,
+												onClaim: () => {
+													onClaim(row.id);
+												}
+											})
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dsm-trae-account-actions",
+											children: row.current ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												className: "dsm-btn dsm-btn-outline dsm-trae-account-switch",
+												disabled: switchingAccount || !writable,
+												onClick: () => {
+													onSwitchAccount(row.id);
+												},
+												children: switchingAccount ? t("row.accountSwitching") : t("row.accountSwitch")
+											})
+										})
+									]
+								}, row.id);
+							})]
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountTransfer, {
+							t,
+							region: panel === "ai" ? "ai" : "cn",
+							accounts: accounts.map((account) => ({
+								id: account.id,
+								accountName: account.accountName
+							})),
+							onChanged: onTransferChanged
+						})
+					]
+				}),
+				signedIn && creditsUnavailable === "enterprise" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dsm-trae-credits-unavailable",
+					role: "note",
+					children: t("row.enterpriseCreditsNotice")
+				}) : null,
+				signedIn && alternatives !== void 0 && 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: 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 || !writable,
+						onClick: () => {
+							const [target] = alternatives;
+							if (target !== void 0) onSwitchToAlternative(target.id);
+						},
+						children: t("row.creditsAlternativeSwitch")
+					})]
+				}) : null,
+				signedIn && creditsExpiry !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpiryNotice, {
+					expiry: creditsExpiry,
+					t
+				}) : null,
+				rescanNote === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dsm-trae-usage-note",
+					role: "status",
+					children: rescanNote
+				}),
+				signedIn ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					pool !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountPool, {
+						panel,
+						pool,
+						models,
+						t,
+						settingsScope,
+						topActions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsm-btn dsm-btn-outline",
+							disabled: busy,
+							onClick: onRescan,
+							children: busy ? t("row.accountsScanning") : t("row.poolRescan")
+						}),
+						tools: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsm-trae-pool-tool-row",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsm-trae-pool-tool-label",
+								children: t("row.poolToolsLabel")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountTransfer, {
+								t,
+								hideLabel: true,
+								region: panel === "ai" ? "ai" : "cn",
+								accounts: accounts.map((account) => ({
+									id: account.id,
+									accountName: account.accountName
+								})),
+								onChanged: onTransferChanged
+							})]
+						}),
+						details: poolDetails,
+						claims: pool.checkinSupported === true ? poolClaims : void 0,
+						onClaim,
+						deviceClaimed,
+						onBind: onSwitchAccount,
+						bindingBusy: switchingAccount,
+						onChanged: onPoolChanged,
+						onRefresh: onPoolRefresh
+					}) : null,
+					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 })
+					})
+				] }) : null
+			] });
+		}
+		//#endregion
 		//#region src/client/plan-text.ts
 		/**
 		* The international region's "what plan is this account on" text.
@@ -3023,55 +3490,6 @@ window.__ModuleLoader__.load({
 				document.head.appendChild(styleTag);
 			}
 		}
-		function formatNumber(value) {
-			return new Intl.NumberFormat(void 0, {
-				minimumFractionDigits: 0,
-				maximumFractionDigits: 0
-			}).format(value);
-		}
-		function formatDateTime(value) {
-			return new Intl.DateTimeFormat(void 0, {
-				year: "numeric",
-				month: "2-digit",
-				day: "2-digit",
-				hour: "2-digit",
-				minute: "2-digit"
-			}).format(new Date(value));
-		}
-		/** How close a refresh token must be to lapsing before the card warns, in days. */
-		const REFRESH_WARN_DAYS = 30;
-		/**
-		* The refresh-token warning for one account, or undefined when there is nothing
-		* worth saying.
-		*
-		* The access token renews itself every few minutes, so its own expiry answers
-		* "when does this need attention" with "never, until the refresh token lapses".
-		* The refresh token is therefore the only honest countdown on this card, and it
-		* has to be shown BEFORE it runs out: once it lapses the plugin cannot renew at
-		* all and the only recovery is signing in to Trae again, which a user who has
-		* been reading "auto-renewal" for months has no reason to expect.
-		*
-		* Three tones, matching the credit-expiry notice: `lapsed` (renewal already
-		* dead), `soon` (inside the warning window), and nothing otherwise — a healthy
-		* token must not add a line to every account row forever.
-		*/
-		function refreshTokenWarning(expiresAtMs, nowMs, t, formatTime) {
-			if (expiresAtMs === void 0) return void 0;
-			const text = formatTime(expiresAtMs);
-			if (expiresAtMs <= nowMs) return {
-				tone: "lapsed",
-				text: t("row.refreshTokenLapsed", { expiresAt: text })
-			};
-			const days = Math.ceil((expiresAtMs - nowMs) / 864e5);
-			if (days > REFRESH_WARN_DAYS) return void 0;
-			return {
-				tone: "soon",
-				text: t("row.refreshTokenExpiring", {
-					expiresAt: text,
-					days
-				})
-			};
-		}
 		function formatCapacity(value, unknown) {
 			if (value === void 0) return unknown;
 			if (value >= 1e6 && value % 1e6 === 0) return `${value / 1e6}M`;
@@ -3167,56 +3585,6 @@ window.__ModuleLoader__.load({
 				})
 			});
 		}
-		function dotStyle(status) {
-			return { background: status === "signed-in" ? "var(--dsw-alias-state-success-primary, #22a06b)" : status === "error" ? "var(--dsw-alias-state-error-primary, #d92d20)" : "var(--dsw-alias-label-dimmed, #9aa0a6)" };
-		}
-		/**
-		* A warning that credit is about to lapse.
-		*
-		* The balance alone cannot express this: a pack lapsing in an hour and one
-		* lapsing next month both render as "150", so a user watching only the total
-		* loses the first one silently. The notice names the amount, the pack count and
-		* the soonest expiry, and escalates 7d → 24h → already-lapsed.
-		*
-		* Renders nothing when the upstream reported no end times at all — absence of
-		* expiry data is not evidence that nothing lapses, so the component stays
-		* silent rather than reassuring.
-		*/
-		function ExpiryNotice({ expiry, t, formatNumber: fmt, formatDateTime: fmtTime }) {
-			const { expired, within24h, within7d } = expiry;
-			let message;
-			let soonest;
-			let tone;
-			if (within24h.packs > 0) {
-				message = t("row.expiryWarningSoon", {
-					total: fmt(within24h.total),
-					packs: String(within24h.packs)
-				});
-				soonest = within24h.earliestExpiresAtMs;
-				tone = "dsm-trae-expiry-soon";
-			} else if (within7d.packs > 0) {
-				message = t("row.expiryWarningWeek", {
-					total: fmt(within7d.total),
-					packs: String(within7d.packs)
-				});
-				soonest = within7d.earliestExpiresAtMs;
-				tone = "dsm-trae-expiry-week";
-			} else if (expired.packs > 0) {
-				message = t("row.expiryWarningLapsed", {
-					total: fmt(expired.total),
-					packs: String(expired.packs)
-				});
-				tone = "dsm-trae-expiry-lapsed";
-			} else return null;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: `dsm-trae-expiry ${tone}`,
-				role: "status",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: message }), soonest === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "dsm-trae-expiry-detail",
-					children: t("row.expiryEarliest", { time: fmtTime(soonest) })
-				})]
-			});
-		}
 		/** Render Trae sign-in state and the total usage summary as one expandable card. */
 		function TraeUsageCard({ t, settingsScope, view }) {
 			if (t === void 0) throw new Error("Trae usage card requires its translation function");
@@ -3224,6 +3592,27 @@ window.__ModuleLoader__.load({
 			/** The region whose tab is on screen; each tab is its own provider stack. */
 			const [activeRegion, setActiveRegion] = (0, react.useState)("cn");
 			/**
+			* Which of the card's three sections is on screen (learned from the sibling
+			* `dsh-connect-workbuddy` card, whose settings page split for the same
+			* reason).
+			*
+			* The card had grown into one long column mixing two unrelated jobs —
+			* operating an account (who serves, how much is left, the check-in, the pool)
+			* and editing the catalog (which models, image input, context budget) — and
+			* the two do not even commit the same way: an account change lands on the
+			* click, a catalog change is a draft until 「保存」. One column therefore put
+			* the save button screens away from what it saves.
+			*
+			* The region row above stays the SCOPE (which provider this whole card is
+			* about); these tabs are the sections of that one scope. Only the ACTIVE
+			* section is visible, and the others stay MOUNTED through the `hidden`
+			* attribute, so switching back never refetches, a half-filled model draft
+			* survives the trip, and the pool keeps its log. `hidden` also takes the
+			* inactive panel out of the accessibility tree, which is exactly what
+			* `role="tabpanel"` wants.
+			*/
+			const [panel, setPanel] = (0, react.useState)("accounts");
+			/**
 			* Last-known usage per region, so tab dots survive tab switches.
 			*
 			* A region is ABSENT until something has been read for it (issue #77). It used
@@ -3571,6 +3960,16 @@ window.__ModuleLoader__.load({
 				accounts: []
 			};
 			/**
+			* Whether the ACTIVE panel has a usable sign-in.
+			*
+			* The section tabs render only here: a signed-out card is one screen of
+			* instructions ("sign in once in the Trae app" plus the probed paths), and
+			* splitting that into panels would hide the only thing it has to say behind a
+			* tab the user cannot see the point of. The sibling WorkBuddy card made the
+			* same call for the same reason.
+			*/
+			const signedIn = status.status === "signed-in";
+			/**
 			* Clear in-flight claim state when the tab changes. `activeRegion` is a single
 			* value across both tabs, so a switch must not leave one row's claim spinning
 			* under the other tab.
@@ -4262,23 +4661,63 @@ window.__ModuleLoader__.load({
 					settled: claimed ? "claimed" : deviceSpent ? "device" : void 0
 				};
 			};
-			const checkinControl = (account, state) => {
-				const view = claimViewOf(account.id, state);
-				if (!view.claimable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "dsm-trae-account-checkin-state",
-					children: view.settled === "claimed" ? t("row.poolCheckedIn") : t("row.poolDeviceUsed")
-				});
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: "dsm-trae-account-checkin",
-					disabled: view.disabled,
-					title: view.title,
-					onClick: () => {
-						claimFor(account.id);
-					},
-					children: view.label
-				});
-			};
+			/**
+			* The account roster, ALREADY JUDGED — one row per locally detected sign-in.
+			*
+			* Every verdict the table draws is decided here rather than in the section
+			* component, because each one is a rule with a write or a Host answer behind
+			* it: which account is serving (the document's own `accountId`, or the
+			* roster's `selected` flag when signed out), what an account is worth
+			* (`rowValue`, judged by CREDENTIAL region so the enterprise panel reads CN
+			* balances), and whether a row may claim (`claimViewOf`, which knows the
+			* device-wide check-in rule). A section that re-derived any of them could
+			* disagree with the pool table below it, which reads the same three answers.
+			*/
+			const accountRows = status.status === "error" ? [] : (status.accounts ?? []).map((account) => {
+				const current = status.status === "signed-in" ? account.id === status.accountId : account.selected === true;
+				const state = accountStatusByRegion[activeRegion][account.id];
+				const error = claimErrorByRegion[activeRegion][account.id];
+				return {
+					id: account.id,
+					accountName: account.accountName,
+					current,
+					selected: account.selected === true,
+					meta: `${editionLabel(account.edition)} · ${sourceLabel(account.source)}`,
+					value: rowValue(state),
+					refreshExpiresAtMs: account.refreshExpiresAtMs,
+					error: error === void 0 ? void 0 : t("row.checkinError", { message: error }),
+					claim: isCnPool ? (() => {
+						const view = claimViewOf(account.id, state);
+						return {
+							label: view.label,
+							title: view.title,
+							disabled: view.disabled,
+							busy: view.busy,
+							claimable: view.claimable,
+							settled: view.settled
+						};
+					})() : void 0
+				};
+			});
+			/**
+			* The pool's per-row details, joined from the roster above by id.
+			*
+			* The pool document carries the accounts but not their edition, source or
+			* refresh-token countdown, so those three are spliced in here — by the same
+			* `editionLabel` / `sourceLabel` / `refreshTokenWarning` the roster uses, so
+			* one account cannot read "国内版 · 桌面端" in one table and something else in
+			* the next.
+			*/
+			const poolDetails = Object.fromEntries((status.status === "signed-in" ? status.accounts : []).map((account) => {
+				const warn = refreshTokenWarning(account.refreshExpiresAtMs, Date.now(), t, formatDateTime);
+				return [account.id, {
+					meta: `${editionLabel(account.edition)} · ${sourceLabel(account.source)}`,
+					...warn === void 0 ? {} : {
+						warn: warn.text,
+						warnTone: warn.tone
+					}
+				}];
+			}));
 			const label = loading ? t("row.accountsLoading") : 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" : ""}`,
@@ -4372,324 +4811,127 @@ window.__ModuleLoader__.load({
 									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(isCnPool ? "row.showPointsInMainUiHint" : "row.showPointsInMainUiHintAi"),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-											type: "checkbox",
-											className: "dsm-trae-pref-check",
-											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", {
-											className: "dsm-trae-pref-copy",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dsm-trae-pref-label",
-												id: creditsLabelId,
-												children: t("row.showPointsInMainUi")
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dsm-trae-pref-hint",
-												id: creditsHintId,
-												children: t(isCnPool ? "row.showPointsInMainUiHint" : "row.showPointsInMainUiHintAi")
-											})]
-										})]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-										className: "dsm-trae-pref dsm-trae-credit-position-pref",
-										title: t("row.creditPositionHint"),
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: "dsm-trae-pref-copy",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-												className: "dsm-trae-pref-lead",
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: "dsm-trae-pref-label",
-													children: t("row.creditPositionLabel")
-												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-													className: "dsm-trae-credit-position",
-													value: activeRegionOn ? creditPositionOn(activeRegion) : "composer",
-													disabled: !activeRegionOn || settingsScope?.getSnapshot().writable !== true || savingSettings,
-													"aria-label": t("row.creditPositionAria", { region: activeRegion === "cn" ? t("row.tabCn") : activeRegion === "enterprise" ? t("row.tabEnterprise") : t("row.tabAi") }),
-													onChange: (event) => {
-														changeCreditPosition(activeRegion, event.currentTarget.value === "stats" ? "stats" : "composer");
-													},
-													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-														value: "composer",
-														children: t("row.creditPositionComposer")
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-														value: "stats",
-														children: t("row.creditPositionStats")
-													})]
-												})]
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dsm-trae-pref-hint",
-												children: t("row.creditPositionHint")
-											})]
-										})
-									})]
-								}),
-								status.status === "signed-in" && status.pool !== void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-									className: "dsm-trae-accounts",
-									"aria-label": t("row.accountsTitle"),
+								signedIn ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsm-trae-panels",
+									role: "tablist",
+									"aria-label": t("row.panelAria"),
 									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")
-											})]
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											role: "tab",
+											id: "dsm-trae-tab-accounts",
+											"aria-controls": "dsm-trae-panel-accounts",
+											"aria-selected": panel === "accounts",
+											className: `dsm-trae-panel-tab${panel === "accounts" ? " dsm-trae-panel-tab-active" : ""}`,
+											onClick: () => {
+												setPanel("accounts");
+											},
+											children: t("row.panelAccounts")
 										}),
-										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", {
-														"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]
-											})
-										}) : null,
-										status.status !== "error" && status.accounts.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: `dsm-trae-account-table${isCnPool ? " 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") }),
-													isCnPool ? /* @__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 : account.selected === true;
-												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)
-																		]
-																	}),
-																	(() => {
-																		const warning = refreshTokenWarning(account.refreshExpiresAtMs, Date.now(), t, formatDateTime);
-																		return warning === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																			className: `dsm-trae-refresh-warn dsm-trae-refresh-warn-${warning.tone}`,
-																			role: "status",
-																			children: warning.text
-																		});
-																	})(),
-																	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)
-														}),
-														isCnPool ? /* @__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);
-											})]
-										}) : null,
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountTransfer, {
-											t,
-											region: activeRegion === "ai" ? "ai" : "cn",
-											accounts: status.status === "signed-in" ? status.accounts.map((account) => ({
-												id: account.id,
-												accountName: account.accountName
-											})) : [],
-											onChanged: async () => {
-												const fresh = await refreshUsage(activeRegion);
-												if (fresh !== void 0) setStatusByRegion((current) => ({
-													...current,
-													[activeRegion]: fresh
-												}));
-											}
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											role: "tab",
+											id: "dsm-trae-tab-models",
+											"aria-controls": "dsm-trae-panel-models",
+											"aria-selected": panel === "models",
+											className: `dsm-trae-panel-tab${panel === "models" ? " dsm-trae-panel-tab-active" : ""}`,
+											onClick: () => {
+												setPanel("models");
+											},
+											children: t("row.panelModels")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											role: "tab",
+											id: "dsm-trae-tab-diag",
+											"aria-controls": "dsm-trae-panel-diag",
+											"aria-selected": panel === "diag",
+											className: `dsm-trae-panel-tab${panel === "diag" ? " dsm-trae-panel-tab-active" : ""}`,
+											onClick: () => {
+												setPanel("diag");
+											},
+											children: t("row.panelDiag")
 										})
 									]
-								}),
-								status.status === "signed-in" && status.creditsUnavailable === "enterprise" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "dsm-trae-credits-unavailable",
-									role: "note",
-									children: t("row.enterpriseCreditsNotice")
-								}) : null,
-								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,
-								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.pool !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountPool, {
-										panel: activeRegion,
-										pool: status.pool,
-										models: visibleModels,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dsm-trae-panel",
+									role: "tabpanel",
+									id: "dsm-trae-panel-accounts",
+									"aria-labelledby": "dsm-trae-tab-accounts",
+									hidden: signedIn && panel !== "accounts",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TraeAccountPanel, {
 										t,
 										settingsScope,
-										topActions: /* @__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.poolRescan")
-										}),
-										tools: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "dsm-trae-pool-tool-row",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dsm-trae-pool-tool-label",
-												children: t("row.poolToolsLabel")
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountTransfer, {
-												t,
-												hideLabel: true,
-												region: activeRegion === "ai" ? "ai" : "cn",
-												accounts: status.accounts.map((account) => ({
-													id: account.id,
-													accountName: account.accountName
-												})),
-												onChanged: async () => {
-													const fresh = await refreshUsage(activeRegion);
-													if (fresh !== void 0) setStatusByRegion((current) => ({
-														...current,
-														[activeRegion]: fresh
-													}));
-												}
-											})]
-										}),
-										details: Object.fromEntries(status.accounts.map((account) => {
-											const warn = refreshTokenWarning(account.refreshExpiresAtMs, Date.now(), t, formatDateTime);
-											return [account.id, {
-												meta: `${editionLabel(account.edition)} · ${sourceLabel(account.source)}`,
-												...warn === void 0 ? {} : {
-													warn: warn.text,
-													warnTone: warn.tone
-												}
-											}];
-										})),
-										claims: status.pool.checkinSupported === true ? Object.fromEntries(status.accounts.map((account) => [account.id, claimViewOf(account.id, accountStatusByRegion[activeRegion][account.id])])) : void 0,
+										panel: activeRegion,
+										status,
+										statusLabel: label,
+										credentialRegionIsAi,
+										regionOn: activeRegionOn,
+										showPointsInMainUi: settingsEdits.showPointsInMainUi,
+										onToggleShowPoints: (value) => {
+											writePreference("showPointsInMainUi", value);
+										},
+										creditPosition: creditPositionOn(activeRegion),
+										onCreditPositionChange: (position) => {
+											changeCreditPosition(activeRegion, position);
+										},
+										savingPreferences: savingSettings,
+										creditsLabelId,
+										creditsHintId,
+										rows: accountRows,
+										busy,
+										rescanNote,
+										onRescan: () => {
+											rescanAccounts();
+										},
+										switchingAccount,
+										onSwitchAccount: (accountId) => {
+											switchAccount(accountId);
+										},
 										onClaim: (accountId) => {
 											claimFor(accountId);
 										},
-										deviceClaimed: deviceClaimedToday,
-										onBind: (accountId) => {
-											switchAccount(accountId);
+										onTransferChanged: async () => {
+											const fresh = await refreshUsage(activeRegion);
+											if (fresh !== void 0) setStatusByRegion((current) => ({
+												...current,
+												[activeRegion]: fresh
+											}));
 										},
-										bindingBusy: switchingAccount,
-										onChanged: async () => {
+										poolDetails,
+										poolClaims: status.status === "signed-in" && status.pool?.checkinSupported === true ? Object.fromEntries(status.accounts.map((account) => [account.id, claimViewOf(account.id, accountStatusByRegion[activeRegion][account.id])])) : void 0,
+										models: visibleModels,
+										deviceClaimed: deviceClaimedToday,
+										onPoolChanged: async () => {
 											const fresh = await refreshUsage(activeRegion);
 											if (fresh !== void 0) setStatusByRegion((current) => ({
 												...current,
 												[activeRegion]: fresh
 											}));
 										},
-										onRefresh: async () => {
+										onPoolRefresh: async () => {
 											const fresh = await refreshUsage(activeRegion);
 											if (fresh !== void 0) setStatusByRegion((current) => ({
 												...current,
 												[activeRegion]: fresh
 											}));
+										},
+										creditsUnavailable: status.status === "signed-in" ? status.creditsUnavailable : void 0,
+										creditsExpiry: status.status === "signed-in" ? status.credits?.expiry : void 0,
+										alternatives: status.status === "signed-in" ? status.alternatives : void 0,
+										onSwitchToAlternative: (accountId) => {
+											switchAccount(accountId);
 										}
-									}) : null,
-									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", {
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dsm-trae-panel",
+									role: "tabpanel",
+									id: "dsm-trae-panel-models",
+									"aria-labelledby": "dsm-trae-tab-models",
+									hidden: !signedIn || panel !== "models",
+									children: signedIn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 										className: "dsm-trae-models",
 										"aria-label": t("row.modelsTitle"),
 										children: [
@@ -4883,8 +5125,143 @@ window.__ModuleLoader__.load({
 												})]
 											})
 										]
-									})
-								] }) : null,
+									}) }) : null
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dsm-trae-panel",
+									role: "tabpanel",
+									id: "dsm-trae-panel-diag",
+									"aria-labelledby": "dsm-trae-tab-diag",
+									hidden: !signedIn || panel !== "diag",
+									children: status.status !== "signed-in" || panel !== "diag" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "dsm-trae-diag",
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-diag-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-label",
+													children: t("row.diagRegion")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-value",
+													children: activeRegion === "cn" ? t("row.tabCn") : activeRegion === "enterprise" ? t("row.tabEnterprise") : t("row.tabAi")
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-diag-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-label",
+													children: t("row.diagProvider")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-value dsm-trae-diag-mono",
+													children: providerOfPanel(activeRegion)
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-diag-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-label",
+													children: t("row.diagAccount")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-value",
+													children: status.accountName
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-diag-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-label",
+													children: t("row.diagToken")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-value dsm-trae-diag-mono",
+													children: formatDateTime(status.tokenExpiresAtMs)
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-diag-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-label",
+													children: t("row.diagRefresh")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-value dsm-trae-diag-mono",
+													children: status.refreshExpiresAtMs === void 0 ? t("row.diagRefreshNone") : formatDateTime(status.refreshExpiresAtMs)
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-diag-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-label",
+													children: t("row.diagCatalog")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-value",
+													children: formatNumber(status.models.length)
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-diag-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-label",
+													children: t("row.diagEnabled")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-value",
+													children: formatNumber(status.enabledModelIds.length)
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-diag-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-label",
+													children: t("row.diagPool")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-value",
+													children: status.pool === void 0 ? t("row.diagPoolOff") : status.pool.enabled ? t("row.diagPoolOn", { count: status.pool.effectiveMemberAccountIds?.length ?? status.pool.accounts.length }) : t("row.diagPoolOff")
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-diag-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-label",
+													children: t("row.diagCheckin")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-value",
+													children: status.checkin !== void 0 || status.pool?.checkinSupported === true ? t("row.diagCheckinOn") : t("row.diagCheckinOff")
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-diag-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-label",
+													children: t("row.diagRaw")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-value dsm-trae-diag-mono",
+													children: status.rawChat === void 0 ? t("row.diagRawOff") : status.rawChat.state
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dsm-trae-diag-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsm-trae-diag-label",
+													children: t("row.diagFailures")
+												}), (() => {
+													const failures = [];
+													if (status.creditsError !== void 0) failures.push(status.creditsError);
+													if (status.payStatusError !== void 0) failures.push(status.payStatusError);
+													if (status.checkinError !== void 0) failures.push(status.checkinError);
+													if (writeError !== void 0) failures.push(writeError);
+													return failures.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "dsm-trae-diag-value",
+														children: t("row.diagNoFailures")
+													}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "dsm-trae-diag-value dsm-trae-diag-bad dsm-trae-diag-mono",
+														children: failures.join(" · ")
+													});
+												})()]
+											})
+										]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "dsm-trae-diag-hint",
+										children: t("row.diagHint")
+									})] })
+								}),
 								status.status === "signed-out" && loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 									className: "dsm-trae-usage-text",
 									role: "status",
@@ -5634,6 +6011,29 @@ window.__ModuleLoader__.load({
 			"row.tabSwitchHint": "Turns this provider off: its models leave the DSH picker. Account and settings are kept.",
 			"row.tabSwitchAria": "Offer the {region} provider to DSH",
 			"row.tabOffNotice": "This provider is off: its models are not offered to DSH. Account and settings are kept.",
+			"row.panelAria": "Card sections",
+			"row.panelAccounts": "Account",
+			"row.panelModels": "Models",
+			"row.panelDiag": "Diagnostics",
+			"row.diagRegion": "Panel",
+			"row.diagProvider": "Provider id",
+			"row.diagAccount": "Serving account",
+			"row.diagToken": "Access token expires",
+			"row.diagRefresh": "Re-sign-in deadline",
+			"row.diagRefreshNone": "this credential carries none",
+			"row.diagCatalog": "Models in catalog",
+			"row.diagEnabled": "Models enabled",
+			"row.diagPool": "Account pool",
+			"row.diagPoolOn": "on · {count} account(s)",
+			"row.diagPoolOff": "off",
+			"row.diagCheckin": "Daily check-in",
+			"row.diagCheckinOn": "supported",
+			"row.diagCheckinOff": "not offered here",
+			"row.diagRaw": "Raw chat channel",
+			"row.diagRawOff": "not checked",
+			"row.diagFailures": "Last reported failure",
+			"row.diagNoFailures": "none",
+			"row.diagHint": "Everything above is read-only and can be quoted verbatim into a bug report. The values are this panel’s own last refresh, not a summary of it.",
 			"row.settingsWriteFailed": "The setting was not saved: {message}",
 			"row.signedOut": "Not signed in",
 			"row.signedOutHint": "Sign in once in the Trae desktop app; this plugin follows that sign-in automatically.",
@@ -5960,6 +6360,29 @@ window.__ModuleLoader__.load({
 			"row.tabSwitchHint": "关闭该供应商：其模型不再提供给 DSH；账号与设置保留，可随时恢复。",
 			"row.tabSwitchAria": "是否向 DSH 提供{region}供应商",
 			"row.tabOffNotice": "该供应商已关闭，模型不会提供给 DSH。账号与设置均已保留。",
+			"row.panelAria": "卡片分栏",
+			"row.panelAccounts": "账号",
+			"row.panelModels": "模型",
+			"row.panelDiag": "诊断",
+			"row.diagRegion": "面板",
+			"row.diagProvider": "供应商 id",
+			"row.diagAccount": "服务账号",
+			"row.diagToken": "访问令牌到期",
+			"row.diagRefresh": "重新登录最后期限",
+			"row.diagRefreshNone": "该凭据不携带",
+			"row.diagCatalog": "目录模型数",
+			"row.diagEnabled": "已启用模型数",
+			"row.diagPool": "账号池",
+			"row.diagPoolOn": "已开启 · {count} 个账号",
+			"row.diagPoolOff": "未开启",
+			"row.diagCheckin": "每日签到",
+			"row.diagCheckinOn": "支持",
+			"row.diagCheckinOff": "本面板不提供",
+			"row.diagRaw": "Raw 会话通道",
+			"row.diagRawOff": "未检测",
+			"row.diagFailures": "最近一次报错",
+			"row.diagNoFailures": "无",
+			"row.diagHint": "以上全部只读，可整段原样贴进反馈。数值来自本面板最近一次刷新，不是概括。",
 			"row.settingsWriteFailed": "设置未能保存：{message}",
 			"row.signedOut": "未登录",
 			"row.signedOutHint": "在 Trae 桌面 App 里登录一次即可，插件会自动跟随当前登录的账号。",