Fix: Resolve Memory Leak in ChatView Virtual Scrolling Implementation

[xyOz-dev]

Fix: Resolve Memory Leak in ChatView Virtual Scrolling Implementation

Root Cause

The memory leak was caused by React Virtuoso rendering ALL messages below the current viewport due to increaseViewportBy={{ bottom: Number.MAX_SAFE_INTEGER }}. This prevented React from unmounting components and releasing memory, causing linear memory growth with conversation length.

Changes Made

1. Fix infinite viewport rendering (line 1872)

• Changed: increaseViewportBy from { top: 3_000, bottom: Number.MAX_SAFE_INTEGER } to { top: 3_000, bottom: 1000 }
• Reasoning: Limits viewport to render only 1000px below current view instead of infinite, allowing React to properly unmount and garbage collect off-screen components

2. Optimize LRU cache configuration (lines 183-186)

• Reduced cache size from 250 to 100 entries
• Reduced TTL from 15 minutes to 5 minutes
• Reasoning: Smaller cache reduces memory footprint while still preventing message flickering for recently viewed messages

3. Implement viewport-based message filtering (lines 926-928, 982-985)

• Process only the most recent 500 messages from modifiedMessages
• Track only the last 100 messages in the viewport window
• Reasoning: Prevents processing and tracking of thousands of messages in long conversations, significantly reducing memory usage

4. Add periodic cache cleanup (lines 467-480)

• Implement 60-second interval to remove cached entries for deleted messages
• Reasoning: Ensures the LRU cache doesn't retain references to messages that have been removed from the conversation, preventing memory leaks from stale entries

Impact

• Memory usage now remains bounded regardless of conversation length
• Virtual scrolling performance maintained while preventing unbounded memory growth
• Fixes issue where users experienced insane memory usage in long conversations resulting in grey screens and other major issues
  Note: Default VSCode + RooCode Scrolling up and down messages

roocode.default.broken.mp4

Note: VSCode Debugger + RooCode Scrolling up and down messages so memory is 3gig by default due to double vscode and the debugger

roocode.fix.mp4

Note: Videos are sped up 4x

---

Developed & Implemented by The Saturn Pipeline

---

Important

Fixes memory leak in ChatView by optimizing virtual scrolling and cache management.

• Behavior:
  • Changed increaseViewportBy in ChatView.tsx from { top: 3_000, bottom: Number.MAX_SAFE_INTEGER } to { top: 3_000, bottom: 1000 } to limit rendering to 1000px below the viewport.
  • Reduced LRU cache size from 250 to 100 entries and TTL from 15 to 5 minutes.
  • Filters modifiedMessages to process only the most recent 500 messages and track the last 100 in the viewport.
  • Added a 60-second interval for cache cleanup to remove entries for deleted messages.
• Impact:
  • Memory usage is now bounded regardless of conversation length.
  • Virtual scrolling performance is maintained while preventing unbounded memory growth.
  • Fixes issues with high memory usage in long conversations.

^{This description was created by for 17b0cc0. You can customize this summary. It will automatically update as commits are pushed.}

[xyOz-dev]

Not sure why its failing tests as it doesnt fail on my end, investigating..

[roomote]

Thank you for your contribution! I've reviewed the memory leak fix and have some suggestions for improvement. The core approach of limiting the viewport and implementing cleanup is solid, but there are opportunities to make the implementation more robust and maintainable.

[roomote]

Could we add inline comments explaining why these specific values were chosen? For example:

[roomote]

Consider extracting these magic numbers as named constants at the top of the file for better maintainability:

[roomote]

Good fix! Changing from to prevents the infinite rendering issue. Could we add a comment explaining this critical change?

[roomote]

Consider adding explicit type annotations for better code maintainability:

[daniel-lxs]

Thank you @xyOz-dev!