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

- Add DiffView with line numbers, +/- column, wrapping
- Show inline +/− counts in headers
- Convert SEARCH/REPLACE to unified diffs
- Remove Undo mechanism (UI/backend)
- Update tests and deps (diff, @types/diff)

Author: hannesrudolph

pnpm-lock.yaml

@@ -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/package.json

@@ -1,4 +1,5 @@
 import React, { memo, useState } from "react"
+import { structuredPatch } from "diff"
 import CodeAccordian from "../common/CodeAccordian"
 
 interface FileDiff {
@@ -17,6 +18,63 @@ interface BatchDiffApprovalProps {
 	ts: number
 }
 
+/**
+ * Converts Roo's SEARCH/REPLACE format to unified diff format for better readability
+ */
+function convertSearchReplaceToUnifiedDiff(content: string, filePath?: string): string {
+	const blockRegex =
+		/<<<<<<?\s*SEARCH[\s\S]*?(?:^:start_line:.*\n)?(?:^:end_line:.*\n)?(?:^-------\s*\n)?([\s\S]*?)^(?:=======\s*\n)([\s\S]*?)^(?:>>>>>>> REPLACE)/gim
+
+	let hasBlocks = false
+	let combinedDiff = ""
+	const fileName = filePath || "file"
+
+	let match: RegExpExecArray | null
+	while ((match = blockRegex.exec(content)) !== null) {
+		hasBlocks = true
+		const searchContent = (match[1] ?? "").replace(/\n$/, "") // Remove trailing newline
+		const replaceContent = (match[2] ?? "").replace(/\n$/, "")
+
+		// Use the diff library to create a proper unified diff
+		const patch = structuredPatch(fileName, fileName, searchContent, replaceContent, "", "", { context: 3 })
+
+		// Convert to unified diff format
+		if (patch.hunks.length > 0) {
+			for (const hunk of patch.hunks) {
+				combinedDiff += `@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@\n`
+				combinedDiff += hunk.lines.join("\n") + "\n"
+			}
+		}
+	}
+
+	return hasBlocks ? combinedDiff : content
+}
+
+function computeDiffStats(diff?: string): { added: number; removed: number } | null {
+	if (!diff) return null
+
+	let added = 0
+	let removed = 0
+	let sawPlusMinus = false
+
+	for (const line of diff.split("\n")) {
+		if (line.startsWith("+++ ") || line.startsWith("--- ") || line.startsWith("@@")) continue
+		if (line.startsWith("+")) {
+			added++
+			sawPlusMinus = true
+		} else if (line.startsWith("-")) {
+			removed++
+			sawPlusMinus = true
+		}
+	}
+
+	if (sawPlusMinus && (added > 0 || removed > 0)) {
+		return { added, removed }
+	}
+
+	return null
+}
+
 export const BatchDiffApproval = memo(({ files = [], ts }: BatchDiffApprovalProps) => {
 	const [expandedFiles, setExpandedFiles] = useState<Record<string, boolean>>({})
 
@@ -36,16 +94,28 @@ export const BatchDiffApproval = memo(({ files = [], ts }: BatchDiffApprovalProp
 			<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
+					const rawCombinedDiff = file.diffs?.map((diff) => diff.content).join("\n\n") || file.content
+
+					// Remove CDATA markers
+					const withoutCData = rawCombinedDiff.replace(/<!\[CDATA\[/g, "").replace(/\]\]>/g, "")
+
+					// Convert SEARCH/REPLACE to unified diff if needed
+					const cleanDiff = /<<<<<<<?\s*SEARCH/i.test(withoutCData)
+						? convertSearchReplaceToUnifiedDiff(withoutCData, file.path)
+						: withoutCData
+
+					// Compute stats for display
+					const stats = computeDiffStats(cleanDiff)
 
 					return (
 						<div key={`${file.path}-${ts}`}>
 							<CodeAccordian
 								path={file.path}
-								code={combinedDiff}
+								code={cleanDiff}
 								language="diff"
 								isExpanded={expandedFiles[file.path] || false}
 								onToggleExpand={() => handleToggleExpand(file.path)}
+								diffStats={stats ?? undefined}
 							/>
 						</div>
 					)

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

@@ -3,6 +3,7 @@ import { useSize } from "react-use"
 import { useTranslation, Trans } from "react-i18next"
 import deepEqual from "fast-deep-equal"
 import { VSCodeBadge } from "@vscode/webview-ui-toolkit/react"
+import { structuredPatch } from "diff"
 
 import type { ClineMessage, FollowUpData, SuggestionItem } from "@roo-code/types"
 import { Mode } from "@roo/modes"
@@ -15,7 +16,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"
@@ -115,6 +115,116 @@ const ChatRow = memo(
 
 export default ChatRow
 
+function computeDiffStats(diff?: string): { added: number; removed: number } | null {
+	if (!diff) return null
+
+	// Strategy 1: Unified diff (+/- lines)
+	let added = 0
+	let removed = 0
+	let sawPlusMinus = false
+	for (const line of diff.split("\n")) {
+		if (line.startsWith("+++ ") || line.startsWith("--- ") || line.startsWith("@@")) continue
+		if (line.startsWith("+")) {
+			added++
+			sawPlusMinus = true
+		} else if (line.startsWith("-")) {
+			removed++
+			sawPlusMinus = true
+		}
+	}
+	if (sawPlusMinus) {
+		if (added === 0 && removed === 0) return null
+		return { added, removed }
+	}
+
+	// Strategy 2: Roo multi-search-replace blocks
+	// Count lines in SEARCH vs REPLACE sections across all blocks
+	// Matches optional metadata lines and optional '-------' line
+	const blockRegex =
+		/<<<<<<?\s*SEARCH[\s\S]*?(?:^:start_line:.*\n)?(?:^:end_line:.*\n)?(?:^-------\s*\n)?([\s\S]*?)^(?:=======\s*\n)([\s\S]*?)^(?:>>>>>>> REPLACE)/gim
+
+	let hasBlocks = false
+	added = 0
+	removed = 0
+
+	const asLines = (s: string) => {
+		// Normalize Windows newlines and trim trailing newline so counts reflect real lines
+		const norm = s.replace(/\r\n/g, "\n")
+		if (norm === "") return 0
+		// Split, drop potential trailing empty caused by final newline
+		const parts = norm.split("\n")
+		return parts[parts.length - 1] === "" ? parts.length - 1 : parts.length
+	}
+
+	let match: RegExpExecArray | null
+	while ((match = blockRegex.exec(diff)) !== null) {
+		hasBlocks = true
+		const searchContent = match[1] ?? ""
+		const replaceContent = match[2] ?? ""
+		const searchCount = asLines(searchContent)
+		const replaceCount = asLines(replaceContent)
+		if (replaceCount > searchCount) added += replaceCount - searchCount
+		else if (searchCount > replaceCount) removed += searchCount - replaceCount
+	}
+
+	if (hasBlocks) {
+		if (added === 0 && removed === 0) return null
+		return { added, removed }
+	}
+
+	return null
+}
+
+/**
+ * Converts new file content to unified diff format (all lines as additions)
+ */
+function convertNewFileToUnifiedDiff(content: string, filePath?: string): string {
+	const fileName = filePath || "file"
+	const lines = content.split("\n")
+
+	let diff = `--- /dev/null\n`
+	diff += `+++ ${fileName}\n`
+	diff += `@@ -0,0 +1,${lines.length} @@\n`
+
+	for (const line of lines) {
+		diff += `+${line}\n`
+	}
+
+	return diff
+}
+
+/**
+ * Converts Roo's SEARCH/REPLACE format to unified diff format for better readability
+ */
+function convertSearchReplaceToUnifiedDiff(content: string, filePath?: string): string {
+	const blockRegex =
+		/<<<<<<?\s*SEARCH[\s\S]*?(?:^:start_line:.*\n)?(?:^:end_line:.*\n)?(?:^-------\s*\n)?([\s\S]*?)^(?:=======\s*\n)([\s\S]*?)^(?:>>>>>>> REPLACE)/gim
+
+	let hasBlocks = false
+	let combinedDiff = ""
+	const fileName = filePath || "file"
+
+	let match: RegExpExecArray | null
+	while ((match = blockRegex.exec(content)) !== null) {
+		hasBlocks = true
+		const searchContent = (match[1] ?? "").replace(/\n$/, "") // Remove trailing newline
+		const replaceContent = (match[2] ?? "").replace(/\n$/, "")
+
+		// Use the diff library to create a proper unified diff
+		const patch = structuredPatch(fileName, fileName, searchContent, replaceContent, "", "", { context: 3 })
+
+		// Convert to unified diff format
+		if (patch.hunks.length > 0) {
+			for (const hunk of patch.hunks) {
+				combinedDiff += `@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@\n`
+				combinedDiff += hunk.lines.join("\n") + "\n"
+			}
+		}
+	}
+
+	return hasBlocks ? combinedDiff : content
+}
+
 export const ChatRowContent = ({
 	message,
 	lastModifiedMessage,
@@ -334,6 +444,59 @@ 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 ""
+		let content = ""
+		switch (tool.tool) {
+			case "editedExistingFile":
+			case "appliedDiff":
+				content = (tool.content ?? tool.diff) || ""
+				break
+			case "insertContent":
+			case "searchAndReplace":
+				content = tool.diff || ""
+				break
+			case "newFileCreated":
+				// For new files, convert to unified diff format
+				const newFileContent = tool.content || ""
+				content = convertNewFileToUnifiedDiff(newFileContent, tool.path)
+				break
+			default:
+				return ""
+		}
+		// Strip CDATA markers for proper parsing
+		return content.replace(/<!\[CDATA\[/g, "").replace(/\]\]>/g, "")
+	}, [tool])
+
+	const diffStatsForInline = useMemo(() => {
+		if (tool?.tool === "newFileCreated") {
+			// For new files, count all lines as additions
+			const content = diffTextForStats
+			if (!content) return null
+			const lines = content.split("\n").length
+			return { added: lines, removed: 0 }
+		}
+		return computeDiffStats(diffTextForStats)
+	}, [diffTextForStats, tool])
+
+	// Clean diff content for display (remove CDATA markers and convert to unified diff)
+	const cleanDiffContent = useMemo(() => {
+		if (!tool) return undefined
+		const raw = (tool as any).content ?? (tool as any).diff
+		if (!raw) return undefined
+
+		// Remove CDATA markers
+		const withoutCData = raw.replace(/<!\[CDATA\[/g, "").replace(/\]\]>/g, "")
+
+		// Check if it's SEARCH/REPLACE format and convert to unified diff
+		if (/<<<<<<<?\s*SEARCH/i.test(withoutCData)) {
+			return convertSearchReplaceToUnifiedDiff(withoutCData, tool.path)
+		}
+
+		return withoutCData
+	}, [tool])
+
 	const followUpData = useMemo(() => {
 		if (message.type === "ask" && message.ask === "followup" && !message.partial) {
 			return safeJsonParse<FollowUpData>(message.text)
@@ -389,12 +552,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>
 					</>
@@ -426,12 +590,13 @@ 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>
 					</>
@@ -459,12 +624,13 @@ 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>
 					</>
@@ -527,12 +693,13 @@ export const ChatRowContent = ({
 						<div className="pl-6">
 							<CodeAccordian
 								path={tool.path}
-								code={tool.content}
-								language={getLanguageFromPath(tool.path || "") || "log"}
+								code={convertNewFileToUnifiedDiff(tool.content || "", tool.path)}
+								language="diff"
 								isLoading={message.partial}
 								isExpanded={isExpanded}
 								onToggleExpand={handleToggleExpand}
 								onJumpToFile={() => vscode.postMessage({ type: "openFile", text: "./" + tool.path })}
+								diffStats={diffStatsForInline ?? undefined}
 							/>
 						</div>
 					</>