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

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,8 +100,34 @@ function _object_spread_props(target, source) {
     });
     return target;
 }
-function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
-    const { deepThink, screenshotIncluded, domIncluded, imeStrategy, autoDismissKeyboard, keyboardDismissStrategy, alwaysRefreshScreenInfo } = (0, store_js_namespaceObject.useEnvConfig)();
+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');
             const thisRunningId = Date.now();
@@ -133,36 +160,38 @@ 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)
                         ];
                     });
                 });
-                const deviceOptionsToSend = {
-                    imeStrategy,
-                    autoDismissKeyboard,
-                    keyboardDismissStrategy,
-                    alwaysRefreshScreenInfo
-                };
                 result.result = yield playgroundSDK.executeAction(actionType, value, {
                     requestId: thisRunningId.toString(),
                     deepThink,
                     screenshotIncluded,
-                    domIncluded,
-                    deviceOptions: deviceOptionsToSend
+                    domIncluded
                 });
                 if ('object' == typeof result.result && null !== result.result) {
                     const resultObj = result.result;
@@ -174,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);
@@ -181,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: '',
@@ -235,24 +271,60 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         interruptedFlagRef,
         deepThink,
         screenshotIncluded,
-        domIncluded,
-        imeStrategy,
-        autoDismissKeyboard,
-        keyboardDismissStrategy,
-        alwaysRefreshScreenInfo
+        domIncluded
     ]);
     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',
@@ -271,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';

package/dist/types/store/store.d.ts

@@ -1,11 +1,15 @@
 import * as Z from 'zustand';
-export declare const useBlackboardPreference: Z.UseBoundStore<Z.StoreApi<{
+export declare const useGlobalPreference: Z.UseBoundStore<Z.StoreApi<{
     backgroundVisible: boolean;
     elementsVisible: boolean;
     autoZoom: boolean;
+    modelCallDetailsEnabled: boolean;
+    darkModeEnabled: boolean;
     setBackgroundVisible: (visible: boolean) => void;
     setElementsVisible: (visible: boolean) => void;
     setAutoZoom: (enabled: boolean) => void;
+    setModelCallDetailsEnabled: (enabled: boolean) => void;
+    setDarkModeEnabled: (enabled: boolean) => void;
 }>>;
 /**
  * Service Mode

package/dist/types/types.d.ts

@@ -71,11 +71,11 @@ export declare const unwrapZodType: (field: ZodType) => {
     hasDefault: boolean;
 };
 export declare const extractDefaultValue: (field: ZodType) => unknown;
-import type { GroupedActionDump, WebUIContext } from '@midscene/core';
+import type { ExecutionDump, WebUIContext } from '@midscene/core';
 import type { ExecutionOptions, PlaygroundAgent } from '@midscene/playground';
 export interface PlaygroundResult {
     result: any;
-    dump?: GroupedActionDump | null;
+    dump?: ExecutionDump | null;
     reportHTML?: string | null;
     error: string | null;
 }
@@ -109,9 +109,15 @@ export interface PlaygroundSDKLike {
     executeAction(actionType: string, value: FormValue, options: ExecutionOptions): Promise<unknown>;
     getActionSpace(context?: any): Promise<DeviceAction<unknown>[]>;
     onProgressUpdate?: (callback: ProgressCallback) => void;
+    onDumpUpdate?: (callback: (dump: string, executionDump?: ExecutionDump) => void) => void;
     cancelExecution?(requestId: string): Promise<void>;
+    getCurrentExecutionData?(): Promise<{
+        dump: ExecutionDump | null;
+        reportHTML: string | null;
+    }>;
     overrideConfig?(config: any): Promise<void>;
     checkStatus?(): Promise<boolean>;
+    getServiceMode?(): 'In-Browser-Extension' | 'Server';
     id?: string;
 }
 export interface StorageProvider {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "1.0.1-beta-20251209024153.0",
+  "version": "1.0.1-beta-20251211095502.0",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -60,10 +60,10 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@midscene/core": "1.0.1-beta-20251209024153.0",
-    "@midscene/shared": "1.0.1-beta-20251209024153.0",
-    "@midscene/web": "1.0.1-beta-20251209024153.0",
-    "@midscene/playground": "1.0.1-beta-20251209024153.0"
+    "@midscene/core": "1.0.1-beta-20251211095502.0",
+    "@midscene/playground": "1.0.1-beta-20251211095502.0",
+    "@midscene/web": "1.0.1-beta-20251211095502.0",
+    "@midscene/shared": "1.0.1-beta-20251211095502.0"
   },
   "license": "MIT",
   "scripts": {