@mindexec/cli 0.2.157 → 0.2.159

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindexec/cli",
-  "version": "0.2.157",
+  "version": "0.2.159",
   "description": "MindExec local runtime and bridge CLI",
   "main": "server.js",
   "type": "module",

package/scripts/remote-fleet-render-smoke.mjs

@@ -585,15 +585,15 @@ function encodeRemoteBinaryFrame(metadata, payload = new Uint8Array([0xff, 0xd8,
     return buffer;
 }
 
-function buildMonitorNode(devices, hubStatus, latestTaskBatch = null, recentTaskBatches = [], lastError = '') {
+function buildMonitorNode(devices, hubStatus, latestTaskBatch = null, recentTaskBatches = [], lastError = '', nodeId = 'remote-fleet-render-smoke') {
     const connected = devices.filter(device => device.Connected).length;
     const endpoint = hubStatus.agentEndpoint || '127.0.0.1:5197';
     const pairToken = hubStatus.pairToken || 'render-smoke-token';
     const hostTargetState = hubStatus.hostTargetActive
-        ? (hubStatus.hostTargetNodeId === 'remote-fleet-render-smoke' ? 'hosting' : 'other-monitor')
+        ? (hubStatus.hostTargetNodeId === nodeId ? 'hosting' : 'other-monitor')
         : 'inactive';
     return {
-        id: 'remote-fleet-render-smoke',
+        id: nodeId,
         contentType: 'templateLauncher',
         metadata: {
             SemanticType: 'RemoteFleetMonitor',
@@ -625,10 +625,10 @@ function buildMonitorNode(devices, hubStatus, latestTaskBatch = null, recentTask
     };
 }
 
-function createRemoteFleetTemplateShell(document, focusDeviceId = '') {
+function createRemoteFleetTemplateShell(document, focusDeviceId = '', nodeId = 'remote-fleet-render-smoke') {
     const nodeShell = document.createElement('div');
     nodeShell.setAttribute('class', 'map-node-template-card map-node-remote-fleet');
-    nodeShell.dataset.nodeId = 'remote-fleet-render-smoke';
+    nodeShell.dataset.nodeId = nodeId;
     const shell = document.createElement('div');
     shell.setAttribute('class', 'template-card__shell template-card__shell--remote-fleet');
     const header = document.createElement('div');
@@ -642,7 +642,7 @@ function createRemoteFleetTemplateShell(document, focusDeviceId = '') {
     header.appendChild(titleWrap);
     const bodyView = document.createElement('div');
     bodyView.setAttribute('class', 'template-card__remote-fleet-body map-node-remote-fleet__body');
-    bodyView.dataset.nodeId = 'remote-fleet-render-smoke';
+    bodyView.dataset.nodeId = nodeId;
     bodyView.dataset.remoteFleetAutoMonitor = 'false';
     if (focusDeviceId) {
         bodyView.dataset.remoteFleetFocusDeviceId = focusDeviceId;
@@ -1043,6 +1043,7 @@ try {
         binaryDrawCalls.some(call => call.op === 'clearRect' || call.op === 'fillRect'),
         false,
         'binary Blob frame paint must not clear/fill the canvas before drawing');
+    const binaryCanvasBeforeRerender = binaryCanvas;
 
     const liveOverlayCard = document.createElement('div');
     liveOverlayCard.dataset.nodeId = 'remote-fleet-render-smoke';
@@ -1105,7 +1106,42 @@ try {
         ?.querySelector('[data-remote-fleet-device-preview="tile"]');
     assert.ok(rerenderedPatchPreview);
     assert.equal(rerenderedPatchPreview.dataset.remoteFleetFrameSeq, String(websocketFrameSeq));
-    assert.equal(rerenderedPatchPreview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]')?.style.display, 'block');
+    const rerenderedPatchCanvas = rerenderedPatchPreview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]');
+    assert.equal(rerenderedPatchCanvas?.style.display, 'block');
+    assert.equal(
+        rerenderedPatchCanvas,
+        binaryCanvasBeforeRerender,
+        'MDM rerender should reuse the already-painted canvas instead of flashing a blank replacement');
+
+    const otherBoardNodeId = 'remote-fleet-render-smoke-other-board';
+    const { nodeShell: otherBoardShell, bodyView: otherBoardBodyView } =
+        createRemoteFleetTemplateShell(document, focusedDevice.DeviceId, otherBoardNodeId);
+    document.body.appendChild(otherBoardShell);
+    manager.renderRemoteFleetMonitorForTest(
+        otherBoardBodyView,
+        buildMonitorNode(
+            devices,
+            hub.getStatus({ includeSecrets: true }),
+            latestTaskBatch,
+            recentTaskBatches,
+            '',
+            otherBoardNodeId));
+    await wait(30);
+    const otherBoardPatchPreview = otherBoardBodyView
+        .querySelector(`article[data-device-id="${patchTarget.DeviceId}"]`)
+        ?.querySelector('[data-remote-fleet-device-preview="tile"]');
+    assert.ok(otherBoardPatchPreview);
+    assert.equal(
+        otherBoardPatchPreview.dataset.remoteFleetFrameSeq,
+        String(websocketFrameSeq),
+        'a different-board MDM should prime from the device-global latest binary frame cache');
+    assert.equal(
+        otherBoardPatchPreview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]')?.style.display,
+        'block');
+    assert.ok(diagnostics.runtimeTrace.some(event =>
+        event.type === 'remote.frame.wsCachePrimed'
+        && event.nodeId === otherBoardNodeId));
+    otherBoardShell.remove();
 
     const controlCard = bodyView.querySelector(`article[data-device-id="${patchTarget.DeviceId}"]`);
     assert.ok(controlCard);
@@ -1404,6 +1440,18 @@ try {
     assert.ok(deviceBody.querySelector('[data-remote-fleet-action="task-device"]'));
     assert.ok(deviceBody.textContent.includes('Task timed out waiting for the agent response.'));
     assert.ok(deviceBody.textContent.includes(focusedDevice.DeviceId));
+    const controlCanvasBeforeRerender = deviceControlCanvas;
+    manager.renderRemoteFleetDeviceForTest(deviceBody, buildDeviceNode(focusedDevice, hub.getStatus()));
+    await wait(30);
+    const controlCanvasAfterRerender = deviceBody.querySelector('[data-remote-fleet-control-node-canvas="true"]');
+    assert.equal(
+        controlCanvasAfterRerender,
+        controlCanvasBeforeRerender,
+        'RemoteFleetDevice rerender should reuse the already-painted control canvas instead of flashing black');
+    assert.equal(
+        deviceBody.querySelector('[data-remote-fleet-control-node-placeholder="true"]'),
+        null,
+        'RemoteFleetDevice rerender should not cover a restored control canvas with a waiting placeholder');
 
     nodeShell.remove();
     emptyShell.remove();

package/wwwroot/_content/MindExecution.Shared/js/mind-map-css3d-manager.js

@@ -13511,6 +13511,7 @@
     const REMOTE_FLEET_BINARY_FRAME_CONNECT_GRACE_MS = 1600;
     const REMOTE_FLEET_BINARY_FRAME_CACHE_MS = 10000;
     const REMOTE_FLEET_BINARY_FRAME_CACHE_LIMIT = 240;
+    const REMOTE_FLEET_BINARY_FRAME_SESSION_IDLE_MS = 8000;
     const REMOTE_FLEET_AUTO_LIVE_START_MAX_PARALLEL = 8;
     const REMOTE_FLEET_AUTO_LIVE_START_COOLDOWN_MS = 3000;
     const REMOTE_FLEET_TASK_FOLLOW_INITIAL_MS = 250;
@@ -13522,6 +13523,7 @@
     const remoteFleetHostLeaseTimers = new Map();
     const remoteFleetLocalHostTargets = new Map();
     const remoteFleetBinaryFrameSessions = new Map();
+    const remoteFleetLatestBinaryFrames = new Map();
     const remoteFleetFrameBlobCache = new Map();
     let remoteFleetBridgeStatusPromise = null;
     let activeRemoteFleetControlPopup = null;
@@ -13948,36 +13950,85 @@
         }
     }
 
+    function pruneRemoteFleetGlobalBinaryFrameCache() {
+        const now = getRemoteFleetFrameNow();
+        for (const [deviceId, entry] of remoteFleetLatestBinaryFrames) {
+            if (!deviceId
+                || !entry
+                || !entry.frame
+                || now - Number(entry.seenAt || 0) > REMOTE_FLEET_BINARY_FRAME_CACHE_MS
+                || remoteFleetLatestBinaryFrames.size > REMOTE_FLEET_BINARY_FRAME_CACHE_LIMIT) {
+                remoteFleetLatestBinaryFrames.delete(deviceId);
+            }
+        }
+    }
+
     function rememberRemoteFleetBinaryFrame(session, frame) {
         const deviceId = String(frame?.deviceId || '').trim();
-        if (!session || !deviceId || !frame?._remoteFleetPayloadBlob) {
+        if (!deviceId || !frame?._remoteFleetPayloadBlob) {
             return;
         }
 
-        if (!(session.latestBinaryFrames instanceof Map)) {
-            session.latestBinaryFrames = new Map();
-        }
-
-        pruneRemoteFleetBinaryFrameCache(session);
-        session.latestBinaryFrames.set(deviceId, {
+        const entry = {
             seenAt: getRemoteFleetFrameNow(),
             frame: cloneRemoteFleetFramePatch(frame)
-        });
+        };
+
+        if (session) {
+            if (!(session.latestBinaryFrames instanceof Map)) {
+                session.latestBinaryFrames = new Map();
+            }
+
+            pruneRemoteFleetBinaryFrameCache(session);
+            session.latestBinaryFrames.set(deviceId, {
+                seenAt: entry.seenAt,
+                frame: cloneRemoteFleetFramePatch(frame)
+            });
+        }
+
+        pruneRemoteFleetGlobalBinaryFrameCache();
+        remoteFleetLatestBinaryFrames.set(deviceId, entry);
     }
 
     function applyRemoteFleetBinaryFrameCacheToBody(bodyView, session) {
-        if (!bodyView || !(session?.latestBinaryFrames instanceof Map) || session.latestBinaryFrames.size === 0) {
+        if (!bodyView) {
             return 0;
         }
 
-        pruneRemoteFleetBinaryFrameCache(session);
-        const patches = [];
-        for (const entry of session.latestBinaryFrames.values()) {
-            if (entry?.frame) {
-                patches.push(cloneRemoteFleetFramePatch(entry.frame));
+        const patchesByDeviceId = new Map();
+        const allowedDeviceIds = new Set(getRemoteFleetBinaryFrameDeviceIds(session));
+        const addFrame = entry => {
+            const frame = entry?.frame;
+            const deviceId = String(frame?.deviceId || '').trim();
+            if (!deviceId || !frame) {
+                return;
+            }
+
+            if (allowedDeviceIds.size > 0 && !allowedDeviceIds.has(deviceId)) {
+                return;
+            }
+
+            const existing = patchesByDeviceId.get(deviceId);
+            const existingSeq = Number(existing?.frameSeq || 0);
+            const nextSeq = Number(frame.frameSeq || 0);
+            if (!existing || nextSeq >= existingSeq) {
+                patchesByDeviceId.set(deviceId, cloneRemoteFleetFramePatch(frame));
+            }
+        };
+
+        if (session?.latestBinaryFrames instanceof Map && session.latestBinaryFrames.size > 0) {
+            pruneRemoteFleetBinaryFrameCache(session);
+            for (const entry of session.latestBinaryFrames.values()) {
+                addFrame(entry);
             }
         }
 
+        pruneRemoteFleetGlobalBinaryFrameCache();
+        for (const entry of remoteFleetLatestBinaryFrames.values()) {
+            addFrame(entry);
+        }
+
+        const patches = Array.from(patchesByDeviceId.values());
         return patches.length > 0
             ? applyRemoteFleetFramePatches(bodyView, patches)
             : 0;
@@ -14256,6 +14307,69 @@
         }, REMOTE_FLEET_BINARY_FRAME_WS_RECONNECT_MS);
     }
 
+    function cancelRemoteFleetBinaryFrameSessionRelease(session) {
+        if (!session?.releaseTimer) {
+            return;
+        }
+
+        clearTimeout(session.releaseTimer);
+        session.releaseTimer = null;
+    }
+
+    function closeRemoteFleetBinaryFrameSession(session, reason = 'close') {
+        if (!session) {
+            return;
+        }
+
+        cancelRemoteFleetBinaryFrameSessionRelease(session);
+        if (session.reconnectTimer) {
+            clearTimeout(session.reconnectTimer);
+            session.reconnectTimer = null;
+        }
+        if (session.subscriptionTimer) {
+            clearInterval(session.subscriptionTimer);
+            session.subscriptionTimer = null;
+        }
+        if (session.ws) {
+            try {
+                session.ws.close();
+            } catch {
+                // Ignore WebSocket close failures.
+            }
+            session.ws = null;
+        }
+        remoteFleetBinaryFrameSessions.delete(session.nodeId);
+        window.RuntimeTrace?.emit?.('remote.frame.wsSessionClosed', {
+            nodeId: session.nodeId,
+            reason
+        });
+    }
+
+    function scheduleRemoteFleetBinaryFrameSessionRelease(session, reason = 'idle') {
+        if (!session
+            || session.releaseTimer
+            || session.bodies.size > 0
+            || (session.controlSessions instanceof Set && session.controlSessions.size > 0)) {
+            return;
+        }
+
+        session.releaseTimer = setTimeout(() => {
+            session.releaseTimer = null;
+            if (session.bodies.size > 0
+                || (session.controlSessions instanceof Set && session.controlSessions.size > 0)) {
+                return;
+            }
+
+            closeRemoteFleetBinaryFrameSession(session, reason);
+        }, REMOTE_FLEET_BINARY_FRAME_SESSION_IDLE_MS);
+        session.releaseTimer?.unref?.();
+        window.RuntimeTrace?.emit?.('remote.frame.wsSessionIdle', {
+            nodeId: session.nodeId,
+            reason,
+            ttlMs: REMOTE_FLEET_BINARY_FRAME_SESSION_IDLE_MS
+        });
+    }
+
     async function openRemoteFleetBinaryFrameSocket(session) {
         if (!session || (session.bodies.size === 0 && (!session.controlSessions || session.controlSessions.size === 0)) || typeof WebSocket !== 'function') {
             return false;
@@ -14305,7 +14419,17 @@
 
                 parseRemoteFleetBinaryFrameMessage(event.data)
                     .then(frame => {
-                        if (!frame || (session.bodies.size === 0 && (!session.controlSessions || session.controlSessions.size === 0))) {
+                        if (!frame) {
+                            return;
+                        }
+
+                        const hasFrameConsumers =
+                            session.bodies.size > 0
+                            || (session.controlSessions instanceof Set && session.controlSessions.size > 0);
+                        if (!hasFrameConsumers) {
+                            const frameAt = getRemoteFleetFrameNow();
+                            session.lastBinaryFrameAt = frameAt;
+                            rememberRemoteFleetBinaryFrame(session, frame);
                             if (frame?._remoteFleetObjectUrl && typeof URL !== 'undefined' && typeof URL.revokeObjectURL === 'function') {
                                 URL.revokeObjectURL(frame._remoteFleetObjectUrl);
                             }
@@ -14408,6 +14532,7 @@
                 bodies: new Set(),
                 ws: null,
                 reconnectTimer: null,
+                releaseTimer: null,
                 subscriptionTimer: null,
                 subscriptionKey: '',
                 latestBinaryFrames: new Map(),
@@ -14417,6 +14542,7 @@
             remoteFleetBinaryFrameSessions.set(nodeId, session);
         }
 
+        cancelRemoteFleetBinaryFrameSessionRelease(session);
         session.bodies.add(bodyView);
         session.getDeviceIds = getDeviceIds;
         session.liveOptions = {
@@ -14428,7 +14554,14 @@
             mode: String(options.mode || 'remote-fast')
         };
         bodyView._remoteFleetBinaryFrameSession = session;
-        applyRemoteFleetBinaryFrameCacheToBody(bodyView, session);
+        const primedFrames = applyRemoteFleetBinaryFrameCacheToBody(bodyView, session);
+        if (primedFrames > 0) {
+            bodyView._remoteFleetLastBinaryFrameAt = getRemoteFleetFrameNow();
+            window.RuntimeTrace?.emit?.('remote.frame.wsCachePrimed', {
+                nodeId,
+                count: primedFrames
+            });
+        }
         openRemoteFleetBinaryFrameSocket(session).catch(() => undefined);
         return true;
     }
@@ -14446,23 +14579,7 @@
             return;
         }
 
-        if (session.reconnectTimer) {
-            clearTimeout(session.reconnectTimer);
-            session.reconnectTimer = null;
-        }
-        if (session.subscriptionTimer) {
-            clearInterval(session.subscriptionTimer);
-            session.subscriptionTimer = null;
-        }
-        if (session.ws) {
-            try {
-                session.ws.close();
-            } catch {
-                // Ignore WebSocket close failures.
-            }
-            session.ws = null;
-        }
-        remoteFleetBinaryFrameSessions.delete(session.nodeId);
+        scheduleRemoteFleetBinaryFrameSessionRelease(session, 'body-detached');
     }
 
     function requestRemoteFleetFrameLoopFrame(callback) {
@@ -14725,6 +14842,104 @@
         return canvas;
     }
 
+    function collectRemoteFleetPreviewFrameSurfaces(root) {
+        const surfaces = new Map();
+        if (!root?.querySelectorAll) {
+            return surfaces;
+        }
+
+        root.querySelectorAll('[data-remote-fleet-device-preview][data-device-id]').forEach(preview => {
+            const deviceId = String(preview.dataset.deviceId || '').trim();
+            if (!deviceId) {
+                return;
+            }
+
+            const canvas = preview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]');
+            const image = preview.querySelector('img[data-remote-fleet-frame-image="true"]');
+            surfaces.set(deviceId, {
+                canvas,
+                image,
+                kind: String(preview.dataset.remoteFleetFrameKind || canvas?.dataset?.remoteFleetFrameKind || image?.dataset?.remoteFleetFrameKind || '').trim().toLowerCase(),
+                seq: Number(preview.dataset.remoteFleetFrameSeq || canvas?.dataset?.remoteFleetFrameSeq || image?.dataset?.remoteFleetFrameSeq || 0) || 0,
+                url: String(preview.dataset.remoteFleetFrameUrl || canvas?.dataset?.remoteFleetFrameUrl || image?.dataset?.remoteFleetFrameUrl || '').trim()
+            });
+        });
+
+        return surfaces;
+    }
+
+    function restoreRemoteFleetPreviewFrameSurface(preview, surfaces, deviceId) {
+        const id = String(deviceId || preview?.dataset?.deviceId || '').trim();
+        const surface = id && surfaces instanceof Map ? surfaces.get(id) : null;
+        if (!preview || !surface) {
+            return false;
+        }
+
+        const existingSeq = Number(surface.seq || 0) || 0;
+        const nextSeq = Number(preview.dataset.remoteFleetFrameSeq || 0) || 0;
+        if (existingSeq <= 0 || (nextSeq > 0 && existingSeq < nextSeq)) {
+            return false;
+        }
+
+        const currentCanvas = preview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]');
+        if (surface.canvas && surface.canvas !== currentCanvas) {
+            currentCanvas?.remove?.();
+            surface.canvas.dataset.remoteFleetFrameKind = surface.kind || preview.dataset.remoteFleetFrameKind || 'live';
+            surface.canvas.dataset.remoteFleetFrameSeq = String(existingSeq);
+            surface.canvas.dataset.remoteFleetFrameUrl = surface.url || '';
+            surface.canvas.style.display = 'block';
+            if (typeof preview.insertBefore === 'function') {
+                preview.insertBefore(surface.canvas, preview.firstChild || null);
+            } else {
+                preview.appendChild?.(surface.canvas);
+            }
+        }
+
+        const currentImage = preview.querySelector('img[data-remote-fleet-frame-image="true"]');
+        if (surface.canvas) {
+            preview.querySelector('[data-remote-fleet-screen-placeholder="true"]')?.remove?.();
+            if (currentImage && currentImage !== surface.image) {
+                currentImage.style.display = 'none';
+            }
+            if (surface.image && surface.image !== currentImage && surface.image.parentElement === preview) {
+                surface.image.style.display = 'none';
+            }
+        } else if (surface.image && surface.image !== currentImage) {
+            currentImage?.remove?.();
+            surface.image.style.display = 'block';
+            if (typeof preview.insertBefore === 'function') {
+                preview.insertBefore(surface.image, preview.firstChild || null);
+            } else {
+                preview.appendChild?.(surface.image);
+            }
+        }
+
+        preview.dataset.remoteFleetFrameKind = surface.kind || preview.dataset.remoteFleetFrameKind || '';
+        preview.dataset.remoteFleetFrameSeq = String(existingSeq);
+        preview.dataset.remoteFleetFrameUrl = surface.url || '';
+        preview.dataset.remoteFleetRestoredFrame = 'true';
+        return true;
+    }
+
+    function collectRemoteFleetControlNodeSurface(root) {
+        const canvas = root?.querySelector?.('canvas[data-remote-fleet-control-node-canvas="true"]');
+        if (!canvas) {
+            return null;
+        }
+
+        return {
+            canvas,
+            kind: String(canvas.dataset.remoteFleetFrameKind || 'live').trim().toLowerCase(),
+            seq: Number(canvas.dataset.remoteFleetFrameSeq || 0) || 0,
+            contentRect: canvas._remoteFleetContentRect || null
+        };
+    }
+
+    function hasRemoteFleetReusableControlSurface(surface) {
+        return !!surface?.canvas
+            && (Number(surface.seq || 0) > 0 || !!surface.contentRect);
+    }
+
     function syncRemoteFleetFrameCanvasSize(canvas) {
         if (!canvas) {
             return null;
@@ -14736,8 +14951,18 @@
         const cssWidth = Math.max(1, Math.round(rect?.width || canvas.clientWidth || 320));
         const cssHeight = Math.max(1, Math.round(rect?.height || canvas.clientHeight || 180));
         const dpr = Math.max(1, Math.min(REMOTE_FLEET_FRAME_CANVAS_MAX_DPR, Number(window.devicePixelRatio || 1) || 1));
-        const nextWidth = Math.max(1, Math.round(cssWidth * dpr));
-        const nextHeight = Math.max(1, Math.round(cssHeight * dpr));
+        let nextWidth = Math.max(1, Math.round(cssWidth * dpr));
+        let nextHeight = Math.max(1, Math.round(cssHeight * dpr));
+        const currentWidth = Number(canvas.width || 0) || 0;
+        const currentHeight = Number(canvas.height || 0) || 0;
+        const widthDelta = Math.abs(currentWidth - nextWidth);
+        const heightDelta = Math.abs(currentHeight - nextHeight);
+        if (currentWidth > 0 && widthDelta > 0 && widthDelta <= 2) {
+            nextWidth = currentWidth;
+        }
+        if (currentHeight > 0 && heightDelta > 0 && heightDelta <= 2) {
+            nextHeight = currentHeight;
+        }
         if (canvas.width !== nextWidth) {
             canvas.width = nextWidth;
         }
@@ -15829,23 +16054,7 @@
         refreshRemoteFleetBinaryFrameSubscription(binarySession, true);
 
         if (binarySession.bodies.size === 0 && binarySession.controlSessions.size === 0) {
-            if (binarySession.reconnectTimer) {
-                clearTimeout(binarySession.reconnectTimer);
-                binarySession.reconnectTimer = null;
-            }
-            if (binarySession.subscriptionTimer) {
-                clearInterval(binarySession.subscriptionTimer);
-                binarySession.subscriptionTimer = null;
-            }
-            if (binarySession.ws) {
-                try {
-                    binarySession.ws.close();
-                } catch {
-                    // Ignore WebSocket close failures.
-                }
-                binarySession.ws = null;
-            }
-            remoteFleetBinaryFrameSessions.delete(binarySession.nodeId);
+            scheduleRemoteFleetBinaryFrameSessionRelease(binarySession, 'control-detached');
         }
     }
 
@@ -15869,7 +16078,12 @@
                 }
 
                 drawRemoteFleetFrameToCanvas(session.canvas, bitmap, 'contain');
+                session.canvas.dataset.remoteFleetFrameKind = String(frame.kind || 'live').toLowerCase();
+                session.canvas.dataset.remoteFleetFrameSeq = String(Number(frame.frameSeq || frame.FrameSeq || 0) || 0);
+                session.canvas.dataset.remoteFleetFrameUrl = String(frame.frameUrl || '');
                 session.canvas.style.display = 'block';
+                session.lastControlFrameSeq = Number(frame.frameSeq || frame.FrameSeq || session.lastControlFrameSeq || 0) || 0;
+                session.lastControlFrameAt = Date.now();
                 session.placeholder?.remove?.();
                 session.placeholder = null;
                 if (typeof bitmap.close === 'function') {
@@ -15919,6 +16133,9 @@
                 }
 
                 drawRemoteFleetFrameToCanvas(session.canvas, bitmap, 'contain');
+                session.canvas.dataset.remoteFleetFrameKind = String(frame.kind || 'live').toLowerCase();
+                session.canvas.dataset.remoteFleetFrameSeq = String(frameSeq || 0);
+                session.canvas.dataset.remoteFleetFrameUrl = String(frame.frameUrl || '');
                 session.canvas.style.display = 'block';
                 session.lastControlFrameAt = Date.now();
                 session.status.textContent = `Control ${REMOTE_FLEET_CONTROL_LIVE_FPS}fps`;
@@ -16870,6 +17087,7 @@
     function renderRemoteFleetDevice(bodyView, nodeModel) {
         if (!bodyView) return;
         clearRemoteFleetTimers(bodyView, { keepBinaryFrameSocket: true });
+        const preservedControlSurface = collectRemoteFleetControlNodeSurface(bodyView);
 
         const nodeId = String(nodeModel?.id ?? nodeModel?.Id ?? '');
         const device = parseRemoteFleetPinnedDevice(nodeModel);
@@ -17065,7 +17283,7 @@
             touch-action: none;
             outline: none;
         `;
-        const controlCanvas = document.createElement('canvas');
+        const controlCanvas = preservedControlSurface?.canvas || document.createElement('canvas');
         controlCanvas.dataset.remoteFleetControlNodeCanvas = 'true';
         controlCanvas.style.cssText = `
             position: absolute;
@@ -17125,7 +17343,10 @@
         controlOverlay.appendChild(controlDot);
         controlOverlay.appendChild(controlStatus);
         controlStage.appendChild(controlCanvas);
-        controlStage.appendChild(controlPlaceholder);
+        const restoredControlSurface = hasRemoteFleetReusableControlSurface(preservedControlSurface);
+        if (!restoredControlSurface) {
+            controlStage.appendChild(controlPlaceholder);
+        }
         controlStage.appendChild(controlOverlay);
         bodyView.appendChild(controlStage);
 
@@ -17137,7 +17358,17 @@
                 controlStage,
                 controlCanvas,
                 controlStatus,
-                controlPlaceholder);
+                restoredControlSurface ? null : controlPlaceholder);
+            if (session && restoredControlSurface) {
+                session.lastControlFrameSeq = Number(preservedControlSurface?.seq || session.lastControlFrameSeq || 0) || 0;
+                session.lastControlFrameAt = Date.now();
+                controlStatus.textContent = `Control ${REMOTE_FLEET_CONTROL_LIVE_FPS}fps`;
+                window.RuntimeTrace?.emit?.('remote.control.surfaceRestored', {
+                    nodeId,
+                    deviceId,
+                    seq: session.lastControlFrameSeq
+                });
+            }
             if (session && isRemoteFleetFrameSource(previewSource)) {
                 paintRemoteFleetControlFrame(session, {
                     deviceId,
@@ -17425,6 +17656,7 @@
     function renderRemoteFleetMonitor(bodyView, nodeModel) {
         if (!bodyView) return;
         clearRemoteFleetTimers(bodyView, { keepBinaryFrameSocket: true });
+        const preservedFrameSurfaces = collectRemoteFleetPreviewFrameSurfaces(bodyView);
 
         const nodeId = String(nodeModel?.id ?? nodeModel?.Id ?? '');
         const searchState = bodyView.dataset.remoteFleetSearch || '';
@@ -17979,6 +18211,7 @@
                 preview.appendChild(placeholder);
             }
 
+            restoreRemoteFleetPreviewFrameSurface(preview, preservedFrameSurfaces, getRemoteFleetDeviceId(device));
             return preview;
         };
 

package/wwwroot/index.html

@@ -7,8 +7,8 @@
     <title>MindExec | Run your ideas as AI task graphs</title>
     <meta name="description" content="MindExec is an AI execution canvas for solo builders, researchers, developers, and creators. Start with free browser tools, then move serious work into saved MindCanvas projects." />
     <base href="/" />
-    <link rel="stylesheet" href="_content/MindExecution.Shared/css/app.css?v=20260617-auth-mirror-v590" />
-    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260617-auth-mirror-v590" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/app.css?v=20260617-remote-frame-no-flash-v592" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260617-remote-frame-no-flash-v592" />
     <!-- ?쇄뼹??Font Awesome (local) ?쇄뼹??-->
     <link rel="stylesheet" href="_content/MindExecution.Shared/lib/font-awesome/css/all.min.css" />
     <!-- ?꿎뼯??-->
@@ -579,7 +579,7 @@
             }
 
             const base = '_content/MindExecution.Shared/js/';
-        const scriptVersion = '20260617-auth-mirror-v590';
+        const scriptVersion = '20260617-remote-frame-no-flash-v592';
             const scriptUrl = (script) => `${base}${script}?v=${scriptVersion}`;
             console.log(`[Script Loader] Shared JS version: ${scriptVersion}`);
             const criticalScripts = [

package/wwwroot/service-worker-assets.js

@@ -1,5 +1,5 @@
 self.assetsManifest = {
-    "version":  "GgmfxCXF",
+    "version":  "ikaqQxI3",
     "assets":  [
                    {
                        "hash":  "sha256-+CSYMcqLNTsq3VnH11jgYyOCCdxvHzL74CBmo4sCmMU=",
@@ -86,7 +86,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js.backup"
                    },
                    {
-                       "hash":  "sha256-1ImfUjyr1aBodcgICy6KTDGinJHMb1jdRG2MYGPdYvE=",
+                       "hash":  "sha256-yUuxzH9Fpd62pPLMU5n0HuYjsJhKvC82LO5X5Uu/1gg=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-css3d-manager.js"
                    },
                    {
@@ -834,7 +834,7 @@
                        "url":  "image-manifest.json"
                    },
                    {
-                       "hash":  "sha256-RLe/OcetCLrQfgXCZMRe1KAmWd4NRvzz9LOOJ0dr7p0=",
+                       "hash":  "sha256-8VAYYW89mBjF45WS2vA1+Hssmo6S30PB8AW03niSE2Q=",
                        "url":  "index.html"
                    },
                    {

package/wwwroot/service-worker.js

@@ -1,4 +1,4 @@
-/* Manifest version: GgmfxCXF */
+/* Manifest version: ikaqQxI3 */
 // Hosted deployments should prefer the network over stale offline caches.
 // This service worker immediately clears old Blazor offline caches and unregisters itself.