dsh-connect-trae 2.8.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}
@@ -263,7 +297,12 @@ window.__ModuleLoader__.load({
 .dsm-trae-model-name-rate{color:var(--dsw-alias-label-tertiary,#999);font-size:11px;font-weight:400;line-height:16px;flex:none}
 /* The two head actions sit together; the probe one SPENDS quota, so it carries
    the hint tooltip rather than looking like its read-only sibling. */
+/* The sidebar-credit switch. Two instances share this style: the card's own
+   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-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)}
 .dsm-trae-usage-alternative-text{margin:0;flex:1 1 auto;font-size:12px;line-height:18px;color:var(--dsw-alias-label-primary,#e6e6e6)}
 .dsm-trae-usage-switch-button{flex:0 0 auto;padding:5px 10px;border:1px solid var(--dsw-alias-border-l2,#3a3d45);border-radius:8px;background:var(--dsw-alias-bg-layer-3,#2c2f36);color:var(--dsw-alias-label-primary,#e6e6e6);font-size:12px;line-height:16px;cursor:pointer}
@@ -309,6 +348,129 @@ window.__ModuleLoader__.load({
    an error: it is Trae's one-per-device-per-day rule, and the day is simply
    spent. Rendering it in the error colour would read as a plugin fault. */
 .dsm-trae-checkin-note{margin:8px 0 0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#c6c9d0)}
+`;
+		/**
+		* 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.
+		*
+		* `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 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
@@ -321,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
@@ -510,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;
@@ -517,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]);
@@ -1046,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", {
@@ -1464,6 +1647,547 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/popover.ts
+		/**
+		* 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.
+		*
+		* 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.
+		*
+		* 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.
+		*/
+		/**
+		* Clearance to keep from the top of the viewport.
+		*
+		* 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.
+		*/
+		if (typeof document !== "undefined") {
+			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 = COMPOSER_POINTS_CSS;
+				document.head.appendChild(styleTag);
+			}
+		}
+		/**
+		* 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.
+		*
+		* 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;
+		}
+		/** 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);
+			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 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, 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;
+					setUsage(value);
+					setLastRefresh(Date.now());
+					setFailed(false);
+				} catch {
+					if (mounted.current && signal?.aborted !== true) setFailed(true);
+				} 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();
+				fetchUsage(controller.signal).finally(() => {
+					if (cancelled) return;
+					timer = window.setInterval(() => {
+						fetchUsage(controller.signal);
+					}, COMPOSER_POINTS_REFRESH_INTERVAL_MS);
+				});
+				return () => {
+					cancelled = true;
+					if (timer !== void 0) window.clearInterval(timer);
+					controller.abort();
+				};
+			}, [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("composer.refreshFailed")
+						}) : null
+					]
+				}), document.body)]
+			});
+		}
+		//#endregion
+		//#region src/client/ComposerPointsGate.tsx
+		/**
+		* Decides whether the composer credit readout belongs in this session, by
+		* reading the Host's own `modelSelection` projection and the plugin's
+		* `showPointsInMainUi` switch.
+		*
+		* 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.
+		*
+		* 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.
+		*
+		* 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.
+		*
+		* `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 composer-readout switch out of a committed settings snapshot.
+		*
+		* 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 composerPointsEnabledOf(scope) {
+			if (scope === void 0) return false;
+			return unwrapVolatileDeep(scope.getSnapshot().value)?.showPointsInMainUi === true;
+		}
+		function ComposerPointsGate(props) {
+			const { t, settingsScope, useProjection } = props;
+			const [enabled, setEnabled] = (0, react.useState)(() => composerPointsEnabledOf(settingsScope));
+			(0, react.useEffect)(() => settingsScope?.subscribe(() => {
+				setEnabled(composerPointsEnabledOf(settingsScope));
+			}), [settingsScope]);
+			const projection = useProjection === void 0 ? void 0 : useProjection("modelSelection");
+			if (!enabled) return null;
+			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,
+				provider,
+				region,
+				...settingsScope === void 0 ? {} : { settingsScope }
+			});
+		}
+		//#endregion
 		//#region src/client/locales.ts
 		/**
 		* Plugin-card copy registered under the settings.trae locale namespace.
@@ -1537,6 +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 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",
@@ -1640,6 +2377,19 @@ window.__ModuleLoader__.load({
 			"row.modelsTestEnabled": "一键测试启用模型",
 			"row.modelsTesting": "正在测试 {done}/{total}…",
 			"row.modelsTestHint": "给每个已启用模型发一条最小消息，看哪些真的能应答。会消耗少量额度。",
+			"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 账号",
@@ -1800,6 +2550,38 @@ window.__ModuleLoader__.load({
 				};
 				registerCard("plugins.bundle.config", "dsh-connect-trae");
 				registerCard("plugins.row.config", "dsh-connect-trae#dsh-connect-trae");
+				/**
+				* 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; 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 registerComposerPoints = () => {
+					try {
+						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
+							})
+						}, ComposerPointsGate));
+					} catch (error) {
+						console.error("[dsh-connect-trae] composer points slot failed to register (host provider unaffected):", error);
+					}
+				};
+				registerComposerPoints();
 			} catch (error) {
 				console.error("[dsh-connect-trae] client card failed to load (host provider unaffected):", error);
 			}