@midscene/visualizer 0.28.10-beta-20250919094051.0 → 0.28.10

package/dist/lib/component/universal-playground/providers/storage-provider.js

@@ -24,10 +24,17 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    IndexedDBStorageProvider: ()=>external_indexeddb_storage_provider_js_namespaceObject.IndexedDBStorageProvider,
+    StorageType: ()=>storage_provider_StorageType,
+    detectBestStorageType: ()=>detectBestStorageType,
+    IndexedDBMemoryStorageProvider: ()=>external_indexeddb_storage_provider_js_namespaceObject.MemoryStorageProvider,
+    IndexedDBNoOpStorageProvider: ()=>external_indexeddb_storage_provider_js_namespaceObject.NoOpStorageProvider,
     LocalStorageProvider: ()=>LocalStorageProvider,
-    MemoryStorageProvider: ()=>MemoryStorageProvider,
-    NoOpStorageProvider: ()=>NoOpStorageProvider
+    NoOpStorageProvider: ()=>NoOpStorageProvider,
+    createStorageProvider: ()=>createStorageProvider,
+    MemoryStorageProvider: ()=>MemoryStorageProvider
 });
+const external_indexeddb_storage_provider_js_namespaceObject = require("./indexeddb-storage-provider.js");
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -198,13 +205,63 @@ class NoOpStorageProvider {
     async clearMessages() {}
     async saveResult(_id, _result) {}
 }
+var storage_provider_StorageType = /*#__PURE__*/ function(StorageType) {
+    StorageType["INDEXEDDB"] = "indexeddb";
+    StorageType["LOCALSTORAGE"] = "localStorage";
+    StorageType["MEMORY"] = "memory";
+    StorageType["NONE"] = "none";
+    return StorageType;
+}({});
+function createStorageProvider() {
+    let type = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "indexeddb", namespace = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 'playground';
+    switch(type){
+        case "indexeddb":
+            if ('undefined' != typeof indexedDB) return new external_indexeddb_storage_provider_js_namespaceObject.IndexedDBStorageProvider(namespace);
+            console.warn('IndexedDB not available, falling back to localStorage');
+            return createStorageProvider("localStorage", namespace);
+        case "localStorage":
+            if ('undefined' != typeof localStorage) return new LocalStorageProvider(namespace);
+            console.warn('localStorage not available, falling back to memory storage');
+            return createStorageProvider("memory", namespace);
+        case "memory":
+            return new MemoryStorageProvider();
+        case "none":
+            return new NoOpStorageProvider();
+        default:
+            throw new Error(`Unknown storage type: ${type}`);
+    }
+}
+function detectBestStorageType() {
+    if ('undefined' != typeof indexedDB) try {
+        indexedDB.open('test', 1).onerror = ()=>{};
+        return "indexeddb";
+    } catch (e) {}
+    if ('undefined' != typeof localStorage) try {
+        localStorage.setItem('test', 'test');
+        localStorage.removeItem('test');
+        return "localStorage";
+    } catch (e) {}
+    return "memory";
+}
+exports.IndexedDBMemoryStorageProvider = __webpack_exports__.IndexedDBMemoryStorageProvider;
+exports.IndexedDBNoOpStorageProvider = __webpack_exports__.IndexedDBNoOpStorageProvider;
+exports.IndexedDBStorageProvider = __webpack_exports__.IndexedDBStorageProvider;
 exports.LocalStorageProvider = __webpack_exports__.LocalStorageProvider;
 exports.MemoryStorageProvider = __webpack_exports__.MemoryStorageProvider;
 exports.NoOpStorageProvider = __webpack_exports__.NoOpStorageProvider;
+exports.StorageType = __webpack_exports__.StorageType;
+exports.createStorageProvider = __webpack_exports__.createStorageProvider;
+exports.detectBestStorageType = __webpack_exports__.detectBestStorageType;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "IndexedDBMemoryStorageProvider",
+    "IndexedDBNoOpStorageProvider",
+    "IndexedDBStorageProvider",
     "LocalStorageProvider",
     "MemoryStorageProvider",
