@ychris12138/dsh-usage-stats 0.3.0 → 0.3.2

package/lib/client.js

@@ -31,15 +31,6 @@ window.__ModuleLoader__.load({
 			".usg_badgeOk{color:var(--dsw-alias-state-success-primary)}",
 			".usg_badgeBad{color:var(--dsw-alias-state-error-primary)}",
 			".usg_badgeCount{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;flex:none;margin-left:auto;font-size:12px;line-height:16px}",
-			".usg_sessionPill{box-sizing:border-box;max-width:220px;height:28px;color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-fill-l1,transparent);border:1px solid var(--dsw-alias-border-l2);border-radius:999px;align-items:center;gap:5px;padding:0 8px;font:inherit;font-size:11px;line-height:16px;cursor:pointer;display:inline-flex;white-space:nowrap;overflow:hidden}",
-			".usg_sessionPill:hover{background:var(--dsw-alias-interactive-bg-hover)}",
-			".usg_sessionPill:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:1px}",
-			".usg_sessionPill[data-tone=normal]{color:var(--dsw-alias-label-secondary)}",
-			".usg_sessionPill[data-tone=warning]{color:var(--dsw-alias-state-warn-label,var(--dsw-alias-state-warn-primary));border-color:var(--dsw-alias-state-warn-secondary,var(--dsw-alias-border-l2))}",
-			".usg_sessionPill[data-tone=critical]{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-secondary,var(--dsw-alias-border-l2))}",
-			".usg_sessionPillProvider{max-width:88px;color:var(--dsw-alias-label-primary);font-weight:500;text-overflow:ellipsis;overflow:hidden}",
-			".usg_sessionPillSeparator{color:var(--dsw-alias-label-caption);flex:none}",
-			".usg_sessionPillValue{max-width:112px;font-variant-numeric:tabular-nums;text-overflow:ellipsis;overflow:hidden}",
 			".usg_layer.usg_rail{width:36px;height:36px;margin:0}",
 			".usg_layer.usg_rail .usg_badge{border-radius:50%;justify-content:center;gap:0;width:36px;height:36px;padding:0}",
 			".usg_layer.usg_rail .usg_footerButtons{flex-direction:column;gap:2px}",
@@ -77,6 +68,7 @@ window.__ModuleLoader__.load({
 			".usg_accountCard[data-provider=ollama],.usg_accountCard[data-adapter=ollama]{--usg-providerAccent:#d97706}",
 			".usg_accountCard[data-provider=zai],.usg_accountCard[data-provider=zai-coding-cn]{--usg-providerAccent:#7656e8}",
 			".usg_accountCard[data-provider=openrouter]{--usg-providerAccent:#6366f1}",
+			".usg_accountCard[data-provider=orcarouter]{--usg-providerAccent:#0891b2}",
 			".usg_accountCard[data-provider=moonshotai],.usg_accountCard[data-provider=moonshotai-cn],.usg_accountCard[data-provider=kimi],.usg_accountCard[data-provider=kimi-coding]{--usg-providerAccent:#e07a1f}",
 			".usg_accountHead{align-items:center;gap:8px;display:flex}",
 			".usg_accountMark{width:24px;height:24px;color:#fff;background:var(--usg-providerAccent);border-radius:7px;justify-content:center;align-items:center;font-size:10px;font-weight:700;display:flex;box-shadow:0 4px 12px color-mix(in srgb,var(--usg-providerAccent) 25%,transparent)}",
@@ -131,8 +123,8 @@ window.__ModuleLoader__.load({
 			".usg_day{width:100%;min-height:30px;align-items:center;gap:8px;border:0;background:0 0;border-bottom:1px solid var(--dsw-alias-border-l1);padding:5px 0;font:inherit;text-align:left;cursor:pointer;display:flex}",
 			".usg_day:last-child{border-bottom:0}",
 			".usg_day:hover{background:var(--dsw-alias-interactive-bg-hover)}",
-			".usg_dayDate{color:var(--dsw-alias-label-secondary);flex:none;width:104px;font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}",
-			".usg_dayTokens{color:var(--dsw-alias-label-primary);flex:none;font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}",
+			".usg_dayDate{color:var(--dsw-alias-label-secondary);flex:0 1 104px;min-width:0;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px;font-variant-numeric:tabular-nums;overflow:hidden}",
+			".usg_dayTokens{color:var(--dsw-alias-label-primary);flex:none;min-width:84px;text-align:right;font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}",
 			".usg_dayHit{color:var(--dsw-alias-label-tertiary);flex:none;width:52px;font-size:11px;line-height:18px;font-variant-numeric:tabular-nums;text-align:right}",
 			".usg_dayBar{background:var(--usg-blue);border-radius:2px;height:6px;flex:1;min-width:4px;opacity:.65}",
 			".usg_detailHeader{align-items:center;gap:8px;display:flex}",
@@ -170,10 +162,6 @@ window.__ModuleLoader__.load({
 			badgeOk: "usg_badgeOk",
 			badgeBad: "usg_badgeBad",
 			badgeCount: "usg_badgeCount",
-			sessionPill: "usg_sessionPill",
-			sessionPillProvider: "usg_sessionPillProvider",
-			sessionPillSeparator: "usg_sessionPillSeparator",
-			sessionPillValue: "usg_sessionPillValue",
 			panel: "usg_panel",
 			header: "usg_header",
 			headerLeft: "usg_headerLeft",
@@ -454,201 +442,66 @@ window.__ModuleLoader__.load({
 			})) : [];
 		}
 
+		const ORCAROUTER_ADD_SENTINEL = "__add_orcarouter__";
+		const ORCAROUTER_INTEGRATION_PATH = "/api/usage-stats/integrations/orcarouter";
+
+		/** Append the explicit setup action without changing the real provider list. */
+		function buildProviderPickerChoices(providers, integration) {
+			if (!Array.isArray(providers)) return [];
+			if (providers.some((provider) => provider?.id === "orcarouter")) return providers;
+			if (integration?.available !== true || integration?.installed !== false) return providers;
+			return [...providers, {
+				id: ORCAROUTER_ADD_SENTINEL,
+				displayName: "OrcaRouter",
+				accountMode: "balance",
+				synthetic: true
+			}];
+		}
+
+		/** Localized selector label; sponsorship is a small disclosure, not a card. */
+		function providerChoiceLabel(provider, translate) {
+			const label = typeof provider?.displayName === "string" && provider.displayName.trim() !== ""
+				? provider.displayName
+				: String(provider?.id ?? "");
+			if (provider?.id !== "orcarouter" && provider?.id !== ORCAROUTER_ADD_SENTINEL) return label;
+			const suffix = typeof translate === "function" ? translate("orcarouter.choiceSuffix") : "";
+			return typeof suffix === "string" && suffix !== "" ? `${label}${suffix}` : label;
+		}
+
 		/** Locale-safe template interpolation: `t("key", {a})` replaces `{a}`. */
 		function interpolate(template, params) {
 			if (params === void 0) return template;
 			return template.replace(/\{(\w+)\}/g, (match, key) => (Object.hasOwn(params, key) ? String(params[key]) : match));
 		}
 
-		async function fetchJson(path) {
-			const response = await fetch(path, { headers: { accept: "application/json" } });
+		async function fetchJson(path, options = {}) {
+			const response = await fetch(path, {
+				...options,
+				headers: { accept: "application/json", ...options.headers }
+			});
 			if (!response.ok) throw new Error(`HTTP ${response.status}`);
 			const payload = await response.json();
 			if (payload === null || typeof payload !== "object") throw new Error("unexpected response");
 			return payload;
 		}
 
-		//#region CurrentSessionPill
-		/**
-		 * Compact event signature from the formal composer slot's point-in-time
-		 * session snapshot. These fields change at turn/message boundaries where
-		 * the server-side currentRoute can change, without reacting to every input
-		 * keystroke or adding a timer/DOM observer.
-		 */
-		function sessionContextSignalOf(session) {
-			const nodes = Array.isArray(session?.nodes) ? session.nodes.length : 0;
-			const order = Array.isArray(session?.chat?.order) ? session.chat.order.length : 0;
-			return `${session?.running === true ? 1 : 0}:${nodes}:${order}:${session?.partial === null || session?.partial === void 0 ? 0 : 1}:${session?.removed === true ? 1 : 0}`;
-		}
-
-		/** Event signature from DSH's existing per-session model selector store. */
-		function modelSelectionSignalOf(snapshot) {
-			const provider = typeof snapshot?.current?.provider === "string" ? snapshot.current.provider : "";
-			const model = typeof snapshot?.current?.model === "string" ? snapshot.current.model : "";
-			return JSON.stringify([provider, model]);
-		}
-
-		/** Stable signature for DSH's native cumulative tokenUsage projection. */
-		function tokenUsageSignalOf(projection) {
-			return JSON.stringify([
-				projection?.uncachedInputTokens,
-				projection?.outputTokens,
-				projection?.cacheReadTokens,
-				projection?.cacheWriteTokens
-			]);
+		async function loadOrcaRouterIntegration(request = fetchJson) {
+			const payload = await request(ORCAROUTER_INTEGRATION_PATH);
+			if (payload?.ok !== true || payload.integration === null || typeof payload.integration !== "object") throw new Error("integration status unavailable");
+			return payload.integration;
 		}
 
-		function projectionBucketsOf(projection) {
-			const pairs = [
-				["inputTokens", projection?.uncachedInputTokens],
-				["outputTokens", projection?.outputTokens],
-				["cacheReadTokens", projection?.cacheReadTokens],
-				["cacheWriteTokens", projection?.cacheWriteTokens]
-			];
-			const buckets = {};
-			for (const [key, value] of pairs) {
-				if (typeof value !== "number" || !Number.isFinite(value) || value < 0) return null;
-				buckets[key] = value;
-			}
-			return buckets;
-		}
-
-		/**
-		 * The browser never prices cumulative tokens. It displays the server's
-		 * event-time estimate only when its folded buckets exactly match DSH's
-		 * native current-session projection.
-		 */
-		function currentSessionCostLabel(session, projection) {
-			const buckets = projectionBucketsOf(projection);
-			if (session === null || typeof session !== "object" || buckets === null) return "—";
-			for (const key of ["inputTokens", "outputTokens", "cacheReadTokens", "cacheWriteTokens"]) {
-				if (session[key] !== buckets[key]) return "—";
-			}
-			if (session.costComplete !== true || typeof session.estimatedCost !== "number" || !Number.isFinite(session.estimatedCost)
-				|| typeof session.currency !== "string" || session.currency === "") return "—";
-			return `≈${fmtCurrency(session.estimatedCost, session.currency)}`;
-		}
-
-		/**
-		 * Resolve one explicit DSH session through the server-owned identity and
-		 * account protocols. The account endpoint reads AccountService's existing
-		 * cache; this function owns no provider mapping, credential, or cache.
-		 */
-		async function loadSessionPillSnapshot(sessionId, request = fetchJson, selectedRoute = null) {
-			if (typeof sessionId !== "string" || sessionId === "") return null;
-			const selectionQuery = typeof selectedRoute?.provider === "string" && selectedRoute.provider !== ""
-				&& typeof selectedRoute.model === "string" && selectedRoute.model !== ""
-				? `&provider=${encodeURIComponent(selectedRoute.provider)}&model=${encodeURIComponent(selectedRoute.model)}`
-				: "";
-			const contextPayload = await request(`/api/usage-stats/session-context?session=${encodeURIComponent(sessionId)}${selectionQuery}`);
-			if (contextPayload?.ok !== true || contextPayload.context === null || typeof contextPayload.context !== "object") return null;
-			const context = contextPayload.context;
-			const accountId = typeof context.accountId === "string" && context.accountId !== ""
-				? context.accountId
-				: typeof context.providerId === "string" && context.providerId !== "" ? context.providerId : null;
-			if (accountId === null) return null;
-			try {
-				const accountPayload = await request(`/api/usage-stats/account?provider=${encodeURIComponent(accountId)}&activity=active`);
-				if (accountPayload?.ok === true && accountPayload.account !== null && typeof accountPayload.account === "object") {
-					return { context, account: accountPayload.account };
-				}
-				return {
-					context,
-					account: null,
-					status: accountPayload?.error === "unknown-provider" ? "unsupported" : "unavailable"
-				};
-			} catch {
-				return { context, account: null, status: "unavailable" };
-			}
-		}
-
-		function percentLabel(value) {
-			return `${value.toFixed(value % 1 === 0 ? 0 : 1)}%`;
-		}
-
-		/** Reduce a server snapshot to display-only fields; never retain secrets. */
-		function sessionPillViewOf(snapshot, translate, now = Date.now()) {
-			if (snapshot === null || snapshot === void 0 || snapshot.context === null || typeof snapshot.context !== "object") return null;
-			const account = snapshot.account !== null && typeof snapshot.account === "object" ? snapshot.account : null;
-			const providerId = typeof snapshot.context.accountId === "string" && snapshot.context.accountId !== ""
-				? snapshot.context.accountId
-				: typeof snapshot.context.providerId === "string" && snapshot.context.providerId !== "" ? snapshot.context.providerId : null;
-			if (providerId === null) return null;
-			const providerLabel = typeof account?.displayName === "string" && account.displayName !== ""
-				? account.displayName
-				: typeof snapshot.context.providerId === "string" && snapshot.context.providerId !== "" ? snapshot.context.providerId : providerId;
-			let status = typeof account?.status === "string" ? account.status : typeof snapshot.status === "string" ? snapshot.status : "unavailable";
-			const costLabel = currentSessionCostLabel(snapshot.context.session, snapshot.tokenUsage);
-			if (account?.stale === true && status === "ok") status = "unavailable";
-			if (status !== "ok") {
-				const accountValue = status === "unsupported"
-					? translate("sessionPill.status.unsupported")
-					: subscriptionStatusLabel(status, translate);
-				const value = `${accountValue} · ${costLabel}`;
-				return {
-					providerId,
-					providerLabel,
-					status,
-					value,
-					tone: "neutral",
-					ariaLabel: translate("sessionPill.aria", { provider: providerLabel, value })
-				};
-			}
-
-			let value = null;
-			let auxiliaryLabel = "";
-			if (account?.mode === "subscription") {
-				const windows = Array.isArray(account.windows)
-					? account.windows.filter((entry) => entry !== null && typeof entry === "object" && typeof entry.remainingPercent === "number" && Number.isFinite(entry.remainingPercent))
-					: [];
-				const tightest = windows.reduce((current, entry) => current === null || entry.remainingPercent < current.remainingPercent ? entry : current, null);
-				if (tightest !== null) {
-					value = `${quotaLabel(tightest.kind, translate)} · ${percentLabel(tightest.remainingPercent)}`;
-					auxiliaryLabel = resetLabel(tightest.resetsAt, translate, now);
-				}
-			} else if (account?.balance?.unlimited === true) {
-				value = "∞";
-			} else if (account?.balance !== null && account?.balance !== void 0 && account.balance.remaining !== null && account.balance.remaining !== void 0 && Number.isFinite(Number(account.balance.remaining))) {
-				value = fmtCurrency(account.balance.remaining, account.balance.currency);
-			}
-
-			if (value === null) {
-				const invalid = translate("account.status.invalidResponse");
-				const invalidValue = `${invalid} · ${costLabel}`;
-				return {
-					providerId,
-					providerLabel,
-					status: "invalid-response",
-					value: invalidValue,
-					tone: "neutral",
-					ariaLabel: translate("sessionPill.aria", { provider: providerLabel, value: invalidValue })
-				};
-			}
-			const alertLevel = account?.alert?.level;
-			const tone = alertLevel === "normal" || alertLevel === "warning" || alertLevel === "critical" ? alertLevel : "neutral";
-			value = `${value} · ${costLabel}`;
-			const accessibleValue = auxiliaryLabel === "" ? value : `${value} · ${auxiliaryLabel}`;
-			return {
-				providerId,
-				providerLabel,
-				status,
-				value,
-				tone,
-				ariaLabel: translate("sessionPill.aria", { provider: providerLabel, value: accessibleValue })
-			};
-		}
-
-		const usageStatsPanelOpeners = /* @__PURE__ */ new Set();
-
-		function subscribeUsageStatsPanel(opener) {
-			if (typeof opener !== "function") return () => {};
-			usageStatsPanelOpeners.add(opener);
-			return () => usageStatsPanelOpeners.delete(opener);
-		}
-
-		function requestUsageStatsPanel(providerId) {
-			const openers = [...usageStatsPanelOpeners];
-			openers[openers.length - 1]?.(providerId);
+		async function addOrcaRouterIntegration(request = fetchJson) {
+			const payload = await request(ORCAROUTER_INTEGRATION_PATH, {
+				method: "POST",
+				headers: {
+					"content-type": "application/json",
+					"x-dsh-usage-stats-action": "add-orcarouter"
+				},
+				body: "{}"
+			});
+			if (payload?.ok !== true || payload.integration?.installed !== true) throw new Error("provider preset was not added");
+			return payload.integration;
 		}
 
 		function enableFooterActionWrapping(host) {
@@ -663,69 +516,6 @@ window.__ModuleLoader__.load({
 			};
 		}
 
-		/** Pure compact pill view, separated for render/click regression tests. */
-		function CurrentSessionPillView({ snapshot, translate, onOpen = requestUsageStatsPanel, now = Date.now() }) {
-			const view = sessionPillViewOf(snapshot, translate, now);
-			if (view === null) return null;
-			return react_jsx_runtime.jsxs("button", {
-				type: "button",
-				className: S.sessionPill,
-				"data-current-session-pill": true,
-				"data-provider": view.providerId,
-				"data-status": view.status,
-				"data-tone": view.tone,
-				"aria-label": view.ariaLabel,
-				title: view.ariaLabel,
-				onClick: () => onOpen(view.providerId),
-				children: [
-					react_jsx_runtime.jsx("span", { className: S.sessionPillProvider, children: view.providerLabel }),
-					react_jsx_runtime.jsx("span", { className: S.sessionPillSeparator, "aria-hidden": true, children: "·" }),
-					react_jsx_runtime.jsx("span", { className: S.sessionPillValue, children: view.value })
-				]
-			});
-		}
-
-		/** Formal `conversation.input.right` slot occupant. */
-		function CurrentSessionPill({ sessionId, session, modelDirectory, useProjection = () => void 0, request = fetchJson, t }) {
-			const translate = (key, params) => interpolate(t !== void 0 ? t(key) : key, params);
-			const [loaded, setLoaded] = react.useState({ key: null, snapshot: null });
-			const loaderRef = react.useRef(null);
-			if (loaderRef.current === null) loaderRef.current = createLoader();
-			const signal = sessionContextSignalOf(session);
-			const tokenUsage = useProjection("tokenUsage");
-			const tokenSignal = tokenUsageSignalOf(tokenUsage);
-			const subscribeModelSelection = react.useCallback((notify) => typeof modelDirectory?.subscribe === "function"
-				? modelDirectory.subscribe(notify)
-				: () => {}, [modelDirectory]);
-			const getModelSelectionSignal = react.useCallback(() => modelSelectionSignalOf(
-				typeof modelDirectory?.getSnapshot === "function" ? modelDirectory.getSnapshot() : null
-			), [modelDirectory]);
-			const modelSignal = react.useSyncExternalStore(subscribeModelSelection, getModelSelectionSignal, getModelSelectionSignal);
-			const requestKey = JSON.stringify([sessionId, signal, modelSignal, tokenSignal]);
-			const [selectedProvider, selectedModel] = JSON.parse(modelSignal);
-			const selectedRoute = selectedProvider !== "" && selectedModel !== ""
-				? { provider: selectedProvider, model: selectedModel }
-				: null;
-			react.useEffect(() => {
-				const seq = loaderRef.current.start();
-				let mounted = true;
-				setLoaded({ key: requestKey, snapshot: null });
-				loadSessionPillSnapshot(sessionId, request, selectedRoute).then((next) => {
-					if (mounted && loaderRef.current.isCurrent(seq)) setLoaded({ key: requestKey, snapshot: next });
-				}).catch(() => {
-					if (mounted && loaderRef.current.isCurrent(seq)) setLoaded({ key: requestKey, snapshot: null });
-				});
-				return () => {
-					mounted = false;
-				};
-			}, [sessionId, signal, modelSignal, tokenSignal, request, requestKey, selectedRoute?.provider, selectedRoute?.model]);
-			return react_jsx_runtime.jsx(CurrentSessionPillView, {
-				snapshot: loaded.key === requestKey && loaded.snapshot !== null ? { ...loaded.snapshot, tokenUsage } : null,
-				translate
-			});
-		}
-		//#endregion
-
 		/**
 		 * Build one month's calendar heatmap: weeks as rows (Mon-first), only
 		 * the month's own days, padded with null placeholders. Cell tokens come
@@ -798,7 +588,11 @@ window.__ModuleLoader__.load({
 		}
 
 		function validStoredProvider(value) {
-			return typeof value === "string" && value.length > 0 && value.length <= 256 && !value.includes("\0") ? value : null;
+			return typeof value === "string"
+				&& value !== ORCAROUTER_ADD_SENTINEL
+				&& value.length > 0
+				&& value.length <= 256
+				&& !value.includes("\0") ? value : null;
 		}
 
 		function readSelectedProvider(storage = browserStorage()) {
@@ -814,6 +608,10 @@ window.__ModuleLoader__.load({
 
 		function writeSelectedProvider(providerId, storage = browserStorage()) {
 			try {
+				// The synthetic dropdown entry is an action, never provider state. A
+				// defensive no-op also preserves the previous real selection if this
+				// helper is called directly by a future UI refactor.
+				if (providerId === ORCAROUTER_ADD_SENTINEL) return;
 				const normalized = validStoredProvider(providerId);
 				if (normalized === null) storage?.removeItem?.(SELECTED_PROVIDER_STORAGE_KEY);
 				else storage?.setItem?.(SELECTED_PROVIDER_STORAGE_KEY, normalized);
@@ -824,6 +622,9 @@ window.__ModuleLoader__.load({
 		}
 
 		function reconcileSelectedProvider(current, providers, storage = browserStorage()) {
+			// An empty response can be a transient provider-service refresh. Keep the
+			// current choice until a non-empty authoritative list can prove removal.
+			if (!Array.isArray(providers) || providers.length === 0) return current;
 			if (Array.isArray(providers) && providers.some((provider) => provider?.id === current)) return current;
 			if (current !== null) writeSelectedProvider(null, storage);
 			if (!Array.isArray(providers) || providers.length === 0) return null;
@@ -856,8 +657,12 @@ window.__ModuleLoader__.load({
 			const [account, setAccount] = react.useState(null);
 			const [accountLoading, setAccountLoading] = react.useState(false);
 			const [accountError, setAccountError] = react.useState(null);
+			const [orcaRouterIntegration, setOrcaRouterIntegration] = react.useState(null);
+			const [orcaRouterPending, setOrcaRouterPending] = react.useState(false);
+			const [orcaRouterError, setOrcaRouterError] = react.useState(false);
 			const [refreshedAt, setRefreshedAt] = react.useState(null);
 			const mountedRef = react.useRef(true);
+			const orcaRouterMutationRef = react.useRef(false);
 			const usageLoaderRef = react.useRef(null);
 			const accountLoaderRef = react.useRef(null);
 			const layerRef = react.useRef(null);
@@ -865,22 +670,24 @@ window.__ModuleLoader__.load({
 			if (usageLoaderRef.current === null) usageLoaderRef.current = createLoader();
 			if (accountLoaderRef.current === null) accountLoaderRef.current = createLoader();
 			const providerChoices = react.useMemo(() => buildProviderChoices(providers), [providers]);
+			const providerPickerChoices = react.useMemo(
+				() => buildProviderPickerChoices(providerChoices, orcaRouterIntegration),
+				[providerChoices, orcaRouterIntegration]
+			);
 			const selectedProviderInfo = providerChoices.find((provider) => provider.id === selectedProvider) ?? null;
 			const selectProvider = react.useCallback((providerId) => {
+				if (providerId === ORCAROUTER_ADD_SENTINEL) return;
 				const normalized = validStoredProvider(providerId);
 				setSelectedProvider(normalized);
 				writeSelectedProvider(normalized, storageRef.current);
 			}, []);
-			const openForProvider = react.useCallback((providerId) => {
-				if (validStoredProvider(providerId) !== null) selectProvider(providerId);
-				setOpen(true);
-			}, [selectProvider]);
-
-			// The composer pill and sidebar panel are separate slot roots. A tiny
-			// in-module subscription bridge opens this existing panel without DOM
-			// clicks, a new panel implementation, or another account state/cache.
-			react.useEffect(() => subscribeUsageStatsPanel(openForProvider), [openForProvider]);
-
+			const closePanel = react.useCallback(() => {
+				// Re-assert the last visible choice at the explicit close boundary. This
+				// keeps the X action stable even when storage was temporarily unavailable
+				// during an earlier provider-selection event.
+				if (selectedProvider !== null) writeSelectedProvider(selectedProvider, storageRef.current);
+				setOpen(false);
+			}, [selectedProvider]);
 			const loadUsage = react.useCallback(() => {
 				const seq = usageLoaderRef.current.start();
 				setUsageError(null);
@@ -898,16 +705,59 @@ window.__ModuleLoader__.load({
 				});
 			}, []);
 
-			const loadProviders = react.useCallback(() => {
-				fetchJson("/api/usage-stats/providers").then((payload) => {
-					if (!mountedRef.current) return;
+			const loadProviders = react.useCallback(async () => {
+				try {
+					const payload = await fetchJson("/api/usage-stats/providers");
+					if (!mountedRef.current) return null;
 					const list = authoritativeProviderList(payload);
-					if (list === null) return;
+					if (list === null) return null;
 					setProviders(list);
 					setProvidersAuthoritative(true);
-				}).catch(() => {});
+					return list;
+				} catch {
+					return null;
+				}
+			}, []);
+
+			const loadOrcaRouterStatus = react.useCallback(async () => {
+				if (mountedRef.current) setOrcaRouterError(false);
+				try {
+					const integration = await loadOrcaRouterIntegration();
+					if (mountedRef.current) setOrcaRouterIntegration(integration);
+					return integration;
+				} catch {
+					if (mountedRef.current) setOrcaRouterIntegration(null);
+					return null;
+				}
 			}, []);
 
+			const selectProviderChoice = react.useCallback(async (providerId) => {
+				if (providerId !== ORCAROUTER_ADD_SENTINEL) {
+					setOrcaRouterError(false);
+					selectProvider(providerId);
+					return;
+				}
+				if (orcaRouterMutationRef.current) return;
+				orcaRouterMutationRef.current = true;
+				setOrcaRouterPending(true);
+				setOrcaRouterError(false);
+				try {
+					const integration = await addOrcaRouterIntegration();
+					const refreshedProviders = await loadProviders();
+					if (!mountedRef.current) return;
+					if (!Array.isArray(refreshedProviders) || !refreshedProviders.some((provider) => provider?.id === "orcarouter")) {
+						throw new Error("installed provider was not returned");
+					}
+					setOrcaRouterIntegration(integration);
+					selectProvider("orcarouter");
+				} catch {
+					if (mountedRef.current) setOrcaRouterError(true);
+				} finally {
+					orcaRouterMutationRef.current = false;
+					if (mountedRef.current) setOrcaRouterPending(false);
+				}
+			}, [loadProviders, selectProvider]);
+
 			const loadAccount = react.useCallback((providerId, force = false, activity = null) => {
 				const seq = accountLoaderRef.current.start();
 				setAccountLoading(true);
@@ -990,13 +840,14 @@ window.__ModuleLoader__.load({
 				if (!open) return;
 				loadUsage();
 				loadProviders();
+				loadOrcaRouterStatus();
 				const usageTimer = window.setInterval(loadUsage, 60000);
 				const providerTimer = window.setInterval(loadProviders, 300000);
 				return () => {
 					window.clearInterval(usageTimer);
 					window.clearInterval(providerTimer);
 				};
-			}, [open, loadUsage, loadProviders]);
+			}, [open, loadUsage, loadProviders, loadOrcaRouterStatus]);
 
 			// Fetch the selected account for BOTH the panel and the collapsed
 			// sidebar badge. The server owns the adaptive upstream schedule; this
@@ -1146,7 +997,7 @@ window.__ModuleLoader__.load({
 													type: "button",
 													className: S.iconButton,
 													"aria-label": translate("action.close"),
-													onClick: () => setOpen(false),
+													onClick: closePanel,
 													children: react_jsx_runtime.jsx(primitives.IconCloseOutline16, { size: 14 })
 												})
 											})
@@ -1168,20 +1019,27 @@ window.__ModuleLoader__.load({
 												children: react_jsx_runtime.jsx("h3", { className: S.sectionTitle, children: translate("account.title") })
 											}),
 											react_jsx_runtime.jsx(ProviderPicker, {
-								providers: providerChoices,
-								selectedProvider,
-								onSelect: selectProvider,
+												providers: providerPickerChoices,
+												selectedProvider,
+												onSelect: selectProviderChoice,
+												disabled: orcaRouterPending,
 												translate
 											}),
+											orcaRouterError ? react_jsx_runtime.jsx("p", {
+												className: S.note,
+												role: "status",
+												"data-orcarouter-action-error": true,
+												children: translate("orcarouter.addError")
+											}) : null,
 											selectedProviderInfo === null ? react_jsx_runtime.jsx("p", { className: S.note, children: translate("account.loading") }) : react_jsx_runtime.jsx("div", {
 												className: S.accountGrid,
-											children: react_jsx_runtime.jsx(ProviderAccountCard, {
-												provider: selectedProviderInfo,
-												account: account?.id === selectedProvider ? account : null,
-												accountLoading,
-												accountError,
-												translate,
-												onRetry: () => loadAccount(selectedProvider, true, "detail")
+												children: react_jsx_runtime.jsx(ProviderAccountCard, {
+													provider: selectedProviderInfo,
+													account: account?.id === selectedProvider ? account : null,
+													accountLoading,
+													accountError,
+													translate,
+													onRetry: () => loadAccount(selectedProvider, true, "detail")
 												}, selectedProviderInfo.id)
 											}),
 											react_jsx_runtime.jsx("section", {
@@ -1352,6 +1210,7 @@ window.__ModuleLoader__.load({
 				"opencode-go": "GO",
 				ollama: "OL",
 				openrouter: "OR",
+				orcarouter: "OC",
 				moonshotai: "K",
 				"moonshotai-cn": "K",
 				kimi: "K",
@@ -1404,7 +1263,7 @@ window.__ModuleLoader__.load({
 		}
 
 		/** Provider selector shared by monetary and subscription account modes. */
-		function ProviderPicker({ providers, selectedProvider, onSelect, translate }) {
+		function ProviderPicker({ providers, selectedProvider, onSelect, disabled = false, translate }) {
 			if (providers.length === 0) return null;
 			return react_jsx_runtime.jsxs("label", {
 				className: S.providerPicker,
@@ -1413,11 +1272,12 @@ window.__ModuleLoader__.load({
 					react_jsx_runtime.jsx("select", {
 						className: S.providerSelect,
 						value: selectedProvider ?? "",
+						disabled,
 						"aria-label": translate("account.provider"),
 						onChange: (event) => onSelect(event.target.value),
 						children: providers.map((provider) => react_jsx_runtime.jsx("option", {
 							value: provider.id,
-							children: provider.displayName
+							children: providerChoiceLabel(provider, translate)
 						}, provider.id))
 					})
 				]
@@ -1768,8 +1628,8 @@ window.__ModuleLoader__.load({
 		const zh = {
 			"panel.title": "用量与余额",
 			"panel.badge": "用量/余额",
-			"sessionPill.aria": "{provider} 账户：{value}",
-			"sessionPill.status.unsupported": "不支持",
+			"orcarouter.choiceSuffix": "（赞助集成）",
+			"orcarouter.addError": "未能添加 OrcaRouter，请稍后重试。",
 			"account.title": "供应商账户",
 			"account.provider": "当前供应商",
 			"account.balanceMode": "API 余额",
@@ -1892,8 +1752,8 @@ window.__ModuleLoader__.load({
 		const en = {
 			"panel.title": "Usage & Balance",
 			"panel.badge": "Usage/Balance",
-			"sessionPill.aria": "{provider} account: {value}",
-			"sessionPill.status.unsupported": "Unsupported",
+			"orcarouter.choiceSuffix": " (Sponsored integration)",
+			"orcarouter.addError": "Could not add OrcaRouter. Please try again.",
 			"account.title": "Provider account",
 			"account.provider": "Current provider",
 			"account.balanceMode": "API balance",
@@ -2020,8 +1880,7 @@ window.__ModuleLoader__.load({
 		const inject = ["slots", "locale"];
 
 		/**
-		 * Client plugin body: register dictionaries, the sidebar account panel, and
-		 * the current-session pill beside the host's model selector.
+		 * Client plugin body: register dictionaries and the sidebar account panel.
 		 * @param ctx - client root context.
 		 */
 		function apply(ctx) {
@@ -2032,26 +1891,12 @@ window.__ModuleLoader__.load({
 				locale: NS,
 				order: 10
 			}, UsageStatsPanel));
-			// The model-directory service is optional so older/mutated DSH clients
-			// keep the sidebar panel even when the inline slot cannot be supported.
-			ctx.inject(["slots", "modelDirectories"], (scope) => {
-				const models = scope.modelDirectories;
-				scope.slots.inject("conversation.input.right", () => scope.slots.register({
-					name: "conversation.input.right",
-					id: "usage-stats-current-session-pill",
-					locale: NS,
-					order: 10,
-					inject: (sessionId) => ({ modelDirectory: models.directoryFor(sessionId).store })
-				}, CurrentSessionPill));
-			});
 		}
 		//#endregion
 
 		exports.apply = apply;
 		exports.inject = inject;
 		exports.UsageStatsPanel = UsageStatsPanel;
-		exports.CurrentSessionPill = CurrentSessionPill;
-		exports.CurrentSessionPillView = CurrentSessionPillView;
 		exports.DayDetail = DayDetail;
 		exports.ProviderAccountCard = ProviderAccountCard;
 		exports.MonthHeatmap = MonthHeatmap;
@@ -2059,6 +1904,9 @@ window.__ModuleLoader__.load({
 		exports.cellColor = cellColor;
 		exports.createLoader = createLoader;
 		exports.buildProviderChoices = buildProviderChoices;
+		exports.buildProviderPickerChoices = buildProviderPickerChoices;
+		exports.loadOrcaRouterIntegration = loadOrcaRouterIntegration;
+		exports.addOrcaRouterIntegration = addOrcaRouterIntegration;
 		exports.modelLabelOf = modelLabelOf;
 		exports.fmt = fmt;
 		exports.fmtCurrency = fmtCurrency;
@@ -2068,15 +1916,9 @@ window.__ModuleLoader__.load({
 		exports.shouldDismissPanel = shouldDismissPanel;
 		exports.safeDiagnosticReason = safeDiagnosticReason;
 		exports.formatResetCountdown = formatResetCountdown;
-		exports.loadSessionPillSnapshot = loadSessionPillSnapshot;
-		exports.modelSelectionSignalOf = modelSelectionSignalOf;
-		exports.tokenUsageSignalOf = tokenUsageSignalOf;
-		exports.currentSessionCostLabel = currentSessionCostLabel;
-		exports.requestUsageStatsPanel = requestUsageStatsPanel;
-		exports.sessionContextSignalOf = sessionContextSignalOf;
-		exports.sessionPillViewOf = sessionPillViewOf;
-		exports.subscribeUsageStatsPanel = subscribeUsageStatsPanel;
 		exports.enableFooterActionWrapping = enableFooterActionWrapping;
+		exports.providerChoiceLabel = providerChoiceLabel;
+		exports.ORCAROUTER_ADD_SENTINEL = ORCAROUTER_ADD_SENTINEL;
 		exports.SELECTED_PROVIDER_STORAGE_KEY = SELECTED_PROVIDER_STORAGE_KEY;
 		exports.authoritativeProviderList = authoritativeProviderList;
 		exports.readSelectedProvider = readSelectedProvider;