@midscene/visualizer 1.7.4 → 1.7.5-beta-20260420031652.0

package/dist/es/component/prompt-input/index.mjs

@@ -5,12 +5,16 @@ import { Button, Dropdown, Form, Input, Radio, Tooltip } from "antd";
 import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHistoryStore } from "../../store/history.mjs";
 import { extractDefaultValue, isLocateField, isZodObjectSchema, unwrapZodType } from "../../types.mjs";
+import { getPromptInputActionLabel } from "../../utils/action-label.mjs";
 import { apiMetadata, defaultMainButtons } from "../../utils/constants.mjs";
 import { hasDeviceSpecificConfig } from "../../utils/device-capabilities.mjs";
 import { actionNameForType, getPlaceholderForType, isRunButtonEnabled as playground_utils_mjs_isRunButtonEnabled } from "../../utils/playground-utils.mjs";
+import { getAvailablePromptActionTypes, getInlineStructuredFieldConfig } from "../../utils/prompt-input-utils.mjs";
 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 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,
@@ -35,10 +39,14 @@ function _object_spread(target) {
     return target;
 }
 const { TextArea } = Input;
-const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true, actionSpace, hideDomAndScreenshotOptions = false, deviceType })=>{
+const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true, actionSpace, hideDomAndScreenshotOptions = false, deviceType, chrome })=>{
     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;
+    const actionButtonLabel = getPromptInputActionLabel(selectedType, null == chrome ? void 0 : chrome.primaryActionLabel);
     const textAreaRef = useRef(null);
     const modeRadioGroupRef = useRef(null);
     const params = Form.useWatch('params', form);
@@ -51,6 +59,7 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         history,
         selectedType
     ]);
