fix: 右侧面板布局和间距修复

- TraceViewer: 移除底部重复的 Token/Provider 摘要(与TokenUsage重复)
- TraceViewer: height:100% → flexShrink+maxHeight 避免撑破布局
- TokenUsage: StatCard/SummaryRow 增加内边距和间距

src/components/layout/StatusBar.tsx

@@ -27,11 +27,12 @@ export function StatusBar(): React.JSX.Element {
         <Stack direction="row" spacing={0.75} alignItems="center">
           <Box
             sx={{
-              width: 8, height: 8, borderRadius: '50%', bgcolor: AGENT_STATUS_COLORS[agentStatus],
+              width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
+              bgcolor: AGENT_STATUS_COLORS[agentStatus],
               animation: (agentStatus === 'thinking' || agentStatus === 'executing') ? 'pulse 2s infinite' : 'none',
             }}
           />
-          <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 11 }}>
+          <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 11, lineHeight: 1 }}>
             {AGENT_STATUS_LABELS[agentStatus]}
           </Typography>
         </Stack>

src/components/trace/TokenUsage.tsx

@@ -64,17 +64,17 @@ export function TokenUsage(): React.JSX.Element {
 
 function StatCard({ label, value, color }: { label: string; value: string; color: string }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1.5, py: 1, borderRadius: 1.5, bgcolor: 'action.hover' }}>
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, px: 1.5, py: 1.25, borderRadius: 1.5, bgcolor: 'action.hover' }}>
       <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: color, flexShrink: 0 }} />
       <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 11 }}>{label}</Typography>
-      <Typography variant="caption" sx={{ ml: 'auto', fontFamily: 'monospace', fontWeight: 600, color: 'text.primary', fontSize: 12 }}>{value}</Typography>
+      <Typography variant="caption" sx={{ ml: 'auto', pl: 1, fontFamily: 'monospace', fontWeight: 600, color: 'text.primary', fontSize: 12 }}>{value}</Typography>
     </Box>
   );
 }
 
 function SummaryRow({ label, value, highlight, color }: { label: string; value: string; highlight?: boolean; color?: string }) {
   return (
-    <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ py: 0.25 }}>
+    <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ py: 0.5, px: 0.5 }}>
       <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 11 }}>{label}</Typography>
       <Typography variant="caption" sx={{ fontFamily: 'monospace', fontWeight: highlight ? 600 : 400, color: color ?? (highlight ? 'text.primary' : 'text.secondary'), fontSize: highlight ? 12 : 11 }}>{value}</Typography>
     </Stack>

src/components/trace/TraceViewer.tsx

@@ -6,16 +6,13 @@ import { Box, Typography, Stack } from '@mui/material';
 import { Activity } from 'lucide-react';
 import { useAgentStore } from '@renderer/stores/agent-store';
 import { TraceStep } from './TraceStep';
-import { formatTokens } from '@renderer/lib/formatters';
 
 export function TraceViewer(): React.JSX.Element {
   const traceSteps = useAgentStore((s) => s.traceSteps);
-  const tokenUsage = useAgentStore((s) => s.tokenUsage);
   const agentStatus = useAgentStore((s) => s.agentStatus);
-  const provider = useAgentStore((s) => s.provider);
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+    <Box sx={{ flexShrink: 0, display: 'flex', flexDirection: 'column' }}>
       <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 1.5 }}>
         <Activity size={14} style={{ color: '#818cf8' }} />
         <Typography variant="caption" sx={{ fontWeight: 600, textTransform: 'uppercase', letterSpacing: 1, color: 'text.secondary' }}>
@@ -23,25 +20,13 @@ export function TraceViewer(): React.JSX.Element {
         </Typography>
       </Stack>
 
-      <Box sx={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+      <Box sx={{ overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 0.5, maxHeight: 200 }}>
         {traceSteps.length === 0 ? (
           <Typography variant="caption" sx={{ textAlign: 'center', py: 2, color: 'text.secondary' }}>等待 Agent 活动...</Typography>
         ) : traceSteps.map((step, i) => (
           <TraceStep key={`${step.iteration}-${step.state}-${i}`} step={step} isCurrent={i === traceSteps.length - 1 && agentStatus !== 'idle'} />
         ))}
       </Box>
-
-      {tokenUsage.totalTokens > 0 && (
-        <Box sx={{ mt: 1.5, pt: 1.5, borderTop: 1, borderColor: 'divider', fontSize: 11, color: 'text.secondary' }}>
-          <Stack direction="row" justifyContent="space-between">
-            <span>Token:</span>
-            <span>入 {formatTokens(tokenUsage.inputTokens)} | 出 {formatTokens(tokenUsage.outputTokens)} | 总 {formatTokens(tokenUsage.totalTokens)}</span>
-          </Stack>
-          <Stack direction="row" justifyContent="space-between">
-            <span>Provider:</span><span>{provider}</span>
-          </Stack>
-        </Box>
-      )}
     </Box>
   );
 }