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 f981a00 vs trunk

app-size

Metric	trunk	f981a00	Diff	Change
App Size (Mac)	1345.25 MB	1345.25 MB	+0.01 MB	⚪ 0.0%

site-editor

Metric	trunk	f981a00	Diff	Change
load	1091 ms	1108 ms	+17 ms	⚪ 0.0%

site-startup

Metric	trunk	f981a00	Diff	Change
siteCreation	6489 ms	6515 ms	+26 ms	⚪ 0.0%
siteStartup	2387 ms	2390 ms	+3 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.