@midscene/visualizer 0.28.10-beta-20250919074140.0 → 0.28.10-beta-20250919084614.0

package/dist/es/utils/replay-scripts.mjs

@@ -42,8 +42,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)=>{
@@ -51,12 +52,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: [],
@@ -66,7 +72,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) {
@@ -93,8 +99,8 @@ const allScriptsFromDump = (dump)=>{
     })();
     return {
         scripts: allScriptsWithoutIntermediateDoneFrame,
-        width,
-        height,
+        width: firstWidth,
+        height: firstHeight,
         sdkVersion,
         modelBriefs
     };
@@ -143,14 +149,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: typeStr(task),
-                    subTitle: paramStr(task)
+                    subTitle: 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) {
@@ -166,16 +174,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 ? 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({
@@ -188,7 +201,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',
@@ -199,7 +214,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 = typeStr(task);
             const subTitle = paramStr(task);
             scripts.push(pointerScript(mousePointer, title, subTitle));
@@ -210,7 +225,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({
@@ -223,7 +240,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,
@@ -236,7 +253,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',
@@ -249,16 +268,22 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
             const title = typeStr(task);
             const subTitle = 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 = typeStr(task);
             const errorMsg = task.errorMessage || 'unknown error';
@@ -269,7 +294,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/lib/component/player/index.js

@@ -212,9 +212,29 @@ function Player(props) {
     const cameraState = (0, external_react_namespaceObject.useRef)({
         ...basicCameraState
     });
-    const repaintImage = async ()=>{
+    const resizeCanvasIfNeeded = async (newWidth, newHeight)=>{
+        if (app.screen.width !== newWidth || app.screen.height !== newHeight) {
+            app.renderer.resize(newWidth, newHeight);
+            if (divContainerRef.current) {
+                const aspectRatio = newWidth / newHeight;
+                divContainerRef.current.style.setProperty('--canvas-aspect-ratio', aspectRatio.toString());
+            }
+            const newBasicCameraState = {
+                left: 0,
+                top: 0,
+                width: newWidth,
+                pointerLeft: Math.round(newWidth / 2),
+                pointerTop: Math.round(newHeight / 2)
+            };
+            cameraState.current = newBasicCameraState;
+        }
+    };
+    const repaintImage = async (scriptWidth, scriptHeight)=>{
         const imgToUpdate = currentImg.current;
         if (!imgToUpdate) return void console.warn('no image to update');
+        const targetWidth = scriptWidth || imageWidth;
+        const targetHeight = scriptHeight || imageHeight;
+        await resizeCanvasIfNeeded(targetWidth, targetHeight);
         if (!(0, pixi_loader_js_namespaceObject.getTextureFromCache)(imgToUpdate)) {
             console.warn('image not loaded', imgToUpdate);
             await (0, pixi_loader_js_namespaceObject.loadTexture)(imgToUpdate);
@@ -228,8 +248,8 @@ function Player(props) {
         if (child) windowContentContainer.removeChild(child);
         sprite.label = mainImgLabel;
         sprite.zIndex = LAYER_ORDER_IMG;
-        sprite.width = imageWidth;
-        sprite.height = imageHeight;
+        sprite.width = targetWidth;
+        sprite.height = targetHeight;
         windowContentContainer.addChild(sprite);
     };
     const spinningPointer = (frame)=>{
@@ -287,9 +307,10 @@ function Player(props) {
         pointerSprite.current.zIndex = LAYER_ORDER_POINTER;
         windowContentContainer.addChild(pointerSprite.current);
     };
-    const updateCamera = (state)=>{
+    const updateCamera = (state, currentWidth)=>{
         cameraState.current = state;
-        const newScale = autoZoom ? Math.max(1, imageWidth / state.width) : 1;
+        const effectiveWidth = currentWidth || app.screen.width || imageWidth;
+        const newScale = autoZoom ? Math.max(1, effectiveWidth / state.width) : 1;
         windowContentContainer.scale.set(newScale);
         windowContentContainer.x = autoZoom ? Math.round(canvasPaddingLeft - state.left * newScale) : canvasPaddingLeft;
         windowContentContainer.y = autoZoom ? Math.round(canvasPaddingTop - state.top * newScale) : canvasPaddingTop;
@@ -303,6 +324,8 @@ function Player(props) {
         }
     };
     const cameraAnimation = async (targetState, duration, frame)=>{
+        const currentCanvasWidth = app.screen.width || imageWidth;
+        const currentCanvasHeight = app.screen.height || imageHeight;
         if (!autoZoom) {
             const currentState = {
                 ...cameraState.current
@@ -322,7 +345,7 @@ function Player(props) {
                         pointerLeft: startPointerLeft + (targetState.pointerLeft - startPointerLeft) * progress,
                         pointerTop: startPointerTop + (targetState.pointerTop - startPointerTop) * progress
                     };
-                    updateCamera(nextState);
+                    updateCamera(nextState, currentCanvasWidth);
                     if (elapsedTime < duration) frame(animate);
                     else resolve();
                 };
@@ -337,7 +360,7 @@ function Player(props) {
         const startTop = currentState.top;
         const startPointerLeft = currentState.pointerLeft;
         const startPointerTop = currentState.pointerTop;
-        const startScale = currentState.width / imageWidth;
+        const startScale = currentState.width / currentCanvasWidth;
         const startTime = performance.now();
         const shouldMovePointer = 'number' == typeof targetState.pointerLeft && 'number' == typeof targetState.pointerTop && (targetState.pointerLeft !== startPointerLeft || targetState.pointerTop !== startPointerTop);
         const pointerMoveDuration = shouldMovePointer ? 0.375 * duration : 0;
@@ -362,19 +385,19 @@ function Player(props) {
                     const cameraElapsedTime = elapsedTime - cameraMoveStart;
                     const rawCameraProgress = Math.min(cameraElapsedTime / cameraMoveDuration, 1);
                     const cameraProgress = cubicImage(rawCameraProgress);
-                    const targetScale = targetState.width / imageWidth;
+                    const targetScale = targetState.width / currentCanvasWidth;
                     const progressScale = startScale + (targetScale - startScale) * cameraProgress;
-                    const progressWidth = imageWidth * progressScale;
-                    const progressHeight = imageHeight * progressScale;
+                    const progressWidth = currentCanvasWidth * progressScale;
+                    const progressHeight = currentCanvasHeight * progressScale;
                     nextState.width = progressWidth;
                     const progressLeft = startLeft + (targetState.left - startLeft) * cameraProgress;
                     const progressTop = startTop + (targetState.top - startTop) * cameraProgress;
-                    const horizontalExceed = progressLeft + progressWidth - imageWidth;
-                    const verticalExceed = progressTop + progressHeight - imageHeight;
+                    const horizontalExceed = progressLeft + progressWidth - currentCanvasWidth;
+                    const verticalExceed = progressTop + progressHeight - currentCanvasHeight;
                     nextState.left = horizontalExceed > 0 ? progressLeft + horizontalExceed : progressLeft;
                     nextState.top = verticalExceed > 0 ? progressTop + verticalExceed : progressTop;
                 }
-                updateCamera(nextState);
+                updateCamera(nextState, currentCanvasWidth);
                 if (elapsedTime < duration) frame(animate);
                 else resolve();
             };
@@ -511,7 +534,7 @@ function Player(props) {
                     var _item_context;
                     if (!item.img) throw new Error('img is required');
                     currentImg.current = item.img;
-                    await repaintImage();
+                    await repaintImage(item.imageWidth, item.imageHeight);
                     const elements = (null == (_item_context = item.context) ? void 0 : _item_context.tree) ? (0, extractor_namespaceObject.treeToList)(item.context.tree) : [];
                     const highlightElements = item.highlightElement ? [
                         item.highlightElement
@@ -528,7 +551,7 @@ function Player(props) {
                 } else if ('img' === item.type) {
                     if (item.img && item.img !== currentImg.current) {
                         currentImg.current = item.img;
-                        await repaintImage();
+                        await repaintImage(item.imageWidth, item.imageHeight);
                     }
                     if (item.camera) await cameraAnimation(item.camera, item.duration, frame);
                     else await sleep(item.duration);

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

@@ -91,10 +91,10 @@
 .playground-container .middle-dialog-area .scroll-to-bottom-button {
   z-index: 10;
   background: #fff;
+  border: 1px solid rgba(0, 0, 0, .08);
   position: absolute;
   bottom: 10px;
   right: 0;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, .04);
 }
 
 .playground-container .middle-dialog-area .scroll-to-bottom-button:hover {

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

@@ -81,11 +81,35 @@ function UniversalPlayground(param) {
     let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true } = param;
     const [form] = external_antd_namespaceObject.Form.useForm();
     const { config } = (0, store_js_namespaceObject.useEnvConfig)();
-    const effectiveStorage = (()=>{
+    const [sdkReady, setSdkReady] = (0, external_react_namespaceObject.useState)(false);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const initializeSDK = async ()=>{
+            if (playgroundSDK && 'function' == typeof playgroundSDK.checkStatus) try {
+                await playgroundSDK.checkStatus();
+                setSdkReady(true);
+            } catch (error) {
+                console.warn('Failed to initialize SDK, using default namespace:', error);
+                setSdkReady(true);
+            }
+            else setSdkReady(true);
+        };
+        initializeSDK();
+    }, [
+        playgroundSDK
+    ]);
+    const effectiveStorage = (0, external_react_namespaceObject.useMemo)(()=>{
         if (storage) return storage;
+        if (!sdkReady) return null;
         const namespace = componentConfig.storageNamespace || getSDKId(playgroundSDK);
-        return new storage_provider_js_namespaceObject.LocalStorageProvider(namespace);
-    })();
+        const bestStorageType = (0, storage_provider_js_namespaceObject.detectBestStorageType)();
+        console.log(`Using ${bestStorageType} storage for namespace: ${namespace}`);
+        return (0, storage_provider_js_namespaceObject.createStorageProvider)(bestStorageType, namespace);
+    }, [
+        storage,
+        sdkReady,
+        componentConfig.storageNamespace,
+        playgroundSDK
+    ]);
     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)(()=>{

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

@@ -0,0 +1,247 @@
+"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__, {
+    IndexedDBStorageProvider: ()=>IndexedDBStorageProvider,
+    NoOpStorageProvider: ()=>NoOpStorageProvider,
+    MemoryStorageProvider: ()=>MemoryStorageProvider
+});
+const baseDB_namespaceObject = require("@midscene/shared/baseDB");
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+const DB_NAME = 'midscene_playground';
+const DB_VERSION = 1;
+const MESSAGES_STORE = 'playground_messages';
+const RESULTS_STORE = 'playground_results';
+const MAX_STORED_MESSAGES = 100;
+const MAX_STORED_RESULTS = 50;
+class IndexedDBStorageProvider {
+    async saveMessages(messages) {
+        await (0, baseDB_namespaceObject.withErrorHandling)(async ()=>{
+            await this.dbManager.clear(MESSAGES_STORE);
+            const messagesToSave = messages.slice(-MAX_STORED_MESSAGES);
+            await Promise.all(messagesToSave.map((msg, index)=>{
+                const lightMessage = {
+                    ...msg,
+                    result: void 0
+                };
+                const data = {
+                    id: msg.id || `msg-${index}`,
+                    data: lightMessage,
+                    timestamp: msg.timestamp ? msg.timestamp.getTime() : Date.now() + index
+                };
+                return this.dbManager.put(MESSAGES_STORE, data);
+            }));
+        }, 'Failed to save messages to IndexedDB', void 0, this.messagesCleanup);
+    }
+    async loadMessages() {
+        const result = await (0, baseDB_namespaceObject.withErrorHandling)(async ()=>{
+            const messages = await this.dbManager.getAll(MESSAGES_STORE, true);
+            if (0 === messages.length) return [];
+            return Promise.all(messages.map(async (msg)=>{
+                const item = msg.data;
+                const restoredItem = {
+                    ...item,
+                    timestamp: new Date(item.timestamp)
+                };
+                if ('result' === item.type && item.id) {
+                    const fullResult = await this.loadResult(item.id);
+                    if (fullResult) {
+                        restoredItem.result = fullResult.result;
+                        restoredItem.replayScriptsInfo = fullResult.replayScriptsInfo;
+                        restoredItem.replayCounter = fullResult.replayCounter;
+                        restoredItem.verticalMode = fullResult.verticalMode;
+                    }
+                }
+                return restoredItem;
+            }));
+        }, 'Failed to load messages from IndexedDB', [], this.messagesCleanup);
+        return result || [];
+    }
+    async clearMessages() {
+        await (0, baseDB_namespaceObject.withErrorHandling)(async ()=>{
+            await Promise.all([
+                this.dbManager.clear(MESSAGES_STORE),
+                this.dbManager.clear(RESULTS_STORE)
+            ]);
+        }, 'Failed to clear messages from IndexedDB');
+    }
+    async saveResult(id, result) {
+        await (0, baseDB_namespaceObject.withErrorHandling)(async ()=>{
+            const compressedResult = this.compressResultForStorage(result);
+            const data = {
+                id,
+                data: compressedResult,
+                timestamp: Date.now(),
+                size: JSON.stringify(compressedResult).length
+            };
+            await this.dbManager.put(RESULTS_STORE, data);
+        }, 'Failed to save result to IndexedDB', void 0, this.resultsCleanup);
+    }
+    async loadResult(id) {
+        const result = await (0, baseDB_namespaceObject.withErrorHandling)(async ()=>{
+            const data = await this.dbManager.get(RESULTS_STORE, id);
+            return (null == data ? void 0 : data.data) || null;
+        }, 'Failed to load result from IndexedDB', null);
+        return result || null;
+    }
+    compressResultForStorage(result) {
+        var _result_result_dump, _result_result;
+        if (!(null == (_result_result = result.result) ? void 0 : null == (_result_result_dump = _result_result.dump) ? void 0 : _result_result_dump.executions)) return result;
+        const compressedExecutions = result.result.dump.executions.map((execution)=>{
+            var _execution_tasks;
+            return {
+                ...execution,
+                tasks: (null == (_execution_tasks = execution.tasks) ? void 0 : _execution_tasks.map((task)=>{
+                    var _task_recorder;
+                    var _this_compressScreenshotIfNeeded;
+                    return {
+                        ...task,
+                        uiContext: task.uiContext ? {
+                            ...task.uiContext,
+                            screenshotBase64: null != (_this_compressScreenshotIfNeeded = this.compressScreenshotIfNeeded(task.uiContext.screenshotBase64)) ? _this_compressScreenshotIfNeeded : task.uiContext.screenshotBase64
+                        } : task.uiContext,
+                        recorder: null == (_task_recorder = task.recorder) ? void 0 : _task_recorder.map((record)=>({
+                                ...record,
+                                screenshot: this.compressScreenshotIfNeeded(record.screenshot)
+                            }))
+                    };
+                })) || []
+            };
+        });
+        return {
+            ...result,
+            result: {
+                ...result.result,
+                dump: {
+                    ...result.result.dump,
+                    executions: compressedExecutions
+                }
+            }
+        };
+    }
+    compressScreenshotIfNeeded(screenshot) {
+        if (!screenshot) return screenshot;
+        if (screenshot.length > 1048576) {
+            const sizeKB = Math.round(screenshot.length / 1024);
+            return `[COMPRESSED: ${sizeKB}KB screenshot removed for storage]`;
+        }
+        return screenshot;
+    }
+    async getStorageStats() {
+        const result = await (0, baseDB_namespaceObject.withErrorHandling)(async ()=>{
+            const [messageCount, resultCount] = await Promise.all([
+                this.dbManager.count(MESSAGES_STORE),
+                this.dbManager.count(RESULTS_STORE)
+            ]);
+            return {
+                messageCount,
+                resultCount
+            };
+        }, 'Failed to get storage statistics', {
+            messageCount: 0,
+            resultCount: 0
+        });
+        return result || {
+            messageCount: 0,
+            resultCount: 0
+        };
+    }
+    async cleanup() {
+        await Promise.all([
+            this.messagesCleanup(),
+            this.resultsCleanup()
+        ]);
+    }
+    constructor(namespace = 'playground'){
+        _define_property(this, "dbManager", void 0);
+        _define_property(this, "namespace", void 0);
+        _define_property(this, "messagesCleanup", void 0);
+        _define_property(this, "resultsCleanup", void 0);
+        this.namespace = namespace;
+        this.dbManager = new baseDB_namespaceObject.IndexedDBManager(`${DB_NAME}_${namespace}`, DB_VERSION, [
+            {
+                name: MESSAGES_STORE,
+                keyPath: 'id'
+            },
+            {
+                name: RESULTS_STORE,
+                keyPath: 'id'
+            }
+        ]);
+        this.messagesCleanup = (0, baseDB_namespaceObject.createCleanupFunction)(this.dbManager, MESSAGES_STORE, MAX_STORED_MESSAGES);
+        this.resultsCleanup = (0, baseDB_namespaceObject.createCleanupFunction)(this.dbManager, RESULTS_STORE, MAX_STORED_RESULTS);
+    }
+}
+class MemoryStorageProvider {
+    async saveMessages(messages) {
+        this.messages = [
+            ...messages
+        ];
+    }
+    async loadMessages() {
+        return [
+            ...this.messages
+        ];
+    }
+    async clearMessages() {
+        this.messages = [];
+        this.results.clear();
+    }
+    async saveResult(id, result) {
+        this.results.set(id, result);
+    }
+    constructor(){
+        _define_property(this, "messages", []);
+        _define_property(this, "results", new Map());
+    }
+}
+class NoOpStorageProvider {
+    async saveMessages(_messages) {}
+    async loadMessages() {
+        return [];
+    }
+    async clearMessages() {}
+    async saveResult(_id, _result) {}
+}
+exports.IndexedDBStorageProvider = __webpack_exports__.IndexedDBStorageProvider;
+exports.MemoryStorageProvider = __webpack_exports__.MemoryStorageProvider;
+exports.NoOpStorageProvider = __webpack_exports__.NoOpStorageProvider;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "IndexedDBStorageProvider",
+    "MemoryStorageProvider",
+    "NoOpStorageProvider"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});