Add new welcome screen

.changeset/loud-jokes-send.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": minor
+---
+
+Add new welcome screen for improved onboarding

packages/types/src/global-settings.ts

@@ -241,6 +241,7 @@ export const globalSettingsSchema = z.object({
 	enterBehavior: z.enum(["send", "newline"]).optional(),
 	profileThresholds: z.record(z.string(), z.number()).optional(),
 	hasOpenedModeSelector: z.boolean().optional(),
+	hasCompletedOnboarding: z.boolean().optional(), // kilocode_change: Track if user has completed onboarding flow
 	lastModeExportPath: z.string().optional(),
 	lastModeImportPath: z.string().optional(),
 	appendSystemPrompt: z.string().optional(), // kilocode_change: Custom text to append to system prompt (CLI only)

packages/types/src/vscode-extension-host.ts

@@ -639,6 +639,7 @@ export type ExtensionState = Pick<
 	marketplaceInstalledMetadata?: { project: Record<string, any>; global: Record<string, any> }
 	profileThresholds: Record<string, number>
 	hasOpenedModeSelector: boolean
+	hasCompletedOnboarding?: boolean // kilocode_change: Track if user has completed onboarding flow
 	openRouterImageApiKey?: string
 	kiloCodeImageApiKey?: string
 	openRouterUseMiddleOutTransform?: boolean
@@ -843,6 +844,7 @@ export interface WebviewMessage {
 		| "searchFiles"
 		| "toggleApiConfigPin"
 		| "hasOpenedModeSelector"
+		| "hasCompletedOnboarding" // kilocode_change: Mark onboarding as completed
 		| "clearCloudAuthSkipModel"
 		| "cloudButtonClicked"
 		| "rooCloudSignIn"

src/core/webview/ClineProvider.ts

@@ -2521,6 +2521,7 @@ export class ClineProvider
 			profileThresholds: profileThresholds ?? {},
 			cloudApiUrl: getRooCodeApiUrl(),
 			hasOpenedModeSelector: this.getGlobalState("hasOpenedModeSelector") ?? false,
+			hasCompletedOnboarding: this.getGlobalState("hasCompletedOnboarding"), // kilocode_change: Track onboarding completion - undefined means new user
 			systemNotificationsEnabled: systemNotificationsEnabled ?? false, // kilocode_change
 			dismissedNotificationIds: dismissedNotificationIds ?? [], // kilocode_change
 			morphApiKey, // kilocode_change
@@ -2589,6 +2590,7 @@ export class ClineProvider
 			| "clineMessages"
 			| "renderContext"
 			| "hasOpenedModeSelector"
+			| "hasCompletedOnboarding" // kilocode_change
 			| "version"
 			| "shouldShowAnnouncement"
 			| "hasSystemPromptOverride"

src/core/webview/webviewMessageHandler.ts

@@ -1908,6 +1908,12 @@ export const webviewMessageHandler = async (
 			await updateGlobalState("hasOpenedModeSelector", message.bool ?? true)
 			await provider.postStateToWebview()
 			break
+		// kilocode_change start: Handle onboarding completion
+		case "hasCompletedOnboarding":
+			await updateGlobalState("hasCompletedOnboarding", message.bool ?? true)
+			await provider.postStateToWebview()
+			break
+		// kilocode_change end
 		// kilocode_change start
 		case "kiloCodeImageApiKey":
 			await provider.contextProxy.setValue("kiloCodeImageApiKey", message.text)

webview-ui/src/App.tsx

@@ -14,7 +14,7 @@ import { ExtensionStateContextProvider, useExtensionState } from "./context/Exte
 import ChatView, { ChatViewRef } from "./components/chat/ChatView"
 import HistoryView from "./components/history/HistoryView"
 import SettingsView, { SettingsViewRef } from "./components/settings/SettingsView"
-import WelcomeView from "./components/kilocode/welcome/WelcomeView" // kilocode_change
+import OnboardingView from "./components/kilocode/welcome/OnboardingView" // kilocode_change
 import ProfileView from "./components/kilocode/profile/ProfileView" // kilocode_change
 import McpView from "./components/mcp/McpView" // kilocode_change
 import AuthView from "./components/kilocode/auth/AuthView" // kilocode_change
@@ -80,7 +80,6 @@ const defaultSectionByAction: Partial<Record<NonNullable<ExtensionMessage["actio
 const App = () => {
 	const {
 		didHydrateState,
-		showWelcome,
 		shouldShowAnnouncement,
 		telemetrySetting,
 		telemetryKey,
@@ -94,6 +93,8 @@ const App = () => {
 		renderContext,
 		mdmCompliant,
 		apiConfiguration, // kilocode_change
+		hasCompletedOnboarding, // kilocode_change: Track onboarding state
+		taskHistoryFullLength, // kilocode_change: Used to detect existing users
 	} = useExtensionState()
 
 	// Create a persistent state manager
@@ -314,16 +315,54 @@ const App = () => {
 		}
 	}, [tab])
 
+	// kilocode_change start: Onboarding handlers
+	const handleSelectFreeModels = useCallback(() => {
+		// Mark onboarding as complete - the default profile is already set up with a free model
+		vscode.postMessage({ type: "hasCompletedOnboarding", bool: true })
+	}, [])
+
+	const handleSelectPremiumModels = useCallback(() => {
+		// Mark onboarding as complete
+		vscode.postMessage({ type: "hasCompletedOnboarding", bool: true })
+		// Navigate to auth view which will show the device code and handle the OAuth flow
+		// The AuthView auto-starts device auth on mount
+		switchTab("auth")
+		setAuthReturnTo("chat")
+	}, [switchTab])
+
+	const handleSelectBYOK = useCallback(() => {
+		// Mark onboarding as complete
+		vscode.postMessage({ type: "hasCompletedOnboarding", bool: true })
+		// Navigate to settings with providers section
+		switchTab("settings")
+		setCurrentSection("providers")
+	}, [switchTab])
+
+	// One-time migration: mark existing users as having completed onboarding
+	useEffect(() => {
+		if (hasCompletedOnboarding !== true && (taskHistoryFullLength ?? 0) > 0) {
+			vscode.postMessage({ type: "hasCompletedOnboarding", bool: true })
+		}
+	}, [hasCompletedOnboarding, taskHistoryFullLength])
+	// kilocode_change end
+
 	if (!didHydrateState) {
 		return null
 	}
 
+	// kilocode_change start: Show OnboardingView for new users who haven't completed onboarding
+	const showOnboarding = hasCompletedOnboarding !== true
+
 	// Do not conditionally load ChatView, it's expensive and there's state we
 	// don't want to lose (user input, disableInput, askResponse promise, etc.)
-	// kilocode_change: no WelcomeViewProvider toggle
-	return showWelcome ? (
-		<WelcomeView />
+	return showOnboarding ? (
+		<OnboardingView
+			onSelectFreeModels={handleSelectFreeModels}
+			onSelectPremiumModels={handleSelectPremiumModels}
+			onSelectBYOK={handleSelectBYOK}
+		/>
 	) : (
+		// kilocode_change end
 		<>
 			{/* kilocode_change start */}
 			<MemoryWarningBanner />

webview-ui/src/__tests__/App.spec.tsx

@@ -175,6 +175,10 @@ describe("App", () => {
 			didHydrateState: true,
 			showWelcome: false,
 			shouldShowAnnouncement: false,
+			// kilocode_change start: avoid rendering onboarding screen in App tests
+			hasCompletedOnboarding: true,
+			taskHistoryFullLength: 1,
+			// kilocode_change end
 			experiments: {},
 			language: "en",
 			telemetrySetting: "enabled",

webview-ui/src/components/kilocode/welcome/OnboardingView.tsx

@@ -0,0 +1,63 @@
+// kilocode_change - new file
+import React from "react"
+import Logo from "../common/Logo"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+
+interface OnboardingOptionProps {
+	title: string
+	description: string
+	onClick: () => void
+}
+
+const OnboardingOption: React.FC<OnboardingOptionProps> = ({ title, description, onClick }) => {
+	return (
+		<button
+			className="w-full p-5 rounded-lg border border-vscode-panel-border bg-vscode-editor-background hover:bg-vscode-list-hoverBackground cursor-pointer text-left transition-colors"
+			onClick={onClick}>
+			<h3 className="text-lg font-semibold text-vscode-foreground m-0 mb-2">{title}</h3>
+			<p className="text-sm text-vscode-descriptionForeground m-0">{description}</p>
+		</button>
+	)
+}
+
+interface OnboardingViewProps {
+	onSelectFreeModels: () => void
+	onSelectPremiumModels: () => void
+	onSelectBYOK: () => void
+}
+
+const OnboardingView: React.FC<OnboardingViewProps> = ({ onSelectFreeModels, onSelectPremiumModels, onSelectBYOK }) => {
+	const { t } = useAppTranslation()
+
+	return (
+		<div className="flex flex-col items-center justify-center min-h-screen p-6 bg-vscode-sideBar-background">
+			<Logo width={80} height={80} />
+
+			<h1 className="text-2xl font-bold text-vscode-foreground text-center mt-4 mb-10">
+				{t("kilocode:onboarding.title")}
+			</h1>
+
+			<div className="w-full max-w-md flex flex-col gap-4">
+				<OnboardingOption
+					title={t("kilocode:onboarding.freeModels.title")}
+					description={t("kilocode:onboarding.freeModels.description")}
+					onClick={onSelectFreeModels}
+				/>
+
+				<OnboardingOption
+					title={t("kilocode:onboarding.premiumModels.title")}
+					description={t("kilocode:onboarding.premiumModels.description")}
+					onClick={onSelectPremiumModels}
+				/>
+
+				<OnboardingOption
+					title={t("kilocode:onboarding.byok.title")}
+					description={t("kilocode:onboarding.byok.description")}
+					onClick={onSelectBYOK}
+				/>
+			</div>
+		</div>
+	)
+}
+
+export default OnboardingView