@midscene/visualizer 0.28.2-beta-20250909133629.0 → 0.28.2-beta-20250910021445.0

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}

@@ -45,8 +45,9 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_antd_namespaceObject = require("antd");
-const index_js_namespaceObject = require("../component/shiny-text/index.js");
-var index_js_default = /*#__PURE__*/ __webpack_require__.n(index_js_namespaceObject);
+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.",
@@ -80,7 +81,7 @@ const emptyResultTip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div",
     style: {
         textAlign: 'center'
     },
-    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_default(), {
+    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_js_default(), {
         disabled: true,
         text: "The result will be shown here"
     })

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/{types.js → component/playground/types.js}

@@ -24,9 +24,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    BLANK_RESULT: ()=>BLANK_RESULT,
     VALIDATION_CONSTANTS: ()=>VALIDATION_CONSTANTS,
-    WELCOME_MESSAGE_TEMPLATE: ()=>WELCOME_MESSAGE_TEMPLATE,
     extractDefaultValue: ()=>extractDefaultValue,
     isLocateField: ()=>isLocateField,
     isZodObjectSchema: ()=>isZodObjectSchema,
@@ -101,39 +99,13 @@ const extractDefaultValue = (field)=>{
         currentField = currentField._def.innerType;
     }
 };
-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.VALIDATION_CONSTANTS = __webpack_exports__.VALIDATION_CONSTANTS;
-exports.WELCOME_MESSAGE_TEMPLATE = __webpack_exports__.WELCOME_MESSAGE_TEMPLATE;
 exports.extractDefaultValue = __webpack_exports__.extractDefaultValue;
 exports.isLocateField = __webpack_exports__.isLocateField;
 exports.isZodObjectSchema = __webpack_exports__.isZodObjectSchema;
 exports.unwrapZodType = __webpack_exports__.unwrapZodType;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "BLANK_RESULT",
     "VALIDATION_CONSTANTS",
-    "WELCOME_MESSAGE_TEMPLATE",
     "extractDefaultValue",
     "isLocateField",
     "isZodObjectSchema",

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,

package/dist/lib/component/{shiny-text/index.js → shiny-text.js}

@@ -27,7 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
     default: ()=>shiny_text
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("./index.css");
+require("./shiny-text.css");
 const ShinyText = (param)=>{
     let { text, disabled = false, speed = 5, className = '' } = param;
     const style = {

package/dist/lib/index.js

@@ -33,83 +33,60 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    timeCostStrElement: ()=>misc_index_js_namespaceObject.timeCostStrElement,
+    timeCostStrElement: ()=>misc_js_namespaceObject.timeCostStrElement,
     actionNameForType: ()=>playground_utils_js_namespaceObject.actionNameForType,
-    PlaygroundResultView: ()=>playground_result_index_js_namespaceObject.PlaygroundResultView,
-    timeStr: ()=>external_utils_index_js_namespaceObject.timeStr,
-    EnvConfig: ()=>index_js_namespaceObject.EnvConfig,
+    PlaygroundResultView: ()=>PlaygroundResult_js_namespaceObject.PlaygroundResultView,
+    timeStr: ()=>external_utils_js_namespaceObject.timeStr,
+    EnvConfig: ()=>env_config_js_namespaceObject.EnvConfig,
     allScriptsFromDump: ()=>replay_scripts_js_namespaceObject.allScriptsFromDump,
-    LocalStorageProvider: ()=>storage_provider_js_namespaceObject.LocalStorageProvider,
-    UniversalPlaygroundDefault: ()=>universal_playground_index_js_default(),
+    PromptInput: ()=>PromptInput_js_namespaceObject.PromptInput,
+    ContextPreview: ()=>ContextPreview_js_namespaceObject.ContextPreview,
     generateAnimationScripts: ()=>replay_scripts_js_namespaceObject.generateAnimationScripts,
-    ShinyText: ()=>shiny_text_index_js_default(),
+    ShinyText: ()=>shiny_text_js_default(),
+    Blackboard: ()=>blackboard_js_namespaceObject.Blackboard,
     getPlaceholderForType: ()=>playground_utils_js_namespaceObject.getPlaceholderForType,
     staticAgentFromContext: ()=>playground_utils_js_namespaceObject.staticAgentFromContext,
+    useEnvConfig: ()=>store_js_namespaceObject.useEnvConfig,
     useServerValid: ()=>useServerValid_js_namespaceObject.useServerValid,
-    ServiceModeControl: ()=>service_mode_control_index_js_namespaceObject.ServiceModeControl,
-    BaseContextProvider: ()=>context_provider_js_namespaceObject.BaseContextProvider,
+    Player: ()=>player_js_namespaceObject.Player,
+    ServiceModeControl: ()=>ServiceModeControl_js_namespaceObject.ServiceModeControl,
+    filterBase64Value: ()=>external_utils_js_namespaceObject.filterBase64Value,
     colorForName: ()=>color_js_namespaceObject.colorForName,
-    GithubStar: ()=>github_star_index_js_namespaceObject.GithubStar,
-    Logo: ()=>logo_index_js_namespaceObject.Logo,
-    UniversalPlayground: ()=>universal_playground_index_js_namespaceObject.UniversalPlayground,
-    useEnvConfig: ()=>store_js_namespaceObject.useEnvConfig,
-    PromptInput: ()=>prompt_input_index_js_namespaceObject.PromptInput,
-    ContextPreview: ()=>context_preview_index_js_namespaceObject.ContextPreview,
-    NoOpStorageProvider: ()=>storage_provider_js_namespaceObject.NoOpStorageProvider,
-    StaticContextProvider: ()=>context_provider_js_namespaceObject.StaticContextProvider,
-    Blackboard: ()=>blackboard_index_js_namespaceObject.Blackboard,
-    Player: ()=>player_index_js_namespaceObject.Player,
-    AgentContextProvider: ()=>context_provider_js_namespaceObject.AgentContextProvider,
-    filterBase64Value: ()=>external_utils_index_js_namespaceObject.filterBase64Value,
-    NoOpContextProvider: ()=>context_provider_js_namespaceObject.NoOpContextProvider,
-    highlightColorForType: ()=>color_js_namespaceObject.highlightColorForType,
-    iconForStatus: ()=>misc_index_js_namespaceObject.iconForStatus,
+    GithubStar: ()=>github_star_js_namespaceObject.GithubStar,
+    Logo: ()=>logo_js_namespaceObject.Logo,
     globalThemeConfig: ()=>color_js_namespaceObject.globalThemeConfig,
-    MemoryStorageProvider: ()=>storage_provider_js_namespaceObject.MemoryStorageProvider
+    highlightColorForType: ()=>color_js_namespaceObject.highlightColorForType,
+    iconForStatus: ()=>misc_js_namespaceObject.iconForStatus
 });
 require("./component/playground/index.css");
