@midscene/playground-app 1.6.3 → 1.7.0

package/dist/es/PlaygroundApp.mjs

@@ -8,6 +8,7 @@ import { PreviewRenderer } from "./PreviewRenderer.mjs";
 import { SessionSetupPanel } from "./SessionSetupPanel.mjs";
 import server_offline_background from "./icons/server-offline-background.mjs";
 import server_offline_foreground from "./icons/server-offline-foreground.mjs";
+import { resolveAutoCreateSessionInput } from "./session-setup.mjs";
 import { buildSessionInitialValues, resolveSessionViewState } from "./session-state.mjs";
 import { useServerStatus } from "./useServerStatus.mjs";
 import "./PlaygroundApp.css";
@@ -106,7 +107,7 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
         }), [
         serverUrl
     ]);
-    const { serverOnline, isUserOperating, deviceType, runtimeInfo, executionUxHints } = useServerStatus(playgroundSDK, defaultDeviceType, pollIntervalMs);
+    const { serverOnline, isUserOperating, deviceType, runtimeInfo, executionUxHints, refreshServerState } = useServerStatus(playgroundSDK, defaultDeviceType, pollIntervalMs);
     const sessionViewState = useMemo(()=>resolveSessionViewState(runtimeInfo), [
         runtimeInfo
     ]);
@@ -114,6 +115,8 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
     const countdownResolveRef = useRef(null);
     const mountedRef = useRef(true);
     const lastSetupPlatformIdRef = useRef(void 0);