-    "NoOpStorageProvider"
+    "NoOpStorageProvider",
+    "StorageType",
+    "createStorageProvider",
+    "detectBestStorageType"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/lib/hooks/usePlaygroundState.js

@@ -27,6 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
     usePlaygroundState: ()=>usePlaygroundState
 });
 const external_react_namespaceObject = require("react");
+const storage_provider_js_namespaceObject = require("../component/universal-playground/providers/storage-provider.js");
 const constants_js_namespaceObject = require("../utils/constants.js");
 function usePlaygroundState(playgroundSDK, storage, contextProvider) {
     const [loading, setLoading] = (0, external_react_namespaceObject.useState)(false);
@@ -40,7 +41,25 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
     const infoListRef = (0, external_react_namespaceObject.useRef)(null);
     const currentRunningIdRef = (0, external_react_namespaceObject.useRef)(null);
     const interruptedFlagRef = (0, external_react_namespaceObject.useRef)({});
+    const initializedRef = (0, external_react_namespaceObject.useRef)(false);
     (0, external_react_namespaceObject.useEffect)(()=>{
+        const migrateFromOldNamespace = async ()=>{
+            const oldStorage = (0, storage_provider_js_namespaceObject.createStorageProvider)((0, storage_provider_js_namespaceObject.detectBestStorageType)(), 'playground-default');
+            try {
+                if (null == oldStorage ? void 0 : oldStorage.loadMessages) {
+                    const oldMessages = await oldStorage.loadMessages();
+                    if (oldMessages.length > 1) {
+                        console.log('Found data in old namespace, migrating...');
+                        if (null == storage ? void 0 : storage.saveMessages) await storage.saveMessages(oldMessages);
+                        if (oldStorage.clearMessages) await oldStorage.clearMessages();
+                        return oldMessages;
+                    }
+                }
+            } catch (error) {
+                console.debug('No data found in old namespace:', error);
+            }
+            return [];
+        };
         const initializeMessages = async ()=>{
             const welcomeMessage = {
                 ...constants_js_namespaceObject.WELCOME_MESSAGE_TEMPLATE,
@@ -48,7 +67,8 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
                 timestamp: new Date()
             };
             if (null == storage ? void 0 : storage.loadMessages) try {
-                const storedMessages = await storage.loadMessages();
+                let storedMessages = await storage.loadMessages();
+                if (0 === storedMessages.length) storedMessages = await migrateFromOldNamespace();
                 const hasWelcomeMessage = storedMessages.some((msg)=>'welcome' === msg.id);
                 hasWelcomeMessage ? setInfoList(storedMessages) : setInfoList([
                     welcomeMessage,
@@ -64,8 +84,13 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
                 welcomeMessage
             ]);
         };
-        if (0 === infoList.length) initializeMessages();
-    }, []);
+        if (storage && !initializedRef.current) {
+            initializedRef.current = true;
+            initializeMessages();
+        } else if (!storage && 0 === infoList.length) initializeMessages();
+    }, [
+        storage
+    ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if ((null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
             if (error instanceof DOMException && 'QuotaExceededError' === error.name) console.warn('Storage quota exceeded - some messages may not be saved persistently');

package/dist/lib/index.js

@@ -34,6 +34,7 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     timeCostStrElement: ()=>misc_index_js_namespaceObject.timeCostStrElement,
+    StorageType: ()=>storage_provider_js_namespaceObject.StorageType,
     actionNameForType: ()=>playground_utils_js_namespaceObject.actionNameForType,
     PlaygroundResultView: ()=>playground_result_index_js_namespaceObject.PlaygroundResultView,
     timeStr: ()=>external_utils_index_js_namespaceObject.timeStr,
@@ -53,7 +54,9 @@ __webpack_require__.d(__webpack_exports__, {
     safeOverrideAIConfig: ()=>useSafeOverrideAIConfig_js_namespaceObject.safeOverrideAIConfig,
     Logo: ()=>logo_index_js_namespaceObject.Logo,
     UniversalPlayground: ()=>universal_playground_index_js_namespaceObject.UniversalPlayground,
+    IndexedDBStorageProvider: ()=>storage_provider_js_namespaceObject.IndexedDBStorageProvider,
     NavActions: ()=>nav_actions_index_js_namespaceObject.NavActions,
+    detectBestStorageType: ()=>storage_provider_js_namespaceObject.detectBestStorageType,
     useEnvConfig: ()=>store_js_namespaceObject.useEnvConfig,
     NoOpStorageProvider: ()=>storage_provider_js_namespaceObject.NoOpStorageProvider,
     ContextPreview: ()=>context_preview_index_js_namespaceObject.ContextPreview,
@@ -66,9 +69,10 @@ __webpack_require__.d(__webpack_exports__, {
     filterBase64Value: ()=>external_utils_index_js_namespaceObject.filterBase64Value,
     NoOpContextProvider: ()=>context_provider_js_namespaceObject.NoOpContextProvider,
     highlightColorForType: ()=>color_js_namespaceObject.highlightColorForType,
+    createStorageProvider: ()=>storage_provider_js_namespaceObject.createStorageProvider,
     globalThemeConfig: ()=>color_js_namespaceObject.globalThemeConfig,
-    iconForStatus: ()=>misc_index_js_namespaceObject.iconForStatus,
-    MemoryStorageProvider: ()=>storage_provider_js_namespaceObject.MemoryStorageProvider
+    MemoryStorageProvider: ()=>storage_provider_js_namespaceObject.MemoryStorageProvider,
+    iconForStatus: ()=>misc_index_js_namespaceObject.iconForStatus
 });
 require("./component/playground/index.css");
 require("./component/universal-playground/index.css");
@@ -102,6 +106,7 @@ exports.Blackboard = __webpack_exports__.Blackboard;
 exports.ContextPreview = __webpack_exports__.ContextPreview;
 exports.EnvConfig = __webpack_exports__.EnvConfig;
 exports.EnvConfigReminder = __webpack_exports__.EnvConfigReminder;
+exports.IndexedDBStorageProvider = __webpack_exports__.IndexedDBStorageProvider;
 exports.LocalStorageProvider = __webpack_exports__.LocalStorageProvider;
 exports.Logo = __webpack_exports__.Logo;
 exports.MemoryStorageProvider = __webpack_exports__.MemoryStorageProvider;
@@ -114,11 +119,14 @@ exports.PromptInput = __webpack_exports__.PromptInput;
 exports.ServiceModeControl = __webpack_exports__.ServiceModeControl;
 exports.ShinyText = __webpack_exports__.ShinyText;
 exports.StaticContextProvider = __webpack_exports__.StaticContextProvider;
+exports.StorageType = __webpack_exports__.StorageType;
 exports.UniversalPlayground = __webpack_exports__.UniversalPlayground;
 exports.UniversalPlaygroundDefault = __webpack_exports__.UniversalPlaygroundDefault;
 exports.actionNameForType = __webpack_exports__.actionNameForType;
 exports.allScriptsFromDump = __webpack_exports__.allScriptsFromDump;
 exports.colorForName = __webpack_exports__.colorForName;
+exports.createStorageProvider = __webpack_exports__.createStorageProvider;
+exports.detectBestStorageType = __webpack_exports__.detectBestStorageType;
 exports.filterBase64Value = __webpack_exports__.filterBase64Value;
 exports.generateAnimationScripts = __webpack_exports__.generateAnimationScripts;
 exports.getPlaceholderForType = __webpack_exports__.getPlaceholderForType;
@@ -139,6 +147,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "ContextPreview",
     "EnvConfig",
     "EnvConfigReminder",
+    "IndexedDBStorageProvider",
     "LocalStorageProvider",
     "Logo",
     "MemoryStorageProvider",
@@ -151,11 +160,14 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "ServiceModeControl",
     "ShinyText",
     "StaticContextProvider",
+    "StorageType",
     "UniversalPlayground",
     "UniversalPlaygroundDefault",
     "actionNameForType",
     "allScriptsFromDump",
     "colorForName",
+    "createStorageProvider",
+    "detectBestStorageType",
     "filterBase64Value",
     "generateAnimationScripts",
     "getPlaceholderForType",

package/dist/lib/utils/replay-scripts.js

@@ -73,8 +73,9 @@ const capitalizeFirstLetter = (str)=>{
     return str.charAt(0).toUpperCase() + str.slice(1);
 };
 const allScriptsFromDump = (dump)=>{
-    let width;
-    let height;
+    const dimensionsSet = new Set();
+    let firstWidth;
+    let firstHeight;
     let sdkVersion;
     const modelBriefsSet = new Set();
     dump.executions.forEach((execution)=>{
@@ -82,12 +83,17 @@ const allScriptsFromDump = (dump)=>{
         execution.tasks.forEach((task)=>{
             var _task_uiContext_size, _task_uiContext;
             if (null == (_task_uiContext = task.uiContext) ? void 0 : null == (_task_uiContext_size = _task_uiContext.size) ? void 0 : _task_uiContext_size.width) {
-                width = task.uiContext.size.width;
-                height = task.uiContext.size.height;
+                const w = task.uiContext.size.width;
+                const h = task.uiContext.size.height;
+                if (!firstWidth) {
+                    firstWidth = w;
+                    firstHeight = h;
+                }
+                dimensionsSet.add(`${w}x${h}`);
             }
         });
     });
-    if (!width || !height) {
+    if (!firstWidth || !firstHeight) {
         console.warn('width or height is missing in dump file');
         return {
             scripts: [],
@@ -97,7 +103,7 @@ const allScriptsFromDump = (dump)=>{
     }
     const allScripts = [];
     dump.executions.forEach((execution)=>{
-        const scripts = generateAnimationScripts(execution, -1, width, height);
+        const scripts = generateAnimationScripts(execution, -1, firstWidth, firstHeight);
         if (scripts) allScripts.push(...scripts);
         execution.tasks.forEach((task)=>{
             if (task.usage) {
@@ -124,8 +130,8 @@ const allScriptsFromDump = (dump)=>{
     })();
     return {
         scripts: allScriptsWithoutIntermediateDoneFrame,
-        width,
-        height,
+        width: firstWidth,
+        height: firstHeight,
         sdkVersion,
         modelBriefs
     };
@@ -174,14 +180,16 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
         if ('Planning' === task.type) {
             const planningTask = task;
             if (planningTask.recorder && planningTask.recorder.length > 0) {
-                var _planningTask_recorder_, _planningTask_recorder;
+                var _planningTask_recorder_, _planningTask_recorder, _task_uiContext_size, _task_uiContext, _task_uiContext_size1, _task_uiContext1;
                 scripts.push({
                     type: 'img',
                     img: null == (_planningTask_recorder = planningTask.recorder) ? void 0 : null == (_planningTask_recorder_ = _planningTask_recorder[0]) ? void 0 : _planningTask_recorder_.screenshot,
                     camera: 0 === index ? fullPageCameraState : void 0,
                     duration: stillDuration,
                     title: (0, agent_namespaceObject.typeStr)(task),
-                    subTitle: (0, agent_namespaceObject.paramStr)(task)
+                    subTitle: (0, agent_namespaceObject.paramStr)(task),
+                    imageWidth: (null == (_task_uiContext = task.uiContext) ? void 0 : null == (_task_uiContext_size = _task_uiContext.size) ? void 0 : _task_uiContext_size.width) || imageWidth,
+                    imageHeight: (null == (_task_uiContext1 = task.uiContext) ? void 0 : null == (_task_uiContext_size1 = _task_uiContext1.size) ? void 0 : _task_uiContext_size1.height) || imageHeight
                 });
             }
         } else if ('Insight' === task.type && 'Locate' === task.subType) {
@@ -197,16 +205,21 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
             };
             const context = insightTask.uiContext;
             if (null == context ? void 0 : context.screenshotBase64) {
-                var _insightTask_log, _insightTask_output1, _insightDump_taskInfo;
+                var _insightTask_log, _insightTask_output1, _insightDump_taskInfo, _context_size, _context_size1;
                 const insightDump = null == (_insightTask_log = insightTask.log) ? void 0 : _insightTask_log.dump;
                 const insightContentLength = context.tree ? (0, extractor_namespaceObject.treeToList)(context.tree).length : 0;
-                if (context.screenshotBase64) scripts.push({
-                    type: 'img',
-                    img: context.screenshotBase64,
-                    duration: stillAfterInsightDuration,
-                    title,
-                    subTitle
-                });
+                if (context.screenshotBase64) {
+                    var _context_size2, _context_size3;
+                    scripts.push({
+                        type: 'img',
+                        img: context.screenshotBase64,
+                        duration: stillAfterInsightDuration,
+                        title,
+                        subTitle,
+                        imageWidth: (null == (_context_size2 = context.size) ? void 0 : _context_size2.width) || imageWidth,
+                        imageHeight: (null == (_context_size3 = context.size) ? void 0 : _context_size3.height) || imageHeight
+                    });
+                }
                 let cameraState;
                 cameraState = currentCameraState === fullPageCameraState ? void 0 : insightCameraState ? mergeTwoCameraState(currentCameraState, insightCameraState) : void 0;
                 scripts.push({
@@ -219,7 +232,9 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                     duration: insightContentLength > 20 ? locateDuration : 0.5 * locateDuration,
                     insightCameraDuration: locateDuration,
                     title,
-                    subTitle
+                    subTitle,
+                    imageWidth: (null == (_context_size = context.size) ? void 0 : _context_size.width) || imageWidth,
+                    imageHeight: (null == (_context_size1 = context.size) ? void 0 : _context_size1.height) || imageHeight
                 });
                 scripts.push({
                     type: 'sleep',
@@ -230,7 +245,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                 insightOnTop = true;
             }
         } else if ('Action' === task.type && 'FalsyConditionStatement' !== task.subType) {
-            var _task_recorder_, _task_recorder, _task_recorder_1, _task_recorder1;
+            var _task_recorder_, _task_recorder, _task_uiContext_size2, _task_uiContext2, _task_uiContext_size3, _task_uiContext3, _task_recorder_1, _task_recorder1;
             const title = (0, agent_namespaceObject.typeStr)(task);
             const subTitle = (0, agent_namespaceObject.paramStr)(task);
             scripts.push(pointerScript(external_index_js_namespaceObject.mousePointer, title, subTitle));
@@ -241,7 +256,9 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                 duration: actionDuration,
                 camera: 'Sleep' === task.subType ? fullPageCameraState : insightCameraState,
                 title,
-                subTitle
+                subTitle,
+                imageWidth: (null == (_task_uiContext2 = task.uiContext) ? void 0 : null == (_task_uiContext_size2 = _task_uiContext2.size) ? void 0 : _task_uiContext_size2.width) || imageWidth,
+                imageHeight: (null == (_task_uiContext3 = task.uiContext) ? void 0 : null == (_task_uiContext_size3 = _task_uiContext3.size) ? void 0 : _task_uiContext_size3.height) || imageHeight
             });
             if (insightOnTop) {
                 scripts.push({
@@ -254,7 +271,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
             }
             const imgStillDuration = index < taskCount - 1 ? stillDuration : 0;
             if (null == (_task_recorder1 = task.recorder) ? void 0 : null == (_task_recorder_1 = _task_recorder1[1]) ? void 0 : _task_recorder_1.screenshot) {
-                var _task_recorder_2, _task_recorder2;
+                var _task_recorder_2, _task_recorder2, _task_uiContext_size4, _task_uiContext4, _task_uiContext_size5, _task_uiContext5;
                 scripts.push({
                     type: 'spinning-pointer',
                     duration: actionSpinningPointerDuration,
@@ -267,7 +284,9 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                     img: null == (_task_recorder2 = task.recorder) ? void 0 : null == (_task_recorder_2 = _task_recorder2[1]) ? void 0 : _task_recorder_2.screenshot,
                     duration: imgStillDuration,
                     title,
-                    subTitle
+                    subTitle,
+                    imageWidth: (null == (_task_uiContext4 = task.uiContext) ? void 0 : null == (_task_uiContext_size4 = _task_uiContext4.size) ? void 0 : _task_uiContext_size4.width) || imageWidth,
+                    imageHeight: (null == (_task_uiContext5 = task.uiContext) ? void 0 : null == (_task_uiContext_size5 = _task_uiContext5.size) ? void 0 : _task_uiContext_size5.height) || imageHeight
                 });
             } else scripts.push({
                 type: 'sleep',
@@ -280,16 +299,22 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
             const title = (0, agent_namespaceObject.typeStr)(task);
             const subTitle = (0, agent_namespaceObject.paramStr)(task);
             const screenshot = null == (_task_recorder3 = task.recorder) ? void 0 : null == (_task_recorder_3 = _task_recorder3[task.recorder.length - 1]) ? void 0 : _task_recorder_3.screenshot;
-            if (screenshot) scripts.push({
-                type: 'img',
-                img: screenshot,
-                duration: stillDuration,
-                camera: fullPageCameraState,
-                title,
-                subTitle
-            });
+            if (screenshot) {
+                var _task_uiContext_size6, _task_uiContext6, _task_uiContext_size7, _task_uiContext7;
+                scripts.push({
+                    type: 'img',
+                    img: screenshot,
+                    duration: stillDuration,
+                    camera: fullPageCameraState,
+                    title,
+                    subTitle,
+                    imageWidth: (null == (_task_uiContext6 = task.uiContext) ? void 0 : null == (_task_uiContext_size6 = _task_uiContext6.size) ? void 0 : _task_uiContext_size6.width) || imageWidth,
+                    imageHeight: (null == (_task_uiContext7 = task.uiContext) ? void 0 : null == (_task_uiContext_size7 = _task_uiContext7.size) ? void 0 : _task_uiContext_size7.height) || imageHeight
+                });
+            }
         }
         if ('finished' !== task.status) {
+            var _task_uiContext_size8, _task_uiContext8, _task_uiContext_size9, _task_uiContext9;
             errorStateFlag = true;
             const errorTitle = (0, agent_namespaceObject.typeStr)(task);
             const errorMsg = task.errorMessage || 'unknown error';
@@ -300,7 +325,9 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                 camera: fullPageCameraState,
                 duration: stillDuration,
                 title: errorTitle,
-                subTitle: errorSubTitle
+                subTitle: errorSubTitle,
+                imageWidth: (null == (_task_uiContext8 = task.uiContext) ? void 0 : null == (_task_uiContext_size8 = _task_uiContext8.size) ? void 0 : _task_uiContext_size8.width) || imageWidth,
+                imageHeight: (null == (_task_uiContext9 = task.uiContext) ? void 0 : null == (_task_uiContext_size9 = _task_uiContext9.size) ? void 0 : _task_uiContext_size9.height) || imageHeight
             });
             return;
         }

package/dist/types/component/universal-playground/providers/indexeddb-storage-provider.d.ts

@@ -0,0 +1,71 @@
+import type { InfoListItem, StorageProvider } from '../../../types';
+/**
+ * IndexedDB Storage implementation for playground message persistence
+ * Provides much larger storage capacity compared to localStorage
+ */
+export declare class IndexedDBStorageProvider implements StorageProvider {
+    private dbManager;
+    private namespace;
+    private messagesCleanup;
+    private resultsCleanup;
+    constructor(namespace?: string);
+    /**
+     * Save messages to IndexedDB
+     */
+    saveMessages(messages: InfoListItem[]): Promise<void>;
+    /**
+     * Load messages from IndexedDB
+     */
+    loadMessages(): Promise<InfoListItem[]>;
+    /**
+     * Clear all messages from IndexedDB
+     */
+    clearMessages(): Promise<void>;
+    /**
+     * Save a single result to IndexedDB with compression
+     */
+    saveResult(id: string, result: InfoListItem): Promise<void>;
+    /**
+     * Load a single result from IndexedDB
+     */
+    loadResult(id: string): Promise<InfoListItem | null>;
+    /**
+     * Compress result data for storage while preserving playback functionality
+     */
+    private compressResultForStorage;
+    /**
+     * Compress screenshot if it exceeds size threshold
+     */
+    private compressScreenshotIfNeeded;
+    /**
+     * Get storage statistics
+     */
+    getStorageStats(): Promise<{
+        messageCount: number;
+        resultCount: number;
+    }>;
+    /**
+     * Manually trigger cleanup
+     */
+    cleanup(): Promise<void>;
+}
+/**
+ * Memory-based storage provider for IndexedDB fallback
+ */
+export declare class MemoryStorageProvider implements StorageProvider {
+    private messages;
+    private results;
+    saveMessages(messages: InfoListItem[]): Promise<void>;
+    loadMessages(): Promise<InfoListItem[]>;
+    clearMessages(): Promise<void>;
+    saveResult(id: string, result: InfoListItem): Promise<void>;
+}
+/**
+ * No-op storage provider for disabled storage
+ */
+export declare class NoOpStorageProvider implements StorageProvider {
+    saveMessages(_messages: InfoListItem[]): Promise<void>;
+    loadMessages(): Promise<InfoListItem[]>;
+    clearMessages(): Promise<void>;
+    saveResult(_id: string, _result: InfoListItem): Promise<void>;
+}

package/dist/types/component/universal-playground/providers/storage-provider.d.ts

@@ -1,4 +1,5 @@
 import type { InfoListItem, StorageProvider } from '../../../types';
+import { MemoryStorageProvider as IndexedDBMemoryStorageProvider, NoOpStorageProvider as IndexedDBNoOpStorageProvider, IndexedDBStorageProvider } from './indexeddb-storage-provider';
 /**
  * Local Storage implementation for playground message persistence
  */
@@ -40,3 +41,18 @@ export declare class NoOpStorageProvider implements StorageProvider {
     clearMessages(): Promise<void>;
     saveResult(_id: string, _result: InfoListItem): Promise<void>;
 }
+/**
+ * Storage type enumeration
+ */
+export declare enum StorageType {
+    INDEXEDDB = "indexeddb",
+    LOCALSTORAGE = "localStorage",
+    MEMORY = "memory",
+    NONE = "none"
+}
+/**
+ * Factory function to create the appropriate storage provider
+ */
+export declare function createStorageProvider(type?: StorageType, namespace?: string): StorageProvider;
+export declare function detectBestStorageType(): StorageType;
+export { IndexedDBStorageProvider, IndexedDBMemoryStorageProvider, IndexedDBNoOpStorageProvider, };

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

package/dist/types/index.d.ts

@@ -23,5 +23,5 @@ export { timeStr, filterBase64Value } from './utils';
 export { default as ShinyText } from './component/shiny-text';
 export { UniversalPlayground, default as UniversalPlaygroundDefault, } from './component/universal-playground';
 export type { UniversalPlaygroundProps, PlaygroundSDKLike, StorageProvider, ContextProvider, UniversalPlaygroundConfig, PlaygroundBranding, InfoListItem, FormValue, ExecutionOptions, ProgressCallback, } from './types';
-export { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, } from './component/universal-playground/providers/storage-provider';
+export { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, IndexedDBStorageProvider, createStorageProvider, detectBestStorageType, StorageType, } from './component/universal-playground/providers/storage-provider';
 export { BaseContextProvider, AgentContextProvider, StaticContextProvider, NoOpContextProvider, } from './component/universal-playground/providers/context-provider';

package/dist/types/utils/replay-scripts.d.ts

@@ -18,6 +18,8 @@ export interface AnimationScript {
     insightCameraDuration?: number;
     title?: string;
     subTitle?: string;
+    imageWidth?: number;
+    imageHeight?: number;
 }
 export declare const cameraStateForRect: (rect: Rect, imageWidth: number, imageHeight: number) => TargetCameraState;
 export declare const mergeTwoCameraState: (cameraState1: TargetCameraState, cameraState2: TargetCameraState) => TargetCameraState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "0.28.10-beta-20250919094051.0",
+  "version": "0.28.10",
   "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.10-beta-20250919094051.0",
-    "@midscene/shared": "0.28.10-beta-20250919094051.0",
-    "@midscene/web": "0.28.10-beta-20250919094051.0",
-    "@midscene/playground": "0.28.10-beta-20250919094051.0"
+    "@midscene/core": "0.28.10",
+    "@midscene/playground": "0.28.10",
+    "@midscene/shared": "0.28.10",
+    "@midscene/web": "0.28.10"
   },
   "license": "MIT",
   "scripts": {