feat(webview): add OpenAI Codex speed selector

Author: WebMad

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

@@ -1,9 +1,23 @@
 import React from "react"
 
-import { type ProviderSettings, openAiCodexDefaultModelId, openAiCodexModels } from "@roo-code/types"
+import {
+	OPEN_AI_CODEX_SERVICE_TIER_KEY,
+	OpenAiCodexServiceTier,
+	type ProviderSettings,
+	openAiCodexDefaultModelId,
+	openAiCodexModels,
+} from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
-import { Button } from "@src/components/ui"
+import {
+	Button,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+	StandardTooltip,
+} from "@src/components/ui"
 import { vscode } from "@src/utils/vscode"
 
 import { ModelPicker } from "../ModelPicker"
@@ -66,6 +80,35 @@ export const OpenAICodex: React.FC<OpenAICodexProps> = ({
 				simplifySettings={simplifySettings}
 				hidePricing
 			/>
+
+			<div className="flex flex-col gap-1" data-testid="openai-codex-service-tier">
+				<div className="flex items-center gap-1">
+					<label className="block font-medium">{t("settings:openAiCodexSpeed.label")}</label>
+					<StandardTooltip content={t("settings:openAiCodexSpeed.tooltip")}>
+						<i className="codicon codicon-info text-vscode-descriptionForeground text-xs" />
+					</StandardTooltip>
+				</div>
+				<Select
+					value={apiConfiguration[OPEN_AI_CODEX_SERVICE_TIER_KEY] ?? OpenAiCodexServiceTier.Default}
+					onValueChange={(value) =>
+						setApiConfigurationField(
+							OPEN_AI_CODEX_SERVICE_TIER_KEY,
+							value as ProviderSettings[typeof OPEN_AI_CODEX_SERVICE_TIER_KEY],
+						)
+					}>
+					<SelectTrigger className="w-full">
+						<SelectValue placeholder={t("settings:common.select")} />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value={OpenAiCodexServiceTier.Default}>
+							{t("settings:openAiCodexSpeed.standard")}
+						</SelectItem>
+						<SelectItem value={OpenAiCodexServiceTier.Priority}>
+							{t("settings:openAiCodexSpeed.fast")}
+						</SelectItem>
+					</SelectContent>
+				</Select>
+			</div>
 		</div>
 	)
 }

webview-ui/src/components/settings/providers/__tests__/OpenAICodex.spec.tsx

@@ -0,0 +1,97 @@
+import React from "react"
+
+import {
+	OPEN_AI_CODEX_SERVICE_TIER_KEY,
+	OpenAiCodexServiceTier,
+	providerIdentifiers,
+	type ProviderSettings,
+} from "@roo-code/types"
+
+import { fireEvent, render, screen } from "@/utils/test-utils"
+import { vscode } from "@src/utils/vscode"
+
+import { OpenAICodex } from "../OpenAICodex"
+
+vi.mock("@src/i18n/TranslationContext", () => ({
+	useAppTranslation: () => ({
+		t: (key: string) =>
+			({
+				"settings:openAiCodexSpeed.label": "Speed",
+				"settings:openAiCodexSpeed.tooltip":
+					"Fast uses Codex priority processing for about 1.5x speed and consumes more subscription quota.",
+				"settings:openAiCodexSpeed.standard": "Standard",
+				"settings:openAiCodexSpeed.fast": "Fast (1.5x speed, increased usage)",
+			})[key] ?? key,
+	}),
+}))
+
+vi.mock("@src/components/ui", () => ({
+	Button: ({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+		<button {...props}>{children}</button>
+	),
+	Select: ({ children, value, onValueChange }: any) => (
+		<select aria-label="Speed" value={value} onChange={(event) => onValueChange(event.target.value)}>
+			{children}
+		</select>
+	),
+	SelectContent: ({ children }: any) => <>{children}</>,
+	SelectItem: ({ children, value }: any) => <option value={value}>{children}</option>,
+	SelectTrigger: ({ children }: any) => <>{children}</>,
+	SelectValue: () => null,
+	StandardTooltip: ({ children, content }: any) => <span title={content}>{children}</span>,
+}))
+
+vi.mock("../../ModelPicker", () => ({
+	ModelPicker: () => <div data-testid="model-picker" />,
+}))
+
+vi.mock("../OpenAICodexRateLimitDashboard", () => ({
+	OpenAICodexRateLimitDashboard: () => null,
+}))
+
+vi.mock("@src/utils/vscode", () => ({
+	vscode: { postMessage: vi.fn() },
+}))
+
+describe("OpenAICodex speed selector", () => {
+	const renderSelector = (apiConfiguration: ProviderSettings, setApiConfigurationField = vi.fn()) => {
+		render(<OpenAICodex apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />)
+		return { setApiConfigurationField, selector: screen.getByRole("combobox", { name: "Speed" }) }
+	}
+
+	it("defaults to Standard and clearly explains the Fast quota trade-off", () => {
+		const { selector } = renderSelector({ apiProvider: providerIdentifiers.openaiCodex })
+
+		expect(selector).toHaveValue(OpenAiCodexServiceTier.Default)
+		expect(screen.getByRole("option", { name: "Standard" })).toBeInTheDocument()
+		expect(screen.getByRole("option", { name: "Fast (1.5x speed, increased usage)" })).toBeInTheDocument()
+		expect(
+			screen.getByTitle(
+				"Fast uses Codex priority processing for about 1.5x speed and consumes more subscription quota.",
+			),
+		).toBeInTheDocument()
+	})
+
+	it("selects Fast from a saved preference and persists changes through the settings callback", () => {
+		const { selector, setApiConfigurationField } = renderSelector({
+			apiProvider: providerIdentifiers.openaiCodex,
+			[OPEN_AI_CODEX_SERVICE_TIER_KEY]: OpenAiCodexServiceTier.Priority,
+		})
+		const postMessage = vi.mocked(vscode.postMessage)
+
+		expect(selector).toHaveValue(OpenAiCodexServiceTier.Priority)
+
+		fireEvent.change(selector, { target: { value: OpenAiCodexServiceTier.Default } })
+		expect(setApiConfigurationField).toHaveBeenLastCalledWith(
+			OPEN_AI_CODEX_SERVICE_TIER_KEY,
+			OpenAiCodexServiceTier.Default,
+		)
+
+		fireEvent.change(selector, { target: { value: OpenAiCodexServiceTier.Priority } })
+		expect(setApiConfigurationField).toHaveBeenLastCalledWith(
+			OPEN_AI_CODEX_SERVICE_TIER_KEY,
+			OpenAiCodexServiceTier.Priority,
+		)
+		expect(postMessage).not.toHaveBeenCalled()
+	})
+})

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

@@ -1126,6 +1126,12 @@
 	"limitMaxTokensDescription": "Limit the maximum number of tokens in the response",
 	"maxOutputTokensLabel": "Max output tokens",
 	"maxTokensGenerateDescription": "Maximum tokens to generate in response",
+	"openAiCodexSpeed": {
+		"label": "Speed",
+		"tooltip": "Fast uses Codex priority processing for about 1.5x speed and consumes more subscription quota.",
+		"standard": "Standard",
+		"fast": "Fast (1.5x speed, increased usage)"
+	},
 	"serviceTier": {
 		"label": "Service tier",
 		"tooltip": "For faster processing of API requests, try the priority processing service tier. For lower prices with higher latency, try the flex processing tier.",