@midscene/visualizer 1.5.2 → 1.5.3-beta-20260305031416.0

package/dist/lib/component/player/remotion/export-branded-video.js

@@ -0,0 +1,244 @@
+"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__, {
+    exportBrandedVideo: ()=>exportBrandedVideo
+});
+const index_js_namespaceObject = require("../../../utils/index.js");
+const external_derive_frame_state_js_namespaceObject = require("./derive-frame-state.js");
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
+const W = 960;
+const H = 540;
+const POINTER_PHASE = 0.375;
+const CROSSFADE_FRAMES = 10;
+function clamp(v, lo, hi) {
+    return Math.min(Math.max(v, lo), hi);
+}
+function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+function loadImage(src) {
+    return new Promise((resolve, reject)=>{
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = ()=>resolve(img);
+        img.onerror = reject;
+        img.src = src;
+    });
+}
+function drawInsightOverlays(ctx, insights, cameraTransform, bx, contentY) {
+    for (const insight of insights)if (!(insight.alpha <= 0)) {
+        ctx.save();
+        ctx.globalAlpha *= insight.alpha;
+        if (insight.highlightElement) {
+            const r = insight.highlightElement.rect;
+            const rx = bx + (r.left * cameraTransform.zoom + cameraTransform.tx * cameraTransform.zoom);
+            const ry = contentY + (r.top * cameraTransform.zoom + cameraTransform.ty * cameraTransform.zoom);
+            const rw = r.width * cameraTransform.zoom;
+            const rh = r.height * cameraTransform.zoom;
+            ctx.fillStyle = 'rgba(253, 89, 7, 0.4)';
+            ctx.fillRect(rx, ry, rw, rh);
+            ctx.strokeStyle = '#fd5907';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(rx, ry, rw, rh);
+            ctx.shadowColor = 'rgba(51, 51, 51, 0.4)';
+            ctx.shadowBlur = 2;
+            ctx.shadowOffsetX = 4;
+            ctx.shadowOffsetY = 4;
+            ctx.strokeRect(rx, ry, rw, rh);
+            ctx.shadowBlur = 0;
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
+        }
+        if (insight.searchArea) {
+            const r = insight.searchArea;
+            const rx = bx + (r.left * cameraTransform.zoom + cameraTransform.tx * cameraTransform.zoom);
+            const ry = contentY + (r.top * cameraTransform.zoom + cameraTransform.ty * cameraTransform.zoom);
+            const rw = r.width * cameraTransform.zoom;
+            const rh = r.height * cameraTransform.zoom;
+            ctx.fillStyle = 'rgba(2, 131, 145, 0.4)';
+            ctx.fillRect(rx, ry, rw, rh);
+            ctx.strokeStyle = '#028391';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(rx, ry, rw, rh);
+        }
+        ctx.restore();
+    }
+}
+function drawSpinningPointer(ctx, img, x, y, elapsedMs) {
+    const progress = (Math.sin(elapsedMs / 500 - Math.PI / 2) + 1) / 2;
+    const rotation = progress * Math.PI * 2;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(rotation);
+    ctx.drawImage(img, -11, -14, 22, 28);
+    ctx.restore();
+}
+function drawSteps(ctx, stepsFrame, frameMap, imgCache, cursorImg, spinnerImg) {
+    const { scriptFrames, imageWidth: baseW, imageHeight: baseH, fps } = frameMap;
+    const st = (0, external_derive_frame_state_js_namespaceObject.deriveFrameState)(scriptFrames, stepsFrame, baseW, baseH, fps);
+    if (!st.img) return;
+    const { img, prevImg, imageWidth: imgW, imageHeight: imgH, camera, prevCamera, pointerMoved, imageChanged, rawProgress, frameInScript: fInScript, spinning, spinningElapsedMs, insights } = st;
+    const pT = pointerMoved ? Math.min(rawProgress / POINTER_PHASE, 1) : rawProgress;
+    const cT = pointerMoved ? rawProgress <= POINTER_PHASE ? 0 : Math.min((rawProgress - POINTER_PHASE) / (1 - POINTER_PHASE), 1) : rawProgress;
+    const camL = lerp(prevCamera.left, camera.left, cT);
+    const camT2 = lerp(prevCamera.top, camera.top, cT);
+    const camW = lerp(prevCamera.width, camera.width, cT);
+    const ptrX = lerp(prevCamera.pointerLeft, camera.pointerLeft, pT);
+    const ptrY = lerp(prevCamera.pointerTop, camera.pointerTop, pT);
+    const zoom = imgW / camW;
+    const tx = W / imgW * -camL;
+    const ty = H / imgH * -camT2;
+    const crossAlpha = imageChanged ? clamp(fInScript / CROSSFADE_FRAMES, 0, 1) : 1;
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, W, H);
+    const drawImg = (src, alpha)=>{
+        const imgEl = imgCache.get(src);
+        if (!imgEl || alpha <= 0) return;
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        ctx.beginPath();
+        ctx.rect(0, 0, W, H);
+        ctx.clip();
+        ctx.translate(tx * zoom, ty * zoom);
+        ctx.scale(zoom, zoom);
+        ctx.drawImage(imgEl, 0, 0, W, H);
+        ctx.restore();
+    };
+    if (imageChanged && prevImg && crossAlpha < 1) drawImg(prevImg, 1 - crossAlpha);
+    drawImg(img, imageChanged ? crossAlpha : 1);
+    if (insights.length > 0) drawInsightOverlays(ctx, insights, {
+        zoom,
+        tx,
+        ty
+    }, 0, 0);
+    const camH = imgH / imgW * camW;
+    const sX = (ptrX - camL) / camW * W;
+    const sY = (ptrY - camT2) / camH * H;
+    const hasPtrData = Math.abs(camera.pointerLeft - Math.round(baseW / 2)) > 1 || Math.abs(camera.pointerTop - Math.round(baseH / 2)) > 1 || Math.abs(prevCamera.pointerLeft - Math.round(baseW / 2)) > 1 || Math.abs(prevCamera.pointerTop - Math.round(baseH / 2)) > 1;
+    if (spinning && spinnerImg) drawSpinningPointer(ctx, spinnerImg, sX, sY, spinningElapsedMs);
+    if (!spinning && hasPtrData && cursorImg) ctx.drawImage(cursorImg, sX - 3, sY - 2, 22, 28);
+}
+function exportBrandedVideo(frameMap, onProgress) {
+    return _async_to_generator(function*() {
+        const { totalDurationInFrames: total, fps } = frameMap;
+        const imgSrcs = new Set();
+        for (const sf of frameMap.scriptFrames)if (sf.img) imgSrcs.add(sf.img);
+        const imgCache = new Map();
+        yield Promise.all([
+            ...imgSrcs
+        ].map((src)=>_async_to_generator(function*() {
+                try {
+                    imgCache.set(src, (yield loadImage(src)));
+                } catch (e) {}
+            })()));
+        let cursorImg = null;
+        let spinnerImg = null;
+        try {
+            cursorImg = yield loadImage(index_js_namespaceObject.mousePointer);
+        } catch (e) {}
+        try {
+            spinnerImg = yield loadImage(index_js_namespaceObject.mouseLoading);
+        } catch (e) {}
+        const canvas = document.createElement('canvas');
+        canvas.width = W;
+        canvas.height = H;
+        const ctx = canvas.getContext('2d');
+        const stream = canvas.captureStream(fps);
+        const recorder = new MediaRecorder(stream, {
+            mimeType: 'video/webm'
+        });
+        const chunks = [];
+        recorder.ondataavailable = (e)=>{
+            if (e.data.size > 0) chunks.push(e.data);
+        };
+        return new Promise((resolve, reject)=>{
+            recorder.onerror = ()=>reject(new Error('MediaRecorder error'));
+            recorder.onstop = ()=>{
+                if (0 === chunks.length) return void reject(new Error('No video data'));
+                const blob = new Blob(chunks, {
+                    type: 'video/webm'
+                });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'midscene_replay.webm';
+                a.click();
+                stream.getTracks().forEach((track)=>track.stop());
+                setTimeout(()=>URL.revokeObjectURL(url), 1000);
+                resolve();
+            };
+            recorder.start();
+            const frameDuration = 1000 / fps;
+            const startTime = performance.now();
+            let lastFrame = -1;
+            const tick = ()=>{
+                const elapsed = performance.now() - startTime;
+                const targetFrame = Math.min(Math.floor(elapsed / frameDuration), total - 1);
+                if (targetFrame > lastFrame) {
+                    lastFrame = targetFrame;
+                    ctx.clearRect(0, 0, W, H);
+                    drawSteps(ctx, targetFrame, frameMap, imgCache, cursorImg, spinnerImg);
+                    null == onProgress || onProgress((targetFrame + 1) / total);
+                }
+                if (targetFrame < total - 1) requestAnimationFrame(tick);
+                else setTimeout(()=>recorder.stop(), 2 * frameDuration);
+            };
+            requestAnimationFrame(tick);
+        });
+    })();
+}
+exports.exportBrandedVideo = __webpack_exports__.exportBrandedVideo;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "exportBrandedVideo"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/player/remotion/frame-calculator.js

