feat: rename Account tab to Cloud tab

packages/types/src/vscode.ts

@@ -35,7 +35,7 @@ export const commandIds = [
 	"historyButtonClicked",
 	"marketplaceButtonClicked",
 	"popoutButtonClicked",
-	"accountButtonClicked",
+	"cloudButtonClicked",
 	"settingsButtonClicked",
 
 	"openInNewTab",

src/activate/registerCommands.ts

@@ -74,16 +74,16 @@ export const registerCommands = (options: RegisterCommandOptions) => {
 
 const getCommandsMap = ({ context, outputChannel, provider }: RegisterCommandOptions): Record<CommandId, any> => ({
 	activationCompleted: () => {},
-	accountButtonClicked: () => {
+	cloudButtonClicked: () => {
 		const visibleProvider = getVisibleProviderOrLog(outputChannel)
 
 		if (!visibleProvider) {
 			return
 		}
 
-		TelemetryService.instance.captureTitleButtonClicked("account")
+		TelemetryService.instance.captureTitleButtonClicked("cloud")
 
-		visibleProvider.postMessageToWebview({ type: "action", action: "accountButtonClicked" })
+		visibleProvider.postMessageToWebview({ type: "action", action: "cloudButtonClicked" })
 	},
 	plusButtonClicked: async () => {
 		const visibleProvider = getVisibleProviderOrLog(outputChannel)

src/core/webview/ClineProvider.ts

@@ -1395,7 +1395,7 @@ export class ClineProvider
 		// 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

@@ -2028,9 +2028,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/package.nls.json

@@ -11,7 +11,7 @@
 	"command.history.title": "History",
 	"command.marketplace.title": "Marketplace",
 	"command.openInEditor.title": "Open in Editor",
-	"command.account.title": "Account",
+	"command.cloud.title": "Cloud",
 	"command.settings.title": "Settings",
 	"command.documentation.title": "Documentation",
 	"command.openInNewTab.title": "Open In New Tab",

src/shared/ExtensionMessage.ts

@@ -131,7 +131,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"

webview-ui/src/App.tsx

@@ -21,12 +21,12 @@ import ModesView from "./components/modes/ModesView"
 import { HumanRelayDialog } from "./components/human-relay/HumanRelayDialog"
 import { DeleteMessageDialog, EditMessageDialog } from "./components/chat/MessageModificationConfirmationDialog"
 import ErrorBoundary from "./components/ErrorBoundary"
-import { AccountView } from "./components/account/AccountView"
+import { CloudView } from "./components/cloud/CloudView"
 import { useAddNonInteractiveClickListener } from "./components/ui/hooks/useNonInteractiveClick"
 import { TooltipProvider } from "./components/ui/tooltip"
 import { STANDARD_TOOLTIP_DELAY } from "./components/ui/standard-tooltip"
 
-type Tab = "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "account"
+type Tab = "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"
 
 interface HumanRelayDialogState {
 	isOpen: boolean
@@ -58,7 +58,7 @@ const tabsByMessageAction: Partial<Record<NonNullable<ExtensionMessage["action"]
 	mcpButtonClicked: "mcp",
 	historyButtonClicked: "history",
 	marketplaceButtonClicked: "marketplace",
-	accountButtonClicked: "account",
+	cloudButtonClicked: "cloud",
 }
 
 const App = () => {
@@ -107,7 +107,7 @@ const App = () => {
 		(newTab: Tab) => {
 			// Only check MDM compliance if mdmCompliant is explicitly false (meaning there's an MDM policy and user is non-compliant)
 			// If mdmCompliant is undefined or true, allow tab switching
-			if (mdmCompliant === false && newTab !== "account") {
+			if (mdmCompliant === false && newTab !== "cloud") {
 				// Notify the user that authentication is required by their organization
 				vscode.postMessage({ type: "showMdmAuthRequiredNotification" })
 				return
@@ -249,8 +249,8 @@ const App = () => {
 					targetTab={currentMarketplaceTab as "mcp" | "mode" | undefined}
 				/>
 			)}
-			{tab === "account" && (
-				<AccountView
+			{tab === "cloud" && (
+				<CloudView
 					userInfo={cloudUserInfo}
 					isAuthenticated={cloudIsAuthenticated}
 					cloudApiUrl={cloudApiUrl}

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

@@ -90,11 +90,11 @@ vi.mock("@src/components/marketplace/MarketplaceView", () => ({
 	},
 }))
 
-vi.mock("@src/components/account/AccountView", () => ({
-	AccountView: function AccountView({ onDone }: { onDone: () => void }) {
+vi.mock("@src/components/cloud/CloudView", () => ({
+	CloudView: function CloudView({ onDone }: { onDone: () => void }) {
 		return (
-			<div data-testid="account-view" onClick={onDone}>
-				Account View
+			<div data-testid="cloud-view" onClick={onDone}>
+				Cloud View
 			</div>
 		)
 	},

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

@@ -245,14 +245,14 @@ export const ShareButton = ({ item, disabled = false, showLabel = false }: Share
 				<DialogContent className="max-w-sm">
 					<DialogHeader className="text-center">
 						<DialogTitle className="text-lg font-medium text-vscode-foreground">
-							{t("account:cloudBenefitsTitle")}
+							{t("cloud:cloudBenefitsTitle")}
 						</DialogTitle>
 					</DialogHeader>
 
 					<div className="flex flex-col space-y-6">
 						<div>
 							<p className="text-md text-vscode-descriptionForeground mb-4">
-								{t("account:cloudBenefitsSubtitle")}
+								{t("cloud:cloudBenefitsSubtitle")}
 							</p>
 							<ul className="text-sm text-vscode-descriptionForeground space-y-2">
 								<li className="flex items-start">
@@ -272,7 +272,7 @@ export const ShareButton = ({ item, disabled = false, showLabel = false }: Share
 
 						<div className="flex flex-col gap-4">
 							<Button onClick={handleConnectToCloud} className="w-full">
-								{t("account:connect")}
+								{t("cloud:connect")}
 							</Button>
 						</div>
 					</div>

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

@@ -42,12 +42,12 @@ vi.mock("react-i18next", () => ({
 				"chat:task.connectToCloud": "Connect to Cloud",
 				"chat:task.connectToCloudDescription": "Sign in to Roo Code Cloud to share tasks",
 				"chat:task.sharingDisabledByOrganization": "Sharing disabled by organization",
-				"account:cloudBenefitsTitle": "Connect to Roo Code Cloud",
-				"account:cloudBenefitsSubtitle": "Sign in to Roo Code Cloud to share tasks",
-				"account:cloudBenefitHistory": "Access your task history from anywhere",
-				"account:cloudBenefitSharing": "Share tasks with your team",
-				"account:cloudBenefitMetrics": "Track usage and costs",
-				"account:connect": "Connect",
+				"cloud:cloudBenefitsTitle": "Connect to Roo Code Cloud",
+				"cloud:cloudBenefitsSubtitle": "Sign in to Roo Code Cloud to share tasks",
+				"cloud:cloudBenefitHistory": "Access your task history from anywhere",
+				"cloud:cloudBenefitSharing": "Share tasks with your team",
+				"cloud:cloudBenefitMetrics": "Track usage and costs",
+				"cloud:connect": "Connect",
 			}
 			return translations[key] || key
 		},

webview-ui/src/components/account/AccountView.tsx → webview-ui/src/components/cloud/CloudView.tsx

@@ -11,14 +11,14 @@ import { ToggleSwitch } from "@/components/ui/toggle-switch"
 
 import { History, PiggyBank, SquareArrowOutUpRightIcon } from "lucide-react"
 
-type AccountViewProps = {
+type CloudViewProps = {
 	userInfo: CloudUserInfo | null
 	isAuthenticated: boolean
 	cloudApiUrl?: string
 	onDone: () => void
 }
 
-export const AccountView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: AccountViewProps) => {
+export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: CloudViewProps) => {
 	const { t } = useAppTranslation()
 	const { remoteControlEnabled, setRemoteControlEnabled } = useExtensionState()
 	const wasAuthenticatedRef = useRef(false)
@@ -37,13 +37,13 @@ export const AccountView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }:
 	}, [isAuthenticated])
 
 	const handleConnectClick = () => {
-		// Send telemetry for account connect action
+		// Send telemetry for cloud connect action
 		telemetryClient.capture(TelemetryEventName.ACCOUNT_CONNECT_CLICKED)
 		vscode.postMessage({ type: "rooCloudSignIn" })
 	}
 
 	const handleLogoutClick = () => {
-		// Send telemetry for account logout action
+		// Send telemetry for cloud logout action
 		telemetryClient.capture(TelemetryEventName.ACCOUNT_LOGOUT_CLICKED)
 		vscode.postMessage({ type: "rooCloudSignOut" })
 	}
@@ -64,7 +64,7 @@ export const AccountView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }:
 	return (
 		<div className="flex flex-col h-full">
 			<div className="flex justify-between items-center mb-6">
-				<h1 className="text-xl font-medium text-vscode-foreground">{t("account:title")}</h1>
+				<h1 className="text-xl font-medium text-vscode-foreground">{t("cloud:title")}</h1>
 				<VSCodeButton appearance="secondary" onClick={onDone}>
 					{t("settings:common.done")}
 				</VSCodeButton>
@@ -77,7 +77,7 @@ export const AccountView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }:
 								{userInfo?.picture ? (
 									<img
 										src={userInfo.picture}
-										alt={t("account:profilePicture")}
+										alt={t("cloud:profilePicture")}
 										className="w-full h-full object-cover"
 									/>
 								) : (
@@ -114,24 +114,24 @@ export const AccountView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }:
 									checked={remoteControlEnabled}
 									onChange={handleRemoteControlToggle}
 									size="medium"
-									aria-label={t("account:remoteControl")}
+									aria-label={t("cloud:remoteControl")}
 									data-testid="remote-control-toggle"
 								/>
-								<span className="font-medium text-vscode-foreground">{t("account:remoteControl")}</span>
+								<span className="font-medium text-vscode-foreground">{t("cloud:remoteControl")}</span>
 							</div>
 							<div className="text-vscode-descriptionForeground text-sm mt-1 mb-4 ml-8">
-								{t("account:remoteControlDescription")}
+								{t("cloud:remoteControlDescription")}
 							</div>
 							<hr className="border-vscode-widget-border mb-4" />
 						</div>
 					)}
 
 					<div className="flex flex-col gap-2 mt-4">
 						<VSCodeButton appearance="secondary" onClick={handleVisitCloudWebsite} className="w-full">
-							{t("account:visitCloudWebsite")}
+							{t("cloud:visitCloudWebsite")}
 						</VSCodeButton>
 						<VSCodeButton appearance="secondary" onClick={handleLogoutClick} className="w-full">
-							{t("account:logOut")}
+							{t("cloud:logOut")}
 						</VSCodeButton>
 					</div>
 				</>
@@ -156,27 +156,27 @@ export const AccountView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }:
 
 					<div className="flex flex-col mb-6 text-center">
 						<h2 className="text-xl font-bold text-vscode-foreground mb-2">
-							{t("account:cloudBenefitsTitle")}
+							{t("cloud:cloudBenefitsTitle")}
 						</h2>
 						<ul className="text-vscode-descriptionForeground space-y-3 mx-auto px-8">
 							<li className="flex items-start text-left gap-4">
 								<SquareArrowOutUpRightIcon size="16" className="shrink-0" />
-								{t("account:cloudBenefitSharing")}
+								{t("cloud:cloudBenefitSharing")}
 							</li>
 							<li className="flex items-start text-left gap-4">
 								<History size="16" className="shrink-0" />
-								{t("account:cloudBenefitHistory")}
+								{t("cloud:cloudBenefitHistory")}
 							</li>
 							<li className="flex items-start text-left gap-4">
 								<PiggyBank size="16" className="shrink-0" />
-								{t("account:cloudBenefitMetrics")}
+								{t("cloud:cloudBenefitMetrics")}
 							</li>
 						</ul>
 					</div>
 
 					<div className="flex flex-col items-center gap-4">
 						<VSCodeButton appearance="primary" onClick={handleConnectClick} className="w-1/2">
-							{t("account:connect")}
+							{t("cloud:connect")}
 						</VSCodeButton>
 					</div>
 				</>