feat: implement lazy loading for task messages

- Add WebviewMessage types for requesting task messages with offset/limit
- Add ExtensionMessage types for task messages response
- Modify ClineProvider to send only initial 50 messages
- Implement requestTaskMessages handler in webviewMessageHandler
- Update ExtensionStateContext to handle lazy loading responses
- Modify ChatView to detect scroll-to-top and request more messages
- Add loading indicators and proper state management
- Add comprehensive tests for both backend and frontend
- Fix pagination edge cases and duplicate filtering

This improves performance and memory usage for tasks with many messages
by loading messages on-demand as the user scrolls.

Fixes #6673

Author: roomote

src/core/webview/ClineProvider.ts

@@ -1666,7 +1666,17 @@ export class ClineProvider
 			currentTaskItem: this.getCurrentCline()?.taskId
 				? (taskHistory || []).find((item: HistoryItem) => item.id === this.getCurrentCline()?.taskId)
 				: undefined,
-			clineMessages: this.getCurrentCline()?.clineMessages || [],
+			// Send only initial batch of messages for lazy loading
+			clineMessages: (() => {
+				const allMessages = this.getCurrentCline()?.clineMessages || []
+				const INITIAL_MESSAGE_COUNT = 50
+				// If we have more messages than the initial count, send only the last N messages
+				if (allMessages.length > INITIAL_MESSAGE_COUNT) {
+					return allMessages.slice(-INITIAL_MESSAGE_COUNT)
+				}
+				return allMessages
+			})(),
+			totalClineMessages: this.getCurrentCline()?.clineMessages.length || 0,
 			taskHistory: (taskHistory || [])
 				.filter((item: HistoryItem) => item.ts && item.task)
 				.sort((a: HistoryItem, b: HistoryItem) => b.ts - a.ts),

src/core/webview/__tests__/webviewMessageHandler.spec.ts

@@ -576,3 +576,243 @@ describe("webviewMessageHandler - message dialog preferences", () => {
 		})
 	})
 })
