Skip to content

Commit 8c8836b

Browse files
feat: Add billing and Roomote Control documentation, update login and… (#331)
* feat: Add billing and Roomote Control documentation, update login and dashboard guides * Implement code changes to enhance functionality and improve performance * Refactor code structure for improved readability and maintainability * Implement code changes to enhance functionality and improve performance * feat: Enhance login and task sharing documentation with security and privacy details
1 parent 3b7006f commit 8c8836b

22 files changed

+368
-84
lines changed
Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
description: Manage your Roo Code Cloud Pro subscription to unlock premium features including Roomote Control for remote task management.
3+
keywords:
4+
- billing
5+
- subscription
6+
- pro plan
7+
- payment
8+
- stripe
9+
- pricing
10+
image: /img/social-share.jpg
11+
---
12+
13+
import Codicon from '@site/src/components/Codicon';
14+
15+
# Billing & Subscriptions
16+
17+
Roo Code Cloud offers a Pro subscription at $20/month, unlocking premium features including Roomote Control.
18+
19+
## Subscription Plans
20+
21+
### Free Tier
22+
- Task history and sharing
23+
- Detailed usage metrics
24+
- **Roomote Control Monitoring** via [Roomote Control](/roo-code-cloud/roomote-control):
25+
- Follow along in real-time with task activity from your IDE
26+
- Monitor tasks running in your IDE with live updates
27+
- View live progress with streaming updates
28+
- Visual indicators for task status (running, idle, interactive)
29+
- No credit card required
30+
31+
### Pro Plan ($20/month)
32+
- Everything in Free Tier, plus:
33+
- **Full Roomote Control** - Complete remote control capabilities:
34+
- **Chat Interface** - Interact with the chatbox just as though you were in your IDE (includes message queuing, attaching images, changing modes, switching providers, and all standard chat features)
35+
- **Start New Tasks** - Launch tasks in any connected workspace
36+
- **Stop Running Tasks** - Safely terminate active tasks
37+
- **Task Switching** - Navigate between tasks including resuming tasks that have been stopped or closed
38+
- Priority support
39+
- Cancel anytime
40+
- Monthly auto-renewal
41+
42+
43+
## Getting Started with Pro
44+
45+
### Step 1: Access Billing
46+
47+
Navigate to your billing page:
48+
- Go to [app.roocode.com/billing](https://app.roocode.com/billing)
49+
- Or click **Billing** from your dashboard
50+
51+
<img src="/img/billing-subscriptions/billing-subscriptions.png" alt="Roo Code Cloud Billing page showing Upgrade to Pro option" width="600" />
52+
53+
### Step 2: Subscribe to Pro
54+
55+
The billing page displays:
56+
- **Upgrade to Pro** section with Premium badge
57+
- Description: "Control your tasks from anywhere, get priority support and more."
58+
- **$20/month** pricing with "cancel anytime" option
59+
60+
To subscribe:
61+
1. Click the **Upgrade Now** button
62+
2. You'll be redirected to Stripe's secure checkout
63+
3. Enter your payment information
64+
4. Complete the checkout process
65+
66+
### Step 3: Confirmation
67+
68+
After successful payment:
69+
- Your subscription status shows as **Active**
70+
- Full Roomote Control is automatically enabled
71+
- You'll receive a confirmation email
72+
- Access your enhanced features immediately
73+
74+
## Managing Your Subscription
75+
76+
### Subscription Portal
77+
78+
Access the Stripe customer portal to:
79+
- Update payment methods
80+
- Download invoices
81+
- View billing history
82+
- Change billing information
83+
84+
Click **Manage Subscription** on your billing page to access the portal.
85+
86+
### Subscription Status
87+
88+
Your billing page displays:
89+
- **Active** - Subscription is current and features are enabled
90+
- **Canceled** - Subscription will end at period close
91+
- **Expired** - Subscription has ended, features disabled
92+
93+
### Cancellation
94+
95+
To cancel your Pro subscription:
96+
97+
1. Go to your billing page
98+
2. Click **Manage Subscription**
99+
3. Select **Cancel Plan** in the Stripe portal
100+
4. Confirm cancellation
101+
102+
:::note
103+
Your Pro features remain active until the end of your current billing period. You can resubscribe at any time.
104+
:::
105+
106+
## Payment & Security
107+
108+
### Payment Processing
109+
- Payments are securely processed through **Stripe**
110+
- We never store your credit card information
111+
- PCI-compliant payment handling
112+
- Supports all major credit cards
113+
114+
### Billing Cycle
115+
- Monthly billing on the same date each month
116+
- Automatic renewal unless canceled
117+
- Immediate access upon payment
118+
- Prorated refunds not available

docs/roo-code-cloud/dashboard.mdx

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ import Codicon from '@site/src/components/Codicon';
1313

1414
# Dashboard
1515

16-
The Roo Code Cloud dashboard provides a central location to manage your account, view task history, and access sharing and collaboration features.
16+
The Roo Code Cloud dashboard provides a central location to manage your account, view task history, monitor usage analytics, and control remote workspaces.
1717

1818
## Accessing the Dashboard
1919

2020
There are two ways to access your Roo Code Cloud dashboard:
2121

2222
### Method 1: From the Roo Code Plugin
2323

24-
Once logged in, click the **account icon** <Codicon name="account" /> in the top right corner of the Roo Code plugin, then click **Visit Roo Code Cloud**.
24+
Once logged in, click the **cloud icon** <Codicon name="cloud" /> in the top right corner of the Roo Code plugin, then click **Visit Roo Code Cloud**.
2525

26-
<img src="/img/login/login-5.png" alt="Access dashboard from Roo Code plugin" width="600" />
26+
<img src="/img/login/login-12.png" alt="Access dashboard from Roo Code plugin" width="600" />
2727

2828
### Method 2: Direct Web Access
2929

@@ -33,13 +33,57 @@ Navigate directly to the Roo Code Cloud web application:
3333

3434
This allows you to access your dashboard from any web browser, even when not using the Roo Code extension.
3535

36-
## Dashboard Features
36+
## Dashboard Pages
3737

38-
The dashboard provides access to:
38+
### Home Page
3939

40-
- **Task History** - View and manage your online task history
41-
- **Account Settings** - Manage your profile and preferences
42-
- **Sharing & Collaboration** - Access shared tasks and collaboration features
43-
- **Usage Metrics** - Monitor your task, token, and cost-based usage
40+
The Home page combines Roomote Control and Tasks History in a single view.
4441

45-
Your dashboard syncs with your Roo Code extension to provide a comprehensive view of your coding assistant activity and collaboration workflows.
42+
<img src="/img/dashboard/dashboard.png" alt="Roo Code Cloud Home page showing Roomote Control and Tasks sections" width="800" />
43+
44+
#### Roomote Control Section
45+
The [Roomote Control](/roo-code-cloud/roomote-control) section at the top allows you to:
46+
- **Toggle Roomote Control** - Enable/disable remote control from the top right
47+
- **View Connected Workspaces** - Shows your active VS Code workspace(s) with connection status
48+
- **Monitor Active Tasks** - See currently running tasks with real-time updates
49+
- **Start New Tasks** - Use the "New Task" button to launch tasks remotely (Pro feature)
50+
51+
#### Tasks Section
52+
The Tasks section below displays your task history with:
53+
- **Task description** - The prompt or request
54+
- **Timestamp** - When the task was created
55+
- **User** - Who created the task
56+
- **Mode** - Which AI mode was used (ask, code, architect, etc.)
57+
- **Status** - Complete, in progress, or failed
58+
- **Token count** - Total tokens consumed
59+
- **Cost** - Estimated cost for the task
60+
61+
### Usage Analytics Page
62+
63+
Access detailed usage metrics by clicking the **Usage** tab in the navigation bar or navigate directly to [app.roocode.com/usage](https://app.roocode.com/usage).
64+
65+
<img src="/img/dashboard/dashboard-1.png" alt="Usage Analytics page showing token usage graph and statistics" width="800" />
66+
67+
The Usage Analytics page provides:
68+
- **Interactive Graph** - Visual representation of token usage over time
69+
- **Time Range Selection** - View data for 24 hours, 7 days, 30 days, or 90 days
70+
- **Metrics Tabs** - Switch between Tokens, Tasks, and Cost views
71+
- **Summary Statistics**:
72+
- Total users
73+
- Activity count (e.g., "2/10" activities)
74+
- Total tokens consumed
75+
- Total estimated cost
76+
77+
### Billing Page
78+
79+
Manage your subscription by clicking the **Billing** tab or navigate directly to [app.roocode.com/billing](https://app.roocode.com/billing).
80+
81+
<img src="/img/dashboard/dashboard-2.png" alt="Billing page showing Upgrade to Pro option" width="800" />
82+
83+
The Billing page displays:
84+
- **Upgrade to Pro** section with Premium badge
85+
- Description of Pro benefits
86+
- **$20/month** pricing with "cancel anytime" option
87+
- **Upgrade Now** button to start your subscription
88+
89+
See the [Billing & Subscriptions](/roo-code-cloud/billing-subscriptions) documentation for complete details.

docs/roo-code-cloud/login.mdx

Lines changed: 69 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,23 @@ image: /img/social-share.jpg
1111

1212
import Codicon from '@site/src/components/Codicon';
1313

14-
# Login
14+
# Login/Signup
1515

1616
Connect your Roo Code extension to Roo Code Cloud to sync your prompts, access online task history, and enable sharing and collaboration features.
1717

1818
## Getting Started
1919

20-
To connect to Roo Code Cloud, click the **account icon** <Codicon name="account" /> in the top right corner of the Roo Code plugin.
20+
To connect to Roo Code Cloud, click the **cloud icon** <Codicon name="cloud" /> in the top right corner of the Roo Code plugin.
2121

22-
<img src="/img/login/login.png" alt="Roo Code Cloud initial connection screen" width="600" />
22+
<img src="/img/login/login-10.png" alt="Roo Code Cloud initial connection screen" width="600" />
2323

2424
Click the **Connect** button to begin the authentication process. You'll be redirected to the Roo Code Cloud website.
2525

2626
## Sign In Options
2727

2828
You'll see the sign-in page with multiple authentication options:
2929

30-
<img src="/img/login/login-1.png" alt="Roo Code Cloud sign in page" width="600" />
30+
<img src="/img/login/login-6.png" alt="Roo Code Cloud sign in page" width="600" />
3131

3232
Choose your preferred login method:
3333
- **GitHub** - Sign in with your existing GitHub account
@@ -36,38 +36,86 @@ Choose your preferred login method:
3636

3737
## Creating a New Account
3838

39-
If you don't have an account yet, click the **Sign up** link at the bottom of the sign-in page.
39+
If you don't have an account yet, you have two options to create one:
4040

41-
<img src="/img/login/login-2.png" alt="Roo Code Cloud signup form" width="600" />
41+
### Option 1: Sign Up with GitHub or Google
4242

43-
Complete the signup form with:
44-
- **First name** (optional)
45-
- **Last name** (optional)
46-
- **Email address** (required)
47-
- **Password** (required)
48-
- Accept the Terms of Service and Privacy Policy
43+
The quickest way to create an account is using your existing GitHub or Google account:
4944

50-
After completing the form, you'll see a confirmation popup:
45+
1. From the sign-in page, click either the **GitHub** or **Google** button
46+
2. You'll be redirected to authenticate with your chosen provider
47+
3. After successful authentication, you'll see the Terms of Service and Privacy Policy agreement form:
5148

52-
<img src="/img/login/login-3.png" alt="Account creation confirmation popup" width="600" />
49+
<img src="/img/login/login-8.png" alt="Terms of Service agreement form after OAuth authentication" width="600" />
50+
51+
4. Review the Terms of Service and Privacy Policy
52+
5. Check the agreement box to accept the terms
53+
6. Click **Continue** to complete your account creation
54+
7. After account creation:
55+
- **If connecting from VS Code**: You'll see a confirmation popup (proceed to IDE Selection section below)
56+
- **If signing up directly at app.roocode.com**: You'll be redirected to your dashboard:
57+
58+
<img src="/img/login/login-9.png" alt="Roo Code Cloud dashboard after direct signup" width="600" />
59+
60+
### Option 2: Sign Up with Email
61+
62+
Alternatively, create an account using your email address:
63+
64+
1. Click the **Sign up** link at the bottom of the sign-in page
65+
66+
<img src="/img/login/login-7.png" alt="Roo Code Cloud signup form" width="600" />
67+
68+
2. Complete the signup form with:
69+
- **First name** (optional)
70+
- **Last name** (optional)
71+
- **Email address** (required)
72+
- **Password** (required)
73+
74+
3. Review the Terms of Service and Privacy Policy
75+
76+
4. Check the agreement box to accept the terms
77+
78+
5. Click the signup button to create your account
79+
80+
6. After account creation:
81+
- **If connecting from VS Code**: You'll see this confirmation popup:
82+
83+
<img src="/img/login/login-3.png" alt="Account creation confirmation popup" width="600" />
84+
85+
- **If signing up directly at app.roocode.com**: You'll be redirected to your dashboard:
86+
87+
<img src="/img/login/login-9.png" alt="Roo Code Cloud dashboard after direct signup" width="600" />
5388

5489
## IDE Selection
5590

5691
The authentication page includes a selector for other VS Code-compatible IDEs:
5792

58-
<img src="/img/login/login-4.png" alt="IDE selector for VS Code forks" width="600" />
93+
<img src="/img/login/login-11.png" alt="IDE selector for VS Code forks" width="600" />
5994

6095
This allows you to connect Roo Code Cloud to various VS Code forks and compatible editors.
6196

6297
## Authentication Complete
6398

6499
Once authenticated, you'll be redirected back to your IDE where you'll see your connected account:
65100

66-
<img src="/img/login/login-5.png" alt="Successfully connected Roo Code Cloud account" width="600" />
101+
<img src="/img/login/login-12.png" alt="Successfully connected Roo Code Cloud account" width="600" />
102+
103+
This screen displays:
104+
- Your profile avatar and full name
105+
- Your connected account email address
106+
- **[Roomote Control](/roo-code-cloud/roomote-control)** toggle - Enable following and interacting with tasks in this workspace with Roo Code Cloud
107+
- **Visit Roo Code Cloud** button - Opens the [web dashboard](/roo-code-cloud/dashboard) in your browser
108+
- **Log out** button - Disconnects your account from this IDE
109+
- **Done** button (top right) - Closes the Cloud panel and returns to normal Roo Code usage
110+
111+
Your Roo Code extension is now connected to Roo Code Cloud and ready to sync your data and enable collaboration features.
112+
113+
## Authentication Security
67114

68-
From this screen you can:
69-
- **Visit Roo Code Cloud** - Click to open the web dashboard
70-
- **Log out** - Disconnect your account from this IDE
71-
- **Done** - Close the account panel and return to normal Roo Code usage
115+
Roo Code Cloud uses industry-standard OAuth with GitHub and Google, plus traditional email authentication to ensure secure access to your account:
72116

73-
Your Roo Code extension is now connected to Roo Code Cloud and ready to sync your data and enable collaboration features.
117+
- **OAuth 2.0 Protocol** - Secure authentication through trusted providers (GitHub and Google)
118+
- **No Password Storage** - When using OAuth, Roo Code never stores your GitHub or Google passwords
119+
- **Encrypted Connections** - All authentication requests use HTTPS encryption
120+
- **Token-Based Access** - Secure tokens manage your session without exposing credentials
121+
- **Email Authentication** - Traditional email/password option with secure password hashing

0 commit comments

Comments
 (0)