feat: In-extension dismissible upsells for Roo Code Cloud by brunobergher · Pull Request #7850 · RooCodeInc/Roo-Code

brunobergher · 2025-09-10T14:01:53Z

Description

Adds in-app upsells for Roo Code Cloud.
Introduces a new DismissibleUpsell React component, which ensures messages are displayed in a consistent way and enforces dismissal logic, so we don't annoy users. The dismissal state is persisted in the VS Code extension's global state, ensuring they do not reappear after a user has closed them.

Key implementation details include:

A shared DismissibleUpsell component
A centralized CloudUpsellDialog component, which is called from different places
Integration of these upsell CTAs into several key user workflows:
- On the extion home page.
- Within the "AutoApprove" settings menu.
- After a long-running task runs for a while.
CloudUpsellDialog is also used in the "Share Task" and "Cloud View" screens, reducing duplication
Robust state management to handle component mounting/unmounting and prevent common issues like race conditions or memory leaks during asynchronous operations.

Test Procedure

The functionality was tested via a combination of new unit tests and manual verification.

Unit Tests:

Comprehensive tests were added for the DismissibleUpsell component, covering its variants, dismissal logic, and various edge cases such as rapid dismissals and state updates on unmounted components.
Tests for the auto-approve upsell functionality were also created and fixed.

Manual Testing:

To verify the changes, reviewers can perform the following steps:

Navigate to the Roo Code home page and confirm the new CTA is visible.
Open the "AutoApprove" menu and enable several options
Run a task that takes a significant amount of time and check that the upsell appears after a while
Dismiss one of the upsells, then restart the extension to ensure it remains dismissed.
Verify that all new UI text has been correctly internationalized.

Screenshots

Important

Introduces in-app dismissible upsells for Roo Code Cloud with new React components, state management, and internationalization support.

Behavior:
- Adds DismissibleUpsell React component for consistent message display and dismissal logic.
- Integrates upsells into workflows: extension home page, "AutoApprove" settings, long-running tasks, "Share Task", and "Cloud View".
- Uses CloudUpsellDialog to reduce duplication in "Share Task" and "Cloud View".
- Persists dismissal state in VS Code extension's global state.
State Management:
- Manages component mounting/unmounting to prevent race conditions and memory leaks.
Testing:
- Adds unit tests for DismissibleUpsell covering variants, dismissal logic, and edge cases.
- Tests auto-approve upsell functionality.
- Manual testing includes verifying CTA visibility, dismissal persistence, and internationalization.
Internationalization:
- Updates translations in multiple languages to support new upsell messages.

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

