@midscene/playground-app 1.7.5-beta-20260421030751.0 → 1.7.5

package/dist/es/PreviewRenderer.mjs

@@ -119,6 +119,7 @@ function PreviewRenderer({ connectingOverlay, onScrcpyStatusChange, renderErrorO
                 description: "This session did not expose a preview capability in runtime metadata."
             }) : scrcpyAvailable ? /*#__PURE__*/ jsx(ScrcpyPanel, {
                 connectingOverlay: connectingOverlay,
+                deviceId: previewConnection.deviceId,
                 onStatusChange: onScrcpyStatusChange,
                 renderErrorOverlay: renderErrorOverlay,
                 serverUrl: previewConnection.scrcpyUrl

package/dist/es/ScrcpyPanel.mjs

@@ -32,8 +32,50 @@ function _async_to_generator(fn) {
         });
     };
 }
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ScrcpyPanel_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else ScrcpyPanel_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
 const { Text } = Typography;
-function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs = SCRCPY_METADATA_TIMEOUT_MS, reconnectInterval = 3000 }) {
+function ScrcpyPanel({ connectingOverlay, deviceId, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs = SCRCPY_METADATA_TIMEOUT_MS, reconnectInterval = 3000 }) {
     const canvasStageRef = useRef(null);
     const socketRef = useRef(null);
     const decoderRef = useRef(null);
@@ -58,10 +100,11 @@ function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, se
         setRetryNonce((current)=>current + 1);
     }, []);
     useEffect(()=>{
-        null == onStatusChange || onStatusChange(status);
+        null == onStatusChange || onStatusChange(status, statusText);
     }, [
         onStatusChange,
-        status
+        status,
+        statusText
     ]);
     const clearCanvas = ()=>{
         const stage = canvasStageRef.current;
@@ -92,7 +135,12 @@ function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, se
             return;
         }
         let disposed = false;
+        let connectTimer = null;
         const cleanup = ()=>{
+            if (connectTimer) {
+                clearTimeout(connectTimer);
+                connectTimer = null;
+            }
             clearMetadataTimeout();
             if (reconnectTimerRef.current) {
                 clearTimeout(reconnectTimerRef.current);
@@ -137,7 +185,10 @@ function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, se
             const socket = io(serverUrl, {
                 withCredentials: true,
                 reconnection: false,
-                timeout: 10000
+                timeout: 10000,
+                transports: [
+                    'websocket'
+                ]
             });
             socketRef.current = socket;
             const videoStream = createScrcpyVideoStream(socket);
@@ -155,9 +206,11 @@ function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, se
                     socketRef.current = null;
                     scheduleReconnect();
                 }, metadataTimeoutMs);
-                socket.emit('connect-device', {
+                socket.emit('connect-device', _object_spread_props(_object_spread({}, 'string' == typeof deviceId && deviceId.trim() ? {
+                    deviceId: deviceId.trim()
+                } : {}), {
                     maxSize: 1024
-                });
+                }));
             });
             socket.on('preview-status', (event)=>{
                 if (disposed || !isScrcpyPreviewStatusEvent(event)) return;
@@ -217,12 +270,16 @@ function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, se
                 scheduleReconnect();
             });
         };
