dsh-provider-usage 0.3.9 → 0.3.11

package/lib/client.js

@@ -13,6 +13,7 @@ window.__ModuleLoader__.load({
 			"action.label": "用量",
 			"action.aria": "Provider 用量",
 			"panel.title": "Provider 用量",
+			"panel.resize": "拖拽调整面板高度",
 			"panel.refresh": "立即刷新",
 			"panel.refreshing": "刷新中…",
 			"lang.switch": "Switch to English",
@@ -56,6 +57,7 @@ window.__ModuleLoader__.load({
 			"action.label": "Usage",
 			"action.aria": "Provider usage",
 			"panel.title": "Provider Usage",
+			"panel.resize": "Drag to resize panel",
 			"panel.refresh": "Refresh now",
 			"panel.refreshing": "Refreshing…",
 			"lang.switch": "切换到中文",
@@ -117,11 +119,52 @@ window.__ModuleLoader__.load({
 		const POS_KEY = "dsh.provider-usage.floatPos";
 		const THRESHOLD_RED_KEY = "dsh.provider-usage.balanceRedThreshold";
 		const THRESHOLD_YELLOW_KEY = "dsh.provider-usage.balanceYellowThreshold";
+		const PANEL_HEIGHT_KEY = "dsh.provider-usage.panelHeight";
 		const DEFAULT_INTERVAL = 60;
 		/** Balance thresholds fall back to these hardcoded defaults when neither the
 		host config nor a stored override provides them. */
 		const DEFAULT_BALANCE_RED = 10;
 		const DEFAULT_BALANCE_YELLOW = 30;
+		/** Smallest panel height the top-edge drag allows (px). */
+		const PANEL_MIN_H = 120;
+		/** Largest panel height the top-edge drag allows: the viewport minus a
+		breathing margin, so the panel can never outgrow the screen. */
+		function panelMaxHeight() {
+			return Math.max(PANEL_MIN_H, window.innerHeight - 24);
+		}
+		/** Bottom padding of the open panel (px), read live so the layout math stays
+		correct if the stylesheet ever changes it. */
+		function panelPaddingBottom(panel) {
+			const pad = Number.parseFloat(getComputedStyle(panel).paddingBottom);
+			return Number.isFinite(pad) ? pad : 0;
+		}
+		/**
+		* Natural content height of the open panel — children plus padding — even
+		* while the panel itself is height-constrained or scrolled (children rects
+		* are compensated by scrollTop). This is the grow limit: at this height the
+		* panel needs no scrolling and leaves no blank strip at the bottom.
+		*/
+		function panelContentHeight(panel) {
+			const panelTop = panel.getBoundingClientRect().top;
+			let bottom = 0;
+			for (const child of Array.from(panel.children)) {
+				const rect = child.getBoundingClientRect();
+				bottom = Math.max(bottom, rect.bottom - panelTop + panel.scrollTop);
+			}
+			return Math.ceil(bottom) + panelPaddingBottom(panel);
+		}
+		/**
+		* Shrink limit: the height that keeps the panel head plus the FIRST provider
+		* card fully visible (bottom padding included). Falls back to PANEL_MIN_H
+		* when no provider card is present (e.g. empty list).
+		*/
+		function firstCardMinHeight(panel) {
+			const card = panel.querySelector(".dsh-usage-card");
+			if (card === null) return PANEL_MIN_H;
+			const panelTop = panel.getBoundingClientRect().top;
+			const cardRect = card.getBoundingClientRect();
+			return Math.ceil(cardRect.bottom - panelTop + panel.scrollTop) + panelPaddingBottom(panel);
+		}
 		/** Floating ball diameter in px; drag math derives from it. */
 		const BALL_SIZE = 32;
 		/** Panel-level override stored in localStorage; null means follow the harness language. */
@@ -183,6 +226,21 @@ window.__ModuleLoader__.load({
 				localStorage.setItem(key, value);
 			} catch {}
 		}
+		function readStoredPanelHeight() {
+			try {
+				const raw = localStorage.getItem(PANEL_HEIGHT_KEY);
+				if (raw === null) return null;
+				const value = Number(raw);
+				return Number.isFinite(value) && value >= PANEL_MIN_H ? value : null;
+			} catch {
+				return null;
+			}
+		}
+		function storePanelHeight(value) {
+			try {
+				localStorage.setItem(PANEL_HEIGHT_KEY, String(value));
+			} catch {}
+		}
 		/** Equal margin from the chat area's left edge and the window's bottom edge. */
 		const DOCK_MARGIN = 24;
 		/**
@@ -271,29 +329,35 @@ window.__ModuleLoader__.load({
 			if (value < yellow) return "warn";
 			return "ok";
 		}
+		const TONE_SEVERITY = {
+			ok: 0,
+			warn: 1,
+			danger: 2
+		};
+		/** More severe of two tones; used WITHIN one category. */
+		function worseTone(a, b) {
+			if (a === null) return b;
+			if (b === null) return a;
+			return TONE_SEVERITY[a] >= TONE_SEVERITY[b] ? a : b;
+		}
 		/**
-		* Tone for one usage row. Windows with a percent (5h/weekly limits) keep the
-		* percent-based tone; rows labeled 'credits' carry a remaining balance and
-		* are judged by the balance thresholds instead.
+		* Aggregate tone for one provider. The subscription/usage windows ("plan")
+		* and the prepaid balance/credits are two INDEPENDENT categories joined with
+		* OR semantics: the provider stays green while either category has enough
+		* left (the plan is normally consumed before credits, so the surviving
+		* resource sets the tone), and when both are running low the lighter warning
+		* wins. Within one category the worst row still governs — an exhausted 5h
+		* window is not "enough plan" just because the weekly window is healthy.
 		*/
-		function usageRowTone(row, red, yellow) {
-			if (row.label === "credits") return balanceTone(row.remaining, red, yellow);
-			return barTone(row.percent);
-		}
-		/** Worst balance/usage tone across one provider's balances and usage rows. */
 		function providerTone(provider, red, yellow) {
-			let tone = "ok";
-			if (provider.kind === "balance") for (const row of provider.balances ?? []) {
-				const rowTone = balanceTone(toAmount(row.total), red, yellow);
-				if (rowTone === "danger") return "danger";
-				if (rowTone === "warn") tone = "warn";
-			}
-			for (const row of provider.usages ?? []) {
-				const rowTone = usageRowTone(row, red, yellow);
-				if (rowTone === "danger") return "danger";
-				if (rowTone === "warn") tone = "warn";
-			}
-			return tone;
+			let planTone = null;
+			let creditTone = null;
+			if (provider.kind === "balance") for (const row of provider.balances ?? []) creditTone = worseTone(creditTone, balanceTone(toAmount(row.total), red, yellow));
+			for (const row of provider.usages ?? []) if (row.label === "credits") creditTone = worseTone(creditTone, balanceTone(row.remaining, red, yellow));
+			else planTone = worseTone(planTone, barTone(row.percent));
+			if (planTone === null) return creditTone ?? "ok";
+			if (creditTone === null) return planTone;
+			return TONE_SEVERITY[planTone] <= TONE_SEVERITY[creditTone] ? planTone : creditTone;
 		}
 		/** Worst health across the fetch + the provider IN USE: drives the trigger's
 		status dot. Only the active provider (the composer's current selection)
@@ -317,6 +381,30 @@ window.__ModuleLoader__.load({
 			if (value === null) return "—";
 			return Number.isInteger(value) ? String(value) : value.toFixed(2);
 		}
+		/**
+		* Refine the host's `active` flags with the provider of the FOCUSED session
+		* (the composer's own state), so a session switch re-highlights instantly
+		* even though the host only tracks the last explicit selection. Returns the
+		* same object when nothing changes; `undefined` provider leaves the host's
+		* flags untouched.
+		*/
+		function applyActiveProvider(data, provider) {
+			if (provider === void 0 || !Array.isArray(data.providers)) return data;
+			let changed = false;
+			const providers = data.providers.map((entry) => {
+				const active = entry.id === provider;
+				if (active === entry.active) return entry;
+				changed = true;
+				return {
+					...entry,
+					active
+				};
+			});
+			return changed ? {
+				...data,
+				providers
+			} : data;
+		}
 		function UsageRows({ provider, now, red, yellow, t }) {
 			const rows = provider.usages ?? [];
 			if (rows.length === 0) return null;
@@ -497,7 +585,7 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
-		function UsageAction({ t, fetchUsage }) {
+		function UsageAction({ t, fetchUsage, getActiveProvider, subscribeActiveChange }) {
 			const [open, setOpen] = (0, react.useState)(false);
 			const [data, setData] = (0, react.useState)(null);
 			const [error, setError] = (0, react.useState)(null);
@@ -519,6 +607,9 @@ window.__ModuleLoader__.load({
 			});
 			/** Transient ball position while dragging (cursor-centered); null when docked. */
 			const [dragPos, setDragPos] = (0, react.useState)(null);
+			/** User-resized panel height in px; null = auto-size to content (max-height
+			+ scroll). Persisted, like every other panel preference. */
+			const [panelHeight, setPanelHeight] = (0, react.useState)(() => readStoredPanelHeight());
 			const harnessLang = t("lang.switch") === zh["lang.switch"] ? "zh" : t("lang.switch") === en["lang.switch"] ? "en" : null;
 			const lang = langOverride ?? harnessLang ?? "en";
 			const tt = (0, react.useMemo)(() => makeT(lang === "zh" ? zh : en), [lang]);
@@ -543,13 +634,18 @@ window.__ModuleLoader__.load({
 			const dragRef = (0, react.useRef)(null);
 			/** Set when a drag ends so the trailing click does not toggle the panel. */
 			const suppressClickRef = (0, react.useRef)(false);
+			/** Active panel-height drag; cleared on pointerup/pointercancel. */
+			const resizeRef = (0, react.useRef)(null);
+			/** Resize bounds snapshotted at drag start from the live layout: min = first
+			provider card fully visible, max = content height (no scroll, no blank). */
+			const resizeLimitsRef = (0, react.useRef)(null);
 			const refresh = (0, react.useCallback)(async () => {
 				if (inFlight.current) return;
 				inFlight.current = true;
 				setLoading(true);
 				try {
 					const result = await fetchUsage();
-					setData(result);
+					setData(applyActiveProvider(result, getActiveProvider?.()));
 					setError(null);
 				} catch (reason) {
 					setError(reason instanceof Error ? reason.message : String(reason));
@@ -557,7 +653,7 @@ window.__ModuleLoader__.load({
 					inFlight.current = false;
 					setLoading(false);
 				}
-			}, [fetchUsage]);
+			}, [fetchUsage, getActiveProvider]);
 			(0, react.useEffect)(() => {
 				refresh();
 			}, [refresh]);
@@ -575,6 +671,11 @@ window.__ModuleLoader__.load({
 				if (readStoredThreshold(THRESHOLD_RED_KEY) === null && typeof data.balanceRedThreshold === "number") setRedThreshold(String(data.balanceRedThreshold));
 				if (readStoredThreshold(THRESHOLD_YELLOW_KEY) === null && typeof data.balanceYellowThreshold === "number") setYellowThreshold(String(data.balanceYellowThreshold));
 			}, [data]);
+			(0, react.useEffect)(() => {
+				return subscribeActiveChange?.(() => {
+					setData((prev) => prev === null ? prev : applyActiveProvider(prev, getActiveProvider?.()));
+				});
+			}, []);
 			(0, react.useEffect)(() => {
 				if (!open) return;
 				setNow(Date.now());
@@ -615,6 +716,16 @@ window.__ModuleLoader__.load({
 				pinnedPos,
 				viewport
 			]);
+			(0, react.useLayoutEffect)(() => {
+				const panel = panelRef.current;
+				if (panel === null || panelHeight === null) return;
+				const clamped = Math.min(panelHeight, panelContentHeight(panel), panelMaxHeight());
+				if (clamped !== panelHeight) setPanelHeight(clamped);
+			}, [
+				panelHeight,
+				data,
+				open
+			]);
 			(0, react.useEffect)(() => {
 				const onResize = () => setViewport({
 					w: window.innerWidth,
@@ -675,6 +786,45 @@ window.__ModuleLoader__.load({
 				dragRef.current = null;
 				setDragPos(null);
 			};
+			const onResizePointerDown = (event) => {
+				event.currentTarget.setPointerCapture(event.pointerId);
+				const panel = panelRef.current;
+				const rect = panel?.getBoundingClientRect();
+				const startHeight = panelHeight ?? Math.round(rect?.height ?? 0);
+				if (panel !== null) {
+					const viewportMax = panelMaxHeight();
+					const max = Math.min(panelContentHeight(panel), viewportMax);
+					const min = Math.min(Math.max(firstCardMinHeight(panel), PANEL_MIN_H), max);
+					resizeLimitsRef.current = {
+						min,
+						max
+					};
+				} else resizeLimitsRef.current = {
+					min: PANEL_MIN_H,
+					max: panelMaxHeight()
+				};
+				resizeRef.current = {
+					pointerId: event.pointerId,
+					startY: event.clientY,
+					startHeight,
+					current: startHeight
+				};
+			};
+			const onResizePointerMove = (event) => {
+				const resize = resizeRef.current;
+				if (resize === null || resize.pointerId !== event.pointerId) return;
+				const limits = resizeLimitsRef.current;
+				const next = limits === null ? resize.startHeight + (resize.startY - event.clientY) : Math.min(Math.max(resize.startHeight + (resize.startY - event.clientY), limits.min), limits.max);
+				resize.current = next;
+				setPanelHeight(next);
+			};
+			const endResize = (event) => {
+				const resize = resizeRef.current;
+				if (resize === null || resize.pointerId !== event.pointerId) return;
+				resizeRef.current = null;
+				resizeLimitsRef.current = null;
+				storePanelHeight(resize.current);
+			};
 			const onBallClick = () => {
 				if (suppressClickRef.current) {
 					suppressClickRef.current = false;
@@ -717,10 +867,23 @@ window.__ModuleLoader__.load({
 					style: {
 						left: panelPos.left,
 						top: panelPos.top,
-						bottom: panelPos.bottom
+						bottom: panelPos.bottom,
+						...panelHeight !== null ? {
+							height: Math.min(panelHeight, panelMaxHeight()),
+							maxHeight: "none"
+						} : {}
 					},
 					onKeyDown,
 					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-usage-resize",
+							title: tt("panel.resize"),
+							"aria-label": tt("panel.resize"),
+							onPointerDown: onResizePointerDown,
+							onPointerMove: onResizePointerMove,
+							onPointerUp: endResize,
+							onPointerCancel: endResize
+						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "dsh-usage-head",
 							children: [
@@ -921,6 +1084,27 @@ window.__ModuleLoader__.load({
   --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
   --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
 }
+/* Top-edge resize handle: sticks to the panel top even while the body
+   scrolls, so it is always grabbable; drag to make the panel taller/shorter
+   (height persisted in localStorage). */
+.dsh-usage-resize {
+  position: sticky; top: 0; z-index: 2; flex: none;
+  height: 6px; margin: -4px 0 0;
+  cursor: ns-resize; touch-action: none;
+  border-radius: 3px;
+}
+.dsh-usage-resize::after {
+  content: ''; position: absolute; left: 50%; top: 50%;
+  transform: translate(-50%, -50%);
+  width: 32px; height: 3px; border-radius: 2px;
+  background: var(--dsw-alias-border-l2);
+}
+.dsh-usage-resize:hover, .dsh-usage-resize:active {
+  background: color-mix(in srgb, var(--dsw-alias-accent, #4f8cff) 25%, transparent);
+}
+.dsh-usage-resize:hover::after, .dsh-usage-resize:active::after {
+  background: var(--dsw-alias-accent, #4f8cff);
+}
 .dsh-usage-head {
   display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px;
   border-bottom: 1px solid var(--dsw-alias-border-l2);
@@ -1055,12 +1239,27 @@ window.__ModuleLoader__.load({
 		* sidebar footer's additive action slot. Data comes from the host `usage`
 		* Typert Remote (SRC mode — no generated descriptors) through the raw RPC
 		* caller on the connection service.
+		*
+		* The "provider in use" flag is refined CLIENT-side: the host marks the route
+		* from the GLOBAL default model selection, which only moves on an explicit
+		* composer pick — switching between sessions with different per-session
+		* selections would leave it stale. The focused session's own effective
+		* selection (pending → last used → host default, mirrored by the composer's
+		* model seat) is read live from the client session services and overrides the
+		* host flag, so the panel follows session switches immediately.
+		*/
+		/**
+		* Required client services: slot registry, locale seats, the connection RPC
+		* caller, and the live session/model-selection state used to refine the
+		* "in use" flag (`sessions` + `modelDirectories`, both mounted by the web
+		* app — the latter is the composer model seat's own service).
 		*/
-		/** Required client services: slot registry, locale seats, and the connection RPC caller. */
 		const inject = [
 			"slots",
 			"locale",
-			"connection"
+			"connection",
+			"sessions",
+			"modelDirectories"
 		];
 		function apply(ctx) {
 			ensureStyles();
@@ -1073,12 +1272,61 @@ window.__ModuleLoader__.load({
 				if (!result.ok) throw new Error(`${result.error.code}: ${result.error.message}`);
 				return result.value;
 			};
+			/**
+			* The provider the FOCUSED session's composer shows (and its agent would
+			* use): the session's durable model selection, else the deployment default
+			* — exactly what the host resolves per session. Undefined while the client
+			* session state is not ready; the host's own flag then stands.
+			*/
+			const getActiveProvider = () => {
+				const current = ctx.sessions?.list?.getSnapshot()?.current;
+				if (typeof current !== "string" || current === "") return void 0;
+				try {
+					const provider = (ctx.modelDirectories?.directoryFor(current))?.store?.getSnapshot()?.current?.provider;
+					return typeof provider === "string" && provider !== "" ? provider : void 0;
+				} catch {
+					return;
+				}
+			};
+			/**
+			* Re-derive the panel's "in use" flag the moment the focused session or its
+			* model selection changes — no need to wait for the next poll tick. The
+			* directory subscription follows the CURRENT focused session and is
+			* re-pointed on every session switch, so a late projection load still lands.
+			*/
+			const subscribeActiveChange = (onChange) => {
+				const sessions = ctx.sessions;
+				if (typeof sessions?.list?.subscribe !== "function") return () => {};
+				let directoryUnsub = null;
+				const followDirectory = () => {
+					directoryUnsub?.();
+					directoryUnsub = null;
+					const current = sessions.list.getSnapshot()?.current;
+					if (typeof current === "string" && current !== "") try {
+						const store = ctx.modelDirectories?.directoryFor(current)?.store;
+						if (typeof store?.subscribe === "function") directoryUnsub = store.subscribe(onChange);
+					} catch {}
+				};
+				const offList = sessions.list.subscribe(() => {
+					followDirectory();
+					onChange();
+				});
+				followDirectory();
+				return () => {
+					offList?.();
+					directoryUnsub?.();
+				};
+			};
 			ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register({
 				name: "sidebar.footer.action",
 				id: "provider-usage",
 				order: 10,
 				locale: "provider-usage",
-				inject: () => ({ fetchUsage })
+				inject: () => ({
+					fetchUsage,
+					getActiveProvider,
+					subscribeActiveChange
+				})
 			}, UsageAction));
 		}
 		//#endregion