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

package/dist/es/component/player/index.mjs

@@ -9,7 +9,7 @@ import { CaretRightOutlined, DownloadOutlined, ExportOutlined, LoadingOutlined }
 import { Dropdown, Spin, Switch, Tooltip, message } from "antd";
 import global_perspective from "../../icons/global-perspective.mjs";
 import player_setting from "../../icons/player-setting.mjs";
-import { useBlackboardPreference } from "../../store/store.mjs";
+import { useGlobalPreference } from "../../store/store.mjs";
 import { getTextureFromCache, loadTexture } from "../../utils/pixi-loader.mjs";
 import { rectMarkForItem } from "../blackboard/index.mjs";
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -190,7 +190,7 @@ function Player(props) {
     var _scripts_;
     const [titleText, setTitleText] = useState('');
     const [subTitleText, setSubTitleText] = useState('');
-    const { autoZoom, setAutoZoom } = useBlackboardPreference();
+    const { autoZoom, setAutoZoom } = useGlobalPreference();
     useEffect(()=>{
         if ((null == props ? void 0 : props.autoZoom) !== void 0) setAutoZoom(props.autoZoom);
     }, [

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

@@ -29,11 +29,18 @@ const PlaygroundResultView = ({ result, loading, serverValid, serviceMode, repla
                 })
             ]
         });
-        else if (replayScriptsInfo) resultDataToShow = /*#__PURE__*/ jsx(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__*/ jsx(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__*/ jsx(Player, {
+            reportFileContent: result.reportHTML,
             fitMode: fitMode,
             autoZoom: autoZoom
         }, replayCounter);

package/dist/es/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/es/component/shiny-text/index.mjs

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "./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__*/ jsx("div", {
-        className: `shiny-text ${disabled ? 'disabled' : ''} ${className}`,
+        className: `shiny-text ${themeClass} ${disabled ? 'disabled' : ''} ${className}`,
         style: style,
         children: text
     });

package/dist/es/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/es/component/universal-playground/index.mjs

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import icons, { ArrowDownOutlined, ClearOutlined, LoadingOutlined } from "@ant-design/icons";
-import { Button, Form, List, Typography, message } from "antd";
+import { Alert, Button, Form, List, Typography, message } from "antd";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePlaygroundExecution } from "../../hooks/usePlaygroundExecution.mjs";
 import { usePlaygroundState } from "../../hooks/usePlaygroundState.mjs";
@@ -12,6 +12,7 @@ import "./index.css";
 import avatar from "../../icons/avatar.mjs";
 import { defaultMainButtons } from "../../utils/constants.mjs";
 import { PromptInput } from "../prompt-input/index.mjs";
