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

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

@@ -1,14 +1,18 @@
 import { startSerialPolling } from './serial-polling.js';
-import { createElement, useEffect, useRef, useState } from 'react';
+import { createElement, Fragment, 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';
 import { resolveCodingNsTranslator, useCodingNsTranslator } from './locale.js';
 import { providerIconUrl } from './provider-icons.js';
+import { MagpieProviderLogo } from './features/magpie-provider-logo.js';
+import { MAGPIE_REQUESTS_PAGE_SIZE, RequestsPage, installMagpiePageStyles } from './features/magpie-management-page.js';
+import { createQuotaAccountBlock, createQuotaGroupHeader, formatQuotaCredits, formatQuotaNumber, groupQuotasByProvider, readWindowCreditBalance, resolveQuotaBalanceLabel, resolveQuotaCreditBalance, } from './features/subscription-quota-groups.js';
 import { subscribeSessionAdapters } from './session-adapter-cache.js';
 import { loadCliSessionConfig } from './cli-session-config-cache.js';
 import { dshPopupSurfaceStyle, dshSettingsButtonStyle, dshSettingsPrimaryButtonStyle, dshThemeColor } from './theme.js';
-import { useDismissOnOutsidePointer } from './popup-dismiss.js';
+import { backdropPointerDownHandler, useDismissOnOutsidePointer } from './popup-dismiss.js';
+import { callCodingNsRpcResult } from './rpc-call.js';
 import { uiFontSize } from './font-scale.js';
 const SUBSCRIPTION_STYLE_ID = 'codingns4dsh-subscription-responsive-style';
 /**
@@ -48,6 +52,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,14 +60,28 @@ 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}}';
+const MAGPIE_REQUESTS_CSS = '.codingns4dsh-magpie-route-requests:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.08));color:var(--dsw-alias-label-primary,CanvasText)}.codingns4dsh-magpie-route-requests:focus-visible,.codingns4dsh-magpie-requests-close:focus-visible,.codingns4dsh-magpie-requests-retry:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#1677ff))}.codingns4dsh-magpie-requests-close:hover,.codingns4dsh-magpie-requests-retry:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.08));color:var(--dsw-alias-label-primary,CanvasText)}.codingns4dsh-magpie-requests-dialog:focus,.codingns4dsh-magpie-requests-dialog:focus-visible{outline:none}.codingns4dsh-magpie-requests-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}.codingns4dsh-magpie-requests-view{display:block!important;width:100%;height:auto!important;min-height:0;padding-left:0!important;background:transparent}.codingns4dsh-magpie-requests-view .codingns-magpie-view{max-width:none;padding:0}@media (max-width:768px){.codingns4dsh-magpie-requests-overlay{align-items:flex-end!important;padding:12px!important}.codingns4dsh-magpie-requests-dialog{width:100%!important;max-height:78vh!important;max-height:78dvh!important}}@media (prefers-reduced-motion:reduce){.codingns4dsh-magpie-route-requests{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 };
+}
+/**
+ * 移动端订阅入口只保留图标，完整数据仍可在点击后的弹层中查看。
+ * 弹层高度上限固定为浏览器可视高度的 75%：先写 `vh` 兜底，再由 `dvh` 覆盖，
+ * 使移动端工具栏收展后仍按真实可视区计算；超出部分在弹层内部纵向滚动。
+ */
+export const SUBSCRIPTION_RESPONSIVE_CSS = '@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:75vh!important;max-height:75dvh!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;box-sizing:border-box!important}}';
 function installSubscriptionStyles() {
     if (typeof document === 'undefined' || document.querySelector(`style[data-plugin-css="${SUBSCRIPTION_STYLE_ID}"]`) !== null)
         return;
     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 = SUBSCRIPTION_RESPONSIVE_CSS + RESET_BUTTON_CSS + MAGPIE_ROUTE_CSS + MAGPIE_REQUESTS_CSS;
     document.head.appendChild(style);
 }
 /** 在 DSH 原生步骤统计左侧显示当前 Agent 的订阅余量。 */
@@ -85,31 +104,93 @@ 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');
+    // 多账号厂商默认只展开会话实际使用的账号；展开状态挂在根组件上，
+    // 弹层内容本身不持有 Hook，便于无浏览器的组件测试直接展开内容树。
+    const [expandedQuotaGroups, setExpandedQuotaGroups] = useState([]);
+    const toggleQuotaGroup = (provider) => {
+        setExpandedQuotaGroups((current) => current.includes(provider)
+            ? current.filter((item) => item !== provider)
+            : [...current, provider]);
+    };
+    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 +198,15 @@ function CommandCodeSubscriptionSlot(props) {
             setResetPending(false);
             setResetResult(null);
             setResetError(null);
+            setMagpieTab('usage');
             return;
         }
         let active = true;
+        // 未解析的 Magpie 配额必须快速补读：官方余额一旦抢先显示，用户要等到下一次
+        // 轮询（默认 5 分钟）或整页刷新才会切到 Magpie。
+        let upstreamUnresolved = false;
         setEligible(false);
-        setUsage(null);
+        setSnapshot(null);
         setAdapterId(null);
         setProviderId(null);
         setOpen(false);
@@ -129,7 +214,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 +226,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 +243,43 @@ 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() });
+                upstreamUnresolved = shouldResolveMagpieQuota(next?.magpie);
                 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;
             }
