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