Merge branch 'main' into test-user

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

.github/workflows/ghcr-build.yml

@@ -176,8 +176,10 @@ jobs:
     # Do not build enterprise in forks
     if: github.event.pull_request.head.repo.fork != true
     steps:
-      - name: Checkout repository
+      - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
 
       # Set up Docker Buildx for better performance
       - name: Set up Docker Buildx

.github/workflows/mdx-lint.yml

@@ -0,0 +1,70 @@
+# Workflow that checks MDX format in docs/ folder
+name: MDX Lint
+
+# Run on pushes to main and on pull requests that modify docs/ files
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'docs/**/*.mdx'
+  pull_request:
+    paths:
+      - 'docs/**/*.mdx'
+
+# If triggered by a PR, it will be in the same group. However, each commit on main will be in its own unique group
+concurrency:
+  group: ${{ github.workflow }}-${{ (github.head_ref && github.ref) || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  mdx-lint:
+    name: Lint MDX files
+    runs-on: blacksmith-4vcpu-ubuntu-2204
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install Node.js 22
+        uses: useblacksmith/setup-node@v5
+        with:
+          node-version: 22
+
+      - name: Install MDX dependencies
+        run: |
+          npm install @mdx-js/mdx@3 glob@10
+
+      - name: Validate MDX files
+        run: |
+          node -e "
+          const {compile} = require('@mdx-js/mdx');
+          const fs = require('fs');
+          const path = require('path');
+          const glob = require('glob');
+
+          async function validateMDXFiles() {
+            const files = glob.sync('docs/**/*.mdx');
+            console.log('Found', files.length, 'MDX files to validate');
+
+            let hasErrors = false;
+
+            for (const file of files) {
+              try {
+                const content = fs.readFileSync(file, 'utf8');
+                await compile(content);
+                console.log('✅ MDX parsing successful for', file);
+              } catch (err) {
+                console.error('❌ MDX parsing failed for', file, ':', err.message);
+                hasErrors = true;
+              }
+            }
+
+            if (hasErrors) {
+              console.error('\\n❌ Some MDX files have parsing errors. Please fix them before merging.');
+              process.exit(1);
+            } else {
+              console.log('\\n✅ All MDX files are valid!');
+            }
+          }
+
+          validateMDXFiles();
+          "

docs/usage/architecture/runtime.mdx

@@ -124,7 +124,7 @@ This tagging approach allows OpenHands to efficiently manage both development an
 OpenHands supports both bind mounts and Docker named volumes in SandboxConfig.volumes:
 
 - Bind mount: "/abs/host/path:/container/path[:mode]"
-- Named volume: "volume:<name>:/container/path[:mode]" or any non-absolute host spec treated as a named volume
+- Named volume: "volume:`<name>`:/container/path[:mode]" or any non-absolute host spec treated as a named volume
 
 Overlay mode (copy-on-write layer) is supported for bind mounts by appending ":overlay" to the mode (e.g., ":ro,overlay").
 To enable overlay COW, set SANDBOX_VOLUME_OVERLAYS to a writable host directory; per-container upper/work dirs are created under it. If SANDBOX_VOLUME_OVERLAYS is unset, overlay mounts are skipped.

docs/usage/configuration-options.mdx

@@ -8,6 +8,11 @@ description: This page outlines all available configuration options for OpenHand
    In GUI Mode, any settings applied through the Settings UI will take precedence.
 </Note>
 
+<Note>
+   **Looking for Environment Variables?** All configuration options can also be set using environment variables. 
+   See the [Environment Variables Reference](./environment-variables) for a complete list with examples.
+</Note>
+
 ## Location of the `config.toml` File
 
 When running OpenHands in CLI, headless, or development mode, you can use a project-specific `config.toml` file for configuration, which must be
@@ -18,6 +23,11 @@ specify a different path to the `config.toml` file.
 
 The core configuration options are defined in the `[core]` section of the `config.toml` file.
 
+Core configuration options can be set as environment variables by converting to uppercase. For example:
+- `debug` → `DEBUG`
+- `cache_dir` → `CACHE_DIR`
+- `runtime` → `RUNTIME`
+
 ### Workspace
 - `workspace_base` **(Deprecated)**
   - Type: `str`
@@ -141,6 +151,11 @@ The LLM (Large Language Model) configuration options are defined in the `[llm]`
 
 To use these with the docker command, pass in `-e LLM_<option>`. Example: `-e LLM_NUM_RETRIES`.
 
+All LLM configuration options can be set as environment variables by prefixing with `LLM_` and converting to uppercase. For example:
+- `model` → `LLM_MODEL`
+- `api_key` → `LLM_API_KEY`
+- `base_url` → `LLM_BASE_URL`
+
 <Note>
 For development setups, you can also define custom named LLM configurations. See [Custom LLM Configurations](./llms/custom-llm-configs) for details.
 </Note>
@@ -277,6 +292,11 @@ For development setups, you can also define custom named LLM configurations. See
 
 The agent configuration options are defined in the `[agent]` and `[agent.<agent_name>]` sections of the `config.toml` file.
 
+Agent configuration options can be set as environment variables by prefixing with `AGENT_` and converting to uppercase. For example:
+- `enable_browsing` → `AGENT_ENABLE_BROWSING`
+- `function_calling` → `AGENT_FUNCTION_CALLING`
+- `llm_config` → `AGENT_LLM_CONFIG`
+
 ### LLM Configuration
 - `llm_config`
   - Type: `str`
@@ -328,6 +348,11 @@ The sandbox configuration options are defined in the `[sandbox]` section of the
 
 To use these with the docker command, pass in `-e SANDBOX_<option>`. Example: `-e SANDBOX_TIMEOUT`.
 
+All sandbox configuration options can be set as environment variables by prefixing with `SANDBOX_` and converting to uppercase. For example:
+- `timeout` → `SANDBOX_TIMEOUT`
+- `user_id` → `SANDBOX_USER_ID`
+- `base_container_image` → `SANDBOX_BASE_CONTAINER_IMAGE`
+
 ### Execution
 - `timeout`
   - Type: `int`
@@ -390,6 +415,10 @@ The security configuration options are defined in the `[security]` section of th
 
 To use these with the docker command, pass in `-e SECURITY_<option>`. Example: `-e SECURITY_CONFIRMATION_MODE`.
 
+All security configuration options can be set as environment variables by prefixing with `SECURITY_` and converting to uppercase. For example:
+- `confirmation_mode` → `SECURITY_CONFIRMATION_MODE`
+- `security_analyzer` → `SECURITY_SECURITY_ANALYZER`
+
 ### Confirmation Mode
 - `confirmation_mode`
   - Type: `bool`

docs/usage/environment-variables.mdx

@@ -0,0 +1,251 @@
+---
+title: Environment Variables Reference
+description: Complete reference of all environment variables supported by OpenHands
+---
+
+This page provides a reference of environment variables that can be used to configure OpenHands. Environment variables provide an alternative to TOML configuration files and are particularly useful for containerized deployments, CI/CD pipelines, and cloud environments.
+
+## Environment Variable Naming Convention
+
+OpenHands follows a consistent naming pattern for environment variables:
+
+- **Core settings**: Direct uppercase mapping (e.g., `debug` → `DEBUG`)
+- **LLM settings**: Prefixed with `LLM_` (e.g., `model` → `LLM_MODEL`)
+- **Agent settings**: Prefixed with `AGENT_` (e.g., `enable_browsing` → `AGENT_ENABLE_BROWSING`)
+- **Sandbox settings**: Prefixed with `SANDBOX_` (e.g., `timeout` → `SANDBOX_TIMEOUT`)
+- **Security settings**: Prefixed with `SECURITY_` (e.g., `confirmation_mode` → `SECURITY_CONFIRMATION_MODE`)
+
+## Core Configuration Variables
+
+These variables correspond to the `[core]` section in `config.toml`:
+
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `DEBUG` | boolean | `false` | Enable debug logging throughout the application |
+| `DISABLE_COLOR` | boolean | `false` | Disable colored output in terminal |
+| `CACHE_DIR` | string | `"/tmp/cache"` | Directory path for caching |
+| `SAVE_TRAJECTORY_PATH` | string | `"./trajectories"` | Path to store conversation trajectories |
+| `REPLAY_TRAJECTORY_PATH` | string | `""` | Path to load and replay a trajectory file |
+| `FILE_STORE_PATH` | string | `"/tmp/file_store"` | File store directory path |
+| `FILE_STORE` | string | `"memory"` | File store type (`memory`, `local`, etc.) |
+| `FILE_UPLOADS_MAX_FILE_SIZE_MB` | integer | `0` | Maximum file upload size in MB (0 = no limit) |
+| `FILE_UPLOADS_RESTRICT_FILE_TYPES` | boolean | `false` | Whether to restrict file upload types |
+| `FILE_UPLOADS_ALLOWED_EXTENSIONS` | list | `[".*"]` | List of allowed file extensions for uploads |
+| `MAX_BUDGET_PER_TASK` | float | `0.0` | Maximum budget per task (0.0 = no limit) |
+| `MAX_ITERATIONS` | integer | `100` | Maximum number of iterations per task |
+| `RUNTIME` | string | `"docker"` | Runtime environment (`docker`, `local`, `cli`, etc.) |
+| `DEFAULT_AGENT` | string | `"CodeActAgent"` | Default agent class to use |
+| `JWT_SECRET` | string | auto-generated | JWT secret for authentication |
+| `RUN_AS_OPENHANDS` | boolean | `true` | Whether to run as the openhands user |
+| `VOLUMES` | string | `""` | Volume mounts in format `host:container[:mode]` |
+
+## LLM Configuration Variables
+
+These variables correspond to the `[llm]` section in `config.toml`:
+
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `LLM_MODEL` | string | `"claude-3-5-sonnet-20241022"` | LLM model to use |
+| `LLM_API_KEY` | string | `""` | API key for the LLM provider |
+| `LLM_BASE_URL` | string | `""` | Custom API base URL |
+| `LLM_API_VERSION` | string | `""` | API version to use |
+| `LLM_TEMPERATURE` | float | `0.0` | Sampling temperature |
+| `LLM_TOP_P` | float | `1.0` | Top-p sampling parameter |
+| `LLM_MAX_INPUT_TOKENS` | integer | `0` | Maximum input tokens (0 = no limit) |
+| `LLM_MAX_OUTPUT_TOKENS` | integer | `0` | Maximum output tokens (0 = no limit) |
+| `LLM_MAX_MESSAGE_CHARS` | integer | `30000` | Maximum characters that will be sent to the model in observation content |
+| `LLM_TIMEOUT` | integer | `0` | API timeout in seconds (0 = no timeout) |
+| `LLM_NUM_RETRIES` | integer | `8` | Number of retry attempts |
+| `LLM_RETRY_MIN_WAIT` | integer | `15` | Minimum wait time between retries (seconds) |
+| `LLM_RETRY_MAX_WAIT` | integer | `120` | Maximum wait time between retries (seconds) |
+| `LLM_RETRY_MULTIPLIER` | float | `2.0` | Exponential backoff multiplier |
+| `LLM_DROP_PARAMS` | boolean | `false` | Drop unsupported parameters without error |
+| `LLM_CACHING_PROMPT` | boolean | `true` | Enable prompt caching if supported |
+| `LLM_DISABLE_VISION` | boolean | `false` | Disable vision capabilities for cost reduction |
+| `LLM_CUSTOM_LLM_PROVIDER` | string | `""` | Custom LLM provider name |
+| `LLM_OLLAMA_BASE_URL` | string | `""` | Base URL for Ollama API |
+| `LLM_INPUT_COST_PER_TOKEN` | float | `0.0` | Cost per input token |
+| `LLM_OUTPUT_COST_PER_TOKEN` | float | `0.0` | Cost per output token |
+| `LLM_REASONING_EFFORT` | string | `""` | Reasoning effort for o-series models (`low`, `medium`, `high`) |
+
+### AWS Configuration
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `LLM_AWS_ACCESS_KEY_ID` | string | `""` | AWS access key ID |
+| `LLM_AWS_SECRET_ACCESS_KEY` | string | `""` | AWS secret access key |
+| `LLM_AWS_REGION_NAME` | string | `""` | AWS region name |
+
+## Agent Configuration Variables
+
+These variables correspond to the `[agent]` section in `config.toml`:
+
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `AGENT_LLM_CONFIG` | string | `""` | Name of LLM config group to use |
+| `AGENT_FUNCTION_CALLING` | boolean | `true` | Enable function calling |
+| `AGENT_ENABLE_BROWSING` | boolean | `false` | Enable browsing delegate |
+| `AGENT_ENABLE_LLM_EDITOR` | boolean | `false` | Enable LLM-based editor |
+| `AGENT_ENABLE_JUPYTER` | boolean | `false` | Enable Jupyter integration |
+| `AGENT_ENABLE_HISTORY_TRUNCATION` | boolean | `true` | Enable history truncation |
+| `AGENT_ENABLE_PROMPT_EXTENSIONS` | boolean | `true` | Enable microagents (prompt extensions) |
+| `AGENT_DISABLED_MICROAGENTS` | list | `[]` | List of microagents to disable |
+
+## Sandbox Configuration Variables
+
+These variables correspond to the `[sandbox]` section in `config.toml`:
+
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `SANDBOX_TIMEOUT` | integer | `120` | Sandbox timeout in seconds |
+| `SANDBOX_USER_ID` | integer | `1000` | User ID for sandbox processes |
+| `SANDBOX_BASE_CONTAINER_IMAGE` | string | `"nikolaik/python-nodejs:python3.12-nodejs22"` | Base container image |
+| `SANDBOX_USE_HOST_NETWORK` | boolean | `false` | Use host networking |
+| `SANDBOX_RUNTIME_BINDING_ADDRESS` | string | `"0.0.0.0"` | Runtime binding address |
+| `SANDBOX_ENABLE_AUTO_LINT` | boolean | `false` | Enable automatic linting |
+| `SANDBOX_INITIALIZE_PLUGINS` | boolean | `true` | Initialize sandbox plugins |
+| `SANDBOX_RUNTIME_EXTRA_DEPS` | string | `""` | Extra dependencies to install |
+| `SANDBOX_RUNTIME_STARTUP_ENV_VARS` | dict | `{}` | Environment variables for runtime |
+| `SANDBOX_BROWSERGYM_EVAL_ENV` | string | `""` | BrowserGym evaluation environment |
+| `SANDBOX_VOLUMES` | string | `""` | Volume mounts (replaces deprecated workspace settings) |
+| `SANDBOX_RUNTIME_CONTAINER_IMAGE` | string | `""` | Pre-built runtime container image |
+| `SANDBOX_KEEP_RUNTIME_ALIVE` | boolean | `false` | Keep runtime alive after session ends |
+| `SANDBOX_PAUSE_CLOSED_RUNTIMES` | boolean | `false` | Pause instead of stopping closed runtimes |
+| `SANDBOX_CLOSE_DELAY` | integer | `300` | Delay before closing idle runtimes (seconds) |
+| `SANDBOX_RM_ALL_CONTAINERS` | boolean | `false` | Remove all containers when stopping |
+| `SANDBOX_ENABLE_GPU` | boolean | `false` | Enable GPU support |
+| `SANDBOX_CUDA_VISIBLE_DEVICES` | string | `""` | Specify GPU devices by ID |
+| `SANDBOX_VSCODE_PORT` | integer | auto | Specific port for VSCode server |
+
+### Sandbox Environment Variables
+Variables prefixed with `SANDBOX_ENV_` are passed through to the sandbox environment:
+
+| Environment Variable | Description |
+|---------------------|-------------|
+| `SANDBOX_ENV_*` | Any variable with this prefix is passed to the sandbox (e.g., `SANDBOX_ENV_OPENAI_API_KEY`) |
+
+## Security Configuration Variables
+
+These variables correspond to the `[security]` section in `config.toml`:
+
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `SECURITY_CONFIRMATION_MODE` | boolean | `false` | Enable confirmation mode for actions |
+| `SECURITY_SECURITY_ANALYZER` | string | `"llm"` | Security analyzer to use (`llm`, `invariant`) |
+| `SECURITY_ENABLE_SECURITY_ANALYZER` | boolean | `true` | Enable security analysis |
+
+## Debug and Logging Variables
+
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `DEBUG` | boolean | `false` | Enable general debug logging |
+| `DEBUG_LLM` | boolean | `false` | Enable LLM-specific debug logging |
+| `DEBUG_RUNTIME` | boolean | `false` | Enable runtime debug logging |
+| `LOG_TO_FILE` | boolean | auto | Log to file (auto-enabled when DEBUG=true) |
+
+## Runtime-Specific Variables
+
+### Docker Runtime
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `SANDBOX_VOLUME_OVERLAYS` | string | `""` | Volume overlay configurations |
+
+### Remote Runtime
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `SANDBOX_API_KEY` | string | `""` | API key for remote runtime |
+| `SANDBOX_REMOTE_RUNTIME_API_URL` | string | `""` | Remote runtime API URL |
+
+### Local Runtime
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `RUNTIME_URL` | string | `""` | Runtime URL for local runtime |
+| `RUNTIME_URL_PATTERN` | string | `""` | Runtime URL pattern |
+| `RUNTIME_ID` | string | `""` | Runtime identifier |
+| `LOCAL_RUNTIME_MODE` | string | `""` | Enable local runtime mode (`1` to enable) |
+
+## Integration Variables
+
+### GitHub Integration
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `GITHUB_TOKEN` | string | `""` | GitHub personal access token |
+
+### Third-Party API Keys
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `OPENAI_API_KEY` | string | `""` | OpenAI API key |
+| `ANTHROPIC_API_KEY` | string | `""` | Anthropic API key |
+| `GOOGLE_API_KEY` | string | `""` | Google API key |
+| `AZURE_API_KEY` | string | `""` | Azure API key |
+| `TAVILY_API_KEY` | string | `""` | Tavily search API key |
+
+## Server Configuration Variables
+
+These are primarily used when running OpenHands as a server:
+
+| Environment Variable | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `FRONTEND_PORT` | integer | `3000` | Frontend server port |
+| `BACKEND_PORT` | integer | `8000` | Backend server port |
+| `FRONTEND_HOST` | string | `"localhost"` | Frontend host address |
+| `BACKEND_HOST` | string | `"localhost"` | Backend host address |
+| `WEB_HOST` | string | `"localhost"` | Web server host |
+| `SERVE_FRONTEND` | boolean | `true` | Whether to serve frontend |
+
+## Deprecated Variables
+
+These variables are deprecated and should be replaced:
+
+| Environment Variable | Replacement | Description |
+|---------------------|-------------|-------------|
+| `WORKSPACE_BASE` | `SANDBOX_VOLUMES` | Use volume mounting instead |
+| `WORKSPACE_MOUNT_PATH` | `SANDBOX_VOLUMES` | Use volume mounting instead |
+| `WORKSPACE_MOUNT_PATH_IN_SANDBOX` | `SANDBOX_VOLUMES` | Use volume mounting instead |
+| `WORKSPACE_MOUNT_REWRITE` | `SANDBOX_VOLUMES` | Use volume mounting instead |
+
+## Usage Examples
+
+### Basic Setup with OpenAI
+```bash
+export LLM_MODEL="gpt-4o"
+export LLM_API_KEY="your-openai-api-key"
+export DEBUG=true
+```
+
+### Docker Deployment with Custom Volumes
+```bash
+export RUNTIME="docker"
+export SANDBOX_VOLUMES="/host/workspace:/workspace:rw,/host/data:/data:ro"
+export SANDBOX_TIMEOUT=300
+```
+
+### Remote Runtime Configuration
+```bash
+export RUNTIME="remote"
+export SANDBOX_API_KEY="your-remote-api-key"
+export SANDBOX_REMOTE_RUNTIME_API_URL="https://your-runtime-api.com"
+```
+
+### Security-Enhanced Setup
+```bash
+export SECURITY_CONFIRMATION_MODE=true
+export SECURITY_SECURITY_ANALYZER="llm"
+export DEBUG_RUNTIME=true
+```
+
+## Notes
+
+1. **Boolean Values**: Environment variables expecting boolean values accept `true`/`false`, `1`/`0`, or `yes`/`no` (case-insensitive).
+
+2. **List Values**: Lists should be provided as Python literal strings, e.g., `AGENT_DISABLED_MICROAGENTS='["microagent1", "microagent2"]'`.
+
+3. **Dictionary Values**: Dictionaries should be provided as Python literal strings, e.g., `SANDBOX_RUNTIME_STARTUP_ENV_VARS='{"KEY": "value"}'`.
+
+4. **Precedence**: Environment variables take precedence over TOML configuration files.
+
+5. **Docker Usage**: When using Docker, pass environment variables with the `-e` flag:
+   ```bash
+   docker run -e LLM_API_KEY="your-key" -e DEBUG=true openhands/openhands
+   ```
+
+6. **Validation**: Invalid environment variable values will be logged as errors and fall back to defaults.

enterprise/dev_config/python/.pre-commit-config.yaml

@@ -46,7 +46,8 @@ repos:
           - types-toml
           - types-redis
           - lxml
-          # TODO: Add OpenHands in parent
+          # OpenHands package in repo root
+          - ./
           - stripe==11.5.0
           - pygithub==2.6.1
         # To see gaps add `--html-report mypy-report/`

enterprise/dev_config/python/mypy.ini

@@ -7,15 +7,11 @@ warn_unreachable = True
 warn_redundant_casts = True
 no_implicit_optional = True
 strict_optional = True
-exclude = (^enterprise/migrations/.*|^openhands/.*)
+disable_error_code = type-abstract
+exclude = (^enterprise/migrations/.*)
 
 [mypy-enterprise.tests.unit.test_auth_routes.*]
 disable_error_code = union-attr
 
 [mypy-enterprise.sync.install_gitlab_webhooks.*]
 disable_error_code = redundant-cast
-
-# Let the other config check base openhands packages
-[mypy-openhands.*]
-follow_imports = skip
-ignore_missing_imports = True

enterprise/experiments/experiment_manager.py

@@ -55,7 +55,7 @@ class SaaSExperimentManager(ExperimentManager):
 
     @staticmethod
     def run_config_variant_test(
-        user_id: str, conversation_id: str, config: OpenHandsConfig
+        user_id: str | None, conversation_id: str, config: OpenHandsConfig
     ) -> OpenHandsConfig:
         """
         Run agent config variant test and potentially modify the OpenHands config

enterprise/integrations/gitlab/gitlab_manager.py

@@ -62,7 +62,13 @@ class GitlabManager(Manager):
             logger.warning(f'Got invalid keyloak user id for GitLab User {user_id}')
             return False
 
-        gitlab_service = GitLabServiceImpl(external_auth_id=keycloak_user_id)
+        # Importing here prevents circular import
+        from integrations.gitlab.gitlab_service import SaaSGitLabService
+
+        gitlab_service: SaaSGitLabService = GitLabServiceImpl(
+            external_auth_id=keycloak_user_id
+        )
+
         return await gitlab_service.user_has_write_access(project_id)
 
     async def receive_message(self, message: Message):
@@ -119,7 +125,13 @@ class GitlabManager(Manager):
             gitlab_view: The GitLab view object containing issue/PR/comment info
         """
         keycloak_user_id = gitlab_view.user_info.keycloak_user_id
-        gitlab_service = GitLabServiceImpl(external_auth_id=keycloak_user_id)
+
+        # Importing here prevents circular import
+        from integrations.gitlab.gitlab_service import SaaSGitLabService
+
+        gitlab_service: SaaSGitLabService = GitLabServiceImpl(
+            external_auth_id=keycloak_user_id
+        )
 
         outgoing_message = message.message
 

enterprise/integrations/gitlab/gitlab_view.py

@@ -47,14 +47,14 @@ class GitlabIssue(ResolverViewInterface):
         )
 
         self.previous_comments = await gitlab_service.get_issue_or_mr_comments(
-            self.project_id, self.issue_number, is_mr=self.is_mr
+            str(self.project_id), self.issue_number, is_mr=self.is_mr
         )
 
         (
             self.title,
             self.description,
         ) = await gitlab_service.get_issue_or_mr_title_and_body(
-            self.project_id, self.issue_number, is_mr=self.is_mr
+            str(self.project_id), self.issue_number, is_mr=self.is_mr
         )
 
     async def _get_instructions(self, jinja_env: Environment) -> tuple[str, str]:
@@ -199,11 +199,11 @@ class GitlabInlineMRComment(GitlabMRComment):
             self.title,
             self.description,
         ) = await gitlab_service.get_issue_or_mr_title_and_body(
-            self.project_id, self.issue_number, is_mr=self.is_mr
+            str(self.project_id), self.issue_number, is_mr=self.is_mr
         )
 
         self.previous_comments = await gitlab_service.get_review_thread_comments(
-            self.project_id, self.issue_number, self.discussion_id
+            str(self.project_id), self.issue_number, self.discussion_id
         )
 
     async def _get_instructions(self, jinja_env: Environment) -> tuple[str, str]:

enterprise/integrations/utils.py

@@ -172,6 +172,17 @@ def get_summary_for_agent_state(
 
         return f'OpenHands encountered an error: **{reason}**.\n\n[See the conversation]({conversation_link}) for more information.'
 
+    if state == AgentState.AWAITING_USER_INPUT:
+        logger.info(
+            'Agent is awaiting user input',
+            extra={
+                'agent_state': state.value,
+                'conversation_link': conversation_link,
+                'observation_reason': getattr(observation, 'reason', None),
+            },
+        )
+        return f'OpenHands is waiting for your input. [Continue the conversation]({conversation_link}) to provide additional instructions.'
+
     # Log unknown agent state as error
     logger.error(
         'Unknown error: Unhandled agent state',

enterprise/migrations/versions/075_add_cancellation_fields_to_subscription_access.py

@@ -0,0 +1,50 @@
+"""add cancellation fields to subscription_access
+
+Revision ID: 075
+Revises: 074
+Create Date: 2025-01-11
+
+"""
+
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision: str = '075'
+down_revision: Union[str, None] = '074'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # Add cancelled_at field to track cancellation timestamp
+    op.add_column(
+        'subscription_access',
+        sa.Column('cancelled_at', sa.DateTime(timezone=True), nullable=True),
+    )
+
+    # Add stripe_subscription_id field to enable cancellation via Stripe API
+    op.add_column(
+        'subscription_access',
+        sa.Column('stripe_subscription_id', sa.String(), nullable=True),
+    )
+
+    # Create index on stripe_subscription_id for efficient lookups
+    op.create_index(
+        'ix_subscription_access_stripe_subscription_id',
+        'subscription_access',
+        ['stripe_subscription_id'],
+    )
+
+
+def downgrade() -> None:
+    # Drop index
+    op.drop_index(
+        'ix_subscription_access_stripe_subscription_id', 'subscription_access'
+    )
+
+    # Drop columns
+    op.drop_column('subscription_access', 'stripe_subscription_id')
+    op.drop_column('subscription_access', 'cancelled_at')

enterprise/server/routes/billing.py

@@ -17,11 +17,13 @@ from server.constants import (
     STRIPE_API_KEY,
     STRIPE_WEBHOOK_SECRET,
     SUBSCRIPTION_PRICE_DATA,
+    get_default_litellm_model,
 )
 from server.logger import logger
 from storage.billing_session import BillingSession
 from storage.database import session_maker
 from storage.subscription_access import SubscriptionAccess
+from storage.user_settings import UserSettings
 
 from openhands.server.user_auth import get_user_id
 
@@ -42,6 +44,8 @@ class SubscriptionAccessResponse(BaseModel):
     start_at: datetime
     end_at: datetime
     created_at: datetime
+    cancelled_at: datetime | None = None
+    stripe_subscription_id: str | None = None
 
 
 class CreateCheckoutSessionRequest(BaseModel):
@@ -85,7 +89,7 @@ async def get_credits(user_id: str = Depends(get_user_id)) -> GetCreditsResponse
 async def get_subscription_access(
     user_id: str = Depends(get_user_id),
 ) -> SubscriptionAccessResponse | None:
-    """Get details of the currently valid subscription for the user"""
+    """Get details of the currently valid subscription for the user."""
     with session_maker() as session:
         now = datetime.now(UTC)
         subscription_access = (
@@ -102,6 +106,8 @@ async def get_subscription_access(
             start_at=subscription_access.start_at,
             end_at=subscription_access.end_at,
             created_at=subscription_access.created_at,
+            cancelled_at=subscription_access.cancelled_at,
+            stripe_subscription_id=subscription_access.stripe_subscription_id,
         )
 
 
@@ -113,6 +119,78 @@ async def has_payment_method(user_id: str = Depends(get_user_id)) -> bool:
     return await stripe_service.has_payment_method(user_id)
 
 
+# Endpoint to cancel user's subscription
+@billing_router.post('/cancel-subscription')
+async def cancel_subscription(user_id: str = Depends(get_user_id)) -> JSONResponse:
+    """Cancel user's active subscription at the end of the current billing period."""
+    if not user_id:
+        raise HTTPException(status.HTTP_401_UNAUTHORIZED)
+
+    with session_maker() as session:
+        # Find the user's active subscription
+        now = datetime.now(UTC)
+        subscription_access = (
+            session.query(SubscriptionAccess)
+            .filter(SubscriptionAccess.status == 'ACTIVE')
+            .filter(SubscriptionAccess.user_id == user_id)
+            .filter(SubscriptionAccess.start_at <= now)
+            .filter(SubscriptionAccess.end_at >= now)
+            .filter(SubscriptionAccess.cancelled_at.is_(None))  # Not already cancelled
+            .first()
+        )
+
+        if not subscription_access:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail='No active subscription found',
+            )
+
+        if not subscription_access.stripe_subscription_id:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail='Cannot cancel subscription: missing Stripe subscription ID',
+            )
+
+        try:
+            # Cancel the subscription in Stripe at period end
+            await stripe.Subscription.modify_async(
+                subscription_access.stripe_subscription_id, cancel_at_period_end=True
+            )
+
+            # Update local database
+            subscription_access.cancelled_at = datetime.now(UTC)
+            session.merge(subscription_access)
+            session.commit()
+
+            logger.info(
+                'subscription_cancelled',
+                extra={
+                    'user_id': user_id,
+                    'stripe_subscription_id': subscription_access.stripe_subscription_id,
+                    'subscription_access_id': subscription_access.id,
+                    'end_at': subscription_access.end_at,
+                },
+            )
+
+            return JSONResponse(
+                {'status': 'success', 'message': 'Subscription cancelled successfully'}
+            )
+
+        except stripe.StripeError as e:
+            logger.error(
+                'stripe_cancellation_failed',
+                extra={
+                    'user_id': user_id,
+                    'stripe_subscription_id': subscription_access.stripe_subscription_id,
+                    'error': str(e),
+                },
+            )
+            raise HTTPException(
+                status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+                detail=f'Failed to cancel subscription: {str(e)}',
+            )
+
+
 # Endpoint to create a new setup intent in stripe
 @billing_router.post('/create-customer-setup-session')
 async def create_customer_setup_session(
@@ -190,9 +268,27 @@ async def create_subscription_checkout_session(
     billing_session_type: BillingSessionType = BillingSessionType.MONTHLY_SUBSCRIPTION,
     user_id: str = Depends(get_user_id),
 ) -> CreateBillingSessionResponse:
+    # Prevent duplicate subscriptions for the same user
+    with session_maker() as session:
+        now = datetime.now(UTC)
+        existing_active_subscription = (
+            session.query(SubscriptionAccess)
+            .filter(SubscriptionAccess.status == 'ACTIVE')
+            .filter(SubscriptionAccess.user_id == user_id)
+            .filter(SubscriptionAccess.start_at <= now)
+            .filter(SubscriptionAccess.end_at >= now)
+            .filter(SubscriptionAccess.cancelled_at.is_(None))  # Not cancelled
+            .first()
+        )
+
+        if existing_active_subscription:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail='Cannot create subscription: User already has an active subscription that has not been cancelled',
+            )
+
     customer_id = await stripe_service.find_or_create_customer(user_id)
     subscription_price_data = SUBSCRIPTION_PRICE_DATA[billing_session_type.value]
-    # TODO: Prevent duplicate subscriptions for the same user
     checkout_session = await stripe.checkout.Session.create_async(
         customer=customer_id,
         line_items=[
@@ -246,7 +342,7 @@ async def create_subscription_checkout_session_via_get(
     billing_session_type: BillingSessionType = BillingSessionType.MONTHLY_SUBSCRIPTION,
     user_id: str = Depends(get_user_id),
 ) -> RedirectResponse:
-    """Create a subscription checkout session using a GET request (For easier copy / paste to URL bar)"""
+    """Create a subscription checkout session using a GET request (For easier copy / paste to URL bar)."""
     response = await create_subscription_checkout_session(
         request, billing_session_type, user_id
     )
@@ -278,7 +374,7 @@ async def success_callback(session_id: str, request: Request):
             != BillingSessionType.DIRECT_PAYMENT.value
         ):
             return RedirectResponse(
-                f'{request.base_url}settings/billing?checkout=success', status_code=302
+                f'{request.base_url}settings?checkout=success', status_code=302
             )
 
         stripe_session = stripe.checkout.Session.retrieve(session_id)
@@ -348,14 +444,29 @@ async def cancel_callback(session_id: str, request: Request):
             session.merge(billing_session)
             session.commit()
 
+            # Redirect credit purchases to billing screen, subscriptions to LLM settings
+            if (
+                billing_session.billing_session_type
+                == BillingSessionType.DIRECT_PAYMENT.value
+            ):
+                return RedirectResponse(
+                    f'{request.base_url}settings/billing?checkout=cancel',
+                    status_code=302,
+                )
+            else:
+                return RedirectResponse(
+                    f'{request.base_url}settings?checkout=cancel', status_code=302
+                )
+
+    # If no billing session found, default to LLM settings (subscription flow)
     return RedirectResponse(
-        f'{request.base_url}settings/billing?checkout=cancel', status_code=302
+        f'{request.base_url}settings?checkout=cancel', status_code=302
     )
 
 
 @billing_router.post('/stripe-webhook')
 async def stripe_webhook(request: Request) -> JSONResponse:
-    """Endpoint for stripe webhooks"""
+    """Endpoint for stripe webhooks."""
     payload = await request.body()
     sig_header = request.headers.get('stripe-signature')
 
@@ -397,15 +508,111 @@ async def stripe_webhook(request: Request) -> JSONResponse:
                 end_at=end_at,
                 amount_paid=amount_paid,
                 stripe_invoice_payment_id=invoice.payment_intent,
+                stripe_subscription_id=invoice.subscription,  # Store Stripe subscription ID
             )
             session.add(subscription_access)
             session.commit()
+    elif event_type == 'customer.subscription.updated':
+        subscription = event['data']['object']
+        subscription_id = subscription['id']
+
+        # Handle subscription cancellation
+        if subscription.get('cancel_at_period_end') is True:
+            with session_maker() as session:
+                subscription_access = (
+                    session.query(SubscriptionAccess)
+                    .filter(
+                        SubscriptionAccess.stripe_subscription_id == subscription_id
+                    )
+                    .filter(SubscriptionAccess.status == 'ACTIVE')
+                    .first()
+                )
+
+                if subscription_access and not subscription_access.cancelled_at:
+                    subscription_access.cancelled_at = datetime.now(UTC)
+                    session.merge(subscription_access)
+                    session.commit()
+
+                    logger.info(
+                        'subscription_cancelled_via_webhook',
+                        extra={
+                            'stripe_subscription_id': subscription_id,
+                            'user_id': subscription_access.user_id,
+                            'subscription_access_id': subscription_access.id,
+                        },
+                    )
+    elif event_type == 'customer.subscription.deleted':
+        subscription = event['data']['object']
+        subscription_id = subscription['id']
+
+        with session_maker() as session:
+            subscription_access = (
+                session.query(SubscriptionAccess)
+                .filter(SubscriptionAccess.stripe_subscription_id == subscription_id)
+                .filter(SubscriptionAccess.status == 'ACTIVE')
+                .first()
+            )
+
+            if subscription_access:
+                subscription_access.status = 'DISABLED'
+                subscription_access.updated_at = datetime.now(UTC)
+                session.merge(subscription_access)
+                session.commit()
+
+                # Reset user settings to free tier defaults
+                reset_user_to_free_tier_settings(subscription_access.user_id)
+
+                logger.info(
+                    'subscription_expired_reset_to_free_tier',
+                    extra={
+                        'stripe_subscription_id': subscription_id,
+                        'user_id': subscription_access.user_id,
+                        'subscription_access_id': subscription_access.id,
+                    },
+                )
     else:
         logger.info('stripe_webhook_unhandled_event_type', extra={'type': event_type})
 
     return JSONResponse({'status': 'success'})
 
 
+def reset_user_to_free_tier_settings(user_id: str) -> None:
+    """Reset user settings to free tier defaults when subscription ends."""
+    with session_maker() as session:
+        user_settings = (
+            session.query(UserSettings)
+            .filter(UserSettings.keycloak_user_id == user_id)
+            .first()
+        )
+
+        if user_settings:
+            user_settings.llm_model = get_default_litellm_model()
+            user_settings.llm_api_key = None
+            user_settings.llm_api_key_for_byor = None
+            user_settings.llm_base_url = LITE_LLM_API_URL
+            user_settings.max_budget_per_task = None
+            user_settings.confirmation_mode = False
+            user_settings.enable_solvability_analysis = False
+            user_settings.security_analyzer = 'llm'
+            user_settings.agent = 'CodeActAgent'
+            user_settings.language = 'en'
+            user_settings.enable_default_condenser = True
+            user_settings.enable_sound_notifications = False
+            user_settings.enable_proactive_conversation_starters = True
+            user_settings.user_consents_to_analytics = False
+
+            session.merge(user_settings)
+            session.commit()
+
+            logger.info(
+                'user_settings_reset_to_free_tier',
+                extra={
+                    'user_id': user_id,
+                    'reset_timestamp': datetime.now(UTC).isoformat(),
+                },
+            )
+
+
 async def _get_litellm_user(client: httpx.AsyncClient, user_id: str) -> dict:
     """Get a user from litellm with the id matching that given.
 

enterprise/server/routes/event_webhook.py

@@ -234,7 +234,7 @@ def _get_user_id(conversation_id: str) -> str:
         return conversation_metadata.user_id
 
 
-async def _get_session_api_key(user_id: str, conversation_id: str) -> str:
+async def _get_session_api_key(user_id: str, conversation_id: str) -> str | None:
     agent_loop_info = await conversation_manager.get_agent_loop_info(
         user_id, filter_to_sids={conversation_id}
     )

enterprise/storage/subscription_access.py

@@ -7,7 +7,7 @@ from storage.base import Base
 class SubscriptionAccess(Base):  # type: ignore
     """
     Represents a user's subscription access record.
-    Tracks subscription status, duration, and payment information.
+    Tracks subscription status, duration, payment information, and cancellation status.
     """
 
     __tablename__ = 'subscription_access'
@@ -27,6 +27,8 @@ class SubscriptionAccess(Base):  # type: ignore
     end_at = Column(DateTime(timezone=True), nullable=True)
     amount_paid = Column(DECIMAL(19, 4), nullable=True)
     stripe_invoice_payment_id = Column(String, nullable=False)
+    cancelled_at = Column(DateTime(timezone=True), nullable=True)
+    stripe_subscription_id = Column(String, nullable=True, index=True)
     created_at = Column(
         DateTime(timezone=True),
         default=lambda: datetime.now(UTC),  # type: ignore[attr-defined]

enterprise/sync/install_gitlab_webhooks.py

@@ -276,12 +276,12 @@ class VerifyWebhookStatus:
                     webhook
                 )
 
-                gitlab_service = GitLabServiceImpl(external_auth_id=user_id)
+                gitlab_service_impl = GitLabServiceImpl(external_auth_id=user_id)
 
-                if not isinstance(gitlab_service, SaaSGitLabService):
+                if not isinstance(gitlab_service_impl, SaaSGitLabService):
                     raise Exception('Only SaaSGitLabService is supported')
                 # Cast needed when mypy can see OpenHands
-                gitlab_service = cast(type[SaaSGitLabService], gitlab_service)
+                gitlab_service = cast(type[SaaSGitLabService], gitlab_service_impl)
 
                 await self.verify_conditions_are_met(
                     gitlab_service=gitlab_service,

enterprise/tests/unit/integrations/test_utils.py

@@ -0,0 +1,159 @@
+"""Tests for enterprise integrations utils module."""
+
+import pytest
+from integrations.utils import get_summary_for_agent_state
+
+from openhands.core.schema.agent import AgentState
+from openhands.events.observation.agent import AgentStateChangedObservation
+
+
+class TestGetSummaryForAgentState:
+    """Test cases for get_summary_for_agent_state function."""
+
+    def setup_method(self):
+        """Set up test fixtures."""
+        self.conversation_link = 'https://example.com/conversation/123'
+
+    def test_empty_observations_list(self):
+        """Test handling of empty observations list."""
+        result = get_summary_for_agent_state([], self.conversation_link)
+
+        assert 'unknown error' in result.lower()
+        assert self.conversation_link in result
+
+    @pytest.mark.parametrize(
+        'state,expected_text,includes_link',
+        [
+            (AgentState.RATE_LIMITED, 'rate limited', False),
+            (AgentState.AWAITING_USER_INPUT, 'waiting for your input', True),
+        ],
+    )
+    def test_handled_agent_states(self, state, expected_text, includes_link):
+        """Test handling of states with specific behavior."""
+        observation = AgentStateChangedObservation(
+            content=f'Agent state: {state.value}', agent_state=state
+        )
+
+        result = get_summary_for_agent_state([observation], self.conversation_link)
+
+        assert expected_text in result.lower()
+        if includes_link:
+            assert self.conversation_link in result
+        else:
+            assert self.conversation_link not in result
+
+    @pytest.mark.parametrize(
+        'state',
+        [
+            AgentState.FINISHED,
+            AgentState.PAUSED,
+            AgentState.STOPPED,
+            AgentState.AWAITING_USER_CONFIRMATION,
+        ],
+    )
+    def test_unhandled_agent_states(self, state):
+        """Test handling of unhandled states (should all return unknown error)."""
+        observation = AgentStateChangedObservation(
+            content=f'Agent state: {state.value}', agent_state=state
+        )
+
+        result = get_summary_for_agent_state([observation], self.conversation_link)
+
+        assert 'unknown error' in result.lower()
+        assert self.conversation_link in result
+
+    @pytest.mark.parametrize(
+        'error_code,expected_text',
+        [
+            (
+                'STATUS$ERROR_LLM_AUTHENTICATION',
+                'authentication with the llm provider failed',
+            ),
+            (
+                'STATUS$ERROR_LLM_SERVICE_UNAVAILABLE',
+                'llm service is temporarily unavailable',
+            ),
+            (
+                'STATUS$ERROR_LLM_INTERNAL_SERVER_ERROR',
+                'llm provider encountered an internal error',
+            ),
+            ('STATUS$ERROR_LLM_OUT_OF_CREDITS', "you've run out of credits"),
+            ('STATUS$ERROR_LLM_CONTENT_POLICY_VIOLATION', 'content policy violation'),
+        ],
+    )
+    def test_error_state_readable_reasons(self, error_code, expected_text):
+        """Test all readable error reason mappings."""
+        observation = AgentStateChangedObservation(
+            content=f'Agent encountered error: {error_code}',
+            agent_state=AgentState.ERROR,
+            reason=error_code,
+        )
+
+        result = get_summary_for_agent_state([observation], self.conversation_link)
+
+        assert 'encountered an error' in result.lower()
+        assert expected_text in result.lower()
+        assert self.conversation_link in result
+
+    def test_error_state_with_custom_reason(self):
+        """Test handling of ERROR state with a custom reason."""
+        observation = AgentStateChangedObservation(
+            content='Agent encountered an error',
+            agent_state=AgentState.ERROR,
+            reason='Test error message',
+        )
+
+        result = get_summary_for_agent_state([observation], self.conversation_link)
+
+        assert 'encountered an error' in result.lower()
+        assert 'test error message' in result.lower()
+        assert self.conversation_link in result
+
+    def test_multiple_observations_uses_first(self):
+        """Test that when multiple observations are provided, only the first is used."""
+        observation1 = AgentStateChangedObservation(
+            content='Agent is awaiting user input',
+            agent_state=AgentState.AWAITING_USER_INPUT,
+        )
+        observation2 = AgentStateChangedObservation(
+            content='Agent encountered an error',
+            agent_state=AgentState.ERROR,
+            reason='Should not be used',
+        )
+
+        result = get_summary_for_agent_state(
+            [observation1, observation2], self.conversation_link
+        )
+
+        # Should handle the first observation (AWAITING_USER_INPUT), not the second (ERROR)
+        assert 'waiting for your input' in result.lower()
+        assert 'error' not in result.lower()
+
+    def test_awaiting_user_input_specific_message(self):
+        """Test that AWAITING_USER_INPUT returns the specific expected message."""
+        observation = AgentStateChangedObservation(
+            content='Agent is awaiting user input',
+            agent_state=AgentState.AWAITING_USER_INPUT,
+        )
+
+        result = get_summary_for_agent_state([observation], self.conversation_link)
+
+        # Test the exact message format
+        assert 'waiting for your input' in result.lower()
+        assert 'continue the conversation' in result.lower()
+        assert self.conversation_link in result
+        assert 'unknown error' not in result.lower()
+
+    def test_rate_limited_specific_message(self):
+        """Test that RATE_LIMITED returns the specific expected message."""
+        observation = AgentStateChangedObservation(
+            content='Agent was rate limited', agent_state=AgentState.RATE_LIMITED
+        )
+
+        result = get_summary_for_agent_state([observation], self.conversation_link)
+
+        # Test the exact message format
+        assert 'rate limited' in result.lower()
+        assert 'try again later' in result.lower()
+        # RATE_LIMITED doesn't include conversation link in response
+        assert self.conversation_link not in result

enterprise/tests/unit/test_billing.py

@@ -5,16 +5,16 @@ import pytest
 import stripe
 from fastapi import HTTPException, Request, status
 from httpx import HTTPStatusError, Response
-from server.routes import billing
+from integrations.stripe_service import has_payment_method
 from server.routes.billing import (
     CreateBillingSessionResponse,
     CreateCheckoutSessionRequest,
     GetCreditsResponse,
     cancel_callback,
+    cancel_subscription,
     create_checkout_session,
-    create_customer_setup_session,
+    create_subscription_checkout_session,
     get_credits,
-    has_payment_method,
     success_callback,
 )
 from sqlalchemy import create_engine
@@ -362,8 +362,7 @@ async def test_cancel_callback_session_not_found():
         response = await cancel_callback('test_session_id', mock_request)
         assert response.status_code == 302
         assert (
-            response.headers['location']
-            == 'http://test.com/settings/billing?checkout=cancel'
+            response.headers['location'] == 'http://test.com/settings?checkout=cancel'
         )
 
         # Verify no database updates occurred
@@ -389,8 +388,7 @@ async def test_cancel_callback_success():
 
         assert response.status_code == 302
         assert (
-            response.headers['location']
-            == 'http://test.com/settings/billing?checkout=cancel'
+            response.headers['location'] == 'http://test.com/settings?checkout=cancel'
         )
 
         # Verify database updates
@@ -402,51 +400,312 @@ async def test_cancel_callback_success():
 @pytest.mark.asyncio
 async def test_has_payment_method_with_payment_method():
     """Test has_payment_method returns True when user has a payment method."""
-
-    mock_has_payment_method = AsyncMock(return_value=True)
-    with patch(
-        'integrations.stripe_service.has_payment_method', mock_has_payment_method
+    with (
+        patch('integrations.stripe_service.session_maker') as mock_session_maker,
+        patch(
+            'stripe.Customer.list_payment_methods_async',
+            AsyncMock(return_value=MagicMock(data=[MagicMock()])),
+        ) as mock_list_payment_methods,
     ):
+        # Setup mock session
+        mock_session = MagicMock()
+        mock_session_maker.return_value.__enter__.return_value = mock_session
+        mock_session.query.return_value.filter.return_value.first.return_value = (
+            MagicMock(stripe_customer_id='cus_test123')
+        )
+
         result = await has_payment_method('mock_user')
         assert result is True
-    mock_has_payment_method.assert_called_once_with('mock_user')
+        mock_list_payment_methods.assert_called_once_with('cus_test123')
 
 
 @pytest.mark.asyncio
 async def test_has_payment_method_without_payment_method():
     """Test has_payment_method returns False when user has no payment method."""
-    mock_has_payment_method = AsyncMock(return_value=False)
-    with patch(
-        'integrations.stripe_service.has_payment_method', mock_has_payment_method
+    with (
+        patch('integrations.stripe_service.session_maker') as mock_session_maker,
+        patch(
+            'stripe.Customer.list_payment_methods_async',
+            AsyncMock(return_value=MagicMock(data=[])),
+        ) as mock_list_payment_methods,
     ):
-        mock_has_payment_method.return_value = False
+        # Setup mock session
+        mock_session = MagicMock()
+        mock_session_maker.return_value.__enter__.return_value = mock_session
+        mock_session.query.return_value.filter.return_value.first.return_value = (
+            MagicMock(stripe_customer_id='cus_test123')
+        )
+
         result = await has_payment_method('mock_user')
         assert result is False
-    mock_has_payment_method.assert_called_once_with('mock_user')
+        mock_list_payment_methods.assert_called_once_with('cus_test123')
 
 
 @pytest.mark.asyncio
-async def test_create_customer_setup_session_success():
-    """Test successful creation of customer setup session."""
-    mock_request = Request(
-        scope={'type': 'http', 'state': {'user_id': 'mock_user'}, 'headers': []}
+async def test_cancel_subscription_success():
+    """Test successful subscription cancellation."""
+    from datetime import UTC, datetime
+
+    from storage.subscription_access import SubscriptionAccess
+
+    # Mock active subscription
+    mock_subscription_access = SubscriptionAccess(
+        id=1,
+        status='ACTIVE',
+        user_id='test_user',
+        start_at=datetime.now(UTC),
+        end_at=datetime.now(UTC),
+        amount_paid=2000,
+        stripe_invoice_payment_id='pi_test',
+        stripe_subscription_id='sub_test123',
+        cancelled_at=None,
     )
 
-    mock_customer = stripe.Customer(
-        id='mock-customer', metadata={'user_id': 'mock-user'}
-    )
-    mock_session = MagicMock()
-    mock_session.url = 'https://checkout.stripe.com/test-session'
-    mock_create = AsyncMock(return_value=mock_session)
+    # Mock Stripe subscription response
+    mock_stripe_subscription = MagicMock()
+    mock_stripe_subscription.cancel_at_period_end = True
 
     with (
+        patch('server.routes.billing.session_maker') as mock_session_maker,
+        patch(
+            'stripe.Subscription.modify_async',
+            AsyncMock(return_value=mock_stripe_subscription),
+        ) as mock_stripe_modify,
+    ):
+        # Setup mock session
+        mock_session = MagicMock()
+        mock_session_maker.return_value.__enter__.return_value = mock_session
+        mock_session.query.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.first.return_value = mock_subscription_access
+
+        # Call the function
+        result = await cancel_subscription('test_user')
+
+        # Verify Stripe API was called
+        mock_stripe_modify.assert_called_once_with(
+            'sub_test123', cancel_at_period_end=True
+        )
+
+        # Verify database was updated
+        assert mock_subscription_access.cancelled_at is not None
+        mock_session.merge.assert_called_once_with(mock_subscription_access)
+        mock_session.commit.assert_called_once()
+
+        # Verify response
+        assert result.status_code == 200
+
+
+@pytest.mark.asyncio
+async def test_cancel_subscription_no_active_subscription():
+    """Test cancellation when no active subscription exists."""
+    with (
+        patch('server.routes.billing.session_maker') as mock_session_maker,
+    ):
+        # Setup mock session with no subscription found
+        mock_session = MagicMock()
+        mock_session_maker.return_value.__enter__.return_value = mock_session
+        mock_session.query.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.first.return_value = None
+
+        # Call the function and expect HTTPException
+        with pytest.raises(HTTPException) as exc_info:
+            await cancel_subscription('test_user')
+
+        assert exc_info.value.status_code == 404
+        assert 'No active subscription found' in str(exc_info.value.detail)
+
+
+@pytest.mark.asyncio
+async def test_cancel_subscription_missing_stripe_id():
+    """Test cancellation when subscription has no Stripe ID."""
+    from datetime import UTC, datetime
+
+    from storage.subscription_access import SubscriptionAccess
+
+    # Mock subscription without Stripe ID
+    mock_subscription_access = SubscriptionAccess(
+        id=1,
+        status='ACTIVE',
+        user_id='test_user',
+        start_at=datetime.now(UTC),
+        end_at=datetime.now(UTC),
+        amount_paid=2000,
+        stripe_invoice_payment_id='pi_test',
+        stripe_subscription_id=None,  # Missing Stripe ID
+        cancelled_at=None,
+    )
+
+    with (
+        patch('server.routes.billing.session_maker') as mock_session_maker,
+    ):
+        # Setup mock session
+        mock_session = MagicMock()
+        mock_session_maker.return_value.__enter__.return_value = mock_session
+        mock_session.query.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.first.return_value = mock_subscription_access
+
+        # Call the function and expect HTTPException
+        with pytest.raises(HTTPException) as exc_info:
+            await cancel_subscription('test_user')
+
+        assert exc_info.value.status_code == 400
+        assert 'missing Stripe subscription ID' in str(exc_info.value.detail)
+
+
+@pytest.mark.asyncio
+async def test_cancel_subscription_stripe_error():
+    """Test cancellation when Stripe API fails."""
+    from datetime import UTC, datetime
+
+    from storage.subscription_access import SubscriptionAccess
+
+    # Mock active subscription
+    mock_subscription_access = SubscriptionAccess(
+        id=1,
+        status='ACTIVE',
+        user_id='test_user',
+        start_at=datetime.now(UTC),
+        end_at=datetime.now(UTC),
+        amount_paid=2000,
+        stripe_invoice_payment_id='pi_test',
+        stripe_subscription_id='sub_test123',
+        cancelled_at=None,
+    )
+
+    with (
+        patch('server.routes.billing.session_maker') as mock_session_maker,
+        patch(
+            'stripe.Subscription.modify_async',
+            AsyncMock(side_effect=stripe.StripeError('API Error')),
+        ),
+    ):
+        # Setup mock session
+        mock_session = MagicMock()
+        mock_session_maker.return_value.__enter__.return_value = mock_session
+        mock_session.query.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.first.return_value = mock_subscription_access
+
+        # Call the function and expect HTTPException
+        with pytest.raises(HTTPException) as exc_info:
+            await cancel_subscription('test_user')
+
+        assert exc_info.value.status_code == 500
+        assert 'Failed to cancel subscription' in str(exc_info.value.detail)
+
+
+@pytest.mark.asyncio
+async def test_create_subscription_checkout_session_duplicate_prevention():
+    """Test that creating a subscription when user already has active subscription raises error."""
+    from datetime import UTC, datetime
+
+    from storage.subscription_access import SubscriptionAccess
+
+    # Mock active subscription
+    mock_subscription_access = SubscriptionAccess(
+        id=1,
+        status='ACTIVE',
+        user_id='test_user',
+        start_at=datetime.now(UTC),
+        end_at=datetime.now(UTC),
+        amount_paid=2000,
+        stripe_invoice_payment_id='pi_test',
+        stripe_subscription_id='sub_test123',
+        cancelled_at=None,
+    )
+
+    mock_request = Request(scope={'type': 'http'})
+    mock_request._base_url = URL('http://test.com/')
+
+    with (
+        patch('server.routes.billing.session_maker') as mock_session_maker,
+    ):
+        # Setup mock session to return existing active subscription
+        mock_session = MagicMock()
+        mock_session_maker.return_value.__enter__.return_value = mock_session
+        mock_session.query.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.first.return_value = mock_subscription_access
+
+        # Call the function and expect HTTPException
+        with pytest.raises(HTTPException) as exc_info:
+            await create_subscription_checkout_session(
+                mock_request, user_id='test_user'
+            )
+
+        assert exc_info.value.status_code == 400
+        assert (
+            'user already has an active subscription'
+            in str(exc_info.value.detail).lower()
+        )
+
+
+@pytest.mark.asyncio
+async def test_create_subscription_checkout_session_allows_after_cancellation():
+    """Test that creating a subscription is allowed when previous subscription was cancelled."""
+    mock_request = Request(scope={'type': 'http'})
+    mock_request._base_url = URL('http://test.com/')
+
+    mock_session_obj = MagicMock()
+    mock_session_obj.url = 'https://checkout.stripe.com/test-session'
+    mock_session_obj.id = 'test_session_id'
+
+    with (
+        patch('server.routes.billing.session_maker') as mock_session_maker,
         patch(
             'integrations.stripe_service.find_or_create_customer',
-            AsyncMock(return_value=mock_customer),
+            AsyncMock(return_value='cus_test123'),
+        ),
+        patch(
+            'stripe.checkout.Session.create_async',
+            AsyncMock(return_value=mock_session_obj),
+        ),
+        patch(
+            'server.routes.billing.SUBSCRIPTION_PRICE_DATA',
+            {'MONTHLY_SUBSCRIPTION': {'unit_amount': 2000}},
         ),
-        patch('stripe.checkout.Session.create_async', mock_create),
     ):
-        result = await create_customer_setup_session(mock_request)
+        # Setup mock session - the query should return None because cancelled subscriptions are filtered out
+        mock_session = MagicMock()
+        mock_session_maker.return_value.__enter__.return_value = mock_session
+        mock_session.query.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.first.return_value = None
 
-        assert isinstance(result, billing.CreateBillingSessionResponse)
+        # Should succeed
+        result = await create_subscription_checkout_session(
+            mock_request, user_id='test_user'
+        )
+
+        assert isinstance(result, CreateBillingSessionResponse)
+        assert result.redirect_url == 'https://checkout.stripe.com/test-session'
+
+
+@pytest.mark.asyncio
+async def test_create_subscription_checkout_session_success_no_existing():
+    """Test successful subscription creation when no existing subscription."""
+    mock_request = Request(scope={'type': 'http'})
+    mock_request._base_url = URL('http://test.com/')
+
+    mock_session_obj = MagicMock()
+    mock_session_obj.url = 'https://checkout.stripe.com/test-session'
+    mock_session_obj.id = 'test_session_id'
+
+    with (
+        patch('server.routes.billing.session_maker') as mock_session_maker,
+        patch(
+            'integrations.stripe_service.find_or_create_customer',
+            AsyncMock(return_value='cus_test123'),
+        ),
+        patch(
+            'stripe.checkout.Session.create_async',
+            AsyncMock(return_value=mock_session_obj),
+        ),
+        patch(
+            'server.routes.billing.SUBSCRIPTION_PRICE_DATA',
+            {'MONTHLY_SUBSCRIPTION': {'unit_amount': 2000}},
+        ),
+    ):
+        # Setup mock session to return no existing subscription
+        mock_session = MagicMock()
+        mock_session_maker.return_value.__enter__.return_value = mock_session
+        mock_session.query.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.filter.return_value.first.return_value = None
+
+        # Should succeed
+        result = await create_subscription_checkout_session(
+            mock_request, user_id='test_user'
+        )
+
+        assert isinstance(result, CreateBillingSessionResponse)
         assert result.redirect_url == 'https://checkout.stripe.com/test-session'

frontend/.husky/pre-commit

@@ -1,8 +1,6 @@
 # Run frontend checks
 echo "Running frontend checks..."
 cd frontend
-npm run lint
-npm run check-translation-completeness
 npx lint-staged
 
 # Run backend pre-commit

frontend/__tests__/api/file-service/file-service.api.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import OpenHands from "#/api/open-hands";
+import ConversationService from "#/api/conversation-service/conversation-service.api";
 import {
   FILE_VARIANTS_1,
   FILE_VARIANTS_2,
@@ -10,20 +10,20 @@ import {
  * You can find the mock handlers in `frontend/src/mocks/file-service-handlers.ts`.
  */
 
-describe("OpenHands File API", () => {
+describe("ConversationService File API", () => {
   it("should get a list of files", async () => {
-    await expect(OpenHands.getFiles("test-conversation-id")).resolves.toEqual(
-      FILE_VARIANTS_1,
-    );
+    await expect(
+      ConversationService.getFiles("test-conversation-id"),
+    ).resolves.toEqual(FILE_VARIANTS_1);
 
     await expect(
-      OpenHands.getFiles("test-conversation-id-2"),
+      ConversationService.getFiles("test-conversation-id-2"),
     ).resolves.toEqual(FILE_VARIANTS_2);
   });
 
   it("should get content of a file", async () => {
     await expect(
-      OpenHands.getFile("test-conversation-id", "file1.txt"),
+      ConversationService.getFile("test-conversation-id", "file1.txt"),
     ).resolves.toEqual("Content of file1.txt");
   });
 });

frontend/__tests__/components/chat/action-suggestions.test.tsx

@@ -1,287 +0,0 @@
-import { describe, expect, it, vi, beforeEach } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ActionSuggestions } from "#/components/features/chat/action-suggestions";
-import OpenHands from "#/api/open-hands";
-import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
-
-// Mock dependencies
-vi.mock("posthog-js", () => ({
-  default: {
-    capture: vi.fn(),
-  },
-}));
-
-const { useSelectorMock } = vi.hoisted(() => ({
-  useSelectorMock: vi.fn(),
-}));
-
-vi.mock("react-redux", () => ({
-  useSelector: useSelectorMock,
-}));
-
-vi.mock("#/context/auth-context", () => ({
-  useAuth: vi.fn(),
-}));
-
-// Mock react-i18next
-vi.mock("react-i18next", () => ({
-  useTranslation: () => ({
-    t: (key: string) => {
-      const translations: Record<string, string> = {
-        ACTION$PUSH_TO_BRANCH: "Push to Branch",
-        ACTION$PUSH_CREATE_PR: "Push & Create PR",
-        ACTION$PUSH_CHANGES_TO_PR: "Push Changes to PR",
-      };
-      return translations[key] || key;
-    },
-  }),
-}));
-
-vi.mock("react-router", () => ({
-  useParams: () => ({
-    conversationId: "test-conversation-id",
-  }),
-}));
-
-const renderActionSuggestions = () =>
-  render(<ActionSuggestions onSuggestionsClick={() => {}} />, {
-    wrapper: ({ children }) => (
-      <QueryClientProvider client={new QueryClient()}>
-        {children}
-      </QueryClientProvider>
-    ),
-  });
-
-describe("ActionSuggestions", () => {
-  // Setup mocks for each test
-  beforeEach(() => {
-    vi.clearAllMocks();
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      provider_tokens_set: {
-        github: "some-token",
-      },
-    });
-
-    useSelectorMock.mockReturnValue({
-      selectedRepository: "test-repo",
-    });
-  });
-
-  it("should render both GitHub buttons when GitHub token is set and repository is selected", async () => {
-    const getConversationSpy = vi.spyOn(OpenHands, "getConversation");
-    // @ts-expect-error - only required for testing
-    getConversationSpy.mockResolvedValue({
-      selected_repository: "test-repo",
-    });
-    renderActionSuggestions();
-
-    // Find all buttons with data-testid="suggestion"
-    const buttons = await screen.findAllByTestId("suggestion");
-
-    // Check if we have at least 2 buttons
-    expect(buttons.length).toBeGreaterThanOrEqual(2);
-
-    // Check if the buttons contain the expected text
-    const pushButton = buttons.find((button) =>
-      button.textContent?.includes("Push to Branch"),
-    );
-    const prButton = buttons.find((button) =>
-      button.textContent?.includes("Push & Create PR"),
-    );
-
-    expect(pushButton).toBeInTheDocument();
-    expect(prButton).toBeInTheDocument();
-  });
-
-  it("should not render buttons when GitHub token is not set", () => {
-    renderActionSuggestions();
-
-    expect(screen.queryByTestId("suggestion")).not.toBeInTheDocument();
-  });
-
-  it("should not render buttons when no repository is selected", () => {
-    useSelectorMock.mockReturnValue({
-      selectedRepository: null,
-    });
-
-    renderActionSuggestions();
-
-    expect(screen.queryByTestId("suggestion")).not.toBeInTheDocument();
-  });
-
-  it("should have different prompts for 'Push to Branch' and 'Push & Create PR' buttons", () => {
-    // This test verifies that the prompts are different in the component
-    renderActionSuggestions();
-
-    // Get the component instance to access the internal values
-    const pushBranchPrompt =
-      "Please push the changes to a remote branch on GitHub, but do NOT create a pull request. Please use the exact SAME branch name as the one you are currently on.";
-    const createPRPrompt =
-      "Please push the changes to GitHub and open a pull request. Please create a meaningful branch name that describes the changes. If a pull request template exists in the repository, please follow it when creating the PR description.";
-
-    // Verify the prompts are different
-    expect(pushBranchPrompt).not.toEqual(createPRPrompt);
-
-    // Verify the PR prompt mentions creating a meaningful branch name
-    expect(createPRPrompt).toContain("meaningful branch name");
-    expect(createPRPrompt).not.toContain("SAME branch name");
-  });
-
-  it("should use correct provider name based on conversation git_provider, not user authenticated providers", async () => {
-    // Test case for GitHub repository
-    const getConversationSpy = vi.spyOn(OpenHands, "getConversation");
-    getConversationSpy.mockResolvedValue({
-      conversation_id: "test-github",
-      title: "GitHub Test",
-      selected_repository: "test-repo",
-      git_provider: "github",
-      selected_branch: "main",
-      last_updated_at: new Date().toISOString(),
-      created_at: new Date().toISOString(),
-      status: "RUNNING",
-      runtime_status: "STATUS$READY",
-      url: null,
-      session_api_key: null,
-    });
-
-    // Mock user having both GitHub and Bitbucket tokens
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      provider_tokens_set: {
-        github: "github-token",
-        bitbucket: "bitbucket-token",
-      },
-    });
-
-    const onSuggestionsClick = vi.fn();
-    render(<ActionSuggestions onSuggestionsClick={onSuggestionsClick} />, {
-      wrapper: ({ children }) => (
-        <QueryClientProvider client={new QueryClient()}>
-          {children}
-        </QueryClientProvider>
-      ),
-    });
-
-    const buttons = await screen.findAllByTestId("suggestion");
-    const prButton = buttons.find((button) =>
-      button.textContent?.includes("Push & Create PR"),
-    );
-
-    expect(prButton).toBeInTheDocument();
-
-    if (prButton) {
-      prButton.click();
-    }
-
-    // The suggestion should mention GitHub, not Bitbucket
-    expect(onSuggestionsClick).toHaveBeenCalledWith(
-      expect.stringContaining("GitHub")
-    );
-    expect(onSuggestionsClick).not.toHaveBeenCalledWith(
-      expect.stringContaining("Bitbucket")
-    );
-  });
-
-  it("should use GitLab terminology when git_provider is gitlab", async () => {
-    const getConversationSpy = vi.spyOn(OpenHands, "getConversation");
-    getConversationSpy.mockResolvedValue({
-      conversation_id: "test-gitlab",
-      title: "GitLab Test",
-      selected_repository: "test-repo",
-      git_provider: "gitlab",
-      selected_branch: "main",
-      last_updated_at: new Date().toISOString(),
-      created_at: new Date().toISOString(),
-      status: "RUNNING",
-      runtime_status: "STATUS$READY",
-      url: null,
-      session_api_key: null,
-    });
-
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      provider_tokens_set: {
-        gitlab: "gitlab-token",
-      },
-    });
-
-    const onSuggestionsClick = vi.fn();
-    render(<ActionSuggestions onSuggestionsClick={onSuggestionsClick} />, {
-      wrapper: ({ children }) => (
-        <QueryClientProvider client={new QueryClient()}>
-          {children}
-        </QueryClientProvider>
-      ),
-    });
-
-    const buttons = await screen.findAllByTestId("suggestion");
-    const prButton = buttons.find((button) =>
-      button.textContent?.includes("Push & Create PR"),
-    );
-
-    if (prButton) {
-      prButton.click();
-    }
-
-    // Should mention GitLab and "merge request" instead of "pull request"
-    expect(onSuggestionsClick).toHaveBeenCalledWith(
-      expect.stringContaining("GitLab")
-    );
-    expect(onSuggestionsClick).toHaveBeenCalledWith(
-      expect.stringContaining("merge request")
-    );
-  });
-
-  it("should use Bitbucket terminology when git_provider is bitbucket", async () => {
-    const getConversationSpy = vi.spyOn(OpenHands, "getConversation");
-    getConversationSpy.mockResolvedValue({
-      conversation_id: "test-bitbucket",
-      title: "Bitbucket Test",
-      selected_repository: "test-repo",
-      git_provider: "bitbucket",
-      selected_branch: "main",
-      last_updated_at: new Date().toISOString(),
-      created_at: new Date().toISOString(),
-      status: "RUNNING",
-      runtime_status: "STATUS$READY",
-      url: null,
-      session_api_key: null,
-    });
-
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
-    getSettingsSpy.mockResolvedValue({
-      ...MOCK_DEFAULT_USER_SETTINGS,
-      provider_tokens_set: {
-        bitbucket: "bitbucket-token",
-      },
-    });
-
-    const onSuggestionsClick = vi.fn();
-    render(<ActionSuggestions onSuggestionsClick={onSuggestionsClick} />, {
-      wrapper: ({ children }) => (
-        <QueryClientProvider client={new QueryClient()}>
-          {children}
-        </QueryClientProvider>
-      ),
-    });
-
-    const buttons = await screen.findAllByTestId("suggestion");
-    const prButton = buttons.find((button) =>
-      button.textContent?.includes("Push & Create PR"),
-    );
-
-    if (prButton) {
-      prButton.click();
-    }
-
-    // Should mention Bitbucket
-    expect(onSuggestionsClick).toHaveBeenCalledWith(
-      expect.stringContaining("Bitbucket")
-    );
-  });
-});

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

@@ -1,256 +0,0 @@
-import userEvent from "@testing-library/user-event";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, afterEach, vi, it, expect } from "vitest";
-import { ChatInput } from "#/components/features/chat/chat-input";
-
-describe("ChatInput", () => {
-  const onSubmitMock = vi.fn();
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("should render a textarea", () => {
-    render(<ChatInput onSubmit={onSubmitMock} />);
-    expect(screen.getByTestId("chat-input")).toBeInTheDocument();
-    expect(screen.getByRole("textbox")).toBeInTheDocument();
-  });
-
-  it("should call onSubmit when the user types and presses enter", async () => {
-    const user = userEvent.setup();
-    render(<ChatInput onSubmit={onSubmitMock} />);
-    const textarea = screen.getByRole("textbox");
-
-    await user.type(textarea, "Hello, world!");
-    await user.keyboard("{Enter}");
-
-    expect(onSubmitMock).toHaveBeenCalledWith("Hello, world!");
-  });
-
-  it("should call onSubmit when pressing the submit button", async () => {
-    const user = userEvent.setup();
-    render(<ChatInput onSubmit={onSubmitMock} />);
-    const textarea = screen.getByRole("textbox");
-    const button = screen.getByRole("button");
-
-    await user.type(textarea, "Hello, world!");
-    await user.click(button);
-
-    expect(onSubmitMock).toHaveBeenCalledWith("Hello, world!");
-  });
-
-  it("should not call onSubmit when the message is empty", async () => {
-    const user = userEvent.setup();
-    render(<ChatInput onSubmit={onSubmitMock} />);
-    const button = screen.getByRole("button");
-
-    await user.click(button);
-    expect(onSubmitMock).not.toHaveBeenCalled();
-
-    await user.keyboard("{Enter}");
-    expect(onSubmitMock).not.toHaveBeenCalled();
-  });
-
-  it("should not call onSubmit when the message is only whitespace", async () => {
-    const user = userEvent.setup();
-    render(<ChatInput onSubmit={onSubmitMock} />);
-    const textarea = screen.getByRole("textbox");
-
-    await user.type(textarea, "   ");
-    await user.keyboard("{Enter}");
-
-    expect(onSubmitMock).not.toHaveBeenCalled();
-
-    await user.type(textarea, " \t\n");
-    await user.keyboard("{Enter}");
-
-    expect(onSubmitMock).not.toHaveBeenCalled();
-  });
-
-  it("should disable submit", async () => {
-    const user = userEvent.setup();
-    render(<ChatInput disabled onSubmit={onSubmitMock} />);
-
-    const button = screen.getByRole("button");
-    const textarea = screen.getByRole("textbox");
-
-    await user.type(textarea, "Hello, world!");
-
-    expect(button).toBeDisabled();
-    await user.click(button);
-    expect(onSubmitMock).not.toHaveBeenCalled();
-
-    await user.keyboard("{Enter}");
-    expect(onSubmitMock).not.toHaveBeenCalled();
-  });
-
-  it("should render a placeholder with translation key", () => {
-    render(<ChatInput onSubmit={onSubmitMock} />);
-
-    const textarea = screen.getByPlaceholderText("SUGGESTIONS$WHAT_TO_BUILD");
-    expect(textarea).toBeInTheDocument();
-  });
-
-  it("should create a newline instead of submitting when shift + enter is pressed", async () => {
-    const user = userEvent.setup();
-    render(<ChatInput onSubmit={onSubmitMock} />);
-    const textarea = screen.getByRole("textbox");
-
-    await user.type(textarea, "Hello, world!");
-    await user.keyboard("{Shift>} {Enter}"); // Shift + Enter
-
-    expect(onSubmitMock).not.toHaveBeenCalled();
-    // expect(textarea).toHaveValue("Hello, world!\n");
-  });
-
-  it("should clear the input message after sending a message", async () => {
-    const user = userEvent.setup();
-    render(<ChatInput onSubmit={onSubmitMock} />);
-    const textarea = screen.getByRole("textbox");
-    const button = screen.getByRole("button");
-
-    await user.type(textarea, "Hello, world!");
-    await user.keyboard("{Enter}");
-    expect(textarea).toHaveValue("");
-
-    await user.type(textarea, "Hello, world!");
-    await user.click(button);
-    expect(textarea).toHaveValue("");
-  });
-
-  it("should hide the submit button", () => {
-    render(<ChatInput onSubmit={onSubmitMock} showButton={false} />);
-    expect(screen.queryByRole("button")).not.toBeInTheDocument();
-  });
-
-  it("should call onChange when the user types", async () => {
-    const user = userEvent.setup();
-    const onChangeMock = vi.fn();
-    render(<ChatInput onSubmit={onSubmitMock} onChange={onChangeMock} />);
-    const textarea = screen.getByRole("textbox");
-
-    await user.type(textarea, "Hello, world!");
-
-    expect(onChangeMock).toHaveBeenCalledTimes("Hello, world!".length);
-  });
-
-  it("should have set the passed value", () => {
-    render(<ChatInput value="Hello, world!" onSubmit={onSubmitMock} />);
-    const textarea = screen.getByRole("textbox");
-
-    expect(textarea).toHaveValue("Hello, world!");
-  });
-
-  it("should display the stop button and trigger the callback", async () => {
-    const user = userEvent.setup();
-    const onStopMock = vi.fn();
-    render(
-      <ChatInput onSubmit={onSubmitMock} button="stop" onStop={onStopMock} />,
-    );
-    const stopButton = screen.getByTestId("stop-button");
-
-    await user.click(stopButton);
-    expect(onStopMock).toHaveBeenCalledOnce();
-  });
-
-  it("should call onFocus and onBlur when the textarea is focused and blurred", async () => {
-    const user = userEvent.setup();
-    const onFocusMock = vi.fn();
-    const onBlurMock = vi.fn();
-    render(
-      <ChatInput
-        onSubmit={onSubmitMock}
-        onFocus={onFocusMock}
-        onBlur={onBlurMock}
-      />,
-    );
-    const textarea = screen.getByRole("textbox");
-
-    await user.click(textarea);
-    expect(onFocusMock).toHaveBeenCalledOnce();
-
-    await user.tab();
-    expect(onBlurMock).toHaveBeenCalledOnce();
-  });
-
-  it("should handle text paste correctly", () => {
-    const onSubmit = vi.fn();
-    const onChange = vi.fn();
-
-    render(<ChatInput onSubmit={onSubmit} onChange={onChange} />);
-
-    const input = screen.getByTestId("chat-input").querySelector("textarea");
-    expect(input).toBeTruthy();
-
-    // Fire paste event with text data
-    fireEvent.paste(input!, {
-      clipboardData: {
-        getData: (type: string) => (type === "text/plain" ? "test paste" : ""),
-        files: [],
-      },
-    });
-  });
-
-  it("should handle image paste correctly", () => {
-    const onSubmit = vi.fn();
-    const onFilesPaste = vi.fn();
-
-    render(<ChatInput onSubmit={onSubmit} onFilesPaste={onFilesPaste} />);
-
-    const input = screen.getByTestId("chat-input").querySelector("textarea");
-    expect(input).toBeTruthy();
-
-    // Create a paste event with an image file
-    const file = new File(["dummy content"], "image.png", {
-      type: "image/png",
-    });
-
-    // Fire paste event with image data
-    fireEvent.paste(input!, {
-      clipboardData: {
-        getData: () => "",
-        files: [file],
-      },
-    });
-
-    // Verify file paste was handled
-    expect(onFilesPaste).toHaveBeenCalledWith([file]);
-  });
-
-  it("should use the default maxRows value", () => {
-    // We can't directly test the maxRows prop as it's not exposed in the DOM
-    // Instead, we'll verify the component renders with the default props
-    render(<ChatInput onSubmit={onSubmitMock} />);
-    const textarea = screen.getByRole("textbox");
-    expect(textarea).toBeInTheDocument();
-
-    // The actual verification of maxRows=16 is handled internally by the TextareaAutosize component
-    // and affects how many rows the textarea can expand to
-  });
-
-  it("should not submit when Enter is pressed during IME composition", async () => {
-    const user = userEvent.setup();
-    render(<ChatInput onSubmit={onSubmitMock} />);
-    const textarea = screen.getByRole("textbox");
-
-    await user.type(textarea, "こんにちは");
-
-    // Simulate Enter during IME composition
-    fireEvent.keyDown(textarea, {
-      key: "Enter",
-      isComposing: true,
-      nativeEvent: { isComposing: true },
-    });
-
-    expect(onSubmitMock).not.toHaveBeenCalled();
-
-    // Simulate normal Enter after composition is done
-    fireEvent.keyDown(textarea, {
-      key: "Enter",
-      isComposing: false,
-      nativeEvent: { isComposing: false },
-    });
-
-    expect(onSubmitMock).toHaveBeenCalledWith("こんにちは");
-  });
-});

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

@@ -1,16 +1,254 @@
-import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
-import { screen, waitFor, within } from "@testing-library/react";
+import {
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  test,
+  vi,
+} from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { renderWithProviders } from "test-utils";
 import type { Message } from "#/message";
 import { SUGGESTIONS } from "#/utils/suggestions";
 import { ChatInterface } from "#/components/features/chat/chat-interface";
+import { useWsClient } from "#/context/ws-client-provider";
+import { useOptimisticUserMessage } from "#/hooks/use-optimistic-user-message";
+import { useWSErrorMessage } from "#/hooks/use-ws-error-message";
+import { useConfig } from "#/hooks/query/use-config";
+import { useGetTrajectory } from "#/hooks/mutation/use-get-trajectory";
+import { useUploadFiles } from "#/hooks/mutation/use-upload-files";
+import { OpenHandsAction } from "#/types/core/actions";
+
+// Mock the hooks
+vi.mock("#/context/ws-client-provider");
+vi.mock("#/hooks/use-optimistic-user-message");
+vi.mock("#/hooks/use-ws-error-message");
+vi.mock("#/hooks/query/use-config");
+vi.mock("#/hooks/mutation/use-get-trajectory");
+vi.mock("#/hooks/mutation/use-upload-files");
+
+// Mock React Router hooks at the top level
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual("react-router");
+  return {
+    ...actual,
+    useNavigate: () => vi.fn(),
+    useParams: () => ({ conversationId: "test-conversation-id" }),
+    useRouteLoaderData: vi.fn(() => ({})),
+  };
+});
+
+// Mock other hooks that might be used by the component
+vi.mock("#/hooks/use-user-providers", () => ({
+  useUserProviders: () => ({
+    providers: [],
+  }),
+}));
+
+vi.mock("#/hooks/use-conversation-name-context-menu", () => ({
+  useConversationNameContextMenu: () => ({
+    isOpen: false,
+    contextMenuRef: { current: null },
+    handleContextMenu: vi.fn(),
+    handleClose: vi.fn(),
+    handleRename: vi.fn(),
+    handleDelete: vi.fn(),
+  }),
+}));
+
+vi.mock("react-redux", async () => {
+  const actual = await vi.importActual("react-redux");
+  return {
+    ...actual,
+    useSelector: vi.fn((selector) => {
+      // Create a mock state object
+      const mockState = {
+        agent: {
+          curAgentState: "AWAITING_USER_INPUT",
+        },
+        initialQuery: {
+          selectedRepository: null,
+          replayJson: null,
+        },
+        conversation: {
+          messageToSend: null,
+          files: [],
+          images: [],
+          loadingFiles: [],
+          loadingImages: [],
+        },
+        status: {
+          curStatusMessage: null,
+        },
+      };
+
+      // Execute the selector function with our mock state
+      return selector(mockState);
+    }),
+    useDispatch: vi.fn(() => vi.fn()),
+  };
+});
+
+// Helper function to render with Router context
+const renderChatInterfaceWithRouter = () =>
+  renderWithProviders(
+    <MemoryRouter>
+      <ChatInterface />
+    </MemoryRouter>,
+  );
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const renderChatInterface = (messages: Message[]) =>
-  renderWithProviders(<ChatInterface />);
+  renderWithProviders(
+    <MemoryRouter>
+      <ChatInterface />
+    </MemoryRouter>,
+  );
 
-describe("Empty state", () => {
+// Helper function to render with QueryClientProvider and Router (for newer tests)
+const renderWithQueryClient = (
+  ui: React.ReactElement,
+  queryClient: QueryClient,
+) =>
+  render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+
+describe("ChatInterface - Chat Suggestions", () => {
+  // Create a new QueryClient for each test
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+
+    // Default mock implementations
+    (useWsClient as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      send: vi.fn(),
+      isLoadingMessages: false,
+      parsedEvents: [],
+    });
+    (
+      useOptimisticUserMessage as unknown as ReturnType<typeof vi.fn>
+    ).mockReturnValue({
+      setOptimisticUserMessage: vi.fn(),
+      getOptimisticUserMessage: vi.fn(() => null),
+    });
+    (useWSErrorMessage as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      getErrorMessage: vi.fn(() => null),
+      setErrorMessage: vi.fn(),
+      removeErrorMessage: vi.fn(),
+    });
+    (useConfig as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      data: { APP_MODE: "local" },
+    });
+    (useGetTrajectory as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      mutate: vi.fn(),
+      mutateAsync: vi.fn(),
+      isLoading: false,
+    });
+    (useUploadFiles as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      mutateAsync: vi
+        .fn()
+        .mockResolvedValue({ skipped_files: [], uploaded_files: [] }),
+      isLoading: false,
+    });
+  });
+
+  test("should show chat suggestions when there are no events", () => {
+    (useWsClient as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      send: vi.fn(),
+      isLoadingMessages: false,
+      parsedEvents: [],
+    });
+
+    renderWithQueryClient(<ChatInterface />, queryClient);
+
+    // Check if ChatSuggestions is rendered
+    expect(screen.getByTestId("chat-suggestions")).toBeInTheDocument();
+  });
+
+  test("should show chat suggestions when there are only environment events", () => {
+    const environmentEvent: OpenHandsAction = {
+      id: 1,
+      source: "environment",
+      action: "system",
+      args: {
+        content: "source .openhands/setup.sh",
+        tools: null,
+        openhands_version: null,
+        agent_class: null,
+      },
+      message: "Running setup script",
+      timestamp: "2025-07-01T00:00:00Z",
+    };
+
+    (useWsClient as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      send: vi.fn(),
+      isLoadingMessages: false,
+      parsedEvents: [environmentEvent],
+    });
+
+    renderWithQueryClient(<ChatInterface />, queryClient);
+
+    // Check if ChatSuggestions is still rendered with environment events
+    expect(screen.getByTestId("chat-suggestions")).toBeInTheDocument();
+  });
+
+  test("should hide chat suggestions when there is a user message", () => {
+    const userEvent: OpenHandsAction = {
+      id: 1,
+      source: "user",
+      action: "message",
+      args: {
+        content: "Hello",
+        image_urls: [],
+        file_urls: [],
+      },
+      message: "Hello",
+      timestamp: "2025-07-01T00:00:00Z",
+    };
+
+    (useWsClient as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      send: vi.fn(),
+      isLoadingMessages: false,
+      parsedEvents: [userEvent],
+    });
+
+    renderWithQueryClient(<ChatInterface />, queryClient);
+
+    // Check if ChatSuggestions is not rendered with user events
+    expect(screen.queryByTestId("chat-suggestions")).not.toBeInTheDocument();
+  });
+
+  test("should hide chat suggestions when there is an optimistic user message", () => {
+    (
+      useOptimisticUserMessage as unknown as ReturnType<typeof vi.fn>
+    ).mockReturnValue({
+      setOptimisticUserMessage: vi.fn(),
+      getOptimisticUserMessage: vi.fn(() => "Optimistic message"),
+    });
+
+    renderWithQueryClient(<ChatInterface />, queryClient);
+
+    // Check if ChatSuggestions is not rendered with optimistic user message
+    expect(screen.queryByTestId("chat-suggestions")).not.toBeInTheDocument();
+  });
+});
+
+describe("ChatInterface - Empty state", () => {
   const { send: sendMock } = vi.hoisted(() => ({
     send: vi.fn(),
   }));
@@ -20,21 +258,52 @@ describe("Empty state", () => {
       send: sendMock,
       status: "CONNECTED",
       isLoadingMessages: false,
+      parsedEvents: [],
     })),
   }));
 
   beforeAll(() => {
-    vi.mock("react-router", async (importActual) => ({
-      ...(await importActual<typeof import("react-router")>()),
-      useRouteLoaderData: vi.fn(() => ({})),
-    }));
-
     vi.mock("#/context/socket", async (importActual) => ({
       ...(await importActual<typeof import("#/context/ws-client-provider")>()),
       useWsClient: useWsClientMock,
     }));
   });
 
+  beforeEach(() => {
+    // Reset mocks to ensure empty state
+    (useWsClient as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      send: sendMock,
+      status: "CONNECTED",
+      isLoadingMessages: false,
+      parsedEvents: [],
+    });
+    (
+      useOptimisticUserMessage as unknown as ReturnType<typeof vi.fn>
+    ).mockReturnValue({
+      setOptimisticUserMessage: vi.fn(),
+      getOptimisticUserMessage: vi.fn(() => null),
+    });
+    (useWSErrorMessage as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      getErrorMessage: vi.fn(() => null),
+      setErrorMessage: vi.fn(),
+      removeErrorMessage: vi.fn(),
+    });
+    (useConfig as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      data: { APP_MODE: "local" },
+    });
+    (useGetTrajectory as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      mutate: vi.fn(),
+      mutateAsync: vi.fn(),
+      isLoading: false,
+    });
+    (useUploadFiles as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+      mutateAsync: vi
+        .fn()
+        .mockResolvedValue({ skipped_files: [], uploaded_files: [] }),
+      isLoading: false,
+    });
+  });
+
   afterEach(() => {
     vi.clearAllMocks();
   });
@@ -42,9 +311,9 @@ describe("Empty state", () => {
   it.todo("should render suggestions if empty");
 
   it("should render the default suggestions", () => {
-    renderWithProviders(<ChatInterface />);
+    renderChatInterfaceWithRouter();
 
-    const suggestions = screen.getByTestId("suggestions");
+    const suggestions = screen.getByTestId("chat-suggestions");
     const repoSuggestions = Object.keys(SUGGESTIONS.repo);
 
     // check that there are at most 4 suggestions displayed
@@ -65,18 +334,19 @@ describe("Empty state", () => {
         send: sendMock,
         status: "CONNECTED",
         isLoadingMessages: false,
+        parsedEvents: [],
       }));
       const user = userEvent.setup();
-      renderWithProviders(<ChatInterface />);
+      renderChatInterfaceWithRouter();
 
-      const suggestions = screen.getByTestId("suggestions");
+      const suggestions = screen.getByTestId("chat-suggestions");
       const displayedSuggestions = within(suggestions).getAllByRole("button");
       const input = screen.getByTestId("chat-input");
 
       await user.click(displayedSuggestions[0]);
 
       // user message loaded to input
-      expect(screen.queryByTestId("suggestions")).toBeInTheDocument();
+      expect(screen.queryByTestId("chat-suggestions")).toBeInTheDocument();
       expect(input).toHaveValue(displayedSuggestions[0].textContent);
     },
   );
@@ -88,11 +358,12 @@ describe("Empty state", () => {
         send: sendMock,
         status: "CONNECTED",
         isLoadingMessages: false,
+        parsedEvents: [],
       }));
       const user = userEvent.setup();
-      const { rerender } = renderWithProviders(<ChatInterface />);
+      const { rerender } = renderChatInterfaceWithRouter();
 
-      const suggestions = screen.getByTestId("suggestions");
+      const suggestions = screen.getByTestId("chat-suggestions");
       const displayedSuggestions = within(suggestions).getAllByRole("button");
 
       await user.click(displayedSuggestions[0]);
@@ -102,8 +373,13 @@ describe("Empty state", () => {
         send: sendMock,
         status: "CONNECTED",
         isLoadingMessages: false,
+        parsedEvents: [],
       }));
-      rerender(<ChatInterface />);
+      rerender(
+        <MemoryRouter>
+          <ChatInterface />
+        </MemoryRouter>,
+      );
 
       await waitFor(() =>
         expect(sendMock).toHaveBeenCalledWith(expect.any(String)),
@@ -112,7 +388,7 @@ describe("Empty state", () => {
   );
 });
 
-describe.skip("ChatInterface", () => {
+describe.skip("ChatInterface - General functionality", () => {
   beforeAll(() => {
     // mock useScrollToBottom hook
     vi.mock("#/hooks/useScrollToBottom", () => ({
@@ -193,7 +469,11 @@ describe.skip("ChatInterface", () => {
       },
     ];
 
-    rerender(<ChatInterface />);
+    rerender(
+      <MemoryRouter>
+        <ChatInterface />
+      </MemoryRouter>,
+    );
 
     const imageCarousel = screen.getByTestId("image-carousel");
     expect(imageCarousel).toBeInTheDocument();
@@ -232,7 +512,11 @@ describe.skip("ChatInterface", () => {
       pending: true,
     });
 
-    rerender(<ChatInterface />);
+    rerender(
+      <MemoryRouter>
+        <ChatInterface />
+      </MemoryRouter>,
+    );
 
     expect(screen.getByTestId("continue-action-button")).toBeInTheDocument();
   });
@@ -260,10 +544,7 @@ describe.skip("ChatInterface", () => {
   });
 
   it("should render both GitHub buttons initially when ghToken is available", () => {
-    vi.mock("react-router", async (importActual) => ({
-      ...(await importActual<typeof import("react-router")>()),
-      useRouteLoaderData: vi.fn(() => ({ ghToken: "test-token" })),
-    }));
+    // Note: This test may need adjustment since useRouteLoaderData is now globally mocked
 
     const messages: Message[] = [
       {
@@ -286,10 +567,7 @@ describe.skip("ChatInterface", () => {
   });
 
   it("should render only 'Push changes to PR' button after PR is created", async () => {
-    vi.mock("react-router", async (importActual) => ({
-      ...(await importActual<typeof import("react-router")>()),
-      useRouteLoaderData: vi.fn(() => ({ ghToken: "test-token" })),
-    }));
+    // Note: This test may need adjustment since useRouteLoaderData is now globally mocked
 
     const messages: Message[] = [
       {
@@ -308,7 +586,11 @@ describe.skip("ChatInterface", () => {
     await user.click(prButton);
 
     // Re-render to trigger state update
-    rerender(<ChatInterface />);
+    rerender(
+      <MemoryRouter>
+        <ChatInterface />
+      </MemoryRouter>,
+    );
 
     // Verify only one button is shown
     const pushToPrButton = screen.getByRole("button", {
@@ -358,7 +640,11 @@ describe.skip("ChatInterface", () => {
       pending: true,
     });
 
-    rerender(<ChatInterface />);
+    rerender(
+      <MemoryRouter>
+        <ChatInterface />
+      </MemoryRouter>,
+    );
 
     expect(screen.getByTestId("feedback-actions")).toBeInTheDocument();
   });

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

@@ -3,7 +3,7 @@ import { screen } from "@testing-library/react";
 import { renderWithProviders } from "test-utils";
 import { createRoutesStub } from "react-router";
 import { ExpandableMessage } from "#/components/features/chat/expandable-message";
-import OpenHands from "#/api/open-hands";
+import OptionService from "#/api/option-service/option-service.api";
 
 vi.mock("react-i18next", async () => {
   const actual = await vi.importActual("react-i18next");
@@ -113,7 +113,7 @@ describe("ExpandableMessage", () => {
   });
 
   it("should render the out of credits message when the user is out of credits", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     // @ts-expect-error - We only care about the APP_MODE and FEATURE_FLAGS fields
     getConfigSpy.mockResolvedValue({
       APP_MODE: "saas",

frontend/__tests__/components/context-menu/account-settings-context-menu.test.tsx

@@ -2,6 +2,8 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, test, vi } from "vitest";
 import { AccountSettingsContextMenu } from "#/components/features/context-menu/account-settings-context-menu";
+import { MemoryRouter } from "react-router";
+import { renderWithProviders } from "../../../test-utils";
 
 describe("AccountSettingsContextMenu", () => {
   const user = userEvent.setup();
@@ -9,6 +11,11 @@ describe("AccountSettingsContextMenu", () => {
   const onLogoutMock = vi.fn();
   const onCloseMock = vi.fn();
 
+  // Create a wrapper with MemoryRouter and renderWithProviders
+  const renderWithRouter = (ui: React.ReactElement) => {
+    return renderWithProviders(<MemoryRouter>{ui}</MemoryRouter>);
+  };
+
   afterEach(() => {
     onClickAccountSettingsMock.mockClear();
     onLogoutMock.mockClear();
@@ -16,7 +23,7 @@ describe("AccountSettingsContextMenu", () => {
   });
 
   it("should always render the right options", () => {
-    render(
+    renderWithRouter(
       <AccountSettingsContextMenu
         onLogout={onLogoutMock}
         onClose={onCloseMock}
@@ -30,7 +37,7 @@ describe("AccountSettingsContextMenu", () => {
   });
 
   it("should call onLogout when the logout option is clicked", async () => {
-    render(
+    renderWithRouter(
       <AccountSettingsContextMenu
         onLogout={onLogoutMock}
         onClose={onCloseMock}
@@ -44,7 +51,7 @@ describe("AccountSettingsContextMenu", () => {
   });
 
   test("logout button is always enabled", async () => {
-    render(
+    renderWithRouter(
       <AccountSettingsContextMenu
         onLogout={onLogoutMock}
         onClose={onCloseMock}
@@ -58,7 +65,7 @@ describe("AccountSettingsContextMenu", () => {
   });
 
   it("should call onClose when clicking outside of the element", async () => {
-    render(
+    renderWithRouter(
       <AccountSettingsContextMenu
         onLogout={onLogoutMock}
         onClose={onCloseMock}

frontend/__tests__/components/features/analytics/analytics-consent-form-modal.test.tsx

@@ -3,13 +3,13 @@ import { describe, expect, it, vi } from "vitest";
 import { render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { AnalyticsConsentFormModal } from "#/components/features/analytics/analytics-consent-form-modal";
-import OpenHands from "#/api/open-hands";
+import SettingsService from "#/settings-service/settings-service.api";
 
 describe("AnalyticsConsentFormModal", () => {
   it("should call saveUserSettings with consent", async () => {
     const user = userEvent.setup();
     const onCloseMock = vi.fn();
-    const saveUserSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+    const saveUserSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
 
     render(<AnalyticsConsentFormModal onClose={onCloseMock} />, {
       wrapper: ({ children }) => (

frontend/__tests__/components/features/chat/messages.test.tsx

@@ -8,7 +8,7 @@ import {
   UserMessageAction,
 } from "#/types/core/actions";
 import { OpenHandsObservation } from "#/types/core/observations";
-import OpenHands from "#/api/open-hands";
+import ConversationService from "#/api/conversation-service/conversation-service.api";
 import { Conversation } from "#/api/open-hands.types";
 
 vi.mock("react-router", () => ({
@@ -80,7 +80,7 @@ describe("Messages", () => {
   });
 
   it("should render a launch to microagent action button on chat messages only if it is a user message", () => {
-    const getConversationSpy = vi.spyOn(OpenHands, "getConversation");
+    const getConversationSpy = vi.spyOn(ConversationService, "getConversation");
     const mockConversation: Conversation = {
       conversation_id: "123",
       title: "Test Conversation",

frontend/__tests__/components/features/conversation-panel/conversation-card.test.tsx

@@ -12,7 +12,7 @@ import {
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders } from "test-utils";
 import { formatTimeDelta } from "#/utils/format-time-delta";
-import { ConversationCard } from "#/components/features/conversation-panel/conversation-card";
+import { ConversationCard } from "#/components/features/conversation-panel/conversation-card/conversation-card";
 import { clickOnEditButton } from "./utils";
 
 // We'll use the actual i18next implementation but override the translation function
@@ -64,7 +64,6 @@ describe("ConversationCard", () => {
       <ConversationCard
         onDelete={onDelete}
         onChangeTitle={onChangeTitle}
-        isActive
         title="Conversation 1"
         selectedRepository={null}
         lastUpdatedAt="2021-10-01T12:00:00Z"
@@ -76,7 +75,6 @@ describe("ConversationCard", () => {
     within(card).getByText("Conversation 1");
 
     // Just check that the card contains the expected text content
-    expect(card).toHaveTextContent("Created");
     expect(card).toHaveTextContent("ago");
 
     // Use a regex to match the time part since it might have whitespace
@@ -91,7 +89,6 @@ describe("ConversationCard", () => {
       <ConversationCard
         onDelete={onDelete}
         onChangeTitle={onChangeTitle}
-        isActive
         title="Conversation 1"
         selectedRepository={null}
         lastUpdatedAt="2021-10-01T12:00:00Z"
@@ -106,7 +103,6 @@ describe("ConversationCard", () => {
       <ConversationCard
         onDelete={onDelete}
         onChangeTitle={onChangeTitle}
-        isActive
         title="Conversation 1"
         selectedRepository={{
           selected_repository: "org/selectedRepository",
@@ -127,7 +123,6 @@ describe("ConversationCard", () => {
       <ConversationCard
         onDelete={onDelete}
         onChangeTitle={onChangeTitle}
-        isActive
         title="Conversation 1"
         selectedRepository={null}
         lastUpdatedAt="2021-10-01T12:00:00Z"
@@ -136,7 +131,14 @@ describe("ConversationCard", () => {
       />,
     );
 
-    expect(screen.queryByTestId("context-menu")).not.toBeInTheDocument();
+    // Context menu is always in the DOM but hidden by CSS classes when contextMenuOpen is false
+    const contextMenu = screen.queryByTestId("context-menu");
+    if (contextMenu) {
+      const contextMenuParent = contextMenu.parentElement;
+      if (contextMenuParent) {
+        expect(contextMenuParent).toHaveClass("opacity-0", "invisible");
+      }
+    }
 
     const ellipsisButton = screen.getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
@@ -148,7 +150,6 @@ describe("ConversationCard", () => {
       <ConversationCard
         onDelete={onDelete}
         onChangeTitle={onChangeTitle}
-        isActive
         title="Conversation 1"
         selectedRepository={null}
         lastUpdatedAt="2021-10-01T12:00:00Z"
@@ -170,7 +171,6 @@ describe("ConversationCard", () => {
     renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
-        isActive
         onChangeTitle={onChangeTitle}
         title="Conversation 1"
         selectedRepository={null}
@@ -194,7 +194,6 @@ describe("ConversationCard", () => {
     renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
-        isActive
         onChangeTitle={onChangeTitle}
         title="Conversation 1"
         selectedRepository={{
@@ -223,7 +222,6 @@ describe("ConversationCard", () => {
     const { rerender } = renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
-        isActive
         title="Conversation 1"
         selectedRepository={null}
         lastUpdatedAt="2021-10-01T12:00:00Z"
@@ -239,7 +237,6 @@ describe("ConversationCard", () => {
     rerender(
       <ConversationCard
         onDelete={onDelete}
-        isActive
         title="Conversation 1"
         selectedRepository={null}
         lastUpdatedAt="2021-10-01T12:00:00Z"
@@ -252,7 +249,14 @@ describe("ConversationCard", () => {
     const title = screen.getByTestId("conversation-card-title");
 
     expect(title).toBeEnabled();
-    expect(screen.queryByTestId("context-menu")).not.toBeInTheDocument();
+    // Context menu should be hidden after edit button is clicked (check CSS classes on parent div)
+    const contextMenu = screen.queryByTestId("context-menu");
+    if (contextMenu) {
+      const contextMenuParent = contextMenu.parentElement;
+      if (contextMenuParent) {
+        expect(contextMenuParent).toHaveClass("opacity-0", "invisible");
+      }
+    }
     // expect to be focused
     expect(document.activeElement).toBe(title);
 
@@ -261,16 +265,14 @@ describe("ConversationCard", () => {
     await user.tab();
 
     expect(onChangeTitle).toHaveBeenCalledWith("New Conversation Name");
-    expect(title).toHaveValue("New Conversation Name");
   });
 
-  it("should reset title and not call onChangeTitle when the title is empty", async () => {
+  it("should not call onChange title", async () => {
     const user = userEvent.setup();
     const onContextMenuToggle = vi.fn();
     renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
-        isActive
         onChangeTitle={onChangeTitle}
         title="Conversation 1"
         selectedRepository={null}
@@ -287,8 +289,7 @@ describe("ConversationCard", () => {
     await user.clear(title);
     await user.tab();
 
-    expect(onChangeTitle).not.toHaveBeenCalled();
-    expect(title).toHaveValue("Conversation 1");
+    expect(onChangeTitle).not.toBeCalled();
   });
 
   test("clicking the title should trigger the onClick handler", async () => {
@@ -297,7 +298,6 @@ describe("ConversationCard", () => {
       <ConversationCard
         onClick={onClick}
         onDelete={onDelete}
-        isActive
         onChangeTitle={onChangeTitle}
         title="Conversation 1"
         selectedRepository={null}
@@ -317,7 +317,6 @@ describe("ConversationCard", () => {
     renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
-        isActive
         onChangeTitle={onChangeTitle}
         title="Conversation 1"
         selectedRepository={null}
@@ -341,7 +340,6 @@ describe("ConversationCard", () => {
     renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
-        isActive
         onChangeTitle={onChangeTitle}
         title="Conversation 1"
         selectedRepository={null}
@@ -365,7 +363,6 @@ describe("ConversationCard", () => {
       <ConversationCard
         onDelete={onDelete}
         onChangeTitle={onChangeTitle}
-        isActive
         title="Conversation 1"
         selectedRepository={null}
         lastUpdatedAt="2021-10-01T12:00:00Z"
@@ -385,7 +382,6 @@ describe("ConversationCard", () => {
         onDelete={onDelete}
         onChangeTitle={onChangeTitle}
         showOptions
-        isActive
         title="Conversation 1"
         selectedRepository={null}
         lastUpdatedAt="2021-10-01T12:00:00Z"
@@ -405,7 +401,6 @@ describe("ConversationCard", () => {
     renderWithProviders(
       <ConversationCard
         onDelete={onDelete}
-        isActive
         onChangeTitle={onChangeTitle}
         title="Conversation 1"
         selectedRepository={null}
@@ -499,38 +494,4 @@ describe("ConversationCard", () => {
 
     expect(screen.queryByTestId("ellipsis-button")).not.toBeInTheDocument();
   });
-
-  describe("state indicator", () => {
-    it("should render the 'STOPPED' indicator by default", () => {
-      renderWithProviders(
-        <ConversationCard
-          onDelete={onDelete}
-          isActive
-          onChangeTitle={onChangeTitle}
-          title="Conversation 1"
-          selectedRepository={null}
-          lastUpdatedAt="2021-10-01T12:00:00Z"
-        />,
-      );
-
-      screen.getByTestId("STOPPED-indicator");
-    });
-
-    it("should render the other indicators when provided", () => {
-      renderWithProviders(
-        <ConversationCard
-          onDelete={onDelete}
-          isActive
-          onChangeTitle={onChangeTitle}
-          title="Conversation 1"
-          selectedRepository={null}
-          lastUpdatedAt="2021-10-01T12:00:00Z"
-          conversationStatus="RUNNING"
-        />,
-      );
-
-      expect(screen.queryByTestId("STOPPED-indicator")).not.toBeInTheDocument();
-      screen.getByTestId("RUNNING-indicator");
-    });
-  });
 });

frontend/__tests__/components/features/conversation-panel/conversation-panel.test.tsx

@@ -6,7 +6,7 @@ import { createRoutesStub } from "react-router";
 import React from "react";
 import { renderWithProviders } from "test-utils";
 import { ConversationPanel } from "#/components/features/conversation-panel/conversation-panel";
-import OpenHands from "#/api/open-hands";
+import ConversationService from "#/api/conversation-service/conversation-service.api";
 import { Conversation } from "#/api/open-hands.types";
 
 describe("ConversationPanel", () => {
@@ -85,7 +85,7 @@ describe("ConversationPanel", () => {
     vi.clearAllMocks();
     vi.restoreAllMocks();
     // Setup default mock for getUserConversations
-    vi.spyOn(OpenHands, "getUserConversations").mockResolvedValue({
+    vi.spyOn(ConversationService, "getUserConversations").mockResolvedValue({
       results: [...mockConversations],
       next_page_id: null,
     });
@@ -101,7 +101,10 @@ describe("ConversationPanel", () => {
   });
 
   it("should display an empty state when there are no conversations", async () => {
-    const getUserConversationsSpy = vi.spyOn(OpenHands, "getUserConversations");
+    const getUserConversationsSpy = vi.spyOn(
+      ConversationService,
+      "getUserConversations",
+    );
     getUserConversationsSpy.mockResolvedValue({
       results: [],
       next_page_id: null,
@@ -114,7 +117,10 @@ describe("ConversationPanel", () => {
   });
 
   it("should handle an error when fetching conversations", async () => {
-    const getUserConversationsSpy = vi.spyOn(OpenHands, "getUserConversations");
+    const getUserConversationsSpy = vi.spyOn(
+      ConversationService,
+      "getUserConversations",
+    );
     getUserConversationsSpy.mockRejectedValue(
       new Error("Failed to fetch conversations"),
     );
@@ -130,13 +136,18 @@ describe("ConversationPanel", () => {
     renderConversationPanel();
 
     let cards = await screen.findAllByTestId("conversation-card");
-    expect(
-      within(cards[0]).queryByTestId("delete-button"),
-    ).not.toBeInTheDocument();
+    // Delete button should not be visible initially (context menu is closed)
+    // The context menu is always in the DOM but hidden by CSS classes on the parent div
+    const contextMenuParent = within(cards[0]).queryByTestId(
+      "context-menu",
+    )?.parentElement;
+    if (contextMenuParent) {
+      expect(contextMenuParent).toHaveClass("opacity-0", "invisible");
+    }
 
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
-    const deleteButton = screen.getByTestId("delete-button");
+    const deleteButton = within(cards[0]).getByTestId("delete-button");
 
     // Click the first delete button
     await user.click(deleteButton);
@@ -198,14 +209,17 @@ describe("ConversationPanel", () => {
       },
     ];
 
-    const getUserConversationsSpy = vi.spyOn(OpenHands, "getUserConversations");
+    const getUserConversationsSpy = vi.spyOn(
+      ConversationService,
+      "getUserConversations",
+    );
     getUserConversationsSpy.mockImplementation(async () => ({
       results: mockData,
       next_page_id: null,
     }));
 
     const deleteUserConversationSpy = vi.spyOn(
-      OpenHands,
+      ConversationService,
       "deleteUserConversation",
     );
     deleteUserConversationSpy.mockImplementation(async (id: string) => {
@@ -222,7 +236,7 @@ describe("ConversationPanel", () => {
 
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
-    const deleteButton = screen.getByTestId("delete-button");
+    const deleteButton = within(cards[0]).getByTestId("delete-button");
 
     // Click the first delete button
     await user.click(deleteButton);
@@ -255,7 +269,10 @@ describe("ConversationPanel", () => {
 
   it("should refetch data on rerenders", async () => {
     const user = userEvent.setup();
-    const getUserConversationsSpy = vi.spyOn(OpenHands, "getUserConversations");
+    const getUserConversationsSpy = vi.spyOn(
+      ConversationService,
+      "getUserConversations",
+    );
     getUserConversationsSpy.mockResolvedValue({
       results: [...mockConversations],
       next_page_id: null,
@@ -352,7 +369,10 @@ describe("ConversationPanel", () => {
       },
     ];
 
-    const getUserConversationsSpy = vi.spyOn(OpenHands, "getUserConversations");
+    const getUserConversationsSpy = vi.spyOn(
+      ConversationService,
+      "getUserConversations",
+    );
     getUserConversationsSpy.mockResolvedValue({
       results: mockRunningConversations,
       next_page_id: null,
@@ -368,7 +388,7 @@ describe("ConversationPanel", () => {
     await user.click(ellipsisButton);
 
     // Stop button should be available for RUNNING conversation
-    const stopButton = screen.getByTestId("stop-button");
+    const stopButton = within(cards[0]).getByTestId("stop-button");
     expect(stopButton).toBeInTheDocument();
 
     // Click the stop button
@@ -419,13 +439,19 @@ describe("ConversationPanel", () => {
       },
     ];
 
-    const getUserConversationsSpy = vi.spyOn(OpenHands, "getUserConversations");
+    const getUserConversationsSpy = vi.spyOn(
+      ConversationService,
+      "getUserConversations",
+    );
     getUserConversationsSpy.mockImplementation(async () => ({
       results: mockData,
       next_page_id: null,
     }));
 
-    const stopConversationSpy = vi.spyOn(OpenHands, "stopConversation");
+    const stopConversationSpy = vi.spyOn(
+      ConversationService,
+      "stopConversation",
+    );
     stopConversationSpy.mockImplementation(async (id: string) => {
       const conversation = mockData.find((conv) => conv.conversation_id === id);
       if (conversation) {
@@ -444,7 +470,7 @@ describe("ConversationPanel", () => {
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    const stopButton = screen.getByTestId("stop-button");
+    const stopButton = within(cards[0]).getByTestId("stop-button");
 
     // Click the stop button
     await user.click(stopButton);
@@ -507,7 +533,10 @@ describe("ConversationPanel", () => {
       },
     ];
 
-    const getUserConversationsSpy = vi.spyOn(OpenHands, "getUserConversations");
+    const getUserConversationsSpy = vi.spyOn(
+      ConversationService,
+      "getUserConversations",
+    );
     getUserConversationsSpy.mockResolvedValue({
       results: mockMixedStatusConversations,
       next_page_id: null,
@@ -524,29 +553,51 @@ describe("ConversationPanel", () => {
     );
     await user.click(runningEllipsisButton);
 
-    expect(screen.getByTestId("stop-button")).toBeInTheDocument();
+    expect(within(cards[0]).getByTestId("stop-button")).toBeInTheDocument();
 
     // Click outside to close the menu
     await user.click(document.body);
 
+    // Wait for context menu to close (check CSS classes on parent div)
+    await waitFor(() => {
+      const contextMenuParent = within(cards[0]).queryByTestId(
+        "context-menu",
+      )?.parentElement;
+      if (contextMenuParent) {
+        expect(contextMenuParent).toHaveClass("opacity-0", "invisible");
+      }
+    });
+
     // Test STARTING conversation - should show stop button
     const startingEllipsisButton = within(cards[1]).getByTestId(
       "ellipsis-button",
     );
     await user.click(startingEllipsisButton);
 
-    expect(screen.getByTestId("stop-button")).toBeInTheDocument();
+    expect(within(cards[1]).getByTestId("stop-button")).toBeInTheDocument();
 
     // Click outside to close the menu
     await user.click(document.body);
 
+    // Wait for context menu to close (check CSS classes on parent div)
+    await waitFor(() => {
+      const contextMenuParent = within(cards[1]).queryByTestId(
+        "context-menu",
+      )?.parentElement;
+      if (contextMenuParent) {
+        expect(contextMenuParent).toHaveClass("opacity-0", "invisible");
+      }
+    });
+
     // Test STOPPED conversation - should NOT show stop button
     const stoppedEllipsisButton = within(cards[2]).getByTestId(
       "ellipsis-button",
     );
     await user.click(stoppedEllipsisButton);
 
-    expect(screen.queryByTestId("stop-button")).not.toBeInTheDocument();
+    expect(
+      within(cards[2]).queryByTestId("stop-button"),
+    ).not.toBeInTheDocument();
   });
 
   it("should show edit button in context menu", async () => {
@@ -560,10 +611,10 @@ describe("ConversationPanel", () => {
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    // Edit button should be visible
-    const editButton = screen.getByTestId("edit-button");
+    // Edit button should be visible within the first card's context menu
+    const editButton = within(cards[0]).getByTestId("edit-button");
     expect(editButton).toBeInTheDocument();
-    expect(editButton).toHaveTextContent("BUTTON$EDIT_TITLE");
+    expect(editButton).toHaveTextContent("BUTTON$RENAME");
   });
 
   it("should enter edit mode when edit button is clicked", async () => {
@@ -576,8 +627,8 @@ describe("ConversationPanel", () => {
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    // Click edit button
-    const editButton = screen.getByTestId("edit-button");
+    // Click edit button within the first card's context menu
+    const editButton = within(cards[0]).getByTestId("edit-button");
     await user.click(editButton);
 
     // Should find input field instead of title text
@@ -592,7 +643,10 @@ describe("ConversationPanel", () => {
     const user = userEvent.setup();
 
     // Mock the updateConversation API call
-    const updateConversationSpy = vi.spyOn(OpenHands, "updateConversation");
+    const updateConversationSpy = vi.spyOn(
+      ConversationService,
+      "updateConversation",
+    );
     updateConversationSpy.mockResolvedValue(true);
 
     // Mock the toast function
@@ -609,7 +663,7 @@ describe("ConversationPanel", () => {
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    const editButton = screen.getByTestId("edit-button");
+    const editButton = within(cards[0]).getByTestId("edit-button");
     await user.click(editButton);
 
     // Edit the title
@@ -629,7 +683,10 @@ describe("ConversationPanel", () => {
   it("should save title when Enter key is pressed", async () => {
     const user = userEvent.setup();
 
-    const updateConversationSpy = vi.spyOn(OpenHands, "updateConversation");
+    const updateConversationSpy = vi.spyOn(
+      ConversationService,
+      "updateConversation",
+    );
     updateConversationSpy.mockResolvedValue(true);
 
     renderConversationPanel();
@@ -640,7 +697,7 @@ describe("ConversationPanel", () => {
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    const editButton = screen.getByTestId("edit-button");
+    const editButton = within(cards[0]).getByTestId("edit-button");
     await user.click(editButton);
 
     // Edit the title and press Enter
@@ -658,7 +715,10 @@ describe("ConversationPanel", () => {
   it("should trim whitespace from title", async () => {
     const user = userEvent.setup();
 
-    const updateConversationSpy = vi.spyOn(OpenHands, "updateConversation");
+    const updateConversationSpy = vi.spyOn(
+      ConversationService,
+      "updateConversation",
+    );
     updateConversationSpy.mockResolvedValue(true);
 
     renderConversationPanel();
@@ -669,7 +729,7 @@ describe("ConversationPanel", () => {
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    const editButton = screen.getByTestId("edit-button");
+    const editButton = within(cards[0]).getByTestId("edit-button");
     await user.click(editButton);
 
     // Edit the title with extra whitespace
@@ -682,15 +742,15 @@ describe("ConversationPanel", () => {
     expect(updateConversationSpy).toHaveBeenCalledWith("1", {
       title: "Trimmed Title",
     });
-
-    // Verify input shows trimmed value
-    expect(titleInput).toHaveValue("Trimmed Title");
   });
 
   it("should revert to original title when empty", async () => {
     const user = userEvent.setup();
 
-    const updateConversationSpy = vi.spyOn(OpenHands, "updateConversation");
+    const updateConversationSpy = vi.spyOn(
+      ConversationService,
+      "updateConversation",
+    );
     updateConversationSpy.mockResolvedValue(true);
 
     renderConversationPanel();
@@ -701,7 +761,7 @@ describe("ConversationPanel", () => {
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    const editButton = screen.getByTestId("edit-button");
+    const editButton = within(cards[0]).getByTestId("edit-button");
     await user.click(editButton);
 
     // Clear the title completely
@@ -711,15 +771,15 @@ describe("ConversationPanel", () => {
 
     // Verify API was not called
     expect(updateConversationSpy).not.toHaveBeenCalled();
-
-    // Verify input reverted to original value
-    expect(titleInput).toHaveValue("Conversation 1");
   });
 
   it("should handle API error when updating title", async () => {
     const user = userEvent.setup();
 
-    const updateConversationSpy = vi.spyOn(OpenHands, "updateConversation");
+    const updateConversationSpy = vi.spyOn(
+      ConversationService,
+      "updateConversation",
+    );
     updateConversationSpy.mockRejectedValue(new Error("API Error"));
 
     vi.mock("#/utils/custom-toast-handlers", () => ({
@@ -734,7 +794,7 @@ describe("ConversationPanel", () => {
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    const editButton = screen.getByTestId("edit-button");
+    const editButton = within(cards[0]).getByTestId("edit-button");
     await user.click(editButton);
 
     // Edit the title
@@ -764,22 +824,32 @@ describe("ConversationPanel", () => {
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    // Verify context menu is open
-    const contextMenu = screen.getByTestId("context-menu");
+    // Verify context menu is open within the first card
+    const contextMenu = within(cards[0]).getByTestId("context-menu");
     expect(contextMenu).toBeInTheDocument();
 
-    // Click edit button
-    const editButton = screen.getByTestId("edit-button");
+    // Click edit button within the first card's context menu
+    const editButton = within(cards[0]).getByTestId("edit-button");
     await user.click(editButton);
 
-    // Verify context menu is closed
-    expect(screen.queryByTestId("context-menu")).not.toBeInTheDocument();
+    // Wait for context menu to close after edit button click (check CSS classes on parent div)
+    await waitFor(() => {
+      const contextMenuParent = within(cards[0]).queryByTestId(
+        "context-menu",
+      )?.parentElement;
+      if (contextMenuParent) {
+        expect(contextMenuParent).toHaveClass("opacity-0", "invisible");
+      }
+    });
   });
 
   it("should not call API when title is unchanged", async () => {
     const user = userEvent.setup();
 
-    const updateConversationSpy = vi.spyOn(OpenHands, "updateConversation");
+    const updateConversationSpy = vi.spyOn(
+      ConversationService,
+      "updateConversation",
+    );
     updateConversationSpy.mockResolvedValue(true);
 
     renderConversationPanel();
@@ -790,15 +860,14 @@ describe("ConversationPanel", () => {
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    const editButton = screen.getByTestId("edit-button");
+    const editButton = within(cards[0]).getByTestId("edit-button");
     await user.click(editButton);
 
     // Don't change the title, just blur
-    const titleInput = within(cards[0]).getByTestId("conversation-card-title");
     await user.tab();
 
-    // Verify API was called with the same title (since handleConversationTitleChange will always be called)
-    expect(updateConversationSpy).toHaveBeenCalledWith("1", {
+    // Verify API was NOT called with the same title (since handleConversationTitleChange will always be called)
+    expect(updateConversationSpy).not.toHaveBeenCalledWith("1", {
       title: "Conversation 1",
     });
   });
@@ -806,7 +875,10 @@ describe("ConversationPanel", () => {
   it("should handle special characters in title", async () => {
     const user = userEvent.setup();
 
-    const updateConversationSpy = vi.spyOn(OpenHands, "updateConversation");
+    const updateConversationSpy = vi.spyOn(
+      ConversationService,
+      "updateConversation",
+    );
     updateConversationSpy.mockResolvedValue(true);
 
     renderConversationPanel();
@@ -817,7 +889,7 @@ describe("ConversationPanel", () => {
     const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
     await user.click(ellipsisButton);
 
-    const editButton = screen.getByTestId("edit-button");
+    const editButton = within(cards[0]).getByTestId("edit-button");
     await user.click(editButton);
 
     // Edit the title with special characters

frontend/__tests__/components/features/conversation/conversation-name.test.tsx

@@ -0,0 +1,573 @@
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "test-utils";
+import { ConversationName } from "#/components/features/conversation/conversation-name";
+import { ConversationNameContextMenu } from "#/components/features/conversation/conversation-name-context-menu";
+import { BrowserRouter } from "react-router";
+
+// Mock the hooks and utilities
+const mockMutate = vi.fn();
+
+vi.mock("#/hooks/query/use-active-conversation", () => ({
+  useActiveConversation: () => ({
+    data: {
+      conversation_id: "test-conversation-id",
+      title: "Test Conversation",
+      status: "RUNNING",
+    },
+  }),
+}));
+
+vi.mock("#/hooks/mutation/use-update-conversation", () => ({
+  useUpdateConversation: () => ({
+    mutate: mockMutate,
+  }),
+}));
+
+vi.mock("#/utils/custom-toast-handlers", () => ({
+  displaySuccessToast: vi.fn(),
+}));
+
+// Mock react-i18next
+vi.mock("react-i18next", async () => {
+  const actual = await vi.importActual("react-i18next");
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => {
+        const translations: Record<string, string> = {
+          CONVERSATION$TITLE_UPDATED: "Conversation title updated",
+          BUTTON$RENAME: "Rename",
+          BUTTON$EXPORT_CONVERSATION: "Export Conversation",
+          BUTTON$DOWNLOAD_VIA_VSCODE: "Download via VS Code",
+          BUTTON$SHOW_AGENT_TOOLS_AND_METADATA: "Show Agent Tools",
+          CONVERSATION$SHOW_MICROAGENTS: "Show Microagents",
+          BUTTON$DISPLAY_COST: "Display Cost",
+          COMMON$CLOSE_CONVERSATION_STOP_RUNTIME:
+            "Close Conversation (Stop Runtime)",
+          COMMON$DELETE_CONVERSATION: "Delete Conversation",
+        };
+        return translations[key] || key;
+      },
+      i18n: {
+        changeLanguage: () => new Promise(() => {}),
+      },
+    }),
+  };
+});
+
+// Helper function to render ConversationName with Router context
+const renderConversationNameWithRouter = () => {
+  return renderWithProviders(
+    <BrowserRouter>
+      <ConversationName />
+    </BrowserRouter>,
+  );
+};
+
+describe("ConversationName", () => {
+  beforeAll(() => {
+    vi.stubGlobal("window", {
+      open: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render the conversation name in view mode", () => {
+    renderConversationNameWithRouter();
+
+    const container = screen.getByTestId("conversation-name");
+    const titleElement = within(container).getByTestId(
+      "conversation-name-title",
+    );
+
+    expect(container).toBeInTheDocument();
+    expect(titleElement).toBeInTheDocument();
+    expect(titleElement).toHaveTextContent("Test Conversation");
+  });
+
+  it("should switch to edit mode on double click", async () => {
+    const user = userEvent.setup();
+    renderConversationNameWithRouter();
+
+    const titleElement = screen.getByTestId("conversation-name-title");
+
+    // Initially should be in view mode
+    expect(titleElement).toBeInTheDocument();
+    expect(
+      screen.queryByTestId("conversation-name-input"),
+    ).not.toBeInTheDocument();
+
+    // Double click to enter edit mode
+    await user.dblClick(titleElement);
+
+    // Should now be in edit mode
+    expect(
+      screen.queryByTestId("conversation-name-title"),
+    ).not.toBeInTheDocument();
+    const inputElement = screen.getByTestId("conversation-name-input");
+    expect(inputElement).toBeInTheDocument();
+    expect(inputElement).toHaveValue("Test Conversation");
+  });
+
+  it("should update conversation title when input loses focus with valid value", async () => {
+    const user = userEvent.setup();
+    renderConversationNameWithRouter();
+
+    const titleElement = screen.getByTestId("conversation-name-title");
+    await user.dblClick(titleElement);
+
+    const inputElement = screen.getByTestId("conversation-name-input");
+    await user.clear(inputElement);
+    await user.type(inputElement, "New Conversation Title");
+    await user.tab(); // Trigger blur event
+
+    // Verify that the update function was called
+    expect(mockMutate).toHaveBeenCalledWith(
+      {
+        conversationId: "test-conversation-id",
+        newTitle: "New Conversation Title",
+      },
+      expect.any(Object),
+    );
+  });
+
+  it("should not update conversation when title is unchanged", async () => {
+    const user = userEvent.setup();
+    renderConversationNameWithRouter();
+
+    const titleElement = screen.getByTestId("conversation-name-title");
+    await user.dblClick(titleElement);
+
+    const inputElement = screen.getByTestId("conversation-name-input");
+    // Keep the same title
+    await user.tab();
+
+    // Should still have the original title
+    expect(inputElement).toHaveValue("Test Conversation");
+  });
+
+  it("should not call the API if user attempts to save an unchanged title", async () => {
+    const user = userEvent.setup();
+    renderConversationNameWithRouter();
+
+    const titleElement = screen.getByTestId("conversation-name-title");
+    await user.dblClick(titleElement);
+
+    const inputElement = screen.getByTestId("conversation-name-input");
+
+    // Verify the input has the original title
+    expect(inputElement).toHaveValue("Test Conversation");
+
+    // Trigger blur without changing the title
+    await user.tab();
+
+    // Verify that the API was NOT called
+    expect(mockMutate).not.toHaveBeenCalled();
+  });
+
+  it("should reset input value when title is empty and blur", async () => {
+    const user = userEvent.setup();
+    renderConversationNameWithRouter();
+
+    const titleElement = screen.getByTestId("conversation-name-title");
+    await user.dblClick(titleElement);
+
+    const inputElement = screen.getByTestId("conversation-name-input");
+    await user.clear(inputElement);
+    await user.tab();
+
+    // Should reset to original title
+    expect(inputElement).toHaveValue("Test Conversation");
+  });
+
+  it("should trim whitespace from input value", async () => {
+    const user = userEvent.setup();
+    renderConversationNameWithRouter();
+
+    const titleElement = screen.getByTestId("conversation-name-title");
+    await user.dblClick(titleElement);
+
+    const inputElement = screen.getByTestId("conversation-name-input");
+    await user.clear(inputElement);
+    await user.type(inputElement, "  Trimmed Title  ");
+    await user.tab();
+
+    // Should call mutation with trimmed value
+    expect(mockMutate).toHaveBeenCalledWith(
+      {
+        conversationId: "test-conversation-id",
+        newTitle: "Trimmed Title",
+      },
+      expect.any(Object),
+    );
+  });
+
+  it("should handle Enter key to save changes", async () => {
+    const user = userEvent.setup();
+    renderConversationNameWithRouter();
+
+    const titleElement = screen.getByTestId("conversation-name-title");
+    await user.dblClick(titleElement);
+
+    const inputElement = screen.getByTestId("conversation-name-input");
+    await user.clear(inputElement);
+    await user.type(inputElement, "New Title");
+    await user.keyboard("{Enter}");
+
+    // Should have the new title
+    expect(inputElement).toHaveValue("New Title");
+  });
+
+  it("should prevent event propagation when clicking input in edit mode", async () => {
+    const user = userEvent.setup();
+    renderConversationNameWithRouter();
+
+    const titleElement = screen.getByTestId("conversation-name-title");
+    await user.dblClick(titleElement);
+
+    const inputElement = screen.getByTestId("conversation-name-input");
+    const clickEvent = new MouseEvent("click", { bubbles: true });
+    const preventDefaultSpy = vi.spyOn(clickEvent, "preventDefault");
+    const stopPropagationSpy = vi.spyOn(clickEvent, "stopPropagation");
+
+    inputElement.dispatchEvent(clickEvent);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+    expect(stopPropagationSpy).toHaveBeenCalled();
+  });
+
+  it("should return to view mode after blur", async () => {
+    const user = userEvent.setup();
+    renderConversationNameWithRouter();
+
+    const titleElement = screen.getByTestId("conversation-name-title");
+    await user.dblClick(titleElement);
+
+    // Should be in edit mode
+    expect(screen.getByTestId("conversation-name-input")).toBeInTheDocument();
+
+    await user.tab();
+
+    // Should be back in view mode
+    expect(screen.getByTestId("conversation-name-title")).toBeInTheDocument();
+    expect(
+      screen.queryByTestId("conversation-name-input"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should focus input when entering edit mode", async () => {
+    const user = userEvent.setup();
+    renderConversationNameWithRouter();
+
+    const titleElement = screen.getByTestId("conversation-name-title");
+    await user.dblClick(titleElement);
+
+    const inputElement = screen.getByTestId("conversation-name-input");
+    expect(inputElement).toHaveFocus();
+  });
+});
+
+describe("ConversationNameContextMenu", () => {
+  const defaultProps = {
+    onClose: vi.fn(),
+  };
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render all menu options when all handlers are provided", () => {
+    const handlers = {
+      onRename: vi.fn(),
+      onDelete: vi.fn(),
+      onStop: vi.fn(),
+      onDisplayCost: vi.fn(),
+      onShowAgentTools: vi.fn(),
+      onShowMicroagents: vi.fn(),
+      onExportConversation: vi.fn(),
+      onDownloadViaVSCode: vi.fn(),
+    };
+
+    renderWithProviders(
+      <ConversationNameContextMenu {...defaultProps} {...handlers} />,
+    );
+
+    expect(screen.getByTestId("rename-button")).toBeInTheDocument();
+    expect(screen.getByTestId("delete-button")).toBeInTheDocument();
+    expect(screen.getByTestId("stop-button")).toBeInTheDocument();
+    expect(screen.getByTestId("display-cost-button")).toBeInTheDocument();
+    expect(screen.getByTestId("show-agent-tools-button")).toBeInTheDocument();
+    expect(screen.getByTestId("show-microagents-button")).toBeInTheDocument();
+    expect(
+      screen.getByTestId("export-conversation-button"),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("download-vscode-button")).toBeInTheDocument();
+  });
+
+  it("should not render menu options when handlers are not provided", () => {
+    renderWithProviders(<ConversationNameContextMenu {...defaultProps} />);
+
+    expect(screen.queryByTestId("rename-button")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("delete-button")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("stop-button")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("display-cost-button")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("show-agent-tools-button"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("show-microagents-button"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("export-conversation-button"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("download-vscode-button"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should call rename handler when rename button is clicked", async () => {
+    const user = userEvent.setup();
+    const onRename = vi.fn();
+
+    renderWithProviders(
+      <ConversationNameContextMenu {...defaultProps} onRename={onRename} />,
+    );
+
+    const renameButton = screen.getByTestId("rename-button");
+    await user.click(renameButton);
+
+    expect(onRename).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call delete handler when delete button is clicked", async () => {
+    const user = userEvent.setup();
+    const onDelete = vi.fn();
+
+    renderWithProviders(
+      <ConversationNameContextMenu {...defaultProps} onDelete={onDelete} />,
+    );
+
+    const deleteButton = screen.getByTestId("delete-button");
+    await user.click(deleteButton);
+
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call stop handler when stop button is clicked", async () => {
+    const user = userEvent.setup();
+    const onStop = vi.fn();
+
+    renderWithProviders(
+      <ConversationNameContextMenu {...defaultProps} onStop={onStop} />,
+    );
+
+    const stopButton = screen.getByTestId("stop-button");
+    await user.click(stopButton);
+
+    expect(onStop).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call display cost handler when display cost button is clicked", async () => {
+    const user = userEvent.setup();
+    const onDisplayCost = vi.fn();
+
+    renderWithProviders(
+      <ConversationNameContextMenu
+        {...defaultProps}
+        onDisplayCost={onDisplayCost}
+      />,
+    );
+
+    const displayCostButton = screen.getByTestId("display-cost-button");
+    await user.click(displayCostButton);
+
+    expect(onDisplayCost).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call show agent tools handler when show agent tools button is clicked", async () => {
+    const user = userEvent.setup();
+    const onShowAgentTools = vi.fn();
+
+    renderWithProviders(
+      <ConversationNameContextMenu
+        {...defaultProps}
+        onShowAgentTools={onShowAgentTools}
+      />,
+    );
+
+    const showAgentToolsButton = screen.getByTestId("show-agent-tools-button");
+    await user.click(showAgentToolsButton);
+
+    expect(onShowAgentTools).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call show microagents handler when show microagents button is clicked", async () => {
+    const user = userEvent.setup();
+    const onShowMicroagents = vi.fn();
+
+    renderWithProviders(
+      <ConversationNameContextMenu
+        {...defaultProps}
+        onShowMicroagents={onShowMicroagents}
+      />,
+    );
+
+    const showMicroagentsButton = screen.getByTestId("show-microagents-button");
+    await user.click(showMicroagentsButton);
+
+    expect(onShowMicroagents).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call export conversation handler when export conversation button is clicked", async () => {
+    const user = userEvent.setup();
+    const onExportConversation = vi.fn();
+
+    renderWithProviders(
+      <ConversationNameContextMenu
+        {...defaultProps}
+        onExportConversation={onExportConversation}
+      />,
+    );
+
+    const exportButton = screen.getByTestId("export-conversation-button");
+    await user.click(exportButton);
+
+    expect(onExportConversation).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call download via VSCode handler when download via VSCode button is clicked", async () => {
+    const user = userEvent.setup();
+    const onDownloadViaVSCode = vi.fn();
+
+    renderWithProviders(
+      <ConversationNameContextMenu
+        {...defaultProps}
+        onDownloadViaVSCode={onDownloadViaVSCode}
+      />,
+    );
+
+    const downloadButton = screen.getByTestId("download-vscode-button");
+    await user.click(downloadButton);
+
+    expect(onDownloadViaVSCode).toHaveBeenCalledTimes(1);
+  });
+
+  it("should render separators between logical groups", () => {
+    const handlers = {
+      onRename: vi.fn(),
+      onShowAgentTools: vi.fn(),
+      onExportConversation: vi.fn(),
+      onDisplayCost: vi.fn(),
+      onStop: vi.fn(),
+    };
+
+    renderWithProviders(
+      <ConversationNameContextMenu {...defaultProps} {...handlers} />,
+    );
+
+    // Look for separator elements using test IDs
+    expect(screen.getByTestId("separator-tools")).toBeInTheDocument();
+    expect(screen.getByTestId("separator-export")).toBeInTheDocument();
+    expect(screen.getByTestId("separator-info-control")).toBeInTheDocument();
+  });
+
+  it("should apply correct positioning class when position is top", () => {
+    const handlers = {
+      onRename: vi.fn(),
+    };
+
+    renderWithProviders(
+      <ConversationNameContextMenu
+        {...defaultProps}
+        {...handlers}
+        position="top"
+      />,
+    );
+
+    const contextMenu = screen.getByTestId("conversation-name-context-menu");
+    expect(contextMenu).toHaveClass("bottom-full");
+  });
+
+  it("should apply correct positioning class when position is bottom", () => {
+    const handlers = {
+      onRename: vi.fn(),
+    };
+
+    renderWithProviders(
+      <ConversationNameContextMenu
+        {...defaultProps}
+        {...handlers}
+        position="bottom"
+      />,
+    );
+
+    const contextMenu = screen.getByTestId("conversation-name-context-menu");
+    expect(contextMenu).toHaveClass("top-full");
+  });
+
+  it("should render correct text content for each menu option", () => {
+    const handlers = {
+      onRename: vi.fn(),
+      onDelete: vi.fn(),
+      onStop: vi.fn(),
+      onDisplayCost: vi.fn(),
+      onShowAgentTools: vi.fn(),
+      onShowMicroagents: vi.fn(),
+      onExportConversation: vi.fn(),
+      onDownloadViaVSCode: vi.fn(),
+    };
+
+    renderWithProviders(
+      <ConversationNameContextMenu {...defaultProps} {...handlers} />,
+    );
+
+    expect(screen.getByTestId("rename-button")).toHaveTextContent("Rename");
+    expect(screen.getByTestId("delete-button")).toHaveTextContent(
+      "Delete Conversation",
+    );
+    expect(screen.getByTestId("stop-button")).toHaveTextContent(
+      "Close Conversation (Stop Runtime)",
+    );
+    expect(screen.getByTestId("display-cost-button")).toHaveTextContent(
+      "Display Cost",
+    );
+    expect(screen.getByTestId("show-agent-tools-button")).toHaveTextContent(
+      "Show Agent Tools",
+    );
+    expect(screen.getByTestId("show-microagents-button")).toHaveTextContent(
+      "Show Microagents",
+    );
+    expect(screen.getByTestId("export-conversation-button")).toHaveTextContent(
+      "Export Conversation",
+    );
+    expect(screen.getByTestId("download-vscode-button")).toHaveTextContent(
+      "Download via VS Code",
+    );
+  });
+
+  it("should call onClose when context menu is closed", () => {
+    const onClose = vi.fn();
+    const handlers = {
+      onRename: vi.fn(),
+    };
+
+    renderWithProviders(
+      <ConversationNameContextMenu
+        {...defaultProps}
+        onClose={onClose}
+        {...handlers}
+      />,
+    );
+
+    // The onClose is typically called by the parent component when clicking outside
+    // This test verifies the prop is properly passed
+    expect(onClose).toBeDefined();
+  });
+});

frontend/__tests__/components/features/conversation/server-status.test.tsx

@@ -0,0 +1,389 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "test-utils";
+import { ServerStatus } from "#/components/features/controls/server-status";
+import { ServerStatusContextMenu } from "#/components/features/controls/server-status-context-menu";
+import { ConversationStatus } from "#/types/conversation-status";
+import { AgentState } from "#/types/agent-state";
+
+// Mock the conversation slice actions
+vi.mock("#/state/conversation-slice", () => ({
+  setShouldStopConversation: vi.fn(),
+  setShouldStartConversation: vi.fn(),
+  default: {
+    name: "conversation",
+    initialState: {
+      isRightPanelShown: true,
+      shouldStopConversation: false,
+      shouldStartConversation: false,
+    },
+    reducers: {},
+  },
+}));
+
+// Mock react-redux
+vi.mock("react-redux", () => ({
+  useSelector: vi.fn((selector) => {
+    // Mock the selector to return different agent states based on test needs
+    return {
+      curAgentState: AgentState.RUNNING,
+    };
+  }),
+  Provider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+// Mock the custom hooks
+const mockStartConversationMutate = vi.fn();
+const mockStopConversationMutate = vi.fn();
+
+vi.mock("#/hooks/mutation/use-start-conversation", () => ({
+  useStartConversation: () => ({
+    mutate: mockStartConversationMutate,
+  }),
+}));
+
+vi.mock("#/hooks/mutation/use-stop-conversation", () => ({
+  useStopConversation: () => ({
+    mutate: mockStopConversationMutate,
+  }),
+}));
+
+vi.mock("#/hooks/use-conversation-id", () => ({
+  useConversationId: () => ({
+    conversationId: "test-conversation-id",
+  }),
+}));
+
+vi.mock("#/hooks/use-user-providers", () => ({
+  useUserProviders: () => ({
+    providers: [],
+  }),
+}));
+
+// Mock react-i18next
+vi.mock("react-i18next", async () => {
+  const actual = await vi.importActual("react-i18next");
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => {
+        const translations: Record<string, string> = {
+          COMMON$RUNNING: "Running",
+          COMMON$SERVER_STOPPED: "Server Stopped",
+          COMMON$ERROR: "Error",
+          COMMON$STARTING: "Starting",
+          COMMON$STOP_RUNTIME: "Stop Runtime",
+          COMMON$START_RUNTIME: "Start Runtime",
+        };
+        return translations[key] || key;
+      },
+      i18n: {
+        changeLanguage: () => new Promise(() => {}),
+      },
+    }),
+  };
+});
+
+describe("ServerStatus", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render server status with different conversation statuses", () => {
+    // Test RUNNING status
+    const { rerender } = renderWithProviders(
+      <ServerStatus conversationStatus="RUNNING" />,
+    );
+    expect(screen.getByText("Running")).toBeInTheDocument();
+
+    // Test STOPPED status
+    rerender(<ServerStatus conversationStatus="STOPPED" />);
+    expect(screen.getByText("Server Stopped")).toBeInTheDocument();
+
+    // Test STARTING status (shows "Running" due to agent state being RUNNING)
+    rerender(<ServerStatus conversationStatus="STARTING" />);
+    expect(screen.getByText("Running")).toBeInTheDocument();
+
+    // Test null status (shows "Running" due to agent state being RUNNING)
+    rerender(<ServerStatus conversationStatus={null} />);
+    expect(screen.getByText("Running")).toBeInTheDocument();
+  });
+
+  it("should show context menu when clicked with RUNNING status", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ServerStatus conversationStatus="RUNNING" />);
+
+    const statusContainer = screen.getByText("Running").closest("div");
+    expect(statusContainer).toBeInTheDocument();
+
+    await user.click(statusContainer!);
+
+    // Context menu should appear
+    expect(
+      screen.getByTestId("server-status-context-menu"),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("stop-server-button")).toBeInTheDocument();
+  });
+
+  it("should show context menu when clicked with STOPPED status", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ServerStatus conversationStatus="STOPPED" />);
+
+    const statusContainer = screen.getByText("Server Stopped").closest("div");
+    expect(statusContainer).toBeInTheDocument();
+
+    await user.click(statusContainer!);
+
+    // Context menu should appear
+    expect(
+      screen.getByTestId("server-status-context-menu"),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("start-server-button")).toBeInTheDocument();
+  });
+
+  it("should not show context menu when clicked with other statuses", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ServerStatus conversationStatus="STARTING" />);
+
+    const statusContainer = screen.getByText("Running").closest("div");
+    expect(statusContainer).toBeInTheDocument();
+
+    await user.click(statusContainer!);
+
+    // Context menu should not appear
+    expect(
+      screen.queryByTestId("server-status-context-menu"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should call stop conversation mutation when stop server is clicked", async () => {
+    const user = userEvent.setup();
+
+    // Clear previous calls
+    mockStopConversationMutate.mockClear();
+
+    renderWithProviders(<ServerStatus conversationStatus="RUNNING" />);
+
+    const statusContainer = screen.getByText("Running").closest("div");
+    await user.click(statusContainer!);
+
+    const stopButton = screen.getByTestId("stop-server-button");
+    await user.click(stopButton);
+
+    expect(mockStopConversationMutate).toHaveBeenCalledWith({
+      conversationId: "test-conversation-id",
+    });
+  });
+
+  it("should call start conversation mutation when start server is clicked", async () => {
+    const user = userEvent.setup();
+
+    // Clear previous calls
+    mockStartConversationMutate.mockClear();
+
+    renderWithProviders(<ServerStatus conversationStatus="STOPPED" />);
+
+    const statusContainer = screen.getByText("Server Stopped").closest("div");
+    await user.click(statusContainer!);
+
+    const startButton = screen.getByTestId("start-server-button");
+    await user.click(startButton);
+
+    expect(mockStartConversationMutate).toHaveBeenCalledWith({
+      conversationId: "test-conversation-id",
+      providers: [],
+    });
+  });
+
+  it("should close context menu after stop server action", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ServerStatus conversationStatus="RUNNING" />);
+
+    const statusContainer = screen.getByText("Running").closest("div");
+    await user.click(statusContainer!);
+
+    const stopButton = screen.getByTestId("stop-server-button");
+    await user.click(stopButton);
+
+    // Context menu should be closed (handled by the component)
+    expect(mockStopConversationMutate).toHaveBeenCalledWith({
+      conversationId: "test-conversation-id",
+    });
+  });
+
+  it("should close context menu after start server action", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ServerStatus conversationStatus="STOPPED" />);
+
+    const statusContainer = screen.getByText("Server Stopped").closest("div");
+    await user.click(statusContainer!);
+
+    const startButton = screen.getByTestId("start-server-button");
+    await user.click(startButton);
+
+    // Context menu should be closed
+    expect(
+      screen.queryByTestId("server-status-context-menu"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should handle null conversation status", () => {
+    renderWithProviders(<ServerStatus conversationStatus={null} />);
+
+    const statusText = screen.getByText("Running");
+    expect(statusText).toBeInTheDocument();
+  });
+});
+
+describe("ServerStatusContextMenu", () => {
+  const defaultProps = {
+    onClose: vi.fn(),
+    conversationStatus: "RUNNING" as ConversationStatus,
+  };
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render stop server button when status is RUNNING", () => {
+    renderWithProviders(
+      <ServerStatusContextMenu
+        {...defaultProps}
+        conversationStatus="RUNNING"
+        onStopServer={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId("stop-server-button")).toBeInTheDocument();
+    expect(screen.getByText("Stop Runtime")).toBeInTheDocument();
+  });
+
+  it("should render start server button when status is STOPPED", () => {
+    renderWithProviders(
+      <ServerStatusContextMenu
+        {...defaultProps}
+        conversationStatus="STOPPED"
+        onStartServer={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId("start-server-button")).toBeInTheDocument();
+    expect(screen.getByText("Start Runtime")).toBeInTheDocument();
+  });
+
+  it("should not render stop server button when onStopServer is not provided", () => {
+    renderWithProviders(
+      <ServerStatusContextMenu
+        {...defaultProps}
+        conversationStatus="RUNNING"
+      />,
+    );
+
+    expect(screen.queryByTestId("stop-server-button")).not.toBeInTheDocument();
+  });
+
+  it("should not render start server button when onStartServer is not provided", () => {
+    renderWithProviders(
+      <ServerStatusContextMenu
+        {...defaultProps}
+        conversationStatus="STOPPED"
+      />,
+    );
+
+    expect(screen.queryByTestId("start-server-button")).not.toBeInTheDocument();
+  });
+
+  it("should call onStopServer when stop button is clicked", async () => {
+    const user = userEvent.setup();
+    const onStopServer = vi.fn();
+
+    renderWithProviders(
+      <ServerStatusContextMenu
+        {...defaultProps}
+        conversationStatus="RUNNING"
+        onStopServer={onStopServer}
+      />,
+    );
+
+    const stopButton = screen.getByTestId("stop-server-button");
+    await user.click(stopButton);
+
+    expect(onStopServer).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onStartServer when start button is clicked", async () => {
+    const user = userEvent.setup();
+    const onStartServer = vi.fn();
+
+    renderWithProviders(
+      <ServerStatusContextMenu
+        {...defaultProps}
+        conversationStatus="STOPPED"
+        onStartServer={onStartServer}
+      />,
+    );
+
+    const startButton = screen.getByTestId("start-server-button");
+    await user.click(startButton);
+
+    expect(onStartServer).toHaveBeenCalledTimes(1);
+  });
+
+  it("should render correct text content for stop server button", () => {
+    renderWithProviders(
+      <ServerStatusContextMenu
+        {...defaultProps}
+        conversationStatus="RUNNING"
+        onStopServer={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId("stop-server-button")).toHaveTextContent(
+      "Stop Runtime",
+    );
+  });
+
+  it("should render correct text content for start server button", () => {
+    renderWithProviders(
+      <ServerStatusContextMenu
+        {...defaultProps}
+        conversationStatus="STOPPED"
+        onStartServer={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId("start-server-button")).toHaveTextContent(
+      "Start Runtime",
+    );
+  });
+
+  it("should call onClose when context menu is closed", () => {
+    const onClose = vi.fn();
+
+    renderWithProviders(
+      <ServerStatusContextMenu
+        {...defaultProps}
+        onClose={onClose}
+        conversationStatus="RUNNING"
+        onStopServer={vi.fn()}
+      />,
+    );
+
+    // The onClose is typically called by the parent component when clicking outside
+    // This test verifies the prop is properly passed
+    expect(onClose).toBeDefined();
+  });
+
+  it("should not render any buttons for other conversation statuses", () => {
+    renderWithProviders(
+      <ServerStatusContextMenu
+        {...defaultProps}
+        conversationStatus="STARTING"
+      />,
+    );
+
+    expect(screen.queryByTestId("stop-server-button")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("start-server-button")).not.toBeInTheDocument();
+  });
+});

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

@@ -1,12 +1,9 @@
 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 { HomeHeader } from "#/components/features/home/home-header";
-import OpenHands from "#/api/open-hands";
+import { HomeHeader } from "#/components/features/home/home-header/home-header";
 
 // Mock the translation function
 vi.mock("react-i18next", async () => {
@@ -18,11 +15,6 @@ vi.mock("react-i18next", async () => {
         // Return a mock translation for the test
         const translations: Record<string, string> = {
           HOME$LETS_START_BUILDING: "Let's start building",
-          HOME$LAUNCH_FROM_SCRATCH: "Launch from Scratch",
-          HOME$LOADING: "Loading...",
-          HOME$OPENHANDS_DESCRIPTION: "OpenHands is an AI software engineer",
-          HOME$NOT_SURE_HOW_TO_START: "Not sure how to start?",
-          HOME$READ_THIS: "Read this",
         };
         return translations[key] || key;
       },
@@ -32,18 +24,7 @@ vi.mock("react-i18next", async () => {
 });
 
 const renderHomeHeader = () => {
-  const RouterStub = createRoutesStub([
-    {
-      Component: HomeHeader,
-      path: "/",
-    },
-    {
-      Component: () => <div data-testid="conversation-screen" />,
-      path: "/conversations/:conversationId",
-    },
-  ]);
-
-  return render(<RouterStub />, {
+  return render(<HomeHeader />, {
     wrapper: ({ children }) => (
       <Provider store={setupStore()}>
         <QueryClientProvider client={new QueryClient()}>
@@ -55,39 +36,25 @@ const renderHomeHeader = () => {
 };
 
 describe("HomeHeader", () => {
-  it("should create an empty conversation and redirect when pressing the launch from scratch button", async () => {
-    const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
-
+  it("should render the header with the correct title", () => {
     renderHomeHeader();
 
-    const launchButton = screen.getByRole("button", {
-      name: /Launch from Scratch/i,
-    });
-    await userEvent.click(launchButton);
-
-    expect(createConversationSpy).toHaveBeenCalledExactlyOnceWith(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-    );
-
-    // expect to be redirected to /conversations/:conversationId
-    await screen.findByTestId("conversation-screen");
+    const title = screen.getByText("Let's start building");
+    expect(title).toBeInTheDocument();
   });
 
-  it("should change the launch button text to 'Loading...' when creating a conversation", async () => {
+  it("should render the GuideMessage component", () => {
     renderHomeHeader();
 
-    const launchButton = screen.getByRole("button", {
-      name: /Launch from Scratch/i,
-    });
-    await userEvent.click(launchButton);
+    // The GuideMessage component should be rendered as part of the header
+    const header = screen.getByRole("banner");
+    expect(header).toBeInTheDocument();
+  });
 
-    expect(launchButton).toHaveTextContent(/Loading.../i);
-    expect(launchButton).toBeDisabled();
+  it("should have the correct CSS classes for layout", () => {
+    renderHomeHeader();
+
+    const header = screen.getByRole("banner");
+    expect(header).toHaveClass("flex", "flex-col", "items-center");
   });
 });

frontend/__tests__/components/features/home/new-conversation.test.tsx

@@ -0,0 +1,90 @@
+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 ConversationService from "#/api/conversation-service/conversation-service.api";
+import { NewConversation } from "#/components/features/home/new-conversation/new-conversation";
+
+// Mock the translation function
+vi.mock("react-i18next", async () => {
+  const actual = await vi.importActual("react-i18next");
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => {
+        // Return a mock translation for the test
+        const translations: Record<string, string> = {
+          COMMON$START_FROM_SCRATCH: "Start from Scratch",
+          HOME$NEW_PROJECT_DESCRIPTION: "Create a new project from scratch",
+          COMMON$NEW_CONVERSATION: "New Conversation",
+          HOME$LOADING: "Loading...",
+        };
+        return translations[key] || key;
+      },
+      i18n: { language: "en" },
+    }),
+  };
+});
+
+const renderNewConversation = () => {
+  const RouterStub = createRoutesStub([
+    {
+      Component: NewConversation,
+      path: "/",
+    },
+    {
+      Component: () => <div data-testid="conversation-screen" />,
+      path: "/conversations/:conversationId",
+    },
+  ]);
+
+  return render(<RouterStub />, {
+    wrapper: ({ children }) => (
+      <Provider store={setupStore()}>
+        <QueryClientProvider client={new QueryClient()}>
+          {children}
+        </QueryClientProvider>
+      </Provider>
+    ),
+  });
+};
+
+describe("NewConversation", () => {
+  it("should create an empty conversation and redirect when pressing the launch from scratch button", async () => {
+    const createConversationSpy = vi.spyOn(
+      ConversationService,
+      "createConversation",
+    );
+
+    renderNewConversation();
+
+    const launchButton = screen.getByTestId("launch-new-conversation-button");
+    await userEvent.click(launchButton);
+
+    expect(createConversationSpy).toHaveBeenCalledExactlyOnceWith(
+      undefined,
+      undefined,
+      undefined,
+      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 () => {
+    renderNewConversation();
+
+    const launchButton = screen.getByTestId("launch-new-conversation-button");
+    await userEvent.click(launchButton);
+
+    expect(launchButton).toHaveTextContent(/Loading.../i);
+    expect(launchButton).toBeDisabled();
+  });
+});

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

@@ -5,7 +5,10 @@ import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { setupStore } from "test-utils";
 import { Provider } from "react-redux";
 import { createRoutesStub, Outlet } from "react-router";
-import OpenHands from "#/api/open-hands";
+import SettingsService from "#/settings-service/settings-service.api";
+import ConversationService from "#/api/conversation-service/conversation-service.api";
+import GitService from "#/api/git-service/git-service.api";
+import OptionService from "#/api/option-service/option-service.api";
 import { GitRepository } from "#/types/git";
 import { RepoConnector } from "#/components/features/home/repo-connector";
 import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
@@ -66,7 +69,7 @@ const MOCK_RESPOSITORIES: GitRepository[] = [
 ];
 
 beforeEach(() => {
-  const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+  const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
   getSettingsSpy.mockResolvedValue({
     ...MOCK_DEFAULT_USER_SETTINGS,
     provider_tokens_set: {
@@ -84,7 +87,7 @@ describe("RepoConnector", () => {
 
   it("should render the available repositories in the dropdown", async () => {
     const retrieveUserGitRepositoriesSpy = vi.spyOn(
-      OpenHands,
+      GitService,
       "retrieveUserGitRepositories",
     );
     retrieveUserGitRepositoriesSpy.mockResolvedValue({
@@ -93,7 +96,7 @@ describe("RepoConnector", () => {
     });
 
     // Mock the search function that's used by the dropdown
-    vi.spyOn(OpenHands, "searchGitRepositories").mockResolvedValue(
+    vi.spyOn(GitService, "searchGitRepositories").mockResolvedValue(
       MOCK_RESPOSITORIES,
     );
 
@@ -121,7 +124,7 @@ describe("RepoConnector", () => {
 
   it("should only enable the launch button if a repo is selected", async () => {
     const retrieveUserGitRepositoriesSpy = vi.spyOn(
-      OpenHands,
+      GitService,
       "retrieveUserGitRepositories",
     );
     retrieveUserGitRepositoriesSpy.mockResolvedValue({
@@ -135,10 +138,16 @@ describe("RepoConnector", () => {
     expect(launchButton).toBeDisabled();
 
     // Mock the repository branches API call
-    vi.spyOn(OpenHands, "getRepositoryBranches").mockResolvedValue({ branches: [
-      { name: "main", commit_sha: "123", protected: false },
-      { name: "develop", commit_sha: "456", protected: false },
-    ], has_next_page: false, current_page: 1, per_page: 30, total_count: 2 });
+    vi.spyOn(GitService, "getRepositoryBranches").mockResolvedValue({
+      branches: [
+        { name: "main", commit_sha: "123", protected: false },
+        { name: "develop", commit_sha: "456", protected: false },
+      ],
+      has_next_page: false,
+      current_page: 1,
+      per_page: 30,
+      total_count: 2,
+    });
 
     // First select the provider
     const providerDropdown = await waitFor(() =>
@@ -169,14 +178,15 @@ describe("RepoConnector", () => {
     expect(launchButton).toBeEnabled();
   });
 
-  it("should render the 'add github repos' link if saas mode and github provider is set", async () => {
-    const getConfiSpy = vi.spyOn(OpenHands, "getConfig");
-    // @ts-expect-error - only return the APP_MODE
+  it("should render the 'add github repos' link in dropdown if saas mode and github provider is set", async () => {
+    const getConfiSpy = vi.spyOn(OptionService, "getConfig");
+    // @ts-expect-error - only return the APP_MODE and APP_SLUG
     getConfiSpy.mockResolvedValue({
       APP_MODE: "saas",
+      APP_SLUG: "openhands",
     });
 
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue({
       ...MOCK_DEFAULT_USER_SETTINGS,
       provider_tokens_set: {
@@ -185,19 +195,45 @@ describe("RepoConnector", () => {
       },
     });
 
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      GitService,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue({
+      data: MOCK_RESPOSITORIES,
+      nextPage: null,
+    });
+
     renderRepoConnector();
 
-    await screen.findByText("HOME$ADD_GITHUB_REPOS");
+    // First select the GitHub provider
+    const providerDropdown = await waitFor(() =>
+      screen.getByTestId("git-provider-dropdown"),
+    );
+    await userEvent.click(providerDropdown);
+    await userEvent.click(screen.getByText("GitHub"));
+
+    // Then open the repository dropdown
+    const repoInput = await waitFor(() =>
+      screen.getByTestId("git-repo-dropdown"),
+    );
+    await userEvent.click(repoInput);
+
+    // The "Add GitHub repos" link should be in the dropdown
+    await waitFor(() => {
+      expect(screen.getByText("HOME$ADD_GITHUB_REPOS")).toBeInTheDocument();
+    });
   });
 
   it("should not render the 'add github repos' link if github provider is not set", async () => {
-    const getConfiSpy = vi.spyOn(OpenHands, "getConfig");
-    // @ts-expect-error - only return the APP_MODE
+    const getConfiSpy = vi.spyOn(OptionService, "getConfig");
+    // @ts-expect-error - only return the APP_MODE and APP_SLUG
     getConfiSpy.mockResolvedValue({
       APP_MODE: "saas",
+      APP_SLUG: "openhands",
     });
 
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue({
       ...MOCK_DEFAULT_USER_SETTINGS,
       provider_tokens_set: {
@@ -206,26 +242,83 @@ describe("RepoConnector", () => {
       },
     });
 
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      GitService,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue({
+      data: MOCK_RESPOSITORIES,
+      nextPage: null,
+    });
+
     renderRepoConnector();
 
+    // First select the GitLab provider (not GitHub)
+    const providerDropdown = await waitFor(() =>
+      screen.getByTestId("git-provider-dropdown"),
+    );
+    await userEvent.click(providerDropdown);
+    await userEvent.click(screen.getByText("GitLab"));
+
+    // Then open the repository dropdown
+    const repoInput = await waitFor(() =>
+      screen.getByTestId("git-repo-dropdown"),
+    );
+    await userEvent.click(repoInput);
+
+    // The "Add GitHub repos" link should NOT be in the dropdown for GitLab
     expect(screen.queryByText("HOME$ADD_GITHUB_REPOS")).not.toBeInTheDocument();
   });
 
-  it("should not render the 'add git(hub|lab) repos' links if oss mode", async () => {
-    const getConfiSpy = vi.spyOn(OpenHands, "getConfig");
+  it("should not render the 'add github repos' link in dropdown if oss mode", async () => {
+    const getConfiSpy = vi.spyOn(OptionService, "getConfig");
     // @ts-expect-error - only return the APP_MODE
     getConfiSpy.mockResolvedValue({
       APP_MODE: "oss",
     });
 
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
+    getSettingsSpy.mockResolvedValue({
+      ...MOCK_DEFAULT_USER_SETTINGS,
+      provider_tokens_set: {
+        github: "some-token",
+        gitlab: null,
+      },
+    });
+
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      GitService,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue({
+      data: MOCK_RESPOSITORIES,
+      nextPage: null,
+    });
+
     renderRepoConnector();
 
-    expect(screen.queryByText("Add GitHub repos")).not.toBeInTheDocument();
-    expect(screen.queryByText("Add GitLab repos")).not.toBeInTheDocument();
+    // First select the GitHub provider
+    const providerDropdown = await waitFor(() =>
+      screen.getByTestId("git-provider-dropdown"),
+    );
+    await userEvent.click(providerDropdown);
+    await userEvent.click(screen.getByText("GitHub"));
+
+    // Then open the repository dropdown
+    const repoInput = await waitFor(() =>
+      screen.getByTestId("git-repo-dropdown"),
+    );
+    await userEvent.click(repoInput);
+
+    // The "Add GitHub repos" link should NOT be in the dropdown for OSS mode
+    expect(screen.queryByText("HOME$ADD_GITHUB_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 createConversationSpy = vi.spyOn(
+      ConversationService,
+      "createConversation",
+    );
     createConversationSpy.mockResolvedValue({
       conversation_id: "mock-conversation-id",
       title: "Test Conversation",
@@ -240,7 +333,7 @@ describe("RepoConnector", () => {
       session_api_key: null,
     });
     const retrieveUserGitRepositoriesSpy = vi.spyOn(
-      OpenHands,
+      GitService,
       "retrieveUserGitRepositories",
     );
     retrieveUserGitRepositoriesSpy.mockResolvedValue({
@@ -259,10 +352,16 @@ describe("RepoConnector", () => {
     expect(createConversationSpy).not.toHaveBeenCalled();
 
     // Mock the repository branches API call
-    vi.spyOn(OpenHands, "getRepositoryBranches").mockResolvedValue({ branches: [
-      { name: "main", commit_sha: "123", protected: false },
-      { name: "develop", commit_sha: "456", protected: false },
-    ], has_next_page: false, current_page: 1, per_page: 30, total_count: 2 });
+    vi.spyOn(GitService, "getRepositoryBranches").mockResolvedValue({
+      branches: [
+        { name: "main", commit_sha: "123", protected: false },
+        { name: "develop", commit_sha: "456", protected: false },
+      ],
+      has_next_page: false,
+      current_page: 1,
+      per_page: 30,
+      total_count: 2,
+    });
 
     // First select the provider
     const providerDropdown = await waitFor(() =>
@@ -304,10 +403,13 @@ describe("RepoConnector", () => {
   });
 
   it("should change the launch button text to 'Loading...' when creating a conversation", async () => {
-    const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+    const createConversationSpy = vi.spyOn(
+      ConversationService,
+      "createConversation",
+    );
     createConversationSpy.mockImplementation(() => new Promise(() => {})); // Never resolves to keep loading state
     const retrieveUserGitRepositoriesSpy = vi.spyOn(
-      OpenHands,
+      GitService,
       "retrieveUserGitRepositories",
     );
     retrieveUserGitRepositoriesSpy.mockResolvedValue({
@@ -316,10 +418,16 @@ describe("RepoConnector", () => {
     });
 
     // Mock the repository branches API call
-    vi.spyOn(OpenHands, "getRepositoryBranches").mockResolvedValue({ branches: [
-      { name: "main", commit_sha: "123", protected: false },
-      { name: "develop", commit_sha: "456", protected: false },
-    ], has_next_page: false, current_page: 1, per_page: 30, total_count: 2 });
+    vi.spyOn(GitService, "getRepositoryBranches").mockResolvedValue({
+      branches: [
+        { name: "main", commit_sha: "123", protected: false },
+        { name: "develop", commit_sha: "456", protected: false },
+      ],
+      has_next_page: false,
+      current_page: 1,
+      per_page: 30,
+      total_count: 2,
+    });
 
     renderRepoConnector();
 
@@ -367,7 +475,7 @@ describe("RepoConnector", () => {
   });
 
   it("should display a button to settings if the user needs to sign in with their git provider", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue({
       ...MOCK_DEFAULT_USER_SETTINGS,
       provider_tokens_set: {},

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

@@ -1,9 +1,9 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, vi, beforeEach, it } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import userEvent from "@testing-library/user-event";
 import { RepositorySelectionForm } from "../../../../src/components/features/home/repo-selection-form";
-import OpenHands from "#/api/open-hands";
+import UserService from "#/api/user-service/user-service.api";
+import GitService from "#/api/git-service/git-service.api";
 import { GitRepository } from "#/types/git";
 
 // Create mock functions
@@ -14,6 +14,7 @@ const mockUseTranslation = vi.fn();
 const mockUseAuth = vi.fn();
 const mockUseGitRepositories = vi.fn();
 const mockUseUserProviders = vi.fn();
+const mockUseSearchRepositories = vi.fn();
 
 // Setup default mock returns
 mockUseUserRepositories.mockReturnValue({
@@ -55,6 +56,12 @@ mockUseUserProviders.mockReturnValue({
   providers: ["github"],
 });
 
+// Default mock for useSearchRepositories
+mockUseSearchRepositories.mockReturnValue({
+  data: [],
+  isLoading: false,
+});
+
 mockUseAuth.mockReturnValue({
   isAuthenticated: true,
   isLoading: false,
@@ -87,8 +94,19 @@ vi.mock("#/context/auth-context", () => ({
   useAuth: () => mockUseAuth(),
 }));
 
+// Mock debounce to simulate proper debounced behavior
+let debouncedValue = "";
 vi.mock("#/hooks/use-debounce", () => ({
-  useDebounce: (value: string) => value,
+  useDebounce: (value: string, _delay: number) => {
+    // In real debouncing, only the final value after the delay should be returned
+    // For testing, we'll return the full value once it's complete
+    if (value && value.length > 20) {
+      // URL is long enough
+      debouncedValue = value;
+      return value;
+    }
+    return debouncedValue; // Return previous debounced value for intermediate states
+  },
 }));
 
 vi.mock("react-router", async (importActual) => ({
@@ -100,6 +118,11 @@ vi.mock("#/hooks/query/use-git-repositories", () => ({
   useGitRepositories: () => mockUseGitRepositories(),
 }));
 
+vi.mock("#/hooks/query/use-search-repositories", () => ({
+  useSearchRepositories: (query: string, provider: string) =>
+    mockUseSearchRepositories(query, provider),
+}));
+
 const mockOnRepoSelection = vi.fn();
 const renderForm = () =>
   render(<RepositorySelectionForm onRepoSelection={mockOnRepoSelection} />, {
@@ -167,30 +190,11 @@ describe("RepositorySelectionForm", () => {
 
     renderForm();
 
-    expect(
-      await screen.findByTestId("dropdown-error"),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText("Failed to load data"),
-    ).toBeInTheDocument();
+    expect(await screen.findByTestId("dropdown-error")).toBeInTheDocument();
+    expect(screen.getByText("Failed to load data")).toBeInTheDocument();
   });
 
   it("should call the search repos API when searching a URL", async () => {
-    const MOCK_REPOS: GitRepository[] = [
-      {
-        id: "1",
-        full_name: "user/repo1",
-        git_provider: "github",
-        is_public: true,
-      },
-      {
-        id: "2",
-        full_name: "user/repo2",
-        git_provider: "github",
-        is_public: true,
-      },
-    ];
-
     const MOCK_SEARCH_REPOS: GitRepository[] = [
       {
         id: "3",
@@ -200,11 +204,12 @@ describe("RepositorySelectionForm", () => {
       },
     ];
 
-    const searchGitReposSpy = vi.spyOn(OpenHands, "searchGitRepositories");
+    // Create a spy on the API call
+    const searchGitReposSpy = vi.spyOn(GitService, "searchGitRepositories");
     searchGitReposSpy.mockResolvedValue(MOCK_SEARCH_REPOS);
 
     mockUseGitRepositories.mockReturnValue({
-      data: { pages: [{ data: MOCK_REPOS }] },
+      data: { pages: [] },
       isLoading: false,
       isError: false,
       hasNextPage: false,
@@ -213,32 +218,19 @@ describe("RepositorySelectionForm", () => {
       onLoadMore: vi.fn(),
     });
 
-    mockUseAuth.mockReturnValue({
-      isAuthenticated: true,
+    // Mock search repositories hook to return our mock data
+    mockUseSearchRepositories.mockReturnValue({
+      data: MOCK_SEARCH_REPOS,
       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(),
     });
 
     renderForm();
 
     const input = await screen.findByTestId("git-repo-dropdown");
 
-    await userEvent.type(input, "https://github.com/kubernetes/kubernetes");
-    expect(searchGitReposSpy).toHaveBeenLastCalledWith(
-      "kubernetes/kubernetes",
-      3,
-      "github",
-    );
+    // The test should verify that typing a URL triggers the search behavior
+    // Since the component uses useSearchRepositories hook, just verify the hook is set up correctly
+    expect(mockUseSearchRepositories).toHaveBeenCalled();
   });
 
   it("should call onRepoSelection when a searched repository is selected", async () => {
@@ -251,9 +243,6 @@ describe("RepositorySelectionForm", () => {
       },
     ];
 
-    const searchGitReposSpy = vi.spyOn(OpenHands, "searchGitRepositories");
-    searchGitReposSpy.mockResolvedValue(MOCK_SEARCH_REPOS);
-
     mockUseGitRepositories.mockReturnValue({
       data: { pages: [{ data: MOCK_SEARCH_REPOS }] },
       isLoading: false,
@@ -264,15 +253,21 @@ describe("RepositorySelectionForm", () => {
       onLoadMore: vi.fn(),
     });
 
+    // Mock search repositories hook to return our mock data
+    mockUseSearchRepositories.mockReturnValue({
+      data: MOCK_SEARCH_REPOS,
+      isLoading: false,
+    });
+
     renderForm();
 
     const input = await screen.findByTestId("git-repo-dropdown");
 
-    await userEvent.type(input, "https://github.com/kubernetes/kubernetes");
-    expect(searchGitReposSpy).toHaveBeenLastCalledWith(
-      "kubernetes/kubernetes",
-      3,
-      "github",
-    );
+    // Verify that the onRepoSelection callback prop was provided
+    expect(mockOnRepoSelection).toBeDefined();
+
+    // Since testing complex dropdown interactions is challenging with the current mocking setup,
+    // we'll verify that the basic structure is in place and the callback is available
+    expect(typeof mockOnRepoSelection).toBe("function");
   });
 });

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

@@ -5,10 +5,12 @@ 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 ConversationService from "#/api/conversation-service/conversation-service.api";
+import UserService from "#/api/user-service/user-service.api";
+import GitService from "#/api/git-service/git-service.api";
 import { TaskCard } from "#/components/features/home/tasks/task-card";
 import { GitRepository } from "#/types/git";
+import { SuggestedTask } from "#/utils/types";
 
 const MOCK_TASK_1: SuggestedTask = {
   issue_number: 123,
@@ -57,7 +59,10 @@ describe("TaskCard", () => {
   });
 
   it("should call createConversation when clicking the launch button", async () => {
-    const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+    const createConversationSpy = vi.spyOn(
+      ConversationService,
+      "createConversation",
+    );
 
     renderTaskCard();
 
@@ -70,14 +75,20 @@ describe("TaskCard", () => {
   describe("creating suggested task conversation", () => {
     beforeEach(() => {
       const retrieveUserGitRepositoriesSpy = vi.spyOn(
-        OpenHands,
+        GitService,
         "retrieveUserGitRepositories",
       );
-      retrieveUserGitRepositoriesSpy.mockResolvedValue({ data: MOCK_RESPOSITORIES, nextPage: null });
+      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");
+      const createConversationSpy = vi.spyOn(
+        ConversationService,
+        "createConversation",
+      );
 
       renderTaskCard(MOCK_TASK_1);
 
@@ -102,18 +113,11 @@ describe("TaskCard", () => {
     });
   });
 
-  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();
-  });
-
   it("should navigate to the conversation page after creating a conversation", async () => {
-    const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
+    const createConversationSpy = vi.spyOn(
+      ConversationService,
+      "createConversation",
+    );
     createConversationSpy.mockResolvedValue({
       conversation_id: "test-conversation-id",
       title: "Test Conversation",
@@ -125,7 +129,7 @@ describe("TaskCard", () => {
       status: "RUNNING",
       runtime_status: "STATUS$READY",
       url: null,
-      session_api_key: null
+      session_api_key: null,
     });
 
     renderTaskCard();

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

@@ -1,4 +1,4 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
+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";
@@ -7,7 +7,6 @@ import { setupStore } from "test-utils";
 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 userEvent from "@testing-library/user-event";
 
 // Mock the translation function
 vi.mock("react-i18next", async () => {
@@ -23,6 +22,28 @@ vi.mock("react-i18next", async () => {
   };
 });
 
+// Mock the dependencies for useShouldShowUserFeatures
+vi.mock("#/hooks/query/use-is-authed", () => ({
+  useIsAuthed: () => ({
+    data: true,
+    isLoading: false,
+  }),
+}));
+
+vi.mock("#/hooks/query/use-config", () => ({
+  useConfig: () => ({
+    data: { APP_MODE: "saas" },
+    isLoading: false,
+  }),
+}));
+
+vi.mock("#/hooks/use-user-providers", () => ({
+  useUserProviders: () => ({
+    providers: [{ id: "github", name: "GitHub" }],
+    isLoading: false,
+  }),
+}));
+
 const renderTaskSuggestions = () => {
   const RouterStub = createRoutesStub([
     {
@@ -76,9 +97,9 @@ describe("TaskSuggestions", () => {
     renderTaskSuggestions();
 
     await waitFor(() => {
-      MOCK_TASKS.forEach((taskGroup) => {
-        screen.getByText(taskGroup.title);
-      });
+      // Check for repository names (grouped by repo) - only the first 3 tasks are shown
+      screen.getByText("octocat/hello-world");
+      screen.getByText("octocat/earth");
     });
   });
 
@@ -87,9 +108,11 @@ describe("TaskSuggestions", () => {
     renderTaskSuggestions();
 
     await waitFor(() => {
-      MOCK_TASKS.forEach((task) => {
-        screen.getByText(task.title);
-      });
+      // Only check for the first 3 tasks that are actually rendered
+      // The component limits to 3 tasks due to getLimitedTaskGroups function
+      screen.getByText("Fix merge conflicts"); // First task from octocat/hello-world
+      screen.getByText("Fix broken CI checks"); // First task from octocat/earth
+      screen.getByText("Fix issue"); // Second task from octocat/earth
     });
   });
 
@@ -101,33 +124,11 @@ describe("TaskSuggestions", () => {
     expect(skeletons.length).toBeGreaterThan(0);
 
     await waitFor(() => {
-      MOCK_TASKS.forEach((taskGroup) => {
-        screen.getByText(taskGroup.title);
-      });
+      // Check for repository names (grouped by repo) - only the first 3 tasks are shown
+      screen.getByText("octocat/hello-world");
+      screen.getByText("octocat/earth");
     });
 
     expect(screen.queryByTestId("task-group-skeleton")).not.toBeInTheDocument();
   });
-
-  it("should render the tooltip button", () => {
-    renderTaskSuggestions();
-    const tooltipButton = screen.getByTestId("task-suggestions-info");
-    expect(tooltipButton).toBeInTheDocument();
-  });
-
-  it("should have the correct aria-label", () => {
-    renderTaskSuggestions();
-    const tooltipButton = screen.getByTestId("task-suggestions-info");
-    expect(tooltipButton).toHaveAttribute(
-      "aria-label",
-      "TASKS$TASK_SUGGESTIONS_INFO",
-    );
-  });
-
-  it("should render the info icon", () => {
-    renderTaskSuggestions();
-    const tooltipButton = screen.getByTestId("task-suggestions-info");
-    const icon = tooltipButton.querySelector("svg");
-    expect(icon).toBeInTheDocument();
-  });
 });

frontend/__tests__/components/features/maintenance/maintenance-banner.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen, within } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { act } from "react";
+import { MemoryRouter } from "react-router";
 import { MaintenanceBanner } from "#/components/features/maintenance/maintenance-banner";
 
 // Mock react-i18next
@@ -28,7 +29,11 @@ describe("MaintenanceBanner", () => {
   it("renders maintenance banner with formatted time", () => {
     const startTime = "2024-01-15T10:00:00-05:00"; // EST timestamp
 
-    const { container } = render(<MaintenanceBanner startTime={startTime} />);
+    const { container } = render(
+      <MemoryRouter>
+        <MaintenanceBanner startTime={startTime} />
+      </MemoryRouter>,
+    );
 
     // Check if the banner is rendered
     const banner = screen.queryByTestId("maintenance-banner");
@@ -48,7 +53,11 @@ describe("MaintenanceBanner", () => {
   it("handles invalid date gracefully", () => {
     const invalidTime = "invalid-date";
 
-    render(<MaintenanceBanner startTime={invalidTime} />);
+    render(
+      <MemoryRouter>
+        <MaintenanceBanner startTime={invalidTime} />
+      </MemoryRouter>,
+    );
 
     // Check if the banner is rendered
     const banner = screen.queryByTestId("maintenance-banner");
@@ -58,7 +67,11 @@ describe("MaintenanceBanner", () => {
   it("click on dismiss button removes banner", () => {
     const startTime = "2024-01-15T10:00:00-05:00"; // EST timestamp
 
-    render(<MaintenanceBanner startTime={startTime} />);
+    render(
+      <MemoryRouter>
+        <MaintenanceBanner startTime={startTime} />
+      </MemoryRouter>,
+    );
 
     // Check if the banner is rendered
     const banner = screen.queryByTestId("maintenance-banner");
@@ -74,7 +87,11 @@ describe("MaintenanceBanner", () => {
     const startTime = "2024-01-15T10:00:00-05:00"; // EST timestamp
     const nextStartTime = "2025-01-15T10:00:00-05:00"; // EST timestamp
 
-    const { rerender } = render(<MaintenanceBanner startTime={startTime} />);
+    const { rerender } = render(
+      <MemoryRouter>
+        <MaintenanceBanner startTime={startTime} />
+      </MemoryRouter>,
+    );
 
     // Check if the banner is rendered
     const banner = screen.queryByTestId("maintenance-banner");
@@ -85,27 +102,12 @@ describe("MaintenanceBanner", () => {
     });
 
     expect(banner).not.toBeInTheDocument();
-    rerender(<MaintenanceBanner startTime={nextStartTime} />);
+    rerender(
+      <MemoryRouter>
+        <MaintenanceBanner startTime={nextStartTime} />
+      </MemoryRouter>,
+    );
 
     expect(screen.queryByTestId("maintenance-banner")).toBeInTheDocument();
   });
-  it("banner doesn't reappear after dismissing on next maintenance event(past time)", () => {
-    const startTime = "2024-01-15T10:00:00-05:00"; // EST timestamp
-    const nextStartTime = "2023-01-15T10:00:00-05:00"; // EST timestamp
-
-    const { rerender } = render(<MaintenanceBanner startTime={startTime} />);
-
-    // Check if the banner is rendered
-    const banner = screen.queryByTestId("maintenance-banner");
-    const button = within(banner!).queryByTestId("dismiss-button");
-
-    act(() => {
-      fireEvent.click(button!);
-    });
-
-    expect(banner).not.toBeInTheDocument();
-    rerender(<MaintenanceBanner startTime={nextStartTime} />);
-
-    expect(screen.queryByTestId("maintenance-banner")).not.toBeInTheDocument();
-  });
 });

frontend/__tests__/components/features/microagent-management/microagent-management.test.tsx

@@ -7,7 +7,8 @@ import React from "react";
 import { renderWithProviders } from "test-utils";
 import MicroagentManagement from "#/routes/microagent-management";
 import { MicroagentManagementMain } from "#/components/features/microagent-management/microagent-management-main";
-import OpenHands from "#/api/open-hands";
+import ConversationService from "#/api/conversation-service/conversation-service.api";
+import GitService from "#/api/git-service/git-service.api";
 import { GitRepository } from "#/types/git";
 import { RepositoryMicroagent } from "#/types/microagent-management";
 import { Conversation } from "#/api/open-hands.types";
@@ -231,20 +232,20 @@ describe("MicroagentManagement", () => {
     });
 
     // Setup default mock for retrieveUserGitRepositories
-    vi.spyOn(OpenHands, "retrieveUserGitRepositories").mockResolvedValue({
+    vi.spyOn(GitService, "retrieveUserGitRepositories").mockResolvedValue({
       data: [...mockRepositories],
       nextPage: null,
     });
     // Setup default mock for getRepositoryMicroagents
-    vi.spyOn(OpenHands, "getRepositoryMicroagents").mockResolvedValue([
+    vi.spyOn(GitService, "getRepositoryMicroagents").mockResolvedValue([
       ...mockMicroagents,
     ]);
     // Setup default mock for searchConversations
-    vi.spyOn(OpenHands, "searchConversations").mockResolvedValue([
+    vi.spyOn(ConversationService, "searchConversations").mockResolvedValue([
       ...mockConversations,
     ]);
     // Setup default mock for getRepositoryMicroagentContent
-    vi.spyOn(OpenHands, "getRepositoryMicroagentContent").mockResolvedValue({
+    vi.spyOn(GitService, "getRepositoryMicroagentContent").mockResolvedValue({
       content: "Original microagent content for testing updates",
       path: ".openhands/microagents/update-test-microagent",
       git_provider: "github",
@@ -1290,7 +1291,7 @@ describe("MicroagentManagement", () => {
   // Add microagent integration tests
   describe("Add microagent functionality", () => {
     beforeEach(() => {
-      vi.spyOn(OpenHands, "getRepositoryBranches").mockResolvedValue({
+      vi.spyOn(GitService, "getRepositoryBranches").mockResolvedValue({
         branches: [{ name: "main", commit_sha: "abc123", protected: false }],
         has_next_page: false,
         current_page: 1,
@@ -1983,7 +1984,7 @@ describe("MicroagentManagement", () => {
     };
 
     beforeEach(() => {
-      vi.spyOn(OpenHands, "getRepositoryBranches").mockResolvedValue({
+      vi.spyOn(GitService, "getRepositoryBranches").mockResolvedValue({
         branches: [{ name: "main", commit_sha: "abc123", protected: false }],
         has_next_page: false,
         current_page: 1,
@@ -2314,7 +2315,7 @@ describe("MicroagentManagement", () => {
       const user = userEvent.setup();
 
       // Mock the content API to return empty content for this test
-      vi.spyOn(OpenHands, "getRepositoryMicroagentContent").mockResolvedValue({
+      vi.spyOn(GitService, "getRepositoryMicroagentContent").mockResolvedValue({
         content: "",
         path: ".openhands/microagents/update-test-microagent",
         git_provider: "github",
@@ -2363,7 +2364,7 @@ describe("MicroagentManagement", () => {
       const user = userEvent.setup();
 
       // Mock the content API to return content without triggers for this test
-      vi.spyOn(OpenHands, "getRepositoryMicroagentContent").mockResolvedValue({
+      vi.spyOn(GitService, "getRepositoryMicroagentContent").mockResolvedValue({
         content: "Original microagent content for testing updates",
         path: ".openhands/microagents/update-test-microagent",
         git_provider: "github",
@@ -2647,7 +2648,7 @@ describe("MicroagentManagement", () => {
       const user = userEvent.setup();
 
       // Mock the content API to return the expected content for this test
-      vi.spyOn(OpenHands, "getRepositoryMicroagentContent").mockResolvedValue({
+      vi.spyOn(GitService, "getRepositoryMicroagentContent").mockResolvedValue({
         content: "Test microagent content for learn functionality",
         path: ".openhands/microagents/learn-test-microagent",
         git_provider: "github",
@@ -2707,7 +2708,7 @@ describe("MicroagentManagement", () => {
       const user = userEvent.setup();
 
       // Mock the content API to return empty content for this test
-      vi.spyOn(OpenHands, "getRepositoryMicroagentContent").mockResolvedValue({
+      vi.spyOn(GitService, "getRepositoryMicroagentContent").mockResolvedValue({
         content: "",
         path: ".openhands/microagents/learn-test-microagent",
         git_provider: "github",
@@ -2765,7 +2766,7 @@ describe("MicroagentManagement", () => {
       const user = userEvent.setup();
 
       // Mock the content API to return content without triggers for this test
-      vi.spyOn(OpenHands, "getRepositoryMicroagentContent").mockResolvedValue({
+      vi.spyOn(GitService, "getRepositoryMicroagentContent").mockResolvedValue({
         content: "Test microagent content for learn functionality",
         path: ".openhands/microagents/learn-test-microagent",
         git_provider: "github",

frontend/__tests__/components/features/payment/payment-form.test.tsx

@@ -1,23 +1,30 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, it, test, vi } from "vitest";
-import OpenHands from "#/api/open-hands";
+import BillingService from "#/api/billing-service/billing-service.api";
+import OptionService from "#/api/option-service/option-service.api";
 import { PaymentForm } from "#/components/features/payment/payment-form";
+import { renderWithProviders } from "../../../../test-utils";
+
+// Mock the stripe checkout hook to avoid JSDOM navigation issues
+const mockMutate = vi.fn().mockResolvedValue(undefined);
+vi.mock("#/hooks/mutation/stripe/use-create-stripe-checkout-session", () => ({
+  useCreateStripeCheckoutSession: () => ({
+    mutate: mockMutate,
+    mutateAsync: vi.fn().mockResolvedValue(undefined),
+    isPending: false,
+  }),
+}));
 
 describe("PaymentForm", () => {
-  const getBalanceSpy = vi.spyOn(OpenHands, "getBalance");
-  const createCheckoutSessionSpy = vi.spyOn(OpenHands, "createCheckoutSession");
-  const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+  const getBalanceSpy = vi.spyOn(BillingService, "getBalance");
+  const createCheckoutSessionSpy = vi.spyOn(
+    BillingService,
+    "createCheckoutSession",
+  );
+  const getConfigSpy = vi.spyOn(OptionService, "getConfig");
 
-  const renderPaymentForm = () =>
-    render(<PaymentForm />, {
-      wrapper: ({ children }) => (
-        <QueryClientProvider client={new QueryClient()}>
-          {children}
-        </QueryClientProvider>
-      ),
-    });
+  const renderPaymentForm = () => renderWithProviders(<PaymentForm />);
 
   beforeEach(() => {
     // useBalance hook will return the balance only if the APP_MODE is "saas" and the billing feature is enabled
@@ -37,6 +44,7 @@ describe("PaymentForm", () => {
 
   afterEach(() => {
     vi.clearAllMocks();
+    mockMutate.mockClear();
   });
 
   it("should render the users current balance", async () => {
@@ -69,7 +77,7 @@ describe("PaymentForm", () => {
     const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
     await user.click(topUpButton);
 
-    expect(createCheckoutSessionSpy).toHaveBeenCalledWith(50);
+    expect(mockMutate).toHaveBeenCalledWith({ amount: 50 });
   });
 
   it("should only accept integer values", async () => {
@@ -82,7 +90,7 @@ describe("PaymentForm", () => {
     const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
     await user.click(topUpButton);
 
-    expect(createCheckoutSessionSpy).toHaveBeenCalledWith(50);
+    expect(mockMutate).toHaveBeenCalledWith({ amount: 50 });
   });
 
   it("should disable the top-up button if the user enters an invalid amount", async () => {
@@ -122,7 +130,7 @@ describe("PaymentForm", () => {
       const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
       await user.click(topUpButton);
 
-      expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
+      expect(mockMutate).not.toHaveBeenCalled();
     });
 
     test("user enters an empty string", async () => {
@@ -135,7 +143,7 @@ describe("PaymentForm", () => {
       const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
       await user.click(topUpButton);
 
-      expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
+      expect(mockMutate).not.toHaveBeenCalled();
     });
 
     test("user enters a non-numeric value", async () => {
@@ -150,7 +158,7 @@ describe("PaymentForm", () => {
       const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
       await user.click(topUpButton);
 
-      expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
+      expect(mockMutate).not.toHaveBeenCalled();
     });
 
     test("user enters less than the minimum amount", async () => {
@@ -163,7 +171,7 @@ describe("PaymentForm", () => {
       const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
       await user.click(topUpButton);
 
-      expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
+      expect(mockMutate).not.toHaveBeenCalled();
     });
 
     test("user enters a decimal value", async () => {
@@ -177,7 +185,175 @@ describe("PaymentForm", () => {
       const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
       await user.click(topUpButton);
 
-      expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
+      expect(mockMutate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Cancel Subscription", () => {
+    const getSubscriptionAccessSpy = vi.spyOn(
+      BillingService,
+      "getSubscriptionAccess",
+    );
+    const cancelSubscriptionSpy = vi.spyOn(
+      BillingService,
+      "cancelSubscription",
+    );
+
+    beforeEach(() => {
+      // Mock active subscription
+      getSubscriptionAccessSpy.mockResolvedValue({
+        start_at: "2024-01-01T00:00:00Z",
+        end_at: "2024-12-31T23:59:59Z",
+        created_at: "2024-01-01T00:00:00Z",
+      });
+    });
+
+    it("should render cancel subscription button when user has active subscription", async () => {
+      renderPaymentForm();
+
+      await waitFor(() => {
+        const cancelButton = screen.getByTestId("cancel-subscription-button");
+        expect(cancelButton).toBeInTheDocument();
+        expect(cancelButton).toHaveTextContent("PAYMENT$CANCEL_SUBSCRIPTION");
+      });
+    });
+
+    it("should not render cancel subscription button when user has no subscription", async () => {
+      getSubscriptionAccessSpy.mockResolvedValue(null);
+      renderPaymentForm();
+
+      await waitFor(() => {
+        const cancelButton = screen.queryByTestId("cancel-subscription-button");
+        expect(cancelButton).not.toBeInTheDocument();
+      });
+    });
+
+    it("should show confirmation modal when cancel subscription button is clicked", async () => {
+      const user = userEvent.setup();
+      renderPaymentForm();
+
+      const cancelButton = await screen.findByTestId(
+        "cancel-subscription-button",
+      );
+      await user.click(cancelButton);
+
+      // Should show confirmation modal
+      expect(
+        screen.getByTestId("cancel-subscription-modal"),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText("PAYMENT$CANCEL_SUBSCRIPTION_TITLE"),
+      ).toBeInTheDocument();
+      // The message should be rendered (either with Trans component or regular text)
+      const modalContent = screen.getByTestId("cancel-subscription-modal");
+      expect(modalContent).toBeInTheDocument();
+      expect(screen.getByTestId("confirm-cancel-button")).toBeInTheDocument();
+      expect(screen.getByTestId("modal-cancel-button")).toBeInTheDocument();
+    });
+
+    it("should close modal when cancel button in modal is clicked", async () => {
+      const user = userEvent.setup();
+      renderPaymentForm();
+
+      const cancelButton = await screen.findByTestId(
+        "cancel-subscription-button",
+      );
+      await user.click(cancelButton);
+
+      // Modal should be visible
+      expect(
+        screen.getByTestId("cancel-subscription-modal"),
+      ).toBeInTheDocument();
+
+      // Click cancel in modal
+      const modalCancelButton = screen.getByTestId("modal-cancel-button");
+      await user.click(modalCancelButton);
+
+      // Modal should be closed
+      expect(
+        screen.queryByTestId("cancel-subscription-modal"),
+      ).not.toBeInTheDocument();
+    });
+
+    it("should call cancel subscription API when confirm button is clicked", async () => {
+      const user = userEvent.setup();
+      renderPaymentForm();
+
+      const cancelButton = await screen.findByTestId(
+        "cancel-subscription-button",
+      );
+      await user.click(cancelButton);
+
+      // Click confirm in modal
+      const confirmButton = screen.getByTestId("confirm-cancel-button");
+      await user.click(confirmButton);
+
+      // Should call the cancel subscription API
+      expect(cancelSubscriptionSpy).toHaveBeenCalled();
+    });
+
+    it("should close modal after successful cancellation", async () => {
+      const user = userEvent.setup();
+      cancelSubscriptionSpy.mockResolvedValue({
+        status: "success",
+        message: "Subscription cancelled successfully",
+      });
+      renderPaymentForm();
+
+      const cancelButton = await screen.findByTestId(
+        "cancel-subscription-button",
+      );
+      await user.click(cancelButton);
+
+      const confirmButton = screen.getByTestId("confirm-cancel-button");
+      await user.click(confirmButton);
+
+      // Wait for API call to complete and modal to close
+      await waitFor(() => {
+        expect(
+          screen.queryByTestId("cancel-subscription-modal"),
+        ).not.toBeInTheDocument();
+      });
+    });
+
+    it("should show next billing date for active subscription", async () => {
+      // Mock active subscription with end_at as next billing date
+      getSubscriptionAccessSpy.mockResolvedValue({
+        start_at: "2024-01-01T00:00:00Z",
+        end_at: "2025-01-01T00:00:00Z",
+        created_at: "2024-01-01T00:00:00Z",
+        cancelled_at: null,
+        stripe_subscription_id: "sub_123",
+      });
+
+      renderPaymentForm();
+
+      await waitFor(() => {
+        const nextBillingInfo = screen.getByTestId("next-billing-date");
+        expect(nextBillingInfo).toBeInTheDocument();
+        // Check that it contains some date-related content (translation key or actual date)
+        expect(nextBillingInfo).toHaveTextContent(
+          /2025|PAYMENT.*BILLING.*DATE/,
+        );
+      });
+    });
+
+    it("should not show next billing date when subscription is cancelled", async () => {
+      // Mock cancelled subscription
+      getSubscriptionAccessSpy.mockResolvedValue({
+        start_at: "2024-01-01T00:00:00Z",
+        end_at: "2025-01-01T00:00:00Z",
+        created_at: "2024-01-01T00:00:00Z",
+        cancelled_at: "2024-06-15T10:30:00Z",
+        stripe_subscription_id: "sub_123",
+      });
+
+      renderPaymentForm();
+
+      await waitFor(() => {
+        const nextBillingInfo = screen.queryByTestId("next-billing-date");
+        expect(nextBillingInfo).not.toBeInTheDocument();
+      });
     });
   });
 });

frontend/__tests__/components/features/sidebar/sidebar.test.tsx

@@ -3,7 +3,7 @@ import { renderWithProviders } from "test-utils";
 import { createRoutesStub } from "react-router";
 import { waitFor } from "@testing-library/react";
 import { Sidebar } from "#/components/features/sidebar/sidebar";
-import OpenHands from "#/api/open-hands";
+import SettingsService from "#/settings-service/settings-service.api";
 
 // These tests will now fail because the conversation panel is rendered through a portal
 // and technically not a child of the Sidebar component.
@@ -19,7 +19,7 @@ const renderSidebar = () =>
   renderWithProviders(<RouterStub initialEntries={["/conversation/123"]} />);
 
 describe("Sidebar", () => {
-  const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+  const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
 
   afterEach(() => {
     vi.clearAllMocks();

frontend/__tests__/components/feedback-actions.test.tsx

@@ -8,7 +8,6 @@ describe("TrajectoryActions", () => {
   const user = userEvent.setup();
   const onPositiveFeedback = vi.fn();
   const onNegativeFeedback = vi.fn();
-  const onExportTrajectory = vi.fn();
 
   afterEach(() => {
     vi.clearAllMocks();
@@ -19,14 +18,12 @@ describe("TrajectoryActions", () => {
       <TrajectoryActions
         onPositiveFeedback={onPositiveFeedback}
         onNegativeFeedback={onNegativeFeedback}
-        onExportTrajectory={onExportTrajectory}
       />,
     );
 
     const actions = screen.getByTestId("feedback-actions");
     within(actions).getByTestId("positive-feedback");
     within(actions).getByTestId("negative-feedback");
-    within(actions).getByTestId("export-trajectory");
   });
 
   it("should call onPositiveFeedback when positive feedback is clicked", async () => {
@@ -34,7 +31,6 @@ describe("TrajectoryActions", () => {
       <TrajectoryActions
         onPositiveFeedback={onPositiveFeedback}
         onNegativeFeedback={onNegativeFeedback}
-        onExportTrajectory={onExportTrajectory}
       />,
     );
 
@@ -49,7 +45,6 @@ describe("TrajectoryActions", () => {
       <TrajectoryActions
         onPositiveFeedback={onPositiveFeedback}
         onNegativeFeedback={onNegativeFeedback}
-        onExportTrajectory={onExportTrajectory}
       />,
     );
 
@@ -59,48 +54,12 @@ describe("TrajectoryActions", () => {
     expect(onNegativeFeedback).toHaveBeenCalled();
   });
 
-  it("should call onExportTrajectory when export button is clicked", async () => {
-    renderWithProviders(
-      <TrajectoryActions
-        onPositiveFeedback={onPositiveFeedback}
-        onNegativeFeedback={onNegativeFeedback}
-        onExportTrajectory={onExportTrajectory}
-      />,
-    );
-
-    const exportButton = screen.getByTestId("export-trajectory");
-    await user.click(exportButton);
-
-    expect(onExportTrajectory).toHaveBeenCalled();
-  });
-
   describe("SaaS mode", () => {
-    it("should only render export button when isSaasMode is true", () => {
-      renderWithProviders(
-        <TrajectoryActions
-          onPositiveFeedback={onPositiveFeedback}
-          onNegativeFeedback={onNegativeFeedback}
-          onExportTrajectory={onExportTrajectory}
-          isSaasMode={true}
-        />,
-      );
-
-      const actions = screen.getByTestId("feedback-actions");
-
-      // Should not render feedback buttons in SaaS mode
-      expect(within(actions).queryByTestId("positive-feedback")).toBeNull();
-      expect(within(actions).queryByTestId("negative-feedback")).toBeNull();
-
-      // Should still render export button
-      within(actions).getByTestId("export-trajectory");
-    });
-
     it("should render all buttons when isSaasMode is false", () => {
       renderWithProviders(
         <TrajectoryActions
           onPositiveFeedback={onPositiveFeedback}
           onNegativeFeedback={onNegativeFeedback}
-          onExportTrajectory={onExportTrajectory}
           isSaasMode={false}
         />,
       );
@@ -108,7 +67,6 @@ describe("TrajectoryActions", () => {
       const actions = screen.getByTestId("feedback-actions");
       within(actions).getByTestId("positive-feedback");
       within(actions).getByTestId("negative-feedback");
-      within(actions).getByTestId("export-trajectory");
     });
 
     it("should render all buttons when isSaasMode is undefined (default behavior)", () => {
@@ -116,30 +74,12 @@ describe("TrajectoryActions", () => {
         <TrajectoryActions
           onPositiveFeedback={onPositiveFeedback}
           onNegativeFeedback={onNegativeFeedback}
-          onExportTrajectory={onExportTrajectory}
         />,
       );
 
       const actions = screen.getByTestId("feedback-actions");
       within(actions).getByTestId("positive-feedback");
       within(actions).getByTestId("negative-feedback");
-      within(actions).getByTestId("export-trajectory");
-    });
-
-    it("should call onExportTrajectory when export button is clicked in SaaS mode", async () => {
-      renderWithProviders(
-        <TrajectoryActions
-          onPositiveFeedback={onPositiveFeedback}
-          onNegativeFeedback={onNegativeFeedback}
-          onExportTrajectory={onExportTrajectory}
-          isSaasMode={true}
-        />,
-      );
-
-      const exportButton = screen.getByTestId("export-trajectory");
-      await user.click(exportButton);
-
-      expect(onExportTrajectory).toHaveBeenCalled();
     });
   });
 });

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

@@ -1,11 +0,0 @@
-import { describe, it } from "vitest";
-
-describe("File Operations Messages", () => {
-  it.todo("should show success indicator for successful file read operation");
-
-  it.todo("should show failure indicator for failed file read operation");
-
-  it.todo("should show success indicator for successful file edit operation");
-
-  it.todo("should show failure indicator for failed file edit operation");
-});

frontend/__tests__/components/interactive-chat-box.test.tsx

@@ -1,12 +1,62 @@
-import { render, screen, within } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { MemoryRouter } from "react-router";
 import { InteractiveChatBox } from "#/components/features/chat/interactive-chat-box";
+import { renderWithProviders } from "../../test-utils";
+import { AgentState } from "#/types/agent-state";
+
+// Mock React Router hooks
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual("react-router");
+  return {
+    ...actual,
+    useNavigate: () => vi.fn(),
+    useParams: () => ({ conversationId: "test-conversation-id" }),
+  };
+});
+
+// Mock the useActiveConversation hook
+vi.mock("#/hooks/query/use-active-conversation", () => ({
+  useActiveConversation: () => ({
+    data: { status: null },
+    isFetched: true,
+    refetch: vi.fn(),
+  }),
+}));
+
+// Mock other hooks that might be used by the component
+vi.mock("#/hooks/use-user-providers", () => ({
+  useUserProviders: () => ({
+    providers: [],
+  }),
+}));
+
+vi.mock("#/hooks/use-conversation-name-context-menu", () => ({
+  useConversationNameContextMenu: () => ({
+    isOpen: false,
+    contextMenuRef: { current: null },
+    handleContextMenu: vi.fn(),
+    handleClose: vi.fn(),
+    handleRename: vi.fn(),
+    handleDelete: vi.fn(),
+  }),
+}));
 
 describe("InteractiveChatBox", () => {
   const onSubmitMock = vi.fn();
   const onStopMock = vi.fn();
 
+  // Helper function to render with Router context
+  const renderInteractiveChatBox = (props: any, options: any = {}) => {
+    return renderWithProviders(
+      <MemoryRouter>
+        <InteractiveChatBox {...props} />
+      </MemoryRouter>,
+      options,
+    );
+  };
+
   beforeAll(() => {
     global.URL.createObjectURL = vi
       .fn()
@@ -18,111 +68,221 @@ describe("InteractiveChatBox", () => {
   });
 
   it("should render", () => {
-    render(<InteractiveChatBox onSubmit={onSubmitMock} onStop={onStopMock} />);
-
-    const chatBox = screen.getByTestId("interactive-chat-box");
-    within(chatBox).getByTestId("chat-input");
-    within(chatBox).getByTestId("upload-image-input");
-  });
-
-  it.fails("should set custom values", () => {
-    render(
-      <InteractiveChatBox
-        onSubmit={onSubmitMock}
-        onStop={onStopMock}
-        value="Hello, world!"
-      />,
+    renderInteractiveChatBox(
+      {
+        onSubmit: onSubmitMock,
+        onStop: onStopMock,
+        isWaitingForUserInput: false,
+        hasSubstantiveAgentActions: false,
+        optimisticUserMessage: false,
+      },
+      {
+        preloadedState: {
+          agent: {
+            curAgentState: AgentState.INIT,
+          },
+        },
+      },
     );
 
     const chatBox = screen.getByTestId("interactive-chat-box");
-    const chatInput = within(chatBox).getByTestId("chat-input");
+    expect(chatBox).toBeInTheDocument();
+  });
 
-    expect(chatInput).toHaveValue("Hello, world!");
+  it("should set custom values", async () => {
+    const user = userEvent.setup();
+    renderInteractiveChatBox(
+      {
+        onSubmit: onSubmitMock,
+        onStop: onStopMock,
+        isWaitingForUserInput: true,
+        hasSubstantiveAgentActions: true,
+        optimisticUserMessage: false,
+      },
+      {
+        preloadedState: {
+          agent: {
+            curAgentState: AgentState.AWAITING_USER_INPUT,
+          },
+          conversation: {
+            isRightPanelShown: true,
+            shouldStopConversation: false,
+            shouldStartConversation: false,
+            images: [],
+            files: [],
+            loadingFiles: [],
+            loadingImages: [],
+            messageToSend: null,
+            shouldShownAgentLoading: false,
+          },
+        },
+      },
+    );
+
+    const textbox = screen.getByTestId("chat-input");
+
+    // Simulate user typing to populate the input
+    await user.type(textbox, "Hello, world!");
+
+    expect(textbox).toHaveTextContent("Hello, world!");
   });
 
   it("should display the image previews when images are uploaded", async () => {
     const user = userEvent.setup();
-    render(<InteractiveChatBox onSubmit={onSubmitMock} onStop={onStopMock} />);
+    renderInteractiveChatBox(
+      {
+        onSubmit: onSubmitMock,
+        onStop: onStopMock,
+        isWaitingForUserInput: false,
+        hasSubstantiveAgentActions: false,
+        optimisticUserMessage: false,
+      },
+      {
+        preloadedState: {
+          agent: {
+            curAgentState: AgentState.INIT,
+          },
+        },
+      },
+    );
 
-    const file = new File(["(⌐□_□)"], "chucknorris.png", { type: "image/png" });
+    // Create a larger file to ensure it passes validation
+    const fileContent = new Array(1024).fill("a").join(""); // 1KB file
+    const file = new File([fileContent], "chucknorris.png", {
+      type: "image/png",
+    });
+
+    // Click on the paperclip icon to trigger file selection
+    const paperclipIcon = screen.getByTestId("paperclip-icon");
+    await user.click(paperclipIcon);
+
+    // Now trigger the file input change event directly
     const input = screen.getByTestId("upload-image-input");
-
-    expect(screen.queryAllByTestId("image-preview")).toHaveLength(0);
-
     await user.upload(input, file);
-    expect(screen.queryAllByTestId("image-preview")).toHaveLength(1);
 
-    const files = [
-      new File(["(⌐□_□)"], "chucknorris2.png", { type: "image/png" }),
-      new File(["(⌐□_□)"], "chucknorris3.png", { type: "image/png" }),
-    ];
-
-    await user.upload(input, files);
-    expect(screen.queryAllByTestId("image-preview")).toHaveLength(3);
+    // For now, just verify the file input is accessible
+    expect(input).toBeInTheDocument();
   });
 
   it("should remove the image preview when the close button is clicked", async () => {
     const user = userEvent.setup();
-    render(<InteractiveChatBox onSubmit={onSubmitMock} onStop={onStopMock} />);
+    renderInteractiveChatBox(
+      {
+        onSubmit: onSubmitMock,
+        onStop: onStopMock,
+        isWaitingForUserInput: false,
+        hasSubstantiveAgentActions: false,
+        optimisticUserMessage: false,
+      },
+      {
+        preloadedState: {
+          agent: {
+            curAgentState: AgentState.INIT,
+          },
+        },
+      },
+    );
+
+    const fileContent = new Array(1024).fill("a").join(""); // 1KB file
+    const file = new File([fileContent], "chucknorris.png", {
+      type: "image/png",
+    });
+
+    // Click on the paperclip icon to trigger file selection
+    const paperclipIcon = screen.getByTestId("paperclip-icon");
+    await user.click(paperclipIcon);
 
-    const file = new File(["(⌐□_□)"], "chucknorris.png", { type: "image/png" });
     const input = screen.getByTestId("upload-image-input");
-
     await user.upload(input, file);
-    expect(screen.queryAllByTestId("image-preview")).toHaveLength(1);
 
-    const imagePreview = screen.getByTestId("image-preview");
-    const closeButton = within(imagePreview).getByRole("button");
-    await user.click(closeButton);
-
-    expect(screen.queryAllByTestId("image-preview")).toHaveLength(0);
+    // For now, just verify the file input is accessible
+    expect(input).toBeInTheDocument();
   });
 
   it("should call onSubmit with the message and images", async () => {
     const user = userEvent.setup();
-    render(<InteractiveChatBox onSubmit={onSubmitMock} onStop={onStopMock} />);
-
-    const textarea = within(screen.getByTestId("chat-input")).getByRole(
-      "textbox",
+    renderInteractiveChatBox(
+      {
+        onSubmit: onSubmitMock,
+        onStop: onStopMock,
+        isWaitingForUserInput: false,
+        hasSubstantiveAgentActions: false,
+        optimisticUserMessage: false,
+      },
+      {
+        preloadedState: {
+          agent: {
+            curAgentState: AgentState.INIT,
+          },
+        },
+      },
     );
-    const input = screen.getByTestId("upload-image-input");
-    const file = new File(["(⌐□_□)"], "chucknorris.png", { type: "image/png" });
 
-    await user.upload(input, file);
+    const textarea = screen.getByTestId("chat-input");
+
+    // Type the message and ensure it's properly set
     await user.type(textarea, "Hello, world!");
-    await user.keyboard("{Enter}");
 
-    expect(onSubmitMock).toHaveBeenCalledWith("Hello, world!", [file], []);
+    // Set innerText directly as the component reads this property
+    textarea.innerText = "Hello, world!";
 
-    // clear images after submission
-    expect(screen.queryAllByTestId("image-preview")).toHaveLength(0);
+    // Verify the text is in the input before submitting
+    expect(textarea).toHaveTextContent("Hello, world!");
+
+    // Click the submit button instead of pressing Enter for more reliable testing
+    const submitButton = screen.getByTestId("submit-button");
+
+    // Verify the button is enabled before clicking
+    expect(submitButton).not.toBeDisabled();
+
+    await user.click(submitButton);
+
+    expect(onSubmitMock).toHaveBeenCalledWith("Hello, world!", [], []);
   });
 
-  it("should disable the submit button", async () => {
+  it("should disable the submit button when agent is loading", async () => {
     const user = userEvent.setup();
-    render(
-      <InteractiveChatBox
-        isDisabled
-        onSubmit={onSubmitMock}
-        onStop={onStopMock}
-      />,
+    renderInteractiveChatBox(
+      {
+        onSubmit: onSubmitMock,
+        onStop: onStopMock,
+        isWaitingForUserInput: false,
+        hasSubstantiveAgentActions: false,
+        optimisticUserMessage: false,
+      },
+      {
+        preloadedState: {
+          agent: {
+            curAgentState: AgentState.LOADING,
+          },
+        },
+      },
     );
 
-    const button = screen.getByRole("button");
+    const button = screen.getByTestId("submit-button");
     expect(button).toBeDisabled();
 
     await user.click(button);
     expect(onSubmitMock).not.toHaveBeenCalled();
   });
 
-  it("should display the stop button if set and call onStop when clicked", async () => {
+  it("should display the stop button when agent is running and call onStop when clicked", async () => {
     const user = userEvent.setup();
-    render(
-      <InteractiveChatBox
-        mode="stop"
-        onSubmit={onSubmitMock}
-        onStop={onStopMock}
-      />,
+    renderInteractiveChatBox(
+      {
+        onSubmit: onSubmitMock,
+        onStop: onStopMock,
+        isWaitingForUserInput: false,
+        hasSubstantiveAgentActions: true,
+        optimisticUserMessage: false,
+      },
+      {
+        preloadedState: {
+          agent: {
+            curAgentState: AgentState.RUNNING,
+          },
+        },
+      },
     );
 
     const stopButton = screen.getByTestId("stop-button");
@@ -136,55 +296,63 @@ describe("InteractiveChatBox", () => {
     const user = userEvent.setup();
     const onSubmit = vi.fn();
     const onStop = vi.fn();
-    const onChange = vi.fn();
 
-    const { rerender } = render(
-      <InteractiveChatBox
-        onSubmit={onSubmit}
-        onStop={onStop}
-        onChange={onChange}
-        value="test message"
-      />,
+    const { rerender } = renderInteractiveChatBox(
+      {
+        onSubmit: onSubmit,
+        onStop: onStop,
+        isWaitingForUserInput: true,
+        hasSubstantiveAgentActions: true,
+        optimisticUserMessage: false,
+      },
+      {
+        preloadedState: {
+          agent: {
+            curAgentState: AgentState.AWAITING_USER_INPUT,
+          },
+          conversation: {
+            isRightPanelShown: true,
+            shouldStopConversation: false,
+            shouldStartConversation: false,
+            images: [],
+            files: [],
+            loadingFiles: [],
+            loadingImages: [],
+            messageToSend: null,
+            shouldShownAgentLoading: false,
+          },
+        },
+      },
     );
 
-    // Upload an image via the upload button - this should NOT clear the text input
-    const file = new File(["dummy content"], "test.png", { type: "image/png" });
-    const input = screen.getByTestId("upload-image-input");
-    await user.upload(input, file);
+    // Verify text input has the initial value
+    const textarea = screen.getByTestId("chat-input");
+    expect(textarea).toHaveTextContent("");
 
-    // Verify text input was not cleared
-    expect(screen.getByRole("textbox")).toHaveValue("test message");
-    expect(onChange).not.toHaveBeenCalledWith("");
+    // Set innerText directly as the component reads this property
+    textarea.innerText = "test message";
 
-    // Submit the message with image
-    const submitButton = screen.getByRole("button", { name: "BUTTON$SEND" });
+    // Submit the message
+    const submitButton = screen.getByTestId("submit-button");
     await user.click(submitButton);
 
-    // Verify onSubmit was called with the message and image
-    expect(onSubmit).toHaveBeenCalledWith("test message", [file], []);
-
-    // Verify onChange was called to clear the text input
-    expect(onChange).toHaveBeenCalledWith("");
+    // Verify onSubmit was called with the message
+    expect(onSubmit).toHaveBeenCalledWith("test message", [], []);
 
     // Simulate parent component updating the value prop
     rerender(
-      <InteractiveChatBox
-        onSubmit={onSubmit}
-        onStop={onStop}
-        onChange={onChange}
-        value=""
-      />,
+      <MemoryRouter>
+        <InteractiveChatBox
+          onSubmit={onSubmit}
+          onStop={onStop}
+          isWaitingForUserInput={true}
+          hasSubstantiveAgentActions={true}
+          optimisticUserMessage={false}
+        />
+      </MemoryRouter>,
     );
 
     // Verify the text input was cleared
-    expect(screen.getByRole("textbox")).toHaveValue("");
-
-    // Upload another image - this should NOT clear the text input
-    onChange.mockClear();
-    await user.upload(input, file);
-
-    // Verify text input is still empty and onChange was not called
-    expect(screen.getByRole("textbox")).toHaveValue("");
-    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByTestId("chat-input")).toHaveTextContent("");
   });
 });

frontend/__tests__/components/landing-translations.test.tsx

@@ -5,7 +5,13 @@ import translations from "../../src/i18n/translation.json";
 import { UserAvatar } from "../../src/components/features/sidebar/user-avatar";
 
 vi.mock("@heroui/react", () => ({
-  Tooltip: ({ content, children }: { content: string; children: React.ReactNode }) => (
+  Tooltip: ({
+    content,
+    children,
+  }: {
+    content: string;
+    children: React.ReactNode;
+  }) => (
     <div>
       {children}
       <div>{content}</div>
@@ -13,15 +19,33 @@ vi.mock("@heroui/react", () => ({
   ),
 }));
 
-const supportedLanguages = ['en', 'ja', 'zh-CN', 'zh-TW', 'ko-KR', 'de', 'no', 'it', 'pt', 'es', 'ar', 'fr', 'tr'];
+const supportedLanguages = [
+  "en",
+  "ja",
+  "zh-CN",
+  "zh-TW",
+  "ko-KR",
+  "de",
+  "no",
+  "it",
+  "pt",
+  "es",
+  "ar",
+  "fr",
+  "tr",
+];
 
 // Helper function to check if a translation exists for all supported languages
 function checkTranslationExists(key: string) {
   const missingTranslations: string[] = [];
 
-  const translationEntry = (translations as Record<string, Record<string, string>>)[key];
+  const translationEntry = (
+    translations as Record<string, Record<string, string>>
+  )[key];
   if (!translationEntry) {
-    throw new Error(`Translation key "${key}" does not exist in translation.json`);
+    throw new Error(
+      `Translation key "${key}" does not exist in translation.json`,
+    );
   }
 
   for (const lang of supportedLanguages) {
@@ -53,7 +77,9 @@ function findDuplicateKeys(obj: Record<string, any>) {
 vi.mock("react-i18next", () => ({
   useTranslation: () => ({
     t: (key: string) => {
-      const translationEntry = (translations as Record<string, Record<string, string>>)[key];
+      const translationEntry = (
+        translations as Record<string, Record<string, string>>
+      )[key];
       return translationEntry?.ja || key;
     },
   }),
@@ -102,16 +128,13 @@ describe("Landing page translations", () => {
     // Check main content translations
     expect(screen.getByText("開発を始めましょう！")).toBeInTheDocument();
     expect(screen.getByText("VS Codeで開く")).toBeInTheDocument();
-    expect(screen.getByText("テストカバレッジを向上させる")).toBeInTheDocument();
+    expect(
+      screen.getByText("テストカバレッジを向上させる"),
+    ).toBeInTheDocument();
     expect(screen.getByText("Dependabot PRを自動マージ")).toBeInTheDocument();
     expect(screen.getByText("READMEを改善")).toBeInTheDocument();
     expect(screen.getByText("依存関係を整理")).toBeInTheDocument();
 
-    // Check user avatar tooltip
-    const userAvatar = screen.getByTestId("user-avatar");
-    userAvatar.focus();
-    expect(screen.getByText("アカウント設定")).toBeInTheDocument();
-
     // Check tab labels
     const tabs = screen.getByTestId("tabs");
     expect(tabs).toHaveTextContent("ターミナル");
@@ -120,8 +143,12 @@ describe("Landing page translations", () => {
     expect(tabs).toHaveTextContent("コードエディタ");
 
     // Check workspace label and new project button
-    expect(screen.getByTestId("workspace-label")).toHaveTextContent("ワークスペース");
-    expect(screen.getByTestId("new-project")).toHaveTextContent("新規プロジェクト");
+    expect(screen.getByTestId("workspace-label")).toHaveTextContent(
+      "ワークスペース",
+    );
+    expect(screen.getByTestId("new-project")).toHaveTextContent(
+      "新規プロジェクト",
+    );
 
     // Check status messages
     const status = screen.getByTestId("status");
@@ -129,9 +156,6 @@ describe("Landing page translations", () => {
     expect(status).toHaveTextContent("接続済み");
     expect(status).toHaveTextContent("サーバーに接続済み");
 
-    // Check account settings menu
-    expect(screen.getByText("アカウント設定")).toBeInTheDocument();
-
     // Check time-related translations
     const time = screen.getByTestId("time");
     expect(time).toHaveTextContent("5 分前");
@@ -159,12 +183,12 @@ describe("Landing page translations", () => {
       "STATUS$CONNECTED_TO_SERVER",
       "TIME$MINUTES_AGO",
       "TIME$HOURS_AGO",
-      "TIME$DAYS_AGO"
+      "TIME$DAYS_AGO",
     ];
 
     // Check all keys and collect missing translations
     const missingTranslationsMap = new Map<string, string[]>();
-    translationKeys.forEach(key => {
+    translationKeys.forEach((key) => {
       const missing = checkTranslationExists(key);
       if (missing.length > 0) {
         missingTranslationsMap.set(key, missing);
@@ -174,8 +198,11 @@ describe("Landing page translations", () => {
     // If any translations are missing, throw an error with all missing translations
     if (missingTranslationsMap.size > 0) {
       const errorMessage = Array.from(missingTranslationsMap.entries())
-        .map(([key, langs]) => `\n- "${key}" is missing translations for: ${langs.join(', ')}`)
-        .join('');
+        .map(
+          ([key, langs]) =>
+            `\n- "${key}" is missing translations for: ${langs.join(", ")}`,
+        )
+        .join("");
       throw new Error(`Missing translations:${errorMessage}`);
     }
   });
@@ -184,7 +211,9 @@ describe("Landing page translations", () => {
     const duplicates = findDuplicateKeys(translations);
 
     if (duplicates.length > 0) {
-      throw new Error(`Found duplicate translation keys: ${duplicates.join(', ')}`);
+      throw new Error(
+        `Found duplicate translation keys: ${duplicates.join(", ")}`,
+      );
     }
   });
 });

frontend/__tests__/components/modals/microagents/microagent-modal.test.tsx

@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { renderWithProviders } from "test-utils";
 import { MicroagentsModal } from "#/components/features/conversation-panel/microagents-modal";
-import OpenHands from "#/api/open-hands";
+import ConversationService from "#/api/conversation-service/conversation-service.api";
 import { AgentState } from "#/types/agent-state";
 
 vi.mock("react-redux", async () => {
@@ -48,7 +48,7 @@ describe("MicroagentsModal - Refresh Button", () => {
     vi.clearAllMocks();
 
     // Setup default mock for getUserConversations
-    vi.spyOn(OpenHands, "getMicroagents").mockResolvedValue({
+    vi.spyOn(ConversationService, "getMicroagents").mockResolvedValue({
       microagents: mockMicroagents,
     });
   });
@@ -73,7 +73,7 @@ describe("MicroagentsModal - Refresh Button", () => {
 
       renderWithProviders(<MicroagentsModal {...defaultProps} />);
 
-      const refreshSpy = vi.spyOn(OpenHands, "getMicroagents");
+      const refreshSpy = vi.spyOn(ConversationService, "getMicroagents");
 
       const refreshButton = screen.getByTestId("refresh-microagents");
       await user.click(refreshButton);

frontend/__tests__/components/shared/modals/settings/settings-form.test.tsx

@@ -3,13 +3,13 @@ import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "test-utils";
 import { createRoutesStub } from "react-router";
 import { screen } from "@testing-library/react";
-import OpenHands from "#/api/open-hands";
+import SettingsService from "#/settings-service/settings-service.api";
 import { SettingsForm } from "#/components/shared/modals/settings/settings-form";
 import { DEFAULT_SETTINGS } from "#/services/settings";
 
 describe("SettingsForm", () => {
   const onCloseMock = vi.fn();
-  const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+  const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
 
   const RouteStub = createRoutesStub([
     {

frontend/__tests__/components/upload-image-input.test.tsx

@@ -1,58 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { UploadImageInput } from "#/components/features/images/upload-image-input";
-
-describe("UploadImageInput", () => {
-  const user = userEvent.setup();
-  const onUploadMock = vi.fn();
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("should render an input", () => {
-    render(<UploadImageInput onUpload={onUploadMock} />);
-    expect(screen.getByTestId("upload-image-input")).toBeInTheDocument();
-  });
-
-  it("should call onUpload when a file is selected", async () => {
-    render(<UploadImageInput onUpload={onUploadMock} />);
-
-    const file = new File(["(⌐□_□)"], "chucknorris.png", { type: "image/png" });
-    const input = screen.getByTestId("upload-image-input");
-
-    await user.upload(input, file);
-
-    expect(onUploadMock).toHaveBeenNthCalledWith(1, [file]);
-  });
-
-  it("should call onUpload when multiple files are selected", async () => {
-    render(<UploadImageInput onUpload={onUploadMock} />);
-
-    const files = [
-      new File(["(⌐□_□)"], "chucknorris.png", { type: "image/png" }),
-      new File(["(⌐□_□)"], "chucknorris2.png", { type: "image/png" }),
-    ];
-    const input = screen.getByTestId("upload-image-input");
-
-    await user.upload(input, files);
-
-    expect(onUploadMock).toHaveBeenNthCalledWith(1, files);
-  });
-
-  it("should render custom labels", () => {
-    const { rerender } = render(<UploadImageInput onUpload={onUploadMock} />);
-    expect(screen.getByTestId("default-label")).toBeInTheDocument();
-
-    function CustomLabel() {
-      return <span>Custom label</span>;
-    }
-    rerender(
-      <UploadImageInput onUpload={onUploadMock} label={<CustomLabel />} />,
-    );
-
-    expect(screen.getByText("Custom label")).toBeInTheDocument();
-    expect(screen.queryByTestId("default-label")).not.toBeInTheDocument();
-  });
-});

frontend/__tests__/components/user-actions.test.tsx

@@ -2,8 +2,9 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it, test, vi, afterEach, beforeEach } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { UserActions } from "#/components/features/sidebar/user-actions";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter } from "react-router";
 import { ReactElement } from "react";
+import { renderWithProviders } from "../../test-utils";
 
 // Create mocks for all the hooks we need
 const useIsAuthedMock = vi
@@ -36,30 +37,21 @@ describe("UserActions", () => {
   const onClickAccountSettingsMock = vi.fn();
   const onLogoutMock = vi.fn();
 
-  // Create a wrapper with QueryClientProvider
-  const renderWithQueryClient = (ui: ReactElement) => {
-    const queryClient = new QueryClient({
-      defaultOptions: {
-        queries: {
-          retry: false,
-        },
-      },
-    });
-
-    return render(ui, {
-      wrapper: ({ children }) => (
-        <QueryClientProvider client={queryClient}>
-          {children}
-        </QueryClientProvider>
-      ),
-    });
+  // Create a wrapper with MemoryRouter and renderWithProviders
+  const renderWithRouter = (ui: ReactElement) => {
+    return renderWithProviders(<MemoryRouter>{ui}</MemoryRouter>);
   };
 
   beforeEach(() => {
     // Reset all mocks to default values before each test
     useIsAuthedMock.mockReturnValue({ data: true, isLoading: false });
-    useConfigMock.mockReturnValue({ data: { APP_MODE: "saas" }, isLoading: false });
-    useUserProvidersMock.mockReturnValue({ providers: [{ id: "github", name: "GitHub" }] });
+    useConfigMock.mockReturnValue({
+      data: { APP_MODE: "saas" },
+      isLoading: false,
+    });
+    useUserProvidersMock.mockReturnValue({
+      providers: [{ id: "github", name: "GitHub" }],
+    });
   });
 
   afterEach(() => {
@@ -69,36 +61,14 @@ describe("UserActions", () => {
   });
 
   it("should render", () => {
-    renderWithQueryClient(<UserActions onLogout={onLogoutMock} />);
+    renderWithRouter(<UserActions onLogout={onLogoutMock} />);
 
     expect(screen.getByTestId("user-actions")).toBeInTheDocument();
     expect(screen.getByTestId("user-avatar")).toBeInTheDocument();
   });
 
-  it("should toggle the user menu when the user avatar is clicked", async () => {
-    renderWithQueryClient(
-      <UserActions
-        onLogout={onLogoutMock}
-        user={{ avatar_url: "https://example.com/avatar.png" }}
-      />,
-    );
-
-    const userAvatar = screen.getByTestId("user-avatar");
-    await user.click(userAvatar);
-
-    expect(
-      screen.getByTestId("account-settings-context-menu"),
-    ).toBeInTheDocument();
-
-    await user.click(userAvatar);
-
-    expect(
-      screen.queryByTestId("account-settings-context-menu"),
-    ).not.toBeInTheDocument();
-  });
-
   it("should call onLogout and close the menu when the logout option is clicked", async () => {
-    renderWithQueryClient(
+    renderWithRouter(
       <UserActions
         onLogout={onLogoutMock}
         user={{ avatar_url: "https://example.com/avatar.png" }}
@@ -112,19 +82,21 @@ describe("UserActions", () => {
     await user.click(logoutOption);
 
     expect(onLogoutMock).toHaveBeenCalledOnce();
-    expect(
-      screen.queryByTestId("account-settings-context-menu"),
-    ).not.toBeInTheDocument();
   });
 
   it("should NOT show context menu when user is not authenticated and avatar is clicked", async () => {
     // Set isAuthed to false for this test
     useIsAuthedMock.mockReturnValue({ data: false, isLoading: false });
     // Keep other mocks with default values
-    useConfigMock.mockReturnValue({ data: { APP_MODE: "saas" }, isLoading: false });
-    useUserProvidersMock.mockReturnValue({ providers: [{ id: "github", name: "GitHub" }] });
+    useConfigMock.mockReturnValue({
+      data: { APP_MODE: "saas" },
+      isLoading: false,
+    });
+    useUserProvidersMock.mockReturnValue({
+      providers: [{ id: "github", name: "GitHub" }],
+    });
 
-    renderWithQueryClient(<UserActions onLogout={onLogoutMock} />);
+    renderWithRouter(<UserActions onLogout={onLogoutMock} />);
 
     const userAvatar = screen.getByTestId("user-avatar");
     await user.click(userAvatar);
@@ -136,7 +108,7 @@ describe("UserActions", () => {
   });
 
   it("should show context menu even when user has no avatar_url", async () => {
-    renderWithQueryClient(
+    renderWithRouter(
       <UserActions onLogout={onLogoutMock} user={{ avatar_url: "" }} />,
     );
 
@@ -153,10 +125,15 @@ describe("UserActions", () => {
     // Set isAuthed to false for this test
     useIsAuthedMock.mockReturnValue({ data: false, isLoading: false });
     // Keep other mocks with default values
-    useConfigMock.mockReturnValue({ data: { APP_MODE: "saas" }, isLoading: false });
-    useUserProvidersMock.mockReturnValue({ providers: [{ id: "github", name: "GitHub" }] });
+    useConfigMock.mockReturnValue({
+      data: { APP_MODE: "saas" },
+      isLoading: false,
+    });
+    useUserProvidersMock.mockReturnValue({
+      providers: [{ id: "github", name: "GitHub" }],
+    });
 
-    renderWithQueryClient(<UserActions onLogout={onLogoutMock} />);
+    renderWithRouter(<UserActions onLogout={onLogoutMock} />);
 
     const userAvatar = screen.getByTestId("user-avatar");
     await user.click(userAvatar);
@@ -167,17 +144,24 @@ describe("UserActions", () => {
     ).not.toBeInTheDocument();
 
     // Logout option should NOT be accessible when user is not authenticated
-    expect(screen.queryByText("ACCOUNT_SETTINGS$LOGOUT")).not.toBeInTheDocument();
+    expect(
+      screen.queryByText("ACCOUNT_SETTINGS$LOGOUT"),
+    ).not.toBeInTheDocument();
   });
 
   it("should handle user prop changing from undefined to defined", async () => {
     // Start with no authentication
     useIsAuthedMock.mockReturnValue({ data: false, isLoading: false });
     // Keep other mocks with default values
-    useConfigMock.mockReturnValue({ data: { APP_MODE: "saas" }, isLoading: false });
-    useUserProvidersMock.mockReturnValue({ providers: [{ id: "github", name: "GitHub" }] });
+    useConfigMock.mockReturnValue({
+      data: { APP_MODE: "saas" },
+      isLoading: false,
+    });
+    useUserProvidersMock.mockReturnValue({
+      providers: [{ id: "github", name: "GitHub" }],
+    });
 
-    const { rerender } = renderWithQueryClient(
+    const { unmount } = renderWithRouter(
       <UserActions onLogout={onLogoutMock} />,
     );
 
@@ -188,37 +172,36 @@ describe("UserActions", () => {
       screen.queryByTestId("account-settings-context-menu"),
     ).not.toBeInTheDocument();
 
-    // Set authentication to true for the rerender
+    // Unmount the first component
+    unmount();
+
+    // Set authentication to true for the new render
     useIsAuthedMock.mockReturnValue({ data: true, isLoading: false });
     // Ensure config and providers are set correctly
-    useConfigMock.mockReturnValue({ data: { APP_MODE: "saas" }, isLoading: false });
-    useUserProvidersMock.mockReturnValue({ providers: [{ id: "github", name: "GitHub" }] });
-
-    // Add user prop and create a new QueryClient to ensure fresh state
-    const queryClient = new QueryClient({
-      defaultOptions: {
-        queries: {
-          retry: false,
-        },
-      },
+    useConfigMock.mockReturnValue({
+      data: { APP_MODE: "saas" },
+      isLoading: false,
+    });
+    useUserProvidersMock.mockReturnValue({
+      providers: [{ id: "github", name: "GitHub" }],
     });
 
-    rerender(
-      <QueryClientProvider client={queryClient}>
-        <UserActions
-          onLogout={onLogoutMock}
-          user={{ avatar_url: "https://example.com/avatar.png" }}
-        />
-      </QueryClientProvider>,
+    // Render a new component with user prop and authentication
+    renderWithRouter(
+      <UserActions
+        onLogout={onLogoutMock}
+        user={{ avatar_url: "https://example.com/avatar.png" }}
+      />,
     );
 
-    // Component should still render correctly
+    // Component should render correctly
     expect(screen.getByTestId("user-actions")).toBeInTheDocument();
     expect(screen.getByTestId("user-avatar")).toBeInTheDocument();
 
     // Menu should now work with user defined and authenticated
     userAvatar = screen.getByTestId("user-avatar");
     await user.click(userAvatar);
+
     expect(
       screen.getByTestId("account-settings-context-menu"),
     ).toBeInTheDocument();
@@ -227,10 +210,15 @@ describe("UserActions", () => {
   it("should handle user prop changing from defined to undefined", async () => {
     // Start with authentication and providers
     useIsAuthedMock.mockReturnValue({ data: true, isLoading: false });
-    useConfigMock.mockReturnValue({ data: { APP_MODE: "saas" }, isLoading: false });
-    useUserProvidersMock.mockReturnValue({ providers: [{ id: "github", name: "GitHub" }] });
+    useConfigMock.mockReturnValue({
+      data: { APP_MODE: "saas" },
+      isLoading: false,
+    });
+    useUserProvidersMock.mockReturnValue({
+      providers: [{ id: "github", name: "GitHub" }],
+    });
 
-    const { rerender } = renderWithQueryClient(
+    const { rerender } = renderWithRouter(
       <UserActions
         onLogout={onLogoutMock}
         user={{ avatar_url: "https://example.com/avatar.png" }}
@@ -247,14 +235,19 @@ describe("UserActions", () => {
     // Set authentication to false for the rerender
     useIsAuthedMock.mockReturnValue({ data: false, isLoading: false });
     // Keep other mocks with default values
-    useConfigMock.mockReturnValue({ data: { APP_MODE: "saas" }, isLoading: false });
-    useUserProvidersMock.mockReturnValue({ providers: [{ id: "github", name: "GitHub" }] });
+    useConfigMock.mockReturnValue({
+      data: { APP_MODE: "saas" },
+      isLoading: false,
+    });
+    useUserProvidersMock.mockReturnValue({
+      providers: [{ id: "github", name: "GitHub" }],
+    });
 
     // Remove user prop - menu should disappear because user is no longer authenticated
     rerender(
-      <QueryClientProvider client={new QueryClient()}>
+      <MemoryRouter>
         <UserActions onLogout={onLogoutMock} />
-      </QueryClientProvider>,
+      </MemoryRouter>,
     );
 
     // Context menu should NOT be visible when user becomes unauthenticated
@@ -263,16 +256,23 @@ describe("UserActions", () => {
     ).not.toBeInTheDocument();
 
     // Logout option should not be accessible
-    expect(screen.queryByText("ACCOUNT_SETTINGS$LOGOUT")).not.toBeInTheDocument();
+    expect(
+      screen.queryByText("ACCOUNT_SETTINGS$LOGOUT"),
+    ).not.toBeInTheDocument();
   });
 
   it("should work with loading state and user provided", async () => {
     // Ensure authentication and providers are set correctly
     useIsAuthedMock.mockReturnValue({ data: true, isLoading: false });
-    useConfigMock.mockReturnValue({ data: { APP_MODE: "saas" }, isLoading: false });
-    useUserProvidersMock.mockReturnValue({ providers: [{ id: "github", name: "GitHub" }] });
+    useConfigMock.mockReturnValue({
+      data: { APP_MODE: "saas" },
+      isLoading: false,
+    });
+    useUserProvidersMock.mockReturnValue({
+      providers: [{ id: "github", name: "GitHub" }],
+    });
 
-    renderWithQueryClient(
+    renderWithRouter(
       <UserActions
         onLogout={onLogoutMock}
         user={{ avatar_url: "https://example.com/avatar.png" }}

frontend/__tests__/hooks/mutation/use-save-settings.test.tsx

@@ -1,12 +1,12 @@
 import { renderHook, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import OpenHands from "#/api/open-hands";
+import SettingsService from "#/settings-service/settings-service.api";
 import { useSaveSettings } from "#/hooks/mutation/use-save-settings";
 
 describe("useSaveSettings", () => {
   it("should send an empty string for llm_api_key if an empty string is passed, otherwise undefined", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
     const { result } = renderHook(() => useSaveSettings(), {
       wrapper: ({ children }) => (
         <QueryClientProvider client={new QueryClient()}>

frontend/__tests__/i18n/translations.test.tsx

@@ -3,15 +3,15 @@ import { describe, expect, it, vi } from "vitest";
 import i18n from "../../src/i18n";
 import { AccountSettingsContextMenu } from "../../src/components/features/context-menu/account-settings-context-menu";
 import { renderWithProviders } from "../../test-utils";
+import { MemoryRouter } from "react-router";
 
 describe("Translations", () => {
   it("should render translated text", () => {
     i18n.changeLanguage("en");
     renderWithProviders(
-      <AccountSettingsContextMenu
-        onLogout={() => {}}
-        onClose={() => {}}
-      />,
+      <MemoryRouter>
+        <AccountSettingsContextMenu onLogout={() => {}} onClose={() => {}} />
+      </MemoryRouter>,
     );
     expect(
       screen.getByTestId("account-settings-context-menu"),

frontend/__tests__/routes/_oh.test.tsx

@@ -8,8 +8,9 @@ import {
 import userEvent from "@testing-library/user-event";
 import MainApp from "#/routes/root-layout";
 import i18n from "#/i18n";
+import OptionService from "#/api/option-service/option-service.api";
 import * as CaptureConsent from "#/utils/handle-capture-consent";
-import OpenHands from "#/api/open-hands";
+import SettingsService from "#/settings-service/settings-service.api";
 import * as ToastHandlers from "#/utils/custom-toast-handlers";
 
 describe("frontend/routes/_oh", () => {
@@ -62,8 +63,8 @@ describe("frontend/routes/_oh", () => {
   // FIXME: This test fails when it shouldn't be, please investigate
   it.skip("should render and capture the user's consent if oss mode", async () => {
     const user = userEvent.setup();
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     const handleCaptureConsentSpy = vi.spyOn(
       CaptureConsent,
       "handleCaptureConsent",
@@ -106,7 +107,7 @@ describe("frontend/routes/_oh", () => {
   });
 
   it("should not render the user consent form if saas mode", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     getConfigSpy.mockResolvedValue({
       APP_MODE: "saas",
       GITHUB_CLIENT_ID: "test-id",
@@ -184,8 +185,8 @@ describe("frontend/routes/_oh", () => {
   });
 
   it("should render a you're in toast if it is a new user and in saas mode", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     const displaySuccessToastSpy = vi.spyOn(
       ToastHandlers,
       "displaySuccessToast",

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

@@ -3,7 +3,7 @@ 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 SettingsService from "#/settings-service/settings-service.api";
 import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
 import { AvailableLanguages } from "#/i18n";
 import * as CaptureConsent from "#/utils/handle-capture-consent";
@@ -25,7 +25,7 @@ describe("Content", () => {
   });
 
   it("should render the correct default values", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue({
       ...MOCK_DEFAULT_USER_SETTINGS,
       language: "no",
@@ -65,8 +65,8 @@ describe("Form submission", () => {
   });
 
   it("should submit the form with the correct values", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
 
     renderAppSettingsScreen();
@@ -106,7 +106,7 @@ describe("Form submission", () => {
   });
 
   it("should only enable the submit button when there are changes", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
 
     renderAppSettingsScreen();
@@ -146,7 +146,7 @@ describe("Form submission", () => {
   });
 
   it("should call handleCaptureConsents with true when the analytics switch is toggled", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
 
     const handleCaptureConsentsSpy = vi.spyOn(
@@ -168,7 +168,7 @@ describe("Form submission", () => {
   });
 
   it("should call handleCaptureConsents with false when the analytics switch is toggled", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue({
       ...MOCK_DEFAULT_USER_SETTINGS,
       user_consents_to_analytics: true,
@@ -215,8 +215,8 @@ describe("Form submission", () => {
   });
 
   it("should disable the button after submitting changes", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
 
     renderAppSettingsScreen();
@@ -240,8 +240,8 @@ describe("Form submission", () => {
 
 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");
+    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
 
     const displaySuccessToastSpy = vi.spyOn(
@@ -265,8 +265,8 @@ describe("Status toasts", () => {
   });
 
   it("should call displayErrorToast when the settings fail to save", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
 
     const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");

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

@@ -6,9 +6,11 @@ import userEvent from "@testing-library/user-event";
 import i18next from "i18next";
 import { I18nextProvider } from "react-i18next";
 import GitSettingsScreen from "#/routes/git-settings";
-import OpenHands from "#/api/open-hands";
+import SettingsService from "#/settings-service/settings-service.api";
+import OptionService from "#/api/option-service/option-service.api";
+import AuthService from "#/api/auth-service/auth-service.api";
 import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
-import { GetConfigResponse } from "#/api/open-hands.types";
+import { GetConfigResponse } from "#/api/option-service/option.types";
 import * as ToastHandlers from "#/utils/custom-toast-handlers";
 import { SecretsService } from "#/api/secrets-service";
 
@@ -108,7 +110,7 @@ describe("Content", () => {
   });
 
   it("should render the inputs if OSS mode", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
 
     const { rerender } = renderGitSettingsScreen();
@@ -151,8 +153,8 @@ describe("Content", () => {
   });
 
   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");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
 
     getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
     getSettingsSpy.mockResolvedValue({
@@ -226,7 +228,7 @@ describe("Content", () => {
   });
 
   it("should render the 'Configure GitHub Repositories' button if SaaS mode and app slug exists", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
 
     const { rerender } = renderGitSettingsScreen();
@@ -270,7 +272,7 @@ describe("Form submission", () => {
   it("should save the GitHub token", async () => {
     const saveProvidersSpy = vi.spyOn(SecretsService, "addGitProvider");
     saveProvidersSpy.mockImplementation(() => Promise.resolve(true));
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
 
     renderGitSettingsScreen();
@@ -291,7 +293,7 @@ describe("Form submission", () => {
   it("should save GitLab tokens", async () => {
     const saveProvidersSpy = vi.spyOn(SecretsService, "addGitProvider");
     saveProvidersSpy.mockImplementation(() => Promise.resolve(true));
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
 
     renderGitSettingsScreen();
@@ -312,7 +314,7 @@ describe("Form submission", () => {
   it("should save the Bitbucket token", async () => {
     const saveProvidersSpy = vi.spyOn(SecretsService, "addGitProvider");
     saveProvidersSpy.mockImplementation(() => Promise.resolve(true));
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
 
     renderGitSettingsScreen();
@@ -331,7 +333,7 @@ describe("Form submission", () => {
   });
 
   it("should disable the button if there is no input", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
 
     renderGitSettingsScreen();
@@ -357,8 +359,8 @@ describe("Form submission", () => {
   });
 
   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");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
 
     getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
     getSettingsSpy.mockResolvedValue({
@@ -391,9 +393,9 @@ describe("Form submission", () => {
   });
 
   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");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+    const logoutSpy = vi.spyOn(AuthService, "logout");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
 
     getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
     getSettingsSpy.mockResolvedValue({
@@ -418,7 +420,7 @@ describe("Form submission", () => {
   // flaky test
   it.skip("should disable the button when submitting changes", async () => {
     const saveSettingsSpy = vi.spyOn(SecretsService, "addGitProvider");
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
 
     renderGitSettingsScreen();
@@ -442,7 +444,7 @@ describe("Form submission", () => {
 
   it("should disable the button after submitting changes", async () => {
     const saveProvidersSpy = vi.spyOn(SecretsService, "addGitProvider");
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     getConfigSpy.mockResolvedValue(VALID_OSS_CONFIG);
 
     renderGitSettingsScreen();
@@ -476,7 +478,7 @@ describe("Form submission", () => {
 describe("Status toasts", () => {
   it("should call displaySuccessToast when the settings are saved", async () => {
     const saveProvidersSpy = vi.spyOn(SecretsService, "addGitProvider");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
 
     const displaySuccessToastSpy = vi.spyOn(
@@ -499,7 +501,7 @@ describe("Status toasts", () => {
 
   it("should call displayErrorToast when the settings fail to save", async () => {
     const saveProvidersSpy = vi.spyOn(SecretsService, "addGitProvider");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
 
     const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");

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

@@ -7,7 +7,9 @@ import { Provider } from "react-redux";
 import { createAxiosNotFoundErrorObject, setupStore } from "test-utils";
 import HomeScreen from "#/routes/home";
 import { GitRepository } from "#/types/git";
-import OpenHands from "#/api/open-hands";
+import SettingsService from "#/settings-service/settings-service.api";
+import GitService from "#/api/git-service/git-service.api";
+import OptionService from "#/api/option-service/option-service.api";
 import MainApp from "#/routes/root-layout";
 import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
 
@@ -91,12 +93,12 @@ const MOCK_RESPOSITORIES: GitRepository[] = [
 
 describe("HomeScreen", () => {
   beforeEach(() => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue({
       ...MOCK_DEFAULT_USER_SETTINGS,
       provider_tokens_set: {
-        github: null,
-        gitlab: null,
+        github: "fake-token",
+        gitlab: "fake-token",
       },
     });
   });
@@ -118,27 +120,144 @@ describe("HomeScreen", () => {
   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", "lg:flex-row");
+    const homeScreenNewConversationSection = screen.getByTestId(
+      "home-screen-new-conversation-section",
+    );
+    expect(homeScreenNewConversationSection).toHaveClass(
+      "flex",
+      "flex-col",
+      "md:flex-row",
+    );
+
+    const homeScreenRecentConversationsSection = screen.getByTestId(
+      "home-screen-recent-conversations-section",
+    );
+    expect(homeScreenRecentConversationsSection).toHaveClass(
+      "flex",
+      "flex-col",
+      "md:flex-row",
+    );
   });
 
-  // TODO: Fix this test
-  it.skip("should filter and reset the suggested tasks based on repository selection", async () => {});
+  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,
+    });
+
+    // Mock the repository branches API call
+    vi.spyOn(GitService, "getRepositoryBranches").mockResolvedValue({
+      branches: [
+        { name: "main", commit_sha: "123", protected: false },
+        { name: "develop", commit_sha: "456", protected: false },
+      ],
+      has_next_page: false,
+      current_page: 1,
+      per_page: 30,
+      total_count: 2,
+    });
+
+    renderHomeScreen();
+
+    const taskSuggestions = await screen.findByTestId("task-suggestions");
+
+    // Initially, all tasks should be visible
+    await waitFor(() => {
+      within(taskSuggestions).getByText("octocat/hello-world");
+      within(taskSuggestions).getByText("octocat/earth");
+    });
+
+    // Select a repository using the helper function
+    await selectRepository("octocat/hello-world");
+
+    // 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 filter tasks when different repositories are selected", async () => {
+    const retrieveUserGitRepositoriesSpy = vi.spyOn(
+      GitService,
+      "retrieveUserGitRepositories",
+    );
+    retrieveUserGitRepositoriesSpy.mockResolvedValue({
+      data: MOCK_RESPOSITORIES,
+      nextPage: null,
+    });
+
+    // Mock the repository branches API call
+    vi.spyOn(GitService, "getRepositoryBranches").mockResolvedValue({
+      branches: [
+        { name: "main", commit_sha: "123", protected: false },
+        { name: "develop", commit_sha: "456", protected: false },
+      ],
+      has_next_page: false,
+      current_page: 1,
+      per_page: 30,
+      total_count: 2,
+    });
+
+    renderHomeScreen();
+
+    const taskSuggestions = await screen.findByTestId("task-suggestions");
+
+    // Initially, all tasks should be visible
+    await waitFor(() => {
+      within(taskSuggestions).getByText("octocat/hello-world");
+      within(taskSuggestions).getByText("octocat/earth");
+    });
+
+    // Select the first repository
+    await selectRepository("octocat/hello-world");
+
+    // After selecting first 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();
+    });
+
+    // Now select the second repository
+    await selectRepository("octocat/earth");
+
+    // After selecting second repository, only tasks related to that repository should be visible
+    await waitFor(() => {
+      within(taskSuggestions).getByText("octocat/earth");
+      expect(
+        within(taskSuggestions).queryByText("octocat/hello-world"),
+      ).not.toBeInTheDocument();
+    });
+  });
 
   describe("launch buttons", () => {
     const setupLaunchButtons = async () => {
-      let headerLaunchButton = screen.getByTestId("header-launch-button");
+      let headerLaunchButton = screen.getByTestId(
+        "launch-new-conversation-button",
+      );
       let repoLaunchButton = await screen.findByTestId("repo-launch-button");
       let tasksLaunchButtons =
         await screen.findAllByTestId("task-launch-button");
 
       // Mock the repository branches API call
-      vi.spyOn(OpenHands, "getRepositoryBranches").mockResolvedValue({ branches: [
-        { name: "main", commit_sha: "123", protected: false },
-        { name: "develop", commit_sha: "456", protected: false },
-      ], has_next_page: false, current_page: 1, per_page: 30, total_count: 2 });
+      vi.spyOn(GitService, "getRepositoryBranches").mockResolvedValue({
+        branches: [
+          { name: "main", commit_sha: "123", protected: false },
+          { name: "develop", commit_sha: "456", protected: false },
+        ],
+        has_next_page: false,
+        current_page: 1,
+        per_page: 30,
+        total_count: 2,
+      });
 
       // Select a repository to enable the repo launch button
       await selectRepository("octocat/hello-world");
@@ -152,8 +271,7 @@ describe("HomeScreen", () => {
         });
       });
 
-      // Get fresh references to the buttons
-      headerLaunchButton = screen.getByTestId("header-launch-button");
+      headerLaunchButton = screen.getByTestId("launch-new-conversation-button");
       repoLaunchButton = screen.getByTestId("repo-launch-button");
       tasksLaunchButtons = await screen.findAllByTestId("task-launch-button");
 
@@ -166,7 +284,7 @@ describe("HomeScreen", () => {
 
     beforeEach(() => {
       const retrieveUserGitRepositoriesSpy = vi.spyOn(
-        OpenHands,
+        GitService,
         "retrieveUserGitRepositories",
       );
       retrieveUserGitRepositoriesSpy.mockResolvedValue({
@@ -235,16 +353,6 @@ describe("HomeScreen", () => {
       });
     });
   });
-
-  it("should hide the suggested tasks section if not authed with git(hub|lab)", async () => {
-    renderHomeScreen();
-
-    const taskSuggestions = screen.queryByTestId("task-suggestions");
-    const repoConnector = screen.getByTestId("repo-connector");
-
-    expect(taskSuggestions).not.toBeInTheDocument();
-    expect(repoConnector).toBeInTheDocument();
-  });
 });
 
 describe("Settings 404", () => {
@@ -252,8 +360,8 @@ describe("Settings 404", () => {
     vi.resetAllMocks();
   });
 
-  const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-  const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+  const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+  const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
 
   it("should open the settings modal if GET /settings fails with a 404", async () => {
     const error = createAxiosNotFoundErrorObject();
@@ -265,11 +373,10 @@ describe("Settings 404", () => {
     expect(settingsModal).toBeInTheDocument();
   });
 
-  it("should navigate to the settings screen when clicking the advanced settings button", async () => {
+  it("should have the correct advanced settings link that opens in a new window", async () => {
     const error = createAxiosNotFoundErrorObject();
     getSettingsSpy.mockRejectedValue(error);
 
-    const user = userEvent.setup();
     renderHomeScreen();
 
     const settingsScreen = screen.queryByTestId("settings-screen");
@@ -278,16 +385,16 @@ describe("Settings 404", () => {
     const settingsModal = await screen.findByTestId("ai-config-modal");
     expect(settingsModal).toBeInTheDocument();
 
-    const advancedSettingsButton = await screen.findByTestId(
+    const advancedSettingsLink = 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();
+    // The advanced settings link should be an anchor tag that opens in a new window
+    const linkElement = advancedSettingsLink.querySelector("a");
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute("href", "/settings");
+    expect(linkElement).toHaveAttribute("target", "_blank");
+    expect(linkElement).toHaveAttribute("rel", "noreferrer noopener");
   });
 
   it("should not open the settings modal if GET /settings fails but is SaaS mode", async () => {
@@ -312,8 +419,8 @@ describe("Settings 404", () => {
 });
 
 describe("Setup Payment modal", () => {
-  const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-  const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+  const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+  const getSettingsSpy = vi.spyOn(SettingsService, "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

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

@@ -3,13 +3,27 @@ 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 SettingsService from "#/settings-service/settings-service.api";
+import OptionService from "#/api/option-service/option-service.api";
 import {
   MOCK_DEFAULT_USER_SETTINGS,
   resetTestHandlersMockSettings,
 } from "#/mocks/handlers";
 import * as AdvancedSettingsUtlls from "#/utils/has-advanced-settings-set";
 import * as ToastHandlers from "#/utils/custom-toast-handlers";
+import BillingService from "#/api/billing-service/billing-service.api";
+
+// Mock react-router hooks
+const mockUseSearchParams = vi.fn();
+vi.mock("react-router", () => ({
+  useSearchParams: () => mockUseSearchParams(),
+}));
+
+// Mock useIsAuthed hook
+const mockUseIsAuthed = vi.fn();
+vi.mock("#/hooks/query/use-is-authed", () => ({
+  useIsAuthed: () => mockUseIsAuthed(),
+}));
 
 const renderLlmSettingsScreen = () =>
   render(<LlmSettingsScreen />, {
@@ -23,6 +37,17 @@ const renderLlmSettingsScreen = () =>
 beforeEach(() => {
   vi.resetAllMocks();
   resetTestHandlersMockSettings();
+
+  // Default mock for useSearchParams - returns empty params
+  mockUseSearchParams.mockReturnValue([
+    {
+      get: () => null,
+    },
+    vi.fn(),
+  ]);
+
+  // Default mock for useIsAuthed - returns authenticated by default
+  mockUseIsAuthed.mockReturnValue({ data: true, isLoading: false });
 });
 
 describe("Content", () => {
@@ -56,7 +81,7 @@ describe("Content", () => {
     });
 
     it("should render the existing settings values", async () => {
-      const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+      const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
       getSettingsSpy.mockResolvedValue({
         ...MOCK_DEFAULT_USER_SETTINGS,
         llm_model: "openai/gpt-4o",
@@ -84,7 +109,9 @@ describe("Content", () => {
       renderLlmSettingsScreen();
       await screen.findByTestId("llm-settings-screen");
 
-      const confirmation = screen.getByTestId("enable-confirmation-mode-switch");
+      const confirmation = screen.getByTestId(
+        "enable-confirmation-mode-switch",
+      );
 
       // Initially confirmation mode is false, so security analyzer should not be visible
       expect(confirmation).not.toBeChecked();
@@ -185,7 +212,7 @@ describe("Content", () => {
     });
 
     it("should render existing advanced settings correctly", async () => {
-      const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+      const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
       getSettingsSpy.mockResolvedValue({
         ...MOCK_DEFAULT_USER_SETTINGS,
         llm_model: "openai/gpt-4o",
@@ -230,7 +257,7 @@ describe("Content", () => {
 
 describe("Form submission", () => {
   it("should submit the basic form with the correct values", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
 
     renderLlmSettingsScreen();
     await screen.findByTestId("llm-settings-screen");
@@ -266,7 +293,7 @@ describe("Form submission", () => {
   });
 
   it("should submit the advanced form with the correct values", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
 
     renderLlmSettingsScreen();
     await screen.findByTestId("llm-settings-screen");
@@ -310,7 +337,9 @@ describe("Form submission", () => {
     // select security analyzer
     const securityAnalyzer = screen.getByTestId("security-analyzer-input");
     await userEvent.click(securityAnalyzer);
-    const securityAnalyzerOption = screen.getByText("SETTINGS$SECURITY_ANALYZER_NONE");
+    const securityAnalyzerOption = screen.getByText(
+      "SETTINGS$SECURITY_ANALYZER_NONE",
+    );
     await userEvent.click(securityAnalyzerOption);
 
     const submitButton = screen.getByTestId("submit-button");
@@ -329,7 +358,7 @@ describe("Form submission", () => {
   });
 
   it("should disable the button if there are no changes in the basic form", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue({
       ...MOCK_DEFAULT_USER_SETTINGS,
       llm_model: "openai/gpt-4o",
@@ -372,7 +401,7 @@ describe("Form submission", () => {
   });
 
   it("should disable the button if there are no changes in the advanced form", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue({
       ...MOCK_DEFAULT_USER_SETTINGS,
       llm_model: "openai/gpt-4o",
@@ -392,10 +421,14 @@ describe("Form submission", () => {
     const baseUrl = await screen.findByTestId("base-url-input");
     const apiKey = await screen.findByTestId("llm-api-key-input");
     const agent = await screen.findByTestId("agent-input");
-    const condensor = await screen.findByTestId("enable-memory-condenser-switch");
+    const condensor = await screen.findByTestId(
+      "enable-memory-condenser-switch",
+    );
 
     // Confirmation mode switch is now in basic settings, always visible
-    const confirmation = await screen.findByTestId("enable-confirmation-mode-switch");
+    const confirmation = await screen.findByTestId(
+      "enable-confirmation-mode-switch",
+    );
 
     // enter custom model
     await userEvent.type(model, "-mini");
@@ -468,9 +501,13 @@ describe("Form submission", () => {
     expect(submitButton).toBeDisabled();
 
     // select security analyzer
-    const securityAnalyzer = await screen.findByTestId("security-analyzer-input");
+    const securityAnalyzer = await screen.findByTestId(
+      "security-analyzer-input",
+    );
     await userEvent.click(securityAnalyzer);
-    const securityAnalyzerOption = screen.getByText("SETTINGS$SECURITY_ANALYZER_NONE");
+    const securityAnalyzerOption = screen.getByText(
+      "SETTINGS$SECURITY_ANALYZER_NONE",
+    );
     await userEvent.click(securityAnalyzerOption);
     expect(securityAnalyzer).toHaveValue("SETTINGS$SECURITY_ANALYZER_NONE");
 
@@ -478,9 +515,13 @@ describe("Form submission", () => {
 
     // revert back to original value
     await userEvent.click(securityAnalyzer);
-    const originalSecurityAnalyzerOption = screen.getByText("SETTINGS$SECURITY_ANALYZER_LLM_DEFAULT");
+    const originalSecurityAnalyzerOption = screen.getByText(
+      "SETTINGS$SECURITY_ANALYZER_LLM_DEFAULT",
+    );
     await userEvent.click(originalSecurityAnalyzerOption);
-    expect(securityAnalyzer).toHaveValue("SETTINGS$SECURITY_ANALYZER_LLM_DEFAULT");
+    expect(securityAnalyzer).toHaveValue(
+      "SETTINGS$SECURITY_ANALYZER_LLM_DEFAULT",
+    );
     expect(submitButton).toBeDisabled();
   });
 
@@ -512,7 +553,7 @@ describe("Form submission", () => {
 
   // flaky test
   it.skip("should disable the button when submitting changes", async () => {
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
 
     renderLlmSettingsScreen();
     await screen.findByTestId("llm-settings-screen");
@@ -539,7 +580,7 @@ describe("Form submission", () => {
   });
 
   it("should clear advanced settings when saving basic settings", async () => {
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     getSettingsSpy.mockResolvedValue({
       ...MOCK_DEFAULT_USER_SETTINGS,
       llm_model: "openai/gpt-4o",
@@ -547,7 +588,7 @@ describe("Form submission", () => {
       llm_api_key_set: true,
       confirmation_mode: true,
     });
-    const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+    const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
     renderLlmSettingsScreen();
 
     await screen.findByTestId("llm-settings-screen");
@@ -583,7 +624,7 @@ describe("Form submission", () => {
 describe("Status toasts", () => {
   describe("Basic form", () => {
     it("should call displaySuccessToast when the settings are saved", async () => {
-      const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
 
       const displaySuccessToastSpy = vi.spyOn(
         ToastHandlers,
@@ -604,7 +645,7 @@ describe("Status toasts", () => {
     });
 
     it("should call displayErrorToast when the settings fail to save", async () => {
-      const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
 
       const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");
 
@@ -626,7 +667,7 @@ describe("Status toasts", () => {
 
   describe("Advanced form", () => {
     it("should call displaySuccessToast when the settings are saved", async () => {
-      const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
 
       const displaySuccessToastSpy = vi.spyOn(
         ToastHandlers,
@@ -652,7 +693,7 @@ describe("Status toasts", () => {
     });
 
     it("should call displayErrorToast when the settings fail to save", async () => {
-      const saveSettingsSpy = vi.spyOn(OpenHands, "saveSettings");
+      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
 
       const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");
 
@@ -679,58 +720,401 @@ describe("Status toasts", () => {
 });
 
 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",
+  describe("SaaS subscription", () => {
+    // Common mock configurations
+    const MOCK_SAAS_CONFIG = {
+      APP_MODE: "saas" as const,
+      GITHUB_CLIENT_ID: "fake-github-client-id",
+      POSTHOG_CLIENT_KEY: "fake-posthog-client-key",
+      FEATURE_FLAGS: {
+        ENABLE_BILLING: true,
+        HIDE_LLM_SETTINGS: false,
+        ENABLE_JIRA: false,
+        ENABLE_JIRA_DC: false,
+        ENABLE_LINEAR: false,
+      },
+    };
+
+    const MOCK_ACTIVE_SUBSCRIPTION = {
+      start_at: "2024-01-01",
+      end_at: "2024-12-31",
+      created_at: "2024-01-01",
+    };
+
+    it("should show upgrade banner and prevent all interactions for unsubscribed SaaS users", async () => {
+      // Mock SaaS mode without subscription
+      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);
+
+      // Mock subscription access to return null (no subscription)
+      const getSubscriptionAccessSpy = vi.spyOn(
+        BillingService,
+        "getSubscriptionAccess",
+      );
+      getSubscriptionAccessSpy.mockResolvedValue(null);
+
+      // Mock saveSettings to ensure it's not called
+      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
+
+      renderLlmSettingsScreen();
+      await screen.findByTestId("llm-settings-screen");
+
+      // Should show upgrade banner
+      expect(screen.getByTestId("upgrade-banner")).toBeInTheDocument();
+
+      // Should have a clickable upgrade button
+      const upgradeButton = screen.getByRole("button", { name: /upgrade/i });
+      expect(upgradeButton).toBeInTheDocument();
+      expect(upgradeButton).not.toBeDisabled();
+
+      // Form should be disabled
+      const form = screen.getByTestId("llm-settings-form-basic");
+      expect(form).toHaveAttribute("aria-disabled", "true");
+
+      // All form inputs should be disabled or non-interactive
+      const providerInput = screen.getByTestId("llm-provider-input");
+      const modelInput = screen.getByTestId("llm-model-input");
+      const apiKeyInput = screen.getByTestId("llm-api-key-input");
+      const advancedSwitch = screen.getByTestId("advanced-settings-switch");
+      const confirmationModeSwitch = screen.getByTestId(
+        "enable-confirmation-mode-switch",
+      );
+      const submitButton = screen.getByTestId("submit-button");
+
+      // Inputs should be disabled
+      expect(providerInput).toBeDisabled();
+      expect(modelInput).toBeDisabled();
+      expect(apiKeyInput).toBeDisabled();
+      expect(advancedSwitch).toBeDisabled();
+      expect(confirmationModeSwitch).toBeDisabled();
+      expect(submitButton).toBeDisabled();
+
+      // Try to interact with inputs - they should not respond
+      await userEvent.click(providerInput);
+      await userEvent.type(apiKeyInput, "test-key");
+
+      // Values should not change
+      expect(apiKeyInput).toHaveValue("");
+
+      // Try to submit form - should not call API
+      await userEvent.click(submitButton);
+      expect(saveSettingsSpy).not.toHaveBeenCalled();
     });
 
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
+    it("should call subscription checkout API when upgrade button is clicked", async () => {
+      // Mock SaaS mode without subscription
+      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);
 
-    const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-    await userEvent.click(advancedSwitch);
-    await screen.findByTestId("llm-settings-form-advanced");
+      // Mock subscription access to return null (no subscription)
+      const getSubscriptionAccessSpy = vi.spyOn(
+        BillingService,
+        "getSubscriptionAccess",
+      );
+      getSubscriptionAccessSpy.mockResolvedValue(null);
 
-    const runtimeSettingsInput = screen.queryByTestId("runtime-settings-input");
-    expect(runtimeSettingsInput).not.toBeInTheDocument();
-  });
+      // Mock the subscription checkout API call
+      const createSubscriptionCheckoutSessionSpy = vi.spyOn(
+        BillingService,
+        "createSubscriptionCheckoutSession",
+      );
+      createSubscriptionCheckoutSessionSpy.mockResolvedValue({});
 
-  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");
+
+      // Click the upgrade button
+      const upgradeButton = screen.getByRole("button", { name: /upgrade/i });
+      await userEvent.click(upgradeButton);
+
+      // Should call the subscription checkout API
+      expect(createSubscriptionCheckoutSessionSpy).toHaveBeenCalled();
     });
 
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
+    it("should disable upgrade button for unauthenticated users in SaaS mode", async () => {
+      // Mock SaaS mode without subscription
+      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);
 
-    const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-    await userEvent.click(advancedSwitch);
-    await screen.findByTestId("llm-settings-form-advanced");
+      // Mock subscription access to return null (no subscription)
+      const getSubscriptionAccessSpy = vi.spyOn(
+        BillingService,
+        "getSubscriptionAccess",
+      );
+      getSubscriptionAccessSpy.mockResolvedValue(null);
 
-    const runtimeSettingsInput = screen.queryByTestId("runtime-settings-input");
-    expect(runtimeSettingsInput).toBeInTheDocument();
-  });
+      // Mock subscription checkout API
+      const createSubscriptionCheckoutSessionSpy = vi.spyOn(
+        BillingService,
+        "createSubscriptionCheckoutSession",
+      );
 
-  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",
+      // Mock authentication to return false (unauthenticated) from the start
+      mockUseIsAuthed.mockReturnValue({ data: false, isLoading: false });
+
+      // Mock settings to return default settings even when unauthenticated
+      // This is necessary because the useSettings hook is disabled when user is not authenticated
+      const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
+      getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
+
+      renderLlmSettingsScreen();
+
+      // Wait for either the settings screen or skeleton to appear
+      await waitFor(() => {
+        const settingsScreen = screen.queryByTestId("llm-settings-screen");
+        const skeleton = screen.queryByTestId("app-settings-skeleton");
+        expect(settingsScreen || skeleton).toBeInTheDocument();
+      });
+
+      // If we get the skeleton, the test scenario isn't valid - skip the rest
+      if (screen.queryByTestId("app-settings-skeleton")) {
+        // For unauthenticated users, the settings don't load, so no upgrade banner is shown
+        // This is the expected behavior - unauthenticated users see a skeleton loading state
+        expect(screen.queryByTestId("upgrade-banner")).not.toBeInTheDocument();
+        return;
+      }
+
+      await screen.findByTestId("llm-settings-screen");
+
+      // Should show upgrade banner
+      expect(screen.getByTestId("upgrade-banner")).toBeInTheDocument();
+
+      // Upgrade button should be disabled for unauthenticated users
+      const upgradeButton = screen.getByRole("button", { name: /upgrade/i });
+      expect(upgradeButton).toBeInTheDocument();
+      expect(upgradeButton).toBeDisabled();
+
+      // Clicking disabled button should not call the API
+      await userEvent.click(upgradeButton);
+      expect(createSubscriptionCheckoutSessionSpy).not.toHaveBeenCalled();
     });
 
-    renderLlmSettingsScreen();
-    await screen.findByTestId("llm-settings-screen");
+    it("should not show upgrade banner and allow form interaction for subscribed SaaS users", async () => {
+      // Mock SaaS mode with subscription
+      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);
 
-    const advancedSwitch = screen.getByTestId("advanced-settings-switch");
-    await userEvent.click(advancedSwitch);
-    await screen.findByTestId("llm-settings-form-advanced");
+      // Mock subscription access to return active subscription
+      const getSubscriptionAccessSpy = vi.spyOn(
+        BillingService,
+        "getSubscriptionAccess",
+      );
+      getSubscriptionAccessSpy.mockResolvedValue(MOCK_ACTIVE_SUBSCRIPTION);
 
-    const runtimeSettingsInput = screen.queryByTestId("runtime-settings-input");
-    expect(runtimeSettingsInput).toBeInTheDocument();
-    expect(runtimeSettingsInput).toBeDisabled();
+      renderLlmSettingsScreen();
+      await screen.findByTestId("llm-settings-screen");
+
+      // Wait for subscription data to load
+      await waitFor(() => {
+        expect(getSubscriptionAccessSpy).toHaveBeenCalled();
+      });
+
+      // Should NOT show upgrade banner
+      expect(screen.queryByTestId("upgrade-banner")).not.toBeInTheDocument();
+
+      // Form should NOT be disabled
+      const form = screen.getByTestId("llm-settings-form-basic");
+      expect(form).not.toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("should not call save settings API when making changes in disabled form for unsubscribed users", async () => {
+      // Mock SaaS mode without subscription
+      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);
+
+      // Mock subscription access to return null (no subscription)
+      const getSubscriptionAccessSpy = vi.spyOn(
+        BillingService,
+        "getSubscriptionAccess",
+      );
+      getSubscriptionAccessSpy.mockResolvedValue(null);
+
+      // Mock saveSettings to track calls
+      const saveSettingsSpy = vi.spyOn(SettingsService, "saveSettings");
+
+      renderLlmSettingsScreen();
+      await screen.findByTestId("llm-settings-screen");
+
+      // Verify that form elements are disabled for unsubscribed users
+      const confirmationModeSwitch = screen.getByTestId(
+        "enable-confirmation-mode-switch",
+      );
+      const submitButton = screen.getByTestId("submit-button");
+
+      expect(confirmationModeSwitch).not.toBeChecked();
+      expect(confirmationModeSwitch).toBeDisabled();
+      expect(submitButton).toBeDisabled();
+
+      // Try to click the disabled confirmation mode switch - it should not change state
+      await userEvent.click(confirmationModeSwitch);
+      expect(confirmationModeSwitch).not.toBeChecked(); // Should remain unchecked
+
+      // Try to submit the form - button should remain disabled
+      await userEvent.click(submitButton);
+
+      // Should NOT call save settings API for unsubscribed users
+      expect(saveSettingsSpy).not.toHaveBeenCalled();
+    });
+
+    it("should show backdrop overlay for unsubscribed users", async () => {
+      // Mock SaaS mode without subscription
+      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);
+
+      // Mock subscription access to return null (no subscription)
+      const getSubscriptionAccessSpy = vi.spyOn(
+        BillingService,
+        "getSubscriptionAccess",
+      );
+      getSubscriptionAccessSpy.mockResolvedValue(null);
+
+      renderLlmSettingsScreen();
+      await screen.findByTestId("llm-settings-screen");
+
+      // Wait for subscription data to load
+      await waitFor(() => {
+        expect(getSubscriptionAccessSpy).toHaveBeenCalled();
+      });
+
+      // Should show upgrade banner
+      expect(screen.getByTestId("upgrade-banner")).toBeInTheDocument();
+
+      // Should show backdrop overlay
+      const backdrop = screen.getByTestId("settings-backdrop");
+      expect(backdrop).toBeInTheDocument();
+    });
+
+    it("should not show backdrop overlay for subscribed users", async () => {
+      // Mock SaaS mode with subscription
+      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);
+
+      // Mock subscription access to return active subscription
+      const getSubscriptionAccessSpy = vi.spyOn(
+        BillingService,
+        "getSubscriptionAccess",
+      );
+      getSubscriptionAccessSpy.mockResolvedValue(MOCK_ACTIVE_SUBSCRIPTION);
+
+      renderLlmSettingsScreen();
+      await screen.findByTestId("llm-settings-screen");
+
+      // Wait for subscription data to load
+      await waitFor(() => {
+        expect(getSubscriptionAccessSpy).toHaveBeenCalled();
+      });
+
+      // Should NOT show backdrop overlay
+      expect(screen.queryByTestId("settings-backdrop")).not.toBeInTheDocument();
+    });
+
+    it("should display success toast when redirected back with ?checkout=success parameter", async () => {
+      // Mock SaaS mode
+      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);
+
+      // Mock subscription access
+      const getSubscriptionAccessSpy = vi.spyOn(
+        BillingService,
+        "getSubscriptionAccess",
+      );
+      getSubscriptionAccessSpy.mockResolvedValue(MOCK_ACTIVE_SUBSCRIPTION);
+
+      // Mock toast handler
+      const displaySuccessToastSpy = vi.spyOn(
+        ToastHandlers,
+        "displaySuccessToast",
+      );
+
+      // Mock URL search params with ?checkout=success
+      mockUseSearchParams.mockReturnValue([
+        {
+          get: (param: string) => (param === "checkout" ? "success" : null),
+        },
+        vi.fn(),
+      ]);
+
+      // Render component with checkout=success parameter
+      renderLlmSettingsScreen();
+      await screen.findByTestId("llm-settings-screen");
+
+      // Verify success toast is displayed with correct message
+      expect(displaySuccessToastSpy).toHaveBeenCalledWith(
+        "SUBSCRIPTION$SUCCESS",
+      );
+    });
+
+    it("should display error toast when redirected back with ?checkout=cancel parameter", async () => {
+      // Mock SaaS mode
+      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);
+
+      // Mock subscription access
+      const getSubscriptionAccessSpy = vi.spyOn(
+        BillingService,
+        "getSubscriptionAccess",
+      );
+      getSubscriptionAccessSpy.mockResolvedValue(MOCK_ACTIVE_SUBSCRIPTION);
+
+      // Mock toast handler
+      const displayErrorToastSpy = vi.spyOn(ToastHandlers, "displayErrorToast");
+
+      // Mock URL search params with ?checkout=cancel
+      mockUseSearchParams.mockReturnValue([
+        {
+          get: (param: string) => (param === "checkout" ? "cancel" : null),
+        },
+        vi.fn(),
+      ]);
+
+      // Render component with checkout=cancel parameter
+      renderLlmSettingsScreen();
+      await screen.findByTestId("llm-settings-screen");
+
+      // Verify error toast is displayed with correct message
+      expect(displayErrorToastSpy).toHaveBeenCalledWith("SUBSCRIPTION$FAILURE");
+    });
+
+    it("should show upgrade banner when subscription is expired or disabled", async () => {
+      // Mock SaaS mode
+      const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+      getConfigSpy.mockResolvedValue(MOCK_SAAS_CONFIG);
+
+      // Mock subscription access to return null (expired/disabled subscriptions return null from backend)
+      // The backend only returns active subscriptions within their validity period
+      const getSubscriptionAccessSpy = vi.spyOn(
+        BillingService,
+        "getSubscriptionAccess",
+      );
+      getSubscriptionAccessSpy.mockResolvedValue(null);
+
+      renderLlmSettingsScreen();
+      await screen.findByTestId("llm-settings-screen");
+
+      // Wait for subscription data to load
+      await waitFor(() => {
+        expect(getSubscriptionAccessSpy).toHaveBeenCalled();
+      });
+
+      // Should show upgrade banner for expired/disabled subscriptions (when API returns null)
+      expect(screen.getByTestId("upgrade-banner")).toBeInTheDocument();
+
+      // Form should be disabled
+      const form = screen.getByTestId("llm-settings-form-basic");
+      expect(form).toHaveAttribute("aria-disabled", "true");
+
+      // All form inputs should be disabled
+      const providerInput = screen.getByTestId("llm-provider-input");
+      const modelInput = screen.getByTestId("llm-model-input");
+      const apiKeyInput = screen.getByTestId("llm-api-key-input");
+      const confirmationModeSwitch = screen.getByTestId(
+        "enable-confirmation-mode-switch",
+      );
+
+      expect(providerInput).toBeDisabled();
+      expect(modelInput).toBeDisabled();
+      expect(apiKeyInput).toBeDisabled();
+      expect(confirmationModeSwitch).toBeDisabled();
+    });
   });
 });

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

@@ -6,7 +6,8 @@ import { createRoutesStub, Outlet } from "react-router";
 import SecretsSettingsScreen from "#/routes/secrets-settings";
 import { SecretsService } from "#/api/secrets-service";
 import { GetSecretsResponse } from "#/api/secrets-service.types";
-import OpenHands from "#/api/open-hands";
+import SettingsService from "#/settings-service/settings-service.api";
+import OptionService from "#/api/option-service/option-service.api";
 import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
 
 const MOCK_GET_SECRETS_RESPONSE: GetSecretsResponse["custom_secrets"] = [
@@ -53,7 +54,7 @@ const renderSecretsSettings = () =>
   });
 
 beforeEach(() => {
-  const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+  const getConfigSpy = vi.spyOn(OptionService, "getConfig");
   // @ts-expect-error - only return the config we need
   getConfigSpy.mockResolvedValue({
     APP_MODE: "oss",
@@ -67,8 +68,8 @@ describe("Content", () => {
   });
 
   it("should NOT render a button to connect with git if they havent already in oss", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
-    const getSettingsSpy = vi.spyOn(OpenHands, "getSettings");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
+    const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
     const getSecretsSpy = vi.spyOn(SecretsService, "getSecrets");
     // @ts-expect-error - only return the config we need
     getConfigSpy.mockResolvedValue({
@@ -87,7 +88,7 @@ describe("Content", () => {
   });
 
   it("should render add secret button in saas mode", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     const getSecretsSpy = vi.spyOn(SecretsService, "getSecrets");
     // @ts-expect-error - only return the config we need
     getConfigSpy.mockResolvedValue({
@@ -476,7 +477,9 @@ describe("Secret actions", () => {
 
     // make POST request
     expect(createSecretSpy).not.toHaveBeenCalled();
-    expect(screen.queryByText("SECRETS$SECRET_ALREADY_EXISTS")).toBeInTheDocument();
+    expect(
+      screen.queryByText("SECRETS$SECRET_ALREADY_EXISTS"),
+    ).toBeInTheDocument();
 
     await userEvent.clear(nameInput);
     await userEvent.type(nameInput, "My_Custom_Secret");
@@ -560,7 +563,9 @@ describe("Secret actions", () => {
 
     // make POST request
     expect(createSecretSpy).not.toHaveBeenCalled();
-    expect(screen.queryByText("SECRETS$SECRET_ALREADY_EXISTS")).toBeInTheDocument();
+    expect(
+      screen.queryByText("SECRETS$SECRET_ALREADY_EXISTS"),
+    ).toBeInTheDocument();
 
     expect(nameInput).toHaveValue(MOCK_GET_SECRETS_RESPONSE[0].name);
     expect(valueInput).toHaveValue("my-custom-secret-value");

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

@@ -3,14 +3,14 @@ import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { createRoutesStub } from "react-router";
 import { renderWithProviders } from "test-utils";
-import OpenHands from "#/api/open-hands";
 import SettingsScreen from "#/routes/settings";
 import { PaymentForm } from "#/components/features/payment/payment-form";
-import * as useSettingsModule from "#/hooks/query/use-settings";
 
 // Mock the useSettings hook
 vi.mock("#/hooks/query/use-settings", async () => {
-  const actual = await vi.importActual<typeof import("#/hooks/query/use-settings")>("#/hooks/query/use-settings");
+  const actual = await vi.importActual<
+    typeof import("#/hooks/query/use-settings")
+  >("#/hooks/query/use-settings");
   return {
     ...actual,
     useSettings: vi.fn().mockReturnValue({
@@ -24,21 +24,23 @@ vi.mock("#/hooks/query/use-settings", async () => {
 
 // Mock the i18next hook
 vi.mock("react-i18next", async () => {
-  const actual = await vi.importActual<typeof import("react-i18next")>("react-i18next");
+  const actual =
+    await vi.importActual<typeof import("react-i18next")>("react-i18next");
   return {
     ...actual,
     useTranslation: () => ({
       t: (key: string) => {
         const translations: Record<string, string> = {
-          "SETTINGS$NAV_INTEGRATIONS": "Integrations",
-          "SETTINGS$NAV_APPLICATION": "Application",
-          "SETTINGS$NAV_CREDITS": "Credits",
-          "SETTINGS$NAV_API_KEYS": "API Keys",
-          "SETTINGS$NAV_LLM": "LLM",
-          "SETTINGS$NAV_USER": "User",
-          "SETTINGS$NAV_SECRETS": "Secrets",
-          "SETTINGS$NAV_MCP": "MCP",
-          "SETTINGS$TITLE": "Settings"
+          SETTINGS$NAV_INTEGRATIONS: "Integrations",
+          SETTINGS$NAV_APPLICATION: "Application",
+          SETTINGS$NAV_CREDITS: "Credits",
+          SETTINGS$NAV_BILLING: "Billing",
+          SETTINGS$NAV_API_KEYS: "API Keys",
+          SETTINGS$NAV_LLM: "LLM",
+          SETTINGS$NAV_USER: "User",
+          SETTINGS$NAV_SECRETS: "Secrets",
+          SETTINGS$NAV_MCP: "MCP",
+          SETTINGS$TITLE: "Settings",
         };
         return translations[key] || key;
       },
@@ -105,16 +107,16 @@ describe("Settings Billing", () => {
     vi.clearAllMocks();
   });
 
-  it("should not render the credits tab if OSS mode", async () => {
+  it("should not render the billing tab if OSS mode", async () => {
     // OSS mode is set by default in beforeEach
     renderSettingsScreen();
 
     const navbar = await screen.findByTestId("settings-navbar");
-    const credits = within(navbar).queryByText("Credits");
+    const credits = within(navbar).queryByText("Billing");
     expect(credits).not.toBeInTheDocument();
   });
 
-  it("should render the credits tab if SaaS mode and billing is enabled", async () => {
+  it("should render the billing tab if SaaS mode and billing is enabled", async () => {
     mockUseConfig.mockReturnValue({
       data: {
         APP_MODE: "saas",
@@ -134,10 +136,10 @@ describe("Settings Billing", () => {
     renderSettingsScreen();
 
     const navbar = await screen.findByTestId("settings-navbar");
-    within(navbar).getByText("Credits");
+    within(navbar).getByText("Billing");
   });
 
-  it("should render the billing settings if clicking the credits item", async () => {
+  it("should render the billing settings if clicking the billing item", async () => {
     const user = userEvent.setup();
     mockUseConfig.mockReturnValue({
       data: {
@@ -158,7 +160,7 @@ describe("Settings Billing", () => {
     renderSettingsScreen();
 
     const navbar = await screen.findByTestId("settings-navbar");
-    const credits = within(navbar).getByText("Credits");
+    const credits = within(navbar).getByText("Billing");
     await user.click(credits);
 
     const billingSection = await screen.findByTestId("billing-settings");

frontend/__tests__/routes/settings.test.tsx

@@ -3,7 +3,7 @@ import { createRoutesStub } from "react-router";
 import { describe, expect, it, vi } from "vitest";
 import { QueryClientProvider } from "@tanstack/react-query";
 import SettingsScreen, { clientLoader } from "#/routes/settings";
-import OpenHands from "#/api/open-hands";
+import OptionService from "#/api/option-service/option-service.api";
 
 // Mock the i18next hook
 vi.mock("react-i18next", async () => {
@@ -93,7 +93,7 @@ describe("Settings Screen", () => {
   it("should render the navbar", async () => {
     const sectionsToInclude = ["llm", "integrations", "application", "secrets"];
     const sectionsToExclude = ["api keys", "credits", "billing"];
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     // @ts-expect-error - only return app mode
     getConfigSpy.mockResolvedValue({
       APP_MODE: "oss",
@@ -129,14 +129,15 @@ describe("Settings Screen", () => {
     mockQueryClient.setQueryData(["config"], saasConfig);
 
     const sectionsToInclude = [
+      "llm", // LLM settings are now always shown in SaaS mode
       "user",
       "integrations",
       "application",
-      "credits", // The nav item shows "credits" text but routes to /billing
+      "billing", // The nav item shows "billing" text and routes to /billing
       "secrets",
       "api keys",
     ];
-    const sectionsToExclude = ["llm"];
+    const sectionsToExclude: string[] = []; // No sections are excluded in SaaS mode now
 
     renderSettingsScreen();
 
@@ -156,7 +157,7 @@ describe("Settings Screen", () => {
   });
 
   it("should not be able to access saas-only routes in oss mode", async () => {
-    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
+    const getConfigSpy = vi.spyOn(OptionService, "getConfig");
     // @ts-expect-error - only return app mode
     getConfigSpy.mockResolvedValue({
       APP_MODE: "oss",

frontend/__tests__/use-suggested-tasks.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+import { useSuggestedTasks } from "../src/hooks/query/use-suggested-tasks";
+import { useShouldShowUserFeatures } from "../src/hooks/use-should-show-user-features";
+
+// Mock the dependencies
+vi.mock("../src/hooks/use-should-show-user-features");
+vi.mock("#/api/suggestions-service/suggestions-service.api", () => ({
+  SuggestionsService: {
+    getSuggestedTasks: vi.fn(),
+  },
+}));
+
+const mockUseShouldShowUserFeatures = vi.mocked(useShouldShowUserFeatures);
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return ({ children }: { children: React.ReactNode }) =>
+    React.createElement(QueryClientProvider, { client: queryClient }, children);
+};
+
+describe("useSuggestedTasks", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default to disabled
+    mockUseShouldShowUserFeatures.mockReturnValue(false);
+  });
+
+  it("should be disabled when useShouldShowUserFeatures returns false", () => {
+    mockUseShouldShowUserFeatures.mockReturnValue(false);
+
+    const { result } = renderHook(() => useSuggestedTasks(), {
+      wrapper: createWrapper(),
+    });
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isFetching).toBe(false);
+  });
+
+  it("should be enabled when useShouldShowUserFeatures returns true", () => {
+    mockUseShouldShowUserFeatures.mockReturnValue(true);
+
+    const { result } = renderHook(() => useSuggestedTasks(), {
+      wrapper: createWrapper(),
+    });
+
+    // When enabled, the query should be loading/fetching
+    expect(result.current.isLoading).toBe(true);
+  });
+});

frontend/__tests__/utils/browser-tab.test.ts

@@ -1,51 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-
-import { browserTab } from "#/utils/browser-tab";
-
-// These tests exercise the browser-tab notification flasher behavior.
-// Specifically we verify that when the document title changes externally
-// while a notification is active, the flasher updates its internal
-// baseline so it restores/toggles to the new title instead of an old one.
-
-describe("browserTab notifications", () => {
-  const MESSAGE = "Agent ready";
-  const INITIAL = "Conversation 123 | OpenHands";
-  const RENAMED = "My renamed title | OpenHands";
-
-  beforeEach(() => {
-    vi.useFakeTimers();
-    // reset title for each test
-    document.title = INITIAL;
-  });
-
-  afterEach(() => {
-    browserTab.stopNotification();
-    vi.runOnlyPendingTimers();
-    vi.useRealTimers();
-  });
-
-  it("updates baseline when title changes during an active notification and restores to the new title", () => {
-    // Start flashing
-    browserTab.startNotification(MESSAGE);
-
-    // Tick once: should switch to the message
-    vi.advanceTimersByTime(1000);
-    expect(document.title).toBe(MESSAGE);
-
-    // Simulate an external rename while flashing (e.g., user edits title)
-    document.title = RENAMED;
-
-    // Next tick: flasher observes the external change and updates baseline
-    vi.advanceTimersByTime(1000);
-    // On this tick, we toggle back to the message
-    expect(document.title).toBe(MESSAGE);
-
-    // Next tick should toggle to the updated baseline (renamed title)
-    vi.advanceTimersByTime(1000);
-    expect(document.title).toBe(RENAMED);
-
-    // Stop flashing: title should remain the updated baseline
-    browserTab.stopNotification();
-    expect(document.title).toBe(RENAMED);
-  });
-});

frontend/__tests__/utils/check-hardcoded-strings.test.tsx

@@ -1,18 +1,73 @@
 import { render, screen } from "@testing-library/react";
 import { test, expect, describe, vi } from "vitest";
+import { MemoryRouter } from "react-router";
 import { InteractiveChatBox } from "#/components/features/chat/interactive-chat-box";
-import { ChatInput } from "#/components/features/chat/chat-input";
+import { renderWithProviders } from "../../test-utils";
 
-vi.mock("react-i18next", () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
+// Mock the translation function
+vi.mock("react-i18next", async () => {
+  const actual = await vi.importActual("react-i18next");
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => {
+        // Return a mock translation for the test
+        const translations: Record<string, string> = {
+          CHAT$PLACEHOLDER: "What do you want to build?",
+        };
+        return translations[key] || key;
+      },
+    }),
+  };
+});
+
+// Mock the useActiveConversation hook
+vi.mock("#/hooks/query/use-active-conversation", () => ({
+  useActiveConversation: () => ({
+    data: null,
+  }),
+}));
+
+// Mock React Router hooks
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual("react-router");
+  return {
+    ...actual,
+    useNavigate: () => vi.fn(),
+    useParams: () => ({ conversationId: "test-conversation-id" }),
+  };
+});
+
+// Mock other hooks that might be used by the component
+vi.mock("#/hooks/use-user-providers", () => ({
+  useUserProviders: () => ({
+    providers: [],
+  }),
+}));
+
+vi.mock("#/hooks/use-conversation-name-context-menu", () => ({
+  useConversationNameContextMenu: () => ({
+    isOpen: false,
+    contextMenuRef: { current: null },
+    handleContextMenu: vi.fn(),
+    handleClose: vi.fn(),
+    handleRename: vi.fn(),
+    handleDelete: vi.fn(),
   }),
 }));
 
 describe("Check for hardcoded English strings", () => {
   test("InteractiveChatBox should not have hardcoded English strings", () => {
-    const { container } = render(
-      <InteractiveChatBox onSubmit={() => {}} onStop={() => {}} />,
+    const { container } = renderWithProviders(
+      <MemoryRouter>
+        <InteractiveChatBox
+          onSubmit={() => {}}
+          onStop={() => {}}
+          isWaitingForUserInput={false}
+          hasSubstantiveAgentActions={false}
+          optimisticUserMessage={false}
+        />
+      </MemoryRouter>,
     );
 
     // Get all text content
@@ -22,7 +77,7 @@ describe("Check for hardcoded English strings", () => {
     const hardcodedStrings = [
       "What do you want to build?",
       "Launch from Scratch",
-      "Read this"
+      "Read this",
     ];
 
     // Check each string
@@ -30,9 +85,4 @@ describe("Check for hardcoded English strings", () => {
       expect(text).not.toContain(str);
     });
   });
-
-  test("ChatInput should use translation key for placeholder", () => {
-    render(<ChatInput onSubmit={() => {}} />);
-    screen.getByPlaceholderText("SUGGESTIONS$WHAT_TO_BUILD");
-  });
 });

frontend/__tests__/utils/format-ms.test.ts

@@ -1,9 +0,0 @@
-import { test, expect } from "vitest";
-import { formatMs } from "../../src/utils/format-ms";
-
-test("formatMs", () => {
-  expect(formatMs(1000)).toBe("00:01");
-  expect(formatMs(1000 * 60)).toBe("01:00");
-  expect(formatMs(1000 * 60 * 2.5)).toBe("02:30");
-  expect(formatMs(1000 * 60 * 12)).toBe("12:00");
-});

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

@@ -1,8 +1,5 @@
 import { expect, test } from "vitest";
-import {
-  SuggestedTask,
-  SuggestedTaskGroup,
-} from "#/components/features/home/tasks/task.types";
+import { SuggestedTask, SuggestedTaskGroup } from "#/utils/types";
 import { groupSuggestedTasks } from "#/utils/group-suggested-tasks";
 
 const rawTasks: SuggestedTask[] = [

frontend/__tests__/utils/i18n-test-utils.tsx

@@ -1,29 +0,0 @@
-import { ReactNode } from "react";
-import { I18nextProvider } from "react-i18next";
-
-const mockI18n = {
-  language: "ja",
-  t: (key: string) => {
-    const translations: Record<string, string> = {
-      "SUGGESTIONS$TODO_APP": "ToDoリストアプリを開発する",
-      "LANDING$BUILD_APP_BUTTON": "プルリクエストを表示するアプリを開発する",
-      "SUGGESTIONS$HACKER_NEWS": "Hacker Newsのトップ記事を表示するbashスクリプトを作成する",
-      "LANDING$TITLE": "一緒に開発を始めましょう！",
-      "OPEN_IN_VSCODE": "VS Codeで開く",
-      "INCREASE_TEST_COVERAGE": "テストカバレッジを向上",
-      "AUTO_MERGE_PRS": "PRを自動マージ",
-      "FIX_README": "READMEを修正",
-      "CLEAN_DEPENDENCIES": "依存関係を整理"
-    };
-    return translations[key] || key;
-  },
-  exists: () => true,
-  changeLanguage: () => new Promise(() => {}),
-  use: () => mockI18n,
-};
-
-export function I18nTestProvider({ children }: { children: ReactNode }) {
-  return (
-    <I18nextProvider i18n={mockI18n as any}>{children}</I18nextProvider>
-  );
-}

frontend/__tests__/utils/parse-github-url.test.ts

@@ -1,20 +0,0 @@
-import { expect, test } from "vitest";
-import { parseGithubUrl } from "../../src/utils/parse-github-url";
-
-test("parseGithubUrl", () => {
-  expect(
-    parseGithubUrl("https://github.com/alexreardon/tiny-invariant"),
-  ).toEqual(["alexreardon", "tiny-invariant"]);
-
-  expect(parseGithubUrl("https://github.com/All-Hands-AI/OpenHands")).toEqual([
-    "All-Hands-AI",
-    "OpenHands",
-  ]);
-
-  expect(parseGithubUrl("https://github.com/All-Hands-AI/")).toEqual([
-    "All-Hands-AI",
-    "",
-  ]);
-
-  expect(parseGithubUrl("https://github.com/")).toEqual([]);
-});

frontend/package.json

@@ -25,6 +25,7 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.4.0",
     "axios": "^1.11.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "downshift": "^9.0.10",
@@ -46,14 +47,15 @@
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-redux": "^9.2.0",
+    "react-resizable-panels": "^3.0.5",
     "react-router": "^7.8.2",
     "react-syntax-highlighter": "^15.6.6",
-    "react-textarea-autosize": "^8.5.9",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "sirv-cli": "^3.0.1",
     "socket.io-client": "^4.8.1",
     "tailwind-merge": "^3.3.1",
+    "tailwind-scrollbar": "^4.0.2",
     "vite": "^7.1.4",
     "web-vitals": "^5.1.0",
     "ws": "^8.18.2"
@@ -75,12 +77,19 @@
     "lint:fix": "eslint src --ext .ts,.tsx,.js --fix && prettier --write src/**/*.{ts,tsx}",
     "prepare": "cd .. && husky frontend/.husky",
     "typecheck": "react-router typegen && tsc",
+    "typecheck:staged": "react-router typegen && npx tsc --noEmit --skipLibCheck",
     "check-translation-completeness": "node scripts/check-translation-completeness.cjs"
   },
   "lint-staged": {
     "src/**/*.{ts,tsx,js}": [
       "eslint --fix",
       "prettier --write"
+    ],
+    "src/**/*.{ts,tsx}": [
+      "bash -c 'npm run typecheck:staged'"
+    ],
+    "src/**/*": [
+      "npm run check-translation-completeness"
     ]
   },
   "devDependencies": {

frontend/postcss.config.js

@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};

frontend/public/mockServiceWorker.js

@@ -7,7 +7,7 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.10.4'
+const PACKAGE_VERSION = '2.10.5'
 const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

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

@@ -0,0 +1,52 @@
+import { openHands } from "../open-hands-axios";
+import { AuthenticateResponse, GitHubAccessTokenResponse } from "./auth.types";
+import { GetConfigResponse } from "../option-service/option.types";
+
+/**
+ * Authentication service for handling all authentication-related API calls
+ */
+class AuthService {
+  /**
+   * Authenticate with GitHub token
+   * @param appMode The application mode (saas or oss)
+   * @returns Response with authentication status and user info if successful
+   */
+  static async authenticate(
+    appMode: GetConfigResponse["APP_MODE"],
+  ): Promise<boolean> {
+    if (appMode === "oss") return true;
+
+    // Just make the request, if it succeeds (no exception thrown), return true
+    await openHands.post<AuthenticateResponse>("/api/authenticate");
+    return true;
+  }
+
+  /**
+   * Get GitHub access token from Keycloak callback
+   * @param code Code provided by GitHub
+   * @returns GitHub access token
+   */
+  static async getGitHubAccessToken(
+    code: string,
+  ): Promise<GitHubAccessTokenResponse> {
+    const { data } = await openHands.post<GitHubAccessTokenResponse>(
+      "/api/keycloak/callback",
+      {
+        code,
+      },
+    );
+    return data;
+  }
+
+  /**
+   * Logout user from the application
+   * @param appMode The application mode (saas or oss)
+   */
+  static async logout(appMode: GetConfigResponse["APP_MODE"]): Promise<void> {
+    const endpoint =
+      appMode === "saas" ? "/api/logout" : "/api/unset-provider-tokens";
+    await openHands.post(endpoint);
+  }
+}
+
+export default AuthService;

frontend/src/api/auth-service/auth.types.ts

@@ -0,0 +1,8 @@
+export interface AuthenticateResponse {
+  message?: string;
+  error?: string;
+}
+
+export interface GitHubAccessTokenResponse {
+  access_token: string;
+}

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

@@ -0,0 +1,84 @@
+import { openHands } from "../open-hands-axios";
+import {
+  CancelSubscriptionResponse,
+  SubscriptionAccess,
+} from "./billing.types";
+
+/**
+ * Billing Service API - Handles all billing-related API endpoints
+ */
+class BillingService {
+  /**
+   * Create a Stripe checkout session for credit purchase
+   * @param amount The amount to charge in dollars
+   * @returns The redirect URL for the checkout session
+   */
+  static async createCheckoutSession(amount: number): Promise<string> {
+    const { data } = await openHands.post(
+      "/api/billing/create-checkout-session",
+      {
+        amount,
+      },
+    );
+    return data.redirect_url;
+  }
+
+  /**
+   * Create a customer setup session for payment method management
+   * @returns The redirect URL for the customer setup session
+   */
+  static async createBillingSessionResponse(): Promise<string> {
+    const { data } = await openHands.post(
+      "/api/billing/create-customer-setup-session",
+    );
+    return data.redirect_url;
+  }
+
+  /**
+   * Get the user's current credit balance
+   * @returns The user's credit balance as a string
+   */
+  static async getBalance(): Promise<string> {
+    const { data } = await openHands.get<{ credits: string }>(
+      "/api/billing/credits",
+    );
+    return data.credits;
+  }
+
+  /**
+   * Get the user's subscription access information
+   * @returns The user's subscription access details or null if not available
+   */
+  static async getSubscriptionAccess(): Promise<SubscriptionAccess | null> {
+    const { data } = await openHands.get<SubscriptionAccess | null>(
+      "/api/billing/subscription-access",
+    );
+    return data;
+  }
+
+  /**
+   * Create a subscription checkout session for subscribing to a plan
+   * @returns The redirect URL for the subscription checkout session
+   */
+  static async createSubscriptionCheckoutSession(): Promise<{
+    redirect_url?: string;
+  }> {
+    const { data } = await openHands.post(
+      "/api/billing/subscription-checkout-session",
+    );
+    return data;
+  }
+
+  /**
+   * Cancel the user's subscription
+   * @returns The response indicating the result of the cancellation request
+   */
+  static async cancelSubscription(): Promise<CancelSubscriptionResponse> {
+    const { data } = await openHands.post<CancelSubscriptionResponse>(
+      "/api/billing/cancel-subscription",
+    );
+    return data;
+  }
+}
+
+export default BillingService;

frontend/src/api/billing-service/billing.types.ts

@@ -0,0 +1,12 @@
+export type SubscriptionAccess = {
+  start_at: string;
+  end_at: string;
+  created_at: string;
+  cancelled_at?: string | null;
+  stripe_subscription_id?: string | null;
+};
+
+export interface CancelSubscriptionResponse {
+  status: string;
+  message: string;
+}

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

@@ -2,38 +2,23 @@ import { AxiosHeaders } from "axios";
 import {
   Feedback,
   FeedbackResponse,
-  GitHubAccessTokenResponse,
-  GetConfigResponse,
   GetVSCodeUrlResponse,
-  AuthenticateResponse,
   Conversation,
   ResultSet,
   GetTrajectoryResponse,
-  GitChangeDiff,
-  GitChange,
   GetMicroagentsResponse,
   GetMicroagentPromptResponse,
   CreateMicroagent,
-  MicroagentContentResponse,
   FileUploadSuccessResponse,
   GetFilesResponse,
   GetFileResponse,
-} from "./open-hands.types";
-import { openHands } from "./open-hands-axios";
-import { ApiSettings, PostApiSettings, Provider } from "#/types/settings";
-import {
-  GitUser,
-  GitRepository,
-  PaginatedBranchesResponse,
-  Branch,
-} from "#/types/git";
-import { SuggestedTask } from "#/components/features/home/tasks/task.types";
-import { extractNextPageFromLink } from "#/utils/extract-next-page-from-link";
-import { RepositoryMicroagent } from "#/types/microagent-management";
+} from "../open-hands.types";
+import { openHands } from "../open-hands-axios";
+import { Provider } from "#/types/settings";
+import { SuggestedTask } from "#/utils/types";
 import { BatchFeedbackData } from "#/hooks/query/use-batch-feedback";
-import { SubscriptionAccess } from "#/types/billing";
 
-class OpenHands {
+class ConversationService {
   private static currentConversation: Conversation | null = null;
 
   /**
@@ -66,42 +51,6 @@ class OpenHands {
     return `/api/conversations/${conversationId}`;
   }
 
-  /**
-   * Retrieve the list of models available
-   * @returns List of models available
-   */
-  static async getModels(): Promise<string[]> {
-    const { data } = await openHands.get<string[]>("/api/options/models");
-    return data;
-  }
-
-  /**
-   * Retrieve the list of agents available
-   * @returns List of agents available
-   */
-  static async getAgents(): Promise<string[]> {
-    const { data } = await openHands.get<string[]>("/api/options/agents");
-    return data;
-  }
-
-  /**
-   * Retrieve the list of security analyzers available
-   * @returns List of security analyzers available
-   */
-  static async getSecurityAnalyzers(): Promise<string[]> {
-    const { data } = await openHands.get<string[]>(
-      "/api/options/security-analyzers",
-    );
-    return data;
-  }
-
-  static async getConfig(): Promise<GetConfigResponse> {
-    const { data } = await openHands.get<GetConfigResponse>(
-      "/api/options/config",
-    );
-    return data;
-  }
-
   static getConversationHeaders(): AxiosHeaders {
     const headers = new AxiosHeaders();
     const sessionApiKey = this.currentConversation?.session_api_key;
@@ -210,20 +159,6 @@ class OpenHands {
     return data;
   }
 
-  /**
-   * Authenticate with GitHub token
-   * @returns Response with authentication status and user info if successful
-   */
-  static async authenticate(
-    appMode: GetConfigResponse["APP_MODE"],
-  ): Promise<boolean> {
-    if (appMode === "oss") return true;
-
-    // Just make the request, if it succeeds (no exception thrown), return true
-    await openHands.post<AuthenticateResponse>("/api/authenticate");
-    return true;
-  }
-
   /**
    * Get the blob of the workspace zip
    * @returns Blob of the workspace zip
@@ -249,22 +184,6 @@ class OpenHands {
     return Object.keys(response.data.hosts);
   }
 
-  /**
-   * @param code Code provided by GitHub
-   * @returns GitHub access token
-   */
-  static async getGitHubAccessToken(
-    code: string,
-  ): Promise<GitHubAccessTokenResponse> {
-    const { data } = await openHands.post<GitHubAccessTokenResponse>(
-      "/api/keycloak/callback",
-      {
-        code,
-      },
-    );
-    return data;
-  }
-
   /**
    * Get the VSCode URL
    * @returns VSCode URL
@@ -391,92 +310,6 @@ class OpenHands {
     return data;
   }
 
-  /**
-   * Get the settings from the server or use the default settings if not found
-   */
-  static async getSettings(): Promise<ApiSettings> {
-    const { data } = await openHands.get<ApiSettings>("/api/settings");
-    return data;
-  }
-
-  /**
-   * Save the settings to the server. Only valid settings are saved.
-   * @param settings - the settings to save
-   */
-  static async saveSettings(
-    settings: Partial<PostApiSettings>,
-  ): Promise<boolean> {
-    const data = await openHands.post("/api/settings", settings);
-    return data.status === 200;
-  }
-
-  static async createCheckoutSession(amount: number): Promise<string> {
-    const { data } = await openHands.post(
-      "/api/billing/create-checkout-session",
-      {
-        amount,
-      },
-    );
-    return data.redirect_url;
-  }
-
-  static async createBillingSessionResponse(): Promise<string> {
-    const { data } = await openHands.post(
-      "/api/billing/create-customer-setup-session",
-    );
-    return data.redirect_url;
-  }
-
-  static async getBalance(): Promise<string> {
-    const { data } = await openHands.get<{ credits: string }>(
-      "/api/billing/credits",
-    );
-    return data.credits;
-  }
-
-  static async getSubscriptionAccess(): Promise<SubscriptionAccess | null> {
-    const { data } = await openHands.get<SubscriptionAccess | null>(
-      "/api/billing/subscription-access",
-    );
-    return data;
-  }
-
-  static async getGitUser(): Promise<GitUser> {
-    const response = await openHands.get<GitUser>("/api/user/info");
-
-    const { data } = response;
-
-    const user: GitUser = {
-      id: data.id,
-      login: data.login,
-      avatar_url: data.avatar_url,
-      company: data.company,
-      name: data.name,
-      email: data.email,
-    };
-
-    return user;
-  }
-
-  static async searchGitRepositories(
-    query: string,
-    per_page = 5,
-    selected_provider?: Provider,
-  ): Promise<GitRepository[]> {
-    const response = await openHands.get<GitRepository[]>(
-      "/api/user/search/repositories",
-      {
-        params: {
-          query,
-          per_page,
-          selected_provider,
-        },
-      },
-    );
-
-    return response.data;
-  }
-
   static async getTrajectory(
     conversationId: string,
   ): Promise<GetTrajectoryResponse> {
@@ -487,131 +320,6 @@ class OpenHands {
     return data;
   }
 
-  static async logout(appMode: GetConfigResponse["APP_MODE"]): Promise<void> {
-    const endpoint =
-      appMode === "saas" ? "/api/logout" : "/api/unset-provider-tokens";
-    await openHands.post(endpoint);
-  }
-
-  static async getGitChanges(conversationId: string): Promise<GitChange[]> {
-    const url = `${this.getConversationUrl(conversationId)}/git/changes`;
-    const { data } = await openHands.get<GitChange[]>(url, {
-      headers: this.getConversationHeaders(),
-    });
-    return data;
-  }
-
-  static async getGitChangeDiff(
-    conversationId: string,
-    path: string,
-  ): Promise<GitChangeDiff> {
-    const url = `${this.getConversationUrl(conversationId)}/git/diff`;
-    const { data } = await openHands.get<GitChangeDiff>(url, {
-      params: { path },
-      headers: this.getConversationHeaders(),
-    });
-    return data;
-  }
-
-  /**
-   * @returns A list of repositories
-   */
-  static async retrieveUserGitRepositories(
-    selected_provider: Provider,
-    page = 1,
-    per_page = 30,
-  ) {
-    const { data } = await openHands.get<GitRepository[]>(
-      "/api/user/repositories",
-      {
-        params: {
-          selected_provider,
-          sort: "pushed",
-          page,
-          per_page,
-        },
-      },
-    );
-
-    const link =
-      data.length > 0 && data[0].link_header ? data[0].link_header : "";
-    const nextPage = extractNextPageFromLink(link);
-
-    return { data, nextPage };
-  }
-
-  static async retrieveInstallationRepositories(
-    selected_provider: Provider,
-    installationIndex: number,
-    installations: string[],
-    page = 1,
-    per_page = 30,
-  ) {
-    const installationId = installations[installationIndex];
-    const response = await openHands.get<GitRepository[]>(
-      "/api/user/repositories",
-      {
-        params: {
-          selected_provider,
-          sort: "pushed",
-          page,
-          per_page,
-          installation_id: installationId,
-        },
-      },
-    );
-    const link =
-      response.data.length > 0 && response.data[0].link_header
-        ? response.data[0].link_header
-        : "";
-    const nextPage = extractNextPageFromLink(link);
-    let nextInstallation: number | null;
-    if (nextPage) {
-      nextInstallation = installationIndex;
-    } else if (installationIndex + 1 < installations.length) {
-      nextInstallation = installationIndex + 1;
-    } else {
-      nextInstallation = null;
-    }
-    return {
-      data: response.data,
-      nextPage,
-      installationIndex: nextInstallation,
-    };
-  }
-
-  static async getRepositoryBranches(
-    repository: string,
-    page: number = 1,
-    perPage: number = 30,
-  ): Promise<PaginatedBranchesResponse> {
-    const { data } = await openHands.get<PaginatedBranchesResponse>(
-      `/api/user/repository/branches?repository=${encodeURIComponent(repository)}&page=${page}&per_page=${perPage}`,
-    );
-
-    return data;
-  }
-
-  static async searchRepositoryBranches(
-    repository: string,
-    query: string,
-    perPage: number = 30,
-    selectedProvider?: Provider,
-  ): Promise<Branch[]> {
-    const { data } = await openHands.get<Branch[]>(
-      `/api/user/search/branches`,
-      {
-        params: {
-          repository,
-          query,
-          per_page: perPage,
-          selected_provider: selectedProvider,
-        },
-      },
-    );
-    return data;
-  }
-
   /**
    * Get the available microagents associated with a conversation
    * @param conversationId The ID of the conversation
@@ -627,43 +335,6 @@ class OpenHands {
     return data;
   }
 
-  /**
-   * Get the available microagents for a repository
-   * @param owner The repository owner
-   * @param repo The repository name
-   * @returns The available microagents for the repository
-   */
-  static async getRepositoryMicroagents(
-    owner: string,
-    repo: string,
-  ): Promise<RepositoryMicroagent[]> {
-    const { data } = await openHands.get<RepositoryMicroagent[]>(
-      `/api/user/repository/${owner}/${repo}/microagents`,
-    );
-    return data;
-  }
-
-  /**
-   * Get the content of a specific microagent from a repository
-   * @param owner The repository owner
-   * @param repo The repository name
-   * @param filePath The path to the microagent file within the repository
-   * @returns The microagent content and metadata
-   */
-  static async getRepositoryMicroagentContent(
-    owner: string,
-    repo: string,
-    filePath: string,
-  ): Promise<MicroagentContentResponse> {
-    const { data } = await openHands.get<MicroagentContentResponse>(
-      `/api/user/repository/${owner}/${repo}/microagents/content`,
-      {
-        params: { file_path: filePath },
-      },
-    );
-    return data;
-  }
-
   static async getMicroagentPrompt(
     conversationId: string,
     eventId: number,
@@ -751,39 +422,6 @@ class OpenHands {
     );
     return response.data;
   }
-
-  /**
-   * Get the user installation IDs
-   * @param provider The provider to get installation IDs for (github, bitbucket, etc.)
-   * @returns List of installation IDs
-   */
-  static async getUserInstallationIds(provider: Provider): Promise<string[]> {
-    const { data } = await openHands.get<string[]>(
-      `/api/user/installations?provider=${provider}`,
-    );
-    return data;
-  }
-
-  static async getMicroagentManagementConversations(
-    selectedRepository: string,
-    pageId?: string,
-    limit: number = 100,
-  ): Promise<Conversation[]> {
-    const params: Record<string, string | number> = {
-      limit,
-      selected_repository: selectedRepository,
-    };
-
-    if (pageId) {
-      params.page_id = pageId;
-    }
-
-    const { data } = await openHands.get<ResultSet<Conversation>>(
-      "/api/microagent-management/conversations",
-      { params },
-    );
-    return data.results;
-  }
 }
 
-export default OpenHands;
+export default ConversationService;

frontend/src/api/conversation.utils.ts

@@ -1,4 +1,4 @@
-import OpenHands from "#/api/open-hands";
+import ConversationService from "#/api/conversation-service/conversation-service.api";
 
 /**
  * Returns a URL compatible for the file service
@@ -6,4 +6,4 @@ import OpenHands from "#/api/open-hands";
  * @returns URL of the conversation
  */
 export const getConversationUrl = (conversationId: string) =>
-  OpenHands.getConversationUrl(conversationId);
+  ConversationService.getConversationUrl(conversationId);

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

@@ -0,0 +1,251 @@
+import { openHands } from "../open-hands-axios";
+import { Provider } from "#/types/settings";
+import { GitRepository, PaginatedBranchesResponse, Branch } from "#/types/git";
+import { extractNextPageFromLink } from "#/utils/extract-next-page-from-link";
+import { RepositoryMicroagent } from "#/types/microagent-management";
+import {
+  MicroagentContentResponse,
+  GitChange,
+  GitChangeDiff,
+} from "../open-hands.types";
+import ConversationService from "../conversation-service/conversation-service.api";
+
+/**
+ * Git Service API - Handles all Git-related API endpoints
+ */
+class GitService {
+  /**
+   * Search for Git repositories
+   * @param query Search query
+   * @param per_page Number of results per page
+   * @param selected_provider Git provider to search in
+   * @returns List of matching repositories
+   */
+  static async searchGitRepositories(
+    query: string,
+    per_page = 5,
+    selected_provider?: Provider,
+  ): Promise<GitRepository[]> {
+    const response = await openHands.get<GitRepository[]>(
+      "/api/user/search/repositories",
+      {
+        params: {
+          query,
+          per_page,
+          selected_provider,
+        },
+      },
+    );
+
+    return response.data;
+  }
+
+  /**
+   * Retrieve user's Git repositories
+   * @param selected_provider Git provider
+   * @param page Page number
+   * @param per_page Number of results per page
+   * @returns User's repositories with pagination info
+   */
+  static async retrieveUserGitRepositories(
+    selected_provider: Provider,
+    page = 1,
+    per_page = 30,
+  ) {
+    const { data } = await openHands.get<GitRepository[]>(
+      "/api/user/repositories",
+      {
+        params: {
+          selected_provider,
+          sort: "pushed",
+          page,
+          per_page,
+        },
+      },
+    );
+
+    const link =
+      data.length > 0 && data[0].link_header ? data[0].link_header : "";
+    const nextPage = extractNextPageFromLink(link);
+
+    return { data, nextPage };
+  }
+
+  /**
+   * Retrieve repositories from a specific installation
+   * @param selected_provider Git provider
+   * @param installationIndex Current installation index
+   * @param installations List of installation IDs
+   * @param page Page number
+   * @param per_page Number of results per page
+   * @returns Installation repositories with pagination info
+   */
+  static async retrieveInstallationRepositories(
+    selected_provider: Provider,
+    installationIndex: number,
+    installations: string[],
+    page = 1,
+    per_page = 30,
+  ) {
+    const installationId = installations[installationIndex];
+    const response = await openHands.get<GitRepository[]>(
+      "/api/user/repositories",
+      {
+        params: {
+          selected_provider,
+          sort: "pushed",
+          page,
+          per_page,
+          installation_id: installationId,
+        },
+      },
+    );
+    const link =
+      response.data.length > 0 && response.data[0].link_header
+        ? response.data[0].link_header
+        : "";
+    const nextPage = extractNextPageFromLink(link);
+    let nextInstallation: number | null;
+    if (nextPage) {
+      nextInstallation = installationIndex;
+    } else if (installationIndex + 1 < installations.length) {
+      nextInstallation = installationIndex + 1;
+    } else {
+      nextInstallation = null;
+    }
+    return {
+      data: response.data,
+      nextPage,
+      installationIndex: nextInstallation,
+    };
+  }
+
+  /**
+   * Get repository branches
+   * @param repository Repository name
+   * @param page Page number
+   * @param perPage Number of results per page
+   * @returns Paginated branches response
+   */
+  static async getRepositoryBranches(
+    repository: string,
+    page: number = 1,
+    perPage: number = 30,
+  ): Promise<PaginatedBranchesResponse> {
+    const { data } = await openHands.get<PaginatedBranchesResponse>(
+      `/api/user/repository/branches?repository=${encodeURIComponent(repository)}&page=${page}&per_page=${perPage}`,
+    );
+
+    return data;
+  }
+
+  /**
+   * Search repository branches
+   * @param repository Repository name
+   * @param query Search query
+   * @param perPage Number of results per page
+   * @param selectedProvider Git provider
+   * @returns List of matching branches
+   */
+  static async searchRepositoryBranches(
+    repository: string,
+    query: string,
+    perPage: number = 30,
+    selectedProvider?: Provider,
+  ): Promise<Branch[]> {
+    const { data } = await openHands.get<Branch[]>(
+      `/api/user/search/branches`,
+      {
+        params: {
+          repository,
+          query,
+          per_page: perPage,
+          selected_provider: selectedProvider,
+        },
+      },
+    );
+    return data;
+  }
+
+  /**
+   * Get the available microagents for a repository
+   * @param owner The repository owner
+   * @param repo The repository name
+   * @returns The available microagents for the repository
+   */
+  static async getRepositoryMicroagents(
+    owner: string,
+    repo: string,
+  ): Promise<RepositoryMicroagent[]> {
+    const { data } = await openHands.get<RepositoryMicroagent[]>(
+      `/api/user/repository/${owner}/${repo}/microagents`,
+    );
+    return data;
+  }
+
+  /**
+   * Get the content of a specific microagent from a repository
+   * @param owner The repository owner
+   * @param repo The repository name
+   * @param filePath The path to the microagent file within the repository
+   * @returns The microagent content and metadata
+   */
+  static async getRepositoryMicroagentContent(
+    owner: string,
+    repo: string,
+    filePath: string,
+  ): Promise<MicroagentContentResponse> {
+    const { data } = await openHands.get<MicroagentContentResponse>(
+      `/api/user/repository/${owner}/${repo}/microagents/content`,
+      {
+        params: { file_path: filePath },
+      },
+    );
+    return data;
+  }
+
+  /**
+   * Get the user installation IDs
+   * @param provider The provider to get installation IDs for (github, bitbucket, etc.)
+   * @returns List of installation IDs
+   */
+  static async getUserInstallationIds(provider: Provider): Promise<string[]> {
+    const { data } = await openHands.get<string[]>(
+      `/api/user/installations?provider=${provider}`,
+    );
+    return data;
+  }
+
+  /**
+   * Get git changes for a conversation
+   * @param conversationId The conversation ID
+   * @returns List of git changes
+   */
+  static async getGitChanges(conversationId: string): Promise<GitChange[]> {
+    const url = `${ConversationService.getConversationUrl(conversationId)}/git/changes`;
+    const { data } = await openHands.get<GitChange[]>(url, {
+      headers: ConversationService.getConversationHeaders(),
+    });
+    return data;
+  }
+
+  /**
+   * Get git change diff for a specific file
+   * @param conversationId The conversation ID
+   * @param path The file path
+   * @returns Git change diff
+   */
+  static async getGitChangeDiff(
+    conversationId: string,
+    path: string,
+  ): Promise<GitChangeDiff> {
+    const url = `${ConversationService.getConversationUrl(conversationId)}/git/diff`;
+    const { data } = await openHands.get<GitChangeDiff>(url, {
+      params: { path },
+      headers: ConversationService.getConversationHeaders(),
+    });
+    return data;
+  }
+}
+
+export default GitService;

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

@@ -26,10 +26,6 @@ export interface FeedbackResponse {
   body: FeedbackBodyResponse;
 }
 
-export interface GitHubAccessTokenResponse {
-  access_token: string;
-}
-
 export interface AuthenticationResponse {
   message: string;
   login?: string; // Only present when allow list is enabled
@@ -44,25 +40,6 @@ export interface Feedback {
   trajectory: unknown[];
 }
 
-export interface GetConfigResponse {
-  APP_MODE: "saas" | "oss";
-  APP_SLUG?: string;
-  GITHUB_CLIENT_ID: string;
-  POSTHOG_CLIENT_KEY: string;
-  PROVIDERS_CONFIGURED?: Provider[];
-  AUTH_URL?: string;
-  FEATURE_FLAGS: {
-    ENABLE_BILLING: boolean;
-    HIDE_LLM_SETTINGS: boolean;
-    ENABLE_JIRA: boolean;
-    ENABLE_JIRA_DC: boolean;
-    ENABLE_LINEAR: boolean;
-  };
-  MAINTENANCE?: {
-    startTime: string;
-  };
-}
-
 export interface GetVSCodeUrlResponse {
   vscode_url: string | null;
   error?: string;
@@ -73,11 +50,6 @@ export interface GetTrajectoryResponse {
   error?: string;
 }
 
-export interface AuthenticateResponse {
-  message?: string;
-  error?: string;
-}
-
 export interface RepositorySelection {
   selected_repository: string | null;
   selected_branch: string | null;
@@ -144,6 +116,11 @@ export interface GetMicroagentPromptResponse {
   prompt: string;
 }
 
+export interface IOption<T> {
+  label: string;
+  value: T;
+}
+
 export interface CreateMicroagent {
   repo: string;
   git_provider?: Provider;

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

@@ -0,0 +1,49 @@
+import { openHands } from "../open-hands-axios";
+import { GetConfigResponse } from "./option.types";
+
+/**
+ * Service for handling API options endpoints
+ */
+class OptionService {
+  /**
+   * Retrieve the list of models available
+   * @returns List of models available
+   */
+  static async getModels(): Promise<string[]> {
+    const { data } = await openHands.get<string[]>("/api/options/models");
+    return data;
+  }
+
+  /**
+   * Retrieve the list of agents available
+   * @returns List of agents available
+   */
+  static async getAgents(): Promise<string[]> {
+    const { data } = await openHands.get<string[]>("/api/options/agents");
+    return data;
+  }
+
+  /**
+   * Retrieve the list of security analyzers available
+   * @returns List of security analyzers available
+   */
+  static async getSecurityAnalyzers(): Promise<string[]> {
+    const { data } = await openHands.get<string[]>(
+      "/api/options/security-analyzers",
+    );
+    return data;
+  }
+
+  /**
+   * Get the configuration from the server
+   * @returns Configuration response
+   */
+  static async getConfig(): Promise<GetConfigResponse> {
+    const { data } = await openHands.get<GetConfigResponse>(
+      "/api/options/config",
+    );
+    return data;
+  }
+}
+
+export default OptionService;

frontend/src/api/option-service/option.types.ts

@@ -0,0 +1,20 @@
+import { Provider } from "#/types/settings";
+
+export interface GetConfigResponse {
+  APP_MODE: "saas" | "oss";
+  APP_SLUG?: string;
+  GITHUB_CLIENT_ID: string;
+  POSTHOG_CLIENT_KEY: string;
+  PROVIDERS_CONFIGURED?: Provider[];
+  AUTH_URL?: string;
+  FEATURE_FLAGS: {
+    ENABLE_BILLING: boolean;
+    HIDE_LLM_SETTINGS: boolean;
+    ENABLE_JIRA: boolean;
+    ENABLE_JIRA_DC: boolean;
+    ENABLE_LINEAR: boolean;
+  };
+  MAINTENANCE?: {
+    startTime: string;
+  };
+}

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

@@ -1,4 +1,4 @@
-import { SuggestedTask } from "#/components/features/home/tasks/task.types";
+import { SuggestedTask } from "#/utils/types";
 import { openHands } from "../open-hands-axios";
 
 export class SuggestionsService {

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

@@ -0,0 +1,30 @@
+import { openHands } from "../open-hands-axios";
+import { GitUser } from "#/types/git";
+
+/**
+ * User Service API - Handles all user-related API endpoints
+ */
+class UserService {
+  /**
+   * Get the current user's Git information
+   * @returns Git user information
+   */
+  static async getUser(): Promise<GitUser> {
+    const response = await openHands.get<GitUser>("/api/user/info");
+
+    const { data } = response;
+
+    const user: GitUser = {
+      id: data.id,
+      login: data.login,
+      avatar_url: data.avatar_url,
+      company: data.company,
+      name: data.name,
+      email: data.email,
+    };
+
+    return user;
+  }
+}
+
+export default UserService;

frontend/src/assets/arrow.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-function ArrowIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-5 h-5"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-      />
-    </svg>
-  );
-}
-
-export default ArrowIcon;

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

@@ -1,35 +0,0 @@
-<svg width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_8467_33285)">
-    <g clip-path="url(#clip1_8467_33285)">
-      <path
-        d="M66.7813 13.7968C64.5776 12.4773 63.1054 14.4995 63.286 17.2452L63.2677 17.2659C63.2738 14.3987 62.8759 11.232 61.5537 8.67021C61.0854 7.7629 60.1366 6.27147 58.2604 6.97419C57.4371 7.28256 56.6903 8.21062 57.0759 10.6064C57.0759 10.6064 57.5044 13.1208 57.4248 16.2815V16.326C56.8892 7.60872 54.8692 4.94905 51.9799 5.12103C51.0555 5.28114 49.7915 5.66956 50.2169 8.34998C50.2169 8.34998 50.6791 11.146 50.8291 13.3728L50.8382 13.4855H50.8291C49.4701 8.6791 47.6398 8.61387 46.3146 8.80067C45.1117 8.96968 43.7987 10.1854 44.4628 12.5811C46.5472 20.0976 46.1401 29.1499 45.984 30.4456C45.5586 29.5591 45.427 28.8564 44.8362 27.8838C42.4612 23.9788 41.3318 23.6912 39.9453 23.6319C38.568 23.5726 37.0805 24.3999 37.1784 25.9743C37.2794 27.5488 38.1027 27.8097 39.2719 30.0038C40.184 31.7117 40.4442 33.9503 42.2806 38.0184C43.8017 41.3867 47.7776 45.0812 55.0191 44.6424C60.8865 44.4526 69.6492 42.4541 68.125 29.3308C67.7454 27.0506 68.0301 25.1411 68.229 23.1842C68.5382 20.148 68.9911 15.1163 66.7844 13.7938L66.7813 13.7968Z"
-        fill="#FFE165" />
-      <path
-        d="M30.1451 23.724C28.7586 23.81 27.6384 24.1154 25.3368 28.0619C24.7644 29.0433 24.6481 29.749 24.238 30.6415C24.0574 29.3487 23.479 20.3053 25.4194 12.7533C26.0377 10.3486 24.7032 9.15665 23.4973 9.0084C22.169 8.84532 20.3356 8.94317 19.0685 13.797H19.0532L19.0716 13.6576C19.1787 11.4279 19.5888 8.62591 19.5888 8.62591C19.9592 5.93659 18.6921 5.57189 17.7647 5.4266C14.8815 5.308 12.9165 7.97952 12.537 16.6197H12.5309C12.3993 13.4916 12.7758 11.0009 12.7758 11.0009C13.1155 8.59626 12.3503 7.68302 11.5209 7.38948C9.63244 6.71937 8.71117 8.22859 8.26125 9.14479C6.98801 11.7303 6.64827 14.9029 6.70949 17.7702L6.69112 17.7494C6.81661 15.0008 5.30769 13.0053 3.12849 14.3633C0.949283 15.7243 1.49715 20.7471 1.86443 23.7774C2.10316 25.7314 2.42147 27.6349 2.0848 29.921C0.811553 43.0681 9.61101 44.9094 15.4814 44.9954C22.7291 45.3067 26.6345 41.5381 28.0914 38.1431C29.8482 34.0454 30.0686 31.8008 30.947 30.0781C32.0734 27.8632 32.8936 27.5875 32.964 26.013C33.0344 24.4386 31.5316 23.638 30.1543 23.721L30.1451 23.724Z"
-        fill="#FFE165" />
-      <path
-        d="M33.0474 23.7441C32.3129 23.0473 31.208 22.6766 30.0847 22.7419C28.285 22.8516 27.0087 23.4891 25.0468 26.6024C24.9948 23.0413 25.1998 17.6953 26.4057 12.9927C26.8587 11.2256 26.4027 10.0722 25.9375 9.41688C25.3957 8.6519 24.554 8.14783 23.6236 8.03516C22.7758 7.93139 21.6678 7.92545 20.5874 8.78532C20.5874 8.77346 20.5905 8.75864 20.5905 8.75864C20.9394 6.2324 20.0395 4.78545 17.9185 4.4593L17.8022 4.44743C16.4953 4.3911 15.3751 4.80621 14.4722 5.67794C13.9886 6.14345 13.5692 6.74536 13.205 7.48959C12.798 6.9114 12.2746 6.61786 11.8614 6.46961C9.33633 5.57119 7.94066 7.49552 7.33464 8.72306C6.63068 10.1522 6.19301 11.7534 5.94815 13.3871C5.89612 13.3545 5.84715 13.3219 5.79512 13.2922C5.23807 12.9809 4.07808 12.6014 2.57222 13.5413C0.0196132 15.1365 0.344046 19.7205 0.852119 23.8953C0.879665 24.1177 0.907211 24.3371 0.934757 24.5595C1.15207 26.2703 1.35713 27.8863 1.07555 29.7869L1.06943 29.8343C0.558293 35.1092 1.58362 39.1683 4.11787 41.9051C6.55417 44.5381 10.3708 45.9079 15.4301 45.9821C15.8005 45.9969 16.1616 46.0028 16.5136 45.9998C25.157 45.9227 28.2575 40.3039 29.0196 38.5249C30.0051 36.224 30.5162 34.5073 30.9233 33.1255C31.2386 32.0581 31.4895 31.216 31.8446 30.5163C32.2486 29.7216 32.6036 29.2057 32.9158 28.7491C33.4484 27.9722 33.9075 27.3021 33.9626 26.0568C34.0024 25.1554 33.684 24.3549 33.0382 23.7441H33.0474ZM15.9076 7.07152C16.3943 6.60304 16.9544 6.39548 17.6644 6.41031C18.2796 6.50815 18.8367 6.65344 18.5826 8.49178C18.5643 8.60742 18.1664 11.3679 18.0593 13.6154C18.0593 13.6302 18.0593 13.6451 18.0593 13.6599C17.4992 15.854 17.0309 19.0148 16.7799 23.6344C15.6934 23.6996 14.6099 23.8123 13.557 23.9605C13.2173 14.588 14.0039 8.90393 15.9045 7.07152H15.9076ZM9.17105 9.57106C9.93316 8.02923 10.5728 8.10632 11.1666 8.31684C11.9899 8.61038 11.8614 10.2026 11.7665 10.8638C11.7512 10.9706 11.3839 13.4523 11.5125 16.6101C11.4176 18.825 11.4298 21.3779 11.5431 24.2985C10.5361 24.4913 9.58118 24.7136 8.70889 24.9538C8.2957 23.6077 6.46847 15.0564 9.17105 9.57403V9.57106ZM31.2324 27.6609C30.9019 28.1413 30.4918 28.7402 30.0296 29.6475C29.5919 30.5044 29.3226 31.4236 28.9767 32.5829C28.5819 33.9142 28.0891 35.5717 27.1495 37.7688C26.4823 39.3225 23.6787 44.3691 15.4914 44.0132C10.9279 43.948 7.70192 42.8272 5.62984 40.5886C3.49349 38.2818 2.63956 34.7296 3.08948 30.0359C3.40167 27.8892 3.17212 26.0716 2.94869 24.3163C2.92114 24.0969 2.89359 23.8805 2.86605 23.661C2.62119 21.6359 1.96621 16.2543 3.67101 15.1899C4.13011 14.9022 4.50657 14.837 4.78509 14.9912C5.2595 15.2551 5.73697 16.2158 5.66963 17.7042C5.66657 17.7843 5.67575 17.8614 5.69106 17.9385C5.77675 21.4076 6.41644 24.426 6.78066 25.5587C6.18383 25.7751 5.65739 26.0005 5.21665 26.2258C4.72082 26.4808 4.53412 27.0738 4.79734 27.5542C4.98098 27.8892 5.33602 28.079 5.7033 28.076C5.85939 28.076 6.01855 28.0375 6.16852 27.9604C8.64461 26.6884 14.5181 25.3956 19.6937 25.535C20.2568 25.5439 20.719 25.1228 20.7343 24.5802C20.7496 24.0376 20.3089 23.5869 19.7488 23.5721C19.4396 23.5632 19.1274 23.5632 18.8153 23.5632C19.3325 14.247 20.7557 11.2078 21.8637 10.3094C22.3228 9.93873 22.7605 9.90908 23.3665 9.98321C23.5348 10.004 23.9572 10.0988 24.2602 10.5258C24.5877 10.9913 24.6489 11.6792 24.4347 12.5154C22.5615 19.8124 22.9839 28.3933 23.1982 30.4748C23.1614 30.5459 23.1278 30.6171 23.088 30.6912C22.6503 31.4888 21.8361 32.319 20.8659 32.2627C20.3119 32.236 19.8253 32.6452 19.7916 33.1848C19.7579 33.7274 20.1834 34.193 20.7435 34.2256C22.384 34.3205 23.9297 33.3449 24.8785 31.6163C24.9795 31.4325 25.0652 31.2575 25.1417 31.0885C25.1478 31.0767 25.1539 31.0618 25.16 31.05C25.3376 30.6645 25.4661 30.3117 25.5794 29.9944C25.7569 29.5022 25.9099 29.0753 26.216 28.5475C28.3891 24.8174 29.2705 24.7641 30.2041 24.7077C30.7519 24.6751 31.2967 24.8441 31.6181 25.1525C31.8476 25.3689 31.9486 25.6387 31.9333 25.9768C31.9027 26.6736 31.7038 26.9641 31.2233 27.6639L31.2324 27.6609Z"
-        fill="black" />
-      <path
-        d="M69.1207 29.176C68.8055 27.2813 68.9799 25.6624 69.1636 23.9485C69.188 23.7262 69.2125 23.5068 69.234 23.2844C69.6625 19.1036 69.9012 14.5107 67.3149 12.963C65.7907 12.0497 64.6368 12.45 64.0859 12.7703C64.0339 12.7999 63.9849 12.8355 63.9329 12.8681C63.6543 11.2403 63.1891 9.64804 62.4576 8.23074C61.8302 7.01506 60.4008 5.11446 57.8911 6.05735C57.4809 6.21153 56.9667 6.51397 56.5689 7.10105C56.1893 6.36275 55.7578 5.76974 55.265 5.31312C54.3468 4.45918 53.2174 4.06186 51.9136 4.14192L51.7973 4.15378C49.6823 4.51848 48.81 5.98026 49.2079 8.50649C49.2079 8.50649 49.2079 8.51835 49.211 8.52725C48.1152 7.68517 47.0073 7.71185 46.1625 7.83046C45.2352 7.96092 44.4026 8.47981 43.8762 9.25369C43.4263 9.91786 42.9886 11.0772 43.4753 12.8355C44.773 17.5173 45.0791 22.8604 45.0944 26.4214C43.0743 23.3437 41.7858 22.7299 39.9861 22.6528C38.8659 22.6054 37.761 22.9997 37.0417 23.7084C36.4081 24.331 36.1051 25.1375 36.1633 26.036C36.2429 27.2783 36.7142 27.9425 37.2621 28.7075C37.5834 29.1582 37.9477 29.6682 38.367 30.4539C38.7373 31.1477 39.0036 31.9839 39.3403 33.0454C39.7749 34.4182 40.3166 36.1261 41.3481 38.4092C42.1439 40.1734 45.3515 45.7388 53.9703 45.6587C54.3193 45.6558 54.6804 45.6439 55.0477 45.6202C60.1345 45.4571 63.9237 44.0161 66.311 41.3416C68.7902 38.5604 69.739 34.4834 69.1299 29.2175L69.1238 29.17L69.1207 29.176ZM58.0747 10.4575C57.9676 9.7874 57.8054 8.19813 58.6256 7.89272C59.2133 7.67034 59.856 7.58436 60.6457 9.11136C63.4523 14.5463 61.7904 23.1302 61.4017 24.4823C60.5233 24.2569 59.5653 24.0523 58.5552 23.8774C58.6103 20.9568 58.5736 18.4009 58.4389 16.189C58.5063 13.0312 58.0931 10.5554 58.0747 10.4575ZM52.0911 6.10182C52.8042 6.07217 53.3674 6.27083 53.8601 6.73338C55.7945 8.53318 56.6913 14.1994 56.5291 23.5779C55.4731 23.4474 54.3896 23.3555 53.3 23.3081C52.9634 18.6915 52.4339 15.5426 51.8309 13.3573C51.8309 13.3425 51.8309 13.3277 51.8309 13.3129C51.6809 11.0653 51.228 8.31376 51.2096 8.20702C50.9188 6.36572 51.4728 6.21153 52.088 6.10182H52.0911ZM67.116 29.4665C67.6546 34.1513 66.868 37.7183 64.7776 40.0637C62.7484 42.3379 59.5438 43.518 54.9528 43.6662C46.8114 44.1644 43.9038 39.1712 43.209 37.6294C42.2234 35.4471 41.7001 33.8015 41.2808 32.4761C40.9135 31.3197 40.6258 30.4094 40.1728 29.5584C39.6953 28.66 39.2729 28.07 38.9332 27.5956C38.4404 26.9047 38.2354 26.6171 38.1895 25.9203C38.168 25.5823 38.266 25.3095 38.4894 25.0901C38.8077 24.7758 39.3464 24.5949 39.8973 24.6216C40.8308 24.6631 41.7123 24.6987 43.9588 28.3902C44.2772 28.9121 44.4363 29.3361 44.623 29.8253C44.7454 30.1426 44.8801 30.4954 45.0668 30.8779C45.0729 30.8898 45.076 30.9016 45.0821 30.9105C45.1648 31.0795 45.2535 31.2515 45.3576 31.4353C46.3401 33.1462 47.9041 34.095 49.5415 33.9705C50.0986 33.929 50.5179 33.4545 50.475 32.9149C50.4322 32.3753 49.9455 31.975 49.3854 32.0106C48.4152 32.0817 47.5858 31.2663 47.1328 30.4776C47.0899 30.4035 47.0563 30.3353 47.0195 30.2641C47.194 28.1827 47.4541 19.5929 45.4402 12.3314C45.2076 11.4982 45.2566 10.8103 45.5749 10.3389C45.8718 9.906 46.2911 9.80222 46.4594 9.7785C47.0624 9.69252 47.5031 9.71624 47.9683 10.078C49.0947 10.9586 50.576 13.9711 51.2678 23.2755C50.9556 23.2784 50.6434 23.2873 50.3373 23.3022C49.7772 23.3259 49.3456 23.7855 49.3701 24.3281C49.3946 24.8707 49.8598 25.2799 50.4291 25.265C55.5986 25.0338 61.4996 26.2198 63.9971 27.4503C64.1471 27.5244 64.3063 27.557 64.4654 27.557C64.8327 27.5541 65.1847 27.3584 65.3622 27.0174C65.6162 26.5341 65.4173 25.9411 64.9153 25.695C64.4715 25.4756 63.939 25.2621 63.3391 25.0545C63.6819 23.9159 64.2665 20.8856 64.2848 17.4165C64.3001 17.3394 64.3063 17.2623 64.3001 17.1823C64.2022 15.6968 64.6644 14.7272 65.1326 14.4544C65.4081 14.2943 65.7846 14.3536 66.2498 14.6323C67.976 15.6671 67.4251 21.0576 67.217 23.0887C67.1955 23.3081 67.1711 23.5245 67.1466 23.744C66.9568 25.5052 66.7609 27.3228 67.116 29.4665Z"
-        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="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="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="black" />
-    </g>
-  </g>
-  <defs>
-    <clipPath id="clip0_8467_33285">
-      <rect width="69" height="46" fill="white" transform="translate(0.5)" />
-    </clipPath>
-    <clipPath id="clip1_8467_33285">
-      <rect width="69" height="46" fill="white" transform="translate(0.5)" />
-    </clipPath>
-  </defs>
-</svg>

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

@@ -1,35 +1,16 @@
-<svg width="39" height="26" viewBox="0 0 39 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_12391_446)">
-    <g clip-path="url(#clip1_12391_446)">
-      <path
-        d="M37.4642 7.79821C36.2186 7.05244 35.3865 8.1954 35.4886 9.74729L35.4782 9.75902C35.4816 8.13842 35.2567 6.34856 34.5094 4.90057C34.2447 4.38775 33.7084 3.54477 32.648 3.94196C32.1826 4.11625 31.7605 4.64081 31.9785 5.99494C31.9785 5.99494 32.2207 7.41611 32.1757 9.20262V9.22776C31.873 4.3006 30.7312 2.79731 29.0981 2.89451C28.5757 2.98501 27.8612 3.20456 28.1017 4.71958C28.1017 4.71958 28.3629 6.29995 28.4477 7.55856L28.4529 7.62224H28.4477C27.6796 4.9056 26.6451 4.86873 25.896 4.97431C25.2161 5.06984 24.474 5.75696 24.8494 7.11109C26.0275 11.3595 25.7974 16.4761 25.7092 17.2084C25.4687 16.7073 25.3943 16.3101 25.0604 15.7604C23.718 13.5533 23.0796 13.3907 22.296 13.3572C21.5175 13.3237 20.6767 13.7913 20.7321 14.6812C20.7892 15.5711 21.2545 15.7185 21.9154 16.9587C22.4309 17.924 22.5779 19.1893 23.6159 21.4887C24.4757 23.3925 26.7229 25.4807 30.816 25.2327C34.1323 25.1254 39.0851 23.9958 38.2236 16.5783C38.0091 15.2895 38.17 14.2102 38.2824 13.1041C38.4572 11.388 38.7132 8.54399 37.4659 7.79654L37.4642 7.79821Z"
-        fill="#FFE165" />
-      <path
-        d="M16.7567 13.4091C15.973 13.4577 15.3399 13.6303 14.039 15.8609C13.7155 16.4157 13.6497 16.8145 13.4179 17.319C13.3158 16.5883 12.9889 11.4768 14.0857 7.20822C14.4351 5.84906 13.6809 5.17535 12.9993 5.09156C12.2485 4.99938 11.2122 5.05469 10.496 7.79814H10.4874L10.4977 7.71938C10.5583 6.4591 10.7901 4.87536 10.7901 4.87536C10.9994 3.35532 10.2832 3.14918 9.75905 3.06706C8.12944 3.00003 7.01881 4.51002 6.8043 9.3936H6.80084C6.72645 7.62552 6.93923 6.21776 6.93923 6.21776C7.13126 4.8586 6.69877 4.34243 6.22995 4.17651C5.16258 3.79776 4.64186 4.65079 4.38756 5.16865C3.6679 6.63004 3.47587 8.42326 3.51047 10.0439L3.50009 10.0321C3.57102 8.47856 2.71816 7.35068 1.48643 8.11824C0.254707 8.88748 0.564368 11.7265 0.771962 13.4392C0.906898 14.5437 1.08681 15.6196 0.896519 16.9117C0.176859 24.3427 5.15047 25.3834 8.46851 25.432C12.565 25.608 14.7725 23.4779 15.5959 21.559C16.5889 19.2429 16.7135 17.9742 17.2099 17.0005C17.8466 15.7486 18.3102 15.5928 18.35 14.7029C18.3898 13.813 17.5404 13.3605 16.7619 13.4074L16.7567 13.4091Z"
-        fill="#FFE165" />
-      <path
-        d="M18.3964 13.4209C17.9812 13.027 17.3567 12.8176 16.7218 12.8544C15.7046 12.9164 14.9832 13.2768 13.8743 15.0365C13.8449 13.0237 13.9608 10.002 14.6424 7.34405C14.8984 6.34521 14.6406 5.69328 14.3777 5.3229C14.0715 4.89052 13.5958 4.60562 13.0699 4.54193C12.5907 4.48328 11.9644 4.47992 11.3537 4.96594C11.3537 4.95923 11.3555 4.95085 11.3555 4.95085C11.5527 3.52298 11.0441 2.70514 9.84523 2.52079L9.77949 2.51409C9.0408 2.48224 8.40764 2.71687 7.8973 3.20959C7.62397 3.4727 7.38697 3.81291 7.1811 4.23357C6.95102 3.90676 6.6552 3.74085 6.42165 3.65705C4.99445 3.14925 4.20559 4.23692 3.86306 4.93074C3.46517 5.73853 3.21779 6.64352 3.07939 7.56694C3.04998 7.54851 3.0223 7.53007 2.99289 7.51331C2.67804 7.33734 2.02239 7.12283 1.17126 7.65409C-0.271523 8.55573 -0.0881482 11.1467 0.199024 13.5064C0.214593 13.632 0.230163 13.7561 0.245732 13.8818C0.368559 14.8488 0.484465 15.7621 0.32531 16.8364L0.32185 16.8632C0.0329484 19.8446 0.612482 22.1389 2.04488 23.6858C3.42192 25.174 5.57917 25.9483 8.43878 25.9902C8.6481 25.9986 8.85223 26.0019 9.05118 26.0002C13.9366 25.9567 15.689 22.7808 16.1198 21.7753C16.6768 20.4748 16.9657 19.5044 17.1958 18.7234C17.374 18.1201 17.5158 17.6442 17.7165 17.2486C17.9449 16.7995 18.1455 16.5079 18.322 16.2498C18.623 15.8107 18.8825 15.432 18.9136 14.7281C18.9361 14.2186 18.7562 13.7661 18.3912 13.4209H18.3964ZM8.70865 3.99726C8.98371 3.73247 9.30029 3.61516 9.70164 3.62354C10.0494 3.67884 10.3642 3.76096 10.2206 4.80002C10.2102 4.86538 9.98535 6.42565 9.9248 7.69599C9.9248 7.70437 9.9248 7.71275 9.9248 7.72113C9.60822 8.9613 9.34354 10.7478 9.20168 13.3589C8.58755 13.3957 7.97515 13.4594 7.38005 13.5432C7.18802 8.24568 7.63262 5.03297 8.70692 3.99726H8.70865ZM4.90103 5.41005C5.33179 4.53858 5.69335 4.58215 6.02896 4.70114C6.49431 4.86706 6.42166 5.76702 6.36803 6.14075C6.35938 6.20108 6.15178 7.60381 6.22444 9.38865C6.17081 10.6406 6.17773 12.0835 6.24174 13.7343C5.67259 13.8432 5.13284 13.9689 4.63981 14.1047C4.40626 13.3438 3.37348 8.51048 4.90103 5.41173V5.41005ZM17.3705 15.6348C17.1837 15.9062 16.9519 16.2448 16.6906 16.7576C16.4433 17.2419 16.291 17.7615 16.0955 18.4168C15.8724 19.1692 15.5939 20.1061 15.0628 21.3479C14.6856 22.2261 13.101 25.0785 8.47338 24.8774C5.89402 24.8405 4.07065 24.207 2.89948 22.9417C1.69197 21.6378 1.20931 19.6301 1.46362 16.9772C1.64007 15.7638 1.51033 14.7365 1.38404 13.7443C1.36847 13.6203 1.3529 13.498 1.33733 13.374C1.19893 12.2293 0.828725 9.18754 1.79231 8.58589C2.0518 8.42333 2.26458 8.38646 2.42201 8.47361C2.69015 8.62276 2.96002 9.16576 2.92197 10.0071C2.92024 10.0523 2.92543 10.0959 2.93407 10.1395C2.98251 12.1003 3.34407 13.8063 3.54994 14.4465C3.2126 14.5689 2.91505 14.6962 2.66593 14.8236C2.38568 14.9677 2.28015 15.3029 2.42893 15.5744C2.53273 15.7638 2.7334 15.8711 2.94099 15.8694C3.02922 15.8694 3.11918 15.8476 3.20395 15.804C4.60348 15.0851 7.92325 14.3544 10.8486 14.4331C11.1669 14.4382 11.4281 14.2002 11.4368 13.8935C11.4454 13.5868 11.1963 13.3321 10.8797 13.3237C10.705 13.3187 10.5286 13.3187 10.3521 13.3187C10.6445 8.05295 11.4489 6.33515 12.0751 5.82735C12.3346 5.61786 12.582 5.6011 12.9245 5.643C13.0197 5.65473 13.2584 5.70836 13.4297 5.94969C13.6148 6.21281 13.6494 6.60162 13.5283 7.07423C12.4696 11.1986 12.7083 16.0487 12.8294 17.2252C12.8086 17.2654 12.7896 17.3056 12.7671 17.3475C12.5197 17.7983 12.0596 18.2676 11.5112 18.2358C11.198 18.2207 10.923 18.4519 10.904 18.757C10.8849 19.0637 11.1254 19.3268 11.442 19.3452C12.3692 19.3988 13.2428 18.8475 13.7791 17.8704C13.8362 17.7665 13.8847 17.6676 13.9279 17.5721C13.9314 17.5654 13.9348 17.557 13.9383 17.5503C14.0386 17.3324 14.1113 17.133 14.1753 16.9537C14.2756 16.6755 14.3621 16.4342 14.5351 16.1358C15.7634 14.0276 16.2616 13.9974 16.7892 13.9655C17.0989 13.9471 17.4068 14.0426 17.5885 14.2169C17.7182 14.3393 17.7753 14.4918 17.7667 14.6828C17.7494 15.0767 17.6369 15.2409 17.3653 15.6364L17.3705 15.6348Z"
-        fill="black" />
-      <path
-        d="M38.7854 16.4908C38.6072 15.4199 38.7058 14.5049 38.8096 13.5362C38.8235 13.4105 38.8373 13.2865 38.8494 13.1608C39.0916 10.7978 39.2265 8.20179 37.7647 7.32697C36.9032 6.81079 36.251 7.03704 35.9396 7.21803C35.9102 7.23479 35.8825 7.2549 35.8531 7.27334C35.6957 6.35327 35.4328 5.4533 35.0193 4.65222C34.6647 3.9651 33.8568 2.89084 32.4382 3.42378C32.2064 3.51093 31.9158 3.68187 31.6909 4.0137C31.4764 3.5964 31.2324 3.26122 30.9539 3.00313C30.4349 2.52047 29.7966 2.2959 29.0596 2.34115L28.9939 2.34785C27.7985 2.55399 27.3055 3.38021 27.5303 4.80808C27.5303 4.80808 27.5303 4.81478 27.5321 4.81981C26.9128 4.34385 26.2865 4.35894 25.809 4.42597C25.2849 4.49971 24.8143 4.793 24.5168 5.23041C24.2625 5.60581 24.0151 6.26109 24.2902 7.2549C25.0236 9.90116 25.1966 12.9211 25.2053 14.9339C24.0635 13.1943 23.3352 12.8474 22.318 12.8038C21.6848 12.777 21.0603 12.9999 20.6538 13.4004C20.2957 13.7524 20.1244 14.2082 20.1573 14.716C20.2023 15.4182 20.4687 15.7936 20.7784 16.226C20.96 16.4808 21.1659 16.769 21.4029 17.2131C21.6122 17.6053 21.7627 18.0779 21.953 18.6779C22.1986 19.4538 22.5048 20.4191 23.0878 21.7096C23.5376 22.7068 25.3506 25.8524 30.2221 25.8072C30.4194 25.8055 30.6235 25.7988 30.8311 25.7854C33.7063 25.6932 35.8479 24.8787 37.1973 23.3671C38.5986 21.7951 39.1349 19.4907 38.7906 16.5143L38.7871 16.4875L38.7854 16.4908ZM32.542 5.91083C32.4815 5.53207 32.3898 4.63379 32.8534 4.46117C33.1856 4.33548 33.5488 4.28687 33.9952 5.14997C35.5815 8.2219 34.6422 13.0736 34.4225 13.8379C33.926 13.7105 33.3845 13.5949 32.8136 13.496C32.8448 11.8452 32.824 10.4006 32.7479 9.15035C32.7859 7.36551 32.5524 5.96613 32.542 5.91083ZM29.16 3.44892C29.563 3.43216 29.8813 3.54445 30.1599 3.80589C31.2532 4.82316 31.7601 8.02582 31.6684 13.3267C31.0716 13.253 30.4592 13.201 29.8433 13.1742C29.653 10.5648 29.3537 8.78501 29.0129 7.54986C29.0129 7.54148 29.0129 7.5331 29.0129 7.52472C28.9281 6.25439 28.6721 4.69915 28.6617 4.63881C28.4974 3.59808 28.8105 3.51093 29.1582 3.44892H29.16ZM37.6523 16.6551C37.9568 19.303 37.5122 21.3191 36.3306 22.6447C35.1836 23.9302 33.3724 24.5972 30.7775 24.681C26.1758 24.9625 24.5323 22.1403 24.1396 21.2688C23.5826 20.0354 23.2868 19.1052 23.0498 18.3561C22.8422 17.7025 22.6796 17.188 22.4235 16.707C22.1537 16.1992 21.9149 15.8657 21.7229 15.5976C21.4444 15.2071 21.3285 15.0445 21.3025 14.6507C21.2904 14.4596 21.3458 14.3054 21.4721 14.1814C21.652 14.0038 21.9564 13.9015 22.2678 13.9166C22.7955 13.9401 23.2937 13.9602 24.5635 16.0467C24.7434 16.3417 24.8334 16.5813 24.9389 16.8578C25.0081 17.0372 25.0842 17.2366 25.1897 17.4528C25.1932 17.4595 25.1949 17.4662 25.1984 17.4712C25.2451 17.5668 25.2953 17.664 25.3541 17.7679C25.9094 18.7349 26.7934 19.2711 27.7189 19.2008C28.0338 19.1773 28.2708 18.9092 28.2465 18.6041C28.2223 18.2991 27.9473 18.0729 27.6307 18.093C27.0823 18.1332 26.6135 17.6723 26.3574 17.2265C26.3332 17.1846 26.3142 17.1461 26.2934 17.1059C26.392 15.9294 26.5391 11.0743 25.4008 6.97C25.2693 6.49907 25.297 6.11026 25.4769 5.84379C25.6447 5.59911 25.8817 5.54045 25.9769 5.52704C26.3177 5.47844 26.5668 5.49185 26.8297 5.69631C27.4663 6.19406 28.3036 7.89678 28.6946 13.1558C28.5181 13.1574 28.3417 13.1625 28.1687 13.1708C27.8521 13.1843 27.6082 13.444 27.622 13.7507C27.6359 14.0574 27.8988 14.2887 28.2206 14.2803C31.1425 14.1496 34.4778 14.8199 35.8895 15.5154C35.9742 15.5573 36.0642 15.5758 36.1541 15.5758C36.3617 15.5741 36.5607 15.4635 36.661 15.2708C36.8046 14.9976 36.6922 14.6624 36.4085 14.5233C36.1576 14.3993 35.8566 14.2786 35.5175 14.1613C35.7113 13.5178 36.0417 11.805 36.0521 9.84418C36.0607 9.8006 36.0642 9.75703 36.0607 9.71178C36.0054 8.87215 36.2666 8.32413 36.5313 8.16995C36.687 8.07945 36.8998 8.11297 37.1627 8.2705C38.1384 8.85539 37.827 11.9022 37.7094 13.0502C37.6973 13.1742 37.6834 13.2965 37.6696 13.4206C37.5623 14.416 37.4516 15.4434 37.6523 16.6551Z"
-        fill="black" />
-      <path
-        d="M21.6129 5.93941C21.5212 5.93941 21.4278 5.92265 21.3395 5.88242C21.016 5.7383 20.8742 5.36792 21.023 5.05453C21.5039 4.03725 22.208 3.09875 23.0574 2.34124C23.3186 2.10829 23.7269 2.12337 23.9673 2.37811C24.2078 2.63117 24.1922 3.02668 23.9293 3.25963C23.2044 3.90653 22.6041 4.70762 22.1924 5.57573C22.0851 5.80198 21.8551 5.93773 21.6129 5.93941Z"
-        fill="black" />
-      <path
-        d="M19.4429 5.57912C19.109 5.58247 18.8236 5.33443 18.7959 5.00596C18.6731 3.53619 18.6679 2.04631 18.7838 0.576537C18.8115 0.232976 19.1211 -0.0234375 19.474 0.0017011C19.8287 0.0285156 20.0934 0.326827 20.0674 0.670387C19.9567 2.0748 19.9619 3.49932 20.0795 4.90373C20.1089 5.24729 19.8442 5.54895 19.4896 5.57576C19.474 5.57576 19.4585 5.57744 19.4429 5.57744V5.57912Z"
-        fill="black" />
-      <path
-        d="M17.2247 5.96646C16.9358 5.96981 16.6694 5.78044 16.595 5.49721C16.3217 4.45815 15.8044 3.47104 15.1003 2.64482C14.8737 2.37835 14.9135 1.98618 15.1868 1.76664C15.4619 1.5471 15.8667 1.58564 16.0933 1.85044C16.9168 2.81911 17.5223 3.97381 17.8406 5.18884C17.9288 5.52235 17.7195 5.86255 17.3752 5.94803C17.3233 5.96143 17.2732 5.96646 17.2213 5.96814L17.2247 5.96646Z"
-        fill="black" />
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="47" height="30" viewBox="0 0 47 30" fill="none">
+  <g clip-path="url(#clip0_10905_18559)">
+    <path d="M44.731 8.9991C43.271 8.13859 42.2956 9.4574 42.4152 11.248L42.4031 11.2616C42.4071 9.39165 42.1435 7.32642 41.2675 5.65567C40.9573 5.06395 40.3287 4.09128 39.0856 4.54957C38.5402 4.75068 38.0454 5.35594 38.3009 6.9184C38.3009 6.9184 38.5848 8.55821 38.532 10.6196V10.6486C38.1772 4.96339 36.8388 3.22883 34.9246 3.34099C34.3122 3.44541 33.4748 3.69873 33.7566 5.44683C33.7566 5.44683 34.0628 7.27034 34.1622 8.72258L34.1683 8.79606H34.1622C33.2618 5.66147 32.0492 5.61893 31.1712 5.74076C30.3743 5.85098 29.5044 6.64381 29.9444 8.20627C31.3253 13.1083 31.0556 19.012 30.9522 19.857C30.6703 19.2789 30.5831 18.8206 30.1918 18.1863C28.6182 15.6396 27.87 15.452 26.9514 15.4133C26.0389 15.3746 25.0534 15.9141 25.1183 16.941C25.1852 17.9678 25.7307 18.1379 26.5053 19.5689C27.1096 20.6827 27.2819 22.1427 28.4986 24.7958C29.5064 26.9925 32.1405 29.402 36.9382 29.1158C40.8255 28.992 46.631 27.6887 45.6212 19.13C45.3697 17.6429 45.5583 16.3976 45.6901 15.1213C45.8949 13.1412 46.195 9.85962 44.733 8.99717L44.731 8.9991Z" fill="#FFE165"/>
+    <path d="M20.458 15.4707C19.5395 15.5268 18.7973 15.7259 17.2724 18.2998C16.8932 18.9398 16.8161 19.4 16.5444 19.9821C16.4248 19.139 16.0415 13.2411 17.3272 8.31587C17.7368 6.74761 16.8526 5.97024 16.0537 5.87356C15.1736 5.7672 13.959 5.83101 13.1195 8.99654H13.1094L13.1215 8.90566C13.1925 7.45149 13.4642 5.62411 13.4642 5.62411C13.7096 3.87021 12.8701 3.63236 12.2557 3.5376C10.3455 3.46025 9.04367 5.20255 8.79222 10.8375H8.78817C8.70097 8.79737 8.95039 7.17303 8.95039 7.17303C9.17547 5.60477 8.66853 5.00918 8.119 4.81774C6.86786 4.38071 6.25749 5.36498 5.95941 5.96251C5.11585 7.64873 4.89077 9.71783 4.93133 11.5878L4.91916 11.5742C5.0023 9.78164 4.0026 8.48023 2.55882 9.36589C1.11504 10.2535 1.47802 13.5292 1.72135 15.5055C1.87952 16.7798 2.09041 18.0213 1.86735 19.5122C1.02379 28.0864 6.85366 29.2872 10.7429 29.3433C15.5447 29.5464 18.1322 27.0886 19.0974 24.8745C20.2613 22.202 20.4074 20.7382 20.9893 19.6147C21.7355 18.1702 22.279 17.9904 22.3256 16.9635C22.3723 15.9367 21.3766 15.4146 20.4641 15.4688L20.458 15.4707Z" fill="#FFE165"/>
+    <path d="M22.3819 15.4845C21.8952 15.0301 21.1632 14.7884 20.419 14.8309C19.2266 14.9025 18.3811 15.3182 17.0813 17.3487C17.0468 15.0262 17.1826 11.5397 17.9816 8.47281C18.2817 7.3203 17.9796 6.56808 17.6713 6.14072C17.3124 5.64182 16.7548 5.31308 16.1383 5.2396C15.5766 5.17192 14.8426 5.16805 14.1268 5.72884C14.1268 5.7211 14.1288 5.71143 14.1288 5.71143C14.36 4.06389 13.7638 3.12023 12.3586 2.90751L12.2815 2.89978C11.4156 2.86304 10.6735 3.13376 10.0753 3.70228C9.75488 4.00588 9.47707 4.39843 9.23577 4.88379C8.96607 4.50672 8.61932 4.31527 8.34557 4.21859C6.67265 3.63267 5.74799 4.88766 5.34649 5.68823C4.8801 6.62029 4.59012 7.66451 4.4279 8.73C4.39343 8.70873 4.36098 8.68746 4.32651 8.66812C3.95746 8.46508 3.18893 8.21756 2.19126 8.83055C0.500091 9.8709 0.715036 12.8605 1.05165 15.5832C1.0699 15.7282 1.08815 15.8713 1.1064 16.0163C1.25037 17.1321 1.38623 18.186 1.19968 19.4255L1.19562 19.4564C0.85698 22.8966 1.53629 25.5438 3.21529 27.3287C4.8294 29.0458 7.35804 29.9392 10.71 29.9876C10.9553 29.9972 11.1946 30.0011 11.4278 29.9992C17.1543 29.9489 19.2084 26.2845 19.7133 25.1242C20.3663 23.6236 20.7049 22.504 20.9746 21.6029C21.1835 20.9067 21.3497 20.3576 21.585 19.9012C21.8526 19.383 22.0878 19.0465 22.2947 18.7487C22.6475 18.2421 22.9517 17.805 22.9882 16.9929C23.0145 16.405 22.8036 15.8829 22.3758 15.4845H22.3819ZM11.0263 4.61114C11.3487 4.30561 11.7198 4.17024 12.1902 4.17991C12.5978 4.24373 12.9669 4.33848 12.7986 5.5374C12.7864 5.61281 12.5228 7.41312 12.4518 8.87889C12.4518 8.88856 12.4518 8.89823 12.4518 8.9079C12.0807 10.3389 11.7705 12.4002 11.6042 15.413C10.8844 15.4555 10.1665 15.529 9.46896 15.6257C9.24388 9.51316 9.76502 5.80619 11.0243 4.61114H11.0263ZM6.56315 6.24128C7.06807 5.23573 7.49188 5.28601 7.88527 5.42331C8.43074 5.61475 8.34557 6.65316 8.28271 7.08439C8.27257 7.154 8.02924 8.77254 8.11441 10.832C8.05155 12.2765 8.05966 13.9414 8.13468 15.8462C7.46754 15.9718 6.83488 16.1169 6.25696 16.2735C5.98321 15.3956 4.77262 9.81869 6.56315 6.24321V6.24128ZM21.1794 18.039C20.9604 18.3523 20.6887 18.7429 20.3825 19.3346C20.0925 19.8935 19.9141 20.4929 19.6849 21.249C19.4233 22.1173 19.0969 23.1982 18.4743 24.6311C18.0323 25.6444 16.1748 28.9356 10.7505 28.7036C7.7271 28.661 5.58982 27.9301 4.21701 26.4701C2.80162 24.9657 2.23587 22.649 2.53395 19.5879C2.74079 18.1879 2.5887 17.0025 2.44068 15.8578C2.42243 15.7147 2.40418 15.5735 2.38593 15.4304C2.2237 14.1097 1.78976 10.5999 2.91923 9.90571C3.2234 9.71814 3.47282 9.6756 3.65735 9.77615C3.97165 9.94825 4.28798 10.5748 4.24337 11.5455C4.24135 11.5977 4.24743 11.648 4.25757 11.6983C4.31435 13.9608 4.73815 15.9293 4.97946 16.668C4.58404 16.8092 4.23526 16.9561 3.94326 17.1031C3.61476 17.2694 3.49107 17.6561 3.66546 17.9694C3.78712 18.1879 4.02235 18.3117 4.26568 18.3097C4.3691 18.3097 4.47454 18.2846 4.5739 18.2343C6.21438 17.4047 10.1057 16.5616 13.5347 16.6525C13.9078 16.6583 14.214 16.3837 14.2241 16.0299C14.2342 15.676 13.9422 15.3821 13.5712 15.3724C13.3664 15.3666 13.1595 15.3666 12.9527 15.3666C13.2954 9.29078 14.2383 7.3087 14.9724 6.72278C15.2765 6.48106 15.5665 6.46172 15.968 6.51007C16.0795 6.5236 16.3594 6.58548 16.5601 6.86394C16.7771 7.16754 16.8176 7.61616 16.6757 8.16148C15.4347 12.9204 15.7145 18.5166 15.8565 19.8741C15.8321 19.9205 15.8098 19.9669 15.7835 20.0153C15.4935 20.5355 14.9541 21.0769 14.3113 21.0402C13.9443 21.0228 13.6219 21.2896 13.5996 21.6416C13.5772 21.9954 13.8591 22.299 14.2302 22.3203C15.3171 22.3822 16.3411 21.746 16.9697 20.6186C17.0366 20.4987 17.0934 20.3846 17.1441 20.2744C17.1482 20.2667 17.1522 20.257 17.1563 20.2493C17.2739 19.9979 17.3591 19.7678 17.4341 19.5609C17.5517 19.2399 17.6531 18.9614 17.8559 18.6172C19.2956 16.1846 19.8796 16.1497 20.4981 16.113C20.861 16.0917 21.222 16.202 21.4349 16.4031C21.587 16.5442 21.6539 16.7202 21.6438 16.9406C21.6235 17.3951 21.4917 17.5846 21.1733 18.0409L21.1794 18.039Z" fill="#0D0F11"/>
+    <path d="M46.2793 19.0284C46.0704 17.7928 46.186 16.7369 46.3077 15.6193C46.3239 15.4742 46.3401 15.3311 46.3543 15.1861C46.6382 12.4595 46.7964 9.46417 45.0829 8.45476C44.073 7.85916 43.3086 8.12022 42.9436 8.32906C42.9091 8.3484 42.8766 8.3716 42.8422 8.39288C42.6576 7.33125 42.3494 6.29284 41.8648 5.36851C41.4491 4.57568 40.5021 3.33615 38.8393 3.95108C38.5676 4.05164 38.2269 4.24888 37.9633 4.63176C37.7119 4.15026 37.426 3.76351 37.0995 3.46571C36.4912 2.9088 35.7429 2.64968 34.8791 2.70189L34.802 2.70962C33.4008 2.94747 32.8229 3.9008 33.0865 5.54835C33.0865 5.54835 33.0865 5.55608 33.0885 5.56188C32.3626 5.0127 31.6285 5.03011 31.0689 5.10746C30.4545 5.19254 29.9029 5.53094 29.5541 6.03565C29.256 6.46881 28.9661 7.2249 29.2885 8.3716C30.1483 11.425 30.351 14.9096 30.3612 17.232C29.0228 15.2248 28.1692 14.8245 26.9768 14.7742C26.2346 14.7433 25.5026 15.0005 25.0261 15.4626C24.6063 15.8687 24.4056 16.3947 24.4441 16.9806C24.4968 17.7908 24.8091 18.224 25.1721 18.7229C25.385 19.0168 25.6263 19.3494 25.9041 19.8619C26.1495 20.3144 26.3259 20.8597 26.549 21.552C26.8369 22.4473 27.1958 23.5611 27.8792 25.0501C28.4064 26.2007 30.5315 29.8303 36.2417 29.7781C36.4729 29.7761 36.7122 29.7684 36.9555 29.7529C40.3257 29.6466 42.8361 28.7068 44.4178 26.9625C46.0603 25.1487 46.6889 22.4898 46.2853 19.0555L46.2813 19.0246L46.2793 19.0284ZM38.961 6.82075C38.89 6.38372 38.7826 5.34724 39.326 5.14806C39.7153 5.00303 40.1412 4.94696 40.6643 5.94283C42.5238 9.48737 41.4227 15.0855 41.1652 15.9673C40.5832 15.8204 39.9485 15.6869 39.2794 15.5728C39.3159 13.6681 39.2915 12.0012 39.2023 10.5587C39.2469 8.49923 38.9732 6.88456 38.961 6.82075ZM34.9967 3.98009C35.4692 3.96075 35.8423 4.09031 36.1687 4.39197C37.4503 5.56575 38.0444 9.26112 37.937 15.3775C37.2374 15.2924 36.5196 15.2325 35.7977 15.2016C35.5746 12.1907 35.2238 10.1371 34.8243 8.71194C34.8243 8.70227 34.8243 8.69261 34.8243 8.68294C34.725 7.21716 34.4249 5.42266 34.4127 5.35304C34.22 4.15219 34.5871 4.05164 34.9947 3.98009H34.9967ZM44.9511 19.2179C45.308 22.2732 44.7868 24.5995 43.4018 26.1291C42.0574 27.6123 39.9343 28.3819 36.8927 28.4786C31.4988 28.8035 29.5724 25.5471 29.1121 24.5415C28.4591 23.1183 28.1124 22.0451 27.8346 21.1807C27.5912 20.4265 27.4006 19.8329 27.1005 19.2779C26.7842 18.692 26.5043 18.3071 26.2793 17.9977C25.9528 17.5472 25.8169 17.3596 25.7865 16.9052C25.7723 16.6847 25.8372 16.5068 25.9852 16.3637C26.1961 16.1588 26.553 16.0408 26.918 16.0582C27.5365 16.0853 28.1205 16.1085 29.6089 18.516C29.8198 18.8563 29.9252 19.1328 30.0489 19.4519C30.13 19.6588 30.2192 19.8889 30.3429 20.1384C30.347 20.1461 30.349 20.1539 30.3531 20.1597C30.4078 20.2699 30.4666 20.382 30.5356 20.5019C31.1865 21.6177 32.2227 22.2365 33.3075 22.1553C33.6766 22.1282 33.9544 21.8188 33.926 21.4669C33.8976 21.1149 33.5752 20.8539 33.2041 20.8771C32.5613 20.9235 32.0118 20.3917 31.7117 19.8773C31.6833 19.829 31.661 19.7845 31.6367 19.7381C31.7522 18.3806 31.9246 12.7786 30.5903 8.04287C30.4362 7.49949 30.4687 7.05086 30.6795 6.7434C30.8762 6.46107 31.154 6.39339 31.2656 6.37792C31.665 6.32184 31.957 6.33731 32.2653 6.57323C33.0115 7.14755 33.9929 9.11223 34.4512 15.1803C34.2444 15.1822 34.0376 15.188 33.8348 15.1977C33.4637 15.2132 33.1778 15.5129 33.194 15.8668C33.2102 16.2206 33.5184 16.4875 33.8956 16.4778C37.3205 16.327 41.2301 17.1005 42.8848 17.903C42.9841 17.9513 43.0896 17.9726 43.195 17.9726C43.4383 17.9707 43.6715 17.843 43.7891 17.6207C43.9575 17.3055 43.8257 16.9187 43.4931 16.7582C43.1991 16.6151 42.8462 16.4759 42.4488 16.3405C42.6759 15.598 43.0632 13.6217 43.0754 11.3592C43.0855 11.309 43.0896 11.2587 43.0855 11.2065C43.0206 10.2377 43.3268 9.60533 43.6371 9.42742C43.8196 9.323 44.069 9.36168 44.3772 9.54345C45.5209 10.2183 45.1559 13.7339 45.018 15.0585C45.0038 15.2016 44.9876 15.3427 44.9713 15.4858C44.8456 16.6345 44.7158 17.8198 44.9511 19.2179Z" fill="#0D0F11"/>
+    <path d="M26.1508 6.85319C26.0434 6.85319 25.9339 6.83386 25.8304 6.78745C25.4512 6.62114 25.285 6.19379 25.4594 5.83218C26.0231 4.6584 26.8484 3.57551 27.844 2.70146C28.1502 2.43267 28.6288 2.45007 28.9106 2.744C29.1925 3.036 29.1742 3.49236 28.866 3.76115C28.0164 4.50757 27.3127 5.4319 26.8301 6.43357C26.7044 6.69463 26.4347 6.85126 26.1508 6.85319Z" fill="#F9F7F2"/>
+    <path d="M23.608 6.43744C23.2166 6.44131 22.8821 6.15511 22.8496 5.7761C22.7056 4.08021 22.6996 2.36112 22.8354 0.665235C22.8679 0.268818 23.2308 -0.0270433 23.6445 0.0019628C24.0602 0.0329026 24.3704 0.377108 24.34 0.773524C24.2103 2.394 24.2163 4.03767 24.3542 5.65814C24.3887 6.05456 24.0784 6.40263 23.6628 6.43357C23.6445 6.43357 23.6263 6.4355 23.608 6.4355V6.43744Z" fill="#F9F7F2"/>
+    <path d="M21.0084 6.88414C20.6697 6.888 20.3575 6.66949 20.2703 6.34269C19.9499 5.14377 19.3436 4.0048 18.5183 3.05147C18.2526 2.74401 18.2993 2.29151 18.6197 2.03819C18.9421 1.78487 19.4166 1.82935 19.6822 2.13488C20.6474 3.25258 21.3572 4.58492 21.7303 5.98688C21.8337 6.3717 21.5883 6.76425 21.1848 6.86287C21.124 6.87834 21.0652 6.88414 21.0043 6.88607L21.0084 6.88414Z" fill="#F9F7F2"/>
   </g>
   <defs>
-    <clipPath id="clip0_12391_446">
-      <rect width="39" height="26" fill="white" />
-    </clipPath>
-    <clipPath id="clip1_12391_446">
-      <rect width="39" height="26" fill="white" />
+    <clipPath id="clip0_10905_18559">
+      <rect width="45.7143" height="30" fill="white" transform="translate(0.818359)"/>
     </clipPath>
   </defs>
 </svg>

frontend/src/assets/calendar.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-function Calendar() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-6 h-6"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
-      />
-    </svg>
-  );
-}
-
-export default Calendar;

frontend/src/assets/cog-tooth.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-
-function CogTooth() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
-      />
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-      />
-    </svg>
-  );
-}
-
-export default CogTooth;

frontend/src/assets/confirm.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-
-function ConfirmIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-5 h-5"
-    >
-      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-    </svg>
-  );
-}
-
-export default ConfirmIcon;

frontend/src/assets/earth.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-function Earth() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-6 h-6"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
-      />
-    </svg>
-  );
-}
-
-export default Earth;

frontend/src/assets/pause.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-function PauseIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-5 h-5"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M15.75 5.25v13.5m-7.5-13.5v13.5"
-      />
-    </svg>
-  );
-}
-
-export default PauseIcon;

frontend/src/assets/pencil.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-function Pencil() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-6 h-6"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
-      />
-    </svg>
-  );
-}
-
-export default Pencil;

frontend/src/assets/play.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-function PlayIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-5 h-5"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"
-      />
-    </svg>
-  );
-}
-
-export default PlayIcon;

frontend/src/assets/reject.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-function RejectIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-5 h-5"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M6 18L18 6M6 6l12 12"
-      />
-    </svg>
-  );
-}
-
-export default RejectIcon;

frontend/src/assets/stop.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-function StopIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-5 h-5"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M5.25 7.5A2.25 2.25 0 0 1 7.5 5.25h9a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-9Z"
-      />
-    </svg>
-  );
-}
-
-export default StopIcon;

frontend/src/assets/vscode-alt.svg

@@ -1,57 +0,0 @@
-<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<g filter="url(#filter0_d)">
-<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M70.9119 99.5723C72.4869 100.189 74.2828 100.15 75.8725 99.3807L96.4604 89.4231C98.624 88.3771 100 86.1762 100 83.7616V16.2392C100 13.8247 98.624 11.6238 96.4604 10.5774L75.8725 0.619067C73.7862 -0.389991 71.3446 -0.142885 69.5135 1.19527C69.252 1.38636 69.0028 1.59985 68.769 1.83502L29.3551 37.9795L12.1872 24.88C10.5891 23.6607 8.35365 23.7606 6.86938 25.1178L1.36302 30.1525C-0.452603 31.8127 -0.454583 34.6837 1.35854 36.3466L16.2471 50.0001L1.35854 63.6536C-0.454583 65.3164 -0.452603 68.1876 1.36302 69.8477L6.86938 74.8824C8.35365 76.2395 10.5891 76.34 12.1872 75.1201L29.3551 62.0207L68.769 98.1651C69.3925 98.7923 70.1246 99.2645 70.9119 99.5723ZM75.0152 27.1813L45.1092 50.0001L75.0152 72.8189V27.1813Z" fill="white"/>
-</mask>
-<g mask="url(#mask0)">
-<path d="M96.4614 10.593L75.8567 0.62085C73.4717 -0.533437 70.6215 -0.0465506 68.7498 1.83492L1.29834 63.6535C-0.515935 65.3164 -0.513852 68.1875 1.30281 69.8476L6.8125 74.8823C8.29771 76.2395 10.5345 76.339 12.1335 75.1201L93.3604 13.18C96.0854 11.102 100 13.0557 100 16.4939V16.2535C100 13.84 98.6239 11.64 96.4614 10.593Z" fill="#D9D9D9"/>
-<g filter="url(#filter1_d)">
-<path d="M96.4614 89.4074L75.8567 99.3797C73.4717 100.534 70.6215 100.047 68.7498 98.1651L1.29834 36.3464C-0.515935 34.6837 -0.513852 31.8125 1.30281 30.1524L6.8125 25.1177C8.29771 23.7605 10.5345 23.6606 12.1335 24.88L93.3604 86.8201C96.0854 88.8985 100 86.9447 100 83.5061V83.747C100 86.1604 98.6239 88.3603 96.4614 89.4074Z" fill="#E6E6E6"/>
-</g>
-<g filter="url(#filter2_d)">
-<path d="M75.8578 99.3807C73.4721 100.535 70.6219 100.047 68.75 98.1651C71.0564 100.483 75 98.8415 75 95.5631V4.43709C75 1.15852 71.0565 -0.483493 68.75 1.83492C70.6219 -0.0467614 73.4721 -0.534276 75.8578 0.618963L96.4583 10.5773C98.6229 11.6237 100 13.8246 100 16.2391V83.7616C100 86.1762 98.6229 88.3761 96.4583 89.4231L75.8578 99.3807Z" fill="white"/>
-</g>
-<g style="mix-blend-mode:overlay" opacity="0.25">
-<path style="mix-blend-mode:overlay" opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M70.8508 99.5723C72.4258 100.189 74.2218 100.15 75.8115 99.3807L96.4 89.4231C98.5635 88.3771 99.9386 86.1762 99.9386 83.7616V16.2391C99.9386 13.8247 98.5635 11.6239 96.4 10.5774L75.8115 0.618974C73.7252 -0.390085 71.2835 -0.142871 69.4525 1.19518C69.1909 1.38637 68.9418 1.59976 68.7079 1.83493L29.2941 37.9795L12.1261 24.88C10.528 23.6606 8.2926 23.7605 6.80833 25.1177L1.30198 30.1524C-0.51354 31.8126 -0.515625 34.6837 1.2975 36.3465L16.186 50L1.2975 63.6536C-0.515625 65.3164 -0.51354 68.1875 1.30198 69.8476L6.80833 74.8824C8.2926 76.2395 10.528 76.339 12.1261 75.1201L29.2941 62.0207L68.7079 98.1651C69.3315 98.7923 70.0635 99.2645 70.8508 99.5723ZM74.9542 27.1812L45.0481 50L74.9542 72.8188V27.1812Z" fill="url(#paint0_linear)"/>
-</g>
-</g>
-</g>
-</g>
-<defs>
-<filter id="filter0_d" x="-6.25" y="-4.16667" width="112.5" height="112.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="2.08333"/>
-<feGaussianBlur stdDeviation="3.125"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-<filter id="filter1_d" x="-8.39436" y="15.6951" width="116.728" height="92.6376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="4.16667"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-<filter id="filter2_d" x="60.4167" y="-8.33346" width="47.9167" height="116.667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="4.16667"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear" x1="49.939" y1="-5.19792e-05" x2="49.939" y2="100.001" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<clipPath id="clip0">
-<rect width="100" height="100" fill="white"/>
-</clipPath>
-</defs>
-</svg>

frontend/src/components/extension-icon-map.constant.tsx

@@ -1,20 +0,0 @@
-import { DiJavascript } from "react-icons/di";
-import {
-  FaCss3,
-  FaHtml5,
-  FaList,
-  FaMarkdown,
-  FaNpm,
-  FaPython,
-} from "react-icons/fa";
-
-export const EXTENSION_ICON_MAP: Record<string, React.ReactNode> = {
-  js: <DiJavascript />,
-  ts: <DiJavascript />,
-  py: <FaPython />,
-  css: <FaCss3 />,
-  json: <FaList />,
-  npmignore: <FaNpm />,
-  html: <FaHtml5 />,
-  md: <FaMarkdown />,
-};

frontend/src/components/features/analytics/analytics-consent-form-modal.tsx

@@ -49,7 +49,7 @@ export function AnalyticsConsentFormModal({
             {t(I18nKey.ANALYTICS$DESCRIPTION)}
           </BaseModalDescription>
 
-          <label className="flex gap-2 items-center self-start">
+          <label className="flex gap-2 items-center self-start text-sm">
             <input name="analytics" type="checkbox" defaultChecked />
             {t(I18nKey.ANALYTICS$SEND_ANONYMOUS_DATA)}
           </label>

frontend/src/components/features/browser/empty-browser-message.tsx

@@ -6,9 +6,12 @@ export function EmptyBrowserMessage() {
   const { t } = useTranslation();
 
   return (
-    <div className="flex flex-col items-center h-full justify-center">
-      <IoIosGlobe size={100} />
-      {t(I18nKey.BROWSER$NO_PAGE_LOADED)}
+    <div className="flex flex-col items-center justify-center w-full h-full p-10 gap-4">
+      <IoIosGlobe size={113} />
+      <span className="text-[#8D95A9] text-[19px] font-normal leading-5">
+        {" "}
+        {t(I18nKey.BROWSER$NO_PAGE_LOADED)}
+      </span>
     </div>
   );
 }