@@ -0,0 +1,186 @@
+"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__, {
+    FPS: ()=>FPS,
+    calculateFrameMap: ()=>calculateFrameMap
+});
+const FPS = 30;
+function calculateFrameMap(scripts) {
+    let baseImageWidth = 1920;
+    let baseImageHeight = 1080;
+    for (const s of scripts)if (('img' === s.type || 'insight' === s.type) && s.img) {
+        baseImageWidth = s.imageWidth || 1920;
+        baseImageHeight = s.imageHeight || 1080;
+        break;
+    }
+    const scriptFrames = [];
+    let currentFrame = 0;
+    for (const script of scripts){
+        const durationMs = script.duration;
+        switch(script.type){
+            case 'sleep':
+                {
+                    const frames = Math.ceil(durationMs / 1000 * FPS);
+                    scriptFrames.push({
+                        type: 'sleep',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    });
+                    currentFrame += frames;
+                    break;
+                }
+            case 'img':
+                {
+                    const frames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    const camera = script.camera;
+                    const iw = script.imageWidth || baseImageWidth;
+                    const ih = script.imageHeight || baseImageHeight;
+                    const sf = {
+                        type: 'img',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        img: script.img,
+                        imageWidth: iw,
+                        imageHeight: ih,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    };
+                    if (camera) {
+                        var _camera_pointerLeft, _camera_pointerTop;
+                        sf.cameraTarget = {
+                            left: camera.left,
+                            top: camera.top,
+                            width: camera.width,
+                            pointerLeft: null != (_camera_pointerLeft = camera.pointerLeft) ? _camera_pointerLeft : Math.round(iw / 2),
+                            pointerTop: null != (_camera_pointerTop = camera.pointerTop) ? _camera_pointerTop : Math.round(ih / 2)
+                        };
+                    }
+                    scriptFrames.push(sf);
+                    currentFrame += frames;
+                    break;
+                }
+            case 'insight':
+                {
+                    const insightPhaseFrames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    const cameraDurationMs = script.insightCameraDuration || 0;
+                    const cameraPhaseFrames = Math.ceil(cameraDurationMs / 1000 * FPS);
+                    const totalFrames = insightPhaseFrames + cameraPhaseFrames;
+                    const iw = script.imageWidth || baseImageWidth;
+                    const ih = script.imageHeight || baseImageHeight;
+                    const camera = script.camera;
+                    const sf = {
+                        type: 'insight',
+                        startFrame: currentFrame,
+                        durationInFrames: totalFrames,
+                        img: script.img,
+                        imageWidth: iw,
+                        imageHeight: ih,
+                        insightPhaseFrames,
+                        cameraPhaseFrames,
+                        highlightElement: script.highlightElement,
+                        searchArea: script.searchArea,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    };
+                    if (camera) {
+                        var _camera_pointerLeft1, _camera_pointerTop1;
+                        sf.cameraTarget = {
+                            left: camera.left,
+                            top: camera.top,
+                            width: camera.width,
+                            pointerLeft: null != (_camera_pointerLeft1 = camera.pointerLeft) ? _camera_pointerLeft1 : Math.round(iw / 2),
+                            pointerTop: null != (_camera_pointerTop1 = camera.pointerTop) ? _camera_pointerTop1 : Math.round(ih / 2)
+                        };
+                    }
+                    scriptFrames.push(sf);
+                    currentFrame += totalFrames;
+                    break;
+                }
+            case 'clear-insight':
+                {
+                    const frames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    scriptFrames.push({
+                        type: 'clear-insight',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    });
+                    currentFrame += frames;
+                    break;
+                }
+            case 'spinning-pointer':
+                {
+                    const frames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    scriptFrames.push({
+                        type: 'spinning-pointer',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    });
+                    currentFrame += frames;
+                    break;
+                }
+            case 'pointer':
+                scriptFrames.push({
+                    type: 'pointer',
+                    startFrame: currentFrame,
+                    durationInFrames: 0,
+                    pointerImg: script.img,
+                    title: script.title,
+                    subTitle: script.subTitle,
+                    taskId: script.taskId
+                });
+                break;
+        }
+    }
+    const stepsDurationInFrames = Math.max(currentFrame, 1);
+    return {
+        scriptFrames,
+        totalDurationInFrames: stepsDurationInFrames,
+        fps: FPS,
+        stepsDurationInFrames,
+        imageWidth: baseImageWidth,
+        imageHeight: baseImageHeight
+    };
+}
+exports.FPS = __webpack_exports__.FPS;
+exports.calculateFrameMap = __webpack_exports__.calculateFrameMap;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FPS",
+    "calculateFrameMap"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/player/use-frame-player.js

