@midscene/playground-app 1.7.3 → 1.7.4

package/dist/lib/PlaygroundApp.js

@@ -36,227 +36,29 @@ __webpack_require__.d(__webpack_exports__, {
     PlaygroundApp: ()=>PlaygroundApp
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const playground_namespaceObject = require("@midscene/playground");
 const visualizer_namespaceObject = require("@midscene/visualizer");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
 const external_react_resizable_panels_namespaceObject = require("react-resizable-panels");
-const external_PreviewRenderer_js_namespaceObject = require("./PreviewRenderer.js");
-const external_SessionSetupPanel_js_namespaceObject = require("./SessionSetupPanel.js");
+const external_PlaygroundPreview_js_namespaceObject = require("./PlaygroundPreview.js");
+const external_PlaygroundThemeProvider_js_namespaceObject = require("./PlaygroundThemeProvider.js");
+const usePlaygroundController_js_namespaceObject = require("./controller/usePlaygroundController.js");
 const server_offline_background_js_namespaceObject = require("./icons/server-offline-background.js");
 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");
+const PlaygroundConversationPanel_js_namespaceObject = require("./panels/PlaygroundConversationPanel.js");
 require("./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 } = external_antd_namespaceObject.Layout;
-const { Text } = external_antd_namespaceObject.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] = (0, external_react_namespaceObject.useState)(false);
-    const [countdown, setCountdown] = (0, external_react_namespaceObject.useState)(null);
-    const [setupForm] = external_antd_namespaceObject.Form.useForm();
-    const [sessionSetup, setSessionSetup] = (0, external_react_namespaceObject.useState)(null);
-    const [sessionSetupError, setSessionSetupError] = (0, external_react_namespaceObject.useState)(null);
-    const [sessionLoading, setSessionLoading] = (0, external_react_namespaceObject.useState)(false);
-    const [sessionMutating, setSessionMutating] = (0, external_react_namespaceObject.useState)(false);
-    const [messageApi, messageContextHolder] = external_antd_namespaceObject.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 = external_antd_namespaceObject.Form.useWatch(platformSelectorFieldKey || 'platformId', setupForm)) ? _Form_useWatch : void 0;
-    const playgroundSDK = (0, external_react_namespaceObject.useMemo)(()=>new playground_namespaceObject.PlaygroundSDK({
-            type: 'remote-execution',
-            serverUrl
-        }), [
-        serverUrl
-    ]);
-    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
-    ]);
-    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 autoCreateDisabledRef = (0, external_react_namespaceObject.useRef)(false);
-    const finishCountdown = (0, external_react_namespaceObject.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 = (0, external_react_namespaceObject.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
-    ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        mountedRef.current = true;
-        return ()=>{
-            mountedRef.current = false;
-            finishCountdown();
-        };
-    }, [
-        finishCountdown
-    ]);
-    (0, external_react_namespaceObject.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 = (0, external_react_namespaceObject.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((0, external_session_state_js_namespaceObject.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
-    ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (!serverOnline || sessionViewState.connected) return;
-        refreshSessionSetup();
-    }, [
-        refreshSessionSetup,
-        serverOnline,
-        sessionViewState.connected
-    ]);
-    (0, external_react_namespaceObject.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 = (0, usePlaygroundController_js_namespaceObject.usePlaygroundController)({
+        serverUrl,
+        defaultDeviceType,
+        countdownSeconds: null == playgroundConfig ? void 0 : null == (_playgroundConfig_executionUx = playgroundConfig.executionUx) ? void 0 : _playgroundConfig_executionUx.countdownSeconds,
+        pollIntervalMs
+    });
     (0, external_react_namespaceObject.useEffect)(()=>{
         const handleResize = ()=>{
             setIsNarrowScreen(window.innerWidth <= 1024);
@@ -265,105 +67,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 = (0, external_react_namespaceObject.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 = (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';
-                messageApi.error(errorMessage);
-            } finally{
-                setSessionMutating(false);
-            }
-        })(), [
-        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)(),
+    if (!controller.state.serverOnline) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PlaygroundThemeProvider_js_namespaceObject.PlaygroundThemeProvider, {
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
             className: "server-offline-container",
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -397,166 +101,72 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
             })
         })
     });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.ConfigProvider, {
-        theme: (0, visualizer_namespaceObject.globalThemeConfig)(),
-        children: [
-            messageContextHolder,
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Modal, {
-                open: null !== countdown,
-                footer: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                    style: {
-                        textAlign: 'center',
-                        padding: '40px 20px'
-                    },
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PlaygroundThemeProvider_js_namespaceObject.PlaygroundThemeProvider, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Layout, {
+            className: "app-container playground-container",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Content, {
+                className: "app-content",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_react_resizable_panels_namespaceObject.PanelGroup, {
+                    autoSaveId: "playground-layout",
+                    direction: isNarrowScreen ? 'vertical' : 'horizontal',
                     children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                            style: {
-                                fontSize: '72px',
-                                fontWeight: 'bold',
-                                color: 'GO!' === countdown ? '#52c41a' : '#1890ff',
-                                marginBottom: '24px',
-                                lineHeight: 1
-                            },
-                            children: countdown
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                            style: {
-                                fontSize: '18px',
-                                fontWeight: 500,
-                                marginBottom: '12px'
-                            },
-                            children: "Automation Starting Soon"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                            style: {
-                                fontSize: '14px',
-                                color: 'rgba(0, 0, 0, 0.65)'
-                            },
-                            children: [
-                                "The selected session requested a countdown before execution.",
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
-                                "Please wait until the run starts."
-                            ]
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Layout, {
-                className: "app-container playground-container",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Content, {
-                    className: "app-content",
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_react_resizable_panels_namespaceObject.PanelGroup, {
-                        autoSaveId: "playground-layout",
-                        direction: isNarrowScreen ? 'vertical' : 'horizontal',
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Panel, {
-                                defaultSize: isNarrowScreen ? 67 : 32,
-                                maxSize: isNarrowScreen ? 85 : 60,
-                                minSize: isNarrowScreen ? 67 : 25,
-                                className: "app-panel left-panel",
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                    className: "panel-content left-panel-content",
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                            className: "playground-panel-header",
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                className: "header-row",
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(visualizer_namespaceObject.Logo, {}),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(visualizer_namespaceObject.NavActions, {
-                                                        showTooltipWhenEmpty: false,
-                                                        showModelName: false,
-                                                        playgroundSDK: playgroundSDK
-                                                    })
-                                                ]
-                                            })
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                            className: "playground-panel-playground",
-                                            children: sessionViewState.connected ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(visualizer_namespaceObject.UniversalPlayground, {
-                                                playgroundSDK: playgroundSDK,
-                                                config: mergedConfig,
-                                                branding: mergedBranding,
-                                                className: "playground-container"
-                                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SessionSetupPanel_js_namespaceObject.SessionSetupPanel, {
-                                                form: setupForm,
-                                                sessionSetup: sessionSetup,
-                                                sessionSetupError: sessionSetupError,
-                                                sessionViewState: sessionViewState,
-                                                sessionLoading: sessionLoading,
-                                                sessionMutating: sessionMutating,
-                                                onCreateSession: handleCreateSession,
-                                                onRefreshTargets: ()=>refreshSessionSetup(setupForm.getFieldsValue(true))
-                                            })
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Panel, {
+                            defaultSize: isNarrowScreen ? 67 : 32,
+                            maxSize: isNarrowScreen ? 85 : 60,
+                            minSize: isNarrowScreen ? 67 : 25,
+                            className: "app-panel left-panel",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "panel-content left-panel-content",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "playground-panel-header",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                            className: "header-row",
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(visualizer_namespaceObject.Logo, {}),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(visualizer_namespaceObject.NavActions, {
+                                                    showTooltipWhenEmpty: false,
+                                                    showModelName: false,
+                                                    playgroundSDK: controller.state.playgroundSDK
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "playground-panel-playground",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PlaygroundConversationPanel_js_namespaceObject.PlaygroundConversationPanel, {
+                                            controller: controller,
+                                            appVersion: appVersion,
+                                            branding: branding,
+                                            playgroundConfig: playgroundConfig,
+                                            title: title
                                         })
-                                    ]
-                                })
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.PanelResizeHandle, {
-                                className: `panel-resize-handle ${isNarrowScreen ? 'vertical' : 'horizontal'}`
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Panel, {
-                                className: "app-panel right-panel",
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                    className: "panel-content right-panel-content",
-                                    children: sessionViewState.connected ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                className: "session-toolbar",
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Text, {
-                                                        strong: true,
-                                                        children: sessionViewState.displayName || 'Connected session'
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Space, {
-                                                        size: 8,
-                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
-                                                            onClick: handleDestroySession,
-                                                            loading: sessionMutating,
-                                                            children: "Change target"
-                                                        })
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PreviewRenderer_js_namespaceObject.PreviewRenderer, {
-                                                playgroundSDK: playgroundSDK,
-                                                runtimeInfo: runtimeInfo,
-                                                serverUrl: serverUrl,
-                                                serverOnline: serverOnline,
-                                                isUserOperating: isUserOperating
-                                            })
-                                        ]
-                                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.PanelResizeHandle, {
+                            className: "panel-resize-handle"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Panel, {
+                            defaultSize: isNarrowScreen ? 33 : 68,
+                            minSize: isNarrowScreen ? 15 : 40,
+                            className: "app-panel right-panel",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "panel-content right-panel-content",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PlaygroundPreview_js_namespaceObject.PlaygroundPreview, {
+                                    playgroundSDK: controller.state.playgroundSDK,
+                                    runtimeInfo: controller.state.runtimeInfo,
+                                    serverUrl: serverUrl,
+                                    serverOnline: controller.state.serverOnline,
+                                    isUserOperating: controller.state.isUserOperating
                                 })
                             })
-                        ]
-                    })
+                        })
+                    ]
                 })
             })
