refactor(web): extract design system stylesheet

Merged
CO
4mo ago
+620-437

Summary

  • Refreshes packages/web/DESIGN.md into the implementation contract for the current rendered web UI.
  • Extracts the existing global stylesheet into packages/web/app/styles/design-system.css and keeps app/globals.css as a filesystem alias to that entry.
  • Records frontend-design state and QA evidence for the design-system extraction.

This replaces the closed LazyCodex-side PR: https://github.com/code-yeongyu/lazycodex/pull/70. The correct landing repo for this work is code-yeongyu/oh-my-openagent.

Fidelity / QA

Visual control comparison used a fresh origin/dev worktree on port 3109 and this branch on port 3108:

  • / desktop/mobile: 0 diff after normalizing dynamic build-time hero stats for screenshot comparison.
  • /docs mobile: 0 diff; pre-existing horizontal overflow delta remains 538 and did not worsen.
  • /manifesto desktop/mobile: 0 diff.
  • /docs desktop: 34,654 raw AE pixels on a 1280x151508 full-page capture, with no overflow/console/page errors; crops show no structural layout change, only tiny full-page raster variance.

Manual behavior QA:

  • BASE_URL=http://127.0.0.1:3108 bun .omo/ultrawork/design-system-fidelity/scripts/behavior-scenarios.mjs -> 7 passed, 0 failed.

Automated gates:

  • bun run format:check -> pass.
  • bun run lint -> pass.
  • bun run type-check -> pass.
  • bun run build -> pass.
  • bun --bun playwright test --config=playwright.3110.config.ts -> 66 passed.

Note: default bun run test:e2e initially reused 127.0.0.1:3000, which was already occupied by an unrelated local Node server (Sionic AI / STORM Console). The verified Playwright run used a temporary in-package config on port 3110.

Lighthouse against production server on 3108:

  • /: performance 0.95, accessibility 1.00, best practices 1.00, SEO 0.92.
  • /docs: performance 0.88, accessibility 0.96, best practices 1.00, SEO 0.91.
  • /manifesto: performance 0.94, accessibility 0.96, best practices 1.00, SEO 0.92.

Evidence summary: .omo/evidence/20260624-design-system-fidelity/summary.md.

Summary by cubic

Extracted the web design system into a single stylesheet to centralize tokens, base styles, and docs prose while keeping the UI pixel-identical. No copy, layout, or behavior changes.

  • Refactors

    • Moved global CSS to packages/web/app/styles/design-system.css; packages/web/app/globals.css now aliases it.
    • Updated packages/web/DESIGN.md to be the implementation contract for the current UI.
    • Added design state and QA evidence under .omo/.

  • Verification

    • Pixel parity on /, /docs, and /manifesto for desktop and mobile; known /docs mobile overflow (538) unchanged.
    • Format, lint, type-check, build, and 66 Playwright tests passed.
    • Lighthouse scores consistent; no new console or page errors.