fix: simplify openRouterSpecificProvider handling without complex state tracking

- Remove userModifiedFields state tracking and isUserAction parameter
- Initialize openRouterSpecificProvider with default value when dropdown becomes visible
- Use useEffect to handle initialization cleanly without modifying state during render
- Addresses feedback about unnecessary complexity in the original implementation

Author: roomote

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

@@ -178,6 +178,23 @@ const ApiOptions = ({
 			apiConfiguration.openRouterModelId in routerModels.openrouter,
 	})
 
+	// Initialize openRouterSpecificProvider with default value when the dropdown becomes available
+	useEffect(() => {
+		if (
+			selectedProvider === "openrouter" &&
+			openRouterModelProviders &&
+			Object.keys(openRouterModelProviders).length > 0 &&
+			apiConfiguration?.openRouterSpecificProvider === undefined
+		) {
+			setApiConfigurationField("openRouterSpecificProvider", OPENROUTER_DEFAULT_PROVIDER_NAME)
+		}
+	}, [
+		selectedProvider,
+		openRouterModelProviders,
+		apiConfiguration?.openRouterSpecificProvider,
+		setApiConfigurationField,
+	])
+
 	// Update `apiModelId` whenever `selectedModelId` changes.
 	useEffect(() => {
 		if (selectedModelId && apiConfiguration.apiModelId !== selectedModelId) {

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

@@ -197,17 +197,13 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		setCachedState((prevCachedState) => ({ ...prevCachedState, ...extensionState }))
 		prevApiConfigName.current = currentApiConfigName
 		setChangeDetected(false)
-		// Reset user modified fields when loading new configuration
-		setUserModifiedFields(new Set())
 	}, [currentApiConfigName, extensionState, isChangeDetected])
 
 	// Bust the cache when settings are imported.
 	useEffect(() => {
 		if (settingsImportedAt) {
 			setCachedState((prevCachedState) => ({ ...prevCachedState, ...extensionState }))
 			setChangeDetected(false)
-			// Reset user modified fields when importing settings
-			setUserModifiedFields(new Set())
 		}
 	}, [settingsImportedAt, extensionState])
 
@@ -222,35 +218,26 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		})
 	}, [])
 
-	// Track which fields have been explicitly set by user interaction
-	const [userModifiedFields, setUserModifiedFields] = useState<Set<keyof ProviderSettings>>(new Set())
-
 	const setApiConfigurationField = useCallback(
-		<K extends keyof ProviderSettings>(field: K, value: ProviderSettings[K], isUserAction: boolean = true) => {
+		<K extends keyof ProviderSettings>(field: K, value: ProviderSettings[K]) => {
 			setCachedState((prevState) => {
 				if (prevState.apiConfiguration?.[field] === value) {
 					return prevState
 				}
 
 				const previousValue = prevState.apiConfiguration?.[field]
 
-				// Track if this field has been modified by the user
-				if (isUserAction) {
-					setUserModifiedFields((prev) => new Set(prev).add(field))
-				}
-
 				// Don't treat initial sync from undefined to a defined value as a user change
-				// unless this field has been explicitly modified by the user before
-				const isInitialSync =
-					previousValue === undefined && value !== undefined && !userModifiedFields.has(field)
+				// This prevents the dirty state when the component initializes and auto-syncs the model ID
+				const isInitialSync = previousValue === undefined && value !== undefined
 
 				if (!isInitialSync) {
 					setChangeDetected(true)
 				}
 				return { ...prevState, apiConfiguration: { ...prevState.apiConfiguration, [field]: value } }
 			})
 		},
-		[userModifiedFields],
+		[],
 	)
 
 	const setExperimentEnabled: SetExperimentEnabled = useCallback((id: ExperimentId, enabled: boolean) => {
@@ -359,8 +346,6 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			vscode.postMessage({ type: "telemetrySetting", text: telemetrySetting })
 			vscode.postMessage({ type: "profileThresholds", values: profileThresholds })
 			setChangeDetected(false)
-			// Reset user modified fields after saving
-			setUserModifiedFields(new Set())
 		}
 	}
 
@@ -384,7 +369,6 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 				// Discard changes: Reset state and flag
 				setCachedState(extensionState) // Revert to original state
 				setChangeDetected(false) // Reset change flag
-				setUserModifiedFields(new Set()) // Reset user modified fields
 				confirmDialogHandler.current?.() // Execute the pending action (e.g., tab switch)
 			}
 			// If confirm is false (Cancel), do nothing, dialog closes automatically