mindexec-ai 0.2.385

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

@@ -0,0 +1,1491 @@
+#!/usr/bin/env node
+
+import assert from 'node:assert/strict';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import vm from 'node:vm';
+import { fileURLToPath } from 'node:url';
+import { createRemoteHub } from '../remote-hub.js';
+
+const SYNTHETIC_COUNT = Number(process.env.REMOTE_FLEET_RENDER_SMOKE_COUNT || 500);
+
+function dataAttributeToDatasetKey(name) {
+    return String(name || '').replace(/^data-/, '').replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+}
+
+class MiniStyle {
+    constructor() {
+        this._cssText = '';
+    }
+
+    get cssText() {
+        return this._cssText;
+    }
+
+    set cssText(value) {
+        this._cssText = String(value || '');
+        const displayMatch = /(?:^|;)\s*display\s*:\s*([^;]+)/i.exec(this._cssText);
+        if (displayMatch) {
+            this.display = displayMatch[1].trim();
+        }
+    }
+
+    setProperty(name, value) {
+        this[String(name)] = String(value);
+    }
+}
+
+class MiniClassList {
+    constructor(owner) {
+        this.owner = owner;
+        this.tokens = new Set();
+    }
+
+    add(...tokens) {
+        tokens.forEach(token => {
+            const value = String(token || '').trim();
+            if (value) {
+                this.tokens.add(value);
+            }
+        });
+        this.sync();
+    }
+
+    remove(...tokens) {
+        tokens.forEach(token => this.tokens.delete(String(token || '').trim()));
+        this.sync();
+    }
+
+    contains(token) {
+        return this.tokens.has(String(token || '').trim());
+    }
+
+    toggle(token, force) {
+        const value = String(token || '').trim();
+        if (!value) return false;
+        const shouldAdd = force === undefined ? !this.tokens.has(value) : !!force;
+        if (shouldAdd) {
+            this.tokens.add(value);
+        } else {
+            this.tokens.delete(value);
+        }
+        this.sync();
+        return shouldAdd;
+    }
+
+    sync() {
+        this.owner.className = [...this.tokens].join(' ');
+    }
+}
+
+class MiniElement {
+    constructor(tagName, ownerDocument) {
+        this.tagName = String(tagName || '').toUpperCase();
+        this.nodeName = this.tagName;
+        this.ownerDocument = ownerDocument;
+        this.parentElement = null;
+        this.children = [];
+        this.attributes = {};
+        this.dataset = {};
+        this.style = new MiniStyle();
+        this.classList = new MiniClassList(this);
+        this.className = '';
+        this._textContent = '';
+        this._listeners = new Map();
+        this.value = '';
+        this.checked = false;
+        this.disabled = false;
+        this.clientWidth = 320;
+        this.clientHeight = 180;
+        this.width = 0;
+        this.height = 0;
+    }
+
+    get textContent() {
+        return `${this._textContent}${this.children.map(child => child.textContent).join('')}`;
+    }
+
+    set textContent(value) {
+        this.children.forEach(child => {
+            child.parentElement = null;
+        });
+        this.children = [];
+        this._textContent = String(value ?? '');
+    }
+
+    get innerHTML() {
+        return '';
+    }
+
+    set innerHTML(_value) {
+        this.children.forEach(child => {
+            child.parentElement = null;
+        });
+        this.children = [];
+        this._textContent = '';
+    }
+
+    appendChild(child) {
+        if (!child) return child;
+        if (child.parentElement) {
+            child.parentElement.children = child.parentElement.children.filter(item => item !== child);
+        }
+        child.parentElement = this;
+        this.children.push(child);
+        return child;
+    }
+
+    remove() {
+        if (!this.parentElement) return;
+        this.parentElement.children = this.parentElement.children.filter(child => child !== this);
+        this.parentElement = null;
+    }
+
+    setAttribute(name, value) {
+        const key = String(name || '');
+        const text = String(value ?? '');
+        this.attributes[key] = text;
+        if (key === 'id') {
+            this.id = text;
+        } else if (key === 'class') {
+            this.className = text;
+            this.classList.tokens = new Set(text.split(/\s+/).filter(Boolean));
+        } else if (key.startsWith('data-')) {
+            this.dataset[dataAttributeToDatasetKey(key)] = text;
+        } else if (key === 'aria-label') {
+            this.ariaLabel = text;
+        }
+    }
+
+    getAttribute(name) {
+        const key = String(name || '');
+        if (key.startsWith('data-')) {
+            return this.dataset[dataAttributeToDatasetKey(key)];
+        }
+        return this.attributes[key];
+    }
+
+    addEventListener(type, listener) {
+        const key = String(type || '');
+        if (!this._listeners.has(key)) {
+            this._listeners.set(key, []);
+        }
+        this._listeners.get(key).push(listener);
+    }
+
+    dispatchEvent(event) {
+        const payload = typeof event === 'string' ? { type: event } : { ...(event || {}) };
+        let immediateStopped = false;
+        const originalStopImmediatePropagation = typeof payload.stopImmediatePropagation === 'function'
+            ? payload.stopImmediatePropagation
+            : null;
+        payload.type = payload.type || 'event';
+        payload.target = payload.target || this;
+        payload.currentTarget = this;
+        payload.preventDefault = payload.preventDefault || (() => {});
+        payload.stopPropagation = payload.stopPropagation || (() => {});
+        payload.stopImmediatePropagation = () => {
+            immediateStopped = true;
+            originalStopImmediatePropagation?.();
+        };
+        for (const listener of this._listeners.get(payload.type) || []) {
+            listener(payload);
+            if (immediateStopped) {
+                break;
+            }
+        }
+        return true;
+    }
+
+    focus() {
+        this.ownerDocument.activeElement = this;
+    }
+
+    blur() {
+        if (this.ownerDocument.activeElement === this) {
+            this.ownerDocument.activeElement = null;
+        }
+    }
+
+    getBoundingClientRect() {
+        return {
+            left: 0,
+            top: 0,
+            right: this.clientWidth,
+            bottom: this.clientHeight,
+            width: this.clientWidth,
+            height: this.clientHeight
+        };
+    }
+
+    getContext(type) {
+        if (this.tagName !== 'CANVAS' || String(type || '').toLowerCase() !== '2d') {
+            return null;
+        }
+
+        if (this._canvasContext) {
+            return this._canvasContext;
+        }
+
+        const owner = this.ownerDocument;
+        this._canvasContext = {
+            imageSmoothingEnabled: false,
+            imageSmoothingQuality: 'low',
+            fillStyle: '#000',
+            clearRect: (...args) => {
+                owner.canvasDrawCalls.push({ canvas: this, op: 'clearRect', args });
+            },
+            fillRect: (...args) => {
+                owner.canvasDrawCalls.push({ canvas: this, op: 'fillRect', args });
+            },
+            drawImage: (...args) => {
+                owner.canvasDrawCalls.push({ canvas: this, op: 'drawImage', args });
+            }
+        };
+        return this._canvasContext;
+    }
+
+    querySelector(selector) {
+        return this.querySelectorAll(selector)[0] || null;
+    }
+
+    querySelectorAll(selector) {
+        const matches = [];
+        const visit = element => {
+            for (const child of element.children) {
+                if (matchesSelector(child, selector)) {
+                    matches.push(child);
+                }
+                visit(child);
+            }
+        };
+        visit(this);
+        return matches;
+    }
+
+    closest(selector) {
+        let current = this;
+        while (current) {
+            if (matchesSelector(current, selector)) {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
+
+    contains(node) {
+        let current = node;
+        while (current) {
+            if (current === this) return true;
+            current = current.parentElement;
+        }
+        return false;
+    }
+}
+
+class MiniDocument {
+    constructor() {
+        this.body = new MiniElement('body', this);
+        this.head = new MiniElement('head', this);
+        this.canvasDrawCalls = [];
+        this.activeElement = null;
+    }
+
+    createElement(tagName) {
+        return new MiniElement(tagName, this);
+    }
+
+    getElementById(id) {
+        const target = String(id || '');
+        return [this.head, this.body]
+            .flatMap(root => root.querySelectorAll('*'))
+            .find(element => element.id === target) || null;
+    }
+
+    querySelector(selector) {
+        return this.body.querySelector(selector) || this.head.querySelector(selector);
+    }
+
+    querySelectorAll(selector) {
+        return [
+            ...this.head.querySelectorAll(selector),
+            ...this.body.querySelectorAll(selector)
+        ];
+    }
+}
+
+function matchesSelector(element, selector) {
+    const text = String(selector || '').trim();
+    if (!text || !element) return false;
+    if (text === '*') return true;
+
+    const tagMatch = /^[a-zA-Z][\w-]*/.exec(text);
+    if (tagMatch && element.tagName.toLowerCase() !== tagMatch[0].toLowerCase()) {
+        return false;
+    }
+
+    for (const classMatch of text.matchAll(/\.([\w-]+)/g)) {
+        if (!element.classList.contains(classMatch[1])) {
+            return false;
+        }
+    }
+
+    for (const attrMatch of text.matchAll(/\[([^\]=]+)(?:="([^"]*)")?\]/g)) {
+        const attrName = attrMatch[1];
+        const expected = attrMatch[2];
+        const actual = attrName.startsWith('data-')
+            ? element.dataset[dataAttributeToDatasetKey(attrName)]
+            : element.getAttribute(attrName);
+        if (actual === undefined || actual === null) {
+            return false;
+        }
+        if (expected !== undefined && String(actual) !== expected) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+function readStatusNumber(status, key) {
+    const value = status?.[key];
+    return Number.isFinite(Number(value)) ? Number(value) : null;
+}
+
+function readLoad1(status) {
+    const value = status?.loadavg;
+    return Array.isArray(value) && Number.isFinite(Number(value[0])) ? Number(value[0]) : null;
+}
+
+function projectDevice(device) {
+    const status = device.status || {};
+    const capabilities = device.capabilities || {};
+    const thumbnail = device.latestThumbnail || {};
+    const liveFrame = device.latestLiveFrame || {};
+    const liveStream = device.activeLiveStream || {};
+    const latestTask = device.latestTask || {};
+    const platform = String(status.platform || device.platform || 'unknown');
+
+    return {
+        DeviceId: String(device.deviceId || ''),
+        SessionId: String(device.sessionId || ''),
+        Name: String(device.deviceName || device.hostname || device.deviceId || 'device'),
+        Hostname: String(device.hostname || ''),
+        Platform: platform,
+        Release: String(status.release || ''),
+        Arch: String(device.arch || ''),
+        AgentVersion: String(device.agentVersion || ''),
+        Connected: device.connected === true,
+        ConnectedAt: String(device.connectedAt || ''),
+        DisconnectedAt: String(device.disconnectedAt || ''),
+        LastSeenAt: String(device.lastSeenAt || ''),
+        LastStatusAt: String(device.lastStatusAt || ''),
+        LastDisconnectReason: String(device.lastDisconnectReason || ''),
+        RemoteAddress: String(device.remoteAddress || ''),
+        RemotePort: Number(device.remotePort || 0),
+        UptimeSec: readStatusNumber(status, 'uptimeSec'),
+        UsedMemRatio: readStatusNumber(status, 'usedMemRatio'),
+        Load1: readLoad1(status),
+        StatusEnabled: capabilities.status === true,
+        ThumbnailEnabled: capabilities.thumbnail === true,
+        LiveStreamEnabled: capabilities.liveStream === true,
+        ControlEnabled: capabilities.control === true,
+        ComputerAgentEnabled: capabilities.computerAgent === true || capabilities.taskDispatch === true,
+        AiAssistEnabled: capabilities.aiAssist === true,
+        AiModel: String(capabilities.aiModel || ''),
+        AiProvider: String(capabilities.aiProvider || ''),
+        ThumbnailStreamId: String(thumbnail.streamId || ''),
+        ThumbnailFrameSeq: Number(thumbnail.frameSeq || 0),
+        ThumbnailWidth: Number(thumbnail.width || 0),
+        ThumbnailHeight: Number(thumbnail.height || 0),
+        ThumbnailMimeType: String(thumbnail.mimeType || thumbnail.format || ''),
+        ThumbnailCapturedAt: String(thumbnail.capturedAt || ''),
+        ThumbnailReceivedAt: String(thumbnail.receivedAt || ''),
+        ThumbnailDataUrl: String(thumbnail.dataUrl || ''),
+        LiveStreamActive: liveStream.active === true,
+        LiveStreamId: String(liveStream.streamId || ''),
+        LiveStreamMode: String(liveStream.mode || ''),
+        LiveStreamFps: Number(liveStream.fps || 0),
+        LiveStreamStartedAt: String(liveStream.startedAt || ''),
+        LiveStreamStoppedAt: String(liveStream.stoppedAt || ''),
+        LiveStreamLastFrameAt: String(liveStream.lastFrameAt || ''),
+        LiveStreamFrameSeq: Number(liveStream.lastFrameSeq || 0),
+        LiveFrameStreamId: String(liveFrame.streamId || ''),
+        LiveFrameSeq: Number(liveFrame.frameSeq || 0),
+        LiveFrameWidth: Number(liveFrame.width || 0),
+        LiveFrameHeight: Number(liveFrame.height || 0),
+        LiveFrameMimeType: String(liveFrame.mimeType || liveFrame.format || ''),
+        LiveFrameCapturedAt: String(liveFrame.capturedAt || ''),
+        LiveFrameReceivedAt: String(liveFrame.receivedAt || ''),
+        LiveFrameDataUrl: String(liveFrame.dataUrl || ''),
+        LatestTaskId: String(latestTask.taskId || ''),
+        LatestTaskCommandId: String(latestTask.commandId || ''),
+        LatestTaskTitle: String(latestTask.title || ''),
+        LatestTaskInstructionPreview: String(latestTask.instructionPreview || ''),
+        LatestTaskStatus: String(latestTask.status || ''),
+        LatestTaskApprovalLevel: String(latestTask.approvalLevel || ''),
+        LatestTaskUpdatedAt: String(latestTask.updatedAt || latestTask.completedAt || latestTask.sentAt || ''),
+        LatestTaskError: String(latestTask.error || ''),
+        LatestTaskResultModel: String(latestTask.resultModel || ''),
+        LatestTaskResultResponseId: String(latestTask.resultResponseId || ''),
+        LatestTaskResultSummary: String(latestTask.resultSummary || '')
+    };
+}
+
+async function loadCss3DManager() {
+    const __dirname = path.dirname(fileURLToPath(import.meta.url));
+    const managerPath = path.resolve(__dirname, '../../MindExecution.Shared/wwwroot/js/mind-map-css3d-manager.js');
+    const source = await fs.readFile(managerPath, 'utf8');
+    const document = new MiniDocument();
+    const objectUrlCalls = [];
+    const revokedObjectUrls = [];
+    const imageBitmapCalls = [];
+    const fetchCalls = [];
+    const runtimeTrace = [];
+    const webSocketConnections = [];
+    const webSocketSends = [];
+    const textOverlayInvalidations = [];
+    class SmokeURL extends URL {}
+    SmokeURL.createObjectURL = blob => {
+        objectUrlCalls.push(blob);
+        return `blob:remote-fleet-smoke-${objectUrlCalls.length}`;
+    };
+    SmokeURL.revokeObjectURL = value => {
+        revokedObjectUrls.push(String(value || ''));
+    };
+    class MiniWebSocket {
+        static CONNECTING = 0;
+        static OPEN = 1;
+        static CLOSING = 2;
+        static CLOSED = 3;
+
+        constructor(url) {
+            this.url = String(url || '');
+            this.readyState = MiniWebSocket.CONNECTING;
+            this.binaryType = '';
+            this.sent = [];
+            this.closeCount = 0;
+            webSocketConnections.push(this);
+            setTimeout(() => {
+                if (this.readyState !== MiniWebSocket.CONNECTING) return;
+                this.readyState = MiniWebSocket.OPEN;
+                this.onopen?.({ type: 'open' });
+            }, 0);
+        }
+
+        send(payload) {
+            const text = typeof payload === 'string' ? payload : String(payload || '');
+            this.sent.push(text);
+            webSocketSends.push({ url: this.url, payload: text });
+        }
+
+        close() {
+            if (this.readyState === MiniWebSocket.CLOSED) return;
+            this.closeCount += 1;
+            this.readyState = MiniWebSocket.CLOSED;
+            this.onclose?.({ type: 'close' });
+        }
+    }
+    const context = {
+        console,
+        document,
+        location: {
+            origin: 'http://localhost:5147'
+        },
+        navigator: {
+            clipboard: {
+                writeText: async () => {}
+            }
+        },
+        setInterval: () => 0,
+        clearInterval: () => {},
+        setTimeout,
+        clearTimeout,
+        Date,
+        Math,
+        Number,
+        String,
+        Boolean,
+        Array,
+        Object,
+        JSON,
+        RegExp,
+        Map,
+        Set,
+        WeakMap,
+        Blob,
+        TextDecoder,
+        TextEncoder,
+        requestAnimationFrame: callback => setTimeout(() => callback(Date.now()), 0),
+        cancelAnimationFrame: id => clearTimeout(id),
+        createImageBitmap: async blob => {
+            imageBitmapCalls.push(blob);
+            return {
+                width: 64,
+                height: 36,
+                close() {
+                    this.closed = true;
+                }
+            };
+        },
+        THREE: createThreeStub(),
+        URL: SmokeURL,
+        WebSocket: MiniWebSocket,
+        fetch: async (url, options = {}) => {
+            fetchCalls.push({ url: String(url || ''), options });
+            return {
+                ok: true,
+                status: 200,
+                json: async () => ({
+                    bridgeToken: 'render-smoke-bridge-token',
+                    remoteFrameWsPath: '/api/remote/frames/ws',
+                    remoteInputWsPath: '/api/remote/input/ws'
+                })
+            };
+        },
+        RuntimeTrace: {
+            emit(type, data = {}) {
+                runtimeTrace.push({ type, ...data });
+            }
+        },
+        MindMapTextOverlayV2: {
+            invalidateReadonlySource(module, nodeId, reason) {
+                textOverlayInvalidations.push({ module, nodeId, reason });
+                return true;
+            },
+            invalidateNode(module, nodeId, reason) {
+                textOverlayInvalidations.push({ module, nodeId, reason, fallback: true });
+            }
+        },
+        Promise
+    };
+    context.window = context;
+    context.self = context;
+
+    vm.runInNewContext(source, context, { filename: managerPath });
+    return {
+        manager: context.window.MindMapCss3DManager,
+        document,
+        diagnostics: {
+            objectUrlCalls,
+            revokedObjectUrls,
+            imageBitmapCalls,
+            fetchCalls,
+            runtimeTrace,
+            webSocketConnections,
+            webSocketSends,
+            textOverlayInvalidations
+        }
+    };
+}
+
+function wait(ms = 0) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function encodeRemoteBinaryFrame(metadata, payload = new Uint8Array([0xff, 0xd8, 0xff, 0xd9])) {
+    const metaBytes = new TextEncoder().encode(JSON.stringify(metadata));
+    const payloadBytes = payload instanceof Uint8Array ? payload : new Uint8Array(payload);
+    const buffer = new ArrayBuffer(4 + metaBytes.byteLength + payloadBytes.byteLength);
+    const view = new DataView(buffer);
+    view.setUint32(0, metaBytes.byteLength);
+    const bytes = new Uint8Array(buffer);
+    bytes.set(metaBytes, 4);
+    bytes.set(payloadBytes, 4 + metaBytes.byteLength);
+    return buffer;
+}
+
+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 === nodeId ? 'hosting' : 'other-monitor')
+        : 'inactive';
+    return {
+        id: nodeId,
+        contentType: 'templateLauncher',
+        metadata: {
+            SemanticType: 'RemoteFleetMonitor',
+            RemoteFleetSchemaVersion: 'remote-fleet@1',
+            RemoteFleetViewMode: 'all-devices',
+            RemoteFleetLastRefreshAtUtc: new Date().toISOString(),
+            RemoteFleetHubStatus: 'online',
+            RemoteFleetHubEndpoint: endpoint,
+            RemoteFleetManagerPackage: hubStatus.managerPackage || 'mindexec-ai',
+            RemoteFleetManagerVersion: hubStatus.managerVersion || 'render-smoke-manager',
+            RemoteFleetAgentPackage: '@mindexec/remote',
+            RemoteFleetPairTokenPreview: '<pair-token>',
+            RemoteFleetConnectCommand: `npx @mindexec/remote connect --manager ${endpoint} --pair ${pairToken}`,
+            RemoteFleetDeviceCount: String(devices.length),
+            RemoteFleetConnectedDeviceCount: String(connected),
+            RemoteFleetCanvasPagination: 'none',
+            RemoteFleetHostTargetState: hostTargetState,
+            RemoteFleetHostTargetNodeId: hubStatus.hostTargetNodeId || '',
+            RemoteFleetHostTargetLeaseId: hubStatus.hostTargetLeaseId || '',
+            RemoteFleetHostTargetEndpoint: hubStatus.hostTargetEndpoint || endpoint,
+            RemoteFleetHostTargetActivatedAtUtc: hubStatus.hostTargetActivatedAt || '',
+            RemoteFleetHostTargetUpdatedAtUtc: hubStatus.hostTargetUpdatedAt || '',
+            RemoteFleetHostTargetExpiresAtUtc: hubStatus.hostTargetExpiresAt || '',
+            RemoteFleetDevicesJson: JSON.stringify(devices),
+            RemoteFleetLatestTaskBatchJson: latestTaskBatch ? JSON.stringify(latestTaskBatch) : '',
+            RemoteFleetRecentTaskBatchesJson: JSON.stringify(recentTaskBatches),
+            RemoteFleetLastError: String(lastError || '')
+        }
+    };
+}
+
+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 = nodeId;
+    const shell = document.createElement('div');
+    shell.setAttribute('class', 'template-card__shell template-card__shell--remote-fleet');
+    const header = document.createElement('div');
+    header.setAttribute('class', 'template-card__header template-card__header--remote-fleet');
+    const icon = document.createElement('div');
+    icon.setAttribute('class', 'template-card__icon template-card__icon--remote-fleet');
+    const titleWrap = document.createElement('div');
+    titleWrap.setAttribute('class', 'template-card__title-block');
+    titleWrap.textContent = 'Multi Desktop Monitor';
+    header.appendChild(icon);
+    header.appendChild(titleWrap);
+    const bodyView = document.createElement('div');
+    bodyView.setAttribute('class', 'template-card__remote-fleet-body map-node-remote-fleet__body');
+    bodyView.dataset.nodeId = nodeId;
+    bodyView.dataset.remoteFleetAutoMonitor = 'false';
+    if (focusDeviceId) {
+        bodyView.dataset.remoteFleetFocusDeviceId = focusDeviceId;
+    }
+    shell.appendChild(header);
+    shell.appendChild(bodyView);
+    nodeShell.appendChild(shell);
+    return { nodeShell, bodyView };
+}
+
+function buildDeviceNode(device, hubStatus) {
+    const endpoint = hubStatus.agentEndpoint || '127.0.0.1:5197';
+    return {
+        id: 'remote-device-render-smoke',
+        contentType: 'memo',
+        metadata: {
+            SemanticType: 'RemoteFleetDevice',
+            RemoteFleetSchemaVersion: 'remote-device@1',
+            RemoteFleetViewMode: 'pinned-device',
+            RemoteFleetLastRefreshAtUtc: new Date().toISOString(),
+            RemoteFleetHubStatus: 'online',
+            RemoteFleetHubEndpoint: endpoint,
+            RemoteFleetManagerPackage: hubStatus.managerPackage || 'mindexec-ai',
+            RemoteFleetManagerVersion: hubStatus.managerVersion || 'render-smoke-manager',
+            RemoteFleetAgentPackage: '@mindexec/remote',
+            RemoteFleetPinnedDeviceId: device.DeviceId,
+            RemoteFleetPinnedDeviceJson: JSON.stringify(device),
+            RemoteFleetLastError: ''
+        }
+    };
+}
+
+function createThreeStub() {
+    class Vector3 {
+        constructor(x = 0, y = 0, z = 0) {
+            this.x = x;
+            this.y = y;
+            this.z = z;
+        }
+
+        set(x = 0, y = 0, z = 0) {
+            this.x = x;
+            this.y = y;
+            this.z = z;
+            return this;
+        }
+    }
+
+    class Matrix4 {
+        multiplyMatrices() { return this; }
+    }
+
+    class Frustum {
+        setFromProjectionMatrix() { return this; }
+        intersectsBox() { return true; }
+    }
+
+    class Quaternion {}
+
+    class Box3 {
+        setFromCenterAndSize() { return this; }
+    }
+
+    return { Box3, Frustum, Matrix4, Quaternion, Vector3 };
+}
+
+const hub = createRemoteHub({
+    managerPackage: 'mindexec-ai',
+    managerVersion: 'render-smoke-manager',
+    env: {
+        MINDEXEC_REMOTE_HUB: '1',
+        REMOTE_HUB_HOST: '127.0.0.1',
+        REMOTE_HUB_PORT: '0',
+        REMOTE_HUB_PAIR_TOKEN: 'render-smoke-token'
+    }
+});
+
+try {
+    await hub.start();
+    const seeded = hub.seedSyntheticFleet({
+        count: SYNTHETIC_COUNT,
+        connectedRatio: 0.84,
+        thumbnailRatio: 0.72,
+        aiAssistRatio: 0.42,
+        liveCount: 0
+    });
+    assert.equal(seeded.ok, true);
+    assert.equal(seeded.seeded, SYNTHETIC_COUNT);
+
+    const seededAiTarget = hub.listDevices().find(device =>
+        device.connected && device.capabilities?.taskDispatch && device.capabilities?.aiAssist);
+    assert.ok(seededAiTarget);
+    const renderAiTask = hub.requestAgentTask(seededAiTarget.deviceId, {
+        instruction: 'Synthetic render smoke AI task: report model metadata to the canvas.',
+        title: 'Render smoke AI task',
+        approvalLevel: 'ai-assist',
+        model: 'synthetic-render-ai'
+    });
+    assert.equal(renderAiTask.ok, true);
+
+    const seededLiveTarget = hub.listDevices().find(device =>
+        device.connected && device.capabilities?.liveStream);
+    assert.ok(seededLiveTarget);
+    const renderLive = hub.startLiveStream(seededLiveTarget.deviceId, {
+        streamId: 'render-smoke-live',
+        fps: 20,
+        maxWidth: 960,
+        maxHeight: 540,
+        quality: 60
+    });
+    assert.equal(renderLive.ok, true);
+
+    const rawDevices = hub.listDevices();
+    const devices = rawDevices.map(projectDevice);
+    const connectedCount = devices.filter(device => device.Connected).length;
+    const aiCount = devices.filter(device => device.Connected && device.AiAssistEnabled).length;
+    const focusedDevice = devices.find(device => device.Connected && device.LiveStreamActive)
+        || devices.find(device => device.Connected);
+    assert.ok(focusedDevice);
+    focusedDevice.LatestTaskId = 'render-smoke-timeout-task';
+    focusedDevice.LatestTaskCommandId = 'render-smoke-timeout-command';
+    focusedDevice.LatestTaskTitle = 'Timed out smoke task';
+    focusedDevice.LatestTaskInstructionPreview = 'This synthetic task timed out before the agent replied.';
+    focusedDevice.LatestTaskStatus = 'failed';
+    focusedDevice.LatestTaskApprovalLevel = 'task-only';
+    focusedDevice.LatestTaskUpdatedAt = new Date().toISOString();
+    focusedDevice.LatestTaskError = 'task-timeout';
+    focusedDevice.LatestTaskResultSummary = '';
+    const aiResultDevice = devices.find(device =>
+        device.DeviceId !== focusedDevice.DeviceId
+        && device.Connected);
+    assert.ok(aiResultDevice);
+    aiResultDevice.LatestTaskId = 'render-smoke-overview-ai-task';
+    aiResultDevice.LatestTaskCommandId = 'render-smoke-overview-ai-command';
+    aiResultDevice.LatestTaskTitle = 'Overview AI result';
+    aiResultDevice.LatestTaskStatus = 'completed';
+    aiResultDevice.LatestTaskApprovalLevel = 'ai-assist';
+    aiResultDevice.LatestTaskUpdatedAt = new Date(Date.now() - 1000).toISOString();
+    aiResultDevice.LatestTaskError = '';
+    aiResultDevice.LatestTaskResultModel = 'synthetic-render-ai';
+    aiResultDevice.LatestTaskResultResponseId = 'synthetic-response-overview';
+    aiResultDevice.LatestTaskResultSummary = 'Overview AI result visible in the fleet monitor.';
+    const latestTaskBatch = {
+        batchId: 'render-smoke-batch',
+        title: 'Render smoke batch',
+        instructionPreview: 'Render smoke batch instruction preview.',
+        approvalLevel: 'ai-assist',
+        status: 'running',
+        requestedAt: new Date(Date.now() - 2500).toISOString(),
+        updatedAt: new Date().toISOString(),
+        total: 210,
+        queued: 210,
+        pending: 1,
+        completed: 208,
+        failed: 1,
+        timedOut: 1,
+        results: []
+    };
+    const recentTaskBatches = [
+        latestTaskBatch,
+        {
+            batchId: 'render-smoke-previous-ai-batch',
+            title: 'Previous AI batch',
+            instructionPreview: 'Previous AI batch instruction preview.',
+            approvalLevel: 'ai-assist',
+            status: 'completed',
+            requestedAt: new Date(Date.now() - 180000).toISOString(),
+            updatedAt: new Date(Date.now() - 150000).toISOString(),
+            total: 42,
+            queued: 42,
+            pending: 0,
+            completed: 42,
+            failed: 0,
+            timedOut: 0,
+            results: []
+        }
+    ];
+
+    const { manager, document, diagnostics } = await loadCss3DManager();
+    assert.equal(typeof manager?.renderRemoteFleetMonitorForTest, 'function');
+    assert.equal(typeof manager?.renderRemoteFleetDeviceForTest, 'function');
+    assert.equal(typeof manager?.applyRemoteFleetFramePatchesForTest, 'function');
+    assert.equal(typeof manager?.setModuleForTest, 'function');
+
+    const dotNetCalls = [];
+    const dotNetHelper = {
+        invokeMethodAsync: async (methodName, ...args) => {
+            dotNetCalls.push({ methodName, args });
+            if (methodName === 'DispatchRemoteFleetTaskBatchFromJs') {
+                const targetIds = Array.isArray(args[1]) ? args[1] : [];
+                const failedDeviceId = targetIds[targetIds.length - 1] || 'synthetic-pc-failed';
+                return {
+                    success: true,
+                    total: targetIds.length,
+                    queued: Math.max(0, targetIds.length - 1),
+                    failed: 1,
+                    failedDeviceIds: [failedDeviceId],
+                    failurePreview: `${failedDeviceId}: device-ai-assist-unavailable`
+                };
+            }
+
+            if (methodName === 'DispatchRemoteFleetTaskFromJs') {
+                const useAiAssist = args[3] === true;
+                const total = useAiAssist ? aiCount : connectedCount;
+                return {
+                    success: true,
+                    total,
+                    queued: total,
+                    failed: 0,
+                    approvalLevel: useAiAssist ? 'ai-assist' : 'task-only'
+                };
+            }
+
+            if (methodName === 'SetRemoteFleetHostFromJs') {
+                return {
+                    success: true,
+                    active: args[1] === true,
+                    registryStatus: args[1] === true ? 'local' : 'inactive',
+                    registryReason: args[1] === true ? 'registry-render-smoke' : 'inactive'
+                };
+            }
+
+            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 };
+        }
+    };
+    const moduleRef = {
+        dotNetHelper,
+        nodeObjectsById: new Map(),
+        _visibleIds: new Set(['remote-fleet-render-smoke']),
+        _prevVisibleIds: new Set(['remote-fleet-render-smoke']),
+        _forceUpdateFrames: 0,
+        _textOverlayV2State: {
+            cards: new Map(),
+            passiveCandidateIds: new Set(['remote-fleet-render-smoke']),
+            layer: document.createElement('div')
+        },
+        requestAnimationWake(reason) {
+            this._lastAnimationWakeReason = reason;
+            this._animationWakeCount = Number(this._animationWakeCount || 0) + 1;
+        },
+        isAnimationLoopActive() {
+            return true;
+        }
+    };
+    manager.setModuleForTest(moduleRef);
+
+    const { nodeShell, bodyView } = createRemoteFleetTemplateShell(document, focusedDevice.DeviceId);
+    document.body.appendChild(nodeShell);
+    const monitorNode = buildMonitorNode(devices, hub.getStatus({ includeSecrets: true }), latestTaskBatch, recentTaskBatches);
+    moduleRef.nodeObjectsById.set('remote-fleet-render-smoke', {
+        model: monitorNode,
+        currentType: 'CSS',
+        cssObject: {
+            visible: true,
+            element: nodeShell
+        }
+    });
+    document.body.appendChild(moduleRef._textOverlayV2State.layer);
+
+    manager.renderRemoteFleetMonitorForTest(bodyView, monitorNode);
+    const { nodeShell: mirrorShell, bodyView: mirrorBodyView } = createRemoteFleetTemplateShell(document, focusedDevice.DeviceId);
+    document.body.appendChild(mirrorShell);
+    mirrorBodyView.dataset.remoteFleetDensity = 'cards';
+
+    let cards = bodyView.querySelectorAll('article[data-device-id]');
+    assert.equal(cards.length, connectedCount);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-match-count="true"]'), null);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-search="true"]'), null);
+    assert.equal(bodyView.querySelectorAll('select').length, 0);
+    const deviceGrid = bodyView.querySelector('[data-remote-fleet-device-grid="true"]');
+    assert.ok(deviceGrid);
+    assert.match(deviceGrid.style.cssText, /padding:\s*0 4px;/);
+    const statusFooter = bodyView.querySelector('[data-remote-fleet-status-rail="true"]');
+    assert.ok(statusFooter);
+    const bodyChildOrder = Array.from(bodyView.children).map(child =>
+        Object.keys(child.dataset || {}).join(',') || child.tagName).join('|');
+    assert.ok(bodyChildOrder.endsWith('remoteFleetStatusRail'), bodyChildOrder);
+    assert.ok(statusFooter.style.cssText.includes('flex-direction: row'));
+    assert.ok(statusFooter.style.cssText.includes('justify-content: flex-end'));
+    const sizeControls = statusFooter.querySelector('[data-remote-fleet-size-controls="true"]');
+    assert.ok(sizeControls);
+    assert.equal(sizeControls.querySelector('[data-remote-fleet-action="monitor-size-down"]')?.textContent, '-');
+    assert.equal(sizeControls.querySelector('[data-remote-fleet-action="monitor-size-up"]')?.textContent, '+');
+    assert.match(statusFooter.style.cssText, /box-sizing:\s*border-box;/);
+    assert.equal(statusFooter.querySelectorAll('[data-remote-fleet-status-item]').length, 5);
+    assert.ok(statusFooter.querySelector('[data-remote-fleet-status-item="route"]'));
+    const initialDetailPanel = bodyView.querySelector('[data-remote-fleet-detail-panel="true"]');
+    assert.equal(initialDetailPanel, null);
+    const initialSelectedCard = bodyView.querySelector(`article[data-device-id="${focusedDevice.DeviceId}"]`);
+    assert.ok(initialSelectedCard);
+    assert.equal(initialSelectedCard?.querySelector('[data-remote-fleet-selected-indicator="true"]'), null);
+    assert.equal(bodyView.querySelectorAll('[data-remote-fleet-action="pin-device"]').length, 0);
+    assert.equal(bodyView.querySelectorAll('[data-remote-fleet-action="task-device"]').length, 0);
+    assert.equal(bodyView.querySelectorAll('[data-remote-fleet-action="thumbnail-device"]').length, 0);
+    assert.equal(bodyView.querySelectorAll('[data-remote-fleet-frame-badge="true"]').length, 0);
+    const firstPreview = cards[0]?.querySelector('[data-remote-fleet-device-preview="tile"]');
+    assert.ok(firstPreview);
+    assert.match(cards[0]?.style.cssText || '', /border-radius:\s*0/);
+    assert.match(firstPreview.style.cssText, /border-radius:\s*0/);
+    assert.match(cards[0]?.title || '', /Status:\s*(Connected|Offline)/);
+    assert.match(cards[0]?.title || '', /Seen:/);
+    assert.match(cards[0]?.title || '', /Uptime:/);
+    assert.equal(/\b(Seen|Uptime|Mem|Load)\b/.test(cards[0]?.textContent || ''), false);
+    assert.match(deviceGrid.style.cssText, /minmax\(198px,\s*1fr\)/);
+    sizeControls.querySelector('[data-remote-fleet-action="monitor-size-up"]').dispatchEvent({ type: 'click' });
+    assert.equal(bodyView.dataset.remoteFleetDensity, 'large');
+    assert.match(bodyView.querySelector('[data-remote-fleet-device-grid="true"]')?.style.cssText || '', /minmax\(297px,\s*1fr\)/);
+    assert.equal(mirrorBodyView.dataset.remoteFleetDensity, 'large');
+    assert.match(mirrorBodyView.querySelector('[data-remote-fleet-device-grid="true"]')?.style.cssText || '', /minmax\(297px,\s*1fr\)/);
+    assert.ok(diagnostics.runtimeTrace.some(entry =>
+        entry.type === 'remote.monitor.sizeChanged'
+        && entry.nodeId === 'remote-fleet-render-smoke'
+        && entry.density === 'large'
+        && entry.css3dOnly === true));
+    bodyView.querySelector('[data-remote-fleet-action="monitor-size-down"]').dispatchEvent({ type: 'click' });
+    assert.equal(bodyView.dataset.remoteFleetDensity, 'cards');
+    assert.match(bodyView.querySelector('[data-remote-fleet-device-grid="true"]')?.style.cssText || '', /minmax\(198px,\s*1fr\)/);
+    assert.equal(mirrorBodyView.dataset.remoteFleetDensity, 'cards');
+    assert.match(mirrorBodyView.querySelector('[data-remote-fleet-device-grid="true"]')?.style.cssText || '', /minmax\(198px,\s*1fr\)/);
+    bodyView.querySelector('[data-remote-fleet-action="monitor-size-down"]').dispatchEvent({ type: 'click' });
+    assert.equal(bodyView.dataset.remoteFleetDensity, 'dense');
+    assert.match(bodyView.querySelector('[data-remote-fleet-device-grid="true"]')?.style.cssText || '', /minmax\(132px,\s*1fr\)/);
+    bodyView.querySelector('[data-remote-fleet-action="monitor-size-up"]').dispatchEvent({ type: 'click' });
+    assert.equal(bodyView.dataset.remoteFleetDensity, 'cards');
+    assert.match(bodyView.querySelector('[data-remote-fleet-device-grid="true"]')?.style.cssText || '', /minmax\(198px,\s*1fr\)/);
+    mirrorShell.remove();
+    cards = bodyView.querySelectorAll('article[data-device-id]');
+    const patchTarget = devices.find(device =>
+        device.Connected === true
+        && device.ThumbnailEnabled === true);
+    assert.ok(patchTarget);
+    const patchCard = Array.from(cards).find(card => card.dataset.deviceId === patchTarget.DeviceId);
+    const patchPreview = patchCard?.querySelector('[data-remote-fleet-device-preview="tile"]');
+    assert.ok(patchPreview);
+    const patchKind = String(patchPreview.dataset.remoteFleetFrameKind || '').toLowerCase() === 'live'
+        ? 'live'
+        : 'thumbnail';
+    const patchUrl = `/api/remote/devices/${encodeURIComponent(patchTarget.DeviceId)}/${patchKind}?token=render-smoke-frame&seq=9999`;
+    const patchCount = manager.applyRemoteFleetFramePatchesForTest(bodyView, [{
+        deviceId: patchTarget.DeviceId,
+        kind: patchKind,
+        frameSeq: 9999,
+        frameUrl: patchUrl,
+        receivedAt: new Date().toISOString()
+    }]);
+    assert.equal(patchCount, 1, JSON.stringify({
+        targetDeviceId: patchTarget.DeviceId,
+        previewCount: bodyView.querySelectorAll('[data-remote-fleet-device-preview]').length,
+        previewIds: Array.from(bodyView.querySelectorAll('[data-remote-fleet-device-preview]')).slice(0, 12).map(preview => preview.dataset.deviceId || ''),
+        currentKind: patchPreview.dataset.remoteFleetFrameKind || '',
+        currentSeq: patchPreview.dataset.remoteFleetFrameSeq || '',
+        currentUrl: patchPreview.dataset.remoteFleetFrameUrl || ''
+    }));
+    await wait();
+    assert.equal(patchPreview.dataset.remoteFleetFrameSeq, '9999');
+    assert.equal(patchPreview.dataset.remoteFleetFrameUrl, patchUrl);
+    assert.equal(patchPreview.dataset.remoteFleetPendingFrameUrl || '', '');
+    assert.ok(patchPreview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]'));
+    assert.equal(patchPreview.querySelector('img[data-remote-fleet-frame-image="true"]')?.dataset.remoteFleetFrameUrl, patchUrl);
+    assert.equal(patchPreview.querySelector('[data-remote-fleet-frame-badge="true"]'), null);
+
+    const objectUrlCountBeforeBinary = diagnostics.objectUrlCalls.length;
+    const imageBitmapCountBeforeBinary = diagnostics.imageBitmapCalls.length;
+    const drawCountBeforeBinary = document.canvasDrawCalls.length;
+    const binaryPatchCount = manager.applyRemoteFleetFramePatchesForTest(bodyView, [{
+        deviceId: patchTarget.DeviceId,
+        kind: 'live',
+        frameSeq: 10000,
+        frameUrl: '',
+        streamId: 'render-smoke-binary-live',
+        contentHash: 'render-smoke-binary-live-10000',
+        receivedAt: new Date().toISOString(),
+        _remoteFleetPayloadBlob: new Blob([new Uint8Array([0xff, 0xd8, 0xff, 0xd9])], { type: 'image/jpeg' }),
+        _remoteFleetBinaryFrame: true
+    }]);
+    assert.equal(binaryPatchCount, 1);
+    await wait(20);
+    const binaryCanvas = patchPreview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]');
+    const binaryImage = patchPreview.querySelector('img[data-remote-fleet-frame-image="true"]');
+    assert.equal(patchPreview.dataset.remoteFleetFrameKind, 'live');
+    assert.equal(patchPreview.dataset.remoteFleetFrameSeq, '10000');
+    assert.equal(binaryCanvas?.dataset.remoteFleetFrameSeq, '10000');
+    assert.equal(binaryCanvas?.style.display, 'block');
+    assert.equal(binaryImage?.style.display, 'none');
+    assert.equal(diagnostics.imageBitmapCalls.length, imageBitmapCountBeforeBinary + 1);
+    assert.equal(diagnostics.objectUrlCalls.length, objectUrlCountBeforeBinary);
+    const binaryDrawCalls = document.canvasDrawCalls.slice(drawCountBeforeBinary);
+    assert.ok(
+        binaryDrawCalls.some(call => call.op === 'drawImage'),
+        'expected binary Blob frame to draw directly to canvas');
+    assert.equal(
+        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';
+    liveOverlayCard.dataset.sourceKind = 'live';
+    liveOverlayCard.dataset.liveInteractive = 'true';
+    liveOverlayCard.style.display = 'block';
+    moduleRef._textOverlayV2State.cards.set('selection:remote-fleet-render-smoke', liveOverlayCard);
+    moduleRef._forceUpdateFrames = 0;
+    moduleRef._animationWakeCount = 0;
+    moduleRef._lastAnimationWakeReason = '';
+
+    await wait(20);
+    const liveWs = diagnostics.webSocketConnections[0];
+    assert.ok(liveWs, 'expected MDM render to open the binary frame WebSocket');
+    assert.equal(liveWs.readyState, 1, 'binary frame WebSocket should be open before rerender');
+    const wsCountBeforeRerender = diagnostics.webSocketConnections.length;
+    const wsCloseCountBeforeRerender = liveWs.closeCount;
+    const websocketFrameSeq = 10001;
+    liveWs.onmessage?.({
+        data: new Blob([encodeRemoteBinaryFrame({
+            type: 'remote.frame.binary',
+            deviceId: patchTarget.DeviceId,
+            kind: 'live',
+            frameSeq: websocketFrameSeq,
+            streamId: 'render-smoke-ws-live',
+            contentHash: `render-smoke-ws-live-${websocketFrameSeq}`,
+            mimeType: 'image/jpeg',
+            width: 64,
+            height: 36,
+            capturedAt: new Date().toISOString(),
+            receivedAt: new Date().toISOString()
+        })])
+    });
+    await wait(30);
+    assert.equal(
+        patchPreview.dataset.remoteFleetFrameSeq,
+        String(websocketFrameSeq),
+        JSON.stringify(diagnostics.runtimeTrace.slice(-12)));
+    await wait(10);
+    assert.ok(
+        Number(moduleRef._forceUpdateFrames || 0) >= 2,
+        'binary live frame commits must wake the passive MDM CSS3D frame loop');
+    assert.equal(moduleRef._lastAnimationWakeReason, 'remote-live-css3d-frame');
+    assert.ok(
+        diagnostics.runtimeTrace.some(event => event.type === 'remote.frame.css3dWake'),
+        'binary live frame commits must trace the MDM CSS3D wake path');
+
+    manager.renderRemoteFleetMonitorForTest(bodyView, buildMonitorNode(devices, hub.getStatus({ includeSecrets: true }), latestTaskBatch, recentTaskBatches));
+    await wait(30);
+    assert.equal(
+        liveWs.closeCount,
+        wsCloseCountBeforeRerender,
+        'MDM rerender must not close the active binary frame WebSocket');
+    assert.equal(
+        diagnostics.webSocketConnections.length,
+        wsCountBeforeRerender,
+        'MDM rerender must reuse the active binary frame WebSocket instead of opening a replacement');
+    const rerenderedPatchPreview = bodyView
+        .querySelector(`article[data-device-id="${patchTarget.DeviceId}"]`)
+        ?.querySelector('[data-remote-fleet-device-preview="tile"]');
+    assert.ok(rerenderedPatchPreview);
+    assert.equal(rerenderedPatchPreview.dataset.remoteFleetFrameSeq, String(websocketFrameSeq));
+    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.type === 'remote.frame.surfaceCachePrimed')
+        && event.nodeId === otherBoardNodeId));
+    otherBoardShell.remove();
+
+    const controlCard = bodyView.querySelector(`article[data-device-id="${patchTarget.DeviceId}"]`);
+    assert.ok(controlCard);
+    controlCard.dispatchEvent({ type: 'dblclick', button: 0 });
+    await wait(30);
+    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
+        && device.DeviceId !== focusedDevice.DeviceId);
+    assert.ok(alternateDevice);
+    const alternateCard = Array.from(cards).find(card => card.dataset.deviceId === alternateDevice.DeviceId);
+    assert.ok(alternateCard);
+    alternateCard.dispatchEvent({ type: 'click' });
+    assert.equal(bodyView.dataset.remoteFleetSelectedDeviceId, alternateDevice.DeviceId);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-detail-panel="true"]'), null);
+    const selectedAfterClick = bodyView.querySelector(`article[data-device-id="${alternateDevice.DeviceId}"]`);
+    assert.ok(selectedAfterClick);
+    assert.equal(selectedAfterClick?.querySelector('[data-remote-fleet-selected-indicator="true"]'), null);
+    const livePanel = bodyView.querySelector('[data-remote-fleet-live-panel="true"]');
+    assert.equal(livePanel, null);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-action="task-visible"]'), null);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-action="task-connected"]'), null);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-task-input="true"]'), null);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-ai-toggle="true"]'), null);
+    assert.equal(bodyView.textContent.includes('all devices, no paging'), false);
+    assert.equal(bodyView.textContent.includes('Host: Inactive'), false);
+    assert.equal(bodyView.textContent.includes('No screen'), false);
+    assert.equal(bodyView.textContent.includes('mindexec-ai'), false);
+    assert.equal(nodeShell.querySelector('[data-remote-fleet-host-indicator="true"]')?.dataset.remoteFleetHostActive, 'false');
+    const { nodeShell: hostMirrorShell, bodyView: hostMirrorBodyView } = createRemoteFleetTemplateShell(document, focusedDevice.DeviceId);
+    document.body.appendChild(hostMirrorShell);
+    manager.renderRemoteFleetMonitorForTest(hostMirrorBodyView, monitorNode);
+    assert.equal(hostMirrorShell.querySelector('[data-remote-fleet-host-indicator="true"]')?.dataset.remoteFleetHostActive, 'false');
+    const initialHostButton = nodeShell.querySelector('[data-remote-fleet-action="set-host"]');
+    assert.equal(initialHostButton?.textContent, 'Set Host');
+    initialHostButton.dispatchEvent({ type: 'click' });
+    await wait();
+    const setHostCall = dotNetCalls.find(call => call.methodName === 'SetRemoteFleetHostFromJs');
+    assert.ok(setHostCall);
+    assert.equal(setHostCall.args[0], 'remote-fleet-render-smoke');
+    assert.equal(setHostCall.args[1], true);
+    const hostFeedback = bodyView.querySelector('[data-remote-fleet-task-feedback="true"]');
+    assert.equal(hostFeedback?.style.display, 'none');
+    assert.equal(hostFeedback?.textContent, '');
+    assert.equal(nodeShell.querySelector('[data-remote-fleet-host-indicator="true"]')?.dataset.remoteFleetHostActive, 'true');
+    assert.equal(hostMirrorShell.querySelector('[data-remote-fleet-host-indicator="true"]')?.dataset.remoteFleetHostActive, 'true');
+    assert.ok(diagnostics.runtimeTrace.some(entry =>
+        entry.type === 'remote.monitor.projectionInvalidated'
+        && entry.nodeId === 'remote-fleet-render-smoke'
+        && entry.reason === 'host'
+        && entry.css3dOnly === true));
+    hostMirrorShell.remove();
+
+    hub.setHostTarget({
+        nodeId: 'remote-fleet-render-smoke',
+        enabled: true,
+        leaseMs: 30000
+    });
+    manager.renderRemoteFleetMonitorForTest(bodyView, buildMonitorNode(devices, hub.getStatus({ includeSecrets: true }), latestTaskBatch, recentTaskBatches));
+    assert.equal(bodyView.textContent.includes('Host: Active'), false);
+    assert.equal(nodeShell.querySelector('[data-remote-fleet-host-indicator="true"]')?.dataset.remoteFleetHostActive, 'true');
+    assert.equal(nodeShell.querySelector('[data-remote-fleet-action="set-host"]')?.textContent, 'Set Host');
+    assert.equal(nodeShell.querySelector('[data-remote-fleet-action="stop-host"]'), null);
+    hub.setHostTarget({
+        nodeId: 'remote-fleet-render-smoke',
+        enabled: false
+    });
+
+    assert.equal(bodyView.querySelector('[data-remote-fleet-live-panel="true"]'), null);
+    assert.equal(bodyView.querySelector('code'), null);
+    assert.equal(bodyView.textContent.includes('npx @mindexec/remote connect'), false);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-action="copy-command"]'), null);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-action="refresh"]'), null);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-auto-toggle="true"]'), null);
+    assert.equal(bodyView.textContent.includes('synthetic-render-ai'), false);
+    assert.equal(bodyView.textContent.includes('Task timed out waiting for the agent response.'), false);
+    const batchSummary = bodyView.querySelector('[data-remote-fleet-task-batch="true"]');
+    assert.equal(batchSummary, null);
+    const batchHistory = bodyView.querySelector('[data-remote-fleet-task-history="true"]');
+    assert.equal(batchHistory, null);
+    const resultPanel = bodyView.querySelector('[data-remote-fleet-task-results="true"]');
+    assert.equal(resultPanel, null);
+    assert.ok(devices.some(device => /^synthetic-response-/.test(device.LatestTaskResultResponseId)));
+    await wait(20);
+    const liveStartCalls = dotNetCalls
+        .filter(call => call.methodName === 'StartRemoteFleetLiveStreamFromJs');
+    const subscribeMessages = diagnostics.webSocketSends
+        .map(send => {
+            try {
+                return JSON.parse(send.payload);
+            } catch {
+                return null;
+            }
+        })
+        .filter(Boolean);
+    const autoLiveSubscribe = subscribeMessages.find(message =>
+        message.type === 'subscribe'
+        && message.nodeId === 'remote-fleet-render-smoke'
+        && message.autoStartLive === true);
+    assert.ok(diagnostics.fetchCalls.some(call => call.url.includes('/api/status?remoteFrames=ws')));
+    assert.ok(diagnostics.webSocketConnections.length >= 1, 'expected MDM render to open binary frame WebSocket');
+    assert.ok(autoLiveSubscribe, 'expected MDM render to subscribe with autoStartLive over WebSocket');
+    assert.equal(autoLiveSubscribe.fps, 12);
+    assert.equal(autoLiveSubscribe.maxWidth, 960);
+    assert.equal(autoLiveSubscribe.maxHeight, 540);
+    assert.equal(autoLiveSubscribe.quality, 60);
+    assert.ok(autoLiveSubscribe.deviceIds.length > 1, 'expected visible connected devices in WS subscription');
+    assert.ok(diagnostics.runtimeTrace.some(event => event.type === 'remote.live.wsAutoStartRequested'));
+    assert.equal(liveStartCalls.length, 0, 'WebSocket live path must not call DotNet live-start fallback');
+    await wait(320);
+    assert.ok(dotNetCalls.some(call => call.methodName === 'RefreshRemoteFleetMonitorNodeFromJs'));
+    assert.equal(bodyView.dataset.remoteFleetTaskFollowKey, 'render-smoke-batch');
+    assert.ok(Number(bodyView.dataset.remoteFleetTaskFollowTicks || '0') >= 1);
+
+    const feedback = bodyView.querySelector('[data-remote-fleet-task-feedback="true"]');
+    assert.ok(feedback);
+
+    assert.equal(bodyView.querySelector('[data-remote-fleet-ai-toggle="true"]'), null);
+    assert.equal(dotNetCalls.some(call =>
+        call.methodName === 'DispatchRemoteFleetTaskBatchFromJs'
+        || call.methodName === 'DispatchRemoteFleetTaskFromJs'), false);
+
+    const { nodeShell: emptyShell, bodyView: emptyBody } = createRemoteFleetTemplateShell(document);
+    document.body.appendChild(emptyShell);
+    manager.renderRemoteFleetMonitorForTest(emptyBody, buildMonitorNode([], hub.getStatus({ includeSecrets: true })));
+    const emptyScreenShell = emptyBody.querySelector('[data-remote-fleet-empty-screens="true"]');
+    assert.ok(emptyScreenShell);
+    assert.match(emptyScreenShell.style.cssText, /padding:\s*2px 4px 6px 4px;/);
+    const emptyScreens = emptyBody.querySelectorAll('[data-remote-fleet-empty-screen="true"]');
+    assert.ok(emptyScreens.length >= 12, `expected empty monitor to fill space, got ${emptyScreens.length}`);
+    assert.notEqual(emptyScreens.length, 6);
+    assert.match(emptyScreens[0].style.cssText, /border-radius:\s*0/);
+    assert.ok(Array.from(emptyBody.children).map(child =>
+        Object.keys(child.dataset || {}).join(',') || child.tagName).join('|').endsWith('remoteFleetStatusRail'));
+    assert.equal(emptyBody.textContent.includes('No devices connected yet.'), false);
+    assert.equal(emptyBody.textContent.includes('Select a screen'), false);
+    assert.equal(emptyBody.textContent.includes('No screen'), false);
+    assert.equal(emptyBody.textContent.includes('Endpoint 127.0.0.1'), false);
+
+    const oneDevice = devices.find(device => device.Connected === true);
+    assert.ok(oneDevice);
+    const { nodeShell: oneShell, bodyView: oneBody } = createRemoteFleetTemplateShell(document);
+    document.body.appendChild(oneShell);
+    manager.renderRemoteFleetMonitorForTest(oneBody, buildMonitorNode([oneDevice], hub.getStatus({ includeSecrets: true })));
+    const oneCards = oneBody.querySelectorAll('article[data-device-id]');
+    assert.equal(oneCards.length, 1);
+    const onePreview = oneCards[0]?.querySelector('[data-remote-fleet-device-preview="tile"]');
+    assert.ok(onePreview);
+    assert.match(oneCards[0]?.style.cssText || '', /border-radius:\s*0/);
+    assert.match(onePreview.style.cssText, /border-radius:\s*0/);
+    assert.match(oneCards[0]?.title || '', /Status:\s*Connected/);
+    assert.match(oneCards[0]?.title || '', /Seen:/);
+    assert.match(oneCards[0]?.title || '', /Uptime:/);
+    const oneFillers = oneBody.querySelectorAll('[data-remote-fleet-empty-screen="true"]');
+    assert.ok(oneFillers.length > 0, 'single connected monitor wall should keep blank screen placeholders');
+    assert.match(oneFillers[0].style.cssText, /border-radius:\s*0/);
+
+    const { nodeShell: errorShell, bodyView: errorBody } = createRemoteFleetTemplateShell(document);
+    document.body.appendChild(errorShell);
+    manager.renderRemoteFleetMonitorForTest(errorBody, buildMonitorNode([], hub.getStatus({ includeSecrets: true }), null, [], 'RemoteHub is unavailable. Start LocalBridge and retry.'));
+    const errorFooter = errorBody.querySelector('[data-remote-fleet-status-rail="true"]');
+    const footerError = errorFooter?.querySelector('[data-remote-fleet-status-error="true"]');
+    assert.ok(errorFooter);
+    assert.ok(footerError);
+    assert.ok(Array.from(errorBody.children).map(child =>
+        Object.keys(child.dataset || {}).join(',') || child.tagName).join('|').endsWith('remoteFleetStatusRail'));
+    assert.equal(footerError.textContent.includes('RemoteHub is unavailable'), true);
+    assert.equal(Array.from(errorBody.children).some(child =>
+        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));
+    assert.ok(deviceBody.querySelector('[data-remote-fleet-device-toolbar="true"]'));
+    assert.ok(deviceBody.querySelector('[data-remote-fleet-device-actions="true"]'));
+    assert.ok(deviceBody.querySelector('[data-remote-fleet-device-task-panel="true"]'));
+    const deviceStatusBar = deviceBody.querySelector('[data-remote-fleet-device-status-bar="true"]')
+        || deviceBody.querySelector('[data-remote-fleet-device-statusbar="true"]');
+    assert.ok(deviceStatusBar);
+    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(
+        deviceControlStage.parentElement,
+        deviceBody,
+        'RemoteFleetDevice should spend its main body area on the control screen');
+    assert.equal(deviceBody.querySelectorAll('[data-remote-fleet-status-card], [data-remote-fleet-stat]').length, 0);
+    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.'));
+    assert.ok(deviceStatusBar.title.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();
+    oneShell.remove();
+    errorShell.remove();
+    deviceBody.remove();
+    await wait(2200);
+
+    console.log(`RemoteFleet render smoke OK (${SYNTHETIC_COUNT} synthetic devices, ${connectedCount} connected, ${aiCount} AI-ready)`);
+} finally {
+    await hub.close();
+}