Agentic UI: Warn in the composer at 90% AI credit usage and complete the exhausted state

[gcsecsey]

Related issues

• Fixes STU-2337

How AI was used in this PR

I used Opus 5 for implementation and tests.

Proposed Changes

This PR adds a caution strip once the balance enters its last 10%, and hides the New chat action and the suggested prompts in the exhausted state.

• The lockout stays on the server-reported balance rather than moving onto the new meter. The meter needs a denominator and returns nothing without one, so reusing it would have turned an unmeasurable account into a locked one.
• 80% is deliberately left out. The approved design puts that step in the sidebar, which is STU-2338, so the two thresholds never announce at the same moment.

One included fix: when the balance hit zero mid-run, the composer was replaced instantly and hid the Stop button. An in-flight run now keeps showing it.

Testing Instructions

Use the testing steps in 236947-ghe-Automattic/wpcom for setting up your balance at the desired states:

• Set your usage at around 90%
• Confirm the strip sits on the composer's top edge, its top corners match the composer's, and Add AI credits opens the purchase flow
• Confirm New chat and the suggested prompts are still present

CleanShot.2026-08-28.at.17.52.20.mp4

• Set your usage at 100%
• Confirm the purchase card replaces the composer, that "New chat" and the suggested prompts are gone, and that Cmd/Ctrl+N does nothing.

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

RTL dark	RTL light narrow window

Pre-merge Checklist

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

[Copilot]

Pull request overview

Adds AI-credit warning and exhausted-account behavior to the Agentic UI composer.

Changes:

• Warns users at 90% credit usage.
• Hides new-chat actions and suggested prompts when credits are exhausted.
• Preserves the composer during active runs and expands related tests.

Reviewed changes

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

Show a summary per file

File	Description
session-chat-actions.tsx	Conditionally hides new-chat controls.
session-chat-actions.test.tsx	Tests hidden controls and shortcut.
session-view/index.tsx	Implements exhausted-state rendering.
session-view/index.test.tsx	Tests exhausted and active-run states.
composer/style.module.css	Styles the warning strip.
composer/index.tsx	Adds the warning strip.
ai-credits-warning-strip.tsx	Implements the 90% warning.
ai-credits-warning-strip.test.tsx	Tests warning thresholds.
use-ai-credits-meter.ts	Exposes the combined credit meter.
use-ai-credits-meter.test.ts	Tests meter availability and values.

---

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

[wpmobilebot]

📊 Performance Test Results

Comparing 6e387be vs trunk

app-size

Metric	trunk	6e387be	Diff	Change
App Size (Mac)	1422.56 MB	1422.56 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	6e387be	Diff	Change
load	1194 ms	1204 ms	+10 ms	⚪ 0.0%

site-startup

Metric	trunk	6e387be	Diff	Change
siteCreation	7544 ms	7527 ms	17 ms	⚪ 0.0%
siteStartup	3371 ms	3368 ms	3 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

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