mirror of
https://github.com/OpenHands/OpenHands.git
synced 2026-10-07 13:18:19 +08:00
Graham Neubigandopenhands
e8ffdd2829
* Render ACP sub-agent tool-call events in chat (#132) Port of upstream OpenHands frontend PRs: - OpenHands#13994 — initial ACPToolCallEvent rendering - OpenHands#14246 — drop the 'ACP · ' prefix from titles - OpenHands#14247 — suppress in_progress events to avoid empty-args flash Adds end-to-end support for the new V1 ACPToolCallEvent surfaced by ACP sub-agents (Claude Code, Codex, Gemini CLI, …). Each tool call is rendered through the same GenericEventMessage wrapper used for observation events, so the resulting card shape, success indicator, and markdown formatting match the rest of the OpenHands chat. Highlights: - New ACPToolCallEvent type + isACPToolCallEvent type guard, wired into the OpenHandsEvent union. - getACPToolCallContent + getACPToolCallTitleKey helpers — execute calls render as Command:/Output: blocks just like getTerminalObservationContent; non-execute calls render their raw_input as a JSON Input: block. Errors use **Error:**, missing output falls back to OBSERVATION$COMMAND_NO_OUTPUT, and very long output is truncated to MAX_CONTENT_LENGTH. - getACPToolCallResult — maps status + is_error to success | error | undefined, mirroring getObservationResult so in_progress calls render without a check mark. - shouldRenderEvent — hides in_progress ACP events to avoid an empty-args card flashing before the first populated event arrives (matches #14247). - handleEventForUI — dedupes ACP events by tool_call_id so streaming in_progress → completed/failed transitions update the card in place instead of stacking duplicate cards. - EventMessage dispatch — routes ACP events to GenericEventMessageWrapper after hook execution events, before generic action handling. - Five new ACTION_MESSAGE$ACP_* i18n keys (RUN / EDIT / READ / FETCH / TOOL) localised across all bundled languages, with the title rendered inline via the existing <cmd> Trans component (no 'ACP · ' prefix per #14246). Tests: 39 new/modified vitest cases across get-acp-tool-call-content, should-render-event, handle-event-for-ui, and event-message-acp-tool-call. Visual verification + demo GIF: .pr/issue-132/ This commit was created by an AI agent (OpenHands) on behalf of the user. Co-authored-by: openhands <openhands@all-hands.dev> * Capture real ACP card rendering for #142 demo Addresses @neubig's review feedback on PR #142 ('I did not see any examples of ACP events being rendered in the interface'): - Updates demo.gif to actually show three ACPToolCallEvent cards rendering in the live conversation UI (collapsed view + expanded view with Command/Output/Input blocks). - Adds 04-acp-cards-collapsed.png + 05-acp-cards-expanded.png as the individual frames, plus 04-acp-rendering-notes.md explaining what each frame shows and why a synthetic event injection was needed (no Claude Code / Codex / Gemini CLI binary in the sandbox). - Adds capture.mjs (the Playwright script used to record the demo) so future re-records are reproducible. - In src/stores/use-event-store.ts, exposes the existing Zustand store on window.__OH_EVENT_STORE__ when import.meta.env.DEV is true. Tree-shaken from production builds; no behaviour change for end users. Useful as a general dev affordance for fixture/preview tooling beyond this PR. Functional verification (unchanged from the original PR): npx vitest run __tests__/components/v1/chat/event-content-helpers/get-acp-tool-call-content.test.ts __tests__/components/v1/chat/event-message-acp-tool-call.test.tsx Test Files 2 passed (2) Tests 20 passed (20) This commit was created by an AI agent (OpenHands) on behalf of the user. Co-authored-by: openhands <openhands@all-hands.dev> --------- Co-authored-by: openhands <openhands@all-hands.dev>
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.