Surface Studio Code payment-method requirement before the first prompt

[sejas]

Related issues

• Related to STU-2178: Surface credit card requirement before first Studio Code prompt
• Supersedes the visual prototype in Prototype Studio Code access requirements #4407

How AI was used in this PR

The visual design, copy, and illustration come from the human-reviewed prototype in #4407. This PR ports that design onto the real account checks; the result was reviewed and tested manually.

Proposed Changes

Since STU-2174, the WordPress.com proxy rejects Studio Code requests from accounts without a saved payment method (or a verified email). Today users only discover this after typing and sending their first prompt, as an error in the conversation.

This PR surfaces the requirement upfront:

• Opening the Studio Code tab now checks the account's entitlement (via the existing quota endpoint, which reports has_payment_method and email_verified). Users who don't meet a requirement see a dedicated screen explaining the free-beta payment-method requirement — including the monthly allowance and the no-charge reassurance — instead of an unlocked composer that will fail.
• Add payment method opens the browser at the WordPress.com add-card page and switches to a waiting state with a Check again button that re-checks the account, so users can complete the step and return without restarting Studio.
• Email verification remains as the follow-up requirement, with the same browser hand-off and re-check flow. When both are missing, payment is asked first (adding a card already requires a verified email).
• The gate fails open: if the quota can't be fetched (offline, API error, older server) the tab behaves exactly as today and the proxy keeps enforcing server-side. The kill-switch and usage-cap behaviors are unchanged.
• The empty-state illustration is reworked into a compact stack of realistic Studio Code requests (from Prototype Studio Code access requirements #4407), shared with the logged-out state.

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

The screenshot assets are committed under .github/pr-assets/stu-2178/ only so this PR has stable visual references; they can be removed before merge.

Screenshots

Core flow (light mode)

Payment requirement	Waiting for account update	Email verification

Dark mode

Testing Instructions

1. Run npm start and log in with a WordPress.com account without a saved payment method — the Studio Code tab should show the payment requirement instead of the composer.
2. Select Add payment method — the browser opens at https://my.wordpress.com/me/billing/payment-methods/add and Studio shows the waiting state.
3. Add a card, return to Studio, and select Check again — the tab should unlock into the normal conversation view.
4. With an account that has a card but an unverified email, verify the email-verification screen appears instead.
5. With an entitled account, verify the tab loads straight into the composer as before.
6. Go offline (or block the quota request) and verify the tab still opens normally (fail-open).
7. Confirm layout and contrast in both light and dark mode.

Validated locally with:

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

Pre-merge Checklist

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