@midscene/visualizer 0.28.7-beta-20250912013851.0 → 0.28.7-beta-20250912113807.0

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

@@ -1,9 +1,26 @@
+.history-modal-overlay {
+  z-index: 1000;
+  background: rgba(0, 0, 0, .45);
+  justify-content: stretch;
+  align-items: flex-end;
+  display: flex;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 .history-modal-container {
+  z-index: 1001;
+  background: #fff;
   border-radius: 12px 12px 0 0;
   flex-direction: column;
-  height: 70vh;
+  width: 100%;
+  height: 400px;
   display: flex;
   overflow: hidden;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
 }
 
 .history-modal-container .history-modal-header {
@@ -114,19 +131,3 @@
   padding: 40px 20px;
 }
 
-.ant-modal-wrap .ant-modal-content {
-  animation: .3s cubic-bezier(.4, 0, .2, 1) forwards slideUpFromBottom !important;
-}
-
-@keyframes slideUpFromBottom {
-  0% {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-

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

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button, Input, Modal, Typography } from "antd";
+import { Button, Input, Typography } from "antd";
 import { useMemo, useState } from "react";
 import icons_close from "../../icons/close.mjs";
 import icons_history from "../../icons/history.mjs";
@@ -63,50 +63,12 @@ const HistorySelector = (param)=>{
                     height: 24
                 })
             }),
