@midscene/visualizer 1.0.1-beta-20251209112631.0 → 1.0.1-beta-20251211095502.0

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

@@ -67,11 +67,18 @@ const PlaygroundResultView = ({ result, loading, serverValid, serviceMode, repla
                 })
             ]
         });
-        else if (replayScriptsInfo) resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_player_index_js_namespaceObject.Player, {
-            replayScripts: replayScriptsInfo.scripts,
-            imageWidth: replayScriptsInfo.width,
-            imageHeight: replayScriptsInfo.height,
-            reportFileContent: ('In-Browser-Extension' === serviceMode || 'Server' === serviceMode) && (null == result ? void 0 : result.reportHTML) ? null == result ? void 0 : result.reportHTML : null,
+        else if (replayScriptsInfo) {
+            const reportContent = ('In-Browser-Extension' === serviceMode || 'Server' === serviceMode) && (null == result ? void 0 : result.reportHTML) ? null == result ? void 0 : result.reportHTML : null;
+            resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_player_index_js_namespaceObject.Player, {
+                replayScripts: replayScriptsInfo.scripts,
+                imageWidth: replayScriptsInfo.width,
+                imageHeight: replayScriptsInfo.height,
+                reportFileContent: reportContent,
+                fitMode: fitMode,
+                autoZoom: autoZoom
+            }, replayCounter);
+        } else if ((null == result ? void 0 : result.reportHTML) && ('In-Browser-Extension' === serviceMode || 'Server' === serviceMode)) resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_player_index_js_namespaceObject.Player, {
+            reportFileContent: result.reportHTML,
             fitMode: fitMode,
             autoZoom: autoZoom
         }, replayCounter);

package/dist/lib/component/shiny-text/index.css

@@ -13,6 +13,23 @@
   overflow: hidden;
 }
 
+.shiny-text.theme-blue {
+  background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
+}
+
+.shiny-text.theme-purple {
+  background-image: linear-gradient(45deg, #667eea, #764ba2, #b06ab3, #9d50bb);
+}
+
+.shiny-text.theme-green {
+  background-image: linear-gradient(45deg, #11998e, #38ef7d, #2dd4bf, #10b981);
+}
+
+.shiny-text.theme-rainbow {
+  background-image: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #9d50bb, #ff0080);
+  background-size: 400%;
+}
+
 .shiny-text:after {
   content: "";
   width: 120%;
@@ -28,9 +45,9 @@
 }
 
 .shiny-text.disabled {
-  background: #2b83ff;
-  -webkit-background-clip: text;
-  background-clip: text;
+  color: #000;
+  background: none;
+  font-weight: normal;
   animation: none;
 }
 

package/dist/lib/component/shiny-text/index.js

@@ -28,12 +28,13 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 require("./index.css");
-const ShinyText = ({ text, disabled = false, speed = 5, className = '' })=>{
+const ShinyText = ({ text, disabled = false, speed = 5, className = '', colorTheme = 'blue' })=>{
     const style = {
         '--animation-duration': `${speed}s`
     };
+    const themeClass = `theme-${colorTheme}`;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: `shiny-text ${disabled ? 'disabled' : ''} ${className}`,
+        className: `shiny-text ${themeClass} ${disabled ? 'disabled' : ''} ${className}`,
         style: style,
         children: text
     });

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

@@ -160,7 +160,6 @@
 }
 
 .playground-container .progress-description {
-  color: #000;
   padding: 8px 0;
   font-size: 14px;
   line-height: 22px;

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

@@ -52,6 +52,8 @@ const avatar_js_namespaceObject = require("../../icons/avatar.js");
 var avatar_js_default = /*#__PURE__*/ __webpack_require__.n(avatar_js_namespaceObject);
 const constants_js_namespaceObject = require("../../utils/constants.js");
 const external_prompt_input_index_js_namespaceObject = require("../prompt-input/index.js");
+const external_shiny_text_index_js_namespaceObject = require("../shiny-text/index.js");
+var external_shiny_text_index_js_default = /*#__PURE__*/ __webpack_require__.n(external_shiny_text_index_js_namespaceObject);
 const storage_provider_js_namespaceObject = require("./providers/storage-provider.js");
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -86,11 +88,16 @@ function getSDKId(sdk) {
 }
 function ErrorMessage({ error }) {
     if (!error) return null;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
-        children: [
-            "Error: ",
-            error
-        ]
+    const cleanError = error.replace(/^(Error:\s*)+/, 'Error: ');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Alert, {
+        message: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+            style: {
+                color: '#ff4d4f'
+            },
+            children: cleanError
+        }),
+        type: "error",
+        showIcon: true
     });
 }
 function UniversalPlayground({ playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true }) {
@@ -133,7 +140,7 @@ 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);
-    const { handleRun: executeAction, handleStop, canStop } = (0, usePlaygroundExecution_js_namespaceObject.usePlaygroundExecution)(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
+    const { handleRun: executeAction, handleStop, canStop } = (0, usePlaygroundExecution_js_namespaceObject.usePlaygroundExecution)(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
     (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);
@@ -156,6 +163,12 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
     const configAlreadySet = Object.keys(config || {}).length >= 1;
     const runButtonEnabled = componentConfig.serverMode || !dryMode && !actionSpaceLoading && configAlreadySet;
     const selectedType = external_antd_namespaceObject.Form.useWatch('type', form);
+    const serviceMode = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!playgroundSDK || 'function' != typeof playgroundSDK.getServiceMode) return 'Server';
+        return playgroundSDK.getServiceMode();
+    }, [
+        playgroundSDK
+    ]);
     const finalShowContextPreview = showContextPreview && false !== componentConfig.showContextPreview;
     const layout = componentConfig.layout || 'vertical';
     const showVersionInfo = false !== componentConfig.showVersionInfo;
