$ show OpenHands/OpenHands
OpenHands/OpenHands is the frontend application for the OpenHands AI agent platform, known as Agent Canvas. It is a React single-page application (SPA) built with Vite, TypeScript, Tailwind CSS, and React Router. The application provides a comprehensive user interface for interacting with AI coding agents (OpenHands, Claude Code, Codex, Gemini, or any ACP-compatible agent) via an agent server. It supports multiple backends (local self-hosted, cloud at app.all-hands.dev) with a backend registry that routes API calls accordingly. The UI includes a chat interface with real-time WebSocket event streaming, a conversation panel for managing multiple sessions, a file explorer with Monaco editor, terminal emulator, browser snapshot view, git integration (commits, diff viewer, push/pull), settings for LLM profiles, MCP servers, secrets, skills/plugins, and an automation dashboard for scheduled or event-driven agent runs. The application is also published as an npm package (@openhands/agent-canvas) for embedding in other applications, and supports Electron desktop builds. The architecture follows a modern React pattern with Zustand for client-side state management (conversations, events, UI preferences), TanStack React Query for server-state caching and synchronization, and react-i18next for internationalization. The backend abstraction layer is a key architectural feature: every service (settings, profiles, git, secrets, automations, etc.) branches on the active backend kind (local vs cloud) and delegates to either a direct SDK client (@openhands/typescript-client) or a cloud proxy (callCloudProxy). This dual-transport pattern is enforced by guard tests that prevent ad-hoc HTTP calls outside vetted files. The application also includes a manifest system for declarative automation setup, a tool visualizer registry for rendering agent tool calls (bash, file editor, search, task), and extensive mock infrastructure (MSW) for development and testing. Key entry points include the root layout (src/routes/root-layout.tsx) which provides the main shell with sidebar, command menu, and onboarding; the conversation main view (src/components/features/conversation/conversation-main/conversation-main.tsx) with resizable panels for chat and tabs; the settings pages (src/routes/settings.tsx) with schema-driven forms; and the automation dashboard (src/routes/automations-list.tsx). External dependencies include the agent server REST API, cloud proxy endpoints, @openhands/typescript-client SDK, @openhands/extensions for automation catalogs, and various UI libraries (HeroUI, framer-motion, xterm.js, Monaco editor). The codebase is actively maintained with over 84k stars, frequent commits, and a large test suite (Vitest unit tests, Playwright E2E tests, Stryker mutation testing).
The LLM identified 4 files worth highlighting for reuse:
Central backend registry that manages active backend selection (local vs cloud) with fallback logic, URL selection, and storage persistence. It provides a clean getActiveBackend() interface used by all API services, and supports dynamic registration of backends. The store is implemented as a module-level Zustand-like pattern with getSnapshot/subscribe for use outside React components, and includes test-only reset helpers. This is a well-abstracted, self-contained module that could be extracted for any multi-backend application.
Defines a visualizer registry pattern (defineVisualizer) that allows tool call types (bash, file editor, search, task) to be rendered by dedicated React components. The registry is extensible: new visualizers can be added without modifying existing code. Each visualizer is a self-contained module with its own rendering logic, and the dispatcher component selects the appropriate visualizer based on tool type. This pattern demonstrates clean separation of concerns and is reusable for any application that needs to render heterogeneous event types.
Implements an O(n) file tree builder using a side-table map for O(1) parent lookups, with leaf-promotion (directories containing a single child are collapsed). The algorithm is heavily documented with inline comments explaining the trade-offs and edge cases. It is a pure utility function with no framework dependencies, making it directly reusable in any project that needs to build a tree from a flat list of paths. The implementation demonstrates non-obvious optimization and careful handling of path normalization.
Handles redacted credential substitution for MCP server health probes. When a user has stored encrypted credentials, the UI displays '**********' placeholders. This module replaces those placeholders with the actual stored values before sending probe requests, without exposing plaintext in the UI. It also handles the reverse transformation for display. The pattern is self-contained, testable, and demonstrates a secure approach to handling sensitive configuration data in a frontend application.