feat: Add billing and Roomote Control documentation, update login and dashboard guides

Author: hannesrudolph

docs/roo-code-cloud/billing-subscriptions.mdx

@@ -0,0 +1,137 @@
+---
+description: Manage your Roo Code Cloud Pro subscription to unlock premium features including Roomote Control for remote task management.
+keywords:
+  - billing
+  - subscription
+  - pro plan
+  - payment
+  - stripe
+  - pricing
+image: /img/social-share.jpg
+---
+
+import Codicon from '@site/src/components/Codicon';
+
+# Billing & Subscriptions
+
+Roo Code Cloud offers a Pro subscription at $20/month, unlocking premium features including Roomote Control.
+
+## Subscription Plans
+
+### Free Tier
+- Basic features for all users
+- Task history and sharing
+- Standard usage limits
+- No credit card required
+
+### Pro Plan ($20/month)
+- **Roomote Control** - Remote task execution and monitoring
+- Priority support
+- Enhanced usage limits  
+- Cancel anytime
+- Monthly auto-renewal
+
+
+## Getting Started with Pro
+
+### Step 1: Access Billing
+
+Navigate to your billing page:
+- Go to [app.roocode.com/billing](https://app.roocode.com/billing)
+- Or click **Billing** from your dashboard
+
+### Step 2: Subscribe to Pro
+
+1. Click **Upgrade to Pro** on the billing page
+2. You'll be redirected to Stripe's secure checkout
+3. Enter your payment information
+4. Complete the checkout process
+
+### Step 3: Confirmation
+
+After successful payment:
+- Your subscription status shows as **Active**
+- Roomote Control is automatically enabled
+- You'll receive a confirmation email
+- Access your enhanced features immediately
+
+## Managing Your Subscription
+
+### Subscription Portal
+
+Access the Stripe customer portal to:
+- Update payment methods
+- Download invoices
+- View billing history
+- Change billing information
+
+Click **Manage Subscription** on your billing page to access the portal.
+
+### Subscription Status
+
+Your billing page displays:
+- **Active** - Subscription is current and features are enabled
+- **Canceled** - Subscription will end at period close
+- **Expired** - Subscription has ended, features disabled
+
+### Cancellation
+
+To cancel your Pro subscription:
+
+1. Go to your billing page
+2. Click **Manage Subscription**
+3. Select **Cancel Plan** in the Stripe portal
+4. Confirm cancellation
+
+:::note
+Your Pro features remain active until the end of your current billing period. You can resubscribe at any time.
+:::
+
+## Payment & Security
+
+### Payment Processing
+- Payments are securely processed through **Stripe**
+- We never store your credit card information
+- PCI-compliant payment handling
+- Supports all major credit cards
+
+### Billing Cycle
+- Monthly billing on the same date each month
+- Automatic renewal unless canceled
+- Immediate access upon payment
+- Prorated refunds not available
+
+## Frequently Asked Questions
+
+### What happens when my subscription expires?
+When your subscription expires:
+- Roomote Control is disabled
+- You retain access to basic features
+- Your task history remains available
+- You can resubscribe at any time
+
+### Can I switch between monthly and annual billing?
+Currently, only monthly billing is available. Annual plans may be offered in the future.
+
+### How do I update my payment method?
+1. Go to your billing page
+2. Click **Manage Subscription**  
+3. Update your card in the Stripe portal
+4. Save your changes
+
+### Is there a free trial?
+The free tier provides access to core features. Upgrade to Pro when you need advanced capabilities like Roomote Control.
+
+### What payment methods are accepted?
+We accept all major credit and debit cards through Stripe, including:
+- Visa
+- Mastercard
+- American Express
+- Discover
+
+## Need Help?
+
+For billing support:
+- Email: [email protected]
+- Visit our [support page](https://roocode.com/support)
+- Check the [FAQ](/faq) for common questions

docs/roo-code-cloud/dashboard.mdx

@@ -21,9 +21,9 @@ There are two ways to access your Roo Code Cloud dashboard:
 
 ### Method 1: From the Roo Code Plugin
 
-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**.
+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**.
 
-<img src="/img/login/login-5.png" alt="Access dashboard from Roo Code plugin" width="600" />
+<img src="/img/login/login-12.png" alt="Access dashboard from Roo Code plugin" width="600" />
 
 ### Method 2: Direct Web Access
 
@@ -38,8 +38,19 @@ This allows you to access your dashboard from any web browser, even when not usi
 The dashboard provides access to:
 
 - **Task History** - View and manage your online task history
-- **Account Settings** - Manage your profile and preferences  
+- **Account Settings** - Manage your profile and preferences
 - **Sharing & Collaboration** - Access shared tasks and collaboration features
 - **Usage Metrics** - Monitor your task, token, and cost-based usage
+- **[Billing & Subscriptions](/roo-code-cloud/billing-subscriptions)** - Manage your Pro subscription and payment methods
+- **[Roomote Control](/roo-code-cloud/roomote-control)** - Control VS Code tasks remotely (Pro feature)
 
-Your dashboard syncs with your Roo Code extension to provide a comprehensive view of your coding assistant activity and collaboration workflows.
+Your dashboard syncs with your Roo Code extension to provide a comprehensive view of your coding assistant activity and collaboration workflows.
+
+## Pro Features
+
+Upgrade to Pro ($20/month) to unlock:
+- **Roomote Control** - Monitor and control tasks in VS Code from your browser
+- **Enhanced Usage Limits** - Increased capacity for tasks and tokens
+- **Priority Support** - Get help faster when you need it
+
+Access billing at [app.roocode.com/billing](https://app.roocode.com/billing) or click **Billing** from your dashboard.

docs/roo-code-cloud/login.mdx

@@ -11,23 +11,23 @@ image: /img/social-share.jpg
 
 import Codicon from '@site/src/components/Codicon';
 
-# Login
+# Login/Signup
 
 Connect your Roo Code extension to Roo Code Cloud to sync your prompts, access online task history, and enable sharing and collaboration features.
 
 ## Getting Started
 
-To connect to Roo Code Cloud, click the **account icon** <Codicon name="account" /> in the top right corner of the Roo Code plugin.
+To connect to Roo Code Cloud, click the **cloud icon** <Codicon name="cloud" /> in the top right corner of the Roo Code plugin.
 
-<img src="/img/login/login.png" alt="Roo Code Cloud initial connection screen" width="600" />
+<img src="/img/login/login-10.png" alt="Roo Code Cloud initial connection screen" width="600" />
 
 Click the **Connect** button to begin the authentication process. You'll be redirected to the Roo Code Cloud website.
 
 ## Sign In Options
 
 You'll see the sign-in page with multiple authentication options:
 
-<img src="/img/login/login-1.png" alt="Roo Code Cloud sign in page" width="600" />
+<img src="/img/login/login-6.png" alt="Roo Code Cloud sign in page" width="600" />
 
 Choose your preferred login method:
 - **GitHub** - Sign in with your existing GitHub account
@@ -36,38 +36,76 @@ Choose your preferred login method:
 
 ## Creating a New Account
 
-If you don't have an account yet, click the **Sign up** link at the bottom of the sign-in page.
+If you don't have an account yet, you have two options to create one:
 
-<img src="/img/login/login-2.png" alt="Roo Code Cloud signup form" width="600" />
+### Option 1: Sign Up with GitHub or Google
 
-Complete the signup form with:
-- **First name** (optional)
-- **Last name** (optional) 
-- **Email address** (required)
-- **Password** (required)
-- Accept the Terms of Service and Privacy Policy
+The quickest way to create an account is using your existing GitHub or Google account:
 
-After completing the form, you'll see a confirmation popup:
+1. From the sign-in page, click either the **GitHub** or **Google** button
+2. You'll be redirected to authenticate with your chosen provider
+3. After successful authentication, you'll see the Terms of Service and Privacy Policy agreement form:
 
-<img src="/img/login/login-3.png" alt="Account creation confirmation popup" width="600" />
+<img src="/img/login/login-8.png" alt="Terms of Service agreement form after OAuth authentication" width="600" />
+
+4. Review the Terms of Service and Privacy Policy
+5. Check the agreement box to accept the terms
+6. Click **Continue** to complete your account creation
+7. After account creation:
+   - **If connecting from VS Code**: You'll see a confirmation popup (proceed to IDE Selection section below)
+   - **If signing up directly at app.roocode.com**: You'll be redirected to your dashboard:
+   
+<img src="/img/login/login-9.png" alt="Roo Code Cloud dashboard after direct signup" width="600" />
+
+### Option 2: Sign Up with Email
+
+Alternatively, create an account using your email address:
+
+1. Click the **Sign up** link at the bottom of the sign-in page
+
+<img src="/img/login/login-7.png" alt="Roo Code Cloud signup form" width="600" />
+
+2. Complete the signup form with:
+   - **First name** (optional)
+   - **Last name** (optional)
+   - **Email address** (required)
+   - **Password** (required)
+   
+3. Review the Terms of Service and Privacy Policy
+
+4. Check the agreement box to accept the terms
+
+5. Click the signup button to create your account
+
+6. After account creation:
+   - **If connecting from VS Code**: You'll see this confirmation popup:
+   
+   <img src="/img/login/login-3.png" alt="Account creation confirmation popup" width="600" />
+   
+   - **If signing up directly at app.roocode.com**: You'll be redirected to your dashboard:
+   
+   <img src="/img/login/login-9.png" alt="Roo Code Cloud dashboard after direct signup" width="600" />
 
 ## IDE Selection
 
 The authentication page includes a selector for other VS Code-compatible IDEs:
 
-<img src="/img/login/login-4.png" alt="IDE selector for VS Code forks" width="600" />
+<img src="/img/login/login-11.png" alt="IDE selector for VS Code forks" width="600" />
 
 This allows you to connect Roo Code Cloud to various VS Code forks and compatible editors.
 
 ## Authentication Complete
 
 Once authenticated, you'll be redirected back to your IDE where you'll see your connected account:
 
-<img src="/img/login/login-5.png" alt="Successfully connected Roo Code Cloud account" width="600" />
+<img src="/img/login/login-12.png" alt="Successfully connected Roo Code Cloud account" width="600" />
 
-From this screen you can:
-- **Visit Roo Code Cloud** - Click to open the web dashboard
-- **Log out** - Disconnect your account from this IDE
-- **Done** - Close the account panel and return to normal Roo Code usage
+This screen displays:
+- Your profile avatar and full name
+- Your connected account email address
+- **[Roomote Control](/roo-code-cloud/roomote-control)** toggle - Enable following and interacting with tasks in this workspace with Roo Code Cloud
+- **Visit Roo Code Cloud** button - Opens the [web dashboard](/roo-code-cloud/dashboard) in your browser
+- **Log out** button - Disconnects your account from this IDE
+- **Done** button (top right) - Closes the Cloud panel and returns to normal Roo Code usage
 
 Your Roo Code extension is now connected to Roo Code Cloud and ready to sync your data and enable collaboration features.

docs/roo-code-cloud/roomote-control.mdx

@@ -0,0 +1,85 @@
+---
+description: Control and monitor Roo Code tasks running in VS Code directly from your browser with Roomote Control's real-time bidirectional connection.
+keywords:
+  - roomote control
+  - remote control
+  - remote tasks
+  - real-time monitoring
+  - workspace connection
+  - task control
+image: /img/social-share.jpg
+---
+
+import Codicon from '@site/src/components/Codicon';
+
+# Roomote Control
+
+Roomote Control (also known as Remote Control) enables real-time monitoring and control of Roo Code tasks running in your VS Code extension directly from the Roo Code Cloud web interface.
+
+## What is Roomote Control?
+
+Roomote Control creates a bidirectional connection between your local VS Code extension and Roo Code Cloud, allowing you to:
+
+- **Follow along in real-time** with task activity from your IDE
+- **Monitor tasks** running in your IDE with live updates
+- **Control tasks remotely** ([Pro feature](/roo-code-cloud/billing-subscriptions#pro-plan-20month) - start, stop, interact)
+- **View live progress** with streaming updates
+
+## Key Features
+
+### Real-time Workspace Connection
+
+- Automatically detects open VS Code workspaces
+- Shows connection status with green <Codicon name="wifi" /> indicator
+- Displays workspace path and project name
+- Maintains persistent connection during tasks
+
+### Task Monitoring
+
+- Live streaming of task messages and progress
+- Visual indicators for task status (running, idle, interactive)
+
+### Remote Task Control
+
+- **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)
+- **Start New Tasks** - Launch tasks in any connected workspace
+- **Stop Running Tasks** - Safely terminate active tasks
+- **Task Switching** - Navigate between tasks including resuming tasks that have been stopped or closed
+
+:::note Pro Feature Required for Remote Control
+While basic monitoring is available to all users, remote control capabilities (starting, stopping, and interacting with tasks remotely) require a [Pro subscription ($20/month)](/roo-code-cloud/billing-subscriptions#pro-plan-20month).
+:::
+
+## Getting Started
+
+### Step 1: Connect Your Account
+
+First, you need to connect your Roo Code extension to Roo Code Cloud. Follow the [login instructions](/roo-code-cloud/login#getting-started) to connect your account.
+
+### Step 2: Enable Roomote Control
+
+You can enable Roomote Control in two ways:
+
+**Option 1: From the Web Dashboard**
+1. Navigate to [app.roocode.com](https://app.roocode.com)
+2. Toggle the **Roomote Control** switch on the top right of the home page
+
+**Option 2: From the Roo Code Plugin**
+1. Click the **cloud icon** <Codicon name="cloud" /> in the top right corner of Roo Code
+2. Toggle the **Roomote Control** switch in the Cloud panel
+
+### Step 3: Start a Remote Task
+
+Once your account is connected and Roomote Control is enabled:
+1. Your VS Code workspace(s) automatically appear in the web interface
+2. Click **New Task** on any connected workspace card
+3. Enter your task description
+4. Click **Start** to begin the task
+5. Watch real-time progress in your browser
+
+
+## Limitations
+
+- Requires active VS Code with Roo Code extension
+- Internet connection required for real-time sync
+- One task active per workspace at a time