Shows a pill with the base Roo Code Cloud URL when not pointing to pr… (#7555)

Co-authored-by: Roo Code <[email protected]>
Co-authored-by: Matt Rubens <[email protected]>
Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>

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

@@ -11,6 +11,9 @@ 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
@@ -56,10 +59,16 @@ 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 || "https://app.roocode.com"
+		const cloudUrl = cloudApiUrl || PRODUCTION_ROO_CODE_API_URL
 		vscode.postMessage({ type: "openExternal", url: cloudUrl })
 	}
 
+	const handleOpenCloudUrl = () => {
+		if (cloudApiUrl) {
+			vscode.postMessage({ type: "openExternal", url: cloudApiUrl })
+		}
+	}
+
 	const handleRemoteControlToggle = () => {
 		const newValue = !remoteControlEnabled
 		setRemoteControlEnabled(newValue)
@@ -186,6 +195,18 @@ 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

@@ -21,6 +21,7 @@ vi.mock("@src/i18n/TranslationContext", () => ({
 				"cloud:remoteControlDescription":
 					"Enable following and interacting with tasks in this workspace with Roo Code Cloud",
 				"cloud:profilePicture": "Profile picture",
+				"cloud:cloudUrlPillLabel": "Roo Code Cloud URL: ",
 			}
 			return translations[key] || key
 		},
@@ -148,4 +149,70 @@ describe("CloudView", () => {
 		expect(screen.queryByTestId("remote-control-toggle")).not.toBeInTheDocument()
 		expect(screen.queryByText("Roomote Control")).not.toBeInTheDocument()
 	})
+
+	it("should not display cloud URL pill when pointing to production", () => {
+		const mockUserInfo = {
+			name: "Test User",
+			email: "[email protected]",
+		}
+
+		render(
+			<CloudView
+				userInfo={mockUserInfo}
+				isAuthenticated={true}
+				cloudApiUrl="https://app.roocode.com"
+				onDone={() => {}}
+			/>,
+		)
+
+		// Check that the cloud URL pill is NOT displayed for production URL
+		expect(screen.queryByText(/Roo Code Cloud URL:/)).not.toBeInTheDocument()
+	})
+
+	it("should display cloud URL pill when pointing to non-production environment", () => {
+		const mockUserInfo = {
+			name: "Test User",
+			email: "[email protected]",
+		}
+
+		render(
+			<CloudView
+				userInfo={mockUserInfo}
+				isAuthenticated={true}
+				cloudApiUrl="https://staging.roocode.com"
+				onDone={() => {}}
+			/>,
+		)
+
+		// Check that the cloud URL pill is displayed with the staging URL
+		expect(screen.getByText(/Roo Code Cloud URL:/)).toBeInTheDocument()
+		expect(screen.getByText("https://staging.roocode.com")).toBeInTheDocument()
+	})
+
+	it("should display cloud URL pill for non-authenticated users when not pointing to production", () => {
+		render(
+			<CloudView
+				userInfo={null}
+				isAuthenticated={false}
+				cloudApiUrl="https://dev.roocode.com"
+				onDone={() => {}}
+			/>,
+		)
+
+		// Check that the cloud URL pill is displayed even when not authenticated
+		expect(screen.getByText(/Roo Code Cloud URL:/)).toBeInTheDocument()
+		expect(screen.getByText("https://dev.roocode.com")).toBeInTheDocument()
+	})
+
+	it("should not display cloud URL pill when cloudApiUrl is undefined", () => {
+		const mockUserInfo = {
+			name: "Test User",
+			email: "[email protected]",
+		}
+
+		render(<CloudView userInfo={mockUserInfo} isAuthenticated={true} onDone={() => {}} />)
+
+		// Check that the cloud URL pill is NOT displayed when cloudApiUrl is undefined
+		expect(screen.queryByText(/Roo Code Cloud URL:/)).not.toBeInTheDocument()
+	})
 })

webview-ui/src/i18n/locales/ca/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Segueix i controla tasques des de qualsevol lloc amb Roomote Control",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Permet seguir i interactuar amb tasques en aquest espai de treball amb Roo Code Cloud",
-	"visitCloudWebsite": "Visita Roo Code Cloud"
+	"visitCloudWebsite": "Visita Roo Code Cloud",
+	"cloudUrlPillLabel": "URL de Roo Code Cloud"
 }

