ars9
f83141b484
- add client workspace section to architecture diagram and description - split development.md commands into server and client per-workspace - document client tech stack, directory layout, routing, and theming - add Client overview section with Storybook test instructions
2.9 KiB
2.9 KiB
Architecture
┌─────────────────────────────────────────┐
│ Browser (React SPA — client/) │
│ │
│ EnvironmentsPage KeysPage │
│ SessionsPage ScenariosPage │
└───────────────────┬─────────────────────┘
│ HTTP REST (:13000)
│
MCP client (AI agent / VS Code Copilot)
│ HTTP /mcp (Streamable MCP)
▼
┌──────────────────────────────────────┐
│ NestJS app (server/src/) │
│ │
│ McpService ← all MCP tools │
│ │
│ AuthService login + sessions │
│ SessionService session CRUD │
│ EnvironmentService environment CRUD │
│ BrowserService ad-hoc browsing │
│ CodeExecutorService sandboxed JS │
│ │
│ ScenarioService scenario CRUD │
│ ScenarioSchedulerService │
│ └─ @Interval(1 s) tick loop │
└──────────────────┬───────────────────┘
│ better-sqlite3 (TypeORM)
▼
data/sessions.db
- McpService — registers every MCP tool and delegates to domain services.
- AuthService — drives a Playwright browser to log in via a key descriptor; saves cookies + localStorage as a
Session. - SessionService — stores and retrieves saved browser sessions.
- EnvironmentService — stores named environments (URL maps) used by auth and scenarios.
- BrowserService — ad-hoc, stateless
open_url/exec_codeoperations outside the scenario scheduler. - CodeExecutorService — compiles and runs user-supplied Playwright JS inside a sandboxed
asyncfunction withpage,context, andhelpersin scope. - ScenarioService — CRUD for scenarios, steps, runs, and run logs; import/export.
- ScenarioSchedulerService — polls for pending step runs every second and executes them. All steps in the same run share one browser instance (see scenario.md).
Client (client/)
A React 19 + TypeScript SPA served separately by Vite during development. In Docker Compose the same build artefacts are served statically alongside the API.
The client calls the server REST endpoints directly — there is no separate BFF layer. Routing uses HashRouter so the Vite proxy and server-side routes are never ambiguous.
See development.md for the full client tech stack and directory layout.