@@ -0,0 +1,122 @@
+"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__, {
+    useFramePlayer: ()=>useFramePlayer
+});
+const external_react_namespaceObject = require("react");
+function useFramePlayer(options) {
+    const { durationInFrames, fps, autoPlay = false, loop = false } = options;
+    const [currentFrame, setCurrentFrame] = (0, external_react_namespaceObject.useState)(0);
+    const [playing, setPlaying] = (0, external_react_namespaceObject.useState)(autoPlay);
+    const playingRef = (0, external_react_namespaceObject.useRef)(playing);
+    const frameRef = (0, external_react_namespaceObject.useRef)(currentFrame);
+    var _options_playbackRate;
+    const rateRef = (0, external_react_namespaceObject.useRef)(null != (_options_playbackRate = options.playbackRate) ? _options_playbackRate : 1);
+    const durationRef = (0, external_react_namespaceObject.useRef)(durationInFrames);
+    const fpsRef = (0, external_react_namespaceObject.useRef)(fps);
+    const loopRef = (0, external_react_namespaceObject.useRef)(loop);
+    playingRef.current = playing;
+    frameRef.current = currentFrame;
+    var _options_playbackRate1;
+    rateRef.current = null != (_options_playbackRate1 = options.playbackRate) ? _options_playbackRate1 : 1;
+    durationRef.current = durationInFrames;
+    fpsRef.current = fps;
+    loopRef.current = loop;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!playing) return;
+        let rafId;
+        let lastTime = null;
+        let accumulated = 0;
+        const tick = (now)=>{
+            if (null !== lastTime) {
+                const delta = (now - lastTime) * rateRef.current;
+                accumulated += delta;
+                const frameDuration = 1000 / fpsRef.current;
+                while(accumulated >= frameDuration){
+                    accumulated -= frameDuration;
+                    const next = frameRef.current + 1;
+                    if (next >= durationRef.current) if (loopRef.current) {
+                        frameRef.current = 0;
+                        setCurrentFrame(0);
+                    } else {
+                        frameRef.current = durationRef.current - 1;
+                        setCurrentFrame(durationRef.current - 1);
+                        setPlaying(false);
+                        return;
+                    }
+                    else {
+                        frameRef.current = next;
+                        setCurrentFrame(next);
+                    }
+                }
+            }
+            lastTime = now;
+            rafId = requestAnimationFrame(tick);
+        };
+        rafId = requestAnimationFrame(tick);
+        return ()=>cancelAnimationFrame(rafId);
+    }, [
+        playing
+    ]);
+    const play = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (frameRef.current >= durationRef.current - 1) {
+            frameRef.current = 0;
+            setCurrentFrame(0);
+        }
+        setPlaying(true);
+    }, []);
+    const pause = (0, external_react_namespaceObject.useCallback)(()=>setPlaying(false), []);
+    const toggle = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (playingRef.current) setPlaying(false);
+        else {
+            if (frameRef.current >= durationRef.current - 1) {
+                frameRef.current = 0;
+                setCurrentFrame(0);
+            }
+            setPlaying(true);
+        }
+    }, []);
+    const seekTo = (0, external_react_namespaceObject.useCallback)((frame)=>{
+        const clamped = Math.max(0, Math.min(frame, durationRef.current - 1));
+        frameRef.current = clamped;
+        setCurrentFrame(clamped);
+    }, []);
+    return {
+        currentFrame,
+        playing,
+        play,
+        pause,
+        toggle,
+        seekTo
+    };
+}
+exports.useFramePlayer = __webpack_exports__.useFramePlayer;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "useFramePlayer"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -141,7 +141,20 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
         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, branding.targetName);