+
+describe("webviewMessageHandler - requestTaskMessages", () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+		// Mock a current Cline instance with many messages
+		const mockCline = {
+			taskId: "test-task-id",
+			apiConversationHistory: [],
+			clineMessages: Array.from({ length: 150 }, (_, i) => ({
+				ts: i + 1000,
+				type: "say",
+				say: "assistant",
+				text: `Message ${i + 1}`,
+				partial: false,
+			})),
+		}
+		vi.mocked(mockClineProvider.getCurrentCline).mockReturnValue(mockCline as any)
+	})
+
+	it("should return paginated messages with correct offset and limit", async () => {
+		await webviewMessageHandler(mockClineProvider, {
+			type: "requestTaskMessages",
+			offset: 0,
+			limit: 50,
+		})
+
+		expect(mockClineProvider.getCurrentCline).toHaveBeenCalled()
+		expect(mockClineProvider.postMessageToWebview).toHaveBeenCalledWith({
+			type: "taskMessagesResponse",
+			messages: expect.arrayContaining([
+				expect.objectContaining({ text: "Message 101" }), // 150 - 50 + 1
+				expect.objectContaining({ text: "Message 102" }),
+				// ... up to Message 150
+			]),
+			totalMessages: 150,
+			hasMore: true,
+		})
+
+		// Verify we got exactly 50 messages
+		const call = vi.mocked(mockClineProvider.postMessageToWebview).mock.calls[0]
+		const response = call?.[0] as any
+		expect(response.messages).toHaveLength(50)
+		expect(response.messages[0].text).toBe("Message 101")
+		expect(response.messages[49].text).toBe("Message 150")
+	})
+
+	it("should return older messages when offset is increased", async () => {
+		await webviewMessageHandler(mockClineProvider, {
+			type: "requestTaskMessages",
+			offset: 50,
+			limit: 50,
+		})
+
+		expect(mockClineProvider.postMessageToWebview).toHaveBeenCalledWith({
+			type: "taskMessagesResponse",
+			messages: expect.arrayContaining([
+				expect.objectContaining({ text: "Message 51" }), // 150 - 50 - 50 + 1
+				expect.objectContaining({ text: "Message 52" }),
+				// ... up to Message 100
+			]),
+			totalMessages: 150,
+			hasMore: true,
+		})
+
+		// Verify we got exactly 50 messages
+		const call = vi.mocked(mockClineProvider.postMessageToWebview).mock.calls[0]
+		const response = call?.[0] as any
+		expect(response.messages).toHaveLength(50)
+		expect(response.messages[0].text).toBe("Message 51")
+		expect(response.messages[49].text).toBe("Message 100")
+	})
+
+	it("should set hasMore to false when all messages are loaded", async () => {
+		await webviewMessageHandler(mockClineProvider, {
+			type: "requestTaskMessages",
+			offset: 100,
+			limit: 50,
+		})
+
+		expect(mockClineProvider.postMessageToWebview).toHaveBeenCalledWith({
+			type: "taskMessagesResponse",
+			messages: expect.arrayContaining([
+				expect.objectContaining({ text: "Message 1" }),
+				expect.objectContaining({ text: "Message 2" }),
+				// ... up to Message 50
+			]),
+			totalMessages: 150,
+			hasMore: false, // No more messages to load
+		})
+
+		// Verify we got exactly 50 messages
+		const call = vi.mocked(mockClineProvider.postMessageToWebview).mock.calls[0]
+		const response = call?.[0] as any
+		expect(response.messages).toHaveLength(50)
+		expect(response.messages[0].text).toBe("Message 1")
+		expect(response.messages[49].text).toBe("Message 50")
+	})
+
+	it("should handle partial page at the beginning", async () => {
+		await webviewMessageHandler(mockClineProvider, {
+			type: "requestTaskMessages",
+			offset: 140,
+			limit: 50,
+		})
+
+		expect(mockClineProvider.postMessageToWebview).toHaveBeenCalledWith({
+			type: "taskMessagesResponse",
+			messages: expect.arrayContaining([
+				expect.objectContaining({ text: "Message 1" }),
+				expect.objectContaining({ text: "Message 2" }),
+				// ... up to Message 10
+			]),
+			totalMessages: 150,
+			hasMore: false,
+		})
+
+		// Verify we got only 10 messages (the remaining ones)
+		const call = vi.mocked(mockClineProvider.postMessageToWebview).mock.calls[0]
+		const response = call?.[0] as any
+		expect(response.messages).toHaveLength(10)
+		expect(response.messages[0].text).toBe("Message 1")
+		expect(response.messages[9].text).toBe("Message 10")
+	})
+
+	it("should handle task with fewer messages than limit", async () => {
+		// Mock a current Cline with only 30 messages
+		const mockCline = {
+			taskId: "test-task-id",
+			apiConversationHistory: [],
+			clineMessages: Array.from({ length: 30 }, (_, i) => ({
+				ts: i + 1000,
+				type: "say",
+				say: "assistant",
+				text: `Message ${i + 1}`,
+				partial: false,
+			})),
+		}
+		vi.mocked(mockClineProvider.getCurrentCline).mockReturnValue(mockCline as any)
+
+		await webviewMessageHandler(mockClineProvider, {
+			type: "requestTaskMessages",
+			offset: 0,
+			limit: 50,
+		})
+
+		expect(mockClineProvider.postMessageToWebview).toHaveBeenCalledWith({
+			type: "taskMessagesResponse",
+			messages: expect.arrayContaining([
+				expect.objectContaining({ text: "Message 1" }),
+				expect.objectContaining({ text: "Message 30" }),
+			]),
+			totalMessages: 30,
+			hasMore: false, // All messages loaded in first request
+		})
+
+		// Verify we got all 30 messages
+		const call = vi.mocked(mockClineProvider.postMessageToWebview).mock.calls[0]
+		const response = call?.[0] as any
+		expect(response.messages).toHaveLength(30)
+	})
+
+	it("should handle no current Cline instance", async () => {
+		vi.mocked(mockClineProvider.getCurrentCline).mockReturnValue(undefined)
+
+		await webviewMessageHandler(mockClineProvider, {
+			type: "requestTaskMessages",
+			offset: 0,
+			limit: 50,
+		})
+
+		expect(mockClineProvider.postMessageToWebview).toHaveBeenCalledWith({
+			type: "taskMessagesResponse",
+			messages: [],
+			totalMessages: 0,
+			hasMore: false,
+		})
+	})
+
+	it("should handle Cline with no messages", async () => {
+		const mockCline = {
+			taskId: "test-task-id",
+			apiConversationHistory: [],
+			clineMessages: [],
+		}
+		vi.mocked(mockClineProvider.getCurrentCline).mockReturnValue(mockCline as any)
+
+		await webviewMessageHandler(mockClineProvider, {
+			type: "requestTaskMessages",
+			offset: 0,
+			limit: 50,
+		})
+
+		expect(mockClineProvider.postMessageToWebview).toHaveBeenCalledWith({
+			type: "taskMessagesResponse",
+			messages: [],
+			totalMessages: 0,
+			hasMore: false,
+		})
+	})
+
+	it("should handle offset beyond message count", async () => {
+		await webviewMessageHandler(mockClineProvider, {
+			type: "requestTaskMessages",
+			offset: 200, // Beyond 150 messages
+			limit: 50,
+		})
+
+		const call = vi.mocked(mockClineProvider.postMessageToWebview).mock.calls[0]
+		const response = call?.[0] as any
+
+		expect(response).toEqual({
+			type: "taskMessagesResponse",
+			messages: [],
+			totalMessages: 150,
+			hasMore: false,
+		})
+	})
+
+	it("should handle undefined clineMessages", async () => {
+		const mockCline = {
+			taskId: "test-task-id",
+			apiConversationHistory: [],
+			clineMessages: undefined,
+		}
+		vi.mocked(mockClineProvider.getCurrentCline).mockReturnValue(mockCline as any)
+
+		await webviewMessageHandler(mockClineProvider, {
+			type: "requestTaskMessages",
+			offset: 0,
+			limit: 50,
+		})
+
+		expect(mockClineProvider.postMessageToWebview).toHaveBeenCalledWith({
+			type: "taskMessagesResponse",
+			messages: [],
+			totalMessages: 0,
+			hasMore: false,
+		})
+	})
+})

