feat: implement incremental message updates for improved UI performance

- Modified Task.ts to send only new messages instead of entire state
- Added messageCreated and messageUpdated event types to ExtensionMessage
- Updated webview handler to process incremental message updates
- Enhanced postStateToWebview to handle existing tasks with incremental loading
- Improved performance by reducing data transfer and UI re-renders

This change significantly improves UI responsiveness, especially for tasks with many messages.

Author: hannesrudolph

src/core/task/Task.ts

@@ -544,7 +544,8 @@ export class Task extends EventEmitter<TaskEvents> {
 	private async addToClineMessages(message: ClineMessage) {
 		this.clineMessages.push(message)
 		const provider = this.providerRef.deref()
-		await provider?.postStateToWebview()
+		// Send only the new message instead of the entire state
+		await provider?.postMessageToWebview({ type: "messageCreated", clineMessage: message })
 		this.emit("message", { action: "created", message })
 		await this.saveClineMessages()
 
@@ -1006,6 +1007,9 @@ export class Task extends EventEmitter<TaskEvents> {
 		// the task first.
 		this.apiConversationHistory = await this.getSavedApiConversationHistory()
 
+		// Send initial state to webview (this will now handle incremental message loading)
+		await this.providerRef.deref()?.postStateToWebview()
+
 		const lastClineMessage = this.clineMessages
 			.slice()
 			.reverse()
@@ -1443,7 +1447,13 @@ export class Task extends EventEmitter<TaskEvents> {
 		} satisfies ClineApiReqInfo)
 
 		await this.saveClineMessages()
-		await provider?.postStateToWebview()
+		// Send only the updated API request message instead of the entire state
+		if (provider && lastApiReqIndex >= 0) {
+			await provider.postMessageToWebview({
+				type: "messageUpdated",
+				clineMessage: this.clineMessages[lastApiReqIndex],
+			})
+		}
 
 		try {
 			let cacheWriteTokens = 0
@@ -1642,6 +1652,7 @@ export class Task extends EventEmitter<TaskEvents> {
 
 					await abortStream(cancelReason, streamingFailedMessage)
 
+					const provider = this.providerRef.deref()
 					const history = await provider?.getTaskWithId(this.taskId)
 
 					if (history) {
@@ -1652,6 +1663,8 @@ export class Task extends EventEmitter<TaskEvents> {
 				this.isStreaming = false
 			}
 
+			const provider = this.providerRef.deref()
+
 			if (inputTokens > 0 || outputTokens > 0 || cacheWriteTokens > 0 || cacheReadTokens > 0) {
 				TelemetryService.instance.captureLlmCompletion(this.taskId, {
 					inputTokens,
@@ -1701,7 +1714,13 @@ export class Task extends EventEmitter<TaskEvents> {
 
 			updateApiReqMsg()
 			await this.saveClineMessages()
-			await this.providerRef.deref()?.postStateToWebview()
+			// Send only the updated API request message instead of the entire state
+			if (provider && lastApiReqIndex >= 0) {
+				await provider.postMessageToWebview({
+					type: "messageUpdated",
+					clineMessage: this.clineMessages[lastApiReqIndex],
+				})
+			}
 
 			// Now add to apiConversationHistory.
 			// Need to save assistant responses to file before proceeding to

src/core/webview/ClineProvider.ts

@@ -1332,7 +1332,26 @@ export class ClineProvider
 
 	async postStateToWebview() {
 		const state = await this.getStateToPostToWebview()
-		this.postMessageToWebview({ type: "state", state })
+
+		// Check if we're loading an existing task with messages
+		const currentCline = this.getCurrentCline()
+		const hasExistingMessages = currentCline && currentCline.clineMessages.length > 0
+
+		if (hasExistingMessages) {
+			// Send state without messages first
+			const stateWithoutMessages = { ...state, clineMessages: [] }
+			await this.postMessageToWebview({ type: "state", state: stateWithoutMessages })
+
+			// Then send messages incrementally with a small delay for smooth rendering
+			for (const message of currentCline.clineMessages) {
+				await this.postMessageToWebview({ type: "messageCreated", clineMessage: message })
+				// Small delay to prevent overwhelming the webview
+				await delay(10)
+			}
+		} else {
+			// Normal state update for new tasks or tasks without messages
+			await this.postMessageToWebview({ type: "state", state })
+		}
 
 		// Check MDM compliance and send user to account tab if not compliant
 		if (!this.checkMdmCompliance()) {

src/shared/ExtensionMessage.ts

@@ -67,6 +67,7 @@ export interface ExtensionMessage {
 		| "workspaceUpdated"
 		| "invoke"
 		| "messageUpdated"
+		| "messageCreated"
 		| "mcpServers"
 		| "enhancedPrompt"
 		| "commitSearchResults"

webview-ui/src/context/ExtensionStateContext.tsx

@@ -330,6 +330,14 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					setCommands(message.commands ?? [])
 					break
 				}
+				case "messageCreated": {
+					const clineMessage = message.clineMessage!
+					setState((prevState) => ({
+						...prevState,
+						clineMessages: [...prevState.clineMessages, clineMessage],
+					}))
+					break
+				}
 				case "messageUpdated": {
 					const clineMessage = message.clineMessage!
 					setState((prevState) => {