@midscene/playground-app 1.8.0 → 1.8.1

package/dist/es/SessionSetupPanel.css

@@ -212,7 +212,8 @@
 
 .platform-selector-group .ant-radio-button-wrapper {
   white-space: normal;
-  background: #fff;
+  border-color: var(--midscene-border-strong, #e9ecf3);
+  background: var(--midscene-surface-elevated, #fff);
   border-radius: 14px;
   justify-content: flex-start;
   align-items: flex-start;
@@ -252,24 +253,24 @@
 }
 
 .platform-selector-group .ant-radio-button-wrapper:hover {
-  border-color: #1677ff;
+  border-color: var(--midscene-brand, #1677ff);
   transform: translateY(-1px);
 }
 
 .platform-selector-group .ant-radio-button-wrapper-checked {
-  border-color: #1677ff;
+  border-color: var(--midscene-brand, #1677ff);
   box-shadow: 0 10px 24px rgba(22, 119, 255, .12);
 }
 
 .platform-selector-card .platform-selector-title {
-  color: rgba(0, 0, 0, .88);
+  color: var(--midscene-text-primary, rgba(0, 0, 0, .88));
   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
 }
 
 .platform-selector-card .platform-selector-description {
-  color: rgba(0, 0, 0, .5);
+  color: var(--midscene-text-tertiary, rgba(0, 0, 0, .5));
   margin-top: 6px;
   font-size: 12px;
   line-height: 1.5;
@@ -283,11 +284,11 @@
 }
 
 .session-select-option-label {
-  color: rgba(0, 0, 0, .88);
+  color: var(--midscene-text-primary, rgba(0, 0, 0, .88));
 }
 
 .session-select-option-description {
-  color: rgba(0, 0, 0, .45);
+  color: var(--midscene-text-tertiary, rgba(0, 0, 0, .45));
   font-size: 12px;
 }
 

package/dist/es/controller/usePlaygroundController.mjs

@@ -1,5 +1,5 @@
 import { PlaygroundSDK } from "@midscene/playground";
-import { useEnvConfig } from "@midscene/visualizer";
+import { notifyError, useEnvConfig } from "@midscene/visualizer";
 import { Form, message } from "antd";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { resolveAutoCreateSessionInput } from "../session-setup.mjs";
@@ -80,7 +80,7 @@ function getPlatformSelectorFieldKey(setup) {
     var _setup_platformSelector;
     return null == setup ? void 0 : null == (_setup_platformSelector = setup.platformSelector) ? void 0 : _setup_platformSelector.fieldKey;
 }
-function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollIntervalMs = 5000, countdownSeconds = 3, initialFormValues }) {
+function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollIntervalMs = 5000, countdownSeconds = 3, initialFormValues, onCountdownFinish }) {
     const [form] = Form.useForm();
     const initialFormValuesRef = useRef(initialFormValues);
     useLayoutEffect(()=>{
@@ -144,8 +144,9 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
                         appliedAiConfigSignatureRef.current = aiConfigSignature;
                         return true;
                     } catch (error) {
-                        const errorMessage = error instanceof Error ? error.message : 'Failed to apply AI configuration';
-                        message.error(errorMessage);
+                        notifyError(error, {
+                            title: 'Failed to apply AI configuration'
+                        });
                         return false;
                     } finally{
                         if (pendingAiConfigApplicationRef.current === pendingApplicationState) pendingAiConfigApplicationRef.current = null;
@@ -160,6 +161,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
         playgroundSDK
     ]);
     const finishCountdown = useCallback(()=>{
+        const wasActive = null !== countdownTimerRef.current;
         if (null !== countdownTimerRef.current) {
             window.clearInterval(countdownTimerRef.current);
             countdownTimerRef.current = null;
@@ -168,7 +170,10 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
         countdownResolveRef.current = null;
         if (mountedRef.current) setCountdown(null);
         null == resolve || resolve();
-    }, []);
+        if (wasActive && mountedRef.current) null == onCountdownFinish || onCountdownFinish();
+    }, [
+        onCountdownFinish
+    ]);
     const showCountdownModal = useCallback(()=>_async_to_generator(function*() {
             if (countdownSeconds <= 0) return;
             finishCountdown();
@@ -249,8 +254,9 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
                         return true;
                     } catch (error) {
                         if (error.errorFields) return false;
-                        const errorMessage = error instanceof Error ? error.message : 'Failed to create Agent';
-                        message.error(errorMessage);
+                        notifyError(error, {
+                            title: 'Failed to create Agent'
+                        });
                         return false;
                     } finally{
                         sessionMutatingRef.current = false;
@@ -273,8 +279,9 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
                 yield refreshServerState();
                 yield refreshSessionSetup();
             } catch (error) {
-                const errorMessage = error instanceof Error ? error.message : 'Failed to disconnect session';
-                message.error(errorMessage);
+                notifyError(error, {
+                    title: 'Failed to disconnect session'
+                });
             } finally{
                 sessionMutatingRef.current = false;
                 setSessionMutating(false);

package/dist/es/panels/PlaygroundConversationPanel.mjs

@@ -53,9 +53,6 @@ function PlaygroundConversationPanel({ controller, appVersion, title = 'Playgrou
                 onCancel: actions.finishCountdown,
                 centered: true,
                 width: 400,
-                style: {
-                    top: '30%'
-                },
                 styles: {
                     mask: {
                         backgroundColor: 'rgba(0, 0, 0, 0.75)'
@@ -69,7 +66,7 @@ function PlaygroundConversationPanel({ controller, appVersion, title = 'Playgrou
                     children: [
                         /*#__PURE__*/ jsx("div", {
                             style: {
-                                fontSize: '72px',
+                                fontSize: '120px',
                                 fontWeight: 'bold',
                                 color: 'GO!' === state.countdown ? '#52c41a' : '#1890ff',
                                 marginBottom: '24px',

package/dist/es/scrcpy-stream.mjs

@@ -1,3 +1,8 @@
+function toUint8Array(data) {
+    if (data instanceof Uint8Array) return data;
+    if (data instanceof ArrayBuffer) return new Uint8Array(data);
+    return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+}
 function createScrcpyVideoStream(socket) {
     let configurationPacketSent = false;
     let pendingDataPackets = [];
@@ -19,7 +24,7 @@ function createScrcpyVideoStream(socket) {
         start (controller) {
             const handleVideoData = (data)=>{
                 try {
-                    const payload = new Uint8Array(data.data);
+                    const payload = toUint8Array(data.data);
                     if ('configuration' === data.type) return void controller.enqueue({
                         type: 'configuration',
                         data: payload

package/dist/lib/SessionSetupPanel.css

@@ -212,7 +212,8 @@
 
 .platform-selector-group .ant-radio-button-wrapper {
   white-space: normal;
-  background: #fff;
+  border-color: var(--midscene-border-strong, #e9ecf3);
+  background: var(--midscene-surface-elevated, #fff);
   border-radius: 14px;
   justify-content: flex-start;
   align-items: flex-start;
@@ -252,24 +253,24 @@
 }
 
 .platform-selector-group .ant-radio-button-wrapper:hover {
-  border-color: #1677ff;
+  border-color: var(--midscene-brand, #1677ff);
   transform: translateY(-1px);
 }
 
 .platform-selector-group .ant-radio-button-wrapper-checked {
-  border-color: #1677ff;
+  border-color: var(--midscene-brand, #1677ff);
   box-shadow: 0 10px 24px rgba(22, 119, 255, .12);
 }
 
 .platform-selector-card .platform-selector-title {
-  color: rgba(0, 0, 0, .88);
+  color: var(--midscene-text-primary, rgba(0, 0, 0, .88));
   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
 }
 
 .platform-selector-card .platform-selector-description {
-  color: rgba(0, 0, 0, .5);
+  color: var(--midscene-text-tertiary, rgba(0, 0, 0, .5));
   margin-top: 6px;
   font-size: 12px;
   line-height: 1.5;
@@ -283,11 +284,11 @@
 }
 
 .session-select-option-label {
-  color: rgba(0, 0, 0, .88);
+  color: var(--midscene-text-primary, rgba(0, 0, 0, .88));
 }
 
 .session-select-option-description {
-  color: rgba(0, 0, 0, .45);
+  color: var(--midscene-text-tertiary, rgba(0, 0, 0, .45));
   font-size: 12px;
 }
 

package/dist/lib/controller/usePlaygroundController.js

@@ -108,7 +108,7 @@ function getPlatformSelectorFieldKey(setup) {
     var _setup_platformSelector;
     return null == setup ? void 0 : null == (_setup_platformSelector = setup.platformSelector) ? void 0 : _setup_platformSelector.fieldKey;
 }
-function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollIntervalMs = 5000, countdownSeconds = 3, initialFormValues }) {
+function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollIntervalMs = 5000, countdownSeconds = 3, initialFormValues, onCountdownFinish }) {
     const [form] = external_antd_namespaceObject.Form.useForm();
     const initialFormValuesRef = (0, external_react_namespaceObject.useRef)(initialFormValues);
     (0, external_react_namespaceObject.useLayoutEffect)(()=>{
@@ -172,8 +172,9 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
                         appliedAiConfigSignatureRef.current = aiConfigSignature;
                         return true;
                     } catch (error) {
-                        const errorMessage = error instanceof Error ? error.message : 'Failed to apply AI configuration';
-                        external_antd_namespaceObject.message.error(errorMessage);
+                        (0, visualizer_namespaceObject.notifyError)(error, {
+                            title: 'Failed to apply AI configuration'
+                        });
                         return false;
                     } finally{
                         if (pendingAiConfigApplicationRef.current === pendingApplicationState) pendingAiConfigApplicationRef.current = null;
@@ -188,6 +189,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
         playgroundSDK
     ]);
     const finishCountdown = (0, external_react_namespaceObject.useCallback)(()=>{
+        const wasActive = null !== countdownTimerRef.current;
         if (null !== countdownTimerRef.current) {
             window.clearInterval(countdownTimerRef.current);
             countdownTimerRef.current = null;
@@ -196,7 +198,10 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
         countdownResolveRef.current = null;
         if (mountedRef.current) setCountdown(null);
         null == resolve || resolve();
-    }, []);
+        if (wasActive && mountedRef.current) null == onCountdownFinish || onCountdownFinish();
+    }, [
+        onCountdownFinish
+    ]);
     const showCountdownModal = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
             if (countdownSeconds <= 0) return;
             finishCountdown();
@@ -277,8 +282,9 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
                         return true;
                     } catch (error) {
                         if (error.errorFields) return false;
-                        const errorMessage = error instanceof Error ? error.message : 'Failed to create Agent';
-                        external_antd_namespaceObject.message.error(errorMessage);
+                        (0, visualizer_namespaceObject.notifyError)(error, {
+                            title: 'Failed to create Agent'
+                        });
                         return false;
                     } finally{
                         sessionMutatingRef.current = false;
@@ -301,8 +307,9 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
                 yield refreshServerState();
                 yield refreshSessionSetup();
             } catch (error) {
-                const errorMessage = error instanceof Error ? error.message : 'Failed to disconnect session';
-                external_antd_namespaceObject.message.error(errorMessage);
+                (0, visualizer_namespaceObject.notifyError)(error, {
+                    title: 'Failed to disconnect session'
+                });
             } finally{
                 sessionMutatingRef.current = false;
                 setSessionMutating(false);

package/dist/lib/panels/PlaygroundConversationPanel.js

@@ -81,9 +81,6 @@ function PlaygroundConversationPanel({ controller, appVersion, title = 'Playgrou
                 onCancel: actions.finishCountdown,
                 centered: true,
                 width: 400,
-                style: {
-                    top: '30%'
-                },
                 styles: {
                     mask: {
                         backgroundColor: 'rgba(0, 0, 0, 0.75)'
@@ -97,7 +94,7 @@ function PlaygroundConversationPanel({ controller, appVersion, title = 'Playgrou
                     children: [
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                             style: {
-                                fontSize: '72px',
+                                fontSize: '120px',
                                 fontWeight: 'bold',
                                 color: 'GO!' === state.countdown ? '#52c41a' : '#1890ff',
                                 marginBottom: '24px',

package/dist/lib/scrcpy-stream.js

@@ -26,6 +26,11 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     createScrcpyVideoStream: ()=>createScrcpyVideoStream
 });
+function toUint8Array(data) {
+    if (data instanceof Uint8Array) return data;
+    if (data instanceof ArrayBuffer) return new Uint8Array(data);
+    return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+}
 function createScrcpyVideoStream(socket) {
     let configurationPacketSent = false;
     let pendingDataPackets = [];
@@ -47,7 +52,7 @@ function createScrcpyVideoStream(socket) {
         start (controller) {
             const handleVideoData = (data)=>{
                 try {
-                    const payload = new Uint8Array(data.data);
+                    const payload = toUint8Array(data.data);
                     if ('configuration' === data.type) return void controller.enqueue({
                         type: 'configuration',
                         data: payload

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

@@ -12,5 +12,12 @@ export interface UsePlaygroundControllerOptions {
      * returning a generic "Choose a platform" setup.
      */
     initialFormValues?: Record<string, unknown>;
+    /**
+     * Invoked when an active countdown dismisses — either reaching its natural
+     * end or being skipped by the user. Lets hosts step out of the way before
+     * automation begins (Studio minimises so the controlled desktop is in
+     * view). Not fired during unmount cleanup.
+     */
+    onCountdownFinish?: () => void;
 }
-export declare function usePlaygroundController({ serverUrl, defaultDeviceType, pollIntervalMs, countdownSeconds, initialFormValues, }: UsePlaygroundControllerOptions): PlaygroundControllerResult;
+export declare function usePlaygroundController({ serverUrl, defaultDeviceType, pollIntervalMs, countdownSeconds, initialFormValues, onCountdownFinish, }: UsePlaygroundControllerOptions): PlaygroundControllerResult;

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

@@ -1,7 +1,8 @@
 import type { ScrcpyMediaStreamPacket } from '@yume-chan/scrcpy';
+type RawScrcpyVideoData = ArrayBuffer | ArrayBufferView;
 interface RawScrcpyVideoPacket {
     type?: string;
-    data: ArrayLike<number>;
+    data: RawScrcpyVideoData;
     keyFrame?: boolean;
 }
 interface ScrcpyVideoSocketLike {

package/package.json

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