From 57cf9610ba0f6433172d6f6c4b3f5b634454b632 Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Wed, 5 Mar 2025 13:00:27 -0500
Subject: [PATCH] Better UX for choosing between diff strategies

---
 .../components/settings/AdvancedSettings.tsx  | 67 +++++++++++++------
 .../settings/ExperimentalSettings.tsx         |  2 +-
 2 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/webview-ui/src/components/settings/AdvancedSettings.tsx b/webview-ui/src/components/settings/AdvancedSettings.tsx
index bdb8c30b8c..dd5fd44f88 100644
--- a/webview-ui/src/components/settings/AdvancedSettings.tsx
+++ b/webview-ui/src/components/settings/AdvancedSettings.tsx
@@ -2,7 +2,7 @@ import { HTMLAttributes } from "react"
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
 import { Cog } from "lucide-react"
 
-import { EXPERIMENT_IDS, experimentConfigsMap, ExperimentId } from "../../../../src/shared/experiments"
+import { EXPERIMENT_IDS, ExperimentId } from "../../../../src/shared/experiments"
 
 import { cn } from "@/lib/utils"
 
@@ -10,7 +10,6 @@ import { SetCachedStateField, SetExperimentEnabled } from "./types"
 import { sliderLabelStyle } from "./styles"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
-import { ExperimentalFeature } from "./ExperimentalFeature"
 
 type AdvancedSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	rateLimitSeconds: number
@@ -118,8 +117,9 @@ export const AdvancedSettings = ({
 						onChange={(e: any) => {
 							setCachedStateField("diffEnabled", e.target.checked)
 							if (!e.target.checked) {
-								// Reset experimental strategy when diffs are disabled.
+								// Reset both experimental strategies when diffs are disabled.
 								setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, false)
+								setExperimentEnabled(EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE, false)
 							}
 						}}>
 						<span className="font-medium">Enable editing through diffs</span>
@@ -129,17 +129,50 @@ export const AdvancedSettings = ({
 						truncated full-file writes. Works best with the latest Claude 3.7 Sonnet model.
 					</p>
 					{diffEnabled && (
-						<div
-							style={{
-								display: "flex",
-								flexDirection: "column",
-								gap: "5px",
-								marginTop: "10px",
-								marginBottom: "10px",
-								paddingLeft: "10px",
-								borderLeft: "2px solid var(--vscode-button-background)",
-							}}>
-							<span className="font-medium">Match precision</span>
+						<div className="flex flex-col gap-2 mt-3 mb-2 pl-3 border-l-2 border-vscode-button-background">
+							<div className="flex flex-col gap-2">
+								<span className="font-medium">Diff strategy</span>
+								<select
+									value={
+										experiments[EXPERIMENT_IDS.DIFF_STRATEGY]
+											? "unified"
+											: experiments[EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE]
+												? "multiBlock"
+												: "standard"
+									}
+									onChange={(e) => {
+										const value = e.target.value
+										if (value === "standard") {
+											setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, false)
+											setExperimentEnabled(EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE, false)
+										} else if (value === "unified") {
+											setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, true)
+											setExperimentEnabled(EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE, false)
+										} else if (value === "multiBlock") {
+											setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, false)
+											setExperimentEnabled(EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE, true)
+										}
+									}}
+									className="p-2 rounded w-full bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border outline-none focus:border-vscode-focusBorder">
+									<option value="standard">Standard (Single block)</option>
+									<option value="multiBlock">Experimental: Multi-block diff</option>
+									<option value="unified">Experimental: Unified diff</option>
+								</select>
+							</div>
+
+							{/* Description for selected strategy */}
+							<p className="text-vscode-descriptionForeground text-sm mt-1">
+								{!experiments[EXPERIMENT_IDS.DIFF_STRATEGY] &&
+									!experiments[EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE] &&
+									"Standard diff strategy applies changes to a single code block at a time."}
+								{experiments[EXPERIMENT_IDS.DIFF_STRATEGY] &&
+									"Unified diff strategy takes multiple approaches to applying diffs and chooses the best approach."}
+								{experiments[EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE] &&
+									"Multi-block diff strategy allows updating multiple code blocks in a file in one request."}
+							</p>
+
+							{/* Match precision slider */}
+							<span className="font-medium mt-3">Match precision</span>
 							<div className="flex items-center gap-2">
 								<input
 									type="range"
@@ -161,12 +194,6 @@ export const AdvancedSettings = ({
 								values allow more flexible matching but increase the risk of incorrect replacements. Use
 								values below 100% with extreme caution.
 							</p>
-							<ExperimentalFeature
-								key={EXPERIMENT_IDS.DIFF_STRATEGY}
-								{...experimentConfigsMap.DIFF_STRATEGY}
-								enabled={experiments[EXPERIMENT_IDS.DIFF_STRATEGY] ?? false}
-								onChange={(enabled) => setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, enabled)}
-							/>
 						</div>
 					)}
 				</div>
diff --git a/webview-ui/src/components/settings/ExperimentalSettings.tsx b/webview-ui/src/components/settings/ExperimentalSettings.tsx
index bbf473dbd5..bbdfe47e89 100644
--- a/webview-ui/src/components/settings/ExperimentalSettings.tsx
+++ b/webview-ui/src/components/settings/ExperimentalSettings.tsx
@@ -36,7 +36,7 @@ export const ExperimentalSettings = ({
 
 			<Section>
 				{Object.entries(experimentConfigsMap)
-					.filter((config) => config[0] !== "DIFF_STRATEGY")
+					.filter((config) => config[0] !== "DIFF_STRATEGY" && config[0] !== "MULTI_SEARCH_AND_REPLACE")
 					.map((config) => (
 						<ExperimentalFeature
 							key={config[0]}