From 93db12935b6ec61109b67014e856252a8996465a Mon Sep 17 00:00:00 2001
From: hannesrudolph <hrudolph@gmail.com>
Date: Wed, 6 Aug 2025 11:48:08 -0700
Subject: [PATCH 1/3] fix: improve scroll lock behavior while maintaining
 memory efficiency

- Use dynamic increaseViewportBy bottom value based on scroll position
- When at bottom, use larger value (10,000px) to maintain scroll lock
- When scrolled up, use smaller value (1,000px) for memory efficiency
- Add followOutput='smooth' for better scroll behavior
- Fixes scroll lock issues introduced in PR #6697
---
 webview-ui/src/components/chat/ChatView.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
index e73ac677019..0c005d0db3a 100644
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/webview-ui/src/components/chat/ChatView.tsx
@@ -1887,7 +1887,12 @@ 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: 3_000,
+								// Use a dynamic bottom value: larger when at bottom to maintain scroll lock,
+								// smaller when scrolled up to preserve memory efficiency
+								bottom: isAtBottom ? 10_000 : 1000,
+							}}
 							data={groupedMessages}
 							itemContent={itemContent}
 							atBottomStateChange={(isAtBottom: boolean) => {
@@ -1899,6 +1904,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							}}
 							atBottomThreshold={10}
 							initialTopMostItemIndex={groupedMessages.length - 1}
+							followOutput="smooth"
 						/>
 					</div>
 					<div className={`flex-initial min-h-0 ${!areButtonsVisible ? "mb-1" : ""}`}>

From b38df3fd24e4f6310b737a4df9b36e3ffc13a6d1 Mon Sep 17 00:00:00 2001
From: hannesrudolph <hrudolph@gmail.com>
Date: Wed, 6 Aug 2025 12:08:42 -0700
Subject: [PATCH 2/3] refactor: address PR review feedback

- Extract magic numbers into named constants (VIEWPORT_BUFFER_AT_BOTTOM, VIEWPORT_BUFFER_SCROLLED_UP, VIEWPORT_BUFFER_TOP)
- Add detailed comments explaining how followOutput='smooth' relates to the scroll lock fix
- Implement debouncing (300ms) for isAtBottom state to prevent rapid viewport buffer changes
- Add hysteresis to avoid performance issues during rapid scrolling

This maintains the balance between memory efficiency and proper scroll lock behavior while addressing all reviewer concerns.
---
 webview-ui/src/components/chat/ChatView.tsx | 31 ++++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
index 0c005d0db3a..179a6948be6 100644
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/webview-ui/src/components/chat/ChatView.tsx
@@ -70,6 +70,11 @@ export interface ChatViewRef {
 
 export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
 
+// Viewport buffer constants for memory-efficient scroll behavior
+const VIEWPORT_BUFFER_AT_BOTTOM = 10_000 // Larger buffer when at bottom to maintain scroll lock
+const VIEWPORT_BUFFER_SCROLLED_UP = 1_000 // Smaller buffer when scrolled up to preserve memory efficiency
+const VIEWPORT_BUFFER_TOP = 3_000 // Top buffer for smooth scrolling
+
 const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
 
 const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewProps> = (
@@ -174,6 +179,8 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	const disableAutoScrollRef = useRef(false)
 	const [showScrollToBottom, setShowScrollToBottom] = useState(false)
 	const [isAtBottom, setIsAtBottom] = useState(false)
+	// Debounced version of isAtBottom to prevent rapid viewport buffer changes
+	const [debouncedIsAtBottom, setDebouncedIsAtBottom] = useState(false)
 	const lastTtsRef = useRef<string>("")
 	const [wasStreaming, setWasStreaming] = useState<boolean>(false)
 	const [showCheckpointWarning, setShowCheckpointWarning] = useState<boolean>(false)
@@ -1430,6 +1437,16 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 
 	useEvent("wheel", handleWheel, window, { passive: true }) // passive improves scrolling performance
 
+	// Debounce the isAtBottom state to prevent rapid viewport buffer changes
+	// This adds hysteresis to avoid performance issues when users quickly scroll between top and bottom
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedIsAtBottom(isAtBottom)
+		}, 300) // 300ms delay provides good balance between responsiveness and stability
+
+		return () => clearTimeout(timer)
+	}, [isAtBottom])
+
 	// Effect to handle showing the checkpoint warning after a delay
 	useEffect(() => {
 		// Only show the warning when there's a task but no visible messages yet
@@ -1888,10 +1905,13 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							key={task.ts}
 							className="scrollable grow overflow-y-scroll mb-1"
 							increaseViewportBy={{
-								top: 3_000,
-								// Use a dynamic bottom value: larger when at bottom to maintain scroll lock,
-								// smaller when scrolled up to preserve memory efficiency
-								bottom: isAtBottom ? 10_000 : 1000,
+								top: VIEWPORT_BUFFER_TOP,
+								// Dynamic bottom buffer based on scroll position:
+								// - When at bottom: Use larger buffer to maintain scroll lock behavior
+								// - When scrolled up: Use smaller buffer to preserve memory efficiency
+								// This balances the memory leak fix from PR #6697 with proper scroll lock functionality
+								// Using debounced state to prevent rapid toggling during quick scrolling
+								bottom: debouncedIsAtBottom ? VIEWPORT_BUFFER_AT_BOTTOM : VIEWPORT_BUFFER_SCROLLED_UP,
 							}}
 							data={groupedMessages}
 							itemContent={itemContent}
@@ -1904,6 +1924,9 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							}}
 							atBottomThreshold={10}
 							initialTopMostItemIndex={groupedMessages.length - 1}
