@mindstudio-ai/local-model-tunnel 0.5.36 → 0.5.37

package/dist/{chunk-HWO7KKLN.js → chunk-7E5LTDSO.js}

@@ -1638,13 +1638,15 @@ var ClientRegistry = class {
       id,
       ws,
       mode: hello.mode,
+      mirrorSource: !!hello.mirror,
+      mirrorReady: false,
       url: hello.url,
       viewport: hello.viewport,
       connectedAt: Date.now(),
       alive: true,
       activeCommandId: null
     });
-    log.info("proxy", "Browser client connected", { clientId: id, mode: hello.mode, url: hello.url });
+    log.info("proxy", "Browser client connected", { clientId: id, mode: hello.mode, mirror: !!hello.mirror, url: hello.url });
     return id;
   }
   remove(id) {
@@ -1673,10 +1675,24 @@ var ClientRegistry = class {
     }
     return fallback;
   }
-  /** Get all connected mirror-mode clients (for relaying mirror events). */
+  /** Get all connected mirror viewer clients (for relaying mirror events). */
   getMirrorClients() {
     return [...this.clients.values()].filter((c) => c.mode === "mirror");
   }
+  /** Check if a mirror recording source (phone) is connected. */
+  hasMirrorSource() {
+    for (const client of this.clients.values()) {
+      if (client.mirrorSource) return true;
+    }
+    return false;
+  }
+  /** Get the mirror source client if connected. */
+  getMirrorSource() {
+    for (const client of this.clients.values()) {
+      if (client.mirrorSource) return client;
+    }
+    return void 0;
+  }
   getAll() {
     return [...this.clients.values()];
   }
