Deprecate free grok 4 fast (#8481)

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

Author: mrubens

packages/types/src/model.ts

@@ -76,6 +76,8 @@ export const modelInfoSchema = z.object({
 	minTokensPerCachePoint: z.number().optional(),
 	maxCachePoints: z.number().optional(),
 	cachableFields: z.array(z.string()).optional(),
+	// Flag to indicate if the model is deprecated and should not be used
+	deprecated: z.boolean().optional(),
 	/**
 	 * Service tiers with pricing information.
 	 * Each tier can have a name (for OpenAI service tiers) and pricing overrides.

packages/types/src/providers/roo.ts

@@ -38,6 +38,7 @@ export const rooModels = {
 		outputPrice: 0,
 		description:
 			"Grok 4 Fast is xAI's latest multimodal model with SOTA cost-efficiency and a 2M token context window. (Note: prompts and completions are logged by xAI and used to improve the model.)",
+		deprecated: true,
 	},
 	"deepseek/deepseek-chat-v3.1": {
 		maxTokens: 16_384,

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

@@ -263,15 +263,24 @@ const ApiOptions = ({
 
 		const filteredModels = filterModels(models, selectedProvider, organizationAllowList)
 
-		const modelOptions = filteredModels
-			? Object.keys(filteredModels).map((modelId) => ({
-					value: modelId,
-					label: modelId,
-				}))
+		// Include the currently selected model even if deprecated (so users can see what they have selected)
+		// But filter out other deprecated models from being newly selectable
+		const availableModels = filteredModels
+			? Object.entries(filteredModels)
+					.filter(([modelId, modelInfo]) => {
+						// Always include the currently selected model
+						if (modelId === selectedModelId) return true
+						// Filter out deprecated models that aren't currently selected
+						return !modelInfo.deprecated
+					})
+					.map(([modelId]) => ({
+						value: modelId,
+						label: modelId,
+					}))
 			: []
 
-		return modelOptions
-	}, [selectedProvider, organizationAllowList])
+		return availableModels
+	}, [selectedProvider, organizationAllowList, selectedModelId])
 
 	const onProviderChange = useCallback(
 		(value: ProviderName) => {
@@ -716,20 +725,28 @@ const ApiOptions = ({
 						</Select>
 					</div>
 
+					{/* Show error if a deprecated model is selected */}
+					{selectedModelInfo?.deprecated && (
+						<ApiErrorMessage errorMessage={t("settings:validation.modelDeprecated")} />
+					)}
+
 					{selectedProvider === "bedrock" && selectedModelId === "custom-arn" && (
 						<BedrockCustomArn
 							apiConfiguration={apiConfiguration}
 							setApiConfigurationField={setApiConfigurationField}
 						/>
 					)}
 
-					<ModelInfoView
-						apiProvider={selectedProvider}
-						selectedModelId={selectedModelId}
-						modelInfo={selectedModelInfo}
-						isDescriptionExpanded={isDescriptionExpanded}
-						setIsDescriptionExpanded={setIsDescriptionExpanded}
-					/>
+					{/* Only show model info if not deprecated */}
+					{!selectedModelInfo?.deprecated && (
+						<ModelInfoView
+							apiProvider={selectedProvider}
+							selectedModelId={selectedModelId}
+							modelInfo={selectedModelInfo}
+							isDescriptionExpanded={isDescriptionExpanded}
+							setIsDescriptionExpanded={setIsDescriptionExpanded}
+						/>
+					)}
 				</>
 			)}
 

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

