@midscene/visualizer 1.5.7 → 1.5.8-beta-20260324073120.0

package/dist/es/component/config-selector/index.mjs

@@ -3,6 +3,7 @@ import { Checkbox, Dropdown, Radio, Tooltip } from "antd";
 import setting from "../../icons/setting.mjs";
 import { useEnvConfig } from "../../store/store.mjs";
 import { alwaysRefreshScreenInfoTip, autoDismissKeyboardTip, deepLocateTip, deepThinkTip, domIncludedTip, imeStrategyTip, keyboardDismissStrategyTip, screenshotIncludedTip, trackingTip } from "../../utils/constants.mjs";
+import { getDeviceCapabilities, hasDeviceSpecificConfig } from "../../utils/device-capabilities.mjs";
 const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false, deviceType })=>{
     const forceSameTabNavigation = useEnvConfig((state)=>state.forceSameTabNavigation);
     const setForceSameTabNavigation = useEnvConfig((state)=>state.setForceSameTabNavigation);
@@ -22,7 +23,8 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
     const setKeyboardDismissStrategy = useEnvConfig((state)=>state.setKeyboardDismissStrategy);
     const alwaysRefreshScreenInfo = useEnvConfig((state)=>state.alwaysRefreshScreenInfo);
     const setAlwaysRefreshScreenInfo = useEnvConfig((state)=>state.setAlwaysRefreshScreenInfo);
-    const hasDeviceOptions = 'android' === deviceType || 'ios' === deviceType;
+    const deviceCapabilities = getDeviceCapabilities(deviceType);
+    const hasDeviceOptions = hasDeviceSpecificConfig(deviceType);
     if (!enableTracking && !showDeepLocateOption && !showDeepThinkOption && !showDataExtractionOptions && !hasDeviceOptions) return null;
     const configItems = buildConfigItems();
     return /*#__PURE__*/ jsx("div", {
@@ -147,7 +149,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
                 key: 'dom-included-config'
             });
         }
