@mindexec/cli 0.2.477 → 0.2.478

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

@@ -1,1350 +1,1350 @@
-#!/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 hotPathModulePath = path.resolve(__dirname, '../../MindExecution.Shared/wwwroot/js/mind-map-css3d-hotpath.js');
-    const managerPath = path.resolve(__dirname, '../../MindExecution.Shared/wwwroot/js/mind-map-css3d-manager.js');
-    const hotPathSource = await fs.readFile(hotPathModulePath, 'utf8');
-    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 });
-            }
-        },
-        MindExecRemoteCodecs: {
-            async decodeH264Frame(canvas, frame, onFrame) {
-                onFrame?.(canvas, frame);
-                return true;
-            }
-        },
-        Promise
-    };
-    context.window = context;
-    context.self = context;
-
-    vm.runInNewContext(hotPathSource, context, { filename: hotPathModulePath });
-    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));
-}
-
-async function waitFor(predicate, timeoutMs = 500, intervalMs = 10) {
-    const deadline = Date.now() + Math.max(1, Number(timeoutMs || 500));
-    while (Date.now() < deadline) {
-        if (predicate()) return true;
-        await wait(intervalMs);
-    }
-    return predicate();
-}
-
-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:5198';
-    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/cli',
-            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:5198';
-    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/cli',
-            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/cli',
-    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.ok(bodyView.querySelector('[data-remote-fleet-match-count="true"]'));
-    assert.ok(bodyView.querySelector('[data-remote-fleet-search="true"]'));
-    assert.equal(bodyView.querySelectorAll('select').length, 4);
-    assert.ok(bodyView.querySelector('[data-remote-fleet-task-composer="visible"]'));
-    assert.ok(bodyView.querySelector('[data-remote-fleet-task-input="true"]'));
-    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);
-    assert.notEqual(patchPreview.dataset.remoteFleetFrameKind, 'live');
-    const patchKind = '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 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');
-    assert.equal(addControlNodeCall, undefined, 'MDM thumbnails must not create an expanded device 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.ok(bodyView.querySelector('[data-remote-fleet-action="task-selected"]'));
-    assert.ok(bodyView.querySelector('[data-remote-fleet-action="task-connected"]'));
-    assert.ok(bodyView.querySelector('[data-remote-fleet-task-input="true"]'));
-    assert.ok(bodyView.querySelector('[data-remote-fleet-ai-toggle="true"]'));
-    const selectedTaskInput = bodyView.querySelector('[data-remote-fleet-task-input="true"]');
-    const selectedTaskButton = bodyView.querySelector('[data-remote-fleet-action="task-selected"]');
-    selectedTaskInput.value = 'Inspect Git status and report the result.';
-    selectedTaskButton.dispatchEvent({ type: 'click' });
-    await wait(20);
-    const selectedTaskCall = dotNetCalls.find(call =>
-        call.methodName === 'DispatchRemoteFleetTaskFromJs'
-        && call.args[0] === 'remote-fleet-render-smoke'
-        && call.args[1] === alternateDevice.DeviceId);
-    assert.ok(selectedTaskCall, 'selected thumbnail must target its agent command');
-    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/cli'), 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'), true);
-    assert.equal(bodyView.textContent.includes('Task timed out waiting for the agent response.'), true);
-    const batchSummary = bodyView.querySelector('[data-remote-fleet-task-batch="true"]');
-    assert.ok(batchSummary);
-    const batchHistory = bodyView.querySelector('[data-remote-fleet-task-history="true"]');
-    assert.ok(batchHistory);
-    const resultPanel = bodyView.querySelector('[data-remote-fleet-task-results="true"]');
-    assert.ok(resultPanel);
-    assert.ok(devices.some(device => /^synthetic-response-/.test(device.LatestTaskResultResponseId)));
-    await wait(20);
-    const liveStartCalls = dotNetCalls
-        .filter(call => call.methodName === 'StartRemoteFleetLiveStreamFromJs');
-    assert.equal(liveStartCalls.length, 0, 'thumbnail-only MDM must not start live streams');
-    assert.equal(
-        diagnostics.webSocketConnections.some(connection =>
-            String(connection?.url || '').includes('/api/remote/atlas/ws')
-            || String(connection?.url || '').includes('/api/remote/frames/ws')),
-        false,
-        'thumbnail-only MDM must not open live frame WebSockets');
-    assert.equal(
-        diagnostics.fetchCalls.some(call => call.url.includes('/api/status?remoteFrames=ws')),
-        false,
-        'thumbnail-only MDM must not initialize live-frame transport');
-    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.ok(bodyView.querySelector('[data-remote-fleet-ai-toggle="true"]'));
-    assert.ok(dotNetCalls.some(call =>
-        call.methodName === 'DispatchRemoteFleetTaskFromJs'
-        && call.args[1] === alternateDevice.DeviceId));
-
-    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 === 2
-            && message.mode === 'mode2-lzo'
-            && message.streamPurpose === 'wall'
-            && Array.isArray(message.deviceIds)
-            && message.deviceIds.includes(focusedDevice.DeviceId));
-    assert.ok(deviceControlSubscribe, 'Remote workstation should subscribe to a 2fps view-only observation stream');
-    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'));
-    assert.equal(inputWsSends.length, 0, 'Remote workstation must remain view-only and send no pointer or keyboard input');
-    assert.equal(
-        dotNetCalls.filter(call => call.methodName === 'SendRemoteFleetInputFromJs').length,
-        0,
-        'View-only workstation must not use the DotNet input fallback');
-    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();
-}
+#!/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 hotPathModulePath = path.resolve(__dirname, '../../MindExecution.Shared/wwwroot/js/mind-map-css3d-hotpath.js');
+    const managerPath = path.resolve(__dirname, '../../MindExecution.Shared/wwwroot/js/mind-map-css3d-manager.js');
+    const hotPathSource = await fs.readFile(hotPathModulePath, 'utf8');
+    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 });
+            }
+        },
+        MindExecRemoteCodecs: {
+            async decodeH264Frame(canvas, frame, onFrame) {
+                onFrame?.(canvas, frame);
+                return true;
+            }
+        },
+        Promise
+    };
+    context.window = context;
+    context.self = context;
+
+    vm.runInNewContext(hotPathSource, context, { filename: hotPathModulePath });
+    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));
+}
+
+async function waitFor(predicate, timeoutMs = 500, intervalMs = 10) {
+    const deadline = Date.now() + Math.max(1, Number(timeoutMs || 500));
+    while (Date.now() < deadline) {
+        if (predicate()) return true;
+        await wait(intervalMs);
+    }
+    return predicate();
+}
+
+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:5198';
+    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/cli',
+            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:5198';
+    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/cli',
+            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/cli',
+    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.ok(bodyView.querySelector('[data-remote-fleet-match-count="true"]'));
+    assert.ok(bodyView.querySelector('[data-remote-fleet-search="true"]'));
+    assert.equal(bodyView.querySelectorAll('select').length, 4);
+    assert.ok(bodyView.querySelector('[data-remote-fleet-task-composer="visible"]'));
+    assert.ok(bodyView.querySelector('[data-remote-fleet-task-input="true"]'));
+    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);
+    assert.notEqual(patchPreview.dataset.remoteFleetFrameKind, 'live');
+    const patchKind = '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 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');
+    assert.equal(addControlNodeCall, undefined, 'MDM thumbnails must not create an expanded device 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.ok(bodyView.querySelector('[data-remote-fleet-action="task-selected"]'));
+    assert.ok(bodyView.querySelector('[data-remote-fleet-action="task-connected"]'));
+    assert.ok(bodyView.querySelector('[data-remote-fleet-task-input="true"]'));
+    assert.ok(bodyView.querySelector('[data-remote-fleet-ai-toggle="true"]'));
+    const selectedTaskInput = bodyView.querySelector('[data-remote-fleet-task-input="true"]');
+    const selectedTaskButton = bodyView.querySelector('[data-remote-fleet-action="task-selected"]');
+    selectedTaskInput.value = 'Inspect Git status and report the result.';
+    selectedTaskButton.dispatchEvent({ type: 'click' });
+    await wait(20);
+    const selectedTaskCall = dotNetCalls.find(call =>
+        call.methodName === 'DispatchRemoteFleetTaskFromJs'
+        && call.args[0] === 'remote-fleet-render-smoke'
+        && call.args[1] === alternateDevice.DeviceId);
+    assert.ok(selectedTaskCall, 'selected thumbnail must target its agent command');
+    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/cli'), 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'), true);
+    assert.equal(bodyView.textContent.includes('Task timed out waiting for the agent response.'), true);
+    const batchSummary = bodyView.querySelector('[data-remote-fleet-task-batch="true"]');
+    assert.ok(batchSummary);
+    const batchHistory = bodyView.querySelector('[data-remote-fleet-task-history="true"]');
+    assert.ok(batchHistory);
+    const resultPanel = bodyView.querySelector('[data-remote-fleet-task-results="true"]');
+    assert.ok(resultPanel);
+    assert.ok(devices.some(device => /^synthetic-response-/.test(device.LatestTaskResultResponseId)));
+    await wait(20);
+    const liveStartCalls = dotNetCalls
+        .filter(call => call.methodName === 'StartRemoteFleetLiveStreamFromJs');
+    assert.equal(liveStartCalls.length, 0, 'thumbnail-only MDM must not start live streams');
+    assert.equal(
+        diagnostics.webSocketConnections.some(connection =>
+            String(connection?.url || '').includes('/api/remote/atlas/ws')
+            || String(connection?.url || '').includes('/api/remote/frames/ws')),
+        false,
+        'thumbnail-only MDM must not open live frame WebSockets');
+    assert.equal(
+        diagnostics.fetchCalls.some(call => call.url.includes('/api/status?remoteFrames=ws')),
+        false,
+        'thumbnail-only MDM must not initialize live-frame transport');
+    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.ok(bodyView.querySelector('[data-remote-fleet-ai-toggle="true"]'));
+    assert.ok(dotNetCalls.some(call =>
+        call.methodName === 'DispatchRemoteFleetTaskFromJs'
+        && call.args[1] === alternateDevice.DeviceId));
+
+    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 === 2
+            && message.mode === 'mode2-lzo'
+            && message.streamPurpose === 'wall'
+            && Array.isArray(message.deviceIds)
+            && message.deviceIds.includes(focusedDevice.DeviceId));
+    assert.ok(deviceControlSubscribe, 'Remote workstation should subscribe to a 2fps view-only observation stream');
+    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'));
+    assert.equal(inputWsSends.length, 0, 'Remote workstation must remain view-only and send no pointer or keyboard input');
+    assert.equal(
+        dotNetCalls.filter(call => call.methodName === 'SendRemoteFleetInputFromJs').length,
+        0,
+        'View-only workstation must not use the DotNet input fallback');
+    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();
+}