Remove Roo Code Cloud welcome CTAs

Author: brunobergher

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

@@ -2,10 +2,8 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo
 import { useDeepCompareEffect, useEvent } from "react-use"
 import { Virtuoso, type VirtuosoHandle } from "react-virtuoso"
 import removeMd from "remove-markdown"
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import useSound from "use-sound"
 import { LRUCache } from "lru-cache"
-import { Trans } from "react-i18next"
 
 import { useDebounceEffect } from "@src/utils/useDebounceEffect"
 import { appendImages } from "@src/utils/imageUtils"
@@ -31,7 +29,6 @@ import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel"
 import RooHero from "@src/components/welcome/RooHero"
 import RooTips from "@src/components/welcome/RooTips"
 import { StandardTooltip, Button } from "@src/components/ui"
-import { CloudUpsellDialog } from "@src/components/cloud/CloudUpsellDialog"
 
 import TelemetryBanner from "../common/TelemetryBanner"
 import VersionIndicator from "../common/VersionIndicator"
@@ -46,10 +43,7 @@ import { CheckpointWarning } from "./CheckpointWarning"
 import { QueuedMessages } from "./QueuedMessages"
 import { WorktreeSelector } from "./WorktreeSelector"
 import FileChangesPanel from "./FileChangesPanel"
-import DismissibleUpsell from "../common/DismissibleUpsell"
-import { useCloudUpsell } from "@src/hooks/useCloudUpsell"
 import { useScrollLifecycle } from "@src/hooks/useScrollLifecycle"
-import { Cloud } from "lucide-react"
 
 export interface ChatViewProps {
 	isHidden: boolean
@@ -90,7 +84,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		telemetrySetting,
 		soundEnabled,
 		soundVolume,
-		cloudIsAuthenticated,
 		messageQueue = [],
 		showWorktreesInHomeScreen,
 	} = useExtensionState()
@@ -187,15 +180,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		clineAskRef.current = clineAsk
 	}, [clineAsk])
 
-	const {
-		isOpen: isUpsellOpen,
-		openUpsell,
-		closeUpsell,
-		handleConnect,
-	} = useCloudUpsell({
-		autoOpenOnAuth: false,
-	})
-
 	// Keep inputValueRef in sync with inputValue state
 	useEffect(() => {
 		inputValueRef.current = inputValue
@@ -1639,22 +1623,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							{/* Everyone should see their task history if any */}
 							{taskHistory.length > 0 && <HistoryPreview />}
 						</div>
-						{/* Logged out users should see a one-time upsell, but not for brand new users */}
-						{!cloudIsAuthenticated && taskHistory.length >= 6 && (
-							<DismissibleUpsell
-								upsellId="taskList2"
-								icon={<Cloud className="size-5 shrink-0" />}
-								onClick={() => openUpsell()}
-								dismissOnClick={false}
-								className="bg-none mt-6 border-border rounded-xl p-3 !text-base">
-								<Trans
-									i18nKey="cloud:upsell.taskList"
-									components={{
-										learnMoreLink: <VSCodeLink href="#" />,
-									}}
-								/>
-							</DismissibleUpsell>
-						)}
 					</div>
 				</div>
 			)}
@@ -1825,7 +1793,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			)}
 
 			<div id="roo-portal" />
-			<CloudUpsellDialog open={isUpsellOpen} onOpenChange={closeUpsell} onConnect={handleConnect} />
 		</div>
 	)
 }

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

@@ -98,13 +98,6 @@ vi.mock("../Announcement", () => ({
 	},
 }))
 
