From 01ed9cce4923433c9b3de3cc9693901415ce8af9 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 12 Aug 2025 23:21:20 +0000
Subject: [PATCH] fix: resolve scroll jumping issue on smaller screens

- Increased message limit threshold from 500 to 750 messages
- Only apply message limiting for very long conversations (>1000 messages)
- Balanced viewport rendering (1500px top/bottom instead of 3000px/1000px)
- Increased LRU cache capacity from 100 to 200 entries with longer TTL
- Expanded viewport tracking window from 100 to 200 messages

These changes prevent aggressive message filtering that was causing
scroll position jumps while maintaining memory optimizations from PR #6697.

Fixes #7026
---
 webview-ui/src/components/chat/ChatView.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
index 9b8c96dea1d..5abd2a33464 100644
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/webview-ui/src/components/chat/ChatView.tsx
@@ -181,8 +181,8 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	const [showAnnouncementModal, setShowAnnouncementModal] = useState(false)
 	const everVisibleMessagesTsRef = useRef<LRUCache<number, boolean>>(
 		new LRUCache({
-			max: 100,
-			ttl: 1000 * 60 * 5,
+			max: 200,
+			ttl: 1000 * 60 * 10,
 		}),
 	)
 	const autoApproveTimeoutRef = useRef<NodeJS.Timeout | null>(null)
@@ -897,11 +897,14 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	useMount(() => textAreaRef.current?.focus())
 
 	const visibleMessages = useMemo(() => {
+		// Use a more conservative approach for message filtering to prevent jumping
+		// Only apply the 500 message limit for very long conversations
 		const currentMessageCount = modifiedMessages.length
-		const startIndex = Math.max(0, currentMessageCount - 500)
-		const recentMessages = modifiedMessages.slice(startIndex)
+		const shouldLimitMessages = currentMessageCount > 1000
+		const startIndex = shouldLimitMessages ? Math.max(0, currentMessageCount - 750) : 0
+		const messagesToProcess = modifiedMessages.slice(startIndex)
 
-		const newVisibleMessages = recentMessages.filter((message: ClineMessage) => {
+		const newVisibleMessages = messagesToProcess.filter((message: ClineMessage) => {
 			if (everVisibleMessagesTsRef.current.has(message.ts)) {
 				const alwaysHiddenOnceProcessedAsk: ClineAsk[] = [
 					"api_req_failed",
@@ -954,7 +957,10 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			return true
 		})
 
-		const viewportStart = Math.max(0, newVisibleMessages.length - 100)
+		// Track visible messages more conservatively to avoid cache thrashing
+		// Only track messages that are actually in the current viewport
+		const viewportWindow = Math.min(200, newVisibleMessages.length)
+		const viewportStart = Math.max(0, newVisibleMessages.length - viewportWindow)
 		newVisibleMessages
 			.slice(viewportStart)
 			.forEach((msg: ClineMessage) => everVisibleMessagesTsRef.current.set(msg.ts, true))
@@ -1870,7 +1876,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							ref={virtuosoRef}
 							key={task.ts}
 							className="scrollable grow overflow-y-scroll mb-1"
-							increaseViewportBy={{ top: 3_000, bottom: 1000 }}
+							increaseViewportBy={{ top: 1500, bottom: 1500 }}
 							data={groupedMessages}
 							itemContent={itemContent}
 							atBottomStateChange={(isAtBottom: boolean) => {