@midscene/playground-app 1.7.3 → 1.7.4

package/dist/lib/panels/PlaygroundConversationPanel.js

@@ -0,0 +1,168 @@
+"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__, {
+    PlaygroundConversationPanel: ()=>PlaygroundConversationPanel
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const visualizer_namespaceObject = require("@midscene/visualizer");
+const external_antd_namespaceObject = require("antd");
+const external_SessionSetupPanel_js_namespaceObject = require("../SessionSetupPanel.js");
+const selectors_js_namespaceObject = require("../controller/selectors.js");
+require("./PlaygroundConversationPanel.css");
+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);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
+function PlaygroundConversationPanel({ controller, appVersion, title = 'Playground', branding, playgroundConfig, header, className, notConnectedFallback }) {
+    const { state, actions } = controller;
+    const mergedConfig = (0, selectors_js_namespaceObject.buildConversationConfig)(state, playgroundConfig);
+    const mergedBranding = (0, selectors_js_namespaceObject.buildConversationBranding)(state.runtimeInfo, title, appVersion, state.deviceType, branding);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: [
+            'playground-conversation-panel',
+            className
+        ].filter(Boolean).join(' '),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Modal, {
+                open: null !== state.countdown,
+                footer: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                    onClick: actions.finishCountdown,
+                    type: "default",
+                    children: "Skip countdown"
+                }),
+                closable: true,
+                maskClosable: true,
+                onCancel: actions.finishCountdown,
+                centered: true,
+                width: 400,
+                style: {
+                    top: '30%'
+                },
+                styles: {
+                    mask: {
+                        backgroundColor: 'rgba(0, 0, 0, 0.75)'
+                    }
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    style: {
+                        textAlign: 'center',
+                        padding: '40px 20px'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            style: {
+                                fontSize: '72px',
+                                fontWeight: 'bold',
+                                color: 'GO!' === state.countdown ? '#52c41a' : '#1890ff',
+                                marginBottom: '24px',
+                                lineHeight: 1
+                            },
+                            children: state.countdown
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            style: {
+                                fontSize: '18px',
+                                fontWeight: 500,
+                                marginBottom: '12px'
+                            },
+                            children: "Automation Starting Soon"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            style: {
+                                fontSize: '14px',
+                                color: 'rgba(0, 0, 0, 0.65)'
+                            },
+                            children: [
+                                "The selected session requested a countdown before execution.",
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
+                                "Please wait until the run starts."
+                            ]
+                        })
+                    ]
+                })
+            }),
+            header,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "playground-conversation-body",
+                children: state.serverOnline ? state.sessionViewState.connected ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(visualizer_namespaceObject.UniversalPlayground, {
+                    playgroundSDK: state.playgroundSDK,
+                    config: mergedConfig,
+                    branding: mergedBranding,
+                    className: "playground-container"
+                }) : void 0 !== notConnectedFallback ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+                    children: notConnectedFallback
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SessionSetupPanel_js_namespaceObject.SessionSetupPanel, {
+                    form: state.form,
+                    sessionSetup: state.sessionSetup,
+                    sessionSetupError: state.sessionSetupError,
+                    sessionViewState: state.sessionViewState,
+                    sessionLoading: state.sessionLoading,
+                    sessionMutating: state.sessionMutating,
+                    onCreateSession: ()=>_async_to_generator(function*() {
+                            yield actions.createSession();
+                        })()
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "playground-conversation-offline",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Alert, {
+                        type: "warning",
+                        showIcon: true,
+                        message: "Playground server offline",
+                        description: "Reconnect the runtime to continue using the Android playground."
+                    })
+                })
+            })
+        ]
+    });
+}
+exports.PlaygroundConversationPanel = __webpack_exports__.PlaygroundConversationPanel;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PlaygroundConversationPanel"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/scrcpy-preview.js

