add section for gitlab in docs

Co-authored-by: openhands <openhands@all-hands.dev>

.github/workflows/openhands-resolver.yml

@@ -24,7 +24,7 @@ on:
       LLM_MODEL:
         required: false
         type: string
-        default: "anthropic/claude-3-5-sonnet-20241022"
+        default: "anthropic/claude-3-7-sonnet-20250219"
       LLM_API_VERSION:
         required: false
         type: string
@@ -179,7 +179,7 @@ jobs:
 
           echo "MAX_ITERATIONS=${{ inputs.max_iterations || 50 }}" >> $GITHUB_ENV
           echo "SANDBOX_ENV_GITHUB_TOKEN=${{ secrets.PAT_TOKEN || github.token }}" >> $GITHUB_ENV
-          echo "SANDBOX_ENV_BASE_CONTAINER_IMAGE=${{ inputs.base_container_image }}" >> $GITHUB_ENV
+          echo "SANDBOX_BASE_CONTAINER_IMAGE=${{ inputs.base_container_image }}" >> $GITHUB_ENV
 
           # Set branch variables
           echo "TARGET_BRANCH=${{ inputs.target_branch || 'main' }}" >> $GITHUB_ENV

Development.md

@@ -118,7 +118,7 @@ poetry run pytest ./tests/unit/test_*.py
 To reduce build time (e.g., if no changes were made to the client-runtime component), you can use an existing Docker container image by
 setting the SANDBOX_RUNTIME_CONTAINER_IMAGE environment variable to the desired Docker image.
 
-Example: `export SANDBOX_RUNTIME_CONTAINER_IMAGE=ghcr.io/all-hands-ai/runtime:0.33-nikolaik`
+Example: `export SANDBOX_RUNTIME_CONTAINER_IMAGE=ghcr.io/all-hands-ai/runtime:0.34-nikolaik`
 
 ## Develop inside Docker container
 

Makefile

@@ -39,6 +39,7 @@ ifeq ($(INSTALL_DOCKER),)
 	@$(MAKE) -s check-docker
 endif
 	@$(MAKE) -s check-poetry
+	@$(MAKE) -s check-tmux
 	@echo "$(GREEN)Dependencies checked successfully.$(RESET)"
 
 check-system:
@@ -101,6 +102,18 @@ check-docker:
 		exit 1; \
 	fi
 
+check-tmux:
+	@echo "$(YELLOW)Checking tmux installation...$(RESET)"
+	@if command -v tmux > /dev/null; then \
+		echo "$(BLUE)$(shell tmux -V) is already installed.$(RESET)"; \
+	else \
+		echo "$(YELLOW)╔════════════════════════════════════════════════════════════════════════════╗$(RESET)"; \
+		echo "$(YELLOW)║ OPTIONAL: tmux is not installed.                                          ║$(RESET)"; \
+		echo "$(YELLOW)║ Some advanced terminal features may not work without tmux.                ║$(RESET)"; \
+		echo "$(YELLOW)║ You can install it if needed, but it's not required for development.      ║$(RESET)"; \
+		echo "$(YELLOW)╚════════════════════════════════════════════════════════════════════════════╝$(RESET)"; \
+	fi
+
 check-poetry:
 	@echo "$(YELLOW)Checking Poetry installation...$(RESET)"
 	@if command -v poetry > /dev/null; then \

README.md

@@ -52,17 +52,17 @@ system requirements and more information.
 
 
 ```bash
-docker pull docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik
+docker pull docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik
 
 docker run -it --rm --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e LOG_ALL_EVENTS=true \
     -v /var/run/docker.sock:/var/run/docker.sock \
     -v ~/.openhands-state:/.openhands-state \
     -p 3000:3000 \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33
+    docker.all-hands.dev/all-hands-ai/openhands:0.34
 ```
 
 You'll find OpenHands running at [http://localhost:3000](http://localhost:3000)!

containers/dev/Dockerfile

@@ -61,8 +61,8 @@ RUN add-apt-repository ppa:deadsnakes/ppa \
     && apt-get install -y python3.12 python3.12-venv python3.12-dev python3-pip \
     && ln -s /usr/bin/python3.12 /usr/bin/python
 
-# NodeJS >= 18.17.1
-RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
+# NodeJS >= 22.x
+RUN curl -fsSL https://deb.nodesource.com/setup_22.x | bash - \
     && apt-get install -y nodejs
 
 # Poetry >= 1.8
@@ -108,7 +108,7 @@ WORKDIR /app
 
 # cache build dependencies
 RUN \
-  --mount=type=bind,source=./,target=/app/ \
+  --mount=type=bind,source=./,target=/app/,rw \
   <<EOF
 #!/bin/bash
 make -s clean

containers/dev/compose.yml

@@ -11,7 +11,7 @@ services:
       - BACKEND_HOST=${BACKEND_HOST:-"0.0.0.0"}
       - SANDBOX_API_HOSTNAME=host.docker.internal
       #
-      - SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-ghcr.io/all-hands-ai/runtime:0.33-nikolaik}
+      - SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-ghcr.io/all-hands-ai/runtime:0.34-nikolaik}
       - SANDBOX_USER_ID=${SANDBOX_USER_ID:-1234}
       - WORKSPACE_MOUNT_PATH=${WORKSPACE_BASE:-$PWD/workspace}
     ports:

docker-compose.yml

@@ -7,7 +7,7 @@ services:
     image: openhands:latest
     container_name: openhands-app-${DATE:-}
     environment:
-      - SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik}
+      - SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik}
       #- SANDBOX_USER_ID=${SANDBOX_USER_ID:-1234} # enable this only if you want a specific non-root sandbox user but you will have to manually adjust permissions of openhands-state for this user
       - WORKSPACE_MOUNT_PATH=${WORKSPACE_BASE:-$PWD/workspace}
     ports:

docs/.gitignore

@@ -3,6 +3,7 @@
 
 # Production
 /build
+/static/swagger-ui
 
 # Generated files
 .docusaurus

docs/docusaurus.config.ts

@@ -36,6 +36,7 @@ const config: Config = {
     mermaid: true,
   },
   themes: ['@docusaurus/theme-mermaid'],
+  plugins: [],
   presets: [
     [
       'classic',
@@ -75,6 +76,11 @@ const config: Config = {
           position: 'left',
           label: 'User Guides',
         },
+        {
+          href: 'https://docs.all-hands.dev/swagger-ui/', // FIXME: this should be a relative path, but docusarus steals the click
+          label: 'API',
+          position: 'left',
+        },
         {
           type: 'localeDropdown',
           position: 'left',

docs/generate-swagger-ui.js

@@ -0,0 +1,102 @@
+const fs = require('fs');
+const path = require('path');
+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
+ * 3. We need to create a custom index.html file that points to our OpenAPI spec
+ * 4. This approach allows us to customize the Swagger UI to match our documentation style
+ */
+
+// Get the absolute path to the swagger-ui-dist package
+const swaggerUiDistPath = swaggerUiDist.getAbsoluteFSPath();
+
+// Create the target directory if it doesn't exist
+const targetDir = path.join(__dirname, 'static', 'swagger-ui');
+if (!fs.existsSync(targetDir)) {
+  fs.mkdirSync(targetDir, { recursive: true });
+}
+
+// Copy all files from swagger-ui-dist to our target directory
+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' ||
+      file === 'README.md' ||
+      file.endsWith('.map')) {
+    return;
+  }
+
+  fs.copyFileSync(sourcePath, targetPath);
+});
+
+// Create a custom index.html file that points to our OpenAPI spec
+const indexHtml = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OpenHands API Documentation</title>
+  <link rel="stylesheet" type="text/css" href="./swagger-ui.css" />
+  <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
+  <style>
+    html {
+      box-sizing: border-box;
+      overflow: -moz-scrollbars-vertical;
+      overflow-y: scroll;
+    }
+
+    *,
+    *:before,
+    *:after {
+      box-sizing: inherit;
+    }
+
+    body {
+      margin: 0;
+      background: #fafafa;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="swagger-ui"></div>
+
+  <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
+  <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
+  <script>
+    window.onload = function() {
+      // Begin Swagger UI call region
+      const ui = SwaggerUIBundle({
+        url: "/openapi.json",
+        dom_id: '#swagger-ui',
+        deepLinking: true,
+        presets: [
+          SwaggerUIBundle.presets.apis,
+          SwaggerUIStandalonePreset
+        ],
+        plugins: [
+          SwaggerUIBundle.plugins.DownloadUrl
+        ],
+        layout: "StandaloneLayout"
+      });
+      // End Swagger UI call region
+      window.ui = ui;
+    };
+  </script>
+</body>
+</html>
+`;
+
+fs.writeFileSync(path.join(targetDir, 'index.html'), indexHtml);
+
+console.log('Swagger UI files generated successfully in static/swagger-ui/');

docs/i18n/fr/docusaurus-plugin-content-docs/current/usage/how-to/cli-mode.md

@@ -52,7 +52,7 @@ LLM_API_KEY="sk_test_12345"
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -61,7 +61,7 @@ docker run -it \
     -v /var/run/docker.sock:/var/run/docker.sock \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.34 \
     python -m openhands.core.cli
 ```
 

docs/i18n/fr/docusaurus-plugin-content-docs/current/usage/how-to/headless-mode.md

@@ -46,7 +46,7 @@ LLM_API_KEY="sk_test_12345"
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -56,6 +56,6 @@ docker run -it \
     -v /var/run/docker.sock:/var/run/docker.sock \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.34 \
     python -m openhands.core.main -t "write a bash script that prints hi" --no-auto-continue
 ```

docs/i18n/fr/docusaurus-plugin-content-docs/current/usage/installation.mdx

@@ -13,16 +13,16 @@
 La façon la plus simple d'exécuter OpenHands est avec Docker.
 
 ```bash
-docker pull docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik
+docker pull docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik
 
 docker run -it --rm --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e LOG_ALL_EVENTS=true \
     -v /var/run/docker.sock:/var/run/docker.sock \
     -p 3000:3000 \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33
+    docker.all-hands.dev/all-hands-ai/openhands:0.34
 ```
 
 Vous pouvez également exécuter OpenHands en mode [headless scriptable](https://docs.all-hands.dev/modules/usage/how-to/headless-mode), en tant que [CLI interactive](https://docs.all-hands.dev/modules/usage/how-to/cli-mode), ou en utilisant l'[Action GitHub OpenHands](https://docs.all-hands.dev/modules/usage/how-to/github-action).

docs/i18n/fr/docusaurus-plugin-content-docs/current/usage/runtimes.md

@@ -13,7 +13,7 @@ C'est le Runtime par défaut qui est utilisé lorsque vous démarrez OpenHands.
 
 ```
 docker run # ...
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -v /var/run/docker.sock:/var/run/docker.sock \
     # ...
 ```

docs/i18n/ja/docusaurus-plugin-content-docs/current/usage/how-to/cli-mode.md

@@ -34,7 +34,7 @@ Docker で OpenHands を CLI モードで実行するには:
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -44,7 +44,7 @@ docker run -it \
     -v ~/.openhands-state:/.openhands-state \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.34 \
     python -m openhands.core.cli
 ```
 

docs/i18n/ja/docusaurus-plugin-content-docs/current/usage/how-to/headless-mode.md

@@ -31,7 +31,7 @@ DockerでOpenHandsをヘッドレスモードで実行するには:
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -42,7 +42,7 @@ docker run -it \
     -v ~/.openhands-state:/.openhands-state \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.34 \
     python -m openhands.core.main -t "write a bash script that prints hi"
 ```
 

docs/i18n/ja/docusaurus-plugin-content-docs/current/usage/runtimes/docker.md

@@ -25,7 +25,7 @@ nikolaik の `SANDBOX_RUNTIME_CONTAINER_IMAGE` は、ランタイムサーバー
 
     ```bash
     docker run # ...
-        -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+        -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
         -e SANDBOX_USER_ID=$(id -u) \
         -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
         -v $WORKSPACE_BASE:/opt/workspace_base \
@@ -82,5 +82,5 @@ docker network create openhands-network
 # 分離されたネットワークで OpenHands を実行
 docker run # ... \
     --network openhands-network \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33
+    docker.all-hands.dev/all-hands-ai/openhands:0.34
 ```

docs/i18n/pt-BR/docusaurus-plugin-content-docs/current/usage/how-to/cli-mode.md

@@ -35,7 +35,7 @@ Para executar o OpenHands no modo CLI com Docker:
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -45,7 +45,7 @@ docker run -it \
     -v ~/.openhands-state:/.openhands-state \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.34 \
     python -m openhands.core.cli
 ```
 

docs/i18n/pt-BR/docusaurus-plugin-content-docs/current/usage/how-to/headless-mode.md

@@ -32,7 +32,7 @@ Para executar o OpenHands no modo Headless com Docker:
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -43,7 +43,7 @@ docker run -it \
     -v ~/.openhands-state:/.openhands-state \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.34 \
     python -m openhands.core.main -t "escreva um script bash que imprima oi"
 ```
 

docs/i18n/pt-BR/docusaurus-plugin-content-docs/current/usage/installation.mdx

@@ -58,17 +58,17 @@
 A maneira mais fácil de executar o OpenHands é no Docker.
 
 ```bash
-docker pull docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik
+docker pull docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik
 
 docker run -it --rm --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e LOG_ALL_EVENTS=true \
     -v /var/run/docker.sock:/var/run/docker.sock \
     -v ~/.openhands-state:/.openhands-state \
     -p 3000:3000 \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33
+    docker.all-hands.dev/all-hands-ai/openhands:0.34
 ```
 
 Você encontrará o OpenHands em execução em http://localhost:3000!

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/knowledge/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge).
+[`microagents/`](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/knowledge/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge/).
+diretório [`microagents/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/).
 
 ### 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/knowledge/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge/).
