Compare commits

..

75 Commits

Author SHA1 Message Date
enyst 8316ec9eb3 Integrate AuthSystem docs into documentation navigation
- Add AuthSystem design documents to docs.json navigation under Architecture section
- Convert .md files to .mdx format for proper documentation system integration
- Add frontmatter with appropriate titles for both documents
- Documents now accessible in deployed documentation under OpenHands Developers > Architecture
2025-09-04 07:43:29 +00:00
enyst 059e5b7af6 Clean up AuthSystem docs: remove emojis, fix token references, focus on architectural benefits
- Remove all emojis for professional presentation
- Fix provider_tokens references (was dependency injection, not route parameters)
- Streamline benefits section to focus on architectural/codebase/extensibility improvements
- Remove promotional language and focus on technical merits
- Maintain clear documentation of the design and implementation approach
2025-09-04 07:06:12 +00:00
enyst d858882c3d Add AuthSystem design documentation
- Comprehensive AuthSystem design supporting None/SU/MU strategies
- Based on GitHub issues #10751 and #10730 analysis
- Includes before/after code examples and Mermaid diagrams
- Provides clean abstraction boundaries and migration plan
- Extension points for custom builds with multi-user support

Co-authored-by: openhands <openhands@all-hands.dev>
2025-09-04 06:54:53 +00:00
Hiep Le 49d37119a9 chore(frontend): remove feature flag (microagent management) (#10769) 2025-09-02 19:46:09 +00:00
Jamie Chicago cfd416c29f feat: update welcome-good-first-issue.yml (#10766) 2025-09-02 19:41:58 +00:00
Ray Myers c052dd7da5 chore - Update license for enterprise folder (#10761) 2025-09-02 18:48:45 +00:00
Ryan H. Tran 3f77b8229a Add support for AGENTS.md files in microagent system (#10528)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-09-03 02:18:38 +08:00
Tim O'Farrell 8d13c9f328 UI for determining if llm options are enabled (#10665)
Co-authored-by: openhands <openhands@all-hands.dev>
Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com>
2025-09-02 12:09:55 -06:00
mamoodi f46b112f17 Add more troubleshooting for linux (#10704) 2025-09-02 14:02:16 -04:00
mamoodi 44dc7f9e9b Release 0.55.0 (#10657) 2025-09-02 13:49:02 -04:00
Hiep Le 00eaa7a6e1 refactor(frontend): remove the branch dropdown from the learn this repo modal (microagent management) (#10755) 2025-09-02 22:34:00 +07:00
Hiep Le 9f1d6963b8 feat(frontend): support pagination when loading repositories (microagent management) (#10708) 2025-09-02 17:03:58 +04:00
Rohit Malhotra f61fa93596 Fix fragile URL parsing in Bitbucket service search_repositories method (#10733)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-09-01 02:59:24 -04:00
Rohit Malhotra 3e87c08631 refactor: introduce HTTPClient protocol for git service integrations (#10731)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-09-01 01:44:31 -04:00
Rohit Malhotra 21f3ef540f refactor: Apply GitHub mixins pattern to BitBucket service (#10728)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-31 16:09:41 -04:00
Rohit Malhotra 61a93d010c Refactor GitLab service into modular mixins pattern (#10727)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-31 19:10:40 +00:00
Rohit Malhotra 9d6afa09b6 Fix GraphQL URL configuration for GitHub Enterprise Server (#10725)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-30 18:06:00 -04:00
Rohit Malhotra c648b6f74f Refactor: Modularize GitHubService into feature mixins (#10492)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-29 23:45:15 -04:00
sp.wack c0fa41da65 fix: auto-load repositories when insufficient content in dropdown (#10697)
Co-authored-by: openhands <openhands@all-hands.dev>
Co-authored-by: Rohit Malhotra <rohitvinodmalhotra@gmail.com>
2025-08-29 21:17:27 +00:00
Rohit Malhotra 6eb32e9ae4 Fix: Add method to merge conversation stats (#10667)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-29 20:15:44 +00:00
Rohit Malhotra 6a544d4274 (Hotfix): Branch pagination for GitLab (#10710)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-29 20:15:15 +00:00
Calvin Smith 4aada82b75 fix: Linking condensation and task tracking prompts (#10656)
Co-authored-by: Calvin Smith <calvin@all-hands.dev>
2025-08-29 09:18:31 -06:00
Ryan H. Tran ab2da611f5 fix: validate task_list schema for task tracker (#10624) 2025-08-29 10:57:50 +00:00
Rohit Malhotra e47bcf31e4 [Bug, GitLab]: fix missing context in cloud resolver (#10509)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-29 02:38:03 -04:00
mamoodi 83b9262379 Add troubleshooting guide for linux timeout issue (#10685) 2025-08-29 05:52:36 +02:00
Rohit Malhotra edc95141f7 Implement branch pagination for repository selection and improve UI async dropdown behaviour (#10588)
Co-authored-by: openhands <openhands@all-hands.dev>
Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
2025-08-29 03:38:42 +00:00
Hiep Le 5b35203253 refactor: remove branch dropdown, update title, fix pr_number issue (microagent management) (#10691) 2025-08-29 00:24:48 +04:00
Rohit Malhotra 7e3eabe777 (Hotfix): ConversationStats metrics loss for unregistered services (#10676)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-28 14:15:20 -04:00
dependabot[bot] 23713bfe8c chore(deps): bump the version-all group in /frontend with 5 updates (#10686)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2025-08-28 14:53:14 +00:00
Ryan H. Tran 81829289ab Add support for passing list of Message into LLM completion (#10671) 2025-08-28 21:22:28 +08:00
Ray Myers 9709431874 fix: cli dedupe TaskTrackingAction thoughts by using display_thought_if_new (#10660)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-28 21:20:39 +08:00
dependabot[bot] 0e9906f41e chore(deps): bump posthog-js from 1.260.3 to 1.261.0 in /frontend in the version-all group (#10658)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2025-08-28 16:15:31 +04:00
chuckbutkus 9ac9a47207 Missed a place for the group change (#10659) 2025-08-27 21:47:20 +00:00
Hiep Le 75653e805a refactor(frontend): enhance the launch microagent modal (memory UI). (#10651) 2025-08-28 01:41:58 +07:00
mamoodi 9630b536cd Revert "Add support for passing list of Message into LLM completion" (#10653) 2025-08-27 17:51:17 +00:00
Engel Nyst 6f5c8186b8 Fix(settings): enforce condenser max history size >= 20 and improve messaging (#10638) 2025-08-27 18:37:41 +02:00
Rohit Malhotra 36e0d8d3da [Fix]: token refresh for nested runtimes (#10637)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-27 12:20:34 -04:00
Ryan H. Tran e68abf8d75 Add support for passing list of Message into LLM completion (#10650) 2025-08-27 22:39:26 +07:00
Ryan H. Tran 93ef1b0cda Remove image content filtering in ConversationMemory (#10645) 2025-08-27 22:28:09 +07:00
Web3 Outlaw 77b5c6b161 Fix Typos in Comment and Docs (#10644) 2025-08-27 14:06:39 +00:00
Hiep Le 57aa7d5c12 feat: hide conversations after PR closure or merge (microagent management) (#10600) 2025-08-27 16:32:04 +07:00
Hiep Le 50391ecdf3 feat(frontend): update learning repo flow (microagent management) (#10597)
Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-27 16:02:48 +07:00
dependabot[bot] 672650d3d9 chore(deps): bump the version-all group in /frontend with 7 updates (#10643)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2025-08-27 12:10:48 +04:00
Rohit Malhotra 9afedea170 [Bug, GitHub]: fix missing context in cloud resolver (#10517)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-27 07:07:09 +00:00
chuckbutkus c0bb84dfa2 Non root user (#10155)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-27 02:23:39 -04:00
Hiep Le 18b5139237 fix(backend): show name of created branch in conversation list. (#10208) 2025-08-27 11:41:12 +07:00
Rohit Malhotra 4849369ede frontend(chat): render conversation_instructions from RecallObservation (#10639)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-26 23:32:18 -04:00
Xingyao Wang b082ccc0fb feat(llm): add support for deepseek and gpt-5-mini, util for token count (#10626)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-27 11:03:35 +08:00
mamoodi b0007076c0 Remove duplicated command in CLI (#10634) 2025-08-26 16:01:16 -04:00
Tim O'Farrell 4a4f213f57 Remove unused translation keys from translation.json (#10631)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-26 11:59:48 -06:00
Tim O'Farrell f9099fe6db Refactor conversation status (#10590)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-26 08:06:26 -06:00
Xingyao Wang 8f46a0a7a3 Add gpt-5-mini-2025-08-07 as verified model & supported in OpenHands provider (#10628)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-26 13:15:16 +00:00
dependabot[bot] 55d204ae1b chore(deps): bump the version-all group in /frontend with 21 updates (#10614)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2025-08-26 06:09:20 +00:00
baii 4d7cd228da Fix(backend): correctly forward AWS Bedrock aws_access_key_id / aws_secret_access_key / aws_region_name to litellm (#9663)
Co-authored-by: Engel Nyst <enyst@users.noreply.github.com>
2025-08-25 22:07:28 +00:00
Tim O'Farrell a3f92df4b3 Fix for issue where exceptions are swallowed (#10602) 2025-08-25 15:50:15 -06:00
Engel Nyst e41f8f5215 feat(settings): configurable condenser max history size (FE+BE) (#10591) 2025-08-25 22:50:52 +02:00
Jamie Chicago 6448f5a681 docs: Add Ubuntu installation steps for Windows WSL setup (#10485)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-25 20:43:04 +00:00
Graham Neubig 5fcc648d5f Add E2E test for multi-conversation resume functionality (Issue #10384) (#10390)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-25 15:15:54 -04:00
danieljbruntz c9d96038c1 feat: Add OPENHANDS_FORCE_VISION env var to override vision capability detection (#10255)
Co-authored-by: mamoodi <mamoodiha@gmail.com>
Co-authored-by: Engel Nyst <engel.nyst@gmail.com>
2025-08-25 19:05:58 +00:00
Calvin Smith 408af4e012 fix: Extend cases where truncation triggers (#10607)
Co-authored-by: Calvin Smith <calvin@all-hands.dev>
2025-08-25 12:59:41 -06:00
mamoodi d9ac2faff6 Add backlog label to exemption (#10598) 2025-08-25 14:57:35 -04:00
Rohit Malhotra 64383a66e2 docs: Update Project Management integration docs (#10161)
Co-authored-by: OpenHands <openhands@all-hands.dev>
2025-08-25 14:51:06 -04:00
chuckbutkus 7fbcb29499 Allow for path based runtimes in the SAAS environment (#10518)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-25 14:31:07 -04:00
hereisok e7aae1495c perf: remove the sleep before runtime initialization (#10033)
Signed-off-by: hereisok <hereisok@angai.wk@gmail.com>
Co-authored-by: mamoodi <mamoodiha@gmail.com>
2025-08-25 13:56:57 -04:00
Hiep Le d33f27d141 refactor(frontend): separate the microagents and conversations (microagent management) (#10596)
Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-26 00:50:25 +07:00
Hiep Le d08851859b refactor(frontend): update helper text (microagent management) (#10595)
Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-26 00:49:11 +07:00
Hiep Le 7f4d311294 fix: subscription logic by polling for available runtime (microagent management, memory UI) (#10519)
Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-25 20:44:00 +04:00
dependabot[bot] 049f058ed1 chore(deps-dev): bump eslint-plugin-unused-imports from 4.1.4 to 4.2.0 in /frontend in the eslint group (#10511)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2025-08-25 18:03:22 +04:00
Tim O'Farrell bb6cf5a816 Refactor authentication error handling with global FastAPI exception handler (#10403)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-25 07:54:30 -06:00
Engel Nyst d9bc5824a0 docs: add shell guidance to avoid set -e variants in this environment (#10579)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-24 13:39:37 +08:00
Xingyao Wang fd5b5075d6 Simplify CLI markdown rendering; remove python-markdown deps; update tests (#10538)
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-24 01:23:06 +08:00
Hiep Le f5cd7b256d feat(frontend): Implement LLM risk analyzer UI (#10569)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: openhands <openhands@all-hands.dev>
Co-authored-by: Xingyao Wang <xingyao@all-hands.dev>
Co-authored-by: Graham Neubig <neubig@gmail.com>
Co-authored-by: llamantino <213239228+llamantino@users.noreply.github.com>
Co-authored-by: mamoodi <mamoodiha@gmail.com>
Co-authored-by: Tim O'Farrell <tofarr@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ryan H. Tran <descience.thh10@gmail.com>
Co-authored-by: Neeraj Panwar <49247372+npneeraj@users.noreply.github.com>
Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com>
Co-authored-by: Insop <1240382+insop@users.noreply.github.com>
Co-authored-by: test <test@test.com>
Co-authored-by: Engel Nyst <enyst@users.noreply.github.com>
Co-authored-by: Zhonghao Jiang <zhonghao.J@outlook.com>
Co-authored-by: Ray Myers <ray.myers@gmail.com>
2025-08-23 02:08:45 +07:00
Neeraj Panwar df86fd275d Fixes bug 9682 (#9692)
Co-authored-by: Xingyao Wang <xingyao@all-hands.dev>
2025-08-22 16:51:53 +00:00
Xingyao Wang d22a2e39e7 feat(agent): add security-related items in system prompt to defense against data exfiltration (#10477)
Co-authored-by: Engel Nyst <enyst@users.noreply.github.com>
Co-authored-by: openhands <openhands@all-hands.dev>
2025-08-22 15:53:13 +00:00
Xingyao Wang ca424ec15d [agent] Add LLM risk analyzer (#9349)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: openhands <openhands@all-hands.dev>
Co-authored-by: Graham Neubig <neubig@gmail.com>
Co-authored-by: llamantino <213239228+llamantino@users.noreply.github.com>
Co-authored-by: mamoodi <mamoodiha@gmail.com>
Co-authored-by: Tim O'Farrell <tofarr@gmail.com>
Co-authored-by: Hiep Le <69354317+hieptl@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ryan H. Tran <descience.thh10@gmail.com>
Co-authored-by: Neeraj Panwar <49247372+npneeraj@users.noreply.github.com>
Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com>
Co-authored-by: Insop <1240382+insop@users.noreply.github.com>
Co-authored-by: test <test@test.com>
Co-authored-by: Engel Nyst <enyst@users.noreply.github.com>
Co-authored-by: Zhonghao Jiang <zhonghao.J@outlook.com>
Co-authored-by: Ray Myers <ray.myers@gmail.com>
2025-08-22 14:02:36 +00:00
287 changed files with 15931 additions and 6620 deletions
+1
View File
@@ -187,6 +187,7 @@ jobs:
test_settings.py::test_github_token_configuration \
test_conversation.py::test_conversation_start \
test_browsing_catchphrase.py::test_browsing_catchphrase \
test_multi_conversation_resume.py::test_multi_conversation_resume \
-v --no-header --capture=no --timeout=900
- name: Upload test results
+2 -2
View File
@@ -225,7 +225,7 @@ jobs:
SANDBOX_RUNTIME_CONTAINER_IMAGE=$image_name \
TEST_IN_CI=true \
RUN_AS_OPENHANDS=false \
poetry run pytest -n 7 -raRs --reruns 2 --reruns-delay 5 -s ./tests/runtime --ignore=tests/runtime/test_browsergym_envs.py --durations=10
poetry run pytest -n 0 -raRs --reruns 2 --reruns-delay 5 -s ./tests/runtime --ignore=tests/runtime/test_browsergym_envs.py --durations=10
env:
DEBUG: "1"
@@ -284,7 +284,7 @@ jobs:
SANDBOX_RUNTIME_CONTAINER_IMAGE=$image_name \
TEST_IN_CI=true \
RUN_AS_OPENHANDS=true \
poetry run pytest -n 7 -raRs --reruns 2 --reruns-delay 5 -s ./tests/runtime --ignore=tests/runtime/test_browsergym_envs.py --durations=10
poetry run pytest -n 0 -raRs --reruns 2 --reruns-delay 5 -s ./tests/runtime --ignore=tests/runtime/test_browsergym_envs.py --durations=10
env:
DEBUG: "1"
+1 -1
View File
@@ -15,7 +15,7 @@ jobs:
stale-issue-message: 'This issue is stale because it has been open for 40 days with no activity. Remove the stale label or leave a comment, otherwise it will be closed in 10 days.'
stale-pr-message: 'This PR is stale because it has been open for 40 days with no activity. Remove the stale label or leave a comment, otherwise it will be closed in 10 days.'
days-before-stale: 40
exempt-issue-labels: 'roadmap'
exempt-issue-labels: roadmap,backlog
close-issue-message: 'This issue was automatically closed due to 50 days of inactivity. We do this to help keep the issues somewhat manageable and focus on active issues.'
close-pr-message: 'This PR was closed because it had no activity for 50 days. If you feel this was closed in error, and you would like to continue the PR, please resubmit or let us know.'
days-before-close: 10
@@ -45,6 +45,7 @@ jobs:
"This issue has been labeled as **good first issue**, which means it's a great place to get started with the OpenHands project.\n\n" +
"If you're interested in working on it, feel free to! No need to ask for permission.\n\n" +
"Be sure to check out our [development setup guide](" + repoUrl + "/blob/main/Development.md) to get your environment set up, and follow our [contribution guidelines](" + repoUrl + "/blob/main/CONTRIBUTING.md) when you're ready to submit a fix.\n\n" +
"Feel free to join our developer community on [Slack](dub.sh/openhands). You can ask for [help](https://openhands-ai.slack.com/archives/C078L0FUGUX), [feedback](https://openhands-ai.slack.com/archives/C086ARSNMGA), and even ask for a [PR review](https://openhands-ai.slack.com/archives/C08D8FJ5771).\n\n" +
"🙌 Happy hacking! 🙌\n\n" +
"<!-- auto-comment:good-first-issue -->"
});
+1 -1
View File
@@ -257,5 +257,5 @@ containers/runtime/code
# test results
test-results
.sessions
.eval_sessions
-47
View File
@@ -1,47 +0,0 @@
repos:
- repo: https://github.com/pre-commit/pre-commit-hooks
rev: v5.0.0
hooks:
- id: trailing-whitespace
exclude: ^(docs/|modules/|python/|openhands-ui/|third_party/)
- id: end-of-file-fixer
exclude: ^(docs/|modules/|python/|openhands-ui/|third_party/)
- id: check-yaml
args: ["--allow-multiple-documents"]
- id: debug-statements
- repo: https://github.com/tox-dev/pyproject-fmt
rev: v2.5.1
hooks:
- id: pyproject-fmt
- repo: https://github.com/abravalheri/validate-pyproject
rev: v0.24.1
hooks:
- id: validate-pyproject
- repo: https://github.com/astral-sh/ruff-pre-commit
# Ruff version.
rev: v0.11.8
hooks:
# Run the linter.
- id: ruff
entry: ruff check --config dev_config/python/ruff.toml
types_or: [python, pyi, jupyter]
args: [--fix, --unsafe-fixes]
exclude: third_party/
# Run the formatter.
- id: ruff-format
entry: ruff format --config dev_config/python/ruff.toml
types_or: [python, pyi, jupyter]
exclude: third_party/
- repo: https://github.com/pre-commit/mirrors-mypy
rev: v1.15.0
hooks:
- id: mypy
additional_dependencies:
[types-requests, types-setuptools, types-pyyaml, types-toml, types-docker, types-Markdown, pydantic, lxml]
# To see gaps add `--html-report mypy-report/`
entry: mypy --config-file dev_config/python/mypy.ini openhands/
always_run: true
pass_filenames: false
+1 -1
View File
@@ -159,7 +159,7 @@ poetry run pytest ./tests/unit/test_*.py
To reduce build time (e.g., if no changes were made to the client-runtime component), you can use an existing Docker
container image by setting the SANDBOX_RUNTIME_CONTAINER_IMAGE environment variable to the desired Docker image.
Example: `export SANDBOX_RUNTIME_CONTAINER_IMAGE=ghcr.io/all-hands-ai/runtime:0.54-nikolaik`
Example: `export SANDBOX_RUNTIME_CONTAINER_IMAGE=ghcr.io/all-hands-ai/runtime:0.55-nikolaik`
## Develop inside Docker container
+7 -2
View File
@@ -1,7 +1,12 @@
The MIT License (MIT)
Portions of this software are licensed as follows:
* All content that resides under the enterprise/ directory is licensed under the license defined in "enterprise/LICENSE".
* Content outside of the above mentioned directories or restrictions above is available under the MIT license as defined below.
=====================
Copyright © 2023
The MIT License (MIT)
Copyright © 2025
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
+3 -4
View File
@@ -79,17 +79,17 @@ You'll find OpenHands running at [http://localhost:3000](http://localhost:3000)
You can also run OpenHands directly with Docker:
```bash
docker pull docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik
docker pull docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik
docker run -it --rm --pull=always \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik \
-e LOG_ALL_EVENTS=true \
-v /var/run/docker.sock:/var/run/docker.sock \
-v ~/.openhands:/.openhands \
-p 3000:3000 \
--add-host host.docker.internal:host-gateway \
--name openhands-app \
docker.all-hands.dev/all-hands-ai/openhands:0.54
docker.all-hands.dev/all-hands-ai/openhands:0.55
```
</details>
@@ -130,7 +130,6 @@ If you want to modify the OpenHands source code, check out [Development.md](http
Having issues? The [Troubleshooting Guide](https://docs.all-hands.dev/usage/troubleshooting) can help.
## 📖 Documentation
<a href="https://deepwiki.com/All-Hands-AI/OpenHands"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki" title="Autogenerated Documentation by DeepWiki"></a>
To learn more about the project, and for tips on using OpenHands,
check out our [documentation](https://docs.all-hands.dev/usage/getting-started).
+3 -3
View File
@@ -51,17 +51,17 @@ OpenHands也可以使用Docker在本地系统上运行。
```bash
docker pull docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik
docker pull docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik
docker run -it --rm --pull=always \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik \
-e LOG_ALL_EVENTS=true \
-v /var/run/docker.sock:/var/run/docker.sock \
-v ~/.openhands:/.openhands \
-p 3000:3000 \
--add-host host.docker.internal:host-gateway \
--name openhands-app \
docker.all-hands.dev/all-hands-ai/openhands:0.54
docker.all-hands.dev/all-hands-ai/openhands:0.55
```
> **注意**: 如果您在0.44版本之前使用过OpenHands,您可能需要运行 `mv ~/.openhands-state ~/.openhands` 来将对话历史迁移到新位置。
+3 -3
View File
@@ -42,17 +42,17 @@ OpenHandsはDockerを利用してローカル環境でも実行できます。
> 公共ネットワークで実行していますか?[Hardened Docker Installation Guide](https://docs.all-hands.dev/usage/runtimes/docker#hardened-docker-installation)を参照して、ネットワークバインディングの制限や追加のセキュリティ対策を実施してください。
```bash
docker pull docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik
docker pull docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik
docker run -it --rm --pull=always \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik \
-e LOG_ALL_EVENTS=true \
-v /var/run/docker.sock:/var/run/docker.sock \
-v ~/.openhands:/.openhands \
-p 3000:3000 \
--add-host host.docker.internal:host-gateway \
--name openhands-app \
docker.all-hands.dev/all-hands-ai/openhands:0.54
docker.all-hands.dev/all-hands-ai/openhands:0.55
```
**注**: バージョン0.44以前のOpenHandsを使用していた場合は、会話履歴を移行するために `mv ~/.openhands-state ~/.openhands` を実行してください。
+3 -2
View File
@@ -363,10 +363,11 @@ classpath = "my_package.my_module.MyCustomAgent"
#confirmation_mode = false
# The security analyzer to use (For Headless / CLI only - In Web this is overridden by Session Init)
#security_analyzer = ""
# Available options: 'llm' (default), 'invariant'
#security_analyzer = "llm"
# Whether to enable security analyzer
#enable_security_analyzer = false
#enable_security_analyzer = true
#################################### Condenser #################################
# Condensers control how conversation history is managed and compressed when
+13 -13
View File
@@ -58,34 +58,34 @@ RUN sed -i 's/^UID_MIN.*/UID_MIN 499/' /etc/login.defs
# Default is 60000, but we've seen up to 200000
RUN sed -i 's/^UID_MAX.*/UID_MAX 1000000/' /etc/login.defs
RUN groupadd --gid $OPENHANDS_USER_ID app
RUN groupadd --gid $OPENHANDS_USER_ID openhands
RUN useradd -l -m -u $OPENHANDS_USER_ID --gid $OPENHANDS_USER_ID -s /bin/bash openhands && \
usermod -aG app openhands && \
usermod -aG openhands openhands && \
usermod -aG sudo openhands && \
echo '%sudo ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers
RUN chown -R openhands:app /app && chmod -R 770 /app
RUN sudo chown -R openhands:app $WORKSPACE_BASE && sudo chmod -R 770 $WORKSPACE_BASE
RUN chown -R openhands:openhands /app && chmod -R 770 /app
RUN sudo chown -R openhands:openhands $WORKSPACE_BASE && sudo chmod -R 770 $WORKSPACE_BASE
USER openhands
ENV VIRTUAL_ENV=/app/.venv \
PATH="/app/.venv/bin:$PATH" \
PYTHONPATH='/app'
COPY --chown=openhands:app --chmod=770 --from=backend-builder ${VIRTUAL_ENV} ${VIRTUAL_ENV}
COPY --chown=openhands:openhands --chmod=770 --from=backend-builder ${VIRTUAL_ENV} ${VIRTUAL_ENV}
COPY --chown=openhands:app --chmod=770 ./microagents ./microagents
COPY --chown=openhands:app --chmod=770 ./openhands ./openhands
COPY --chown=openhands:app --chmod=777 ./openhands/runtime/plugins ./openhands/runtime/plugins
COPY --chown=openhands:app pyproject.toml poetry.lock README.md MANIFEST.in LICENSE ./
COPY --chown=openhands:openhands --chmod=770 ./microagents ./microagents
COPY --chown=openhands:openhands --chmod=770 ./openhands ./openhands
COPY --chown=openhands:openhands --chmod=777 ./openhands/runtime/plugins ./openhands/runtime/plugins
COPY --chown=openhands:openhands pyproject.toml poetry.lock README.md MANIFEST.in LICENSE ./
# This is run as "openhands" user, and will create __pycache__ with openhands:openhands ownership
RUN python openhands/core/download.py # No-op to download assets
# Add this line to set group ownership of all files/directories not already in "app" group
# openhands:openhands -> openhands:app
RUN find /app \! -group app -exec chgrp app {} +
# openhands:openhands -> openhands:openhands
RUN find /app \! -group openhands -exec chgrp openhands {} +
COPY --chown=openhands:app --chmod=770 --from=frontend-builder /app/build ./frontend/build
COPY --chown=openhands:app --chmod=770 ./containers/app/entrypoint.sh /app/entrypoint.sh
COPY --chown=openhands:openhands --chmod=770 --from=frontend-builder /app/build ./frontend/build
COPY --chown=openhands:openhands --chmod=770 ./containers/app/entrypoint.sh /app/entrypoint.sh
USER root
+1 -1
View File
@@ -54,7 +54,7 @@ else
fi
fi
fi
usermod -aG app enduser
usermod -aG openhands enduser
# get the user group of /var/run/docker.sock and set openhands to that group
DOCKER_SOCKET_GID=$(stat -c '%g' /var/run/docker.sock)
echo "Docker socket group id: $DOCKER_SOCKET_GID"
+1 -1
View File
@@ -12,7 +12,7 @@ services:
- SANDBOX_API_HOSTNAME=host.docker.internal
- DOCKER_HOST_ADDR=host.docker.internal
#
- SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-ghcr.io/all-hands-ai/runtime:0.54-nikolaik}
- SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-ghcr.io/all-hands-ai/runtime:0.55-nikolaik}
- SANDBOX_USER_ID=${SANDBOX_USER_ID:-1234}
- WORKSPACE_MOUNT_PATH=${WORKSPACE_BASE:-$PWD/workspace}
ports:
+1 -1
View File
@@ -7,7 +7,7 @@ services:
image: openhands:latest
container_name: openhands-app-${DATE:-}
environment:
- SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik}
- SANDBOX_RUNTIME_CONTAINER_IMAGE=${SANDBOX_RUNTIME_CONTAINER_IMAGE:-docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik}
#- SANDBOX_USER_ID=${SANDBOX_USER_ID:-1234} # enable this only if you want a specific non-root sandbox user but you will have to manually adjust permissions of ~/.openhands for this user
- WORKSPACE_MOUNT_PATH=${WORKSPACE_BASE:-$PWD/workspace}
ports:
+3 -1
View File
@@ -153,7 +153,9 @@
"group": "Architecture",
"pages": [
"usage/architecture/backend",
"usage/architecture/runtime"
"usage/architecture/runtime",
"usage/architecture/auth-system-summary",
"usage/architecture/auth-system-design"
]
},
"usage/how-to/debugging",
@@ -0,0 +1,856 @@
# OpenHands AuthSystem Design
## Executive Summary
This document proposes a comprehensive AuthSystem design for OpenHands that supports three authentication strategies: **None** (current behavior), **Single User (SU)** with GitHub OAuth, and **Multi User (MU)** (for custom builds). The design introduces clean abstraction boundaries, eliminates scattered `user_id` threading, and provides a foundation for future authentication enhancements.
## Problem Statement
### Current Issues
1. **No Auth Strategy Abstraction**: OpenHands currently has a monolithic `DefaultUserAuth` that always returns `None` for `user_id`, with no clear path to support different authentication modes.
2. **Scattered user_id Threading**: 339+ occurrences of `user_id` across 68 files, with complex threading through:
- Storage partitioning (`users/{user_id}/` paths)
- Conversation/session scoping
- API route dependencies
- Provider token resolution
- Data model fields
3. **Provider Token Pollution**: Routes accept `provider_tokens` parameters and thread them through `ProviderHandler`, creating security risks and complex signatures.
4. **No Single User Support**: No way to enable GitHub OAuth for personal/single-user deployments while maintaining the simplicity of the current "None" mode.
5. **Boundary Violations**: Auth concerns are mixed with business logic throughout the codebase, making it difficult to switch between authentication modes.
### Requirements from GitHub Issues
From **Issue #10751** (user_id audit):
- Support None, SU, and MU modes
- Introduce `UserContext` and `StorageNamespace` abstractions
- Remove redundant `if user_id` guards (7 identified)
- Clean up storage path helpers
From **Issue #10730** (token provider):
- Remove `provider_tokens` dependency injection
- Introduce `TokenProvider` boundary abstraction
- Support backend-only credential resolution
- Enable custom builds with token refresh/rotation patterns
## Solution Architecture
### Core Components
#### 1. AuthStrategy Interface
```python
# openhands/auth/strategies/base.py
from abc import ABC, abstractmethod
from typing import Optional
from fastapi import Request
from openhands.auth.user_context import UserContext
from openhands.auth.token_provider import TokenProvider
class AuthStrategy(ABC):
"""Base class for authentication strategies"""
@abstractmethod
def get_name(self) -> str:
"""Return strategy name for logging/debugging"""
@abstractmethod
def requires_auth(self) -> bool:
"""Whether this strategy requires user authentication"""
@abstractmethod
async def authenticate(self, request: Request) -> Optional[UserContext]:
"""Authenticate request and return UserContext or None"""
@abstractmethod
async def get_token_provider(self, request: Request) -> TokenProvider:
"""Get token provider for this request"""
@abstractmethod
def get_login_url(self) -> Optional[str]:
"""Get login URL for frontend, None if no auth required"""
```
#### 2. UserContext
```python
# openhands/auth/user_context.py
from dataclasses import dataclass
from typing import Optional
from datetime import datetime
@dataclass(frozen=True)
class UserContext:
"""Immutable user context for authenticated requests"""
user_id: str
email: Optional[str] = None
username: Optional[str] = None
github_id: Optional[int] = None
github_username: Optional[str] = None
is_admin: bool = False
created_at: Optional[datetime] = None
last_login: Optional[datetime] = None
@property
def storage_namespace(self) -> str:
"""Get storage namespace for this user"""
return self.user_id
```
#### 3. TokenProvider Interface
```python
# openhands/auth/token_provider.py
from abc import ABC, abstractmethod
from typing import Optional, Mapping
from openhands.integrations.service_types import ProviderType
from openhands.integrations.provider import ProviderToken
class TokenProvider(ABC):
"""Abstract token provider for git integrations"""
@abstractmethod
async def get_token(self, provider: ProviderType) -> Optional[ProviderToken]:
"""Get token for specific provider"""
@abstractmethod
async def get_all_tokens(self) -> Mapping[ProviderType, ProviderToken]:
"""Get all available provider tokens"""
```
#### 4. StorageNamespace
```python
# openhands/auth/storage_namespace.py
from dataclasses import dataclass
from typing import Optional
@dataclass(frozen=True)
class StorageNamespace:
"""Encapsulates storage path logic for user data"""
namespace: Optional[str]
def get_conversation_dir(self, sid: str) -> str:
if self.namespace:
return f'users/{self.namespace}/conversations/{sid}/'
return f'sessions/{sid}/'
def get_conversation_events_dir(self, sid: str) -> str:
return f'{self.get_conversation_dir(sid)}events/'
def get_conversation_metadata_filename(self, sid: str) -> str:
return f'{self.get_conversation_dir(sid)}metadata.json'
# ... other path methods
```
### Authentication Strategies
#### 1. None Strategy (Current Behavior)
```python
# openhands/auth/strategies/none_strategy.py
from typing import Optional
from fastapi import Request
from openhands.auth.strategies.base import AuthStrategy
from openhands.auth.user_context import UserContext
from openhands.auth.token_provider import TokenProvider, DefaultTokenProvider
class NoneStrategy(AuthStrategy):
"""No authentication - current OpenHands behavior"""
def get_name(self) -> str:
return "none"
def requires_auth(self) -> bool:
return False
async def authenticate(self, request: Request) -> Optional[UserContext]:
return None # No user context
async def get_token_provider(self, request: Request) -> TokenProvider:
return DefaultTokenProvider() # Uses secrets.json
def get_login_url(self) -> Optional[str]:
return None
```
#### 2. Single User Strategy
```python
# openhands/auth/strategies/single_user_strategy.py
from typing import Optional
from fastapi import Request, HTTPException
from openhands.auth.strategies.base import AuthStrategy
from openhands.auth.user_context import UserContext
from openhands.auth.token_provider import TokenProvider, SingleUserTokenProvider
from openhands.server.shared import server_config
class SingleUserStrategy(AuthStrategy):
"""Single user with GitHub OAuth"""
def get_name(self) -> str:
return "single_user"
def requires_auth(self) -> bool:
return server_config.enable_su_auth
async def authenticate(self, request: Request) -> Optional[UserContext]:
if not self.requires_auth():
# SU mode without auth - create virtual user
return UserContext(
user_id="local",
username="local_user",
is_admin=True
)
# Extract JWT token from cookie/header
token = self._extract_token(request)
if not token:
return None
# Validate JWT and extract user info
user_data = self._validate_jwt(token)
if not user_data:
return None
# Verify user is allowed (if configured)
if (server_config.su_github_username and
user_data.get('github_username') != server_config.su_github_username):
raise HTTPException(403, "Access denied")
return UserContext(
user_id=user_data['github_username'],
email=user_data.get('email'),
username=user_data['github_username'],
github_id=user_data.get('github_id'),
github_username=user_data['github_username'],
is_admin=True # SU user is always admin
)
async def get_token_provider(self, request: Request) -> TokenProvider:
user_context = await self.authenticate(request)
return SingleUserTokenProvider(user_context)
def get_login_url(self) -> Optional[str]:
if not self.requires_auth():
return None
return f"/api/auth/github/login"
```
#### 3. Multi User Strategy (Custom Build Extension Point)
```python
# openhands/auth/strategies/multi_user_strategy.py
from typing import Optional
from fastapi import Request
from openhands.auth.strategies.base import AuthStrategy
from openhands.auth.user_context import UserContext
from openhands.auth.token_provider import TokenProvider
class MultiUserStrategy(AuthStrategy):
"""Multi-user strategy - extension point for custom builds"""
def get_name(self) -> str:
return "multi_user"
def requires_auth(self) -> bool:
return True
async def authenticate(self, request: Request) -> Optional[UserContext]:
# This would be implemented by custom builds/applications built on OH
raise NotImplementedError("Multi-user strategy not available in base OpenHands")
async def get_token_provider(self, request: Request) -> TokenProvider:
raise NotImplementedError("Multi-user strategy not available in base OpenHands")
def get_login_url(self) -> Optional[str]:
return "/api/auth/login"
```
### Integration Points
#### 1. Updated UserAuth
```python
# openhands/server/user_auth/strategy_user_auth.py
from fastapi import Request
from openhands.auth.strategies.base import AuthStrategy
from openhands.auth.user_context import UserContext
from openhands.auth.storage_namespace import StorageNamespace
from openhands.server.user_auth.user_auth import UserAuth
from openhands.storage.settings.settings_store import SettingsStore
from openhands.storage.secrets.secrets_store import SecretsStore
class StrategyUserAuth(UserAuth):
"""UserAuth implementation using AuthStrategy pattern"""
def __init__(self, strategy: AuthStrategy, user_context: Optional[UserContext]):
self.strategy = strategy
self.user_context = user_context
self._storage_namespace = StorageNamespace(
user_context.storage_namespace if user_context else None
)
async def get_user_id(self) -> str | None:
return self.user_context.user_id if self.user_context else None
async def get_user_email(self) -> str | None:
return self.user_context.email if self.user_context else None
# ... other methods using storage_namespace
```
#### 2. FastAPI Dependencies
```python
# openhands/server/dependencies/auth.py
from fastapi import Depends, Request
from openhands.auth.strategies.base import AuthStrategy
from openhands.auth.user_context import UserContext
from openhands.auth.token_provider import TokenProvider
from openhands.server.shared import get_auth_strategy
async def get_current_user(
request: Request,
strategy: AuthStrategy = Depends(get_auth_strategy)
) -> Optional[UserContext]:
"""Get current user context"""
return await strategy.authenticate(request)
async def get_token_provider(
request: Request,
strategy: AuthStrategy = Depends(get_auth_strategy)
) -> TokenProvider:
"""Get token provider for current request"""
return await strategy.get_token_provider(request)
async def require_auth(
user: Optional[UserContext] = Depends(get_current_user)
) -> UserContext:
"""Require authentication"""
if not user:
raise HTTPException(401, "Authentication required")
return user
```
#### 3. Updated Routes
```python
# openhands/server/routes/git.py (AFTER)
from fastapi import APIRouter, Depends
from openhands.auth.token_provider import TokenProvider
from openhands.auth.user_context import UserContext
from openhands.server.dependencies.auth import get_token_provider, get_current_user
from openhands.integrations.provider import ProviderHandler
app = APIRouter(prefix='/api/user')
@app.get('/repositories')
async def get_user_repositories(
sort: str = "pushed",
selected_provider: ProviderType | None = None,
token_provider: TokenProvider = Depends(get_token_provider),
user: Optional[UserContext] = Depends(get_current_user)
):
"""Get user repositories - no provider_tokens parameter!"""
client = ProviderHandler(token_provider=token_provider)
return await client.get_repositories(sort, selected_provider)
```
## Before/After Code Comparison
### Before: Current Implementation
```python
# BEFORE: openhands/server/routes/git.py
@app.get('/repositories', response_model=list[Repository])
async def get_user_repositories(
sort: str = Query(default='pushed'),
selected_provider: ProviderType | None = Query(default=None),
page: int | None = Query(default=None),
per_page: int | None = Query(default=None),
installation_id: str | None = Query(default=None),
provider_tokens: PROVIDER_TOKEN_TYPE | None = Depends(get_provider_tokens),
access_token: SecretStr | None = Depends(get_access_token),
user_id: str | None = Depends(get_user_id),
):
if provider_tokens:
client = ProviderHandler(
provider_tokens=provider_tokens,
external_auth_token=access_token,
external_auth_id=user_id,
)
# ... complex logic
```
```python
# BEFORE: openhands/storage/locations.py
def get_conversation_dir(sid: str, user_id: str | None = None) -> str:
if user_id:
return f'users/{user_id}/conversations/{sid}/'
else:
return f'sessions/{sid}/'
```
```python
# BEFORE: openhands/server/user_auth/default_user_auth.py
class DefaultUserAuth(UserAuth):
async def get_user_id(self) -> str | None:
return None # Always None - no multi-tenancy support
async def get_provider_tokens(self) -> PROVIDER_TOKEN_TYPE | None:
user_secrets = await self.get_user_secrets()
if user_secrets is None:
return None
return user_secrets.provider_tokens
```
### After: Proposed Implementation
```python
# AFTER: openhands/server/routes/git.py
@app.get('/repositories', response_model=list[Repository])
async def get_user_repositories(
sort: str = Query(default='pushed'),
selected_provider: ProviderType | None = Query(default=None),
page: int | None = Query(default=None),
per_page: int | None = Query(default=None),
installation_id: str | None = Query(default=None),
token_provider: TokenProvider = Depends(get_token_provider),
user: Optional[UserContext] = Depends(get_current_user),
):
client = ProviderHandler(token_provider=token_provider)
return await client.get_repositories(
sort, server_config.app_mode, selected_provider, page, per_page, installation_id
)
```
```python
# AFTER: openhands/auth/storage_namespace.py
@dataclass(frozen=True)
class StorageNamespace:
namespace: Optional[str]
def get_conversation_dir(self, sid: str) -> str:
if self.namespace:
return f'users/{self.namespace}/conversations/{sid}/'
return f'sessions/{sid}/'
```
```python
# AFTER: openhands/server/user_auth/strategy_user_auth.py
class StrategyUserAuth(UserAuth):
def __init__(self, strategy: AuthStrategy, user_context: Optional[UserContext]):
self.strategy = strategy
self.user_context = user_context
self.storage_namespace = StorageNamespace(
user_context.storage_namespace if user_context else None
)
async def get_user_id(self) -> str | None:
return self.user_context.user_id if self.user_context else None
```
## Configuration
### Environment Variables
```bash
# Authentication Strategy
OH_AUTH_STRATEGY=none # Options: none, single_user, multi_user
# Single User Mode Settings
OH_ENABLE_SU_AUTH=false # Enable GitHub OAuth in SU mode
OH_SU_GITHUB_USERNAME=your_username # Restrict access to specific user
OH_GITHUB_CLIENT_ID=your_client_id
OH_GITHUB_CLIENT_SECRET=your_client_secret
# Multi User Mode (custom build extension point)
OH_MU_ADMIN_USERNAME=admin_user
```
### Configuration Modes
#### 1. None Mode (Current Default)
```bash
OH_AUTH_STRATEGY=none
# No additional config needed
```
#### 2. Single User - No Auth
```bash
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=false
```
#### 3. Single User - GitHub Auth
```bash
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=true
OH_SU_GITHUB_USERNAME=your_username
OH_GITHUB_CLIENT_ID=your_client_id
OH_GITHUB_CLIENT_SECRET=your_client_secret
```
## Implementation Benefits
### 1. Clean Separation of Concerns
- Auth logic isolated in strategy classes
- Business logic doesn't need to know about user_id
- Clear boundaries between auth and core functionality
### 2. Reduced Complexity
- Eliminates 7 redundant `if user_id` guards
- Removes provider_tokens dependency injection
- Simplifies method signatures throughout codebase
### 3. Forward Compatibility
- custom builds can extend with custom strategies
- Token refresh/rotation support built-in
- Multi-tenancy ready without core changes
### 4. Security Improvements
- Tokens never exposed in route parameters
- Centralized token management
- Immutable user context prevents tampering
### 5. Developer Experience
- Clear configuration options
- Easy mode switching
- Consistent patterns across codebase
## Migration Strategy
### Phase 1: Foundation
1. Introduce auth strategy interfaces
2. Add UserContext and StorageNamespace
3. Create TokenProvider abstraction
4. Update core dependencies
### Phase 2: Strategy Implementation
1. Implement NoneStrategy (backward compatible)
2. Implement SingleUserStrategy
3. Add configuration support
4. Update UserAuth integration
### Phase 3: Route Migration
1. Update FastAPI dependencies
2. Remove provider_tokens dependency injection
3. Update ProviderHandler integration
4. Clean up redundant if-guards
### Phase 4: Storage Migration
1. Replace storage path helpers
2. Update conversation managers
3. Migrate event stores
4. Clean up legacy code
## Testing Strategy
### Unit Tests
- Strategy implementations
- UserContext immutability
- StorageNamespace path generation
- TokenProvider implementations
### Integration Tests
- End-to-end auth flows
- Route authentication
- Storage partitioning
- Configuration switching
### Migration Tests
- Backward compatibility
- Data migration paths
- Configuration validation
## Future Extensions
### custom builds Integration Points
```python
# custom builds can provide their own strategies
class custom buildsMultiUserStrategy(AuthStrategy):
async def authenticate(self, request: Request) -> Optional[UserContext]:
# Custom custom builds authentication logic
pass
async def get_token_provider(self, request: Request) -> TokenProvider:
# custom builds token refresh/rotation
return CustomBuildTokenProvider(request)
```
### Additional Auth Methods
- SAML/OIDC strategies
- API key authentication
- Custom JWT providers
- Enterprise SSO integration
## Architecture Diagrams
### 1. Overall Auth System Architecture
```mermaid
graph TB
subgraph "FastAPI Application"
Routes[API Routes]
Deps[FastAPI Dependencies]
end
subgraph "Auth Layer"
AuthStrategy[AuthStrategy Interface]
NoneStrategy[NoneStrategy]
SUStrategy[SingleUserStrategy]
MUStrategy[MultiUserStrategy]
end
subgraph "Core Abstractions"
UserContext[UserContext]
TokenProvider[TokenProvider Interface]
StorageNamespace[StorageNamespace]
end
subgraph "Token Providers"
DefaultTP[DefaultTokenProvider]
SingleUserTP[SingleUserTokenProvider]
custom buildsTP[CustomBuildTokenProvider]
end
subgraph "Storage Layer"
SecretsStore[SecretsStore]
SettingsStore[SettingsStore]
ConversationStore[ConversationStore]
end
Routes --> Deps
Deps --> AuthStrategy
AuthStrategy --> UserContext
AuthStrategy --> TokenProvider
UserContext --> StorageNamespace
NoneStrategy --> DefaultTP
SUStrategy --> SingleUserTP
MUStrategy --> custom buildsTP
TokenProvider --> SecretsStore
StorageNamespace --> ConversationStore
StorageNamespace --> SettingsStore
```
### 2. Authentication Flow - None Strategy
```mermaid
sequenceDiagram
participant Client
participant Route
participant NoneStrategy
participant DefaultTP
participant SecretsStore
Client->>Route: API Request
Route->>NoneStrategy: authenticate(request)
NoneStrategy->>Route: None (no user context)
Route->>NoneStrategy: get_token_provider(request)
NoneStrategy->>DefaultTP: create()
DefaultTP->>SecretsStore: load secrets.json
SecretsStore->>DefaultTP: provider tokens
DefaultTP->>Route: token provider
Route->>Client: API Response
```
### 3. Authentication Flow - Single User Strategy (No Auth)
```mermaid
sequenceDiagram
participant Client
participant Route
participant SUStrategy
participant UserContext
participant SingleUserTP
participant SecretsStore
Client->>Route: API Request
Route->>SUStrategy: authenticate(request)
SUStrategy->>UserContext: create virtual user (local)
UserContext->>SUStrategy: user context
SUStrategy->>Route: UserContext(user_id="local")
Route->>SUStrategy: get_token_provider(request)
SUStrategy->>SingleUserTP: create(user_context)
SingleUserTP->>SecretsStore: load user secrets
SecretsStore->>SingleUserTP: provider tokens
SingleUserTP->>Route: token provider
Route->>Client: API Response
```
### 4. Authentication Flow - Single User Strategy (GitHub Auth)
```mermaid
sequenceDiagram
participant Client
participant Route
participant SUStrategy
participant GitHub
participant UserContext
participant SingleUserTP
participant Database
Client->>Route: API Request with JWT cookie
Route->>SUStrategy: authenticate(request)
SUStrategy->>SUStrategy: extract JWT token
SUStrategy->>SUStrategy: validate JWT
SUStrategy->>SUStrategy: check allowed user
SUStrategy->>UserContext: create from JWT data
UserContext->>SUStrategy: user context
SUStrategy->>Route: UserContext
Route->>SUStrategy: get_token_provider(request)
SUStrategy->>SingleUserTP: create(user_context)
SingleUserTP->>Database: load encrypted tokens
Database->>SingleUserTP: encrypted provider tokens
SingleUserTP->>Route: token provider
Route->>Client: API Response
```
### 5. GitHub OAuth Flow - Single User Strategy
```mermaid
sequenceDiagram
participant Client
participant AuthRoute
participant GitHub
participant SUStrategy
participant Database
participant UserContext
Client->>AuthRoute: GET /auth/login
AuthRoute->>Client: GitHub OAuth URL
Client->>GitHub: OAuth authorization
GitHub->>AuthRoute: GET /auth/callback?code=xxx
AuthRoute->>GitHub: exchange code for token
GitHub->>AuthRoute: access token + user info
AuthRoute->>SUStrategy: validate user allowed
SUStrategy->>AuthRoute: user authorized
AuthRoute->>Database: create/update user record
Database->>AuthRoute: user saved
AuthRoute->>AuthRoute: create JWT token
AuthRoute->>Client: Set JWT cookie + redirect
```
### 6. Storage Namespace Architecture
```mermaid
graph TB
subgraph "User Context"
UC[UserContext]
UC --> SN[StorageNamespace]
end
subgraph "Storage Paths"
SN --> ConvDir[get_conversation_dir]
SN --> EventsDir[get_events_dir]
SN --> MetaFile[get_metadata_file]
SN --> StateFile[get_state_file]
end
subgraph "Path Examples"
ConvDir --> NonePath[sessions/sid/]
ConvDir --> UserPath[users/user_id/conversations/sid/]
EventsDir --> NoneEvents[sessions/sid/events/]
EventsDir --> UserEvents[users/user_id/conversations/sid/events/]
end
subgraph "Strategy Impact"
NoneStrategy2[NoneStrategy] --> NonePath
SUStrategy2[SingleUserStrategy] --> UserPath
MUStrategy2[MultiUserStrategy] --> UserPath
end
```
### 7. Token Provider Architecture
```mermaid
graph TB
subgraph "Token Provider Interface"
TP[TokenProvider]
TP --> GetToken[get_token(provider)]
TP --> GetAllTokens[get_all_tokens()]
end
subgraph "Implementations"
DefaultTP2[DefaultTokenProvider]
SingleUserTP2[SingleUserTokenProvider]
custom buildsTP2[CustomBuildTokenProvider]
end
subgraph "Token Sources"
SecretsJSON[secrets.json]
UserDB[User Database]
Custom Build API[custom builds Token API]
end
subgraph "Provider Integration"
ProviderHandler[ProviderHandler]
GitHubService[GitHubService]
GitLabService[GitLabService]
BitBucketService[BitBucketService]
end
DefaultTP2 --> SecretsJSON
SingleUserTP2 --> UserDB
custom buildsTP2 --> Custom Build API
TP --> ProviderHandler
ProviderHandler --> GitHubService
ProviderHandler --> GitLabService
ProviderHandler --> BitBucketService
```
### 8. Configuration-Driven Strategy Selection
```mermaid
graph TB
subgraph "Configuration"
Config[OH_AUTH_STRATEGY]
Config --> None[none]
Config --> SU[single_user]
Config --> MU[multi_user]
end
subgraph "Strategy Factory"
Factory[AuthStrategyFactory]
Factory --> CreateNone[create NoneStrategy]
Factory --> CreateSU[create SingleUserStrategy]
Factory --> CreateMU[create MultiUserStrategy]
end
subgraph "Additional Config"
SUConfig[OH_ENABLE_SU_AUTH<br/>OH_SU_GITHUB_USERNAME<br/>OH_GITHUB_CLIENT_ID]
MUConfig[OH_MU_ADMIN_USERNAME<br/>Database Config]
end
None --> CreateNone
SU --> CreateSU
MU --> CreateMU
CreateSU --> SUConfig
CreateMU --> MUConfig
```
## Conclusion
This AuthSystem design provides OpenHands with a robust, extensible authentication foundation that:
1. **Maintains backward compatibility** with the current "None" mode
2. **Enables Single User mode** with optional GitHub OAuth
3. **Provides extension points** for custom builds with multi-user implementations
4. **Cleans up the codebase** by removing scattered user_id threading
5. **Improves security** by centralizing token management
6. **Simplifies development** with clear abstractions and patterns
The design is ready for implementation and will significantly improve OpenHands' authentication capabilities while maintaining its current simplicity for users who don't need authentication.
@@ -0,0 +1,860 @@
---
title: AuthSystem Design - Complete Specification
---
# OpenHands AuthSystem Design
## Executive Summary
This document proposes a comprehensive AuthSystem design for OpenHands that supports three authentication strategies: **None** (current behavior), **Single User (SU)** with GitHub OAuth, and **Multi User (MU)** (for custom builds). The design introduces clean abstraction boundaries, eliminates scattered `user_id` threading, and provides a foundation for future authentication enhancements.
## Problem Statement
### Current Issues
1. **No Auth Strategy Abstraction**: OpenHands currently has a monolithic `DefaultUserAuth` that always returns `None` for `user_id`, with no clear path to support different authentication modes.
2. **Scattered user_id Threading**: 339+ occurrences of `user_id` across 68 files, with complex threading through:
- Storage partitioning (`users/{user_id}/` paths)
- Conversation/session scoping
- API route dependencies
- Provider token resolution
- Data model fields
3. **Provider Token Pollution**: Routes accept `provider_tokens` parameters and thread them through `ProviderHandler`, creating security risks and complex signatures.
4. **No Single User Support**: No way to enable GitHub OAuth for personal/single-user deployments while maintaining the simplicity of the current "None" mode.
5. **Boundary Violations**: Auth concerns are mixed with business logic throughout the codebase, making it difficult to switch between authentication modes.
### Requirements from GitHub Issues
From **Issue #10751** (user_id audit):
- Support None, SU, and MU modes
- Introduce `UserContext` and `StorageNamespace` abstractions
- Remove redundant `if user_id` guards (7 identified)
- Clean up storage path helpers
From **Issue #10730** (token provider):
- Remove `provider_tokens` dependency injection
- Introduce `TokenProvider` boundary abstraction
- Support backend-only credential resolution
- Enable custom builds with token refresh/rotation patterns
## Solution Architecture
### Core Components
#### 1. AuthStrategy Interface
```python
# openhands/auth/strategies/base.py
from abc import ABC, abstractmethod
from typing import Optional
from fastapi import Request
from openhands.auth.user_context import UserContext
from openhands.auth.token_provider import TokenProvider
class AuthStrategy(ABC):
"""Base class for authentication strategies"""
@abstractmethod
def get_name(self) -> str:
"""Return strategy name for logging/debugging"""
@abstractmethod
def requires_auth(self) -> bool:
"""Whether this strategy requires user authentication"""
@abstractmethod
async def authenticate(self, request: Request) -> Optional[UserContext]:
"""Authenticate request and return UserContext or None"""
@abstractmethod
async def get_token_provider(self, request: Request) -> TokenProvider:
"""Get token provider for this request"""
@abstractmethod
def get_login_url(self) -> Optional[str]:
"""Get login URL for frontend, None if no auth required"""
```
#### 2. UserContext
```python
# openhands/auth/user_context.py
from dataclasses import dataclass
from typing import Optional
from datetime import datetime
@dataclass(frozen=True)
class UserContext:
"""Immutable user context for authenticated requests"""
user_id: str
email: Optional[str] = None
username: Optional[str] = None
github_id: Optional[int] = None
github_username: Optional[str] = None
is_admin: bool = False
created_at: Optional[datetime] = None
last_login: Optional[datetime] = None
@property
def storage_namespace(self) -> str:
"""Get storage namespace for this user"""
return self.user_id
```
#### 3. TokenProvider Interface
```python
# openhands/auth/token_provider.py
from abc import ABC, abstractmethod
from typing import Optional, Mapping
from openhands.integrations.service_types import ProviderType
from openhands.integrations.provider import ProviderToken
class TokenProvider(ABC):
"""Abstract token provider for git integrations"""
@abstractmethod
async def get_token(self, provider: ProviderType) -> Optional[ProviderToken]:
"""Get token for specific provider"""
@abstractmethod
async def get_all_tokens(self) -> Mapping[ProviderType, ProviderToken]:
"""Get all available provider tokens"""
```
#### 4. StorageNamespace
```python
# openhands/auth/storage_namespace.py
from dataclasses import dataclass
from typing import Optional
@dataclass(frozen=True)
class StorageNamespace:
"""Encapsulates storage path logic for user data"""
namespace: Optional[str]
def get_conversation_dir(self, sid: str) -> str:
if self.namespace:
return f'users/{self.namespace}/conversations/{sid}/'
return f'sessions/{sid}/'
def get_conversation_events_dir(self, sid: str) -> str:
return f'{self.get_conversation_dir(sid)}events/'
def get_conversation_metadata_filename(self, sid: str) -> str:
return f'{self.get_conversation_dir(sid)}metadata.json'
# ... other path methods
```
### Authentication Strategies
#### 1. None Strategy (Current Behavior)
```python
# openhands/auth/strategies/none_strategy.py
from typing import Optional
from fastapi import Request
from openhands.auth.strategies.base import AuthStrategy
from openhands.auth.user_context import UserContext
from openhands.auth.token_provider import TokenProvider, DefaultTokenProvider
class NoneStrategy(AuthStrategy):
"""No authentication - current OpenHands behavior"""
def get_name(self) -> str:
return "none"
def requires_auth(self) -> bool:
return False
async def authenticate(self, request: Request) -> Optional[UserContext]:
return None # No user context
async def get_token_provider(self, request: Request) -> TokenProvider:
return DefaultTokenProvider() # Uses secrets.json
def get_login_url(self) -> Optional[str]:
return None
```
#### 2. Single User Strategy
```python
# openhands/auth/strategies/single_user_strategy.py
from typing import Optional
from fastapi import Request, HTTPException
from openhands.auth.strategies.base import AuthStrategy
from openhands.auth.user_context import UserContext
from openhands.auth.token_provider import TokenProvider, SingleUserTokenProvider
from openhands.server.shared import server_config
class SingleUserStrategy(AuthStrategy):
"""Single user with GitHub OAuth"""
def get_name(self) -> str:
return "single_user"
def requires_auth(self) -> bool:
return server_config.enable_su_auth
async def authenticate(self, request: Request) -> Optional[UserContext]:
if not self.requires_auth():
# SU mode without auth - create virtual user
return UserContext(
user_id="local",
username="local_user",
is_admin=True
)
# Extract JWT token from cookie/header
token = self._extract_token(request)
if not token:
return None
# Validate JWT and extract user info
user_data = self._validate_jwt(token)
if not user_data:
return None
# Verify user is allowed (if configured)
if (server_config.su_github_username and
user_data.get('github_username') != server_config.su_github_username):
raise HTTPException(403, "Access denied")
return UserContext(
user_id=user_data['github_username'],
email=user_data.get('email'),
username=user_data['github_username'],
github_id=user_data.get('github_id'),
github_username=user_data['github_username'],
is_admin=True # SU user is always admin
)
async def get_token_provider(self, request: Request) -> TokenProvider:
user_context = await self.authenticate(request)
return SingleUserTokenProvider(user_context)
def get_login_url(self) -> Optional[str]:
if not self.requires_auth():
return None
return f"/api/auth/github/login"
```
#### 3. Multi User Strategy (Custom Build Extension Point)
```python
# openhands/auth/strategies/multi_user_strategy.py
from typing import Optional
from fastapi import Request
from openhands.auth.strategies.base import AuthStrategy
from openhands.auth.user_context import UserContext
from openhands.auth.token_provider import TokenProvider
class MultiUserStrategy(AuthStrategy):
"""Multi-user strategy - extension point for custom builds"""
def get_name(self) -> str:
return "multi_user"
def requires_auth(self) -> bool:
return True
async def authenticate(self, request: Request) -> Optional[UserContext]:
# This would be implemented by custom builds/applications built on OH
raise NotImplementedError("Multi-user strategy not available in base OpenHands")
async def get_token_provider(self, request: Request) -> TokenProvider:
raise NotImplementedError("Multi-user strategy not available in base OpenHands")
def get_login_url(self) -> Optional[str]:
return "/api/auth/login"
```
### Integration Points
#### 1. Updated UserAuth
```python
# openhands/server/user_auth/strategy_user_auth.py
from fastapi import Request
from openhands.auth.strategies.base import AuthStrategy
from openhands.auth.user_context import UserContext
from openhands.auth.storage_namespace import StorageNamespace
from openhands.server.user_auth.user_auth import UserAuth
from openhands.storage.settings.settings_store import SettingsStore
from openhands.storage.secrets.secrets_store import SecretsStore
class StrategyUserAuth(UserAuth):
"""UserAuth implementation using AuthStrategy pattern"""
def __init__(self, strategy: AuthStrategy, user_context: Optional[UserContext]):
self.strategy = strategy
self.user_context = user_context
self._storage_namespace = StorageNamespace(
user_context.storage_namespace if user_context else None
)
async def get_user_id(self) -> str | None:
return self.user_context.user_id if self.user_context else None
async def get_user_email(self) -> str | None:
return self.user_context.email if self.user_context else None
# ... other methods using storage_namespace
```
#### 2. FastAPI Dependencies
```python
# openhands/server/dependencies/auth.py
from fastapi import Depends, Request
from openhands.auth.strategies.base import AuthStrategy
from openhands.auth.user_context import UserContext
from openhands.auth.token_provider import TokenProvider
from openhands.server.shared import get_auth_strategy
async def get_current_user(
request: Request,
strategy: AuthStrategy = Depends(get_auth_strategy)
) -> Optional[UserContext]:
"""Get current user context"""
return await strategy.authenticate(request)
async def get_token_provider(
request: Request,
strategy: AuthStrategy = Depends(get_auth_strategy)
) -> TokenProvider:
"""Get token provider for current request"""
return await strategy.get_token_provider(request)
async def require_auth(
user: Optional[UserContext] = Depends(get_current_user)
) -> UserContext:
"""Require authentication"""
if not user:
raise HTTPException(401, "Authentication required")
return user
```
#### 3. Updated Routes
```python
# openhands/server/routes/git.py (AFTER)
from fastapi import APIRouter, Depends
from openhands.auth.token_provider import TokenProvider
from openhands.auth.user_context import UserContext
from openhands.server.dependencies.auth import get_token_provider, get_current_user
from openhands.integrations.provider import ProviderHandler
app = APIRouter(prefix='/api/user')
@app.get('/repositories')
async def get_user_repositories(
sort: str = "pushed",
selected_provider: ProviderType | None = None,
token_provider: TokenProvider = Depends(get_token_provider),
user: Optional[UserContext] = Depends(get_current_user)
):
"""Get user repositories - no provider_tokens parameter!"""
client = ProviderHandler(token_provider=token_provider)
return await client.get_repositories(sort, selected_provider)
```
## Before/After Code Comparison
### Before: Current Implementation
```python
# BEFORE: openhands/server/routes/git.py
@app.get('/repositories', response_model=list[Repository])
async def get_user_repositories(
sort: str = Query(default='pushed'),
selected_provider: ProviderType | None = Query(default=None),
page: int | None = Query(default=None),
per_page: int | None = Query(default=None),
installation_id: str | None = Query(default=None),
provider_tokens: PROVIDER_TOKEN_TYPE | None = Depends(get_provider_tokens),
access_token: SecretStr | None = Depends(get_access_token),
user_id: str | None = Depends(get_user_id),
):
if provider_tokens:
client = ProviderHandler(
provider_tokens=provider_tokens,
external_auth_token=access_token,
external_auth_id=user_id,
)
# ... complex logic
```
```python
# BEFORE: openhands/storage/locations.py
def get_conversation_dir(sid: str, user_id: str | None = None) -> str:
if user_id:
return f'users/{user_id}/conversations/{sid}/'
else:
return f'sessions/{sid}/'
```
```python
# BEFORE: openhands/server/user_auth/default_user_auth.py
class DefaultUserAuth(UserAuth):
async def get_user_id(self) -> str | None:
return None # Always None - no multi-tenancy support
async def get_provider_tokens(self) -> PROVIDER_TOKEN_TYPE | None:
user_secrets = await self.get_user_secrets()
if user_secrets is None:
return None
return user_secrets.provider_tokens
```
### After: Proposed Implementation
```python
# AFTER: openhands/server/routes/git.py
@app.get('/repositories', response_model=list[Repository])
async def get_user_repositories(
sort: str = Query(default='pushed'),
selected_provider: ProviderType | None = Query(default=None),
page: int | None = Query(default=None),
per_page: int | None = Query(default=None),
installation_id: str | None = Query(default=None),
token_provider: TokenProvider = Depends(get_token_provider),
user: Optional[UserContext] = Depends(get_current_user),
):
client = ProviderHandler(token_provider=token_provider)
return await client.get_repositories(
sort, server_config.app_mode, selected_provider, page, per_page, installation_id
)
```
```python
# AFTER: openhands/auth/storage_namespace.py
@dataclass(frozen=True)
class StorageNamespace:
namespace: Optional[str]
def get_conversation_dir(self, sid: str) -> str:
if self.namespace:
return f'users/{self.namespace}/conversations/{sid}/'
return f'sessions/{sid}/'
```
```python
# AFTER: openhands/server/user_auth/strategy_user_auth.py
class StrategyUserAuth(UserAuth):
def __init__(self, strategy: AuthStrategy, user_context: Optional[UserContext]):
self.strategy = strategy
self.user_context = user_context
self.storage_namespace = StorageNamespace(
user_context.storage_namespace if user_context else None
)
async def get_user_id(self) -> str | None:
return self.user_context.user_id if self.user_context else None
```
## Configuration
### Environment Variables
```bash
# Authentication Strategy
OH_AUTH_STRATEGY=none # Options: none, single_user, multi_user
# Single User Mode Settings
OH_ENABLE_SU_AUTH=false # Enable GitHub OAuth in SU mode
OH_SU_GITHUB_USERNAME=your_username # Restrict access to specific user
OH_GITHUB_CLIENT_ID=your_client_id
OH_GITHUB_CLIENT_SECRET=your_client_secret
# Multi User Mode (custom build extension point)
OH_MU_ADMIN_USERNAME=admin_user
```
### Configuration Modes
#### 1. None Mode (Current Default)
```bash
OH_AUTH_STRATEGY=none
# No additional config needed
```
#### 2. Single User - No Auth
```bash
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=false
```
#### 3. Single User - GitHub Auth
```bash
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=true
OH_SU_GITHUB_USERNAME=your_username
OH_GITHUB_CLIENT_ID=your_client_id
OH_GITHUB_CLIENT_SECRET=your_client_secret
```
## Implementation Benefits
### 1. Clean Separation of Concerns
- Auth logic isolated in strategy classes
- Business logic doesn't need to know about user_id
- Clear boundaries between auth and core functionality
### 2. Reduced Complexity
- Eliminates 7 redundant `if user_id` guards
- Removes provider_tokens dependency injection
- Simplifies method signatures throughout codebase
### 3. Forward Compatibility
- custom builds can extend with custom strategies
- Token refresh/rotation support built-in
- Multi-tenancy ready without core changes
### 4. Security Improvements
- Tokens never exposed in route parameters
- Centralized token management
- Immutable user context prevents tampering
### 5. Developer Experience
- Clear configuration options
- Easy mode switching
- Consistent patterns across codebase
## Migration Strategy
### Phase 1: Foundation
1. Introduce auth strategy interfaces
2. Add UserContext and StorageNamespace
3. Create TokenProvider abstraction
4. Update core dependencies
### Phase 2: Strategy Implementation
1. Implement NoneStrategy (backward compatible)
2. Implement SingleUserStrategy
3. Add configuration support
4. Update UserAuth integration
### Phase 3: Route Migration
1. Update FastAPI dependencies
2. Remove provider_tokens dependency injection
3. Update ProviderHandler integration
4. Clean up redundant if-guards
### Phase 4: Storage Migration
1. Replace storage path helpers
2. Update conversation managers
3. Migrate event stores
4. Clean up legacy code
## Testing Strategy
### Unit Tests
- Strategy implementations
- UserContext immutability
- StorageNamespace path generation
- TokenProvider implementations
### Integration Tests
- End-to-end auth flows
- Route authentication
- Storage partitioning
- Configuration switching
### Migration Tests
- Backward compatibility
- Data migration paths
- Configuration validation
## Future Extensions
### custom builds Integration Points
```python
# custom builds can provide their own strategies
class custom buildsMultiUserStrategy(AuthStrategy):
async def authenticate(self, request: Request) -> Optional[UserContext]:
# Custom custom builds authentication logic
pass
async def get_token_provider(self, request: Request) -> TokenProvider:
# custom builds token refresh/rotation
return CustomBuildTokenProvider(request)
```
### Additional Auth Methods
- SAML/OIDC strategies
- API key authentication
- Custom JWT providers
- Enterprise SSO integration
## Architecture Diagrams
### 1. Overall Auth System Architecture
```mermaid
graph TB
subgraph "FastAPI Application"
Routes[API Routes]
Deps[FastAPI Dependencies]
end
subgraph "Auth Layer"
AuthStrategy[AuthStrategy Interface]
NoneStrategy[NoneStrategy]
SUStrategy[SingleUserStrategy]
MUStrategy[MultiUserStrategy]
end
subgraph "Core Abstractions"
UserContext[UserContext]
TokenProvider[TokenProvider Interface]
StorageNamespace[StorageNamespace]
end
subgraph "Token Providers"
DefaultTP[DefaultTokenProvider]
SingleUserTP[SingleUserTokenProvider]
custom buildsTP[CustomBuildTokenProvider]
end
subgraph "Storage Layer"
SecretsStore[SecretsStore]
SettingsStore[SettingsStore]
ConversationStore[ConversationStore]
end
Routes --> Deps
Deps --> AuthStrategy
AuthStrategy --> UserContext
AuthStrategy --> TokenProvider
UserContext --> StorageNamespace
NoneStrategy --> DefaultTP
SUStrategy --> SingleUserTP
MUStrategy --> custom buildsTP
TokenProvider --> SecretsStore
StorageNamespace --> ConversationStore
StorageNamespace --> SettingsStore
```
### 2. Authentication Flow - None Strategy
```mermaid
sequenceDiagram
participant Client
participant Route
participant NoneStrategy
participant DefaultTP
participant SecretsStore
Client->>Route: API Request
Route->>NoneStrategy: authenticate(request)
NoneStrategy->>Route: None (no user context)
Route->>NoneStrategy: get_token_provider(request)
NoneStrategy->>DefaultTP: create()
DefaultTP->>SecretsStore: load secrets.json
SecretsStore->>DefaultTP: provider tokens
DefaultTP->>Route: token provider
Route->>Client: API Response
```
### 3. Authentication Flow - Single User Strategy (No Auth)
```mermaid
sequenceDiagram
participant Client
participant Route
participant SUStrategy
participant UserContext
participant SingleUserTP
participant SecretsStore
Client->>Route: API Request
Route->>SUStrategy: authenticate(request)
SUStrategy->>UserContext: create virtual user (local)
UserContext->>SUStrategy: user context
SUStrategy->>Route: UserContext(user_id="local")
Route->>SUStrategy: get_token_provider(request)
SUStrategy->>SingleUserTP: create(user_context)
SingleUserTP->>SecretsStore: load user secrets
SecretsStore->>SingleUserTP: provider tokens
SingleUserTP->>Route: token provider
Route->>Client: API Response
```
### 4. Authentication Flow - Single User Strategy (GitHub Auth)
```mermaid
sequenceDiagram
participant Client
participant Route
participant SUStrategy
participant GitHub
participant UserContext
participant SingleUserTP
participant Database
Client->>Route: API Request with JWT cookie
Route->>SUStrategy: authenticate(request)
SUStrategy->>SUStrategy: extract JWT token
SUStrategy->>SUStrategy: validate JWT
SUStrategy->>SUStrategy: check allowed user
SUStrategy->>UserContext: create from JWT data
UserContext->>SUStrategy: user context
SUStrategy->>Route: UserContext
Route->>SUStrategy: get_token_provider(request)
SUStrategy->>SingleUserTP: create(user_context)
SingleUserTP->>Database: load encrypted tokens
Database->>SingleUserTP: encrypted provider tokens
SingleUserTP->>Route: token provider
Route->>Client: API Response
```
### 5. GitHub OAuth Flow - Single User Strategy
```mermaid
sequenceDiagram
participant Client
participant AuthRoute
participant GitHub
participant SUStrategy
participant Database
participant UserContext
Client->>AuthRoute: GET /auth/login
AuthRoute->>Client: GitHub OAuth URL
Client->>GitHub: OAuth authorization
GitHub->>AuthRoute: GET /auth/callback?code=xxx
AuthRoute->>GitHub: exchange code for token
GitHub->>AuthRoute: access token + user info
AuthRoute->>SUStrategy: validate user allowed
SUStrategy->>AuthRoute: user authorized
AuthRoute->>Database: create/update user record
Database->>AuthRoute: user saved
AuthRoute->>AuthRoute: create JWT token
AuthRoute->>Client: Set JWT cookie + redirect
```
### 6. Storage Namespace Architecture
```mermaid
graph TB
subgraph "User Context"
UC[UserContext]
UC --> SN[StorageNamespace]
end
subgraph "Storage Paths"
SN --> ConvDir[get_conversation_dir]
SN --> EventsDir[get_events_dir]
SN --> MetaFile[get_metadata_file]
SN --> StateFile[get_state_file]
end
subgraph "Path Examples"
ConvDir --> NonePath[sessions/sid/]
ConvDir --> UserPath[users/user_id/conversations/sid/]
EventsDir --> NoneEvents[sessions/sid/events/]
EventsDir --> UserEvents[users/user_id/conversations/sid/events/]
end
subgraph "Strategy Impact"
NoneStrategy2[NoneStrategy] --> NonePath
SUStrategy2[SingleUserStrategy] --> UserPath
MUStrategy2[MultiUserStrategy] --> UserPath
end
```
### 7. Token Provider Architecture
```mermaid
graph TB
subgraph "Token Provider Interface"
TP[TokenProvider]
TP --> GetToken[get_token(provider)]
TP --> GetAllTokens[get_all_tokens()]
end
subgraph "Implementations"
DefaultTP2[DefaultTokenProvider]
SingleUserTP2[SingleUserTokenProvider]
custom buildsTP2[CustomBuildTokenProvider]
end
subgraph "Token Sources"
SecretsJSON[secrets.json]
UserDB[User Database]
Custom Build API[custom builds Token API]
end
subgraph "Provider Integration"
ProviderHandler[ProviderHandler]
GitHubService[GitHubService]
GitLabService[GitLabService]
BitBucketService[BitBucketService]
end
DefaultTP2 --> SecretsJSON
SingleUserTP2 --> UserDB
custom buildsTP2 --> Custom Build API
TP --> ProviderHandler
ProviderHandler --> GitHubService
ProviderHandler --> GitLabService
ProviderHandler --> BitBucketService
```
### 8. Configuration-Driven Strategy Selection
```mermaid
graph TB
subgraph "Configuration"
Config[OH_AUTH_STRATEGY]
Config --> None[none]
Config --> SU[single_user]
Config --> MU[multi_user]
end
subgraph "Strategy Factory"
Factory[AuthStrategyFactory]
Factory --> CreateNone[create NoneStrategy]
Factory --> CreateSU[create SingleUserStrategy]
Factory --> CreateMU[create MultiUserStrategy]
end
subgraph "Additional Config"
SUConfig[OH_ENABLE_SU_AUTH<br/>OH_SU_GITHUB_USERNAME<br/>OH_GITHUB_CLIENT_ID]
MUConfig[OH_MU_ADMIN_USERNAME<br/>Database Config]
end
None --> CreateNone
SU --> CreateSU
MU --> CreateMU
CreateSU --> SUConfig
CreateMU --> MUConfig
```
## Conclusion
This AuthSystem design provides OpenHands with a robust, extensible authentication foundation that:
1. **Maintains backward compatibility** with the current "None" mode
2. **Enables Single User mode** with optional GitHub OAuth
3. **Provides extension points** for custom builds with multi-user implementations
4. **Cleans up the codebase** by removing scattered user_id threading
5. **Improves security** by centralizing token management
6. **Simplifies development** with clear abstractions and patterns
The design is ready for implementation and will significantly improve OpenHands' authentication capabilities while maintaining its current simplicity for users who don't need authentication.
@@ -0,0 +1,210 @@
# OpenHands AuthSystem Design - Executive Summary
## Goal
Design a flexible authentication system for OpenHands that supports three strategies:
- **None**: Current behavior (no auth, optional GitHub token)
- **SU (Single User)**: GitHub OAuth for personal use
- **MU (Multi User)**: Extension point for custom builds (not in base OH)
## Current Problems
- 339+ `user_id` occurrences scattered across 68 files
- No auth strategy abstraction
- `provider_tokens` dependency injection complexity
- No single-user GitHub OAuth support
- Mixed auth/business logic concerns
## Solution Architecture
### Core Components
1. **AuthStrategy Interface** - Pluggable auth strategies
2. **UserContext** - Immutable user data container
3. **TokenProvider** - Centralized token management
4. **StorageNamespace** - Clean storage path abstraction
### Auth Strategies
```python
# None Strategy (current behavior)
OH_AUTH_STRATEGY=none
# Single User - No Auth (virtual user)
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=false
# Single User - GitHub OAuth
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=true
OH_SU_GITHUB_USERNAME=your_username
OH_GITHUB_CLIENT_ID=your_client_id
OH_GITHUB_CLIENT_SECRET=your_client_secret
```
## 🔄 Key Changes
### Before (Current)
```python
# Route with complex dependencies
async def get_repositories(
provider_tokens: PROVIDER_TOKEN_TYPE = Depends(get_provider_tokens),
user_id: str | None = Depends(get_user_id),
):
client = ProviderHandler(
provider_tokens=provider_tokens,
external_auth_id=user_id,
)
# Scattered path logic
def get_conversation_dir(sid: str, user_id: str | None = None) -> str:
if user_id:
return f'users/{user_id}/conversations/{sid}/'
else:
return f'sessions/{sid}/'
```
### After (Proposed)
```python
# Clean route signature
async def get_repositories(
token_provider: TokenProvider = Depends(get_token_provider),
user: Optional[UserContext] = Depends(get_current_user),
):
client = ProviderHandler(token_provider=token_provider)
# Encapsulated storage logic
@dataclass(frozen=True)
class StorageNamespace:
namespace: Optional[str]
def get_conversation_dir(self, sid: str) -> str:
if self.namespace:
return f'users/{self.namespace}/conversations/{sid}/'
return f'sessions/{sid}/'
```
## Architectural Benefits
### Codebase Cleanup
- Removes 7 redundant `if user_id` guards across the codebase
- Eliminates `provider_tokens` dependency injection complexity
- Reduces method signature complexity throughout the system
- Centralizes storage path logic in dedicated abstractions
### Extensibility
- Strategy pattern enables custom build extension points
- Token refresh/rotation patterns built-in
- Multi-tenancy ready without core changes
- Additional auth methods can be added without refactoring
### Code Organization
- Clear separation of auth and business logic
- Consistent patterns across all authentication modes
- Centralized token and credential management
- Immutable user context prevents state corruption
## Implementation Plan
### Phase 1: Foundation
- [ ] Auth strategy interfaces
- [ ] UserContext & StorageNamespace
- [ ] TokenProvider abstraction
- [ ] Core dependencies
### Phase 2: Strategies
- [ ] NoneStrategy (backward compatible)
- [ ] SingleUserStrategy
- [ ] Configuration support
- [ ] UserAuth integration
### Phase 3: Routes
- [ ] Update FastAPI dependencies
- [ ] Remove provider_tokens
- [ ] Update ProviderHandler
- [ ] Clean redundant guards
### Phase 4: Storage
- [ ] Replace path helpers
- [ ] Update conversation managers
- [ ] Migrate event stores
- [ ] Legacy cleanup
## Architecture Highlights
### Strategy Pattern
```python
class AuthStrategy(ABC):
@abstractmethod
async def authenticate(self, request: Request) -> Optional[UserContext]:
pass
@abstractmethod
async def get_token_provider(self, request: Request) -> TokenProvider:
pass
```
### Immutable User Context
```python
@dataclass(frozen=True)
class UserContext:
user_id: str
email: Optional[str] = None
username: Optional[str] = None
is_admin: bool = False
```
### Token Provider Interface
```python
class TokenProvider(ABC):
@abstractmethod
async def get_token(self, provider: ProviderType) -> Optional[ProviderToken]:
pass
```
## 🔧 Configuration Examples
### Current Default (None)
```bash
# No configuration needed - maintains current behavior
```
### Personal Use (SU without auth)
```bash
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=false
# Creates virtual "local" user, uses secrets.json
```
### Personal Use (SU with GitHub)
```bash
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=true
OH_SU_GITHUB_USERNAME=myusername
OH_GITHUB_CLIENT_ID=abc123
OH_GITHUB_CLIENT_SECRET=secret456
# Requires GitHub OAuth, restricts to specific user
```
## Implementation Readiness
### Backward Compatibility
- None strategy maintains exact current behavior
- No breaking changes for existing users
- Gradual migration path available
### Code Quality Improvements
- Reduces complexity from 339 to ~50 user_id references
- Introduces clear abstractions and boundaries
- Enables better testing and maintainability
### Extensibility Foundation
- Custom builds can add authentication strategies
- Token refresh/rotation patterns built-in
- Multi-tenancy foundation without core changes
## Summary
This design provides a clean authentication architecture for OpenHands with three key outcomes:
1. **Maintains simplicity** - Current users see no changes
2. **Enables extension** - Custom builds can add authentication features
3. **Improves codebase** - Reduces scattered auth logic and complexity
The architecture is well-defined with a clear migration path.
@@ -0,0 +1,214 @@
---
title: AuthSystem Design - Executive Summary
---
# OpenHands AuthSystem Design - Executive Summary
## Goal
Design a flexible authentication system for OpenHands that supports three strategies:
- **None**: Current behavior (no auth, optional GitHub token)
- **SU (Single User)**: GitHub OAuth for personal use
- **MU (Multi User)**: Extension point for custom builds (not in base OH)
## Current Problems
- 339+ `user_id` occurrences scattered across 68 files
- No auth strategy abstraction
- `provider_tokens` dependency injection complexity
- No single-user GitHub OAuth support
- Mixed auth/business logic concerns
## Solution Architecture
### Core Components
1. **AuthStrategy Interface** - Pluggable auth strategies
2. **UserContext** - Immutable user data container
3. **TokenProvider** - Centralized token management
4. **StorageNamespace** - Clean storage path abstraction
### Auth Strategies
```python
# None Strategy (current behavior)
OH_AUTH_STRATEGY=none
# Single User - No Auth (virtual user)
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=false
# Single User - GitHub OAuth
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=true
OH_SU_GITHUB_USERNAME=your_username
OH_GITHUB_CLIENT_ID=your_client_id
OH_GITHUB_CLIENT_SECRET=your_client_secret
```
## 🔄 Key Changes
### Before (Current)
```python
# Route with complex dependencies
async def get_repositories(
provider_tokens: PROVIDER_TOKEN_TYPE = Depends(get_provider_tokens),
user_id: str | None = Depends(get_user_id),
):
client = ProviderHandler(
provider_tokens=provider_tokens,
external_auth_id=user_id,
)
# Scattered path logic
def get_conversation_dir(sid: str, user_id: str | None = None) -> str:
if user_id:
return f'users/{user_id}/conversations/{sid}/'
else:
return f'sessions/{sid}/'
```
### After (Proposed)
```python
# Clean route signature
async def get_repositories(
token_provider: TokenProvider = Depends(get_token_provider),
user: Optional[UserContext] = Depends(get_current_user),
):
client = ProviderHandler(token_provider=token_provider)
# Encapsulated storage logic
@dataclass(frozen=True)
class StorageNamespace:
namespace: Optional[str]
def get_conversation_dir(self, sid: str) -> str:
if self.namespace:
return f'users/{self.namespace}/conversations/{sid}/'
return f'sessions/{sid}/'
```
## Architectural Benefits
### Codebase Cleanup
- Removes 7 redundant `if user_id` guards across the codebase
- Eliminates `provider_tokens` dependency injection complexity
- Reduces method signature complexity throughout the system
- Centralizes storage path logic in dedicated abstractions
### Extensibility
- Strategy pattern enables custom build extension points
- Token refresh/rotation patterns built-in
- Multi-tenancy ready without core changes
- Additional auth methods can be added without refactoring
### Code Organization
- Clear separation of auth and business logic
- Consistent patterns across all authentication modes
- Centralized token and credential management
- Immutable user context prevents state corruption
## Implementation Plan
### Phase 1: Foundation
- [ ] Auth strategy interfaces
- [ ] UserContext & StorageNamespace
- [ ] TokenProvider abstraction
- [ ] Core dependencies
### Phase 2: Strategies
- [ ] NoneStrategy (backward compatible)
- [ ] SingleUserStrategy
- [ ] Configuration support
- [ ] UserAuth integration
### Phase 3: Routes
- [ ] Update FastAPI dependencies
- [ ] Remove provider_tokens
- [ ] Update ProviderHandler
- [ ] Clean redundant guards
### Phase 4: Storage
- [ ] Replace path helpers
- [ ] Update conversation managers
- [ ] Migrate event stores
- [ ] Legacy cleanup
## Architecture Highlights
### Strategy Pattern
```python
class AuthStrategy(ABC):
@abstractmethod
async def authenticate(self, request: Request) -> Optional[UserContext]:
pass
@abstractmethod
async def get_token_provider(self, request: Request) -> TokenProvider:
pass
```
### Immutable User Context
```python
@dataclass(frozen=True)
class UserContext:
user_id: str
email: Optional[str] = None
username: Optional[str] = None
is_admin: bool = False
```
### Token Provider Interface
```python
class TokenProvider(ABC):
@abstractmethod
async def get_token(self, provider: ProviderType) -> Optional[ProviderToken]:
pass
```
## 🔧 Configuration Examples
### Current Default (None)
```bash
# No configuration needed - maintains current behavior
```
### Personal Use (SU without auth)
```bash
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=false
# Creates virtual "local" user, uses secrets.json
```
### Personal Use (SU with GitHub)
```bash
OH_AUTH_STRATEGY=single_user
OH_ENABLE_SU_AUTH=true
OH_SU_GITHUB_USERNAME=myusername
OH_GITHUB_CLIENT_ID=abc123
OH_GITHUB_CLIENT_SECRET=secret456
# Requires GitHub OAuth, restricts to specific user
```
## Implementation Readiness
### Backward Compatibility
- None strategy maintains exact current behavior
- No breaking changes for existing users
- Gradual migration path available
### Code Quality Improvements
- Reduces complexity from 339 to ~50 user_id references
- Introduces clear abstractions and boundaries
- Enables better testing and maintainability
### Extensibility Foundation
- Custom builds can add authentication strategies
- Token refresh/rotation patterns built-in
- Multi-tenancy foundation without core changes
## Summary
This design provides a clean authentication architecture for OpenHands with three key outcomes:
1. **Maintains simplicity** - Current users see no changes
2. **Enables extension** - Custom builds can add authentication features
3. **Improves codebase** - Reduces scattered auth logic and complexity
The architecture is well-defined with a clear migration path.
@@ -1,5 +1,5 @@
---
title: Jira Data Center Integration (Beta)
title: Jira Data Center Integration (Coming soon...)
description: Complete guide for setting up Jira Data Center integration with OpenHands Cloud, including service account creation, personal access token generation, webhook configuration, and workspace integration setup.
---
@@ -1,5 +1,5 @@
---
title: Jira Cloud Integration
title: Jira Cloud Integration (Coming soon...)
description: Complete guide for setting up Jira Cloud integration with OpenHands Cloud, including service account creation, API token generation, webhook configuration, and workspace integration setup.
---
@@ -1,5 +1,5 @@
---
title: Linear Integration
title: Linear Integration (Coming soon...)
description: Complete guide for setting up Linear integration with OpenHands Cloud, including service account creation, API key generation, webhook configuration, and workspace integration setup.
---
@@ -1,5 +1,5 @@
---
title: Project Management Tool Integrations
title: Project Management Tool Integrations (Coming soon...)
description: Overview of OpenHands Cloud integrations with project management platforms including Jira Cloud, Jira Data Center, and Linear. Learn about setup requirements, usage methods, and troubleshooting.
---
@@ -18,9 +18,9 @@ Integration requires two levels of setup:
2. **Workspace Integration** - Self-service configuration through the OpenHands Cloud UI to link your OpenHands account to the target workspace
### Platform-Specific Setup Guides:
- [Jira Cloud Integration](./jira-integration.md)
- [Jira Data Center Integration](./jira-dc-integration.md)
- [Linear Integration](./linear-integration.md)
- [Jira Cloud Integration (Coming soon...)](./jira-integration.md)
- [Jira Data Center Integration (Coming soon...)](./jira-dc-integration.md)
- [Linear Integration (Coming soon...)](./linear-integration.md)
## Usage
+52
View File
@@ -0,0 +1,52 @@
# Confirmation Mode and Security Analyzers
OpenHands provides a security framework to help protect users from potentially risky actions through **Confirmation Mode** and **Security Analyzers**. This system analyzes agent actions and prompts users for confirmation when high-risk operations are detected.
## Overview
The security system consists of two main components:
1. **Confirmation Mode**: When enabled, the agent will pause and ask for user confirmation before executing actions that are flagged as high-risk by the security analyzer.
2. **Security Analyzers**: These are modules that evaluate the risk level of agent actions and determine whether user confirmation is required.
## Configuration
### CLI
In CLI mode, confirmation is enabled by default. You will have an option to uses the LLM Analyzer and will automatically confirm LOW and MEDIUM risk actions, only prompting for HIGH risk actions.
## Security Analyzers
OpenHands includes multiple analyzers:
- **No Analyzer**: Do not use any security analyzer. The agent will prompt you to confirm *EVERY* action.
- **LLM Risk Analyzer** (default): Uses the same LLM as the agent to assess action risk levels
- **Invariant Analyzer**: Uses Invariant Labs' policy engine to evaluate action traces against security policies
### LLM Risk Analyzer
The default analyzer that leverages the agent's LLM to evaluate the security risk of each action. It considers the action type, parameters, and context to assign risk levels.
### Invariant Analyzer
An advanced analyzer that:
- Collects conversation events and parses them into a trace
- Checks the trace against an Invariant policy to classify risk (low, medium, high)
- Manages an Invariant server container automatically if needed
- Supports optional browsing-alignment and harmful-content checks
## How It Works
1. **Action Analysis**: When the agent wants to perform an action, the selected security analyzer evaluates its risk level.
2. **Risk Assessment**: The analyzer returns one of three risk levels:
- **LOW**: Action proceeds without confirmation
- **MEDIUM**: Action proceeds without confirmation (may be configurable in future)
- **HIGH**: Action is paused, and user confirmation is requested
3. **User Confirmation**: For high-risk actions, a confirmation dialog appears with:
- Description of the action
- Risk assessment explanation
- Options to approve or deny action
4. **Action Execution**: Based on user response:
- **Approve**: Action proceeds as planned
- **Deny**: Action is cancelled
+3 -9
View File
@@ -87,19 +87,13 @@ source ~/.bashrc # or source ~/.zshrc
</AccordionGroup>
3. Launch an interactive OpenHands conversation from the command line:
```bash
# If using uvx (recommended)
uvx --python 3.12 --from openhands-ai openhands
```
<Note>
If you have cloned the repository, you can also run the CLI directly using Poetry:
poetry run openhands
</Note>
4. Set your model, API key, and other preferences using the UI (or alternatively environment variables, below).
3. Set your model, API key, and other preferences using the UI (or alternatively environment variables, below).
This command opens an interactive prompt where you can type tasks or commands and get responses from OpenHands.
The first time you run the CLI, it will take you through configuring the required LLM
@@ -119,7 +113,7 @@ The conversation history will be saved in `~/.openhands/sessions`.
```bash
docker run -it \
--pull=always \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik \
-e SANDBOX_USER_ID=$(id -u) \
-e SANDBOX_VOLUMES=$SANDBOX_VOLUMES \
-e LLM_API_KEY=$LLM_API_KEY \
@@ -128,7 +122,7 @@ docker run -it \
-v ~/.openhands:/.openhands \
--add-host host.docker.internal:host-gateway \
--name openhands-app-$(date +%Y%m%d%H%M%S) \
docker.all-hands.dev/all-hands-ai/openhands:0.54 \
docker.all-hands.dev/all-hands-ai/openhands:0.55 \
python -m openhands.cli.entry --override-cli-mode true
```
+2 -2
View File
@@ -61,7 +61,7 @@ export GITHUB_TOKEN="your-token" # Required for repository operations
# Run OpenHands
docker run -it \
--pull=always \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik \
-e SANDBOX_USER_ID=$(id -u) \
-e SANDBOX_VOLUMES=$SANDBOX_VOLUMES \
-e LLM_API_KEY=$LLM_API_KEY \
@@ -73,7 +73,7 @@ docker run -it \
-v ~/.openhands:/.openhands \
--add-host host.docker.internal:host-gateway \
--name openhands-app-$(date +%Y%m%d%H%M%S) \
docker.all-hands.dev/all-hands-ai/openhands:0.54 \
docker.all-hands.dev/all-hands-ai/openhands:0.55 \
python -m openhands.core.main -t "write a bash script that prints hi"
```
+4 -4
View File
@@ -68,23 +68,23 @@ Download and install the LM Studio desktop app from [lmstudio.ai](https://lmstud
1. Check [the installation guide](/usage/local-setup) and ensure all prerequisites are met before running OpenHands, then run:
```bash
docker pull docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik
docker pull docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik
docker run -it --rm --pull=always \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik \
-e LOG_ALL_EVENTS=true \
-v /var/run/docker.sock:/var/run/docker.sock \
-v ~/.openhands:/.openhands \
-p 3000:3000 \
--add-host host.docker.internal:host-gateway \
--name openhands-app \
docker.all-hands.dev/all-hands-ai/openhands:0.54
docker.all-hands.dev/all-hands-ai/openhands:0.55
```
2. Wait until the server is running (see log below):
```
Digest: sha256:e72f9baecb458aedb9afc2cd5bc935118d1868719e55d50da73190d3a85c674f
Status: Image is up to date for docker.all-hands.dev/all-hands-ai/openhands:0.54
Status: Image is up to date for docker.all-hands.dev/all-hands-ai/openhands:0.55
Starting OpenHands...
Running OpenHands as root
14:22:13 - openhands:INFO: server_config.py:50 - Using config class None
+11 -4
View File
@@ -45,6 +45,13 @@ A system with a modern processor and a minimum of **4GB RAM** is recommended to
1. [Install WSL](https://learn.microsoft.com/en-us/windows/wsl/install).
2. Run `wsl --version` in powershell and confirm `Default Version: 2`.
**Ubuntu (Linux Distribution)**
1. Install Ubuntu: `wsl --install -d Ubuntu` in PowerShell as Administrator.
2. Restart computer when prompted.
3. Open Ubuntu from Start menu to complete setup.
4. Verify installation: `wsl --list` should show Ubuntu.
**Docker Desktop**
1. [Install Docker Desktop on Windows](https://docs.docker.com/desktop/setup/install/windows-install).
@@ -53,7 +60,7 @@ A system with a modern processor and a minimum of **4GB RAM** is recommended to
- Resources > WSL Integration: `Enable integration with my default WSL distro` is enabled.
<Note>
The docker command below to start the app must be run inside the WSL terminal.
The docker command below to start the app must be run inside the WSL terminal. Use `wsl -d Ubuntu` in PowerShell or search "Ubuntu" in the Start menu to access the Ubuntu terminal.
</Note>
**Alternative: Windows without WSL**
@@ -109,17 +116,17 @@ Note that you'll still need `uv` installed for the default MCP servers to work p
<Accordion title="Docker Command (Click to expand)">
```bash
docker pull docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik
docker pull docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik
docker run -it --rm --pull=always \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.54-nikolaik \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.55-nikolaik \
-e LOG_ALL_EVENTS=true \
-v /var/run/docker.sock:/var/run/docker.sock \
-v ~/.openhands:/.openhands \
-p 3000:3000 \
--add-host host.docker.internal:host-gateway \
--name openhands-app \
docker.all-hands.dev/all-hands-ai/openhands:0.54
docker.all-hands.dev/all-hands-ai/openhands:0.55
```
</Accordion>
+1 -1
View File
@@ -22,7 +22,7 @@ SDK to spawn and control these sandboxes.
You can use the E2B CLI to create a custom sandbox with a Dockerfile. Read the full guide
[here](https://e2b.dev/docs/guide/custom-sandbox). The premade OpenHands sandbox for E2B is set up in the `containers`
directory. and it's called `openhands`.
directory, and it's called `openhands`.
## Debugging
@@ -38,6 +38,23 @@ On initial prompt, an error is seen with `Permission Denied` or `PermissionError
* If mounting a local directory, ensure your `WORKSPACE_BASE` has the necessary permissions for the user running
OpenHands.
### On Linux, Getting ConnectTimeout Error
**Description**
When running on Linux, you might run into the error `ERROR:root:<class 'httpx.ConnectTimeout'>: timed out`.
**Resolution**
If you installed Docker from your distributions package repository (e.g., docker.io on Debian/Ubuntu), be aware that
these packages can sometimes be outdated or include changes that cause compatibility issues. try reinstalling Docker
[using the official instructions](https://docs.docker.com/engine/install/) to ensure you are running a compatible version.
If that does not solve the issue, try incrementally adding the following parameters to the docker run command:
* `--network host`
* `-e SANDBOX_USE_HOST_NETWORK=true`
* `-e DOCKER_HOST_ADDR=127.0.0.1`
### Internal Server Error. Ports are not available
**Description**
+89
View File
@@ -0,0 +1,89 @@
# PolyForm Free Trial License 1.0.0
## Acceptance
In order to get any license under these terms, you must agree
to them as both strict obligations and conditions to all
your licenses.
## Copyright License
The licensor grants you a copyright license for the software
to do everything you might do with the software that would
otherwise infringe the licensor's copyright in it for any
permitted purpose. However, you may only make changes or
new works based on the software according to [Changes and New
Works License](#changes-and-new-works-license), and you may
not distribute copies of the software.
## Changes and New Works License
The licensor grants you an additional copyright license to
make changes and new works based on the software for any
permitted purpose.
## Patent License
The licensor grants you a patent license for the software that
covers patent claims the licensor can license, or becomes able
to license, that you would infringe by using the software.
## Fair Use
You may have "fair use" rights for the software under the
law. These terms do not limit them.
## Free Trial
Use of the software for more than 30 days per calendar year is not allowed without a commercial license.
## No Other Rights
These terms do not allow you to sublicense or transfer any of
your licenses to anyone else, or prevent the licensor from
granting licenses to anyone else. These terms do not imply
any other licenses.
## Patent Defense
If you make any written claim that the software infringes or
contributes to infringement of any patent, your patent license
for the software granted under these terms ends immediately. If
your company makes such a claim, your patent license ends
immediately for work on behalf of your company.
## Violations
If you violate any of these terms, or do anything with the
software not covered by your licenses, all your licenses
end immediately.
## No Liability
***As far as the law allows, the software comes as is, without
any warranty or condition, and the licensor will not be liable
to you for any damages arising out of these terms or the use
or nature of the software, under any kind of legal claim.***
## Definitions
The **licensor** is the individual or entity offering these
terms, and the **software** is the software the licensor makes
available under these terms.
**You** refers to the individual or entity agreeing to these
terms.
**Your company** is any legal entity, sole proprietorship,
or other kind of organization that you work for, plus all
organizations that have control over, are under the control of,
or are under common control with that organization. **Control**
means ownership of substantially all the assets of an entity,
or the power to direct its management and policies by vote,
contract, or otherwise. Control can be direct or indirect.
**Your licenses** are all the licenses granted to you for the
software under these terms.
**Use** means anything you do with the software requiring one
of your licenses.
@@ -13,6 +13,7 @@ N_RUNS=${4:-1}
export EXP_NAME=$EXP_NAME
# use 2x resources for rollout since some codebases are pretty resource-intensive
export DEFAULT_RUNTIME_RESOURCE_FACTOR=2
export ITERATIVE_EVAL_MODE=false
echo "MODEL: $MODEL"
echo "EXP_NAME: $EXP_NAME"
DATASET="SWE-Gym/SWE-Gym" # change this to the "/SWE-Gym-Lite" if you want to rollout the lite subset
+209
View File
@@ -0,0 +1,209 @@
#!/usr/bin/env python3
"""
Script to aggregate token usage metrics from LLM completion files.
Usage:
python aggregate_token_usage.py <directory_path> [--input-cost <cost>] [--output-cost <cost>] [--cached-cost <cost>]
Arguments:
directory_path: Path to the directory containing completion files
--input-cost: Cost per input token (default: 0.0)
--output-cost: Cost per output token (default: 0.0)
--cached-cost: Cost per cached token (default: 0.0)
"""
import argparse
import json
import os
from pathlib import Path
def aggregate_token_usage(
directory_path, input_cost=0.0, output_cost=0.0, cached_cost=0.0
):
"""
Aggregate token usage metrics from all JSON completion files in the directory.
Args:
directory_path (str): Path to directory containing completion files
input_cost (float): Cost per input token
output_cost (float): Cost per output token
cached_cost (float): Cost per cached token
"""
# Initialize counters
totals = {
'input_tokens': 0,
'output_tokens': 0,
'cached_tokens': 0,
'total_tokens': 0,
'files_processed': 0,
'files_with_errors': 0,
'cost': 0,
}
# Find all JSON files recursively
json_files = list(Path(directory_path).rglob('*.json'))
print(f'Found {len(json_files)} JSON files to process...')
for json_file in json_files:
try:
with open(json_file, 'r', encoding='utf-8') as f:
data = json.load(f)
# Look for usage data in response or fncall_response
usage_data = None
if (
'response' in data
and isinstance(data['response'], dict)
and 'usage' in data['response']
):
usage_data = data['response']['usage']
elif (
'fncall_response' in data
and isinstance(data['fncall_response'], dict)
and 'usage' in data['fncall_response']
):
usage_data = data['fncall_response']['usage']
if usage_data:
# Extract token counts
completion_tokens = usage_data.get('completion_tokens', 0)
prompt_tokens = usage_data.get('prompt_tokens', 0)
cached_tokens = usage_data.get('cached_tokens', 0)
# Handle cases where cached_tokens might be in prompt_tokens_details
if cached_tokens == 0 and 'prompt_tokens_details' in usage_data:
details = usage_data['prompt_tokens_details']
if isinstance(details, dict) and 'cached_tokens' in details:
cached_tokens = details.get('cached_tokens', 0) or 0
# Calculate non-cached input tokens
non_cached_input = prompt_tokens - cached_tokens
# Update totals
totals['input_tokens'] += non_cached_input
totals['output_tokens'] += completion_tokens
totals['cached_tokens'] += cached_tokens
totals['total_tokens'] += prompt_tokens + completion_tokens
if 'cost' in data:
totals['cost'] += data['cost']
totals['files_processed'] += 1
# Progress indicator
if totals['files_processed'] % 1000 == 0:
print(f'Processed {totals["files_processed"]} files...')
except Exception as e:
totals['files_with_errors'] += 1
if totals['files_with_errors'] <= 5: # Only show first 5 errors
print(f'Error processing {json_file}: {e}')
# Calculate costs
input_cost_total = totals['input_tokens'] * input_cost
output_cost_total = totals['output_tokens'] * output_cost
cached_cost_total = totals['cached_tokens'] * cached_cost
total_cost = input_cost_total + output_cost_total + cached_cost_total
# Print results
print('\n' + '=' * 60)
print('TOKEN USAGE AGGREGATION RESULTS')
print('=' * 60)
print(f'Files processed: {totals["files_processed"]:,}')
print(f'Files with errors: {totals["files_with_errors"]:,}')
print()
print('TOKEN COUNTS:')
print(f' Input tokens (non-cached): {totals["input_tokens"]:,}')
print(f' Output tokens: {totals["output_tokens"]:,}')
print(f' Cached tokens: {totals["cached_tokens"]:,}')
print(f' Total tokens: {totals["total_tokens"]:,}')
print(f' Total costs (based on returned value): ${totals["cost"]:.6f}')
print()
if input_cost > 0 or output_cost > 0 or cached_cost > 0:
print('COST CALCULATED BASED ON PROVIDED RATE:')
print(
f' Input cost: ${input_cost_total:.6f} ({totals["input_tokens"]:,} × ${input_cost:.6f})'
)
print(
f' Output cost: ${output_cost_total:.6f} ({totals["output_tokens"]:,} × ${output_cost:.6f})'
)
print(
f' Cached cost: ${cached_cost_total:.6f} ({totals["cached_tokens"]:,} × ${cached_cost:.6f})'
)
print(f' Total cost: ${total_cost:.6f}')
print()
print('SUMMARY:')
print(
f' Total input tokens: {totals["input_tokens"] + totals["cached_tokens"]:,}'
)
print(f' Total output tokens: {totals["output_tokens"]:,}')
print(f' Grand total tokens: {totals["total_tokens"]:,}')
return totals
def main():
parser = argparse.ArgumentParser(
description='Aggregate token usage metrics from LLM completion files',
formatter_class=argparse.RawDescriptionHelpFormatter,
epilog="""
Examples:
python aggregate_token_usage.py /path/to/completions
python aggregate_token_usage.py /path/to/completions --input-cost 0.000001 --output-cost 0.000002
python aggregate_token_usage.py /path/to/completions --input-cost 0.000001 --output-cost 0.000002 --cached-cost 0.0000005
""",
)
parser.add_argument(
'directory_path', help='Path to directory containing completion files'
)
parser.add_argument(
'--input-cost',
type=float,
default=0.0,
help='Cost per input token (default: 0.0)',
)
parser.add_argument(
'--output-cost',
type=float,
default=0.0,
help='Cost per output token (default: 0.0)',
)
parser.add_argument(
'--cached-cost',
type=float,
default=0.0,
help='Cost per cached token (default: 0.0)',
)
args = parser.parse_args()
# Validate directory path
if not os.path.exists(args.directory_path):
print(f"Error: Directory '{args.directory_path}' does not exist.")
return 1
if not os.path.isdir(args.directory_path):
print(f"Error: '{args.directory_path}' is not a directory.")
return 1
# Run aggregation
try:
aggregate_token_usage(
args.directory_path, args.input_cost, args.output_cost, args.cached_cost
)
return 0
except Exception as e:
print(f'Error during aggregation: {e}')
return 1
if __name__ == '__main__':
exit(main())
@@ -54,12 +54,14 @@ const MOCK_RESPOSITORIES: GitRepository[] = [
full_name: "rbren/polaris",
git_provider: "github",
is_public: true,
main_branch: "main",
},
{
id: "2",
full_name: "All-Hands-AI/OpenHands",
git_provider: "github",
is_public: true,
main_branch: "main",
},
];
@@ -99,16 +101,15 @@ describe("RepoConnector", () => {
// First select the provider
const providerDropdown = await waitFor(() =>
screen.getByText("Select Provider"),
screen.getByTestId("git-provider-dropdown"),
);
await userEvent.click(providerDropdown);
await userEvent.click(screen.getByText("Github"));
await userEvent.click(screen.getByText("GitHub"));
// Then interact with the repository dropdown
const repoDropdown = await waitFor(() =>
screen.getByTestId("repo-dropdown"),
const repoInput = await waitFor(() =>
screen.getByTestId("git-repo-dropdown"),
);
const repoInput = within(repoDropdown).getByRole("combobox");
await userEvent.click(repoInput);
// Wait for the options to be loaded and displayed
@@ -134,23 +135,23 @@ describe("RepoConnector", () => {
expect(launchButton).toBeDisabled();
// Mock the repository branches API call
vi.spyOn(OpenHands, "getRepositoryBranches").mockResolvedValue([
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 });
// First select the provider
const providerDropdown = await waitFor(() =>
screen.getByText("Select Provider"),
screen.getByTestId("git-provider-dropdown"),
);
await userEvent.click(providerDropdown);
await userEvent.click(screen.getByText("Github"));
await userEvent.click(screen.getByText("GitHub"));
// Then select the repository
const repoDropdown = await waitFor(() =>
screen.getByTestId("repo-dropdown"),
const repoInput = await waitFor(() =>
screen.getByTestId("git-repo-dropdown"),
);
const repoInput = within(repoDropdown).getByRole("combobox");
await userEvent.click(repoInput);
// Wait for the options to be loaded and displayed
@@ -161,7 +162,8 @@ describe("RepoConnector", () => {
// Wait for the branch to be auto-selected
await waitFor(() => {
expect(screen.getByText("main")).toBeInTheDocument();
const branchInput = screen.getByTestId("git-branch-dropdown-input");
expect(branchInput).toHaveValue("main");
});
expect(launchButton).toBeEnabled();
@@ -224,6 +226,19 @@ describe("RepoConnector", () => {
it("should create a conversation and redirect with the selected repo when pressing the launch button", async () => {
const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
createConversationSpy.mockResolvedValue({
conversation_id: "mock-conversation-id",
title: "Test Conversation",
selected_repository: "user/repo1",
selected_branch: "main",
git_provider: "github",
last_updated_at: "2023-01-01T00:00:00Z",
created_at: "2023-01-01T00:00:00Z",
status: "STARTING",
runtime_status: null,
url: null,
session_api_key: null,
});
const retrieveUserGitRepositoriesSpy = vi.spyOn(
OpenHands,
"retrieveUserGitRepositories",
@@ -244,23 +259,23 @@ describe("RepoConnector", () => {
expect(createConversationSpy).not.toHaveBeenCalled();
// Mock the repository branches API call
vi.spyOn(OpenHands, "getRepositoryBranches").mockResolvedValue([
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 });
// First select the provider
const providerDropdown = await waitFor(() =>
screen.getByText("Select Provider"),
screen.getByTestId("git-provider-dropdown"),
);
await userEvent.click(providerDropdown);
await userEvent.click(screen.getByText("Github"));
await userEvent.click(screen.getByText("GitHub"));
// Then select the repository
const repoDropdown = await waitFor(() =>
within(repoConnector).getByTestId("repo-dropdown"),
const repoInput = await waitFor(() =>
within(repoConnector).getByTestId("git-repo-dropdown"),
);
const repoInput = within(repoDropdown).getByRole("combobox");
await userEvent.click(repoInput);
// Wait for the options to be loaded and displayed
@@ -271,7 +286,8 @@ describe("RepoConnector", () => {
// Wait for the branch to be auto-selected
await waitFor(() => {
expect(screen.getByText("main")).toBeInTheDocument();
const branchInput = screen.getByTestId("git-branch-dropdown-input");
expect(branchInput).toHaveValue("main");
});
await userEvent.click(launchButton);
@@ -288,6 +304,8 @@ describe("RepoConnector", () => {
});
it("should change the launch button text to 'Loading...' when creating a conversation", async () => {
const createConversationSpy = vi.spyOn(OpenHands, "createConversation");
createConversationSpy.mockImplementation(() => new Promise(() => {})); // Never resolves to keep loading state
const retrieveUserGitRepositoriesSpy = vi.spyOn(
OpenHands,
"retrieveUserGitRepositories",
@@ -298,10 +316,10 @@ describe("RepoConnector", () => {
});
// Mock the repository branches API call
vi.spyOn(OpenHands, "getRepositoryBranches").mockResolvedValue([
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 });
renderRepoConnector();
@@ -309,16 +327,16 @@ describe("RepoConnector", () => {
// First select the provider
const providerDropdown = await waitFor(() =>
screen.getByText("Select Provider"),
screen.getByTestId("git-provider-dropdown"),
);
await userEvent.click(providerDropdown);
await userEvent.click(screen.getByText("Github"));
await userEvent.click(screen.getByText("GitHub"));
// Then select the repository
const repoDropdown = await waitFor(() =>
screen.getByTestId("repo-dropdown"),
const repoInput = await waitFor(() =>
screen.getByTestId("git-repo-dropdown"),
);
const repoInput = within(repoDropdown).getByRole("combobox");
await userEvent.click(repoInput);
// Wait for the options to be loaded and displayed
@@ -329,7 +347,8 @@ describe("RepoConnector", () => {
// Wait for the branch to be auto-selected
await waitFor(() => {
expect(screen.getByText("main")).toBeInTheDocument();
const branchInput = screen.getByTestId("git-branch-dropdown-input");
expect(branchInput).toHaveValue("main");
});
await userEvent.click(launchButton);
@@ -358,7 +377,7 @@ describe("RepoConnector", () => {
const goToSettingsButton = await screen.findByTestId(
"navigate-to-settings-button",
);
const dropdown = screen.queryByTestId("repo-dropdown");
const dropdown = screen.queryByTestId("git-repo-dropdown");
const launchButton = screen.queryByTestId("repo-launch-button");
const providerLinks = screen.queryAllByText(/add git(hub|lab) repos/i);
@@ -151,7 +151,7 @@ describe("RepositorySelectionForm", () => {
});
renderForm();
expect(await screen.findByTestId("repo-dropdown")).toBeInTheDocument();
expect(await screen.findByTestId("git-repo-dropdown")).toBeInTheDocument();
});
it("shows error message when repository fetch fails", async () => {
@@ -168,10 +168,10 @@ describe("RepositorySelectionForm", () => {
renderForm();
expect(
await screen.findByTestId("repo-dropdown-error"),
await screen.findByTestId("dropdown-error"),
).toBeInTheDocument();
expect(
screen.getByText("HOME$FAILED_TO_LOAD_REPOSITORIES"),
screen.getByText("Failed to load data"),
).toBeInTheDocument();
});
@@ -231,11 +231,7 @@ describe("RepositorySelectionForm", () => {
renderForm();
const dropdown = await screen.findByTestId("repo-dropdown");
const input = dropdown.querySelector(
'input[type="text"]',
) as HTMLInputElement;
expect(input).toBeInTheDocument();
const input = await screen.findByTestId("git-repo-dropdown");
await userEvent.type(input, "https://github.com/kubernetes/kubernetes");
expect(searchGitReposSpy).toHaveBeenLastCalledWith(
@@ -270,11 +266,7 @@ describe("RepositorySelectionForm", () => {
renderForm();
const dropdown = await screen.findByTestId("repo-dropdown");
const input = dropdown.querySelector(
'input[type="text"]',
) as HTMLInputElement;
expect(input).toBeInTheDocument();
const input = await screen.findByTestId("git-repo-dropdown");
await userEvent.type(input, "https://github.com/kubernetes/kubernetes");
expect(searchGitReposSpy).toHaveBeenLastCalledWith(
+13 -18
View File
@@ -37,34 +37,27 @@ const selectRepository = async (repoName: string) => {
// First select the provider
const providerDropdown = await waitFor(() =>
screen.getByText("Select Provider"),
screen.getByTestId("git-provider-dropdown"),
);
await userEvent.click(providerDropdown);
await userEvent.click(screen.getByText("Github"));
await userEvent.click(screen.getByText("GitHub"));
// Then select the repository
const dropdown = within(repoConnector).getByTestId("repo-dropdown");
const repoInput = within(dropdown).getByRole("combobox");
const repoInput = within(repoConnector).getByTestId("git-repo-dropdown");
await userEvent.click(repoInput);
// Wait for the options to be loaded and displayed
await waitFor(() => {
const options = screen.getAllByText(repoName);
// Find the option in the dropdown (it will have role="option")
const dropdownOption = options.find(
(el) => el.getAttribute("role") === "option",
);
expect(dropdownOption).toBeInTheDocument();
const dropdownMenu = screen.getByTestId("git-repo-dropdown-menu");
expect(within(dropdownMenu).getByText(repoName)).toBeInTheDocument();
});
const options = screen.getAllByText(repoName);
const dropdownOption = options.find(
(el) => el.getAttribute("role") === "option",
);
await userEvent.click(dropdownOption!);
const dropdownMenu = screen.getByTestId("git-repo-dropdown-menu");
await userEvent.click(within(dropdownMenu).getByText(repoName));
// Wait for the branch to be auto-selected
await waitFor(() => {
expect(screen.getByText("main")).toBeInTheDocument();
const branchInput = screen.getByTestId("git-branch-dropdown-input");
expect(branchInput).toHaveValue("main");
});
};
@@ -85,12 +78,14 @@ const MOCK_RESPOSITORIES: GitRepository[] = [
full_name: "octocat/hello-world",
git_provider: "github",
is_public: true,
main_branch: "main",
},
{
id: "2",
full_name: "octocat/earth",
git_provider: "github",
is_public: true,
main_branch: "main",
},
];
@@ -140,10 +135,10 @@ describe("HomeScreen", () => {
await screen.findAllByTestId("task-launch-button");
// Mock the repository branches API call
vi.spyOn(OpenHands, "getRepositoryBranches").mockResolvedValue([
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 });
// Select a repository to enable the repo launch button
await selectRepository("octocat/hello-world");
+44 -22
View File
@@ -79,6 +79,35 @@ describe("Content", () => {
expect(screen.getByTestId("set-indicator")).toBeInTheDocument();
});
});
it("should conditionally show security analyzer based on confirmation mode", async () => {
renderLlmSettingsScreen();
await screen.findByTestId("llm-settings-screen");
const confirmation = screen.getByTestId("enable-confirmation-mode-switch");
// Initially confirmation mode is false, so security analyzer should not be visible
expect(confirmation).not.toBeChecked();
expect(
screen.queryByTestId("security-analyzer-input"),
).not.toBeInTheDocument();
// Enable confirmation mode
await userEvent.click(confirmation);
expect(confirmation).toBeChecked();
// Security analyzer should now be visible
screen.getByTestId("security-analyzer-input");
// Disable confirmation mode again
await userEvent.click(confirmation);
expect(confirmation).not.toBeChecked();
// Security analyzer should be hidden again
expect(
screen.queryByTestId("security-analyzer-input"),
).not.toBeInTheDocument();
});
});
describe("Advanced form", () => {
@@ -107,7 +136,6 @@ describe("Content", () => {
within(advancedForm).getByTestId("llm-api-key-input");
within(advancedForm).getByTestId("llm-api-key-help-anchor-advanced");
within(advancedForm).getByTestId("agent-input");
within(advancedForm).getByTestId("enable-confirmation-mode-switch");
within(advancedForm).getByTestId("enable-memory-condenser-switch");
await userEvent.click(advancedSwitch);
@@ -130,9 +158,6 @@ describe("Content", () => {
const baseUrl = screen.getByTestId("base-url-input");
const apiKey = screen.getByTestId("llm-api-key-input");
const agent = screen.getByTestId("agent-input");
const confirmation = screen.getByTestId(
"enable-confirmation-mode-switch",
);
const condensor = screen.getByTestId("enable-memory-condenser-switch");
expect(model).toHaveValue("openhands/claude-sonnet-4-20250514");
@@ -140,15 +165,7 @@ describe("Content", () => {
expect(apiKey).toHaveValue("");
expect(apiKey).toHaveProperty("placeholder", "");
expect(agent).toHaveValue("CodeActAgent");
expect(confirmation).not.toBeChecked();
expect(condensor).toBeChecked();
// check that security analyzer is present
expect(
screen.queryByTestId("security-analyzer-input"),
).not.toBeInTheDocument();
await userEvent.click(confirmation);
screen.getByTestId("security-analyzer-input");
});
it("should render the advanced form if existings settings are advanced", async () => {
@@ -177,7 +194,7 @@ describe("Content", () => {
agent: "CoActAgent",
confirmation_mode: true,
enable_default_condenser: false,
security_analyzer: "mock-invariant",
security_analyzer: "none",
});
renderLlmSettingsScreen();
@@ -203,7 +220,7 @@ describe("Content", () => {
expect(agent).toHaveValue("CoActAgent");
expect(confirmation).toBeChecked();
expect(condensor).not.toBeChecked();
expect(securityAnalyzer).toHaveValue("mock-invariant");
expect(securityAnalyzer).toHaveValue("SETTINGS$SECURITY_ANALYZER_NONE");
});
});
});
@@ -293,7 +310,7 @@ describe("Form submission", () => {
// select security analyzer
const securityAnalyzer = screen.getByTestId("security-analyzer-input");
await userEvent.click(securityAnalyzer);
const securityAnalyzerOption = screen.getByText("mock-invariant");
const securityAnalyzerOption = screen.getByText("SETTINGS$SECURITY_ANALYZER_NONE");
await userEvent.click(securityAnalyzerOption);
const submitButton = screen.getByTestId("submit-button");
@@ -306,7 +323,7 @@ describe("Form submission", () => {
agent: "CoActAgent",
confirmation_mode: true,
enable_default_condenser: false,
security_analyzer: "mock-invariant",
security_analyzer: null,
}),
);
});
@@ -375,9 +392,11 @@ 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 confirmation = await screen.findByTestId("enable-confirmation-mode-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");
// enter custom model
await userEvent.type(model, "-mini");
expect(model).toHaveValue("openai/gpt-4o-mini");
@@ -451,14 +470,17 @@ describe("Form submission", () => {
// select security analyzer
const securityAnalyzer = await screen.findByTestId("security-analyzer-input");
await userEvent.click(securityAnalyzer);
const securityAnalyzerOption = screen.getByText("mock-invariant");
const securityAnalyzerOption = screen.getByText("SETTINGS$SECURITY_ANALYZER_NONE");
await userEvent.click(securityAnalyzerOption);
expect(securityAnalyzer).toHaveValue("mock-invariant");
expect(securityAnalyzer).toHaveValue("SETTINGS$SECURITY_ANALYZER_NONE");
expect(submitButton).not.toBeDisabled();
await userEvent.clear(securityAnalyzer);
expect(securityAnalyzer).toHaveValue("");
// revert back to original value
await userEvent.click(securityAnalyzer);
const originalSecurityAnalyzerOption = screen.getByText("SETTINGS$SECURITY_ANALYZER_LLM_DEFAULT");
await userEvent.click(originalSecurityAnalyzerOption);
expect(securityAnalyzer).toHaveValue("SETTINGS$SECURITY_ANALYZER_LLM_DEFAULT");
expect(submitButton).toBeDisabled();
});
@@ -552,7 +574,7 @@ describe("Form submission", () => {
expect.objectContaining({
llm_model: "openhands/claude-sonnet-4-20250514",
llm_base_url: "",
confirmation_mode: false,
confirmation_mode: true, // Confirmation mode is now a basic setting, should be preserved
}),
);
});
@@ -107,9 +107,7 @@ describe("Content", () => {
expect(screen.queryByTestId("add-secret-button")).not.toBeInTheDocument(),
);
const button = await screen.findByTestId("connect-git-button");
await userEvent.click(button);
screen.getByTestId("git-settings-screen");
expect(button).toHaveAttribute("href", "/settings/integrations");
});
it("should render an empty table when there are no existing secrets", async () => {
@@ -29,23 +29,5 @@ describe("hasAdvancedSettingsSet", () => {
}),
).toBe(true);
});
test("CONFIRMATION_MODE is true", () => {
expect(
hasAdvancedSettingsSet({
...DEFAULT_SETTINGS,
CONFIRMATION_MODE: true,
}),
).toBe(true);
});
test("SECURITY_ANALYZER is set", () => {
expect(
hasAdvancedSettingsSet({
...DEFAULT_SETTINGS,
SECURITY_ANALYZER: "test",
}),
).toBe(true);
});
});
});
+1353 -998
View File
File diff suppressed because it is too large Load Diff
+28 -28
View File
@@ -1,6 +1,6 @@
{
"name": "openhands-frontend",
"version": "0.54.0",
"version": "0.55.0",
"private": true,
"type": "module",
"engines": {
@@ -11,50 +11,50 @@
"@heroui/use-infinite-scroll": "^2.2.10",
"@microlink/react-json-view": "^1.26.2",
"@monaco-editor/react": "^4.7.0-rc.0",
"@react-router/node": "^7.8.0",
"@react-router/serve": "^7.8.0",
"@react-types/shared": "^3.31.0",
"@react-router/node": "^7.8.2",
"@react-router/serve": "^7.8.2",
"@react-types/shared": "^3.32.0",
"@reduxjs/toolkit": "^2.8.2",
"@stripe/react-stripe-js": "^3.9.0",
"@stripe/stripe-js": "^7.8.0",
"@stripe/react-stripe-js": "^3.9.2",
"@stripe/stripe-js": "^7.9.0",
"@tailwindcss/postcss": "^4.1.12",
"@tailwindcss/vite": "^4.1.12",
"@tanstack/react-query": "^5.85.3",
"@tanstack/react-query": "^5.85.5",
"@uidotdev/usehooks": "^2.4.1",
"@vitejs/plugin-react": "^5.0.0",
"@vitejs/plugin-react": "^5.0.2",
"@xterm/addon-fit": "^0.10.0",
"@xterm/xterm": "^5.4.0",
"axios": "^1.11.0",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"downshift": "^9.0.10",
"eslint-config-airbnb-typescript": "^18.0.0",
"framer-motion": "^12.23.12",
"i18next": "^25.3.6",
"i18next": "^25.4.2",
"i18next-browser-languagedetector": "^8.2.0",
"i18next-http-backend": "^3.0.2",
"isbot": "^5.1.29",
"jose": "^6.0.12",
"lucide-react": "^0.539.0",
"isbot": "^5.1.30",
"jose": "^6.1.0",
"lucide-react": "^0.542.0",
"monaco-editor": "^0.52.2",
"posthog-js": "^1.260.1",
"posthog-js": "^1.261.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-highlight": "^0.15.0",
"react-hot-toast": "^2.5.1",
"react-i18next": "^15.6.1",
"react-hot-toast": "^2.6.0",
"react-i18next": "^15.7.2",
"react-icons": "^5.5.0",
"react-markdown": "^10.1.0",
"react-redux": "^9.2.0",
"react-router": "^7.8.0",
"react-select": "^5.10.2",
"react-syntax-highlighter": "^15.6.1",
"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",
"vite": "^7.1.1",
"vite": "^7.1.3",
"web-vitals": "^5.1.0",
"ws": "^8.18.2"
},
@@ -88,17 +88,17 @@
"@babel/traverse": "^7.28.3",
"@babel/types": "^7.28.2",
"@mswjs/socket.io-binding": "^0.2.0",
"@playwright/test": "^1.54.2",
"@react-router/dev": "^7.8.0",
"@playwright/test": "^1.55.0",
"@react-router/dev": "^7.8.2",
"@tailwindcss/typography": "^0.5.16",
"@tanstack/eslint-plugin-query": "^5.83.1",
"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.7.0",
"@testing-library/jest-dom": "^6.8.0",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^14.6.1",
"@types/node": "^24.2.0",
"@types/react": "^19.1.9",
"@types/react-dom": "^19.1.7",
"@types/node": "^24.3.0",
"@types/react": "^19.1.12",
"@types/react-dom": "^19.1.9",
"@types/react-highlight": "^0.12.8",
"@types/react-syntax-highlighter": "^15.5.13",
"@types/ws": "^8.18.1",
@@ -117,16 +117,16 @@
"eslint-plugin-prettier": "^5.5.4",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-unused-imports": "^4.1.4",
"eslint-plugin-unused-imports": "^4.2.0",
"husky": "^9.1.7",
"jsdom": "^26.1.0",
"lint-staged": "^16.1.4",
"msw": "^2.6.6",
"prettier": "^3.6.2",
"stripe": "^18.4.0",
"stripe": "^18.5.0",
"tailwindcss": "^4.1.8",
"typescript": "^5.9.2",
"vite-plugin-svgr": "^4.2.0",
"vite-plugin-svgr": "^4.5.0",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.0.2"
},
+62 -4
View File
@@ -21,11 +21,17 @@ import {
} from "./open-hands.types";
import { openHands } from "./open-hands-axios";
import { ApiSettings, PostApiSettings, Provider } from "#/types/settings";
import { GitUser, GitRepository, Branch } from "#/types/git";
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";
import { BatchFeedbackData } from "#/hooks/query/use-batch-feedback";
import { SubscriptionAccess } from "#/types/billing";
class OpenHands {
private static currentConversation: Conversation | null = null;
@@ -428,6 +434,13 @@ class OpenHands {
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");
@@ -567,14 +580,38 @@ class OpenHands {
};
}
static async getRepositoryBranches(repository: string): Promise<Branch[]> {
const { data } = await openHands.get<Branch[]>(
`/api/user/repository/branches?repository=${encodeURIComponent(repository)}`,
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
@@ -726,6 +763,27 @@ class OpenHands {
);
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;
-2
View File
@@ -49,13 +49,11 @@ export interface GetConfigResponse {
APP_SLUG?: string;
GITHUB_CLIENT_ID: string;
POSTHOG_CLIENT_KEY: string;
STRIPE_PUBLISHABLE_KEY?: string;
PROVIDERS_CONFIGURED?: Provider[];
AUTH_URL?: string;
FEATURE_FLAGS: {
ENABLE_BILLING: boolean;
HIDE_LLM_SETTINGS: boolean;
HIDE_MICROAGENT_MANAGEMENT?: boolean;
ENABLE_JIRA: boolean;
ENABLE_JIRA_DC: boolean;
ENABLE_LINEAR: boolean;
@@ -1,69 +0,0 @@
import { useMemo } from "react";
import { useRepositoryBranches } from "../../hooks/query/use-repository-branches";
import { ReactSelectDropdown, SelectOption } from "./react-select-dropdown";
export interface GitBranchDropdownProps {
repositoryName?: string | null;
value?: string | null;
placeholder?: string;
className?: string;
errorMessage?: string;
disabled?: boolean;
onChange?: (branchName: string | null) => void;
}
export function GitBranchDropdown({
repositoryName,
value,
placeholder = "Select branch...",
className,
errorMessage,
disabled = false,
onChange,
}: GitBranchDropdownProps) {
const { data: branches, isLoading } = useRepositoryBranches(
repositoryName || null,
);
const options: SelectOption[] = useMemo(
() =>
branches?.map((branch) => ({
value: branch.name,
label: branch.name,
})) || [],
[branches],
);
const hasNoBranches = !isLoading && branches && branches.length === 0;
const selectedOption = useMemo(
() => options.find((option) => option.value === value) || null,
[options, value],
);
const handleChange = (option: SelectOption | null) => {
onChange?.(option?.value || null);
};
const isDisabled = disabled || !repositoryName || isLoading || hasNoBranches;
const displayPlaceholder = hasNoBranches ? "No branches found" : placeholder;
const displayErrorMessage = hasNoBranches
? "This repository has no branches"
: errorMessage;
return (
<ReactSelectDropdown
options={options}
value={selectedOption}
placeholder={displayPlaceholder}
className={className}
errorMessage={displayErrorMessage}
disabled={isDisabled}
isClearable={false}
isSearchable
isLoading={isLoading}
onChange={handleChange}
/>
);
}
@@ -1,58 +0,0 @@
import { useMemo } from "react";
import { Provider } from "../../types/settings";
import { ReactSelectDropdown, SelectOption } from "./react-select-dropdown";
export interface GitProviderDropdownProps {
providers: Provider[];
value?: Provider | null;
placeholder?: string;
className?: string;
errorMessage?: string;
disabled?: boolean;
isLoading?: boolean;
onChange?: (provider: Provider | null) => void;
}
export function GitProviderDropdown({
providers,
value,
placeholder = "Select Provider",
className,
errorMessage,
disabled = false,
isLoading = false,
onChange,
}: GitProviderDropdownProps) {
const options: SelectOption[] = useMemo(
() =>
providers.map((provider) => ({
value: provider,
label: provider.charAt(0).toUpperCase() + provider.slice(1),
})),
[providers],
);
const selectedOption = useMemo(
() => options.find((option) => option.value === value) || null,
[options, value],
);
const handleChange = (option: SelectOption | null) => {
onChange?.(option?.value as Provider | null);
};
return (
<ReactSelectDropdown
options={options}
value={selectedOption}
placeholder={placeholder}
className={className}
errorMessage={errorMessage}
disabled={disabled}
isClearable={false}
isSearchable={false}
isLoading={isLoading}
onChange={handleChange}
/>
);
}
@@ -1,208 +0,0 @@
import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Provider } from "../../types/settings";
import { useGitRepositories } from "../../hooks/query/use-git-repositories";
import { useSearchRepositories } from "../../hooks/query/use-search-repositories";
import { useDebounce } from "../../hooks/use-debounce";
import OpenHands from "../../api/open-hands";
import { GitRepository } from "../../types/git";
import {
ReactSelectAsyncDropdown,
AsyncSelectOption,
} from "./react-select-async-dropdown";
export interface GitRepositoryDropdownProps {
provider: Provider;
value?: string | null;
placeholder?: string;
className?: string;
errorMessage?: string;
disabled?: boolean;
onChange?: (repository?: GitRepository) => void;
}
export function GitRepositoryDropdown({
provider,
value,
placeholder = "Search repositories...",
className,
errorMessage,
disabled = false,
onChange,
}: GitRepositoryDropdownProps) {
const { t } = useTranslation();
const [searchInput, setSearchInput] = useState("");
const debouncedSearchInput = useDebounce(searchInput, 300);
// Process search input to handle URLs
const processedSearchInput = useMemo(() => {
if (debouncedSearchInput.startsWith("https://")) {
const match = debouncedSearchInput.match(
/https:\/\/[^/]+\/([^/]+\/[^/]+)/,
);
return match ? match[1] : debouncedSearchInput;
}
return debouncedSearchInput;
}, [debouncedSearchInput]);
const {
data,
fetchNextPage,
hasNextPage,
isLoading,
isFetchingNextPage,
isError,
} = useGitRepositories({
provider,
enabled: !disabled,
});
// Search query for processed input (handles URLs)
const { data: searchData, isLoading: isSearchLoading } =
useSearchRepositories(processedSearchInput, provider);
const allOptions: AsyncSelectOption[] = useMemo(
() =>
data?.pages
? data.pages.flatMap((page) =>
page.data.map((repo) => ({
value: repo.id,
label: repo.full_name,
})),
)
: [],
[data],
);
const searchOptions: AsyncSelectOption[] = useMemo(
() =>
searchData
? searchData.map((repo) => ({
value: repo.id,
label: repo.full_name,
}))
: [],
[searchData],
);
const selectedOption = useMemo(() => {
// First check in loaded pages
const option = allOptions.find((opt) => opt.value === value);
if (option) return option;
// If not found, check in search results
const searchOption = searchOptions.find((opt) => opt.value === value);
if (searchOption) return searchOption;
return null;
}, [allOptions, searchOptions, value]);
const loadOptions = useCallback(
async (inputValue: string): Promise<AsyncSelectOption[]> => {
// Update search input to trigger debounced search
setSearchInput(inputValue);
// If empty input, show all loaded options
if (!inputValue.trim()) {
return allOptions;
}
// For very short inputs, do local filtering
if (inputValue.length < 2) {
return allOptions.filter((option) =>
option.label.toLowerCase().includes(inputValue.toLowerCase()),
);
}
// Handle URL inputs by performing direct search
if (inputValue.startsWith("https://")) {
const match = inputValue.match(/https:\/\/[^/]+\/([^/]+\/[^/]+)/);
if (match) {
const repoName = match[1];
try {
// Perform direct search for URL-based inputs
const repositories = await OpenHands.searchGitRepositories(
repoName,
3,
provider,
);
return repositories.map((repo) => ({
value: repo.full_name,
label: repo.full_name,
data: repo,
}));
} catch (error) {
// Fall back to local filtering if search fails
return allOptions.filter((option) =>
option.label.toLowerCase().includes(repoName.toLowerCase()),
);
}
}
}
// For regular text inputs, use hook-based search results if available
if (searchOptions.length > 0 && processedSearchInput === inputValue) {
return searchOptions;
}
// Fallback to local filtering while search is loading
return allOptions.filter((option) =>
option.label.toLowerCase().includes(inputValue.toLowerCase()),
);
},
[allOptions, searchOptions, processedSearchInput, provider],
);
const handleChange = (option: AsyncSelectOption | null) => {
if (!option) {
onChange?.(undefined);
return;
}
// First check in loaded pages
let repo = data?.pages
?.flatMap((p) => p.data)
.find((r) => r.id === option.value);
// If not found, check in search results
if (!repo) {
repo = searchData?.find((r) => r.id === option.value);
}
onChange?.(repo);
};
const handleMenuScrollToBottom = useCallback(() => {
if (hasNextPage && !isFetchingNextPage && !isLoading) {
fetchNextPage();
}
}, [hasNextPage, isFetchingNextPage, isLoading, fetchNextPage]);
return (
<>
<ReactSelectAsyncDropdown
testId="repo-dropdown"
loadOptions={loadOptions}
value={selectedOption}
placeholder={placeholder}
className={className}
errorMessage={errorMessage}
disabled={disabled}
isClearable={false}
isLoading={isLoading || isFetchingNextPage || isSearchLoading}
cacheOptions
defaultOptions={allOptions}
onChange={handleChange}
onMenuScrollToBottom={handleMenuScrollToBottom}
/>
{isError && (
<div
data-testid="repo-dropdown-error"
className="text-red-500 text-sm mt-1"
>
{t("HOME$FAILED_TO_LOAD_REPOSITORIES")}
</div>
)}
</>
);
}
@@ -1,79 +0,0 @@
import { useCallback, useMemo } from "react";
import AsyncSelect from "react-select/async";
import { cn } from "#/utils/utils";
import { SelectOptionBase, getCustomStyles } from "./react-select-styles";
export type AsyncSelectOption = SelectOptionBase;
export interface ReactSelectAsyncDropdownProps {
loadOptions: (inputValue: string) => Promise<AsyncSelectOption[]>;
testId?: string;
placeholder?: string;
value?: AsyncSelectOption | null;
defaultValue?: AsyncSelectOption | null;
className?: string;
errorMessage?: string;
disabled?: boolean;
isClearable?: boolean;
isLoading?: boolean;
cacheOptions?: boolean;
defaultOptions?: boolean | AsyncSelectOption[];
onChange?: (option: AsyncSelectOption | null) => void;
onMenuScrollToBottom?: () => void;
}
export function ReactSelectAsyncDropdown({
loadOptions,
testId,
placeholder = "Search...",
value,
defaultValue,
className,
errorMessage,
disabled = false,
isClearable = false,
isLoading = false,
cacheOptions = true,
defaultOptions = true,
onChange,
onMenuScrollToBottom,
}: ReactSelectAsyncDropdownProps) {
const customStyles = useMemo(() => getCustomStyles<AsyncSelectOption>(), []);
const handleLoadOptions = useCallback(
(inputValue: string, callback: (options: AsyncSelectOption[]) => void) => {
loadOptions(inputValue)
.then((options) => callback(options))
.catch(() => callback([]));
},
[loadOptions],
);
return (
<div data-testid={testId} className={cn("w-full", className)}>
<AsyncSelect
loadOptions={handleLoadOptions}
value={value}
defaultValue={defaultValue}
placeholder={placeholder}
isDisabled={disabled}
isClearable={isClearable}
isLoading={isLoading}
cacheOptions={cacheOptions}
defaultOptions={defaultOptions}
onChange={onChange}
onMenuScrollToBottom={onMenuScrollToBottom}
styles={customStyles}
className="w-full"
/>
{errorMessage && (
<p
data-testid="repo-dropdown-error"
className="text-red-500 text-sm mt-1"
>
{errorMessage}
</p>
)}
</div>
);
}
@@ -1,57 +0,0 @@
import { useMemo } from "react";
import Select from "react-select";
import { cn } from "#/utils/utils";
import { SelectOptionBase, getCustomStyles } from "./react-select-styles";
export type SelectOption = SelectOptionBase;
export interface ReactSelectDropdownProps {
options: SelectOption[];
placeholder?: string;
value?: SelectOption | null;
defaultValue?: SelectOption | null;
className?: string;
errorMessage?: string;
disabled?: boolean;
isClearable?: boolean;
isSearchable?: boolean;
isLoading?: boolean;
onChange?: (option: SelectOption | null) => void;
}
export function ReactSelectDropdown({
options,
placeholder = "Select option...",
value,
defaultValue,
className,
errorMessage,
disabled = false,
isClearable = false,
isSearchable = true,
isLoading = false,
onChange,
}: ReactSelectDropdownProps) {
const customStyles = useMemo(() => getCustomStyles<SelectOption>(), []);
return (
<div className={cn("w-full", className)}>
<Select
options={options}
value={value}
defaultValue={defaultValue}
placeholder={placeholder}
isDisabled={disabled}
isClearable={isClearable}
isSearchable={isSearchable}
isLoading={isLoading}
onChange={onChange}
styles={customStyles}
className="w-full"
/>
{errorMessage && (
<p className="text-red-500 text-sm mt-1">{errorMessage}</p>
)}
</div>
);
}
@@ -1,92 +0,0 @@
import { StylesConfig } from "react-select";
export interface SelectOptionBase {
value: string;
label: string;
}
export const getCustomStyles = <T extends SelectOptionBase>(): StylesConfig<
T,
false
> => ({
control: (provided, state) => ({
...provided,
backgroundColor: state.isDisabled ? "#363636" : "#454545", // darker tertiary when disabled
border: "1px solid #717888",
borderRadius: "0.125rem",
minHeight: "2.5rem",
padding: "0 0.5rem",
boxShadow: state.isFocused ? "0 0 0 1px #717888" : "none",
opacity: state.isDisabled ? 0.6 : 1,
cursor: state.isDisabled ? "not-allowed" : "pointer",
"&:hover": {
borderColor: "#717888",
},
}),
input: (provided) => ({
...provided,
color: "#ECEDEE", // content
}),
placeholder: (provided) => ({
...provided,
fontStyle: "italic",
color: "#B7BDC2", // tertiary-light
}),
singleValue: (provided, state) => ({
...provided,
color: state.isDisabled ? "#B7BDC2" : "#ECEDEE", // tertiary-light when disabled, content otherwise
}),
menu: (provided) => ({
...provided,
backgroundColor: "#454545", // tertiary
border: "1px solid #717888",
borderRadius: "0.75rem",
overflow: "hidden", // ensure menu items don't overflow rounded corners
}),
menuList: (provided) => ({
...provided,
padding: "0.25rem", // add some padding around menu items
}),
option: (provided, state) => {
let backgroundColor = "transparent";
if (state.isSelected) {
backgroundColor = "#C9B974"; // primary for selected
} else if (state.isFocused) {
backgroundColor = "#24272E"; // base-secondary for hover/focus
}
return {
...provided,
backgroundColor,
color: state.isSelected ? "#000000" : "#ECEDEE", // black text on yellow, white on gray
borderRadius: "0.5rem", // rounded menu items
margin: "0.125rem 0", // small gap between items
"&:hover": {
backgroundColor: state.isSelected ? "#C9B974" : "#24272E", // keep yellow if selected, else gray
color: state.isSelected ? "#000000" : "#ECEDEE", // maintain text color on hover
},
"&:active": {
backgroundColor: state.isSelected ? "#C9B974" : "#24272E",
color: state.isSelected ? "#000000" : "#ECEDEE",
},
};
},
clearIndicator: (provided) => ({
...provided,
color: "#B7BDC2", // tertiary-light
"&:hover": {
color: "#ECEDEE", // content
},
}),
dropdownIndicator: (provided) => ({
...provided,
color: "#B7BDC2", // tertiary-light
"&:hover": {
color: "#ECEDEE", // content
},
}),
loadingIndicator: (provided) => ({
...provided,
color: "#B7BDC2", // tertiary-light
}),
});
@@ -9,6 +9,7 @@ import { CopyToClipboardButton } from "#/components/shared/buttons/copy-to-clipb
import { anchor } from "../markdown/anchor";
import { OpenHandsSourceType } from "#/types/core/base";
import { paragraph } from "../markdown/paragraph";
import { TooltipButton } from "#/components/shared/buttons/tooltip-button";
interface ChatMessageProps {
type: OpenHandsSourceType;
@@ -16,6 +17,7 @@ interface ChatMessageProps {
actions?: Array<{
icon: React.ReactNode;
onClick: () => void;
tooltip?: string;
}>;
}
@@ -66,17 +68,35 @@ export function ChatMessage({
"items-center gap-1",
)}
>
{actions?.map((action, index) => (
<button
key={index}
type="button"
onClick={action.onClick}
className="button-base p-1 cursor-pointer"
aria-label={`Action ${index + 1}`}
>
{action.icon}
</button>
))}
{actions?.map((action, index) =>
action.tooltip ? (
<TooltipButton
key={index}
tooltip={action.tooltip}
ariaLabel={action.tooltip}
placement="top"
>
<button
type="button"
onClick={action.onClick}
className="button-base p-1 cursor-pointer"
aria-label={`Action ${index + 1}`}
>
{action.icon}
</button>
</TooltipButton>
) : (
<button
key={index}
type="button"
onClick={action.onClick}
className="button-base p-1 cursor-pointer"
aria-label={`Action ${index + 1}`}
>
{action.icon}
</button>
),
)}
<CopyToClipboardButton
isHidden={!isHovering}
@@ -72,6 +72,9 @@ const getRecallObservationContent = (event: RecallObservation): string => {
if (event.extras.repo_instructions) {
content += `\n\n**Repository Instructions:**\n\n${event.extras.repo_instructions}`;
}
if (event.extras.conversation_instructions) {
content += `\n\n**Conversation Instructions:**\n\n${event.extras.conversation_instructions}`;
}
if (event.extras.additional_agent_instructions) {
content += `\n\n**Additional Instructions:**\n\n${event.extras.additional_agent_instructions}`;
}
@@ -46,6 +46,7 @@ interface EventMessageProps {
actions?: Array<{
icon: React.ReactNode;
onClick: () => void;
tooltip?: string;
}>;
isInLast10Actions: boolean;
}
@@ -1,4 +1,5 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { createPortal } from "react-dom";
import { OpenHandsAction } from "#/types/core/actions";
import { OpenHandsObservation } from "#/types/core/observations";
@@ -24,6 +25,17 @@ import { AgentState } from "#/types/agent-state";
import { getFirstPRUrl } from "#/utils/parse-pr-url";
import MemoryIcon from "#/icons/memory_icon.svg?react";
const isErrorEvent = (evt: unknown): evt is { error: true; message: string } =>
typeof evt === "object" &&
evt !== null &&
"error" in evt &&
evt.error === true;
const isAgentStatusError = (evt: unknown): boolean =>
isOpenHandsEvent(evt) &&
isAgentStateChangeObservation(evt) &&
evt.extras.agent_state === AgentState.ERROR;
interface MessagesProps {
messages: (OpenHandsAction | OpenHandsObservation)[];
isAwaitingUserConfirmation: boolean;
@@ -31,8 +43,11 @@ interface MessagesProps {
export const Messages: React.FC<MessagesProps> = React.memo(
({ messages, isAwaitingUserConfirmation }) => {
const { createConversationAndSubscribe, isPending } =
useCreateConversationAndSubscribeMultiple();
const {
createConversationAndSubscribe,
isPending,
unsubscribeFromConversation,
} = useCreateConversationAndSubscribeMultiple();
const { getOptimisticUserMessage } = useOptimisticUserMessage();
const { conversationId } = useConversationId();
const { data: conversation } = useUserConversation(conversationId);
@@ -48,6 +63,8 @@ export const Messages: React.FC<MessagesProps> = React.memo(
EventMicroagentStatus[]
>([]);
const { t } = useTranslation();
const actionHasObservationPair = React.useCallback(
(event: OpenHandsAction | OpenHandsObservation): boolean => {
if (isOpenHandsAction(event)) {
@@ -93,20 +110,6 @@ export const Messages: React.FC<MessagesProps> = React.memo(
const handleMicroagentEvent = React.useCallback(
(socketEvent: unknown, microagentConversationId: string) => {
// Handle error events
const isErrorEvent = (
evt: unknown,
): evt is { error: true; message: string } =>
typeof evt === "object" &&
evt !== null &&
"error" in evt &&
evt.error === true;
const isAgentStatusError = (evt: unknown): boolean =>
isOpenHandsEvent(evt) &&
isAgentStateChangeObservation(evt) &&
evt.extras.agent_state === AgentState.ERROR;
if (isErrorEvent(socketEvent) || isAgentStatusError(socketEvent)) {
setMicroagentStatuses((prev) =>
prev.map((statusEntry) =>
@@ -119,7 +122,11 @@ export const Messages: React.FC<MessagesProps> = React.memo(
isOpenHandsEvent(socketEvent) &&
isAgentStateChangeObservation(socketEvent)
) {
if (socketEvent.extras.agent_state === AgentState.FINISHED) {
// Handle completion states
if (
socketEvent.extras.agent_state === AgentState.FINISHED ||
socketEvent.extras.agent_state === AgentState.AWAITING_USER_INPUT
) {
setMicroagentStatuses((prev) =>
prev.map((statusEntry) =>
statusEntry.conversationId === microagentConversationId
@@ -127,6 +134,8 @@ export const Messages: React.FC<MessagesProps> = React.memo(
: statusEntry,
),
);
unsubscribeFromConversation(microagentConversationId);
}
} else if (
isOpenHandsEvent(socketEvent) &&
@@ -147,9 +156,27 @@ export const Messages: React.FC<MessagesProps> = React.memo(
),
);
}
unsubscribeFromConversation(microagentConversationId);
} else {
// For any other event, transition from WAITING to CREATING if still waiting
setMicroagentStatuses((prev) => {
const currentStatus = prev.find(
(entry) => entry.conversationId === microagentConversationId,
)?.status;
if (currentStatus === MicroagentStatus.WAITING) {
return prev.map((statusEntry) =>
statusEntry.conversationId === microagentConversationId
? { ...statusEntry, status: MicroagentStatus.CREATING }
: statusEntry,
);
}
return prev; // No change needed
});
}
},
[setMicroagentStatuses],
[setMicroagentStatuses, unsubscribeFromConversation],
);
const handleLaunchMicroagent = (
@@ -178,13 +205,13 @@ export const Messages: React.FC<MessagesProps> = React.memo(
},
onSuccessCallback: (newConversationId: string) => {
setShowLaunchMicroagentModal(false);
// Update status with conversation ID
// Update status with conversation ID - start with WAITING
setMicroagentStatuses((prev) => [
...prev.filter((status) => status.eventId !== selectedEventId),
{
eventId: selectedEventId,
conversationId: newConversationId,
status: MicroagentStatus.CREATING,
status: MicroagentStatus.WAITING,
},
]);
},
@@ -219,6 +246,7 @@ export const Messages: React.FC<MessagesProps> = React.memo(
setSelectedEventId(message.id);
setShowLaunchMicroagentModal(true);
},
tooltip: t("MICROAGENT$ADD_TO_MEMORY"),
},
]
: undefined
@@ -76,6 +76,10 @@ export function LaunchMicroagentModal({
</button>
</div>
<span className="text-sm text-[#A3A3A3] font-normal leading-5">
{t("MICROAGENT$DEFINITION")}
</span>
<form
data-testid="launch-microagent-modal"
onSubmit={onSubmit}
@@ -19,6 +19,8 @@ export function MicroagentStatusIndicator({
const getStatusText = () => {
switch (status) {
case MicroagentStatus.WAITING:
return t("MICROAGENT$STATUS_WAITING");
case MicroagentStatus.CREATING:
return t("MICROAGENT$STATUS_CREATING");
case MicroagentStatus.COMPLETED:
@@ -35,6 +37,8 @@ export function MicroagentStatusIndicator({
const getStatusIcon = () => {
switch (status) {
case MicroagentStatus.WAITING:
return <Spinner size="sm" />;
case MicroagentStatus.CREATING:
return <Spinner size="sm" />;
case MicroagentStatus.COMPLETED:
@@ -10,6 +10,11 @@ interface ConversationCreatedToastProps {
onClose: () => void;
}
interface ConversationStartingToastProps {
conversationId: string;
onClose: () => void;
}
function ConversationCreatedToast({
conversationId,
onClose,
@@ -37,6 +42,33 @@ function ConversationCreatedToast({
);
}
function ConversationStartingToast({
conversationId,
onClose,
}: ConversationStartingToastProps) {
const { t } = useTranslation();
return (
<div className="flex items-start gap-2">
<Spinner size="sm" />
<div>
{t("MICROAGENT$CONVERSATION_STARTING")}
<br />
<a
href={`/conversations/${conversationId}`}
target="_blank"
rel="noopener noreferrer"
className="underline"
>
{t("MICROAGENT$VIEW_CONVERSATION")}
</a>
</div>
<button type="button" onClick={onClose}>
<CloseIcon />
</button>
</div>
);
}
interface ConversationFinishedToastProps {
conversationId: string;
onClose: () => void;
@@ -78,10 +110,18 @@ function ConversationErroredToast({
errorMessage,
onClose,
}: ConversationErroredToastProps) {
const { t } = useTranslation();
// Check if the error message is a translation key
const displayMessage =
errorMessage === "MICROAGENT$UNKNOWN_ERROR"
? t(errorMessage)
: errorMessage;
return (
<div className="flex items-start gap-2">
<SuccessIndicator status="error" />
<div>{errorMessage}</div>
<div>{displayMessage}</div>
<button type="button" onClick={onClose}>
<CloseIcon />
</button>
@@ -136,3 +176,18 @@ export const renderConversationErroredToast = (
duration: 5000,
},
);
export const renderConversationStartingToast = (conversationId: string) =>
toast(
(toastInstance) => (
<ConversationStartingToast
conversationId={conversationId}
onClose={() => toast.dismiss(toastInstance.id)}
/>
),
{
...TOAST_OPTIONS,
id: `starting-${conversationId}`,
duration: 10000, // Show for 10 seconds or until dismissed
},
);
@@ -7,11 +7,10 @@ import { ConversationCard } from "../conversation-panel/conversation-card";
import { Provider } from "#/types/settings";
interface ControlsProps {
setSecurityOpen: (isOpen: boolean) => void;
showSecurityLock: boolean;
}
export function Controls({ setSecurityOpen, showSecurityLock }: ControlsProps) {
export function Controls({ showSecurityLock }: ControlsProps) {
const { data: conversation } = useActiveConversation();
const [contextMenuOpen, setContextMenuOpen] = React.useState(false);
@@ -21,9 +20,7 @@ export function Controls({ setSecurityOpen, showSecurityLock }: ControlsProps) {
<AgentControlBar />
<AgentStatusBar />
{showSecurityLock && (
<SecurityLock onClick={() => setSecurityOpen(true)} />
)}
{showSecurityLock && <SecurityLock />}
</div>
<ConversationCard
@@ -1,17 +1,28 @@
import { IoLockClosed } from "react-icons/io5";
import { Tooltip } from "@heroui/react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { I18nKey } from "#/i18n/declaration";
interface SecurityLockProps {
onClick: () => void;
}
export function SecurityLock() {
const { t } = useTranslation();
export function SecurityLock({ onClick }: SecurityLockProps) {
return (
<div
className="cursor-pointer hover:opacity-80 transition-all"
style={{ marginRight: "8px" }}
onClick={onClick}
<Tooltip
content={
<div className="max-w-xs p-2">
{t(I18nKey.SETTINGS$CONFIRMATION_MODE_LOCK_TOOLTIP)}
</div>
}
placement="top"
>
<IoLockClosed size={20} />
</div>
<Link
to="/settings"
className="mr-2 cursor-pointer hover:opacity-80 transition-all"
aria-label={t(I18nKey.SETTINGS$TITLE)}
>
<IoLockClosed size={20} />
</Link>
</Tooltip>
);
}
@@ -23,9 +23,9 @@ export function ConfirmStopModal({
<ModalBackdrop>
<ModalBody className="items-start border border-tertiary">
<div className="flex flex-col gap-2">
<BaseModalTitle title={t(I18nKey.CONVERSATION$CONFIRM_STOP)} />
<BaseModalTitle title={t(I18nKey.CONVERSATION$CONFIRM_PAUSE)} />
<BaseModalDescription
description={t(I18nKey.CONVERSATION$STOP_WARNING)}
description={t(I18nKey.CONVERSATION$PAUSE_WARNING)}
/>
</div>
<div
@@ -129,7 +129,7 @@ export function ConversationCardContextMenu({
{onStop && (
<ContextMenuListItem testId="stop-button" onClick={onStop}>
<ContextMenuIconText icon={Power} text={t(I18nKey.BUTTON$STOP)} />
<ContextMenuIconText icon={Power} text={t(I18nKey.BUTTON$PAUSE)} />
</ContextMenuListItem>
)}
@@ -1,4 +1,6 @@
import { ConversationStatus } from "#/types/conversation-status";
import ArchivedIcon from "./state-indicators/archived.svg?react";
import ErrorIcon from "./state-indicators/error.svg?react";
import RunningIcon from "./state-indicators/running.svg?react";
import StartingIcon from "./state-indicators/starting.svg?react";
import StoppedIcon from "./state-indicators/stopped.svg?react";
@@ -9,6 +11,8 @@ const CONVERSATION_STATUS_INDICATORS: Record<ConversationStatus, SVGIcon> = {
STOPPED: StoppedIcon,
RUNNING: RunningIcon,
STARTING: StartingIcon,
ARCHIVED: ArchivedIcon,
ERROR: ErrorIcon,
};
interface ConversationStateIndicatorProps {
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#A7A9AC"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 7h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.43-.98 2.63-2.31 2.98l1.46 1.46C20.88 15.61 22 13.95 22 12c0-2.76-2.24-5-5-5zm-1 4h-2.19l2 2H16zM2 4.27l3.11 3.11C3.29 8.12 2 9.91 2 12c0 2.76 2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1 0-1.59 1.21-2.9 2.76-3.07L8.73 11H8v2h2.73L13 15.27V17h1.73l4.01 4L20 19.74 3.27 3 2 4.27z"/><path d="M0 24V0" fill="none"/></svg>

After

Width:  |  Height:  |  Size: 512 B

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e7000b"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>

After

Width:  |  Height:  |  Size: 254 B

@@ -0,0 +1,86 @@
import React from "react";
import {
UseComboboxGetMenuPropsOptions,
UseComboboxGetItemPropsOptions,
} from "downshift";
import { Branch } from "#/types/git";
import { DropdownItem } from "../shared/dropdown-item";
import { GenericDropdownMenu, EmptyState } from "../shared";
export interface BranchDropdownMenuProps {
isOpen: boolean;
filteredBranches: Branch[];
inputValue: string;
highlightedIndex: number;
selectedItem: Branch | null;
getMenuProps: <Options>(
options?: UseComboboxGetMenuPropsOptions & Options,
) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
getItemProps: <Options>(
options: UseComboboxGetItemPropsOptions<Branch> & Options,
) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
onScroll: (event: React.UIEvent<HTMLUListElement>) => void;
menuRef: React.RefObject<HTMLUListElement | null>;
}
export function BranchDropdownMenu({
isOpen,
filteredBranches,
inputValue,
highlightedIndex,
selectedItem,
getMenuProps,
getItemProps,
onScroll,
menuRef,
}: BranchDropdownMenuProps) {
const renderItem = (
branch: Branch,
index: number,
currentHighlightedIndex: number,
currentSelectedItem: Branch | null,
currentGetItemProps: <Options>(
options: UseComboboxGetItemPropsOptions<Branch> & Options,
) => any, // eslint-disable-line @typescript-eslint/no-explicit-any
) => (
<DropdownItem
key={branch.name}
item={branch}
index={index}
isHighlighted={currentHighlightedIndex === index}
isSelected={currentSelectedItem?.name === branch.name}
getItemProps={currentGetItemProps}
getDisplayText={(branchItem) => branchItem.name}
getItemKey={(branchItem) => branchItem.name}
/>
);
const renderEmptyState = (currentInputValue: string) => (
<li className="px-3 py-2">
<EmptyState
inputValue={currentInputValue}
searchMessage="No branches found"
emptyMessage="No branches available"
testId="git-branch-dropdown-empty"
/>
</li>
);
return (
<div data-testid="git-branch-dropdown-menu">
<GenericDropdownMenu
isOpen={isOpen}
filteredItems={filteredBranches}
inputValue={inputValue}
highlightedIndex={highlightedIndex}
selectedItem={selectedItem}
getMenuProps={getMenuProps}
getItemProps={getItemProps}
onScroll={onScroll}
menuRef={menuRef}
renderItem={renderItem}
renderEmptyState={renderEmptyState}
/>
</div>
);
}
@@ -0,0 +1,236 @@
import React, {
useState,
useMemo,
useCallback,
useRef,
useEffect,
} from "react";
import { useCombobox } from "downshift";
import { Branch } from "#/types/git";
import { Provider } from "#/types/settings";
import { useDebounce } from "#/hooks/use-debounce";
import { cn } from "#/utils/utils";
import { useBranchData } from "#/hooks/query/use-branch-data";
import { LoadingSpinner } from "../shared/loading-spinner";
import { ClearButton } from "../shared/clear-button";
import { ToggleButton } from "../shared/toggle-button";
import { ErrorMessage } from "../shared/error-message";
import { BranchDropdownMenu } from "./branch-dropdown-menu";
export interface GitBranchDropdownProps {
repository: string | null;
provider: Provider;
selectedBranch: Branch | null;
onBranchSelect: (branch: Branch | null) => void;
defaultBranch?: string | null;
placeholder?: string;
disabled?: boolean;
className?: string;
}
export function GitBranchDropdown({
repository,
provider,
selectedBranch,
onBranchSelect,
defaultBranch,
placeholder = "Select branch...",
disabled = false,
className,
}: GitBranchDropdownProps) {
const [inputValue, setInputValue] = useState("");
const [userManuallyCleared, setUserManuallyCleared] = useState(false);
const debouncedInputValue = useDebounce(inputValue, 300);
const menuRef = useRef<HTMLUListElement>(null);
// Process search input (debounced and filtered)
const processedSearchInput = useMemo(
() =>
debouncedInputValue.trim().length > 0 ? debouncedInputValue.trim() : "",
[debouncedInputValue],
);
// Use the new branch data hook with default branch prioritization
const {
branches: filteredBranches,
isLoading,
isError,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
isSearchLoading,
} = useBranchData(
repository,
provider,
defaultBranch || null,
processedSearchInput,
inputValue,
selectedBranch,
);
const error = isError ? new Error("Failed to load branches") : null;
// Handle clear
const handleClear = useCallback(() => {
setInputValue("");
onBranchSelect(null);
setUserManuallyCleared(true); // Mark that user manually cleared the branch
}, [onBranchSelect]);
// Handle branch selection
const handleBranchSelect = useCallback(
(branch: Branch | null) => {
onBranchSelect(branch);
setInputValue("");
},
[onBranchSelect],
);
// Handle input value change
const handleInputValueChange = useCallback(
({ inputValue: newInputValue }: { inputValue?: string }) => {
if (newInputValue !== undefined) {
setInputValue(newInputValue);
}
},
[],
);
// Handle menu scroll for infinite loading
const handleMenuScroll = useCallback(
(event: React.UIEvent<HTMLUListElement>) => {
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
if (
scrollHeight - scrollTop <= clientHeight * 1.5 &&
hasNextPage &&
!isFetchingNextPage
) {
fetchNextPage();
}
},
[hasNextPage, isFetchingNextPage, fetchNextPage],
);
// Downshift configuration
const {
isOpen,
selectedItem,
highlightedIndex,
getInputProps,
getItemProps,
getMenuProps,
getToggleButtonProps,
} = useCombobox({
items: filteredBranches,
selectedItem: selectedBranch,
itemToString: (item) => item?.name || "",
onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
handleBranchSelect(newSelectedItem || null);
},
onInputValueChange: handleInputValueChange,
inputValue,
});
// Reset branch selection when repository changes
useEffect(() => {
if (repository) {
onBranchSelect(null);
setUserManuallyCleared(false); // Reset the manual clear flag when repository changes
}
}, [repository, onBranchSelect]);
// Auto-select default branch when branches are loaded and no branch is selected
// But only if the user hasn't manually cleared the branch
useEffect(() => {
if (
repository &&
defaultBranch &&
!selectedBranch &&
!userManuallyCleared && // Don't auto-select if user manually cleared
filteredBranches.length > 0 &&
!isLoading
) {
const defaultBranchObj = filteredBranches.find(
(branch) => branch.name === defaultBranch,
);
if (defaultBranchObj) {
onBranchSelect(defaultBranchObj);
}
}
}, [
repository,
defaultBranch,
selectedBranch,
userManuallyCleared,
filteredBranches,
onBranchSelect,
isLoading,
]);
// Reset input when repository changes
useEffect(() => {
setInputValue("");
}, [repository]);
// Initialize input value when selectedBranch changes (but not when user is typing)
useEffect(() => {
if (selectedBranch && !isOpen && inputValue !== selectedBranch.name) {
setInputValue(selectedBranch.name);
} else if (!selectedBranch && !isOpen && inputValue) {
setInputValue("");
}
}, [selectedBranch, isOpen, inputValue]);
const isLoadingState = isLoading || isSearchLoading || isFetchingNextPage;
return (
<div className={cn("relative", className)}>
<div className="relative">
<input
// eslint-disable-next-line react/jsx-props-no-spreading
{...getInputProps({
disabled: disabled || !repository,
placeholder,
className: cn(
"w-full px-3 py-2 border border-[#717888] rounded-sm shadow-sm min-h-[2.5rem]",
"bg-[#454545] text-[#ECEDEE] placeholder:text-[#B7BDC2] placeholder:italic",
"focus:outline-none focus:ring-1 focus:ring-[#717888] focus:border-[#717888]",
"disabled:bg-[#363636] disabled:cursor-not-allowed disabled:opacity-60",
"pr-10", // Space for toggle button
),
})}
data-testid="git-branch-dropdown-input"
/>
<div className="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center gap-1">
{selectedBranch && (
<ClearButton disabled={disabled} onClear={handleClear} />
)}
<ToggleButton
isOpen={isOpen}
disabled={disabled || !repository}
getToggleButtonProps={getToggleButtonProps}
/>
</div>
{isLoadingState && <LoadingSpinner hasSelection={!!selectedBranch} />}
</div>
<BranchDropdownMenu
isOpen={isOpen}
filteredBranches={filteredBranches}
inputValue={inputValue}
highlightedIndex={highlightedIndex}
selectedItem={selectedItem}
getMenuProps={getMenuProps}
getItemProps={getItemProps}
onScroll={handleMenuScroll}
menuRef={menuRef}
/>
<ErrorMessage isError={!!error} />
</div>
);
}
@@ -0,0 +1,3 @@
export { GitBranchDropdown } from "./git-branch-dropdown";
export { BranchDropdownMenu } from "./branch-dropdown-menu";
export type { GitBranchDropdownProps } from "./git-branch-dropdown";
@@ -0,0 +1,193 @@
import React, { useState, useMemo, useEffect } from "react";
import { useCombobox } from "downshift";
import { Provider } from "#/types/settings";
import { cn } from "#/utils/utils";
import { DropdownItem } from "../shared/dropdown-item";
import { GenericDropdownMenu } from "../shared/generic-dropdown-menu";
import { ToggleButton } from "../shared/toggle-button";
import { LoadingSpinner } from "../shared/loading-spinner";
import { ErrorMessage } from "../shared/error-message";
import { EmptyState } from "../shared/empty-state";
export interface GitProviderDropdownProps {
providers: Provider[];
value?: Provider | null;
placeholder?: string;
className?: string;
errorMessage?: string;
disabled?: boolean;
isLoading?: boolean;
onChange?: (provider: Provider | null) => void;
}
export function GitProviderDropdown({
providers,
value,
placeholder = "Select Provider",
className,
errorMessage,
disabled = false,
isLoading = false,
onChange,
}: GitProviderDropdownProps) {
const [inputValue, setInputValue] = useState("");
const [localSelectedItem, setLocalSelectedItem] = useState<Provider | null>(
value || null,
);
// Format provider names for display
const formatProviderName = (provider: Provider): string => {
switch (provider) {
case "github":
return "GitHub";
case "gitlab":
return "GitLab";
case "bitbucket":
return "Bitbucket";
case "enterprise_sso":
return "Enterprise SSO";
default:
// Fallback for any future provider types
return (
(provider as string).charAt(0).toUpperCase() +
(provider as string).slice(1)
);
}
};
// Filter providers based on input value
const filteredProviders = useMemo(() => {
// If we have a selected provider and the input matches it exactly, show all providers
if (
localSelectedItem &&
inputValue === formatProviderName(localSelectedItem)
) {
return providers;
}
// If no input value, show all providers
if (!inputValue || !inputValue.trim()) {
return providers;
}
// Filter providers based on input
return providers.filter((provider) =>
formatProviderName(provider)
.toLowerCase()
.includes(inputValue.toLowerCase()),
);
}, [providers, inputValue, localSelectedItem]);
const {
isOpen,
getToggleButtonProps,
getMenuProps,
getInputProps,
highlightedIndex,
getItemProps,
selectedItem,
} = useCombobox({
items: filteredProviders,
itemToString: (item) => (item ? formatProviderName(item) : ""),
selectedItem: localSelectedItem,
onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
setLocalSelectedItem(newSelectedItem || null);
onChange?.(newSelectedItem || null);
},
onInputValueChange: ({ inputValue: newInputValue }) => {
setInputValue(newInputValue || "");
},
inputValue,
});
// Sync with external value prop
useEffect(() => {
if (value !== localSelectedItem) {
setLocalSelectedItem(value || null);
}
}, [value, localSelectedItem]);
// Update input value when selection changes (but not when user is typing)
useEffect(() => {
if (selectedItem && !isOpen) {
setInputValue(formatProviderName(selectedItem));
} else if (!selectedItem) {
setInputValue("");
}
}, [selectedItem, isOpen]);
const renderItem = (
item: Provider,
index: number,
currentHighlightedIndex: number,
currentSelectedItem: Provider | null,
currentGetItemProps: any, // eslint-disable-line @typescript-eslint/no-explicit-any
) => (
<DropdownItem
key={item}
item={item}
index={index}
isHighlighted={index === currentHighlightedIndex}
isSelected={item === currentSelectedItem}
getItemProps={currentGetItemProps}
getDisplayText={formatProviderName}
getItemKey={(provider) => provider}
/>
);
const renderEmptyState = (currentInputValue: string) => (
<EmptyState
inputValue={currentInputValue}
searchMessage="No providers found"
emptyMessage="No providers available"
testId="git-provider-dropdown-empty"
/>
);
return (
<div className={cn("relative", className)}>
<div className="relative">
<input
// eslint-disable-next-line react/jsx-props-no-spreading
{...getInputProps({
disabled,
placeholder,
readOnly: true, // Make it non-searchable like the original
className: cn(
"w-full px-3 py-2 border border-[#717888] rounded-sm shadow-sm min-h-[2.5rem]",
"bg-[#454545] text-[#ECEDEE] placeholder:text-[#B7BDC2] placeholder:italic",
"focus:outline-none focus:ring-1 focus:ring-[#717888] focus:border-[#717888]",
"disabled:bg-[#363636] disabled:cursor-not-allowed disabled:opacity-60",
"pr-10 cursor-pointer", // Space for toggle button and pointer cursor
),
})}
data-testid="git-provider-dropdown"
/>
<div className="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center gap-1">
<ToggleButton
isOpen={isOpen}
disabled={disabled}
getToggleButtonProps={getToggleButtonProps}
/>
</div>
{isLoading && <LoadingSpinner hasSelection={!!selectedItem} />}
</div>
<GenericDropdownMenu
isOpen={isOpen}
filteredItems={filteredProviders}
inputValue={inputValue}
highlightedIndex={highlightedIndex}
selectedItem={selectedItem}
getMenuProps={getMenuProps}
getItemProps={getItemProps}
renderItem={renderItem}
renderEmptyState={renderEmptyState}
/>
<ErrorMessage isError={!!errorMessage} message={errorMessage} />
</div>
);
}
@@ -0,0 +1,2 @@
export { GitProviderDropdown } from "./git-provider-dropdown";
export type { GitProviderDropdownProps } from "./git-provider-dropdown";
@@ -0,0 +1,79 @@
import React from "react";
import {
UseComboboxGetMenuPropsOptions,
UseComboboxGetItemPropsOptions,
} from "downshift";
import { GitRepository } from "#/types/git";
import { DropdownItem } from "../shared/dropdown-item";
import { GenericDropdownMenu, EmptyState } from "../shared";
interface DropdownMenuProps {
isOpen: boolean;
filteredRepositories: GitRepository[];
inputValue: string;
highlightedIndex: number;
selectedItem: GitRepository | null;
getMenuProps: <Options>(
options?: UseComboboxGetMenuPropsOptions & Options,
) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
getItemProps: <Options>(
options: UseComboboxGetItemPropsOptions<GitRepository> & Options,
) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
onScroll: (event: React.UIEvent<HTMLUListElement>) => void;
menuRef: React.RefObject<HTMLUListElement | null>;
}
export function DropdownMenu({
isOpen,
filteredRepositories,
inputValue,
highlightedIndex,
selectedItem,
getMenuProps,
getItemProps,
onScroll,
menuRef,
}: DropdownMenuProps) {
const renderItem = (
repository: GitRepository,
index: number,
currentHighlightedIndex: number,
currentSelectedItem: GitRepository | null,
currentGetItemProps: <Options>(
options: UseComboboxGetItemPropsOptions<GitRepository> & Options,
) => any, // eslint-disable-line @typescript-eslint/no-explicit-any
) => (
<DropdownItem
key={repository.id}
item={repository}
index={index}
isHighlighted={currentHighlightedIndex === index}
isSelected={currentSelectedItem?.id === repository.id}
getItemProps={currentGetItemProps}
getDisplayText={(repo) => repo.full_name}
getItemKey={(repo) => repo.id.toString()}
/>
);
const renderEmptyState = (currentInputValue: string) => (
<EmptyState inputValue={currentInputValue} />
);
return (
<div data-testid="git-repo-dropdown-menu">
<GenericDropdownMenu
isOpen={isOpen}
filteredItems={filteredRepositories}
inputValue={inputValue}
highlightedIndex={highlightedIndex}
selectedItem={selectedItem}
getMenuProps={getMenuProps}
getItemProps={getItemProps}
onScroll={onScroll}
menuRef={menuRef}
renderItem={renderItem}
renderEmptyState={renderEmptyState}
/>
</div>
);
}
@@ -0,0 +1,243 @@
import React, {
useState,
useMemo,
useCallback,
useRef,
useEffect,
} from "react";
import { useCombobox } from "downshift";
import { Provider } from "#/types/settings";
import { GitRepository } from "#/types/git";
import { useDebounce } from "#/hooks/use-debounce";
import { cn } from "#/utils/utils";
import { LoadingSpinner } from "../shared/loading-spinner";
import { ClearButton } from "../shared/clear-button";
import { ToggleButton } from "../shared/toggle-button";
import { ErrorMessage } from "../shared/error-message";
import { useUrlSearch } from "./use-url-search";
import { useRepositoryData } from "./use-repository-data";
import { DropdownMenu } from "./dropdown-menu";
export interface GitRepoDropdownProps {
provider: Provider;
value?: string | null;
placeholder?: string;
className?: string;
disabled?: boolean;
onChange?: (repository?: GitRepository) => void;
}
export function GitRepoDropdown({
provider,
value,
placeholder = "Search repositories...",
className,
disabled = false,
onChange,
}: GitRepoDropdownProps) {
const [inputValue, setInputValue] = useState("");
const [localSelectedItem, setLocalSelectedItem] =
useState<GitRepository | null>(null);
const debouncedInputValue = useDebounce(inputValue, 300);
const menuRef = useRef<HTMLUListElement>(null);
// Process search input to handle URLs
const processedSearchInput = useMemo(() => {
if (debouncedInputValue.startsWith("https://")) {
const match = debouncedInputValue.match(
/https:\/\/[^/]+\/([^/]+\/[^/]+)/,
);
return match ? match[1] : debouncedInputValue;
}
return debouncedInputValue;
}, [debouncedInputValue]);
// URL search functionality
const { urlSearchResults, isUrlSearchLoading } = useUrlSearch(
inputValue,
provider,
);
// Repository data management
const {
repositories,
selectedRepository,
fetchNextPage,
hasNextPage,
isLoading,
isFetchingNextPage,
isError,
isSearchLoading,
} = useRepositoryData(
provider,
disabled,
processedSearchInput,
urlSearchResults,
inputValue,
value,
);
// Filter repositories based on input value
const filteredRepositories = useMemo(() => {
// If we have URL search results, show them directly (no filtering needed)
if (urlSearchResults.length > 0) {
return repositories;
}
// If we have a selected repository and the input matches it exactly, show all repositories
if (selectedRepository && inputValue === selectedRepository.full_name) {
return repositories;
}
// If no input value, show all repositories
if (!inputValue || !inputValue.trim()) {
return repositories;
}
// For URL inputs, use the processed search input for filtering
const filterText = inputValue.startsWith("https://")
? processedSearchInput
: inputValue;
return repositories.filter((repo) =>
repo.full_name.toLowerCase().includes(filterText.toLowerCase()),
);
}, [
repositories,
inputValue,
selectedRepository,
urlSearchResults,
processedSearchInput,
]);
// Handle selection
const handleSelectionChange = useCallback(
(selectedItem: GitRepository | null) => {
setLocalSelectedItem(selectedItem);
onChange?.(selectedItem || undefined);
// Update input value to show selected item
if (selectedItem) {
setInputValue(selectedItem.full_name);
}
},
[onChange],
);
// Handle clear selection
const handleClear = useCallback(() => {
setLocalSelectedItem(null);
handleSelectionChange(null);
setInputValue("");
}, [handleSelectionChange]);
// Handle input value change
const handleInputValueChange = useCallback(
({ inputValue: newInputValue }: { inputValue?: string }) => {
setInputValue(newInputValue || "");
},
[],
);
// Handle scroll to bottom for pagination
const handleMenuScroll = useCallback(
(event: React.UIEvent<HTMLUListElement>) => {
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
const isNearBottom = scrollTop + clientHeight >= scrollHeight - 10;
if (isNearBottom && hasNextPage && !isFetchingNextPage) {
fetchNextPage();
}
},
[hasNextPage, isFetchingNextPage, fetchNextPage],
);
const {
isOpen,
getToggleButtonProps,
getMenuProps,
getInputProps,
highlightedIndex,
getItemProps,
selectedItem,
} = useCombobox({
items: filteredRepositories,
itemToString: (item) => item?.full_name || "",
selectedItem: localSelectedItem,
onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
handleSelectionChange(newSelectedItem);
},
onInputValueChange: handleInputValueChange,
inputValue,
});
// Sync localSelectedItem with external value prop
useEffect(() => {
if (selectedRepository) {
setLocalSelectedItem(selectedRepository);
} else if (value === null) {
setLocalSelectedItem(null);
}
}, [selectedRepository, value]);
// Initialize input value when selectedRepository changes (but not when user is typing)
useEffect(() => {
if (selectedRepository && !isOpen) {
setInputValue(selectedRepository.full_name);
}
}, [selectedRepository, isOpen]);
const isLoadingState =
isLoading || isSearchLoading || isFetchingNextPage || isUrlSearchLoading;
return (
<div className={cn("relative", className)}>
<div className="relative">
<input
// eslint-disable-next-line react/jsx-props-no-spreading
{...getInputProps({
disabled,
placeholder,
className: cn(
"w-full px-3 py-2 border border-[#717888] rounded-sm shadow-sm min-h-[2.5rem]",
"bg-[#454545] text-[#ECEDEE] placeholder:text-[#B7BDC2] placeholder:italic",
"focus:outline-none focus:ring-1 focus:ring-[#717888] focus:border-[#717888]",
"disabled:bg-[#363636] disabled:cursor-not-allowed disabled:opacity-60",
"pr-10", // Space for toggle button
),
})}
data-testid="git-repo-dropdown"
/>
<div className="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center gap-1">
{selectedRepository && (
<ClearButton disabled={disabled} onClear={handleClear} />
)}
<ToggleButton
isOpen={isOpen}
disabled={disabled}
getToggleButtonProps={getToggleButtonProps}
/>
</div>
{isLoadingState && (
<LoadingSpinner hasSelection={!!selectedRepository} />
)}
</div>
<DropdownMenu
isOpen={isOpen}
filteredRepositories={filteredRepositories}
inputValue={inputValue}
highlightedIndex={highlightedIndex}
selectedItem={selectedItem}
getMenuProps={getMenuProps}
getItemProps={getItemProps}
onScroll={handleMenuScroll}
menuRef={menuRef}
/>
<ErrorMessage isError={isError} />
</div>
);
}
@@ -0,0 +1,10 @@
// Main component
export { GitRepoDropdown } from "./git-repo-dropdown";
export type { GitRepoDropdownProps } from "./git-repo-dropdown";
// Repository-specific UI Components
export { DropdownMenu } from "./dropdown-menu";
// Repository-specific Custom Hooks
export { useUrlSearch } from "./use-url-search";
export { useRepositoryData } from "./use-repository-data";
@@ -0,0 +1,118 @@
import { useMemo, useEffect } from "react";
import { Provider } from "#/types/settings";
import { GitRepository } from "#/types/git";
import { useGitRepositories } from "#/hooks/query/use-git-repositories";
import { useSearchRepositories } from "#/hooks/query/use-search-repositories";
export function useRepositoryData(
provider: Provider,
disabled: boolean,
processedSearchInput: string,
urlSearchResults: GitRepository[],
inputValue: string,
value?: string | null,
) {
// Fetch user repositories with pagination
const {
data: repoData,
fetchNextPage,
hasNextPage,
isLoading,
isFetchingNextPage,
isError,
} = useGitRepositories({
provider,
enabled: !disabled,
});
// Search repositories when user types
const { data: searchData, isLoading: isSearchLoading } =
useSearchRepositories(processedSearchInput, provider);
// Combine all repositories from paginated data
const allRepositories = useMemo(
() => repoData?.pages?.flatMap((page) => page.data) || [],
[repoData],
);
// Find selected repository from all possible sources
const selectedRepository = useMemo(() => {
if (!value) return null;
// Search in all possible repository sources
const allPossibleRepos = [
...allRepositories,
...urlSearchResults,
...(searchData || []),
];
return allPossibleRepos.find((repo) => repo.id === value) || null;
}, [allRepositories, urlSearchResults, searchData, value]);
// Get repositories to display (URL search, regular search, or all repos)
const repositories = useMemo(() => {
// Prioritize URL search results when available
if (urlSearchResults.length > 0) {
return urlSearchResults;
}
// Don't use search results if input exactly matches selected repository
const shouldUseSearch =
processedSearchInput &&
searchData &&
!(selectedRepository && inputValue === selectedRepository.full_name);
if (shouldUseSearch) {
return searchData;
}
return allRepositories;
}, [
urlSearchResults,
processedSearchInput,
searchData,
allRepositories,
selectedRepository,
inputValue,
]);
// Auto-load more repositories when there aren't enough items to create a scrollable dropdown
// This is particularly important for SaaS mode with installations that might have very few repos
useEffect(() => {
const shouldAutoLoad =
!disabled &&
!isLoading &&
!isFetchingNextPage &&
!isSearchLoading &&
hasNextPage &&
!processedSearchInput && // Not during search (use all repos, not search results)
urlSearchResults.length === 0 &&
repositories.length > 0 && // Have some repositories loaded
repositories.length < 10; // But not enough to create a scrollable dropdown
if (shouldAutoLoad) {
fetchNextPage();
}
}, [
disabled,
isLoading,
isFetchingNextPage,
isSearchLoading,
hasNextPage,
processedSearchInput,
urlSearchResults.length,
repositories.length,
fetchNextPage,
]);
return {
repositories,
allRepositories,
selectedRepository,
fetchNextPage,
hasNextPage,
isLoading,
isFetchingNextPage,
isError,
isSearchLoading,
};
}
@@ -0,0 +1,41 @@
import { useState, useEffect } from "react";
import { Provider } from "#/types/settings";
import { GitRepository } from "#/types/git";
import OpenHands from "#/api/open-hands";
export function useUrlSearch(inputValue: string, provider: Provider) {
const [urlSearchResults, setUrlSearchResults] = useState<GitRepository[]>([]);
const [isUrlSearchLoading, setIsUrlSearchLoading] = useState(false);
useEffect(() => {
const handleUrlSearch = async () => {
if (inputValue.startsWith("https://")) {
const match = inputValue.match(/https:\/\/[^/]+\/([^/]+\/[^/]+)/);
if (match) {
const repoName = match[1];
setIsUrlSearchLoading(true);
try {
const repositories = await OpenHands.searchGitRepositories(
repoName,
3,
provider,
);
setUrlSearchResults(repositories);
} catch (error) {
setUrlSearchResults([]);
} finally {
setIsUrlSearchLoading(false);
}
}
} else {
setUrlSearchResults([]);
}
};
handleUrlSearch();
}, [inputValue, provider]);
return { urlSearchResults, isUrlSearchLoading };
}
@@ -2,15 +2,15 @@ import React from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router";
import { useCreateConversation } from "#/hooks/mutation/use-create-conversation";
import { useRepositoryBranches } from "#/hooks/query/use-repository-branches";
// Removed useRepositoryBranches import - GitBranchDropdown manages its own data
import { useIsCreatingConversation } from "#/hooks/use-is-creating-conversation";
import { Branch, GitRepository } from "#/types/git";
import { BrandButton } from "../settings/brand-button";
import { useUserProviders } from "#/hooks/use-user-providers";
import { Provider } from "#/types/settings";
import { GitProviderDropdown } from "../../common/git-provider-dropdown";
import { GitRepositoryDropdown } from "../../common/git-repository-dropdown";
import { GitBranchDropdown } from "../../common/git-branch-dropdown";
import { GitProviderDropdown } from "./git-provider-dropdown";
import { GitBranchDropdown } from "./git-branch-dropdown";
import { GitRepoDropdown } from "./git-repo-dropdown";
interface RepositorySelectionFormProps {
onRepoSelection: (repo: GitRepository | null) => void;
@@ -28,8 +28,6 @@ export function RepositorySelectionForm({
const [selectedProvider, setSelectedProvider] =
React.useState<Provider | null>(null);
const { providers } = useUserProviders();
const { data: branches, isLoading: isLoadingBranches } =
useRepositoryBranches(selectedRepository?.full_name || null);
const {
mutate: createConversation,
isPending,
@@ -50,8 +48,7 @@ export function RepositorySelectionForm({
const isCreatingConversation =
isPending || isSuccess || isCreatingConversationElsewhere;
// Check if repository has no branches (empty array after loading completes)
const hasNoBranches = !isLoadingBranches && branches && branches.length === 0;
// Branch selection is now handled by GitBranchDropdown component
const handleProviderSelection = (provider: Provider | null) => {
setSelectedProvider(provider);
@@ -60,14 +57,9 @@ export function RepositorySelectionForm({
onRepoSelection(null); // Reset parent component's selected repo
};
const handleBranchSelection = (branchName: string | null) => {
const selectedBranchObj = branches?.find(
(branch) => branch.name === branchName,
);
if (selectedBranchObj) {
setSelectedBranch(selectedBranchObj);
}
};
const handleBranchSelection = React.useCallback((branch: Branch | null) => {
setSelectedBranch(branch);
}, []);
// Render the provider dropdown
const renderProviderSelector = () => {
@@ -87,19 +79,6 @@ export function RepositorySelectionForm({
);
};
// Effect to auto-select main/master branch when branches are loaded
React.useEffect(() => {
if (branches?.length) {
// Look for main or master branch
const defaultBranch = branches.find(
(branch) => branch.name === "main" || branch.name === "master",
);
// If found, select it, otherwise select the first branch
setSelectedBranch(defaultBranch || branches[0]);
}
}, [branches]);
// Render the repository selector using our new component
const renderRepositorySelector = () => {
const handleRepoSelection = (repository?: GitRepository) => {
@@ -107,13 +86,14 @@ export function RepositorySelectionForm({
onRepoSelection(repository);
setSelectedRepository(repository);
} else {
onRepoSelection(null); // Notify parent component that repo was cleared
setSelectedRepository(null);
setSelectedBranch(null);
}
};
return (
<GitRepositoryDropdown
<GitRepoDropdown
provider={selectedProvider || providers[0]}
value={selectedRepository?.id || null}
placeholder="Search repositories..."
@@ -125,16 +105,21 @@ export function RepositorySelectionForm({
};
// Render the branch selector
const renderBranchSelector = () => (
<GitBranchDropdown
repositoryName={selectedRepository?.full_name}
value={selectedBranch?.name || null}
placeholder="Select branch..."
className="max-w-[500px]"
disabled={!selectedRepository}
onChange={handleBranchSelection}
/>
);
const renderBranchSelector = () => {
const defaultBranch = selectedRepository?.main_branch || null;
return (
<GitBranchDropdown
repository={selectedRepository?.full_name || null}
provider={selectedProvider || providers[0]}
selectedBranch={selectedBranch}
onBranchSelect={handleBranchSelection}
defaultBranch={defaultBranch}
placeholder="Select branch..."
className="max-w-[500px]"
disabled={!selectedRepository}
/>
);
};
return (
<div className="flex flex-col gap-4">
@@ -148,8 +133,7 @@ export function RepositorySelectionForm({
type="button"
isDisabled={
!selectedRepository ||
(!selectedBranch && !hasNoBranches) ||
isLoadingBranches ||
!selectedBranch ||
isCreatingConversation ||
(providers.length > 1 && !selectedProvider)
}
@@ -159,7 +143,7 @@ export function RepositorySelectionForm({
repository: {
name: selectedRepository?.full_name || "",
gitProvider: selectedRepository?.git_provider || "github",
branch: selectedBranch?.name || (hasNoBranches ? "" : "main"),
branch: selectedBranch?.name || "main",
},
},
{
@@ -0,0 +1,45 @@
import React from "react";
import { cn } from "#/utils/utils";
interface ClearButtonProps {
disabled: boolean;
onClear: () => void;
testId?: string;
}
export function ClearButton({
disabled,
onClear,
testId = "dropdown-clear",
}: ClearButtonProps) {
return (
<button
onClick={(e) => {
e.stopPropagation();
onClear();
}}
disabled={disabled}
className={cn(
"p-1 text-[#B7BDC2] hover:text-[#ECEDEE]",
"disabled:cursor-not-allowed disabled:opacity-60",
)}
type="button"
aria-label="Clear selection"
data-testid={testId}
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
);
}
@@ -0,0 +1,44 @@
import React from "react";
import { cn } from "#/utils/utils";
interface DropdownItemProps<T> {
item: T;
index: number;
isHighlighted: boolean;
isSelected: boolean;
getItemProps: <Options>(options: any & Options) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
getDisplayText: (item: T) => string;
getItemKey: (item: T) => string;
}
export function DropdownItem<T>({
item,
index,
isHighlighted,
isSelected,
getItemProps,
getDisplayText,
getItemKey,
}: DropdownItemProps<T>) {
const itemProps = getItemProps({
index,
item,
className: cn(
"px-3 py-2 cursor-pointer text-sm rounded-lg mx-0.5 my-0.5",
"text-[#ECEDEE] focus:outline-none",
{
"bg-[#24272E]": isHighlighted && !isSelected,
"bg-[#C9B974] text-black": isSelected,
"hover:bg-[#24272E]": !isSelected,
"hover:bg-[#C9B974] hover:text-black": isSelected,
},
),
});
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<li key={getItemKey(item)} {...itemProps}>
<span className="font-medium">{getDisplayText(item)}</span>
</li>
);
}
@@ -0,0 +1,24 @@
import React from "react";
interface EmptyStateProps {
inputValue: string;
searchMessage?: string;
emptyMessage?: string;
testId?: string;
}
export function EmptyState({
inputValue,
searchMessage = "No items found",
emptyMessage = "No items available",
testId = "dropdown-empty",
}: EmptyStateProps) {
return (
<li
className="px-3 py-2 text-[#B7BDC2] text-sm rounded-lg mx-0.5 my-0.5"
data-testid={testId}
>
{inputValue ? searchMessage : emptyMessage}
</li>
);
}
@@ -0,0 +1,21 @@
import React from "react";
interface ErrorMessageProps {
isError: boolean;
message?: string;
testId?: string;
}
export function ErrorMessage({
isError,
message = "Failed to load data",
testId = "dropdown-error",
}: ErrorMessageProps) {
if (!isError) return null;
return (
<div className="text-red-500 text-sm mt-1" data-testid={testId}>
{message}
</div>
);
}
@@ -0,0 +1,74 @@
import React from "react";
import {
UseComboboxGetMenuPropsOptions,
UseComboboxGetItemPropsOptions,
} from "downshift";
import { cn } from "#/utils/utils";
export interface GenericDropdownMenuProps<T> {
isOpen: boolean;
filteredItems: T[];
inputValue: string;
highlightedIndex: number;
selectedItem: T | null;
getMenuProps: <Options>(
options?: UseComboboxGetMenuPropsOptions & Options,
) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
getItemProps: <Options>(
options: UseComboboxGetItemPropsOptions<T> & Options,
) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;
menuRef?: React.RefObject<HTMLUListElement | null>;
renderItem: (
item: T,
index: number,
highlightedIndex: number,
selectedItem: T | null,
getItemProps: <Options>(
options: UseComboboxGetItemPropsOptions<T> & Options,
) => any, // eslint-disable-line @typescript-eslint/no-explicit-any
) => React.ReactNode;
renderEmptyState: (inputValue: string) => React.ReactNode;
}
export function GenericDropdownMenu<T>({
isOpen,
filteredItems,
inputValue,
highlightedIndex,
selectedItem,
getMenuProps,
getItemProps,
onScroll,
menuRef,
renderItem,
renderEmptyState,
}: GenericDropdownMenuProps<T>) {
if (!isOpen) return null;
return (
<ul
// eslint-disable-next-line react/jsx-props-no-spreading
{...getMenuProps({
ref: menuRef,
className: cn(
"absolute z-10 w-full bg-[#454545] border border-[#717888] rounded-xl shadow-lg max-h-60 overflow-auto",
"focus:outline-none p-1 gap-2 flex flex-col",
),
onScroll,
})}
>
{filteredItems.length === 0
? renderEmptyState(inputValue)
: filteredItems.map((item, index) =>
renderItem(
item,
index,
highlightedIndex,
selectedItem,
getItemProps,
),
)}
</ul>
);
}
@@ -0,0 +1,7 @@
export { GenericDropdownMenu } from "./generic-dropdown-menu";
export { EmptyState } from "./empty-state";
export { ErrorMessage } from "./error-message";
export { LoadingSpinner } from "./loading-spinner";
export { ClearButton } from "./clear-button";
export { ToggleButton } from "./toggle-button";
export type { GenericDropdownMenuProps } from "./generic-dropdown-menu";
@@ -0,0 +1,26 @@
import React from "react";
import { cn } from "#/utils/utils";
interface LoadingSpinnerProps {
hasSelection: boolean;
testId?: string;
}
export function LoadingSpinner({
hasSelection,
testId = "dropdown-loading",
}: LoadingSpinnerProps) {
return (
<div
className={cn(
"absolute top-1/2 transform -translate-y-1/2",
hasSelection ? "right-16" : "right-12",
)}
>
<div
className="animate-spin h-4 w-4 border-2 border-blue-500 border-t-transparent rounded-full"
data-testid={testId}
/>
</div>
);
}
@@ -0,0 +1,45 @@
import React from "react";
import { cn } from "#/utils/utils";
interface ToggleButtonProps {
isOpen: boolean;
disabled: boolean;
getToggleButtonProps: (
props?: Record<string, unknown>,
) => Record<string, unknown>;
}
export function ToggleButton({
isOpen,
disabled,
getToggleButtonProps,
}: ToggleButtonProps) {
return (
<button
// eslint-disable-next-line react/jsx-props-no-spreading
{...getToggleButtonProps({
disabled,
className: cn(
"p-1 text-[#B7BDC2] hover:text-[#ECEDEE]",
"disabled:cursor-not-allowed disabled:opacity-60",
),
})}
type="button"
aria-label="Toggle menu"
>
<svg
className={cn("w-4 h-4 transition-transform", isOpen && "rotate-180")}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
);
}
@@ -17,7 +17,7 @@ export function MicroagentManagementAccordionTitle({
<TooltipButton
tooltip={repository.full_name}
ariaLabel={repository.full_name}
className="text-white text-base font-normal bg-transparent p-0 min-w-0 h-auto cursor-pointer truncate max-w-[200px] translate-y-[-1px]"
className="text-white text-base font-normal bg-transparent p-0 min-w-0 h-auto cursor-pointer truncate max-w-[194px] translate-y-[-1px]"
testId="repository-name-tooltip"
placement="bottom"
>
@@ -32,6 +32,7 @@ import {
} from "#/utils/custom-toast-handlers";
import { getFirstPRUrl } from "#/utils/parse-pr-url";
import { I18nKey } from "#/i18n/declaration";
import { useUserProviders } from "#/hooks/use-user-providers";
// Handle error events
const isErrorEvent = (evt: unknown): evt is { error: true; message: string } =>
@@ -65,16 +66,10 @@ const getConversationInstructions = (
gitProvider: Provider,
) => `Create a microagent for the repository ${repositoryName} by following the steps below:
- Step 1: Create a markdown file inside the .openhands/microagents folder with the name of the microagent (The microagent must be created in the .openhands/microagents folder and should be able to perform the described task when triggered).
- This is the instructions about what the microagent should do: ${formData.query}
${
- Step 1: Create a markdown file inside the .openhands/microagents folder with the name of the microagent (The microagent must be created in the .openhands/microagents folder and should be able to perform the described task when triggered). This is the instructions about what the microagent should do: ${formData.query}. ${
formData.triggers && formData.triggers.length > 0
? `
- This is the triggers of the microagent: ${formData.triggers.join(", ")}
`
: "- Please be noted that the microagent doesn't have any triggers."
? `This is the triggers of the microagent: ${formData.triggers.join(", ")}`
: "Please be noted that the microagent doesn't have any triggers."
}
- Step 2: Create a new branch for the repository ${repositoryName}, must avoid duplicated branches.
@@ -91,16 +86,10 @@ const getUpdateConversationInstructions = (
) => `Update the microagent for the repository ${repositoryName} by following the steps below:
- Step 1: Update the microagent. This is the path of the microagent: ${formData.microagentPath} (The updated microagent must be in the .openhands/microagents folder and should be able to perform the described task when triggered).
- This is the updated instructions about what the microagent should do: ${formData.query}
${
- Step 1: Update the microagent. This is the path of the microagent: ${formData.microagentPath} (The updated microagent must be in the .openhands/microagents folder and should be able to perform the described task when triggered). This is the updated instructions about what the microagent should do: ${formData.query}. ${
formData.triggers && formData.triggers.length > 0
? `
- This is the triggers of the microagent: ${formData.triggers.join(", ")}
`
: "- Please be noted that the microagent doesn't have any triggers."
? `This is the triggers of the microagent: ${formData.triggers.join(", ")}`
: "Please be noted that the microagent doesn't have any triggers."
}
- Step 2: Create a new branch for the repository ${repositoryName}, must avoid duplicated branches.
@@ -119,6 +108,8 @@ export function MicroagentManagementContent() {
learnThisRepoModalVisible,
} = useSelector((state: RootState) => state.microagentManagement);
const { providers } = useUserProviders();
const { t } = useTranslation();
const dispatch = useDispatch();
@@ -182,11 +173,7 @@ export function MicroagentManagementContent() {
// Check if agent has finished and we have a PR
if (isOpenHandsEvent(socketEvent) && isFinishAction(socketEvent)) {
const prUrl = getFirstPRUrl(socketEvent.args.final_thought || "");
if (prUrl) {
displaySuccessToast(
t(I18nKey.MICROAGENT_MANAGEMENT$PR_READY_FOR_REVIEW),
);
} else {
if (!prUrl) {
// Agent finished but no PR found
displaySuccessToast(t(I18nKey.MICROAGENT_MANAGEMENT$PR_NOT_CREATED));
}
@@ -253,7 +240,6 @@ export function MicroagentManagementContent() {
conversationInstructions,
repository: {
name: repositoryName,
branch: formData.selectedBranch,
gitProvider,
},
createMicroagent,
@@ -290,15 +276,21 @@ export function MicroagentManagementContent() {
const repositoryName = repository.full_name;
const gitProvider = repository.git_provider;
const createMicroagent = {
repo: repositoryName,
git_provider: gitProvider,
title: formData.query,
};
// Launch a new conversation to help the user understand the repo
createConversationAndSubscribe({
query: formData.query,
conversationInstructions: formData.query,
repository: {
name: repositoryName,
branch: formData.selectedBranch,
gitProvider,
},
createMicroagent,
onSuccessCallback: () => {
hideLearnThisRepoModal();
},
@@ -329,11 +321,18 @@ export function MicroagentManagementContent() {
</>
);
const providersAreSet = providers.length > 0;
if (width < 1024) {
return (
<div className="w-full h-full flex flex-col gap-6">
<div className="w-full rounded-lg border border-[#525252] bg-[#24272E] max-h-[494px] min-h-[494px]">
<MicroagentManagementSidebar isSmallerScreen />
{providersAreSet && (
<MicroagentManagementSidebar
isSmallerScreen
providers={providers}
/>
)}
</div>
<div className="w-full rounded-lg border border-[#525252] bg-[#24272E] flex-1 min-h-[494px]">
<MicroagentManagementMain />
@@ -345,7 +344,7 @@ export function MicroagentManagementContent() {
return (
<div className="w-full h-full flex rounded-lg border border-[#525252] bg-[#24272E] overflow-hidden">
<MicroagentManagementSidebar />
{providersAreSet && <MicroagentManagementSidebar providers={providers} />}
<div className="flex-1">
<MicroagentManagementMain />
</div>
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { FaCircleInfo } from "react-icons/fa6";
@@ -8,15 +8,8 @@ import { BrandButton } from "../settings/brand-button";
import { I18nKey } from "#/i18n/declaration";
import { RootState } from "#/store";
import XIcon from "#/icons/x.svg?react";
import { cn } from "#/utils/utils";
import { cn, getRepoMdCreatePrompt } from "#/utils/utils";
import { LearnThisRepoFormData } from "#/types/microagent-management";
import { Branch } from "#/types/git";
import { useRepositoryBranches } from "#/hooks/query/use-repository-branches";
import {
BranchDropdown,
BranchLoadingState,
BranchErrorState,
} from "../home/repository-selection";
interface MicroagentManagementLearnThisRepoModalProps {
onConfirm: (formData: LearnThisRepoFormData) => void;
@@ -32,127 +25,35 @@ export function MicroagentManagementLearnThisRepoModal({
const { t } = useTranslation();
const [query, setQuery] = useState<string>("");
const [selectedBranch, setSelectedBranch] = useState<Branch | null>(null);
const { selectedRepository } = useSelector(
(state: RootState) => state.microagentManagement,
);
// Add a ref to track if the branch was manually cleared by the user
const branchManuallyClearedRef = useRef<boolean>(false);
const {
data: branches,
isLoading: isLoadingBranches,
isError: isBranchesError,
} = useRepositoryBranches(selectedRepository?.full_name || null);
const branchesItems = branches?.map((branch) => ({
key: branch.name,
label: branch.name,
}));
// Auto-select main or master branch if it exists.
useEffect(() => {
if (
branches &&
branches.length > 0 &&
!selectedBranch &&
!isLoadingBranches
) {
// Look for main or master branch
const mainBranch = branches.find((branch) => branch.name === "main");
const masterBranch = branches.find((branch) => branch.name === "master");
// Select main if it exists, otherwise select master if it exists
if (mainBranch) {
setSelectedBranch(mainBranch);
} else if (masterBranch) {
setSelectedBranch(masterBranch);
}
}
}, [branches, isLoadingBranches, selectedBranch]);
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (!query.trim()) {
return;
}
const finalQuery = getRepoMdCreatePrompt(
selectedRepository?.git_provider || "github",
query.trim(),
);
onConfirm({
query: query.trim(),
selectedBranch: selectedBranch?.name || "",
query: finalQuery,
});
};
const handleConfirm = () => {
if (!query.trim()) {
return;
}
const finalQuery = getRepoMdCreatePrompt(
selectedRepository?.git_provider || "github",
query.trim(),
);
onConfirm({
query: query.trim(),
selectedBranch: selectedBranch?.name || "",
query: finalQuery,
});
};
const handleBranchSelection = (key: React.Key | null) => {
const selectedBranchObj = branches?.find((branch) => branch.name === key);
setSelectedBranch(selectedBranchObj || null);
// Reset the manually cleared flag when a branch is explicitly selected
branchManuallyClearedRef.current = false;
};
const handleBranchInputChange = (value: string) => {
// Clear the selected branch if the input is empty or contains only whitespace
// This fixes the issue where users can't delete the entire default branch name
if (value === "" || value.trim() === "") {
setSelectedBranch(null);
// Set the flag to indicate that the branch was manually cleared
branchManuallyClearedRef.current = true;
} else {
// Reset the flag when the user starts typing again
branchManuallyClearedRef.current = false;
}
};
// Render the appropriate UI for branch selector based on the loading/error state
const renderBranchSelector = () => {
if (!selectedRepository) {
return (
<BranchDropdown
items={[]}
onSelectionChange={() => {}}
onInputChange={() => {}}
isDisabled
wrapperClassName="max-w-full w-full"
label={t(I18nKey.REPOSITORY$SELECT_BRANCH)}
/>
);
}
if (isLoadingBranches) {
return <BranchLoadingState wrapperClassName="max-w-full w-full" />;
}
if (isBranchesError) {
return <BranchErrorState wrapperClassName="max-w-full w-full" />;
}
return (
<BranchDropdown
items={branchesItems || []}
onSelectionChange={handleBranchSelection}
onInputChange={handleBranchInputChange}
isDisabled={false}
selectedKey={selectedBranch?.name}
wrapperClassName="max-w-full w-full"
label={t(I18nKey.REPOSITORY$SELECT_BRANCH)}
/>
);
};
return (
<ModalBackdrop onClose={onCancel}>
<ModalBody
@@ -198,9 +99,6 @@ export function MicroagentManagementLearnThisRepoModal({
onSubmit={onSubmit}
className="flex flex-col gap-6 w-full"
>
<div data-testid="branch-selector-container">
{renderBranchSelector()}
</div>
<label
htmlFor="query-input"
className="flex flex-col gap-2 w-full text-sm font-normal"
@@ -243,17 +141,9 @@ export function MicroagentManagementLearnThisRepoModal({
variant="primary"
onClick={handleConfirm}
testId="confirm-button"
isDisabled={
!query.trim() ||
isLoading ||
isLoadingBranches ||
!selectedBranch ||
isBranchesError
}
isDisabled={isLoading}
>
{isLoading || isLoadingBranches
? t(I18nKey.HOME$LOADING)
: t(I18nKey.MICROAGENT$LAUNCH)}
{isLoading ? t(I18nKey.HOME$LOADING) : t(I18nKey.MICROAGENT$LAUNCH)}
</BrandButton>
</div>
</ModalBody>
@@ -59,8 +59,10 @@ export function MicroagentManagementMicroagentCard({
if (runtimeStatus === "STATUS$ERROR") {
return t(I18nKey.MICROAGENT$STATUS_ERROR);
}
if (conversationStatus === "RUNNING" && runtimeStatus === "STATUS$READY") {
return t(I18nKey.MICROAGENT$STATUS_OPENING_PR);
if (conversationStatus === "RUNNING") {
return runtimeStatus === "STATUS$READY"
? t(I18nKey.MICROAGENT$STATUS_OPENING_PR)
: t(I18nKey.COMMON$STARTING);
}
return "";
}, [conversationStatus, runtimeStatus, t, hasPr]);
@@ -1,13 +1,16 @@
import { useTranslation } from "react-i18next";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Spinner } from "@heroui/react";
import { MicroagentManagementMicroagentCard } from "./microagent-management-microagent-card";
import { MicroagentManagementLearnThisRepo } from "./microagent-management-learn-this-repo";
import { useRepositoryMicroagents } from "#/hooks/query/use-repository-microagents";
import { useSearchConversations } from "#/hooks/query/use-search-conversations";
import { useMicroagentManagementConversations } from "#/hooks/query/use-microagent-management-conversations";
import { GitRepository } from "#/types/git";
import { RootState } from "#/store";
import { setSelectedMicroagentItem } from "#/state/microagent-management-slice";
import { cn } from "#/utils/utils";
import { I18nKey } from "#/i18n/declaration";
interface MicroagentManagementRepoMicroagentsProps {
repository: GitRepository;
@@ -22,6 +25,8 @@ export function MicroagentManagementRepoMicroagents({
const dispatch = useDispatch();
const { t } = useTranslation();
const { full_name: repositoryName } = repository;
// Extract owner and repo from repositoryName (format: "owner/repo")
@@ -37,9 +42,9 @@ export function MicroagentManagementRepoMicroagents({
data: conversations,
isLoading: isLoadingConversations,
isError: isErrorConversations,
} = useSearchConversations(
} = useMicroagentManagementConversations(
repositoryName,
"microagent_management",
undefined,
1000,
true,
);
@@ -103,34 +108,47 @@ export function MicroagentManagementRepoMicroagents({
const numberOfMicroagents = microagents?.length || 0;
const numberOfConversations = conversations?.length || 0;
const totalItems = numberOfMicroagents + numberOfConversations;
const hasMicroagents = numberOfMicroagents > 0;
const hasConversations = numberOfConversations > 0;
return (
<div>
{totalItems === 0 && (
<MicroagentManagementLearnThisRepo repository={repository} />
)}
{/* Render microagents */}
{numberOfMicroagents > 0 &&
microagents?.map((microagent) => (
<div key={microagent.name} className="pb-4 last:pb-0">
<MicroagentManagementMicroagentCard
microagent={microagent}
repository={repository}
/>
</div>
))}
{hasMicroagents && (
<div className="flex flex-col">
<span className="text-md text-white font-medium leading-5 mb-4">
{t(I18nKey.MICROAGENT_MANAGEMENT$EXISTING_MICROAGENTS)}
</span>
{microagents?.map((microagent) => (
<div key={microagent.name} className="pb-4 last:pb-0">
<MicroagentManagementMicroagentCard
microagent={microagent}
repository={repository}
/>
</div>
))}
</div>
)}
{/* Render conversations */}
{numberOfConversations > 0 &&
conversations?.map((conversation) => (
<div key={conversation.conversation_id} className="pb-4 last:pb-0">
<MicroagentManagementMicroagentCard
conversation={conversation}
repository={repository}
/>
</div>
))}
{hasConversations && (
<div className={cn("flex flex-col", hasMicroagents && "mt-4")}>
<span className="text-md text-white font-medium leading-5 mb-4">
{t(I18nKey.COMMON$IN_PROGRESS)}
</span>
{conversations?.map((conversation) => (
<div key={conversation.conversation_id} className="pb-4 last:pb-0">
<MicroagentManagementMicroagentCard
conversation={conversation}
repository={repository}
/>
</div>
))}
</div>
)}
</div>
);
}
@@ -1,42 +1,39 @@
import { useState, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Accordion, AccordionItem } from "@heroui/react";
import { Accordion, AccordionItem, Spinner } from "@heroui/react";
import { MicroagentManagementRepoMicroagents } from "./microagent-management-repo-microagents";
import { GitRepository } from "#/types/git";
import { cn } from "#/utils/utils";
import { TabType } from "#/types/microagent-management";
import { MicroagentManagementNoRepositories } from "./microagent-management-no-repositories";
import { I18nKey } from "#/i18n/declaration";
import { DOCUMENTATION_URL } from "#/utils/constants";
import { MicroagentManagementAccordionTitle } from "./microagent-management-accordion-title";
import { sanitizeQuery } from "#/utils/sanitize-query";
type MicroagentManagementRepositoriesProps = {
repositories: GitRepository[];
tabType: TabType;
isSearchLoading?: boolean;
};
export function MicroagentManagementRepositories({
repositories,
tabType,
isSearchLoading = false,
}: MicroagentManagementRepositoriesProps) {
const { t } = useTranslation();
const [searchQuery, setSearchQuery] = useState("");
const numberOfRepoMicroagents = repositories.length;
// Filter repositories based on search query
const filteredRepositories = useMemo(() => {
if (!searchQuery.trim()) {
return repositories;
}
const sanitizedQuery = sanitizeQuery(searchQuery);
return repositories.filter((repository) => {
const sanitizedRepoName = sanitizeQuery(repository.full_name);
return sanitizedRepoName.includes(sanitizedQuery);
});
}, [repositories, searchQuery]);
// Show spinner when search is in progress, regardless of repository count
if (isSearchLoading) {
return (
<div className="flex flex-col items-center justify-center gap-4 py-8">
<Spinner size="sm" />
<span className="text-sm text-white">
{t("HOME$SEARCHING_REPOSITORIES")}
</span>
</div>
);
}
if (numberOfRepoMicroagents === 0) {
if (tabType === "personal") {
@@ -73,25 +70,6 @@ export function MicroagentManagementRepositories({
return (
<div className="flex flex-col gap-4 w-full">
{/* Search Input */}
<div className="flex flex-col gap-2 w-full">
<label htmlFor="repository-search" className="sr-only">
{t(I18nKey.COMMON$SEARCH_REPOSITORIES)}
</label>
<input
id="repository-search"
name="repository-search"
type="text"
placeholder={`${t(I18nKey.COMMON$SEARCH_REPOSITORIES)}...`}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className={cn(
"bg-tertiary border border-[#717888] bg-[#454545] w-full rounded-sm p-2 placeholder:italic placeholder:text-tertiary-alt",
"disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
)}
/>
</div>
{/* Repositories Accordion */}
<Accordion
variant="splitted"
@@ -104,7 +82,7 @@ export function MicroagentManagementRepositories({
}}
selectionMode="multiple"
>
{filteredRepositories.map((repository) => (
{repositories.map((repository) => (
<AccordionItem
key={repository.id}
aria-label={repository.full_name}
@@ -5,7 +5,13 @@ import { MicroagentManagementRepositories } from "./microagent-management-reposi
import { I18nKey } from "#/i18n/declaration";
import { RootState } from "#/store";
export function MicroagentManagementSidebarTabs() {
interface MicroagentManagementSidebarTabsProps {
isSearchLoading?: boolean;
}
export function MicroagentManagementSidebarTabs({
isSearchLoading = false,
}: MicroagentManagementSidebarTabsProps) {
const { t } = useTranslation();
const { repositories, personalRepositories, organizationRepositories } =
@@ -29,18 +35,21 @@ export function MicroagentManagementSidebarTabs() {
<MicroagentManagementRepositories
repositories={personalRepositories}
tabType="personal"
isSearchLoading={isSearchLoading}
/>
</Tab>
<Tab key="repositories" title={t(I18nKey.COMMON$REPOSITORIES)}>
<MicroagentManagementRepositories
repositories={repositories}
tabType="repositories"
isSearchLoading={isSearchLoading}
/>
</Tab>
<Tab key="organizations" title={t(I18nKey.COMMON$ORGANIZATIONS)}>
<MicroagentManagementRepositories
repositories={organizationRepositories}
tabType="organizations"
isSearchLoading={isSearchLoading}
/>
</Tab>
</Tabs>
@@ -1,59 +1,145 @@
import { useEffect } from "react";
import { useEffect, useState, useMemo } from "react";
import { useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";
import { Spinner } from "@heroui/react";
import { MicroagentManagementSidebarHeader } from "./microagent-management-sidebar-header";
import { MicroagentManagementSidebarTabs } from "./microagent-management-sidebar-tabs";
import { useUserRepositories } from "#/hooks/query/use-user-repositories";
import { useUserProviders } from "#/hooks/use-user-providers";
import { useGitRepositories } from "#/hooks/query/use-git-repositories";
import { useSearchRepositories } from "#/hooks/query/use-search-repositories";
import { GitProviderDropdown } from "#/components/features/home/git-provider-dropdown";
import {
setPersonalRepositories,
setOrganizationRepositories,
setRepositories,
} from "#/state/microagent-management-slice";
import { GitRepository } from "#/types/git";
import { Provider } from "#/types/settings";
import { cn } from "#/utils/utils";
import { sanitizeQuery } from "#/utils/sanitize-query";
import { I18nKey } from "#/i18n/declaration";
import { useDebounce } from "#/hooks/use-debounce";
interface MicroagentManagementSidebarProps {
isSmallerScreen?: boolean;
providers: Provider[];
}
export function MicroagentManagementSidebar({
isSmallerScreen = false,
providers,
}: MicroagentManagementSidebarProps) {
const [selectedProvider, setSelectedProvider] = useState<Provider | null>(
providers.length > 0 ? providers[0] : null,
);
const [searchQuery, setSearchQuery] = useState("");
const debouncedSearchQuery = useDebounce(searchQuery, 300);
const dispatch = useDispatch();
const { t } = useTranslation();
const { providers } = useUserProviders();
const selectedProvider = providers.length > 0 ? providers[0] : null;
const { data: repositories, isLoading } =
useUserRepositories(selectedProvider);
// Use Git repositories hook with pagination for infinite scrolling
const {
data: repositories,
fetchNextPage,
hasNextPage,
isLoading,
isFetchingNextPage,
} = useGitRepositories({
provider: selectedProvider,
pageSize: 30, // Load 30 repositories per page
enabled: !!selectedProvider,
});
// Server-side search functionality
const { data: searchResults, isLoading: isSearchLoading } =
useSearchRepositories(debouncedSearchQuery, selectedProvider, 500); // Increase page size to 500 to to retrieve all search results. This should be optimized in the future.
// Auto-select provider if there's only one
useEffect(() => {
if (providers.length > 0 && !selectedProvider) {
setSelectedProvider(providers[0]);
}
}, [providers, selectedProvider]);
const handleProviderChange = (provider: Provider | null) => {
setSelectedProvider(provider);
setSearchQuery("");
};
// Filter repositories based on search query and available data
const filteredRepositories = useMemo(() => {
// If we have search results, use them directly (no filtering needed)
if (debouncedSearchQuery && searchResults && searchResults.length > 0) {
return searchResults;
}
// If no search query or no search results, use paginated repositories
if (!repositories?.pages) return [];
// Flatten all pages to get all repositories
const allRepositories = repositories.pages.flatMap((page) => page.data);
// If no search query, return all repositories
if (!debouncedSearchQuery.trim()) {
return allRepositories;
}
// Fallback to client-side filtering if search didn't return results
const sanitizedQuery = sanitizeQuery(debouncedSearchQuery);
return allRepositories.filter((repository: GitRepository) => {
const sanitizedRepoName = sanitizeQuery(repository.full_name);
return sanitizedRepoName.includes(sanitizedQuery);
});
}, [repositories, debouncedSearchQuery, searchResults]);
useEffect(() => {
if (repositories?.pages) {
const personalRepos: GitRepository[] = [];
const organizationRepos: GitRepository[] = [];
const otherRepos: GitRepository[] = [];
// Flatten all pages to get all repositories
const allRepositories = repositories.pages.flatMap((page) => page.data);
allRepositories.forEach((repo: GitRepository) => {
const hasOpenHandsSuffix = repo.full_name.endsWith("/.openhands");
if (repo.owner_type === "user" && hasOpenHandsSuffix) {
personalRepos.push(repo);
} else if (repo.owner_type === "organization" && hasOpenHandsSuffix) {
organizationRepos.push(repo);
} else {
otherRepos.push(repo);
}
});
dispatch(setPersonalRepositories(personalRepos));
dispatch(setOrganizationRepositories(organizationRepos));
dispatch(setRepositories(otherRepos));
if (!filteredRepositories?.length) {
dispatch(setPersonalRepositories([]));
dispatch(setOrganizationRepositories([]));
dispatch(setRepositories([]));
return;
}
}, [repositories, dispatch]);
const personalRepos: GitRepository[] = [];
const organizationRepos: GitRepository[] = [];
const otherRepos: GitRepository[] = [];
filteredRepositories.forEach((repo: GitRepository) => {
const hasOpenHandsSuffix =
selectedProvider === "gitlab"
? repo.full_name.endsWith("/openhands-config")
: repo.full_name.endsWith("/.openhands");
if (repo.owner_type === "user" && hasOpenHandsSuffix) {
personalRepos.push(repo);
} else if (repo.owner_type === "organization" && hasOpenHandsSuffix) {
organizationRepos.push(repo);
} else {
otherRepos.push(repo);
}
});
dispatch(setPersonalRepositories(personalRepos));
dispatch(setOrganizationRepositories(organizationRepos));
dispatch(setRepositories(otherRepos));
}, [filteredRepositories, selectedProvider, dispatch]);
// Handle scroll to bottom for pagination
const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
// Only enable pagination when not searching
if (debouncedSearchQuery && searchResults) {
return;
}
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
const isNearBottom = scrollTop + clientHeight >= scrollHeight - 10;
if (isNearBottom && hasNextPage && !isFetchingNextPage) {
fetchNextPage();
}
};
return (
<div
@@ -61,8 +147,50 @@ export function MicroagentManagementSidebar({
"w-[418px] h-full max-h-full overflow-y-auto overflow-x-hidden border-r border-[#525252] bg-[#24272E] rounded-tl-lg rounded-bl-lg py-10 px-6 flex flex-col",
isSmallerScreen && "w-full border-none",
)}
onScroll={handleScroll}
>
<MicroagentManagementSidebarHeader />
{/* Provider Selection */}
{providers.length > 1 && (
<div className="mt-6">
<GitProviderDropdown
providers={providers}
value={selectedProvider}
placeholder="Select Provider"
onChange={handleProviderChange}
className="w-full"
/>
</div>
)}
{/* Search Input */}
<div className="flex flex-col gap-2 w-full mt-6">
<label htmlFor="repository-search" className="sr-only">
{t(I18nKey.COMMON$SEARCH_REPOSITORIES)}
</label>
<div className="relative">
<input
id="repository-search"
name="repository-search"
type="text"
placeholder={`${t(I18nKey.COMMON$SEARCH_REPOSITORIES)}...`}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className={cn(
"bg-tertiary border border-[#717888] bg-[#454545] w-full rounded-sm p-2 placeholder:italic placeholder:text-tertiary-alt",
"disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed h-10 box-shadow-none outline-none",
"pr-10", // Space for spinner
)}
/>
{isSearchLoading && (
<div className="absolute right-3 top-1/2 transform -translate-y-1/2">
<Spinner size="sm" />
</div>
)}
</div>
</div>
{isLoading ? (
<div className="flex flex-col items-center justify-center gap-4 flex-1">
<Spinner size="sm" />
@@ -71,7 +199,19 @@ export function MicroagentManagementSidebar({
</span>
</div>
) : (
<MicroagentManagementSidebarTabs />
<>
<MicroagentManagementSidebarTabs isSearchLoading={isSearchLoading} />
{/* Show loading indicator for pagination (only when not searching) */}
{isFetchingNextPage && !debouncedSearchQuery && (
<div className="flex justify-center pt-2">
<Spinner size="sm" />
<span className="text-sm text-white ml-2">
{t("HOME$LOADING_MORE_REPOSITORIES")}
</span>
</div>
)}
</>
)}
</div>
);
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState, useMemo } from "react";
import { useEffect, useState, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { FaCircleInfo } from "react-icons/fa6";
@@ -11,14 +11,8 @@ import XIcon from "#/icons/x.svg?react";
import { cn, extractRepositoryInfo } from "#/utils/utils";
import { BadgeInput } from "#/components/shared/inputs/badge-input";
import { MicroagentFormData } from "#/types/microagent-management";
import { Branch, GitRepository } from "#/types/git";
import { useRepositoryBranches } from "#/hooks/query/use-repository-branches";
import { GitRepository } from "#/types/git";
import { useRepositoryMicroagentContent } from "#/hooks/query/use-repository-microagent-content";
import {
BranchDropdown,
BranchLoadingState,
BranchErrorState,
} from "../home/repository-selection";
interface MicroagentManagementUpsertMicroagentModalProps {
onConfirm: (formData: MicroagentFormData) => void;
@@ -37,7 +31,6 @@ export function MicroagentManagementUpsertMicroagentModal({
const [triggers, setTriggers] = useState<string[]>([]);
const [query, setQuery] = useState<string>("");
const [selectedBranch, setSelectedBranch] = useState<Branch | null>(null);
const { selectedRepository } = useSelector(
(state: RootState) => state.microagentManagement,
@@ -49,9 +42,6 @@ export function MicroagentManagementUpsertMicroagentModal({
const { microagent } = selectedMicroagentItem ?? {};
// Add a ref to track if the branch was manually cleared by the user
const branchManuallyClearedRef = useRef<boolean>(false);
// Extract owner and repo from full_name for content API
const { owner, repo, filePath } = extractRepositoryInfo(
selectedRepository,
@@ -70,38 +60,6 @@ export function MicroagentManagementUpsertMicroagentModal({
}
}, [isUpdate, microagentContentData]);
const {
data: branches,
isLoading: isLoadingBranches,
isError: isBranchesError,
} = useRepositoryBranches(selectedRepository?.full_name || null);
const branchesItems = branches?.map((branch) => ({
key: branch.name,
label: branch.name,
}));
// Auto-select main or master branch if it exists.
useEffect(() => {
if (
branches &&
branches.length > 0 &&
!selectedBranch &&
!isLoadingBranches
) {
// Look for main or master branch
const mainBranch = branches.find((branch) => branch.name === "main");
const masterBranch = branches.find((branch) => branch.name === "master");
// Select main if it exists, otherwise select master if it exists
if (mainBranch) {
setSelectedBranch(mainBranch);
} else if (masterBranch) {
setSelectedBranch(masterBranch);
}
}
}, [branches, isLoadingBranches, selectedBranch]);
const modalTitle = useMemo(() => {
if (isUpdate) {
return t(I18nKey.MICROAGENT_MANAGEMENT$UPDATE_MICROAGENT);
@@ -134,7 +92,6 @@ export function MicroagentManagementUpsertMicroagentModal({
onConfirm({
query: query.trim(),
triggers,
selectedBranch: selectedBranch?.name || "",
microagentPath: microagent?.path || "",
});
};
@@ -147,67 +104,10 @@ export function MicroagentManagementUpsertMicroagentModal({
onConfirm({
query: query.trim(),
triggers,
selectedBranch: selectedBranch?.name || "",
microagentPath: microagent?.path || "",
});
};
const handleBranchSelection = (key: React.Key | null) => {
const selectedBranchObj = branches?.find((branch) => branch.name === key);
setSelectedBranch(selectedBranchObj || null);
// Reset the manually cleared flag when a branch is explicitly selected
branchManuallyClearedRef.current = false;
};
const handleBranchInputChange = (value: string) => {
// Clear the selected branch if the input is empty or contains only whitespace
// This fixes the issue where users can't delete the entire default branch name
if (value === "" || value.trim() === "") {
setSelectedBranch(null);
// Set the flag to indicate that the branch was manually cleared
branchManuallyClearedRef.current = true;
} else {
// Reset the flag when the user starts typing again
branchManuallyClearedRef.current = false;
}
};
// Render the appropriate UI for branch selector based on the loading/error state
const renderBranchSelector = () => {
if (!selectedRepository) {
return (
<BranchDropdown
items={[]}
onSelectionChange={() => {}}
onInputChange={() => {}}
isDisabled
wrapperClassName="max-w-full w-full"
label={t(I18nKey.REPOSITORY$SELECT_BRANCH)}
/>
);
}
if (isLoadingBranches) {
return <BranchLoadingState wrapperClassName="max-w-full w-full" />;
}
if (isBranchesError) {
return <BranchErrorState wrapperClassName="max-w-full w-full" />;
}
return (
<BranchDropdown
items={branchesItems || []}
onSelectionChange={handleBranchSelection}
onInputChange={handleBranchInputChange}
isDisabled={false}
selectedKey={selectedBranch?.name}
wrapperClassName="max-w-full w-full"
label={t(I18nKey.REPOSITORY$SELECT_BRANCH)}
/>
);
};
return (
<ModalBackdrop onClose={onCancel}>
<ModalBody className="items-start rounded-[12px] p-6 min-w-[611px]">
@@ -236,7 +136,6 @@ export function MicroagentManagementUpsertMicroagentModal({
onSubmit={onSubmit}
className="flex flex-col gap-6 w-full"
>
{renderBranchSelector()}
<label
htmlFor="query-input"
className="flex flex-col gap-2 w-full text-sm font-normal"
@@ -301,15 +200,10 @@ export function MicroagentManagementUpsertMicroagentModal({
onClick={handleConfirm}
testId="confirm-button"
isDisabled={
!query.trim() ||
isLoading ||
isLoadingBranches ||
!selectedBranch ||
isBranchesError ||
(isUpdate && isLoadingContent) // Disable while loading content for updates
!query.trim() || isLoading || (isUpdate && isLoadingContent) // Disable while loading content for updates
}
>
{isLoading || isLoadingBranches || (isUpdate && isLoadingContent)
{isLoading || (isUpdate && isLoadingContent)
? t(I18nKey.HOME$LOADING)
: t(I18nKey.MICROAGENT$LAUNCH)}
</BrandButton>
@@ -37,9 +37,6 @@ export function Sidebar() {
const shouldHideLlmSettings =
config?.FEATURE_FLAGS.HIDE_LLM_SETTINGS && config?.APP_MODE === "saas";
const shouldHideMicroagentManagement =
config?.FEATURE_FLAGS.HIDE_MICROAGENT_MANAGEMENT;
React.useEffect(() => {
if (shouldHideLlmSettings) return;
@@ -83,11 +80,9 @@ export function Sidebar() {
}
disabled={settings?.EMAIL_VERIFIED === false}
/>
{!shouldHideMicroagentManagement && (
<MicroagentManagementButton
disabled={settings?.EMAIL_VERIFIED === false}
/>
)}
<MicroagentManagementButton
disabled={settings?.EMAIL_VERIFIED === false}
/>
</div>
<div className="flex flex-row md:flex-col md:items-center gap-[26px] md:mb-4">
@@ -1,8 +1,7 @@
import { Tooltip } from "@heroui/react";
import { useTranslation } from "react-i18next";
import ConfirmIcon from "#/assets/confirm";
import RejectIcon from "#/assets/reject";
import { I18nKey } from "#/i18n/declaration";
import { cn } from "#/utils/utils";
interface ActionTooltipProps {
type: "confirm" | "reject";
@@ -12,25 +11,35 @@ interface ActionTooltipProps {
export function ActionTooltip({ type, onClick }: ActionTooltipProps) {
const { t } = useTranslation();
const content =
type === "confirm"
? t(I18nKey.CHAT_INTERFACE$USER_CONFIRMED)
: t(I18nKey.CHAT_INTERFACE$USER_REJECTED);
const isConfirm = type === "confirm";
const ariaLabel = isConfirm
? t(I18nKey.ACTION$CONFIRM)
: t(I18nKey.ACTION$REJECT);
const content = isConfirm
? t(I18nKey.CHAT_INTERFACE$USER_CONFIRMED)
: t(I18nKey.CHAT_INTERFACE$USER_REJECTED);
const buttonLabel = isConfirm
? `${t(I18nKey.CHAT_INTERFACE$INPUT_CONTINUE_MESSAGE)} ⌘↩`
: `${t(I18nKey.BUTTON$CANCEL)} ⇧⌘⌫`;
return (
<Tooltip content={content} closeDelay={100}>
<button
data-testid={`action-${type}-button`}
type="button"
aria-label={
aria-label={ariaLabel}
className={cn(
"rounded px-2 h-6.5 text-sm font-medium leading-5 cursor-pointer hover:opacity-80",
type === "confirm"
? t(I18nKey.ACTION$CONFIRM)
: t(I18nKey.ACTION$REJECT)
}
className="bg-tertiary rounded-full p-1 hover:bg-base-secondary"
? "bg-tertiary text-white"
: "bg-white text-[#0D0F11]",
)}
onClick={onClick}
>
{type === "confirm" ? <ConfirmIcon /> : <RejectIcon />}
{buttonLabel}
</button>
</Tooltip>
);
@@ -1,31 +1,120 @@
import { useDispatch, useSelector } from "react-redux";
import { useCallback, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import { AgentState } from "#/types/agent-state";
import { generateAgentStateChangeEvent } from "#/services/agent-state-service";
import { useWsClient } from "#/context/ws-client-provider";
import { ActionTooltip } from "../action-tooltip";
import { isOpenHandsAction } from "#/types/core/guards";
import { ActionSecurityRisk } from "#/state/security-analyzer-slice";
import { RiskAlert } from "#/components/shared/risk-alert";
import WarningIcon from "#/icons/u-warning.svg?react";
import { RootState } from "#/store";
import { addSubmittedEventId } from "#/state/event-message-slice";
export function ConfirmationButtons() {
const { t } = useTranslation();
const { send } = useWsClient();
const submittedEventIds = useSelector(
(state: RootState) => state.eventMessage.submittedEventIds,
);
const handleStateChange = (state: AgentState) => {
const event = generateAgentStateChangeEvent(state);
send(event);
};
const dispatch = useDispatch();
const { t } = useTranslation();
const { send, parsedEvents } = useWsClient();
// Find the most recent action awaiting confirmation
const awaitingAction = parsedEvents
.slice()
.reverse()
.find((ev) => {
if (!isOpenHandsAction(ev) || ev.source !== "agent") return false;
const args = ev.args as Record<string, unknown>;
return args?.confirmation_state === "awaiting_confirmation";
});
const handleStateChange = useCallback(
(state: AgentState) => {
if (!awaitingAction) {
return;
}
dispatch(addSubmittedEventId(awaitingAction.id));
send(generateAgentStateChangeEvent(state));
},
[send],
);
// Handle keyboard shortcuts
useEffect(() => {
if (!awaitingAction) {
return undefined;
}
const handleCancelShortcut = (event: KeyboardEvent) => {
if (event.shiftKey && event.metaKey && event.key === "Backspace") {
event.preventDefault();
handleStateChange(AgentState.USER_REJECTED);
}
};
const handleContinueShortcut = (event: KeyboardEvent) => {
if (event.metaKey && event.key === "Enter") {
event.preventDefault();
handleStateChange(AgentState.USER_CONFIRMED);
}
};
const handleKeyDown = (event: KeyboardEvent) => {
// Cancel: Shift+Cmd+Backspace (⇧⌘⌫)
handleCancelShortcut(event);
// Continue: Cmd+Enter (⌘↩)
handleContinueShortcut(event);
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [awaitingAction, handleStateChange]);
if (!awaitingAction || submittedEventIds.includes(awaitingAction.id)) {
return null;
}
const { args } = awaitingAction as { args: Record<string, unknown> };
const risk = args?.security_risk;
const isHighRisk =
typeof risk === "string"
? risk.toLowerCase() === "high"
: Number(risk) === ActionSecurityRisk.HIGH;
return (
<div className="flex justify-between items-center pt-4">
<p>{t(I18nKey.CHAT_INTERFACE$USER_ASK_CONFIRMATION)}</p>
<div className="flex items-center gap-3">
<ActionTooltip
type="confirm"
onClick={() => handleStateChange(AgentState.USER_CONFIRMED)}
/>
<ActionTooltip
type="reject"
onClick={() => handleStateChange(AgentState.USER_REJECTED)}
<div className="flex flex-col gap-2 pt-4">
{isHighRisk && (
<RiskAlert
content={t(I18nKey.CHAT_INTERFACE$HIGH_RISK_WARNING)}
icon={<WarningIcon width={16} height={16} color="#fff" />}
severity="high"
title={t(I18nKey.COMMON$HIGH_RISK)}
/>
)}
<div className="flex justify-between items-center">
<p className="text-sm font-normal text-white">
{t(I18nKey.CHAT_INTERFACE$USER_ASK_CONFIRMATION)}
</p>
<div className="flex items-center gap-3">
<ActionTooltip
type="reject"
onClick={() => handleStateChange(AgentState.USER_REJECTED)}
/>
<ActionTooltip
type="confirm"
onClick={() => handleStateChange(AgentState.USER_CONFIRMED)}
/>
</div>
</div>
</div>
);
@@ -1,7 +1,7 @@
import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import { TooltipButton } from "./tooltip-button";
import UnionIcon from "#/icons/union.svg?react";
import RobotIcon from "#/icons/robot.svg?react";
interface MicroagentManagementButtonProps {
disabled?: boolean;
@@ -22,7 +22,7 @@ export function MicroagentManagementButton({
testId="microagent-management-button"
disabled={disabled}
>
<UnionIcon />
<RobotIcon width={28} height={28} />
</TooltipButton>
);
}
@@ -93,14 +93,14 @@ function SecurityInvariant() {
(risk: ActionSecurityRisk) => {
switch (risk) {
case ActionSecurityRisk.LOW:
return t(I18nKey.SECURITY_ANALYZER$LOW_RISK);
return t(I18nKey.SECURITY$LOW_RISK);
case ActionSecurityRisk.MEDIUM:
return t(I18nKey.SECURITY_ANALYZER$MEDIUM_RISK);
return t(I18nKey.SECURITY$MEDIUM_RISK);
case ActionSecurityRisk.HIGH:
return t(I18nKey.SECURITY_ANALYZER$HIGH_RISK);
return t(I18nKey.SECURITY$HIGH_RISK);
case ActionSecurityRisk.UNKNOWN:
default:
return t(I18nKey.SECURITY_ANALYZER$UNKNOWN_RISK);
return t(I18nKey.SECURITY$UNKNOWN_RISK);
}
},
[t],
@@ -0,0 +1,36 @@
import { ReactNode } from "react";
import { cn } from "#/utils/utils";
interface RiskAlertProps {
className?: string;
content: ReactNode;
icon?: ReactNode;
severity: "high" | "medium" | "low";
title: string;
}
export function RiskAlert({
className,
content,
icon,
severity,
title,
}: RiskAlertProps) {
// Currently, we are only supporting the high risk alert. If we use want to support other risk levels, we can add them here and use cva to create different variants of this component.
if (severity === "high") {
return (
<div
className={cn(
"flex items-center gap-3.5 bg-[#4A0709] border border-[#FF0006] text-red-400 rounded-xl px-3.5 h-13 text-sm text-white",
className,
)}
>
{icon && <span className="">{icon}</span>}
<span className="font-bold">{title}</span>
<span className="font-normal">{content}</span>
</div>
);
}
return null;
}

Some files were not shown because too many files have changed in this diff Show More