@jingyi0605/codingns4dsh 0.2.1-rc.2 → 0.2.1-rc.4

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

@@ -1,14 +1,19 @@
 import { startSerialPolling } from './serial-polling.js';
-import { createElement, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createElement, Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 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, quotaWindowRemaining, 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';
 /**
@@ -57,6 +62,7 @@ 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);
@@ -64,14 +70,19 @@ export function calculateMagpiePopoverPlacement(rootLeft, viewportWidth, sidebar
     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 + MAGPIE_ROUTE_CSS;
+    style.textContent = SUBSCRIPTION_RESPONSIVE_CSS + RESET_BUTTON_CSS + MAGPIE_ROUTE_CSS + MAGPIE_REQUESTS_CSS;
     document.head.appendChild(style);
 }
 /** 在 DSH 原生步骤统计左侧显示当前 Agent 的订阅余量。 */
@@ -101,10 +112,19 @@ function CommandCodeSubscriptionSlot(props) {
     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 magpieRequestsDialogRef = useRef(null);
     const resetDialogRef = useRef(null);
     // 重置成功后的刷新不能重跑加载 effect，否则 usage 会被清空导致底部入口闪断。
     const refreshRef = useRef(null);
@@ -184,6 +204,9 @@ function CommandCodeSubscriptionSlot(props) {
             return;
         }
         let active = true;
+        // 未解析的 Magpie 配额必须快速补读：官方余额一旦抢先显示，用户要等到下一次
+        // 轮询（默认 5 分钟）或整页刷新才会切到 Magpie。
+        let upstreamUnresolved = false;
         setEligible(false);
         setSnapshot(null);
         setAdapterId(null);
@@ -249,6 +272,7 @@ function CommandCodeSubscriptionSlot(props) {
                     : await loadUsage(props.rpc, cacheKey, payload);
                 if (next !== null)
                     subscriptionUsageCache.set(cacheKey, { usage: next, capturedAt: Date.now() });
+                upstreamUnresolved = shouldResolveMagpieQuota(next?.magpie);
                 if (active)
                     setSnapshot(next);
             }
@@ -267,7 +291,11 @@ 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;
@@ -335,13 +363,13 @@ function CommandCodeSubscriptionSlot(props) {
             }
         })();
     };
-    useDismissOnOutsidePointer(rootRef, open, () => setOpen(false));
+    useDismissOnOutsidePointer(rootRef, open, () => setOpen(false), { portal: magpieRequestsDialogRef });
     useDismissOnOutsidePointer(resetDialogRef, resetOpen && !resetPending, closeResetDialog);
     if (!eligible || snapshot === null)
         return null;
     if (snapshot.magpie !== null) {
         const magpie = snapshot.magpie;
-        const magpieRemaining = resolveMagpieQuotaRemaining(magpie);
+        const readout = resolveMagpieTriggerReadout(magpie);
         const label = t('usage.magpieUsageLabel');
         return createElement('div', { ref: rootRef, style: subscriptionRootStyle }, createElement('button', {
             type: 'button',
@@ -356,9 +384,18 @@ function CommandCodeSubscriptionSlot(props) {
             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 }));
+        })), createMagpieTriggerReadout(readout, t)), open && createElement(MagpieUsagePopover, {
+            rpc: props.rpc,
+            usage: magpie,
+            t,
+            tab: magpieTab,
+            onTabChange: setMagpieTab,
+            expandedGroups: expandedQuotaGroups,
+            onToggleGroup: toggleQuotaGroup,
+            placement: magpiePlacement,
+            popoverRef: magpiePopoverRef,
+            requestsDialogRef: magpieRequestsDialogRef,
+        }));
     }
     const usage = snapshot.providerUsage;
     // 未拿到真实订阅数据时不占用底部栏空间；加载状态不能伪装成订阅存在。
@@ -439,7 +476,7 @@ function CommandCodeSubscriptionSlot(props) {
         dialogRef: resetDialogRef,
     }));
 }
