fix(trace): TraceViewer 出现滚动条时自动滚到底部

新增 scrollContainerRef + useEffect，监听 traceSteps / agentStatus /
groups.length 变化时自动滚到底部，与 MessageList 同款 throttle 80ms 模式，
避免流式事件高频触发导致滚动卡顿。

src/components/trace/TraceViewer.tsx

@@ -11,7 +11,7 @@
 
 import { Box, Typography, Stack, Chip } from '@mui/material';
 import { Activity, MessageSquare } from 'lucide-react';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useAgentStore } from '@renderer/stores/agent-store';
 import type { TraceStep as TraceStepType } from '@renderer/stores/agent-store';
 import { TraceStep } from './TraceStep';
@@ -66,6 +66,17 @@ export function TraceViewer(): React.JSX.Element {
 
   const isEmpty = groups.length === 0;
 
+  // 自动滚动到底部：traceSteps / agentStatus 变化时触发
+  // throttle 80ms 避免流式事件高频触发导致滚动卡顿
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const el = scrollContainerRef.current;
+      if (el) el.scrollTop = el.scrollHeight;
+    }, 80);
+    return () => clearTimeout(timer);
+  }, [allTraceSteps, agentStatus, groups.length]);
+
   return (
     <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden' }}>
       <Stack direction="row" spacing={1} sx={{ mb: 1.5, flexShrink: 0, alignItems: 'center' }}>
@@ -80,7 +91,7 @@ export function TraceViewer(): React.JSX.Element {
         )}
       </Stack>
 
-      <Box sx={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 1.5, minHeight: 0 }}>
+      <Box ref={scrollContainerRef} sx={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 1.5, minHeight: 0 }}>
         {isEmpty ? (
           <Typography variant="caption" sx={{ textAlign: 'center', py: 2, color: 'text.disabled', flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
             等待 Agent 活动...