Implement lazy loading for task messages to prevent memory overload

[daniel-lxs]

Problem

Currently, when loading a task (either new or from history), all messages are sent to the webview at once through postStateToWebview(). This can cause memory issues and UI freezing when dealing with tasks that have a large number of messages.

In ClineProvider.ts:1669, the entire message array is sent:

clineMessages: this.getCurrentCline()?.clineMessages || [],

Proposed Solution

Implement lazy loading for task messages where:

1. Only a limited number of messages (e.g., the most recent 50-100) are initially sent to the webview
2. The webview can request additional messages as needed (e.g., when scrolling up)
3. Messages are loaded in batches to avoid memory overload

Implementation Details

Backend Changes

1. Modify getStateToPostToWebview() to send only a subset of messages:

   // Instead of sending all messages
   clineMessages: this.getCurrentCline()?.clineMessages || [],
   
   // Send only recent messages
   clineMessages: this.getCurrentCline()?.clineMessages.slice(-INITIAL_MESSAGE_LIMIT) || [],

2. Add a new message handler in webviewMessageHandler.ts to handle requests for more messages:

   case "loadMoreMessages":
     const messages = provider.getCurrentCline()?.clineMessages || []
     const startIndex = message.startIndex || 0
     const batch = messages.slice(startIndex, startIndex + MESSAGE_BATCH_SIZE)
     await provider.postMessageToWebview({ 
       type: "additionalMessages", 
       messages: batch,
       hasMore: startIndex + MESSAGE_BATCH_SIZE < messages.length
     })
     break

3. Track message loading state in the Task class to know which messages have been sent

Frontend Changes

1. Update ExtensionStateContext to handle incremental message loading
2. Implement scroll detection in the chat view to trigger loading more messages when user scrolls near the top
3. Add loading indicators to show when more messages are being fetched

Benefits

• Significantly reduced initial load time for tasks with many messages
• Lower memory footprint in the webview
• Better UI responsiveness
• Scalability for long-running tasks with thousands of messages

Related Work

PR #6522 attempted to implement incremental message updates for new messages, but it seems the implementation was later changed. This proposal extends that concept to handle the initial loading of messages as well.

Considerations

• Need to ensure message ordering is preserved
• Handle edge cases like messages being added while loading older ones
• Consider implementing virtual scrolling for extremely large message lists
• May need to adjust how message search/filtering works with lazy loading

[roomote]

Hi @daniel-lxs! I'm here to help out the maintainers and am going to see if I can implement this lazy loading feature for task messages. This is a great performance enhancement that will help with memory usage and UI responsiveness for tasks with many messages. I'll start working on the implementation following your detailed proposal.

[roomote]

I've successfully implemented lazy loading for task messages and created a pull request: #6678

Summary of Implementation

The solution implements a lazy loading pattern that:

• Initially loads only the 50 most recent messages
• Loads additional messages on-demand when users scroll to the top
• Manages loading state to prevent duplicate requests
• Properly handles edge cases and deduplicates messages

Key Changes

• Added new message types for requesting and responding with paginated messages
• Modified the backend to send only initial messages and track total count
• Updated the frontend to detect scroll events and request more messages
• Added comprehensive tests for both backend and frontend functionality

The implementation improves performance and memory usage for tasks with many messages, addressing the issues of high memory usage, UI lag, and slow initial load times.