# 08F3 Stitch first-screen tool fidelity rework

Task: t_b2effbec
Domain: https://aieditorrsp.net
Repo: /root/projects/aieditorrsp
Design truth:
- /root/.hermes/reports/site-aieditorrsp-20260528/design/html/home-desktop.html
- /root/.hermes/reports/site-aieditorrsp-20260528/design/html/tool-states-desktop.html
- /root/.hermes/reports/site-aieditorrsp-20260528/design/screens/home-desktop.png
- /root/.hermes/reports/site-aieditorrsp-20260528/design/screens/tool-states-desktop.png

## Fidelity gap before 08F3 edits

Compared against official Stitch HTML first, screenshots second.

1. Homepage first viewport still read as a marketing hero with a separate functional editor below/aside. Stitch home-desktop places the interactive upload + prompt + template selector + generate CTA inside the hero console as the dominant above-fold object.
2. Stitch console material system was under-restored: missing image/source preview frame, terminal header bar density, amber/mint token strips, four template chips including Cyberpunk, and compact quota/generate row.
3. Tool state treatment was too generic. Official tool-states HTML shows named lifecycle states: EMPTY, INGESTING, ERROR, PREVIEW, PROMPT_ACTIVE, BUILDER, ENGINE_ACTIVE, SUCCESS, RETRY, UPGRADE_REQUIRED, UNSAFE_PROMPT_BLOCKED. Current UI kept real states but presented them as a simple status panel.
4. Performance comparison section did not match Stitch before/after frames. Official home-desktop uses two large split comparison cards with SOURCE / EDITION labels; implementation used small abstract contact cards.
5. Workflow panel had 3 steps, while official Stitch home has 4: Upload Image, Define Intent, Execute & Refine, Deploy.
6. Safe asset substitution remained necessary: official Stitch uses Google CDN generated images. 08F3 does not copy/rehost those external assets; it uses CSS/SVG-like local visual frames to preserve layout/material feel without external copyrighted assets.

## 08F3 changes made

- Rebuilt `/` first viewport to `studio-hero--tool`: left Stitch headline/actions, right real `ProductPreviewEditor` console above the fold.
- Refactored `ProductPreviewEditor` home surface to include Stitch-like console header, upload image frame, prompt editor, token row, four template selector cards, quota strip, generate CTA, and compact state panel.
- Preserved real editor behavior: file input, prompt textarea, template selection, `/api/generate-image` POST, status/result/download handling, credit refresh, auth/credit CTA panel.
- Added Cyberpunk template in the hero editor to match Stitch home console.
- Restored workflow to 4 steps.
- Reworked performance comparisons into two large split SOURCE / EDITION frames using safe CSS-generated material panels.
- Kept compliance copy: capped free generations, no unlimited plan claims, no official/RSP Editing endorsement claim.

## Intentional deviations from Stitch HTML

- Official Google CDN images are not copied or hotlinked. They are replaced by local CSS-generated image/material panels.
- Material Symbols are still represented through the existing lightweight icon fallback to avoid reintroducing external font LCP risk.
- The home editor remains a real React client component rather than raw static Stitch DOM so upload/generate/account behavior remains functional.

## Verification log

Local gates:
- `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 []
- `npm run build`: PASS — OpenNext Cloudflare build complete, Next.js compiled successfully
- `git diff --check`: PASS

Release:
- Commit: `32154566c47cfe6bae1948290503c9dd27a48df9`
- Branch: `main`, pushed to `origin/main`
- Deploy URL: https://aieditorrsp.net
- Cloudflare Worker version: `fd257cb3-34dc-433f-b4c9-240b4cf6c0a6`
- Deployment source: manual OpenNext/Wrangler deploy from local checkout at commit `32154566c47cfe6bae1948290503c9dd27a48df9` (`wrangler deployments list` reports Source `Unknown (deployment)`).

Production smoke:
- `/`: 200, markers present: `studio-hero--tool`, `editor-console--hero`, `Choose a style prompt`, `Cyberpunk`, `Performance Comparisons`, `Generate edit`; `href="#"` count 0.
- `/pricing`: 200
- `/ai-photo-prompt-editor`: 200
- `/api/health`: 200
- `/api/credits`: 200

Browser evidence:
- /root/.hermes/reports/site-aieditorrsp-20260528/screenshots/08f3/after-local-home-desktop.png
- /root/.hermes/reports/site-aieditorrsp-20260528/screenshots/08f3/after-local-home-mobile.png
- /root/.hermes/reports/site-aieditorrsp-20260528/screenshots/08f3/production-home-desktop.png
- /root/.hermes/reports/site-aieditorrsp-20260528/screenshots/08f3/production-pricing-desktop.png
- /root/.hermes/reports/site-aieditorrsp-20260528/screenshots/08f3/production-editor-desktop.png

Residual risks:
- Official Stitch Google CDN generated images are not copied or hotlinked; safe CSS-generated material frames preserve layout and mood but are not final owned photography.
- Production provider generation still depends on configured Cloudflare/FAL secrets and provider availability; UI shows explicit error/credit/auth states.
- QA/owner review should judge visual fidelity against official Stitch HTML and screenshots before unblocking launch ops.