@midscene/visualizer 1.7.5-beta-20260421030751.0 → 1.7.5

package/dist/es/utils/progress-action-icon.mjs

@@ -0,0 +1,49 @@
+import { AimOutlined, CheckCircleOutlined, EditOutlined, ExperimentOutlined, FileSearchOutlined, HourglassOutlined, PlayCircleOutlined, QuestionCircleOutlined, SearchOutlined, SelectOutlined, SwapOutlined, ThunderboltOutlined } from "@ant-design/icons";
+import { createElement } from "react";
+function defaultProgressActionIcon(kind) {
+    switch(kind){
+        case 'Planning':
+            return /*#__PURE__*/ createElement(ExperimentOutlined);
+        case 'Locate':
+        case 'Insight':
+            return /*#__PURE__*/ createElement(SearchOutlined);
+        case 'Tap':
+        case 'Click':
+        case 'DoubleClick':
+        case 'RightClick':
+            return /*#__PURE__*/ createElement(AimOutlined);
+        case 'Hover':
+            return /*#__PURE__*/ createElement(SelectOutlined);
+        case 'Input':
+        case 'KeyboardPress':
+            return /*#__PURE__*/ createElement(EditOutlined);
+        case 'Scroll':
+        case 'Swipe':
+        case 'PullGesture':
+            return /*#__PURE__*/ createElement(SwapOutlined);
+        case 'WaitFor':
+            return /*#__PURE__*/ createElement(HourglassOutlined);
+        case 'Assert':
+        case 'Boolean':
+            return /*#__PURE__*/ createElement(CheckCircleOutlined);
+        case 'Query':
+        case 'Number':
+        case 'String':
+            return /*#__PURE__*/ createElement(FileSearchOutlined);
+        case 'Ask':
+            return /*#__PURE__*/ createElement(QuestionCircleOutlined);
+        case 'Act':
+            return /*#__PURE__*/ createElement(PlayCircleOutlined);
+        default:
+            return /*#__PURE__*/ createElement(ThunderboltOutlined);
+    }
+}
+function resolveProgressActionIcon(kind, override) {
+    if (!kind) return null;
+    if (override) {
+        const custom = override(kind);
+        if (void 0 !== custom) return custom;
+    }
+    return defaultProgressActionIcon(kind);
+}
+export { defaultProgressActionIcon, resolveProgressActionIcon };

package/dist/lib/component/config-selector/index.js

@@ -42,7 +42,7 @@ var setting_js_default = /*#__PURE__*/ __webpack_require__.n(setting_js_namespac
 const store_js_namespaceObject = require("../../store/store.js");
 const constants_js_namespaceObject = require("../../utils/constants.js");
 const device_capabilities_js_namespaceObject = require("../../utils/device-capabilities.js");
-const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false, deviceType, trigger })=>{
+const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false, deviceType, trigger, popupPlacement = 'bottomRight' })=>{
     const forceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.forceSameTabNavigation);
     const setForceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.setForceSameTabNavigation);
     const deepLocate = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.deepLocate);
@@ -68,9 +68,15 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: "selector-trigger",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Dropdown, {
+            getPopupContainer: (triggerNode)=>triggerNode.ownerDocument.body,
             menu: {
                 items: configItems
             },
+            overlayClassName: "config-selector-dropdown",
+            overlayStyle: {
+                zIndex: 10010
+            },
+            placement: popupPlacement,
             trigger: [
                 'click'
             ],

package/dist/lib/component/history-selector/index.css

@@ -8,11 +8,9 @@
   border: 1px solid rgba(0, 0, 0, .08);
   border-radius: 12px;
   width: 320px;
+  max-width: min(320px, 100vw - 32px);
   height: 400px;
   position: fixed;
-  top: auto;
-  bottom: 20px;
-  right: 20px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
 }
 

package/dist/lib/component/history-selector/index.js

@@ -38,6 +38,7 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
+const external_react_dom_namespaceObject = require("react-dom");
 const close_js_namespaceObject = require("../../icons/close.js");
 var close_js_default = /*#__PURE__*/ __webpack_require__.n(close_js_namespaceObject);
 const history_js_namespaceObject = require("../../icons/history.js");
