@midscene/visualizer 0.30.9 → 0.30.11-beta-20251218071621.0

package/dist/es/hooks/usePlaygroundExecution.mjs

@@ -1,128 +1,237 @@
+import { paramStr, typeStr } from "@midscene/core/agent";
 import { useCallback } from "react";
 import { useEnvConfig } from "../store/store.mjs";
-import { noReplayAPIs } from "@midscene/playground";
 import { BLANK_RESULT } from "../utils/constants.mjs";
 import { allScriptsFromDump } from "../utils/replay-scripts.mjs";
-function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
-    const { deepThink, screenshotIncluded, domIncluded } = useEnvConfig();
-    const handleRun = useCallback(async (value)=>{
-        if (!playgroundSDK) return void console.warn('PlaygroundSDK is not available');
-        const thisRunningId = Date.now();
-        const actionType = value.type;
-        const displayContent = `${value.type}: ${value.prompt || JSON.stringify(value.params)}`;
-        const userItem = {
-            id: `user-${Date.now()}`,
-            type: 'user',
-            content: displayContent,
-            timestamp: new Date()
-        };
-        setInfoList((prev)=>[
-                ...prev,
-                userItem
-            ]);
-        setLoading(true);
-        const result = {
-            ...BLANK_RESULT
-        };
-        const systemItem = {
-            id: `system-${thisRunningId}`,
-            type: 'system',
-            content: '',
-            timestamp: new Date(),
-            loading: true,
-            loadingProgressText: ''
-        };
-        setInfoList((prev)=>[
-                ...prev,
-                systemItem
-            ]);
-        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()}`,
-                        type: 'progress',
-                        content: tip,
-                        timestamp: new Date()
-                    };
-                    return [
-                        ...prev,
-                        progressItem
-                    ];
-                });
-            });
-            result.result = await playgroundSDK.executeAction(actionType, value, {
-                requestId: thisRunningId.toString(),
-                deepThink,
-                screenshotIncluded,
-                domIncluded
-            });
-            if ('object' == typeof result.result && null !== result.result) {
-                const resultObj = result.result;
-                if (resultObj.dump) result.dump = resultObj.dump;
-                if (resultObj.reportHTML) result.reportHTML = resultObj.reportHTML;
-                if (resultObj.error) result.error = resultObj.error;
-                if (void 0 !== resultObj.result) result.result = resultObj.result;
+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);
             }
-        } catch (e) {
-            result.error = (null == e ? void 0 : e.message) || String(e);
-            console.error('Playground execution error:', e);
-        }
-        if (interruptedFlagRef.current[thisRunningId]) return;
-        setLoading(false);
-        currentRunningIdRef.current = null;
-        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;
-        }
-        setInfoList((prev)=>prev.map((item)=>item.id === `system-${thisRunningId}` ? {
-                    ...item,
-                    content: '',
-                    loading: false,
-                    loadingProgressText: ''
-                } : item));
-        const resultItem = {
-            id: `result-${thisRunningId}`,
-            type: 'result',
-            content: 'Execution result',
-            timestamp: new Date(),
-            result: result,
-            loading: false,
-            replayScriptsInfo: replayInfo,
-            replayCounter: counter,
-            loadingProgressText: '',
-            verticalMode: verticalMode
-        };
-        setInfoList((prev)=>[
-                ...prev,
-                resultItem
-            ]);
-        if (null == storage ? void 0 : storage.saveResult) try {
-            await storage.saveResult(resultItem.id, resultItem);
-        } catch (error) {
-            console.error('Failed to save result:', error);
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function usePlaygroundExecution_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else usePlaygroundExecution_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+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}`);
         }
