M5 (Fable half): launch surface + first-visit polish#12
Merged
Conversation
- README rebuilt to SPEC §7's launch shape: hook -> hero gif -> demo link + the honest 0.106 ms / 157x number -> 'Why this exists' -> substance; m2-drill.png + m3-flame.png now tracked and embedded. - Unfurl cards: og:/twitter: meta + og.png (1200x630) + comet favicon.svg; a shared demo link now renders a real card on X/Slack. - Init errors surface on-screen: onError threaded through createRiver/ createFlame (adapter-null was a silent blank canvas; shared copy in capabilities.ts NO_ADAPTER_MSG). - Live mode with no gateway: honest 'no gateway connected' notice after 4s (ui/LiveNotice.tsx; self-dismisses on connect, one-click switch to replay). - River legend hints the M2 pick: 'click a comet -> its span'. - Humane replay-fetch error copy; minimal mobile pass (<=720px compact panels, flame owns the top on phones, <=480px canvas-first). - record.mjs gif recipe fixed to the shipped one (16fps/760px/128c/8s) so app:record reproduces the hero; hero re-recorded on the 4070 (6.17 MB). Verified: build green; pick-check 21/21; cost-check 50/50; pick-e2e 8/8; 4-state screenshot iteration (2 defects caught + fixed). PROOF §8c.
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.
Ships the Fable half of M5 — the launch surface. Everything a first-time visitor (or an unfurl
bot) touches, screenshot-iterated on the real GPU. With this, M5's build work is done; only the
launch itself (X/HN) remains.
README — rebuilt to SPEC §7's launch shape
Hook → hero gif → demo link + the honest number (0.106 ms GPU/frame, 157× headroom) →
"Why this exists" (flat 2D dashboards; money and PII deserve to be seen) → substance.
The drill-down and 3D flame views finally have images (
m2-drill.png,m3-flame.pngun-ignored;the drill shot is fresh from this branch's pick-e2e run).
Demo first-visit polish
og:/twitter:meta +og.png(1200×630) + a cometfavicon.svg. A shareddemo link now renders a real card on X/Slack instead of a bare URL.
onErrorthreaded throughcreateRiver/createFlame;adapter-null and init throws render the full-screen error state with actionable copy.
notice appears after 4s: what Fathom is listening for, how to feed it, one-click switch to the
real capture. Self-dismisses if a local server connects (no hard block).
click a comet → its span(the M2 drill-down wasundiscoverable).
≤480px canvas-first. No layout rearchitecture.
Reproducibility fix
app/record.mjsstill had the fat gif recipe — the shipped 6.7 MB hero was hand-tightened.The recipe (16fps · 760px · 128 colors · 8s) now ships in the recorder; hero re-recorded with the
polished UI on the 4070 (6.17 MB),
og.pngregenerated from the new still.Verification (PROOF §8c)
build green · pick-check 21/21 · cost-check 50/50 · pick-e2e 8/8 · 4-state screenshot
iteration on the RTX 4070 (desktop river / live notice / mobile river / mobile flame) — 2 defects
caught and fixed (mid-word code wrapping; flame-over-HUD overlap on phones).
Docs synced: README / CLAUDE / ARCHITECTURE / SPEC / PROOF.