…maV2 crashes (#7594)

…#7783) Fixes#7703 - CodeBlock language dropdown and copy button were appearing above popovers due to z-index: 100. Reduced to z-index: 40 to maintain proper layering hierarchy while keeping buttons functional.

…or chat messages (#7790) * feat: add click-to-edit, ESC-to-cancel, and fix padding consistency - Enable click-to-edit for past messages by making message text clickable - Add ESC key handler to cancel edit mode in ChatTextArea - Fix padding consistency between past and queued message editors - Adjust right padding for edit mode to accommodate cancel button Fixes#7788 * fix: adjust padding and layout for ChatTextArea in edit mode * refactor: replace hardcoded pr-[72px] with standard Tailwind pr-20 class --------- Co-authored-by: Roo Code <roomote@roocode.com> Co-authored-by: Hannes Rudolph <hrudolph@gmail.com> Co-authored-by: daniel-lxs <ricciodaniel98@gmail.com>

Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com> Co-authored-by: Bruno Bergher <me@brunobergher.com>

…e rebase (#7819)

Co-authored-by: Roo Code <roomote@roocode.com> Co-authored-by: Hannes Rudolph <hrudolph@gmail.com> Co-authored-by: daniel-lxs <ricciodaniel98@gmail.com>

feat: add taskSyncEnabled to userSettingsConfigSchema Co-authored-by: Roo Code <roomote@roocode.com>

chore: bump version to v1.75.0

…ls chart (#7830) Co-authored-by: Roo Code <roomote@roocode.com>

- Created DismissibleUpsell component with variant support (banner/default) - Added dismissedUpsells to GlobalState for persistence - Implemented message handlers for dismissing and retrieving dismissed upsells - Added comprehensive tests for the component - Uses VSCode extension globalState for persistent storage

- Changed from className to separate 'id' and 'className' props for better semantics - Added i18n support for accessibility labels (aria-label and title) - Fixed memory leak by adding mounted flag to prevent state updates after unmount - Fixed race condition by sending dismiss message before hiding component - Fixed inefficient array operations in webviewMessageHandler - Added comprehensive test coverage for edge cases including: - Multiple rapid dismissals - Component unmounting during async operations - Invalid/malformed message handling - Proper message sending before unmount - Added null checks for message data to handle edge cases gracefully

ghost

Thank you for your contribution! I've reviewed the changes and found some issues that need attention. The implementation of dismissible upsells is well-structured overall with good test coverage, but there are a few important items to address.

ghost · 2025-09-10T14:07:38Z

 <tool>gh pr checkout [PR_NUMBER] --force</tool>
 <tool>git fetch origin main</tool>
- <tool>git rebase origin/main</tool>
+ <tool>GIT_EDITOR=true git rebase origin/main</tool>


These changes to the merge resolver rules appear unrelated to the upsell feature. Could you remove these files from this PR to keep it focused on the dismissible upsells implementation?

I have no idea how they ended up here. If a reviewer has any thoughts, I'm all ears.

Bruno Bergherand others added 25 commits September 8, 2025 16:28

First pass at separate upsell dialog
a03cda0

Revert PR#7188- Restore temperature parameter to fix TabbyApi/ExLla…
865149d
…maV2 crashes (#7594)

fix: reduce CodeBlock button z-index to prevent overlap with popovers (…
965dfc0
…#7783) Fixes#7703 - CodeBlock language dropdown and copy button were appearing above popovers due to z-index: 100. Reduced to z-index: 40 to maintain proper layering hierarchy while keeping buttons functional.

Make ollama models info transport work like lmstudio (#7679)
8ba47d1

Let people paste in the auth redirect url (#7805)
45f588d
Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com> Co-authored-by: Bruno Bergher <me@brunobergher.com>

fix: resolve chat message edit/delete duplication issues (#7793)
06bdcef

fix: add GIT_EDITOR env var to merge-resolver mode for non-interactiv…
8d8f091
…e rebase (#7819)

UI: Render reasoning as plain italic (match <thinking>) (#7752)
5ca5833
Co-authored-by: Roo Code <roomote@roocode.com> Co-authored-by: Hannes Rudolph <hrudolph@gmail.com> Co-authored-by: daniel-lxs <ricciodaniel98@gmail.com>

Add taskSyncEnabled to userSettingsConfigSchema (#7827)
150a7b9
feat: add taskSyncEnabled to userSettingsConfigSchema Co-authored-by: Roo Code <roomote@roocode.com>

Release: v1.75.0 (#7829)
d0b4b15
chore: bump version to v1.75.0

fix: prevent negative cost values and improve label visibility in eva…
7322f51
…ls chart (#7830) Co-authored-by: Roo Code <roomote@roocode.com>

Fix Groq context window display (#7839)
62271c1

New Cloud upsell dialog in task share and cloud view, shared component
a993979

Properly working DismissibleUpsell
50cc8f0

Working upsell for long-running tasks
cdcb768

CTA in AutoApproveMenu
6413a27

Home page CTA
effdff0

Fixes the autoapprove upsell and some tests
3b68f71

Visual and copy fixes
a9f21c4

Test fix
937f8ab

Translations
ee1aba4

Stray className attribute
653166a

github-project-automationBot added this to Roo Code Roadmap Sep 10, 2025

github-project-automationBot moved this to New in Roo Code Roadmap Sep 10, 2025

github-project-automationBot added this to Roo Code Roadmap Sep 10, 2025

github-project-automationBot moved this to Triage in Roo Code Roadmap Sep 10, 2025

ghost reviewed Sep 10, 2025
View reviewed changes

Navigation Menu

Uh oh!

feat: In-extension dismissible upsells for Roo Code Cloud - #7850

feat: In-extension dismissible upsells for Roo Code Cloud#7850
jr merged 34 commits into
mainfrom
feat/rcc-upsells

brunobergher commented Sep 10, 2025•
edited by ellipsis-dev Bot
Loading

Uh oh!

ghost left a comment

Uh oh!

ghostSep 10, 2025

Uh oh!

ghostSep 10, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Uh oh!

Conversation

brunobergher commented Sep 10, 2025• edited by ellipsis-dev BotLoading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Key implementation details include:

Test Procedure

Unit Tests:

Manual Testing:

Screenshots

Uh oh!

ghost left a comment

Choose a reason for hiding this comment

Uh oh!

ghostSep 10, 2025

Choose a reason for hiding this comment

Uh oh!

ghostSep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

brunobergher commented Sep 10, 2025•
edited by ellipsis-dev Bot
Loading