feat(webview-ui): normalize diffs to unified format and enhance DiffView rendering

Add diffUtils with unified diff normalization:
- extractUnifiedDiff, convertSearchReplaceToUnifiedDiff, convertNewFileToUnifiedDiff

BatchDiffApproval:
- normalize tool output to unified diff via extractUnifiedDiff
- compute unified diff stats
- remove CDATA handling and legacy conversion paths

DiffView:
- add compact gap rows between hunks
- dedicated +/- column
- improved gutter/background and layout tweaks

ChatRow:
- integrate unified diff normalization pipeline

Author: hannesrudolph

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

@@ -1,6 +1,6 @@
 import React, { memo, useState } from "react"
-import { structuredPatch } from "diff"
 import CodeAccordian from "../common/CodeAccordian"
+import { extractUnifiedDiff } from "../../utils/diffUtils"
 
 interface FileDiff {
 	path: string
@@ -18,63 +18,27 @@ 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 {
+/** Compute +/− from a unified diff (ignores headers/hunk lines) */
+function computeUnifiedStats(diff?: string): { added: number; removed: number } | null {
 	if (!diff) return null
-
 	let added = 0
 	let removed = 0
-	let sawPlusMinus = false
-
+	let saw = false
 	for (const line of diff.split("\n")) {
 		if (line.startsWith("+++ ") || line.startsWith("--- ") || line.startsWith("@@")) continue
 		if (line.startsWith("+")) {
 			added++
-			sawPlusMinus = true
+			saw = true
 		} else if (line.startsWith("-")) {
 			removed++
-			sawPlusMinus = true
+			saw = true
 		}
 	}
-
-	if (sawPlusMinus && (added > 0 || removed > 0)) {
-		return { added, removed }
-	}
-
-	return null
+	return saw && (added > 0 || removed > 0) ? { added, removed } : null
 }
 
+/* keep placeholder (legacy) – replaced by computeUnifiedStats after normalization */
+
 export const BatchDiffApproval = memo(({ files = [], ts }: BatchDiffApprovalProps) => {
 	const [expandedFiles, setExpandedFiles] = useState<Record<string, boolean>>({})
 
@@ -93,25 +57,21 @@ 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 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)
+					// 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,
+					})
+					const stats = computeUnifiedStats(unified)
 
 					return (
 						<div key={`${file.path}-${ts}`}>
 							<CodeAccordian
 								path={file.path}
-								code={cleanDiff}
+								code={unified}
 								language="diff"
 								isExpanded={expandedFiles[file.path] || false}
 								onToggleExpand={() => handleToggleExpand(file.path)}

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

@@ -3,7 +3,6 @@ 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"
@@ -25,6 +24,7 @@ import { ReasoningBlock } from "./ReasoningBlock"
 import Thumbnails from "../common/Thumbnails"
 import ImageBlock from "../common/ImageBlock"
 import ErrorRow from "./ErrorRow"
+import { extractUnifiedDiff } from "../../utils/diffUtils"
 
 import McpResourceRow from "../mcp/McpResourceRow"
 
@@ -194,38 +194,6 @@ function convertNewFileToUnifiedDiff(content: string, filePath?: string): string
 	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,
@@ -448,47 +416,31 @@ export const ChatRowContent = ({
 	// 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, "")
+		// Normalize to unified diff using frontend-only capture/surmise helper
+		return (
+			extractUnifiedDiff({
+				toolName: tool.tool as string,
+				path: tool.path,
+				diff: (tool as any).diff,
+				content: (tool as any).content,
+			}) || ""
+		)
 	}, [tool])
 
 	const diffStatsForInline = useMemo(() => {
 		return computeDiffStats(diffTextForStats)
 	}, [diffTextForStats])
 
-	// Clean diff content for display (remove CDATA markers and convert to unified diff)
+	// Clean diff content for display (normalize 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
+		const unified = extractUnifiedDiff({
+			toolName: tool.tool as string,
+			path: tool.path,
+			diff: (tool as any).diff,
+			content: (tool as any).content,
+		})
+		return unified || undefined
 	}, [tool])
 
 	const followUpData = useMemo(() => {