Move sort routing option

Author: saoudrizwan

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

@@ -51,7 +51,7 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
 import { getAsVar, VSC_DESCRIPTION_FOREGROUND } from "../../utils/vscStyles"
 import VSCodeButtonLink from "../common/VSCodeButtonLink"
-import OpenRouterModelPicker, { ModelDescriptionMarkdown } from "./OpenRouterModelPicker"
+import OpenRouterModelPicker, { ModelDescriptionMarkdown, OPENROUTER_MODEL_PICKER_Z_INDEX } from "./OpenRouterModelPicker"
 import { ClineAccountInfoCard } from "./ClineAccountInfoCard"
 
 interface ApiOptionsProps {
@@ -95,6 +95,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 	const [awsEndpointSelected, setAwsEndpointSelected] = useState(!!apiConfiguration?.awsBedrockEndpoint)
 	const [modelConfigurationSelected, setModelConfigurationSelected] = useState(false)
 	const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
+	const [providerSortingSelected, setProviderSortingSelected] = useState(!!apiConfiguration?.openRouterProviderSorting)
 
 	const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => {
 		setApiConfiguration({
@@ -1353,6 +1354,57 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 				</p>
 			)}
 
+			{(selectedProvider === "openrouter" || selectedProvider === "cline") && showModelOptions && (
+				<>
+					<VSCodeCheckbox
+						style={{ marginTop: -10 }}
+						checked={providerSortingSelected}
+						onChange={(e: any) => {
+							const isChecked = e.target.checked === true
+							setProviderSortingSelected(isChecked)
+							if (!isChecked) {
+								setApiConfiguration({
+									...apiConfiguration,
+									openRouterProviderSorting: "",
+								})
+							}
+						}}>
+						Sort underlying provider routing
+					</VSCodeCheckbox>
+
+					{providerSortingSelected && (
+						<div style={{ marginBottom: -6 }}>
+							<DropdownContainer className="dropdown-container" zIndex={OPENROUTER_MODEL_PICKER_Z_INDEX - 3}>
+								<VSCodeDropdown
+									style={{ width: "100%", marginTop: 3 }}
+									value={apiConfiguration?.openRouterProviderSorting}
+									onChange={(e: any) => {
+										setApiConfiguration({
+											...apiConfiguration,
+											openRouterProviderSorting: e.target.value,
+										})
+									}}>
+									<VSCodeOption value="">Default</VSCodeOption>
+									<VSCodeOption value="price">Price</VSCodeOption>
+									<VSCodeOption value="throughput">Throughput</VSCodeOption>
+									<VSCodeOption value="latency">Latency</VSCodeOption>
+								</VSCodeDropdown>
+							</DropdownContainer>
+							<p style={{ fontSize: "12px", marginTop: 3, color: "var(--vscode-descriptionForeground)" }}>
+								{!apiConfiguration?.openRouterProviderSorting &&
+									"Default behavior is to load balance requests across providers (like AWS, Google Vertex, Anthropic), prioritizing price while considering provider uptime"}
+								{apiConfiguration?.openRouterProviderSorting === "price" &&
+									"Sort providers by price, prioritizing the lowest cost provider"}
+								{apiConfiguration?.openRouterProviderSorting === "throughput" &&
+									"Sort providers by throughput, prioritizing the provider with the highest throughput (may increase cost)"}
+								{apiConfiguration?.openRouterProviderSorting === "latency" &&
+									"Sort providers by response time, prioritizing the provider with the lowest latency"}
+							</p>
+						</div>
+					)}
+				</>
+			)}
+
 			{selectedProvider !== "openrouter" &&
 				selectedProvider !== "cline" &&
 				selectedProvider !== "openai" &&

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

@@ -25,7 +25,6 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = ({ isPopup }
 	const itemRefs = useRef<(HTMLDivElement | null)[]>([])
 	const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
 	const dropdownListRef = useRef<HTMLDivElement>(null)
-	const [providerSortingSelected, setProviderSortingSelected] = useState(!!apiConfiguration?.openRouterProviderSorting)
 
 	const handleModelChange = (newModelId: string) => {
 		// could be setting invalid model id/undefined info but validation will catch it
@@ -223,52 +222,7 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = ({ isPopup }
 					{showBudgetSlider && (
 						<ThinkingBudgetSlider apiConfiguration={apiConfiguration} setApiConfiguration={setApiConfiguration} />
 					)}
-					<VSCodeCheckbox
-						style={{ marginTop: 3 }}
-						checked={providerSortingSelected}
-						onChange={(e: any) => {
-							const isChecked = e.target.checked === true
-							setProviderSortingSelected(isChecked)
-							if (!isChecked) {
-								setApiConfiguration({
-									...apiConfiguration,
-									openRouterProviderSorting: "",
-								})
-							}
-						}}>
-						Sort underlying provider routing
-					</VSCodeCheckbox>
-
-					{providerSortingSelected && (
-						<div style={{ marginBottom: -6 }}>
-							<DropdownContainer className="dropdown-container" zIndex={OPENROUTER_MODEL_PICKER_Z_INDEX - 3}>
-								<VSCodeDropdown
-									style={{ width: "100%", marginTop: 3 }}
-									value={apiConfiguration?.openRouterProviderSorting}
-									onChange={(e: any) => {
-										setApiConfiguration({
-											...apiConfiguration,
-											openRouterProviderSorting: e.target.value,
-										})
-									}}>
-									<VSCodeOption value="">Default</VSCodeOption>
-									<VSCodeOption value="price">Price</VSCodeOption>
-									<VSCodeOption value="throughput">Throughput</VSCodeOption>
-									<VSCodeOption value="latency">Latency</VSCodeOption>
-								</VSCodeDropdown>
-							</DropdownContainer>
-							<p style={{ fontSize: "12px", marginTop: 3, color: "var(--vscode-descriptionForeground)" }}>
-								{!apiConfiguration?.openRouterProviderSorting &&
-									"Default behavior is to load balance requests across providers (like AWS, Google Vertex, Anthropic), prioritizing price while considering provider uptime"}
-								{apiConfiguration?.openRouterProviderSorting === "price" &&
-									"Sort providers by price, prioritizing the lowest cost provider"}
-								{apiConfiguration?.openRouterProviderSorting === "throughput" &&
-									"Sort providers by throughput, prioritizing the provider with the highest throughput (may increase cost)"}
-								{apiConfiguration?.openRouterProviderSorting === "latency" &&
-									"Sort providers by response time, prioritizing the provider with the lowest latency"}
-							</p>
-						</div>
-					)}
+
 					<ModelInfoView
 						selectedModelId={selectedModelId}
 						modelInfo={selectedModelInfo}