Skip to content

feat(web): dark Linear-grade landing redesign with a live ultrawork chat-replay demo#103

Merged
code-yeongyu merged 35 commits into
mainfrom
code-yeongyu/light-greeny-redesign-interactive-demo
Jul 3, 2026
Merged

feat(web): dark Linear-grade landing redesign with a live ultrawork chat-replay demo#103
code-yeongyu merged 35 commits into
mainfrom
code-yeongyu/light-greeny-redesign-interactive-demo

Conversation

@code-yeongyu

@code-yeongyu code-yeongyu commented Jul 3, 2026

Copy link
Copy Markdown
Owner

What

Full redesign of lazycodex.ai (packages/web only — no marketplace/CLI files touched):

  • Design system first: token layer (design-system.css) + reusable primitives (components/design-system/: layout, typography, surfaces, actions, brand mark), all documented in packages/web/DESIGN.md. Dark graphite canvas, green-only brand accent, hairline elevated surfaces, editorial dotted column rules.
  • Live ultrawork demo: a faithful Codex-desktop window that replays ONE grounded ulw run as an appending chat transcript — the user's ask opens the session, then tool rows / prose / code chips append beneath it (900ms cadence), walk to the checkpoint, and loop. Fixed dark window, fixed 680px box with inner scroll (zero outer layout shift), zero in-window controls, reduced-motion renders the completed transcript statically. Every visible string traces to the copy ledger — no invented claims.
  • Sections: hero (open canvas, LCP-safe system type), install, command cards, feature workflows + built-in skills band, team mode (window-chrome thread mock), ulw-research, Hephaestus showcase, docs CTA, footer; docs page restyled on the same tokens.
  • Final quality pass (this PR's tip): a 10-agent AI-slop sweep over the whole branch diff (-30 LOC of dead pre-rewrite data/comments), then a design-system consolidation — new MonoTag and CardLabel primitives, polymorphic AccentSurface (as/padding) absorbing hand-rolled repeats, accepted-but-ignored props removed, five zero-consumer legacy tokens + dead .card-gradient-* utilities deleted, and DESIGN.md reconciled with the shipped v10 demo.

Verification

  • e2e: 57/57 (functional, responsive, SEO, copy-ledger, demo contract) — .omo/evidence/v11-full-e2e.txt
  • Lighthouse (real Chrome, desktop + mobile presets): 100/100/100/100.omo/evidence/v11-lighthouse.txt
  • biome lint + tsc --noEmit + new-string copy audit: clean
  • opennextjs-cloudflare build: passes — .omo/evidence/v11-opennext.txt
  • Consolidation verified rendered-DOM-identical (class sets byte-equal, tags unchanged) by an independent reviewer pass; band screenshots eyeballed on the built server.

Note on the source-guidance bot

This PR is repo-local website work (packages/web + evidence), not Codex CLI changes — the "open against oh-my-openagent" guidance doesn't apply, and landing it here was explicitly directed by the repo owner. Merging immediately for that reason.

🤖 Generated with Claude Code


Summary by cubic

Rebuilt the packages/web landing with a dark, tokenized design system and a live Codex‑desktop ultrawork chat‑replay demo to better showcase the product and improve consistency. Adds new sections, consolidates primitives, deletes dead code, and ships with full e2e and Lighthouse 100x4.

  • New Features

    • Dark design system: graphite canvas, green accent, hairline borders; updated OG, manifest, favicon, and docs to match.
    • Live ultrawork demo: fixed 680px window, appending transcript (user ask → tool rows/prose/code), no controls, loops after checkpoint; reduced‑motion renders the full transcript.
    • New sections: Team Mode and ulw‑research (grounded copy), plus restored glass Ultrawork badge showcase; updated hero and information architecture.
    • E2E coverage added for the demo and sections; local build, tsc, and lint clean; Lighthouse desktop/mobile 100/100/100/100.
  • Refactors

    • Design‑system primitives: added MonoTag and CardLabel; AccentSurface now supports as and padding; folded repeated patterns across sections.
    • Tightened component props (removed accepted‑but‑ignored props), deleted unused tokens and old .card-gradient-* utilities, and dropped pre‑rewrite demo scene data.
    • Synced DESIGN.md to the shipped components and Codex window behavior; updated header, footer, install block, and command cards to the new tokens.

Written for commit a8c3d2a. Summary will update on new commits.

Review in cubic

code-yeongyu and others added 30 commits July 2, 2026 20:44
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Two e2e selector-drift touch-ups (plan-sanctioned): the commands anchor
re-scoped to the command-card-unique '$ulw-loop "task"' because the demo
window header now sits above install, and the window-theme locator scoped
to '#ulw-demo .ulw-window' because team-mode reuses the window class. Both
strengthen selectors; no assertion changed. Hero padding tightened
(md:pt 52->40, md:pb 44->24) to keep the demo window above the 900px fold.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Lighthouse mobile a11y caught --accent-primary #15803d at ~4.2:1 on the
tinted pill/chip fills (#e2ede0/#e9ebe3/#e9f0e5) and the ported demo intro
chip using mint as text on light. accent-primary is now #166534 (5.9-7.1:1
on every observed fill) and the chip text uses --accent-glow, honoring the
'mint is never text on light' rule. Contrast script gains the four tinted
pairs so this class of regression fails locally before CI.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
User-directed v2: graphite canvas (#0e1012), near-white inks, hairline
borders, restrained green accent (#4ade80, AA on every observed surface),
dark OG/manifest/favicon/docs. The light Codex window becomes the page's
hero contrast layer; the dark window variant reads as an elevated panel.
Contrast script re-derived to 50 pairs on the new palette.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Grounded in frames extracted from the desktop-app recordings: left
sidebar (nav, pinned session, projects list that doubles as scene
navigation), document-flow transcript (title bar, tool rows, step pill,
pursuing-goal chip, composer), subagents panel. The external scene-tab
strip is removed; playback is a screen-recording feel with a thin
progress bar and in-chrome pause/replay/theme controls. e2e contract
updated same-or-stronger (shift-free jumps, reduced-motion play
affordance, sidebar collapse at 390px).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
User feedback: the white window on the near-black canvas reads as glare.
Dark elevated layer becomes the resting state; light is the opt-in via a
sun toggle (aria-pressed = light). TDD: spec flipped first (RED, 4 toggle
tests failing for the right reason), then the component default (GREEN 7/7).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
User feedback: the flat graphite canvas lost the original identity's
luminous background tone. Canvas deepens to #0a0b0d and PageShell mounts a
static glow-backdrop (four low-alpha radial green washes; aurora peak 0.17)
painted above the html canvas by DOM order — the body's opaque background
was silently covering a negative-z-index layer. Zero CLS, no animation;
contrast constants re-synced (ALL PASS), Lighthouse holds 100x4.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Reviewer-caught contradiction: the comment predated the alpha lift and
still claimed <=0.10 / three washes / a darker-than-card worst case. It
now states the shipped truth: four washes, aurora peak 0.17, worst-case
composite ~#0e2b1b where text-primary measures 14.3:1.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
User-caught inconsistency: scenes rendered as separate Projects sessions,
contradicting a single 30h+ run. The sidebar now shows ONE constant active
session (ulw add authentication, running dot); scene navigation moves to
the step pill's prev/next chevrons; the Pursuing-goal chip carries a
per-scene elapsed time rising from 4m 08s to 1d 6h 47m. TDD: spec contract
rewritten first, RED captured via stash (2 failing right-reason), then
GREEN 7/7. Scene copy untouched; elapsed is an additive field.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The team-mode mock now uses the dark window theme (matching the demo
default) and depicts team creation the way the app works: a session list
pane spawns one chat session per member, beside the leader's thread view.
All grounded copy strings unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Reviewer-caught gap: Previous-step was disabled in the component but the
SSR scene-0 bound was never asserted (the happy path autoplays past it).
The reduced-motion test, pinned to step 1, now proves it. Also renames the
stale test title and retargets screenshot artifacts to v4 paths.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
User direction: the demo must not be playable. Every in-window control is
removed (play/pause, replay, theme toggle, step navigation) along with
their icons and CSS; the window is fixed to its dark theme. The recording
arms on scroll-into-view, autoplays on a faster 4s interval, and loops
forever. The Pursuing-goal elapsed re-dressed to the day-scale register
(3d 2h 14m rising to 4d 2h 41m). TDD: v5 spec (zero-button contract,
loop-back assertion) captured RED against the v4 controls, then GREEN 4/4.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Reviewer-noted pre-existing drift: the chrome docblock still described the
retired sidebar-as-navigation contract. It now states the v5 truth — one
static session, nothing interactive.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
User direction: the recording should read as something naturally in
progress, not a timed carousel. The per-scene progress bar, its keyframes,
and reduced-motion override are removed; scenes now simply unfold. Spec
gains a progress-bar-absent assertion (RED against the bar, then GREEN 4/4).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
User direction: the session should visibly look in-progress. The active
sidebar session and the step pill now carry the app's running-spinner
glyph (pure CSS ring, transform-only rotation; frozen static under
prefers-reduced-motion). Spec asserts the two spinners: RED first, GREEN 4/4.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The landing no longer displays the raster badge (the live demo replaced
it), but /img/badge-ultrawork.* is a public URL that may be hotlinked
externally — deleting it would 404 those references after deploy. The
three files are restored verbatim from history; nothing renders them.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
User direction: no step counter — the recording should read as a run in
motion. The footer pill now shows the spinner plus "Working for <elapsed>"
(verbatim chrome from the desktop app's running line), keyed per scene.
Spec markers rewritten from Step-counts to Working-for lines: RED first,
GREEN 4/4.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
User direction: the brand artifact must stay on the page. The section
returns below Hephaestus, trimmed to the showcase itself (the live demo
owns the tagline/example copy now, so only the gradient title + badge
render). Spec asserts the badge is visible below Hephaestus.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
code-yeongyu and others added 5 commits July 3, 2026 16:22
User direction: the run should visibly accumulate and carry over. A
run-progress track beside "Working for <elapsed>" fills per scene
(scaleX, eased), and scene content now flows up into place (keyed panes,
420ms opacity/translate) so the recording reads as one continuing session
rather than a slide swap. Reduced motion freezes both. Spec asserts the
track: RED first, then GREEN.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
User direction: one opening ask, then the run unfolds beneath it — not
scene slides. The transcript is now a single derived timeline (mode flag,
status, command, prose, tool ledger rows, JSON chips per phase — every
string reused verbatim from the grounded scenes) appended entry by entry;
earlier entries persist and the pane follows via inner scroll only. The
window box is a fixed 680px (560px mobile), so growth causes zero outer
layout shift. At the checkpoint the replay rests, then loops back to the
opening ask. Reduced motion renders the completed transcript statically.
Spec rewritten RED first against the slide model, then GREEN: 4/4 demo
spec, 57/57 full sweep, Lighthouse 100 across categories.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Reviewer-caught leftovers from v9: the dead .ulw-app-tools reserve block,
the unconsumed ULW_DEMO_AUTOPLAY_MS export, the never-emitted "user" entry
kind, per-entry min-height reserves that only made sense when scenes
swapped in place (the fixed window box owns zero-shift now), an empty
reduced-motion media block, and docblocks still narrating scene
navigation. Removal-only plus comment truth-ups; sweep 57/57 and
Lighthouse 100x4 re-verified.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Ten parallel deep-agent passes over the 37-file branch diff, behavior
locked by the green 57/57 e2e + Lighthouse baseline. Cuts: the pre-v10
ULW_DEMO_STEPS/PROOFS data and UlwStep type (zero consumers since the
chat-replay rewrite), a v9 roster icon, two stale scene-era comments, a
single-argument cx() wrap, and one WHAT-restating JSX comment. Every
other candidate was verified load-bearing and kept, with reasons in
.omo/evidence/v11-slop-report.md.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
DESIGN.md's own rule — a pattern that appears twice belongs in
components/design-system — applied across the landing. New MonoTag chip
absorbs the lane and skills grids; new CardLabel (default/accent tones)
absorbs the three hand-rolled mono card headings; AccentSurface gains
polymorphic as + padding so the demo's example chip and the five
Hephaestus loop tiles reuse it instead of restating its classes. Rendered
class sets stay byte-equal and tags unchanged, so visual output is
identical (57/57 sweep + Lighthouse 100x4 re-verified, bands eyeballed
on the built server).

Alongside: props that were accepted but ignored or never passed are
gone (CommandCodeSurface/IconWell className, SkipLink children/href,
LinkAction prefetch); dead .card-gradient-* utilities and five
zero-consumer legacy tokens removed; DESIGN.md reconciled — the
CodexWindow and motion sections now describe the v10 appending chat
replay instead of the retired slide model, and the palette/hero rows
match the shipped CSS.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant