chore(ux-lab): tighten acceptance checklists for agent pushes

dashboards/ux-lab/DESIGN_SYSTEM_BRIEF.md

@@ -0,0 +1,43 @@
+# UX Lab — Design System Brief (Must Follow)
+
+This brief applies to all micro-apps under `dashboards/ux-lab/*`.
+
+## Purpose
+
+These micro-apps are **not throwaway**. They must produce UI/UX patterns we can reliably cross-pollinate into:
+
+- `dashboards/admin-web`
+- `dashboards/tracker-web`
+- product web apps in this workspace
+
+## Non-negotiable rules
+
+- No `console.log`.
+- No hardcoded API URLs.
+- No backend/network calls for UX Lab apps.
+- **No hardcoded colors** (no hex, rgb/rgba, hsl). Use design tokens via CSS variables.
+
+## Token usage (web)
+
+- Prefer existing token patterns used in dashboards (CSS custom properties + Tailwind utilities).
+- If you need new tokens for the micro-app, define them as CSS variables in the micro-app’s `src/app/globals.css` under a `--ux-*` namespace.
+- Component styles must reference CSS variables (e.g. `bg-[var(--ux-surface)]`, `text-[var(--ux-text)]`).
+
+## Component approach
+
+- Keep components **generic** and reusable. Avoid domain-specific naming like `TelemetryClusterCard` when a `SummaryCard` would work.
+- Prefer building blocks:
+  - Table, FiltersPanel, Drawer, Modal, EmptyState, Skeleton, Toast, ConfirmDialog
+
+## Accessibility + UX
+
+- Keyboard accessible (Tab, Enter/Space, Esc).
+- Focus management for drawers/modals (return focus to trigger).
+- Responsive layout.
+
+## Integration expectation
+
+When we integrate into production dashboards, we will:
+
+- Copy components into the relevant repo and map tokens to that repo’s token set.
+- Reject PRs that introduce hardcoded colors, console logging, or unnecessary new dependencies.

dashboards/ux-lab/README.md

@@ -0,0 +1,42 @@
+# UX Lab (Delegation Pack)
+
+This folder is intentionally **greenfield** and exists to let external UI/UX generation tools (Bolt, Lovable) create high-quality Next.js UI “micro-apps” that we can later cross-pollinate into:
+
+- `dashboards/admin-web`
+- `dashboards/tracker-web`
+- product web apps (ChronoMind/JarvisJr/etc.)
+
+## Principles
+
+- UI/UX heavy
+- No backend dependency (mock data / local JSON / localStorage)
+- No changes outside each micro-app folder
+- No changes to platform-service / auth / Cosmos
+
+## Micro-apps
+
+This folder contains **6 separate micro-app projects**:
+
+### Bolt apps (3)
+
+- `bolt-ops-ui-kit/` — reusable ops dashboard patterns (tables, filters, states, drawers)
+- `bolt-timeline-studio/` — timeline/scheduler builder UI patterns
+- `bolt-telemetry-explorer/` — local-only telemetry explorer UI patterns
+
+### Lovable apps (3)
+
+- `lovable-ops-ui-kit/` — ops dashboard UI kit (Lovable-led design)
+- `lovable-design-tokens-playground/` — design tokens playground + component previews
+- `lovable-onboarding-flow/` — onboarding + settings wizard UI patterns
+
+Each micro-app folder contains a single `PROMPT.md`.
+
+Copy/paste the prompt into the respective tool and keep all changes scoped to that micro-app folder.
+
+## Deprecated (do not use for new work)
+
+The following folders were an earlier experiment that bundled both prompts per concept. They are kept for reference, but new work should use the 6 dedicated apps above:
+
+- `ops-ui-kit/`
+- `timeline-studio/`
+- `telemetry-explorer/`

dashboards/ux-lab/bolt-ops-ui-kit/.gitignore

@@ -0,0 +1,27 @@
+.next
+out
+node_modules
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# env
+.env
+.env.*
+
+# vercel
+.vercel
+
+# misc
+.DS_Store
+*.tsbuildinfo
+
+# test output
+playwright-report
+coverage
+
+# local
+*.local

dashboards/ux-lab/bolt-ops-ui-kit/ACCEPTANCE_CHECKLIST.md

