@midscene/visualizer 0.28.5 → 0.28.7-beta-20250912013851.0

package/dist/es/component/env-config-reminder/index.css

@@ -0,0 +1,22 @@
+.env-config-reminder {
+  background: #fff2e8;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 12px 16px;
+  display: flex;
+}
+
+.env-config-reminder .reminder-icon {
+  color: #fa541c;
+  width: 16px;
+  height: 16px;
+}
+
+.env-config-reminder .reminder-text {
+  color: #000;
+  flex: 1;
+  font-size: 14px;
+}
+

package/dist/es/component/env-config-reminder/index.mjs

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExclamationCircleFilled } from "@ant-design/icons";
+import { useEnvConfig } from "../../store/store.mjs";
+import { EnvConfig } from "../env-config/index.mjs";
+import "./index.css";
+const EnvConfigReminder = (param)=>{
+    let { className = '' } = param;
+    const { config } = useEnvConfig();
+    const configAlreadySet = Object.keys(config || {}).length >= 1;
+    if (configAlreadySet) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: `env-config-reminder ${className}`,
+        children: [
+            /*#__PURE__*/ jsx(ExclamationCircleFilled, {
+                className: "reminder-icon"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "reminder-text",
+                children: "Please set up your environment variables before using."
+            }),
+            /*#__PURE__*/ jsx(EnvConfig, {
+                mode: "text",
+                showTooltipWhenEmpty: false
+            })
+        ]
+    });
+};
+export { EnvConfigReminder };

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

@@ -6,6 +6,7 @@ import { usePlaygroundExecution } from "../../hooks/usePlaygroundExecution.mjs";
 import { usePlaygroundState } from "../../hooks/usePlaygroundState.mjs";
 import { useEnvConfig } from "../../store/store.mjs";
 import { ContextPreview } from "../context-preview/index.mjs";
+import { EnvConfigReminder } from "../env-config-reminder/index.mjs";
 import { PlaygroundResultView } from "../playground-result/index.mjs";
 import "./index.css";
 import avatar from "../../icons/avatar.mjs";
