Dimension Lab Website

Standalone React runtime for the Dimension Lab system overview dashboard.

This project is not a Homepage customization and does not depend on Homepage runtime, frontend code, or configuration. The dashboard will be model-driven: the reusable renderer stays content-free, while environment-specific data lives in validated dashboard model state.

Development

bun install
bun run dev

This MVP uses Drizzle with Bun SQLite for local file-backed persistence.

Scripts

• bun run dev: start the local Vite development server with a Bun API proxy.
• bun run check: run TypeScript checks.
• bun run test: run Vitest.
• bun run test:unit: run Vitest explicitly as the unit test stage.
• bun run test:e2e: build and run Playwright browser smoke and QA checks.
• bun run test:qa: run the MVP release gate.
• bun run build: build the production app.
• bun run preview: preview the production build.
• bun run storybook: start the component explorer on port 6006.
• bun run build-storybook: build the static Storybook review artifact.
• bun run db:generate: generate Drizzle migrations from the server schema.
• bun run db:check: validate migration consistency.

Persistence

Dashboard documents are stored in SQLite through Drizzle. The default database URL is:

DATABASE_URL=file:./data/dimensionlab.sqlite

SQLite files under data/ are ignored. Drizzle schema lives in src/lib/server/db/schema.ts; tracked migrations live in drizzle/. Runtime startup applies the checked-in dashboard migrations before reads or writes. If the app is launched from outside the repo tree, set DASHBOARD_MIGRATIONS_DIR to the tracked migrations directory. The current driver is bun:sqlite, which keeps this repo installable in the Bun workflow. The store boundary is isolated so a later Postgres driver can replace the SQLite connection without changing the dashboard model or renderer. Stored dashboard documents pass through a version migration boundary before reads or writes; the MVP supports dashboard.v1 and fails unsupported versions with an explicit migration error.

Seed Data

The initial Dimension Lab dashboard lives in src/lib/model/fixtures/dimensionlab.ts as validated model data. It includes the first-screen telemetry, service groups, status strip, weather module, Iconify icon identifiers, links, and datasource references. Values that are not live yet are labeled as fallback values in the data so later datasource adapters can replace them without changing presentation components.

Runtime Shape

The browser app is built with Vite and React. Local development starts Vite for HMR and a loopback Bun API server for /api/* routes. Production uses a small Bun HTTP server at build/index.js to serve the Vite dist/ assets and JSON API routes. The current persistence runtime is Bun because the MVP SQLite driver is bun:sqlite.

Storybook

Storybook covers the reusable UI components with generic fixtures only. Stories must not import environment-specific dashboard content; the presentation layer accepts labels, values, icons, status, and links through typed props.

MVP QA Gate

Install the Chromium browser once before running e2e checks locally:

bunx playwright install chromium

Run the CI-ready release gate with:

bun run test:qa

The gate runs TypeScript checks, Vitest coverage for model, persistence, renderer, datasource mocks, and presentation boundaries, the production build, the static Storybook build, and Playwright desktop/mobile smoke checks against the built adapter output. Playwright also performs baseline screenshot checks, keyboard navigation checks, reduced-motion checks, landmark checks, and axe accessibility checks against the real model-driven route.

Playwright uses an isolated SQLite database per run unless PLAYWRIGHT_DATABASE_URL is set explicitly.

Presentation code is checked for Dimension Lab content leakage. Environment specific labels, links, icon names, fallback values, and datasource references belong in validated model data, not reusable components.

Deployment Notes

The production build emits Vite client assets under dist/ and a Bun server entry at build/index.js. A minimal deployment flow is:

bun install --frozen-lockfile
bun run build
DATABASE_URL=file:/data/dimensionlab.sqlite HOST=0.0.0.0 PORT=3000 bun build/index.js

Mount /data or set DATABASE_URL to another persistent SQLite path. If the process starts outside the repository root, set DASHBOARD_MIGRATIONS_DIR to the checked-in drizzle/ directory so startup migrations can run.

Internal Container

The checked-in Containerfile builds the React client and Bun server into a runtime image. For the Dimension Lab internal host, run it behind Caddy on a loopback port and mount persistent state at /data:

podman build -t localhost/dimensionlab-website:latest .
podman run --rm \
  --publish 127.0.0.1:25341:3000 \
  --volume "$HOME/containers/dimensionlab-website/data:/data:Z" \
  --env-file "$HOME/containers/dimensionlab-website/dimensionlab-website.env" \
  localhost/dimensionlab-website:latest

The env file must provide AGENT_CONFIG_TOKEN. Runtime defaults inside the image set HOST=0.0.0.0, PORT=3000, DATABASE_URL=file:/data/dimensionlab.sqlite, and DASHBOARD_MIGRATIONS_DIR=/app/drizzle.