@midscene/visualizer 0.26.2 → 0.26.3-beta-20250813075706.0

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

@@ -1,290 +1,332 @@
 body {
   margin: 0;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    "Noto Sans",
-    Helvetica,
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji";
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   font-size: 14px;
 }
+
 .prompt-input-wrapper {
   width: 100%;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper {
-  display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
+  display: flex;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
-  display: flex;
   align-items: center;
   height: 100%;
+  display: flex;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
   height: 24px;
-  padding: 0 8px;
-  line-height: 24px;
-  border-radius: 11px;
-  margin-right: 8px;
   box-shadow: none;
+  background-color: #f7f7f7;
   border: none;
-  background-color: #F7F7F7;
+  border-radius: 11px;
+  margin-right: 8px;
+  padding: 0 8px;
   font-size: 12px;
+  line-height: 24px;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:before {
   display: none;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:focus-within {
   outline: none;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
-  background-color: #2B83FF;
-  border-color: #2B83FF;
-  color: white;
+  color: #fff;
+  background-color: #2b83ff;
+  border-color: #2b83ff;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked:hover {
   color: #fff;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:hover {
-  color: #2B83FF;
+  color: #2b83ff;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
-  display: flex;
   align-items: center;
+  display: flex;
 }
+
 .prompt-input-wrapper .main-side-console-input {
-  position: relative;
   margin-top: 10px;
+  position: relative;
 }
+
 .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea {
+  white-space: pre-wrap;
+  scrollbar-width: thin;
+  background: #fff;
+  border: 1px solid #f2f4f7;
   border-radius: 12px;
-  border: 1px solid #F2F4F7;
-  background: white;
   padding: 12px 16px;
-  transition: background-color 0.2s ease;
-  overflow-y: auto;
-  white-space: pre-wrap;
   line-height: 21px;
-  scrollbar-width: thin;
+  transition: background-color .2s;
+  overflow-y: auto;
 }
+
 @keyframes hue-shift {
   0% {
-    filter: hue-rotate(0deg);
+    filter: hue-rotate();
   }
+
   100% {
     filter: hue-rotate(360deg);
   }
 }
+
 .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus-within {
-  border: 1px solid transparent;
-  background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #4285f4 0%, #0066FF 25%, #7B02C5 50%, #ea4335 75%, #ff7043 100%) border-box;
+  background: linear-gradient(#fff, #fff) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box;
+  border: 1px solid rgba(0, 0, 0, 0);
 }
+
 .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea::-webkit-scrollbar {
   width: 6px;
 }
+
 .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, .2);
   border-radius: 3px;
 }
+
 .prompt-input-wrapper .main-side-console-input.loading .main-side-console-input-textarea {
-  border: 1px solid transparent;
-  background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #4285f4 0%, #0066FF 25%, #7B02C5 50%, #ea4335 75%, #ff7043 100%) border-box;
-  animation: hue-shift 5s linear infinite;
+  background: linear-gradient(#fff, #fff) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box;
+  border: 1px solid rgba(0, 0, 0, 0);
+  animation: 5s linear infinite hue-shift;
 }
+
 .prompt-input-wrapper .main-side-console-input .ant-form-item-control-input-content {
-  border: 3px solid transparent;
-  border-radius: 14px;
   z-index: 999;
+  border: 3px solid rgba(0, 0, 0, 0);
+  border-radius: 14px;
 }
+
 .prompt-input-wrapper .main-side-console-input:focus-within .ant-form-item-control-input-content {
-  border-color: rgba(43, 131, 255, 0.16);
+  border-color: rgba(43, 131, 255, .16);
 }
+
 .prompt-input-wrapper .main-side-console-input.disabled .form-controller-wrapper {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0);
 }
+
 .prompt-input-wrapper .ant-input {
   padding-bottom: 40px;
 }
+
 .prompt-input-wrapper .form-controller-wrapper {
-  position: absolute;
-  display: flex;
+  box-sizing: border-box;
+  background-color: #fff;
   flex-direction: row;
   justify-content: flex-end;
-  width: calc(100% - 32px);
-  box-sizing: border-box;
   align-items: flex-end;
   gap: 8px;
-  background-color: #FFF;
-  left: 16px;
-  bottom: 0.5px;
+  width: calc(100% - 32px);
   padding: 12px 0;
   line-height: 32px;
-  transition: background-color 0.2s ease;
+  transition: background-color .2s;
+  display: flex;
+  position: absolute;
+  bottom: .5px;
+  left: 16px;
 }
+
 .prompt-input-wrapper .settings-wrapper {
-  display: flex;
-  flex-direction: row;
-  gap: 2px;
   color: #777;
-  flex-wrap: wrap;
+  flex-flow: wrap;
+  gap: 2px;
+  display: flex;
 }
+
 .prompt-input-wrapper .settings-wrapper.settings-wrapper-hover {
   color: #3b3b3b;
 }
+
 .selector-trigger {
+  cursor: pointer;
   width: 24px;
   height: 24px;
-  cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all .2s;
 }
+
 .selector-trigger .action-icon {
+  color: rgba(0, 0, 0, .85);
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.85);
-  transition: all 0.2s;
+  transition: all .2s;
 }
+
 .selector-trigger .action-icon:hover {
-  color: #2B83FF;
+  color: #2b83ff;
 }
+
 .history-modal-container {
+  border-radius: 12px 12px 0 0;
+  flex-direction: column;
   height: 70vh;
   display: flex;
-  flex-direction: column;
-  border-radius: 12px 12px 0 0;
   overflow: hidden;
 }
+
 .history-modal-container .history-modal-header {
-  display: flex;
   justify-content: space-between;
   align-items: center;
   height: 48px;
-  line-height: 48px;
   padding: 0 25px;
+  line-height: 48px;
+  display: flex;
 }
+
 .history-modal-container .history-modal-header .close-button {
+  justify-content: center;
+  align-items: center;
   margin-right: -4px;
   padding: 4px;
   display: flex;
-  align-items: center;
-  justify-content: center;
 }
+
 .history-modal-container .history-modal-header .close-button .anticon {
+  color: #999;
   font-size: 18px;
-  color: #999999;
 }
+
 .history-modal-container .history-modal-header .close-button:hover .anticon {
-  color: #666666;
+  color: #666;
 }
+
 .history-modal-container .history-search-section {
+  background: #fff;
   padding: 16px 20px;
-  background: #ffffff;
 }
+
 .history-modal-container .history-search-section .search-input-wrapper {
-  display: flex;
+  color: rgba(0, 0, 0, .25);
   align-items: center;
   gap: 12px;
-  color: rgba(0, 0, 0, 0.25);
+  display: flex;
 }
+
 .history-modal-container .history-search-section .search-input-wrapper .search-input {
-  flex: 1 1;
-  height: 36px;
-  border-radius: 16px;
   background: #f1f2f3;
   border: none;
+  border-radius: 16px;
+  flex: 1;
+  height: 36px;
 }
+
 .history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input {
-  background: transparent;
-  border: none;
   box-shadow: none;
+  background: none;
+  border: none;
 }
-.history-modal-container .history-search-section .search-input-wrapper .search-input:hover,
-.history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
+
+.history-modal-container .history-search-section .search-input-wrapper .search-input:hover, .history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
+  background: #fff;
   border-color: #d9d9d9;
-  background: #ffffff;
 }