@@ -188,20 +289,46 @@ function CommandCodeSubscriptionSlot(props) {
             }
         };
         const intervalMins = props.getRefreshIntervalMins?.() ?? DEFAULT_SUBSCRIPTION_USAGE_SETTINGS.refreshIntervalMins;
-        const poll = startSerialPolling(refresh, Math.max(0, intervalMins) * 60_000, { timeoutMs: 30_000 });
+        const pollIntervalMs = Math.max(0, intervalMins) * 60_000;
+        const poll = startSerialPolling(refresh, pollIntervalMs, {
+            timeoutMs: 30_000,
+            getIntervalMs: () => upstreamUnresolved ? Math.min(pollIntervalMs, MAGPIE_QUOTA_RETRY_MS) : pollIntervalMs,
+        });
         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 +363,40 @@ 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 readout = resolveMagpieTriggerReadout(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,
+        })), createMagpieTriggerReadout(readout, t)), open && createElement(MagpieUsagePopover, {
+            rpc: props.rpc,
+            usage: magpie,
+            t,
+            tab: magpieTab,
+            onTabChange: setMagpieTab,
+            expandedGroups: expandedQuotaGroups,
+            onToggleGroup: toggleQuotaGroup,
+            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 +473,365 @@ function CommandCodeSubscriptionSlot(props) {
         dialogRef: resetDialogRef,
     }));
 }
