fix: improve VS Code LM API model name display

- Add 'name' property to vsCodeLmModels type in ExtensionMessage
- Map VS Code LM models to include name property when sending to webview
- Update VSCodeLM component to display model.name when available
- Falls back to vendor/family format if name is not provided

Fixes #8443

Author: roomote

src/core/webview/webviewMessageHandler.ts

@@ -932,8 +932,16 @@ export const webviewMessageHandler = async (
 			break
 		case "requestVsCodeLmModels":
 			const vsCodeLmModels = await getVsCodeLmModels()
+			// Map the models to include all necessary properties for the UI
+			const mappedModels = vsCodeLmModels.map((model) => ({
+				vendor: model.vendor,
+				family: model.family,
+				version: model.version,
+				id: model.id,
+				name: model.name, // Include the name property for better display
+			}))
 			// TODO: Cache like we do for OpenRouter, etc?
-			provider.postMessageToWebview({ type: "vsCodeLmModels", vsCodeLmModels })
+			provider.postMessageToWebview({ type: "vsCodeLmModels", vsCodeLmModels: mappedModels })
 			break
 		case "requestHuggingFaceModels":
 			// TODO: Why isn't this handled by `requestRouterModels` above?

src/shared/ExtensionMessage.ts

@@ -154,7 +154,7 @@ export interface ExtensionMessage {
 	openAiModels?: string[]
 	ollamaModels?: ModelRecord
 	lmStudioModels?: ModelRecord
-	vsCodeLmModels?: { vendor?: string; family?: string; version?: string; id?: string }[]
+	vsCodeLmModels?: { vendor?: string; family?: string; version?: string; id?: string; name?: string }[]
 	huggingFaceModels?: Array<{
 		id: string
 		object: string

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

@@ -1,10 +1,9 @@
 import { useState, useCallback } from "react"
 import { useEvent } from "react-use"
-import { LanguageModelChatSelector } from "vscode"
 
 import type { ProviderSettings } from "@roo-code/types"
 
-import { ExtensionMessage } from "@roo/ExtensionMessage"
+import { ExtensionMessage, LanguageModelChatSelector } from "@roo/ExtensionMessage"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@src/components/ui"
@@ -19,7 +18,7 @@ type VSCodeLMProps = {
 export const VSCodeLM = ({ apiConfiguration, setApiConfigurationField }: VSCodeLMProps) => {
 	const { t } = useAppTranslation()
 
-	const [vsCodeLmModels, setVsCodeLmModels] = useState<LanguageModelChatSelector[]>([])
+	const [vsCodeLmModels, setVsCodeLmModels] = useState<Array<LanguageModelChatSelector & { name?: string }>>([])
 
 	const handleInputChange = useCallback(
 		<K extends keyof ProviderSettings, E>(
@@ -66,13 +65,23 @@ export const VSCodeLM = ({ apiConfiguration, setApiConfigurationField }: VSCodeL
 							<SelectValue placeholder={t("settings:common.select")} />
 						</SelectTrigger>
 						<SelectContent>
-							{vsCodeLmModels.map((model) => (
-								<SelectItem
-									key={`${model.vendor}/${model.family}`}
-									value={`${model.vendor}/${model.family}`}>
-									{`${model.vendor} - ${model.family}`}
-								</SelectItem>
-							))}
+							{vsCodeLmModels.map((model) => {
+								// Create a more user-friendly display name
+								// Use the model's name property if available, otherwise fall back to vendor/family
+								const displayName =
+									model.name ||
+									(model.vendor && model.family
+										? `${model.vendor} - ${model.family}`
+										: model.id || "Unknown Model")
+
+								return (
+									<SelectItem
+										key={`${model.vendor}/${model.family}`}
+										value={`${model.vendor}/${model.family}`}>
+										{displayName}
+									</SelectItem>
+								)
+							})}
 						</SelectContent>
 					</Select>
 				) : (