@@ -194,9 +207,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List, {
                                 itemLayout: "vertical",
                                 dataSource: infoList,
-                                renderItem: (item)=>{
-                                    var _item_result;
-                                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List.Item, {
+                                renderItem: (item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List.Item, {
                                         className: "list-item",
                                         children: 'user' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                             className: "user-message-container",
@@ -229,9 +240,10 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                                                             ]
                                                         }),
                                                         description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_index_js_default(), {
+                                                                text: description,
                                                                 className: "progress-description",
-                                                                children: description
+                                                                disabled: !shouldShowLoading
                                                             })
                                                         }),
                                                         (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
@@ -273,50 +285,36 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                                                         })
                                                     ]
                                                 }),
-                                                (item.content || item.result) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                (item.content || item.result) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                                     className: "system-message-content",
-                                                    children: [
-                                                        'result' === item.type && (null == (_item_result = item.result) ? void 0 : _item_result.error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                            className: "error-message",
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                    className: "divider"
-                                                                }),
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
-                                                                    error: item.result.error
-                                                                })
-                                                            ]
-                                                        }),
-                                                        'result' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_playground_result_index_js_namespaceObject.PlaygroundResultView, {
-                                                            result: item.result || null,
-                                                            loading: item.loading || false,
-                                                            serverValid: true,
-                                                            serviceMode: 'Server',
-                                                            replayScriptsInfo: item.replayScriptsInfo || null,
-                                                            replayCounter: item.replayCounter || 0,
-                                                            loadingProgressText: item.loadingProgressText || '',
-                                                            verticalMode: item.verticalMode || false,
-                                                            fitMode: "width"
-                                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                    className: "system-message-text",
-                                                                    children: item.content
-                                                                }),
-                                                                item.loading && item.loadingProgressText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                    className: "loading-progress-text",
-                                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                                        children: item.loadingProgressText
-                                                                    })
+                                                    children: 'result' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_playground_result_index_js_namespaceObject.PlaygroundResultView, {
+                                                        result: item.result || null,
+                                                        loading: item.loading || false,
+                                                        serverValid: true,
+                                                        serviceMode: serviceMode,
+                                                        replayScriptsInfo: item.replayScriptsInfo || null,
+                                                        replayCounter: item.replayCounter || 0,
+                                                        loadingProgressText: item.loadingProgressText || '',
+                                                        verticalMode: item.verticalMode || false,
+                                                        fitMode: "width"
+                                                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                                        children: [
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                                className: "system-message-text",
+                                                                children: item.content
+                                                            }),
+                                                            item.loading && item.loadingProgressText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                                className: "loading-progress-text",
+                                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                    children: item.loadingProgressText
                                                                 })
-                                                            ]
-                                                        })
-                                                    ]
+                                                            })
+                                                        ]
+                                                    })
                                                 })
                                             ]
                                         })
-                                    }, item.id);
-                                }
+                                    }, item.id)
                             })
                         }),
                         showScrollToBottomButton && false !== componentConfig.enableScrollToBottom && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
