Shows a pill with the base Roo Code Cloud URL when not pointing to production

Author: brunobergher

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

@@ -186,6 +186,14 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: Cl
 					</div>
 				</>
 			)}
+			{cloudApiUrl && cloudApiUrl !== "https://app.roocode.com" && (
+				<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">Roo Code Cloud URL: </span>
+						<a href="{cloudApiUrl}">{cloudApiUrl}</a>
+					</div>
+				</div>
+			)}
 		</div>
 	)
 }

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

@@ -148,4 +148,68 @@ 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(
+			<AccountView
+				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(
+			<AccountView
+				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: https://staging.roocode.com")).toBeInTheDocument()
+	})
+
+	it("should display cloud URL pill for non-authenticated users when not pointing to production", () => {
+		render(
+			<AccountView
+				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: 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(<AccountView 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()
+	})
 })