# AI Editor RSP hero optimization — frontend implementation

- task_id: t_108ef1f6
- commit_sha: bad3a84a398c89f967998398471c878be16e9011
- branch: main
- deploy_url: https://aieditorrsp.net/
- cloudflare_worker_version_id: d427388e-a952-4a93-b511-50191137200a

## Changed files

- src/components/ProductPreviewEditor.tsx
- src/app/globals.css
- scripts/measure-hero.cjs

## What changed

- Home hero editor now renders only the compact first-screen task: upload source image, edit prompt, choose prompt template, generate edit.
- Removed initial home hero account/billing/result idle overload: no Account Credits panel, Google login inside editor, Pro monthly/yearly, Credit pack, or hard-coded remaining quota.
- Replaced hard-coded quota with generic helper copy: `Credits checked at generation` on desktop, hidden on mobile to keep Generate above fold.
- Collapsed initial result surface to a small `Result preview appears here after generation` status block.
- Tightened desktop/mobile CSS density and hid decorative upload image/input layout cost so Generate is visible in required viewports.
- Preserved `makeSeoMetadata("/")`, `<SeoJsonLd route="/" />`, and `<SeoExpansion route="/" />`.

## Tests and verification

- `npm run verify` → PASS: `{ok:true,routes:11,hrefPlaceholders:0,forbiddenCopy:0,runtime_architecture:"workers_first_frontend_with_api_stubs"}`
- `npm run seo:audit` → PASS: `ok:true`, `failures:[]`; home word_count 1285, semantic_density_pct 12.14, img_missing_alt 0.
- `npm run build` → PASS: Next.js 16.2.6 + OpenNext Cloudflare bundle generated `.open-next/worker.js`.
- `npm run deploy` → PASS: deployed Worker `aieditorrsp`, custom domain `aieditorrsp.net`, version `d427388e-a952-4a93-b511-50191137200a`.
- Production `curl -I -L https://aieditorrsp.net/` → HTTP/2 200.
- Production `/api/health` → `{"ok":true,"service":"aieditorrsp","runtime":"cloudflare-workers-opennext","version":"frontend-launch"}`.
- Production `/sitemap.xml` → includes `https://aieditorrsp.net/`.
- Production hero text scan found none of: `Account Credits`, `Login with Google`, `Pro monthly`, `Pro yearly`, `Credit pack`, `2 free generations left today`, `server-side provider flow`, `/api/credits`, `/api/generate-image`, `fal processing`, `HD_MODE`, `TOKENS`.

## Production measurements

| Viewport | Hero | Console | Generate | Align | Overflow | Disallowed hero text | Screenshot |
|---|---:|---:|---:|---|---|---|---|
| 1366x768 | top 64 / bottom 717 / height 653 | top 124 / bottom 663 / height 539 | top 418 / bottom 466 | start | no | none | /root/.hermes/reports/aieditorrsp-hero-optimization-20260603/screenshots/t_108ef1f6-production-1366x768.png |
| 1440x900 | top 64 / bottom 717 / height 653 | top 124 / bottom 663 / height 539 | top 418 / bottom 466 | start | no | none | /root/.hermes/reports/aieditorrsp-hero-optimization-20260603/screenshots/t_108ef1f6-production-1440x900.png |
| 1280x800 | top 64 / bottom 717 / height 653 | top 124 / bottom 663 / height 539 | top 418 / bottom 466 | start | no | none | /root/.hermes/reports/aieditorrsp-hero-optimization-20260603/screenshots/t_108ef1f6-production-1280x800.png |
| 390x844 | top 64 / bottom 1004 / height 940 | top 227 / bottom 964 / height 737 | top 720 / bottom 768 | start | no | none | /root/.hermes/reports/aieditorrsp-hero-optimization-20260603/screenshots/t_108ef1f6-production-390x844.png |
| 430x932 | top 64 / bottom 1004 / height 940 | top 227 / bottom 964 / height 737 | top 720 / bottom 768 | start | no | none | /root/.hermes/reports/aieditorrsp-hero-optimization-20260603/screenshots/t_108ef1f6-production-430x932.png |

## Residual risk

- Mobile console itself still extends below the first viewport, but Generate is visible before result/account/pricing content and meets the 390/430 target.
- Full authenticated billing, credit ledger, Stripe webhook grant, and provider successful generation E2E were not in this frontend-only scope.
- Lower-page non-hero claims such as high-resolution/export/billing language still need the planned final compliance recheck.