Agentic UI: Add toasts for notifications by katinthehatsite · Pull Request #4203 · Automattic/studio

katinthehatsite · 2026-07-15T13:30:18Z

Related issues

Related to STU-1984

How AI was used in this PR

It was used to analyse the proposal in explore-site-centric-conversation-chrome branch (commit 1d0b08c04) and adapt it as the first step for adding system notifications.

Proposed Changes

This PR introduces the toast notifications for when:

a site is stopped
a site is started
site settings are saved
preview is published
pull and push process
import finished

Dark mode

Light mode

Sidebar collapsed

Testing Instructions

Pull the changes from this branch
Start Studio with npm start
Enable the Agentic UI feature flag from Studio -> Feature flags from the topbar
Try starting a site
Confirm you can see the toast
Try the actions listed above in the PR description and confirm they trigger toast notifications
Confirm that notifications look good in light and dark modes
Confirm that they look correct when the sidebar is collapsed

Pre-merge Checklist

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

Copilot

Pull request overview

This PR adds an app-wide toast notification system to the Agentic UI (apps/ui) and wires it into key site lifecycle and sync flows, rendering the toasts in the sidebar footer (expanded) or as a floating shelf (collapsed).

Changes:

Introduces a module-level toast store (app-messages.ts) with queuing, timed expiry, and pause-on-hover behavior, plus unit tests.
Adds a new <AppToasts /> renderer component and mounts it via SidebarLayout for both expanded and collapsed sidebar modes.
Emits success/error toasts from react-query mutations for start/stop, settings save, preview publish, push/pull, and import completion.

Reviewed changes

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

Show a summary per file

File	Description
package-lock.json	Updates a package `bin` path entry (lockfile-only change).
apps/ui/src/data/queries/use-sync-site.ts	Adds push/pull success and error toasts.
apps/ui/src/data/queries/use-sites.ts	Adds toasts for copy/start/stop and settings save success.
apps/ui/src/data/queries/use-preview-site.ts	Adds preview publish success/error toasts.
apps/ui/src/data/queries/use-import-site.ts	Adds an “Import finished” success toast after import completes.
apps/ui/src/data/app-messages.ts	Implements the toast store (visibility cap, queueing, timers, hover pause/resume).
apps/ui/src/data/app-messages.test.ts	Adds vitest coverage for toast lifecycle, queue promotion, and timer behavior.
apps/ui/src/components/sidebar-layout/style.module.css	Adds layout styles for sidebar and floating toast placement.
apps/ui/src/components/sidebar-layout/index.tsx	Mounts `<AppToasts />` in expanded footer and collapsed floating position.
apps/ui/src/components/app-toasts/style.module.css	Adds toast stack/animation styling and theming overrides for Notice/Button.
apps/ui/src/components/app-toasts/index.tsx	Adds the toast renderer component (Notice-based UI, dismiss + optional action).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

wpmobilebot · 2026-07-15T14:04:16Z

📊 Performance Test Results

Comparing d09b9f3 vs trunk

app-size

Metric	trunk	`d09b9f3`	Diff	Change
App Size (Mac)	1352.92 MB	1352.96 MB	+0.04 MB	⚪ 0.0%

site-editor

Metric	trunk	`d09b9f3`	Diff	Change
load	1082 ms	1090 ms	+8 ms	⚪ 0.0%

site-startup

Metric	trunk	`d09b9f3`	Diff	Change
siteCreation	7012 ms	6995 ms	17 ms	⚪ 0.0%
siteStartup	2350 ms	2352 ms	+2 ms	⚪ 0.0%

Results are median values from multiple test runs.

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

bcotrim

Great work on this! 👍
Something I think we could improve, noticed during testing — while the "create a site" screen is open, the toast timers keep ticking, so users will likely miss them. I'm not sure the toasts should appear over that screen (my feeling is probably not), so the timers could pause while the toasts aren't rendered. If this requires a complex change, maybe we can skip it, but let's explore.

…otifications-agentic-ui

katinthehatsite · 2026-07-16T09:43:35Z

Something I think we could improve, noticed during testing — while the "create a site" screen is open, the toast timers keep ticking, so users will likely miss them. I'm not sure the toasts should appear over that screen (my feeling is probably not), so the timers could pause while the toasts aren't rendered. If this requires a complex change, maybe we can skip it, but let's explore.

It did not seem too complex so I added this suggestion, let me know what you think

bcotrim

Nice and simple solution, thanks for looking into it!
LGTM 👍

@katinthehatsite

