@jingyi0605/codingns4dsh 0.2.1-rc.3 → 0.2.1-rc.5

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

@@ -1,5 +1,6 @@
 import { startSerialPolling } from './serial-polling.js';
 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';
@@ -7,7 +8,7 @@ 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 { 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';
@@ -123,6 +124,7 @@ function CommandCodeSubscriptionSlot(props) {
     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);
@@ -131,6 +133,8 @@ function CommandCodeSubscriptionSlot(props) {
     const [resetPending, setResetPending] = useState(false);
     const [resetResult, setResetResult] = useState(null);
     const [resetError, setResetError] = useState(null);
+    const sessionRef = useRef(undefined);
+    const routeKeyRef = useRef(null);
     // 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]));
@@ -189,6 +193,8 @@ function CommandCodeSubscriptionSlot(props) {
     useEffect(() => {
         const sessionId = props.sessionId?.trim();
         if (!sessionId) {
+            sessionRef.current = undefined;
+            routeKeyRef.current = null;
             setEligible(false);
             setSnapshot(null);
             setAdapterId(null);
@@ -205,18 +211,23 @@ function CommandCodeSubscriptionSlot(props) {
         // 未解析的 Magpie 配额必须快速补读：官方余额一旦抢先显示，用户要等到下一次
         // 轮询（默认 5 分钟）或整页刷新才会切到 Magpie。
         let upstreamUnresolved = false;
-        setEligible(false);
-        setSnapshot(null);
-        setAdapterId(null);
-        setProviderId(null);
-        setOpen(false);
-        setResetOpen(false);
-        setResetPending(false);
-        setResetResult(null);
-        setResetError(null);
-        setMagpieTab('usage');
+        if (sessionRef.current !== sessionId) {
+            sessionRef.current = sessionId;
+            routeKeyRef.current = null;
+            setEligible(false);
+            setSnapshot(null);
+            setAdapterId(null);
+            setProviderId(null);
+            setOpen(false);
+            setResetOpen(false);
+            setResetPending(false);
+            setResetResult(null);
+            setResetError(null);
+            setMagpieTab('usage');
+        }
         const refresh = async (signal) => {
             let routeSignal;
+            let routeChanged = false;
             setLoading(true);
             try {
                 // 订阅入口必须读取当前会话的真实 Provider；模型选择器切换后不能复用
@@ -234,6 +245,16 @@ function CommandCodeSubscriptionSlot(props) {
                 }
                 if (signal.aborted)
                     return false;
+                const cacheKey = JSON.stringify([adapterId, selection.providerId ?? '', selection.modelId ?? '', sessionId, selection.providerSessionId ?? '']);
+                routeChanged = routeKeyRef.current !== cacheKey;
+                if (routeChanged) {
+                    routeKeyRef.current = cacheKey;
+                    if (active) {
+                        setSnapshot(null);
+                        setOpen(false);
+                        setMagpieTab('usage');
+                    }
+                }
                 if (active) {
                     setEligible(true);
                     setAdapterId(adapterId);
@@ -243,8 +264,7 @@ function CommandCodeSubscriptionSlot(props) {
                 // 模型也是读取键的一部分：Antigravity 的 Gemini 与 Claude/GPT 是两个独立配额组。
                 // 会话 ID 同时承担 PeerHost 的路由身份；缓存也必须按会话隔离，
                 // 否则本机与远端使用相同 Agent/Provider/模型时会互相复用上游结果。
-                const cacheKey = JSON.stringify([adapterId, selection.providerId ?? '', selection.modelId ?? '', sessionId, selection.providerSessionId ?? '']);
-                const magpieSnapshot = snapshotRef.current?.magpie;
+                const magpieSnapshot = routeChanged ? undefined : snapshotRef.current?.magpie;
                 const includeRoute = magpieSnapshot !== null && magpieSnapshot !== undefined
                     && (openRef.current || shouldResolveMagpieQuota(magpieSnapshot));
                 const cached = subscriptionUsageCache.get(cacheKey);
@@ -278,8 +298,12 @@ function CommandCodeSubscriptionSlot(props) {
                 if (signal.aborted || routeSignal?.aborted === true)
                     return false;
                 if (active) {
-                    setEligible(false);
-                    setSnapshot(null);
+                    // A temporary Host/Web failure must not make the compact entry
+                    // disappear. A later poll will replace the retained snapshot.
+                    if (routeChanged || snapshotRef.current === null) {
+                        setEligible(false);
+                        setSnapshot(null);
+                    }
                 }
                 return false;
             }
@@ -361,7 +385,7 @@ 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;
@@ -392,6 +416,7 @@ function CommandCodeSubscriptionSlot(props) {
             onToggleGroup: toggleQuotaGroup,
             placement: magpiePlacement,
             popoverRef: magpiePopoverRef,
+            requestsDialogRef: magpieRequestsDialogRef,
         }));
     }
     const usage = snapshot.providerUsage;
@@ -473,7 +498,7 @@ function CommandCodeSubscriptionSlot(props) {
         dialogRef: resetDialogRef,
     }));
 }
-function MagpieUsagePopover({ rpc, usage, t, tab = 'usage', onTabChange = () => { }, expandedGroups = [], onToggleGroup = () => { }, 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)],
@@ -523,12 +548,14 @@ function MagpieUsagePopover({ rpc, usage, t, tab = 'usage', onTabChange = () =>
         'aria-labelledby': `codingns4dsh-magpie-tab-${tab}`,
         style: magpieTabPanelStyle,
     }, tab === 'usage' ? MagpieUsagePanel({ usage, aggregateRows, sessionRows, t })
-        : MagpieRoutePanel({ rpc, usage, quotas, t, expandedGroups, onToggleGroup })));
+        : 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 })), 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 }, t('usage.magpieUsageUnavailable'))), createElement('section', { style: magpieUsageSectionStyle }, createElement('strong', { style: magpieSectionTitleStyle }, t(usage.sessionPeriod === 'today' ? 'usage.magpieSessionTodayTitle' : 'usage.magpieSessionTitle')), usage.sessionId !== null && createElement('div', { style: magpieSessionIdentityStyle }, createElement('div', { style: magpieSessionNameRowStyle }, createElement('span', { style: { flex: 'none' } }, 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)));
 }
