better ux around cline provider model selection (RooCodeInc#2694)

* better ux around cline provider model selection

* changeset

* small styling + naming

* Modify recommended models

* Fixes

---------

Co-authored-by: Saoud Rizwan <[email protected]>

Author: pashpashpash

.changeset/grumpy-eyes-refuse.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+recommended models ux for cline provider

package-lock.json

@@ -0,0 +1,65 @@
+import React from "react"
+import styled from "styled-components"
+
+export interface FeaturedModelCardProps {
+	modelId: string
+	description: string
+	onClick: () => void
+	isSelected: boolean
+	label: string
+}
+
+const CardContainer = styled.div<{ isSelected: boolean }>`
+	padding: 2px 4px;
+	margin-bottom: 2px;
+	border-radius: 3px;
+	border: 1px solid var(--vscode-textLink-foreground);
+	opacity: ${(props) => (props.isSelected ? 1 : 0.6)};
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--vscode-list-hoverBackground);
+		opacity: 1;
+	}
+`
+
+const ModelHeader = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`
+
+const ModelName = styled.div`
+	font-weight: 500;
+	font-size: 12px;
+	line-height: 1.2;
+`
+
+const Label = styled.span`
+	font-size: 10px;
+	color: var(--vscode-textLink-foreground);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	font-weight: 500;
+`
+
+const Description = styled.div`
+	margin-top: 0px;
+	font-size: 11px;
+	color: var(--vscode-descriptionForeground);
+	line-height: 1.2;
+`
+
+const FeaturedModelCard: React.FC<FeaturedModelCardProps> = ({ modelId, description, onClick, isSelected, label }) => {
+	return (
+		<CardContainer isSelected={isSelected} onClick={onClick}>
+			<ModelHeader>
+				<ModelName>{modelId}</ModelName>
+				<Label>{label}</Label>
+			</ModelHeader>
+			<Description>{description}</Description>
+		</CardContainer>
+	)
+}
+
+export default FeaturedModelCard

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

@@ -11,11 +11,31 @@ import { highlight } from "../history/HistoryView"
 import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
 import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
 import ThinkingBudgetSlider from "./ThinkingBudgetSlider"
+import FeaturedModelCard from "./FeaturedModelCard"
 
 export interface OpenRouterModelPickerProps {
 	isPopup?: boolean
 }
 
+// Featured models for Cline provider
+const featuredModels = [
+	{
+		id: "anthropic/claude-3.7-sonnet",
+		description: "Leading model for agentic coding",
+		label: "Best",
+	},
+	{
+		id: "google/gemini-2.5-pro-preview-03-25",
+		description: "Large 1M context window, great value",
+		label: "Trending",
+	},
+	{
+		id: "meta-llama/llama-4-maverick",
+		description: "Efficient performance at lower cost",
+		label: "New",
+	},
+]
+
 const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = ({ isPopup }) => {
 	const { apiConfiguration, setApiConfiguration, openRouterModels } = useExtensionState()
 	const [searchTerm, setSearchTerm] = useState(apiConfiguration?.openRouterModelId || openRouterDefaultModelId)
@@ -147,7 +167,8 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = ({ isPopup }
 	const showBudgetSlider = useMemo(() => {
 		return (
 			selectedModelId?.toLowerCase().includes("claude-3-7-sonnet") ||
-			selectedModelId?.toLowerCase().includes("claude-3.7-sonnet")
+			selectedModelId?.toLowerCase().includes("claude-3.7-sonnet") ||
+			selectedModelId?.toLowerCase().includes("claude-3.7-sonnet:thinking")
 		)
 	}, [selectedModelId])
 
@@ -165,6 +186,25 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = ({ isPopup }
 				<label htmlFor="model-search">
 					<span style={{ fontWeight: 500 }}>Model</span>
 				</label>
+
+				{apiConfiguration?.apiProvider === "cline" && (
+					<div style={{ marginBottom: "6px", marginTop: 4 }}>
+						{featuredModels.map((model) => (
+							<FeaturedModelCard
+								key={model.id}
+								modelId={model.id}
+								description={model.description}
+								label={model.label}
+								isSelected={selectedModelId === model.id}
+								onClick={() => {
+									handleModelChange(model.id)
+									setIsDropdownVisible(false)
+								}}
+							/>
+						))}
+					</div>
+				)}
+
 				<DropdownWrapper ref={dropdownRef}>
 					<VSCodeTextField
 						id="model-search"