feat(devtools): read-only display mode and panel-bounded fullscreen (SKY-536)

packages/devtools/src/components/layout/tool-panel/index.tsx

@@ -198,7 +198,7 @@ export const ToolPanel = () => {
 
   return (
     <div
-      className="flex h-full min-h-0 w-full flex-col overflow-hidden preview-region transition-colors duration-150 ease-out"
+      className="relative flex h-full min-h-0 w-full flex-col overflow-hidden preview-region transition-colors duration-150 ease-out"
       data-theme={theme}
     >
       <ToolPanelHeader

packages/devtools/src/components/layout/tool-panel/tool-panel-toolbar.tsx

@@ -46,16 +46,6 @@ const displayModes: { mode: RequestDisplayMode; icon: LucideIcon }[] = [
 function applyViewOptions(data: FormData, variant: ToolbarVariant): string {
   const { userAgent, setPreference } = useInspectorPreferencesStore.getState();
 
-  const mode = data.get("displayMode");
-  if (
-    isOneOf(
-      mode,
-      displayModes.map((d) => d.mode),
-    )
-  ) {
-    setPreference("displayMode", mode);
-  }
-
   // Checkboxes are absent from FormData when unchecked, so absence is
   // meaningful (false) — apply unconditionally.
   setPreference("theme", data.has("darkTheme") ? "dark" : "light");
@@ -228,14 +218,17 @@ export const ToolPanelToolbar = ({
   const isMobile = (userAgent?.device?.type ?? "desktop") === "mobile";
   const localeLabel =
     locales.find((l) => l.code === locale)?.englishName ?? locale;
+  const DisplayModeIcon =
+    displayModes.find((d) => d.mode === displayMode)?.icon ??
+    SquareSplitVertical;
 
   return (
     <form
       ref={formRef}
       toolname="devtools_set_view_options"
       tooldescription={
         variant === "panel"
-          ? "Set the Skybridge devtools view preview options. Any subset of fields can be changed: display mode, theme, locale, and device type."
+          ? "Set the Skybridge devtools view preview options. Any subset of fields can be changed: theme, locale, and device type."
           : "Set the Skybridge devtools preview options: theme."
       }
       toolautosubmit=""
@@ -262,34 +255,13 @@ export const ToolPanelToolbar = ({
       )}
     >
       {variant === "panel" && (
-        <fieldset className="inline-flex h-7 items-center rounded-md border border-border bg-background p-0.5">
-          <legend className="sr-only">Display mode</legend>
-          {displayModes.map(({ mode, icon: Icon }) => {
-            const selected = displayMode === mode;
-            return (
-              <label
-                key={mode}
-                className={cn(
-                  "inline-flex h-full cursor-pointer items-center gap-1.5 rounded px-2 text-xs font-medium transition-colors",
-                  "has-focus-visible:ring-1 has-focus-visible:ring-ring",
-                  selected ? buttonSelectedClass : buttonIdleClass,
-                )}
-              >
-                <input
-                  type="radio"
-                  name="displayMode"
-                  value={mode}
-                  checked={selected}
-                  onChange={(e) => e.currentTarget.form?.requestSubmit()}
-                  toolparamdescription="How the host lays out the rendered view."
-                  className="sr-only"
-                />
-                <Icon className="size-3.5" />
-                <span>{mode}</span>
-              </label>
-            );
-          })}
-        </fieldset>
+        <div
+          title="Display mode (driven by the view)"
+          className="inline-flex h-7 cursor-default items-center gap-1.5 rounded-md bg-muted px-2.5 text-xs font-medium text-muted-foreground"
+        >
+          <DisplayModeIcon className="size-3.5" />
+          <span>{displayMode}</span>
+        </div>
       )}
 
       <ToolbarToggle

packages/devtools/src/lib/inspector-preferences-store.ts

@@ -48,8 +48,18 @@ export const useInspectorPreferencesStore = create<InspectorPreferencesStore>()(
     }),
     {
       name: "skybridge-devtools-inspector-preferences",
-      version: 1,
+      version: 2,
+      migrate: (persisted, version) => {
+        const state = persisted as Omit<InspectorPreferences, "displayMode"> & {
+          displayMode?: InspectorPreferences["displayMode"];
+        };
+        if (version < 2) {
+          delete state.displayMode;
+        }
+        return state;
+      },
       partialize: ({
+        displayMode: _displayMode,
         previewClient: _previewClient,
         setPreference: _setPreference,
         setPreviewClient: _setPreviewClient,

skills/chatgpt-app-builder/references/run-locally.md

@@ -23,7 +23,7 @@ The devtools page exposes WebMCP tools, powering faster interactions than with t
 1. `navigate_page` to the devtools URL output by the dev server
 2. `list_webmcp_tools` to discover the page's tools:
    - one tool per app tool — executes it on the local MCP server, returns its result, and renders its view in the preview pane
-   - `devtools_set_view_options` — sets any subset of `displayMode` (`inline`|`pip`|`fullscreen`), `darkTheme` (boolean), `mobileDevice` (boolean), `locale` (BCP 47 code)
+   - `devtools_set_view_options` — sets any subset of `darkTheme` (boolean), `mobileDevice` (boolean), `locale` (BCP 47 code); the display mode is driven by the view itself
 3. `execute_webmcp_tool` with `toolName` and JSON-stringified `input`
 
 Interactions inside the rendered view itself are not WebMCP tools, use regular DOM understanding and interactions. Use `take_screenshot` only to visually verify rendering — screenshot the preview iframe (accessible name `html-preview` in the page snapshot) rather than the full page.