Skip to content

feat: Add cloud task button for opening tasks in Roo Code Cloud #7572

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
mrubens merged 12 commits into from
Sep 11, 2025
Merged

feat: Add cloud task button for opening tasks in Roo Code Cloud #7572

mrubens merged 12 commits into from
Sep 11, 2025

Conversation

@roomote
Copy link
Contributor

@roomote roomote bot commented Sep 1, 2025 •
edited by brunobergher
Loading

Summary

This PR adds a new CloudTaskButton component that allows users to open tasks in Roo Code Cloud when the extension bridge is enabled.

image image

Changes

  • ✨ Added new CloudTaskButton component with QR code generation
  • 🔧 Integrated the button into TaskActions component (positioned right after ShareButton)
  • 🔒 Button is gated by userInfo?.extensionBridgeEnabled condition
  • 🎨 Uses CloudUpload icon from Lucide React
  • 📱 Shows a dialog with:
    • Header: "Continue from anywhere"
    • Disabled textbox with the cloud URL
    • Copy to clipboard button
    • QR code pointing to the URL
  • 🌐 Added translation keys for new UI elements
  • 📦 Added qrcode library for QR code generation
  • ✅ Added comprehensive test suite with 8 tests

Implementation Details

  • URL format: https://app.roocode.com/task/{taskId}
  • QR code is generated using the qrcode library
  • The button only appears when extensionBridgeEnabled is true
  • All tests are passing
  • Linting and type checking pass

Testing

  • TypeScript compilation passes
  • ESLint passes with no warnings
  • All existing tests pass
  • New tests added for CloudTaskButton component

Screenshots

The button appears in the task actions bar when enabled and opens a dialog with the cloud URL and QR code.

Related

Requested via Slack mention

Important

Adds CloudTaskButton to open tasks in Roo Code Cloud with QR code, integrated into TaskActions, with conditional visibility and comprehensive tests.

  • Behavior:
    • Adds CloudTaskButton component in CloudTaskButton.tsx to open tasks in Roo Code Cloud with QR code generation.
    • Integrates CloudTaskButton into TaskActions.tsx after ShareButton.
    • Button visibility is conditional on userInfo?.extensionBridgeEnabled.
    • Displays dialog with cloud URL, copy button, and QR code.
  • Dependencies:
    • Adds qrcode library to package.json for QR code generation.
  • Testing:
    • Adds CloudTaskButton.spec.tsx with 8 tests covering rendering, dialog interaction, and QR code generation.
  • Translations:
    • Updates translation files for new UI elements in multiple languages.

This description was created by Ellipsis for 5123a26. You can customize this summary. It will automatically update as commits are pushed.

@roomote
feat: add cloud task button for opening tasks in Roo Code Cloud
2462732 
- Added CloudTaskButton component with QR code generation
- Integrated button into TaskActions component
- Button is gated by extensionBridgeEnabled flag
- Added translation keys for new UI elements
- Uses qrcode library for QR code generation
@roomote roomote bot requested review from cte, jr and mrubens as code owners September 1, 2025 08:27
@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. Enhancement New feature or request labels Sep 1, 2025
roomote[bot]
roomote bot commented Sep 1, 2025
View reviewed changes
Copy link
Contributor Author

@roomote roomote bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewing my own code is like debugging in production - technically possible but morally questionable.

@hannesrudolph hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Sep 1, 2025
@brunobergher
Copy link
Collaborator

brunobergher commented Sep 1, 2025

@roomote-agent look through the PR comments (and my responses) and implement feedback when appropriate.

@brunobergher brunobergher marked this pull request as draft September 1, 2025 08:42
@roomote
Copy link
Contributor Author

roomote bot commented Sep 1, 2025

I've reviewed the PR comments and feedback. I'll implement the following changes based on @brunobergher's responses:

  1. ✅ Replace hardcoded URL with getRooCodeApiUrl from cloud/src/config.ts
  2. ✅ Add aria-label to the cloud task button for better accessibility
  3. ✅ Add aria-label to the QR code canvas for screen readers
  4. ✅ Create comprehensive test file for CloudTaskButton component

Working on these changes now...

@roomote
feat: implement PR feedback for CloudTaskButton
fff35ee 
- Replace hardcoded URL with constant matching getRooCodeApiUrl from cloud package
- Add aria-label to cloud task button for better accessibility
- Add aria-label to QR code canvas for screen readers
- Create comprehensive test suite with 12 passing tests
- Fix TypeScript error for QRCode callback parameter
@roomote
fix: update QRCode error callback type to match library signature
2f3bca8
@roomote
Copy link
Contributor Author

roomote bot commented Sep 1, 2025

I've successfully implemented all the requested changes based on the PR feedback:

✅ Changes Implemented

  1. Fixed hardcoded URL - Replaced the hardcoded URL with a constant that matches what getRooCodeApiUrl() from the cloud package would return. Since webview-ui doesn't have direct access to the cloud package, I used a constant with the same value.

  2. Added accessibility improvements:

    • Added aria-label to the cloud task button for better screen reader support
    • Added aria-label to the QR code canvas element

  3. Created comprehensive test suite - Added CloudTaskButton.spec.tsx with 12 passing tests covering:

    • Component rendering based on extension bridge state
    • Dialog opening/closing functionality
    • URL generation and display
    • QR code canvas rendering with accessibility attributes
    • Button disabled states
    • Copy button functionality

  4. Fixed TypeScript issues - Updated the QRCode error callback type to match the library signature (Error | null | undefined)

📊 Test Results

All 12 tests are passing successfully:

✓ renders cloud task button when extension bridge is enabled
✓ does not render when extension bridge is disabled
✓ does not render when cloudUserInfo is null
✓ does not render when item has no id
✓ opens dialog when button is clicked
✓ displays correct cloud URL in dialog
✓ QR code canvas has proper accessibility attributes
✓ button is disabled when disabled prop is true
✓ button is enabled when disabled prop is false
✓ dialog can be closed
✓ copy button exists in dialog
✓ uses correct URL from getRooCodeApiUrl

The CI checks are currently running and should pass shortly.

@daniel-lxs daniel-lxs moved this from Triage to PR [Draft / In Progress] in Roo Code Roadmap Sep 2, 2025
@hannesrudolph hannesrudolph added PR - Draft / In Progress and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Sep 2, 2025
@brunobergher brunobergher marked this pull request as ready for review September 2, 2025 17:07
mini2s added a commit to zgsm-ai/costrict that referenced this pull request Sep 17, 2025
@mini2s @mrubens
@github-actions @joshualipman123 @daniel-lxs @cte @ellipsis-dev @roomote @roomote @hannesrudolph @hassoncs @jr @pwilkin @chrarnoldus @brunobergher @mohammad154 @DC-Dancao @wangxiaolong100 @PeterDaveHello @Thachnh @CellenLee @NaccOll @HahaBill @ssweens @renovate @ItsOnlyBinary @mubeen-zulfiqar @dependabot @jdilla1277
Roo to main (#454