feat: Add Code Supernova stealth model promotion and pro trial buttons

- Adds new UI message promoting stealth model Code Supernova
- Adds pro trial buttons to the provider page when Roo Code Cloud is selected
- Adds pro trial buttons to the Cloud page
- Updates internationalization files across all supported languages

Author: jdilla1277

src/core/webview/webviewMessageHandler.ts

@@ -3035,5 +3035,10 @@ export const webviewMessageHandler = async (
 			})
 			break
 		}
+		case "openSettings": {
+			// Execute the settings command to open the settings panel
+			await vscode.commands.executeCommand(getCommand("settingsButtonClicked"))
+			break
+		}
 	}
 }

src/shared/WebviewMessage.ts

@@ -225,6 +225,7 @@ export interface WebviewMessage {
 		| "editQueuedMessage"
 		| "dismissUpsell"
 		| "getDismissedUpsells"
+		| "openSettings"
 	text?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"

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

@@ -57,7 +57,6 @@ import { CheckpointWarning } from "./CheckpointWarning"
 import { QueuedMessages } from "./QueuedMessages"
 import DismissibleUpsell from "../common/DismissibleUpsell"
 import { useCloudUpsell } from "@src/hooks/useCloudUpsell"
-import { Cloud } from "lucide-react"
 
 export interface ChatViewProps {
 	isHidden: boolean
@@ -131,7 +130,8 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		messagesRef.current = messages
 	}, [messages])
 
