apply_diff: stream unified diffs to UI during batch preview; include unified patch in single-file approval; remove client-side fallback normalization for appliedDiff; align gap-row styling to editor background

Author: hannesrudolph

src/core/tools/applyDiffTool.ts

@@ -140,6 +140,9 @@ export async function applyDiffToolLegacy(
 			cline.consecutiveMistakeCount = 0
 			cline.consecutiveMistakeCountForApplyDiff.delete(relPath)
 
+			// Generate backend-unified diff for display in chat/webview
+			const unifiedPatch = formatResponse.createPrettyPatch(relPath, originalContent, diffResult.content)
+
 			// Check if preventFocusDisruption experiment is enabled
 			const provider = cline.providerRef.deref()
 			const state = await provider?.getState()
@@ -158,6 +161,7 @@ export async function applyDiffToolLegacy(
 				const completeMessage = JSON.stringify({
 					...sharedMessageProps,
 					diff: diffContent,
+					content: unifiedPatch,
 					isProtected: isWriteProtected,
 				} satisfies ClineSayTool)
 
@@ -194,6 +198,7 @@ export async function applyDiffToolLegacy(
 				const completeMessage = JSON.stringify({
 					...sharedMessageProps,
 					diff: diffContent,
+					content: unifiedPatch,
 					isProtected: isWriteProtected,
 				} satisfies ClineSayTool)
 

src/core/tools/multiApplyDiffTool.ts

@@ -282,31 +282,66 @@ Original error: ${errorMessage}`
 				(opResult) => cline.rooProtectedController?.isWriteProtected(opResult.path) || false,
 			)
 
-			// Prepare batch diff data
-			const batchDiffs = operationsToApprove.map((opResult) => {
+			// Stream batch diffs progressively for better UX
+			const batchDiffs: Array<{
+				path: string
+				changeCount: number
+				key: string
+				content: string
+				diffs?: Array<{ content: string; startLine?: number }>
+			}> = []
+
+			for (const opResult of operationsToApprove) {
 				const readablePath = getReadablePath(cline.cwd, opResult.path)
 				const changeCount = opResult.diffItems?.length || 0
 				const changeText = changeCount === 1 ? "1 change" : `${changeCount} changes`
 
-				return {
+				let unified = ""
+				try {
+					const original = await fs.readFile(opResult.absolutePath!, "utf-8")
+					const processed = !cline.api.getModel().id.includes("claude")
+						? (opResult.diffItems || []).map((item) => ({
+								...item,
+								content: item.content ? unescapeHtmlEntities(item.content) : item.content,
+							}))
+						: opResult.diffItems || []
+
+					const applyRes =
+						(await cline.diffStrategy?.applyDiff(original, processed)) ?? ({ success: false } as any)
+					const newContent = applyRes.success && applyRes.content ? applyRes.content : original
+					unified = formatResponse.createPrettyPatch(opResult.path, original, newContent)
+				} catch {
+					unified = ""
+				}
+
+				batchDiffs.push({
 					path: readablePath,
 					changeCount,
 					key: `${readablePath} (${changeText})`,
-					content: opResult.path, // Full relative path
+					content: unified,
 					diffs: opResult.diffItems?.map((item) => ({
 						content: item.content,
 						startLine: item.startLine,
 					})),
-				}
-			})
+				})
+
+				// Send a partial update after each file preview is ready
+				const partialMessage = JSON.stringify({
+					tool: "appliedDiff",
+					batchDiffs,
+					isProtected: hasProtectedFiles,
+				} satisfies ClineSayTool)
+				await cline.ask("tool", partialMessage, true).catch(() => {})
+			}
 
+			// Final approval message (non-partial)
 			const completeMessage = JSON.stringify({
 				tool: "appliedDiff",
 				batchDiffs,
 				isProtected: hasProtectedFiles,
 			} satisfies ClineSayTool)
 
-			const { response, text, images } = await cline.ask("tool", completeMessage, hasProtectedFiles)
+			const { response, text, images } = await cline.ask("tool", completeMessage, false)
 
 			// Process batch response
 			if (response === "yesButtonClicked") {
@@ -418,6 +453,7 @@ Original error: ${errorMessage}`
 
 			try {
 				let originalContent: string | null = await fs.readFile(absolutePath, "utf-8")
+				let beforeContent: string | null = originalContent
 				let successCount = 0
 				let formattedError = ""
 
@@ -540,9 +576,11 @@ ${errorDetails ? `\nTechnical details:\n${errorDetails}\n` : ""}
 				if (operationsToApprove.length === 1) {
 					// Prepare common data for single file operation
 					const diffContents = diffItems.map((item) => item.content).join("\n\n")
+					const unifiedPatch = formatResponse.createPrettyPatch(relPath, beforeContent!, originalContent!)
 					const operationMessage = JSON.stringify({
 						...sharedMessageProps,
 						diff: diffContents,
+						content: unifiedPatch,
 					} satisfies ClineSayTool)
 
 					let toolProgressStatus

webview-ui/src/components/chat/BatchDiffApproval.tsx

@@ -1,6 +1,5 @@
 import React, { memo, useState } from "react"
 import CodeAccordian from "../common/CodeAccordian"
-import { extractUnifiedDiff } from "../../utils/diffUtils"
 
 interface FileDiff {
 	path: string
@@ -57,14 +56,8 @@ export const BatchDiffApproval = memo(({ files = [], ts }: BatchDiffApprovalProp
 		<div className="pt-[5px]">
 			<div className="flex flex-col gap-0 border border-border rounded-md p-1">
 				{files.map((file) => {
-					// Normalize to unified diff and compute stats
-					const rawCombined = file.diffs?.map((d) => d.content).join("\n\n") || file.content
-					const unified = extractUnifiedDiff({
-						toolName: "appliedDiff",
-						path: file.path,
-						diff: rawCombined,
-						content: undefined,
-					})
+					// Use backend-provided unified diff only. No client-side fallback for apply_diff batches.
+					const unified = file.content || ""
 					const stats = computeUnifiedStats(unified)
 
 					return (

webview-ui/src/components/chat/ChatRow.tsx

@@ -397,13 +397,16 @@ export const ChatRowContent = ({
 	// Inline diff stats for edit/apply_diff/insert/search-replace/newFile asks
 	const diffTextForStats = useMemo(() => {
 		if (!tool) return ""
-		// Normalize to unified diff using frontend-only capture/surmise helper
+		// For appliedDiff, backend provides unified diff; do not fallback/normalize
+		if ((tool as any).tool === "appliedDiff") {
+			return ((tool as any).content as string) || ""
+		}
 		return (
 			extractUnifiedDiff({
 				toolName: tool.tool as string,
 				path: tool.path,
-				diff: (tool as any).diff,
-				content: (tool as any).content,
+				diff: (tool as any).content,
+				content: (tool as any).diff,
 			}) || ""
 		)
 	}, [tool])
@@ -415,11 +418,15 @@ export const ChatRowContent = ({
 	// Clean diff content for display (normalize to unified diff)
 	const cleanDiffContent = useMemo(() => {
 		if (!tool) return undefined
+		// For appliedDiff, show backend's unified diff directly
+		if ((tool as any).tool === "appliedDiff") {
+			return ((tool as any).content as string) || undefined
+		}
 		const unified = extractUnifiedDiff({
 			toolName: tool.tool as string,
 			path: tool.path,
-			diff: (tool as any).diff,
-			content: (tool as any).content,
+			diff: (tool as any).content,
+			content: (tool as any).diff,
 		})
 		return unified || undefined
 	}, [tool])

webview-ui/src/components/common/DiffView.tsx

@@ -173,7 +173,8 @@ const DiffView = memo(({ source, filePath }: DiffViewProps) => {
 						{diffLines.map((line, idx) => {
 							// Render compact separator between hunks
 							if (line.type === "gap") {
-								const gapBg = "color-mix(in srgb, var(--vscode-editorGroup-border) 100%, transparent)"
+								// Match the header/container background tone
+								const gapBg = "var(--vscode-editor-background)"
 								return (
 									<tr key={idx}>
 										<td
@@ -217,15 +218,13 @@ const DiffView = memo(({ source, filePath }: DiffViewProps) => {
 										/>
 										<td
 											style={{
-												paddingLeft: "4px",
 												paddingRight: "12px",
 												whiteSpace: "pre-wrap",
 												overflowWrap: "anywhere",
 												wordBreak: "break-word",
 												fontFamily: "var(--vscode-editor-font-family)",
-												color: "var(--vscode-descriptionForeground)",
 												width: "100%",
-												textAlign: "center",
+												textAlign: "left",
 												fontStyle: "italic",
 												backgroundColor: gapBg,
 											}}>