@midscene/visualizer 0.28.7-beta-20250915040112.0 → 0.28.7-beta-20250915094412.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/service-mode-control/index.mjs

@@ -1,8 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { PlaygroundSDK } from "@midscene/playground";
-import { overrideAIConfig } from "@midscene/shared/env";
 import { Button, Tooltip } from "antd";
 import { useEffect } from "react";
+import { safeOverrideAIConfig } from "../../hooks/useSafeOverrideAIConfig.mjs";
 import { useServerValid } from "../../hooks/useServerValid.mjs";
 import { useEnvConfig } from "../../store/store.mjs";
 import { EnvConfig } from "../env-config/index.mjs";
@@ -57,7 +57,7 @@ const ServiceModeControl = (param)=>{
         });
     };
     useEffect(()=>{
-        overrideAIConfig(config);
+        safeOverrideAIConfig(config, false, false);
         if ('Server' === serviceMode) {
             const playgroundSDK = new PlaygroundSDK({
                 type: 'remote-execution'

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/es/hooks/useSafeOverrideAIConfig.mjs

@@ -0,0 +1,24 @@
+import { overrideAIConfig } from "@midscene/shared/env";
+import { message } from "antd";
+function safeOverrideAIConfig(newConfig) {
+    let extendMode = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : false, showErrorMessage = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : true;
+    try {
+        overrideAIConfig(newConfig, extendMode);
+        return true;
+    } catch (error) {
+        const err = error instanceof Error ? error : new Error(String(error));
+        console.error('Failed to override AI config:', err);
+        if (showErrorMessage) message.error(`Failed to apply AI configuration: ${err.message}`);
+        return false;
+    }
+}
+function useSafeOverrideAIConfig() {
+    const applyConfig = function(newConfig) {
+        let extendMode = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : false, showErrorMessage = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : true;
+        return safeOverrideAIConfig(newConfig, extendMode, showErrorMessage);
+    };
+    return {
+        applyConfig
+    };
+}
+export { safeOverrideAIConfig, useSafeOverrideAIConfig };

package/dist/es/index.mjs

@@ -8,6 +8,7 @@ import { EnvConfigReminder } from "./component/env-config-reminder/index.mjs";
 import { Logo } from "./component/logo/index.mjs";
 import { iconForStatus, timeCostStrElement } from "./component/misc/index.mjs";
 import { useServerValid } from "./hooks/useServerValid.mjs";
+import { safeOverrideAIConfig, useSafeOverrideAIConfig } from "./hooks/useSafeOverrideAIConfig.mjs";
 import { PlaygroundResultView } from "./component/playground-result/index.mjs";
 import { ServiceModeControl } from "./component/service-mode-control/index.mjs";
 import { ContextPreview } from "./component/context-preview/index.mjs";
@@ -21,4 +22,4 @@ import shiny_text from "./component/shiny-text/index.mjs";
 import universal_playground, { UniversalPlayground } from "./component/universal-playground/index.mjs";
 import { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider } from "./component/universal-playground/providers/storage-provider.mjs";
 import { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider } from "./component/universal-playground/providers/context-provider.mjs";
-export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, GithubStar, LocalStorageProvider, Logo, MemoryStorageProvider, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid };
+export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, GithubStar, LocalStorageProvider, Logo, MemoryStorageProvider, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid };

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/service-mode-control/index.js

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const playground_namespaceObject = require("@midscene/playground");
-const env_namespaceObject = require("@midscene/shared/env");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
+const useSafeOverrideAIConfig_js_namespaceObject = require("../../hooks/useSafeOverrideAIConfig.js");
 const useServerValid_js_namespaceObject = require("../../hooks/useServerValid.js");
 const store_js_namespaceObject = require("../../store/store.js");
 const index_js_namespaceObject = require("../env-config/index.js");
@@ -85,7 +85,7 @@ const ServiceModeControl = (param)=>{
         });
     };
     (0, external_react_namespaceObject.useEffect)(()=>{
-        (0, env_namespaceObject.overrideAIConfig)(config);
+        (0, useSafeOverrideAIConfig_js_namespaceObject.safeOverrideAIConfig)(config, false, false);
         if ('Server' === serviceMode) {
             const playgroundSDK = new playground_namespaceObject.PlaygroundSDK({
                 type: 'remote-execution'

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/lib/hooks/useSafeOverrideAIConfig.js

@@ -0,0 +1,61 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    safeOverrideAIConfig: ()=>safeOverrideAIConfig,
+    useSafeOverrideAIConfig: ()=>useSafeOverrideAIConfig
+});
+const env_namespaceObject = require("@midscene/shared/env");
+const external_antd_namespaceObject = require("antd");
+function safeOverrideAIConfig(newConfig) {
+    let extendMode = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : false, showErrorMessage = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : true;
+    try {
+        (0, env_namespaceObject.overrideAIConfig)(newConfig, extendMode);
+        return true;
+    } catch (error) {
+        const err = error instanceof Error ? error : new Error(String(error));
+        console.error('Failed to override AI config:', err);
+        if (showErrorMessage) external_antd_namespaceObject.message.error(`Failed to apply AI configuration: ${err.message}`);
+        return false;
+    }
+}
+function useSafeOverrideAIConfig() {
+    const applyConfig = function(newConfig) {
+        let extendMode = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : false, showErrorMessage = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : true;
+        return safeOverrideAIConfig(newConfig, extendMode, showErrorMessage);
+    };
+    return {
+        applyConfig
+    };
+}
+exports.safeOverrideAIConfig = __webpack_exports__.safeOverrideAIConfig;
+exports.useSafeOverrideAIConfig = __webpack_exports__.useSafeOverrideAIConfig;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "safeOverrideAIConfig",
+    "useSafeOverrideAIConfig"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/index.js

@@ -45,10 +45,12 @@ __webpack_require__.d(__webpack_exports__, {
     ShinyText: ()=>shiny_text_index_js_default(),
     getPlaceholderForType: ()=>playground_utils_js_namespaceObject.getPlaceholderForType,
     staticAgentFromContext: ()=>playground_utils_js_namespaceObject.staticAgentFromContext,
+    useSafeOverrideAIConfig: ()=>useSafeOverrideAIConfig_js_namespaceObject.useSafeOverrideAIConfig,
     useServerValid: ()=>useServerValid_js_namespaceObject.useServerValid,
     ServiceModeControl: ()=>service_mode_control_index_js_namespaceObject.ServiceModeControl,
     BaseContextProvider: ()=>context_provider_js_namespaceObject.BaseContextProvider,
     colorForName: ()=>color_js_namespaceObject.colorForName,
+    safeOverrideAIConfig: ()=>useSafeOverrideAIConfig_js_namespaceObject.safeOverrideAIConfig,
     GithubStar: ()=>github_star_index_js_namespaceObject.GithubStar,
     Logo: ()=>logo_index_js_namespaceObject.Logo,
     UniversalPlayground: ()=>universal_playground_index_js_namespaceObject.UniversalPlayground,
@@ -78,6 +80,7 @@ const env_config_reminder_index_js_namespaceObject = require("./component/env-co
 const logo_index_js_namespaceObject = require("./component/logo/index.js");
 const misc_index_js_namespaceObject = require("./component/misc/index.js");
 const useServerValid_js_namespaceObject = require("./hooks/useServerValid.js");
+const useSafeOverrideAIConfig_js_namespaceObject = require("./hooks/useSafeOverrideAIConfig.js");
 const playground_result_index_js_namespaceObject = require("./component/playground-result/index.js");
 const service_mode_control_index_js_namespaceObject = require("./component/service-mode-control/index.js");
 const context_preview_index_js_namespaceObject = require("./component/context-preview/index.js");
@@ -122,10 +125,12 @@ exports.getPlaceholderForType = __webpack_exports__.getPlaceholderForType;
 exports.globalThemeConfig = __webpack_exports__.globalThemeConfig;
 exports.highlightColorForType = __webpack_exports__.highlightColorForType;
 exports.iconForStatus = __webpack_exports__.iconForStatus;
+exports.safeOverrideAIConfig = __webpack_exports__.safeOverrideAIConfig;
 exports.staticAgentFromContext = __webpack_exports__.staticAgentFromContext;
 exports.timeCostStrElement = __webpack_exports__.timeCostStrElement;
 exports.timeStr = __webpack_exports__.timeStr;
 exports.useEnvConfig = __webpack_exports__.useEnvConfig;
+exports.useSafeOverrideAIConfig = __webpack_exports__.useSafeOverrideAIConfig;
 exports.useServerValid = __webpack_exports__.useServerValid;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "AgentContextProvider",
@@ -157,10 +162,12 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "globalThemeConfig",
     "highlightColorForType",
     "iconForStatus",
+    "safeOverrideAIConfig",
     "staticAgentFromContext",
     "timeCostStrElement",
     "timeStr",
     "useEnvConfig",
+    "useSafeOverrideAIConfig",
     "useServerValid"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {

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/hooks/useSafeOverrideAIConfig.d.ts

@@ -0,0 +1,16 @@
+import type { GLOBAL_ENV_KEYS, MODEL_ENV_KEYS } from '@midscene/shared/env';
+/**
+ * Safely override AI configuration with built-in error handling
+ * @param newConfig - The configuration to override
+ * @param extendMode - Whether to extend or replace the config (default: false)
+ * @param showErrorMessage - Whether to show error message in UI (default: true)
+ * @returns boolean indicating success
+ */
+export declare function safeOverrideAIConfig(newConfig: Partial<Record<(typeof GLOBAL_ENV_KEYS)[number] | (typeof MODEL_ENV_KEYS)[number], string>>, extendMode?: boolean, showErrorMessage?: boolean): boolean;
+/**
+ * React Hook for safely overriding AI config with error handling
+ * Useful for components that need to handle config changes
+ */
+export declare function useSafeOverrideAIConfig(): {
+    applyConfig: (newConfig: Partial<Record<(typeof GLOBAL_ENV_KEYS)[number] | (typeof MODEL_ENV_KEYS)[number], string>>, extendMode?: boolean, showErrorMessage?: boolean) => boolean;
+};

package/dist/types/index.d.ts

@@ -8,6 +8,7 @@ export { EnvConfigReminder } from './component/env-config-reminder';
 export { Logo } from './component/logo';
 export { iconForStatus, timeCostStrElement } from './component/misc';
 export { useServerValid } from './hooks/useServerValid';
+export { useSafeOverrideAIConfig, safeOverrideAIConfig, } from './hooks/useSafeOverrideAIConfig';
 export { PlaygroundResultView } from './component/playground-result';
 export type { PlaygroundResult } from './types';
 export { ServiceModeControl } from './component/service-mode-control';

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-20250915040112.0",
+  "version": "0.28.7-beta-20250915094412.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-20250915040112.0",
-    "@midscene/playground": "0.28.7-beta-20250915040112.0",
-    "@midscene/web": "0.28.7-beta-20250915040112.0",
-    "@midscene/shared": "0.28.7-beta-20250915040112.0"
+    "@midscene/core": "0.28.7-beta-20250915094412.0",
+    "@midscene/playground": "0.28.7-beta-20250915094412.0",
+    "@midscene/shared": "0.28.7-beta-20250915094412.0",
+    "@midscene/web": "0.28.7-beta-20250915094412.0"
   },
   "license": "MIT",
   "scripts": {