Agentic UI: Add Usage tab by bcotrim · Pull Request #4286 · Automattic/studio

bcotrim · 2026-07-21T16:58:57Z

Related issues

Related to STU-1882

How AI was used in this PR

Implemented with Claude Code (connector contract, queries, panel UI, and tests), following the patterns established in #3979 and reviewed by the author.

Proposed Changes

Adds a Usage tab to the agentic UI settings so users can see what they're consuming without leaving Studio:

An AI credits section explaining credits are free while Studio Code is in Alpha, with a full placeholder meter.
A Preview sites section showing "N of M active preview sites" with a progress bar, backed by the WordPress.com usage endpoint (with a fallback to counting local snapshots when usage isn't available). An overflow menu offers Delete all preview sites, guarded by a native confirmation dialog, with an inline error if deletion fails.
The delete action is disabled when there's nothing to delete, while loading, when the account can't create previews, or when offline (the menu label explains the offline case).
Signed-out users see a prompt to log in to view their usage.

Testing Instructions

Enable the agentic UI and open Settings → Usage.
Signed out: verify the "Log in to view preview site usage for your account." prompt and that the Log in button starts the OAuth flow.
Signed in with preview sites: verify the "N of M active preview sites" count and progress bar match studio preview list.
Open the ⋯ menu → Delete all preview sites → verify the native warning dialog; cancel leaves everything untouched, confirming deletes all previews and the meter drops to 0.
With 0 preview sites (or offline via Network Link Conditioner / Wi-Fi off): verify the menu action is disabled; when offline the label explains why.
Check the tab in both light and dark mode.

Pre-merge Checklist

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

wpmobilebot · 2026-07-21T17:14:59Z

📊 Performance Test Results

Comparing e2b0415 vs trunk

app-size

Metric	trunk	`e2b0415`	Diff	Change
App Size (Mac)	1361.96 MB	1361.97 MB	+0.01 MB	⚪ 0.0%

site-editor

Metric	trunk	`e2b0415`	Diff	Change
load	791 ms	1074 ms	+283 ms	🔴 35.8%

site-startup

Metric	trunk	`e2b0415`	Diff	Change
siteCreation	6508 ms	6506 ms	2 ms	⚪ 0.0%
siteStartup	2385 ms	2391 ms	+6 ms	⚪ 0.0%

Results are median values from multiple test runs.

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

…ge-tab # Conflicts: # apps/ui/src/components/settings-view/index.tsx # apps/ui/src/components/settings-view/style.module.css # apps/ui/src/data/core/connectors/ipc/index.ts # apps/ui/src/data/core/types.ts # apps/ui/src/hooks/use-offline.ts

… refetch

…udio into agentic-settings-usage-tab

…ge-tab # Conflicts: # apps/ui/src/components/settings-view/index.tsx

sejas

Thanks for adding the Usage tab and fixing the delete all preview sites. It works well.
I added a suggestion related to Offline mode and the Preview site action menu.
I also created a PR against this PR to add the AI credits usage bar which we already have in the classic UI. #4296

sejas · 2026-07-22T10:18:50Z

+					<p>
+						{ __(
+							'AI credits are currently free while Studio Code is in Alpha. Build, iterate, and experiment, but know that credits will eventually have a cost.'
+						) }
+					</p>


Actually, we already have AI usage progress bar in the Classic UI.

I created the PR to add it to the Agentic UI #4296 , we can merge it to this branch or as a follow-up to trunk.

sejas · 2026-07-22T10:52:15Z

+
+function getDeletePreviewSitesLabel( isOffline: boolean, isDeleting: boolean ): string {
+	if ( isOffline ) {
+		return __( 'Deleting preview sites requires an internet connection.' );


This will rarely be displayed. We can consider not disabling the Action button (...) when is offline so users will be able to open the dropdown menu and see the message.

) ## Related issues - Related to the agentic Settings Usage tab work on `agentic-settings-usage-tab` ## How AI was used in this PR AI assisted with porting the quota logic from the legacy settings panel and with automated review passes (simplification + code review); all changes were verified with typecheck, lint, and unit tests. ## Proposed Changes - Add AI Usage progress bar to Usage tab ## Testing Instructions 1. `npm start` with the agentic UI enabled and log in to a WordPress.com account that has a Studio Code cost cap. 2. Open Settings → Usage: the AI credits section should show "X% of monthly limit used (resets on DATE)" with a progress bar reflecting the percentage. 3. Go offline (e.g. disable network): the section should show "You're currently offline". 5. Verify the legacy settings dialog (classic UI → Settings) still shows the same quota line — it now reads the schema from the shared module. | Before | After | |--------|--------| | <img width="1431" height="925" alt="Screenshot 2026-07-22 at 11 15 26" src="https://github.com/user-attachments/assets/c7242431-4cf9-4738-bde3-30d12bbf378a" /> | <img width="1431" height="925" alt="Screenshot 2026-07-22 at 11 48 10" src="https://github.com/user-attachments/assets/12ca74c1-6e3c-4574-9d05-6ab03f94baa0" /> | ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors?

…ailable figures

bcotrim · 2026-07-22T14:49:59Z

@sejas thanks for the review and for handling the usage PR! 🙇
I merged your PR into this branch, and I've made some adjustments (logged-out and offline users)
Can you take another look, please?

…ge-tab # Conflicts: # apps/ui/src/components/settings-view/index.tsx

sejas

@bcotrim Looks good! A final comment is the Loading state between AI Credits and preview sites. The first one doesn't display the progress bar while the second it does. Let's make both consistent. You can reproduce it by pressing cmd+r in the usage tab.

Online	Offline	Logged out

Add Usage tab with preview-site quota and delete-all to agentic settings

2dc63af

github-actions Bot assigned bcotrim Jul 21, 2026

bcotrim marked this pull request as draft July 21, 2026 17:00

bcotrim changed the title ~~Agentic UI: Add Usage tab with preview-site quota and delete-all action~~ Jul 22, 2026

Replace nested ternary with helper for delete-preview-sites label

6dfc351

bcotrim marked this pull request as ready for review July 22, 2026 09:05

Merge branch 'trunk' into agentic-settings-usage-tab

9e7f6ca

bcotrim requested review from nightnei and sejas July 22, 2026 09:12

bcotrim added 3 commits July 22, 2026 11:22

Keep optimistic zero after delete-all instead of racing a stale usage…

562a4ac

… refetch

Merge branch 'agentic-settings-usage-tab' of github.com:Automattic/st…

b9511ac

…udio into agentic-settings-usage-tab

Merge remote-tracking branch 'origin/trunk' into agentic-settings-usa…

f745456

…ge-tab # Conflicts: # apps/ui/src/components/settings-view/index.tsx

sejas reviewed Jul 22, 2026

View reviewed changes

sejas and others added 7 commits July 22, 2026 14:14

Warn once when offline in the Usage tab and share the quota formatters

d45228e

Reuse the app sign-in and offline banners in the Usage tab

3c26b8f

Move the Usage banner above the card and use disabled colors for unav…

a1260c5

…ailable figures

Grey the whole Usage card and hatch unavailable meters

c10e9a6

Soften the hatch on unavailable usage meters

bd3c68b

Hide usage figures while offline instead of showing stale numbers

c78c48a

bcotrim requested a review from sejas July 22, 2026 14:50

Merge remote-tracking branch 'origin/trunk' into agentic-settings-usa…

a28f998

…ge-tab # Conflicts: # apps/ui/src/components/settings-view/index.tsx

sejas approved these changes Jul 22, 2026

View reviewed changes

bcotrim added 2 commits July 22, 2026 17:55

Show a progress bar in both usage sections while loading

bf80539

Empty the preview sites bar while usage is loading

e2b0415

bcotrim enabled auto-merge (squash) July 22, 2026 17:10

bcotrim merged commit 9aa1fc0 into trunk Jul 22, 2026
13 checks passed

bcotrim deleted the agentic-settings-usage-tab branch July 22, 2026 17:37

bcotrim mentioned this pull request Jul 24, 2026

Agentic UI: Application Settings #3979

Closed

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Agentic UI: Add Usage tab - #4286

Agentic UI: Add Usage tab#4286
bcotrim merged 17 commits into
trunkfrom
agentic-settings-usage-tab

bcotrim commented Jul 21, 2026 •

edited

Loading

wpmobilebot commented Jul 21, 2026 •

edited

Loading

sejas left a comment

sejas Jul 22, 2026

sejas Jul 22, 2026

sejas Jul 22, 2026

bcotrim commented Jul 22, 2026

sejas left a comment •

edited

Loading

Uh oh!

Labels

3 participants

Uh oh!

Conversation

bcotrim commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

How AI was used in this PR

Proposed Changes

Testing Instructions

Pre-merge Checklist

wpmobilebot commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

app-size

site-editor

site-startup

sejas left a comment

Choose a reason for hiding this comment

sejas Jul 22, 2026

Choose a reason for hiding this comment

sejas Jul 22, 2026

Choose a reason for hiding this comment

sejas Jul 22, 2026

Choose a reason for hiding this comment

bcotrim commented Jul 22, 2026

sejas left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Labels

3 participants

bcotrim commented Jul 21, 2026 •

edited

Loading

wpmobilebot commented Jul 21, 2026 •

edited

Loading

sejas left a comment •

edited

Loading