-        connect();
+        connectTimer = setTimeout(()=>{
+            connectTimer = null;
+            connect();
+        }, 0);
         return ()=>{
             disposed = true;
             cleanup();
         };
     }, [
+        deviceId,
         metadataTimeoutMs,
         reconnectInterval,
         retryNonce,

package/dist/es/controller/ai-config.mjs

@@ -27,6 +27,9 @@ function _async_to_generator(fn) {
 function hasPlaygroundAiConfig(config) {
     return Object.keys(config).length > 0;
 }
+function serializePlaygroundAiConfig(config) {
+    return JSON.stringify(Object.entries(config).sort(([leftKey], [rightKey])=>leftKey.localeCompare(rightKey)));
+}
 function applyPlaygroundAiConfig(playgroundSDK, config) {
     return _async_to_generator(function*() {
         if (!hasPlaygroundAiConfig(config)) return false;
@@ -34,4 +37,4 @@ function applyPlaygroundAiConfig(playgroundSDK, config) {
         return true;
     })();
 }
-export { applyPlaygroundAiConfig, hasPlaygroundAiConfig };
+export { applyPlaygroundAiConfig, hasPlaygroundAiConfig, serializePlaygroundAiConfig };

package/dist/es/controller/selectors.mjs

@@ -41,19 +41,33 @@ function _object_spread_props(target, source) {
     return target;
 }
 function buildConversationConfig(state, playgroundConfig) {
-    return _object_spread({
+    const defaultConfig = {
         showContextPreview: false,
         layout: 'vertical',
-        showVersionInfo: true,
-        enableScrollToBottom: true,
+        showVersionInfo: false,
+        enableScrollToBottom: false,
         serverMode: true,
-        showEnvConfigReminder: true,
+        showEnvConfigReminder: false,
+        showClearButton: false,
+        showSystemMessageHeader: false,
+        promptInputChrome: {
+            variant: 'minimal',
+            placeholder: 'Type a message',
+            primaryActionLabel: 'Action'
+        },
+        executionFlow: {
+            collapsible: true
+        },
         deviceType: state.deviceType,
         executionUx: {
             hints: state.executionUxHints,
             countdownSeconds: state.countdownSeconds
         }
-    }, playgroundConfig);
+    };
+    return _object_spread_props(_object_spread({}, defaultConfig, playgroundConfig), {
+        executionFlow: _object_spread({}, defaultConfig.executionFlow, null == playgroundConfig ? void 0 : playgroundConfig.executionFlow),
+        executionUx: _object_spread({}, defaultConfig.executionUx, null == playgroundConfig ? void 0 : playgroundConfig.executionUx)
+    });
 }
 function buildConversationBranding(runtimeInfo, title, appVersion, deviceType, branding) {
     var _runtimeInfo_title, _runtimeInfo_platformId, _ref, _ref1;

package/dist/es/controller/single-flight.mjs

@@ -0,0 +1,13 @@
+function runSingleFlight(pendingRef, task) {
+    if (pendingRef.current) return pendingRef.current;
+    const taskPromise = task();
+    const pendingState = {
+        promise: null
+    };
+    pendingState.promise = taskPromise.finally(()=>{
+        if (pendingRef.current === pendingState.promise) pendingRef.current = null;
+    });
+    pendingRef.current = pendingState.promise;
+    return pendingState.promise;
+}
+export { runSingleFlight };

package/dist/es/controller/usePlaygroundController.mjs

@@ -1,12 +1,13 @@
 import { PlaygroundSDK } from "@midscene/playground";
 import { useEnvConfig } from "@midscene/visualizer";
 import { Form, message } from "antd";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { resolveAutoCreateSessionInput } from "../session-setup.mjs";
 import { buildSessionInitialValues, resolveSessionViewState } from "../session-state.mjs";
 import { useServerStatus } from "../useServerStatus.mjs";
-import { applyPlaygroundAiConfig, hasPlaygroundAiConfig } from "./ai-config.mjs";
+import { applyPlaygroundAiConfig, hasPlaygroundAiConfig, serializePlaygroundAiConfig } from "./ai-config.mjs";
 import { resolveAutoCreateDecision, serializeAutoCreateInput, shouldResetAutoCreateBlock } from "./auto-create.mjs";
+import { runSingleFlight } from "./single-flight.mjs";
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -79,8 +80,18 @@ function getPlatformSelectorFieldKey(setup) {
     var _setup_platformSelector;
     return null == setup ? void 0 : null == (_setup_platformSelector = setup.platformSelector) ? void 0 : _setup_platformSelector.fieldKey;
 }
-function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollIntervalMs = 5000, countdownSeconds = 3 }) {
+function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollIntervalMs = 5000, countdownSeconds = 3, initialFormValues }) {
     const [form] = Form.useForm();
+    const initialFormValuesRef = useRef(initialFormValues);
+    useLayoutEffect(()=>{
+        const seed = initialFormValuesRef.current;
+        if (!seed) return;
+        for (const [key, value] of Object.entries(seed))if (void 0 === form.getFieldValue(key)) form.setFieldsValue({
+            [key]: value
+        });
+    }, [
+        form
+    ]);
     var _Form_useWatch;
     const formValues = null != (_Form_useWatch = Form.useWatch([], form)) ? _Form_useWatch : {};
     const [countdown, setCountdown] = useState(null);
@@ -89,6 +100,9 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
     const [sessionLoading, setSessionLoading] = useState(false);
     const [sessionMutating, setSessionMutating] = useState(false);
     const aiConfig = useEnvConfig((state)=>state.config);
+    const aiConfigSignature = useMemo(()=>serializePlaygroundAiConfig(aiConfig), [
+        aiConfig
+    ]);
     const platformSelectorFieldKey = getPlatformSelectorFieldKey(sessionSetup);
     const selectedPlatformId = 'string' == typeof platformSelectorFieldKey ? formValues[platformSelectorFieldKey] : void 0;
     const playgroundSDK = useMemo(()=>new PlaygroundSDK({
@@ -101,26 +115,50 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
     const sessionViewState = useMemo(()=>resolveSessionViewState(runtimeInfo), [
         runtimeInfo
     ]);
+    const countdownTimerRef = useRef(null);
+    const countdownResolveRef = useRef(null);
+    const mountedRef = useRef(true);
+    const lastSetupPlatformIdRef = useRef(void 0);
+    const autoCreateSignatureRef = useRef(null);
+    const autoCreateBlockedSignatureRef = useRef(null);
+    const sessionMutatingRef = useRef(false);
+    const appliedAiConfigSignatureRef = useRef(null);
+    const pendingCreateSessionRef = useRef(null);
+    const pendingAiConfigApplicationRef = useRef(null);
     const applyAiConfig = useCallback(()=>_async_to_generator(function*() {
-            if (!hasPlaygroundAiConfig(aiConfig)) return true;
-            try {
-                yield applyPlaygroundAiConfig(playgroundSDK, aiConfig);
+            if (!hasPlaygroundAiConfig(aiConfig)) {
+                appliedAiConfigSignatureRef.current = null;
+                pendingAiConfigApplicationRef.current = null;
                 return true;
-            } catch (error) {
-                const errorMessage = error instanceof Error ? error.message : 'Failed to apply AI configuration';
-                message.error(errorMessage);
-                return false;
             }
+            if (appliedAiConfigSignatureRef.current === aiConfigSignature) return true;
+            const pendingApplication = pendingAiConfigApplicationRef.current;
+            if ((null == pendingApplication ? void 0 : pendingApplication.signature) === aiConfigSignature) return pendingApplication.promise;
+            const pendingApplicationState = {
+                promise: Promise.resolve(true),
+                signature: aiConfigSignature
+            };
+            const applyPromise = (()=>_async_to_generator(function*() {
+                    try {
+                        yield applyPlaygroundAiConfig(playgroundSDK, aiConfig);
+                        appliedAiConfigSignatureRef.current = aiConfigSignature;
+                        return true;
+                    } catch (error) {
+                        const errorMessage = error instanceof Error ? error.message : 'Failed to apply AI configuration';
+                        message.error(errorMessage);
+                        return false;
+                    } finally{
+                        if (pendingAiConfigApplicationRef.current === pendingApplicationState) pendingAiConfigApplicationRef.current = null;
+                    }
+                })())();
+            pendingApplicationState.promise = applyPromise;
+            pendingAiConfigApplicationRef.current = pendingApplicationState;
+            return applyPromise;
         })(), [
         aiConfig,
+        aiConfigSignature,
         playgroundSDK
     ]);
-    const countdownTimerRef = useRef(null);
-    const countdownResolveRef = useRef(null);
-    const mountedRef = useRef(true);
-    const lastSetupPlatformIdRef = useRef(void 0);
-    const autoCreateSignatureRef = useRef(null);
-    const autoCreateBlockedSignatureRef = useRef(null);
     const finishCountdown = useCallback(()=>{
         if (null !== countdownTimerRef.current) {
             window.clearInterval(countdownTimerRef.current);
@@ -198,23 +236,27 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
         playgroundSDK
     ]);
     const createSession = useCallback((input, options)=>_async_to_generator(function*() {
-            try {
-                if (!(yield applyAiConfig())) return false;
-                const values = null != input ? input : yield form.validateFields();
-                setSessionMutating(true);
-                yield playgroundSDK.createSession(values);
-                if (shouldResetAutoCreateBlock(options)) autoCreateBlockedSignatureRef.current = null;
-                if (!(null == options ? void 0 : options.silent)) message.success('Agent created');
-                yield refreshServerState();
-                return true;
-            } catch (error) {
-                if (error.errorFields) return false;
-                const errorMessage = error instanceof Error ? error.message : 'Failed to create Agent';
-                message.error(errorMessage);
-                return false;
-            } finally{
-                setSessionMutating(false);
-            }
+            return runSingleFlight(pendingCreateSessionRef, ()=>_async_to_generator(function*() {
+                    try {
+                        sessionMutatingRef.current = true;
+                        setSessionMutating(true);
+                        if (!(yield applyAiConfig())) return false;
+                        const values = null != input ? input : yield form.validateFields();
+                        yield playgroundSDK.createSession(values);
+                        if (shouldResetAutoCreateBlock(options)) autoCreateBlockedSignatureRef.current = null;
+                        if (!(null == options ? void 0 : options.silent)) message.success('Agent created');
+                        yield refreshServerState();
+                        return true;
+                    } catch (error) {
+                        if (error.errorFields) return false;
+                        const errorMessage = error instanceof Error ? error.message : 'Failed to create Agent';
+                        message.error(errorMessage);
+                        return false;
+                    } finally{
+                        sessionMutatingRef.current = false;
+                        setSessionMutating(false);
+                    }
+                })());
         })(), [
         applyAiConfig,
         form,
@@ -224,6 +266,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
     const destroySession = useCallback(()=>_async_to_generator(function*() {
             try {
                 autoCreateBlockedSignatureRef.current = serializeAutoCreateInput(resolveAutoCreateSessionInput(sessionSetup, form.getFieldsValue(true)));
+                sessionMutatingRef.current = true;
                 setSessionMutating(true);
                 yield playgroundSDK.destroySession();
                 message.success('Session disconnected');
@@ -233,6 +276,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
                 const errorMessage = error instanceof Error ? error.message : 'Failed to disconnect session';
                 message.error(errorMessage);
             } finally{
+                sessionMutatingRef.current = false;
                 setSessionMutating(false);
             }
         })(), [
@@ -298,7 +342,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
             autoCreateSignatureRef.current = null;
             return;
         }
-        if (!serverOnline || sessionLoading || sessionMutating || sessionSetupError) return;
+        if (!serverOnline || sessionLoading || sessionMutating || sessionMutatingRef.current || sessionSetupError) return;
         const autoCreateInput = resolveAutoCreateSessionInput(sessionSetup, form.getFieldsValue(true));
         const { signature, shouldCreate } = resolveAutoCreateDecision({
             autoCreateInput,

package/dist/es/panels/PlaygroundConversationPanel.mjs

@@ -30,7 +30,8 @@ function _async_to_generator(fn) {
         });
     };
 }
-function PlaygroundConversationPanel({ controller, appVersion, title = 'Playground', branding, playgroundConfig, header, className, notConnectedFallback }) {
+const PLAYGROUND_CONVERSATION_SKIN_CLASS = 'playground-conversation-skin';
+function PlaygroundConversationPanel({ controller, appVersion, title = 'Playground', branding, playgroundConfig, header, className, playgroundClassName, notConnectedFallback }) {
     const { state, actions } = controller;
     const mergedConfig = buildConversationConfig(state, playgroundConfig);
     const mergedBranding = buildConversationBranding(state.runtimeInfo, title, appVersion, state.deviceType, branding);
@@ -105,7 +106,11 @@ function PlaygroundConversationPanel({ controller, appVersion, title = 'Playgrou
                     playgroundSDK: state.playgroundSDK,
                     config: mergedConfig,
                     branding: mergedBranding,
-                    className: "playground-container"
+                    className: [
+                        'playground-container',
+                        PLAYGROUND_CONVERSATION_SKIN_CLASS,
+                        playgroundClassName
+                    ].filter(Boolean).join(' ')
                 }) : void 0 !== notConnectedFallback ? /*#__PURE__*/ jsx(Fragment, {
                     children: notConnectedFallback
                 }) : /*#__PURE__*/ jsx(SessionSetupPanel, {

package/dist/es/runtime-info.mjs

@@ -100,7 +100,8 @@ function resolvePreviewConnectionInfo(runtimeInfo, serverUrl) {
     }
     if ('scrcpy' === preview.kind) {
         var _runtimeInfo_metadata, _preview_custom;
-        if (isRemoteAndroidDeviceId(null == runtimeInfo ? void 0 : null == (_runtimeInfo_metadata = runtimeInfo.metadata) ? void 0 : _runtimeInfo_metadata.deviceId)) return {
+        const runtimeDeviceId = 'string' == typeof (null == runtimeInfo ? void 0 : null == (_runtimeInfo_metadata = runtimeInfo.metadata) ? void 0 : _runtimeInfo_metadata.deviceId) ? runtimeInfo.metadata.deviceId.trim() : void 0;
+        if (isRemoteAndroidDeviceId(runtimeDeviceId)) return {
             type: 'screenshot'
         };
         const scrcpyPort = Number(null == (_preview_custom = preview.custom) ? void 0 : _preview_custom.scrcpyPort);
@@ -114,6 +115,7 @@ function resolvePreviewConnectionInfo(runtimeInfo, serverUrl) {
             return url.toString();
         })() : void 0;
         return {
+            deviceId: runtimeDeviceId,
             type: 'scrcpy',
             scrcpyPort: resolvedScrcpyPort,
             scrcpyUrl

package/dist/lib/PreviewRenderer.js

@@ -147,6 +147,7 @@ function PreviewRenderer({ connectingOverlay, onScrcpyStatusChange, renderErrorO
                 description: "This session did not expose a preview capability in runtime metadata."
             }) : scrcpyAvailable ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ScrcpyPanel_js_namespaceObject.ScrcpyPanel, {
                 connectingOverlay: connectingOverlay,
+                deviceId: previewConnection.deviceId,
                 onStatusChange: onScrcpyStatusChange,
                 renderErrorOverlay: renderErrorOverlay,
                 serverUrl: previewConnection.scrcpyUrl

package/dist/lib/ScrcpyPanel.js

@@ -60,8 +60,50 @@ function _async_to_generator(fn) {
         });
     };
 }
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ScrcpyPanel_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else ScrcpyPanel_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
 const { Text } = external_antd_namespaceObject.Typography;
-function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs = external_scrcpy_preview_js_namespaceObject.SCRCPY_METADATA_TIMEOUT_MS, reconnectInterval = 3000 }) {
+function ScrcpyPanel({ connectingOverlay, deviceId, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs = external_scrcpy_preview_js_namespaceObject.SCRCPY_METADATA_TIMEOUT_MS, reconnectInterval = 3000 }) {
     const canvasStageRef = (0, external_react_namespaceObject.useRef)(null);
     const socketRef = (0, external_react_namespaceObject.useRef)(null);
     const decoderRef = (0, external_react_namespaceObject.useRef)(null);
@@ -86,10 +128,11 @@ function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, se
         setRetryNonce((current)=>current + 1);
     }, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        null == onStatusChange || onStatusChange(status);
+        null == onStatusChange || onStatusChange(status, statusText);
     }, [
         onStatusChange,
-        status
+        status,
+        statusText
     ]);
     const clearCanvas = ()=>{
         const stage = canvasStageRef.current;
@@ -120,7 +163,12 @@ function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, se
             return;
         }
         let disposed = false;
+        let connectTimer = null;
         const cleanup = ()=>{
+            if (connectTimer) {
+                clearTimeout(connectTimer);
+                connectTimer = null;
+            }
             clearMetadataTimeout();
             if (reconnectTimerRef.current) {
                 clearTimeout(reconnectTimerRef.current);
@@ -165,7 +213,10 @@ function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, se
             const socket = (0, external_socket_io_client_namespaceObject.io)(serverUrl, {
                 withCredentials: true,
                 reconnection: false,
-                timeout: 10000
+                timeout: 10000,
+                transports: [
+                    'websocket'
+                ]
             });
             socketRef.current = socket;
             const videoStream = (0, external_scrcpy_stream_js_namespaceObject.createScrcpyVideoStream)(socket);
@@ -183,9 +234,11 @@ function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, se
                     socketRef.current = null;
                     scheduleReconnect();
                 }, metadataTimeoutMs);
-                socket.emit('connect-device', {
+                socket.emit('connect-device', _object_spread_props(_object_spread({}, 'string' == typeof deviceId && deviceId.trim() ? {
+                    deviceId: deviceId.trim()
+                } : {}), {
                     maxSize: 1024
-                });
+                }));
             });
             socket.on('preview-status', (event)=>{
                 if (disposed || !(0, external_scrcpy_preview_js_namespaceObject.isScrcpyPreviewStatusEvent)(event)) return;
@@ -245,12 +298,16 @@ function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, se
                 scheduleReconnect();
             });
         };
-        connect();
+        connectTimer = setTimeout(()=>{
+            connectTimer = null;
+            connect();
+        }, 0);
         return ()=>{
             disposed = true;
             cleanup();
         };
     }, [
+        deviceId,
         metadataTimeoutMs,
         reconnectInterval,
         retryNonce,

package/dist/lib/controller/ai-config.js

@@ -25,7 +25,8 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     applyPlaygroundAiConfig: ()=>applyPlaygroundAiConfig,
-    hasPlaygroundAiConfig: ()=>hasPlaygroundAiConfig
+    hasPlaygroundAiConfig: ()=>hasPlaygroundAiConfig,
+    serializePlaygroundAiConfig: ()=>serializePlaygroundAiConfig
 });
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -56,6 +57,9 @@ function _async_to_generator(fn) {
 function hasPlaygroundAiConfig(config) {
     return Object.keys(config).length > 0;
 }
+function serializePlaygroundAiConfig(config) {
+    return JSON.stringify(Object.entries(config).sort(([leftKey], [rightKey])=>leftKey.localeCompare(rightKey)));
+}
 function applyPlaygroundAiConfig(playgroundSDK, config) {
     return _async_to_generator(function*() {
         if (!hasPlaygroundAiConfig(config)) return false;
@@ -65,9 +69,11 @@ function applyPlaygroundAiConfig(playgroundSDK, config) {
 }
 exports.applyPlaygroundAiConfig = __webpack_exports__.applyPlaygroundAiConfig;
 exports.hasPlaygroundAiConfig = __webpack_exports__.hasPlaygroundAiConfig;
+exports.serializePlaygroundAiConfig = __webpack_exports__.serializePlaygroundAiConfig;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "applyPlaygroundAiConfig",
-    "hasPlaygroundAiConfig"
+    "hasPlaygroundAiConfig",
+    "serializePlaygroundAiConfig"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/lib/controller/selectors.js

@@ -70,19 +70,33 @@ function _object_spread_props(target, source) {
     return target;
 }
 function buildConversationConfig(state, playgroundConfig) {
-    return _object_spread({
+    const defaultConfig = {
         showContextPreview: false,
         layout: 'vertical',
-        showVersionInfo: true,
-        enableScrollToBottom: true,
+        showVersionInfo: false,
+        enableScrollToBottom: false,
         serverMode: true,
-        showEnvConfigReminder: true,
+        showEnvConfigReminder: false,
+        showClearButton: false,
+        showSystemMessageHeader: false,
+        promptInputChrome: {
+            variant: 'minimal',
+            placeholder: 'Type a message',
+            primaryActionLabel: 'Action'
+        },
+        executionFlow: {
+            collapsible: true
+        },
         deviceType: state.deviceType,
         executionUx: {
             hints: state.executionUxHints,
             countdownSeconds: state.countdownSeconds
         }
-    }, playgroundConfig);
+    };
+    return _object_spread_props(_object_spread({}, defaultConfig, playgroundConfig), {
+        executionFlow: _object_spread({}, defaultConfig.executionFlow, null == playgroundConfig ? void 0 : playgroundConfig.executionFlow),
+        executionUx: _object_spread({}, defaultConfig.executionUx, null == playgroundConfig ? void 0 : playgroundConfig.executionUx)
+    });
 }
 function buildConversationBranding(runtimeInfo, title, appVersion, deviceType, branding) {
     var _runtimeInfo_title, _runtimeInfo_platformId, _ref, _ref1;

package/dist/lib/controller/single-flight.js

@@ -0,0 +1,47 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    runSingleFlight: ()=>runSingleFlight
+});
+function runSingleFlight(pendingRef, task) {
+    if (pendingRef.current) return pendingRef.current;
+    const taskPromise = task();
+    const pendingState = {
+        promise: null
+    };
+    pendingState.promise = taskPromise.finally(()=>{
+        if (pendingRef.current === pendingState.promise) pendingRef.current = null;
+    });
+    pendingRef.current = pendingState.promise;
+    return pendingState.promise;
+}
+exports.runSingleFlight = __webpack_exports__.runSingleFlight;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "runSingleFlight"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/controller/usePlaygroundController.js

@@ -35,6 +35,7 @@ const external_session_state_js_namespaceObject = require("../session-state.js")
 const external_useServerStatus_js_namespaceObject = require("../useServerStatus.js");
 const external_ai_config_js_namespaceObject = require("./ai-config.js");
 const external_auto_create_js_namespaceObject = require("./auto-create.js");
+const external_single_flight_js_namespaceObject = require("./single-flight.js");
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -107,8 +108,18 @@ function getPlatformSelectorFieldKey(setup) {
     var _setup_platformSelector;
     return null == setup ? void 0 : null == (_setup_platformSelector = setup.platformSelector) ? void 0 : _setup_platformSelector.fieldKey;
 }
-function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollIntervalMs = 5000, countdownSeconds = 3 }) {
+function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollIntervalMs = 5000, countdownSeconds = 3, initialFormValues }) {
     const [form] = external_antd_namespaceObject.Form.useForm();
+    const initialFormValuesRef = (0, external_react_namespaceObject.useRef)(initialFormValues);
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
+        const seed = initialFormValuesRef.current;
+        if (!seed) return;
+        for (const [key, value] of Object.entries(seed))if (void 0 === form.getFieldValue(key)) form.setFieldsValue({
+            [key]: value
+        });
+    }, [
+        form
+    ]);
     var _Form_useWatch;
     const formValues = null != (_Form_useWatch = external_antd_namespaceObject.Form.useWatch([], form)) ? _Form_useWatch : {};
     const [countdown, setCountdown] = (0, external_react_namespaceObject.useState)(null);
@@ -117,6 +128,9 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
     const [sessionLoading, setSessionLoading] = (0, external_react_namespaceObject.useState)(false);
     const [sessionMutating, setSessionMutating] = (0, external_react_namespaceObject.useState)(false);
     const aiConfig = (0, visualizer_namespaceObject.useEnvConfig)((state)=>state.config);
+    const aiConfigSignature = (0, external_react_namespaceObject.useMemo)(()=>(0, external_ai_config_js_namespaceObject.serializePlaygroundAiConfig)(aiConfig), [
+        aiConfig
+    ]);
     const platformSelectorFieldKey = getPlatformSelectorFieldKey(sessionSetup);
     const selectedPlatformId = 'string' == typeof platformSelectorFieldKey ? formValues[platformSelectorFieldKey] : void 0;
     const playgroundSDK = (0, external_react_namespaceObject.useMemo)(()=>new playground_namespaceObject.PlaygroundSDK({
@@ -129,26 +143,50 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
     const sessionViewState = (0, external_react_namespaceObject.useMemo)(()=>(0, external_session_state_js_namespaceObject.resolveSessionViewState)(runtimeInfo), [
         runtimeInfo
     ]);
+    const countdownTimerRef = (0, external_react_namespaceObject.useRef)(null);
+    const countdownResolveRef = (0, external_react_namespaceObject.useRef)(null);
+    const mountedRef = (0, external_react_namespaceObject.useRef)(true);
+    const lastSetupPlatformIdRef = (0, external_react_namespaceObject.useRef)(void 0);
+    const autoCreateSignatureRef = (0, external_react_namespaceObject.useRef)(null);
+    const autoCreateBlockedSignatureRef = (0, external_react_namespaceObject.useRef)(null);
+    const sessionMutatingRef = (0, external_react_namespaceObject.useRef)(false);
+    const appliedAiConfigSignatureRef = (0, external_react_namespaceObject.useRef)(null);
+    const pendingCreateSessionRef = (0, external_react_namespaceObject.useRef)(null);
+    const pendingAiConfigApplicationRef = (0, external_react_namespaceObject.useRef)(null);
     const applyAiConfig = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
-            if (!(0, external_ai_config_js_namespaceObject.hasPlaygroundAiConfig)(aiConfig)) return true;
-            try {
-                yield (0, external_ai_config_js_namespaceObject.applyPlaygroundAiConfig)(playgroundSDK, aiConfig);
+            if (!(0, external_ai_config_js_namespaceObject.hasPlaygroundAiConfig)(aiConfig)) {
+                appliedAiConfigSignatureRef.current = null;
+                pendingAiConfigApplicationRef.current = null;
                 return true;
-            } catch (error) {
-                const errorMessage = error instanceof Error ? error.message : 'Failed to apply AI configuration';
-                external_antd_namespaceObject.message.error(errorMessage);
-                return false;
             }
+            if (appliedAiConfigSignatureRef.current === aiConfigSignature) return true;
+            const pendingApplication = pendingAiConfigApplicationRef.current;
+            if ((null == pendingApplication ? void 0 : pendingApplication.signature) === aiConfigSignature) return pendingApplication.promise;
+            const pendingApplicationState = {
+                promise: Promise.resolve(true),
+                signature: aiConfigSignature
+            };
+            const applyPromise = (()=>_async_to_generator(function*() {
+                    try {
+                        yield (0, external_ai_config_js_namespaceObject.applyPlaygroundAiConfig)(playgroundSDK, aiConfig);
+                        appliedAiConfigSignatureRef.current = aiConfigSignature;
+                        return true;
+                    } catch (error) {
+                        const errorMessage = error instanceof Error ? error.message : 'Failed to apply AI configuration';
+                        external_antd_namespaceObject.message.error(errorMessage);
+                        return false;
+                    } finally{
+                        if (pendingAiConfigApplicationRef.current === pendingApplicationState) pendingAiConfigApplicationRef.current = null;
+                    }
+                })())();
+            pendingApplicationState.promise = applyPromise;
+            pendingAiConfigApplicationRef.current = pendingApplicationState;
+            return applyPromise;
         })(), [
         aiConfig,
+        aiConfigSignature,
         playgroundSDK
     ]);
-    const countdownTimerRef = (0, external_react_namespaceObject.useRef)(null);
-    const countdownResolveRef = (0, external_react_namespaceObject.useRef)(null);
-    const mountedRef = (0, external_react_namespaceObject.useRef)(true);
-    const lastSetupPlatformIdRef = (0, external_react_namespaceObject.useRef)(void 0);
-    const autoCreateSignatureRef = (0, external_react_namespaceObject.useRef)(null);
-    const autoCreateBlockedSignatureRef = (0, external_react_namespaceObject.useRef)(null);
     const finishCountdown = (0, external_react_namespaceObject.useCallback)(()=>{
         if (null !== countdownTimerRef.current) {
             window.clearInterval(countdownTimerRef.current);
@@ -226,23 +264,27 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
         playgroundSDK
     ]);
     const createSession = (0, external_react_namespaceObject.useCallback)((input, options)=>_async_to_generator(function*() {
-            try {
-                if (!(yield applyAiConfig())) return false;
-                const values = null != input ? input : yield form.validateFields();
-                setSessionMutating(true);
-                yield playgroundSDK.createSession(values);
-                if ((0, external_auto_create_js_namespaceObject.shouldResetAutoCreateBlock)(options)) autoCreateBlockedSignatureRef.current = null;
-                if (!(null == options ? void 0 : options.silent)) external_antd_namespaceObject.message.success('Agent created');
-                yield refreshServerState();
-                return true;
-            } catch (error) {
-                if (error.errorFields) return false;
-                const errorMessage = error instanceof Error ? error.message : 'Failed to create Agent';
-                external_antd_namespaceObject.message.error(errorMessage);
-                return false;
-            } finally{
-                setSessionMutating(false);
-            }
+            return (0, external_single_flight_js_namespaceObject.runSingleFlight)(pendingCreateSessionRef, ()=>_async_to_generator(function*() {
+                    try {
+                        sessionMutatingRef.current = true;
+                        setSessionMutating(true);
+                        if (!(yield applyAiConfig())) return false;
+                        const values = null != input ? input : yield form.validateFields();
+                        yield playgroundSDK.createSession(values);
+                        if ((0, external_auto_create_js_namespaceObject.shouldResetAutoCreateBlock)(options)) autoCreateBlockedSignatureRef.current = null;
+                        if (!(null == options ? void 0 : options.silent)) external_antd_namespaceObject.message.success('Agent created');
+                        yield refreshServerState();
+                        return true;
+                    } catch (error) {
+                        if (error.errorFields) return false;
+                        const errorMessage = error instanceof Error ? error.message : 'Failed to create Agent';
+                        external_antd_namespaceObject.message.error(errorMessage);
+                        return false;
+                    } finally{
+                        sessionMutatingRef.current = false;
+                        setSessionMutating(false);
+                    }
+                })());
         })(), [
         applyAiConfig,
         form,
@@ -252,6 +294,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
     const destroySession = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
             try {
                 autoCreateBlockedSignatureRef.current = (0, external_auto_create_js_namespaceObject.serializeAutoCreateInput)((0, external_session_setup_js_namespaceObject.resolveAutoCreateSessionInput)(sessionSetup, form.getFieldsValue(true)));
+                sessionMutatingRef.current = true;
                 setSessionMutating(true);
                 yield playgroundSDK.destroySession();
                 external_antd_namespaceObject.message.success('Session disconnected');
@@ -261,6 +304,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
                 const errorMessage = error instanceof Error ? error.message : 'Failed to disconnect session';
                 external_antd_namespaceObject.message.error(errorMessage);
             } finally{
+                sessionMutatingRef.current = false;
                 setSessionMutating(false);
             }
         })(), [
@@ -326,7 +370,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
             autoCreateSignatureRef.current = null;
             return;
         }
-        if (!serverOnline || sessionLoading || sessionMutating || sessionSetupError) return;
+        if (!serverOnline || sessionLoading || sessionMutating || sessionMutatingRef.current || sessionSetupError) return;
         const autoCreateInput = (0, external_session_setup_js_namespaceObject.resolveAutoCreateSessionInput)(sessionSetup, form.getFieldsValue(true));
         const { signature, shouldCreate } = (0, external_auto_create_js_namespaceObject.resolveAutoCreateDecision)({
             autoCreateInput,

package/dist/lib/panels/PlaygroundConversationPanel.js

@@ -58,7 +58,8 @@ function _async_to_generator(fn) {
         });
     };
 }
-function PlaygroundConversationPanel({ controller, appVersion, title = 'Playground', branding, playgroundConfig, header, className, notConnectedFallback }) {
+const PLAYGROUND_CONVERSATION_SKIN_CLASS = 'playground-conversation-skin';
+function PlaygroundConversationPanel({ controller, appVersion, title = 'Playground', branding, playgroundConfig, header, className, playgroundClassName, notConnectedFallback }) {
     const { state, actions } = controller;
     const mergedConfig = (0, selectors_js_namespaceObject.buildConversationConfig)(state, playgroundConfig);
     const mergedBranding = (0, selectors_js_namespaceObject.buildConversationBranding)(state.runtimeInfo, title, appVersion, state.deviceType, branding);
@@ -133,7 +134,11 @@ function PlaygroundConversationPanel({ controller, appVersion, title = 'Playgrou
                     playgroundSDK: state.playgroundSDK,
                     config: mergedConfig,
                     branding: mergedBranding,
-                    className: "playground-container"
+                    className: [
+                        'playground-container',
+                        PLAYGROUND_CONVERSATION_SKIN_CLASS,
+                        playgroundClassName
+                    ].filter(Boolean).join(' ')
                 }) : void 0 !== notConnectedFallback ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
                     children: notConnectedFallback
                 }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SessionSetupPanel_js_namespaceObject.SessionSetupPanel, {

package/dist/lib/runtime-info.js

@@ -132,7 +132,8 @@ function resolvePreviewConnectionInfo(runtimeInfo, serverUrl) {
     }
     if ('scrcpy' === preview.kind) {
         var _runtimeInfo_metadata, _preview_custom;
-        if (isRemoteAndroidDeviceId(null == runtimeInfo ? void 0 : null == (_runtimeInfo_metadata = runtimeInfo.metadata) ? void 0 : _runtimeInfo_metadata.deviceId)) return {
+        const runtimeDeviceId = 'string' == typeof (null == runtimeInfo ? void 0 : null == (_runtimeInfo_metadata = runtimeInfo.metadata) ? void 0 : _runtimeInfo_metadata.deviceId) ? runtimeInfo.metadata.deviceId.trim() : void 0;
+        if (isRemoteAndroidDeviceId(runtimeDeviceId)) return {
             type: 'screenshot'
         };
         const scrcpyPort = Number(null == (_preview_custom = preview.custom) ? void 0 : _preview_custom.scrcpyPort);
@@ -146,6 +147,7 @@ function resolvePreviewConnectionInfo(runtimeInfo, serverUrl) {
             return url.toString();
         })() : void 0;
         return {
+            deviceId: runtimeDeviceId,
             type: 'scrcpy',
             scrcpyPort: resolvedScrcpyPort,
             scrcpyUrl

package/dist/types/PlaygroundPreview.d.ts

@@ -4,7 +4,7 @@ import type { ScrcpyErrorOverlayRenderer } from './ScrcpyPanel';
 import type { ScrcpyPreviewStatus } from './scrcpy-preview';
 export interface PlaygroundPreviewProps {
     connectingOverlay?: ReactNode;
-    onScrcpyStatusChange?: (status: ScrcpyPreviewStatus) => void;
+    onScrcpyStatusChange?: (status: ScrcpyPreviewStatus, statusText: string) => void;
     renderErrorOverlay?: ScrcpyErrorOverlayRenderer;
     playgroundSDK: PlaygroundSDK;
     runtimeInfo: PlaygroundRuntimeInfo | null;

package/dist/types/PreviewRenderer.d.ts

@@ -4,7 +4,7 @@ import { type ScrcpyErrorOverlayRenderer } from './ScrcpyPanel';
 import type { ScrcpyPreviewStatus } from './scrcpy-preview';
 interface PreviewRendererProps {
     connectingOverlay?: ReactNode;
-    onScrcpyStatusChange?: (status: ScrcpyPreviewStatus) => void;
+    onScrcpyStatusChange?: (status: ScrcpyPreviewStatus, statusText: string) => void;
     renderErrorOverlay?: ScrcpyErrorOverlayRenderer;
     playgroundSDK: PlaygroundSDK;
     runtimeInfo: PlaygroundRuntimeInfo | null;

package/dist/types/ScrcpyPanel.d.ts

@@ -9,11 +9,12 @@ export interface ScrcpyErrorOverlayContext {
 export type ScrcpyErrorOverlayRenderer = (context: ScrcpyErrorOverlayContext) => ReactNode;
 interface ScrcpyPanelProps {
     connectingOverlay?: ReactNode;
-    onStatusChange?: (status: ScrcpyPreviewStatus) => void;
+    deviceId?: string;
+    onStatusChange?: (status: ScrcpyPreviewStatus, statusText: string) => void;
     renderErrorOverlay?: ScrcpyErrorOverlayRenderer;
     serverUrl?: string;
     metadataTimeoutMs?: number;
     reconnectInterval?: number;
 }
-export declare function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs, reconnectInterval, }: ScrcpyPanelProps): React.JSX.Element;
+export declare function ScrcpyPanel({ connectingOverlay, deviceId, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs, reconnectInterval, }: ScrcpyPanelProps): React.JSX.Element;
 export {};

package/dist/types/controller/ai-config.d.ts

@@ -1,4 +1,5 @@
 import type { PlaygroundSDK } from '@midscene/playground';
 export type PlaygroundAiConfig = Record<string, string>;
 export declare function hasPlaygroundAiConfig(config: PlaygroundAiConfig): boolean;
+export declare function serializePlaygroundAiConfig(config: PlaygroundAiConfig): string;
 export declare function applyPlaygroundAiConfig(playgroundSDK: Pick<PlaygroundSDK, 'overrideConfig'>, config: PlaygroundAiConfig): Promise<boolean>;

package/dist/types/controller/single-flight.d.ts

@@ -0,0 +1,3 @@
+export declare function runSingleFlight<T>(pendingRef: {
+    current: Promise<T> | null;
+}, task: () => Promise<T>): Promise<T>;

package/dist/types/controller/usePlaygroundController.d.ts

@@ -5,5 +5,12 @@ export interface UsePlaygroundControllerOptions {
     defaultDeviceType?: DeviceType;
     pollIntervalMs?: number;
     countdownSeconds?: number;
+    /**
+     * Seed values written into the session-setup form on the first render.
+     * Useful for pre-selecting a default platform so the initial
+     * `refreshSessionSetup` poll already has a `platformId`, instead of
+     * returning a generic "Choose a platform" setup.
+     */
+    initialFormValues?: Record<string, unknown>;
 }
-export declare function usePlaygroundController({ serverUrl, defaultDeviceType, pollIntervalMs, countdownSeconds, }: UsePlaygroundControllerOptions): PlaygroundControllerResult;
+export declare function usePlaygroundController({ serverUrl, defaultDeviceType, pollIntervalMs, countdownSeconds, initialFormValues, }: UsePlaygroundControllerOptions): PlaygroundControllerResult;

package/dist/types/panels/PlaygroundConversationPanel.d.ts

@@ -10,6 +10,10 @@ export interface PlaygroundConversationPanelProps {
     playgroundConfig?: Partial<UniversalPlaygroundConfig>;
     header?: ReactNode;
     className?: string;
+    /**
+     * Extra class appended to the inner `UniversalPlayground` root.
+     */
+    playgroundClassName?: string;
     /**
      * Custom content shown while the session is not yet connected.
      * When supplied, replaces the built-in `SessionSetupPanel`, letting hosts
@@ -17,4 +21,4 @@ export interface PlaygroundConversationPanelProps {
      */
     notConnectedFallback?: ReactNode;
 }
-export declare function PlaygroundConversationPanel({ controller, appVersion, title, branding, playgroundConfig, header, className, notConnectedFallback, }: PlaygroundConversationPanelProps): import("react").JSX.Element;
+export declare function PlaygroundConversationPanel({ controller, appVersion, title, branding, playgroundConfig, header, className, playgroundClassName, notConnectedFallback, }: PlaygroundConversationPanelProps): import("react").JSX.Element;

package/dist/types/runtime-info.d.ts

@@ -2,6 +2,7 @@ import type { PlaygroundRuntimeInfo } from '@midscene/playground';
 import type { DeviceType, ExecutionUxHint } from '@midscene/visualizer';
 export interface PreviewConnectionInfo {
     type: 'none' | 'screenshot' | 'mjpeg' | 'scrcpy';
+    deviceId?: string;
     mjpegUrl?: string;
     scrcpyUrl?: string;
     scrcpyPort?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/playground-app",
-  "version": "1.7.5-beta-20260421030751.0",
+  "version": "1.7.5",
   "description": "Reusable React shell for Midscene playground applications",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
@@ -28,9 +28,9 @@
     "antd": "^5.21.6",
     "react-resizable-panels": "2.0.22",
     "socket.io-client": "4.8.1",
-    "@midscene/playground": "1.7.5-beta-20260421030751.0",
-    "@midscene/shared": "1.7.5-beta-20260421030751.0",
-    "@midscene/visualizer": "1.7.5-beta-20260421030751.0"
+    "@midscene/playground": "1.7.5",
+    "@midscene/shared": "1.7.5",
+    "@midscene/visualizer": "1.7.5"
   },
   "devDependencies": {
     "@rsbuild/plugin-less": "^1.5.0",