@@ -75,13 +75,30 @@ export const ModelPicker = ({
 	const selectTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 	const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
+	const { id: selectedModelId, info: selectedModelInfo } = useSelectedModel(apiConfiguration)
+
 	const modelIds = useMemo(() => {
 		const filteredModels = filterModels(models, apiConfiguration.apiProvider, organizationAllowList)
 
-		return Object.keys(filteredModels ?? {}).sort((a, b) => a.localeCompare(b))
-	}, [models, apiConfiguration.apiProvider, organizationAllowList])
+		// Include the currently selected model even if deprecated (so users can see what they have selected)
+		// But filter out other deprecated models from being newly selectable
+		const availableModels = Object.entries(filteredModels ?? {})
+			.filter(([modelId, modelInfo]) => {
+				// Always include the currently selected model
+				if (modelId === selectedModelId) return true
+				// Filter out deprecated models that aren't currently selected
+				return !modelInfo.deprecated
+			})
+			.reduce(
+				(acc, [modelId, modelInfo]) => {
+					acc[modelId] = modelInfo
+					return acc
+				},
+				{} as Record<string, ModelInfo>,
+			)
 
-	const { id: selectedModelId, info: selectedModelInfo } = useSelectedModel(apiConfiguration)
+		return Object.keys(availableModels).sort((a, b) => a.localeCompare(b))
+	}, [models, apiConfiguration.apiProvider, organizationAllowList, selectedModelId])
 
 	const [searchValue, setSearchValue] = useState("")
 
