@midscene/visualizer 0.27.5-beta-20250828012323.0 → 0.27.5-beta-20250828025824.0

package/dist/es/component/playground/types.mjs

@@ -17,10 +17,29 @@ const VALIDATION_CONSTANTS = {
         CHECK_INTERVAL_MS: 3000
     }
 };
-const isZodObjectSchema = (schema)=>'object' == typeof schema && null !== schema && 'shape' in schema && 'parse' in schema && 'function' == typeof schema.parse;
+const isZodObjectSchema = (schema)=>'object' == typeof schema && null !== schema && ('shape' in schema || 'ZodObject' === schema.type);
 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)) || {}));
+    var _field__def;
+    const fieldAsAny = field;
+    if ((null == (_field__def = field._def) ? void 0 : _field__def.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.OBJECT) {
+        var _field__def1;
+        let shape;
+        if (field._def.shape) shape = 'function' == typeof field._def.shape ? field._def.shape() : field._def.shape;
+        if (!shape && fieldAsAny.shape) shape = fieldAsAny.shape;
+        if (shape && VALIDATION_CONSTANTS.FIELD_FLAGS.LOCATION in shape) return true;
+        const description = (null == (_field__def1 = field._def) ? void 0 : _field__def1.description) || fieldAsAny.description || '';
+        if ('string' == typeof description && description.toLowerCase().includes('input field')) return true;
+    }
+    if ('object' == typeof field && null !== field) {
+        var _fieldAsAny__def;
+        const description = fieldAsAny.description || (null == (_fieldAsAny__def = fieldAsAny._def) ? void 0 : _fieldAsAny__def.description) || '';
+        if ('string' == typeof description) {
+            const desc = description.toLowerCase();
+            if (desc.includes('input field') || desc.includes('element') || desc.includes('locate')) return true;
+        }
+        if ('ZodObject' === fieldAsAny.typeName || 'ZodObject' === fieldAsAny.type) return 'string' == typeof description && description.toLowerCase().includes('input field');
+    }
+    return false;
 };
 const unwrapZodType = (field)=>{
     var _actualField__def, _actualField__def1, _actualField__def2;

package/dist/es/index.mjs

@@ -1,4 +1,3 @@
-import { useStaticPageAgent } from "./component/playground/useStaticPageAgent.mjs";
 import "./component/playground/index.css";
 import { allScriptsFromDump, generateAnimationScripts } from "./component/replay-scripts.mjs";
 import { useEnvConfig } from "./component/store/store.mjs";
@@ -14,7 +13,8 @@ import { PromptInput } from "./component/playground/PromptInput.mjs";
 import { Player } from "./component/player.mjs";
 import { Blackboard } from "./component/blackboard.mjs";
 import { GithubStar } from "./component/github-star.mjs";
-import { actionNameForType, blankResult, cancelTask, checkServerStatus, formatErrorMessage, getPlaceholderForType, getTaskProgress, overrideServerConfig, requestPlaygroundServer, staticAgentFromContext } from "./component/playground/playground-utils.mjs";
+import { actionNameForType, blankResult, cancelTask, checkServerStatus, getActionSpace, getPlaceholderForType, getTaskProgress, overrideServerConfig, requestPlaygroundServer, staticAgentFromContext } from "./component/playground/playground-utils.mjs";
+import { executeAction, formatErrorMessage, validateStructuredParams } from "./component/playground/playground-execution.mjs";
 import { filterBase64Value, timeStr } from "./utils.mjs";
 import shiny_text from "./component/shiny-text.mjs";
-export { Blackboard, ContextPreview, EnvConfig, GithubStar, Logo, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, actionNameForType, allScriptsFromDump, blankResult, cancelTask, checkServerStatus, colorForName, filterBase64Value, formatErrorMessage, generateAnimationScripts, getPlaceholderForType, getTaskProgress, globalThemeConfig, highlightColorForType, iconForStatus, overrideServerConfig, requestPlaygroundServer, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid, useStaticPageAgent };
+export { Blackboard, ContextPreview, EnvConfig, GithubStar, Logo, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, actionNameForType, allScriptsFromDump, blankResult, cancelTask, checkServerStatus, colorForName, executeAction, filterBase64Value, formatErrorMessage, generateAnimationScripts, getActionSpace, getPlaceholderForType, getTaskProgress, globalThemeConfig, highlightColorForType, iconForStatus, overrideServerConfig, requestPlaygroundServer, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid, validateStructuredParams };

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

@@ -34,8 +34,8 @@ const external_antd_namespaceObject = require("antd");
 const { TextArea } = external_antd_namespaceObject.Input;
 const renderLabel = (label, isOptional)=>`${label}${isOptional ? ' (Optional)' : ''}`;
 const TextField = (param)=>{
-    let { name, label, isRequired, marginBottom } = param;
-    const placeholder = `Enter ${name}`;
+    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+    const placeholder = customPlaceholder || `Enter ${name}`;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
         name: [
             'params',
@@ -57,7 +57,8 @@ const TextField = (param)=>{
     }, name);
 };
 const LocateField = (param)=>{
-    let { name, label, isRequired, marginBottom } = param;
+    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+    const placeholder = customPlaceholder || `Describe the ${name}, use natural language`;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
         name: [
             'params',
@@ -67,7 +68,7 @@ const LocateField = (param)=>{
         rules: isRequired ? [
             {
                 required: true,
-                message: `Please describe the ${name}`
+                message: `The ${name} is required`
             }
         ] : [],
         style: {
@@ -75,12 +76,12 @@ const LocateField = (param)=>{
         },
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TextArea, {
             rows: 2,
-            placeholder: `Describe the ${name}, use natural language`
+            placeholder: placeholder
         })
     }, name);
 };
 const EnumField = (param)=>{
-    let { name, label, fieldSchema, isRequired, marginBottom } = param;
+    let { name, label, fieldSchema, isRequired, marginBottom, placeholder: customPlaceholder } = param;
     const enumValues = fieldSchema._def.values || [];
     const selectOptions = enumValues.map((value)=>({
             value,
@@ -102,14 +103,15 @@ const EnumField = (param)=>{
             marginBottom
         },
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Select, {
-            placeholder: `Select ${name}`,
+            placeholder: customPlaceholder || `Select ${name}`,
             options: selectOptions
         })
     }, name);
 };
 const NumberField = (param)=>{
-    let { name, label, isRequired, marginBottom } = param;
-    const placeholder = 'distance' === name ? 500 : 0;
+    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+    const defaultPlaceholder = 'distance' === name ? 500 : 0;
+    const placeholderValue = customPlaceholder ? Number(customPlaceholder) || defaultPlaceholder : defaultPlaceholder;
     const min = 0;
     const max = 'distance' === name ? 10000 : void 0;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
@@ -140,7 +142,7 @@ const NumberField = (param)=>{
             marginBottom
         },
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.InputNumber, {
-            placeholder: placeholder.toString(),
+            placeholder: placeholderValue.toString(),
             min: min,
             max: max,
             step: 'distance' === name ? 10 : 1,

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

@@ -68,13 +68,42 @@ const PromptInput = (param)=>{
     const needsStructuredParams = (0, external_react_namespaceObject.useMemo)(()=>{
         if (actionSpace) {
             const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
-            return !!(null == action ? void 0 : action.paramSchema);
+            if (!(null == action ? void 0 : action.paramSchema)) return false;
+            if ((0, external_types_js_namespaceObject.isZodObjectSchema)(action.paramSchema)) {
+                const schema = action.paramSchema;
+                const shape = schema.shape || {};
+                const shapeKeys = Object.keys(shape);
+                return shapeKeys.length > 0;
+            }
+            return true;
         }
         return false;
     }, [
         selectedType,
         actionSpace
     ]);
+    const needsAnyInput = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (actionSpace && actionSpace.length > 0) {
+            const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
+            if (action) {
+                if (action.paramSchema && (0, external_types_js_namespaceObject.isZodObjectSchema)(action.paramSchema)) {
+                    const schema = action.paramSchema;
+                    const shape = schema.shape || {};
+                    const hasRequiredFields = Object.keys(shape).some((key)=>{
+                        const field = shape[key];
+                        const { isOptional } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
+                        return !isOptional;
+                    });
+                    return hasRequiredFields;
+                }
+                return !!action.paramSchema;
+            }
+        }
+        return true;
+    }, [
+        selectedType,
+        actionSpace
+    ]);
     const showDataExtractionOptions = (0, external_react_namespaceObject.useMemo)(()=>{
         const dataExtractionMethods = [
             'aiQuery',
@@ -94,11 +123,12 @@ const PromptInput = (param)=>{
             const action = 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).some((key)=>{
+                const hasLocateField = Object.keys(schema.shape).some((key)=>{
                     const field = schema.shape[key];
                     const { actualField } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
                     return (0, external_types_js_namespaceObject.isLocateField)(actualField);
                 });
+                return hasLocateField;
             }
         }
         return false;
@@ -106,14 +136,43 @@ const PromptInput = (param)=>{
         selectedType,
         actionSpace
     ]);
+    const hasConfigOptions = (0, external_react_namespaceObject.useMemo)(()=>{
+        const hasTracking = 'In-Browser-Extension' === serviceMode;
+        const hasDeepThink = showDeepThinkOption;
+        const hasDataExtraction = showDataExtractionOptions && !hideDomAndScreenshotOptions;
+        return hasTracking || hasDeepThink || hasDataExtraction;
+    }, [
+        serviceMode,
+        showDeepThinkOption,
+        showDataExtractionOptions,
+        hideDomAndScreenshotOptions
+    ]);
+    const availableDropdownMethods = (0, external_react_namespaceObject.useMemo)(()=>{
+        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 = 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);
+        });
+        availableMethods.forEach((method)=>{
+            finalMethods.add(method);
+        });
+        return Array.from(finalMethods);
+    }, [
+        actionSpace
+    ]);
     const getDefaultParams = (0, external_react_namespaceObject.useCallback)(()=>{
         if (!needsStructuredParams || !actionSpace) return {};
         const action = 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 defaultParams = {};
             const schema = action.paramSchema;
-            Object.keys(schema.shape).forEach((key)=>{
-                const field = schema.shape[key];
+            const shape = schema.shape || {};
+            Object.keys(shape).forEach((key)=>{
+                const field = shape[key];
                 const defaultValue = (0, external_types_js_namespaceObject.extractDefaultValue)(field);
                 if (void 0 !== defaultValue) defaultParams[key] = defaultValue;
             });
@@ -190,7 +249,8 @@ const PromptInput = (param)=>{
         const action = 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 1 === Object.keys(schema.shape).length;
+            const shape = schema.shape || {};
+            return 1 === Object.keys(shape).length;
         }
         return false;
     }, [
@@ -215,10 +275,11 @@ const PromptInput = (param)=>{
                 let locateValue = '';
                 const otherValues = [];
                 const schema = action.paramSchema;
-                Object.keys(schema.shape).forEach((key)=>{
+                const shape = schema.shape || {};
+                Object.keys(shape).forEach((key)=>{
                     const paramValue = values.params[key];
                     if (null != paramValue && '' !== paramValue) {
-                        const field = schema.shape[key];
+                        const field = shape[key];
                         const { actualField } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
                         if ((0, external_types_js_namespaceObject.isLocateField)(actualField)) locateValue = String(paramValue);
                         else if ('distance' === key) otherValues.push(`${paramValue}`);
@@ -290,19 +351,33 @@ const PromptInput = (param)=>{
             const action = 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;
-                const schemaKeys = Object.keys(schema.shape);
+                const shape = schema.shape || {};
+                const schemaKeys = Object.keys(shape);
                 if (1 === schemaKeys.length) {
                     const key = schemaKeys[0];
-                    const field = schema.shape[key];
+                    const field = shape[key];
                     const { actualField } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
                     const isLocateFieldFlag = (0, external_types_js_namespaceObject.isLocateField)(actualField);
-                    let placeholderText = '';
-                    if (isLocateFieldFlag) placeholderText = 'Describe the element you want to interact with';
-                    else {
-                        placeholderText = `Enter ${key}`;
-                        if ('keyName' === key) placeholderText = 'Enter key name or text to type';
-                        if ('value' === key) placeholderText = 'Enter text to input';
-                    }
+                    const placeholderText = (()=>{
+                        var _fieldAsAny__def;
+                        const fieldAsAny = actualField;
+                        if (null == (_fieldAsAny__def = fieldAsAny._def) ? void 0 : _fieldAsAny__def.description) return fieldAsAny._def.description;
+                        if (fieldAsAny.description) return fieldAsAny.description;
+                        if (actionSpace) {
+                            const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
+                            if ((null == action ? void 0 : action.paramSchema) && 'object' == typeof action.paramSchema && 'shape' in action.paramSchema) {
+                                var _fieldDef__def;
+                                const shape = action.paramSchema.shape || {};
+                                const fieldDef = shape[key];
+                                if (null == fieldDef ? void 0 : null == (_fieldDef__def = fieldDef._def) ? void 0 : _fieldDef__def.description) return fieldDef._def.description;
+                                if (null == fieldDef ? void 0 : fieldDef.description) return fieldDef.description;
+                            }
+                        }
+                        if (isLocateFieldFlag) return 'Describe the element you want to interact with';
+                        if ('keyName' === key) return 'Enter key name or text to type';
+                        if ('value' === key) return 'Enter text to input';
+                        return `Enter ${key}`;
+                    })();
                     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
                         name: [
                             'params',
@@ -323,18 +398,36 @@ const PromptInput = (param)=>{
                 const fields = [];
                 schemaKeys.forEach((key, index)=>{
                     var _actualField__def, _actualField__def1;
-                    const fieldSchema = schema.shape[key];
+                    const fieldSchema = shape[key];
                     const { actualField, isOptional } = (0, external_types_js_namespaceObject.unwrapZodType)(fieldSchema);
                     const isLocateFieldFlag = (0, external_types_js_namespaceObject.isLocateField)(actualField);
                     const label = key.charAt(0).toUpperCase() + key.slice(1);
                     const isRequired = !isOptional;
                     const marginBottom = index === schemaKeys.length - 1 ? 0 : 12;
+                    const placeholder = (()=>{
+                        var _fieldAsAny__def;
+                        const fieldAsAny = actualField;
+                        if (null == (_fieldAsAny__def = fieldAsAny._def) ? void 0 : _fieldAsAny__def.description) return fieldAsAny._def.description;
+                        if (fieldAsAny.description) return fieldAsAny.description;
+                        if (actionSpace) {
+                            const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
+                            if ((null == action ? void 0 : action.paramSchema) && 'object' == typeof action.paramSchema && 'shape' in action.paramSchema) {
+                                var _fieldDef__def;
+                                const shape = action.paramSchema.shape || {};
+                                const fieldDef = shape[key];
+                                if (null == fieldDef ? void 0 : null == (_fieldDef__def = fieldDef._def) ? void 0 : _fieldDef__def.description) return fieldDef._def.description;
+                                if (null == fieldDef ? void 0 : fieldDef.description) return fieldDef.description;
+                            }
+                        }
+                        if (isLocateFieldFlag) return 'Describe the element you want to interact with';
+                    })();
                     const fieldProps = {
                         name: key,
                         label,
                         fieldSchema: actualField,
                         isRequired,
-                        marginBottom
+                        marginBottom,
+                        placeholder
                     };
                     if (isLocateFieldFlag) fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.LocateField, {
                         ...fieldProps
@@ -457,45 +550,77 @@ const PromptInput = (param)=>{
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Dropdown, {
                                 menu: (()=>{
-                                    const hiddenAPIs = Object.keys(external_playground_constants_js_namespaceObject.apiMetadata).filter((api)=>!external_playground_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)=>'interaction' === external_playground_constants_js_namespaceObject.apiMetadata[api].group);
+                                    const interactionAPIs = hiddenAPIs.filter((api)=>{
+                                        var _apiMetadata_api;
+                                        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',
                                         type: 'group',
                                         label: 'Interaction APIs',
-                                        children: interactionAPIs.map((api)=>({
+                                        children: interactionAPIs.map((api)=>{
+                                            var _apiMetadata_api;
+                                            return {
                                                 key: api,
                                                 label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: external_playground_constants_js_namespaceObject.apiMetadata[api].title,
+                                                title: (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
-                                            }))
+                                            };
+                                        })
+                                    });
+                                    const extractionAPIs = hiddenAPIs.filter((api)=>{
+                                        var _apiMetadata_api;
+                                        return (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'extraction';
                                     });
-                                    const extractionAPIs = hiddenAPIs.filter((api)=>'extraction' === external_playground_constants_js_namespaceObject.apiMetadata[api].group);
                                     if (extractionAPIs.length > 0) groupedItems.push({
                                         key: 'extraction-group',
                                         type: 'group',
                                         label: 'Data Extraction APIs',
-                                        children: extractionAPIs.map((api)=>({
+                                        children: extractionAPIs.map((api)=>{
+                                            var _apiMetadata_api;
+                                            return {
                                                 key: api,
                                                 label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: external_playground_constants_js_namespaceObject.apiMetadata[api].title,
+                                                title: (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
-                                            }))
+                                            };
+                                        })
+                                    });
+                                    const validationAPIs = hiddenAPIs.filter((api)=>{
+                                        var _apiMetadata_api;
+                                        return (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'validation';
                                     });
-                                    const validationAPIs = hiddenAPIs.filter((api)=>'validation' === external_playground_constants_js_namespaceObject.apiMetadata[api].group);
                                     if (validationAPIs.length > 0) groupedItems.push({
                                         key: 'validation-group',
                                         type: 'group',
                                         label: 'Validation APIs',
-                                        children: validationAPIs.map((api)=>({
+                                        children: validationAPIs.map((api)=>{
+                                            var _apiMetadata_api;
+                                            return {
                                                 key: api,
                                                 label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: external_playground_constants_js_namespaceObject.apiMetadata[api].title,
+                                                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)=>!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, external_playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
@@ -533,7 +658,7 @@ const PromptInput = (param)=>{
                                 history: historyForSelectedType,
                                 currentType: selectedType
                             }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            hasConfigOptions && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                 className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
                                 onMouseEnter: handleMouseEnter,
                                 onMouseLeave: handleMouseLeave,
@@ -551,7 +676,7 @@ const PromptInput = (param)=>{
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 className: `main-side-console-input ${!runButtonEnabled ? 'disabled' : ''} ${loading ? 'loading' : ''}`,
                 children: [
-                    needsStructuredParams ? hasSingleStructuredParam ? renderStructuredParams() : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    needsAnyInput ? needsStructuredParams ? hasSingleStructuredParam ? renderStructuredParams() : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                         className: "structured-params-container",
                         children: renderStructuredParams()
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
@@ -569,6 +694,18 @@ const PromptInput = (param)=>{
                             onChange: handlePromptChange,
                             ref: textAreaRef
                         })
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "no-input-method",
+                        style: {
+                            padding: '20px',
+                            textAlign: 'center',
+                            color: '#666',
+                            fontSize: '14px'
+                        },
+                        children: [
+                            'Click "Run" to execute ',
+                            (0, external_playground_utils_js_namespaceObject.actionNameForType)(selectedType)
+                        ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                         className: "form-controller-wrapper",

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

@@ -58,11 +58,18 @@ body {
   border-radius: 11px;
   align-items: center;
   gap: 2px;
+  max-width: 160px;
   padding: 0 8px;
   font-size: 12px;
   display: inline-flex;
 }
 
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button .ant-btn-content {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button:hover {
   background-color: #e6e6e6;
 }

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

@@ -0,0 +1,154 @@
+"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__, {
+    formatErrorMessage: ()=>formatErrorMessage,
+    validateStructuredParams: ()=>validateStructuredParams,
+    executeAction: ()=>executeAction
+});
+const ai_model_namespaceObject = require("@midscene/core/ai-model");
+const formatErrorMessage = (e)=>{
+    const errorMessage = (null == e ? void 0 : e.message) || '';
+    if (errorMessage.includes('of different extension')) return 'Conflicting extension detected. Please disable the suspicious plugins and refresh the page. Guide: https://midscenejs.com/quick-experience.html#faq';
+    return errorMessage || 'Unknown error';
+};
+async function parseStructuredParams(action, params) {
+    let options = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {};
+    if (!(null == action ? void 0 : action.paramSchema) || !('shape' in action.paramSchema)) return [
+        params.prompt || '',
+        options
+    ];
+    const schema = action.paramSchema;
+    const keys = Object.keys(schema.shape);
+    const paramObj = {
+        ...options
+    };
+    keys.forEach((key)=>{
+        if (void 0 !== params[key] && null !== params[key] && '' !== params[key]) paramObj[key] = params[key];
+    });
+    return [
+        paramObj
+    ];
+}
+function validateStructuredParams(value, action) {
+    if (!value.params) return {
+        valid: false,
+        errorMessage: 'Parameters are required'
+    };
+    if (!(null == action ? void 0 : action.paramSchema)) return {
+        valid: true
+    };
+    try {
+        var _action_paramSchema;
+        const paramsForValidation = {
+            ...value.params
+        };
+        const schema = action.paramSchema;
+        if (schema) {
+            const locatorFieldKeys = (0, ai_model_namespaceObject.findAllMidsceneLocatorField)(schema);
+            locatorFieldKeys.forEach((key)=>{
+                if ('string' == typeof paramsForValidation[key]) paramsForValidation[key] = {
+                    midscene_location_field_flag: true,
+                    prompt: paramsForValidation[key],
+                    center: [
+                        0,
+                        0
+                    ],
+                    rect: {
+                        left: 0,
+                        top: 0,
+                        width: 0,
+                        height: 0
+                    }
+                };
+            });
+        }
+        null == (_action_paramSchema = action.paramSchema) || _action_paramSchema.parse(paramsForValidation);
+    } catch (error) {
+        const zodError = error;
+        if (zodError.errors && zodError.errors.length > 0) {
+            const errorMessages = zodError.errors.filter((err)=>{
+                const path = err.path.join('.');
+                return !path.includes('center') && !path.includes('rect') && !path.includes('midscene_location_field_flag');
+            }).map((err)=>{
+                const field = err.path.join('.');
+                return `${field}: ${err.message}`;
+            });
+            if (errorMessages.length > 0) return {
+                valid: false,
+                errorMessage: `Validation error: ${errorMessages.join(', ')}`
+            };
+        } else {
+            const errorMsg = error instanceof Error ? error.message : 'Unknown validation error';
+            return {
+                valid: false,
+                errorMessage: `Parameter validation failed: ${errorMsg}`
+            };
+        }
+    }
+    return {
+        valid: true
+    };
+}
+async function executeAction(activeAgent, actionType, actionSpace, value, deepThink) {
+    const action = null == actionSpace ? void 0 : actionSpace.find((a)=>a.interfaceAlias === actionType || a.name === actionType);
+    if (action && 'function' == typeof activeAgent.callActionInActionSpace) if (!value.params) return await activeAgent.callActionInActionSpace(action.name, {
+        prompt: value.prompt,
+        deepThink
+    });
+    else {
+        const parsedParams = await parseStructuredParams(action, value.params, {
+            deepThink
+        });
+        return await activeAgent.callActionInActionSpace(action.name, parsedParams[0]);
+    }
+    {
+        const prompt = value.prompt;
+        if ('aiAssert' === actionType) {
+            const { pass, thought } = await (null == activeAgent ? void 0 : activeAgent.aiAssert(prompt, void 0, {
+                keepRawResponse: true
+            })) || {};
+            return {
+                pass,
+                thought
+            };
+        }
+        if (activeAgent && 'function' == typeof activeAgent[actionType]) return await activeAgent[actionType](prompt, {
+            deepThink
+        });
+        throw new Error(`Unknown action type: ${actionType}`);
+    }
+}
+exports.executeAction = __webpack_exports__.executeAction;
+exports.formatErrorMessage = __webpack_exports__.formatErrorMessage;
+exports.validateStructuredParams = __webpack_exports__.validateStructuredParams;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "executeAction",
+    "formatErrorMessage",
+    "validateStructuredParams"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});