Added working

Author: nang-dev

src/core/webview/ClineProvider.ts

@@ -1691,9 +1691,6 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			requestyModelInfo,
 			modelTemperature,
 			modelMaxTokens,
-			pearaiBaseUrl,
-			pearaiModelId,
-			pearaiModelInfo,
 		} = apiConfiguration
 		await Promise.all([
 			this.updateGlobalState("apiProvider", apiProvider),
@@ -1743,9 +1740,6 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.updateGlobalState("requestyModelInfo", requestyModelInfo),
 			this.updateGlobalState("modelTemperature", modelTemperature),
 			this.updateGlobalState("modelMaxTokens", modelMaxTokens),
-			await this.updateGlobalState("pearaiBaseUrl", PEARAI_URL),
-			await this.updateGlobalState("pearaiModelId", pearaiModelId),
-			await this.updateGlobalState("pearaiModelInfo", pearaiModelInfo),
 		])
 		if (this.cline) {
 			this.cline.api = buildApiHandler(apiConfiguration)
@@ -2190,8 +2184,6 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			pearaiApiKey,
 			pearaiRefreshKey,
 			pearaiBaseUrl,
-			pearaiModelId,
-			pearaiModelInfo,
 			mistralCodestralUrl,
 			azureApiVersion,
 			openAiStreamingEnabled,
@@ -2279,8 +2271,6 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.getSecret("pearai-token") as Promise<string | undefined>,
 			this.getSecret("pearai-refresh") as Promise<string | undefined>,
 			this.getGlobalState("pearaiBaseUrl") as Promise<string | undefined>,
-			this.getGlobalState("pearaiModelId") as Promise<string | undefined>,
-			this.getGlobalState("pearaiModelInfo") as Promise<ModelInfo | undefined>,
 			this.getGlobalState("mistralCodestralUrl") as Promise<string | undefined>,
 			this.getGlobalState("azureApiVersion") as Promise<string | undefined>,
 			this.getGlobalState("openAiStreamingEnabled") as Promise<boolean | undefined>,
@@ -2384,8 +2374,6 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				mistralApiKey,
 				pearaiApiKey,
 				pearaiBaseUrl,
-				pearaiModelId,
-				pearaiModelInfo,
 				mistralCodestralUrl,
 				azureApiVersion,
 				openAiStreamingEnabled,

src/shared/api.ts

@@ -72,8 +72,6 @@ export interface ApiHandlerOptions {
 	modelMaxTokens?: number
 	pearaiApiKey?: string
 	pearaiBaseUrl?: string
-	pearaiModelId?: string
-	pearaiModelInfo?: ModelInfo
 }
 
 export type ApiConfiguration = ApiHandlerOptions & {
@@ -807,20 +805,29 @@ export let pearAiModels: Record<string, ModelInfo> = defaultPearAiModels
 // DEV:
 export const PEARAI_URL = "http://localhost:8000/integrations/cline"
 
-// Dynamically fetch models from PearAI server
-export const getPearAiModels = async () => {
+// Promise to track initialization status
+export let modelsInitialized: Promise<Record<string, ModelInfo>>
+
+// Immediately invoked function to initialize models
+modelsInitialized = (async () => {
 	try {
 		const res = await fetch(`${PEARAI_URL}/getPearAIAgentModels`)
 		if (!res.ok) throw new Error("Failed to fetch models")
 		const config = await res.json()
 		if (config.models && Object.keys(config.models).length > 0) {
 			pearAiModels = config.models
 			pearAiDefaultModelId = config.defaultModelId || "pearai-model"
-			console.dir("IM HER1111")
+			console.log("Models successfully loaded from server")
 			console.dir(pearAiModels)
+
+			window.dispatchEvent(
+				new CustomEvent("pearAiModelsUpdated", {
+					detail: { models: pearAiModels, defaultModelId: pearAiDefaultModelId },
+				}),
+			)
 			return pearAiModels
 		} else {
-			console.dir("IM HER2222")
+			console.log("Using default models (no models returned from server)")
 			pearAiModels = defaultPearAiModels
 			return defaultPearAiModels
 		}
@@ -829,7 +836,15 @@ export const getPearAiModels = async () => {
 		pearAiModels = defaultPearAiModels
 		return defaultPearAiModels
 	}
+})()
+
+// Helper function to ensure models are loaded before operations that depend on them
+export const ensureModelsLoaded = async () => {
+	return await modelsInitialized
 }
 
-// Initialize models when module loads
-getPearAiModels()
+// This will log after models are initialized
+modelsInitialized.then(() => {
+	console.log("Models initialization complete")
+	console.dir(pearAiModels)
+})

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

@@ -53,22 +53,6 @@ import { validateApiConfiguration, validateModelId } from "@/utils/validate"
 import { ApiErrorMessage } from "./ApiErrorMessage"
 import { ThinkingBudget } from "./ThinkingBudget"
 
-const modelsByProvider: Record<string, Record<string, ModelInfo>> = {
-	anthropic: anthropicModels,
-	bedrock: bedrockModels,
-	vertex: vertexModels,
-	gemini: geminiModels,
-	"openai-native": openAiNativeModels,
-	deepseek: deepSeekModels,
-	mistral: mistralModels,
-	pearai: pearAiModels,
-}
-
-console.dir("IM HERE888")
-console.dir(pearAiModels)
-console.dir("IM HERE9999")
-console.dir(anthropicModels)
-
 interface ApiOptionsProps {
 	uriScheme: string | undefined
 	apiConfiguration: ApiConfiguration
@@ -106,6 +90,8 @@ const ApiOptions = ({
 		[requestyDefaultModelId]: requestyDefaultModelInfo,
 	})
 
+	const [pearAiModelsState, setPearAiModelsState] = useState<Record<string, ModelInfo>>(pearAiModels)
+
 	const [openAiModels, setOpenAiModels] = useState<Record<string, ModelInfo> | null>(null)
 
 	const [anthropicBaseUrlSelected, setAnthropicBaseUrlSelected] = useState(!!apiConfiguration?.anthropicBaseUrl)
@@ -130,8 +116,8 @@ const ApiOptions = ({
 	)
 
 	const { selectedProvider, selectedModelId, selectedModelInfo } = useMemo(
-		() => normalizeApiConfiguration(apiConfiguration),
-		[apiConfiguration],
+		() => normalizeApiConfiguration(apiConfiguration, pearAiModelsState),
+		[apiConfiguration, pearAiModelsState],
 	)
 
 	// Debounced refresh model updates, only executed 250ms after the user
@@ -228,11 +214,63 @@ const ApiOptions = ({
 					setVsCodeLmModels(newModels)
 				}
 				break
+			case "state":
+				if (message.state?.apiConfiguration?.pearaiApiKey) {
+					setPearAiModelsState(pearAiModels)
+				}
+				break
 		}
 	}, [])
 
+	// Update PearAI models when API key changes
+	useEffect(() => {
+		if (apiConfiguration?.pearaiApiKey) {
+			setPearAiModelsState(pearAiModels)
+		}
+	}, [apiConfiguration?.pearaiApiKey])
+
 	useEvent("message", onMessage)
 
+	type ApiProvider =
+		| "anthropic"
+		| "bedrock"
+		| "vertex"
+		| "gemini"
+		| "openai-native"
+		| "deepseek"
+		| "mistral"
+		| "pearai"
+		| "openrouter"
+		| "glama"
+		| "unbound"
+		| "requesty"
+		| "openai"
+		| "ollama"
+		| "lmstudio"
+		| "vscode-lm"
+
+	const modelsByProvider = useMemo<Record<ApiProvider, Record<string, ModelInfo>>>(
+		() => ({
+			anthropic: anthropicModels,
+			bedrock: bedrockModels,
+			vertex: vertexModels,
+			gemini: geminiModels,
+			"openai-native": openAiNativeModels,
+			deepseek: deepSeekModels,
+			mistral: mistralModels,
+			pearai: pearAiModelsState,
+			openrouter: openRouterModels,
+			glama: glamaModels,
+			unbound: unboundModels,
+			requesty: requestyModels,
+			openai: openAiModels || {},
+			ollama: {},
+			lmstudio: {},
+			"vscode-lm": {},
+		}),
+		[pearAiModelsState, openRouterModels, glamaModels, unboundModels, requestyModels, openAiModels],
+	)
+
 	const selectedProviderModelOptions: DropdownOption[] = useMemo(
 		() =>
 			modelsByProvider[selectedProvider]
@@ -244,7 +282,7 @@ const ApiOptions = ({
 						})),
 					]
 				: [],
-		[selectedProvider],
+		[selectedProvider, modelsByProvider],
 	)
 
 	return (
@@ -1465,7 +1503,10 @@ export function getOpenRouterAuthUrl(uriScheme?: string) {
 	return `https://openrouter.ai/auth?callback_url=${uriScheme || "vscode"}://rooveterinaryinc.roo-cline/openrouter`
 }
 
-export function normalizeApiConfiguration(apiConfiguration?: ApiConfiguration) {
+export function normalizeApiConfiguration(
+	apiConfiguration?: ApiConfiguration,
+	pearAiModelsState?: Record<string, ModelInfo>,
+) {
 	const provider = apiConfiguration?.apiProvider || "anthropic"
 	const modelId = apiConfiguration?.apiModelId
 
@@ -1552,22 +1593,8 @@ export function normalizeApiConfiguration(apiConfiguration?: ApiConfiguration) {
 					supportsImages: false, // VSCode LM API currently doesn't support images.
 				},
 			}
-		case "pearai": {
-			// Get the base Anthropic model info
-			const baseModelInfo = anthropicModels[anthropicDefaultModelId]
-			const pearaiModelInfo: ModelInfo = {
-				...baseModelInfo,
-				inputPrice: baseModelInfo.inputPrice,
-				outputPrice: baseModelInfo.outputPrice,
-				cacheWritesPrice: baseModelInfo.cacheWritesPrice ? baseModelInfo.cacheWritesPrice : undefined,
-				cacheReadsPrice: baseModelInfo.cacheWritesPrice ? baseModelInfo.cacheReadsPrice : undefined,
-			}
-			return {
-				selectedProvider: provider,
-				selectedModelId: apiConfiguration?.pearaiModelId || "pearai_model",
-				selectedModelInfo: pearaiModelInfo,
-			}
-		}
+		case "pearai":
+			return getProviderData(pearAiModelsState || pearAiModels, pearAiDefaultModelId)
 		default:
 			return getProviderData(anthropicModels, anthropicDefaultModelId)
 	}