refactor: consolidate ThinkingBudget components and fix disable handling (#9930)

Author: hannesrudolph

src/api/transform/__tests__/model-params.spec.ts

@@ -275,7 +275,6 @@ describe("getModelParams", () => {
 
 			expect(result.reasoningBudget).toBeUndefined()
 			expect(result.temperature).toBe(0)
-			expect(result.reasoning).toBeUndefined()
 		})
 
 		it("should honor customMaxTokens for reasoning budget models", () => {
@@ -557,7 +556,6 @@ describe("getModelParams", () => {
 			})
 
 			expect(result.reasoningEffort).toBeUndefined()
-			expect(result.reasoning).toBeUndefined()
 		})
 
 		it("should handle reasoning effort for openrouter format", () => {
@@ -624,7 +622,6 @@ describe("getModelParams", () => {
 			})
 
 			expect(result.reasoningEffort).toBeUndefined()
-			expect(result.reasoning).toBeUndefined()
 		})
 
 		it("should include 'minimal' and 'none' for openrouter format", () => {
@@ -670,7 +667,7 @@ describe("getModelParams", () => {
 		it("should use reasoningEffort if supportsReasoningEffort is false but reasoningEffort is set", () => {
 			const model: ModelInfo = {
 				...baseModel,
-				maxTokens: 3000, // Changed to 3000 (18.75% of 16000), which is within 20% threshold
+				maxTokens: 3000, // 3000 is 18.75% of 16000, within 20% threshold
 				supportsReasoningEffort: false,
 				reasoningEffort: "medium",
 			}
@@ -681,7 +678,8 @@ describe("getModelParams", () => {
 				model,
 			})
 
-			expect(result.maxTokens).toBe(3000) // Now uses model.maxTokens since it's within 20% threshold
+			expect(result.maxTokens).toBe(3000)
+			// Now uses model.maxTokens since it's within 20% threshold
 			expect(result.reasoningEffort).toBe("medium")
 		})
 	})
@@ -735,7 +733,7 @@ describe("getModelParams", () => {
 			})
 
 			expect(result.reasoningBudget).toBe(3200) // 80% of 4000
-			expect(result.reasoningEffort).toBeUndefined()
+			expect(result.reasoningEffort).toBeUndefined() // Budget takes precedence
 			expect(result.temperature).toBe(1.0)
 		})
 
@@ -889,8 +887,6 @@ describe("getModelParams", () => {
 				settings: {},
 				model,
 			})
-
-			expect(result.reasoning).toBeUndefined()
 		})
 	})
 

src/api/transform/model-params.ts