-    const { handleRun: executeAction, handleStop, canStop } = (0, usePlaygroundExecution_js_namespaceObject.usePlaygroundExecution)(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
+    const { handleRun: executeAction, handleStop, canStop } = (0, usePlaygroundExecution_js_namespaceObject.usePlaygroundExecution)({
+        playgroundSDK,
+        storage: effectiveStorage,
+        actionSpace,
+        loading,
+        setLoading,
+        setInfoList,
+        replayCounter,
+        setReplayCounter,
+        verticalMode,
+        currentRunningIdRef,
+        interruptedFlagRef,
+        deviceType: componentConfig.deviceType
+    });
     (0, external_react_namespaceObject.useEffect)(()=>{
         if ((null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) && config) playgroundSDK.overrideConfig(config).catch((error)=>{
             console.error('Failed to override SDK config:', error);

package/dist/lib/hooks/usePlaygroundExecution.js

@@ -116,7 +116,7 @@ function buildProgressContent(task) {
     const description = (0, agent_namespaceObject.paramStr)(task);
     return description ? `${action} - ${description}` : action;
 }
-function wrapExecutionDumpForReplay(dump) {
+function wrapExecutionDumpForReplay(dump, deviceType) {
     const modelBriefsSet = new Set();
     if ((null == dump ? void 0 : dump.tasks) && Array.isArray(dump.tasks)) dump.tasks.forEach((task)=>{
         if (task.usage) {
@@ -134,10 +134,12 @@ function wrapExecutionDumpForReplay(dump) {
         modelBriefs,
         executions: [
             dump
-        ]
+        ],
+        deviceType
     };
 }
-function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
+function usePlaygroundExecution(options) {
+    const { playgroundSDK, storage, actionSpace, loading, setLoading, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef, deviceType } = options;
     const { deepLocate, deepThink, screenshotIncluded, domIncluded } = (0, store_js_namespaceObject.useEnvConfig)();
     const handleRun = (0, external_react_namespaceObject.useCallback)((value)=>_async_to_generator(function*() {
             if (!playgroundSDK) return void console.warn('PlaygroundSDK is not available');
@@ -234,7 +236,7 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
             let counter = replayCounter;
             if (null == result ? void 0 : result.dump) {
                 if (result.dump.tasks && Array.isArray(result.dump.tasks)) {
-                    const groupedDump = wrapExecutionDumpForReplay(result.dump);
+                    const groupedDump = wrapExecutionDumpForReplay(result.dump, deviceType);
                     const info = (0, replay_scripts_js_namespaceObject.allScriptsFromDump)(groupedDump);
                     setReplayCounter((c)=>c + 1);
                     replayInfo = info;
@@ -292,7 +294,8 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         deepLocate,
         deepThink,
         screenshotIncluded,
-        domIncluded
+        domIncluded,
+        deviceType
     ]);
     const handleStop = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
             const thisRunningId = currentRunningIdRef.current;
@@ -319,7 +322,7 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
                     let replayInfo = null;
                     let counter = replayCounter;
                     if ((null == (_executionData_dump = executionData.dump) ? void 0 : _executionData_dump.tasks) && Array.isArray(executionData.dump.tasks)) {
-                        const groupedDump = wrapExecutionDumpForReplay(executionData.dump);
+                        const groupedDump = wrapExecutionDumpForReplay(executionData.dump, deviceType);
                         replayInfo = (0, replay_scripts_js_namespaceObject.allScriptsFromDump)(groupedDump);
                         setReplayCounter((c)=>c + 1);
                         counter = replayCounter + 1;
@@ -377,7 +380,8 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         setLoading,
         setInfoList,
         verticalMode,
-        replayCounter
+        replayCounter,
+        deviceType
     ]);
     const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK && !!playgroundSDK.cancelExecution;
     return {

package/dist/lib/index.js

@@ -68,6 +68,7 @@ __webpack_require__.d(__webpack_exports__, {
     globalThemeConfig: ()=>color_js_namespaceObject.globalThemeConfig,
     ContextPreview: ()=>context_preview_index_js_namespaceObject.ContextPreview,
     createStorageProvider: ()=>storage_provider_js_namespaceObject.createStorageProvider,
+    extractDumpMetaInfo: ()=>replay_scripts_js_namespaceObject.extractDumpMetaInfo,
     useTheme: ()=>useTheme_js_namespaceObject.useTheme,
     UniversalPlayground: ()=>universal_playground_index_js_namespaceObject.UniversalPlayground,
     Player: ()=>player_index_js_namespaceObject.Player,
@@ -132,6 +133,7 @@ exports.allScriptsFromDump = __webpack_exports__.allScriptsFromDump;
 exports.colorForName = __webpack_exports__.colorForName;
 exports.createStorageProvider = __webpack_exports__.createStorageProvider;
 exports.detectBestStorageType = __webpack_exports__.detectBestStorageType;
+exports.extractDumpMetaInfo = __webpack_exports__.extractDumpMetaInfo;
 exports.filterBase64Value = __webpack_exports__.filterBase64Value;
 exports.generateAnimationScripts = __webpack_exports__.generateAnimationScripts;
 exports.getPlaceholderForType = __webpack_exports__.getPlaceholderForType;
@@ -176,6 +178,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "colorForName",
     "createStorageProvider",
     "detectBestStorageType",
+    "extractDumpMetaInfo",
     "filterBase64Value",
     "generateAnimationScripts",
     "getPlaceholderForType",