-            /*#__PURE__*/ jsx(Modal, {
-                open: isModalOpen,
-                onCancel: ()=>setIsModalOpen(false),
-                footer: null,
-                width: "100%",
-                closable: false,
-                centered: false,
-                transitionName: "",
-                maskTransitionName: "",
-                style: {
-                    margin: 0,
-                    padding: 0,
-                    maxWidth: 'none',
-                    top: 'auto',
-                    bottom: 0
-                },
-                styles: {
-                    wrapper: {
-                        alignItems: 'flex-end',
-                        justifyContent: 'center',
-                        paddingBottom: 0,
-                        display: 'flex'
-                    },
-                    body: {
-                        height: '70vh',
-                        padding: 0,
-                        margin: 0
-                    },
-                    content: {
-                        height: '70vh',
-                        borderRadius: '12px 12px 0 0',
-                        margin: 0,
-                        padding: 0,
-                        marginBottom: 0,
-                        position: 'fixed',
-                        bottom: 0,
-                        left: 0,
-                        right: 0
-                    }
-                },
-                maskClosable: true,
-                destroyOnClose: true,
+            isModalOpen && /*#__PURE__*/ jsx("div", {
+                className: "history-modal-overlay",
+                onClick: ()=>setIsModalOpen(false),
                 children: /*#__PURE__*/ jsxs("div", {
                     className: "history-modal-container",
+                    onClick: (e)=>e.stopPropagation(),
                     children: [
                         /*#__PURE__*/ jsxs("div", {
                             className: "history-modal-header",

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

@@ -1,6 +1,5 @@
 .result-wrapper {
   justify-content: center;
-  align-items: center;
   height: 100%;
   margin: 4px 0;
   display: flex;
@@ -40,22 +39,48 @@
 .prompt-input-wrapper .mode-radio-group-wrapper {
   justify-content: space-between;
   align-items: center;
+  gap: 8px;
   display: flex;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
   align-items: center;
+  gap: 8px;
+  width: 350px;
+  min-width: 350px;
+  max-width: 350px;
   height: 100%;
   display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
+  display: none;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
+  flex-shrink: 0;
+  margin: 0 !important;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item .ant-radio-group {
+  flex-wrap: nowrap;
+  gap: 8px;
+  display: flex;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
   height: 24px;
   box-shadow: none;
+  white-space: nowrap;
   background-color: #f7f7f7;
   border: none;
   border-radius: 11px;
-  margin-right: 8px;
+  flex-shrink: 0;
+  margin-right: 0;
   padding: 0 8px;
   font-size: 12px;
   line-height: 24px;
@@ -79,12 +104,18 @@
   color: #fff;
 }
 
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-dropdown-trigger {
+  flex-shrink: 0;
+}
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button {
   height: 24px;
   box-shadow: none;
+  white-space: nowrap;
   background-color: #f7f7f7;
   border: none;
   border-radius: 11px;
+  flex-shrink: 0;
   align-items: center;
   gap: 2px;
   max-width: 160px;
@@ -114,6 +145,7 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
+  flex-shrink: 0;
   align-items: center;
   display: flex;
 }

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

@@ -1,6 +1,5 @@
 .result-wrapper {
   justify-content: center;
-  align-items: center;
   height: 100%;
   margin: 4px 0;
   display: flex;

package/dist/es/component/playground-result/index.mjs

@@ -54,8 +54,7 @@ const PlaygroundResultView = (param)=>{
             display: 'flex',
             flexDirection: 'column',
             flex: '1 1 auto',
-            justifyContent: 'center',
-            alignItems: 'center'
+            justifyContent: 'center'
         },
         children: resultDataToShow
     });

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

@@ -5,22 +5,48 @@
 .prompt-input-wrapper .mode-radio-group-wrapper {
   justify-content: space-between;
   align-items: center;
+  gap: 8px;
   display: flex;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
   align-items: center;
+  gap: 8px;
+  width: 350px;
+  min-width: 350px;
+  max-width: 350px;
   height: 100%;
   display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
+  display: none;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
+  flex-shrink: 0;
+  margin: 0 !important;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item .ant-radio-group {
+  flex-wrap: nowrap;
+  gap: 8px;
+  display: flex;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
   height: 24px;
   box-shadow: none;
+  white-space: nowrap;
   background-color: #f7f7f7;
   border: none;
   border-radius: 11px;
-  margin-right: 8px;
+  flex-shrink: 0;
+  margin-right: 0;
   padding: 0 8px;
   font-size: 12px;
   line-height: 24px;
@@ -44,12 +70,18 @@
   color: #fff;
 }
 
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-dropdown-trigger {
+  flex-shrink: 0;
+}
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button {
   height: 24px;
   box-shadow: none;
+  white-space: nowrap;
   background-color: #f7f7f7;
   border: none;
   border-radius: 11px;
+  flex-shrink: 0;
   align-items: center;
   gap: 2px;
   max-width: 160px;
@@ -79,6 +111,7 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
+  flex-shrink: 0;
   align-items: center;
   display: flex;
 }

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

@@ -4,13 +4,13 @@
   width: 100%;
   height: 100vh;
   display: flex;
+  position: relative;
 }
 
 .playground-container .command-form {
   flex-direction: column;
   width: 100%;
   height: 100%;
-  padding: 0 12px;
   display: flex;
 }
 
@@ -119,7 +119,7 @@
 
 .playground-container .user-message-container .user-message-bubble {
   color: rgba(0, 0, 0, .85);
-  text-align: center;
+  text-align: left;
   background: #f2f4f7;
   border-radius: 12px;
   max-width: 80%;

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

@@ -11,7 +11,12 @@ import { PlaygroundResultView } from "../playground-result/index.mjs";
 import "./index.css";
 import avatar from "../../icons/avatar.mjs";
 import { PromptInput } from "../prompt-input/index.mjs";
+import { LocalStorageProvider } from "./providers/storage-provider.mjs";
 const { Text } = Typography;
+function getSDKId(sdk) {
+    if (sdk.id && 'string' == typeof sdk.id) return `agent-${sdk.id}`;
+    return 'playground-default';
+}
 function ErrorMessage(param) {
     let { error } = param;
     if (!error) return null;
@@ -36,9 +41,13 @@ function UniversalPlayground(param) {
     let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true } = param;
     const [form] = Form.useForm();
     const { deepThink, screenshotIncluded, domIncluded, config } = useEnvConfig();
-    const enablePersistence = false !== componentConfig.enablePersistence;
-    const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, handleScrollToBottom } = usePlaygroundState(playgroundSDK, storage, contextProvider, enablePersistence);
-    const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
+    const effectiveStorage = (()=>{
+        if (storage) return storage;
+        const namespace = componentConfig.storageNamespace || getSDKId(playgroundSDK);
+        return new LocalStorageProvider(namespace);
+    })();
+    const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, handleScrollToBottom } = usePlaygroundState(playgroundSDK, effectiveStorage, contextProvider);
+    const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
     useEffect(()=>{
         const completeConfig = {
             ...config,
@@ -46,7 +55,7 @@ function UniversalPlayground(param) {
             screenshotIncluded,
             domIncluded
         };
-        if (playgroundSDK.overrideConfig) playgroundSDK.overrideConfig(completeConfig).catch((error)=>{
+        if (null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) playgroundSDK.overrideConfig(completeConfig).catch((error)=>{
             console.error('Failed to override SDK config:', error);
         });
     }, [
@@ -245,7 +254,7 @@ function UniversalPlayground(param) {
                 /*#__PURE__*/ jsxs("div", {
                     className: "bottom-input-section",
                     children: [
-                        !componentConfig.serverMode && /*#__PURE__*/ jsx(EnvConfigReminder, {}),
+                        componentConfig.showEnvConfigReminder ? /*#__PURE__*/ jsx(EnvConfigReminder, {}) : null,
                         /*#__PURE__*/ jsx(PromptInput, {
                             runButtonEnabled: runButtonEnabled,
                             form: form,

package/dist/es/hooks/usePlaygroundExecution.mjs

@@ -7,6 +7,7 @@ const noReplayAPIs = [
 ];
 function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
     const handleRun = useCallback(async (value)=>{
+        if (!playgroundSDK) return void console.warn('PlaygroundSDK is not available');
         const thisRunningId = Date.now();
         const actionType = value.type;
         const displayContent = `${value.type}: ${value.prompt || JSON.stringify(value.params)}`;
@@ -39,18 +40,23 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         try {
             currentRunningIdRef.current = thisRunningId;
             interruptedFlagRef.current[thisRunningId] = false;
+            if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate(()=>{});
             if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate((tip)=>{
                 if (interruptedFlagRef.current[thisRunningId]) return;
-                const progressItem = {
-                    id: `progress-${thisRunningId}-${Date.now()}`,
-                    type: 'progress',
-                    content: tip,
-                    timestamp: new Date()
-                };
-                setInfoList((prev)=>[
+                setInfoList((prev)=>{
+                    const lastItem = prev[prev.length - 1];
+                    if (lastItem && 'progress' === lastItem.type && lastItem.content === tip) return prev;
+                    const progressItem = {
+                        id: `progress-${thisRunningId}-${Date.now()}`,
+                        type: 'progress',
+                        content: tip,
+                        timestamp: new Date()
+                    };
+                    return [
                         ...prev,
                         progressItem
-                    ]);
+                    ];
+                });
             });
             result.result = await playgroundSDK.executeAction(actionType, value, {
                 requestId: thisRunningId.toString()
@@ -128,10 +134,11 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
     ]);
     const handleStop = useCallback(async ()=>{
         const thisRunningId = currentRunningIdRef.current;
-        if (thisRunningId && playgroundSDK.cancelExecution) try {
+        if (thisRunningId && playgroundSDK && playgroundSDK.cancelExecution) try {
             await playgroundSDK.cancelExecution(thisRunningId.toString());
             interruptedFlagRef.current[thisRunningId] = true;
             setLoading(false);
+            if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate(()=>{});
             setInfoList((prev)=>prev.map((item)=>item.id === `system-${thisRunningId}` && item.loading ? {
                         ...item,
                         content: 'Operation stopped',
@@ -158,7 +165,7 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         setLoading,
         setInfoList
     ]);
-    const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK.cancelExecution;
+    const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK && !!playgroundSDK.cancelExecution;
     return {
         handleRun,
         handleStop,

package/dist/es/hooks/usePlaygroundState.mjs

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { WELCOME_MESSAGE_TEMPLATE } from "../utils/constants.mjs";
 function usePlaygroundState(playgroundSDK, storage, contextProvider) {
-    let enablePersistence = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : true;
     const [loading, setLoading] = useState(false);
     const [infoList, setInfoList] = useState([]);
     const [actionSpace, setActionSpace] = useState([]);
@@ -20,7 +19,7 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
                 id: 'welcome',
                 timestamp: new Date()
             };
-            if (enablePersistence && (null == storage ? void 0 : storage.loadMessages)) try {
+            if (null == storage ? void 0 : storage.loadMessages) try {
                 const storedMessages = await storage.loadMessages();
                 const hasWelcomeMessage = storedMessages.some((msg)=>'welcome' === msg.id);
                 hasWelcomeMessage ? setInfoList(storedMessages) : setInfoList([
@@ -40,13 +39,12 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
         if (0 === infoList.length) initializeMessages();
     }, []);
     useEffect(()=>{
-        if (enablePersistence && (null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
+        if ((null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
             console.error('Failed to save messages:', error);
         });
     }, [
         infoList,
-        storage,
-        enablePersistence
+        storage
     ]);
     useEffect(()=>{
         if (!(null == contextProvider ? void 0 : contextProvider.getUIContext) || uiContextPreview) return;
@@ -62,6 +60,7 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
             setActionSpaceLoading(true);
             try {
                 var _contextProvider_getUIContext;
+                if (!playgroundSDK) return void setActionSpace([]);
                 const context = uiContextPreview || await (null == contextProvider ? void 0 : null == (_contextProvider_getUIContext = contextProvider.getUIContext) ? void 0 : _contextProvider_getUIContext.call(contextProvider));
                 const space = await playgroundSDK.getActionSpace(context);
                 setActionSpace(space || []);
@@ -135,14 +134,13 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
         setInfoList([
             welcomeMessage
         ]);
-        if (enablePersistence && (null == storage ? void 0 : storage.clearMessages)) try {
+        if (null == storage ? void 0 : storage.clearMessages) try {
             await storage.clearMessages();
         } catch (error) {
             console.error('Failed to clear stored messages:', error);
         }
     }, [
-        storage,
-        enablePersistence
+        storage
     ]);
     const refreshContext = useCallback(async ()=>{
         if (null == contextProvider ? void 0 : contextProvider.refreshContext) try {

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

@@ -1,9 +1,26 @@
+.history-modal-overlay {
+  z-index: 1000;
+  background: rgba(0, 0, 0, .45);
+  justify-content: stretch;
+  align-items: flex-end;
+  display: flex;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 .history-modal-container {
+  z-index: 1001;
+  background: #fff;
   border-radius: 12px 12px 0 0;
   flex-direction: column;
-  height: 70vh;
+  width: 100%;
+  height: 400px;
   display: flex;
   overflow: hidden;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
 }
 
 .history-modal-container .history-modal-header {
@@ -114,19 +131,3 @@
   padding: 40px 20px;
 }
 
-.ant-modal-wrap .ant-modal-content {
-  animation: .3s cubic-bezier(.4, 0, .2, 1) forwards slideUpFromBottom !important;
-}
-
-@keyframes slideUpFromBottom {
-  0% {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-

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

@@ -103,50 +103,12 @@ const HistorySelector = (param)=>{
                     height: 24
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Modal, {
-                open: isModalOpen,
-                onCancel: ()=>setIsModalOpen(false),
-                footer: null,
-                width: "100%",
-                closable: false,
-                centered: false,
-                transitionName: "",
-                maskTransitionName: "",
-                style: {
-                    margin: 0,
-                    padding: 0,
-                    maxWidth: 'none',
-                    top: 'auto',
-                    bottom: 0
-                },
-                styles: {
-                    wrapper: {
-                        alignItems: 'flex-end',
-                        justifyContent: 'center',
-                        paddingBottom: 0,
-                        display: 'flex'
-                    },
-                    body: {
-                        height: '70vh',
-                        padding: 0,
-                        margin: 0
-                    },
-                    content: {
-                        height: '70vh',
-                        borderRadius: '12px 12px 0 0',
-                        margin: 0,
-                        padding: 0,
-                        marginBottom: 0,
-                        position: 'fixed',
-                        bottom: 0,
-                        left: 0,
-                        right: 0
-                    }
-                },
-                maskClosable: true,
-                destroyOnClose: true,
+            isModalOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "history-modal-overlay",
+                onClick: ()=>setIsModalOpen(false),
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     className: "history-modal-container",
+                    onClick: (e)=>e.stopPropagation(),
                     children: [
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                             className: "history-modal-header",

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

@@ -1,6 +1,5 @@
 .result-wrapper {
   justify-content: center;
-  align-items: center;
   height: 100%;
   margin: 4px 0;
   display: flex;
@@ -40,22 +39,48 @@
 .prompt-input-wrapper .mode-radio-group-wrapper {
   justify-content: space-between;
   align-items: center;
+  gap: 8px;
   display: flex;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
   align-items: center;
+  gap: 8px;
+  width: 350px;
+  min-width: 350px;
+  max-width: 350px;
   height: 100%;
   display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
+  display: none;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
+  flex-shrink: 0;
+  margin: 0 !important;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item .ant-radio-group {
+  flex-wrap: nowrap;
+  gap: 8px;
+  display: flex;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
   height: 24px;
   box-shadow: none;
+  white-space: nowrap;
   background-color: #f7f7f7;
   border: none;
   border-radius: 11px;
-  margin-right: 8px;
+  flex-shrink: 0;
+  margin-right: 0;
   padding: 0 8px;
   font-size: 12px;
   line-height: 24px;
@@ -79,12 +104,18 @@
   color: #fff;
 }
 
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-dropdown-trigger {
+  flex-shrink: 0;
+}
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button {
   height: 24px;
   box-shadow: none;
+  white-space: nowrap;
   background-color: #f7f7f7;
   border: none;
   border-radius: 11px;
+  flex-shrink: 0;
   align-items: center;
   gap: 2px;
   max-width: 160px;
@@ -114,6 +145,7 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
+  flex-shrink: 0;
   align-items: center;
   display: flex;
 }

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

@@ -1,6 +1,5 @@
 .result-wrapper {
   justify-content: center;
-  align-items: center;
   height: 100%;
   margin: 4px 0;
   display: flex;

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

@@ -92,8 +92,7 @@ const PlaygroundResultView = (param)=>{
             display: 'flex',
             flexDirection: 'column',
             flex: '1 1 auto',
-            justifyContent: 'center',
-            alignItems: 'center'
+            justifyContent: 'center'
         },
         children: resultDataToShow
     });

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

@@ -5,22 +5,48 @@
 .prompt-input-wrapper .mode-radio-group-wrapper {
   justify-content: space-between;
   align-items: center;
+  gap: 8px;
   display: flex;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
   align-items: center;
+  gap: 8px;
+  width: 350px;
+  min-width: 350px;
+  max-width: 350px;
   height: 100%;
   display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
+  display: none;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
+  flex-shrink: 0;
+  margin: 0 !important;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item .ant-radio-group {
+  flex-wrap: nowrap;
+  gap: 8px;
+  display: flex;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
   height: 24px;
   box-shadow: none;
+  white-space: nowrap;
   background-color: #f7f7f7;
   border: none;
   border-radius: 11px;
-  margin-right: 8px;
+  flex-shrink: 0;
+  margin-right: 0;
   padding: 0 8px;
   font-size: 12px;
   line-height: 24px;
@@ -44,12 +70,18 @@
   color: #fff;
 }
 
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-dropdown-trigger {
+  flex-shrink: 0;
+}
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button {
   height: 24px;
   box-shadow: none;
+  white-space: nowrap;
   background-color: #f7f7f7;
   border: none;
   border-radius: 11px;
+  flex-shrink: 0;
   align-items: center;
   gap: 2px;
   max-width: 160px;
@@ -79,6 +111,7 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
+  flex-shrink: 0;
   align-items: center;
   display: flex;
 }

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

@@ -4,13 +4,13 @@
   width: 100%;
   height: 100vh;
   display: flex;
+  position: relative;
 }
 
 .playground-container .command-form {
   flex-direction: column;
   width: 100%;
   height: 100%;
-  padding: 0 12px;
   display: flex;
 }
 
@@ -119,7 +119,7 @@
 
 .playground-container .user-message-container .user-message-bubble {
   color: rgba(0, 0, 0, .85);
-  text-align: center;
+  text-align: left;
   background: #f2f4f7;
   border-radius: 12px;
   max-width: 80%;

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

@@ -51,7 +51,12 @@ require("./index.css");
 const avatar_js_namespaceObject = require("../../icons/avatar.js");
 var avatar_js_default = /*#__PURE__*/ __webpack_require__.n(avatar_js_namespaceObject);
 const external_prompt_input_index_js_namespaceObject = require("../prompt-input/index.js");
+const storage_provider_js_namespaceObject = require("./providers/storage-provider.js");
 const { Text } = external_antd_namespaceObject.Typography;
+function getSDKId(sdk) {
+    if (sdk.id && 'string' == typeof sdk.id) return `agent-${sdk.id}`;
+    return 'playground-default';
+}
 function ErrorMessage(param) {
     let { error } = param;
     if (!error) return null;
@@ -76,9 +81,13 @@ function UniversalPlayground(param) {
     let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true } = param;
     const [form] = external_antd_namespaceObject.Form.useForm();
     const { deepThink, screenshotIncluded, domIncluded, config } = (0, store_js_namespaceObject.useEnvConfig)();
-    const enablePersistence = false !== componentConfig.enablePersistence;
-    const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, handleScrollToBottom } = (0, usePlaygroundState_js_namespaceObject.usePlaygroundState)(playgroundSDK, storage, contextProvider, enablePersistence);
-    const { handleRun: executeAction, handleStop, canStop } = (0, usePlaygroundExecution_js_namespaceObject.usePlaygroundExecution)(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
+    const effectiveStorage = (()=>{
+        if (storage) return storage;
+        const namespace = componentConfig.storageNamespace || getSDKId(playgroundSDK);
+        return new storage_provider_js_namespaceObject.LocalStorageProvider(namespace);
+    })();
+    const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, handleScrollToBottom } = (0, usePlaygroundState_js_namespaceObject.usePlaygroundState)(playgroundSDK, effectiveStorage, contextProvider);
+    const { handleRun: executeAction, handleStop, canStop } = (0, usePlaygroundExecution_js_namespaceObject.usePlaygroundExecution)(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const completeConfig = {
             ...config,
@@ -86,7 +95,7 @@ function UniversalPlayground(param) {
             screenshotIncluded,
             domIncluded
         };
-        if (playgroundSDK.overrideConfig) playgroundSDK.overrideConfig(completeConfig).catch((error)=>{
+        if (null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) playgroundSDK.overrideConfig(completeConfig).catch((error)=>{
             console.error('Failed to override SDK config:', error);
         });
     }, [
@@ -285,7 +294,7 @@ function UniversalPlayground(param) {
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     className: "bottom-input-section",
                     children: [
-                        !componentConfig.serverMode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_env_config_reminder_index_js_namespaceObject.EnvConfigReminder, {}),
+                        componentConfig.showEnvConfigReminder ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_env_config_reminder_index_js_namespaceObject.EnvConfigReminder, {}) : null,
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_prompt_input_index_js_namespaceObject.PromptInput, {
                             runButtonEnabled: runButtonEnabled,
                             form: form,

package/dist/lib/hooks/usePlaygroundExecution.js

@@ -35,6 +35,7 @@ const noReplayAPIs = [
 ];
 function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
     const handleRun = (0, external_react_namespaceObject.useCallback)(async (value)=>{
+        if (!playgroundSDK) return void console.warn('PlaygroundSDK is not available');
         const thisRunningId = Date.now();
         const actionType = value.type;
         const displayContent = `${value.type}: ${value.prompt || JSON.stringify(value.params)}`;
@@ -67,18 +68,23 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         try {
             currentRunningIdRef.current = thisRunningId;
             interruptedFlagRef.current[thisRunningId] = false;
+            if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate(()=>{});
             if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate((tip)=>{
                 if (interruptedFlagRef.current[thisRunningId]) return;
-                const progressItem = {
-                    id: `progress-${thisRunningId}-${Date.now()}`,
-                    type: 'progress',
-                    content: tip,
-                    timestamp: new Date()
-                };
-                setInfoList((prev)=>[
+                setInfoList((prev)=>{
+                    const lastItem = prev[prev.length - 1];
+                    if (lastItem && 'progress' === lastItem.type && lastItem.content === tip) return prev;
+                    const progressItem = {
+                        id: `progress-${thisRunningId}-${Date.now()}`,
+                        type: 'progress',
+                        content: tip,
+                        timestamp: new Date()
+                    };
+                    return [
                         ...prev,
                         progressItem
-                    ]);
+                    ];
+                });
             });
             result.result = await playgroundSDK.executeAction(actionType, value, {
                 requestId: thisRunningId.toString()
@@ -156,10 +162,11 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
     ]);
     const handleStop = (0, external_react_namespaceObject.useCallback)(async ()=>{
         const thisRunningId = currentRunningIdRef.current;
-        if (thisRunningId && playgroundSDK.cancelExecution) try {
+        if (thisRunningId && playgroundSDK && playgroundSDK.cancelExecution) try {
             await playgroundSDK.cancelExecution(thisRunningId.toString());
             interruptedFlagRef.current[thisRunningId] = true;
             setLoading(false);
+            if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate(()=>{});
             setInfoList((prev)=>prev.map((item)=>item.id === `system-${thisRunningId}` && item.loading ? {
                         ...item,
                         content: 'Operation stopped',
@@ -186,7 +193,7 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         setLoading,
         setInfoList
     ]);
-    const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK.cancelExecution;
+    const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK && !!playgroundSDK.cancelExecution;
     return {
         handleRun,
         handleStop,

package/dist/lib/hooks/usePlaygroundState.js

@@ -29,7 +29,6 @@ __webpack_require__.d(__webpack_exports__, {
 const external_react_namespaceObject = require("react");
 const constants_js_namespaceObject = require("../utils/constants.js");
 function usePlaygroundState(playgroundSDK, storage, contextProvider) {
-    let enablePersistence = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : true;
     const [loading, setLoading] = (0, external_react_namespaceObject.useState)(false);
     const [infoList, setInfoList] = (0, external_react_namespaceObject.useState)([]);
     const [actionSpace, setActionSpace] = (0, external_react_namespaceObject.useState)([]);
@@ -48,7 +47,7 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
                 id: 'welcome',
                 timestamp: new Date()
             };
-            if (enablePersistence && (null == storage ? void 0 : storage.loadMessages)) try {
+            if (null == storage ? void 0 : storage.loadMessages) try {
                 const storedMessages = await storage.loadMessages();
                 const hasWelcomeMessage = storedMessages.some((msg)=>'welcome' === msg.id);
                 hasWelcomeMessage ? setInfoList(storedMessages) : setInfoList([
@@ -68,13 +67,12 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
         if (0 === infoList.length) initializeMessages();
     }, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (enablePersistence && (null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
+        if ((null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
             console.error('Failed to save messages:', error);
         });
     }, [
         infoList,
-        storage,
-        enablePersistence
+        storage
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (!(null == contextProvider ? void 0 : contextProvider.getUIContext) || uiContextPreview) return;
@@ -90,6 +88,7 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
             setActionSpaceLoading(true);
             try {
                 var _contextProvider_getUIContext;
+                if (!playgroundSDK) return void setActionSpace([]);
                 const context = uiContextPreview || await (null == contextProvider ? void 0 : null == (_contextProvider_getUIContext = contextProvider.getUIContext) ? void 0 : _contextProvider_getUIContext.call(contextProvider));
                 const space = await playgroundSDK.getActionSpace(context);
                 setActionSpace(space || []);
@@ -163,14 +162,13 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
         setInfoList([
             welcomeMessage
         ]);
-        if (enablePersistence && (null == storage ? void 0 : storage.clearMessages)) try {
+        if (null == storage ? void 0 : storage.clearMessages) try {
             await storage.clearMessages();
         } catch (error) {
             console.error('Failed to clear stored messages:', error);
         }
     }, [
-        storage,
-        enablePersistence
+        storage
     ]);
     const refreshContext = (0, external_react_namespaceObject.useCallback)(async ()=>{
         if (null == contextProvider ? void 0 : contextProvider.refreshContext) try {

package/dist/types/hooks/usePlaygroundExecution.d.ts

@@ -3,7 +3,7 @@ import type { FormValue, InfoListItem, PlaygroundSDKLike, StorageProvider } from
 /**
  * Hook for handling playground execution logic
  */
-export declare function usePlaygroundExecution(playgroundSDK: PlaygroundSDKLike, storage: StorageProvider | undefined, actionSpace: DeviceAction<unknown>[], loading: boolean, setLoading: (loading: boolean) => void, infoList: InfoListItem[], setInfoList: React.Dispatch<React.SetStateAction<InfoListItem[]>>, replayCounter: number, setReplayCounter: React.Dispatch<React.SetStateAction<number>>, verticalMode: boolean, currentRunningIdRef: React.MutableRefObject<number | null>, interruptedFlagRef: React.MutableRefObject<Record<number, boolean>>): {
+export declare function usePlaygroundExecution(playgroundSDK: PlaygroundSDKLike | null, storage: StorageProvider | undefined, actionSpace: DeviceAction<unknown>[], loading: boolean, setLoading: (loading: boolean) => void, infoList: InfoListItem[], setInfoList: React.Dispatch<React.SetStateAction<InfoListItem[]>>, replayCounter: number, setReplayCounter: React.Dispatch<React.SetStateAction<number>>, verticalMode: boolean, currentRunningIdRef: React.MutableRefObject<number | null>, interruptedFlagRef: React.MutableRefObject<Record<number, boolean>>): {
     handleRun: (value: FormValue) => Promise<void>;
     handleStop: () => Promise<void>;
     canStop: boolean;

package/dist/types/hooks/usePlaygroundState.d.ts

@@ -3,7 +3,7 @@ import type { ContextProvider, InfoListItem, PlaygroundSDKLike, StorageProvider
 /**
  * Hook for managing playground state
  */
-export declare function usePlaygroundState(playgroundSDK: PlaygroundSDKLike, storage?: StorageProvider, contextProvider?: ContextProvider, enablePersistence?: boolean): {
+export declare function usePlaygroundState(playgroundSDK: PlaygroundSDKLike | null, storage?: StorageProvider, contextProvider?: ContextProvider): {
     loading: boolean;
     setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     infoList: InfoListItem[];

package/dist/types/types.d.ts

@@ -117,6 +117,7 @@ export interface PlaygroundSDKLike {
     cancelExecution?(requestId: string): Promise<void>;
     overrideConfig?(config: any): Promise<void>;
     checkStatus?(): Promise<boolean>;
+    id?: string;
 }
 export interface StorageProvider {
     saveMessages?(messages: InfoListItem[]): Promise<void>;
@@ -142,11 +143,12 @@ export interface InfoListItem {
 }
 export interface UniversalPlaygroundConfig {
     showContextPreview?: boolean;
-    enablePersistence?: boolean;
+    storageNamespace?: string;
     layout?: 'vertical' | 'horizontal';
     showVersionInfo?: boolean;
     enableScrollToBottom?: boolean;
     serverMode?: boolean;
+    showEnvConfigReminder?: boolean;
 }
 export interface PlaygroundBranding {
     title?: string;
@@ -154,7 +156,7 @@ export interface PlaygroundBranding {
     version?: string;
 }
 export interface UniversalPlaygroundProps {
-    playgroundSDK: PlaygroundSDKLike;
+    playgroundSDK: PlaygroundSDKLike | null;
     storage?: StorageProvider;
     contextProvider?: ContextProvider;
     config?: UniversalPlaygroundConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "0.28.7-beta-20250912013851.0",
+  "version": "0.28.7-beta-20250912113807.0",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -70,10 +70,10 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@midscene/core": "0.28.7-beta-20250912013851.0",
-    "@midscene/playground": "0.28.7-beta-20250912013851.0",
-    "@midscene/web": "0.28.7-beta-20250912013851.0",
-    "@midscene/shared": "0.28.7-beta-20250912013851.0"
+    "@midscene/core": "0.28.7-beta-20250912113807.0",
+    "@midscene/shared": "0.28.7-beta-20250912113807.0",
+    "@midscene/web": "0.28.7-beta-20250912113807.0",
+    "@midscene/playground": "0.28.7-beta-20250912113807.0"
   },
   "license": "MIT",
   "scripts": {