src/core/webview/webviewMessageHandler.ts

@@ -2568,5 +2568,52 @@ export const webviewMessageHandler = async (
 			}
 			break
 		}
+		case "requestTaskMessages": {
+			// Handle lazy loading of task messages
+			const currentCline = provider.getCurrentCline()
+			if (!currentCline) {
+				// No active task, send empty response
+				await provider.postMessageToWebview({
+					type: "taskMessagesResponse",
+					messages: [],
+					totalMessages: 0,
+					hasMore: false,
+				})
+				break
+			}
+
+			const allMessages = currentCline.clineMessages || []
+			const offset = message.offset || 0
+			const limit = message.limit || 50
+
+			// Calculate the range of messages to send
+			// We want to get messages from the end, working backwards
+			const totalMessages = allMessages.length
+
+			// If offset is beyond the total messages, return empty array
+			if (offset >= totalMessages) {
+				await provider.postMessageToWebview({
+					type: "taskMessagesResponse",
+					messages: [],
+					totalMessages: totalMessages,
+					hasMore: false,
+				})
+				break
+			}
+
+			const startIndex = Math.max(0, totalMessages - offset - limit)
+			const endIndex = totalMessages - offset
+
+			const messages = allMessages.slice(startIndex, endIndex)
+			const hasMore = startIndex > 0
+
+			await provider.postMessageToWebview({
+				type: "taskMessagesResponse",
+				messages: messages,
+				totalMessages: totalMessages,
+				hasMore: hasMore,
+			})
+			break
+		}
 	}
 }

src/shared/ExtensionMessage.ts

@@ -120,6 +120,7 @@ export interface ExtensionMessage {
 		| "showEditMessageDialog"
 		| "commands"
 		| "insertTextIntoTextarea"
+		| "taskMessagesResponse"
 	text?: string
 	payload?: any // Add a generic payload for now, can refine later
 	action?:
@@ -194,6 +195,10 @@ export interface ExtensionMessage {
 	messageTs?: number
 	context?: string
 	commands?: Command[]
+	// For lazy loading messages
+	messages?: ClineMessage[]
+	totalMessages?: number
+	hasMore?: boolean
 }
 
 export type ExtensionState = Pick<

src/shared/WebviewMessage.ts

@@ -210,6 +210,7 @@ export interface WebviewMessage {
 		| "deleteCommand"
 		| "createCommand"
 		| "insertTextIntoTextarea"
+		| "requestTaskMessages"
 	text?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "account"
@@ -272,6 +273,9 @@ export interface WebviewMessage {
 		codebaseIndexGeminiApiKey?: string
 		codebaseIndexMistralApiKey?: string
 	}
+	// For lazy loading messages
+	offset?: number
+	limit?: number
 }
 
 export const checkoutDiffPayloadSchema = z.object({