Icons and more content

Author: brunobergher

docs/roo-code-cloud/cloud-agents.mdx

@@ -40,44 +40,45 @@ We at Roo have been developing Roo Code mostly with Cloud Agents for several mon
 
 The current line up available to your is below. Keep in mind we let you rename them as you please – we really believe in making them part of your team.
 
-### The Explainer
-**Role:** Technical Educator  
+### <LucideIcon name="MessageCircleQuestionMark" style={{ position: "relative", top: "2px" }}  /> The Explainer
+**Job:** Technical Educator  
 
 Explains code, concepts, and technical documentation. It helps you understand complex parts of a codebase without needing to read every line.
 
 - **Best for:** Onboarding to a new codebase, understanding legacy code, debugging conceptual issues.
 
 
-### The Planner
-**Role:** Implementation Planning and Architecture
+### <LucideIcon name="Map" style={{ position: "relative", top: "2px" }}  /> The Planner
+**Job:** Implementation Planning and Architecture
 
 The Planner agent maps out implementation plans and navigates complex technical decisions. It's designed to take a high-level idea or a Product Requirement Document (PRD) and break it down into a thorough, step-by-step implementation plan which can the be given to coding agent (or a human!).
 
 - **Best for:** New feature planning, system architecture design, complex refactoring strategies.
 
-### The Coder
-**Role:** Coding across all languages 
+### <LucideIcon name="Code" style={{ position: "relative", top: "2px" }} /> The Coder
+**Job:** Full-scale across all languages 
 
 The Coder agent writes code, creates pull requests, and implements features. It is the workhorse of the platform, capable of handling end-to-end coding tasks.
 
 - **Best for:** Building features, fixing bugs, refactoring components, writing tests.
 
-### The PR Reviewer
-**Role:** Code Reviewer  
+### <LucideIcon name="GitPullRequest" style={{ position: "relative", top: "2px" }}  /> The PR Reviewer
+**Job:** Code reviews
 
 The PR Reviewer agent automatically provides comprehensive code reviews with actionable comments. It can monitor your repositories and review incoming Pull Requests.
 
 - **Best for:** Automated code quality checks, catching bugs early, enforcing coding standards.
 
-### The PR Fixer
-**Role:** PR Feedback Fixer  
+### <LucideIcon name="Wrench" style={{ position: "relative", top: "2px" }}  /> The PR Fixer
+**Job:** Focused fixes
 
 The PR Fixer agent is specialized in resolving issues identified in Pull Requests. It listens for feedback and autonomously implements fixes.
 
 - **Best for:** Resolving PR comments, fixing CI/CD failures, addressing review feedback.
 