@@ -549,7 +576,7 @@ 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;
+            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);
@@ -569,10 +596,11 @@ function formatQuotaWindowCredits(window) {
     const credits = readWindowCreditBalance(window);
     return credits === null ? null : formatQuotaCredits(credits);
 }
-function MagpieRoutePanel({ rpc, usage, quotas, t, expandedGroups, onToggleGroup }) {
+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')
@@ -615,10 +643,11 @@ function MagpieRoutePanel({ rpc, usage, quotas, t, expandedGroups, onToggleGroup
     // “查看请求”入口与状态徽标同高、同排：入口在左，状态在右。
     createElement(MagpieRouteRequests, {
         rpc,
-        sessionId: usage.sessionId,
+        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', {
@@ -635,35 +664,42 @@ function MagpieRoutePanel({ rpc, usage, quotas, t, expandedGroups, onToggleGroup
  * `MagpieRoutePanel` 渲染元素，真正的状态留在本组件内部。模态框内的请求明细
  * 直接复用管理页的 `RequestsPage`，只把会话筛选固定为当前会话。
  */
-export function MagpieRouteRequests({ rpc, sessionId, sessionName, agent, t }) {
+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)
+            if (controller.signal.aborted || sequence !== sequenceRef.current)
                 return;
             if (next === null) {
                 setError(true);
                 return;
             }
-            setPage(next);
+            setPage((current) => current === null || offset === 0
+                ? next
+                : { ...next, items: [...current.items, ...next.items] });
         }).catch(() => {
-            if (!controller.signal.aborted)
+            if (!controller.signal.aborted && sequence === sequenceRef.current)
                 setError(true);
         }).finally(() => {
-            if (!controller.signal.aborted)
+            if (!controller.signal.aborted && sequence === sequenceRef.current)
                 setLoading(false);
         });
         return () => {
@@ -672,6 +708,24 @@ export function MagpieRouteRequests({ rpc, sessionId, sessionName, agent, t }) {
                 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')
@@ -718,7 +772,13 @@ export function MagpieRouteRequests({ rpc, sessionId, sessionName, agent, t }) {
         error,
         t,
         onClose: close,
-        onOffsetChange: setOffset,
+        ...(requestsDialogRef === undefined ? {} : { dialogRef: requestsDialogRef }),
+        onOffsetChange: (value) => {
+            // 追加下一页；重试则从头重读，避免把同一页拼两遍。
+            if (value === 0)
+                setPage(null);
+            setOffset(value);
+        },
         onRetry: () => { setLoading(true); setError(false); setReloadKey((value) => value + 1); },
     }));
 }
@@ -726,10 +786,10 @@ export function MagpieRouteRequests({ rpc, sessionId, sessionName, agent, t }) {
 function canReadMagpieSessionRequests(sessionId, agent) {
     return sessionId !== null && sessionId.trim() !== '' && sessionId.length <= 512 && /^[a-z0-9][a-z0-9-]*$/u.test(agent);
 }
-/** 只读取今天的会话请求，与路由卡片和“当前 Agent 会话”用量保持同一时间口径。 */
+/** Include every date in the selected session's paginated request history. */
 async function readMagpieSessionRequestPage(rpc, sessionId, agent, offset, signal) {
     const result = await callCodingNsRpcResult(rpc, 'magpie/usage/requests', {
-        period: 'today',
+        period: 'all',
         offset,
         limit: MAGPIE_REQUESTS_PAGE_SIZE,
         sessionId,
@@ -748,9 +808,11 @@ async function readMagpieSessionRequestPage(rpc, sessionId, agent, offset, signa
  * 管理页视图自带统计条、桌面表格 / 移动卡片、分页和空状态，这里只负责把会话固定住，
  * 不再维护一套重复的请求卡片渲染。
  */
-function MagpieSessionRequestsDialog({ sessionId, sessionName, agent, page, offset, loading, error, t, onClose, onOffsetChange, onRetry }) {
-    return createElement('div', {
+function MagpieSessionRequestsDialog({ sessionId, sessionName, agent, page, offset, loading, error, t, onClose, dialogRef, onOffsetChange, onRetry }) {
+    const displaySessionName = sessionName ?? page?.sessionName ?? null;
+    const dialog = createElement('div', {
         className: 'codingns4dsh-magpie-requests-overlay',
+        ref: dialogRef,
         role: 'presentation',
         style: magpieRequestsOverlayStyle,
         // 只有按在遮罩自身时才关闭；从内容内部按下再拖到遮罩上不会误关。
@@ -780,12 +842,18 @@ function MagpieSessionRequestsDialog({ sessionId, sessionName, agent, page, offs
         page,
         loading,
         error,
-        selectedSession: { id: sessionId, agent, ...(sessionName === null ? {} : { dshSessionName: sessionName }) },
+        selectedSession: { id: sessionId, agent, ...(displaySessionName === null ? {} : { dshSessionName: displaySessionName }) },
         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)
@@ -1206,17 +1274,20 @@ const MAGPIE_QUOTA_RETRY_MS = 3_000;
 function shouldResolveMagpieQuota(usage) {
     if (usage === null || usage === undefined)
         return false;
+    if (usage.session === null)
+        return true;
     if (usage.quotaStatus !== 'available')
         return usage.upstreamProvider === null;
-    return usage.sessionId !== null && usage.session !== null && usage.quotas.length === 0;
+    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;
@@ -1411,9 +1482,10 @@ const magpieStatsGridStyle = { display: 'grid', gridTemplateColumns: 'repeat(3,
 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 magpieSessionIdentityStyle = { display: 'grid', gap: 2, minWidth: 0, color: dshThemeColor.labelSecondary, fontSize: uiFontSize(12), lineHeight: '16px' };
+const magpieSessionNameRowStyle = { display: 'flex', alignItems: 'baseline', gap: 10, minWidth: 0 };
+const magpieSessionNameStyle = { minWidth: 0, maxWidth: '100%', overflow: 'hidden', color: dshThemeColor.labelPrimary, fontSize: uiFontSize(12), fontWeight: 650, textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+const magpieSessionIdStyle = { 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' };
@@ -1452,7 +1524,7 @@ const magpieRouteMetaValueStyle = { color: dshThemeColor.labelSecondary, fontSiz
 // 请求入口与请求模态框：入口与状态徽标同高并排在标题栏，模态框覆盖视口并在内部滚动。
 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 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' };