+diretório [`microagents/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/).
 
 ### 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/knowledge/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/knowledge/)
+Crie um novo arquivo markdown em [`microagents/`](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/)
 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/i18n/pt-BR/docusaurus-plugin-content-docs/current/usage/runtimes.md

@@ -13,7 +13,7 @@ Este é o Runtime padrão que é usado quando você inicia o OpenHands. Você po
 
 ```
 docker run # ...
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -v /var/run/docker.sock:/var/run/docker.sock \
     # ...
 ```

docs/i18n/zh-Hans/docusaurus-plugin-content-docs/current/usage/how-to/cli-mode.md

@@ -50,7 +50,7 @@ LLM_API_KEY="sk_test_12345"
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -59,7 +59,7 @@ docker run -it \
     -v /var/run/docker.sock:/var/run/docker.sock \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.34 \
     python -m openhands.core.cli
 ```
 

docs/i18n/zh-Hans/docusaurus-plugin-content-docs/current/usage/how-to/headless-mode.md

@@ -47,7 +47,7 @@ LLM_API_KEY="sk_test_12345"
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -57,6 +57,6 @@ docker run -it \
     -v /var/run/docker.sock:/var/run/docker.sock \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.34 \
     python -m openhands.core.main -t "write a bash script that prints hi" --no-auto-continue
 ```

docs/i18n/zh-Hans/docusaurus-plugin-content-docs/current/usage/installation.mdx

@@ -11,16 +11,16 @@
 在 Docker 中运行 OpenHands 是最简单的方式。
 
 ```bash
-docker pull docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik
+docker pull docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik
 
 docker run -it --rm --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e LOG_ALL_EVENTS=true \
     -v /var/run/docker.sock:/var/run/docker.sock \
     -p 3000:3000 \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33
+    docker.all-hands.dev/all-hands-ai/openhands:0.34
 ```
 
 你也可以在可脚本化的[无头模式](https://docs.all-hands.dev/modules/usage/how-to/headless-mode)下运行 OpenHands，作为[交互式 CLI](https://docs.all-hands.dev/modules/usage/how-to/cli-mode)，或使用 [OpenHands GitHub Action](https://docs.all-hands.dev/modules/usage/how-to/github-action)。

docs/i18n/zh-Hans/docusaurus-plugin-content-docs/current/usage/runtimes.md

@@ -11,7 +11,7 @@
 
 ```
 docker run # ...
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -v /var/run/docker.sock:/var/run/docker.sock \
     # ...
 ```

docs/modules/usage/cloud/openhands-cloud.mdx

@@ -8,18 +8,22 @@ OpenHands Cloud can be accessed at https://app.all-hands.dev/.
 
 ## Getting Started
 
-After visiting OpenHands Cloud, you will be asked to connect with your GitHub account:
-1. After reading and accepting the terms of service, click `Connect to GitHub`.
+After visiting OpenHands Cloud, you will be asked to connect with your GitHub or GitLab account:
+
+1. After reading and accepting the terms of service, click `Log in with GitHub` or `Log in with GitLab`.
 2. Review the permissions requested by OpenHands and then click `Authorize OpenHands AI`.
-   - OpenHands will require some permissions from your GitHub account. To read more about these permissions,
-     you can click the `Learn more` link on the GitHub authorize page.
+   - OpenHands will require some permissions from your GitHub or GitLab account. To read more about these permissions:
+     - GitHub: You can click the `Learn more` link on the GitHub authorize page.
+     - GitLab: You can expand each permission request on the GitLab authorize page.
 
 ## Repository Access
 
-### Adding Repository Access
+### GitHub
+
+#### Adding Repository Access
 
 You can grant OpenHands specific repository access:
-1. Click the `Select a Git project` dropdown, select `Add more repositories...`.
+1. Click `Add GitHub repos` on the Home page.
 2. Select the organization, then choose the specific repositories to grant OpenHands access to.
    <details>
      <summary>Permission Details for Repository Access</summary>
@@ -42,11 +46,15 @@ You can grant OpenHands specific repository access:
 
 3. Click on `Install & Authorize`.
 
-### Modifying Repository Access
+#### Modifying Repository Access
 
-You can modify repository access at any time by:
-* Using the same `Select a Git project > Add more repositories` workflow, or
-* Visiting the Settings page and selecting `Configure GitHub Repositories` under the `GitHub Settings` section.
+You can modify GitHub repository access at any time by:
+* Using the same `Add GitHub repos` workflow, or
+* Visiting the Settings page and selecting `Configure GitHub Repositories` under the `Git Settings` section.
+
+### GitLab
+
+When using your GitLab account, OpenHands will automatically have access to your repositories.
 
 ## Conversation Persistence
 

docs/modules/usage/customization/repository.md

@@ -1,18 +1,17 @@
 # Repository Customization
 
-You can customize how OpenHands works with your repository by creating a
+You can customize how OpenHands interacts with your repository by creating a
 `.openhands` directory at the root level.
 
 ## Microagents
-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.
+
+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.
 
 
 ## Setup Script
-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.
+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.
 
 For example:
 ```bash

docs/modules/usage/how-to/cli-mode.md

@@ -35,7 +35,7 @@ To run OpenHands in CLI mode with Docker:
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -45,7 +45,7 @@ docker run -it \
     -v ~/.openhands-state:/.openhands-state \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.34 \
     python -m openhands.core.cli
 ```
 

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

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

docs/modules/usage/how-to/headless-mode.md

@@ -32,7 +32,7 @@ To run OpenHands in Headless mode with Docker:
 ```bash
 docker run -it \
     --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e SANDBOX_USER_ID=$(id -u) \
     -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
     -e LLM_API_KEY=$LLM_API_KEY \
@@ -43,7 +43,7 @@ docker run -it \
     -v ~/.openhands-state:/.openhands-state \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app-$(date +%Y%m%d%H%M%S) \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33 \
+    docker.all-hands.dev/all-hands-ai/openhands:0.34 \
     python -m openhands.core.main -t "write a bash script that prints hi"
 ```
 

docs/modules/usage/installation.mdx

@@ -58,17 +58,17 @@ A system with a modern processor and a minimum of **4GB RAM** is recommended to
 The easiest way to run OpenHands is in Docker.
 
 ```bash
-docker pull docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik
+docker pull docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik
 
 docker run -it --rm --pull=always \
-    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.33-nikolaik \
+    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.34-nikolaik \
     -e LOG_ALL_EVENTS=true \
     -v /var/run/docker.sock:/var/run/docker.sock \
     -v ~/.openhands-state:/.openhands-state \
     -p 3000:3000 \
     --add-host host.docker.internal:host-gateway \
     --name openhands-app \
-    docker.all-hands.dev/all-hands-ai/openhands:0.33
+    docker.all-hands.dev/all-hands-ai/openhands:0.34
 ```
 
 You'll find OpenHands running at http://localhost:3000!

docs/modules/usage/key-features.md

@@ -6,6 +6,9 @@
 - Displays the conversation between the user and OpenHands.
 - OpenHands explains its actions in this panel.
 
+### Changes
+- Shows the file changes performed by OpenHands.
+
 ### Workspace
 - Browse project files and directories.
 - Use the `Open in VS Code` option to:
@@ -20,7 +23,7 @@
 - Particularly handy when using OpenHands to perform data visualization tasks.
 
 ### App
-- Shows the web server when OpenHands runs an application.
+- Displays the web server when OpenHands runs an application.
 - Users can interact with the running application.
 
 ### Browser

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

@@ -0,0 +1,49 @@
+# 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,31 +1,40 @@
 # Microagents Overview
 
-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.
+Microagents are specialized prompts that enhance OpenHands with domain-specific knowledge.
+They provide expert guidance, automate common tasks, and ensure consistent practices across projects.
 
-## Microagent Categories
+## Microagent Types
 
-Currently OpenHands supports two categories of microagents:
+Currently OpenHands supports the following types of microagents:
 
-- [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.
+- [General Repository Microagents](./microagents-repo): General guidelines for OpenHands about the repository.
+- [Keyword-Triggered Microagents](./microagents-keyword): Guidelines activated by specific keywords in prompts.
 
-A microagent is classified as repository-specific or public depending on its location:
+To customize OpenHands' behavior, create a .openhands/microagents/ directory in the root of your repository and
+add `<microagent_name>.md` files inside.
 
-- 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
+:::note
+Loaded microagents take up space in the context window.
+These microagents, alongside user messages, inform OpenHands about the task and the environment.
+:::
 
-When OpenHands works with a repository, it:
+Example repository structure:
 
-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
+```
+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
+```
 
-You can check out the existing public microagents at the [official OpenHands repository](https://github.com/All-Hands-AI/OpenHands/tree/main/microagents/).
+## Microagents Frontmatter Requirements
 
-## Microagent Format
+Each microagent file may include frontmatter that provides additional information. In some cases, this frontmatter
+is 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.
+| Microagent Type                  | Frontmatter Requirement                               |
+|----------------------------------|-------------------------------------------------------|
+| `General Repository Microagents` | Required only if more than one of this type exists.   |
+| `Keyword-Triggered Microagents`  | Required.                                             |

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

@@ -1,35 +1,16 @@
-# Public Microagents
+# Global Microagents
 
 ## Overview
 
-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.
+Global microagents are [keyword-triggered microagents](./microagents-keyword) that apply to all OpenHands users.
 
-Public microagents come in two types:
+## Contributing a Global Microagent
 
-- **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.
+You can create global 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.
 
-### Public Microagents Best Practices
+### Global Microagents Best Practices
 
 - **Clear Scope**: Keep the microagent focused on a specific domain or task.
 - **Explicit Instructions**: Provide clear, unambiguous guidelines.
@@ -37,11 +18,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 Public Microagent
+### Steps to Contribute a Global Microagent
 
-#### 1. Plan the Public Microagent
+#### 1. Plan the Global Microagent
 
-Before creating a public microagent, consider:
+Before creating a global microagent, consider:
 
 - What specific problem or use case will it address?
 - What unique capabilities or knowledge should it have?
@@ -51,23 +32,19 @@ Before creating a public 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)
 
-- [`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
+#### 3. Testing the Global Microagent
 
-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
+- 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,117 +1,38 @@
-# Repository-specific Microagents
+# General Repository Microagents
 
-## Overview
+## Purpose
 
-OpenHands can be customized to work more effectively with specific repositories by providing repository-specific context and guidelines.
+General guidelines for OpenHands to work more effectively with the repository.
 
-This section explains how to optimize OpenHands for your project.
+## Microagent File
 
-## Creating Repository Microagents
+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.
 
-You can customize OpenHands' behavior for your repository by creating a `.openhands/microagents/` directory in your repository's root.
+## Frontmatter Syntax
 
-You can enhance OpenHands' performance by adding custom microagents to your repository:
+The frontmatter for this type of microagent is optional, unless you plan to include more than one general
+repository microagent.
 
-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/`
+Frontmatter should be enclosed in triple dashes (---) and may include the following fields:
 
-Check out the [best practices](./microagents-syntax.md#markdown-content-best-practices) for formatting the content of your custom microagent.
+| 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' |
 
-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:
+## Example
 
 ```
-your-repository/
-└── .openhands/
-    └── microagents/
-        └── repo.md    # Repository-specific instructions
+---
+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`.
 ```
 
-[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)
+[See more examples of general repository microagents here.](https://github.com/All-Hands-AI/OpenHands/tree/main/.openhands/microagents)

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

@@ -1,128 +0,0 @@
-# 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/package-lock.json

@@ -24,6 +24,8 @@
         "@docusaurus/module-type-aliases": "^3.5.1",
         "@docusaurus/tsconfig": "^3.7.0",
         "@docusaurus/types": "^3.5.1",
+        "swagger-cli": "^4.0.4",
+        "swagger-ui-dist": "^5.21.0",
         "typescript": "~5.8.3"
       },
       "engines": {
@@ -273,6 +275,273 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@apidevtools/openapi-schemas": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@apidevtools/openapi-schemas/-/openapi-schemas-2.1.0.tgz",
+      "integrity": "sha512-Zc1AlqrJlX3SlpupFGpiLi2EbteyP7fXmUOGup6/DnkRgjP9bgMM/ag+n91rsv0U1Gpz0H3VILA/o3bW7Ua6BQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@apidevtools/swagger-cli/-/swagger-cli-4.0.4.tgz",
+      "integrity": "sha512-hdDT3B6GLVovCsRZYDi3+wMcB1HfetTU20l2DC8zD3iFRNMC6QNAZG5fo/6PYeHWBEv7ri4MvnlKodhNB0nt7g==",
+      "deprecated": "This package has been abandoned. Please switch to using the actively maintained @redocly/cli",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@apidevtools/swagger-parser": "^10.0.1",
+        "chalk": "^4.1.0",
+        "js-yaml": "^3.14.0",
+        "yargs": "^15.4.1"
+      },
+      "bin": {
+        "swagger-cli": "bin/swagger-cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@apidevtools/swagger-cli/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@apidevtools/swagger-methods": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@apidevtools/swagger-methods/-/swagger-methods-3.0.2.tgz",
+      "integrity": "sha512-QAkD5kK2b1WfjDS/UQn/qQkbwF31uqRjPTrsCs5ZG9BQGAkjwvqGFjjPqAuzac/IYzpPtRzjCP1WrTuAIjMrXg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@apidevtools/swagger-parser": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@apidevtools/swagger-parser/-/swagger-parser-10.1.1.tgz",
+      "integrity": "sha512-u/kozRnsPO/x8QtKYJOqoGtC4kH6yg1lfYkB9Au0WhYB0FNLpyFusttQtvhlwjtG3rOwiRz4D8DnnXa8iEpIKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@apidevtools/json-schema-ref-parser": "11.7.2",
+        "@apidevtools/openapi-schemas": "^2.1.0",
+        "@apidevtools/swagger-methods": "^3.0.2",
+        "@jsdevtools/ono": "^7.1.3",
+        "ajv": "^8.17.1",
+        "ajv-draft-04": "^1.0.0",
+        "call-me-maybe": "^1.0.2"
+      },
+      "peerDependencies": {
+        "openapi-types": ">=7"
+      }
+    },
+    "node_modules/@apidevtools/swagger-parser/node_modules/@apidevtools/json-schema-ref-parser": {
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-11.7.2.tgz",
+      "integrity": "sha512-4gY54eEGEstClvEkGnwVkTkrx0sqwemEFG5OSRRn3tD91XH0+Q8XIkYIfo7IwEWPpJZwILb9GUXeShtplRc/eA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jsdevtools/ono": "^7.1.3",
+        "@types/json-schema": "^7.0.15",
+        "js-yaml": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/philsturgeon"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
@@ -3835,6 +4104,13 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@jsdevtools/ono": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
+      "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -3970,6 +4246,14 @@
       "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
       "license": "MIT"
     },
