@midscene/visualizer 0.27.7-beta-20250905094830.0 → 0.27.7-beta-20250908085836.0

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

@@ -20,6 +20,7 @@ const TextField = (param)=>{
         style: {
             marginBottom
         },
+        colon: false,
         children: /*#__PURE__*/ jsx(Input, {
             placeholder: placeholder
         })
@@ -43,6 +44,7 @@ const LocateField = (param)=>{
         style: {
             marginBottom
         },
+        colon: false,
         children: /*#__PURE__*/ jsx(TextArea, {
             rows: 2,
             placeholder: placeholder
@@ -51,7 +53,8 @@ const LocateField = (param)=>{
 };
 const EnumField = (param)=>{
     let { name, label, fieldSchema, isRequired, marginBottom, placeholder: customPlaceholder } = param;
-    const enumValues = fieldSchema._def.values || [];
+    var _fieldSchema__def;
+    const enumValues = (null == (_fieldSchema__def = fieldSchema._def) ? void 0 : _fieldSchema__def.values) || [];
     const selectOptions = enumValues.map((value)=>({
             value,
             label: value.charAt(0).toUpperCase() + value.slice(1)
@@ -71,6 +74,7 @@ const EnumField = (param)=>{
         style: {
             marginBottom
         },
+        colon: false,
         children: /*#__PURE__*/ jsx(Select, {
             placeholder: customPlaceholder || `Select ${name}`,
             options: selectOptions
@@ -110,6 +114,7 @@ const NumberField = (param)=>{
             flex: 'distance' === name ? 1 : void 0,
             marginBottom
         },
+        colon: false,
         children: /*#__PURE__*/ jsx(InputNumber, {
             placeholder: placeholderValue.toString(),
             min: min,
@@ -121,4 +126,38 @@ const NumberField = (param)=>{
         })
     }, name);
 };
-export { EnumField, LocateField, NumberField, TextField };
+const BooleanField = (param)=>{
+    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+    const selectOptions = [
+        {
+            value: true,
+            label: 'True'
+        },
+        {
+            value: false,
+            label: 'False'
+        }
+    ];
+    return /*#__PURE__*/ jsx(Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: renderLabel(label, !isRequired),
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please select ${name}`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        colon: false,
+        children: /*#__PURE__*/ jsx(Select, {
+            placeholder: customPlaceholder || `Select ${name}`,
+            options: selectOptions
+        })
+    }, name);
+};
+export { BooleanField, EnumField, LocateField, NumberField, TextField };

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

@@ -4,7 +4,7 @@ import { Button, Dropdown, Form, Input, Radio, Space, Tooltip } from "antd";
 import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHistoryStore } from "../store/history.mjs";
 import { ConfigSelector } from "./ConfigSelector.mjs";
-import { EnumField, LocateField, NumberField, TextField } from "./FormField.mjs";
+import { BooleanField, EnumField, LocateField, NumberField, TextField } from "./FormField.mjs";
 import { HistorySelector } from "./HistorySelector.mjs";
 import { apiMetadata, defaultMainButtons } from "./playground-constants.mjs";
 import { actionNameForType, getPlaceholderForType, isRunButtonEnabled as external_playground_utils_mjs_isRunButtonEnabled } from "./playground-utils.mjs";
@@ -85,8 +85,9 @@ const PromptInput = (param)=>{
             const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
             if ((null == action ? void 0 : action.paramSchema) && isZodObjectSchema(action.paramSchema)) {
                 const schema = action.paramSchema;
-                const hasLocateField = Object.keys(schema.shape).some((key)=>{
-                    const field = schema.shape[key];
+                const shape = schema.shape || {};
+                const hasLocateField = Object.keys(shape).some((key)=>{
+                    const field = shape[key];
                     const { actualField } = unwrapZodType(field);
                     return isLocateField(actualField);
                 });
@@ -239,7 +240,8 @@ const PromptInput = (param)=>{
                 const schema = action.paramSchema;
                 const shape = schema.shape || {};
                 Object.keys(shape).forEach((key)=>{
-                    const paramValue = values.params[key];
+                    var _values_params;
+                    const paramValue = null == (_values_params = values.params) ? void 0 : _values_params[key];
                     if (null != paramValue && '' !== paramValue) {
                         const field = shape[key];
                         const { actualField } = unwrapZodType(field);
@@ -285,12 +287,15 @@ const PromptInput = (param)=>{
             e.stopPropagation();
         } else if ('Enter' === e.key) setTimeout(()=>{
             if (textAreaRef.current) {
-                const textarea = textAreaRef.current.resizableTextArea.textArea;
-                const selectionStart = textarea.selectionStart;
-                const value = textarea.value;
-                const lastNewlineIndex = value.lastIndexOf('\n');
-                const isAtLastLine = -1 === lastNewlineIndex || selectionStart > lastNewlineIndex;
-                if (isAtLastLine) textarea.scrollTop = textarea.scrollHeight;
+                var _textAreaRef_current_resizableTextArea;
+                const textarea = null == (_textAreaRef_current_resizableTextArea = textAreaRef.current.resizableTextArea) ? void 0 : _textAreaRef_current_resizableTextArea.textArea;
+                if (textarea) {
+                    const selectionStart = textarea.selectionStart;
+                    const value = textarea.value;
+                    const lastNewlineIndex = value.lastIndexOf('\n');
+                    const isAtLastLine = -1 === lastNewlineIndex || selectionStart > lastNewlineIndex;
+                    if (isAtLastLine) textarea.scrollTop = textarea.scrollHeight;
+                }
             }
         }, 0);
     }, [
@@ -321,10 +326,10 @@ const PromptInput = (param)=>{
                     const { actualField } = unwrapZodType(field);
                     const isLocateFieldFlag = isLocateField(actualField);
                     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;
+                        var _fieldWithRuntime__def;
+                        const fieldWithRuntime = actualField;
+                        if (null == (_fieldWithRuntime__def = fieldWithRuntime._def) ? void 0 : _fieldWithRuntime__def.description) return fieldWithRuntime._def.description;
+                        if (fieldWithRuntime.description) return fieldWithRuntime.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) {
@@ -358,19 +363,28 @@ const PromptInput = (param)=>{
                     });
                 }
                 const fields = [];
-                schemaKeys.forEach((key, index)=>{
-                    var _actualField__def, _actualField__def1;
+                const sortedKeys = schemaKeys.sort((keyA, keyB)=>{
+                    const fieldSchemaA = shape[keyA];
+                    const fieldSchemaB = shape[keyB];
+                    const { isOptional: isOptionalA } = unwrapZodType(fieldSchemaA);
+                    const { isOptional: isOptionalB } = unwrapZodType(fieldSchemaB);
+                    if (!isOptionalA && isOptionalB) return -1;
+                    if (isOptionalA && !isOptionalB) return 1;
+                    return 0;
+                });
+                sortedKeys.forEach((key, index)=>{
+                    var _actualField__def, _actualField__def1, _actualField__def2;
                     const fieldSchema = shape[key];
                     const { actualField, isOptional } = unwrapZodType(fieldSchema);
                     const isLocateFieldFlag = isLocateField(actualField);
                     const label = key.charAt(0).toUpperCase() + key.slice(1);
                     const isRequired = !isOptional;
-                    const marginBottom = index === schemaKeys.length - 1 ? 0 : 12;
+                    const marginBottom = index === sortedKeys.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;
+                        var _fieldWithRuntime__def;
+                        const fieldWithRuntime = actualField;
+                        if (null == (_fieldWithRuntime__def = fieldWithRuntime._def) ? void 0 : _fieldWithRuntime__def.description) return fieldWithRuntime._def.description;
+                        if (fieldWithRuntime.description) return fieldWithRuntime.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) {
@@ -400,6 +414,9 @@ const PromptInput = (param)=>{
                     else if ((null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === 'ZodNumber') fields.push(/*#__PURE__*/ jsx(NumberField, {
                         ...fieldProps
                     }, key));
+                    else if ((null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === 'ZodBoolean') fields.push(/*#__PURE__*/ jsx(BooleanField, {
+                        ...fieldProps
+                    }, key));
                     else fields.push(/*#__PURE__*/ jsx(TextField, {
                         ...fieldProps
                     }, key));

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

@@ -1,11 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PlaygroundSDK } from "@midscene/playground";
 import { overrideAIConfig } from "@midscene/shared/env";
 import { Button, Tooltip } from "antd";
 import { useEffect } from "react";
 import { EnvConfig } from "../env-config.mjs";
 import { iconForStatus } from "../misc.mjs";
 import { useEnvConfig } from "../store/store.mjs";
-import { overrideServerConfig } from "./playground-utils.mjs";
 import { useServerValid } from "./useServerValid.mjs";
 import "./index.css";
 const TITLE_TEXT = {
@@ -59,7 +59,12 @@ const ServiceModeControl = (param)=>{
     };
     useEffect(()=>{
         overrideAIConfig(config);
-        if ('Server' === serviceMode) overrideServerConfig(config);
+        if ('Server' === serviceMode) {
+            const playgroundSDK = new PlaygroundSDK({
+                type: 'remote-execution'
+            });
+            playgroundSDK.overrideConfig(config);
+        }
     }, [
         config,
         serviceMode,

package/dist/es/component/playground/playground-utils.mjs

@@ -1,86 +1,5 @@
-import { StaticPage, StaticPageAgent } from "@midscene/playground";
-import { PLAYGROUND_SERVER_PORT } from "@midscene/shared/constants";
+import { StaticPage, StaticPageAgent } from "@midscene/web/static";
 import { isZodObjectSchema, unwrapZodType } from "./types.mjs";
-const serverBase = `http://localhost:${PLAYGROUND_SERVER_PORT}`;
-const checkServerStatus = async ()=>{
-    try {
-        const res = await fetch(`${serverBase}/status`);
-        return 200 === res.status;
-    } catch (e) {
-        return false;
-    }
-};
-const requestPlaygroundServer = async function(context, type, prompt) {
-    let { requestId, deepThink, params, screenshotIncluded, domIncluded } = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {};
-    const payload = {
-        context,
-        type,
-        prompt
-    };
-    if (requestId) payload.requestId = requestId;
-    if (deepThink) payload.deepThink = deepThink;
-    if (void 0 !== screenshotIncluded) payload.screenshotIncluded = screenshotIncluded;
-    if (void 0 !== domIncluded) payload.domIncluded = domIncluded;
-    if (params) payload.params = params;
-    const res = await fetch(`${serverBase}/execute`, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(payload)
-    });
-    return res.json();
-};
-const overrideServerConfig = async (aiConfig)=>fetch(`${serverBase}/config`, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            aiConfig
-        })
-    });
-const cancelTask = async (requestId)=>{
-    try {
-        const res = await fetch(`${serverBase}/cancel/${requestId}`);
-        return res.json();
-    } catch (error) {
-        console.error('Failed to cancel task:', error);
-        return {
-            error: 'Failed to cancel task'
-        };
-    }
-};
-const getTaskProgress = async (requestId)=>{
-    try {
-        const response = await fetch(`${serverBase}/task-progress/${requestId}`);
-        return await response.json();
-    } catch (error) {
-        console.error('Failed to poll task progress:', error);
-        return {
-            tip: null
-        };
-    }
-};
-const getActionSpace = async (context)=>{
-    try {
-        if (!context) return [];
-        const response = await fetch(`${serverBase}/action-space`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                context
-            })
-        });
-        if (response.ok) return await response.json();
-        return [];
-    } catch (error) {
-        console.error('Failed to get action space:', error);
-        return [];
-    }
-};
 const actionNameForType = (type)=>{
     const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
     const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();
@@ -92,11 +11,6 @@ const staticAgentFromContext = (context)=>{
     const page = new StaticPage(context);
     return new StaticPageAgent(page);
 };
-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';
-};
 const getPlaceholderForType = (type)=>{
     if ('aiQuery' === type) return 'What do you want to query?';
     if ('aiAssert' === type) return 'What do you want to assert?';
@@ -115,12 +29,6 @@ const getPlaceholderForType = (type)=>{
     if ('aiWaitFor' === type) return 'What condition do you want to wait for?';
     return 'What do you want to do?';
 };
-const blankResult = {
-    result: null,
-    dump: null,
-    reportHTML: null,
-    error: null
-};
 const isRunButtonEnabled = (runButtonEnabled, needsStructuredParams, params, actionSpace, selectedType, promptValue)=>{
     if (!runButtonEnabled) return false;
     const needsAnyInput = (()=>{
@@ -155,4 +63,4 @@ const isRunButtonEnabled = (runButtonEnabled, needsStructuredParams, params, act
     }
     return promptValue.trim().length > 0;
 };
-export { actionNameForType, blankResult, cancelTask, checkServerStatus, formatErrorMessage, getActionSpace, getPlaceholderForType, getTaskProgress, isRunButtonEnabled, overrideServerConfig, requestPlaygroundServer, serverBase, staticAgentFromContext };
+export { actionNameForType, getPlaceholderForType, isRunButtonEnabled, staticAgentFromContext };

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

@@ -6,7 +6,8 @@ const VALIDATION_CONSTANTS = {
         OBJECT: 'ZodObject',
         ENUM: 'ZodEnum',
         NUMBER: 'ZodNumber',
-        STRING: 'ZodString'
+        STRING: 'ZodString',
+        BOOLEAN: 'ZodBoolean'
     },
     FIELD_FLAGS: {
         LOCATION: 'midscene_location_field_flag'
@@ -20,24 +21,24 @@ const VALIDATION_CONSTANTS = {
 const isZodObjectSchema = (schema)=>'object' == typeof schema && null !== schema && ('shape' in schema || 'ZodObject' === schema.type);
 const isLocateField = (field)=>{
     var _field__def;
-    const fieldAsAny = field;
+    const fieldWithRuntime = 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 && fieldWithRuntime.shape) shape = fieldWithRuntime.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 || '';
+        const description = (null == (_field__def1 = field._def) ? void 0 : _field__def1.description) || fieldWithRuntime.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) || '';
+        var _fieldWithRuntime__def;
+        const description = fieldWithRuntime.description || (null == (_fieldWithRuntime__def = fieldWithRuntime._def) ? void 0 : _fieldWithRuntime__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');
+        if ('ZodObject' === fieldWithRuntime.typeName || 'ZodObject' === fieldWithRuntime.type) return 'string' == typeof description && description.toLowerCase().includes('input field');
     }
     return false;
 };

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

@@ -1,6 +1,6 @@
+import { PlaygroundSDK } from "@midscene/playground";
 import { useEffect, useState } from "react";
 import { useEnvConfig } from "../store/store.mjs";
-import { checkServerStatus } from "./playground-utils.mjs";
 const useServerValid = function() {
     let shouldRun = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : true;
     const [serverValid, setServerValid] = useState(true);
@@ -10,7 +10,10 @@ const useServerValid = function() {
         if (!shouldRun) return;
         Promise.resolve((async ()=>{
             while(!interruptFlag){
-                const status = await checkServerStatus();
+                const playgroundSDK = new PlaygroundSDK({
+                    type: 'remote-execution'
+                });
+                const status = await playgroundSDK.checkStatus();
                 status ? setServerValid(true) : setServerValid(false);
                 await new Promise((resolve)=>setTimeout(resolve, 1000));
             }

package/dist/es/index.mjs

@@ -13,8 +13,7 @@ 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, getActionSpace, getPlaceholderForType, getTaskProgress, overrideServerConfig, requestPlaygroundServer, staticAgentFromContext } from "./component/playground/playground-utils.mjs";
-import { executeAction, formatErrorMessage, validateStructuredParams } from "./component/playground/playground-execution.mjs";
+import { actionNameForType, getPlaceholderForType, staticAgentFromContext } from "./component/playground/playground-utils.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, executeAction, filterBase64Value, formatErrorMessage, generateAnimationScripts, getActionSpace, getPlaceholderForType, getTaskProgress, globalThemeConfig, highlightColorForType, iconForStatus, overrideServerConfig, requestPlaygroundServer, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid, validateStructuredParams };
+export { Blackboard, ContextPreview, EnvConfig, GithubStar, Logo, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid };

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

@@ -24,8 +24,9 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    TextField: ()=>TextField,
+    BooleanField: ()=>BooleanField,
     NumberField: ()=>NumberField,
+    TextField: ()=>TextField,
     LocateField: ()=>LocateField,
     EnumField: ()=>EnumField
 });
@@ -51,6 +52,7 @@ const TextField = (param)=>{
         style: {
             marginBottom
         },
+        colon: false,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Input, {
             placeholder: placeholder
         })
@@ -74,6 +76,7 @@ const LocateField = (param)=>{
         style: {
             marginBottom
         },
+        colon: false,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TextArea, {
             rows: 2,
             placeholder: placeholder
@@ -82,7 +85,8 @@ const LocateField = (param)=>{
 };
 const EnumField = (param)=>{
     let { name, label, fieldSchema, isRequired, marginBottom, placeholder: customPlaceholder } = param;
-    const enumValues = fieldSchema._def.values || [];
+    var _fieldSchema__def;
+    const enumValues = (null == (_fieldSchema__def = fieldSchema._def) ? void 0 : _fieldSchema__def.values) || [];
     const selectOptions = enumValues.map((value)=>({
             value,
             label: value.charAt(0).toUpperCase() + value.slice(1)
@@ -102,6 +106,7 @@ const EnumField = (param)=>{
         style: {
             marginBottom
         },
+        colon: false,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Select, {
             placeholder: customPlaceholder || `Select ${name}`,
             options: selectOptions
@@ -141,6 +146,7 @@ const NumberField = (param)=>{
             flex: 'distance' === name ? 1 : void 0,
             marginBottom
         },
+        colon: false,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.InputNumber, {
             placeholder: placeholderValue.toString(),
             min: min,
@@ -152,11 +158,47 @@ const NumberField = (param)=>{
         })
     }, name);
 };
+const BooleanField = (param)=>{
+    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+    const selectOptions = [
+        {
+            value: true,
+            label: 'True'
+        },
+        {
+            value: false,
+            label: 'False'
+        }
+    ];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: renderLabel(label, !isRequired),
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please select ${name}`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        colon: false,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Select, {
+            placeholder: customPlaceholder || `Select ${name}`,
+            options: selectOptions
+        })
+    }, name);
+};
+exports.BooleanField = __webpack_exports__.BooleanField;
 exports.EnumField = __webpack_exports__.EnumField;
 exports.LocateField = __webpack_exports__.LocateField;
 exports.NumberField = __webpack_exports__.NumberField;
 exports.TextField = __webpack_exports__.TextField;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "BooleanField",
     "EnumField",
     "LocateField",
     "NumberField",

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

@@ -123,8 +123,9 @@ 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 hasLocateField = Object.keys(schema.shape).some((key)=>{
-                    const field = schema.shape[key];
+                const shape = schema.shape || {};
+                const hasLocateField = Object.keys(shape).some((key)=>{
+                    const field = shape[key];
                     const { actualField } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
                     return (0, external_types_js_namespaceObject.isLocateField)(actualField);
                 });
@@ -277,7 +278,8 @@ const PromptInput = (param)=>{
                 const schema = action.paramSchema;
                 const shape = schema.shape || {};
                 Object.keys(shape).forEach((key)=>{
-                    const paramValue = values.params[key];
+                    var _values_params;
+                    const paramValue = null == (_values_params = values.params) ? void 0 : _values_params[key];
                     if (null != paramValue && '' !== paramValue) {
                         const field = shape[key];
                         const { actualField } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
@@ -323,12 +325,15 @@ const PromptInput = (param)=>{
             e.stopPropagation();
         } else if ('Enter' === e.key) setTimeout(()=>{
             if (textAreaRef.current) {
-                const textarea = textAreaRef.current.resizableTextArea.textArea;
-                const selectionStart = textarea.selectionStart;
-                const value = textarea.value;
-                const lastNewlineIndex = value.lastIndexOf('\n');
-                const isAtLastLine = -1 === lastNewlineIndex || selectionStart > lastNewlineIndex;
-                if (isAtLastLine) textarea.scrollTop = textarea.scrollHeight;
+                var _textAreaRef_current_resizableTextArea;
+                const textarea = null == (_textAreaRef_current_resizableTextArea = textAreaRef.current.resizableTextArea) ? void 0 : _textAreaRef_current_resizableTextArea.textArea;
+                if (textarea) {
+                    const selectionStart = textarea.selectionStart;
+                    const value = textarea.value;
+                    const lastNewlineIndex = value.lastIndexOf('\n');
+                    const isAtLastLine = -1 === lastNewlineIndex || selectionStart > lastNewlineIndex;
+                    if (isAtLastLine) textarea.scrollTop = textarea.scrollHeight;
+                }
             }
         }, 0);
     }, [
@@ -359,10 +364,10 @@ const PromptInput = (param)=>{
                     const { actualField } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
                     const isLocateFieldFlag = (0, external_types_js_namespaceObject.isLocateField)(actualField);
                     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;
+                        var _fieldWithRuntime__def;
+                        const fieldWithRuntime = actualField;
+                        if (null == (_fieldWithRuntime__def = fieldWithRuntime._def) ? void 0 : _fieldWithRuntime__def.description) return fieldWithRuntime._def.description;
+                        if (fieldWithRuntime.description) return fieldWithRuntime.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) {
@@ -396,19 +401,28 @@ const PromptInput = (param)=>{
                     });
                 }
                 const fields = [];
-                schemaKeys.forEach((key, index)=>{
-                    var _actualField__def, _actualField__def1;
+                const sortedKeys = schemaKeys.sort((keyA, keyB)=>{
+                    const fieldSchemaA = shape[keyA];
+                    const fieldSchemaB = shape[keyB];
+                    const { isOptional: isOptionalA } = (0, external_types_js_namespaceObject.unwrapZodType)(fieldSchemaA);
+                    const { isOptional: isOptionalB } = (0, external_types_js_namespaceObject.unwrapZodType)(fieldSchemaB);
+                    if (!isOptionalA && isOptionalB) return -1;
+                    if (isOptionalA && !isOptionalB) return 1;
+                    return 0;
+                });
+                sortedKeys.forEach((key, index)=>{
+                    var _actualField__def, _actualField__def1, _actualField__def2;
                     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 marginBottom = index === sortedKeys.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;
+                        var _fieldWithRuntime__def;
+                        const fieldWithRuntime = actualField;
+                        if (null == (_fieldWithRuntime__def = fieldWithRuntime._def) ? void 0 : _fieldWithRuntime__def.description) return fieldWithRuntime._def.description;
+                        if (fieldWithRuntime.description) return fieldWithRuntime.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) {
@@ -438,6 +452,9 @@ const PromptInput = (param)=>{
                     else if ((null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === 'ZodNumber') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.NumberField, {
                         ...fieldProps
                     }, key));
+                    else if ((null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === 'ZodBoolean') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.BooleanField, {
+                        ...fieldProps
+                    }, key));
                     else fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.TextField, {
                         ...fieldProps
                     }, key));

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

@@ -27,13 +27,13 @@ __webpack_require__.d(__webpack_exports__, {
     ServiceModeControl: ()=>ServiceModeControl
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+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 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_playground_utils_js_namespaceObject = require("./playground-utils.js");
 const external_useServerValid_js_namespaceObject = require("./useServerValid.js");
 require("./index.css");
 const TITLE_TEXT = {
@@ -87,7 +87,12 @@ const ServiceModeControl = (param)=>{
     };
     (0, external_react_namespaceObject.useEffect)(()=>{
         (0, env_namespaceObject.overrideAIConfig)(config);
-        if ('Server' === serviceMode) (0, external_playground_utils_js_namespaceObject.overrideServerConfig)(config);
+        if ('Server' === serviceMode) {
+            const playgroundSDK = new playground_namespaceObject.PlaygroundSDK({
+                type: 'remote-execution'
+            });
+            playgroundSDK.overrideConfig(config);
+        }
     }, [
         config,
         serviceMode,