feat: implement experimental features system

- Add experiments.ts to manage experimental features
- Refactor experimental diff strategy into experiments system
- Add UI components for managing experimental features
- Add tests for experimental tools
- Update system prompts to handle experiments

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

@@ -0,0 +1,37 @@
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+
+interface ExperimentalFeatureProps {
+	id: string
+	name: string
+	description: string
+	enabled: boolean
+	onChange: (value: boolean) => void
+}
+
+const ExperimentalFeature = ({ id, name, description, enabled, onChange }: ExperimentalFeatureProps) => {
+	return (
+		<div
+			style={{
+				marginTop: 10,
+				paddingLeft: 10,
+				borderLeft: "2px solid var(--vscode-button-background)",
+			}}>
+			<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+				<span style={{ color: "var(--vscode-errorForeground)" }}>⚠️</span>
+				<VSCodeCheckbox checked={enabled} onChange={(e: any) => onChange(e.target.checked)}>
+					<span style={{ fontWeight: "500" }}>{name}</span>
+				</VSCodeCheckbox>
+			</div>
+			<p
+				style={{
+					fontSize: "12px",
+					marginBottom: 15,
+					color: "var(--vscode-descriptionForeground)",
+				}}>
+				{description}
+			</p>
+		</div>
+	)
+}
+
+export default ExperimentalFeature

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

@@ -4,6 +4,8 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
 import { validateApiConfiguration, validateModelId } from "../../utils/validate"
 import { vscode } from "../../utils/vscode"
 import ApiOptions from "./ApiOptions"
+import ExperimentalFeature from "./ExperimentalFeature"
+import { experimentConfigs, EXPERIMENT_IDS, experimentConfigsMap } from "../../../../src/shared/experiments"
 import ApiConfigManager from "./ApiConfigManager"
 
 type SettingsViewProps = {
@@ -51,8 +53,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		setRequestDelaySeconds,
 		currentApiConfigName,
 		listApiConfigMeta,
-		experimentalDiffStrategy,
-		setExperimentalDiffStrategy,
+		experiments,
+		setExperimentEnabled,
 		alwaysAllowModeSwitch,
 		setAlwaysAllowModeSwitch,
 	} = useExtensionState()
@@ -94,7 +96,12 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 				text: currentApiConfigName,
 				apiConfiguration,
 			})
-			vscode.postMessage({ type: "experimentalDiffStrategy", bool: experimentalDiffStrategy })
+
+			vscode.postMessage({
+				type: "updateExperimental",
+				values: experiments,
+			})
+
 			vscode.postMessage({ type: "alwaysAllowModeSwitch", bool: alwaysAllowModeSwitch })
 			onDone()
 		}
@@ -583,7 +590,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 								setDiffEnabled(e.target.checked)
 								if (!e.target.checked) {
 									// Reset experimental strategy when diffs are disabled
-									setExperimentalDiffStrategy(false)
+									setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, false)
 								}
 							}}>
 							<span style={{ fontWeight: "500" }}>Enable editing through diffs</span>
@@ -599,35 +606,14 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 						</p>
 
 						{diffEnabled && (
-							<div
-								style={{
-									marginTop: 10,
-									paddingLeft: 10,
-									borderLeft: "2px solid var(--vscode-button-background)",
-								}}>
-								<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
-									<span style={{ color: "var(--vscode-errorForeground)" }}>⚠️</span>
-									<VSCodeCheckbox
-										checked={experimentalDiffStrategy}
-										onChange={(e: any) => setExperimentalDiffStrategy(e.target.checked)}>
-										<span style={{ fontWeight: "500" }}>
-											Use experimental unified diff strategy
-										</span>
-									</VSCodeCheckbox>
-								</div>
-								<p
-									style={{
-										fontSize: "12px",
-										marginBottom: 15,
-										color: "var(--vscode-descriptionForeground)",
-									}}>
-									Enable the experimental unified diff strategy. This strategy might reduce the number
-									of retries caused by model errors but may cause unexpected behavior or incorrect
-									edits. Only enable if you understand the risks and are willing to carefully review
-									all changes.
-								</p>
-
-								<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+							<div style={{ marginTop: 10 }}>
+								<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 style={{ display: "flex", alignItems: "center", gap: "5px", marginTop: "15px" }}>
 									<span style={{ fontWeight: "500", minWidth: "100px" }}>Match precision</span>
 									<input
 										type="range"
@@ -660,6 +646,16 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 								</p>
 							</div>
 						)}
+						{experimentConfigs
+							.filter((config) => config.id !== EXPERIMENT_IDS.DIFF_STRATEGY)
+							.map((config) => (
+								<ExperimentalFeature
+									key={config.id}
+									{...config}
+									enabled={experiments[config.id] ?? false}
+									onChange={(enabled) => setExperimentEnabled(config.id, enabled)}
+								/>
+							))}
 					</div>
 				</div>
 

webview-ui/src/context/ExtensionStateContext.tsx

@@ -16,6 +16,7 @@ import { McpServer } from "../../../src/shared/mcp"
 import { checkExistKey } from "../../../src/shared/checkExistApiConfig"
 import { Mode, CustomModePrompts, defaultModeSlug, defaultPrompts, ModeConfig } from "../../../src/shared/modes"
 import { CustomSupportPrompts } from "../../../src/shared/support-prompt"
+import { EXPERIMENT_IDS, experimentDefault } from "../../../src/shared/experiments"
 
 export interface ExtensionStateContextType extends ExtensionState {
 	didHydrateState: boolean
@@ -63,9 +64,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setCustomSupportPrompts: (value: CustomSupportPrompts) => void
 	enhancementApiConfigId?: string
 	setEnhancementApiConfigId: (value: string) => void
-	experimentalDiffStrategy: boolean
-	setExperimentalDiffStrategy: (value: boolean) => void
-	autoApprovalEnabled?: boolean
+	experiments: Record<string, boolean>
+	setExperimentEnabled: (id: string, enabled: boolean) => void
 	setAutoApprovalEnabled: (value: boolean) => void
 	handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
 	customModes: ModeConfig[]
@@ -98,8 +98,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		mode: defaultModeSlug,
 		customModePrompts: defaultPrompts,
 		customSupportPrompts: {},
+		experiments: experimentDefault,
 		enhancementApiConfigId: "",
-		experimentalDiffStrategy: false,
 		autoApprovalEnabled: false,
 		customModes: [],
 	})
@@ -242,7 +242,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		fuzzyMatchThreshold: state.fuzzyMatchThreshold,
 		writeDelayMs: state.writeDelayMs,
 		screenshotQuality: state.screenshotQuality,
-		experimentalDiffStrategy: state.experimentalDiffStrategy ?? false,
+		setExperimentEnabled: (id, enabled) =>
+			setState((prevState) => ({ ...prevState, experiments: { ...prevState.experiments, [id]: enabled } })),
 		setApiConfiguration: (value) =>
 			setState((prevState) => ({
 				...prevState,
@@ -279,8 +280,6 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setCustomSupportPrompts: (value) => setState((prevState) => ({ ...prevState, customSupportPrompts: value })),
 		setEnhancementApiConfigId: (value) =>
 			setState((prevState) => ({ ...prevState, enhancementApiConfigId: value })),
-		setExperimentalDiffStrategy: (value) =>
-			setState((prevState) => ({ ...prevState, experimentalDiffStrategy: value })),
 		setAutoApprovalEnabled: (value) => setState((prevState) => ({ ...prevState, autoApprovalEnabled: value })),
 		handleInputChange,
 		setCustomModes: (value) => setState((prevState) => ({ ...prevState, customModes: value })),