refactor: 详情面板布局优化 — 固定高度 + 空值占位

- DetailPanel: TraceViewer flex:1 撑满, TokenUsage/AgentMonitor flexShrink:0 固定
- TraceViewer: 空内容时「等待 Agent 活动」居中撑满剩余空间
- TokenUsage: 始终展示完整结构(无会话时显示 -/0 而非隐藏)
- AgentMonitor: 固定 flexShrink:0 防止被挤压

src/components/layout/AgentMonitor.tsx

@@ -55,7 +55,7 @@ export function AgentMonitor(): React.JSX.Element {
   );
 
   return (
-    <Box sx={{ mt: 2, pt: 2, borderTop: 1, borderColor: 'divider' }}>
+    <Box sx={{ mt: 2, pt: 2, borderTop: 1, borderColor: 'divider', flexShrink: 0 }}>
       <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 1.5 }}>
         <Cpu size={14} style={{ color: '#818cf8' }} />
         <Typography variant="caption" sx={{ fontWeight: 600, textTransform: 'uppercase', letterSpacing: 1, color: 'text.secondary' }}>Agent 状态</Typography>

src/components/layout/DetailPanel.tsx

@@ -1,7 +1,7 @@
 /**
  * DetailPanel — 右侧详情面板
  *
- * 始终显示，包含 TraceViewer、TokenUsage、AgentMonitor。
+ * 布局策略：TraceViewer flex:1 撑满，TokenUsage/AgentMonitor flexShrink:0 固定。
  */
 
 import { Box } from '@mui/material';
@@ -12,8 +12,14 @@ import { LAYOUT } from '@renderer/lib/constants';
 
 export function DetailPanel(): React.JSX.Element {
   return (
-    <Box component="aside" sx={{ flexShrink: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', bgcolor: 'background.paper', borderLeft: 1, borderColor: 'divider', width: LAYOUT.DETAIL_WIDTH }}>
-      <Box sx={{ p: 1.5, flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+    <Box
+      component="aside"
+      sx={{
+        flexShrink: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden',
+        bgcolor: 'background.paper', borderLeft: 1, borderColor: 'divider', width: LAYOUT.DETAIL_WIDTH,
+      }}
+    >
+      <Box sx={{ p: 1.5, flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }}>
         <TraceViewer />
         <TokenUsage />
         <AgentMonitor />