@midscene/visualizer 0.28.1-beta-20250909063633.0 → 0.28.2-beta-20250909133629.0

package/dist/lib/browser.js

@@ -0,0 +1,132 @@
+"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, {
+            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__, {
+    iconForStatus: ()=>misc_index_js_namespaceObject.iconForStatus,
+    timeCostStrElement: ()=>misc_index_js_namespaceObject.timeCostStrElement,
+    timeStr: ()=>external_utils_index_js_namespaceObject.timeStr,
+    PlaygroundResultView: ()=>playground_result_index_js_namespaceObject.PlaygroundResultView,
+    useEnvConfig: ()=>store_js_namespaceObject.useEnvConfig,
+    EnvConfig: ()=>index_js_namespaceObject.EnvConfig,
+    LocalStorageProvider: ()=>storage_provider_js_namespaceObject.LocalStorageProvider,
+    ContextPreview: ()=>context_preview_index_js_namespaceObject.ContextPreview,
+    NoOpStorageProvider: ()=>storage_provider_js_namespaceObject.NoOpStorageProvider,
+    ShinyText: ()=>shiny_text_index_js_default(),
+    StaticContextProvider: ()=>context_provider_js_namespaceObject.StaticContextProvider,
+    Blackboard: ()=>blackboard_index_js_namespaceObject.Blackboard,
+    UniversalPlaygroundDefault: ()=>universal_playground_index_js_default(),
+    Player: ()=>player_index_js_namespaceObject.Player,
+    filterBase64Value: ()=>external_utils_index_js_namespaceObject.filterBase64Value,
+    BaseContextProvider: ()=>context_provider_js_namespaceObject.BaseContextProvider,
+    NoOpContextProvider: ()=>context_provider_js_namespaceObject.NoOpContextProvider,
+    colorForName: ()=>color_js_namespaceObject.colorForName,
+    GithubStar: ()=>github_star_index_js_namespaceObject.GithubStar,
+    Logo: ()=>logo_index_js_namespaceObject.Logo,
+    globalThemeConfig: ()=>color_js_namespaceObject.globalThemeConfig,
+    highlightColorForType: ()=>color_js_namespaceObject.highlightColorForType,
+    MemoryStorageProvider: ()=>storage_provider_js_namespaceObject.MemoryStorageProvider,
+    UniversalPlayground: ()=>universal_playground_index_js_namespaceObject.UniversalPlayground
+});
+require("./component/index.css");
+require("./component/universal-playground/index.css");
+const store_js_namespaceObject = require("./store/store.js");
+const color_js_namespaceObject = require("./utils/color.js");
+const index_js_namespaceObject = require("./component/env-config/index.js");
+const logo_index_js_namespaceObject = require("./component/logo/index.js");
+const misc_index_js_namespaceObject = require("./component/misc/index.js");
+const playground_result_index_js_namespaceObject = require("./component/playground-result/index.js");
+const context_preview_index_js_namespaceObject = require("./component/context-preview/index.js");
+const player_index_js_namespaceObject = require("./component/player/index.js");
+const blackboard_index_js_namespaceObject = require("./component/blackboard/index.js");
+const github_star_index_js_namespaceObject = require("./component/github-star/index.js");
+const external_utils_index_js_namespaceObject = require("./utils/index.js");
+const shiny_text_index_js_namespaceObject = require("./component/shiny-text/index.js");
+var shiny_text_index_js_default = /*#__PURE__*/ __webpack_require__.n(shiny_text_index_js_namespaceObject);
+const universal_playground_index_js_namespaceObject = require("./component/universal-playground/index.js");
+var universal_playground_index_js_default = /*#__PURE__*/ __webpack_require__.n(universal_playground_index_js_namespaceObject);
+const storage_provider_js_namespaceObject = require("./component/universal-playground/providers/storage-provider.js");
+const context_provider_js_namespaceObject = require("./component/universal-playground/providers/context-provider.js");
+exports.BaseContextProvider = __webpack_exports__.BaseContextProvider;
+exports.Blackboard = __webpack_exports__.Blackboard;
+exports.ContextPreview = __webpack_exports__.ContextPreview;
+exports.EnvConfig = __webpack_exports__.EnvConfig;
+exports.GithubStar = __webpack_exports__.GithubStar;
+exports.LocalStorageProvider = __webpack_exports__.LocalStorageProvider;
+exports.Logo = __webpack_exports__.Logo;
+exports.MemoryStorageProvider = __webpack_exports__.MemoryStorageProvider;
+exports.NoOpContextProvider = __webpack_exports__.NoOpContextProvider;
+exports.NoOpStorageProvider = __webpack_exports__.NoOpStorageProvider;
+exports.Player = __webpack_exports__.Player;
+exports.PlaygroundResultView = __webpack_exports__.PlaygroundResultView;
+exports.ShinyText = __webpack_exports__.ShinyText;
+exports.StaticContextProvider = __webpack_exports__.StaticContextProvider;
+exports.UniversalPlayground = __webpack_exports__.UniversalPlayground;
+exports.UniversalPlaygroundDefault = __webpack_exports__.UniversalPlaygroundDefault;
+exports.colorForName = __webpack_exports__.colorForName;
+exports.filterBase64Value = __webpack_exports__.filterBase64Value;
+exports.globalThemeConfig = __webpack_exports__.globalThemeConfig;
+exports.highlightColorForType = __webpack_exports__.highlightColorForType;
+exports.iconForStatus = __webpack_exports__.iconForStatus;
+exports.timeCostStrElement = __webpack_exports__.timeCostStrElement;
+exports.timeStr = __webpack_exports__.timeStr;
+exports.useEnvConfig = __webpack_exports__.useEnvConfig;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "BaseContextProvider",
+    "Blackboard",
+    "ContextPreview",
+    "EnvConfig",
+    "GithubStar",
+    "LocalStorageProvider",
+    "Logo",
+    "MemoryStorageProvider",
+    "NoOpContextProvider",
+    "NoOpStorageProvider",
+    "Player",
+    "PlaygroundResultView",
+    "ShinyText",
+    "StaticContextProvider",
+    "UniversalPlayground",
+    "UniversalPlaygroundDefault",
+    "colorForName",
+    "filterBase64Value",
+    "globalThemeConfig",
+    "highlightColorForType",
+    "iconForStatus",
+    "timeCostStrElement",
+    "timeStr",
+    "useEnvConfig"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/{blackboard.js → blackboard/index.js}

