@midscene/visualizer 0.28.7-beta-20250915040112.0 → 0.28.7-beta-20250915133700.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;
@@ -38,24 +37,50 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper {
-  justify-content: space-between;
   align-items: center;
+  gap: 8px;
   display: flex;
+  position: relative;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  flex: 1;
   align-items: center;
+  gap: 8px;
+  min-width: 0;
   height: 100%;
+  margin-right: 80px;
+  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,8 +145,16 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
+  z-index: 10;
+  background: #fff;
+  flex-shrink: 0;
   align-items: center;
+  padding-left: 8px;
   display: flex;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
 }
 
 .prompt-input-wrapper .main-side-console-input {

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

@@ -3,24 +3,50 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper {
-  justify-content: space-between;
   align-items: center;
+  gap: 8px;
   display: flex;
+  position: relative;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  flex: 1;
   align-items: center;
+  gap: 8px;
+  min-width: 0;
   height: 100%;
+  margin-right: 80px;
+  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,8 +111,16 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
+  z-index: 10;
+  background: #fff;
+  flex-shrink: 0;
   align-items: center;
+  padding-left: 8px;
   display: flex;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
 }
 
 .prompt-input-wrapper .main-side-console-input {

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;
@@ -75,26 +80,21 @@ function ErrorMessage(param) {
 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 { config } = (0, store_js_namespaceObject.useEnvConfig)();
+    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,
-            deepThink,
-            screenshotIncluded,
-            domIncluded
-        };
-        if (playgroundSDK.overrideConfig) playgroundSDK.overrideConfig(completeConfig).catch((error)=>{
+        if ((null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) && config) playgroundSDK.overrideConfig(config).catch((error)=>{
             console.error('Failed to override SDK config:', error);
         });
     }, [
         playgroundSDK,
-        config,
-        deepThink,
-        screenshotIncluded,
-        domIncluded
+        config
     ]);
     const handleFormRun = (0, external_react_namespaceObject.useCallback)(async ()=>{
         try {
@@ -285,7 +285,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

@@ -27,6 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
     usePlaygroundExecution: ()=>usePlaygroundExecution
 });
 const external_react_namespaceObject = require("react");
+const store_js_namespaceObject = require("../store/store.js");
 const constants_js_namespaceObject = require("../utils/constants.js");
 const replay_scripts_js_namespaceObject = require("../utils/replay-scripts.js");
 const noReplayAPIs = [
@@ -34,7 +35,9 @@ const noReplayAPIs = [
     'aiAssert'
 ];
 function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
+    const { deepThink, screenshotIncluded, domIncluded } = (0, store_js_namespaceObject.useEnvConfig)();
     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,21 +70,29 @@ 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()
+                requestId: thisRunningId.toString(),
+                deepThink,
+                screenshotIncluded,
+                domIncluded
             });
             if ('object' == typeof result.result && null !== result.result) {
                 const resultObj = result.result;
@@ -152,14 +163,18 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         setReplayCounter,
         verticalMode,
         currentRunningIdRef,
-        interruptedFlagRef
+        interruptedFlagRef,
+        deepThink,
+        screenshotIncluded,
+        domIncluded
     ]);
     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 +201,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';