feat(web): light sage redesign with interactive Codex-window ultrawork demo

[code-yeongyu]

Summary

Redesigns lazycodex.ai (packages/web) from the dark emerald identity to a fixed light sage/greeny productivity-tool identity, and mounts a source-grounded interactive Codex-window ultrawork demo directly under a compact hero. The demo recreates the real Codex desktop surface (transcript, 13-agent subagents rail, environment card, composer) across 8 scenes — research fan-out → plan → todos → TDD red/green → QA retry → checkpoint — with a new Light/Dark window-theme toggle (light default, faithful to the app; dark for canvas contrast). Team-mode and ulw-research sections join the page; the raster ultrawork badge is retired in favor of the live-DOM demo.

Design direction: ampcode-style light canvas with dotted column rules and dark code chips, factory-style product-window presence, sisyphus-tone declarative hero — used as structural/tonal study only; every visible string is original LazyCodex content traced to repo sources in a copy ledger.

Changes

Design system (app/styles/design-system.css, components/design-system/*, DESIGN.md)

• Token flip to the light sage palette (~40 values, all token names preserved); color-scheme: light; light card-gradient washes; system-serif display option; .rule-grid-dotted utility; two 13-token --codex-window-* blocks (light default + [data-window-theme="dark"] override) with per-theme --lane-* subagent glyph colors.
• Accent green deepened #15803d → #166534 after Lighthouse caught 4.2:1 on tinted chip fills — now 5.9–7.1:1 everywhere observed; a 40-pair WCAG contrast script guards regressions.
• Primitives restyled: white cards with hairline borders, dark code chips (#101613) as the deliberate contrast anchors, dotted rule-grid prop, light-legible gradient title.

Interactive demo (components/site/ulw-demo/*, app/styles/ulw-demo.css, lib/ulw-demo-scenes.ts)

• Ported byte-identical scene data (8 scenes, 13 named subagents) and window panes from the reviewed prior branch; every scene string maps to OMO source lines via the source ledger.
• New window-theme toggle: role="group" "Demo window theme" with aria-pressed Light/Dark buttons driving data-window-theme; keyboard operable.
• Light-canvas retune: soft shadow, fixed min-heights (zero layout shift during autoplay), single-column stacking ≤768px; reduced-motion disables autoplay (first-line guard preserved).

Landing IA (app/page.tsx, sections)

• New order: hero → demo → install → command cards → workflows/skills → team mode → ulw-research → Hephaestus (single dark showcase band) → docs CTA → footer. Hero is open-canvas and compact; demo window top edge sits above the 900px fold at 1440.
• Deleted: ultrawork-section.tsx, brand-image.tsx, public/img/badge-ultrawork.* (verified orphans; route 404s).

Contracts (e2e/*, meta)

• Ported ulw-demo.spec.ts (base byte-identical, +4-test toggle suite) and landing-sections.spec.ts (IA order updated; one anchor strengthened to the command-card-unique $ulw-loop "task"; window locator scoped to #ulw-demo .ulw-window since team-mode reuses the window class). Landed RED first, turned GREEN by the composition commit.
• Viewport meta/manifest/OG/favicon re-themed light; SEO strings, JSON-LD, apple-icon.png, and all frozen specs byte-untouched.

QA & Evidence

All artifacts live under the worktree's .omo/evidence/ (uncommitted, sanitized).

• Full e2e: 60 passed (f2-e2e.txt) — all frozen contracts (SEO, responsive 360–1920, a11y landmarks, docs no-JS SSR, github-stars) plus both new IA specs. RED→GREEN proven: task-5-red.txt (10 failed, all missing-#ulw-demo selector reasons) → task-13-green.txt (10 passed).
• Lighthouse: 100/100/100/100 on mobile AND desktop (f2-lighthouse.txt), after an honest RED (mobile a11y 96, four contrast hits) fixed at token level.
• Browser QA (final-qa/): full-page 1440+390 of / and /docs; autoplay 01→02 observed live; tab-jump; play/pause aria-pressed flip; theme toggle via click and keyboard Enter (screenshots of both themes); reduced-motion holds scene 01 after 9s; arrow keys move scene tabs; hover only on actionable elements.
• Copy grounding: ledger with 12 sections/53 rows; live-server grounding check (16 strings, pass); a 39-candidate new-string audit requiring grounding AND ledger coverage, with a negative run (empty ledger → 39 MISSING, exit 1) proving the checker has teeth.
• OpenNext build: passes (f2-opennext.txt).
• Independent audits: plan-compliance APPROVE, scope-fidelity APPROVE (14 commits map 1:1 to plan tasks), final reviewer APPROVE/CLEAR with gates re-run from scratch.

Risks & Residuals

• Accent token deviation: --accent-primary shipped as #166534 (plan said #15803d) — required by the binding Lighthouse-100 a11y gate; documented in the fix commit and DESIGN.md.
• Cubic + auto-merge gates: SKIPPED — this repository's pr-source-guidance.yml auto-closes every PR by policy, so bot review/auto-merge cannot run. All CI-equivalent gates were run locally with artifacts (this PR's opened event triggers one web-ci run).
• Landing on main (which deploys production via web-deploy.yml) is intentionally left to the repository owner as a direct push/merge decision.

🤖 Generated with Claude Code

---

Summary by cubic

Switches the site to a light sage design and adds a source‑grounded, interactive Codex‑window ultrawork demo under the hero. Reorders the landing IA, adds Team Mode and ULW Research sections, and improves accessibility and test coverage.

• New Features

  • Light sage design system: token flip, white cards with hairline borders, dark code chips, dotted rule grid; light meta/manifest/OG/favicon.
  • Interactive ultrawork demo: live Codex window with 8 scenes and 13 lanes, Light/Dark window toggle, keyboardable, reduced‑motion support, fixed min‑heights for zero layout shift.
  • Landing IA: hero → demo → install → commands → workflows → team mode → ulw‑research → Hephaestus → docs → footer; retired raster ultrawork badge.

• Bug Fixes

  • Accessibility: deepened --accent-primary to #166534, fixed tinted chip contrast; added contrast‑pair guard; Lighthouse 100s on mobile and desktop.
  • Tests: added e2e specs for the demo and new IA; strengthened selectors; verified reduced‑motion disables autoplay and no 390px overflow.

^{Written for commit 6793424. Summary will update on new commits.}

[github-actions]

Thanks for the PR! Changes to LazyCodex land through oh-my-openagent — could you open this against omo-codex over there instead? PRs in this repository can't be merged.

If you're working with a coding agent, prompt it like this:

I opened #100 ("feat(web): light sage redesign with interactive Codex-window ultrawork demo") against code-yeongyu/lazycodex, but changes there land through code-yeongyu/oh-my-openagent, where the Codex implementation lives under packages/omo-codex. Read my original PR, then open an equivalent PR against code-yeongyu/oh-my-openagent. In the new PR body, link the original PR (#100), explain that it was first opened against lazycodex, and describe in detail what that PR changed and why.