@midscene/visualizer 1.7.4 → 1.7.5-beta-20260420031652.0

package/dist/lib/component/universal-playground/index.js

@@ -178,7 +178,8 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
     ]);
     const configAlreadySet = Object.keys(config || {}).length >= 1;
     const runButtonEnabled = componentConfig.serverMode || !dryMode && !actionSpaceLoading && configAlreadySet;
-    const selectedType = external_antd_namespaceObject.Form.useWatch('type', form);
+    const watchedType = external_antd_namespaceObject.Form.useWatch('type', form);
+    const selectedType = watchedType || form.getFieldValue('type');
     const serviceMode = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!playgroundSDK || 'function' != typeof playgroundSDK.getServiceMode) return 'Server';
         return playgroundSDK.getServiceMode();
@@ -189,6 +190,49 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
     const layout = componentConfig.layout || 'vertical';
     const showVersionInfo = false !== componentConfig.showVersionInfo;
     const deviceType = componentConfig.deviceType;
+    const collapsibleProgressGroup = true === componentConfig.collapsibleProgressGroup;
+    var _componentConfig_progressGroupLabel;
+    const progressGroupLabel = null != (_componentConfig_progressGroupLabel = componentConfig.progressGroupLabel) ? _componentConfig_progressGroupLabel : 'Execution Flow';
+    const [collapsedProgressGroups, setCollapsedProgressGroups] = (0, external_react_namespaceObject.useState)(()=>new Set());
+    const toggleProgressGroup = (0, external_react_namespaceObject.useCallback)((groupId)=>{
+        setCollapsedProgressGroups((prev)=>{
+            const next = new Set(prev);
+            if (next.has(groupId)) next.delete(groupId);
+            else next.add(groupId);
+            return next;
+        });
+    }, []);
+    const { firstInProgressGroup, visibleInfoList } = (0, external_react_namespaceObject.useMemo)(()=>{
+        const firstIds = new Set();
+        const visible = [];
+        let currentGroupFirstId = null;
+        for (const item of infoList)if ('progress' === item.type) {
+            if (null === currentGroupFirstId) {
+                currentGroupFirstId = item.id;
+                firstIds.add(item.id);
+                visible.push(item);
+                continue;
+            }
+            if (!collapsibleProgressGroup || !collapsedProgressGroups.has(currentGroupFirstId)) visible.push(item);
+        } else {
+            currentGroupFirstId = null;
+            visible.push(item);
+        }
+        return {
+            firstInProgressGroup: firstIds,
+            visibleInfoList: visible
+        };
+    }, [
+        collapsedProgressGroups,
+        collapsibleProgressGroup,
+        infoList
+    ]);
+    const latestProgressId = (0, external_react_namespaceObject.useMemo)(()=>{
+        for(let i = infoList.length - 1; i >= 0; i--)if ('progress' === infoList[i].type) return infoList[i].id;
+        return null;
+    }, [
+        infoList
+    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: `playground-container ${layout}-mode ${className}`.trim(),
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Form, {
@@ -207,7 +251,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     className: "middle-dialog-area",
                     children: [
-                        infoList.length > 1 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        false !== componentConfig.showClearButton && infoList.length > 1 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                             className: "clear-button-container",
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
                                 size: "small",
@@ -222,115 +266,130 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                             className: "info-list-container",
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List, {
                                 itemLayout: "vertical",
-                                dataSource: infoList,
-                                renderItem: (item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List.Item, {
+                                dataSource: visibleInfoList,
+                                renderItem: (item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.List.Item, {
                                         className: "list-item",
-                                        children: 'user' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                            className: "user-message-container",
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                className: "user-message-bubble",
-                                                children: item.content
-                                            })
-                                        }) : 'progress' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                            children: (()=>{
-                                                var _parts_, _item_result, _item_result1, _item_result2;
-                                                const parts = item.content.split(' - ');
-                                                const action = null == (_parts_ = parts[0]) ? void 0 : _parts_.trim();
-                                                const description = parts.slice(1).join(' - ').trim();
-                                                const currentIndex = infoList.findIndex((listItem)=>listItem.id === item.id);
-                                                const laterProgressExists = infoList.slice(currentIndex + 1).some((listItem)=>'progress' === listItem.type);
-                                                const isLatestProgress = !laterProgressExists;
-                                                const shouldShowLoading = loading && isLatestProgress;
-                                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-                                                    children: [
-                                                        action && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
-                                                            className: "progress-action-item",
-                                                            children: [
-                                                                action,
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                                    className: `progress-status-icon ${shouldShowLoading ? 'loading' : (null == (_item_result = item.result) ? void 0 : _item_result.error) ? 'error' : 'completed'}`,
-                                                                    children: shouldShowLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.LoadingOutlined, {
-                                                                        spin: true
-                                                                    }) : (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) ? '✗' : '✓'
+                                        children: [
+                                            collapsibleProgressGroup && firstInProgressGroup.has(item.id) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                                                type: "button",
+                                                className: `progress-group-toggle ${collapsedProgressGroups.has(item.id) ? 'is-collapsed' : 'is-expanded'}`,
+                                                "aria-expanded": !collapsedProgressGroups.has(item.id),
+                                                onClick: ()=>toggleProgressGroup(item.id),
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                        className: "progress-group-toggle-label",
+                                                        children: progressGroupLabel
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.UpOutlined, {
+                                                        className: "progress-group-toggle-chevron"
+                                                    })
+                                                ]
+                                            }) : null,
+                                            'user' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                className: "user-message-container",
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                    className: "user-message-bubble",
+                                                    children: item.content
+                                                })
+                                            }) : 'progress' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                children: (()=>{
+                                                    var _parts_, _item_result, _item_result1, _item_result2;
+                                                    const parts = item.content.split(' - ');
+                                                    const action = null == (_parts_ = parts[0]) ? void 0 : _parts_.trim();
+                                                    const description = parts.slice(1).join(' - ').trim();
+                                                    const isLatestProgress = item.id === latestProgressId;
+                                                    const shouldShowLoading = loading && isLatestProgress;
+                                                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                                        children: [
+                                                            action && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                                                className: "progress-action-item",
+                                                                children: [
+                                                                    action,
+                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                        className: `progress-status-icon ${shouldShowLoading ? 'loading' : (null == (_item_result = item.result) ? void 0 : _item_result.error) ? 'error' : 'completed'}`,
+                                                                        children: shouldShowLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.LoadingOutlined, {
+                                                                            spin: true
+                                                                        }) : (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) ? '✗' : '✓'
+                                                                    })
+                                                                ]
+                                                            }),
+                                                            description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_index_js_default(), {
+                                                                    text: description,
+                                                                    className: "progress-description",
+                                                                    disabled: !shouldShowLoading
                                                                 })
