Prototype Studio Code access requirements

[shaunandrews]

Related issues

• STU-2178: Surface credit card requirement before first Studio Code prompt

How AI was used in this PR

Codex was used to build and iterate on this visual prototype with human-directed copy, layout, and illustration feedback. The resulting flow was manually reviewed in the running Electron app.

Proposed Changes

This draft explores how Studio Code can explain and sequence its new account requirements before a user's first prompt:

• Introduces a payment-method requirement for the free beta, including the 500-credit monthly allowance and no-charge reassurance.
• Demonstrates the return-to-Studio waiting state after completing an account action in the browser.
• Preserves the email-verification requirement as the next step before unlocking Studio Code.
• Reworks the empty-state illustration into a compact stack of realistic Studio Code requests.
• Keeps the prototype development-only so production behavior is unchanged.

⚠️ Visual change: needs human review in light + dark mode.

Review guide

Please focus on the messaging hierarchy, the payment → email sequence, and whether the waiting state gives enough direction without adding noise. The underlying account checks and browser handoff are simulated in this proof of concept.

Screenshots

Core flow (light mode)

Payment requirement	Waiting for account update	Email verification

Dark mode

Known tradeoffs and follow-ups

• This is a development-only interaction prototype; eligibility checks and browser handoffs are simulated.
• Screenshot assets are committed only so this draft has stable visual references and can be removed before merge.

Testing Instructions

1. Run npm start and open the Studio Code tab in the classic Studio UI.
2. Review the initial payment requirement.
3. Select Add payment method, then Check again, to reach email verification.
4. Select Verify email to review the second waiting state.
5. Confirm the layout and contrast in both light and dark mode.

Validated locally with:

• npx eslint --fix on the modified TypeScript files
• npm run typecheck
• npm test -- apps/studio/src/components/studio-code-session apps/studio/src/components/tests/site-content-tabs.test.tsx (55 tests)

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?