refactor: Set git_dir during clone_or_init_repo and remove cwd params

.github/workflows/openhands-resolver.yml

@@ -24,7 +24,7 @@ on:
       LLM_MODEL:
         required: false
         type: string
-        default: "anthropic/claude-3-7-sonnet-20250219"
+        default: "anthropic/claude-3-5-sonnet-20241022"
       LLM_API_VERSION:
         required: false
         type: string

docs/generate-swagger-ui.js

@@ -4,7 +4,7 @@ const swaggerUiDist = require('swagger-ui-dist');
 
 /**
  * This script manually sets up Swagger UI for the Docusaurus documentation.
- *
+ * 
  * Why we need this approach:
  * 1. Docusaurus doesn't have a built-in way to integrate Swagger UI
  * 2. We need to copy the necessary files from swagger-ui-dist to our static directory
@@ -26,15 +26,15 @@ const files = fs.readdirSync(swaggerUiDistPath);
 files.forEach(file => {
   const sourcePath = path.join(swaggerUiDistPath, file);
   const targetPath = path.join(targetDir, file);
-
+  
   // Skip directories and non-essential files
-  if (fs.statSync(sourcePath).isDirectory() ||
-      file === 'package.json' ||
+  if (fs.statSync(sourcePath).isDirectory() || 
+      file === 'package.json' || 
       file === 'README.md' ||
       file.endsWith('.map')) {
     return;
   }
-
+  
   fs.copyFileSync(sourcePath, targetPath);
 });
 
@@ -54,13 +54,13 @@ const indexHtml = `
       overflow: -moz-scrollbars-vertical;
       overflow-y: scroll;
     }
-
+    
     *,
     *:before,
     *:after {
       box-sizing: inherit;
     }
-
+    
     body {
       margin: 0;
       background: #fafafa;
@@ -99,4 +99,4 @@ const indexHtml = `
 
 fs.writeFileSync(path.join(targetDir, 'index.html'), indexHtml);
 
-console.log('Swagger UI files generated successfully in static/swagger-ui/');
+console.log('Swagger UI files generated successfully in static/swagger-ui/');

docs/i18n/pt-BR/docusaurus-plugin-content-docs/current/usage/prompting/microagents-public.md

@@ -4,7 +4,7 @@
 
 Microagentes públicos são diretrizes especializadas acionadas por palavras-chave para todos os usuários do OpenHands.
 Eles são definidos em arquivos markdown no diretório
-[`microagents/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge).
+[`microagents/knowledge/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge).
 
 Microagentes públicos:
 - Monitoram comandos recebidos em busca de suas palavras-chave de acionamento.
@@ -15,7 +15,7 @@ Microagentes públicos:
 ## Microagentes Públicos Atuais
 
 Para mais informações sobre microagentes específicos, consulte seus arquivos de documentação individuais no
-diretório [`microagents/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/).
+diretório [`microagents/knowledge/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge/).
 
 ### Agente GitHub
 **Arquivo**: `github.md`
@@ -59,7 +59,7 @@ yes | npm install package-name
 ## Contribuindo com um Microagente Público
 
 Você pode criar seus próprios microagentes públicos adicionando novos arquivos markdown ao
-diretório [`microagents/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/).
+diretório [`microagents/knowledge/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge/).
 
 ### Melhores Práticas para Microagentes Públicos
 
@@ -81,7 +81,7 @@ Antes de criar um microagente público, considere:
 
 #### 2. Crie o Arquivo
 
-Crie um novo arquivo markdown em [`microagents/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/)
+Crie um novo arquivo markdown em [`microagents/knowledge/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge/)
 com um nome descritivo (por exemplo, `docker.md` para um agente focado em Docker).
 
 Atualize o arquivo com o frontmatter necessário [de acordo com o formato exigido](./microagents-overview#microagent-format)

docs/modules/usage/customization/repository.md

@@ -1,17 +1,18 @@
 # Repository Customization
 
-You can customize how OpenHands interacts with your repository by creating a
+You can customize how OpenHands works with your repository by creating a
 `.openhands` directory at the root level.
 
 ## Microagents
-
-Microagents allow you to extend OpenHands prompts with information specific to your project and define how OpenHands
-should function. See [Microagents Overview](../prompting/microagents-overview) for more information.
+You can use microagents to extend the OpenHands prompts with information
+about your project and how you want OpenHands to work. See
+[Repository Microagents](../prompting/microagents-repo) for more information.
 
 
 ## Setup Script
-You can add a `.openhands/setup.sh` file, which will run every time OpenHands begins working with your repository.
-This is an ideal location for installing dependencies, setting environment variables, and performing other setup tasks.
+You can add `.openhands/setup.sh`, which will be run every time OpenHands begins
+working with your repository. This is a good place to install dependencies, set
+environment variables, etc.
 
 For example:
 ```bash

docs/modules/usage/how-to/gitlab-runner.md

@@ -1 +0,0 @@
-# Using GitLab CI Runners

docs/modules/usage/prompting/microagents-keyword.md

@@ -1,49 +0,0 @@
-# Keyword-Triggered Microagents
-
-## Purpose
-
-Keyword-triggered microagents provide OpenHands with specific instructions that are activated when certain keywords
-appear in the prompt. This is useful for tailoring behavior based on particular tools, languages, or frameworks.
-
-## Microagent File
-
-Create a keyword-triggered microagent (example: `.openhands/microagents/trigger-keyword.md`) to include instructions
-that activate only for prompts with specific keywords.
-
-## Frontmatter Syntax
-
-Frontmatter is required for keyword-triggered microagents. It must be placed at the top of the file,
-above the guidelines.
-
-Enclose the frontmatter in triple dashes (---) and include the following fields:
-
-| Field      | Description                                      | Required | Default          |
-|------------|--------------------------------------------------|----------|------------------|
-| `name`     | A unique identifier for the microagent.          | Yes      | 'default'        |
-| `type`     | Type of microagent. Must be set to `knowledge`.  | Yes      | 'repo'           |
-| `triggers` | A list of keywords that activate the microagent. | Yes      | None             |
-| `agent`    | The agent this microagent applies to.            | No       | 'CodeActAgent'   |
-
-
-## Example
-
-```
----
-name: magic_word
-type: knowledge
-triggers:
-- yummyhappy
-- happyyummy
-agent: CodeActAgent
----
-
-The user has said the magic word. Respond with "That was delicious!"
-```
-
-Keyword-triggered microagents:
-- Monitor incoming prompts for specified trigger words.
-- Activate when relevant triggers are detected.
-- Apply their specialized knowledge and capabilities.
-- Follow defined guidelines and restrictions.
-
-[See examples of microagents triggered by keywords in the official OpenHands repository](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge)

docs/modules/usage/prompting/microagents-overview.md

@@ -1,40 +1,31 @@
 # Microagents Overview
 
-Microagents are specialized prompts that enhance OpenHands with domain-specific knowledge.
-They provide expert guidance, automate common tasks, and ensure consistent practices across projects.
+Microagents are specialized prompts that enhance OpenHands with domain-specific knowledge, repository-specific context
+and task-specific workflows. They help by providing expert guidance, automating common tasks, and ensuring
+consistent practices across projects.
 
-## Microagent Types
+## Microagent Categories
 
-Currently OpenHands supports the following types of microagents:
+Currently OpenHands supports two categories of microagents:
 
-- [General Repository Microagents](./microagents-repo): General guidelines for OpenHands about the repository.
-- [Keyword-Triggered Microagents](./microagents-keyword): Guidelines activated by specific keywords in prompts.
+- [Repository-specific Microagents](./microagents-repo): Repository-specific context and guidelines for OpenHands.
+- [Public Microagents](./microagents-public): General guidelines triggered by keywords for all OpenHands users.
 
-To customize OpenHands' behavior, create a .openhands/microagents/ directory in the root of your repository and
-add `<microagent_name>.md` files inside.
+A microagent is classified as repository-specific or public depending on its location:
 
-:::note
-Loaded microagents take up space in the context window.
-These microagents, alongside user messages, inform OpenHands about the task and the environment.
-:::
+- Repository-specific microagents are located in a repository's `.openhands/microagents/` directory
+- Public microagents are located in the official OpenHands repository inside the `/microagents` folder
 
-Example repository structure:
+When OpenHands works with a repository, it:
 
-```
-some-repository/
-└── .openhands/
-    └── microagents/
-        └── repo.md            # General repository guidelines
-        └── trigger_this.md    # Microagent triggered by specific keywords
-        └── trigger_that.md    # Microagent triggered by specific keywords
-```
+1. Loads **repository-specific** microagents from `.openhands/microagents/` if present in the repository.
+2. Loads **public knowledge** microagents triggered by keywords in conversations
+3. Loads **public tasks** microagents when explicitly requested by the user
 
-## Microagents Frontmatter Requirements
+You can check out the existing public microagents at the [official OpenHands repository](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/).
 
-Each microagent file may include frontmatter that provides additional information. In some cases, this frontmatter
-is required:
+## Microagent Format
 
-| Microagent Type                  | Frontmatter Requirement                               |
-|----------------------------------|-------------------------------------------------------|
-| `General Repository Microagents` | Required only if more than one of this type exists.   |
-| `Keyword-Triggered Microagents`  | Required.                                             |
+All microagents use markdown files with YAML frontmatter that have special instructions to help OpenHands activate them.
+
+Check out the [syntax documentation](./microagents-syntax) for a comprehensive guide on how to configure your microagents.

docs/modules/usage/prompting/microagents-public.md

@@ -1,16 +1,35 @@
-# Global Microagents
+# Public Microagents
 
 ## Overview
 
-Global microagents are [keyword-triggered microagents](./microagents-keyword) that apply to all OpenHands users.
+Public microagents provide specialized context and capabilities for all OpenHands users, regardless of their repository configuration. Unlike repository-specific microagents, public microagents are globally available across all repositories.
 
-## Contributing a Global Microagent
+Public microagents come in two types:
 
-You can create global microagents and share with the community by opening a pull request to the official repository.
+- **Knowledge microagents**: Automatically activated when keywords in conversations match their triggers
+- **Task microagents**: Explicitly invoked by users to guide through specific workflows
+
+Both types follow the same syntax and structure as repository-specific microagents, using markdown files with YAML frontmatter that define their behavior and capabilities. They are located in the official OpenHands repository under:
+
+- [`microagents/knowledge/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge) for knowledge microagents
+- [`microagents/tasks/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/tasks) for task microagents
+
+Public microagents:
+
+- Monitor incoming commands for their trigger words.
+- Activate when relevant triggers are detected.
+- Apply their specialized knowledge and capabilities.
+- Follow their specific guidelines and restrictions.
+
+When loading public microagents, OpenHands scans the official repository's microagents directories recursively, processing all markdown files except README.md. The system categorizes each microagent based on its `type` field in the YAML frontmatter, regardless of its exact file location within the knowledge or tasks directories.
+
+## Contributing a Public Microagent
+
+You can create public microagents and share with the community by opening a pull request to the official repository.
 
 See the [CONTRIBUTING.md](https://github.com/All-Hands-AI/OpenHands/blob/main/CONTRIBUTING.md) for specific instructions on how to contribute to OpenHands.
 
-### Global Microagents Best Practices
+### Public Microagents Best Practices
 
 - **Clear Scope**: Keep the microagent focused on a specific domain or task.
 - **Explicit Instructions**: Provide clear, unambiguous guidelines.
@@ -18,11 +37,11 @@ See the [CONTRIBUTING.md](https://github.com/All-Hands-AI/OpenHands/blob/main/CO
 - **Safety First**: Include necessary warnings and constraints.
 - **Integration Awareness**: Consider how the microagent interacts with other components.
 
-### Steps to Contribute a Global Microagent
+### Steps to Contribute a Public Microagent
 
-#### 1. Plan the Global Microagent
+#### 1. Plan the Public Microagent
 
-Before creating a global microagent, consider:
+Before creating a public microagent, consider:
 
 - What specific problem or use case will it address?
 - What unique capabilities or knowledge should it have?
@@ -32,19 +51,23 @@ Before creating a global microagent, consider:
 #### 2. Create File
 
 Create a new Markdown file with a descriptive name in the appropriate directory:
-[`microagents/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents)
 
-#### 3. Testing the Global Microagent
+- [`microagents/knowledge/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge) for knowledge microagents
+- [`microagents/tasks/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/tasks) for task microagents
 
-- Test the agent with various prompts.
-- Verify trigger words activate the agent correctly.
-- Ensure instructions are clear and comprehensive.
-- Check for potential conflicts and overlaps with existing agents.
+Ensure it follows the correct [syntax](./microagents-syntax.md) and [best practices](./microagents-syntax.md#markdown-content-best-practices).
+
+#### 3. Testing the Public Microagent
+
+- Test the agent with various prompts
+- Verify trigger words activate the agent correctly
+- Ensure instructions are clear and comprehensive
+- Check for potential conflicts and overlaps with existing agents
 
 #### 4. Submission Process
 
 Submit a pull request with:
 
-- The new microagent file.
-- Updated documentation if needed.
-- Description of the agent's purpose and capabilities.
+- The new microagent file
+- Updated documentation if needed
+- Description of the agent's purpose and capabilities

docs/modules/usage/prompting/microagents-repo.md

@@ -1,38 +1,117 @@
-# General Repository Microagents
+# Repository-specific Microagents
 
-## Purpose
+## Overview
 
-General guidelines for OpenHands to work more effectively with the repository.
+OpenHands can be customized to work more effectively with specific repositories by providing repository-specific context and guidelines.
 
-## Microagent File
+This section explains how to optimize OpenHands for your project.
 
-Create a general repository microagent (example: `.openhands/microagents/repo.md`) to include
-project-specific instructions, team practices, coding standards, and architectural guidelines that are relevant for
-**all** prompts in that repository.
+## Creating Repository Microagents
 
-## Frontmatter Syntax
+You can customize OpenHands' behavior for your repository by creating a `.openhands/microagents/` directory in your repository's root.
 
-The frontmatter for this type of microagent is optional, unless you plan to include more than one general
-repository microagent.
+You can enhance OpenHands' performance by adding custom microagents to your repository:
 
-Frontmatter should be enclosed in triple dashes (---) and may include the following fields:
+1. For overall repository-specific instructions, create a `.openhands/microagents/repo.md` file
+2. For reusable domain knowledge triggered by keywords, add multiple `.md` files to `.openhands/microagents/knowledge/`
+3. For common workflows and tasks, create multiple `.md` files to `.openhands/microagents/tasks/`
 
-| Field     | Description                             | Required                                                           | Default        |
-|-----------|-----------------------------------------|--------------------------------------------------------------------|----------------|
-| `name`    | A unique identifier for the microagent  | Required only if using more than one general repository microagent | 'default'      |
-| `agent`   | The agent this microagent applies to    | No                                                                 | 'CodeActAgent' |
+Check out the [best practices](./microagents-syntax.md#markdown-content-best-practices) for formatting the content of your custom microagent.
 
-## Example
+Keep in mind that loaded microagents take up space in the context window. It's crucial to strike a balance between the additional context provided by microagents and the instructions provided in the user's inputs.
+
+Note that you can use OpenHands to create new microagents. The public microagent [`add_agent`](https://github.com/All-Hands-AI/OpenHands/blob/main/microagents/knowledge/add_agent.md) is loaded to all OpenHands instance and can support you on this.
+
+## Types of Microagents
+
+OpenHands supports three primary types of microagents, each with specific purposes and features to enhance agent performance:
+
+- [repository](#repository-microagents)
+- [knowledge](#knowledge-microagents)
+- [tasks](#tasks-microagents)
+
+The standard directory structure within a repository is:
+
+- One main `repo.md` file containing repository-specific instructions
+- Additional `Knowledge` agents in `.openhands/microagents/knowledge/` directory
+- Additional `Task` agents in `.openhands/microagents/tasks/` directory
+
+When processing the `.openhands/microagents/` directory, OpenHands will recursively scan all subfolders and process any `.md` files (except `README.md`) it finds. The system determines the microagent type based on the `type` field in the YAML frontmatter, not by the file's location. However, for organizational clarity, it's recommended to follow the standard directory structure.
+
+### Repository Microagents
+
+The `Repository` microagent is loaded specifically from `.openhands/microagents/repo.md` and serves as the main
+repository-specific instruction file. This single file is automatically loaded whenever OpenHands works with that repository
+without requiring any keyword matching or explicit call from the user.
+
+OpenHands does not support multiple `repo.md` files in different locations or multiple microagents with type `repo`.
+
+If you need to organize different types of repository information, the recommended approach is to use a single `repo.md` file with well-structured sections rather than trying to create multiple microagents with the type `repo`.
+
+The best practice is to include project-specific instructions, team practices, coding standards, and architectural guidelines that are relevant for **all** prompts in that repository.
+
+Example structure:
 
 ```
----
-name: repo
----
-
-This project is a TODO application that allows users to track TODO items.
-
-To set it up, you can run `npm run build`.
-Always make sure the tests are passing before committing changes. You can run the tests by running `npm run test`.
+your-repository/
+└── .openhands/
+    └── microagents/
+        └── repo.md    # Repository-specific instructions
 ```
 
-[See more examples of general repository microagents here.](https://github.com/All-Hands-AI/OpenHands/tree/main/.openhands/microagents)
+[See the example in the official OpenHands repository](https://github.com/All-Hands-AI/OpenHands/blob/main/.openhands/microagents/repo.md?plain=1)
+
+### Knowledge Microagents
+
+Knowledge microagents provide specialized domain expertise:
+
+- Recommended to be located in `.openhands/microagents/knowledge/`
+- Triggered by specific keywords in conversations
+- Contain expertise on tools, languages, frameworks, and common practices
+
+Use knowledge microagents to trigger additional context relevant to specific technologies, tools, or workflows. For example, mentioning "git" in your conversation will automatically trigger git-related expertise to help with Git operations.
+
+Examples structure:
+
+```
+your-repository/
+└── .openhands/
+    └── microagents/
+        └── knowledge/
+            └── git.md
+            └── docker.md
+            └── python.md
+            └── ...
+        └── repo.md
+```
+
+You can find several real examples of `Knowledge` microagents in the [offical OpenHands repository](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge)
+
+### Tasks Microagents
+
+Task microagents guide users through interactive workflows:
+
+- Recommended to be located in `.openhands/microagents/tasks/`
+- Provide step-by-step processes for common development tasks
+- Accept inputs and adapt to different scenarios
+- Ensure consistent outcomes for complex operations
+
+Task microagents are a convenient way to store multi-step processes you perform regularly. For instance, you can create a `update_pr_description.md` microagent to automatically generate better pull request descriptions based on code changes.
+
+Examples structure:
+
+```
+your-repository/
+└── .openhands/
+    └── microagents/
+        └── tasks/
+            └── update_pr_description.md
+            └── address_pr_comments.md
+            └── get_test_to_pass.md
+            └── ...
+        └── knowledge/
+            └── ...
+        └── repo.md
+```
+
+You can find several real examples of `Tasks` microagents in the [offical OpenHands repository](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/tasks)

docs/modules/usage/prompting/microagents-syntax.md

@@ -0,0 +1,128 @@
+# Microagents Syntax
+
+Microagents are defined using markdown files with YAML frontmatter that specify their behavior, triggers, and capabilities.
+
+Find below a comprehensive description of the frontmatter syntax and other details about how to use each type of microagent available at OpenHands.
+
+## Frontmatter Schema
+
+Every microagent requires a YAML frontmatter section at the beginning of the file, enclosed by triple dashes (`---`). The fields are:
+
+| Field      | Description                                        | Required                 | Used By          |
+| ---------- | -------------------------------------------------- | ------------------------ | ---------------- |
+| `name`     | Unique identifier for the microagent               | Yes                      | All types        |
+| `type`     | Type of microagent: `repo`, `knowledge`, or `task` | Yes                      | All types        |
+| `version`  | Version number (Semantic versioning recommended)   | Yes                      | All types        |
+| `agent`    | The agent type (typically `CodeActAgent`)          | Yes                      | All types        |
+| `author`   | Creator of the microagent                          | No                       | All types        |
+| `triggers` | List of keywords that activate the microagent      | Yes for knowledge agents | Knowledge agents |
+| `inputs`   | Defines required user inputs for task execution    | Yes for task agents      | Task agents      |
+
+## Core Fields
+
+### `agent`
+
+**Purpose**: Specifies which agent implementation processes the microagent (typically `CodeActAgent`).
+
+- Defines a single agent responsible for processing the microagent
+- Must be available in the OpenHands system (see the [agent hub](https://github.com/All-Hands-AI/OpenHands/tree/main/openhands/agenthub))
+- If the specified agent is not active, the microagent will not be used
+
+### `triggers`
+
+**Purpose**: Defines keywords that activate the `knowledge` microagent.
+
+**Example**:
+
+```yaml
+triggers:
+  - kubernetes
+  - k8s
+  - docker
+  - security
+  - containers cluster
+```
+
+**Key points**:
+
+- Can include both single words and multi-word phrases
+- Case-insensitive matching is typically used
+- More specific triggers (like "docker compose") prevent false activations
+- Multiple triggers increase the chance of activation in relevant contexts
+- Unique triggers like "flarglebargle" can be used for testing or special functionality
+- Triggers should be carefully chosen to avoid unwanted activations or conflicts with other microagents
+- Common terms used in many conversations may cause the microagent to be activated too frequently
+
+When using multiple triggers, the microagent will be activated if any of the trigger words or phrases appear in the
+conversation.
+
+### `inputs`
+
+**Purpose**: Defines parameters required from the user when a `task` microagent is activated.
+
+**Schema**:
+
+```yaml
+inputs:
+  - name: INPUT_NAME # Used with {{ INPUT_NAME }}
+    description: 'Description of what this input is for'
+    required: true # Optional, defaults to true
+```
+
+**Key points**:
+
+- The `name` and `description` properties are required for each input
+- The `required` property is optional and defaults to `true`
+- Input values are referenced in the microagent body using double curly braces (e.g., `{{ INPUT_NAME }}`)
+- All inputs defined will be collected from the user before the task microagent executes
+
+**Variable Usage**: Reference input values using double curly braces `{{ INPUT_NAME }}`.
+
+## Example Formats
+
+### Repository Microagent
+
+Repository microagents provide context and guidelines for a specific repository.
+
+- Located at: `.openhands/microagents/repo.md`
+- Automatically loaded when working with the repository
+- Only one per repository
+
+The `Repository` microagent is loaded specifically from `.openhands/microagents/repo.md` and serves as the main
+repository-specific instruction file. This single file is automatically loaded whenever OpenHands works with that repository
+without requiring any keyword matching or explicit call from the user.
+
+[See the example in the official OpenHands repository](https://github.com/All-Hands-AI/OpenHands/blob/main/.openhands/microagents/repo.md?plain=1)
+
+### Knowledge Microagent
+
+Provides specialized domain expertise triggered by keywords.
+
+You can find several real examples of `Knowledge` microagents in the [offical OpenHands repository](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge)
+
+### Task Microagent
+
+When explicitly asked by the user, will guide through interactive workflows with specific inputs.
+
+You can find several real examples of `Tasks` microagents in the [offical OpenHands repository](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/tasks)
+
+## Markdown Content Best Practices
+
+After the frontmatter, compose the microagent body using Markdown syntax. Examples of elements you can include are:
+
+- Clear, concise instructions outlining the microagent's purpose and responsibilities
+- Specific guidelines and constraints the microagent should adhere to
+- Relevant code snippets and practical examples to illustrate key points
+- Step-by-step procedures for task agents, guiding users through workflows
+
+**Design Tips**:
+
+- Keep microagents focused with a clear purpose
+- Provide specific guidelines rather than general advice
+- Use distinctive triggers for knowledge agents
+- Keep content concise to minimize context window usage
+- Break large microagents into smaller, focused ones
+
+Aim for clarity, brevity, and practicality in your writing. Use formatting like bullet points, code blocks, and emphasis to enhance readability and comprehension.
+
+Remember that balancing microagents details with user input space is important for maintaining effective interactions.

docs/sidebars.ts

@@ -66,18 +66,18 @@ const sidebars: SidebarsConfig = {
             },
             {
               type: 'doc',
-              label: 'General Repository Microagents',
+              label: 'Repository-specific',
               id: 'usage/prompting/microagents-repo',
             },
             {
               type: 'doc',
-              label: 'Keyword-Triggered Microagents',
-              id: 'usage/prompting/microagents-keyword',
+              label: 'Public',
+              id: 'usage/prompting/microagents-public',
             },
             {
               type: 'doc',
-              label: 'Global Microagents',
-              id: 'usage/prompting/microagents-public',
+              label: 'Syntax',
+              id: 'usage/prompting/microagents-syntax',
             },
           ],
         },
@@ -268,4 +268,4 @@ const sidebars: SidebarsConfig = {
   ],
 };
 
-export default sidebars;
+export default sidebars;

docs/static/README.md

@@ -12,4 +12,4 @@ This file is used by the Swagger UI interface, which is accessible at `/swagger-
 
 The OpenAPI specification is placed in the static directory so that it's accessible at a predictable URL in the deployed site. This allows the Swagger UI to reference it directly.
 
-We only need one copy of the OpenAPI spec file, which is this one in the static directory.
+We only need one copy of the OpenAPI spec file, which is this one in the static directory.

frontend/__tests__/components/features/home/home-header.test.tsx

@@ -46,12 +46,10 @@ describe("HomeHeader", () => {
     await userEvent.click(launchButton);
 
     expect(createConversationSpy).toHaveBeenCalledExactlyOnceWith(
-      "gui",
       undefined,
       undefined,
       [],
       undefined,
-      undefined,
     );
 
     // expect to be redirected to /conversations/:conversationId

frontend/__tests__/components/features/home/repo-connector.test.tsx

@@ -155,7 +155,7 @@ describe("RepoConnector", () => {
 
     // select a repository from the dropdown
     const dropdown = await waitFor(() =>
-      within(repoConnector).getByTestId("repo-dropdown"),
+      within(repoConnector).getByTestId("repo-dropdown")
     );
     await userEvent.click(dropdown);
 
@@ -164,7 +164,6 @@ describe("RepoConnector", () => {
     await userEvent.click(launchButton);
 
     expect(createConversationSpy).toHaveBeenCalledExactlyOnceWith(
-      "gui",
       {
         full_name: "rbren/polaris",
         git_provider: "github",
@@ -174,7 +173,6 @@ describe("RepoConnector", () => {
       undefined,
       [],
       undefined,
-      undefined,
     );
   });
 

frontend/__tests__/components/features/home/task-card.test.tsx

@@ -11,6 +11,12 @@ import { AuthProvider } from "#/context/auth-context";
 import { TaskCard } from "#/components/features/home/tasks/task-card";
 import * as GitService from "#/api/git";
 import { GitRepository } from "#/types/git";
+import {
+  getFailingChecksPrompt,
+  getMergeConflictPrompt,
+  getOpenIssuePrompt,
+  getUnresolvedCommentsPrompt,
+} from "#/components/features/home/tasks/get-prompt-for-query";
 
 const MOCK_TASK_1: SuggestedTask = {
   issue_number: 123,
@@ -95,7 +101,7 @@ describe("TaskCard", () => {
     expect(createConversationSpy).toHaveBeenCalled();
   });
 
-  describe("creating suggested task conversation", () => {
+  describe("creating conversation prompts", () => {
     beforeEach(() => {
       const retrieveUserGitRepositoriesSpy = vi.spyOn(
         GitService,
@@ -107,7 +113,7 @@ describe("TaskCard", () => {
       });
     });
 
-    it("should call create conversation with suggest task trigger and selected suggested task", async () => {
+    it("should call create conversation with the merge conflict prompt", async () => {
       const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
 
       renderTaskCard(MOCK_TASK_1);
@@ -116,12 +122,74 @@ describe("TaskCard", () => {
       await userEvent.click(launchButton);
 
       expect(createConversationSpy).toHaveBeenCalledWith(
-        "suggested_task",
         MOCK_RESPOSITORIES[0],
-        undefined,
+        getMergeConflictPrompt(
+          MOCK_TASK_1.git_provider,
+          MOCK_TASK_1.issue_number,
+          MOCK_TASK_1.repo,
+        ),
+        [],
+        undefined,
+      );
+    });
+
+    it("should call create conversation with the failing checks prompt", async () => {
+      const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+
+      renderTaskCard(MOCK_TASK_2);
+
+      const launchButton = screen.getByTestId("task-launch-button");
+      await userEvent.click(launchButton);
+
+      expect(createConversationSpy).toHaveBeenCalledWith(
+        MOCK_RESPOSITORIES[1],
+        getFailingChecksPrompt(
+          MOCK_TASK_2.git_provider,
+          MOCK_TASK_2.issue_number,
+          MOCK_TASK_2.repo,
+        ),
+        [],
+        undefined,
+      );
+    });
+
+    it("should call create conversation with the unresolved comments prompt", async () => {
+      const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+
+      renderTaskCard(MOCK_TASK_3);
+
+      const launchButton = screen.getByTestId("task-launch-button");
+      await userEvent.click(launchButton);
+
+      expect(createConversationSpy).toHaveBeenCalledWith(
+        MOCK_RESPOSITORIES[2],
+        getUnresolvedCommentsPrompt(
+          MOCK_TASK_3.git_provider,
+          MOCK_TASK_3.issue_number,
+          MOCK_TASK_3.repo,
+        ),
+        [],
+        undefined,
+      );
+    });
+
+    it("should call create conversation with the open issue prompt", async () => {
+      const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+
+      renderTaskCard(MOCK_TASK_4);
+
+      const launchButton = screen.getByTestId("task-launch-button");
+      await userEvent.click(launchButton);
+
+      expect(createConversationSpy).toHaveBeenCalledWith(
+        MOCK_RESPOSITORIES[3],
+        getOpenIssuePrompt(
+          MOCK_TASK_4.git_provider,
+          MOCK_TASK_4.issue_number,
+          MOCK_TASK_4.repo,
+        ),
         [],
         undefined,
-        MOCK_TASK_1,
       );
     });
   });

frontend/__tests__/components/file-explorer/explorer-tree.test.tsx

@@ -0,0 +1,28 @@
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "test-utils";
+import { describe, afterEach, vi, it, expect } from "vitest";
+import { ExplorerTree } from "#/components/features/file-explorer/explorer-tree";
+
+const FILES = ["file-1-1.ts", "folder-1-2"];
+
+describe.skip("ExplorerTree", () => {
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should render the explorer", () => {
+    renderWithProviders(<ExplorerTree files={FILES} defaultOpen />);
+
+    expect(screen.getByText("file-1-1.ts")).toBeInTheDocument();
+    expect(screen.getByText("folder-1-2")).toBeInTheDocument();
+    // TODO: make sure children render
+  });
+
+  it("should render the explorer given the defaultExpanded prop", () => {
+    renderWithProviders(<ExplorerTree files={FILES} />);
+
+    expect(screen.queryByText("file-1-1.ts")).toBeInTheDocument();
+    expect(screen.queryByText("folder-1-2")).toBeInTheDocument();
+    // TODO: make sure children don't render
+  });
+});

frontend/__tests__/components/file-explorer/file-explorer.test.tsx

@@ -0,0 +1,64 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "test-utils";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { AgentState } from "#/types/agent-state";
+import { FileExplorer } from "#/components/features/file-explorer/file-explorer";
+import { FileService } from "#/api/file-service/file-service.api";
+
+const getFilesSpy = vi.spyOn(FileService, "getFiles");
+
+vi.mock("../../services/fileService", async () => ({
+  uploadFiles: vi.fn(),
+}));
+
+const renderFileExplorerWithRunningAgentState = () =>
+  renderWithProviders(<FileExplorer isOpen onToggle={() => {}} />, {
+    preloadedState: {
+      agent: {
+        curAgentState: AgentState.RUNNING,
+      },
+    },
+  });
+
+describe.skip("FileExplorer", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should get the workspace directory", async () => {
+    renderFileExplorerWithRunningAgentState();
+
+    expect(await screen.findByText("folder1")).toBeInTheDocument();
+    expect(await screen.findByText("file1.ts")).toBeInTheDocument();
+    expect(getFilesSpy).toHaveBeenCalledTimes(1); // once for root
+  });
+
+  it("should refetch the workspace when clicking the refresh button", async () => {
+    const user = userEvent.setup();
+    renderFileExplorerWithRunningAgentState();
+
+    expect(await screen.findByText("folder1")).toBeInTheDocument();
+    expect(await screen.findByText("file1.ts")).toBeInTheDocument();
+    expect(getFilesSpy).toHaveBeenCalledTimes(1); // once for root
+
+    const refreshButton = screen.getByTestId("refresh");
+    await user.click(refreshButton);
+
+    expect(getFilesSpy).toHaveBeenCalledTimes(2); // once for root, once for refresh button
+  });
+
+  it("should toggle the explorer visibility when clicking the toggle button", async () => {
+    const user = userEvent.setup();
+    renderFileExplorerWithRunningAgentState();
+
+    const folder1 = await screen.findByText("folder1");
+    expect(folder1).toBeInTheDocument();
+
+    const toggleButton = screen.getByTestId("toggle");
+    await user.click(toggleButton);
+
+    expect(folder1).toBeInTheDocument();
+    expect(folder1).not.toBeVisible();
+  });
+});

frontend/__tests__/components/file-explorer/tree-node.test.tsx

@@ -0,0 +1,110 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "test-utils";
+import { vi, describe, afterEach, it, expect } from "vitest";
+import TreeNode from "#/components/features/file-explorer/tree-node";
+import { FileService } from "#/api/file-service/file-service.api";
+
+const getFileSpy = vi.spyOn(FileService, "getFile");
+const getFilesSpy = vi.spyOn(FileService, "getFiles");
+
+vi.mock("../../services/fileService", async () => ({
+  uploadFile: vi.fn(),
+}));
+
+describe.skip("TreeNode", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render a file if property has no children", () => {
+    renderWithProviders(<TreeNode path="/file.ts" defaultOpen />);
+    expect(screen.getByText("file.ts")).toBeInTheDocument();
+  });
+
+  it("should render a folder if it's in a subdir", async () => {
+    renderWithProviders(<TreeNode path="/folder1/" defaultOpen />);
+    expect(getFilesSpy).toHaveBeenCalledWith("/folder1/");
+
+    expect(await screen.findByText("folder1")).toBeInTheDocument();
+    expect(await screen.findByText("file2.ts")).toBeInTheDocument();
+  });
+
+  it("should close a folder when clicking on it", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TreeNode path="/folder1/" defaultOpen />);
+
+    const folder1 = await screen.findByText("folder1");
+    const file2 = await screen.findByText("file2.ts");
+
+    expect(folder1).toBeInTheDocument();
+    expect(file2).toBeInTheDocument();
+
+    await user.click(folder1);
+
+    expect(folder1).toBeInTheDocument();
+    expect(screen.queryByText("file2.ts")).not.toBeInTheDocument();
+  });
+
+  it("should open a folder when clicking on it", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TreeNode path="/folder1/" />);
+
+    const folder1 = await screen.findByText("folder1");
+
+    expect(folder1).toBeInTheDocument();
+    expect(screen.queryByText("file2.ts")).not.toBeInTheDocument();
+
+    await user.click(folder1);
+    expect(getFilesSpy).toHaveBeenCalledWith("/folder1/");
+
+    expect(folder1).toBeInTheDocument();
+    expect(await screen.findByText("file2.ts")).toBeInTheDocument();
+  });
+
+  it("should call `OpenHands.getFile` and return the full path of a file when clicking on a file", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TreeNode path="/folder1/file2.ts" defaultOpen />);
+
+    const file2 = screen.getByText("file2.ts");
+    await user.click(file2);
+
+    expect(getFileSpy).toHaveBeenCalledWith("/folder1/file2.ts");
+  });
+
+  it("should render the full explorer given the defaultOpen prop", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TreeNode path="/" defaultOpen />);
+
+    expect(getFilesSpy).toHaveBeenCalledWith("/");
+
+    const file1 = await screen.findByText("file1.ts");
+    const folder1 = await screen.findByText("folder1");
+
+    expect(file1).toBeInTheDocument();
+    expect(folder1).toBeInTheDocument();
+    expect(screen.queryByText("file2.ts")).not.toBeInTheDocument();
+
+    await user.click(folder1);
+    expect(getFilesSpy).toHaveBeenCalledWith("folder1/");
+
+    expect(file1).toBeInTheDocument();
+    expect(folder1).toBeInTheDocument();
+    expect(await screen.findByText("file2.ts")).toBeInTheDocument();
+  });
+
+  it("should render all children as collapsed when defaultOpen is false", async () => {
+    renderWithProviders(<TreeNode path="/folder1/" defaultOpen={false} />);
+
+    const folder1 = await screen.findByText("folder1");
+
+    expect(folder1).toBeInTheDocument();
+    expect(screen.queryByText("file2.ts")).not.toBeInTheDocument();
+
+    await userEvent.click(folder1);
+    expect(getFilesSpy).toHaveBeenCalledWith("/folder1/");
+
+    expect(folder1).toBeInTheDocument();
+    expect(await screen.findByText("file2.ts")).toBeInTheDocument();
+  });
+});

frontend/__tests__/routes/app-settings.test.tsx

@@ -1,291 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import userEvent from "@testing-library/user-event";
-import AppSettingsScreen from "#/routes/app-settings";
-import OpenHands from "#/api/open-hands";
-import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
-import { AuthProvider } from "#/context/auth-context";
-import { AvailableLanguages } from "#/i18n";
-import * as CaptureConsent from "#/utils/handle-capture-consent";
-import * as ToastHandlers from "#/utils/custom-toast-handlers";
-
-const renderAppSettingsScreen = () =>
-  render(<AppSettingsScreen />, {
-    wrapper: ({ children }) => (
-      <QueryClientProvider client={new QueryClient()}>
-        <AuthProvider>{children}</AuthProvider>
-      </QueryClientProvider>
-    ),
-  });
-
-describe("Content", () => {
-  it("should render the screen", () => {
-    renderAppSettingsScreen();
-    screen.getByTestId("app-settings-screen");
-  });
-
-  it("should render the correct default values", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      language: "no",
-      user_consents_to_analytics: true,
-      enable_sound_notifications: true,
-    });
-
-    renderAppSettingsScreen();
-
-    await waitFor(() => {
-      const language = screen.getByTestId("language-input");
-      const analytics = screen.getByTestId("enable-analytics-switch");
-      const sound = screen.getByTestId("enable-sound-notifications-switch");
-
-      expect(language).toHaveValue("Norsk");
-      expect(analytics).toBeChecked();
-      expect(sound).toBeChecked();
-    });
-  });
-
-  it("should render the language options", async () => {
-    renderAppSettingsScreen();
-
-    const language = await screen.findByTestId("language-input");
-    await userEvent.click(language);
-
-    AvailableLanguages.forEach((lang) => {
-      const option = screen.getByText(lang.label);
-      expect(option).toBeInTheDocument();
-    });
-  });
-});
-
-describe("Form submission", () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("should submit the form with the correct values", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
-
-    renderAppSettingsScreen();
-
-    const language = await screen.findByTestId("language-input");
-    const analytics = await screen.findByTestId("enable-analytics-switch");
-    const sound = await screen.findByTestId(
-      "enable-sound-notifications-switch",
-    );
-
-    expect(language).toHaveValue("English");
-    expect(analytics).not.toBeChecked();
-    expect(sound).not.toBeChecked();
-
-    // change language
-    await userEvent.click(language);
-    const norsk = screen.getByText("Norsk");
-    await userEvent.click(norsk);
-    expect(language).toHaveValue("Norsk");
-
-    // toggle options
-    await userEvent.click(analytics);
-    expect(analytics).toBeChecked();
-    await userEvent.click(sound);
-    expect(sound).toBeChecked();
-
-    // submit the form
-    const submit = await screen.findByTestId("submit-button");
-    await userEvent.click(submit);
-    expect(saveSettingsSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        language: "no",
-        user_consents_to_analytics: true,
-        enable_sound_notifications: true,
-      }),
-    );
-  });
-
-  it("should only enable the submit button when there are changes", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
-
-    renderAppSettingsScreen();
-
-    const submit = await screen.findByTestId("submit-button");
-    expect(submit).toBeDisabled();
-
-    // Language check
-    const language = await screen.findByTestId("language-input");
-    await userEvent.click(language);
-    const norsk = screen.getByText("Norsk");
-    await userEvent.click(norsk);
-    expect(submit).not.toBeDisabled();
-
-    await userEvent.click(language);
-    const english = screen.getByText("English");
-    await userEvent.click(english);
-    expect(submit).toBeDisabled();
-
-    // Analytics check
-    const analytics = await screen.findByTestId("enable-analytics-switch");
-    await userEvent.click(analytics);
-    expect(submit).not.toBeDisabled();
-
-    await userEvent.click(analytics);
-    expect(submit).toBeDisabled();
-
-    // Sound check
-    const sound = await screen.findByTestId(
-      "enable-sound-notifications-switch",
-    );
-    await userEvent.click(sound);
-    expect(submit).not.toBeDisabled();
-
-    await userEvent.click(sound);
-    expect(submit).toBeDisabled();
-  });
-
-  it("should call handleCaptureConsents with true when the analytics switch is toggled", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
-
-    const handleCaptureConsentsSpy = vi.spyOn(
-      CaptureConsent,
-      "handleCaptureConsent",
-    );
-
-    renderAppSettingsScreen();
-
-    const analytics = await screen.findByTestId("enable-analytics-switch");
-    const submit = await screen.findByTestId("submit-button");
-
-    await userEvent.click(analytics);
-    await userEvent.click(submit);
-
-    await waitFor(() =>
-      expect(handleCaptureConsentsSpy).toHaveBeenCalledWith(true),
-    );
-  });
-
-  it("should call handleCaptureConsents with false when the analytics switch is toggled", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      user_consents_to_analytics: true,
-    });
-
-    const handleCaptureConsentsSpy = vi.spyOn(
-      CaptureConsent,
-      "handleCaptureConsent",
-    );
-
-    renderAppSettingsScreen();
-
-    const analytics = await screen.findByTestId("enable-analytics-switch");
-    const submit = await screen.findByTestId("submit-button");
-
-    await userEvent.click(analytics);
-    await userEvent.click(submit);
-
-    await waitFor(() =>
-      expect(handleCaptureConsentsSpy).toHaveBeenCalledWith(false),
-    );
-  });
-
-  // flaky test
-  it.skip("should disable the button when submitting changes", async () => {
-    renderAppSettingsScreen();
-
-    const submit = await screen.findByTestId("submit-button");
-    expect(submit).toBeDisabled();
-
-    const sound = await screen.findByTestId(
-      "enable-sound-notifications-switch",
-    );
-    await userEvent.click(sound);
-    expect(submit).not.toBeDisabled();
-
-    // submit the form
-    await userEvent.click(submit);
-
-    expect(submit).toHaveTextContent("Saving...");
-    expect(submit).toBeDisabled();
-
-    await waitFor(() => expect(submit).toHaveTextContent("Save"));
-  });
-
-  it("should disable the button after submitting changes", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
-
-    renderAppSettingsScreen();
-
-    const submit = await screen.findByTestId("submit-button");
-    expect(submit).toBeDisabled();
-
-    const sound = await screen.findByTestId(
-      "enable-sound-notifications-switch",
-    );
-    await userEvent.click(sound);
-    expect(submit).not.toBeDisabled();
-
-    // submit the form
-    await userEvent.click(submit);
-    expect(saveSettingsSpy).toHaveBeenCalled();
-
-    await waitFor(() => expect(submit).toBeDisabled());
-  });
-});
-
-describe("Status toasts", () => {
-  it("should call displaySuccessToast when the settings are saved", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
-
-    const displaySuccessToastSpy = vi.spyOn(
-      ToastHandlers,
-      "displaySuccessToast",
-    );
-
-    renderAppSettingsScreen();
-
-    // Toggle setting to change
-    const sound = await screen.findByTestId(
-      "enable-sound-notifications-switch",
-    );
-    await userEvent.click(sound);
-
-    const submit = await screen.findByTestId("submit-button");
-    await userEvent.click(submit);
-
-    expect(saveSettingsSpy).toHaveBeenCalled();
-    await waitFor(() => expect(displaySuccessToastSpy).toHaveBeenCalled());
-  });
-
-  it("should call displayErrorToast when the settings fail to save", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
-
-    const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");
-
-    saveSettingsSpy.mockRejectedValue(new Error("Failed to save settings"));
-
-    renderAppSettingsScreen();
-
-    // Toggle setting to change
-    const sound = await screen.findByTestId(
-      "enable-sound-notifications-switch",
-    );
-    await userEvent.click(sound);
-
-    const submit = await screen.findByTestId("submit-button");
-    await userEvent.click(submit);
-
-    expect(saveSettingsSpy).toHaveBeenCalled();
-    expect(displayErrorToastSpy).toHaveBeenCalled();
-  });
-});

frontend/__tests__/routes/git-settings.test.tsx

@@ -1,461 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import { createRoutesStub } from "react-router";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import userEvent from "@testing-library/user-event";
-import GitSettingsScreen from "#/routes/git-settings";
-import OpenHands from "#/api/open-hands";
-import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
-import { AuthProvider } from "#/context/auth-context";
-import { GetConfigResponse } from "#/api/open-hands.types";
-import * as ToastHandlers from "#/utils/custom-toast-handlers";
-
-const VALID_OSS_CONFIG: GetConfigResponse = {
-  APP_MODE: "oss",
-  GITHUB_CLIENT_ID: "123",
-  POSTHOG_CLIENT_KEY: "456",
-  FEATURE_FLAGS: {
-    ENABLE_BILLING: false,
-    HIDE_LLM_SETTINGS: false,
-  },
-};
-
-const VALID_SAAS_CONFIG: GetConfigResponse = {
-  APP_MODE: "saas",
-  GITHUB_CLIENT_ID: "123",
-  POSTHOG_CLIENT_KEY: "456",
-  FEATURE_FLAGS: {
-    ENABLE_BILLING: false,
-    HIDE_LLM_SETTINGS: false,
-  },
-};
-
-const queryClient = new QueryClient();
-
-const GitSettingsRouterStub = createRoutesStub([
-  {
-    Component: GitSettingsScreen,
-    path: "/settings/github",
-  },
-]);
-
-const renderGitSettingsScreen = () => {
-  const { rerender, ...rest } = render(
-    <GitSettingsRouterStub initialEntries={["/settings/github"]} />,
-    {
-      wrapper: ({ children }) => (
-        <QueryClientProvider client={queryClient}>
-          <AuthProvider>{children}</AuthProvider>
-        </QueryClientProvider>
-      ),
-    },
-  );
-
-  const rerenderGitSettingsScreen = () =>
-    rerender(
-      <QueryClientProvider client={queryClient}>
-        <AuthProvider>
-          <GitSettingsRouterStub initialEntries={["/settings/github"]} />
-        </AuthProvider>
-      </QueryClientProvider>,
-    );
-
-  return {
-    ...rest,
-    rerender: rerenderGitSettingsScreen,
-  };
-};
-
-beforeEach(() => {
-  // Since we don't recreate the query client on every test, we need to
-  // reset the query client before each test to avoid state leaks
-  // between tests.
-  queryClient.invalidateQueries();
-});
-
-describe("Content", () => {
-  it("should render", async () => {
-    renderGitSettingsScreen();
-    await screen.findByTestId("git-settings-screen");
-  });
-
-  it("should render the inputs if OSS mode", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
-
-    const { rerender } = renderGitSettingsScreen();
-
-    await screen.findByTestId("github-token-input");
-    await screen.findByTestId("github-token-help-anchor");
-
-    await screen.findByTestId("gitlab-token-input");
-    await screen.findByTestId("gitlab-token-help-anchor");
-
-    getConfigSpy.mockResolvedValue(VALID_SAAS_CONFIG);
-    queryClient.invalidateQueries();
-    rerender();
-
-    await waitFor(() => {
-      expect(
-        screen.queryByTestId("github-token-input"),
-      ).not.toBeInTheDocument();
-      expect(
-        screen.queryByTestId("github-token-help-anchor"),
-      ).not.toBeInTheDocument();
-
-      expect(
-        screen.queryByTestId("gitlab-token-input"),
-      ).not.toBeInTheDocument();
-      expect(
-        screen.queryByTestId("gitlab-token-help-anchor"),
-      ).not.toBeInTheDocument();
-    });
-  });
-
-  it("should set '<hidden>' placeholder and indicator if the GitHub token is set", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-
-    getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      provider_tokens_set: {
-        github: false,
-        gitlab: false,
-      },
-    });
-
-    const { rerender } = renderGitSettingsScreen();
-
-    await waitFor(() => {
-      const githubInput = screen.getByTestId("github-token-input");
-      expect(githubInput).toHaveProperty("placeholder", "");
-      expect(
-        screen.queryByTestId("gh-set-token-indicator"),
-      ).not.toBeInTheDocument();
-
-      const gitlabInput = screen.getByTestId("gitlab-token-input");
-      expect(gitlabInput).toHaveProperty("placeholder", "");
-      expect(
-        screen.queryByTestId("gl-set-token-indicator"),
-      ).not.toBeInTheDocument();
-    });
-
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      provider_tokens_set: {
-        github: true,
-        gitlab: true,
-      },
-    });
-    queryClient.invalidateQueries();
-
-    rerender();
-
-    await waitFor(() => {
-      const githubInput = screen.getByTestId("github-token-input");
-      expect(githubInput).toHaveProperty("placeholder", "<hidden>");
-      expect(
-        screen.queryByTestId("gh-set-token-indicator"),
-      ).toBeInTheDocument();
-
-      const gitlabInput = screen.getByTestId("gitlab-token-input");
-      expect(gitlabInput).toHaveProperty("placeholder", "<hidden>");
-      expect(
-        screen.queryByTestId("gl-set-token-indicator"),
-      ).toBeInTheDocument();
-    });
-
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      provider_tokens_set: {
-        github: false,
-        gitlab: true,
-      },
-    });
-    queryClient.invalidateQueries();
-
-    rerender();
-
-    await waitFor(() => {
-      const githubInput = screen.getByTestId("github-token-input");
-      expect(githubInput).toHaveProperty("placeholder", "");
-      expect(
-        screen.queryByTestId("gh-set-token-indicator"),
-      ).not.toBeInTheDocument();
-
-      const gitlabInput = screen.getByTestId("gitlab-token-input");
-      expect(gitlabInput).toHaveProperty("placeholder", "<hidden>");
-      expect(
-        screen.queryByTestId("gl-set-token-indicator"),
-      ).toBeInTheDocument();
-    });
-  });
-
-  it("should render the 'Configure GitHub Repositories' button if SaaS mode and app slug exists", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
-
-    const { rerender } = renderGitSettingsScreen();
-
-    let button = screen.queryByTestId("configure-github-repositories-button");
-    expect(button).not.toBeInTheDocument();
-
-    expect(screen.getByTestId("submit-button")).toBeInTheDocument();
-    expect(screen.getByTestId("disconnect-tokens-button")).toBeInTheDocument();
-
-    getConfigSpy.mockResolvedValue(VALID_SAAS_CONFIG);
-    queryClient.invalidateQueries();
-    rerender();
-
-    await waitFor(() => {
-      // wait until queries are resolved
-      expect(queryClient.isFetching()).toBe(0);
-      button = screen.queryByTestId("configure-github-repositories-button");
-      expect(button).not.toBeInTheDocument();
-    });
-
-    getConfigSpy.mockResolvedValue({
-      ...VALID_SAAS_CONFIG,
-      APP_SLUG: "test-slug",
-    });
-    queryClient.invalidateQueries();
-    rerender();
-
-    await waitFor(() => {
-      button = screen.getByTestId("configure-github-repositories-button");
-      expect(button).toBeInTheDocument();
-      expect(screen.queryByTestId("submit-button")).not.toBeInTheDocument();
-      expect(
-        screen.queryByTestId("disconnect-tokens-button"),
-      ).not.toBeInTheDocument();
-    });
-  });
-});
-
-describe("Form submission", () => {
-  it("should save the GitHub token", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
-
-    renderGitSettingsScreen();
-
-    const githubInput = await screen.findByTestId("github-token-input");
-    const submit = await screen.findByTestId("submit-button");
-
-    await userEvent.type(githubInput, "test-token");
-    await userEvent.click(submit);
-
-    expect(saveSettingsSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        provider_tokens: {
-          github: "test-token",
-          gitlab: "",
-        },
-      }),
-    );
-
-    const gitlabInput = await screen.findByTestId("gitlab-token-input");
-    await userEvent.type(gitlabInput, "test-token");
-    await userEvent.click(submit);
-
-    expect(saveSettingsSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        provider_tokens: {
-          github: "",
-          gitlab: "test-token",
-        },
-      }),
-    );
-  });
-
-  it("should disable the button if there is no input", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
-
-    renderGitSettingsScreen();
-
-    const submit = await screen.findByTestId("submit-button");
-    expect(submit).toBeDisabled();
-
-    const githubInput = await screen.findByTestId("github-token-input");
-    await userEvent.type(githubInput, "test-token");
-
-    expect(submit).not.toBeDisabled();
-
-    await userEvent.clear(githubInput);
-    expect(submit).toBeDisabled();
-
-    const gitlabInput = await screen.findByTestId("gitlab-token-input");
-    await userEvent.type(gitlabInput, "test-token");
-
-    expect(submit).not.toBeDisabled();
-
-    await userEvent.clear(gitlabInput);
-    expect(submit).toBeDisabled();
-  });
-
-  it("should enable a disconnect tokens button if there is at least one token set", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-
-    getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      provider_tokens_set: {
-        github: true,
-        gitlab: false,
-      },
-    });
-
-    renderGitSettingsScreen();
-    await screen.findByTestId("git-settings-screen");
-
-    let disconnectButton = await screen.findByTestId(
-      "disconnect-tokens-button",
-    );
-    await waitFor(() => expect(disconnectButton).not.toBeDisabled());
-
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      provider_tokens_set: {
-        github: false,
-        gitlab: false,
-      },
-    });
-    queryClient.invalidateQueries();
-
-    disconnectButton = await screen.findByTestId("disconnect-tokens-button");
-    await waitFor(() => expect(disconnectButton).toBeDisabled());
-  });
-
-  it("should call logout when pressing the disconnect tokens button", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    const logoutSpy = vi.spyOn(OpenHands, "logout");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-
-    getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      provider_tokens_set: {
-        github: true,
-        gitlab: false,
-      },
-    });
-
-    renderGitSettingsScreen();
-
-    const disconnectButton = await screen.findByTestId(
-      "disconnect-tokens-button",
-    );
-    await waitFor(() => expect(disconnectButton).not.toBeDisabled());
-    await userEvent.click(disconnectButton);
-
-    expect(logoutSpy).toHaveBeenCalled();
-  });
-
-  // flaky test
-  it.skip("should disable the button when submitting changes", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
-
-    renderGitSettingsScreen();
-
-    const submit = await screen.findByTestId("submit-button");
-    expect(submit).toBeDisabled();
-
-    const githubInput = await screen.findByTestId("github-token-input");
-    await userEvent.type(githubInput, "test-token");
-    expect(submit).not.toBeDisabled();
-
-    // submit the form
-    await userEvent.click(submit);
-    expect(saveSettingsSpy).toHaveBeenCalled();
-
-    expect(submit).toHaveTextContent("Saving...");
-    expect(submit).toBeDisabled();
-
-    await waitFor(() => expect(submit).toHaveTextContent("Save"));
-  });
-
-  it("should disable the button after submitting changes", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
-
-    renderGitSettingsScreen();
-    await screen.findByTestId("git-settings-screen");
-
-    const submit = await screen.findByTestId("submit-button");
-    expect(submit).toBeDisabled();
-
-    const githubInput = await screen.findByTestId("github-token-input");
-    await userEvent.type(githubInput, "test-token");
-    expect(submit).not.toBeDisabled();
-
-    // submit the form
-    await userEvent.click(submit);
-    expect(saveSettingsSpy).toHaveBeenCalled();
-    expect(submit).toBeDisabled();
-
-    const gitlabInput = await screen.findByTestId("gitlab-token-input");
-    await userEvent.type(gitlabInput, "test-token");
-    expect(gitlabInput).toHaveValue("test-token");
-    expect(submit).not.toBeDisabled();
-
-    // submit the form
-    await userEvent.click(submit);
-    expect(saveSettingsSpy).toHaveBeenCalled();
-
-    await waitFor(() => expect(submit).toBeDisabled());
-  });
-});
-
-describe("Status toasts", () => {
-  it("should call displaySuccessToast when the settings are saved", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
-
-    const displaySuccessToastSpy = vi.spyOn(
-      ToastHandlers,
-      "displaySuccessToast",
-    );
-
-    renderGitSettingsScreen();
-
-    // Toggle setting to change
-    const githubInput = await screen.findByTestId("github-token-input");
-    await userEvent.type(githubInput, "test-token");
-
-    const submit = await screen.findByTestId("submit-button");
-    await userEvent.click(submit);
-
-    expect(saveSettingsSpy).toHaveBeenCalled();
-    await waitFor(() => expect(displaySuccessToastSpy).toHaveBeenCalled());
-  });
-
-  it("should call displayErrorToast when the settings fail to save", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
-
-    const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");
-
-    saveSettingsSpy.mockRejectedValue(new Error("Failed to save settings"));
-
-    renderGitSettingsScreen();
-
-    // Toggle setting to change
-    const gitlabInput = await screen.findByTestId("gitlab-token-input");
-    await userEvent.type(gitlabInput, "test-token");
-
-    const submit = await screen.findByTestId("submit-button");
-    await userEvent.click(submit);
-
-    expect(saveSettingsSpy).toHaveBeenCalled();
-    expect(displayErrorToastSpy).toHaveBeenCalled();
-  });
-});

frontend/__tests__/routes/home-screen.test.tsx

@@ -91,13 +91,6 @@ describe("HomeScreen", () => {
     screen.getByTestId("task-suggestions");
   });
 
-  it("should have responsive layout for mobile and desktop screens", async () => {
-    renderHomeScreen();
-    
-    const mainContainer = screen.getByTestId("home-screen").querySelector("main");
-    expect(mainContainer).toHaveClass("flex", "flex-col", "md:flex-row");
-  });
-
   it("should filter the suggested tasks based on the selected repository", async () => {
     const retrieveUserGitRepositoriesSpy = vi.spyOn(
       GitService,

frontend/__tests__/routes/llm-settings.test.tsx

@@ -1,674 +0,0 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import LlmSettingsScreen from "#/routes/llm-settings";
-import OpenHands from "#/api/open-hands";
-import {
-  MOCK_DEFAULT_USER_SETTINGS,
-  resetTestHandlersMockSettings,
-} from "#/mocks/handlers";
-import { AuthProvider } from "#/context/auth-context";
-import * as AdvancedSettingsUtlls from "#/utils/has-advanced-settings-set";
-import * as ToastHandlers from "#/utils/custom-toast-handlers";
-
-const renderLlmSettingsScreen = () =>
-  render(<LlmSettingsScreen />, {
-    wrapper: ({ children }) => (
-      <QueryClientProvider client={new QueryClient()}>
-        <AuthProvider>{children}</AuthProvider>
-      </QueryClientProvider>
-    ),
-  });
-
-beforeEach(() => {
-  vi.resetAllMocks();
-  resetTestHandlersMockSettings();
-});
-
-describe("Content", () => {
-  describe("Basic form", () => {
-    it("should render the basic form by default", async () => {
-      renderLlmSettingsScreen();
-      await screen.findByTestId("llm-settings-screen");
-
-      const basicFom = screen.getByTestId("llm-settings-form-basic");
-      within(basicFom).getByTestId("llm-provider-input");
-      within(basicFom).getByTestId("llm-model-input");
-      within(basicFom).getByTestId("llm-api-key-input");
-      within(basicFom).getByTestId("llm-api-key-help-anchor");
-    });
-
-    it("should render the default values if non exist", async () => {
-      renderLlmSettingsScreen();
-      await screen.findByTestId("llm-settings-screen");
-
-      const provider = screen.getByTestId("llm-provider-input");
-      const model = screen.getByTestId("llm-model-input");
-      const apiKey = screen.getByTestId("llm-api-key-input");
-
-      await waitFor(() => {
-        expect(provider).toHaveValue("Anthropic");
-        expect(model).toHaveValue("claude-3-5-sonnet-20241022");
-
-        expect(apiKey).toHaveValue("");
-        expect(apiKey).toHaveProperty("placeholder", "");
-      });
-    });
-
-    it("should render the existing settings values", async () => {
-      const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-      getSettingsSpy.mockResolvedValue({
-        ...MOCK_DEFAULT_USER_SETTINGS,
-        llm_model: "openai/gpt-4o",
-        llm_api_key_set: true,
-      });
-
-      renderLlmSettingsScreen();
-      await screen.findByTestId("llm-settings-screen");
-
-      const provider = screen.getByTestId("llm-provider-input");
-      const model = screen.getByTestId("llm-model-input");
-      const apiKey = screen.getByTestId("llm-api-key-input");
-
-      await waitFor(() => {
-        expect(provider).toHaveValue("OpenAI");
-        expect(model).toHaveValue("gpt-4o");
-
-        expect(apiKey).toHaveValue("");
-        expect(apiKey).toHaveProperty("placeholder", "<hidden>");
-        expect(screen.getByTestId("set-indicator")).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe("Advanced form", () => {
-    it("should render the advanced form if the switch is toggled", async () => {
-      renderLlmSettingsScreen();
-      await screen.findByTestId("llm-settings-screen");
-
-      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-      const basicForm = screen.getByTestId("llm-settings-form-basic");
-
-      expect(
-        screen.queryByTestId("llm-settings-form-advanced"),
-      ).not.toBeInTheDocument();
-      expect(basicForm).toBeInTheDocument();
-
-      await userEvent.click(advancedSwitch);
-
-      expect(
-        screen.queryByTestId("llm-settings-form-advanced"),
-      ).toBeInTheDocument();
-      expect(basicForm).not.toBeInTheDocument();
-
-      const advancedForm = screen.getByTestId("llm-settings-form-advanced");
-      within(advancedForm).getByTestId("llm-custom-model-input");
-      within(advancedForm).getByTestId("base-url-input");
-      within(advancedForm).getByTestId("llm-api-key-input");
-      within(advancedForm).getByTestId("llm-api-key-help-anchor");
-      within(advancedForm).getByTestId("agent-input");
-      within(advancedForm).getByTestId("enable-confirmation-mode-switch");
-      within(advancedForm).getByTestId("enable-memory-condenser-switch");
-
-      await userEvent.click(advancedSwitch);
-      expect(
-        screen.queryByTestId("llm-settings-form-advanced"),
-      ).not.toBeInTheDocument();
-      expect(screen.getByTestId("llm-settings-form-basic")).toBeInTheDocument();
-    });
-
-    it("should render the default advanced settings", async () => {
-      renderLlmSettingsScreen();
-      await screen.findByTestId("llm-settings-screen");
-
-      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-      expect(advancedSwitch).not.toBeChecked();
-
-      await userEvent.click(advancedSwitch);
-
-      const model = screen.getByTestId("llm-custom-model-input");
-      const baseUrl = screen.getByTestId("base-url-input");
-      const apiKey = screen.getByTestId("llm-api-key-input");
-      const agent = screen.getByTestId("agent-input");
-      const confirmation = screen.getByTestId(
-        "enable-confirmation-mode-switch",
-      );
-      const condensor = screen.getByTestId("enable-memory-condenser-switch");
-
-      expect(model).toHaveValue("anthropic/claude-3-5-sonnet-20241022");
-      expect(baseUrl).toHaveValue("");
-      expect(apiKey).toHaveValue("");
-      expect(apiKey).toHaveProperty("placeholder", "");
-      expect(agent).toHaveValue("CodeActAgent");
-      expect(confirmation).not.toBeChecked();
-      expect(condensor).toBeChecked();
-
-      // check that security analyzer is present
-      expect(
-        screen.queryByTestId("security-analyzer-input"),
-      ).not.toBeInTheDocument();
-      await userEvent.click(confirmation);
-      screen.getByTestId("security-analyzer-input");
-    });
-
-    it("should render the advanced form if existings settings are advanced", async () => {
-      const hasAdvancedSettingsSetSpy = vi.spyOn(
-        AdvancedSettingsUtlls,
-        "hasAdvancedSettingsSet",
-      );
-      hasAdvancedSettingsSetSpy.mockReturnValue(true);
-
-      renderLlmSettingsScreen();
-
-      await waitFor(() => {
-        const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-        expect(advancedSwitch).toBeChecked();
-        screen.getByTestId("llm-settings-form-advanced");
-      });
-    });
-
-    it("should render existing advanced settings correctly", async () => {
-      const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-      getSettingsSpy.mockResolvedValue({
-        ...MOCK_DEFAULT_USER_SETTINGS,
-        llm_model: "openai/gpt-4o",
-        llm_base_url: "https://api.openai.com/v1/chat/completions",
-        llm_api_key_set: true,
-        agent: "CoActAgent",
-        confirmation_mode: true,
-        enable_default_condenser: false,
-        security_analyzer: "mock-invariant",
-      });
-
-      renderLlmSettingsScreen();
-      await screen.findByTestId("llm-settings-screen");
-
-      const model = screen.getByTestId("llm-custom-model-input");
-      const baseUrl = screen.getByTestId("base-url-input");
-      const apiKey = screen.getByTestId("llm-api-key-input");
-      const agent = screen.getByTestId("agent-input");
-      const confirmation = screen.getByTestId(
-        "enable-confirmation-mode-switch",
-      );
-      const condensor = screen.getByTestId("enable-memory-condenser-switch");
-      const securityAnalyzer = screen.getByTestId("security-analyzer-input");
-
-      await waitFor(() => {
-        expect(model).toHaveValue("openai/gpt-4o");
-        expect(baseUrl).toHaveValue(
-          "https://api.openai.com/v1/chat/completions",
-        );
-        expect(apiKey).toHaveValue("");
-        expect(apiKey).toHaveProperty("placeholder", "<hidden>");
-        expect(agent).toHaveValue("CoActAgent");
-        expect(confirmation).toBeChecked();
-        expect(condensor).not.toBeChecked();
-        expect(securityAnalyzer).toHaveValue("mock-invariant");
-      });
-    });
-  });
-
-  it.todo("should render an indicator if the llm api key is set");
-});
-
-describe("Form submission", () => {
-  it("should submit the basic form with the correct values", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
-
-    const provider = screen.getByTestId("llm-provider-input");
-    const model = screen.getByTestId("llm-model-input");
-    const apiKey = screen.getByTestId("llm-api-key-input");
-
-    // select provider
-    await userEvent.click(provider);
-    const providerOption = screen.getByText("OpenAI");
-    await userEvent.click(providerOption);
-    expect(provider).toHaveValue("OpenAI");
-
-    // enter api key
-    await userEvent.type(apiKey, "test-api-key");
-
-    // select model
-    await userEvent.click(model);
-    const modelOption = screen.getByText("gpt-4o");
-    await userEvent.click(modelOption);
-    expect(model).toHaveValue("gpt-4o");
-
-    const submitButton = screen.getByTestId("submit-button");
-    await userEvent.click(submitButton);
-
-    expect(saveSettingsSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        llm_model: "openai/gpt-4o",
-        llm_api_key: "test-api-key",
-      }),
-    );
-  });
-
-  it("should submit the advanced form with the correct values", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
-
-    const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-    await userEvent.click(advancedSwitch);
-
-    const model = screen.getByTestId("llm-custom-model-input");
-    const baseUrl = screen.getByTestId("base-url-input");
-    const apiKey = screen.getByTestId("llm-api-key-input");
-    const agent = screen.getByTestId("agent-input");
-    const confirmation = screen.getByTestId("enable-confirmation-mode-switch");
-    const condensor = screen.getByTestId("enable-memory-condenser-switch");
-
-    // enter custom model
-    await userEvent.clear(model);
-    await userEvent.type(model, "openai/gpt-4o");
-    expect(model).toHaveValue("openai/gpt-4o");
-
-    // enter base url
-    await userEvent.type(baseUrl, "https://api.openai.com/v1/chat/completions");
-    expect(baseUrl).toHaveValue("https://api.openai.com/v1/chat/completions");
-
-    // enter api key
-    await userEvent.type(apiKey, "test-api-key");
-
-    // toggle confirmation mode
-    await userEvent.click(confirmation);
-    expect(confirmation).toBeChecked();
-
-    // toggle memory condensor
-    await userEvent.click(condensor);
-    expect(condensor).not.toBeChecked();
-
-    // select agent
-    await userEvent.click(agent);
-    const agentOption = screen.getByText("CoActAgent");
-    await userEvent.click(agentOption);
-    expect(agent).toHaveValue("CoActAgent");
-
-    // select security analyzer
-    const securityAnalyzer = screen.getByTestId("security-analyzer-input");
-    await userEvent.click(securityAnalyzer);
-    const securityAnalyzerOption = screen.getByText("mock-invariant");
-    await userEvent.click(securityAnalyzerOption);
-
-    const submitButton = screen.getByTestId("submit-button");
-    await userEvent.click(submitButton);
-
-    expect(saveSettingsSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        llm_model: "openai/gpt-4o",
-        llm_base_url: "https://api.openai.com/v1/chat/completions",
-        agent: "CoActAgent",
-        confirmation_mode: true,
-        enable_default_condenser: false,
-        security_analyzer: "mock-invariant",
-      }),
-    );
-  });
-
-  it("should disable the button if there are no changes in the basic form", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      llm_model: "openai/gpt-4o",
-      llm_api_key_set: true,
-    });
-
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
-    screen.getByTestId("llm-settings-form-basic");
-
-    const submitButton = screen.getByTestId("submit-button");
-    expect(submitButton).toBeDisabled();
-
-    const model = screen.getByTestId("llm-model-input");
-    const apiKey = screen.getByTestId("llm-api-key-input");
-
-    // select model
-    await userEvent.click(model);
-    const modelOption = screen.getByText("gpt-4o-mini");
-    await userEvent.click(modelOption);
-    expect(model).toHaveValue("gpt-4o-mini");
-    expect(submitButton).not.toBeDisabled();
-
-    // reset model
-    await userEvent.click(model);
-    const modelOption2 = screen.getByText("gpt-4o");
-    await userEvent.click(modelOption2);
-    expect(model).toHaveValue("gpt-4o");
-    expect(submitButton).toBeDisabled();
-
-    // set api key
-    await userEvent.type(apiKey, "test-api-key");
-    expect(apiKey).toHaveValue("test-api-key");
-    expect(submitButton).not.toBeDisabled();
-
-    // reset api key
-    await userEvent.clear(apiKey);
-    expect(apiKey).toHaveValue("");
-    expect(submitButton).toBeDisabled();
-  });
-
-  it("should disable the button if there are no changes in the advanced form", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      llm_model: "openai/gpt-4o",
-      llm_base_url: "https://api.openai.com/v1/chat/completions",
-      llm_api_key_set: true,
-      confirmation_mode: true,
-    });
-
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
-    screen.getByTestId("llm-settings-form-advanced");
-
-    const submitButton = screen.getByTestId("submit-button");
-    expect(submitButton).toBeDisabled();
-
-    const model = screen.getByTestId("llm-custom-model-input");
-    const baseUrl = screen.getByTestId("base-url-input");
-    const apiKey = screen.getByTestId("llm-api-key-input");
-    const agent = screen.getByTestId("agent-input");
-    const confirmation = screen.getByTestId("enable-confirmation-mode-switch");
-    const condensor = screen.getByTestId("enable-memory-condenser-switch");
-
-    // enter custom model
-    await userEvent.type(model, "-mini");
-    expect(model).toHaveValue("openai/gpt-4o-mini");
-    expect(submitButton).not.toBeDisabled();
-
-    // reset model
-    await userEvent.clear(model);
-    expect(model).toHaveValue("");
-    expect(submitButton).toBeDisabled();
-
-    await userEvent.type(model, "openai/gpt-4o");
-    expect(model).toHaveValue("openai/gpt-4o");
-    expect(submitButton).toBeDisabled();
-
-    // enter base url
-    await userEvent.type(baseUrl, "/extra");
-    expect(baseUrl).toHaveValue(
-      "https://api.openai.com/v1/chat/completions/extra",
-    );
-    expect(submitButton).not.toBeDisabled();
-
-    await userEvent.clear(baseUrl);
-    expect(baseUrl).toHaveValue("");
-    expect(submitButton).not.toBeDisabled();
-
-    await userEvent.type(baseUrl, "https://api.openai.com/v1/chat/completions");
-    expect(baseUrl).toHaveValue("https://api.openai.com/v1/chat/completions");
-    expect(submitButton).toBeDisabled();
-
-    // set api key
-    await userEvent.type(apiKey, "test-api-key");
-    expect(apiKey).toHaveValue("test-api-key");
-    expect(submitButton).not.toBeDisabled();
-
-    // reset api key
-    await userEvent.clear(apiKey);
-    expect(apiKey).toHaveValue("");
-    expect(submitButton).toBeDisabled();
-
-    // set agent
-    await userEvent.clear(agent);
-    await userEvent.type(agent, "test-agent");
-    expect(agent).toHaveValue("test-agent");
-    expect(submitButton).not.toBeDisabled();
-
-    // reset agent
-    await userEvent.clear(agent);
-    expect(agent).toHaveValue("");
-    expect(submitButton).toBeDisabled();
-
-    await userEvent.type(agent, "CodeActAgent");
-    expect(agent).toHaveValue("CodeActAgent");
-    expect(submitButton).toBeDisabled();
-
-    // toggle confirmation mode
-    await userEvent.click(confirmation);
-    expect(confirmation).not.toBeChecked();
-    expect(submitButton).not.toBeDisabled();
-    await userEvent.click(confirmation);
-    expect(confirmation).toBeChecked();
-    expect(submitButton).toBeDisabled();
-
-    // toggle memory condensor
-    await userEvent.click(condensor);
-    expect(condensor).not.toBeChecked();
-    expect(submitButton).not.toBeDisabled();
-    await userEvent.click(condensor);
-    expect(condensor).toBeChecked();
-    expect(submitButton).toBeDisabled();
-
-    // select security analyzer
-    const securityAnalyzer = screen.getByTestId("security-analyzer-input");
-    await userEvent.click(securityAnalyzer);
-    const securityAnalyzerOption = screen.getByText("mock-invariant");
-    await userEvent.click(securityAnalyzerOption);
-    expect(securityAnalyzer).toHaveValue("mock-invariant");
-
-    expect(submitButton).not.toBeDisabled();
-
-    await userEvent.clear(securityAnalyzer);
-    expect(securityAnalyzer).toHaveValue("");
-    expect(submitButton).toBeDisabled();
-  });
-
-  it("should reset button state when switching between forms", async () => {
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
-
-    const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-    const submitButton = screen.getByTestId("submit-button");
-
-    expect(submitButton).toBeDisabled();
-
-    // dirty the basic form
-    const apiKey = screen.getByTestId("llm-api-key-input");
-    await userEvent.type(apiKey, "test-api-key");
-    expect(submitButton).not.toBeDisabled();
-
-    await userEvent.click(advancedSwitch);
-    expect(submitButton).toBeDisabled();
-
-    // dirty the advanced form
-    const model = screen.getByTestId("llm-custom-model-input");
-    await userEvent.type(model, "openai/gpt-4o");
-    expect(submitButton).not.toBeDisabled();
-
-    await userEvent.click(advancedSwitch);
-    expect(submitButton).toBeDisabled();
-  });
-
-  // flaky test
-  it.skip("should disable the button when submitting changes", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
-
-    const apiKey = screen.getByTestId("llm-api-key-input");
-    await userEvent.type(apiKey, "test-api-key");
-
-    const submitButton = screen.getByTestId("submit-button");
-    await userEvent.click(submitButton);
-
-    expect(saveSettingsSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        llm_api_key: "test-api-key",
-      }),
-    );
-
-    expect(submitButton).toHaveTextContent("Saving...");
-    expect(submitButton).toBeDisabled();
-
-    await waitFor(() => {
-      expect(submitButton).toHaveTextContent("Save");
-      expect(submitButton).toBeDisabled();
-    });
-  });
-});
-
-describe("Status toasts", () => {
-  describe("Basic form", () => {
-    it("should call displaySuccessToast when the settings are saved", async () => {
-      const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-
-      const displaySuccessToastSpy = vi.spyOn(
-        ToastHandlers,
-        "displaySuccessToast",
-      );
-
-      renderLlmSettingsScreen();
-
-      // Toggle setting to change
-      const apiKeyInput = await screen.findByTestId("llm-api-key-input");
-      await userEvent.type(apiKeyInput, "test-api-key");
-
-      const submit = await screen.findByTestId("submit-button");
-      await userEvent.click(submit);
-
-      expect(saveSettingsSpy).toHaveBeenCalled();
-      await waitFor(() => expect(displaySuccessToastSpy).toHaveBeenCalled());
-    });
-
-    it("should call displayErrorToast when the settings fail to save", async () => {
-      const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-
-      const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");
-
-      saveSettingsSpy.mockRejectedValue(new Error("Failed to save settings"));
-
-      renderLlmSettingsScreen();
-
-      // Toggle setting to change
-      const apiKeyInput = await screen.findByTestId("llm-api-key-input");
-      await userEvent.type(apiKeyInput, "test-api-key");
-
-      const submit = await screen.findByTestId("submit-button");
-      await userEvent.click(submit);
-
-      expect(saveSettingsSpy).toHaveBeenCalled();
-      expect(displayErrorToastSpy).toHaveBeenCalled();
-    });
-  });
-
-  describe("Advanced form", () => {
-    it("should call displaySuccessToast when the settings are saved", async () => {
-      const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-
-      const displaySuccessToastSpy = vi.spyOn(
-        ToastHandlers,
-        "displaySuccessToast",
-      );
-
-      renderLlmSettingsScreen();
-      await screen.findByTestId("llm-settings-screen");
-
-      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-      await userEvent.click(advancedSwitch);
-      await screen.findByTestId("llm-settings-form-advanced");
-
-      // Toggle setting to change
-      const apiKeyInput = await screen.findByTestId("llm-api-key-input");
-      await userEvent.type(apiKeyInput, "test-api-key");
-
-      const submit = await screen.findByTestId("submit-button");
-      await userEvent.click(submit);
-
-      expect(saveSettingsSpy).toHaveBeenCalled();
-      await waitFor(() => expect(displaySuccessToastSpy).toHaveBeenCalled());
-    });
-
-    it("should call displayErrorToast when the settings fail to save", async () => {
-      const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-
-      const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");
-
-      saveSettingsSpy.mockRejectedValue(new Error("Failed to save settings"));
-
-      renderLlmSettingsScreen();
-      await screen.findByTestId("llm-settings-screen");
-
-      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-      await userEvent.click(advancedSwitch);
-      await screen.findByTestId("llm-settings-form-advanced");
-
-      // Toggle setting to change
-      const apiKeyInput = await screen.findByTestId("llm-api-key-input");
-      await userEvent.type(apiKeyInput, "test-api-key");
-
-      const submit = await screen.findByTestId("submit-button");
-      await userEvent.click(submit);
-
-      expect(saveSettingsSpy).toHaveBeenCalled();
-      expect(displayErrorToastSpy).toHaveBeenCalled();
-    });
-  });
-});
-
-describe("SaaS mode", () => {
-  it("should not render the runtime settings input in oss mode", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    // @ts-expect-error - only return mode
-    getConfigSpy.mockResolvedValue({
-      APP_MODE: "oss",
-    });
-
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
-
-    const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-    await userEvent.click(advancedSwitch);
-    await screen.findByTestId("llm-settings-form-advanced");
-
-    const runtimeSettingsInput = screen.queryByTestId("runtime-settings-input");
-    expect(runtimeSettingsInput).not.toBeInTheDocument();
-  });
-
-  it("should render the runtime settings input in saas mode", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    // @ts-expect-error - only return mode
-    getConfigSpy.mockResolvedValue({
-      APP_MODE: "saas",
-    });
-
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
-
-    const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-    await userEvent.click(advancedSwitch);
-    await screen.findByTestId("llm-settings-form-advanced");
-
-    const runtimeSettingsInput = screen.queryByTestId("runtime-settings-input");
-    expect(runtimeSettingsInput).toBeInTheDocument();
-  });
-
-  it("should always render the runtime settings input as disabled", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    // @ts-expect-error - only return mode
-    getConfigSpy.mockResolvedValue({
-      APP_MODE: "saas",
-    });
-
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
-
-    const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-    await userEvent.click(advancedSwitch);
-    await screen.findByTestId("llm-settings-form-advanced");
-
-    const runtimeSettingsInput = screen.queryByTestId("runtime-settings-input");
-    expect(runtimeSettingsInput).toBeInTheDocument();
-    expect(runtimeSettingsInput).toBeDisabled();
-  });
-});

frontend/__tests__/routes/settings-with-payment.test.tsx

@@ -1,4 +1,4 @@
-import { screen, within } from "@testing-library/react";
+import { screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { createRoutesStub } from "react-router";
@@ -7,30 +7,6 @@ import OpenHands from "#/api/open-hands";
 import SettingsScreen from "#/routes/settings";
 import { PaymentForm } from "#/components/features/payment/payment-form";
 
-// Mock the i18next hook
-vi.mock("react-i18next", async () => {
-  const actual = await vi.importActual<typeof import("react-i18next")>("react-i18next");
-  return {
-    ...actual,
-    useTranslation: () => ({
-      t: (key: string) => {
-        const translations: Record<string, string> = {
-          "SETTINGS$NAV_GIT": "Git",
-          "SETTINGS$NAV_APPLICATION": "Application",
-          "SETTINGS$NAV_CREDITS": "Credits",
-          "SETTINGS$NAV_API_KEYS": "API Keys",
-          "SETTINGS$NAV_LLM": "LLM",
-          "SETTINGS$TITLE": "Settings"
-        };
-        return translations[key] || key;
-      },
-      i18n: {
-        changeLanguage: vi.fn(),
-      },
-    }),
-  };
-});
-
 describe("Settings Billing", () => {
   const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
 
@@ -43,22 +19,18 @@ describe("Settings Billing", () => {
           Component: () => <PaymentForm />,
           path: "/settings/billing",
         },
-        {
-          Component: () => <div data-testid="git-settings-screen" />,
-          path: "/settings/git",
-        },
       ],
     },
   ]);
 
   const renderSettingsScreen = () =>
-    renderWithProviders(<RoutesStub initialEntries={["/settings/billing"]} />);
+    renderWithProviders(<RoutesStub initialEntries={["/settings"]} />);
 
   afterEach(() => {
     vi.clearAllMocks();
   });
 
-  it("should not render the credits tab if OSS mode", async () => {
+  it("should not render the navbar if OSS mode", async () => {
     getConfigSpy.mockResolvedValue({
       APP_MODE: "oss",
       GITHUB_CLIENT_ID: "123",
@@ -71,12 +43,15 @@ describe("Settings Billing", () => {
 
     renderSettingsScreen();
 
-    const navbar = await screen.findByTestId("settings-navbar");
-    const credits = within(navbar).queryByText("Credits");
-    expect(credits).not.toBeInTheDocument();
+    // Wait for the settings screen to be rendered
+    await screen.findByTestId("settings-screen");
+
+    // Then check that the navbar is not present
+    const navbar = screen.queryByTestId("settings-navbar");
+    expect(navbar).not.toBeInTheDocument();
   });
 
-  it("should render the credits tab if SaaS mode and billing is enabled", async () => {
+  it("should render the navbar if SaaS mode", async () => {
     getConfigSpy.mockResolvedValue({
       APP_MODE: "saas",
       GITHUB_CLIENT_ID: "123",
@@ -89,8 +64,11 @@ describe("Settings Billing", () => {
 
     renderSettingsScreen();
 
-    const navbar = await screen.findByTestId("settings-navbar");
-    within(navbar).getByText("Credits");
+    await waitFor(() => {
+      const navbar = screen.getByTestId("settings-navbar");
+      within(navbar).getByText("Account");
+      within(navbar).getByText("Credits");
+    });
   });
 
   it("should render the billing settings if clicking the credits item", async () => {
@@ -112,6 +90,6 @@ describe("Settings Billing", () => {
     await user.click(credits);
 
     const billingSection = await screen.findByTestId("billing-settings");
-    expect(billingSection).toBeInTheDocument();
+    within(billingSection).getByText("PAYMENT$MANAGE_CREDITS");
   });
 });

frontend/__tests__/utils/has-advanced-settings-set.test.ts

@@ -7,10 +7,6 @@ describe("hasAdvancedSettingsSet", () => {
     expect(hasAdvancedSettingsSet(DEFAULT_SETTINGS)).toBe(false);
   });
 
-  it("should return false if an empty object", () => {
-    expect(hasAdvancedSettingsSet({})).toBe(false);
-  });
-
   describe("should be true if", () => {
     test("LLM_BASE_URL is set", () => {
       expect(
@@ -30,6 +26,15 @@ describe("hasAdvancedSettingsSet", () => {
       ).toBe(true);
     });
 
+    test("REMOTE_RUNTIME_RESOURCE_FACTOR is not default value", () => {
+      expect(
+        hasAdvancedSettingsSet({
+          ...DEFAULT_SETTINGS,
+          REMOTE_RUNTIME_RESOURCE_FACTOR: 999,
+        }),
+      ).toBe(true);
+    });
+
     test("CONFIRMATION_MODE is true", () => {
       expect(
         hasAdvancedSettingsSet({

frontend/package-lock.json

@@ -17,22 +17,22 @@
         "@reduxjs/toolkit": "^2.7.0",
         "@stripe/react-stripe-js": "^3.6.0",
         "@stripe/stripe-js": "^7.2.0",
-        "@tanstack/react-query": "^5.74.7",
+        "@tanstack/react-query": "^5.74.4",
         "@vitejs/plugin-react": "^4.4.0",
         "@xterm/addon-fit": "^0.10.0",
         "@xterm/xterm": "^5.4.0",
-        "axios": "^1.9.0",
+        "axios": "^1.8.4",
         "clsx": "^2.1.1",
         "eslint-config-airbnb-typescript": "^18.0.0",
-        "framer-motion": "^12.9.2",
+        "framer-motion": "^12.9.1",
         "i18next": "^25.0.1",
         "i18next-browser-languagedetector": "^8.0.5",
         "i18next-http-backend": "^3.0.2",
-        "isbot": "^5.1.27",
+        "isbot": "^5.1.25",
         "jose": "^6.0.10",
         "lucide-react": "^0.503.0",
         "monaco-editor": "^0.52.2",
-        "posthog-js": "^1.236.7",
+        "posthog-js": "^1.236.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-highlight": "^0.15.0",
@@ -60,12 +60,12 @@
         "@playwright/test": "^1.52.0",
         "@react-router/dev": "^7.5.2",
         "@tailwindcss/typography": "^0.5.16",
-        "@tanstack/eslint-plugin-query": "^5.74.7",
+        "@tanstack/eslint-plugin-query": "^5.73.3",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.1",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^22.15.3",
+        "@types/node": "^22.14.1",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.1",
         "@types/react-highlight": "^0.12.8",
@@ -136,9 +136,9 @@
       }
     },
     "node_modules/@asamuzakjp/css-color": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.1.5.tgz",
-      "integrity": "sha512-w7AmVyTTiU41fNLsFDf+gA2Dwtbx2EJtn2pbJNAGSRAg50loXy1uLXA3hEpD8+eydcomTurw09tq5/AyceCaGg==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.1.4.tgz",
+      "integrity": "sha512-SeuBV4rnjpFNjI8HSgKUwteuFdkHwkboq31HWzznuqgySQir+jSTczoWVVL4jvOjKjuH80fMDG0Fvg1Sb+OJsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5977,9 +5977,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.1.tgz",
-      "integrity": "sha512-kxz0YeeCrRUHz3zyqvd7n+TVRlNyTifBsmnmNPtk3hQURUyG9eAB+usz6DAwagMusjx/zb3AjvDUvhFGDAexGw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz",
+      "integrity": "sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==",
       "cpu": [
         "arm"
       ],
@@ -5990,9 +5990,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.40.1.tgz",
-      "integrity": "sha512-PPkxTOisoNC6TpnDKatjKkjRMsdaWIhyuMkA4UsBXT9WEZY4uHezBTjs6Vl4PbqQQeu6oION1w2voYZv9yquCw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.40.0.tgz",
+      "integrity": "sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==",
       "cpu": [
         "arm64"
       ],
@@ -6003,9 +6003,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.40.1.tgz",
-      "integrity": "sha512-VWXGISWFY18v/0JyNUy4A46KCFCb9NVsH+1100XP31lud+TzlezBbz24CYzbnA4x6w4hx+NYCXDfnvDVO6lcAA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.40.0.tgz",
+      "integrity": "sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==",
       "cpu": [
         "arm64"
       ],
@@ -6016,9 +6016,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.40.1.tgz",
-      "integrity": "sha512-nIwkXafAI1/QCS7pxSpv/ZtFW6TXcNUEHAIA9EIyw5OzxJZQ1YDrX+CL6JAIQgZ33CInl1R6mHet9Y/UZTg2Bw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.40.0.tgz",
+      "integrity": "sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==",
       "cpu": [
         "x64"
       ],
@@ -6029,9 +6029,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.40.1.tgz",
-      "integrity": "sha512-BdrLJ2mHTrIYdaS2I99mriyJfGGenSaP+UwGi1kB9BLOCu9SR8ZpbkmmalKIALnRw24kM7qCN0IOm6L0S44iWw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.40.0.tgz",
+      "integrity": "sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==",
       "cpu": [
         "arm64"
       ],
@@ -6042,9 +6042,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.40.1.tgz",
-      "integrity": "sha512-VXeo/puqvCG8JBPNZXZf5Dqq7BzElNJzHRRw3vjBE27WujdzuOPecDPc/+1DcdcTptNBep3861jNq0mYkT8Z6Q==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.40.0.tgz",
+      "integrity": "sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==",
       "cpu": [
         "x64"
       ],
@@ -6055,9 +6055,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.40.1.tgz",
-      "integrity": "sha512-ehSKrewwsESPt1TgSE/na9nIhWCosfGSFqv7vwEtjyAqZcvbGIg4JAcV7ZEh2tfj/IlfBeZjgOXm35iOOjadcg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.40.0.tgz",
+      "integrity": "sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==",
       "cpu": [
         "arm"
       ],
@@ -6068,9 +6068,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.40.1.tgz",
-      "integrity": "sha512-m39iO/aaurh5FVIu/F4/Zsl8xppd76S4qoID8E+dSRQvTyZTOI2gVk3T4oqzfq1PtcvOfAVlwLMK3KRQMaR8lg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.40.0.tgz",
+      "integrity": "sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==",
       "cpu": [
         "arm"
       ],
@@ -6081,9 +6081,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.40.1.tgz",
-      "integrity": "sha512-Y+GHnGaku4aVLSgrT0uWe2o2Rq8te9hi+MwqGF9r9ORgXhmHK5Q71N757u0F8yU1OIwUIFy6YiJtKjtyktk5hg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.40.0.tgz",
+      "integrity": "sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==",
       "cpu": [
         "arm64"
       ],
@@ -6094,9 +6094,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.40.1.tgz",
-      "integrity": "sha512-jEwjn3jCA+tQGswK3aEWcD09/7M5wGwc6+flhva7dsQNRZZTe30vkalgIzV4tjkopsTS9Jd7Y1Bsj6a4lzz8gQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.40.0.tgz",
+      "integrity": "sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==",
       "cpu": [
         "arm64"
       ],
@@ -6107,9 +6107,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.40.1.tgz",
-      "integrity": "sha512-ySyWikVhNzv+BV/IDCsrraOAZ3UaC8SZB67FZlqVwXwnFhPihOso9rPOxzZbjp81suB1O2Topw+6Ug3JNegejQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.40.0.tgz",
+      "integrity": "sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==",
       "cpu": [
         "loong64"
       ],
@@ -6120,9 +6120,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.40.1.tgz",
-      "integrity": "sha512-BvvA64QxZlh7WZWqDPPdt0GH4bznuL6uOO1pmgPnnv86rpUpc8ZxgZwcEgXvo02GRIZX1hQ0j0pAnhwkhwPqWg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.40.0.tgz",
+      "integrity": "sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==",
       "cpu": [
         "ppc64"
       ],
@@ -6133,9 +6133,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.40.1.tgz",
-      "integrity": "sha512-EQSP+8+1VuSulm9RKSMKitTav89fKbHymTf25n5+Yr6gAPZxYWpj3DzAsQqoaHAk9YX2lwEyAf9S4W8F4l3VBQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.40.0.tgz",
+      "integrity": "sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==",
       "cpu": [
         "riscv64"
       ],
@@ -6146,9 +6146,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.40.1.tgz",
-      "integrity": "sha512-n/vQ4xRZXKuIpqukkMXZt9RWdl+2zgGNx7Uda8NtmLJ06NL8jiHxUawbwC+hdSq1rrw/9CghCpEONor+l1e2gA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.40.0.tgz",
+      "integrity": "sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==",
       "cpu": [
         "riscv64"
       ],
@@ -6159,9 +6159,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.1.tgz",
-      "integrity": "sha512-h8d28xzYb98fMQKUz0w2fMc1XuGzLLjdyxVIbhbil4ELfk5/orZlSTpF/xdI9C8K0I8lCkq+1En2RJsawZekkg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.0.tgz",
+      "integrity": "sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==",
       "cpu": [
         "s390x"
       ],
@@ -6172,9 +6172,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.1.tgz",
-      "integrity": "sha512-XiK5z70PEFEFqcNj3/zRSz/qX4bp4QIraTy9QjwJAb/Z8GM7kVUsD0Uk8maIPeTyPCP03ChdI+VVmJriKYbRHQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.0.tgz",
+      "integrity": "sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==",
       "cpu": [
         "x64"
       ],
@@ -6185,9 +6185,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.1.tgz",
-      "integrity": "sha512-2BRORitq5rQ4Da9blVovzNCMaUlyKrzMSvkVR0D4qPuOy/+pMCrh1d7o01RATwVy+6Fa1WBw+da7QPeLWU/1mQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.0.tgz",
+      "integrity": "sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==",
       "cpu": [
         "x64"
       ],
@@ -6198,9 +6198,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.40.1.tgz",
-      "integrity": "sha512-b2bcNm9Kbde03H+q+Jjw9tSfhYkzrDUf2d5MAd1bOJuVplXvFhWz7tRtWvD8/ORZi7qSCy0idW6tf2HgxSXQSg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.40.0.tgz",
+      "integrity": "sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==",
       "cpu": [
         "arm64"
       ],
@@ -6211,9 +6211,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.40.1.tgz",
-      "integrity": "sha512-DfcogW8N7Zg7llVEfpqWMZcaErKfsj9VvmfSyRjCyo4BI3wPEfrzTtJkZG6gKP/Z92wFm6rz2aDO7/JfiR/whA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.40.0.tgz",
+      "integrity": "sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA==",
       "cpu": [
         "ia32"
       ],
@@ -6224,9 +6224,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.1.tgz",
-      "integrity": "sha512-ECyOuDeH3C1I8jH2MK1RtBJW+YPMvSfT0a5NN0nHfQYnDSJ6tUiZH3gzwVP5/Kfh/+Tt7tpWVF9LXNTnhTJ3kA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.0.tgz",
+      "integrity": "sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==",
       "cpu": [
         "x64"
       ],
@@ -6548,9 +6548,9 @@
       }
     },
     "node_modules/@tanstack/eslint-plugin-query": {
-      "version": "5.74.7",
-      "resolved": "https://registry.npmjs.org/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.74.7.tgz",
-      "integrity": "sha512-EeHuaaYiCOD+XOGyB7LMNEx9OEByAa5lkgP+S3ZggjKJpmIO6iRWeoIYYDKo2F8uc3qXcVhTfC7pn7NddQiNtA==",
+      "version": "5.73.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.73.3.tgz",
+      "integrity": "sha512-GmUtnOkRzDuNOq96g3eW5ADKC1nWfrM9RI0kRyQVr87rOl6y+PUgkuVaPxh3R2C0EVODxCS07b9aaWphidl/OA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6565,9 +6565,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.74.7",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.74.7.tgz",
-      "integrity": "sha512-X3StkN/Y6KGHndTjJf8H8th7AX4bKfbRpiVhVqevf0QWlxl6DhyJ0TYG3R0LARa/+xqDwzU9mA4pbJxzPCI29A==",
+      "version": "5.74.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.74.4.tgz",
+      "integrity": "sha512-YuG0A0+3i9b2Gfo9fkmNnkUWh5+5cFhWBN0pJAHkHilTx6A0nv8kepkk4T4GRt4e5ahbtFj2eTtkiPcVU1xO4A==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -6575,12 +6575,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.74.7",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.74.7.tgz",
-      "integrity": "sha512-u4o/RIWnnrq26orGZu2NDPwmVof1vtAiiV6KYUXd49GuK+8HX+gyxoAYqIaZogvCE1cqOuZAhQKcrKGYGkrLxg==",
+      "version": "5.74.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.74.4.tgz",
+      "integrity": "sha512-mAbxw60d4ffQ4qmRYfkO1xzRBPUEf/72Dgo3qqea0J66nIKuDTLEqQt0ku++SDFlMGMnB6uKDnEG1xD/TDse4Q==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.74.7"
+        "@tanstack/query-core": "5.74.4"
       },
       "funding": {
         "type": "github",
@@ -6853,9 +6853,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.15.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.3.tgz",
-      "integrity": "sha512-lX7HFZeHf4QG/J7tBZqrCAXwz9J5RD56Y6MpP0eJkka8p+K0RY/yBTW7CYFJ4VGCclxqOLKmiGP5juQc6MKgcw==",
+      "version": "22.14.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.1.tgz",
+      "integrity": "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -7925,9 +7925,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
-      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
+      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -9165,9 +9165,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.143",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.143.tgz",
-      "integrity": "sha512-QqklJMOFBMqe46k8iIOwA9l2hz57V2OKMmP5eSWcUvwx+mASAsbU+wkF1pHjn9ZVSBPrsYWr4/W/95y5SwYg2g==",
+      "version": "1.5.142",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.142.tgz",
+      "integrity": "sha512-Ah2HgkTu/9RhTDNThBtzu2Wirdy4DC9b0sMT1pUhbkZQ5U/iwmE+PHZX1MpjD5IkJCc2wSghgGG/B04szAx07w==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -10623,9 +10623,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.9.2",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.9.2.tgz",
-      "integrity": "sha512-R0O3Jdqbfwywpm45obP+8sTgafmdEcUoShQTAV+rB5pi+Y1Px/FYL5qLLRe5tPtBdN1J4jos7M+xN2VV2oEAbQ==",
+      "version": "12.9.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.9.1.tgz",
+      "integrity": "sha512-dZBp2TO0a39Cc24opshlLoM0/OdTZVKzcXWuhntfwy2Qgz3t9+N4sTyUqNANyHaRFiJUWbwwsXeDvQkEBPky+g==",
       "license": "MIT",
       "dependencies": {
         "motion-dom": "^12.9.1",
@@ -10968,9 +10968,9 @@
       "license": "MIT"
     },
     "node_modules/graphql": {
-      "version": "16.11.0",
-      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.11.0.tgz",
-      "integrity": "sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==",
+      "version": "16.10.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.10.0.tgz",
+      "integrity": "sha512-AjqGKbDGUFRKIRCP9tCKiIGHyriz2oHEbPIbEtcSLSs4YjReZOIPQQWek4+6hjw62H9QShXHyaGivGiYVLeYFQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -12031,9 +12031,9 @@
       "license": "MIT"
     },
     "node_modules/isbot": {
-      "version": "5.1.27",
-      "resolved": "https://registry.npmjs.org/isbot/-/isbot-5.1.27.tgz",
-      "integrity": "sha512-V3W56Hnztt4Wdh3VUlAMbdNicX/tOM38eChW3a2ixP6KEBJAeehxzYzTD59JrU5NCTgBZwRt9lRWr8D7eMZVYQ==",
+      "version": "5.1.26",
+      "resolved": "https://registry.npmjs.org/isbot/-/isbot-5.1.26.tgz",
+      "integrity": "sha512-3wqJEYSIm59dYQjEF7zJ7T42aqaqxbCyJQda5rKCudJykuAnISptCHR/GSGpOnw8UrvU+mGueNLRJS5HXnbsXQ==",
       "license": "Unlicense",
       "engines": {
         "node": ">=18"
@@ -14919,9 +14919,9 @@
       "license": "MIT"
     },
     "node_modules/posthog-js": {
-      "version": "1.236.7",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.236.7.tgz",
-      "integrity": "sha512-HatTinqAt/6aAraCgbnP+2MTeVTChdf6TDsQkef4/yUnXeA4tsHmXnGGJ3vnzQk7N//R6lIHN189BZDO9kuKAg==",
+      "version": "1.236.6",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.236.6.tgz",
+      "integrity": "sha512-IX4fkn3HCK+ObdHr/AuWd+Ks7bgMpRpOQB93b5rDJAWkG4if4xFVUn5pgEjyCNeOO2GM1ECnp08q9tYNYEfwbA==",
       "license": "MIT",
       "dependencies": {
         "core-js": "^3.38.1",
@@ -15922,9 +15922,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.1.tgz",
-      "integrity": "sha512-C5VvvgCCyfyotVITIAv+4efVytl5F7wt+/I2i9q9GZcEXW9BP52YYOXC58igUi+LFZVHukErIIqQSWwv/M3WRw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
+      "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.7"
@@ -15937,26 +15937,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.40.1",
-        "@rollup/rollup-android-arm64": "4.40.1",
-        "@rollup/rollup-darwin-arm64": "4.40.1",
-        "@rollup/rollup-darwin-x64": "4.40.1",
-        "@rollup/rollup-freebsd-arm64": "4.40.1",
-        "@rollup/rollup-freebsd-x64": "4.40.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.40.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.40.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.40.1",
-        "@rollup/rollup-linux-arm64-musl": "4.40.1",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.40.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.40.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.40.1",
-        "@rollup/rollup-linux-riscv64-musl": "4.40.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.40.1",
-        "@rollup/rollup-linux-x64-gnu": "4.40.1",
-        "@rollup/rollup-linux-x64-musl": "4.40.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.40.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.40.1",
-        "@rollup/rollup-win32-x64-msvc": "4.40.1",
+        "@rollup/rollup-android-arm-eabi": "4.40.0",
+        "@rollup/rollup-android-arm64": "4.40.0",
+        "@rollup/rollup-darwin-arm64": "4.40.0",
+        "@rollup/rollup-darwin-x64": "4.40.0",
+        "@rollup/rollup-freebsd-arm64": "4.40.0",
+        "@rollup/rollup-freebsd-x64": "4.40.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.40.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.40.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.40.0",
+        "@rollup/rollup-linux-arm64-musl": "4.40.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.40.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.40.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.40.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.40.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.40.0",
+        "@rollup/rollup-linux-x64-gnu": "4.40.0",
+        "@rollup/rollup-linux-x64-musl": "4.40.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.40.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.40.0",
+        "@rollup/rollup-win32-x64-msvc": "4.40.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -17507,9 +17507,9 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.40.1.tgz",
-      "integrity": "sha512-9YvLNnORDpI+vghLU/Nf+zSv0kL47KbVJ1o3sKgoTefl6i+zebxbiDQWoe/oWWqPhIgQdRZRT1KA9sCPL810SA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.40.0.tgz",
+      "integrity": "sha512-ABHZ2/tS2JkvH1PEjxFDTUWC8dB5OsIGZP4IFLhR293GqT5Y5qB1WwL2kMPYhQW9DVgVD8Hd7I8gjwPIf5GFkw==",
       "dev": true,
       "license": "(MIT OR CC0-1.0)",
       "engines": {

frontend/package.json

@@ -16,22 +16,22 @@
     "@reduxjs/toolkit": "^2.7.0",
     "@stripe/react-stripe-js": "^3.6.0",
     "@stripe/stripe-js": "^7.2.0",
-    "@tanstack/react-query": "^5.74.7",
+    "@tanstack/react-query": "^5.74.4",
     "@vitejs/plugin-react": "^4.4.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.4.0",
-    "axios": "^1.9.0",
+    "axios": "^1.8.4",
     "clsx": "^2.1.1",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "framer-motion": "^12.9.2",
+    "framer-motion": "^12.9.1",
     "i18next": "^25.0.1",
     "i18next-browser-languagedetector": "^8.0.5",
     "i18next-http-backend": "^3.0.2",
-    "isbot": "^5.1.27",
+    "isbot": "^5.1.25",
     "jose": "^6.0.10",
     "lucide-react": "^0.503.0",
     "monaco-editor": "^0.52.2",
-    "posthog-js": "^1.236.7",
+    "posthog-js": "^1.236.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-highlight": "^0.15.0",
@@ -84,12 +84,12 @@
     "@playwright/test": "^1.52.0",
     "@react-router/dev": "^7.5.2",
     "@tailwindcss/typography": "^0.5.16",
-    "@tanstack/eslint-plugin-query": "^5.74.7",
+    "@tanstack/eslint-plugin-query": "^5.73.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^22.15.3",
+    "@types/node": "^22.14.1",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.1",
     "@types/react-highlight": "^0.12.8",

frontend/scripts/check-unlocalized-strings.cjs

@@ -39,7 +39,6 @@ const IGNORE_PATHS = [
   "entry.client.tsx", // Client entry point
   "utils/scan-unlocalized-strings.ts", // Original scanner
   "utils/scan-unlocalized-strings-ast.ts", // This file itself
-  "frontend/src/components/features/home/tasks/get-prompt-for-query.ts", // Only contains agent prompts
 ];
 
 // Extensions to scan
@@ -107,10 +106,6 @@ function isRawTranslationKey(str) {
 const EXCLUDED_TECHNICAL_STRINGS = [
   "openid email profile", // OAuth scope string - not user-facing
   "OPEN_ISSUE", // Task type identifier, not a UI string
-  "Merge Request", // Git provider specific terminology
-  "GitLab API", // Git provider specific terminology
-  "Pull Request", // Git provider specific terminology
-  "GitHub API", // Git provider specific terminology
 ];
 
 function isExcludedTechnicalString(str) {

frontend/src/api/open-hands.ts

@@ -10,12 +10,10 @@ import {
   GetTrajectoryResponse,
   GitChangeDiff,
   GitChange,
-  ConversationTrigger,
 } from "./open-hands.types";
 import { openHands } from "./open-hands-axios";
 import { ApiSettings, PostApiSettings } from "#/types/settings";
 import { GitUser, GitRepository } from "#/types/git";
-import { SuggestedTask } from "#/components/features/home/tasks/task.types";
 
 class OpenHands {
   /**
@@ -151,21 +149,17 @@ class OpenHands {
   }
 
   static async createConversation(
-    conversation_trigger: ConversationTrigger = "gui",
     selectedRepository?: GitRepository,
     initialUserMsg?: string,
     imageUrls?: string[],
     replayJson?: string,
-    suggested_task?: SuggestedTask,
   ): Promise<Conversation> {
     const body = {
-      conversation_trigger,
       selected_repository: selectedRepository,
       selected_branch: undefined,
       initial_user_msg: initialUserMsg,
       image_urls: imageUrls,
       replay_json: replayJson,
-      suggested_task,
     };
 
     const { data } = await openHands.post<Conversation>(

frontend/src/api/open-hands.types.ts

@@ -70,7 +70,7 @@ export interface AuthenticateResponse {
   error?: string;
 }
 
-export type ConversationTrigger = "resolver" | "gui" | "suggested_task";
+export type ConversationTrigger = "resolver" | "gui";
 
 export interface Conversation {
   conversation_id: string;

frontend/src/components/features/diff-viewer/file-diff-viewer.tsx

@@ -1,4 +1,4 @@
-import { DiffEditor, Monaco } from "@monaco-editor/react";
+import { DiffEditor } from "@monaco-editor/react";
 import React from "react";
 import { editor as editor_t } from "monaco-editor";
 import { LuFileDiff, LuFileMinus, LuFilePlus } from "react-icons/lu";
@@ -88,29 +88,6 @@ export function FileDiffViewer({ path, type }: FileDiffViewerProps) {
     }
   }, []);
 
-  const beforeMount = (monaco: Monaco) => {
-    monaco.editor.defineTheme("custom-diff-theme", {
-      base: "vs-dark",
-      inherit: true,
-      rules: [
-        { token: "comment", foreground: "6a9955" },
-        { token: "keyword", foreground: "569cd6" },
-        { token: "string", foreground: "ce9178" },
-        { token: "number", foreground: "b5cea8" },
-      ],
-      colors: {
-        "diffEditor.insertedTextBackground": "#014b01AA", // Stronger green background
-        "diffEditor.removedTextBackground": "#750000AA", // Stronger red background
-        "diffEditor.insertedLineBackground": "#003f00AA", // Dark green for added lines
-        "diffEditor.removedLineBackground": "#5a0000AA", // Dark red for removed lines
-        "diffEditor.border": "#444444", // Border between diff editors
-
-        "editorUnnecessaryCode.border": "#00000000", // No border for unnecessary code
-        "editorUnnecessaryCode.opacity": "#00000077", // Slightly faded
-      },
-    });
-  };
-
   const handleEditorDidMount = (editor: editor_t.IStandaloneDiffEditor) => {
     diffEditorRef.current = editor;
     updateEditorHeight();
@@ -168,9 +145,8 @@ export function FileDiffViewer({ path, type }: FileDiffViewerProps) {
             language={getLanguageFromPath(filePath)}
             original={isAdded ? "" : diff.original}
             modified={isDeleted ? "" : diff.modified}
-            theme="custom-diff-theme"
+            theme="vs-dark"
             onMount={handleEditorDidMount}
-            beforeMount={beforeMount}
             options={{
               renderValidationDecorations: "off",
               readOnly: true,

frontend/src/components/features/file-explorer/explorer-tree.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next";
+import TreeNode from "./tree-node";
+import { I18nKey } from "#/i18n/declaration";
+
+interface ExplorerTreeProps {
+  files: string[] | null;
+  defaultOpen?: boolean;
+}
+
+export function ExplorerTree({
+  files,
+  defaultOpen = false,
+}: ExplorerTreeProps) {
+  const { t } = useTranslation();
+  if (!files?.length) {
+    const message = !files
+      ? I18nKey.EXPLORER$LOADING_WORKSPACE_MESSAGE
+      : I18nKey.EXPLORER$EMPTY_WORKSPACE_MESSAGE;
+    return <div className="text-sm text-gray-400 pt-4">{t(message)}</div>;
+  }
+  return (
+    <div className="w-full h-full pt-[4px]">
+      {files.map((file) => (
+        <TreeNode key={file} path={file} defaultOpen={defaultOpen} />
+      ))}
+    </div>
+  );
+}

frontend/src/components/features/file-explorer/file-explorer-actions.tsx

@@ -0,0 +1,28 @@
+import { RefreshIconButton } from "#/components/shared/buttons/refresh-icon-button";
+import { ToggleWorkspaceIconButton } from "#/components/shared/buttons/toggle-workspace-icon-button";
+import { cn } from "#/utils/utils";
+
+interface ExplorerActionsProps {
+  onRefresh: () => void;
+  toggleHidden: () => void;
+  isHidden: boolean;
+}
+
+export function ExplorerActions({
+  toggleHidden,
+  onRefresh,
+  isHidden,
+}: ExplorerActionsProps) {
+  return (
+    <div
+      className={cn(
+        "flex h-[24px] items-center gap-1",
+        isHidden ? "right-3" : "right-2",
+      )}
+    >
+      {!isHidden && <RefreshIconButton onClick={onRefresh} />}
+
+      <ToggleWorkspaceIconButton isHidden={isHidden} onClick={toggleHidden} />
+    </div>
+  );
+}

frontend/src/components/features/file-explorer/file-explorer-header.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import { cn } from "#/utils/utils";
+import { ExplorerActions } from "./file-explorer-actions";
+
+interface FileExplorerHeaderProps {
+  isOpen: boolean;
+  onToggle: () => void;
+  onRefreshWorkspace: () => void;
+}
+
+export function FileExplorerHeader({
+  isOpen,
+  onToggle,
+  onRefreshWorkspace,
+}: FileExplorerHeaderProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={cn(
+        "sticky top-0 bg-base-secondary",
+        "flex items-center",
+        !isOpen ? "justify-center" : "justify-between",
+      )}
+    >
+      {isOpen && (
+        <div className="text-neutral-300 font-bold text-sm">
+          {t(I18nKey.EXPLORER$LABEL_WORKSPACE)}
+        </div>
+      )}
+      <ExplorerActions
+        isHidden={!isOpen}
+        toggleHidden={onToggle}
+        onRefresh={onRefreshWorkspace}
+      />
+    </div>
+  );
+}

frontend/src/components/features/file-explorer/file-explorer.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { RUNTIME_INACTIVE_STATES } from "#/types/agent-state";
+import { ExplorerTree } from "#/components/features/file-explorer/explorer-tree";
+import toast from "#/utils/toast";
+import { RootState } from "#/store";
+import { I18nKey } from "#/i18n/declaration";
+import { useListFiles } from "#/hooks/query/use-list-files";
+import { cn } from "#/utils/utils";
+import { FileExplorerHeader } from "./file-explorer-header";
+import { useVSCodeUrl } from "#/hooks/query/use-vscode-url";
+import { BrandButton } from "../settings/brand-button";
+import VSCodeIcon from "#/assets/vscode-alt.svg?react";
+
+interface FileExplorerProps {
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+export function FileExplorer({ isOpen, onToggle }: FileExplorerProps) {
+  const { t } = useTranslation();
+
+  const { curAgentState } = useSelector((state: RootState) => state.agent);
+
+  const { data: paths, refetch, error } = useListFiles();
+  const { data: vscodeUrl } = useVSCodeUrl({
+    enabled: !RUNTIME_INACTIVE_STATES.includes(curAgentState),
+  });
+
+  const handleOpenVSCode = () => {
+    if (vscodeUrl?.vscode_url) {
+      window.open(vscodeUrl.vscode_url, "_blank");
+    } else if (vscodeUrl?.error) {
+      toast.error(
+        `open-vscode-error-${new Date().getTime()}`,
+        t(I18nKey.EXPLORER$VSCODE_SWITCHING_ERROR_MESSAGE, {
+          error: vscodeUrl.error,
+        }),
+      );
+    }
+  };
+
+  const refreshWorkspace = () => {
+    if (!RUNTIME_INACTIVE_STATES.includes(curAgentState)) {
+      refetch();
+    }
+  };
+
+  React.useEffect(() => {
+    refreshWorkspace();
+  }, [curAgentState]);
+
+  return (
+    <div data-testid="file-explorer" className="relative h-full">
+      <div
+        className={cn(
+          "bg-base-secondary h-full border-r-1 border-r-neutral-600 flex flex-col",
+          !isOpen ? "w-12" : "w-60",
+        )}
+      >
+        <div className="flex flex-col relative h-full px-3 py-2 overflow-hidden">
+          <FileExplorerHeader
+            isOpen={isOpen}
+            onToggle={onToggle}
+            onRefreshWorkspace={refreshWorkspace}
+          />
+          {!error && (
+            <div className="overflow-auto flex-grow min-h-0">
+              <div style={{ display: !isOpen ? "none" : "block" }}>
+                <ExplorerTree files={paths || []} />
+              </div>
+            </div>
+          )}
+          {error && (
+            <div className="flex flex-col items-center justify-center h-full">
+              <p className="text-neutral-300 text-sm">{error.message}</p>
+            </div>
+          )}
+          {isOpen && (
+            <BrandButton
+              testId="open-vscode-button"
+              type="button"
+              variant="secondary"
+              className="w-full text-content border-content"
+              isDisabled={RUNTIME_INACTIVE_STATES.includes(curAgentState)}
+              onClick={handleOpenVSCode}
+              startContent={<VSCodeIcon width={20} height={20} />}
+            >
+              {t(I18nKey.VSCODE$OPEN)}
+            </BrandButton>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/features/file-explorer/file-icon.tsx

@@ -0,0 +1,12 @@
+import { FaFile } from "react-icons/fa";
+import { getExtension } from "#/utils/utils";
+import { EXTENSION_ICON_MAP } from "../../extension-icon-map.constant";
+
+interface FileIconProps {
+  filename: string;
+}
+
+export function FileIcon({ filename }: FileIconProps) {
+  const extension = getExtension(filename);
+  return EXTENSION_ICON_MAP[extension] || <FaFile />;
+}

frontend/src/components/features/file-explorer/filename.tsx

@@ -0,0 +1,20 @@
+import { FolderIcon } from "./folder-icon";
+import { FileIcon } from "./file-icon";
+
+interface FilenameProps {
+  name: string;
+  type: "folder" | "file";
+  isOpen: boolean;
+}
+
+export function Filename({ name, type, isOpen }: FilenameProps) {
+  return (
+    <div className="cursor-pointer text-nowrap rounded-[5px] p-1 nowrap flex items-center gap-2 aria-selected:bg-neutral-600 aria-selected:text-white hover:text-white">
+      <div className="flex-shrink-0">
+        {type === "folder" && <FolderIcon isOpen={isOpen} />}
+        {type === "file" && <FileIcon filename={name} />}
+      </div>
+      <div className="flex-grow">{name}</div>
+    </div>
+  );
+}

frontend/src/components/features/file-explorer/folder-icon.tsx

@@ -0,0 +1,13 @@
+import { FaFolder, FaFolderOpen } from "react-icons/fa";
+
+interface FolderIconProps {
+  isOpen: boolean;
+}
+
+export function FolderIcon({ isOpen }: FolderIconProps) {
+  return isOpen ? (
+    <FaFolderOpen color="D9D3D0" className="icon" />
+  ) : (
+    <FaFolder color="D9D3D0" className="icon" />
+  );
+}

frontend/src/components/features/file-explorer/tree-node.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { useSelector } from "react-redux";
+
+import { useFiles } from "#/context/files";
+import { cn } from "#/utils/utils";
+import { useListFiles } from "#/hooks/query/use-list-files";
+import { useListFile } from "#/hooks/query/use-list-file";
+import { Filename } from "./filename";
+import { RootState } from "#/store";
+
+interface TreeNodeProps {
+  path: string;
+  defaultOpen?: boolean;
+}
+
+function TreeNode({ path, defaultOpen = false }: TreeNodeProps) {
+  const { setFileContent, setSelectedPath, files, selectedPath } = useFiles();
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+  const { curAgentState } = useSelector((state: RootState) => state.agent);
+
+  const isDirectory = path.endsWith("/");
+
+  const { data: paths } = useListFiles({
+    path,
+    enabled: isDirectory && isOpen,
+  });
+
+  const { data: fileContent, refetch } = useListFile({ path });
+
+  React.useEffect(() => {
+    if (fileContent) {
+      if (fileContent !== files[path]) {
+        setFileContent(path, fileContent);
+      }
+    }
+  }, [fileContent, path]);
+
+  React.useEffect(() => {
+    if (selectedPath === path && !isDirectory) {
+      refetch();
+    }
+  }, [curAgentState, selectedPath, path, isDirectory]);
+
+  const fileParts = path.split("/");
+  const filename =
+    fileParts[fileParts.length - 1] || fileParts[fileParts.length - 2];
+
+  const handleClick = async () => {
+    if (isDirectory) setIsOpen((prev) => !prev);
+    else {
+      setSelectedPath(path);
+      await refetch();
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "text-sm text-neutral-400",
+        path === selectedPath && "bg-gray-700",
+      )}
+    >
+      <button
+        type={isDirectory ? "button" : "submit"}
+        name="file"
+        value={path}
+        onClick={handleClick}
+        className="flex items-center justify-between w-full px-1"
+      >
+        <Filename
+          name={filename}
+          type={isDirectory ? "folder" : "file"}
+          isOpen={isOpen}
+        />
+      </button>
+
+      {isOpen && paths && (
+        <div className="ml-5">
+          {paths.map((child, index) => (
+            <TreeNode key={index} path={child} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default React.memo(TreeNode);

frontend/src/components/features/git/code-not-in-github-link.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import { useCreateConversation } from "#/hooks/mutation/use-create-conversation";
+import { setInitialPrompt } from "#/state/initial-query-slice";
+
+const INITIAL_PROMPT = "";
+
+export function CodeNotInGitLink() {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const { mutate: createConversation } = useCreateConversation();
+
+  const handleStartFromScratch = () => {
+    // Set the initial prompt and create a new conversation
+    dispatch(setInitialPrompt(INITIAL_PROMPT));
+    createConversation({ q: INITIAL_PROMPT });
+  };
+
+  return (
+    <div className="text-xs text-neutral-400">
+      {t(I18nKey.GITHUB$CODE_NOT_IN_GITHUB)}{" "}
+      <span
+        onClick={handleStartFromScratch}
+        className="underline cursor-pointer"
+      >
+        {t(I18nKey.GITHUB$START_FROM_SCRATCH)}
+      </span>{" "}
+      {t(I18nKey.GITHUB$VSCODE_LINK_DESCRIPTION)}
+    </div>
+  );
+}

frontend/src/components/features/home/home-header.tsx

@@ -28,7 +28,7 @@ export function HomeHeader() {
           testId="header-launch-button"
           variant="primary"
           type="button"
-          onClick={() => createConversation({ conversation_trigger: "gui" })}
+          onClick={() => createConversation({})}
           isDisabled={isCreatingConversation}
         >
           {!isCreatingConversation && "Launch from Scratch"}

frontend/src/components/features/home/repo-selection-form.tsx

@@ -142,12 +142,7 @@ export function RepositorySelectionForm({
           isLoadingRepositories ||
           isRepositoriesError
         }
-        onClick={() =>
-          createConversation({
-            selectedRepository,
-            conversation_trigger: "gui",
-          })
-        }
+        onClick={() => createConversation({ selectedRepository })}
       >
         {!isCreatingConversation && "Launch"}
         {isCreatingConversation && t("HOME$LOADING")}

frontend/src/components/features/home/tasks/get-prompt-for-query.ts

@@ -0,0 +1,95 @@
+import { Provider } from "#/types/settings";
+import { SuggestedTaskType } from "./task.types";
+
+// Helper function to get provider-specific terminology
+const getProviderTerms = (git_provider: Provider) => {
+  if (git_provider === "gitlab") {
+    return {
+      requestType: "Merge Request",
+      requestTypeShort: "MR",
+      apiName: "GitLab API",
+      tokenEnvVar: "GITLAB_TOKEN",
+      ciSystem: "CI pipelines",
+      ciProvider: "GitLab",
+      requestVerb: "merge request",
+    };
+  }
+  return {
+    requestType: "Pull Request",
+    requestTypeShort: "PR",
+    apiName: "GitHub API",
+    tokenEnvVar: "GITHUB_TOKEN",
+    ciSystem: "GitHub Actions",
+    ciProvider: "GitHub",
+    requestVerb: "pull request",
+  };
+};
+
+export const getMergeConflictPrompt = (
+  git_provider: Provider,
+  issueNumber: number,
+  repo: string,
+) => {
+  const terms = getProviderTerms(git_provider);
+
+  return `You are working on ${terms.requestType} #${issueNumber} in repository ${repo}. You need to fix the merge conflicts.
+Use the ${terms.apiName} with the ${terms.tokenEnvVar} environment variable to retrieve the ${terms.requestTypeShort} details. Check out the branch from that ${terms.requestVerb} and look at the diff versus the base branch of the ${terms.requestTypeShort} to understand the ${terms.requestTypeShort}'s intention.
+Then resolve the merge conflicts. If you aren't sure what the right solution is, look back through the commit history at the commits that introduced the conflict and resolve them accordingly.`;
+};
+
+export const getFailingChecksPrompt = (
+  git_provider: Provider,
+  issueNumber: number,
+  repo: string,
+) => {
+  const terms = getProviderTerms(git_provider);
+
+  return `You are working on ${terms.requestType} #${issueNumber} in repository ${repo}. You need to fix the failing CI checks.
+Use the ${terms.apiName} with the ${terms.tokenEnvVar} environment variable to retrieve the ${terms.requestTypeShort} details. Check out the branch from that ${terms.requestVerb} and look at the diff versus the base branch of the ${terms.requestTypeShort} to understand the ${terms.requestTypeShort}'s intention.
+Then use the ${terms.apiName} to look at the ${terms.ciSystem} that are failing on the most recent commit. Try and reproduce the failure locally.
+Get things working locally, then push your changes. Sleep for 30 seconds at a time until the ${terms.ciProvider} ${terms.ciSystem.toLowerCase()} have run again. If they are still failing, repeat the process.`;
+};
+
+export const getUnresolvedCommentsPrompt = (
+  git_provider: Provider,
+  issueNumber: number,
+  repo: string,
+) => {
+  const terms = getProviderTerms(git_provider);
+
+  return `You are working on ${terms.requestType} #${issueNumber} in repository ${repo}. You need to resolve the remaining comments from reviewers.
+Use the ${terms.apiName} with the ${terms.tokenEnvVar} environment variable to retrieve the ${terms.requestTypeShort} details. Check out the branch from that ${terms.requestVerb} and look at the diff versus the base branch of the ${terms.requestTypeShort} to understand the ${terms.requestTypeShort}'s intention.
+Then use the ${terms.apiName} to retrieve all the feedback on the ${terms.requestTypeShort} so far. If anything hasn't been addressed, address it and commit your changes back to the same branch.`;
+};
+
+export const getOpenIssuePrompt = (
+  git_provider: Provider,
+  issueNumber: number,
+  repo: string,
+) => {
+  const terms = getProviderTerms(git_provider);
+
+  return `You are working on Issue #${issueNumber} in repository ${repo}. Your goal is to fix the issue.
+Use the ${terms.apiName} with the ${terms.tokenEnvVar} environment variable to retrieve the issue details and any comments on the issue. Then check out a new branch and investigate what changes will need to be made.
+Finally, make the required changes and open up a ${terms.requestVerb}. Be sure to reference the issue in the ${terms.requestTypeShort} description.`;
+};
+
+export const getPromptForQuery = (
+  git_provider: Provider,
+  type: SuggestedTaskType,
+  issueNumber: number,
+  repo: string,
+) => {
+  switch (type) {
+    case "MERGE_CONFLICTS":
+      return getMergeConflictPrompt(git_provider, issueNumber, repo);
+    case "FAILING_CHECKS":
+      return getFailingChecksPrompt(git_provider, issueNumber, repo);
+    case "UNRESOLVED_COMMENTS":
+      return getUnresolvedCommentsPrompt(git_provider, issueNumber, repo);
+    case "OPEN_ISSUE":
+      return getOpenIssuePrompt(git_provider, issueNumber, repo);
+    default:
+      return "";
+  }
+};

frontend/src/components/features/home/tasks/task-card.tsx

@@ -4,6 +4,7 @@ import { useIsCreatingConversation } from "#/hooks/use-is-creating-conversation"
 import { useCreateConversation } from "#/hooks/mutation/use-create-conversation";
 import { cn } from "#/utils/utils";
 import { useUserRepositories } from "#/hooks/query/use-user-repositories";
+import { getPromptForQuery } from "./get-prompt-for-query";
 import { TaskIssueNumber } from "./task-issue-number";
 import { Provider } from "#/types/settings";
 
@@ -39,11 +40,16 @@ export function TaskCard({ task }: TaskCardProps) {
 
   const handleLaunchConversation = () => {
     const repo = getRepo(task.repo, task.git_provider);
+    const query = getPromptForQuery(
+      task.git_provider,
+      task.task_type,
+      task.issue_number,
+      task.repo,
+    );
 
     return createConversation({
-      conversation_trigger: "suggested_task",
       selectedRepository: repo,
-      suggested_task: task,
+      q: query,
     });
   };
 

frontend/src/components/features/settings/app-settings/app-settings-inputs-skeleton.tsx

@@ -1,15 +0,0 @@
-import { InputSkeleton } from "../input-skeleton";
-import { SwitchSkeleton } from "../switch-skeleton";
-
-export function AppSettingsInputsSkeleton() {
-  return (
-    <div
-      data-testid="app-settings-skeleton"
-      className="px-11 py-9 flex flex-col gap-6"
-    >
-      <InputSkeleton />
-      <SwitchSkeleton />
-      <SwitchSkeleton />
-    </div>
-  );
-}

frontend/src/components/features/settings/app-settings/language-input.tsx

@@ -1,34 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { AvailableLanguages } from "#/i18n";
-import { I18nKey } from "#/i18n/declaration";
-import { SettingsDropdownInput } from "../settings-dropdown-input";
-
-interface LanguageInputProps {
-  name: string;
-  onChange: (value: string) => void;
-  defaultKey: string;
-}
-
-export function LanguageInput({
-  defaultKey,
-  onChange,
-  name,
-}: LanguageInputProps) {
-  const { t } = useTranslation();
-
-  return (
-    <SettingsDropdownInput
-      testId={name}
-      name={name}
-      onInputChange={onChange}
-      label={t(I18nKey.SETTINGS$LANGUAGE)}
-      items={AvailableLanguages.map((l) => ({
-        key: l.value,
-        label: l.label,
-      }))}
-      defaultSelectedKey={defaultKey}
-      isClearable={false}
-      wrapperClassName="w-[680px]"
-    />
-  );
-}

frontend/src/components/features/settings/brand-button.tsx

@@ -2,7 +2,6 @@ import { cn } from "#/utils/utils";
 
 interface BrandButtonProps {
   testId?: string;
-  name?: string;
   variant: "primary" | "secondary" | "danger";
   type: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
   isDisabled?: boolean;
@@ -13,7 +12,6 @@ interface BrandButtonProps {
 
 export function BrandButton({
   testId,
-  name,
   children,
   variant,
   type,
@@ -24,7 +22,6 @@ export function BrandButton({
 }: React.PropsWithChildren<BrandButtonProps>) {
   return (
     <button
-      name={name}
       data-testid={testId}
       disabled={isDisabled}
       // The type is alreadt passed as a prop to the button component

frontend/src/components/features/settings/git-settings/configure-github-repositories-anchor.tsx

@@ -1,27 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { I18nKey } from "#/i18n/declaration";
-import { BrandButton } from "../brand-button";
-
-interface ConfigureGitHubRepositoriesAnchorProps {
-  slug: string;
-}
-
-export function ConfigureGitHubRepositoriesAnchor({
-  slug,
-}: ConfigureGitHubRepositoriesAnchorProps) {
-  const { t } = useTranslation();
-
-  return (
-    <a
-      data-testid="configure-github-repositories-button"
-      href={`https://github.com/apps/${slug}/installations/new`}
-      target="_blank"
-      rel="noreferrer noopener"
-      className="px-11 py-9"
-    >
-      <BrandButton type="button" variant="secondary">
-        {t(I18nKey.GITHUB$CONFIGURE_REPOS)}
-      </BrandButton>
-    </a>
-  );
-}

frontend/src/components/features/settings/git-settings/github-settings-inputs-skeleton.tsx

@@ -1,18 +0,0 @@
-import { InputSkeleton } from "../input-skeleton";
-import { SubtextSkeleton } from "../subtext-skeleton";
-
-export function GitSettingInputsSkeleton() {
-  return (
-    <div className="px-11 py-9 flex flex-col gap-12">
-      <div className="flex flex-col gap-6">
-        <InputSkeleton />
-        <SubtextSkeleton />
-      </div>
-
-      <div className="flex flex-col gap-6">
-        <InputSkeleton />
-        <SubtextSkeleton />
-      </div>
-    </div>
-  );
-}

frontend/src/components/features/settings/git-settings/github-token-help-anchor.tsx

@@ -1,30 +0,0 @@
-import { Trans } from "react-i18next";
-import { I18nKey } from "#/i18n/declaration";
-
-export function GitHubTokenHelpAnchor() {
-  return (
-    <p data-testid="github-token-help-anchor" className="text-xs">
-      <Trans
-        i18nKey={I18nKey.GITHUB$TOKEN_HELP_TEXT}
-        components={[
-          <a
-            key="github-token-help-anchor-link"
-            aria-label="GitHub token help link"
-            href="https://github.com/settings/tokens/new?description=openhands-app&scopes=repo,user,workflow"
-            target="_blank"
-            className="underline underline-offset-2"
-            rel="noopener noreferrer"
-          />,
-          <a
-            key="github-token-help-anchor-link-2"
-            aria-label="GitHub token see more link"
-            href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token"
-            target="_blank"
-            className="underline underline-offset-2"
-            rel="noopener noreferrer"
-          />,
-        ]}
-      />
-    </p>
-  );
-}

frontend/src/components/features/settings/git-settings/github-token-input.tsx

@@ -1,43 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { I18nKey } from "#/i18n/declaration";
-import { SettingsInput } from "../settings-input";
-import { GitHubTokenHelpAnchor } from "./github-token-help-anchor";
-import { KeyStatusIcon } from "../key-status-icon";
-
-interface GitHubTokenInputProps {
-  onChange: (value: string) => void;
-  isGitHubTokenSet: boolean;
-  name: string;
-}
-
-export function GitHubTokenInput({
-  onChange,
-  isGitHubTokenSet,
-  name,
-}: GitHubTokenInputProps) {
-  const { t } = useTranslation();
-
-  return (
-    <div className="flex flex-col gap-6">
-      <SettingsInput
-        testId={name}
-        name={name}
-        onChange={onChange}
-        label={t(I18nKey.GITHUB$TOKEN_LABEL)}
-        type="password"
-        className="w-[680px]"
-        placeholder={isGitHubTokenSet ? "<hidden>" : ""}
-        startContent={
-          isGitHubTokenSet && (
-            <KeyStatusIcon
-              testId="gh-set-token-indicator"
-              isSet={isGitHubTokenSet}
-            />
-          )
-        }
-      />
-
-      <GitHubTokenHelpAnchor />
-    </div>
-  );
-}

frontend/src/components/features/settings/git-settings/gitlab-token-help-anchor.tsx

@@ -1,30 +0,0 @@
-import { Trans } from "react-i18next";
-import { I18nKey } from "#/i18n/declaration";
-
-export function GitLabTokenHelpAnchor() {
-  return (
-    <p data-testid="gitlab-token-help-anchor" className="text-xs">
-      <Trans
-        i18nKey={I18nKey.GITLAB$TOKEN_HELP_TEXT}
-        components={[
-          <a
-            key="gitlab-token-help-anchor-link"
-            aria-label="Gitlab token help link"
-            href="https://gitlab.com/-/user_settings/personal_access_tokens?name=openhands-app&scopes=api,read_user,read_repository,write_repository"
-            target="_blank"
-            className="underline underline-offset-2"
-            rel="noopener noreferrer"
-          />,
-          <a
-            key="gitlab-token-help-anchor-link-2"
-            aria-label="GitLab token see more link"
-            href="https://docs.gitlab.com/user/profile/personal_access_tokens/"
-            target="_blank"
-            className="underline underline-offset-2"
-            rel="noopener noreferrer"
-          />,
-        ]}
-      />
-    </p>
-  );
-}

frontend/src/components/features/settings/git-settings/gitlab-token-input.tsx

@@ -1,43 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { I18nKey } from "#/i18n/declaration";
-import { SettingsInput } from "../settings-input";
-import { GitLabTokenHelpAnchor } from "./gitlab-token-help-anchor";
-import { KeyStatusIcon } from "../key-status-icon";
-
-interface GitLabTokenInputProps {
-  onChange: (value: string) => void;
-  isGitLabTokenSet: boolean;
-  name: string;
-}
-
-export function GitLabTokenInput({
-  onChange,
-  isGitLabTokenSet,
-  name,
-}: GitLabTokenInputProps) {
-  const { t } = useTranslation();
-
-  return (
-    <div className="flex flex-col gap-6">
-      <SettingsInput
-        testId={name}
-        name={name}
-        onChange={onChange}
-        label={t(I18nKey.GITLAB$TOKEN_LABEL)}
-        type="password"
-        className="w-[680px]"
-        placeholder={isGitLabTokenSet ? "<hidden>" : ""}
-        startContent={
-          isGitLabTokenSet && (
-            <KeyStatusIcon
-              testId="gl-set-token-indicator"
-              isSet={isGitLabTokenSet}
-            />
-          )
-        }
-      />
-
-      <GitLabTokenHelpAnchor />
-    </div>
-  );
-}

frontend/src/components/features/settings/input-skeleton.tsx

@@ -1,8 +0,0 @@
-export function InputSkeleton() {
-  return (
-    <div className="flex flex-col gap-2.5">
-      <div className="w-[70px] h-[20px] skeleton" />
-      <div className="w-[680px] h-[40px] skeleton" />
-    </div>
-  );
-}

frontend/src/components/features/settings/key-status-icon.tsx

@@ -2,13 +2,12 @@ import SuccessIcon from "#/icons/success.svg?react";
 import { cn } from "#/utils/utils";
 
 interface KeyStatusIconProps {
-  testId?: string;
   isSet: boolean;
 }
 
-export function KeyStatusIcon({ testId, isSet }: KeyStatusIconProps) {
+export function KeyStatusIcon({ isSet }: KeyStatusIconProps) {
   return (
-    <span data-testid={testId || (isSet ? "set-indicator" : "unset-indicator")}>
+    <span data-testid={isSet ? "set-indicator" : "unset-indicator"}>
       <SuccessIcon className={cn(isSet ? "text-success" : "text-danger")} />
     </span>
   );

frontend/src/components/features/settings/llm-settings/llm-settings-inputs-skeleton.tsx

@@ -1,21 +0,0 @@
-import { InputSkeleton } from "../input-skeleton";
-import { SubtextSkeleton } from "../subtext-skeleton";
-import { SwitchSkeleton } from "../switch-skeleton";
-
-export function LlmSettingsInputsSkeleton() {
-  return (
-    <div
-      data-testid="app-settings-skeleton"
-      className="px-11 py-9 flex flex-col gap-6"
-    >
-      <SwitchSkeleton />
-      <InputSkeleton />
-      <InputSkeleton />
-      <InputSkeleton />
-      <SubtextSkeleton />
-      <SwitchSkeleton />
-      <SwitchSkeleton />
-      <InputSkeleton />
-    </div>
-  );
-}

frontend/src/components/features/settings/llm-settings/reset-settings-modal.tsx

@@ -1,41 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { I18nKey } from "#/i18n/declaration";
-import { BrandButton } from "../brand-button";
-
-interface ResetSettingsModalProps {
-  onReset: () => void;
-}
-
-export function ResetSettingsModal({ onReset }: ResetSettingsModalProps) {
-  const { t } = useTranslation();
-
-  return (
-    <ModalBackdrop>
-      <div className="bg-base-secondary p-4 rounded-xl flex flex-col gap-4 border border-tertiary">
-        <p>{t(I18nKey.SETTINGS$RESET_CONFIRMATION)}</p>
-        <div className="w-full flex gap-2" data-testid="reset-settings-modal">
-          <BrandButton
-            testId="confirm-button"
-            type="submit"
-            name="reset-settings"
-            variant="primary"
-            className="grow"
-          >
-            Reset
-          </BrandButton>
-
-          <BrandButton
-            testId="cancel-button"
-            type="button"
-            variant="secondary"
-            className="grow"
-            onClick={onReset}
-          >
-            Cancel
-          </BrandButton>
-        </div>
-      </div>
-    </ModalBackdrop>
-  );
-}

frontend/src/components/features/settings/settings-switch.tsx

@@ -6,7 +6,6 @@ interface SettingsSwitchProps {
   name?: string;
   onToggle?: (value: boolean) => void;
   defaultIsToggled?: boolean;
-  isToggled?: boolean;
   isBeta?: boolean;
 }
 
@@ -16,7 +15,6 @@ export function SettingsSwitch({
   name,
   onToggle,
   defaultIsToggled,
-  isToggled: controlledIsToggled,
   isBeta,
 }: React.PropsWithChildren<SettingsSwitchProps>) {
   const [isToggled, setIsToggled] = React.useState(defaultIsToggled ?? false);
@@ -27,18 +25,17 @@ export function SettingsSwitch({
   };
 
   return (
-    <label className="flex items-center gap-2 w-fit cursor-pointer">
+    <label className="flex items-center gap-2 w-fit">
       <input
         hidden
         data-testid={testId}
         name={name}
         type="checkbox"
         onChange={(e) => handleToggle(e.target.checked)}
-        checked={controlledIsToggled ?? isToggled}
         defaultChecked={defaultIsToggled}
       />
 
-      <StyledSwitchComponent isToggled={controlledIsToggled ?? isToggled} />
+      <StyledSwitchComponent isToggled={isToggled} />
 
       <div className="flex items-center gap-1">
         <span className="text-sm">{children}</span>

frontend/src/components/features/settings/subtext-skeleton.tsx

@@ -1,3 +0,0 @@
-export function SubtextSkeleton() {
-  return <div className="w-[250px] h-[20px] skeleton" />;
-}

frontend/src/components/features/settings/switch-skeleton.tsx

@@ -1,8 +0,0 @@
-export function SwitchSkeleton() {
-  return (
-    <div className="flex items-center gap-2">
-      <div className="w-[48px] h-[24px] skeleton-round" />
-      <div className="w-[100px] h-[20px] skeleton" />
-    </div>
-  );
-}

frontend/src/components/features/terminal/terminal.tsx

@@ -18,7 +18,7 @@ function Terminal() {
   return (
     <div className="h-full p-2 min-h-0 flex-grow">
       {isRuntimeInactive && (
-        <div className="w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light">
+        <div className="text-sm text-gray-400 mb-2">
           {t("DIFF_VIEWER$WAITING_FOR_RUNTIME")}
         </div>
       )}

frontend/src/components/layout/container.tsx

@@ -10,7 +10,6 @@ interface ContainerProps {
     icon?: React.ReactNode;
     isBeta?: boolean;
     isLoading?: boolean;
-    rightContent?: React.ReactNode;
   }[];
   children: React.ReactNode;
   className?: React.HTMLAttributes<HTMLDivElement>["className"];
@@ -31,19 +30,16 @@ export function Container({
     >
       {labels && (
         <div className="flex text-xs h-[36px]">
-          {labels.map(
-            ({ label: l, to, icon, isBeta, isLoading, rightContent }) => (
-              <NavTab
-                key={to}
-                to={to}
-                label={l}
-                icon={icon}
-                isBeta={isBeta}
-                isLoading={isLoading}
-                rightContent={rightContent}
-              />
-            ),
-          )}
+          {labels.map(({ label: l, to, icon, isBeta, isLoading }) => (
+            <NavTab
+              key={to}
+              to={to}
+              label={l}
+              icon={icon}
+              isBeta={isBeta}
+              isLoading={isLoading}
+            />
+          ))}
         </div>
       )}
       {!labels && label && (

frontend/src/components/layout/nav-tab.tsx

@@ -9,17 +9,9 @@ interface NavTabProps {
   icon: React.ReactNode;
   isBeta?: boolean;
   isLoading?: boolean;
-  rightContent?: React.ReactNode;
 }
 
-export function NavTab({
-  to,
-  label,
-  icon,
-  isBeta,
-  isLoading,
-  rightContent,
-}: NavTabProps) {
+export function NavTab({ to, label, icon, isBeta, isLoading }: NavTabProps) {
   return (
     <NavLink
       end
@@ -32,17 +24,15 @@ export function NavTab({
       )}
     >
       {({ isActive }) => (
-        <div className="flex items-center justify-between w-full">
+        <>
           <div className="flex items-center gap-2">
             <div className={cn(isActive && "text-logo")}>{icon}</div>
             {label}
             {isBeta && <BetaBadge />}
           </div>
-          <div className="flex items-center gap-2">
-            {rightContent}
-            {isLoading && <LoadingSpinner size="small" />}
-          </div>
-        </div>
+
+          {isLoading && <LoadingSpinner size="small" />}
+        </>
       )}
     </NavLink>
   );

frontend/src/components/shared/buttons/refresh-icon-button.tsx

@@ -19,7 +19,7 @@ export function RefreshIconButton({ onClick }: RefreshIconButtonProps) {
         />
       }
       testId="refresh"
-      ariaLabel={t("BUTTON$REFRESH" as I18nKey)}
+      ariaLabel={t(I18nKey.WORKSPACE$REFRESH)}
       onClick={onClick}
     />
   );

frontend/src/components/shared/buttons/toggle-workspace-icon-button.tsx

@@ -0,0 +1,39 @@
+import { IoIosArrowForward, IoIosArrowBack } from "react-icons/io";
+import { useTranslation } from "react-i18next";
+import { IconButton } from "./icon-button";
+import { I18nKey } from "#/i18n/declaration";
+
+interface ToggleWorkspaceIconButtonProps {
+  onClick: () => void;
+  isHidden: boolean;
+}
+
+export function ToggleWorkspaceIconButton({
+  onClick,
+  isHidden,
+}: ToggleWorkspaceIconButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <IconButton
+      icon={
+        isHidden ? (
+          <IoIosArrowForward
+            size={20}
+            className="text-neutral-400 hover:text-neutral-100 transition"
+          />
+        ) : (
+          <IoIosArrowBack
+            size={20}
+            className="text-neutral-400 hover:text-neutral-100 transition"
+          />
+        )
+      }
+      testId="toggle"
+      ariaLabel={
+        isHidden ? t(I18nKey.WORKSPACE$OPEN) : t(I18nKey.WORKSPACE$CLOSE)
+      }
+      onClick={onClick}
+    />
+  );
+}

frontend/src/components/shared/modals/settings/model-selector.tsx

@@ -14,14 +14,12 @@ interface ModelSelectorProps {
   isDisabled?: boolean;
   models: Record<string, { separator: string; models: string[] }>;
   currentModel?: string;
-  onChange?: (model: string | null) => void;
 }
 
 export function ModelSelector({
   isDisabled,
   models,
   currentModel,
-  onChange,
 }: ModelSelectorProps) {
   const [, setLitellmId] = React.useState<string | null>(null);
   const [selectedProvider, setSelectedProvider] = React.useState<string | null>(
@@ -57,7 +55,6 @@ export function ModelSelector({
     }
     setLitellmId(fullModel);
     setSelectedModel(model);
-    onChange?.(fullModel);
   };
 
   const clear = () => {

frontend/src/components/shared/task-form.tsx

@@ -52,7 +52,7 @@ export function TaskForm({ ref }: TaskFormProps) {
     const formData = new FormData(event.currentTarget);
 
     const q = formData.get("q")?.toString();
-    createConversation({ q, conversation_trigger: "gui" });
+    createConversation({ q });
   };
 
   return (

frontend/src/context/files.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+
+interface FilesContextType {
+  /**
+   * List of file paths in the workspace
+   */
+  paths: string[];
+  /**
+   * Set the list of file paths in the workspace
+   * @param paths The list of file paths in the workspace
+   * @returns void
+   */
+  setPaths: (paths: string[]) => void;
+  /**
+   * A map of file paths to their contents
+   */
+  files: Record<string, string>;
+  /**
+   * Set the content of a file
+   * @param path The path of the file
+   * @param content The content of the file
+   * @returns void
+   */
+  setFileContent: (path: string, content: string) => void;
+  selectedPath: string | null;
+  setSelectedPath: (path: string | null) => void;
+}
+
+const FilesContext = React.createContext<FilesContextType | undefined>(
+  undefined,
+);
+
+interface FilesProviderProps {
+  children: React.ReactNode;
+}
+
+function FilesProvider({ children }: FilesProviderProps) {
+  const [paths, setPaths] = React.useState<string[]>([]);
+  const [files, setFiles] = React.useState<Record<string, string>>({});
+  const [selectedPath, setSelectedPath] = React.useState<string | null>(null);
+
+  const setFileContent = React.useCallback((path: string, content: string) => {
+    setFiles((prev) => ({ ...prev, [path]: content }));
+  }, []);
+
+  const value = React.useMemo(
+    () => ({
+      paths,
+      setPaths,
+      files,
+      setFileContent,
+      selectedPath,
+      setSelectedPath,
+    }),
+    [paths, setPaths, files, setFileContent, selectedPath, setSelectedPath],
+  );
+
+  return <FilesContext value={value}>{children}</FilesContext>;
+}
+
+function useFiles() {
+  const context = React.useContext(FilesContext);
+  if (context === undefined) {
+    throw new Error("useFiles must be used within a FilesProvider");
+  }
+  return context;
+}
+
+export { FilesProvider, useFiles };