-                                                            ]
-                                                        }),
-                                                        description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_index_js_default(), {
-                                                                text: description,
-                                                                className: "progress-description",
-                                                                disabled: !shouldShowLoading
+                                                            }),
+                                                            (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
+                                                                error: item.result.error
                                                             })
-                                                        }),
-                                                        (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
-                                                            error: item.result.error
+                                                        ]
+                                                    });
+                                                })()
+                                            }) : 'separator' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                className: "new-conversation-separator",
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                        className: "separator-line"
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                        className: "separator-text-container",
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Text, {
+                                                            type: "secondary",
+                                                            className: "separator-text",
+                                                            children: item.content
                                                         })
-                                                    ]
-                                                });
-                                            })()
-                                        }) : 'separator' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                            className: "new-conversation-separator",
-                                            children: [
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                    className: "separator-line"
-                                                }),
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                    className: "separator-text-container",
-                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Text, {
-                                                        type: "secondary",
-                                                        className: "separator-text",
-                                                        children: item.content
                                                     })
-                                                })
-                                            ]
-                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                            className: "system-message-container",
-                                            children: [
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                    className: "system-message-header",
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_default(), {
-                                                            component: branding.icon || avatar_js_default(),
-                                                            style: {
-                                                                fontSize: 20
-                                                            }
-                                                        }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                            className: "system-message-title",
-                                                            children: branding.title || 'Playground'
-                                                        })
-                                                    ]
-                                                }),
-                                                (item.content || item.result) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                    className: "system-message-content",
-                                                    children: 'result' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_playground_result_index_js_namespaceObject.PlaygroundResultView, {
-                                                        result: item.result || null,
-                                                        loading: item.loading || false,
-                                                        serverValid: true,
-                                                        serviceMode: serviceMode,
-                                                        replayScriptsInfo: item.replayScriptsInfo || null,
-                                                        replayCounter: item.replayCounter || 0,
-                                                        loadingProgressText: item.loadingProgressText || '',
-                                                        verticalMode: item.verticalMode || false,
-                                                        fitMode: "width",
-                                                        actionType: item.actionType
-                                                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                                ]
+                                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                className: "system-message-container",
+                                                children: [
+                                                    false !== componentConfig.showSystemMessageHeader && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                        className: "system-message-header",
                                                         children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                className: "system-message-text",
-                                                                children: item.content
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_default(), {
+                                                                component: branding.icon || avatar_js_default(),
+                                                                style: {
+                                                                    fontSize: 20
+                                                                }
                                                             }),
