Chatwoot

# MISSION: Scaffold "Chatwoot" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **Chatwoot**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Chatwoot
- **What It Does**: Chatwoot is an open-source customer engagement platform providing live chat, email, and omnichannel support desk features, built as a Ruby on Rails application with a Vue dashboard and widget.
- **Domain & Category**: Customer Support Suite
- **Production Scale**: 6-20 people
- **Development Mode**: HYBRID
- **Architectural Rationale**: Keeping the Vue dashboard inside the Rails asset pipeline via vite_rails and running realtime updates over Action Cable lets Chatwoot ship one deployable Rails app instead of coordinating a separate frontend and websocket service, while Sidekiq and OpenSearch handle background work and search.
- **Live Website Reference**: https://chatwoot.com
- **Source Repository**: https://github.com/chatwoot/chatwoot
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: Ruby, Rails, PostgreSQL, Redis, Sidekiq, Vue, Vite, Tailwind CSS, Devise, OpenSearch, Docker
- **Primary Language(s)**: Ruby, Vue, JavaScript
- **License of the reference repo**: NOASSERTION
- **Frontend**: Vue — Component framework for the agent dashboard and the embeddable website widget.; Vite — Build tool and dev server for the Vue frontend, integrated with Rails via vite_rails.; Tailwind CSS — Utility CSS for the dashboard UI, referenced in the repository topics and asset pipeline.
- **Backend & APIs**: Rails — Core web framework serving the REST API, admin, and server-rendered mailer views.; Sidekiq — Background job processor for message delivery, integrations, and scheduled tasks via sidekiq-cron.; Action Cable — Serves websocket connections for live conversation and presence updates via @rails/actioncable on the frontend.; Devise — Authentication framework for agents and users, extended with two-factor and token auth.
- **Data & persistence**: PostgreSQL — Primary relational database, accessed through the pg gem.; Redis — Backs Sidekiq queues and Action Cable pub/sub.; OpenSearch — Full-text search over conversations and contacts via Searchkick and the opensearch-ruby client.
- **Infrastructure & deploy**: Docker — Multi-stage Dockerfile builds the production image; a separate docker-compose.yaml runs the full dev stack.; Puma — Application server running the Rails process in production containers.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/chatwoot/chatwoot @ 39b9d20)
1. **Ruby on Rails serves both the JSON API and the Vue frontend from one app**: Gemfile declares rails 7.2.3.1 and vite_rails, integrating the Vite-built Vue dashboard directly into the Rails asset pipeline rather than running it as a fully separate frontend service.
2. **Sidekiq with Redis handles all asynchronous and scheduled work**: Gemfile includes sidekiq (~> 7.3.10), sidekiq-cron for scheduled jobs, sidekiq_alive for healthchecks, and judoscale-sidekiq for CloudWatch-based autoscaling metrics, making Sidekiq the single background-processing system for message delivery, integrations, and reports.
3. **Realtime dashboard updates run over Action Cable, not a separate websocket service**: The frontend package.json depends on @rails/actioncable, connecting directly to the Rails process for live conversation updates, typing indicators, and presence, keeping realtime infrastructure inside the same Rails/Redis stack used for background jobs.
4. **Search runs on OpenSearch through Searchkick rather than Postgres full-text search**: Gemfile pairs searchkick with opensearch-ruby and faraday_middleware-aws-sigv4 (for signed AWS OpenSearch requests), giving conversation and contact search a dedicated search index instead of relying on Postgres.
5. **Multiple cloud storage backends are supported through one abstraction**: Gemfile depends on aws-sdk-s3, azure-blob, and google-cloud-storage together (all required: false, loaded conditionally), letting self-hosters pick S3, Azure Blob, or Google Cloud Storage for Active Storage attachments without code changes.
6. **The release pipeline runs a Postgres migration step before the app boots**: The Procfile defines a release phase (POSTGRES_STATEMENT_TIMEOUT=600s bundle exec rails db:chatwoot_prepare) that runs before the web and worker dynos start, ensuring schema migrations complete first on Heroku-style deploys.
7. **Dev runs Rails, Sidekiq, and Vite as separate Compose services with shared volumes**: docker-compose.yaml defines rails, sidekiq, vite, postgres, redis, and mailhog services that all depend on a common base image built from docker/Dockerfile, with the rails service explicitly depending on postgres, redis, vite, mailhog, and sidekiq before starting.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Utilize Vite 6 with TanStack Router for fully type-safe routing. Manage server state and caching via TanStack Query v5 with optimistic UI updates.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer (PostgreSQL, Redis, OpenSearch): client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.