` Landmark to All Layouts **Action:** Every app's main content area should be wrapped in `

`. Check each layout file: ```bash for repo in learning_ai_clock learning_ai_fastgap learning_ai_jarvis_jr learning_ai_trails learning_ai_flowmonk learning_ai_notes learning_ai_local_memory_gpt; do count=$(grep -rn '/dev/null | wc -l) echo "$repo: $count

refs" done ``` For any app with 0 refs, find the layout that wraps `{children}` and add `

`: ```tsx // Before:

{children}

// After:

{children}

``` **Verify:** Re-run the grep. All apps must have >= 1 `

` tag. **Commit:** `feat(design-system): add semantic

landmark to all web app layouts` --- # Phase 5: Polish > **Goal:** Elevate from functional to delightful — dark/light theme, responsive, visual regression, CI. > **Depends on:** Phases 1-4 > **Estimated effort:** 3-5 days --- ## Task 5.1: Add Dark/Light Theme Toggle to All Web Apps **What:** Only 3 of 7 apps have a theme toggle. All define dark tokens; most also have light tokens in the generated CSS. **Action:** Create a shared hook or copy the pattern from LocalMemGPT's `use-theme.ts` into each app. **Pattern** (create at `/web/src/lib/use-theme.ts`): ```typescript 'use client'; import { useState, useEffect, useCallback } from 'react'; type Theme = 'dark' | 'light' | 'system'; export function useTheme() { const [theme, setThemeState] = useState('system'); useEffect(() => { const saved = localStorage.getItem('theme') as Theme | null; if (saved) setThemeState(saved); }, []); const setTheme = useCallback((t: Theme) => { setThemeState(t); localStorage.setItem('theme', t); const resolved = t === 'system' ? window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark' : t; document.documentElement.setAttribute('data-theme', resolved); }, []); useEffect(() => { const resolved = theme === 'system' ? window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark' : theme; document.documentElement.setAttribute('data-theme', resolved); }, [theme]); return { theme, setTheme }; } ``` Add a toggle button in each app's settings or sidebar. **Verify:** ```bash for repo in learning_ai_clock learning_ai_fastgap learning_ai_jarvis_jr learning_ai_trails learning_ai_flowmonk learning_ai_notes learning_ai_local_memory_gpt; do if [ -f "$WORKSPACE/$repo/web/src/lib/use-theme.ts" ]; then echo "PASS: $repo"; else echo "FAIL: $repo"; fi done ``` **Commit:** `feat(design-system): add dark/light theme toggle to all product web apps` --- ## Task 5.2: Add Token Drift CI Check **What:** No CI job verifies that `bytelyst.tokens.json` changes result in regenerated output files. **Action:** Add a CI step to the common-plat CI workflow. **File:** `$WORKSPACE/learning_ai_common_plat/.gitea/workflows/ci.yml` (or `.github/workflows/`) Add this job: ```yaml token-drift: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: pnpm/action-setup@v4 - uses: actions/setup-node@v4 with: node-version: 22 cache: pnpm - run: pnpm install --frozen-lockfile - name: Regenerate tokens run: npx tsx packages/design-tokens/scripts/generate.ts - name: Check for drift run: | if git diff --exit-code packages/design-tokens/generated/; then echo "PASS: No token drift detected" else echo "FAIL: Token drift detected — run 'npx tsx packages/design-tokens/scripts/generate.ts' and commit" git diff packages/design-tokens/generated/ exit 1 fi ``` **Verify:** ```bash grep -c 'token-drift' $WORKSPACE/learning_ai_common_plat/.gitea/workflows/ci.yml # Must be >= 1 ``` **Commit:** `feat(ci): add token drift detection to CI pipeline` --- ## Task 5.3: Add Visual Regression Testing **What:** Zero apps have visual regression tests. **Action:** For each product web app with Playwright, add screenshot tests for key pages. In each app's E2E directory, add a spec: ```typescript // e2e/visual-regression.spec.ts import { test, expect } from '@playwright/test'; test.describe('visual regression', () => { test('dashboard matches snapshot', async ({ page }) => { await page.goto('/dashboard'); await page.waitForLoadState('networkidle'); await expect(page).toHaveScreenshot('dashboard.png', { maxDiffPixelRatio: 0.01 }); }); test('settings matches snapshot', async ({ page }) => { await page.goto('/settings'); await page.waitForLoadState('networkidle'); await expect(page).toHaveScreenshot('settings.png', { maxDiffPixelRatio: 0.01 }); }); }); ``` Adjust routes based on each app's actual pages (check `src/app/` for route names). **First run** will create baseline screenshots. Subsequent runs will compare against them. **Verify:** ```bash for repo in learning_ai_clock learning_ai_fastgap learning_ai_jarvis_jr learning_ai_trails learning_ai_flowmonk learning_ai_notes learning_ai_local_memory_gpt; do if [ -f "$WORKSPACE/$repo/web/e2e/visual-regression.spec.ts" ]; then echo "PASS: $repo"; else echo "FAIL: $repo"; fi done ``` **Commit:** `feat(design-system): add visual regression Playwright specs to all product web apps` --- ## Task 5.4: Add Design Review PR Template **What:** No repo requires screenshots for UI changes. **Action:** Create a PR template in every product repo: **File:** `/.github/pull_request_template.md` ```markdown ## Summary ## Screenshots | Before | After | | ------------------- | ------------------- | | | | ## Checklist - [ ] Design tokens used (no hardcoded hex) - [ ] Focus-visible works (keyboard nav) - [ ] ARIA labels on icon-only buttons - [ ] Empty state handled for list views - [ ] Confirmation dialog on destructive actions - [ ] Loading state on async operations - [ ] Dark/light theme tested ``` **Repos:** All 7 product repos + common-plat. **Verify:** ```bash for repo in learning_ai_clock learning_ai_fastgap learning_ai_jarvis_jr learning_ai_trails learning_ai_flowmonk learning_ai_notes learning_ai_local_memory_gpt learning_ai_common_plat; do if [ -f "$WORKSPACE/$repo/.github/pull_request_template.md" ]; then echo "PASS: $repo"; else echo "FAIL: $repo"; fi done ``` **Commit:** `feat(design-system): add design review PR template to all repos` --- # Final Verification Run this comprehensive check after all 5 phases are complete: ```bash WORKSPACE="$HOME/code/mygh" PASS=0; FAIL=0 echo "=== PHASE 1: Token Foundation ===" # All product palettes exist node -e "const t=require('$WORKSPACE/learning_ai_common_plat/packages/design-tokens/tokens/bytelyst.tokens.json'); const p=['actiontrail','notelett','localmemgpt','localllmlab']; const ok=p.every(x=>t.color[x]); console.log(ok?'PASS':'FAIL',': palettes'); process.exit(ok?0:1)" && ((PASS++)) || ((FAIL++)) # Per-product CSS files exist for p in chronomind jarvisjr nomgap actiontrail flowmonk notelett localmemgpt; do [ -f "$WORKSPACE/learning_ai_common_plat/packages/design-tokens/generated/${p}.css" ] && ((PASS++)) || { echo "FAIL: ${p}.css"; ((FAIL++)); } done # No --ml- leaks grep -rq '\-\-ml-' "$WORKSPACE/learning_ai_fastgap/web/src/app/globals.css" && { echo "FAIL: NomGap --ml- leak"; ((FAIL++)); } || ((PASS++)) grep -rq '\-\-ml-' "$WORKSPACE/learning_ai_notes/web/src/app/globals.css" && { echo "FAIL: NoteLett --ml- leak"; ((FAIL++)); } || ((PASS++)) echo "" echo "=== PHASE 2: Component Library ===" [ -f "$WORKSPACE/learning_ai_common_plat/packages/ui/src/components/Button.tsx" ] && ((PASS++)) || ((FAIL++)) [ -f "$WORKSPACE/learning_ai_common_plat/packages/ui/src/components/Toast.tsx" ] && ((PASS++)) || ((FAIL++)) [ -f "$WORKSPACE/learning_ai_common_plat/packages/ui/src/components/Modal.tsx" ] && ((PASS++)) || ((FAIL++)) [ -f "$WORKSPACE/learning_ai_common_plat/packages/ui/src/components/ConfirmDialog.tsx" ] && ((PASS++)) || ((FAIL++)) [ -f "$WORKSPACE/learning_ai_common_plat/packages/ui/src/components/Badge.tsx" ] && ((PASS++)) || ((FAIL++)) [ -f "$WORKSPACE/learning_ai_common_plat/packages/ui/src/components/EmptyState.tsx" ] && ((PASS++)) || ((FAIL++)) echo "" echo "=== PHASE 3: UX Quality Bar ===" for repo in learning_ai_fastgap learning_ai_jarvis_jr learning_ai_trails learning_ai_flowmonk learning_ai_notes learning_ai_local_memory_gpt; do [ -f "$WORKSPACE/$repo/web/src/app/not-found.tsx" ] && ((PASS++)) || { echo "FAIL: $repo not-found.tsx"; ((FAIL++)); } [ -f "$WORKSPACE/$repo/web/src/app/error.tsx" ] && ((PASS++)) || { echo "FAIL: $repo error.tsx"; ((FAIL++)); } [ -f "$WORKSPACE/$repo/web/src/app/loading.tsx" ] && ((PASS++)) || { echo "FAIL: $repo loading.tsx"; ((FAIL++)); } done echo "" echo "=== PHASE 4: Accessibility ===" for repo in learning_ai_clock learning_ai_fastgap learning_ai_jarvis_jr learning_ai_trails learning_ai_flowmonk learning_ai_notes learning_ai_local_memory_gpt; do grep -rq 'AxeBuilder\|axe-core' "$WORKSPACE/$repo/web/e2e/" 2>/dev/null && ((PASS++)) || { echo "FAIL: $repo axe-core"; ((FAIL++)); } grep -rq '/dev/null && ((PASS++)) || { echo "FAIL: $repo

"; ((FAIL++)); } done echo "" echo "=== PHASE 5: Polish ===" for repo in learning_ai_clock learning_ai_fastgap learning_ai_jarvis_jr learning_ai_trails learning_ai_flowmonk learning_ai_notes learning_ai_local_memory_gpt; do [ -f "$WORKSPACE/$repo/web/src/lib/use-theme.ts" ] && ((PASS++)) || { echo "FAIL: $repo use-theme"; ((FAIL++)); } [ -f "$WORKSPACE/$repo/web/e2e/visual-regression.spec.ts" ] && ((PASS++)) || { echo "FAIL: $repo visual-regression"; ((FAIL++)); } [ -f "$WORKSPACE/$repo/.github/pull_request_template.md" ] && ((PASS++)) || { echo "FAIL: $repo PR template"; ((FAIL++)); } done grep -q 'token-drift' "$WORKSPACE/learning_ai_common_plat/.gitea/workflows/ci.yml" && ((PASS++)) || { echo "FAIL: token drift CI"; ((FAIL++)); } echo "" echo "========================================" echo "RESULTS: $PASS PASS / $FAIL FAIL" echo "========================================" [ $FAIL -eq 0 ] && echo "ALL CHECKS PASSED" || echo "SOME CHECKS FAILED" ``` **Target:** 0 FAIL on all checks. --- _Generated by Windsurf Cascade — agent-executable design system remediation playbook._ _Companion audit: `DESIGN_SYSTEM_AUDIT.md`_

{title}

404

Something went wrong