@@ -35,17 +35,17 @@ require("pixi.js/unsafe-eval");
 const external_antd_namespaceObject = require("antd");
 const external_pixi_js_namespaceObject = require("pixi.js");
 const external_react_namespaceObject = require("react");
-const external_color_js_namespaceObject = require("./color.js");
-require("./blackboard.css");
+const color_js_namespaceObject = require("../../utils/color.js");
+require("./index.css");
 const extractor_namespaceObject = require("@midscene/shared/extractor");
 const external_pixi_filters_namespaceObject = require("pixi-filters");
-const store_js_namespaceObject = require("./store/store.js");
+const store_js_namespaceObject = require("../../store/store.js");
 const itemFillAlpha = 0.4;
 const highlightAlpha = 0.4;
 const pointRadius = 10;
 const pointMarkForItem = (point, type)=>{
     const [x, y] = point;
-    const themeColor = (0, external_color_js_namespaceObject.highlightColorForType)('element');
+    const themeColor = (0, color_js_namespaceObject.highlightColorForType)('element');
     const graphics = new external_pixi_js_namespaceObject.Graphics();
     graphics.beginFill(themeColor, itemFillAlpha);
     graphics.drawCircle(x, y, pointRadius);
@@ -55,7 +55,7 @@ const pointMarkForItem = (point, type)=>{
 const rectMarkForItem = (rect, name, type)=>{
     const { left, top, width, height } = rect;
     let themeColor;
-    themeColor = 'element' === type ? (0, external_color_js_namespaceObject.colorForName)(name) : 'searchArea' === type ? (0, external_color_js_namespaceObject.highlightColorForType)('searchArea') : (0, external_color_js_namespaceObject.highlightColorForType)('element');
+    themeColor = 'element' === type ? (0, color_js_namespaceObject.colorForName)(name) : 'searchArea' === type ? (0, color_js_namespaceObject.highlightColorForType)('searchArea') : (0, color_js_namespaceObject.highlightColorForType)('element');
     const alpha = 'highlight' === type ? highlightAlpha : itemFillAlpha;
     const graphics = new external_pixi_js_namespaceObject.Graphics();
     graphics.beginFill(themeColor, alpha);

package/dist/lib/component/{playground/ConfigSelector.js → config-selector/index.js}

@@ -39,9 +39,8 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_antd_namespaceObject = require("antd");
 const setting_js_namespaceObject = require("../../icons/setting.js");
 var setting_js_default = /*#__PURE__*/ __webpack_require__.n(setting_js_namespaceObject);
-const store_js_namespaceObject = require("../store/store.js");
-const external_playground_constants_js_namespaceObject = require("./playground-constants.js");
-require("./index.css");
+const store_js_namespaceObject = require("../../store/store.js");
+const constants_js_namespaceObject = require("../../utils/constants.js");
 const ConfigSelector = (param)=>{
     let { showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false } = param;
     const forceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.forceSameTabNavigation);
@@ -75,7 +74,7 @@ const ConfigSelector = (param)=>{
             label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Checkbox, {
                 onChange: (e)=>setForceSameTabNavigation(e.target.checked),
                 checked: forceSameTabNavigation,
-                children: external_playground_constants_js_namespaceObject.trackingTip
+                children: constants_js_namespaceObject.trackingTip
             }),
             key: 'track-config'
         });
@@ -85,7 +84,7 @@ const ConfigSelector = (param)=>{
                     setDeepThink(e.target.checked);
                 },
                 checked: deepThink,
-                children: external_playground_constants_js_namespaceObject.deepThinkTip
+                children: constants_js_namespaceObject.deepThinkTip
             }),
             key: 'deep-think-config'
         });
