diff --git a/dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md b/dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md
new file mode 100644
index 00000000..9c324b2e
--- /dev/null
+++ b/dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md
@@ -0,0 +1,178 @@
+# tracker-web × ByteLyst UX Integration Roadmap
+
+> **Purpose:** Adopt the latest shared `@bytelyst/*` UX (proven in the `learning_ai_uxui_web`
+> showcase) into `tracker-web`, replacing bespoke/raw UI with shared primitives, charts, command
+> palette, toasts, and motion — while keeping the existing OKLCH token system and dark mode.
+> **Delegation target:** Devin CLI (`devin --prompt-file docs/roadmaps/UX_INTEGRATION_BYTELYST.md`).
+>
+> **Repo:** `learning_ai_common_plat/dashboards/tracker-web` (`@bytelyst/tracker-web`)
+> **Run dir:** this package · **Stack:** Next.js 16 · React 19 · TS 5 · Tailwind 4 · Vitest · Playwright
+> **Showcase reference (read-only, do not edit):** `../../../copilot/learning_ai_uxui_web` — live demos
+> of every package at `http://localhost:3010/showcase/*` and source in `src/catalog/examples/`.
+
+---
+
+## Current-state review (verified 2026-05-28)
+
+| Surface                 | Today                                                                                                      | Gap vs latest UX                                                     |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| Token system            | shadcn-style OKLCH vars (`--background`, `--primary`, `--card`, `--chart-1..5`) + `.dark` in `globals.css` | `@bytelyst/ui` components expect `--bl-*` tokens → **need a bridge** |
+| `/dashboard/items`      | ✅ already on `@bytelyst/data-table`                                                                       | good reference pattern                                               |
+| `/dashboard` overview   | badge-pill stats; `--chart-1..5` defined but **unused**                                                    | swap to `charts`/`data-viz` (Donut, KpiCard, Sparkline)              |
+| `/dashboard/*` controls | raw `<input>/<select>/<button>`, hand-rolled modals (no focus-trap/Esc/scroll-lock)                        | `@bytelyst/ui` `Input`/`Button`/`Modal`/`Field` (a11y built-in)      |
+| `/dashboard` layout     | hand-rolled sticky top nav                                                                                 | `@bytelyst/ui` `AppShell`                                            |
+| `/roadmap` (public)     | hardcoded `slate-*`/`blue-*` — different visual language                                                   | re-skin to tokens + primitives                                       |
+| Feedback                | inline error/success `<div>`s                                                                              | `@bytelyst/ui` `Toast`                                               |
+| Command/nav             | none                                                                                                       | `@bytelyst/command-palette` (⌘K)                                     |
+| Motion                  | none                                                                                                       | `@bytelyst/motion` (reduced-motion aware)                            |
+
+**Available shared components (verified exports):**
+
+- `@bytelyst/ui`: `Button` `Input` `Field*` `Modal` `ConfirmDialog` `Badge` `StatusBadge`/`StatusDot`
+  `EmptyState` `Skeleton`/`TableSkeleton` `MetricCard` `EntityCard` `Toast`/`ToastProvider`/`useToast`
+  `AppShell*` `Drawer` `ActionMenu` `FilterBar` `PageHeader` `IconButton` `AlertBanner`
+- `@bytelyst/charts`: `LineChart` `BarChart` `AreaChart` `Donut` `Gauge`
+- `@bytelyst/data-viz`: `Sparkline` `BarSparkline` `KpiCard` `ProgressRing` `Heatmap`
+- `@bytelyst/command-palette`: `CommandPalette` `CommandRegistryProvider` `useCommandPalette`
+- `@bytelyst/motion`: `Reveal` `Stagger` `NumberFlow` … (see showcase `/showcase/motion/all`)
+
+> Aligns with master `docs/ROADMAP.md` Phase 2.1 (UI primitives migration) — this roadmap is the
+> concrete, delegate-ready execution plan and extends it with charts/palette/toast/motion.
+
+---
+
+## Ground rules (non-negotiable)
+
+1. **Scope lock:** edit only files under `dashboards/tracker-web/`. Never edit shared
+   `packages/@bytelyst/*`, the showcase repo, other dashboards/services, or master `docs/ROADMAP.md`.
+2. **Deps:** add shared packages as `"workspace:*"` in this package's `package.json` (they live in
+   the same monorepo — no publish needed). Run `pnpm install` from the repo root after edits.
+3. **Preserve the token system + dark mode.** Do NOT rip out the shadcn OKLCH vars. Bridge `--bl-*`
+   onto them (UX-1) so shared components inherit tracker's theme automatically.
+4. **Tests sacred; no fabrication.** Add tests for new behavior; only check a box after its
+   **Verify** passes. If blocked (e.g. needs live backend), leave `- [ ]` + a one-line note.
+5. **Style preservation:** match existing conventions. No `console.log`. No hardcoded hex/color
+   literals in new code — use tokens / component props. No emojis in code.
+6. **Commits:** one task = one conventional commit (`feat(tracker-web): …` / `refactor(tracker-web): …`),
+   flip the checkbox + paste short-SHA in the same commit. **Do not push** — operator reviews.
+7. **Offline-first verification.** Pages needing auth/live data can't be fully E2E'd here; rely on
+   `typecheck` + `lint` + Vitest render tests + `build`. Mark backend-only checks as deferred.
+
+## Verify commands (from `dashboards/tracker-web`)
+
+```bash
+pnpm typecheck && pnpm lint && pnpm test
+pnpm build      # final gate
+```
+
+---
+
+## UX-1 — Foundation: token bridge + Primitives adapter ⟵ do first, everything depends on it
+
+- [x] **1.1** Add `@bytelyst/ui` and `@bytelyst/design-tokens` as `workspace:*` deps; `pnpm install`. (dc01dd02)
+- [x] **1.2** In `src/app/globals.css`, add a **bridge layer** mapping `--bl-*` → existing tracker
+      vars so shared components theme correctly in light + dark. Minimum set (extend as needed):
+      `css
+    :root, .dark {
+      --bl-accent: var(--primary);
+      --bl-accent-foreground: var(--primary-foreground);
+      --bl-bg-canvas: var(--background);
+      --bl-surface-card: var(--card);
+      --bl-text-primary: var(--foreground);
+      --bl-text-secondary: var(--muted-foreground);
+      --bl-text-tertiary: var(--muted-foreground);
+      --bl-border: var(--border);
+      --bl-danger: var(--destructive);
+      --bl-radius-control: var(--radius-md);
+      --bl-radius-card: var(--radius-lg);
+      /* map chart palette: --bl-chart-1 → --chart-1 … */
+    }
+    `
+      Reference the showcase's `globals.css` fallback layer for the full `--bl-*` surface. (dc01dd02)
+- [x] **1.3** Create `src/components/ui/Primitives.tsx` re-exporting the `@bytelyst/ui` components
+      this app needs (`Button` `Input` `Field*` `Modal` `ConfirmDialog` `Badge` `StatusBadge`
+      `EmptyState` `Skeleton`/`TableSkeleton` `MetricCard` `Toast`/`ToastProvider`/`useToast`).
+      All app code imports from this adapter, never `@bytelyst/ui` directly (enables the Phase 1.3
+      UI-drift ratchet later). (dc01dd02)
+- [x] **1.4** Smoke test: a Vitest render test asserting `Button` renders and a `StatusBadge`
+      gets a token-driven class. **Verify:** `pnpm typecheck && pnpm lint && pnpm test && pnpm build`. (dc01dd02)
+
+## UX-2 — Migrate dashboard controls to primitives
+
+- [ ] **2.1** `src/app/dashboard/items/page.tsx`: replace raw search `<input>`, the 3 filter
+      `<select>`s, the "+ New Item" `<button>`, and the **create modal** with `Input`/`Field`/
+      `Button`/`Modal`. The shared `Modal` fixes the current focus-trap/Esc/scroll-lock a11y gap.
+      Keep `DataTable` as-is; swap the inline type/status/priority cell pills to `StatusBadge`.
+- [ ] **2.2** `src/app/dashboard/page.tsx`: wrap the `confirm()` delete in `ConfirmDialog`; replace
+      the bespoke `StatCard` chrome with `MetricCard` where it fits (full chart swap is UX-4).
+- [ ] **2.3** `src/app/dashboard/board/page.tsx` + `src/app/dashboard/items/[id]/page.tsx`:
+      migrate buttons/inputs/badges/modals to primitives; comments + status/priority controls.
+- [ ] **2.4** `src/app/login/page.tsx`: migrate form to `Field`/`Input`/`Button` + `AlertBanner`.
+      **Verify per task:** `pnpm typecheck && pnpm lint && pnpm build`.
+
+## UX-3 — Re-skin the public roadmap to the token system
+
+- [ ] **3.1** `src/app/roadmap/page.tsx`: replace hardcoded `slate-*`/`blue-*` utility classes with
+      tokenized equivalents (`bg-card`, `text-foreground`, `text-muted-foreground`, `bg-primary`…)
+      and swap the type/priority/status pills to `Badge`/`StatusBadge`. Keep all behavior + the
+      board/list toggle. Vote buttons keep the a11y attrs added previously.
+- [ ] **3.2** Replace the submit + email-prompt modals with the shared `Modal`.
+      **Verify:** `pnpm typecheck && pnpm lint && pnpm build`; existing roadmap tests stay green.
+
+## UX-4 — Data-viz for the overview (use the unused `--chart-*` tokens)
+
+- [ ] **4.1** Add `@bytelyst/charts` + `@bytelyst/data-viz` as `workspace:*` deps.
+- [ ] **4.2** `src/app/dashboard/page.tsx`: replace badge-pill breakdowns with a `Donut` for
+      **By Status** and **By Type**, a `BarChart`/`BarSparkline` for **By Priority**, and `KpiCard`s
+      for `total` + open/in-progress/done with trend where data allows.
+- [ ] **4.3** Add a Vitest test rendering the overview with mocked `getStats` (no NaN in SVG paths).
+      **Verify:** `pnpm typecheck && pnpm lint && pnpm test && pnpm build`.
+
+## UX-5 — Command palette (⌘K)
+
+- [ ] **5.1** Add `@bytelyst/command-palette` dep; mount `CommandRegistryProvider` + `CommandPalette`
+      in `src/app/providers.tsx` (or dashboard layout), opened with ⌘K / Ctrl-K.
+- [ ] **5.2** Register commands: navigate (Overview / Items / Board / Roadmap), **New item**,
+      **Switch product** (wire `ProductSwitcher`), **Toggle theme**, **Sign out**.
+- [ ] **5.3** Vitest test: palette opens on ⌘K and lists registered commands.
+      **Verify:** `pnpm typecheck && pnpm lint && pnpm test && pnpm build`.
+
+## UX-6 — Toasts replace inline status divs
+
+- [ ] **6.1** Mount `ToastProvider`; replace inline error/success `<div>`s across items/overview/
+      board/detail/roadmap with `toast()` calls (create, delete, vote, submit, load-error).
+      **Verify:** `pnpm typecheck && pnpm lint && pnpm build`.
+
+## UX-7 — Motion polish (reduced-motion aware)
+
+- [ ] **7.1** Add `@bytelyst/motion`; apply `Reveal`/`Stagger` to dashboard cards, items rows, and
+      roadmap columns; `NumberFlow` on the overview totals. Must no-op under `prefers-reduced-motion`.
+      **Verify:** `pnpm typecheck && pnpm lint && pnpm build`.
+
+## UX-8 — AppShell (stretch)
+
+- [ ] **8.1** Replace the hand-rolled top nav in `src/app/dashboard/layout.tsx` with `@bytelyst/ui`
+      `AppShell` (`AppShellSidebar`/`AppShellNav`/`AppShellPageHeader`/`AppShellSkipLink` + mobile
+      toggle), keeping `ProductSwitcher`, user email, sign-out, and adding the ⌘K trigger + theme
+      toggle. **Verify:** `pnpm typecheck && pnpm lint && pnpm build`; keyboard nav + skip-link work.
+
+## Cross-cutting (run continuously)
+
+- [ ] **CC.1** Full suite green after every wave: `pnpm typecheck && pnpm lint && pnpm test && pnpm build`.
+- [ ] **CC.2** Dark mode parity — every migrated surface looks correct in `.dark`.
+- [ ] **CC.3** Zero new hardcoded color literals (grep `slate-|blue-600|#[0-9a-f]{6}` in changed files).
+- [ ] **CC.4** a11y — if `@axe-core/playwright` runs offline, assert no new violations on `/roadmap`
+      and `/login`; otherwise Vitest render assertions for roles/labels.
+- [ ] **CC.5** Update master `docs/ROADMAP.md` Phase 2.1 checkboxes **only if** the operator asks —
+      default: leave it, this doc is the source of truth for the integration.
+
+## Progress
+
+```
+UX-1 ✅  UX-2 ⬜  UX-3 ⬜  UX-4 ⬜  UX-5 ⬜  UX-6 ⬜  UX-7 ⬜  UX-8 ⬜
+```
+
+**Start with UX-1** (token bridge + adapter) — without the `--bl-*` bridge, every shared component
+renders unstyled. Read `src/app/globals.css`, the showcase `globals.css` fallback layer, and
+`src/app/dashboard/items/page.tsx` (the working `data-table` adoption) before editing. Then execute
+one task at a time with verify + commit after each.