webview-ui/src/i18n/locales/de/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Verfolge und steuere Aufgaben von überall mit Roomote Control",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Ermöglicht das Verfolgen und Interagieren mit Aufgaben in diesem Arbeitsbereich mit Roo Code Cloud",
-	"visitCloudWebsite": "Roo Code Cloud besuchen"
+	"visitCloudWebsite": "Roo Code Cloud besuchen",
+	"cloudUrlPillLabel": "Roo Code Cloud URL"
 }

webview-ui/src/i18n/locales/en/cloud.json

@@ -12,5 +12,6 @@
 	"cloudBenefitMetrics": "Get a holistic view of your token consumption",
 	"visitCloudWebsite": "Visit Roo Code Cloud",
 	"remoteControl": "Roomote Control",
-	"remoteControlDescription": "Enable following and interacting with tasks in this workspace with Roo Code Cloud"
+	"remoteControlDescription": "Enable following and interacting with tasks in this workspace with Roo Code Cloud",
+	"cloudUrlPillLabel": "Roo Code Cloud URL"
 }

webview-ui/src/i18n/locales/es/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Sigue y controla tareas desde cualquier lugar con Roomote Control",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Permite seguir e interactuar con tareas en este espacio de trabajo con Roo Code Cloud",
-	"visitCloudWebsite": "Visitar Roo Code Cloud"
+	"visitCloudWebsite": "Visitar Roo Code Cloud",
+	"cloudUrlPillLabel": "URL de Roo Code Cloud"
 }

webview-ui/src/i18n/locales/fr/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Suivez et contrôlez les tâches depuis n'importe où avec Roomote Control",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Permet de suivre et d'interagir avec les tâches dans cet espace de travail avec Roo Code Cloud",
-	"visitCloudWebsite": "Visiter Roo Code Cloud"
+	"visitCloudWebsite": "Visiter Roo Code Cloud",
+	"cloudUrlPillLabel": "URL de Roo Code Cloud"
 }

webview-ui/src/i18n/locales/hi/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Roomote Control के साथ कहीं से भी कार्यों को फॉलो और नियंत्रित करें",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Roo Code Cloud के साथ इस वर्कस्पेस में कार्यों को फॉलो और इंटरैक्ट करने की सुविधा दें",
-	"visitCloudWebsite": "Roo Code Cloud पर जाएं"
+	"visitCloudWebsite": "Roo Code Cloud पर जाएं",
+	"cloudUrlPillLabel": "Roo Code Cloud URL"
 }

webview-ui/src/i18n/locales/id/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Ikuti dan kontrol tugas dari mana saja dengan Roomote Control",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Memungkinkan mengikuti dan berinteraksi dengan tugas di workspace ini dengan Roo Code Cloud",
-	"visitCloudWebsite": "Kunjungi Roo Code Cloud"
+	"visitCloudWebsite": "Kunjungi Roo Code Cloud",
+	"cloudUrlPillLabel": "URL Roo Code Cloud"
 }

webview-ui/src/i18n/locales/it/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Segui e controlla le attività da qualsiasi luogo con Roomote Control",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Abilita il monitoraggio e l'interazione con le attività in questo workspace con Roo Code Cloud",
-	"visitCloudWebsite": "Visita Roo Code Cloud"
+	"visitCloudWebsite": "Visita Roo Code Cloud",
+	"cloudUrlPillLabel": "URL di Roo Code Cloud"
 }

webview-ui/src/i18n/locales/ja/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Roomote Controlでどこからでもタスクをフォローし制御",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Roo Code Cloudでこのワークスペースのタスクをフォローし操作することを有効にする",
-	"visitCloudWebsite": "Roo Code Cloudを訪問"
+	"visitCloudWebsite": "Roo Code Cloudを訪問",
+	"cloudUrlPillLabel": "Roo Code Cloud URL"
 }

