@midscene/visualizer 0.30.10 → 1.0.0

package/dist/es/component/screenshot-viewer/index.css

@@ -0,0 +1,214 @@
+.screenshot-viewer {
+  flex-direction: column;
+  height: 100%;
+  display: flex;
+}
+
+.screenshot-viewer.offline, .screenshot-viewer.loading, .screenshot-viewer.error {
+  text-align: center;
+  color: #666;
+  justify-content: center;
+  align-items: center;
+}
+
+.screenshot-viewer.offline .screenshot-placeholder h3, .screenshot-viewer.loading .screenshot-placeholder h3, .screenshot-viewer.error .screenshot-placeholder h3 {
+  color: #1890ff;
+  text-transform: capitalize;
+  margin-bottom: 12px;
+  font-size: 18px;
+}
+
+.screenshot-viewer.offline .screenshot-placeholder p, .screenshot-viewer.loading .screenshot-placeholder p, .screenshot-viewer.error .screenshot-placeholder p {
+  color: #666;
+  margin: 0;
+}
+
+.screenshot-viewer.offline .screenshot-placeholder p.error-message, .screenshot-viewer.loading .screenshot-placeholder p.error-message, .screenshot-viewer.error .screenshot-placeholder p.error-message {
+  color: #ff4d4f;
+}
+
+.screenshot-viewer .screenshot-header {
+  justify-content: space-between;
+  align-items: center;
+  height: 56px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-header .screenshot-title {
+  flex-direction: column;
+  gap: 4px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-header .screenshot-title h3 {
+  color: #000;
+  text-transform: capitalize;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-header .screenshot-title .screenshot-subtitle {
+  color: #999;
+  margin: 0;
+  font-size: 12px;
+}
+
+.screenshot-viewer .screenshot-container {
+  background: #f2f4f7;
+  border-radius: 16px;
+  flex-direction: column;
+  flex: 1;
+  padding: 0 15px;
+  display: flex;
+  overflow: hidden;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay {
+  z-index: 10;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 12px 5px 8px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay {
+  color: rgba(0, 0, 0, .85);
+  text-transform: capitalize;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay .info-icon {
+  opacity: .8;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay .info-icon:hover {
+  opacity: 1;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls {
+  opacity: 1;
+  box-sizing: border-box;
+  border-radius: 4px;
+  align-items: center;
+  gap: 10px;
+  height: 18px;
+  padding: 4px 8px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .last-update-time {
+  color: #666;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .operation-indicator {
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn {
+  box-shadow: none;
+  background: none;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn:hover {
+  background-color: rgba(0, 0, 0, .06);
+  border-radius: 2px;
+  transition: all .2s;
+  transform: scale(1.1);
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn .anticon {
+  color: #666;
+  font-size: 12px;
+  transition: color .2s;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-content {
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  min-height: 0;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-content .screenshot-image {
+  object-fit: contain;
+  border-radius: 12px;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-content .screenshot-placeholder {
+  text-align: center;
+  color: #999;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline, [data-theme="dark"] .screenshot-viewer.loading, [data-theme="dark"] .screenshot-viewer.error {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder h3, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder h3, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder h3 {
+  color: #1890ff;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder p, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder p, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder p {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder p.error-message, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder p.error-message, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder p.error-message {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-header .screenshot-title h3 {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-header .screenshot-title .screenshot-subtitle {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container {
+  background: #141414;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay, [data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .last-update-time {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn:hover {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn .anticon {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-content .screenshot-placeholder {
+  color: rgba(255, 255, 255, .45);
+}
+

package/dist/es/component/screenshot-viewer/index.mjs

@@ -0,0 +1,282 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfoCircleOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Button, Spin, Tooltip } from "antd";
+import { useCallback, useEffect, useRef, useState } from "react";
+import "./index.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 ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUserOperating = false }) {
+    const [screenshot, setScreenshot] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [lastUpdateTime, setLastUpdateTime] = useState(0);
+    const [interfaceInfo, setInterfaceInfo] = useState(null);
+    const pollingIntervalRef = useRef(null);
+    const isPollingPausedRef = useRef(false);
+    const fetchScreenshot = useCallback((isManual = false)=>_async_to_generator(function*() {
+            if (!serverOnline) return;
+            setLoading(true);
+            if (isManual) setError(null);
+            try {
+                const result = yield getScreenshot();
+                console.log('Screenshot API response:', result);
+                if (null == result ? void 0 : result.screenshot) {
+                    const screenshotData = result.screenshot.toString().trim();
+                    if (screenshotData) {
+                        setScreenshot(screenshotData);
+                        setError(null);
+                        setLastUpdateTime(Date.now());
+                    } else setError('Empty screenshot data received');
+                } else setError('No screenshot data in response');
+            } catch (err) {
+                console.error('Screenshot fetch error:', err);
+                setError(err instanceof Error ? err.message : 'Failed to fetch screenshot');
+            } finally{
+                setLoading(false);
+            }
+        })(), [
+        getScreenshot,
+        serverOnline
+    ]);
+    const fetchInterfaceInfo = useCallback(()=>_async_to_generator(function*() {
+            if (!serverOnline || !getInterfaceInfo) return;
+            try {
+                const info = yield getInterfaceInfo();
+                if (info) setInterfaceInfo(info);
+            } catch (err) {
+                console.error('Interface info fetch error:', err);
+            }
+        })(), [
+        getInterfaceInfo,
+        serverOnline
+    ]);
+    const startPolling = useCallback(()=>{
+        if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
+        console.log('Starting screenshot polling (5s interval)');
+        pollingIntervalRef.current = setInterval(()=>{
+            if (!isPollingPausedRef.current && serverOnline) fetchScreenshot(false);
+        }, 5000);
+    }, [
+        fetchScreenshot,
+        serverOnline
+    ]);
+    const stopPolling = useCallback(()=>{
+        if (pollingIntervalRef.current) {
+            console.log('Stopping screenshot polling');
+            clearInterval(pollingIntervalRef.current);
+            pollingIntervalRef.current = null;
+        }
+    }, []);
+    const pausePolling = useCallback(()=>{
+        console.log('Pausing screenshot polling');
+        isPollingPausedRef.current = true;
+    }, []);
+    const resumePolling = useCallback(()=>{
+        console.log('Resuming screenshot polling');
+        isPollingPausedRef.current = false;
+    }, []);
+    const handleManualRefresh = useCallback(()=>{
+        fetchScreenshot(true);
+    }, [
+        fetchScreenshot
+    ]);
+    useEffect(()=>{
+        if (!serverOnline) {
+            setScreenshot(null);
+            setError(null);
+            setInterfaceInfo(null);
+            stopPolling();
+            return;
+        }
+        fetchScreenshot(false);
+        fetchInterfaceInfo();
+        startPolling();
+        return ()=>{
+            stopPolling();
+        };
+    }, [
+        serverOnline,
+        startPolling,
+        stopPolling,
+        fetchScreenshot,
+        fetchInterfaceInfo
+    ]);
+    useEffect(()=>{
+        if (!serverOnline) return;
+        if (isUserOperating) pausePolling();
+        else {
+            resumePolling();
+            fetchScreenshot(false);
+        }
+    }, [
+        isUserOperating,
+        pausePolling,
+        resumePolling,
+        fetchScreenshot,
+        serverOnline
+    ]);
+    useEffect(()=>()=>{
+            stopPolling();
+        }, [
+        stopPolling
+    ]);
+    if (!serverOnline) return /*#__PURE__*/ jsx("div", {
+        className: "screenshot-viewer offline",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "screenshot-placeholder",
+            children: [
+                /*#__PURE__*/ jsx("h3", {
+                    children: "\uD83D\uDCF1 Screen Preview"
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    children: "Start the playground server to see real-time screenshots"
+                })
+            ]
+        })
+    });
+    if (loading && !screenshot) return /*#__PURE__*/ jsxs("div", {
+        className: "screenshot-viewer loading",
+        children: [
+            /*#__PURE__*/ jsx(Spin, {
+                size: "large"
+            }),
+            /*#__PURE__*/ jsx("p", {
+                children: "Loading screenshot..."
+            })
+        ]
+    });
+    if (error && !screenshot) return /*#__PURE__*/ jsx("div", {
+        className: "screenshot-viewer error",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "screenshot-placeholder",
+            children: [
+                /*#__PURE__*/ jsx("h3", {
+                    children: "\uD83D\uDCF1 Screen Preview"
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    className: "error-message",
+                    children: error
+                })
+            ]
+        })
+    });
+    const formatLastUpdateTime = (timestamp)=>{
+        if (!timestamp) return '';
+        const now = Date.now();
+        const diff = Math.floor((now - timestamp) / 1000);
+        if (diff < 60) return `${diff}s ago`;
+        if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+        return new Date(timestamp).toLocaleTimeString();
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "screenshot-viewer",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "screenshot-header",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "screenshot-title",
+                    children: /*#__PURE__*/ jsx("h3", {
+                        children: (null == interfaceInfo ? void 0 : interfaceInfo.type) ? interfaceInfo.type : 'Device Name'
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "screenshot-container",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "screenshot-overlay",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "device-name-overlay",
+                                children: [
+                                    "Device Name",
+                                    /*#__PURE__*/ jsx(Tooltip, {
+                                        title: null == interfaceInfo ? void 0 : interfaceInfo.description,
+                                        children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
+                                            size: 16,
+                                            className: "info-icon"
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "screenshot-controls",
+                                children: [
+                                    lastUpdateTime > 0 && /*#__PURE__*/ jsxs("span", {
+                                        className: "last-update-time",
+                                        children: [
+                                            "Last updated ",
+                                            formatLastUpdateTime(lastUpdateTime)
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Tooltip, {
+                                        title: "Refresh screenshot",
+                                        children: /*#__PURE__*/ jsx(Button, {
+                                            icon: /*#__PURE__*/ jsx(ReloadOutlined, {}),
+                                            onClick: handleManualRefresh,
+                                            loading: loading,
+                                            size: "small"
+                                        })
+                                    }),
+                                    isUserOperating && /*#__PURE__*/ jsxs("span", {
+                                        className: "operation-indicator",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Spin, {
+                                                size: "small"
+                                            }),
+                                            " Operating..."
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "screenshot-content",
+                        children: screenshot ? /*#__PURE__*/ jsx("img", {
+                            src: screenshot.startsWith('data:image/') ? screenshot : `data:image/png;base64,${screenshot}`,
+                            alt: "Device Screenshot",
+                            className: "screenshot-image",
+                            onLoad: ()=>console.log('Screenshot image loaded successfully'),
+                            onError: (e)=>{
+                                console.error('Screenshot image load error:', e);
+                                console.error('Screenshot data preview:', screenshot.substring(0, 100));
+                                setError('Failed to load screenshot image');
+                            }
+                        }) : /*#__PURE__*/ jsx("div", {
+                            className: "screenshot-placeholder",
+                            children: /*#__PURE__*/ jsx("p", {
+                                children: "No screenshot available"
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { ScreenshotViewer as default };

package/dist/es/component/service-mode-control/index.mjs

@@ -15,8 +15,7 @@ const SWITCH_BUTTON_TEXT = {
     Server: 'Switch to In-Browser Mode',
     'In-Browser': 'Switch to Server Mode'
 };
-const ServiceModeControl = (param)=>{
-    let { serviceMode } = param;
+const ServiceModeControl = ({ serviceMode })=>{
     const { setServiceMode, config } = useEnvConfig();
     const serverValid = useServerValid('Server' === serviceMode);
     const renderServerTip = ()=>{

package/dist/es/component/shiny-text/index.css

@@ -13,6 +13,23 @@
   overflow: hidden;
 }
 
+.shiny-text.theme-blue {
+  background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
+}
+
+.shiny-text.theme-purple {
+  background-image: linear-gradient(45deg, #667eea, #764ba2, #b06ab3, #9d50bb);
+}
+
+.shiny-text.theme-green {
+  background-image: linear-gradient(45deg, #11998e, #38ef7d, #2dd4bf, #10b981);
+}
+
+.shiny-text.theme-rainbow {
+  background-image: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #9d50bb, #ff0080);
+  background-size: 400%;
+}
+
 .shiny-text:after {
   content: "";
   width: 120%;
@@ -28,9 +45,9 @@
 }
 
 .shiny-text.disabled {
-  background: #2b83ff;
-  -webkit-background-clip: text;
-  background-clip: text;
+  color: #000;
+  background: none;
+  font-weight: normal;
   animation: none;
 }
 
@@ -39,6 +56,21 @@
   display: none;
 }
 
+[data-theme="dark"] .shiny-text {
+  color: rgba(0, 0, 0, 0);
+  -webkit-text-fill-color: transparent;
+  text-shadow: none;
+  background-image: linear-gradient(45deg, #a78bfa, #c084fc, #e879f9, #c084fc);
+  background-size: 300%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  animation: 8s infinite textGradient;
+}
+
+[data-theme="dark"] .shiny-text:after {
+  background: linear-gradient(90deg, rgba(197, 184, 255, 0) 0%, rgba(197, 184, 255, .05) 10%, rgba(197, 184, 255, .15) 50%, rgba(197, 184, 255, .05) 90%, rgba(197, 184, 255, 0) 100%);
+}
+
 @keyframes shine {
   0% {
     opacity: .7;

package/dist/es/component/shiny-text/index.mjs

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "./index.css";
-const ShinyText = (param)=>{
-    let { text, disabled = false, speed = 5, className = '' } = param;
+const ShinyText = ({ text, disabled = false, speed = 5, className = '', colorTheme = 'blue' })=>{
     const style = {
         '--animation-duration': `${speed}s`
     };
+    const themeClass = `theme-${colorTheme}`;
     return /*#__PURE__*/ jsx("div", {
-        className: `shiny-text ${disabled ? 'disabled' : ''} ${className}`,
+        className: `shiny-text ${themeClass} ${disabled ? 'disabled' : ''} ${className}`,
         style: style,
         children: text
     });

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

@@ -160,7 +160,6 @@
 }
 
 .playground-container .progress-description {
-  color: #000;
   padding: 8px 0;
   font-size: 14px;
   line-height: 22px;
@@ -339,3 +338,64 @@
   text-decoration: underline;
 }
 
+[data-theme="dark"] .universal-playground .error-hint {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .status-indicator {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .universal-playground .status-indicator.error {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .universal-playground .status-indicator.success {
+  color: #52c41a;
+}
+
+[data-theme="dark"] .universal-playground .operation-label {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .universal-playground .alert-message {
+  color: #f8fafd;
+  background-color: rgba(82, 38, 7, .3);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-icon-wrapper {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-content {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-content .operation-title {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .playground-footer {
+  background-color: rgba(255, 255, 255, .04);
+}
+
+[data-theme="dark"] .universal-playground .playground-footer .status-text {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .universal-playground .results-info {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-title, [data-theme="dark"] .universal-playground .result-section .result-details, [data-theme="dark"] .universal-playground .result-section .result-value {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-value.success {
+  color: #52c41a;
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-value.error {
+  color: #ff4d4f;
+}
+