@@ -96,7 +95,7 @@ const ConfigSelector = (param)=>{
                         setScreenshotIncluded(e.target.checked);
                     },
                     checked: screenshotIncluded,
-                    children: external_playground_constants_js_namespaceObject.screenshotIncludedTip
+                    children: constants_js_namespaceObject.screenshotIncludedTip
                 }),
                 key: 'screenshot-included-config'
             });
@@ -111,7 +110,7 @@ const ConfigSelector = (param)=>{
                                 marginBottom: '4px',
                                 fontSize: '14px'
                             },
-                            children: external_playground_constants_js_namespaceObject.domIncludedTip
+                            children: constants_js_namespaceObject.domIncludedTip
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Radio.Group, {
                             size: "small",

package/dist/lib/component/{playground/ContextPreview.js → context-preview/index.js}

@@ -37,12 +37,11 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_antd_namespaceObject = require("antd");
-const external_blackboard_js_namespaceObject = require("../blackboard.js");
-var external_blackboard_js_default = /*#__PURE__*/ __webpack_require__.n(external_blackboard_js_namespaceObject);
-const external_misc_js_namespaceObject = require("../misc.js");
-const external_playground_demo_ui_context_json_namespaceObject = require("../playground-demo-ui-context.json");
-var external_playground_demo_ui_context_json_default = /*#__PURE__*/ __webpack_require__.n(external_playground_demo_ui_context_json_namespaceObject);
-require("./index.css");
+const index_js_namespaceObject = require("../blackboard/index.js");
+var index_js_default = /*#__PURE__*/ __webpack_require__.n(index_js_namespaceObject);
+const external_misc_index_js_namespaceObject = require("../misc/index.js");
+const playground_demo_ui_context_json_namespaceObject = require("../playground/playground-demo-ui-context.json");
+var playground_demo_ui_context_json_default = /*#__PURE__*/ __webpack_require__.n(playground_demo_ui_context_json_namespaceObject);
 const ContextPreview = (param)=>{
     let { uiContextPreview, setUiContextPreview, showContextPreview } = param;
     if (!showContextPreview) return null;
@@ -52,18 +51,18 @@ const ContextPreview = (param)=>{
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
                 children: "UI Context"
             }),
-            uiContextPreview ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_blackboard_js_default(), {
+            uiContextPreview ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_default(), {
                 uiContext: uiContextPreview,
                 hideController: true
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 children: [
-                    (0, external_misc_js_namespaceObject.iconForStatus)('failed'),
+                    (0, external_misc_index_js_namespaceObject.iconForStatus)('failed'),
                     " No UI context",
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
                         type: "link",
                         onClick: (e)=>{
                             e.preventDefault();
-                            setUiContextPreview(external_playground_demo_ui_context_json_default());
+                            setUiContextPreview(playground_demo_ui_context_json_default());
                         },
                         children: "Load Demo"
                     }),

package/dist/lib/component/{env-config.js → env-config/index.js}

@@ -30,7 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const icons_namespaceObject = require("@ant-design/icons");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
-const store_js_namespaceObject = require("./store/store.js");
+const store_js_namespaceObject = require("../../store/store.js");
 function EnvConfig(param) {
     let { showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon' } = param;
     const { config, configString, loadConfig, syncFromStorage } = (0, store_js_namespaceObject.useEnvConfig)();

package/dist/lib/component/{github-star.js → github-star/index.js}

@@ -27,7 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
     GithubStar: ()=>GithubStar
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("./github-star.css");
+require("./index.css");
 const GithubStar = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
         href: "https://github.com/web-infra-dev/midscene",
         target: "_blank",

package/dist/lib/component/history-selector/index.css

@@ -0,0 +1,132 @@
+.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);
+  }
+}
+

package/dist/lib/component/{playground/HistorySelector.js → history-selector/index.js}

@@ -44,7 +44,7 @@ const history_js_namespaceObject = require("../../icons/history.js");
 var history_js_default = /*#__PURE__*/ __webpack_require__.n(history_js_namespaceObject);
 const magnifying_glass_js_namespaceObject = require("../../icons/magnifying-glass.js");
 var magnifying_glass_js_default = /*#__PURE__*/ __webpack_require__.n(magnifying_glass_js_namespaceObject);
-const external_store_history_js_namespaceObject = require("../store/history.js");
+const external_store_history_js_namespaceObject = require("../../store/history.js");
 require("./index.css");
 const { Text } = external_antd_namespaceObject.Typography;
 const HistorySelector = (param)=>{

package/dist/lib/component/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __webpack_modules__ = {
+    "../types": function(module) {
+        module.exports = require("../types.js");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __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, {
+            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__);
+    var _types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../types");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _types__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _types__WEBPACK_IMPORTED_MODULE_0__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+})();
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/{logo.js → logo/index.js}

@@ -28,7 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
     LogoUrl: ()=>LogoUrl
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("./logo.css");
+require("./index.css");
 const LogoUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png';
 const Logo = (param)=>{
     let { hideLogo = false } = param;

package/dist/lib/component/{misc.js → misc/index.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,11 +33,17 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    serverLaunchTip: ()=>serverLaunchTip,
+    errorMessageServerNotReady: ()=>errorMessageServerNotReady,
+    timeCostStrElement: ()=>timeCostStrElement,
     iconForStatus: ()=>iconForStatus,
-    timeCostStrElement: ()=>timeCostStrElement
+    emptyResultTip: ()=>emptyResultTip
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const icons_namespaceObject = require("@ant-design/icons");
+const external_antd_namespaceObject = require("antd");
+const index_js_namespaceObject = require("../shiny-text/index.js");
+var index_js_default = /*#__PURE__*/ __webpack_require__.n(index_js_namespaceObject);
 function timeCostStrElement(timeCost) {
     let str;
     str = 'number' != typeof timeCost ? '-' : `${(timeCost / 1000).toFixed(2)}s`;
@@ -80,10 +95,54 @@ const iconForStatus = (status)=>{
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.MinusOutlined, {});
     }
 };
+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)(index_js_default(), {
+        disabled: true,
+        text: "The result will be shown here"
+    })
+});
+exports.emptyResultTip = __webpack_exports__.emptyResultTip;
+exports.errorMessageServerNotReady = __webpack_exports__.errorMessageServerNotReady;
 exports.iconForStatus = __webpack_exports__.iconForStatus;
+exports.serverLaunchTip = __webpack_exports__.serverLaunchTip;
 exports.timeCostStrElement = __webpack_exports__.timeCostStrElement;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "emptyResultTip",
+    "errorMessageServerNotReady",
     "iconForStatus",
+    "serverLaunchTip",
     "timeCostStrElement"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {