fix: replace MaxTokensControl input with MaxTokensSlider

- Replaced the input field with a slider component as requested by Daniel
- Moved Max Output Tokens control to Advanced Settings for all models
- Kept the existing slider behavior from reasoning models
- Updated tests to match the new implementation
- Removed the old MaxTokensControl component and its tests

This addresses the issue where changing custom tokens affected the reasoning slider value and provides a more consistent UX by using sliders for both max output tokens and max thinking tokens.

Author: MuriloFP

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

@@ -81,7 +81,7 @@ import { DiffSettingsControl } from "./DiffSettingsControl"
 import { TemperatureControl } from "./TemperatureControl"
 import { RateLimitSecondsControl } from "./RateLimitSecondsControl"
 import { ConsecutiveMistakeLimitControl } from "./ConsecutiveMistakeLimitControl"
-import { MaxTokensControl } from "./MaxTokensControl"
+import { MaxTokensSlider } from "./MaxTokensSlider"
 import { BedrockCustomArn } from "./providers/BedrockCustomArn"
 import { buildDocLink } from "@src/utils/docLinks"
 
@@ -575,12 +575,10 @@ const ApiOptions = ({
 							onChange={handleInputChange("modelTemperature", noTransform)}
 							maxValue={2}
 						/>
-						<MaxTokensControl
+						<MaxTokensSlider
 							value={apiConfiguration.modelMaxTokens}
 							onChange={(value) => setApiConfigurationField("modelMaxTokens", value)}
 							modelInfo={selectedModelInfo}
-							minValue={2048}
-							maxValue={selectedModelInfo?.maxTokens || 200000}
 						/>
 						<RateLimitSecondsControl
 							value={apiConfiguration.rateLimitSeconds || 0}

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

@@ -0,0 +1,46 @@
+import React from "react"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { ModelInfo } from "@roo-code/types"
+import { Slider } from "@/components/ui"
+import { DEFAULT_HYBRID_REASONING_MODEL_MAX_TOKENS } from "@roo/api"
+
+interface MaxTokensSliderProps {
+	value?: number
+	onChange: (value: number | undefined) => void
+	modelInfo?: ModelInfo
+	className?: string
+}
+
+export const MaxTokensSlider: React.FC<MaxTokensSliderProps> = ({ value, onChange, modelInfo, className }) => {
+	const { t } = useAppTranslation()
+
+	// Use the same logic as the original ThinkingBudget component
+	const customMaxOutputTokens = value || DEFAULT_HYBRID_REASONING_MODEL_MAX_TOKENS
+	const maxValue = modelInfo?.maxTokens
+		? Math.max(modelInfo.maxTokens, customMaxOutputTokens, DEFAULT_HYBRID_REASONING_MODEL_MAX_TOKENS)
+		: Math.max(customMaxOutputTokens, DEFAULT_HYBRID_REASONING_MODEL_MAX_TOKENS)
+
+	return (
+		<div className={`flex flex-col gap-1 ${className || ""}`}>
+			<div className="font-medium">{t("settings:providers.maxOutputTokens.label")}</div>
+			<div className="flex items-center gap-1">
+				<Slider
+					min={8192}
+					max={maxValue}
+					step={1024}
+					value={[customMaxOutputTokens]}
+					onValueChange={([value]) => onChange(value)}
+				/>
+				<div className="w-12 text-sm text-center">{customMaxOutputTokens}</div>
+			</div>
+			<div className="text-sm text-vscode-descriptionForeground">
+				{t("settings:providers.maxOutputTokens.description")}
+			</div>
+			{modelInfo && (
+				<div className="text-sm text-vscode-descriptionForeground">
+					{t("settings:providers.maxOutputTokens.modelSupports", { max: modelInfo.maxTokens })}
+				</div>
+			)}
+		</div>
+	)
+}

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

@@ -65,7 +65,7 @@ export const ThinkingBudget = ({ apiConfiguration, setApiConfigurationField, mod
 						<Slider
 							min={1024}
 							max={modelMaxThinkingTokens}
-							step={256}
+							step={1024}
 							value={[Math.min(customMaxThinkingTokens, modelMaxThinkingTokens)]}
 							onValueChange={([value]) => setApiConfigurationField("modelMaxThinkingTokens", value)}
 						/>

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

@@ -83,9 +83,21 @@ vi.mock("@/components/ui", () => ({
 	Popover: ({ children, _open, _onOpenChange }: any) => <div className="popover-mock">{children}</div>,
 	PopoverContent: ({ children, _className }: any) => <div className="popover-content-mock">{children}</div>,
 	PopoverTrigger: ({ children, _asChild }: any) => <div className="popover-trigger-mock">{children}</div>,
-	Slider: ({ value, onChange }: any) => (
+	Slider: ({ value, onChange, onValueChange, min, max, step }: any) => (
 		<div data-testid="slider">
-			<input type="range" value={value || 0} onChange={(e) => onChange(parseFloat(e.target.value))} />
+			<input
+				type="range"
+				min={min}
+				max={max}
+				step={step}
+				value={value?.[0] || value || 0}
+				onChange={(e) => {
+					const val = parseFloat(e.target.value)
+					if (onChange) onChange(val)
+					if (onValueChange) onValueChange([val])
+				}}
+				data-testid="slider-input"
+			/>
 		</div>
 	),
 	SearchableSelect: ({ value, onValueChange, options, placeholder, "data-testid": dataTestId }: any) => (
@@ -114,7 +126,7 @@ vi.mock("@/components/ui", () => ({
 	CollapsibleContent: ({ children, className }: any) => (
 		<div className={`collapsible-content-mock ${className || ""}`}>{children}</div>
 	),
-	// Add Input component for MaxTokensControl
+	// Add Input component for other controls
 	Input: ({ id, type, value, onChange, min, max, className, ...props }: any) => (
 		<input
 			id={id}