Show the Roo provider on the welcome screen (#8317)

Author: mrubens

packages/types/src/telemetry.ts

@@ -61,6 +61,8 @@ export enum TelemetryEventName {
 	ACCOUNT_LOGOUT_CLICKED = "Account Logout Clicked",
 	ACCOUNT_LOGOUT_SUCCESS = "Account Logout Success",
 
+	FEATURED_PROVIDER_CLICKED = "Featured Provider Clicked",
+
 	UPSELL_DISMISSED = "Upsell Dismissed",
 	UPSELL_CLICKED = "Upsell Clicked",
 
@@ -184,6 +186,7 @@ export const rooCodeTelemetryEventSchema = z.discriminatedUnion("type", [
 			TelemetryEventName.ACCOUNT_CONNECT_SUCCESS,
 			TelemetryEventName.ACCOUNT_LOGOUT_CLICKED,
 			TelemetryEventName.ACCOUNT_LOGOUT_SUCCESS,
+			TelemetryEventName.FEATURED_PROVIDER_CLICKED,
 			TelemetryEventName.UPSELL_DISMISSED,
 			TelemetryEventName.UPSELL_CLICKED,
 			TelemetryEventName.SCHEMA_VALIDATION_ERROR,

src/assets/images/roo.png

@@ -1,15 +1,18 @@
-import { useCallback, useState } from "react"
+import { useCallback, useState, useEffect } from "react"
 import knuthShuffle from "knuth-shuffle-seeded"
 import { Trans } from "react-i18next"
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+import posthog from "posthog-js"
 
 import type { ProviderSettings } from "@roo-code/types"
+import { TelemetryEventName } from "@roo-code/types"
 
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { validateApiConfiguration } from "@src/utils/validate"
 import { vscode } from "@src/utils/vscode"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { getRequestyAuthUrl, getOpenRouterAuthUrl } from "@src/oauth/urls"
+import { telemetryClient } from "@src/utils/TelemetryClient"
 
 import ApiOptions from "../settings/ApiOptions"
 import { Tab, TabContent } from "../common/Tab"
@@ -20,6 +23,14 @@ const WelcomeView = () => {
 	const { apiConfiguration, currentApiConfigName, setApiConfiguration, uriScheme, machineId } = useExtensionState()
 	const { t } = useAppTranslation()
 	const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
+	const [showRooProvider, setShowRooProvider] = useState(false)
+
+	// Check PostHog feature flag for Roo provider
+	useEffect(() => {
+		posthog.onFeatureFlags(function () {
+			setShowRooProvider(posthog?.getFeatureFlag("roo-provider-featured") === "test")
+		})
+	}, [])
 
 	// Memoize the setApiConfigurationField function to pass to ApiOptions
 	const setApiConfigurationFieldForApiOptions = useCallback(
@@ -69,7 +80,7 @@ const WelcomeView = () => {
 						{/* Define the providers */}
 						{(() => {
 							// Provider card configuration
-							const providers = [
+							const baseProviders = [
 								{
 									slug: "requesty",
 									name: "Requesty",
@@ -85,6 +96,20 @@ const WelcomeView = () => {
 								},
 							]
 
+							// Conditionally add Roo provider based on feature flag
+							const providers = showRooProvider
+								? [
+										...baseProviders,
+										{
+											slug: "roo",
+											name: "Roo Code Cloud",
+											description: t("welcome:routers.roo.description"),
+											incentive: t("welcome:routers.roo.incentive"),
+											authUrl: "#", // Placeholder since onClick handler will prevent default
+										},
+									]
+								: baseProviders
+
 							// Shuffle providers based on machine ID (will be consistent for the same machine)
 							const orderedProviders = [...providers]
 							knuthShuffle(orderedProviders, (machineId as any) || Date.now())
@@ -94,9 +119,41 @@ const WelcomeView = () => {
 								<a
 									key={index}
 									href={provider.authUrl}
-									className="flex-1 border border-vscode-panel-border hover:bg-secondary rounded-md py-3 px-4 mb-2 flex flex-row gap-3 cursor-pointer transition-all no-underline text-inherit"
+									className="relative flex-1 border border-vscode-panel-border hover:bg-secondary rounded-md py-3 px-4 mb-2 flex flex-row gap-3 cursor-pointer transition-all no-underline text-inherit"
 									target="_blank"
-									rel="noopener noreferrer">
+									rel="noopener noreferrer"
+									onClick={(e) => {
+										// Track telemetry for featured provider click
+										telemetryClient.capture(TelemetryEventName.FEATURED_PROVIDER_CLICKED, {
+											provider: provider.slug,
+										})
+
+										// Special handling for Roo provider
+										if (provider.slug === "roo") {
+											e.preventDefault()
+
+											// Set the Roo provider configuration
+											const rooConfig: ProviderSettings = {
+												apiProvider: "roo",
+											}
+
+											// Save the Roo provider configuration
+											vscode.postMessage({
+												type: "upsertApiConfiguration",
+												text: currentApiConfigName,
+												apiConfiguration: rooConfig,
+											})
+
+											// Then trigger cloud sign-in
+											vscode.postMessage({ type: "rooCloudSignIn" })
+										}
+										// For other providers, let the default link behavior work
+									}}>
+									{provider.incentive && (
+										<div className="absolute top-0 right-0 text-[10px] text-vscode-badge-foreground bg-vscode-badge-background px-2 py-0.5 rounded-bl rounded-tr-md">
+											{provider.incentive}
+										</div>
+									)}
 									<div className="w-8 h-8 flex-shrink-0">
 										<img
 											src={`${imagesBaseUri}/${provider.slug}.png`}
@@ -108,13 +165,8 @@ const WelcomeView = () => {
 										<div className="text-sm font-medium text-vscode-foreground">
 											{provider.name}
 										</div>
-										<div>
-											<div className="text-xs text-vscode-descriptionForeground">
-												{provider.description}
-											</div>
-											{provider.incentive && (
-												<div className="text-xs mt-1">{provider.incentive}</div>
-											)}
+										<div className="text-xs text-vscode-descriptionForeground">
+											{provider.description}
 										</div>
 									</div>
 								</a>

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

@@ -10,6 +10,10 @@
 		},
 		"openrouter": {
 			"description": "A unified interface for LLMs"
+		},
+		"roo": {
+			"description": "The best free models to get started",
+			"incentive": "Try Roo out for free"
 		}
 	},
 	"chooseProvider": "To do its magic, Roo needs an API key.",