EOS landing page: The Bill + Comparison Matrix (first slice)#143
EOS landing page: The Bill + Comparison Matrix (first slice)#143mikepsinn wants to merge 15 commits into
Conversation
First vertical slice of the EOS landing page v2 (optimitron:dev: eos-landing-page-v2). Built at a NEW route /eos-preview so the existing /eos retro page is untouched; cutover is a later decision. Ships: - A shared two-register design system (eos-preview.css) scoped under .eos-preview: Register 1 "The Bill" (dark, clinical, hot accent numbers) and Register 2 the 1950s retro-futurist catalog (pastels on dark). Reusable tokens + primitives so later sections reuse them. - Section 1 (The Bill): verbatim charge-sheet copy, the live ticking death counter (reuses the shared useDeathTick hook + Page Visibility API), the large centered Political Dysfunction Tax number, and the register pivot. - Section 3 (The Comparison Matrix): the Your Government vs Earth Optimization Services table, responsive (3-col desktop, stacked cards on mobile). - Clearly-marked TODO stubs for every out-of-scope section (Store, Products, agencies grid, GDP chart, day timeline, reviews, CTA, footer). Every numeric value renders live from the parameter pipeline (@optimitron/data/parameters via ParameterValue). Zero hardcoded parameter numbers. Verbatim canonical lines preserved. No em-dashes in page copy. Verified: tsc (tsconfig.next.json) 0 errors; next build passes with /eos-preview in the route table; desktop 1440px + mobile 390px screenshots captured and inspected locally. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 59 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (18)
📝 WalkthroughWalkthroughAdds a noindex ChangesEOS preview landing page
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant EosPreviewRoute
participant EosLandingPreviewPage
participant BillDeathCounter
participant ComparisonMatrix
Browser->>EosPreviewRoute: Request /eos-preview
EosPreviewRoute->>EosLandingPreviewPage: Render preview page
EosLandingPreviewPage->>BillDeathCounter: Render bill counter
EosLandingPreviewPage->>ComparisonMatrix: Render comparison section
BillDeathCounter->>Browser: Display live or static count
ComparisonMatrix->>Browser: Display responsive comparison rows
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a0e496c428
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
PR review packetStart here
Review checklist
Changed files considered
Updated automatically when this PR's preview or visual review reruns. |
Code review4 issues found. (Note: the inline-comment API was unavailable in this run, so these are posted as a single consolidated comment instead of per-line inline comments.) 1. Visible "TODO (out of scope)" text leaks into user-facing copy
2. Screenshot script defaults to a non-canonical portoptimitron/packages/web/scripts/eos-preview-screenshots.mjs Lines 13 to 15 in e19b223 This defaults 3. Singapore stat contradicts the site's own canonical parameteroptimitron/packages/web/src/components/eos-preview/BillSection.tsx Lines 163 to 167 in e19b223 This hardcoded claim — "Singapore spends roughly a quarter of what the US spends per capita on healthcare. Singaporeans live about ten years longer." — contradicts the canonical sourced parameters already used elsewhere on this page: 4. Hardcoded "535" duplicates an existing citable parameterThis hardcodes "535 humans" instead of citing the existing |
- No-JS reveal (eos-preview.css:436): .eos-reveal defaulted to opacity:0 and only cleared on data-shown="true", which the IntersectionObserver sets. With JS off the comparison heading + entire matrix stayed invisible. Added @media (scripting: none) to show reveals when scripting is unavailable, and a runtime IntersectionObserver-missing guard in Reveal.tsx that force-shows. - Container gutters on stubs (eos-preview.css:412): .eos-stub-inner used a `padding: X 0` shorthand on the same element as .eos-container, zeroing the horizontal clamp() gutters and pushing stub content flush to both mobile edges. Switched to padding-top/bottom so the container gutters survive. - Preview metadata (page.tsx / routes.ts): derived metadata from the canonical registry via getRouteMetadata(eosPreviewLink) for a self-canonical URL and a route-specific OG/Twitter card, then forced noindex. eosPreviewLink is a metadata-only NavItem (same pattern as dysfunctionTaxLink), kept out of every nav array and STATIC_SITEMAP_ROUTES so the route stays unlisted. - Screenshot helper (eos-preview-screenshots.mjs): defaulted BASE_URL to the canonical :3001 dev server instead of :3006. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
"About ten years longer" conflated the Singapore-vs-global comparison with the Singapore-vs-US one; the exported parameters put the US gap at 6.6 years (84.1 vs 77.5). The sentence now renders the rounded derived gap through ParameterValue anchored to SINGAPORE_LIFE_EXPECTANCY, so the number stays in sync with the parameter pipeline and clicks through to the WHO citation. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Mf3c4CzpfCCqAQA2k4UQKH
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
packages/web/src/components/eos-preview/BillSection.tsx (1)
40-42: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winLive death counter leads the section, ahead of the header.
BillDeathCounterrenders before the "Section 1 · The Bill" header, i.e. it's the first thing rendered in the section.Based on learnings and coding guidelines, per the path instructions for
packages/web/**/*.{ts,tsx}: "Do not lead campaign landing pages with raw counters, scoreboards, totals, leaderboards, or internal status panels." The counter is deliberately kept small/non-sticky per its own code comment, so this is likely an accepted trade-off, but worth confirming against that guideline given it's the literal first element in the DOM.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/web/src/components/eos-preview/BillSection.tsx` around lines 40 - 42, Move the BillDeathCounter block in BillSection so the section’s “Section 1 · The Bill” header renders before it. Keep the counter present and retain its existing styling and behavior; only change the render order to avoid leading the landing-page section with the raw counter.Source: Coding guidelines
packages/web/src/components/eos-preview/ComparisonMatrix.tsx (1)
201-230: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoffHand-rolled table markup instead of the RetroUI Table primitive.
The matrix is built from plain
divs with manualrole="table"/"row"/"cell"attributes rather than the RetroUITableprimitive (which ships.Header/.Body/.Row/.Head/.Cellsub-components).As per path instructions for
packages/web/src/components/**/*.{ts,tsx}: "Use RetroUI primitives ... for ... tables ... before hand-rolling custom components — prefer the primitive if it provides the right behavior." Worth confirming the primitive can't reasonably support this bespoke two-tone/mobile-stacking layout before keeping the hand-rolled version; if it can't, the current approach is justified.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/web/src/components/eos-preview/ComparisonMatrix.tsx` around lines 201 - 230, Replace the hand-rolled div-based matrix in ComparisonMatrix with the RetroUI Table primitive, using its Header, Body, Row, Head, and Cell sub-components while preserving the existing labels, values, styling hooks, and mobile header content. If the primitive cannot support the required two-tone mobile-stacking layout, verify that limitation before retaining the current structure.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/web/scripts/eos-preview-screenshots.mjs`:
- Around line 34-36: Replace the fixed waitForTimeout delays in the screenshot
flow with an await on document.fonts.ready to ensure fonts have finished loading
before capture. Apply this at both referenced locations, and retain locator
screenshots without adding manual scrolling because they already bring targets
into view.
- Around line 44-67: Update the screenshot capture flow for `.eos-pivot` and
`#comparison` so each missing required element throws an error instead of being
silently skipped; preserve the existing screenshot and `shots.push` behavior
when the elements are present, matching the required-section handling used for
`#the-bill`.
---
Nitpick comments:
In `@packages/web/src/components/eos-preview/BillSection.tsx`:
- Around line 40-42: Move the BillDeathCounter block in BillSection so the
section’s “Section 1 · The Bill” header renders before it. Keep the counter
present and retain its existing styling and behavior; only change the render
order to avoid leading the landing-page section with the raw counter.
In `@packages/web/src/components/eos-preview/ComparisonMatrix.tsx`:
- Around line 201-230: Replace the hand-rolled div-based matrix in
ComparisonMatrix with the RetroUI Table primitive, using its Header, Body, Row,
Head, and Cell sub-components while preserving the existing labels, values,
styling hooks, and mobile header content. If the primitive cannot support the
required two-tone mobile-stacking layout, verify that limitation before
retaining the current structure.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: f4c98e5b-2e5b-4963-a00d-02dce9838afa
📒 Files selected for processing (9)
packages/web/scripts/eos-preview-screenshots.mjspackages/web/src/app/eos-preview/page.tsxpackages/web/src/components/eos-preview/BillDeathCounter.tsxpackages/web/src/components/eos-preview/BillSection.tsxpackages/web/src/components/eos-preview/ComparisonMatrix.tsxpackages/web/src/components/eos-preview/EosLandingPreviewPage.tsxpackages/web/src/components/eos-preview/Reveal.tsxpackages/web/src/components/eos-preview/eos-preview.csspackages/web/src/lib/routes.ts
update-pr-branches.yml (merged in #142) pushes merge-from-main commits as github-actions[bot]. claude-code-action hard-fails for non-human actors ("Workflow initiated by non-human actor"), so every auto-updated PR got a red claude-review check the moment the auto-updater did its job — first seen on PR #143 within a minute of #142 landing. Skip the job for bot-triggered synchronize events instead of allowlisting the bot: a merge from main leaves the PR diff unchanged, so re-reviewing it would burn a full review run on nothing new. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Mf3c4CzpfCCqAQA2k4UQKH
Extends the two-register design system with the catalog primitives (product cards, price chips, testimonials, data cards, terminal readout, transformation cards, range slider, expanders, code blocks, loop diagrams, review cards, chart chrome, sunrise tokens) and ships: - Section 2 The Store: pitchman intro, EOS definition, Class A/B shares. - Section 4 Featured Products: the Optimitron (two-number dashboard with animated HALE + median-income counters, click-to-expand policy comparator), the Optimal Budget Generator (key-number data cards, the ratchet, treaty CTAs), the Decentralized TODO List (terminal readout of the spec's illustrative day), the Loving Takeover (canonical line #2 verbatim, Engine No. 1 proof of concept, corporate transformation cards), and the Wishocracy (three live pairwise budget sliders with the real-time treaty-funding output line, accuracy table). Copy verbatim from the spec. The spec's "(The Evidence Engine)" parenthetical and the Evidence Engine wording inside the Product 4 testimonial are rendered with Optimal Policy Generator naming per the spec's own binding "WHAT IS NOT ON THIS PAGE" list. All numbers via ParameterValue; the TODO terminal list is the spec's illustrative example copy. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Decentralized FDA: searchable, sortable treatment ranking table with a condition switcher (depression / anxiety / bipolar), fed by the repo's illustrative medical dataset via getTreatmentsByConditionSlug (the spec's fallback while the live studies.dfda.earth API is unwired); RECOVERY trial economics; Triangulum testimonial. - Automated Revenue Service and Universal Security Administration: hand-tokenized Solidity code blocks (no highlighter dependency) plus the spec's before/after tables. - Department of Peace: Settlement Engine + Disposal Program panels, the Deluxe trim, the post-WW2 math. - Decentralized Congress: tariff copy plus the interactive sample ballot; the evidence card's [X]/[Y]/[Z]/[calculated] values are the spec's own placeholders and render visibly provisional. - Remaining nine agencies as an expandable grid, including the Court of Humanity, with all opex figures from the parameter registry. - Total cost comparison bar (to scale; per-capita parameters), with values positioned over the track so a tiny fill can never clip them. Copy verbatim from the spec; all numbers via ParameterValue. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Section 6: the spec's ASCII control-loop diagrams typeset as node-flow diagrams (oven closed-loop vs War on Drugs open-loop, then the full twelve-node EOS closed loop); nodes light up in sequence via CSS animation, disabled under prefers-reduced-motion. - Section 7: four-trajectory chart (Collapse / Fantasy Baseline / 1% Treaty / Optimal Governance) with the personal net-worth-or-income input that rescales the Y axis, hover tooltips showing "your projected income/net worth under this scenario", the shaded hedge region, and the "the gap: human stupidity, priced annually" annotation. Adapted from the proven eos-retro FourEarthsChart (recharts, already a dependency) onto eos-preview tokens; every growth rate comes from the parameter registry. Downside/upside panels and the whole-Earth output caption carry the year-20 GDP and CAGR parameters. Copy verbatim from the spec; all numbers via ParameterValue. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Section 8 Welcome to Tuesday: the cream sunrise interlude with the five scroll-revealed timeline entries and the corporate transformation cards, exactly as the spec lays them out (they appear in Product 4 and again here). - Section 9 Reviews: the diseases' one-star competitor feedback and the three planet customer reviews with star ratings. - Section 10 For Investors: structure/floor/upside, the five key projections as data cards, the historical-ROI context line, the always visible Reg D 506(c) disclosure, and the three participation paths in the spec's order (buy Class B, claim Class A, fund or do a task). The Class B and Class A CTA destinations are not named in the spec and are clearly-marked href="#" TODOs; Path 3 links /tasks. - Section 11 Footer: the closer verbatim, including canonical line #3 and the love line; The Manual and About link out, Contact / Legal / PPM Request are spec-undefined TODOs. - EosLandingPreviewPage now composes all eleven sections; every TODO stub is gone. Screenshot helper extended to capture all sections at desktop 1440 and mobile 390. Copy verbatim from the spec; all numbers via ParameterValue. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…nn/optimitron into feature/eos-landing-page
Spec copy verbatim from eos-landing-page.qmd. Register 2 catalog styling, reveal-on-scroll, no parameters in this section. Co-Authored-By: Claude <noreply@anthropic.com>
Keeps the remote StoreSection implementation (dedicated .eos-store styles, no parameters) and this branch's full eleven-section page composition. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The /design-a preview hand-built its Metadata object, so shared links bypassed the route catalog and got no canonical URL or route-specific OG/Twitter card. Register the route as designACatalogLink in routes.ts (unlisted: not in nav, not in STATIC_SITEMAP_ROUTES) and derive the page's metadata from it via getRouteMetadata(), mirroring the /eos-preview pattern from PR #143. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
First vertical slice of the EOS landing page v2 (
optimitron:dev:eos-landing-page-v2). Built at a new route/eos-previewso the existing/eosretro page is untouched — cutover is a later human decision. Route isnoindex.Spec / source of truth (copy is verbatim):
manual/knowledge/production/eos-landing-page.qmd.Done in this PR
eos-preview.css, scoped under.eos-preview, a sanctioned dark exception likeeos-retro.css):useDeathTickhook + Page Visibility API; static fallback under reduced motion), the large centered Political Dysfunction Tax number, and the register pivot ("You may be eligible for optimization.").Stubbed (out of scope, clearly marked TODO on the page)
Section 2 (Store), 4 (Featured Products), 5 (Government Replacement Suite / agencies grid), 6 (Thermostat), 7 (Please Select an Earth / GDP chart), 8 (A Day in the Optimized Life), 9 (Reviews), 10 (Your Move / investor CTA), 11 (Footer).
Parameters
Every numeric value renders live from the parameter pipeline (
@optimitron/data/parametersviaParameterValue). Zero hardcoded parameter numbers. All vars referenced by these two sections resolved to real exported parameters — no unwired placeholders remain in the shipped sections.Two known cosmetic formatting artifacts (faithful to the parameter units, not bugs): the
USD/yearper-person/household tax figures render as$12,600/yearinside the phrase "per person per year" (double "year"), andwar_counterfactual_gdp_per_capita(unitUSD/person) renders as$334,000/personinside "would earn ... a year". Both come from the parameter's own unit; no display mode strips them without hardcoding.Verification
tsc --project tsconfig.next.json: 0 errors.next build: passes;/eos-previewpresent in the route table (all 307 pages generated).Never merge without human review.
🤖 Generated with Claude Code
Summary by CodeRabbit
/eos-previewlanding page featuring “The Bill” section, live death counter, parameter-driven statistics, and a government-versus-Earth Optimization Services comparison matrix.