Dashboard Development¶

Commands and source paths below are relative to echo-agent-runtime/; enter that directory first.

Frontend development guide for Echo Agent Dashboard.

Tech Stack¶

React 19, TypeScript 5.7, Vite 6
Tailwind CSS 4, Zustand 5, React Router 8
i18next, Recharts, @dnd-kit
Vitest 3 + Testing Library

Setup¶

cd web
pnpm install --frozen-lockfile
pnpm dev    # Start dev server with HMR

Requires Node.js 24+ and pnpm 10+.

Commands¶

pnpm dev          # Dev server
pnpm build        # Production build (tsc -b && vite build)
pnpm test --run   # Run tests
pnpm preview      # Preview build output

Architecture¶

The Dashboard is a React SPA communicating with Gateway via:

HTTP REST API: /api/v1/*
WebSocket: /ws/dashboard (dashboard management stream)

Build Output¶

Built SPA goes to web/dist/, bundled into the wheel at echo_agent/_bundled/dashboard/index.html by hatch_build.py.

Source developers can build with echo-agent dashboard build. Release wheels bundle the Dashboard and need no Node/pnpm at runtime.

Testing¶

pnpm test --run     # Single run
pnpm test           # Watch mode

Uses Vitest + @testing-library/react with jsdom environment.