@@ -47,11 +48,17 @@ var magnifying_glass_js_default = /*#__PURE__*/ __webpack_require__.n(magnifying
 const external_store_history_js_namespaceObject = require("../../store/history.js");
 require("./index.css");
 const { Text } = external_antd_namespaceObject.Typography;
-const HistorySelector = ({ onSelect, history, currentType, trigger })=>{
+const HISTORY_MODAL_WIDTH = 320;
+const HISTORY_MODAL_HEIGHT = 400;
+const HISTORY_MODAL_GUTTER = 16;
+const HISTORY_MODAL_OFFSET = 8;
+const HistorySelector = ({ onSelect, history, currentType, trigger, popupPlacement = 'bottom' })=>{
     const [isModalOpen, setIsModalOpen] = (0, external_react_namespaceObject.useState)(false);
     const [searchText, setSearchText] = (0, external_react_namespaceObject.useState)('');
     const clearHistory = (0, external_store_history_js_namespaceObject.useHistoryStore)((state)=>state.clearHistory);
     const modalRef = (0, external_react_namespaceObject.useRef)(null);
+    const triggerRef = (0, external_react_namespaceObject.useRef)(null);
+    const [overlayPosition, setOverlayPosition] = (0, external_react_namespaceObject.useState)(null);
     const groupedHistory = (0, external_react_namespaceObject.useMemo)(()=>{
         const now = Date.now();
         const sevenDaysAgo = now - 604800000;
@@ -78,18 +85,37 @@ const HistorySelector = ({ onSelect, history, currentType, trigger })=>{
     };
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (!isModalOpen) return;
+        const updateOverlayPosition = ()=>{
+            if (!triggerRef.current) return;
+            const triggerRect = triggerRef.current.getBoundingClientRect();
+            const maxLeft = Math.max(HISTORY_MODAL_GUTTER, window.innerWidth - HISTORY_MODAL_WIDTH - HISTORY_MODAL_GUTTER);
+            const maxTop = Math.max(HISTORY_MODAL_GUTTER, window.innerHeight - HISTORY_MODAL_HEIGHT - HISTORY_MODAL_GUTTER);
+            const left = Math.min(Math.max(HISTORY_MODAL_GUTTER, triggerRect.right - HISTORY_MODAL_WIDTH), maxLeft);
+            const preferredTop = 'top' === popupPlacement ? triggerRect.top - HISTORY_MODAL_HEIGHT - HISTORY_MODAL_OFFSET : triggerRect.bottom + HISTORY_MODAL_OFFSET;
+            const top = Math.min(Math.max(HISTORY_MODAL_GUTTER, preferredTop), maxTop);
+            setOverlayPosition({
+                left,
+                top
+            });
+        };
         const handleClickOutside = (event)=>{
-            if (modalRef.current && !modalRef.current.contains(event.target)) setIsModalOpen(false);
+            if (modalRef.current && !modalRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) setIsModalOpen(false);
         };
+        updateOverlayPosition();
         const timer = setTimeout(()=>{
             document.addEventListener('click', handleClickOutside);
         }, 100);
+        window.addEventListener('resize', updateOverlayPosition);
+        window.addEventListener('scroll', updateOverlayPosition, true);
         return ()=>{
             clearTimeout(timer);
             document.removeEventListener('click', handleClickOutside);
+            window.removeEventListener('resize', updateOverlayPosition);
+            window.removeEventListener('scroll', updateOverlayPosition, true);
         };
     }, [
-        isModalOpen
+        isModalOpen,
+        popupPlacement
     ]);
     const renderHistoryGroup = (title, items)=>{
         if (0 === items.length) return null;
@@ -114,14 +140,16 @@ const HistorySelector = ({ onSelect, history, currentType, trigger })=>{
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "selector-trigger",
                 onClick: ()=>setIsModalOpen(true),
+                ref: triggerRef,
                 children: null != trigger ? trigger : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(history_js_default(), {
                     width: 24,
                     height: 24
                 })
             }),
-            isModalOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            isModalOpen && overlayPosition && /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "history-modal-overlay",
                 ref: modalRef,
+                style: overlayPosition,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     className: "history-modal-container",
                     children: [
@@ -202,7 +230,7 @@ const HistorySelector = ({ onSelect, history, currentType, trigger })=>{
                         })
                     ]
                 })
-            })
+            }), document.body)
         ]
     });
 };

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