+
 .history-modal-container .history-search-section .search-input-wrapper .clear-button {
   color: #1890ff;
-  padding: 0;
   height: auto;
+  padding: 0;
 }
+
 .history-modal-container .history-search-section .search-input-wrapper .clear-button:hover {
   color: #40a9ff;
 }
+
 .history-modal-container .history-content {
-  flex: 1 1;
+  flex: 1;
+  padding: 0 25px 25px;
   overflow-y: auto;
-  padding: 0 25px 25px 25px;
 }
+
 .history-modal-container .history-content .history-group {
   margin-bottom: 10px;
 }
+
 .history-modal-container .history-content .history-group .history-group-title {
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
+  color: rgba(0, 0, 0, .45);
   height: 40px;
-  line-height: 40px;
+  font-size: 12px;
   font-weight: 400;
+  line-height: 40px;
 }
+
 .history-modal-container .history-content .history-group .history-item {
   cursor: pointer;
+  color: rgba(0, 0, 0, .85);
+  white-space: nowrap;
+  text-overflow: ellipsis;
   height: 40px;
-  line-height: 40px;
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.85);
+  line-height: 40px;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
+
 .history-modal-container .history-content .history-group .history-item:hover {
   background: #f2f4f7;
-  padding: 0 8px;
   margin: 0 -8px;
+  padding: 0 8px;
 }