@@ -1737,6 +1753,8 @@ var DevProxy = class _DevProxy {
   clients = new ClientRegistry();
   pendingResults = /* @__PURE__ */ new Map();
   commandQueue = [];
+  /** Last mirror snapshot — sent to new mirror viewers so they don't wait for the next checkout. */
+  lastMirrorSnapshot = null;
   /** Upstream dev server health tracking. */
   upstreamUp = true;
   healthCheckTimer = null;
@@ -1966,9 +1984,16 @@ var DevProxy = class _DevProxy {
         clientId = this.clients.add(ws, {
           mode,
           url: String(msg.url || ""),
-          viewport
+          viewport,
+          mirror: !!msg.mirror
         });
         ws.send(JSON.stringify({ type: "ack", clientId }));
+        if (mode === "mirror" && this.lastMirrorSnapshot) {
+          try {
+            ws.send(this.lastMirrorSnapshot);
+          } catch {
+          }
+        }
         return;
       }
       switch (msg.type) {
@@ -1980,9 +2005,38 @@ var DevProxy = class _DevProxy {
             appendBrowserLogEntries(msg.entries);
           }
           break;
-        case "mirror":
+        case "mirror": {
+          const events = msg.events;
+          if (clientId && Array.isArray(events)) {
+            let meta = null;
+            let snapshot = null;
+            for (const evt of events) {
+              if (evt.type === 4) meta = evt;
+              if (evt.type === 2) snapshot = evt;
+              if (evt.type === 4 && evt.data?.width && evt.data?.height) {
+                const client = this.clients.get(clientId);
+                if (client) {
+                  client.viewport = {
+                    w: evt.data.width,
+                    h: evt.data.height
+                  };
+                  client.mirrorReady = true;
+                }
+              }
+            }
+            if (snapshot) {
+              const snapshotEvents = [];
+              if (meta) snapshotEvents.push(meta);
+              snapshotEvents.push(snapshot);
+              this.lastMirrorSnapshot = JSON.stringify({
+                type: "mirror",
+                events: snapshotEvents
+              });
+            }
+          }
           this.relayMirrorEvents(data.toString());
           break;
+        }
       }
     });
     ws.on("pong", () => {
@@ -1993,9 +2047,13 @@ var DevProxy = class _DevProxy {
       if (clientId) {
         const client = this.clients.remove(clientId);
         if (client?.activeCommandId) {
-          log.debug("proxy", "Browser disconnected with active command, keeping pending", {
-            commandId: client.activeCommandId
-          });
+          log.debug(
+            "proxy",
+            "Browser disconnected with active command, keeping pending",
+            {
+              commandId: client.activeCommandId
+            }
+          );
         }
       }
     });
@@ -2137,6 +2195,21 @@ var DevProxy = class _DevProxy {
         this.serveMirrorPage(clientRes);
         return;
       }
+      if (clientReq.url === "/__mindstudio_dev__/mirror-status" && clientReq.method === "GET") {
+        const source = this.clients.getMirrorSource();
+        const ready = source?.mirrorReady ?? false;
+        const body = JSON.stringify({
+          active: ready,
+          viewport: ready ? source.viewport : null
+        });
+        clientRes.writeHead(200, {
+          "Content-Type": "application/json",
+          "Cache-Control": "no-store",
+          ...this.corsHeaders(clientReq)
+        });
+        clientRes.end(body);
+        return;
+      }
     }
     if (clientReq.method === "OPTIONS" && clientReq.headers.origin) {
       clientRes.writeHead(204, {
@@ -2228,7 +2301,9 @@ var DevProxy = class _DevProxy {
           upstreamRes.on("data", (chunk) => chunks.push(chunk));
           upstreamRes.on("end", async () => {
             let html = Buffer.concat(chunks).toString("utf-8");
-            const authCookie = _DevProxy.parseAuthCookie(clientReq.headers.cookie);
+            const authCookie = _DevProxy.parseAuthCookie(
+              clientReq.headers.cookie
+            );
             let contextOverride;
             if (authCookie) {
               const resolved = await this.resolveAuthCookie(authCookie);
@@ -2313,64 +2388,105 @@ var DevProxy = class _DevProxy {
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Mobile Mirror</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rrweb/replay@latest/dist/style.css">
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    html, body { height: 100%; background: #111; overflow: hidden; }
-    #player { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
-    .replayer-wrapper { box-shadow: 0 0 40px rgba(0,0,0,0.5); border-radius: 4px; overflow: hidden; }
-    #status { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: #666; font-family: -apple-system, system-ui, sans-serif; font-size: 13px; }
+    html, body { height: 100%; background: #eaeaea; overflow: hidden; }
+    #player { width: 100%; height: 100%; }
+    .replayer-wrapper { overflow: hidden; transform-origin: center center; visibility: hidden; }
+    .replayer-wrapper iframe { border: none; outline: none; }
+    .replayer-mouse.touch-device {
+      width: 44px; height: 44px; margin-left: -22px; margin-top: -22px;
+      border-width: 2px; border-color: rgba(221, 37, 144, 0);
+      background: rgba(221, 37, 144, 0.06);
+    }
+    .replayer-mouse.touch-device.touch-active {
+      border-color: rgba(221, 37, 144, 0.8);
+      background: rgba(221, 37, 144, 0.12);
+    }
+    .replayer-mouse.touch-device::after,
+    .replayer-mouse.touch-device.active::after { display: none !important; }
+    .replayer-mouse:not(.touch-device) { display: none !important; }
   </style>
+  <script type="importmap">
+  { "imports": { "@rrweb/replay": "https://cdn.jsdelivr.net/npm/@rrweb/replay@latest/+esm" } }
+  </script>
 </head>
 <body>
   <div id="player"></div>
-  <div id="status">Waiting for mobile device...</div>
-  <script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.13/dist/rrweb.umd.cjs.js"></script>
-  <script>
-    (function() {
-      var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-      var ws = new WebSocket(proto + '//' + location.host + '/__mindstudio_dev__/ws');
-      var replayer = null;
-      var status = document.getElementById('status');
+  <script type="module">
+    import { Replayer } from '@rrweb/replay';
 
-      ws.onopen = function() {
-        ws.send(JSON.stringify({
-          type: 'hello',
-          mode: 'mirror',
-          url: location.href,
-          viewport: { w: window.innerWidth, h: window.innerHeight }
-        }));
-      };
+    const BUFFER_MS = 50;
+    const playerRoot = document.getElementById('player');
+
+    let replayer = null;
+    let lastMeta = null;
+    let notifiedViewport = false;
+
+    function showWrapper() {
+      const wrapper = document.querySelector('.replayer-wrapper');
+      if (wrapper) wrapper.style.visibility = 'visible';
+    }
+
+    function buildReplayer(snapshotEvent) {
+      if (replayer) {
+        try { replayer.destroy(); } catch(e) {}
+        playerRoot.innerHTML = '';
+      }
+      const initEvents = [];
+      if (lastMeta) initEvents.push(lastMeta);
+      initEvents.push(snapshotEvent);
+
+      replayer = new Replayer(initEvents, {
+        root: playerRoot,
+        liveMode: true,
+        pauseAnimation: false,
+        mouseTail: false,
+      });
+      replayer.startLive(snapshotEvent.timestamp - BUFFER_MS);
+      requestAnimationFrame(showWrapper);
+    }
 
-      ws.onmessage = function(e) {
-        var msg;
-        try { msg = JSON.parse(e.data); } catch(e) { return; }
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(proto + '//' + location.host + '/__mindstudio_dev__/ws');
 
-        if (msg.type !== 'mirror' || !Array.isArray(msg.events)) return;
+    ws.onopen = () => {
+      ws.send(JSON.stringify({
+        type: 'hello', mode: 'mirror', url: location.href,
+        viewport: { w: window.innerWidth, h: window.innerHeight },
+      }));
+    };
 
-        for (var i = 0; i < msg.events.length; i++) {
-          var event = msg.events[i];
-          if (!replayer) {
-            replayer = new rrweb.Replayer([], {
-              root: document.getElementById('player'),
-              liveMode: true,
-              insertStyleRules: [
-                '.replayer-wrapper { position: relative !important; }',
-              ],
-            });
-            replayer.startLive(Date.now() - 500);
-            status.textContent = 'Connected';
-            setTimeout(function() { status.style.opacity = '0'; }, 2000);
+    ws.onmessage = (e) => {
+      let msg;
+      try { msg = JSON.parse(e.data); } catch { return; }
+      if (msg.type !== 'mirror' || !Array.isArray(msg.events)) return;
+
+      for (const event of msg.events) {
+        if (event.type === 4) {
+          lastMeta = event;
+          if (!notifiedViewport && event.data && event.data.width && window.parent !== window) {
+            notifiedViewport = true;
+            window.parent.postMessage({
+              channel: 'mindstudio-mirror',
+              command: 'viewport',
+              width: event.data.width,
+              height: event.data.height,
+            }, '*');
           }
-          replayer.addEvent(event);
         }
-      };
+        if (event.type === 2 && !replayer) {
+          buildReplayer(event);
+          continue;
+        }
+        if (replayer) replayer.addEvent(event);
+      }
+    };
 
-      ws.onclose = function() {
-        status.style.opacity = '1';
-        status.textContent = 'Disconnected \u2014 reconnecting...';
-        setTimeout(function() { location.reload(); }, 2000);
-      };
-    })();
+    ws.onclose = () => {
+      setTimeout(() => location.reload(), 2000);
+    };
   </script>
 </body>
 </html>`;
@@ -2463,7 +2579,11 @@ var DevProxy = class _DevProxy {
             try {
               const body = JSON.parse(Buffer.concat(chunks).toString("utf-8"));
               if (body.user && body.token) {
-                resolve2({ user: body.user, token: body.token, methods: body.methods ?? {} });
+                resolve2({
+                  user: body.user,
+                  token: body.token,
+                  methods: body.methods ?? {}
+                });
               } else {
                 resolve2(null);
               }
@@ -2782,4 +2902,4 @@ export {
   watchTableFiles,
   watchConfigFile
 };
-//# sourceMappingURL=chunk-HWO7KKLN.js.map
+//# sourceMappingURL=chunk-7E5LTDSO.js.map