Grafana

# MISSION: Scaffold "Grafana" 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 **Grafana**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Grafana
- **What It Does**: Grafana is an open-source observability platform for querying, visualizing and alerting on metrics, logs and traces from many data sources, built as a Go backend organized into independent App Platform modules paired with a large React and TypeScript frontend.
- **Domain & Category**: Monitoring & Observability Dashboard
- **Production Scale**: 20+ people
- **Development Mode**: CLASSIC
- **Architectural Rationale**: Grafana splits its backend into a growing set of independently versioned Go modules under apps/, tied together by a go.work workspace and modeled with Kubernetes-style APIs (pkg/apiserver, CUE-defined kinds), so individual product areas like alerting or dashboards can evolve without one monolithic backend module.
- **Live Website Reference**: https://grafana.com
- **Source Repository**: https://github.com/grafana/grafana
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: TypeScript, Go, React, PostgreSQL, Docker, Nx, Yarn, Webpack, Rspack, CUE, Playwright, Jest
- **Primary Language(s)**: TypeScript, Go
- **License of the reference repo**: AGPL-3.0
- **Frontend**: React — The public/app frontend and the @grafana/ui, @grafana/data and @grafana/runtime SDK packages are React and TypeScript.; Webpack — Production build path (scripts/webpack/webpack.prod.ts, webpack.stats.ts) for the frontend bundle.; Rspack — Rust-based bundler used for the boot bundle and Swagger docs build (scripts/rspack/rspack.boot.ts, rspack.swagger.ts), alongside Webpack.
- **Backend & APIs**: Go — Core server (pkg/) and every apps/* module (dashboard, alerting, iam, folder, etc.) are Go, tied together by a go.work workspace.; Grafana App Platform — apps/ holds ~20 independent Go modules (own go.mod each) for features like iam, dashboard and alerting, replace-linked to the root module.; CUE — Defines API kinds/schemas (kinds/dashboard) that back the Kubernetes-style API machinery in pkg/apiserver and pkg/apimachinery.
- **Data & persistence**: PostgreSQL — PL/pgSQL is the third-largest language by bytes in the repo, indicating Postgres-specific code as a supported storage backend.
- **Infrastructure & deploy**: Docker — Multi-stage build: alpine/ubuntu base images, a golang:1.26-alpine builder and a node:24-alpine JS builder, copied into a distroless runtime.; GitHub Actions — Roughly 96 workflows cover backend/frontend checks, release branching, i18n sync, Storybook and docker builds.
- **Tooling, testing & ops**: Nx — Orchestrates cached build and generate targets across the JS/TS workspace.; Yarn — Package manager for the whole JS/TS workspace (yarn.lock, .yarnrc.yml, .yarn/).; Lerna — Pins the shared 13.3.0-pre package version across the workspace and sets yarn as the npm client.; Jest — Frontend unit test runner (jest.config.js, jest.config.codeowner.js).; Playwright — End-to-end tests under e2e-playwright/, split into per-feature suites, plus a separate Storybook interaction config.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/grafana/grafana @ efeddb7)
1. **apps/ modules are independent Go modules stitched together by go.work**: apps/iam/go.mod, apps/dashboard/go.mod and roughly 18 sibling modules each declare their own module path and use replace directives pointing at the root grafana module and at each other (e.g. github.com/grafana/grafana/apps/advisor => ../advisor); go.work at the repo root ties them into one buildable workspace.
2. **Internal APIs are modeled Kubernetes-style, not as plain REST CRUD**: pkg/apiserver and pkg/apimachinery implement Kubernetes-style API-server machinery, and kinds/dashboard plus cue.mod/module.cue define resource kinds in CUE, so resources like dashboards get typed schemas and versioned APIs the way Kubernetes custom resources do.
3. **Two bundlers coexist during a Webpack-to-Rspack migration**: package.json keeps build (Webpack, scripts/webpack/webpack.prod.ts) as the main production build script while build:rspack (scripts/rspack/rspack.prod.ts) and build:rspack:boot (rspack.boot.ts) run the boot bundle and swagger docs through Rspack, letting the migration proceed bundle-by-bundle instead of all at once.
4. **The plugin SDK ships as roughly twenty separately published npm packages**: packages/grafana-data, grafana-runtime, grafana-ui, grafana-schema, grafana-alerting, grafana-flamegraph, grafana-i18n, grafana-e2e-selectors and others each have their own package.json and version (13.3.0-pre), so datasource and panel plugin authors can depend on just the SDK surface they need rather than the whole grafana package.
5. **Yarn, Nx and Lerna jointly own the JS/TS monorepo workflow**: yarn.lock and .yarnrc.yml select Yarn as the package manager, nx.json defines cached build/generate targets, and lerna.json sets npmClient: yarn and pins the shared 13.3.0-pre version, splitting install, task caching and version bumping across three purpose-built tools instead of one.
6. **End-to-end tests are Playwright, organized per product surface**: e2e-playwright/ is split into suites like alerting-suite, dashboards-suite, panels-suite, plugin-catalog-suite and cloud-plugins-suite rather than one flat test directory, with a dedicated playwright.storybook.config.ts alongside the main playwright.config.ts for Storybook-based interaction tests.
7. **The shipped runtime image is distroless**: The Dockerfile builds the frontend in a node:24-alpine stage and the backend in a golang:1.26.6-alpine stage, then copies both into a gcr.io/distroless/static-debian13 final image, so the running container has no shell or package manager to reduce attack surface.
---
## 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**:
   - Isolate interactive UI state to leaf components. Keep core pages lightweight and performant.
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): 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.