|
| 1 | +# Claude Development Guide for Roo Code |
| 2 | + |
| 3 | +This document provides a comprehensive guide for Claude instances working on the Roo Code project. It covers the technology stack, architecture, development patterns, and key considerations for contributing effectively. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +**Roo Code** (previously Roo Cline) is an AI-powered autonomous coding agent that operates as a VS Code extension. It enables natural language interaction for code generation, debugging, file operations, terminal commands, and browser automation. |
| 8 | + |
| 9 | +### Key Features |
| 10 | + |
| 11 | +- Multi-mode AI assistant (Code, Architect, Ask, Debug modes) |
| 12 | +- File read/write operations within VS Code workspace |
| 13 | +- Terminal command execution |
| 14 | +- Browser automation capabilities |
| 15 | +- Model Context Protocol (MCP) integration |
| 16 | +- Custom modes and instructions |
| 17 | +- Multi-language support (18+ locales) |
| 18 | +- Marketplace for modes and MCP servers |
| 19 | + |
| 20 | +## Technology Stack |
| 21 | + |
| 22 | +### Core Technologies |
| 23 | + |
| 24 | +- **Runtime**: Node.js 20.19.2 |
| 25 | +- **Package Manager**: PNPM 10.8.1 (monorepo with workspaces) |
| 26 | +- **Build System**: Turborepo for orchestration |
| 27 | +- **Extension Framework**: VS Code Extension API |
| 28 | +- **Frontend**: React 18 + TypeScript + Vite |
| 29 | +- **UI Library**: Radix UI + Tailwind CSS 4.0 |
| 30 | +- **Language**: TypeScript 5.8.3 |
| 31 | + |
| 32 | +### Build Tools |
| 33 | + |
| 34 | +- **Extension Bundling**: ESBuild (production) with custom plugins |
| 35 | +- **Webview Bundling**: Vite 6.3.5 with React plugin |
| 36 | +- **Styling**: Tailwind CSS 4.0 with @tailwindcss/vite |
| 37 | +- **Code Analysis**: Tree-sitter for syntax parsing |
| 38 | +- **Internationalization**: i18next |
| 39 | + |
| 40 | +### AI Provider Support |
| 41 | + |
| 42 | +Supports 15+ AI providers including: |
| 43 | + |
| 44 | +- Anthropic (Claude) - Primary |
| 45 | +- OpenAI (GPT models) |
| 46 | +- AWS Bedrock |
| 47 | +- Google Vertex AI & Gemini |
| 48 | +- Local models (Ollama, LM Studio) |
| 49 | +- Open source routers (OpenRouter, LiteLLM) |
| 50 | + |
| 51 | +### Testing Framework |
| 52 | + |
| 53 | +- **Unit Tests**: Jest (for Node.js code) |
| 54 | +- **Frontend Tests**: Vitest (for React components) |
| 55 | +- **E2E Tests**: VSCode Test Framework |
| 56 | +- **Platform Support**: Linux, macOS, Windows with platform-specific test filtering |
| 57 | + |
| 58 | +## Architecture Overview |
| 59 | + |
| 60 | +### Monorepo Structure |
| 61 | + |
| 62 | +``` |
| 63 | +Roo-Code/ |
| 64 | +├── src/ # Main VS Code extension |
| 65 | +├── webview-ui/ # React frontend for webview |
| 66 | +├── apps/ |
| 67 | +│ ├── vscode-e2e/ # E2E tests |
| 68 | +│ ├── vscode-nightly/ # Nightly build variant |
| 69 | +│ ├── web-docs/ # Documentation site |
| 70 | +│ ├── web-evals/ # Evaluation frontend |
| 71 | +│ └── web-roo-code/ # Marketing website |
| 72 | +├── packages/ |
| 73 | +│ ├── types/ # Shared TypeScript types |
| 74 | +│ ├── build/ # Build utilities |
| 75 | +│ ├── config-eslint/ # ESLint configurations |
| 76 | +│ ├── config-typescript/ # TypeScript configurations |
| 77 | +│ ├── cloud/ # Cloud service integration |
| 78 | +│ ├── telemetry/ # Analytics and telemetry |
| 79 | +│ ├── ipc/ # Inter-process communication |
| 80 | +│ └── evals/ # Evaluation system |
| 81 | +└── locales/ # Internationalization |
| 82 | +``` |
| 83 | + |
| 84 | +### Core Extension Architecture |
| 85 | + |
| 86 | +#### 1. Entry Point (`src/extension.ts`) |
| 87 | + |
| 88 | +- Initializes extension context |
| 89 | +- Sets up output channel logging |
| 90 | +- Loads environment variables |
| 91 | +- Registers commands, providers, and services |
| 92 | + |
| 93 | +#### 2. Core Modules (`src/core/`) |
| 94 | + |
| 95 | +**ClineProvider** (`core/webview/ClineProvider.ts`) |
| 96 | + |
| 97 | +- Main orchestrator for the webview interface |
| 98 | +- Manages task stack and user interactions |
| 99 | +- Handles API provider settings and configuration |
| 100 | +- Implements telemetry and cloud service integration |
| 101 | + |
| 102 | +**Task System** (`core/task/Task.ts`) |
| 103 | + |
| 104 | +- Manages individual AI conversation sessions |
| 105 | +- Handles tool execution and response processing |
| 106 | +- Implements context tracking and sliding window |
| 107 | +- Manages checkpoint/restore functionality |
| 108 | + |
| 109 | +**Tool System** (`core/tools/`) |
| 110 | + |
| 111 | +- Implements all available tools (file operations, commands, browser, MCP) |
| 112 | +- Tool repetition detection and validation |
| 113 | +- Each tool has its own TypeScript file with consistent interface |
| 114 | + |
| 115 | +**Prompt System** (`core/prompts/`) |
| 116 | + |
| 117 | +- Dynamic system prompt generation based on mode and context |
| 118 | +- Modular prompt sections (capabilities, rules, objectives, etc.) |
| 119 | +- Support for custom instructions and mode-specific behavior |
| 120 | + |
| 121 | +#### 3. API Abstraction (`src/api/`) |
| 122 | + |
| 123 | +- **Providers**: Unified interface for 15+ AI providers |
| 124 | +- **Transform**: Request/response formatting, streaming, caching |
| 125 | +- **Base Provider**: Common functionality across all providers |
| 126 | +- **Router Provider**: Load balancing and fallback logic |
| 127 | + |
| 128 | +#### 4. Integration Layer (`src/integrations/`) |
| 129 | + |
| 130 | +- **Terminal**: Shell command execution and process management |
| 131 | +- **Editor**: Diff views, decorations, code actions |
| 132 | +- **Browser**: Puppeteer automation for web interactions |
| 133 | +- **Workspace**: File system operations and tracking |
| 134 | + |
| 135 | +#### 5. Services (`src/services/`) |
| 136 | + |
| 137 | +- **MCP Hub**: Model Context Protocol server management |
| 138 | +- **Code Index**: Semantic code search with embeddings |
| 139 | +- **Marketplace**: Mode and MCP server installation |
| 140 | +- **Checkpoints**: Git-based state management |
| 141 | + |
| 142 | +### Frontend Architecture (`webview-ui/`) |
| 143 | + |
| 144 | +#### React Component Structure |
| 145 | + |
| 146 | +``` |
| 147 | +src/ |
| 148 | +├── components/ |
| 149 | +│ ├── chat/ # Chat interface components |
| 150 | +│ ├── common/ # Reusable UI components |
| 151 | +│ ├── history/ # Task history management |
| 152 | +│ ├── settings/ # Configuration UI |
| 153 | +│ ├── marketplace/ # Marketplace interface |
| 154 | +│ ├── mcp/ # MCP server management |
| 155 | +│ └── modes/ # Mode selection UI |
| 156 | +├── context/ # React context providers |
| 157 | +├── hooks/ # Custom React hooks |
| 158 | +├── utils/ # Frontend utilities |
| 159 | +└── i18n/ # Internationalization setup |
| 160 | +``` |
| 161 | + |
| 162 | +#### State Management |
| 163 | + |
| 164 | +- React Context for global state |
| 165 | +- TanStack Query for server state management |
| 166 | +- Local state with React hooks |
| 167 | +- VS Code API integration via message passing |
| 168 | + |
| 169 | +## Development Commands |
| 170 | + |
| 171 | +### Setup |
| 172 | + |
| 173 | +```bash |
| 174 | +# Install dependencies |
| 175 | +pnpm install |
| 176 | + |
| 177 | +# Development build with watch |
| 178 | +pnpm bundle --watch |
| 179 | + |
| 180 | +# Type checking with watch |
| 181 | +pnpm watch:tsc |
| 182 | +``` |
| 183 | + |
| 184 | +### Building & Testing |
| 185 | + |
| 186 | +```bash |
| 187 | +# Run all tests |
| 188 | +pnpm test |
| 189 | + |
| 190 | +# Lint code |
| 191 | +pnpm lint |
| 192 | + |
| 193 | +# Type checking |
| 194 | +pnpm check-types |
| 195 | + |
| 196 | +# Build for production |
| 197 | +pnpm build |
| 198 | + |
| 199 | +# Bundle extension |
| 200 | +pnpm bundle |
| 201 | + |
| 202 | +# Create VSIX package |
| 203 | +pnpm vsix |
| 204 | +``` |
| 205 | + |
| 206 | +### Development Workflow |
| 207 | + |
| 208 | +```bash |
| 209 | +# Clean build |
| 210 | +pnpm clean |
| 211 | + |
| 212 | +# Full development cycle |
| 213 | +pnpm clean && pnpm lint && pnpm test && pnpm build |
| 214 | + |
| 215 | +# Install in VS Code |
| 216 | +pnpm vsix --out ../bin/roo-code.vsix && code --install-extension bin/roo-code.vsix |
| 217 | +``` |
| 218 | + |
| 219 | +## Key Architectural Patterns |
| 220 | + |
| 221 | +### 1. Mode System |
| 222 | + |
| 223 | +The application supports multiple operational modes: |
| 224 | + |
| 225 | +- **Code Mode**: General-purpose coding with full tool access |
| 226 | +- **Architect Mode**: Planning and design with limited file editing |
| 227 | +- **Ask Mode**: Question answering with read-only access |
| 228 | +- **Debug Mode**: Systematic problem diagnosis |
| 229 | +- **Custom Modes**: User-defined with configurable tool groups and prompts |
| 230 | + |
| 231 | +### 2. Tool Groups |
| 232 | + |
| 233 | +Tools are organized into logical groups: |
| 234 | + |
| 235 | +- **Read**: File reading, search, code analysis |
| 236 | +- **Edit**: File writing, content modification |
| 237 | +- **Command**: Terminal execution |
| 238 | +- **Browser**: Web automation |
| 239 | +- **MCP**: External tool integration |
| 240 | + |
| 241 | +### 3. Provider Abstraction |
| 242 | + |
| 243 | +All AI providers implement a common interface: |
| 244 | + |
| 245 | +```typescript |
| 246 | +interface BaseProvider { |
| 247 | + createMessage(messages: ApiMessage[]): AsyncGenerator<ApiStreamResponse> |
| 248 | + validateSettings(settings: ProviderSettings): void |
| 249 | + getMaxTokens(): number |
| 250 | +} |
| 251 | +``` |
| 252 | + |
| 253 | +### 4. Message Flow |
| 254 | + |
| 255 | +1. User input → WebView |
| 256 | +2. WebView → Extension (via VS Code API) |
| 257 | +3. Extension → Task processor |
| 258 | +4. Task → Tool execution |
| 259 | +5. Tool results → AI provider |
| 260 | +6. AI response → WebView rendering |
| 261 | + |
| 262 | +### 5. Internationalization |
| 263 | + |
| 264 | +- 18+ supported languages |
| 265 | +- JSON-based translation files |
| 266 | +- Runtime language switching |
| 267 | +- Locale-specific documentation |
| 268 | + |
| 269 | +## Development Guidelines |
| 270 | + |
| 271 | +### Code Style |
| 272 | + |
| 273 | +- TypeScript strict mode enabled |
| 274 | +- ESLint with custom rules (see `src/eslint.config.mjs`) |
| 275 | +- Prettier for formatting |
| 276 | +- Interface-first design patterns |
| 277 | + |
| 278 | +### Testing Strategy |
| 279 | + |
| 280 | +- Unit tests for core logic (Jest) |
| 281 | +- Component tests for React UI (Vitest) |
| 282 | +- Integration tests for VS Code functionality |
| 283 | +- Platform-specific test filtering for Windows/Unix |
| 284 | + |
| 285 | +### Error Handling |
| 286 | + |
| 287 | +- Comprehensive error serialization |
| 288 | +- Telemetry integration for error tracking |
| 289 | +- User-friendly error messages |
| 290 | +- Graceful degradation for provider failures |
| 291 | + |
| 292 | +### File Organization |
| 293 | + |
| 294 | +- Feature-based directory structure |
| 295 | +- Consistent naming conventions (`camelCase` for files, `PascalCase` for classes) |
| 296 | +- Co-located tests in `__tests__` directories |
| 297 | +- Type definitions in dedicated files |
| 298 | + |
| 299 | +### Performance Considerations |
| 300 | + |
| 301 | +- Lazy loading for heavy dependencies (Tree-sitter, MCP) |
| 302 | +- Webview resource optimization |
| 303 | +- Token usage tracking and limits |
| 304 | +- Sliding window for conversation context |
| 305 | + |
| 306 | +## Common Development Tasks |
| 307 | + |
| 308 | +### Adding a New AI Provider |
| 309 | + |
| 310 | +1. Create provider class in `src/api/providers/` |
| 311 | +2. Implement `BaseProvider` interface |
| 312 | +3. Add provider configuration to types |
| 313 | +4. Update provider router and settings UI |
| 314 | +5. Add comprehensive tests |
| 315 | + |
| 316 | +### Adding a New Tool |
| 317 | + |
| 318 | +1. Create tool file in `src/core/tools/` |
| 319 | +2. Implement tool interface with validation |
| 320 | +3. Add tool to appropriate tool group |
| 321 | +4. Update prompt system descriptions |
| 322 | +5. Add unit tests and error handling |
| 323 | + |
| 324 | +### Adding UI Components |
| 325 | + |
| 326 | +1. Create React component in appropriate directory |
| 327 | +2. Use Radix UI primitives for accessibility |
| 328 | +3. Apply Tailwind CSS for styling |
| 329 | +4. Add internationalization support |
| 330 | +5. Write component tests |
| 331 | + |
| 332 | +### Modifying System Prompts |
| 333 | + |
| 334 | +1. Update relevant section in `src/core/prompts/sections/` |
| 335 | +2. Ensure mode-specific customization |
| 336 | +3. Test with different provider models |
| 337 | +4. Update documentation if needed |
| 338 | + |
| 339 | +## Important Considerations |
| 340 | + |
| 341 | +### Security |
| 342 | + |
| 343 | +- File access respects `.rooignore` patterns |
| 344 | +- Protected directories prevent sensitive file access |
| 345 | +- Command execution requires user approval |
| 346 | +- Browser automation in sandboxed environment |
| 347 | + |
| 348 | +### Compatibility |
| 349 | + |
| 350 | +- VS Code version 1.84.0+ required |
| 351 | +- Node.js 20.19.2 specific dependency |
| 352 | +- Cross-platform terminal handling |
| 353 | +- Provider-specific model limitations |
| 354 | + |
| 355 | +### Performance |
| 356 | + |
| 357 | +- Tree-sitter parsing for large codebases |
| 358 | +- Streaming responses for better UX |
| 359 | +- Efficient context window management |
| 360 | +- Lazy loading of heavy dependencies |
| 361 | + |
| 362 | +### Extensibility |
| 363 | + |
| 364 | +- MCP protocol for external tools |
| 365 | +- Custom mode definitions |
| 366 | +- Provider plugin architecture |
| 367 | +- Marketplace integration |
| 368 | + |
| 369 | +## Debugging Tips |
| 370 | + |
| 371 | +### Common Issues |
| 372 | + |
| 373 | +1. **Extension not loading**: Check VS Code developer console |
| 374 | +2. **Webview not rendering**: Verify Vite build output |
| 375 | +3. **Tool execution failures**: Check terminal output and permissions |
| 376 | +4. **Provider API errors**: Verify API keys and rate limits |
| 377 | + |
| 378 | +### Development Tools |
| 379 | + |
| 380 | +- VS Code Extension Host for debugging |
| 381 | +- Chrome DevTools for webview debugging |
| 382 | +- Output channel logging for extension logs |
| 383 | +- Telemetry dashboard for usage analytics |
| 384 | + |
| 385 | +This guide should help Claude instances understand the codebase structure, make informed decisions about code changes, and maintain consistency with the project's architecture and patterns. |
0 commit comments