+
 .history-modal-container .history-content .no-results {
   text-align: center;
+  color: #999;
   padding: 40px 20px;
-  color: #999999;
 }
+
 .ant-modal-wrap .ant-modal-content {
-  animation: slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
+  animation: .3s cubic-bezier(.4, 0, .2, 1) forwards slideUpFromBottom !important;
 }
+
 @keyframes slideUpFromBottom {
   0% {
-    transform: translateY(100%);
     opacity: 0;
+    transform: translateY(100%);
   }
+
   100% {
-    transform: translateY(0);
     opacity: 1;
+    transform: translateY(0);
   }
 }
+
 .result-wrapper {
-  display: flex;
-  height: 100%;
   justify-content: center;
+  height: 100%;
   margin: 4px 0;
+  display: flex;
 }
+
 .result-wrapper .loading-container {
   text-align: center;
 }
+
 .result-wrapper .loading-container .loading-progress-text {
-  margin-top: 8px;
   color: #888;
+  margin-top: 8px;
   font-size: 12px;
 }
+
 .result-wrapper pre {
-  margin: 4px 0;
-  margin: 0;
   white-space: pre-wrap;
   text-wrap: unset;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  background: #F2F4F7;
+  background: #f2f4f7;
   border-radius: 8px;
+  margin: 0;
   padding: 14px;
   overflow: scroll;
 }
+

package/dist/es/component/playground/playground-constants.mjs

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert } from "antd";
+import shiny_text from "../shiny-text.mjs";
+import "./index.css";
+const errorMessageServerNotReady = /*#__PURE__*/ jsxs("span", {
+    children: [
+        "Don't worry, just one more step to launch the playground server.",
+        /*#__PURE__*/ jsx("br", {}),
+        "Please run one of the commands under the midscene project directory:",
+        /*#__PURE__*/ jsx("br", {}),
+        "a. ",
+        /*#__PURE__*/ jsx("strong", {
+            children: "npx midscene-playground"
+        }),
+        /*#__PURE__*/ jsx("br", {}),
+        "b. ",
+        /*#__PURE__*/ jsx("strong", {
+            children: "npx --yes @midscene/web"
+        })
+    ]
+});
+const serverLaunchTip = function() {
+    let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
+    return /*#__PURE__*/ jsx("div", {
+        className: "server-tip",
+        children: /*#__PURE__*/ jsx(Alert, {
+            message: "Playground Server Not Ready",
+            description: notReadyMessage,
+            type: "warning"
+        })
+    });
+};
+const emptyResultTip = /*#__PURE__*/ jsx("div", {
+    className: "result-empty-tip",
+    style: {
+        textAlign: 'center'
+    },
+    children: /*#__PURE__*/ jsx(shiny_text, {
+        disabled: true,
+        text: "The result will be shown here"
+    })
+});
+const trackingTip = 'limit popup to current tab';
+const deepThinkTip = 'deep think';
+export { deepThinkTip, emptyResultTip, errorMessageServerNotReady, serverLaunchTip, trackingTip };

package/dist/es/component/playground/playground-utils.mjs