-        ]
+        })
     });
 }
 exports.PlaygroundApp = __webpack_exports__.PlaygroundApp;

package/dist/lib/PlaygroundThemeProvider.js

@@ -0,0 +1,44 @@
+"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__, {
+    PlaygroundThemeProvider: ()=>PlaygroundThemeProvider
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const visualizer_namespaceObject = require("@midscene/visualizer");
+const external_antd_namespaceObject = require("antd");
+function PlaygroundThemeProvider({ children }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.ConfigProvider, {
+        theme: (0, visualizer_namespaceObject.globalThemeConfig)(),
+        children: children
+    });
+}
+exports.PlaygroundThemeProvider = __webpack_exports__.PlaygroundThemeProvider;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PlaygroundThemeProvider"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/PreviewRenderer.js

@@ -41,7 +41,7 @@ function isNonLocalhostHttp() {
         return false;
     }
 }
-function PreviewRenderer({ playgroundSDK, runtimeInfo, serverUrl, serverOnline, isUserOperating }) {
+function PreviewRenderer({ connectingOverlay, onScrcpyStatusChange, renderErrorOverlay, playgroundSDK, runtimeInfo, serverUrl, serverOnline, isUserOperating }) {
     const previewConnection = (0, external_runtime_info_js_namespaceObject.resolvePreviewConnectionInfo)(runtimeInfo, serverUrl);
     const scrcpyAvailable = 'scrcpy' === previewConnection.type && scrcpy_decoder_webcodecs_namespaceObject.WebCodecsVideoDecoder.isSupported;
     const useScreenshot = 'screenshot' === previewConnection.type || 'scrcpy' === previewConnection.type && !scrcpyAvailable;
@@ -146,6 +146,9 @@ function PreviewRenderer({ playgroundSDK, runtimeInfo, serverUrl, serverOnline,
                 message: "Preview unavailable",
                 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,
+                onStatusChange: onScrcpyStatusChange,
+                renderErrorOverlay: renderErrorOverlay,
                 serverUrl: previewConnection.scrcpyUrl
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(visualizer_namespaceObject.ScreenshotViewer, {
                 getScreenshot: ()=>useScreenshot ? playgroundSDK.getScreenshot() : Promise.resolve(null),