Agentic UI: Make sidebar notices legible and add a recent notifications dialog

[shaunandrews]

Related issues

• Related to STU-2415

How AI was used in this PR

Built with Claude Code, iterating in a running studio ui against a temporary tweaks panel that simulated notices of every intent and length (including a 300-line stack trace). That panel is not part of this PR. Every visual state below was reviewed in light and dark; the diff, copy, and tests were reviewed by hand.

Proposed Changes

A few problems this tries to solve:

• Notices are hard to see, with dark colors on the dark sidebar surface.
• Notice content can be incredibly long, like with errors, and break the layout.
• Once notices disappear, there's no way to find them again.

Solutions:

• Notices in the sidebar are now shown using colors, and with the light context; this gives them much more contrast when showing.
• Notices in the sidebar truncate their content, and offer buttons for Copy and More. Copy puts the content of the notice in your clipboard, making it easy to paste to the agent. More opens a new Notifications modal.
• A new Notifications Modal tracks notices during your session, giving you a place to see recent notices and scroll through longer errors.

Light	Dark

Long errors no longer swallow the UI. A toast description now clamps to three lines. Error toasts that carry details gain Copy (title plus the full text, for pasting into a bug report) and More, which opens a new Recent notifications dialog from the bell beside App settings.

The dialog is a session log, not a persisted inbox: everything Studio has shown you, newest first, with the full text of each notice, a timestamp, and a per-entry Copy. A single entry scrolls internally past roughly a dozen lines, so one enormous stack trace cannot push the rest off screen. Clear all empties the list and dismisses the toasts still showing or queued, so the sidebar agrees with the dialog. With nothing to show it presents an empty state rather than an empty list, and Clear all is not offered.

Light	Dark

One 300-line stack trace scrolls inside its own entry rather than pushing the rest of the list away, and the empty state stands in for an empty list.

Huge error	Empty state (light)	Empty state (dark)

Testing Instructions

Run the agentic UI (npm run cli:build:ui && node apps/cli/dist/cli/main.mjs ui --no-open) or the Desktop app, in both light and dark.

1. Trigger notices of each kind: copy a site URL (success), start a site (info), and provoke a failure such as opening a terminal that isn't installed (error). Confirm they are readable against the sidebar and carry their intent color.
2. On an error toast with details, confirm Retry / Copy / More appear together and that Copy puts title plus full text on the clipboard.
3. Click More, or the bell beside App settings, and confirm the dialog lists the notices newest first with full text and timestamps.
4. Provoke or simulate a very long error and confirm the toast clamps to three lines while the dialog entry scrolls inside itself.
5. Press Clear all and confirm both the dialog and the sidebar empty, and that the empty state appears with no Clear all button.
6. Collapse the sidebar and confirm the bell is unavailable but More on a floating toast still opens the dialog.

Pre-merge Checklist

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

[wojtekn]

@shaunandrews see #4808 with proposed changes.

[wpmobilebot]

📊 Performance Test Results

Comparing 2fb5f9c vs trunk

app-size

Metric	trunk	2fb5f9c	Diff	Change
App Size (Mac)	1456.54 MB	1456.58 MB	+0.04 MB	⚪ 0.0%

site-editor

Metric	trunk	2fb5f9c	Diff	Change
load	1172 ms	1185 ms	+13 ms	⚪ 0.0%

site-startup

Metric	trunk	2fb5f9c	Diff	Change
siteCreation	7519 ms	7530 ms	+11 ms	⚪ 0.0%
siteStartup	3369 ms	3371 ms	+2 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

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