feat(settings): Add auto-approve mode switching option to Settings UI

Add the ability to configure automatic mode switching approval in the Settings UI.

Implementation:
- Added alwaysAllowModeSwitch checkbox in the Auto-Approve Settings section
- Added state management integration with useExtensionState
- Added vscode.postMessage handler for state updates
- Placed the setting logically between MCP tools and execute operations settings

The new setting allows users to:
- Enable/disable automatic approval of mode switching operations
- Configure mode switching approval independently of other auto-approve settings
- Maintain consistent UX with other auto-approve settings

This completes the mode switching auto-approval feature, working in conjunction with:
- Previously added state management in ExtensionStateContext
- Core logic changes in ClineProvider
- WebviewMessage type updates
- Existing test coverage in ChatView.auto-approve.test.tsx

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

@@ -53,6 +53,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		listApiConfigMeta,
 		experimentalDiffStrategy,
 		setExperimentalDiffStrategy,
+		alwaysAllowModeSwitch,
+		setAlwaysAllowModeSwitch,
 	} = useExtensionState()
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
 	const [modelIdErrorMessage, setModelIdErrorMessage] = useState<string | undefined>(undefined)
@@ -93,6 +95,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 				apiConfiguration,
 			})
 			vscode.postMessage({ type: "experimentalDiffStrategy", bool: experimentalDiffStrategy })
+			vscode.postMessage({ type: "alwaysAllowModeSwitch", bool: alwaysAllowModeSwitch })
 			onDone()
 		}
 	}
@@ -328,6 +331,17 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 						</p>
 					</div>
 
+					<div style={{ marginBottom: 15 }}>
+						<VSCodeCheckbox
+							checked={alwaysAllowModeSwitch}
+							onChange={(e: any) => setAlwaysAllowModeSwitch(e.target.checked)}>
+							<span style={{ fontWeight: "500" }}>Always approve mode switching</span>
+						</VSCodeCheckbox>
+						<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
+							Automatically switch between different AI modes without requiring approval
+						</p>
+					</div>
+
 					<div style={{ marginBottom: 15 }}>
 						<VSCodeCheckbox
 							checked={alwaysAllowExecute}