diff --git a/packages/devtools/src/components/layout/tool-panel/index.tsx b/packages/devtools/src/components/layout/tool-panel/index.tsx index a471eadb2..d6536f0a8 100644 --- a/packages/devtools/src/components/layout/tool-panel/index.tsx +++ b/packages/devtools/src/components/layout/tool-panel/index.tsx @@ -198,7 +198,7 @@ export const ToolPanel = () => { return (
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,6 +218,9 @@ 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 (
{variant === "panel" && ( -
- Display mode - {displayModes.map(({ mode, icon: Icon }) => { - const selected = displayMode === mode; - return ( - - ); - })} -
+
+ + {displayMode} +
)} ()( }), { name: "skybridge-devtools-inspector-preferences", - version: 1, + version: 2, + migrate: (persisted, version) => { + const state = persisted as Omit & { + displayMode?: InspectorPreferences["displayMode"]; + }; + if (version < 2) { + delete state.displayMode; + } + return state; + }, partialize: ({ + displayMode: _displayMode, previewClient: _previewClient, setPreference: _setPreference, setPreviewClient: _setPreviewClient, diff --git a/skills/chatgpt-app-builder/references/run-locally.md b/skills/chatgpt-app-builder/references/run-locally.md index 2bbe0b09f..17986bb2c 100644 --- a/skills/chatgpt-app-builder/references/run-locally.md +++ b/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.