Agentic UI: Preview Panel Grows to Fill Space When Resizing App Window

[shaunandrews]

This PR aims to improve the way window and panel resizing works in the new Studio Agentic UI, which is currently hidden behind a feature flag.

Currently in trunk the preview panel's width remains fixed as the window is resized, while the chat panel's width fills the available space. This is awkward; when the preview is open, I expect it to change its size as the window is resized, with the chat remaining stationary. Otherwise, resizing the preview requires two steps: resizing the window, then resizing the preview panel.

In this PR, resizing the window keeps the chat panel's width stationary, and allows the preview panel (if open) to fill the available space. The preview nows stores studio-ui-preview-content-width which maps to:

total available width - remembered content/chat width = preview/browser width

There's also logic in resizable-panels.ts (81) to prevent the preview and chat panels from getting too small.

Proposed Changes

• Introduces a shared usePointerDrag primitive (primary-button filtering, rAF throttling, cursor/user-select management, teardown on unmount/external-cancel) and moves the sidebar's resize hook onto it — removing duplicated drag plumbing with no change to sidebar behavior.
• Reworks the site-preview split so the content column keeps a fixed width and the preview absorbs window growth/shrink, driven by a single clamp (getPreviewSplitLayout) that owns the min-width floors. CSS becomes a pure consumer instead of running a second, divergent clamp. Persists the user's content width and migrates the legacy preview-width preference.
• The divider's reported size and the rendered layout now stay in sync on window/sidebar resize.

File changes

• use-pointer-drag.ts (line 32) extracts raw drag plumbing: mouse down, document mousemove/mouseup, cursor changes, requestAnimationFrame, cancel on unmount.
• use-resizable-panel.ts (line 17) now uses that shared drag hook for the sidebar. Sidebar behavior should be basically unchanged.
• use-preview-split.ts (line 38) is the new preview-specific brain. It measures the frame, remembers preferred content width, handles preview drag/keyboard resize, reacts to window/container resize, and migrates the old preview-width storage key.
• PreviewSplitFrame (line 22) becomes mostly layout/animation. It no longer owns the sizing math.
  layout-dashboard (line 73) changes preview rendering to a function so PreviewSplitFrame can tell SitePreview whether it is collapsed during open/close.

Testing Instructions

1. Open the agentic UI and open a site preview.
2. Drag the preview divider — the content column stays put, the preview resizes; both honor their minimum widths.
3. Resize the OS window with the preview open — the content column stays a fixed width and the preview absorbs the change; shrinking keeps the preview above its minimum.
4. Toggle the preview open/closed — the slide animation plays once and the webview stays warm.
5. Resize the sidebar — behavior unchanged (regression check).