-require("./component/universal-playground/index.css");
-const replay_scripts_js_namespaceObject = require("./utils/replay-scripts.js");
-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 useServerValid_js_namespaceObject = require("./hooks/useServerValid.js");
-const playground_result_index_js_namespaceObject = require("./component/playground-result/index.js");
-const service_mode_control_index_js_namespaceObject = require("./component/service-mode-control/index.js");
-const context_preview_index_js_namespaceObject = require("./component/context-preview/index.js");
-const prompt_input_index_js_namespaceObject = require("./component/prompt-input/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 playground_utils_js_namespaceObject = require("./utils/playground-utils.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.AgentContextProvider = __webpack_exports__.AgentContextProvider;
-exports.BaseContextProvider = __webpack_exports__.BaseContextProvider;
+const replay_scripts_js_namespaceObject = require("./component/replay-scripts.js");
+const store_js_namespaceObject = require("./component/store/store.js");
+const color_js_namespaceObject = require("./component/color.js");
+const env_config_js_namespaceObject = require("./component/env-config.js");
+const logo_js_namespaceObject = require("./component/logo.js");
+const misc_js_namespaceObject = require("./component/misc.js");
+const useServerValid_js_namespaceObject = require("./component/playground/useServerValid.js");
+const PlaygroundResult_js_namespaceObject = require("./component/playground/PlaygroundResult.js");
+const ServiceModeControl_js_namespaceObject = require("./component/playground/ServiceModeControl.js");
+const ContextPreview_js_namespaceObject = require("./component/playground/ContextPreview.js");
+const PromptInput_js_namespaceObject = require("./component/playground/PromptInput.js");
+const player_js_namespaceObject = require("./component/player.js");
+const blackboard_js_namespaceObject = require("./component/blackboard.js");
+const github_star_js_namespaceObject = require("./component/github-star.js");
+const playground_utils_js_namespaceObject = require("./component/playground/playground-utils.js");
+const external_utils_js_namespaceObject = require("./utils.js");
+const shiny_text_js_namespaceObject = require("./component/shiny-text.js");
+var shiny_text_js_default = /*#__PURE__*/ __webpack_require__.n(shiny_text_js_namespaceObject);
 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.PromptInput = __webpack_exports__.PromptInput;
 exports.ServiceModeControl = __webpack_exports__.ServiceModeControl;
 exports.ShinyText = __webpack_exports__.ShinyText;
-exports.StaticContextProvider = __webpack_exports__.StaticContextProvider;
-exports.UniversalPlayground = __webpack_exports__.UniversalPlayground;
-exports.UniversalPlaygroundDefault = __webpack_exports__.UniversalPlaygroundDefault;
 exports.actionNameForType = __webpack_exports__.actionNameForType;
 exports.allScriptsFromDump = __webpack_exports__.allScriptsFromDump;
 exports.colorForName = __webpack_exports__.colorForName;
@@ -125,25 +102,16 @@ exports.timeStr = __webpack_exports__.timeStr;
 exports.useEnvConfig = __webpack_exports__.useEnvConfig;
 exports.useServerValid = __webpack_exports__.useServerValid;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "AgentContextProvider",
-    "BaseContextProvider",
     "Blackboard",
     "ContextPreview",
     "EnvConfig",
     "GithubStar",
-    "LocalStorageProvider",
     "Logo",
-    "MemoryStorageProvider",
-    "NoOpContextProvider",
-    "NoOpStorageProvider",
     "Player",
     "PlaygroundResultView",
     "PromptInput",
     "ServiceModeControl",
     "ShinyText",
-    "StaticContextProvider",
-    "UniversalPlayground",
-    "UniversalPlaygroundDefault",
     "actionNameForType",
     "allScriptsFromDump",
     "colorForName",

package/dist/lib/{icons/avatar.js → init.js}

@@ -24,24 +24,20 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    default: ()=>avatar
+    setSideEffect: ()=>setSideEffect
 });
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("react");
-const SvgAvatar = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
-        width: 20,
-        height: 20,
-        fill: "currentColor",
-        viewBox: "0 0 24 24",
-        ...props,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-            d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"
-        })
-    });
-const avatar = SvgAvatar;
-exports["default"] = __webpack_exports__["default"];
+const external_buffer_namespaceObject = require("buffer");
+var _window;
+(_window = window).global || (_window.global = window);
+window.Buffer = external_buffer_namespaceObject.Buffer;
+let sideEffect = 0;
+const setSideEffect = ()=>{
+    sideEffect++;
+    return sideEffect;
+};
+exports.setSideEffect = __webpack_exports__.setSideEffect;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "default"
+    "setSideEffect"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/types/component/{blackboard/index.d.ts → blackboard.d.ts}

