deckide 3.5.34 → 3.5.36

package/dist/utils/agent-browser.js

@@ -10,6 +10,10 @@ const DEFAULT_PROFILE_DIR = path.join(os.homedir(), '.local', 'share', 'agent-br
 const DEFAULT_OUTPUT_DIR = path.join(os.homedir(), '.local', 'share', 'agent-browser', 'output');
 const START_TIMEOUT_MS = 30_000;
 const MAX_CLIENT_BUFFERED_AMOUNT = 4 * 1024 * 1024;
+// Above this many bytes already queued on a client socket we hold the newest
+// frame instead of piling on, then flush it once the socket drains.
+const FRAME_COALESCE_THRESHOLD = 256 * 1024;
+const FRAME_FLUSH_INTERVAL_MS = 16;
 const DEFAULT_VIEWPORT = { width: 1280, height: 720 };
 const MIN_VIEWPORT = { width: 320, height: 240 };
 const MAX_VIEWPORT = { width: 3840, height: 2160 };
@@ -243,6 +247,14 @@ export class AgentBrowserService {
     cdpSocket = null;
     cdpConnecting = null;
     screencastStarted = false;
+    // Raw JPEG bytes of the most recent screencast frame, kept so reconnecting or
+    // late-joining clients can be shown the current page immediately. Frames are
+    // pushed to clients as binary WebSocket messages (no base64) to cut ~33% size
+    // and avoid per-frame string allocation.
+    lastFrameBuffer = null;
+    // Newest frame held back per slow client, flushed when its socket drains.
+    pendingFrames = new Map();
+    frameFlushTimer = null;
     clients = new Set();
     viewport = { ...DEFAULT_VIEWPORT };
     pageUrl = null;
@@ -304,6 +316,12 @@ export class AgentBrowserService {
         this.pageUrl = null;
         this.pageTitle = null;
         this.screencastStarted = false;
+        this.lastFrameBuffer = null;
+        this.pendingFrames.clear();
+        if (this.frameFlushTimer) {
+            clearInterval(this.frameFlushTimer);
+            this.frameFlushTimer = null;
+        }
         if (proc && proc.exitCode == null && proc.signalCode == null) {
             await new Promise((resolve) => {
                 const killTimer = setTimeout(() => {
@@ -341,6 +359,7 @@ export class AgentBrowserService {
         });
         socket.on('close', () => {
             this.clients.delete(socket);
+            this.pendingFrames.delete(socket);
             if (this.clients.size === 0) {
                 void this.stopScreencast();
             }
@@ -438,6 +457,13 @@ export class AgentBrowserService {
             await this.start();
             await this.ensureCdp();
             await this.sendStatus(socket);
+            // Replay the most recent frame so a reconnecting or late-joining client
+            // sees the current page immediately. Screencast only emits frames on
+            // change, so without this a client attaching to a static page would stay
+            // blank until the page next repaints.
+            if (this.lastFrameBuffer) {
+                this.writeFrame(socket, this.lastFrameBuffer);
+            }
             if (this.clients.size > 0) {
                 await this.startScreencast();
             }
@@ -660,11 +686,9 @@ export class AgentBrowserService {
                 void this.cdp?.send('Page.screencastFrameAck', { sessionId }).catch(() => undefined);
             }
             if (data) {
-                this.broadcast({
-                    type: 'frame',
-                    data,
-                    metadata: params.metadata ?? null,
-                });
+                const buffer = Buffer.from(data, 'base64');
+                this.lastFrameBuffer = buffer;
+                this.broadcastBinary(buffer);
             }
             return;
         }
@@ -719,6 +743,79 @@ export class AgentBrowserService {
     send(socket, payload) {
         this.sendRaw(socket, JSON.stringify(payload));
     }
+    broadcastBinary(buffer) {
+        for (const socket of this.clients) {
+            this.queueFrameForClient(socket, buffer);
+        }
+    }
+    // Per-client, backpressure-aware frame delivery. A fast client (e.g. on
+    // localhost) drains instantly and receives every frame; a slow client (remote
+    // or mobile) has only the *newest* frame held and gets it once its send buffer
+    // clears. This trades frame rate for latency so motion stays smooth instead of
+    // accumulating a backlog that stutters and then bursts.
+    queueFrameForClient(socket, buffer) {
+        if (!isOpen(socket)) {
+            this.pendingFrames.delete(socket);
+            return;
+        }
+        if (socket.bufferedAmount > FRAME_COALESCE_THRESHOLD) {
+            this.pendingFrames.set(socket, buffer);
+            this.ensureFrameFlushTimer();
+            return;
+        }
+        this.pendingFrames.delete(socket);
+        this.writeFrame(socket, buffer);
+    }
+    ensureFrameFlushTimer() {
+        if (this.frameFlushTimer) {
+            return;
+        }
+        this.frameFlushTimer = setInterval(() => this.flushPendingFrames(), FRAME_FLUSH_INTERVAL_MS);
+        this.frameFlushTimer.unref?.();
+    }
+    flushPendingFrames() {
+        for (const [socket, buffer] of this.pendingFrames) {
+            if (!isOpen(socket)) {
+                this.pendingFrames.delete(socket);
+                continue;
+            }
+            if (socket.bufferedAmount > FRAME_COALESCE_THRESHOLD) {
+                continue; // still draining; keep holding the newest frame
+            }
+            this.pendingFrames.delete(socket);
+            this.writeFrame(socket, buffer);
+        }
+        if (this.pendingFrames.size === 0 && this.frameFlushTimer) {
+            clearInterval(this.frameFlushTimer);
+            this.frameFlushTimer = null;
+        }
+    }
+    writeFrame(socket, buffer) {
+        if (!isOpen(socket)) {
+            return;
+        }
+        // Hard ceiling: a client this far behind is unrecoverable, so drop it.
+        if (socket.bufferedAmount > MAX_CLIENT_BUFFERED_AMOUNT) {
+            try {
+                socket.close(1009, 'Browser stream overflow');
+            }
+            catch {
+                // ignore
+            }
+            return;
+        }
+        try {
+            socket.send(buffer, { binary: true });
+        }
+        catch {
+            try {
+                socket.close(1011, 'Browser stream send failed');
+            }
+            catch {
+                // ignore
+            }
+        }
+    }
     sendRaw(socket, payload) {
         if (!isOpen(socket)) {
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deckide",
-  "version": "3.5.34",
+  "version": "3.5.36",
   "description": "Deck IDE - Browser-based IDE with terminal, file explorer, and git integration",
   "type": "module",
   "bin": {