dsh-connect-trae 2.10.0 → 3.0.0

package/lib/client.js

@@ -6,6 +6,7 @@ window.__ModuleLoader__.load({
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
+		let react_dom = require("react-dom");
 		//#region src/status-paths.ts
 		/** Plugin-owned usage endpoint consumed by its browser half. */
 		const TRAE_USAGE_PATH = "/plugins/dsh-connect-trae/usage";
@@ -21,6 +22,17 @@ window.__ModuleLoader__.load({
 		/** Plugin-owned local account rescan endpoint. */
 		const TRAE_ACCOUNTS_REFRESH_PATH = "/plugins/dsh-connect-trae/accounts/refresh";
 		/**
+		* General balance of EVERY account in a region, for the composer panel's table.
+		*
+		* Separate from the usage route on purpose: the usage document backs the
+		* 5-minute readout, and multiplying its upstream reads by the account count
+		* would charge a healthy account for something it never looks at — the same
+		* principle that keeps `creditAlternatives` firing only when a balance hits
+		* zero. This one is paid when the panel is actually opened, which is the only
+		* place the table is shown.
+		*/
+		const TRAE_ACCOUNT_CREDITS_PATH = "/plugins/dsh-connect-trae/account-credits";
+		/**
 		* Plugin-owned daily check-in claim endpoint. POST, loopback-only, and the only
 		* route in this plugin that changes upstream account state.
 		*/
@@ -73,6 +85,24 @@ window.__ModuleLoader__.load({
 			return out;
 		}
 		/**
+		* Read the per-region account selections out of a settings value.
+		*
+		* SHARED because `accounts` now has TWO writers: the card, and the composer
+		* panel's account table (2.14.0). Two writers of one field must use one merge
+		* rule, or they drift — and the rule is not obvious.
+		*
+		* Deep-unwraps first: on DSH 0.1.7 a volatile field arrives as a `{get(): T}`
+		* live reference, which passes the `typeof === 'object'` check and would be
+		* returned as if it were the map. Every lookup on it is then `undefined`, and
+		* the merge (`{ ...configured, [region]: id }`) would spread a reference into
+		* `{get: <function>}` — dropping the other region's selection and leaking a
+		* function into the settings document.
+		*/
+		function configuredAccountsOf(configured) {
+			const accounts = unwrapVolatileDeep(configured)?.accounts;
+			return typeof accounts === "object" && accounts !== null ? accounts : {};
+		}
+		/**
 		* Build the next `regions` settings value for the card's save. The write
 		* targets ONLY the signed-in account's region slot; every other region's slot
 		* is carried over untouched, so switching accounts never clobbers the other
@@ -203,6 +233,10 @@ window.__ModuleLoader__.load({
 .dsm-btn-outline:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed);background:rgba(255,255,255,.04)}
 .dsm-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}
 .dsm-btn-primary:hover:not(:disabled){opacity:.9}
+.dsm-trae-mainui-switch{display:flex;justify-content:flex-end;padding:0 2px 8px}
+.dsm-trae-mainui-switch-label{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:var(--dsw-alias-label-secondary,#c6c9d0);white-space:nowrap;cursor:pointer}
+.dsm-trae-mainui-switch-label input{margin:0;accent-color:var(--dsw-alias-brand-primary,#5686fe)}
+.dsm-trae-mainui-switch-label:has(input:disabled){opacity:.6;cursor:default}
 .dsm-trae-usage{display:flex;flex-direction:column;gap:16px;margin:0;padding:16px 0 4px}
 .dsm-trae-tabs{display:flex;gap:6px;padding:4px;border:1px solid var(--dsw-alias-border-l2,#3a3d45);border-radius:10px;background:var(--dsw-alias-bg-layer-3,#2a2c33)}
 .dsm-trae-tab-cell{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
@@ -267,10 +301,6 @@ window.__ModuleLoader__.load({
    row at the top and the copy beside the model actions (2.9.3). Without it the
    checkbox rendered unstyled and read as absent — the whole reason the switch
    looked missing. */
-.dsm-trae-mainui-switch{padding:2px 0 0}
-.dsm-trae-mainui-switch-label{display:flex;align-items:center;gap:9px;font-size:13px;line-height:18px;color:var(--dsw-alias-label-secondary,#c6c9d0);cursor:pointer;white-space:nowrap}
-.dsm-trae-mainui-switch-label input{margin:0;accent-color:var(--dsw-alias-brand-primary,#5686fe)}
-.dsm-trae-mainui-switch-label:has(input:disabled){opacity:.6;cursor:default}
 .dsm-trae-models-actions{display:flex;align-items:center;gap:8px;flex:none}
 }
 .dsm-trae-usage-alternative{display:flex;align-items:flex-start;gap:10px;margin-top:10px;padding:10px 12px;border:1px solid var(--dsw-alias-state-warning-border,#7a5b12);border-radius:10px;background:var(--dsw-alias-state-warning-bg,#2a2313)}
@@ -320,22 +350,127 @@ window.__ModuleLoader__.load({
 .dsm-trae-checkin-note{margin:8px 0 0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#c6c9d0)}
 `;
 		/**
-		* Sidebar credit line styles, injected by the sidebar component itself.
+		* Composer-row readout styles, injected by the readout itself.
+		*
+		* SEPARATE from `TRAE_CARD_CSS`, and that is not tidiness: the card's CSS is
+		* only injected when the settings card module loads, so putting the composer's
+		* rules in it means the readout renders UNSTYLED in the composer toolbar —
+		* which is exactly what shipped in 2.13.0–2.13.4. The trigger fell back to the
+		* browser's default button box, and the panel, without `position: fixed`, had
+		* its inline left/top ignored and rendered nowhere useful.
 		*
-		* Separate from the card bundle because the line lives in the shell's sidebar,
-		* not inside the plugin card; a card that is closed still shows this.
+		* `tests/composer-styles.spec.tsx` now asserts that every class this component
+		* renders has a rule here, so a rule cannot go missing without a test failing.
 		*/
-		const TRAE_SIDEBAR_CSS = `
-.dsm-trae-sidebar-points{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#c6c9d0)}
-.dsm-trae-sidebar-points-line{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
-.dsm-trae-sidebar-points-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
-.dsm-trae-sidebar-points-failed{color:var(--dsw-alias-state-error-primary,#ef4444);font-size:11px;line-height:16px;white-space:nowrap}
-.dsm-trae-sidebar-points-hide{appearance:none;flex:none;font:inherit;font-size:14px;line-height:1;padding:2px 6px;border:0;border-radius:6px;color:var(--dsw-alias-label-tertiary,#999);background:transparent;cursor:pointer}
-.dsm-trae-sidebar-points-hide:hover{color:var(--dsw-alias-label-primary,#e6e6e6);background:var(--dsw-alias-bg-layer-3,#2c2f36)}
-.dsm-trae-sidebar-points-refresh{appearance:none;flex:none;font:inherit;font-size:11px;line-height:16px;padding:2px 8px;border:1px solid var(--dsw-alias-border-l2,#3a3d45);border-radius:7px;color:var(--dsw-alias-label-secondary,#c6c9d0);background:transparent;cursor:pointer}
-.dsm-trae-sidebar-points-refresh:hover:not(:disabled){color:var(--dsw-alias-label-primary,#e6e6e6);border-color:var(--dsw-alias-label-dimmed,#777)}
-.dsm-trae-sidebar-points-refresh:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#5686fe);outline-offset:1px}
-.dsm-trae-sidebar-points-refresh:disabled{opacity:.5;cursor:default}
+		const COMPOSER_POINTS_CSS = `
+/* The readout is plain composer text — no border, no fill at rest. The padding
+   is only the click target, invisible until the pointer arrives. */
+.dsm-trae-composer-points{display:inline-flex;align-items:center;min-width:0}
+.dsm-trae-composer-points-trigger{
+  appearance:none;display:inline-flex;align-items:center;align-self:stretch;
+  padding:2px 6px;border:0;border-radius:6px;background:transparent;
+  /* EXPLICIT, not inherit. The composer row's own font and body colour are
+     noticeably larger and darker than the neighbouring controls — a credit
+     readout is secondary information and must not shout. 12px matches this
+     plugin's original line; label-tertiary matches the shell's own composer-row
+     control (ContextMeter), which is the sibling this reads alongside. */
+  font-size:12px;line-height:18px;
+  color:var(--dsw-alias-label-tertiary,#999);
+  white-space:nowrap;cursor:pointer;
+  font-variant-numeric:tabular-nums;
+}
+.dsm-trae-composer-points-trigger:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.14))}
+.dsm-trae-composer-points-trigger:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#5686fe);outline-offset:1px}
+/* The panel is portaled to document.body and positioned from the trigger, so it
+   MUST be fixed — otherwise the left/top it measures are ignored and it lands in
+   document flow. All material comes from shell tokens so it follows the theme. */
+.dsm-trae-composer-panel{
+  position:fixed;z-index:1100;box-sizing:border-box;
+  width:min(248px,calc(100vw - 24px));padding:12px;
+  border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.28));
+  border-radius:var(--dsw-radius-lg,14px);
+  background:var(--dsw-specific-menu,Canvas);
+  box-shadow:var(--dsw-elevation-prominent,0 8px 32px rgba(0,0,0,.22));
+  backdrop-filter:var(--dsw-menu-backdrop-filter,none);
+  font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#444);
+}
+.dsm-trae-composer-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
+.dsm-trae-composer-panel-title{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary,CanvasText)}
+/* Self-contained: the dsm-btn primitive lives in TRAE_CARD_CSS, which the
+   composer never loads, so the refresh button must style itself. */
+.dsm-trae-composer-panel-refresh{
+  appearance:none;flex:none;margin-left:auto;padding:3px 10px;
+  border:1px solid var(--dsw-alias-border-l2,rgba(127,127,127,.34));
+  border-radius:7px;background:transparent;
+  color:var(--dsw-alias-label-secondary,#444);
+  font:inherit;font-size:11px;line-height:16px;cursor:pointer;
+}
+.dsm-trae-composer-panel-refresh:hover:not(:disabled){border-color:var(--dsw-alias-label-dimmed,rgba(127,127,127,.6));color:var(--dsw-alias-label-primary,CanvasText)}
+.dsm-trae-composer-panel-refresh:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#5686fe);outline-offset:1px}
+.dsm-trae-composer-panel-refresh:disabled{opacity:.5;cursor:default}
+/* The panel is a TABLE: one row per account in the region, one figure (the
+   general balance) per row, and a row click switches accounts.
+
+   Rhythm is deliberate: the header sits on a hairline, the switch button owns
+   ALL horizontal padding (and pulls back by the same amount so its label lines
+   up with the header), and every row is the same height. A misaligned first
+   column is what makes a two-column popover read as broken. */
+.dsm-trae-composer-panel-table{
+  width:100%;border-collapse:collapse;
+  font-size:12px;line-height:18px;
+}
+.dsm-trae-composer-panel-table thead th{
+  padding:0 0 7px;font-weight:500;text-align:left;font-size:11px;
+  color:var(--dsw-alias-label-tertiary,GrayText);
+  border-bottom:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.24));
+}
+.dsm-trae-composer-panel-num{
+  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
+}
+.dsm-trae-composer-panel-table thead th.dsm-trae-composer-panel-num{padding-right:0}
+.dsm-trae-composer-panel-table tbody th{
+  padding:0;font-weight:400;text-align:left;vertical-align:middle;
+}
+.dsm-trae-composer-panel-table tbody td{
+  padding:4px 0;vertical-align:middle;
+  color:var(--dsw-alias-label-primary,CanvasText);
+}
+/* The current account reads as current without shouting: a filled dot and a
+   slightly heavier weight. Disabled — pressing it would write a selection that
+   has not changed. */
+.dsm-trae-composer-panel-table tbody tr.dsm-trae-composer-panel-row-current td{font-weight:600}
+.dsm-trae-composer-panel-switch{
+  appearance:none;display:flex;align-items:center;gap:7px;
+  width:100%;padding:4px 6px;margin-left:-6px;
+  border:0;border-radius:6px;background:transparent;
+  color:inherit;font:inherit;font-size:12px;text-align:left;cursor:pointer;
+  white-space:nowrap;overflow:hidden;
+}
+.dsm-trae-composer-panel-switch>span:last-child{overflow:hidden;text-overflow:ellipsis}
+/* Hover belongs to the switch, not the row: the number cell is not clickable,
+   so lighting it up would promise an action it cannot perform. */
+.dsm-trae-composer-panel-switch:hover:not(:disabled){
+  background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.14));
+}
+.dsm-trae-composer-panel-switch:focus-visible{
+  outline:2px solid var(--dsw-alias-brand-primary,#5686fe);outline-offset:-1px;
+}
+.dsm-trae-composer-panel-switch:disabled{cursor:default}
+.dsm-trae-composer-panel-dot{
+  flex:none;width:7px;height:7px;border-radius:50%;
+  background:var(--dsw-alias-label-dimmed,rgba(127,127,127,.5));
+}
+.dsm-trae-composer-panel-table tr.dsm-trae-composer-panel-row-current .dsm-trae-composer-panel-dot{
+  background:var(--dsw-state-success,#22a06b);
+}
+.dsm-trae-composer-panel-foot{
+  display:flex;justify-content:space-between;gap:8px;
+  margin-top:9px;padding-top:7px;
+  border-top:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.24));
+  font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary,GrayText);
+}
+.dsm-trae-composer-panel-empty{margin:0;color:var(--dsw-alias-label-tertiary,GrayText)}
+.dsm-trae-composer-panel-error{margin:8px 0 0;color:var(--dsw-alias-state-error-primary,#d92d20);font-size:11px;line-height:16px}
 `;
 		//#endregion
 		//#region src/client/TraeUsageCard.tsx
@@ -348,20 +483,6 @@ window.__ModuleLoader__.load({
 		const POLL_INTERVAL_MS = 6e4;
 		const TRAE_GITHUB_URL = "https://github.com/dingminhua/dsh-connect-trae";
 		/**
-		* Read the per-region account selections out of the settings snapshot.
-		*
-		* Deep-unwraps first: on DSH 0.1.7 a volatile field arrives as a `{get(): T}`
-		* live reference, which passes the `typeof === 'object'` check below and would
-		* be returned as if it were the map. Every lookup on it is then `undefined`,
-		* and the card's merge (`{ ...configured, [region]: id }`) would spread a
-		* reference into `{get: <function>}` — dropping the other region's selection
-		* and leaking a function into the settings document.
-		*/
-		function configuredAccountsOf(configured) {
-			const accounts = unwrapVolatileDeep(configured)?.accounts;
-			return typeof accounts === "object" && accounts !== null ? accounts : {};
-		}
-		/**
 		* Write one settings field and confirm the value actually landed.
 		*
 		* `configForms.set()` resolving is NOT proof that anything was stored: a write
@@ -401,7 +522,7 @@ window.__ModuleLoader__.load({
 				document.head.appendChild(styleTag);
 			}
 		}
-		function formatNumber$1(value) {
+		function formatNumber(value) {
 			return new Intl.NumberFormat(void 0, {
 				minimumFractionDigits: 0,
 				maximumFractionDigits: 0
@@ -420,7 +541,7 @@ window.__ModuleLoader__.load({
 			if (value === void 0) return unknown;
 			if (value >= 1e6 && value % 1e6 === 0) return `${value / 1e6}M`;
 			if (value >= 1e3 && value % 1e3 === 0) return `${value / 1e3}K`;
-			return formatNumber$1(value);
+			return formatNumber(value);
 		}
 		/**
 		* The subscription row's verdict.
@@ -512,24 +633,6 @@ window.__ModuleLoader__.load({
 			*/
 			const [claiming, setClaiming] = (0, react.useState)(false);
 			/** Last claim refusal, shown until the next successful refresh. */
-			/**
-			* Toggle the global "show credits at the DSH sidebar foot" switch. Unlike the
-			* per-region provider switch this is one top-level boolean shared by both
-			* regions; only that field is written, and the read-back must show the new
-			* value before success is reported.
-			*/
-			const toggleShowPointsInMainUi = async (enabled) => {
-				if (settingsScope === void 0 || settingsScope.getSnapshot().writable !== true) return;
-				setTogglingMainUi(true);
-				setWriteError(void 0);
-				try {
-					await writeSettingsField(settingsScope, "showPointsInMainUi", enabled, (readBack) => unwrapVolatileDeep(readBack)?.showPointsInMainUi === enabled);
-				} catch (error) {
-					if (mounted.current) setWriteError(error instanceof Error ? error.message : t("row.requestFailed"));
-				} finally {
-					if (mounted.current) setTogglingMainUi(false);
-				}
-			};
 			const [claimError, setClaimError] = (0, react.useState)(void 0);
 			/**
 			* Outcome of the last "refresh accounts" press (issue #25).
@@ -540,7 +643,6 @@ window.__ModuleLoader__.load({
 			* failure. Reporting the outcome is the difference between "it did nothing"
 			* and "it found the same 2 accounts, still on X".
 			*/
-			const [togglingMainUi, setTogglingMainUi] = (0, react.useState)(false);
 			const [rescanNote, setRescanNote] = (0, react.useState)(void 0);
 			/**
 			* Whether this MACHINE has spent today's check-in while the selected account
@@ -556,6 +658,8 @@ window.__ModuleLoader__.load({
 			* the control would flip and then quietly snap back on the next snapshot.
 			*/
 			const [writeError, setWriteError] = (0, react.useState)(void 0);
+			/** True while the composer-credit switch write is in flight. */
+			const [togglingCredits, setTogglingCredits] = (0, react.useState)(false);
 			const mounted = (0, react.useRef)(true);
 			(0, react.useEffect)(() => {
 				mounted.current = true;
@@ -563,6 +667,24 @@ window.__ModuleLoader__.load({
 					mounted.current = false;
 				};
 			}, []);
+			/**
+			* Toggle the composer credit readout (`showPointsInMainUi`). The card's
+			* checkbox is the ONLY writer of this field — the readout itself carries no
+			* control — so there is exactly one path that can change it, and the write is
+			* read-back-checked like every other settings write in this card.
+			*/
+			const toggleShowPointsInMainUi = async (enabled) => {
+				if (settingsScope === void 0 || settingsScope.getSnapshot().writable !== true) return;
+				setTogglingCredits(true);
+				setWriteError(void 0);
+				try {
+					await writeSettingsField(settingsScope, "showPointsInMainUi", enabled, (readBack) => unwrapVolatileDeep(readBack)?.showPointsInMainUi === enabled);
+				} catch (error) {
+					if (mounted.current) setWriteError(error instanceof Error ? error.message : t("row.requestFailed"));
+				} finally {
+					if (mounted.current) setTogglingCredits(false);
+				}
+			};
 			(0, react.useEffect)(() => settingsScope?.subscribe(() => {
 				setSettingsRevision((value) => value + 1);
 			}), [settingsScope]);
@@ -1039,21 +1161,6 @@ window.__ModuleLoader__.load({
 					children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "dsm-trae-usage",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dsm-trae-mainui-switch",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-									className: "dsm-trae-mainui-switch-label",
-									title: t("row.showPointsInMainUiHint"),
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										type: "checkbox",
-										checked: settingsValue?.showPointsInMainUi === true,
-										disabled: settingsScope?.getSnapshot().writable !== true || togglingMainUi,
-										onChange: (event) => {
-											toggleShowPointsInMainUi(event.currentTarget.checked);
-										}
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.showPointsInMainUi") })]
-								})
-							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "dsm-trae-tabs",
 								role: "tablist",
@@ -1107,6 +1214,21 @@ window.__ModuleLoader__.load({
 								role: "status",
 								children: t("row.tabOffNotice")
 							}),
+							activeRegion !== "cn" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dsm-trae-mainui-switch",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: "dsm-trae-mainui-switch-label",
+									title: t("row.showPointsInMainUiHint"),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "checkbox",
+										checked: settingsValue?.showPointsInMainUi === true,
+										disabled: settingsScope?.getSnapshot().writable !== true || togglingCredits,
+										onChange: (event) => {
+											toggleShowPointsInMainUi(event.currentTarget.checked);
+										}
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.showPointsInMainUi") })]
+								})
+							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "dsm-trae-usage-account",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1166,7 +1288,7 @@ window.__ModuleLoader__.load({
 											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$1(alt.workAvailable + alt.generalAvailable)}）`).join("、") })
+												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",
@@ -1244,7 +1366,7 @@ window.__ModuleLoader__.load({
 												}),
 												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 													className: "dsm-trae-usage-stat-value dsm-trae-usage-stat-value-work",
-													children: formatNumber$1(status.credits.workAvailable)
+													children: formatNumber(status.credits.workAvailable)
 												}),
 												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 													className: "dsm-trae-usage-stat-hint",
@@ -1266,7 +1388,7 @@ window.__ModuleLoader__.load({
 												}),
 												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 													className: "dsm-trae-usage-stat-value dsm-trae-usage-stat-value-general",
-													children: formatNumber$1(status.credits.generalAvailable)
+													children: formatNumber(status.credits.generalAvailable)
 												}),
 												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 													className: "dsm-trae-usage-stat-hint",
@@ -1283,8 +1405,8 @@ window.__ModuleLoader__.load({
 								status.checkin === void 0 ? null : (() => {
 									const accountClaimed = status.checkin.checkedIn;
 									const deviceSpent = !accountClaimed && (status.checkin.didCheckedIn || deviceSpentNotice);
-									const reward = formatNumber$1(status.checkin.credits);
-									const bonus = status.checkin.extraCredits === void 0 ? "" : ` + ${formatNumber$1(status.checkin.extraCredits)}`;
+									const reward = formatNumber(status.checkin.credits);
+									const bonus = status.checkin.extraCredits === void 0 ? "" : ` + ${formatNumber(status.checkin.extraCredits)}`;
 									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "dsm-trae-checkin",
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -1338,42 +1460,27 @@ window.__ModuleLoader__.load({
 												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.jsxs)("label", {
-														className: "dsm-trae-mainui-switch-label",
-														title: t("row.showPointsInMainUiHint"),
-														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-															type: "checkbox",
-															checked: settingsValue?.showPointsInMainUi === true,
-															disabled: settingsScope?.getSnapshot().writable !== true || togglingMainUi,
-															onChange: (event) => {
-																toggleShowPointsInMainUi(event.currentTarget.checked);
-															}
-														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("row.showPointsInMainUi") })]
-													}),
-													/* @__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
-														})
+												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)("p", {
@@ -1540,233 +1647,544 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
-		//#region src/client/SidebarPoints.tsx
+		//#region src/client/popover.ts
 		/**
-		* Compact credit line contributed to the DSH main sidebar foot
-		* (`sidebar.footer.action`).
+		* The two shell behaviours the composer credit panel needs: hanging the panel
+		* off its trigger, and dismissing it on an outside press.
+		*
+		* Implemented locally rather than imported from
+		* `@deepseek-ai/dsh-client-ui-primitives`. The shell DOES register that package
+		* for plugin bundles, so importing it is legal — this is a deliberate choice,
+		* not a workaround: the two behaviours are ~40 lines of DOM geometry, and owning
+		* them keeps this component renderable in the Node test suite without mocking a
+		* package that itself reaches `*.module.css` and further DSH dependencies.
 		*
-		* Mounted only while the plugin-card switch `showPointsInMainUi` is on, so the
-		* slot renders nothing when the feature is off. On mount it fetches the bound
-		* CN account's remaining credits ONCE and only then starts the periodic
-		* refresh timer; the timer is cleared on unmount (switch off / plugin unload),
-		* so timers never stack.
+		* NOTE ON A MISDIAGNOSIS, kept because it is the kind of thing that gets
+		* re-litigated: the 2.12.0/2.13.0 client load failure was first attributed to
+		* importing the primitives package. It was not that. The real cause was
+		* `import { createPortal } from 'react-dom'` being BUNDLED rather than
+		* externalized — the inlined development build opens with
+		* `process.env.NODE_ENV` and threw `ReferenceError: process is not defined` in
+		* the browser. See `tsdown.config.ts` for the fix and
+		* `tests/client-runtime-imports.spec.ts` for the rule that now prevents it.
 		*
-		* A failed refresh keeps the last known value and surfaces a short failure
-		* note; an in-flight refresh ignores further clicks (debounce).
+		* Behaviour is intentionally identical to the shell's implementations: the same
+		* top/bottom placement, the same viewport clamping, the same re-measure on
+		* scroll (capture, so nested scrollers count), resize and the panel's own size
+		* changes, and the same "a pointerdown outside both the trigger and the panel
+		* closes it" rule.
 		*/
 		/**
-		* Automatic refresh period. The first fetch happens immediately on enable;
-		* this is the gap between subsequent automatic fetches.
+		* Clearance to keep from the top of the viewport.
 		*
-		* Five minutes, not the card's 60s: a credit balance moves on the scale of
-		* model calls, not seconds, and this line is a glanceable reminder rather than
-		* a live meter. Each poll is two read-only upstream calls, so a tighter period
-		* would buy nothing a user can act on.
+		* The shell reserves a strip at the top of the frame (`--dsh-frame-top-clearance`)
+		* for the window chrome, so a panel clamped to `margin` alone can still land
+		* under it. Absent variable or no `data-fullscreen` distinction is handled the
+		* same way the shell does: fall back to `min`.
+		*/
+		function overlayTopMargin(min) {
+			if (typeof document === "undefined") return min;
+			const root = document.documentElement;
+			const clearance = Number.parseFloat(getComputedStyle(root).getPropertyValue("--dsh-frame-top-clearance"));
+			if (Number.isNaN(clearance)) return min;
+			return Math.max(min, (root.hasAttribute("data-fullscreen") ? 0 : clearance) + 20);
+		}
+		/** Keep a `position: fixed` floating element anchored to a trigger. */
+		function useAnchoredPosition(options) {
+			const { open, anchorRef, panelRef, side = "bottom", align = "start", gap, margin } = options;
+			const [position, setPosition] = (0, react.useState)(null);
+			(0, react.useLayoutEffect)(() => {
+				if (!open) {
+					setPosition(null);
+					return;
+				}
+				const place = () => {
+					const rect = anchorRef.current?.getBoundingClientRect();
+					if (rect === void 0) return;
+					const panel = panelRef.current;
+					const width = panel?.offsetWidth ?? 0;
+					const height = panel?.offsetHeight ?? 0;
+					let left = align === "end" ? rect.right - width : rect.left;
+					let top = side === "top" ? rect.top - gap - height : rect.bottom + gap;
+					if (width > 0) left = Math.min(Math.max(left, margin), window.innerWidth - width - margin);
+					if (height > 0) top = Math.min(Math.max(top, overlayTopMargin(margin)), window.innerHeight - height - margin);
+					setPosition({
+						left,
+						top
+					});
+				};
+				place();
+				window.addEventListener("scroll", place, true);
+				window.addEventListener("resize", place);
+				const panel = panelRef.current;
+				let observer = null;
+				if (typeof ResizeObserver !== "undefined" && panel !== null) {
+					observer = new ResizeObserver(place);
+					observer.observe(panel);
+				}
+				return () => {
+					observer?.disconnect();
+					window.removeEventListener("scroll", place, true);
+					window.removeEventListener("resize", place);
+				};
+			}, [
+				open,
+				anchorRef,
+				panelRef,
+				side,
+				align,
+				gap,
+				margin
+			]);
+			return position;
+		}
+		/**
+		* Close an open popover when a pointerdown lands outside it.
+		*
+		* `portal` counts as inside: the panel is portaled to `document.body`, so it is
+		* not a descendant of `root` and a click on the panel itself would otherwise
+		* read as "outside" and dismiss the popover the user is trying to use.
+		*/
+		function useDismissOnOutsidePointer(root, open, setOpen, portal) {
+			(0, react.useEffect)(() => {
+				if (!open) return void 0;
+				const closeOutside = (event) => {
+					if (event.target instanceof Node && root.current?.contains(event.target) !== true && portal?.current?.contains(event.target) !== true) setOpen(false);
+				};
+				document.addEventListener("pointerdown", closeOutside);
+				return () => {
+					document.removeEventListener("pointerdown", closeOutside);
+				};
+			}, [
+				root,
+				open,
+				setOpen,
+				portal
+			]);
+		}
+		//#endregion
+		//#region src/client/ComposerPoints.tsx
+		/**
+		* Credit readout for the composer tool row (`conversation.input.left`).
+		*
+		* Shows the bound CN account's general credit balance, but ONLY while the
+		* session's selected model belongs to this plugin. That condition is the whole
+		* point: the sidebar foot is a single shared row, so two connector plugins each
+		* parking a line there end up fighting for the same space. The composer row is
+		* per-session and provider-scoped, so exactly one plugin's credits are relevant
+		* at a time and nothing overlaps.
+		*
+		* The row itself is a bare clickable readout — `Trae CN · 657` — with NO
+		* refresh control. Clicking it opens an anchored panel: a TABLE with one row
+		* per account in the region and that account's general balance, where a row
+		* click switches to it. The manual refresh button lives in the panel too.
+		*
+		* Two deliberate choices in that panel:
+		*
+		*  - GENERAL balance only, not Work credits. The table's one figure is the
+		*    bucket the SOLO chat actually spends; two columns of numbers in a
+		*    five-slot popover is noise, and the card is where the breakdown belongs.
+		*  - Per-account figures are fetched ONLY while the panel is open. The
+		*    5-minute readout must not multiply its upstream reads by the account
+		*    count — a healthy balance should not pay for a table nobody is looking at.
+		*    This is the same principle that keeps `creditAlternatives` firing only
+		*    when a balance hits zero.
+		*
+		* The provider comes from the Host's own `modelSelection` projection rather
+		* than from anything this plugin tracks: the projection is what the model
+		* picker writes and what the next request will use, so the readout cannot
+		* disagree with the model actually in effect.
+		*/
+		/**
+		* Inject the readout's styles into the document head, once, on module load.
+		*
+		* Same idempotent pattern as the card's injection, and for the same reason: the
+		* classes are attached to DOM this component owns, and `.dsm-card-*` lives in
+		* `TRAE_CARD_CSS` — which only loads when the settings card does. Before this
+		* existed (2.13.0–2.13.4) the trigger rendered as the browser's default button
+		* box and the panel, with no `position: fixed`, had its measured left/top
+		* ignored and appeared nowhere.
 		*/
-		const SIDEBAR_POINTS_REFRESH_INTERVAL_MS = 3e5;
-		/** Inject the sidebar-line CSS once. */
 		if (typeof document !== "undefined") {
-			const cssId = "dsh-connect-trae/sidebar.css";
+			const cssId = "dsh-connect-trae/composer-points.css";
 			if (!document.querySelector(`style[data-plugin-css="${cssId}"]`)) {
 				const styleTag = document.createElement("style");
 				styleTag.dataset.plugin = "dsh-connect-trae";
 				styleTag.dataset.pluginCss = cssId;
-				styleTag.textContent = TRAE_SIDEBAR_CSS;
+				styleTag.textContent = COMPOSER_POINTS_CSS;
 				document.head.appendChild(styleTag);
 			}
 		}
-		function formatNumber(value) {
-			return new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }).format(value);
-		}
-		function formatClock(value) {
-			return new Intl.DateTimeFormat(void 0, {
-				hour: "2-digit",
-				minute: "2-digit",
-				second: "2-digit"
-			}).format(new Date(value));
-		}
 		/**
-		* The GENERAL credit balance out of one usage-route document.
+		* Automatic refresh period. Five minutes, matching the sidebar line: a credit
+		* balance moves on the scale of model calls, not seconds, and each read is two
+		* read-only upstream calls.
+		*/
+		const COMPOSER_POINTS_REFRESH_INTERVAL_MS = 3e5;
+		/**
+		* Provider routes whose credit balance this readout can show, mapped to the
+		* region to read it from.
+		*
+		* CN ONLY, and the restriction is the data's, not a preference: the Host builds
+		* the international region's usage document from `payStatus` and never sets
+		* `credits` on it (`webStatusFor` returns early for `region === 'ai'`), because
+		* that side is subscription-based and has no comparable balance. Mapping
+		* `trae-global` here would render the hardcoded "Trae CN" label next to a dash
+		* — a number-slot with no number — while an international model is selected.
 		*
-		* Deliberately `generalAvailable`, NOT `credits.available`. The latter is the
-		* upstream aggregate (`summary.totalAmount - consumedAmount`), while the card
-		* shows two buckets derived from the entitlement packs; the aggregate is not
-		* guaranteed to equal the buckets, and a sidebar number the user cannot match
-		* against the card is worse than no number at all. The general bucket is the
-		* one the SOLO chat path spends, so it is the one worth watching.
+		* Mirrors the CN half of `TRAE_PROVIDERS` on the host side; duplicated here
+		* because the client bundle must not import the host entry.
 		*/
+		const TRAE_COMPOSER_PROVIDERS = { "trae": "cn" };
+		/** The general credit balance out of one usage document, or undefined. */
 		function generalCreditsOf(usage) {
 			if (usage.status !== "signed-in") return void 0;
 			return usage.credits?.generalAvailable;
 		}
-		/** One fetch+render cycle. Returns false when the request failed. */
-		function SidebarPoints({ t, onHide }) {
-			if (t === void 0) throw new Error("Sidebar points line requires its translation function");
-			const [points, setPoints] = (0, react.useState)(void 0);
-			const [signedIn, setSignedIn] = (0, react.useState)(true);
+		/** Group the digits so a four-figure balance stays readable in a narrow row. */
+		function formatCredits(value) {
+			return value.toLocaleString("en-US", { maximumFractionDigits: 0 });
+		}
+		function formatClock(value) {
+			return new Date(value).toLocaleTimeString("zh-CN", {
+				hour: "2-digit",
+				minute: "2-digit"
+			});
+		}
+		function ComposerPoints(props) {
+			const { t, provider, region, settingsScope } = props;
+			if (t === void 0) throw new Error("Composer points readout requires its translation function");
+			const owned = provider === void 0 ? void 0 : TRAE_COMPOSER_PROVIDERS[provider];
+			const activeRegion = region ?? owned;
+			const [usage, setUsage] = (0, react.useState)(void 0);
+			const [accountCredits, setAccountCredits] = (0, react.useState)(void 0);
 			const [busy, setBusy] = (0, react.useState)(false);
+			const [switchingId, setSwitchingId] = (0, react.useState)(void 0);
 			const [failed, setFailed] = (0, react.useState)(false);
 			const [lastRefresh, setLastRefresh] = (0, react.useState)(void 0);
-			/** True while a request is in flight; debounces repeated refresh clicks. */
+			const [open, setOpen] = (0, react.useState)(false);
 			const inFlight = (0, react.useRef)(false);
 			const mounted = (0, react.useRef)(true);
+			const rootRef = (0, react.useRef)(null);
+			const panelRef = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
 				mounted.current = true;
 				return () => {
 					mounted.current = false;
 				};
 			}, []);
-			const fetchPoints = (0, react.useCallback)(async (signal) => {
-				if (inFlight.current) return false;
+			const position = useAnchoredPosition({
+				open: open && activeRegion !== void 0,
+				anchorRef: rootRef,
+				panelRef,
+				side: "top",
+				gap: 8,
+				margin: 12
+			});
+			useDismissOnOutsidePointer(rootRef, open, setOpen, panelRef);
+			const fetchUsage = (0, react.useCallback)(async (signal) => {
+				if (inFlight.current || activeRegion === void 0) return;
 				inFlight.current = true;
 				if (mounted.current) setBusy(true);
 				try {
-					const response = await fetch(withTraeRegion(TRAE_USAGE_PATH, "cn"), {
+					const response = await fetch(withTraeRegion(TRAE_USAGE_PATH, activeRegion), {
 						headers: { accept: "application/json" },
 						credentials: "same-origin",
 						...signal === void 0 ? {} : { signal }
 					});
 					if (!response.ok) throw new Error(`HTTP ${response.status}`);
 					const value = await response.json();
-					if (!mounted.current || signal?.aborted === true) return true;
-					const general = generalCreditsOf(value);
-					if (general !== void 0) {
-						setPoints(general);
-						setSignedIn(true);
-					} else setSignedIn(value.status === "signed-in");
-					setFailed(false);
+					if (!mounted.current || signal?.aborted === true) return;
+					setUsage(value);
 					setLastRefresh(Date.now());
-					return true;
+					setFailed(false);
 				} catch {
 					if (mounted.current && signal?.aborted !== true) setFailed(true);
-					return false;
 				} finally {
 					inFlight.current = false;
 					if (mounted.current) setBusy(false);
 				}
-			}, []);
+			}, [activeRegion]);
+			/**
+			* Every account's general balance — one upstream read per account.
+			*
+			* Paid only while the panel is open (see the note at the top of this file).
+			* A failure keeps whatever we already have rather than clearing it: a number
+			* that went stale is better than a switch that vanished.
+			*/
+			const fetchAccountCredits = (0, react.useCallback)(async (signal) => {
+				if (activeRegion === void 0) return;
+				try {
+					const response = await fetch(withTraeRegion(TRAE_ACCOUNT_CREDITS_PATH, activeRegion), {
+						headers: { accept: "application/json" },
+						credentials: "same-origin",
+						...signal === void 0 ? {} : { signal }
+					});
+					if (!response.ok) throw new Error(`HTTP ${response.status}`);
+					const data = await response.json();
+					if (!mounted.current || signal?.aborted === true) return;
+					if (Array.isArray(data.accounts)) setAccountCredits(data.accounts);
+				} catch {}
+			}, [activeRegion]);
 			(0, react.useEffect)(() => {
+				if (owned === void 0) return void 0;
 				let cancelled = false;
 				let timer;
 				const controller = new AbortController();
-				fetchPoints(controller.signal).finally(() => {
+				fetchUsage(controller.signal).finally(() => {
 					if (cancelled) return;
 					timer = window.setInterval(() => {
-						fetchPoints(controller.signal);
-					}, SIDEBAR_POINTS_REFRESH_INTERVAL_MS);
+						fetchUsage(controller.signal);
+					}, COMPOSER_POINTS_REFRESH_INTERVAL_MS);
 				});
 				return () => {
 					cancelled = true;
 					if (timer !== void 0) window.clearInterval(timer);
 					controller.abort();
 				};
-			}, [fetchPoints]);
-			const titleText = lastRefresh === void 0 ? void 0 : t("sidebar.lastRefresh", { time: formatClock(lastRefresh) });
-			const valueText = !signedIn ? t("sidebar.signedOut") : points === void 0 ? "—" : formatNumber(points);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "dsm-trae-sidebar-points",
-				title: titleText,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "dsm-trae-sidebar-points-line",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "dsm-trae-sidebar-points-text",
-							"aria-live": "polite",
-							children: [
-								t("sidebar.points"),
-								"：",
-								valueText
-							]
-						}), failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "dsm-trae-sidebar-points-failed",
+			}, [owned, fetchUsage]);
+			(0, react.useEffect)(() => {
+				if (!open || activeRegion === void 0) return void 0;
+				const controller = new AbortController();
+				fetchAccountCredits(controller.signal);
+				return () => {
+					controller.abort();
+				};
+			}, [
+				open,
+				activeRegion,
+				fetchAccountCredits
+			]);
+			(0, react.useEffect)(() => {
+				if (!open) return void 0;
+				const onKeyDown = (event) => {
+					if (event.key === "Escape") setOpen(false);
+				};
+				document.addEventListener("keydown", onKeyDown);
+				return () => {
+					document.removeEventListener("keydown", onKeyDown);
+				};
+			}, [open]);
+			/**
+			* Switch to another account, then re-read both the usage document and the
+			* table so the marker, the readout, and the panel all move together.
+			*
+			* The merge goes through the shared `configuredAccountsOf` helper (the card
+			* uses the same one): writing only `[region]: id` would drop the other
+			* region's selection. The write is read-back checked — `set()` resolving is
+			* not proof it landed — so a refused write reports failure instead of
+			* showing a marker on an account that was never selected.
+			*/
+			const switchTo = async (accountId) => {
+				if (settingsScope === void 0 || settingsScope.getSnapshot().writable !== true) return;
+				if (activeRegion === void 0 || switchingId !== void 0) return;
+				if (accountId === (accountCredits?.find((account) => account.selected)?.id ?? (usage?.status === "signed-in" ? usage.accountId : void 0))) return;
+				setSwitchingId(accountId);
+				setFailed(false);
+				try {
+					const configured = configuredAccountsOf(settingsScope.getSnapshot().value);
+					const accepted = await settingsScope.set("accounts", {
+						...configured,
+						[activeRegion]: accountId
+					});
+					const readBack = configuredAccountsOf(settingsScope.getSnapshot().value);
+					if (accepted === false || readBack[activeRegion] !== accountId) throw new Error("the Host did not persist the switch");
+					await fetchUsage();
+					await fetchAccountCredits();
+				} catch {
+					if (mounted.current) setFailed(true);
+				} finally {
+					if (mounted.current) setSwitchingId(void 0);
+				}
+			};
+			if (owned === void 0) return null;
+			const signedIn = usage?.status === "signed-in" ? usage : void 0;
+			const general = signedIn === void 0 ? void 0 : generalCreditsOf(signedIn);
+			const signedOut = usage !== void 0 && usage.status === "signed-out";
+			const valueText = general === void 0 ? "—" : formatCredits(general);
+			const label = t("composer.points");
+			/**
+			* The table's rows: every account in this region, with its general balance.
+			*
+			* The endpoint's answer is authoritative (it carries the figures). Before it
+			* lands — or if it fails — fall back to the usage document's account list so
+			* the switches are reachable immediately, showing `—` for the figure rather
+			* than a spinner the user has to wait on.
+			*/
+			const selectedId = accountCredits?.find((account) => account.selected)?.id ?? (signedIn === void 0 ? void 0 : signedIn.accountId);
+			const rows = (accountCredits ?? (signedIn === void 0 ? [] : signedIn.accounts.filter((account) => account.region === activeRegion).map((account) => ({
+				id: account.id,
+				accountName: account.accountName,
+				selected: account.selected
+			})))).map((row) => {
+				if (row.id !== selectedId || row.generalAvailable !== void 0 || general === void 0) return row;
+				return {
+					...row,
+					generalAvailable: general
+				};
+			});
+			const canSwitch = settingsScope !== void 0 && settingsScope.getSnapshot().writable === true;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				ref: rootRef,
+				className: "dsm-trae-composer-points",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "dsm-trae-composer-points-trigger",
+					"aria-haspopup": "dialog",
+					"aria-expanded": open,
+					onClick: () => {
+						setOpen(!open);
+					},
+					children: [
+						label,
+						" · ",
+						valueText
+					]
+				}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: panelRef,
+					className: "dsm-trae-composer-panel",
+					style: position ?? {
+						visibility: "hidden",
+						left: 0,
+						top: 0
+					},
+					role: "dialog",
+					"aria-label": t("composer.panelTitle"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsm-trae-composer-panel-head",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsm-trae-composer-panel-title",
+								children: t("composer.panelTitle")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsm-trae-composer-panel-refresh",
+								disabled: busy || switchingId !== void 0,
+								onClick: () => {
+									fetchUsage();
+								},
+								children: busy ? t("composer.refreshing") : t("composer.refresh")
+							})]
+						}),
+						signedOut ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dsm-trae-composer-panel-empty",
+							children: t("composer.signedOut")
+						}) : rows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dsm-trae-composer-panel-empty",
+							children: t("composer.noAccounts")
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+							className: "dsm-trae-composer-panel-table",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+								scope: "col",
+								children: t("composer.account")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+								scope: "col",
+								className: "dsm-trae-composer-panel-num",
+								children: t("composer.generalCredits")
+							})] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: rows.map((row) => {
+								const current = row.id === selectedId;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+									className: current ? "dsm-trae-composer-panel-row-current" : void 0,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+										scope: "row",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "dsm-trae-composer-panel-switch",
+											disabled: !canSwitch || switchingId !== void 0 || current,
+											"aria-label": t("composer.switchTo", { account: row.accountName }),
+											onClick: () => {
+												switchTo(row.id);
+											},
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "dsm-trae-composer-panel-dot",
+												"aria-hidden": "true"
+											}), row.accountName]
+										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+										className: "dsm-trae-composer-panel-num",
+										children: row.generalAvailable === void 0 ? "—" : formatCredits(row.generalAvailable)
+									})]
+								}, row.id);
+							}) })]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dsm-trae-composer-panel-foot",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+								t("composer.lastRefresh"),
+								" ",
+								lastRefresh === void 0 ? "—" : formatClock(lastRefresh)
+							] })
+						}),
+						failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dsm-trae-composer-panel-error",
 							role: "status",
-							children: t("sidebar.refreshFailed")
-						}) : null]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "dsm-trae-sidebar-points-refresh",
-						disabled: busy,
-						"aria-label": busy ? t("sidebar.refreshing") : t("sidebar.refresh"),
-						title: busy ? t("sidebar.refreshing") : t("sidebar.refresh"),
-						onClick: () => {
-							fetchPoints();
-						},
-						children: busy ? t("sidebar.refreshing") : t("sidebar.refresh")
-					}),
-					onHide === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "dsm-trae-sidebar-points-hide",
-						"aria-label": t("sidebar.hide"),
-						title: t("sidebar.hide"),
-						onClick: onHide,
-						children: "×"
-					})
-				]
+							children: t("composer.refreshFailed")
+						}) : null
+					]
+				}), document.body)]
 			});
 		}
 		//#endregion
-		//#region src/client/SidebarPointsGate.tsx
+		//#region src/client/ComposerPointsGate.tsx
 		/**
-		* Gate between the `sidebar.footer.action` slot and the compact credit line.
-		*
-		* Kept in its own module (rather than inside the browser-plugin entry) so it
-		* can be imported from the Node/jsdom test suite: the entry imports
-		* browser-only DSH packages the test environment cannot load, but this gate
-		* depends only on React, the card's settings-scope shape and the line
-		* component.
+		* Decides whether the composer credit readout belongs in this session, by
+		* reading the Host's own `modelSelection` projection and the plugin's
+		* `showPointsInMainUi` switch.
 		*
-		* TWO states:
+		* Kept separate from {@link ComposerPoints} (and from the browser-plugin entry)
+		* so the decision can be unit-tested without a Host: the entry imports
+		* browser-only DSH packages the test environment cannot load, while this module
+		* depends only on React and a narrow projection shape.
 		*
-		*  - on  → {@link SidebarPoints}, which owns the fetch loop and its timer;
-		*  - off → NOTHING. The row is absent from the DOM, not hidden.
+		* WHY the projection rather than this plugin's own state: the projection is
+		* what the model picker writes and what the next request will use, so the
+		* readout cannot disagree with the model actually in effect. `next` outranks
+		* `lastUsed` because a selection that has been made but not yet sent is still
+		* what the composer shows the user.
 		*
-		* Off used to leave a small "积分" chip behind, on the theory that a switch you
-		* cannot find is no switch at all (2.9.1). That safety net is no longer needed:
-		* the card carries the same checkbox twice — at the top of the card and beside
-		* the model actions — so the way back is always where the feature is
-		* configured. What the user asked for is for the row to be gone, and a leftover
-		* chip still occupies the footer they wanted cleared.
+		* The switch is read the same way the retired sidebar gate read it: absent or
+		* false means OFF, and only an explicit `true` shows the readout. The composer
+		* row is shared with the shell's own permission/agent/model controls, so the
+		* readout must be asked for, not imposed — 2.13.0 rendered it unconditionally
+		* and 2.13.3 restored the opt-in after the user went looking for the switch.
+		*/
+		/**
+		* The provider route the session is currently pointed at.
 		*
-		* The collapsed rail also renders nothing: the shell squeezes the footer to a
-		* 56px strip rather than hiding it, and the line does not read well there — see
-		* the bail-out below.
+		* `next` wins over `lastUsed`: a switch that has landed but not yet been sent
+		* is still the selection the composer displays.
 		*/
+		function selectedProviderOf(projection) {
+			const provider = (projection?.next ?? projection?.lastUsed)?.provider;
+			return typeof provider === "string" && provider !== "" ? provider : void 0;
+		}
 		/**
-		* Read the sidebar-credit switch out of a committed settings snapshot.
+		* Read the composer-readout switch out of a committed settings snapshot.
 		*
-		* Absent means ON: the field defaults to true on the host, and a settings
-		* scope that has not populated yet must not blink the line away. Only an
-		* explicit `false` (the user turned it off, from the line or the card) hides
-		* the balance.
+		* Absent means OFF, matching the host default (`false`): a scope that has not
+		* populated yet, or a host too old to serve the field, must not put a row in
+		* the composer toolbar that the user never asked for.
 		*/
-		function sidebarPointsEnabledOf(scope) {
-			if (scope === void 0) return true;
-			return unwrapVolatileDeep(scope.getSnapshot().value)?.showPointsInMainUi !== false;
+		function composerPointsEnabledOf(scope) {
+			if (scope === void 0) return false;
+			return unwrapVolatileDeep(scope.getSnapshot().value)?.showPointsInMainUi === true;
 		}
-		function SidebarPointsGate(props) {
-			const { t, settingsScope, wide } = props;
-			const [enabled, setEnabled] = (0, react.useState)(() => sidebarPointsEnabledOf(settingsScope));
+		function ComposerPointsGate(props) {
+			const { t, settingsScope, useProjection } = props;
+			const [enabled, setEnabled] = (0, react.useState)(() => composerPointsEnabledOf(settingsScope));
 			(0, react.useEffect)(() => settingsScope?.subscribe(() => {
-				setEnabled(sidebarPointsEnabledOf(settingsScope));
+				setEnabled(composerPointsEnabledOf(settingsScope));
 			}), [settingsScope]);
-			/**
-			* Write the switch back through the same field the card writes, so the two
-			* controls can never disagree. The read-back is not awaited for its value:
-			* the subscription above re-renders when the committed snapshot changes, and
-			* an unwritable scope simply leaves the current state alone.
-			*/
-			const setShown = (0, react.useCallback)((next) => {
-				if (settingsScope === void 0 || settingsScope.getSnapshot().writable !== true) return;
-				settingsScope.set("showPointsInMainUi", next).catch(() => {});
-			}, [settingsScope]);
-			if (wide === false) return null;
+			const projection = useProjection === void 0 ? void 0 : useProjection("modelSelection");
 			if (!enabled) return null;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarPoints, {
+			const provider = selectedProviderOf(projection);
+			const region = provider === void 0 ? void 0 : TRAE_COMPOSER_PROVIDERS[provider];
+			if (region === void 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposerPoints, {
 				t,
-				onHide: () => {
-					setShown(false);
-				}
+				provider,
+				region,
+				...settingsScope === void 0 ? {} : { settingsScope }
 			});
 		}
 		//#endregion
@@ -1843,15 +2261,19 @@ window.__ModuleLoader__.load({
 			"row.modelsTestEnabled": "Test enabled models",
 			"row.modelsTesting": "Testing {done}/{total}…",
 			"row.modelsTestHint": "Sends one minimal message per enabled model to see which ones actually answer. Costs a small amount of quota.",
-			"row.showPointsInMainUi": "Show credits in the DSH main UI",
-			"row.showPointsInMainUiHint": "Keep a general-credit line with a refresh button at the bottom of the DSH sidebar (hidden while the sidebar is collapsed; refreshes every 5 minutes).",
-			"sidebar.points": "Trae credits",
-			"sidebar.refresh": "Refresh",
-			"sidebar.refreshing": "Refreshing…",
-			"sidebar.lastRefresh": "Last refreshed {time}",
-			"sidebar.refreshFailed": "Refresh failed",
-			"sidebar.signedOut": "Not signed in",
-			"sidebar.hide": "Hide credits",
+			"row.showPointsInMainUi": "Show credits in the composer row",
+			"row.showPointsInMainUiHint": "Show a clickable Trae CN · <balance> readout in the composer tool row, only while the selected model belongs to this plugin. Click it for the account and balance panel.",
+			"composer.switchTo": "Switch to {account}",
+			"composer.noAccounts": "No account in this region",
+			"composer.panelTitle": "Trae credits",
+			"composer.account": "Account",
+			"composer.generalCredits": "General credits",
+			"composer.lastRefresh": "Last refreshed",
+			"composer.signedOut": "Not signed in",
+			"composer.points": "Trae CN",
+			"composer.refresh": "Refresh credits",
+			"composer.refreshing": "Refreshing credits…",
+			"composer.refreshFailed": "Could not refresh credits",
 			"row.accountsRefreshed": "Accounts refreshed: {count} found{selected}",
 			"row.accountsKept": "still bound to",
 			"row.accountsRefreshedNone": "Accounts refreshed: no usable Trae account found",
@@ -1955,15 +2377,19 @@ window.__ModuleLoader__.load({
 			"row.modelsTestEnabled": "一键测试启用模型",
 			"row.modelsTesting": "正在测试 {done}/{total}…",
 			"row.modelsTestHint": "给每个已启用模型发一条最小消息，看哪些真的能应答。会消耗少量额度。",
-			"row.showPointsInMainUi": "在DSH主界面显示积分状态",
-			"row.showPointsInMainUiHint": "在 DSH 侧边栏底部常驻一行通用积分与刷新按钮（收起侧边栏时不显示，每 5 分钟自动刷新）。",
-			"sidebar.points": "Trae通用积分",
-			"sidebar.refresh": "刷新",
-			"sidebar.refreshing": "刷新中…",
-			"sidebar.lastRefresh": "最近刷新 {time}",
-			"sidebar.refreshFailed": "刷新失败",
-			"sidebar.signedOut": "未登录",
-			"sidebar.hide": "隐藏积分",
+			"row.showPointsInMainUi": "在输入框工具栏显示积分读数",
+			"row.showPointsInMainUiHint": "在输入框工具栏显示可点击的「Trae CN · 余额」读数，仅当选中的模型属于本插件时出现；点击可查看账号与积分明细。",
+			"composer.switchTo": "切换到 {account}",
+			"composer.noAccounts": "该区域暂无账号",
+			"composer.panelTitle": "Trae 积分",
+			"composer.account": "账号",
+			"composer.generalCredits": "通用积分",
+			"composer.lastRefresh": "最近刷新",
+			"composer.signedOut": "未登录",
+			"composer.points": "Trae CN",
+			"composer.refresh": "刷新积分",
+			"composer.refreshing": "正在刷新积分…",
+			"composer.refreshFailed": "积分刷新失败",
 			"row.accountsRefreshed": "已刷新账号：找到 {count} 个账号{selected}",
 			"row.accountsKept": "仍绑定",
 			"row.accountsRefreshedNone": "已刷新账号：未找到可用的 Trae 账号",
@@ -2125,31 +2551,37 @@ window.__ModuleLoader__.load({
 				registerCard("plugins.bundle.config", "dsh-connect-trae");
 				registerCard("plugins.row.config", "dsh-connect-trae#dsh-connect-trae");
 				/**
-				* General-credit line at the sidebar foot (`sidebar.footer.action`, a
-				* root-scope list slot), contributed by JiewiW (issue #26).
+				* Credit readout in the composer tool row (`conversation.input.left`, a
+				* session-scope list slot).
+				*
+				* Provider-scoped on purpose: it renders only while the session's selected
+				* model belongs to this plugin. That is what keeps two connector plugins
+				* from competing for one shared row — the sidebar foot, where this line used
+				* to live, is a single root row, and the observed result beside
+				* dsh-connect-workbuddy's two rows was this plugin's line squeezed down to a
+				* clipped "Tr".
 				*
-				* Registration is unconditional for the slot's lifetime; the component
-				* renders nothing until the card switch is on, and nothing again while the
-				* sidebar is collapsed — so an off switch (or a collapsed rail) leaves zero
-				* DOM and no fetch loop.
+				* Registration is unconditional; the gate reads the Host's modelSelection
+				* projection and returns null for every other provider, so nothing is drawn
+				* and no fetch loop starts while another provider is selected.
 				*/
-				const registerSidebarPoints = () => {
+				const registerComposerPoints = () => {
 					try {
-						ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register({
-							name: "sidebar.footer.action",
-							id: "dsh-connect-trae-points",
+						ctx.slots.inject("conversation.input.left", () => ctx.slots.register({
+							name: "conversation.input.left",
+							id: "dsh-connect-trae-composer-points",
 							order: 4,
 							locale: namespace,
 							inject: () => ({
 								t,
 								settingsScope
 							})
-						}, SidebarPointsGate));
+						}, ComposerPointsGate));
 					} catch (error) {
-						console.error("[dsh-connect-trae] sidebar points slot failed to register (host provider unaffected):", error);
+						console.error("[dsh-connect-trae] composer points slot failed to register (host provider unaffected):", error);
 					}
 				};
-				registerSidebarPoints();
+				registerComposerPoints();
 			} catch (error) {
 				console.error("[dsh-connect-trae] client card failed to load (host provider unaffected):", error);
 			}