Agentic UI: Improve site menu button and dropdown contrast

[bcotrim]

Related issues

• Fixes STU-1989
• Design reference: Agentic UI: Design Preview #3975 (explore-site-centric-conversation-chrome)

How AI was used in this PR

Implemented with Claude Code: ported the site-menu trigger/dropdown styling from the design-preview branch onto trunk (resolving overlap with #4191), and verified light/dark rendering in a browser harness before manual review. All changes were reviewed and visually tested by the author.

Proposed Changes

The site menu trigger (the button showing the site name/status that opens publish/preview/settings) sat on a near-transparent background, so it was easy to miss and didn't read as clickable. Its content also changed with sidebar state, since the site icon only appeared when the sidebar was collapsed.

• The trigger now uses an inverted, solid fill that always contrasts with the surrounding panel — dark-on-light in light mode, light-on-dark in dark mode — using theme-adaptive --wpds-color-*-interactive-neutral-strong tokens.
• The dropdown opens on the same inverted surface, so the button and its menu read as one connected control. The menu's wpds tokens are remapped locally, letting the existing row styles (labels, dividers, hover/disabled states) adapt without per-element overrides.
• The site icon is always visible, so the button looks the same whether the sidebar is expanded or collapsed. The running/stopped status dot overlays the icon's corner and only shows when the sidebar is collapsed — the expanded sidebar already shows status.
• The start/stop toggle now follows the menu surface. It previously keyed some colors off the OS color scheme, which landed backwards on the inverted surface (invisible thumb in dark mode).
• New floating prop on the trigger controls the drop shadow: on for overlay placements (chat header), available to turn off for in-flow header rows.

Note: The actions from the menu are out of scope for this PR, my goal is to address the layout of the menu only.

Light	Dark

Testing Instructions

1. Enable the Agentic UI beta and open a site.
2. Check the site menu button in the chat header and in site settings: solid fill, site icon always visible, status dot on the icon corner only when the sidebar is collapsed.
3. Open the dropdown: it should share the button's surface, with legible rows and a working start/stop toggle (running/stopped/stopping states).
4. Repeat all of the above in light and dark mode.

Pre-merge Checklist

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

[wpmobilebot]

📊 Performance Test Results

Comparing 87cbcd7 vs trunk

app-size

Metric	trunk	87cbcd7	Diff	Change
App Size (Mac)	1353.02 MB	1353.02 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	87cbcd7	Diff	Change
load	1085 ms	1117 ms	+32 ms	⚪ 0.0%

site-startup

Metric	trunk	87cbcd7	Diff	Change
siteCreation	6488 ms	6521 ms	+33 ms	⚪ 0.0%
siteStartup	2391 ms	2403 ms	+12 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

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

[katinthehatsite]

I think the changes look fine 👍 I don't see any specific regressions

My personal preference is to keep the dark switcher in dark mode and light switcher in the light mode but if that's the design direction, then it is fine by me