# mohit-gaur75/bugreplay-ai architecture

> Architecture diagram of the GitHub repository mohit-gaur75/bugreplay-ai, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mohit-gaur75/bugreplay-ai
- Repository: https://github.com/mohit-gaur75/bugreplay-ai

## Overview

BugReplay AI captures browser errors and interaction telemetry, stores incidents, generates replayable Playwright tests, and supports investigation through its web dashboard and CLI. The graph follows the documented capture-to-reproduction workflow and includes auth, project, billing, and demo capabilities. Edges are limited to relationships shown in excerpts or the README; unsampled worker, synthesis, and SDK internals are represented only where documented.

Main entry points: [`client/src/App.jsx`](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/App.jsx) (Web Application), [`server/src/db/db.js`](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/db/db.js) (SQLite Store), [`client/src/pages/IncidentDetails.jsx`](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/pages/IncidentDetails.jsx) (Incident Details), [`server/src/app.js`](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/app.js) (API Application)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Browser Capture"]
  node_sdk["Capture SDK<br/>[bugreplay.js]"]
end

subgraph group_backend["Ingestion and Synthesis"]
  node_ingest_routes["Ingestion Routes"]
  node_ingest_controller["Ingestion Controller"]
  node_ingest_service["Incident Ingestion"]
  node_database[("SQLite Store<br/>[db.js]")]
  node_worker["Synthesis Worker<br/>[worker.js]"]
  node_synthesizer["Playwright Synthesizer<br/>[synthesizer.js]"]
  node_webhook["Webhook Notifications<br/>[webhookNotifier.js]"]
end

subgraph group_web["Web Console"]
  node_web_app["Web Application<br/>[App.jsx]"]
  node_auth_context["Web Authentication<br/>[AuthContext.jsx]"]
  node_api_client["Web API Client<br/>[api.js]"]
  node_dashboard["Incident Dashboard<br/>[Dashboard.jsx]"]
  node_incident_details["Incident Details"]
  node_timeline["Visual Timeline<br/>[VisualTimeline.jsx]"]
  node_test_view["Test Display<br/>[CodeBlock.jsx]"]
  node_projects["Project Management<br/>[Projects.jsx]"]
  node_billing["Billing Console<br/>[Billing.jsx]"]
  node_demo["Interactive Demo<br/>[Demo.jsx]"]
end

subgraph group_cli["Developer CLI"]
  node_cli_entry["CLI Commands<br/>[index.js]"]
  node_cli_run["Local Test Runner<br/>[run.js]"]
  node_cli_api["CLI API Client<br/>[apiClient.js]"]
  node_cli_config[("CLI Configuration<br/>[configStore.js]")]
end

subgraph group_platform["Identity and Platform"]
  node_server_app["API Application<br/>[app.js]"]
  node_auth_controller["Auth Controller<br/>[auth.controller.js]"]
  node_auth_service["Auth Service<br/>[auth.service.js]"]
  node_auth_middleware["JWT Middleware<br/>[auth.js]"]
  node_crypto["Token and Password Crypto<br/>[crypto.js]"]
  node_project_controller["Project Controller"]
  node_project_service["Project Service"]
  node_billing_controller["Billing Controller"]
end

node_browser(("Client Browser"))
node_gemini{{"Gemini API"}}
node_web_user(("Developer"))
node_cli_user(("CLI User"))

node_browser -->|"runs"| node_sdk
node_sdk -.->|"sends telemetry"| node_ingest_routes
node_ingest_routes -->|"routes to"| node_ingest_controller
node_ingest_controller -->|"ingests incident"| node_ingest_service
node_ingest_service -->|"writes incident and job"| node_database
node_worker -.->|"reads queued jobs"| node_database
node_worker -.->|"dispatches synthesis"| node_synthesizer
node_synthesizer -.->|"generates tests"| node_gemini
node_synthesizer -.->|"stores generated test"| node_database
node_ingest_service -.->|"notifies"| node_webhook
node_web_user -->|"uses"| node_web_app
node_web_app -->|"uses session"| node_auth_context
node_auth_context -->|"calls"| node_api_client
node_web_app -->|"renders"| node_dashboard
node_web_app -->|"renders"| node_incident_details
node_incident_details -->|"loads incident"| node_api_client
node_incident_details -->|"renders"| node_timeline
node_incident_details -->|"renders test"| node_test_view
node_web_app -->|"renders"| node_projects
node_web_app -->|"renders"| node_billing
node_web_app -->|"renders"| node_demo
node_cli_user -->|"runs"| node_cli_entry
node_cli_entry -->|"dispatches"| node_cli_run
node_cli_run -->|"fetches incident"| node_cli_api
node_cli_api -->|"loads settings"| node_cli_config
node_cli_api -.->|"requests API"| node_server_app
node_web_app -.->|"requests API"| node_server_app
node_server_app -->|"initializes store"| node_database
node_server_app -.->|"mounts routes"| node_ingest_routes
node_auth_controller -->|"delegates"| node_auth_service
node_auth_service -->|"reads and writes"| node_database
node_auth_service -->|"uses crypto"| node_crypto
node_auth_middleware -->|"loads user"| node_auth_service
node_auth_middleware -->|"verifies token"| node_crypto
node_project_controller -->|"delegates"| node_project_service
node_billing_controller -->|"reads and updates"| node_database