-        const separatorItem = {
-            id: `separator-${thisRunningId}`,
-            type: 'separator',
-            content: 'New Session',
-            timestamp: new Date()
-        };
-        setInfoList((prev)=>[
-                ...prev,
-                separatorItem
-            ]);
-    }, [
+    });
+    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, planningStrategy } = useEnvConfig();
+    const handleRun = useCallback((value)=>_async_to_generator(function*() {
+            if (!playgroundSDK) return void console.warn('PlaygroundSDK is not available');
+            const thisRunningId = Date.now();
+            const actionType = value.type;
+            const displayContent = `${value.type}: ${value.prompt || JSON.stringify(value.params)}`;
+            const userItem = {
+                id: `user-${Date.now()}`,
+                type: 'user',
+                content: displayContent,
+                timestamp: new Date()
+            };
+            setInfoList((prev)=>[
+                    ...prev,
+                    userItem
+                ]);
+            setLoading(true);
+            const result = _object_spread({}, BLANK_RESULT);
+            const systemItem = {
+                id: `system-${thisRunningId}`,
+                type: 'system',
+                content: '',
+                timestamp: new Date(),
+                loading: true,
+                loadingProgressText: ''
+            };
+            setInfoList((prev)=>[
+                    ...prev,
+                    systemItem
+                ]);
+            try {
+                currentRunningIdRef.current = thisRunningId;
+                interruptedFlagRef.current[thisRunningId] = false;
+                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: 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 [
+                            ...listWithoutCurrentProgress.slice(0, systemItemIndex + 1),
+                            ...progressItems,
+                            ...listWithoutCurrentProgress.slice(systemItemIndex + 1)
+                        ];
+                    });
+                });
+                result.result = yield playgroundSDK.executeAction(actionType, value, {
+                    requestId: thisRunningId.toString(),
+                    deepThink,
+                    planningStrategy,
+                    screenshotIncluded,
+                    domIncluded
+                });
+                if ('object' == typeof result.result && null !== result.result) {
+                    const resultObj = result.result;
+                    if (resultObj.dump) result.dump = resultObj.dump;
+                    if (resultObj.reportHTML) result.reportHTML = resultObj.reportHTML;
+                    if (resultObj.error) result.error = resultObj.error;
+                    if (void 0 !== resultObj.result) result.result = resultObj.result;
+                }
+            } 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);
+            currentRunningIdRef.current = null;
+            let replayInfo = null;
+            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 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: '',
+                        loading: false,
+                        loadingProgressText: ''
+                    }) : item));
+            const resultItem = {
+                id: `result-${thisRunningId}`,
+                type: 'result',
+                content: 'Execution result',
+                timestamp: new Date(),
+                result: result,
+                loading: false,
+                replayScriptsInfo: replayInfo,
+                replayCounter: counter,
+                loadingProgressText: '',
+                verticalMode: verticalMode,
+                actionType: actionType
+            };
+            setInfoList((prev)=>[
+                    ...prev,
+                    resultItem
+                ]);
+            if (null == storage ? void 0 : storage.saveResult) try {
+                yield storage.saveResult(resultItem.id, resultItem);
+            } catch (error) {
+                console.error('Failed to save result:', error);
+            }
+            const separatorItem = {
+                id: `separator-${thisRunningId}`,
+                type: 'separator',
+                content: 'New Session',
+                timestamp: new Date()
+            };
+            setInfoList((prev)=>[
+                    ...prev,
+                    separatorItem
+                ]);
+        })(), [
         playgroundSDK,
         storage,
         actionSpace,
@@ -134,41 +243,83 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         currentRunningIdRef,
         interruptedFlagRef,
         deepThink,
+        planningStrategy,
         screenshotIncluded,
         domIncluded
     ]);
-    const handleStop = useCallback(async ()=>{
-        const thisRunningId = currentRunningIdRef.current;
-        if (thisRunningId && playgroundSDK && playgroundSDK.cancelExecution) try {
-            await 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 ? {
-                        ...item,
-                        content: 'Operation stopped',
+    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(()=>{});
+                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,
-                        loadingProgressText: ''
-                    } : item));
-            const separatorItem = {
-                id: `separator-${thisRunningId}`,
-                type: 'separator',
-                content: 'New Session',
-                timestamp: new Date()
-            };
-            setInfoList((prev)=>[
-                    ...prev,
-                    separatorItem
-                ]);
-        } catch (error) {
-            console.error('Failed to stop execution:', error);
-        }
-    }, [
+                        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',
+                    content: 'New Session',
+                    timestamp: new Date()
+                };
+                setInfoList((prev)=>[
+                        ...prev,
+                        separatorItem
+                    ]);
+            } catch (error) {
+                console.error('Failed to stop execution:', error);
+            }
+        })(), [
         playgroundSDK,
         currentRunningIdRef,
         interruptedFlagRef,
         setLoading,
-        setInfoList
+        setInfoList,
+        verticalMode,
+        replayCounter
     ]);
     const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK && !!playgroundSDK.cancelExecution;
     return {