Support prompt caching and thinking for Opus 4.1

- Add openWalkthrough RPC method to ui.proto
- Enable quick wins display for users with <3 tasks in history
- Add "Take a Tour" button in HomeHeader when quick wins are shown
- Update WelcomeSection to pass shouldShowQuickWins prop to HomeHeader

.changeset/stupid-jars-explain.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Enabling quickwins and adding a button to show that you can do a walkthrough

proto/cline/ui.proto

@@ -267,4 +267,7 @@ service UiService {
   
   // Opens a URL in the default browser
   rpc openUrl(StringRequest) returns (Empty);
+  
+  // Opens the Cline walkthrough
+  rpc openWalkthrough(EmptyRequest) returns (Empty);
 }

webview-ui/src/components/chat/ChatView.tsx

@@ -39,6 +39,7 @@ interface ChatViewProps {
 
 // Use constants from the imported module
 const MAX_IMAGES_AND_FILES_PER_MESSAGE = CHAT_CONSTANTS.MAX_IMAGES_AND_FILES_PER_MESSAGE
+const QUICK_WINS_HISTORY_THRESHOLD = 3
 
 const IS_STANDALONE = window?.__is_standalone__ ?? false
 
@@ -51,8 +52,11 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 		telemetrySetting,
 		navigateToChat,
 		mode,
+		userInfo,
 	} = useExtensionState()
-	const shouldShowQuickWins = false // !taskHistory || taskHistory.length < QUICK_WINS_HISTORY_THRESHOLD
+	const isProdHostedApp = userInfo?.apiBaseUrl === "https://app.cline.bot"
+	const shouldShowQuickWins = isProdHostedApp && (!taskHistory || taskHistory.length < QUICK_WINS_HISTORY_THRESHOLD)
+
 	//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined) : undefined
 	const task = useMemo(() => messages.at(0), [messages]) // leaving this less safe version here since if the first message is not a task, then the extension is in a bad state and needs to be debugged (see Cline.abort)
 	const modifiedMessages = useMemo(() => combineApiRequests(combineCommandSequences(messages.slice(1))), [messages])

webview-ui/src/components/chat/chat-view/components/layout/WelcomeSection.tsx

