@midscene/visualizer 0.27.1-beta-20250822053848.0 → 0.27.1-beta-20250822094725.0

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

@@ -50,8 +50,31 @@ body {
   color: #fff;
 }
 
-.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:hover {
-  color: #2b83ff;
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button {
+  height: 24px;
+  box-shadow: none;
+  background-color: #f7f7f7;
+  border: none;
+  border-radius: 11px;
+  align-items: center;
+  gap: 2px;
+  padding: 0 8px;
+  font-size: 12px;
+  display: inline-flex;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button:hover {
+  background-color: #e6e6e6;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button.selected-from-dropdown {
+  color: #fff;
+  background-color: #2b83ff;
+  font-weight: 500;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button.selected-from-dropdown:hover {
+  background-color: #2b83ff;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
@@ -120,6 +143,10 @@ body {
   background-color: rgba(0, 0, 0, 0);
 }
 
+.prompt-input-wrapper .ant-form-item-with-help + .form-controller-wrapper {
+  bottom: 22px;
+}
+
 .prompt-input-wrapper .ant-input {
   padding-bottom: 40px;
 }
@@ -152,6 +179,137 @@ body {
   color: #3b3b3b;
 }
 
+.prompt-input-wrapper .structured-params-container {
+  background: linear-gradient(#fff, #fff) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box;
+  border: 1px solid rgba(0, 0, 0, 0);
+  border-radius: 12px;
+  padding: 16px 16px 56px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item {
+  flex-direction: column;
+  display: flex;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label {
+  text-align: left;
+  flex-basis: auto;
+  padding-bottom: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label {
+  color: rgba(0, 0, 0, .85);
+  height: auto;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:after {
+  color: #ff4d4f;
+  font-family: SimSun, sans-serif;
+  font-size: 12px;
+  line-height: 1;
+  display: inline-block;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
+  margin-left: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
+  margin-left: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
+  margin-left: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
+  margin-right: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
+  margin-right: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
+  margin-right: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-control {
+  flex: 1;
+  margin-top: 0;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-row {
+  flex-direction: column;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-control-input {
+  min-height: auto;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number, .prompt-input-wrapper .structured-params-container .structured-params .ant-select {
+  border: 1px solid #e1e5e9;
+  border-radius: 6px;
+  width: 100%;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input:hover, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:hover, .prompt-input-wrapper .structured-params-container .structured-params .ant-select:hover {
+  border-color: #40a9ff;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input:focus, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:focus, .prompt-input-wrapper .structured-params-container .structured-params .ant-select:focus, .prompt-input-wrapper .structured-params-container .structured-params .ant-input:focus-within, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:focus-within, .prompt-input-wrapper .structured-params-container .structured-params .ant-select:focus-within {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params textarea.ant-input {
+  padding-bottom: 5px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input-number .ant-input-number-input {
+  box-shadow: none;
+  border: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:hover .ant-input-number-input {
+  box-shadow: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-select {
+  min-width: 120px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-select .ant-select-selector {
+  box-shadow: none;
+  border: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-select:hover .ant-select-selector, .prompt-input-wrapper .structured-params-container .structured-params .ant-select.ant-select-focused .ant-select-selector {
+  box-shadow: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group {
+  width: 100%;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper {
+  border: 1px solid #e1e5e9;
+  border-radius: 6px;
+  height: 32px;
+  margin-right: 4px;
+  font-size: 12px;
+  line-height: 30px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
+  color: #fff;
+  background-color: #2b83ff;
+  border-color: #2b83ff;
+}
+
 .selector-trigger {
   cursor: pointer;
   width: 24px;

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

@@ -33,10 +33,12 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    serverLaunchTip: ()=>serverLaunchTip,
+    apiMetadata: ()=>apiMetadata,
     errorMessageServerNotReady: ()=>errorMessageServerNotReady,
-    trackingTip: ()=>trackingTip,
+    serverLaunchTip: ()=>serverLaunchTip,
+    defaultMainButtons: ()=>defaultMainButtons,
     deepThinkTip: ()=>deepThinkTip,
+    trackingTip: ()=>trackingTip,
     emptyResultTip: ()=>emptyResultTip
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
@@ -84,13 +86,85 @@ const emptyResultTip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div",
 });
 const trackingTip = 'limit popup to current tab';
 const deepThinkTip = 'deep think';
+const apiMetadata = {
+    aiAction: {
+        group: 'interaction',
+        title: 'Auto Planning: plan the steps and execute'
+    },
+    aiTap: {
+        group: 'interaction',
+        title: 'Click an element'
+    },
+    aiHover: {
+        group: 'interaction',
+        title: 'Hover over an element'
+    },
+    aiInput: {
+        group: 'interaction',
+        title: 'Input text into an element'
+    },
+    aiRightClick: {
+        group: 'interaction',
+        title: 'Right-click an element'
+    },
+    aiKeyboardPress: {
+        group: 'interaction',
+        title: 'Press keyboard keys'
+    },
+    aiScroll: {
+        group: 'interaction',
+        title: 'Scroll the page or element'
+    },
+    aiLocate: {
+        group: 'interaction',
+        title: 'Locate an element on the page'
+    },
+    aiQuery: {
+        group: 'extraction',
+        title: 'Extract data directly from the UI'
+    },
+    aiBoolean: {
+        group: 'extraction',
+        title: 'Get true/false answer'
+    },
+    aiNumber: {
+        group: 'extraction',
+        title: 'Extract numeric value'
+    },
+    aiString: {
+        group: 'extraction',
+        title: 'Extract text value'
+    },
+    aiAsk: {
+        group: 'extraction',
+        title: 'Ask a question about the UI'
+    },
+    aiAssert: {
+        group: 'validation',
+        title: 'Assert a condition is true'
+    },
+    aiWaitFor: {
+        group: 'validation',
+        title: 'Wait for a condition to be met'
+    }
+};
+const defaultMainButtons = [
+    'aiAction',
+    'aiTap',
+    'aiQuery',
+    'aiAssert'
+];
+exports.apiMetadata = __webpack_exports__.apiMetadata;
 exports.deepThinkTip = __webpack_exports__.deepThinkTip;
+exports.defaultMainButtons = __webpack_exports__.defaultMainButtons;
 exports.emptyResultTip = __webpack_exports__.emptyResultTip;
 exports.errorMessageServerNotReady = __webpack_exports__.errorMessageServerNotReady;
 exports.serverLaunchTip = __webpack_exports__.serverLaunchTip;
 exports.trackingTip = __webpack_exports__.trackingTip;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "apiMetadata",
     "deepThinkTip",
+    "defaultMainButtons",
     "emptyResultTip",
     "errorMessageServerNotReady",
     "serverLaunchTip",

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

@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
     formatErrorMessage: ()=>formatErrorMessage,
     serverBase: ()=>serverBase,
     actionNameForType: ()=>actionNameForType,
+    isRunButtonEnabled: ()=>isRunButtonEnabled,
     getPlaceholderForType: ()=>getPlaceholderForType,
     cancelTask: ()=>cancelTask,
     requestPlaygroundServer: ()=>requestPlaygroundServer,
@@ -38,6 +39,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const constants_namespaceObject = require("@midscene/shared/constants");
 const playground_namespaceObject = require("@midscene/web/playground");
+const external_types_js_namespaceObject = require("./types.js");
 const serverBase = `http://localhost:${constants_namespaceObject.PLAYGROUND_SERVER_PORT}`;
 const checkServerStatus = async ()=>{
     try {
@@ -101,6 +103,17 @@ const actionNameForType = (type)=>{
     if ('aiQuery' === type) return 'Query';
     if ('aiAssert' === type) return 'Assert';
     if ('aiTap' === type) return 'Tap';
+    if ('aiHover' === type) return 'Hover';
+    if ('aiInput' === type) return 'Input';
+    if ('aiRightClick' === type) return 'Right Click';
+    if ('aiKeyboardPress' === type) return 'Keyboard Press';
+    if ('aiScroll' === type) return 'Scroll';
+    if ('aiLocate' === type) return 'Locate';
+    if ('aiBoolean' === type) return 'Boolean';
+    if ('aiNumber' === type) return 'Number';
+    if ('aiString' === type) return 'String';
+    if ('aiAsk' === type) return 'Ask';
+    if ('aiWaitFor' === type) return 'Wait For';
     return type;
 };
 const staticAgentFromContext = (context)=>{
@@ -116,6 +129,18 @@ const formatErrorMessage = (e)=>{
 const getPlaceholderForType = (type)=>{
     if ('aiQuery' === type) return 'What do you want to query?';
     if ('aiAssert' === type) return 'What do you want to assert?';
+    if ('aiTap' === type) return 'What element do you want to tap?';
+    if ('aiHover' === type) return 'What element do you want to hover over?';
+    if ('aiInput' === type) return 'Format: <value> | <element>\nExample: hello world | search box';
+    if ('aiRightClick' === type) return 'What element do you want to right-click?';
+    if ('aiKeyboardPress' === type) return 'Format: <key> | <element (optional)>\nExample: Enter | text field';
+    if ('aiScroll' === type) return 'Format: <direction> <amount> | <element (optional)>\nExample: down 500 | main content';
+    if ('aiLocate' === type) return 'What element do you want to locate?';
+    if ('aiBoolean' === type) return 'What do you want to check (returns true/false)?';
+    if ('aiNumber' === type) return 'What number do you want to extract?';
+    if ('aiString' === type) return 'What text do you want to extract?';
+    if ('aiAsk' === type) return 'What do you want to ask?';
+    if ('aiWaitFor' === type) return 'What condition do you want to wait for?';
     return 'What do you want to do?';
 };
 const blankResult = {
@@ -124,6 +149,24 @@ const blankResult = {
     reportHTML: null,
     error: null
 };
+const isRunButtonEnabled = (runButtonEnabled, needsStructuredParams, params, actionSpace, selectedType, promptValue)=>{
+    if (!runButtonEnabled) return false;
+    if (needsStructuredParams) {
+        const currentParams = params || {};
+        const action = null == actionSpace ? void 0 : actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
+        if ((null == action ? void 0 : action.paramSchema) && (0, external_types_js_namespaceObject.isZodObjectSchema)(action.paramSchema)) {
+            const schema = action.paramSchema;
+            return Object.keys(schema.shape).every((key)=>{
+                const field = schema.shape[key];
+                const { isOptional } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
+                const value = currentParams[key];
+                return isOptional || void 0 !== value && '' !== value && null !== value;
+            });
+        }
+        return true;
+    }
+    return promptValue.trim().length > 0;
+};
 exports.actionNameForType = __webpack_exports__.actionNameForType;
 exports.blankResult = __webpack_exports__.blankResult;
 exports.cancelTask = __webpack_exports__.cancelTask;
@@ -131,6 +174,7 @@ exports.checkServerStatus = __webpack_exports__.checkServerStatus;
 exports.formatErrorMessage = __webpack_exports__.formatErrorMessage;
 exports.getPlaceholderForType = __webpack_exports__.getPlaceholderForType;
 exports.getTaskProgress = __webpack_exports__.getTaskProgress;
+exports.isRunButtonEnabled = __webpack_exports__.isRunButtonEnabled;
 exports.overrideServerConfig = __webpack_exports__.overrideServerConfig;
 exports.requestPlaygroundServer = __webpack_exports__.requestPlaygroundServer;
 exports.serverBase = __webpack_exports__.serverBase;
@@ -143,6 +187,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "formatErrorMessage",
     "getPlaceholderForType",
     "getTaskProgress",
+    "isRunButtonEnabled",
     "overrideServerConfig",
     "requestPlaygroundServer",
     "serverBase",

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

@@ -0,0 +1,96 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    VALIDATION_CONSTANTS: ()=>VALIDATION_CONSTANTS,
+    extractDefaultValue: ()=>extractDefaultValue,
+    isLocateField: ()=>isLocateField,
+    isZodObjectSchema: ()=>isZodObjectSchema,
+    unwrapZodType: ()=>unwrapZodType
+});
+const VALIDATION_CONSTANTS = {
+    ZOD_TYPES: {
+        OPTIONAL: 'ZodOptional',
+        DEFAULT: 'ZodDefault',
+        NULLABLE: 'ZodNullable',
+        OBJECT: 'ZodObject',
+        ENUM: 'ZodEnum',
+        NUMBER: 'ZodNumber',
+        STRING: 'ZodString'
+    },
+    FIELD_FLAGS: {
+        LOCATION: 'midscene_location_field_flag'
+    },
+    DEFAULT_VALUES: {
+        ACTION_TYPE: 'aiAction',
+        TIMEOUT_MS: 15000,
+        CHECK_INTERVAL_MS: 3000
+    }
+};
+const isZodObjectSchema = (schema)=>'object' == typeof schema && null !== schema && 'shape' in schema && 'parse' in schema && 'function' == typeof schema.parse;
+const isLocateField = (field)=>{
+    var _field__def, _field__def_shape, _field__def1, _field__def_shape1, _field__def2;
+    return !!((null == (_field__def = field._def) ? void 0 : _field__def.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.OBJECT && (null == (_field__def_shape = (_field__def1 = field._def).shape) ? void 0 : _field__def_shape.call(_field__def1)) && VALIDATION_CONSTANTS.FIELD_FLAGS.LOCATION in ((null == (_field__def_shape1 = (_field__def2 = field._def).shape) ? void 0 : _field__def_shape1.call(_field__def2)) || {}));
+};
+const unwrapZodType = (field)=>{
+    var _actualField__def, _actualField__def1, _actualField__def2;
+    let actualField = field;
+    let isOptional = false;
+    let hasDefault = false;
+    while((null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.OPTIONAL || (null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.DEFAULT || (null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.NULLABLE){
+        var _actualField__def3, _actualField__def4;
+        if ((null == (_actualField__def3 = actualField._def) ? void 0 : _actualField__def3.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.OPTIONAL) isOptional = true;
+        if ((null == (_actualField__def4 = actualField._def) ? void 0 : _actualField__def4.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.DEFAULT) hasDefault = true;
+        actualField = actualField._def.innerType || actualField;
+    }
+    return {
+        actualField,
+        isOptional,
+        hasDefault
+    };
+};
+const extractDefaultValue = (field)=>{
+    var _currentField__def;
+    let currentField = field;
+    while(null == (_currentField__def = currentField._def) ? void 0 : _currentField__def.innerType){
+        if (currentField._def.typeName === VALIDATION_CONSTANTS.ZOD_TYPES.DEFAULT && currentField._def.defaultValue) return currentField._def.defaultValue();
+        currentField = currentField._def.innerType;
+    }
+};
+exports.VALIDATION_CONSTANTS = __webpack_exports__.VALIDATION_CONSTANTS;
+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 === [
+    "VALIDATION_CONSTANTS",
+    "extractDefaultValue",
+    "isLocateField",
+    "isZodObjectSchema",
+    "unwrapZodType"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/replay-scripts.js

@@ -32,7 +32,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 require("./player.css");
 const external_utils_js_namespaceObject = require("../utils.js");
-const ui_utils_namespaceObject = require("@midscene/web/ui-utils");
+const agent_namespaceObject = require("@midscene/core/agent");
 const extractor_namespaceObject = require("@midscene/shared/extractor");
 const stillDuration = 900;
 const actionSpinningPointerDuration = 300;
@@ -81,11 +81,10 @@ const allScriptsFromDump = (dump)=>{
     dump.executions.forEach((execution)=>{
         if (execution.sdkVersion) sdkVersion = execution.sdkVersion;
         execution.tasks.forEach((task)=>{
-            var _insightTask_pageContext_size, _insightTask_pageContext;
-            const insightTask = task;
-            if (null == (_insightTask_pageContext = insightTask.pageContext) ? void 0 : null == (_insightTask_pageContext_size = _insightTask_pageContext.size) ? void 0 : _insightTask_pageContext_size.width) {
-                width = insightTask.pageContext.size.width;
-                height = insightTask.pageContext.size.height;
+            var _task_pageContext_size, _task_pageContext;
+            if (null == (_task_pageContext = task.pageContext) ? void 0 : null == (_task_pageContext_size = _task_pageContext.size) ? void 0 : _task_pageContext_size.width) {
+                width = task.pageContext.size.width;
+                height = task.pageContext.size.height;
             }
         });
     });
@@ -112,14 +111,24 @@ const allScriptsFromDump = (dump)=>{
         if (index !== allScripts.length - 1 && 'Done' === script.title) return false;
         return true;
     });
+    const modelBriefs = (()=>{
+        var _list_;
+        const list = [
+            ...modelBriefsSet
+        ];
+        if (!list.length) return list;
+        const firstOneInfo = null == (_list_ = list[0]) ? void 0 : _list_.split('/', 2)[1];
+        if (firstOneInfo && list.slice(1).every((item)=>(null == item ? void 0 : item.split('/', 2)[1]) === firstOneInfo)) return [
+            firstOneInfo
+        ];
+        return list;
+    })();
     return {
         scripts: allScriptsWithoutIntermediateDoneFrame,
         width,
         height,
         sdkVersion,
-        modelBriefs: [
-            ...modelBriefsSet
-        ]
+        modelBriefs
     };
 };
 const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
@@ -162,7 +171,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
     let errorStateFlag = false;
     tasksIncluded.forEach((task, index)=>{
         if (errorStateFlag) return;
-        if (0 === index) initSubTitle = (0, ui_utils_namespaceObject.paramStr)(task);
+        if (0 === index) initSubTitle = (0, agent_namespaceObject.paramStr)(task);
         if ('Planning' === task.type) {
             const planningTask = task;
             if (planningTask.recorder && planningTask.recorder.length > 0) {
@@ -172,16 +181,16 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                     img: null == (_planningTask_recorder = planningTask.recorder) ? void 0 : null == (_planningTask_recorder_ = _planningTask_recorder[0]) ? void 0 : _planningTask_recorder_.screenshot,
                     camera: 0 === index ? fullPageCameraState : void 0,
                     duration: stillDuration,
-                    title: (0, ui_utils_namespaceObject.typeStr)(task),
-                    subTitle: (0, ui_utils_namespaceObject.paramStr)(task)
+                    title: (0, agent_namespaceObject.typeStr)(task),
+                    subTitle: (0, agent_namespaceObject.paramStr)(task)
                 });
             }
         } else if ('Insight' === task.type && 'Locate' === task.subType) {
             var _insightTask_output;
             const insightTask = task;
             const resultElement = null == (_insightTask_output = insightTask.output) ? void 0 : _insightTask_output.element;
-            const title = (0, ui_utils_namespaceObject.typeStr)(task);
-            const subTitle = (0, ui_utils_namespaceObject.paramStr)(task);
+            const title = (0, agent_namespaceObject.typeStr)(task);
+            const subTitle = (0, agent_namespaceObject.paramStr)(task);
             if (null == resultElement ? void 0 : resultElement.rect) insightCameraState = {
                 ...cameraStateForRect(resultElement.rect, imageWidth, imageHeight),
                 pointerLeft: resultElement.center[0],
@@ -223,8 +232,8 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
             }
         } else if ('Action' === task.type && 'FalsyConditionStatement' !== task.subType) {
             var _task_recorder_, _task_recorder, _task_recorder_1, _task_recorder1;
-            const title = (0, ui_utils_namespaceObject.typeStr)(task);
-            const subTitle = (0, ui_utils_namespaceObject.paramStr)(task);
+            const title = (0, agent_namespaceObject.typeStr)(task);
+            const subTitle = (0, agent_namespaceObject.paramStr)(task);
             scripts.push(pointerScript(external_utils_js_namespaceObject.mousePointer, title, subTitle));
             currentCameraState = null != insightCameraState ? insightCameraState : fullPageCameraState;
             scripts.push({
@@ -269,8 +278,8 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
             });
         } else {
             var _task_recorder_3, _task_recorder3;
-            const title = (0, ui_utils_namespaceObject.typeStr)(task);
-            const subTitle = (0, ui_utils_namespaceObject.paramStr)(task);
+            const title = (0, agent_namespaceObject.typeStr)(task);
+            const subTitle = (0, agent_namespaceObject.paramStr)(task);
             const screenshot = null == (_task_recorder3 = task.recorder) ? void 0 : null == (_task_recorder_3 = _task_recorder3[task.recorder.length - 1]) ? void 0 : _task_recorder_3.screenshot;
             if (screenshot) scripts.push({
                 type: 'img',
@@ -283,7 +292,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
         }
         if ('finished' !== task.status) {
             errorStateFlag = true;
-            const errorTitle = (0, ui_utils_namespaceObject.typeStr)(task);
+            const errorTitle = (0, agent_namespaceObject.typeStr)(task);
             const errorMsg = task.errorMessage || 'unknown error';
             const errorSubTitle = errorMsg.indexOf('NOT_IMPLEMENTED_AS_DESIGNED') > 0 ? 'Further actions cannot be performed in the current environment' : errorMsg;
             scripts.push({

package/dist/lib/component/store/history.js

@@ -28,29 +28,63 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const external_zustand_namespaceObject = require("zustand");
 const { create } = external_zustand_namespaceObject;
-const HISTORY_KEY = 'midscene-prompt-history';
+const HISTORY_KEY = 'midscene-prompt-history-v2';
+const LAST_SELECTED_TYPE_KEY = 'midscene-last-selected-type';
 const getHistoryFromLocalStorage = ()=>{
     const historyString = localStorage.getItem(HISTORY_KEY);
-    return historyString ? JSON.parse(historyString) : [];
+    return historyString ? JSON.parse(historyString) : {};
+};
+const getLastSelectedType = ()=>localStorage.getItem(LAST_SELECTED_TYPE_KEY) || 'aiAction';
+const setLastSelectedType = (type)=>{
+    localStorage.setItem(LAST_SELECTED_TYPE_KEY, type);
 };
 const useHistoryStore = create((set, get)=>({
         history: getHistoryFromLocalStorage(),
-        clearHistory: ()=>{
+        lastSelectedType: getLastSelectedType(),
+        clearHistory: (type)=>{
+            const newHistory = {
+                ...get().history
+            };
+            delete newHistory[type];
             set({
-                history: []
+                history: newHistory
             });
-            localStorage.removeItem(HISTORY_KEY);
+            localStorage.setItem(HISTORY_KEY, JSON.stringify(newHistory));
         },
         addHistory: (historyItem)=>{
-            const newHistory = [
+            const { type } = historyItem;
+            const currentHistory = get().history;
+            const typeHistory = currentHistory[type] || [];
+            const stringifiedNewItem = JSON.stringify({
+                prompt: historyItem.prompt,
+                params: historyItem.params
+            });
+            const newTypeHistory = [
                 historyItem,
-                ...get().history.filter((h)=>h.prompt !== historyItem.prompt)
+                ...typeHistory.filter((h)=>{
+                    const stringifiedOldItem = JSON.stringify({
+                        prompt: h.prompt,
+                        params: h.params
+                    });
+                    return stringifiedOldItem !== stringifiedNewItem;
+                })
             ];
-            while(newHistory.length > 10)newHistory.pop();
+            if (newTypeHistory.length > 10) newTypeHistory.length = 10;
+            const newHistory = {
+                ...currentHistory,
+                [type]: newTypeHistory
+            };
             set({
                 history: newHistory
             });
             localStorage.setItem(HISTORY_KEY, JSON.stringify(newHistory));
+        },
+        getHistoryForType: (type)=>get().history[type] || [],
+        setLastSelectedType: (type)=>{
+            set({
+                lastSelectedType: type
+            });
+            setLastSelectedType(type);
         }
     }));
 exports.useHistoryStore = __webpack_exports__.useHistoryStore;

package/dist/types/component/playground/FormField.d.ts

@@ -0,0 +1,15 @@
+import type { z } from '@midscene/core';
+import type React from 'react';
+interface FormFieldProps {
+    name: string;
+    label: string;
+    fieldSchema: z.ZodTypeAny;
+    isRequired: boolean;
+    isLocateField: boolean;
+    marginBottom: number;
+}
+export declare const TextField: React.FC<Omit<FormFieldProps, 'isLocateField'>>;
+export declare const LocateField: React.FC<Omit<FormFieldProps, 'isLocateField'>>;
+export declare const EnumField: React.FC<Omit<FormFieldProps, 'isLocateField'>>;
+export declare const NumberField: React.FC<Omit<FormFieldProps, 'isLocateField'>>;
+export {};