@midscene/visualizer 0.28.2-beta-20250910043028.0 → 0.28.2-beta-20250910065550.0

package/dist/lib/component/{prompt-input/index.js → playground/PromptInput.js}

@@ -37,23 +37,23 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const icons_namespaceObject = require("@ant-design/icons");
-require("./index.css");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
-const history_js_namespaceObject = require("../../store/history.js");
-const external_types_js_namespaceObject = require("../../types.js");
-const constants_js_namespaceObject = require("../../utils/constants.js");
-const playground_utils_js_namespaceObject = require("../../utils/playground-utils.js");
-const index_js_namespaceObject = require("../config-selector/index.js");
-const external_form_field_index_js_namespaceObject = require("../form-field/index.js");
-const external_history_selector_index_js_namespaceObject = require("../history-selector/index.js");
+const history_js_namespaceObject = require("../store/history.js");
+const external_ConfigSelector_js_namespaceObject = require("./ConfigSelector.js");
+const external_FormField_js_namespaceObject = require("./FormField.js");
+const external_HistorySelector_js_namespaceObject = require("./HistorySelector.js");
+const external_playground_constants_js_namespaceObject = require("./playground-constants.js");
+const external_playground_utils_js_namespaceObject = require("./playground-utils.js");
+const external_types_js_namespaceObject = require("./types.js");
+require("./index.css");
 const { TextArea } = external_antd_namespaceObject.Input;
 const PromptInput = (param)=>{
     let { runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true, actionSpace, hideDomAndScreenshotOptions = false } = param;
     const [hoveringSettings, setHoveringSettings] = (0, external_react_namespaceObject.useState)(false);
     const [promptValue, setPromptValue] = (0, external_react_namespaceObject.useState)('');
-    const placeholder = (0, playground_utils_js_namespaceObject.getPlaceholderForType)(selectedType);
+    const placeholder = (0, external_playground_utils_js_namespaceObject.getPlaceholderForType)(selectedType);
     const textAreaRef = (0, external_react_namespaceObject.useRef)(null);
     const params = external_antd_namespaceObject.Form.useWatch('params', form);
     const lastHistoryRef = (0, external_react_namespaceObject.useRef)(null);
@@ -149,12 +149,12 @@ const PromptInput = (param)=>{
         hideDomAndScreenshotOptions
     ]);
     const availableDropdownMethods = (0, external_react_namespaceObject.useMemo)(()=>{
-        const metadataMethods = Object.keys(constants_js_namespaceObject.apiMetadata);
+        const metadataMethods = Object.keys(external_playground_constants_js_namespaceObject.apiMetadata);
         if (!actionSpace || 0 === actionSpace.length) return metadataMethods;
         const availableMethods = actionSpace.map((action)=>action.interfaceAlias || action.name);
         const finalMethods = new Set();
         metadataMethods.forEach((method)=>{
-            const methodInfo = constants_js_namespaceObject.apiMetadata[method];
+            const methodInfo = external_playground_constants_js_namespaceObject.apiMetadata[method];
             if ((null == methodInfo ? void 0 : methodInfo.group) === 'extraction' || (null == methodInfo ? void 0 : methodInfo.group) === 'validation') finalMethods.add(method);
             else if (availableMethods.includes(method)) finalMethods.add(method);
         });
@@ -259,7 +259,7 @@ const PromptInput = (param)=>{
         needsStructuredParams,
         actionSpace
     ]);
-    const isRunButtonEnabled = (0, external_react_namespaceObject.useMemo)(()=>(0, playground_utils_js_namespaceObject.isRunButtonEnabled)(runButtonEnabled, !!needsStructuredParams, params, actionSpace, selectedType, promptValue), [
+    const isRunButtonEnabled = (0, external_react_namespaceObject.useMemo)(()=>(0, external_playground_utils_js_namespaceObject.isRunButtonEnabled)(runButtonEnabled, !!needsStructuredParams, params, actionSpace, selectedType, promptValue), [
         runButtonEnabled,
         needsStructuredParams,
         selectedType,
@@ -443,19 +443,19 @@ const PromptInput = (param)=>{
                         marginBottom,
                         placeholder
                     };
-                    if (isLocateFieldFlag) fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.LocateField, {
+                    if (isLocateFieldFlag) fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.LocateField, {
                         ...fieldProps
                     }, key));
-                    else if ((null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName) === 'ZodEnum') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.EnumField, {
+                    else if ((null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName) === 'ZodEnum') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.EnumField, {
                         ...fieldProps
                     }, key));
-                    else if ((null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === 'ZodNumber') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.NumberField, {
+                    else if ((null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === 'ZodNumber') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.NumberField, {
                         ...fieldProps
                     }, key));
-                    else if ((null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === 'ZodBoolean') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.BooleanField, {
+                    else if ((null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === 'ZodBoolean') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.BooleanField, {
                         ...fieldProps
                     }, key));
-                    else fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.TextField, {
+                    else fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.TextField, {
                         ...fieldProps
                     }, key));
                 });
@@ -553,13 +553,13 @@ const PromptInput = (param)=>{
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Group, {
                                     buttonStyle: "solid",
                                     disabled: !runButtonEnabled,
-                                    children: constants_js_namespaceObject.defaultMainButtons.map((apiType)=>{
+                                    children: external_playground_constants_js_namespaceObject.defaultMainButtons.map((apiType)=>{
                                         var _apiMetadata_apiType;
                                         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
-                                            title: (null == (_apiMetadata_apiType = constants_js_namespaceObject.apiMetadata[apiType]) ? void 0 : _apiMetadata_apiType.title) || '',
+                                            title: (null == (_apiMetadata_apiType = external_playground_constants_js_namespaceObject.apiMetadata[apiType]) ? void 0 : _apiMetadata_apiType.title) || '',
                                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Button, {
                                                 value: apiType,
-                                                children: (0, playground_utils_js_namespaceObject.actionNameForType)(apiType)
+                                                children: (0, external_playground_utils_js_namespaceObject.actionNameForType)(apiType)
                                             })
                                         }, apiType);
                                     })
@@ -567,11 +567,11 @@ const PromptInput = (param)=>{
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Dropdown, {
                                 menu: (()=>{
-                                    const hiddenAPIs = availableDropdownMethods.filter((api)=>!constants_js_namespaceObject.defaultMainButtons.includes(api));
+                                    const hiddenAPIs = availableDropdownMethods.filter((api)=>!external_playground_constants_js_namespaceObject.defaultMainButtons.includes(api));
                                     const groupedItems = [];
                                     const interactionAPIs = hiddenAPIs.filter((api)=>{
                                         var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'interaction';
+                                        return (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'interaction';
                                     });
                                     if (interactionAPIs.length > 0) groupedItems.push({
                                         key: 'interaction-group',
@@ -581,8 +581,8 @@ const PromptInput = (param)=>{
                                             var _apiMetadata_api;
                                             return {
                                                 key: api,
-                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
+                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
@@ -591,7 +591,7 @@ const PromptInput = (param)=>{
                                     });
                                     const extractionAPIs = hiddenAPIs.filter((api)=>{
                                         var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'extraction';
+                                        return (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'extraction';
                                     });
                                     if (extractionAPIs.length > 0) groupedItems.push({
                                         key: 'extraction-group',
@@ -601,8 +601,8 @@ const PromptInput = (param)=>{
                                             var _apiMetadata_api;
                                             return {
                                                 key: api,
-                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
+                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
@@ -611,7 +611,7 @@ const PromptInput = (param)=>{
                                     });
                                     const validationAPIs = hiddenAPIs.filter((api)=>{
                                         var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'validation';
+                                        return (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'validation';
                                     });
                                     if (validationAPIs.length > 0) groupedItems.push({
                                         key: 'validation-group',
@@ -621,22 +621,22 @@ const PromptInput = (param)=>{
                                             var _apiMetadata_api;
                                             return {
                                                 key: api,
-                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
+                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
                                             };
                                         })
                                     });
-                                    const deviceSpecificAPIs = hiddenAPIs.filter((api)=>!constants_js_namespaceObject.apiMetadata[api]);
+                                    const deviceSpecificAPIs = hiddenAPIs.filter((api)=>!external_playground_constants_js_namespaceObject.apiMetadata[api]);
                                     if (deviceSpecificAPIs.length > 0) groupedItems.push({
                                         key: 'device-specific-group',
                                         type: 'group',
                                         label: 'Device-Specific APIs',
                                         children: deviceSpecificAPIs.map((api)=>({
                                                 key: api,
-                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
                                                 title: '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
@@ -653,9 +653,9 @@ const PromptInput = (param)=>{
                                 ],
                                 disabled: !runButtonEnabled,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Button, {
-                                    className: `more-apis-button ${!constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? 'selected-from-dropdown' : ''}`,
+                                    className: `more-apis-button ${!external_playground_constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? 'selected-from-dropdown' : ''}`,
                                     children: [
-                                        selectedType && !constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? (0, playground_utils_js_namespaceObject.actionNameForType)(selectedType) : 'more',
+                                        selectedType && !external_playground_constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? (0, external_playground_utils_js_namespaceObject.actionNameForType)(selectedType) : 'more',
                                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.DownOutlined, {
                                             style: {
                                                 fontSize: '10px',
@@ -670,7 +670,7 @@ const PromptInput = (param)=>{
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                         className: "action-icons",
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_history_selector_index_js_namespaceObject.HistorySelector, {
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HistorySelector_js_namespaceObject.HistorySelector, {
                                 onSelect: handleSelectHistory,
                                 history: historyForSelectedType,
                                 currentType: selectedType
@@ -679,7 +679,7 @@ const PromptInput = (param)=>{
                                 className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
                                 onMouseEnter: handleMouseEnter,
                                 onMouseLeave: handleMouseLeave,
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.ConfigSelector, {
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ConfigSelector_js_namespaceObject.ConfigSelector, {
                                     enableTracking: 'In-Browser-Extension' === serviceMode,
                                     showDeepThinkOption: showDeepThinkOption,
                                     showDataExtractionOptions: showDataExtractionOptions,
@@ -721,7 +721,7 @@ const PromptInput = (param)=>{
                         },
                         children: [
                             'Click "Run" to execute ',
-                            (0, playground_utils_js_namespaceObject.actionNameForType)(selectedType)
+                            (0, external_playground_utils_js_namespaceObject.actionNameForType)(selectedType)
                         ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {

package/dist/lib/component/{service-mode-control/index.js → playground/ServiceModeControl.js}

@@ -31,10 +31,11 @@ const playground_namespaceObject = require("@midscene/playground");
 const env_namespaceObject = require("@midscene/shared/env");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
-const useServerValid_js_namespaceObject = require("../../hooks/useServerValid.js");
-const store_js_namespaceObject = require("../../store/store.js");
-const index_js_namespaceObject = require("../env-config/index.js");
-const external_misc_index_js_namespaceObject = require("../misc/index.js");
+const external_env_config_js_namespaceObject = require("../env-config.js");
+const external_misc_js_namespaceObject = require("../misc.js");
+const store_js_namespaceObject = require("../store/store.js");
+const external_useServerValid_js_namespaceObject = require("./useServerValid.js");
+require("./index.css");
 const TITLE_TEXT = {
     Server: 'Server Status',
     'In-Browser': 'In-Browser'
@@ -46,20 +47,20 @@ const SWITCH_BUTTON_TEXT = {
 const ServiceModeControl = (param)=>{
     let { serviceMode } = param;
     const { setServiceMode, config } = (0, store_js_namespaceObject.useEnvConfig)();
-    const serverValid = (0, useServerValid_js_namespaceObject.useServerValid)('Server' === serviceMode);
+    const serverValid = (0, external_useServerValid_js_namespaceObject.useServerValid)('Server' === serviceMode);
     const renderServerTip = ()=>{
         if (serverValid) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
             title: "Connected",
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "server-tip",
-                children: (0, external_misc_index_js_namespaceObject.iconForStatus)('connected')
+                children: (0, external_misc_js_namespaceObject.iconForStatus)('connected')
             })
         });
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
             title: "Connection failed",
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "server-tip",
-                children: (0, external_misc_index_js_namespaceObject.iconForStatus)('failed')
+                children: (0, external_misc_js_namespaceObject.iconForStatus)('failed')
             })
         });
     };
@@ -118,7 +119,7 @@ const ServiceModeControl = (param)=>{
                         children: title
                     }),
                     statusContent,
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.EnvConfig, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_env_config_js_namespaceObject.EnvConfig, {
                         showTooltipWhenEmpty: 'Server' !== serviceMode
                     })
                 ]

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

@@ -1,30 +1,7 @@
-.result-wrapper {
-  justify-content: center;
-  height: 100%;
-  margin: 4px 0;
-  display: flex;
-}
-
-.result-wrapper .loading-container {
-  text-align: center;
-}
-
-.result-wrapper .loading-container .loading-progress-text {
-  color: #888;
-  margin-top: 8px;
-  font-size: 12px;
-}
-
-.result-wrapper pre {
-  white-space: pre-wrap;
-  text-wrap: unset;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  background: #f2f4f7;
-  border-radius: 8px;
+body {
   margin: 0;
-  padding: 14px;
-  overflow: scroll;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-size: 14px;
 }
 
 .prompt-input-wrapper {
@@ -357,9 +334,164 @@
   color: #2b83ff;
 }
 
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+.history-modal-container {
+  border-radius: 12px 12px 0 0;
+  flex-direction: column;
+  height: 70vh;
+  display: flex;
+  overflow: hidden;
+}
+
+.history-modal-container .history-modal-header {
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  padding: 0 25px;
+  line-height: 48px;
+  display: flex;
+}
+
+.history-modal-container .history-modal-header .close-button {
+  justify-content: center;
+  align-items: center;
+  margin-right: -4px;
+  padding: 4px;
+  display: flex;
+}
+
+.history-modal-container .history-modal-header .close-button .anticon {
+  color: #999;
+  font-size: 18px;
+}
+
+.history-modal-container .history-modal-header .close-button:hover .anticon {
+  color: #666;
+}
+
+.history-modal-container .history-search-section {
+  background: #fff;
+  padding: 16px 20px;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper {
+  color: rgba(0, 0, 0, .25);
+  align-items: center;
+  gap: 12px;
+  display: flex;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .search-input {
+  background: #f1f2f3;
+  border: none;
+  border-radius: 16px;
+  flex: 1;
+  height: 36px;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input {
+  box-shadow: none;
+  background: none;
+  border: none;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .search-input:hover, .history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
+  background: #fff;
+  border-color: #d9d9d9;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .clear-button {
+  color: #1890ff;
+  height: auto;
+  padding: 0;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .clear-button:hover {
+  color: #40a9ff;
+}
+
+.history-modal-container .history-content {
+  flex: 1;
+  padding: 0 25px 25px;
+  overflow-y: auto;
+}
+
+.history-modal-container .history-content .history-group {
+  margin-bottom: 10px;
+}
+
+.history-modal-container .history-content .history-group .history-group-title {
+  color: rgba(0, 0, 0, .45);
+  height: 40px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 40px;
+}
+
+.history-modal-container .history-content .history-group .history-item {
+  cursor: pointer;
+  color: rgba(0, 0, 0, .85);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 40px;
   font-size: 14px;
+  line-height: 40px;
+  overflow: hidden;
+}
+
+.history-modal-container .history-content .history-group .history-item:hover {
+  background: #f2f4f7;
+  margin: 0 -8px;
+  padding: 0 8px;
+}
+
+.history-modal-container .history-content .no-results {
+  text-align: center;
+  color: #999;
+  padding: 40px 20px;
+}
+
+.ant-modal-wrap .ant-modal-content {
+  animation: .3s cubic-bezier(.4, 0, .2, 1) forwards slideUpFromBottom !important;
+}
+
+@keyframes slideUpFromBottom {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.result-wrapper {
+  justify-content: center;
+  height: 100%;
+  margin: 4px 0;
+  display: flex;
+}
+
+.result-wrapper .loading-container {
+  text-align: center;
+}
+
+.result-wrapper .loading-container .loading-progress-text {
+  color: #888;
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.result-wrapper pre {
+  white-space: pre-wrap;
+  text-wrap: unset;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  background: #f2f4f7;
+  border-radius: 8px;
+  margin: 0;
+  padding: 14px;
+  overflow: scroll;
 }
 

package/dist/lib/{utils/constants.js → component/playground/playground-constants.js}

@@ -1,5 +1,14 @@
 "use strict";
 var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
 (()=>{
     __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, {
@@ -24,14 +33,58 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    BLANK_RESULT: ()=>BLANK_RESULT,
-    WELCOME_MESSAGE_TEMPLATE: ()=>WELCOME_MESSAGE_TEMPLATE,
+    screenshotIncludedTip: ()=>screenshotIncludedTip,
+    errorMessageServerNotReady: ()=>errorMessageServerNotReady,
+    serverLaunchTip: ()=>serverLaunchTip,
+    defaultMainButtons: ()=>defaultMainButtons,
     apiMetadata: ()=>apiMetadata,
+    trackingTip: ()=>trackingTip,
     deepThinkTip: ()=>deepThinkTip,
-    defaultMainButtons: ()=>defaultMainButtons,
     domIncludedTip: ()=>domIncludedTip,
-    screenshotIncludedTip: ()=>screenshotIncludedTip,
-    trackingTip: ()=>trackingTip
+    emptyResultTip: ()=>emptyResultTip
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_antd_namespaceObject = require("antd");
+const external_shiny_text_js_namespaceObject = require("../shiny-text.js");
+var external_shiny_text_js_default = /*#__PURE__*/ __webpack_require__.n(external_shiny_text_js_namespaceObject);
+require("./index.css");
+const errorMessageServerNotReady = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+    children: [
+        "Don't worry, just one more step to launch the playground server.",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
+        "Please run one of the commands under the midscene project directory:",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
+        "a. ",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("strong", {
+            children: "npx midscene-playground"
+        }),
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
+        "b. ",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("strong", {
+            children: "npx --yes @midscene/web"
+        })
+    ]
+});
+const serverLaunchTip = function() {
+    let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "server-tip",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Alert, {
+            message: "Playground Server Not Ready",
+            description: notReadyMessage,
+            type: "warning"
+        })
+    });
+};
+const emptyResultTip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+    className: "result-empty-tip",
+    style: {
+        textAlign: 'center'
+    },
+    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_js_default(), {
+        disabled: true,
+        text: "The result will be shown here"
+    })
 });
 const trackingTip = 'limit popup to current tab';
 const deepThinkTip = 'deep think';
@@ -109,44 +162,24 @@ const defaultMainButtons = [
     'aiQuery',
     'aiAssert'
 ];
-const WELCOME_MESSAGE_TEMPLATE = {
-    type: 'system',
-    content: `
-      Welcome to Midscene.js Playground!
-      
-      This is a panel for experimenting and testing Midscene.js features. You can use natural language instructions to operate the web page, such as clicking buttons, filling in forms, querying information, etc.
-      
-      Please enter your instructions in the input box below to start experiencing.
-    `,
-    loading: false,
-    result: void 0,
-    replayScriptsInfo: null,
-    replayCounter: 0,
-    loadingProgressText: '',
-    verticalMode: false
-};
-const BLANK_RESULT = {
-    result: void 0,
-    dump: null,
-    reportHTML: null,
-    error: null
-};
-exports.BLANK_RESULT = __webpack_exports__.BLANK_RESULT;
-exports.WELCOME_MESSAGE_TEMPLATE = __webpack_exports__.WELCOME_MESSAGE_TEMPLATE;
 exports.apiMetadata = __webpack_exports__.apiMetadata;
 exports.deepThinkTip = __webpack_exports__.deepThinkTip;
 exports.defaultMainButtons = __webpack_exports__.defaultMainButtons;
 exports.domIncludedTip = __webpack_exports__.domIncludedTip;
+exports.emptyResultTip = __webpack_exports__.emptyResultTip;
+exports.errorMessageServerNotReady = __webpack_exports__.errorMessageServerNotReady;
 exports.screenshotIncludedTip = __webpack_exports__.screenshotIncludedTip;
+exports.serverLaunchTip = __webpack_exports__.serverLaunchTip;
 exports.trackingTip = __webpack_exports__.trackingTip;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "BLANK_RESULT",
-    "WELCOME_MESSAGE_TEMPLATE",
     "apiMetadata",
     "deepThinkTip",
     "defaultMainButtons",
     "domIncludedTip",
+    "emptyResultTip",
+    "errorMessageServerNotReady",
     "screenshotIncludedTip",
+    "serverLaunchTip",
     "trackingTip"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {

package/dist/lib/component/playground/playground-types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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__);
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/{utils → component/playground}/playground-utils.js

@@ -30,7 +30,7 @@ __webpack_require__.d(__webpack_exports__, {
     getPlaceholderForType: ()=>getPlaceholderForType
 });
 const static_namespaceObject = require("@midscene/web/static");
-const external_types_js_namespaceObject = require("../types.js");
+const external_types_js_namespaceObject = require("./types.js");
 const actionNameForType = (type)=>{
     const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
     const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();

package/dist/lib/{utils → component}/replay-scripts.js

@@ -30,7 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
     generateAnimationScripts: ()=>generateAnimationScripts,
     allScriptsFromDump: ()=>allScriptsFromDump
 });
-const external_index_js_namespaceObject = require("./index.js");
+require("./player.css");
+const external_utils_js_namespaceObject = require("../utils.js");
 const agent_namespaceObject = require("@midscene/core/agent");
 const extractor_namespaceObject = require("@midscene/shared/extractor");
 const stillDuration = 900;
@@ -233,7 +234,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
             var _task_recorder_, _task_recorder, _task_recorder_1, _task_recorder1;
             const title = (0, agent_namespaceObject.typeStr)(task);
             const subTitle = (0, agent_namespaceObject.paramStr)(task);
-            scripts.push(pointerScript(external_index_js_namespaceObject.mousePointer, title, subTitle));
+            scripts.push(pointerScript(external_utils_js_namespaceObject.mousePointer, title, subTitle));
             currentCameraState = null != insightCameraState ? insightCameraState : fullPageCameraState;
             scripts.push({
                 type: 'img',
@@ -261,7 +262,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                     title,
                     subTitle
                 });
-                scripts.push(pointerScript(external_index_js_namespaceObject.mousePointer, title, subTitle));
+                scripts.push(pointerScript(external_utils_js_namespaceObject.mousePointer, title, subTitle));
                 scripts.push({
                     type: 'img',
                     img: null == (_task_recorder2 = task.recorder) ? void 0 : null == (_task_recorder_2 = _task_recorder2[1]) ? void 0 : _task_recorder_2.screenshot,