@midscene/visualizer 1.7.5-beta-20260421030751.0 → 1.7.5

package/dist/es/component/config-selector/index.mjs

@@ -4,7 +4,7 @@ import setting from "../../icons/setting.mjs";
 import { useEnvConfig } from "../../store/store.mjs";
 import { alwaysRefreshScreenInfoTip, autoDismissKeyboardTip, deepLocateTip, deepThinkTip, domIncludedTip, imeStrategyTip, keyboardDismissStrategyTip, screenshotIncludedTip, trackingTip } from "../../utils/constants.mjs";
 import { getDeviceCapabilities, hasDeviceSpecificConfig } from "../../utils/device-capabilities.mjs";
-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 = useEnvConfig((state)=>state.forceSameTabNavigation);
     const setForceSameTabNavigation = useEnvConfig((state)=>state.setForceSameTabNavigation);
     const deepLocate = useEnvConfig((state)=>state.deepLocate);
@@ -30,9 +30,15 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
     return /*#__PURE__*/ jsx("div", {
         className: "selector-trigger",
         children: /*#__PURE__*/ jsx(Dropdown, {
+            getPopupContainer: (triggerNode)=>triggerNode.ownerDocument.body,
             menu: {
                 items: configItems
             },
+            overlayClassName: "config-selector-dropdown",
+            overlayStyle: {
+                zIndex: 10010
+            },
+            placement: popupPlacement,
             trigger: [
                 'click'
             ],

package/dist/es/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/es/component/history-selector/index.mjs

@@ -1,17 +1,24 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Input, Typography } from "antd";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import icons_close from "../../icons/close.mjs";
 import icons_history from "../../icons/history.mjs";
 import magnifying_glass from "../../icons/magnifying-glass.mjs";
 import { useHistoryStore } from "../../store/history.mjs";
 import "./index.css";
 const { Text } = 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] = useState(false);
     const [searchText, setSearchText] = useState('');
     const clearHistory = useHistoryStore((state)=>state.clearHistory);
     const modalRef = useRef(null);
+    const triggerRef = useRef(null);
+    const [overlayPosition, setOverlayPosition] = useState(null);
     const groupedHistory = useMemo(()=>{
         const now = Date.now();
         const sevenDaysAgo = now - 604800000;
@@ -38,18 +45,37 @@ const HistorySelector = ({ onSelect, history, currentType, trigger })=>{
     };
     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;
@@ -74,14 +100,16 @@ const HistorySelector = ({ onSelect, history, currentType, trigger })=>{
             /*#__PURE__*/ jsx("div", {
                 className: "selector-trigger",
                 onClick: ()=>setIsModalOpen(true),
+                ref: triggerRef,
                 children: null != trigger ? trigger : /*#__PURE__*/ jsx(icons_history, {
                     width: 24,
                     height: 24
                 })
             }),
-            isModalOpen && /*#__PURE__*/ jsx("div", {
+            isModalOpen && overlayPosition && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
                 className: "history-modal-overlay",
                 ref: modalRef,
+                style: overlayPosition,
                 children: /*#__PURE__*/ jsxs("div", {
                     className: "history-modal-container",
                     children: [
@@ -162,7 +190,7 @@ const HistorySelector = ({ onSelect, history, currentType, trigger })=>{
                         })
                     ]
                 })
-            })
+            }), document.body)
         ]
     });
 };

package/dist/es/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/es/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/es/component/prompt-input/index.mjs

@@ -13,8 +13,8 @@ import { getAvailablePromptActionTypes, getInlineStructuredFieldConfig } from ".
 import { ConfigSelector } from "../config-selector/index.mjs";
 import { BooleanField, EnumField, LocateField, NumberField, TextField } from "../form-field/index.mjs";
 import { HistorySelector } from "../history-selector/index.mjs";
+import { useMinimalTypeGate } from "../../hooks/useMinimalTypeGate.mjs";
 import icons_history from "../../icons/history.mjs";
-import setting from "../../icons/setting.mjs";
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -39,10 +39,15 @@ function _object_spread(target) {
     return target;
 }
 const { TextArea } = 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] = useState(false);
     const [promptValue, setPromptValue] = useState('');
-    const [minimalHasExplicitTypeSelection, setMinimalHasExplicitTypeSelection] = useState(false);
     const placeholder = getPlaceholderForType(selectedType);
     const isMinimalChrome = (null == chrome ? void 0 : chrome.variant) === 'minimal';
     const resolvedPlaceholder = (null == chrome ? void 0 : chrome.placeholder) || placeholder;
@@ -59,7 +64,16 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         history,
         selectedType
     ]);