+:::info More agents coming
 While this cast of characters can get most jobs done, user feedback informs the development of new agents. We have a few [currently in development](#upcoming-agents)
-
+:::
 ---
 
 ## How Cloud Agents Work
@@ -130,4 +131,4 @@ Most people will only have one agent of each type, but you may want to more tha
 - **Documentation Writer:** a tech writer that understands your code and writes actionable user-facing documentation.
 - **Translator:** translates strings with accuracy and following your brand voice.
 
-Contact support if you're interested in trying them out in Beta or if you have other suggestions.
+[Write us](support@roocode.com) if you're interested in trying them out in Beta or if you have other suggestions.

docs/roo-code-cloud/github-integration.mdx

@@ -35,51 +35,22 @@ Now your Cloud Agents are able to work with Github.
 
 ## Calling agents
 
-By default, any PR Reviewer agents you have will continuously monitor for new PRs according to the criteria you define in [their settings](/roo-code-cloud/cloud-agents#settings).
+By default, any PR Reviewer agents you have will continuously monitor for new PRs according to the criteria you define in [their settings](/roo-code-cloud/cloud-agents#settings). So when a new PR is created, you'll see a comment like this:
 
+<img src="/img/integrations/gh-response-review.png" alt="The Rooviewer agent responding" width="400" />
 
+You can also call the PR Fixer agent to address any feedback you may have in the PR by calling **@Roomote** like this:
 
-## Features
+<img src="/img/integrations/gh-mention.png" alt="Mentioning @roomote to call the fixer" width="400" />
 
-### 🔍 Automated PR Reviews (PR Reviewer)
+You can also assign tasks to the Reviewer and Fixer from their own pages or the New Task button up top.
 
-The **PR Reviewer** agent monitors your repository for new pull requests. When a PR is opened, it automatically:
-1. **Analyzes the code changes**: Understands the context and intent of the PR.
-2. **Checks for issues**: Looks for bugs, security vulnerabilities, and code style violations.
-3. **Posts comments**: Adds detailed, actionable review comments directly on the PR lines.
+The New Task page for them lets you paste a relevant URL:
 
-**Configuration Options:**
-- **Trigger**: New PR opened or updated.
-- **Scope**: Can be set to review all PRs or only those from specific authors.
-- **Draft PRs**: Choose whether to review draft PRs or wait for "Ready for Review" status.
+<img src="/img/integrations/gh-new-task.png" alt="New task for the reviewer" width="400" />
 
-### 🛠️ On-Demand Fixes (PR Fixer)
+You can then follow the task from the web UI and see the results in the PR itself.
 
-The **PR Fixer** agent listens for your commands within PR comments. If a reviewer (human or AI) points out an issue, you can ask the agent to fix it.
-
-**How to use:**
-1. **Comment on a PR**: In a PR comment, mention `@roomote` followed by your request.
-   - Example: `@roomote please fix this null pointer exception`
-   - Example: `@roomote refactor this function to be more readable`
-2. **Agent Action**: The agent acknowledges the request (👀 reaction), analyzes the code, and pushes a commit with the fix.
-
-### Workflow Examples
-
-#### 1. The "Set It and Forget It" Review
-- Developer opens a PR.
-- **PR Reviewer** automatically scans the changes.
-- It finds a potential performance issue and comments on line 42.
-- Developer sees the comment and decides to fix it manually or asks `@roomote` to handle it.
-
-#### 2. Interactive Fixing
-- Human reviewer comments: "This logic seems flawed, it handles edge case X incorrectly."
-- Developer replies to the comment: `@roomote you're right, please handle edge case X as suggested.`
-- **PR Fixer** reads the thread, understands the context, and pushes a fix commit to the branch.
-
-## Security & Permissions
-
-- **Least Privilege**: Agents only access the repositories you explicitly select.
-- **Authentication**: Uses secure GitHub App authentication.
-- **Audit Logs**: All agent actions (comments, commits) are logged and visible in your [Roo Code Cloud Dashboard](/roo-code-cloud/dashboard).
-
-[Connect GitHub Now](https://app.roocode.com/integrations)
+:::info It's always @Roomote
+Please note that you can't call specific agents by name. When you use **@Roomote**, you're mentioning the Roo Code GitHub App, which handles the integration. The app will then smartly call the appropriate agent for the context.
+:::

docs/roo-code-cloud/slack-integration.mdx

@@ -31,15 +31,23 @@ You'll be prompted to connect to Slack when fist signing up for your account. Bu
 ## Calling Agents
 
 1. To interact with Roo Code agents, simply mention `@Roomote` in any channel where the bot is present to start a thread, giving it instructions. It will react with 👀 to acknowledge it.
+
 2. Then, the app will ask you what Agent to use with what repository. You can choose "all repositories", but the more focused you can make the agent, the higher the chances of good results.
     <img src="/img/integrations/slack-confirm.png" alt="The Slack app checking what agent and repo to use" width="280" />
+
     Keep in mind not all agents appear in this list, as some don't make sense (eg the PR Reviewer)
+
 3. If the agent has any questions, it will get back to you with options, like this:
     <img src="/img/integrations/slack-question.png" alt="The Slack app asking for an answer" width="280" />
+
 4. Once done, the agent will never directly modify your code. If it was a coding task, it will push a branch or create a PR, depending on how it's configured, but it will never touch `main`/`master` or production.
 
 You can always send messages directly though by mentioning **@Roomote** again in the thread. It will keep context.
 
+:::info It's always @Roomote
+Please note that you can't call specific agents by name. When you use **@Roomote**, you're mentioning the Roo Code Slack App, which handles the integration. That's why the app will ask you to pick an agent.
+:::
+
 
 ## Examples
 

package-lock.json

@@ -26,6 +26,7 @@
     "@roo-code/types": "^1.79.0",
     "@vscode/codicons": "^0.0.36",
     "clsx": "^2.0.0",
+    "lucide-react": "^0.559.0",
     "posthog-docusaurus": "^2.0.4",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",

package.json

@@ -0,0 +1,37 @@
+import React from 'react';
+import * as LucideIcons from 'lucide-react';
+
+interface LucideIconProps {
+  name: keyof typeof LucideIcons;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function LucideIcon({
+  name,
+  size = 20,
+  color,
+  strokeWidth,
+  className,
+  style
+}: LucideIconProps): JSX.Element | null {
+  const Icon = LucideIcons[name] as React.ComponentType<any>;
+  
+  if (!Icon) {
+    console.warn(`Icon "${name}" not found in lucide-react`);
+    return null;
+  }
+  
+  return (
+    <Icon
+      size={size}
+      color={color}
+      strokeWidth={strokeWidth}
+      className={className}
+      style={style}
+    />
+  );
+}

src/components/LucideIcon.tsx

@@ -21,7 +21,7 @@
   --accent: 139, 92, 246;
   --accent-foreground: 0 0% 9%;
   --ring: 0 0% 3.9%;
-  --destructive: 0 84.2% 60.2%;
+  --destructive: 354, 76%, 48%; 
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 89.8%;
   --input: 0 0% 89.8%;
@@ -60,7 +60,7 @@
   --ifm-color-gray-200: #e5e7eb;
 
   /* Docusaurus variables for light theme */
-  --ifm-color-primary: #60a5fa; /* Blue like roocode.com */
+  --ifm-color-primary: #60a5fa;
   --ifm-color-primary-dark: #3b82f6;
   --ifm-color-primary-darker: #2563eb;
   --ifm-color-primary-darkest: #1d4ed8;
@@ -92,7 +92,7 @@
   --accent: 139, 92, 246;
   --accent-foreground: 0 0% 98%;
   --ring: 0 0% 83.1%;
-  --destructive: 0 62.8% 30.6%;
+  --destructive: 354, 76%, 48%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 15%;
   --input: 0 0% 14.9%;
@@ -1673,17 +1673,17 @@ main[class*="docMainContainer"] {
 /* Admonitions (alerts) with roocode.com style */
 .theme-admonition {
   margin: var(--figure-margin) 0 !important;
-  padding: 1rem 1rem 0 !important;
+  padding: calc(var(--block-spacing) * 0.5) calc(var(--block-spacing) * 0.5) calc(var(--block-spacing) * 0.25) !important;
   border-radius: calc(var(--radius) + 4px) !important;
   border: 1px solid hsl(var(--border) / 0.5) !important;
   background: hsl(var(--card)) !important;
   backdrop-filter: blur(16px) !important;
 }
 
 .theme-admonition > div {
-  margin-bottom: 1em !important;
-  font-size: 1em;
-  font-weight: 600 !important;
+  margin-bottom: 0.5em !important;
+  font-size: var(--text-regular-size);
+  font-weight: 700 !important;
   text-transform: none;
 }
 
@@ -1693,6 +1693,19 @@ main[class*="docMainContainer"] {
   width: 1em !important;
 }
 
+.theme-admonition-warning > div,
+.theme-admonition-warning > div svg {
+  color: hsl(var(--destructive));
+  fill: hsl(var(--destructive));
+}
+
+.theme-admonition-info > div,
+.theme-admonition-info > div svg {
+  color: rgb(var(--accent));
+  fill: rgb(var(--accent));
+}
+
+
 /* Tables with roocode.com styling */
 .theme-doc-markdown table {
   width: 100%;

src/css/custom.css

@@ -1,7 +1,9 @@
 import MDXComponents from '@theme-original/MDXComponents';
 import Codicon from '@site/src/components/Codicon';
+import LucideIcon from '@site/src/components/LucideIcon';
 
 export default {
   ...MDXComponents,
   Codicon,
+  LucideIcon,
 };