Slack guide

Author: brunobergher

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

@@ -12,63 +12,63 @@ image: /img/social-share.jpg
 
 # Slack Integration
 
-The Roo Code Slack integration brings your AI development team directly into your chat workspace. You can summon agents to explain code, plan new features, or execute coding tasks without leaving Slack.
+The Roo Code Slack integration brings your Cloud Agent team directly into your chat workspace. You can summon agents to explain code, plan new features, or execute coding tasks without leaving Slack, and they get along quite well with humans.
 
-<img src="/img/slack-integration/overview.png" alt="Slack Integration Overview" width="800" />
+Summoning agents from Slack in public channels is an effective way to bring the entire team into the process, to learn by example how to best leverage Cloud Agents (and the information/outcomes they produce).
+
+---
 
 ## Setting Up
 
-1. **Install the Slack App**: Go to [app.roocode.com/integrations](https://app.roocode.com/integrations) and click "Connect Slack".
-2. **Authorize**: Grant the necessary permissions for the Roo Code bot to read messages and post replies in your workspace.
-3. **Invite to Channels**: Add the `@Roomote` bot to the channels where you want to use it.
+You'll be prompted to connect to Slack when fist signing up for your account. But if you dismiss it, you can do it later:
+
+1. Go to your personal or org settings (if avaialble) in the top right user menu
+2. Click on "Connect" and follow the process
+3. Add the `@Roomote` bot to the channels where you want it to be available
+
+**Note:** The Slack integration will not watch your conversations unless you specifically mention `@Roomote`.
 
-## Interactions
+## Calling Agents
 
-To interact with Roo Code agents, simply mention `@Roomote` in any channel where the bot is present.
+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" />
+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.
+
+## Examples
+
+### Planning Projects
 
-### 1. Planning Features (Planner Agent)
 Start a thread to discuss and plan a new feature with your team and the AI.
 
-> **User:** `@Roomote We need to add a 'Forgot Password' flow to the user service. Can you plan this out?`
->
-> **@Roomote:** 👀 *Thinking...*
->
-> **@Roomote:** **(Planner Agent)** Here is a proposed implementation plan for the Forgot Password flow:
-> 1. Create `PasswordResetToken` model...
-> 2. Add API endpoint `/api/auth/forgot-password`...
-> ...
-
-### 2. Explaining Code (Explainer Agent)
-Ask questions about your codebase to get immediate answers.
-
-> **User:** `@Roomote explain how the authentication middleware handles JWT tokens in the backend repo`
->
-> **@Roomote:** **(Explainer Agent)** The authentication middleware in `backend/src/middleware/auth.ts` works as follows:
-> 1. Extracts the token from the `Authorization` header.
-> 2. Verifies the signature using `JWT_SECRET`.
-> 3. Attaches the decoded user payload to `req.user`.
-
-### 3. Executing Tasks (Coder Agent)
-Trigger coding tasks directly from chat.
+> **@Roomote** We need to add a 'Forgot Password' flow to the user service. Can you plan this out?
 
-> **User:** `@Roomote create a new API endpoint for user profile updates based on the plan we just discussed`
->
-> **@Roomote:** **(Coder Agent)** I'll get started on that. I've created a new task to implement the user profile update endpoint. You can follow the progress [here](https://app.roocode.com/tasks/123).
+Pick a Planner agent wait for the plan. You can then run it by your team or give it to the Coder agent to build.
 
-## Workflow
+### Explaining Code
+
+Ask questions about your codebase to get immediate answers. Great for understanding bugs or confusing behavior.
+
+> **@Roomote** why may users be getting double confirmation emails after completing their purchase?
+
+But wait, agents are actually smart enough to understand the context of threads. So you can, after some back-and-forth with a colleague, simply ask:
+
+> **@Roomote** why is this hapening?
+
+And it will know what to do.
+
+### Writing Code
+
+Trigger coding tasks directly from chat.
 
-1. **Invoke**: Mention `@Roomote` with your request.
-2. **Acknowledge**: The bot reacts with 👀 to confirm it's processing.
-3. **Clarify**: If needed, the bot will ask follow-up questions to identify the correct:
-    - **Agent Type**: (e.g., Planner vs. Coder)
-    - **Repository**: Which codebase to apply the changes to.
-4. **Execute**: The selected agent runs in the cloud.
-5. **Report**: The bot posts the result back to the thread.
+> **@Roomote** create a new API endpoint for user profile updates, including support for profile image upload
 
-## Use Cases
+> **@Roomote** fix this bug: `\<BUG_URL\>`
 
-- **Team Knowledge Sharing**: Ask for an explanation in a public channel so the whole team benefits from the answer.
-- **Brainstorming**: Use the Planner agent to flesh out ideas during a slack huddle.
-- **Quick Fixes**: Trigger simple tasks without context switching to your IDE.
+> **@Roomote** build this: `[paste an implementation plan from the planner]`
 
-[Connect Slack Now](https://app.roocode.com/integrations)
+The possibilities are enourmous.

src/css/custom.css

@@ -1637,11 +1637,13 @@ main[class*="docMainContainer"] {
 
 /* Inline code styling */
 .theme-doc-markdown code {
-  background-color: hsl(var(--background) / 0.6) !important;
-  border: 1px solid hsl(var(--border) / 0.3) !important;
-  padding: 0.2rem 0.4rem !important;
-  font-size: 0.85em !important;
-  border-radius: 0.375rem !important;
+  background-color: hsl(var(--card));
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: 0.35rem;
+  padding: 0.2rem 0.4rem 0.3rem !important;
+  font-size: 0.9em !important;
+  font-weight: 500 !important;
+  
 }
 
 /* Code block title */
@@ -1655,20 +1657,17 @@ main[class*="docMainContainer"] {
   font-weight: 500 !important;
 }
 
-/* Blockquotes like roocode.com */
 .theme-doc-markdown blockquote {
   border-left: 4px solid hsl(var(--border));
   background: hsl(var(--background) / 0.5);
   backdrop-filter: blur(16px);
-  padding: 1rem 1.5rem;
   margin: var(--figure-margin) 0;
-  border-radius: 0 calc(var(--radius)) calc(var(--radius)) 0;
+  padding: calc(var(--figure-margin)/2) var(--figure-margin);
 }
 
 .theme-doc-markdown blockquote p {
   margin-bottom: 0;
   color: hsl(var(--muted-foreground));
-  font-style: italic;
 }
 
 /* Admonitions (alerts) with roocode.com style */