Sandbox: live preview area with viewport-resize controls

[AimTune]

Last bullet from the sandbox-redesign batch.

The widget already supports windowMode: "popup" | "side-panel" | "fullscreen" | "inline" and can be resized via theme.layout.{width,height}, but every preview happens in the host page itself. To rapidly check responsive behavior we want a dedicated preview area in the sandbox that lets you snap to common breakpoints without resizing the browser.

Proposed UI

Right-hand panel (or a new "Preview" tab) containing:

• A wrapper <chat-iva windowMode="inline"> mounted in a sized container.
• Toolbar above it with chip buttons:
  • Mobile — 390 × 844
  • Tablet — 768 × 1024
  • Desktop — 1280 × 800
  • Free — drag-resize handle on the corner
• Each chip writes width/height onto the wrapper via inline style or a CSS variable.

Open questions

1. Single-instance vs. dual-instance — do we mount a second <chat-iva> in the preview area, or just resize the existing one host-side? Two instances mean two ChatEngines sharing one ConnectorRegistry which is fine, but message history is stored once globally so they would share state. Probably a feature, not a bug, for side-by-side desktop/mobile.
2. Where does the preview live on small viewports? Probably hidden under 768 px (mobile already is the small case).

Acceptance criteria

• Preview area renders an inline <chat-iva> at the selected size.
• At least three preset breakpoints + a Free / drag-resize mode.
• Selected breakpoint persists across tab switches (until Reset).
• Documented in docs/sandbox.md.

Out of scope

• Multi-instance preview rendering — pick one approach in the implementing PR.
• iframe-based isolation. Feels heavy for the value.

---

Spun out of todos.md (now removed in favor of GitHub issues).