@@ -624,6 +624,14 @@
   height: 16px;
 }
 
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-icon-fallback {
+  color: #878787;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-label {
   color: #878787;
   white-space: nowrap;
@@ -805,7 +813,7 @@
   background: none !important;
 }
 
-[data-theme="dark"] .prompt-input-wrapper.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-fallback {
+[data-theme="dark"] .prompt-input-wrapper.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-fallback, [data-theme="dark"] .prompt-input-wrapper.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-icon-fallback {
   color: rgba(255, 255, 255, .72) !important;
 }
 

package/dist/lib/component/prompt-input/index.css

@@ -532,6 +532,14 @@
   height: 16px;
 }
 
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-icon-fallback {
+  color: #878787;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-label {
   color: #878787;
   white-space: nowrap;
@@ -713,7 +721,7 @@
   background: none !important;
 }
 
-[data-theme="dark"] .prompt-input-wrapper.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-fallback {
+[data-theme="dark"] .prompt-input-wrapper.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-fallback, [data-theme="dark"] .prompt-input-wrapper.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-icon-fallback {
   color: rgba(255, 255, 255, .72) !important;
 }
 

package/dist/lib/component/prompt-input/index.js

@@ -51,10 +51,9 @@ const prompt_input_utils_js_namespaceObject = require("../../utils/prompt-input-
 const index_js_namespaceObject = require("../config-selector/index.js");
 const external_form_field_index_js_namespaceObject = require("../form-field/index.js");
 const external_history_selector_index_js_namespaceObject = require("../history-selector/index.js");
+const useMinimalTypeGate_js_namespaceObject = require("../../hooks/useMinimalTypeGate.js");
 const external_icons_history_js_namespaceObject = require("../../icons/history.js");
 var external_icons_history_js_default = /*#__PURE__*/ __webpack_require__.n(external_icons_history_js_namespaceObject);
-const setting_js_namespaceObject = require("../../icons/setting.js");
-var setting_js_default = /*#__PURE__*/ __webpack_require__.n(setting_js_namespaceObject);
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -79,10 +78,15 @@ function _object_spread(target) {
     return target;
 }
 const { TextArea } = external_antd_namespaceObject.Input;
+const STUDIO_MINIMAL_PROMPT_ICONS = {
+    action: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAASdJREFUeAHtlt3NgjAUhg8/CVx+G8gGX5xAnUDdQMcgkIgJBLbQEXQD3MAR6gZewgXgOUn9iRp6vAC96JM07YG36Zv+nBZAwySO4ymWgUoXRdEfaYGJyRElSbKyLGuHJVdpHcc5khb7RMCAZcA0TU82PYZ8IPsoZ4ttoEu0ga8bMB6DNE1X8H6jTUBuLmQL7SxkLbDkzz/ruhZBEKxfDGRZNm2aZgc9UFXVLAzDPbVvS1AUxQGrE3SPwHK8BganBy7NBuTU+r5vKLSNbG5RuwQF+hRoA9rA76RifMl4+JjI4Z5yu0KUZTnE8c4U3GbAdd3/HgYnPNu2R9eg98uIvmOGfL2M2tCpWBv4BQPiqW7j9IGWZ4CODT7X5pRAVFrUjEn7eNQ0bVwAyWpjMDlJKpAAAAAASUVORK5CYII=',
+    actionChevron: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAUxJREFUeAHtUztOw0AQ3V1SuLCldP4VuEyHuQE34Aqho0tugHKCwBFyApwTYEoqyAlwCsufKkgu3NjmjfkoCDu7KSP5SaNZ774Zv9nZYWzAgH2MAdu2z4+J4apEy7I8uBDWlGV5uQNU4gRTBOd8CUfqPU3THlXjzlRIUH8HdwuLYB8wX9d1XhRFKIuVXpHjONd1XQdN0+yEED48h72iojGOr9I0fT4ULyTKPSR/aJVwPk+SZIuEET6n33uBrOmyHoTs694XSLz62cyybI3k96iEqgjodbFjAWVLVNDAnvo4dEYc4vZxOiswTXMGdXMsIyidsn7cwLbExU9mXQTeocqDe28POffo3tkBuK57UVXVG63RLz/P8w3rq2BvmH6byiSI43hD3DaZEP/68WcODMOg9z5BySs0dcEUgXl4wVzQ0h+NRhN8r9mAAaeDT7K0eaMcqhtVAAAAAElFTkSuQmCC',
+    settings: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAaFJREFUeAHtlt9tgzAQxi8EJa/pBMkIHYENygalG7RvSQQKlfjz2I5ANkg3oBukG6QbtI9IIPq5ihHQOBXmFImqPwnZBvtsf9ydTfQPA77vz4IguCENDGJgOp3ux+PxLgxDnzrCsgAw/zZmGPOO48iUFci4wE42xITKXlEUO9d1X34s4NjZISZU9qCSjeKqastKWZYpMaKyNxqNto02MRDHcXmsJqvV6q7LWBYnxK4+SBOTeHDw2HAwn4aGlg9EUfQE2e+xYwchtaUeaPmAmFyUyH4W9aThA9jZ7alOiN39crl8O/FpoRpzjrq96hcgj2/wwVcNQlxb6/X6VdRrYaeNtGfUVvXbgE9iRNprOCHktPF/Z+3OeZ4fPM9LZbumgHjX2Qnr9rSioE/ma6MVBZDvWWQ/cbLR0GE5jEQoQhFLpGIkpvcuY1nOAkyeiBKJSRSXPw37UCkgbrWmaSZwsBkxoLInHBgJ6EG2KwUgn801+Tl78hyRVApkWfaIexxp4rRfqOzBUdN6+29cyYAMvQN1hCUMIbc1mUyu4VzDz4wX5wvRfah9kIOcwwAAAABJRU5ErkJggg=='
+};
 const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true, actionSpace, hideDomAndScreenshotOptions = false, deviceType, chrome })=>{
+    var _chrome_icons, _chrome_icons1, _chrome_icons2;
     const [hoveringSettings, setHoveringSettings] = (0, external_react_namespaceObject.useState)(false);
     const [promptValue, setPromptValue] = (0, external_react_namespaceObject.useState)('');
-    const [minimalHasExplicitTypeSelection, setMinimalHasExplicitTypeSelection] = (0, external_react_namespaceObject.useState)(false);
     const placeholder = (0, playground_utils_js_namespaceObject.getPlaceholderForType)(selectedType);
     const isMinimalChrome = (null == chrome ? void 0 : chrome.variant) === 'minimal';
     const resolvedPlaceholder = (null == chrome ? void 0 : chrome.placeholder) || placeholder;
@@ -99,7 +103,16 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         history,
         selectedType
     ]);
