feat(chat): Improve diff appearance in main chat view

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

src/core/tools/writeToFileTool.ts

@@ -173,6 +173,15 @@ export async function writeToFileTool(
 
 			if (isPreventFocusDisruptionEnabled) {
 				// Direct file write without diff view
+				// Set up diffViewProvider properties needed for diff generation and saveDirectly
+				cline.diffViewProvider.editType = fileExists ? "modify" : "create"
+				if (fileExists) {
+					const absolutePath = path.resolve(cline.cwd, relPath)
+					cline.diffViewProvider.originalContent = await fs.readFile(absolutePath, "utf-8")
+				} else {
+					cline.diffViewProvider.originalContent = ""
+				}
+
 				// Check for code omissions before proceeding
 				if (detectCodeOmission(cline.diffViewProvider.originalContent || "", newContent, predictedLineCount)) {
 					if (cline.diffStrategy) {
@@ -204,7 +213,10 @@ export async function writeToFileTool(
 
 				const completeMessage = JSON.stringify({
 					...sharedMessageProps,
-					content: newContent,
+					content: fileExists ? undefined : newContent,
+					diff: fileExists
+						? formatResponse.createPrettyPatch(relPath, cline.diffViewProvider.originalContent, newContent)
+						: undefined,
 				} satisfies ClineSayTool)
 
 				const didApprove = await askApproval("tool", completeMessage, undefined, isWriteProtected)
@@ -213,15 +225,6 @@ export async function writeToFileTool(
 					return
 				}
 
-				// Set up diffViewProvider properties needed for saveDirectly
-				cline.diffViewProvider.editType = fileExists ? "modify" : "create"
-				if (fileExists) {
-					const absolutePath = path.resolve(cline.cwd, relPath)
-					cline.diffViewProvider.originalContent = await fs.readFile(absolutePath, "utf-8")
-				} else {
-					cline.diffViewProvider.originalContent = ""
-				}
-
 				// Save directly without showing diff view or opening the file
 				await cline.diffViewProvider.saveDirectly(relPath, newContent, false, diagnosticsEnabled, writeDelayMs)
 			} else {

webview-ui/package.json

@@ -41,6 +41,7 @@
 		"cmdk": "^1.0.0",
 		"date-fns": "^4.1.0",
 		"debounce": "^2.1.1",
+		"diff": "^5.2.0",
 		"fast-deep-equal": "^3.1.3",
 		"fzf": "^0.5.2",
 		"hast-util-to-jsx-runtime": "^2.3.6",
@@ -87,6 +88,7 @@
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/react": "^16.2.0",
 		"@testing-library/user-event": "^14.6.1",
+		"@types/diff": "^5.2.1",
 		"@types/jest": "^29.0.0",
 		"@types/katex": "^0.16.7",
 		"@types/node": "20.x",

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

@@ -1,5 +1,6 @@
 import React, { memo, useState } from "react"
 import CodeAccordian from "../common/CodeAccordian"
+import { computeUnifiedDiffStats } from "../../utils/diffStats"
 
 interface FileDiff {
 	path: string
@@ -35,17 +36,19 @@ 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) => {
-					// Combine all diffs into a single diff string for this file
-					const combinedDiff = file.diffs?.map((diff) => diff.content).join("\n\n") || file.content
+					// Use backend-provided unified diff only. No client-side fallback for apply_diff batches.
+					const unified = file.content || ""
+					const stats = computeUnifiedDiffStats(unified)
 
 					return (
 						<div key={`${file.path}-${ts}`}>
 							<CodeAccordian
 								path={file.path}
-								code={combinedDiff}
+								code={unified}
 								language="diff"
 								isExpanded={expandedFiles[file.path] || false}
 								onToggleExpand={() => handleToggleExpand(file.path)}
+								diffStats={stats ?? undefined}
 							/>
 						</div>
 					)

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

@@ -15,7 +15,6 @@ import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { findMatchingResourceOrTemplate } from "@src/utils/mcp"
 import { vscode } from "@src/utils/vscode"
 import { removeLeadingNonAlphanumeric } from "@src/utils/removeLeadingNonAlphanumeric"
-import { getLanguageFromPath } from "@src/utils/getLanguageFromPath"
 
 import { ToolUseBlock, ToolUseBlockHeader } from "../common/ToolUseBlock"
 import UpdateTodoListToolBlock from "./UpdateTodoListToolBlock"
@@ -25,6 +24,8 @@ import { ReasoningBlock } from "./ReasoningBlock"
 import Thumbnails from "../common/Thumbnails"
 import ImageBlock from "../common/ImageBlock"
 import ErrorRow from "./ErrorRow"
+import { extractUnifiedDiff } from "../../utils/diffUtils"
+import { computeDiffStats } from "../../utils/diffStats"
 
 import McpResourceRow from "../mcp/McpResourceRow"
 
@@ -335,6 +336,35 @@ export const ChatRowContent = ({
 		[message.ask, message.text],
 	)
 
+	// Inline diff stats for edit/apply_diff/insert/search-replace/newFile asks
+	const diffTextForStats = useMemo(() => {
+		if (!tool) return ""
+		return (
+			extractUnifiedDiff({
+				toolName: tool.tool as string,
+				path: tool.path,
+				diff: (tool as any).content ?? (tool as any).diff,
+				content: (tool as any).diff,
+			}) || ""
+		)
+	}, [tool])
+
+	const diffStatsForInline = useMemo(() => {
+		return computeDiffStats(diffTextForStats)
+	}, [diffTextForStats])
+
+	// Clean diff content for display (normalize to unified diff)
+	const cleanDiffContent = useMemo(() => {
+		if (!tool) return undefined
+		const unified = extractUnifiedDiff({
+			toolName: tool.tool as string,
+			path: tool.path,
+			diff: (tool as any).content ?? (tool as any).diff,
+			content: (tool as any).diff,
+		})
+		return unified || undefined
+	}, [tool])
+
 	const followUpData = useMemo(() => {
 		if (message.type === "ask" && message.ask === "followup" && !message.partial) {
 			return safeJsonParse<FollowUpData>(message.text)
@@ -349,7 +379,7 @@ export const ChatRowContent = ({
 				style={{ color: "var(--vscode-foreground)", marginBottom: "-1.5px" }}></span>
 		)
 
-		switch (tool.tool) {
+		switch (tool.tool as string) {
 			case "editedExistingFile":
 			case "appliedDiff":
 				// Check if this is a batch diff request
@@ -390,12 +420,13 @@ export const ChatRowContent = ({
 						<div className="pl-6">
 							<CodeAccordian
 								path={tool.path}
-								code={tool.content ?? tool.diff}
+								code={cleanDiffContent ?? tool.content ?? tool.diff}
 								language="diff"
 								progressStatus={message.progressStatus}
 								isLoading={message.partial}
 								isExpanded={isExpanded}
 								onToggleExpand={handleToggleExpand}
+								diffStats={diffStatsForInline ?? undefined}
 							/>
 						</div>
 					</>
@@ -427,12 +458,47 @@ export const ChatRowContent = ({
 						<div className="pl-6">
 							<CodeAccordian
 								path={tool.path}
-								code={tool.diff}
+								code={cleanDiffContent ?? tool.diff}
 								language="diff"
 								progressStatus={message.progressStatus}
 								isLoading={message.partial}
 								isExpanded={isExpanded}
 								onToggleExpand={handleToggleExpand}
+								diffStats={diffStatsForInline ?? undefined}
+							/>
+						</div>
+					</>
+				)
+			case "searchAndReplace":
+				return (
+					<>
+						<div style={headerStyle}>
+							{tool.isProtected ? (
+								<span
+									className="codicon codicon-lock"
+									style={{ color: "var(--vscode-editorWarning-foreground)", marginBottom: "-1.5px" }}
+								/>
+							) : (
+								toolIcon("replace")
+							)}
+							<span style={{ fontWeight: "bold" }}>
+								{tool.isProtected && message.type === "ask"
+									? t("chat:fileOperations.wantsToEditProtected")
+									: message.type === "ask"
+										? t("chat:fileOperations.wantsToSearchReplace")
+										: t("chat:fileOperations.didSearchReplace")}
+							</span>
+						</div>
+						<div className="pl-6">
+							<CodeAccordian
+								path={tool.path}
+								code={cleanDiffContent ?? tool.diff}
+								language="diff"
+								progressStatus={message.progressStatus}
+								isLoading={message.partial}
+								isExpanded={isExpanded}
+								onToggleExpand={handleToggleExpand}
+								diffStats={diffStatsForInline ?? undefined}
 							/>
 						</div>
 					</>
@@ -495,12 +561,13 @@ export const ChatRowContent = ({
 						<div className="pl-6">
 							<CodeAccordian
 								path={tool.path}
-								code={tool.content}
-								language={getLanguageFromPath(tool.path || "") || "log"}
+								code={cleanDiffContent ?? ""}
+								language="diff"
 								isLoading={message.partial}
 								isExpanded={isExpanded}
 								onToggleExpand={handleToggleExpand}
 								onJumpToFile={() => vscode.postMessage({ type: "openFile", text: "./" + tool.path })}
+								diffStats={diffStatsForInline ?? undefined}
 							/>
 						</div>
 					</>

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

@@ -466,7 +466,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	}, [messages.length])
 
 	useEffect(() => {
-		// Reset UI states
+		// Reset UI states only when task changes
 		setExpandedRows({})
 		everVisibleMessagesTsRef.current.clear() // Clear for new task
 		setCurrentFollowUpTs(null) // Clear follow-up answered state for new task