@@ -130,10 +130,12 @@ export function getModelParams({
 		temperature = 1.0
 	} else if (shouldUseReasoningEffort({ model, settings })) {
 		// "Traditional" reasoning models use the `reasoningEffort` parameter.
-		const effort = (customReasoningEffort ?? model.reasoningEffort) as
-			| ReasoningEffortExtended
-			| "disable"
-			| undefined
+		// Only fallback to model default if user hasn't explicitly set a value.
+		// If customReasoningEffort is "disable", don't fallback to model default.
+		const effort =
+			customReasoningEffort !== undefined
+				? customReasoningEffort
+				: (model.reasoningEffort as ReasoningEffortExtended | "disable" | undefined)
 		// Capability and settings checks are handled by shouldUseReasoningEffort.
 		// Here we simply propagate the resolved effort into the params, while
 		// still treating "disable" as an omission.

src/shared/__tests__/api.spec.ts

@@ -379,7 +379,6 @@ describe("shouldUseReasoningEffort", () => {
 			reasoningEffort: "medium",
 		}
 
-		// Should return true regardless of settings (unless explicitly disabled)
 		expect(shouldUseReasoningEffort({ model })).toBe(true)
 		expect(shouldUseReasoningEffort({ model, settings: {} })).toBe(true)
 		expect(shouldUseReasoningEffort({ model, settings: { reasoningEffort: undefined } })).toBe(true)
@@ -444,7 +443,7 @@ describe("shouldUseReasoningEffort", () => {
 		expect(shouldUseReasoningEffort({ model })).toBe(false)
 	})
 
-	test("should return false when model doesn't support reasoning effort", () => {
+	test("should return false when model doesn't support reasoning effort and has no default", () => {
 		const model: ModelInfo = {
 			contextWindow: 200_000,
 			supportsPromptCache: true,

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

@@ -109,7 +109,6 @@ import { inputEventTransform, noTransform } from "./transforms"
 import { ModelInfoView } from "./ModelInfoView"
 import { ApiErrorMessage } from "./ApiErrorMessage"
 import { ThinkingBudget } from "./ThinkingBudget"
-import { SimpleThinkingBudget } from "./SimpleThinkingBudget"
 import { Verbosity } from "./Verbosity"
 import { DiffSettingsControl } from "./DiffSettingsControl"
 import { TodoListSettingsControl } from "./TodoListSettingsControl"
@@ -855,22 +854,14 @@ const ApiOptions = ({
 				</>
 			)}
 
-			{!fromWelcomeView &&
-				(selectedProvider === "roo" ? (
-					<SimpleThinkingBudget
-						key={`${selectedProvider}-${selectedModelId}`}
-						apiConfiguration={apiConfiguration}
-						setApiConfigurationField={setApiConfigurationField}
-						modelInfo={selectedModelInfo}
-					/>
-				) : (
-					<ThinkingBudget
-						key={`${selectedProvider}-${selectedModelId}`}
-						apiConfiguration={apiConfiguration}
-						setApiConfigurationField={setApiConfigurationField}
-						modelInfo={selectedModelInfo}
-					/>
-				))}
+			{!fromWelcomeView && (
+				<ThinkingBudget
+					key={`${selectedProvider}-${selectedModelId}`}
+					apiConfiguration={apiConfiguration}
+					setApiConfigurationField={setApiConfigurationField}
+					modelInfo={selectedModelInfo}
+				/>
+			)}
 
 			{/* Gate Verbosity UI by capability flag */}
 			{!fromWelcomeView && selectedModelInfo?.supportsVerbosity && (

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

@@ -78,26 +78,62 @@ export const ThinkingBudget = ({ apiConfiguration, setApiConfigurationField, mod
 
 	// Build available reasoning efforts list from capability
 	const supports = modelInfo?.supportsReasoningEffort
-	const availableOptions: ReadonlyArray<ReasoningEffortWithMinimal> =
+	const baseAvailableOptions: ReadonlyArray<ReasoningEffortWithMinimal> =
 		supports === true
 			? (reasoningEfforts as readonly ReasoningEffortWithMinimal[])
 			: Array.isArray(supports)
 				? (supports as ReadonlyArray<ReasoningEffortWithMinimal>)
 				: (reasoningEfforts as readonly ReasoningEffortWithMinimal[])
 
+	// "disable" turns off reasoning entirely; "none" is a valid reasoning level.
+	// Both display as "None" in the UI but behave differently.
+	// Add "disable" option if reasoning effort is not required.
+	type ReasoningEffortOption = ReasoningEffortWithMinimal | "none" | "disable"
+	const availableOptions: ReadonlyArray<ReasoningEffortOption> = modelInfo?.requiredReasoningEffort
+		? (baseAvailableOptions as ReadonlyArray<ReasoningEffortOption>)
+		: (["disable", ...baseAvailableOptions] as ReasoningEffortOption[])
+
 	// Default reasoning effort - use model's default if available
 	// GPT-5 models have "medium" as their default in the model configuration
 	const modelDefaultReasoningEffort = modelInfo?.reasoningEffort as ReasoningEffortWithMinimal | undefined
-	const defaultReasoningEffort: ReasoningEffortWithMinimal = modelDefaultReasoningEffort || "medium"
-	const currentReasoningEffort: ReasoningEffortWithMinimal =
-		(apiConfiguration.reasoningEffort as ReasoningEffortWithMinimal | undefined) || defaultReasoningEffort
+	const defaultReasoningEffort: ReasoningEffortOption = modelInfo?.requiredReasoningEffort
+		? modelDefaultReasoningEffort || "medium"
+		: "disable"
+	// Current reasoning effort from settings, or fall back to default
+	const storedReasoningEffort = apiConfiguration.reasoningEffort as ReasoningEffortOption | undefined
+	const currentReasoningEffort: ReasoningEffortOption = storedReasoningEffort || defaultReasoningEffort
 
 	// Set default reasoning effort when model supports it and no value is set
 	useEffect(() => {
-		if (isReasoningEffortSupported && !apiConfiguration.reasoningEffort && defaultReasoningEffort) {
-			setApiConfigurationField("reasoningEffort", defaultReasoningEffort, false)
+		if (isReasoningEffortSupported && !apiConfiguration.reasoningEffort) {
+			// Only set a default if reasoning is required, otherwise leave as undefined (which maps to "disable")
+			if (modelInfo?.requiredReasoningEffort && defaultReasoningEffort !== "disable") {
+				setApiConfigurationField("reasoningEffort", defaultReasoningEffort as ReasoningEffortWithMinimal, false)
+			}
+		}
+	}, [
+		isReasoningEffortSupported,
+		apiConfiguration.reasoningEffort,
+		defaultReasoningEffort,
+		modelInfo?.requiredReasoningEffort,
+		setApiConfigurationField,
+	])
+
+	// Sync enableReasoningEffort based on selection
+	// "disable" turns off reasoning; "none" is a valid level (reasoning enabled)
+	useEffect(() => {
+		if (!isReasoningEffortSupported) return
+		const shouldEnable = modelInfo?.requiredReasoningEffort || currentReasoningEffort !== "disable"
+		if (shouldEnable && apiConfiguration.enableReasoningEffort !== true) {
+			setApiConfigurationField("enableReasoningEffort", true, false)
 		}
-	}, [isReasoningEffortSupported, apiConfiguration.reasoningEffort, defaultReasoningEffort, setApiConfigurationField])
+	}, [
+		isReasoningEffortSupported,
+		modelInfo?.requiredReasoningEffort,
+		currentReasoningEffort,
+		apiConfiguration.enableReasoningEffort,
+		setApiConfigurationField,
+	])
 
 	const enableReasoningEffort = apiConfiguration.enableReasoningEffort
 	const customMaxOutputTokens = apiConfiguration.modelMaxTokens || DEFAULT_HYBRID_REASONING_MODEL_MAX_TOKENS
@@ -193,22 +229,34 @@ export const ThinkingBudget = ({ apiConfiguration, setApiConfigurationField, mod
 			</div>
 			<Select
 				value={currentReasoningEffort}
-				onValueChange={(value: ReasoningEffortWithMinimal) => {
-					setApiConfigurationField("reasoningEffort", value)
+				onValueChange={(value: ReasoningEffortOption) => {
+					// "disable" turns off reasoning entirely; "none" is a valid reasoning level
+					if (value === "disable") {
+						setApiConfigurationField("enableReasoningEffort", false)
+						setApiConfigurationField("reasoningEffort", "disable")
+					} else {
+						// "none", "minimal", "low", "medium", "high" all enable reasoning
+						setApiConfigurationField("enableReasoningEffort", true)
+						setApiConfigurationField("reasoningEffort", value as ReasoningEffortWithMinimal)
+					}
 				}}>
 				<SelectTrigger className="w-full">
 					<SelectValue
 						placeholder={
 							currentReasoningEffort
-								? t(`settings:providers.reasoningEffort.${currentReasoningEffort}`)
+								? currentReasoningEffort === "none" || currentReasoningEffort === "disable"
+									? t("settings:providers.reasoningEffort.none")
+									: t(`settings:providers.reasoningEffort.${currentReasoningEffort}`)
 								: t("settings:common.select")
 						}
 					/>
 				</SelectTrigger>
 				<SelectContent>
 					{availableOptions.map((value) => (
 						<SelectItem key={value} value={value}>
-							{t(`settings:providers.reasoningEffort.${value}`)}
+							{value === "none" || value === "disable"
+								? t("settings:providers.reasoningEffort.none")
+								: t(`settings:providers.reasoningEffort.${value}`)}
 						</SelectItem>
 					))}
 				</SelectContent>