+    "node_modules/@scarf/scarf": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.4.0.tgz",
+      "integrity": "sha512-xxeapPiUXdZAE3che6f3xogoJPeZgig6omHEy1rIY5WVsB3H2BHNnZH+gHG6x91SCWyQCzWGsuL2Hh3ClO5/qQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -4967,6 +5251,21 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ajv-draft-04": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ajv-draft-04/-/ajv-draft-04-1.0.0.tgz",
+      "integrity": "sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^8.5.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ajv-formats": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
@@ -5549,6 +5848,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/call-me-maybe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
+      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -7192,6 +7498,16 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decode-named-character-reference": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
@@ -8600,6 +8916,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz",
@@ -13110,15 +13436,16 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -13427,6 +13754,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/openapi-types": {
+      "version": "12.1.3",
+      "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-12.1.3.tgz",
+      "integrity": "sha512-N4YtSYJqghVu4iek2ZUvcN/0aqH1kRDuNqzcycDxhOUpg7GdvLa2F3DgS6yBNhInhv2r/6I0Flkn7CqL8+nIcw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/opener": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
@@ -13809,9 +14144,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "funding": [
         {
           "type": "opencollective",
@@ -13826,10 +14161,11 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -15367,6 +15703,15 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pupa": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/pupa/-/pupa-3.1.0.tgz",
@@ -16205,6 +16550,16 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -16222,6 +16577,13 @@
         "node": "*"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -16702,6 +17064,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -16980,9 +17349,10 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -17347,6 +17717,32 @@
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
     },
+    "node_modules/swagger-cli": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/swagger-cli/-/swagger-cli-4.0.4.tgz",
+      "integrity": "sha512-Cp8YYuLny3RJFQ4CvOBTaqmOOgYsem52dPx1xM5S4EUWFblIh2Q8atppMZvXKUr1e9xH5RwipYpmdUzdPcxWcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@apidevtools/swagger-cli": "4.0.4"
+      },
+      "bin": {
+        "swagger-cli": "swagger-cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/swagger-ui-dist": {
+      "version": "5.21.0",
+      "resolved": "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-5.21.0.tgz",
+      "integrity": "sha512-E0K3AB6HvQd8yQNSMR7eE5bk+323AUxjtCz/4ZNKiahOlPhPJxqn3UPIGs00cyY/dhrTDJ61L7C/a8u6zhGrZg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@scarf/scarf": "=1.4.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -17949,14 +18345,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/uri-js/node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/url-loader": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
@@ -18610,6 +18998,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/widest-line": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz",

docs/package.json

@@ -4,16 +4,18 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "docusaurus start",
-    "build": "docusaurus build",
+    "start": "node generate-swagger-ui.js && docusaurus start",
+    "build": "node generate-swagger-ui.js && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "generate-swagger-ui": "node generate-swagger-ui.js"
   },
+  "// Note": "The OpenAPI spec is stored in docs/static/openapi.json so it's accessible at /openapi.json in the deployed site",
   "dependencies": {
     "@docusaurus/core": "^3.7.0",
     "@docusaurus/plugin-content-pages": "^3.7.0",
@@ -31,6 +33,8 @@
     "@docusaurus/module-type-aliases": "^3.5.1",
     "@docusaurus/tsconfig": "^3.7.0",
     "@docusaurus/types": "^3.5.1",
+    "swagger-cli": "^4.0.4",
+    "swagger-ui-dist": "^5.21.0",
     "typescript": "~5.8.3"
   },
   "browserslist": {
@@ -47,5 +51,6 @@
   },
   "engines": {
     "node": ">=18.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

docs/sidebars.ts

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

docs/static/README.md

@@ -0,0 +1,15 @@
+# Static Files for OpenHands Documentation
+
+This directory contains static files that are copied directly to the build output of the Docusaurus documentation.
+
+## OpenAPI Specification
+
+The `openapi.json` file in this directory is the OpenAPI specification for the OpenHands API. It is copied to the build output and is accessible at `/openapi.json` in the deployed site.
+
+This file is used by the Swagger UI interface, which is accessible at `/swagger-ui/` in the deployed site.
+
+## Why is the OpenAPI spec in the static directory?
+
+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.

docs/static/openapi.json

@@ -1646,6 +1646,32 @@
         }
       }
     },