@@ -0,0 +1,79 @@
+"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__, {
+    SCRCPY_METADATA_TIMEOUT_MS: ()=>SCRCPY_METADATA_TIMEOUT_MS,
+    getScrcpyDecoderStatusText: ()=>getScrcpyDecoderStatusText,
+    getScrcpyPreviewStatusText: ()=>getScrcpyPreviewStatusText,
+    getScrcpyMetadataTimeoutMessage: ()=>getScrcpyMetadataTimeoutMessage,
+    isScrcpyPreviewStatusEvent: ()=>isScrcpyPreviewStatusEvent,
+    getDefaultScrcpyWaitingStatusText: ()=>getDefaultScrcpyWaitingStatusText
+});
+const constants_namespaceObject = require("@midscene/shared/constants");
+const SCRCPY_METADATA_TIMEOUT_MS = constants_namespaceObject.SCRCPY_PREVIEW_METADATA_TIMEOUT_MS;
+function isScrcpyPreviewStatusEvent(value) {
+    return 'object' == typeof value && null !== value && 'message' in value && 'string' == typeof value.message;
+}
+function getDefaultScrcpyWaitingStatusText() {
+    return 'Preparing Android device connection…';
+}
+function getScrcpyDecoderStatusText() {
+    return 'Starting video decoder…';
+}
+function getScrcpyPreviewStatusText(status, waitingMessage = getDefaultScrcpyWaitingStatusText()) {
+    switch(status){
+        case 'connected':
+            return 'Live scrcpy preview connected';
+        case 'waiting-for-stream':
+            return waitingMessage;
+        case 'error':
+            return 'Unable to start scrcpy preview';
+        case 'disconnected':
+            return 'scrcpy preview disconnected, retrying…';
+        default:
+            return 'Connecting to scrcpy preview server…';
+    }
+}
+function getScrcpyMetadataTimeoutMessage(timeoutMs = SCRCPY_METADATA_TIMEOUT_MS) {
+    const seconds = Math.max(1, Math.round(timeoutMs / 1000));
+    return `Timed out waiting ${seconds}s for scrcpy video stream metadata.`;
+}
+exports.SCRCPY_METADATA_TIMEOUT_MS = __webpack_exports__.SCRCPY_METADATA_TIMEOUT_MS;
+exports.getDefaultScrcpyWaitingStatusText = __webpack_exports__.getDefaultScrcpyWaitingStatusText;
+exports.getScrcpyDecoderStatusText = __webpack_exports__.getScrcpyDecoderStatusText;
+exports.getScrcpyMetadataTimeoutMessage = __webpack_exports__.getScrcpyMetadataTimeoutMessage;
+exports.getScrcpyPreviewStatusText = __webpack_exports__.getScrcpyPreviewStatusText;
+exports.isScrcpyPreviewStatusEvent = __webpack_exports__.isScrcpyPreviewStatusEvent;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "SCRCPY_METADATA_TIMEOUT_MS",
+    "getDefaultScrcpyWaitingStatusText",
+    "getScrcpyDecoderStatusText",
+    "getScrcpyMetadataTimeoutMessage",
+    "getScrcpyPreviewStatusText",
+    "isScrcpyPreviewStatusEvent"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/types/PlaygroundPreview.d.ts

@@ -1,5 +1,11 @@
 import type { PlaygroundRuntimeInfo, PlaygroundSDK } from '@midscene/playground';
