@midscene/visualizer 0.28.2-beta-20250910032414.0 → 0.28.2-beta-20250910035416.0

package/dist/types/index.d.ts

@@ -1,19 +1,24 @@
 import './component/playground/index.less';
-export { type AnimationScript, type ReplayScriptsInfo, allScriptsFromDump, generateAnimationScripts, } from './component/replay-scripts';
-export { useEnvConfig } from './component/store/store';
-export { colorForName, highlightColorForType, globalThemeConfig, } from './component/color';
+import './component/universal-playground/index.less';
+export { type AnimationScript, type ReplayScriptsInfo, allScriptsFromDump, generateAnimationScripts, } from './utils/replay-scripts';
+export { useEnvConfig } from './store/store';
+export { colorForName, highlightColorForType, globalThemeConfig, } from './utils/color';
 export { EnvConfig } from './component/env-config';
 export { Logo } from './component/logo';
 export { iconForStatus, timeCostStrElement } from './component/misc';
-export { useServerValid } from './component/playground/useServerValid';
-export { PlaygroundResultView } from './component/playground/PlaygroundResult';
-export type { PlaygroundResult } from './component/playground/playground-types';
-export { ServiceModeControl } from './component/playground/ServiceModeControl';
-export { ContextPreview } from './component/playground/ContextPreview';
-export { PromptInput } from './component/playground/PromptInput';
+export { useServerValid } from './hooks/useServerValid';
+export { PlaygroundResultView } from './component/playground-result';
+export type { PlaygroundResult } from './types';
+export { ServiceModeControl } from './component/service-mode-control';
+export { ContextPreview } from './component/context-preview';
+export { PromptInput } from './component/prompt-input';
 export { Player } from './component/player';
 export { Blackboard } from './component/blackboard';
 export { GithubStar } from './component/github-star';
-export { actionNameForType, staticAgentFromContext, getPlaceholderForType, } from './component/playground/playground-utils';
+export { actionNameForType, staticAgentFromContext, getPlaceholderForType, } from './utils/playground-utils';
 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 { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, } 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

