@dyyz1993/agent-browser 0.9.2 → 0.11.1

package/dist/recorder/inject.js

@@ -156,7 +156,7 @@
     }
 
     if (element.closest) {
-      const recorderEl = element.closest('.xyzPnl, .xyzTb, .xyzSh, .xyzMk');
+      const recorderEl = element.closest('.xyzPnl, .xyzSh, .xyzMk');
       if (recorderEl) {
         highlightCache.set(element, { time: now, result: false });
         return false;
@@ -251,11 +251,6 @@
       return true;
     }
 
-    const toolbar = document.querySelector('.xyzTb');
-    if (toolbar && (element === toolbar || toolbar.contains(element))) {
-      return true;
-    }
-
     return false;
   }
 
@@ -1087,7 +1082,6 @@
   if (!isInIframe && !HIDE_UI) {
     let _animationFrameId = null;
     let _highlightRafId = null;
-    let _toolbarHideTimeout = null;
     let _pollInterval = null;
     let _checkPanelInterval = null;
 
@@ -1103,8 +1097,6 @@
         _highlightRafId = null;
       }
 
-      clearTimeout(_toolbarHideTimeout);
-
       if (_pollInterval) {
         clearInterval(_pollInterval);
         _pollInterval = null;
@@ -1120,7 +1112,6 @@
         document.getElementById('xyzMk'),
         document.getElementById('xyzCv'),
         document.getElementById('xyzSh'),
-        document.getElementById('xyzTb'),
         document.getElementById('xyzSt')
       ];
 
@@ -1148,8 +1139,6 @@
     }
 
     let uiElements = {};
-    let toolbarHideTimeout = null;
-    let isOverToolbar = false;
     let currentElement = null;
     let mouseX = 0, mouseY = 0, currentEdge = null;
     const EDGE_THRESHOLD = 30;
