Agentic UI: Make the agent's preview refresh drop the cache like the toolbar's does

[shaunandrews]

Related issues

• Related to STU-2160 — same symptom, different cause (that one is the agent not calling refresh_browser; this is the call not working).
• Follow-up to Agentic UI: Always clear the preview cache when reloading #4519, which fixed this for the toolbar button but not the agent's path.

How AI was used in this PR

Claude Code found the cause and wrote the fix and tests. Both behavior claims verified by stashing the component change and confirming the new tests fail without it.

Proposed Changes

Reported in Agentic UI testing: agent made changes, preview didn't update. Pressing ⟳ by hand worked.

• The preview had two reload paths. The toolbar's ⟳ drops the HTTP cache first; the agent's refresh_browser re-navigated with a warm cache, serving back the CSS/JS it had just edited.
• Both paths now use the cache-dropping reload. A refresh asking for the same url reloads in place; asking for a different one is still a plain navigation, so agent-driven navigation is unchanged.
• Desktop-only. The browser UI's preview is an iframe that remounts on refresh, so it already re-fetched. The Electron <webview> path had no test coverage.

Second fix, same area:

• The simulated-viewport emulation was applied on viewport change and never re-asserted. The CDP override lives on the guest's debugger session — if the guest goes away the override does too, while the "already applied" ref still says otherwise, so nothing restored it. A responsive preview would lay out at natural size inside a device-sized frame.
• Now re-asserted after each load. Fit-to-pane previews still make no emulation calls.

Testing Instructions

Run from a normal checkout, not a worktree — worktrees lack the untracked wp-files runtime assets, so sites won't start.

Refresh:

1. Start a site, open its preview in the agentic UI.
2. Ask the agent for a visible front-end change (e.g. "make the site background red").
3. When it calls Refresh preview, the change should appear without pressing ⟳. On trunk it doesn't.

Emulation:

4. More options → Desktop · 1440×900.
5. Ask for another visible change. It should refresh and stay at the simulated viewport.
6. Navigate around; the device frame should keep matching the page's layout width.

Regressions:

7. ⟳ and ⌘R still work; wp-admin still auto-logs in after a refresh (cache clear must not drop cookies).
8. Front end ↔ WP Admin ↔ Database switching lands on the right page.
9. Clicking links in the preview doesn't double-load or bounce back.

Pre-merge Checklist

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

---

• 41 tests pass in the site-preview suite (4 new), ESLint clean, zero tsc errors in both changed files.
• Pre-existing and unrelated, both reproduce with these changes stashed: repo-wide npm run typecheck fails on AI-credits breakage (allowanceRemaining, ADD_AI_CREDITS_URL) in untouched files, and use-app-menu-navigation.test.tsx fails to collect because @wp-playground/blueprints/blueprint-schema-validator isn't installed in this worktree.
• No visual change — reload behavior only, nothing to check in light vs. dark.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Updates Electron previews so agent-triggered refreshes clear cached assets while preserving navigation behavior and responsive emulation.

Changes:

• Routes same-URL agent refreshes through the cache-clearing reload path.
• Reapplies simulated viewport settings after every webview load.
• Adds Electron webview regression tests.

Reviewed changes

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

File	Description
apps/ui/src/components/site-preview/index.tsx	Unifies refresh behavior and restores viewport emulation per load.
apps/ui/src/components/site-preview/index.test.tsx	Tests refresh, navigation, and responsive emulation behavior.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.