-                                                            item.loading && item.loadingProgressText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                className: "loading-progress-text",
-                                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                                    children: item.loadingProgressText
-                                                                })
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                className: "system-message-title",
+                                                                children: branding.title || 'Playground'
                                                             })
                                                         ]
+                                                    }),
+                                                    (item.content || item.result) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                        className: "system-message-content",
+                                                        children: 'result' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_playground_result_index_js_namespaceObject.PlaygroundResultView, {
+                                                            result: item.result || null,
+                                                            loading: item.loading || false,
+                                                            serverValid: true,
+                                                            serviceMode: serviceMode,
+                                                            replayScriptsInfo: item.replayScriptsInfo || null,
+                                                            replayCounter: item.replayCounter || 0,
+                                                            loadingProgressText: item.loadingProgressText || '',
+                                                            verticalMode: item.verticalMode || false,
+                                                            fitMode: "width",
+                                                            actionType: item.actionType
+                                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                                            children: [
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                                    className: "system-message-text",
+                                                                    children: item.content
+                                                                }),
+                                                                item.loading && item.loadingProgressText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                                    className: "loading-progress-text",
+                                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                        children: item.loadingProgressText
+                                                                    })
+                                                                })
+                                                            ]
+                                                        })
                                                     })
-                                                })
-                                            ]
-                                        })
+                                                ]
+                                            })
+                                        ]
                                     }, item.id)
                             })
                         }),
@@ -359,6 +418,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                             onRun: handleFormRun,
                             onStop: handleStop,
                             actionSpace: actionSpace,
+                            chrome: componentConfig.promptInputChrome,
                             deviceType: deviceType
                         })
                     ]

package/dist/lib/utils/action-label.js

@@ -0,0 +1,51 @@
+"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__, {
+    actionNameForType: ()=>actionNameForType,
+    getPromptInputActionLabel: ()=>getPromptInputActionLabel
+});
+const actionNameForType = (type)=>{
+    if (!type) return '';
+    const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
+    if (typeWithoutAi.startsWith('IOS')) return typeWithoutAi.substring(3).replace(/([A-Z])/g, ' $1').replace(/^/, 'IOS').trim();
+    const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();
+    const words = fullName.split(' ');
+    const result = words.length > 3 ? words.slice(-3).join(' ') : fullName;
+    return result.replace(/\b\w/g, (c)=>c.toUpperCase());
+};
+const getPromptInputActionLabel = (type, overrideLabel)=>{
+    if (overrideLabel) return overrideLabel;
+    return actionNameForType(type) || 'Action';
+};
+exports.actionNameForType = __webpack_exports__.actionNameForType;
+exports.getPromptInputActionLabel = __webpack_exports__.getPromptInputActionLabel;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "actionNameForType",
+    "getPromptInputActionLabel"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -25,21 +25,13 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     staticAgentFromContext: ()=>staticAgentFromContext,
-    actionNameForType: ()=>actionNameForType,
+    actionNameForType: ()=>external_action_label_js_namespaceObject.actionNameForType,
     getPlaceholderForType: ()=>getPlaceholderForType,
     isRunButtonEnabled: ()=>isRunButtonEnabled
 });
 const static_namespaceObject = require("@midscene/web/static");
 const external_types_js_namespaceObject = require("../types.js");
