feat: rename Account tab to Cloud tab (#7558)

Co-authored-by: Roo Code <[email protected]>
Co-authored-by: Matt Rubens <[email protected]>

Author: 3 people

src/core/webview/ClineProvider.ts

@@ -1506,7 +1506,7 @@ public async clearTask(): Promise<void> {
 		// Check MDM compliance and send user to account tab if not compliant
 		// Only redirect if there's an actual MDM policy requiring authentication
 		if (this.mdmService?.requiresCloudAuth() && !this.checkMdmCompliance()) {
-			await this.postMessageToWebview({ type: "action", action: "accountButtonClicked" })
+			await this.postMessageToWebview({ type: "action", action: "cloudButtonClicked" })
 		}
 	}
 

src/core/webview/webviewMessageHandler.ts

@@ -2034,9 +2034,9 @@ export const webviewMessageHandler = async (
 			await provider.postStateToWebview()
 			break
 		}
-		case "accountButtonClicked": {
-			// Navigate to the account tab.
-			provider.postMessageToWebview({ type: "action", action: "accountButtonClicked" })
+		case "cloudButtonClicked": {
+			// Navigate to the cloud tab.
+			provider.postMessageToWebview({ type: "action", action: "cloudButtonClicked" })
 			break
 		}
 		case "rooCloudSignIn": {

src/package.json

@@ -101,9 +101,9 @@
 				"icon": "$(link-external)"
 			},
 			{
-				"command": "roo-cline.accountButtonClicked",
-				"title": "%command.account.title%",
-				"icon": "$(account)"
+				"command": "roo-cline.cloudButtonClicked",
+				"title": "%command.cloud.title%",
+				"icon": "$(cloud)"
 			},
 			{
 				"command": "roo-cline.settingsButtonClicked",
@@ -234,7 +234,7 @@
 					"when": "view == roo-cline.SidebarProvider"
 				},
 				{
-					"command": "roo-cline.accountButtonClicked",
+					"command": "roo-cline.cloudButtonClicked",
 					"group": "navigation@4",
 					"when": "view == roo-cline.SidebarProvider"
 				},
@@ -276,7 +276,7 @@
 					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
 				},
 				{
-					"command": "roo-cline.accountButtonClicked",
+					"command": "roo-cline.cloudButtonClicked",
 					"group": "navigation@4",
 					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
 				},

src/shared/ExtensionMessage.ts

@@ -140,7 +140,7 @@ export interface ExtensionMessage {
 		| "historyButtonClicked"
 		| "promptsButtonClicked"
 		| "marketplaceButtonClicked"
-		| "accountButtonClicked"
+		| "cloudButtonClicked"
 		| "didBecomeVisible"
 		| "focusInput"
 		| "switchTab"

src/shared/WebviewMessage.ts

@@ -174,7 +174,7 @@ export interface WebviewMessage {
 		| "toggleApiConfigPin"
 		| "setHistoryPreviewCollapsed"
 		| "hasOpenedModeSelector"
-		| "accountButtonClicked"
+		| "cloudButtonClicked"
 		| "rooCloudSignIn"
 		| "rooCloudSignOut"
 		| "condenseTaskContextRequest"
@@ -223,7 +223,7 @@ export interface WebviewMessage {
 		| "openRouterImageGenerationSelectedModel"
 	text?: string
 	editedMessageContent?: string
-	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "account"
+	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"
 	disabled?: boolean
 	context?: string
 	dataUri?: string

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

@@ -11,9 +11,6 @@ import { ToggleSwitch } from "@/components/ui/toggle-switch"
 
 import { History, PiggyBank, SquareArrowOutUpRightIcon } from "lucide-react"
 
-// Define the production URL constant locally to avoid importing from cloud package in tests
-const PRODUCTION_ROO_CODE_API_URL = "https://app.roocode.com"
-
 type CloudViewProps = {
 	userInfo: CloudUserInfo | null
 	isAuthenticated: boolean
@@ -59,16 +56,10 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: Cl
 		// Send telemetry for cloud website visit
 		// NOTE: Using ACCOUNT_* telemetry events for backward compatibility with analytics
 		telemetryClient.capture(TelemetryEventName.ACCOUNT_CONNECT_CLICKED)
-		const cloudUrl = cloudApiUrl || PRODUCTION_ROO_CODE_API_URL
+		const cloudUrl = cloudApiUrl || "https://app.roocode.com"
 		vscode.postMessage({ type: "openExternal", url: cloudUrl })
 	}
 
-	const handleOpenCloudUrl = () => {
-		if (cloudApiUrl) {
-			vscode.postMessage({ type: "openExternal", url: cloudApiUrl })
-		}
-	}
-
 	const handleRemoteControlToggle = () => {
 		const newValue = !remoteControlEnabled
 		setRemoteControlEnabled(newValue)
@@ -195,18 +186,6 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: Cl
 					</div>
 				</>
 			)}
-			{cloudApiUrl && cloudApiUrl !== PRODUCTION_ROO_CODE_API_URL && (
-				<div className="mt-6 flex justify-center">
-					<div className="inline-flex items-center px-3 py-1 gap-1 rounded-full bg-vscode-badge-background/50 text-vscode-badge-foreground text-xs">
-						<span className="text-vscode-foreground/75">{t("cloud:cloudUrlPillLabel")}: </span>
-						<button
-							onClick={handleOpenCloudUrl}
-							className="text-vscode-textLink-foreground hover:text-vscode-textLink-activeForeground underline cursor-pointer bg-transparent border-none p-0">
-							{cloudApiUrl}
-						</button>
-					</div>
-				</div>
-			)}
 		</div>
 	)
 }

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

@@ -1,26 +1,26 @@
 import { render, screen } from "@/utils/test-utils"
 
-import { AccountView } from "../AccountView"
+import { CloudView } from "../CloudView"
 
 // Mock the translation context
 vi.mock("@src/i18n/TranslationContext", () => ({
 	useAppTranslation: () => ({
 		t: (key: string) => {
 			const translations: Record<string, string> = {
-				"account:title": "Account",
+				"cloud:title": "Cloud",
 				"settings:common.done": "Done",
-				"account:signIn": "Connect to Roo Code Cloud",
-				"account:cloudBenefitsTitle": "Connect to Roo Code Cloud",
-				"account:cloudBenefitSharing": "Share tasks with others",
-				"account:cloudBenefitHistory": "Access your task history",
-				"account:cloudBenefitMetrics": "Get a holistic view of your token consumption",
-				"account:logOut": "Log out",
-				"account:connect": "Connect Now",
-				"account:visitCloudWebsite": "Visit Roo Code Cloud",
-				"account:remoteControl": "Roomote Control",
-				"account:remoteControlDescription":
+				"cloud:signIn": "Connect to Roo Code Cloud",
+				"cloud:cloudBenefitsTitle": "Connect to Roo Code Cloud",
+				"cloud:cloudBenefitSharing": "Share tasks with others",
+				"cloud:cloudBenefitHistory": "Access your task history",
+				"cloud:cloudBenefitMetrics": "Get a holistic view of your token consumption",
+				"cloud:logOut": "Log out",
+				"cloud:connect": "Connect Now",
+				"cloud:visitCloudWebsite": "Visit Roo Code Cloud",
+				"cloud:remoteControl": "Roomote Control",
+				"cloud:remoteControlDescription":
 					"Enable following and interacting with tasks in this workspace with Roo Code Cloud",
-				"account:profilePicture": "Profile picture",
+				"cloud:profilePicture": "Profile picture",
 			}
 			return translations[key] || key
 		},
@@ -55,10 +55,10 @@ Object.defineProperty(window, "IMAGES_BASE_URI", {
 	writable: true,
 })
 
-describe("AccountView", () => {
+describe("CloudView", () => {
 	it("should display benefits when user is not authenticated", () => {
 		render(
-			<AccountView
+			<CloudView
 				userInfo={null}
 				isAuthenticated={false}
 				cloudApiUrl="https://app.roocode.com"
@@ -83,7 +83,7 @@ describe("AccountView", () => {
 		}
 
 		render(
-			<AccountView
+			<CloudView
 				userInfo={mockUserInfo}
 				isAuthenticated={true}
 				cloudApiUrl="https://app.roocode.com"
@@ -112,7 +112,7 @@ describe("AccountView", () => {
 		}
 
 		render(
-			<AccountView
+			<CloudView
 				userInfo={mockUserInfo}
 				isAuthenticated={true}
 				cloudApiUrl="https://app.roocode.com"
@@ -136,7 +136,7 @@ describe("AccountView", () => {
 		}
 
 		render(
-			<AccountView
+			<CloudView
 				userInfo={mockUserInfo}
 				isAuthenticated={true}
 				cloudApiUrl="https://app.roocode.com"