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).
HeadlessX is a self-hosted web scraping and browser automation platform with anti-detection capabilities. It provides a Next.js 16 dashboard, an Express 5 API with Prisma/PostgreSQL, a BullMQ queue worker, and a published CLI. The core value proposition is anti-detection scraping via the headfox-js package (Camoufox-compatible Firefox bundles), fingerprint generation, CAPTCHA solving, and LLM-friendly markdown output. The system supports multiple operators: website scraping/crawling/mapping, Google AI Search, Tavily search, Exa search, and YouTube extraction. It includes sidecar services for HTML-to-Markdown (Go) and YouTube extraction (Python FastAPI). The architecture is a monorepo with Nx orchestration, Docker Compose deployment, and an MCP endpoint for AI assistant integration. External dependencies include Redis, Postgres, Playwright, MaxMind GeoIP, and external APIs (Tavily, Exa, Google). The codebase is well-structured with clear separation of concerns, modern TypeScript, and reusable patterns in both frontend and backend.