@@ -0,0 +1,14 @@
+# Acceptance Checklist (PR Gate)
+
+Your PR is acceptable only if all are true:
+
+- Before push: `git status` is clean except for the intended app source changes.
+- Before push: review `git diff` and confirm no unrelated formatting/refactors.
+- No `console.log`.
+- No hardcoded colors (hex/rgb/hsl) anywhere.
+- No network calls.
+- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`.
+- All reusable components live in `src/components/**`.
+- Components do not import from `src/app/**`.
+- `pnpm run check` passes.
+- `pnpm run build` passes using `next build --webpack`.

dashboards/ux-lab/bolt-ops-ui-kit/DESIGN_SYSTEM_BRIEF.md

@@ -0,0 +1,36 @@
+# Design System Brief (Must Follow)
+
+These rules exist so this repo’s output is **production-reusable** across the ByteLyst workspace dashboards and product web apps.
+
+## Non-negotiable rules
+
+- No `console.log`.
+- No hardcoded API URLs.
+- No network calls in this repo (use mock data / local JSON / localStorage).
+- **No hardcoded colors**:
+  - No hex (e.g. `#fff`)
+  - No `rgb/rgba()`
+  - No `hsl/hsla()`
+  - No Tailwind arbitrary hex classes (e.g. `bg-[#123456]`)
+
+## Token usage
+
+- Use the shared token contract in `UX_TOKEN_CONTRACT.md`.
+- Components must reference CSS variables via Tailwind arbitrary values, e.g.:
+  - `bg-[var(--ux-surface)]`
+  - `text-[var(--ux-text)]`
+  - `border-[var(--ux-border)]`
+
+## Component architecture (reusability)
+
+- Reusable components live in `src/components/`.
+- Pages under `src/app/**` should mostly compose components.
+- Components must NOT import from `src/app/**`.
+- Keep data mocks in `src/data/**`.
+
+## Accessibility + UX
+
+- Keyboard accessible (Tab/Shift+Tab, Enter/Space).
+- `Esc` closes dialogs/drawers.
+- Focus returns to the triggering control when overlays close.
+- Mobile usable.

dashboards/ux-lab/bolt-ops-ui-kit/INTEGRATION_NOTES.md

@@ -0,0 +1,24 @@
+# Integration Notes (Read Me)
+
+This repo is a UI/UX pattern source.
+
+## Intended reuse
+
+We will copy selected components from `src/components/**` into:
+
+- shared dashboards (admin/tracker)
+- product web apps
+
+## How to keep code copy-friendly
+
+- Keep reusable logic in `src/lib/**` (pure TS, UI-agnostic where possible).
+- Keep data mocks in `src/data/**`.
+- Avoid tight coupling to route segments.
+- Prefer generic names: `DataTable`, `FiltersPanel`, `DetailsDrawer`, `EmptyState`.
+
+## What will block adoption
+
+- Any hardcoded colors
+- Network calls / real backend wiring
+- Components that only work inside a specific page due to imports from `src/app/**`
+- Heavy dependency additions

dashboards/ux-lab/bolt-ops-ui-kit/PROMPT.md

@@ -0,0 +1,121 @@
+# Bolt App 1 — Ops UI Kit (Micro-App)
+
+Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`.
+
+## Mission
+
+Build a **UI/UX-rich** Next.js 16 micro-app called **Ops UI Kit** that showcases production-grade operations dashboard patterns. This app will later be cross-pollinated into `dashboards/admin-web` and `dashboards/tracker-web`.
+
+## Scope / Safety
+
+- Only change files in this repository.
+- **No backend / no network calls.** Use mock data and localStorage.
+- **No auth, no Cosmos, no Key Vault.**
+- **No `console.log`.**
+- **No hardcoded colors.** Define a small set of CSS variables in `src/app/globals.css` (e.g. `--ux-*`) and only use those + Tailwind utilities.
+- **Do not edit** any other repo folder.
+
+## Stack requirements
+
+- Next.js `16.1.x` (App Router)
+- React `19.x`
+- TypeScript strict
+- TailwindCSS v4
+- shadcn/ui-style components (Radix + Tailwind)
+- lucide-react icons
+- pnpm package manager
+
+## App pages (required)
+
+- `/` — overview landing + links to demos
+- `/table` — DataTable demo
+- `/filters` — filter builder demo
+- `/details` — drawers/modals demo
+- `/states` — loading/empty/error/success patterns
+- `/kpi` — KPI cards + tiny chart placeholders
+
+## App shell UX (required)
+
+- Left sidebar navigation (responsive)
+- Top bar with:
+  - global search input (client-side; filters mock data)
+  - theme toggle (light/dark)
+  - help button showing shortcuts
+- Keyboard shortcuts:
+  - `Cmd+K` opens command palette
+  - `Esc` closes modal/drawer
+
+## Demo requirements (high polish)
+
+### 1) DataTable
+
+Mock dataset (~80–120 rows) representing “incidents” or “webhook deliveries” with:
+
+- `id`, `status`, `severity`, `service`, `createdAt`, `requestId`, `summary`, `tags`
+
+Table must include:
+
+- sorting
+- pagination
+- column visibility toggle
+- row selection + bulk actions bar
+- per-row actions menu:
+  - copy `requestId`
+  - copy row JSON
+  - open details drawer
+- sticky header
+- expandable row details
+
+### 2) Filter Builder
+
+A filter panel supporting:
+
+- faceted filters (status, severity, service)
+- date range (simple UI)
+- free-text search
+- active filter chips row
+- clear all
+- save/load presets (localStorage)
+
+### 3) Details Drawer
+
+Row click opens right-side drawer with tabs:
+
+- Overview (key/value)
+- Raw JSON (pretty-printed)
+- Notes (editable, stored locally)
+
+Focus rules:
+
+- opening drawer moves focus inside
+- closing returns focus to triggering row
+
+### 4) States Gallery
+
+Reusable patterns for:
+
+- skeleton loading
+- empty state with CTA
+- inline error banner with retry
+- toast notifications
+- destructive confirm dialog
+
+## Deliverables
+
+Create a complete app with:
+
+- `package.json` scripts: `dev`, `check`, `build`, `lint`, `test`
+- `check` must run `tsc --noEmit` + `eslint`
+- `build` must run `next build --webpack`
+
+## Verification
+
+From the repo root:
+
+- `pnpm install`
+- `pnpm run check`
+- `pnpm run build`
+
+## Output expectation
+
+Open a PR containing only this app. No other repo changes.

dashboards/ux-lab/bolt-ops-ui-kit/REPO_SCOPING_RULES.md

@@ -0,0 +1,5 @@
+# Repo Scoping Rules
+
+- Only modify files inside this repository.
+- Do not attempt to read or reference parent workspace paths.
+- If you believe a change is needed outside this repo, stop and ask.

dashboards/ux-lab/bolt-ops-ui-kit/UX_TOKEN_CONTRACT.md

@@ -0,0 +1,39 @@
+# UX Token Contract (Shared)
+
+This repo must use the following CSS custom properties (tokens). Define them in `src/app/globals.css` under `:root` and optionally provide a `.dark` override.
+
+## Core surfaces
+
+- `--ux-bg`
+- `--ux-surface`
+- `--ux-surface-2`
+- `--ux-border`
+
+## Text
+
+- `--ux-text`
+- `--ux-text-muted`
+
+## Brand / states
+
+- `--ux-accent`
+- `--ux-accent-foreground`
+- `--ux-danger`
+- `--ux-warning`
+- `--ux-success`
+
+## Focus + shadows
+
+- `--ux-ring`
+- `--ux-shadow`
+
+## Usage examples
+
+- Background: `bg-[var(--ux-bg)]`
+- Card: `bg-[var(--ux-surface)] border border-[var(--ux-border)]`
+- Primary button: `bg-[var(--ux-accent)] text-[var(--ux-accent-foreground)]`
+- Muted text: `text-[var(--ux-text-muted)]`
+
+## Integration note
+
+When this repo’s components are copied into another app, we will map these variables to that app’s token system.

dashboards/ux-lab/bolt-telemetry-explorer/.gitignore

@@ -0,0 +1,27 @@
+.next
+out
+node_modules
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# env
+.env
+.env.*
+
+# vercel
+.vercel
+
+# misc
+.DS_Store
+*.tsbuildinfo
+
+# test output
+playwright-report
+coverage
+
+# local
+*.local

dashboards/ux-lab/bolt-telemetry-explorer/ACCEPTANCE_CHECKLIST.md

@@ -0,0 +1,11 @@
+# Acceptance Checklist
+
+- Before push: `git status` is clean except for the intended app source changes.
+- Before push: review `git diff` and confirm no unrelated formatting/refactors.
+- No `console.log`.
+- No hardcoded colors.
+- No network calls.
+- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`.
+- Components in `src/components/**`; no imports from `src/app/**`.
+- `pnpm run check` passes.
+- `pnpm run build` passes (`next build --webpack`).

dashboards/ux-lab/bolt-telemetry-explorer/DESIGN_SYSTEM_BRIEF.md

@@ -0,0 +1,26 @@
+# Design System Brief (Must Follow)
+
+These rules exist so this repo’s output is **production-reusable** across the ByteLyst workspace dashboards and product web apps.
+
+## Non-negotiable rules
+
+- No `console.log`.
+- No hardcoded API URLs.
+- No network calls in this repo.
+- **No hardcoded colors** (no hex/rgb/hsl).
+
+## Token usage
+
+- Use `UX_TOKEN_CONTRACT.md`.
+- Style via CSS variables (`--ux-*`).
+
+## Component architecture
+
+- Reusable components in `src/components/**`.
+- No imports from `src/app/**` inside components.
+- Mock data in `src/data/**`.
+
+## UX
+
+- Keyboard accessible.
+- Drawer/modal focus management.

dashboards/ux-lab/bolt-telemetry-explorer/INTEGRATION_NOTES.md

@@ -0,0 +1,9 @@
+# Integration Notes
+
+This repo is a pattern source for an observability-style telemetry explorer.
+
+Keep it reusable by:
+
+- Building generic primitives: `FacetFilter`, `FilterChipsRow`, `DetailsDrawer`, `JsonViewer`.
+- Keeping grouping/fingerprinting logic in `src/lib/**`.
+- Styling strictly via `--ux-*` tokens.

dashboards/ux-lab/bolt-telemetry-explorer/PROMPT.md

@@ -0,0 +1,76 @@
+# Bolt App 3 — Telemetry Explorer (Local-Only Micro-App)
+
+Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`.
+
+## Mission
+
+Build a UI/UX-rich **Telemetry Explorer** Next.js micro-app that loads a local JSON dataset and provides a premium observability-console-like exploration experience. This is meant to inspire improvements in Admin “Client Logs”.
+
+## Scope / Safety
+
+- Only change files in this repository.
+- No network calls
+- No `console.log`
+- No hardcoded colors (CSS vars + Tailwind)
+
+## Data source (required)
+
+Include:
+
+- `src/data/sample-events.json` with ~200 mock events
+
+Event fields (keep consistent):
+
+- `id`, `timestamp`, `productId`, `platform`, `osFamily`, `appVersion`, `eventType`, `module`, `eventName`, `requestId?`, `userId?`, `installId?`, `severity?`, `errorMessage?`, `metadata` (object)
+
+## Routes
+
+- `/` overview + stats
+- `/explore` main explorer
+- `/clusters` client-side error grouping
+
+## Explorer UX (required)
+
+### Filters
+
+- Faceted filters: platform, eventType, module, eventName, severity
+- Date range (simple)
+- Free text search
+- Active filter chips + clear all
+- Save/load presets (localStorage)
+
+### Results
+
+- Table/list toggle
+- Row click opens detail drawer with tabs:
+  - Overview
+  - Raw JSON
+  - Related (same requestId/installId)
+- Copy actions: copy requestId, copy JSON
+
+### URL state
+
+- Filters reflected in query params (shareable links)
+
+## Clusters UX (required)
+
+- Group by simple fingerprint: `eventName + errorMessage`
+- Show: count, lastSeen, sample message
+- Click cluster → list example events
+
+## Deliverables
+
+- Full Next.js app with scripts: `dev`, `check`, `build`
+- `build` must run `next build --webpack`
+
+## Verification
+
+From the repo root:
+
+- `pnpm install`
+- `pnpm run check`
+- `pnpm run build`
+
+## Output expectation
+
+PR contains only this app.

dashboards/ux-lab/bolt-telemetry-explorer/REPO_SCOPING_RULES.md

@@ -0,0 +1,4 @@
+# Repo Scoping Rules
+
+- Only modify files inside this repository.
+- If you believe a change is needed outside this repo, stop and ask.

dashboards/ux-lab/bolt-telemetry-explorer/UX_TOKEN_CONTRACT.md

@@ -0,0 +1,17 @@
+# UX Token Contract (Shared)
+
+Define these CSS variables in `src/app/globals.css`:
+
+- `--ux-bg`
+- `--ux-surface`
+- `--ux-surface-2`
+- `--ux-border`
+- `--ux-text`
+- `--ux-text-muted`
+- `--ux-accent`
+- `--ux-accent-foreground`
+- `--ux-danger`
+- `--ux-warning`
+- `--ux-success`
+- `--ux-ring`
+- `--ux-shadow`

dashboards/ux-lab/bolt-timeline-studio/.gitignore

@@ -0,0 +1,27 @@
+.next
+out
+node_modules
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# env
+.env
+.env.*
+
+# vercel
+.vercel
+
+# misc
+.DS_Store
+*.tsbuildinfo
+
+# test output
+playwright-report
+coverage
+
+# local
+*.local

dashboards/ux-lab/bolt-timeline-studio/ACCEPTANCE_CHECKLIST.md

@@ -0,0 +1,11 @@
+# Acceptance Checklist
+
+- Before push: `git status` is clean except for the intended app source changes.
+- Before push: review `git diff` and confirm no unrelated formatting/refactors.
+- No `console.log`.
+- No hardcoded colors.
+- No network calls.
+- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`.
+- Components in `src/components/**`; no imports from `src/app/**`.
+- `pnpm run check` passes.
+- `pnpm run build` passes (`next build --webpack`).

dashboards/ux-lab/bolt-timeline-studio/DESIGN_SYSTEM_BRIEF.md

@@ -0,0 +1,27 @@
+# Design System Brief (Must Follow)
+
+These rules exist so this repo’s output is **production-reusable** across the ByteLyst workspace dashboards and product web apps.
+
+## Non-negotiable rules
+
+- No `console.log`.
+- No hardcoded API URLs.
+- No network calls in this repo (use mock data / local JSON / localStorage).
+- **No hardcoded colors** (no hex/rgb/hsl or Tailwind arbitrary hex).
+
+## Token usage
+
+- Use the shared token contract in `UX_TOKEN_CONTRACT.md`.
+- Prefer `bg-[var(--ux-*)]` / `text-[var(--ux-*)]`.
+
+## Component architecture (reusability)
+
+- Reusable components live in `src/components/`.
+- Pages under `src/app/**` compose components.
+- Components must NOT import from `src/app/**`.
+
+## Accessibility + UX
+
+- Keyboard accessible.
+- `Esc` closes overlays.
+- Focus management for dialogs/drawers.

dashboards/ux-lab/bolt-timeline-studio/INTEGRATION_NOTES.md

@@ -0,0 +1,9 @@
+# Integration Notes
+
+This repo is a pattern source for timeline/scheduler UI.
+
+Adoption expectations:
+
+- Timeline primitives should live in `src/components/**` (grid, block, lane list, inspector).
+- Keep drag/resize math in `src/lib/**` so we can transplant it.
+- Use the shared `--ux-*` token contract.

dashboards/ux-lab/bolt-timeline-studio/PROMPT.md

@@ -0,0 +1,89 @@
+# Bolt App 2 — Timeline Studio (Micro-App)
+
+Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`.
+
+## Mission
+
+Build a UI/UX-rich Next.js micro-app called **Timeline Studio** that demonstrates timeline/scheduler editing patterns (drag, resize, inspector). This should be reusable inspiration for ChronoMind timelines and routines UX.
+
+## Scope / Safety
+
+- Only change files in this repository.
+- No network calls; mock data + localStorage only
+- No `console.log`
+- No hardcoded colors; define CSS variables once and use Tailwind
+
+## Stack
+
+- Next.js 16 App Router
+- React 19
+- Tailwind v4
+- TypeScript strict
+- pnpm
+- lucide-react icons
+
+## Routes
+
+- `/` overview + recent plans
+- `/studio` main editor
+- `/export` JSON import/export
+
+## Layout
+
+- Left sidebar: list of “plans” (templates)
+- Main canvas: timeline grid
+- Right inspector: edit selected block
+
+## Timeline interactions (must-have)
+
+- Lanes (e.g. Work, Personal, Health)
+- Blocks can be:
+  - created (button + click on grid)
+  - selected
+  - dragged to move
+  - resized via left/right handles
+- Snap-to-grid increments (5 min)
+- Zoom levels (15m / 30m / 60m)
+- Keyboard:
+  - `Esc` deselect
+  - `Delete` remove selected
+  - `Cmd+Z` undo (simple history stack)
+
+## Inspector (must-have)
+
+- Title
+- Start/end time
+- Lane
+- Tags
+- Notes
+
+Persist in localStorage:
+
+- plans list
+- blocks
+- zoom
+- last opened plan
+
+## UX quality bar
+
+- Clear selection states + resize handles
+- Good hit targets
+- Subtle animations
+- Empty state onboarding hints
+
+## Deliverables
+
+- Full Next.js app with scripts: `dev`, `check`, `build`
+- `build` must run `next build --webpack`
+
+## Verification
+
+From the repo root:
+
+- `pnpm install`
+- `pnpm run check`
+- `pnpm run build`
+
+## Output expectation
+
+PR contains only this app.

dashboards/ux-lab/bolt-timeline-studio/REPO_SCOPING_RULES.md

@@ -0,0 +1,4 @@
+# Repo Scoping Rules
+
+- Only modify files inside this repository.
+- If you believe a change is needed outside this repo, stop and ask.

dashboards/ux-lab/bolt-timeline-studio/UX_TOKEN_CONTRACT.md

@@ -0,0 +1,19 @@
+# UX Token Contract (Shared)
+
+Use the same tokens as other UX Lab repos.
+
+Define in `src/app/globals.css`:
+
+- `--ux-bg`
+- `--ux-surface`
+- `--ux-surface-2`
+- `--ux-border`
+- `--ux-text`
+- `--ux-text-muted`
+- `--ux-accent`
+- `--ux-accent-foreground`
+- `--ux-danger`
+- `--ux-warning`
+- `--ux-success`
+- `--ux-ring`
+- `--ux-shadow`

dashboards/ux-lab/lovable-design-tokens-playground/.gitignore

@@ -0,0 +1,27 @@
+.next
+out
+node_modules
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# env
+.env
+.env.*
+
+# vercel
+.vercel
+
+# misc
+.DS_Store
+*.tsbuildinfo
+
+# test output
+playwright-report
+coverage
+
+# local
+*.local

dashboards/ux-lab/lovable-design-tokens-playground/ACCEPTANCE_CHECKLIST.md

@@ -0,0 +1,11 @@
+# Acceptance Checklist
+
+- Before push: `git status` is clean except for the intended app source changes.
+- Before push: review `git diff` and confirm no unrelated formatting/refactors.
+- No `console.log`.
+- No hardcoded colors.
+- No network calls.
+- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`.
+- Components in `src/components/**`; no imports from `src/app/**`.
+- `pnpm run check` passes.
+- `pnpm run build` passes (`next build --webpack`).

dashboards/ux-lab/lovable-design-tokens-playground/DESIGN_SYSTEM_BRIEF.md

@@ -0,0 +1,19 @@
+# Design System Brief (Must Follow)
+
+This repo is a tokens playground; it must strictly demonstrate token-driven UI.
+
+## Non-negotiable rules
+
+- No `console.log`.
+- No network calls.
+- **No hardcoded colors** (hex/rgb/hsl). Everything must be CSS variables.
+
+## Token usage
+
+- Use the shared token contract in `UX_TOKEN_CONTRACT.md`.
+- All UI must be driven by those variables.
+
+## Component architecture
+
+- Reusable components in `src/components/**`.
+- No imports from `src/app/**` inside components.

dashboards/ux-lab/lovable-design-tokens-playground/INTEGRATION_NOTES.md

@@ -0,0 +1,9 @@
+# Integration Notes
+
+This repo exists to validate token-driven UI patterns and provide a reusable component preview gallery.
+
+Reusable parts we expect to transplant:
+
+- contrast checker UI
+- component gallery layout
+- token pickers

dashboards/ux-lab/lovable-design-tokens-playground/PROMPT.md

@@ -0,0 +1,67 @@
+# Lovable App 2 — Design Tokens Playground (Micro-App)
+
+Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`.
+
+## Goal
+
+Build a UI/UX-rich **Design Tokens Playground** micro-app that previews a token-driven design system and provides high-signal tooling to spot inconsistencies.
+
+This app is meant for **visual QA** and cross-pollination.
+
+## Constraints
+
+- Only modify files in this repository.
+- No network calls
+- No `console.log`
+- No hardcoded colors (tokens only; define CSS variables and consume them)
+
+## Pages (required)
+
+- `/` Overview: theme switcher + token summary
+- `/colors` Color ramp preview + contrast checker UI
+- `/typography` Type scale preview
+- `/components` Component preview gallery
+- `/audit` “Hardcoded color detector” helper (basic UI tool)
+
+## Key features
+
+### Theme + token controls
+
+- Theme toggle
+- Density toggle (comfortable/compact)
+- Radius slider (small/medium/large) affecting components
+
+### Contrast checker
+
+- Select foreground/background token
+- Show WCAG-ish pass/fail indicator (client-side)
+
+### Component gallery
+
+Preview:
+
+- buttons
+- inputs
+- cards
+- alerts
+- tabs
+- table
+
+### Audit helper (UI tool)
+
+- Allow user to paste code snippets
+- Highlight hex colors / rgb() occurrences
+- Provide suggested token replacement list (heuristic)
+
+## Deliverables
+
+- Next.js 16 app
+- Tailwind v4
+- TypeScript strict
+- Scripts: `dev`, `check`, `build` (`next build --webpack`)
+
+## Success criteria
+
+- Extremely polished UI
+- Useful for designers/engineers
+- Self-contained and safe

dashboards/ux-lab/lovable-design-tokens-playground/REPO_SCOPING_RULES.md

@@ -0,0 +1,4 @@
+# Repo Scoping Rules
+
+- Only modify files inside this repository.
+- If you believe a change is needed outside this repo, stop and ask.

dashboards/ux-lab/lovable-design-tokens-playground/UX_TOKEN_CONTRACT.md

@@ -0,0 +1,17 @@
+# UX Token Contract (Shared)
+
+This playground must define and preview these tokens:
+
+- `--ux-bg`
+- `--ux-surface`
+- `--ux-surface-2`
+- `--ux-border`
+- `--ux-text`
+- `--ux-text-muted`
+- `--ux-accent`
+- `--ux-accent-foreground`
+- `--ux-danger`
+- `--ux-warning`
+- `--ux-success`
+- `--ux-ring`
+- `--ux-shadow`

dashboards/ux-lab/lovable-onboarding-flow/.gitignore

@@ -0,0 +1,27 @@
+.next
+out
+node_modules
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# env
+.env
+.env.*
+
+# vercel
+.vercel
+
+# misc
+.DS_Store
+*.tsbuildinfo
+
+# test output
+playwright-report
+coverage
+
+# local
+*.local

dashboards/ux-lab/lovable-onboarding-flow/ACCEPTANCE_CHECKLIST.md

@@ -0,0 +1,11 @@
+# Acceptance Checklist
+
+- Before push: `git status` is clean except for the intended app source changes.
+- Before push: review `git diff` and confirm no unrelated formatting/refactors.
+- No `console.log`.
+- No hardcoded colors.
+- No network calls.
+- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`.
+- Components in `src/components/**`; no imports from `src/app/**`.
+- `pnpm run check` passes.
+- `pnpm run build` passes (`next build --webpack`).

dashboards/ux-lab/lovable-onboarding-flow/DESIGN_SYSTEM_BRIEF.md

@@ -0,0 +1,25 @@
+# Design System Brief (Must Follow)
+
+This repo is an onboarding/settings UX pattern source.
+
+## Non-negotiable rules
+
+- No `console.log`.
+- No network calls.
+- No hardcoded colors (hex/rgb/hsl). Use CSS variables.
+
+## Token usage
+
+- Use `UX_TOKEN_CONTRACT.md`.
+
+## Component architecture
+
+- Reusable components in `src/components/**`.
+- Steps/pages in `src/app/**` compose components.
+- Components must NOT import from `src/app/**`.
+
+## UX
+
+- Great validation states.
+- Keyboard accessible.
+- Mobile-first responsive.

dashboards/ux-lab/lovable-onboarding-flow/INTEGRATION_NOTES.md

@@ -0,0 +1,12 @@
+# Integration Notes
+
+This repo provides reusable onboarding and settings UX patterns.
+
+Expected reusable components:
+
+- wizard shell (progress, stepper)
+- validation + field components
+- review/summary page patterns
+- danger zone confirm patterns
+
+All must use `--ux-*` tokens.

dashboards/ux-lab/lovable-onboarding-flow/PROMPT.md

@@ -0,0 +1,67 @@
+# Lovable App 3 — Onboarding + Settings Wizard (Micro-App)
+
+Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`.
+
+## Goal
+
+Build a best-in-class **onboarding + settings wizard** micro-app demonstrating premium UX patterns we can reuse across products.
+
+## Constraints
+
+- Only modify files in this repository.
+- No backend calls; localStorage only
+- No `console.log`
+- No hardcoded colors (CSS variables)
+
+## Experience requirements (high polish)
+
+### Onboarding flow
+
+- Multi-step wizard (5–7 steps)
+- Progress indicator + step labels
+- Back/Next with validation
+- Optional “Skip for now” with confirm dialog
+- Autosave progress to localStorage
+
+### Steps to include (example)
+
+- Profile basics (name, timezone)
+- Preferences (theme, density)
+- Notifications (toggles)
+- Integrations (fake list, connect buttons)
+- Privacy level selector
+- Final review summary
+
+### Settings area
+
+After onboarding completes, show a settings dashboard with:
+
+- profile card
+- preferences section
+- notification settings
+- danger zone (delete local profile) with confirm
+
+### UX/accessibility
+
+- Great empty/error/validation states
+- Keyboard accessible
+- Mobile-first responsive
+
+## Routes
+
+- `/` start/resume onboarding
+- `/onboarding` wizard
+- `/settings` settings dashboard
+
+## Deliverables
+
+- Next.js 16 App Router
+- Tailwind v4
+- TypeScript strict
+- Scripts: `dev`, `check`, `build` (`next build --webpack`)
+
+## Success criteria
+
+- Feels like a premium consumer app onboarding
+- Components reusable in other products
+- Safe and self-contained

dashboards/ux-lab/lovable-onboarding-flow/REPO_SCOPING_RULES.md

@@ -0,0 +1,4 @@
+# Repo Scoping Rules
+
+- Only modify files inside this repository.
+- If you believe a change is needed outside this repo, stop and ask.

dashboards/ux-lab/lovable-onboarding-flow/UX_TOKEN_CONTRACT.md

@@ -0,0 +1,17 @@
+# UX Token Contract (Shared)
+
+Define in `src/app/globals.css`:
+
+- `--ux-bg`
+- `--ux-surface`
+- `--ux-surface-2`
+- `--ux-border`
+- `--ux-text`
+- `--ux-text-muted`
+- `--ux-accent`
+- `--ux-accent-foreground`
+- `--ux-danger`
+- `--ux-warning`
+- `--ux-success`
+- `--ux-ring`
+- `--ux-shadow`

dashboards/ux-lab/lovable-ops-ui-kit/.gitignore

@@ -0,0 +1,27 @@
+.next
+out
+node_modules
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# env
+.env
+.env.*
+
+# vercel
+.vercel
+
+# misc
+.DS_Store
+*.tsbuildinfo
+
+# test output
+playwright-report
+coverage
+
+# local
+*.local

dashboards/ux-lab/lovable-ops-ui-kit/ACCEPTANCE_CHECKLIST.md

@@ -0,0 +1,11 @@
+# Acceptance Checklist
+
+- Before push: `git status` is clean except for the intended app source changes.
+- Before push: review `git diff` and confirm no unrelated formatting/refactors.
+- No `console.log`.
+- No hardcoded colors.
+- No network calls.
+- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`.
+- Components in `src/components/**`; no imports from `src/app/**`.
+- `pnpm run check` passes.
+- `pnpm run build` passes (`next build --webpack`).

dashboards/ux-lab/lovable-ops-ui-kit/DESIGN_SYSTEM_BRIEF.md

@@ -0,0 +1,20 @@
+# Design System Brief (Must Follow)
+
+This repo is design-led, but must still be production-reusable.
+
+## Non-negotiable rules
+
+- No `console.log`.
+- No hardcoded API URLs.
+- No network calls.
+- **No hardcoded colors** (no hex/rgb/hsl). Use CSS variables.
+
+## Token usage
+
+- Use `UX_TOKEN_CONTRACT.md`.
+
+## Component architecture
+
+- Reusable components in `src/components/**`.
+- Pages in `src/app/**` compose components.
+- Components must NOT import from `src/app/**`.

dashboards/ux-lab/lovable-ops-ui-kit/INTEGRATION_NOTES.md

@@ -0,0 +1,8 @@
+# Integration Notes
+
+Design-led Ops UI kit. Prioritize consistent spacing, typography, and states.
+
+For reuse:
+
+- Components must be generic and live in `src/components/**`.
+- Use `--ux-*` tokens only.

dashboards/ux-lab/lovable-ops-ui-kit/PROMPT.md

@@ -0,0 +1,55 @@
+# Lovable App 1 — Ops UI Kit (Design-led Micro-App)
+
+Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`.
+
+## Goal
+
+Create a visually polished **Ops Dashboard UI Kit** micro-app that feels like a premium admin console. This app is design-led: prioritize typography, spacing, states, and interaction polish.
+
+## Scope constraints
+
+- Only modify files in this repository.
+- No backend calls; mock data + localStorage only
+- No `console.log`
+- No hardcoded colors (use CSS variables)
+
+## Must-have pages
+
+- `/` overview landing
+- `/components` gallery of:
+  - buttons, inputs, selects
+  - badges, tabs
+  - dialogs/drawers
+  - toasts
+  - empty/loading/error states
+- `/table` table demo with filters
+
+## UX requirements
+
+- Theme toggle (light/dark)
+- Keyboard accessibility:
+  - Esc closes overlays
+  - focus returns to triggering element
+- Micro-interactions:
+  - hover, press, focus rings
+  - subtle animation for drawer/dialog
+
+## Table requirements
+
+- Mock dataset: incidents
+- Sort + filter + pagination
+- Row actions menu
+- Details drawer with tabs
+
+## Deliverables
+
+- Next.js 16 App Router app
+- Tailwind v4
+- TypeScript strict
+- Scripts: `dev`, `check`, `build` (build uses `next build --webpack`)
+
+## Success criteria
+
+- Looks and feels premium
+- Fully self-contained
+- Ready to copy components into other dashboards

dashboards/ux-lab/lovable-ops-ui-kit/REPO_SCOPING_RULES.md

@@ -0,0 +1,4 @@
+# Repo Scoping Rules
+
+- Only modify files inside this repository.
+- If you believe a change is needed outside this repo, stop and ask.

dashboards/ux-lab/lovable-ops-ui-kit/UX_TOKEN_CONTRACT.md

@@ -0,0 +1,17 @@
+# UX Token Contract (Shared)
+
+Define in `src/app/globals.css`:
+
+- `--ux-bg`
+- `--ux-surface`
+- `--ux-surface-2`
+- `--ux-border`
+- `--ux-text`
+- `--ux-text-muted`
+- `--ux-accent`
+- `--ux-accent-foreground`
+- `--ux-danger`
+- `--ux-warning`
+- `--ux-success`
+- `--ux-ring`
+- `--ux-shadow`