feat: add model refresh functionality on mount for LMStudio and Ollama components

Author: daniel-lxs

webview-ui/src/components/settings/providers/LMStudio.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, useMemo } from "react"
+import { useCallback, useState, useMemo, useEffect } from "react"
 import { useEvent } from "react-use"
 import { Trans } from "react-i18next"
 import { Checkbox } from "vscrui"
@@ -9,6 +9,7 @@ import type { ProviderSettings } from "@roo-code/types"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { ExtensionMessage } from "@roo/ExtensionMessage"
 import { useRouterModels } from "@src/components/ui/hooks/useRouterModels"
+import { vscode } from "@src/utils/vscode"
 
 import { inputEventTransform } from "../transforms"
 
@@ -49,6 +50,21 @@ export const LMStudio = ({ apiConfiguration, setApiConfigurationField }: LMStudi
 
 	useEvent("message", onMessage)
 
+	// Refresh models on mount
+	useEffect(() => {
+		// Request fresh models without flushing first
+		// This ensures cached models remain visible while new ones load
+		vscode.postMessage({ type: "requestRouterModels" })
+
+		// Optionally flush cache after a delay to ensure fresh data on next load
+		// This won't affect the current session since models are already being fetched
+		const timer = setTimeout(() => {
+			vscode.postMessage({ type: "flushRouterModels", text: "lmstudio" })
+		}, 1000)
+
+		return () => clearTimeout(timer)
+	}, [])
+
 	// Check if the selected model exists in the fetched models
 	const modelNotAvailable = useMemo(() => {
 		const selectedModel = apiConfiguration?.lmStudioModelId

webview-ui/src/components/settings/providers/Ollama.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from "react"
+import { useState, useCallback, useMemo, useEffect } from "react"
 import { useEvent } from "react-use"
 import { VSCodeTextField, VSCodeRadioGroup, VSCodeRadio } from "@vscode/webview-ui-toolkit/react"
 
@@ -8,6 +8,7 @@ import { ExtensionMessage } from "@roo/ExtensionMessage"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { useRouterModels } from "@src/components/ui/hooks/useRouterModels"
+import { vscode } from "@src/utils/vscode"
 
 import { inputEventTransform } from "../transforms"
 
@@ -48,6 +49,21 @@ export const Ollama = ({ apiConfiguration, setApiConfigurationField }: OllamaPro
 
 	useEvent("message", onMessage)
 
+	// Refresh models on mount
+	useEffect(() => {
+		// Request fresh models without flushing first
+		// This ensures cached models remain visible while new ones load
+		vscode.postMessage({ type: "requestRouterModels" })
+
+		// Optionally flush cache after a delay to ensure fresh data on next load
+		// This won't affect the current session since models are already being fetched
+		const timer = setTimeout(() => {
+			vscode.postMessage({ type: "flushRouterModels", text: "ollama" })
+		}, 1000)
+
+		return () => clearTimeout(timer)
+	}, [])
+
 	// Check if the selected model exists in the fetched models
 	const modelNotAvailable = useMemo(() => {
 		const selectedModel = apiConfiguration?.ollamaModelId