-const actionNameForType = (type)=>{
-    if (!type) return '';
-    const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
-    if (typeWithoutAi.startsWith('IOS')) return typeWithoutAi.substring(3).replace(/([A-Z])/g, ' $1').replace(/^/, 'IOS').trim();
-    const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();
-    const words = fullName.split(' ');
-    const result = words.length > 3 ? words.slice(-3).join(' ') : fullName;
-    return result.replace(/\b\w/g, (c)=>c.toUpperCase());
-};
+const external_action_label_js_namespaceObject = require("./action-label.js");
 const staticAgentFromContext = (context)=>{
     const page = new static_namespaceObject.StaticPage(context);
     return new static_namespaceObject.StaticPageAgent(page);

package/dist/lib/utils/prompt-input-utils.js

@@ -0,0 +1,82 @@
+"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__, {
+    getAvailablePromptActionTypes: ()=>getAvailablePromptActionTypes,
+    getInlineStructuredFieldConfig: ()=>getInlineStructuredFieldConfig
+});
+const external_types_js_namespaceObject = require("../types.js");
+const external_constants_js_namespaceObject = require("./constants.js");
+const getAvailablePromptActionTypes = (actionSpace)=>{
+    const metadataMethods = Object.keys(external_constants_js_namespaceObject.apiMetadata);
+    if (!(null == actionSpace ? void 0 : actionSpace.length)) return metadataMethods;
+    const availableMethods = actionSpace.map((action)=>action.interfaceAlias || action.name);
+    const supportsAiAct = availableMethods.includes('aiAct');
+    const finalMethods = new Set();
+    metadataMethods.forEach((method)=>{
+        const methodInfo = external_constants_js_namespaceObject.apiMetadata[method];
+        if ('aiAct' === method) {
+            if (supportsAiAct) finalMethods.add(method);
+            return;
+        }
+        if ((null == methodInfo ? void 0 : methodInfo.group) === 'extraction' || (null == methodInfo ? void 0 : methodInfo.group) === 'validation') return void finalMethods.add(method);
+        if (availableMethods.includes(method)) finalMethods.add(method);
+    });
+    availableMethods.forEach((method)=>{
+        finalMethods.add(method);
+    });
+    return Array.from(finalMethods);
+};
+const getInlineStructuredFieldConfig = (actionSpace, selectedType)=>{
+    var _actualField__def, _actualField__def1;
+    if (!(null == actionSpace ? void 0 : actionSpace.length) || !selectedType) return null;
+    const action = actionSpace.find((item)=>item.interfaceAlias === selectedType || item.name === selectedType);
+    if (!(null == action ? void 0 : action.paramSchema) || !(0, external_types_js_namespaceObject.isZodObjectSchema)(action.paramSchema)) return null;
+    const schema = action.paramSchema;
+    const shape = schema.shape || {};
+    const keys = Object.keys(shape);
+    if (1 !== keys.length) return null;
+    const [name] = keys;
+    const field = shape[name];
+    const { actualField } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
+    const isLocate = (0, external_types_js_namespaceObject.isLocateField)(actualField);
+    const fieldType = null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName;
+    const isInlineField = 'ZodString' === fieldType || isLocate;
+    if (!isInlineField) return null;
+    const placeholder = (null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.description) || actualField.description || (isLocate ? 'Describe the element you want to interact with' : `Enter ${name}`);
+    return {
+        name,
+        placeholder
+    };
+};
+exports.getAvailablePromptActionTypes = __webpack_exports__.getAvailablePromptActionTypes;
+exports.getInlineStructuredFieldConfig = __webpack_exports__.getInlineStructuredFieldConfig;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "getAvailablePromptActionTypes",
+    "getInlineStructuredFieldConfig"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/types/component/config-selector/index.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { ReactNode } from 'react';
 import type { DeviceType } from '../../types';
 interface ConfigSelectorProps {
     showDeepLocateOption: boolean;
@@ -7,6 +8,7 @@ interface ConfigSelectorProps {
     showDataExtractionOptions: boolean;
     hideDomAndScreenshotOptions?: boolean;
     deviceType?: DeviceType;
+    trigger?: ReactNode;
 }
 export declare const ConfigSelector: React.FC<ConfigSelectorProps>;
 export {};

package/dist/types/component/history-selector/index.d.ts

@@ -1,10 +1,12 @@
 import type React from 'react';
+import type { ReactNode } from 'react';
 import type { HistoryItem } from '../../store/history';
 import './index.less';
 interface HistorySelectorProps {
     onSelect: (history: HistoryItem) => void;
     history: HistoryItem[];
     currentType: string;
+    trigger?: ReactNode;
 }
 export declare const HistorySelector: React.FC<HistorySelectorProps>;
 export {};

package/dist/types/component/prompt-input/index.d.ts

@@ -1,7 +1,7 @@
 import './index.less';
 import React from 'react';
 import type { DeviceType, RunType } from '../../types';
-import type { ServiceModeType } from '../../types';
+import type { PromptInputChromeConfig, ServiceModeType } from '../../types';
 import './index.less';
 import type { DeviceAction } from '@midscene/core';
 interface PromptInputProps {
@@ -18,6 +18,7 @@ interface PromptInputProps {
     hideDomAndScreenshotOptions?: boolean;
     actionSpace: DeviceAction<any>[];
     deviceType?: DeviceType;
+    chrome?: PromptInputChromeConfig;
 }
 export declare const PromptInput: React.FC<PromptInputProps>;
 export {};

package/dist/types/index.d.ts

@@ -22,6 +22,6 @@ export { actionNameForType, staticAgentFromContext, getPlaceholderForType, } fro
 export { timeStr, filterBase64Value } from './utils';
 export { default as ShinyText } from './component/shiny-text';
 export { UniversalPlayground, default as UniversalPlaygroundDefault, } from './component/universal-playground';
-export type { UniversalPlaygroundProps, PlaygroundSDKLike, StorageProvider, ContextProvider, UniversalPlaygroundConfig, PlaygroundBranding, InfoListItem, FormValue, ExecutionOptions, ProgressCallback, DeviceType, ExecutionUxHint, ExecutionUxConfig, } from './types';
+export type { UniversalPlaygroundProps, PlaygroundSDKLike, StorageProvider, ContextProvider, UniversalPlaygroundConfig, PlaygroundBranding, InfoListItem, FormValue, ExecutionOptions, ProgressCallback, DeviceType, ExecutionUxHint, ExecutionUxConfig, PromptInputChromeConfig, } from './types';
 export { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, IndexedDBStorageProvider, createStorageProvider, detectBestStorageType, StorageType, } from './component/universal-playground/providers/storage-provider';
 export { BaseContextProvider, AgentContextProvider, StaticContextProvider, NoOpContextProvider, } from './component/universal-playground/providers/context-provider';

package/dist/types/types.d.ts

@@ -165,6 +165,56 @@ export interface UniversalPlaygroundConfig {
     showEnvConfigReminder?: boolean;
     deviceType?: DeviceType;
     executionUx?: ExecutionUxConfig;
+    promptInputChrome?: PromptInputChromeConfig;
+    /**
+     * Whether to render the "clear conversation" button that appears above the
+     * message list once there is more than one item. Defaults to `true`.
+     * Embedding hosts whose own shell exposes a clear affordance can set this
+     * to `false`.
+     */
+    showClearButton?: boolean;
+    /**
+     * Whether each system message renders its header (branding icon + title).
+     * Defaults to `true`. Compact embeddings may set this to `false` to let the
+     * host shell own the branding.
+     */
+    showSystemMessageHeader?: boolean;
+    /**
+     * When `true`, consecutive progress items in the conversation log are
+     * wrapped under a single collapsible group header. A "run" is bounded by
+     * the first non-progress item before and after it. Defaults to `false`
+     * (flat list, every progress item renders inline).
+     */
+    collapsibleProgressGroup?: boolean;
+    /**
+     * Label shown on the collapsible progress group header when
+     * `collapsibleProgressGroup` is enabled. Defaults to `'Execution Flow'`.
+     */
+    progressGroupLabel?: string;
+}
+/**
+ * Optional visual chrome overrides for the embedded prompt input.
+ * - `default` renders the full-featured prompt input (type radio row,
+ *   history button, full send/stop controls).
+ * - `minimal` renders a compact toolbar with only inline params, an action
+ *   dropdown, send/stop — intended for embedded hosts (e.g. Studio) whose
+ *   outer shell already owns the type selection affordance.
+ */
+export interface PromptInputChromeConfig {
+    variant?: 'default' | 'minimal';
+    placeholder?: string;
+    /**
+     * Label shown on the primary action button. When provided, overrides the
+     * auto-derived label (`actionNameForType(type)`). If omitted, the action
+     * name derived from the current type is used, falling back to "Action".
+     */
+    primaryActionLabel?: string;
+    icons?: {
+        action?: string;
+        actionChevron?: string;
+        history?: string;
+        settings?: string;
+    };
 }
 export interface PlaygroundBranding {
     title?: string;

package/dist/types/utils/action-label.d.ts

@@ -0,0 +1,11 @@
+export declare const actionNameForType: (type: string) => string;
+/**
+ * Resolves the label shown on the prompt input primary action button.
+ *
+ * Priority:
+ *   1. `overrideLabel` — when provided, it wins unconditionally. This lets an
+ *      embedding host pin a stable label regardless of the current type.
+ *   2. `actionNameForType(type)` — the auto-derived label for the selected type.
+ *   3. Literal `'Action'` — last-resort fallback when neither is available.
+ */
+export declare const getPromptInputActionLabel: (type: string, overrideLabel?: string) => string;

package/dist/types/utils/playground-utils.d.ts

@@ -1,6 +1,11 @@
 import type { UIContext } from '@midscene/core';
 import { StaticPageAgent } from '@midscene/web/static';
-export declare const actionNameForType: (type: string) => string;
+/**
+ * @deprecated Import `actionNameForType` from `./action-label` directly.
+ * This re-export exists only to keep older import paths working and may be
+ * removed once all call sites are migrated.
+ */
+export { actionNameForType } from './action-label';
 export declare const staticAgentFromContext: (context: UIContext) => StaticPageAgent;
 export declare const getPlaceholderForType: (type: string) => string;
 export declare const isRunButtonEnabled: (runButtonEnabled: boolean, needsStructuredParams: boolean, params: any, actionSpace: any[] | undefined, selectedType: string, promptValue: string) => boolean;