+import type { ReactNode } from 'react';
+import type { ScrcpyErrorOverlayRenderer } from './ScrcpyPanel';
+import type { ScrcpyPreviewStatus } from './scrcpy-preview';
 export interface PlaygroundPreviewProps {
+    connectingOverlay?: ReactNode;
+    onScrcpyStatusChange?: (status: ScrcpyPreviewStatus) => void;
+    renderErrorOverlay?: ScrcpyErrorOverlayRenderer;
     playgroundSDK: PlaygroundSDK;
     runtimeInfo: PlaygroundRuntimeInfo | null;
     serverUrl: string;

package/dist/types/PlaygroundThemeProvider.d.ts

@@ -0,0 +1,2 @@
+import type { PropsWithChildren } from 'react';
+export declare function PlaygroundThemeProvider({ children }: PropsWithChildren): import("react").JSX.Element;

package/dist/types/PreviewRenderer.d.ts

@@ -1,10 +1,16 @@
 import type { PlaygroundRuntimeInfo, PlaygroundSDK } from '@midscene/playground';
+import type { ReactNode } from 'react';
+import { type ScrcpyErrorOverlayRenderer } from './ScrcpyPanel';
+import type { ScrcpyPreviewStatus } from './scrcpy-preview';
 interface PreviewRendererProps {
+    connectingOverlay?: ReactNode;
+    onScrcpyStatusChange?: (status: ScrcpyPreviewStatus) => void;
+    renderErrorOverlay?: ScrcpyErrorOverlayRenderer;
     playgroundSDK: PlaygroundSDK;
     runtimeInfo: PlaygroundRuntimeInfo | null;
     serverUrl: string;
     serverOnline: boolean;
     isUserOperating: boolean;
 }
-export declare function PreviewRenderer({ playgroundSDK, runtimeInfo, serverUrl, serverOnline, isUserOperating, }: PreviewRendererProps): import("react").JSX.Element;
+export declare function PreviewRenderer({ connectingOverlay, onScrcpyStatusChange, renderErrorOverlay, playgroundSDK, runtimeInfo, serverUrl, serverOnline, isUserOperating, }: PreviewRendererProps): import("react").JSX.Element;
 export {};

package/dist/types/ScrcpyPanel.d.ts

@@ -1,6 +1,19 @@
+import React, { type ReactNode } from 'react';
+import { type ScrcpyPreviewStatus } from './scrcpy-preview';
+export interface ScrcpyErrorOverlayContext {
+    errorMessage: string | null;
+    retry: () => void;
+    status: ScrcpyPreviewStatus;
+    statusText: string;
+}
+export type ScrcpyErrorOverlayRenderer = (context: ScrcpyErrorOverlayContext) => ReactNode;
 interface ScrcpyPanelProps {
+    connectingOverlay?: ReactNode;
+    onStatusChange?: (status: ScrcpyPreviewStatus) => void;
+    renderErrorOverlay?: ScrcpyErrorOverlayRenderer;
     serverUrl?: string;
+    metadataTimeoutMs?: number;
     reconnectInterval?: number;
 }
-export declare function ScrcpyPanel({ serverUrl, reconnectInterval, }: ScrcpyPanelProps): import("react").JSX.Element;
+export declare function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs, reconnectInterval, }: ScrcpyPanelProps): React.JSX.Element;
 export {};

package/dist/types/SessionSetupPanel.d.ts

@@ -1,14 +1,15 @@
 import type { PlaygroundSessionSetup } from '@midscene/playground';
 import type { FormInstance } from 'antd';
+import type { PlaygroundFormValues } from './controller/types';
 import type { PlaygroundSessionViewState } from './session-state';
+import './SessionSetupPanel.less';
 export interface SessionSetupPanelProps {
-    form: FormInstance<Record<string, unknown>>;
+    form: FormInstance<PlaygroundFormValues>;
     sessionSetup: PlaygroundSessionSetup | null;
     sessionSetupError: string | null;
     sessionViewState: PlaygroundSessionViewState;
     sessionLoading: boolean;
     sessionMutating: boolean;
     onCreateSession: () => void | Promise<void>;
-    onRefreshTargets: () => void | Promise<void>;
 }
-export declare function SessionSetupPanel({ form, sessionSetup, sessionSetupError, sessionViewState, sessionLoading, sessionMutating, onCreateSession, onRefreshTargets, }: SessionSetupPanelProps): import("react").JSX.Element;
+export declare function SessionSetupPanel({ form, sessionSetup, sessionSetupError, sessionViewState, sessionLoading, sessionMutating, onCreateSession, }: SessionSetupPanelProps): import("react").JSX.Element;

package/dist/types/controller/ai-config.d.ts