-	const { tasks } = useTaskSearch()
+	const { tasks, recentTasks } = useTaskSearch()
+	const hasTaskHistory = recentTasks.length > 0
 
 	// Initialize expanded state based on the persisted setting (default to expanded if undefined)
 	const [isExpanded, setIsExpanded] = useState(
@@ -212,7 +212,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 
 	const {
 		isOpen: isUpsellOpen,
-		openUpsell,
+		openUpsell: _openUpsell,
 		closeUpsell,
 		handleConnect,
 	} = useCloudUpsell({
@@ -1819,10 +1819,10 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			) : (
 				<div className="flex-1 min-h-0 overflow-y-auto flex flex-col gap-4 relative">
 					{/* Moved Task Bar Header Here */}
-					{tasks.length !== 0 && (
+					{hasTaskHistory && (
 						<div className="flex text-vscode-descriptionForeground w-full mx-auto px-5 pt-3">
 							<div className="flex items-center gap-1 cursor-pointer" onClick={toggleExpanded}>
-								{tasks.length < 10 && (
+								{recentTasks.length < 10 && (
 									<span className={`font-medium text-xs `}>{t("history:recentTasks")}</span>
 								)}
 								<span
@@ -1847,23 +1847,29 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							) : (
 								<>
 									<DismissibleUpsell
-										upsellId="taskList"
-										icon={<Cloud className="size-4 mt-0.5 shrink-0" />}
-										onClick={() => openUpsell()}
+										upsellId="taskListSupernova"
 										dismissOnClick={false}
 										className="bg-vscode-editor-background p-4 !text-base">
-										<Trans
-											i18nKey="cloud:upsell.taskList"
-											components={{
-												learnMoreLink: <VSCodeLink href="#" />,
-											}}
-										/>
+										<div className="w-full text-center leading-relaxed">
+											<Trans
+												i18nKey="cloud:upsell.taskList"
+												components={{
+													lineBreak: <br />,
+													providersLink: (
+														<VSCodeLink
+															href="#"
+															onClick={() => vscode.postMessage({ type: "openSettings" })}
+														/>
+													),
+												}}
+											/>
+										</div>
 									</DismissibleUpsell>
 								</>
 							)}
 						</div>
 						{/* Show the task history preview if expanded and tasks exist */}
-						{taskHistory.length > 0 && isExpanded && <HistoryPreview />}
+						{hasTaskHistory && isExpanded && <HistoryPreview />}
 					</div>
 				</div>
 			)}

webview-ui/src/components/cloud/CloudView.tsx

@@ -136,6 +136,10 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: Cl
 		vscode.postMessage({ type: "openExternal", url: cloudUrl })
 	}
 
+	const handleStartFreeTrial = () => {
+		vscode.postMessage({ type: "openExternal", url: "https://app.roocode.com/billing" })
+	}
+
 	const handleOpenCloudUrl = () => {
 		if (cloudApiUrl) {
 			vscode.postMessage({ type: "openExternal", url: cloudApiUrl })
@@ -272,9 +276,20 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: Cl
 							<div className={cn(authInProgress && "opacity-50")}>{renderCloudBenefitsContent(t)}</div>
 
 							{!authInProgress && (
-								<VSCodeButton appearance="primary" onClick={handleConnectClick} className="w-full">
-									{t("cloud:connect")}
-								</VSCodeButton>
+								<>
+									<VSCodeButton
+										appearance="primary"
+										onClick={handleStartFreeTrial}
+										className="w-full">
+										{t("cloud:startFreeTrial")}
+									</VSCodeButton>
+									<VSCodeButton
+										appearance="secondary"
+										onClick={handleConnectClick}
+										className="w-full">
+										{t("cloud:connect")}
+									</VSCodeButton>
+								</>
 							)}
 
 							{/* Manual entry section */}

webview-ui/src/components/history/HistoryPreview.tsx

@@ -7,18 +7,22 @@ import { useTaskSearch } from "./useTaskSearch"
 import TaskItem from "./TaskItem"
 
 const HistoryPreview = () => {
-	const { tasks } = useTaskSearch()
+	const { tasks, recentTasks } = useTaskSearch()
 	const { t } = useAppTranslation()
 
 	const handleViewAllHistory = () => {
 		vscode.postMessage({ type: "switchTab", tab: "history" })
 	}
 
+	const previewSource = tasks.length > 0 ? tasks : recentTasks
+	const previewTasks = previewSource.slice(0, 3)
+	const hasAnyTasks = recentTasks.length > 0
+
 	return (
 		<div className="flex flex-col gap-3">
-			{tasks.length !== 0 && (
+			{hasAnyTasks && (
 				<>
-					{tasks.slice(0, 3).map((item) => (
+					{previewTasks.map((item) => (
 						<TaskItem key={item.id} item={item} variant="compact" />
 					))}
 					<button

webview-ui/src/components/history/__tests__/HistoryPreview.spec.tsx

@@ -87,6 +87,7 @@ describe("HistoryPreview", () => {
 	it("renders nothing when no tasks are available", () => {
 		mockUseTaskSearch.mockReturnValue({
 			tasks: [],
+			recentTasks: [],
 			searchQuery: "",
 			setSearchQuery: vi.fn(),
 			sortOption: "newest",
@@ -107,6 +108,7 @@ describe("HistoryPreview", () => {
 	it("renders up to 3 tasks when tasks are available", () => {
 		mockUseTaskSearch.mockReturnValue({
 			tasks: mockTasks,
+			recentTasks: mockTasks,
 			searchQuery: "",
 			setSearchQuery: vi.fn(),
 			sortOption: "newest",
@@ -132,6 +134,7 @@ describe("HistoryPreview", () => {
 		const threeTasks = mockTasks.slice(0, 3)
 		mockUseTaskSearch.mockReturnValue({
 			tasks: threeTasks,
+			recentTasks: threeTasks,
 			searchQuery: "",
 			setSearchQuery: vi.fn(),
 			sortOption: "newest",
@@ -156,6 +159,7 @@ describe("HistoryPreview", () => {
 		const oneTask = mockTasks.slice(0, 1)
 		mockUseTaskSearch.mockReturnValue({
 			tasks: oneTask,
+			recentTasks: oneTask,
 			searchQuery: "",
 			setSearchQuery: vi.fn(),
 			sortOption: "newest",
@@ -175,6 +179,7 @@ describe("HistoryPreview", () => {
 	it("passes correct props to TaskItem components", () => {
 		mockUseTaskSearch.mockReturnValue({
 			tasks: mockTasks.slice(0, 3),
+			recentTasks: mockTasks.slice(0, 3),
 			searchQuery: "",
 			setSearchQuery: vi.fn(),
 			sortOption: "newest",
@@ -228,4 +233,25 @@ describe("HistoryPreview", () => {
 
 		expect(container.firstChild).toHaveClass("flex", "flex-col", "gap-3")
 	})
+
+	it("falls back to recent tasks when filtered tasks are empty", () => {
+		mockUseTaskSearch.mockReturnValue({
+			tasks: [],
+			recentTasks: mockTasks,
+			searchQuery: "",
+			setSearchQuery: vi.fn(),
+			sortOption: "newest",
+			setSortOption: vi.fn(),
+			lastNonRelevantSort: null,
+			setLastNonRelevantSort: vi.fn(),
+			showAllWorkspaces: false,
+			setShowAllWorkspaces: vi.fn(),
+		})
+
+		render(<HistoryPreview />)
+
+		expect(screen.getByTestId("task-item-task-1")).toBeInTheDocument()
+		expect(screen.getByTestId("task-item-task-2")).toBeInTheDocument()
+		expect(screen.getByTestId("task-item-task-3")).toBeInTheDocument()
+	})
 })

webview-ui/src/components/history/useTaskSearch.ts

@@ -31,6 +31,11 @@ export const useTaskSearch = () => {
 		return tasks
 	}, [taskHistory, showAllWorkspaces, cwd])
 
+	const recentTasks = useMemo(
+		() => [...presentableTasks].sort((a, b) => (b.ts || 0) - (a.ts || 0)),
+		[presentableTasks],
+	)
+
 	const fzf = useMemo(() => {
 		return new Fzf(presentableTasks, {
 			selector: (item) => item.task,
@@ -80,6 +85,7 @@ export const useTaskSearch = () => {
 
 	return {
 		tasks,
+		recentTasks,
 		searchQuery,
 		setSearchQuery,
 		sortOption,

webview-ui/src/components/settings/ApiOptions.tsx

@@ -665,6 +665,14 @@ const ApiOptions = ({
 						<div className="flex flex-col gap-2">
 							<VSCodeButton
 								appearance="primary"
+								onClick={() =>
+									vscode.postMessage({ type: "openExternal", url: "https://app.roocode.com/billing" })
+								}
+								className="w-fit">
+								{t("settings:providers.roo.startFreeTrialButton")}
+							</VSCodeButton>
+							<VSCodeButton
+								appearance="secondary"
 								onClick={() => vscode.postMessage({ type: "rooCloudSignIn" })}
 								className="w-fit">
 								{t("settings:providers.roo.connectButton")}