sync local search state after timeout

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

@@ -64,6 +64,7 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = ({ isPopup }
 	const { handleFieldsChange } = useApiConfigurationHandlers()
 	const { apiConfiguration, openRouterModels, refreshOpenRouterModels } = useExtensionState()
 	const [searchTerm, setSearchTerm] = useState(apiConfiguration?.openRouterModelId || openRouterDefaultModelId)
+	const [isSearchInputDirty, setIsSearchInputDirty] = useState(false)
 	const [isDropdownVisible, setIsDropdownVisible] = useState(false)
 	const [selectedIndex, setSelectedIndex] = useState(-1)
 	const dropdownRef = useRef<HTMLDivElement>(null)
@@ -87,6 +88,23 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = ({ isPopup }
 
 	useMount(refreshOpenRouterModels)
 
+	// Sync external changes only when user isn't actively typing
+	useEffect(() => {
+		if (!isSearchInputDirty) {
+			const currentModelId = apiConfiguration?.openRouterModelId || openRouterDefaultModelId
+			setSearchTerm(currentModelId)
+		}
+	}, [apiConfiguration?.openRouterModelId, isSearchInputDirty])
+
+	// Reset dirty flag after user stops typing (1 second timeout)
+	useEffect(() => {
+		if (!isSearchInputDirty) return
+		const timeout = setTimeout(() => {
+			setIsSearchInputDirty(false)
+		}, 1000)
+		return () => clearTimeout(timeout)
+	}, [searchTerm, isSearchInputDirty])
+
 	useEffect(() => {
 		const handleClickOutside = (event: MouseEvent) => {
 			if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
@@ -243,6 +261,7 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = ({ isPopup }
 						placeholder="Search and select a model..."
 						value={searchTerm}
 						onInput={(e) => {
+							setIsSearchInputDirty(true)
 							handleModelChange((e.target as HTMLInputElement)?.value?.toLowerCase())
 							setIsDropdownVisible(true)
 						}}