-    const skipMinimalSyncRef = (0, external_react_namespaceObject.useRef)(false);
+    const handleMinimalTypeGateReset = (0, external_react_namespaceObject.useCallback)(()=>{
+        lastHistoryRef.current = null;
+        setPromptValue('');
+    }, []);
+    const { markExplicitSelection, skipNextRestore, shouldSkipRestoreOnce } = (0, useMinimalTypeGate_js_namespaceObject.useMinimalTypeGate)({
+        enabled: isMinimalChrome,
+        form,
+        selectedType,
+        onAfterReset: handleMinimalTypeGateReset
+    });
     const needsStructuredParams = (0, external_react_namespaceObject.useMemo)(()=>{
         if (actionSpace) {
             const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
@@ -197,11 +210,11 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         availableDropdownMethods
     ]);
     const handleTypeSelect = (0, external_react_namespaceObject.useCallback)((api)=>{
-        if (isMinimalChrome) setMinimalHasExplicitTypeSelection(true);
+        markExplicitSelection();
         form.setFieldValue('type', api);
     }, [
         form,
-        isMinimalChrome
+        markExplicitSelection
     ]);
     const apiGroupDefinitions = (0, external_react_namespaceObject.useMemo)(()=>[
             {
@@ -285,22 +298,6 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         }), [
         hiddenApiGroupItems
     ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (!isMinimalChrome || minimalHasExplicitTypeSelection || !selectedType || 'aiAct' === selectedType) return;
-        skipMinimalSyncRef.current = false;
-        lastHistoryRef.current = null;
-        form.setFieldsValue({
-            type: 'aiAct',
-            prompt: '',
-            params: {}
-        });
-        setPromptValue('');
-    }, [
-        form,
-        minimalHasExplicitTypeSelection,
-        isMinimalChrome,
-        selectedType
-    ]);
     const getDefaultParams = (0, external_react_namespaceObject.useCallback)(()=>{
         if (!needsStructuredParams || !actionSpace) return {};
         const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
@@ -358,10 +355,7 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         }
     }, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (skipMinimalSyncRef.current) {
-            skipMinimalSyncRef.current = false;
-            return;
-        }
+        if (shouldSkipRestoreOnce()) return;
         if (isMinimalChrome) {
             const defaultParams = getDefaultParams();
             form.setFieldsValue({
@@ -396,7 +390,8 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         historyForSelectedType,
         form,
         getDefaultParams,
-        isMinimalChrome
+        isMinimalChrome,
+        shouldSkipRestoreOnce
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const timeoutId = setTimeout(()=>{
@@ -415,8 +410,8 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         promptValue
     ]);
     const handleSelectHistory = (0, external_react_namespaceObject.useCallback)((historyItem)=>{
-        if (isMinimalChrome) setMinimalHasExplicitTypeSelection(true);
-        skipMinimalSyncRef.current = historyItem.type !== selectedType;
+        markExplicitSelection();
+        if (historyItem.type !== selectedType) skipNextRestore();
         form.setFieldsValue({
             prompt: historyItem.prompt,
             type: historyItem.type,
@@ -425,8 +420,9 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         setPromptValue(historyItem.prompt);
     }, [
         form,
-        isMinimalChrome,
-        selectedType
+        markExplicitSelection,
+        selectedType,
+        skipNextRestore
     ]);
     const handlePromptChange = (0, external_react_namespaceObject.useCallback)((e)=>{
         const value = e.target.value;
@@ -759,8 +755,14 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
             (0, playground_utils_js_namespaceObject.actionNameForType)(selectedType)
         ]
     });
+    var _chrome_icons_action;
+    const minimalActionIconSrc = null != (_chrome_icons_action = null == chrome ? void 0 : null == (_chrome_icons = chrome.icons) ? void 0 : _chrome_icons.action) ? _chrome_icons_action : STUDIO_MINIMAL_PROMPT_ICONS.action;
+    var _chrome_icons_actionChevron;
+    const minimalActionChevronSrc = null != (_chrome_icons_actionChevron = null == chrome ? void 0 : null == (_chrome_icons1 = chrome.icons) ? void 0 : _chrome_icons1.actionChevron) ? _chrome_icons_actionChevron : STUDIO_MINIMAL_PROMPT_ICONS.actionChevron;
+    var _chrome_icons_settings;
+    const minimalSettingsIconSrc = null != (_chrome_icons_settings = null == chrome ? void 0 : null == (_chrome_icons2 = chrome.icons) ? void 0 : _chrome_icons2.settings) ? _chrome_icons_settings : STUDIO_MINIMAL_PROMPT_ICONS.settings;
     if (isMinimalChrome) {
-        var _chrome_icons, _chrome_icons1, _chrome_icons2, _chrome_icons3;
+        var _chrome_icons3;
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
             className: "prompt-input-wrapper prompt-input-wrapper-minimal",
             children: [
@@ -796,21 +798,19 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
                                                 disabled: !runButtonEnabled,
                                                 type: "button",
                                                 children: [
-                                                    (null == chrome ? void 0 : null == (_chrome_icons = chrome.icons) ? void 0 : _chrome_icons.action) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
                                                         alt: "",
                                                         className: "minimal-action-icon",
-                                                        src: chrome.icons.action
-                                                    }) : null,
+                                                        src: minimalActionIconSrc
+                                                    }),
                                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                                         className: "minimal-action-label",
                                                         children: actionButtonLabel
                                                     }),
-                                                    (null == chrome ? void 0 : null == (_chrome_icons1 = chrome.icons) ? void 0 : _chrome_icons1.actionChevron) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
                                                         alt: "",
                                                         className: "minimal-action-chevron",
-                                                        src: chrome.icons.actionChevron
-                                                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.DownOutlined, {
-                                                        className: "minimal-action-chevron-fallback"
+                                                        src: minimalActionChevronSrc
                                                     })
                                                 ]
                                             })