@@ -0,0 +1,4 @@
+import type { PlaygroundSDK } from '@midscene/playground';
+export type PlaygroundAiConfig = Record<string, string>;
+export declare function hasPlaygroundAiConfig(config: PlaygroundAiConfig): boolean;
+export declare function applyPlaygroundAiConfig(playgroundSDK: Pick<PlaygroundSDK, 'overrideConfig'>, config: PlaygroundAiConfig): Promise<boolean>;

package/dist/types/controller/auto-create.d.ts

@@ -0,0 +1,15 @@
+export type AutoCreateInput = Record<string, unknown> | null | undefined;
+export interface ResolveAutoCreateDecisionOptions {
+    autoCreateInput: AutoCreateInput;
+    lastAttemptedSignature: string | null;
+    blockedSignature: string | null;
+}
+export interface AutoCreateDecision {
+    signature: string | null;
+    shouldCreate: boolean;
+}
+export declare function serializeAutoCreateInput(autoCreateInput: AutoCreateInput): string | null;
+export declare function resolveAutoCreateDecision({ autoCreateInput, lastAttemptedSignature, blockedSignature, }: ResolveAutoCreateDecisionOptions): AutoCreateDecision;
+export declare function shouldResetAutoCreateBlock(options?: {
+    silent?: boolean;
+}): boolean;

package/dist/types/controller/selectors.d.ts

@@ -0,0 +1,5 @@
+import type { PlaygroundRuntimeInfo } from '@midscene/playground';
+import type { PlaygroundBranding, UniversalPlaygroundConfig } from '@midscene/visualizer';
+import type { PlaygroundControllerState } from './types';
+export declare function buildConversationConfig(state: Pick<PlaygroundControllerState, 'deviceType' | 'executionUxHints' | 'countdownSeconds'>, playgroundConfig?: Partial<UniversalPlaygroundConfig>): UniversalPlaygroundConfig;
+export declare function buildConversationBranding(runtimeInfo: PlaygroundRuntimeInfo | null, title: string, appVersion: string, deviceType: string, branding?: Partial<PlaygroundBranding>): PlaygroundBranding;

package/dist/types/controller/types.d.ts

@@ -0,0 +1,36 @@
+import type { PlaygroundRuntimeInfo, PlaygroundSDK, PlaygroundSessionSetup } from '@midscene/playground';
+import type { DeviceType, ExecutionUxHint } from '@midscene/visualizer';
+import type { FormInstance } from 'antd';
+import type { PlaygroundSessionViewState } from '../session-state';
+export type PlaygroundFormValue = boolean | null | number | string | undefined;
+export type PlaygroundFormValues = Record<string, PlaygroundFormValue>;
+export interface PlaygroundControllerState {
+    playgroundSDK: PlaygroundSDK;
+    form: FormInstance<PlaygroundFormValues>;
+    formValues: Record<string, unknown>;
+    serverOnline: boolean;
+    isUserOperating: boolean;
+    deviceType: DeviceType;
+    runtimeInfo: PlaygroundRuntimeInfo | null;
+    executionUxHints: ExecutionUxHint[];
+    sessionViewState: PlaygroundSessionViewState;
+    sessionSetup: PlaygroundSessionSetup | null;
+    sessionSetupError: string | null;
+    sessionLoading: boolean;
+    sessionMutating: boolean;
+    countdown: number | string | null;
+    countdownSeconds: number;
+}
+export interface PlaygroundControllerActions {
+    refreshServerState: () => Promise<void>;
+    refreshSessionSetup: (input?: Record<string, unknown>) => Promise<void>;
+    createSession: (input?: Record<string, unknown>, options?: {
+        silent?: boolean;
+    }) => Promise<boolean>;
+    destroySession: () => Promise<void>;
+    finishCountdown: () => void;
+}
+export interface PlaygroundControllerResult {
+    state: PlaygroundControllerState;
+    actions: PlaygroundControllerActions;
+}

package/dist/types/controller/usePlaygroundController.d.ts