-    const skipMinimalSyncRef = useRef(false);
+    const handleMinimalTypeGateReset = useCallback(()=>{
+        lastHistoryRef.current = null;
+        setPromptValue('');
+    }, []);
+    const { markExplicitSelection, skipNextRestore, shouldSkipRestoreOnce } = useMinimalTypeGate({
+        enabled: isMinimalChrome,
+        form,
+        selectedType,
+        onAfterReset: handleMinimalTypeGateReset
+    });
     const needsStructuredParams = useMemo(()=>{
         if (actionSpace) {
             const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
@@ -157,11 +171,11 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         availableDropdownMethods
     ]);
     const handleTypeSelect = useCallback((api)=>{
-        if (isMinimalChrome) setMinimalHasExplicitTypeSelection(true);
+        markExplicitSelection();
         form.setFieldValue('type', api);
     }, [
         form,
-        isMinimalChrome
+        markExplicitSelection
     ]);
     const apiGroupDefinitions = useMemo(()=>[
             {
@@ -245,22 +259,6 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         }), [
         hiddenApiGroupItems
     ]);
-    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 = useCallback(()=>{
         if (!needsStructuredParams || !actionSpace) return {};
         const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
@@ -318,10 +316,7 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         }
     }, []);
     useEffect(()=>{
-        if (skipMinimalSyncRef.current) {
-            skipMinimalSyncRef.current = false;
-            return;
-        }
+        if (shouldSkipRestoreOnce()) return;
         if (isMinimalChrome) {
             const defaultParams = getDefaultParams();
             form.setFieldsValue({
@@ -356,7 +351,8 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         historyForSelectedType,
         form,
         getDefaultParams,
-        isMinimalChrome
+        isMinimalChrome,
+        shouldSkipRestoreOnce
     ]);
     useEffect(()=>{
         const timeoutId = setTimeout(()=>{
@@ -375,8 +371,8 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         promptValue
     ]);
     const handleSelectHistory = 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,
@@ -385,8 +381,9 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         setPromptValue(historyItem.prompt);
     }, [
         form,
-        isMinimalChrome,
-        selectedType
+        markExplicitSelection,
+        selectedType,
+        skipNextRestore
     ]);
     const handlePromptChange = useCallback((e)=>{
         const value = e.target.value;
@@ -719,8 +716,14 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
             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__*/ jsxs("div", {
             className: "prompt-input-wrapper prompt-input-wrapper-minimal",
             children: [
@@ -756,21 +759,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__*/ jsx("img", {
+                                                    /*#__PURE__*/ jsx("img", {
                                                         alt: "",
                                                         className: "minimal-action-icon",
-                                                        src: chrome.icons.action
-                                                    }) : null,
+                                                        src: minimalActionIconSrc
+                                                    }),
                                                     /*#__PURE__*/ jsx("span", {
                                                         className: "minimal-action-label",
                                                         children: actionButtonLabel
                                                     }),
-                                                    (null == chrome ? void 0 : null == (_chrome_icons1 = chrome.icons) ? void 0 : _chrome_icons1.actionChevron) ? /*#__PURE__*/ jsx("img", {
+                                                    /*#__PURE__*/ jsx("img", {
                                                         alt: "",
                                                         className: "minimal-action-chevron",
-                                                        src: chrome.icons.actionChevron
-                                                    }) : /*#__PURE__*/ jsx(DownOutlined, {
-                                                        className: "minimal-action-chevron-fallback"
+                                                        src: minimalActionChevronSrc
                                                     })
                                                 ]
                                             })
@@ -779,11 +780,12 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
                                             onSelect: handleSelectHistory,
                                             history: historyForSelectedType,
                                             currentType: selectedType,
+                                            popupPlacement: "top",
                                             trigger: /*#__PURE__*/ 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__*/ jsx("img", {
+                                                children: (null == chrome ? void 0 : null == (_chrome_icons3 = chrome.icons) ? void 0 : _chrome_icons3.history) ? /*#__PURE__*/ jsx("img", {
                                                     alt: "",
                                                     className: "minimal-toolbar-icon",
                                                     src: chrome.icons.history
@@ -805,18 +807,15 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
                                                 showDataExtractionOptions: showDataExtractionOptions,
                                                 hideDomAndScreenshotOptions: hideDomAndScreenshotOptions,
                                                 deviceType: deviceType,
+                                                popupPlacement: "topRight",
                                                 trigger: /*#__PURE__*/ 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__*/ jsx("img", {
+                                                    children: /*#__PURE__*/ jsx("img", {
                                                         alt: "",
                                                         className: "minimal-toolbar-icon",
-                                                        src: chrome.icons.settings
-                                                    }) : /*#__PURE__*/ jsx(setting, {
-                                                        className: "minimal-toolbar-icon minimal-toolbar-icon-fallback",
-                                                        width: 16,
-                                                        height: 16
+                                                        src: minimalSettingsIconSrc
                                                     })
                                                 })
                                             })

package/dist/es/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/es/component/universal-playground/index.mjs

@@ -11,6 +11,7 @@ import { PlaygroundResultView } from "../playground-result/index.mjs";
 import "./index.css";
 import avatar from "../../icons/avatar.mjs";
 import { defaultMainButtons } from "../../utils/constants.mjs";
+import { resolveProgressActionIcon } from "../../utils/progress-action-icon.mjs";
 import { PromptInput } from "../prompt-input/index.mjs";
 import shiny_text from "../shiny-text/index.mjs";
 import { createStorageProvider, detectBestStorageType } from "./providers/storage-provider.mjs";
@@ -149,9 +150,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] = useState(()=>new Set());
     const toggleProgressGroup = useCallback((groupId)=>{
         setCollapsedProgressGroups((prev)=>{
@@ -252,12 +255,14 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                                                 })
                                             }) : 'progress' === item.type ? /*#__PURE__*/ 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 ? resolveProgressActionIcon(item.actionKind, executionFlowConfig.resolveActionIcon) : null;
                                                     return /*#__PURE__*/ jsxs(Fragment, {
                                                         children: [
                                                             action && /*#__PURE__*/ jsxs("span", {
@@ -265,10 +270,10 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                                                                 children: [
                                                                     action,
                                                                     /*#__PURE__*/ jsx("span", {
-                                                                        className: `progress-status-icon ${shouldShowLoading ? 'loading' : (null == (_item_result = item.result) ? void 0 : _item_result.error) ? 'error' : 'completed'}`,
-                                                                        children: shouldShowLoading ? /*#__PURE__*/ jsx(LoadingOutlined, {
+                                                                        className: `progress-status-icon ${state}`,
+                                                                        children: 'loading' === state ? /*#__PURE__*/ jsx(LoadingOutlined, {
                                                                             spin: true
-                                                                        }) : (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) ? '✗' : '✓'
+                                                                        }) : 'error' === state ? '✗' : null !== domainIcon ? domainIcon : '✓'
                                                                     })
                                                                 ]
                                                             }),
@@ -279,7 +284,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                                                                     disabled: !shouldShowLoading
                                                                 })
                                                             }),
-                                                            (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ jsx(ErrorMessage, {
+                                                            (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) && /*#__PURE__*/ jsx(ErrorMessage, {
                                                                 error: item.result.error
                                                             })
                                                         ]

package/dist/es/hooks/useMinimalTypeGate.mjs

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+function useMinimalTypeGate(options) {
+    const { enabled, form, selectedType, onAfterReset, defaultType = 'aiAct' } = options;
+    const [hasExplicitSelection, setHasExplicitSelection] = useState(false);
+    const skipNextRestoreRef = useRef(false);
+    useEffect(()=>{
+        if (!enabled || hasExplicitSelection || !selectedType || selectedType === defaultType) return;
+        skipNextRestoreRef.current = false;
+        form.setFieldsValue({
+            type: defaultType,
+            prompt: '',
+            params: {}
+        });
+        null == onAfterReset || onAfterReset();
+    }, [
+        enabled,
+        hasExplicitSelection,
+        selectedType,
+        defaultType,
+        form,
+        onAfterReset
+    ]);
+    const markExplicitSelection = useCallback(()=>{
+        if (!enabled) return;
+        setHasExplicitSelection(true);
+    }, [
+        enabled
+    ]);
+    const skipNextRestore = useCallback(()=>{
+        skipNextRestoreRef.current = true;
+    }, []);
+    const shouldSkipRestoreOnce = useCallback(()=>{
+        if (!skipNextRestoreRef.current) return false;
+        skipNextRestoreRef.current = false;
+        return true;
+    }, []);
+    return useMemo(()=>({
+            markExplicitSelection,
+            skipNextRestore,
+            shouldSkipRestoreOnce
+        }), [
+        markExplicitSelection,
+        skipNextRestore,
+        shouldSkipRestoreOnce
+    ]);
+}
+export { useMinimalTypeGate };

package/dist/es/hooks/usePlaygroundExecution.mjs

@@ -143,6 +143,7 @@ function usePlaygroundExecution(options) {
                             id: `progress-${thisRunningId}-task-${index}`,
                             type: 'progress',
                             content: buildProgressContent(task),
+                            actionKind: typeStr(task),
                             timestamp: new Date((null == (_task_timing = task.timing) ? void 0 : _task_timing.start) || Date.now()),
                             result: task.error ? {
                                 error: formatError(task.error),