@@ -1232,19 +1221,6 @@
         .xyzSh.login { border-color: #2196F3; background: rgba(33, 150, 243, 0.1); }
         .xyzSh.data { border-color: #FF9800; background: rgba(255, 152, 0, 0.1); }
         .xyzSh.pagination { border-color: #9C27B0; background: rgba(156, 39, 176, 0.1); }
-        .xyzTb { position: absolute; z-index: 2147483647; background: white; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); padding: 4px; display: flex; gap: 2px; pointer-events: auto; }
-        .xyzTb.horizontal { flex-direction: row; }
-        .xyzTb.vertical { flex-direction: column; }
-        .xyzTb button { padding: 5px 8px; border: none; border-radius: 3px; cursor: pointer; font-size: 11px; white-space: nowrap; pointer-events: auto; }
-        .xyzTb button:hover { transform: scale(1.02); }
-        .xyzTb .btn-login { background: #E3F2FD; color: #1976D2; }
-        .xyzTb .btn-data { background: #FFF3E0; color: #F57C00; }
-        .xyzTb .btn-page { background: #F3E5F5; color: #7B1FA2; }
-        .xyzTb .btn-note { background: #E8F5E9; color: #388E3C; }
-        .xyzTb .btn-wait { background: #FFF8E1; color: #F9A825; }
-        .xyzTb .btn-container { background: #E0F7FA; color: #00838F; }
-        .xyzTb .btn-item { background: #FFF3E0; color: #F57C00; }
-        .xyzTb .btn-check { background: #E8F5E9; color: #2E7D32; }
         .xyzMk { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2147483645; }
         .xyzMrk { position: absolute; pointer-events: none; border: 2px solid rgba(76, 175, 80, 0.6); border-radius: 4px; transition: all 0.2s ease-out; }
         .xyzMrk.login { border-color: rgba(33, 150, 243, 0.8); }
@@ -1419,23 +1395,7 @@
       shadowBox.setAttribute('aria-hidden', 'true');
       document.body.appendChild(shadowBox);
 
-      const toolbar = document.createElement('div');
-      toolbar.className = 'xyzTb';
-      toolbar.id = 'xyzTb';
-      toolbar.setAttribute('aria-hidden', 'true');
-      toolbar.innerHTML = `
-        <button class="btn-wait" data-type="wait_element">⏳ Wait</button>
-        <button class="btn-container" data-type="data_container">📦 Container</button>
-        <button class="btn-item" data-type="data_item">📊 Item</button>
-        <button class="btn-page" data-type="pagination">📄 Page</button>
-        <button class="btn-login" data-type="login_check">🔐 Login</button>
-        <button class="btn-check" data-type="checkpoint">✅ Check</button>
-        <button class="btn-note" data-type="custom">📝 Note</button>
-      `;
-      toolbar.style.display = 'none';
-      document.body.appendChild(toolbar);
-
-      uiElements = { panel, markersContainer, canvas, shadowBox, toolbar, style };
+      uiElements = { panel, markersContainer, canvas, shadowBox, style };
 
       function updateUI() {
         const container = document.getElementById('xyzSteps');
@@ -1646,55 +1606,6 @@
         shadowBox.className = 'xyzSh' + (annotation ? ' ' + annotation.type : '');
       }
 
-      function calculateToolbarPosition(rect) {
-        const GAP = 10;
-        const TOOLBAR_W = 280;
-        const TOOLBAR_H = 32;
-        const scrollX = window.scrollX, scrollY = window.scrollY;
-
-        let left = mouseX + GAP;
-        let top = mouseY + GAP;
-
-        if (left + TOOLBAR_W > window.innerWidth - 10) {
-          left = mouseX - TOOLBAR_W - GAP;
-        }
-        if (top + TOOLBAR_H > window.innerHeight - 10) {
-          top = mouseY - TOOLBAR_H - GAP;
-        }
-
-        left = Math.max(10, Math.min(window.innerWidth - TOOLBAR_W - 10, left));
-        top = Math.max(10, Math.min(window.innerHeight - TOOLBAR_H - 10, top));
-
-        return { left: left + scrollX, top: top + scrollY, orientation: 'horizontal' };
-      }
-
-      function updateToolbar(element) {
-        if (!element) {
-          toolbar.style.display = 'none';
-          return;
-        }
-        const rect = element.getBoundingClientRect();
-        const pos = calculateToolbarPosition(rect);
-        toolbar.style.left = pos.left + 'px';
-        toolbar.style.top = pos.top + 'px';
-        toolbar.className = 'xyzTb ' + pos.orientation;
-        toolbar.style.display = 'flex';
-      }
-
-      function showToolbar() {
-        clearTimeout(toolbarHideTimeout);
-        toolbar.style.display = 'flex';
-      }
-
-      function hideToolbarDelayed() {
-        clearTimeout(toolbarHideTimeout);
-        toolbarHideTimeout = setTimeout(() => {
-          if (!isOverToolbar) {
-            toolbar.style.display = 'none';
-          }
-        }, TOOLBAR_HIDE_DELAY);
-      }
-
       function annotateElement(element, type) {
         if (!element) return;
         const selector = getSelector(element);
@@ -1748,23 +1659,6 @@
         updateShadowBox(element);
       }
 
-      toolbar.addEventListener('mouseenter', () => {
-        isOverToolbar = true;
-        showToolbar();
-      });
-
-      toolbar.addEventListener('mouseleave', () => {
-        isOverToolbar = false;
-        hideToolbarDelayed();
-      });
-
-      toolbar.querySelectorAll('button').forEach(btn => {
-        btn.addEventListener('click', (e) => {
-          e.stopPropagation();
-          annotateElement(currentElement, btn.dataset.type);
-        });
-      });
-
       let lastHighlightTime = 0;
 
       function throttledHighlight(element) {
@@ -1777,20 +1671,17 @@
             highlightRafId = requestAnimationFrame(() => {
               highlightRafId = null;
               updateShadowBox(pendingHighlightElement);
-              updateToolbar(pendingHighlightElement);
             });
           }
         }
       }
 
       document.addEventListener('mousemove', (e) => {
-        if (isOverToolbar) return;
-
         const element = e.composedPath()[0] || e.target;
         mouseX = e.clientX;
         mouseY = e.clientY;
 
-        if (element === shadowBox || element === toolbar || toolbar.contains(element)) return;
+        if (element === shadowBox) return;
         if (isInPanel(element)) {
           throttledHighlight(null);
           return;
@@ -1880,34 +1771,70 @@
       createRecorderOverlay();
     }, 0);
 
-    // 监听页面变化
-    let lastUrl = window.location.href;
-    _checkPanelInterval = setInterval(() => {
-      if (window.xyzStopped) {
-        console.log('[Panel] Session was stopped, removing panel');
-        if (typeof window.xyzClose === 'function') {
-          window.xyzClose();
+    // ============ 鵘化版面板恢复机制 (使用 MutationObserver) ============
+
+    // 使用 MutationObserver 替代 setInterval 来实时检测面板是否消失
+    // 这比轮询更高效， 可以立即恢复面板， 不占用主线程
+    let panelObserver = null;
+
+    function startPanelObserver() {
+      if (panelObserver) {
+        panelObserver.disconnect();
+      }
+
+      // 监听 document.body 的子元素变化
+      panelObserver = new MutationObserver((mutations) => {
+        // 检查录制会话是否已停止
+        if (window.xyzStopped) {
+          console.log('[Panel] Session was stopped, removing observer');
+          if (typeof window.xyzClose === 'function') {
+            window.xyzClose();
+          }
+          if (panelObserver) {
+            panelObserver.disconnect();
+            panelObserver = null;
+          }
+          return;
         }
-        clearInterval(_checkPanelInterval);
-        _checkPanelInterval = null;
+
+        // 检查录制会话是否激活
+        if (!window.xyzActive) {
+          console.log('[Panel] Session not active, skipping panel check');
+          return;
+        }
+
+        // 检查面板是否存在
+        const panel = document.getElementById('xyzPnl');
+        const style = document.getElementById('xyzSt');
+        if (document.body && (!panel || !style)) {
+          console.log('[Panel] Panel or style missing, recreating...');
+          createRecorderOverlay();
+        }
+      });
+
+      // 启动观察器
+      panelObserver.observe(document.body, {
+        childList: true,
+        subtree: false
+      });
+
+      console.log('[Panel] MutationObserver started, watching for panel removal');
+    }
+
+    // 延迟创建面板（保持与原逻辑兼容）
+    setTimeout(() => {
+      if (window.xyzStopped) {
+        console.log('[Panel] Session was stopped during init, skipping panel creation');
         return;
       }
-
       if (!window.xyzActive) {
-        clearInterval(_checkPanelInterval);
-        _checkPanelInterval = null;
+        console.log('[Panel] Session not active during init, skipping panel creation');
         return;
       }
+      createRecorderOverlay();
+    }, 0);
 
-      if (window.location.href !== lastUrl) {
-        lastUrl = window.location.href;
-      }
-
-      const panel = document.getElementById('xyzPnl');
-      const style = document.getElementById('xyzSt');
-      if (document.body && (!panel || !style)) {
-        createRecorderOverlay();
-      }
-    }, 1000);
+    // 启动 MutationObserver
+    startPanelObserver();
   }
 })();

package/dist/stream-server-standalone.d.ts

@@ -1,3 +1,4 @@
+import { BrowserManager } from './browser.js';
 export declare function getStreamPort(): number;
 declare class StreamServerStandalone {
     private wss;
@@ -7,15 +8,20 @@ declare class StreamServerStandalone {
     private sessions;
     private clients;
     private daemonSockets;
+    private outboundSockets;
     private frameBuffers;
     private instanceIdToSession;
     private latestFrames;
+    private clientStates;
+    browser?: BrowserManager;
     constructor(port?: number);
     private checkPortAvailable;
     start(): Promise<void>;
     private startServer;
     private handleWebSocketConnection;
     private handleClientMessage;
+    private requestElementBox;
+    private sendCroppedFrame;
     private startIpcServer;
     private handleIpcConnection;
     private handleIpcMessage;
@@ -24,6 +30,10 @@ declare class StreamServerStandalone {
     private broadcastStatus;
     private sendStatus;
     private getTotalClientCount;
+    /**
+     * Send a command to the daemon via Unix socket and return the response
+     */
+    private sendCommandToDaemon;
     private getPidFile;
     private getIpcPath;
     private writePidFile;

package/dist/stream-server-standalone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stream-server-standalone.d.ts","sourceRoot":"","sources":["../src/stream-server-standalone.ts"],"names":[],"mappings":"AAYA,wBAAgB,aAAa,IAAI,MAAM,CAEtC;AA4BD,cAAM,sBAAsB;IAC1B,OAAO,CAAC,GAAG,CAAgC;IAC3C,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAA0C;IACzD,OAAO,CAAC,aAAa,CAAsC;IAC3D,OAAO,CAAC,YAAY,CAA8D;IAClF,OAAO,CAAC,mBAAmB,CAAkC;IAC7D,OAAO,CAAC,YAAY,CAA4D;gBAEpE,IAAI,GAAE,MAA4B;YAIhC,kBAAkB;IA6B1B,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;YAsBd,WAAW;IAuEzB,OAAO,CAAC,yBAAyB;IA+EjC,OAAO,CAAC,mBAAmB;YA0Bb,cAAc;IAuB5B,OAAO,CAAC,mBAAmB;IAuC3B,OAAO,CAAC,gBAAgB;IA+CxB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,qBAAqB;IAuCvB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;CAsB5B;AAED,wBAAgB,sBAAsB,IAAI,MAAM,CAE/C;AAED,wBAAgB,sBAAsB,IAAI,MAAM,CAE/C;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"stream-server-standalone.d.ts","sourceRoot":"","sources":["../src/stream-server-standalone.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM9C,wBAAgB,aAAa,IAAI,MAAM,CAEtC;AAyCD,cAAM,sBAAsB;IAC1B,OAAO,CAAC,GAAG,CAAgC;IAC3C,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAA0C;IACzD,OAAO,CAAC,aAAa,CAAsC;IAC3D,OAAO,CAAC,eAAe,CAAsC;IAC7D,OAAO,CAAC,YAAY,CAA8D;IAClF,OAAO,CAAC,mBAAmB,CAAkC;IAC7D,OAAO,CAAC,YAAY,CAA4D;IAChF,OAAO,CAAC,YAAY,CAA0C;IAC9D,OAAO,CAAC,EAAE,cAAc,CAAC;gBAEb,IAAI,GAAE,MAA4B;YAIhC,kBAAkB;IA6B1B,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;YAsBd,WAAW;IAwJzB,OAAO,CAAC,yBAAyB;IAkHjC,OAAO,CAAC,mBAAmB;IAkD3B,OAAO,CAAC,iBAAiB;YAkBX,gBAAgB;YA6EhB,cAAc;IAuB5B,OAAO,CAAC,mBAAmB;YAsCb,gBAAgB;IA8F9B,OAAO,CAAC,eAAe;YA4GT,cAAc;IAiI5B,OAAO,CAAC,eAAe;IAiCvB,OAAO,CAAC,UAAU;IA+BlB,OAAO,CAAC,mBAAmB;IAQ3B;;OAEG;YACW,mBAAmB;IAkEjC,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,qBAAqB;IAuCvB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;CAsB5B;AAED,wBAAgB,sBAAsB,IAAI,MAAM,CAE/C;AAED,wBAAgB,sBAAsB,IAAI,MAAM,CAE/C;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}