@@ -1,7 +1,7 @@
 import 'pixi.js/unsafe-eval';
-import type { BaseElement, Rect, UIContext } from '@midscene/core';
 import * as PIXI from 'pixi.js';
-import './index.less';
+import type { BaseElement, Rect, UIContext } from '../../../core';
+import './blackboard.less';
 export declare const pointMarkForItem: (point: [number, number], type: "highlightPoint") => PIXI.Graphics;
 export declare const rectMarkForItem: (rect: Rect, name: string, type: "element" | "searchArea" | "highlight") => (PIXI.Graphics | PIXI.Text)[];
 export declare const Blackboard: (props: {

package/dist/types/component/{github-star/index.d.ts → github-star.d.ts}

@@ -1,2 +1,2 @@
-import './index.less';
+import './github-star.less';
 export declare const GithubStar: () => import("react").JSX.Element;

package/dist/types/component/{logo/index.d.ts → logo.d.ts}

@@ -1,4 +1,4 @@
-import './index.less';
+import './logo.less';
 export declare const LogoUrl = "https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png";
 export declare const Logo: ({ hideLogo }: {
     hideLogo?: boolean;

package/dist/types/component/misc.d.ts

@@ -0,0 +1,2 @@
+export declare function timeCostStrElement(timeCost?: number): import("react").JSX.Element;
+export declare const iconForStatus: (status: string) => import("react").JSX.Element;

package/dist/types/component/{player/index.d.ts → player.d.ts}

@@ -1,6 +1,6 @@
 import 'pixi.js/unsafe-eval';
-import './index.less';
-import type { AnimationScript } from '../../utils/replay-scripts';
+import './player.less';
+import type { AnimationScript } from './replay-scripts';
 export declare function Player(props?: {
     replayScripts?: AnimationScript[];
     imageWidth?: number;

package/dist/types/component/{config-selector/index.d.ts → playground/ConfigSelector.d.ts}

@@ -1,4 +1,5 @@
 import type React from 'react';
+import './index.less';
 interface ConfigSelectorProps {
     showDeepThinkOption: boolean;
     enableTracking: boolean;

package/dist/types/component/{context-preview/index.d.ts → playground/ContextPreview.d.ts}

@@ -1,5 +1,6 @@
 import type { UIContext } from '@midscene/core';
 import type React from 'react';
+import './index.less';
 interface ContextPreviewProps {
     uiContextPreview: UIContext | undefined;
     setUiContextPreview: (context: UIContext) => void;

package/dist/types/component/{history-selector/index.d.ts → playground/HistorySelector.d.ts}

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { HistoryItem } from '../../store/history';
+import type { HistoryItem } from '../store/history';
 import './index.less';
 interface HistorySelectorProps {
     onSelect: (history: HistoryItem) => void;

package/dist/types/component/{playground-result/index.d.ts → playground/PlaygroundResult.d.ts}

@@ -1,7 +1,8 @@
 import type React from 'react';
-import type { PlaygroundResult as PlaygroundResultType } from '../../types';
-import type { ServiceModeType } from '../../types';
-import type { ReplayScriptsInfo } from '../../utils/replay-scripts';
+import type { ReplayScriptsInfo } from '../replay-scripts';
+import type { PlaygroundResult as PlaygroundResultType } from './playground-types';
+import type { ServiceModeType } from './playground-types';
+import './index.less';
 interface PlaygroundResultProps {
     result: PlaygroundResultType | null;
     loading: boolean;