@@ -0,0 +1,164 @@
+import type { DeviceAction, UIContext } from '@midscene/core';
+import type { ComponentType } from 'react';
+export interface ZodType {
+    _def?: {
+        typeName: 'ZodOptional' | 'ZodDefault' | 'ZodNullable' | 'ZodObject' | 'ZodEnum' | 'ZodNumber' | 'ZodString' | 'ZodBoolean';
+        innerType?: ZodType;
+        defaultValue?: () => unknown;
+        shape?: () => Record<string, ZodType>;
+        values?: string[];
+        description?: string;
+    };
+    description?: string;
+}
+export interface ZodObjectSchema extends ZodType {
+    shape: Record<string, ZodType>;
+    parse: (data: unknown) => unknown;
+}
+export interface ZodEnumSchema extends ZodType {
+    _def: {
+        typeName: 'ZodEnum';
+        values: string[];
+    };
+}
+export interface ZodNumberSchema extends ZodType {
+    _def: {
+        typeName: 'ZodNumber';
+    };
+}
+export interface ZodBooleanSchema extends ZodType {
+    _def: {
+        typeName: 'ZodBoolean';
+    };
+}
+export interface ZodRuntimeAccess extends ZodType {
+    shape?: Record<string, ZodType>;
+    description?: string;
+    typeName?: string;
+    type?: string;
+}
+export interface ActionSpaceItem extends Omit<DeviceAction<any>, 'paramSchema'> {
+    paramSchema?: ZodObjectSchema;
+}
+export interface FormParams {
+    [key: string]: string | number | boolean | null | undefined;
+}
+export declare const VALIDATION_CONSTANTS: {
+    readonly ZOD_TYPES: {
+        readonly OPTIONAL: "ZodOptional";
+        readonly DEFAULT: "ZodDefault";
+        readonly NULLABLE: "ZodNullable";
+        readonly OBJECT: "ZodObject";
+        readonly ENUM: "ZodEnum";
+        readonly NUMBER: "ZodNumber";
+        readonly STRING: "ZodString";
+        readonly BOOLEAN: "ZodBoolean";
+    };
+    readonly FIELD_FLAGS: {
+        readonly LOCATION: "midscene_location_field_flag";
+    };
+    readonly DEFAULT_VALUES: {
+        readonly ACTION_TYPE: "aiAction";
+        readonly TIMEOUT_MS: 15000;
+        readonly CHECK_INTERVAL_MS: 3000;
+    };
+};
+export declare const isZodObjectSchema: (schema: unknown) => schema is ZodObjectSchema;
+export declare const isLocateField: (field: ZodType) => boolean;
+export declare const unwrapZodType: (field: ZodType) => {
+    actualField: ZodType;
+    isOptional: boolean;
+    hasDefault: boolean;
+};
+export declare const extractDefaultValue: (field: ZodType) => unknown;
+import type { GroupedActionDump, WebUIContext } from '@midscene/core';
+import type { PlaygroundAgent } from '@midscene/playground';
+export interface PlaygroundResult {
+    result: any;
+    dump?: GroupedActionDump | null;
+    reportHTML?: string | null;
+    error: string | null;
+}
+export interface PlaygroundProps {
+    getAgent: (forceSameTabNavigation?: boolean) => PlaygroundAgent | null;
+    hideLogo?: boolean;
+    showContextPreview?: boolean;
+    dryMode?: boolean;
+}
+export interface StaticPlaygroundProps {
+    context: WebUIContext | null;
+}
+export type ServiceModeType = 'Server' | 'In-Browser' | 'In-Browser-Extension';
+export type RunType = 'aiAction' | 'aiQuery' | 'aiAssert' | 'aiTap' | 'aiDoubleClick' | 'aiHover' | 'aiInput' | 'aiRightClick' | 'aiKeyboardPress' | 'aiScroll' | 'aiLocate' | 'aiBoolean' | 'aiNumber' | 'aiString' | 'aiAsk' | 'aiWaitFor';
+export interface ReplayScriptsInfo {
+    scripts: any[];
+    width?: number;
+    height?: number;
+    sdkVersion?: string;
+    modelBriefs: string[];
+}
+export interface FormValue {
+    type: string;
+    prompt?: string;
+    params?: Record<string, unknown>;
+}
+export interface ExecutionOptions {
+    requestId?: string;
+    deepThink?: boolean;
+    screenshotIncluded?: boolean;
+    domIncluded?: boolean;
+    context?: string | object;
+}
+export type ProgressCallback = (step: string, status?: 'loading' | 'completed' | 'error') => void;
+export interface PlaygroundSDKLike {
+    executeAction(actionType: string, value: FormValue, options: ExecutionOptions): Promise<unknown>;
+    getActionSpace(context?: any): Promise<DeviceAction<unknown>[]>;
+    onProgressUpdate?: (callback: ProgressCallback) => void;
+    cancelExecution?(requestId: string): Promise<void>;
+    overrideConfig?(config: any): Promise<void>;
+    checkStatus?(): Promise<boolean>;
+}
+export interface StorageProvider {
+    saveMessages?(messages: InfoListItem[]): Promise<void>;
+    loadMessages?(): Promise<InfoListItem[]>;
+    clearMessages?(): Promise<void>;
+    saveResult?(id: string, result: InfoListItem): Promise<void>;
+}
+export interface ContextProvider {
+    getUIContext?(): Promise<UIContext>;
+    refreshContext?(): Promise<UIContext>;
+}
+export interface InfoListItem {
+    id: string;
+    type: 'user' | 'system' | 'result' | 'progress' | 'separator';
+    content: string;
+    timestamp: Date;
+    result?: PlaygroundResult | null;
+    loading?: boolean;
+    replayScriptsInfo?: ReplayScriptsInfo | null;
+    replayCounter?: number;
+    loadingProgressText?: string;
+    verticalMode?: boolean;
+}
+export interface UniversalPlaygroundConfig {
+    showContextPreview?: boolean;
+    enablePersistence?: boolean;
+    layout?: 'vertical' | 'horizontal';
+    showVersionInfo?: boolean;
+    enableScrollToBottom?: boolean;
+}
+export interface PlaygroundBranding {
+    title?: string;
+    icon?: ComponentType<any>;
+    version?: string;
+}
+export interface UniversalPlaygroundProps {
+    playgroundSDK: PlaygroundSDKLike;
+    storage?: StorageProvider;
+    contextProvider?: ContextProvider;
+    config?: UniversalPlaygroundConfig;
+    branding?: PlaygroundBranding;
+    className?: string;
+    dryMode?: boolean;
+    showContextPreview?: boolean;
+}