## Related issues Related to STU-1984 Builds on #4203 (toast notifications), which landed separately. ## How AI was used in this PR The initial implementation is @katinthehatsite's work from the original branch. The follow-up work — addressing review findings, simplifying the dismissal plumbing, and merging trunk — was done with Claude Code and reviewed before pushing. ## Proposed Changes Adds **persistent message cards** to the Agentic UI sidebar. Unlike the toasts from #4203, which fade on their own, these stay until the user acts on them or dismisses them — for things the user needs to see even if they looked away. The first (and currently only) card tells the user when an **app update has been downloaded and is ready to install**: - The card appears in the sidebar footer with a **Restart now** button that installs the update immediately, instead of waiting for the user to happen to quit. - With the sidebar collapsed, a small dot on the sidebar toggle signals that a message is waiting. - Dismissing hides the card for the current session only. Persisting the dismissal isn't needed: restarting Studio installs the pending update, so the card's reason to exist is gone after any restart. If Studio stays open long enough for a *newer* version to download, the card comes back — dismissals are version-scoped. - Card content is derived at render time from the current update status, so nothing user-facing is stored and a locale change re-renders it translated. The card layer is deliberately generic (a list of messages filtered by dismissed ids), so future messages — onboarding checklists, announcements — can plug into it. If one of those ever needs a dismissal that outlives a restart, that's the point to add persisted storage for it. ## Testing Instructions The update card only appears when the auto-updater has actually downloaded an update, so fake it locally: 1. Run with the Agentic UI enabled: `ENABLE_AGENTIC_UI=true npm start` 2. At the top of `setupUpdates()` in `apps/studio/src/updates.ts`, add: ```ts updaterState = 'waiting-for-restart'; downloadedVersion = '99.9.9'; setTimeout( () => { downloadedVersion = '99.9.10'; void sendIpcEventToRenderer( 'app-update-status', buildAppUpdateStatus() ); }, 20_000 ); return; ``` Restart the app fully — this is main-process code, so hot reload won't pick it up. 3. Confirm the card **"Studio 99.9.9 is ready to install"** appears in the sidebar footer. 4. Dismiss it → it animates out and stays hidden. 5. Wait for the 20s mark → the `99.9.10` card appears, confirming both the live IPC push and that dismissals are version-scoped. 6. Collapse the sidebar while a card is active → a dot appears on the sidebar toggle button. 7. Click **Restart now** → the app quits (with a real update it relaunches into the new version). 8. Check the card in **both light and dark mode**. 9. Remove the fake before merging. ## Pre-merge Checklist - [ ] Have you checked for TypeScript, React or other console errors? - [ ] Verified in both light and dark mode --------- Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> Co-authored-by: bcotrim <bernardo.cotrim@a8c.com> Co-authored-by: Bernardo Cotrim <bmmcotrim@gmail.com>

Add toasts for notifications

e4fb8db

katinthehatsite self-assigned this Jul 15, 2026

katinthehatsite requested a review from Copilot July 15, 2026 13:30

Copilot started reviewing on behalf of katinthehatsite July 15, 2026 13:31 View session

Copilot AI reviewed Jul 15, 2026

View reviewed changes

Kateryna Kodonenko added 3 commits July 15, 2026 15:41

Clean up extra comments

64616c1

Further cleanup

f6c780b

Remove unrelated changes

d292266

katinthehatsite requested review from a team and bcotrim July 15, 2026 13:48

bcotrim reviewed Jul 15, 2026

View reviewed changes

Comment thread apps/ui/src/components/app-toasts/index.tsx

Comment thread apps/ui/src/data/queries/use-import-site.ts Outdated

Kateryna Kodonenko added 4 commits July 16, 2026 11:11

Merge branch 'trunk' of github.com:Automattic/studio into add/toast-n…

6730389

…otifications-agentic-ui

Pause timers on create site screen

908f432

Ensure we always render toast containers with aria live

0376613

Adjust mutation

d09b9f3

katinthehatsite requested a review from bcotrim July 16, 2026 09:43

bcotrim approved these changes Jul 16, 2026

View reviewed changes

bcotrim enabled auto-merge (squash) July 16, 2026 10:09

bcotrim merged commit 3d7df19 into trunk Jul 16, 2026
14 checks passed

bcotrim deleted the add/toast-notifications-agentic-ui branch July 16, 2026 10:11

bcotrim mentioned this pull request Jul 22, 2026

Agentic UI: add persistent notifications for updates #4204

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Agentic UI: Add toasts for notifications - #4203

Agentic UI: Add toasts for notifications#4203
bcotrim merged 8 commits into
trunkfrom
add/toast-notifications-agentic-ui

katinthehatsite commented Jul 15, 2026

Copilot AI left a comment

wpmobilebot commented Jul 15, 2026 •

edited

Loading

bcotrim left a comment

Uh oh!

Uh oh!

katinthehatsite commented Jul 16, 2026

bcotrim left a comment

Uh oh!

Labels

4 participants

Uh oh!

Conversation

katinthehatsite commented Jul 15, 2026

Related issues

How AI was used in this PR

Proposed Changes

Testing Instructions

Pre-merge Checklist

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

wpmobilebot commented Jul 15, 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

bcotrim left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

katinthehatsite commented Jul 16, 2026

bcotrim left a comment

Choose a reason for hiding this comment

Uh oh!

Labels

4 participants

wpmobilebot commented Jul 15, 2026 •

edited

Loading