God's Eye View

# MISSION: Scaffold "God's Eye View" 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 **God's Eye View**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: God's Eye View
- **What It Does**: God's Eye View is a browser-based, spy-satellite style 3D globe that plots live public data (aircraft, ships, satellites, earthquakes, weather, public cameras) on Cesium, with optional hands-free voice control through a realtime AI agent.
- **Domain & Category**: Browser-Based 3D Geospatial Intelligence Simulator
- **Production Scale**: Solo / 2-5 people
- **Development Mode**: HYBRID
- **Architectural Rationale**: All rendering runs client-side on Cesium with plain JavaScript modules, while a thin localhost Node proxy per data provider keeps keys out of the browser, so the whole product installs and runs locally with no hosted backend or database.
- **Live Website Reference**: https://maptheworld.ai/
- **Source Repository**: https://github.com/bilawalsidhu/gods-eye-view
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: JavaScript, Cesium, Vite, Node.js, OpenAI, WebAssembly, Puppeteer, GitHub Actions
- **Primary Language(s)**: JavaScript, CSS, HTML, Shell
- **License of the reference repo**: NOASSERTION
- **Frontend**: JavaScript — Plain ES modules (no UI framework) for the globe, HUD, layers and panels under src/; Cesium — 3D globe engine rendering terrain, imagery, photorealistic 3D tiles and every live entity layer; Vite — Dev server and production bundler, extended by vite-plugin-cesium and a custom build/vite.js; WebAssembly — eccodes-wasm decodes GRIB weather forecasts in the browser for the wind and weather layers
- **Backend & APIs**: Node.js — Local provider proxies under server/providers keep API keys off the client and normalise feeds
- **Infrastructure & deploy**: Puppeteer — Drives the headless-browser QA scripts in scripts/qa-*.mjs that screenshot and probe features; GitHub Actions — Single ci.yml workflow running formatting, boundary checks and unit tests; Pinokio — One-click local installer/launcher scripts for Windows, macOS and Linux
- **Tooling, testing & ops**: OpenAI — Realtime voice agent that maps spoken commands to globe actions (src/voice, server/providers/openai)
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/bilawalsidhu/gods-eye-view @ b210ab0)
1. **A browser app with a thin local Node proxy instead of a hosted backend**: The globe runs entirely in the browser (index.html, src/main.js), while server/providers/*.js expose per-source proxies (live flights, space, traffic, CCTV, radio, OpenAI) bound to localhost, so keys stay in a local .env and there is no server-side database.
2. **Every data source is a separate layer module behind package exports**: package.json "exports" maps each feed to its own module (./layers/flights, ./layers/vessels, ./layers/satellites, ./layers/cctv, …) and scripts/check-package-boundaries.mjs plus check-import-directions.mjs enforce the import rules between them.
3. **Keyless by default, provider keys as in-app upgrades**: Esri imagery, keyless terrain and public feeds work without accounts; Cesium ion, Google Photorealistic 3D Tiles and OpenAI keys are added from the in-app POWER UP panel (src/keySetup.js, server/standalone/key-setup) and written to an owner-only local .env.
4. **Colocated node:test unit tests plus Puppeteer QA scripts**: Logic lives in small policy modules (e.g. src/cockpitVisionPolicy.js) with a sibling *.test.mjs run by scripts/run-unit-tests.mjs, while dozens of scripts/qa-*.mjs Puppeteer scripts exercise rendering, traffic, transit and voice routing in a real browser.
5. **No UI framework; hand-written DOM modules under src/ui**: Panels, HUD, cockpit and director tooling are plain JavaScript modules (src/ui/*.js, src/hud.js) exported through package.json, keeping the dependency list to about ten runtime packages centred on cesium.
---
## 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: 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.