+    const autoCreateSignatureRef = useRef(null);
+    const autoCreateDisabledRef = useRef(false);
     const finishCountdown = useCallback(()=>{
         if (null !== countdownTimerRef.current) {
             window.clearInterval(countdownTimerRef.current);
@@ -242,31 +245,41 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
         version: appVersion,
         targetName: null != (_ref1 = null != (_ref = null != (_runtimeInfo_platformId = null == runtimeInfo ? void 0 : runtimeInfo.platformId) ? _runtimeInfo_platformId : null == branding ? void 0 : branding.targetName) ? _ref : deviceType) ? _ref1 : 'screen'
     });
-    const handleCreateSession = useCallback(()=>_async_to_generator(function*() {
+    const createSession = useCallback((input, options)=>_async_to_generator(function*() {
             try {
-                const values = yield setupForm.validateFields();
+                const values = null != input ? input : yield setupForm.validateFields();
                 setSessionMutating(true);
                 yield playgroundSDK.createSession(values);
-                messageApi.success('Agent created');
-                yield refreshSessionSetup();
+                if (!(null == options ? void 0 : options.silent)) messageApi.success('Agent created');
+                yield refreshServerState();
+                return true;
             } catch (error) {
-                if (error.errorFields) return;
+                if (error.errorFields) return false;
                 const errorMessage = error instanceof Error ? error.message : 'Failed to create Agent';
                 messageApi.error(errorMessage);
+                return false;
             } finally{
                 setSessionMutating(false);
             }
         })(), [
         messageApi,
         playgroundSDK,
-        refreshSessionSetup,
+        refreshServerState,
         setupForm
     ]);
+    const handleCreateSession = useCallback(()=>_async_to_generator(function*() {
+            autoCreateDisabledRef.current = true;
+            yield createSession();
+        })(), [
+        createSession
+    ]);
     const handleDestroySession = useCallback(()=>_async_to_generator(function*() {
             try {
+                autoCreateDisabledRef.current = true;
                 setSessionMutating(true);
                 yield playgroundSDK.destroySession();
                 messageApi.success('Session disconnected');
+                yield refreshServerState();
                 yield refreshSessionSetup();
             } catch (error) {
                 const errorMessage = error instanceof Error ? error.message : 'Failed to disconnect session';
@@ -277,8 +290,39 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
         })(), [
         messageApi,
         playgroundSDK,
+        refreshServerState,
         refreshSessionSetup
     ]);
+    useEffect(()=>{
+        if (sessionViewState.connected) {
+            autoCreateSignatureRef.current = null;
+            return;
+        }
+        if (!serverOnline || sessionLoading || sessionMutating || sessionSetupError || autoCreateDisabledRef.current) return;
+        const autoCreateInput = resolveAutoCreateSessionInput(sessionSetup, setupForm.getFieldsValue(true));
+        if (!autoCreateInput) {
+            autoCreateSignatureRef.current = null;
+            return;
+        }
+        const signature = JSON.stringify(autoCreateInput);
+        if (autoCreateSignatureRef.current === signature) return;
+        autoCreateSignatureRef.current = signature;
+        (()=>_async_to_generator(function*() {
+                const created = yield createSession(autoCreateInput, {
+                    silent: true
+                });
+                if (!created) autoCreateSignatureRef.current = null;
+            })())();
+    }, [
+        createSession,
+        serverOnline,
+        sessionLoading,
+        sessionMutating,
+        sessionSetup,
+        sessionSetupError,
+        sessionViewState.connected,
+        setupForm
+    ]);
     if (!serverOnline) return /*#__PURE__*/ jsx(ConfigProvider, {
         theme: globalThemeConfig(),
         children: /*#__PURE__*/ jsx("div", {
@@ -400,7 +444,8 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
                                                     /*#__PURE__*/ jsx(Logo, {}),
                                                     /*#__PURE__*/ jsx(NavActions, {
                                                         showTooltipWhenEmpty: false,
-                                                        showModelName: false
+                                                        showModelName: false,
+                                                        playgroundSDK: playgroundSDK
                                                     })
                                                 ]
                                             })

package/dist/es/ScrcpyPanel.mjs

@@ -4,6 +4,7 @@ import { BitmapVideoFrameRenderer, WebCodecsVideoDecoder, WebGLVideoFrameRendere
 import { Alert, Button, Card, Space, Spin, Typography } from "antd";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { io } from "socket.io-client";
+import { createScrcpyVideoStream } from "./scrcpy-stream.mjs";
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -131,55 +132,6 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
                 });
                 return decoder;
             })();
-        const setupVideoStream = ()=>{
-            const socket = socketRef.current;
-            let configurationPacketSent = false;
-            let pendingDataPackets = [];
-            const transformStream = new TransformStream({
-                transform (chunk, controller) {
-                    const packet = {
-                        type: chunk.type,
-                        data: new Uint8Array(chunk.data),
-                        timestamp: chunk.timestamp
-                    };
-                    if ('configuration' === packet.type) {
-                        configurationPacketSent = true;
-                        controller.enqueue(packet);
-                        pendingDataPackets.forEach((queuedPacket)=>controller.enqueue(queuedPacket));
-                        pendingDataPackets = [];
-                        return;
-                    }
-                    if ('data' === packet.type && !configurationPacketSent) return void pendingDataPackets.push(packet);
-                    controller.enqueue(packet);
-                }
-            });
-            let cleanupListeners;
-            const readable = new ReadableStream({
-                start (controller) {
-                    const handleVideoData = (data)=>{
-                        try {
-                            controller.enqueue(data);
-                        } catch (error) {
-                            controller.error(error);
-                        }
-                    };
-                    const handleDisconnect = ()=>controller.close();
-                    const handleError = (error)=>controller.error(error);
-                    cleanupListeners = ()=>{
-                        null == socket || socket.off('video-data', handleVideoData);
-                        null == socket || socket.off('disconnect', handleDisconnect);
-                        null == socket || socket.off('error', handleError);
-                    };
-                    null == socket || socket.on('video-data', handleVideoData);
-                    null == socket || socket.on('disconnect', handleDisconnect);
-                    null == socket || socket.on('error', handleError);
-                },
-                cancel () {
-                    null == cleanupListeners || cleanupListeners();
-                }
-            });
-            return readable.pipeThrough(transformStream);
-        };
         const connect = ()=>{
             if (disposed) return;
             manuallyDisconnectedRef.current = false;
@@ -192,6 +144,7 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
                 timeout: 10000
             });
             socketRef.current = socket;
+            const videoStream = createScrcpyVideoStream(socket);
             socket.on('connect', ()=>{
                 socket.emit('connect-device', {
                     maxSize: 1024
@@ -207,7 +160,7 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
                             width: metadata.width,
                             height: metadata.height
                         });
-                        setupVideoStream().pipeTo(decoder.writable).catch((error)=>{
+                        videoStream.pipeTo(decoder.writable).catch((error)=>{
                             if (disposed) return;
                             setStatus('error');
                             setErrorMessage(error.message);

package/dist/es/scrcpy-stream.mjs

@@ -0,0 +1,53 @@
+function createScrcpyVideoStream(socket) {
+    let configurationPacketSent = false;
+    let pendingDataPackets = [];
+    const transformStream = new TransformStream({
+        transform (chunk, controller) {
+            if ('configuration' === chunk.type) {
+                configurationPacketSent = true;
+                controller.enqueue(chunk);
+                pendingDataPackets.forEach((queuedPacket)=>controller.enqueue(queuedPacket));
+                pendingDataPackets = [];
+                return;
+            }
+            if ('data' === chunk.type && !configurationPacketSent) return void pendingDataPackets.push(chunk);
+            controller.enqueue(chunk);
+        }
+    });
+    let cleanupListeners;
+    const readable = new ReadableStream({
+        start (controller) {
+            const handleVideoData = (data)=>{
+                try {
+                    const payload = new Uint8Array(data.data);
+                    if ('configuration' === data.type) return void controller.enqueue({
+                        type: 'configuration',
+                        data: payload
+                    });
+                    controller.enqueue({
+                        type: 'data',
+                        data: payload,
+                        keyframe: data.keyFrame
+                    });
+                } catch (error) {
+                    controller.error(error);
+                }
+            };
+            const handleDisconnect = ()=>controller.close();
+            const handleError = (error)=>controller.error(error);
+            cleanupListeners = ()=>{
+                socket.off('video-data', handleVideoData);
+                socket.off('disconnect', handleDisconnect);
+                socket.off('error', handleError);
+            };
+            socket.on('video-data', handleVideoData);
+            socket.on('disconnect', handleDisconnect);
+            socket.on('error', handleError);
+        },
+        cancel () {
+            null == cleanupListeners || cleanupListeners();
+        }
+    });
+    return readable.pipeThrough(transformStream);
+}
+export { createScrcpyVideoStream };

package/dist/es/session-setup.mjs

@@ -0,0 +1,13 @@
+import { buildSessionInitialValues } from "./session-state.mjs";
+function hasSessionFieldValue(value) {
+    return null != value && '' !== value;
+}
+function resolveAutoCreateSessionInput(setup, existingValues = {}) {
+    if (!(null == setup ? void 0 : setup.autoSubmitWhenReady)) return null;
+    const values = buildSessionInitialValues(setup, existingValues);
+    for (const field of setup.fields)if (field.required) {
+        if (!hasSessionFieldValue(values[field.key])) return null;
+    }
+    return values;
+}
+export { resolveAutoCreateSessionInput };

package/dist/es/useServerStatus.mjs

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { buildFallbackRuntimeInfo, filterValidExecutionUxHints, normalizeRuntimeDeviceType } from "./runtime-info.mjs";
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -33,6 +33,13 @@ function useServerStatus(playgroundSDK, defaultDeviceType, pollIntervalMs) {
     const [runtimeInfo, setRuntimeInfo] = useState(null);
     const [executionUxHints, setExecutionUxHints] = useState([]);
     const runtimeInfoRef = useRef(null);
+    const mountedRef = useRef(true);
+    useEffect(()=>{
+        mountedRef.current = true;
+        return ()=>{
+            mountedRef.current = false;
+        };
+    }, []);
     useEffect(()=>{
         runtimeInfoRef.current = runtimeInfo;
     }, [
@@ -45,65 +52,69 @@ function useServerStatus(playgroundSDK, defaultDeviceType, pollIntervalMs) {
     }, [
         playgroundSDK
     ]);
-    useEffect(()=>{
-        let active = true;
-        const checkServer = ()=>_async_to_generator(function*() {
+    const refreshServerState = useCallback(()=>_async_to_generator(function*() {
+            try {
+                const online = yield playgroundSDK.checkStatus();
+                if (!mountedRef.current) return;
+                setServerOnline(online);
+                if (!online) {
+                    runtimeInfoRef.current = null;
+                    setRuntimeInfo(null);
+                    setExecutionUxHints([]);
+                    return;
+                }
                 try {
-                    const online = yield playgroundSDK.checkStatus();
-                    if (!active) return;
-                    setServerOnline(online);
-                    if (!online) {
-                        runtimeInfoRef.current = null;
-                        setRuntimeInfo(null);
-                        setExecutionUxHints([]);
+                    const nextRuntimeInfo = yield playgroundSDK.getRuntimeInfo();
+                    if (!mountedRef.current) return;
+                    if (nextRuntimeInfo) {
+                        runtimeInfoRef.current = nextRuntimeInfo;
+                        setRuntimeInfo(nextRuntimeInfo);
+                        setDeviceType(normalizeRuntimeDeviceType(nextRuntimeInfo, defaultDeviceType));
+                        setExecutionUxHints(filterValidExecutionUxHints(nextRuntimeInfo));
                         return;
                     }
-                    try {
-                        const nextRuntimeInfo = yield playgroundSDK.getRuntimeInfo();
-                        if (!active) return;
-                        if (nextRuntimeInfo) {
-                            setRuntimeInfo(nextRuntimeInfo);
-                            setDeviceType(normalizeRuntimeDeviceType(nextRuntimeInfo, defaultDeviceType));
-                            setExecutionUxHints(filterValidExecutionUxHints(nextRuntimeInfo));
-                            return;
-                        }
-                    } catch (error) {
-                        console.warn('Failed to get runtime info:', error);
-                    }
-                    try {
-                        const interfaceInfo = yield playgroundSDK.getInterfaceInfo();
-                        if (!active || !(null == interfaceInfo ? void 0 : interfaceInfo.type)) return;
-                        const fallbackRuntimeInfo = buildFallbackRuntimeInfo(runtimeInfoRef.current, interfaceInfo);
-                        runtimeInfoRef.current = fallbackRuntimeInfo;
-                        setRuntimeInfo(fallbackRuntimeInfo);
-                        setDeviceType(normalizeRuntimeDeviceType(fallbackRuntimeInfo, defaultDeviceType));
-                        setExecutionUxHints(filterValidExecutionUxHints(fallbackRuntimeInfo));
-                    } catch (error) {
-                        console.warn('Failed to get interface info:', error);
-                    }
                 } catch (error) {
-                    if (!active) return;
-                    console.error('Failed to check server status:', error);
-                    setServerOnline(false);
+                    console.warn('Failed to get runtime info:', error);
                 }
-            })();
-        checkServer();
-        const interval = window.setInterval(checkServer, pollIntervalMs);
+                try {
+                    const interfaceInfo = yield playgroundSDK.getInterfaceInfo();
+                    if (!mountedRef.current || !(null == interfaceInfo ? void 0 : interfaceInfo.type)) return;
+                    const fallbackRuntimeInfo = buildFallbackRuntimeInfo(runtimeInfoRef.current, interfaceInfo);
+                    runtimeInfoRef.current = fallbackRuntimeInfo;
+                    setRuntimeInfo(fallbackRuntimeInfo);
+                    setDeviceType(normalizeRuntimeDeviceType(fallbackRuntimeInfo, defaultDeviceType));
+                    setExecutionUxHints(filterValidExecutionUxHints(fallbackRuntimeInfo));
+                } catch (error) {
+                    console.warn('Failed to get interface info:', error);
+                }
+            } catch (error) {
+                if (!mountedRef.current) return;
+                console.error('Failed to check server status:', error);
+                setServerOnline(false);
+            }
+        })(), [
+        defaultDeviceType,
+        playgroundSDK
+    ]);
+    useEffect(()=>{
+        refreshServerState();
+        const interval = window.setInterval(()=>{
+            refreshServerState();
+        }, pollIntervalMs);
         return ()=>{
-            active = false;
             window.clearInterval(interval);
         };
     }, [
-        playgroundSDK,
         pollIntervalMs,
-        defaultDeviceType
+        refreshServerState
     ]);
     return {
         serverOnline,
         isUserOperating,
         deviceType,
         runtimeInfo,
-        executionUxHints
+        executionUxHints,
+        refreshServerState
     };
 }
 export { useServerStatus };

package/dist/lib/PlaygroundApp.js

@@ -47,6 +47,7 @@ const server_offline_background_js_namespaceObject = require("./icons/server-off
 var server_offline_background_js_default = /*#__PURE__*/ __webpack_require__.n(server_offline_background_js_namespaceObject);
 const server_offline_foreground_js_namespaceObject = require("./icons/server-offline-foreground.js");
 var server_offline_foreground_js_default = /*#__PURE__*/ __webpack_require__.n(server_offline_foreground_js_namespaceObject);
+const external_session_setup_js_namespaceObject = require("./session-setup.js");
 const external_session_state_js_namespaceObject = require("./session-state.js");
 const external_useServerStatus_js_namespaceObject = require("./useServerStatus.js");
 require("./PlaygroundApp.css");
@@ -145,7 +146,7 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
         }), [
         serverUrl
     ]);
-    const { serverOnline, isUserOperating, deviceType, runtimeInfo, executionUxHints } = (0, external_useServerStatus_js_namespaceObject.useServerStatus)(playgroundSDK, defaultDeviceType, pollIntervalMs);
+    const { serverOnline, isUserOperating, deviceType, runtimeInfo, executionUxHints, refreshServerState } = (0, external_useServerStatus_js_namespaceObject.useServerStatus)(playgroundSDK, defaultDeviceType, pollIntervalMs);
     const sessionViewState = (0, external_react_namespaceObject.useMemo)(()=>(0, external_session_state_js_namespaceObject.resolveSessionViewState)(runtimeInfo), [
         runtimeInfo
     ]);
@@ -153,6 +154,8 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
     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 autoCreateDisabledRef = (0, external_react_namespaceObject.useRef)(false);
     const finishCountdown = (0, external_react_namespaceObject.useCallback)(()=>{
         if (null !== countdownTimerRef.current) {
             window.clearInterval(countdownTimerRef.current);
@@ -281,31 +284,41 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
         version: appVersion,
         targetName: null != (_ref1 = null != (_ref = null != (_runtimeInfo_platformId = null == runtimeInfo ? void 0 : runtimeInfo.platformId) ? _runtimeInfo_platformId : null == branding ? void 0 : branding.targetName) ? _ref : deviceType) ? _ref1 : 'screen'
     });
-    const handleCreateSession = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
+    const createSession = (0, external_react_namespaceObject.useCallback)((input, options)=>_async_to_generator(function*() {
             try {
-                const values = yield setupForm.validateFields();
+                const values = null != input ? input : yield setupForm.validateFields();
                 setSessionMutating(true);
                 yield playgroundSDK.createSession(values);
-                messageApi.success('Agent created');
-                yield refreshSessionSetup();
+                if (!(null == options ? void 0 : options.silent)) messageApi.success('Agent created');
+                yield refreshServerState();
+                return true;
             } catch (error) {
-                if (error.errorFields) return;
+                if (error.errorFields) return false;
                 const errorMessage = error instanceof Error ? error.message : 'Failed to create Agent';
                 messageApi.error(errorMessage);
+                return false;
             } finally{
                 setSessionMutating(false);
             }
         })(), [
         messageApi,
         playgroundSDK,
-        refreshSessionSetup,
+        refreshServerState,
         setupForm
     ]);
+    const handleCreateSession = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
+            autoCreateDisabledRef.current = true;
+            yield createSession();
+        })(), [
+        createSession
+    ]);
     const handleDestroySession = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
             try {
+                autoCreateDisabledRef.current = true;
                 setSessionMutating(true);
                 yield playgroundSDK.destroySession();
                 messageApi.success('Session disconnected');
+                yield refreshServerState();
                 yield refreshSessionSetup();
             } catch (error) {
                 const errorMessage = error instanceof Error ? error.message : 'Failed to disconnect session';
@@ -316,8 +329,39 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
         })(), [
         messageApi,
         playgroundSDK,
+        refreshServerState,
         refreshSessionSetup
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (sessionViewState.connected) {
+            autoCreateSignatureRef.current = null;
+            return;
+        }
+        if (!serverOnline || sessionLoading || sessionMutating || sessionSetupError || autoCreateDisabledRef.current) return;
+        const autoCreateInput = (0, external_session_setup_js_namespaceObject.resolveAutoCreateSessionInput)(sessionSetup, setupForm.getFieldsValue(true));
+        if (!autoCreateInput) {
+            autoCreateSignatureRef.current = null;
+            return;
+        }
+        const signature = JSON.stringify(autoCreateInput);
+        if (autoCreateSignatureRef.current === signature) return;
+        autoCreateSignatureRef.current = signature;
+        (()=>_async_to_generator(function*() {
+                const created = yield createSession(autoCreateInput, {
+                    silent: true
+                });
+                if (!created) autoCreateSignatureRef.current = null;
+            })())();
+    }, [
+        createSession,
+        serverOnline,
+        sessionLoading,
+        sessionMutating,
+        sessionSetup,
+        sessionSetupError,
+        sessionViewState.connected,
+        setupForm
+    ]);
     if (!serverOnline) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.ConfigProvider, {
         theme: (0, visualizer_namespaceObject.globalThemeConfig)(),
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -439,7 +483,8 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
                                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(visualizer_namespaceObject.Logo, {}),
                                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(visualizer_namespaceObject.NavActions, {
                                                         showTooltipWhenEmpty: false,
-                                                        showModelName: false
+                                                        showModelName: false,
+                                                        playgroundSDK: playgroundSDK
                                                     })
                                                 ]
                                             })

package/dist/lib/ScrcpyPanel.js

@@ -32,6 +32,7 @@ const scrcpy_decoder_webcodecs_namespaceObject = require("@yume-chan/scrcpy-deco
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
 const external_socket_io_client_namespaceObject = require("socket.io-client");
+const external_scrcpy_stream_js_namespaceObject = require("./scrcpy-stream.js");
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -159,55 +160,6 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
                 });
                 return decoder;
             })();
-        const setupVideoStream = ()=>{
-            const socket = socketRef.current;
-            let configurationPacketSent = false;
-            let pendingDataPackets = [];
-            const transformStream = new TransformStream({
-                transform (chunk, controller) {
-                    const packet = {
-                        type: chunk.type,
-                        data: new Uint8Array(chunk.data),
-                        timestamp: chunk.timestamp
-                    };
-                    if ('configuration' === packet.type) {
-                        configurationPacketSent = true;
-                        controller.enqueue(packet);
-                        pendingDataPackets.forEach((queuedPacket)=>controller.enqueue(queuedPacket));
-                        pendingDataPackets = [];
-                        return;
-                    }
-                    if ('data' === packet.type && !configurationPacketSent) return void pendingDataPackets.push(packet);
-                    controller.enqueue(packet);
-                }
-            });
-            let cleanupListeners;
-            const readable = new ReadableStream({
-                start (controller) {
-                    const handleVideoData = (data)=>{
-                        try {
-                            controller.enqueue(data);
-                        } catch (error) {
-                            controller.error(error);
-                        }
-                    };
-                    const handleDisconnect = ()=>controller.close();
-                    const handleError = (error)=>controller.error(error);
-                    cleanupListeners = ()=>{
-                        null == socket || socket.off('video-data', handleVideoData);
-                        null == socket || socket.off('disconnect', handleDisconnect);
-                        null == socket || socket.off('error', handleError);
-                    };
-                    null == socket || socket.on('video-data', handleVideoData);
-                    null == socket || socket.on('disconnect', handleDisconnect);
-                    null == socket || socket.on('error', handleError);
-                },
-                cancel () {
-                    null == cleanupListeners || cleanupListeners();
-                }
-            });
-            return readable.pipeThrough(transformStream);
-        };
         const connect = ()=>{
             if (disposed) return;
             manuallyDisconnectedRef.current = false;
@@ -220,6 +172,7 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
                 timeout: 10000
             });
             socketRef.current = socket;
