@mindexec/cli 0.2.152 → 0.2.154

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

@@ -13494,6 +13494,8 @@
     const REMOTE_FLEET_LIVE_FRAME_REFRESH_MS = Math.round(1000 / REMOTE_FLEET_MONITOR_LIVE_FPS);
     const REMOTE_FLEET_CONTROL_LIVE_FPS = 20;
     const REMOTE_FLEET_CONTROL_FRAME_REFRESH_MS = Math.round(1000 / REMOTE_FLEET_CONTROL_LIVE_FPS);
+    const REMOTE_FLEET_CONTROL_INPUT_MOVE_MS = 16;
+    const REMOTE_FLEET_CONTROL_INPUT_QUEUE_LIMIT = 64;
     const REMOTE_FLEET_THUMBNAIL_FRAME_REFRESH_MS = 2000;
     const REMOTE_FLEET_FRAME_CANVAS_MAX_DPR = 2;
     const REMOTE_FLEET_FRAME_BLOB_CACHE_MS = 10000;
@@ -13728,6 +13730,7 @@
 
     function clearRemoteFleetTimers(bodyView, options = {}) {
         if (!bodyView) return;
+        closeRemoteFleetControlNodeSession(bodyView, 'clear');
         if (options.keepBinaryFrameSocket !== true) {
             releaseRemoteFleetBinaryFrameSocket(bodyView);
         }
@@ -13829,6 +13832,22 @@
         return url.toString();
     }
 