-        if ('android' === deviceType) {
+        if (deviceCapabilities.supportsImeStrategy) {
             items.push({
                 label: /*#__PURE__*/ jsxs("div", {
                     style: {
@@ -180,7 +182,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
                 }),
                 key: 'ime-strategy-config'
             });
-            items.push({
+            if (deviceCapabilities.supportsAutoDismissKeyboard) items.push({
                 label: /*#__PURE__*/ jsx(Checkbox, {
                     onChange: (e)=>setAutoDismissKeyboard(e.target.checked),
                     checked: autoDismissKeyboard,
@@ -188,7 +190,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
                 }),
                 key: 'auto-dismiss-keyboard-config'
             });
-            items.push({
+            if (deviceCapabilities.supportsKeyboardDismissStrategy) items.push({
                 label: /*#__PURE__*/ jsxs("div", {
                     style: {
                         padding: '4px 0'
@@ -220,7 +222,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
                 }),
                 key: 'keyboard-dismiss-strategy-config'
             });
-            items.push({
+            if (deviceCapabilities.supportsAlwaysRefreshScreenInfo) items.push({
                 label: /*#__PURE__*/ jsx(Checkbox, {
                     onChange: (e)=>setAlwaysRefreshScreenInfo(e.target.checked),
                     checked: alwaysRefreshScreenInfo,
@@ -229,7 +231,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
                 key: 'always-refresh-screen-info-config'
             });
         }
-        if ('ios' === deviceType) items.push({
+        if (!deviceCapabilities.supportsImeStrategy && deviceCapabilities.supportsAutoDismissKeyboard) items.push({
             label: /*#__PURE__*/ jsx(Checkbox, {
                 onChange: (e)=>setAutoDismissKeyboard(e.target.checked),
                 checked: autoDismissKeyboard,

package/dist/es/component/playground/index.css

@@ -1,10 +1,30 @@
 .result-wrapper {
   justify-content: center;
+  align-items: flex-start;
   height: 100%;
   margin: 4px 0;
   display: flex;
 }
 
+.result-wrapper .player-container {
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+  min-height: 0;
+  max-height: none;
+}
+
+.result-wrapper .player-container .canvas-container {
+  height: 60vh;
+  min-height: 0;
+  max-height: 60vh;
+}
+
+.result-wrapper .player-container .player-wrapper {
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .result-wrapper .loading-container {
   flex-direction: column;
   justify-content: center;

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

@@ -1,10 +1,30 @@
 .result-wrapper {
   justify-content: center;
+  align-items: flex-start;
   height: 100%;
   margin: 4px 0;
   display: flex;
 }
 
+.result-wrapper .player-container {
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+  min-height: 0;
+  max-height: none;
+}
+
+.result-wrapper .player-container .canvas-container {
+  height: 60vh;
+  min-height: 0;
+  max-height: 60vh;
+}
+
+.result-wrapper .player-container .player-wrapper {
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .result-wrapper .loading-container {
   flex-direction: column;
   justify-content: center;

package/dist/es/component/prompt-input/index.mjs

@@ -6,6 +6,7 @@ import react, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useHistoryStore } from "../../store/history.mjs";
 import { extractDefaultValue, isLocateField, isZodObjectSchema, unwrapZodType } from "../../types.mjs";
 import { apiMetadata, defaultMainButtons } from "../../utils/constants.mjs";
+import { hasDeviceSpecificConfig } from "../../utils/device-capabilities.mjs";
 import { actionNameForType, getPlaceholderForType, isRunButtonEnabled as playground_utils_mjs_isRunButtonEnabled } from "../../utils/playground-utils.mjs";
 import { ConfigSelector } from "../config-selector/index.mjs";
 import { BooleanField, EnumField, LocateField, NumberField, TextField } from "../form-field/index.mjs";
@@ -130,7 +131,7 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         const hasDeepLocate = showDeepLocateOption;
         const hasDeepThink = showDeepThinkOption;
         const hasDataExtraction = showDataExtractionOptions && !hideDomAndScreenshotOptions;
-        const hasDeviceOptions = 'android' === deviceType || 'ios' === deviceType;
+        const hasDeviceOptions = hasDeviceSpecificConfig(deviceType);
         return hasTracking || hasDeepLocate || hasDeepThink || hasDataExtraction || hasDeviceOptions;
     }, [
         serviceMode,

package/dist/es/utils/device-capabilities.mjs

@@ -0,0 +1,13 @@
+function getDeviceCapabilities(deviceType) {
+    return {
+        supportsImeStrategy: 'android' === deviceType,
+        supportsKeyboardDismissStrategy: 'android' === deviceType,
+        supportsAutoDismissKeyboard: 'android' === deviceType || 'ios' === deviceType || 'harmony' === deviceType,
+        supportsAlwaysRefreshScreenInfo: 'android' === deviceType
+    };
+}
+function hasDeviceSpecificConfig(deviceType) {
+    const capabilities = getDeviceCapabilities(deviceType);
+    return Object.values(capabilities).some(Boolean);
+}
+export { getDeviceCapabilities, hasDeviceSpecificConfig };

package/dist/lib/component/config-selector/index.js

@@ -41,6 +41,7 @@ const setting_js_namespaceObject = require("../../icons/setting.js");
 var setting_js_default = /*#__PURE__*/ __webpack_require__.n(setting_js_namespaceObject);
 const store_js_namespaceObject = require("../../store/store.js");
 const constants_js_namespaceObject = require("../../utils/constants.js");
+const device_capabilities_js_namespaceObject = require("../../utils/device-capabilities.js");
 const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false, deviceType })=>{
     const forceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.forceSameTabNavigation);
     const setForceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.setForceSameTabNavigation);
@@ -60,7 +61,8 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
     const setKeyboardDismissStrategy = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.setKeyboardDismissStrategy);
     const alwaysRefreshScreenInfo = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.alwaysRefreshScreenInfo);
     const setAlwaysRefreshScreenInfo = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.setAlwaysRefreshScreenInfo);
-    const hasDeviceOptions = 'android' === deviceType || 'ios' === deviceType;
+    const deviceCapabilities = (0, device_capabilities_js_namespaceObject.getDeviceCapabilities)(deviceType);
+    const hasDeviceOptions = (0, device_capabilities_js_namespaceObject.hasDeviceSpecificConfig)(deviceType);
     if (!enableTracking && !showDeepLocateOption && !showDeepThinkOption && !showDataExtractionOptions && !hasDeviceOptions) return null;
     const configItems = buildConfigItems();
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -185,7 +187,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
                 key: 'dom-included-config'
             });
         }
-        if ('android' === deviceType) {
+        if (deviceCapabilities.supportsImeStrategy) {
             items.push({
                 label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     style: {
@@ -218,7 +220,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
                 }),
                 key: 'ime-strategy-config'
             });
-            items.push({
+            if (deviceCapabilities.supportsAutoDismissKeyboard) items.push({
                 label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Checkbox, {
                     onChange: (e)=>setAutoDismissKeyboard(e.target.checked),
                     checked: autoDismissKeyboard,
@@ -226,7 +228,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
                 }),
                 key: 'auto-dismiss-keyboard-config'
             });
-            items.push({
+            if (deviceCapabilities.supportsKeyboardDismissStrategy) items.push({
                 label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     style: {
                         padding: '4px 0'
@@ -258,7 +260,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
                 }),
                 key: 'keyboard-dismiss-strategy-config'
             });
-            items.push({
+            if (deviceCapabilities.supportsAlwaysRefreshScreenInfo) items.push({
                 label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Checkbox, {
                     onChange: (e)=>setAlwaysRefreshScreenInfo(e.target.checked),
                     checked: alwaysRefreshScreenInfo,
@@ -267,7 +269,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
                 key: 'always-refresh-screen-info-config'
             });
         }
-        if ('ios' === deviceType) items.push({
+        if (!deviceCapabilities.supportsImeStrategy && deviceCapabilities.supportsAutoDismissKeyboard) items.push({
             label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Checkbox, {
                 onChange: (e)=>setAutoDismissKeyboard(e.target.checked),
                 checked: autoDismissKeyboard,

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

@@ -1,10 +1,30 @@
 .result-wrapper {
   justify-content: center;
+  align-items: flex-start;
   height: 100%;
   margin: 4px 0;
   display: flex;
 }
 
+.result-wrapper .player-container {
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+  min-height: 0;
+  max-height: none;
+}
+
+.result-wrapper .player-container .canvas-container {
+  height: 60vh;
+  min-height: 0;
+  max-height: 60vh;
+}
+
+.result-wrapper .player-container .player-wrapper {
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .result-wrapper .loading-container {
   flex-direction: column;
   justify-content: center;

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

@@ -1,10 +1,30 @@
 .result-wrapper {
   justify-content: center;
+  align-items: flex-start;
   height: 100%;
   margin: 4px 0;
   display: flex;
 }
 
+.result-wrapper .player-container {
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+  min-height: 0;
+  max-height: none;
+}
+
+.result-wrapper .player-container .canvas-container {
+  height: 60vh;
+  min-height: 0;
+  max-height: 60vh;
+}
+
+.result-wrapper .player-container .player-wrapper {
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .result-wrapper .loading-container {
   flex-direction: column;
   justify-content: center;

package/dist/lib/component/prompt-input/index.js

@@ -44,6 +44,7 @@ var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_
 const history_js_namespaceObject = require("../../store/history.js");
 const external_types_js_namespaceObject = require("../../types.js");
 const constants_js_namespaceObject = require("../../utils/constants.js");
+const device_capabilities_js_namespaceObject = require("../../utils/device-capabilities.js");
 const playground_utils_js_namespaceObject = require("../../utils/playground-utils.js");
 const index_js_namespaceObject = require("../config-selector/index.js");
 const external_form_field_index_js_namespaceObject = require("../form-field/index.js");
@@ -168,7 +169,7 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         const hasDeepLocate = showDeepLocateOption;
         const hasDeepThink = showDeepThinkOption;
         const hasDataExtraction = showDataExtractionOptions && !hideDomAndScreenshotOptions;
-        const hasDeviceOptions = 'android' === deviceType || 'ios' === deviceType;
+        const hasDeviceOptions = (0, device_capabilities_js_namespaceObject.hasDeviceSpecificConfig)(deviceType);
         return hasTracking || hasDeepLocate || hasDeepThink || hasDataExtraction || hasDeviceOptions;
     }, [
         serviceMode,

package/dist/lib/utils/device-capabilities.js

@@ -0,0 +1,50 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    getDeviceCapabilities: ()=>getDeviceCapabilities,
+    hasDeviceSpecificConfig: ()=>hasDeviceSpecificConfig
+});
+function getDeviceCapabilities(deviceType) {
+    return {
+        supportsImeStrategy: 'android' === deviceType,
+        supportsKeyboardDismissStrategy: 'android' === deviceType,
+        supportsAutoDismissKeyboard: 'android' === deviceType || 'ios' === deviceType || 'harmony' === deviceType,
+        supportsAlwaysRefreshScreenInfo: 'android' === deviceType
+    };
+}
+function hasDeviceSpecificConfig(deviceType) {
+    const capabilities = getDeviceCapabilities(deviceType);
+    return Object.values(capabilities).some(Boolean);
+}
+exports.getDeviceCapabilities = __webpack_exports__.getDeviceCapabilities;
+exports.hasDeviceSpecificConfig = __webpack_exports__.hasDeviceSpecificConfig;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "getDeviceCapabilities",
+    "hasDeviceSpecificConfig"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/types/index.d.ts

@@ -22,6 +22,6 @@ export { actionNameForType, staticAgentFromContext, getPlaceholderForType, } fro
 export { timeStr, filterBase64Value } from './utils';
 export { default as ShinyText } from './component/shiny-text';
 export { UniversalPlayground, default as UniversalPlaygroundDefault, } from './component/universal-playground';
-export type { UniversalPlaygroundProps, PlaygroundSDKLike, StorageProvider, ContextProvider, UniversalPlaygroundConfig, PlaygroundBranding, InfoListItem, FormValue, ExecutionOptions, ProgressCallback, } from './types';
+export type { UniversalPlaygroundProps, PlaygroundSDKLike, StorageProvider, ContextProvider, UniversalPlaygroundConfig, PlaygroundBranding, InfoListItem, FormValue, ExecutionOptions, ProgressCallback, DeviceType, ExecutionUxHint, ExecutionUxConfig, } from './types';
 export { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, IndexedDBStorageProvider, createStorageProvider, detectBestStorageType, StorageType, } from './component/universal-playground/providers/storage-provider';
 export { BaseContextProvider, AgentContextProvider, StaticContextProvider, NoOpContextProvider, } from './component/universal-playground/providers/context-provider';

package/dist/types/types.d.ts

@@ -72,7 +72,7 @@ export declare const unwrapZodType: (field: ZodType) => {
 };
 export declare const extractDefaultValue: (field: ZodType) => unknown;
 import type { ExecutionDump, IExecutionDump } from '@midscene/core';
-import type { ExecutionOptions, PlaygroundAgent } from '@midscene/playground';
+import type { BeforeActionHook, ExecutionOptions, PlaygroundAgent, PlaygroundRuntimeInfo } from '@midscene/playground';
 export interface PlaygroundResult {
     result: any;
     dump?: ExecutionDump | IExecutionDump | null;
@@ -89,7 +89,8 @@ export interface StaticPlaygroundProps {
     context: UIContext | null;
 }
 export type ServiceModeType = 'Server' | 'In-Browser' | 'In-Browser-Extension';
-export type DeviceType = 'web' | 'android' | 'ios';
+export type DeviceType = 'web' | 'android' | 'ios' | 'harmony' | 'computer';
+export type ExecutionUxHint = 'countdown-before-run';
 export type RunType = 'aiAct' | 'aiQuery' | 'aiAssert' | 'aiTap' | 'aiDoubleClick' | 'aiHover' | 'aiInput' | 'aiRightClick' | 'aiKeyboardPress' | 'aiScroll' | 'aiLocate' | 'aiBoolean' | 'aiNumber' | 'aiString' | 'aiAsk' | 'aiWaitFor';
 export interface ReplayScriptsInfo {
     scripts: any[];
@@ -121,8 +122,14 @@ export interface PlaygroundSDKLike {
     overrideConfig?(config: any): Promise<void>;
     checkStatus?(): Promise<boolean>;
     getServiceMode?(): 'In-Browser-Extension' | 'Server';
+    getRuntimeInfo?(): Promise<PlaygroundRuntimeInfo | null>;
+    setBeforeActionHook?(hook?: BeforeActionHook): void;
     id?: string;
 }
+export interface ExecutionUxConfig {
+    hints?: ExecutionUxHint[];
+    countdownSeconds?: number;
+}
 export interface StorageProvider {
     saveMessages?(messages: InfoListItem[]): Promise<void>;
     loadMessages?(): Promise<InfoListItem[]>;
@@ -155,6 +162,7 @@ export interface UniversalPlaygroundConfig {
     serverMode?: boolean;
     showEnvConfigReminder?: boolean;
     deviceType?: DeviceType;
+    executionUx?: ExecutionUxConfig;
 }
 export interface PlaygroundBranding {
     title?: string;

package/dist/types/utils/device-capabilities.d.ts

@@ -0,0 +1,9 @@
+import type { DeviceType } from '../types';
+export interface DeviceCapabilities {
+    supportsImeStrategy: boolean;
+    supportsKeyboardDismissStrategy: boolean;
+    supportsAutoDismissKeyboard: boolean;
+    supportsAlwaysRefreshScreenInfo: boolean;
+}
+export declare function getDeviceCapabilities(deviceType?: DeviceType): DeviceCapabilities;
+export declare function hasDeviceSpecificConfig(deviceType?: DeviceType): boolean;

package/package.json

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