@@ -819,11 +819,12 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
                                             onSelect: handleSelectHistory,
                                             history: historyForSelectedType,
                                             currentType: selectedType,
+                                            popupPlacement: "top",
                                             trigger: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                                                 "aria-label": "Open prompt history",
                                                 className: "minimal-icon-trigger",
                                                 type: "button",
-                                                children: (null == chrome ? void 0 : null == (_chrome_icons2 = chrome.icons) ? void 0 : _chrome_icons2.history) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                                                children: (null == chrome ? void 0 : null == (_chrome_icons3 = chrome.icons) ? void 0 : _chrome_icons3.history) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
                                                     alt: "",
                                                     className: "minimal-toolbar-icon",
                                                     src: chrome.icons.history
@@ -845,18 +846,15 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
                                                 showDataExtractionOptions: showDataExtractionOptions,
                                                 hideDomAndScreenshotOptions: hideDomAndScreenshotOptions,
                                                 deviceType: deviceType,
+                                                popupPlacement: "topRight",
                                                 trigger: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                                                     "aria-label": "Open run configuration",
                                                     className: "minimal-icon-trigger",
                                                     type: "button",
-                                                    children: (null == chrome ? void 0 : null == (_chrome_icons3 = chrome.icons) ? void 0 : _chrome_icons3.settings) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
                                                         alt: "",
                                                         className: "minimal-toolbar-icon",