+import shiny_text from "../shiny-text/index.mjs";
 import { createStorageProvider, detectBestStorageType } from "./providers/storage-provider.mjs";
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -46,11 +47,16 @@ function getSDKId(sdk) {
 }
 function ErrorMessage({ error }) {
     if (!error) return null;
-    return /*#__PURE__*/ jsxs("span", {
-        children: [
-            "Error: ",
-            error
-        ]
+    const cleanError = error.replace(/^(Error:\s*)+/, 'Error: ');
+    return /*#__PURE__*/ jsx(Alert, {
+        message: /*#__PURE__*/ jsx("span", {
+            style: {
+                color: '#ff4d4f'
+            },
+            children: cleanError
+        }),
+        type: "error",
+        showIcon: true
     });
 }
 function UniversalPlayground({ playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true }) {
@@ -93,7 +99,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 } = usePlaygroundState(playgroundSDK, effectiveStorage, contextProvider);
-    const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
+    const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
     useEffect(()=>{
         if ((null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) && config) playgroundSDK.overrideConfig(config).catch((error)=>{
             console.error('Failed to override SDK config:', error);
@@ -116,6 +122,12 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
     const configAlreadySet = Object.keys(config || {}).length >= 1;
     const runButtonEnabled = componentConfig.serverMode || !dryMode && !actionSpaceLoading && configAlreadySet;
     const selectedType = Form.useWatch('type', form);
+    const serviceMode = 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;
@@ -154,9 +166,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                             children: /*#__PURE__*/ jsx(List, {
                                 itemLayout: "vertical",
                                 dataSource: infoList,
-                                renderItem: (item)=>{
-                                    var _item_result;
-                                    return /*#__PURE__*/ jsx(List.Item, {
+                                renderItem: (item)=>/*#__PURE__*/ jsx(List.Item, {
                                         className: "list-item",
                                         children: 'user' === item.type ? /*#__PURE__*/ jsx("div", {
                                             className: "user-message-container",
@@ -189,9 +199,10 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                                                             ]
                                                         }),
                                                         description && /*#__PURE__*/ jsx("div", {
-                                                            children: /*#__PURE__*/ jsx("span", {
+                                                            children: /*#__PURE__*/ jsx(shiny_text, {
+                                                                text: description,
                                                                 className: "progress-description",
-                                                                children: description
+                                                                disabled: !shouldShowLoading
                                                             })
                                                         }),
                                                         (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ jsx(ErrorMessage, {
@@ -233,50 +244,36 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                                                         })
                                                     ]
                                                 }),
-                                                (item.content || item.result) && /*#__PURE__*/ jsxs("div", {
+                                                (item.content || item.result) && /*#__PURE__*/ jsx("div", {
                                                     className: "system-message-content",
-                                                    children: [
-                                                        'result' === item.type && (null == (_item_result = item.result) ? void 0 : _item_result.error) && /*#__PURE__*/ jsxs("div", {
-                                                            className: "error-message",
-                                                            children: [
-                                                                /*#__PURE__*/ jsx("div", {
-                                                                    className: "divider"
-                                                                }),
-                                                                /*#__PURE__*/ jsx(ErrorMessage, {
-                                                                    error: item.result.error
-                                                                })
-                                                            ]
-                                                        }),
-                                                        'result' === item.type ? /*#__PURE__*/ jsx(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__*/ jsxs(Fragment, {
-                                                            children: [
-                                                                /*#__PURE__*/ jsx("div", {
-                                                                    className: "system-message-text",
-                                                                    children: item.content
-                                                                }),
-                                                                item.loading && item.loadingProgressText && /*#__PURE__*/ jsx("div", {
-                                                                    className: "loading-progress-text",
-                                                                    children: /*#__PURE__*/ jsx("span", {
-                                                                        children: item.loadingProgressText
-                                                                    })
+                                                    children: 'result' === item.type ? /*#__PURE__*/ jsx(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__*/ jsxs(Fragment, {
+                                                        children: [
+                                                            /*#__PURE__*/ jsx("div", {
+                                                                className: "system-message-text",
+                                                                children: item.content
+                                                            }),
+                                                            item.loading && item.loadingProgressText && /*#__PURE__*/ jsx("div", {
+                                                                className: "loading-progress-text",
+                                                                children: /*#__PURE__*/ jsx("span", {
+                                                                    children: item.loadingProgressText
                                                                 })
-                                                            ]
-                                                        })
-                                                    ]
+                                                            })
+                                                        ]
+                                                    })
                                                 })
                                             ]
                                         })
-                                    }, item.id);
-                                }
+                                    }, item.id)
                             })
                         }),
                         showScrollToBottomButton && false !== componentConfig.enableScrollToBottom && /*#__PURE__*/ jsx(Button, {
@@ -296,7 +293,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                         /*#__PURE__*/ jsx(PromptInput, {
                             runButtonEnabled: runButtonEnabled,
                             form: form,
-                            serviceMode: 'Server',
+                            serviceMode: serviceMode,
                             selectedType: selectedType,
                             dryMode: dryMode,
                             stoppable: canStop,

package/dist/es/component/universal-playground/providers/indexeddb-storage-provider.mjs

@@ -81,7 +81,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}`,
@@ -153,28 +153,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/es/component/universal-playground/providers/storage-provider.mjs

@@ -88,7 +88,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);
@@ -99,7 +99,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/es/hooks/usePlaygroundExecution.mjs

@@ -1,3 +1,4 @@
+import { paramStr, typeStr } from "@midscene/core/agent";
 import { useCallback } from "react";
 import { useEnvConfig } from "../store/store.mjs";
 import { noReplayAPIs } from "@midscene/playground";
@@ -71,7 +72,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 = typeStr(task);
+    const description = 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 } = useEnvConfig();
     const handleRun = useCallback((value)=>_async_to_generator(function*() {
             if (!playgroundSDK) return void console.warn('PlaygroundSDK is not available');
@@ -105,21 +132,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)
                         ];
                     });
                 });
@@ -139,6 +175,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);
@@ -146,10 +186,13 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
             let replayInfo = null;
             let counter = replayCounter;
             if ((null == result ? void 0 : result.dump) && !noReplayAPIs.includes(actionType)) {
-                const info = 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 = 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: '',
@@ -205,15 +248,55 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
     const handleStop = 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',
@@ -232,7 +315,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/es/index.mjs

@@ -1,5 +1,5 @@
 import { allScriptsFromDump, generateAnimationScripts } from "./utils/replay-scripts.mjs";
-import { useEnvConfig } from "./store/store.mjs";
+import { useEnvConfig, useGlobalPreference } from "./store/store.mjs";
 import { colorForName, globalThemeConfig, highlightColorForType } from "./utils/color.mjs";
 import { EnvConfig } from "./component/env-config/index.mjs";
 import { EnvConfigReminder } from "./component/env-config-reminder/index.mjs";
@@ -22,4 +22,4 @@ import shiny_text from "./component/shiny-text/index.mjs";
 import universal_playground, { UniversalPlayground } from "./component/universal-playground/index.mjs";
 import { IndexedDBStorageProvider, LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, StorageType, createStorageProvider, detectBestStorageType } from "./component/universal-playground/providers/storage-provider.mjs";
 import { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider } from "./component/universal-playground/providers/context-provider.mjs";
-export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, IndexedDBStorageProvider, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, screenshot_viewer as ScreenshotViewer, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, StorageType, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, createStorageProvider, detectBestStorageType, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid, useTheme };
+export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, IndexedDBStorageProvider, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, screenshot_viewer as ScreenshotViewer, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, StorageType, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, createStorageProvider, detectBestStorageType, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useGlobalPreference, useSafeOverrideAIConfig, useServerValid, useTheme };

package/dist/es/store/store.mjs

@@ -30,6 +30,8 @@ const { create: store_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();
@@ -51,16 +53,23 @@ const getQueryPreference = (paramName)=>{
     const searchParams = new URLSearchParams(window.location.search);
     return parseBooleanParam(searchParams.get(paramName));
 };
-const useBlackboardPreference = store_create((set)=>{
+const useGlobalPreference = store_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
@@ -78,6 +87,18 @@ const useBlackboardPreference = store_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());
         }
     };
 });
@@ -219,4 +240,4 @@ const useEnvConfig = store_create((set, get)=>{
         }
     };
 });
-export { useBlackboardPreference, useEnvConfig };
+export { useEnvConfig, useGlobalPreference };

package/dist/lib/component/player/index.js

@@ -229,7 +229,7 @@ function Player(props) {
     var _scripts_;
     const [titleText, setTitleText] = (0, external_react_namespaceObject.useState)('');
     const [subTitleText, setSubTitleText] = (0, external_react_namespaceObject.useState)('');
-    const { autoZoom, setAutoZoom } = (0, store_js_namespaceObject.useBlackboardPreference)();
+    const { autoZoom, setAutoZoom } = (0, store_js_namespaceObject.useGlobalPreference)();
     (0, external_react_namespaceObject.useEffect)(()=>{
         if ((null == props ? void 0 : props.autoZoom) !== void 0) setAutoZoom(props.autoZoom);
     }, [