mirror of
https://github.com/OpenHands/OpenHands.git
synced 2026-10-07 14:47:53 +08:00
6ebe7b4e7e
* feat: add automations frontend on /automations subpath Port automations frontend from automation-repo to agent-canvas. ## Changes ### New Routes - /automations - List view of all automations - /automations/:automationId - Automation detail view ### New Components - Automation list components: card, card-skeleton, group, empty-state, error-state - Automation detail components: header, sections (config, prompt, plugins, activity) - Shared UI components: toggle-switch, metadata-chip, status-badge, kebab-menu, search-input ### API Integration - automation-service.api.ts - API client for automation CRUD operations - Uses existing openHands axios client (shared base URL with agent server) ### MSW Mock Server Handlers - automation-handlers.ts - Mock handlers for testing - automations.mock.ts - Sample automation data - automation-runs.mock.ts - Sample automation run data ### Tests - API tests: automation-service.test.ts, automation-handlers.test.ts - Component tests: toggle-switch, metadata-chip, search-input, error-state - Detail component tests: section-card, run-status-badge, not-found-state ### Hooks - use-automations.ts - React Query hook for fetching automations list - use-automation-detail.ts - React Query hook for fetching single automation - use-has-permission.ts - Permission checking utility hook ### Types - automation.ts - TypeScript types for automation entities ### Icons - Added SVG icons: activity, bell, calendar, check-circle, chevron-down, chevron-left, clock, cog, database, exclamation-circle, git-branch, kebab-vertical, power, puzzle, search, sparkle, target, trash, x-circle, x-mark Co-authored-by: openhands <openhands@all-hands.dev> * feat: add local API key auth for automation backend - Use VITE_AUTOMATION_API_KEY env var for frontend to authenticate - Pass AUTOMATION_LOCAL_API_KEY to automation backend in dev mode - Use dedicated axios instance with Bearer auth interceptor - Add --refresh to uvx to ensure latest git commits are fetched - URL-encode automation IDs in API paths The default local API key is 'openhands-local-api-key' which matches between the frontend and backend for local development. Co-authored-by: openhands <openhands@all-hands.dev> * fix: automation service tests and ingress port conflicts - Fix automation-service.test.ts to mock axios instance correctly (was mocking openHands but service uses automationAxios) - Use vi.hoisted() for mock functions available during vi.mock hoisting - Change ingress test ports from 19000-19003 to 29000-29003 to avoid conflict with VS Code server on port 19000 Co-authored-by: openhands <openhands@all-hands.dev> * fix: add CORS origins for automation backend in dev mode The automation backend defaults CORS origins to app.all-hands.dev, which blocks localhost requests. Add localhost origins for the ingress port and Vite dev server port. Co-authored-by: openhands <openhands@all-hands.dev> * fix: update create-instructions styling and add missing i18n keys - Use semantic color tokens (text-content, text-basic, bg-base-secondary, bg-base, border-default) instead of hardcoded neutral-* colors - Add all AUTOMATIONS$ i18n keys for the automations frontend Co-authored-by: openhands <openhands@all-hands.dev> --------- Co-authored-by: openhands <openhands@all-hands.dev> Co-authored-by: hieptl <hieptl.developer@gmail.com>
agent-canvas
Warning
This project is in an early incubator phase. It may be vibecoded, untested, or out of date. OpenHands takes no responsibility for the code or its support. Learn more.
Quickstart
This repository is a near-direct port of the OpenHands frontend adapted to talk directly to software-agent-sdk / agent_server without the usual OpenHands app backend.
Prerequisites
- Node.js 22.12.x or later
npmuv(for running the agent server viauvx)
1. Clone and install the frontend
git clone https://github.com/OpenHands/agent-canvas.git
cd agent-canvas
npm install
2. Install uv
If you do not already have uv installed, install it first (OpenHands SDK recommends uv 0.8.13+):
curl -LsSf https://astral.sh/uv/install.sh | sh
Need Windows or another install method? See the official uv installation guide: https://docs.astral.sh/uv/getting-started/installation/
If ~/.local/bin is not already on your PATH, add it:
export PATH="$HOME/.local/bin:$PATH"
command -v uvx
The npm run dev command uses uvx to automatically download and run the agent server, so no separate installation step is needed.
3. Optional: create a .env file
If you need to change the backend URL, frontend port, session API key, or working directory, copy the sample file:
cp .env.sample .env
Then edit the values you need.
4. Start the app
npm run dev
This starts the full stack:
- Agent server (via uvx)
- Automation backend (via uvx)
- Vite dev server
- Ingress proxy (routes traffic to all backends)
Access the UI at http://localhost:8000
Environment Variables
| Variable | Description | Default |
|---|---|---|
PORT |
Ingress port | 8000 |
OH_AUTOMATION_GIT_REF |
Git ref for automation backend | main |
OH_AGENT_SERVER_GIT_REF |
Git ref for agent-server | main |
5. First-run sanity check
After the page opens:
/should load without errors/settingsshould load- configure a working LLM model + API key under
Settings > LLMbefore running the first live task - you should be able to open or create a conversation
/api/automation/docsshould show the automation API docs
Alternative: Minimal Mode (without Automation)
To run without the automation service:
npm run dev:minimal
This runs only agent-server + Vite (no automation backend or ingress).
Access at http://localhost:3001/
More documentation
For contributor and developer workflows, including frontend-only mode, mock mode, environment variables, and build/test commands, see DEVELOPMENT.md.