@midscene/playground-app 1.7.3 → 1.7.4

package/dist/es/ScrcpyPanel.mjs

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrcpyVideoCodecId } from "@yume-chan/scrcpy";
 import { BitmapVideoFrameRenderer, WebCodecsVideoDecoder, WebGLVideoFrameRenderer } from "@yume-chan/scrcpy-decoder-webcodecs";
-import { Alert, Button, Card, Space, Spin, Typography } from "antd";
+import { Alert, Spin, Typography } from "antd";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { io } from "socket.io-client";
+import { SCRCPY_METADATA_TIMEOUT_MS, getDefaultScrcpyWaitingStatusText, getScrcpyDecoderStatusText, getScrcpyMetadataTimeoutMessage, getScrcpyPreviewStatusText, isScrcpyPreviewStatusEvent } from "./scrcpy-preview.mjs";
 import { createScrcpyVideoStream } from "./scrcpy-stream.mjs";
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -32,30 +33,34 @@ function _async_to_generator(fn) {
     };
 }
 const { Text } = Typography;
-function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
+function ScrcpyPanel({ connectingOverlay, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs = SCRCPY_METADATA_TIMEOUT_MS, reconnectInterval = 3000 }) {
     const canvasStageRef = useRef(null);
     const socketRef = useRef(null);
     const decoderRef = useRef(null);
+    const metadataTimeoutRef = useRef(null);
     const reconnectTimerRef = useRef(null);
-    const connectRef = useRef(null);
-    const disconnectRef = useRef(null);
-    const manuallyDisconnectedRef = useRef(false);
+    const ignoreDisconnectRef = useRef(false);
     const [status, setStatus] = useState('connecting');
     const [errorMessage, setErrorMessage] = useState(null);
-    const [screenInfo, setScreenInfo] = useState(null);
+    const [waitingStatusMessage, setWaitingStatusMessage] = useState(()=>getDefaultScrcpyWaitingStatusText());
     const [webCodecsSupported, setWebCodecsSupported] = useState(true);
-    const statusText = useMemo(()=>{
-        switch(status){
-            case 'connected':
-                return 'Live scrcpy preview connected';
-            case 'error':
-                return 'Unable to start scrcpy preview';
-            case 'disconnected':
-                return 'scrcpy preview disconnected, retrying…';
-            default:
-                return 'Connecting to scrcpy preview…';
-        }
+    const [retryNonce, setRetryNonce] = useState(0);
+    const statusText = useMemo(()=>getScrcpyPreviewStatusText(status, waitingStatusMessage), [
+        status,
+        waitingStatusMessage
+    ]);
+    const showCustomErrorOverlay = ('error' === status || 'disconnected' === status) && Boolean(renderErrorOverlay);
+    const renderResolvedErrorOverlay = renderErrorOverlay;
+    const requestRetry = useCallback(()=>{
+        setStatus('connecting');
+        setErrorMessage(null);
+        setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+        setRetryNonce((current)=>current + 1);
+    }, []);
+    useEffect(()=>{
+        null == onStatusChange || onStatusChange(status);
     }, [
+        onStatusChange,
         status
     ]);
     const clearCanvas = ()=>{
@@ -68,16 +73,12 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
         decoderRef.current.dispose();
         decoderRef.current = null;
     };
-    const handleConnect = useCallback(()=>{
-        var _connectRef_current;
-        manuallyDisconnectedRef.current = false;
-        null == (_connectRef_current = connectRef.current) || _connectRef_current.call(connectRef);
-    }, []);
-    const handleDisconnect = useCallback(()=>{
-        var _disconnectRef_current;
-        manuallyDisconnectedRef.current = true;
-        null == (_disconnectRef_current = disconnectRef.current) || _disconnectRef_current.call(disconnectRef);
-    }, []);
+    const clearMetadataTimeout = ()=>{
+        if (metadataTimeoutRef.current) {
+            clearTimeout(metadataTimeoutRef.current);
+            metadataTimeoutRef.current = null;
+        }
+    };
     useEffect(()=>{
         if (!serverUrl) {
             setStatus('error');
@@ -92,6 +93,7 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
         }
         let disposed = false;
         const cleanup = ()=>{
+            clearMetadataTimeout();
             if (reconnectTimerRef.current) {
                 clearTimeout(reconnectTimerRef.current);
                 reconnectTimerRef.current = null;
@@ -104,7 +106,7 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
             clearCanvas();
         };
         const scheduleReconnect = ()=>{
-            if (disposed || reconnectTimerRef.current || manuallyDisconnectedRef.current) return;
+            if (disposed || reconnectTimerRef.current) return;
             reconnectTimerRef.current = setTimeout(()=>{
                 reconnectTimerRef.current = null;
                 cleanup();
@@ -124,20 +126,14 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
                     codec: codecId,
                     renderer
                 });
-                decoder.sizeChanged(({ width, height })=>{
-                    setScreenInfo({
-                        width,
-                        height
-                    });
-                });
                 return decoder;
             })();
         const connect = ()=>{
             if (disposed) return;
-            manuallyDisconnectedRef.current = false;
+            ignoreDisconnectRef.current = false;
             setStatus('connecting');
             setErrorMessage(null);
-            setScreenInfo(null);
+            setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
             const socket = io(serverUrl, {
                 withCredentials: true,
                 reconnection: false,
@@ -146,113 +142,100 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
             socketRef.current = socket;
             const videoStream = createScrcpyVideoStream(socket);
             socket.on('connect', ()=>{
+                setStatus('waiting-for-stream');
+                setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+                clearMetadataTimeout();
+                metadataTimeoutRef.current = setTimeout(()=>{
+                    if (disposed) return;
+                    ignoreDisconnectRef.current = true;
+                    setStatus('error');
+                    setErrorMessage(getScrcpyMetadataTimeoutMessage(metadataTimeoutMs));
+                    setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
+                    socket.disconnect();
+                    socketRef.current = null;
+                    scheduleReconnect();
+                }, metadataTimeoutMs);
                 socket.emit('connect-device', {
                     maxSize: 1024
                 });
             });
+            socket.on('preview-status', (event)=>{
+                if (disposed || !isScrcpyPreviewStatusEvent(event)) return;
+                setStatus('waiting-for-stream');
+                setWaitingStatusMessage(event.message);
+            });
             socket.on('video-metadata', (metadata)=>_async_to_generator(function*() {
                     try {
+                        clearMetadataTimeout();
                         disposeDecoder();
+                        setWaitingStatusMessage(getScrcpyDecoderStatusText());
                         const codecId = metadata.codec ? metadata.codec : ScrcpyVideoCodecId.H264;
                         const decoder = yield createDecoder(codecId);
                         decoderRef.current = decoder;
-                        if (metadata.width && metadata.height) setScreenInfo({
-                            width: metadata.width,
-                            height: metadata.height
-                        });
                         videoStream.pipeTo(decoder.writable).catch((error)=>{
                             if (disposed) return;
                             setStatus('error');
                             setErrorMessage(error.message);
                             scheduleReconnect();
                         });
+                        setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
                         setStatus('connected');
                     } catch (error) {
                         if (disposed) return;
                         setStatus('error');
                         setErrorMessage(error instanceof Error ? error.message : 'Failed to start decoder.');
+                        setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
                         scheduleReconnect();
                     }
                 })());
             socket.on('disconnect', ()=>{
+                clearMetadataTimeout();
                 if (disposed) return;
+                if (ignoreDisconnectRef.current) {
+                    ignoreDisconnectRef.current = false;
+                    return;
+                }
                 setStatus('disconnected');
+                setErrorMessage(null);
+                setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
                 scheduleReconnect();
             });
             socket.on('connect_error', (error)=>{
+                clearMetadataTimeout();
                 if (disposed) return;
                 setStatus('error');
                 setErrorMessage(error.message);
+                setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
                 scheduleReconnect();
             });
             socket.on('error', (error)=>{
+                clearMetadataTimeout();
                 if (disposed) return;
                 setStatus('error');
                 setErrorMessage(error.message);
+                setWaitingStatusMessage(getDefaultScrcpyWaitingStatusText());
                 scheduleReconnect();
             });
         };
-        const disconnect = ()=>{
-            cleanup();
-            setStatus('disconnected');
-            setErrorMessage(null);
-            setScreenInfo(null);
-        };
-        connectRef.current = connect;
-        disconnectRef.current = disconnect;
         connect();
         return ()=>{
             disposed = true;
-            connectRef.current = null;
-            disconnectRef.current = null;
             cleanup();
         };
     }, [
+        metadataTimeoutMs,
         reconnectInterval,
+        retryNonce,
         serverUrl
     ]);
-    return /*#__PURE__*/ jsxs(Card, {
-        size: "small",
-        title: "Live scrcpy preview",
+    return /*#__PURE__*/ jsxs("div", {
         style: {
             height: '100%',
             display: 'flex',
             flexDirection: 'column'
         },
-        styles: {
-            body: {
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-                minHeight: 0
-            }
-        },
-        extra: /*#__PURE__*/ jsxs(Space, {
-            size: "small",
-            children: [
-                screenInfo ? /*#__PURE__*/ jsxs(Text, {
-                    type: "secondary",
-                    children: [
-                        screenInfo.width,
-                        " \xd7 ",
-                        screenInfo.height
-                    ]
-                }) : null,
-                'connected' === status ? /*#__PURE__*/ jsx(Button, {
-                    size: "small",
-                    onClick: handleDisconnect,
-                    children: "Disconnect"
-                }) : /*#__PURE__*/ jsx(Button, {
-                    size: "small",
-                    type: "primary",
-                    loading: 'connecting' === status,
-                    onClick: handleConnect,
-                    children: "Connect"
-                })
-            ]
-        }),
         children: [
-            errorMessage ? /*#__PURE__*/ jsx(Alert, {
+            errorMessage && !showCustomErrorOverlay ? /*#__PURE__*/ jsx(Alert, {
                 type: "warning",
                 showIcon: true,
                 style: {
@@ -284,7 +267,26 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
                             justifyContent: 'center'
                         }
                     }),
-                    'connected' !== status && /*#__PURE__*/ jsxs("div", {
+                    'connected' !== status ? showCustomErrorOverlay && renderResolvedErrorOverlay ? /*#__PURE__*/ jsx("div", {
+                        style: {
+                            position: 'absolute',
+                            inset: 0,
+                            zIndex: 1
+                        },
+                        children: renderResolvedErrorOverlay({
+                            errorMessage,
+                            retry: requestRetry,
+                            status,
+                            statusText
+                        })
+                    }) : 'error' !== status && 'disconnected' !== status && connectingOverlay ? /*#__PURE__*/ jsx("div", {
+                        style: {
+                            position: 'absolute',
+                            inset: 0,
+                            zIndex: 1
+                        },
+                        children: connectingOverlay
+                    }) : /*#__PURE__*/ jsxs("div", {
                         style: {
                             position: 'absolute',
                             inset: 0,
@@ -300,7 +302,7 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
                             zIndex: 1
                         },
                         children: [
-                            /*#__PURE__*/ jsx(Spin, {
+                            'error' === status ? null : /*#__PURE__*/ jsx(Spin, {
                                 spinning: true
                             }),
                             /*#__PURE__*/ jsx(Text, {
@@ -309,6 +311,12 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
                                 },
                                 children: statusText
                             }),
+                            'error' === status ? /*#__PURE__*/ jsx(Text, {
+                                style: {
+                                    color: '#d1d5db'
+                                },
+                                children: "Scrcpy preview will retry automatically."
+                            }) : null,
                             !webCodecsSupported && /*#__PURE__*/ jsx(Text, {
                                 style: {
                                     color: '#d1d5db'
@@ -316,7 +324,7 @@ function ScrcpyPanel({ serverUrl, reconnectInterval = 3000 }) {
                                 children: "Please use a modern Chromium browser to view the stream."
                             })
                         ]
-                    })
+                    }) : null
                 ]
             })
         ]

package/dist/es/SessionSetupPanel.css

@@ -0,0 +1,292 @@
+.session-setup-panel {
+  background: #fff;
+  flex-direction: column;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0 56px;
+  display: flex;
+}
+
+.session-setup-card {
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 288px;
+  margin-top: 96px;
+  display: flex;
+}
+
+.session-setup-logo {
+  object-fit: contain;
+  flex-shrink: 0;
+  width: 51px;
+  height: 48px;
+}
+
+.session-setup-title {
+  color: #000;
+  text-align: center;
+  white-space: pre-line;
+  width: 240px;
+  margin: 16px 0 0;
+  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.session-setup-description {
+  color: rgba(0, 0, 0, .7);
+  text-align: center;
+  width: 276px;
+  margin: 14.7px 0 0;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.session-setup-alert.ant-alert {
+  width: 100%;
+  margin-top: 16px;
+}
+
+.session-setup-form {
+  width: 100%;
+  margin-top: 24px;
+}
+
+.session-setup-form .ant-form-item {
+  margin-bottom: 16px;
+}
+
+.session-setup-form .ant-form-item-label {
+  padding-bottom: 4px;
+}
+
+.session-setup-form .ant-form-item-label > label {
+  color: rgba(0, 0, 0, .5);
+  height: 15px;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14.5px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:before {
+  color: rgba(0, 0, 0, .5);
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
+  margin-right: 2px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
+  margin-right: 2px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
+  margin-right: 2px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
+  margin-left: 2px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
+  margin-left: 2px;
+}
+
+.session-setup-form .ant-form-item-label > label.ant-form-item-required:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
+  margin-left: 2px;
+}
+
+.session-setup-form .ant-select-single .ant-select-selector {
+  height: 36px;
+  box-shadow: none;
+  background: #f2f4f7;
+  border: none;
+  border-radius: 8px;
+  align-items: center;
+  padding: 0 12px;
+  display: flex;
+}
+
+.session-setup-form .ant-select-single .ant-select-selector .ant-select-selection-item, .session-setup-form .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+  color: #000;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 36px;
+}
+
+.session-setup-form .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+  color: rgba(0, 0, 0, .4);
+}
+
+.session-setup-form .ant-select-arrow:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: 12px;
+}
+
+.session-setup-form .ant-select-arrow:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: 12px;
+}
+
+.session-setup-form .ant-select-arrow:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: 12px;
+}
+
+.session-setup-form .ant-select-arrow:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: 12px;
+}
+
+.session-setup-form .ant-select-arrow:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: 12px;
+}
+
+.session-setup-form .ant-select-arrow:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: 12px;
+}
+
+.session-setup-form .ant-input, .session-setup-form .ant-input-number {
+  height: 36px;
+  box-shadow: none;
+  color: #000;
+  background: #f2f4f7;
+  border: none;
+  border-radius: 8px;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 14px;
+}
+
+.session-setup-form .ant-input-number-input {
+  height: 36px;
+}
+
+.session-setup-select-icon {
+  object-fit: contain;
+  pointer-events: none;
+  width: 16px;
+  height: 16px;
+}
+
+.session-setup-submit {
+  color: #f2f4f7;
+  cursor: pointer;
+  background: #1979ff;
+  border: 0;
+  border-radius: 8px;
+  width: 100%;
+  height: 32px;
+  margin-top: 7px;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  transition: opacity .2s;
+}
+
+.session-setup-submit:hover:not(:disabled) {
+  opacity: .9;
+}
+
+.session-setup-submit:disabled {
+  cursor: not-allowed;
+  opacity: .6;
+}
+
+.platform-selector-group {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  width: 100%;
+  display: grid;
+}
+
+.platform-selector-group .ant-radio-button-wrapper {
+  white-space: normal;
+  background: #fff;
+  border-radius: 14px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  height: auto;
+  min-height: 92px;
+  padding: 14px 16px;
+  transition: border-color .2s, box-shadow .2s, transform .2s;
+  display: flex;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  border-left-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  border-left-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  border-left-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  border-right-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  border-right-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  border-right-width: 1px;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:before {
+  display: none;
+}
+
+.platform-selector-group .ant-radio-button-wrapper:hover {
+  border-color: #1677ff;
+  transform: translateY(-1px);
+}
+
+.platform-selector-group .ant-radio-button-wrapper-checked {
+  border-color: #1677ff;
+  box-shadow: 0 10px 24px rgba(22, 119, 255, .12);
+}
+
+.platform-selector-card .platform-selector-title {
+  color: 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);
+  margin-top: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.session-select-option {
+  flex-direction: column;
+  gap: 2px;
+  line-height: 1.4;
+  display: flex;
+}
+
+.session-select-option-label {
+  color: rgba(0, 0, 0, .88);
+}
+
+.session-select-option-description {
+  color: rgba(0, 0, 0, .45);
+  font-size: 12px;
+}
+
+@media (max-width: 640px) {
+  .platform-selector-group {
+    grid-template-columns: 1fr;
+  }
+}
+