diff --git a/dashboards/ux-lab/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/DESIGN_SYSTEM_BRIEF.md new file mode 100644 index 00000000..bad0088d --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/README.md b/dashboards/ux-lab/README.md new file mode 100644 index 00000000..029b535e --- /dev/null +++ b/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/` diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/.gitignore b/dashboards/ux-lab/bolt-ops-ui-kit/.gitignore new file mode 100644 index 00000000..3b966cbf --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/bolt-ops-ui-kit/ACCEPTANCE_CHECKLIST.md new file mode 100644 index 00000000..f5d6165c --- /dev/null +++ b/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`. diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/bolt-ops-ui-kit/DESIGN_SYSTEM_BRIEF.md new file mode 100644 index 00000000..84fb5d30 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/INTEGRATION_NOTES.md b/dashboards/ux-lab/bolt-ops-ui-kit/INTEGRATION_NOTES.md new file mode 100644 index 00000000..c4678da9 --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/PROMPT.md b/dashboards/ux-lab/bolt-ops-ui-kit/PROMPT.md new file mode 100644 index 00000000..9bfdb202 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/REPO_SCOPING_RULES.md b/dashboards/ux-lab/bolt-ops-ui-kit/REPO_SCOPING_RULES.md new file mode 100644 index 00000000..f14b6310 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-ops-ui-kit/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/bolt-ops-ui-kit/UX_TOKEN_CONTRACT.md new file mode 100644 index 00000000..94acefba --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/.gitignore b/dashboards/ux-lab/bolt-telemetry-explorer/.gitignore new file mode 100644 index 00000000..3b966cbf --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/bolt-telemetry-explorer/ACCEPTANCE_CHECKLIST.md new file mode 100644 index 00000000..c05a2377 --- /dev/null +++ b/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`). diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/bolt-telemetry-explorer/DESIGN_SYSTEM_BRIEF.md new file mode 100644 index 00000000..dbe8810b --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/INTEGRATION_NOTES.md b/dashboards/ux-lab/bolt-telemetry-explorer/INTEGRATION_NOTES.md new file mode 100644 index 00000000..33d28d9c --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/PROMPT.md b/dashboards/ux-lab/bolt-telemetry-explorer/PROMPT.md new file mode 100644 index 00000000..0eda3009 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/REPO_SCOPING_RULES.md b/dashboards/ux-lab/bolt-telemetry-explorer/REPO_SCOPING_RULES.md new file mode 100644 index 00000000..3764afa5 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-telemetry-explorer/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/bolt-telemetry-explorer/UX_TOKEN_CONTRACT.md new file mode 100644 index 00000000..fbb38ff4 --- /dev/null +++ b/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` diff --git a/dashboards/ux-lab/bolt-timeline-studio/.gitignore b/dashboards/ux-lab/bolt-timeline-studio/.gitignore new file mode 100644 index 00000000..3b966cbf --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/bolt-timeline-studio/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/bolt-timeline-studio/ACCEPTANCE_CHECKLIST.md new file mode 100644 index 00000000..c05a2377 --- /dev/null +++ b/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`). diff --git a/dashboards/ux-lab/bolt-timeline-studio/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/bolt-timeline-studio/DESIGN_SYSTEM_BRIEF.md new file mode 100644 index 00000000..aeea2cee --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-timeline-studio/INTEGRATION_NOTES.md b/dashboards/ux-lab/bolt-timeline-studio/INTEGRATION_NOTES.md new file mode 100644 index 00000000..4afed67a --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-timeline-studio/PROMPT.md b/dashboards/ux-lab/bolt-timeline-studio/PROMPT.md new file mode 100644 index 00000000..db371cfc --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-timeline-studio/REPO_SCOPING_RULES.md b/dashboards/ux-lab/bolt-timeline-studio/REPO_SCOPING_RULES.md new file mode 100644 index 00000000..3764afa5 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-timeline-studio/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/bolt-timeline-studio/UX_TOKEN_CONTRACT.md new file mode 100644 index 00000000..a2d08575 --- /dev/null +++ b/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` diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/.gitignore b/dashboards/ux-lab/lovable-design-tokens-playground/.gitignore new file mode 100644 index 00000000..3b966cbf --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/lovable-design-tokens-playground/ACCEPTANCE_CHECKLIST.md new file mode 100644 index 00000000..c05a2377 --- /dev/null +++ b/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`). diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/lovable-design-tokens-playground/DESIGN_SYSTEM_BRIEF.md new file mode 100644 index 00000000..7f85a796 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/INTEGRATION_NOTES.md b/dashboards/ux-lab/lovable-design-tokens-playground/INTEGRATION_NOTES.md new file mode 100644 index 00000000..ef817f86 --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/PROMPT.md b/dashboards/ux-lab/lovable-design-tokens-playground/PROMPT.md new file mode 100644 index 00000000..d0172950 --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/REPO_SCOPING_RULES.md b/dashboards/ux-lab/lovable-design-tokens-playground/REPO_SCOPING_RULES.md new file mode 100644 index 00000000..3764afa5 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-design-tokens-playground/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/lovable-design-tokens-playground/UX_TOKEN_CONTRACT.md new file mode 100644 index 00000000..5b83a6f7 --- /dev/null +++ b/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` diff --git a/dashboards/ux-lab/lovable-onboarding-flow/.gitignore b/dashboards/ux-lab/lovable-onboarding-flow/.gitignore new file mode 100644 index 00000000..3b966cbf --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/lovable-onboarding-flow/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/lovable-onboarding-flow/ACCEPTANCE_CHECKLIST.md new file mode 100644 index 00000000..c05a2377 --- /dev/null +++ b/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`). diff --git a/dashboards/ux-lab/lovable-onboarding-flow/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/lovable-onboarding-flow/DESIGN_SYSTEM_BRIEF.md new file mode 100644 index 00000000..d1271e9f --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-onboarding-flow/INTEGRATION_NOTES.md b/dashboards/ux-lab/lovable-onboarding-flow/INTEGRATION_NOTES.md new file mode 100644 index 00000000..44a5cfe1 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-onboarding-flow/PROMPT.md b/dashboards/ux-lab/lovable-onboarding-flow/PROMPT.md new file mode 100644 index 00000000..11819af4 --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/lovable-onboarding-flow/REPO_SCOPING_RULES.md b/dashboards/ux-lab/lovable-onboarding-flow/REPO_SCOPING_RULES.md new file mode 100644 index 00000000..3764afa5 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-onboarding-flow/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/lovable-onboarding-flow/UX_TOKEN_CONTRACT.md new file mode 100644 index 00000000..99277798 --- /dev/null +++ b/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` diff --git a/dashboards/ux-lab/lovable-ops-ui-kit/.gitignore b/dashboards/ux-lab/lovable-ops-ui-kit/.gitignore new file mode 100644 index 00000000..3b966cbf --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/lovable-ops-ui-kit/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/lovable-ops-ui-kit/ACCEPTANCE_CHECKLIST.md new file mode 100644 index 00000000..c05a2377 --- /dev/null +++ b/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`). diff --git a/dashboards/ux-lab/lovable-ops-ui-kit/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/lovable-ops-ui-kit/DESIGN_SYSTEM_BRIEF.md new file mode 100644 index 00000000..5cd71501 --- /dev/null +++ b/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/**`. diff --git a/dashboards/ux-lab/lovable-ops-ui-kit/INTEGRATION_NOTES.md b/dashboards/ux-lab/lovable-ops-ui-kit/INTEGRATION_NOTES.md new file mode 100644 index 00000000..96a15a68 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-ops-ui-kit/PROMPT.md b/dashboards/ux-lab/lovable-ops-ui-kit/PROMPT.md new file mode 100644 index 00000000..3e8b1452 --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/lovable-ops-ui-kit/REPO_SCOPING_RULES.md b/dashboards/ux-lab/lovable-ops-ui-kit/REPO_SCOPING_RULES.md new file mode 100644 index 00000000..3764afa5 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-ops-ui-kit/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/lovable-ops-ui-kit/UX_TOKEN_CONTRACT.md new file mode 100644 index 00000000..99277798 --- /dev/null +++ b/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`