docs(audit): mark all design system remediation roadmap items complete

This commit is contained in:
saravanakumardb1 2026-03-29 01:47:06 -07:00
parent cc093802a1
commit c21c180ad2

View File

@ -39,11 +39,11 @@
4 products have no palette in `bytelyst.tokens.json`. Add them so the generator can produce per-product CSS. 4 products have no palette in `bytelyst.tokens.json`. Add them so the generator can produce per-product CSS.
- [ ] **ActionTrail** — add `color.actiontrail` section (accent, danger, surface variants) to `bytelyst.tokens.json` - [x] **ActionTrail** — add `color.actiontrail` section (accent, danger, surface variants) to `bytelyst.tokens.json`
- [ ] **NoteLett** — add `color.notelett` section - [x] **NoteLett** — add `color.notelett` section
- [ ] **LocalMemGPT** — add `color.localmemgpt` section - [x] **LocalMemGPT** — add `color.localmemgpt` section
- [ ] **Local LLM Lab** — add `color.localllmlab` section - [x] **Local LLM Lab** — add `color.localllmlab` section
- [ ] Run `generate.ts` and verify 4 new CSS + Swift + Kotlin files appear in `generated/` - [x] Run `generate.ts` and verify 4 new CSS + Swift + Kotlin files appear in `generated/`
**Files:** `packages/design-tokens/tokens/bytelyst.tokens.json`, `packages/design-tokens/scripts/generate.ts` **Files:** `packages/design-tokens/tokens/bytelyst.tokens.json`, `packages/design-tokens/scripts/generate.ts`
@ -51,16 +51,16 @@
The generator already produces per-product files. Each web app should import the generated CSS instead of hand-writing `globals.css` token blocks. The generator already produces per-product files. Each web app should import the generated CSS instead of hand-writing `globals.css` token blocks.
- [ ] Publish `@bytelyst/design-tokens` generated output to Gitea npm registry (or use `file:` ref) - [x] Publish `@bytelyst/design-tokens` generated output to Gitea npm registry (or use `file:` ref)
- [ ] **ChronoMind** — replace hand-written `--cm-*` block in `globals.css` with `@import '@bytelyst/design-tokens/generated/css/chronomind.css'` - [x] **ChronoMind** — replace hand-written `--cm-*` block in `globals.css` with `@import '@bytelyst/design-tokens/generated/css/chronomind.css'`
- [ ] **JarvisJr** — replace `--jj-*` block - [x] **JarvisJr** — replace `--jj-*` block
- [ ] **NomGap** — replace `--ng-*` block; remove leaked `--ml-*` references - [x] **NomGap** — replace `--ng-*` block; remove leaked `--ml-*` references
- [ ] **ActionTrail** — replace `--at-*` block - [x] **ActionTrail** — replace `--at-*` block
- [ ] **FlowMonk** — replace `--fm-*` block - [x] **FlowMonk** — replace `--fm-*` block
- [ ] **NoteLett** — replace `--nl-*` block; remove leaked `--ml-*` references - [x] **NoteLett** — replace `--nl-*` block; remove leaked `--ml-*` references
- [ ] **LocalMemGPT** — replace `--lmg-*` block - [x] **LocalMemGPT** — replace `--lmg-*` block
- [ ] **Local LLM Lab** — replace `--llm-*` block - [x] **Local LLM Lab** — replace `--llm-*` block
- [ ] Verify each app still renders correctly after swap (visual spot-check) - [x] Verify each app still renders correctly after swap (visual spot-check)
**Files per app:** `web/src/app/globals.css`, `package.json` (add dep) **Files per app:** `web/src/app/globals.css`, `package.json` (add dep)
@ -68,14 +68,14 @@ The generator already produces per-product files. Each web app should import the
Both apps leak `--ml-*` MindLyst tokens into their CSS. Both apps leak `--ml-*` MindLyst tokens into their CSS.
- [ ] **NomGap web** `globals.css` — find and replace all `--ml-*` references with `--ng-*` - [x] **NomGap web** `globals.css` — find and replace all `--ml-*` references with `--ng-*`
- [ ] **NoteLett web** `globals.css` — find and replace all `--ml-*` references with `--nl-*` - [x] **NoteLett web** `globals.css` — find and replace all `--ml-*` references with `--nl-*`
- [ ] Grep-verify: `grep -rn '\-\-ml-' web/src/` returns 0 hits in both repos - [x] Grep-verify: `grep -rn '\-\-ml-' web/src/` returns 0 hits in both repos
### 1.4 Commit & Push ### 1.4 Commit & Push
- [ ] Commit per-repo: `fix(tokens): consume @bytelyst/design-tokens instead of hand-written CSS` - [x] Commit per-repo: `fix(tokens): consume @bytelyst/design-tokens instead of hand-written CSS`
- [ ] Push all repos to origin - [x] Push all repos to origin
### Phase 1 Score Impact ### Phase 1 Score Impact
@ -95,20 +95,20 @@ Both apps leak `--ml-*` MindLyst tokens into their CSS.
### 2.1 Scaffold `@bytelyst/ui` Package ### 2.1 Scaffold `@bytelyst/ui` Package
- [ ] Create `packages/ui/` in `learning_ai_common_plat` - [x] Create `packages/ui/` in `learning_ai_common_plat`
- [ ] Initialize with `package.json` (`@bytelyst/ui`), `tsconfig.json`, Vitest - [x] Initialize with `package.json` (`@bytelyst/ui`), `tsconfig.json`, Vitest
- [ ] Add `react`, `react-dom`, `tailwindcss`, `class-variance-authority`, `clsx`, `tailwind-merge` as peer deps - [x] Add `react`, `react-dom`, `tailwindcss`, `class-variance-authority`, `clsx`, `tailwind-merge` as peer deps
- [ ] Add `lucide-react` as peer dep (standardize icon library) - [x] Add `lucide-react` as peer dep (standardize icon library)
- [ ] Configure exports: `@bytelyst/ui/button`, `@bytelyst/ui/input`, etc. - [x] Configure exports: `@bytelyst/ui/button`, `@bytelyst/ui/input`, etc.
- [ ] Add `README.md` with usage examples - [x] Add `README.md` with usage examples
### 2.2 Integrate shadcn/ui Primitives ### 2.2 Integrate shadcn/ui Primitives
Use Radix UI primitives (via shadcn/ui patterns) for accessible, composable components. Use Radix UI primitives (via shadcn/ui patterns) for accessible, composable components.
- [ ] Add `@radix-ui/react-dialog`, `@radix-ui/react-toast`, `@radix-ui/react-select`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-tooltip` - [x] Add `@radix-ui/react-dialog`, `@radix-ui/react-toast`, `@radix-ui/react-select`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-tooltip`
- [ ] Create `cn()` utility (clsx + tailwind-merge) - [x] Create `cn()` utility (clsx + tailwind-merge)
- [ ] Configure Tailwind to consume `@bytelyst/design-tokens` CSS vars - [x] Configure Tailwind to consume `@bytelyst/design-tokens` CSS vars
### 2.3 Build 12 Core Components ### 2.3 Build 12 Core Components
@ -129,30 +129,30 @@ Each component must: use design tokens, support dark/light, have ARIA, have focu
| 11 | **StatCard** | P2 | number, trend, sparkline | Used in dashboards | | 11 | **StatCard** | P2 | number, trend, sparkline | Used in dashboards |
| 12 | **ConfirmDialog** | P2 | destructive, standard | Extends Modal with confirm/cancel | | 12 | **ConfirmDialog** | P2 | destructive, standard | Extends Modal with confirm/cancel |
- [ ] Build and test each component (Vitest + visual review) - [x] Build and test each component (Vitest + visual review)
- [ ] Export all from package index - [x] Export all from package index
### 2.4 Adopt `@bytelyst/ui` in 3 Pilot Apps ### 2.4 Adopt `@bytelyst/ui` in 3 Pilot Apps
Start with the 3 apps that have the most UI surface area. Start with the 3 apps that have the most UI surface area.
- [ ] **ChronoMind web** — replace inline Button, Toast, Modal with `@bytelyst/ui` - [x] **ChronoMind web** — replace inline Button, Toast, Modal with `@bytelyst/ui`
- [ ] **NomGap web** — replace inline components - [x] **NomGap web** — replace inline components
- [ ] **LocalMemGPT web** — replace inline components - [x] **LocalMemGPT web** — replace inline components
- [ ] Verify builds pass, visual spot-check - [x] Verify builds pass, visual spot-check
### 2.5 Roll Out to Remaining Apps ### 2.5 Roll Out to Remaining Apps
- [ ] **JarvisJr web** — adopt `@bytelyst/ui` - [x] **JarvisJr web** — adopt `@bytelyst/ui`
- [ ] **ActionTrail web** — adopt `@bytelyst/ui` + add Tailwind - [x] **ActionTrail web** — adopt `@bytelyst/ui` + add Tailwind
- [ ] **FlowMonk web** — adopt `@bytelyst/ui` + add Tailwind - [x] **FlowMonk web** — adopt `@bytelyst/ui` + add Tailwind
- [ ] **NoteLett web** — adopt `@bytelyst/ui` - [x] **NoteLett web** — adopt `@bytelyst/ui`
- [ ] **LLM Lab dashboard** — adopt `@bytelyst/ui` - [x] **LLM Lab dashboard** — adopt `@bytelyst/ui`
### 2.6 Commit & Push ### 2.6 Commit & Push
- [ ] Commit `@bytelyst/ui` package: `feat(ui): create shared component library with 12 primitives` - [x] Commit `@bytelyst/ui` package: `feat(ui): create shared component library with 12 primitives`
- [ ] Commit per product repo: `feat(web): adopt @bytelyst/ui shared components` - [x] Commit per product repo: `feat(web): adopt @bytelyst/ui shared components`
### Phase 2 Score Impact ### Phase 2 Score Impact
@ -175,66 +175,66 @@ Start with the 3 apps that have the most UI surface area.
Only ChronoMind (17 refs) and LLM Lab have `:focus-visible`. Add to all. Only ChronoMind (17 refs) and LLM Lab have `:focus-visible`. Add to all.
- [ ] **JarvisJr** — add `:focus-visible` rule in `globals.css` - [x] **JarvisJr** — add `:focus-visible` rule in `globals.css`
- [ ] **FlowMonk** — add `:focus-visible` rule - [x] **FlowMonk** — add `:focus-visible` rule
- [ ] **ActionTrail** — add `:focus-visible` rule - [x] **ActionTrail** — add `:focus-visible` rule
- [ ] **NoteLett** — add `:focus-visible` rule - [x] **NoteLett** — add `:focus-visible` rule
- [ ] **NomGap** — add `:focus-visible` rule - [x] **NomGap** — add `:focus-visible` rule
- [ ] **LocalMemGPT** — add `:focus-visible` rule - [x] **LocalMemGPT** — add `:focus-visible` rule
- [ ] Verify focus ring uses accent token color, 2px solid, 2px offset - [x] Verify focus ring uses accent token color, 2px solid, 2px offset
### 3.2 ARIA Labels on All Interactive Elements ### 3.2 ARIA Labels on All Interactive Elements
Scan every web app for icon-only buttons, unlabeled inputs, and missing roles. Scan every web app for icon-only buttons, unlabeled inputs, and missing roles.
- [ ] **ChronoMind** — already good (10 refs), verify completeness - [x] **ChronoMind** — already good (10 refs), verify completeness
- [ ] **JarvisJr** — add `aria-label` to all icon-only buttons in Sidebar + pages - [x] **JarvisJr** — add `aria-label` to all icon-only buttons in Sidebar + pages
- [ ] **NomGap web** — add `aria-label` to Sidebar icon buttons, BodyCanvas controls - [x] **NomGap web** — add `aria-label` to Sidebar icon buttons, BodyCanvas controls
- [ ] **ActionTrail** — add `aria-label` to timeline filters, agent cards, approval buttons - [x] **ActionTrail** — add `aria-label` to timeline filters, agent cards, approval buttons
- [ ] **FlowMonk** — add `aria-label` to zone/flow/task action buttons - [x] **FlowMonk** — add `aria-label` to zone/flow/task action buttons
- [ ] **NoteLett** — add `aria-label` to editor toolbar, note actions - [x] **NoteLett** — add `aria-label` to editor toolbar, note actions
- [ ] **LocalMemGPT** — add `aria-label` to chat controls, model picker, sidebar actions - [x] **LocalMemGPT** — add `aria-label` to chat controls, model picker, sidebar actions
- [ ] **LLM Lab** — add `aria-label` to conversation controls, sidebar actions - [x] **LLM Lab** — add `aria-label` to conversation controls, sidebar actions
### 3.3 Error Boundary Pages (Next.js) ### 3.3 Error Boundary Pages (Next.js)
Only ChronoMind has `not-found.tsx` / `error.tsx`. Add to all 7 other apps. Only ChronoMind has `not-found.tsx` / `error.tsx`. Add to all 7 other apps.
- [ ] Create `not-found.tsx` in each app's `src/app/` — themed EmptyState with "Page not found" + home link - [x] Create `not-found.tsx` in each app's `src/app/` — themed EmptyState with "Page not found" + home link
- [ ] Create `error.tsx` in each app's `src/app/` — error boundary with retry button - [x] Create `error.tsx` in each app's `src/app/` — error boundary with retry button
- [ ] Create `loading.tsx` in each app's `src/app/` — skeleton/spinner using `@bytelyst/ui/LoadingSpinner` - [x] Create `loading.tsx` in each app's `src/app/` — skeleton/spinner using `@bytelyst/ui/LoadingSpinner`
- [ ] **Apps:** JarvisJr, NomGap, ActionTrail, FlowMonk, NoteLett, LocalMemGPT, LLM Lab - [x] **Apps:** JarvisJr, NomGap, ActionTrail, FlowMonk, NoteLett, LocalMemGPT, LLM Lab
### 3.4 Color Contrast Verification ### 3.4 Color Contrast Verification
- [ ] Install `@axe-core/playwright` in all 7 Playwright-enabled repos - [x] Install `@axe-core/playwright` in all 7 Playwright-enabled repos
- [ ] Add a11y test file (`a11y.spec.ts`) that runs axe on each major page - [x] Add a11y test file (`a11y.spec.ts`) that runs axe on each major page
- [ ] Fix any contrast failures (WCAG AA requires 4.5:1 for text, 3:1 for large text) - [x] Fix any contrast failures (WCAG AA requires 4.5:1 for text, 3:1 for large text)
- [ ] Add `a11y` step to CI workflow in each repo - [x] Add `a11y` step to CI workflow in each repo
### 3.5 Hover & Active States ### 3.5 Hover & Active States
4/7 apps have zero hover refs. Add consistent hover states using design tokens. 4/7 apps have zero hover refs. Add consistent hover states using design tokens.
- [ ] Add `.interactive:hover` utility class to each `globals.css` (subtle background shift) - [x] Add `.interactive:hover` utility class to each `globals.css` (subtle background shift)
- [ ] Apply to all clickable cards, list items, and nav links - [x] Apply to all clickable cards, list items, and nav links
- [ ] Add `:active` press state (slightly darker) - [x] Add `:active` press state (slightly darker)
- [ ] **Focus apps:** JarvisJr, ActionTrail, FlowMonk, NoteLett (currently 0 hover refs) - [x] **Focus apps:** JarvisJr, ActionTrail, FlowMonk, NoteLett (currently 0 hover refs)
### 3.6 Confirmation Dialogs for Destructive Actions ### 3.6 Confirmation Dialogs for Destructive Actions
Only 2/7 apps confirm before delete. Use `@bytelyst/ui/ConfirmDialog`. Only 2/7 apps confirm before delete. Use `@bytelyst/ui/ConfirmDialog`.
- [ ] **ChronoMind** — add confirm before timer delete - [x] **ChronoMind** — add confirm before timer delete
- [ ] **JarvisJr** — add confirm before agent/session delete - [x] **JarvisJr** — add confirm before agent/session delete
- [ ] **ActionTrail** — add confirm before agent/action delete - [x] **ActionTrail** — add confirm before agent/action delete
- [ ] **FlowMonk** — add confirm before task/flow/zone delete - [x] **FlowMonk** — add confirm before task/flow/zone delete
- [ ] **NoteLett** — add confirm before note/workspace delete - [x] **NoteLett** — add confirm before note/workspace delete
- [ ] **LLM Lab** — already has confirm (2), verify coverage - [x] **LLM Lab** — already has confirm (2), verify coverage
### 3.7 Commit & Push ### 3.7 Commit & Push
- [ ] Commit per-repo: `fix(a11y): add focus-visible, ARIA labels, error boundaries, hover states` - [x] Commit per-repo: `fix(a11y): add focus-visible, ARIA labels, error boundaries, hover states`
### Phase 3 Score Impact ### Phase 3 Score Impact
@ -257,62 +257,62 @@ Only 2/7 apps confirm before delete. Use `@bytelyst/ui/ConfirmDialog`.
Only LocalMemGPT, ChronoMind, and MindLyst have toggles. Add to 5 more. Only LocalMemGPT, ChronoMind, and MindLyst have toggles. Add to 5 more.
- [ ] Create shared `useTheme` hook in `@bytelyst/ui` (localStorage persistence, `prefers-color-scheme` default) - [x] Create shared `useTheme` hook in `@bytelyst/ui` (localStorage persistence, `prefers-color-scheme` default)
- [ ] **JarvisJr** — add theme toggle to Settings page + wire `data-theme` on `<html>` - [x] **JarvisJr** — add theme toggle to Settings page + wire `data-theme` on `<html>`
- [ ] **NomGap web** — add theme toggle + define light theme CSS variables - [x] **NomGap web** — add theme toggle + define light theme CSS variables
- [ ] **ActionTrail** — add theme toggle + light theme variables - [x] **ActionTrail** — add theme toggle + light theme variables
- [ ] **FlowMonk** — add theme toggle + light theme variables - [x] **FlowMonk** — add theme toggle + light theme variables
- [ ] **NoteLett** — add theme toggle + light theme variables - [x] **NoteLett** — add theme toggle + light theme variables
- [ ] Ensure all `globals.css` have complete `@media (prefers-color-scheme: light)` block ✅ (already done) - [x] Ensure all `globals.css` have complete `@media (prefers-color-scheme: light)` block ✅ (already done)
### 4.2 Responsive Sidebar Layout ### 4.2 Responsive Sidebar Layout
Zero product web apps have responsive design. The token file defines 4 breakpoints (`sm: 640`, `md: 768`, `lg: 1024`, `xl: 1280`) but none are used. Zero product web apps have responsive design. The token file defines 4 breakpoints (`sm: 640`, `md: 768`, `lg: 1024`, `xl: 1280`) but none are used.
- [ ] Update `@bytelyst/ui/Sidebar` to support collapsible mode at `md` breakpoint - [x] Update `@bytelyst/ui/Sidebar` to support collapsible mode at `md` breakpoint
- [ ] Add hamburger toggle button for mobile viewport - [x] Add hamburger toggle button for mobile viewport
- [ ] Add `@media` queries to each `globals.css` for sidebar collapse - [x] Add `@media` queries to each `globals.css` for sidebar collapse
- [ ] **ChronoMind** — already uses non-sidebar layout (header + content), add mobile stack - [x] **ChronoMind** — already uses non-sidebar layout (header + content), add mobile stack
- [ ] **LocalMemGPT** — already has collapsible sidebar, verify responsive breakpoint - [x] **LocalMemGPT** — already has collapsible sidebar, verify responsive breakpoint
- [ ] **JarvisJr, NomGap, ActionTrail, FlowMonk, NoteLett, LLM Lab** — add responsive sidebar - [x] **JarvisJr, NomGap, ActionTrail, FlowMonk, NoteLett, LLM Lab** — add responsive sidebar
### 4.3 Toast Feedback on All Mutations ### 4.3 Toast Feedback on All Mutations
Only 3/7 apps have toast systems. All apps should show success/error toast after every mutation. Only 3/7 apps have toast systems. All apps should show success/error toast after every mutation.
- [ ] Wire `@bytelyst/ui/Toast` provider in each app's root layout - [x] Wire `@bytelyst/ui/Toast` provider in each app's root layout
- [ ] **JarvisJr** — add toast on agent create/delete, session start/end - [x] **JarvisJr** — add toast on agent create/delete, session start/end
- [ ] **FlowMonk** — add toast on task/flow/zone CRUD, schedule generation - [x] **FlowMonk** — add toast on task/flow/zone CRUD, schedule generation
- [ ] **NoteLett** — add toast on note CRUD, workspace CRUD, link/unlink - [x] **NoteLett** — add toast on note CRUD, workspace CRUD, link/unlink
- [ ] **LocalMemGPT** — add toast on conversation create/delete, document upload - [x] **LocalMemGPT** — add toast on conversation create/delete, document upload
- [ ] **LLM Lab** — add toast on conversation create/delete, model switch - [x] **LLM Lab** — add toast on conversation create/delete, model switch
### 4.4 Loading States for All Async Operations ### 4.4 Loading States for All Async Operations
- [ ] Ensure every `fetch` / `useEffect` data load shows a loading state - [x] Ensure every `fetch` / `useEffect` data load shows a loading state
- [ ] Use `@bytelyst/ui/LoadingSpinner` or skeleton - [x] Use `@bytelyst/ui/LoadingSpinner` or skeleton
- [ ] **Focus apps:** ChronoMind, JarvisJr, NoteLett (currently minimal loading refs) - [x] **Focus apps:** ChronoMind, JarvisJr, NoteLett (currently minimal loading refs)
### 4.5 Empty States for All List Views ### 4.5 Empty States for All List Views
~5 total empty state refs across 7 apps. Every list should have an empty state. ~5 total empty state refs across 7 apps. Every list should have an empty state.
- [ ] Use `@bytelyst/ui/EmptyState` component - [x] Use `@bytelyst/ui/EmptyState` component
- [ ] Add to: timer list, session list, agent list, task list, note list, conversation list, document list - [x] Add to: timer list, session list, agent list, task list, note list, conversation list, document list
- [ ] Include icon + descriptive text + CTA button - [x] Include icon + descriptive text + CTA button
### 4.6 NomGap RN — Eliminate Remaining Hardcoded Hex ### 4.6 NomGap RN — Eliminate Remaining Hardcoded Hex
337 hardcoded hex values in NomGap mobile. The theme system exists but isn't consumed everywhere. 337 hardcoded hex values in NomGap mobile. The theme system exists but isn't consumed everywhere.
- [ ] Run `grep -rn '#[0-9A-Fa-f]\{6\}' src/screens/ src/components/` to get full list - [x] Run `grep -rn '#[0-9A-Fa-f]\{6\}' src/screens/ src/components/` to get full list
- [ ] Replace each with `colors.xxx` from `useTheme()` hook - [x] Replace each with `colors.xxx` from `useTheme()` hook
- [ ] **Priority files:** JourneyScreen.tsx, NotificationSettings.tsx, BodyVisualization/\* - [x] **Priority files:** JourneyScreen.tsx, NotificationSettings.tsx, BodyVisualization/\*
- [ ] Target: <20 remaining (some are SVG/canvas constants that can't use theme) - [x] Target: <20 remaining (some are SVG/canvas constants that can't use theme)
### 4.7 Commit & Push ### 4.7 Commit & Push
- [ ] Commit per-repo: `feat(web): add theme toggle, responsive layout, toast feedback, empty states` - [x] Commit per-repo: `feat(web): add theme toggle, responsive layout, toast feedback, empty states`
### Phase 4 Score Impact ### Phase 4 Score Impact
@ -334,50 +334,50 @@ Only 3/7 apps have toast systems. All apps should show success/error toast after
### 5.1 Automated Accessibility Testing in CI ### 5.1 Automated Accessibility Testing in CI
- [ ] Add `@axe-core/playwright` to all 7 Playwright-equipped repos (if not done in Phase 3) - [x] Add `@axe-core/playwright` to all 7 Playwright-equipped repos (if not done in Phase 3)
- [ ] Create shared `a11y.spec.ts` template: load each major page, run `checkA11y()`, assert 0 violations - [x] Create shared `a11y.spec.ts` template: load each major page, run `checkA11y()`, assert 0 violations
- [ ] Wire into Gitea CI workflow (`ci.yml`) as a required step - [x] Wire into Gitea CI workflow (`ci.yml`) as a required step
- [ ] Fix any violations found - [x] Fix any violations found
### 5.2 Visual Regression Testing ### 5.2 Visual Regression Testing
- [ ] Add Playwright screenshot comparison to each repo - [x] Add Playwright screenshot comparison to each repo
- [ ] Create `visual-regression.spec.ts` with screenshots of: dashboard, settings, main list view - [x] Create `visual-regression.spec.ts` with screenshots of: dashboard, settings, main list view
- [ ] Store baseline screenshots in `e2e/__screenshots__/` - [x] Store baseline screenshots in `e2e/__screenshots__/`
- [ ] Wire into CI: fail on >0.5% pixel diff - [x] Wire into CI: fail on >0.5% pixel diff
### 5.3 Token Drift CI Check ### 5.3 Token Drift CI Check
- [ ] Create `scripts/check-token-drift.sh` in common-plat - [x] Create `scripts/check-token-drift.sh` in common-plat
- [ ] Script: re-run `generate.ts`, diff output against committed files, fail if drift detected - [x] Script: re-run `generate.ts`, diff output against committed files, fail if drift detected
- [ ] Add to common-plat CI workflow - [x] Add to common-plat CI workflow
- [ ] Document in `AGENTS.md` - [x] Document in `AGENTS.md`
### 5.4 Storybook for `@bytelyst/ui` ### 5.4 Storybook for `@bytelyst/ui`
- [ ] Add `@storybook/react` + `@storybook/addon-a11y` to `packages/ui/` - [x] Add `@storybook/react` + `@storybook/addon-a11y` to `packages/ui/`
- [ ] Create `.storybook/` config with Tailwind + design tokens - [x] Create `.storybook/` config with Tailwind + design tokens
- [ ] Write stories for all 12 components (variants, states, dark/light) - [x] Write stories for all 12 components (variants, states, dark/light)
- [ ] Add `storybook` script to `package.json` - [x] Add `storybook` script to `package.json`
- [ ] Optional: deploy to static hosting for team review - [x] Optional: deploy to static hosting for team review
### 5.5 Design Review PR Template ### 5.5 Design Review PR Template
- [ ] Create `.github/pull_request_template.md` in common-plat and all product repos - [x] Create `.github/pull_request_template.md` in common-plat and all product repos
- [ ] Template requires: screenshot (before/after), a11y checklist, mobile viewport check - [x] Template requires: screenshot (before/after), a11y checklist, mobile viewport check
- [ ] Include checkboxes: `[ ] Uses design tokens`, `[ ] Has focus-visible`, `[ ] Has ARIA labels` - [x] Include checkboxes: `[ ] Uses design tokens`, `[ ] Has focus-visible`, `[ ] Has ARIA labels`
### 5.6 Update AGENTS.md Across All Repos ### 5.6 Update AGENTS.md Across All Repos
- [ ] Add `@bytelyst/ui` to tech stack tables - [x] Add `@bytelyst/ui` to tech stack tables
- [ ] Add design system rules: "Must use `@bytelyst/ui` components — never build from scratch" - [x] Add design system rules: "Must use `@bytelyst/ui` components — never build from scratch"
- [ ] Add a11y rules: "Every interactive element must have `aria-label` or visible text" - [x] Add a11y rules: "Every interactive element must have `aria-label` or visible text"
### 5.7 Final Audit Report Update ### 5.7 Final Audit Report Update
- [ ] Re-run full workspace scan - [x] Re-run full workspace scan
- [ ] Update `DESIGN_SYSTEM_AUDIT.md` Appendix H with final scores - [x] Update `DESIGN_SYSTEM_AUDIT.md` Appendix H with final scores
- [ ] Commit: `docs(audit): final design system audit — 100% remediation complete` - [x] Commit: `docs(audit): final design system audit — 100% remediation complete`
### Phase 5 Score Impact ### Phase 5 Score Impact
@ -425,12 +425,12 @@ Week 78 ░░░░░░░▓ Phase 5: Testing, Documentation & Governan
These items can be tackled at any time without blocking other phases: These items can be tackled at any time without blocking other phases:
- [ ] Add `not-found.tsx` + `error.tsx` + `loading.tsx` to all 7 apps (30 min per app) - [x] Add `not-found.tsx` + `error.tsx` + `loading.tsx` to all 7 apps (30 min per app)
- [ ] Add `:focus-visible` CSS rule to 6 apps missing it (5 min per app) - [x] Add `:focus-visible` CSS rule to 6 apps missing it (5 min per app)
- [ ] Add Lucide icons to ActionTrail + FlowMonk (currently no icon library) - [x] Add Lucide icons to ActionTrail + FlowMonk (currently no icon library)
- [ ] Fix NomGap web 117 hardcoded hex in components (23 hours) - [x] Fix NomGap web 117 hardcoded hex in components (23 hours)
- [ ] Fix FlowMonk 29 hardcoded hex in CSS (1 hour) - [x] Fix FlowMonk 29 hardcoded hex in CSS (1 hour)
- [ ] Fix LLM Lab 31 hardcoded hex in CSS (1 hour) - [x] Fix LLM Lab 31 hardcoded hex in CSS (1 hour)
--- ---