@midscene/playground-app 1.7.3 → 1.7.4

package/dist/es/PlaygroundApp.mjs

@@ -1,223 +1,25 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { PlaygroundSDK } from "@midscene/playground";
-import { Logo, NavActions, UniversalPlayground, globalThemeConfig } from "@midscene/visualizer";
-import { Alert, Button, ConfigProvider, Form, Layout, Modal, Space, Typography, message } from "antd";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Logo, NavActions } from "@midscene/visualizer";
+import { Layout } from "antd";
+import { useEffect, useState } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import { PreviewRenderer } from "./PreviewRenderer.mjs";
-import { SessionSetupPanel } from "./SessionSetupPanel.mjs";
+import { PlaygroundPreview } from "./PlaygroundPreview.mjs";
+import { PlaygroundThemeProvider } from "./PlaygroundThemeProvider.mjs";
+import { usePlaygroundController } from "./controller/usePlaygroundController.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 { PlaygroundConversationPanel } from "./panels/PlaygroundConversationPanel.mjs";
 import "./PlaygroundApp.css";
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-    try {
-        var info = gen[key](arg);
-        var value = info.value;
-    } catch (error) {
-        reject(error);
-        return;
-    }
-    if (info.done) resolve(value);
-    else Promise.resolve(value).then(_next, _throw);
-}
-function _async_to_generator(fn) {
-    return function() {
-        var self = this, args = arguments;
-        return new Promise(function(resolve, reject) {
-            var gen = fn.apply(self, args);
-            function _next(value) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-            }
-            function _throw(err) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-            }
-            _next(void 0);
-        });
-    };
-}
-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 PlaygroundApp_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 PlaygroundApp_ownKeys(Object(source)).forEach(function(key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-    return target;
-}
 const { Content } = Layout;
-const { Text } = Typography;
-function getPlatformSelectorFieldKey(setup) {
-    var _setup_platformSelector;
-    return null == setup ? void 0 : null == (_setup_platformSelector = setup.platformSelector) ? void 0 : _setup_platformSelector.fieldKey;
-}
 function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDeviceType = 'web', branding, playgroundConfig, offlineTitle = 'Midscene Playground', offlineStatusText = 'Server offline...', pollIntervalMs = 5000 }) {
     var _playgroundConfig_executionUx;
     const [isNarrowScreen, setIsNarrowScreen] = useState(false);
-    const [countdown, setCountdown] = useState(null);
-    const [setupForm] = Form.useForm();
-    const [sessionSetup, setSessionSetup] = useState(null);
-    const [sessionSetupError, setSessionSetupError] = useState(null);
-    const [sessionLoading, setSessionLoading] = useState(false);
-    const [sessionMutating, setSessionMutating] = useState(false);
-    const [messageApi, messageContextHolder] = message.useMessage();
-    var _playgroundConfig_executionUx_countdownSeconds;
-    const countdownSeconds = null != (_playgroundConfig_executionUx_countdownSeconds = null == playgroundConfig ? void 0 : null == (_playgroundConfig_executionUx = playgroundConfig.executionUx) ? void 0 : _playgroundConfig_executionUx.countdownSeconds) ? _playgroundConfig_executionUx_countdownSeconds : 3;
-    const platformSelectorFieldKey = getPlatformSelectorFieldKey(sessionSetup);
-    var _Form_useWatch;
-    const selectedPlatformId = null != (_Form_useWatch = Form.useWatch(platformSelectorFieldKey || 'platformId', setupForm)) ? _Form_useWatch : void 0;
-    const playgroundSDK = useMemo(()=>new PlaygroundSDK({
-            type: 'remote-execution',
-            serverUrl
-        }), [
-        serverUrl
-    ]);
-    const { serverOnline, isUserOperating, deviceType, runtimeInfo, executionUxHints, refreshServerState } = useServerStatus(playgroundSDK, defaultDeviceType, pollIntervalMs);
-    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 autoCreateDisabledRef = useRef(false);
-    const finishCountdown = useCallback(()=>{
-        if (null !== countdownTimerRef.current) {
-            window.clearInterval(countdownTimerRef.current);
-            countdownTimerRef.current = null;
-        }
-        const resolve = countdownResolveRef.current;
-        countdownResolveRef.current = null;
-        if (mountedRef.current) setCountdown(null);
-        null == resolve || resolve();
-    }, []);
-    const showCountdownModal = useCallback(()=>_async_to_generator(function*() {
-            if (countdownSeconds <= 0) return;
-            finishCountdown();
-            return new Promise((resolve)=>{
-                countdownResolveRef.current = resolve;
-                let count = countdownSeconds;
-                if (mountedRef.current) setCountdown(count);
-                countdownTimerRef.current = window.setInterval(()=>{
-                    count -= 1;
-                    if (count > 0) {
-                        if (mountedRef.current) setCountdown(count);
-                        return;
-                    }
-                    if (0 === count) {
-                        if (mountedRef.current) setCountdown('GO!');
-                        return;
-                    }
-                    finishCountdown();
-                }, 1000);
-            });
-        })(), [
-        countdownSeconds,
-        finishCountdown
-    ]);
-    useEffect(()=>{
-        mountedRef.current = true;
-        return ()=>{
-            mountedRef.current = false;
-            finishCountdown();
-        };
-    }, [
-        finishCountdown
-    ]);
-    useEffect(()=>{
-        if (!executionUxHints.includes('countdown-before-run')) return void playgroundSDK.setBeforeActionHook(void 0);
-        playgroundSDK.setBeforeActionHook(()=>_async_to_generator(function*() {
-                yield showCountdownModal();
-            })());
-        return ()=>{
-            playgroundSDK.setBeforeActionHook(void 0);
-        };
-    }, [
-        executionUxHints,
-        playgroundSDK,
-        showCountdownModal
-    ]);
-    const refreshSessionSetup = useCallback((input)=>_async_to_generator(function*() {
-            const currentValues = _object_spread({}, setupForm.getFieldsValue(true), input || {});
-            setSessionLoading(true);
-            try {
-                const setup = yield playgroundSDK.getSessionSetup(input);
-                setSessionSetup(setup);
-                setSessionSetupError(null);
-                const currentPlatformSelectorFieldKey = getPlatformSelectorFieldKey(setup);
-                lastSetupPlatformIdRef.current = currentPlatformSelectorFieldKey && 'string' == typeof currentValues[currentPlatformSelectorFieldKey] ? currentValues[currentPlatformSelectorFieldKey] : void 0;
-                setupForm.setFieldsValue(buildSessionInitialValues(setup, currentValues));
-            } catch (error) {
-                console.error('Failed to load session setup:', error);
-                setSessionSetupError(error instanceof Error ? error.message : 'Failed to load session setup');
-            } finally{
-                setSessionLoading(false);
-            }
-        })(), [
-        playgroundSDK,
-        setupForm
-    ]);
-    useEffect(()=>{
-        if (!serverOnline || sessionViewState.connected) return;
-        refreshSessionSetup();
-    }, [
-        refreshSessionSetup,
-        serverOnline,
-        sessionViewState.connected
-    ]);
-    useEffect(()=>{
-        if (!serverOnline || sessionViewState.connected || !selectedPlatformId) return;
-        const currentPlatformSelectorFieldKey = getPlatformSelectorFieldKey(sessionSetup);
-        if (!currentPlatformSelectorFieldKey) return;
-        if (lastSetupPlatformIdRef.current === selectedPlatformId) return;
-        refreshSessionSetup(_object_spread_props(_object_spread({}, setupForm.getFieldsValue(true)), {
-            [currentPlatformSelectorFieldKey]: selectedPlatformId
-        }));
-    }, [
-        platformSelectorFieldKey,
-        refreshSessionSetup,
-        selectedPlatformId,
-        serverOnline,
-        sessionSetup,
-        sessionViewState.connected,
-        setupForm
-    ]);
+    const controller = usePlaygroundController({
+        serverUrl,
+        defaultDeviceType,
+        countdownSeconds: null == playgroundConfig ? void 0 : null == (_playgroundConfig_executionUx = playgroundConfig.executionUx) ? void 0 : _playgroundConfig_executionUx.countdownSeconds,
+        pollIntervalMs
+    });
     useEffect(()=>{
         const handleResize = ()=>{
             setIsNarrowScreen(window.innerWidth <= 1024);
@@ -226,105 +28,7 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
         window.addEventListener('resize', handleResize);
         return ()=>window.removeEventListener('resize', handleResize);
     }, []);
-    const mergedConfig = _object_spread({
-        showContextPreview: false,
-        layout: 'vertical',
-        showVersionInfo: true,
-        enableScrollToBottom: true,
-        serverMode: true,
-        showEnvConfigReminder: true,
-        deviceType,
-        executionUx: {
-            hints: executionUxHints,
-            countdownSeconds
-        }
-    }, playgroundConfig);
-    var _runtimeInfo_title, _runtimeInfo_platformId, _ref, _ref1;
-    const mergedBranding = _object_spread_props(_object_spread({}, branding), {
-        title: null != (_runtimeInfo_title = null == runtimeInfo ? void 0 : runtimeInfo.title) ? _runtimeInfo_title : title,
-        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 createSession = useCallback((input, options)=>_async_to_generator(function*() {
-            try {
-                const values = null != input ? input : yield setupForm.validateFields();
-                setSessionMutating(true);
-                yield playgroundSDK.createSession(values);
-                if (!(null == options ? void 0 : options.silent)) messageApi.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';
-                messageApi.error(errorMessage);
-                return false;
-            } finally{
-                setSessionMutating(false);
-            }
-        })(), [
-        messageApi,
-        playgroundSDK,
-        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';
-                messageApi.error(errorMessage);
-            } finally{
-                setSessionMutating(false);
-            }
-        })(), [
-        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(),
+    if (!controller.state.serverOnline) return /*#__PURE__*/ jsx(PlaygroundThemeProvider, {
         children: /*#__PURE__*/ jsx("div", {
             className: "server-offline-container",
             children: /*#__PURE__*/ jsxs("div", {
@@ -358,166 +62,72 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
             })
         })
     });
-    return /*#__PURE__*/ jsxs(ConfigProvider, {
-        theme: globalThemeConfig(),
-        children: [
-            messageContextHolder,
-            /*#__PURE__*/ jsx(Modal, {
-                open: null !== countdown,
-                footer: /*#__PURE__*/ jsx(Button, {
-                    onClick: finishCountdown,
-                    type: "default",
-                    children: "Skip countdown"
-                }),
-                closable: true,
-                maskClosable: true,
-                onCancel: finishCountdown,
-                centered: true,
-                width: 400,
-                style: {
-                    top: '30%'
-                },
-                styles: {
-                    mask: {
-                        backgroundColor: 'rgba(0, 0, 0, 0.75)'
-                    }
-                },
-                children: /*#__PURE__*/ jsxs("div", {
-                    style: {
-                        textAlign: 'center',
-                        padding: '40px 20px'
-                    },
+    return /*#__PURE__*/ jsx(PlaygroundThemeProvider, {
+        children: /*#__PURE__*/ jsx(Layout, {
+            className: "app-container playground-container",
+            children: /*#__PURE__*/ jsx(Content, {
+                className: "app-content",
+                children: /*#__PURE__*/ jsxs(PanelGroup, {
+                    autoSaveId: "playground-layout",
+                    direction: isNarrowScreen ? 'vertical' : 'horizontal',
                     children: [
-                        /*#__PURE__*/ jsx("div", {
-                            style: {
-                                fontSize: '72px',
-                                fontWeight: 'bold',
-                                color: 'GO!' === countdown ? '#52c41a' : '#1890ff',
-                                marginBottom: '24px',
-                                lineHeight: 1
-                            },
-                            children: countdown
-                        }),
-                        /*#__PURE__*/ jsx("div", {
-                            style: {
-                                fontSize: '18px',
-                                fontWeight: 500,
-                                marginBottom: '12px'
-                            },
-                            children: "Automation Starting Soon"
-                        }),
-                        /*#__PURE__*/ jsxs("div", {
-                            style: {
-                                fontSize: '14px',
-                                color: 'rgba(0, 0, 0, 0.65)'
-                            },
-                            children: [
-                                "The selected session requested a countdown before execution.",
-                                /*#__PURE__*/ jsx("br", {}),
-                                "Please wait until the run starts."
-                            ]
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsx(Layout, {
-                className: "app-container playground-container",
-                children: /*#__PURE__*/ jsx(Content, {
-                    className: "app-content",
-                    children: /*#__PURE__*/ jsxs(PanelGroup, {
-                        autoSaveId: "playground-layout",
-                        direction: isNarrowScreen ? 'vertical' : 'horizontal',
-                        children: [
-                            /*#__PURE__*/ jsx(Panel, {
-                                defaultSize: isNarrowScreen ? 67 : 32,
-                                maxSize: isNarrowScreen ? 85 : 60,
-                                minSize: isNarrowScreen ? 67 : 25,
-                                className: "app-panel left-panel",
-                                children: /*#__PURE__*/ jsxs("div", {
-                                    className: "panel-content left-panel-content",
-                                    children: [
-                                        /*#__PURE__*/ jsx("div", {
-                                            className: "playground-panel-header",
-                                            children: /*#__PURE__*/ jsxs("div", {
-                                                className: "header-row",
-                                                children: [
-                                                    /*#__PURE__*/ jsx(Logo, {}),
-                                                    /*#__PURE__*/ jsx(NavActions, {
-                                                        showTooltipWhenEmpty: false,
-                                                        showModelName: false,
-                                                        playgroundSDK: playgroundSDK
-                                                    })
-                                                ]
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsx("div", {
-                                            className: "playground-panel-playground",
-                                            children: sessionViewState.connected ? /*#__PURE__*/ jsx(UniversalPlayground, {
-                                                playgroundSDK: playgroundSDK,
-                                                config: mergedConfig,
-                                                branding: mergedBranding,
-                                                className: "playground-container"
-                                            }) : /*#__PURE__*/ jsx(SessionSetupPanel, {
-                                                form: setupForm,
-                                                sessionSetup: sessionSetup,
-                                                sessionSetupError: sessionSetupError,
-                                                sessionViewState: sessionViewState,
-                                                sessionLoading: sessionLoading,
-                                                sessionMutating: sessionMutating,
-                                                onCreateSession: handleCreateSession,
-                                                onRefreshTargets: ()=>refreshSessionSetup(setupForm.getFieldsValue(true))
-                                            })
+                        /*#__PURE__*/ jsx(Panel, {
+                            defaultSize: isNarrowScreen ? 67 : 32,
+                            maxSize: isNarrowScreen ? 85 : 60,
+                            minSize: isNarrowScreen ? 67 : 25,
+                            className: "app-panel left-panel",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "panel-content left-panel-content",
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "playground-panel-header",
+                                        children: /*#__PURE__*/ jsxs("div", {
+                                            className: "header-row",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Logo, {}),
+                                                /*#__PURE__*/ jsx(NavActions, {
+                                                    showTooltipWhenEmpty: false,
+                                                    showModelName: false,
+                                                    playgroundSDK: controller.state.playgroundSDK
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "playground-panel-playground",
+                                        children: /*#__PURE__*/ jsx(PlaygroundConversationPanel, {
+                                            controller: controller,
+                                            appVersion: appVersion,
+                                            branding: branding,
+                                            playgroundConfig: playgroundConfig,
+                                            title: title
                                         })
-                                    ]
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(PanelResizeHandle, {
-                                className: `panel-resize-handle ${isNarrowScreen ? 'vertical' : 'horizontal'}`
-                            }),
-                            /*#__PURE__*/ jsx(Panel, {
-                                className: "app-panel right-panel",
-                                children: /*#__PURE__*/ jsx("div", {
-                                    className: "panel-content right-panel-content",
-                                    children: sessionViewState.connected ? /*#__PURE__*/ jsxs(Fragment, {
-                                        children: [
-                                            /*#__PURE__*/ jsxs("div", {
-                                                className: "session-toolbar",
-                                                children: [
-                                                    /*#__PURE__*/ jsx(Text, {
-                                                        strong: true,
-                                                        children: sessionViewState.displayName || 'Connected session'
-                                                    }),
-                                                    /*#__PURE__*/ jsx(Space, {
-                                                        size: 8,
-                                                        children: /*#__PURE__*/ jsx(Button, {
-                                                            onClick: handleDestroySession,
-                                                            loading: sessionMutating,
-                                                            children: "Change target"
-                                                        })
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(PreviewRenderer, {
-                                                playgroundSDK: playgroundSDK,
-                                                runtimeInfo: runtimeInfo,
-                                                serverUrl: serverUrl,
-                                                serverOnline: serverOnline,
-                                                isUserOperating: isUserOperating
-                                            })
-                                        ]
-                                    }) : /*#__PURE__*/ jsx(Alert, {
-                                        type: "info",
-                                        showIcon: true,
-                                        message: mergedBranding.title || 'Playground session',
-                                        description: 'blocked' === sessionViewState.setupState ? sessionViewState.setupBlockingReason || 'Resolve the local setup issue before creating an Agent.' : 'Create an Agent from the left panel to enable preview and execution.'
                                     })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(PanelResizeHandle, {
+                            className: "panel-resize-handle"
+                        }),
+                        /*#__PURE__*/ jsx(Panel, {
+                            defaultSize: isNarrowScreen ? 33 : 68,
+                            minSize: isNarrowScreen ? 15 : 40,
+                            className: "app-panel right-panel",
+                            children: /*#__PURE__*/ jsx("div", {
+                                className: "panel-content right-panel-content",
+                                children: /*#__PURE__*/ jsx(PlaygroundPreview, {
+                                    playgroundSDK: controller.state.playgroundSDK,
+                                    runtimeInfo: controller.state.runtimeInfo,
+                                    serverUrl: serverUrl,
+                                    serverOnline: controller.state.serverOnline,
+                                    isUserOperating: controller.state.isUserOperating
                                 })
                             })
-                        ]
-                    })
+                        })
+                    ]
                 })
             })
-        ]
+        })
     });
 }
 export { PlaygroundApp };

package/dist/es/PlaygroundThemeProvider.mjs

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { globalThemeConfig } from "@midscene/visualizer";
+import { ConfigProvider } from "antd";
+function PlaygroundThemeProvider({ children }) {
+    return /*#__PURE__*/ jsx(ConfigProvider, {
+        theme: globalThemeConfig(),
+        children: children
+    });
+}
+export { PlaygroundThemeProvider };

package/dist/es/PreviewRenderer.mjs

@@ -13,7 +13,7 @@ function isNonLocalhostHttp() {
         return false;
     }
 }
-function PreviewRenderer({ playgroundSDK, runtimeInfo, serverUrl, serverOnline, isUserOperating }) {
+function PreviewRenderer({ connectingOverlay, onScrcpyStatusChange, renderErrorOverlay, playgroundSDK, runtimeInfo, serverUrl, serverOnline, isUserOperating }) {
     const previewConnection = resolvePreviewConnectionInfo(runtimeInfo, serverUrl);
     const scrcpyAvailable = 'scrcpy' === previewConnection.type && WebCodecsVideoDecoder.isSupported;
     const useScreenshot = 'screenshot' === previewConnection.type || 'scrcpy' === previewConnection.type && !scrcpyAvailable;
@@ -118,6 +118,9 @@ function PreviewRenderer({ playgroundSDK, runtimeInfo, serverUrl, serverOnline,
                 message: "Preview unavailable",
                 description: "This session did not expose a preview capability in runtime metadata."
             }) : scrcpyAvailable ? /*#__PURE__*/ jsx(ScrcpyPanel, {
+                connectingOverlay: connectingOverlay,
+                onStatusChange: onScrcpyStatusChange,
+                renderErrorOverlay: renderErrorOverlay,
                 serverUrl: previewConnection.scrcpyUrl
             }) : /*#__PURE__*/ jsx(ScreenshotViewer, {
                 getScreenshot: ()=>useScreenshot ? playgroundSDK.getScreenshot() : Promise.resolve(null),