feat(web): dark Linear-grade landing redesign with a live ultrawork chat-replay demo#103
Merged
code-yeongyu merged 35 commits intoJul 3, 2026
Merged
Conversation
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>
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Full redesign of lazycodex.ai (
packages/webonly — no marketplace/CLI files touched):design-system.css) + reusable primitives (components/design-system/: layout, typography, surfaces, actions, brand mark), all documented inpackages/web/DESIGN.md. Dark graphite canvas, green-only brand accent, hairline elevated surfaces, editorial dotted column rules.MonoTagandCardLabelprimitives, polymorphicAccentSurface(as/padding) absorbing hand-rolled repeats, accepted-but-ignored props removed, five zero-consumer legacy tokens + dead.card-gradient-*utilities deleted, andDESIGN.mdreconciled with the shipped v10 demo.Verification
.omo/evidence/v11-full-e2e.txt.omo/evidence/v11-lighthouse.txtbiome lint+tsc --noEmit+ new-string copy audit: cleanopennextjs-cloudflare build: passes —.omo/evidence/v11-opennext.txtNote 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/weblanding 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
tsc, and lint clean; Lighthouse desktop/mobile 100/100/100/100.Refactors
MonoTagandCardLabel;AccentSurfacenow supportsasandpadding; folded repeated patterns across sections..card-gradient-*utilities, and dropped pre‑rewrite demo scene data.DESIGN.mdto 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.