@@ -0,0 +1,89 @@
+import { PLAYGROUND_SERVER_PORT } from "@midscene/shared/constants";
+import { ERROR_CODE_NOT_IMPLEMENTED_AS_DESIGNED, StaticPage, StaticPageAgent } from "@midscene/web/playground";
+const serverBase = `http://localhost:${PLAYGROUND_SERVER_PORT}`;
+const checkServerStatus = async ()=>{
+    try {
+        const res = await fetch(`${serverBase}/status`);
+        return 200 === res.status;
+    } catch (e) {
+        return false;
+    }
+};
+const requestPlaygroundServer = async function(context, type, prompt) {
+    let { requestId, deepThink } = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {};
+    const payload = {
+        context,
+        type,
+        prompt
+    };
+    if (requestId) payload.requestId = requestId;
+    if (deepThink) payload.deepThink = deepThink;
+    const res = await fetch(`${serverBase}/execute`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload)
+    });
+    return res.json();
+};
+const overrideServerConfig = async (aiConfig)=>fetch(`${serverBase}/config`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            aiConfig
+        })
+    });
+const cancelTask = async (requestId)=>{
+    try {
+        const res = await fetch(`${serverBase}/cancel/${requestId}`);
+        return res.json();
+    } catch (error) {
+        console.error('Failed to cancel task:', error);
+        return {
+            error: 'Failed to cancel task'
+        };
+    }
+};
+const getTaskProgress = async (requestId)=>{
+    try {
+        const response = await fetch(`${serverBase}/task-progress/${requestId}`);
+        return await response.json();
+    } catch (error) {
+        console.error('Failed to poll task progress:', error);
+        return {
+            tip: null
+        };
+    }
+};
+const actionNameForType = (type)=>{
+    if ('aiAction' === type) return 'Action';
+    if ('aiQuery' === type) return 'Query';
+    if ('aiAssert' === type) return 'Assert';
+    if ('aiTap' === type) return 'Tap';
+    return type;
+};
+const staticAgentFromContext = (context)=>{
+    const page = new StaticPage(context);
+    return new StaticPageAgent(page);
+};
+const formatErrorMessage = (e)=>{
+    const errorMessage = (null == e ? void 0 : e.message) || '';
+    if (errorMessage.includes('of different extension')) return 'Conflicting extension detected. Please disable the suspicious plugins and refresh the page. Guide: https://midscenejs.com/quick-experience.html#faq';
+    if (!(null == errorMessage ? void 0 : errorMessage.includes(ERROR_CODE_NOT_IMPLEMENTED_AS_DESIGNED))) return errorMessage;
+    return 'Unknown error';
+};
+const getPlaceholderForType = (type)=>{
+    if ('aiQuery' === type) return 'What do you want to query?';
+    if ('aiAssert' === type) return 'What do you want to assert?';
+    return 'What do you want to do?';
+};
+const blankResult = {
+    result: null,
+    dump: null,
+    reportHTML: null,
+    error: null
+};
+export { actionNameForType, blankResult, cancelTask, checkServerStatus, formatErrorMessage, getPlaceholderForType, getTaskProgress, overrideServerConfig, requestPlaygroundServer, serverBase, staticAgentFromContext };

package/dist/es/component/playground/useServerValid.mjs

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { useEnvConfig } from "../store/store.mjs";
+import { checkServerStatus } from "./playground-utils.mjs";
+const useServerValid = function() {
+    let shouldRun = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : true;
+    const [serverValid, setServerValid] = useState(true);
+    const { serviceMode } = useEnvConfig();
+    useEffect(()=>{
+        let interruptFlag = false;
+        if (!shouldRun) return;
+        Promise.resolve((async ()=>{
+            while(!interruptFlag){
+                const status = await checkServerStatus();
+                status ? setServerValid(true) : setServerValid(false);
+                await new Promise((resolve)=>setTimeout(resolve, 1000));
+            }
+        })());
+        return ()=>{
+            interruptFlag = true;
+        };
+    }, [
+        serviceMode,
+        shouldRun
+    ]);
+    return serverValid;
+};
+export { useServerValid };

package/dist/es/component/playground/useStaticPageAgent.mjs

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+import { staticAgentFromContext } from "./playground-utils.mjs";
+const useStaticPageAgent = (context)=>{
+    const agent = useMemo(()=>{
+        if (!context) return null;
+        return staticAgentFromContext(context);
+    }, [
+        context
+    ]);
+    return agent;
+};
+export { staticAgentFromContext, useStaticPageAgent };