@@ -35,7 +36,8 @@ 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 { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, refreshContext, handleScrollToBottom } = usePlaygroundState(playgroundSDK, storage, contextProvider);
+    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);
     useEffect(()=>{
         const completeConfig = {
@@ -65,10 +67,10 @@ function UniversalPlayground(param) {
         form,
         executeAction
     ]);
-    const runButtonEnabled = !dryMode && !actionSpaceLoading;
+    const configAlreadySet = Object.keys(config || {}).length >= 1;
+    const runButtonEnabled = componentConfig.serverMode || !dryMode && !actionSpaceLoading && configAlreadySet;
     const selectedType = Form.useWatch('type', form);
     const finalShowContextPreview = showContextPreview && false !== componentConfig.showContextPreview;
-    const enablePersistence = false !== componentConfig.enablePersistence;
     const layout = componentConfig.layout || 'vertical';
     const showVersionInfo = false !== componentConfig.showVersionInfo;
     return /*#__PURE__*/ jsx("div", {
@@ -89,7 +91,7 @@ function UniversalPlayground(param) {
                 /*#__PURE__*/ jsxs("div", {
                     className: "middle-dialog-area",
                     children: [
-                        infoList.length > 1 && enablePersistence && /*#__PURE__*/ jsx("div", {
+                        infoList.length > 1 && /*#__PURE__*/ jsx("div", {
                             className: "clear-button-container",
                             children: /*#__PURE__*/ jsx(Button, {
                                 size: "small",
@@ -240,20 +242,23 @@ function UniversalPlayground(param) {
                         })
                     ]
                 }),
-                /*#__PURE__*/ jsx("div", {
+                /*#__PURE__*/ jsxs("div", {
                     className: "bottom-input-section",
-                    children: /*#__PURE__*/ jsx(PromptInput, {
-                        runButtonEnabled: runButtonEnabled,
-                        form: form,
-                        serviceMode: 'Server',
-                        selectedType: selectedType,
-                        dryMode: dryMode,
-                        stoppable: canStop,
-                        loading: loading,
-                        onRun: handleFormRun,
-                        onStop: handleStop,
-                        actionSpace: actionSpace
-                    })
+                    children: [
+                        !componentConfig.serverMode && /*#__PURE__*/ jsx(EnvConfigReminder, {}),
+                        /*#__PURE__*/ jsx(PromptInput, {
+                            runButtonEnabled: runButtonEnabled,
+                            form: form,
+                            serviceMode: 'Server',
+                            selectedType: selectedType,
+                            dryMode: dryMode,
+                            stoppable: canStop,
+                            loading: loading,
+                            onRun: handleFormRun,
+                            onStop: handleStop,
+                            actionSpace: actionSpace
+                        })
+                    ]
                 }),
                 showVersionInfo && branding.version && /*#__PURE__*/ jsx("div", {
                     className: "version-info-section",

package/dist/es/hooks/usePlaygroundState.mjs

@@ -1,6 +1,7 @@
 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([]);
@@ -19,7 +20,7 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
                 id: 'welcome',
                 timestamp: new Date()
             };
-            if (null == storage ? void 0 : storage.loadMessages) try {
+            if (enablePersistence && (null == storage ? void 0 : storage.loadMessages)) try {
                 const storedMessages = await storage.loadMessages();
                 const hasWelcomeMessage = storedMessages.some((msg)=>'welcome' === msg.id);
                 hasWelcomeMessage ? setInfoList(storedMessages) : setInfoList([
@@ -39,12 +40,13 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
         if (0 === infoList.length) initializeMessages();
     }, []);
     useEffect(()=>{
-        if ((null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
+        if (enablePersistence && (null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
             console.error('Failed to save messages:', error);
         });
     }, [
         infoList,
-        storage
+        storage,
+        enablePersistence
     ]);
     useEffect(()=>{
         if (!(null == contextProvider ? void 0 : contextProvider.getUIContext) || uiContextPreview) return;
@@ -133,13 +135,14 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
         setInfoList([
             welcomeMessage
         ]);
-        if (null == storage ? void 0 : storage.clearMessages) try {
+        if (enablePersistence && (null == storage ? void 0 : storage.clearMessages)) try {
             await storage.clearMessages();
         } catch (error) {
             console.error('Failed to clear stored messages:', error);
         }
     }, [
-        storage
+        storage,
+        enablePersistence
     ]);
     const refreshContext = useCallback(async ()=>{
         if (null == contextProvider ? void 0 : contextProvider.refreshContext) try {

package/dist/es/index.mjs

@@ -4,6 +4,7 @@ import { allScriptsFromDump, generateAnimationScripts } from "./utils/replay-scr
 import { useEnvConfig } from "./store/store.mjs";
 import { colorForName, globalThemeConfig, highlightColorForType } from "./utils/color.mjs";
 import { EnvConfig } from "./component/env-config/index.mjs";
+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";
@@ -20,4 +21,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, 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, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid };

package/dist/lib/component/env-config-reminder/index.css

@@ -0,0 +1,22 @@
+.env-config-reminder {
+  background: #fff2e8;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 12px 16px;
+  display: flex;
+}
+
+.env-config-reminder .reminder-icon {
+  color: #fa541c;
+  width: 16px;
+  height: 16px;
+}
+
+.env-config-reminder .reminder-text {
+  color: #000;
+  flex: 1;
+  font-size: 14px;
+}
+

package/dist/lib/component/env-config-reminder/index.js

@@ -0,0 +1,62 @@
+"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__, {
+    EnvConfigReminder: ()=>EnvConfigReminder
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const icons_namespaceObject = require("@ant-design/icons");
+const store_js_namespaceObject = require("../../store/store.js");
+const index_js_namespaceObject = require("../env-config/index.js");
+require("./index.css");
+const EnvConfigReminder = (param)=>{
+    let { className = '' } = param;
+    const { config } = (0, store_js_namespaceObject.useEnvConfig)();
+    const configAlreadySet = Object.keys(config || {}).length >= 1;
+    if (configAlreadySet) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: `env-config-reminder ${className}`,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.ExclamationCircleFilled, {
+                className: "reminder-icon"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "reminder-text",
+                children: "Please set up your environment variables before using."
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.EnvConfig, {
+                mode: "text",
+                showTooltipWhenEmpty: false
+            })
+        ]
+    });
+};
+exports.EnvConfigReminder = __webpack_exports__.EnvConfigReminder;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "EnvConfigReminder"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -45,6 +45,7 @@ const usePlaygroundExecution_js_namespaceObject = require("../../hooks/usePlaygr
 const usePlaygroundState_js_namespaceObject = require("../../hooks/usePlaygroundState.js");
 const store_js_namespaceObject = require("../../store/store.js");
 const index_js_namespaceObject = require("../context-preview/index.js");
+const external_env_config_reminder_index_js_namespaceObject = require("../env-config-reminder/index.js");
 const external_playground_result_index_js_namespaceObject = require("../playground-result/index.js");
 require("./index.css");
 const avatar_js_namespaceObject = require("../../icons/avatar.js");
@@ -75,7 +76,8 @@ 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 { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, refreshContext, handleScrollToBottom } = (0, usePlaygroundState_js_namespaceObject.usePlaygroundState)(playgroundSDK, storage, contextProvider);
+    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);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const completeConfig = {
@@ -105,10 +107,10 @@ function UniversalPlayground(param) {
         form,
         executeAction
     ]);
-    const runButtonEnabled = !dryMode && !actionSpaceLoading;
+    const configAlreadySet = Object.keys(config || {}).length >= 1;
+    const runButtonEnabled = componentConfig.serverMode || !dryMode && !actionSpaceLoading && configAlreadySet;
     const selectedType = external_antd_namespaceObject.Form.useWatch('type', form);
     const finalShowContextPreview = showContextPreview && false !== componentConfig.showContextPreview;
-    const enablePersistence = false !== componentConfig.enablePersistence;
     const layout = componentConfig.layout || 'vertical';
     const showVersionInfo = false !== componentConfig.showVersionInfo;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -129,7 +131,7 @@ function UniversalPlayground(param) {
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     className: "middle-dialog-area",
                     children: [
-                        infoList.length > 1 && enablePersistence && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        infoList.length > 1 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                             className: "clear-button-container",
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
                                 size: "small",
@@ -280,20 +282,23 @@ function UniversalPlayground(param) {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     className: "bottom-input-section",
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_prompt_input_index_js_namespaceObject.PromptInput, {
-                        runButtonEnabled: runButtonEnabled,
-                        form: form,
-                        serviceMode: 'Server',
-                        selectedType: selectedType,
-                        dryMode: dryMode,
-                        stoppable: canStop,
-                        loading: loading,
-                        onRun: handleFormRun,
-                        onStop: handleStop,
-                        actionSpace: actionSpace
-                    })
+                    children: [
+                        !componentConfig.serverMode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_env_config_reminder_index_js_namespaceObject.EnvConfigReminder, {}),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_prompt_input_index_js_namespaceObject.PromptInput, {
+                            runButtonEnabled: runButtonEnabled,
+                            form: form,
+                            serviceMode: 'Server',
+                            selectedType: selectedType,
+                            dryMode: dryMode,
+                            stoppable: canStop,
+                            loading: loading,
+                            onRun: handleFormRun,
+                            onStop: handleStop,
+                            actionSpace: actionSpace
+                        })
+                    ]
                 }),
                 showVersionInfo && branding.version && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                     className: "version-info-section",

package/dist/lib/hooks/usePlaygroundState.js

@@ -29,6 +29,7 @@ __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)([]);
@@ -47,7 +48,7 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
                 id: 'welcome',
                 timestamp: new Date()
             };
-            if (null == storage ? void 0 : storage.loadMessages) try {
+            if (enablePersistence && (null == storage ? void 0 : storage.loadMessages)) try {
                 const storedMessages = await storage.loadMessages();
                 const hasWelcomeMessage = storedMessages.some((msg)=>'welcome' === msg.id);
                 hasWelcomeMessage ? setInfoList(storedMessages) : setInfoList([
@@ -67,12 +68,13 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
         if (0 === infoList.length) initializeMessages();
     }, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if ((null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
+        if (enablePersistence && (null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
             console.error('Failed to save messages:', error);
         });
     }, [
         infoList,
-        storage
+        storage,
+        enablePersistence
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (!(null == contextProvider ? void 0 : contextProvider.getUIContext) || uiContextPreview) return;
@@ -161,13 +163,14 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
         setInfoList([
             welcomeMessage
         ]);
-        if (null == storage ? void 0 : storage.clearMessages) try {
+        if (enablePersistence && (null == storage ? void 0 : storage.clearMessages)) try {
             await storage.clearMessages();
         } catch (error) {
             console.error('Failed to clear stored messages:', error);
         }
     }, [
-        storage
+        storage,
+        enablePersistence
     ]);
     const refreshContext = (0, external_react_namespaceObject.useCallback)(async ()=>{
         if (null == contextProvider ? void 0 : contextProvider.refreshContext) try {

package/dist/lib/index.js

@@ -53,18 +53,19 @@ __webpack_require__.d(__webpack_exports__, {
     Logo: ()=>logo_index_js_namespaceObject.Logo,
     UniversalPlayground: ()=>universal_playground_index_js_namespaceObject.UniversalPlayground,
     useEnvConfig: ()=>store_js_namespaceObject.useEnvConfig,
-    PromptInput: ()=>prompt_input_index_js_namespaceObject.PromptInput,
-    ContextPreview: ()=>context_preview_index_js_namespaceObject.ContextPreview,
     NoOpStorageProvider: ()=>storage_provider_js_namespaceObject.NoOpStorageProvider,
+    ContextPreview: ()=>context_preview_index_js_namespaceObject.ContextPreview,
+    PromptInput: ()=>prompt_input_index_js_namespaceObject.PromptInput,
     StaticContextProvider: ()=>context_provider_js_namespaceObject.StaticContextProvider,
     Blackboard: ()=>blackboard_index_js_namespaceObject.Blackboard,
     Player: ()=>player_index_js_namespaceObject.Player,
     AgentContextProvider: ()=>context_provider_js_namespaceObject.AgentContextProvider,
+    EnvConfigReminder: ()=>env_config_reminder_index_js_namespaceObject.EnvConfigReminder,
     filterBase64Value: ()=>external_utils_index_js_namespaceObject.filterBase64Value,
     NoOpContextProvider: ()=>context_provider_js_namespaceObject.NoOpContextProvider,
     highlightColorForType: ()=>color_js_namespaceObject.highlightColorForType,
-    iconForStatus: ()=>misc_index_js_namespaceObject.iconForStatus,
     globalThemeConfig: ()=>color_js_namespaceObject.globalThemeConfig,
+    iconForStatus: ()=>misc_index_js_namespaceObject.iconForStatus,
     MemoryStorageProvider: ()=>storage_provider_js_namespaceObject.MemoryStorageProvider
 });
 require("./component/playground/index.css");
@@ -73,6 +74,7 @@ const replay_scripts_js_namespaceObject = require("./utils/replay-scripts.js");
 const store_js_namespaceObject = require("./store/store.js");
 const color_js_namespaceObject = require("./utils/color.js");
 const index_js_namespaceObject = require("./component/env-config/index.js");
+const env_config_reminder_index_js_namespaceObject = require("./component/env-config-reminder/index.js");
 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");
@@ -96,6 +98,7 @@ exports.BaseContextProvider = __webpack_exports__.BaseContextProvider;
 exports.Blackboard = __webpack_exports__.Blackboard;
 exports.ContextPreview = __webpack_exports__.ContextPreview;
 exports.EnvConfig = __webpack_exports__.EnvConfig;
+exports.EnvConfigReminder = __webpack_exports__.EnvConfigReminder;
 exports.GithubStar = __webpack_exports__.GithubStar;
 exports.LocalStorageProvider = __webpack_exports__.LocalStorageProvider;
 exports.Logo = __webpack_exports__.Logo;
@@ -130,6 +133,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "Blackboard",
     "ContextPreview",
     "EnvConfig",
+    "EnvConfigReminder",
     "GithubStar",
     "LocalStorageProvider",
     "Logo",

package/dist/types/component/env-config-reminder/index.d.ts

@@ -0,0 +1,6 @@
+import './index.less';
+interface EnvConfigReminderProps {
+    className?: string;
+}
+export declare const EnvConfigReminder: React.FC<EnvConfigReminderProps>;
+export {};

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): {
+export declare function usePlaygroundState(playgroundSDK: PlaygroundSDKLike, storage?: StorageProvider, contextProvider?: ContextProvider, enablePersistence?: boolean): {
     loading: boolean;
     setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     infoList: InfoListItem[];

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export { type AnimationScript, type ReplayScriptsInfo, allScriptsFromDump, gener
 export { useEnvConfig } from './store/store';
 export { colorForName, highlightColorForType, globalThemeConfig, } from './utils/color';
 export { EnvConfig } from './component/env-config';
+export { EnvConfigReminder } from './component/env-config-reminder';
 export { Logo } from './component/logo';
 export { iconForStatus, timeCostStrElement } from './component/misc';
 export { useServerValid } from './hooks/useServerValid';

package/dist/types/types.d.ts

@@ -146,6 +146,7 @@ export interface UniversalPlaygroundConfig {
     layout?: 'vertical' | 'horizontal';
     showVersionInfo?: boolean;
     enableScrollToBottom?: boolean;
+    serverMode?: boolean;
 }
 export interface PlaygroundBranding {
     title?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "0.28.5",
+  "version": "0.28.7-beta-20250912013851.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.5",
-    "@midscene/shared": "0.28.5",
-    "@midscene/web": "0.28.5",
-    "@midscene/playground": "0.28.5"
+    "@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"
   },
   "license": "MIT",
   "scripts": {