Agentic UI: add persistent notifications for updates by katinthehatsite · Pull Request #4204 · Automattic/studio

katinthehatsite · 2026-07-15T14:13:33Z

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:

Run with the Agentic UI enabled: ENABLE_AGENTIC_UI=true npm start

At the top of setupUpdates() in apps/studio/src/updates.ts, add:

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.

Confirm the card "Studio 99.9.9 is ready to install" appears in the sidebar footer.
Dismiss it → it animates out and stays hidden.
Wait for the 20s mark → the 99.9.10 card appears, confirming both the live IPC push and that dismissals are version-scoped.
Collapse the sidebar while a card is active → a dot appears on the sidebar toggle button.
Click Restart now → the app quits (with a real update it relaunches into the new version).
Check the card in both light and dark mode.
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

wpmobilebot · 2026-07-15T14:30:51Z

📊 Performance Test Results

Comparing f403302 vs trunk

app-size

Metric	trunk	`f403302`	Diff	Change
App Size (Mac)	1362.04 MB	1362.05 MB	+0.01 MB	⚪ 0.0%

site-editor

Metric	trunk	`f403302`	Diff	Change
load	1107 ms	1076 ms	31 ms	⚪ 0.0%

site-startup

Metric	trunk	`f403302`	Diff	Change
siteCreation	6492 ms	6472 ms	20 ms	⚪ 0.0%
siteStartup	2388 ms	2388 ms	0 ms	⚪ 0.0%

Results are median values from multiple test runs.

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

…-update-notification # Conflicts: # apps/studio/src/ipc-handlers.ts # apps/studio/src/preload.ts # apps/studio/src/storage/storage-types.ts # apps/studio/src/storage/user-data.ts # apps/ui/src/components/app-toasts/index.tsx # apps/ui/src/components/sidebar-layout/index.tsx # apps/ui/src/components/sidebar-layout/style.module.css # apps/ui/src/data/app-messages.test.ts # apps/ui/src/data/app-messages.ts # apps/ui/src/data/core/connectors/hosted/index.ts # apps/ui/src/data/core/connectors/ipc/index.ts # apps/ui/src/data/core/connectors/local/index.ts # apps/ui/src/data/core/types.ts # apps/ui/src/data/queries/use-import-site.ts

…ate handlers async

…-update-notification # Conflicts: # apps/ui/src/app/app-providers.tsx

…-update-notification # Conflicts: # apps/ui/src/data/core/index.ts

nightnei

The animation is not smoth, feels like it gets stuck before disappearing
https://github.com/user-attachments/assets/6c10caf4-f730-41c1-b6bb-6a1071a5ffbd

nightnei · 2026-07-23T15:29:01Z

+	autoUpdater.on( 'update-downloaded', async ( _event, releaseNotes, releaseName ) => {
 		updaterState = 'waiting-for-restart';
-		console.log( 'Update has been downloaded' );
+		downloadedVersion = typeof releaseName === 'string' && releaseName ? releaseName : null;


If it's string, then I don't think we need to check for existance:

Suggested change

downloadedVersion = typeof releaseName === 'string' && releaseName ? releaseName : null;

downloadedVersion = typeof releaseName === 'string' ? releaseName : null;

Moreover, we use it just for console.log, then probably tehre is no reason to use extra dewnloadedVersion variable at all. Also, do we need this console.log?

nightnei · 2026-07-23T15:39:31Z

+		},
+
+		onAppUpdateStatusChanged( listener ) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any


Propose creating a Linear issue (or addressing it here) to declare it globally, similar to what we have for Studio Classic - https://github.com/Automattic/studio/blob/trunk/apps/studio/src/preload.ts#L252-L258

…nd ipcListener access

…them

…-update-notification # Conflicts: # apps/ui/src/components/sidebar-layout/index.tsx

nightnei

Thanks, works great 👍

Kateryna Kodonenko added 5 commits July 15, 2026 15:25

Add toasts for notifications

e4fb8db

Clean up extra comments

64616c1

Further cleanup

f6c780b

Remove unrelated changes

d292266

First pass at persistent cards

79af74d

katinthehatsite self-assigned this Jul 15, 2026

katinthehatsite marked this pull request as draft July 15, 2026 14:13

katinthehatsite changed the base branch from trunk to add/toast-notifications-agentic-ui July 15, 2026 14:13

Base automatically changed from add/toast-notifications-agentic-ui to trunk July 16, 2026 10:11

bcotrim added 5 commits July 20, 2026 12:11

Address review: remove dead card CSS, lock dismissal writes, make upd��

9865567

…ate handlers async

Simplify dismissal and install-update plumbing

f06298e

Merge remote-tracking branch 'origin/trunk' into add/persistent-cards…

1c7537a

…-update-notification # Conflicts: # apps/ui/src/app/app-providers.tsx

Make update-card dismissal session-only, drop persistence layer

69de1af

bcotrim requested review from nightnei and sejas July 22, 2026 08:47

bcotrim marked this pull request as ready for review July 22, 2026 08:47

bcotrim and others added 2 commits July 22, 2026 09:47

Merge branch 'trunk' into add/persistent-cards-update-notification

e73cccb

Merge remote-tracking branch 'origin/trunk' into add/persistent-cards…

11e9cf8

…-update-notification # Conflicts: # apps/ui/src/data/core/index.ts

nightnei reviewed Jul 23, 2026

View reviewed changes

bcotrim added 3 commits July 23, 2026 17:21

Address review: fix card exit animation, simplify releaseName check a…

c7a937c

…nd ipcListener access

Render toasts above persistent cards so transient toasts don't shift …

aef7e7f

…them

Merge remote-tracking branch 'origin/trunk' into add/persistent-cards…

f403302

…-update-notification # Conflicts: # apps/ui/src/components/sidebar-layout/index.tsx

nightnei approved these changes Jul 23, 2026

View reviewed changes

bcotrim enabled auto-merge (squash) July 23, 2026 16:39

bcotrim merged commit c385a48 into trunk Jul 23, 2026
13 checks passed

bcotrim deleted the add/persistent-cards-update-notification branch July 23, 2026 19:31

bcotrim mentioned this pull request Jul 24, 2026

Agentic UI: Add a first-run orientation guide #4331

Draft

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Agentic UI: add persistent notifications for updates - #4204

Agentic UI: add persistent notifications for updates#4204
bcotrim merged 15 commits into
trunkfrom
add/persistent-cards-update-notification

katinthehatsite commented Jul 15, 2026 •

edited by bcotrim

Loading

wpmobilebot commented Jul 15, 2026 •

edited

Loading

nightnei left a comment

nightnei Jul 23, 2026

nightnei Jul 23, 2026

nightnei Jul 23, 2026 •

edited

Loading

nightnei left a comment •

edited

Loading

Uh oh!

Labels

4 participants

	downloadedVersion = typeof releaseName === 'string' && releaseName ? releaseName : null;
	downloadedVersion = typeof releaseName === 'string' ? releaseName : null;

Uh oh!

Conversation

katinthehatsite commented Jul 15, 2026 • edited by bcotrim 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 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

nightnei left a comment

Choose a reason for hiding this comment

nightnei Jul 23, 2026

Choose a reason for hiding this comment

nightnei Jul 23, 2026

Choose a reason for hiding this comment

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

Uh oh!

Choose a reason for hiding this comment

nightnei 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

4 participants

katinthehatsite commented Jul 15, 2026 •

edited by bcotrim

Loading

wpmobilebot commented Jul 15, 2026 •

edited

Loading

nightnei Jul 23, 2026 •

edited

Loading

nightnei left a comment •

edited

Loading