Skip to content

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

Merged
gcsecsey merged 8 commits into
trunkfrom
gcsecsey/composer-credit-warning-states
Sep 9, 2026
Merged

gcsecsey merged 8 commits into
trunkfrom
gcsecsey/composer-credit-warning-states

Conversation

@gcsecsey

@gcsecsey gcsecsey commented Aug 28, 2026 •

Copy link
Copy Markdown
Member

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.

  • 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.
CleanShot 2026-08-28 at 17 55 11@2x

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

RTL dark RTL light narrow window
CleanShot 2026-08-28 at 17 55 55@2x CleanShot 2026-08-28 at 17 56 28@2x

Pre-merge Checklist

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

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
gcsecsey requested a review from a team August 28, 2026 16:57
@gcsecsey
gcsecsey marked this pull request as ready for review August 28, 2026 16:57
@wpmobilebot

wpmobilebot commented Aug 28, 2026 •

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing 2269039 vs trunk

app-size

Metric trunk 2269039 Diff Change
App Size (Mac) 1456.52 MB 1456.53 MB +0.00 MB ⚪ 0.0%

site-editor

Metric trunk 2269039 Diff Change
load 1195 ms 1199 ms +4 ms ⚪ 0.0%

site-startup

Metric trunk 2269039 Diff Change
siteCreation 7504 ms 7542 ms +38 ms ⚪ 0.0%
siteStartup 3372 ms 3377 ms +5 ms ⚪ 0.0%

Results are median values from multiple test runs.

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

…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
@gcsecsey

gcsecsey commented Sep 9, 2026

Copy link
Copy Markdown
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
gcsecsey merged commit 5c91752 into trunk Sep 9, 2026
13 checks passed
@gcsecsey
gcsecsey deleted the gcsecsey/composer-credit-warning-states branch September 9, 2026 12:22
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?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants