refactor: TokenUsage 底部汇总改用 MUI Table，标题与值自然分离

src/components/trace/TokenUsage.tsx

@@ -5,7 +5,7 @@
  * 固定在详情面板中部，高度由内容自然决定。
  */
 
-import { Box, Typography, Stack } from '@mui/material';
+import { Box, Typography, Stack, Table, TableBody, TableRow, TableCell } from '@mui/material';
 import { Zap } from 'lucide-react';
 import { useAgentStore } from '@renderer/stores/agent-store';
 import { formatTokens } from '@renderer/lib/formatters';
@@ -46,12 +46,31 @@ export function TokenUsage(): React.JSX.Element {
       </Box>
 
       {/* 底部汇总 */}
-      <Stack spacing={0.5}>
+      <Table size="small" sx={{ '& .MuiTableCell-root': { border: 0, py: 0.5, px: 0.5 } }}>
-        <SummaryRow label="总计" value={tokenUsage.totalTokens > 0 ? formatTokens(tokenUsage.totalTokens) : '-'} highlight />
+        <TableBody>
-        <SummaryRow label="上下文" value={tokenUsage.totalTokens > 0 ? `${usagePercent.toFixed(1)}%` : '-'}
+          <TableRow>
-          color={usagePercent > 80 ? 'error.main' : usagePercent > 60 ? 'warning.main' : undefined} />
+            <TableCell sx={{ color: 'text.secondary', fontSize: 11, width: '40%' }}>总计</TableCell>
-        <SummaryRow label="迭代" value={`${currentIteration} / ${maxIterations}`} />
+            <TableCell sx={{ fontFamily: 'monospace', fontWeight: 600, color: 'text.primary', fontSize: 12, textAlign: 'right' }}>
-      </Stack>
+              {tokenUsage.totalTokens > 0 ? formatTokens(tokenUsage.totalTokens) : '-'}
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell sx={{ color: 'text.secondary', fontSize: 11 }}>上下文</TableCell>
+            <TableCell sx={{
+              fontFamily: 'monospace', fontSize: 11, textAlign: 'right',
+              color: usagePercent > 80 ? 'error.main' : usagePercent > 60 ? 'warning.main' : 'text.secondary',
+            }}>
+              {tokenUsage.totalTokens > 0 ? `${usagePercent.toFixed(1)}%` : '-'}
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell sx={{ color: 'text.secondary', fontSize: 11 }}>迭代</TableCell>
+            <TableCell sx={{ fontFamily: 'monospace', fontSize: 11, color: 'text.secondary', textAlign: 'right' }}>
+              {currentIteration} / {maxIterations}
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
     </Box>
   );
 }
@@ -65,12 +84,3 @@ function StatCard({ label, value, color }: { label: string; value: string; color
     </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.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>
-  );
-}