package/dist/types/{component/playground/playground-constants.d.ts → utils/constants.d.ts}

@@ -1,8 +1,4 @@
-import type React from 'react';
-import './index.less';
-export declare const errorMessageServerNotReady: React.JSX.Element;
-export declare const serverLaunchTip: (notReadyMessage?: React.ReactNode | string) => React.JSX.Element;
-export declare const emptyResultTip: React.JSX.Element;
+import type { InfoListItem, PlaygroundResult } from '../types';
 export declare const trackingTip = "limit popup to current tab";
 export declare const deepThinkTip = "deep think";
 export declare const screenshotIncludedTip = "include screenshot in request";
@@ -74,3 +70,5 @@ export declare const apiMetadata: {
     };
 };
 export declare const defaultMainButtons: string[];
+export declare const WELCOME_MESSAGE_TEMPLATE: Omit<InfoListItem, 'id' | 'timestamp'>;
+export declare const BLANK_RESULT: PlaygroundResult;

package/dist/types/{component → utils}/replay-scripts.d.ts

@@ -1,4 +1,3 @@
-import './player.less';
 import type { ExecutionDump, ExecutionTask, GroupedActionDump, LocateResultElement, Rect, UIContext } from '@midscene/core';
 export interface CameraState {
     left: number;

package/package.json

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

package/dist/es/blank_polyfill.mjs

@@ -1,2 +0,0 @@
-const AsyncLocalStorage = {};
-export { AsyncLocalStorage };

package/dist/es/component/describer.css

@@ -1,25 +0,0 @@
-.image-describer {
-  position: relative;
-}
-
-.image-describer .describe-text {
-  box-sizing: border-box;
-  color: #fff;
-  background: #000;
-  width: 100%;
-  height: 30px;
-  padding: 10px;
-  font-size: 12px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.image-describer .describe-text.success {
-  background: #047704;
-}
-
-.image-describer .describe-text.error {
-  background: #870707;
-}
-

package/dist/es/init.mjs

@@ -1,10 +0,0 @@
-import { Buffer } from "buffer";
-var _window;
-(_window = window).global || (_window.global = window);
-window.Buffer = Buffer;
-let sideEffect = 0;
-const setSideEffect = ()=>{
-    sideEffect++;
-    return sideEffect;
-};
-export { setSideEffect };

package/dist/lib/blank_polyfill.js

@@ -1,36 +0,0 @@
-"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__, {
-    AsyncLocalStorage: ()=>AsyncLocalStorage
-});
-const AsyncLocalStorage = {};
-exports.AsyncLocalStorage = __webpack_exports__.AsyncLocalStorage;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "AsyncLocalStorage"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/lib/component/describer.css

@@ -1,25 +0,0 @@
-.image-describer {
-  position: relative;
-}
-
-.image-describer .describe-text {
-  box-sizing: border-box;
-  color: #fff;
-  background: #000;
-  width: 100%;
-  height: 30px;
-  padding: 10px;
-  font-size: 12px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.image-describer .describe-text.success {
-  background: #047704;
-}
-
-.image-describer .describe-text.error {
-  background: #870707;
-}
-

package/dist/lib/component/playground/playground-types.js

@@ -1,18 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __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__);
-for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/lib/init.js

@@ -1,44 +0,0 @@
-"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__, {
-    setSideEffect: ()=>setSideEffect
-});
-const external_buffer_namespaceObject = require("buffer");
-var _window;
-(_window = window).global || (_window.global = window);
-window.Buffer = external_buffer_namespaceObject.Buffer;
-let sideEffect = 0;
-const setSideEffect = ()=>{
-    sideEffect++;
-    return sideEffect;
-};
-exports.setSideEffect = __webpack_exports__.setSideEffect;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "setSideEffect"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/types/blank_polyfill.d.ts

@@ -1,2 +0,0 @@
-declare const AsyncLocalStorage: {};
-export { AsyncLocalStorage };

package/dist/types/component/misc.d.ts

@@ -1,2 +0,0 @@
-export declare function timeCostStrElement(timeCost?: number): import("react").JSX.Element;
-export declare const iconForStatus: (status: string) => import("react").JSX.Element;

