AI credits: add top-up confirmation toast

[gcsecsey]

Related issues

• Related to STU-2338 — this is the purchase-result half. The usage notices are in AI credits: Warn at 80% usage in the sidebar and above the Classic composer #4722.
• Design exploration: Design Exploration: AI credit usage, limits, and purchase flows #4446

How AI was used in this PR

I used Opus 5 for implementation and tests.

Proposed Changes

Returning from WordPress.com checkout currently just shows the Settings page, which might throw the user out of the conversation flow. Also, a canceled checkout does the same.

This PR waits for the balance to actually grow, then shows a toast in the Agentic UI, or a card above the composer in Classic, acknowleding the top-up. It also updates cancelling to be silent.

The copy is the wording from the exploration in #4446. One thing it did not have: a View usage action on the toast. @shaunandrews — worth a look, along with staying silent after a cancel.

Testing Instructions

Use the balance setup steps in 236947-ghe-Automattic/wpcom.

• Buy the smallest top-up from Add AI credits. Confirm you stay where you were, and one toast reads N AI credits added. View usage opens Settings → Usage.
• Start checkout and cancel it. Confirm no message appears, and that you are not moved to Settings.
• Repeat the purchase in Classic. The confirmation is a card above the composer, and it clears itself after 8 seconds.

State	Light	Dark
Agentic UI success		same as light
Classic UI success

Pre-merge Checklist

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

⚠️ Visual change: the Classic card needs a human review in light + dark mode.

[Copilot]

🟡 Changes recommended

One browser purchase path bypasses reconciliation, and Classic confirmations can appear long after their intended lifetime.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds post-checkout AI-credit confirmation while preserving the user’s current workflow and keeping cancellations silent.

Changes:

• Polls quota balances to confirm completed top-ups.
• Shows an Agentic UI toast or temporary Classic composer card.
• Centralizes checkout tracking and adds focused tests.

File summaries

File	Description
packages/common/lib/tests/studio-assistant-quota.test.ts	Tests confirmation formatting.
packages/common/lib/studio-assistant-quota.ts	Adds polling constants and copy formatter.
apps/ui/src/ui-classic/router/layout-root/index.tsx	Mounts purchase-result handling.
apps/ui/src/ui-classic/components/session-view/composer/ai-credits-control.tsx	Uses tracked checkout opening.
apps/ui/src/hooks/use-open-ai-credits-checkout.ts	Centralizes checkout launch tracking.
apps/ui/src/hooks/use-open-ai-credits-checkout.test.tsx	Tests checkout URL and pending state.
apps/ui/src/hooks/use-app-menu-navigation.ts	Removes forced Settings navigation.
apps/ui/src/hooks/use-app-menu-navigation.test.tsx	Removes obsolete navigation test.
apps/ui/src/hooks/use-ai-credits-purchase-result.ts	Polls balances and shows the toast.
apps/ui/src/hooks/use-ai-credits-purchase-result.test.tsx	Tests success, cancellation, and focus handling.
apps/ui/src/data/ai-credits-checkout.ts	Stores in-memory checkout state.
apps/ui/src/components/ai-credits-purchase-dialog/index.tsx	Routes purchases through checkout tracking.
apps/ui/src/components/add-ai-credits-button/index.tsx	Routes direct purchases through tracking.
apps/studio/src/stores/ui-slice.ts	Stores confirmed Classic top-ups.
apps/studio/src/hooks/use-ai-credits-purchased-listener.ts	Confirms Classic purchases without navigation.
apps/studio/src/hooks/tests/use-ai-credits-purchased-listener.test.ts	Tests Classic purchase reconciliation.
apps/studio/src/components/tests/ai-credits-purchased-notice.test.tsx	Tests card display and dismissal.
apps/studio/src/components/studio-code-session/tests/session-not-found.test.tsx	Updates store mocks.
apps/studio/src/components/studio-code-session/tests/access-requirements.test.tsx	Updates store mocks.
apps/studio/src/components/studio-code-session/index.tsx	Places the confirmation above the composer.
apps/studio/src/components/ai-credits-purchased-notice.tsx	Implements the temporary Classic card.

Review details

• Files reviewed: 21/21 changed files
• Comments generated: 2
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[shaunandrews]

For the Classic UI, can we try using the WPDS Notice component? https://wordpress.github.io/gutenberg/?path=/story/design-system-components-notice--success

If not, then at least vertically center the close button.

[gcsecsey]

For the Classic UI, can we try using the WPDS Notice component? wordpress.github.io/gutenberg?path=/story/design-system-components-notice--success

If not, then at least vertically center the close button.

Thanks @shaunandrews, I added the notice component with teh success variant, and updated the screenshots in the description. WDYT?

[wpmobilebot]

📊 Performance Test Results

Comparing a9160cb vs trunk

app-size

Metric	trunk	a9160cb	Diff	Change
App Size (Mac)	1426.09 MB	1425.76 MB	0.32 MB	⚪ 0.0%

site-editor

Metric	trunk	a9160cb	Diff	Change
load	1179 ms	1201 ms	+22 ms	⚪ 0.0%

site-startup

Metric	trunk	a9160cb	Diff	Change
siteCreation	7531 ms	7523 ms	8 ms	⚪ 0.0%
siteStartup	3400 ms	3389 ms	11 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[shaunandrews]

Design looks good to me, thanks