Agentic UI: Let the app window shrink to 420px

[shaunandrews]

The Agentic UI can work as a compact, chat-focused companion alongside a browser or editor, but Studio previously enforced the Classic UI’s 712px minimum window width in both modes.

This PR gives each UI mode its own minimum width:

• Agentic UI windows can shrink to 420px.
• Classic UI windows retain their existing 712px minimum.
• When switching from Agentic UI back to Classic UI, Studio widens the window if it is below the Classic UI minimum.
• Saved window bounds are validated against the minimum width of the active UI mode.

At narrow widths, Studio now manages the surrounding panels instead of squeezing them into unusable layouts:

• The sidebar automatically collapses below 660px, preserving a useful chat width.
• The sidebar retains its 240px minimum width, so site names remain distinguishable.
• Opening the sidebar from a compact window grows the window to the minimum width needed for both the sidebar and chat.
• An open split preview closes when the available frame becomes narrower than the preview and chat minimums.
• Opening the preview from a compact window grows the window by the space required for a usable split. This calculation accounts for an open sidebar.
• Empty-chat suggestions move upward at short window heights so they remain visible above the composer.

The 420px minimum is therefore a chat-first layout, while opening the sidebar or preview automatically restores enough window space for those panels to remain useful. Browser-hosted versions keep their existing behavior because native window resizing only applies to the Electron app.

Testing Instructions

Compact chat

1. Launch Studio using the Agentic UI with the sidebar and preview visible.
2. Resize the window narrower.
3. Confirm that:
   • The preview closes when its frame becomes too narrow to preserve both the chat and preview minimums.
   • The sidebar collapses when the window crosses below 660px.
   • The window can shrink to 420px, but not below it.
   • Chat remains usable at 420px.
4. Create or open an empty chat at the minimum window height.
5. Confirm that all suggested prompts remain above the composer without being clipped or hidden behind it.
6. Repeat the empty-chat check in both light and dark color schemes.

Reopening panels

1. With the window at 420px and both panels closed, open the sidebar.
2. Confirm that:
   • The window grows to at least 660px.
   • The sidebar opens at a readable width.
   • Similar site names remain distinguishable rather than being reduced to their first few characters.
3. Close the sidebar and return the window to 420px.
4. Open the preview.
5. Confirm that the window grows enough to show a usable chat and preview split.
6. Close the preview, open the sidebar, and then open the preview.
7. Confirm that the window grows further to accommodate the sidebar, chat, and preview together.
8. Repeat the sidebar → preview sequence several times and confirm that every panel-open action reliably resizes the window.

Resizing with panels open

1. With the preview open, drag the window narrower.
2. Confirm that the preview closes once its frame becomes too narrow.
3. Confirm that Studio does not fight the resize by immediately growing the window again.
4. Continue resizing to 420px and confirm that the sidebar collapses as expected.

UI mode and persistence

1. Switch to the Classic UI while the window is narrower than 712px.
2. Confirm that the window grows to at least 712px and cannot be resized below that width.
3. Switch back to the Agentic UI and confirm that the 420px minimum is restored.
4. Restart Studio with each UI mode active and confirm that saved window bounds respect that mode’s minimum width.
5. Check for TypeScript, React, IPC, or other console errors while opening panels, switching modes, and resizing the window.

[katinthehatsite]

I had two main concerns:

• when I resize to the smallest possible window with agentic UI, the toolbar looks all messed up if I close the sidebar and remain within the smallest size (see for example, the buttons to open the browser etc.)

I think that it could be one of those:

• The preview should auto-close below some width threshold

• Or the minimum width should account for the preview being open

• I am also finding the that the sidebar in the min-width is not really informative - for example, two similarly named sites get hard to distinguish e.g. My Swift Site and My WordPress site. In that case, it just shows the first two letters:

But I am also generally wondering how useful this small sized window would be for our customers? What do you think?

[katinthehatsite]

As a sidenote, it seems that the PR testing instructions are not related to the code changes? 😅

[shaunandrews]

How embarrassing; sorry about the slop. I must have copy/pasted the description for the wrong issue! I'll update and fix.

--

Solid feedback. I'll tweak some more, probably hiding panels automatically at the smaller sizes.

how useful this small sized window would be for our customers?

The use-case is shrinking Studio down to just it's chat; perhaps alongside the users normal browser.

[shaunandrews]

Ok, I've worked up some changes (both in the code, and the description here) and now the app manages the window panels at small sizes. If you shrink down it closes the preview and sidebar at logical sizes, and if you try to open a panel at a small size, the app will resize the window to make room for the new panel.

[wpmobilebot]

📊 Performance Test Results

Comparing 9d12225 vs trunk

app-size

Metric	trunk	9d12225	Diff	Change
App Size (Mac)	1402.95 MB	1402.95 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	9d12225	Diff	Change
load	1102 ms	1084 ms	18 ms	⚪ 0.0%

site-startup

Metric	trunk	9d12225	Diff	Change
siteCreation	7520 ms	7510 ms	10 ms	⚪ 0.0%
siteStartup	2873 ms	2864 ms	9 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

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

[katinthehatsite]

Ok, I've worked up some changes (both in the code, and the description here) and now the app manages the window panels at small sizes. If you shrink down it closes the preview and sidebar at logical sizes, and if you try to open a panel at a small size, the app will resize the window to make room for the new panel.

Thanks for making the changes, looking now 👀

No worries about the description, happen from time to time to anyone 🙈

[katinthehatsite]

I think we are getting there :)

I am still seeing some UI that does not look great when you open/close/resize some panels with the smallest viewpoint. I tried to highlight a couple of the issue in the screencast below:

Screen.Recording.2026-08-07.at.11.25.10.AM.mov