# F — Marketing site, onboarding, auth pages, PWA polish (2026-09-11)

Workstream F of docs/UPGRADE-PLAN.md. Everything below compiles (pnpm typecheck green, eslint clean on every file listed here, pnpm test 125/125). No dev server was run; visual QA belongs to the integration phase.

# Files

# Created

# Changed

# API

GET /api/public/models — no auth. Headers Cache-Control: public, max-age=600, s-maxage=600, stale-while-revalidate=300.

Response 200:

{ "models": [ { "key": "openai/gpt-5.5", "displayName": "GPT-5.5", "provider": "openai", "contextTokens": 400000,
               "inputPerMillion": 1.25, "outputPerMillion": 10, "status": "active", "firstSeenAt": "2026-08-30T…Z" } ],
  "total": 132, "generatedAt": "…" }

• ≤ 40 entries, only hidden = false and status ∈ {active, preview}.
• Ordering: models first seen in the last 30 days first, then by registry sortWeight (flagships), then newest; the ranked list is interleaved per provider so the first screen shows all providers.
• 503 { models: [] } (cached 60 s) if the database is unavailable; the strip hides itself.
• Reads the models table directly (@/db) — no change to lib/ai/registry (B's area).

# Onboarding (/app/onboarding)

Client component, inside the app shell (the shell already hides the bottom nav on this route). Six steps:

1. Create account — already done → green check with name/e-mail.
2. Choose providers — grid of tiles (PROVIDER_ORDER, PROVIDERS meta), multi-select with aria-pressed; connected ones show "Connected".
3. Add first API key — rows for chosen + connected providers; "Get a key" (provider console) and "Add key" → useAddKeyDialog / AddKeyDialog (E's component, unchanged). Continue requires ≥ 1 valid connection; Skip otherwise.
4. Validate key — the dialog result (ok, modelsAvailable, error) is recorded as the validation; "Test connection" calls the existing POST /api/providers {action:"validate"}; status Valid / Rejected / Not validated with hint, models count, latency, relative time; "Replace key" on failure.
5. Select favorite models — connected, non-deprecated models grouped per provider (6 per provider, filter input), star toggles useApp().toggleFavorite (44 px rows).
6. Send first prompt — four suggested prompts + "Open the chat". finish() = updatePreferences({ onboardingCompleted: true }), localStorage marker polyllm:onboarding-done:<userId>, setSelectedModelKey(firstFavorite), router.replace('/app/chat?model=<key>&q=<prompt>'), router.refresh().

Layout: phones = progress bar + swipeable .snap-row panels (useSnapCarousel, each panel scrolls on its own) + fixed footer with 44 px buttons (Back / Skip / Continue) above the safe area; desktop = centered two-column (sticky step list with check marks, content column). "Skip setup" in the header marks onboarding complete and returns to chat.

TODO(integration: chat) — ChatView currently applies ?preset=, ?prompt= (prompt preset id) and ?model=. The onboarding passes the suggested text as ?q=; add one line in components/chat/chat-view.tsx to prefill the composer draft from search.get("q") (e.g. if (q && !conversationId) setDraft(q) in the existing search-params effect). Until then the user lands on a new chat with the favorite model selected and an empty composer.

# Verified security claims (source references)

Every statement on /security, the homepage security teaser and the FAQ was checked against the code on 2026-09-11:

Stated as a trade-off on the page: 'unsafe-inline' in script-src/style-src (Next hydration + Radix). Not claimed anywhere: encrypted backups, nonce-based CSP, Redis-backed limits.

# Coming soon / not implemented

Nothing is labelled "Coming soon". All buttons work. The only pending hook is the ?q= draft prefill in ChatView (above).

# Notes for other areas

• E (settings/appearance): components/marketing/install-hint.tsx is reusable (<InstallHint compact />); it stores dismissal in localStorage["polyllm:install-hint-dismissed"].
• B (models): the footer and header link to /models; the hero strip links "Browse all" to /models. formatContext/formatPricePair in src/lib/marketing/public-models.ts are generic if useful.
• A (chat): ?q= prefill (see above). The Onboarding component is still mounted from components/chat/empty-state.tsx; it now renders either nothing or a small link, so the empty state's own "Connect your first provider" card remains the primary CTA there.
• Lint errors remaining in the tree at the time of writing are in G's files (components/search/search-sheet.tsx, components/app/command-palette.tsx), not in this area.

# QA checklist (integration phase, 375 / 390 / 393 / 430 / 1440)

Homepage

• Hero headline wraps as two lines on phones without orphan; CTAs full-width on phones, inline from sm.
• Phone frame (< md) shows header with model pill, user bubble, streaming answer with caret, metadata line, composer [+] Ask anything… [mic] [send], bottom nav with Chat active; no horizontal overflow at 375.
• Desktop (≥ md) shows the window with sidebar, model pill, context indicator, streaming answer; mini Arena card appears bottom-right at ≥ lg after ~3 s and its bars finish; at 1440 the card does not overflow the container (xl:-right-10).
• Live strip: skeleton → marquee; pauses on hover; "New"/"Preview" badges; prefers-reduced-motion → static wrapped grid; strip hidden when /api/public/models returns 503 (stop the DB to test).
• /api/public/models returns ≤ 40 models, Cache-Control header present, no auth needed, no user fields.
• Features: no boxed-card overload; visuals fit at 375 (Router card, Scoreboard + Blind Arena stack, Models/Usage windows without the sidebar, Workspace panel, Endpoints list).
• Demo: Segmented fills the width on phones; tabs switch instantly; Replay restarts streams; phone Arena swipes between the three answers and the tab pills/dots follow; desktop Arena shows three columns, "fastest" badge, vote pills, Winner badge when done; Models/Usage tabs render both frames at ≥ xl.
• #features, #arena, #demo, #security, #faq anchors land correctly with the sticky header (scroll-mt-16).
• Footer: four columns collapse to 2 columns on phones; Made-by block shows mailto, name, MacLustr external link (new tab); Install hint appears only on Chromium (beforeinstallprompt) or iOS Safari, disappears when dismissed or in standalone mode.

Security / Contact

• /security flow renders as a vertical stack with down arrows on phones and a 3-column row at ≥ lg; header dl rows wrap long CSP values without overflow; rate-limit tables are two columns at ≥ md.
• /contact mailto works; external MacLustr link opens in a new tab.
• /sitemap.xml lists /models, /security, /contact.

Onboarding

• New user (no providers, onboardingCompletedAt null) opening /app/chat is redirected once to /app/onboarding; navigating back to chat in the same session shows the "Finish setting up PolyLLM" link instead of redirecting again.
• Phone: progress bar, swipe between steps (.snap-row), footer buttons 44 px above the safe area, bottom nav hidden, each step scrolls independently, no horizontal overflow at 375.
• Desktop: sticky step list with check marks; clicking a step jumps to it.
• Step 3 opens AddKeyDialog; after a successful save, step 4 shows "Valid · N models"; "Test connection" updates status and shows latency; a rejected key shows the provider error and "Replace key".
• Step 5 stars persist (/api/models favorites) and the count updates; filter input works.
• Step 6 / "Open the chat" marks onboarding completed (users.onboarding_completed_at), selects the first favorite model and opens /app/chat?model=…&q=…; "Skip setup" does the same without a prompt.

Auth

• Login/signup/forgot/reset/verify at 375: brand mark + wordmark above the form, no card border, 44 px inputs (16 px text on touch), 48 px submit, password strength meter, footer above the home indicator.
• ≥ lg: brand panel left, form right; the header logo is invisible on the right column (panel has its own).
• All existing behaviours unchanged: unverified → resend flow, ?next= redirect after login, notices (reset, verified, signed-out).

PWA

• /manifest.webmanifest linked from the layout (already); Lighthouse "installable" passes; "Install PolyLLM" hint on the homepage footer (Chromium) triggers the native prompt.