Display error max token reached in Studio Code Desktop

[katinthehatsite]

Related issues

Fixes STU-1825

How AI was used in this PR

It was used to implement the feature.

Proposed Changes

This PR ensures that we throw an error when the usage limit is reached in the Studio Code UI.

Testing Instructions

• Pull the changes from this branch
• To mock the 429 error, apply this to apps/studio/src/components/studio-code-session/use-agent-run.tsx:

      504                                                              
      505        try {                                                                                         
      506 +        throw new Error( 'API Error: 429 — usage cap exceeded' );                            
      507          await interruptRequestsBySessionRef.current.get( sessionId );                               
      508          const { runId: newRunId } = await getIpcApi().continueAiSession( sessionId, prompt, {
      509            displayMessage,

• Run npm start
• Navigate to Studio Code tab for one of the sites
• Try sending a message
• Verify that banner appears above the composer with the friendly usage limit message

Currently, it looks like this:

I am not sure on the design so leaving it up for discussion.

I tried to use the meta field below the input field but it was looking like this, which I think was looking even worse:

Pre-merge Checklist

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

[wpmobilebot]

📊 Performance Test Results

Comparing 35633ec vs trunk

app-size

Metric	trunk	35633ec	Diff	Change
App Size (Mac)	1419.48 MB	1419.48 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	35633ec	Diff	Change
load	1078 ms	1074 ms	4 ms	⚪ 0.0%

site-startup

Metric	trunk	35633ec	Diff	Change
siteCreation	6981 ms	7009 ms	+28 ms	⚪ 0.0%
siteStartup	2358 ms	2357 ms	1 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

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

[Copilot]

Pull request overview

This PR adds a dedicated “usage cap reached” error path for Studio Code Desktop so that HTTP 429 responses from the WordPress.com proxy are surfaced to users as a friendly, actionable message (and shown as a banner above the composer rather than as a generic run error).

Changes:

• Added a shared isUsageCapError() helper in packages/common to detect usage-cap (429) errors by message pattern.
• Updated Studio Code session run handling to translate detected 429 errors into a friendly message and expose usageCapReached state to the UI.
• Rendered a new usage-cap banner above the composer in the Studio renderer; updated CLI UI to reuse the shared helper.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/common/ai/json-events.ts	Adds isUsageCapError() helper used by CLI + Desktop to identify usage-cap errors.
apps/studio/src/components/studio-code-session/use-agent-run.tsx	Detects usage-cap errors, maps them to a friendly i18n string, and tracks usageCapReached in run state.
apps/studio/src/components/studio-code-session/index.tsx	Routes usage-cap messaging to the composer via a new usageCapMessage prop.
apps/studio/src/components/studio-code-session/composer/style.module.css	Adds styling for a usage-cap banner above the composer.
apps/studio/src/components/studio-code-session/composer/index.tsx	Renders an alert banner when usageCapMessage is set.
apps/cli/ai/ui.ts	Replaces inline 429 regex detection with the shared isUsageCapError() helper.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[katinthehatsite]

Merged the suggestion 👍

[nightnei]

LGTM and works well:

And I agree that meta is not nice, as it is almost unnoticeable.
Only one thing - we are not supporting /provider in UI, so let's remove it.