AI credits: Warn at 80% usage in the sidebar and above the Classic composer

[gcsecsey]

Related issues

• Related to STU-2338 — this is the usage-notice half. The purchase confirmation is in AI credits: add top-up confirmation toast #4745.
• Stacked on Agentic UI: Warn in the composer at 90% AI credit usage and complete the exhausted state #4714

How AI was used in this PR

I used Opus 5 for implementation and tests.

Proposed Changes

This PR adds a dismissible warning at 80% to the sidebar, with a purchase CTA. It is also shown again at these points:

Event	Result
Dismiss at 80%, keep spending	stays hidden
A top-up drops usage, then it climbs back	warns again
App restart	warns again
Usage passes 90%	the composer strip from #4714 takes over

Classic has no sidebar cards, so its warning sits above the composer instead. It has no composer strip either, so that one slot covers the 90% step as well.

The copy is the approved wording from the exploration in #4446. Still I'd appreciate a final look @shaunandrews.

Testing Instructions

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

1. Set usage to about 83%. Confirm the sidebar shows At 83% usage with Add AI credits, and the composer shows no strip.
2. Set usage to about 92%. Confirm the composer strip shows At 92% usage, and the sidebar shows nothing. This is the duplication the issue is about.
3. Set usage below 80%, and to 100%. Confirm neither surface warns, and that at 100% the composer locks out.
4. Dismiss at 83% and reload the window. Confirm it comes back.
5. Switch to Classic, open Studio Code, and repeat steps 1–4. The notice sits above the composer, and covers 90% too.

Check both color schemes, a narrow window, and an RTL locale such as Arabic.

Agentic UI:

Usage	Light	Dark
Above 80%		same as light
Above 90%

Classic:

Usage	Light	Dark
Above 80%
Above 90%

Pre-merge Checklist

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

[Copilot]

🟡 Changes recommended

The Classic warning has unresolved RTL alignment and screen-reader announcement defects.

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

Pull request overview

Adds dismissible AI-credit usage warnings at 80%, coordinating Agentic UI sidebar and Classic composer behavior.

Changes:

• Adds shared threshold, dismissal, and localized-copy utilities.
• Adds Agentic sidebar and Classic composer warnings with purchase actions.
• Covers threshold transitions and dismissal behavior with tests.

File summaries

File	Description
packages/common/lib/studio-assistant-quota.ts	Adds shared warning logic and copy.
packages/common/lib/tests/studio-assistant-quota.test.ts	Tests shared threshold behavior.
apps/ui/src/ui-classic/components/session-view/composer/ai-credits-warning-strip.tsx	Reuses shared warning title formatting.
apps/ui/src/data/queries/use-app-messages.ts	Adds the Agentic sidebar warning.
apps/ui/src/data/queries/use-app-messages.test.tsx	Tests sidebar warning behavior.
apps/ui/src/data/ai-credits-notice.ts	Stores session-only dismissal state.
apps/ui/src/data/ai-credits-notice.test.ts	Tests dismissal subscriptions.
apps/ui/src/components/app-message-cards/index.tsx	Renders the shared purchase action.
apps/studio/src/stores/ui-slice.ts	Stores Classic dismissal state.
apps/studio/src/components/tests/ai-credits-threshold-notice.test.tsx	Tests the Classic warning.
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 warning above the composer.
apps/studio/src/components/ai-credits-threshold-notice.tsx	Implements the Classic warning card.

Review details

• Files reviewed: 14/14 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]

Does it make sense to use the Notice component (https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-notice--docs) for the Classic UI?

--

Can we make the yellow background color a little more vibrant in dark mode? Its blending in a bit too much in the screenshots.

[gcsecsey]

Does it make sense to use the Notice component (wordpress.github.io/gutenberg?path=/docs/design-system-components-notice--docs) for the Classic UI?

--

Can we make the yellow background color a little more vibrant in dark mode? Its blending in a bit too much in the screenshots.

Thanks @shaunandrews, I think you're right and adopting the Notice is the right direction here. I pushed these changes just now and updated the screenshots on the PR. I also updated the yellow color in dark mode on #4714.

[shaunandrews]

Thanks, looks good!