click node_sdk "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/sdk/src/bugreplay.js"
click node_ingest_routes "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/ingestion/ingestion.routes.js"
click node_ingest_controller "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/ingestion/ingestion.controller.js"
click node_ingest_service "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/ingestion/ingestion.service.js"
click node_database "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/db/db.js"
click node_worker "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/jobs/worker.js"
click node_synthesizer "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/ai/synthesizer.js"
click node_webhook "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/services/webhookNotifier.js"
click node_web_app "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/App.jsx"
click node_auth_context "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/context/AuthContext.jsx"
click node_api_client "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/services/api.js"
click node_dashboard "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/pages/Dashboard.jsx"
click node_incident_details "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/pages/IncidentDetails.jsx"
click node_timeline "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/components/incidents/VisualTimeline.jsx"
click node_test_view "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/components/common/CodeBlock.jsx"
click node_projects "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/pages/Projects.jsx"
click node_billing "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/pages/Billing.jsx"
click node_demo "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/pages/Demo.jsx"
click node_cli_entry "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/cli/src/index.js"
click node_cli_run "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/cli/src/commands/run.js"
click node_cli_api "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/cli/src/services/apiClient.js"
click node_cli_config "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/cli/src/utils/configStore.js"
click node_server_app "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/app.js"
click node_auth_controller "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/auth/auth.controller.js"
click node_auth_service "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/auth/auth.service.js"
click node_auth_middleware "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/middleware/auth.js"
click node_crypto "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/utils/crypto.js"
click node_project_controller "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/projects/projects.controller.js"
click node_project_service "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/projects/projects.service.js"
click node_billing_controller "https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/billing/billing.controller.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_sdk,node_browser,node_cli_user toneBlue
class node_ingest_routes,node_ingest_controller,node_ingest_service,node_database,node_worker,node_synthesizer,node_webhook toneAmber
class node_web_app,node_auth_context,node_api_client,node_dashboard,node_incident_details,node_timeline,node_test_view,node_projects,node_billing,node_demo,node_gemini toneMint
class node_cli_entry,node_cli_run,node_cli_api,node_cli_config toneRose
class node_server_app,node_auth_controller,node_auth_service,node_auth_middleware,node_crypto,node_project_controller,node_project_service,node_billing_controller,node_web_user toneIndigo
```

## Components

### Browser Capture

- [Capture SDK](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/sdk/src/bugreplay.js): `sdk/src/bugreplay.js`

### Ingestion and Synthesis

- [Ingestion Routes](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/ingestion/ingestion.routes.js): `server/src/modules/ingestion/ingestion.routes.js`
- [Ingestion Controller](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/ingestion/ingestion.controller.js): `server/src/modules/ingestion/ingestion.controller.js`
- [Incident Ingestion](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/ingestion/ingestion.service.js): `server/src/modules/ingestion/ingestion.service.js`
- [SQLite Store](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/db/db.js): `server/src/db/db.js`
- [Synthesis Worker](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/jobs/worker.js): `server/src/jobs/worker.js`
- [Playwright Synthesizer](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/ai/synthesizer.js): `server/src/modules/ai/synthesizer.js`
- [Webhook Notifications](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/services/webhookNotifier.js): `server/src/services/webhookNotifier.js`

### Web Console

- [Web Application](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Web Authentication](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/context/AuthContext.jsx): `client/src/context/AuthContext.jsx`
- [Web API Client](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/services/api.js): `client/src/services/api.js`
- [Incident Dashboard](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/pages/Dashboard.jsx): `client/src/pages/Dashboard.jsx`
- [Incident Details](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/pages/IncidentDetails.jsx): `client/src/pages/IncidentDetails.jsx`
- [Visual Timeline](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/components/incidents/VisualTimeline.jsx): `client/src/components/incidents/VisualTimeline.jsx`
- [Test Display](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/components/common/CodeBlock.jsx): `client/src/components/common/CodeBlock.jsx`
- [Project Management](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/pages/Projects.jsx): `client/src/pages/Projects.jsx`
- [Billing Console](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/pages/Billing.jsx): `client/src/pages/Billing.jsx`
- [Interactive Demo](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/client/src/pages/Demo.jsx): `client/src/pages/Demo.jsx`

### Developer CLI

- [CLI Commands](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/cli/src/index.js): `cli/src/index.js`
- [Local Test Runner](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/cli/src/commands/run.js): `cli/src/commands/run.js`
- [CLI API Client](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/cli/src/services/apiClient.js): `cli/src/services/apiClient.js`
- [CLI Configuration](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/cli/src/utils/configStore.js): `cli/src/utils/configStore.js`

### Identity and Platform

- [API Application](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/app.js): `server/src/app.js`
- [Auth Controller](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/auth/auth.controller.js): `server/src/modules/auth/auth.controller.js`
- [Auth Service](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/auth/auth.service.js): `server/src/modules/auth/auth.service.js`
- [JWT Middleware](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/middleware/auth.js): `server/src/middleware/auth.js`
- [Token and Password Crypto](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/utils/crypto.js): `server/src/utils/crypto.js`
- [Project Controller](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/projects/projects.controller.js): `server/src/modules/projects/projects.controller.js`
- [Project Service](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/projects/projects.service.js): `server/src/modules/projects/projects.service.js`
- [Billing Controller](https://github.com/mohit-gaur75/bugreplay-ai/blob/main/server/src/modules/billing/billing.controller.js): `server/src/modules/billing/billing.controller.js`

### Other components

- **Client Browser**
- **Gemini API**
- **Developer**
- **CLI User**

## Connections

- Client Browser → Capture SDK: runs
- Capture SDK → Ingestion Routes: sends telemetry
- Ingestion Routes → Ingestion Controller: routes to (evidence: `server/src/modules/ingestion/ingestion.routes.js`)
- Ingestion Controller → Incident Ingestion: ingests incident (evidence: `server/src/modules/ingestion/ingestion.controller.js`)
- Incident Ingestion → SQLite Store: writes incident and job (evidence: `server/src/modules/ingestion/ingestion.service.js`)
- Synthesis Worker → SQLite Store: reads queued jobs
- Synthesis Worker → Playwright Synthesizer: dispatches synthesis
- Playwright Synthesizer → Gemini API: generates tests
- Playwright Synthesizer → SQLite Store: stores generated test
- Incident Ingestion → Webhook Notifications: notifies
- Developer → Web Application: uses (evidence: `client/src/App.jsx`)
- Web Application → Web Authentication: uses session (evidence: `client/src/App.jsx`)
- Web Authentication → Web API Client: calls (evidence: `client/src/context/AuthContext.jsx`)
- Web Application → Incident Dashboard: renders (evidence: `client/src/App.jsx`)
- Web Application → Incident Details: renders (evidence: `client/src/App.jsx`)
- Incident Details → Web API Client: loads incident (evidence: `client/src/pages/IncidentDetails.jsx`)
- Incident Details → Visual Timeline: renders (evidence: `client/src/pages/IncidentDetails.jsx`)
- Incident Details → Test Display: renders test (evidence: `client/src/pages/IncidentDetails.jsx`)
- Web Application → Project Management: renders (evidence: `client/src/App.jsx`)
- Web Application → Billing Console: renders (evidence: `client/src/App.jsx`)
- Web Application → Interactive Demo: renders (evidence: `client/src/App.jsx`)
- CLI User → CLI Commands: runs (evidence: `cli/src/index.js`)
- CLI Commands → Local Test Runner: dispatches (evidence: `cli/src/index.js`)
- Local Test Runner → CLI API Client: fetches incident (evidence: `cli/src/commands/run.js`)
- CLI API Client → CLI Configuration: loads settings (evidence: `cli/src/services/apiClient.js`)
- CLI API Client → API Application: requests API
- Web Application → API Application: requests API
- API Application → SQLite Store: initializes store (evidence: `server/src/app.js`)
- API Application → Ingestion Routes: mounts routes (evidence: `server/src/app.js`)
- Auth Controller → Auth Service: delegates (evidence: `server/src/modules/auth/auth.controller.js`)
- Auth Service → SQLite Store: reads and writes (evidence: `server/src/modules/auth/auth.service.js`)
- Auth Service → Token and Password Crypto: uses crypto (evidence: `server/src/modules/auth/auth.service.js`)
- JWT Middleware → Auth Service: loads user (evidence: `server/src/middleware/auth.js`)
- JWT Middleware → Token and Password Crypto: verifies token (evidence: `server/src/middleware/auth.js`)
- Project Controller → Project Service: delegates (evidence: `server/src/modules/projects/projects.controller.js`)
- Billing Controller → SQLite Store: reads and updates (evidence: `server/src/modules/billing/billing.controller.js`)