-                                                        src: chrome.icons.settings
-                                                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(setting_js_default(), {
-                                                        className: "minimal-toolbar-icon minimal-toolbar-icon-fallback",
-                                                        width: 16,
-                                                        height: 16
+                                                        src: minimalSettingsIconSrc
                                                     })
                                                 })
                                             })

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

@@ -370,6 +370,135 @@
   text-decoration: underline;
 }
 
+.playground-container.playground-conversation-skin .middle-dialog-area .info-list-container {
+  padding: 20px 16px 32px;
+}
+
+.playground-container.playground-conversation-skin .middle-dialog-area .info-list-container .ant-list-items {
+  flex-direction: column;
+  gap: 16px;
+  display: flex;
+}
+
+.playground-container.playground-conversation-skin .middle-dialog-area .info-list-container .list-item {
+  padding: 0;
+}
+
+.playground-container.playground-conversation-skin .user-message-container {
+  margin: 0;
+}
+
+.playground-container.playground-conversation-skin .user-message-container .user-message-bubble {
+  border-radius: 12px;
+  max-width: min(80%, 280px);
+  padding: 8px 16px;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.playground-container.playground-conversation-skin .bottom-input-section {
+  border-top: 1px solid var(--midscene-border-subtle);
+  background: var(--midscene-surface);
+  flex-shrink: 0;
+  padding: 12px;
+}
+
+.playground-container.playground-conversation-skin .list-item:has(.progress-action-item) {
+  padding-left: 0;
+  position: relative;
+}
+
+.playground-container.playground-conversation-skin .list-item > div:has( > .progress-action-item) {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  display: flex;
+}
+
+.playground-container.playground-conversation-skin .progress-action-item {
+  color: rgba(0, 0, 0, .7);
+  background: rgba(0, 0, 0, .08);
+  border-radius: 38px;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  width: -moz-fit-content;
+  width: fit-content;
+  max-width: 100%;
+  height: 28px;
+  margin: 0 0 0 24px;
+  padding: 2px 12px 2px 4px;
+  font-size: 14px;
+  line-height: 22px;
+  display: flex;
+}
+
+.playground-container.playground-conversation-skin .progress-action-item .progress-status-icon {
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  margin-left: 0;
+  font-size: 14px;
+  display: inline-flex;
+}
+
+.playground-container.playground-conversation-skin .progress-action-item + div {
+  width: 100%;
+  margin: 0;
+  padding-left: 20px;
+}
+
+.playground-container.playground-conversation-skin .progress-description {
+  color: rgba(0, 0, 0, .85);
+  margin: 0;
+  padding: 0;
+}
+
+.playground-container.playground-conversation-skin .system-message-content, .playground-container.playground-conversation-skin .system-message-content .system-message-text {
+  color: rgba(0, 0, 0, .85);
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.playground-container.playground-conversation-skin .list-item:has(.progress-action-item) + .list-item:has(.progress-action-item) {
+  margin-top: -8px;
+}
+
+.playground-container.playground-conversation-skin .list-item:has(.progress-action-item):has( + .list-item .progress-action-item):after {
+  content: "";
+  pointer-events: none;
+  background: rgba(0, 0, 0, .08);
+  width: 1px;
+  position: absolute;
+  top: 23px;
+  bottom: -16px;
+  left: 12px;
+}
+
+.playground-container.playground-conversation-skin .list-item:has(.progress-action-item) + .list-item:has(.progress-action-item):has( + .list-item .progress-action-item):after {
+  top: 0;
+}
+
+.playground-container.playground-conversation-skin .progress-group-toggle {
+  margin: 0 0 8px;
+  padding-left: 4px;
+}
+
+[data-theme="dark"] .playground-container.playground-conversation-skin .progress-action-item {
+  color: rgba(255, 255, 255, .7);
+  background: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .playground-container.playground-conversation-skin .list-item:has(.progress-action-item):has( + .list-item .progress-action-item):after {
+  background: rgba(255, 255, 255, .12);
+}
+
+[data-theme="dark"] .playground-container.playground-conversation-skin .system-message-content, [data-theme="dark"] .playground-container.playground-conversation-skin .system-message-content .system-message-text, [data-theme="dark"] .playground-container.playground-conversation-skin .progress-description {
+  color: var(--midscene-text-primary);
+}
+
 [data-theme="dark"] .universal-playground .error-hint {
   color: rgba(255, 255, 255, .45);
 }

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

@@ -51,6 +51,7 @@ require("./index.css");
 const avatar_js_namespaceObject = require("../../icons/avatar.js");
 var avatar_js_default = /*#__PURE__*/ __webpack_require__.n(avatar_js_namespaceObject);
 const constants_js_namespaceObject = require("../../utils/constants.js");
+const progress_action_icon_js_namespaceObject = require("../../utils/progress-action-icon.js");
 const external_prompt_input_index_js_namespaceObject = require("../prompt-input/index.js");
 const external_shiny_text_index_js_namespaceObject = require("../shiny-text/index.js");
 var external_shiny_text_index_js_default = /*#__PURE__*/ __webpack_require__.n(external_shiny_text_index_js_namespaceObject);
@@ -190,9 +191,11 @@ 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';
+    var _componentConfig_executionFlow;
+    const executionFlowConfig = null != (_componentConfig_executionFlow = componentConfig.executionFlow) ? _componentConfig_executionFlow : {};
+    const collapsibleProgressGroup = true === executionFlowConfig.collapsible;
+    var _executionFlowConfig_label;
+    const progressGroupLabel = null != (_executionFlowConfig_label = executionFlowConfig.label) ? _executionFlowConfig_label : 'Execution Flow';
     const [collapsedProgressGroups, setCollapsedProgressGroups] = (0, external_react_namespaceObject.useState)(()=>new Set());
     const toggleProgressGroup = (0, external_react_namespaceObject.useCallback)((groupId)=>{
         setCollapsedProgressGroups((prev)=>{
@@ -293,12 +296,14 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                                                 })
                                             }) : 'progress' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                                 children: (()=>{
-                                                    var _parts_, _item_result, _item_result1, _item_result2;
+                                                    var _parts_, _item_result, _item_result1;
                                                     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;
+                                                    const state = shouldShowLoading ? 'loading' : (null == (_item_result = item.result) ? void 0 : _item_result.error) ? 'error' : 'completed';
+                                                    const domainIcon = 'completed' === state ? (0, progress_action_icon_js_namespaceObject.resolveProgressActionIcon)(item.actionKind, executionFlowConfig.resolveActionIcon) : null;
                                                     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                                                         children: [
                                                             action && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
@@ -306,10 +311,10 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                                                                 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, {
+                                                                        className: `progress-status-icon ${state}`,
+                                                                        children: 'loading' === state ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.LoadingOutlined, {
                                                                             spin: true
-                                                                        }) : (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) ? '✗' : '✓'
+                                                                        }) : 'error' === state ? '✗' : null !== domainIcon ? domainIcon : '✓'
                                                                     })
                                                                 ]
                                                             }),
@@ -320,7 +325,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                                                                     disabled: !shouldShowLoading
                                                                 })
                                                             }),
-                                                            (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
+                                                            (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
                                                                 error: item.result.error
                                                             })
                                                         ]