Runtime Patterns
ChatGPT App Surface Preview
Demo-only review surface for the same `/demo/chat-shell-preview` route. It simulates the Apps host contract locally so you can inspect inline cards, inline carousel rails, PiP monitoring, and fullscreen workspace escalation without touching the real agent harness.
Open The Preview Route
Launch the full-page preview so the shell can show the real viewport rhythm instead of reading like an embedded card.
What it is for
Review how inline, carousel, PiP, and fullscreen surfaces hand off inside a transcript-first shell.
Use when
You are deciding whether a result belongs inline, in PiP, or in a larger workspace mode before wiring live transport.
Do not use when
You are validating backend schema changes or live MCP transport. This preview is deterministic on purpose.
Related patterns
App Surfaces · Artifacts · Navigation & Shells
Escalation path
Transcript -> inline card or carousel -> PiP monitor or fullscreen workspace -> return to transcript.
Developer details
Start from these files when you need to trace the live implementation.
src/app/demo/chat-shell-preview/page.tsx · src/app/demo/chat-shell-preview/ChatShellPreviewDemo.tsx
Launch preview lab
Open the same preview route that now owns the deterministic host-simulated chat shell.
Why it lives on its own page
The preview needs the viewport. Embedding it inside the design-system column makes the escalation states feel miniature instead of app-scale.
- Keep the transcript lane and composer at shell scale.
- Let PiP and fullscreen behave like true mode changes, not nested showcase tiles.
- Preserve deterministic host-simulated scenarios without involving live runtime traffic.
Related Pages
Use these for deeper pattern-specific review.