+    const skipMinimalSyncRef = useRef(false);
     const needsStructuredParams = useMemo(()=>{
         if (actionSpace) {
             const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
@@ -141,22 +150,116 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         hideDomAndScreenshotOptions,
         deviceType
     ]);
-    const availableDropdownMethods = useMemo(()=>{
-        const metadataMethods = Object.keys(apiMetadata);
-        if (!actionSpace || 0 === actionSpace.length) return metadataMethods;
-        const availableMethods = actionSpace.map((action)=>action.interfaceAlias || action.name);
-        const finalMethods = new Set();
-        metadataMethods.forEach((method)=>{
-            const methodInfo = apiMetadata[method];
-            if ((null == methodInfo ? void 0 : methodInfo.group) === 'extraction' || (null == methodInfo ? void 0 : methodInfo.group) === 'validation') finalMethods.add(method);
-            else if (availableMethods.includes(method)) finalMethods.add(method);
+    const availableDropdownMethods = useMemo(()=>getAvailablePromptActionTypes(actionSpace), [
+        actionSpace
+    ]);
+    const hiddenDropdownAPIs = useMemo(()=>availableDropdownMethods.filter((api)=>!defaultMainButtons.includes(api)), [
+        availableDropdownMethods
+    ]);
+    const handleTypeSelect = useCallback((api)=>{
+        if (isMinimalChrome) setMinimalHasExplicitTypeSelection(true);
+        form.setFieldValue('type', api);
+    }, [
+        form,
+        isMinimalChrome
+    ]);
+    const apiGroupDefinitions = useMemo(()=>[
+            {
+                key: 'interaction-group',
+                label: 'Interaction APIs',
+                match: (api)=>{
+                    var _apiMetadata_api;
+                    return (null == (_apiMetadata_api = apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'interaction';
+                }
+            },
+            {
+                key: 'extraction-group',
+                label: 'Data Extraction APIs',
+                match: (api)=>{
+                    var _apiMetadata_api;
+                    return (null == (_apiMetadata_api = apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'extraction';
+                }
+            },
+            {
+                key: 'validation-group',
+                label: 'Validation APIs',
+                match: (api)=>{
+                    var _apiMetadata_api;
+                    return (null == (_apiMetadata_api = apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'validation';
+                }
+            },
+            {
+                key: 'device-specific-group',
+                label: 'Device-Specific APIs',
+                match: (api)=>!apiMetadata[api]
+            }
+        ], []);
+    const buildApiMenuItem = useCallback((api)=>{
+        var _apiMetadata_api;
+        return {
+            key: api,
+            label: actionNameForType(api),
+            title: (null == (_apiMetadata_api = apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
+            onClick: ()=>handleTypeSelect(api)
+        };
+    }, [
+        handleTypeSelect
+    ]);
+    const hiddenApiGroupItems = useMemo(()=>{
+        const items = [];
+        for (const group of apiGroupDefinitions){
+            const apisInGroup = hiddenDropdownAPIs.filter(group.match);
+            if (0 !== apisInGroup.length) items.push({
+                key: group.key,
+                type: 'group',
+                label: group.label,
+                children: apisInGroup.map(buildApiMenuItem)
+            });
+        }
+        return items;
+    }, [
+        apiGroupDefinitions,
+        hiddenDropdownAPIs,
+        buildApiMenuItem
+    ]);
+    const actionDropdownMenu = useMemo(()=>{
+        const primaryActions = defaultMainButtons.filter((api)=>'aiAct' === api || availableDropdownMethods.includes(api));
+        const items = [];
+        if (primaryActions.length > 0) items.push({
+            key: 'primary-group',
+            type: 'group',
+            label: 'Primary APIs',
+            children: primaryActions.map(buildApiMenuItem)
         });
-        availableMethods.forEach((method)=>{
-            finalMethods.add(method);
+        items.push(...hiddenApiGroupItems);
+        return {
+            items
+        };
+    }, [
+        availableDropdownMethods,
+        buildApiMenuItem,
+        hiddenApiGroupItems
+    ]);
+    const moreApisDropdownMenu = useMemo(()=>({
+            items: hiddenApiGroupItems
+        }), [
+        hiddenApiGroupItems
+    ]);
+    useEffect(()=>{
+        if (!isMinimalChrome || minimalHasExplicitTypeSelection || !selectedType || 'aiAct' === selectedType) return;
+        skipMinimalSyncRef.current = false;
+        lastHistoryRef.current = null;
+        form.setFieldsValue({
+            type: 'aiAct',
+            prompt: '',
+            params: {}
         });
-        return Array.from(finalMethods);
+        setPromptValue('');
     }, [
-        actionSpace
+        form,
+        minimalHasExplicitTypeSelection,
+        isMinimalChrome,
+        selectedType
     ]);
     const getDefaultParams = useCallback(()=>{
         if (!needsStructuredParams || !actionSpace) return {};
@@ -179,15 +282,17 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         actionSpace
     ]);
     useEffect(()=>{
-        if (!form.getFieldValue('type') && lastSelectedType) form.setFieldValue('type', lastSelectedType);
+        if (!isMinimalChrome && !form.getFieldValue('type') && lastSelectedType) form.setFieldValue('type', lastSelectedType);
     }, [
         form,
+        isMinimalChrome,
         lastSelectedType
     ]);
     useEffect(()=>{
-        if (selectedType && selectedType !== lastSelectedType) setLastSelectedType(selectedType);
+        if (!isMinimalChrome && selectedType && selectedType !== lastSelectedType) setLastSelectedType(selectedType);
     }, [
         selectedType,
+        isMinimalChrome,
         lastSelectedType,
         setLastSelectedType
     ]);
@@ -213,6 +318,20 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         }
     }, []);
     useEffect(()=>{
+        if (skipMinimalSyncRef.current) {
+            skipMinimalSyncRef.current = false;
+            return;
+        }
+        if (isMinimalChrome) {
+            const defaultParams = getDefaultParams();
+            form.setFieldsValue({
+                prompt: '',
+                params: defaultParams
+            });
+            setPromptValue('');
+            lastHistoryRef.current = null;
+            return;
+        }
         const lastHistory = historyForSelectedType[0];
         if (lastHistory && lastHistoryRef.current && lastHistory.timestamp === lastHistoryRef.current.timestamp) return;
         if (lastHistory) {
@@ -236,7 +355,8 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         selectedType,
         historyForSelectedType,
         form,
-        getDefaultParams
+        getDefaultParams,
+        isMinimalChrome
     ]);
     useEffect(()=>{
         const timeoutId = setTimeout(()=>{
@@ -255,6 +375,8 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         promptValue
     ]);
     const handleSelectHistory = useCallback((historyItem)=>{
+        if (isMinimalChrome) setMinimalHasExplicitTypeSelection(true);
+        skipMinimalSyncRef.current = historyItem.type !== selectedType;
         form.setFieldsValue({
             prompt: historyItem.prompt,
             type: historyItem.type,
@@ -262,7 +384,9 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         });
         setPromptValue(historyItem.prompt);
     }, [
-        form
+        form,
+        isMinimalChrome,
+        selectedType
     ]);
     const handlePromptChange = useCallback((e)=>{
         const value = e.target.value;
@@ -282,6 +406,11 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         needsStructuredParams,
         actionSpace
     ]);
+    const minimalInlineFieldConfig = useMemo(()=>isMinimalChrome ? getInlineStructuredFieldConfig(actionSpace, selectedType) : null, [
+        actionSpace,
+        isMinimalChrome,
+        selectedType
+    ]);
     const isRunButtonEnabled = useMemo(()=>playground_utils_mjs_isRunButtonEnabled(runButtonEnabled, !!needsStructuredParams, params, actionSpace, selectedType, promptValue), [
         runButtonEnabled,
         needsStructuredParams,
@@ -549,6 +678,162 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         selectedType,
         stoppable
     ]);
+    const inputContent = needsAnyInput ? needsStructuredParams ? minimalInlineFieldConfig ? /*#__PURE__*/ jsx(Form.Item, {
+        name: [
+            'params',
+            minimalInlineFieldConfig.name
+        ],
+        style: {
+            margin: 0
+        },
+        children: /*#__PURE__*/ jsx(TextArea, {
+            className: "main-side-console-input-textarea",
+            disabled: !runButtonEnabled,
+            rows: 3,
+            placeholder: 'prompt' === minimalInlineFieldConfig.name ? resolvedPlaceholder : minimalInlineFieldConfig.placeholder,
+            autoFocus: true,
+            onKeyDown: handleStructuredKeyDown
+        })
+    }) : hasSingleStructuredParam ? renderStructuredParams() : /*#__PURE__*/ jsx("div", {
+        className: "structured-params-container",
+        children: renderStructuredParams()
+    }) : /*#__PURE__*/ jsx(Form.Item, {
+        name: "prompt",
+        style: {
+            margin: 0
+        },
+        children: /*#__PURE__*/ jsx(TextArea, {
+            className: "main-side-console-input-textarea",
+            disabled: !runButtonEnabled,
+            rows: 3,
+            placeholder: resolvedPlaceholder,
+            autoFocus: true,
+            onKeyDown: handleKeyDown,
+            onChange: handlePromptChange,
+            ref: textAreaRef
+        })
+    }) : /*#__PURE__*/ jsxs("div", {
+        className: "no-input-method",
+        children: [
+            'Click "Run" to execute ',
+            actionNameForType(selectedType)
+        ]
+    });
+    if (isMinimalChrome) {
+        var _chrome_icons, _chrome_icons1, _chrome_icons2, _chrome_icons3;
+        return /*#__PURE__*/ jsxs("div", {
+            className: "prompt-input-wrapper prompt-input-wrapper-minimal",
+            children: [
+                /*#__PURE__*/ jsx(Form.Item, {
+                    hidden: true,
+                    name: "type",
+                    style: {
+                        margin: 0
+                    },
+                    children: /*#__PURE__*/ jsx(Input, {})
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: `main-side-console-input minimal-main-side-console-input ${!runButtonEnabled ? 'disabled' : ''} ${loading ? 'loading' : ''}`,
+                    children: [
+                        inputContent,
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "minimal-toolbar-row",
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "minimal-toolbar-left",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Dropdown, {
+                                            menu: actionDropdownMenu,
+                                            placement: "topLeft",
+                                            trigger: [
+                                                'click'
+                                            ],
+                                            disabled: !runButtonEnabled,
+                                            overlayClassName: "more-apis-dropdown",
+                                            children: /*#__PURE__*/ jsxs("button", {
+                                                "aria-label": `Select action type (current: ${actionButtonLabel})`,
+                                                className: "minimal-action-trigger",
+                                                disabled: !runButtonEnabled,
+                                                type: "button",
+                                                children: [
+                                                    (null == chrome ? void 0 : null == (_chrome_icons = chrome.icons) ? void 0 : _chrome_icons.action) ? /*#__PURE__*/ jsx("img", {
+                                                        alt: "",
+                                                        className: "minimal-action-icon",
+                                                        src: chrome.icons.action
+                                                    }) : null,
+                                                    /*#__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", {
+                                                        alt: "",
+                                                        className: "minimal-action-chevron",
+                                                        src: chrome.icons.actionChevron
+                                                    }) : /*#__PURE__*/ jsx(DownOutlined, {
+                                                        className: "minimal-action-chevron-fallback"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(HistorySelector, {
+                                            onSelect: handleSelectHistory,
+                                            history: historyForSelectedType,
+                                            currentType: selectedType,
+                                            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", {
+                                                    alt: "",
+                                                    className: "minimal-toolbar-icon",
+                                                    src: chrome.icons.history
+                                                }) : /*#__PURE__*/ jsx(icons_history, {
+                                                    className: "minimal-toolbar-icon minimal-toolbar-icon-history minimal-toolbar-icon-fallback",
+                                                    width: 18,
+                                                    height: 18
+                                                })
+                                            })
+                                        }),
+                                        hasConfigOptions ? /*#__PURE__*/ jsx("div", {
+                                            className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
+                                            onMouseEnter: handleMouseEnter,
+                                            onMouseLeave: handleMouseLeave,
+                                            children: /*#__PURE__*/ jsx(ConfigSelector, {
+                                                enableTracking: 'In-Browser-Extension' === serviceMode,
+                                                showDeepLocateOption: showDeepLocateOption,
+                                                showDeepThinkOption: showDeepThinkOption,
+                                                showDataExtractionOptions: showDataExtractionOptions,
+                                                hideDomAndScreenshotOptions: hideDomAndScreenshotOptions,
+                                                deviceType: deviceType,
+                                                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", {
+                                                        alt: "",
+                                                        className: "minimal-toolbar-icon",
+                                                        src: chrome.icons.settings
+                                                    }) : /*#__PURE__*/ jsx(setting, {
+                                                        className: "minimal-toolbar-icon minimal-toolbar-icon-fallback",
+                                                        width: 16,
+                                                        height: 16
+                                                    })
+                                                })
+                                            })
+                                        }) : null
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "form-controller-wrapper",
+                                    children: renderActionButton()
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
     return /*#__PURE__*/ jsxs("div", {
         className: "prompt-input-wrapper",
         children: [
@@ -580,87 +865,7 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
                                 })
                             }),
                             /*#__PURE__*/ jsx(Dropdown, {
-                                menu: (()=>{
-                                    const hiddenAPIs = availableDropdownMethods.filter((api)=>!defaultMainButtons.includes(api));
-                                    const groupedItems = [];
-                                    const interactionAPIs = hiddenAPIs.filter((api)=>{
-                                        var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'interaction';
-                                    });
-                                    if (interactionAPIs.length > 0) groupedItems.push({
-                                        key: 'interaction-group',
-                                        type: 'group',
-                                        label: 'Interaction APIs',
-                                        children: interactionAPIs.map((api)=>{
-                                            var _apiMetadata_api;
-                                            return {
-                                                key: api,
-                                                label: actionNameForType(api),
-                                                title: (null == (_apiMetadata_api = apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
-                                                onClick: ()=>{
-                                                    form.setFieldValue('type', api);
-                                                }
-                                            };
-                                        })
-                                    });
-                                    const extractionAPIs = hiddenAPIs.filter((api)=>{
-                                        var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'extraction';
-                                    });
-                                    if (extractionAPIs.length > 0) groupedItems.push({
-                                        key: 'extraction-group',
-                                        type: 'group',
-                                        label: 'Data Extraction APIs',
-                                        children: extractionAPIs.map((api)=>{
-                                            var _apiMetadata_api;
-                                            return {
-                                                key: api,
-                                                label: actionNameForType(api),
-                                                title: (null == (_apiMetadata_api = apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
-                                                onClick: ()=>{
-                                                    form.setFieldValue('type', api);
-                                                }
-                                            };
-                                        })
-                                    });
-                                    const validationAPIs = hiddenAPIs.filter((api)=>{
-                                        var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'validation';
-                                    });
-                                    if (validationAPIs.length > 0) groupedItems.push({
-                                        key: 'validation-group',
-                                        type: 'group',
-                                        label: 'Validation APIs',
-                                        children: validationAPIs.map((api)=>{
-                                            var _apiMetadata_api;
-                                            return {
-                                                key: api,
-                                                label: actionNameForType(api),
-                                                title: (null == (_apiMetadata_api = apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
-                                                onClick: ()=>{
-                                                    form.setFieldValue('type', api);
-                                                }
-                                            };
-                                        })
-                                    });
-                                    const deviceSpecificAPIs = hiddenAPIs.filter((api)=>!apiMetadata[api]);
-                                    if (deviceSpecificAPIs.length > 0) groupedItems.push({
-                                        key: 'device-specific-group',
-                                        type: 'group',
-                                        label: 'Device-Specific APIs',
-                                        children: deviceSpecificAPIs.map((api)=>({
-                                                key: api,
-                                                label: actionNameForType(api),
-                                                title: '',
-                                                onClick: ()=>{
-                                                    form.setFieldValue('type', api);
-                                                }
-                                            }))
-                                    });
-                                    return {
-                                        items: groupedItems
-                                    };
-                                })(),
+                                menu: moreApisDropdownMenu,
                                 placement: "bottomLeft",
                                 trigger: [
                                     'click'
@@ -710,37 +915,7 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
             /*#__PURE__*/ jsxs("div", {
                 className: `main-side-console-input ${!runButtonEnabled ? 'disabled' : ''} ${loading ? 'loading' : ''}`,
                 children: [
-                    needsAnyInput ? needsStructuredParams ? hasSingleStructuredParam ? renderStructuredParams() : /*#__PURE__*/ jsx("div", {
-                        className: "structured-params-container",
-                        children: renderStructuredParams()
-                    }) : /*#__PURE__*/ jsx(Form.Item, {
-                        name: "prompt",
-                        style: {
-                            margin: 0
-                        },
-                        children: /*#__PURE__*/ jsx(TextArea, {
-                            className: "main-side-console-input-textarea",
-                            disabled: !runButtonEnabled,
-                            rows: 3,
-                            placeholder: placeholder,
-                            autoFocus: true,
-                            onKeyDown: handleKeyDown,
-                            onChange: handlePromptChange,
-                            ref: textAreaRef
-                        })
-                    }) : /*#__PURE__*/ jsxs("div", {
-                        className: "no-input-method",
-                        style: {
-                            padding: '20px',
-                            textAlign: 'center',
-                            color: '#666',
-                            fontSize: '14px'
-                        },
-                        children: [
-                            'Click "Run" to execute ',
-                            actionNameForType(selectedType)
-                        ]
-                    }),
+                    inputContent,
                     /*#__PURE__*/ jsx("div", {
                         className: "form-controller-wrapper",
                         children: renderActionButton()

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

@@ -1,8 +1,9 @@
 .playground-container {
-  background: #fff;
-  flex-direction: column;
+  background: var(--midscene-surface, #fff);
   width: 100%;
   height: 100vh;
+  color: var(--midscene-text-primary, inherit);
+  flex-direction: column;
   display: flex;
   position: relative;
 }
@@ -90,8 +91,8 @@
 
 .playground-container .middle-dialog-area .scroll-to-bottom-button {
   z-index: 10;
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, .08);
+  background: var(--midscene-surface-elevated, #fff);
+  border: 1px solid var(--midscene-border-strong, rgba(0, 0, 0, .08));
   position: absolute;
   bottom: 10px;
   right: 0;
@@ -118,9 +119,9 @@
 }
 
 .playground-container .user-message-container .user-message-bubble {
-  color: rgba(0, 0, 0, .85);
+  background: var(--midscene-surface-muted, #f2f4f7);
+  color: var(--midscene-text-primary, rgba(0, 0, 0, .85));
   text-align: left;
-  background: #f2f4f7;
   border-radius: 12px;
   max-width: 80%;
   padding: 12px 16px;
@@ -130,8 +131,8 @@
 }
 
 .playground-container .progress-action-item {
-  color: #000;
-  background: #f2f4f7;
+  background: var(--midscene-surface-muted, #f2f4f7);
+  color: var(--midscene-text-primary, #000);
   border-radius: 8px;
   justify-content: space-between;
   height: 36px;
@@ -185,12 +186,12 @@
 }
 
 .playground-container .system-message-container .system-message-content {
-  color: rgba(0, 0, 0, .85);
+  color: var(--midscene-text-primary, rgba(0, 0, 0, .85));
   font-size: 14px;
 }
 
 .playground-container .system-message-container .system-message-content .system-message-text {
-  color: rgba(0, 0, 0, .85);
+  color: var(--midscene-text-primary, rgba(0, 0, 0, .85));
   font-size: 14px;
   line-height: 25px;
 }
@@ -237,7 +238,7 @@
 }
 
 .playground-container .new-conversation-separator .separator-line {
-  background-color: #e8e8e8;
+  background-color: var(--midscene-divider, #e8e8e8);
   height: 1px;
   position: absolute;
   top: 50%;
@@ -246,20 +247,51 @@
 }
 
 .playground-container .new-conversation-separator .separator-text-container {
+  background-color: var(--midscene-surface, #fff);
   z-index: 1;
-  background-color: #fff;
   padding: 0 16px;
   position: relative;
 }
 
 .playground-container .new-conversation-separator .separator-text-container .separator-text {
-  color: #999;
-  background-color: #fff;
+  color: var(--midscene-text-tertiary, #999);
+  background-color: var(--midscene-surface, #fff);
   font-size: 12px;
 }
 
+.playground-container .progress-group-toggle {
+  cursor: pointer;
+  color: var(--midscene-text-tertiary, rgba(0, 0, 0, .5));
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  background: none;
+  border: 0;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 15px;
+  display: inline-flex;
+}
+
+.playground-container .progress-group-toggle:hover {
+  color: var(--midscene-text-secondary, rgba(0, 0, 0, .7));
+}
+
+.playground-container .progress-group-toggle .progress-group-toggle-chevron {
+  font-size: 10px;
+  transition: transform .15s ease-out;
+}
+
+.playground-container .progress-group-toggle.is-collapsed .progress-group-toggle-chevron {
+  transform: rotate(180deg);
+}
+
 .playground-container .bottom-input-section {
-  background-color: #fff;
+  background-color: var(--midscene-surface, #fff);
   flex-shrink: 0;
   padding: 16px 0 0;
 }