feat: add autoExpandDiffs setting to auto-expand diffs in chat messages

Adds a new boolean setting `autoExpandDiffs` (default: false) that
automatically expands diff views in "Roo wants to edit this file" chat
messages. Diffs are still constrained to max-h-[300px] with scrollbar.

Changes:
- Add autoExpandDiffs to GlobalSettings schema (packages/types)
- Add autoExpandDiffs to ExtensionState type (packages/types)
- Wire setting through ClineProvider state to webview
- Add auto-expand logic in ChatView for diff tool messages
- Add UI toggle in Settings > UI section
- Add English i18n translations
- Update test fixtures

Closes #10955

Author: roomote

packages/types/src/global-settings.ts

@@ -208,6 +208,11 @@ export const globalSettingsSchema = z.object({
 	includeTaskHistoryInEnhance: z.boolean().optional(),
 	historyPreviewCollapsed: z.boolean().optional(),
 	reasoningBlockCollapsed: z.boolean().optional(),
+	/**
+	 * Whether to auto-expand diffs in "Roo wants to edit this file" chat messages.
+	 * @default false
+	 */
+	autoExpandDiffs: z.boolean().optional(),
 	/**
 	 * Controls the keyboard behavior for sending messages in the chat input.
 	 * - "send": Enter sends message, Shift+Enter creates newline (default)

packages/types/src/vscode-extension-host.ts

@@ -328,6 +328,7 @@ export type ExtensionState = Pick<
 	| "openRouterImageGenerationSelectedModel"
 	| "includeTaskHistoryInEnhance"
 	| "reasoningBlockCollapsed"
+	| "autoExpandDiffs"
 	| "enterBehavior"
 	| "includeCurrentTime"
 	| "includeCurrentCost"

src/core/webview/ClineProvider.ts

@@ -2063,6 +2063,7 @@ export class ClineProvider
 			maxTotalImageSize,
 			historyPreviewCollapsed,
 			reasoningBlockCollapsed,
+			autoExpandDiffs,
 			enterBehavior,
 			cloudUserInfo,
 			cloudIsAuthenticated,
@@ -2207,6 +2208,7 @@ export class ClineProvider
 			hasSystemPromptOverride,
 			historyPreviewCollapsed: historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: reasoningBlockCollapsed ?? true,
+			autoExpandDiffs: autoExpandDiffs ?? false,
 			enterBehavior: enterBehavior ?? "send",
 			cloudUserInfo,
 			cloudIsAuthenticated: cloudIsAuthenticated ?? false,
@@ -2445,6 +2447,7 @@ export class ClineProvider
 			maxTotalImageSize: stateValues.maxTotalImageSize ?? 20,
 			historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: stateValues.reasoningBlockCollapsed ?? true,
+			autoExpandDiffs: stateValues.autoExpandDiffs ?? false,
 			enterBehavior: stateValues.enterBehavior ?? "send",
 			cloudUserInfo,
 			cloudIsAuthenticated,

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

@@ -97,6 +97,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		messageQueue = [],
 		isBrowserSessionActive,
 		showWorktreesInHomeScreen,
+		autoExpandDiffs,
 	} = useExtensionState()
 
 	const messagesRef = useRef(messages)
@@ -527,6 +528,43 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		prevExpandedRowsRef.current = expandedRows // Store current state for next comparison
 	}, [expandedRows])
 
+	// Auto-expand diff rows when autoExpandDiffs setting is enabled
+	const DIFF_TOOL_TYPES = useMemo(
+		() => new Set(["editedExistingFile", "appliedDiff", "insertContent", "searchAndReplace", "newFileCreated"]),
+		[],
+	)
+
+	useEffect(() => {
+		if (!autoExpandDiffs) {
+			return
+		}
+
+		const newExpansions: Record<number, boolean> = {}
+
+		for (const msg of modifiedMessages) {
+			// Skip messages already tracked in expandedRows
+			if (expandedRows[msg.ts] !== undefined) {
+				continue
+			}
+
+			// Check if this message contains a diff tool
+			if (msg.text) {
+				try {
+					const tool = JSON.parse(msg.text)
+					if (tool.tool && DIFF_TOOL_TYPES.has(tool.tool)) {
+						newExpansions[msg.ts] = true
+					}
+				} catch {
+					// Not valid JSON, skip
+				}
+			}
+		}
+
+		if (Object.keys(newExpansions).length > 0) {
+			setExpandedRows((prev) => ({ ...prev, ...newExpansions }))
+		}
+	}, [modifiedMessages, autoExpandDiffs, expandedRows, DIFF_TOOL_TYPES])
+
 	const isStreaming = useMemo(() => {
 		// Checking clineAsk isn't enough since messages effect may be called
 		// again for a tool for example, set clineAsk to its value, and if the

webview-ui/src/components/settings/SettingsView.tsx

@@ -208,6 +208,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		openRouterImageApiKey,
 		openRouterImageGenerationSelectedModel,
 		reasoningBlockCollapsed,
+		autoExpandDiffs,
 		enterBehavior,
 		includeCurrentTime,
 		includeCurrentCost,
@@ -414,6 +415,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 					followupAutoApproveTimeoutMs,
 					includeTaskHistoryInEnhance: includeTaskHistoryInEnhance ?? true,
 					reasoningBlockCollapsed: reasoningBlockCollapsed ?? true,
+					autoExpandDiffs: autoExpandDiffs ?? false,
 					enterBehavior: enterBehavior ?? "send",
 					includeCurrentTime: includeCurrentTime ?? true,
 					includeCurrentCost: includeCurrentCost ?? true,
@@ -907,6 +909,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 						{renderTab === "ui" && (
 							<UISettings
 								reasoningBlockCollapsed={reasoningBlockCollapsed ?? true}
+								autoExpandDiffs={autoExpandDiffs ?? false}
 								enterBehavior={enterBehavior ?? "send"}
 								setCachedStateField={setCachedStateField}
 							/>

webview-ui/src/components/settings/UISettings.tsx

@@ -11,12 +11,14 @@ import { ExtensionStateContextType } from "@/context/ExtensionStateContext"
 
 interface UISettingsProps extends HTMLAttributes<HTMLDivElement> {
 	reasoningBlockCollapsed: boolean
+	autoExpandDiffs: boolean
 	enterBehavior: "send" | "newline"
 	setCachedStateField: SetCachedStateField<keyof ExtensionStateContextType>
 }
 
 export const UISettings = ({
 	reasoningBlockCollapsed,
+	autoExpandDiffs,
 	enterBehavior,
 	setCachedStateField,
 	...props
@@ -38,6 +40,10 @@ export const UISettings = ({
 		})
 	}
 
+	const handleAutoExpandDiffsChange = (value: boolean) => {
+		setCachedStateField("autoExpandDiffs", value)
+	}
+
 	const handleEnterBehaviorChange = (requireCtrlEnter: boolean) => {
 		const newBehavior = requireCtrlEnter ? "newline" : "send"
 		setCachedStateField("enterBehavior", newBehavior)
@@ -72,6 +78,24 @@ export const UISettings = ({
 						</div>
 					</SearchableSetting>
 
+					{/* Auto-Expand Diffs Setting */}
+					<SearchableSetting
+						settingId="ui-auto-expand-diffs"
+						section="ui"
+						label={t("settings:ui.autoExpandDiffs.label")}>
+						<div className="flex flex-col gap-1">
+							<VSCodeCheckbox
+								checked={autoExpandDiffs}
+								onChange={(e: any) => handleAutoExpandDiffsChange(e.target.checked)}
+								data-testid="auto-expand-diffs-checkbox">
+								<span className="font-medium">{t("settings:ui.autoExpandDiffs.label")}</span>
+							</VSCodeCheckbox>
+							<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
+								{t("settings:ui.autoExpandDiffs.description")}
+							</div>
+						</div>
+					</SearchableSetting>
+
 					{/* Enter Key Behavior Setting */}
 					<SearchableSetting
 						settingId="ui-enter-behavior"

webview-ui/src/components/settings/__tests__/SettingsView.change-detection.spec.tsx

@@ -260,6 +260,7 @@ describe("SettingsView - Change Detection Fix", () => {
 		openRouterImageApiKey: undefined,
 		openRouterImageGenerationSelectedModel: undefined,
 		reasoningBlockCollapsed: true,
+		autoExpandDiffs: false,
 		...overrides,
 	})
 

webview-ui/src/components/settings/__tests__/SettingsView.unsaved-changes.spec.tsx

@@ -265,6 +265,7 @@ describe("SettingsView - Unsaved Changes Detection", () => {
 		openRouterImageApiKey: undefined,
 		openRouterImageGenerationSelectedModel: undefined,
 		reasoningBlockCollapsed: true,
+		autoExpandDiffs: false,
 	}
 
 	beforeEach(() => {

webview-ui/src/components/settings/__tests__/UISettings.spec.tsx

@@ -5,6 +5,7 @@ import { UISettings } from "../UISettings"
 describe("UISettings", () => {
 	const defaultProps = {
 		reasoningBlockCollapsed: false,
+		autoExpandDiffs: false,
 		enterBehavior: "send" as const,
 		setCachedStateField: vi.fn(),
 	}

webview-ui/src/context/ExtensionStateContext.tsx

@@ -237,6 +237,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		terminalZdotdir: false, // Default ZDOTDIR handling setting
 		historyPreviewCollapsed: false, // Initialize the new state (default to expanded)
 		reasoningBlockCollapsed: true, // Default to collapsed
+		autoExpandDiffs: false, // Default to collapsed diffs
 		enterBehavior: "send", // Default: Enter sends, Shift+Enter creates newline
 		cloudUserInfo: null,
 		cloudIsAuthenticated: false,
@@ -480,6 +481,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 	const contextValue: ExtensionStateContextType = {
 		...state,
 		reasoningBlockCollapsed: state.reasoningBlockCollapsed ?? true,
+		autoExpandDiffs: state.autoExpandDiffs ?? false,
 		didHydrateState,
 		showWelcome,
 		theme,