Merge remote-tracking branch 'origin/main' into aws-profile-support

.git-blame-ignore-revs

@@ -1,3 +1,3 @@
-# Ran Prettier on all files - https://github.com/RooVetGit/Roo-Cline/pull/404
+# Ran Prettier on all files - https://github.com/RooVetGit/Roo-Code/pull/404
 60a0a824b96a0b326af4d8871b6903f4ddcfe114
 579bdd9dbf6d2d569e5e7adb5ff6292b1e42ea34

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
 blank_issues_enabled: false
 contact_links:
     - name: Feature Request
-      url: https://github.com/RooVetGit/Roo-Cline/discussions/categories/feature-requests
-      about: Share and vote on feature requests for Roo Cline
+      url: https://github.com/RooVetGit/Roo-Code/discussions/categories/feature-requests
+      about: Share and vote on feature requests for Roo Code
     - name: Leave a Review
       url: https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline&ssr=false#review-details
-      about: Enjoying Roo Cline? Leave a review here!
+      about: Enjoying Roo Code? Leave a review here!

.github/workflows/code-qa.yml

@@ -1,4 +1,4 @@
-name: Code QA Roo Cline
+name: Code QA Roo Code
 
 on:
   push:

CHANGELOG.md

@@ -1,4 +1,44 @@
-# Roo Cline Changelog
+# Roo Code Changelog
+
+## [3.2.8]
+
+- Fixed bug opening custom modes settings JSON
+- Reverts provider key entry back to checking onInput instead of onChange to hopefully address issues entering API keys (thanks @samhvw8!)
+- Added explicit checkbox to use Azure for OpenAI compatible providers (thanks @samhvw8!)
+- Fixed Glama usage reporting (thanks @punkpeye!)
+- Added Llama 3.3 70B Instruct model to the AWS Bedrock provider options (thanks @Premshay!)
+
+## [3.2.7]
+
+- Fix bug creating new configuration profiles
+
+## [3.2.6]
+
+- Fix bug with role definition overrides for built-in modes
+
+## [3.2.5]
+
+- Added gemini flash thinking 01-21 model and a few visual fixes (thanks @monotykamary!)
+
+## [3.2.4]
+
+- Only allow use of the diff tool if it's enabled in settings
+
+## [3.2.3]
+
+- Fix bug where language selector wasn't working
+
+## [3.2.0 - 3.2.2]
+
+- **Name Change From Roo Cline to Roo Code:** We're excited to announce our new name! After growing beyond 50,000 installations, we've rebranded from Roo Cline to Roo Code to better reflect our identity as we chart our own course.
+
+- **Custom Modes:** Create your own personas for Roo Code! While our built-in modes (Code, Architect, Ask) are still here, you can now shape entirely new ones:
+    - Define custom prompts
+    - Choose which tools each mode can access
+    - Create specialized assistants for any workflow
+    - Just type "Create a new mode for <X>" or visit the Prompts tab in the top menu to get started
+
+Join us at https://www.reddit.com/r/RooCode to share your custom modes and be part of our next chapter!
 
 ## [3.1.7]
 
@@ -51,7 +91,7 @@
 
 ## [3.0.0]
 
-- This release adds chat modes! Now you can ask Roo Cline questions about system architecture or the codebase without immediately jumping into writing code. You can even assign different API configuration profiles to each mode if you prefer to use different models for thinking vs coding. Would love feedback in the new Roo Cline Reddit! https://www.reddit.com/r/roocline
+- This release adds chat modes! Now you can ask Roo Code questions about system architecture or the codebase without immediately jumping into writing code. You can even assign different API configuration profiles to each mode if you prefer to use different models for thinking vs coding. Would love feedback in the new Roo Code Reddit! https://www.reddit.com/r/RooCode
 
 ## [2.2.46]
 

LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2024 Cline Bot Inc.
+   Copyright 2025 Roo Veterinary Inc.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

README.md

@@ -1,8 +1,38 @@
-# Roo Cline
+# Roo Code (prev. Roo Cline)
 
-A fork of Cline, an autonomous coding agent, with some additional experimental features. It’s been mainly writing itself recently, with a light touch of human guidance here and there.
+**Roo Code** is an AI-powered **autonomous coding agent** that lives in your editor. It can:
 
-You can track what's new at our [CHANGELOG](CHANGELOG.md), with some highlights below.
+- Communicate in natural language
+- Read and write files directly in your workspace
+- Run terminal commands
+- Automate browser actions
+- Integrate with any OpenAI-compatible or custom API/model
+- Adapt its “personality” and capabilities through **Custom Modes**
+
+Whether you’re seeking a flexible coding partner, a system architect, or specialized roles like a QA engineer or product manager, Roo Code can help you build software more efficiently.
+
+Check out the [CHANGELOG](CHANGELOG.md) for detailed updates and fixes.
+
+---
+
+## New in 3.2: Introducing Custom Modes, plus rebranding from Roo Cline → Roo Code! 🚀
+
+### Introducing Roo Code
+
+Our biggest update yet is here - we're officially changing our name from Roo Cline to Roo Code! After growing beyond 50,000 installations across VS Marketplace and Open VSX, we're ready to chart our own course. Our heartfelt thanks to everyone in the Cline community who helped us reach this milestone.
+
+### Custom Modes
+
+To mark this new chapter, we're introducing the power to shape Roo Code into any role you need. You can now create an entire team of agents with deeply customized prompts:
+
+- QA Engineers who write thorough test cases and catch edge cases
+- Product Managers who excel at user stories and feature prioritization
+- UI/UX Designers who craft beautiful, accessible interfaces
+- Code Reviewers who ensure quality and maintainability
+
+The best part is that Roo can help you create these new modes! Just type "Create a new mode for <X>" in the chat to get started, and go into the Prompts tab or (carefully) edit the JSON representation to customize the prompt and allowed tools to your liking.
+
+We can't wait to hear more about what you build and how we can continue to evolve the Roo Code platform to support you. Please join us in our new https://www.reddit.com/r/RooCode subreddit to share your custom modes and be part of our next chapter. 🚀
 
 ## New in 3.1: Chat Mode Prompt Customization & Prompt Enhancements
 
@@ -41,206 +71,168 @@ It’s super simple! There’s a dropdown in the bottom left of the chat input t
 
 Right now, switching modes is a manual process. In the future, we’d love to give Cline the ability to suggest mode switches based on context. For now, we’d really appreciate your feedback on this feature.
 
-## Disclaimer
-
-**Please note** that Roo Veterinary, Inc does **not** make any representations or warranties regarding any code, models, or other tools provided or made available in connection with Roo-Cline, any associated third-party tools, or any resulting outputs. You assume **all risks** associated with the use of any such tools or outputs; such tools are provided on an **"AS IS"** and **"AS AVAILABLE"** basis. Such risks may include, without limitation, intellectual property infringement, cyber vulnerabilities or attacks, bias, inaccuracies, errors, defects, viruses, downtime, property loss or damage, and/or personal injury. You are solely responsible for your use of any such tools or outputs (including, without limitation, the legality, appropriateness, and results thereof).
-
-## Demo
-
-Here's an example of Roo-Cline autonomously creating a snake game with "Always approve write operations" and "Always approve browser actions" turned on:
-
-https://github.com/user-attachments/assets/c2bb31dc-e9b2-4d73-885d-17f1471a4987
-
-## Contributing
+---
 
-To contribute to the project, start by exploring [open issues](https://github.com/RooVetGit/Roo-Cline/issues) or checking our [feature request board](https://github.com/RooVetGit/Roo-Cline/discussions/categories/feature-requests). We'd also love to have you join the [Roo Cline Reddit](https://www.reddit.com/r/roocline/) to share ideas and connect with other contributors.
+## Key Features
 
-### Local Setup
+### Adaptive Autonomy
 
-1. Install dependencies:
+Roo Code communicates in **natural language** and proposes actions—file edits, terminal commands, browser tests, etc. You choose how it behaves:
 
-    ```bash
-    npm run install:all
-    ```
+- **Manual Approval**: Review and approve every step to keep total control.
+- **Autonomous/Auto-Approve**: Grant Roo Code the ability to run tasks without interruption, speeding up routine workflows.
+- **Hybrid**: Auto-approve specific actions (e.g., file writes) but require confirmation for riskier tasks (like deploying code).
 
-2. Build the VSIX file:
-    ```bash
-    npm run build
-    ```
-3. The new VSIX file will be created in the `bin/` directory
-4. Install the extension from the VSIX file as described below:
+No matter your preference, you always have the final say on what Roo Code does.
 
-    - **Option 1:** Drag and drop the `.vsix` file into your VSCode-compatible editor's Extensions panel (Cmd/Ctrl+Shift+X).
+---
 
-    - **Option 2:** Install the plugin using the CLI, make sure you have your VSCode-compatible CLI installed and in your `PATH` variable. Cursor example: `export PATH="$PATH:/Applications/Cursor.app/Contents/MacOS"`
+### Supports Any API or Model
 
-    ```bash
-    # Ex: cursor --install-extension bin/roo-cline-2.0.1.vsix
-    # Ex: code --install-extension bin/roo-cline-2.0.1.vsix
-    ```
+Use Roo Code with:
 
-5. Launch by pressing `F5` (or `Run`->`Start Debugging`) to open a new VSCode window with the extension loaded. (You may need to install the [esbuild problem matchers extension](https://marketplace.visualstudio.com/items?itemName=connor4312.esbuild-problem-matchers) if you run into issues building the project.)
+- **OpenRouter**, Anthropic, Glama, OpenAI, Google Gemini, AWS Bedrock, Azure, GCP Vertex, or local models (LM Studio/Ollama)—anything **OpenAI-compatible**.
+- Different models per mode. For instance, an advanced model for architecture vs. a cheaper model for daily coding tasks.
+- **Usage Tracking**: Roo Code monitors token and cost usage for each session.
 
-### Publishing
+---
 
-We use [changesets](https://github.com/changesets/changesets) for versioning and publishing this package. To make changes:
+### Custom Modes
 
-1. Create a PR with your changes
-2. Create a new changeset by running `npm run changeset`
-    - Select the appropriate kind of change - `patch` for bug fixes, `minor` for new features, or `major` for breaking changes
-    - Write a clear description of your changes that will be included in the changelog
-3. Get the PR approved and pass all checks
-4. Merge it
+**Custom Modes** let you shape Roo Code’s persona, instructions, and permissions:
 
-Once your merge is successful:
+- **Built-in**:
+    - **Code** – Default, multi-purpose coding assistant
+    - **Architect** – High-level system and design insights
+    - **Ask** – Research and Q&A for deeper exploration
+- **User-Created**: Type `Create a new mode for <X>` and Roo Code generates a brand-new persona for that role—complete with tailored prompts and optional tool restrictions.
 
-- The release workflow will automatically create a new "Changeset version bump" PR
-- This PR will:
-    - Update the version based on your changeset
-    - Update the `CHANGELOG.md` file
-- Once the PR is approved and merged, a new version will be published
+Modes can each have unique instructions and skill sets. Manage them in the **Prompts** tab.
 
 ---
 
-# Cline (prev. Claude Dev) – [#1 on OpenRouter](https://openrouter.ai/)
-
-<p align="center">
-  <img src="https://media.githubusercontent.com/media/cline/cline/main/assets/docs/demo.gif" width="100%" />
-</p>
-
-<div align="center">
-<table>
-<tbody>
-<td align="center">
-<a href="https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev" target="_blank"><strong>Download on VS Marketplace</strong></a>
-</td>
-<td align="center">
-<a href="https://discord.gg/cline" target="_blank"><strong>Join the Discord</strong></a>
-</td>
-<td align="center">
-<a href="https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop" target="_blank"><strong>Feature Requests</strong></a>
-</td>
-<td align="center">
-<a href="https://cline.bot/join-us" target="_blank"><strong>We're Hiring!</strong></a>
-</td>
-</tbody>
-</table>
-</div>
-
-Meet Cline, an AI assistant that can use your **CLI** a**N**d **E**ditor.
-
-Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf), Cline can handle complex software development tasks step-by-step. With tools that let him create & edit files, explore large projects, use the browser, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond code completion or tech support. Cline can even use the Model Context Protocol (MCP) to create new tools and extend his own capabilities. While autonomous AI scripts traditionally run in sandboxed environments, this extension provides a human-in-the-loop GUI to approve every file change and terminal command, providing a safe and accessible way to explore the potential of agentic AI.
-
-1. Enter your task and add images to convert mockups into functional apps or fix bugs with screenshots.
-2. Cline starts by analyzing your file structure & source code ASTs, running regex searches, and reading relevant files to get up to speed in existing projects. By carefully managing what information is added to context, Cline can provide valuable assistance even for large, complex projects without overwhelming the context window.
-3. Once Cline has the information he needs, he can:
-    - Create and edit files + monitor linter/compiler errors along the way, letting him proactively fix issues like missing imports and syntax errors on his own.
-    - Execute commands directly in your terminal and monitor their output as he works, letting him e.g., react to dev server issues after editing a file.
-    - For web development tasks, Cline can launch the site in a headless browser, click, type, scroll, and capture screenshots + console logs, allowing him to fix runtime errors and visual bugs.
-4. When a task is completed, Cline will present the result to you with a terminal command like `open -a "Google Chrome" index.html`, which you run with a click of a button.
-
-> [!TIP]
-> Use the `CMD/CTRL + Shift + P` shortcut to open the command palette and type "Cline: Open In New Tab" to open the extension as a tab in your editor. This lets you use Cline side-by-side with your file explorer, and see how he changes your workspace more clearly.
-
----
+### File & Editor Operations
 
-<img align="right" width="340" src="https://github.com/user-attachments/assets/3cf21e04-7ce9-4d22-a7b9-ba2c595e88a4">
+Roo Code can:
 
-### Use any API and Model
+- **Create and edit** files in your project (showing you diffs).
+- **React** to linting or compile-time errors automatically (missing imports, syntax errors, etc.).
+- **Track changes** via your editor’s timeline so you can review or revert if needed.
 
-Cline supports API providers like OpenRouter, Anthropic, Glama, OpenAI, Google Gemini, AWS Bedrock, Azure, and GCP Vertex. You can also configure any OpenAI compatible API, or use a local model through LM Studio/Ollama. If you're using OpenRouter, the extension fetches their latest model list, allowing you to use the newest models as soon as they're available.
+---
 
-The extension also keeps track of total tokens and API usage cost for the entire task loop and individual requests, keeping you informed of spend every step of the way.
+### Command Line Integration
 
-<!-- Transparent pixel to create line break after floating image -->
+Easily run commands in your terminal—Roo Code:
 
-<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+- Installs packages, runs builds, or executes tests.
+- Monitors output and adapts if it detects errors.
+- Lets you keep dev servers running in the background while continuing to work.
 
-<img align="left" width="370" src="https://github.com/user-attachments/assets/81be79a8-1fdb-4028-9129-5fe055e01e76">
+You approve or decline each command, or set auto-approval for routine operations.
 
-### Run Commands in Terminal
+---
 
-Thanks to the new [shell integration updates in VSCode v1.93](https://code.visualstudio.com/updates/v1_93#_terminal-shell-integration-api), Cline can execute commands directly in your terminal and receive the output. This allows him to perform a wide range of tasks, from installing packages and running build scripts to deploying applications, managing databases, and executing tests, all while adapting to your dev environment & toolchain to get the job done right.
+### Browser Automation
 
-For long running processes like dev servers, use the "Proceed While Running" button to let Cline continue in the task while the command runs in the background. As Cline works he’ll be notified of any new terminal output along the way, letting him react to issues that may come up, such as compile-time errors when editing files.
+Roo Code can also open a **browser** session to:
 
-<!-- Transparent pixel to create line break after floating image -->
+- Launch your local or remote web app.
+- Click, type, scroll, and capture screenshots.
+- Collect console logs to debug runtime or UI/UX issues.
 
-<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+Ideal for **end-to-end testing** or visually verifying changes without constant copy-pasting.
 
-<img align="right" width="400" src="https://github.com/user-attachments/assets/c5977833-d9b8-491e-90f9-05f9cd38c588">
+---
 
-### Create and Edit Files
+### Adding Tools with MCP
 
-Cline can create and edit files directly in your editor, presenting you a diff view of the changes. You can edit or revert Cline's changes directly in the diff view editor, or provide feedback in chat until you're satisfied with the result. Cline also monitors linter/compiler errors (missing imports, syntax errors, etc.) so he can fix issues that come up along the way on his own.
+Extend Roo Code with the **Model Context Protocol (MCP)**:
 
-All changes made by Cline are recorded in your file's Timeline, providing an easy way to track and revert modifications if needed.
+- “Add a tool that manages AWS EC2 resources.”
+- “Add a tool that queries the company Jira.”
+- “Add a tool that pulls the latest PagerDuty incidents.”
 
-<!-- Transparent pixel to create line break after floating image -->
+Roo Code can build and configure new tools autonomously (with your approval) to expand its capabilities instantly.
 
-<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+---
 
-<img align="left" width="370" src="https://github.com/user-attachments/assets/bc2e85ba-dfeb-4fe6-9942-7cfc4703cbe5">
+### Context Mentions
 
-### Use the Browser
+When you need to provide extra context:
 
-With Claude 3.5 Sonnet's new [Computer Use](https://www.anthropic.com/news/3-5-models-and-computer-use) capability, Cline can launch a browser, click elements, type text, and scroll, capturing screenshots and console logs at each step. This allows for interactive debugging, end-to-end testing, and even general web use! This gives him autonomy to fixing visual bugs and runtime issues without you needing to handhold and copy-pasting error logs yourself.
+- **@file** – Embed a file’s contents in the conversation.
+- **@folder** – Include entire folder structures.
+- **@problems** – Pull in workspace errors/warnings for Roo Code to fix.
+- **@url** – Fetch docs from a URL, converting them to markdown.
+- **@git** – Supply a list of Git commits or diffs for Roo Code to analyze code history.
 
-Try asking Cline to "test the app", and watch as he runs a command like `npm run dev`, launches your locally running dev server in a browser, and performs a series of tests to confirm that everything works. [See a demo here.](https://x.com/sdrzn/status/1850880547825823989)
+Help Roo Code focus on the most relevant details without blowing the token budget.
 
-<!-- Transparent pixel to create line break after floating image -->
+---
 
-<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+## Installation
 
-<img align="right" width="350" src="https://github.com/user-attachments/assets/ac0efa14-5c1f-4c26-a42d-9d7c56f5fadd">
+Roo Code is available on:
 
-### "add a tool that..."
+- **[VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline)**
+- **[Open-VSX](https://open-vsx.org/extension/RooVeterinaryInc/roo-cline)**
 
-Thanks to the [Model Context Protocol](https://github.com/modelcontextprotocol), Cline can extend his capabilities through custom tools. While you can use [community-made servers](https://github.com/modelcontextprotocol/servers), Cline can instead create and install tools tailored to your specific workflow. Just ask Cline to "add a tool" and he will handle everything, from creating a new MCP server to installing it into the extension. These custom tools then become part of Cline's toolkit, ready to use in future tasks.
+1. **Search “Roo Code”** in your editor’s Extensions panel to install directly.
+2. Or grab the `.vsix` file from Marketplace / Open-VSX and **drag-and-drop** into your editor.
+3. **Open** Roo Code from the Activity Bar or Command Palette to start chatting.
 
-- "add a tool that fetches Jira tickets": Retrieve ticket ACs and put Cline to work
-- "add a tool that manages AWS EC2s": Check server metrics and scale instances up or down
-- "add a tool that pulls the latest PagerDuty incidents": Fetch details and ask Cline to fix bugs
+> **Tip**: Use `Cmd/Ctrl + Shift + P` → “Roo Code: Open in New Tab” to dock the AI assistant alongside your file explorer.
 
-<!-- Transparent pixel to create line break after floating image -->
+---
 
-<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+## Local Setup & Development
 
-<img align="left" width="360" src="https://github.com/user-attachments/assets/7fdf41e6-281a-4b4b-ac19-020b838b6970">
+1. **Clone** the repo:
+    ```bash
+    git clone https://github.com/RooVetGit/Roo-Code.git
+    ```
+2. **Install dependencies**:
+    ```bash
+    npm run install:all
+    ```
+3. **Build** the extension:
+    ```bash
+    npm run build
+    ```
+    - A `.vsix` file will appear in the `bin/` directory.
+4. **Install** the `.vsix` manually if desired:
+    ```bash
+    code --install-extension bin/roo-code-4.0.0.vsix
+    ```
+5. **Debug**:
+    - Press `F5` (or **Run** → **Start Debugging**) in VSCode to open a new session with Roo Code loaded.
 
-### Add Context
+We use [changesets](https://github.com/changesets/changesets) for versioning and publishing. Check our `CHANGELOG.md` for release notes.
 
-**`@url`:** Paste in a URL for the extension to fetch and convert to markdown, useful when you want to give Cline the latest docs
+---
 
-**`@problems`:** Add workspace errors and warnings ('Problems' panel) for Cline to fix
+## Disclaimer
 
-**`@file`:** Adds a file's contents so you don't have to waste API requests approving read file (+ type to search files)
+**Please note** that Roo Veterinary, Inc does **not** make any representations or warranties regarding any code, models, or other tools provided or made available in connection with Roo Code, any associated third-party tools, or any resulting outputs. You assume **all risks** associated with the use of any such tools or outputs; such tools are provided on an **"AS IS"** and **"AS AVAILABLE"** basis. Such risks may include, without limitation, intellectual property infringement, cyber vulnerabilities or attacks, bias, inaccuracies, errors, defects, viruses, downtime, property loss or damage, and/or personal injury. You are solely responsible for your use of any such tools or outputs (including, without limitation, the legality, appropriateness, and results thereof).
 
-**`@folder`:** Adds folder's files all at once to speed up your workflow even more
+---
 
 ## Contributing
 
-To contribute to the project, start by exploring [open issues](https://github.com/cline/cline/issues) or checking our [feature request board](https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop). We'd also love to have you join our [Discord](https://discord.gg/cline) to share ideas and connect with other contributors. If you're interested in joining the team, check out our [careers page](https://cline.bot/join-us)!
+We love community contributions! Here’s how to get involved:
 
-<details>
-<summary>Local Development Instructions</summary>
+1. **Check Issues & Requests**: See [open issues](https://github.com/RooVetGit/Roo-Code/issues) or [feature requests](https://github.com/RooVetGit/Roo-Code/discussions/categories/feature-requests).
+2. **Fork & branch** off `main`.
+3. **Submit a Pull Request** once your feature or fix is ready.
+4. **Join** our [Reddit community](https://www.reddit.com/r/RooCode/) for feedback, tips, and announcements.
 
-1. Clone the repository _(Requires [git-lfs](https://git-lfs.com/))_:
-    ```bash
-    git clone https://github.com/cline/cline.git
-    ```
-2. Open the project in VSCode:
-    ```bash
-    code cline
-    ```
-3. Install the necessary dependencies for the extension and webview-gui:
-    ```bash
-    npm run install:all
-    ```
-4. Launch by pressing `F5` (or `Run`->`Start Debugging`) to open a new VSCode window with the extension loaded. (You may need to install the [esbuild problem matchers extension](https://marketplace.visualstudio.com/items?itemName=connor4312.esbuild-problem-matchers) if you run into issues building the project.)
-
-</details>
+---
 
 ## License
 
-[Apache 2.0 © 2024 Cline Bot Inc.](./LICENSE)
+[Apache 2.0 © 2025 Roo Veterinary, Inc.](./LICENSE)
+
+---
+
+**Enjoy Roo Code!** Whether you keep it on a short leash or let it roam autonomously, we can’t wait to see what you build. If you have questions or feature ideas, drop by our [Reddit community](https://www.reddit.com/r/RooCode/). Happy coding!

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "roo-cline",
-	"version": "3.1.7",
+	"version": "3.2.8",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "roo-cline",
-			"version": "3.1.7",
+			"version": "3.2.8",
 			"dependencies": {
 				"@anthropic-ai/bedrock-sdk": "^0.10.2",
 				"@anthropic-ai/sdk": "^0.26.0",

package.json

@@ -1,9 +1,9 @@
 {
 	"name": "roo-cline",
-	"displayName": "Roo Cline",
-	"description": "A fork of Cline, an autonomous coding agent, with some added experimental configuration and automation features.",
+	"displayName": "Roo Code (prev. Roo Cline)",
+	"description": "A VS Code plugin that enhances coding with AI-powered automation, multi-model support, and experimental features.",
 	"publisher": "RooVeterinaryInc",
-	"version": "3.1.7",
+	"version": "3.2.8",
 	"icon": "assets/icons/rocket.png",
 	"galleryBanner": {
 		"color": "#617A91",
@@ -17,9 +17,9 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/RooVetGit/Roo-Cline"
+		"url": "https://github.com/RooVetGit/Roo-Code"
 	},
-	"homepage": "https://github.com/RooVetGit/Roo-Cline",
+	"homepage": "https://github.com/RooVetGit/Roo-Code",
 	"categories": [
 		"AI",
 		"Chat",
@@ -52,7 +52,7 @@
 			"activitybar": [
 				{
 					"id": "roo-cline-ActivityBar",
-					"title": "Roo Cline",
+					"title": "Roo Code",
 					"icon": "$(rocket)"
 				}
 			]
@@ -100,10 +100,42 @@
 			{
 				"command": "roo-cline.openInNewTab",
 				"title": "Open In New Tab",
-				"category": "Roo Cline"
+				"category": "Roo Code"
+			},
+			{
+				"command": "roo-cline.explainCode",
+				"title": "Roo Code: Explain Code",
+				"category": "Roo Code"
+			},
+			{
+				"command": "roo-cline.fixCode",
+				"title": "Roo Code: Fix Code",
+				"category": "Roo Code"
+			},
+			{
+				"command": "roo-cline.improveCode",
+				"title": "Roo Code: Improve Code",
+				"category": "Roo Code"
 			}
 		],
 		"menus": {
+			"editor/context": [
+				{
+					"command": "roo-cline.explainCode",
+					"when": "editorHasSelection",
+					"group": "Roo Code@1"
+				},
+				{
+					"command": "roo-cline.fixCode",
+					"when": "editorHasSelection",
+					"group": "Roo Code@2"
+				},
+				{
+					"command": "roo-cline.improveCode",
+					"when": "editorHasSelection",
+					"group": "Roo Code@3"
+				}
+			],
 			"view/title": [
 				{
 					"command": "roo-cline.plusButtonClicked",
@@ -138,7 +170,7 @@
 			]
 		},
 		"configuration": {
-			"title": "RooCline",
+			"title": "Roo Code",
 			"properties": {
 				"roo-cline.allowedCommands": {
 					"type": "array",

src/__mocks__/fs/promises.ts

@@ -0,0 +1,195 @@
+// Mock file system data
+const mockFiles = new Map()
+const mockDirectories = new Set()
+
+// Initialize base test directories
+const baseTestDirs = [
+	"/mock",
+	"/mock/extension",
+	"/mock/extension/path",
+	"/mock/storage",
+	"/mock/storage/path",
+	"/mock/settings",
+	"/mock/settings/path",
+	"/mock/mcp",
+	"/mock/mcp/path",
+	"/test",
+	"/test/path",
+	"/test/storage",
+	"/test/storage/path",
+	"/test/storage/path/settings",
+	"/test/extension",
+	"/test/extension/path",
+	"/test/global-storage",
+	"/test/log/path",
+]
+
+// Helper function to format instructions
+const formatInstructions = (sections: string[]): string => {
+	const joinedSections = sections.filter(Boolean).join("\n\n")
+	return joinedSections
+		? `
+====
+
+USER'S CUSTOM INSTRUCTIONS
+
+The following additional instructions are provided by the user, and should be followed to the best of your ability without interfering with the TOOL USE guidelines.
+
+${joinedSections}`
+		: ""
+}
+
+// Helper function to format rule content
+const formatRuleContent = (ruleFile: string, content: string): string => {
+	return `Rules:\n# Rules from ${ruleFile}:\n${content}`
+}
+
+type RuleFiles = {
+	".clinerules-code": string
+	".clinerules-ask": string
+	".clinerules-architect": string
+	".clinerules-test": string
+	".clinerules-review": string
+	".clinerules": string
+}
+
+// Helper function to ensure directory exists
+const ensureDirectoryExists = (path: string) => {
+	const parts = path.split("/")
+	let currentPath = ""
+	for (const part of parts) {
+		if (!part) continue
+		currentPath += "/" + part
+		mockDirectories.add(currentPath)
+	}
+}
+
+const mockFs = {
+	readFile: jest.fn().mockImplementation(async (filePath: string, encoding?: string) => {
+		// Return stored content if it exists
+		if (mockFiles.has(filePath)) {
+			return mockFiles.get(filePath)
+		}
+
+		// Handle rule files
+		const ruleFiles: RuleFiles = {
+			".clinerules-code": "# Code Mode Rules\n1. Code specific rule",
+			".clinerules-ask": "# Ask Mode Rules\n1. Ask specific rule",
+			".clinerules-architect": "# Architect Mode Rules\n1. Architect specific rule",
+			".clinerules-test":
+				"# Test Engineer Rules\n1. Always write tests first\n2. Get approval before modifying non-test code",
+			".clinerules-review":
+				"# Code Reviewer Rules\n1. Provide specific examples in feedback\n2. Focus on maintainability and best practices",
+			".clinerules": "# Test Rules\n1. First rule\n2. Second rule",
+		}
+
+		// Check for exact file name match
+		const fileName = filePath.split("/").pop()
+		if (fileName && fileName in ruleFiles) {
+			return ruleFiles[fileName as keyof RuleFiles]
+		}
+
+		// Check for file name in path
+		for (const [ruleFile, content] of Object.entries(ruleFiles)) {
+			if (filePath.includes(ruleFile)) {
+				return content
+			}
+		}
+
+		// Handle file not found
+		const error = new Error(`ENOENT: no such file or directory, open '${filePath}'`)
+		;(error as any).code = "ENOENT"
+		throw error
+	}),
+
+	writeFile: jest.fn().mockImplementation(async (path: string, content: string) => {
+		// Ensure parent directory exists
+		const parentDir = path.split("/").slice(0, -1).join("/")
+		ensureDirectoryExists(parentDir)
+		mockFiles.set(path, content)
+		return Promise.resolve()
+	}),
+
+	mkdir: jest.fn().mockImplementation(async (path: string, options?: { recursive?: boolean }) => {
+		// Always handle recursive creation
+		const parts = path.split("/")
+		let currentPath = ""
+
+		// For recursive or test/mock paths, create all parent directories
+		if (options?.recursive || path.startsWith("/test") || path.startsWith("/mock")) {
+			for (const part of parts) {
+				if (!part) continue
+				currentPath += "/" + part
+				mockDirectories.add(currentPath)
+			}
+			return Promise.resolve()
+		}
+
+		// For non-recursive paths, verify parent exists
+		for (let i = 0; i < parts.length - 1; i++) {
+			if (!parts[i]) continue
+			currentPath += "/" + parts[i]
+			if (!mockDirectories.has(currentPath)) {
+				const error = new Error(`ENOENT: no such file or directory, mkdir '${path}'`)
+				;(error as any).code = "ENOENT"
+				throw error
+			}
+		}
+
+		// Add the final directory
+		currentPath += "/" + parts[parts.length - 1]
+		mockDirectories.add(currentPath)
+		return Promise.resolve()
+		return Promise.resolve()
+	}),
+
+	access: jest.fn().mockImplementation(async (path: string) => {
+		// Check if the path exists in either files or directories
+		if (mockFiles.has(path) || mockDirectories.has(path) || path.startsWith("/test")) {
+			return Promise.resolve()
+		}
+		const error = new Error(`ENOENT: no such file or directory, access '${path}'`)
+		;(error as any).code = "ENOENT"
+		throw error
+	}),
+
+	constants: jest.requireActual("fs").constants,
+
+	// Expose mock data for test assertions
+	_mockFiles: mockFiles,
+	_mockDirectories: mockDirectories,
+
+	// Helper to set up initial mock data
+	_setInitialMockData: () => {
+		// Set up default MCP settings
+		mockFiles.set(
+			"/mock/settings/path/cline_mcp_settings.json",
+			JSON.stringify({
+				mcpServers: {
+					"test-server": {
+						command: "node",
+						args: ["test.js"],
+						disabled: false,
+						alwaysAllow: ["existing-tool"],
+					},
+				},
+			}),
+		)
+
+		// Ensure all base directories exist
+		baseTestDirs.forEach((dir) => {
+			const parts = dir.split("/")
+			let currentPath = ""
+			for (const part of parts) {
+				if (!part) continue
+				currentPath += "/" + part
+				mockDirectories.add(currentPath)
+			}
+		})
+	},
+}
+
+// Initialize mock data
+mockFs._setInitialMockData()
+
+module.exports = mockFs

src/api/providers/__tests__/gemini.test.ts

@@ -204,7 +204,7 @@ describe("GeminiHandler", () => {
 				geminiApiKey: "test-key",
 			})
 			const modelInfo = invalidHandler.getModel()
-			expect(modelInfo.id).toBe("gemini-2.0-flash-thinking-exp-1219") // Default model
+			expect(modelInfo.id).toBe("gemini-2.0-flash-thinking-exp-01-21") // Default model
 		})
 	})
 })

src/api/providers/__tests__/openrouter.test.ts

@@ -36,7 +36,7 @@ describe("OpenRouterHandler", () => {
 			apiKey: mockOptions.openRouterApiKey,
 			defaultHeaders: {
 				"HTTP-Referer": "https://github.com/RooVetGit/Roo-Cline",
-				"X-Title": "Roo-Cline",
+				"X-Title": "Roo Code",
 			},
 		})
 	})

src/api/providers/glama.ts

@@ -73,13 +73,27 @@ export class GlamaHandler implements ApiHandler, SingleCompletionHandler {
 		}
 
 		const { data: completion, response } = await this.client.chat.completions
-			.create({
-				model: this.getModel().id,
-				max_tokens: maxTokens,
-				temperature: 0,
-				messages: openAiMessages,
-				stream: true,
-			})
+			.create(
+				{
+					model: this.getModel().id,
+					max_tokens: maxTokens,
+					temperature: 0,
+					messages: openAiMessages,
+					stream: true,
+				},
+				{
+					headers: {
+						"X-Glama-Metadata": JSON.stringify({
+							labels: [
+								{
+									key: "app",
+									value: "vscode.rooveterinaryinc.roo-cline",
+								},
+							],
+						}),
+					},
+				},
+			)
 			.withResponse()
 
 		const completionRequestId = response.headers.get("x-completion-request-id")
@@ -96,34 +110,38 @@ export class GlamaHandler implements ApiHandler, SingleCompletionHandler {
 		}
 
 		try {
-			const response = await axios.get(
-				`https://glama.ai/api/gateway/v1/completion-requests/${completionRequestId}`,
-				{
-					headers: {
-						Authorization: `Bearer ${this.options.glamaApiKey}`,
-						"X-Glama-Metadata": JSON.stringify({
-							labels: [
-								{
-									key: "app",
-									value: "vscode.rooveterinaryinc.roo-cline",
-								},
-							],
-						}),
-					},
-				},
-			)
+			let attempt = 0
 
-			const completionRequest = response.data
+			const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
-			if (completionRequest.tokenUsage) {
-				yield {
-					type: "usage",
-					cacheWriteTokens: completionRequest.tokenUsage.cacheCreationInputTokens,
-					cacheReadTokens: completionRequest.tokenUsage.cacheReadInputTokens,
-					inputTokens: completionRequest.tokenUsage.promptTokens,
-					outputTokens: completionRequest.tokenUsage.completionTokens,
-					totalCost: parseFloat(completionRequest.totalCostUsd),
+			while (attempt++ < 10) {
+				// In case of an interrupted request, we need to wait for the upstream API to finish processing the request
+				// before we can fetch information about the token usage and cost.
+				const response = await axios.get(
+					`https://glama.ai/api/gateway/v1/completion-requests/${completionRequestId}`,
+					{
+						headers: {
+							Authorization: `Bearer ${this.options.glamaApiKey}`,
+						},
+					},
+				)
+
+				const completionRequest = response.data
+
+				if (completionRequest.tokenUsage && completionRequest.totalCostUsd) {
+					yield {
+						type: "usage",
+						cacheWriteTokens: completionRequest.tokenUsage.cacheCreationInputTokens,
+						cacheReadTokens: completionRequest.tokenUsage.cacheReadInputTokens,
+						inputTokens: completionRequest.tokenUsage.promptTokens,
+						outputTokens: completionRequest.tokenUsage.completionTokens,
+						totalCost: parseFloat(completionRequest.totalCostUsd),
+					}
+
+					break
 				}
+
+				await delay(200)
 			}
 		} catch (error) {
 			console.error("Error fetching Glama completion details", error)

src/api/providers/lmstudio.ts

@@ -42,7 +42,7 @@ export class LmStudioHandler implements ApiHandler, SingleCompletionHandler {
 		} catch (error) {
 			// LM Studio doesn't return an error code/body for now
 			throw new Error(
-				"Please check the LM Studio developer logs to debug what went wrong. You may need to load the model with a larger context length to work with Cline's prompts.",
+				"Please check the LM Studio developer logs to debug what went wrong. You may need to load the model with a larger context length to work with Roo Code's prompts.",
 			)
 		}
 	}
@@ -65,7 +65,7 @@ export class LmStudioHandler implements ApiHandler, SingleCompletionHandler {
 			return response.choices[0]?.message.content || ""
 		} catch (error) {
 			throw new Error(
-				"Please check the LM Studio developer logs to debug what went wrong. You may need to load the model with a larger context length to work with Cline's prompts.",
+				"Please check the LM Studio developer logs to debug what went wrong. You may need to load the model with a larger context length to work with Roo Code's prompts.",
 			)
 		}
 	}

src/api/providers/openai.ts

@@ -18,7 +18,7 @@ export class OpenAiHandler implements ApiHandler, SingleCompletionHandler {
 		this.options = options
 		// Azure API shape slightly differs from the core API shape: https://github.com/openai/openai-node?tab=readme-ov-file#microsoft-azure-openai
 		const urlHost = new URL(this.options.openAiBaseUrl ?? "").host
-		if (urlHost === "azure.com" || urlHost.endsWith(".azure.com")) {
+		if (urlHost === "azure.com" || urlHost.endsWith(".azure.com") || options.openAiUseAzure) {
 			this.client = new AzureOpenAI({
 				baseURL: this.options.openAiBaseUrl,
 				apiKey: this.options.openAiApiKey,
@@ -108,7 +108,7 @@ export class OpenAiHandler implements ApiHandler, SingleCompletionHandler {
 	getModel(): { id: string; info: ModelInfo } {
 		return {
 			id: this.options.openAiModelId ?? "",
-			info: openAiModelInfoSaneDefaults,
+			info: this.options.openAiCustomModelInfo ?? openAiModelInfoSaneDefaults,
 		}
 	}
 

src/api/providers/openrouter.ts

@@ -29,8 +29,8 @@ export class OpenRouterHandler implements ApiHandler, SingleCompletionHandler {
 			baseURL: "https://openrouter.ai/api/v1",
 			apiKey: this.options.openRouterApiKey,
 			defaultHeaders: {
-				"HTTP-Referer": "https://github.com/RooVetGit/Roo-Cline", // Optional, for including your app on openrouter.ai rankings.
-				"X-Title": "Roo-Cline", // Optional. Shows in rankings on openrouter.ai.
+				"HTTP-Referer": "https://github.com/RooVetGit/Roo-Cline",
+				"X-Title": "Roo Code",
 			},
 		})
 	}

src/api/providers/vscode-lm.ts

@@ -63,7 +63,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 			this.dispose()
 
 			throw new Error(
-				`Cline <Language Model API>: Failed to initialize handler: ${error instanceof Error ? error.message : "Unknown error"}`,
+				`Roo Code <Language Model API>: Failed to initialize handler: ${error instanceof Error ? error.message : "Unknown error"}`,
 			)
 		}
 	}
@@ -113,7 +113,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 			}
 		} catch (error) {
 			const errorMessage = error instanceof Error ? error.message : "Unknown error"
-			throw new Error(`Cline <Language Model API>: Failed to select model: ${errorMessage}`)
+			throw new Error(`Roo Code <Language Model API>: Failed to select model: ${errorMessage}`)
 		}
 	}
 
@@ -147,18 +147,18 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 	private async countTokens(text: string | vscode.LanguageModelChatMessage): Promise<number> {
 		// Check for required dependencies
 		if (!this.client) {
-			console.warn("Cline <Language Model API>: No client available for token counting")
+			console.warn("Roo Code <Language Model API>: No client available for token counting")
 			return 0
 		}
 
 		if (!this.currentRequestCancellation) {
-			console.warn("Cline <Language Model API>: No cancellation token available for token counting")
+			console.warn("Roo Code <Language Model API>: No cancellation token available for token counting")
 			return 0
 		}
 
 		// Validate input
 		if (!text) {
-			console.debug("Cline <Language Model API>: Empty text provided for token counting")
+			console.debug("Roo Code <Language Model API>: Empty text provided for token counting")
 			return 0
 		}
 
@@ -171,23 +171,23 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 			} else if (text instanceof vscode.LanguageModelChatMessage) {
 				// For chat messages, ensure we have content
 				if (!text.content || (Array.isArray(text.content) && text.content.length === 0)) {
-					console.debug("Cline <Language Model API>: Empty chat message content")
+					console.debug("Roo Code <Language Model API>: Empty chat message content")
 					return 0
 				}
 				tokenCount = await this.client.countTokens(text, this.currentRequestCancellation.token)
 			} else {
-				console.warn("Cline <Language Model API>: Invalid input type for token counting")
+				console.warn("Roo Code <Language Model API>: Invalid input type for token counting")
 				return 0
 			}
 
 			// Validate the result
 			if (typeof tokenCount !== "number") {
-				console.warn("Cline <Language Model API>: Non-numeric token count received:", tokenCount)
+				console.warn("Roo Code <Language Model API>: Non-numeric token count received:", tokenCount)
 				return 0
 			}
 
 			if (tokenCount < 0) {
-				console.warn("Cline <Language Model API>: Negative token count received:", tokenCount)
+				console.warn("Roo Code <Language Model API>: Negative token count received:", tokenCount)
 				return 0
 			}
 
@@ -195,12 +195,12 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 		} catch (error) {
 			// Handle specific error types
 			if (error instanceof vscode.CancellationError) {
-				console.debug("Cline <Language Model API>: Token counting cancelled by user")
+				console.debug("Roo Code <Language Model API>: Token counting cancelled by user")
 				return 0
 			}
 
 			const errorMessage = error instanceof Error ? error.message : "Unknown error"
-			console.warn("Cline <Language Model API>: Token counting failed:", errorMessage)
+			console.warn("Roo Code <Language Model API>: Token counting failed:", errorMessage)
 
 			// Log additional error details if available
 			if (error instanceof Error && error.stack) {
@@ -232,7 +232,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 
 	private async getClient(): Promise<vscode.LanguageModelChat> {
 		if (!this.client) {
-			console.debug("Cline <Language Model API>: Getting client with options:", {
+			console.debug("Roo Code <Language Model API>: Getting client with options:", {
 				vsCodeLmModelSelector: this.options.vsCodeLmModelSelector,
 				hasOptions: !!this.options,
 				selectorKeys: this.options.vsCodeLmModelSelector ? Object.keys(this.options.vsCodeLmModelSelector) : [],
@@ -241,12 +241,12 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 			try {
 				// Use default empty selector if none provided to get all available models
 				const selector = this.options?.vsCodeLmModelSelector || {}
-				console.debug("Cline <Language Model API>: Creating client with selector:", selector)
+				console.debug("Roo Code <Language Model API>: Creating client with selector:", selector)
 				this.client = await this.createClient(selector)
 			} catch (error) {
 				const message = error instanceof Error ? error.message : "Unknown error"
-				console.error("Cline <Language Model API>: Client creation failed:", message)
-				throw new Error(`Cline <Language Model API>: Failed to create client: ${message}`)
+				console.error("Roo Code <Language Model API>: Client creation failed:", message)
+				throw new Error(`Roo Code <Language Model API>: Failed to create client: ${message}`)
 			}
 		}
 
@@ -348,7 +348,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 		try {
 			// Create the response stream with minimal required options
 			const requestOptions: vscode.LanguageModelChatRequestOptions = {
-				justification: `Cline would like to use '${client.name}' from '${client.vendor}', Click 'Allow' to proceed.`,
+				justification: `Roo Code would like to use '${client.name}' from '${client.vendor}', Click 'Allow' to proceed.`,
 			}
 
 			// Note: Tool support is currently provided by the VSCode Language Model API directly
@@ -365,7 +365,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 				if (chunk instanceof vscode.LanguageModelTextPart) {
 					// Validate text part value
 					if (typeof chunk.value !== "string") {
-						console.warn("Cline <Language Model API>: Invalid text part value received:", chunk.value)
+						console.warn("Roo Code <Language Model API>: Invalid text part value received:", chunk.value)
 						continue
 					}
 
@@ -378,18 +378,18 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 					try {
 						// Validate tool call parameters
 						if (!chunk.name || typeof chunk.name !== "string") {
-							console.warn("Cline <Language Model API>: Invalid tool name received:", chunk.name)
+							console.warn("Roo Code <Language Model API>: Invalid tool name received:", chunk.name)
 							continue
 						}
 
 						if (!chunk.callId || typeof chunk.callId !== "string") {
-							console.warn("Cline <Language Model API>: Invalid tool callId received:", chunk.callId)
+							console.warn("Roo Code <Language Model API>: Invalid tool callId received:", chunk.callId)
 							continue
 						}
 
 						// Ensure input is a valid object
 						if (!chunk.input || typeof chunk.input !== "object") {
-							console.warn("Cline <Language Model API>: Invalid tool input received:", chunk.input)
+							console.warn("Roo Code <Language Model API>: Invalid tool input received:", chunk.input)
 							continue
 						}
 
@@ -405,7 +405,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 						accumulatedText += toolCallText
 
 						// Log tool call for debugging
-						console.debug("Cline <Language Model API>: Processing tool call:", {
+						console.debug("Roo Code <Language Model API>: Processing tool call:", {
 							name: chunk.name,
 							callId: chunk.callId,
 							inputSize: JSON.stringify(chunk.input).length,
@@ -416,12 +416,12 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 							text: toolCallText,
 						}
 					} catch (error) {
-						console.error("Cline <Language Model API>: Failed to process tool call:", error)
+						console.error("Roo Code <Language Model API>: Failed to process tool call:", error)
 						// Continue processing other chunks even if one fails
 						continue
 					}
 				} else {
-					console.warn("Cline <Language Model API>: Unknown chunk type received:", chunk)
+					console.warn("Roo Code <Language Model API>: Unknown chunk type received:", chunk)
 				}
 			}
 
@@ -439,11 +439,11 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 			this.ensureCleanState()
 
 			if (error instanceof vscode.CancellationError) {
-				throw new Error("Cline <Language Model API>: Request cancelled by user")
+				throw new Error("Roo Code <Language Model API>: Request cancelled by user")
 			}
 
 			if (error instanceof Error) {
-				console.error("Cline <Language Model API>: Stream error details:", {
+				console.error("Roo Code <Language Model API>: Stream error details:", {
 					message: error.message,
 					stack: error.stack,
 					name: error.name,
@@ -454,13 +454,13 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 			} else if (typeof error === "object" && error !== null) {
 				// Handle error-like objects
 				const errorDetails = JSON.stringify(error, null, 2)
-				console.error("Cline <Language Model API>: Stream error object:", errorDetails)
-				throw new Error(`Cline <Language Model API>: Response stream error: ${errorDetails}`)
+				console.error("Roo Code <Language Model API>: Stream error object:", errorDetails)
+				throw new Error(`Roo Code <Language Model API>: Response stream error: ${errorDetails}`)
 			} else {
 				// Fallback for unknown error types
 				const errorMessage = String(error)
-				console.error("Cline <Language Model API>: Unknown stream error:", errorMessage)
-				throw new Error(`Cline <Language Model API>: Response stream error: ${errorMessage}`)
+				console.error("Roo Code <Language Model API>: Unknown stream error:", errorMessage)
+				throw new Error(`Roo Code <Language Model API>: Response stream error: ${errorMessage}`)
 			}
 		}
 	}
@@ -480,7 +480,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 			// Log any missing properties for debugging
 			for (const [prop, value] of Object.entries(requiredProps)) {
 				if (!value && value !== 0) {
-					console.warn(`Cline <Language Model API>: Client missing ${prop} property`)
+					console.warn(`Roo Code <Language Model API>: Client missing ${prop} property`)
 				}
 			}
 
@@ -511,7 +511,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 			? stringifyVsCodeLmModelSelector(this.options.vsCodeLmModelSelector)
 			: "vscode-lm"
 
-		console.debug("Cline <Language Model API>: No client available, using fallback model info")
+		console.debug("Roo Code <Language Model API>: No client available, using fallback model info")
 
 		return {
 			id: fallbackId,

src/api/transform/__tests__/vscode-lm-format.test.ts

@@ -249,7 +249,7 @@ describe("vscode-lm-format", () => {
 			}
 
 			await expect(convertToAnthropicMessage(vsCodeMessage as any)).rejects.toThrow(
-				"Cline <Language Model API>: Only assistant messages are supported.",
+				"Roo Code <Language Model API>: Only assistant messages are supported.",
 			)
 		})
 	})

src/api/transform/vscode-lm-format.ts

@@ -23,7 +23,7 @@ function asObjectSafe(value: any): object {
 
 		return {}
 	} catch (error) {
-		console.warn("Cline <Language Model API>: Failed to parse object:", error)
+		console.warn("Roo Code <Language Model API>: Failed to parse object:", error)
 		return {}
 	}
 }
@@ -161,7 +161,7 @@ export async function convertToAnthropicMessage(
 ): Promise<Anthropic.Messages.Message> {
 	const anthropicRole: string | null = convertToAnthropicRole(vsCodeLmMessage.role)
 	if (anthropicRole !== "assistant") {
-		throw new Error("Cline <Language Model API>: Only assistant messages are supported.")
+		throw new Error("Roo Code <Language Model API>: Only assistant messages are supported.")
 	}
 
 	return {

src/core/Cline.ts

@@ -1,7 +1,7 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import cloneDeep from "clone-deep"
 import { DiffStrategy, getDiffStrategy, UnifiedDiffStrategy } from "./diff/DiffStrategy"
-import { validateToolUse, isToolAllowedForMode } from "./mode-validator"
+import { validateToolUse, isToolAllowedForMode, ToolName } from "./mode-validator"
 import delay from "delay"
 import fs from "fs/promises"
 import os from "os"
@@ -51,8 +51,8 @@ import { arePathsEqual, getReadablePath } from "../utils/path"
 import { parseMentions } from "./mentions"
 import { AssistantMessageContent, parseAssistantMessage, ToolParamName, ToolUseName } from "./assistant-message"
 import { formatResponse } from "./prompts/responses"
-import { addCustomInstructions, SYSTEM_PROMPT } from "./prompts/system"
-import { modes, defaultModeSlug } from "../shared/modes"
+import { SYSTEM_PROMPT } from "./prompts/system"
+import { modes, defaultModeSlug, getModeBySlug } from "../shared/modes"
 import { truncateHalfConversation } from "./sliding-window"
 import { ClineProvider, GlobalFileNames } from "./webview/ClineProvider"
 import { detectCodeOmission } from "../integrations/editor/detect-omission"
@@ -264,7 +264,7 @@ export class Cline {
 	): Promise<{ response: ClineAskResponse; text?: string; images?: string[] }> {
 		// If this Cline instance was aborted by the provider, then the only thing keeping us alive is a promise still running in the background, in which case we don't want to send its result to the webview as it is attached to a new instance of Cline now. So we can safely ignore the result of any active promises, and this class will be deallocated. (Although we set Cline = undefined in provider, that simply removes the reference to this instance, but the instance is still alive until this promise resolves or rejects.)
 		if (this.abort) {
-			throw new Error("Cline instance aborted")
+			throw new Error("Roo Code instance aborted")
 		}
 		let askTs: number
 		if (partial !== undefined) {
@@ -360,7 +360,7 @@ export class Cline {
 
 	async say(type: ClineSay, text?: string, images?: string[], partial?: boolean): Promise<undefined> {
 		if (this.abort) {
-			throw new Error("Cline instance aborted")
+			throw new Error("Roo Code instance aborted")
 		}
 
 		if (partial !== undefined) {
@@ -419,7 +419,7 @@ export class Cline {
 	async sayAndCreateMissingParamError(toolName: ToolUseName, paramName: string, relPath?: string) {
 		await this.say(
 			"error",
-			`Cline tried to use ${toolName}${
+			`Roo tried to use ${toolName}${
 				relPath ? ` for '${relPath.toPosix()}'` : ""
 			} without value for required parameter '${paramName}'. Retrying...`,
 		)
@@ -809,27 +809,29 @@ export class Cline {
 			})
 		}
 
-		const { browserViewportSize, preferredLanguage, mode, customPrompts } =
+		const { browserViewportSize, mode, customModePrompts, preferredLanguage } =
 			(await this.providerRef.deref()?.getState()) ?? {}
-		const systemPrompt =
-			(await SYSTEM_PROMPT(
+		const { customModes } = (await this.providerRef.deref()?.getState()) ?? {}
+		const systemPrompt = await (async () => {
+			const provider = this.providerRef.deref()
+			if (!provider) {
+				throw new Error("Provider not available")
+			}
+			return SYSTEM_PROMPT(
+				provider.context,
 				cwd,
 				this.api.getModel().info.supportsComputerUse ?? false,
 				mcpHub,
 				this.diffStrategy,
 				browserViewportSize,
 				mode,
-				customPrompts,
-			)) +
-			(await addCustomInstructions(
-				{
-					customInstructions: this.customInstructions,
-					customPrompts,
-					preferredLanguage,
-				},
-				cwd,
-				mode,
-			))
+				customModePrompts,
+				customModes,
+				this.customInstructions,
+				preferredLanguage,
+				this.diffEnabled,
+			)
+		})()
 
 		// If the previous API request's total token usage is close to the context window, truncate the conversation history to free up space for the new request
 		if (previousApiReqIndex >= 0) {
@@ -923,7 +925,7 @@ export class Cline {
 
 	async presentAssistantMessage() {
 		if (this.abort) {
-			throw new Error("Cline instance aborted")
+			throw new Error("Roo Code instance aborted")
 		}
 
 		if (this.presentAssistantMessageLocked) {
@@ -1140,10 +1142,13 @@ export class Cline {
 					await this.browserSession.closeBrowser()
 				}
 
-				// Validate tool use based on current mode
+				// Validate tool use before execution
 				const { mode } = (await this.providerRef.deref()?.getState()) ?? {}
+				const { customModes } = (await this.providerRef.deref()?.getState()) ?? {}
 				try {
-					validateToolUse(block.name, mode ?? defaultModeSlug)
+					validateToolUse(block.name as ToolName, mode ?? defaultModeSlug, customModes ?? [], {
+						apply_diff: this.diffEnabled,
+					})
 				} catch (error) {
 					this.consecutiveMistakeCount++
 					pushToolResult(formatResponse.toolError(error.message))
@@ -1264,7 +1269,9 @@ export class Cline {
 										await this.diffViewProvider.revertChanges()
 										pushToolResult(
 											formatResponse.toolError(
-												`Content appears to be truncated (file has ${newContent.split("\n").length} lines but was predicted to have ${predictedLineCount} lines), and found comments indicating omitted code (e.g., '// rest of code unchanged', '/* previous code */'). Please provide the complete file content without any omissions if possible, or otherwise use the 'apply_diff' tool to apply the diff to the original file.`,
+												`Content appears to be truncated (file has ${
+													newContent.split("\n").length
+												} lines but was predicted to have ${predictedLineCount} lines), and found comments indicating omitted code (e.g., '// rest of code unchanged', '/* previous code */'). Please provide the complete file content without any omissions if possible, or otherwise use the 'apply_diff' tool to apply the diff to the original file.`,
 											),
 										)
 										break
@@ -1317,7 +1324,9 @@ export class Cline {
 									pushToolResult(
 										`The user made the following updates to your content:\n\n${userEdits}\n\n` +
 											`The updated content, which includes both your original modifications and the user's edits, has been successfully saved to ${relPath.toPosix()}. Here is the full, updated content of the file, including line numbers:\n\n` +
-											`<final_file_content path="${relPath.toPosix()}">\n${addLineNumbers(finalContent || "")}\n</final_file_content>\n\n` +
+											`<final_file_content path="${relPath.toPosix()}">\n${addLineNumbers(
+												finalContent || "",
+											)}\n</final_file_content>\n\n` +
 											`Please note:\n` +
 											`1. You do not need to re-write the file with these changes, as they have already been applied.\n` +
 											`2. Proceed with the task using this updated file content as the new baseline.\n` +
@@ -1396,7 +1405,9 @@ export class Cline {
 									const errorDetails = diffResult.details
 										? JSON.stringify(diffResult.details, null, 2)
 										: ""
-									const formattedError = `Unable to apply diff to file: ${absolutePath}\n\n<error_details>\n${diffResult.error}${errorDetails ? `\n\nDetails:\n${errorDetails}` : ""}\n</error_details>`
+									const formattedError = `Unable to apply diff to file: ${absolutePath}\n\n<error_details>\n${
+										diffResult.error
+									}${errorDetails ? `\n\nDetails:\n${errorDetails}` : ""}\n</error_details>`
 									if (currentCount >= 2) {
 										await this.say("error", formattedError)
 									}
@@ -1438,7 +1449,9 @@ export class Cline {
 									pushToolResult(
 										`The user made the following updates to your content:\n\n${userEdits}\n\n` +
 											`The updated content, which includes both your original modifications and the user's edits, has been successfully saved to ${relPath.toPosix()}. Here is the full, updated content of the file, including line numbers:\n\n` +
-											`<final_file_content path="${relPath.toPosix()}">\n${addLineNumbers(finalContent || "")}\n</final_file_content>\n\n` +
+											`<final_file_content path="${relPath.toPosix()}">\n${addLineNumbers(
+												finalContent || "",
+											)}\n</final_file_content>\n\n` +
 											`Please note:\n` +
 											`1. You do not need to re-write the file with these changes, as they have already been applied.\n` +
 											`2. Proceed with the task using this updated file content as the new baseline.\n` +
@@ -1853,7 +1866,7 @@ export class Cline {
 										this.consecutiveMistakeCount++
 										await this.say(
 											"error",
-											`Cline tried to use ${tool_name} with an invalid JSON argument. Retrying...`,
+											`Roo tried to use ${tool_name} with an invalid JSON argument. Retrying...`,
 										)
 										pushToolResult(
 											formatResponse.toolError(
@@ -2164,7 +2177,7 @@ export class Cline {
 		includeFileDetails: boolean = false,
 	): Promise<boolean> {
 		if (this.abort) {
-			throw new Error("Cline instance aborted")
+			throw new Error("Roo Code instance aborted")
 		}
 
 		if (this.consecutiveMistakeCount >= 3) {
@@ -2172,7 +2185,7 @@ export class Cline {
 				"mistake_limit_reached",
 				this.api.getModel().id.includes("claude")
 					? `This may indicate a failure in his thought process or inability to use a tool properly, which can be mitigated with some user guidance (e.g. "Try breaking down the task into smaller steps").`
-					: "Cline uses complex prompts and iterative task execution that may be challenging for less capable models. For best results, it's recommended to use Claude 3.5 Sonnet for its advanced agentic coding capabilities.",
+					: "Roo Code uses complex prompts and iterative task execution that may be challenging for less capable models. For best results, it's recommended to use Claude 3.5 Sonnet for its advanced agentic coding capabilities.",
 			)
 			if (response === "messageResponse") {
 				userContent.push(
@@ -2366,7 +2379,7 @@ export class Cline {
 
 			// need to call here in case the stream was aborted
 			if (this.abort) {
-				throw new Error("Cline instance aborted")
+				throw new Error("Roo Code instance aborted")
 			}
 
 			this.didCompleteReadingStream = true
@@ -2622,16 +2635,20 @@ export class Cline {
 		details += `\n\n# Current Time\n${formatter.format(now)} (${timeZone}, UTC${timeZoneOffsetStr})`
 
 		// Add current mode and any mode-specific warnings
-		const { mode } = (await this.providerRef.deref()?.getState()) ?? {}
+		const { mode, customModes } = (await this.providerRef.deref()?.getState()) ?? {}
 		const currentMode = mode ?? defaultModeSlug
 		details += `\n\n# Current Mode\n${currentMode}`
 
 		// Add warning if not in code mode
 		if (
-			!isToolAllowedForMode("write_to_file", currentMode) ||
-			!isToolAllowedForMode("execute_command", currentMode)
+			!isToolAllowedForMode("write_to_file", currentMode, customModes ?? [], {
+				apply_diff: this.diffEnabled,
+			}) &&
+			!isToolAllowedForMode("apply_diff", currentMode, customModes ?? [], { apply_diff: this.diffEnabled })
 		) {
-			details += `\n\nNOTE: You are currently in '${currentMode}' mode which only allows read-only operations. To write files or execute commands, the user will need to switch to '${defaultModeSlug}' mode. Note that only the user can switch modes.`
+			const currentModeName = getModeBySlug(currentMode, customModes)?.name ?? currentMode
+			const defaultModeName = getModeBySlug(defaultModeSlug, customModes)?.name ?? defaultModeSlug
+			details += `\n\nNOTE: You are currently in '${currentModeName}' mode which only allows read-only operations. To write files or execute commands, the user will need to switch to '${defaultModeName}' mode. Note that only the user can switch modes.`
 		}
 
 		if (includeFileDetails) {

src/core/CodeActionProvider.ts

@@ -0,0 +1,179 @@
+import * as vscode from "vscode"
+import * as path from "path"
+
+export const ACTION_NAMES = {
+	EXPLAIN: "Roo Code: Explain Code",
+	FIX: "Roo Code: Fix Code",
+	IMPROVE: "Roo Code: Improve Code",
+} as const
+
+const COMMAND_IDS = {
+	EXPLAIN: "roo-cline.explainCode",
+	FIX: "roo-cline.fixCode",
+	IMPROVE: "roo-cline.improveCode",
+} as const
+
+interface DiagnosticData {
+	message: string
+	severity: vscode.DiagnosticSeverity
+	code?: string | number | { value: string | number; target: vscode.Uri }
+	source?: string
+	range: vscode.Range
+}
+
+interface EffectiveRange {
+	range: vscode.Range
+	text: string
+}
+
+export class CodeActionProvider implements vscode.CodeActionProvider {
+	public static readonly providedCodeActionKinds = [
+		vscode.CodeActionKind.QuickFix,
+		vscode.CodeActionKind.RefactorRewrite,
+	]
+
+	// Cache file paths for performance
+	private readonly filePathCache = new WeakMap<vscode.TextDocument, string>()
+
+	private getEffectiveRange(
+		document: vscode.TextDocument,
+		range: vscode.Range | vscode.Selection,
+	): EffectiveRange | null {
+		try {
+			const selectedText = document.getText(range)
+			if (selectedText) {
+				return { range, text: selectedText }
+			}
+
+			const currentLine = document.lineAt(range.start.line)
+			if (!currentLine.text.trim()) {
+				return null
+			}
+
+			// Optimize range creation by checking bounds first
+			const startLine = Math.max(0, currentLine.lineNumber - 1)
+			const endLine = Math.min(document.lineCount - 1, currentLine.lineNumber + 1)
+
+			// Only create new positions if needed
+			const effectiveRange = new vscode.Range(
+				startLine === currentLine.lineNumber ? range.start : new vscode.Position(startLine, 0),
+				endLine === currentLine.lineNumber
+					? range.end
+					: new vscode.Position(endLine, document.lineAt(endLine).text.length),
+			)
+
+			return {
+				range: effectiveRange,
+				text: document.getText(effectiveRange),
+			}
+		} catch (error) {
+			console.error("Error getting effective range:", error)
+			return null
+		}
+	}
+
+	private getFilePath(document: vscode.TextDocument): string {
+		// Check cache first
+		let filePath = this.filePathCache.get(document)
+		if (filePath) {
+			return filePath
+		}
+
+		try {
+			const workspaceFolder = vscode.workspace.getWorkspaceFolder(document.uri)
+			if (!workspaceFolder) {
+				filePath = document.uri.fsPath
+			} else {
+				const relativePath = path.relative(workspaceFolder.uri.fsPath, document.uri.fsPath)
+				filePath = !relativePath || relativePath.startsWith("..") ? document.uri.fsPath : relativePath
+			}
+
+			// Cache the result
+			this.filePathCache.set(document, filePath)
+			return filePath
+		} catch (error) {
+			console.error("Error getting file path:", error)
+			return document.uri.fsPath
+		}
+	}
+
+	private createDiagnosticData(diagnostic: vscode.Diagnostic): DiagnosticData {
+		return {
+			message: diagnostic.message,
+			severity: diagnostic.severity,
+			code: diagnostic.code,
+			source: diagnostic.source,
+			range: diagnostic.range, // Reuse the range object
+		}
+	}
+
+	private createAction(title: string, kind: vscode.CodeActionKind, command: string, args: any[]): vscode.CodeAction {
+		const action = new vscode.CodeAction(title, kind)
+		action.command = { command, title, arguments: args }
+		return action
+	}
+
+	private hasIntersectingRange(range1: vscode.Range, range2: vscode.Range): boolean {
+		// Optimize range intersection check
+		return !(
+			range2.end.line < range1.start.line ||
+			range2.start.line > range1.end.line ||
+			(range2.end.line === range1.start.line && range2.end.character < range1.start.character) ||
+			(range2.start.line === range1.end.line && range2.start.character > range1.end.character)
+		)
+	}
+
+	public provideCodeActions(
+		document: vscode.TextDocument,
+		range: vscode.Range | vscode.Selection,
+		context: vscode.CodeActionContext,
+	): vscode.ProviderResult<(vscode.CodeAction | vscode.Command)[]> {
+		try {
+			const effectiveRange = this.getEffectiveRange(document, range)
+			if (!effectiveRange) {
+				return []
+			}
+
+			const filePath = this.getFilePath(document)
+			const actions: vscode.CodeAction[] = []
+
+			// Create actions using helper method
+			actions.push(
+				this.createAction(ACTION_NAMES.EXPLAIN, vscode.CodeActionKind.QuickFix, COMMAND_IDS.EXPLAIN, [
+					filePath,
+					effectiveRange.text,
+				]),
+			)
+
+			// Only process diagnostics if they exist
+			if (context.diagnostics.length > 0) {
+				const relevantDiagnostics = context.diagnostics.filter((d) =>
+					this.hasIntersectingRange(effectiveRange.range, d.range),
+				)
+
+				if (relevantDiagnostics.length > 0) {
+					const diagnosticMessages = relevantDiagnostics.map(this.createDiagnosticData)
+					actions.push(
+						this.createAction(ACTION_NAMES.FIX, vscode.CodeActionKind.QuickFix, COMMAND_IDS.FIX, [
+							filePath,
+							effectiveRange.text,
+							diagnosticMessages,
+						]),
+					)
+				}
+			}
+
+			actions.push(
+				this.createAction(ACTION_NAMES.IMPROVE, vscode.CodeActionKind.RefactorRewrite, COMMAND_IDS.IMPROVE, [
+					filePath,
+					effectiveRange.text,
+				]),
+			)
+
+			return actions
+		} catch (error) {
+			console.error("Error providing code actions:", error)
+			return []
+		}
+	}
+}

src/core/__tests__/Cline.test.ts

@@ -4,6 +4,8 @@ import { ApiConfiguration, ModelInfo } from "../../shared/api"
 import { ApiStreamChunk } from "../../api/transform/stream"
 import { Anthropic } from "@anthropic-ai/sdk"
 import * as vscode from "vscode"
+import * as os from "os"
+import * as path from "path"
 
 // Mock all MCP-related modules
 jest.mock(
@@ -209,6 +211,9 @@ describe("Cline", () => {
 
 	beforeEach(() => {
 		// Setup mock extension context
+		const storageUri = {
+			fsPath: path.join(os.tmpdir(), "test-storage"),
+		}
 		mockExtensionContext = {
 			globalState: {
 				get: jest.fn().mockImplementation((key) => {
@@ -231,6 +236,7 @@ describe("Cline", () => {
 				update: jest.fn().mockImplementation((key, value) => Promise.resolve()),
 				keys: jest.fn().mockReturnValue([]),
 			},
+			globalStorageUri: storageUri,
 			workspaceState: {
 				get: jest.fn().mockImplementation((key) => undefined),
 				update: jest.fn().mockImplementation((key, value) => Promise.resolve()),
@@ -244,9 +250,6 @@ describe("Cline", () => {
 			extensionUri: {
 				fsPath: "/mock/extension/path",
 			},
-			globalStorageUri: {
-				fsPath: "/mock/storage/path",
-			},
 			extension: {
 				packageJSON: {
 					version: "1.0.0",
@@ -425,27 +428,34 @@ describe("Cline", () => {
 
 				// Mock the API's createMessage method to capture the conversation history
 				const createMessageSpy = jest.fn()
-				const mockStream = {
-					async *[Symbol.asyncIterator]() {
-						yield { type: "text", text: "" }
-					},
-					async next() {
-						return { done: true, value: undefined }
-					},
-					async return() {
-						return { done: true, value: undefined }
-					},
-					async throw(e: any) {
-						throw e
-					},
-					async [Symbol.asyncDispose]() {
-						// Cleanup
+				// Set up mock stream
+				const mockStreamForClean = (async function* () {
+					yield { type: "text", text: "test response" }
+				})()
+
+				// Set up spy
+				const cleanMessageSpy = jest.fn().mockReturnValue(mockStreamForClean)
+				jest.spyOn(cline.api, "createMessage").mockImplementation(cleanMessageSpy)
+
+				// Mock getEnvironmentDetails to return empty details
+				jest.spyOn(cline as any, "getEnvironmentDetails").mockResolvedValue("")
+
+				// Mock loadContext to return unmodified content
+				jest.spyOn(cline as any, "loadContext").mockImplementation(async (content) => [content, ""])
+
+				// Add test message to conversation history
+				cline.apiConversationHistory = [
+					{
+						role: "user" as const,
+						content: [{ type: "text" as const, text: "test message" }],
+						ts: Date.now(),
 					},
-				} as AsyncGenerator<ApiStreamChunk>
+				]
 
-				jest.spyOn(cline.api, "createMessage").mockImplementation((...args) => {
-					createMessageSpy(...args)
-					return mockStream
+				// Mock abort state
+				Object.defineProperty(cline, "abort", {
+					get: () => false,
+					configurable: true,
 				})
 
 				// Add a message with extra properties to the conversation history
@@ -458,30 +468,25 @@ describe("Cline", () => {
 				cline.apiConversationHistory = [messageWithExtra]
 
 				// Trigger an API request
-				await cline.recursivelyMakeClineRequests([{ type: "text", text: "test request" }])
-
-				// Get all calls to createMessage
-				const calls = createMessageSpy.mock.calls
+				await cline.recursivelyMakeClineRequests([{ type: "text", text: "test request" }], false)
 
-				// Find the call that includes our test message
-				const relevantCall = calls.find((call) =>
-					call[1]?.some((msg: any) => msg.content?.[0]?.text === "test message"),
-				)
+				// Get the conversation history from the first API call
+				const history = cleanMessageSpy.mock.calls[0][1]
+				expect(history).toBeDefined()
+				expect(history.length).toBeGreaterThan(0)
 
-				// Verify the conversation history was cleaned in the relevant call
-				expect(relevantCall?.[1]).toEqual(
-					expect.arrayContaining([
-						{
-							role: "user",
-							content: [{ type: "text", text: "test message" }],
-						},
-					]),
+				// Find our test message
+				const cleanedMessage = history.find((msg: { content?: Array<{ text: string }> }) =>
+					msg.content?.some((content) => content.text === "test message"),
 				)
+				expect(cleanedMessage).toBeDefined()
+				expect(cleanedMessage).toEqual({
+					role: "user",
+					content: [{ type: "text", text: "test message" }],
+				})
 
 				// Verify extra properties were removed
-				const passedMessage = relevantCall?.[1].find((msg: any) => msg.content?.[0]?.text === "test message")
-				expect(passedMessage).not.toHaveProperty("ts")
-				expect(passedMessage).not.toHaveProperty("extraProp")
+				expect(Object.keys(cleanedMessage!)).toEqual(["role", "content"])
 			})
 
 			it("should handle image blocks based on model capabilities", async () => {
@@ -573,41 +578,68 @@ describe("Cline", () => {
 				})
 				clineWithoutImages.apiConversationHistory = conversationHistory
 
-				// Create message spy for both instances
-				const createMessageSpyWithImages = jest.fn()
-				const createMessageSpyWithoutImages = jest.fn()
-				const mockStream = {
-					async *[Symbol.asyncIterator]() {
-						yield { type: "text", text: "" }
-					},
-				} as AsyncGenerator<ApiStreamChunk>
-
-				jest.spyOn(clineWithImages.api, "createMessage").mockImplementation((...args) => {
-					createMessageSpyWithImages(...args)
-					return mockStream
+				// Mock abort state for both instances
+				Object.defineProperty(clineWithImages, "abort", {
+					get: () => false,
+					configurable: true,
 				})
-				jest.spyOn(clineWithoutImages.api, "createMessage").mockImplementation((...args) => {
-					createMessageSpyWithoutImages(...args)
-					return mockStream
+				Object.defineProperty(clineWithoutImages, "abort", {
+					get: () => false,
+					configurable: true,
 				})
 
-				// Trigger API requests for both instances
-				await clineWithImages.recursivelyMakeClineRequests([{ type: "text", text: "test" }])
-				await clineWithoutImages.recursivelyMakeClineRequests([{ type: "text", text: "test" }])
+				// Mock environment details and context loading
+				jest.spyOn(clineWithImages as any, "getEnvironmentDetails").mockResolvedValue("")
+				jest.spyOn(clineWithoutImages as any, "getEnvironmentDetails").mockResolvedValue("")
+				jest.spyOn(clineWithImages as any, "loadContext").mockImplementation(async (content) => [content, ""])
+				jest.spyOn(clineWithoutImages as any, "loadContext").mockImplementation(async (content) => [
+					content,
+					"",
+				])
+				// Set up mock streams
+				const mockStreamWithImages = (async function* () {
+					yield { type: "text", text: "test response" }
+				})()
+
+				const mockStreamWithoutImages = (async function* () {
+					yield { type: "text", text: "test response" }
+				})()
+
+				// Set up spies
+				const imagesSpy = jest.fn().mockReturnValue(mockStreamWithImages)
+				const noImagesSpy = jest.fn().mockReturnValue(mockStreamWithoutImages)
+
+				jest.spyOn(clineWithImages.api, "createMessage").mockImplementation(imagesSpy)
+				jest.spyOn(clineWithoutImages.api, "createMessage").mockImplementation(noImagesSpy)
+
+				// Set up conversation history with images
+				clineWithImages.apiConversationHistory = [
+					{
+						role: "user",
+						content: [
+							{ type: "text", text: "Here is an image" },
+							{ type: "image", source: { type: "base64", media_type: "image/jpeg", data: "base64data" } },
+						],
+					},
+				]
+
+				// Trigger API requests
+				await clineWithImages.recursivelyMakeClineRequests([{ type: "text", text: "test request" }])
+				await clineWithoutImages.recursivelyMakeClineRequests([{ type: "text", text: "test request" }])
+
+				// Get the calls
+				const imagesCalls = imagesSpy.mock.calls
+				const noImagesCalls = noImagesSpy.mock.calls
 
 				// Verify model with image support preserves image blocks
-				const callsWithImages = createMessageSpyWithImages.mock.calls
-				const historyWithImages = callsWithImages[0][1][0]
-				expect(historyWithImages.content).toHaveLength(2)
-				expect(historyWithImages.content[0]).toEqual({ type: "text", text: "Here is an image" })
-				expect(historyWithImages.content[1]).toHaveProperty("type", "image")
+				expect(imagesCalls[0][1][0].content).toHaveLength(2)
+				expect(imagesCalls[0][1][0].content[0]).toEqual({ type: "text", text: "Here is an image" })
+				expect(imagesCalls[0][1][0].content[1]).toHaveProperty("type", "image")
 
 				// Verify model without image support converts image blocks to text
-				const callsWithoutImages = createMessageSpyWithoutImages.mock.calls
-				const historyWithoutImages = callsWithoutImages[0][1][0]
-				expect(historyWithoutImages.content).toHaveLength(2)
-				expect(historyWithoutImages.content[0]).toEqual({ type: "text", text: "Here is an image" })
-				expect(historyWithoutImages.content[1]).toEqual({
+				expect(noImagesCalls[0][1][0].content).toHaveLength(2)
+				expect(noImagesCalls[0][1][0].content[0]).toEqual({ type: "text", text: "Here is an image" })
+				expect(noImagesCalls[0][1][0].content[1]).toEqual({
 					type: "text",
 					text: "[Referenced image in conversation]",
 				})

src/core/__tests__/CodeActionProvider.test.ts

@@ -0,0 +1,147 @@
+import * as vscode from "vscode"
+import { CodeActionProvider } from "../CodeActionProvider"
+
+// Mock VSCode API
+jest.mock("vscode", () => ({
+	CodeAction: jest.fn().mockImplementation((title, kind) => ({
+		title,
+		kind,
+		command: undefined,
+	})),
+	CodeActionKind: {
+		QuickFix: { value: "quickfix" },
+		RefactorRewrite: { value: "refactor.rewrite" },
+	},
+	Range: jest.fn().mockImplementation((startLine, startChar, endLine, endChar) => ({
+		start: { line: startLine, character: startChar },
+		end: { line: endLine, character: endChar },
+	})),
+	Position: jest.fn().mockImplementation((line, character) => ({
+		line,
+		character,
+	})),
+	workspace: {
+		getWorkspaceFolder: jest.fn(),
+	},
+	DiagnosticSeverity: {
+		Error: 0,
+		Warning: 1,
+		Information: 2,
+		Hint: 3,
+	},
+}))
+
+describe("CodeActionProvider", () => {
+	let provider: CodeActionProvider
+	let mockDocument: any
+	let mockRange: any
+	let mockContext: any
+
+	beforeEach(() => {
+		provider = new CodeActionProvider()
+
+		// Mock document
+		mockDocument = {
+			getText: jest.fn(),
+			lineAt: jest.fn(),
+			lineCount: 10,
+			uri: { fsPath: "/test/file.ts" },
+		}
+
+		// Mock range
+		mockRange = new vscode.Range(0, 0, 0, 10)
+
+		// Mock context
+		mockContext = {
+			diagnostics: [],
+		}
+	})
+
+	describe("getEffectiveRange", () => {
+		it("should return selected text when available", () => {
+			mockDocument.getText.mockReturnValue("selected text")
+
+			const result = (provider as any).getEffectiveRange(mockDocument, mockRange)
+
+			expect(result).toEqual({
+				range: mockRange,
+				text: "selected text",
+			})
+		})
+
+		it("should return null for empty line", () => {
+			mockDocument.getText.mockReturnValue("")
+			mockDocument.lineAt.mockReturnValue({ text: "", lineNumber: 0 })
+
+			const result = (provider as any).getEffectiveRange(mockDocument, mockRange)
+
+			expect(result).toBeNull()
+		})
+	})
+
+	describe("getFilePath", () => {
+		it("should return relative path when in workspace", () => {
+			const mockWorkspaceFolder = {
+				uri: { fsPath: "/test" },
+			}
+			;(vscode.workspace.getWorkspaceFolder as jest.Mock).mockReturnValue(mockWorkspaceFolder)
+
+			const result = (provider as any).getFilePath(mockDocument)
+
+			expect(result).toBe("file.ts")
+		})
+
+		it("should return absolute path when not in workspace", () => {
+			;(vscode.workspace.getWorkspaceFolder as jest.Mock).mockReturnValue(null)
+
+			const result = (provider as any).getFilePath(mockDocument)
+
+			expect(result).toBe("/test/file.ts")
+		})
+	})
+
+	describe("provideCodeActions", () => {
+		beforeEach(() => {
+			mockDocument.getText.mockReturnValue("test code")
+			mockDocument.lineAt.mockReturnValue({ text: "test code", lineNumber: 0 })
+		})
+
+		it("should provide explain and improve actions by default", () => {
+			const actions = provider.provideCodeActions(mockDocument, mockRange, mockContext)
+
+			expect(actions).toHaveLength(2)
+			expect((actions as any)[0].title).toBe("Roo Code: Explain Code")
+			expect((actions as any)[1].title).toBe("Roo Code: Improve Code")
+		})
+
+		it("should provide fix action when diagnostics exist", () => {
+			mockContext.diagnostics = [
+				{
+					message: "test error",
+					severity: vscode.DiagnosticSeverity.Error,
+					range: mockRange,
+				},
+			]
+
+			const actions = provider.provideCodeActions(mockDocument, mockRange, mockContext)
+
+			expect(actions).toHaveLength(3)
+			expect((actions as any).some((a: any) => a.title === "Roo Code: Fix Code")).toBe(true)
+		})
+
+		it("should handle errors gracefully", () => {
+			const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {})
+			mockDocument.getText.mockImplementation(() => {
+				throw new Error("Test error")
+			})
+			mockDocument.lineAt.mockReturnValue({ text: "test", lineNumber: 0 })
+
+			const actions = provider.provideCodeActions(mockDocument, mockRange, mockContext)
+
+			expect(actions).toEqual([])
+			expect(consoleErrorSpy).toHaveBeenCalledWith("Error getting effective range:", expect.any(Error))
+
+			consoleErrorSpy.mockRestore()
+		})
+	})
+})

src/core/__tests__/mode-validator.test.ts

@@ -1,7 +1,6 @@
-import { Mode, isToolAllowedForMode, TestToolName, getModeConfig, modes } from "../../shared/modes"
+import { Mode, isToolAllowedForMode, getModeConfig, modes } from "../../shared/modes"
 import { validateToolUse } from "../mode-validator"
-
-const asTestTool = (tool: string): TestToolName => tool as TestToolName
+import { TOOL_GROUPS } from "../../shared/tool-groups"
 const [codeMode, architectMode, askMode] = modes.map((mode) => mode.slug)
 
 describe("mode-validator", () => {
@@ -9,21 +8,26 @@ describe("mode-validator", () => {
 		describe("code mode", () => {
 			it("allows all code mode tools", () => {
 				const mode = getModeConfig(codeMode)
-				mode.tools.forEach(([tool]) => {
-					expect(isToolAllowedForMode(tool, codeMode)).toBe(true)
+				// Code mode has all groups
+				Object.entries(TOOL_GROUPS).forEach(([_, tools]) => {
+					tools.forEach((tool) => {
+						expect(isToolAllowedForMode(tool, codeMode, [])).toBe(true)
+					})
 				})
 			})
 
 			it("disallows unknown tools", () => {
-				expect(isToolAllowedForMode(asTestTool("unknown_tool"), codeMode)).toBe(false)
+				expect(isToolAllowedForMode("unknown_tool" as any, codeMode, [])).toBe(false)
 			})
 		})
 
 		describe("architect mode", () => {
 			it("allows configured tools", () => {
 				const mode = getModeConfig(architectMode)
-				mode.tools.forEach(([tool]) => {
-					expect(isToolAllowedForMode(tool, architectMode)).toBe(true)
+				// Architect mode has read, browser, and mcp groups
+				const architectTools = [...TOOL_GROUPS.read, ...TOOL_GROUPS.browser, ...TOOL_GROUPS.mcp]
+				architectTools.forEach((tool) => {
+					expect(isToolAllowedForMode(tool, architectMode, [])).toBe(true)
 				})
 			})
 		})
@@ -31,22 +35,117 @@ describe("mode-validator", () => {
 		describe("ask mode", () => {
 			it("allows configured tools", () => {
 				const mode = getModeConfig(askMode)
-				mode.tools.forEach(([tool]) => {
-					expect(isToolAllowedForMode(tool, askMode)).toBe(true)
+				// Ask mode has read, browser, and mcp groups
+				const askTools = [...TOOL_GROUPS.read, ...TOOL_GROUPS.browser, ...TOOL_GROUPS.mcp]
+				askTools.forEach((tool) => {
+					expect(isToolAllowedForMode(tool, askMode, [])).toBe(true)
 				})
 			})
 		})
+
+		describe("custom modes", () => {
+			it("allows tools from custom mode configuration", () => {
+				const customModes = [
+					{
+						slug: "custom-mode",
+						name: "Custom Mode",
+						roleDefinition: "Custom role",
+						groups: ["read", "edit"] as const,
+					},
+				]
+				// Should allow tools from read and edit groups
+				expect(isToolAllowedForMode("read_file", "custom-mode", customModes)).toBe(true)
+				expect(isToolAllowedForMode("write_to_file", "custom-mode", customModes)).toBe(true)
+				// Should not allow tools from other groups
+				expect(isToolAllowedForMode("execute_command", "custom-mode", customModes)).toBe(false)
+			})
+
+			it("allows custom mode to override built-in mode", () => {
+				const customModes = [
+					{
+						slug: codeMode,
+						name: "Custom Code Mode",
+						roleDefinition: "Custom role",
+						groups: ["read"] as const,
+					},
+				]
+				// Should allow tools from read group
+				expect(isToolAllowedForMode("read_file", codeMode, customModes)).toBe(true)
+				// Should not allow tools from other groups
+				expect(isToolAllowedForMode("write_to_file", codeMode, customModes)).toBe(false)
+			})
+
+			it("respects tool requirements in custom modes", () => {
+				const customModes = [
+					{
+						slug: "custom-mode",
+						name: "Custom Mode",
+						roleDefinition: "Custom role",
+						groups: ["edit"] as const,
+					},
+				]
+				const requirements = { apply_diff: false }
+
+				// Should respect disabled requirement even if tool group is allowed
+				expect(isToolAllowedForMode("apply_diff", "custom-mode", customModes, requirements)).toBe(false)
+
+				// Should allow other edit tools
+				expect(isToolAllowedForMode("write_to_file", "custom-mode", customModes, requirements)).toBe(true)
+			})
+		})
+
+		describe("tool requirements", () => {
+			it("respects tool requirements when provided", () => {
+				const requirements = { apply_diff: false }
+				expect(isToolAllowedForMode("apply_diff", codeMode, [], requirements)).toBe(false)
+
+				const enabledRequirements = { apply_diff: true }
+				expect(isToolAllowedForMode("apply_diff", codeMode, [], enabledRequirements)).toBe(true)
+			})
+
+			it("allows tools when their requirements are not specified", () => {
+				const requirements = { some_other_tool: true }
+				expect(isToolAllowedForMode("apply_diff", codeMode, [], requirements)).toBe(true)
+			})
+
+			it("handles undefined and empty requirements", () => {
+				expect(isToolAllowedForMode("apply_diff", codeMode, [], undefined)).toBe(true)
+				expect(isToolAllowedForMode("apply_diff", codeMode, [], {})).toBe(true)
+			})
+
+			it("prioritizes requirements over mode configuration", () => {
+				const requirements = { apply_diff: false }
+				// Even in code mode which allows all tools, disabled requirement should take precedence
+				expect(isToolAllowedForMode("apply_diff", codeMode, [], requirements)).toBe(false)
+			})
+		})
 	})
 
 	describe("validateToolUse", () => {
 		it("throws error for disallowed tools in architect mode", () => {
-			expect(() => validateToolUse("unknown_tool", "architect")).toThrow(
+			expect(() => validateToolUse("unknown_tool" as any, "architect", [])).toThrow(
 				'Tool "unknown_tool" is not allowed in architect mode.',
 			)
 		})
 
 		it("does not throw for allowed tools in architect mode", () => {
-			expect(() => validateToolUse("read_file", "architect")).not.toThrow()
+			expect(() => validateToolUse("read_file", "architect", [])).not.toThrow()
+		})
+
+		it("throws error when tool requirement is not met", () => {
+			const requirements = { apply_diff: false }
+			expect(() => validateToolUse("apply_diff", codeMode, [], requirements)).toThrow(
+				'Tool "apply_diff" is not allowed in code mode.',
+			)
+		})
+
+		it("does not throw when tool requirement is met", () => {
+			const requirements = { apply_diff: true }
+			expect(() => validateToolUse("apply_diff", codeMode, [], requirements)).not.toThrow()
+		})
+
+		it("handles undefined requirements gracefully", () => {
+			expect(() => validateToolUse("apply_diff", codeMode, [], undefined)).not.toThrow()
 		})
 	})
 })

src/core/config/ConfigManager.ts

@@ -1,6 +1,6 @@
 import { ExtensionContext } from "vscode"
 import { ApiConfiguration } from "../../shared/api"
-import { Mode } from "../prompts/types"
+import { Mode } from "../../shared/modes"
 import { ApiConfigMeta } from "../../shared/ExtensionMessage"
 
 export interface ApiConfigData {

src/core/config/CustomModesManager.ts

@@ -0,0 +1,190 @@
+import * as vscode from "vscode"
+import * as path from "path"
+import * as fs from "fs/promises"
+import { CustomModesSettingsSchema } from "./CustomModesSchema"
+import { ModeConfig } from "../../shared/modes"
+import { fileExistsAtPath } from "../../utils/fs"
+import { arePathsEqual } from "../../utils/path"
+
+export class CustomModesManager {
+	private disposables: vscode.Disposable[] = []
+	private isWriting = false
+	private writeQueue: Array<() => Promise<void>> = []
+
+	constructor(
+		private readonly context: vscode.ExtensionContext,
+		private readonly onUpdate: () => Promise<void>,
+	) {
+		this.watchCustomModesFile()
+	}
+
+	private async queueWrite(operation: () => Promise<void>): Promise<void> {
+		this.writeQueue.push(operation)
+		if (!this.isWriting) {
+			await this.processWriteQueue()
+		}
+	}
+
+	private async processWriteQueue(): Promise<void> {
+		if (this.isWriting || this.writeQueue.length === 0) {
+			return
+		}
+
+		this.isWriting = true
+		try {
+			while (this.writeQueue.length > 0) {
+				const operation = this.writeQueue.shift()
+				if (operation) {
+					await operation()
+				}
+			}
+		} finally {
+			this.isWriting = false
+		}
+	}
+
+	async getCustomModesFilePath(): Promise<string> {
+		const settingsDir = await this.ensureSettingsDirectoryExists()
+		const filePath = path.join(settingsDir, "cline_custom_modes.json")
+		const fileExists = await fileExistsAtPath(filePath)
+		if (!fileExists) {
+			await this.queueWrite(async () => {
+				await fs.writeFile(filePath, JSON.stringify({ customModes: [] }, null, 2))
+			})
+		}
+		return filePath
+	}
+
+	private async watchCustomModesFile(): Promise<void> {
+		const settingsPath = await this.getCustomModesFilePath()
+		this.disposables.push(
+			vscode.workspace.onDidSaveTextDocument(async (document) => {
+				if (arePathsEqual(document.uri.fsPath, settingsPath)) {
+					const content = await fs.readFile(settingsPath, "utf-8")
+					const errorMessage =
+						"Invalid custom modes format. Please ensure your settings follow the correct JSON format."
+					let config: any
+					try {
+						config = JSON.parse(content)
+					} catch (error) {
+						console.error(error)
+						vscode.window.showErrorMessage(errorMessage)
+						return
+					}
+					const result = CustomModesSettingsSchema.safeParse(config)
+					if (!result.success) {
+						vscode.window.showErrorMessage(errorMessage)
+						return
+					}
+					await this.context.globalState.update("customModes", result.data.customModes)
+					await this.onUpdate()
+				}
+			}),
+		)
+	}
+
+	async getCustomModes(): Promise<ModeConfig[]> {
+		const modes = await this.context.globalState.get<ModeConfig[]>("customModes")
+
+		// Always read from file to ensure we have the latest
+		try {
+			const settingsPath = await this.getCustomModesFilePath()
+			const content = await fs.readFile(settingsPath, "utf-8")
+
+			const settings = JSON.parse(content)
+			const result = CustomModesSettingsSchema.safeParse(settings)
+			if (result.success) {
+				await this.context.globalState.update("customModes", result.data.customModes)
+				return result.data.customModes
+			}
+			return modes ?? []
+		} catch (error) {
+			// Return empty array if there's an error reading the file
+		}
+
+		return modes ?? []
+	}
+
+	async updateCustomMode(slug: string, config: ModeConfig): Promise<void> {
+		try {
+			const settingsPath = await this.getCustomModesFilePath()
+
+			await this.queueWrite(async () => {
+				// Read and update file
+				const content = await fs.readFile(settingsPath, "utf-8")
+				const settings = JSON.parse(content)
+				const currentModes = settings.customModes || []
+				const updatedModes = currentModes.filter((m: ModeConfig) => m.slug !== slug)
+				updatedModes.push(config)
+				settings.customModes = updatedModes
+
+				const newContent = JSON.stringify(settings, null, 2)
+
+				// Write to file
+				await fs.writeFile(settingsPath, newContent)
+
+				// Update global state
+				await this.context.globalState.update("customModes", updatedModes)
+
+				// Notify about the update
+				await this.onUpdate()
+			})
+
+			// Success, no need for message
+		} catch (error) {
+			vscode.window.showErrorMessage(
+				`Failed to update custom mode: ${error instanceof Error ? error.message : String(error)}`,
+			)
+		}
+	}
+
+	async deleteCustomMode(slug: string): Promise<void> {
+		try {
+			const settingsPath = await this.getCustomModesFilePath()
+
+			await this.queueWrite(async () => {
+				const content = await fs.readFile(settingsPath, "utf-8")
+				const settings = JSON.parse(content)
+
+				settings.customModes = (settings.customModes || []).filter((m: ModeConfig) => m.slug !== slug)
+				await fs.writeFile(settingsPath, JSON.stringify(settings, null, 2))
+
+				await this.context.globalState.update("customModes", settings.customModes)
+				await this.onUpdate()
+			})
+		} catch (error) {
+			vscode.window.showErrorMessage(
+				`Failed to delete custom mode: ${error instanceof Error ? error.message : String(error)}`,
+			)
+		}
+	}
+
+	private async ensureSettingsDirectoryExists(): Promise<string> {
+		const settingsDir = path.join(this.context.globalStorageUri.fsPath, "settings")
+		await fs.mkdir(settingsDir, { recursive: true })
+		return settingsDir
+	}
+
+	/**
+	 * Delete the custom modes file and reset to default state
+	 */
+	async resetCustomModes(): Promise<void> {
+		try {
+			const filePath = await this.getCustomModesFilePath()
+			await fs.writeFile(filePath, JSON.stringify({ customModes: [] }, null, 2))
+			await this.context.globalState.update("customModes", [])
+			await this.onUpdate()
+		} catch (error) {
+			vscode.window.showErrorMessage(
+				`Failed to reset custom modes: ${error instanceof Error ? error.message : String(error)}`,
+			)
+		}
+	}
+
+	dispose(): void {
+		for (const disposable of this.disposables) {
+			disposable.dispose()
+		}
+		this.disposables = []
+	}
+}

src/core/config/CustomModesSchema.ts

@@ -0,0 +1,60 @@
+import { z } from "zod"
+import { ModeConfig } from "../../shared/modes"
+import { TOOL_GROUPS, ToolGroup } from "../../shared/tool-groups"
+
+// Create a schema for valid tool groups using the keys of TOOL_GROUPS
+const ToolGroupSchema = z.enum(Object.keys(TOOL_GROUPS) as [ToolGroup, ...ToolGroup[]])
+
+// Schema for array of groups
+const GroupsArraySchema = z
+	.array(ToolGroupSchema)
+	.min(1, "At least one tool group is required")
+	.refine(
+		(groups) => {
+			const seen = new Set()
+			return groups.every((group) => {
+				if (seen.has(group)) return false
+				seen.add(group)
+				return true
+			})
+		},
+		{ message: "Duplicate groups are not allowed" },
+	)
+
+// Schema for mode configuration
+export const CustomModeSchema = z.object({
+	slug: z.string().regex(/^[a-zA-Z0-9-]+$/, "Slug must contain only letters numbers and dashes"),
+	name: z.string().min(1, "Name is required"),
+	roleDefinition: z.string().min(1, "Role definition is required"),
+	customInstructions: z.string().optional(),
+	groups: GroupsArraySchema,
+}) satisfies z.ZodType<ModeConfig>
+
+// Schema for the entire custom modes settings file
+export const CustomModesSettingsSchema = z.object({
+	customModes: z.array(CustomModeSchema).refine(
+		(modes) => {
+			const slugs = new Set()
+			return modes.every((mode) => {
+				if (slugs.has(mode.slug)) {
+					return false
+				}
+				slugs.add(mode.slug)
+				return true
+			})
+		},
+		{
+			message: "Duplicate mode slugs are not allowed",
+		},
+	),
+})
+
+export type CustomModesSettings = z.infer<typeof CustomModesSettingsSchema>
+
+/**
+ * Validates a custom mode configuration against the schema
+ * @throws {z.ZodError} if validation fails
+ */
+export function validateCustomMode(mode: unknown): asserts mode is ModeConfig {
+	CustomModeSchema.parse(mode)
+}

src/core/config/__tests__/CustomModesManager.test.ts

@@ -0,0 +1,245 @@
+import { ModeConfig } from "../../../shared/modes"
+import { CustomModesManager } from "../CustomModesManager"
+import * as vscode from "vscode"
+import * as fs from "fs/promises"
+import * as path from "path"
+
+// Mock dependencies
+jest.mock("vscode")
+jest.mock("fs/promises")
+jest.mock("../../../utils/fs", () => ({
+	fileExistsAtPath: jest.fn().mockResolvedValue(false),
+}))
+
+describe("CustomModesManager", () => {
+	let manager: CustomModesManager
+	let mockContext: vscode.ExtensionContext
+	let mockOnUpdate: jest.Mock
+	let mockStoragePath: string
+
+	beforeEach(() => {
+		// Reset mocks
+		jest.clearAllMocks()
+
+		// Mock storage path
+		mockStoragePath = "/test/storage/path"
+
+		// Mock context
+		mockContext = {
+			globalStorageUri: { fsPath: mockStoragePath },
+			globalState: {
+				get: jest.fn().mockResolvedValue([]),
+				update: jest.fn().mockResolvedValue(undefined),
+			},
+		} as unknown as vscode.ExtensionContext
+
+		// Mock onUpdate callback
+		mockOnUpdate = jest.fn().mockResolvedValue(undefined)
+
+		// Mock fs.mkdir to do nothing
+		;(fs.mkdir as jest.Mock).mockResolvedValue(undefined)
+
+		// Create manager instance
+		manager = new CustomModesManager(mockContext, mockOnUpdate)
+	})
+
+	describe("Mode Configuration Validation", () => {
+		test("validates valid custom mode configuration", async () => {
+			const validMode = {
+				slug: "test-mode",
+				name: "Test Mode",
+				roleDefinition: "Test role definition",
+				groups: ["read"] as const,
+			} satisfies ModeConfig
+
+			// Mock file read/write operations
+			;(fs.readFile as jest.Mock).mockResolvedValue(JSON.stringify({ customModes: [] }))
+			;(fs.writeFile as jest.Mock).mockResolvedValue(undefined)
+
+			await manager.updateCustomMode(validMode.slug, validMode)
+
+			// Verify file was written with the new mode
+			expect(fs.writeFile).toHaveBeenCalledWith(
+				expect.stringContaining("cline_custom_modes.json"),
+				expect.stringContaining(validMode.name),
+			)
+
+			// Verify global state was updated
+			expect(mockContext.globalState.update).toHaveBeenCalledWith(
+				"customModes",
+				expect.arrayContaining([validMode]),
+			)
+
+			// Verify onUpdate was called
+			expect(mockOnUpdate).toHaveBeenCalled()
+		})
+
+		test("handles file read errors gracefully", async () => {
+			// Mock fs.readFile to throw error
+			;(fs.readFile as jest.Mock).mockRejectedValueOnce(new Error("Test error"))
+
+			const modes = await manager.getCustomModes()
+
+			// Should return empty array on error
+			expect(modes).toEqual([])
+		})
+
+		test("handles file write errors gracefully", async () => {
+			const validMode = {
+				slug: "123e4567-e89b-12d3-a456-426614174000",
+				name: "Test Mode",
+				roleDefinition: "Test role definition",
+				groups: ["read"] as const,
+			} satisfies ModeConfig
+
+			// Mock fs.writeFile to throw error
+			;(fs.writeFile as jest.Mock).mockRejectedValueOnce(new Error("Write error"))
+
+			const mockShowError = jest.fn()
+			;(vscode.window.showErrorMessage as jest.Mock) = mockShowError
+
+			await manager.updateCustomMode(validMode.slug, validMode)
+
+			// Should show error message
+			expect(mockShowError).toHaveBeenCalledWith(expect.stringContaining("Write error"))
+		})
+	})
+
+	describe("File Operations", () => {
+		test("creates settings directory if it doesn't exist", async () => {
+			const configPath = path.join(mockStoragePath, "settings", "cline_custom_modes.json")
+			await manager.getCustomModesFilePath()
+
+			expect(fs.mkdir).toHaveBeenCalledWith(path.dirname(configPath), { recursive: true })
+		})
+
+		test("creates default config if file doesn't exist", async () => {
+			const configPath = path.join(mockStoragePath, "settings", "cline_custom_modes.json")
+			await manager.getCustomModesFilePath()
+
+			expect(fs.writeFile).toHaveBeenCalledWith(configPath, JSON.stringify({ customModes: [] }, null, 2))
+		})
+
+		test("watches file for changes", async () => {
+			// Mock file path resolution
+			const configPath = path.join(mockStoragePath, "settings", "cline_custom_modes.json")
+			;(fs.readFile as jest.Mock).mockResolvedValue(JSON.stringify({ customModes: [] }))
+
+			// Create manager and wait for initialization
+			const manager = new CustomModesManager(mockContext, mockOnUpdate)
+			await manager.getCustomModesFilePath() // This ensures watchCustomModesFile has completed
+
+			// Get the registered callback
+			const registerCall = (vscode.workspace.onDidSaveTextDocument as jest.Mock).mock.calls[0]
+			expect(registerCall).toBeDefined()
+			const [callback] = registerCall
+
+			// Simulate file save event
+			const mockDocument = {
+				uri: { fsPath: configPath },
+			}
+			await callback(mockDocument)
+
+			// Verify file was processed
+			expect(fs.readFile).toHaveBeenCalledWith(configPath, "utf-8")
+			expect(mockContext.globalState.update).toHaveBeenCalled()
+			expect(mockOnUpdate).toHaveBeenCalled()
+
+			// Verify file content was processed
+			expect(fs.readFile).toHaveBeenCalled()
+		})
+	})
+
+	describe("Mode Operations", () => {
+		const validMode = {
+			slug: "123e4567-e89b-12d3-a456-426614174000",
+			name: "Test Mode",
+			roleDefinition: "Test role definition",
+			groups: ["read"] as const,
+		} satisfies ModeConfig
+
+		beforeEach(() => {
+			// Mock fs.readFile to return empty config
+			;(fs.readFile as jest.Mock).mockResolvedValue(JSON.stringify({ customModes: [] }))
+		})
+
+		test("adds new custom mode", async () => {
+			await manager.updateCustomMode(validMode.slug, validMode)
+
+			expect(fs.writeFile).toHaveBeenCalledWith(expect.any(String), expect.stringContaining(validMode.name))
+			expect(mockOnUpdate).toHaveBeenCalled()
+		})
+
+		test("updates existing custom mode", async () => {
+			// Mock existing mode
+			;(fs.readFile as jest.Mock).mockResolvedValue(
+				JSON.stringify({
+					customModes: [validMode],
+				}),
+			)
+
+			const updatedMode = {
+				...validMode,
+				name: "Updated Name",
+			}
+
+			await manager.updateCustomMode(validMode.slug, updatedMode)
+
+			expect(fs.writeFile).toHaveBeenCalledWith(expect.any(String), expect.stringContaining("Updated Name"))
+			expect(mockOnUpdate).toHaveBeenCalled()
+		})
+
+		test("deletes custom mode", async () => {
+			// Mock existing mode
+			;(fs.readFile as jest.Mock).mockResolvedValue(
+				JSON.stringify({
+					customModes: [validMode],
+				}),
+			)
+
+			await manager.deleteCustomMode(validMode.slug)
+
+			expect(fs.writeFile).toHaveBeenCalledWith(expect.any(String), expect.not.stringContaining(validMode.name))
+			expect(mockOnUpdate).toHaveBeenCalled()
+		})
+
+		test("queues write operations", async () => {
+			const mode1 = {
+				...validMode,
+				name: "Mode 1",
+			}
+			const mode2 = {
+				...validMode,
+				slug: "mode-2",
+				name: "Mode 2",
+			}
+
+			// Mock initial empty state and track writes
+			let currentModes: ModeConfig[] = []
+			;(fs.readFile as jest.Mock).mockImplementation(() => JSON.stringify({ customModes: currentModes }))
+			;(fs.writeFile as jest.Mock).mockImplementation(async (path, content) => {
+				const data = JSON.parse(content)
+				currentModes = data.customModes
+				return Promise.resolve()
+			})
+
+			// Start both updates simultaneously
+			await Promise.all([
+				manager.updateCustomMode(mode1.slug, mode1),
+				manager.updateCustomMode(mode2.slug, mode2),
+			])
+
+			// Verify final state
+			expect(currentModes).toHaveLength(2)
+			expect(currentModes.map((m) => m.name)).toContain("Mode 1")
+			expect(currentModes.map((m) => m.name)).toContain("Mode 2")
+
+			// Verify write was called with both modes
+			const lastWriteCall = (fs.writeFile as jest.Mock).mock.calls.pop()
+			const finalContent = JSON.parse(lastWriteCall[1])
+			expect(finalContent.customModes).toHaveLength(2)
+			expect(finalContent.customModes.map((m: ModeConfig) => m.name)).toContain("Mode 1")
+			expect(finalContent.customModes.map((m: ModeConfig) => m.name)).toContain("Mode 2")
+		})
+	})
+})

src/core/config/__tests__/CustomModesSchema.test.ts

@@ -0,0 +1,122 @@
+import { validateCustomMode } from "../CustomModesSchema"
+import { ModeConfig } from "../../../shared/modes"
+import { ZodError } from "zod"
+
+describe("CustomModesSchema", () => {
+	describe("validateCustomMode", () => {
+		test("accepts valid mode configuration", () => {
+			const validMode = {
+				slug: "123e4567-e89b-12d3-a456-426614174000",
+				name: "Test Mode",
+				roleDefinition: "Test role definition",
+				groups: ["read"] as const,
+			} satisfies ModeConfig
+
+			expect(() => validateCustomMode(validMode)).not.toThrow()
+		})
+
+		test("accepts mode with multiple groups", () => {
+			const validMode = {
+				slug: "123e4567-e89b-12d3-a456-426614174000",
+				name: "Test Mode",
+				roleDefinition: "Test role definition",
+				groups: ["read", "edit", "browser"] as const,
+			} satisfies ModeConfig
+
+			expect(() => validateCustomMode(validMode)).not.toThrow()
+		})
+
+		test("accepts mode with optional customInstructions", () => {
+			const validMode = {
+				slug: "123e4567-e89b-12d3-a456-426614174000",
+				name: "Test Mode",
+				roleDefinition: "Test role definition",
+				customInstructions: "Custom instructions",
+				groups: ["read"] as const,
+			} satisfies ModeConfig
+
+			expect(() => validateCustomMode(validMode)).not.toThrow()
+		})
+
+		test("rejects missing required fields", () => {
+			const invalidModes = [
+				{}, // All fields missing
+				{ name: "Test" }, // Missing most fields
+				{
+					name: "Test",
+					roleDefinition: "Role",
+				}, // Missing slug and groups
+			]
+
+			invalidModes.forEach((invalidMode) => {
+				expect(() => validateCustomMode(invalidMode)).toThrow(ZodError)
+			})
+		})
+
+		test("rejects invalid slug format", () => {
+			const invalidMode = {
+				slug: "not@a@valid@slug",
+				name: "Test Mode",
+				roleDefinition: "Test role definition",
+				groups: ["read"] as const,
+			} satisfies Omit<ModeConfig, "slug"> & { slug: string }
+
+			expect(() => validateCustomMode(invalidMode)).toThrow(ZodError)
+			expect(() => validateCustomMode(invalidMode)).toThrow("Slug must contain only letters numbers and dashes")
+		})
+
+		test("rejects empty strings in required fields", () => {
+			const emptyNameMode = {
+				slug: "123e4567-e89b-12d3-a456-426614174000",
+				name: "",
+				roleDefinition: "Test role definition",
+				groups: ["read"] as const,
+			} satisfies ModeConfig
+
+			const emptyRoleMode = {
+				slug: "123e4567-e89b-12d3-a456-426614174000",
+				name: "Test Mode",
+				roleDefinition: "",
+				groups: ["read"] as const,
+			} satisfies ModeConfig
+
+			expect(() => validateCustomMode(emptyNameMode)).toThrow("Name is required")
+			expect(() => validateCustomMode(emptyRoleMode)).toThrow("Role definition is required")
+		})
+
+		test("rejects invalid group configurations", () => {
+			const invalidGroupMode = {
+				slug: "123e4567-e89b-12d3-a456-426614174000",
+				name: "Test Mode",
+				roleDefinition: "Test role definition",
+				groups: ["not-a-valid-group"] as any,
+			}
+
+			expect(() => validateCustomMode(invalidGroupMode)).toThrow(ZodError)
+		})
+
+		test("rejects empty groups array", () => {
+			const invalidMode = {
+				slug: "123e4567-e89b-12d3-a456-426614174000",
+				name: "Test Mode",
+				roleDefinition: "Test role definition",
+				groups: [] as const,
+			} satisfies ModeConfig
+
+			expect(() => validateCustomMode(invalidMode)).toThrow("At least one tool group is required")
+		})
+
+		test("handles null and undefined gracefully", () => {
+			expect(() => validateCustomMode(null)).toThrow(ZodError)
+			expect(() => validateCustomMode(undefined)).toThrow(ZodError)
+		})
+
+		test("rejects non-object inputs", () => {
+			const invalidInputs = [42, "string", true, [], () => {}]
+
+			invalidInputs.forEach((input) => {
+				expect(() => validateCustomMode(input)).toThrow(ZodError)
+			})
+		})
+	})
+})

src/core/config/__tests__/CustomModesSettings.test.ts

@@ -0,0 +1,169 @@
+import { CustomModesSettingsSchema } from "../CustomModesSchema"
+import { ModeConfig } from "../../../shared/modes"
+import { ZodError } from "zod"
+
+describe("CustomModesSettings", () => {
+	const validMode = {
+		slug: "123e4567-e89b-12d3-a456-426614174000",
+		name: "Test Mode",
+		roleDefinition: "Test role definition",
+		groups: ["read"] as const,
+	} satisfies ModeConfig
+
+	describe("schema validation", () => {
+		test("accepts valid settings", () => {
+			const validSettings = {
+				customModes: [validMode],
+			}
+
+			expect(() => {
+				CustomModesSettingsSchema.parse(validSettings)
+			}).not.toThrow()
+		})
+
+		test("accepts empty custom modes array", () => {
+			const validSettings = {
+				customModes: [],
+			}
+
+			expect(() => {
+				CustomModesSettingsSchema.parse(validSettings)
+			}).not.toThrow()
+		})
+
+		test("accepts multiple custom modes", () => {
+			const validSettings = {
+				customModes: [
+					validMode,
+					{
+						...validMode,
+						slug: "987fcdeb-51a2-43e7-89ab-cdef01234567",
+						name: "Another Mode",
+					},
+				],
+			}
+
+			expect(() => {
+				CustomModesSettingsSchema.parse(validSettings)
+			}).not.toThrow()
+		})
+
+		test("rejects missing customModes field", () => {
+			const invalidSettings = {} as any
+
+			expect(() => {
+				CustomModesSettingsSchema.parse(invalidSettings)
+			}).toThrow(ZodError)
+		})
+
+		test("rejects invalid mode in array", () => {
+			const invalidSettings = {
+				customModes: [
+					validMode,
+					{
+						...validMode,
+						slug: "not@a@valid@slug", // Invalid slug
+					},
+				],
+			}
+
+			expect(() => {
+				CustomModesSettingsSchema.parse(invalidSettings)
+			}).toThrow(ZodError)
+			expect(() => {
+				CustomModesSettingsSchema.parse(invalidSettings)
+			}).toThrow("Slug must contain only letters numbers and dashes")
+		})
+
+		test("rejects non-array customModes", () => {
+			const invalidSettings = {
+				customModes: "not an array",
+			}
+
+			expect(() => {
+				CustomModesSettingsSchema.parse(invalidSettings)
+			}).toThrow(ZodError)
+		})
+
+		test("rejects null or undefined", () => {
+			expect(() => {
+				CustomModesSettingsSchema.parse(null)
+			}).toThrow(ZodError)
+
+			expect(() => {
+				CustomModesSettingsSchema.parse(undefined)
+			}).toThrow(ZodError)
+		})
+
+		test("rejects duplicate mode slugs", () => {
+			const duplicateSettings = {
+				customModes: [
+					validMode,
+					{ ...validMode }, // Same slug
+				],
+			}
+
+			expect(() => {
+				CustomModesSettingsSchema.parse(duplicateSettings)
+			}).toThrow("Duplicate mode slugs are not allowed")
+		})
+
+		test("rejects invalid group configurations in modes", () => {
+			const invalidSettings = {
+				customModes: [
+					{
+						...validMode,
+						groups: ["invalid_group"] as any,
+					},
+				],
+			}
+
+			expect(() => {
+				CustomModesSettingsSchema.parse(invalidSettings)
+			}).toThrow(ZodError)
+		})
+
+		test("handles multiple groups", () => {
+			const validSettings = {
+				customModes: [
+					{
+						...validMode,
+						groups: ["read", "edit", "browser"] as const,
+					},
+				],
+			}
+
+			expect(() => {
+				CustomModesSettingsSchema.parse(validSettings)
+			}).not.toThrow()
+		})
+	})
+
+	describe("type inference", () => {
+		test("inferred type includes all required fields", () => {
+			const settings = {
+				customModes: [validMode],
+			}
+
+			// TypeScript compilation will fail if the type is incorrect
+			expect(settings.customModes[0].slug).toBeDefined()
+			expect(settings.customModes[0].name).toBeDefined()
+			expect(settings.customModes[0].roleDefinition).toBeDefined()
+			expect(settings.customModes[0].groups).toBeDefined()
+		})
+
+		test("inferred type allows optional fields", () => {
+			const settings = {
+				customModes: [
+					{
+						...validMode,
+						customInstructions: "Optional instructions",
+					},
+				],
+			}
+
+			// TypeScript compilation will fail if the type is incorrect
+			expect(settings.customModes[0].customInstructions).toBeDefined()
+		})
+	})
+})

src/core/config/__tests__/GroupConfigSchema.test.ts

@@ -0,0 +1,90 @@
+import { CustomModeSchema } from "../CustomModesSchema"
+import { ModeConfig } from "../../../shared/modes"
+
+describe("GroupConfigSchema", () => {
+	const validBaseMode = {
+		slug: "123e4567-e89b-12d3-a456-426614174000",
+		name: "Test Mode",
+		roleDefinition: "Test role definition",
+	}
+
+	describe("group format validation", () => {
+		test("accepts single group", () => {
+			const mode = {
+				...validBaseMode,
+				groups: ["read"] as const,
+			} satisfies ModeConfig
+
+			expect(() => CustomModeSchema.parse(mode)).not.toThrow()
+		})
+
+		test("accepts multiple groups", () => {
+			const mode = {
+				...validBaseMode,
+				groups: ["read", "edit", "browser"] as const,
+			} satisfies ModeConfig
+
+			expect(() => CustomModeSchema.parse(mode)).not.toThrow()
+		})
+
+		test("accepts all available groups", () => {
+			const mode = {
+				...validBaseMode,
+				groups: ["read", "edit", "browser", "command", "mcp"] as const,
+			} satisfies ModeConfig
+
+			expect(() => CustomModeSchema.parse(mode)).not.toThrow()
+		})
+
+		test("rejects non-array group format", () => {
+			const mode = {
+				...validBaseMode,
+				groups: "not-an-array" as any,
+			}
+
+			expect(() => CustomModeSchema.parse(mode)).toThrow()
+		})
+
+		test("rejects empty groups array", () => {
+			const mode = {
+				...validBaseMode,
+				groups: [] as const,
+			} satisfies ModeConfig
+
+			expect(() => CustomModeSchema.parse(mode)).toThrow("At least one tool group is required")
+		})
+
+		test("rejects invalid group names", () => {
+			const mode = {
+				...validBaseMode,
+				groups: ["invalid_group"] as any,
+			}
+
+			expect(() => CustomModeSchema.parse(mode)).toThrow()
+		})
+
+		test("rejects duplicate groups", () => {
+			const mode = {
+				...validBaseMode,
+				groups: ["read", "read"] as any,
+			}
+
+			expect(() => CustomModeSchema.parse(mode)).toThrow("Duplicate groups are not allowed")
+		})
+
+		test("rejects null or undefined groups", () => {
+			const modeWithNull = {
+				...validBaseMode,
+				groups: null as any,
+			}
+
+			const modeWithUndefined = {
+				...validBaseMode,
+				groups: undefined as any,
+			}
+
+			expect(() => CustomModeSchema.parse(modeWithNull)).toThrow()
+			expect(() => CustomModeSchema.parse(modeWithUndefined)).toThrow()
+		})
+	})
+})

src/core/diff/strategies/new-unified/index.ts

@@ -233,7 +233,7 @@ Your diff here
 		originalContent: string,
 		diffContent: string,
 		startLine?: number,
-		endLine?: number
+		endLine?: number,
 	): Promise<DiffResult> {
 		const parsedDiff = this.parseUnifiedDiff(diffContent)
 		const originalLines = originalContent.split("\n")
@@ -271,7 +271,7 @@ Your diff here
 							subHunkResult,
 							subSearchResult.index,
 							subSearchResult.confidence,
-							this.confidenceThreshold
+							this.confidenceThreshold,
 						)
 						if (subEditResult.confidence >= this.confidenceThreshold) {
 							subHunkResult = subEditResult.result
@@ -293,12 +293,12 @@ Your diff here
 				const contextRatio = contextLines / totalLines
 
 				let errorMsg = `Failed to find a matching location in the file (${Math.floor(
-					confidence * 100
+					confidence * 100,
 				)}% confidence, needs ${Math.floor(this.confidenceThreshold * 100)}%)\n\n`
 				errorMsg += "Debug Info:\n"
 				errorMsg += `- Search Strategy Used: ${strategy}\n`
 				errorMsg += `- Context Lines: ${contextLines} out of ${totalLines} total lines (${Math.floor(
-					contextRatio * 100
+					contextRatio * 100,
 				)}%)\n`
 				errorMsg += `- Attempted to split into ${subHunks.length} sub-hunks but still failed\n`
 
@@ -330,7 +330,7 @@ Your diff here
 			} else {
 				// Edit failure - likely due to content mismatch
 				let errorMsg = `Failed to apply the edit using ${editResult.strategy} strategy (${Math.floor(
-					editResult.confidence * 100
+					editResult.confidence * 100,
 				)}% confidence)\n\n`
 				errorMsg += "Debug Info:\n"
 				errorMsg += "- The location was found but the content didn't match exactly\n"

src/core/mode-validator.ts

@@ -1,10 +1,16 @@
-import { Mode, isToolAllowedForMode, TestToolName, getModeConfig } from "../shared/modes"
+import { Mode, isToolAllowedForMode, getModeConfig, ModeConfig } from "../shared/modes"
+import { ToolName } from "../shared/tool-groups"
 
 export { isToolAllowedForMode }
-export type { TestToolName }
+export type { ToolName }
 
-export function validateToolUse(toolName: TestToolName, mode: Mode): void {
-	if (!isToolAllowedForMode(toolName, mode)) {
+export function validateToolUse(
+	toolName: ToolName,
+	mode: Mode,
+	customModes?: ModeConfig[],
+	toolRequirements?: Record<string, boolean>,
+): void {
+	if (!isToolAllowedForMode(toolName, mode, customModes ?? [], toolRequirements)) {
 		throw new Error(`Tool "${toolName}" is not allowed in ${mode} mode.`)
 	}
 }

src/core/prompts/__tests__/sections.test.ts

@@ -0,0 +1,56 @@
+import { addCustomInstructions } from "../sections/custom-instructions"
+import { getCapabilitiesSection } from "../sections/capabilities"
+import { DiffStrategy, DiffResult } from "../../diff/types"
+
+describe("addCustomInstructions", () => {
+	test("adds preferred language to custom instructions", async () => {
+		const result = await addCustomInstructions(
+			"mode instructions",
+			"global instructions",
+			"/test/path",
+			"test-mode",
+			{ preferredLanguage: "French" },
+		)
+
+		expect(result).toContain("Language Preference:")
+		expect(result).toContain("You should always speak and think in the French language")
+	})
+
+	test("works without preferred language", async () => {
+		const result = await addCustomInstructions(
+			"mode instructions",
+			"global instructions",
+			"/test/path",
+			"test-mode",
+		)
+
+		expect(result).not.toContain("Language Preference:")
+		expect(result).not.toContain("You should always speak and think in")
+	})
+})
+
+describe("getCapabilitiesSection", () => {
+	const cwd = "/test/path"
+	const mcpHub = undefined
+	const mockDiffStrategy: DiffStrategy = {
+		getToolDescription: () => "apply_diff tool description",
+		applyDiff: async (originalContent: string, diffContent: string): Promise<DiffResult> => {
+			return { success: true, content: "mock result" }
+		},
+	}
+
+	test("includes apply_diff in capabilities when diffStrategy is provided", () => {
+		const result = getCapabilitiesSection(cwd, false, mcpHub, mockDiffStrategy)
+
+		expect(result).toContain("or apply_diff")
+		expect(result).toContain("then use the write_to_file or apply_diff tool")
+	})
+
+	test("excludes apply_diff from capabilities when diffStrategy is undefined", () => {
+		const result = getCapabilitiesSection(cwd, false, mcpHub, undefined)
+
+		expect(result).not.toContain("or apply_diff")
+		expect(result).toContain("then use the write_to_file tool")
+		expect(result).not.toContain("write_to_file or apply_diff")
+	})
+})

src/core/prompts/__tests__/system.test.ts

@@ -1,13 +1,62 @@
-import { SYSTEM_PROMPT, addCustomInstructions } from "../system"
+import { SYSTEM_PROMPT } from "../system"
 import { McpHub } from "../../../services/mcp/McpHub"
 import { McpServer } from "../../../shared/mcp"
 import { ClineProvider } from "../../../core/webview/ClineProvider"
 import { SearchReplaceDiffStrategy } from "../../../core/diff/strategies/search-replace"
+import * as vscode from "vscode"
 import fs from "fs/promises"
 import os from "os"
 import { defaultModeSlug, modes } from "../../../shared/modes"
 // Import path utils to get access to toPosix string extension
 import "../../../utils/path"
+import { addCustomInstructions } from "../sections/custom-instructions"
+import * as modesSection from "../sections/modes"
+
+// Mock the sections
+jest.mock("../sections/modes", () => ({
+	getModesSection: jest.fn().mockImplementation(async () => `====\n\nMODES\n\n- Test modes section`),
+}))
+
+jest.mock("../sections/custom-instructions", () => ({
+	addCustomInstructions: jest
+		.fn()
+		.mockImplementation(async (modeCustomInstructions, globalCustomInstructions, cwd, mode, options) => {
+			const sections = []
+
+			// Add language preference if provided
+			if (options?.preferredLanguage) {
+				sections.push(
+					`Language Preference:\nYou should always speak and think in the ${options.preferredLanguage} language.`,
+				)
+			}
+
+			// Add global instructions first
+			if (globalCustomInstructions?.trim()) {
+				sections.push(`Global Instructions:\n${globalCustomInstructions.trim()}`)
+			}
+
+			// Add mode-specific instructions after
+			if (modeCustomInstructions?.trim()) {
+				sections.push(`Mode-specific Instructions:\n${modeCustomInstructions}`)
+			}
+
+			// Add rules
+			const rules = []
+			if (mode) {
+				rules.push(`# Rules from .clinerules-${mode}:\nMock mode-specific rules`)
+			}
+			rules.push(`# Rules from .clinerules:\nMock generic rules`)
+
+			if (rules.length > 0) {
+				sections.push(`Rules:\n${rules.join("\n")}`)
+			}
+
+			const joinedSections = sections.join("\n\n")
+			return joinedSections
+				? `\n====\n\nUSER'S CUSTOM INSTRUCTIONS\n\nThe following additional instructions are provided by the user, and should be followed to the best of your ability without interfering with the TOOL USE guidelines.\n\n${joinedSections}`
+				: ""
+		}),
+}))
 
 // Mock environment-specific values for consistent tests
 jest.mock("os", () => ({
@@ -19,42 +68,38 @@ jest.mock("default-shell", () => "/bin/bash")
 
 jest.mock("os-name", () => () => "Linux")
 
-// Mock fs.readFile to return empty mcpServers config and mock rules files
-jest.mock("fs/promises", () => ({
-	...jest.requireActual("fs/promises"),
-	readFile: jest.fn().mockImplementation(async (path: string) => {
-		if (path.endsWith("mcpSettings.json")) {
-			return '{"mcpServers": {}}'
-		}
-		if (path.endsWith(".clinerules-code")) {
-			return "# Code Mode Rules\n1. Code specific rule"
-		}
-		if (path.endsWith(".clinerules-ask")) {
-			return "# Ask Mode Rules\n1. Ask specific rule"
-		}
-		if (path.endsWith(".clinerules-architect")) {
-			return "# Architect Mode Rules\n1. Architect specific rule"
-		}
-		if (path.endsWith(".clinerules")) {
-			return "# Test Rules\n1. First rule\n2. Second rule"
-		}
-		return ""
-	}),
-	writeFile: jest.fn().mockResolvedValue(undefined),
-}))
+// Create a mock ExtensionContext
+const mockContext = {
+	extensionPath: "/mock/extension/path",
+	globalStoragePath: "/mock/storage/path",
+	storagePath: "/mock/storage/path",
+	logPath: "/mock/log/path",
+	subscriptions: [],
+	workspaceState: {
+		get: () => undefined,
+		update: () => Promise.resolve(),
+	},
+	globalState: {
+		get: () => undefined,
+		update: () => Promise.resolve(),
+		setKeysForSync: () => {},
+	},
+	extensionUri: { fsPath: "/mock/extension/path" },
+	globalStorageUri: { fsPath: "/mock/settings/path" },
+	asAbsolutePath: (relativePath: string) => `/mock/extension/path/${relativePath}`,
+	extension: {
+		packageJSON: {
+			version: "1.0.0",
+		},
+	},
+} as unknown as vscode.ExtensionContext
 
 // Create a minimal mock of ClineProvider
 const mockProvider = {
 	ensureMcpServersDirectoryExists: async () => "/mock/mcp/path",
 	ensureSettingsDirectoryExists: async () => "/mock/settings/path",
 	postMessageToWebview: async () => {},
-	context: {
-		extension: {
-			packageJSON: {
-				version: "1.0.0",
-			},
-		},
-	},
+	context: mockContext,
 } as unknown as ClineProvider
 
 // Instead of extending McpHub, create a mock that implements just what we need
@@ -77,6 +122,26 @@ const createMockMcpHub = (): McpHub =>
 describe("SYSTEM_PROMPT", () => {
 	let mockMcpHub: McpHub
 
+	beforeAll(() => {
+		// Ensure fs mock is properly initialized
+		const mockFs = jest.requireMock("fs/promises")
+		mockFs._setInitialMockData()
+
+		// Initialize all required directories
+		const dirs = [
+			"/mock",
+			"/mock/extension",
+			"/mock/extension/path",
+			"/mock/storage",
+			"/mock/storage/path",
+			"/mock/settings",
+			"/mock/settings/path",
+			"/mock/mcp",
+			"/mock/mcp/path",
+		]
+		dirs.forEach((dir) => mockFs._mockDirectories.add(dir))
+	})
+
 	beforeEach(() => {
 		jest.clearAllMocks()
 	})
@@ -90,18 +155,32 @@ describe("SYSTEM_PROMPT", () => {
 
 	it("should maintain consistent system prompt", async () => {
 		const prompt = await SYSTEM_PROMPT(
+			mockContext,
 			"/test/path",
 			false, // supportsComputerUse
 			undefined, // mcpHub
 			undefined, // diffStrategy
 			undefined, // browserViewportSize
+			defaultModeSlug, // mode
+			undefined, // customModePrompts
+			undefined, // customModes
 		)
 
 		expect(prompt).toMatchSnapshot()
 	})
 
 	it("should include browser actions when supportsComputerUse is true", async () => {
-		const prompt = await SYSTEM_PROMPT("/test/path", true, undefined, undefined, "1280x800")
+		const prompt = await SYSTEM_PROMPT(
+			mockContext,
+			"/test/path",
+			true, // supportsComputerUse
+			undefined, // mcpHub
+			undefined, // diffStrategy
+			"1280x800", // browserViewportSize
+			defaultModeSlug, // mode
+			undefined, // customModePrompts
+			undefined, // customModes
+		)
 
 		expect(prompt).toMatchSnapshot()
 	})
@@ -109,18 +188,32 @@ describe("SYSTEM_PROMPT", () => {
 	it("should include MCP server info when mcpHub is provided", async () => {
 		mockMcpHub = createMockMcpHub()
 
-		const prompt = await SYSTEM_PROMPT("/test/path", false, mockMcpHub)
+		const prompt = await SYSTEM_PROMPT(
+			mockContext,
+			"/test/path",
+			false, // supportsComputerUse
+			mockMcpHub, // mcpHub
+			undefined, // diffStrategy
+			undefined, // browserViewportSize
+			defaultModeSlug, // mode
+			undefined, // customModePrompts
+			undefined, // customModes
+		)
 
 		expect(prompt).toMatchSnapshot()
 	})
 
 	it("should explicitly handle undefined mcpHub", async () => {
 		const prompt = await SYSTEM_PROMPT(
+			mockContext,
 			"/test/path",
-			false,
+			false, // supportsComputerUse
 			undefined, // explicitly undefined mcpHub
-			undefined,
-			undefined,
+			undefined, // diffStrategy
+			undefined, // browserViewportSize
+			defaultModeSlug, // mode
+			undefined, // customModePrompts
+			undefined, // customModes
 		)
 
 		expect(prompt).toMatchSnapshot()
@@ -128,26 +221,183 @@ describe("SYSTEM_PROMPT", () => {
 
 	it("should handle different browser viewport sizes", async () => {
 		const prompt = await SYSTEM_PROMPT(
+			mockContext,
 			"/test/path",
-			true,
-			undefined,
-			undefined,
+			true, // supportsComputerUse
+			undefined, // mcpHub
+			undefined, // diffStrategy
 			"900x600", // different viewport size
+			defaultModeSlug, // mode
+			undefined, // customModePrompts
+			undefined, // customModes
+		)
+
+		expect(prompt).toMatchSnapshot()
+	})
+
+	it("should include diff strategy tool description when diffEnabled is true", async () => {
+		const prompt = await SYSTEM_PROMPT(
+			mockContext,
+			"/test/path",
+			false, // supportsComputerUse
+			undefined, // mcpHub
+			new SearchReplaceDiffStrategy(), // Use actual diff strategy from the codebase
+			undefined, // browserViewportSize
+			defaultModeSlug, // mode
+			undefined, // customModePrompts
+			undefined, // customModes
+			undefined, // globalCustomInstructions
+			undefined, // preferredLanguage
+			true, // diffEnabled
+		)
+
+		expect(prompt).toContain("apply_diff")
+		expect(prompt).toMatchSnapshot()
+	})
+
+	it("should exclude diff strategy tool description when diffEnabled is false", async () => {
+		const prompt = await SYSTEM_PROMPT(
+			mockContext,
+			"/test/path",
+			false, // supportsComputerUse
+			undefined, // mcpHub
+			new SearchReplaceDiffStrategy(), // Use actual diff strategy from the codebase
+			undefined, // browserViewportSize
+			defaultModeSlug, // mode
+			undefined, // customModePrompts
+			undefined, // customModes
+			undefined, // globalCustomInstructions
+			undefined, // preferredLanguage
+			false, // diffEnabled
 		)
 
+		expect(prompt).not.toContain("apply_diff")
 		expect(prompt).toMatchSnapshot()
 	})
 
-	it("should include diff strategy tool description", async () => {
+	it("should exclude diff strategy tool description when diffEnabled is undefined", async () => {
 		const prompt = await SYSTEM_PROMPT(
+			mockContext,
+			"/test/path",
+			false, // supportsComputerUse
+			undefined, // mcpHub
+			new SearchReplaceDiffStrategy(), // Use actual diff strategy from the codebase
+			undefined, // browserViewportSize
+			defaultModeSlug, // mode
+			undefined, // customModePrompts
+			undefined, // customModes
+			undefined, // globalCustomInstructions
+			undefined, // preferredLanguage
+			undefined, // diffEnabled
+		)
+
+		expect(prompt).not.toContain("apply_diff")
+		expect(prompt).toMatchSnapshot()
+	})
+
+	it("should include preferred language in custom instructions", async () => {
+		const prompt = await SYSTEM_PROMPT(
+			mockContext,
+			"/test/path",
+			false, // supportsComputerUse
+			undefined, // mcpHub
+			undefined, // diffStrategy
+			undefined, // browserViewportSize
+			defaultModeSlug, // mode
+			undefined, // customModePrompts
+			undefined, // customModes
+			undefined, // globalCustomInstructions
+			"Spanish", // preferredLanguage
+		)
+
+		expect(prompt).toContain("Language Preference:")
+		expect(prompt).toContain("You should always speak and think in the Spanish language")
+	})
+
+	it("should include custom mode role definition at top and instructions at bottom", async () => {
+		const modeCustomInstructions = "Custom mode instructions"
+		const customModes = [
+			{
+				slug: "custom-mode",
+				name: "Custom Mode",
+				roleDefinition: "Custom role definition",
+				customInstructions: modeCustomInstructions,
+				groups: ["read"] as const,
+			},
+		]
+
+		const prompt = await SYSTEM_PROMPT(
+			mockContext,
+			"/test/path",
+			false, // supportsComputerUse
+			undefined, // mcpHub
+			undefined, // diffStrategy
+			undefined, // browserViewportSize
+			"custom-mode", // mode
+			undefined, // customModePrompts
+			customModes, // customModes
+			"Global instructions", // globalCustomInstructions
+		)
+
+		// Role definition should be at the top
+		expect(prompt.indexOf("Custom role definition")).toBeLessThan(prompt.indexOf("TOOL USE"))
+
+		// Custom instructions should be at the bottom
+		const customInstructionsIndex = prompt.indexOf("Custom mode instructions")
+		const userInstructionsHeader = prompt.indexOf("USER'S CUSTOM INSTRUCTIONS")
+		expect(customInstructionsIndex).toBeGreaterThan(-1)
+		expect(userInstructionsHeader).toBeGreaterThan(-1)
+		expect(customInstructionsIndex).toBeGreaterThan(userInstructionsHeader)
+	})
+
+	it("should use promptComponent roleDefinition when available", async () => {
+		const customModePrompts = {
+			[defaultModeSlug]: {
+				roleDefinition: "Custom prompt role definition",
+				customInstructions: "Custom prompt instructions",
+			},
+		}
+
+		const prompt = await SYSTEM_PROMPT(
+			mockContext,
 			"/test/path",
 			false,
 			undefined,
-			new SearchReplaceDiffStrategy(), // Use actual diff strategy from the codebase
+			undefined,
+			undefined,
+			defaultModeSlug,
+			customModePrompts,
 			undefined,
 		)
 
-		expect(prompt).toMatchSnapshot()
+		// Role definition from promptComponent should be at the top
+		expect(prompt.indexOf("Custom prompt role definition")).toBeLessThan(prompt.indexOf("TOOL USE"))
+		// Should not contain the default mode's role definition
+		expect(prompt).not.toContain(modes[0].roleDefinition)
+	})
+
+	it("should fallback to modeConfig roleDefinition when promptComponent has no roleDefinition", async () => {
+		const customModePrompts = {
+			[defaultModeSlug]: {
+				customInstructions: "Custom prompt instructions",
+				// No roleDefinition provided
+			},
+		}
+
+		const prompt = await SYSTEM_PROMPT(
+			mockContext,
+			"/test/path",
+			false,
+			undefined,
+			undefined,
+			undefined,
+			defaultModeSlug,
+			customModePrompts,
+			undefined,
+		)
+
+		// Should use the default mode's role definition
+		expect(prompt.indexOf(modes[0].roleDefinition)).toBeLessThan(prompt.indexOf("TOOL USE"))
 	})
 
 	afterAll(() => {
@@ -156,171 +406,142 @@ describe("SYSTEM_PROMPT", () => {
 })
 
 describe("addCustomInstructions", () => {
+	beforeAll(() => {
+		// Ensure fs mock is properly initialized
+		const mockFs = jest.requireMock("fs/promises")
+		mockFs._setInitialMockData()
+		mockFs.mkdir.mockImplementation(async (path: string) => {
+			if (path.startsWith("/test")) {
+				mockFs._mockDirectories.add(path)
+				return Promise.resolve()
+			}
+			throw new Error(`ENOENT: no such file or directory, mkdir '${path}'`)
+		})
+	})
+
 	beforeEach(() => {
 		jest.clearAllMocks()
 	})
 
 	it("should generate correct prompt for architect mode", async () => {
-		const prompt = await SYSTEM_PROMPT("/test/path", false, undefined, undefined, undefined, "architect")
+		const prompt = await SYSTEM_PROMPT(
+			mockContext,
+			"/test/path",
+			false, // supportsComputerUse
+			undefined, // mcpHub
+			undefined, // diffStrategy
+			undefined, // browserViewportSize
+			"architect", // mode
+			undefined, // customModePrompts
+			undefined, // customModes
+		)
 
 		expect(prompt).toMatchSnapshot()
 	})
 
 	it("should generate correct prompt for ask mode", async () => {
-		const prompt = await SYSTEM_PROMPT("/test/path", false, undefined, undefined, undefined, "ask")
+		const prompt = await SYSTEM_PROMPT(
+			mockContext,
+			"/test/path",
+			false, // supportsComputerUse
+			undefined, // mcpHub
+			undefined, // diffStrategy
+			undefined, // browserViewportSize
+			"ask", // mode
+			undefined, // customModePrompts
+			undefined, // customModes
+		)
 
 		expect(prompt).toMatchSnapshot()
 	})
 
 	it("should prioritize mode-specific rules for code mode", async () => {
-		const instructions = await addCustomInstructions({}, "/test/path", defaultModeSlug)
+		const instructions = await addCustomInstructions("", "", "/test/path", defaultModeSlug)
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should prioritize mode-specific rules for ask mode", async () => {
-		const instructions = await addCustomInstructions({}, "/test/path", modes[2].slug)
+		const instructions = await addCustomInstructions("", "", "/test/path", modes[2].slug)
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should prioritize mode-specific rules for architect mode", async () => {
-		const instructions = await addCustomInstructions({}, "/test/path", modes[1].slug)
-
+		const instructions = await addCustomInstructions("", "", "/test/path", modes[1].slug)
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should prioritize mode-specific rules for test engineer mode", async () => {
-		// Mock readFile to include test engineer rules
-		const mockReadFile = jest.fn().mockImplementation(async (path: string) => {
-			if (path.endsWith(".clinerules-test")) {
-				return "# Test Engineer Rules\n1. Always write tests first\n2. Get approval before modifying non-test code"
-			}
-			if (path.endsWith(".clinerules")) {
-				return "# Test Rules\n1. First rule\n2. Second rule"
-			}
-			return ""
-		})
-		jest.spyOn(fs, "readFile").mockImplementation(mockReadFile)
-
-		const instructions = await addCustomInstructions({}, "/test/path", "test")
+		const instructions = await addCustomInstructions("", "", "/test/path", "test")
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should prioritize mode-specific rules for code reviewer mode", async () => {
-		// Mock readFile to include code reviewer rules
-		const mockReadFile = jest.fn().mockImplementation(async (path: string) => {
-			if (path.endsWith(".clinerules-review")) {
-				return "# Code Reviewer Rules\n1. Provide specific examples in feedback\n2. Focus on maintainability and best practices"
-			}
-			if (path.endsWith(".clinerules")) {
-				return "# Test Rules\n1. First rule\n2. Second rule"
-			}
-			return ""
-		})
-		jest.spyOn(fs, "readFile").mockImplementation(mockReadFile)
-
-		const instructions = await addCustomInstructions({}, "/test/path", "review")
+		const instructions = await addCustomInstructions("", "", "/test/path", "review")
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should fall back to generic rules when mode-specific rules not found", async () => {
-		// Mock readFile to return ENOENT for mode-specific file
-		const mockReadFile = jest.fn().mockImplementation(async (path: string) => {
-			if (
-				path.endsWith(".clinerules-code") ||
-				path.endsWith(".clinerules-test") ||
-				path.endsWith(".clinerules-review")
-			) {
-				const error = new Error("ENOENT") as NodeJS.ErrnoException
-				error.code = "ENOENT"
-				throw error
-			}
-			if (path.endsWith(".clinerules")) {
-				return "# Test Rules\n1. First rule\n2. Second rule"
-			}
-			return ""
-		})
-		jest.spyOn(fs, "readFile").mockImplementation(mockReadFile)
-
-		const instructions = await addCustomInstructions({}, "/test/path", defaultModeSlug)
-
+		const instructions = await addCustomInstructions("", "", "/test/path", defaultModeSlug)
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should include preferred language when provided", async () => {
-		const instructions = await addCustomInstructions(
-			{ preferredLanguage: "Spanish" },
-			"/test/path",
-			defaultModeSlug,
-		)
-
+		const instructions = await addCustomInstructions("", "", "/test/path", defaultModeSlug, {
+			preferredLanguage: "Spanish",
+		})
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should include custom instructions when provided", async () => {
-		const instructions = await addCustomInstructions(
-			{ customInstructions: "Custom test instructions" },
-			"/test/path",
-		)
-
+		const instructions = await addCustomInstructions("Custom test instructions", "", "/test/path", defaultModeSlug)
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should combine all custom instructions", async () => {
 		const instructions = await addCustomInstructions(
-			{
-				customInstructions: "Custom test instructions",
-				preferredLanguage: "French",
-			},
+			"Custom test instructions",
+			"",
 			"/test/path",
 			defaultModeSlug,
+			{ preferredLanguage: "French" },
 		)
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should handle undefined mode-specific instructions", async () => {
-		const instructions = await addCustomInstructions({}, "/test/path")
-
+		const instructions = await addCustomInstructions("", "", "/test/path", defaultModeSlug)
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should trim mode-specific instructions", async () => {
 		const instructions = await addCustomInstructions(
-			{ customInstructions: "  Custom mode instructions  " },
+			"  Custom mode instructions  ",
+			"",
 			"/test/path",
+			defaultModeSlug,
 		)
-
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should handle empty mode-specific instructions", async () => {
-		const instructions = await addCustomInstructions({ customInstructions: "" }, "/test/path")
-
+		const instructions = await addCustomInstructions("", "", "/test/path", defaultModeSlug)
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should combine global and mode-specific instructions", async () => {
 		const instructions = await addCustomInstructions(
-			{
-				customInstructions: "Global instructions",
-				customPrompts: {
-					code: { customInstructions: "Mode-specific instructions" },
-				},
-			},
+			"Mode-specific instructions",
+			"Global instructions",
 			"/test/path",
 			defaultModeSlug,
 		)
-
 		expect(instructions).toMatchSnapshot()
 	})
 
 	it("should prioritize mode-specific instructions after global ones", async () => {
 		const instructions = await addCustomInstructions(
-			{
-				customInstructions: "First instruction",
-				customPrompts: {
-					code: { customInstructions: "Second instruction" },
-				},
-			},
+			"Second instruction",
+			"First instruction",
 			"/test/path",
 			defaultModeSlug,
 		)

src/core/prompts/sections/capabilities.ts

@@ -17,7 +17,7 @@ CAPABILITIES
 - When the user initially gives you a task, a recursive list of all filepaths in the current working directory ('${cwd}') will be included in environment_details. This provides an overview of the project's file structure, offering key insights into the project from directory/file names (how developers conceptualize and organize their code) and file extensions (the language used). This can also guide decision-making on which files to explore further. If you need to further explore directories such as outside the current working directory, you can use the list_files tool. If you pass 'true' for the recursive parameter, it will list files recursively. Otherwise, it will list files at the top level, which is better suited for generic directories where you don't necessarily need the nested structure, like the Desktop.
 - You can use search_files to perform regex searches across files in a specified directory, outputting context-rich results that include surrounding lines. This is particularly useful for understanding code patterns, finding specific implementations, or identifying areas that need refactoring.
 - You can use the list_code_definition_names tool to get an overview of source code definitions for all files at the top level of a specified directory. This can be particularly useful when you need to understand the broader context and relationships between certain parts of the code. You may need to call this tool multiple times to understand various parts of the codebase related to the task.
-    - For example, when asked to make edits or improvements you might analyze the file structure in the initial environment_details to get an overview of the project, then use list_code_definition_names to get further insight using source code definitions for files located in relevant directories, then read_file to examine the contents of relevant files, analyze the code and suggest improvements or make necessary edits, then use the write_to_file ${diffStrategy ? "or apply_diff " : ""}tool to apply the changes. If you refactored code that could affect other parts of the codebase, you could use search_files to ensure you update other files as needed.
+    - For example, when asked to make edits or improvements you might analyze the file structure in the initial environment_details to get an overview of the project, then use list_code_definition_names to get further insight using source code definitions for files located in relevant directories, then read_file to examine the contents of relevant files, analyze the code and suggest improvements or make necessary edits, then use the write_to_file${diffStrategy ? " or apply_diff" : ""} tool to apply the changes. If you refactored code that could affect other parts of the codebase, you could use search_files to ensure you update other files as needed.
 - You can use the execute_command tool to run commands on the user's computer whenever you feel it can help accomplish the user's task. When you need to execute a CLI command, you must provide a clear explanation of what the command does. Prefer to execute complex CLI commands over creating executable scripts, since they are more flexible and easier to run. Interactive and long-running commands are allowed, since the commands are run in the user's VSCode terminal. The user may keep commands running in the background and you will be kept updated on their status along the way. Each command you execute is run in a new terminal instance.${
 		supportsComputerUse
 			? "\n- You can use the browser_action tool to interact with websites (including html files and locally running development servers) through a Puppeteer-controlled browser when you feel it is necessary in accomplishing the user's task. This tool is particularly useful for web development tasks as it allows you to launch a browser, navigate to pages, interact with elements through clicks and keyboard input, and capture the results through screenshots and console logs. This tool may be useful at key stages of web development tasks-such as after implementing new features, making substantial changes, when troubleshooting issues, or to verify the result of your work. You can analyze the provided screenshots to ensure correct rendering or identify errors, and review console logs for runtime issues.\n  - For example, if asked to add a component to a react website, you might create the necessary files, use execute_command to run the site locally, then use browser_action to launch the browser, navigate to the local server, and verify the component renders & functions correctly before closing the browser."

src/core/prompts/sections/custom-instructions.ts

@@ -23,28 +23,70 @@ export async function loadRuleFiles(cwd: string): Promise<string> {
 }
 
 export async function addCustomInstructions(
-	customInstructions: string,
+	modeCustomInstructions: string,
+	globalCustomInstructions: string,
 	cwd: string,
-	preferredLanguage?: string,
+	mode: string,
+	options: { preferredLanguage?: string } = {},
 ): Promise<string> {
-	const ruleFileContent = await loadRuleFiles(cwd)
-	const allInstructions = []
+	const sections = []
 
-	if (preferredLanguage) {
-		allInstructions.push(`You should always speak and think in the ${preferredLanguage} language.`)
+	// Load mode-specific rules if mode is provided
+	let modeRuleContent = ""
+	if (mode) {
+		try {
+			const modeRuleFile = `.clinerules-${mode}`
+			const content = await fs.readFile(path.join(cwd, modeRuleFile), "utf-8")
+			if (content.trim()) {
+				modeRuleContent = content.trim()
+			}
+		} catch (err) {
+			// Silently skip if file doesn't exist
+			if ((err as NodeJS.ErrnoException).code !== "ENOENT") {
+				throw err
+			}
+		}
+	}
+
+	// Add language preference if provided
+	if (options.preferredLanguage) {
+		sections.push(
+			`Language Preference:\nYou should always speak and think in the ${options.preferredLanguage} language.`,
+		)
+	}
+
+	// Add global instructions first
+	if (typeof globalCustomInstructions === "string" && globalCustomInstructions.trim()) {
+		sections.push(`Global Instructions:\n${globalCustomInstructions.trim()}`)
+	}
+
+	// Add mode-specific instructions after
+	if (typeof modeCustomInstructions === "string" && modeCustomInstructions.trim()) {
+		sections.push(`Mode-specific Instructions:\n${modeCustomInstructions.trim()}`)
+	}
+
+	// Add rules - include both mode-specific and generic rules if they exist
+	const rules = []
+
+	// Add mode-specific rules first if they exist
+	if (modeRuleContent && modeRuleContent.trim()) {
+		const modeRuleFile = `.clinerules-${mode}`
+		rules.push(`# Rules from ${modeRuleFile}:\n${modeRuleContent}`)
 	}
 
-	if (customInstructions.trim()) {
-		allInstructions.push(customInstructions.trim())
+	// Add generic rules
+	const genericRuleContent = await loadRuleFiles(cwd)
+	if (genericRuleContent && genericRuleContent.trim()) {
+		rules.push(genericRuleContent.trim())
 	}
 
-	if (ruleFileContent && ruleFileContent.trim()) {
-		allInstructions.push(ruleFileContent.trim())
+	if (rules.length > 0) {
+		sections.push(`Rules:\n\n${rules.join("\n\n")}`)
 	}
 
-	const joinedInstructions = allInstructions.join("\n\n")
+	const joinedSections = sections.join("\n\n")
 
-	return joinedInstructions
+	return joinedSections
 		? `
 ====
 
@@ -52,6 +94,6 @@ USER'S CUSTOM INSTRUCTIONS
 
 The following additional instructions are provided by the user, and should be followed to the best of your ability without interfering with the TOOL USE guidelines.
 
-${joinedInstructions}`
+${joinedSections}`
 		: ""
 }

src/core/prompts/sections/index.ts

@@ -6,3 +6,4 @@ export { getSharedToolUseSection } from "./tool-use"
 export { getMcpServersSection } from "./mcp-servers"
 export { getToolUseGuidelinesSection } from "./tool-use-guidelines"
 export { getCapabilitiesSection } from "./capabilities"
+export { getModesSection } from "./modes"

src/core/prompts/sections/modes.ts

@@ -0,0 +1,45 @@
+import * as path from "path"
+import * as vscode from "vscode"
+import { promises as fs } from "fs"
+import { modes, ModeConfig } from "../../../shared/modes"
+
+export async function getModesSection(context: vscode.ExtensionContext): Promise<string> {
+	const settingsDir = path.join(context.globalStorageUri.fsPath, "settings")
+	await fs.mkdir(settingsDir, { recursive: true })
+	const customModesPath = path.join(settingsDir, "cline_custom_modes.json")
+
+	return `====
+
+MODES
+
+- When referring to modes, always use their display names. The built-in modes are:
+${modes.map((mode: ModeConfig) => `  * "${mode.name}" mode - ${mode.roleDefinition.split(".")[0]}`).join("\n")}
+  Custom modes will be referred to by their configured name property.
+
+- Custom modes can be configured by creating or editing the custom modes file at '${customModesPath}'. The following fields are required and must not be empty:
+  * slug: A valid slug (lowercase letters, numbers, and hyphens). Must be unique, and shorter is better.
+  * name: The display name for the mode
+  * roleDefinition: A detailed description of the mode's role and capabilities
+  * groups: Array of allowed tool groups (can be empty)
+
+The customInstructions field is optional.
+
+The file should follow this structure:
+{
+ "customModes": [
+   {
+     "slug": "designer", // Required: unique slug with lowercase letters, numbers, and hyphens
+     "name": "Designer", // Required: mode display name
+     "roleDefinition": "You are Roo, a UI/UX expert specializing in design systems and frontend development. Your expertise includes:\n- Creating and maintaining design systems\n- Implementing responsive and accessible web interfaces\n- Working with CSS, HTML, and modern frontend frameworks\n- Ensuring consistent user experiences across platforms", // Required: non-empty
+     "groups": [ // Required: array of tool groups (can be empty)
+       "read",    // Read files group (read_file, search_files, list_files, list_code_definition_names)
+       "edit",    // Edit files group (write_to_file, apply_diff)
+       "browser", // Browser group (browser_action)
+       "command", // Command group (execute_command)
+       "mcp"     // MCP group (use_mcp_tool, access_mcp_resource)
+     ],
+     "customInstructions": "Additional instructions for the Designer mode" // Optional
+    }
+  ]
+}`
+}

src/core/prompts/sections/rules.ts

@@ -1,6 +1,16 @@
 import { DiffStrategy } from "../../diff/DiffStrategy"
+import { modes, ModeConfig } from "../../../shared/modes"
+import * as vscode from "vscode"
+import * as path from "path"
 
-export function getRulesSection(cwd: string, supportsComputerUse: boolean, diffStrategy?: DiffStrategy): string {
+export function getRulesSection(
+	cwd: string,
+	supportsComputerUse: boolean,
+	diffStrategy?: DiffStrategy,
+	context?: vscode.ExtensionContext,
+): string {
+	const settingsDir = context ? path.join(context.globalStorageUri.fsPath, "settings") : "<settings directory>"
+	const customModesPath = path.join(settingsDir, "cline_custom_modes.json")
 	return `====
 
 RULES
@@ -11,7 +21,11 @@ RULES
 - Before using the execute_command tool, you must first think about the SYSTEM INFORMATION context provided to understand the user's environment and tailor your commands to ensure they are compatible with their system. You must also consider if the command you need to run should be executed in a specific directory outside of the current working directory '${cwd.toPosix()}', and if so prepend with \`cd\`'ing into that directory && then executing the command (as one command since you are stuck operating from '${cwd.toPosix()}'). For example, if you needed to run \`npm install\` in a project outside of '${cwd.toPosix()}', you would need to prepend with a \`cd\` i.e. pseudocode for this would be \`cd (path to project) && (command, in this case npm install)\`.
 - When using the search_files tool, craft your regex patterns carefully to balance specificity and flexibility. Based on the user's task you may use it to find code patterns, TODO comments, function definitions, or any text-based information across the project. The results include context, so analyze the surrounding code to better understand the matches. Leverage the search_files tool in combination with other tools for more comprehensive analysis. For example, use it to find specific code patterns, then use read_file to examine the full context of interesting matches before using write_to_file to make informed changes.
 - When creating a new project (such as an app, website, or any software project), organize all new files within a dedicated project directory unless the user specifies otherwise. Use appropriate file paths when writing files, as the write_to_file tool will automatically create any necessary directories. Structure the project logically, adhering to best practices for the specific type of project being created. Unless otherwise specified, new projects should be easily run without additional setup, for example most projects can be built in HTML, CSS, and JavaScript - which you can open in a browser.
-${diffStrategy ? "- You should use apply_diff instead of write_to_file when making changes to existing files since it is much faster and easier to apply a diff than to write the entire file again. Only use write_to_file to edit files when apply_diff has failed repeatedly to apply the diff." : "- When you want to modify a file, use the write_to_file tool directly with the desired content. You do not need to display the content before using the tool."}
+${
+	diffStrategy
+		? "- You should use apply_diff instead of write_to_file when making changes to existing files since it is much faster and easier to apply a diff than to write the entire file again. Only use write_to_file to edit files when apply_diff has failed repeatedly to apply the diff."
+		: "- When you want to modify a file, use the write_to_file tool directly with the desired content. You do not need to display the content before using the tool."
+}
 - Be sure to consider the type of project (e.g. Python, JavaScript, web application) when determining the appropriate structure and files to include. Also consider what files may be most relevant to accomplishing the task, for example looking at a project's manifest file would help you understand the project's dependencies, which you could incorporate into any code you write.
 - When making changes to code, always consider the context in which the code is being used. Ensure that your changes are compatible with the existing codebase and that they follow the project's coding standards and best practices.
 - Do not ask for more information than necessary. Use the tools provided to accomplish the user's request efficiently and effectively. When you've completed your task, you must use the attempt_completion tool to present the result to the user. The user may provide feedback, which you can use to make improvements and try again.

src/core/prompts/sections/system-info.ts

@@ -1,9 +1,15 @@
 import defaultShell from "default-shell"
 import os from "os"
 import osName from "os-name"
+import { Mode, ModeConfig, getModeBySlug, defaultModeSlug, isToolAllowedForMode } from "../../../shared/modes"
 
-export function getSystemInfoSection(cwd: string): string {
-	return `====
+export function getSystemInfoSection(cwd: string, currentMode: Mode, customModes?: ModeConfig[]): string {
+	const findModeBySlug = (slug: string, modes?: ModeConfig[]) => modes?.find((m) => m.slug === slug)
+
+	const currentModeName = findModeBySlug(currentMode, customModes)?.name || currentMode
+	const codeModeName = findModeBySlug(defaultModeSlug, customModes)?.name || "Code"
+
+	let details = `====
 
 SYSTEM INFORMATION
 
@@ -13,4 +19,6 @@ Home Directory: ${os.homedir().toPosix()}
 Current Working Directory: ${cwd.toPosix()}
 
 When the user initially gives you a task, a recursive list of all filepaths in the current working directory ('/test/path') will be included in environment_details. This provides an overview of the project's file structure, offering key insights into the project from directory/file names (how developers conceptualize and organize their code) and file extensions (the language used). This can also guide decision-making on which files to explore further. If you need to further explore directories such as outside the current working directory, you can use the list_files tool. If you pass 'true' for the recursive parameter, it will list files recursively. Otherwise, it will list files at the top level, which is better suited for generic directories where you don't necessarily need the nested structure, like the Desktop.`
+
+	return details
 }

src/core/prompts/system.ts

@@ -1,7 +1,17 @@
-import { Mode, modes, CustomPrompts, PromptComponent, getRoleDefinition, defaultModeSlug } from "../../shared/modes"
+import {
+	Mode,
+	modes,
+	CustomModePrompts,
+	PromptComponent,
+	getRoleDefinition,
+	defaultModeSlug,
+	ModeConfig,
+	getModeBySlug,
+} from "../../shared/modes"
 import { DiffStrategy } from "../diff/DiffStrategy"
 import { McpHub } from "../../services/mcp/McpHub"
 import { getToolDescriptionsForMode } from "./tools"
+import * as vscode from "vscode"
 import {
 	getRulesSection,
 	getSystemInfoSection,
@@ -10,88 +20,14 @@ import {
 	getMcpServersSection,
 	getToolUseGuidelinesSection,
 	getCapabilitiesSection,
+	getModesSection,
+	addCustomInstructions,
 } from "./sections"
 import fs from "fs/promises"
 import path from "path"
 
-async function loadRuleFiles(cwd: string, mode: Mode): Promise<string> {
-	let combinedRules = ""
-
-	// First try mode-specific rules
-	const modeSpecificFile = `.clinerules-${mode}`
-	try {
-		const content = await fs.readFile(path.join(cwd, modeSpecificFile), "utf-8")
-		if (content.trim()) {
-			combinedRules += `\n# Rules from ${modeSpecificFile}:\n${content.trim()}\n`
-		}
-	} catch (err) {
-		// Silently skip if file doesn't exist
-		if ((err as NodeJS.ErrnoException).code !== "ENOENT") {
-			throw err
-		}
-	}
-
-	// Then try generic rules files
-	const genericRuleFiles = [".clinerules"]
-	for (const file of genericRuleFiles) {
-		try {
-			const content = await fs.readFile(path.join(cwd, file), "utf-8")
-			if (content.trim()) {
-				combinedRules += `\n# Rules from ${file}:\n${content.trim()}\n`
-			}
-		} catch (err) {
-			// Silently skip if file doesn't exist
-			if ((err as NodeJS.ErrnoException).code !== "ENOENT") {
-				throw err
-			}
-		}
-	}
-
-	return combinedRules
-}
-
-interface State {
-	customInstructions?: string
-	customPrompts?: CustomPrompts
-	preferredLanguage?: string
-}
-
-export async function addCustomInstructions(state: State, cwd: string, mode: Mode = defaultModeSlug): Promise<string> {
-	const ruleFileContent = await loadRuleFiles(cwd, mode)
-	const allInstructions = []
-
-	if (state.preferredLanguage) {
-		allInstructions.push(`You should always speak and think in the ${state.preferredLanguage} language.`)
-	}
-
-	if (state.customInstructions?.trim()) {
-		allInstructions.push(state.customInstructions.trim())
-	}
-
-	const customPrompt = state.customPrompts?.[mode]
-	if (typeof customPrompt === "object" && customPrompt?.customInstructions?.trim()) {
-		allInstructions.push(customPrompt.customInstructions.trim())
-	}
-
-	if (ruleFileContent && ruleFileContent.trim()) {
-		allInstructions.push(ruleFileContent.trim())
-	}
-
-	const joinedInstructions = allInstructions.join("\n\n")
-
-	return joinedInstructions
-		? `
-====
-
-USER'S CUSTOM INSTRUCTIONS
-
-The following additional instructions are provided by the user, and should be followed to the best of your ability without interfering with the TOOL USE guidelines.
-
-${joinedInstructions}`
-		: ""
-}
-
 async function generatePrompt(
+	context: vscode.ExtensionContext,
 	cwd: string,
 	supportsComputerUse: boolean,
 	mode: Mode,
@@ -99,37 +35,78 @@ async function generatePrompt(
 	diffStrategy?: DiffStrategy,
 	browserViewportSize?: string,
 	promptComponent?: PromptComponent,
+	customModeConfigs?: ModeConfig[],
+	globalCustomInstructions?: string,
+	preferredLanguage?: string,
+	diffEnabled?: boolean,
 ): Promise<string> {
-	const basePrompt = `${promptComponent?.roleDefinition || getRoleDefinition(mode)}
+	if (!context) {
+		throw new Error("Extension context is required for generating system prompt")
+	}
+
+	// If diff is disabled, don't pass the diffStrategy
+	const effectiveDiffStrategy = diffEnabled ? diffStrategy : undefined
+
+	const [mcpServersSection, modesSection] = await Promise.all([
+		getMcpServersSection(mcpHub, effectiveDiffStrategy),
+		getModesSection(context),
+	])
+
+	// Get the full mode config to ensure we have the role definition
+	const modeConfig = getModeBySlug(mode, customModeConfigs) || modes.find((m) => m.slug === mode) || modes[0]
+	const roleDefinition = promptComponent?.roleDefinition || modeConfig.roleDefinition
+
+	const basePrompt = `${roleDefinition}
 
 ${getSharedToolUseSection()}
 
-${getToolDescriptionsForMode(mode, cwd, supportsComputerUse, diffStrategy, browserViewportSize, mcpHub)}
+${getToolDescriptionsForMode(
+	mode,
+	cwd,
+	supportsComputerUse,
+	effectiveDiffStrategy,
+	browserViewportSize,
+	mcpHub,
+	customModeConfigs,
+)}
 
 ${getToolUseGuidelinesSection()}
 
-${await getMcpServersSection(mcpHub, diffStrategy)}
+${mcpServersSection}
+
+${getCapabilitiesSection(cwd, supportsComputerUse, mcpHub, effectiveDiffStrategy)}
 
-${getCapabilitiesSection(cwd, supportsComputerUse, mcpHub, diffStrategy)}
+${modesSection}
 
-${getRulesSection(cwd, supportsComputerUse, diffStrategy)}
+${getRulesSection(cwd, supportsComputerUse, diffStrategy, context)}
 
-${getSystemInfoSection(cwd)}
+${getSystemInfoSection(cwd, mode, customModeConfigs)}
 
-${getObjectiveSection()}`
+${getObjectiveSection()}
+
+${await addCustomInstructions(promptComponent?.customInstructions || modeConfig.customInstructions || "", globalCustomInstructions || "", cwd, mode, { preferredLanguage })}`
 
 	return basePrompt
 }
 
 export const SYSTEM_PROMPT = async (
+	context: vscode.ExtensionContext,
 	cwd: string,
 	supportsComputerUse: boolean,
 	mcpHub?: McpHub,
 	diffStrategy?: DiffStrategy,
 	browserViewportSize?: string,
 	mode: Mode = defaultModeSlug,
-	customPrompts?: CustomPrompts,
-) => {
+	customModePrompts?: CustomModePrompts,
+	customModes?: ModeConfig[],
+	globalCustomInstructions?: string,
+	preferredLanguage?: string,
+	diffEnabled?: boolean,
+): Promise<string> => {
+	if (!context) {
+		throw new Error("Extension context is required for generating system prompt")
+	}
+
 	const getPromptComponent = (value: unknown) => {
 		if (typeof value === "object" && value !== null) {
 			return value as PromptComponent
@@ -137,17 +114,26 @@ export const SYSTEM_PROMPT = async (
 		return undefined
 	}
 
-	// Use default mode if not found
-	const currentMode = modes.find((m) => m.slug === mode) || modes[0]
-	const promptComponent = getPromptComponent(customPrompts?.[currentMode.slug])
+	// Check if it's a custom mode
+	const promptComponent = getPromptComponent(customModePrompts?.[mode])
+	// Get full mode config from custom modes or fall back to built-in modes
+	const currentMode = getModeBySlug(mode, customModes) || modes.find((m) => m.slug === mode) || modes[0]
+
+	// If diff is disabled, don't pass the diffStrategy
+	const effectiveDiffStrategy = diffEnabled ? diffStrategy : undefined
 
 	return generatePrompt(
+		context,
 		cwd,
 		supportsComputerUse,
 		currentMode.slug,
 		mcpHub,
-		diffStrategy,
+		effectiveDiffStrategy,
 		browserViewportSize,
 		promptComponent,
+		customModes,
+		globalCustomInstructions,
+		preferredLanguage,
+		diffEnabled,
 	)
 }

src/core/prompts/tools/index.ts

@@ -11,7 +11,8 @@ import { getUseMcpToolDescription } from "./use-mcp-tool"
 import { getAccessMcpResourceDescription } from "./access-mcp-resource"
 import { DiffStrategy } from "../../diff/DiffStrategy"
 import { McpHub } from "../../../services/mcp/McpHub"
-import { Mode, ToolName, getModeConfig, isToolAllowedForMode } from "../../../shared/modes"
+import { Mode, ModeConfig, getModeConfig, isToolAllowedForMode } from "../../../shared/modes"
+import { ToolName, getToolName, getToolOptions, TOOL_GROUPS, ALWAYS_AVAILABLE_TOOLS } from "../../../shared/tool-groups"
 import { ToolArgs } from "./types"
 
 // Map of tool names to their description functions
@@ -38,8 +39,9 @@ export function getToolDescriptionsForMode(
 	diffStrategy?: DiffStrategy,
 	browserViewportSize?: string,
 	mcpHub?: McpHub,
+	customModes?: ModeConfig[],
 ): string {
-	const config = getModeConfig(mode)
+	const config = getModeConfig(mode, customModes)
 	const args: ToolArgs = {
 		cwd,
 		supportsComputerUse,
@@ -48,16 +50,30 @@ export function getToolDescriptionsForMode(
 		mcpHub,
 	}
 
-	// Map tool descriptions in the exact order specified in the mode's tools array
-	const descriptions = config.tools.map(([toolName, toolOptions]) => {
+	const tools = new Set<string>()
+
+	// Add tools from mode's groups
+	config.groups.forEach((group) => {
+		TOOL_GROUPS[group].forEach((tool) => {
+			if (isToolAllowedForMode(tool as ToolName, mode, customModes ?? [])) {
+				tools.add(tool)
+			}
+		})
+	})
+
+	// Add always available tools
+	ALWAYS_AVAILABLE_TOOLS.forEach((tool) => tools.add(tool))
+
+	// Map tool descriptions for allowed tools
+	const descriptions = Array.from(tools).map((toolName) => {
 		const descriptionFn = toolDescriptionMap[toolName]
-		if (!descriptionFn || !isToolAllowedForMode(toolName as ToolName, mode)) {
+		if (!descriptionFn) {
 			return undefined
 		}
 
 		return descriptionFn({
 			...args,
-			toolOptions,
+			toolOptions: undefined, // No tool options in group-based approach
 		})
 	})
 

src/core/prompts/types.ts

@@ -1,52 +0,0 @@
-import { Mode } from "../../shared/modes"
-
-export type { Mode }
-
-export type ToolName =
-	| "execute_command"
-	| "read_file"
-	| "write_to_file"
-	| "apply_diff"
-	| "search_files"
-	| "list_files"
-	| "list_code_definition_names"
-	| "browser_action"
-	| "use_mcp_tool"
-	| "access_mcp_resource"
-	| "ask_followup_question"
-	| "attempt_completion"
-
-export const CODE_TOOLS: ToolName[] = [
-	"execute_command",
-	"read_file",
-	"write_to_file",
-	"apply_diff",
-	"search_files",
-	"list_files",
-	"list_code_definition_names",
-	"browser_action",
-	"use_mcp_tool",
-	"access_mcp_resource",
-	"ask_followup_question",
-	"attempt_completion",
-]
-
-export const ARCHITECT_TOOLS: ToolName[] = [
-	"read_file",
-	"search_files",
-	"list_files",
-	"list_code_definition_names",
-	"ask_followup_question",
-	"attempt_completion",
-]
-
-export const ASK_TOOLS: ToolName[] = [
-	"read_file",
-	"search_files",
-	"list_files",
-	"browser_action",
-	"use_mcp_tool",
-	"access_mcp_resource",
-	"ask_followup_question",
-	"attempt_completion",
-]

src/core/tool-lists.ts

@@ -1,32 +0,0 @@
-// Shared tools for architect and ask modes - read-only operations plus MCP and browser tools
-export const READONLY_ALLOWED_TOOLS = [
-	"read_file",
-	"search_files",
-	"list_files",
-	"list_code_definition_names",
-	"browser_action",
-	"use_mcp_tool",
-	"access_mcp_resource",
-	"ask_followup_question",
-	"attempt_completion",
-] as const
-
-// Code mode has access to all tools
-export const CODE_ALLOWED_TOOLS = [
-	"execute_command",
-	"read_file",
-	"write_to_file",
-	"apply_diff",
-	"search_files",
-	"list_files",
-	"list_code_definition_names",
-	"browser_action",
-	"use_mcp_tool",
-	"access_mcp_resource",
-	"ask_followup_question",
-	"attempt_completion",
-] as const
-
-// Tool name types for type safety
-export type ReadOnlyToolName = (typeof READONLY_ALLOWED_TOOLS)[number]
-export type ToolName = (typeof CODE_ALLOWED_TOOLS)[number]

src/core/webview/ClineProvider.ts

@@ -1,4 +1,5 @@
 import { Anthropic } from "@anthropic-ai/sdk"
+import delay from "delay"
 import axios from "axios"
 import fs from "fs/promises"
 import os from "os"
@@ -10,15 +11,24 @@ import { downloadTask } from "../../integrations/misc/export-markdown"
 import { openFile, openImage } from "../../integrations/misc/open-file"
 import { selectImages } from "../../integrations/misc/process-images"
 import { getTheme } from "../../integrations/theme/getTheme"
+import { getDiffStrategy } from "../diff/DiffStrategy"
 import WorkspaceTracker from "../../integrations/workspace/WorkspaceTracker"
 import { McpHub } from "../../services/mcp/McpHub"
 import { ApiConfiguration, ApiProvider, ModelInfo } from "../../shared/api"
 import { findLast } from "../../shared/array"
 import { ApiConfigMeta, ExtensionMessage } from "../../shared/ExtensionMessage"
 import { HistoryItem } from "../../shared/HistoryItem"
-import { WebviewMessage, PromptMode } from "../../shared/WebviewMessage"
-import { defaultModeSlug, defaultPrompts } from "../../shared/modes"
-import { SYSTEM_PROMPT, addCustomInstructions } from "../prompts/system"
+import { WebviewMessage } from "../../shared/WebviewMessage"
+import {
+	Mode,
+	modes,
+	CustomModePrompts,
+	PromptComponent,
+	ModeConfig,
+	defaultModeSlug,
+	getModeBySlug,
+} from "../../shared/modes"
+import { SYSTEM_PROMPT } from "../prompts/system"
 import { fileExistsAtPath } from "../../utils/fs"
 import { Cline } from "../Cline"
 import { openMention } from "../mentions"
@@ -26,10 +36,13 @@ import { getNonce } from "./getNonce"
 import { getUri } from "./getUri"
 import { playSound, setSoundEnabled, setSoundVolume } from "../../utils/sound"
 import { checkExistKey } from "../../shared/checkExistApiConfig"
-import { enhancePrompt } from "../../utils/enhance-prompt"
+import { singleCompletionHandler } from "../../utils/single-completion-handler"
 import { getCommitInfo, searchCommits, getWorkingState } from "../../utils/git"
 import { ConfigManager } from "../config/ConfigManager"
-import { Mode, modes, CustomPrompts, PromptComponent, enhance } from "../../shared/modes"
+import { CustomModesManager } from "../config/CustomModesManager"
+import { CustomSupportPrompts, supportPrompt } from "../../shared/support-prompt"
+
+import { ACTION_NAMES } from "../CodeActionProvider"
 
 /*
 https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts
@@ -69,6 +82,8 @@ type GlobalStateKey =
 	| "taskHistory"
 	| "openAiBaseUrl"
 	| "openAiModelId"
+	| "openAiCustomModelInfo"
+	| "openAiUseAzure"
 	| "ollamaModelId"
 	| "ollamaBaseUrl"
 	| "lmStudioModelId"
@@ -98,10 +113,12 @@ type GlobalStateKey =
 	| "vsCodeLmModelSelector"
 	| "mode"
 	| "modeApiConfigs"
-	| "customPrompts"
+	| "customModePrompts"
+	| "customSupportPrompts"
 	| "enhancementApiConfigId"
 	| "experimentalDiffStrategy"
 	| "autoApprovalEnabled"
+	| "customModes" // Array of custom modes
 
 export const GlobalFileNames = {
 	apiConversationHistory: "api_conversation_history.json",
@@ -120,8 +137,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 	private cline?: Cline
 	private workspaceTracker?: WorkspaceTracker
 	mcpHub?: McpHub
-	private latestAnnouncementId = "jan-13-2025-custom-prompt" // update to some unique identifier when we add a new announcement
+	private latestAnnouncementId = "jan-21-2025-custom-modes" // update to some unique identifier when we add a new announcement
 	configManager: ConfigManager
+	customModesManager: CustomModesManager
 
 	constructor(
 		readonly context: vscode.ExtensionContext,
@@ -132,6 +150,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		this.workspaceTracker = new WorkspaceTracker(this)
 		this.mcpHub = new McpHub(this)
 		this.configManager = new ConfigManager(this.context)
+		this.customModesManager = new CustomModesManager(this.context, async () => {
+			await this.postStateToWebview()
+		})
 	}
 
 	/*
@@ -157,6 +178,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		this.workspaceTracker = undefined
 		this.mcpHub?.dispose()
 		this.mcpHub = undefined
+		this.customModesManager?.dispose()
 		this.outputChannel.appendLine("Disposed all disposables")
 		ClineProvider.activeInstances.delete(this)
 	}
@@ -165,6 +187,32 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		return findLast(Array.from(this.activeInstances), (instance) => instance.view?.visible === true)
 	}
 
+	public static async handleCodeAction(
+		promptType: keyof typeof ACTION_NAMES,
+		params: Record<string, string | any[]>,
+	): Promise<void> {
+		let visibleProvider = ClineProvider.getVisibleInstance()
+
+		// If no visible provider, try to show the sidebar view
+		if (!visibleProvider) {
+			await vscode.commands.executeCommand("roo-cline.SidebarProvider.focus")
+			// Wait briefly for the view to become visible
+			await delay(100)
+			visibleProvider = ClineProvider.getVisibleInstance()
+		}
+
+		// If still no visible provider, return
+		if (!visibleProvider) {
+			return
+		}
+
+		const { customSupportPrompts } = await visibleProvider.getState()
+
+		const prompt = supportPrompt.create(promptType, params, customSupportPrompts)
+
+		await visibleProvider.initClineWithTask(prompt)
+	}
+
 	resolveWebviewView(
 		webviewView: vscode.WebviewView | vscode.WebviewPanel,
 		//context: vscode.WebviewViewResolveContext<unknown>, used to recreate a deallocated webview, but we don't need this since we use retainContextWhenHidden
@@ -251,7 +299,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		await this.clearTask()
 		const {
 			apiConfiguration,
-			customPrompts,
+			customModePrompts,
 			diffEnabled,
 			fuzzyMatchThreshold,
 			mode,
@@ -259,9 +307,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			experimentalDiffStrategy,
 		} = await this.getState()
 
-		const modePrompt = customPrompts?.[mode]
-		const modeInstructions = typeof modePrompt === "object" ? modePrompt.customInstructions : undefined
-		const effectiveInstructions = [globalInstructions, modeInstructions].filter(Boolean).join("\n\n")
+		const modePrompt = customModePrompts?.[mode] as PromptComponent
+		const effectiveInstructions = [globalInstructions, modePrompt?.customInstructions].filter(Boolean).join("\n\n")
 
 		this.cline = new Cline(
 			this,
@@ -280,7 +327,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		await this.clearTask()
 		const {
 			apiConfiguration,
-			customPrompts,
+			customModePrompts,
 			diffEnabled,
 			fuzzyMatchThreshold,
 			mode,
@@ -288,9 +335,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			experimentalDiffStrategy,
 		} = await this.getState()
 
-		const modePrompt = customPrompts?.[mode]
-		const modeInstructions = typeof modePrompt === "object" ? modePrompt.customInstructions : undefined
-		const effectiveInstructions = [globalInstructions, modeInstructions].filter(Boolean).join("\n\n")
+		const modePrompt = customModePrompts?.[mode] as PromptComponent
+		const effectiveInstructions = [globalInstructions, modePrompt?.customInstructions].filter(Boolean).join("\n\n")
 
 		this.cline = new Cline(
 			this,
@@ -379,7 +425,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
             <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; script-src 'nonce-${nonce}';">
             <link rel="stylesheet" type="text/css" href="${stylesUri}">
 			<link href="${codiconsUri}" rel="stylesheet" />
-            <title>Cline</title>
+            <title>Roo Code</title>
           </head>
           <body>
             <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -401,6 +447,10 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			async (message: WebviewMessage) => {
 				switch (message.type) {
 					case "webviewDidLaunch":
+						// Load custom modes first
+						const customModes = await this.customModesManager.getCustomModes()
+						await this.updateGlobalState("customModes", customModes)
+
 						this.postStateToWebview()
 						this.workspaceTracker?.initializeFilePaths() // don't await
 						getTheme().then((theme) =>
@@ -638,6 +688,13 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						}
 						break
 					}
+					case "openCustomModesSettings": {
+						const customModesFilePath = await this.customModesManager.getCustomModesFilePath()
+						if (customModesFilePath) {
+							openFile(customModesFilePath)
+						}
+						break
+					}
 					case "restartMcpServer": {
 						try {
 							await this.mcpHub?.restartConnection(message.text!)
@@ -757,47 +814,65 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 
 						await this.postStateToWebview()
 						break
-					case "updateEnhancedPrompt":
-						const existingPrompts = (await this.getGlobalState("customPrompts")) || {}
+					case "updateSupportPrompt":
+						try {
+							if (Object.keys(message?.values ?? {}).length === 0) {
+								return
+							}
+
+							const existingPrompts = (await this.getGlobalState("customSupportPrompts")) || {}
+
+							const updatedPrompts = {
+								...existingPrompts,
+								...message.values,
+							}
 
-						const updatedPrompts = {
-							...existingPrompts,
-							enhance: message.text,
+							await this.updateGlobalState("customSupportPrompts", updatedPrompts)
+							await this.postStateToWebview()
+						} catch (error) {
+							console.error("Error update support prompt:", error)
+							vscode.window.showErrorMessage("Failed to update support prompt")
 						}
+						break
+					case "resetSupportPrompt":
+						try {
+							if (!message?.text) {
+								return
+							}
+
+							const existingPrompts = ((await this.getGlobalState("customSupportPrompts")) ||
+								{}) as Record<string, any>
 
-						await this.updateGlobalState("customPrompts", updatedPrompts)
+							const updatedPrompts = {
+								...existingPrompts,
+							}
 
-						// Get current state and explicitly include customPrompts
-						const currentState = await this.getState()
+							updatedPrompts[message.text] = undefined
 
-						const stateWithPrompts = {
-							...currentState,
-							customPrompts: updatedPrompts,
+							await this.updateGlobalState("customSupportPrompts", updatedPrompts)
+							await this.postStateToWebview()
+						} catch (error) {
+							console.error("Error reset support prompt:", error)
+							vscode.window.showErrorMessage("Failed to reset support prompt")
 						}
-
-						// Post state with prompts
-						this.view?.webview.postMessage({
-							type: "state",
-							state: stateWithPrompts,
-						})
 						break
 					case "updatePrompt":
 						if (message.promptMode && message.customPrompt !== undefined) {
-							const existingPrompts = (await this.getGlobalState("customPrompts")) || {}
+							const existingPrompts = (await this.getGlobalState("customModePrompts")) || {}
 
 							const updatedPrompts = {
 								...existingPrompts,
 								[message.promptMode]: message.customPrompt,
 							}
 
-							await this.updateGlobalState("customPrompts", updatedPrompts)
+							await this.updateGlobalState("customModePrompts", updatedPrompts)
 
-							// Get current state and explicitly include customPrompts
+							// Get current state and explicitly include customModePrompts
 							const currentState = await this.getState()
 
 							const stateWithPrompts = {
 								...currentState,
-								customPrompts: updatedPrompts,
+								customModePrompts: updatedPrompts,
 							}
 
 							// Post state with prompts
@@ -907,8 +982,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 					case "enhancePrompt":
 						if (message.text) {
 							try {
-								const { apiConfiguration, customPrompts, listApiConfigMeta, enhancementApiConfigId } =
-									await this.getState()
+								const {
+									apiConfiguration,
+									customSupportPrompts,
+									listApiConfigMeta,
+									enhancementApiConfigId,
+								} = await this.getState()
 
 								// Try to get enhancement config first, fall back to current config
 								let configToUse: ApiConfiguration = apiConfiguration
@@ -922,17 +1001,17 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 									}
 								}
 
-								const getEnhancePrompt = (value: string | PromptComponent | undefined): string => {
-									if (typeof value === "string") {
-										return value
-									}
-									return enhance.prompt // Use the constant from modes.ts which we know is a string
-								}
-								const enhancedPrompt = await enhancePrompt(
+								const enhancedPrompt = await singleCompletionHandler(
 									configToUse,
-									message.text,
-									getEnhancePrompt(customPrompts?.enhance),
+									supportPrompt.create(
+										"ENHANCE",
+										{
+											userInput: message.text,
+										},
+										customSupportPrompts,
+									),
 								)
+
 								await this.postMessageToWebview({
 									type: "enhancedPrompt",
 									text: enhancedPrompt,
@@ -950,36 +1029,46 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						try {
 							const {
 								apiConfiguration,
-								customPrompts,
+								customModePrompts,
 								customInstructions,
 								preferredLanguage,
 								browserViewportSize,
+								diffEnabled,
 								mcpEnabled,
+								fuzzyMatchThreshold,
+								experimentalDiffStrategy,
 							} = await this.getState()
+
+							// Create diffStrategy based on current model and settings
+							const diffStrategy = getDiffStrategy(
+								apiConfiguration.apiModelId || apiConfiguration.openRouterModelId || "",
+								fuzzyMatchThreshold,
+								experimentalDiffStrategy,
+							)
 							const cwd =
 								vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0) || ""
 
 							const mode = message.mode ?? defaultModeSlug
-							const instructions = await addCustomInstructions(
-								{ customInstructions, customPrompts, preferredLanguage },
-								cwd,
-								mode,
-							)
+							const customModes = await this.customModesManager.getCustomModes()
 
 							const systemPrompt = await SYSTEM_PROMPT(
+								this.context,
 								cwd,
 								apiConfiguration.openRouterModelInfo?.supportsComputerUse ?? false,
 								mcpEnabled ? this.mcpHub : undefined,
-								undefined,
+								diffStrategy,
 								browserViewportSize ?? "900x600",
 								mode,
-								customPrompts,
+								customModePrompts,
+								customModes,
+								customInstructions,
+								preferredLanguage,
+								diffEnabled,
 							)
-							const fullPrompt = instructions ? `${systemPrompt}${instructions}` : systemPrompt
 
 							await this.postMessageToWebview({
 								type: "systemPrompt",
-								text: fullPrompt,
+								text: systemPrompt,
 								mode: message.mode,
 							})
 						} catch (error) {
@@ -1117,6 +1206,34 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 							await this.cline.updateDiffStrategy(message.bool ?? false)
 						}
 						await this.postStateToWebview()
+						break
+					case "updateCustomMode":
+						if (message.modeConfig) {
+							await this.customModesManager.updateCustomMode(message.modeConfig.slug, message.modeConfig)
+							// Update state after saving the mode
+							const customModes = await this.customModesManager.getCustomModes()
+							await this.updateGlobalState("customModes", customModes)
+							await this.updateGlobalState("mode", message.modeConfig.slug)
+							await this.postStateToWebview()
+						}
+						break
+					case "deleteCustomMode":
+						if (message.slug) {
+							const answer = await vscode.window.showInformationMessage(
+								"Are you sure you want to delete this custom mode?",
+								{ modal: true },
+								"Yes",
+							)
+
+							if (answer !== "Yes") {
+								break
+							}
+
+							await this.customModesManager.deleteCustomMode(message.slug)
+							// Switch back to default mode after deletion
+							await this.updateGlobalState("mode", defaultModeSlug)
+							await this.postStateToWebview()
+						}
 				}
 			},
 			null,
@@ -1156,6 +1273,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			openAiBaseUrl,
 			openAiApiKey,
 			openAiModelId,
+			openAiCustomModelInfo,
+			openAiUseAzure,
 			ollamaModelId,
 			ollamaBaseUrl,
 			lmStudioModelId,
@@ -1191,6 +1310,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		await this.updateGlobalState("openAiBaseUrl", openAiBaseUrl)
 		await this.storeSecret("openAiApiKey", openAiApiKey)
 		await this.updateGlobalState("openAiModelId", openAiModelId)
+		await this.updateGlobalState("openAiCustomModelInfo", openAiCustomModelInfo)
+		await this.updateGlobalState("openAiUseAzure", openAiUseAzure)
 		await this.updateGlobalState("ollamaModelId", ollamaModelId)
 		await this.updateGlobalState("ollamaBaseUrl", ollamaBaseUrl)
 		await this.updateGlobalState("lmStudioModelId", lmStudioModelId)
@@ -1690,7 +1811,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			currentApiConfigName,
 			listApiConfigMeta,
 			mode,
-			customPrompts,
+			customModePrompts,
+			customSupportPrompts,
 			enhancementApiConfigId,
 			experimentalDiffStrategy,
 			autoApprovalEnabled,
@@ -1729,10 +1851,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			currentApiConfigName: currentApiConfigName ?? "default",
 			listApiConfigMeta: listApiConfigMeta ?? [],
 			mode: mode ?? defaultModeSlug,
-			customPrompts: customPrompts ?? {},
+			customModePrompts: customModePrompts ?? {},
+			customSupportPrompts: customSupportPrompts ?? {},
 			enhancementApiConfigId,
 			experimentalDiffStrategy: experimentalDiffStrategy ?? false,
 			autoApprovalEnabled: autoApprovalEnabled ?? false,
+			customModes: await this.customModesManager.getCustomModes(),
 		}
 	}
 
@@ -1808,6 +1932,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			openAiBaseUrl,
 			openAiApiKey,
 			openAiModelId,
+			openAiCustomModelInfo,
+			openAiUseAzure,
 			ollamaModelId,
 			ollamaBaseUrl,
 			lmStudioModelId,
@@ -1848,10 +1974,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			vsCodeLmModelSelector,
 			mode,
 			modeApiConfigs,
-			customPrompts,
+			customModePrompts,
+			customSupportPrompts,
 			enhancementApiConfigId,
 			experimentalDiffStrategy,
 			autoApprovalEnabled,
+			customModes,
 		] = await Promise.all([
 			this.getGlobalState("apiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("apiModelId") as Promise<string | undefined>,
@@ -1872,6 +2000,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("openAiBaseUrl") as Promise<string | undefined>,
 			this.getSecret("openAiApiKey") as Promise<string | undefined>,
 			this.getGlobalState("openAiModelId") as Promise<string | undefined>,
+			this.getGlobalState("openAiCustomModelInfo") as Promise<ModelInfo | undefined>,
+			this.getGlobalState("openAiUseAzure") as Promise<boolean | undefined>,
 			this.getGlobalState("ollamaModelId") as Promise<string | undefined>,
 			this.getGlobalState("ollamaBaseUrl") as Promise<string | undefined>,
 			this.getGlobalState("lmStudioModelId") as Promise<string | undefined>,
@@ -1912,10 +2042,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("vsCodeLmModelSelector") as Promise<vscode.LanguageModelChatSelector | undefined>,
 			this.getGlobalState("mode") as Promise<Mode | undefined>,
 			this.getGlobalState("modeApiConfigs") as Promise<Record<Mode, string> | undefined>,
-			this.getGlobalState("customPrompts") as Promise<CustomPrompts | undefined>,
+			this.getGlobalState("customModePrompts") as Promise<CustomModePrompts | undefined>,
+			this.getGlobalState("customSupportPrompts") as Promise<CustomSupportPrompts | undefined>,
 			this.getGlobalState("enhancementApiConfigId") as Promise<string | undefined>,
 			this.getGlobalState("experimentalDiffStrategy") as Promise<boolean | undefined>,
 			this.getGlobalState("autoApprovalEnabled") as Promise<boolean | undefined>,
+			this.customModesManager.getCustomModes(),
 		])
 
 		let apiProvider: ApiProvider
@@ -1953,6 +2085,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				openAiBaseUrl,
 				openAiApiKey,
 				openAiModelId,
+				openAiCustomModelInfo,
+				openAiUseAzure,
 				ollamaModelId,
 				ollamaBaseUrl,
 				lmStudioModelId,
@@ -2022,10 +2156,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			currentApiConfigName: currentApiConfigName ?? "default",
 			listApiConfigMeta: listApiConfigMeta ?? [],
 			modeApiConfigs: modeApiConfigs ?? ({} as Record<Mode, string>),
-			customPrompts: customPrompts ?? {},
+			customModePrompts: customModePrompts ?? {},
+			customSupportPrompts: customSupportPrompts ?? {},
 			enhancementApiConfigId,
 			experimentalDiffStrategy: experimentalDiffStrategy ?? false,
 			autoApprovalEnabled: autoApprovalEnabled ?? false,
+			customModes,
 		}
 	}
 
@@ -2119,6 +2255,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			await this.storeSecret(key, undefined)
 		}
 		await this.configManager.resetAllConfigs()
+		await this.customModesManager.resetCustomModes()
 		if (this.cline) {
 			this.cline.abortTask()
 			this.cline = undefined

src/core/webview/__tests__/ClineProvider.test.ts

@@ -3,6 +3,13 @@ import * as vscode from "vscode"
 import { ExtensionMessage, ExtensionState } from "../../../shared/ExtensionMessage"
 import { setSoundEnabled } from "../../../utils/sound"
 import { defaultModeSlug, modes } from "../../../shared/modes"
+import { addCustomInstructions } from "../../prompts/sections/custom-instructions"
+
+// Mock custom-instructions module
+const mockAddCustomInstructions = jest.fn()
+jest.mock("../../prompts/sections/custom-instructions", () => ({
+	addCustomInstructions: mockAddCustomInstructions,
+}))
 
 // Mock delay module
 jest.mock("delay", () => {
@@ -63,6 +70,13 @@ jest.mock(
 	{ virtual: true },
 )
 
+// Mock DiffStrategy
+jest.mock("../../diff/DiffStrategy", () => ({
+	getDiffStrategy: jest.fn().mockImplementation(() => ({
+		getToolDescription: jest.fn().mockReturnValue("apply_diff tool description"),
+	})),
+}))
+
 // Mock dependencies
 jest.mock("vscode", () => ({
 	ExtensionContext: jest.fn(),
@@ -130,7 +144,6 @@ jest.mock("../../../api", () => ({
 jest.mock("../../prompts/system", () => ({
 	SYSTEM_PROMPT: jest.fn().mockImplementation(async () => "mocked system prompt"),
 	codeMode: "code",
-	addCustomInstructions: jest.fn().mockImplementation(async () => ""),
 }))
 
 // Mock WorkspaceTracker
@@ -221,6 +234,13 @@ describe("ClineProvider", () => {
 			},
 		} as unknown as vscode.ExtensionContext
 
+		// Mock CustomModesManager
+		const mockCustomModesManager = {
+			updateCustomMode: jest.fn().mockResolvedValue(undefined),
+			getCustomModes: jest.fn().mockResolvedValue({}),
+			dispose: jest.fn(),
+		}
+
 		// Mock output channel
 		mockOutputChannel = {
 			appendLine: jest.fn(),
@@ -250,6 +270,8 @@ describe("ClineProvider", () => {
 		} as unknown as vscode.WebviewView
 
 		provider = new ClineProvider(mockContext, mockOutputChannel)
+		// @ts-ignore - accessing private property for testing
+		provider.customModesManager = mockCustomModesManager
 	})
 
 	test("constructor initializes correctly", () => {
@@ -297,6 +319,7 @@ describe("ClineProvider", () => {
 			mcpEnabled: true,
 			requestDelaySeconds: 5,
 			mode: defaultModeSlug,
+			customModes: [],
 		}
 
 		const message: ExtensionMessage = {
@@ -532,7 +555,7 @@ describe("ClineProvider", () => {
 			architect: "existing architect prompt",
 		}
 		;(mockContext.globalState.get as jest.Mock).mockImplementation((key: string) => {
-			if (key === "customPrompts") {
+			if (key === "customModePrompts") {
 				return existingPrompts
 			}
 			return undefined
@@ -546,7 +569,7 @@ describe("ClineProvider", () => {
 		})
 
 		// Verify state was updated correctly
-		expect(mockContext.globalState.update).toHaveBeenCalledWith("customPrompts", {
+		expect(mockContext.globalState.update).toHaveBeenCalledWith("customModePrompts", {
 			...existingPrompts,
 			code: "new code prompt",
 		})
@@ -556,7 +579,7 @@ describe("ClineProvider", () => {
 			expect.objectContaining({
 				type: "state",
 				state: expect.objectContaining({
-					customPrompts: {
+					customModePrompts: {
 						...existingPrompts,
 						code: "new code prompt",
 					},
@@ -565,17 +588,17 @@ describe("ClineProvider", () => {
 		)
 	})
 
-	test("customPrompts defaults to empty object", async () => {
-		// Mock globalState.get to return undefined for customPrompts
+	test("customModePrompts defaults to empty object", async () => {
+		// Mock globalState.get to return undefined for customModePrompts
 		;(mockContext.globalState.get as jest.Mock).mockImplementation((key: string) => {
-			if (key === "customPrompts") {
+			if (key === "customModePrompts") {
 				return undefined
 			}
 			return null
 		})
 
 		const state = await provider.getState()
-		expect(state.customPrompts).toEqual({})
+		expect(state.customModePrompts).toEqual({})
 	})
 
 	test("uses mode-specific custom instructions in Cline initialization", async () => {
@@ -588,7 +611,7 @@ describe("ClineProvider", () => {
 
 		jest.spyOn(provider, "getState").mockResolvedValue({
 			apiConfiguration: mockApiConfig,
-			customPrompts: {
+			customModePrompts: {
 				code: { customInstructions: modeCustomInstructions },
 			},
 			mode: "code",
@@ -628,7 +651,7 @@ describe("ClineProvider", () => {
 			},
 		}
 		mockContext.globalState.get = jest.fn((key: string) => {
-			if (key === "customPrompts") {
+			if (key === "customModePrompts") {
 				return existingPrompts
 			}
 			return undefined
@@ -645,7 +668,7 @@ describe("ClineProvider", () => {
 		})
 
 		// Verify state was updated correctly
-		expect(mockContext.globalState.update).toHaveBeenCalledWith("customPrompts", {
+		expect(mockContext.globalState.update).toHaveBeenCalledWith("customModePrompts", {
 			code: {
 				roleDefinition: "Code role",
 				customInstructions: "New instructions",
@@ -831,6 +854,13 @@ describe("ClineProvider", () => {
 		beforeEach(() => {
 			mockPostMessage.mockClear()
 			provider.resolveWebviewView(mockWebviewView)
+			// Reset and setup mock
+			mockAddCustomInstructions.mockClear()
+			mockAddCustomInstructions.mockImplementation(
+				(modeInstructions: string, globalInstructions: string, cwd: string) => {
+					return Promise.resolve(modeInstructions || globalInstructions || "")
+				},
+			)
 		})
 
 		const getMessageHandler = () => {
@@ -913,77 +943,226 @@ describe("ClineProvider", () => {
 			expect(vscode.window.showErrorMessage).toHaveBeenCalledWith("Failed to get system prompt")
 		})
 
-		test("uses mode-specific custom instructions in system prompt", async () => {
-			const systemPrompt = require("../../prompts/system")
-			const { addCustomInstructions } = systemPrompt
+		test("uses code mode custom instructions", async () => {
+			// Get the mock function
+			const mockAddCustomInstructions = (jest.requireMock("../../prompts/sections/custom-instructions") as any)
+				.addCustomInstructions
+
+			// Clear any previous calls
+			mockAddCustomInstructions.mockClear()
+
+			// Mock SYSTEM_PROMPT
+			const systemPromptModule = require("../../prompts/system")
+			jest.spyOn(systemPromptModule, "SYSTEM_PROMPT").mockImplementation(async () => {
+				await mockAddCustomInstructions("Code mode specific instructions", "", "/mock/path")
+				return "mocked system prompt"
+			})
+
+			// Trigger getSystemPrompt
+			const promptHandler = (mockWebviewView.webview.onDidReceiveMessage as jest.Mock).mock.calls[0][0]
+			await promptHandler({ type: "getSystemPrompt" })
+
+			// Verify mock was called with code mode instructions
+			expect(mockAddCustomInstructions).toHaveBeenCalledWith(
+				"Code mode specific instructions",
+				"",
+				expect.any(String),
+			)
+		})
 
-			// Mock getState to return mode-specific custom instructions
+		test("passes diffStrategy and diffEnabled to SYSTEM_PROMPT when previewing", async () => {
+			// Mock getState to return experimentalDiffStrategy, diffEnabled and fuzzyMatchThreshold
 			jest.spyOn(provider, "getState").mockResolvedValue({
 				apiConfiguration: {
 					apiProvider: "openrouter",
+					apiModelId: "test-model",
 					openRouterModelInfo: { supportsComputerUse: true },
 				},
-				customPrompts: {
-					code: { customInstructions: "Code mode specific instructions" },
-				},
+				customModePrompts: {},
 				mode: "code",
 				mcpEnabled: false,
 				browserViewportSize: "900x600",
+				experimentalDiffStrategy: true,
+				diffEnabled: true,
+				fuzzyMatchThreshold: 0.8,
 			} as any)
 
-			const messageHandler = (mockWebviewView.webview.onDidReceiveMessage as jest.Mock).mock.calls[0][0]
-			await messageHandler({ type: "getSystemPrompt", mode: "code" })
+			// Mock SYSTEM_PROMPT to verify diffStrategy and diffEnabled are passed
+			const systemPromptModule = require("../../prompts/system")
+			const systemPromptSpy = jest.spyOn(systemPromptModule, "SYSTEM_PROMPT")
 
-			// Verify addCustomInstructions was called with mode-specific instructions
-			expect(addCustomInstructions).toHaveBeenCalledWith(
-				{
-					customInstructions: undefined,
-					customPrompts: {
-						code: { customInstructions: "Code mode specific instructions" },
-					},
-					preferredLanguage: undefined,
+			// Trigger getSystemPrompt
+			const handler = getMessageHandler()
+			await handler({ type: "getSystemPrompt", mode: "code" })
+
+			// Verify SYSTEM_PROMPT was called with correct arguments
+			expect(systemPromptSpy).toHaveBeenCalledWith(
+				expect.anything(), // context
+				expect.any(String), // cwd
+				true, // supportsComputerUse
+				undefined, // mcpHub (disabled)
+				expect.objectContaining({
+					// diffStrategy
+					getToolDescription: expect.any(Function),
+				}),
+				"900x600", // browserViewportSize
+				"code", // mode
+				{}, // customModePrompts
+				{}, // customModes
+				undefined, // effectiveInstructions
+				undefined, // preferredLanguage
+				true, // diffEnabled
+			)
+
+			// Run the test again to verify it's consistent
+			await handler({ type: "getSystemPrompt", mode: "code" })
+			expect(systemPromptSpy).toHaveBeenCalledTimes(2)
+		})
+
+		test("passes diffEnabled: false to SYSTEM_PROMPT when diff is disabled", async () => {
+			// Mock getState to return diffEnabled: false
+			jest.spyOn(provider, "getState").mockResolvedValue({
+				apiConfiguration: {
+					apiProvider: "openrouter",
+					apiModelId: "test-model",
+					openRouterModelInfo: { supportsComputerUse: true },
 				},
-				expect.any(String),
-				"code",
+				customModePrompts: {},
+				mode: "code",
+				mcpEnabled: false,
+				browserViewportSize: "900x600",
+				experimentalDiffStrategy: true,
+				diffEnabled: false,
+				fuzzyMatchThreshold: 0.8,
+			} as any)
+
+			// Mock SYSTEM_PROMPT to verify diffEnabled is passed as false
+			const systemPromptModule = require("../../prompts/system")
+			const systemPromptSpy = jest.spyOn(systemPromptModule, "SYSTEM_PROMPT")
+
+			// Trigger getSystemPrompt
+			const handler = getMessageHandler()
+			await handler({ type: "getSystemPrompt", mode: "code" })
+
+			// Verify SYSTEM_PROMPT was called with diffEnabled: false
+			expect(systemPromptSpy).toHaveBeenCalledWith(
+				expect.anything(), // context
+				expect.any(String), // cwd
+				true, // supportsComputerUse
+				undefined, // mcpHub (disabled)
+				expect.objectContaining({
+					// diffStrategy
+					getToolDescription: expect.any(Function),
+				}),
+				"900x600", // browserViewportSize
+				"code", // mode
+				{}, // customModePrompts
+				{}, // customModes
+				undefined, // effectiveInstructions
+				undefined, // preferredLanguage
+				false, // diffEnabled
 			)
 		})
 
 		test("uses correct mode-specific instructions when mode is specified", async () => {
-			const systemPrompt = require("../../prompts/system")
-			const { addCustomInstructions } = systemPrompt
-
-			// Mock getState to return instructions for multiple modes
+			// Mock getState to return architect mode instructions
 			jest.spyOn(provider, "getState").mockResolvedValue({
 				apiConfiguration: {
 					apiProvider: "openrouter",
 					openRouterModelInfo: { supportsComputerUse: true },
 				},
-				customPrompts: {
-					code: { customInstructions: "Code mode instructions" },
+				customModePrompts: {
 					architect: { customInstructions: "Architect mode instructions" },
 				},
-				mode: "code",
+				mode: "architect",
 				mcpEnabled: false,
 				browserViewportSize: "900x600",
 			} as any)
 
-			const messageHandler = (mockWebviewView.webview.onDidReceiveMessage as jest.Mock).mock.calls[0][0]
+			// Mock SYSTEM_PROMPT to call addCustomInstructions
+			const systemPromptModule = require("../../prompts/system")
+			jest.spyOn(systemPromptModule, "SYSTEM_PROMPT").mockImplementation(async () => {
+				await mockAddCustomInstructions("Architect mode instructions", "", "/mock/path")
+				return "mocked system prompt"
+			})
 
-			// Request architect mode prompt
-			await messageHandler({ type: "getSystemPrompt", mode: "architect" })
+			// Resolve webview and trigger getSystemPrompt
+			provider.resolveWebviewView(mockWebviewView)
+			const architectHandler = (mockWebviewView.webview.onDidReceiveMessage as jest.Mock).mock.calls[0][0]
+			await architectHandler({ type: "getSystemPrompt" })
 
 			// Verify architect mode instructions were used
-			expect(addCustomInstructions).toHaveBeenCalledWith(
-				{
-					customInstructions: undefined,
-					customPrompts: {
-						code: { customInstructions: "Code mode instructions" },
-						architect: { customInstructions: "Architect mode instructions" },
+			expect(mockAddCustomInstructions).toHaveBeenCalledWith(
+				"Architect mode instructions",
+				"",
+				expect.any(String),
+			)
+		})
+	})
+
+	describe("updateCustomMode", () => {
+		test("updates both file and state when updating custom mode", async () => {
+			provider.resolveWebviewView(mockWebviewView)
+			const messageHandler = (mockWebviewView.webview.onDidReceiveMessage as jest.Mock).mock.calls[0][0]
+
+			// Mock CustomModesManager methods
+			provider.customModesManager = {
+				updateCustomMode: jest.fn().mockResolvedValue(undefined),
+				getCustomModes: jest.fn().mockResolvedValue({
+					"test-mode": {
+						slug: "test-mode",
+						name: "Test Mode",
+						roleDefinition: "Updated role definition",
+						groups: ["read"] as const,
 					},
-					preferredLanguage: undefined,
+				}),
+				dispose: jest.fn(),
+			} as any
+
+			// Test updating a custom mode
+			await messageHandler({
+				type: "updateCustomMode",
+				modeConfig: {
+					slug: "test-mode",
+					name: "Test Mode",
+					roleDefinition: "Updated role definition",
+					groups: ["read"] as const,
 				},
-				expect.any(String),
-				"architect",
+			})
+
+			// Verify CustomModesManager.updateCustomMode was called
+			expect(provider.customModesManager.updateCustomMode).toHaveBeenCalledWith(
+				"test-mode",
+				expect.objectContaining({
+					slug: "test-mode",
+					roleDefinition: "Updated role definition",
+				}),
+			)
+
+			// Verify state was updated
+			expect(mockContext.globalState.update).toHaveBeenCalledWith(
+				"customModes",
+				expect.objectContaining({
+					"test-mode": expect.objectContaining({
+						slug: "test-mode",
+						roleDefinition: "Updated role definition",
+					}),
+				}),
+			)
+
+			// Verify state was posted to webview
+			expect(mockPostMessage).toHaveBeenCalledWith(
+				expect.objectContaining({
+					type: "state",
+					state: expect.objectContaining({
+						customModes: expect.objectContaining({
+							"test-mode": expect.objectContaining({
+								slug: "test-mode",
+								roleDefinition: "Updated role definition",
+							}),
+						}),
+					}),
+				}),
 			)
 		})
 	})

src/extension.ts

@@ -5,6 +5,7 @@ import * as vscode from "vscode"
 import { ClineProvider } from "./core/webview/ClineProvider"
 import { createClineAPI } from "./exports"
 import "./utils/path" // necessary to have access to String.prototype.toPosix
+import { ACTION_NAMES, CodeActionProvider } from "./core/CodeActionProvider"
 import { DIFF_VIEW_URI_SCHEME } from "./integrations/editor/DiffViewProvider"
 
 /*
@@ -21,10 +22,10 @@ let outputChannel: vscode.OutputChannel
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
 export function activate(context: vscode.ExtensionContext) {
-	outputChannel = vscode.window.createOutputChannel("Roo-Cline")
+	outputChannel = vscode.window.createOutputChannel("Roo-Code")
 	context.subscriptions.push(outputChannel)
 
-	outputChannel.appendLine("Roo-Cline extension activated")
+	outputChannel.appendLine("Roo-Code extension activated")
 
 	// Get default commands from configuration
 	const defaultCommands = vscode.workspace.getConfiguration("roo-cline").get<string[]>("allowedCommands") || []
@@ -64,7 +65,7 @@ export function activate(context: vscode.ExtensionContext) {
 	)
 
 	const openClineInNewTab = async () => {
-		outputChannel.appendLine("Opening Cline in new tab")
+		outputChannel.appendLine("Opening Roo Code in new tab")
 		// (this example uses webviewProvider activation event which is necessary to deserialize cached webview, but since we use retainContextWhenHidden, we don't need to use that event)
 		// https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/src/extension.ts
 		const tabProvider = new ClineProvider(context, outputChannel)
@@ -78,7 +79,7 @@ export function activate(context: vscode.ExtensionContext) {
 		}
 		const targetCol = hasVisibleEditors ? Math.max(lastCol + 1, 1) : vscode.ViewColumn.Two
 
-		const panel = vscode.window.createWebviewPanel(ClineProvider.tabPanelId, "Cline", targetCol, {
+		const panel = vscode.window.createWebviewPanel(ClineProvider.tabPanelId, "Roo Code", targetCol, {
 			enableScripts: true,
 			retainContextWhenHidden: true,
 			localResourceRoots: [context.extensionUri],
@@ -158,10 +159,58 @@ export function activate(context: vscode.ExtensionContext) {
 	}
 	context.subscriptions.push(vscode.window.registerUriHandler({ handleUri }))
 
+	// Register code actions provider
+	context.subscriptions.push(
+		vscode.languages.registerCodeActionsProvider({ pattern: "**/*" }, new CodeActionProvider(), {
+			providedCodeActionKinds: CodeActionProvider.providedCodeActionKinds,
+		}),
+	)
+
+	// Helper function to handle code actions
+	const registerCodeAction = (
+		context: vscode.ExtensionContext,
+		command: string,
+		promptType: keyof typeof ACTION_NAMES,
+		inputPrompt?: string,
+		inputPlaceholder?: string,
+	) => {
+		let userInput: string | undefined
+
+		context.subscriptions.push(
+			vscode.commands.registerCommand(
+				command,
+				async (filePath: string, selectedText: string, diagnostics?: any[]) => {
+					if (inputPrompt) {
+						userInput = await vscode.window.showInputBox({
+							prompt: inputPrompt,
+							placeHolder: inputPlaceholder,
+						})
+					}
+
+					const params = {
+						filePath,
+						selectedText,
+						...(diagnostics ? { diagnostics } : {}),
+						...(userInput ? { userInput } : {}),
+					}
+
+					await ClineProvider.handleCodeAction(promptType, params)
+				},
+			),
+		)
+	}
+
+	// Register code action commands
+	registerCodeAction(context, "roo-cline.explainCode", "EXPLAIN")
+
+	registerCodeAction(context, "roo-cline.fixCode", "FIX")
+
+	registerCodeAction(context, "roo-cline.improveCode", "IMPROVE")
+
 	return createClineAPI(outputChannel, sidebarProvider)
 }
 
 // This method is called when your extension is deactivated
 export function deactivate() {
-	outputChannel.appendLine("Roo-Cline extension deactivated")
+	outputChannel.appendLine("Roo-Code extension deactivated")
 }

src/integrations/editor/DiffViewProvider.ts

@@ -161,17 +161,17 @@ export class DiffViewProvider {
 		Getting diagnostics before and after the file edit is a better approach than
 		automatically tracking problems in real-time. This method ensures we only
 		report new problems that are a direct result of this specific edit.
-		Since these are new problems resulting from Cline's edit, we know they're
-		directly related to the work he's doing. This eliminates the risk of Cline
+		Since these are new problems resulting from Roo's edit, we know they're
+		directly related to the work he's doing. This eliminates the risk of Roo
 		going off-task or getting distracted by unrelated issues, which was a problem
 		with the previous auto-debug approach. Some users' machines may be slow to
 		update diagnostics, so this approach provides a good balance between automation
-		and avoiding potential issues where Cline might get stuck in loops due to
+		and avoiding potential issues where Roo might get stuck in loops due to
 		outdated problem information. If no new problems show up by the time the user
 		accepts the changes, they can always debug later using the '@problems' mention.
-		This way, Cline only becomes aware of new problems resulting from his edits
+		This way, Roo only becomes aware of new problems resulting from his edits
 		and can address them accordingly. If problems don't change immediately after
-		applying a fix, Cline won't be notified, which is generally fine since the
+		applying a fix, won't be notified, which is generally fine since the
 		initial fix is usually correct and it may just take time for linters to catch up.
 		*/
 		const postDiagnostics = vscode.languages.getDiagnostics()
@@ -297,7 +297,7 @@ export class DiffViewProvider {
 					query: Buffer.from(this.originalContent ?? "").toString("base64"),
 				}),
 				uri,
-				`${fileName}: ${fileExists ? "Original ↔ Cline's Changes" : "New File"} (Editable)`,
+				`${fileName}: ${fileExists ? "Original ↔ Roo's Changes" : "New File"} (Editable)`,
 			)
 			// This may happen on very slow machines ie project idx
 			setTimeout(() => {

src/integrations/terminal/TerminalRegistry.ts

@@ -16,7 +16,7 @@ export class TerminalRegistry {
 	static createTerminal(cwd?: string | vscode.Uri | undefined): TerminalInfo {
 		const terminal = vscode.window.createTerminal({
 			cwd,
-			name: "Roo Cline",
+			name: "Roo Code",
 			iconPath: new vscode.ThemeIcon("rocket"),
 			env: {
 				PAGER: "cat",

src/integrations/terminal/__tests__/TerminalRegistry.test.ts

@@ -26,7 +26,7 @@ describe("TerminalRegistry", () => {
 
 			expect(mockCreateTerminal).toHaveBeenCalledWith({
 				cwd: "/test/path",
-				name: "Roo Cline",
+				name: "Roo Code",
 				iconPath: expect.any(Object),
 				env: {
 					PAGER: "cat",

src/services/mcp/McpHub.ts

@@ -147,7 +147,7 @@ export class McpHub {
 			// Each MCP server requires its own transport connection and has unique capabilities, configurations, and error handling. Having separate clients also allows proper scoping of resources/tools and independent server management like reconnection.
 			const client = new Client(
 				{
-					name: "Cline",
+					name: "Roo Code",
 					version: this.providerRef.deref()?.context.extension?.packageJSON?.version ?? "1.0.0",
 				},
 				{

src/shared/ExtensionMessage.ts

@@ -4,7 +4,15 @@ import { ApiConfiguration, ApiProvider, ModelInfo } from "./api"
 import { HistoryItem } from "./HistoryItem"
 import { McpServer } from "./mcp"
 import { GitCommit } from "../utils/git"
-import { Mode, CustomPrompts } from "./modes"
+import { Mode, CustomModePrompts, ModeConfig } from "./modes"
+import { CustomSupportPrompts } from "./support-prompt"
+
+export interface LanguageModelChatSelector {
+	vendor?: string
+	family?: string
+	version?: string
+	id?: string
+}
 
 // webview will hold state
 export interface ExtensionMessage {
@@ -31,6 +39,8 @@ export interface ExtensionMessage {
 		| "updatePrompt"
 		| "systemPrompt"
 		| "autoApprovalEnabled"
+		| "updateCustomMode"
+		| "deleteCustomMode"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -54,6 +64,8 @@ export interface ExtensionMessage {
 	commits?: GitCommit[]
 	listApiConfig?: ApiConfigMeta[]
 	mode?: Mode
+	customMode?: ModeConfig
+	slug?: string
 }
 
 export interface ApiConfigMeta {
@@ -71,7 +83,8 @@ export interface ExtensionState {
 	currentApiConfigName?: string
 	listApiConfigMeta?: ApiConfigMeta[]
 	customInstructions?: string
-	customPrompts?: CustomPrompts
+	customModePrompts?: CustomModePrompts
+	customSupportPrompts?: CustomSupportPrompts
 	alwaysAllowReadOnly?: boolean
 	alwaysAllowWrite?: boolean
 	alwaysAllowExecute?: boolean
@@ -96,6 +109,8 @@ export interface ExtensionState {
 	enhancementApiConfigId?: string
 	experimentalDiffStrategy?: boolean
 	autoApprovalEnabled?: boolean
+	customModes: ModeConfig[]
+	toolRequirements?: Record<string, boolean> // Map of tool names to their requirements (e.g. {"apply_diff": true} if diffEnabled)
 }
 
 export interface ClineMessage {

src/shared/WebviewMessage.ts

@@ -1,5 +1,5 @@
 import { ApiConfiguration, ApiProvider } from "./api"
-import { Mode, PromptComponent } from "./modes"
+import { Mode, PromptComponent, ModeConfig } from "./modes"
 
 export type PromptMode = Mode | "enhance"
 
@@ -68,12 +68,17 @@ export interface WebviewMessage {
 		| "requestVsCodeLmModels"
 		| "mode"
 		| "updatePrompt"
-		| "updateEnhancedPrompt"
+		| "updateSupportPrompt"
+		| "resetSupportPrompt"
 		| "getSystemPrompt"
 		| "systemPrompt"
 		| "enhancementApiConfigId"
 		| "experimentalDiffStrategy"
 		| "autoApprovalEnabled"
+		| "updateCustomMode"
+		| "deleteCustomMode"
+		| "setopenAiCustomModelInfo"
+		| "openCustomModesSettings"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse
@@ -92,6 +97,8 @@ export interface WebviewMessage {
 	dataUrls?: string[]
 	values?: Record<string, any>
 	query?: string
+	slug?: string
+	modeConfig?: ModeConfig
 }
 
 export type ClineAskResponse = "yesButtonClicked" | "noButtonClicked" | "messageResponse"

src/shared/__tests__/support-prompts.test.ts

@@ -0,0 +1,153 @@
+import { supportPrompt } from "../support-prompt"
+
+describe("Code Action Prompts", () => {
+	const testFilePath = "test/file.ts"
+	const testCode = "function test() { return true; }"
+
+	describe("EXPLAIN action", () => {
+		it("should format explain prompt correctly", () => {
+			const prompt = supportPrompt.create("EXPLAIN", {
+				filePath: testFilePath,
+				selectedText: testCode,
+			})
+
+			expect(prompt).toContain(`@/${testFilePath}`)
+			expect(prompt).toContain(testCode)
+			expect(prompt).toContain("purpose and functionality")
+			expect(prompt).toContain("Key components")
+			expect(prompt).toContain("Important patterns")
+		})
+	})
+
+	describe("FIX action", () => {
+		it("should format fix prompt without diagnostics", () => {
+			const prompt = supportPrompt.create("FIX", {
+				filePath: testFilePath,
+				selectedText: testCode,
+			})
+
+			expect(prompt).toContain(`@/${testFilePath}`)
+			expect(prompt).toContain(testCode)
+			expect(prompt).toContain("Address all detected problems")
+			expect(prompt).not.toContain("Current problems detected")
+		})
+
+		it("should format fix prompt with diagnostics", () => {
+			const diagnostics = [
+				{
+					source: "eslint",
+					message: "Missing semicolon",
+					code: "semi",
+				},
+				{
+					message: "Unused variable",
+					severity: 1,
+				},
+			]
+
+			const prompt = supportPrompt.create("FIX", {
+				filePath: testFilePath,
+				selectedText: testCode,
+				diagnostics,
+			})
+
+			expect(prompt).toContain("Current problems detected:")
+			expect(prompt).toContain("[eslint] Missing semicolon (semi)")
+			expect(prompt).toContain("[Error] Unused variable")
+			expect(prompt).toContain(testCode)
+		})
+	})
+
+	describe("IMPROVE action", () => {
+		it("should format improve prompt correctly", () => {
+			const prompt = supportPrompt.create("IMPROVE", {
+				filePath: testFilePath,
+				selectedText: testCode,
+			})
+
+			expect(prompt).toContain(`@/${testFilePath}`)
+			expect(prompt).toContain(testCode)
+			expect(prompt).toContain("Code readability")
+			expect(prompt).toContain("Performance optimization")
+			expect(prompt).toContain("Best practices")
+			expect(prompt).toContain("Error handling")
+		})
+	})
+
+	describe("ENHANCE action", () => {
+		it("should format enhance prompt correctly", () => {
+			const prompt = supportPrompt.create("ENHANCE", {
+				userInput: "test",
+			})
+
+			expect(prompt).toBe(
+				"Generate an enhanced version of this prompt (reply with only the enhanced prompt - no conversation, explanations, lead-in, bullet points, placeholders, or surrounding quotes):\n\ntest",
+			)
+			// Verify it ignores parameters since ENHANCE template doesn't use any
+			expect(prompt).not.toContain(testFilePath)
+			expect(prompt).not.toContain(testCode)
+		})
+	})
+
+	describe("get template", () => {
+		it("should return default template when no custom prompts provided", () => {
+			const template = supportPrompt.get(undefined, "EXPLAIN")
+			expect(template).toBe(supportPrompt.default.EXPLAIN)
+		})
+
+		it("should return custom template when provided", () => {
+			const customTemplate = "Custom template for explaining code"
+			const customSupportPrompts = {
+				EXPLAIN: customTemplate,
+			}
+			const template = supportPrompt.get(customSupportPrompts, "EXPLAIN")
+			expect(template).toBe(customTemplate)
+		})
+
+		it("should return default template when custom prompts does not include type", () => {
+			const customSupportPrompts = {
+				SOMETHING_ELSE: "Other template",
+			}
+			const template = supportPrompt.get(customSupportPrompts, "EXPLAIN")
+			expect(template).toBe(supportPrompt.default.EXPLAIN)
+		})
+	})
+
+	describe("create with custom prompts", () => {
+		it("should use custom template when provided", () => {
+			const customTemplate = "Custom template for ${filePath}"
+			const customSupportPrompts = {
+				EXPLAIN: customTemplate,
+			}
+
+			const prompt = supportPrompt.create(
+				"EXPLAIN",
+				{
+					filePath: testFilePath,
+					selectedText: testCode,
+				},
+				customSupportPrompts,
+			)
+
+			expect(prompt).toContain(`Custom template for ${testFilePath}`)
+			expect(prompt).not.toContain("purpose and functionality")
+		})
+
+		it("should use default template when custom prompts does not include type", () => {
+			const customSupportPrompts = {
+				EXPLAIN: "Other template",
+			}
+
+			const prompt = supportPrompt.create(
+				"EXPLAIN",
+				{
+					filePath: testFilePath,
+					selectedText: testCode,
+				},
+				customSupportPrompts,
+			)
+
+			expect(prompt).toContain("Other template")
+		})
+	})
+})

src/shared/api.ts

@@ -40,6 +40,8 @@ export interface ApiHandlerOptions {
 	openAiBaseUrl?: string
 	openAiApiKey?: string
 	openAiModelId?: string
+	openAiCustomModelInfo?: ModelInfo
+	openAiUseAzure?: boolean
 	ollamaModelId?: string
 	ollamaBaseUrl?: string
 	lmStudioModelId?: string
@@ -236,6 +238,15 @@ export const bedrockModels = {
 		inputPrice: 0.25,
 		outputPrice: 1.25,
 	},
+	"meta.llama3-3-70b-instruct-v1:0": {
+		maxTokens: 8192,
+		contextWindow: 128_000,
+		supportsImages: false,
+		supportsComputerUse: false,
+		supportsPromptCache: false,
+		inputPrice: 0.72,
+		outputPrice: 0.72,
+	},
 	"meta.llama3-2-90b-instruct-v1:0": {
 		maxTokens: 8192,
 		contextWindow: 128_000,
@@ -413,8 +424,16 @@ export const openAiModelInfoSaneDefaults: ModelInfo = {
 // Gemini
 // https://ai.google.dev/gemini-api/docs/models/gemini
 export type GeminiModelId = keyof typeof geminiModels
-export const geminiDefaultModelId: GeminiModelId = "gemini-2.0-flash-thinking-exp-1219"
+export const geminiDefaultModelId: GeminiModelId = "gemini-2.0-flash-thinking-exp-01-21"
 export const geminiModels = {
+	"gemini-2.0-flash-thinking-exp-01-21": {
+		maxTokens: 65_536,
+		contextWindow: 1_048_576,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 0,
+		outputPrice: 0,
+	},
 	"gemini-2.0-flash-thinking-exp-1219": {
 		maxTokens: 8192,
 		contextWindow: 32_767,

src/shared/modes.ts

@@ -1,10 +1,4 @@
-// Tool options for specific tools
-export type ToolOptions = {
-	string: readonly string[]
-}
-
-// Tool configuration tuple type
-export type ToolConfig = readonly [string] | readonly [string, ToolOptions]
+import { TOOL_GROUPS, ToolGroup, ALWAYS_AVAILABLE_TOOLS } from "./tool-groups"
 
 // Mode types
 export type Mode = string
@@ -14,17 +8,34 @@ export type ModeConfig = {
 	slug: string
 	name: string
 	roleDefinition: string
-	tools: readonly ToolConfig[]
+	customInstructions?: string
+	groups: readonly ToolGroup[] // Now uses groups instead of tools array
+}
+
+// Mode-specific prompts only
+export type PromptComponent = {
+	roleDefinition?: string
+	customInstructions?: string
 }
 
-// Separate enhance prompt type and definition
-export type EnhanceConfig = {
-	prompt: string
+export type CustomModePrompts = {
+	[key: string]: PromptComponent | undefined
 }
 
-export const enhance: EnhanceConfig = {
-	prompt: "Generate an enhanced version of this prompt (reply with only the enhanced prompt - no conversation, explanations, lead-in, bullet points, placeholders, or surrounding quotes):",
-} as const
+// Helper to get all tools for a mode
+export function getToolsForMode(groups: readonly ToolGroup[]): string[] {
+	const tools = new Set<string>()
+
+	// Add tools from each group
+	groups.forEach((group) => {
+		TOOL_GROUPS[group].forEach((tool) => tools.add(tool))
+	})
+
+	// Always add required tools
+	ALWAYS_AVAILABLE_TOOLS.forEach((tool) => tools.add(tool))
+
+	return Array.from(tools)
+}
 
 // Main modes configuration as an ordered array
 export const modes: readonly ModeConfig[] = [
@@ -32,55 +43,22 @@ export const modes: readonly ModeConfig[] = [
 		slug: "code",
 		name: "Code",
 		roleDefinition:
-			"You are Cline, a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices.",
-		tools: [
-			["execute_command"],
-			["read_file"],
-			["write_to_file"],
-			["apply_diff"],
-			["search_files"],
-			["list_files"],
-			["list_code_definition_names"],
-			["browser_action"],
-			["use_mcp_tool"],
-			["access_mcp_resource"],
-			["ask_followup_question"],
-			["attempt_completion"],
-		] as const,
+			"You are Roo, a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices.",
+		groups: ["read", "edit", "browser", "command", "mcp"],
 	},
 	{
 		slug: "architect",
 		name: "Architect",
 		roleDefinition:
-			"You are Cline, a software architecture expert specializing in analyzing codebases, identifying patterns, and providing high-level technical guidance. You excel at understanding complex systems, evaluating architectural decisions, and suggesting improvements while maintaining a read-only approach to the codebase. Make sure to help the user come up with a solid implementation plan for their project and don't rush to switch to implementing code.",
-		tools: [
-			["read_file"],
-			["search_files"],
-			["list_files"],
-			["list_code_definition_names"],
-			["browser_action"],
-			["use_mcp_tool"],
-			["access_mcp_resource"],
-			["ask_followup_question"],
-			["attempt_completion"],
-		] as const,
+			"You are Roo, a software architecture expert specializing in analyzing codebases, identifying patterns, and providing high-level technical guidance. You excel at understanding complex systems, evaluating architectural decisions, and suggesting improvements while maintaining a read-only approach to the codebase. Make sure to help the user come up with a solid implementation plan for their project and don't rush to switch to implementing code.",
+		groups: ["read", "browser", "mcp"],
 	},
 	{
 		slug: "ask",
 		name: "Ask",
 		roleDefinition:
-			"You are Cline, a knowledgeable technical assistant focused on answering questions and providing information about software development, technology, and related topics. You can analyze code, explain concepts, and access external resources while maintaining a read-only approach to the codebase. Make sure to answer the user's questions and don't rush to switch to implementing code.",
-		tools: [
-			["read_file"],
-			["search_files"],
-			["list_files"],
-			["list_code_definition_names"],
-			["browser_action"],
-			["use_mcp_tool"],
-			["access_mcp_resource"],
-			["ask_followup_question"],
-			["attempt_completion"],
-		] as const,
+			"You are Roo, a knowledgeable technical assistant focused on answering questions and providing information about software development, technology, and related topics. You can analyze code, explain concepts, and access external resources while maintaining a read-only approach to the codebase. Make sure to answer the user's questions and don't rush to switch to implementing code.",
+		groups: ["read", "browser", "mcp"],
 	},
 ] as const
 
@@ -88,65 +66,91 @@ export const modes: readonly ModeConfig[] = [
 export const defaultModeSlug = modes[0].slug
 
 // Helper functions
-export function getModeBySlug(slug: string): ModeConfig | undefined {
+export function getModeBySlug(slug: string, customModes?: ModeConfig[]): ModeConfig | undefined {
+	// Check custom modes first
+	const customMode = customModes?.find((mode) => mode.slug === slug)
+	if (customMode) {
+		return customMode
+	}
+	// Then check built-in modes
 	return modes.find((mode) => mode.slug === slug)
 }
 
-export function getModeConfig(slug: string): ModeConfig {
-	const mode = getModeBySlug(slug)
+export function getModeConfig(slug: string, customModes?: ModeConfig[]): ModeConfig {
+	const mode = getModeBySlug(slug, customModes)
 	if (!mode) {
 		throw new Error(`No mode found for slug: ${slug}`)
 	}
 	return mode
 }
 
-// Derive tool names from the modes configuration
-export type ToolName = (typeof modes)[number]["tools"][number][0]
-export type TestToolName = ToolName | "unknown_tool"
+// Get all available modes, with custom modes overriding built-in modes
+export function getAllModes(customModes?: ModeConfig[]): ModeConfig[] {
+	if (!customModes?.length) {
+		return [...modes]
+	}
 
-export function isToolAllowedForMode(tool: TestToolName, modeSlug: string): boolean {
-	if (tool === "unknown_tool") {
-		return false
+	// Start with built-in modes
+	const allModes = [...modes]
+
+	// Process custom modes
+	customModes.forEach((customMode) => {
+		const index = allModes.findIndex((mode) => mode.slug === customMode.slug)
+		if (index !== -1) {
+			// Override existing mode
+			allModes[index] = customMode
+		} else {
+			// Add new mode
+			allModes.push(customMode)
+		}
+	})
+
+	return allModes
+}
+
+// Check if a mode is custom or an override
+export function isCustomMode(slug: string, customModes?: ModeConfig[]): boolean {
+	return !!customModes?.some((mode) => mode.slug === slug)
+}
+
+export function isToolAllowedForMode(
+	tool: string,
+	modeSlug: string,
+	customModes: ModeConfig[],
+	toolRequirements?: Record<string, boolean>,
+): boolean {
+	// Always allow these tools
+	if (ALWAYS_AVAILABLE_TOOLS.includes(tool as any)) {
+		return true
 	}
-	const mode = getModeBySlug(modeSlug)
-	if (!mode) {
-		return false
+
+	// Check tool requirements if any exist
+	if (toolRequirements && tool in toolRequirements) {
+		if (!toolRequirements[tool]) {
+			return false
+		}
 	}
-	return mode.tools.some(([toolName]) => toolName === tool)
-}
 
-export function getToolOptions(tool: ToolName, modeSlug: string): ToolOptions | undefined {
-	const mode = getModeBySlug(modeSlug)
+	const mode = getModeBySlug(modeSlug, customModes)
 	if (!mode) {
-		return undefined
+		return false
 	}
-	const toolConfig = mode.tools.find(([toolName]) => toolName === tool)
-	return toolConfig?.[1]
-}
-
-export type PromptComponent = {
-	roleDefinition?: string
-	customInstructions?: string
-}
 
-export type CustomPrompts = {
-	[key: string]: PromptComponent | string | undefined
+	// Check if tool is in any of the mode's groups
+	return mode.groups.some((group) => TOOL_GROUPS[group].includes(tool as string))
 }
 
-// Create the defaultPrompts object with the correct type
-export const defaultPrompts: CustomPrompts = {
-	...Object.fromEntries(modes.map((mode) => [mode.slug, { roleDefinition: mode.roleDefinition }])),
-	enhance: enhance.prompt,
-} as const
+// Create the mode-specific default prompts
+export const defaultPrompts: Readonly<CustomModePrompts> = Object.freeze(
+	Object.fromEntries(modes.map((mode) => [mode.slug, { roleDefinition: mode.roleDefinition }])),
+)
 
 // Helper function to safely get role definition
-export function getRoleDefinition(modeSlug: string): string {
-	const prompt = defaultPrompts[modeSlug]
-	if (!prompt || typeof prompt === "string") {
-		throw new Error(`Invalid mode slug: ${modeSlug}`)
-	}
-	if (!prompt.roleDefinition) {
-		throw new Error(`No role definition found for mode: ${modeSlug}`)
+export function getRoleDefinition(modeSlug: string, customModes?: ModeConfig[]): string {
+	const mode = getModeBySlug(modeSlug, customModes)
+	if (!mode) {
+		console.warn(`No mode found for slug: ${modeSlug}`)
+		return ""
 	}
-	return prompt.roleDefinition
+	return mode.roleDefinition
 }

src/shared/support-prompt.ts

@@ -0,0 +1,123 @@
+// Support prompts
+type PromptParams = Record<string, string | any[]>
+
+const generateDiagnosticText = (diagnostics?: any[]) => {
+	if (!diagnostics?.length) return ""
+	return `\nCurrent problems detected:\n${diagnostics
+		.map((d) => `- [${d.source || "Error"}] ${d.message}${d.code ? ` (${d.code})` : ""}`)
+		.join("\n")}`
+}
+
+export const createPrompt = (template: string, params: PromptParams): string => {
+	let result = template
+	for (const [key, value] of Object.entries(params)) {
+		if (key === "diagnostics") {
+			result = result.replaceAll("${diagnosticText}", generateDiagnosticText(value as any[]))
+		} else {
+			result = result.replaceAll(`\${${key}}`, value as string)
+		}
+	}
+
+	// Replace any remaining user_input placeholders with empty string
+	result = result.replaceAll("${userInput}", "")
+
+	return result
+}
+
+interface SupportPromptConfig {
+	label: string
+	description: string
+	template: string
+}
+
+const supportPromptConfigs: Record<string, SupportPromptConfig> = {
+	ENHANCE: {
+		label: "Enhance Prompt",
+		description:
+			"Use prompt enhancement to get tailored suggestions or improvements for your inputs. This ensures Roo understands your intent and provides the best possible responses. Available via the ✨ icon in chat.",
+		template: `Generate an enhanced version of this prompt (reply with only the enhanced prompt - no conversation, explanations, lead-in, bullet points, placeholders, or surrounding quotes):
+
+\${userInput}`,
+	},
+	EXPLAIN: {
+		label: "Explain Code",
+		description:
+			"Get detailed explanations of code snippets, functions, or entire files. Useful for understanding complex code or learning new patterns. Available in the editor context menu (right-click on selected code).",
+		template: `Explain the following code from file path @/\${filePath}:
+\${userInput}
+
+\`\`\`
+\${selectedText}
+\`\`\`
+
+Please provide a clear and concise explanation of what this code does, including:
+1. The purpose and functionality
+2. Key components and their interactions
+3. Important patterns or techniques used`,
+	},
+	FIX: {
+		label: "Fix Issues",
+		description:
+			"Get help identifying and resolving bugs, errors, or code quality issues. Provides step-by-step guidance for fixing problems. Available in the editor context menu (right-click on selected code).",
+		template: `Fix any issues in the following code from file path @/\${filePath}
+\${diagnosticText}
+\${userInput}
+
+\`\`\`
+\${selectedText}
+\`\`\`
+
+Please:
+1. Address all detected problems listed above (if any)
+2. Identify any other potential bugs or issues
+3. Provide corrected code
+4. Explain what was fixed and why`,
+	},
+	IMPROVE: {
+		label: "Improve Code",
+		description:
+			"Receive suggestions for code optimization, better practices, and architectural improvements while maintaining functionality. Available in the editor context menu (right-click on selected code).",
+		template: `Improve the following code from file path @/\${filePath}:
+\${userInput}
+
+\`\`\`
+\${selectedText}
+\`\`\`
+
+Please suggest improvements for:
+1. Code readability and maintainability
+2. Performance optimization
+3. Best practices and patterns
+4. Error handling and edge cases
+
+Provide the improved code along with explanations for each enhancement.`,
+	},
+} as const
+
+type SupportPromptType = keyof typeof supportPromptConfigs
+
+export const supportPrompt = {
+	default: Object.fromEntries(Object.entries(supportPromptConfigs).map(([key, config]) => [key, config.template])),
+	get: (customSupportPrompts: Record<string, any> | undefined, type: SupportPromptType): string => {
+		return customSupportPrompts?.[type] ?? supportPromptConfigs[type].template
+	},
+	create: (type: SupportPromptType, params: PromptParams, customSupportPrompts?: Record<string, any>): string => {
+		const template = supportPrompt.get(customSupportPrompts, type)
+		return createPrompt(template, params)
+	},
+} as const
+
+export type { SupportPromptType }
+
+// Expose labels and descriptions for UI
+export const supportPromptLabels = Object.fromEntries(
+	Object.entries(supportPromptConfigs).map(([key, config]) => [key, config.label]),
+) as Record<SupportPromptType, string>
+
+export const supportPromptDescriptions = Object.fromEntries(
+	Object.entries(supportPromptConfigs).map(([key, config]) => [key, config.description]),
+) as Record<SupportPromptType, string>
+
+export type CustomSupportPrompts = {
+	[key: string]: string | undefined
+}

src/shared/tool-groups.ts

@@ -0,0 +1,53 @@
+// Define tool group values
+export type ToolGroupValues = readonly string[]
+
+// Map of tool slugs to their display names
+export const TOOL_DISPLAY_NAMES = {
+	execute_command: "run commands",
+	read_file: "read files",
+	write_to_file: "write files",
+	apply_diff: "apply changes",
+	search_files: "search files",
+	list_files: "list files",
+	list_code_definition_names: "list definitions",
+	browser_action: "use a browser",
+	use_mcp_tool: "use mcp tools",
+	access_mcp_resource: "access mcp resources",
+	ask_followup_question: "ask questions",
+	attempt_completion: "complete tasks",
+} as const
+
+// Define available tool groups
+export const TOOL_GROUPS: Record<string, ToolGroupValues> = {
+	read: ["read_file", "search_files", "list_files", "list_code_definition_names"],
+	edit: ["write_to_file", "apply_diff"],
+	browser: ["browser_action"],
+	command: ["execute_command"],
+	mcp: ["use_mcp_tool", "access_mcp_resource"],
+}
+
+export type ToolGroup = keyof typeof TOOL_GROUPS
+
+// Tools that are always available to all modes
+export const ALWAYS_AVAILABLE_TOOLS = ["ask_followup_question", "attempt_completion"] as const
+
+// Tool name types for type safety
+export type ToolName = keyof typeof TOOL_DISPLAY_NAMES
+
+// Tool helper functions
+export function getToolName(toolConfig: string | readonly [ToolName, ...any[]]): ToolName {
+	return typeof toolConfig === "string" ? (toolConfig as ToolName) : toolConfig[0]
+}
+
+export function getToolOptions(toolConfig: string | readonly [ToolName, ...any[]]): any {
+	return typeof toolConfig === "string" ? undefined : toolConfig[1]
+}
+
+// Display names for groups in UI
+export const GROUP_DISPLAY_NAMES: Record<ToolGroup, string> = {
+	read: "Read Files",
+	edit: "Edit Files",
+	browser: "Use Browser",
+	command: "Run Commands",
+	mcp: "Use MCP",
+}

src/test/extension.test.ts

@@ -8,8 +8,8 @@ const dotenv = require("dotenv")
 const testEnvPath = path.join(__dirname, ".test_env")
 dotenv.config({ path: testEnvPath })
 
-suite("Roo Cline Extension Test Suite", () => {
-	vscode.window.showInformationMessage("Starting Roo Cline extension tests.")
+suite("Roo Code Extension Test Suite", () => {
+	vscode.window.showInformationMessage("Starting Roo Code extension tests.")
 
 	test("Extension should be present", () => {
 		const extension = vscode.extensions.getExtension("RooVeterinaryInc.roo-cline")
@@ -123,6 +123,9 @@ suite("Roo Cline Extension Test Suite", () => {
 			"roo-cline.popoutButtonClicked",
 			"roo-cline.settingsButtonClicked",
 			"roo-cline.openInNewTab",
+			"roo-cline.explainCode",
+			"roo-cline.fixCode",
+			"roo-cline.improveCode",
 		]
 
 		for (const cmd of expectedCommands) {
@@ -133,7 +136,7 @@ suite("Roo Cline Extension Test Suite", () => {
 	test("Views should be registered", () => {
 		const view = vscode.window.createWebviewPanel(
 			"roo-cline.SidebarProvider",
-			"Roo Cline",
+			"Roo Code",
 			vscode.ViewColumn.One,
 			{},
 		)
@@ -181,17 +184,12 @@ suite("Roo Cline Extension Test Suite", () => {
 
 		// Create webview panel with development options
 		const extensionUri = extension.extensionUri
-		const panel = vscode.window.createWebviewPanel(
-			"roo-cline.SidebarProvider",
-			"Roo Cline",
-			vscode.ViewColumn.One,
-			{
-				enableScripts: true,
-				enableCommandUris: true,
-				retainContextWhenHidden: true,
-				localResourceRoots: [extensionUri],
-			},
-		)
+		const panel = vscode.window.createWebviewPanel("roo-cline.SidebarProvider", "Roo Code", vscode.ViewColumn.One, {
+			enableScripts: true,
+			enableCommandUris: true,
+			retainContextWhenHidden: true,
+			localResourceRoots: [extensionUri],
+		})
 
 		try {
 			// Initialize webview with development context

src/utils/__tests__/enhance-prompt.test.ts

@@ -1,7 +1,7 @@
-import { enhancePrompt } from "../enhance-prompt"
+import { singleCompletionHandler } from "../single-completion-handler"
 import { ApiConfiguration } from "../../shared/api"
 import { buildApiHandler, SingleCompletionHandler } from "../../api"
-import { defaultPrompts } from "../../shared/modes"
+import { supportPrompt } from "../../shared/support-prompt"
 
 // Mock the API handler
 jest.mock("../../api", () => ({
@@ -34,17 +34,29 @@ describe("enhancePrompt", () => {
 	})
 
 	it("enhances prompt using default enhancement prompt when no custom prompt provided", async () => {
-		const result = await enhancePrompt(mockApiConfig, "Test prompt")
+		const result = await singleCompletionHandler(mockApiConfig, "Test prompt")
 
 		expect(result).toBe("Enhanced prompt")
 		const handler = buildApiHandler(mockApiConfig)
-		expect((handler as any).completePrompt).toHaveBeenCalledWith(`${defaultPrompts.enhance}\n\nTest prompt`)
+		expect((handler as any).completePrompt).toHaveBeenCalledWith(`Test prompt`)
 	})
 
 	it("enhances prompt using custom enhancement prompt when provided", async () => {
 		const customEnhancePrompt = "You are a custom prompt enhancer"
-
-		const result = await enhancePrompt(mockApiConfig, "Test prompt", customEnhancePrompt)
+		const customEnhancePromptWithTemplate = customEnhancePrompt + "\n\n${userInput}"
+
+		const result = await singleCompletionHandler(
+			mockApiConfig,
+			supportPrompt.create(
+				"ENHANCE",
+				{
+					userInput: "Test prompt",
+				},
+				{
+					ENHANCE: customEnhancePromptWithTemplate,
+				},
+			),
+		)
 
 		expect(result).toBe("Enhanced prompt")
 		const handler = buildApiHandler(mockApiConfig)
@@ -52,11 +64,11 @@ describe("enhancePrompt", () => {
 	})
 
 	it("throws error for empty prompt input", async () => {
-		await expect(enhancePrompt(mockApiConfig, "")).rejects.toThrow("No prompt text provided")
+		await expect(singleCompletionHandler(mockApiConfig, "")).rejects.toThrow("No prompt text provided")
 	})
 
 	it("throws error for missing API configuration", async () => {
-		await expect(enhancePrompt({} as ApiConfiguration, "Test prompt")).rejects.toThrow(
+		await expect(singleCompletionHandler({} as ApiConfiguration, "Test prompt")).rejects.toThrow(
 			"No valid API configuration provided",
 		)
 	})
@@ -75,7 +87,7 @@ describe("enhancePrompt", () => {
 			}),
 		})
 
-		await expect(enhancePrompt(mockApiConfig, "Test prompt")).rejects.toThrow(
+		await expect(singleCompletionHandler(mockApiConfig, "Test prompt")).rejects.toThrow(
 			"The selected API provider does not support prompt enhancement",
 		)
 	})
@@ -101,7 +113,7 @@ describe("enhancePrompt", () => {
 			}),
 		} as unknown as SingleCompletionHandler)
 
-		const result = await enhancePrompt(openRouterConfig, "Test prompt")
+		const result = await singleCompletionHandler(openRouterConfig, "Test prompt")
 
 		expect(buildApiHandler).toHaveBeenCalledWith(openRouterConfig)
 		expect(result).toBe("Enhanced prompt")
@@ -121,6 +133,6 @@ describe("enhancePrompt", () => {
 			}),
 		} as unknown as SingleCompletionHandler)
 
-		await expect(enhancePrompt(mockApiConfig, "Test prompt")).rejects.toThrow("API Error")
+		await expect(singleCompletionHandler(mockApiConfig, "Test prompt")).rejects.toThrow("API Error")
 	})
 })

src/utils/enhance-prompt.ts → src/utils/single-completion-handler.ts

@@ -1,16 +1,11 @@
 import { ApiConfiguration } from "../shared/api"
 import { buildApiHandler, SingleCompletionHandler } from "../api"
-import { defaultPrompts } from "../shared/modes"
 
 /**
  * Enhances a prompt using the configured API without creating a full Cline instance or task history.
  * This is a lightweight alternative that only uses the API's completion functionality.
  */
-export async function enhancePrompt(
-	apiConfiguration: ApiConfiguration,
-	promptText: string,
-	enhancePrompt?: string,
-): Promise<string> {
+export async function singleCompletionHandler(apiConfiguration: ApiConfiguration, promptText: string): Promise<string> {
 	if (!promptText) {
 		throw new Error("No prompt text provided")
 	}
@@ -25,7 +20,5 @@ export async function enhancePrompt(
 		throw new Error("The selected API provider does not support prompt enhancement")
 	}
 
-	const enhancePromptText = enhancePrompt ?? defaultPrompts.enhance
-	const prompt = `${enhancePromptText}\n\n${promptText}`
-	return (handler as SingleCompletionHandler).completePrompt(prompt)
+	return (handler as SingleCompletionHandler).completePrompt(promptText)
 }

webview-ui/src/components/chat/Announcement.tsx

@@ -30,41 +30,37 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 				<span className="codicon codicon-close"></span>
 			</VSCodeButton>
 			<h2 style={{ margin: "0 0 8px" }}>
-				🎉{"  "}Introducing Roo Cline v{minorVersion}
+				🎉{"  "}Introducing Roo Code {minorVersion}
 			</h2>
 
-			<h3 style={{ margin: "0 0 8px" }}>Agent Modes Customization</h3>
 			<p style={{ margin: "5px 0px" }}>
-				Click the new <span className="codicon codicon-notebook" style={{ fontSize: "10px" }}></span> icon in
-				the menu bar to open the Prompts Settings and customize Agent Modes for new levels of productivity.
-				<ul style={{ margin: "4px 0 6px 20px", padding: 0 }}>
-					<li>Tailor how Roo Cline behaves in different modes: Code, Architect, and Ask.</li>
-					<li>Preview and verify your changes using the Preview System Prompt button.</li>
-				</ul>
+				Our biggest update yet is here - we're officially changing our name from Roo Cline to Roo Code! After
+				growing beyond 50,000 installations, we're ready to chart our own course. Our heartfelt thanks to
+				everyone in the Cline community who helped us reach this milestone.
 			</p>
 
-			<h3 style={{ margin: "0 0 8px" }}>Prompt Enhancement Configuration</h3>
+			<h3 style={{ margin: "12px 0 8px" }}>Custom Modes: Celebrating Our New Identity</h3>
 			<p style={{ margin: "5px 0px" }}>
-				Now available for all providers! Access it directly in the chat box by clicking the{" "}
-				<span className="codicon codicon-sparkle" style={{ fontSize: "10px" }}></span> sparkle icon next to the
-				input field. From there, you can customize the enhancement logic and provider to best suit your
-				workflow.
+				To mark this new chapter, we're introducing the power to shape Roo Code into any role you need! Create
+				specialized personas and create an entire team of agents with deeply customized prompts:
 				<ul style={{ margin: "4px 0 6px 20px", padding: 0 }}>
-					<li>Customize how prompts are enhanced for better results in your workflow.</li>
-					<li>
-						Use the sparkle icon in the chat box to select a API configuration and provider (e.g., GPT-4)
-						and configure your own enhancement logic.
-					</li>
-					<li>Test your changes instantly with the Preview Prompt Enhancement tool.</li>
+					<li>QA Engineers who write thorough test cases and catch edge cases</li>
+					<li>Product Managers who excel at user stories and feature prioritization</li>
+					<li>UI/UX Designers who craft beautiful, accessible interfaces</li>
+					<li>Code Reviewers who ensure quality and maintainability</li>
 				</ul>
+				Just click the <span className="codicon codicon-notebook" style={{ fontSize: "10px" }}></span> icon to
+				get started with Custom Modes!
 			</p>
 
+			<h3 style={{ margin: "12px 0 8px" }}>Join Us for the Next Chapter</h3>
 			<p style={{ margin: "5px 0px" }}>
-				We're very excited to see what you build with this new feature! Join us at
-				<VSCodeLink href="https://www.reddit.com/r/roocline" style={{ display: "inline" }}>
-					reddit.com/r/roocline
+				We can't wait to see how you'll push Roo Code's potential even further! Share your custom modes and join
+				the discussion at{" "}
+				<VSCodeLink href="https://www.reddit.com/r/RooCode" style={{ display: "inline" }}>
+					reddit.com/r/RooCode
 				</VSCodeLink>
-				to discuss and share feedback.
+				.
 			</p>
 		</div>
 	)

webview-ui/src/components/chat/AutoApproveMenu.tsx

@@ -209,7 +209,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 							color: "var(--vscode-descriptionForeground)",
 							fontSize: "12px",
 						}}>
-						Auto-approve allows Cline to perform actions without asking for permission. Only enable for
+						Auto-approve allows Roo Code to perform actions without asking for permission. Only enable for
 						actions you fully trust.
 					</div>
 					{actions.map((action) => (

webview-ui/src/components/chat/BrowserSessionRow.tsx

@@ -242,7 +242,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 						style={{ color: "var(--vscode-foreground)", marginBottom: "-1.5px" }}></span>
 				)}
 				<span style={{ fontWeight: "bold" }}>
-					<>Cline wants to use the browser:</>
+					<>Roo wants to use the browser:</>
 				</span>
 			</div>
 			<div

webview-ui/src/components/chat/ChatRow.tsx

@@ -117,7 +117,7 @@ export const ChatRowContent = ({
 					<span
 						className="codicon codicon-error"
 						style={{ color: errorColor, marginBottom: "-1.5px" }}></span>,
-					<span style={{ color: errorColor, fontWeight: "bold" }}>Cline is having trouble...</span>,
+					<span style={{ color: errorColor, fontWeight: "bold" }}>Roo is having trouble...</span>,
 				]
 			case "command":
 				return [
@@ -128,9 +128,7 @@ export const ChatRowContent = ({
 							className="codicon codicon-terminal"
 							style={{ color: normalColor, marginBottom: "-1.5px" }}></span>
 					),
-					<span style={{ color: normalColor, fontWeight: "bold" }}>
-						Cline wants to execute this command:
-					</span>,
+					<span style={{ color: normalColor, fontWeight: "bold" }}>Roo wants to execute this command:</span>,
 				]
 			case "use_mcp_server":
 				const mcpServerUse = JSON.parse(message.text || "{}") as ClineAskUseMcpServer
@@ -143,8 +141,8 @@ export const ChatRowContent = ({
 							style={{ color: normalColor, marginBottom: "-1.5px" }}></span>
 					),
 					<span style={{ color: normalColor, fontWeight: "bold" }}>
-						Cline wants to {mcpServerUse.type === "use_mcp_tool" ? "use a tool" : "access a resource"} on
-						the <code>{mcpServerUse.serverName}</code> MCP server:
+						Roo wants to {mcpServerUse.type === "use_mcp_tool" ? "use a tool" : "access a resource"} on the{" "}
+						<code>{mcpServerUse.serverName}</code> MCP server:
 					</span>,
 				]
 			case "completion_result":
@@ -208,7 +206,7 @@ export const ChatRowContent = ({
 					<span
 						className="codicon codicon-question"
 						style={{ color: normalColor, marginBottom: "-1.5px" }}></span>,
-					<span style={{ color: normalColor, fontWeight: "bold" }}>Cline has a question:</span>,
+					<span style={{ color: normalColor, fontWeight: "bold" }}>Roo has a question:</span>,
 				]
 			default:
 				return [null, null]
@@ -250,7 +248,7 @@ export const ChatRowContent = ({
 					<>
 						<div style={headerStyle}>
 							{toolIcon(tool.tool === "appliedDiff" ? "diff" : "edit")}
-							<span style={{ fontWeight: "bold" }}>Cline wants to edit this file:</span>
+							<span style={{ fontWeight: "bold" }}>Roo wants to edit this file:</span>
 						</div>
 						<CodeAccordian
 							isLoading={message.partial}
@@ -266,7 +264,7 @@ export const ChatRowContent = ({
 					<>
 						<div style={headerStyle}>
 							{toolIcon("new-file")}
-							<span style={{ fontWeight: "bold" }}>Cline wants to create a new file:</span>
+							<span style={{ fontWeight: "bold" }}>Roo wants to create a new file:</span>
 						</div>
 						<CodeAccordian
 							isLoading={message.partial}
@@ -283,7 +281,7 @@ export const ChatRowContent = ({
 						<div style={headerStyle}>
 							{toolIcon("file-code")}
 							<span style={{ fontWeight: "bold" }}>
-								{message.type === "ask" ? "Cline wants to read this file:" : "Cline read this file:"}
+								{message.type === "ask" ? "Roo wants to read this file:" : "Roo read this file:"}
 							</span>
 						</div>
 						{/* <CodeAccordian
@@ -341,8 +339,8 @@ export const ChatRowContent = ({
 							{toolIcon("folder-opened")}
 							<span style={{ fontWeight: "bold" }}>
 								{message.type === "ask"
-									? "Cline wants to view the top level files in this directory:"
-									: "Cline viewed the top level files in this directory:"}
+									? "Roo wants to view the top level files in this directory:"
+									: "Roo viewed the top level files in this directory:"}
 							</span>
 						</div>
 						<CodeAccordian
@@ -361,8 +359,8 @@ export const ChatRowContent = ({
 							{toolIcon("folder-opened")}
 							<span style={{ fontWeight: "bold" }}>
 								{message.type === "ask"
-									? "Cline wants to recursively view all files in this directory:"
-									: "Cline recursively viewed all files in this directory:"}
+									? "Roo wants to recursively view all files in this directory:"
+									: "Roo recursively viewed all files in this directory:"}
 							</span>
 						</div>
 						<CodeAccordian
@@ -381,8 +379,8 @@ export const ChatRowContent = ({
 							{toolIcon("file-code")}
 							<span style={{ fontWeight: "bold" }}>
 								{message.type === "ask"
-									? "Cline wants to view source code definition names used in this directory:"
-									: "Cline viewed source code definition names used in this directory:"}
+									? "Roo wants to view source code definition names used in this directory:"
+									: "Roo viewed source code definition names used in this directory:"}
 							</span>
 						</div>
 						<CodeAccordian
@@ -401,11 +399,11 @@ export const ChatRowContent = ({
 							<span style={{ fontWeight: "bold" }}>
 								{message.type === "ask" ? (
 									<>
-										Cline wants to search this directory for <code>{tool.regex}</code>:
+										Roo wants to search this directory for <code>{tool.regex}</code>:
 									</>
 								) : (
 									<>
-										Cline searched this directory for <code>{tool.regex}</code>:
+										Roo searched this directory for <code>{tool.regex}</code>:
 									</>
 								)}
 							</span>
@@ -428,9 +426,9 @@ export const ChatRowContent = ({
 			// 				{isInspecting ? <ProgressIndicator /> : toolIcon("inspect")}
 			// 				<span style={{ fontWeight: "bold" }}>
 			// 					{message.type === "ask" ? (
-			// 						<>Cline wants to inspect this website:</>
+			// 						<>Roo wants to inspect this website:</>
 			// 					) : (
-			// 						<>Cline is inspecting this website:</>
+			// 						<>Roo is inspecting this website:</>
 			// 					)}
 			// 				</span>
 			// 			</div>
@@ -572,14 +570,17 @@ export const ChatRowContent = ({
 									alignItems: "flex-start",
 									gap: "10px",
 								}}>
-								<span style={{ display: "block", flexGrow: 1 }}>{highlightMentions(message.text)}</span>
+								<span style={{ display: "block", flexGrow: 1, padding: "4px" }}>
+									{highlightMentions(message.text)}
+								</span>
 								<VSCodeButton
 									appearance="icon"
 									style={{
 										padding: "3px",
 										flexShrink: 0,
 										height: "24px",
-										marginTop: "-6px",
+										marginTop: "-3px",
+										marginBottom: "-3px",
 										marginRight: "-6px",
 									}}
 									disabled={isStreaming}
@@ -663,7 +664,7 @@ export const ChatRowContent = ({
 									</span>
 								</div>
 								<div>
-									Cline won't be able to view the command's output. Please update VSCode (
+									Roo won't be able to view the command's output. Please update VSCode (
 									<code>CMD/CTRL + Shift + P</code> → "Update") and make sure you're using a supported
 									shell: zsh, bash, fish, or PowerShell (<code>CMD/CTRL + Shift + P</code> →
 									"Terminal: Select Default Profile").{" "}

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -14,7 +14,7 @@ import ContextMenu from "./ContextMenu"
 import Thumbnails from "../common/Thumbnails"
 import { vscode } from "../../utils/vscode"
 import { WebviewMessage } from "../../../../src/shared/WebviewMessage"
-import { Mode, modes } from "../../../../src/shared/modes"
+import { Mode, getAllModes } from "../../../../src/shared/modes"
 import { CaretIcon } from "../common/CaretIcon"
 
 interface ChatTextAreaProps {
@@ -50,7 +50,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		},
 		ref,
 	) => {
-		const { filePaths, currentApiConfigName, listApiConfigMeta } = useExtensionState()
+		const { filePaths, currentApiConfigName, listApiConfigMeta, customModes } = useExtensionState()
 		const [gitCommits, setGitCommits] = useState<any[]>([])
 		const [showDropdown, setShowDropdown] = useState(false)
 
@@ -730,7 +730,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									minWidth: "70px",
 									flex: "0 0 auto",
 								}}>
-								{modes.map((mode) => (
+								{getAllModes(customModes).map((mode) => (
 									<option
 										key={mode.slug}
 										value={mode.slug}

webview-ui/src/components/chat/__tests__/AutoApproveMenu.test.tsx

@@ -1,7 +1,7 @@
 import { render, fireEvent, screen } from "@testing-library/react"
 import { useExtensionState } from "../../../context/ExtensionStateContext"
 import AutoApproveMenu from "../AutoApproveMenu"
-import { codeMode, defaultPrompts } from "../../../../../src/shared/modes"
+import { defaultModeSlug, defaultPrompts } from "../../../../../src/shared/modes"
 
 // Mock the ExtensionStateContext hook
 jest.mock("../../../context/ExtensionStateContext")
@@ -29,8 +29,9 @@ describe("AutoApproveMenu", () => {
 		requestDelaySeconds: 5,
 		currentApiConfigName: "default",
 		listApiConfigMeta: [],
-		mode: codeMode,
-		customPrompts: defaultPrompts,
+		mode: defaultModeSlug,
+		customModePrompts: defaultPrompts,
+		customSupportPrompts: {},
 		enhancementApiConfigId: "",
 		didHydrateState: true,
 		showWelcome: false,

webview-ui/src/components/mcp/McpEnabledToggle.tsx

@@ -24,8 +24,8 @@ const McpEnabledToggle = () => {
 					marginTop: "5px",
 					color: "var(--vscode-descriptionForeground)",
 				}}>
-				When enabled, Cline will be able to interact with MCP servers for advanced functionality. If you're not
-				using MCP, you can disable this to reduce Cline's token usage.
+				When enabled, Roo will be able to interact with MCP servers for advanced functionality. If you're not
+				using MCP, you can disable this to reduce Roo's token usage.
 			</p>
 		</div>
 	)

webview-ui/src/components/mcp/McpView.tsx

@@ -115,12 +115,12 @@ const McpView = ({ onDone }: McpViewProps) => {
 						Model Context Protocol
 					</VSCodeLink>{" "}
 					enables communication with locally running MCP servers that provide additional tools and resources
-					to extend Cline's capabilities. You can use{" "}
+					to extend Roo's capabilities. You can use{" "}
 					<VSCodeLink href="https://github.com/modelcontextprotocol/servers" style={{ display: "inline" }}>
 						community-made servers
 					</VSCodeLink>{" "}
-					or ask Cline to create new tools specific to your workflow (e.g., "add a tool that gets the latest
-					npm docs").
+					or ask Roo to create new tools specific to your workflow (e.g., "add a tool that gets the latest npm
+					docs").
 				</div>
 
 				<McpEnabledToggle />

webview-ui/src/components/prompts/PromptsView.tsx

@@ -1,21 +1,35 @@
-import { VSCodeButton, VSCodeTextArea, VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"
+import React, { useState, useEffect, useMemo, useCallback } from "react"
+import {
+	VSCodeButton,
+	VSCodeTextArea,
+	VSCodeDropdown,
+	VSCodeOption,
+	VSCodeTextField,
+	VSCodeCheckbox,
+} from "@vscode/webview-ui-toolkit/react"
 import { useExtensionState } from "../../context/ExtensionStateContext"
-import { defaultPrompts, modes, Mode, PromptComponent, getRoleDefinition } from "../../../../src/shared/modes"
+import { Mode, PromptComponent, getRoleDefinition, getAllModes, ModeConfig } from "../../../../src/shared/modes"
+import {
+	supportPrompt,
+	SupportPromptType,
+	supportPromptLabels,
+	supportPromptDescriptions,
+} from "../../../../src/shared/support-prompt"
+
+import { TOOL_GROUPS, GROUP_DISPLAY_NAMES, ToolGroup } from "../../../../src/shared/tool-groups"
 import { vscode } from "../../utils/vscode"
-import React, { useState, useEffect } from "react"
+
+// Get all available groups from GROUP_DISPLAY_NAMES
+const availableGroups = Object.keys(TOOL_GROUPS) as ToolGroup[]
 
 type PromptsViewProps = {
 	onDone: () => void
 }
 
-const AGENT_MODES = modes.map((mode) => ({
-	id: mode.slug,
-	label: mode.name,
-}))
-
 const PromptsView = ({ onDone }: PromptsViewProps) => {
 	const {
-		customPrompts,
+		customModePrompts,
+		customSupportPrompts,
 		listApiConfigMeta,
 		enhancementApiConfigId,
 		setEnhancementApiConfigId,
@@ -24,13 +38,202 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 		setCustomInstructions,
 		preferredLanguage,
 		setPreferredLanguage,
+		customModes,
 	} = useExtensionState()
+
+	// Memoize modes to preserve array order
+	const modes = useMemo(() => getAllModes(customModes), [customModes])
+
 	const [testPrompt, setTestPrompt] = useState("")
 	const [isEnhancing, setIsEnhancing] = useState(false)
-	const [activeTab, setActiveTab] = useState<Mode>(mode)
 	const [isDialogOpen, setIsDialogOpen] = useState(false)
 	const [selectedPromptContent, setSelectedPromptContent] = useState("")
 	const [selectedPromptTitle, setSelectedPromptTitle] = useState("")
+	const [isToolsEditMode, setIsToolsEditMode] = useState(false)
+	const [isCreateModeDialogOpen, setIsCreateModeDialogOpen] = useState(false)
+	const [activeSupportTab, setActiveSupportTab] = useState<SupportPromptType>("ENHANCE")
+
+	// Direct update functions
+	const updateAgentPrompt = useCallback(
+		(mode: Mode, promptData: PromptComponent) => {
+			const existingPrompt = customModePrompts?.[mode] as PromptComponent
+			const updatedPrompt = { ...existingPrompt, ...promptData }
+
+			// Only include properties that differ from defaults
+			if (updatedPrompt.roleDefinition === getRoleDefinition(mode)) {
+				delete updatedPrompt.roleDefinition
+			}
+
+			vscode.postMessage({
+				type: "updatePrompt",
+				promptMode: mode,
+				customPrompt: updatedPrompt,
+			})
+		},
+		[customModePrompts],
+	)
+
+	const updateCustomMode = useCallback((slug: string, modeConfig: ModeConfig) => {
+		vscode.postMessage({
+			type: "updateCustomMode",
+			slug,
+			modeConfig,
+		})
+	}, [])
+
+	// Helper function to find a mode by slug
+	const findModeBySlug = useCallback(
+		(searchSlug: string, modes: readonly ModeConfig[] | undefined): ModeConfig | undefined => {
+			if (!modes) return undefined
+			const isModeWithSlug = (mode: ModeConfig): mode is ModeConfig => mode.slug === searchSlug
+			return modes.find(isModeWithSlug)
+		},
+		[],
+	)
+
+	const switchMode = useCallback((slug: string) => {
+		vscode.postMessage({
+			type: "mode",
+			text: slug,
+		})
+	}, [])
+
+	// Handle mode switching with explicit state initialization
+	const handleModeSwitch = useCallback(
+		(modeConfig: ModeConfig) => {
+			if (modeConfig.slug === mode) return // Prevent unnecessary updates
+
+			// First switch the mode
+			switchMode(modeConfig.slug)
+
+			// Exit tools edit mode when switching modes
+			setIsToolsEditMode(false)
+		},
+		[mode, switchMode, setIsToolsEditMode],
+	)
+
+	// Helper function to get current mode's config
+	const getCurrentMode = useCallback((): ModeConfig | undefined => {
+		const findMode = (m: ModeConfig): boolean => m.slug === mode
+		return customModes?.find(findMode) || modes.find(findMode)
+	}, [mode, customModes, modes])
+
+	// Helper function to safely access mode properties
+	const getModeProperty = <T extends keyof ModeConfig>(
+		mode: ModeConfig | undefined,
+		property: T,
+	): ModeConfig[T] | undefined => {
+		return mode?.[property]
+	}
+
+	// State for create mode dialog
+	const [newModeName, setNewModeName] = useState("")
+	const [newModeSlug, setNewModeSlug] = useState("")
+	const [newModeRoleDefinition, setNewModeRoleDefinition] = useState("")
+	const [newModeCustomInstructions, setNewModeCustomInstructions] = useState("")
+	const [newModeGroups, setNewModeGroups] = useState<readonly ToolGroup[]>(availableGroups)
+
+	// Reset form fields when dialog opens
+	useEffect(() => {
+		if (isCreateModeDialogOpen) {
+			setNewModeGroups(availableGroups)
+			setNewModeRoleDefinition("")
+			setNewModeCustomInstructions("")
+		}
+	}, [isCreateModeDialogOpen])
+
+	// Helper function to generate a unique slug from a name
+	const generateSlug = useCallback((name: string, attempt = 0): string => {
+		const baseSlug = name
+			.toLowerCase()
+			.replace(/[^a-z0-9-]+/g, "-")
+			.replace(/^-+|-+$/g, "")
+		return attempt === 0 ? baseSlug : `${baseSlug}-${attempt}`
+	}, [])
+
+	// Handler for name changes
+	const handleNameChange = useCallback(
+		(name: string) => {
+			setNewModeName(name)
+			setNewModeSlug(generateSlug(name))
+		},
+		[generateSlug],
+	)
+
+	const handleCreateMode = useCallback(() => {
+		if (!newModeName.trim() || !newModeSlug.trim()) return
+
+		const newMode: ModeConfig = {
+			slug: newModeSlug,
+			name: newModeName,
+			roleDefinition: newModeRoleDefinition.trim() || "",
+			customInstructions: newModeCustomInstructions.trim() || undefined,
+			groups: newModeGroups,
+		}
+		updateCustomMode(newModeSlug, newMode)
+		switchMode(newModeSlug)
+		setIsCreateModeDialogOpen(false)
+		setNewModeName("")
+		setNewModeSlug("")
+		setNewModeRoleDefinition("")
+		setNewModeCustomInstructions("")
+		setNewModeGroups(availableGroups)
+	}, [
+		newModeName,
+		newModeSlug,
+		newModeRoleDefinition,
+		newModeCustomInstructions,
+		newModeGroups,
+		updateCustomMode,
+		switchMode,
+	])
+
+	const isNameOrSlugTaken = useCallback(
+		(name: string, slug: string) => {
+			return modes.some((m) => m.slug === slug || m.name === name)
+		},
+		[modes],
+	)
+
+	const openCreateModeDialog = useCallback(() => {
+		const baseNamePrefix = "New Custom Mode"
+		// Find unique name and slug
+		let attempt = 0
+		let name = baseNamePrefix
+		let slug = generateSlug(name)
+		while (isNameOrSlugTaken(name, slug)) {
+			attempt++
+			name = `${baseNamePrefix} ${attempt + 1}`
+			slug = generateSlug(name)
+		}
+		setNewModeName(name)
+		setNewModeSlug(slug)
+		setIsCreateModeDialogOpen(true)
+	}, [generateSlug, isNameOrSlugTaken])
+
+	// Handler for group checkbox changes
+	const handleGroupChange = useCallback(
+		(group: ToolGroup, isCustomMode: boolean, customMode: ModeConfig | undefined) =>
+			(e: Event | React.FormEvent<HTMLElement>) => {
+				if (!isCustomMode) return // Prevent changes to built-in modes
+				const target = (e as CustomEvent)?.detail?.target || (e.target as HTMLInputElement)
+				const checked = target.checked
+				const oldGroups = customMode?.groups || []
+				let newGroups: readonly ToolGroup[]
+				if (checked) {
+					newGroups = [...oldGroups, group]
+				} else {
+					newGroups = oldGroups.filter((g) => g !== group)
+				}
+				if (customMode) {
+					updateCustomMode(customMode.slug, {
+						...customMode,
+						groups: newGroups,
+					})
+				}
+			},
+		[updateCustomMode],
+	)
 
 	useEffect(() => {
 		const handler = (event: MessageEvent) => {
@@ -53,65 +256,33 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 		return () => window.removeEventListener("message", handler)
 	}, [])
 
-	type AgentMode = string
-
-	const updateAgentPrompt = (mode: Mode, promptData: PromptComponent) => {
-		const existingPrompt = customPrompts?.[mode]
-		const updatedPrompt = typeof existingPrompt === "object" ? { ...existingPrompt, ...promptData } : promptData
-
-		// Only include properties that differ from defaults
-		if (updatedPrompt.roleDefinition === getRoleDefinition(mode)) {
-			delete updatedPrompt.roleDefinition
-		}
-
+	const updateSupportPrompt = (type: SupportPromptType, value: string | undefined) => {
 		vscode.postMessage({
-			type: "updatePrompt",
-			promptMode: mode,
-			customPrompt: updatedPrompt,
+			type: "updateSupportPrompt",
+			values: {
+				[type]: value,
+			},
 		})
 	}
 
-	const updateEnhancePrompt = (value: string | undefined) => {
-		vscode.postMessage({
-			type: "updateEnhancedPrompt",
-			text: value,
-		})
-	}
-
-	const handleAgentPromptChange = (mode: AgentMode, e: Event | React.FormEvent<HTMLElement>) => {
-		const value = (e as CustomEvent)?.detail?.target?.value || ((e as any).target as HTMLTextAreaElement).value
-		updateAgentPrompt(mode, { roleDefinition: value.trim() || undefined })
-	}
-
-	const handleEnhancePromptChange = (e: Event | React.FormEvent<HTMLElement>) => {
-		const value = (e as CustomEvent)?.detail?.target?.value || ((e as any).target as HTMLTextAreaElement).value
-		const trimmedValue = value.trim()
-		if (trimmedValue !== defaultPrompts.enhance) {
-			updateEnhancePrompt(trimmedValue || undefined)
-		}
-	}
-
-	const handleAgentReset = (mode: AgentMode) => {
-		const existingPrompt = customPrompts?.[mode]
-		updateAgentPrompt(mode, {
-			...(typeof existingPrompt === "object" ? existingPrompt : {}),
+	const handleAgentReset = (modeSlug: string) => {
+		// Only reset role definition for built-in modes
+		const existingPrompt = customModePrompts?.[modeSlug] as PromptComponent
+		updateAgentPrompt(modeSlug, {
+			...existingPrompt,
 			roleDefinition: undefined,
 		})
 	}
 
-	const handleEnhanceReset = () => {
-		updateEnhancePrompt(undefined)
-	}
-
-	const getAgentPromptValue = (mode: Mode): string => {
-		const prompt = customPrompts?.[mode]
-		return typeof prompt === "object" ? (prompt.roleDefinition ?? getRoleDefinition(mode)) : getRoleDefinition(mode)
+	const handleSupportReset = (type: SupportPromptType) => {
+		vscode.postMessage({
+			type: "resetSupportPrompt",
+			text: type,
+		})
 	}
 
-	const getEnhancePromptValue = (): string => {
-		const enhance = customPrompts?.enhance
-		const defaultEnhance = typeof defaultPrompts.enhance === "string" ? defaultPrompts.enhance : ""
-		return typeof enhance === "string" ? enhance : defaultEnhance
+	const getSupportPromptValue = (type: SupportPromptType): string => {
+		return supportPrompt.get(customSupportPrompts, type)
 	}
 
 	const handleTestEnhancement = () => {
@@ -147,7 +318,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 			</div>
 
 			<div style={{ flex: 1, overflow: "auto", padding: "0 20px" }}>
-				<div style={{ marginBottom: "20px" }}>
+				<div style={{ paddingBottom: "20px", borderBottom: "1px solid var(--vscode-input-border)" }}>
 					<div style={{ marginBottom: "20px" }}>
 						<div style={{ fontWeight: "bold", marginBottom: "4px" }}>Preferred Language</div>
 						<select
@@ -220,7 +391,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						style={{ width: "100%" }}
 						data-testid="global-custom-instructions-textarea"
 					/>
-					<div style={{ fontSize: "12px", color: "var(--vscode-descriptionForeground)", marginTop: "5px" }}>
+					<div
+						style={{
+							fontSize: "12px",
+							color: "var(--vscode-descriptionForeground)",
+							marginTop: "5px",
+							marginBottom: "40px",
+						}}>
 						Instructions can also be loaded from{" "}
 						<span
 							style={{
@@ -244,77 +421,257 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					</div>
 				</div>
 
-				<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 20px 0" }}>Mode-Specific Prompts</h3>
+				<div style={{ marginTop: "20px" }}>
+					<div
+						style={{
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center",
+							marginBottom: "12px",
+						}}>
+						<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>Mode-Specific Prompts</h3>
+						<div style={{ display: "flex", gap: "8px" }}>
+							<VSCodeButton appearance="icon" onClick={openCreateModeDialog} title="Create new mode">
+								<span className="codicon codicon-add"></span>
+							</VSCodeButton>
+							<VSCodeButton
+								appearance="icon"
+								title="Edit modes configuration"
+								onClick={() => {
+									vscode.postMessage({
+										type: "openCustomModesSettings",
+									})
+								}}>
+								<span className="codicon codicon-json"></span>
+							</VSCodeButton>
+						</div>
+					</div>
 
-				<div
-					style={{
-						display: "flex",
-						gap: "16px",
-						alignItems: "center",
-						marginBottom: "12px",
-					}}>
-					{AGENT_MODES.map((tab) => (
-						<button
-							key={tab.id}
-							data-testid={`${tab.id}-tab`}
-							data-active={activeTab === tab.id ? "true" : "false"}
-							onClick={() => setActiveTab(tab.id)}
-							style={{
-								padding: "4px 8px",
-								border: "none",
-								background: activeTab === tab.id ? "var(--vscode-button-background)" : "none",
-								color:
-									activeTab === tab.id
-										? "var(--vscode-button-foreground)"
-										: "var(--vscode-foreground)",
-								cursor: "pointer",
-								opacity: activeTab === tab.id ? 1 : 0.8,
-								borderRadius: "3px",
-								fontWeight: "bold",
-							}}>
-							{tab.label}
-						</button>
-					))}
+					<div
+						style={{
+							fontSize: "13px",
+							color: "var(--vscode-descriptionForeground)",
+							marginBottom: "12px",
+						}}>
+						Hit the + to create a new custom mode, or just ask Roo in chat to create one for you!
+					</div>
+
+					<div
+						style={{
+							display: "flex",
+							gap: "16px",
+							alignItems: "center",
+							marginBottom: "12px",
+							overflowX: "auto",
+							flexWrap: "nowrap",
+							paddingBottom: "4px",
+							paddingRight: "20px",
+						}}>
+						{modes.map((modeConfig) => {
+							const isActive = mode === modeConfig.slug
+							return (
+								<button
+									key={modeConfig.slug}
+									data-testid={`${modeConfig.slug}-tab`}
+									data-active={isActive ? "true" : "false"}
+									onClick={() => handleModeSwitch(modeConfig)}
+									style={{
+										padding: "4px 8px",
+										border: "none",
+										background: isActive ? "var(--vscode-button-background)" : "none",
+										color: isActive
+											? "var(--vscode-button-foreground)"
+											: "var(--vscode-foreground)",
+										cursor: "pointer",
+										opacity: isActive ? 1 : 0.8,
+										borderRadius: "3px",
+										fontWeight: "bold",
+									}}>
+									{modeConfig.name}
+								</button>
+							)
+						})}
+					</div>
 				</div>
 
 				<div style={{ marginBottom: "20px" }}>
-					<div style={{ marginBottom: "8px" }}>
-						<div>
-							<div
-								style={{
-									display: "flex",
-									justifyContent: "space-between",
-									alignItems: "center",
-									marginBottom: "4px",
-								}}>
-								<div style={{ fontWeight: "bold" }}>Role Definition</div>
+					{/* Only show name and delete for custom modes */}
+					{mode && findModeBySlug(mode, customModes) && (
+						<div style={{ display: "flex", gap: "12px", marginBottom: "16px" }}>
+							<div style={{ flex: 1 }}>
+								<div style={{ fontWeight: "bold", marginBottom: "4px" }}>Name</div>
+								<div style={{ display: "flex", gap: "8px" }}>
+									<VSCodeTextField
+										value={getModeProperty(findModeBySlug(mode, customModes), "name") ?? ""}
+										onChange={(e: Event | React.FormEvent<HTMLElement>) => {
+											const target =
+												(e as CustomEvent)?.detail?.target ||
+												((e as any).target as HTMLInputElement)
+											const customMode = findModeBySlug(mode, customModes)
+											if (customMode) {
+												updateCustomMode(mode, {
+													...customMode,
+													name: target.value,
+												})
+											}
+										}}
+										style={{ width: "100%" }}
+									/>
+									<VSCodeButton
+										appearance="icon"
+										title="Delete mode"
+										onClick={() => {
+											vscode.postMessage({
+												type: "deleteCustomMode",
+												slug: mode,
+											})
+										}}>
+										<span className="codicon codicon-trash"></span>
+									</VSCodeButton>
+								</div>
+							</div>
+						</div>
+					)}
+					<div style={{ marginBottom: "16px" }}>
+						<div
+							style={{
+								display: "flex",
+								justifyContent: "space-between",
+								alignItems: "center",
+								marginBottom: "4px",
+							}}>
+							<div style={{ fontWeight: "bold" }}>Role Definition</div>
+							{!findModeBySlug(mode, customModes) && (
 								<VSCodeButton
 									appearance="icon"
-									onClick={() => handleAgentReset(activeTab)}
-									data-testid="reset-prompt-button"
-									title="Revert to default">
+									onClick={() => {
+										const currentMode = getCurrentMode()
+										if (currentMode?.slug) {
+											handleAgentReset(currentMode.slug)
+										}
+									}}
+									title="Reset to default"
+									data-testid="role-definition-reset">
 									<span className="codicon codicon-discard"></span>
 								</VSCodeButton>
-							</div>
-							<div
-								style={{
-									fontSize: "13px",
-									color: "var(--vscode-descriptionForeground)",
-									marginBottom: "8px",
-								}}>
-								Define Cline's expertise and personality for this mode. This description shapes how
-								Cline presents itself and approaches tasks.
-							</div>
+							)}
+						</div>
+						<div
+							style={{
+								fontSize: "13px",
+								color: "var(--vscode-descriptionForeground)",
+								marginBottom: "8px",
+							}}>
+							Define Roo's expertise and personality for this mode. This description shapes how Roo
+							presents itself and approaches tasks.
 						</div>
 						<VSCodeTextArea
-							value={getAgentPromptValue(activeTab)}
-							onChange={(e) => handleAgentPromptChange(activeTab, e)}
+							value={(() => {
+								const customMode = findModeBySlug(mode, customModes)
+								const prompt = customModePrompts?.[mode] as PromptComponent
+								return customMode?.roleDefinition ?? prompt?.roleDefinition ?? getRoleDefinition(mode)
+							})()}
+							onChange={(e) => {
+								const value =
+									(e as CustomEvent)?.detail?.target?.value ||
+									((e as any).target as HTMLTextAreaElement).value
+								const customMode = findModeBySlug(mode, customModes)
+								if (customMode) {
+									// For custom modes, update the JSON file
+									updateCustomMode(mode, {
+										...customMode,
+										roleDefinition: value.trim() || "",
+									})
+								} else {
+									// For built-in modes, update the prompts
+									updateAgentPrompt(mode, {
+										roleDefinition: value.trim() || undefined,
+									})
+								}
+							}}
 							rows={4}
 							resize="vertical"
 							style={{ width: "100%" }}
-							data-testid={`${activeTab}-prompt-textarea`}
+							data-testid={`${getCurrentMode()?.slug || "code"}-prompt-textarea`}
 						/>
 					</div>
+					{/* Mode settings */}
+					<>
+						{/* Show tools for all modes */}
+						<div style={{ marginBottom: "16px" }}>
+							<div
+								style={{
+									display: "flex",
+									justifyContent: "space-between",
+									alignItems: "center",
+									marginBottom: "4px",
+								}}>
+								<div style={{ fontWeight: "bold" }}>Available Tools</div>
+								{findModeBySlug(mode, customModes) && (
+									<VSCodeButton
+										appearance="icon"
+										onClick={() => setIsToolsEditMode(!isToolsEditMode)}
+										title={isToolsEditMode ? "Done editing" : "Edit tools"}>
+										<span
+											className={`codicon codicon-${isToolsEditMode ? "check" : "edit"}`}></span>
+									</VSCodeButton>
+								)}
+							</div>
+							{!findModeBySlug(mode, customModes) && (
+								<div
+									style={{
+										fontSize: "13px",
+										color: "var(--vscode-descriptionForeground)",
+										marginBottom: "8px",
+									}}>
+									Tools for built-in modes cannot be modified
+								</div>
+							)}
+							{isToolsEditMode && findModeBySlug(mode, customModes) ? (
+								<div
+									style={{
+										display: "grid",
+										gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+										gap: "8px",
+									}}>
+									{availableGroups.map((group) => {
+										const currentMode = getCurrentMode()
+										const isCustomMode = findModeBySlug(mode, customModes)
+										const customMode = isCustomMode
+										const isGroupEnabled = isCustomMode
+											? customMode?.groups?.includes(group)
+											: currentMode?.groups?.includes(group)
+
+										return (
+											<VSCodeCheckbox
+												key={group}
+												checked={isGroupEnabled}
+												onChange={handleGroupChange(group, Boolean(isCustomMode), customMode)}
+												disabled={!isCustomMode}>
+												{GROUP_DISPLAY_NAMES[group]}
+											</VSCodeCheckbox>
+										)
+									})}
+								</div>
+							) : (
+								<div
+									style={{
+										fontSize: "13px",
+										color: "var(--vscode-foreground)",
+										marginBottom: "8px",
+										lineHeight: "1.4",
+									}}>
+									{(() => {
+										const currentMode = getCurrentMode()
+										const enabledGroups = currentMode?.groups || []
+										return enabledGroups.map((group) => GROUP_DISPLAY_NAMES[group]).join(", ")
+									})()}
+								</div>
+							)}
+						</div>
+					</>
+
+					{/* Role definition for both built-in and custom modes */}
 					<div style={{ marginBottom: "8px" }}>
 						<div style={{ fontWeight: "bold", marginBottom: "4px" }}>Mode-specific Custom Instructions</div>
 						<div
@@ -323,28 +680,38 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								color: "var(--vscode-descriptionForeground)",
 								marginBottom: "8px",
 							}}>
-							Add behavioral guidelines specific to {activeTab} mode. These instructions enhance the base
-							behaviors defined above.
+							Add behavioral guidelines specific to {getCurrentMode()?.name || "Code"} mode.
 						</div>
 						<VSCodeTextArea
 							value={(() => {
-								const prompt = customPrompts?.[activeTab]
-								return typeof prompt === "object" ? (prompt.customInstructions ?? "") : ""
+								const customMode = findModeBySlug(mode, customModes)
+								const prompt = customModePrompts?.[mode] as PromptComponent
+								return customMode?.customInstructions ?? prompt?.customInstructions ?? ""
 							})()}
 							onChange={(e) => {
 								const value =
 									(e as CustomEvent)?.detail?.target?.value ||
 									((e as any).target as HTMLTextAreaElement).value
-								const existingPrompt = customPrompts?.[activeTab]
-								updateAgentPrompt(activeTab, {
-									...(typeof existingPrompt === "object" ? existingPrompt : {}),
-									customInstructions: value.trim() || undefined,
-								})
+								const customMode = findModeBySlug(mode, customModes)
+								if (customMode) {
+									// For custom modes, update the JSON file
+									updateCustomMode(mode, {
+										...customMode,
+										customInstructions: value.trim() || undefined,
+									})
+								} else {
+									// For built-in modes, update the prompts
+									const existingPrompt = customModePrompts?.[mode] as PromptComponent
+									updateAgentPrompt(mode, {
+										...existingPrompt,
+										customInstructions: value.trim() || undefined,
+									})
+								}
 							}}
 							rows={4}
 							resize="vertical"
 							style={{ width: "100%" }}
-							data-testid={`${activeTab}-custom-instructions-textarea`}
+							data-testid={`${getCurrentMode()?.slug || "code"}-custom-instructions-textarea`}
 						/>
 						<div
 							style={{
@@ -352,7 +719,8 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								color: "var(--vscode-descriptionForeground)",
 								marginTop: "5px",
 							}}>
-							Custom instructions specific to {activeTab} mode can also be loaded from{" "}
+							Custom instructions specific to {getCurrentMode()?.name || "Code"} mode can also be loaded
+							from{" "}
 							<span
 								style={{
 									color: "var(--vscode-textLink-foreground)",
@@ -360,163 +728,388 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									textDecoration: "underline",
 								}}
 								onClick={() => {
-									// First create/update the file with current custom instructions
-									const defaultContent = `# ${activeTab} Mode Rules\n\nAdd mode-specific rules and guidelines here.`
-									const existingPrompt = customPrompts?.[activeTab]
-									const existingInstructions =
-										typeof existingPrompt === "object"
-											? existingPrompt.customInstructions
-											: undefined
-									vscode.postMessage({
-										type: "updatePrompt",
-										promptMode: activeTab,
-										customPrompt: {
-											...(typeof existingPrompt === "object" ? existingPrompt : {}),
-											customInstructions: existingInstructions || defaultContent,
-										},
-									})
-									// Then open the file
+									const currentMode = getCurrentMode()
+									if (!currentMode) return
+
+									// Open or create an empty file
 									vscode.postMessage({
 										type: "openFile",
-										text: `./.clinerules-${activeTab}`,
+										text: `./.clinerules-${currentMode.slug}`,
 										values: {
 											create: true,
 											content: "",
 										},
 									})
 								}}>
-								.clinerules-{activeTab}
+								.clinerules-{getCurrentMode()?.slug || "code"}
 							</span>{" "}
 							in your workspace.
 						</div>
 					</div>
 				</div>
-				<div style={{ marginBottom: "20px", display: "flex", justifyContent: "flex-start" }}>
+				<div
+					style={{
+						paddingBottom: "40px",
+						marginBottom: "20px",
+						borderBottom: "1px solid var(--vscode-input-border)",
+						display: "flex",
+						justifyContent: "flex-start",
+					}}>
 					<VSCodeButton
 						appearance="primary"
 						onClick={() => {
-							vscode.postMessage({
-								type: "getSystemPrompt",
-								mode: activeTab,
-							})
+							const currentMode = getCurrentMode()
+							if (currentMode) {
+								vscode.postMessage({
+									type: "getSystemPrompt",
+									mode: currentMode.slug,
+								})
+							}
 						}}
 						data-testid="preview-prompt-button">
 						Preview System Prompt
 					</VSCodeButton>
 				</div>
 
-				<h3 style={{ color: "var(--vscode-foreground)", margin: "40px 0 20px 0" }}>Prompt Enhancement</h3>
-
 				<div
 					style={{
-						color: "var(--vscode-foreground)",
-						fontSize: "13px",
-						marginBottom: "20px",
-						marginTop: "5px",
+						marginTop: "20px",
+						paddingBottom: "60px",
+						borderBottom: "1px solid var(--vscode-input-border)",
 					}}>
-					Use prompt enhancement to get tailored suggestions or improvements for your inputs. This ensures
-					Cline understands your intent and provides the best possible responses.
-				</div>
-
-				<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
-					<div>
-						<div style={{ marginBottom: "12px" }}>
-							<div style={{ marginBottom: "8px" }}>
-								<div style={{ fontWeight: "bold", marginBottom: "4px" }}>API Configuration</div>
-								<div style={{ fontSize: "13px", color: "var(--vscode-descriptionForeground)" }}>
-									You can select an API configuration to always use for enhancing prompts, or just use
-									whatever is currently selected
-								</div>
-							</div>
-							<VSCodeDropdown
-								value={enhancementApiConfigId || ""}
-								data-testid="api-config-dropdown"
-								onChange={(e: any) => {
-									const value = e.detail?.target?.value || e.target?.value
-									setEnhancementApiConfigId(value)
-									vscode.postMessage({
-										type: "enhancementApiConfigId",
-										text: value,
-									})
-								}}
-								style={{ width: "300px" }}>
-								<VSCodeOption value="">Use currently selected API configuration</VSCodeOption>
-								{(listApiConfigMeta || []).map((config) => (
-									<VSCodeOption key={config.id} value={config.id}>
-										{config.name}
-									</VSCodeOption>
-								))}
-							</VSCodeDropdown>
-						</div>
-
-						<div style={{ marginBottom: "8px" }}>
-							<div
-								style={{
-									display: "flex",
-									justifyContent: "space-between",
-									alignItems: "center",
-									marginBottom: "4px",
-								}}>
-								<div style={{ fontWeight: "bold" }}>Enhancement Prompt</div>
-								<div style={{ display: "flex", gap: "8px" }}>
-									<VSCodeButton
-										appearance="icon"
-										onClick={handleEnhanceReset}
-										title="Revert to default">
-										<span className="codicon codicon-discard"></span>
-									</VSCodeButton>
-								</div>
-							</div>
-							<div
+					<h3 style={{ color: "var(--vscode-foreground)", marginBottom: "12px" }}>Support Prompts</h3>
+					<div
+						style={{
+							display: "flex",
+							gap: "16px",
+							alignItems: "center",
+							marginBottom: "12px",
+							overflowX: "auto",
+							flexWrap: "nowrap",
+							paddingBottom: "4px",
+							paddingRight: "20px",
+						}}>
+						{Object.keys(supportPrompt.default).map((type) => (
+							<button
+								key={type}
+								data-testid={`${type}-tab`}
+								data-active={activeSupportTab === type ? "true" : "false"}
+								onClick={() => setActiveSupportTab(type as SupportPromptType)}
 								style={{
-									fontSize: "13px",
-									color: "var(--vscode-descriptionForeground)",
-									marginBottom: "8px",
+									padding: "4px 8px",
+									border: "none",
+									background: activeSupportTab === type ? "var(--vscode-button-background)" : "none",
+									color:
+										activeSupportTab === type
+											? "var(--vscode-button-foreground)"
+											: "var(--vscode-foreground)",
+									cursor: "pointer",
+									opacity: activeSupportTab === type ? 1 : 0.8,
+									borderRadius: "3px",
+									fontWeight: "bold",
 								}}>
-								This prompt will be used to refine your input when you hit the sparkle icon in chat.
-							</div>
+								{supportPromptLabels[type as SupportPromptType]}
+							</button>
+						))}
+					</div>
+
+					{/* Support prompt description */}
+					<div
+						style={{
+							fontSize: "13px",
+							color: "var(--vscode-descriptionForeground)",
+							margin: "8px 0 16px",
+						}}>
+						{supportPromptDescriptions[activeSupportTab]}
+					</div>
+
+					{/* Show active tab content */}
+					<div key={activeSupportTab}>
+						<div
+							style={{
+								display: "flex",
+								justifyContent: "space-between",
+								alignItems: "center",
+								marginBottom: "4px",
+							}}>
+							<div style={{ fontWeight: "bold" }}>Prompt</div>
+							<VSCodeButton
+								appearance="icon"
+								onClick={() => handleSupportReset(activeSupportTab)}
+								title={`Reset ${activeSupportTab} prompt to default`}>
+								<span className="codicon codicon-discard"></span>
+							</VSCodeButton>
 						</div>
+
 						<VSCodeTextArea
-							value={getEnhancePromptValue()}
-							onChange={handleEnhancePromptChange}
-							rows={4}
+							value={getSupportPromptValue(activeSupportTab)}
+							onChange={(e) => {
+								const value =
+									(e as CustomEvent)?.detail?.target?.value ||
+									((e as any).target as HTMLTextAreaElement).value
+								const trimmedValue = value.trim()
+								updateSupportPrompt(activeSupportTab, trimmedValue || undefined)
+							}}
+							rows={6}
 							resize="vertical"
 							style={{ width: "100%" }}
 						/>
 
-						<div style={{ marginTop: "12px" }}>
-							<VSCodeTextArea
-								value={testPrompt}
-								onChange={(e) => setTestPrompt((e.target as HTMLTextAreaElement).value)}
-								placeholder="Enter a prompt to test the enhancement"
-								rows={3}
-								resize="vertical"
-								style={{ width: "100%" }}
-								data-testid="test-prompt-textarea"
-							/>
-							<div
+						{activeSupportTab === "ENHANCE" && (
+							<>
+								<div>
+									<div
+										style={{
+											color: "var(--vscode-foreground)",
+											fontSize: "13px",
+											marginBottom: "20px",
+											marginTop: "5px",
+										}}></div>
+									<div style={{ marginBottom: "12px" }}>
+										<div style={{ marginBottom: "8px" }}>
+											<div style={{ fontWeight: "bold", marginBottom: "4px" }}>
+												API Configuration
+											</div>
+											<div
+												style={{
+													fontSize: "13px",
+													color: "var(--vscode-descriptionForeground)",
+												}}>
+												You can select an API configuration to always use for enhancing prompts,
+												or just use whatever is currently selected
+											</div>
+										</div>
+										<VSCodeDropdown
+											value={enhancementApiConfigId || ""}
+											data-testid="api-config-dropdown"
+											onChange={(e: any) => {
+												const value = e.detail?.target?.value || e.target?.value
+												setEnhancementApiConfigId(value)
+												vscode.postMessage({
+													type: "enhancementApiConfigId",
+													text: value,
+												})
+											}}
+											style={{ width: "300px" }}>
+											<VSCodeOption value="">
+												Use currently selected API configuration
+											</VSCodeOption>
+											{(listApiConfigMeta || []).map((config) => (
+												<VSCodeOption key={config.id} value={config.id}>
+													{config.name}
+												</VSCodeOption>
+											))}
+										</VSCodeDropdown>
+									</div>
+								</div>
+
+								<div style={{ marginTop: "12px" }}>
+									<VSCodeTextArea
+										value={testPrompt}
+										onChange={(e) => setTestPrompt((e.target as HTMLTextAreaElement).value)}
+										placeholder="Enter a prompt to test the enhancement"
+										rows={3}
+										resize="vertical"
+										style={{ width: "100%" }}
+										data-testid="test-prompt-textarea"
+									/>
+									<div
+										style={{
+											marginTop: "8px",
+											display: "flex",
+											justifyContent: "flex-start",
+											alignItems: "center",
+											gap: 8,
+										}}>
+										<VSCodeButton
+											onClick={handleTestEnhancement}
+											disabled={isEnhancing}
+											appearance="primary">
+											Preview Prompt Enhancement
+										</VSCodeButton>
+									</div>
+								</div>
+							</>
+						)}
+					</div>
+				</div>
+			</div>
+
+			{isCreateModeDialogOpen && (
+				<div
+					style={{
+						position: "fixed",
+						inset: 0,
+						display: "flex",
+						justifyContent: "flex-end",
+						backgroundColor: "rgba(0, 0, 0, 0.5)",
+						zIndex: 1000,
+					}}>
+					<div
+						style={{
+							width: "calc(100vw - 100px)",
+							height: "100%",
+							backgroundColor: "var(--vscode-editor-background)",
+							boxShadow: "-2px 0 5px rgba(0, 0, 0, 0.2)",
+							display: "flex",
+							flexDirection: "column",
+							position: "relative",
+						}}>
+						<div
+							style={{
+								flex: 1,
+								padding: "20px",
+								overflowY: "auto",
+								minHeight: 0,
+							}}>
+							<VSCodeButton
+								appearance="icon"
+								onClick={() => setIsCreateModeDialogOpen(false)}
 								style={{
-									marginTop: "8px",
-									display: "flex",
-									justifyContent: "flex-start",
-									alignItems: "center",
-									gap: 8,
+									position: "absolute",
+									top: "20px",
+									right: "20px",
 								}}>
-								<VSCodeButton
-									onClick={handleTestEnhancement}
-									disabled={isEnhancing}
-									appearance="primary">
-									Preview Prompt Enhancement
-								</VSCodeButton>
+								<span className="codicon codicon-close"></span>
+							</VSCodeButton>
+							<h2 style={{ margin: "0 0 16px" }}>Create New Mode</h2>
+							<div style={{ marginBottom: "16px" }}>
+								<div style={{ fontWeight: "bold", marginBottom: "4px" }}>Name</div>
+								<VSCodeTextField
+									value={newModeName}
+									onChange={(e: Event | React.FormEvent<HTMLElement>) => {
+										const target =
+											(e as CustomEvent)?.detail?.target ||
+											((e as any).target as HTMLInputElement)
+										handleNameChange(target.value)
+									}}
+									style={{ width: "100%" }}
+								/>
+							</div>
+							<div style={{ marginBottom: "16px" }}>
+								<div style={{ fontWeight: "bold", marginBottom: "4px" }}>Slug</div>
+								<VSCodeTextField
+									value={newModeSlug}
+									onChange={(e: Event | React.FormEvent<HTMLElement>) => {
+										const target =
+											(e as CustomEvent)?.detail?.target ||
+											((e as any).target as HTMLInputElement)
+										setNewModeSlug(target.value)
+									}}
+									style={{ width: "100%" }}
+								/>
+								<div
+									style={{
+										fontSize: "12px",
+										color: "var(--vscode-descriptionForeground)",
+										marginTop: "4px",
+									}}>
+									The slug is used in URLs and file names. It should be lowercase and contain only
+									letters, numbers, and hyphens.
+								</div>
+							</div>
+							<div style={{ marginBottom: "16px" }}>
+								<div style={{ fontWeight: "bold", marginBottom: "4px" }}>Role Definition</div>
+								<div
+									style={{
+										fontSize: "13px",
+										color: "var(--vscode-descriptionForeground)",
+										marginBottom: "8px",
+									}}>
+									Define Roo's expertise and personality for this mode.
+								</div>
+								<VSCodeTextArea
+									value={newModeRoleDefinition}
+									onChange={(e) => {
+										const value =
+											(e as CustomEvent)?.detail?.target?.value ||
+											((e as any).target as HTMLTextAreaElement).value
+										setNewModeRoleDefinition(value)
+									}}
+									rows={4}
+									resize="vertical"
+									style={{ width: "100%" }}
+								/>
+							</div>
+							<div style={{ marginBottom: "16px" }}>
+								<div style={{ fontWeight: "bold", marginBottom: "4px" }}>Available Tools</div>
+								<div
+									style={{
+										fontSize: "13px",
+										color: "var(--vscode-descriptionForeground)",
+										marginBottom: "8px",
+									}}>
+									Select which tools this mode can use.
+								</div>
+								<div
+									style={{
+										display: "grid",
+										gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+										gap: "8px",
+									}}>
+									{availableGroups.map((group) => (
+										<VSCodeCheckbox
+											key={group}
+											checked={newModeGroups.includes(group)}
+											onChange={(e: Event | React.FormEvent<HTMLElement>) => {
+												const target =
+													(e as CustomEvent)?.detail?.target || (e.target as HTMLInputElement)
+												const checked = target.checked
+												if (checked) {
+													setNewModeGroups([...newModeGroups, group])
+												} else {
+													setNewModeGroups(newModeGroups.filter((g) => g !== group))
+												}
+											}}>
+											{GROUP_DISPLAY_NAMES[group]}
+										</VSCodeCheckbox>
+									))}
+								</div>
+							</div>
+							<div style={{ marginBottom: "16px" }}>
+								<div style={{ fontWeight: "bold", marginBottom: "4px" }}>Custom Instructions</div>
+								<div
+									style={{
+										fontSize: "13px",
+										color: "var(--vscode-descriptionForeground)",
+										marginBottom: "8px",
+									}}>
+									Add behavioral guidelines specific to this mode.
+								</div>
+								<VSCodeTextArea
+									value={newModeCustomInstructions}
+									onChange={(e) => {
+										const value =
+											(e as CustomEvent)?.detail?.target?.value ||
+											((e as any).target as HTMLTextAreaElement).value
+										setNewModeCustomInstructions(value)
+									}}
+									rows={4}
+									resize="vertical"
+									style={{ width: "100%" }}
+								/>
 							</div>
 						</div>
+						<div
+							style={{
+								display: "flex",
+								justifyContent: "flex-end",
+								padding: "12px 20px",
+								gap: "8px",
+								borderTop: "1px solid var(--vscode-editor-lineHighlightBorder)",
+								backgroundColor: "var(--vscode-editor-background)",
+							}}>
+							<VSCodeButton onClick={() => setIsCreateModeDialogOpen(false)}>Cancel</VSCodeButton>
+							<VSCodeButton
+								appearance="primary"
+								onClick={handleCreateMode}
+								disabled={!newModeName.trim() || !newModeSlug.trim()}>
+								Create Mode
+							</VSCodeButton>
+						</div>
 					</div>
 				</div>
-
-				{/* Bottom padding */}
-				<div style={{ height: "20px" }} />
-			</div>
-
+			)}
 			{isDialogOpen && (
 				<div
 					style={{

webview-ui/src/components/prompts/__tests__/PromptsView.test.tsx

@@ -12,7 +12,7 @@ jest.mock("../../../utils/vscode", () => ({
 }))
 
 const mockExtensionState = {
-	customPrompts: {},
+	customModePrompts: {},
 	listApiConfigMeta: [
 		{ id: "config1", name: "Config 1" },
 		{ id: "config2", name: "Config 2" },
@@ -57,8 +57,12 @@ describe("PromptsView", () => {
 		expect(architectTab).toHaveAttribute("data-active", "false")
 	})
 
-	it("switches between tabs correctly", () => {
-		renderPromptsView({ mode: "code" })
+	it("switches between tabs correctly", async () => {
+		const { rerender } = render(
+			<ExtensionStateContext.Provider value={{ ...mockExtensionState, mode: "code" } as any}>
+				<PromptsView onDone={jest.fn()} />
+			</ExtensionStateContext.Provider>,
+		)
 
 		const codeTab = screen.getByTestId("code-tab")
 		const askTab = screen.getByTestId("ask-tab")
@@ -68,16 +72,27 @@ describe("PromptsView", () => {
 		expect(codeTab).toHaveAttribute("data-active", "true")
 		expect(askTab).toHaveAttribute("data-active", "false")
 		expect(architectTab).toHaveAttribute("data-active", "false")
-		expect(architectTab).toHaveAttribute("data-active", "false")
 
-		// Click Ask tab
+		// Click Ask tab and update context
 		fireEvent.click(askTab)
+		rerender(
+			<ExtensionStateContext.Provider value={{ ...mockExtensionState, mode: "ask" } as any}>
+				<PromptsView onDone={jest.fn()} />
+			</ExtensionStateContext.Provider>,
+		)
+
 		expect(askTab).toHaveAttribute("data-active", "true")
 		expect(codeTab).toHaveAttribute("data-active", "false")
 		expect(architectTab).toHaveAttribute("data-active", "false")
 
-		// Click Architect tab
+		// Click Architect tab and update context
 		fireEvent.click(architectTab)
+		rerender(
+			<ExtensionStateContext.Provider value={{ ...mockExtensionState, mode: "architect" } as any}>
+				<PromptsView onDone={jest.fn()} />
+			</ExtensionStateContext.Provider>,
+		)
+
 		expect(architectTab).toHaveAttribute("data-active", "true")
 		expect(askTab).toHaveAttribute("data-active", "false")
 		expect(codeTab).toHaveAttribute("data-active", "false")
@@ -105,22 +120,56 @@ describe("PromptsView", () => {
 		})
 	})
 
-	it("resets prompt to default value", () => {
-		renderPromptsView()
+	it("resets role definition only for built-in modes", async () => {
+		const customMode = {
+			slug: "custom-mode",
+			name: "Custom Mode",
+			roleDefinition: "Custom role",
+			groups: [],
+		}
+
+		// Test with built-in mode (code)
+		const { unmount } = render(
+			<ExtensionStateContext.Provider
+				value={{ ...mockExtensionState, mode: "code", customModes: [customMode] } as any}>
+				<PromptsView onDone={jest.fn()} />
+			</ExtensionStateContext.Provider>,
+		)
 
-		const resetButton = screen.getByTestId("reset-prompt-button")
-		fireEvent.click(resetButton)
+		// Find and click the role definition reset button
+		const resetButton = screen.getByTestId("role-definition-reset")
+		expect(resetButton).toBeInTheDocument()
+		await fireEvent.click(resetButton)
 
+		// Verify it only resets role definition
 		expect(vscode.postMessage).toHaveBeenCalledWith({
 			type: "updatePrompt",
 			promptMode: "code",
 			customPrompt: { roleDefinition: undefined },
 		})
+
+		// Cleanup before testing custom mode
+		unmount()
+
+		// Test with custom mode
+		render(
+			<ExtensionStateContext.Provider
+				value={{ ...mockExtensionState, mode: "custom-mode", customModes: [customMode] } as any}>
+				<PromptsView onDone={jest.fn()} />
+			</ExtensionStateContext.Provider>,
+		)
+
+		// Verify reset button is not present for custom mode
+		expect(screen.queryByTestId("role-definition-reset")).not.toBeInTheDocument()
 	})
 
 	it("handles API configuration selection", () => {
 		renderPromptsView()
 
+		// Click the ENHANCE tab first to show the API config dropdown
+		const enhanceTab = screen.getByTestId("ENHANCE-tab")
+		fireEvent.click(enhanceTab)
+
 		const dropdown = screen.getByTestId("api-config-dropdown")
 		fireEvent(
 			dropdown,

webview-ui/src/components/settings/ApiOptions.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Dropdown } from "vscrui"
+import { Checkbox, Dropdown, Pane } from "vscrui"
 import type { DropdownOption } from "vscrui"
 import { VSCodeLink, VSCodeRadio, VSCodeRadioGroup, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { Fragment, memo, useCallback, useEffect, useMemo, useState } from "react"
@@ -45,7 +45,7 @@ interface ApiOptionsProps {
 }
 
 const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) => {
-	const { apiConfiguration, setApiConfiguration, uriScheme, handleInputChange } = useExtensionState()
+	const { apiConfiguration, uriScheme, handleInputChange } = useExtensionState()
 	const [ollamaModels, setOllamaModels] = useState<string[]>([])
 	const [lmStudioModels, setLmStudioModels] = useState<string[]>([])
 	const [vsCodeLmModels, setVsCodeLmModels] = useState<vscodemodels.LanguageModelChatSelector[]>([])
@@ -156,7 +156,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.apiKey || ""}
 						style={{ width: "100%" }}
 						type="password"
-						onChange={handleInputChange("apiKey")}
+						onInput={handleInputChange("apiKey")}
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>Anthropic API Key</span>
 					</VSCodeTextField>
@@ -166,7 +166,11 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						onChange={(checked: boolean) => {
 							setAnthropicBaseUrlSelected(checked)
 							if (!checked) {
-								setApiConfiguration({ ...apiConfiguration, anthropicBaseUrl: "" })
+								handleInputChange("anthropicBaseUrl")({
+									target: {
+										value: "",
+									},
+								})
 							}
 						}}>
 						Use custom base URL
@@ -177,7 +181,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 							value={apiConfiguration?.anthropicBaseUrl || ""}
 							style={{ width: "100%", marginTop: 3 }}
 							type="url"
-							onChange={handleInputChange("anthropicBaseUrl")}
+							onInput={handleInputChange("anthropicBaseUrl")}
 							placeholder="Default: https://api.anthropic.com"
 						/>
 					)}
@@ -206,7 +210,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.glamaApiKey || ""}
 						style={{ width: "100%" }}
 						type="password"
-						onChange={handleInputChange("glamaApiKey")}
+						onInput={handleInputChange("glamaApiKey")}
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>Glama API Key</span>
 					</VSCodeTextField>
@@ -235,7 +239,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.openAiNativeApiKey || ""}
 						style={{ width: "100%" }}
 						type="password"
-						onChange={handleInputChange("openAiNativeApiKey")}
+						onInput={handleInputChange("openAiNativeApiKey")}
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>OpenAI API Key</span>
 					</VSCodeTextField>
@@ -263,7 +267,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.mistralApiKey || ""}
 						style={{ width: "100%" }}
 						type="password"
-						onChange={handleInputChange("mistralApiKey")}
+						onInput={handleInputChange("mistralApiKey")}
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>Mistral API Key</span>
 					</VSCodeTextField>
@@ -294,7 +298,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.openRouterApiKey || ""}
 						style={{ width: "100%" }}
 						type="password"
-						onChange={handleInputChange("openRouterApiKey")}
+						onInput={handleInputChange("openRouterApiKey")}
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>OpenRouter API Key</span>
 					</VSCodeTextField>
@@ -448,7 +452,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 					<VSCodeTextField
 						value={apiConfiguration?.vertexProjectId || ""}
 						style={{ width: "100%" }}
-						onChange={handleInputChange("vertexProjectId")}
+						onInput={handleInputChange("vertexProjectId")}
 						placeholder="Enter Project ID...">
 						<span style={{ fontWeight: 500 }}>Google Cloud Project ID</span>
 					</VSCodeTextField>
@@ -506,7 +510,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.geminiApiKey || ""}
 						style={{ width: "100%" }}
 						type="password"
-						onChange={handleInputChange("geminiApiKey")}
+						onInput={handleInputChange("geminiApiKey")}
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>Gemini API Key</span>
 					</VSCodeTextField>
@@ -534,7 +538,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.openAiBaseUrl || ""}
 						style={{ width: "100%" }}
 						type="url"
-						onChange={handleInputChange("openAiBaseUrl")}
+						onInput={handleInputChange("openAiBaseUrl")}
 						placeholder={"Enter base URL..."}>
 						<span style={{ fontWeight: 500 }}>Base URL</span>
 					</VSCodeTextField>
@@ -542,7 +546,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.openAiApiKey || ""}
 						style={{ width: "100%" }}
 						type="password"
-						onChange={handleInputChange("openAiApiKey")}
+						onInput={handleInputChange("openAiApiKey")}
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>API Key</span>
 					</VSCodeTextField>
@@ -558,12 +562,25 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 							Enable streaming
 						</Checkbox>
 					</div>
+					<Checkbox
+						checked={apiConfiguration?.openAiUseAzure ?? false}
+						onChange={(checked: boolean) => {
+							handleInputChange("openAiUseAzure")({
+								target: { value: checked },
+							})
+						}}>
+						Use Azure
+					</Checkbox>
 					<Checkbox
 						checked={azureApiVersionSelected}
 						onChange={(checked: boolean) => {
 							setAzureApiVersionSelected(checked)
 							if (!checked) {
-								setApiConfiguration({ ...apiConfiguration, azureApiVersion: "" })
+								handleInputChange("azureApiVersion")({
+									target: {
+										value: "",
+									},
+								})
 							}
 						}}>
 						Set Azure API version
@@ -572,10 +589,436 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						<VSCodeTextField
 							value={apiConfiguration?.azureApiVersion || ""}
 							style={{ width: "100%", marginTop: 3 }}
-							onChange={handleInputChange("azureApiVersion")}
+							onInput={handleInputChange("azureApiVersion")}
 							placeholder={`Default: ${azureOpenAiDefaultApiVersion}`}
 						/>
 					)}
+
+					<div
+						style={{
+							marginTop: 15,
+						}}
+					/>
+					<Pane
+						title="Model Configuration"
+						open={false}
+						actions={[
+							{
+								iconName: "refresh",
+								onClick: () =>
+									handleInputChange("openAiCustomModelInfo")({
+										target: { value: openAiModelInfoSaneDefaults },
+									}),
+							},
+						]}>
+						<div
+							style={{
+								padding: 15,
+								backgroundColor: "var(--vscode-editor-background)",
+							}}>
+							<p
+								style={{
+									fontSize: "12px",
+									color: "var(--vscode-descriptionForeground)",
+									margin: "0 0 15px 0",
+									lineHeight: "1.4",
+								}}>
+								Configure the capabilities and pricing for your custom OpenAI-compatible model. <br />
+								Be careful for the model capabilities, as they can affect how Roo Code can work.
+							</p>
+
+							{/* Capabilities Section */}
+							<div
+								style={{
+									marginBottom: 20,
+									padding: 12,
+									backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+									borderRadius: 4,
+								}}>
+								<span
+									style={{
+										fontWeight: 500,
+										fontSize: "12px",
+										display: "block",
+										marginBottom: 12,
+										color: "var(--vscode-editor-foreground)",
+									}}>
+									Model Capabilities
+								</span>
+								<div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+									<div className="token-config-field">
+										<VSCodeTextField
+											value={
+												apiConfiguration?.openAiCustomModelInfo?.maxTokens?.toString() ||
+												openAiModelInfoSaneDefaults.maxTokens?.toString() ||
+												""
+											}
+											type="text"
+											style={{
+												width: "100%",
+												borderColor: (() => {
+													const value = apiConfiguration?.openAiCustomModelInfo?.maxTokens
+													if (!value) return "var(--vscode-input-border)"
+													return value > 0
+														? "var(--vscode-charts-green)"
+														: "var(--vscode-errorForeground)"
+												})(),
+											}}
+											title="Maximum number of tokens the model can generate in a single response"
+											onChange={(e: any) => {
+												const value = parseInt(e.target.value)
+												handleInputChange("openAiCustomModelInfo")({
+													target: {
+														value: {
+															...(apiConfiguration?.openAiCustomModelInfo ||
+																openAiModelInfoSaneDefaults),
+															maxTokens: isNaN(value) ? undefined : value,
+														},
+													},
+												})
+											}}
+											placeholder="e.g. 4096">
+											<span style={{ fontWeight: 500 }}>Max Output Tokens</span>
+										</VSCodeTextField>
+										<div
+											style={{
+												fontSize: "11px",
+												color: "var(--vscode-descriptionForeground)",
+												marginTop: 4,
+												display: "flex",
+												alignItems: "center",
+												gap: 4,
+											}}>
+											<i className="codicon codicon-info" style={{ fontSize: "12px" }}></i>
+											<span>
+												Maximum number of tokens the model can generate in a response. <br />
+												(-1 is depend on server)
+											</span>
+										</div>
+									</div>
+
+									<div className="token-config-field">
+										<VSCodeTextField
+											value={
+												apiConfiguration?.openAiCustomModelInfo?.contextWindow?.toString() ||
+												openAiModelInfoSaneDefaults.contextWindow?.toString() ||
+												""
+											}
+											type="text"
+											style={{
+												width: "100%",
+												borderColor: (() => {
+													const value = apiConfiguration?.openAiCustomModelInfo?.contextWindow
+													if (!value) return "var(--vscode-input-border)"
+													return value > 0
+														? "var(--vscode-charts-green)"
+														: "var(--vscode-errorForeground)"
+												})(),
+											}}
+											title="Total number of tokens (input + output) the model can process in a single request"
+											onChange={(e: any) => {
+												const parsed = parseInt(e.target.value)
+												handleInputChange("openAiCustomModelInfo")({
+													target: {
+														value: {
+															...(apiConfiguration?.openAiCustomModelInfo ||
+																openAiModelInfoSaneDefaults),
+															contextWindow:
+																e.target.value === ""
+																	? undefined
+																	: isNaN(parsed)
+																		? openAiModelInfoSaneDefaults.contextWindow
+																		: parsed,
+														},
+													},
+												})
+											}}
+											placeholder="e.g. 128000">
+											<span style={{ fontWeight: 500 }}>Context Window Size</span>
+										</VSCodeTextField>
+										<div
+											style={{
+												fontSize: "11px",
+												color: "var(--vscode-descriptionForeground)",
+												marginTop: 4,
+												display: "flex",
+												alignItems: "center",
+												gap: 4,
+											}}>
+											<i className="codicon codicon-info" style={{ fontSize: "12px" }}></i>
+											<span>
+												Total tokens (input + output) the model can process. This will help Roo
+												Code run correctly.
+											</span>
+										</div>
+									</div>
+
+									<div
+										style={{
+											backgroundColor: "var(--vscode-editor-background)",
+											padding: "12px",
+											borderRadius: "4px",
+											marginTop: "8px",
+											border: "1px solid var(--vscode-input-border)",
+											transition: "background-color 0.2s ease",
+										}}>
+										<span
+											style={{
+												fontSize: "11px",
+												fontWeight: 500,
+												color: "var(--vscode-editor-foreground)",
+												display: "block",
+												marginBottom: "10px",
+											}}>
+											Model Features
+										</span>
+
+										<div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+											<div className="feature-toggle">
+												<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+													<Checkbox
+														checked={
+															apiConfiguration?.openAiCustomModelInfo?.supportsImages ??
+															openAiModelInfoSaneDefaults.supportsImages
+														}
+														onChange={(checked: boolean) => {
+															handleInputChange("openAiCustomModelInfo")({
+																target: {
+																	value: {
+																		...(apiConfiguration?.openAiCustomModelInfo ||
+																			openAiModelInfoSaneDefaults),
+																		supportsImages: checked,
+																	},
+																},
+															})
+														}}>
+														<span style={{ fontWeight: 500 }}>Image Support</span>
+													</Checkbox>
+													<i
+														className="codicon codicon-info"
+														title="Enable if the model can process and understand images in the input. Required for image-based assistance and visual code understanding."
+														style={{
+															fontSize: "12px",
+															color: "var(--vscode-descriptionForeground)",
+															cursor: "help",
+														}}
+													/>
+												</div>
+												<p
+													style={{
+														fontSize: "11px",
+														color: "var(--vscode-descriptionForeground)",
+														marginLeft: "24px",
+														marginTop: "4px",
+														lineHeight: "1.4",
+													}}>
+													Allows the model to analyze and understand images, essential for
+													visual code assistance
+												</p>
+											</div>
+
+											<div
+												className="feature-toggle"
+												style={{
+													borderTop: "1px solid var(--vscode-input-border)",
+													paddingTop: "12px",
+												}}>
+												<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+													<Checkbox
+														checked={
+															apiConfiguration?.openAiCustomModelInfo
+																?.supportsComputerUse ?? false
+														}
+														onChange={(checked: boolean) => {
+															handleInputChange("openAiCustomModelInfo")({
+																target: {
+																	value: {
+																		...(apiConfiguration?.openAiCustomModelInfo ||
+																			openAiModelInfoSaneDefaults),
+																		supportsComputerUse: checked,
+																	},
+																},
+															})
+														}}>
+														<span style={{ fontWeight: 500 }}>Computer Use</span>
+													</Checkbox>
+													<i
+														className="codicon codicon-info"
+														title="Enable if the model can interact with your computer through commands and file operations. Required for automated tasks and file modifications."
+														style={{
+															fontSize: "12px",
+															color: "var(--vscode-descriptionForeground)",
+															cursor: "help",
+														}}
+													/>
+												</div>
+												<p
+													style={{
+														fontSize: "11px",
+														color: "var(--vscode-descriptionForeground)",
+														marginLeft: "24px",
+														marginTop: "4px",
+														lineHeight: "1.4",
+													}}>
+													This model feature is for computer use like sonnet 3.5 support
+												</p>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							{/* Pricing Section */}
+							<div
+								style={{
+									backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+									padding: "12px",
+									borderRadius: "4px",
+									marginTop: "15px",
+								}}>
+								<div style={{ marginBottom: "12px" }}>
+									<span
+										style={{
+											fontWeight: 500,
+											fontSize: "12px",
+											color: "var(--vscode-editor-foreground)",
+											display: "block",
+											marginBottom: "4px",
+										}}>
+										Model Pricing
+									</span>
+									<span
+										style={{
+											fontSize: "11px",
+											color: "var(--vscode-descriptionForeground)",
+											display: "block",
+										}}>
+										Configure token-based pricing in USD per million tokens
+									</span>
+								</div>
+
+								<div
+									style={{
+										display: "grid",
+										gridTemplateColumns: "1fr 1fr",
+										gap: "12px",
+										backgroundColor: "var(--vscode-editor-background)",
+										padding: "12px",
+										borderRadius: "4px",
+									}}>
+									<div className="price-input">
+										<VSCodeTextField
+											value={
+												apiConfiguration?.openAiCustomModelInfo?.inputPrice?.toString() ??
+												openAiModelInfoSaneDefaults.inputPrice?.toString() ??
+												""
+											}
+											type="text"
+											style={{
+												width: "100%",
+												borderColor: (() => {
+													const value = apiConfiguration?.openAiCustomModelInfo?.inputPrice
+													if (!value && value !== 0) return "var(--vscode-input-border)"
+													return value >= 0
+														? "var(--vscode-charts-green)"
+														: "var(--vscode-errorForeground)"
+												})(),
+											}}
+											onChange={(e: any) => {
+												const parsed = parseFloat(e.target.value)
+												handleInputChange("openAiCustomModelInfo")({
+													target: {
+														value: {
+															...(apiConfiguration?.openAiCustomModelInfo ??
+																openAiModelInfoSaneDefaults),
+															inputPrice:
+																e.target.value === ""
+																	? undefined
+																	: isNaN(parsed)
+																		? openAiModelInfoSaneDefaults.inputPrice
+																		: parsed,
+														},
+													},
+												})
+											}}
+											placeholder="e.g. 0.0001">
+											<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+												<span style={{ fontWeight: 500 }}>Input Price</span>
+												<i
+													className="codicon codicon-info"
+													title="Cost per million tokens in the input/prompt. This affects the cost of sending context and instructions to the model."
+													style={{
+														fontSize: "12px",
+														color: "var(--vscode-descriptionForeground)",
+														cursor: "help",
+													}}
+												/>
+											</div>
+										</VSCodeTextField>
+									</div>
+
+									<div className="price-input">
+										<VSCodeTextField
+											value={
+												apiConfiguration?.openAiCustomModelInfo?.outputPrice?.toString() ||
+												openAiModelInfoSaneDefaults.outputPrice?.toString() ||
+												""
+											}
+											type="text"
+											style={{
+												width: "100%",
+												borderColor: (() => {
+													const value = apiConfiguration?.openAiCustomModelInfo?.outputPrice
+													if (!value && value !== 0) return "var(--vscode-input-border)"
+													return value >= 0
+														? "var(--vscode-charts-green)"
+														: "var(--vscode-errorForeground)"
+												})(),
+											}}
+											onChange={(e: any) => {
+												const parsed = parseFloat(e.target.value)
+												handleInputChange("openAiCustomModelInfo")({
+													target: {
+														value: {
+															...(apiConfiguration?.openAiCustomModelInfo ||
+																openAiModelInfoSaneDefaults),
+															outputPrice:
+																e.target.value === ""
+																	? undefined
+																	: isNaN(parsed)
+																		? openAiModelInfoSaneDefaults.outputPrice
+																		: parsed,
+														},
+													},
+												})
+											}}
+											placeholder="e.g. 0.0002">
+											<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+												<span style={{ fontWeight: 500 }}>Output Price</span>
+												<i
+													className="codicon codicon-info"
+													title="Cost per million tokens in the model's response. This affects the cost of generated content and completions."
+													style={{
+														fontSize: "12px",
+														color: "var(--vscode-descriptionForeground)",
+														cursor: "help",
+													}}
+												/>
+											</div>
+										</VSCodeTextField>
+									</div>
+								</div>
+							</div>
+						</div>
+					</Pane>
+					<div
+						style={{
+							marginTop: 15,
+						}}
+					/>
+
+					{/* end Model Info Configuration */}
+
 					<p
 						style={{
 							fontSize: "12px",
@@ -583,7 +1026,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 							color: "var(--vscode-descriptionForeground)",
 						}}>
 						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best
+							(<span style={{ fontWeight: 500 }}>Note:</span> Roo Code uses complex prompts and works best
 							with Claude models. Less capable models may not work as expected.)
 						</span>
 					</p>
@@ -596,14 +1039,14 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.lmStudioBaseUrl || ""}
 						style={{ width: "100%" }}
 						type="url"
-						onChange={handleInputChange("lmStudioBaseUrl")}
+						onInput={handleInputChange("lmStudioBaseUrl")}
 						placeholder={"Default: http://localhost:1234"}>
 						<span style={{ fontWeight: 500 }}>Base URL (optional)</span>
 					</VSCodeTextField>
 					<VSCodeTextField
 						value={apiConfiguration?.lmStudioModelId || ""}
 						style={{ width: "100%" }}
-						onChange={handleInputChange("lmStudioModelId")}
+						onInput={handleInputChange("lmStudioModelId")}
 						placeholder={"e.g. meta-llama-3.1-8b-instruct"}>
 						<span style={{ fontWeight: 500 }}>Model ID</span>
 					</VSCodeTextField>
@@ -652,7 +1095,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						</VSCodeLink>{" "}
 						feature to use it with this extension.{" "}
 						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best
+							(<span style={{ fontWeight: 500 }}>Note:</span> Roo Code uses complex prompts and works best
 							with Claude models. Less capable models may not work as expected.)
 						</span>
 					</p>
@@ -665,7 +1108,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.deepSeekApiKey || ""}
 						style={{ width: "100%" }}
 						type="password"
-						onChange={handleInputChange("deepSeekApiKey")}
+						onInput={handleInputChange("deepSeekApiKey")}
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>DeepSeek API Key</span>
 					</VSCodeTextField>
@@ -743,7 +1186,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 								fontWeight: 500,
 							}}>
 							Note: This is a very experimental integration and may not work as expected. Please report
-							any issues to the Roo-Cline GitHub repository.
+							any issues to the Roo-Code GitHub repository.
 						</p>
 					</div>
 				</div>
@@ -755,14 +1198,14 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						value={apiConfiguration?.ollamaBaseUrl || ""}
 						style={{ width: "100%" }}
 						type="url"
-						onChange={handleInputChange("ollamaBaseUrl")}
+						onInput={handleInputChange("ollamaBaseUrl")}
 						placeholder={"Default: http://localhost:11434"}>
 						<span style={{ fontWeight: 500 }}>Base URL (optional)</span>
 					</VSCodeTextField>
 					<VSCodeTextField
 						value={apiConfiguration?.ollamaModelId || ""}
 						style={{ width: "100%" }}
-						onChange={handleInputChange("ollamaModelId")}
+						onInput={handleInputChange("ollamaModelId")}
 						placeholder={"e.g. llama3.1"}>
 						<span style={{ fontWeight: 500 }}>Model ID</span>
 					</VSCodeTextField>
@@ -806,7 +1249,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 							quickstart guide.
 						</VSCodeLink>
 						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best
+							(<span style={{ fontWeight: 500 }}>Note:</span> Roo Code uses complex prompts and works best
 							with Claude models. Less capable models may not work as expected.)
 						</span>
 					</p>
@@ -1057,7 +1500,7 @@ export function normalizeApiConfiguration(apiConfiguration?: ApiConfiguration) {
 			return {
 				selectedProvider: provider,
 				selectedModelId: apiConfiguration?.openAiModelId || "",
-				selectedModelInfo: openAiModelInfoSaneDefaults,
+				selectedModelInfo: apiConfiguration?.openAiCustomModelInfo || openAiModelInfoSaneDefaults,
 			}
 		case "ollama":
 			return {

webview-ui/src/components/settings/GlamaModelPicker.tsx

@@ -167,17 +167,8 @@ const GlamaModelPicker: React.FC = () => {
 						placeholder="Search and select a model..."
 						value={searchTerm}
 						onInput={(e) => {
-							const newModelId = (e.target as HTMLInputElement)?.value?.toLowerCase()
-							const apiConfig = {
-								...apiConfiguration,
-								openAiModelId: newModelId,
-							}
-							setApiConfiguration(apiConfig)
-							setSearchTerm(newModelId)
-							setIsDropdownVisible(true)
-						}}
-						onChange={(e) => {
 							handleModelChange((e.target as HTMLInputElement)?.value?.toLowerCase())
+							setIsDropdownVisible(true)
 						}}
 						onFocus={() => setIsDropdownVisible(true)}
 						onKeyDown={handleKeyDown}
@@ -240,7 +231,7 @@ const GlamaModelPicker: React.FC = () => {
 					<VSCodeLink style={{ display: "inline", fontSize: "inherit" }} href="https://glama.ai/models">
 						Glama.
 					</VSCodeLink>
-					If you're unsure which model to choose, Cline works best with{" "}
+					If you're unsure which model to choose, Roo Code works best with{" "}
 					<VSCodeLink
 						style={{ display: "inline", fontSize: "inherit" }}
 						onClick={() => handleModelChange("anthropic/claude-3.5-sonnet")}>

webview-ui/src/components/settings/OpenAiModelPicker.tsx

@@ -159,17 +159,8 @@ const OpenAiModelPicker: React.FC = () => {
 						placeholder="Search and select a model..."
 						value={searchTerm}
 						onInput={(e) => {
-							const newModelId = (e.target as HTMLInputElement)?.value?.toLowerCase()
-							const apiConfig = {
-								...apiConfiguration,
-								openAiModelId: newModelId,
-							}
-							setApiConfiguration(apiConfig)
-							setSearchTerm(newModelId)
-							setIsDropdownVisible(true)
-						}}
-						onChange={(e) => {
 							handleModelChange((e.target as HTMLInputElement)?.value?.toLowerCase())
+							setIsDropdownVisible(true)
 						}}
 						onFocus={() => setIsDropdownVisible(true)}
 						onKeyDown={handleKeyDown}

webview-ui/src/components/settings/OpenRouterModelPicker.tsx

@@ -167,17 +167,8 @@ const OpenRouterModelPicker: React.FC = () => {
 						placeholder="Search and select a model..."
 						value={searchTerm}
 						onInput={(e) => {
-							const newModelId = (e.target as HTMLInputElement)?.value?.toLowerCase()
-							const apiConfig = {
-								...apiConfiguration,
-								openAiModelId: newModelId,
-							}
-							setApiConfiguration(apiConfig)
-							setSearchTerm(newModelId)
-							setIsDropdownVisible(true)
-						}}
-						onChange={(e) => {
 							handleModelChange((e.target as HTMLInputElement)?.value?.toLowerCase())
+							setIsDropdownVisible(true)
 						}}
 						onFocus={() => setIsDropdownVisible(true)}
 						onKeyDown={handleKeyDown}
@@ -240,7 +231,7 @@ const OpenRouterModelPicker: React.FC = () => {
 					<VSCodeLink style={{ display: "inline", fontSize: "inherit" }} href="https://openrouter.ai/models">
 						OpenRouter.
 					</VSCodeLink>
-					If you're unsure which model to choose, Cline works best with{" "}
+					If you're unsure which model to choose, Roo Code works best with{" "}
 					<VSCodeLink
 						style={{ display: "inline", fontSize: "inherit" }}
 						onClick={() => handleModelChange("anthropic/claude-3.5-sonnet:beta")}>

webview-ui/src/components/settings/SettingsView.tsx

@@ -193,9 +193,9 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 				<div style={{ marginBottom: 40 }}>
 					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Auto-Approve Settings</h3>
 					<p style={{ fontSize: "12px", marginBottom: 15, color: "var(--vscode-descriptionForeground)" }}>
-						The following settings allow Cline to automatically perform operations without requiring
-						approval. Enable these settings only if you fully trust the AI and understand the associated
-						security risks.
+						The following settings allow Roo to automatically perform operations without requiring approval.
+						Enable these settings only if you fully trust the AI and understand the associated security
+						risks.
 					</p>
 
 					<div style={{ marginBottom: 15 }}>
@@ -210,7 +210,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 								marginTop: "5px",
 								color: "var(--vscode-descriptionForeground)",
 							}}>
-							When enabled, Cline will automatically view directory contents and read files without
+							When enabled, Roo will automatically view directory contents and read files without
 							requiring you to click the Approve button.
 						</p>
 					</div>
@@ -485,7 +485,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 								marginTop: "5px",
 								color: "var(--vscode-descriptionForeground)",
 							}}>
-							When enabled, Cline will play sound effects for notifications and events.
+							When enabled, Roo will play sound effects for notifications and events.
 						</p>
 					</div>
 					{soundEnabled && (
@@ -560,7 +560,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 								marginTop: "5px",
 								color: "var(--vscode-descriptionForeground)",
 							}}>
-							When enabled, Cline will be able to edit files more quickly and will automatically reject
+							When enabled, Roo will be able to edit files more quickly and will automatically reject
 							truncated full-file writes. Works best with the latest Claude 3.5 Sonnet model.
 						</p>
 
@@ -635,12 +635,12 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					}}>
 					<p style={{ wordWrap: "break-word", margin: 0, padding: 0 }}>
 						If you have any questions or feedback, feel free to open an issue at{" "}
-						<VSCodeLink href="https://github.com/RooVetGit/Roo-Cline" style={{ display: "inline" }}>
-							github.com/RooVetGit/Roo-Cline
+						<VSCodeLink href="https://github.com/RooVetGit/Roo-Code" style={{ display: "inline" }}>
+							github.com/RooVetGit/Roo-Code
 						</VSCodeLink>{" "}
 						or join{" "}
-						<VSCodeLink href="https://www.reddit.com/r/roocline/" style={{ display: "inline" }}>
-							reddit.com/r/roocline
+						<VSCodeLink href="https://www.reddit.com/r/RooCode/" style={{ display: "inline" }}>
+							reddit.com/r/RooCode
 						</VSCodeLink>
 					</p>
 					<p style={{ fontStyle: "italic", margin: "10px 0 0 0", padding: 0, marginBottom: 100 }}>

webview-ui/src/components/welcome/WelcomeView.tsx

@@ -22,7 +22,7 @@ const WelcomeView = () => {
 
 	return (
 		<div style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, padding: "0 20px" }}>
-			<h2>Hi, I'm Cline</h2>
+			<h2>Hi, I'm Roo!</h2>
 			<p>
 				I can do all kinds of tasks thanks to the latest breakthroughs in agentic coding capabilities and access
 				to tools that let me create & edit files, explore complex projects, use the browser, and execute

webview-ui/src/context/ExtensionStateContext.tsx

@@ -14,8 +14,8 @@ import { convertTextMateToHljs } from "../utils/textMateToHljs"
 import { findLastIndex } from "../../../src/shared/array"
 import { McpServer } from "../../../src/shared/mcp"
 import { checkExistKey } from "../../../src/shared/checkExistApiConfig"
-import { Mode } from "../../../src/core/prompts/types"
-import { CustomPrompts, defaultModeSlug, defaultPrompts } from "../../../src/shared/modes"
+import { Mode, CustomModePrompts, defaultModeSlug, defaultPrompts, ModeConfig } from "../../../src/shared/modes"
+import { CustomSupportPrompts } from "../../../src/shared/support-prompt"
 
 export interface ExtensionStateContextType extends ExtensionState {
 	didHydrateState: boolean
@@ -58,7 +58,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	onUpdateApiConfig: (apiConfig: ApiConfiguration) => void
 	mode: Mode
 	setMode: (value: Mode) => void
-	setCustomPrompts: (value: CustomPrompts) => void
+	setCustomModePrompts: (value: CustomModePrompts) => void
+	setCustomSupportPrompts: (value: CustomSupportPrompts) => void
 	enhancementApiConfigId?: string
 	setEnhancementApiConfigId: (value: string) => void
 	experimentalDiffStrategy: boolean
@@ -66,6 +67,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	autoApprovalEnabled?: boolean
 	setAutoApprovalEnabled: (value: boolean) => void
 	handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
+	customModes: ModeConfig[]
+	setCustomModes: (value: ModeConfig[]) => void
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -92,11 +95,14 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		currentApiConfigName: "default",
 		listApiConfigMeta: [],
 		mode: defaultModeSlug,
-		customPrompts: defaultPrompts,
+		customModePrompts: defaultPrompts,
+		customSupportPrompts: {},
 		enhancementApiConfigId: "",
 		experimentalDiffStrategy: false,
 		autoApprovalEnabled: false,
+		customModes: [],
 	})
+
 	const [didHydrateState, setDidHydrateState] = useState(false)
 	const [showWelcome, setShowWelcome] = useState(false)
 	const [theme, setTheme] = useState<any>(undefined)
@@ -267,13 +273,15 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setListApiConfigMeta,
 		onUpdateApiConfig,
 		setMode: (value: Mode) => setState((prevState) => ({ ...prevState, mode: value })),
-		setCustomPrompts: (value) => setState((prevState) => ({ ...prevState, customPrompts: value })),
+		setCustomModePrompts: (value) => setState((prevState) => ({ ...prevState, customModePrompts: value })),
+		setCustomSupportPrompts: (value) => setState((prevState) => ({ ...prevState, customSupportPrompts: value })),
 		setEnhancementApiConfigId: (value) =>
 			setState((prevState) => ({ ...prevState, enhancementApiConfigId: value })),
 		setExperimentalDiffStrategy: (value) =>
 			setState((prevState) => ({ ...prevState, experimentalDiffStrategy: value })),
 		setAutoApprovalEnabled: (value) => setState((prevState) => ({ ...prevState, autoApprovalEnabled: value })),
 		handleInputChange,
+		setCustomModes: (value) => setState((prevState) => ({ ...prevState, customModes: value })),
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>

webview-ui/src/index.css

@@ -119,6 +119,11 @@ https://github.com/microsoft/vscode-webview-ui-toolkit/tree/main/src/dropdown#wi
 	margin-bottom: 2px;
 }
 
+/* Fix dropdown double scrollbar overflow */
+#api-provider > div > ul {
+	overflow: unset;
+}
+
 /* Fix scrollbar in dropdown */
 
 vscode-dropdown::part(listbox) {