@mindexec/cli 0.2.153 → 0.2.154

package/package.json

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

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

@@ -865,6 +865,18 @@ try {
                 };
             }
 
+            if (methodName === 'AddRemoteFleetDeviceNodeFromJs') {
+                const deviceId = String(args[1] || '');
+                return {
+                    success: true,
+                    nodeId: 'remote-device-render-smoke',
+                    deviceId,
+                    nodeState: buildDeviceNode(
+                        devices.find(device => device.DeviceId === deviceId) || focusedDevice,
+                        hub.getStatus())
+                };
+            }
+
             return { success: true };
         }
     };
@@ -1095,133 +1107,16 @@ try {
     assert.equal(rerenderedPatchPreview.dataset.remoteFleetFrameSeq, String(websocketFrameSeq));
     assert.equal(rerenderedPatchPreview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]')?.style.display, 'block');
 
-    const liveStartCallsBeforeControl = dotNetCalls.filter(call => call.methodName === 'StartRemoteFleetLiveStreamFromJs').length;
-    const sendCountBeforeControl = diagnostics.webSocketSends.length;
-    const drawCountBeforeControl = document.canvasDrawCalls.length;
     const controlCard = bodyView.querySelector(`article[data-device-id="${patchTarget.DeviceId}"]`);
     assert.ok(controlCard);
     controlCard.dispatchEvent({ type: 'dblclick', button: 0 });
     await wait(30);
-    const controlPopup = document.body.querySelector('[data-remote-fleet-control-popup="true"]');
-    assert.ok(controlPopup, 'double-clicking an MDM tile should open the control popup');
-    const controlShell = controlPopup.querySelector('[data-remote-fleet-control-shell="true"]');
-    const controlStage = controlPopup.querySelector('[data-remote-fleet-control-stage="true"]');
-    const controlCanvas = controlPopup.querySelector('[data-remote-fleet-control-canvas="true"]');
-    assert.ok(controlShell);
-    assert.ok(controlStage);
-    assert.ok(controlCanvas);
-    assert.equal(document.activeElement, controlShell);
-    const controlStartCalls = dotNetCalls
-        .filter(call => call.methodName === 'StartRemoteFleetLiveStreamFromJs')
-        .slice(liveStartCallsBeforeControl);
-    assert.equal(controlStartCalls.length, 1);
-    assert.equal(controlStartCalls[0].args[0], 'remote-fleet-render-smoke');
-    assert.equal(controlStartCalls[0].args[1], patchTarget.DeviceId);
-    assert.equal(controlStartCalls[0].args[2], 20);
-    const controlSubscribe = diagnostics.webSocketSends
-        .slice(sendCountBeforeControl)
-        .map(send => {
-            try {
-                return JSON.parse(send.payload);
-            } catch {
-                return null;
-            }
-        })
-        .find(message =>
-            message
-            && message.type === 'subscribe'
-            && message.nodeId === 'remote-fleet-render-smoke'
-            && message.autoStartLive === true
-            && message.fps === 20
-            && Array.isArray(message.deviceIds)
-            && message.deviceIds.includes(patchTarget.DeviceId));
-    assert.ok(controlSubscribe, 'control popup should reuse the binary frame WebSocket with a 20fps subscription');
-
-    const controlFrameSeq = 20001;
-    liveWs.onmessage?.({
-        data: new Blob([encodeRemoteBinaryFrame({
-            type: 'remote.frame.binary',
-            deviceId: patchTarget.DeviceId,
-            kind: 'live',
-            frameSeq: controlFrameSeq,
-            streamId: 'render-smoke-control-live',
-            contentHash: `render-smoke-control-live-${controlFrameSeq}`,
-            mimeType: 'image/jpeg',
-            width: 64,
-            height: 36,
-            capturedAt: new Date().toISOString(),
-            receivedAt: new Date().toISOString()
-        })])
-    });
-    await wait(40);
-    assert.equal(controlCanvas.style.display, 'block');
-    assert.ok(
-        document.canvasDrawCalls
-            .slice(drawCountBeforeControl)
-            .some(call => call.canvas === controlCanvas && call.op === 'drawImage'),
-        'control popup should paint binary WebSocket frames directly to its canvas');
-
-    controlStage.dispatchEvent({
-        type: 'pointerdown',
-        button: 0,
-        pointerId: 7,
-        clientX: 160,
-        clientY: 90
-    });
-    controlStage.dispatchEvent({
-        type: 'pointerup',
-        button: 0,
-        pointerId: 7,
-        clientX: 160,
-        clientY: 90
-    });
-    controlShell.dispatchEvent({
-        type: 'keydown',
-        key: 'A',
-        code: 'KeyA',
-        repeat: false
-    });
-    controlShell.dispatchEvent({
-        type: 'keyup',
-        key: 'A',
-        code: 'KeyA',
-        repeat: false
-    });
-    await wait(50);
-    const inputWsSends = diagnostics.webSocketSends
-        .filter(send => send.url.includes('/api/remote/input/ws'))
-        .map(send => {
-            try {
-                return JSON.parse(send.payload);
-            } catch {
-                return null;
-            }
-        })
-        .filter(Boolean);
-    assert.ok(inputWsSends.length >= 3, 'control popup should send pointer and keyboard input over the input WebSocket');
-    const pointerDown = inputWsSends.find(message => message.input?.type === 'pointerDown');
-    const keyDown = inputWsSends.find(message => message.input?.type === 'keyDown');
-    const keyUp = inputWsSends.find(message => message.input?.type === 'keyUp');
-    assert.ok(pointerDown);
-    assert.ok(keyDown);
-    assert.ok(keyUp);
-    assert.equal(pointerDown.nodeId, 'remote-fleet-render-smoke');
-    assert.equal(pointerDown.deviceId, patchTarget.DeviceId);
-    assert.equal(pointerDown.input.button, 'left');
-    assert.ok(pointerDown.input.controlLeaseId);
-    assert.ok(pointerDown.input.normalizedX >= 0 && pointerDown.input.normalizedX <= 1);
-    assert.ok(pointerDown.input.normalizedY >= 0 && pointerDown.input.normalizedY <= 1);
-    assert.equal(keyDown.input.key, 'A');
-    assert.equal(keyDown.input.code, 'KeyA');
-    assert.equal(keyUp.input.key, 'A');
-    assert.equal(keyUp.input.code, 'KeyA');
-    assert.equal(
-        dotNetCalls.filter(call => call.methodName === 'SendRemoteFleetInputFromJs').length,
-        0,
-        'WebSocket input path should not use the slower DotNet input fallback in the happy path');
-    manager.closeRemoteFleetControlPopupForTest('render-smoke');
-    await wait(20);
     assert.equal(document.body.querySelector('[data-remote-fleet-control-popup="true"]'), null);
+    const addControlNodeCall = dotNetCalls.find(call =>
+        call.methodName === 'AddRemoteFleetDeviceNodeFromJs'
+        && call.args[0] === 'remote-fleet-render-smoke'
+        && call.args[1] === patchTarget.DeviceId);
+    assert.ok(addControlNodeCall, 'double-clicking an MDM tile should create a remote-control canvas node');
 
     const alternateDevice = devices.find(device =>
         device.Connected === true
@@ -1305,8 +1200,7 @@ try {
     assert.ok(devices.some(device => /^synthetic-response-/.test(device.LatestTaskResultResponseId)));
     await wait(20);
     const liveStartCalls = dotNetCalls
-        .filter(call => call.methodName === 'StartRemoteFleetLiveStreamFromJs')
-        .slice(0, liveStartCallsBeforeControl);
+        .filter(call => call.methodName === 'StartRemoteFleetLiveStreamFromJs');
     const subscribeMessages = diagnostics.webSocketSends
         .map(send => {
             try {
@@ -1392,9 +1286,120 @@ try {
         child !== errorFooter && (child.textContent || '').includes('RemoteHub is unavailable')), false);
 
     const deviceBody = document.createElement('div');
+    deviceBody.dataset.nodeId = 'remote-device-render-smoke';
     document.body.appendChild(deviceBody);
+    const sendCountBeforeControlNode = diagnostics.webSocketSends.length;
+    const drawCountBeforeControlNode = document.canvasDrawCalls.length;
     manager.renderRemoteFleetDeviceForTest(deviceBody, buildDeviceNode(focusedDevice, hub.getStatus()));
     assert.ok(deviceBody.textContent.includes(focusedDevice.Name));
+    const deviceControlStage = deviceBody.querySelector('[data-remote-fleet-control-node-stage="true"]');
+    const deviceControlCanvas = deviceBody.querySelector('[data-remote-fleet-control-node-canvas="true"]');
+    assert.ok(deviceControlStage);
+    assert.ok(deviceControlCanvas);
+    assert.equal(document.activeElement, deviceControlStage);
+    await wait(30);
+    const deviceControlSubscribe = diagnostics.webSocketSends
+        .slice(sendCountBeforeControlNode)
+        .map(send => {
+            try {
+                return JSON.parse(send.payload);
+            } catch {
+                return null;
+            }
+        })
+        .find(message =>
+            message
+            && message.type === 'subscribe'
+            && message.nodeId === 'remote-device-render-smoke'
+            && message.autoStartLive === true
+            && message.fps === 20
+            && Array.isArray(message.deviceIds)
+            && message.deviceIds.includes(focusedDevice.DeviceId));
+    assert.ok(deviceControlSubscribe, 'RemoteFleetDevice node should subscribe to 20fps binary frames');
+    const deviceControlWs = diagnostics.webSocketConnections
+        .filter(ws => ws.url.includes('/api/remote/frames/ws'))
+        .at(-1);
+    assert.ok(deviceControlWs, 'RemoteFleetDevice node should open a binary frame WebSocket');
+    const controlNodeFrameSeq = 30001;
+    deviceControlWs.onmessage?.({
+        data: new Blob([encodeRemoteBinaryFrame({
+            type: 'remote.frame.binary',
+            deviceId: focusedDevice.DeviceId,
+            kind: 'live',
+            frameSeq: controlNodeFrameSeq,
+            streamId: 'render-smoke-control-node-live',
+            contentHash: `render-smoke-control-node-live-${controlNodeFrameSeq}`,
+            mimeType: 'image/jpeg',
+            width: 64,
+            height: 36,
+            capturedAt: new Date().toISOString(),
+            receivedAt: new Date().toISOString()
+        })])
+    });
+    await wait(40);
+    assert.ok(
+        document.canvasDrawCalls
+            .slice(drawCountBeforeControlNode)
+            .some(call => call.canvas === deviceControlCanvas && call.op === 'drawImage'),
+        'RemoteFleetDevice node should paint binary WebSocket frames directly to its canvas');
+    deviceControlStage.dispatchEvent({
+        type: 'pointerdown',
+        button: 0,
+        pointerId: 11,
+        clientX: 160,
+        clientY: 90
+    });
+    deviceControlStage.dispatchEvent({
+        type: 'pointerup',
+        button: 0,
+        pointerId: 11,
+        clientX: 160,
+        clientY: 90
+    });
+    deviceControlStage.dispatchEvent({
+        type: 'keydown',
+        key: 'A',
+        code: 'KeyA',
+        repeat: false
+    });
+    deviceControlStage.dispatchEvent({
+        type: 'keyup',
+        key: 'A',
+        code: 'KeyA',
+        repeat: false
+    });
+    await wait(50);
+    const inputWsSends = diagnostics.webSocketSends
+        .filter(send => send.url.includes('/api/remote/input/ws'))
+        .map(send => {
+            try {
+                return JSON.parse(send.payload);
+            } catch {
+                return null;
+            }
+        })
+        .filter(Boolean);
+    assert.ok(inputWsSends.length >= 3, 'RemoteFleetDevice node should send pointer and keyboard input over the input WebSocket');
+    const pointerDown = inputWsSends.find(message => message.input?.type === 'pointerDown');
+    const keyDown = inputWsSends.find(message => message.input?.type === 'keyDown');
+    const keyUp = inputWsSends.find(message => message.input?.type === 'keyUp');
+    assert.ok(pointerDown);
+    assert.ok(keyDown);
+    assert.ok(keyUp);
+    assert.equal(pointerDown.nodeId, 'remote-device-render-smoke');
+    assert.equal(pointerDown.deviceId, focusedDevice.DeviceId);
+    assert.equal(pointerDown.input.button, 'left');
+    assert.ok(pointerDown.input.controlLeaseId);
+    assert.ok(pointerDown.input.normalizedX >= 0 && pointerDown.input.normalizedX <= 1);
+    assert.ok(pointerDown.input.normalizedY >= 0 && pointerDown.input.normalizedY <= 1);
+    assert.equal(keyDown.input.key, 'A');
+    assert.equal(keyDown.input.code, 'KeyA');
+    assert.equal(keyUp.input.key, 'A');
+    assert.equal(keyUp.input.code, 'KeyA');
+    assert.equal(
+        dotNetCalls.filter(call => call.methodName === 'SendRemoteFleetInputFromJs').length,
+        0,
+        'WebSocket input path should not use the slower DotNet input fallback in the happy path');
     assert.ok(deviceBody.querySelector('[data-remote-fleet-action="refresh-device"]'));
     assert.ok(deviceBody.querySelector('[data-remote-fleet-action="task-device"]'));
     assert.ok(deviceBody.textContent.includes('Task timed out waiting for the agent response.'));

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

@@ -13730,6 +13730,7 @@
 
     function clearRemoteFleetTimers(bodyView, options = {}) {
         if (!bodyView) return;
+        closeRemoteFleetControlNodeSession(bodyView, 'clear');
         if (options.keepBinaryFrameSocket !== true) {
             releaseRemoteFleetBinaryFrameSocket(bodyView);
         }
@@ -15867,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();
                 }
@@ -15917,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();
                 }
@@ -16211,16 +16216,45 @@
         }, 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 =>
-            event?.target?.closest?.('[data-remote-fleet-control-close="true"]');
+            isRemoteFleetControlBypassTarget(event?.target, session);
 
         const handleKeyboardEvent = (event, type) => {
             if (!session.active || shouldIgnoreKeyboardEvent(event) || event.__remoteFleetControlHandled === true) {
@@ -16241,12 +16275,13 @@
 
         const handleWindowKeyDown = event => handleKeyboardEvent(event, 'keyDown');
         const handleWindowKeyUp = event => handleKeyboardEvent(event, 'keyUp');
-        if (typeof window.addEventListener === 'function') {
+        const captureWindowKeyboard = options.windowKeyboardCapture !== false;
+        if (captureWindowKeyboard && typeof window.addEventListener === 'function') {
             window.addEventListener('keydown', handleWindowKeyDown, true);
             window.addEventListener('keyup', handleWindowKeyUp, true);
         }
         session.inputCleanup = () => {
-            if (typeof window.removeEventListener === 'function') {
+            if (captureWindowKeyboard && typeof window.removeEventListener === 'function') {
                 window.removeEventListener('keydown', handleWindowKeyDown, true);
                 window.removeEventListener('keyup', handleWindowKeyUp, true);
             }
@@ -16584,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;
     }
@@ -16828,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;
@@ -16844,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();
@@ -16923,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;';
@@ -17035,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) {
@@ -18380,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();

package/wwwroot/_framework/blazor.boot.json

@@ -1,7 +1,7 @@
 {
   "mainAssemblyName": "MindExecution.Web",
   "resources": {
-    "hash": "sha256-exyWukcppwSmHQvoV122RgnUj4KZOvdS3LHrc3Z6BTY=",
+    "hash": "sha256-H62hFd8/JAFraA8jNVN3s3GNyvSJa5o8b6zHgtuC/es=",
     "fingerprinting": {
       "Google.Protobuf.9h59ukbel7.dll": "Google.Protobuf.dll",
       "Markdig.d1j7v41cl1.dll": "Markdig.dll",
@@ -127,12 +127,12 @@
       "MindExecution.Kernel.3zom09ir6j.dll": "MindExecution.Kernel.dll",
       "MindExecution.Plugins.Admin.bk23zzy6wc.dll": "MindExecution.Plugins.Admin.dll",
       "MindExecution.Plugins.Business.zwcvc8wufe.dll": "MindExecution.Plugins.Business.dll",
-      "MindExecution.Plugins.Concept.5gltgdqyo3.dll": "MindExecution.Plugins.Concept.dll",
+      "MindExecution.Plugins.Concept.4ncya2e794.dll": "MindExecution.Plugins.Concept.dll",
       "MindExecution.Plugins.Directory.jc0g7fvyzv.dll": "MindExecution.Plugins.Directory.dll",
-      "MindExecution.Plugins.PlanMaster.cn6ppe6qoz.dll": "MindExecution.Plugins.PlanMaster.dll",
-      "MindExecution.Plugins.YouTube.d7nnsxrftv.dll": "MindExecution.Plugins.YouTube.dll",
-      "MindExecution.Shared.mnpwk5h86c.dll": "MindExecution.Shared.dll",
-      "MindExecution.Web.ygql0sg6b3.dll": "MindExecution.Web.dll",
+      "MindExecution.Plugins.PlanMaster.0yfii1nh3p.dll": "MindExecution.Plugins.PlanMaster.dll",
+      "MindExecution.Plugins.YouTube.y4vxx807fo.dll": "MindExecution.Plugins.YouTube.dll",
+      "MindExecution.Shared.50ptsgk9eg.dll": "MindExecution.Shared.dll",
+      "MindExecution.Web.hztii75ar1.dll": "MindExecution.Web.dll",
       "dotnet.js": "dotnet.js",
       "dotnet.native.qc8g39g30v.js": "dotnet.native.js",
       "dotnet.native.boem75ye5i.wasm": "dotnet.native.wasm",
@@ -280,16 +280,16 @@
       "netstandard.yvr3prsx0x.dll": "sha256-EksNn8Luo4bOWqJ6X7dIe9qG9oOqwOVzjH2xYyMNi+E=",
       "MindExecution.Core.asayb4hw1o.dll": "sha256-5gla4JTR/zbvkGpneSt6S7ItE51+MjWgjW6L+B6Yevk=",
       "MindExecution.Kernel.3zom09ir6j.dll": "sha256-78vR2SNkF9FwdQv0fEItSyz4HzgyzwGUROJAnpripPA=",
-      "MindExecution.Plugins.Concept.5gltgdqyo3.dll": "sha256-1ZVpFoyPoidSyJz38jH40AFealONt+qQpToJKgqoWW8=",
-      "MindExecution.Plugins.PlanMaster.cn6ppe6qoz.dll": "sha256-GIFH/f4ilVTFDJVEDLLiWkkI7yGeeQl/T5/iuivI87Q=",
-      "MindExecution.Shared.mnpwk5h86c.dll": "sha256-Ht4Kl9nQePXwyDEwL4jBxo2K3F9R4B2OGnSuhHmZ+eU=",
-      "MindExecution.Web.ygql0sg6b3.dll": "sha256-vhb5mjLTaEStzJ9ggN4jBqtd1Z7FAkKHp7bx6Pz33Mc="
+      "MindExecution.Plugins.Concept.4ncya2e794.dll": "sha256-gKad12tQh1p7kInUiSIECobEZiD4VIuxmmskGE3ambo=",
+      "MindExecution.Plugins.PlanMaster.0yfii1nh3p.dll": "sha256-OMcIYPKBnnJCW6QRN8nGykgCloUl1FRnFx6lma85ZGs=",
+      "MindExecution.Shared.50ptsgk9eg.dll": "sha256-1X+o7c7jCm4MVorCrq52beiyMe+C6qFw6EyIGfZGQdo=",
+      "MindExecution.Web.hztii75ar1.dll": "sha256-s/mh0EOyp5uxPxzn6b4blKD/zAAA5oKCjFDe0tCgc9g="
     },
     "lazyAssembly": {
       "MindExecution.Plugins.Admin.bk23zzy6wc.dll": "sha256-uz7Nz0OZ8BBESp2Nr9YocyzV0dUrn7szPuD4/m/RWL8=",
       "MindExecution.Plugins.Business.zwcvc8wufe.dll": "sha256-3YDsB2/uNI+feWqJk+cesLHgNt8s2/8hXxGPO6CRZZE=",
       "MindExecution.Plugins.Directory.jc0g7fvyzv.dll": "sha256-PSe7135JPpTBmu4j+rGLF0Dc/6w/wDJNPi8zlfTmSMk=",
-      "MindExecution.Plugins.YouTube.d7nnsxrftv.dll": "sha256-OQVjt1f240FGxRV8b2FpxDv4i3U4a7GGA+dBBiZBih8="
+      "MindExecution.Plugins.YouTube.y4vxx807fo.dll": "sha256-HkMC8BltV070e0Uaskpmyu6+TIs04y0G2t4E62RJdcc="
     }
   },
   "cacheBootResources": true,

package/wwwroot/service-worker-assets.js

@@ -1,5 +1,5 @@
 self.assetsManifest = {
-    "version":  "uSz5Xt0z",
+    "version":  "QafYmh64",
     "assets":  [
                    {
                        "hash":  "sha256-+CSYMcqLNTsq3VnH11jgYyOCCdxvHzL74CBmo4sCmMU=",
@@ -86,7 +86,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js.backup"
                    },
                    {
-                       "hash":  "sha256-4BdT/RnBOnh3Mm/hTZilg3zo9az6W9oYf8h3br2aDko=",
+                       "hash":  "sha256-7XM3q7xvvWVxDjSBniKorjQgNjyhOcAz2WNqg8OHOa0=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-css3d-manager.js"
                    },
                    {
@@ -426,28 +426,28 @@
                        "url":  "_framework/MindExecution.Plugins.Business.zwcvc8wufe.dll"
                    },
                    {
-                       "hash":  "sha256-1ZVpFoyPoidSyJz38jH40AFealONt+qQpToJKgqoWW8=",
-                       "url":  "_framework/MindExecution.Plugins.Concept.5gltgdqyo3.dll"
+                       "hash":  "sha256-gKad12tQh1p7kInUiSIECobEZiD4VIuxmmskGE3ambo=",
+                       "url":  "_framework/MindExecution.Plugins.Concept.4ncya2e794.dll"
                    },
                    {
                        "hash":  "sha256-PSe7135JPpTBmu4j+rGLF0Dc/6w/wDJNPi8zlfTmSMk=",
                        "url":  "_framework/MindExecution.Plugins.Directory.jc0g7fvyzv.dll"
                    },
                    {
-                       "hash":  "sha256-GIFH/f4ilVTFDJVEDLLiWkkI7yGeeQl/T5/iuivI87Q=",
-                       "url":  "_framework/MindExecution.Plugins.PlanMaster.cn6ppe6qoz.dll"
+                       "hash":  "sha256-OMcIYPKBnnJCW6QRN8nGykgCloUl1FRnFx6lma85ZGs=",
+                       "url":  "_framework/MindExecution.Plugins.PlanMaster.0yfii1nh3p.dll"
                    },
                    {
-                       "hash":  "sha256-OQVjt1f240FGxRV8b2FpxDv4i3U4a7GGA+dBBiZBih8=",
-                       "url":  "_framework/MindExecution.Plugins.YouTube.d7nnsxrftv.dll"
+                       "hash":  "sha256-HkMC8BltV070e0Uaskpmyu6+TIs04y0G2t4E62RJdcc=",
+                       "url":  "_framework/MindExecution.Plugins.YouTube.y4vxx807fo.dll"
                    },
                    {
-                       "hash":  "sha256-Ht4Kl9nQePXwyDEwL4jBxo2K3F9R4B2OGnSuhHmZ+eU=",
-                       "url":  "_framework/MindExecution.Shared.mnpwk5h86c.dll"
+                       "hash":  "sha256-1X+o7c7jCm4MVorCrq52beiyMe+C6qFw6EyIGfZGQdo=",
+                       "url":  "_framework/MindExecution.Shared.50ptsgk9eg.dll"
                    },
                    {
-                       "hash":  "sha256-vhb5mjLTaEStzJ9ggN4jBqtd1Z7FAkKHp7bx6Pz33Mc=",
-                       "url":  "_framework/MindExecution.Web.ygql0sg6b3.dll"
+                       "hash":  "sha256-s/mh0EOyp5uxPxzn6b4blKD/zAAA5oKCjFDe0tCgc9g=",
+                       "url":  "_framework/MindExecution.Web.hztii75ar1.dll"
                    },
                    {
                        "hash":  "sha256-IsZJ91/OW+fHzNqIgEc7Y072ns8z9dGritiSyvR9Wgc=",
@@ -770,7 +770,7 @@
                        "url":  "_framework/Websocket.Client.vapounvmnl.dll"
                    },
                    {
-                       "hash":  "sha256-FgsKNE/RFoMI9OioRZ4cgImxpXXkbc2D4LpHp7W2L7A=",
+                       "hash":  "sha256-pG5Qn7IywPsHJ02D/12EcGeCG65zRYsIE4kfzFBZv3I=",
                        "url":  "_framework/blazor.boot.json"
                    },
                    {

package/wwwroot/service-worker.js

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