@@ -0,0 +1,9 @@
+import { type DeviceType } from '@midscene/visualizer';
+import type { PlaygroundControllerResult } from './types';
+export interface UsePlaygroundControllerOptions {
+    serverUrl: string;
+    defaultDeviceType?: DeviceType;
+    pollIntervalMs?: number;
+    countdownSeconds?: number;
+}
+export declare function usePlaygroundController({ serverUrl, defaultDeviceType, pollIntervalMs, countdownSeconds, }: UsePlaygroundControllerOptions): PlaygroundControllerResult;

package/dist/types/index.d.ts

@@ -1,5 +1,10 @@
 export { PlaygroundApp } from './PlaygroundApp';
 export { PlaygroundPreview } from './PlaygroundPreview';
+export { PlaygroundThemeProvider } from './PlaygroundThemeProvider';
+export { PlaygroundConversationPanel } from './panels/PlaygroundConversationPanel';
 export type { PlaygroundAppProps } from './PlaygroundApp';
 export type { PlaygroundPreviewProps } from './PlaygroundPreview';
+export type { PlaygroundConversationPanelProps } from './panels/PlaygroundConversationPanel';
 export type { DeviceType } from '@midscene/visualizer';
+export type { PlaygroundControllerActions, PlaygroundControllerResult, PlaygroundControllerState, } from './controller/types';
+export { usePlaygroundController } from './controller/usePlaygroundController';

package/dist/types/panels/PlaygroundConversationPanel.d.ts

@@ -0,0 +1,20 @@
+import { type PlaygroundBranding, type UniversalPlaygroundConfig } from '@midscene/visualizer';
+import type { ReactNode } from 'react';
+import type { PlaygroundControllerResult } from '../controller/types';
+import './PlaygroundConversationPanel.less';
+export interface PlaygroundConversationPanelProps {
+    controller: PlaygroundControllerResult;
+    appVersion: string;
+    title?: string;
+    branding?: Partial<PlaygroundBranding>;
+    playgroundConfig?: Partial<UniversalPlaygroundConfig>;
+    header?: ReactNode;
+    className?: string;
+    /**
+     * Custom content shown while the session is not yet connected.
+     * When supplied, replaces the built-in `SessionSetupPanel`, letting hosts
+     * drive device selection elsewhere.
+     */
+    notConnectedFallback?: ReactNode;
+}
+export declare function PlaygroundConversationPanel({ controller, appVersion, title, branding, playgroundConfig, header, className, notConnectedFallback, }: PlaygroundConversationPanelProps): import("react").JSX.Element;

package/dist/types/scrcpy-preview.d.ts

@@ -0,0 +1,11 @@
+export declare const SCRCPY_METADATA_TIMEOUT_MS: number;
+export type ScrcpyPreviewStatus = 'connecting' | 'waiting-for-stream' | 'connected' | 'disconnected' | 'error';
+export interface ScrcpyPreviewStatusEvent {
+    message: string;
+    phase?: string;
+}
+export declare function isScrcpyPreviewStatusEvent(value: unknown): value is ScrcpyPreviewStatusEvent;
+export declare function getDefaultScrcpyWaitingStatusText(): string;
+export declare function getScrcpyDecoderStatusText(): string;
+export declare function getScrcpyPreviewStatusText(status: ScrcpyPreviewStatus, waitingMessage?: string): string;
+export declare function getScrcpyMetadataTimeoutMessage(timeoutMs?: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/playground-app",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "description": "Reusable React shell for Midscene playground applications",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
@@ -28,8 +28,9 @@
     "antd": "^5.21.6",
     "react-resizable-panels": "2.0.22",
     "socket.io-client": "4.8.1",
-    "@midscene/playground": "1.7.3",
-    "@midscene/visualizer": "1.7.3"
+    "@midscene/shared": "1.7.4",
+    "@midscene/playground": "1.7.4",
+    "@midscene/visualizer": "1.7.4"
   },
   "devDependencies": {
     "@rsbuild/plugin-less": "^1.5.0",