Control Apps SDK widget layout with requestDisplayMode and react to host changes via displayMode, maxHeight, safeArea, theme, and openai:set_globals

Documented steps

1. Read layout globals directly off `window.openai`: `displayMode`, `maxHeight`, `safeArea`, `theme`, `locale`, and `view` (locale is also reflected on the iframe's `lang` attribute).
2. Default to inline rendering — content appearing in the flow of the conversation — as the primary entry point.
3. Request a larger layout only when a workflow genuinely exceeds inline space: `await window.openai?.requestDisplayMode({ mode: "fullscreen" })`.
4. The accepted mode strings are `"inline"`, `"fullscreen"`, and `"PiP"` (picture-in-picture, a persistent floating window for ongoing/live sessions such as games or video).
5. Treat the request as advisory: on mobile, PiP may be coerced to fullscreen, so read back `window.openai.displayMode` rather than assuming your request was honored.
6. Size layouts against `maxHeight` (vertical space available before scrollbars appear) and inset against `safeArea`; call `notifyIntrinsicHeight(...)` to report your natural content height instead of assuming a fixed viewport.
7. Subscribe to the `openai:set_globals` window event to re-render when displayMode, theme, or locale change, and unsubscribe on unmount to avoid leaks; use `requestModal({ params, template })`, `requestClose()`, and `openExternal({ href, redirectUrl })` for modal and navigation flows.
8. Official docs: https://developers.openai.com/apps-sdk/build/custom-ux and https://developers.openai.com/apps-sdk/concepts/ui-guidelines