Initial edit commands

Removes quick wins display by setting shouldShowQuickWins to false, cleans up related code in ChatView and simplifies component rendering logic. Also includes code cleanup in QuickWinCard component by removing redundant comments.

.changeset/kind-horses-bow.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Add a beautiful experience for new users of Cline

src/core/controller/index.ts

@@ -470,6 +470,13 @@ export class Controller {
 				}
 				break
 			}
+			case "executeQuickWin":
+				if (message.payload) {
+					const { command, title } = message.payload
+					this.outputChannel.appendLine(`Received executeQuickWin: command='${command}', title='${title}'`)
+					await this.initTask(title)
+				}
+				break
 
 			// Add more switch case statements here as more webview message commands
 			// are created within the webview context (i.e. inside media/main.js)

src/shared/WebviewMessage.ts

@@ -32,6 +32,7 @@ export interface WebviewMessage {
 		| "grpc_request"
 		| "grpc_request_cancel"
 		| "toggleWorkflow"
+		| "executeQuickWin"
 
 	text?: string
 	disabled?: boolean
@@ -82,6 +83,8 @@ export interface WebviewMessage {
 	enabled?: boolean
 	filename?: string
 
+	payload?: { command: string; title: string }
+
 	offset?: number
 	shellIntegrationTimeout?: number
 }

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

@@ -34,6 +34,8 @@ import rehypeRemark from "rehype-remark"
 import rehypeParse from "rehype-parse"
 import HomeHeader from "../welcome/HomeHeader"
 import AutoApproveBar from "./auto-approve-menu/AutoApproveBar"
+import { SuggestedTasks } from "../welcome/SuggestedTasks"
+
 interface ChatViewProps {
 	isHidden: boolean
 	showAnnouncement: boolean
@@ -87,10 +89,11 @@ async function convertHtmlToMarkdown(html: string) {
 }
 
 export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
+const QUICK_WINS_HISTORY_THRESHOLD = 300
 
 const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryView }: ChatViewProps) => {
 	const { version, clineMessages: messages, taskHistory, apiConfiguration, telemetrySetting } = useExtensionState()
-
+	const shouldShowQuickWins = false // !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])
@@ -1056,11 +1059,16 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 					{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
 
 					<HomeHeader />
-					{taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
+					{!shouldShowQuickWins && taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
 				</div>
 			)}
 
-			{!task && <AutoApproveBar />}
+			{!task && (
+				<>
+					<SuggestedTasks shouldShowQuickWins={shouldShowQuickWins} />
+					<AutoApproveBar />
+				</>
+			)}
 
 			{task && (
 				<>

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

@@ -0,0 +1,46 @@
+import React from "react"
+import { QuickWinTask } from "./quickWinTasks"
+
+interface QuickWinCardProps {
+	task: QuickWinTask
+	onExecute: () => void
+}
+
+const renderIcon = (iconName?: string) => {
+	if (!iconName) return <span className="codicon codicon-rocket text-lg"></span>
+
+	let iconClass = "codicon-rocket"
+	switch (iconName) {
+		case "WebAppIcon":
+			iconClass = "codicon-dashboard"
+			break
+		case "TerminalIcon":
+			iconClass = "codicon-terminal"
+			break
+		case "GameIcon":
+			iconClass = "codicon-game"
+			break
+		default:
+			break
+	}
+	return <span className={`codicon ${iconClass} text-lg`}></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)]"
+			onClick={() => onExecute()}>
+			<div className="flex-shrink-0 flex items-center justify-center w-5 h-5 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>
+			</div>
+		</div>
+	)
+}
+
+export default QuickWinCard

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

@@ -0,0 +1,27 @@
+import React from "react"
+import { TaskServiceClient } from "@/services/grpc-client"
+import QuickWinCard from "./QuickWinCard"
+import { QuickWinTask, quickWinTasks } from "./quickWinTasks"
+
+export const SuggestedTasks: React.FC<{ shouldShowQuickWins: boolean }> = ({ shouldShowQuickWins }) => {
+	const handleExecuteQuickWin = async (prompt: string) => {
+		await TaskServiceClient.newTask({ text: prompt, images: [] })
+	}
+
+	if (shouldShowQuickWins) {
+		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>
+				<div className="flex flex-col space-y-1">
+					{" "}
+					{quickWinTasks.map((task: QuickWinTask) => (
+						<QuickWinCard key={task.id} task={task} onExecute={() => handleExecuteQuickWin(task.prompt)} />
+					))}
+				</div>
+			</div>
+		)
+	}
+}

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

@@ -0,0 +1,39 @@
+export interface QuickWinTask {
+	id: string
+	title: string
+	description: string
+	icon?: string
+	actionCommand: string
+	prompt: string
+	buttonText?: string
+}
+
+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.",
+		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.",
+		buttonText: ">",
+	},
+	{
+		id: "terminal_cli_tool",
+		title: "Craft a CLI Tool",
+		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.",
+		buttonText: ">",
+	},
+	{
+		id: "snake_game",
+		title: "Develop a Game",
+		description: "Code a classic Snake game that runs in the browser.",
+		icon: "GameIcon",
+		actionCommand: "cline/createSnakeGame",
+		prompt: "Make a classic Snake game using HTML, CSS, and JavaScript. The game should be playable in the browser, with keyboard controls for the snake, a scoring system, and a game over state.",
+		buttonText: ">",
+	},
+]