@@ -336,7 +334,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_prompt_input_index_js_namespaceObject.PromptInput, {
                             runButtonEnabled: runButtonEnabled,
                             form: form,
-                            serviceMode: 'Server',
+                            serviceMode: serviceMode,
                             selectedType: selectedType,
                             dryMode: dryMode,
                             stoppable: canStop,

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

@@ -111,7 +111,7 @@ class IndexedDBStorageProvider {
                     const messagesToSave = messages.slice(-MAX_STORED_MESSAGES);
                     yield Promise.all(messagesToSave.map((msg, index)=>{
                         const lightMessage = _object_spread_props(_object_spread({}, msg), {
-                            result: void 0
+                            result: 'result' === msg.type ? void 0 : msg.result
                         });
                         const data = {
                             id: msg.id || `msg-${index}`,
@@ -183,28 +183,23 @@ class IndexedDBStorageProvider {
     }
     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 _object_spread_props(_object_spread({}, execution), {
-                tasks: (null == (_execution_tasks = execution.tasks) ? void 0 : _execution_tasks.map((task)=>{
-                    var _task_recorder;
-                    var _this_compressScreenshotIfNeeded;
-                    return _object_spread_props(_object_spread({}, task), {
-                        uiContext: task.uiContext ? _object_spread_props(_object_spread({}, 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)=>_object_spread_props(_object_spread({}, record), {
-                                screenshot: this.compressScreenshotIfNeeded(record.screenshot)
-                            }))
-                    });
-                })) || []
+        if (!(null == (_result_result = result.result) ? void 0 : null == (_result_result_dump = _result_result.dump) ? void 0 : _result_result_dump.tasks)) return result;
+        const compressedTasks = result.result.dump.tasks.map((task)=>{
+            var _task_recorder;
+            var _this_compressScreenshotIfNeeded;
+            return _object_spread_props(_object_spread({}, task), {
+                uiContext: task.uiContext ? _object_spread_props(_object_spread({}, 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)=>_object_spread_props(_object_spread({}, record), {
+                        screenshot: this.compressScreenshotIfNeeded(record.screenshot)
+                    }))
             });
         });
         return _object_spread_props(_object_spread({}, result), {
             result: _object_spread_props(_object_spread({}, result.result), {
                 dump: _object_spread_props(_object_spread({}, result.result.dump), {
-                    executions: compressedExecutions
+                    tasks: compressedTasks
                 })
             })
         });

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

@@ -124,7 +124,7 @@ class LocalStorageProvider {
                 }
                 const messagesToSave = messages.slice(-this.maxStorageItems);
                 const lightMessages = messagesToSave.map((msg)=>_object_spread_props(_object_spread({}, msg), {
-                        result: void 0
+                        result: 'result' === msg.type ? void 0 : msg.result
                     }));
                 const messageData = JSON.stringify(lightMessages);
                 localStorage.setItem(this.messagesKey, messageData);
@@ -135,7 +135,7 @@ class LocalStorageProvider {
                     try {
                         const recentMessages = messages.slice(-10);
                         const lightRecentMessages = recentMessages.map((msg)=>_object_spread_props(_object_spread({}, msg), {
-                                result: void 0
+                                result: 'result' === msg.type ? void 0 : msg.result
                             }));
                         const messageData = JSON.stringify(lightRecentMessages);
                         localStorage.setItem(this.messagesKey, messageData);

package/dist/lib/hooks/usePlaygroundExecution.js

@@ -26,6 +26,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     usePlaygroundExecution: ()=>usePlaygroundExecution
 });
+const agent_namespaceObject = require("@midscene/core/agent");
 const external_react_namespaceObject = require("react");
 const store_js_namespaceObject = require("../store/store.js");
 const playground_namespaceObject = require("@midscene/playground");
@@ -99,7 +100,33 @@ function _object_spread_props(target, source) {
     });
     return target;
 }
-function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
+function buildProgressContent(task) {
+    const action = (0, agent_namespaceObject.typeStr)(task);
+    const description = (0, agent_namespaceObject.paramStr)(task);
+    return description ? `${action} - ${description}` : action;
+}
+function wrapExecutionDumpForReplay(dump) {
+    const modelBriefsSet = new Set();
+    if ((null == dump ? void 0 : dump.tasks) && Array.isArray(dump.tasks)) dump.tasks.forEach((task)=>{
+        if (task.usage) {
+            const { model_name, model_description, intent } = task.usage;
+            if (intent && model_name) modelBriefsSet.add(model_description ? `${intent}/${model_name}(${model_description})` : `${intent}/${model_name}`);
+        }
+    });
+    else console.warn('[wrapExecutionDumpForReplay] Invalid dump structure:', dump);
+    const modelBriefs = [
+        ...modelBriefsSet
+    ];
+    return {
+        sdkVersion: '',
+        groupName: 'Playground Execution',
+        modelBriefs,
+        executions: [
+            dump
+        ]
+    };
+}
+function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
     const { 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');
@@ -133,21 +160,30 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
             try {
                 currentRunningIdRef.current = thisRunningId;
                 interruptedFlagRef.current[thisRunningId] = false;
-                if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate(()=>{});
-                if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate((tip)=>{
-                    if (interruptedFlagRef.current[thisRunningId]) return;
-                    setInfoList((prev)=>{
-                        const lastItem = prev[prev.length - 1];
-                        if (lastItem && 'progress' === lastItem.type && lastItem.content === tip) return prev;
-                        const progressItem = {
-                            id: `progress-${thisRunningId}-${Date.now()}`,
+                if (playgroundSDK.onDumpUpdate) playgroundSDK.onDumpUpdate((_, executionDump)=>{
+                    var _executionDump_tasks;
+                    if (interruptedFlagRef.current[thisRunningId] || !(null == executionDump ? void 0 : null == (_executionDump_tasks = executionDump.tasks) ? void 0 : _executionDump_tasks.length)) return;
+                    const progressItems = executionDump.tasks.map((task, index)=>{
+                        var _task_timing;
+                        return {
+                            id: `progress-${thisRunningId}-task-${index}`,
                             type: 'progress',
-                            content: tip,
-                            timestamp: new Date()
+                            content: buildProgressContent(task),
+                            timestamp: new Date((null == (_task_timing = task.timing) ? void 0 : _task_timing.start) || Date.now()),
+                            result: task.error ? {
+                                error: String(task.error),
+                                result: null
+                            } : void 0
                         };
+                    });
+                    setInfoList((prev)=>{
+                        const systemItemIndex = prev.findIndex((item)=>item.id === `system-${thisRunningId}`);
+                        if (-1 === systemItemIndex) return prev;
+                        const listWithoutCurrentProgress = prev.filter((item)=>!('progress' === item.type && item.id.startsWith(`progress-${thisRunningId}-`)));
                         return [
-                            ...prev,
-                            progressItem
+                            ...listWithoutCurrentProgress.slice(0, systemItemIndex + 1),
+                            ...progressItems,
+                            ...listWithoutCurrentProgress.slice(systemItemIndex + 1)
                         ];
                     });
                 });
@@ -167,6 +203,10 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
             } catch (e) {
                 result.error = (null == e ? void 0 : e.message) || String(e);
                 console.error('Playground execution error:', e);
+                if ('object' == typeof e && null !== e) {
+                    if (e.dump) result.dump = e.dump;
+                    if (e.reportHTML) result.reportHTML = e.reportHTML;
+                }
             }
             if (interruptedFlagRef.current[thisRunningId]) return;
             setLoading(false);
@@ -174,10 +214,13 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
             let replayInfo = null;
             let counter = replayCounter;
             if ((null == result ? void 0 : result.dump) && !playground_namespaceObject.noReplayAPIs.includes(actionType)) {
-                const info = (0, replay_scripts_js_namespaceObject.allScriptsFromDump)(result.dump);
-                setReplayCounter((c)=>c + 1);
-                replayInfo = info;
-                counter = replayCounter + 1;
+                if (result.dump.tasks && Array.isArray(result.dump.tasks)) {
+                    const groupedDump = wrapExecutionDumpForReplay(result.dump);
+                    const info = (0, replay_scripts_js_namespaceObject.allScriptsFromDump)(groupedDump);
+                    setReplayCounter((c)=>c + 1);
+                    replayInfo = info;
+                    counter = replayCounter + 1;
+                }
             }
             setInfoList((prev)=>prev.map((item)=>item.id === `system-${thisRunningId}` ? _object_spread_props(_object_spread({}, item), {
                         content: '',
@@ -233,15 +276,55 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
     const handleStop = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
             const thisRunningId = currentRunningIdRef.current;
             if (thisRunningId && playgroundSDK && playgroundSDK.cancelExecution) try {
+                let executionData = null;
+                if (playgroundSDK.getCurrentExecutionData) try {
+                    executionData = yield playgroundSDK.getCurrentExecutionData();
+                } catch (error) {
+                    console.error('Failed to get execution data before stop:', error);
+                }
                 yield playgroundSDK.cancelExecution(thisRunningId.toString());
                 interruptedFlagRef.current[thisRunningId] = true;
                 setLoading(false);
                 if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate(()=>{});
-                setInfoList((prev)=>prev.map((item)=>item.id === `system-${thisRunningId}` && item.loading ? _object_spread_props(_object_spread({}, item), {
-                            content: 'Operation stopped',
+                if (playgroundSDK.onDumpUpdate) playgroundSDK.onDumpUpdate(()=>{});
+                setInfoList((prev)=>prev.map((item)=>item.id === `system-${thisRunningId}` ? _object_spread_props(_object_spread({}, item), {
+                            content: '',
                             loading: false,
                             loadingProgressText: ''
                         }) : item));
+                if (executionData && (executionData.dump || executionData.reportHTML)) {
+                    const resultItem = {
+                        id: `stop-result-${thisRunningId}`,
+                        type: 'result',
+                        content: 'Execution stopped by user',
+                        timestamp: new Date(),
+                        result: {
+                            result: null,
+                            dump: executionData.dump,
+                            reportHTML: executionData.reportHTML,
+                            error: null
+                        },
+                        loading: false,
+                        verticalMode,
+                        replayCounter
+                    };
+                    setInfoList((prev)=>[
+                            ...prev,
+                            resultItem
+                        ]);
+                } else {
+                    const stopItem = {
+                        id: `stop-${thisRunningId}`,
+                        type: 'system',
+                        content: 'Operation stopped',
+                        timestamp: new Date(),
+                        loading: false
+                    };
+                    setInfoList((prev)=>[
+                            ...prev,
+                            stopItem
+                        ]);
+                }
                 const separatorItem = {
                     id: `separator-${thisRunningId}`,
                     type: 'separator',
@@ -260,7 +343,9 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         currentRunningIdRef,
         interruptedFlagRef,
         setLoading,
-        setInfoList
+        setInfoList,
+        verticalMode,
+        replayCounter
     ]);
     const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK && !!playgroundSDK.cancelExecution;
     return {

package/dist/lib/index.js

@@ -47,6 +47,7 @@ __webpack_require__.d(__webpack_exports__, {
     PlaygroundResultView: ()=>playground_result_index_js_namespaceObject.PlaygroundResultView,
     safeOverrideAIConfig: ()=>useSafeOverrideAIConfig_js_namespaceObject.safeOverrideAIConfig,
     highlightColorForType: ()=>color_js_namespaceObject.highlightColorForType,
+    useGlobalPreference: ()=>store_js_namespaceObject.useGlobalPreference,
     AgentContextProvider: ()=>context_provider_js_namespaceObject.AgentContextProvider,
     UniversalPlaygroundDefault: ()=>universal_playground_index_js_default(),
     actionNameForType: ()=>playground_utils_js_namespaceObject.actionNameForType,
@@ -142,6 +143,7 @@ exports.staticAgentFromContext = __webpack_exports__.staticAgentFromContext;
 exports.timeCostStrElement = __webpack_exports__.timeCostStrElement;
 exports.timeStr = __webpack_exports__.timeStr;
 exports.useEnvConfig = __webpack_exports__.useEnvConfig;
+exports.useGlobalPreference = __webpack_exports__.useGlobalPreference;
 exports.useSafeOverrideAIConfig = __webpack_exports__.useSafeOverrideAIConfig;
 exports.useServerValid = __webpack_exports__.useServerValid;
 exports.useTheme = __webpack_exports__.useTheme;
@@ -185,6 +187,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "timeCostStrElement",
     "timeStr",
     "useEnvConfig",
+    "useGlobalPreference",
     "useSafeOverrideAIConfig",
     "useServerValid",
     "useTheme"

package/dist/lib/store/store.js

@@ -25,13 +25,15 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     useEnvConfig: ()=>useEnvConfig,
-    useBlackboardPreference: ()=>useBlackboardPreference
+    useGlobalPreference: ()=>useGlobalPreference
 });
 const external_zustand_namespaceObject = require("zustand");
 const { create } = external_zustand_namespaceObject;
 const AUTO_ZOOM_KEY = 'midscene-auto-zoom';
 const BACKGROUND_VISIBLE_KEY = 'midscene-background-visible';
 const ELEMENTS_VISIBLE_KEY = 'midscene-elements-visible';
+const MODEL_CALL_DETAILS_KEY = 'midscene-model-call-details';
+const DARK_MODE_KEY = 'midscene-dark-mode';
 const parseBooleanParam = (value)=>{
     if (null === value) return;
     const normalized = value.trim().toLowerCase();
@@ -53,16 +55,23 @@ const getQueryPreference = (paramName)=>{
     const searchParams = new URLSearchParams(window.location.search);
     return parseBooleanParam(searchParams.get(paramName));
 };
-const useBlackboardPreference = create((set)=>{
+const useGlobalPreference = create((set)=>{
     const savedAutoZoom = 'false' !== localStorage.getItem(AUTO_ZOOM_KEY);
     const savedBackgroundVisible = 'false' !== localStorage.getItem(BACKGROUND_VISIBLE_KEY);
     const savedElementsVisible = 'false' !== localStorage.getItem(ELEMENTS_VISIBLE_KEY);
+    const savedModelCallDetails = 'true' === localStorage.getItem(MODEL_CALL_DETAILS_KEY);
+    const savedDarkMode = 'true' === localStorage.getItem(DARK_MODE_KEY);
     const autoZoomFromQuery = getQueryPreference('focusOnCursor');
     const elementsVisibleFromQuery = getQueryPreference('showElementMarkers');
+    const darkModeFromQuery = getQueryPreference('darkMode');
+    const initialDarkMode = void 0 === darkModeFromQuery ? savedDarkMode : darkModeFromQuery;
+    if (void 0 !== darkModeFromQuery) localStorage.setItem(DARK_MODE_KEY, initialDarkMode.toString());
     return {
         backgroundVisible: savedBackgroundVisible,
         elementsVisible: void 0 === elementsVisibleFromQuery ? savedElementsVisible : elementsVisibleFromQuery,
         autoZoom: void 0 === autoZoomFromQuery ? savedAutoZoom : autoZoomFromQuery,
+        modelCallDetailsEnabled: savedModelCallDetails,
+        darkModeEnabled: initialDarkMode,
         setBackgroundVisible: (visible)=>{
             set({
                 backgroundVisible: visible
@@ -80,6 +89,18 @@ const useBlackboardPreference = create((set)=>{
                 autoZoom: enabled
             });
             localStorage.setItem(AUTO_ZOOM_KEY, enabled.toString());
+        },
+        setModelCallDetailsEnabled: (enabled)=>{
+            set({
+                modelCallDetailsEnabled: enabled
+            });
+            localStorage.setItem(MODEL_CALL_DETAILS_KEY, enabled.toString());
+        },
+        setDarkModeEnabled: (enabled)=>{
+            set({
+                darkModeEnabled: enabled
+            });
+            localStorage.setItem(DARK_MODE_KEY, enabled.toString());
         }
     };
 });
@@ -221,11 +242,11 @@ const useEnvConfig = create((set, get)=>{
         }
     };
 });
-exports.useBlackboardPreference = __webpack_exports__.useBlackboardPreference;
 exports.useEnvConfig = __webpack_exports__.useEnvConfig;
+exports.useGlobalPreference = __webpack_exports__.useGlobalPreference;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "useBlackboardPreference",
-    "useEnvConfig"
+    "useEnvConfig",
+    "useGlobalPreference"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

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 | 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>>): {
+export declare function usePlaygroundExecution(playgroundSDK: PlaygroundSDKLike | null, storage: StorageProvider | undefined | null, actionSpace: DeviceAction<unknown>[], loading: boolean, setLoading: (loading: boolean) => void, 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/index.d.ts

@@ -1,5 +1,5 @@
 export { type AnimationScript, type ReplayScriptsInfo, allScriptsFromDump, generateAnimationScripts, } from './utils/replay-scripts';
-export { useEnvConfig } from './store/store';
+export { useEnvConfig, useGlobalPreference } from './store/store';
 export { colorForName, highlightColorForType, globalThemeConfig, } from './utils/color';
 export { EnvConfig } from './component/env-config';
 export { EnvConfigReminder } from './component/env-config-reminder';