From 76bd72b7025f9ad984435313a035bd70d5770ff9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B4=AB=E5=BD=B1233?= <1440196015@qq.com>
Date: Mon, 20 Jul 2026 22:08:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(trace):=20TraceViewer=20=E5=87=BA=E7=8E=B0?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=97=B6=E8=87=AA=E5=8A=A8=E6=BB=9A?=
 =?UTF-8?q?=E5=88=B0=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 scrollContainerRef + useEffect，监听 traceSteps / agentStatus /
groups.length 变化时自动滚到底部，与 MessageList 同款 throttle 80ms 模式，
避免流式事件高频触发导致滚动卡顿。
---
 src/components/trace/TraceViewer.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/trace/TraceViewer.tsx b/src/components/trace/TraceViewer.tsx
index f0ff1ce..f0dde0d 100644
--- a/src/components/trace/TraceViewer.tsx
+++ b/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 活动...