package/dist/types/component/playground/playground-types.d.ts

@@ -1,19 +0,0 @@
-import type { GroupedActionDump, WebUIContext } from '@midscene/core';
-import type { PlaygroundAgent } from '@midscene/playground';
-export interface PlaygroundResult {
-    result: any;
-    dump?: GroupedActionDump | null;
-    reportHTML?: string | null;
-    error: string | null;
-}
-export interface PlaygroundProps {
-    getAgent: (forceSameTabNavigation?: boolean) => PlaygroundAgent | null;
-    hideLogo?: boolean;
-    showContextPreview?: boolean;
-    dryMode?: boolean;
-}
-export interface StaticPlaygroundProps {
-    context: WebUIContext | null;
-}
-export type ServiceModeType = 'Server' | 'In-Browser' | 'In-Browser-Extension';
-export type RunType = 'aiAction' | 'aiQuery' | 'aiAssert' | 'aiTap' | 'aiDoubleClick' | 'aiHover' | 'aiInput' | 'aiRightClick' | 'aiKeyboardPress' | 'aiScroll' | 'aiLocate' | 'aiBoolean' | 'aiNumber' | 'aiString' | 'aiAsk' | 'aiWaitFor';

package/dist/types/component/playground/types.d.ts

@@ -1,72 +0,0 @@
-import type { DeviceAction } from '@midscene/core';
-export interface ZodType {
-    _def?: {
-        typeName: 'ZodOptional' | 'ZodDefault' | 'ZodNullable' | 'ZodObject' | 'ZodEnum' | 'ZodNumber' | 'ZodString' | 'ZodBoolean';
-        innerType?: ZodType;
-        defaultValue?: () => unknown;
-        shape?: () => Record<string, ZodType>;
-        values?: string[];
-        description?: string;
-    };
-    description?: string;
-}
-export interface ZodObjectSchema extends ZodType {
-    shape: Record<string, ZodType>;
-    parse: (data: unknown) => unknown;
-}
-export interface ZodEnumSchema extends ZodType {
-    _def: {
-        typeName: 'ZodEnum';
-        values: string[];
-    };
-}
-export interface ZodNumberSchema extends ZodType {
-    _def: {
-        typeName: 'ZodNumber';
-    };
-}
-export interface ZodBooleanSchema extends ZodType {
-    _def: {
-        typeName: 'ZodBoolean';
-    };
-}
-export interface ZodRuntimeAccess extends ZodType {
-    shape?: Record<string, ZodType>;
-    description?: string;
-    typeName?: string;
-    type?: string;
-}
-export interface ActionSpaceItem extends Omit<DeviceAction<any>, 'paramSchema'> {
-    paramSchema?: ZodObjectSchema;
-}
-export interface FormParams {
-    [key: string]: string | number | boolean | null | undefined;
-}
-export declare const VALIDATION_CONSTANTS: {
-    readonly ZOD_TYPES: {
-        readonly OPTIONAL: "ZodOptional";
-        readonly DEFAULT: "ZodDefault";
-        readonly NULLABLE: "ZodNullable";
-        readonly OBJECT: "ZodObject";
-        readonly ENUM: "ZodEnum";
-        readonly NUMBER: "ZodNumber";
-        readonly STRING: "ZodString";
-        readonly BOOLEAN: "ZodBoolean";
-    };
-    readonly FIELD_FLAGS: {
-        readonly LOCATION: "midscene_location_field_flag";
-    };
-    readonly DEFAULT_VALUES: {
-        readonly ACTION_TYPE: "aiAction";
-        readonly TIMEOUT_MS: 15000;
-        readonly CHECK_INTERVAL_MS: 3000;
-    };
-};
-export declare const isZodObjectSchema: (schema: unknown) => schema is ZodObjectSchema;
-export declare const isLocateField: (field: ZodType) => boolean;
-export declare const unwrapZodType: (field: ZodType) => {
-    actualField: ZodType;
-    isOptional: boolean;
-    hasDefault: boolean;
-};
-export declare const extractDefaultValue: (field: ZodType) => unknown;

package/dist/types/init.d.ts

@@ -1 +0,0 @@
-export declare const setSideEffect: () => number;