+    "/api/reset-settings": {
+      "post": {
+        "summary": "Reset settings (Deprecated)",
+        "description": "This endpoint is deprecated and will return a 410 Gone error. Reset functionality has been removed.",
+        "operationId": "resetSettings",
+        "deprecated": true,
+        "responses": {
+          "410": {
+            "description": "Feature removed",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "error": {
+                      "type": "string",
+                      "example": "Reset settings functionality has been removed."
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/api/unset-settings-tokens": {
       "post": {
         "summary": "Unset settings tokens",
@@ -1685,45 +1711,6 @@
         }
       }
     },
-    "/api/reset-settings": {
-      "post": {
-        "summary": "Reset settings",
-        "description": "Reset user settings to defaults",
-        "operationId": "resetSettings",
-        "responses": {
-          "200": {
-            "description": "Settings reset successfully",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {
-                    "message": {
-                      "type": "string"
-                    }
-                  }
-                }
-              }
-            }
-          },
-          "500": {
-            "description": "Error resetting settings",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {
-                    "error": {
-                      "type": "string"
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    },
     "/api/options/models": {
       "get": {
         "summary": "Get models",
@@ -2095,4 +2082,4 @@
       "bearerAuth": []
     }
   ]
-}
+}

frontend/.husky/pre-commit

@@ -1,3 +1,10 @@
+# Run frontend checks
+echo "Running frontend checks..."
 cd frontend
 npm run check-unlocalized-strings
 npx lint-staged
+
+# Run backend pre-commit
+echo "Running backend pre-commit..."
+cd ..
+pre-commit run --files openhands/**/* evaluation/**/* tests/**/* --show-diff-on-failure --config ./dev_config/python/.pre-commit-config.yaml

frontend/__tests__/components/chat/chat-interface.test.tsx

@@ -45,7 +45,7 @@ describe("Empty state", () => {
   it("should render suggestions if empty", () => {
     const { store } = renderWithProviders(<ChatInterface />, {
       preloadedState: {
-        chat: { 
+        chat: {
           messages: [],
           systemMessage: {
             content: "",
@@ -76,7 +76,7 @@ describe("Empty state", () => {
   it("should render the default suggestions", () => {
     renderWithProviders(<ChatInterface />, {
       preloadedState: {
-        chat: { 
+        chat: {
           messages: [],
           systemMessage: {
             content: "",
@@ -114,7 +114,7 @@ describe("Empty state", () => {
       const user = userEvent.setup();
       const { store } = renderWithProviders(<ChatInterface />, {
         preloadedState: {
-          chat: { 
+          chat: {
             messages: [],
             systemMessage: {
               content: "",
@@ -151,7 +151,7 @@ describe("Empty state", () => {
       const user = userEvent.setup();
       const { rerender } = renderWithProviders(<ChatInterface />, {
         preloadedState: {
-          chat: { 
+          chat: {
             messages: [],
             systemMessage: {
               content: "",

frontend/__tests__/components/chat/expandable-message.test.tsx

@@ -95,6 +95,23 @@ describe("ExpandableMessage", () => {
     expect(screen.queryByTestId("status-icon")).not.toBeInTheDocument();
   });
 
+  it("should render with neutral border and no icon for action messages with undefined success (timeout case)", () => {
+    renderWithProviders(
+      <ExpandableMessage
+        id="OBSERVATION_MESSAGE$RUN"
+        message="Command timed out"
+        type="action"
+        success={undefined}
+      />,
+    );
+    const element = screen.getByText("OBSERVATION_MESSAGE$RUN");
+    const container = element.closest(
+      "div.flex.gap-2.items-center.justify-start",
+    );
+    expect(container).toHaveClass("border-neutral-300");
+    expect(screen.queryByTestId("status-icon")).not.toBeInTheDocument();
+  });
+
   it("should render the out of credits message when the user is out of credits", async () => {
     const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
     // @ts-expect-error - We only care about the APP_MODE and FEATURE_FLAGS fields

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

@@ -0,0 +1,72 @@
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { createRoutesStub } from "react-router";
+import { setupStore } from "test-utils";
+import { describe, expect, it, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { AuthProvider } from "#/context/auth-context";
+import { HomeHeader } from "#/components/features/home/home-header";
+import OpenHands from "#/api/open-hands";
+
+const renderHomeHeader = () => {
+  const RouterStub = createRoutesStub([
+    {
+      Component: HomeHeader,
+      path: "/",
+    },
+    {
+      Component: () => <div data-testid="conversation-screen" />,
+      path: "/conversations/:conversationId",
+    },
+  ]);
+
+  return render(<RouterStub />, {
+    wrapper: ({ children }) => (
+      <Provider store={setupStore()}>
+        <AuthProvider initialProvidersAreSet>
+          <QueryClientProvider client={new QueryClient()}>
+            {children}
+          </QueryClientProvider>
+        </AuthProvider>
+      </Provider>
+    ),
+  });
+};
+
+describe("HomeHeader", () => {
+  it("should create an empty conversation and redirect when pressing the launch from scratch button", async () => {
+    const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+
+    renderHomeHeader();
+
+    const launchButton = screen.getByRole("button", {
+      name: /launch from scratch/i,
+    });
+    await userEvent.click(launchButton);
+
+    expect(createConversationSpy).toHaveBeenCalledExactlyOnceWith(
+      "gui",
+      undefined,
+      undefined,
+      [],
+      undefined,
+      undefined,
+    );
+
+    // expect to be redirected to /conversations/:conversationId
+    await screen.findByTestId("conversation-screen");
+  });
+
+  it("should change the launch button text to 'Loading...' when creating a conversation", async () => {
+    renderHomeHeader();
+
+    const launchButton = screen.getByRole("button", {
+      name: /launch from scratch/i,
+    });
+    await userEvent.click(launchButton);
+
+    expect(launchButton).toHaveTextContent(/Loading/i);
+    expect(launchButton).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,231 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { setupStore } from "test-utils";
+import { Provider } from "react-redux";
+import { createRoutesStub } from "react-router";
+import OpenHands from "#/api/open-hands";
+import { AuthProvider } from "#/context/auth-context";
+import { GitRepository } from "#/types/git";
+import * as GitService from "#/api/git";
+import { RepoConnector } from "#/components/features/home/repo-connector";
+
+const renderRepoConnector = (initialProvidersAreSet = true) => {
+  const mockRepoSelection = vi.fn();
+  const RouterStub = createRoutesStub([
+    {
+      Component: () => <RepoConnector onRepoSelection={mockRepoSelection} />,
+      path: "/",
+    },
+    {
+      Component: () => <div data-testid="conversation-screen" />,
+      path: "/conversations/:conversationId",
+    },
+    {
+      Component: () => <div data-testid="settings-screen" />,
+      path: "/settings",
+    },
+  ]);
+
+  return render(<RouterStub />, {
+    wrapper: ({ children }) => (
+      <Provider store={setupStore()}>
+        <AuthProvider initialProvidersAreSet={initialProvidersAreSet}>
+          <QueryClientProvider client={new QueryClient()}>
+            {children}
+          </QueryClientProvider>
+        </AuthProvider>
+      </Provider>
+    ),
+  });
+};
+
+const MOCK_RESPOSITORIES: GitRepository[] = [
+  {
+    id: 1,
+    full_name: "rbren/polaris",
+    git_provider: "github",
+    is_public: true,
+  },
+  {
+    id: 2,
+    full_name: "All-Hands-AI/OpenHands",
+    git_provider: "github",
+    is_public: true,
+  },
+];
+
+describe("RepoConnector", () => {
+  it("should render the repository connector section", () => {
+    renderRepoConnector();
+    screen.getByTestId("repo-connector");
+  });
+
+  it("should render the available repositories in the dropdown", async () => {
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      GitService,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue({
+      data: MOCK_RESPOSITORIES,
+      nextPage: null,
+    });
+
+    renderRepoConnector();
+
+    // Wait for the loading state to be replaced with the dropdown
+    const dropdown = await waitFor(() => screen.getByTestId("repo-dropdown"));
+    await userEvent.click(dropdown);
+
+    await waitFor(() => {
+      screen.getByText("rbren/polaris");
+      screen.getByText("All-Hands-AI/OpenHands");
+    });
+  });
+
+  it("should only enable the launch button if a repo is selected", async () => {
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      GitService,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue({
+      data: MOCK_RESPOSITORIES,
+      nextPage: null,
+    });
+
+    renderRepoConnector();
+
+    const launchButton = screen.getByTestId("repo-launch-button");
+    expect(launchButton).toBeDisabled();
+
+    // Wait for the loading state to be replaced with the dropdown
+    const dropdown = await waitFor(() => screen.getByTestId("repo-dropdown"));
+    await userEvent.click(dropdown);
+    await userEvent.click(screen.getByText("rbren/polaris"));
+
+    expect(launchButton).toBeEnabled();
+  });
+
+  it("should render the 'add git(hub|lab) repos' links if saas mode", async () => {
+    const getConfiSpy = vi.spyOn(OpenHands, "getConfig");
+    // @ts-expect-error - only return the APP_MODE
+    getConfiSpy.mockResolvedValue({
+      APP_MODE: "saas",
+    });
+
+    renderRepoConnector();
+
+    await screen.findByText("Add GitHub repos");
+  });
+
+  it("should not render the 'add git(hub|lab) repos' links if oss mode", async () => {
+    const getConfiSpy = vi.spyOn(OpenHands, "getConfig");
+    // @ts-expect-error - only return the APP_MODE
+    getConfiSpy.mockResolvedValue({
+      APP_MODE: "oss",
+    });
+
+    renderRepoConnector();
+
+    expect(screen.queryByText("Add GitHub repos")).not.toBeInTheDocument();
+    expect(screen.queryByText("Add GitLab repos")).not.toBeInTheDocument();
+  });
+
+  it("should create a conversation and redirect with the selected repo when pressing the launch button", async () => {
+    const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      GitService,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue({
+      data: MOCK_RESPOSITORIES,
+      nextPage: null,
+    });
+
+    renderRepoConnector();
+
+    const repoConnector = screen.getByTestId("repo-connector");
+    const launchButton =
+      within(repoConnector).getByTestId("repo-launch-button");
+    await userEvent.click(launchButton);
+
+    // repo not selected yet
+    expect(createConversationSpy).not.toHaveBeenCalled();
+
+    // select a repository from the dropdown
+    const dropdown = await waitFor(() =>
+      within(repoConnector).getByTestId("repo-dropdown"),
+    );
+    await userEvent.click(dropdown);
+
+    const repoOption = screen.getByText("rbren/polaris");
+    await userEvent.click(repoOption);
+    await userEvent.click(launchButton);
+
+    expect(createConversationSpy).toHaveBeenCalledExactlyOnceWith(
+      "gui",
+      {
+        full_name: "rbren/polaris",
+        git_provider: "github",
+        id: 1,
+        is_public: true,
+      },
+      undefined,
+      [],
+      undefined,
+      undefined,
+    );
+  });
+
+  it("should change the launch button text to 'Loading...' when creating a conversation", async () => {
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      GitService,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue({
+      data: MOCK_RESPOSITORIES,
+      nextPage: null,
+    });
+
+    renderRepoConnector();
+
+    const launchButton = screen.getByTestId("repo-launch-button");
+
+    // Wait for the loading state to be replaced with the dropdown
+    const dropdown = await waitFor(() => screen.getByTestId("repo-dropdown"));
+    await userEvent.click(dropdown);
+    await userEvent.click(screen.getByText("rbren/polaris"));
+
+    await userEvent.click(launchButton);
+    expect(launchButton).toBeDisabled();
+    expect(launchButton).toHaveTextContent(/Loading/i);
+  });
+
+  it("should not display a button to settings if the user is signed in with their git provider", async () => {
+    renderRepoConnector(true);
+    expect(
+      screen.queryByTestId("navigate-to-settings-button"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should display a button to settings if the user needs to sign in with their git provider", async () => {
+    renderRepoConnector(false);
+
+    const goToSettingsButton = await screen.findByTestId(
+      "navigate-to-settings-button",
+    );
+    const dropdown = screen.queryByTestId("repo-dropdown");
+    const launchButton = screen.queryByTestId("repo-launch-button");
+    const providerLinks = screen.queryAllByText(/add git(hub|lab) repos/i);
+
+    expect(dropdown).not.toBeInTheDocument();
+    expect(launchButton).not.toBeInTheDocument();
+    expect(providerLinks.length).toBe(0);
+
+    expect(goToSettingsButton).toBeInTheDocument();
+
+    await userEvent.click(goToSettingsButton);
+    await screen.findByTestId("settings-screen");
+  });
+});

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

@@ -0,0 +1,138 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import userEvent from "@testing-library/user-event";
+import { Provider } from "react-redux";
+import { createRoutesStub } from "react-router";
+import { setupStore } from "test-utils";
+import { SuggestedTask } from "#/components/features/home/tasks/task.types";
+import OpenHands from "#/api/open-hands";
+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";
+
+const MOCK_TASK_1: SuggestedTask = {
+  issue_number: 123,
+  repo: "repo1",
+  title: "Task 1",
+  task_type: "MERGE_CONFLICTS",
+  git_provider: "github",
+};
+
+const MOCK_TASK_2: SuggestedTask = {
+  issue_number: 456,
+  repo: "repo2",
+  title: "Task 2",
+  task_type: "FAILING_CHECKS",
+  git_provider: "github",
+};
+
+const MOCK_TASK_3: SuggestedTask = {
+  issue_number: 789,
+  repo: "repo3",
+  title: "Task 3",
+  task_type: "UNRESOLVED_COMMENTS",
+  git_provider: "gitlab",
+};
+
+const MOCK_TASK_4: SuggestedTask = {
+  issue_number: 101112,
+  repo: "repo4",
+  title: "Task 4",
+  task_type: "OPEN_ISSUE",
+  git_provider: "gitlab",
+};
+
+const MOCK_RESPOSITORIES: GitRepository[] = [
+  { id: 1, full_name: "repo1", git_provider: "github", is_public: true },
+  { id: 2, full_name: "repo2", git_provider: "github", is_public: true },
+  { id: 3, full_name: "repo3", git_provider: "gitlab", is_public: true },
+  { id: 4, full_name: "repo4", git_provider: "gitlab", is_public: true },
+];
+
+const renderTaskCard = (task = MOCK_TASK_1) => {
+  const RouterStub = createRoutesStub([
+    {
+      Component: () => <TaskCard task={task} />,
+      path: "/",
+    },
+    {
+      Component: () => <div data-testid="conversation-screen" />,
+      path: "/conversations/:conversationId",
+    },
+  ]);
+
+  return render(<RouterStub />, {
+    wrapper: ({ children }) => (
+      <Provider store={setupStore()}>
+        <AuthProvider initialProvidersAreSet>
+          <QueryClientProvider client={new QueryClient()}>
+            {children}
+          </QueryClientProvider>
+        </AuthProvider>
+      </Provider>
+    ),
+  });
+};
+
+describe("TaskCard", () => {
+  it("format the issue id", async () => {
+    renderTaskCard();
+
+    const taskId = screen.getByTestId("task-id");
+    expect(taskId).toHaveTextContent(/#123/i);
+  });
+
+  it("should call createConversation when clicking the launch button", async () => {
+    const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+
+    renderTaskCard();
+
+    const launchButton = screen.getByTestId("task-launch-button");
+    await userEvent.click(launchButton);
+
+    expect(createConversationSpy).toHaveBeenCalled();
+  });
+
+  describe("creating suggested task conversation", () => {
+    beforeEach(() => {
+      const retrieveUserGitRepositoriesSpy = vi.spyOn(
+        GitService,
+        "retrieveUserGitRepositories",
+      );
+      retrieveUserGitRepositoriesSpy.mockResolvedValue({
+        data: MOCK_RESPOSITORIES,
+        nextPage: null,
+      });
+    });
+
+    it("should call create conversation with suggest task trigger and selected suggested task", async () => {
+      const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+
+      renderTaskCard(MOCK_TASK_1);
+
+      const launchButton = screen.getByTestId("task-launch-button");
+      await userEvent.click(launchButton);
+
+      expect(createConversationSpy).toHaveBeenCalledWith(
+        "suggested_task",
+        MOCK_RESPOSITORIES[0],
+        undefined,
+        [],
+        undefined,
+        MOCK_TASK_1,
+      );
+    });
+  });
+
+  it("should disable the launch button and update text content when creating a conversation", async () => {
+    renderTaskCard();
+
+    const launchButton = screen.getByTestId("task-launch-button");
+    await userEvent.click(launchButton);
+
+    expect(launchButton).toHaveTextContent(/Loading/i);
+    expect(launchButton).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,113 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Provider } from "react-redux";
+import { createRoutesStub } from "react-router";
+import { setupStore } from "test-utils";
+import userEvent from "@testing-library/user-event";
+import { TaskSuggestions } from "#/components/features/home/tasks/task-suggestions";
+import { SuggestionsService } from "#/api/suggestions-service/suggestions-service.api";
+import { MOCK_TASKS } from "#/mocks/task-suggestions-handlers";
+import { AuthProvider } from "#/context/auth-context";
+
+const renderTaskSuggestions = (initialProvidersAreSet = true) => {
+  const RouterStub = createRoutesStub([
+    {
+      Component: TaskSuggestions,
+      path: "/",
+    },
+    {
+      Component: () => <div data-testid="conversation-screen" />,
+      path: "/conversations/:conversationId",
+    },
+    {
+      Component: () => <div data-testid="settings-screen" />,
+      path: "/settings",
+    },
+  ]);
+
+  return render(<RouterStub />, {
+    wrapper: ({ children }) => (
+      <Provider store={setupStore()}>
+        <AuthProvider initialProvidersAreSet={initialProvidersAreSet}>
+          <QueryClientProvider client={new QueryClient()}>
+            {children}
+          </QueryClientProvider>
+        </AuthProvider>
+      </Provider>
+    ),
+  });
+};
+
+describe("TaskSuggestions", () => {
+  const getSuggestedTasksSpy = vi.spyOn(
+    SuggestionsService,
+    "getSuggestedTasks",
+  );
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render the task suggestions section", () => {
+    renderTaskSuggestions();
+    screen.getByTestId("task-suggestions");
+  });
+
+  it("should render an empty message if there are no tasks", async () => {
+    getSuggestedTasksSpy.mockResolvedValue([]);
+    renderTaskSuggestions();
+    await screen.findByText(/No tasks available/i);
+  });
+
+  it("should render the task groups with the correct titles", async () => {
+    getSuggestedTasksSpy.mockResolvedValue(MOCK_TASKS);
+    renderTaskSuggestions();
+
+    await waitFor(() => {
+      MOCK_TASKS.forEach((taskGroup) => {
+        screen.getByText(taskGroup.title);
+      });
+    });
+  });
+
+  it("should render the task cards with the correct task details", async () => {
+    getSuggestedTasksSpy.mockResolvedValue(MOCK_TASKS);
+    renderTaskSuggestions();
+
+    await waitFor(() => {
+      MOCK_TASKS.forEach((task) => {
+        screen.getByText(task.title);
+      });
+    });
+  });
+
+  it("should render skeletons when loading", async () => {
+    getSuggestedTasksSpy.mockResolvedValue(MOCK_TASKS);
+    renderTaskSuggestions();
+
+    const skeletons = screen.getAllByTestId("task-group-skeleton");
+    expect(skeletons.length).toBeGreaterThan(0);
+
+    await waitFor(() => {
+      MOCK_TASKS.forEach((taskGroup) => {
+        screen.getByText(taskGroup.title);
+      });
+    });
+
+    expect(screen.queryByTestId("task-group-skeleton")).not.toBeInTheDocument();
+  });
+
+  it("should display a button to settings if the user needs to sign in with their git provider", async () => {
+    renderTaskSuggestions(false);
+
+    expect(getSuggestedTasksSpy).not.toHaveBeenCalled();
+    const goToSettingsButton = await screen.findByTestId(
+      "navigate-to-settings-button",
+    );
+    expect(goToSettingsButton).toBeInTheDocument();
+
+    await userEvent.click(goToSettingsButton);
+    await screen.findByTestId("settings-screen");
+  });
+});

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

@@ -1,28 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -0,0 +1,291 @@
+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

@@ -0,0 +1,461 @@
+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

@@ -0,0 +1,377 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import userEvent from "@testing-library/user-event";
+import { createRoutesStub } from "react-router";
+import { Provider } from "react-redux";
+import { setupStore } from "test-utils";
+import { AxiosError } from "axios";
+import HomeScreen from "#/routes/home";
+import { AuthProvider } from "#/context/auth-context";
+import * as GitService from "#/api/git";
+import { GitRepository } from "#/types/git";
+import OpenHands from "#/api/open-hands";
+import MainApp from "#/routes/root-layout";
+
+const createAxiosNotFoundErrorObject = () =>
+  new AxiosError(
+    "Request failed with status code 404",
+    "ERR_BAD_REQUEST",
+    undefined,
+    undefined,
+    {
+      status: 404,
+      statusText: "Not Found",
+      data: { message: "Settings not found" },
+      headers: {},
+      // @ts-expect-error - we only need the response object for this test
+      config: {},
+    },
+  );
+
+const RouterStub = createRoutesStub([
+  {
+    Component: MainApp,
+    path: "/",
+    children: [
+      {
+        Component: HomeScreen,
+        path: "/",
+      },
+      {
+        Component: () => <div data-testid="conversation-screen" />,
+        path: "/conversations/:conversationId",
+      },
+      {
+        Component: () => <div data-testid="settings-screen" />,
+        path: "/settings",
+      },
+    ],
+  },
+]);
+
+const renderHomeScreen = (initialProvidersAreSet = true) =>
+  render(<RouterStub />, {
+    wrapper: ({ children }) => (
+      <Provider store={setupStore()}>
+        <AuthProvider initialProvidersAreSet={initialProvidersAreSet}>
+          <QueryClientProvider client={new QueryClient()}>
+            {children}
+          </QueryClientProvider>
+        </AuthProvider>
+      </Provider>
+    ),
+  });
+
+const MOCK_RESPOSITORIES: GitRepository[] = [
+  {
+    id: 1,
+    full_name: "octocat/hello-world",
+    git_provider: "github",
+    is_public: true,
+  },
+  {
+    id: 2,
+    full_name: "octocat/earth",
+    git_provider: "github",
+    is_public: true,
+  },
+];
+
+describe("HomeScreen", () => {
+  it("should render", () => {
+    renderHomeScreen();
+    screen.getByTestId("home-screen");
+  });
+
+  it("should render the repository connector and suggested tasks sections", async () => {
+    renderHomeScreen();
+
+    screen.getByTestId("repo-connector");
+    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,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue({
+      data: MOCK_RESPOSITORIES,
+      nextPage: null,
+    });
+
+    renderHomeScreen();
+
+    const taskSuggestions = screen.getByTestId("task-suggestions");
+
+    // Initially, all tasks should be visible
+    await waitFor(() => {
+      within(taskSuggestions).getByText("octocat/hello-world");
+      within(taskSuggestions).getByText("octocat/earth");
+    });
+
+    // Select a repository from the dropdown
+    const repoConnector = screen.getByTestId("repo-connector");
+
+    const dropdown = within(repoConnector).getByTestId("repo-dropdown");
+    await userEvent.click(dropdown);
+
+    const repoOption = screen.getAllByText("octocat/hello-world")[1];
+    await userEvent.click(repoOption);
+
+    // After selecting a repository, only tasks related to that repository should be visible
+    await waitFor(() => {
+      within(taskSuggestions).getByText("octocat/hello-world");
+      expect(
+        within(taskSuggestions).queryByText("octocat/earth"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it("should reset the filtered tasks when the selected repository is cleared", async () => {
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      GitService,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue({
+      data: MOCK_RESPOSITORIES,
+      nextPage: null,
+    });
+
+    renderHomeScreen();
+
+    const taskSuggestions = screen.getByTestId("task-suggestions");
+
+    // Initially, all tasks should be visible
+    await waitFor(() => {
+      within(taskSuggestions).getByText("octocat/hello-world");
+      within(taskSuggestions).getByText("octocat/earth");
+    });
+
+    // Select a repository from the dropdown
+    const repoConnector = screen.getByTestId("repo-connector");
+
+    const dropdown = within(repoConnector).getByTestId("repo-dropdown");
+    await userEvent.click(dropdown);
+
+    const repoOption = screen.getAllByText("octocat/hello-world")[1];
+    await userEvent.click(repoOption);
+
+    // After selecting a repository, only tasks related to that repository should be visible
+    await waitFor(() => {
+      within(taskSuggestions).getByText("octocat/hello-world");
+      expect(
+        within(taskSuggestions).queryByText("octocat/earth"),
+      ).not.toBeInTheDocument();
+    });
+
+    // Clear the selected repository
+    await userEvent.clear(dropdown);
+
+    // All tasks should be visible again
+    await waitFor(() => {
+      within(taskSuggestions).getByText("octocat/hello-world");
+      within(taskSuggestions).getByText("octocat/earth");
+    });
+  });
+
+  describe("launch buttons", () => {
+    const setupLaunchButtons = async () => {
+      let headerLaunchButton = screen.getByTestId("header-launch-button");
+      let repoLaunchButton = screen.getByTestId("repo-launch-button");
+      let tasksLaunchButtons =
+        await screen.findAllByTestId("task-launch-button");
+
+      // Select a repository from the dropdown to enable the repo launch button
+      const repoConnector = screen.getByTestId("repo-connector");
+      const dropdown = within(repoConnector).getByTestId("repo-dropdown");
+      await userEvent.click(dropdown);
+      const repoOption = screen.getAllByText("octocat/hello-world")[1];
+      await userEvent.click(repoOption);
+
+      expect(headerLaunchButton).not.toBeDisabled();
+      expect(repoLaunchButton).not.toBeDisabled();
+      tasksLaunchButtons.forEach((button) => {
+        expect(button).not.toBeDisabled();
+      });
+
+      headerLaunchButton = screen.getByTestId("header-launch-button");
+      repoLaunchButton = screen.getByTestId("repo-launch-button");
+      tasksLaunchButtons = await screen.findAllByTestId("task-launch-button");
+
+      return {
+        headerLaunchButton,
+        repoLaunchButton,
+        tasksLaunchButtons,
+      };
+    };
+
+    beforeEach(() => {
+      const retrieveUserGitRepositoriesSpy = vi.spyOn(
+        GitService,
+        "retrieveUserGitRepositories",
+      );
+      retrieveUserGitRepositoriesSpy.mockResolvedValue({
+        data: MOCK_RESPOSITORIES,
+        nextPage: null,
+      });
+    });
+
+    it("should disable the other launch buttons when the header launch button is clicked", async () => {
+      renderHomeScreen();
+      const { headerLaunchButton, repoLaunchButton } =
+        await setupLaunchButtons();
+
+      const tasksLaunchButtonsAfter =
+        await screen.findAllByTestId("task-launch-button");
+
+      // All other buttons should be disabled when the header button is clicked
+      await userEvent.click(headerLaunchButton);
+
+      expect(headerLaunchButton).toBeDisabled();
+      expect(repoLaunchButton).toBeDisabled();
+      tasksLaunchButtonsAfter.forEach((button) => {
+        expect(button).toBeDisabled();
+      });
+    });
+
+    it("should disable the other launch buttons when the repo launch button is clicked", async () => {
+      renderHomeScreen();
+      const { headerLaunchButton, repoLaunchButton } =
+        await setupLaunchButtons();
+
+      const tasksLaunchButtonsAfter =
+        await screen.findAllByTestId("task-launch-button");
+
+      // All other buttons should be disabled when the repo button is clicked
+      await userEvent.click(repoLaunchButton);
+
+      expect(headerLaunchButton).toBeDisabled();
+      expect(repoLaunchButton).toBeDisabled();
+      tasksLaunchButtonsAfter.forEach((button) => {
+        expect(button).toBeDisabled();
+      });
+    });
+
+    it("should disable the other launch buttons when any task launch button is clicked", async () => {
+      renderHomeScreen();
+      const { headerLaunchButton, repoLaunchButton, tasksLaunchButtons } =
+        await setupLaunchButtons();
+
+      const tasksLaunchButtonsAfter =
+        await screen.findAllByTestId("task-launch-button");
+
+      // All other buttons should be disabled when the task button is clicked
+      await userEvent.click(tasksLaunchButtons[0]);
+
+      expect(headerLaunchButton).toBeDisabled();
+      expect(repoLaunchButton).toBeDisabled();
+      tasksLaunchButtonsAfter.forEach((button) => {
+        expect(button).toBeDisabled();
+      });
+    });
+  });
+
+  it("should hide the suggested tasks section if not authed with git(hub|lab)", async () => {
+    renderHomeScreen(false);
+
+    const taskSuggestions = screen.queryByTestId("task-suggestions");
+    const repoConnector = screen.getByTestId("repo-connector");
+
+    expect(taskSuggestions).not.toBeInTheDocument();
+    expect(repoConnector).toBeInTheDocument();
+  });
+});
+
+describe("Settings 404", () => {
+  const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+  const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+
+  it("should open the settings modal if GET /settings fails with a 404", async () => {
+    const error = createAxiosNotFoundErrorObject();
+    getSettingsSpy.mockRejectedValue(error);
+
+    renderHomeScreen();
+
+    const settingsModal = await screen.findByTestId("ai-config-modal");
+    expect(settingsModal).toBeInTheDocument();
+  });
+
+  it("should navigate to the settings screen when clicking the advanced settings button", async () => {
+    const error = createAxiosNotFoundErrorObject();
+    getSettingsSpy.mockRejectedValue(error);
+
+    const user = userEvent.setup();
+    renderHomeScreen();
+
+    const settingsScreen = screen.queryByTestId("settings-screen");
+    expect(settingsScreen).not.toBeInTheDocument();
+
+    const settingsModal = await screen.findByTestId("ai-config-modal");
+    expect(settingsModal).toBeInTheDocument();
+
+    const advancedSettingsButton = await screen.findByTestId(
+      "advanced-settings-link",
+    );
+    await user.click(advancedSettingsButton);
+
+    const settingsScreenAfter = await screen.findByTestId("settings-screen");
+    expect(settingsScreenAfter).toBeInTheDocument();
+
+    const settingsModalAfter = screen.queryByTestId("ai-config-modal");
+    expect(settingsModalAfter).not.toBeInTheDocument();
+  });
+
+  it("should not open the settings modal if GET /settings fails but is SaaS mode", async () => {
+    // @ts-expect-error - we only need APP_MODE for this test
+    getConfigSpy.mockResolvedValue({
+      APP_MODE: "saas",
+      FEATURE_FLAGS: {
+        ENABLE_BILLING: false,
+        HIDE_LLM_SETTINGS: false,
+      },
+    });
+    const error = createAxiosNotFoundErrorObject();
+    getSettingsSpy.mockRejectedValue(error);
+
+    renderHomeScreen();
+
+    // small hack to wait for the modal to not appear
+    await expect(
+      screen.findByTestId("ai-config-modal", {}, { timeout: 1000 }),
+    ).rejects.toThrow();
+  });
+});
+
+describe("Setup Payment modal", () => {
+  const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+  const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+
+  it("should only render if SaaS mode and is new user", async () => {
+    // @ts-expect-error - we only need the APP_MODE for this test
+    getConfigSpy.mockResolvedValue({
+      APP_MODE: "saas",
+      FEATURE_FLAGS: {
+        ENABLE_BILLING: true,
+        HIDE_LLM_SETTINGS: false,
+      },
+    });
+    const error = createAxiosNotFoundErrorObject();
+    getSettingsSpy.mockRejectedValue(error);
+
+    renderHomeScreen();
+
+    const setupPaymentModal = await screen.findByTestId(
+      "proceed-to-stripe-button",
+    );
+    expect(setupPaymentModal).toBeInTheDocument();
+  });
+});

frontend/__tests__/routes/home.test.tsx

@@ -1,177 +0,0 @@
-import { createRoutesStub } from "react-router";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { renderWithProviders } from "test-utils";
-import userEvent from "@testing-library/user-event";
-import { screen } from "@testing-library/react";
-import { AxiosError } from "axios";
-import MainApp from "#/routes/root-layout";
-import SettingsScreen from "#/routes/settings";
-import Home from "#/routes/home";
-import OpenHands from "#/api/open-hands";
-
-const createAxiosNotFoundErrorObject = () =>
-  new AxiosError(
-    "Request failed with status code 404",
-    "ERR_BAD_REQUEST",
-    undefined,
-    undefined,
-    {
-      status: 404,
-      statusText: "Not Found",
-      data: { message: "Settings not found" },
-      headers: {},
-      // @ts-expect-error - we only need the response object for this test
-      config: {},
-    },
-  );
-
-const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-
-const RouterStub = createRoutesStub([
-  {
-    // layout route
-    Component: MainApp,
-    path: "/",
-    children: [
-      {
-        // home route
-        Component: Home,
-        path: "/",
-      },
-      {
-        Component: SettingsScreen,
-        path: "/settings",
-      },
-    ],
-  },
-]);
-
-afterEach(() => {
-  vi.clearAllMocks();
-});
-
-describe("Home Screen", () => {
-  const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-
-  it("should render the home screen", () => {
-    renderWithProviders(<RouterStub initialEntries={["/"]} />);
-  });
-
-  it("should navigate to the settings screen when the settings button is clicked", async () => {
-    const user = userEvent.setup();
-    renderWithProviders(<RouterStub initialEntries={["/"]} />);
-
-    const settingsButton = await screen.findByTestId("settings-button");
-    await user.click(settingsButton);
-
-    const settingsScreen = await screen.findByTestId("settings-screen");
-    expect(settingsScreen).toBeInTheDocument();
-  });
-
-  it("should navigate to the settings when pressing 'Connect to GitHub' if the user isn't authenticated", async () => {
-    // @ts-expect-error - we only need APP_MODE for this test
-    getConfigSpy.mockResolvedValue({
-      APP_MODE: "oss",
-      FEATURE_FLAGS: {
-        ENABLE_BILLING: false,
-        HIDE_LLM_SETTINGS: false,
-      },
-    });
-    const user = userEvent.setup();
-    renderWithProviders(<RouterStub initialEntries={["/"]} />);
-
-    const connectToGitHubButton =
-      await screen.findByTestId("connect-to-github");
-    await user.click(connectToGitHubButton);
-
-    const settingsScreen = await screen.findByTestId("settings-screen");
-    expect(settingsScreen).toBeInTheDocument();
-  });
-});
-
-describe("Settings 404", () => {
-  const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-
-  it("should open the settings modal if GET /settings fails with a 404", async () => {
-    const error = createAxiosNotFoundErrorObject();
-    getSettingsSpy.mockRejectedValue(error);
-
-    renderWithProviders(<RouterStub initialEntries={["/"]} />);
-
-    const settingsModal = await screen.findByTestId("ai-config-modal");
-    expect(settingsModal).toBeInTheDocument();
-  });
-
-  it("should navigate to the settings screen when clicking the advanced settings button", async () => {
-    const error = createAxiosNotFoundErrorObject();
-    getSettingsSpy.mockRejectedValue(error);
-
-    const user = userEvent.setup();
-    renderWithProviders(<RouterStub initialEntries={["/"]} />);
-
-    const settingsScreen = screen.queryByTestId("settings-screen");
-    expect(settingsScreen).not.toBeInTheDocument();
-
-    const settingsModal = await screen.findByTestId("ai-config-modal");
-    expect(settingsModal).toBeInTheDocument();
-
-    const advancedSettingsButton = await screen.findByTestId(
-      "advanced-settings-link",
-    );
-    await user.click(advancedSettingsButton);
-
-    const settingsScreenAfter = await screen.findByTestId("settings-screen");
-    expect(settingsScreenAfter).toBeInTheDocument();
-
-    const settingsModalAfter = screen.queryByTestId("ai-config-modal");
-    expect(settingsModalAfter).not.toBeInTheDocument();
-  });
-
-  it("should not open the settings modal if GET /settings fails but is SaaS mode", async () => {
-    // @ts-expect-error - we only need APP_MODE for this test
-    getConfigSpy.mockResolvedValue({
-      APP_MODE: "saas",
-      FEATURE_FLAGS: {
-        ENABLE_BILLING: false,
-        HIDE_LLM_SETTINGS: false,
-      },
-    });
-    const error = createAxiosNotFoundErrorObject();
-    getSettingsSpy.mockRejectedValue(error);
-
-    renderWithProviders(<RouterStub initialEntries={["/"]} />);
-
-    // small hack to wait for the modal to not appear
-    await expect(
-      screen.findByTestId("ai-config-modal", {}, { timeout: 1000 }),
-    ).rejects.toThrow();
-  });
-});
-
-describe("Setup Payment modal", () => {
-  const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-
-  afterEach(() => {
-    vi.resetAllMocks();
-  });
-
-  it("should only render if SaaS mode and is new user", async () => {
-    // @ts-expect-error - we only need the APP_MODE for this test
-    getConfigSpy.mockResolvedValue({
-      APP_MODE: "saas",
-      FEATURE_FLAGS: {
-        ENABLE_BILLING: true,
-        HIDE_LLM_SETTINGS: false,
-      },
-    });
-    const error = createAxiosNotFoundErrorObject();
-    getSettingsSpy.mockRejectedValue(error);
-
-    renderWithProviders(<RouterStub initialEntries={["/"]} />);
-
-    const setupPaymentModal = await screen.findByTestId(
-      "proceed-to-stripe-button",
-    );
-    expect(setupPaymentModal).toBeInTheDocument();
-  });
-});

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

@@ -0,0 +1,674 @@
+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, waitFor, within } from "@testing-library/react";
+import { screen, 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,6 +7,30 @@ 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");
 
@@ -19,18 +43,22 @@ describe("Settings Billing", () => {
           Component: () => <PaymentForm />,
           path: "/settings/billing",
         },
+        {
+          Component: () => <div data-testid="git-settings-screen" />,
+          path: "/settings/git",
+        },
       ],
     },
   ]);
 
   const renderSettingsScreen = () =>
-    renderWithProviders(<RoutesStub initialEntries={["/settings"]} />);
+    renderWithProviders(<RoutesStub initialEntries={["/settings/billing"]} />);
 
   afterEach(() => {
     vi.clearAllMocks();
   });
 
-  it("should not render the navbar if OSS mode", async () => {
+  it("should not render the credits tab if OSS mode", async () => {
     getConfigSpy.mockResolvedValue({
       APP_MODE: "oss",
       GITHUB_CLIENT_ID: "123",
@@ -43,13 +71,12 @@ describe("Settings Billing", () => {
 
     renderSettingsScreen();
 
-    await waitFor(() => {
-      const navbar = screen.queryByTestId("settings-navbar");
-      expect(navbar).not.toBeInTheDocument();
-    });
+    const navbar = await screen.findByTestId("settings-navbar");
+    const credits = within(navbar).queryByText("Credits");
+    expect(credits).not.toBeInTheDocument();
   });
 
-  it("should render the navbar if SaaS mode", async () => {
+  it("should render the credits tab if SaaS mode and billing is enabled", async () => {
     getConfigSpy.mockResolvedValue({
       APP_MODE: "saas",
       GITHUB_CLIENT_ID: "123",
@@ -62,11 +89,8 @@ describe("Settings Billing", () => {
 
     renderSettingsScreen();
 
-    await waitFor(() => {
-      const navbar = screen.getByTestId("settings-navbar");
-      within(navbar).getByText("Account");
-      within(navbar).getByText("Credits");
-    });
+    const navbar = await screen.findByTestId("settings-navbar");
+    within(navbar).getByText("Credits");
   });
 
   it("should render the billing settings if clicking the credits item", async () => {
@@ -88,6 +112,6 @@ describe("Settings Billing", () => {
     await user.click(credits);
 
     const billingSection = await screen.findByTestId("billing-settings");
-    within(billingSection).getByText("PAYMENT$MANAGE_CREDITS");
+    expect(billingSection).toBeInTheDocument();
   });
 });

frontend/__tests__/utils/group-suggested-tasks.test.ts

@@ -0,0 +1,101 @@
+import { expect, test } from "vitest";
+import {
+  SuggestedTask,
+  SuggestedTaskGroup,
+} from "#/components/features/home/tasks/task.types";
+import { groupSuggestedTasks } from "#/utils/group-suggested-tasks";
+
+const rawTasks: SuggestedTask[] = [
+  {
+    issue_number: 1,
+    repo: "repo1",
+    title: "Task 1",
+    task_type: "MERGE_CONFLICTS",
+    git_provider: "github",
+  },
+  {
+    issue_number: 2,
+    repo: "repo1",
+    title: "Task 2",
+    task_type: "FAILING_CHECKS",
+    git_provider: "github",
+  },
+  {
+    issue_number: 3,
+    repo: "repo2",
+    title: "Task 3",
+    task_type: "UNRESOLVED_COMMENTS",
+    git_provider: "github",
+  },
+  {
+    issue_number: 4,
+    repo: "repo2",
+    title: "Task 4",
+    task_type: "OPEN_ISSUE",
+    git_provider: "github",
+  },
+  {
+    issue_number: 5,
+    repo: "repo3",
+    title: "Task 5",
+    task_type: "FAILING_CHECKS",
+    git_provider: "github",
+  },
+];
+
+const groupedTasks: SuggestedTaskGroup[] = [
+  {
+    title: "repo1",
+    tasks: [
+      {
+        issue_number: 1,
+        repo: "repo1",
+        title: "Task 1",
+        task_type: "MERGE_CONFLICTS",
+        git_provider: "github",
+      },
+      {
+        issue_number: 2,
+        repo: "repo1",
+        title: "Task 2",
+        task_type: "FAILING_CHECKS",
+        git_provider: "github",
+      },
+    ],
+  },
+  {
+    title: "repo2",
+    tasks: [
+      {
+        issue_number: 3,
+        repo: "repo2",
+        title: "Task 3",
+        task_type: "UNRESOLVED_COMMENTS",
+        git_provider: "github",
+      },
+      {
+        issue_number: 4,
+        repo: "repo2",
+        title: "Task 4",
+        task_type: "OPEN_ISSUE",
+        git_provider: "github",
+      },
+    ],
+  },
+  {
+    title: "repo3",
+    tasks: [
+      {
+        issue_number: 5,
+        repo: "repo3",
+        title: "Task 5",
+        task_type: "FAILING_CHECKS",
+        git_provider: "github",
+      },
+    ],
+  },
+];
+
+test("groupSuggestedTasks", () => {
+  expect(groupSuggestedTasks(rawTasks)).toEqual(groupedTasks);
+});

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

@@ -7,6 +7,10 @@ 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(
@@ -26,15 +30,6 @@ 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.json

@@ -1,6 +1,6 @@
 {
   "name": "openhands-frontend",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "private": true,
   "type": "module",
   "engines": {
@@ -10,44 +10,44 @@
     "@heroui/react": "2.7.6",
     "@microlink/react-json-view": "^1.26.1",
     "@monaco-editor/react": "^4.7.0-rc.0",
-    "@react-router/node": "^7.5.1",
-    "@react-router/serve": "^7.5.1",
+    "@react-router/node": "^7.5.2",
+    "@react-router/serve": "^7.5.2",
     "@react-types/shared": "^3.29.0",
     "@reduxjs/toolkit": "^2.7.0",
     "@stripe/react-stripe-js": "^3.6.0",
-    "@stripe/stripe-js": "^7.1.0",
-    "@tanstack/react-query": "^5.74.4",
+    "@stripe/stripe-js": "^7.2.0",
+    "@tanstack/react-query": "^5.74.7",
     "@vitejs/plugin-react": "^4.4.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.4.0",
-    "axios": "^1.8.4",
+    "axios": "^1.9.0",
     "clsx": "^2.1.1",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "framer-motion": "^12.7.4",
-    "i18next": "^25.0.0",
+    "framer-motion": "^12.9.2",
+    "i18next": "^25.0.1",
     "i18next-browser-languagedetector": "^8.0.5",
     "i18next-http-backend": "^3.0.2",
-    "isbot": "^5.1.25",
+    "isbot": "^5.1.27",
     "jose": "^6.0.10",
-    "lucide-react": "^0.501.0",
+    "lucide-react": "^0.503.0",
     "monaco-editor": "^0.52.2",
-    "posthog-js": "^1.236.2",
+    "posthog-js": "^1.236.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-highlight": "^0.15.0",
     "react-hot-toast": "^2.5.1",
-    "react-i18next": "^15.4.1",
+    "react-i18next": "^15.5.1",
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-redux": "^9.2.0",
-    "react-router": "^7.5.1",
+    "react-router": "^7.5.2",
     "react-syntax-highlighter": "^15.6.1",
     "react-textarea-autosize": "^8.5.9",
     "remark-gfm": "^4.0.1",
     "sirv-cli": "^3.0.1",
     "socket.io-client": "^4.8.1",
     "tailwind-merge": "^3.2.0",
-    "vite": "^6.3.2",
+    "vite": "^6.3.3",
     "web-vitals": "^3.5.2",
     "ws": "^8.18.1"
   },
@@ -82,14 +82,14 @@
     "@babel/types": "^7.27.0",
     "@mswjs/socket.io-binding": "^0.1.1",
     "@playwright/test": "^1.52.0",
-    "@react-router/dev": "^7.5.1",
+    "@react-router/dev": "^7.5.2",
     "@tailwindcss/typography": "^0.5.16",
-    "@tanstack/eslint-plugin-query": "^5.73.3",
+    "@tanstack/eslint-plugin-query": "^5.74.7",
     "@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.14.1",
+    "@types/node": "^22.15.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.1",
     "@types/react-highlight": "^0.12.8",
@@ -97,7 +97,7 @@
     "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitest/coverage-v8": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.2",
     "autoprefixer": "^10.4.21",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",

frontend/scripts/check-unlocalized-strings.cjs

@@ -39,6 +39,7 @@ 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
@@ -105,6 +106,11 @@ function isRawTranslationKey(str) {
 // Specific technical strings that should be excluded from localization
 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/api-keys.ts

@@ -0,0 +1,49 @@
+import { openHands } from "./open-hands-axios";
+
+export interface ApiKey {
+  id: string;
+  name: string;
+  prefix: string;
+  created_at: string;
+  last_used_at: string | null;
+}
+
+export interface CreateApiKeyResponse {
+  id: string;
+  name: string;
+  key: string; // Full key, only returned once upon creation
+  prefix: string;
+  created_at: string;
+}
+
+class ApiKeysClient {
+  /**
+   * Get all API keys for the current user
+   */
+  static async getApiKeys(): Promise<ApiKey[]> {
+    const { data } = await openHands.get<unknown>("/api/keys");
+    // Ensure we always return an array, even if the API returns something else
+    return Array.isArray(data) ? (data as ApiKey[]) : [];
+  }
+
+  /**
+   * Create a new API key
+   * @param name - A descriptive name for the API key
+   */
+  static async createApiKey(name: string): Promise<CreateApiKeyResponse> {
+    const { data } = await openHands.post<CreateApiKeyResponse>("/api/keys", {
+      name,
+    });
+    return data;
+  }
+
+  /**
+   * Delete an API key
+   * @param id - The ID of the API key to delete
+   */
+  static async deleteApiKey(id: string): Promise<void> {
+    await openHands.delete(`/api/keys/${id}`);
+  }
+}
+
+export default ApiKeysClient;

frontend/src/api/open-hands.ts

@@ -10,10 +10,12 @@ 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 {
   /**
@@ -149,17 +151,21 @@ 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>(
@@ -199,14 +205,6 @@ class OpenHands {
     return data.status === 200;
   }
 
-  /**
-   * Reset user settings in server
-   */
-  static async resetSettings(): Promise<boolean> {
-    const response = await openHands.post("/api/reset-settings");
-    return response.status === 200;
-  }
-
   static async createCheckoutSession(amount: number): Promise<string> {
     const { data } = await openHands.post(
       "/api/billing/create-checkout-session",

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

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

frontend/src/api/suggestions-service/suggestions-service.api.ts

@@ -0,0 +1,9 @@
+import { SuggestedTask } from "#/components/features/home/tasks/task.types";
+import { openHands } from "../open-hands-axios";
+
+export class SuggestionsService {
+  static async getSuggestedTasks(): Promise<SuggestedTask[]> {
+    const { data } = await openHands.get("/api/user/suggested-tasks");
+    return data;
+  }
+}

frontend/src/assets/branding/all-hands-logo-spark.svg

@@ -15,13 +15,13 @@
         fill="black" />
       <path
         d="M38.7381 10.5084C38.5759 10.5084 38.4106 10.4788 38.2545 10.4076C37.6821 10.1526 37.4312 9.49736 37.6944 8.94289C38.5453 7.1431 39.791 5.48266 41.2938 4.14245C41.7559 3.73031 42.4782 3.75699 42.9037 4.20768C43.3291 4.65541 43.3016 5.35516 42.8363 5.76731C41.5539 6.91182 40.4919 8.32912 39.7634 9.86502C39.5737 10.2653 39.1666 10.5055 38.7381 10.5084Z"
-        fill="white" />
+        fill="black" />
       <path
         d="M34.898 9.87074C34.3073 9.87667 33.8023 9.43784 33.7533 8.85669C33.536 6.25633 33.5268 3.62039 33.7319 1.02003C33.7808 0.412188 34.3287 -0.0414663 34.9531 0.00300963C35.5805 0.0504507 36.0488 0.578232 36.0029 1.18607C35.807 3.67079 35.8162 6.1911 36.0243 8.67582C36.0763 9.28366 35.6081 9.81737 34.9806 9.86481C34.9531 9.86481 34.9255 9.86778 34.898 9.86778V9.87074Z"
-        fill="white" />
+        fill="black" />
       <path
         d="M30.976 10.5558C30.4649 10.5618 29.9935 10.2267 29.8619 9.7256C29.3783 7.88726 28.4632 6.14084 27.2175 4.67906C26.8165 4.20762 26.8869 3.51379 27.3705 3.12537C27.8572 2.73695 28.5734 2.80514 28.9743 3.27362C30.4312 4.98743 31.5024 7.03036 32.0656 9.18003C32.2217 9.77008 31.8514 10.372 31.2423 10.5232C31.1505 10.5469 31.0617 10.5558 30.9699 10.5588L30.976 10.5558Z"
-        fill="white" />
+        fill="black" />
     </g>
   </g>
   <defs>

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

@@ -1,4 +1,4 @@
-import { DiffEditor } from "@monaco-editor/react";
+import { DiffEditor, Monaco } 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,6 +88,29 @@ 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();
@@ -145,8 +168,9 @@ export function FileDiffViewer({ path, type }: FileDiffViewerProps) {
             language={getLanguageFromPath(filePath)}
             original={isAdded ? "" : diff.original}
             modified={isDeleted ? "" : diff.modified}
-            theme="vs-dark"
+            theme="custom-diff-theme"
             onMount={handleEditorDidMount}
+            beforeMount={beforeMount}
             options={{
               renderValidationDecorations: "off",
               readOnly: true,

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

@@ -1,28 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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/connect-to-provider-message.tsx

@@ -0,0 +1,21 @@
+import { Link } from "react-router";
+import { useTranslation } from "react-i18next";
+import { BrandButton } from "#/components/features/settings/brand-button";
+import { useSettings } from "#/hooks/query/use-settings";
+
+export function ConnectToProviderMessage() {
+  const { isLoading } = useSettings();
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p>{t("HOME$CONNECT_PROVIDER_MESSAGE")}</p>
+      <Link data-testid="navigate-to-settings-button" to="/settings">
+        <BrandButton type="button" variant="primary" isDisabled={isLoading}>
+          {!isLoading && t("SETTINGS$TITLE")}
+          {isLoading && t("HOME$LOADING")}
+        </BrandButton>
+      </Link>
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { useTranslation } from "react-i18next";
+import { useCreateConversation } from "#/hooks/mutation/use-create-conversation";
+import { useIsCreatingConversation } from "#/hooks/use-is-creating-conversation";
+import { BrandButton } from "../settings/brand-button";
+import AllHandsLogo from "#/assets/branding/all-hands-logo-spark.svg?react";
+
+export function HomeHeader() {
+  const {
+    mutate: createConversation,
+    isPending,
+    isSuccess,
+  } = useCreateConversation();
+  const isCreatingConversationElsewhere = useIsCreatingConversation();
+  const { t } = useTranslation();
+
+  // We check for isSuccess because the app might require time to render
+  // into the new conversation screen after the conversation is created.
+  const isCreatingConversation =
+    isPending || isSuccess || isCreatingConversationElsewhere;
+
+  return (
+    <header className="flex flex-col gap-5">
+      <AllHandsLogo />
+
+      <div className="flex items-center justify-between">
+        <h1 className="heading">{t("HOME$LETS_START_BUILDING")}</h1>
+        <BrandButton
+          testId="header-launch-button"
+          variant="primary"
+          type="button"
+          onClick={() => createConversation({ conversation_trigger: "gui" })}
+          isDisabled={isCreatingConversation}
+        >
+          {!isCreatingConversation && "Launch from Scratch"}
+          {isCreatingConversation && t("HOME$LOADING")}
+        </BrandButton>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <p className="text-sm max-w-[424px]">
+          {t("HOME$OPENHANDS_DESCRIPTION")}
+        </p>
+        <p className="text-sm">
+          {t("HOME$NOT_SURE_HOW_TO_START")}{" "}
+          <a
+            href="https://docs.all-hands.dev/modules/usage/getting-started"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline underline-offset-2"
+          >
+            Read this
+          </a>
+        </p>
+      </div>
+    </header>
+  );
+}

frontend/src/components/features/home/repo-connector.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from "react-i18next";
+import { ConnectToProviderMessage } from "./connect-to-provider-message";
+import { useAuth } from "#/context/auth-context";
+import { RepositorySelectionForm } from "./repo-selection-form";
+import { useConfig } from "#/hooks/query/use-config";
+import { RepoProviderLinks } from "./repo-provider-links";
+
+interface RepoConnectorProps {
+  onRepoSelection: (repoTitle: string | null) => void;
+}
+
+export function RepoConnector({ onRepoSelection }: RepoConnectorProps) {
+  const { providersAreSet } = useAuth();
+  const { data: config } = useConfig();
+  const { t } = useTranslation();
+
+  const isSaaS = config?.APP_MODE === "saas";
+
+  return (
+    <section
+      data-testid="repo-connector"
+      className="w-full flex flex-col gap-6"
+    >
+      <h2 className="heading">{t("HOME$CONNECT_TO_REPOSITORY")}</h2>
+
+      {!providersAreSet && <ConnectToProviderMessage />}
+      {providersAreSet && (
+        <RepositorySelectionForm onRepoSelection={onRepoSelection} />
+      )}
+
+      {isSaaS && providersAreSet && <RepoProviderLinks />}
+    </section>
+  );
+}

frontend/src/components/features/home/repo-provider-links.tsx

@@ -0,0 +1,17 @@
+import { useConfig } from "#/hooks/query/use-config";
+
+export function RepoProviderLinks() {
+  const { data: config } = useConfig();
+
+  const githubHref = config
+    ? `https://github.com/apps/${config.APP_SLUG}/installations/new`
+    : "";
+
+  return (
+    <div className="flex flex-col text-sm underline underline-offset-2 text-content-2 gap-4 w-fit">
+      <a href={githubHref} target="_blank" rel="noopener noreferrer">
+        Add GitHub repos
+      </a>
+    </div>
+  );
+}

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

@@ -0,0 +1,138 @@
+import { render, screen } from "@testing-library/react";
+import { describe, test, expect, vi, beforeEach } from "vitest";
+import { RepositorySelectionForm } from "./repo-selection-form";
+
+// Create mock functions
+const mockUseUserRepositories = vi.fn();
+const mockUseCreateConversation = vi.fn();
+const mockUseIsCreatingConversation = vi.fn();
+const mockUseTranslation = vi.fn();
+const mockUseAuth = vi.fn();
+
+// Setup default mock returns
+mockUseUserRepositories.mockReturnValue({
+  data: { pages: [{ data: [] }] },
+  isLoading: false,
+  isError: false,
+});
+
+mockUseCreateConversation.mockReturnValue({
+  mutate: vi.fn(),
+  isPending: false,
+  isSuccess: false,
+});
+
+mockUseIsCreatingConversation.mockReturnValue(false);
+
+mockUseTranslation.mockReturnValue({ t: (key: string) => key });
+
+mockUseAuth.mockReturnValue({
+  isAuthenticated: true,
+  isLoading: false,
+  providersAreSet: true,
+  user: {
+    id: 1,
+    login: "testuser",
+    avatar_url: "https://example.com/avatar.png",
+    name: "Test User",
+    email: "test@example.com",
+    company: "Test Company",
+  },
+  login: vi.fn(),
+  logout: vi.fn(),
+});
+
+// Mock the modules
+vi.mock("#/hooks/query/use-user-repositories", () => ({
+  useUserRepositories: () => mockUseUserRepositories(),
+}));
+
+vi.mock("#/hooks/mutation/use-create-conversation", () => ({
+  useCreateConversation: () => mockUseCreateConversation(),
+}));
+
+vi.mock("#/hooks/use-is-creating-conversation", () => ({
+  useIsCreatingConversation: () => mockUseIsCreatingConversation(),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => mockUseTranslation(),
+}));
+
+vi.mock("#/context/auth-context", () => ({
+  useAuth: () => mockUseAuth(),
+}));
+
+describe("RepositorySelectionForm", () => {
+  const mockOnRepoSelection = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("shows loading indicator when repositories are being fetched", () => {
+    // Setup loading state
+    mockUseUserRepositories.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+      isError: false,
+    });
+
+    render(<RepositorySelectionForm onRepoSelection={mockOnRepoSelection} />);
+
+    // Check if loading indicator is displayed
+    expect(screen.getByTestId("repo-dropdown-loading")).toBeInTheDocument();
+    expect(screen.getByText("HOME$LOADING_REPOSITORIES")).toBeInTheDocument();
+  });
+
+  test("shows dropdown when repositories are loaded", () => {
+    // Setup loaded repositories
+    mockUseUserRepositories.mockReturnValue({
+      data: {
+        pages: [
+          {
+            data: [
+              {
+                id: 1,
+                full_name: "user/repo1",
+                git_provider: "github",
+                is_public: true,
+              },
+              {
+                id: 2,
+                full_name: "user/repo2",
+                git_provider: "github",
+                is_public: true,
+              },
+            ],
+          },
+        ],
+      },
+      isLoading: false,
+      isError: false,
+    });
+
+    render(<RepositorySelectionForm onRepoSelection={mockOnRepoSelection} />);
+
+    // Check if dropdown is displayed
+    expect(screen.getByTestId("repo-dropdown")).toBeInTheDocument();
+  });
+
+  test("shows error message when repository fetch fails", () => {
+    // Setup error state
+    mockUseUserRepositories.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      isError: true,
+      error: new Error("Failed to fetch repositories"),
+    });
+
+    render(<RepositorySelectionForm onRepoSelection={mockOnRepoSelection} />);
+
+    // Check if error message is displayed
+    expect(screen.getByTestId("repo-dropdown-error")).toBeInTheDocument();
+    expect(
+      screen.getByText("HOME$FAILED_TO_LOAD_REPOSITORIES"),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,157 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Spinner } from "@heroui/react";
+import { useCreateConversation } from "#/hooks/mutation/use-create-conversation";
+import { useUserRepositories } from "#/hooks/query/use-user-repositories";
+import { useIsCreatingConversation } from "#/hooks/use-is-creating-conversation";
+import { GitRepository } from "#/types/git";
+import { BrandButton } from "../settings/brand-button";
+import { SettingsDropdownInput } from "../settings/settings-dropdown-input";
+
+interface RepositorySelectionFormProps {
+  onRepoSelection: (repoTitle: string | null) => void;
+}
+
+// Loading state component
+function RepositoryLoadingState() {
+  const { t } = useTranslation();
+  return (
+    <div
+      data-testid="repo-dropdown-loading"
+      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded"
+    >
+      <Spinner size="sm" />
+      <span className="text-sm">{t("HOME$LOADING_REPOSITORIES")}</span>
+    </div>
+  );
+}
+
+// Error state component
+function RepositoryErrorState() {
+  const { t } = useTranslation();
+  return (
+    <div
+      data-testid="repo-dropdown-error"
+      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded text-red-500"
+    >
+      <span className="text-sm">{t("HOME$FAILED_TO_LOAD_REPOSITORIES")}</span>
+    </div>
+  );
+}
+
+// Repository dropdown component
+interface RepositoryDropdownProps {
+  items: { key: React.Key; label: string }[];
+  onSelectionChange: (key: React.Key | null) => void;
+  onInputChange: (value: string) => void;
+}
+
+function RepositoryDropdown({
+  items,
+  onSelectionChange,
+  onInputChange,
+}: RepositoryDropdownProps) {
+  return (
+    <SettingsDropdownInput
+      testId="repo-dropdown"
+      name="repo-dropdown"
+      placeholder="Select a repo"
+      items={items}
+      wrapperClassName="max-w-[500px]"
+      onSelectionChange={onSelectionChange}
+      onInputChange={onInputChange}
+    />
+  );
+}
+
+export function RepositorySelectionForm({
+  onRepoSelection,
+}: RepositorySelectionFormProps) {
+  const [selectedRepository, setSelectedRepository] =
+    React.useState<GitRepository | null>(null);
+  const {
+    data: repositories,
+    isLoading: isLoadingRepositories,
+    isError: isRepositoriesError,
+  } = useUserRepositories();
+  const {
+    mutate: createConversation,
+    isPending,
+    isSuccess,
+  } = useCreateConversation();
+  const isCreatingConversationElsewhere = useIsCreatingConversation();
+  const { t } = useTranslation();
+
+  // We check for isSuccess because the app might require time to render
+  // into the new conversation screen after the conversation is created.
+  const isCreatingConversation =
+    isPending || isSuccess || isCreatingConversationElsewhere;
+
+  const repositoriesList = repositories?.pages.flatMap((page) => page.data);
+  const repositoriesItems = repositoriesList?.map((repo) => ({
+    key: repo.id,
+    label: repo.full_name,
+  }));
+
+  const handleRepoSelection = (key: React.Key | null) => {
+    const selectedRepo = repositoriesList?.find(
+      (repo) => repo.id.toString() === key,
+    );
+
+    if (selectedRepo) onRepoSelection(selectedRepo.full_name);
+    setSelectedRepository(selectedRepo || null);
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value === "") {
+      setSelectedRepository(null);
+      onRepoSelection(null);
+    }
+  };
+
+  // Render the appropriate UI based on the loading/error state
+  const renderRepositorySelector = () => {
+    if (isLoadingRepositories) {
+      return <RepositoryLoadingState />;
+    }
+
+    if (isRepositoriesError) {
+      return <RepositoryErrorState />;
+    }
+
+    return (
+      <RepositoryDropdown
+        items={repositoriesItems || []}
+        onSelectionChange={handleRepoSelection}
+        onInputChange={handleInputChange}
+      />
+    );
+  };
+
+  return (
+    <>
+      {renderRepositorySelector()}
+
+      <BrandButton
+        testId="repo-launch-button"
+        variant="primary"
+        type="button"
+        isDisabled={
+          !selectedRepository ||
+          isCreatingConversation ||
+          isLoadingRepositories ||
+          isRepositoriesError
+        }
+        onClick={() =>
+          createConversation({
+            selectedRepository,
+            conversation_trigger: "gui",
+          })
+        }
+      >
+        {!isCreatingConversation && "Launch"}
+        {isCreatingConversation && t("HOME$LOADING")}
+      </BrandButton>
+    </>
+  );
+}

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

@@ -0,0 +1,85 @@
+import { useTranslation } from "react-i18next";
+import { SuggestedTask } from "./task.types";
+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 { TaskIssueNumber } from "./task-issue-number";
+import { Provider } from "#/types/settings";
+
+const getTaskTypeMap = (
+  t: (key: string) => string,
+): Record<SuggestedTask["task_type"], string> => ({
+  FAILING_CHECKS: t("HOME$FIX_FAILING_CHECKS"),
+  MERGE_CONFLICTS: t("HOME$RESOLVE_MERGE_CONFLICTS"),
+  OPEN_ISSUE: t("HOME$OPEN_ISSUE"),
+  UNRESOLVED_COMMENTS: t("HOME$RESOLVE_UNRESOLVED_COMMENTS"),
+});
+
+interface TaskCardProps {
+  task: SuggestedTask;
+}
+
+export function TaskCard({ task }: TaskCardProps) {
+  const { data: repositories } = useUserRepositories();
+  const { mutate: createConversation, isPending } = useCreateConversation();
+  const isCreatingConversation = useIsCreatingConversation();
+  const { t } = useTranslation();
+
+  const getRepo = (repo: string, git_provider: Provider) => {
+    const repositoriesList = repositories?.pages.flatMap((page) => page.data);
+    const selectedRepo = repositoriesList?.find(
+      (repository) =>
+        repository.full_name === repo &&
+        repository.git_provider === git_provider,
+    );
+
+    return selectedRepo;
+  };
+
+  const handleLaunchConversation = () => {
+    const repo = getRepo(task.repo, task.git_provider);
+
+    return createConversation({
+      conversation_trigger: "suggested_task",
+      selectedRepository: repo,
+      suggested_task: task,
+    });
+  };
+
+  // Determine the correct URL format based on git provider
+  let href: string;
+  if (task.git_provider === "gitlab") {
+    const issueType =
+      task.task_type === "OPEN_ISSUE" ? "issues" : "merge_requests";
+    href = `https://gitlab.com/${task.repo}/-/${issueType}/${task.issue_number}`;
+  } else {
+    const hrefType = task.task_type === "OPEN_ISSUE" ? "issues" : "pull";
+    href = `https://github.com/${task.repo}/${hrefType}/${task.issue_number}`;
+  }
+
+  return (
+    <li className="py-3 border-b border-[#717888] flex items-center pr-6">
+      <TaskIssueNumber issueNumber={task.issue_number} href={href} />
+
+      <div className="w-full pl-8">
+        <p className="font-semibold">{getTaskTypeMap(t)[task.task_type]}</p>
+        <p>{task.title}</p>
+      </div>
+
+      <button
+        type="button"
+        data-testid="task-launch-button"
+        className={cn(
+          "underline underline-offset-2 disabled:opacity-80",
+          isPending && "no-underline font-bold",
+        )}
+        disabled={isCreatingConversation}
+        onClick={handleLaunchConversation}
+      >
+        {!isPending && t("HOME$LAUNCH")}
+        {isPending && t("HOME$LOADING")}
+      </button>
+    </li>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { TaskCard } from "./task-card";
+import { TaskItemTitle } from "./task-item-title";
+import { SuggestedTask } from "./task.types";
+
+interface TaskGroupProps {
+  title: string;
+  tasks: SuggestedTask[];
+}
+
+export function TaskGroup({ title, tasks }: TaskGroupProps) {
+  return (
+    <div className="text-content-2">
+      <TaskItemTitle>{title}</TaskItemTitle>
+
+      <ul className="text-sm">
+        {tasks.map((task) => (
+          <TaskCard key={task.issue_number} task={task} />
+        ))}
+      </ul>
+    </div>
+  );
+}

frontend/src/components/features/home/tasks/task-issue-number.tsx

@@ -0,0 +1,17 @@
+interface TaskIssueNumberProps {
+  issueNumber: number;
+  href: string;
+}
+
+export function TaskIssueNumber({ href, issueNumber }: TaskIssueNumberProps) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      data-testid="task-id"
+    >
+      #<span className="underline underline-offset-2">{issueNumber}</span>
+    </a>
+  );
+}

frontend/src/components/features/home/tasks/task-item-title.tsx

@@ -0,0 +1,7 @@
+export function TaskItemTitle({ children: title }: React.PropsWithChildren) {
+  return (
+    <div className="py-3 border-b-1 border-[#717888]">
+      <h3 className="text-[16px] leading-6 font-[500]">{title}</h3>
+    </div>
+  );
+}

frontend/src/components/features/home/tasks/task-suggestions-skeleton.tsx

@@ -0,0 +1,50 @@
+import { cn } from "#/utils/utils";
+
+const VALID_WIDTHS = ["w-1/4", "w-1/2", "w-3/4"];
+
+const getRandomWidth = () =>
+  VALID_WIDTHS[Math.floor(Math.random() * VALID_WIDTHS.length)];
+
+const getRandomNumber = (from = 3, to = 5) =>
+  Math.floor(Math.random() * (to - from + 1)) + from;
+
+function TaskCardSkeleton() {
+  return (
+    <li className="py-3 border-b border-[#717888] flex items-center pr-6">
+      <div className="h-5 w-8 skeleton" />
+
+      <div className="w-full pl-8">
+        <div className="h-5 w-24 skeleton mb-2" />
+        <div className={cn("h-5 skeleton", getRandomWidth())} />
+      </div>
+
+      <div className="h-5 w-16 skeleton" />
+    </li>
+  );
+}
+
+interface TaskGroupSkeletonProps {
+  items?: number;
+}
+
+function TaskGroupSkeleton({ items = 3 }: TaskGroupSkeletonProps) {
+  return (
+    <div data-testid="task-group-skeleton">
+      <div className="py-3 border-b border-[#717888]">
+        <div className="h-6 w-40 skeleton" />
+      </div>
+
+      <ul>
+        {Array.from({ length: items }).map((_, index) => (
+          <TaskCardSkeleton key={index} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function TaskSuggestionsSkeleton() {
+  return Array.from({ length: getRandomNumber(2, 3) }).map((_, index) => (
+    <TaskGroupSkeleton key={index} items={getRandomNumber(3, 5)} />
+  ));
+}

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

@@ -0,0 +1,43 @@
+import { TaskGroup } from "./task-group";
+import { useSuggestedTasks } from "#/hooks/query/use-suggested-tasks";
+import { TaskSuggestionsSkeleton } from "./task-suggestions-skeleton";
+import { useAuth } from "#/context/auth-context";
+import { cn } from "#/utils/utils";
+import { ConnectToProviderMessage } from "../connect-to-provider-message";
+
+interface TaskSuggestionsProps {
+  filterFor?: string | null;
+}
+
+export function TaskSuggestions({ filterFor }: TaskSuggestionsProps) {
+  const { providersAreSet } = useAuth();
+
+  const { data: tasks, isLoading } = useSuggestedTasks();
+  const suggestedTasks = filterFor
+    ? tasks?.filter((task) => task.title === filterFor)
+    : tasks;
+
+  const hasSuggestedTasks = suggestedTasks && suggestedTasks.length > 0;
+
+  return (
+    <section
+      data-testid="task-suggestions"
+      className={cn("flex flex-col w-full", !hasSuggestedTasks && "gap-6")}
+    >
+      <h2 className="heading">Suggested Tasks</h2>
+
+      <div className="flex flex-col gap-6">
+        {!providersAreSet && <ConnectToProviderMessage />}
+        {isLoading && <TaskSuggestionsSkeleton />}
+        {!hasSuggestedTasks && !isLoading && <p>No tasks available</p>}
+        {suggestedTasks?.map((taskGroup, index) => (
+          <TaskGroup
+            key={index}
+            title={taskGroup.title}
+            tasks={taskGroup.tasks}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

frontend/src/components/features/home/tasks/task.types.ts

@@ -0,0 +1,20 @@
+import { Provider } from "#/types/settings";
+
+export type SuggestedTaskType =
+  | "MERGE_CONFLICTS"
+  | "FAILING_CHECKS"
+  | "UNRESOLVED_COMMENTS"
+  | "OPEN_ISSUE"; // This is a task type identifier, not a UI string
+
+export interface SuggestedTask {
+  git_provider: Provider;
+  issue_number: number;
+  repo: string;
+  title: string;
+  task_type: SuggestedTaskType;
+}
+
+export interface SuggestedTaskGroup {
+  title: string;
+  tasks: SuggestedTask[];
+}

frontend/src/components/features/payment/payment-form.tsx

@@ -40,10 +40,6 @@ export function PaymentForm() {
       data-testid="billing-settings"
       className="flex flex-col gap-6 px-11 py-9"
     >
-      <h2 className="text-[28px] leading-8 tracking-[-0.02em] font-bold">
-        {t(I18nKey.PAYMENT$MANAGE_CREDITS)}
-      </h2>
-
       <div
         className={cn(
           "flex items-center justify-between w-[680px] bg-[#7F7445] rounded px-3 py-2",
@@ -52,7 +48,7 @@ export function PaymentForm() {
       >
         <div className="flex items-center gap-2">
           <MoneyIcon width={22} height={14} />
-          <span>Balance</span>
+          <span>{t(I18nKey.PAYMENT$MANAGE_CREDITS)}</span>
         </div>
         {!isLoading && (
           <span data-testid="user-balance">${Number(balance).toFixed(2)}</span>

frontend/src/components/features/settings/api-key-modal-base.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from "react";
+import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
+
+interface ApiKeyModalBaseProps {
+  isOpen: boolean;
+  title: string;
+  width?: string;
+  children: ReactNode;
+  footer: ReactNode;
+}
+
+export function ApiKeyModalBase({
+  isOpen,
+  title,
+  width = "500px",
+  children,
+  footer,
+}: ApiKeyModalBaseProps) {
+  if (!isOpen) return null;
+
+  return (
+    <ModalBackdrop>
+      <div
+        className="bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-tertiary"
+        style={{ width }}
+      >
+        <h3 className="text-xl font-bold">{title}</h3>
+        {children}
+        <div className="w-full flex gap-2 mt-2">{footer}</div>
+      </div>
+    </ModalBackdrop>
+  );
+}

frontend/src/components/features/settings/api-keys-manager.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import { BrandButton } from "#/components/features/settings/brand-button";
+import { LoadingSpinner } from "#/components/shared/loading-spinner";
+import { ApiKey, CreateApiKeyResponse } from "#/api/api-keys";
+import { displayErrorToast } from "#/utils/custom-toast-handlers";
+import { CreateApiKeyModal } from "./create-api-key-modal";
+import { DeleteApiKeyModal } from "./delete-api-key-modal";
+import { NewApiKeyModal } from "./new-api-key-modal";
+import { useApiKeys } from "#/hooks/query/use-api-keys";
+
+export function ApiKeysManager() {
+  const { t } = useTranslation();
+  const { data: apiKeys = [], isLoading, error } = useApiKeys();
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [keyToDelete, setKeyToDelete] = useState<ApiKey | null>(null);
+  const [newlyCreatedKey, setNewlyCreatedKey] =
+    useState<CreateApiKeyResponse | null>(null);
+  const [showNewKeyModal, setShowNewKeyModal] = useState(false);
+
+  // Display error toast if the query fails
+  if (error) {
+    displayErrorToast(t(I18nKey.ERROR$GENERIC));
+  }
+
+  const handleKeyCreated = (newKey: CreateApiKeyResponse) => {
+    setNewlyCreatedKey(newKey);
+    setCreateModalOpen(false);
+    setShowNewKeyModal(true);
+  };
+
+  const handleCloseCreateModal = () => {
+    setCreateModalOpen(false);
+  };
+
+  const handleCloseDeleteModal = () => {
+    setDeleteModalOpen(false);
+    setKeyToDelete(null);
+  };
+
+  const handleCloseNewKeyModal = () => {
+    setShowNewKeyModal(false);
+    setNewlyCreatedKey(null);
+  };
+
+  const formatDate = (dateString: string | null) => {
+    if (!dateString) return "Never";
+    return new Date(dateString).toLocaleString();
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-6">
+        <div className="flex items-center justify-between">
+          <BrandButton
+            type="button"
+            variant="primary"
+            onClick={() => setCreateModalOpen(true)}
+          >
+            {t(I18nKey.SETTINGS$CREATE_API_KEY)}
+          </BrandButton>
+        </div>
+
+        <p className="text-sm text-gray-300">
+          {t(I18nKey.SETTINGS$API_KEYS_DESCRIPTION)}
+        </p>
+
+        {isLoading && (
+          <div className="flex justify-center p-4">
+            <LoadingSpinner size="large" />
+          </div>
+        )}
+        {!isLoading && Array.isArray(apiKeys) && apiKeys.length > 0 && (
+          <div className="border border-tertiary rounded-md overflow-hidden">
+            <table className="w-full">
+              <thead className="bg-base-tertiary">
+                <tr>
+                  <th className="text-left p-3 text-sm font-medium">
+                    {t(I18nKey.SETTINGS$NAME)}
+                  </th>
+                  <th className="text-left p-3 text-sm font-medium">
+                    {t(I18nKey.SETTINGS$CREATED_AT)}
+                  </th>
+                  <th className="text-left p-3 text-sm font-medium">
+                    {t(I18nKey.SETTINGS$LAST_USED)}
+                  </th>
+                  <th className="text-right p-3 text-sm font-medium">
+                    {t(I18nKey.SETTINGS$ACTIONS)}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {apiKeys.map((key) => (
+                  <tr key={key.id} className="border-t border-tertiary">
+                    <td className="p-3 text-sm">{key.name}</td>
+                    <td className="p-3 text-sm">
+                      {formatDate(key.created_at)}
+                    </td>
+                    <td className="p-3 text-sm">
+                      {formatDate(key.last_used_at)}
+                    </td>
+                    <td className="p-3 text-right">
+                      <button
+                        type="button"
+                        className="underline"
+                        onClick={() => {
+                          setKeyToDelete(key);
+                          setDeleteModalOpen(true);
+                        }}
+                      >
+                        {t(I18nKey.BUTTON$DELETE)}
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {/* Create API Key Modal */}
+      <CreateApiKeyModal
+        isOpen={createModalOpen}
+        onClose={handleCloseCreateModal}
+        onKeyCreated={handleKeyCreated}
+      />
+
+      {/* Delete API Key Modal */}
+      <DeleteApiKeyModal
+        isOpen={deleteModalOpen}
+        keyToDelete={keyToDelete}
+        onClose={handleCloseDeleteModal}
+      />
+
+      {/* Show New API Key Modal */}
+      <NewApiKeyModal
+        isOpen={showNewKeyModal}
+        newlyCreatedKey={newlyCreatedKey}
+        onClose={handleCloseNewKeyModal}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,34 @@
+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]"
+    />
+  );
+}