frontend/src/hooks/mutation/use-create-conversation.ts

@@ -6,8 +6,6 @@ import OpenHands from "#/api/open-hands";
 import { setInitialPrompt } from "#/state/initial-query-slice";
 import { RootState } from "#/store";
 import { GitRepository } from "#/types/git";
-import { ConversationTrigger } from "#/api/open-hands.types";
-import { SuggestedTask } from "#/components/features/home/tasks/task.types";
 
 export const useCreateConversation = () => {
   const navigate = useNavigate();
@@ -21,20 +19,16 @@ export const useCreateConversation = () => {
   return useMutation({
     mutationKey: ["create-conversation"],
     mutationFn: async (variables: {
-      conversation_trigger: ConversationTrigger;
       q?: string;
       selectedRepository?: GitRepository | null;
-      suggested_task?: SuggestedTask;
     }) => {
       if (variables.q) dispatch(setInitialPrompt(variables.q));
 
       return OpenHands.createConversation(
-        variables.conversation_trigger,
         variables.selectedRepository || undefined,
         variables.q,
         files,
         replayJson || undefined,
-        variables.suggested_task || undefined,
       );
     },
     onSuccess: async ({ conversation_id: conversationId }, { q }) => {

frontend/src/hooks/query/use-list-file.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { useConversation } from "#/context/conversation-context";
+import { FileService } from "#/api/file-service/file-service.api";
+
+interface UseListFileConfig {
+  path: string;
+}
+
+export const useListFile = (config: UseListFileConfig) => {
+  const { conversationId } = useConversation();
+  return useQuery({
+    queryKey: ["files", conversationId, config.path],
+    queryFn: () => FileService.getFile(conversationId, config.path),
+    enabled: false, // don't fetch by default, trigger manually via `refetch`
+  });
+};

frontend/src/hooks/query/use-list-files.ts

@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+import { useSelector } from "react-redux";
+import { useConversation } from "#/context/conversation-context";
+import { RootState } from "#/store";
+import { RUNTIME_INACTIVE_STATES } from "#/types/agent-state";
+import { FileService } from "#/api/file-service/file-service.api";
+
+interface UseListFilesConfig {
+  path?: string;
+  enabled?: boolean;
+}
+
+const DEFAULT_CONFIG: UseListFilesConfig = {
+  enabled: true,
+};
+
+export const useListFiles = (config: UseListFilesConfig = DEFAULT_CONFIG) => {
+  const { conversationId } = useConversation();
+  const { curAgentState } = useSelector((state: RootState) => state.agent);
+  const runtimeIsActive = !RUNTIME_INACTIVE_STATES.includes(curAgentState);
+
+  return useQuery({
+    queryKey: ["files", conversationId, config?.path],
+    queryFn: () => FileService.getFiles(conversationId, config?.path),
+    enabled: runtimeIsActive && !!config?.enabled,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    gcTime: 1000 * 60 * 15, // 15 minutes
+  });
+};

frontend/src/hooks/query/use-settings.ts

@@ -4,9 +4,8 @@ import posthog from "posthog-js";
 import OpenHands from "#/api/open-hands";
 import { useAuth } from "#/context/auth-context";
 import { DEFAULT_SETTINGS } from "#/services/settings";
-import { Settings } from "#/types/settings";
 
-const getSettingsQueryFn = async (): Promise<Settings> => {
+const getSettingsQueryFn = async () => {
   const apiSettings = await OpenHands.getSettings();
 
   return {

frontend/src/i18n/declaration.ts

@@ -26,17 +26,6 @@ export enum I18nKey {
   ANALYTICS$DESCRIPTION = "ANALYTICS$DESCRIPTION",
   ANALYTICS$SEND_ANONYMOUS_DATA = "ANALYTICS$SEND_ANONYMOUS_DATA",
   ANALYTICS$CONFIRM_PREFERENCES = "ANALYTICS$CONFIRM_PREFERENCES",
-  SETTINGS$SAVING = "SETTINGS$SAVING",
-  SETTINGS$SAVE_CHANGES = "SETTINGS$SAVE_CHANGES",
-  SETTINGS$NAV_GIT = "SETTINGS$NAV_GIT",
-  SETTINGS$NAV_APPLICATION = "SETTINGS$NAV_APPLICATION",
-  SETTINGS$NAV_CREDITS = "SETTINGS$NAV_CREDITS",
-  SETTINGS$NAV_API_KEYS = "SETTINGS$NAV_API_KEYS",
-  SETTINGS$NAV_LLM = "SETTINGS$NAV_LLM",
-  GIT$MERGE_REQUEST = "GIT$MERGE_REQUEST",
-  GIT$GITLAB_API = "GIT$GITLAB_API",
-  GIT$PULL_REQUEST = "GIT$PULL_REQUEST",
-  GIT$GITHUB_API = "GIT$GITHUB_API",
   BUTTON$COPY = "BUTTON$COPY",
   BUTTON$COPIED = "BUTTON$COPIED",
   APP$TITLE = "APP$TITLE",
@@ -45,11 +34,8 @@ export enum I18nKey {
   SETTINGS$TITLE = "SETTINGS$TITLE",
   CONVERSATION$START_NEW = "CONVERSATION$START_NEW",
   ACCOUNT_SETTINGS$TITLE = "ACCOUNT_SETTINGS$TITLE",
-  WORKSPACE$TERMINAL_TAB_LABEL = "WORKSPACE$TERMINAL_TAB_LABEL",
-  WORKSPACE$BROWSER_TAB_LABEL = "WORKSPACE$BROWSER_TAB_LABEL",
-  WORKSPACE$JUPYTER_TAB_LABEL = "WORKSPACE$JUPYTER_TAB_LABEL",
-  WORKSPACE$CODE_EDITOR_TAB_LABEL = "WORKSPACE$CODE_EDITOR_TAB_LABEL",
   WORKSPACE$TITLE = "WORKSPACE$TITLE",
+  WORKSPACE$TERMINAL_TAB_LABEL = "WORKSPACE$TERMINAL_TAB_LABEL",
   TERMINAL$WAITING_FOR_CLIENT = "TERMINAL$WAITING_FOR_CLIENT",
   CODE_EDITOR$FILE_SAVED_SUCCESSFULLY = "CODE_EDITOR$FILE_SAVED_SUCCESSFULLY",
   CODE_EDITOR$SAVING_LABEL = "CODE_EDITOR$SAVING_LABEL",
@@ -77,12 +63,14 @@ export enum I18nKey {
   ERROR$GENERIC = "ERROR$GENERIC",
   GITHUB$AUTH_SCOPE = "GITHUB$AUTH_SCOPE",
   FILE_SERVICE$INVALID_FILE_PATH = "FILE_SERVICE$INVALID_FILE_PATH",
+  WORKSPACE$PLANNER_TAB_LABEL = "WORKSPACE$PLANNER_TAB_LABEL",
+  WORKSPACE$JUPYTER_TAB_LABEL = "WORKSPACE$JUPYTER_TAB_LABEL",
+  WORKSPACE$CODE_EDITOR_TAB_LABEL = "WORKSPACE$CODE_EDITOR_TAB_LABEL",
+  WORKSPACE$BROWSER_TAB_LABEL = "WORKSPACE$BROWSER_TAB_LABEL",
+  WORKSPACE$REFRESH = "WORKSPACE$REFRESH",
+  WORKSPACE$OPEN = "WORKSPACE$OPEN",
+  WORKSPACE$CLOSE = "WORKSPACE$CLOSE",
   VSCODE$OPEN = "VSCODE$OPEN",
-  VSCODE$TITLE = "VSCODE$TITLE",
-  VSCODE$LOADING = "VSCODE$LOADING",
-  VSCODE$URL_NOT_AVAILABLE = "VSCODE$URL_NOT_AVAILABLE",
-  VSCODE$FETCH_ERROR = "VSCODE$FETCH_ERROR",
-  VSCODE$IFRAME_PERMISSIONS = "VSCODE$IFRAME_PERMISSIONS",
   INCREASE_TEST_COVERAGE = "INCREASE_TEST_COVERAGE",
   AUTO_MERGE_PRS = "AUTO_MERGE_PRS",
   FIX_README = "FIX_README",
@@ -106,9 +94,6 @@ export enum I18nKey {
   GITHUB$TOKEN_LABEL = "GITHUB$TOKEN_LABEL",
   GITHUB$TOKEN_OPTIONAL = "GITHUB$TOKEN_OPTIONAL",
   GITHUB$GET_TOKEN = "GITHUB$GET_TOKEN",
-  GITHUB$TOKEN_HELP_TEXT = "GITHUB$TOKEN_HELP_TEXT",
-  GITHUB$TOKEN_LINK_TEXT = "GITHUB$TOKEN_LINK_TEXT",
-  GITHUB$INSTRUCTIONS_LINK_TEXT = "GITHUB$INSTRUCTIONS_LINK_TEXT",
   COMMON$HERE = "COMMON$HERE",
   ANALYTICS$ENABLE = "ANALYTICS$ENABLE",
   GITHUB$TOKEN_INVALID = "GITHUB$TOKEN_INVALID",
@@ -149,6 +134,10 @@ export enum I18nKey {
   SESSION$SOCKET_NOT_INITIALIZED_ERROR_MESSAGE = "SESSION$SOCKET_NOT_INITIALIZED_ERROR_MESSAGE",
   EXPLORER$UPLOAD_ERROR_MESSAGE = "EXPLORER$UPLOAD_ERROR_MESSAGE",
   EXPLORER$LABEL_DROP_FILES = "EXPLORER$LABEL_DROP_FILES",
+  EXPLORER$LABEL_WORKSPACE = "EXPLORER$LABEL_WORKSPACE",
+  EXPLORER$EMPTY_WORKSPACE_MESSAGE = "EXPLORER$EMPTY_WORKSPACE_MESSAGE",
+  EXPLORER$LOADING_WORKSPACE_MESSAGE = "EXPLORER$LOADING_WORKSPACE_MESSAGE",
+  EXPLORER$REFRESH_ERROR_MESSAGE = "EXPLORER$REFRESH_ERROR_MESSAGE",
   EXPLORER$UPLOAD_SUCCESS_MESSAGE = "EXPLORER$UPLOAD_SUCCESS_MESSAGE",
   EXPLORER$NO_FILES_UPLOADED_MESSAGE = "EXPLORER$NO_FILES_UPLOADED_MESSAGE",
   EXPLORER$UPLOAD_PARTIAL_SUCCESS_MESSAGE = "EXPLORER$UPLOAD_PARTIAL_SUCCESS_MESSAGE",
@@ -299,7 +288,6 @@ export enum I18nKey {
   BUTTON$CREATE = "BUTTON$CREATE",
   BUTTON$DELETE = "BUTTON$DELETE",
   BUTTON$COPY_TO_CLIPBOARD = "BUTTON$COPY_TO_CLIPBOARD",
-  BUTTON$REFRESH = "BUTTON$REFRESH",
   ERROR$REQUIRED_FIELD = "ERROR$REQUIRED_FIELD",
   PLANNER$EMPTY_MESSAGE = "PLANNER$EMPTY_MESSAGE",
   FEEDBACK$PUBLIC_LABEL = "FEEDBACK$PUBLIC_LABEL",
@@ -360,6 +348,9 @@ export enum I18nKey {
   BROWSER$SCREENSHOT_ALT = "BROWSER$SCREENSHOT_ALT",
   ERROR_TOAST$CLOSE_BUTTON_LABEL = "ERROR_TOAST$CLOSE_BUTTON_LABEL",
   FILE_EXPLORER$UPLOAD = "FILE_EXPLORER$UPLOAD",
+  FILE_EXPLORER$REFRESH_WORKSPACE = "FILE_EXPLORER$REFRESH_WORKSPACE",
+  FILE_EXPLORER$OPEN_WORKSPACE = "FILE_EXPLORER$OPEN_WORKSPACE",
+  FILE_EXPLORER$CLOSE_WORKSPACE = "FILE_EXPLORER$CLOSE_WORKSPACE",
   ACTION_MESSAGE$RUN = "ACTION_MESSAGE$RUN",
   ACTION_MESSAGE$RUN_IPYTHON = "ACTION_MESSAGE$RUN_IPYTHON",
   ACTION_MESSAGE$READ = "ACTION_MESSAGE$READ",
@@ -451,9 +442,6 @@ export enum I18nKey {
   MODEL_SELECTOR$OTHERS = "MODEL_SELECTOR$OTHERS",
   GITLAB$TOKEN_LABEL = "GITLAB$TOKEN_LABEL",
   GITLAB$GET_TOKEN = "GITLAB$GET_TOKEN",
-  GITLAB$TOKEN_HELP_TEXT = "GITLAB$TOKEN_HELP_TEXT",
-  GITLAB$TOKEN_LINK_TEXT = "GITLAB$TOKEN_LINK_TEXT",
-  GITLAB$INSTRUCTIONS_LINK_TEXT = "GITLAB$INSTRUCTIONS_LINK_TEXT",
   GITLAB$OR_SEE = "GITLAB$OR_SEE",
   COMMON$DOCUMENTATION = "COMMON$DOCUMENTATION",
   DIFF_VIEWER$LOADING = "DIFF_VIEWER$LOADING",

frontend/src/i18n/translation.json

@@ -389,171 +389,6 @@
         "tr": "Tercihleri Onayla",
         "de": "Einstellungen bestätigen"
     },
-    "SETTINGS$SAVING": {
-        "en": "Saving...",
-        "ja": "保存中...",
-        "zh-CN": "保存中...",
-        "zh-TW": "儲存中...",
-        "ko-KR": "저장 중...",
-        "no": "Lagrer...",
-        "it": "Salvataggio in corso...",
-        "pt": "Salvando...",
-        "es": "Guardando...",
-        "ar": "جار الحفظ...",
-        "fr": "Enregistrement en cours...",
-        "tr": "Kayıt yapılıyor...",
-        "de": "Speichern..."
-    },
-    "SETTINGS$SAVE_CHANGES": {
-        "en": "Save Changes",
-        "ja": "変更を保存",
-        "zh-CN": "保存更改",
-        "zh-TW": "儲存變更",
-        "ko-KR": "변경 사항 저장",
-        "no": "Lagre endringer",
-        "it": "Salva modifiche",
-        "pt": "Salvar alterações",
-        "es": "Guardar cambios",
-        "ar": "حفظ التغييرات",
-        "fr": "Enregistrer les modifications",
-        "tr": "Değişiklikleri Kaydet",
-        "de": "Änderungen speichern"
-    },
-    "SETTINGS$NAV_GIT": {
-        "en": "Git",
-        "ja": "Git",
-        "zh-CN": "Git",
-        "zh-TW": "Git",
-        "ko-KR": "Git",
-        "no": "Git",
-        "it": "Git",
-        "pt": "Git",
-        "es": "Git",
-        "ar": "Git",
-        "fr": "Git",
-        "tr": "Git",
-        "de": "Git"
-    },
-    "SETTINGS$NAV_APPLICATION": {
-        "en": "Application",
-        "ja": "アプリケーション",
-        "zh-CN": "应用程序",
-        "zh-TW": "應用程式",
-        "ko-KR": "애플리케이션",
-        "no": "Applikasjon",
-        "it": "Applicazione",
-        "pt": "Aplicação",
-        "es": "Aplicación",
-        "ar": "التطبيق",
-        "fr": "Application",
-        "tr": "Uygulama",
-        "de": "Anwendung"
-    },
-    "SETTINGS$NAV_CREDITS": {
-        "en": "Credits",
-        "ja": "クレジット",
-        "zh-CN": "积分",
-        "zh-TW": "點數",
-        "ko-KR": "크레딧",
-        "no": "Kreditter",
-        "it": "Crediti",
-        "pt": "Créditos",
-        "es": "Créditos",
-        "ar": "الرصيد",
-        "fr": "Crédits",
-        "tr": "Krediler",
-        "de": "Guthaben"
-    },
-    "SETTINGS$NAV_API_KEYS": {
-        "en": "API Keys",
-        "ja": "APIキー",
-        "zh-CN": "API密钥",
-        "zh-TW": "API金鑰",
-        "ko-KR": "API 키",
-        "no": "API-nøkler",
-        "it": "Chiavi API",
-        "pt": "Chaves de API",
-        "es": "Claves API",
-        "ar": "مفاتيح API",
-        "fr": "Clés API",
-        "tr": "API Anahtarları",
-        "de": "API-Schlüssel"
-    },
-    "SETTINGS$NAV_LLM": {
-        "en": "LLM",
-        "ja": "LLM",
-        "zh-CN": "LLM",
-        "zh-TW": "LLM",
-        "ko-KR": "LLM",
-        "no": "LLM",
-        "it": "LLM",
-        "pt": "LLM",
-        "es": "LLM",
-        "ar": "LLM",
-        "fr": "LLM",
-        "tr": "LLM",
-        "de": "LLM"
-    },
-    "GIT$MERGE_REQUEST": {
-        "en": "Merge Request",
-        "ja": "マージリクエスト",
-        "zh-CN": "合并请求",
-        "zh-TW": "合併請求",
-        "ko-KR": "머지 요청",
-        "no": "Fletteforespørsel",
-        "it": "Richiesta di fusione",
-        "pt": "Solicitação de mesclagem",
-        "es": "Solicitud de fusión",
-        "ar": "طلب الدمج",
-        "fr": "Demande de fusion",
-        "tr": "Birleştirme İsteği",
-        "de": "Merge-Anfrage"
-    },
-    "GIT$GITLAB_API": {
-        "en": "GitLab API",
-        "ja": "GitLab API",
-        "zh-CN": "GitLab API",
-        "zh-TW": "GitLab API",
-        "ko-KR": "GitLab API",
-        "no": "GitLab API",
-        "it": "API GitLab",
-        "pt": "API do GitLab",
-        "es": "API de GitLab",
-        "ar": "واجهة برمجة تطبيقات GitLab",
-        "fr": "API GitLab",
-        "tr": "GitLab API",
-        "de": "GitLab API"
-    },
-    "GIT$PULL_REQUEST": {
-        "en": "Pull Request",
-        "ja": "プルリクエスト",
-        "zh-CN": "拉取请求",
-        "zh-TW": "拉取請求",
-        "ko-KR": "풀 리퀘스트",
-        "no": "Trekkforespørsel",
-        "it": "Richiesta di pull",
-        "pt": "Solicitação de pull",
-        "es": "Solicitud de extracción",
-        "ar": "طلب السحب",
-        "fr": "Demande de tirage",
-        "tr": "Çekme İsteği",
-        "de": "Pull Request"
-    },
-    "GIT$GITHUB_API": {
-        "en": "GitHub API",
-        "ja": "GitHub API",
-        "zh-CN": "GitHub API",
-        "zh-TW": "GitHub API",
-        "ko-KR": "GitHub API",
-        "no": "GitHub API",
-        "it": "API GitHub",
-        "pt": "API do GitHub",
-        "es": "API de GitHub",
-        "ar": "واجهة برمجة تطبيقات GitHub",
-        "fr": "API GitHub",
-        "tr": "GitHub API",
-        "de": "GitHub API"
-    },
     "BUTTON$COPY": {
         "en": "Copy to clipboard",
         "ja": "クリップボードにコピー",
@@ -676,7 +511,21 @@
         "tr": "Hesap ayarları",
         "de": "Kontoeinstellungen"
     },
-
+    "WORKSPACE$TITLE": {
+        "en": "Workspace",
+        "zh-CN": "工作区",
+        "de": "Arbeitsbereich",
+        "ko-KR": "워크스페이스",
+        "no": "Arbeidsområde",
+        "zh-TW": "工作區",
+        "ar": "مساحة العمل",
+        "fr": "Espace de travail",
+        "it": "Area di lavoro",
+        "pt": "Espaço de trabalho",
+        "es": "Espacio de trabajo",
+        "ja": "ワークスペース",
+        "tr": "Çalışma Alanı"
+    },
     "WORKSPACE$TERMINAL_TAB_LABEL": {
         "en": "Terminal",
         "zh-CN": "终端",
@@ -692,66 +541,6 @@
         "tr": "Terminal",
         "ja": "ターミナル"
     },
-    "WORKSPACE$BROWSER_TAB_LABEL": {
-        "en": "Browser",
-        "zh-CN": "浏览器",
-        "de": "Browser",
-        "ko-KR": "브라우저",
-        "no": "Nettleser",
-        "zh-TW": "瀏覽器",
-        "it": "Browser",
-        "pt": "Navegador",
-        "es": "Navegador",
-        "ar": "المتصفح",
-        "fr": "Navigateur",
-        "tr": "Tarayıcı",
-        "ja": "ブラウザ"
-    },
-    "WORKSPACE$JUPYTER_TAB_LABEL": {
-        "en": "Jupyter",
-        "zh-CN": "Jupyter",
-        "de": "Jupyter",
-        "ko-KR": "Jupyter",
-        "no": "Jupyter",
-        "zh-TW": "Jupyter",
-        "it": "Jupyter",
-        "pt": "Jupyter",
-        "es": "Jupyter",
-        "ar": "Jupyter",
-        "fr": "Jupyter",
-        "tr": "Jupyter",
-        "ja": "Jupyter"
-    },
-    "WORKSPACE$CODE_EDITOR_TAB_LABEL": {
-        "en": "Code Editor",
-        "zh-CN": "代码编辑器",
-        "de": "Code-Editor",
-        "ko-KR": "코드 에디터",
-        "no": "Kodeeditor",
-        "zh-TW": "程式碼編輯器",
-        "it": "Editor di codice",
-        "pt": "Editor de código",
-        "es": "Editor de código",
-        "ar": "محرر الكود",
-        "fr": "Éditeur de code",
-        "tr": "Kod Düzenleyici",
-        "ja": "コードエディタ"
-    },
-    "WORKSPACE$TITLE": {
-        "en": "Workspace",
-        "zh-CN": "工作区",
-        "de": "Arbeitsbereich",
-        "ko-KR": "작업 공간",
-        "no": "Arbeidsområde",
-        "zh-TW": "工作區",
-        "it": "Area di lavoro",
-        "pt": "Espaço de trabalho",
-        "es": "Espacio de trabajo",
-        "ar": "مساحة العمل",
-        "fr": "Espace de travail",
-        "tr": "Çalışma Alanı",
-        "ja": "ワークスペース"
-    },
     "TERMINAL$WAITING_FOR_CLIENT": {
         "en": "Waiting for client to become ready...",
         "ja": "クライアントの準備を待機中...",
@@ -1157,13 +946,111 @@
         "tr": "Geçersiz dosya yolu. Lütfen dosya adını kontrol edin ve tekrar deneyin.",
         "ja": "ファイルパスが無効です。ファイル名を確認して、もう一度お試しください。"
     },
-
-
-
-
-
-
-
+    "WORKSPACE$PLANNER_TAB_LABEL": {
+        "en": "Planner",
+        "zh-CN": "规划器",
+        "de": "Planer",
+        "ko-KR": "플래너",
+        "no": "Planlegger",
+        "zh-TW": "規劃工具",
+        "ar": "المخطط",
+        "fr": "Planificateur",
+        "it": "Pianificatore",
+        "pt": "Planejador",
+        "es": "Planificador",
+        "ja": "プランナー",
+        "tr": "Planlayıcı"
+    },
+    "WORKSPACE$JUPYTER_TAB_LABEL": {
+        "en": "Jupyter",
+        "zh-CN": "Jupyter",
+        "de": "Jupyter",
+        "ko-KR": "Jupyter",
+        "no": "Jupyter",
+        "zh-TW": "Jupyter",
+        "ar": "Jupyter",
+        "fr": "Jupyter",
+        "it": "Jupyter",
+        "pt": "Jupyter",
+        "es": "Jupyter",
+        "ja": "Jupyter",
+        "tr": "Jupyter"
+    },
+    "WORKSPACE$CODE_EDITOR_TAB_LABEL": {
+        "en": "Code Editor",
+        "zh-CN": "代码编辑器",
+        "de": "Code-Editor",
+        "ko-KR": "코드 편집기",
+        "no": "Kode editor",
+        "zh-TW": "程式碼編輯器",
+        "ar": "محرر الكود",
+        "fr": "Éditeur de code",
+        "it": "Editor di codice",
+        "pt": "Editor de código",
+        "es": "Editor de código",
+        "ja": "コードエディタ",
+        "tr": "Kod Editörü"
+    },
+    "WORKSPACE$BROWSER_TAB_LABEL": {
+        "en": "Browser",
+        "zh-CN": "浏览器",
+        "de": "Browser",
+        "ko-KR": "브라우저",
+        "no": "Nettleser",
+        "zh-TW": "瀏覽器",
+        "it": "Browser",
+        "pt": "Navegador",
+        "es": "Navegador",
+        "ar": "المتصفح",
+        "fr": "Navigateur",
+        "tr": "Tarayıcı",
+        "ja": "ブラウザ"
+    },
+    "WORKSPACE$REFRESH": {
+        "en": "Refresh",
+        "de": "Aktualisieren",
+        "zh-CN": "刷新",
+        "zh-TW": "重新整理",
+        "ko-KR": "새로고침",
+        "no": "Oppdater",
+        "it": "Aggiorna",
+        "pt": "Atualizar",
+        "es": "Actualizar",
+        "ar": "تحديث",
+        "fr": "Rafraîchir",
+        "tr": "Yenile",
+        "ja": "更新"
+    },
+    "WORKSPACE$OPEN": {
+        "en": "Open workspace",
+        "de": "Arbeitsbereich öffnen",
+        "zh-CN": "打开工作区",
+        "zh-TW": "開啟工作區",
+        "ko-KR": "작업 공간 열기",
+        "no": "Åpne arbeidsområde",
+        "it": "Apri area di lavoro",
+        "pt": "Abrir espaço de trabalho",
+        "es": "Abrir espacio de trabajo",
+        "ar": "فتح مساحة العمل",
+        "fr": "Ouvrir l'espace de travail",
+        "tr": "Çalışma alanını aç",
+        "ja": "ワークスペースを開く"
+    },
+    "WORKSPACE$CLOSE": {
+        "en": "Close workspace",
+        "de": "Arbeitsbereich schließen",
+        "zh-CN": "关闭工作区",
+        "zh-TW": "關閉工作區",
+        "ko-KR": "작업 공간 닫기",
+        "no": "Lukk arbeidsområde",
+        "it": "Chiudi area di lavoro",
+        "pt": "Fechar espaço de trabalho",
+        "es": "Cerrar espacio de trabajo",
+        "ar": "إغلاق مساحة العمل",
+        "fr": "Fermer l'espace de travail",
+        "tr": "Çalışma alanını kapat",
+        "ja": "ワークスペースを閉じる"
+    },
     "VSCODE$OPEN": {
         "en": "Open in VS Code",
         "ja": "VS Codeで開く",
@@ -1179,81 +1066,6 @@
         "fr": "Ouvrir dans VS Code",
         "tr": "VS Code'da aç"
     },
-    "VSCODE$TITLE": {
-        "en": "VS Code",
-        "ja": "VS Code",
-        "zh-CN": "VS Code",
-        "zh-TW": "VS Code",
-        "ko-KR": "VS Code",
-        "de": "VS Code",
-        "no": "VS Code",
-        "it": "VS Code",
-        "pt": "VS Code",
-        "es": "VS Code",
-        "ar": "VS Code",
-        "fr": "VS Code",
-        "tr": "VS Code"
-    },
-    "VSCODE$LOADING": {
-        "en": "Loading VS Code...",
-        "ja": "VS Codeを読み込み中...",
-        "zh-CN": "正在加载VS Code...",
-        "zh-TW": "正在加載VS Code...",
-        "ko-KR": "VS Code 로딩 중...",
-        "de": "VS Code wird geladen...",
-        "no": "Laster VS Code...",
-        "it": "Caricamento di VS Code...",
-        "pt": "Carregando VS Code...",
-        "es": "Cargando VS Code...",
-        "ar": "جاري تحميل VS Code...",
-        "fr": "Chargement de VS Code...",
-        "tr": "VS Code yükleniyor..."
-    },
-    "VSCODE$URL_NOT_AVAILABLE": {
-        "en": "VS Code URL not available",
-        "ja": "VS Code URLが利用できません",
-        "zh-CN": "VS Code URL不可用",
-        "zh-TW": "VS Code URL不可用",
-        "ko-KR": "VS Code URL을 사용할 수 없습니다",
-        "de": "VS Code URL nicht verfügbar",
-        "no": "VS Code URL ikke tilgjengelig",
-        "it": "URL di VS Code non disponibile",
-        "pt": "URL do VS Code não disponível",
-        "es": "URL de VS Code no disponible",
-        "ar": "رابط VS Code غير متوفر",
-        "fr": "URL VS Code non disponible",
-        "tr": "VS Code URL'si mevcut değil"
-    },
-    "VSCODE$FETCH_ERROR": {
-        "en": "Failed to fetch VS Code URL",
-        "ja": "VS Code URLの取得に失敗しました",
-        "zh-CN": "获取VS Code URL失败",
-        "zh-TW": "獲取VS Code URL失敗",
-        "ko-KR": "VS Code URL을 가져오지 못했습니다",
-        "de": "Fehler beim Abrufen der VS Code URL",
-        "no": "Kunne ikke hente VS Code URL",
-        "it": "Impossibile recuperare l'URL di VS Code",
-        "pt": "Falha ao buscar URL do VS Code",
-        "es": "Error al obtener la URL de VS Code",
-        "ar": "فشل في جلب رابط VS Code",
-        "fr": "Échec de la récupération de l'URL VS Code",
-        "tr": "VS Code URL'si alınamadı"
-    },
-    "VSCODE$IFRAME_PERMISSIONS": {
-        "en": "clipboard-read; clipboard-write",
-        "ja": "clipboard-read; clipboard-write",
-        "zh-CN": "clipboard-read; clipboard-write",
-        "zh-TW": "clipboard-read; clipboard-write",
-        "ko-KR": "clipboard-read; clipboard-write",
-        "de": "clipboard-read; clipboard-write",
-        "no": "clipboard-read; clipboard-write",
-        "it": "clipboard-read; clipboard-write",
-        "pt": "clipboard-read; clipboard-write",
-        "es": "clipboard-read; clipboard-write",
-        "ar": "clipboard-read; clipboard-write",
-        "fr": "clipboard-read; clipboard-write",
-        "tr": "clipboard-read; clipboard-write"
-    },
     "INCREASE_TEST_COVERAGE": {
         "en": "Increase test coverage",
         "ja": "テストカバレッジを向上",
@@ -1599,51 +1411,6 @@
         "tr": "Jetonunuzu alın",
         "de": "Token abrufen"
     },
-    "GITHUB$TOKEN_HELP_TEXT": {
-        "en": "Get your <0>GitHub token</0> or <1>click here for instructions</1>",
-        "ja": "<0>GitHubトークン</0>を取得するか、<1>手順についてはここをクリック</1>",
-        "zh-CN": "获取您的<0>GitHub令牌</0>或<1>点击此处获取说明</1>",
-        "zh-TW": "取得您的<0>GitHub權杖</0>或<1>點擊此處獲取說明</1>",
-        "ko-KR": "<0>GitHub 토큰</0>을 받거나 <1>지침을 보려면 여기를 클릭</1>",
-        "no": "Få din <0>GitHub-token</0> eller <1>klikk her for instruksjoner</1>",
-        "it": "Ottieni il tuo <0>token GitHub</0> o <1>clicca qui per istruzioni</1>",
-        "pt": "Obtenha seu <0>token GitHub</0> ou <1>clique aqui para instruções</1>",
-        "es": "Obtenga su <0>token de GitHub</0> o <1>haga clic aquí para obtener instrucciones</1>",
-        "ar": "احصل على <0>رمز GitHub</0> الخاص بك أو <1>انقر هنا للحصول على تعليمات</1>",
-        "fr": "Obtenez votre <0>jeton GitHub</0> ou <1>cliquez ici pour les instructions</1>",
-        "tr": "<0>GitHub jetonu</0> alın veya <1>talimatlar için buraya tıklayın</1>",
-        "de": "Holen Sie sich Ihren <0>GitHub-Token</0> oder <1>klicken Sie hier für Anweisungen</1>"
-    },
-    "GITHUB$TOKEN_LINK_TEXT": {
-        "en": "GitHub token",
-        "ja": "GitHubトークン",
-        "zh-CN": "GitHub令牌",
-        "zh-TW": "GitHub權杖",
-        "ko-KR": "GitHub 토큰",
-        "no": "GitHub-token",
-        "it": "token GitHub",
-        "pt": "token GitHub",
-        "es": "token de GitHub",
-        "ar": "رمز GitHub",
-        "fr": "jeton GitHub",
-        "tr": "GitHub jetonu",
-        "de": "GitHub-Token"
-    },
-    "GITHUB$INSTRUCTIONS_LINK_TEXT": {
-        "en": "click here for instructions",
-        "ja": "手順についてはここをクリック",
-        "zh-CN": "点击此处获取说明",
-        "zh-TW": "點擊此處獲取說明",
-        "ko-KR": "지침을 보려면 여기를 클릭",
-        "no": "klikk her for instruksjoner",
-        "it": "clicca qui per istruzioni",
-        "pt": "clique aqui para instruções",
-        "es": "haga clic aquí para obtener instrucciones",
-        "ar": "انقر هنا للحصول على تعليمات",
-        "fr": "cliquez ici pour les instructions",
-        "tr": "talimatlar için buraya tıklayın",
-        "de": "klicken Sie hier für Anweisungen"
-    },
     "COMMON$HERE": {
         "en": "here",
         "ja": "こちら",
@@ -2223,10 +1990,66 @@
         "tr": "Dosyaları buraya bırakın",
         "ja": "ここにファイルをドロップ"
     },
-
-
-
-
+    "EXPLORER$LABEL_WORKSPACE": {
+        "en": "Workspace",
+        "zh-CN": "工作区",
+        "de": "Arbeitsbereich",
+        "zh-TW": "工作區",
+        "es": "Espacio de trabajo",
+        "fr": "Espace de travail",
+        "it": "Area di lavoro",
+        "pt": "Espaço de trabalho",
+        "ko-KR": "워크스페이스",
+        "ar": "مساحة العمل",
+        "tr": "Çalışma alanı",
+        "no": "Arbeidsområde",
+        "ja": "ワークスペース"
+    },
+    "EXPLORER$EMPTY_WORKSPACE_MESSAGE": {
+        "en": "No files in workspace",
+        "zh-CN": "工作区为空",
+        "de": "Keine Dateien im Arbeitsbereich",
+        "zh-TW": "工作區為空",
+        "es": "No hay archivos en el espacio de trabajo",
+        "fr": "Aucun fichier dans l'espace de travail",
+        "it": "Nessun file nell'area di lavoro",
+        "pt": "Nenhum arquivo no espaço de trabalho",
+        "ko-KR": "워크스페이스가 비어 있습니다",
+        "ar": "لا توجد ملفات في مساحة العمل",
+        "tr": "Çalışma alanında dosya yok",
+        "no": "Ingen filer i arbeidsområdet",
+        "ja": "ワークスペースにファイルがありません"
+    },
+    "EXPLORER$LOADING_WORKSPACE_MESSAGE": {
+        "en": "Loading workspace...",
+        "zh-CN": "加载工作区中...",
+        "de": "Arbeitsbereich wird geladen...",
+        "zh-TW": "載入工作區中...",
+        "es": "Cargando espacio de trabajo...",
+        "fr": "Chargement de l'espace de travail...",
+        "it": "Caricamento dell'area di lavoro...",
+        "pt": "Carregando espaço de trabalho...",
+        "ko-KR": "워크스페이스 로딩 중...",
+        "ar": "جارٍ تحميل مساحة العمل...",
+        "tr": "Çalışma alanı yükleniyor...",
+        "no": "Laster arbeidsområde...",
+        "ja": "ワークスペースを読み込み中..."
+    },
+    "EXPLORER$REFRESH_ERROR_MESSAGE": {
+        "en": "Error refreshing workspace",
+        "zh-CN": "刷新时出错",
+        "de": "Fehler beim Aktualisieren des Arbeitsbereichs",
+        "zh-TW": "重新整理時發生錯誤",
+        "es": "Error al actualizar el espacio de trabajo",
+        "fr": "Erreur lors de l'actualisation de l'espace de travail",
+        "it": "Errore durante l'aggiornamento dell'area di lavoro",
+        "pt": "Erro ao atualizar o espaço de trabalho",
+        "ko-KR": "새로고침 중 오류 발생",
+        "ar": "خطأ في تحديث مساحة العمل",
+        "tr": "Çalışma alanı yenilenirken hata oluştu",
+        "no": "Feil ved oppdatering av arbeidsområde",
+        "ja": "ワークスペースの更新中にエラーが発生しました"
+    },
     "EXPLORER$UPLOAD_SUCCESS_MESSAGE": {
         "en": "Successfully uploaded {{count}} file(s)",
         "zh-CN": "上传成功",
@@ -4235,21 +4058,6 @@
     "BUTTON$COPY_TO_CLIPBOARD": {
         "en": "Copy to Clipboard"
     },
-    "BUTTON$REFRESH": {
-        "en": "Refresh",
-        "ja": "更新",
-        "zh-CN": "刷新",
-        "zh-TW": "重新整理",
-        "ko-KR": "새로고침",
-        "no": "Oppdater",
-        "it": "Aggiorna",
-        "pt": "Atualizar",
-        "es": "Actualizar",
-        "ar": "تحديث",
-        "fr": "Rafraîchir",
-        "tr": "Yenile",
-        "de": "Aktualisieren"
-    },
     "ERROR$REQUIRED_FIELD": {
         "en": "This field is required"
     },
@@ -5127,9 +4935,51 @@
         "es": "Subir archivo",
         "tr": "Dosya yükle"
     },
-
-
-
+    "FILE_EXPLORER$REFRESH_WORKSPACE": {
+        "en": "Refresh workspace",
+        "zh-CN": "刷新工作区",
+        "zh-TW": "重新整理工作區",
+        "ko-KR": "워크스페이스 새로고침",
+        "ja": "ワークスペースを更新",
+        "no": "Oppdater arbeidsområde",
+        "ar": "تحديث مساحة العمل",
+        "de": "Arbeitsbereich aktualisieren",
+        "fr": "Actualiser l'espace de travail",
+        "it": "Aggiorna area di lavoro",
+        "pt": "Atualizar área de trabalho",
+        "es": "Actualizar espacio de trabajo",
+        "tr": "Çalışma alanını yenile"
+    },
+    "FILE_EXPLORER$OPEN_WORKSPACE": {
+        "en": "Open workspace",
+        "zh-CN": "打开工作区",
+        "zh-TW": "開啟工作區",
+        "ko-KR": "워크스페이스 열기",
+        "ja": "ワークスペースを開く",
+        "no": "Åpne arbeidsområde",
+        "ar": "فتح مساحة العمل",
+        "de": "Arbeitsbereich öffnen",
+        "fr": "Ouvrir l'espace de travail",
+        "it": "Apri area di lavoro",
+        "pt": "Abrir área de trabalho",
+        "es": "Abrir espacio de trabajo",
+        "tr": "Çalışma alanını aç"
+    },
+    "FILE_EXPLORER$CLOSE_WORKSPACE": {
+        "en": "Close workspace",
+        "zh-CN": "关闭工作区",
+        "zh-TW": "關閉工作區",
+        "ko-KR": "워크스페이스 닫기",
+        "ja": "ワークスペースを閉じる",
+        "no": "Lukk arbeidsområde",
+        "ar": "إغلاق مساحة العمل",
+        "de": "Arbeitsbereich schließen",
+        "fr": "Fermer l'espace de travail",
+        "it": "Chiudi area di lavoro",
+        "pt": "Fechar área de trabalho",
+        "es": "Cerrar espacio de trabajo",
+        "tr": "Çalışma alanını kapat"
+    },
     "ACTION_MESSAGE$RUN": {
         "en": "Running <cmd>{{action.payload.args.command}}</cmd>",
         "zh-CN": "运行 <cmd>{{action.payload.args.command}}</cmd>",
@@ -6484,51 +6334,6 @@
         "tr": "Üzerinde bir jeton oluştur",
         "de": "Token generieren auf"
     },
-    "GITLAB$TOKEN_HELP_TEXT": {
-        "en": "Get your <0>GitLab token</0> or <1>click here for instructions</1>",
-        "ja": "<0>GitLabトークン</0>を取得するか、<1>手順についてはここをクリック</1>",
-        "zh-CN": "获取您的<0>GitLab令牌</0>或<1>点击此处获取说明</1>",
-        "zh-TW": "取得您的<0>GitLab權杖</0>或<1>點擊此處獲取說明</1>",
-        "ko-KR": "<0>GitLab 토큰</0>을 받거나 <1>지침을 보려면 여기를 클릭</1>",
-        "no": "Få din <0>GitLab-token</0> eller <1>klikk her for instruksjoner</1>",
-        "it": "Ottieni il tuo <0>token GitLab</0> o <1>clicca qui per istruzioni</1>",
-        "pt": "Obtenha seu <0>token GitLab</0> ou <1>clique aqui para instruções</1>",
-        "es": "Obtenga su <0>token de GitLab</0> o <1>haga clic aquí para obtener instrucciones</1>",
-        "ar": "احصل على <0>رمز GitLab</0> الخاص بك أو <1>انقر هنا للحصول على تعليمات</1>",
-        "fr": "Obtenez votre <0>jeton GitLab</0> ou <1>cliquez ici pour les instructions</1>",
-        "tr": "<0>GitLab jetonu</0> alın veya <1>talimatlar için buraya tıklayın</1>",
-        "de": "Holen Sie sich Ihren <0>GitLab-Token</0> oder <1>klicken Sie hier für Anweisungen</1>"
-    },
-    "GITLAB$TOKEN_LINK_TEXT": {
-        "en": "GitLab token",
-        "ja": "GitLabトークン",
-        "zh-CN": "GitLab令牌",
-        "zh-TW": "GitLab權杖",
-        "ko-KR": "GitLab 토큰",
-        "no": "GitLab-token",
-        "it": "token GitLab",
-        "pt": "token GitLab",
-        "es": "token de GitLab",
-        "ar": "رمز GitLab",
-        "fr": "jeton GitLab",
-        "tr": "GitLab jetonu",
-        "de": "GitLab-Token"
-    },
-    "GITLAB$INSTRUCTIONS_LINK_TEXT": {
-        "en": "click here for instructions",
-        "ja": "手順についてはここをクリック",
-        "zh-CN": "点击此处获取说明",
-        "zh-TW": "點擊此處獲取說明",
-        "ko-KR": "지침을 보려면 여기를 클릭",
-        "no": "klikk her for instruksjoner",
-        "it": "clicca qui per istruzioni",
-        "pt": "clique aqui para instruções",
-        "es": "haga clic aquí para obtener instrucciones",
-        "ar": "انقر هنا للحصول على تعليمات",
-        "fr": "cliquez ici pour les instructions",
-        "tr": "talimatlar için buraya tıklayın",
-        "de": "klicken Sie hier für Anweisungen"
-    },
     "GITLAB$OR_SEE": {
         "en": "or see the",
         "ja": "または参照",

frontend/src/mocks/handlers.ts

@@ -35,15 +35,6 @@ const MOCK_USER_PREFERENCES: {
   settings: null,
 };
 
-/**
- * Set the user settings to the default settings
- *
- * Useful for resetting the settings in tests
- */
-export const resetTestHandlersMockSettings = () => {
-  MOCK_USER_PREFERENCES.settings = MOCK_DEFAULT_USER_SETTINGS;
-};
-
 const conversations: Conversation[] = [
   {
     conversation_id: "1",
@@ -89,7 +80,6 @@ const openHandsHandlers = [
     HttpResponse.json([
       "gpt-3.5-turbo",
       "gpt-4o",
-      "gpt-4o-mini",
       "anthropic/claude-3.5",
       "anthropic/claude-3-5-sonnet-20241022",
     ]),
@@ -183,7 +173,6 @@ export const handlers = [
     return HttpResponse.json(settings);
   }),
   http.post("/api/settings", async ({ request }) => {
-    await delay();
     const body = await request.json();
 
     if (body) {

frontend/src/routes.ts

@@ -9,19 +9,17 @@ export default [
   layout("routes/root-layout.tsx", [
     index("routes/home.tsx"),
     route("settings", "routes/settings.tsx", [
-      index("routes/llm-settings.tsx"),
-      route("git", "routes/git-settings.tsx"),
-      route("app", "routes/app-settings.tsx"),
+      index("routes/account-settings.tsx"),
       route("billing", "routes/billing.tsx"),
       route("api-keys", "routes/api-keys.tsx"),
     ]),
     route("conversations/:conversationId", "routes/conversation.tsx", [
       index("routes/editor.tsx"),
+      route("workspace", "routes/editor-tab.tsx"),
       route("browser", "routes/browser-tab.tsx"),
       route("jupyter", "routes/jupyter-tab.tsx"),
       route("served", "routes/served-tab.tsx"),
       route("terminal", "routes/terminal-tab.tsx"),
-      route("vscode", "routes/vscode-tab.tsx"),
     ]),
   ]),
 ] satisfies RouteConfig;

frontend/src/routes/account-settings.tsx

@@ -0,0 +1,531 @@
+import React from "react";
+import { Link } from "react-router";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import { BrandButton } from "#/components/features/settings/brand-button";
+import { HelpLink } from "#/components/features/settings/help-link";
+import { KeyStatusIcon } from "#/components/features/settings/key-status-icon";
+import { SettingsDropdownInput } from "#/components/features/settings/settings-dropdown-input";
+import { SettingsInput } from "#/components/features/settings/settings-input";
+import { SettingsSwitch } from "#/components/features/settings/settings-switch";
+import { LoadingSpinner } from "#/components/shared/loading-spinner";
+import { ModelSelector } from "#/components/shared/modals/settings/model-selector";
+import { useSaveSettings } from "#/hooks/mutation/use-save-settings";
+import { useAIConfigOptions } from "#/hooks/query/use-ai-config-options";
+import { useConfig } from "#/hooks/query/use-config";
+import { useSettings } from "#/hooks/query/use-settings";
+import { useAppLogout } from "#/hooks/use-app-logout";
+import { AvailableLanguages } from "#/i18n";
+import { DEFAULT_SETTINGS } from "#/services/settings";
+import { handleCaptureConsent } from "#/utils/handle-capture-consent";
+import { hasAdvancedSettingsSet } from "#/utils/has-advanced-settings-set";
+import { isCustomModel } from "#/utils/is-custom-model";
+import { organizeModelsAndProviders } from "#/utils/organize-models-and-providers";
+import { retrieveAxiosErrorMessage } from "#/utils/retrieve-axios-error-message";
+import {
+  displayErrorToast,
+  displaySuccessToast,
+} from "#/utils/custom-toast-handlers";
+import { ProviderOptions } from "#/types/settings";
+import { useAuth } from "#/context/auth-context";
+
+// Define REMOTE_RUNTIME_OPTIONS for testing
+const REMOTE_RUNTIME_OPTIONS = [
+  { key: "1", label: "Standard" },
+  { key: "2", label: "Enhanced" },
+  { key: "4", label: "Premium" },
+];
+
+function AccountSettings() {
+  const { t } = useTranslation();
+  const {
+    data: settings,
+    isFetching: isFetchingSettings,
+    isFetched,
+    isSuccess: isSuccessfulSettings,
+  } = useSettings();
+  const { data: config } = useConfig();
+  const {
+    data: resources,
+    isFetching: isFetchingResources,
+    isSuccess: isSuccessfulResources,
+  } = useAIConfigOptions();
+  const { mutate: saveSettings } = useSaveSettings();
+  const { handleLogout } = useAppLogout();
+  const { providerTokensSet, providersAreSet } = useAuth();
+
+  const isFetching = isFetchingSettings || isFetchingResources;
+  const isSuccess = isSuccessfulSettings && isSuccessfulResources;
+
+  const isSaas = config?.APP_MODE === "saas";
+  const shouldHandleSpecialSaasCase =
+    config?.FEATURE_FLAGS.HIDE_LLM_SETTINGS && isSaas;
+
+  const determineWhetherToToggleAdvancedSettings = () => {
+    if (shouldHandleSpecialSaasCase) return true;
+
+    if (isSuccess) {
+      return (
+        isCustomModel(resources.models, settings.LLM_MODEL) ||
+        hasAdvancedSettingsSet({
+          ...settings,
+        })
+      );
+    }
+
+    return false;
+  };
+
+  const hasAppSlug = !!config?.APP_SLUG;
+  const isGitHubTokenSet =
+    providerTokensSet.includes(ProviderOptions.github) || false;
+  const isGitLabTokenSet =
+    providerTokensSet.includes(ProviderOptions.gitlab) || false;
+  const isLLMKeySet = settings?.LLM_API_KEY_SET;
+  const isAnalyticsEnabled = settings?.USER_CONSENTS_TO_ANALYTICS;
+  const isAdvancedSettingsSet = determineWhetherToToggleAdvancedSettings();
+
+  const modelsAndProviders = organizeModelsAndProviders(
+    resources?.models || [],
+  );
+
+  const [llmConfigMode, setLlmConfigMode] = React.useState<
+    "basic" | "advanced"
+  >(isAdvancedSettingsSet ? "advanced" : "basic");
+  const [confirmationModeIsEnabled, setConfirmationModeIsEnabled] =
+    React.useState(!!settings?.SECURITY_ANALYZER);
+
+  const formRef = React.useRef<HTMLFormElement>(null);
+
+  const onSubmit = async (formData: FormData) => {
+    const languageLabel = formData.get("language-input")?.toString();
+    const languageValue = AvailableLanguages.find(
+      ({ label }) => label === languageLabel,
+    )?.value;
+
+    const llmProvider = formData.get("llm-provider-input")?.toString();
+    const llmModel = formData.get("llm-model-input")?.toString();
+    const fullLlmModel = `${llmProvider}/${llmModel}`.toLowerCase();
+    const customLlmModel = formData.get("llm-custom-model-input")?.toString();
+
+    const rawRemoteRuntimeResourceFactor = formData
+      .get("runtime-settings-input")
+      ?.toString();
+    const remoteRuntimeResourceFactor = REMOTE_RUNTIME_OPTIONS.find(
+      ({ label }) => label === rawRemoteRuntimeResourceFactor,
+    )?.key;
+
+    const userConsentsToAnalytics =
+      formData.get("enable-analytics-switch")?.toString() === "on";
+    const enableMemoryCondenser =
+      formData.get("enable-memory-condenser-switch")?.toString() === "on";
+    const enableSoundNotifications =
+      formData.get("enable-sound-notifications-switch")?.toString() === "on";
+    const llmBaseUrl = formData.get("base-url-input")?.toString().trim() || "";
+    const inputApiKey = formData.get("llm-api-key-input")?.toString() || "";
+    const llmApiKey =
+      inputApiKey === "" && isLLMKeySet
+        ? undefined // don't update if it's already set and input is empty
+        : inputApiKey; // otherwise use the input value
+
+    const githubToken = formData.get("github-token-input")?.toString();
+    const gitlabToken = formData.get("gitlab-token-input")?.toString();
+    // we don't want the user to be able to modify these settings in SaaS
+    const finalLlmModel = shouldHandleSpecialSaasCase
+      ? undefined
+      : customLlmModel || fullLlmModel;
+    const finalLlmBaseUrl = shouldHandleSpecialSaasCase
+      ? undefined
+      : llmBaseUrl;
+    const finalLlmApiKey = shouldHandleSpecialSaasCase ? undefined : llmApiKey;
+
+    const newSettings = {
+      provider_tokens:
+        githubToken || gitlabToken
+          ? {
+              github: githubToken || "",
+              gitlab: gitlabToken || "",
+            }
+          : undefined,
+      LANGUAGE: languageValue,
+      user_consents_to_analytics: userConsentsToAnalytics,
+      ENABLE_DEFAULT_CONDENSER: enableMemoryCondenser,
+      ENABLE_SOUND_NOTIFICATIONS: enableSoundNotifications,
+      LLM_MODEL: finalLlmModel,
+      LLM_BASE_URL: finalLlmBaseUrl,
+      llm_api_key: finalLlmApiKey,
+      AGENT: formData.get("agent-input")?.toString(),
+      SECURITY_ANALYZER:
+        formData.get("security-analyzer-input")?.toString() || "",
+      REMOTE_RUNTIME_RESOURCE_FACTOR:
+        remoteRuntimeResourceFactor !== null
+          ? Number(remoteRuntimeResourceFactor)
+          : DEFAULT_SETTINGS.REMOTE_RUNTIME_RESOURCE_FACTOR,
+      CONFIRMATION_MODE: confirmationModeIsEnabled,
+    };
+
+    saveSettings(newSettings, {
+      onSuccess: () => {
+        handleCaptureConsent(userConsentsToAnalytics);
+        displaySuccessToast(t(I18nKey.SETTINGS$SAVED));
+        setLlmConfigMode(isAdvancedSettingsSet ? "advanced" : "basic");
+      },
+      onError: (error) => {
+        const errorMessage = retrieveAxiosErrorMessage(error);
+        displayErrorToast(errorMessage || t(I18nKey.ERROR$GENERIC));
+      },
+    });
+  };
+
+  React.useEffect(() => {
+    // If settings is still loading by the time the state is set, it will always
+    // default to basic settings. This is a workaround to ensure the correct
+    // settings are displayed.
+    setLlmConfigMode(isAdvancedSettingsSet ? "advanced" : "basic");
+  }, [isAdvancedSettingsSet]);
+
+  if (isFetched && !settings) {
+    return <div>Failed to fetch settings. Please try reloading.</div>;
+  }
+
+  const onToggleAdvancedMode = (isToggled: boolean) => {
+    setLlmConfigMode(isToggled ? "advanced" : "basic");
+    if (!isToggled) {
+      // reset advanced state
+      setConfirmationModeIsEnabled(!!settings?.SECURITY_ANALYZER);
+    }
+  };
+
+  if (isFetching || !settings) {
+    return (
+      <div className="flex grow p-4">
+        <LoadingSpinner size="large" />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <form
+        data-testid="account-settings-form"
+        ref={formRef}
+        action={onSubmit}
+        className="flex flex-col grow overflow-auto"
+      >
+        <div className="flex flex-col gap-12 px-11 py-9">
+          {!shouldHandleSpecialSaasCase && (
+            <section
+              data-testid="llm-settings-section"
+              className="flex flex-col gap-6"
+            >
+              <div className="flex items-center gap-7">
+                <h2 className="text-[28px] leading-8 tracking-[-0.02em] font-bold">
+                  {t(I18nKey.SETTINGS$LLM_SETTINGS)}
+                </h2>
+                {!shouldHandleSpecialSaasCase && (
+                  <SettingsSwitch
+                    testId="advanced-settings-switch"
+                    defaultIsToggled={isAdvancedSettingsSet}
+                    onToggle={onToggleAdvancedMode}
+                  >
+                    {t(I18nKey.SETTINGS$ADVANCED)}
+                  </SettingsSwitch>
+                )}
+              </div>
+
+              {llmConfigMode === "basic" && !shouldHandleSpecialSaasCase && (
+                <ModelSelector
+                  models={modelsAndProviders}
+                  currentModel={settings.LLM_MODEL}
+                />
+              )}
+
+              {llmConfigMode === "advanced" && !shouldHandleSpecialSaasCase && (
+                <SettingsInput
+                  testId="llm-custom-model-input"
+                  name="llm-custom-model-input"
+                  label={t(I18nKey.SETTINGS$CUSTOM_MODEL)}
+                  defaultValue={settings.LLM_MODEL}
+                  placeholder="anthropic/claude-3-5-sonnet-20241022"
+                  type="text"
+                  className="w-[680px]"
+                />
+              )}
+              {llmConfigMode === "advanced" && !shouldHandleSpecialSaasCase && (
+                <SettingsInput
+                  testId="base-url-input"
+                  name="base-url-input"
+                  label={t(I18nKey.SETTINGS$BASE_URL)}
+                  defaultValue={settings.LLM_BASE_URL}
+                  placeholder="https://api.openai.com"
+                  type="text"
+                  className="w-[680px]"
+                />
+              )}
+
+              {!shouldHandleSpecialSaasCase && (
+                <SettingsInput
+                  testId="llm-api-key-input"
+                  name="llm-api-key-input"
+                  label={t(I18nKey.SETTINGS_FORM$API_KEY)}
+                  type="password"
+                  className="w-[680px]"
+                  placeholder={isLLMKeySet ? "<hidden>" : ""}
+                  startContent={
+                    isLLMKeySet && <KeyStatusIcon isSet={isLLMKeySet} />
+                  }
+                />
+              )}
+
+              {!shouldHandleSpecialSaasCase && (
+                <HelpLink
+                  testId="llm-api-key-help-anchor"
+                  text={t(I18nKey.SETTINGS$DONT_KNOW_API_KEY)}
+                  linkText={t(I18nKey.SETTINGS$CLICK_FOR_INSTRUCTIONS)}
+                  href="https://docs.all-hands.dev/modules/usage/installation#getting-an-api-key"
+                />
+              )}
+
+              {llmConfigMode === "advanced" && (
+                <SettingsDropdownInput
+                  testId="agent-input"
+                  name="agent-input"
+                  label={t(I18nKey.SETTINGS$AGENT)}
+                  items={
+                    resources?.agents.map((agent) => ({
+                      key: agent,
+                      label: agent,
+                    })) || []
+                  }
+                  wrapperClassName="w-[680px]"
+                  defaultSelectedKey={settings.AGENT}
+                  isClearable={false}
+                />
+              )}
+
+              {isSaas && llmConfigMode === "advanced" && (
+                <SettingsDropdownInput
+                  testId="runtime-settings-input"
+                  name="runtime-settings-input"
+                  label={
+                    <>
+                      {t(I18nKey.SETTINGS$RUNTIME_SETTINGS)}
+                      <a href="mailto:contact@all-hands.dev">
+                        {t(I18nKey.SETTINGS$GET_IN_TOUCH)}
+                      </a>
+                      )
+                    </>
+                  }
+                  items={REMOTE_RUNTIME_OPTIONS}
+                  defaultSelectedKey={settings.REMOTE_RUNTIME_RESOURCE_FACTOR?.toString()}
+                  isDisabled
+                  isClearable={false}
+                />
+              )}
+
+              {llmConfigMode === "advanced" && (
+                <SettingsSwitch
+                  testId="enable-confirmation-mode-switch"
+                  onToggle={setConfirmationModeIsEnabled}
+                  defaultIsToggled={!!settings.CONFIRMATION_MODE}
+                  isBeta
+                >
+                  {t(I18nKey.SETTINGS$CONFIRMATION_MODE)}
+                </SettingsSwitch>
+              )}
+
+              {llmConfigMode === "advanced" && (
+                <SettingsSwitch
+                  testId="enable-memory-condenser-switch"
+                  name="enable-memory-condenser-switch"
+                  defaultIsToggled={!!settings.ENABLE_DEFAULT_CONDENSER}
+                >
+                  {t(I18nKey.SETTINGS$ENABLE_MEMORY_CONDENSATION)}
+                </SettingsSwitch>
+              )}
+
+              {llmConfigMode === "advanced" && confirmationModeIsEnabled && (
+                <div>
+                  <SettingsDropdownInput
+                    testId="security-analyzer-input"
+                    name="security-analyzer-input"
+                    label={t(I18nKey.SETTINGS$SECURITY_ANALYZER)}
+                    items={
+                      resources?.securityAnalyzers.map((analyzer) => ({
+                        key: analyzer,
+                        label: analyzer,
+                      })) || []
+                    }
+                    defaultSelectedKey={settings.SECURITY_ANALYZER}
+                    isClearable
+                    showOptionalTag
+                  />
+                </div>
+              )}
+            </section>
+          )}
+
+          <section className="flex flex-col gap-6">
+            <h2 className="text-[28px] leading-8 tracking-[-0.02em] font-bold">
+              {t(I18nKey.SETTINGS$GIT_SETTINGS)}
+            </h2>
+            {isSaas && hasAppSlug && (
+              <Link
+                to={`https://github.com/apps/${config.APP_SLUG}/installations/new`}
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                <BrandButton type="button" variant="secondary">
+                  {t(I18nKey.GITHUB$CONFIGURE_REPOS)}
+                </BrandButton>
+              </Link>
+            )}
+            {!isSaas && (
+              <>
+                <SettingsInput
+                  testId="github-token-input"
+                  name="github-token-input"
+                  label={t(I18nKey.GITHUB$TOKEN_LABEL)}
+                  type="password"
+                  className="w-[680px]"
+                  startContent={
+                    isGitHubTokenSet && (
+                      <KeyStatusIcon isSet={!!isGitHubTokenSet} />
+                    )
+                  }
+                  placeholder={isGitHubTokenSet ? "<hidden>" : ""}
+                />
+                <p data-testid="github-token-help-anchor" className="text-xs">
+                  {" "}
+                  {t(I18nKey.GITHUB$GET_TOKEN)}{" "}
+                  <b>
+                    {" "}
+                    <a
+                      href="https://github.com/settings/tokens/new?description=openhands-app&scopes=repo,user,workflow"
+                      target="_blank"
+                      className="underline underline-offset-2"
+                      rel="noopener noreferrer"
+                    >
+                      GitHub
+                    </a>{" "}
+                  </b>
+                  {t(I18nKey.COMMON$HERE)}{" "}
+                  <b>
+                    <a
+                      href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token"
+                      target="_blank"
+                      className="underline underline-offset-2"
+                      rel="noopener noreferrer"
+                    >
+                      {t(I18nKey.COMMON$CLICK_FOR_INSTRUCTIONS)}
+                    </a>
+                  </b>
+                  .
+                </p>
+
+                <SettingsInput
+                  testId="gitlab-token-input"
+                  name="gitlab-token-input"
+                  label={t(I18nKey.GITLAB$TOKEN_LABEL)}
+                  type="password"
+                  className="w-[680px]"
+                  startContent={
+                    isGitLabTokenSet && (
+                      <KeyStatusIcon isSet={!!isGitLabTokenSet} />
+                    )
+                  }
+                  placeholder={isGitHubTokenSet ? "<hidden>" : ""}
+                />
+
+                <p data-testid="gitlab-token-help-anchor" className="text-xs">
+                  {" "}
+                  {t(I18nKey.GITLAB$GET_TOKEN)}{" "}
+                  <b>
+                    {" "}
+                    <a
+                      href="https://gitlab.com/-/user_settings/personal_access_tokens?name=openhands-app&scopes=api,read_user,read_repository,write_repository"
+                      target="_blank"
+                      className="underline underline-offset-2"
+                      rel="noopener noreferrer"
+                    >
+                      GitLab
+                    </a>{" "}
+                  </b>
+                  {t(I18nKey.GITLAB$OR_SEE)}{" "}
+                  <b>
+                    <a
+                      href="https://docs.gitlab.com/user/profile/personal_access_tokens/"
+                      target="_blank"
+                      className="underline underline-offset-2"
+                      rel="noopener noreferrer"
+                    >
+                      {t(I18nKey.COMMON$DOCUMENTATION)}
+                    </a>
+                  </b>
+                  .
+                </p>
+                <BrandButton
+                  type="button"
+                  variant="secondary"
+                  onClick={handleLogout}
+                  isDisabled={!providersAreSet}
+                >
+                  Disconnect Tokens
+                </BrandButton>
+              </>
+            )}
+          </section>
+
+          <section className="flex flex-col gap-6">
+            <h2 className="text-[28px] leading-8 tracking-[-0.02em] font-bold">
+              {t(I18nKey.ACCOUNT_SETTINGS$ADDITIONAL_SETTINGS)}
+            </h2>
+
+            <SettingsDropdownInput
+              testId="language-input"
+              name="language-input"
+              label={t(I18nKey.SETTINGS$LANGUAGE)}
+              items={AvailableLanguages.map((language) => ({
+                key: language.value,
+                label: language.label,
+              }))}
+              defaultSelectedKey={settings.LANGUAGE}
+              wrapperClassName="w-[680px]"
+              isClearable={false}
+            />
+
+            <SettingsSwitch
+              testId="enable-analytics-switch"
+              name="enable-analytics-switch"
+              defaultIsToggled={!!isAnalyticsEnabled}
+            >
+              {t(I18nKey.ANALYTICS$ENABLE)}
+            </SettingsSwitch>
+
+            <SettingsSwitch
+              testId="enable-sound-notifications-switch"
+              name="enable-sound-notifications-switch"
+              defaultIsToggled={!!settings.ENABLE_SOUND_NOTIFICATIONS}
+            >
+              {t(I18nKey.SETTINGS$SOUND_NOTIFICATIONS)}
+            </SettingsSwitch>
+          </section>
+        </div>
+      </form>
+
+      <footer className="flex gap-6 p-6 justify-end border-t border-t-tertiary">
+        <BrandButton
+          type="button"
+          variant="primary"
+          onClick={() => {
+            formRef.current?.requestSubmit();
+          }}
+        >
+          {t(I18nKey.BUTTON$SAVE)}
+        </BrandButton>
+      </footer>
+    </>
+  );
+}
+
+export default AccountSettings;

frontend/src/routes/api-keys.tsx

@@ -3,7 +3,7 @@ import { ApiKeysManager } from "#/components/features/settings/api-keys-manager"
 
 function ApiKeysScreen() {
   return (
-    <div className="flex flex-col grow overflow-auto p-9">
+    <div className="flex flex-col grow overflow-auto p-11">
       <ApiKeysManager />
     </div>
   );

frontend/src/routes/app-settings.tsx

@@ -1,150 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { useSaveSettings } from "#/hooks/mutation/use-save-settings";
-import { useSettings } from "#/hooks/query/use-settings";
-import { AvailableLanguages } from "#/i18n";
-import { DEFAULT_SETTINGS } from "#/services/settings";
-import { BrandButton } from "#/components/features/settings/brand-button";
-import { SettingsSwitch } from "#/components/features/settings/settings-switch";
-import { I18nKey } from "#/i18n/declaration";
-import { LanguageInput } from "#/components/features/settings/app-settings/language-input";
-import { handleCaptureConsent } from "#/utils/handle-capture-consent";
-import {
-  displayErrorToast,
-  displaySuccessToast,
-} from "#/utils/custom-toast-handlers";
-import { retrieveAxiosErrorMessage } from "#/utils/retrieve-axios-error-message";
-import { AppSettingsInputsSkeleton } from "#/components/features/settings/app-settings/app-settings-inputs-skeleton";
-
-function AppSettingsScreen() {
-  const { t } = useTranslation();
-
-  const { mutate: saveSettings, isPending } = useSaveSettings();
-  const { data: settings, isLoading } = useSettings();
-
-  const [languageInputHasChanged, setLanguageInputHasChanged] =
-    React.useState(false);
-  const [analyticsSwitchHasChanged, setAnalyticsSwitchHasChanged] =
-    React.useState(false);
-  const [
-    soundNotificationsSwitchHasChanged,
-    setSoundNotificationsSwitchHasChanged,
-  ] = React.useState(false);
-
-  const formAction = (formData: FormData) => {
-    const languageLabel = formData.get("language-input")?.toString();
-    const languageValue = AvailableLanguages.find(
-      ({ label }) => label === languageLabel,
-    )?.value;
-    const language = languageValue || DEFAULT_SETTINGS.LANGUAGE;
-
-    const enableAnalytics =
-      formData.get("enable-analytics-switch")?.toString() === "on";
-    const enableSoundNotifications =
-      formData.get("enable-sound-notifications-switch")?.toString() === "on";
-
-    saveSettings(
-      {
-        LANGUAGE: language,
-        user_consents_to_analytics: enableAnalytics,
-        ENABLE_SOUND_NOTIFICATIONS: enableSoundNotifications,
-      },
-      {
-        onSuccess: () => {
-          handleCaptureConsent(enableAnalytics);
-          displaySuccessToast(t(I18nKey.SETTINGS$SAVED));
-        },
-        onError: (error) => {
-          const errorMessage = retrieveAxiosErrorMessage(error);
-          displayErrorToast(errorMessage || t(I18nKey.ERROR$GENERIC));
-        },
-        onSettled: () => {
-          setLanguageInputHasChanged(false);
-          setAnalyticsSwitchHasChanged(false);
-          setSoundNotificationsSwitchHasChanged(false);
-        },
-      },
-    );
-  };
-
-  const checkIfLanguageInputHasChanged = (value: string) => {
-    const selectedLanguage = AvailableLanguages.find(
-      ({ label: langValue }) => langValue === value,
-    )?.label;
-    const currentLanguage = AvailableLanguages.find(
-      ({ value: langValue }) => langValue === settings?.LANGUAGE,
-    )?.label;
-
-    setLanguageInputHasChanged(selectedLanguage !== currentLanguage);
-  };
-
-  const checkIfAnalyticsSwitchHasChanged = (checked: boolean) => {
-    const currentAnalytics = !!settings?.USER_CONSENTS_TO_ANALYTICS;
-    setAnalyticsSwitchHasChanged(checked !== currentAnalytics);
-  };
-
-  const checkIfSoundNotificationsSwitchHasChanged = (checked: boolean) => {
-    const currentSoundNotifications = !!settings?.ENABLE_SOUND_NOTIFICATIONS;
-    setSoundNotificationsSwitchHasChanged(
-      checked !== currentSoundNotifications,
-    );
-  };
-
-  const formIsClean =
-    !languageInputHasChanged &&
-    !analyticsSwitchHasChanged &&
-    !soundNotificationsSwitchHasChanged;
-
-  const shouldBeLoading = !settings || isLoading || isPending;
-
-  return (
-    <form
-      data-testid="app-settings-screen"
-      action={formAction}
-      className="flex flex-col h-full justify-between"
-    >
-      {shouldBeLoading && <AppSettingsInputsSkeleton />}
-      {!shouldBeLoading && (
-        <div className="p-9 flex flex-col gap-6">
-          <LanguageInput
-            name="language-input"
-            defaultKey={settings.LANGUAGE}
-            onChange={checkIfLanguageInputHasChanged}
-          />
-
-          <SettingsSwitch
-            testId="enable-analytics-switch"
-            name="enable-analytics-switch"
-            defaultIsToggled={!!settings.USER_CONSENTS_TO_ANALYTICS}
-            onToggle={checkIfAnalyticsSwitchHasChanged}
-          >
-            {t(I18nKey.ANALYTICS$ENABLE)}
-          </SettingsSwitch>
-
-          <SettingsSwitch
-            testId="enable-sound-notifications-switch"
-            name="enable-sound-notifications-switch"
-            defaultIsToggled={!!settings.ENABLE_SOUND_NOTIFICATIONS}
-            onToggle={checkIfSoundNotificationsSwitchHasChanged}
-          >
-            {t(I18nKey.SETTINGS$SOUND_NOTIFICATIONS)}
-          </SettingsSwitch>
-        </div>
-      )}
-
-      <div className="flex gap-6 p-6 justify-end border-t border-t-tertiary">
-        <BrandButton
-          testId="submit-button"
-          variant="primary"
-          type="submit"
-          isDisabled={isPending || formIsClean}
-        >
-          {!isPending && t("SETTINGS$SAVE_CHANGES")}
-          {isPending && t("SETTINGS$SAVING")}
-        </BrandButton>
-      </div>
-    </form>
-  );
-}
-
-export default AppSettingsScreen;

frontend/src/routes/conversation.tsx

@@ -2,12 +2,10 @@ import { useDisclosure } from "@heroui/react";
 import React from "react";
 import { Outlet } from "react-router";
 import { useDispatch, useSelector } from "react-redux";
-import { FaServer, FaExternalLinkAlt } from "react-icons/fa";
+import { FaServer } from "react-icons/fa";
 import { useTranslation } from "react-i18next";
 import { DiGit } from "react-icons/di";
-import { VscCode } from "react-icons/vsc";
 import { I18nKey } from "#/i18n/declaration";
-import { RUNTIME_INACTIVE_STATES } from "#/types/agent-state";
 import {
   ConversationProvider,
   useConversation,
@@ -16,12 +14,12 @@ import { Controls } from "#/components/features/controls/controls";
 import { clearMessages, addUserMessage } from "#/state/chat-slice";
 import { clearTerminal } from "#/state/command-slice";
 import { useEffectOnce } from "#/hooks/use-effect-once";
-
+import CodeIcon from "#/icons/code.svg?react";
 import GlobeIcon from "#/icons/globe.svg?react";
 import JupyterIcon from "#/icons/jupyter.svg?react";
 import TerminalIcon from "#/icons/terminal.svg?react";
 import { clearJupyter } from "#/state/jupyter-slice";
-
+import { FilesProvider } from "#/context/files";
 import { ChatInterface } from "../components/features/chat/chat-interface";
 import { WsClientProvider } from "#/context/ws-client-provider";
 import { EventHandler } from "../wrapper/event-handler";
@@ -52,7 +50,6 @@ function AppContent() {
   const { initialPrompt, files } = useSelector(
     (state: RootState) => state.initialQuery,
   );
-  const { curAgentState } = useSelector((state: RootState) => state.agent);
   const dispatch = useDispatch();
   const endSession = useEndSession();
 
@@ -137,37 +134,9 @@ function AppContent() {
                 icon: <DiGit className="w-6 h-6" />,
               },
               {
-                label: (
-                  <div className="flex items-center gap-1">
-                    {t(I18nKey.VSCODE$TITLE)}
-                  </div>
-                ),
-                to: "vscode",
-                icon: <VscCode className="w-5 h-5" />,
-                rightContent: !RUNTIME_INACTIVE_STATES.includes(
-                  curAgentState,
-                ) ? (
-                  <FaExternalLinkAlt
-                    className="w-3 h-3 text-neutral-400 cursor-pointer"
-                    onClick={async (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      if (conversationId) {
-                        try {
-                          const response = await fetch(
-                            `/api/conversations/${conversationId}/vscode-url`,
-                          );
-                          const data = await response.json();
-                          if (data.vscode_url) {
-                            window.open(data.vscode_url, "_blank");
-                          }
-                        } catch (err) {
-                          // Silently handle the error
-                        }
-                      }
-                    }}
-                  />
-                ) : null,
+                label: t(I18nKey.WORKSPACE$TITLE),
+                to: "workspace",
+                icon: <CodeIcon />,
               },
               {
                 label: t(I18nKey.WORKSPACE$TERMINAL_TAB_LABEL),
@@ -191,7 +160,9 @@ function AppContent() {
               },
             ]}
           >
-            <Outlet />
+            <FilesProvider>
+              <Outlet />
+            </FilesProvider>
           </Container>
         }
       />

frontend/src/routes/editor-tab.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useRouteError } from "react-router";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { useTranslation } from "react-i18next";
+import { FileExplorer } from "#/components/features/file-explorer/file-explorer";
+import { useFiles } from "#/context/files";
+import { getLanguageFromPath } from "#/utils/get-language-from-path";
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+  const { t } = useTranslation();
+
+  return (
+    <div className="w-full h-full border border-danger rounded-b-xl flex flex-col items-center justify-center gap-2 bg-red-500/5">
+      <h1 className="text-3xl font-bold">{t("ERROR$GENERIC")}</h1>
+      {error instanceof Error && <pre>{error.message}</pre>}
+    </div>
+  );
+}
+
+function FileViewer() {
+  const [fileExplorerIsOpen, setFileExplorerIsOpen] = React.useState(true);
+  const { selectedPath, files } = useFiles();
+
+  const toggleFileExplorer = () => {
+    setFileExplorerIsOpen((prev) => !prev);
+  };
+
+  return (
+    <div className="flex h-full bg-base-secondary relative">
+      <FileExplorer isOpen={fileExplorerIsOpen} onToggle={toggleFileExplorer} />
+      <div className="w-full h-full flex flex-col">
+        {selectedPath && files[selectedPath] && (
+          <div className="h-full w-full overflow-auto">
+            <SyntaxHighlighter
+              language={getLanguageFromPath(selectedPath)}
+              style={vscDarkPlus}
+              customStyle={{
+                margin: 0,
+                padding: "10px",
+                height: "100%",
+                background: "#171717",
+                fontSize: "0.875rem",
+                borderRadius: 0,
+              }}
+            >
+              {files[selectedPath]}
+            </SyntaxHighlighter>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default FileViewer;

frontend/src/routes/git-settings.tsx

@@ -1,134 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { useSaveSettings } from "#/hooks/mutation/use-save-settings";
-import { useConfig } from "#/hooks/query/use-config";
-import { useSettings } from "#/hooks/query/use-settings";
-import { BrandButton } from "#/components/features/settings/brand-button";
-import { useLogout } from "#/hooks/mutation/use-logout";
-import { GitHubTokenInput } from "#/components/features/settings/git-settings/github-token-input";
-import { GitLabTokenInput } from "#/components/features/settings/git-settings/gitlab-token-input";
-import { ConfigureGitHubRepositoriesAnchor } from "#/components/features/settings/git-settings/configure-github-repositories-anchor";
-import { I18nKey } from "#/i18n/declaration";
-import {
-  displayErrorToast,
-  displaySuccessToast,
-} from "#/utils/custom-toast-handlers";
-import { retrieveAxiosErrorMessage } from "#/utils/retrieve-axios-error-message";
-import { GitSettingInputsSkeleton } from "#/components/features/settings/git-settings/github-settings-inputs-skeleton";
-
-function GitSettingsScreen() {
-  const { t } = useTranslation();
-
-  const { mutate: saveSettings, isPending } = useSaveSettings();
-  const { mutate: disconnectGitTokens } = useLogout();
-
-  const { data: settings, isLoading } = useSettings();
-  const { data: config } = useConfig();
-
-  const [githubTokenInputHasValue, setGithubTokenInputHasValue] =
-    React.useState(false);
-  const [gitlabTokenInputHasValue, setGitlabTokenInputHasValue] =
-    React.useState(false);
-
-  const isSaas = config?.APP_MODE === "saas";
-  const isGitHubTokenSet = !!settings?.PROVIDER_TOKENS_SET.github;
-  const isGitLabTokenSet = !!settings?.PROVIDER_TOKENS_SET.gitlab;
-
-  const formAction = async (formData: FormData) => {
-    const disconnectButtonClicked =
-      formData.get("disconnect-tokens-button") !== null;
-
-    if (disconnectButtonClicked) {
-      disconnectGitTokens();
-      return;
-    }
-
-    const githubToken = formData.get("github-token-input")?.toString() || "";
-    const gitlabToken = formData.get("gitlab-token-input")?.toString() || "";
-
-    saveSettings(
-      {
-        provider_tokens: {
-          github: githubToken,
-          gitlab: gitlabToken,
-        },
-      },
-      {
-        onSuccess: () => {
-          displaySuccessToast(t(I18nKey.SETTINGS$SAVED));
-        },
-        onError: (error) => {
-          const errorMessage = retrieveAxiosErrorMessage(error);
-          displayErrorToast(errorMessage || t(I18nKey.ERROR$GENERIC));
-        },
-        onSettled: () => {
-          setGithubTokenInputHasValue(false);
-          setGitlabTokenInputHasValue(false);
-        },
-      },
-    );
-  };
-
-  const formIsClean = !githubTokenInputHasValue && !gitlabTokenInputHasValue;
-  const shouldRenderExternalConfigureButtons = isSaas && config.APP_SLUG;
-
-  return (
-    <form
-      data-testid="git-settings-screen"
-      action={formAction}
-      className="flex flex-col h-full justify-between"
-    >
-      {isLoading && <GitSettingInputsSkeleton />}
-
-      {shouldRenderExternalConfigureButtons && !isLoading && (
-        <ConfigureGitHubRepositoriesAnchor slug={config.APP_SLUG!} />
-      )}
-
-      {!isSaas && !isLoading && (
-        <div className="p-9 flex flex-col gap-12">
-          <GitHubTokenInput
-            name="github-token-input"
-            isGitHubTokenSet={isGitHubTokenSet}
-            onChange={(value) => {
-              setGithubTokenInputHasValue(!!value);
-            }}
-          />
-
-          <GitLabTokenInput
-            name="gitlab-token-input"
-            isGitLabTokenSet={isGitLabTokenSet}
-            onChange={(value) => {
-              setGitlabTokenInputHasValue(!!value);
-            }}
-          />
-        </div>
-      )}
-
-      {!shouldRenderExternalConfigureButtons && (
-        <div className="flex gap-6 p-6 justify-end border-t border-t-tertiary">
-          <BrandButton
-            testId="disconnect-tokens-button"
-            name="disconnect-tokens-button"
-            type="submit"
-            variant="secondary"
-            isDisabled={!isGitHubTokenSet && !isGitLabTokenSet}
-          >
-            Disconnect Tokens
-          </BrandButton>
-
-          <BrandButton
-            testId="submit-button"
-            type="submit"
-            variant="primary"
-            isDisabled={isPending || formIsClean}
-          >
-            {!isPending && t("SETTINGS$SAVE_CHANGES")}
-            {isPending && t("SETTINGS$SAVING")}
-          </BrandButton>
-        </div>
-      )}
-    </form>
-  );
-}
-
-export default GitSettingsScreen;

frontend/src/routes/home.tsx

@@ -22,7 +22,7 @@ function HomeScreen() {
 
       <hr className="border-[#717888]" />
 
-      <main className="flex flex-col md:flex-row justify-between gap-4">
+      <main className="flex justify-between gap-4">
         <RepoConnector
           onRepoSelection={(title) => setSelectedRepoTitle(title)}
         />

frontend/src/routes/llm-settings.tsx

@@ -1,430 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { AxiosError } from "axios";
-import { ModelSelector } from "#/components/shared/modals/settings/model-selector";
-import { organizeModelsAndProviders } from "#/utils/organize-models-and-providers";
-import { useAIConfigOptions } from "#/hooks/query/use-ai-config-options";
-import { useSettings } from "#/hooks/query/use-settings";
-import { hasAdvancedSettingsSet } from "#/utils/has-advanced-settings-set";
-import { useSaveSettings } from "#/hooks/mutation/use-save-settings";
-import { SettingsSwitch } from "#/components/features/settings/settings-switch";
-import { I18nKey } from "#/i18n/declaration";
-import { SettingsInput } from "#/components/features/settings/settings-input";
-import { HelpLink } from "#/components/features/settings/help-link";
-import { BrandButton } from "#/components/features/settings/brand-button";
-import {
-  displayErrorToast,
-  displaySuccessToast,
-} from "#/utils/custom-toast-handlers";
-import { retrieveAxiosErrorMessage } from "#/utils/retrieve-axios-error-message";
-import { SettingsDropdownInput } from "#/components/features/settings/settings-dropdown-input";
-import { useConfig } from "#/hooks/query/use-config";
-import { isCustomModel } from "#/utils/is-custom-model";
-import { LlmSettingsInputsSkeleton } from "#/components/features/settings/llm-settings/llm-settings-inputs-skeleton";
-import { KeyStatusIcon } from "#/components/features/settings/key-status-icon";
-
-function LlmSettingsScreen() {
-  const { t } = useTranslation();
-
-  const { mutate: saveSettings, isPending } = useSaveSettings();
-
-  const { data: resources } = useAIConfigOptions();
-  const { data: settings, isLoading, isFetching } = useSettings();
-  const { data: config } = useConfig();
-
-  const [view, setView] = React.useState<"basic" | "advanced">("basic");
-  const [securityAnalyzerInputIsVisible, setSecurityAnalyzerInputIsVisible] =
-    React.useState(false);
-
-  const [dirtyInputs, setDirtyInputs] = React.useState({
-    model: false,
-    apiKey: false,
-    baseUrl: false,
-    agent: false,
-    confirmationMode: false,
-    enableDefaultCondenser: false,
-    securityAnalyzer: false,
-  });
-
-  const modelsAndProviders = organizeModelsAndProviders(
-    resources?.models || [],
-  );
-
-  React.useEffect(() => {
-    const determineWhetherToToggleAdvancedSettings = () => {
-      if (resources && settings) {
-        return (
-          isCustomModel(resources.models, settings.LLM_MODEL) ||
-          hasAdvancedSettingsSet({
-            ...settings,
-          })
-        );
-      }
-
-      return false;
-    };
-
-    const userSettingsIsAdvanced = determineWhetherToToggleAdvancedSettings();
-    if (settings) setSecurityAnalyzerInputIsVisible(settings.CONFIRMATION_MODE);
-
-    if (userSettingsIsAdvanced) setView("advanced");
-    else setView("basic");
-  }, [settings, resources]);
-
-  const handleSuccessfulMutation = () => {
-    displaySuccessToast(t(I18nKey.SETTINGS$SAVED));
-    setDirtyInputs({
-      model: false,
-      apiKey: false,
-      baseUrl: false,
-      agent: false,
-      confirmationMode: false,
-      enableDefaultCondenser: false,
-      securityAnalyzer: false,
-    });
-  };
-
-  const handleErrorMutation = (error: AxiosError) => {
-    const errorMessage = retrieveAxiosErrorMessage(error);
-    displayErrorToast(errorMessage || t(I18nKey.ERROR$GENERIC));
-  };
-
-  const basicFormAction = (formData: FormData) => {
-    const provider = formData.get("llm-provider-input")?.toString();
-    const model = formData.get("llm-model-input")?.toString();
-    const apiKey = formData.get("llm-api-key-input")?.toString();
-
-    const fullLlmModel =
-      provider && model && `${provider}/${model}`.toLowerCase();
-
-    saveSettings(
-      {
-        LLM_MODEL: fullLlmModel,
-        llm_api_key: apiKey || null,
-      },
-      {
-        onSuccess: handleSuccessfulMutation,
-        onError: handleErrorMutation,
-      },
-    );
-  };
-
-  const advancedFormAction = (formData: FormData) => {
-    const model = formData.get("llm-custom-model-input")?.toString();
-    const baseUrl = formData.get("base-url-input")?.toString();
-    const apiKey = formData.get("llm-api-key-input")?.toString();
-    const agent = formData.get("agent-input")?.toString();
-    const confirmationMode =
-      formData.get("enable-confirmation-mode-switch")?.toString() === "on";
-    const enableDefaultCondenser =
-      formData.get("enable-memory-condenser-switch")?.toString() === "on";
-    const securityAnalyzer = formData
-      .get("security-analyzer-input")
-      ?.toString();
-
-    saveSettings(
-      {
-        LLM_MODEL: model,
-        LLM_BASE_URL: baseUrl,
-        llm_api_key: apiKey,
-        AGENT: agent,
-        CONFIRMATION_MODE: confirmationMode,
-        ENABLE_DEFAULT_CONDENSER: enableDefaultCondenser,
-        SECURITY_ANALYZER: confirmationMode ? securityAnalyzer : undefined,
-      },
-      {
-        onSuccess: handleSuccessfulMutation,
-        onError: handleErrorMutation,
-      },
-    );
-  };
-
-  const formAction = (formData: FormData) => {
-    if (view === "basic") basicFormAction(formData);
-    else advancedFormAction(formData);
-  };
-
-  const handleToggleAdvancedSettings = (isToggled: boolean) => {
-    setSecurityAnalyzerInputIsVisible(!!settings?.CONFIRMATION_MODE);
-    setView(isToggled ? "advanced" : "basic");
-    setDirtyInputs({
-      model: false,
-      apiKey: false,
-      baseUrl: false,
-      agent: false,
-      confirmationMode: false,
-      enableDefaultCondenser: false,
-      securityAnalyzer: false,
-    });
-  };
-
-  const handleModelIsDirty = (model: string | null) => {
-    // openai providers are special case; see ModelSelector
-    // component for details
-    const modelIsDirty = model !== settings?.LLM_MODEL.replace("openai/", "");
-    setDirtyInputs((prev) => ({
-      ...prev,
-      model: modelIsDirty,
-    }));
-  };
-
-  const handleApiKeyIsDirty = (apiKey: string) => {
-    const apiKeyIsDirty = apiKey !== "";
-    setDirtyInputs((prev) => ({
-      ...prev,
-      apiKey: apiKeyIsDirty,
-    }));
-  };
-
-  const handleCustomModelIsDirty = (model: string) => {
-    const modelIsDirty = model !== settings?.LLM_MODEL && model !== "";
-    setDirtyInputs((prev) => ({
-      ...prev,
-      model: modelIsDirty,
-    }));
-  };
-
-  const handleBaseUrlIsDirty = (baseUrl: string) => {
-    const baseUrlIsDirty = baseUrl !== settings?.LLM_BASE_URL;
-    setDirtyInputs((prev) => ({
-      ...prev,
-      baseUrl: baseUrlIsDirty,
-    }));
-  };
-
-  const handleAgentIsDirty = (agent: string) => {
-    const agentIsDirty = agent !== settings?.AGENT && agent !== "";
-    setDirtyInputs((prev) => ({
-      ...prev,
-      agent: agentIsDirty,
-    }));
-  };
-
-  const handleConfirmationModeIsDirty = (isToggled: boolean) => {
-    setSecurityAnalyzerInputIsVisible(isToggled);
-    const confirmationModeIsDirty = isToggled !== settings?.CONFIRMATION_MODE;
-    setDirtyInputs((prev) => ({
-      ...prev,
-      confirmationMode: confirmationModeIsDirty,
-    }));
-  };
-
-  const handleEnableDefaultCondenserIsDirty = (isToggled: boolean) => {
-    const enableDefaultCondenserIsDirty =
-      isToggled !== settings?.ENABLE_DEFAULT_CONDENSER;
-    setDirtyInputs((prev) => ({
-      ...prev,
-      enableDefaultCondenser: enableDefaultCondenserIsDirty,
-    }));
-  };
-
-  const handleSecurityAnalyzerIsDirty = (securityAnalyzer: string) => {
-    const securityAnalyzerIsDirty =
-      securityAnalyzer !== settings?.SECURITY_ANALYZER;
-    setDirtyInputs((prev) => ({
-      ...prev,
-      securityAnalyzer: securityAnalyzerIsDirty,
-    }));
-  };
-
-  const formIsDirty = Object.values(dirtyInputs).some((isDirty) => isDirty);
-
-  if (!settings || isFetching) return <LlmSettingsInputsSkeleton />;
-
-  return (
-    <div data-testid="llm-settings-screen" className="h-full">
-      <form
-        action={formAction}
-        className="flex flex-col h-full justify-between"
-      >
-        <div className="p-9 flex flex-col gap-6">
-          <SettingsSwitch
-            testId="advanced-settings-switch"
-            defaultIsToggled={view === "advanced"}
-            onToggle={handleToggleAdvancedSettings}
-            isToggled={view === "advanced"}
-          >
-            {t(I18nKey.SETTINGS$ADVANCED)}
-          </SettingsSwitch>
-
-          {view === "basic" && (
-            <div
-              data-testid="llm-settings-form-basic"
-              className="flex flex-col gap-6"
-            >
-              {!isLoading && !isFetching && (
-                <ModelSelector
-                  models={modelsAndProviders}
-                  currentModel={
-                    settings.LLM_MODEL || "anthropic/claude-3-5-sonnet-20241022"
-                  }
-                  onChange={handleModelIsDirty}
-                />
-              )}
-
-              <SettingsInput
-                testId="llm-api-key-input"
-                name="llm-api-key-input"
-                label={t(I18nKey.SETTINGS_FORM$API_KEY)}
-                type="password"
-                className="w-[680px]"
-                placeholder={settings.LLM_API_KEY_SET ? "<hidden>" : ""}
-                onChange={handleApiKeyIsDirty}
-                startContent={
-                  settings.LLM_API_KEY_SET && (
-                    <KeyStatusIcon isSet={settings.LLM_API_KEY_SET} />
-                  )
-                }
-              />
-
-              <HelpLink
-                testId="llm-api-key-help-anchor"
-                text={t(I18nKey.SETTINGS$DONT_KNOW_API_KEY)}
-                linkText={t(I18nKey.SETTINGS$CLICK_FOR_INSTRUCTIONS)}
-                href="https://docs.all-hands.dev/modules/usage/installation#getting-an-api-key"
-              />
-            </div>
-          )}
-
-          {view === "advanced" && (
-            <div
-              data-testid="llm-settings-form-advanced"
-              className="flex flex-col gap-6"
-            >
-              <SettingsInput
-                testId="llm-custom-model-input"
-                name="llm-custom-model-input"
-                label={t(I18nKey.SETTINGS$CUSTOM_MODEL)}
-                defaultValue={
-                  settings.LLM_MODEL || "anthropic/claude-3-5-sonnet-20241022"
-                }
-                placeholder="anthropic/claude-3-5-sonnet-20241022"
-                type="text"
-                className="w-[680px]"
-                onChange={handleCustomModelIsDirty}
-              />
-
-              <SettingsInput
-                testId="base-url-input"
-                name="base-url-input"
-                label={t(I18nKey.SETTINGS$BASE_URL)}
-                defaultValue={settings.LLM_BASE_URL}
-                placeholder="https://api.openai.com"
-                type="text"
-                className="w-[680px]"
-                onChange={handleBaseUrlIsDirty}
-              />
-
-              <SettingsInput
-                testId="llm-api-key-input"
-                name="llm-api-key-input"
-                label={t(I18nKey.SETTINGS_FORM$API_KEY)}
-                type="password"
-                className="w-[680px]"
-                placeholder={settings.LLM_API_KEY_SET ? "<hidden>" : ""}
-                onChange={handleApiKeyIsDirty}
-                startContent={
-                  settings.LLM_API_KEY_SET && (
-                    <KeyStatusIcon isSet={settings.LLM_API_KEY_SET} />
-                  )
-                }
-              />
-              <HelpLink
-                testId="llm-api-key-help-anchor"
-                text={t(I18nKey.SETTINGS$DONT_KNOW_API_KEY)}
-                linkText={t(I18nKey.SETTINGS$CLICK_FOR_INSTRUCTIONS)}
-                href="https://docs.all-hands.dev/modules/usage/installation#getting-an-api-key"
-              />
-
-              <SettingsDropdownInput
-                testId="agent-input"
-                name="agent-input"
-                label={t(I18nKey.SETTINGS$AGENT)}
-                items={
-                  resources?.agents.map((agent) => ({
-                    key: agent,
-                    label: agent,
-                  })) || []
-                }
-                defaultSelectedKey={settings.AGENT}
-                isClearable={false}
-                onInputChange={handleAgentIsDirty}
-                wrapperClassName="w-[680px]"
-              />
-
-              {config?.APP_MODE === "saas" && (
-                <SettingsDropdownInput
-                  testId="runtime-settings-input"
-                  name="runtime-settings-input"
-                  label={
-                    <>
-                      {t(I18nKey.SETTINGS$RUNTIME_SETTINGS)}
-                      <a href="mailto:contact@all-hands.dev">
-                        {t(I18nKey.SETTINGS$GET_IN_TOUCH)}
-                      </a>
-                      )
-                    </>
-                  }
-                  items={[]}
-                  isDisabled
-                />
-              )}
-
-              <SettingsSwitch
-                testId="enable-memory-condenser-switch"
-                name="enable-memory-condenser-switch"
-                defaultIsToggled={settings.ENABLE_DEFAULT_CONDENSER}
-                onToggle={handleEnableDefaultCondenserIsDirty}
-              >
-                {t(I18nKey.SETTINGS$ENABLE_MEMORY_CONDENSATION)}
-              </SettingsSwitch>
-
-              <SettingsSwitch
-                testId="enable-confirmation-mode-switch"
-                name="enable-confirmation-mode-switch"
-                onToggle={handleConfirmationModeIsDirty}
-                defaultIsToggled={settings.CONFIRMATION_MODE}
-                isBeta
-              >
-                {t(I18nKey.SETTINGS$CONFIRMATION_MODE)}
-              </SettingsSwitch>
-
-              {securityAnalyzerInputIsVisible && (
-                <SettingsDropdownInput
-                  testId="security-analyzer-input"
-                  name="security-analyzer-input"
-                  label={t(I18nKey.SETTINGS$SECURITY_ANALYZER)}
-                  items={
-                    resources?.securityAnalyzers.map((analyzer) => ({
-                      key: analyzer,
-                      label: analyzer,
-                    })) || []
-                  }
-                  defaultSelectedKey={settings.SECURITY_ANALYZER}
-                  isClearable
-                  showOptionalTag
-                  onInputChange={handleSecurityAnalyzerIsDirty}
-                  wrapperClassName="w-[680px]"
-                />
-              )}
-            </div>
-          )}
-        </div>
-
-        <div className="flex gap-6 p-6 justify-end border-t border-t-tertiary">
-          <BrandButton
-            testId="submit-button"
-            type="submit"
-            variant="primary"
-            isDisabled={!formIsDirty || isPending}
-          >
-            {!isPending && t("SETTINGS$SAVE_CHANGES")}
-            {isPending && t("SETTINGS$SAVING")}
-          </BrandButton>
-        </div>
-      </form>
-    </div>
-  );
-}
-
-export default LlmSettingsScreen;

frontend/src/routes/settings.tsx

@@ -1,6 +1,5 @@
-import { NavLink, Outlet, useLocation, useNavigate } from "react-router";
+import { NavLink, Outlet } from "react-router";
 import { useTranslation } from "react-i18next";
-import React from "react";
 import SettingsIcon from "#/icons/settings.svg?react";
 import { cn } from "#/utils/utils";
 import { useConfig } from "#/hooks/query/use-config";
@@ -8,44 +7,9 @@ import { I18nKey } from "#/i18n/declaration";
 
 function SettingsScreen() {
   const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
   const { data: config } = useConfig();
-
   const isSaas = config?.APP_MODE === "saas";
 
-  const saasNavItems = [
-    { to: "/settings/git", text: t("SETTINGS$NAV_GIT") },
-    { to: "/settings/app", text: t("SETTINGS$NAV_APPLICATION") },
-    { to: "/settings/billing", text: t("SETTINGS$NAV_CREDITS") },
-    { to: "/settings/api-keys", text: t("SETTINGS$NAV_API_KEYS") },
-  ];
-
-  const ossNavItems = [
-    { to: "/settings", text: t("SETTINGS$NAV_LLM") },
-    { to: "/settings/git", text: t("SETTINGS$NAV_GIT") },
-    { to: "/settings/app", text: t("SETTINGS$NAV_APPLICATION") },
-  ];
-
-  React.useEffect(() => {
-    if (isSaas) {
-      if (pathname === "/settings") {
-        navigate("/settings/git");
-      }
-    } else {
-      const noEnteringPaths = [
-        "/settings/billing",
-        "/settings/credits",
-        "/settings/api-keys",
-      ];
-      if (noEnteringPaths.includes(pathname)) {
-        navigate("/settings");
-      }
-    }
-  }, [isSaas, pathname]);
-
-  const navItems = isSaas ? saasNavItems : ossNavItems;
-
   return (
     <main
       data-testid="settings-screen"
@@ -56,26 +20,32 @@ function SettingsScreen() {
         <h1 className="text-sm leading-6">{t(I18nKey.SETTINGS$TITLE)}</h1>
       </header>
 
-      <nav
-        data-testid="settings-navbar"
-        className="flex items-end gap-12 px-9 border-b border-tertiary"
-      >
-        {navItems.map(({ to, text }) => (
-          <NavLink
-            end
-            key={to}
-            to={to}
-            className={({ isActive }) =>
-              cn(
-                "border-b-2 border-transparent py-2.5",
-                isActive && "border-primary",
-              )
-            }
-          >
-            <ul className="text-[#F9FBFE] text-sm">{text}</ul>
-          </NavLink>
-        ))}
-      </nav>
+      {isSaas && (
+        <nav
+          data-testid="settings-navbar"
+          className="flex items-end gap-12 px-11 border-b border-tertiary"
+        >
+          {[
+            { to: "/settings", text: "Account" },
+            { to: "/settings/billing", text: "Credits" },
+            { to: "/settings/api-keys", text: "API Keys" },
+          ].map(({ to, text }) => (
+            <NavLink
+              end
+              key={to}
+              to={to}
+              className={({ isActive }) =>
+                cn(
+                  "border-b-2 border-transparent py-2.5",
+                  isActive && "border-primary",
+                )
+              }
+            >
+              <ul className="text-[#F9FBFE] text-sm">{text}</ul>
+            </NavLink>
+          ))}
+        </nav>
+      )}
 
       <div className="flex flex-col grow overflow-auto">
         <Outlet />

frontend/src/routes/vscode-tab.tsx

@@ -1,81 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
-import { useConversation } from "#/context/conversation-context";
-import { I18nKey } from "#/i18n/declaration";
-import { RootState } from "#/store";
-import { RUNTIME_INACTIVE_STATES } from "#/types/agent-state";
-
-function VSCodeTab() {
-  const { t } = useTranslation();
-  const { conversationId } = useConversation();
-  const [vsCodeUrl, setVsCodeUrl] = React.useState<string | null>(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState<string | null>(null);
-  const { curAgentState } = useSelector((state: RootState) => state.agent);
-  const isRuntimeInactive = RUNTIME_INACTIVE_STATES.includes(curAgentState);
-
-  React.useEffect(() => {
-    async function fetchVSCodeUrl() {
-      if (!conversationId || isRuntimeInactive) return;
-
-      try {
-        setIsLoading(true);
-        const response = await fetch(
-          `/api/conversations/${conversationId}/vscode-url`,
-        );
-        const data = await response.json();
-
-        if (data.vscode_url) {
-          setVsCodeUrl(data.vscode_url);
-        } else {
-          setError(t(I18nKey.VSCODE$URL_NOT_AVAILABLE));
-        }
-      } catch (err) {
-        setError(t(I18nKey.VSCODE$FETCH_ERROR));
-        // Error is handled by setting the error state
-      } finally {
-        setIsLoading(false);
-      }
-    }
-
-    fetchVSCodeUrl();
-  }, [conversationId, isRuntimeInactive, t]);
-
-  if (isRuntimeInactive) {
-    return (
-      <div className="w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light">
-        {t("DIFF_VIEWER$WAITING_FOR_RUNTIME")}
-      </div>
-    );
-  }
-
-  if (isLoading) {
-    return (
-      <div className="w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light">
-        {t("DIFF_VIEWER$WAITING_FOR_RUNTIME")}
-      </div>
-    );
-  }
-
-  if (error || !vsCodeUrl) {
-    return (
-      <div className="w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light">
-        {error || t(I18nKey.VSCODE$URL_NOT_AVAILABLE)}
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full w-full">
-      <iframe
-        title={t(I18nKey.VSCODE$TITLE)}
-        src={vsCodeUrl}
-        className="w-full h-full border-0"
-        allow={t(I18nKey.VSCODE$IFRAME_PERMISSIONS)}
-      />
-    </div>
-  );
-}
-
-export default VSCodeTab;

frontend/src/tailwind.css

@@ -6,14 +6,10 @@
   @apply bg-tertiary border border-neutral-600 rounded;
 }
 
-.skeleton {
-  @apply bg-gray-400 rounded-md animate-pulse;
-}
-
-.skeleton-round {
-  @apply bg-gray-400 rounded-full animate-pulse;
-}
-
 .heading {
   @apply text-[28px] leading-8 -tracking-[0.02em] font-bold text-content-2;
 }
+
+.skeleton {
+  @apply bg-gray-400 rounded-md animate-pulse;
+}

frontend/src/types/tab-option.tsx

@@ -1,18 +1,18 @@
 enum TabOption {
   PLANNER = "planner",
+  CODE = "code",
   BROWSER = "browser",
   JUPYTER = "jupyter",
-  VSCODE = "vscode",
 }
 
 type TabType =
   | TabOption.PLANNER
+  | TabOption.CODE
   | TabOption.BROWSER
-  | TabOption.JUPYTER
-  | TabOption.VSCODE;
+  | TabOption.JUPYTER;
 
 const AllTabs = [
-  TabOption.VSCODE,
+  TabOption.CODE,
   TabOption.BROWSER,
   TabOption.PLANNER,
   TabOption.JUPYTER,

frontend/src/utils/has-advanced-settings-set.ts

@@ -2,8 +2,9 @@ import { DEFAULT_SETTINGS } from "#/services/settings";
 import { Settings } from "#/types/settings";
 
 export const hasAdvancedSettingsSet = (settings: Partial<Settings>): boolean =>
-  Object.keys(settings).length > 0 &&
-  (!!settings.LLM_BASE_URL ||
-    settings.AGENT !== DEFAULT_SETTINGS.AGENT ||
-    settings.CONFIRMATION_MODE ||
-    !!settings.SECURITY_ANALYZER);
+  !!settings.LLM_BASE_URL ||
+  settings.AGENT !== DEFAULT_SETTINGS.AGENT ||
+  settings.REMOTE_RUNTIME_RESOURCE_FACTOR !==
+    DEFAULT_SETTINGS.REMOTE_RUNTIME_RESOURCE_FACTOR ||
+  settings.CONFIRMATION_MODE ||
+  !!settings.SECURITY_ANALYZER;

microagents/README.md

@@ -15,11 +15,11 @@ This directory (`OpenHands/microagents/`) contains shareable microagents that ar
 Directory structure:
 ```
 OpenHands/microagents/
-├── # Keyword-triggered expertise
-│   ├── git.md         # Git operations
-│   ├── testing.md     # Testing practices
-│   └── docker.md      # Docker guidelines
-└── # These microagents are always loaded
+├── knowledge/     # Keyword-triggered expertise
+│   ├── git.md      # Git operations
+│   ├── testing.md  # Testing practices
+│   └── docker.md   # Docker guidelines
+└── tasks/        # Interactive workflows
     ├── pr_review.md   # PR review process
     ├── bug_fix.md     # Bug fixing workflow
     └── feature.md     # Feature implementation
@@ -37,7 +37,8 @@ your-repository/
 └── .openhands/
     └── microagents/
         └── repo.md    # Repository-specific instructions
-        └── ...        # Private micro-agents that are only available inside this repo
+        └── knowledges/  # Private micro-agents that are only available inside this repo
+        └── tasks/       # Private micro-agents that are only available inside this repo
 ```
 
 
@@ -46,6 +47,7 @@ your-repository/
 When OpenHands works with a repository, it:
 1. Loads repository-specific instructions from `.openhands/microagents/repo.md` if present
 2. Loads relevant knowledge agents based on keywords in conversations
+3. Enable task agent if user select one of them
 
 ## Types of Microagents
 
@@ -66,7 +68,7 @@ Key characteristics:
 - **Reusable**: Knowledge can be applied across multiple projects
 - **Versioned**: Support multiple versions of tools/frameworks
 
-You can see an example of a knowledge-based agent in [OpenHands's github microagent](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/github.md).
+You can see an example of a knowledge-based agent in [OpenHands's github microagent](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge/github.md).
 
 ### 2. Repository Agents
 
@@ -84,6 +86,22 @@ Key features:
 
 You can see an example of a repo agent in [the agent for the OpenHands repo itself](https://github.com/All-Hands-AI/OpenHands/blob/main/.openhands/microagents/repo.md).
 
+### 3. Task Agents
+
+Task agents provide interactive workflows that guide users through common development tasks. They:
+- Accept user inputs
+- Follow predefined steps
+- Adapt to context
+- Provide consistent results
+
+Key capabilities:
+- **Interactive**: Guide users through complex processes
+- **Validating**: Check inputs and conditions
+- **Flexible**: Adapt to different scenarios
+- **Reproducible**: Ensure consistent outcomes
+
+Example workflow:
+You can see an example of a task-based agent in [OpenHands's pull request updating microagent](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/tasks/update_pr_description.md).
 
 ## Contributing
 
@@ -95,8 +113,13 @@ You can see an example of a repo agent in [the agent for the OpenHands repo itse
    - Common problem solutions
    - General development guidelines
 
+2. **Task Agents** - When you have:
+   - Repeatable workflows
+   - Multi-step processes
+   - Common development tasks
+   - Standard procedures
 
-2. **Repository Agents** - When you need:
+3. **Repository Agents** - When you need:
    - Project-specific guidelines
    - Team conventions and practices
    - Custom workflow documentation
@@ -111,8 +134,14 @@ You can see an example of a repo agent in [the agent for the OpenHands repo itse
    - Use file patterns when relevant
    - Keep knowledge general and reusable
 
+2. **For Task Agents**:
+   - Break workflows into clear steps
+   - Validate user inputs
+   - Provide helpful defaults
+   - Include usage examples
+   - Make steps adaptable
 
-2. **For Repository Agents**:
+3. **For Repository Agents**:
    - Document clear setup instructions
    - Include repository structure details
    - Specify testing and build procedures
@@ -123,8 +152,9 @@ You can see an example of a repo agent in [the agent for the OpenHands repo itse
 ### Submission Process
 
 1. Create your agent file in the appropriate directory:
-   - `microagents/` for expertise (public, shareable)
-   - Note: Repository-specific agents should remain in their respective repositories' `.openhands/microagents/` directory
+   - `knowledge/` for expertise (public, shareable)
+   - `tasks/` for workflows (public, shareable)
+   - Note: Repository agents should remain in their respective repositories' `.openhands/microagents/` directory
 2. Test thoroughly
 3. Submit a pull request to OpenHands
 

microagents/agent_memory.md

@@ -1,32 +0,0 @@
----
-name: agent_memory
-type: knowledge
-version: 1.0.0
-agent: CodeActAgent
-triggers:
-- /remember
----
-
-* Repository memory: Use .openhands/microagents/repo.md under each repository root to store and access important information.
-  - If this file exists, it will be added to your context automatically.
-  - If missing, you should create it unless the user has explicitly asked you to not do so.
-
-* Store and maintain **general knowledge** that will be helpful for most future tasks:
-  1. Repository structure
-  2. Common commands (build, lint, test, pre-commit, etc.)
-  3. Code style preferences
-  4. Workflows and best practices
-  5. Any other repository-specific knowledge you learn
-
-* IMPORTANT: ONLY LOG the information that would be helpful for different future tasks, for example, how to configure the settings, how to setup the repository. Do NOT add issue-specific information (e.g., what specific error you have ran into and how you fix it).
-
-* When adding new information:
-  - ALWAYS ask for user confirmation first by listing the exact items (numbered 1, 2, 3, etc.) you plan to save to repo.md
-  - Only save the items the user approves (they may ask you to save a subset)
-  - Ensure it integrates nicely with existing knowledge in repo.md
-  - Reorganize the content if needed to maintain clarity and organization
-  - Group related information together under appropriate sections or headings
-  - If you've only explored a portion of the codebase, clearly note this limitation in the repository structure documentation
-  - If you don't know the essential commands for working with the repository, such as lint or typecheck, ask the user and suggest adding them to repo.md for future reference (with permission)
-
-When you receive this message, please review and summarize your recent actions and observations, then present a list of valuable information that should be saved in repo.md to the user.

microagents/knowledge/add_agent.md

@@ -38,4 +38,4 @@ For detailed information, see:
 
 - [Microagents Overview](https://docs.all-hands.dev/modules/usage/prompting/microagents-overview)
 - [Microagents Syntax](https://docs.all-hands.dev/modules/usage/prompting/microagents-syntax)
-- [Example GitHub Microagent](https://github.com/All-Hands-AI/OpenHands/blob/main/microagents/github.md)
+- [Example GitHub Microagent](https://github.com/All-Hands-AI/OpenHands/blob/main/microagents/knowledge/github.md)