+							// followOutput='smooth' ensures smooth scrolling animation when new content arrives,
+							// working in conjunction with the dynamic viewport buffer to maintain scroll lock
+							// when the user is at the bottom of the chat
 							followOutput="smooth"
 						/>
 					</div>

From d368697c58ec85afac1be9db1406ac2882d790e3 Mon Sep 17 00:00:00 2001
From: hannesrudolph <hrudolph@gmail.com>
Date: Wed, 6 Aug 2025 12:26:08 -0700
Subject: [PATCH 3/3] refactor: simplify comments per review feedback

- Remove verbose comments and references to other PRs
- Keep comments concise and focused on what the code does
---
 webview-ui/src/components/chat/ChatView.tsx | 24 ++++++++-------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
index 179a6948be6..afc37c7e560 100644
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/webview-ui/src/components/chat/ChatView.tsx
@@ -70,10 +70,10 @@ export interface ChatViewRef {
 
 export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
 
-// Viewport buffer constants for memory-efficient scroll behavior
-const VIEWPORT_BUFFER_AT_BOTTOM = 10_000 // Larger buffer when at bottom to maintain scroll lock
-const VIEWPORT_BUFFER_SCROLLED_UP = 1_000 // Smaller buffer when scrolled up to preserve memory efficiency
-const VIEWPORT_BUFFER_TOP = 3_000 // Top buffer for smooth scrolling
+// Viewport buffer constants
+const VIEWPORT_BUFFER_AT_BOTTOM = 10_000 // Maintains scroll lock when at bottom
+const VIEWPORT_BUFFER_SCROLLED_UP = 1_000 // Reduces memory usage when scrolled up
+const VIEWPORT_BUFFER_TOP = 3_000
 
 const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
 
@@ -1437,12 +1437,11 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 
 	useEvent("wheel", handleWheel, window, { passive: true }) // passive improves scrolling performance
 
-	// Debounce the isAtBottom state to prevent rapid viewport buffer changes
-	// This adds hysteresis to avoid performance issues when users quickly scroll between top and bottom
+	// Debounce isAtBottom to prevent rapid viewport buffer changes
 	useEffect(() => {
 		const timer = setTimeout(() => {
 			setDebouncedIsAtBottom(isAtBottom)
-		}, 300) // 300ms delay provides good balance between responsiveness and stability
+		}, 300)
 
 		return () => clearTimeout(timer)
 	}, [isAtBottom])
@@ -1906,11 +1905,8 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							className="scrollable grow overflow-y-scroll mb-1"
 							increaseViewportBy={{
 								top: VIEWPORT_BUFFER_TOP,
-								// Dynamic bottom buffer based on scroll position:
-								// - When at bottom: Use larger buffer to maintain scroll lock behavior
-								// - When scrolled up: Use smaller buffer to preserve memory efficiency
-								// This balances the memory leak fix from PR #6697 with proper scroll lock functionality
-								// Using debounced state to prevent rapid toggling during quick scrolling
+								// Dynamic bottom buffer: larger when at bottom for scroll lock,
+								// smaller when scrolled up for memory efficiency
 								bottom: debouncedIsAtBottom ? VIEWPORT_BUFFER_AT_BOTTOM : VIEWPORT_BUFFER_SCROLLED_UP,
 							}}
 							data={groupedMessages}
@@ -1924,9 +1920,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							}}
 							atBottomThreshold={10}
 							initialTopMostItemIndex={groupedMessages.length - 1}
-							// followOutput='smooth' ensures smooth scrolling animation when new content arrives,
-							// working in conjunction with the dynamic viewport buffer to maintain scroll lock
-							// when the user is at the bottom of the chat
+							// Smooth scrolling when new content arrives
 							followOutput="smooth"
 						/>
 					</div>