+    function buildRemoteFleetInputWsUrl(status) {
+        const baseUrl = String(status?.__remoteFleetBridgeBaseUrl || window.location?.origin || '').trim();
+        const path = String(status?.remoteInputWsPath || '/api/remote/input/ws').trim() || '/api/remote/input/ws';
+        if (!baseUrl) {
+            return '';
+        }
+
+        const url = new URL(path, baseUrl);
+        url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+        const bridgeToken = String(status?.bridgeToken || '').trim();
+        if (bridgeToken) {
+            url.searchParams.set('token', bridgeToken);
+        }
+        return url.toString();
+    }
+
     async function parseRemoteFleetBinaryFrameMessage(data) {
         let buffer = null;
         if (data instanceof ArrayBuffer) {
@@ -15729,6 +15748,8 @@
         activeRemoteFleetControlPopup = null;
         session.active = false;
         detachRemoteFleetControlBinaryFrameSession(session);
+        closeRemoteFleetControlInputSocket(session, 'close');
+        session.inputCleanup?.();
         if (session.timer) {
             clearTimeout(session.timer);
             session.timer = null;
@@ -15847,6 +15868,8 @@
 
                 drawRemoteFleetFrameToCanvas(session.canvas, bitmap, 'contain');
                 session.canvas.style.display = 'block';
+                session.placeholder?.remove?.();
+                session.placeholder = null;
                 if (typeof bitmap.close === 'function') {
                     bitmap.close();
                 }
@@ -15897,6 +15920,8 @@
                 session.canvas.style.display = 'block';
                 session.lastControlFrameAt = Date.now();
                 session.status.textContent = `Control ${REMOTE_FLEET_CONTROL_LIVE_FPS}fps`;
+                session.placeholder?.remove?.();
+                session.placeholder = null;
                 if (typeof bitmap.close === 'function') {
                     bitmap.close();
                 }
@@ -15910,34 +15935,268 @@
         }
     }
 
-    function sendRemoteFleetControlInput(session, payload, throttleMove = false) {
-        if (!session?.active || !payload?.type) {
+    function closeRemoteFleetControlInputSocket(session, reason = 'close') {
+        if (!session) {
             return;
         }
 
-        const send = next => {
-            if (!session.active) {
-                return;
+        if (session.inputWsOpenTimer) {
+            clearTimeout(session.inputWsOpenTimer);
+            session.inputWsOpenTimer = null;
+        }
+
+        const ws = session.inputWs;
+        session.inputWs = null;
+        session.inputWsConnecting = false;
+        if (ws && ws.readyState !== 3) {
+            try {
+                ws.close();
+            } catch {
+                // Best-effort input socket cleanup.
             }
-            invokeDotNetAsync('SendRemoteFleetInputFromJs', session.nodeId, session.deviceId, {
-                ...next,
-                controlLeaseId: session.controlLeaseId,
-                issuedAt: new Date().toISOString()
-            }).catch(error => {
+        }
+
+        if (reason === 'close') {
+            session.inputQueue = [];
+        }
+    }
+
+    function createRemoteFleetControlInput(session, payload) {
+        return {
+            ...payload,
+            controlLeaseId: session.controlLeaseId,
+            issuedAt: new Date().toISOString()
+        };
+    }
+
+    function sendRemoteFleetControlInputFallback(session, input) {
+        if (!session?.active || !input?.type) {
+            return;
+        }
+
+        invokeDotNetAsync('SendRemoteFleetInputFromJs', session.nodeId, session.deviceId, {
+            ...input,
+            controlLeaseId: input.controlLeaseId || session.controlLeaseId,
+            issuedAt: input.issuedAt || new Date().toISOString()
+        }).catch(error => {
+            if (session.active) {
                 session.status.textContent = error?.message || 'Input failed';
+            }
+        });
+    }
+
+    function drainRemoteFleetControlInputQueueToFallback(session) {
+        if (!session?.inputQueue?.length) {
+            return;
+        }
+
+        const queued = session.inputQueue.splice(0);
+        queued.forEach(envelope => sendRemoteFleetControlInputFallback(session, envelope.input));
+    }
+
+    function enqueueRemoteFleetControlInput(session, envelope) {
+        if (!session) {
+            return;
+        }
+
+        if (!Array.isArray(session.inputQueue)) {
+            session.inputQueue = [];
+        }
+
+        const inputType = String(envelope?.input?.type || '').toLowerCase();
+        if (inputType === 'pointermove') {
+            for (let i = session.inputQueue.length - 1; i >= 0; i -= 1) {
+                if (String(session.inputQueue[i]?.input?.type || '').toLowerCase() === 'pointermove') {
+                    session.inputQueue.splice(i, 1);
+                }
+            }
+        }
+
+        session.inputQueue.push(envelope);
+        while (session.inputQueue.length > REMOTE_FLEET_CONTROL_INPUT_QUEUE_LIMIT) {
+            const moveIndex = session.inputQueue.findIndex(item =>
+                String(item?.input?.type || '').toLowerCase() === 'pointermove');
+            session.inputQueue.splice(moveIndex >= 0 ? moveIndex : 0, 1);
+        }
+    }
+
+    function flushRemoteFleetControlInputQueue(session) {
+        const ws = session?.inputWs;
+        if (!session?.active || !ws || ws.readyState !== 1 || !session.inputQueue?.length) {
+            return;
+        }
+
+        const queued = session.inputQueue.splice(0);
+        for (const envelope of queued) {
+            if (!sendRemoteFleetControlInputEnvelope(session, envelope)) {
+                enqueueRemoteFleetControlInput(session, envelope);
+                break;
+            }
+        }
+    }
+
+    function sendRemoteFleetControlInputEnvelope(session, envelope) {
+        const ws = session?.inputWs;
+        if (!session?.active || !ws || ws.readyState !== 1) {
+            return false;
+        }
+
+        const inputType = String(envelope?.input?.type || '').toLowerCase();
+        if (inputType === 'pointermove' && Number(ws.bufferedAmount || 0) > 256 * 1024) {
+            window.RuntimeTrace?.emit?.('remote.control.input.drop', {
+                reason: 'ws-buffered',
+                deviceId: session.deviceId,
+                bufferedAmount: Number(ws.bufferedAmount || 0)
             });
+            return true;
+        }
+
+        try {
+            ws.send(JSON.stringify(envelope));
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
+    function handleRemoteFleetControlInputSocketFailure(session) {
+        if (!session?.active) {
+            return;
+        }
+
+        closeRemoteFleetControlInputSocket(session, 'failed');
+        session.inputWsUnavailableUntil = Date.now() + 1000;
+        drainRemoteFleetControlInputQueueToFallback(session);
+    }
+
+    function ensureRemoteFleetControlInputSocket(session) {
+        if (!session?.active || typeof WebSocket !== 'function') {
+            return false;
+        }
+
+        const ws = session.inputWs;
+        if (ws && (ws.readyState === 0 || ws.readyState === 1)) {
+            return true;
+        }
+
+        if (session.inputWsConnecting === true) {
+            return true;
+        }
+
+        if ((session.inputWsUnavailableUntil || 0) > Date.now()) {
+            return false;
+        }
+
+        const connectToken = `input-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+        session.inputWsConnecting = true;
+        session.inputWsConnectToken = connectToken;
+        getRemoteFleetBridgeStatusForFrames()
+            .then(status => {
+                if (!session.active || session.inputWsConnectToken !== connectToken) {
+                    return;
+                }
+
+                const wsUrl = buildRemoteFleetInputWsUrl(status);
+                if (!wsUrl) {
+                    throw new Error('input-ws-url-unavailable');
+                }
+
+                const inputWs = new WebSocket(wsUrl);
+                session.inputWs = inputWs;
+                inputWs.onopen = () => {
+                    if (!session.active || session.inputWs !== inputWs) {
+                        return;
+                    }
+
+                    session.inputWsConnecting = false;
+                    session.inputWsUnavailableUntil = 0;
+                    if (session.inputWsOpenTimer) {
+                        clearTimeout(session.inputWsOpenTimer);
+                        session.inputWsOpenTimer = null;
+                    }
+                    flushRemoteFleetControlInputQueue(session);
+                };
+                inputWs.onmessage = event => {
+                    try {
+                        const message = JSON.parse(String(event?.data || ''));
+                        if (message?.ok === false && session.active) {
+                            session.status.textContent = message.error || 'Input failed';
+                        }
+                    } catch {
+                        // Ignore input ack parse errors.
+                    }
+                };
+                inputWs.onerror = () => {
+                    if (session.inputWs === inputWs) {
+                        handleRemoteFleetControlInputSocketFailure(session);
+                    }
+                };
+                inputWs.onclose = () => {
+                    if (session.inputWs === inputWs) {
+                        handleRemoteFleetControlInputSocketFailure(session);
+                    }
+                };
+                session.inputWsOpenTimer = setTimeout(() => {
+                    if (session.active && session.inputWs === inputWs && inputWs.readyState === 0) {
+                        handleRemoteFleetControlInputSocketFailure(session);
+                    }
+                }, 900);
+            })
+            .catch(() => {
+                if (!session.active || session.inputWsConnectToken !== connectToken) {
+                    return;
+                }
+
+                session.inputWsConnecting = false;
+                session.inputWsUnavailableUntil = Date.now() + 1000;
+                drainRemoteFleetControlInputQueueToFallback(session);
+            });
+
+        return true;
+    }
+
+    function sendRemoteFleetControlInputNow(session, payload) {
+        if (!session?.active || !payload?.type) {
+            return;
+        }
+
+        const input = createRemoteFleetControlInput(session, payload);
+        const envelope = {
+            type: 'input',
+            nodeId: session.nodeId,
+            deviceId: session.deviceId,
+            requestId: `input-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+            input
         };
 
+        const wsReady = ensureRemoteFleetControlInputSocket(session);
+        if (wsReady && sendRemoteFleetControlInputEnvelope(session, envelope)) {
+            return;
+        }
+
+        if (wsReady) {
+            enqueueRemoteFleetControlInput(session, envelope);
+            return;
+        }
+
+        sendRemoteFleetControlInputFallback(session, input);
+    }
+
+    function sendRemoteFleetControlInput(session, payload, throttleMove = false) {
+        if (!session?.active || !payload?.type) {
+            return;
+        }
+
         if (!throttleMove) {
-            send(payload);
+            sendRemoteFleetControlInputNow(session, payload);
             return;
         }
 
         const now = performance.now();
         const elapsed = now - (session.lastMoveSentAt || 0);
-        if (elapsed >= 32) {
+        if (elapsed >= REMOTE_FLEET_CONTROL_INPUT_MOVE_MS) {
             session.lastMoveSentAt = now;
-            send(payload);
+            sendRemoteFleetControlInputNow(session, payload);
             return;
         }
 
@@ -15952,18 +16211,82 @@
             session.pendingMove = null;
             if (next) {
                 session.lastMoveSentAt = performance.now();
-                send(next);
+                sendRemoteFleetControlInputNow(session, next);
             }
-        }, Math.max(1, 32 - elapsed));
+        }, Math.max(1, REMOTE_FLEET_CONTROL_INPUT_MOVE_MS - elapsed));
     }
 
-    function bindRemoteFleetControlInput(session) {
+    function isRemoteFleetControlBypassTarget(target, session) {
+        let current = target || null;
+        while (current) {
+            if (current === session?.stage || current === session?.shell) {
+                return false;
+            }
+
+            const tag = String(current.tagName || '').toLowerCase();
+            if (current?.dataset?.remoteFleetControlClose === 'true'
+                || tag === 'button'
+                || tag === 'input'
+                || tag === 'textarea'
+                || tag === 'select'
+                || String(current.getAttribute?.('contenteditable') || '').toLowerCase() === 'true') {
+                return true;
+            }
+
+            current = current.parentElement || null;
+        }
+
+        return false;
+    }
+
+    function bindRemoteFleetControlInput(session, options = {}) {
         const { overlay, shell, stage, canvas } = session;
         let pointerActive = false;
 
-        ['mousedown', 'mouseup', 'click', 'dblclick', 'keydown', 'keyup', 'wheel', 'contextmenu'].forEach(eventName => {
-            overlay.addEventListener(eventName, event => event.stopPropagation(), true);
-        });
+        if (options.captureOverlayEvents !== false) {
+            ['mousedown', 'mouseup', 'click', 'dblclick', 'keydown', 'keyup', 'wheel', 'contextmenu'].forEach(eventName => {
+                overlay.addEventListener(eventName, event => {
+                    if (!isRemoteFleetControlBypassTarget(event.target, session)) {
+                        event.stopPropagation();
+                    }
+                }, true);
+            });
+        }
+
+        const shouldIgnoreKeyboardEvent = event =>
+            isRemoteFleetControlBypassTarget(event?.target, session);
+
+        const handleKeyboardEvent = (event, type) => {
+            if (!session.active || shouldIgnoreKeyboardEvent(event) || event.__remoteFleetControlHandled === true) {
+                return;
+            }
+
+            event.__remoteFleetControlHandled = true;
+            event.preventDefault();
+            event.stopPropagation();
+            shell.focus({ preventScroll: true });
+            sendRemoteFleetControlInput(session, {
+                type,
+                key: event.key,
+                code: event.code,
+                repeat: event.repeat === true
+            });
+        };
+
+        const handleWindowKeyDown = event => handleKeyboardEvent(event, 'keyDown');
+        const handleWindowKeyUp = event => handleKeyboardEvent(event, 'keyUp');
+        const captureWindowKeyboard = options.windowKeyboardCapture !== false;
+        if (captureWindowKeyboard && typeof window.addEventListener === 'function') {
+            window.addEventListener('keydown', handleWindowKeyDown, true);
+            window.addEventListener('keyup', handleWindowKeyUp, true);
+        }
+        session.inputCleanup = () => {
+            if (captureWindowKeyboard && typeof window.removeEventListener === 'function') {
+                window.removeEventListener('keydown', handleWindowKeyDown, true);
+                window.removeEventListener('keyup', handleWindowKeyUp, true);
+            }
+            session.inputCleanup = null;
+        };
 
         stage.addEventListener('pointerdown', event => {
             const point = getRemoteFleetControlPoint(event, canvas, false);
@@ -16041,35 +16364,8 @@
             event.stopPropagation();
         });
 
-        shell.addEventListener('keydown', event => {
-            if (event.target?.closest?.('[data-remote-fleet-control-close="true"]')) {
-                return;
-            }
-
-            event.preventDefault();
-            event.stopPropagation();
-            sendRemoteFleetControlInput(session, {
-                type: 'keyDown',
-                key: event.key,
-                code: event.code,
-                repeat: event.repeat === true
-            });
-        });
-
-        shell.addEventListener('keyup', event => {
-            if (event.target?.closest?.('[data-remote-fleet-control-close="true"]')) {
-                return;
-            }
-
-            event.preventDefault();
-            event.stopPropagation();
-            sendRemoteFleetControlInput(session, {
-                type: 'keyUp',
-                key: event.key,
-                code: event.code,
-                repeat: event.repeat === true
-            });
-        });
+        shell.addEventListener('keydown', event => handleKeyboardEvent(event, 'keyDown'));
+        shell.addEventListener('keyup', event => handleKeyboardEvent(event, 'keyUp'));
     }
 
     function openRemoteFleetControlPopup(bodyView, nodeModel, deviceId) {
@@ -16233,10 +16529,18 @@
             lastMoveSentAt: 0,
             lastControlFrameAt: 0,
             lastControlFrameSeq: 0,
-            binaryFramePreferred: false
+            binaryFramePreferred: false,
+            inputWs: null,
+            inputWsConnecting: false,
+            inputWsConnectToken: '',
+            inputWsOpenTimer: null,
+            inputWsUnavailableUntil: 0,
+            inputQueue: [],
+            inputCleanup: null
         };
         activeRemoteFleetControlPopup = session;
         bindRemoteFleetControlInput(session);
+        ensureRemoteFleetControlInputSocket(session);
         attachRemoteFleetControlBinaryFrameSession(session, bodyView);
 
         const refresh = async () => {
@@ -16315,6 +16619,93 @@
             });
     }
 
+    function closeRemoteFleetControlNodeSession(bodyView, reason = 'close') {
+        const session = bodyView?._remoteFleetControlNodeSession || null;
+        if (!session) {
+            return;
+        }
+
+        bodyView._remoteFleetControlNodeSession = null;
+        session.active = false;
+        detachRemoteFleetControlBinaryFrameSession(session);
+        closeRemoteFleetControlInputSocket(session, 'close');
+        session.inputCleanup?.();
+        if (session.moveTimer) {
+            clearTimeout(session.moveTimer);
+            session.moveTimer = null;
+        }
+        session.pendingMove = null;
+        window.RuntimeTrace?.emit?.('remote.control.nodeClosed', {
+            nodeId: session.nodeId,
+            deviceId: session.deviceId,
+            reason
+        });
+    }
+
+    function startRemoteFleetControlNodeSession(bodyView, nodeId, deviceId, stage, canvas, status, placeholder = null) {
+        const normalizedNodeId = String(nodeId || '').trim();
+        const normalizedDeviceId = String(deviceId || '').trim();
+        if (!bodyView || !normalizedNodeId || !normalizedDeviceId || !stage || !canvas) {
+            return null;
+        }
+
+        closeRemoteFleetControlNodeSession(bodyView, 'replace');
+        const session = {
+            active: true,
+            nodeId: normalizedNodeId,
+            deviceId: normalizedDeviceId,
+            overlay: bodyView,
+            shell: stage,
+            stage,
+            canvas,
+            status: status || { textContent: '' },
+            placeholder,
+            wasLiveActive: false,
+            startedStream: false,
+            streamId: '',
+            controlLeaseId: `control-node-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+            timer: null,
+            moveTimer: null,
+            pendingMove: null,
+            lastMoveSentAt: 0,
+            lastControlFrameAt: 0,
+            lastControlFrameSeq: 0,
+            binaryFramePreferred: false,
+            inputWs: null,
+            inputWsConnecting: false,
+            inputWsConnectToken: '',
+            inputWsOpenTimer: null,
+            inputWsUnavailableUntil: 0,
+            inputQueue: [],
+            inputCleanup: null
+        };
+
+        bodyView._remoteFleetControlNodeSession = session;
+        bindRemoteFleetControlInput(session, {
+            captureOverlayEvents: false,
+            windowKeyboardCapture: false
+        });
+        ensureRemoteFleetControlInputSocket(session);
+        startRemoteFleetBinaryFrameSocket(bodyView, () => [normalizedDeviceId], {
+            autoStartLive: true,
+            fps: REMOTE_FLEET_CONTROL_LIVE_FPS,
+            maxWidth: 1280,
+            maxHeight: 720,
+            quality: 65,
+            mode: 'remote-fast-control-node'
+        });
+        attachRemoteFleetControlBinaryFrameSession(session, bodyView);
+        stage.focus?.({ preventScroll: true });
+        if (status) {
+            status.textContent = `Control ${REMOTE_FLEET_CONTROL_LIVE_FPS}fps`;
+        }
+        window.RuntimeTrace?.emit?.('remote.control.nodeOpened', {
+            nodeId: normalizedNodeId,
+            deviceId: normalizedDeviceId
+        });
+        return session;
+    }
+
     function isRemoteFleetLiveActive(device) {
         return getRemoteFleetDeviceField(device, 'liveStreamActive', 'LiveStreamActive', false) === true;
     }
@@ -16559,7 +16950,7 @@
 
         if (!device || !deviceId) {
             const empty = document.createElement('div');
-            empty.textContent = lastError || 'Pinned remote device snapshot is unavailable.';
+            empty.textContent = lastError || 'Remote control device snapshot is unavailable.';
             empty.style.cssText = `
                 flex: 1 1 auto;
                 display: flex;
@@ -16575,7 +16966,7 @@
                 text-align: center;
                 background: rgba(255, 255, 255, 0.74);
             `;
-            const refreshButton = createRemoteFleetButton('Refresh', 'Refresh this pinned device', 'refresh-device');
+            const refreshButton = createRemoteFleetButton('Refresh', 'Refresh this remote control device', 'refresh-device');
             refreshButton.style.height = '32px';
             refreshButton.addEventListener('click', async event => {
                 event.preventDefault();
@@ -16654,52 +17045,109 @@
         header.appendChild(statusBadge);
         bodyView.appendChild(header);
 
-        const preview = document.createElement('div');
-        preview.dataset.remoteFleetDevicePreview = 'pinned';
-        preview.dataset.deviceId = deviceId;
-        preview.dataset.remoteFleetFrameKind = hasLiveFrame ? 'live' : (hasThumbnail ? 'thumbnail' : '');
-        preview.dataset.remoteFleetFrameSeq = String(hasLiveFrame
-            ? getRemoteFleetDeviceField(device, 'liveFrameSeq', 'LiveFrameSeq', 0)
-            : getRemoteFleetDeviceField(device, 'thumbnailFrameSeq', 'ThumbnailFrameSeq', 0));
-        preview.style.cssText = `
+        const controlStage = document.createElement('div');
+        controlStage.dataset.remoteFleetControlNodeStage = 'true';
+        controlStage.dataset.deviceId = deviceId;
+        controlStage.tabIndex = 0;
+        controlStage.title = `${name} remote control`;
+        controlStage.style.cssText = `
             position: relative;
-            flex: 0 0 auto;
+            flex: 1 1 auto;
+            min-height: 260px;
             width: 100%;
-            aspect-ratio: 16 / 9;
             overflow: hidden;
-            border-radius: 8px;
-            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-            border: 1px solid rgba(15, 23, 42, 0.16);
+            border-radius: 0;
+            background: #020617;
+            border: 1px solid rgba(15, 23, 42, 0.18);
+            cursor: crosshair;
+            touch-action: none;
+            outline: none;
         `;
-        if (hasLiveFrame || hasThumbnail) {
-            const image = document.createElement('img');
-            image.dataset.remoteFleetFrameImage = 'true';
-            image.dataset.remoteFleetFrameKind = hasLiveFrame ? 'live' : 'thumbnail';
-            image.dataset.remoteFleetFrameSeq = preview.dataset.remoteFleetFrameSeq;
-            image.src = previewSource;
-            image.alt = `${name} screen`;
-            image.loading = 'lazy';
-            image.decoding = 'async';
-            image.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block;';
-            preview.appendChild(image);
-        } else {
-            const placeholder = document.createElement('div');
-            placeholder.dataset.remoteFleetScreenPlaceholder = 'true';
-            placeholder.textContent = thumbnailEnabled ? 'No frame yet' : 'Status only';
-            placeholder.style.cssText = `
-                position: absolute;
-                inset: 0;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: rgba(226, 232, 240, 0.78);
-                font-size: 12px;
-                font-weight: 900;
-                letter-spacing: 0;
-            `;
-            preview.appendChild(placeholder);
+        const controlCanvas = document.createElement('canvas');
+        controlCanvas.dataset.remoteFleetControlNodeCanvas = 'true';
+        controlCanvas.style.cssText = `
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            display: block;
+            background: #020617;
+        `;
+        const controlOverlay = document.createElement('div');
+        controlOverlay.style.cssText = `
+            position: absolute;
+            left: 8px;
+            top: 8px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            pointer-events: none;
+            z-index: 2;
+        `;
+        const controlDot = document.createElement('span');
+        controlDot.style.cssText = `
+            width: 7px;
+            height: 7px;
+            border-radius: 50%;
+            background: ${connected ? '#10b981' : '#94a3b8'};
+            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.72);
+        `;
+        const controlStatus = document.createElement('span');
+        controlStatus.dataset.remoteFleetControlNodeStatus = 'true';
+        controlStatus.textContent = connected ? 'Connecting' : 'Offline';
+        controlStatus.style.cssText = `
+            color: rgba(248, 250, 252, 0.94);
+            font-size: 10px;
+            font-weight: 900;
+            line-height: 1;
+            padding: 4px 6px;
+            border-radius: 999px;
+            background: rgba(15, 23, 42, 0.72);
+            letter-spacing: 0;
+        `;
+        const controlPlaceholder = document.createElement('div');
+        controlPlaceholder.dataset.remoteFleetControlNodePlaceholder = 'true';
+        controlPlaceholder.textContent = connected ? 'Waiting for screen' : 'Offline';
+        controlPlaceholder.style.cssText = `
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: rgba(226, 232, 240, 0.74);
+            font-size: 12px;
+            font-weight: 900;
+            letter-spacing: 0;
+            pointer-events: none;
+        `;
+        controlOverlay.appendChild(controlDot);
+        controlOverlay.appendChild(controlStatus);
+        controlStage.appendChild(controlCanvas);
+        controlStage.appendChild(controlPlaceholder);
+        controlStage.appendChild(controlOverlay);
+        bodyView.appendChild(controlStage);
+
+        if (connected) {
+            const session = startRemoteFleetControlNodeSession(
+                bodyView,
+                nodeId,
+                deviceId,
+                controlStage,
+                controlCanvas,
+                controlStatus,
+                controlPlaceholder);
+            if (session && isRemoteFleetFrameSource(previewSource)) {
+                paintRemoteFleetControlFrame(session, {
+                    deviceId,
+                    kind: hasLiveFrame ? 'live' : 'thumbnail',
+                    frameSeq: hasLiveFrame
+                        ? getRemoteFleetDeviceField(device, 'liveFrameSeq', 'LiveFrameSeq', 0)
+                        : getRemoteFleetDeviceField(device, 'thumbnailFrameSeq', 'ThumbnailFrameSeq', 0),
+                    frameUrl: previewSource,
+                    receivedAt: previewAt
+                }).catch(() => undefined);
+            }
         }
-        bodyView.appendChild(preview);
 
         const stats = document.createElement('div');
         stats.style.cssText = 'display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;flex:0 0 auto;';
@@ -16766,7 +17214,7 @@
 
         const actions = document.createElement('div');
         actions.style.cssText = 'display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:0 0 auto;';
-        const refreshButton = createRemoteFleetButton('Refresh', 'Refresh this pinned device', 'refresh-device');
+        const refreshButton = createRemoteFleetButton('Refresh', 'Refresh this remote control device', 'refresh-device');
         refreshButton.style.height = '30px';
         actions.appendChild(refreshButton);
         if (connected && thumbnailEnabled) {
@@ -18111,7 +18559,32 @@
                 const deviceId = String(card.dataset.deviceId || '').trim();
                 if (!deviceId) return;
                 bodyView.dataset.remoteFleetSelectedDeviceId = deviceId;
-                openRemoteFleetControlPopup(bodyView, nodeModel, deviceId);
+                if (card.dataset.remoteFleetOpeningControlNode === 'true') {
+                    return;
+                }
+
+                card.dataset.remoteFleetOpeningControlNode = 'true';
+                invokeDotNetAsync('AddRemoteFleetDeviceNodeFromJs', nodeId, deviceId)
+                    .then(async result => {
+                        await syncRemoteFleetNodeStateFromResult(result);
+                        if (result?.success) {
+                            const controlNodeId = String(result.nodeId || result.NodeId || '').trim();
+                            if (controlNodeId) {
+                                window.mindMap?.focusNode?.(controlNodeId, { selectNode: true });
+                                window.mindMap?.selectNode?.(controlNodeId);
+                                invokeDotNetAsync('SelectNodeInBlazor', controlNodeId).catch(() => undefined);
+                            }
+                            setTaskFeedback('');
+                        } else {
+                            setTaskFeedback(result?.error || result?.Error || 'Remote control node failed.', 'error');
+                        }
+                    })
+                    .catch(error => {
+                        setTaskFeedback(error?.message || 'Remote control node failed.', 'error');
+                    })
+                    .finally(() => {
+                        delete card.dataset.remoteFleetOpeningControlNode;
+                    });
             });
             const selectCard = event => {
                 event.preventDefault();