Refine empty-chat suggestions and W interactions

[shaunandrews]

Related issues

• No linked issue

How AI was used in this PR

Codex was used to iterate on the empty-state visual treatment, implement the interaction and accessibility behavior, add focused tests, and verify the result in an isolated UI environment. The final behavior and visual direction were reviewed interactively.

Proposed Changes

• Make the pixelated W dissolve into a stronger, progressive downward blur without leaking beyond the empty-state canvas.
• Present the seven starter ideas as compact WordPress UI buttons with a glass treatment, connected chat-bubble radii, distinct conversational tooltips, and theme-blue hover borders.
• Keep the W responsive to pointer movement while the pointer is over the suggestion buttons.
• Draw attention to the composer with a quick scale-up, move, and fade treatment when an idea is selected.
• Respect prefers-reduced-motion by skipping the transfer animation and prefers-reduced-transparency by replacing blur/translucency with solid surfaces.

Review guide

Please focus on:

• Whether the blur feels directional and dramatic without obscuring too much of the W.
• Whether the suggestion-button density, tooltip copy, and hover state feel native to the agentic UI.
• Whether the transfer animation is quick enough to guide attention without delaying input.
• Light and dark color schemes, plus Reduced Motion and Reduce Transparency system settings.

This is a localized empty-state UI change. It does not add persistence, migrations, API calls, or changes to Studio user data.

Screenshots

Light

Dark

Suggestion transfer in action

Testing Instructions

1. Build and launch the agentic UI:

   npm run cli:build:ui
   node apps/cli/dist/cli/main.mjs ui --no-open

2. Open a new empty chat in both light and dark color schemes.
3. Move the pointer over the W and across the suggestion buttons; confirm the W keeps reacting.
4. Hover all seven buttons; confirm each tooltip is unique and punctuation-free.
5. Select a suggestion and confirm it scales up, moves toward the composer, fades, and populates the draft.
6. Enable Reduced Motion and confirm selection populates the composer without the transfer animation.
7. Enable Reduce Transparency and confirm the frost disappears and the buttons use solid backgrounds.

Automated verification completed:

• npx eslint --fix on all five modified code files
• npm run typecheck
• npm test -- apps/ui/src/ui-classic/components/session-view/suggested-prompts/index.test.tsx apps/ui/src/ui-classic/components/session-view/empty-background/index.test.tsx (14 tests)
• npm run cli:build:ui
• Manual light, dark, and in-motion visual checks in an isolated preview

⚠️ Visual change: please review in light and dark mode.

Pre-merge Checklist

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

[wpmobilebot]

📊 Performance Test Results

Comparing 3692770 vs trunk

app-size

Metric	trunk	3692770	Diff	Change
App Size (Mac)	1372.96 MB	1372.97 MB	+0.01 MB	⚪ 0.0%

site-editor

Metric	trunk	3692770	Diff	Change
load	1044 ms	1054 ms	+10 ms	⚪ 0.0%

site-startup

Metric	trunk	3692770	Diff	Change
siteCreation	6605 ms	7010 ms	+405 ms	🔴 6.1%
siteStartup	2389 ms	2368 ms	21 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

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