fix: incorporate PR feedback for cloud URL indicator

- Fixed href syntax error (removed quotes around curly braces)
- Added translation support for "Roo Code Cloud URL:" label
- Extracted production URL as a constant (PRODUCTION_CLOUD_URL)
- Implemented proper link handling using vscode.postMessage
- Updated tests to match new implementation

Author: roomote

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

@@ -18,6 +18,8 @@ type CloudViewProps = {
 	onDone: () => void
 }
 
+const PRODUCTION_CLOUD_URL = "https://app.roocode.com"
+
 export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: CloudViewProps) => {
 	const { t } = useAppTranslation()
 	const { remoteControlEnabled, setRemoteControlEnabled } = useExtensionState()
@@ -56,10 +58,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_CLOUD_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,11 +194,15 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: Cl
 					</div>
 				</>
 			)}
-			{cloudApiUrl && cloudApiUrl !== "https://app.roocode.com" && (
+			{cloudApiUrl && cloudApiUrl !== PRODUCTION_CLOUD_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">Roo Code Cloud URL: </span>
-						<a href="{cloudApiUrl}">{cloudApiUrl}</a>
+						<span className="text-vscode-foreground/75">{t("account: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>
 			)}

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
 		},
@@ -156,7 +157,7 @@ describe("CloudView", () => {
 		}
 
 		render(
-			<AccountView
+			<CloudView
 				userInfo={mockUserInfo}
 				isAuthenticated={true}
 				cloudApiUrl="https://app.roocode.com"
@@ -175,7 +176,7 @@ describe("CloudView", () => {
 		}
 
 		render(
-			<AccountView
+			<CloudView
 				userInfo={mockUserInfo}
 				isAuthenticated={true}
 				cloudApiUrl="https://staging.roocode.com"
@@ -184,12 +185,13 @@ describe("CloudView", () => {
 		)
 
 		// Check that the cloud URL pill is displayed with the staging URL
-		expect(screen.getByText("Roo Code Cloud URL: https://staging.roocode.com")).toBeInTheDocument()
+		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(
-			<AccountView
+			<CloudView
 				userInfo={null}
 				isAuthenticated={false}
 				cloudApiUrl="https://dev.roocode.com"
@@ -198,7 +200,8 @@ describe("CloudView", () => {
 		)
 
 		// Check that the cloud URL pill is displayed even when not authenticated
-		expect(screen.getByText("Roo Code Cloud URL: https://dev.roocode.com")).toBeInTheDocument()
+		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", () => {
@@ -207,7 +210,7 @@ describe("CloudView", () => {
 			email: "[email protected]",
 		}
 
-		render(<AccountView userInfo={mockUserInfo} isAuthenticated={true} onDone={() => {}} />)
+		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/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: "
 }