-function MagpieUsagePopover({ usage, t, tab = 'usage', onTabChange = () => { }, placement = { left: 0, width: 400 }, popoverRef }) {
+function MagpieUsagePopover({ rpc, usage, t, tab = 'usage', onTabChange = () => { }, expandedGroups = [], onToggleGroup = () => { }, placement = { left: 0, width: 400 }, popoverRef, requestsDialogRef }) {
     const aggregateRows = usage.aggregate === null ? [] : [
         [t('usage.magpieRequests'), formatMagpieNumber(usage.aggregate.calls)],
         [t('usage.magpieErrors'), formatMagpieNumber(usage.aggregate.errors)],
@@ -489,12 +526,14 @@ function MagpieUsagePopover({ usage, t, tab = 'usage', onTabChange = () => { },
         'aria-labelledby': `codingns4dsh-magpie-tab-${tab}`,
         style: magpieTabPanelStyle,
     }, tab === 'usage' ? MagpieUsagePanel({ usage, aggregateRows, sessionRows, t })
-        : MagpieRoutePanel({ usage, quotas, t })));
+        : MagpieRoutePanel({ rpc, usage, quotas, t, expandedGroups, onToggleGroup,
+            ...(requestsDialogRef === undefined ? {} : { requestsDialogRef }),
+        })));
 }
 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 }, 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)));
 }
@@ -512,16 +551,34 @@ function createMagpieProviderBadges(usage, style) {
     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
+    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;
+            const remaining = quotaWindowRemaining(window);
+            // 积分窗口（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), 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) }))));
+            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) }))));
         }));
 }