@@ -225,7 +242,10 @@ export const ModelPicker = ({
 				</Popover>
 			</div>
 			{errorMessage && <ApiErrorMessage errorMessage={errorMessage} />}
-			{selectedModelId && selectedModelInfo && (
+			{selectedModelInfo?.deprecated && (
+				<ApiErrorMessage errorMessage={t("settings:validation.modelDeprecated")} />
+			)}
+			{selectedModelId && selectedModelInfo && !selectedModelInfo.deprecated && (
 				<ModelInfoView
 					apiProvider={apiConfiguration.apiProvider}
 					selectedModelId={selectedModelId}

webview-ui/src/components/settings/__tests__/ModelPicker.deprecated.spec.tsx

@@ -0,0 +1,195 @@
+// npx vitest src/components/settings/__tests__/ModelPicker.deprecated.spec.tsx
+
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { describe, it, expect, vi, beforeEach } from "vitest"
+
+import { ModelPicker } from "../ModelPicker"
+import type { ModelInfo } from "@roo-code/types"
+
+// Mock the i18n module
+vi.mock("@src/i18n/TranslationContext", () => ({
+	useAppTranslation: () => ({
+		t: (key: string, options?: any) => {
+			// Handle specific translation keys
+			if (key === "settings:validation.modelDeprecated") {
+				return "This model is no longer available. Please select a different model."
+			}
+			if (options) return `${key} ${JSON.stringify(options)}`
+			return key
+		},
+	}),
+}))
+
+// Mock the useSelectedModel hook
+vi.mock("@/components/ui/hooks/useSelectedModel", () => ({
+	useSelectedModel: (apiConfiguration: any) => {
+		const modelId = apiConfiguration?.openRouterModelId || "model-1"
+		const models: Record<string, ModelInfo> = {
+			"model-1": {
+				maxTokens: 1000,
+				contextWindow: 4000,
+				supportsPromptCache: true,
+			},
+			"model-2": {
+				maxTokens: 2000,
+				contextWindow: 8000,
+				supportsPromptCache: false,
+			},
+			"deprecated-model": {
+				maxTokens: 1500,
+				contextWindow: 6000,
+				supportsPromptCache: true,
+				deprecated: true,
+			},
+		}
+		return {
+			id: modelId,
+			info: models[modelId],
+			provider: "openrouter",
+			isLoading: false,
+			isError: false,
+		}
+	},
+}))
+
+describe("ModelPicker - Deprecated Models", () => {
+	const mockSetApiConfigurationField = vi.fn()
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: { retry: false },
+		},
+	})
+
+	const regularModels: Record<string, ModelInfo> = {
+		"model-1": {
+			maxTokens: 1000,
+			contextWindow: 4000,
+			supportsPromptCache: true,
+		},
+		"model-2": {
+			maxTokens: 2000,
+			contextWindow: 8000,
+			supportsPromptCache: false,
+		},
+		"deprecated-model": {
+			maxTokens: 1500,
+			contextWindow: 6000,
+			supportsPromptCache: true,
+			deprecated: true,
+		},
+	}
+
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	it("should filter out deprecated models from the dropdown", async () => {
+		const user = userEvent.setup()
+
+		render(
+			<QueryClientProvider client={queryClient}>
+				<ModelPicker
+					defaultModelId="model-1"
+					models={regularModels}
+					modelIdKey="openRouterModelId"
+					serviceName="Test Service"
+					serviceUrl="https://test.com"
+					apiConfiguration={{ apiProvider: "openrouter" }}
+					setApiConfigurationField={mockSetApiConfigurationField}
+					organizationAllowList={{ allowAll: true, providers: {} }}
+				/>
+			</QueryClientProvider>,
+		)
+
+		// Open the dropdown
+		const button = screen.getByTestId("model-picker-button")
+		await user.click(button)
+
+		// Check that non-deprecated models are shown
+		expect(screen.getByTestId("model-option-model-1")).toBeInTheDocument()
+		expect(screen.getByTestId("model-option-model-2")).toBeInTheDocument()
+
+		// Check that deprecated model is NOT shown
+		expect(screen.queryByTestId("model-option-deprecated-model")).not.toBeInTheDocument()
+	})
+
+	it("should show error when a deprecated model is currently selected", () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<ModelPicker
+					defaultModelId="deprecated-model"
+					models={regularModels}
+					modelIdKey="openRouterModelId"
+					serviceName="Test Service"
+					serviceUrl="https://test.com"
+					apiConfiguration={{
+						apiProvider: "openrouter",
+						openRouterModelId: "deprecated-model",
+					}}
+					setApiConfigurationField={mockSetApiConfigurationField}
+					organizationAllowList={{ allowAll: true, providers: {} }}
+				/>
+			</QueryClientProvider>,
+		)
+
+		// Check that the error message is displayed
+		expect(
+			screen.getByText("This model is no longer available. Please select a different model."),
+		).toBeInTheDocument()
+	})
+
+	it("should allow selecting non-deprecated models", async () => {
+		const user = userEvent.setup()
+
+		render(
+			<QueryClientProvider client={queryClient}>
+				<ModelPicker
+					defaultModelId="model-1"
+					models={regularModels}
+					modelIdKey="openRouterModelId"
+					serviceName="Test Service"
+					serviceUrl="https://test.com"
+					apiConfiguration={{ apiProvider: "openrouter" }}
+					setApiConfigurationField={mockSetApiConfigurationField}
+					organizationAllowList={{ allowAll: true, providers: {} }}
+				/>
+			</QueryClientProvider>,
+		)
+
+		// Open the dropdown
+		const button = screen.getByTestId("model-picker-button")
+		await user.click(button)
+
+		// Select a non-deprecated model
+		const model2Option = screen.getByTestId("model-option-model-2")
+		await user.click(model2Option)
+
+		// Verify the selection was made
+		expect(mockSetApiConfigurationField).toHaveBeenCalledWith("openRouterModelId", "model-2")
+	})
+
+	it("should not display model info for deprecated models", () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<ModelPicker
+					defaultModelId="deprecated-model"
+					models={regularModels}
+					modelIdKey="openRouterModelId"
+					serviceName="Test Service"
+					serviceUrl="https://test.com"
+					apiConfiguration={{
+						apiProvider: "openrouter",
+						openRouterModelId: "deprecated-model",
+					}}
+					setApiConfigurationField={mockSetApiConfigurationField}
+					organizationAllowList={{ allowAll: true, providers: {} }}
+				/>
+			</QueryClientProvider>,
+		)
+
+		// Model info should not be displayed for deprecated models
+		expect(screen.queryByText("This is a deprecated model")).not.toBeInTheDocument()
+	})
+})

webview-ui/src/i18n/locales/ca/settings.json

@@ -829,6 +829,7 @@
 			"regionMismatch": "Warning: The region in your ARN ({{arnRegion}}) does not match your selected region ({{region}}). This may cause access issues. The provider will use the region from the ARN."
 		},
 		"modelAvailability": "The model ID ({{modelId}}) you provided is not available. Please choose a different model.",
+		"modelDeprecated": "This model is no longer available. Please select a different model.",
 		"providerNotAllowed": "Provider '{{provider}}' is not allowed by your organization",
 		"modelNotAllowed": "Model '{{model}}' is not allowed for provider '{{provider}}' by your organization",
 		"profileInvalid": "This profile contains a provider or model that is not allowed by your organization",