Credits and some work on provider

Author: brunobergher

docs/credits/overview.md

@@ -0,0 +1,66 @@
+---
+description: The Roo Code Cloud is the easiest way to use Roo Code without additional accounts and dealing with API keys
+keywords:
+  - Credits
+  - Tokens
+  - Dollars
+  - Prepaid
+image: /img/social-share.jpg
+---
+
+# Credits Overview
+
+Roo Code is composed of a few products:
+- **Roo Code VS Code** (the extension) is 100% free
+- **Roo Code Cloud Provider** (the model provider) offers both free and paid models
+- **Roo Code Cloud Agents** (the automous agents) are a paid feature as they incur infrastructure costs
+
+In order to use paid models via our provider and to run Cloud agents, you need credits.
+
+----
+
+## What are credits?
+
+Credits are just pre-paid dollar amounts you can optionally buy to use the paid parts of the Roo Code suite. If you stick to free features and free models, you don't have to buy any credits.
+
+Credits are shown in dollars, there's no shenanigans in converting it to obscure currencies you can't calculate.
+
+
+## How much do credits cost?
+
+Our [pricing page](https://roocode.com/pricing) always has the latest on our plans and Cloud Agent pricing.
+
+Model pricing can be found in the [provider page](https://roocode.com/provider) of our website.
+
+We don't include prices here just to make sure they're always up-to-date.
+
+## How can I buy credits?
+
+### Single purchase
+
+From your [Roo Code Cloud account](https://app.roocode.com.), to a one-time purchase:
+
+1. Click on the credit balance display in the top right
+    <img src="/img/credits/credit-balance-zero.png" alt="Credit balance display" width="180" />
+
+2. Choose "Buy Credits"
+3. Enter the amount you want to buy and follow the flow
+4. You'll get a confirmation email and the balance will show in the same place in the UI
+    <img src="/img/credits/credit-balance.png" alt="Credit balance display" width="180" />
+
+### Auto top-up
+
+To make sure you never run out of credits, you can set up Auto top-up:
+
+1. Click on the same credit balance display
+    <img src="/img/credits/credit-balance-zero.png" alt="Credit balance display" width="180" />
+
+2. Click on the ⚡ icon
+    <img src="/img/credits/auto-top-up-1.png" alt="Credit balance dropdown" width="280" />
+
+3. Enable the option and configure the threshold and amount to buy
+4. Click save and you're done
+
+If you change your mind, just follow the same steps while turning it off.
+
+You can also access all of this from your [Billing page](https://app.roocode.com/billing) (User Avatar menu → Billing and Credits).

docs/provider/overview.md

@@ -11,7 +11,7 @@ keywords:
 image: /img/social-share.jpg
 ---
 
-# Roo Code Cloud
+# Roo Code Cloud Overview
 
 Roo Code Cloud transforms AI development with autonomous agents that work independently in the cloud. Instead of just assisting you in your editor, these agents can plan, code, review, and fix issues autonomously, accessible directly from **GitHub PRs**, **Slack messages**, or the **web browser**.
 

…roo-code-cloud/what-is-roo-code-cloud.md docs/roo-code-cloud/overview.mddocs/roo-code-cloud/what-is-roo-code-cloud.md renamed to docs/roo-code-cloud/overview.md docs/roo-code-cloud/what-is-roo-code-cloud.md renamed to docs/roo-code-cloud/overview.md

@@ -0,0 +1,16 @@
+---
+description: The Roo Code Cloud is the easiest way to use Roo Code without additional accounts and dealing with API keys
+keywords:
+  - Roo Code Cloud
+  - Roo Code Cloud Provider
+  - LLM
+  - Models
+image: /img/social-share.jpg
+---
+
+# Roo Code Cloud Provider Overview
+
+
+This is our very own model provider, optimized to work seamlessly with Roo Code Cloud.
+
+You don't have to use it to use Roo Code, but it's the easiest way to do it, since it only needs your Roo Code Cloud account.

docs/roo-code-provider/overview.md

@@ -129,7 +129,7 @@ const sidebars: SidebarsConfig = {
       type: 'category',
       label: 'Roo Code Cloud',
       items: [
-        'roo-code-cloud/what-is-roo-code-cloud',
+        'roo-code-cloud/overview',
         'roo-code-cloud/cloud-agents',
         'roo-code-cloud/github-integration',
         'roo-code-cloud/slack-integration',
@@ -158,11 +158,14 @@ const sidebars: SidebarsConfig = {
       ],
     },
     {
-      type: 'category',
+      type: 'doc',
       label: 'Roo Code Cloud Provider',
-      items: [
-        'provider/overview',
-      ]
+      id: 'roo-code-provider/overview'
+    },
+    {
+      type: 'doc',
+      label: 'Roo Code Credits',
+      id: 'credits/overview'
     },
     {
       type: 'category',

sidebars.ts

@@ -34,6 +34,33 @@
   --chart-4: 83 100% 50%;
   --chart-5: 115 100% 50%;
 
+  /* Typography*/
+
+  --list-inset: 24px;
+  --block-spacing-small: 8px;
+  --block-spacing: 20px;
+  --text-regular-size: 14px;
+  --h1-size: var(--title-5-size);
+  --h1-line-height: var(--title-5-line-height);
+  --h1-letter-spacing: var(--title-5-letter-spacing);
+  --h2-size: var(--title-3-size);
+  --h2-line-height: var(--title-3-line-height);
+  --h2-letter-spacing: var(--title-3-letter-spacing);
+  --h2-bottom-margin: 12px;
+  --h3-size: 20px;
+  --h3-line-height: 1.6;
+  --h3-letter-spacing: 0;
+  --h3-bottom-margin: 6px;
+  --h4-size: var(--title-1-size);
+  --h4-line-height: var(--title-1-line-height);
+  --h4-letter-spacing: var(--title-1-letter-spacing);
+  --h4-bottom-margin: 10px;
+  --figure-margin: 20px;
+  --block-spacing: 16px;
+  --p-size: var(--text-regular-size);
+  --p-line-height: var(--text-regular-line-height);
+  --p-letter-spacing: var(--text-regular-letter-spacing);
+
   /* GitHub install button colors */
   --primary-hover: 0 0% 9% / 0.9;
   --ifm-color-gray-400: #9ca3af;
@@ -1543,26 +1570,26 @@ main[class*="docMainContainer"] {
 }
 
 .theme-doc-markdown h1 {
-  font-size: 2.25rem;
-  font-weight: 700;
+  font-size: 2.5rem;
+  font-weight: 600;
   letter-spacing: -0.025em;
   line-height: 1.2;
-  margin-top: 0; /* Remove top margin for H1 */
+  margin-top: 0;
   margin-bottom: 1.5rem;
 }
 
 .theme-doc-markdown h2 {
-  font-size: 1.75rem;
-  font-weight: 700;
+  font-size: 1.5rem;
+  font-weight: 600;
   letter-spacing: -0.025em;
-  margin-top: 1.5rem; /* Reduced from 2rem */
+  margin-top: 1.5rem; 
   margin-bottom: 1rem;
 }
 
 .theme-doc-markdown h3 {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: 600;
-  margin-top: 1.25rem; /* Reduced from 1.5rem */
+  margin-top: 1.25rem;
   margin-bottom: 0.75rem;
 }
 
@@ -1577,8 +1604,9 @@ main[class*="docMainContainer"] {
 
 /* Paragraph spacing - match roocode.com */
 .theme-doc-markdown p {
-  font-size: 1rem;
-  line-height: 1.625;
+  font-size: var(--p-size);
+  line-height: var(--p-line-height);
+  letter-spacing: var(--p-letter-spacing);
   color: hsl(var(--foreground) / 0.9); /* 90% brightness like roocode.com */
   margin-bottom: 1rem;
   font-weight: 400; /* Ensure normal weight */
@@ -1869,7 +1897,7 @@ main[class*="docMainContainer"] {
   border: none;
   height: 1px;
   background: hsl(var(--border) / 0.5);
-  margin: 1.5rem 0; /* Reduced from 3rem */
+  margin: 3rem 0; /* Reduced from 3rem */
   position: relative;
 }
 
@@ -2050,6 +2078,10 @@ html {
   }
 }
 
+.theme-doc-footer {
+  padding: 0 2rem;
+}
+
 .copy-button {
   margin-top: -1rem !important;
 }