-function MagpieRoutePanel({ usage, quotas, t }) {
+/**
+ * 单个窗口若是按积分计量，返回"剩余 / 上限"文本；普通百分比窗口返回 null。
+ *
+ * 卡片会为每个窗口单独调用一次，所以这里按窗口自治判断，不依赖账号整体状态。
+ */
+function formatQuotaWindowCredits(window) {
+    const credits = readWindowCreditBalance(window);
+    return credits === null ? null : formatQuotaCredits(credits);
+}
+function MagpieRoutePanel({ rpc, usage, quotas, t, expandedGroups, onToggleGroup, requestsDialogRef }) {
     const route = usage.route;
+    const groups = groupQuotasByProvider(quotas);
+    const sessionAccount = route?.providerAccount ?? null;
+    const requestSessionId = usage.requestSessionId ?? usage.session?.id ?? usage.sessionId;
     const quotaMessage = magpieQuotaUnavailableMessage(usage, quotas, t);
     const routeStatus = usage.routeStatus === 'no-route'
         ? t('usage.magpieRouteNoRequests')
@@ -543,7 +600,33 @@ function MagpieRoutePanel({ usage, quotas, t }) {
     ];
     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
+        : 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: requestSessionId,
+        sessionName: usage.sessionName ?? null,
+        agent: usage.agent,
+        t,
+        ...(requestsDialogRef === undefined ? {} : { requestsDialogRef }),
+    }), 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}`,
@@ -552,6 +635,203 @@ function MagpieRoutePanel({ usage, quotas, t }) {
             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, requestsDialogRef }) {
+    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);
+    const sequenceRef = useRef(0);
+    useEffect(() => {
+        if (!open || !enabled)
+            return;
+        const controller = new AbortController();
+        controllerRef.current = controller;
+        // 只有一次请求在飞：更晚的请求序号作废更早的回包。
+        const sequence = sequenceRef.current + 1;
+        sequenceRef.current = sequence;
+        setLoading(true);
+        setError(false);
+        void readMagpieSessionRequestPage(rpc, sessionId, agent, offset, controller.signal).then((next) => {
+            if (controller.signal.aborted || sequence !== sequenceRef.current)
+                return;
+            if (next === null) {
+                setError(true);
+                return;
+            }
+            setPage((current) => current === null || offset === 0
+                ? next
+                : { ...next, items: [...current.items, ...next.items] });
+        }).catch(() => {
+            if (!controller.signal.aborted && sequence === sequenceRef.current)
+                setError(true);
+        }).finally(() => {
+            if (!controller.signal.aborted && sequence === sequenceRef.current)
+                setLoading(false);
+        });
+        return () => {
+            controller.abort();
+            if (controllerRef.current === controller)
+                controllerRef.current = null;
+        };
+    }, [open, enabled, offset, reloadKey, rpc, sessionId, agent]);
+    // 滚到列表底部就自动追加下一页：149 条请求也能一口气看完，不必数着点“加载更多”。
+    // 用捕获阶段监听滚动，真实滚动容器（弹层主体、表格横向容器）都在子树里。
+    useEffect(() => {
+        if (!open || typeof document === 'undefined' || !enabled)
+            return;
+        const onScroll = (event) => {
+            const target = event.target;
+            if (!(target instanceof Element) || !target.closest('.codingns4dsh-magpie-requests-body'))
+                return;
+            if (target.scrollHeight - target.scrollTop - target.clientHeight > 160)
+                return;
+            if (loading || error || page === null || !page.hasMore)
+                return;
+            setOffset(page.items.length);
+        };
+        document.addEventListener('scroll', onScroll, true);
+        return () => document.removeEventListener('scroll', onScroll, true);
+    }, [open, enabled, loading, error, page]);
+    // 模态框覆盖整个视口，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,
+        ...(requestsDialogRef === undefined ? {} : { dialogRef: requestsDialogRef }),
+        onOffsetChange: (value) => {
+            // 追加下一页；重试则从头重读，避免把同一页拼两遍。
+            if (value === 0)
+                setPage(null);
+            setOffset(value);
+        },
+        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, dialogRef, onOffsetChange, onRetry }) {
+    const dialog = createElement('div', {
+        className: 'codingns4dsh-magpie-requests-overlay',
+        ref: dialogRef,
+        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,
+        // 弹层筛选的是单一会话，列表从头累计，直到整条会话的请求都加载完。
+        append: true,
+    })))));
+    // The usage popover has its own lower stacking context. Portaling the modal
+    // to body lets it actually cover the host sidebar instead of being clipped
+    // by the popover's parent context.
+    return typeof document === 'undefined' ? dialog : createPortal(dialog, document.body);
+}
 function createMagpieRows(rows) {
     if (rows.length === 0)
         return createElement('div', { style: magpieMutedTextStyle }, '--');
@@ -954,20 +1234,74 @@ 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) {
-    return usage?.quotaStatus === 'provider-unavailable' && usage.sessionId !== null && usage.session !== null;
+    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) === 0;
 }
 function resolveMagpieQuotaRemaining(usage) {
-    if (usage.quotaStatus !== 'available')
-        return null;
-    for (const quota of usage.quotas) {
+    for (const quota of usage.quotas ?? []) {
         for (const window of quota.windows) {
-            if (window.remainingPercent !== null)
-                return window.remainingPercent;
+            // A few Magpie responses report only `used`; the quota card derives the same
+            // remaining share, so the compact trigger must use that normalized value too.
+            const remaining = quotaWindowRemaining(window);
+            if (remaining !== null)
+                return remaining;
         }
     }
     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;
 }
@@ -1103,6 +1437,8 @@ 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' };
@@ -1122,6 +1458,7 @@ const magpieStatStyle = { display: 'grid', alignContent: 'space-between', gap: 1
 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) };
@@ -1133,6 +1470,7 @@ const magpieProviderBadgeStyle = { flex: 'none', maxWidth: 220, overflow: 'hidde
 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' };
@@ -1141,7 +1479,7 @@ 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 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 };
@@ -1157,6 +1495,17 @@ const magpieRouteMetaStyle = { display: 'grid', gridTemplateColumns: 'repeat(2,
 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: 2147483000, 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' };