Use diff to find first changed block

src/ClaudeDev.ts

@@ -847,26 +847,21 @@ export class ClaudeDev {
 			// Apply the edit, but without saving so this doesnt trigger a local save in timeline history
 			await vscode.workspace.applyEdit(edit) // has the added benefit of maintaing the file's original EOLs
 
-			// Find the first position where the content differs and scroll to the first changed line if found
-			let firstDiffPosition: vscode.Position | undefined
-			const originalLines = originalContent.split("\n")
-			const newLines = newContent.split("\n")
-			for (let i = 0; i < Math.max(originalLines.length, newLines.length); i++) {
-				if (i < originalLines.length && i < newLines.length) {
-					if (originalLines[i] !== newLines[i]) {
-						firstDiffPosition = new vscode.Position(i, 0)
-						break
-					}
-				} else {
-					firstDiffPosition = new vscode.Position(i, 0)
+			// Find the first range where the content differs and scroll to it
+			const diffResult = diff.diffLines(originalContent, newContent)
+			for (let i = 0, lineCount = 0; i < diffResult.length; i++) {
+				const part = diffResult[i]
+				if (part.added || part.removed) {
+					const startLine = lineCount + 1
+					const endLine = lineCount + (part.count || 0)
+					vscode.window.activeTextEditor?.revealRange(
+						// + 3 to move the editor up slightly as this looks better
+						new vscode.Range(new vscode.Position(startLine, 0), new vscode.Position(endLine + 3, 0)),
+						vscode.TextEditorRevealType.InCenter
+					)
 					break
 				}
-			}
-			if (firstDiffPosition) {
-				vscode.window.activeTextEditor?.revealRange(
-					new vscode.Range(firstDiffPosition, firstDiffPosition),
-					vscode.TextEditorRevealType.InCenter
-				)
+				lineCount += part.count || 0
 			}
 
 			// remove cursor from the document

webview-ui/src/components/ChatView.tsx

@@ -607,7 +607,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 						// borderLeft: "9px solid transparent", // NOTE: react-textarea-autosize doesn't calculate correct height when using borderLeft/borderRight so we need to use horizontal padding instead
 						// Instead of using boxShadow, we use a div with a border to better replicate the behavior when the textarea is focused
 						// boxShadow: "0px 0px 0px 1px var(--vscode-input-border)",
-						padding: "0 50px 0 9px",
+						padding: "0 53px 0 9px",
 						cursor: textAreaDisabled ? "not-allowed" : undefined,
 						flex: 1,
 					}}