Repository navigation
Agentic UI: Warn in the composer at 90% AI credit usage and complete the exhausted state - #4714
Merged
Merged
Conversation
…the exhausted state
Contributor
There was a problem hiding this comment.
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.
gcsecsey
marked this pull request as ready for review
August 28, 2026 16:57
…-states' into gcsecsey/composer-credit-warning-states
Collaborator
📊 Performance Test ResultsComparing 2269039 vs trunk app-size
site-editor
site-startup
Results are median values from multiple test runs. Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff) |
1 task done
…edit-warning-states # Conflicts: # apps/ui/src/ui-classic/components/session-view/composer/index.tsx
…edit-warning-states # Conflicts: # apps/ui/src/ui-classic/components/session-view/composer/style.module.css
…ecsey/composer-credit-warning-states
Member
Author
|
This was tested and approved by @shaunandrews as part of #4722. I'm going ahead with merging these, and happy to follow up with any changes if needed. |
gcsecsey
added a commit
that referenced
this pull request
Sep 9, 2026
…mposer (#4722) ## Related issues - Related to STU-2338 — this is the usage-notice half. The purchase confirmation is in #4745. - Stacked on #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% | <img width="590" height="360" alt="CleanShot 2026-09-02 at 16 45 13@2x" src="https://github.com/user-attachments/assets/6a5324e6-e27e-4ef1-98a2-85513017846d" /> | same as light | | Above 90% | <img width="1414" height="354" alt="CleanShot 2026-09-02 at 16 49 19@2x" src="https://github.com/user-attachments/assets/86800fc1-e38e-4337-99b6-58f7fcb7ebe3" /> | <img width="1414" height="354" alt="CleanShot 2026-09-02 at 16 49 10@2x" src="https://github.com/user-attachments/assets/e60efd99-2900-4e9f-a6fc-f50b1fd8d567" /> | Classic: | Usage | Light | Dark | |--------|--------|-----| | Above 80% | <img width="1552" height="508" alt="CleanShot 2026-09-02 at 16 45 29@2x" src="https://github.com/user-attachments/assets/e2df92fc-8fc7-4ce1-87ac-e7d3643ef740" /> | <img width="1552" height="508" alt="CleanShot 2026-09-02 at 16 45 38@2x" src="https://github.com/user-attachments/assets/fd92d019-b6c6-44ce-8ebf-ac0f76f7ed18" /> | | Above 90% | <img width="779" height="252" alt="image" src="https://github.com/user-attachments/assets/bc796d35-f54d-4e24-bc4c-b9c2276464a0" /> | <img width="779" height="252" alt="image" src="https://github.com/user-attachments/assets/26f74278-3b48-47fa-924b-2e3ff1e7f7c3" /> | ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors?
1 task done
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related issues
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.
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:
CleanShot.2026-08-28.at.17.52.20.mp4
Check both color schemes, a narrow window, and an RTL locale such as Arabic.
Pre-merge Checklist