+            const videoStream = (0, external_scrcpy_stream_js_namespaceObject.createScrcpyVideoStream)(socket);
             socket.on('connect', ()=>{
                 socket.emit('connect-device', {
                     maxSize: 1024
@@ -235,7 +188,7 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
                             width: metadata.width,
                             height: metadata.height
                         });
-                        setupVideoStream().pipeTo(decoder.writable).catch((error)=>{
+                        videoStream.pipeTo(decoder.writable).catch((error)=>{
                             if (disposed) return;
                             setStatus('error');
                             setErrorMessage(error.message);

package/dist/lib/scrcpy-stream.js

@@ -0,0 +1,87 @@
+"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__, {
+    createScrcpyVideoStream: ()=>createScrcpyVideoStream
+});
+function createScrcpyVideoStream(socket) {
+    let configurationPacketSent = false;
+    let pendingDataPackets = [];
+    const transformStream = new TransformStream({
+        transform (chunk, controller) {
+            if ('configuration' === chunk.type) {
+                configurationPacketSent = true;
+                controller.enqueue(chunk);
+                pendingDataPackets.forEach((queuedPacket)=>controller.enqueue(queuedPacket));
+                pendingDataPackets = [];
+                return;
+            }
+            if ('data' === chunk.type && !configurationPacketSent) return void pendingDataPackets.push(chunk);
+            controller.enqueue(chunk);
+        }
+    });
+    let cleanupListeners;
+    const readable = new ReadableStream({
+        start (controller) {
+            const handleVideoData = (data)=>{
+                try {
+                    const payload = new Uint8Array(data.data);
+                    if ('configuration' === data.type) return void controller.enqueue({
+                        type: 'configuration',
+                        data: payload
+                    });
+                    controller.enqueue({
+                        type: 'data',
+                        data: payload,
+                        keyframe: data.keyFrame
+                    });
+                } catch (error) {
+                    controller.error(error);
+                }
+            };
+            const handleDisconnect = ()=>controller.close();
+            const handleError = (error)=>controller.error(error);
+            cleanupListeners = ()=>{
+                socket.off('video-data', handleVideoData);
+                socket.off('disconnect', handleDisconnect);
+                socket.off('error', handleError);
+            };
+            socket.on('video-data', handleVideoData);
+            socket.on('disconnect', handleDisconnect);
+            socket.on('error', handleError);
+        },
+        cancel () {
+            null == cleanupListeners || cleanupListeners();
+        }
+    });
+    return readable.pipeThrough(transformStream);
+}
+exports.createScrcpyVideoStream = __webpack_exports__.createScrcpyVideoStream;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "createScrcpyVideoStream"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/session-setup.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__, {
+    resolveAutoCreateSessionInput: ()=>resolveAutoCreateSessionInput
+});
+const external_session_state_js_namespaceObject = require("./session-state.js");
+function hasSessionFieldValue(value) {
+    return null != value && '' !== value;
+}
+function resolveAutoCreateSessionInput(setup, existingValues = {}) {
+    if (!(null == setup ? void 0 : setup.autoSubmitWhenReady)) return null;
+    const values = (0, external_session_state_js_namespaceObject.buildSessionInitialValues)(setup, existingValues);
+    for (const field of setup.fields)if (field.required) {
+        if (!hasSessionFieldValue(values[field.key])) return null;
+    }
+    return values;
+}
+exports.resolveAutoCreateSessionInput = __webpack_exports__.resolveAutoCreateSessionInput;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "resolveAutoCreateSessionInput"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/useServerStatus.js

@@ -61,6 +61,13 @@ function useServerStatus(playgroundSDK, defaultDeviceType, pollIntervalMs) {
     const [runtimeInfo, setRuntimeInfo] = (0, external_react_namespaceObject.useState)(null);
     const [executionUxHints, setExecutionUxHints] = (0, external_react_namespaceObject.useState)([]);
     const runtimeInfoRef = (0, external_react_namespaceObject.useRef)(null);
+    const mountedRef = (0, external_react_namespaceObject.useRef)(true);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        mountedRef.current = true;
+        return ()=>{
+            mountedRef.current = false;
+        };
+    }, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
         runtimeInfoRef.current = runtimeInfo;
     }, [
@@ -73,65 +80,69 @@ function useServerStatus(playgroundSDK, defaultDeviceType, pollIntervalMs) {
     }, [
         playgroundSDK
     ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        let active = true;
-        const checkServer = ()=>_async_to_generator(function*() {
+    const refreshServerState = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
+            try {
+                const online = yield playgroundSDK.checkStatus();
+                if (!mountedRef.current) return;
+                setServerOnline(online);
+                if (!online) {
+                    runtimeInfoRef.current = null;
+                    setRuntimeInfo(null);
+                    setExecutionUxHints([]);
+                    return;
+                }
                 try {
-                    const online = yield playgroundSDK.checkStatus();
-                    if (!active) return;
-                    setServerOnline(online);
-                    if (!online) {
-                        runtimeInfoRef.current = null;
-                        setRuntimeInfo(null);
-                        setExecutionUxHints([]);
+                    const nextRuntimeInfo = yield playgroundSDK.getRuntimeInfo();
+                    if (!mountedRef.current) return;
+                    if (nextRuntimeInfo) {
+                        runtimeInfoRef.current = nextRuntimeInfo;
+                        setRuntimeInfo(nextRuntimeInfo);
+                        setDeviceType((0, external_runtime_info_js_namespaceObject.normalizeRuntimeDeviceType)(nextRuntimeInfo, defaultDeviceType));
+                        setExecutionUxHints((0, external_runtime_info_js_namespaceObject.filterValidExecutionUxHints)(nextRuntimeInfo));
                         return;
                     }
-                    try {
-                        const nextRuntimeInfo = yield playgroundSDK.getRuntimeInfo();
-                        if (!active) return;
-                        if (nextRuntimeInfo) {
-                            setRuntimeInfo(nextRuntimeInfo);
-                            setDeviceType((0, external_runtime_info_js_namespaceObject.normalizeRuntimeDeviceType)(nextRuntimeInfo, defaultDeviceType));
-                            setExecutionUxHints((0, external_runtime_info_js_namespaceObject.filterValidExecutionUxHints)(nextRuntimeInfo));
-                            return;
-                        }
-                    } catch (error) {
-                        console.warn('Failed to get runtime info:', error);
-                    }
-                    try {
-                        const interfaceInfo = yield playgroundSDK.getInterfaceInfo();
-                        if (!active || !(null == interfaceInfo ? void 0 : interfaceInfo.type)) return;
-                        const fallbackRuntimeInfo = (0, external_runtime_info_js_namespaceObject.buildFallbackRuntimeInfo)(runtimeInfoRef.current, interfaceInfo);
-                        runtimeInfoRef.current = fallbackRuntimeInfo;
-                        setRuntimeInfo(fallbackRuntimeInfo);
-                        setDeviceType((0, external_runtime_info_js_namespaceObject.normalizeRuntimeDeviceType)(fallbackRuntimeInfo, defaultDeviceType));
-                        setExecutionUxHints((0, external_runtime_info_js_namespaceObject.filterValidExecutionUxHints)(fallbackRuntimeInfo));
-                    } catch (error) {
-                        console.warn('Failed to get interface info:', error);
-                    }
                 } catch (error) {
-                    if (!active) return;
-                    console.error('Failed to check server status:', error);
-                    setServerOnline(false);
+                    console.warn('Failed to get runtime info:', error);
                 }
-            })();
-        checkServer();
-        const interval = window.setInterval(checkServer, pollIntervalMs);
+                try {
+                    const interfaceInfo = yield playgroundSDK.getInterfaceInfo();
+                    if (!mountedRef.current || !(null == interfaceInfo ? void 0 : interfaceInfo.type)) return;
+                    const fallbackRuntimeInfo = (0, external_runtime_info_js_namespaceObject.buildFallbackRuntimeInfo)(runtimeInfoRef.current, interfaceInfo);
+                    runtimeInfoRef.current = fallbackRuntimeInfo;
+                    setRuntimeInfo(fallbackRuntimeInfo);
+                    setDeviceType((0, external_runtime_info_js_namespaceObject.normalizeRuntimeDeviceType)(fallbackRuntimeInfo, defaultDeviceType));
+                    setExecutionUxHints((0, external_runtime_info_js_namespaceObject.filterValidExecutionUxHints)(fallbackRuntimeInfo));
+                } catch (error) {
+                    console.warn('Failed to get interface info:', error);
+                }
+            } catch (error) {
+                if (!mountedRef.current) return;
+                console.error('Failed to check server status:', error);
+                setServerOnline(false);
+            }
+        })(), [
+        defaultDeviceType,
+        playgroundSDK
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        refreshServerState();
+        const interval = window.setInterval(()=>{
+            refreshServerState();
+        }, pollIntervalMs);
         return ()=>{
-            active = false;
             window.clearInterval(interval);
         };
     }, [
-        playgroundSDK,
         pollIntervalMs,
-        defaultDeviceType
+        refreshServerState
     ]);
     return {
         serverOnline,
         isUserOperating,
         deviceType,
         runtimeInfo,
-        executionUxHints
+        executionUxHints,
+        refreshServerState
     };
 }
 exports.useServerStatus = __webpack_exports__.useServerStatus;

package/dist/types/scrcpy-stream.d.ts

@@ -0,0 +1,16 @@
+import type { ScrcpyMediaStreamPacket } from '@yume-chan/scrcpy';
+interface RawScrcpyVideoPacket {
+    type?: string;
+    data: ArrayLike<number>;
+    keyFrame?: boolean;
+}
+interface ScrcpyVideoSocketLike {
+    on(event: 'video-data', handler: (data: RawScrcpyVideoPacket) => void): void;
+    on(event: 'disconnect', handler: () => void): void;
+    on(event: 'error', handler: (error: Error) => void): void;
+    off(event: 'video-data', handler: (data: RawScrcpyVideoPacket) => void): void;
+    off(event: 'disconnect', handler: () => void): void;
+    off(event: 'error', handler: (error: Error) => void): void;
+}
+export declare function createScrcpyVideoStream(socket: ScrcpyVideoSocketLike): ReadableStream<ScrcpyMediaStreamPacket>;
+export {};

package/dist/types/session-setup.d.ts

@@ -0,0 +1,2 @@
+import type { PlaygroundSessionSetup } from '@midscene/playground';
+export declare function resolveAutoCreateSessionInput(setup: PlaygroundSessionSetup | null, existingValues?: Record<string, unknown>): Record<string, unknown> | null;

package/dist/types/useServerStatus.d.ts

@@ -6,6 +6,7 @@ interface ServerStatusResult {
     deviceType: DeviceType;
     runtimeInfo: PlaygroundRuntimeInfo | null;
     executionUxHints: ExecutionUxHint[];
+    refreshServerState: () => Promise<void>;
 }
 export declare function useServerStatus(playgroundSDK: PlaygroundSDK, defaultDeviceType: DeviceType, pollIntervalMs: number): ServerStatusResult;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/playground-app",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "description": "Reusable React shell for Midscene playground applications",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
@@ -28,8 +28,8 @@
     "antd": "^5.21.6",
     "react-resizable-panels": "2.0.22",
     "socket.io-client": "4.8.1",
-    "@midscene/playground": "1.6.3",
-    "@midscene/visualizer": "1.6.3"
+    "@midscene/playground": "1.7.0",
+    "@midscene/visualizer": "1.7.0"
   },
   "devDependencies": {
     "@rsbuild/plugin-less": "^1.5.0",
@@ -43,7 +43,8 @@
     "less": "^4.2.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vitest": "3.0.5"
   },
   "sideEffects": [
     "**/*.css",
@@ -58,6 +59,8 @@
   "scripts": {
     "dev": "npm run build:watch",
     "build": "rslib build",
-    "build:watch": "rslib build --watch --no-clean"
+    "build:watch": "rslib build --watch --no-clean",
+    "test": "vitest --run",
+    "test:watch": "vitest"
   }
 }