@jingyi0605/codingns4dsh 0.2.1-beta.9 → 0.2.1-rc.2

package/data/build/dist/client/subscription-slot.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 import type { SlotRegistry } from '@deepseek-ai/dsh-client-ui-renderer/client';
-import type { CliSubscriptionUsage, ProviderBalanceUsage } from '../shared/contracts/subscription.js';
+import type { CliSubscriptionSnapshot, ProviderBalanceUsage } from '../shared/contracts/subscription.js';
 import type { CodingNsRpcClient } from './features/types.js';
 import { type CodingNsLocale, type CodingNsTranslator } from './locale.js';
 import type { SessionSnapshot } from './cli-slots.js';
@@ -24,11 +24,15 @@ interface SubscriptionSlotProps {
  * 避免每次进入会话或切回同一 Agent 都请求上游；null 结果不缓存，便于刚登录后立刻重试。
  */
 type UsageCache = Map<string, {
-    readonly usage: CliSubscriptionUsage;
+    readonly usage: CliSubscriptionSnapshot;
     readonly capturedAt: number;
 }>;
 /** 重置影响同一账号的所有模型额度，不能只删除不含模型的旧缓存键。 */
 export declare function invalidateSubscriptionUsageCache(cache: Pick<UsageCache, 'keys' | 'delete'>, adapterId: string, providerId: string | null): void;
+export declare function calculateMagpiePopoverPlacement(rootLeft: number, viewportWidth: number, sidebarLeft: number | null): {
+    readonly left: number;
+    readonly width: number;
+};
 /** 在 DSH 原生步骤统计左侧显示当前 Agent 的订阅余量。 */
 export declare function registerSubscriptionSlot(slots: SlotRegistry, rpc: CodingNsRpcClient, getRefreshIntervalMins?: () => number, locale?: CodingNsLocale): () => void;
 declare function CommandCodeSubscriptionSlot(props: SubscriptionSlotProps): ReactElement | null;

package/data/build/dist/client/subscription-slot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"subscription-slot.d.ts","sourceRoot":"","sources":["../../../../src/client/subscription-slot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAA;AAG9E,OAAO,KAAK,EAA6G,oBAAoB,EAAwC,oBAAoB,EAAsD,MAAM,qCAAqC,CAAA;AAE1S,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAE5D,OAAO,EAAoD,KAAK,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAM5H,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAGrD,OAAO,QAAQ,kCAAkC,CAAC;IAChD,UAAU,oBAAoB;QAC5B,SAAS,EAAE,MAAM,CAAA;KAClB;CACF;AAED,KAAK,eAAe,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,QAAQ,KAAK,QAAQ,CAAA;AAE7F,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,GAAG,EAAE,iBAAiB,CAAA;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,eAAe,CAAA;IACrC,oCAAoC;IACpC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,MAAM,MAAM,CAAA;IAC9C,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,CAAC,EAAE,cAAc,CAAA;CACjC;AAeD;;;GAGG;AACH,KAAK,UAAU,GAAG,GAAG,CAAC,MAAM,EAAE;IAAE,QAAQ,CAAC,KAAK,EAAE,oBAAoB,CAAC;IAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AASpG,sCAAsC;AACtC,wBAAgB,gCAAgC,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAG/I;AA0BD,sCAAsC;AACtC,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,iBAAiB,EAAE,sBAAsB,CAAC,EAAE,MAAM,MAAM,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,MAAM,IAAI,CAehK;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CA6PtF;AAkVD,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,KAAK,EAAE,oBAAoB,CAAC;IAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,CAAC,EAAE,kBAAkB,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CA+CvN;AA8XD,OAAO,EAAE,2BAA2B,EAAE,CAAA;AACtC,eAAO,MAAM,mCAAmC,iCAA2B,CAAA"}
+{"version":3,"file":"subscription-slot.d.ts","sourceRoot":"","sources":["../../../../src/client/subscription-slot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAA;AAG9E,OAAO,KAAK,EAA6G,uBAAuB,EAAgG,oBAAoB,EAAsD,MAAM,qCAAqC,CAAA;AAErW,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAE5D,OAAO,EAAoD,KAAK,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAM5H,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAGrD,OAAO,QAAQ,kCAAkC,CAAC;IAChD,UAAU,oBAAoB;QAC5B,SAAS,EAAE,MAAM,CAAA;KAClB;CACF;AAED,KAAK,eAAe,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,QAAQ,KAAK,QAAQ,CAAA;AAE7F,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,GAAG,EAAE,iBAAiB,CAAA;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,eAAe,CAAA;IACrC,oCAAoC;IACpC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,MAAM,MAAM,CAAA;IAC9C,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,CAAC,EAAE,cAAc,CAAA;CACjC;AAeD;;;GAGG;AACH,KAAK,UAAU,GAAG,GAAG,CAAC,MAAM,EAAE;IAAE,QAAQ,CAAC,KAAK,EAAE,uBAAuB,CAAC;IAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AASvG,sCAAsC;AACtC,wBAAgB,gCAAgC,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAG/I;AAkBD,wBAAgB,+BAA+B,CAAC,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAMtK;AAYD,sCAAsC;AACtC,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,iBAAiB,EAAE,sBAAsB,CAAC,EAAE,MAAM,MAAM,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,MAAM,IAAI,CAehK;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CAoXtF;AAimBD,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,KAAK,EAAE,oBAAoB,CAAC;IAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,CAAC,EAAE,kBAAkB,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CA+CvN;AAicD,OAAO,EAAE,2BAA2B,EAAE,CAAA;AACtC,eAAO,MAAM,mCAAmC,iCAA2B,CAAA"}

package/data/build/dist/client/subscription-slot.js

@@ -1,5 +1,5 @@
 import { startSerialPolling } from './serial-polling.js';
-import { createElement, useEffect, useRef, useState } from 'react';
+import { createElement, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { isSubscriptionUsageFresh } from '../shared/contracts/subscription.js';
 import { DEFAULT_SUBSCRIPTION_USAGE_SETTINGS } from '../shared/contracts/config.js';
 import { callCliRpc } from './cli-catalog.js';
@@ -48,6 +48,7 @@ function loadUsage(rpc, key, payload) {
     if (existing !== undefined)
         return existing;
     const request = callCliRpc(rpc, 'subscription', payload, AbortSignal.timeout(30_000))
+        .then(normalizeSubscriptionSnapshot)
         .finally(() => { if (loads.get(key) === request)
         loads.delete(key); });
     loads.set(key, request);
@@ -55,6 +56,14 @@ function loadUsage(rpc, key, payload) {
 }
 /** 图标重置按钮的悬停/按下/聚焦/禁用只能由注入样式表表达，内联样式无法命中伪类。 */
 const RESET_BUTTON_CSS = '.codingns4dsh-subscription-reset{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;padding:0;border:1px solid var(--dsw-alias-border-l2,#d9d9d9);border-radius:50%;background:transparent;color:var(--dsw-alias-label-secondary,GrayText);cursor:pointer;transition:background .15s ease,color .15s ease}.codingns4dsh-subscription-reset:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.08));color:var(--dsw-alias-label-primary,CanvasText)}.codingns4dsh-subscription-reset:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active,rgba(127,127,127,.14))}.codingns4dsh-subscription-reset:focus-visible{outline:none;box-shadow:0 0 0 var(--dsw-focus-ring-width,2px) var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#1677ff))}.codingns4dsh-subscription-reset:disabled{opacity:.4;cursor:not-allowed}@media (prefers-reduced-motion: reduce){.codingns4dsh-subscription-reset{transition:none}}';
+const MAGPIE_ROUTE_CSS = '@keyframes codingns4dsh-magpie-route-pulse{0%{transform:translateY(-120%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(320%);opacity:0}}@keyframes codingns4dsh-magpie-route-breathe{0%,100%{box-shadow:0 0 0 0 rgba(22,119,255,0)}50%{box-shadow:0 0 0 4px rgba(22,119,255,.16)}}@keyframes codingns4dsh-magpie-route-step{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.codingns4dsh-magpie-route-pulse{animation:codingns4dsh-magpie-route-pulse 1.8s ease-in-out infinite}.codingns4dsh-magpie-route-node-active{animation:codingns4dsh-magpie-route-breathe 2s ease-in-out infinite}.codingns4dsh-magpie-route-step{animation:codingns4dsh-magpie-route-step .38s cubic-bezier(.2,.75,.25,1) both;transition:background .16s ease}.codingns4dsh-magpie-route-step:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.07))}.codingns4dsh-magpie-route-step:hover .codingns4dsh-magpie-route-node{box-shadow:0 0 0 1px var(--dsw-alias-state-business-primary,#1677ff),0 0 0 4px rgba(22,119,255,.1)}.codingns4dsh-magpie-route-node{transition:box-shadow .16s ease}.codingns4dsh-magpie-tab:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#1677ff)) inset}@media (prefers-reduced-motion:reduce){.codingns4dsh-magpie-route-pulse,.codingns4dsh-magpie-route-node-active,.codingns4dsh-magpie-route-step,.codingns4dsh-magpie-route-node{animation:none;transition:none}}';
+export function calculateMagpiePopoverPlacement(rootLeft, viewportWidth, sidebarLeft) {
+    const margin = 12;
+    const boundary = Math.min(viewportWidth - margin, sidebarLeft === null ? viewportWidth - margin : sidebarLeft - margin);
+    const width = Math.max(0, Math.min(400, boundary - margin));
+    const left = Math.max(margin, Math.min(rootLeft, boundary - width));
+    return { left: left - rootLeft, width };
+}
 /** 移动端订阅入口只保留图标，完整数据仍可在点击后的弹层中查看。 */
 function installSubscriptionStyles() {
     if (typeof document === 'undefined' || document.querySelector(`style[data-plugin-css="${SUBSCRIPTION_STYLE_ID}"]`) !== null)
@@ -62,7 +71,7 @@ function installSubscriptionStyles() {
     const style = document.createElement('style');
     style.dataset.plugin = 'codingns4dsh';
     style.dataset.pluginCss = SUBSCRIPTION_STYLE_ID;
-    style.textContent = '@media (max-width: 768px){.codingns4dsh-subscription-trigger{gap:0!important;padding-left:4px!important;padding-right:4px!important}.codingns4dsh-subscription-label,.codingns4dsh-subscription-value{display:none!important}.codingns4dsh-subscription-popover{position:fixed!important;left:12px!important;right:12px!important;bottom:48px!important;width:auto!important;min-width:0!important;max-width:none!important;max-height:calc(100vh - 72px)!important;overflow:auto!important}}' + RESET_BUTTON_CSS;
+    style.textContent = '@media (max-width: 768px){.codingns4dsh-subscription-trigger{gap:0!important;padding-left:4px!important;padding-right:4px!important}.codingns4dsh-subscription-label,.codingns4dsh-subscription-value{display:none!important}.codingns4dsh-subscription-popover{position:fixed!important;left:12px!important;right:12px!important;bottom:48px!important;width:auto!important;min-width:0!important;max-width:none!important;max-height:calc(100vh - 72px)!important;overflow:auto!important}}' + RESET_BUTTON_CSS + MAGPIE_ROUTE_CSS;
     document.head.appendChild(style);
 }
 /** 在 DSH 原生步骤统计左侧显示当前 Agent 的订阅余量。 */
@@ -85,31 +94,85 @@ export function registerSubscriptionSlot(slots, rpc, getRefreshIntervalMins, loc
 function CommandCodeSubscriptionSlot(props) {
     const t = useCodingNsTranslator(props.locale ?? FALLBACK_LOCALE);
     const subscriptionUsageCache = usageCache(props.rpc);
-    const [usage, setUsage] = useState(null);
+    const [snapshot, setSnapshot] = useState(null);
     const [adapterId, setAdapterId] = useState(null);
     const [providerId, setProviderId] = useState(null);
     const [eligible, setEligible] = useState(false);
     const [open, setOpen] = useState(false);
     const [loading, setLoading] = useState(false);
+    const [magpieTab, setMagpieTab] = useState('usage');
+    const [magpiePlacement, setMagpiePlacement] = useState({ left: 0, width: 400 });
     const [clock, setClock] = useState(() => Date.now());
     const rootRef = useRef(null);
+    const magpiePopoverRef = useRef(null);
     const resetDialogRef = useRef(null);
     // 重置成功后的刷新不能重跑加载 effect，否则 usage 会被清空导致底部入口闪断。
     const refreshRef = useRef(null);
+    const routeRefreshControllerRef = useRef(null);
     const [resetOpen, setResetOpen] = useState(false);
     const [resetPending, setResetPending] = useState(false);
     const [resetResult, setResetResult] = useState(null);
     const [resetError, setResetError] = useState(null);
-    const modelSelectionRevision = props.useSession?.((value) => JSON.stringify(value.modelSelection));
+    // Agent-native session bindings are written by Host during a turn. Refresh
+    // at turn state changes so a snapshot loaded before the binding is not kept.
+    const modelSelectionRevision = props.useSession?.((value) => JSON.stringify([value.modelSelection, value.running]));
     // Agent、模型或 Provider 切换可能只改变 Host 侧会话配置，DSH 会话快照不一定会更新；
     // 订阅适配器缓存的通知才能真正触发重新查询，否则底部会一直显示旧上游的数据。
     const [adapterRevision, bumpAdapterRevision] = useState(0);
+    const openRef = useRef(open);
+    openRef.current = open;
+    const snapshotRef = useRef(snapshot);
+    snapshotRef.current = snapshot;
+    const hasMagpieSnapshot = snapshot?.magpie != null;
     useEffect(() => subscribeSessionAdapters(() => { bumpAdapterRevision((value) => value + 1); }), []);
+    useLayoutEffect(() => {
+        if (!open || !hasMagpieSnapshot || typeof document === 'undefined' || typeof window === 'undefined')
+            return;
+        const root = rootRef.current;
+        const popover = magpiePopoverRef.current;
+        if (root === null || popover === null)
+            return;
+        const getOpenSidebar = () => [...document.querySelectorAll('[data-sidebar-right-session][data-sidebar-right-open]')]
+            .find((element) => element.closest('[hidden]') === null && element.getBoundingClientRect().width > 0);
+        let observedSidebar;
+        let resizeObserver;
+        const updatePlacement = () => {
+            const sidebar = getOpenSidebar();
+            if (sidebar !== observedSidebar) {
+                if (observedSidebar !== undefined)
+                    resizeObserver?.unobserve(observedSidebar);
+                observedSidebar = sidebar;
+                if (observedSidebar !== undefined)
+                    resizeObserver?.observe(observedSidebar);
+            }
+            if (window.innerWidth <= 768) {
+                setMagpiePlacement((current) => current.left === 0 && current.width === 400 ? current : { left: 0, width: 400 });
+                return;
+            }
+            const sidebarLeft = sidebar?.getBoundingClientRect().left ?? null;
+            const next = calculateMagpiePopoverPlacement(root.getBoundingClientRect().left, window.innerWidth, sidebarLeft);
+            setMagpiePlacement((current) => current.left === next.left && current.width === next.width ? current : next);
+        };
+        resizeObserver = typeof globalThis.ResizeObserver === 'function' ? new globalThis.ResizeObserver(updatePlacement) : undefined;
+        resizeObserver?.observe(root);
+        resizeObserver?.observe(popover);
+        updatePlacement();
+        const mutationObserver = typeof globalThis.MutationObserver === 'function' ? new globalThis.MutationObserver(updatePlacement) : undefined;
+        mutationObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ['data-sidebar-right-open', 'hidden'], childList: true, subtree: true });
+        window.addEventListener('resize', updatePlacement);
+        document.addEventListener('scroll', updatePlacement, true);
+        return () => {
+            resizeObserver?.disconnect();
+            mutationObserver?.disconnect();
+            window.removeEventListener('resize', updatePlacement);
+            document.removeEventListener('scroll', updatePlacement, true);
+        };
+    }, [open, hasMagpieSnapshot]);
     useEffect(() => {
         const sessionId = props.sessionId?.trim();
         if (!sessionId) {
             setEligible(false);
-            setUsage(null);
+            setSnapshot(null);
             setAdapterId(null);
             setProviderId(null);
             setOpen(false);
@@ -117,11 +180,12 @@ function CommandCodeSubscriptionSlot(props) {
             setResetPending(false);
             setResetResult(null);
             setResetError(null);
+            setMagpieTab('usage');
             return;
         }
         let active = true;
         setEligible(false);
-        setUsage(null);
+        setSnapshot(null);
         setAdapterId(null);
         setProviderId(null);
         setOpen(false);
@@ -129,7 +193,9 @@ function CommandCodeSubscriptionSlot(props) {
         setResetPending(false);
         setResetResult(null);
         setResetError(null);
-        const refresh = async () => {
+        setMagpieTab('usage');
+        const refresh = async (signal) => {
+            let routeSignal;
             setLoading(true);
             try {
                 // 订阅入口必须读取当前会话的真实 Provider；模型选择器切换后不能复用
@@ -139,12 +205,14 @@ function CommandCodeSubscriptionSlot(props) {
                 if (!active || !isSubscriptionAdapter(adapterId)) {
                     if (active) {
                         setEligible(false);
-                        setUsage(null);
+                        setSnapshot(null);
                         setAdapterId(null);
                         setProviderId(null);
                     }
                     return;
                 }
+                if (signal.aborted)
+                    return false;
                 if (active) {
                     setEligible(true);
                     setAdapterId(adapterId);
@@ -154,31 +222,42 @@ function CommandCodeSubscriptionSlot(props) {
                 // 模型也是读取键的一部分：Antigravity 的 Gemini 与 Claude/GPT 是两个独立配额组。
                 // 会话 ID 同时承担 PeerHost 的路由身份；缓存也必须按会话隔离，
                 // 否则本机与远端使用相同 Agent/Provider/模型时会互相复用上游结果。
-                const cacheKey = `${adapterId}|${selection.providerId ?? ''}|${selection.modelId ?? ''}|${sessionId}`;
+                const cacheKey = JSON.stringify([adapterId, selection.providerId ?? '', selection.modelId ?? '', sessionId, selection.providerSessionId ?? '']);
+                const magpieSnapshot = snapshotRef.current?.magpie;
+                const includeRoute = magpieSnapshot !== null && magpieSnapshot !== undefined
+                    && (openRef.current || shouldResolveMagpieQuota(magpieSnapshot));
                 const cached = subscriptionUsageCache.get(cacheKey);
                 // New-API 的余额和 Token 日志可能随 Key/钱包状态快速变化，且旧结果
                 // 容易把历史日志投影到当前站点；每次刷新都重新读取，Sub2API 仍复用原缓存。
-                const canReuseCachedUsage = cached !== undefined && cached.usage.provider?.capability !== 'new-api';
-                if (canReuseCachedUsage && isSubscriptionUsageFresh(cached.capturedAt, Date.now(), intervalMins)) {
+                const canReuseCachedUsage = cached !== undefined && cached.usage.providerUsage?.provider?.capability !== 'new-api';
+                if (!includeRoute && canReuseCachedUsage && isSubscriptionUsageFresh(cached.capturedAt, Date.now(), intervalMins)) {
                     if (active)
-                        setUsage(cached.usage);
+                        setSnapshot(cached.usage);
                     return;
                 }
-                const next = await loadUsage(props.rpc, cacheKey, {
+                const payload = {
                     sessionId,
                     adapterId,
                     ...(selection.providerId ? { providerId: selection.providerId } : {}),
                     ...(selection.modelId ? { modelId: selection.modelId } : {}),
-                });
+                    ...(includeRoute ? { includeRoute: true } : {}),
+                };
+                routeSignal = includeRoute ? routeRefreshControllerRef.current?.signal : undefined;
+                const requestSignal = routeSignal === undefined ? signal : AbortSignal.any([signal, routeSignal]);
+                const next = includeRoute
+                    ? normalizeSubscriptionSnapshot(await callCliRpc(props.rpc, 'subscription', payload, requestSignal))
+                    : await loadUsage(props.rpc, cacheKey, payload);
                 if (next !== null)
                     subscriptionUsageCache.set(cacheKey, { usage: next, capturedAt: Date.now() });
                 if (active)
-                    setUsage(next);
+                    setSnapshot(next);
             }
             catch {
+                if (signal.aborted || routeSignal?.aborted === true)
+                    return false;
                 if (active) {
                     setEligible(false);
-                    setUsage(null);
+                    setSnapshot(null);
                 }
                 return false;
             }
@@ -192,16 +271,38 @@ function CommandCodeSubscriptionSlot(props) {
         refreshRef.current = poll.refresh;
         return () => {
             active = false;
+            routeRefreshControllerRef.current?.abort();
+            routeRefreshControllerRef.current = null;
             refreshRef.current = null;
             poll.dispose();
         };
     }, [props.rpc, props.sessionId, props.getRefreshIntervalMins, modelSelectionRevision, adapterRevision]);
+    // Route history is also required to resolve quotas for automatic models.
+    // The serial poller owns timing; this controller bounds the extra read to
+    // the panel lifetime or the period while the quota's upstream is unknown.
+    const magpieQuotaNeedsResolution = shouldResolveMagpieQuota(snapshot?.magpie);
+    const shouldLoadMagpieRoute = open || magpieQuotaNeedsResolution;
     useEffect(() => {
-        if (!eligible || usage === null)
+        if (!shouldLoadMagpieRoute || !hasMagpieSnapshot) {
+            routeRefreshControllerRef.current?.abort();
+            routeRefreshControllerRef.current = null;
+            return;
+        }
+        const controller = new AbortController();
+        routeRefreshControllerRef.current = controller;
+        void refreshRef.current?.({ afterPending: true });
+        return () => {
+            controller.abort();
+            if (routeRefreshControllerRef.current === controller)
+                routeRefreshControllerRef.current = null;
+        };
+    }, [shouldLoadMagpieRoute, hasMagpieSnapshot]);
+    useEffect(() => {
+        if (!eligible || snapshot === null)
             return;
         const timer = globalThis.setInterval(() => setClock(Date.now()), 60_000);
         return () => globalThis.clearInterval(timer);
-    }, [eligible, usage]);
+    }, [eligible, snapshot]);
     const closeResetDialog = () => {
         if (resetPending)
             return;
@@ -236,8 +337,32 @@ function CommandCodeSubscriptionSlot(props) {
     };
     useDismissOnOutsidePointer(rootRef, open, () => setOpen(false));
     useDismissOnOutsidePointer(resetDialogRef, resetOpen && !resetPending, closeResetDialog);
+    if (!eligible || snapshot === null)
+        return null;
+    if (snapshot.magpie !== null) {
+        const magpie = snapshot.magpie;
+        const magpieRemaining = resolveMagpieQuotaRemaining(magpie);
+        const label = t('usage.magpieUsageLabel');
+        return createElement('div', { ref: rootRef, style: subscriptionRootStyle }, createElement('button', {
+            type: 'button',
+            className: 'codingns4dsh-subscription-trigger',
+            onClick: () => setOpen((value) => !value),
+            'aria-label': label,
+            'aria-expanded': open,
+            style: subscriptionTriggerStyle,
+        }, createElement('span', { style: magpieTriggerIconStyle, 'aria-hidden': true }, createElement('img', {
+            src: providerIconUrl('magpie') ?? '/api/codingns/provider-icons/magpie.png',
+            alt: '',
+            width: 20,
+            height: 20,
+            style: magpieTriggerImageStyle,
+        })), magpieRemaining === null
+            ? createElement('span', { className: 'codingns4dsh-subscription-label', style: subscriptionLabelStyle }, t('usage.magpieShortLabel'))
+            : createRemainingRing(magpieRemaining)), open && createElement(MagpieUsagePopover, { usage: magpie, t, tab: magpieTab, onTabChange: setMagpieTab, placement: magpiePlacement, popoverRef: magpiePopoverRef }));
+    }
+    const usage = snapshot.providerUsage;
     // 未拿到真实订阅数据时不占用底部栏空间；加载状态不能伪装成订阅存在。
-    if (!eligible || usage === null || (usage.sub2api === undefined && usage.deepseek === undefined && usage.providerBalance === undefined && resolveDisplayWindow(usage) === null))
+    if (usage === null || (usage.sub2api === undefined && usage.deepseek === undefined && usage.providerBalance === undefined && resolveDisplayWindow(usage) === null))
         return null;
     const sub2api = usage.sub2api;
     const deepseek = usage.deepseek;
@@ -314,6 +439,164 @@ function CommandCodeSubscriptionSlot(props) {
         dialogRef: resetDialogRef,
     }));
 }
+function MagpieUsagePopover({ usage, t, tab = 'usage', onTabChange = () => { }, placement = { left: 0, width: 400 }, popoverRef }) {
+    const aggregateRows = usage.aggregate === null ? [] : [
+        [t('usage.magpieRequests'), formatMagpieNumber(usage.aggregate.calls)],
+        [t('usage.magpieErrors'), formatMagpieNumber(usage.aggregate.errors)],
+        [t('usage.magpieInputTokens'), formatMagpieTokenCount(usage.aggregate.inputTokens)],
+        [t('usage.magpieOutputTokens'), formatMagpieTokenCount(usage.aggregate.outputTokens)],
+        [t('usage.magpieCacheReadTokens'), formatMagpieTokenCount(usage.aggregate.cacheReadTokens)],
+        [t('usage.magpieCacheWriteTokens'), formatMagpieTokenCount(usage.aggregate.cacheWriteTokens)],
+        [t('usage.magpieTotalTokens'), formatMagpieTokenCount(sumKnownCounts(usage.aggregate.inputTokens, usage.aggregate.outputTokens))],
+        [t('usage.magpieCacheHitRate'), formatMagpieCacheHitRate(usage.aggregate.inputTokens, usage.aggregate.cacheReadTokens)],
+        [t('usage.magpieCost'), formatMagpieCost(usage.aggregate.costUsd)],
+    ];
+    const sessionRows = usage.session === null ? [] : [
+        [t('usage.magpieRequests'), formatMagpieNumber(usage.session.calls)],
+        [t('usage.magpieErrors'), formatMagpieNumber(usage.session.errors)],
+        [t('usage.magpieInputTokens'), formatMagpieTokenCount(usage.session.inputTokens)],
+        [t('usage.magpieOutputTokens'), formatMagpieTokenCount(usage.session.outputTokens)],
+        [t('usage.magpieCacheReadTokens'), formatMagpieTokenCount(usage.session.cacheReadTokens)],
+        [t('usage.magpieCacheWriteTokens'), formatMagpieTokenCount(usage.session.cacheWriteTokens)],
+        [t('usage.magpieTotalTokens'), formatMagpieTokenCount(sumKnownCounts(usage.session.inputTokens, usage.session.outputTokens))],
+        [t('usage.magpieCacheHitRate'), formatMagpieCacheHitRate(usage.session.inputTokens, usage.session.cacheReadTokens)],
+        [t('usage.magpieCost'), formatMagpieCost(usage.session.costUsd)],
+    ];
+    const quotas = usage.quotas ?? [];
+    const tabs = [
+        { id: 'usage', label: t('usage.magpieTabUsage') },
+        { id: 'route', label: t('usage.magpieTabRoute') },
+    ];
+    return createElement('div', {
+        ref: popoverRef,
+        className: 'codingns4dsh-subscription-popover',
+        role: 'dialog',
+        'aria-label': t('usage.magpieUsageLabel'),
+        style: { ...magpiePopoverStyle, left: placement.left, width: placement.width, maxWidth: placement.width },
+    }, createElement('div', { style: magpiePopoverHeadingStyle }, createElement('div', { style: magpiePopoverHeadingTextStyle }, createElement('strong', undefined, t('usage.magpieTitle'))), createElement('span', { style: magpieHeaderMetaStyle }, createElement('span', { style: magpieHeaderMutedStyle }, t('usage.magpieUpdated', { time: formatMagpieTimestamp(usage.capturedAt) })))), createElement('div', { role: 'tablist', 'aria-label': t('usage.magpieUsageLabel'), style: magpieTabsStyle }, ...tabs.map((entry) => createElement('button', {
+        key: entry.id,
+        type: 'button',
+        role: 'tab',
+        id: `codingns4dsh-magpie-tab-${entry.id}`,
+        'aria-selected': tab === entry.id,
+        'aria-controls': `codingns4dsh-magpie-panel-${entry.id}`,
+        className: 'codingns4dsh-magpie-tab',
+        onClick: () => onTabChange(entry.id),
+        style: { ...magpieTabStyle, ...(tab === entry.id ? magpieTabActiveStyle : {}) },
+    }, entry.label))), createElement('div', {
+        role: 'tabpanel',
+        id: `codingns4dsh-magpie-panel-${tab}`,
+        'aria-labelledby': `codingns4dsh-magpie-tab-${tab}`,
+        style: magpieTabPanelStyle,
+    }, tab === 'usage' ? MagpieUsagePanel({ usage, aggregateRows, sessionRows, t })
+        : MagpieRoutePanel({ usage, quotas, t })));
+}
+function MagpieUsagePanel({ usage, aggregateRows, sessionRows, t }) {
+    return createElement('div', undefined, createElement('section', { style: magpieUsageSectionStyle }, createElement('strong', { style: magpieSectionTitleStyle }, t('usage.magpieAggregateTitle')), usage.usageStatus === 'available'
+        ? createMagpieRows(aggregateRows)
+        : createElement('div', { style: magpieMutedTextStyle }, t('usage.magpieUsageUnavailable'))), createElement('section', { style: magpieUsageSectionStyle }, createElement('strong', { style: magpieSectionTitleStyle }, t('usage.magpieSessionTitle')), usage.sessionId !== null && createElement('div', { style: magpieSessionIdentityStyle }, createElement('span', undefined, t('usage.magpieAgent', { agent: usage.agent })), createElement('code', { style: magpieSessionIdStyle }, usage.sessionId)), usage.session === null
+        ? createElement('div', { style: magpieMutedTextStyle }, usage.sessionId === null ? t('usage.magpieSessionIdUnavailable') : t('usage.magpieSessionNoUsage'))
+        : createMagpieRows(sessionRows)));
+}
+function magpieQuotaUnavailableMessage(usage, quotas, t) {
+    return usage.quotaStatus === 'unavailable'
+        ? t('usage.magpieQuotaUnavailable')
+        : usage.quotaStatus === 'provider-unavailable'
+            ? t('usage.magpieQuotaProviderUnavailable')
+            : quotas.length === 0 ? t('usage.magpieQuotaNoData') : null;
+}
+function createMagpieProviderBadges(usage, style) {
+    const providers = usage.upstreamProviders ?? (usage.upstreamProvider === null ? [] : [usage.upstreamProvider]);
+    if (providers.length === 0)
+        return null;
+    return createElement('span', { style }, ...providers.map((provider) => createElement('span', { key: provider, style: magpieProviderBadgeStyle }, provider)));
+}
+function createMagpieQuotaCard(quota, t, index) {
+    return createElement('div', { key: `${quota.provider}-${quota.user ?? 'account'}-${index}`, style: magpieQuotaCardStyle }, createElement('div', { style: magpieQuotaCardHeadingStyle }, createElement('span', { style: magpieQuotaNameStyle }, quota.alias ?? quota.name), createElement('span', { style: magpieQuotaHeadingMetaStyle }, quota.plan ?? quota.provider)), (quota.user !== null || quota.balance !== null) && createElement('div', { style: magpieQuotaIdentityStyle }, quota.user !== null && createElement('span', { title: quota.user }, t('usage.magpieQuotaAccount', { account: quota.user })), quota.balance !== null && createElement('span', undefined, t('usage.magpieQuotaBalance', { balance: quota.balance }))), quota.windows.length === 0
+        ? createElement('div', { style: magpieQuotaMetaStyle }, t('usage.magpieQuotaNoWindows'))
+        : quota.windows.map((window, windowIndex) => {
+            const remaining = window.remainingPercent;
+            const amount = window.display ?? (window.amount !== null && window.limit !== null ? `${window.amount} / ${window.limit}${window.unit === null ? '' : ` ${window.unit}`}` : null);
+            return createElement('div', { key: `${window.name}-${windowIndex}`, style: magpieQuotaWindowStyle }, createElement('div', { style: windowHeadingStyle }, createElement('span', undefined, window.name), remaining === null ? amount : createElement('strong', undefined, `${formatPercent(remaining)}%`)), remaining !== null && createElement('div', { role: 'progressbar', 'aria-label': t('usage.magpieQuotaRemaining', { name: window.name, percent: formatPercent(remaining) }), 'aria-valuemin': 0, 'aria-valuemax': 100, 'aria-valuenow': remaining, style: barStyle }, createElement('span', { style: { ...barFillStyle, width: `${remaining}%` } })), (amount !== null || window.resetsAt !== null) && createElement('div', { style: magpieQuotaFooterStyle }, amount !== null && createElement('span', undefined, amount), window.resetsAt !== null && createElement('span', undefined, t('usage.magpieQuotaResets', { time: formatMagpieTimestamp(window.resetsAt) }))));
+        }));
+}
+function MagpieRoutePanel({ usage, quotas, t }) {
+    const route = usage.route;
+    const quotaMessage = magpieQuotaUnavailableMessage(usage, quotas, t);
+    const routeStatus = usage.routeStatus === 'no-route'
+        ? t('usage.magpieRouteNoRequests')
+        : usage.routeStatus === 'session-unavailable'
+            ? t('usage.magpieSessionIdUnavailable')
+            : t('usage.magpieRouteUnavailable');
+    const routeStages = route === null ? [] : [
+        [t('usage.magpieAskedModel'), route.asked],
+        [t('usage.magpieRoutedModel'), route.model],
+        [t('usage.magpieServedModel'), route.served],
+    ].filter((stage, index, all) => stage[1] !== null && all.findIndex((item) => item[1] === stage[1]) === index);
+    const active = route?.done === false;
+    const routeRows = route === null ? [] : [
+        [t('usage.magpieRouteGroup'), route.group],
+        [t('usage.magpieRouteRule'), route.rule],
+        [t('usage.magpieRouteAccount'), route.providerAccount ?? null],
+        [t('usage.magpieEffort'), route.effort],
+        [t('usage.magpieRequestStatus'), route.status === null ? null : `${route.done === true ? t('usage.magpieRouteDone') : route.done === false ? t('usage.magpieRouteRunning') : ''}${route.status}`],
+    ];
+    return createElement('div', undefined, createElement('section', { style: magpieSectionStyle }, createElement('div', { style: magpieQuotaHeadingStyle }, createElement('strong', { style: magpieSectionTitleStyle }, t('usage.magpieQuotaTitle')), createMagpieProviderBadges(usage, magpieProviderBadgesStyle)), quotaMessage !== null
+        ? createElement('div', { style: magpieEmptyStateStyle }, quotaMessage)
+        : quotas.map((quota, index) => createMagpieQuotaCard(quota, t, index))), createElement('section', { style: magpieSectionStyle }, createElement('div', { style: magpieRouteHeadingStyle }, createElement('strong', { style: magpieSectionTitleStyle }, t('usage.magpieRouteTitle')), route !== null && createElement('span', { className: active ? 'codingns4dsh-magpie-route-node-active' : undefined, style: magpieRouteStatusStyle }, createElement('span', { style: magpieRouteStatusDotStyle }), createElement('strong', undefined, route.done === true ? t('usage.magpieRouteComplete') : route.done === false ? t('usage.magpieRouteRunning').replace(/\s*·\s*$/u, '') : route.status ?? '--'))), route === null
+        ? createElement('div', { style: magpieEmptyStateStyle }, routeStatus)
+        : createElement('div', { style: magpieRouteHeroStyle }, createElement('div', { style: magpieRouteTrackStyle, 'aria-label': t('usage.magpieRouteFlowTitle'), role: 'list' }, ...routeStages.map(([label, model], index) => createElement('div', {
+            key: `step-${index}`,
+            className: 'codingns4dsh-magpie-route-step',
+            role: 'listitem',
+            style: { ...magpieRouteTrackItemStyle, animationDelay: `${index * 90}ms` },
+        }, createElement('div', { style: magpieRouteMarkerColumnStyle, 'aria-hidden': true }, createElement('div', { className: 'codingns4dsh-magpie-route-node', style: magpieRouteNodeStyle }, createElement('span', { style: magpieRouteNodeDotStyle })), index < routeStages.length - 1 && createElement('div', { style: magpieRouteConnectorStyle }, active && createElement('span', { className: 'codingns4dsh-magpie-route-pulse', style: magpieRoutePulseStyle }))), createElement('div', { style: magpieRouteStageCopyStyle }, createElement('span', { style: magpieRouteStageLabelStyle }, label), createElement('strong', { style: magpieRouteStageValueStyle, title: model }, model))))), routeRows.length > 0 && createElement('div', { style: magpieRouteMetaStyle }, ...routeRows.filter((row) => row[1] !== null).map(([label, value]) => createElement('div', { key: label, style: magpieRouteMetaItemStyle }, createElement('span', { style: magpieRouteMetaLabelStyle }, label), createElement('strong', { style: magpieRouteMetaValueStyle, title: value }, value)))), route.tries.length > 0 && createElement('div', { style: magpieAttemptsStyle }, ...route.tries.map((attempt, index) => createElement('div', { key: `${attempt.model ?? 'model'}-${index}`, style: magpieAttemptRowStyle }, createElement('span', { style: magpieAttemptModelStyle }, attempt.model ?? t('usage.magpieUnknownModel')), attempt.failed && createElement('span', { style: magpieFailedStyle }, t('usage.magpieFallback'))))))));
+}
+function createMagpieRows(rows) {
+    if (rows.length === 0)
+        return createElement('div', { style: magpieMutedTextStyle }, '--');
+    return createElement('div', { style: magpieStatsGridStyle }, ...rows.map(([label, value]) => createElement('div', { key: label, style: magpieStatStyle }, createElement('span', { style: magpieStatLabelStyle }, label), createElement('strong', { style: magpieRowValueStyle }, value ?? '--'))));
+}
+function formatMagpieNumber(value) {
+    return value === null ? null : formatInteger(value);
+}
+function formatMagpieTokenCount(value) {
+    return value === null ? null : formatCompactTokenCount(value);
+}
+function formatMagpieCost(value) {
+    return value === null ? null : `$${value.toFixed(value >= 0.01 ? 2 : 4)}`;
+}
+function formatMagpieCacheHitRate(inputTokens, cacheReadTokens) {
+    if (inputTokens === null || cacheReadTokens === null)
+        return null;
+    const totalPromptTokens = inputTokens + cacheReadTokens;
+    return totalPromptTokens <= 0 ? null : formatSub2ApiPercent(cacheReadTokens / totalPromptTokens * 100);
+}
+function sumKnownCounts(left, right) {
+    if (left === null && right === null)
+        return null;
+    return (left ?? 0) + (right ?? 0);
+}
+function formatMagpieTimestamp(value) {
+    const timestamp = Date.parse(value);
+    return Number.isFinite(timestamp) ? new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-digit' }).format(timestamp) : value;
+}
+function normalizeSubscriptionSnapshot(value) {
+    if (value === null || value === undefined)
+        return null;
+    if (!isRecord(value))
+        return null;
+    if ('providerUsage' in value || 'magpie' in value) {
+        const providerUsage = isRecord(value.providerUsage) ? value.providerUsage : null;
+        const magpie = isRecord(value.magpie) ? value.magpie : null;
+        return { providerUsage, magpie };
+    }
+    // Compatibility with Hosts that returned the provider usage directly.
+    return { providerUsage: value, magpie: null };
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
 function SubscriptionPopover({ usage, providerName, t, nowMs, reset }) {
     if (usage.sub2api !== undefined)
         return createElement(Sub2ApiPopover, { usage: usage.sub2api, providerName, t });
@@ -671,12 +954,26 @@ function createModelRow(model, unit) {
 function resolveDisplayWindow(usage) {
     return usage.primary ?? usage.secondary ?? usage.monthly;
 }
+function shouldResolveMagpieQuota(usage) {
+    return usage?.quotaStatus === 'provider-unavailable' && usage.sessionId !== null && usage.session !== null;
+}
+function resolveMagpieQuotaRemaining(usage) {
+    if (usage.quotaStatus !== 'available')
+        return null;
+    for (const quota of usage.quotas) {
+        for (const window of quota.windows) {
+            if (window.remainingPercent !== null)
+                return window.remainingPercent;
+        }
+    }
+    return null;
+}
 function selectDeepseekBalance(usage) {
     return usage.balances.find((balance) => balance.currency.toUpperCase() === 'USD') ?? usage.balances[0] ?? null;
 }
 /** 已具备用量读取契约的适配器才挂载底部订阅入口。 */
 function isSubscriptionAdapter(adapterId) {
-    return adapterId === 'antigravity' || adapterId === 'command-code' || adapterId === 'codex' || adapterId === 'claude-code' || adapterId === 'codebuddy' || adapterId === 'codebuddy-cn' || adapterId === 'dsh' || adapterId === 'grok' || adapterId === 'kimi' || adapterId === 'opencode' || adapterId === 'qoder' || adapterId === 'qoder-cn' || adapterId === 'workbuddy' || adapterId === 'zcode';
+    return adapterId === 'antigravity' || adapterId === 'command-code' || adapterId === 'codex' || adapterId === 'claude-code' || adapterId === 'codebuddy' || adapterId === 'codebuddy-cn' || adapterId === 'dsh' || adapterId === 'grok' || adapterId === 'kimi' || adapterId === 'opencode' || adapterId === 'pi' || adapterId === 'qoder' || adapterId === 'qoder-cn' || adapterId === 'workbuddy' || adapterId === 'zcode';
 }
 function isRemoteWebContext() {
     return globalThis.__CODINGNS4DSH_REMOTE_WEB_CONTEXT__ === true;
@@ -806,6 +1103,60 @@ function formatCreditBalance(value) {
 const subscriptionRootStyle = { position: 'relative', minWidth: 0, display: 'inline-flex', alignItems: 'center' };
 const subscriptionTriggerStyle = { display: 'inline-flex', alignItems: 'center', gap: 6, height: 28, border: 0, borderRadius: 14, padding: '0 8px 0 4px', color: dshThemeColor.labelSecondary, background: 'transparent', cursor: 'pointer', fontSize: uiFontSize(13), lineHeight: '20px' };
 const subscriptionLabelStyle = { whiteSpace: 'nowrap' };
+const magpieTriggerIconStyle = { display: 'inline-flex', width: 20, height: 20, alignItems: 'center', justifyContent: 'center', overflow: 'hidden', borderRadius: 6, background: dshThemeColor.surfaceSubtle };
+const magpieTriggerImageStyle = { display: 'block', width: '100%', height: '100%', objectFit: 'cover' };
+const magpieMutedTextStyle = { color: dshThemeColor.labelTertiary, fontSize: uiFontSize(12), lineHeight: '17px', overflowWrap: 'anywhere' };
+const magpieHeaderMutedStyle = { color: dshThemeColor.labelTertiary, fontSize: uiFontSize(12), lineHeight: '17px', overflowWrap: 'anywhere' };
+const magpieHeaderMetaStyle = { display: 'grid', justifyItems: 'end', gap: 3, minWidth: 0, textAlign: 'right' };
+const magpiePopoverHeadingStyle = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 22, paddingBottom: 12, borderBottom: `1px solid ${dshThemeColor.border}`, fontSize: uiFontSize(15) };
+const magpiePopoverHeadingTextStyle = { display: 'grid', gap: 3, minWidth: 0 };
+const magpieSectionTitleStyle = { fontSize: uiFontSize(13), color: dshThemeColor.labelSecondary };
+const magpieTabsStyle = { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 4, marginTop: 8, padding: 3, borderRadius: 9, background: dshThemeColor.surfaceSubtle };
+const magpieTabStyle = { minWidth: 0, padding: '6px 8px', border: 0, borderRadius: 8, background: 'transparent', color: dshThemeColor.labelTertiary, cursor: 'pointer', fontSize: uiFontSize(12), lineHeight: '16px', whiteSpace: 'nowrap' };
+const magpieTabActiveStyle = { background: dshThemeColor.menuBackground, color: dshThemeColor.labelPrimary, boxShadow: `0 1px 3px ${dshThemeColor.border}` };
+const magpieTabPanelStyle = { minHeight: 0 };
+const magpieSectionStyle = { display: 'grid', gap: 8, paddingTop: 11, marginTop: 10, borderTop: `1px solid ${dshThemeColor.border}` };
+const magpieUsageSectionStyle = { display: 'grid', gap: 5, paddingTop: 8, marginTop: 7, borderTop: `1px solid ${dshThemeColor.border}` };
+const magpieStatsGridStyle = { display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 6, paddingTop: 0 };
+const magpieStatStyle = { display: 'grid', alignContent: 'space-between', gap: 1, minWidth: 0, minHeight: 40, boxSizing: 'border-box', padding: '5px 7px', borderRadius: 8, background: dshThemeColor.surfaceSubtle };
+const magpieStatLabelStyle = { minWidth: 0, color: dshThemeColor.labelTertiary, fontSize: uiFontSize(10), lineHeight: '13px', overflowWrap: 'anywhere' };
+const magpieRowValueStyle = { color: dshThemeColor.labelPrimary, fontSize: uiFontSize(14), fontWeight: 650, lineHeight: '18px', textAlign: 'right', overflowWrap: 'anywhere' };
+const magpieSessionIdentityStyle = { display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: '2px 10px', minWidth: 0, color: dshThemeColor.labelSecondary, fontSize: uiFontSize(12), lineHeight: '16px' };
+const magpieSessionIdStyle = { flex: '1 1 120px', minWidth: 0, color: dshThemeColor.labelTertiary, fontSize: uiFontSize(10), lineHeight: '14px', whiteSpace: 'normal', overflowWrap: 'anywhere' };
+const magpieAttemptsStyle = { display: 'grid', gap: 5, paddingTop: 6 };
+const magpieAttemptRowStyle = { display: 'flex', justifyContent: 'space-between', gap: 14, fontSize: uiFontSize(12) };
+const magpieAttemptModelStyle = { color: dshThemeColor.labelSecondary, overflowWrap: 'anywhere' };
+const magpieFailedStyle = { flex: 'none', color: dshThemeColor.error, fontSize: uiFontSize(11) };
+const magpieQuotaHeadingStyle = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 };
+const magpieProviderBadgesStyle = { display: 'flex', justifyContent: 'flex-end', flexWrap: 'wrap', gap: 5, minWidth: 0 };
+const magpieProviderBadgeStyle = { flex: 'none', maxWidth: 220, overflow: 'hidden', padding: '4px 8px', borderRadius: 999, background: dshThemeColor.surfaceSubtle, color: dshThemeColor.labelSecondary, fontSize: uiFontSize(11), textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+const magpieEmptyStateStyle = { display: 'grid', placeItems: 'center', minHeight: 36, padding: '8px 10px', color: dshThemeColor.labelTertiary, fontSize: uiFontSize(12), lineHeight: '17px', textAlign: 'center' };
+const magpieQuotaCardStyle = { display: 'grid', gap: 5, marginTop: 7, padding: '9px 10px', border: `1px solid ${dshThemeColor.border}`, borderRadius: 9, background: dshThemeColor.surfaceSubtle };
+const magpieQuotaCardHeadingStyle = { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10 };
+const magpieQuotaNameStyle = { minWidth: 0, overflow: 'hidden', color: dshThemeColor.labelPrimary, fontSize: uiFontSize(13), fontWeight: 650, textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+const magpieQuotaHeadingMetaStyle = { flex: 'none', maxWidth: 160, overflow: 'hidden', color: dshThemeColor.labelTertiary, fontSize: uiFontSize(11), textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+const magpieQuotaIdentityStyle = { display: 'flex', flexWrap: 'wrap', gap: '3px 12px', color: dshThemeColor.labelTertiary, fontSize: uiFontSize(11), lineHeight: '15px', overflowWrap: 'anywhere' };
+const magpieQuotaMetaStyle = { color: dshThemeColor.labelTertiary, fontSize: uiFontSize(11), lineHeight: '15px', overflowWrap: 'anywhere' };
+const magpieQuotaWindowStyle = { display: 'grid', gap: 4, paddingTop: 3 };
+const magpieQuotaFooterStyle = { display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '3px 10px', color: dshThemeColor.labelTertiary, fontSize: uiFontSize(11), lineHeight: '15px' };
+const magpieRouteHeadingStyle = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 };
+const magpieRouteHeroStyle = { display: 'grid', gap: 11, padding: '12px 13px', border: `1px solid ${dshThemeColor.border}`, borderRadius: 12, background: `linear-gradient(145deg, ${dshThemeColor.surfaceSubtle}, transparent)` };
+const magpieRouteStatusStyle = { display: 'inline-flex', alignItems: 'center', gap: 6, width: 'fit-content', padding: '3px 8px', borderRadius: 999, background: dshThemeColor.surfaceSubtle, color: dshThemeColor.labelSecondary, fontSize: uiFontSize(11), whiteSpace: 'nowrap' };
+const magpieRouteStatusDotStyle = { width: 8, height: 8, borderRadius: '50%', background: dshThemeColor.accent };
+const magpieRouteTrackStyle = { display: 'grid', gap: 0, minWidth: 0, padding: '3px 0' };
+const magpieRouteTrackItemStyle = { display: 'grid', gridTemplateColumns: '18px minmax(0, 1fr)', alignItems: 'start', gap: 12, minWidth: 0, padding: '5px 8px', margin: '0 -8px', borderRadius: 8 };
+const magpieRouteMarkerColumnStyle = { display: 'flex', flexDirection: 'column', alignItems: 'center', minHeight: 18 };
+const magpieRouteNodeStyle = { display: 'grid', flex: '0 0 18px', placeItems: 'center', width: 18, height: 18, borderRadius: '50%', background: dshThemeColor.menuBackground, boxShadow: `0 0 0 1px ${dshThemeColor.border}` };
+const magpieRouteNodeDotStyle = { width: 7, height: 7, borderRadius: '50%', background: dshThemeColor.accent };
+const magpieRouteStageCopyStyle = { display: 'grid', gap: 3, minWidth: 0, padding: '2px 0 3px' };
+const magpieRouteStageLabelStyle = { color: dshThemeColor.labelTertiary, fontSize: uiFontSize(10), lineHeight: '13px', letterSpacing: '.025em' };
+const magpieRouteStageValueStyle = { color: dshThemeColor.labelPrimary, fontSize: uiFontSize(12), fontWeight: 620, lineHeight: '16px', overflowWrap: 'anywhere' };
+const magpieRouteConnectorStyle = { width: 2, height: 28, marginTop: 4, overflow: 'hidden', borderRadius: 2, background: `linear-gradient(180deg, ${dshThemeColor.accent}, ${dshThemeColor.border})` };
+const magpieRoutePulseStyle = { display: 'block', width: '100%', height: 9, borderRadius: 2, background: dshThemeColor.accent, boxShadow: `0 0 6px ${dshThemeColor.accent}` };
+const magpieRouteMetaStyle = { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 6 };
+const magpieRouteMetaItemStyle = { display: 'grid', alignContent: 'start', gap: 3, minWidth: 0, padding: '6px 8px', border: `1px solid ${dshThemeColor.border}`, borderRadius: 8, background: dshThemeColor.menuBackground };
+const magpieRouteMetaLabelStyle = { color: dshThemeColor.labelTertiary, fontSize: uiFontSize(10), lineHeight: '13px' };
+const magpieRouteMetaValueStyle = { color: dshThemeColor.labelSecondary, fontSize: uiFontSize(11), fontWeight: 550, lineHeight: '15px', overflowWrap: 'anywhere' };
 const sub2apiIdentityStyle = { display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' };
 const sub2apiLogoStyle = { display: 'block', borderRadius: 4, objectFit: 'contain' };
 const deepseekBalanceIdentityStyle = { display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' };
@@ -846,7 +1197,8 @@ const barStyle = { height: 7, overflow: 'hidden', borderRadius: 4, background: d
 const barFillStyle = { display: 'block', height: '100%', borderRadius: 4, background: dshThemeColor.accent, transition: 'width .2s ease' };
 const resetStyle = { color: dshThemeColor.labelTertiary, fontSize: uiFontSize(12) };
 const quotaGroupTitleStyle = { paddingTop: 12, color: dshThemeColor.labelSecondary, fontSize: uiFontSize(12), fontWeight: 600, letterSpacing: '.02em' };
-const subscriptionPopoverStyle = { ...dshPopupSurfaceStyle, position: 'absolute', zIndex: 1200, bottom: 'calc(100% + 8px)', left: 0, width: 'max-content', minWidth: 280, maxWidth: 'min(400px, calc(100vw - 24px))', boxSizing: 'border-box', padding: 14, borderRadius: 12 };
+const subscriptionPopoverStyle = { ...dshPopupSurfaceStyle, position: 'absolute', zIndex: 1200, bottom: 'calc(100% + 8px)', left: 0, width: 'max-content', minWidth: 280, maxWidth: 'min(400px, calc(100vw - 24px))', maxHeight: 'min(70vh, 560px)', overflowY: 'auto', boxSizing: 'border-box', padding: 14, borderRadius: 12 };
+const magpiePopoverStyle = { ...subscriptionPopoverStyle, width: 400, minWidth: 0, maxWidth: 'min(400px, calc(100vw - 24px))', maxHeight: 'min(78vh, 640px)', padding: 12, borderRadius: 14 };
 const resetCreditsSectionStyle = { display: 'grid', gap: 6, marginTop: 10, padding: '10px 12px', border: `1px solid ${dshThemeColor.border}`, borderRadius: 10, background: dshThemeColor.surfaceSubtle };
 const resetCreditsRowStyle = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, color: dshThemeColor.labelSecondary, fontSize: uiFontSize(13) };
 const resetCreditsValueGroupStyle = { display: 'inline-flex', alignItems: 'center', gap: 8 };