aibo/BoosAPI
1
0
Fork 0
forked from boos/BoosAPI
Code Pull Requests Activity

[codex] refine proxy logs debug UI follow-ups (#312)

Browse Source 
* Refine proxy logs debug page layout

* Align proxy logs debug UI with page patterns

* Prevent proxy trace detail refresh flicker

* Polish proxy trace detail modal
This commit is contained in:
Cita
2026-03-29 13:39:25 +08:00
committed by GitHub
parent ab8640c8c3
commit 7092e2f129
2 changed files with 587 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/pages/ProxyLogs.server-driven.test.tsx
+125
View File
@@ -323,6 +323,42 @@ describe('ProxyLogs server-driven page', () => {
}
});
it('opens debug trace detail on demand instead of preloading the first trace inline', async () => {
let root!: WebTestRenderer;
try {
await act(async () => {
root = create(
<MemoryRouter initialEntries={['/logs']}>
<ToastProvider>
<ProxyLogs />
</ToastProvider>
</MemoryRouter>,
);
});
await flushMicrotasks();
expect(apiMock.getProxyDebugTraceDetail).not.toHaveBeenCalled();
const viewDetailButton = root.root.find((node) => (
node.type === 'button'
&& typeof node.props.onClick === 'function'
&& collectText(node).trim() === '查看详情'
));
await act(async () => {
viewDetailButton.props.onClick();
});
await flushMicrotasks();
expect(apiMock.getProxyDebugTraceDetail).toHaveBeenCalledWith(701);
expect(collectText(root.root)).toContain('原始下游请求头');
expect(collectText(root.root)).toContain('Attempt 记录');
} finally {
root?.unmount();
}
});
it('polls debug traces after tracing is enabled so new results are not hidden behind the settings modal', async () => {
vi.useFakeTimers();
apiMock.getRuntimeSettings.mockResolvedValue({
@@ -368,6 +404,95 @@ describe('ProxyLogs server-driven page', () => {
}
});
it('keeps debug trace detail visible during polling refresh instead of flashing back to loading', async () => {
vi.useFakeTimers();
apiMock.getRuntimeSettings.mockResolvedValue({
proxyDebugTraceEnabled: true,
proxyDebugCaptureHeaders: true,
proxyDebugCaptureBodies: false,
proxyDebugCaptureStreamChunks: false,
proxyDebugTargetSessionId: '',
proxyDebugTargetClientKind: '',
proxyDebugTargetModel: '',
proxyDebugRetentionHours: 24,
proxyDebugMaxBodyBytes: 262144,
});
let resolveDetail!: (value: any) => void;
apiMock.getProxyDebugTraceDetail
.mockResolvedValueOnce({
trace: {
id: 701,
requestedModel: 'gpt-4o',
sessionId: 'sess-debug-1',
requestHeadersJson: '{\"before\":true}',
},
attempts: [],
})
.mockImplementationOnce(() => new Promise((resolve) => {
resolveDetail = resolve;
}));
let root!: WebTestRenderer;
try {
await act(async () => {
root = create(
<MemoryRouter initialEntries={['/logs']}>
<ToastProvider>
<ProxyLogs />
</ToastProvider>
</MemoryRouter>,
);
});
await flushMicrotasks();
const viewDetailButton = root.root.find((node) => (
node.type === 'button'
&& typeof node.props.onClick === 'function'
&& collectText(node).trim() === '查看详情'
));
await act(async () => {
viewDetailButton.props.onClick();
});
await flushMicrotasks();
expect(collectText(root.root)).toContain('原始下游请求头');
expect(collectText(root.root)).not.toContain('加载追踪详情中...');
await act(async () => {
vi.advanceTimersByTime(2100);
});
await flushMicrotasks();
expect(collectText(root.root)).toContain('原始下游请求头');
expect(collectText(root.root)).not.toContain('加载追踪详情中...');
await act(async () => {
resolveDetail({
trace: {
id: 701,
requestedModel: 'gpt-4o',
sessionId: 'sess-debug-1',
requestHeadersJson: '{\"after\":true}',
},
attempts: [],
});
});
await flushMicrotasks();
expect(collectText(root.root)).toContain('原始下游请求头');
expect(collectText(root.root)).not.toContain('加载追踪详情中...');
} finally {
await act(async () => {
root?.unmount();
});
vi.runOnlyPendingTimers();
vi.useRealTimers();
}
});
it('keeps the model badge sized to the model name in desktop rows', async () => {
let root!: WebTestRenderer;
src/web/pages/ProxyLogs.tsx
+407 -282
View File
@@ -63,8 +63,11 @@ type ProxyDebugTraceDetailState = {
error?: string;
};
type ProxyDebugTraceAttempt = ProxyDebugTraceDetail['attempts'][number];
const PAGE_SIZES = [20, 50, 100];
const DEFAULT_PAGE_SIZE = 50;
const TRACE_TABLE_LIMIT = 20;
const PROXY_LOG_CLIENT_FAMILY_LABELS: Record<string, string> = {
codex: 'Codex',
claude_code: 'Claude Code',
@@ -90,7 +93,7 @@ const DEFAULT_PROXY_DEBUG_SETTINGS: ProxyDebugSettingsState = {
proxyDebugMaxBodyBytes: 262144,
};
const DEBUG_REFRESH_INTERVAL_MS = 2000;
const debugInputStyle: React.CSSProperties = {
const formInputStyle: React.CSSProperties = {
width: '100%',
padding: '10px 14px',
border: '1px solid var(--color-border)',
@@ -100,7 +103,7 @@ const debugInputStyle: React.CSSProperties = {
background: 'var(--color-bg)',
color: 'var(--color-text-primary)',
};
const debugSectionCardStyle: React.CSSProperties = {
const formSectionStyle: React.CSSProperties = {
display: 'flex',
flexDirection: 'column',
gap: 12,
@@ -109,29 +112,22 @@ const debugSectionCardStyle: React.CSSProperties = {
borderRadius: 'var(--radius-md)',
background: 'var(--color-bg-card)',
};
const debugSectionLabelStyle: React.CSSProperties = {
const formSectionLabelStyle: React.CSSProperties = {
fontSize: 12,
fontWeight: 600,
color: 'var(--color-text-secondary)',
letterSpacing: '0.02em',
};
const debugToggleCardStyle: React.CSSProperties = {
const debugCheckboxRowStyle: React.CSSProperties = {
display: 'flex',
alignItems: 'flex-start',
gap: 10,
padding: '12px 14px',
border: '1px solid var(--color-border)',
borderRadius: 'var(--radius-sm)',
background: 'var(--color-bg)',
alignItems: 'center',
gap: 8,
color: 'var(--color-text-primary)',
};
const debugSummaryItemStyle: React.CSSProperties = {
const compactSummaryMetricStyle: React.CSSProperties = {
display: 'grid',
gap: 6,
padding: 14,
border: '1px solid var(--color-border-light)',
borderRadius: 'var(--radius-md)',
background: 'var(--color-bg-card)',
gap: 4,
minWidth: 112,
};
const debugCodeBlockStyle: React.CSSProperties = {
whiteSpace: 'pre-wrap',
@@ -141,10 +137,53 @@ const debugCodeBlockStyle: React.CSSProperties = {
borderRadius: 'var(--radius-sm)',
border: '1px solid var(--color-border-light)',
background: 'var(--color-bg)',
fontFamily: 'var(--font-mono)',
fontSize: 12,
lineHeight: 1.5,
overflowX: 'auto',
};
const detailInfoGridStyle: React.CSSProperties = {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
gap: 12,
};
const detailInfoItemStyle: React.CSSProperties = {
display: 'grid',
gap: 4,
minWidth: 0,
};
const detailInfoLabelStyle: React.CSSProperties = {
fontSize: 12,
color: 'var(--color-text-muted)',
};
const detailInfoValueStyle: React.CSSProperties = {
fontSize: 13,
color: 'var(--color-text-primary)',
fontWeight: 600,
minWidth: 0,
wordBreak: 'break-word',
};
const detailSectionTitleStyle: React.CSSProperties = {
fontSize: 13,
fontWeight: 600,
color: 'var(--color-text-primary)',
};
const detailExpandableCardStyle: React.CSSProperties = {
border: '1px solid var(--color-border-light)',
borderRadius: 'var(--radius-sm)',
background: 'var(--color-bg-card)',
overflow: 'hidden',
};
const detailExpandableSummaryStyle: React.CSSProperties = {
cursor: 'pointer',
listStyle: 'none',
padding: '10px 12px',
fontSize: 13,
fontWeight: 600,
color: 'var(--color-text-primary)',
borderBottom: '1px solid var(--color-border-light)',
background: 'color-mix(in srgb, var(--color-bg-card) 86%, var(--color-bg) 14%)',
};
function formatLatency(ms: number) {
if (ms >= 1000) {
@@ -426,6 +465,21 @@ function formatProxyDebugTargetSummary(settings: ProxyDebugSettingsState) {
return parts.length > 0 ? parts.join('，') : '不过滤，记录所有命中的新请求';
}
function CompactSummaryMetric({
label,
value,
}: {
label: string;
value: string;
}) {
return (
<div style={compactSummaryMetricStyle}>
<span style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>{label}</span>
<strong style={{ fontSize: 14, color: 'var(--color-text-primary)', fontWeight: 700 }}>{value}</strong>
</div>
);
}
export default function ProxyLogs() {
const location = useLocation();
const navigate = useNavigate();
@@ -456,12 +510,14 @@ export default function ProxyLogs() {
const [debugDraftSettings, setDebugDraftSettings] = useState<ProxyDebugSettingsState>(DEFAULT_PROXY_DEBUG_SETTINGS);
const [debugTraces, setDebugTraces] = useState<ProxyDebugTraceListItem[]>([]);
const [selectedDebugTraceId, setSelectedDebugTraceId] = useState<number | null>(null);
const [showDebugTraceDetailModal, setShowDebugTraceDetailModal] = useState(false);
const [debugDetailById, setDebugDetailById] = useState<Record<number, ProxyDebugTraceDetailState>>({});
const isMobile = useIsMobile(768);
const toast = useToast();
const loadSeq = useRef(0);
const selectedDebugTraceIdRef = useRef<number | null>(null);
const debugDetailByIdRef = useRef<Record<number, ProxyDebugTraceDetailState>>({});
const debugDetailInFlightRef = useRef<Set<number>>(new Set());
const fromApiBoundary = toApiTimeBoundary(fromInput);
const toApiBoundaryValue = toApiTimeBoundary(toInput);
const hasInvalidTimeRange = Boolean(
@@ -689,15 +745,20 @@ export default function ProxyLogs() {
const loadDebugTraceDetail = useCallback(async (
id: number,
options?: { force?: boolean; suppressToast?: boolean },
options?: { force?: boolean; suppressToast?: boolean; preserveVisibleData?: boolean },
) => {
const existing = debugDetailByIdRef.current[id];
if (debugDetailInFlightRef.current.has(id)) return;
if (!options?.force && (existing?.loading || existing?.data)) return;
debugDetailInFlightRef.current.add(id);
if (!options?.preserveVisibleData || !existing?.data) {
setDebugDetailById((current) => ({
...current,
[id]: { loading: true },
}));
}
try {
const data = await api.getProxyDebugTraceDetail(id);
@@ -714,6 +775,8 @@ export default function ProxyLogs() {
if (!options?.suppressToast) {
toast.error(message);
}
} finally {
debugDetailInFlightRef.current.delete(id);
}
}, [toast]);
@@ -726,7 +789,7 @@ export default function ProxyLogs() {
const nextSelectedDebugTraceId = (
currentSelectedDebugTraceId && items.some((item) => item.id === currentSelectedDebugTraceId)
? currentSelectedDebugTraceId
: items[0]?.id ?? null
: null
);
selectedDebugTraceIdRef.current = nextSelectedDebugTraceId;
setSelectedDebugTraceId(nextSelectedDebugTraceId);
@@ -734,16 +797,17 @@ export default function ProxyLogs() {
await loadDebugTraceDetail(nextSelectedDebugTraceId, {
force: true,
suppressToast: true,
preserveVisibleData: showDebugTraceDetailModal,
});
}
}, [loadDebugTraceDetail]);
}, [loadDebugTraceDetail, showDebugTraceDetailModal]);
const loadDebugTraceList = useCallback(async (
options?: { silent?: boolean; refreshSelectedDetail?: boolean; suppressToast?: boolean },
) => {
if (!options?.silent) setDebugPanelLoading(true);
try {
const traceResponse = await api.getProxyDebugTraces({ limit: 20 });
const traceResponse = await api.getProxyDebugTraces({ limit: TRACE_TABLE_LIMIT });
const items = Array.isArray(traceResponse?.items) ? traceResponse.items : [];
await syncDebugTraceItems(items, { refreshSelectedDetail: options?.refreshSelectedDetail });
} catch (error: any) {
@@ -760,7 +824,7 @@ export default function ProxyLogs() {
try {
const [runtimeSettings, traceResponse] = await Promise.all([
api.getRuntimeSettings(),
api.getProxyDebugTraces({ limit: 20 }),
api.getProxyDebugTraces({ limit: TRACE_TABLE_LIMIT }),
]);
applyLoadedDebugSettings(normalizeProxyDebugSettings(runtimeSettings), { syncDraft: true });
const items = Array.isArray(traceResponse?.items) ? traceResponse.items : [];
@@ -777,9 +841,9 @@ export default function ProxyLogs() {
}, [loadDebugState]);
useEffect(() => {
if (!selectedDebugTraceId) return;
if (!selectedDebugTraceId || !showDebugTraceDetailModal) return;
void loadDebugTraceDetail(selectedDebugTraceId);
}, [loadDebugTraceDetail, selectedDebugTraceId]);
}, [loadDebugTraceDetail, selectedDebugTraceId, showDebugTraceDetailModal]);
useEffect(() => {
if (!debugSettings.proxyDebugTraceEnabled) return;
@@ -846,6 +910,170 @@ export default function ProxyLogs() {
}
}, [expanded, loadDetail]);
const selectedDebugTraceDetail = selectedDebugTraceId ? debugDetailById[selectedDebugTraceId] : undefined;
const selectedDebugTraceListItem = selectedDebugTraceId
? debugTraces.find((trace) => trace.id === selectedDebugTraceId) || null
: null;
const closeDebugTraceDetailModal = useCallback(() => {
setShowDebugTraceDetailModal(false);
}, []);
const openDebugTraceDetailModal = useCallback((traceId: number) => {
selectedDebugTraceIdRef.current = traceId;
setSelectedDebugTraceId(traceId);
setShowDebugTraceDetailModal(true);
}, []);
function renderTraceStatusBadge(trace: ProxyDebugTraceListItem) {
const failed = trace.finalStatus === 'failed';
return (
<span className={`badge ${failed ? 'badge-error' : 'badge-success'}`} style={{ fontSize: 11 }}>
{failed ? '失败' : '成功'}
</span>
);
}
function renderAttemptDetail(attempt: ProxyDebugTraceAttempt) {
return (
<details key={attempt.id} style={detailExpandableCardStyle}>
<summary style={detailExpandableSummaryStyle}>
#{attempt.attemptIndex + 1} · {attempt.endpoint} · {attempt.responseStatus ?? '-'} · {attempt.requestPath}
</summary>
<div style={{ padding: 12, display: 'grid', gap: 12 }}>
<div style={detailInfoGridStyle}>
<div style={detailInfoItemStyle}>
<div style={detailInfoLabelStyle}>目标地址</div>
<div style={{ ...detailInfoValueStyle, fontFamily: 'var(--font-mono)', fontSize: 12 }}>{attempt.targetUrl || '-'}</div>
</div>
<div style={detailInfoItemStyle}>
<div style={detailInfoLabelStyle}>执行器</div>
<div style={detailInfoValueStyle}>{attempt.runtimeExecutor || '-'}</div>
</div>
<div style={detailInfoItemStyle}>
<div style={detailInfoLabelStyle}>恢复逻辑</div>
<div style={detailInfoValueStyle}>{attempt.recoverApplied ? '已应用' : '未应用'}</div>
</div>
<div style={detailInfoItemStyle}>
<div style={detailInfoLabelStyle}>降级决策</div>
<div style={detailInfoValueStyle}>{attempt.downgradeDecision ? '已触发' : '未触发'}</div>
</div>
</div>
{attempt.downgradeReason ? (
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>
降级原因：{attempt.downgradeReason}
</div>
) : null}
<pre style={debugCodeBlockStyle}>
{`targetUrl: ${attempt.targetUrl}
runtimeExecutor: ${attempt.runtimeExecutor || '-'}
recoverApplied: ${attempt.recoverApplied ? 'true' : 'false'}
downgradeDecision: ${attempt.downgradeDecision ? 'true' : 'false'}
downgradeReason: ${attempt.downgradeReason || '-'}
requestHeaders:
${attempt.requestHeadersJson || '-'}
requestBody:
${attempt.requestBodyJson || '-'}
responseHeaders:
${attempt.responseHeadersJson || '-'}
responseBody:
${attempt.responseBodyJson || '-'}
rawErrorText:
${attempt.rawErrorText || '-'}
memoryWrite:
${attempt.memoryWriteJson || '-'}`}
</pre>
</div>
</details>
);
}
function renderDebugTraceDetailContent() {
if (!selectedDebugTraceId) {
return (
<div style={{ color: 'var(--color-text-muted)', fontSize: 13 }}>
暂无追踪详情。请选择一条最近追踪后再查看。
</div>
);
}
if (selectedDebugTraceDetail?.loading) {
return <div style={{ color: 'var(--color-text-muted)', fontSize: 13 }}>加载追踪详情中...</div>;
}
if (selectedDebugTraceDetail?.error) {
return <div style={{ color: 'var(--color-danger)', fontSize: 13 }}>{selectedDebugTraceDetail.error}</div>;
}
if (!selectedDebugTraceDetail?.data) {
return <div style={{ color: 'var(--color-text-muted)', fontSize: 13 }}>暂无追踪详情。</div>;
}
return (
<div style={{ display: 'grid', gap: 12 }}>
<div style={{ ...formSectionStyle, gap: 10 }}>
<div style={detailSectionTitleStyle}>基础信息</div>
<div style={detailInfoGridStyle}>
<div style={detailInfoItemStyle}>
<div style={detailInfoLabelStyle}>下游路径</div>
<div style={detailInfoValueStyle}>{selectedDebugTraceDetail.data.trace.downstreamPath || '-'}</div>
</div>
<div style={detailInfoItemStyle}>
<div style={detailInfoLabelStyle}>Session</div>
<div style={detailInfoValueStyle}>{selectedDebugTraceDetail.data.trace.sessionId || '-'}</div>
</div>
<div style={detailInfoItemStyle}>
<div style={detailInfoLabelStyle}>模型</div>
<div style={detailInfoValueStyle}>{selectedDebugTraceDetail.data.trace.requestedModel || '-'}</div>
</div>
<div style={detailInfoItemStyle}>
<div style={detailInfoLabelStyle}>最终上游路径</div>
<div style={detailInfoValueStyle}>{selectedDebugTraceDetail.data.trace.finalUpstreamPath || '-'}</div>
</div>
<div style={{ ...detailInfoItemStyle, gridColumn: '1 / -1' }}>
<div style={detailInfoLabelStyle}>候选 endpoint</div>
<code style={{ ...debugCodeBlockStyle, margin: 0, fontSize: 11 }}>
{selectedDebugTraceDetail.data.trace.endpointCandidatesJson || '-'}
</code>
</div>
</div>
</div>
<div style={{ display: 'grid', gap: 10 }}>
<details open style={detailExpandableCardStyle}>
<summary style={detailExpandableSummaryStyle}>原始下游请求头</summary>
<div style={{ padding: 12 }}>
<pre style={debugCodeBlockStyle}>{selectedDebugTraceDetail.data.trace.requestHeadersJson || '-'}</pre>
</div>
</details>
<details style={detailExpandableCardStyle}>
<summary style={detailExpandableSummaryStyle}>原始下游请求体</summary>
<div style={{ padding: 12 }}>
<pre style={debugCodeBlockStyle}>{selectedDebugTraceDetail.data.trace.requestBodyJson || '-'}</pre>
</div>
</details>
<details style={detailExpandableCardStyle}>
<summary style={detailExpandableSummaryStyle}>最终响应</summary>
<div style={{ padding: 12 }}>
<pre style={debugCodeBlockStyle}>{selectedDebugTraceDetail.data.trace.finalResponseBodyJson || '-'}</pre>
</div>
</details>
</div>
<div style={{ display: 'grid', gap: 8 }}>
<div style={detailSectionTitleStyle}>Attempt 记录</div>
{selectedDebugTraceDetail.data.attempts.length === 0 ? (
<div style={{ color: 'var(--color-text-muted)', fontSize: 13 }}>暂无 attempt 记录</div>
) : (
selectedDebugTraceDetail.data.attempts.map(renderAttemptDetail)
)}
</div>
</div>
);
}
const filterControls = (
<>
@@ -947,20 +1175,6 @@ export default function ProxyLogs() {
);
const latestDebugTrace = debugTraces[0] || null;
const debugStatusBadgeStyle: React.CSSProperties = {
display: 'inline-flex',
alignItems: 'center',
gap: 6,
padding: '4px 10px',
borderRadius: 999,
fontSize: 12,
fontWeight: 600,
border: '1px solid var(--color-border-light)',
color: debugSettings.proxyDebugTraceEnabled ? 'var(--color-success)' : 'var(--color-text-secondary)',
background: debugSettings.proxyDebugTraceEnabled
? 'color-mix(in srgb, var(--color-success) 10%, transparent)'
: 'var(--color-bg-card)',
};
const debugSettingsFooter = (
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
<button
@@ -981,76 +1195,68 @@ export default function ProxyLogs() {
</div>
);
const debugSettingsForm = (
<div style={{ display: 'grid', gap: 16 }}>
<div
style={{
padding: '12px 14px',
borderRadius: 'var(--radius-md)',
border: '1px solid var(--color-border-light)',
background: 'color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card))',
color: 'var(--color-text-secondary)',
fontSize: 13,
lineHeight: 1.6,
}}
>
这里只会显示开启后产生的新请求。开启后可记录路由选择、上游 endpoint 尝试、原始请求头/响应头，以及你勾选的请求体和响应体。
<div style={{ display: 'grid', gap: 12 }}>
<div className="info-tip" style={{ marginBottom: 0 }}>
只记录开启后的新请求。需要更精确定位时，再按 Session、客户端或模型定向过滤。
</div>
<ResponsiveFormGrid columns={2}>
<div style={debugSectionCardStyle}>
<div style={debugSectionLabelStyle}>记录内容</div>
<label style={debugToggleCardStyle}>
<div style={formSectionStyle}>
<div style={formSectionLabelStyle}>记录内容</div>
<div style={{ display: 'grid', gap: 10 }}>
<div style={{ display: 'grid', gap: 4 }}>
<label style={debugCheckboxRowStyle}>
<input
type="checkbox"
checked={debugDraftSettings.proxyDebugTraceEnabled}
data-debug-setting="trace-enabled"
onChange={(e) => setDebugDraftSettings((current) => ({ ...current, proxyDebugTraceEnabled: !!e.target.checked }))}
/>
<div style={{ display: 'grid', gap: 4 }}>
<span>开启调试追踪</span>
<span style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>后续新请求会写入调试追踪，不会回补旧请求。</span>
</div>
开启调试追踪
</label>
<label style={debugToggleCardStyle}>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginLeft: 24 }}>后续新请求会写入调试追踪，不会回补旧请求。</div>
</div>
<div style={{ display: 'grid', gap: 4 }}>
<label style={debugCheckboxRowStyle}>
<input
type="checkbox"
checked={debugDraftSettings.proxyDebugCaptureHeaders}
data-debug-setting="capture-headers"
onChange={(e) => setDebugDraftSettings((current) => ({ ...current, proxyDebugCaptureHeaders: !!e.target.checked }))}
/>
<div style={{ display: 'grid', gap: 4 }}>
<span>采集原始请求/响应头</span>
<span style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>保留下游原始头和上游响应头，方便直接对照。</span>
</div>
采集原始请求/响应头
</label>
<label style={debugToggleCardStyle}>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginLeft: 24 }}>保留下游原始头和上游响应头，方便直接对照。</div>
</div>
<div style={{ display: 'grid', gap: 4 }}>
<label style={debugCheckboxRowStyle}>
<input
type="checkbox"
checked={debugDraftSettings.proxyDebugCaptureBodies}
data-debug-setting="capture-bodies"
onChange={(e) => setDebugDraftSettings((current) => ({ ...current, proxyDebugCaptureBodies: !!e.target.checked }))}
/>
<div style={{ display: 'grid', gap: 4 }}>
<span>采集请求体和响应体</span>
<span style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>默认不抓 body，只有显式开启后才记录。</span>
</div>
采集请求体和响应体
</label>
<label style={debugToggleCardStyle}>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginLeft: 24 }}>默认不抓 body，只有显式开启后才记录。</div>
</div>
<div style={{ display: 'grid', gap: 4 }}>
<label style={debugCheckboxRowStyle}>
<input
type="checkbox"
checked={debugDraftSettings.proxyDebugCaptureStreamChunks}
data-debug-setting="capture-stream-chunks"
onChange={(e) => setDebugDraftSettings((current) => ({ ...current, proxyDebugCaptureStreamChunks: !!e.target.checked }))}
/>
<div style={{ display: 'grid', gap: 4 }}>
<span>采集流式原始分片</span>
<span style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>适合定位 SSE / streaming 过程中的兼容问题。</span>
</div>
采集流式原始分片
</label>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginLeft: 24 }}>适合定位 SSE / streaming 过程中的兼容问题。</div>
</div>
</div>
</div>
<div style={debugSectionCardStyle}>
<div style={debugSectionLabelStyle}>定向过滤</div>
<ResponsiveFormGrid columns={2}>
<div style={formSectionStyle}>
<div style={formSectionLabelStyle}>定向过滤</div>
<label style={{ display: 'grid', gap: 6 }}>
<span style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>目标 Session ID</span>
<input
@@ -1059,7 +1265,7 @@ export default function ProxyLogs() {
data-debug-setting="target-session-id"
onChange={(e) => setDebugDraftSettings((current) => ({ ...current, proxyDebugTargetSessionId: e.target.value }))}
placeholder="留空表示不过滤"
style={debugInputStyle}
style={formInputStyle}
/>
</label>
<label style={{ display: 'grid', gap: 6 }}>
@@ -1070,7 +1276,7 @@ export default function ProxyLogs() {
data-debug-setting="target-client-kind"
onChange={(e) => setDebugDraftSettings((current) => ({ ...current, proxyDebugTargetClientKind: e.target.value }))}
placeholder="如 codex / claude_code"
style={debugInputStyle}
style={formInputStyle}
/>
</label>
<label style={{ display: 'grid', gap: 6 }}>
@@ -1081,13 +1287,13 @@ export default function ProxyLogs() {
data-debug-setting="target-model"
onChange={(e) => setDebugDraftSettings((current) => ({ ...current, proxyDebugTargetModel: e.target.value }))}
placeholder="如 gpt-4o"
style={debugInputStyle}
style={formInputStyle}
/>
</label>
</div>
<div style={debugSectionCardStyle}>
<div style={debugSectionLabelStyle}>保留策略</div>
<div style={formSectionStyle}>
<div style={formSectionLabelStyle}>保留策略</div>
<label style={{ display: 'grid', gap: 6 }}>
<span style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>保留时长（小时）</span>
<input
@@ -1096,7 +1302,7 @@ export default function ProxyLogs() {
value={debugDraftSettings.proxyDebugRetentionHours}
data-debug-setting="retention-hours"
onChange={(e) => setDebugDraftSettings((current) => ({ ...current, proxyDebugRetentionHours: Number(e.target.value || 1) }))}
style={debugInputStyle}
style={formInputStyle}
/>
</label>
<label style={{ display: 'grid', gap: 6 }}>
@@ -1107,20 +1313,10 @@ export default function ProxyLogs() {
value={debugDraftSettings.proxyDebugMaxBodyBytes}
data-debug-setting="max-body-bytes"
onChange={(e) => setDebugDraftSettings((current) => ({ ...current, proxyDebugMaxBodyBytes: Number(e.target.value || 1024) }))}
style={debugInputStyle}
style={formInputStyle}
/>
</label>
</div>
<div style={debugSectionCardStyle}>
<div style={debugSectionLabelStyle}>当前摘要</div>
<div style={{ display: 'grid', gap: 8, fontSize: 13 }}>
<div>状态：{debugSettings.proxyDebugTraceEnabled ? '已开启' : '未开启'}</div>
<div>记录内容：{formatProxyDebugCaptureSummary(debugDraftSettings)}</div>
<div>过滤范围：{formatProxyDebugTargetSummary(debugDraftSettings)}</div>
<div>最近追踪：{latestDebugTrace ? formatDateTimeLocal(latestDebugTrace.createdAt) : '暂无'}</div>
</div>
</div>
</ResponsiveFormGrid>
{isMobile ? debugSettingsFooter : null}
@@ -1130,19 +1326,14 @@ export default function ProxyLogs() {
return (
<div className="animate-fade-in">
<div className="page-header" style={{ marginBottom: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div>
<h2 className="page-title">{tr('使用日志')}</h2>
<span className="kpi-chip">
{activeSiteLabel}
</span>
<span className="kpi-chip kpi-chip-success">
消耗总额 ${summary.totalCost.toFixed(4)}
</span>
<span className="kpi-chip kpi-chip-warning">
{summary.totalTokensAll.toLocaleString()} tokens
</span>
<div className="page-subtitle">按站点、客户端和时间筛选代理请求，并在需要时查看最近调试追踪。</div>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<div className="page-actions" style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
<span className="kpi-chip">{activeSiteLabel}</span>
<span className="kpi-chip kpi-chip-success">消耗总额 ${summary.totalCost.toFixed(4)}</span>
<span className="kpi-chip kpi-chip-warning">{summary.totalTokensAll.toLocaleString()} tokens</span>
<button
onClick={() => setAutoRefresh((v) => !v)}
className={`btn btn-ghost${autoRefresh ? ' btn-ghost-active' : ''}`}
@@ -1177,23 +1368,19 @@ export default function ProxyLogs() {
)}
/>
<div className="card" style={{ marginBottom: 12, display: 'grid', gap: 16 }}>
<div className="card" style={{ marginBottom: 12, padding: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, flexWrap: 'wrap' }}>
<div style={{ display: 'grid', gap: 6 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
<div style={{ fontSize: 16, fontWeight: 600 }}>代理调试追踪</div>
<span style={debugStatusBadgeStyle}>
{debugSettings.proxyDebugTraceEnabled ? '已开启' : '未开启'}
</span>
</div>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>
当前只显示开启后产生的新请求。页内会持续刷新最近追踪结果，调试设置已收进弹窗。
<div>
<div style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-text-primary)' }}>代理调试追踪</div>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginTop: 4 }}>
未开启时不记录新追踪；追踪详情通过弹窗按需查看。
</div>
</div>
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
<button
type="button"
className={debugSettings.proxyDebugTraceEnabled ? 'btn btn-ghost btn-ghost-active' : 'btn btn-primary'}
className={debugSettings.proxyDebugTraceEnabled ? 'btn btn-ghost btn-ghost-active' : 'btn btn-ghost'}
style={{ border: '1px solid var(--color-border)' }}
onClick={() => void handleQuickToggleDebugTrace()}
disabled={debugPanelSaving}
>
@@ -1202,6 +1389,7 @@ export default function ProxyLogs() {
<button
type="button"
className="btn btn-ghost"
style={{ border: '1px solid var(--color-border)' }}
onClick={() => {
setDebugDraftSettings(debugSettings);
setShowDebugSettingsModal(true);
@@ -1212,6 +1400,7 @@ export default function ProxyLogs() {
<button
type="button"
className="btn btn-ghost"
style={{ border: '1px solid var(--color-border)' }}
onClick={() => void loadDebugState()}
disabled={debugPanelLoading}
>
@@ -1220,205 +1409,116 @@ export default function ProxyLogs() {
</div>
</div>
<div style={{ display: 'grid', gap: 12, gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, minmax(0, 1fr))' }}>
<div style={debugSummaryItemStyle}>
<div style={debugSectionLabelStyle}>记录内容</div>
<div style={{ fontSize: 13, color: 'var(--color-text-primary)', lineHeight: 1.6 }}>
{formatProxyDebugCaptureSummary(debugSettings)}
</div>
</div>
<div style={debugSummaryItemStyle}>
<div style={debugSectionLabelStyle}>过滤范围</div>
<div style={{ fontSize: 13, color: 'var(--color-text-primary)', lineHeight: 1.6 }}>
{formatProxyDebugTargetSummary(debugSettings)}
</div>
</div>
<div style={debugSummaryItemStyle}>
<div style={debugSectionLabelStyle}>最近追踪数</div>
<div style={{ fontSize: 20, fontWeight: 700, color: 'var(--color-text-primary)' }}>
{debugTraces.length}
</div>
</div>
<div style={debugSummaryItemStyle}>
<div style={debugSectionLabelStyle}>最新一条</div>
<div style={{ fontSize: 13, color: 'var(--color-text-primary)', lineHeight: 1.6 }}>
{latestDebugTrace ? formatDateTimeLocal(latestDebugTrace.createdAt) : '暂无追踪'}
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px 18px', alignItems: 'center' }}>
<CompactSummaryMetric label="状态" value={debugSettings.proxyDebugTraceEnabled ? '已开启' : '未开启'} />
<CompactSummaryMetric label="最近追踪" value={`${debugTraces.length} 条`} />
<CompactSummaryMetric label="最新时间" value={latestDebugTrace ? formatDateTimeLocal(latestDebugTrace.createdAt) : '暂无'} />
</div>
<div style={{ display: 'grid', gap: 4 }}>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>记录内容：{formatProxyDebugCaptureSummary(debugSettings)}</div>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>过滤范围：{formatProxyDebugTargetSummary(debugSettings)}</div>
</div>
</div>
<div style={{ display: 'grid', gap: 12, gridTemplateColumns: isMobile ? '1fr' : 'minmax(300px, 360px) minmax(0, 1fr)' }}>
<div className="card" style={{ display: 'grid', gap: 12 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
<div style={{ fontWeight: 600 }}>最近调试追踪</div>
<div className="card" style={{ marginBottom: 12, padding: 12, overflowX: 'auto' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 12 }}>
<div>
<div style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-text-primary)' }}>最近调试追踪</div>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginTop: 4 }}>
按最新 20 条展示，点击查看详情会打开完整请求与 attempt 链路。
</div>
</div>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>
{debugSettings.proxyDebugTraceEnabled ? '开启中，结果会自动刷新' : '尚未开启'}
</div>
</div>
{debugPanelLoading && debugTraces.length === 0 ? (
<div style={{ color: 'var(--color-text-muted)', fontSize: 13 }}>加载调试追踪中...</div>
<div style={{ color: 'var(--color-text-muted)', fontSize: 13, paddingBottom: 12 }}>加载调试追踪中...</div>
) : debugTraces.length === 0 ? (
<div
style={{
padding: 14,
borderRadius: 'var(--radius-md)',
border: '1px dashed var(--color-border)',
borderRadius: 'var(--radius-sm)',
border: '1px solid var(--color-border-light)',
background: 'var(--color-bg)',
color: 'var(--color-text-muted)',
fontSize: 13,
lineHeight: 1.7,
fontSize: 12,
lineHeight: 1.6,
}}
>
{debugSettings.proxyDebugTraceEnabled
? '暂时还没有新追踪。这里只显示开启后产生的新请求，等下一次代理请求进入就会出现在这里。'
: '调试追踪尚未开启。点击上方“开启调试”或“调试设置”后，新的代理请求会出现在这里。'}
</div>
) : (
<div style={{ display: 'grid', gap: 8 }}>
) : isMobile ? (
<div className="mobile-card-list">
{debugTraces.map((trace) => (
<button
<MobileCard
key={trace.id}
title={trace.sessionId || `trace-${trace.id}`}
subtitle={formatDateTimeLocal(trace.createdAt)}
compact
headerActions={renderTraceStatusBadge(trace)}
footerActions={(
<button
type="button"
className="btn btn-ghost"
style={{
justifyContent: 'flex-start',
textAlign: 'left',
padding: 0,
border: 'none',
background: 'transparent',
}}
onClick={() => {
selectedDebugTraceIdRef.current = trace.id;
setSelectedDebugTraceId(trace.id);
void loadDebugTraceDetail(trace.id);
}}
className="btn btn-link"
onClick={() => openDebugTraceDetailModal(trace.id)}
>
<div
style={{
width: '100%',
display: 'grid',
gap: 6,
padding: 14,
borderRadius: 'var(--radius-md)',
border: '1px solid var(--color-border-light)',
background: selectedDebugTraceId === trace.id
? 'color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card))'
: 'var(--color-bg-card)',
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center' }}>
<div style={{ fontWeight: 600, color: 'var(--color-text-primary)' }}>
{trace.sessionId || `trace-${trace.id}`}
</div>
<div style={{ fontSize: 11, color: 'var(--color-text-muted)' }}>
{formatDateTimeLocal(trace.createdAt)}
</div>
</div>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>
{trace.requestedModel || '-'} · {trace.downstreamPath}
</div>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>
{trace.finalStatus || 'pending'} · {trace.finalUpstreamPath || '-'}
</div>
</div>
查看详情
</button>
)}
>
<MobileField label="模型" value={trace.requestedModel || '-'} />
<MobileField label="下游路径" value={trace.downstreamPath || '-'} />
<MobileField label="上游路径" value={trace.finalUpstreamPath || '-'} />
<MobileField label="客户端" value={trace.clientKind || '-'} />
</MobileCard>
))}
</div>
)}
</div>
<div className="card" style={{ display: 'grid', gap: 12 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
<div style={{ fontWeight: 600 }}>追踪详情</div>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>
选择左侧一条追踪后查看完整请求与 attempt 链路
</div>
</div>
{!selectedDebugTraceId ? (
<div style={{ color: 'var(--color-text-muted)', fontSize: 13 }}>
暂无追踪详情。开启调试后等待新请求，或从左侧选择一条最近追踪。
</div>
) : selectedDebugTraceDetail?.loading ? (
<div style={{ color: 'var(--color-text-muted)', fontSize: 13 }}>加载追踪详情中...</div>
) : selectedDebugTraceDetail?.error ? (
<div style={{ color: 'var(--color-danger)', fontSize: 13 }}>{selectedDebugTraceDetail.error}</div>
) : selectedDebugTraceDetail?.data ? (
<div style={{ display: 'grid', gap: 12 }}>
<div style={{ ...debugSectionCardStyle, gap: 8 }}>
<div style={debugSectionLabelStyle}>基础信息</div>
<div style={{ display: 'grid', gap: 6, fontSize: 13 }}>
<div>下游路径：{selectedDebugTraceDetail.data.trace.downstreamPath || '-'}</div>
<div>Session：{selectedDebugTraceDetail.data.trace.sessionId || '-'}</div>
<div>模型：{selectedDebugTraceDetail.data.trace.requestedModel || '-'}</div>
<div>候选 endpoint：{selectedDebugTraceDetail.data.trace.endpointCandidatesJson || '-'}</div>
<div>最终上游路径：{selectedDebugTraceDetail.data.trace.finalUpstreamPath || '-'}</div>
</div>
</div>
<div style={{ display: 'grid', gap: 10 }}>
<details open>
<summary>原始下游请求头</summary>
<pre style={debugCodeBlockStyle}>{selectedDebugTraceDetail.data.trace.requestHeadersJson || '-'}</pre>
</details>
<details>
<summary>原始下游请求体</summary>
<pre style={debugCodeBlockStyle}>{selectedDebugTraceDetail.data.trace.requestBodyJson || '-'}</pre>
</details>
<details>
<summary>最终响应</summary>
<pre style={debugCodeBlockStyle}>{selectedDebugTraceDetail.data.trace.finalResponseBodyJson || '-'}</pre>
</details>
</div>
<div style={{ display: 'grid', gap: 8 }}>
<div style={{ fontWeight: 600 }}>Attempt 记录</div>
{selectedDebugTraceDetail.data.attempts.length === 0 ? (
<div style={{ color: 'var(--color-text-muted)', fontSize: 13 }}>暂无 attempt 记录</div>
) : (
selectedDebugTraceDetail.data.attempts.map((attempt) => (
<details key={attempt.id}>
<summary>
#{attempt.attemptIndex + 1} · {attempt.endpoint} · {attempt.responseStatus ?? '-'} · {attempt.requestPath}
</summary>
<pre style={debugCodeBlockStyle}>
{`targetUrl: ${attempt.targetUrl}
runtimeExecutor: ${attempt.runtimeExecutor || '-'}
recoverApplied: ${attempt.recoverApplied ? 'true' : 'false'}
downgradeDecision: ${attempt.downgradeDecision ? 'true' : 'false'}
downgradeReason: ${attempt.downgradeReason || '-'}
requestHeaders:
${attempt.requestHeadersJson || '-'}
requestBody:
${attempt.requestBodyJson || '-'}
responseHeaders:
${attempt.responseHeadersJson || '-'}
responseBody:
${attempt.responseBodyJson || '-'}
rawErrorText:
${attempt.rawErrorText || '-'}
memoryWrite:
${attempt.memoryWriteJson || '-'}`}
</pre>
</details>
))
<table className="data-table" style={{ width: '100%' }}>
<thead>
<tr>
<th>时间</th>
<th>Session</th>
<th>模型</th>
<th>下游路径</th>
<th>上游路径</th>
<th>客户端</th>
<th>{tr('状态')}</th>
<th style={{ textAlign: 'right' }}>操作</th>
</tr>
</thead>
<tbody>
{debugTraces.map((trace) => (
<tr key={trace.id}>
<td style={{ fontSize: 12, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums', color: 'var(--color-text-secondary)' }}>
{formatDateTimeLocal(trace.createdAt)}
</td>
<td style={{ fontSize: 12, fontWeight: 600 }}>{trace.sessionId || `trace-${trace.id}`}</td>
<td style={{ fontSize: 12 }}>{trace.requestedModel || '-'}</td>
<td style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>{trace.downstreamPath || '-'}</td>
<td style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>{trace.finalUpstreamPath || '-'}</td>
<td style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>{trace.clientKind || '-'}</td>
<td>{renderTraceStatusBadge(trace)}</td>
<td style={{ textAlign: 'right' }}>
<button
type="button"
className="btn btn-link"
onClick={() => openDebugTraceDetailModal(trace.id)}
>
查看详情
</button>
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
) : (
<div style={{ color: 'var(--color-text-muted)', fontSize: 13 }}>
暂无追踪详情。
</div>
)}
</div>
</div>
{isMobile ? (
<MobileDrawer
@@ -1452,6 +1552,31 @@ ${attempt.memoryWriteJson || '-'}`}
</CenteredModal>
)}
{isMobile ? (
<MobileDrawer
open={showDebugTraceDetailModal}
onClose={closeDebugTraceDetailModal}
title={selectedDebugTraceListItem?.sessionId || '追踪详情'}
closeLabel="关闭追踪详情"
side="right"
>
<div style={{ padding: 16, display: 'grid', gap: 16 }}>
{renderDebugTraceDetailContent()}
</div>
</MobileDrawer>
) : (
<CenteredModal
open={showDebugTraceDetailModal}
onClose={closeDebugTraceDetailModal}
title={selectedDebugTraceListItem?.sessionId || '追踪详情'}
maxWidth={920}
closeOnBackdrop
closeOnEscape
>
{renderDebugTraceDetailContent()}
</CenteredModal>
)}
{hasInvalidTimeRange && (
<div className="alert alert-error" style={{ marginBottom: 12 }}>
结束时间必须晚于开始时间