@@ -25,7 +25,7 @@ export const WelcomeSection: React.FC<WelcomeSectionProps> = ({
 			<div className="overflow-y-auto flex flex-col pb-2.5">
 				{telemetrySetting === "unset" && <TelemetryBanner />}
 				{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
-				<HomeHeader />
+				<HomeHeader shouldShowQuickWins={shouldShowQuickWins} />
 				{!shouldShowQuickWins && taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
 			</div>
 			<SuggestedTasks shouldShowQuickWins={shouldShowQuickWins} />

webview-ui/src/components/welcome/HomeHeader.tsx

@@ -1,7 +1,21 @@
 import ClineLogoVariable from "@/assets/ClineLogoVariable"
 import HeroTooltip from "@/components/common/HeroTooltip"
+import { UiServiceClient } from "@/services/grpc-client"
+import { EmptyRequest } from "@shared/proto/cline/common"
+
+interface HomeHeaderProps {
+	shouldShowQuickWins?: boolean
+}
+
+const HomeHeader = ({ shouldShowQuickWins = false }: HomeHeaderProps) => {
+	const handleTakeATour = async () => {
+		try {
+			await UiServiceClient.openWalkthrough(EmptyRequest.create())
+		} catch (error) {
+			console.error("Error opening walkthrough:", error)
+		}
+	}
 
-const HomeHeader = () => {
 	return (
 		<div className="flex flex-col items-center mb-5">
 			<div className="my-5">
@@ -21,6 +35,16 @@ const HomeHeader = () => {
 					/>
 				</HeroTooltip>
 			</div>
+			{shouldShowQuickWins && (
+				<div className="mt-4">
+					<button
+						onClick={handleTakeATour}
+						className="flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--vscode-panel-border)] bg-white/[0.02] hover:bg-[var(--vscode-list-hoverBackground)] transition-colors duration-150 ease-in-out text-[var(--vscode-editor-foreground)] text-sm font-medium cursor-pointer">
+						Take a Tour
+						<span className="codicon codicon-play scale-90"></span>
+					</button>
+				</div>
+			)}
 		</div>
 	)
 }

webview-ui/src/components/welcome/QuickWinCard.tsx

@@ -7,7 +7,7 @@ interface QuickWinCardProps {
 }
 
 const renderIcon = (iconName?: string) => {
-	if (!iconName) return <span className="codicon codicon-rocket text-lg"></span>
+	if (!iconName) return <span className="codicon codicon-rocket !text-[28px] !leading-[1]"></span>
 
 	let iconClass = "codicon-rocket"
 	switch (iconName) {
@@ -23,21 +23,25 @@ const renderIcon = (iconName?: string) => {
 		default:
 			break
 	}
-	return <span className={`codicon ${iconClass} text-lg`}></span>
+	return <span className={`codicon ${iconClass} !text-[28px] !leading-[1]`}></span>
 }
 
 const QuickWinCard: React.FC<QuickWinCardProps> = ({ task, onExecute }) => {
 	return (
 		<div
-			className="flex items-center p-1 space-x-1.5 rounded-full cursor-pointer group transition-colors duration-150 ease-in-out bg-[var(--vscode-sideBar-background)] border border-[var(--vscode-panel-border)] hover:bg-[var(--vscode-list-hoverBackground)]"
+			className="flex items-center mb-2 py-0 px-5 space-x-3 rounded-full cursor-pointer group transition-colors duration-150 ease-in-out bg-white/[0.02] border border-[var(--vscode-panel-border)] hover:bg-[var(--vscode-list-hoverBackground)]"
 			onClick={() => onExecute()}>
-			<div className="flex-shrink-0 flex items-center justify-center w-5 h-5 text-[var(--vscode-icon-foreground)]">
+			<div className="flex-shrink-0 flex items-center justify-center w-6 h-6 text-[var(--vscode-icon-foreground)]">
 				{renderIcon(task.icon)}
 			</div>
 
 			<div className="flex-grow min-w-0">
-				<h3 className="text-xs font-medium truncate text-[var(--vscode-editor-foreground)]">{task.title}</h3>
-				<p className="text-xs truncate text-[var(--vscode-descriptionForeground)]">{task.description}</p>
+				<h3 className="text-sm font-medium truncate text-[var(--vscode-editor-foreground)] leading-tight mb-0 mt-0 pt-3">
+					{task.title}
+				</h3>
+				<p className="text-xs truncate text-[var(--vscode-descriptionForeground)] leading-tight mt-[1px]">
+					{task.description}
+				</p>
 			</div>
 		</div>
 	)

webview-ui/src/components/welcome/SuggestedTasks.tsx

@@ -13,8 +13,8 @@ export const SuggestedTasks: React.FC<{ shouldShowQuickWins: boolean }> = ({ sho
 		return (
 			<div className="px-4 pt-1 pb-3 select-none">
 				{" "}
-				<h2 className="text-sm font-medium mb-2.5 text-center text-[var(--vscode-editor-foreground)]">
-					Quick <span className="text-[var(--vscode-terminal-ansiBrightCyan)]">[Wins]</span> with Cline
+				<h2 className="text-sm font-medium mb-2.5 text-center text-gray">
+					Quick <span className="text-white">[Wins]</span> with Cline
 				</h2>
 				<div className="flex flex-col space-y-1">
 					{" "}

webview-ui/src/components/welcome/quickWinTasks.ts

@@ -12,7 +12,7 @@ export const quickWinTasks: QuickWinTask[] = [
 	{
 		id: "nextjs_notetaking_app",
 		title: "Build a Next.js App",
-		description: "Create a beautiful notetaking application with Next.js and Tailwind CSS.",
+		description: "Create a beautiful notetaking app with Next.js and Tailwind",
 		icon: "WebAppIcon",
 		actionCommand: "cline/createNextJsApp",
 		prompt: "Make a beautiful Next.js notetaking app, using Tailwind CSS for styling. Set up the basic structure and a simple UI for adding and viewing notes.",
@@ -21,10 +21,10 @@ export const quickWinTasks: QuickWinTask[] = [
 	{
 		id: "terminal_cli_tool",
 		title: "Craft a CLI Tool",
-		description: "Develop a powerful terminal CLI to automate a cool task.",
+		description: "Develop a powerful terminal CLI to automate a cool task",
 		icon: "TerminalIcon",
 		actionCommand: "cline/createCliTool",
-		prompt: "Make a terminal CLI tool using Node.js that fetches the current weather for a given city using a free weather API and displays it in a user-friendly format.",
+		prompt: "Make a terminal CLI tool using Node.js that organizes files in a directory by type, size, or date. It should have options to sort files into folders, show file statistics, find duplicates, and clean up empty directories. Include colorful output and progress indicators.",
 		buttonText: ">",
 	},
 	{