-// Mock DismissibleUpsell component
-vi.mock("@/components/common/DismissibleUpsell", () => ({
-	default: function MockDismissibleUpsell({ children }: { children: React.ReactNode }) {
-		return <div data-testid="dismissible-upsell">{children}</div>
-	},
-}))
-
 // Mock QueuedMessages component
 vi.mock("../QueuedMessages", () => ({
 	QueuedMessages: function MockQueuedMessages({
@@ -670,10 +663,10 @@ describe("ChatView - Version Indicator Tests", () => {
 	})
 })
 
-describe("ChatView - DismissibleUpsell Display Tests", () => {
+describe("ChatView - Cloud upsell display tests", () => {
 	beforeEach(() => vi.clearAllMocks())
 
-	it("does not show DismissibleUpsell when user is authenticated to Cloud", () => {
+	it("does not show Cloud upsell when user is authenticated to Cloud", () => {
 		const { queryByTestId } = renderChatView()
 
 		// Hydrate state with user authenticated to cloud
@@ -688,11 +681,11 @@ describe("ChatView - DismissibleUpsell Display Tests", () => {
 			clineMessages: [], // No active task
 		})
 
-		// Should not show DismissibleUpsell when authenticated
+		// Should not show Cloud upsell when authenticated
 		expect(queryByTestId("dismissible-upsell")).not.toBeInTheDocument()
 	})
 
-	it("does not show DismissibleUpsell when user has only run 3 tasks in their history", () => {
+	it("does not show Cloud upsell when user has only run 3 tasks in their history", () => {
 		const { queryByTestId } = renderChatView()
 
 		// Hydrate state with user not authenticated but only 3 tasks
@@ -706,12 +699,12 @@ describe("ChatView - DismissibleUpsell Display Tests", () => {
 			clineMessages: [], // No active task
 		})
 
-		// Should not show DismissibleUpsell with less than 4 tasks
+		// Should not show Cloud upsell with less than 4 tasks
 		expect(queryByTestId("dismissible-upsell")).not.toBeInTheDocument()
 	})
 
-	it("shows DismissibleUpsell when user is not authenticated and has run 6 or more tasks", async () => {
-		const { getByTestId } = renderChatView()
+	it("does not show Cloud upsell when user is not authenticated and has run 6 or more tasks", async () => {
+		const { queryByTestId } = renderChatView()
 
 		// Hydrate state with user not authenticated and 4 tasks
 		mockPostMessage({
@@ -728,13 +721,13 @@ describe("ChatView - DismissibleUpsell Display Tests", () => {
 			clineMessages: [], // No active task
 		})
 
-		// Wait for component to render and show DismissibleUpsell
+		// The Cloud upsell CTA has been removed from the home screen.
 		await waitFor(() => {
-			expect(getByTestId("dismissible-upsell")).toBeInTheDocument()
+			expect(queryByTestId("dismissible-upsell")).not.toBeInTheDocument()
 		})
 	})
 
-	it("does not show DismissibleUpsell when there is an active task (regardless of auth status)", async () => {
+	it("does not show Cloud upsell when there is an active task (regardless of auth status)", async () => {
 		const { queryByTestId } = renderChatView()
 
 		// Hydrate state with active task
@@ -758,7 +751,7 @@ describe("ChatView - DismissibleUpsell Display Tests", () => {
 
 		// Wait for component to render with active task
 		await waitFor(() => {
-			// Should not show DismissibleUpsell during active task
+			// Should not show Cloud upsell during active task
 			expect(queryByTestId("dismissible-upsell")).not.toBeInTheDocument()
 			// Should not show RooTips either since the entire welcome screen is hidden during active tasks
 			expect(queryByTestId("roo-tips")).not.toBeInTheDocument()
@@ -767,7 +760,7 @@ describe("ChatView - DismissibleUpsell Display Tests", () => {
 		})
 	})
 
-	it("shows RooTips when user is authenticated (instead of DismissibleUpsell)", () => {
+	it("shows RooTips when user is authenticated", () => {
 		const { queryByTestId, getByTestId } = renderChatView()
 
 		// Hydrate state with user authenticated to cloud
@@ -782,12 +775,12 @@ describe("ChatView - DismissibleUpsell Display Tests", () => {
 			clineMessages: [], // No active task
 		})
 
-		// Should not show DismissibleUpsell but should show RooTips
+		// Should not show Cloud upsell but should show RooTips
 		expect(queryByTestId("dismissible-upsell")).not.toBeInTheDocument()
 		expect(getByTestId("roo-tips")).toBeInTheDocument()
 	})
 
-	it("shows RooTips when user has fewer than 6 tasks (instead of DismissibleUpsell)", () => {
+	it("shows RooTips when user has fewer than 6 tasks", () => {
 		const { queryByTestId, getByTestId } = renderChatView()
 
 		// Hydrate state with user not authenticated but fewer than 4 tasks
@@ -801,7 +794,7 @@ describe("ChatView - DismissibleUpsell Display Tests", () => {
 			clineMessages: [], // No active task
 		})
 
-		// Should not show DismissibleUpsell but should show RooTips
+		// Should not show Cloud upsell but should show RooTips
 		expect(queryByTestId("dismissible-upsell")).not.toBeInTheDocument()
 		expect(getByTestId("roo-tips")).toBeInTheDocument()
 	})

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

@@ -91,11 +91,8 @@ const WelcomeViewProvider = () => {
 	)
 
 	const handleGetStarted = useCallback(() => {
-		// Landing screen - always trigger auth with Roo
 		if (selectedProvider === null) {
-			setAuthOrigin("landing")
-			vscode.postMessage({ type: "rooCloudSignIn", useProviderSignup: true })
-			setAuthInProgress(true)
+			setSelectedProvider("roo")
 		}
 		// Provider Selection screen
 		else if (selectedProvider === "roo") {
@@ -129,11 +126,6 @@ const WelcomeViewProvider = () => {
 		}
 	}, [selectedProvider, cloudIsAuthenticated, apiConfiguration, currentApiConfigName])
 
-	const handleNoAccount = useCallback(() => {
-		// Navigate to Provider Selection, defaulting to Roo option
-		setSelectedProvider("roo")
-	}, [])
-
 	const handleBackToLanding = useCallback(() => {
 		// Return to the landing screen
 		setSelectedProvider(null)
@@ -299,18 +291,12 @@ const WelcomeViewProvider = () => {
 						<p className="text-base text-vscode-foreground">
 							<Trans i18nKey="welcome:landing.introduction" />
 						</p>
-						<p className="mb-0 font-semibold">
-							<Trans i18nKey="welcome:landing.accountMention" />
-						</p>
 					</div>
 
 					<div className="mt-2 flex gap-2 items-center">
 						<Button onClick={handleGetStarted} variant="primary">
 							{t("welcome:landing.getStarted")}
 						</Button>
-						<VSCodeLink onClick={handleNoAccount} className="cursor-pointer">
-							{t("welcome:landing.noAccount")}
-						</VSCodeLink>
 					</div>
 
 					<div className="absolute bottom-6 left-6">

webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.spec.tsx

@@ -128,67 +128,34 @@ describe("WelcomeViewProvider", () => {
 			// Should show introduction
 			expect(screen.getByTestId("trans-welcome:landing.introduction")).toBeInTheDocument()
 
-			// Should show account mention
-			expect(screen.getByTestId("trans-welcome:landing.accountMention")).toBeInTheDocument()
-
 			// Should show "Get Started" button
 			expect(screen.getByTestId("button-primary")).toBeInTheDocument()
 
-			// Should show "no account" link
-			const noAccountLink = screen
-				.getAllByTestId("vscode-link")
-				.find((link) => link.textContent?.includes("welcome:landing.noAccount"))
-			expect(noAccountLink).toBeInTheDocument()
-		})
-
-		it("triggers auth when 'Get Started' is clicked on landing", () => {
-			renderWelcomeViewProvider()
-
-			const getStartedButton = screen.getByTestId("button-primary")
-			fireEvent.click(getStartedButton)
-
-			expect(vscode.postMessage).toHaveBeenCalledWith({
-				type: "rooCloudSignIn",
-				useProviderSignup: true,
-			})
+			// Should not show Cloud account CTA copy
+			expect(screen.queryByTestId("trans-welcome:landing.accountMention")).not.toBeInTheDocument()
 		})
 
-		it("shows auth in progress after clicking 'Get Started' on landing", () => {
+		it("navigates to provider selection when 'Get Started' is clicked on landing", () => {
 			renderWelcomeViewProvider()
 
 			const getStartedButton = screen.getByTestId("button-primary")
 			fireEvent.click(getStartedButton)
 
-			// Should show progress ring
-			expect(screen.getByTestId("progress-ring")).toBeInTheDocument()
-
-			// Should show waiting heading
-			expect(screen.getByText(/welcome:waitingForCloud.heading/)).toBeInTheDocument()
-		})
-
-		it("navigates to provider selection when 'no account' is clicked", () => {
-			renderWelcomeViewProvider()
-
-			// Click the "no account" link
-			const noAccountLink = screen
-				.getAllByTestId("vscode-link")
-				.find((link) => link.textContent?.includes("welcome:landing.noAccount"))
-			fireEvent.click(noAccountLink!)
-
-			// Should now show provider selection screen with radio buttons
 			expect(screen.getByTestId("radio-group")).toBeInTheDocument()
 			expect(screen.getByTestId("radio-roo")).toBeInTheDocument()
 			expect(screen.getByTestId("radio-custom")).toBeInTheDocument()
 			expect(screen.getByTestId("trans-welcome:providerSignup.chooseProvider")).toBeInTheDocument()
+			expect(vscode.postMessage).not.toHaveBeenCalledWith({
+				type: "rooCloudSignIn",
+				useProviderSignup: true,
+			})
 		})
 	})
 
 	describe("Provider Selection Screen", () => {
 		const navigateToProviderSelection = () => {
-			const noAccountLink = screen
-				.getAllByTestId("vscode-link")
-				.find((link) => link.textContent?.includes("welcome:landing.noAccount"))
-			fireEvent.click(noAccountLink!)
+			const getStartedButton = screen.getByTestId("button-primary")
+			fireEvent.click(getStartedButton)
 		}
 
 		it("shows radio buttons for Roo and Custom providers", () => {
@@ -275,11 +242,18 @@ describe("WelcomeViewProvider", () => {
 	})
 
 	describe("Auth In Progress State", () => {
+		const startProviderAuth = () => {
+			const landingGetStartedButton = screen.getByTestId("button-primary")
+			fireEvent.click(landingGetStartedButton)
+
+			const providerGetStartedButton = screen.getByTestId("button-primary")
+			fireEvent.click(providerGetStartedButton)
+		}
+
 		it("shows waiting state with progress ring", () => {
 			renderWelcomeViewProvider()
 
-			const getStartedButton = screen.getByTestId("button-primary")
-			fireEvent.click(getStartedButton)
+			startProviderAuth()
 
 			// Should show progress ring
 			expect(screen.getByTestId("progress-ring")).toBeInTheDocument()
@@ -294,42 +268,33 @@ describe("WelcomeViewProvider", () => {
 		it("shows Go Back button in waiting state", () => {
 			renderWelcomeViewProvider()
 
-			const getStartedButton = screen.getByTestId("button-primary")
-			fireEvent.click(getStartedButton)
+			startProviderAuth()
 
 			// Should show secondary button (Go Back)
 			expect(screen.getByTestId("button-secondary")).toBeInTheDocument()
 			expect(screen.getByText(/welcome:waitingForCloud.goBack/)).toBeInTheDocument()
 		})
 
-		it("returns to landing screen when Go Back is clicked (auth from landing)", () => {
+		it("returns to provider selection when Go Back is clicked", () => {
 			renderWelcomeViewProvider()
 
-			// Start auth from landing
-			const getStartedButton = screen.getByTestId("button-primary")
-			fireEvent.click(getStartedButton)
-
-			// Verify we're in auth progress
-			expect(screen.getByTestId("progress-ring")).toBeInTheDocument()
+			startProviderAuth()
 
 			// Click Go Back
 			const goBackButton = screen.getByTestId("button-secondary")
 			fireEvent.click(goBackButton)
 
-			// Should be back on landing screen
-			expect(screen.getByText(/welcome:landing.greeting/)).toBeInTheDocument()
-			expect(screen.getByTestId("trans-welcome:landing.introduction")).toBeInTheDocument()
+			// Should be back on provider selection screen
+			expect(screen.getByTestId("radio-group")).toBeInTheDocument()
 			expect(screen.queryByTestId("progress-ring")).not.toBeInTheDocument()
 		})
 
 		it("returns to provider selection when Go Back is clicked (auth from provider selection)", () => {
 			renderWelcomeViewProvider({ cloudIsAuthenticated: false })
 
 			// Navigate to provider selection
-			const noAccountLink = screen
-				.getAllByTestId("vscode-link")
-				.find((link) => link.textContent?.includes("welcome:landing.noAccount"))
-			fireEvent.click(noAccountLink!)
+			const landingGetStartedButton = screen.getByTestId("button-primary")
+			fireEvent.click(landingGetStartedButton)
 
 			// Start auth from provider selection (Roo is selected by default)
 			const getStartedButton = screen.getByTestId("button-primary")