Feature/Dynamic OpenAI compatible model fetching on front page

.changeset/dynamic-openai-model-fetching.md

@@ -0,0 +1,6 @@
+---
+"kilo-code": patch
+"@kilocode/types": patch
+---
+
+Implement dynamic model fetching for OpenAI-compatible providers

packages/types/src/vscode-extension-host.ts

@@ -659,6 +659,7 @@ export type ExtensionState = Pick<
 	debug?: boolean
 	speechToTextStatus?: { available: boolean; reason?: "openaiKeyMissing" | "ffmpegNotInstalled" } // kilocode_change: Speech-to-text availability status with failure reason
 	appendSystemPrompt?: string // kilocode_change: Custom text to append to system prompt (CLI only)
+	openAiModels?: string[]
 }
 
 export interface Command {

webview-ui/src/components/kilocode/hooks/useProviderModels.ts

@@ -59,6 +59,7 @@ import {
 	internationalZAiDefaultModelId,
 	mainlandZAiModels,
 	mainlandZAiDefaultModelId,
+	openAiModelInfoSaneDefaults,
 } from "@roo-code/types"
 import type { ModelRecord, RouterModels } from "@roo/api"
 import { useRouterModels } from "../../ui/hooks/useRouterModels"
@@ -73,11 +74,13 @@ export const getModelsByProvider = ({
 	provider,
 	routerModels,
 	kilocodeDefaultModel,
+	openAiModels,
 	options = { isChina: false },
 }: {
 	provider: ProviderName
 	routerModels: RouterModels
 	kilocodeDefaultModel: string
+	openAiModels?: string[]
 	options: { isChina?: boolean }
 }): { models: ModelRecord; defaultModel: string } => {
 	switch (provider) {
@@ -181,7 +184,12 @@ export const getModelsByProvider = ({
 			}
 		}
 		case "openai": {
-			// TODO(catrielmuller): Support the fetch here
+			if (openAiModels) {
+				return {
+					models: Object.fromEntries(openAiModels.map((model) => [model, openAiModelInfoSaneDefaults])),
+					defaultModel: openAiModels[0] || "",
+				}
+			}
 			return {
 				models: {},
 				defaultModel: "",
@@ -351,7 +359,7 @@ export const getOptionsForProvider = (provider: ProviderName, apiConfiguration?:
 export const useProviderModels = (apiConfiguration?: ProviderSettings) => {
 	const provider = apiConfiguration?.apiProvider || "anthropic"
 
-	const { kilocodeDefaultModel } = useExtensionState()
+	const { kilocodeDefaultModel, openAiModels } = useExtensionState()
 
 	const routerModels = useRouterModels({
 		openRouterBaseUrl: apiConfiguration?.openRouterBaseUrl,
@@ -375,6 +383,7 @@ export const useProviderModels = (apiConfiguration?: ProviderSettings) => {
 					provider,
 					routerModels: routerModels.data,
 					kilocodeDefaultModel,
+					openAiModels,
 					options,
 				})
 			: FALLBACK_MODELS

webview-ui/src/context/ExtensionStateContext.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useCallback, useContext, useEffect, useState } from "react"
+import { useDebounce } from "react-use"
 
 import {
 	type ProviderSettings,
@@ -220,6 +221,7 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setIncludeCurrentTime: (value: boolean) => void
 	includeCurrentCost?: boolean
 	setIncludeCurrentCost: (value: boolean) => void
+	openAiModels?: string[]
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -360,6 +362,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		openRouterImageGenerationSelectedModel: "",
 		includeCurrentTime: true,
 		includeCurrentCost: true,
+		openAiModels: [],
 	})
 
 	const [didHydrateState, setDidHydrateState] = useState(false)
@@ -518,6 +521,10 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					setExtensionRouterModels(message.routerModels)
 					break
 				}
+				case "openAiModels": {
+					setState((prevState) => ({ ...prevState, openAiModels: message.openAiModels ?? [] }))
+					break
+				}
 				case "marketplaceData": {
 					if (message.marketplaceItems !== undefined) {
 						setMarketplaceItems(message.marketplaceItems)
@@ -554,6 +561,38 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setPrevCloudIsAuthenticated(currentAuth)
 	}, [state.cloudIsAuthenticated, prevCloudIsAuthenticated, state.apiConfiguration?.apiProvider])
 
+	// Fetch OpenAI models on startup or when configuration changes
+	useDebounce(
+		() => {
+			if (!didHydrateState) {
+				return
+			}
+
+			const { apiProvider, openAiBaseUrl, openAiApiKey, openAiHeaders } = state.apiConfiguration || {}
+
+			if (apiProvider === "openai" || apiProvider === "openai-responses") {
+				if (openAiBaseUrl) {
+					vscode.postMessage({
+						type: "requestOpenAiModels",
+						values: {
+							baseUrl: openAiBaseUrl,
+							apiKey: openAiApiKey,
+							openAiHeaders,
+						},
+					})
+				}
+			}
+		},
+		500,
+		[
+			didHydrateState,
+			state.apiConfiguration?.apiProvider,
+			state.apiConfiguration?.openAiBaseUrl,
+			state.apiConfiguration?.openAiApiKey,
+			state.apiConfiguration?.openAiHeaders,
+		],
+	)
+
 	const contextValue: ExtensionStateContextType = {
 		...state,
 		reasoningBlockCollapsed: state.reasoningBlockCollapsed ?? true,