+function MagpieUsagePopover({ rpc, usage, t, tab = 'usage', onTabChange = () => { }, expandedGroups = [], onToggleGroup = () => { }, 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({ rpc, usage, quotas, t, expandedGroups, onToggleGroup })));
+}
+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 })), usage.sessionName !== undefined && createElement('strong', { style: magpieSessionNameStyle, title: usage.sessionName }, usage.sessionName), 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: magpieQuotaNameWithLogoStyle }, createElement(MagpieProviderLogo, { identities: [quota.provider, quota.name], logoDataUrl: quota.logoDataUrl, size: 20, className: 'codingns4dsh-magpie-quota-logo', fallback: 'none' }), 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;
+            // 积分窗口（WorkBuddy 的 `0 / 350`）按数量读更准确：百分比在这里没有意义。
+            const credits = formatQuotaWindowCredits(window);
+            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), credits !== null
+                ? createElement('strong', undefined, credits)
+                : remaining === null ? amount : createElement('strong', undefined, `${formatPercent(remaining)}%`)), 
+            // 积分窗口用满格数量条展示已用比例，避免"0% 还能用"的误读。
+            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) }))));
+        }));
+}
+/**
+ * 单个窗口若是按积分计量，返回"剩余 / 上限"文本；普通百分比窗口返回 null。
+ *
+ * 卡片会为每个窗口单独调用一次，所以这里按窗口自治判断，不依赖账号整体状态。
+ */
+function formatQuotaWindowCredits(window) {
+    const credits = readWindowCreditBalance(window);
+    return credits === null ? null : formatQuotaCredits(credits);
+}
+function MagpieRoutePanel({ rpc, usage, quotas, t, expandedGroups, onToggleGroup }) {
+    const route = usage.route;
+    const groups = groupQuotasByProvider(quotas);
+    const sessionAccount = route?.providerAccount ?? null;
+    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)
+        : groups.map((group) => {
+            const expanded = expandedGroups.includes(group.provider);
+            const multiple = group.accounts.length > 1;
+            return createElement('div', { key: group.provider, style: magpieQuotaCardStyle }, createQuotaGroupHeader({
+                group,
+                t,
+                expanded,
+                onToggle: multiple ? () => onToggleGroup(group.provider) : null,
+            }), group.accounts.map((quota, index) => createElement('div', { key: `${group.provider}-${quota.user ?? 'account'}-${index}` }, createQuotaAccountBlock(quota, {
+                t,
+                nowMs: Date.now(),
+                // 单账号厂商由组头承担名称，账号块不再重复。
+                showAccountName: multiple,
+                // 组未展开时只留会话账号的明细，其余账号折叠成余量行。
+                compact: multiple && !expanded && quota.active !== true && (sessionAccount === null || quota.user !== sessionAccount),
+                fallbackName: group.name === '' ? group.provider : group.name,
+            }))));
+        })), createElement('section', { style: magpieSectionStyle }, createElement('div', { style: magpieRouteHeadingStyle }, createElement('strong', { style: magpieSectionTitleStyle }, t('usage.magpieRouteTitle')), route !== null && createElement('div', { style: magpieRouteHeadingActionsStyle }, 
+    // “查看请求”入口与状态徽标同高、同排：入口在左，状态在右。
+    createElement(MagpieRouteRequests, {
+        rpc,
+        sessionId: usage.sessionId,
+        sessionName: usage.sessionName ?? null,
+        agent: usage.agent,
+        t,
+    }), 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'))))))));
+}
+/**
+ * 路由标题栏的“查看请求”入口：按钮、模态框与读取状态放在同一个子组件里。
+ *
+ * 弹层内容本身不持有 Hook（无浏览器测试会直接展开内容树），因此这里只由
+ * `MagpieRoutePanel` 渲染元素，真正的状态留在本组件内部。模态框内的请求明细
+ * 直接复用管理页的 `RequestsPage`，只把会话筛选固定为当前会话。
+ */
+export function MagpieRouteRequests({ rpc, sessionId, sessionName, agent, t }) {
+    const enabled = canReadMagpieSessionRequests(sessionId, agent);
+    const [open, setOpen] = useState(false);
+    const [page, setPage] = useState(null);
+    const [offset, setOffset] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    const [reloadKey, setReloadKey] = useState(0);
+    const controllerRef = useRef(null);
+    useEffect(() => {
+        if (!open || !enabled)
+            return;
+        const controller = new AbortController();
+        controllerRef.current = controller;
+        setLoading(true);
+        setError(false);
+        void readMagpieSessionRequestPage(rpc, sessionId, agent, offset, controller.signal).then((next) => {
+            if (controller.signal.aborted)
+                return;
+            if (next === null) {
+                setError(true);
+                return;
+            }
+            setPage(next);
+        }).catch(() => {
+            if (!controller.signal.aborted)
+                setError(true);
+        }).finally(() => {
+            if (!controller.signal.aborted)
+                setLoading(false);
+        });
+        return () => {
+            controller.abort();
+            if (controllerRef.current === controller)
+                controllerRef.current = null;
+        };
+    }, [open, enabled, offset, reloadKey, rpc, sessionId, agent]);
+    // 模态框覆盖整个视口，Esc 是移动端之外唯一的键盘关闭方式。
+    useEffect(() => {
+        if (!open || typeof document === 'undefined')
+            return;
+        // 捕获阶段拦截 Esc：只关闭模态框，不再让底部弹层的关闭监听把整个弹层一起收起。
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            event.stopPropagation();
+            setOpen(false);
+        };
+        document.addEventListener('keydown', onKeyDown, true);
+        return () => document.removeEventListener('keydown', onKeyDown, true);
+    }, [open]);
+    const close = () => {
+        controllerRef.current?.abort();
+        controllerRef.current = null;
+        setOpen(false);
+    };
+    const openRequests = () => {
+        controllerRef.current?.abort();
+        setPage(null);
+        setOffset(0);
+        setError(false);
+        setLoading(true);
+        // 请求明细复用管理页组件，需要先装上管理页自己的样式表。
+        installMagpiePageStyles();
+        setOpen(true);
+    };
+    return createElement(Fragment, undefined, enabled && createElement('button', {
+        type: 'button',
+        className: 'codingns4dsh-magpie-route-requests',
+        onClick: openRequests,
+        'aria-haspopup': 'dialog',
+        title: t('usage.magpieViewRequests'),
+        style: magpieRouteRequestsButtonStyle,
+    }, t('usage.magpieViewRequests')), enabled && open && createElement(MagpieSessionRequestsDialog, {
+        sessionId,
+        sessionName,
+        agent,
+        page,
+        offset,
+        loading,
+        error,
+        t,
+        onClose: close,
+        onOffsetChange: setOffset,
+        onRetry: () => { setLoading(true); setError(false); setReloadKey((value) => value + 1); },
+    }));
+}
+/** Host 只接受小写 Agent ID；会话与 Agent 必须成对出现，缺一不可。 */
+function canReadMagpieSessionRequests(sessionId, agent) {
+    return sessionId !== null && sessionId.trim() !== '' && sessionId.length <= 512 && /^[a-z0-9][a-z0-9-]*$/u.test(agent);
+}
+/** 只读取今天的会话请求，与路由卡片和“当前 Agent 会话”用量保持同一时间口径。 */
+async function readMagpieSessionRequestPage(rpc, sessionId, agent, offset, signal) {
+    const result = await callCodingNsRpcResult(rpc, 'magpie/usage/requests', {
+        period: 'today',
+        offset,
+        limit: MAGPIE_REQUESTS_PAGE_SIZE,
+        sessionId,
+        sessionAgent: agent,
+    }, signal);
+    if (!result.ok)
+        throw new Error(result.error.message);
+    const value = result.value;
+    return isRecord(value) && Array.isArray(value.items)
+        ? value
+        : null;
+}
+/**
+ * 请求模态框：外壳（遮罩、标题、关闭）由弹层提供，明细直接复用管理页的请求用量视图。
+ *
+ * 管理页视图自带统计条、桌面表格 / 移动卡片、分页和空状态，这里只负责把会话固定住，
+ * 不再维护一套重复的请求卡片渲染。
+ */
+function MagpieSessionRequestsDialog({ sessionId, sessionName, agent, page, offset, loading, error, t, onClose, onOffsetChange, onRetry }) {
+    return createElement('div', {
+        className: 'codingns4dsh-magpie-requests-overlay',
+        role: 'presentation',
+        style: magpieRequestsOverlayStyle,
+        // 只有按在遮罩自身时才关闭；从内容内部按下再拖到遮罩上不会误关。
+        onPointerDown: backdropPointerDownHandler(onClose),
+    }, createElement('div', {
+        role: 'dialog',
+        'aria-modal': true,
+        'aria-label': t('usage.magpieRequestsTitle'),
+        className: 'codingns4dsh-magpie-requests-dialog',
+        tabIndex: -1,
+        autoFocus: true,
+        style: magpieRequestsDialogStyle,
+    }, createElement('div', { style: magpieRequestsHeadingStyle }, createElement('strong', { style: magpieRequestsTitleStyle }, t('usage.magpieRequestsTitle')), createElement('div', { style: magpieRequestsHeadingActionsStyle }, error && createElement('button', {
+        type: 'button',
+        className: 'codingns4dsh-magpie-requests-retry',
+        onClick: onRetry,
+        style: magpieRequestsRetryStyle,
+    }, t('magpie.refresh')), createElement('button', {
+        type: 'button',
+        className: 'codingns4dsh-magpie-requests-close',
+        onClick: onClose,
+        'aria-label': t('usage.magpieRequestsClose'),
+        style: magpieRequestsCloseStyle,
+    }, '×'))), createElement('div', { className: 'codingns4dsh-magpie-requests-body', style: magpieRequestsBodyStyle }, 
+    // `.codingns-magpie-page` 提供管理页的 `--mp-*` 主题变量；外层样式再把它压进弹层尺寸。
+    createElement('div', { className: 'codingns-magpie-page codingns4dsh-magpie-requests-view' }, createElement(RequestsPage, {
+        page,
+        loading,
+        error,
+        selectedSession: { id: sessionId, agent, ...(sessionName === null ? {} : { dshSessionName: sessionName }) },
+        offset,
+        onOffsetChange,
+        onClearSession: null,
+        t,
+    })))));
+}
+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 +1189,79 @@ function createModelRow(model, unit) {
 function resolveDisplayWindow(usage) {
     return usage.primary ?? usage.secondary ?? usage.monthly;
 }
+/** 配额解析完成前的补读间隔；与弹层打开时的路由读取共用串行轮询。 */
+const MAGPIE_QUOTA_RETRY_MS = 3_000;
+/**
+ * Magpie 用量入口是否还需要带路由补读。
+ *
+ * Host 会为「已确认属于 Magpie、但会话身份还没写进账本」的模型下发带会话数据的
+ * `provider-unavailable` 占位快照；还在启动中的网关则是 `unavailable`。
+ * 两种状态都表示上游未知，必须按 `MAGPIE_QUOTA_RETRY_MS` 快速重新解析，否则首屏
+ * 会一直停在官方余额或 Magpie 标签上，直到整页刷新。
+ *
+ * 上游已解析（`provider-unavailable` 但 `upstreamProvider` 有值，例如该厂商本来
+ * 就不上报任何配额窗口）不再补读——再读也只是重复确认同一个结论。没有上游信息的
+ * 占位快照才有资格要求补读，Host 也只在这种情况下才下发它。
+ */
+function shouldResolveMagpieQuota(usage) {
+    if (usage === null || usage === undefined)
+        return false;
+    if (usage.quotaStatus !== 'available')
+        return usage.upstreamProvider === null;
+    return usage.sessionId !== null && usage.session !== null && usage.quotas.length === 0;
+}
+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 resolveMagpieTriggerReadout(usage) {
+    const remaining = resolveMagpieQuotaRemaining(usage);
+    if (remaining !== null)
+        return { kind: 'ring', percent: remaining };
+    const quotas = usage.quotas ?? [];
+    const balance = resolveQuotaBalanceLabel(quotas);
+    if (balance !== null)
+        return { kind: 'money', text: balance };
+    const credits = resolveQuotaCreditsLabel(quotas);
+    if (credits !== null)
+        return { kind: 'credits', text: credits };
+    return { kind: 'label' };
+}
+/** 积分余额的展示文本：只给数量，单位放在 title 里，不占用底部栏宽度。 */
+function resolveQuotaCreditsLabel(quotas) {
+    for (const quota of quotas) {
+        const credits = resolveQuotaCreditBalance(quota);
+        if (credits === null || !(credits.remaining > 0))
+            continue;
+        return formatQuotaNumber(credits.remaining);
+    }
+    return null;
+}
+function createMagpieTriggerReadout(readout, t) {
+    switch (readout.kind) {
+        case 'ring':
+            return createRemainingRing(readout.percent);
+        case 'money':
+            return createElement('span', { className: 'codingns4dsh-subscription-value', style: magpieBalanceStyle, title: t('usage.accountBalance') }, readout.text);
+        case 'credits':
+            return createElement('span', { className: 'codingns4dsh-subscription-value', style: magpieBalanceStyle, title: t('usage.creditBalanceLabel') }, readout.text);
+        default:
+            return createElement('span', { className: 'codingns4dsh-subscription-label', style: subscriptionLabelStyle }, t('usage.magpieShortLabel'));
+    }
+}
 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 +1391,75 @@ 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 magpieBalanceStyle = { display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap', color: dshThemeColor.labelSecondary, fontSize: uiFontSize(12), fontWeight: 600, fontVariantNumeric: 'tabular-nums' };
+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 magpieSessionNameStyle = { maxWidth: '100%', overflow: 'hidden', color: dshThemeColor.labelPrimary, fontSize: uiFontSize(12), fontWeight: 650, textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+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 magpieQuotaNameWithLogoStyle = { display: 'inline-flex', alignItems: 'center', gap: 6, minWidth: 0, overflow: 'hidden' };
+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', boxSizing: 'border-box', padding: '3px 8px', borderRadius: 999, background: dshThemeColor.surfaceSubtle, color: dshThemeColor.labelSecondary, fontSize: uiFontSize(11), lineHeight: '15px', 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 magpieRouteHeadingActionsStyle = { display: 'inline-flex', alignItems: 'center', gap: 8, minWidth: 0 };
+const magpieRouteRequestsButtonStyle = { flex: 'none', display: 'inline-flex', alignItems: 'center', gap: 4, boxSizing: 'border-box', padding: '2px 8px', border: `1px solid ${dshThemeColor.border}`, borderRadius: 999, background: dshThemeColor.menuBackground, color: dshThemeColor.labelSecondary, fontFamily: 'inherit', fontSize: uiFontSize(11), lineHeight: '15px', cursor: 'pointer', whiteSpace: 'nowrap', transition: 'background .15s ease,color .15s ease' };
+const magpieRequestsOverlayStyle = { position: 'fixed', inset: 0, zIndex: 1500, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16, boxSizing: 'border-box', background: dshThemeColor.overlay };
+const magpieRequestsDialogStyle = { ...dshPopupSurfaceStyle, display: 'flex', flexDirection: 'column', gap: 10, width: 'min(96vw, 1320px)', maxHeight: 'min(88vh, 820px)', boxSizing: 'border-box', padding: 14, borderRadius: 14 };
+const magpieRequestsHeadingStyle = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, paddingBottom: 10, borderBottom: `1px solid ${dshThemeColor.border}` };
+const magpieRequestsHeadingActionsStyle = { display: 'inline-flex', alignItems: 'center', gap: 8, flex: 'none' };
+const magpieRequestsTitleStyle = { fontSize: uiFontSize(15), lineHeight: '20px' };
+const magpieRequestsCloseStyle = { flex: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, padding: 0, border: 0, borderRadius: '50%', background: 'transparent', color: dshThemeColor.labelSecondary, fontSize: uiFontSize(18), lineHeight: 1, cursor: 'pointer' };
+const magpieRequestsBodyStyle = { flex: '1 1 auto', minHeight: 0, overflowY: 'auto', overscrollBehavior: 'contain' };
+const magpieRequestsRetryStyle = { padding: '5px 12px', border: `1px solid ${dshThemeColor.border}`, borderRadius: 999, background: dshThemeColor.menuBackground, color: dshThemeColor.labelSecondary, fontFamily: 'inherit', fontSize: uiFontSize(11), lineHeight: '15px', cursor: 'pointer' };
 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 +1500,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 };