@midscene/visualizer 1.7.9 → 1.7.10-beta-20260507123827.0

package/dist/es/component/playground/index.css

@@ -586,7 +586,7 @@
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-left {
   align-items: center;
-  gap: 4px;
+  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -606,11 +606,12 @@
   border-radius: 32px;
   gap: 4px;
   height: 32px;
-  padding: 4px 8px;
+  margin-right: 16px;
+  padding: 4px 0;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-trigger:hover {
-  background: rgba(0, 0, 0, .03);
+  color: #5f6368;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-trigger:disabled {
@@ -642,11 +643,11 @@
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-chevron {
   object-fit: contain;
-  opacity: .25;
-  width: 5.3px;
-  height: 9.3px;
-  margin-left: -2px;
-  transform: rotate(-90deg);
+  opacity: 1;
+  width: 6px;
+  height: 10px;
+  margin-left: 0;
+  display: block;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-chevron-fallback {
@@ -669,7 +670,7 @@
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-icon-trigger:hover {
-  background: rgba(0, 0, 0, .03);
+  background: rgba(0, 0, 0, .04);
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon {
@@ -679,8 +680,8 @@
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-history {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-fallback {
@@ -695,6 +696,55 @@
   position: static;
 }
 
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  box-shadow: none;
+  color: #fff;
+  background: #1979ff;
+  border: none;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:hover {
+  color: #fff;
+  background: #0f6ff0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:focus-visible {
+  color: #fff;
+  background: #0f6ff0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:disabled {
+  color: #bfbfbf;
+  background: #f0f0f0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger .anticon {
+  font-size: 16px;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop {
+  color: #666;
+  background: #f0f0f0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop:hover {
+  color: #333;
+  background: #e6e6e6;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop:focus-visible {
+  color: #333;
+  background: #e6e6e6;
+}
+
 .more-apis-dropdown .ant-dropdown-menu {
   scrollbar-width: thin;
   max-height: 400px;

package/dist/es/component/prompt-input/index.css

@@ -494,7 +494,7 @@
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-left {
   align-items: center;
-  gap: 4px;
+  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -514,11 +514,12 @@
   border-radius: 32px;
   gap: 4px;
   height: 32px;
-  padding: 4px 8px;
+  margin-right: 16px;
+  padding: 4px 0;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-trigger:hover {
-  background: rgba(0, 0, 0, .03);
+  color: #5f6368;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-trigger:disabled {
@@ -550,11 +551,11 @@
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-chevron {
   object-fit: contain;
-  opacity: .25;
-  width: 5.3px;
-  height: 9.3px;
-  margin-left: -2px;
-  transform: rotate(-90deg);
+  opacity: 1;
+  width: 6px;
+  height: 10px;
+  margin-left: 0;
+  display: block;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-chevron-fallback {
@@ -577,7 +578,7 @@
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-icon-trigger:hover {
-  background: rgba(0, 0, 0, .03);
+  background: rgba(0, 0, 0, .04);
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon {
@@ -587,8 +588,8 @@
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-history {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-fallback {
@@ -603,6 +604,55 @@
   position: static;
 }
 
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  box-shadow: none;
+  color: #fff;
+  background: #1979ff;
+  border: none;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:hover {
+  color: #fff;
+  background: #0f6ff0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:focus-visible {
+  color: #fff;
+  background: #0f6ff0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:disabled {
+  color: #bfbfbf;
+  background: #f0f0f0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger .anticon {
+  font-size: 16px;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop {
+  color: #666;
+  background: #f0f0f0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop:hover {
+  color: #333;
+  background: #e6e6e6;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop:focus-visible {
+  color: #333;
+  background: #e6e6e6;
+}
+
 .more-apis-dropdown .ant-dropdown-menu {
   scrollbar-width: thin;
   max-height: 400px;

package/dist/es/component/prompt-input/index.mjs

@@ -1,20 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { BorderOutlined, DownOutlined, SendOutlined } from "@ant-design/icons";
-import "./index.css";
+import { ArrowUpOutlined, BorderOutlined, DownOutlined, SendOutlined } from "@ant-design/icons";
 import { Button, Dropdown, Form, Input, Radio, Tooltip } from "antd";
 import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useMinimalTypeGate } from "../../hooks/useMinimalTypeGate.mjs";
+import action_chevron from "../../icons/action-chevron.mjs";
+import prompt_history from "../../icons/prompt-history.mjs";
 import { useHistoryStore } from "../../store/history.mjs";
 import { extractDefaultValue, isLocateField, isZodObjectSchema, unwrapZodType } from "../../types.mjs";
 import { getPromptInputActionLabel } from "../../utils/action-label.mjs";
 import { apiMetadata, defaultMainButtons } from "../../utils/constants.mjs";
 import { hasDeviceSpecificConfig } from "../../utils/device-capabilities.mjs";
-import { actionNameForType, getPlaceholderForType, isRunButtonEnabled as playground_utils_mjs_isRunButtonEnabled } from "../../utils/playground-utils.mjs";
+import { actionNameForType, isRunButtonEnabled as playground_utils_mjs_isRunButtonEnabled } from "../../utils/playground-utils.mjs";
 import { getAvailablePromptActionTypes, getInlineStructuredFieldConfig } from "../../utils/prompt-input-utils.mjs";
+import { getPlaceholderForType } from "../../utils/prompt-placeholder.mjs";
 import { ConfigSelector } from "../config-selector/index.mjs";
 import { BooleanField, EnumField, LocateField, NumberField, TextField } from "../form-field/index.mjs";
 import { HistorySelector } from "../history-selector/index.mjs";
-import { useMinimalTypeGate } from "../../hooks/useMinimalTypeGate.mjs";
-import icons_history from "../../icons/history.mjs";
+import "./index.css";
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -45,7 +47,7 @@ const STUDIO_MINIMAL_PROMPT_ICONS = {
     settings: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAaFJREFUeAHtlt9tgzAQxi8EJa/pBMkIHYENygalG7RvSQQKlfjz2I5ANkg3oBukG6QbtI9IIPq5ihHQOBXmFImqPwnZBvtsf9ydTfQPA77vz4IguCENDGJgOp3ux+PxLgxDnzrCsgAw/zZmGPOO48iUFci4wE42xITKXlEUO9d1X34s4NjZISZU9qCSjeKqastKWZYpMaKyNxqNto02MRDHcXmsJqvV6q7LWBYnxK4+SBOTeHDw2HAwn4aGlg9EUfQE2e+xYwchtaUeaPmAmFyUyH4W9aThA9jZ7alOiN39crl8O/FpoRpzjrq96hcgj2/wwVcNQlxb6/X6VdRrYaeNtGfUVvXbgE9iRNprOCHktPF/Z+3OeZ4fPM9LZbumgHjX2Qnr9rSioE/ma6MVBZDvWWQ/cbLR0GE5jEQoQhFLpGIkpvcuY1nOAkyeiBKJSRSXPw37UCkgbrWmaSZwsBkxoLInHBgJ6EG2KwUgn801+Tl78hyRVApkWfaIexxp4rRfqOzBUdN6+29cyYAMvQN1hCUMIbc1mUyu4VzDz4wX5wvRfah9kIOcwwAAAABJRU5ErkJggg=='
 };
 const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true, actionSpace, hideDomAndScreenshotOptions = false, deviceType, chrome })=>{
-    var _chrome_icons, _chrome_icons1, _chrome_icons2;
+    var _chrome_icons, _chrome_icons1, _chrome_icons2, _chrome_icons3;
     const [hoveringSettings, setHoveringSettings] = useState(false);
     const [promptValue, setPromptValue] = useState('');
     const placeholder = getPlaceholderForType(selectedType);
@@ -237,7 +239,7 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         buildApiMenuItem
     ]);
     const actionDropdownMenu = useMemo(()=>{
-        const primaryActions = defaultMainButtons.filter((api)=>'aiAct' === api || availableDropdownMethods.includes(api));
+        const primaryActions = defaultMainButtons.filter((api)=>availableDropdownMethods.includes(api));
         const items = [];
         if (primaryActions.length > 0) items.push({
             key: 'primary-group',
@@ -675,6 +677,36 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         selectedType,
         stoppable
     ]);
+    const renderMinimalActionButton = useCallback(()=>{
+        const runButton = (ariaLabel)=>/*#__PURE__*/ jsx(Button, {
+                "aria-label": ariaLabel,
+                className: "minimal-run-trigger",
+                type: "primary",
+                icon: /*#__PURE__*/ jsx(ArrowUpOutlined, {}),
+                onClick: handleRunWithHistory,
+                disabled: !isRunButtonEnabled,
+                loading: loading
+            });
+        if (dryMode) return 'aiAct' === selectedType ? /*#__PURE__*/ jsx(Tooltip, {
+            title: "Start executing until some interaction actions need to be performed. You can see the process of planning and locating.",
+            children: runButton('Dry run')
+        }) : runButton('Run');
+        if (stoppable) return /*#__PURE__*/ jsx(Button, {
+            "aria-label": "Stop running",
+            className: "minimal-run-trigger minimal-run-trigger-stop",
+            icon: /*#__PURE__*/ jsx(BorderOutlined, {}),
+            onClick: onStop
+        });
+        return runButton('Run');
+    }, [
+        dryMode,
+        loading,
+        handleRunWithHistory,
+        isRunButtonEnabled,
+        onStop,
+        selectedType,
+        stoppable
+    ]);
     const inputContent = needsAnyInput ? needsStructuredParams ? minimalInlineFieldConfig ? /*#__PURE__*/ jsx(Form.Item, {
         name: [
             'params',
@@ -718,121 +750,122 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
     });
     var _chrome_icons_action;
     const minimalActionIconSrc = null != (_chrome_icons_action = null == chrome ? void 0 : null == (_chrome_icons = chrome.icons) ? void 0 : _chrome_icons.action) ? _chrome_icons_action : STUDIO_MINIMAL_PROMPT_ICONS.action;
-    var _chrome_icons_actionChevron;
-    const minimalActionChevronSrc = null != (_chrome_icons_actionChevron = null == chrome ? void 0 : null == (_chrome_icons1 = chrome.icons) ? void 0 : _chrome_icons1.actionChevron) ? _chrome_icons_actionChevron : STUDIO_MINIMAL_PROMPT_ICONS.actionChevron;
+    const minimalActionChevronSrc = null == chrome ? void 0 : null == (_chrome_icons1 = chrome.icons) ? void 0 : _chrome_icons1.actionChevron;
     var _chrome_icons_settings;
     const minimalSettingsIconSrc = null != (_chrome_icons_settings = null == chrome ? void 0 : null == (_chrome_icons2 = chrome.icons) ? void 0 : _chrome_icons2.settings) ? _chrome_icons_settings : STUDIO_MINIMAL_PROMPT_ICONS.settings;
-    if (isMinimalChrome) {
-        var _chrome_icons3;
-        return /*#__PURE__*/ jsxs("div", {
-            className: "prompt-input-wrapper prompt-input-wrapper-minimal",
-            children: [
-                /*#__PURE__*/ jsx(Form.Item, {
-                    hidden: true,
-                    name: "type",
-                    style: {
-                        margin: 0
-                    },
-                    children: /*#__PURE__*/ jsx(Input, {})
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    className: `main-side-console-input minimal-main-side-console-input ${!runButtonEnabled ? 'disabled' : ''} ${loading ? 'loading' : ''}`,
-                    children: [
-                        inputContent,
-                        /*#__PURE__*/ jsxs("div", {
-                            className: "minimal-toolbar-row",
-                            children: [
-                                /*#__PURE__*/ jsxs("div", {
-                                    className: "minimal-toolbar-left",
-                                    children: [
-                                        /*#__PURE__*/ jsx(Dropdown, {
-                                            menu: actionDropdownMenu,
-                                            placement: "topLeft",
-                                            trigger: [
-                                                'click'
-                                            ],
+    const minimalHistoryIconSrc = null == chrome ? void 0 : null == (_chrome_icons3 = chrome.icons) ? void 0 : _chrome_icons3.history;
+    if (isMinimalChrome) return /*#__PURE__*/ jsxs("div", {
+        className: "prompt-input-wrapper prompt-input-wrapper-minimal",
+        children: [
+            /*#__PURE__*/ jsx(Form.Item, {
+                hidden: true,
+                name: "type",
+                style: {
+                    margin: 0
+                },
+                children: /*#__PURE__*/ jsx(Input, {})
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `main-side-console-input minimal-main-side-console-input ${!runButtonEnabled ? 'disabled' : ''} ${loading ? 'loading' : ''}`,
+                children: [
+                    inputContent,
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "minimal-toolbar-row",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "minimal-toolbar-left",
+                                children: [
+                                    /*#__PURE__*/ jsx(Dropdown, {
+                                        menu: actionDropdownMenu,
+                                        placement: "topLeft",
+                                        trigger: [
+                                            'click'
+                                        ],
+                                        disabled: !runButtonEnabled,
+                                        overlayClassName: "more-apis-dropdown",
+                                        children: /*#__PURE__*/ jsxs("button", {
+                                            "aria-label": `Select action type (current: ${actionButtonLabel})`,
+                                            className: "minimal-action-trigger",
                                             disabled: !runButtonEnabled,
-                                            overlayClassName: "more-apis-dropdown",
-                                            children: /*#__PURE__*/ jsxs("button", {
-                                                "aria-label": `Select action type (current: ${actionButtonLabel})`,
-                                                className: "minimal-action-trigger",
-                                                disabled: !runButtonEnabled,
-                                                type: "button",
-                                                children: [
-                                                    /*#__PURE__*/ jsx("img", {
-                                                        alt: "",
-                                                        className: "minimal-action-icon",
-                                                        src: minimalActionIconSrc
-                                                    }),
-                                                    /*#__PURE__*/ jsx("span", {
-                                                        className: "minimal-action-label",
-                                                        children: actionButtonLabel
-                                                    }),
-                                                    /*#__PURE__*/ jsx("img", {
-                                                        alt: "",
-                                                        className: "minimal-action-chevron",
-                                                        src: minimalActionChevronSrc
-                                                    })
-                                                ]
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsx(HistorySelector, {
-                                            onSelect: handleSelectHistory,
-                                            history: historyForSelectedType,
-                                            currentType: selectedType,
-                                            popupPlacement: "top",
+                                            type: "button",
+                                            children: [
+                                                /*#__PURE__*/ jsx("img", {
+                                                    alt: "",
+                                                    className: "minimal-action-icon",
+                                                    src: minimalActionIconSrc
+                                                }),
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "minimal-action-label",
+                                                    children: actionButtonLabel
+                                                }),
+                                                minimalActionChevronSrc ? /*#__PURE__*/ jsx("img", {
+                                                    alt: "",
+                                                    className: "minimal-action-chevron",
+                                                    src: minimalActionChevronSrc
+                                                }) : /*#__PURE__*/ jsx(action_chevron, {
+                                                    "aria-hidden": "true",
+                                                    className: "minimal-action-chevron",
+                                                    focusable: "false"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    hasConfigOptions ? /*#__PURE__*/ jsx("div", {
+                                        className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
+                                        onMouseEnter: handleMouseEnter,
+                                        onMouseLeave: handleMouseLeave,
+                                        children: /*#__PURE__*/ jsx(ConfigSelector, {
+                                            enableTracking: 'In-Browser-Extension' === serviceMode,
+                                            showDeepLocateOption: showDeepLocateOption,
+                                            showDeepThinkOption: showDeepThinkOption,
+                                            showDataExtractionOptions: showDataExtractionOptions,
+                                            hideDomAndScreenshotOptions: hideDomAndScreenshotOptions,
+                                            deviceType: deviceType,
+                                            popupPlacement: "topRight",
                                             trigger: /*#__PURE__*/ jsx("button", {
-                                                "aria-label": "Open prompt history",
+                                                "aria-label": "Open run configuration",
                                                 className: "minimal-icon-trigger",
                                                 type: "button",
-                                                children: (null == chrome ? void 0 : null == (_chrome_icons3 = chrome.icons) ? void 0 : _chrome_icons3.history) ? /*#__PURE__*/ jsx("img", {
+                                                children: /*#__PURE__*/ jsx("img", {
                                                     alt: "",
                                                     className: "minimal-toolbar-icon",
-                                                    src: chrome.icons.history
-                                                }) : /*#__PURE__*/ jsx(icons_history, {
-                                                    className: "minimal-toolbar-icon minimal-toolbar-icon-history minimal-toolbar-icon-fallback",
-                                                    width: 18,
-                                                    height: 18
+                                                    src: minimalSettingsIconSrc
                                                 })
                                             })
-                                        }),
-                                        hasConfigOptions ? /*#__PURE__*/ jsx("div", {
-                                            className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
-                                            onMouseEnter: handleMouseEnter,
-                                            onMouseLeave: handleMouseLeave,
-                                            children: /*#__PURE__*/ jsx(ConfigSelector, {
-                                                enableTracking: 'In-Browser-Extension' === serviceMode,
-                                                showDeepLocateOption: showDeepLocateOption,
-                                                showDeepThinkOption: showDeepThinkOption,
-                                                showDataExtractionOptions: showDataExtractionOptions,
-                                                hideDomAndScreenshotOptions: hideDomAndScreenshotOptions,
-                                                deviceType: deviceType,
-                                                popupPlacement: "topRight",
-                                                trigger: /*#__PURE__*/ jsx("button", {
-                                                    "aria-label": "Open run configuration",
-                                                    className: "minimal-icon-trigger",
-                                                    type: "button",
-                                                    children: /*#__PURE__*/ jsx("img", {
-                                                        alt: "",
-                                                        className: "minimal-toolbar-icon",
-                                                        src: minimalSettingsIconSrc
-                                                    })
-                                                })
+                                        })
+                                    }) : null,
+                                    /*#__PURE__*/ jsx(HistorySelector, {
+                                        onSelect: handleSelectHistory,
+                                        history: historyForSelectedType,
+                                        currentType: selectedType,
+                                        popupPlacement: "top",
+                                        trigger: /*#__PURE__*/ jsx("button", {
+                                            "aria-label": "Open prompt history",
+                                            className: "minimal-icon-trigger",
+                                            type: "button",
+                                            children: minimalHistoryIconSrc ? /*#__PURE__*/ jsx("img", {
+                                                alt: "",
+                                                className: "minimal-toolbar-icon minimal-toolbar-icon-history",
+                                                src: minimalHistoryIconSrc
+                                            }) : /*#__PURE__*/ jsx(prompt_history, {
+                                                "aria-hidden": "true",
+                                                className: "minimal-toolbar-icon minimal-toolbar-icon-history",
+                                                focusable: "false"
                                             })
-                                        }) : null
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "form-controller-wrapper",
-                                    children: renderActionButton()
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
-        });
-    }
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "form-controller-wrapper",
+                                children: renderMinimalActionButton()
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
     return /*#__PURE__*/ jsxs("div", {
         className: "prompt-input-wrapper",
         children: [

package/dist/es/component/screenshot-viewer/index.css

@@ -10,15 +10,21 @@
 
 .screenshot-viewer.screen-only > .screenshot-content {
   flex: 1;
+  justify-content: center;
+  align-items: center;
   min-height: 0;
+  display: flex;
 }
 
 .screenshot-viewer.screen-only > .screenshot-content .screenshot-image {
+  object-fit: contain;
+  object-position: center center;
   border-radius: 0;
   width: 100%;
   max-width: none;
   height: 100%;
   max-height: none;
+  display: block;
 }
 
 .screenshot-viewer.offline, .screenshot-viewer.loading, .screenshot-viewer.error {

package/dist/es/component/screenshot-viewer/index.mjs

@@ -35,6 +35,7 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
     const [error, setError] = useState(null);
     const [lastUpdateTime, setLastUpdateTime] = useState(0);
     const [interfaceInfo, setInterfaceInfo] = useState(null);
+    const [mjpegRetryToken, setMjpegRetryToken] = useState('');
     const isMjpeg = Boolean(mjpegUrl && serverOnline);
     const showChrome = 'screen-only' !== mode;
     const rootClassName = [
@@ -203,10 +204,13 @@ function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUse
     const screenshotContent = /*#__PURE__*/ jsx("div", {
         className: "screenshot-content",
         children: isMjpeg ? /*#__PURE__*/ jsx("img", {
-            src: mjpegUrl,
+            src: mjpegRetryToken ? `${mjpegUrl}${(null == mjpegUrl ? void 0 : mjpegUrl.includes('?')) ? '&' : '?'}_mjpegRetry=${encodeURIComponent(mjpegRetryToken)}` : mjpegUrl,
             alt: "Device Live Stream",
-            className: "screenshot-image"
-        }) : screenshot ? /*#__PURE__*/ jsx("img", {
+            className: "screenshot-image",
+            onError: ()=>{
+                window.setTimeout(()=>setMjpegRetryToken(String(Date.now())), 500);
+            }
+        }, mjpegRetryToken || 'initial') : screenshot ? /*#__PURE__*/ jsx("img", {
             src: screenshot.startsWith('data:image/') ? screenshot : `data:image/png;base64,${screenshot}`,
             alt: "Device Screenshot",
             className: "screenshot-image",

package/dist/es/component/universal-playground/empty-state.mjs

@@ -0,0 +1,5 @@
+function shouldRenderCustomEmptyState(infoList, emptyState) {
+    var _infoList_;
+    return void 0 !== emptyState && 1 === infoList.length && (null == (_infoList_ = infoList[0]) ? void 0 : _infoList_.id) === 'welcome';
+}
+export { shouldRenderCustomEmptyState };

package/dist/es/component/universal-playground/index.css

@@ -89,6 +89,14 @@
   padding: 0;
 }
 
+.playground-container .middle-dialog-area .info-list-container .playground-empty-state-wrapper {
+  min-height: 100%;
+}
+
+.playground-container .middle-dialog-area .info-list-container .playground-empty-state-wrapper-offset-for-prompt {
+  padding-bottom: 128px;
+}
+
 .playground-container .middle-dialog-area .scroll-to-bottom-button {
   z-index: 10;
   background: var(--midscene-surface-elevated, #fff);