webview-ui/src/i18n/locales/ko/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Roomote Control로 어디서나 작업을 팔로우하고 제어하세요",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Roo Code Cloud로 이 워크스페이스의 작업을 팔로우하고 상호작용할 수 있게 합니다",
-	"visitCloudWebsite": "Roo Code Cloud 방문"
+	"visitCloudWebsite": "Roo Code Cloud 방문",
+	"cloudUrlPillLabel": "Roo Code Cloud URL"
 }

webview-ui/src/i18n/locales/nl/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Volg en beheer taken van overal met Roomote Control",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Schakel het volgen en interacteren met taken in deze workspace in met Roo Code Cloud",
-	"visitCloudWebsite": "Bezoek Roo Code Cloud"
+	"visitCloudWebsite": "Bezoek Roo Code Cloud",
+	"cloudUrlPillLabel": "Roo Code Cloud URL"
 }

webview-ui/src/i18n/locales/pl/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Śledź i kontroluj zadania z dowolnego miejsca za pomocą Roomote Control",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Umożliwia śledzenie i interakcję z zadaniami w tym obszarze roboczym za pomocą Roo Code Cloud",
-	"visitCloudWebsite": "Odwiedź Roo Code Cloud"
+	"visitCloudWebsite": "Odwiedź Roo Code Cloud",
+	"cloudUrlPillLabel": "URL Roo Code Cloud"
 }

webview-ui/src/i18n/locales/pt-BR/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Acompanhe e controle tarefas de qualquer lugar com Roomote Control",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Permite acompanhar e interagir com tarefas neste workspace com Roo Code Cloud",
-	"visitCloudWebsite": "Visitar Roo Code Cloud"
+	"visitCloudWebsite": "Visitar Roo Code Cloud",
+	"cloudUrlPillLabel": "URL do Roo Code Cloud "
 }

webview-ui/src/i18n/locales/ru/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Отслеживайте и управляйте задачами откуда угодно с Roomote Control",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Позволяет отслеживать и взаимодействовать с задачами в этом рабочем пространстве с Roo Code Cloud",
-	"visitCloudWebsite": "Посетить Roo Code Cloud"
+	"visitCloudWebsite": "Посетить Roo Code Cloud",
+	"cloudUrlPillLabel": "URL Roo Code Cloud"
 }

webview-ui/src/i18n/locales/tr/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Roomote Control ile görevleri her yerden takip et ve kontrol et",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Bu çalışma alanındaki görevleri Roo Code Cloud ile takip etme ve etkileşim kurma imkanı sağlar",
-	"visitCloudWebsite": "Roo Code Cloud'u ziyaret et"
+	"visitCloudWebsite": "Roo Code Cloud'u ziyaret et",
+	"cloudUrlPillLabel": "Roo Code Cloud URL'si"
 }

webview-ui/src/i18n/locales/vi/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "Theo dõi và điều khiển tác vụ từ bất kỳ đâu với Roomote Control",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Cho phép theo dõi và tương tác với các tác vụ trong workspace này với Roo Code Cloud",
-	"visitCloudWebsite": "Truy cập Roo Code Cloud"
+	"visitCloudWebsite": "Truy cập Roo Code Cloud",
+	"cloudUrlPillLabel": "URL Roo Code Cloud"
 }

webview-ui/src/i18n/locales/zh-CN/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "使用 Roomote Control 随时随地跟踪和控制任务",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "允许通过 Roo Code Cloud 跟踪和操作此工作区中的任务",
-	"visitCloudWebsite": "访问 Roo Code Cloud"
+	"visitCloudWebsite": "访问 Roo Code Cloud",
+	"cloudUrlPillLabel": "Roo Code Cloud URL"
 }

webview-ui/src/i18n/locales/zh-TW/cloud.json

@@ -13,5 +13,6 @@
 	"cloudBenefitWalkaway": "使用 Roomote Control 隨時隨地追蹤和控制工作",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "允許透過 Roo Code Cloud 追蹤和操作此工作區中的工作",
-	"visitCloudWebsite": "造訪 Roo Code Cloud"
+	"visitCloudWebsite": "造訪 Roo Code Cloud",
+	"cloudUrlPillLabel": "Roo Code Cloud URL"
 }