fix(web): restore the ultrawork chat replay on mobile — the right rail was starving it to 0px#104
Closed
code-yeongyu wants to merge 37 commits into
Closed
fix(web): restore the ultrawork chat replay on mobile — the right rail was starving it to 0px#104code-yeongyu wants to merge 37 commits into
code-yeongyu wants to merge 37 commits into
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>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
At <=768px the window grid collapsed the transcript row to 0px: the fixed 560px box got two implicit auto rows (main + the 696px right rail), the rail won all the space, and phones saw only Environment/ Subagents with the footer's spinner and progress bar ghosting over it — the replay, the landing's product anchor, never appeared. The rail now hides at <=768px (in ulw-demo-panel.css, which imports after ulw-demo-app.css, so the override actually wins the cascade) and the transcript owns the fixed box, matching the already-hidden session sidebar. The mobile spec now pins visibility, not attachment: the ask bubble must be VISIBLE and the transcript must occupy >250px — RED against the broken layout, GREEN after. Full sweep 57/57, Lighthouse 100x4, and dual visual-QA passes on fresh 375/390/768 captures. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
|
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:
|
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
1 participant
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 broke
On every phone (≤768px), the landing's product anchor — the Codex-window chat replay — was invisible. The fixed 560px window rendered ONLY the Environment/Subagents right rail, with the footer's spinner and run-progress bar ghosting over it.
Why
The mobile media query set the window frame to a single grid column but left the rows implicit. The 696px-tall right rail and the transcript main pane became two auto rows inside a 558px box: the rail took everything, the transcript row computed to 0px, and its children painted transparently over the rail (
grid-template-rows: 0px 696.25pxin the computed layout).Fix
.ulw-sideat ≤768px — placed inulw-demo-panel.css(which imports afterulw-demo-app.css, so the override wins the cascade) alongside the rail's own rules, mirroring the already-hidden session sidebar. With one grid child left, the auto row stretches and the transcript owns the fixed box.DESIGN.mdlayout-stability contract updated to document the rail behavior.Verification
.omo/evidence/v12-mobile-red.txt→v12-mobile-green.txt(4/4)v12-full-e2e.txt), Lighthouse 100×4 (v12-lighthouse.txt).omo/evidence/v12-mobile/, plus a full per-section mobile audit (hero, install, commands, workflows, team, research, Hephaestus, badge, CTA, footer, docs) — two independent visual-QA reviewers returned PASS with zero blocking findings.Repo-local
packages/webwork, owner-directed — merging immediately (same source-guidance-bot situation as #103).🤖 Generated with Claude Code
Summary by cubic
Fixes the mobile Codex-window demo where the chat replay was invisible on phones because the right rail consumed the fixed-height window. The rail now hides on ≤768px so the transcript fills the window; tests now assert visibility and size.
.ulw-sideat ≤768px inulw-demo-panel.css(imports afterulw-demo-app.css, override wins).DESIGN.mdto document rail behavior on mobile.Written for commit 86cb85c. Summary will update on new commits.