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

brunobergher · 2025-08-30T15:53:23Z

Adds environment URL indicator pill to AccountView component to help engineers identify non-production environments.

📝 Description

This PR introduces a visual indicator in the Account view that displays the current Roo Code Cloud API URL when it differs from the production URL. This enhancement helps developers and engineers quickly identify when they're working with staging, development, or local environments.

Behavior

✅ Production (https://app.roocode.com): No pill displayed
✅ Staging/Dev (e.g., https://staging.roocode.com): Pill displayed with URL
✅ Local (e.g., http://localhost:3000): Pill displayed with URL
✅ Undefined: No pill displayed

🧪 Testing

Added 4 new test cases to ensure proper functionality:

Pill is hidden when pointing to production
Pill is visible when pointing to non-production environments
Pill displays correctly for both authenticated and non-authenticated users
Pill is hidden when cloudApiUrl is undefined

All tests passing: ✅ 8/8 tests in AccountView.spec.tsx

✅ Checklist

Code follows the project's style guidelines
Self-review of code completed
Tests added and passing
No console errors or warnings
Feature works as expected in different scenarios
Uses existing VSCode theme variables for consistent styling

🚀 Impact

User Impact: Minimal - only visible to engineers working with non-production environments
Performance: Negligible - simple conditional rendering
Accessibility: Maintains existing accessibility standards

Important

Adds a URL indicator pill in CloudView to display non-production cloudApiUrl, with tests and i18n updates.

Behavior:
- Adds a URL indicator pill in CloudView to show non-production cloudApiUrl.
- Pill is hidden for production URL (https://app.roocode.com) and when cloudApiUrl is undefined.
- Pill is visible for staging, development, or local URLs.
Testing:
- Adds tests in CloudView.spec.tsx to verify pill visibility for different cloudApiUrl values and authentication states.
i18n:
- Updates translation files to include cloudUrlPillLabel for multiple languages.

^{This description was created by}^{for 947a72e. You can customize this summary. It will automatically update as commits are pushed.}

ellipsis-dev · 2025-08-30T15:54:57Z

webview-ui/src/components/account/AccountView.tsx

+			{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>


Instead of hardcoding the pill label, please use the translation function (e.g. t('account:cloudUrlPillLabel')) for 'Roo Code Cloud URL:' so it's translatable instead of a hardcoded string.

Suggested change

<span className="text-vscode-foreground/75">Roo Code Cloud URL: </span>

<span className="text-vscode-foreground/75">{t('account:cloudUrlPillLabel')}</span>

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-08-30T15:54:57Z

webview-ui/src/components/account/AccountView.tsx

+				<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>


Typographical issue: The href attribute is written as href="{cloudApiUrl}", which treats the curly braces as literal text. In JSX, you should use interpolation without quotes, e.g., , to correctly embed the variable.

Suggested change

<a href="{cloudApiUrl}">{cloudApiUrl}</a>

<a href={cloudApiUrl}>{cloudApiUrl}</a>

daniel-lxs · 2025-08-30T15:55:16Z

webview-ui/src/components/account/AccountView.tsx

 					</div>
 				</>
 			)}
+			{cloudApiUrl && cloudApiUrl !== "https://app.roocode.com" && (


I think it might be a good idea to make the URL a constant so it's easier to change if necessary

roomote

Thank you for your contribution! I've reviewed the changes and found an issue that needs attention. The feature is well-implemented with good test coverage, but there's a critical syntax error in the href attribute that prevents the link from working correctly.

roomote · 2025-08-30T15:57:40Z

webview-ui/src/components/account/AccountView.tsx

+				<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>


There's a syntax error here - the href attribute has quotes around the curly braces which will render literally as "{cloudApiUrl}" instead of the actual URL value.

This is still an issue

roomote · 2025-08-30T15:57:40Z

webview-ui/src/components/account/AccountView.tsx

+				<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>


Is this link intended to be clickable? If so, you might want to consider using the vscode.postMessage with openExternal type (similar to handleVisitCloudWebsite on line 55) to properly open the URL. Otherwise, if it's just for display, you could remove the anchor tag entirely.

brunobergher · 2025-08-30T16:26:48Z

@roomote-agent incorporate all of the PR feedback you see here

roomote · 2025-08-30T16:28:19Z

Hi @brunobergher! I see the PR feedback and will incorporate all the suggested changes:

Fix the href syntax error (remove quotes around curly braces)
Add translation support for the "Roo Code Cloud URL:" label
Extract the production URL as a constant
Consider implementing proper link handling with vscode.postMessage

Working on these changes now!

roomote · 2025-08-30T16:50:43Z

Hi @brunobergher! ✅ All PR feedback has been successfully incorporated:

Changes Made:

Fixed href syntax error - Removed quotes around curly braces in the href attribute (changed from href="{cloudApiUrl}" to href={cloudApiUrl})
Added translation support - Created cloudUrlPillLabel translation key and added it to all 18 locale files
Extracted production URL as constant - Created PRODUCTION_CLOUD_URL constant for better maintainability
Implemented proper link handling - Replaced anchor tag with a button that uses vscode.postMessage with openExternal for proper URL opening

Test Results:

✅ All 8 AccountView tests passing
✅ Translation check passing (all locales updated)
✅ Linting and type checking passing
✅ Unit tests passing on both Ubuntu and Windows

The integration test failure appears to be unrelated to these changes. All the critical checks related to the PR feedback are now passing!

.

…oduction

brunobergher requested review from cte, jr and mrubens as code owners August 30, 2025 15:53

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Aug 30, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Aug 30, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Aug 30, 2025

dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. Enhancement New feature or request labels Aug 30, 2025

ellipsis-dev bot reviewed Aug 30, 2025

View reviewed changes

daniel-lxs reviewed Aug 30, 2025

View reviewed changes

roomote bot reviewed Aug 30, 2025

View reviewed changes

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Aug 30, 2025

daniel-lxs moved this from Triage to PR [Needs Prelim Review] in Roo Code Roadmap Aug 30, 2025

This comment was marked as outdated.

Sign in to view

This comment was marked as off-topic.

Sign in to view

dosubot bot added the lgtm This PR has been approved by a maintainer label Aug 30, 2025

daniel-lxs moved this from PR [Needs Prelim Review] to PR [Draft / In Progress] in Roo Code Roadmap Aug 30, 2025

daniel-lxs moved this from PR [Draft / In Progress] to PR [Changes Requested] in Roo Code Roadmap Aug 30, 2025

hannesrudolph added PR - Needs Preliminary Review PR - Changes Requested and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. PR - Needs Preliminary Review labels Aug 30, 2025

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:M This PR changes 30-99 lines, ignoring generated files. labels Aug 31, 2025

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

0383611

…oduction

	<span className="text-vscode-foreground/75">Roo Code Cloud URL: </span>
	<span className="text-vscode-foreground/75">{t('account:cloudUrlPillLabel')}</span>

	<a href="{cloudApiUrl}">{cloudApiUrl}</a>
	<a href={cloudApiUrl}>{cloudApiUrl}</a>

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

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

Uh oh!

Conversation

brunobergher commented Aug 30, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

Behavior

🧪 Testing

✅ Checklist

🚀 Impact

Uh oh!

ellipsis-dev bot Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

daniel-lxs Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

brunobergher Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

daniel-lxs Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

brunobergher commented Aug 30, 2025

Uh oh!

roomote bot commented Aug 30, 2025

Uh oh!

roomote bot commented Aug 30, 2025

Changes Made:

Test Results:

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as off-topic.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

brunobergher commented Aug 30, 2025 •

edited by ellipsis-dev bot

Loading