@mindexec/cli 0.2.39 → 0.2.41

package/package.json

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

package/remote-hub.js

@@ -9,6 +9,8 @@ const DEFAULT_AGENT_TASK_TIMEOUT_MS = 120000;
 const MAX_LINE_CHARS = 4 * 1024 * 1024;
 const MAX_THUMBNAIL_BASE64_CHARS = 3 * 1024 * 1024;
 const MAX_STREAM_BASE64_CHARS = 3 * 1024 * 1024;
+const MAX_THUMBNAIL_BINARY_BYTES = Math.floor(MAX_THUMBNAIL_BASE64_CHARS * 3 / 4);
+const MAX_STREAM_BINARY_BYTES = Math.floor(MAX_STREAM_BASE64_CHARS * 3 / 4);
 const MAX_AGENT_TASK_CHARS = 4000;
 const MAX_AGENT_TASK_RESULT_CHARS = 3000;
 const RECENT_TASK_LIMIT = 12;
@@ -1075,6 +1077,161 @@ export function createRemoteHub(options = {}) {
         return task;
     }
 
+    function normalizeFrameByteLength(framePayload, frameData = '') {
+        if (Buffer.isBuffer(framePayload)) {
+            return framePayload.length;
+        }
+
+        return Math.floor(String(frameData || '').length * 3 / 4);
+    }
+
+    function buildFrameDataUrl(framePayload, frameData, mimeType) {
+        if (Buffer.isBuffer(framePayload)) {
+            return `data:${mimeType};base64,${framePayload.toString('base64')}`;
+        }
+
+        return String(frameData || '').startsWith('data:')
+            ? String(frameData || '')
+            : `data:${mimeType};base64,${frameData}`;
+    }
+
+    function applyThumbnailFrame(device, message, framePayload, transport = 'json-base64') {
+        const frameData = Buffer.isBuffer(framePayload)
+            ? ''
+            : safeString(framePayload, MAX_THUMBNAIL_BASE64_CHARS + 1);
+        const frameSeq = Number(message.frameSeq);
+        const byteLength = normalizeFrameByteLength(framePayload, frameData);
+        if ((!Buffer.isBuffer(framePayload) && !frameData)
+            || byteLength > MAX_THUMBNAIL_BINARY_BYTES
+            || !Number.isFinite(frameSeq)) {
+            device.counters.thumbnailFramesDropped += 1;
+            emitRemoteEvent('RemoteFrameDropped', device, {
+                reason: 'invalid-thumbnail-frame',
+                frameSeq: Number.isFinite(frameSeq) ? frameSeq : null,
+                transport
+            });
+            return false;
+        }
+
+        const mimeType = safeString(message.mimeType || message.format || 'image/jpeg', 80) || 'image/jpeg';
+        const capturedAt = safeString(message.capturedAt, 80) || device.lastSeenAt;
+        device.latestThumbnail = {
+            streamId: safeString(message.streamId, 128) || 'thumbnail',
+            frameSeq,
+            commandId: safeString(message.commandId, 128),
+            width: Number.isFinite(Number(message.width)) ? Number(message.width) : 0,
+            height: Number.isFinite(Number(message.height)) ? Number(message.height) : 0,
+            mimeType,
+            format: mimeType,
+            capturedAt,
+            receivedAt: device.lastSeenAt,
+            byteLength,
+            transport,
+            dataUrl: buildFrameDataUrl(framePayload, frameData, mimeType)
+        };
+        device.counters.thumbnailFramesReceived += 1;
+        emitRemoteEvent('RemoteFrameReceived', device, {
+            streamId: device.latestThumbnail.streamId,
+            frameSeq,
+            width: device.latestThumbnail.width,
+            height: device.latestThumbnail.height,
+            transport
+        });
+        return true;
+    }
+
+    function applyLiveFrame(device, message, framePayload, transport = 'json-base64') {
+        const frameData = Buffer.isBuffer(framePayload)
+            ? ''
+            : safeString(framePayload, MAX_STREAM_BASE64_CHARS + 1);
+        const frameSeq = Number(message.frameSeq);
+        const streamId = safeString(message.streamId, 128) || 'live';
+        if (!device.activeLiveStream?.active || device.activeLiveStream.streamId !== streamId) {
+            device.counters.liveFramesDropped += 1;
+            emitRemoteEvent('RemoteFrameDropped', device, {
+                reason: 'stale-live-stream-frame',
+                streamId,
+                frameSeq: Number.isFinite(frameSeq) ? frameSeq : null,
+                transport
+            });
+            return false;
+        }
+
+        const byteLength = normalizeFrameByteLength(framePayload, frameData);
+        if ((!Buffer.isBuffer(framePayload) && !frameData)
+            || byteLength > MAX_STREAM_BINARY_BYTES
+            || !Number.isFinite(frameSeq)) {
+            device.counters.liveFramesDropped += 1;
+            emitRemoteEvent('RemoteFrameDropped', device, {
+                reason: 'invalid-live-frame',
+                streamId,
+                frameSeq: Number.isFinite(frameSeq) ? frameSeq : null,
+                transport
+            });
+            return false;
+        }
+
+        const mimeType = safeString(message.mimeType || message.format || 'image/jpeg', 80) || 'image/jpeg';
+        const capturedAt = safeString(message.capturedAt, 80) || device.lastSeenAt;
+        device.latestLiveFrame = {
+            streamId,
+            frameSeq,
+            commandId: safeString(message.commandId, 128),
+            width: Number.isFinite(Number(message.width)) ? Number(message.width) : 0,
+            height: Number.isFinite(Number(message.height)) ? Number(message.height) : 0,
+            mimeType,
+            format: mimeType,
+            mode: safeString(message.mode || device.activeLiveStream.mode || 'remote-fast', 80),
+            fps: Number.isFinite(Number(message.fps)) ? Number(message.fps) : device.activeLiveStream.fps,
+            capturedAt,
+            receivedAt: device.lastSeenAt,
+            byteLength,
+            transport,
+            dataUrl: buildFrameDataUrl(framePayload, frameData, mimeType)
+        };
+        device.activeLiveStream.lastFrameAt = device.lastSeenAt;
+        device.activeLiveStream.lastFrameSeq = frameSeq;
+        device.activeLiveStream.framesReceived = (device.activeLiveStream.framesReceived || 0) + 1;
+        device.counters.liveFramesReceived += 1;
+        emitRemoteEvent('RemoteFrameReceived', device, {
+            streamId,
+            frameSeq,
+            width: device.latestLiveFrame.width,
+            height: device.latestLiveFrame.height,
+            mode: device.latestLiveFrame.mode,
+            transport
+        });
+        return true;
+    }
+
+    function handleAgentBinaryFrame(socket, state, header, framePayload) {
+        if (!state.authenticated || !state.device) {
+            writeJsonLine(socket, { type: 'error', error: 'hello-required' });
+            socket.destroy();
+            return;
+        }
+
+        const device = state.device;
+        device.counters.messagesReceived += 1;
+        device.lastSeenAt = new Date().toISOString();
+
+        const frameKind = safeString(header.frameKind || header.kind || header.frameType || '', 40).toLowerCase();
+        if (frameKind === 'thumbnail' || header.type === 'thumbnail.binary') {
+            applyThumbnailFrame(device, header, framePayload, 'binary');
+            return;
+        }
+
+        if (frameKind === 'stream' || frameKind === 'live' || header.type === 'stream.binary') {
+            applyLiveFrame(device, header, framePayload, 'binary');
+            return;
+        }
+
+        emitRemoteEvent('RemoteAgentMessageIgnored', device, {
+            messageType: safeString(header.type, 80),
+            frameKind
+        });
+    }
+
     function handleAgentMessage(socket, state, message) {
         if (!message || typeof message !== 'object') {
             return;
@@ -1139,97 +1296,11 @@ export function createRemoteHub(options = {}) {
                 });
                 break;
             case 'thumbnail.frame': {
-                const frameData = safeString(message.data, MAX_THUMBNAIL_BASE64_CHARS + 1);
-                const frameSeq = Number(message.frameSeq);
-                if (!frameData || frameData.length > MAX_THUMBNAIL_BASE64_CHARS || !Number.isFinite(frameSeq)) {
-                    device.counters.thumbnailFramesDropped += 1;
-                    emitRemoteEvent('RemoteFrameDropped', device, {
-                        reason: 'invalid-thumbnail-frame',
-                        frameSeq: Number.isFinite(frameSeq) ? frameSeq : null
-                    });
-                    break;
-                }
-
-                const mimeType = safeString(message.mimeType || message.format || 'image/jpeg', 80) || 'image/jpeg';
-                const capturedAt = safeString(message.capturedAt, 80) || device.lastSeenAt;
-                device.latestThumbnail = {
-                    streamId: safeString(message.streamId, 128) || 'thumbnail',
-                    frameSeq,
-                    commandId: safeString(message.commandId, 128),
-                    width: Number.isFinite(Number(message.width)) ? Number(message.width) : 0,
-                    height: Number.isFinite(Number(message.height)) ? Number(message.height) : 0,
-                    mimeType,
-                    format: mimeType,
-                    capturedAt,
-                    receivedAt: device.lastSeenAt,
-                    byteLength: Math.floor(frameData.length * 3 / 4),
-                    dataUrl: frameData.startsWith('data:')
-                        ? frameData
-                        : `data:${mimeType};base64,${frameData}`
-                };
-                device.counters.thumbnailFramesReceived += 1;
-                emitRemoteEvent('RemoteFrameReceived', device, {
-                    streamId: device.latestThumbnail.streamId,
-                    frameSeq,
-                    width: device.latestThumbnail.width,
-                    height: device.latestThumbnail.height
-                });
+                applyThumbnailFrame(device, message, message.data, 'json-base64');
                 break;
             }
             case 'stream.frame': {
-                const frameData = safeString(message.data, MAX_STREAM_BASE64_CHARS + 1);
-                const frameSeq = Number(message.frameSeq);
-                const streamId = safeString(message.streamId, 128) || 'live';
-                if (!device.activeLiveStream?.active || device.activeLiveStream.streamId !== streamId) {
-                    device.counters.liveFramesDropped += 1;
-                    emitRemoteEvent('RemoteFrameDropped', device, {
-                        reason: 'stale-live-stream-frame',
-                        streamId,
-                        frameSeq: Number.isFinite(frameSeq) ? frameSeq : null
-                    });
-                    break;
-                }
-
-                if (!frameData || frameData.length > MAX_STREAM_BASE64_CHARS || !Number.isFinite(frameSeq)) {
-                    device.counters.liveFramesDropped += 1;
-                    emitRemoteEvent('RemoteFrameDropped', device, {
-                        reason: 'invalid-live-frame',
-                        streamId,
-                        frameSeq: Number.isFinite(frameSeq) ? frameSeq : null
-                    });
-                    break;
-                }
-
-                const mimeType = safeString(message.mimeType || message.format || 'image/jpeg', 80) || 'image/jpeg';
-                const capturedAt = safeString(message.capturedAt, 80) || device.lastSeenAt;
-                device.latestLiveFrame = {
-                    streamId,
-                    frameSeq,
-                    commandId: safeString(message.commandId, 128),
-                    width: Number.isFinite(Number(message.width)) ? Number(message.width) : 0,
-                    height: Number.isFinite(Number(message.height)) ? Number(message.height) : 0,
-                    mimeType,
-                    format: mimeType,
-                    mode: safeString(message.mode || device.activeLiveStream.mode || 'remote-fast', 80),
-                    fps: Number.isFinite(Number(message.fps)) ? Number(message.fps) : device.activeLiveStream.fps,
-                    capturedAt,
-                    receivedAt: device.lastSeenAt,
-                    byteLength: Math.floor(frameData.length * 3 / 4),
-                    dataUrl: frameData.startsWith('data:')
-                        ? frameData
-                        : `data:${mimeType};base64,${frameData}`
-                };
-                device.activeLiveStream.lastFrameAt = device.lastSeenAt;
-                device.activeLiveStream.lastFrameSeq = frameSeq;
-                device.activeLiveStream.framesReceived = (device.activeLiveStream.framesReceived || 0) + 1;
-                device.counters.liveFramesReceived += 1;
-                emitRemoteEvent('RemoteFrameReceived', device, {
-                    streamId,
-                    frameSeq,
-                    width: device.latestLiveFrame.width,
-                    height: device.latestLiveFrame.height,
-                    mode: device.latestLiveFrame.mode
-                });
+                applyLiveFrame(device, message, message.data, 'json-base64');
                 break;
             }
             default:
@@ -1242,14 +1313,14 @@ export function createRemoteHub(options = {}) {
 
     function handleSocket(socket) {
         allSockets.add(socket);
-        socket.setEncoding('utf8');
         socket.setNoDelay(true);
         socket.setKeepAlive(true, heartbeatMs);
 
         const state = {
             authenticated: false,
             device: null,
-            buffer: ''
+            buffer: Buffer.alloc(0),
+            pendingBinaryFrame: null
         };
 
         const helloTimer = setTimeout(() => {
@@ -1260,27 +1331,63 @@ export function createRemoteHub(options = {}) {
         }, 10000);
 
         socket.on('data', chunk => {
-            state.buffer += chunk;
-            if (state.buffer.length > MAX_LINE_CHARS) {
-                writeJsonLine(socket, { type: 'error', error: 'message-too-large' });
-                socket.destroy();
-                return;
-            }
+            const incoming = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
+            state.buffer = state.buffer.length > 0
+                ? Buffer.concat([state.buffer, incoming])
+                : incoming;
+
+            while (!socket.destroyed) {
+                if (state.pendingBinaryFrame) {
+                    const { header, byteLength } = state.pendingBinaryFrame;
+                    if (state.buffer.length < byteLength) {
+                        return;
+                    }
+
+                    const framePayload = state.buffer.subarray(0, byteLength);
+                    state.buffer = state.buffer.subarray(byteLength);
+                    state.pendingBinaryFrame = null;
+                    handleAgentBinaryFrame(socket, state, header, framePayload);
+                    continue;
+                }
+
+                const newlineIndex = state.buffer.indexOf(0x0a);
+                if (newlineIndex < 0) {
+                    if (state.buffer.length > MAX_LINE_CHARS) {
+                        writeJsonLine(socket, { type: 'error', error: 'message-too-large' });
+                        socket.destroy();
+                    }
+                    return;
+                }
 
-            let newlineIndex = state.buffer.indexOf('\n');
-            while (newlineIndex >= 0) {
-                const line = state.buffer.slice(0, newlineIndex);
-                state.buffer = state.buffer.slice(newlineIndex + 1);
+                const lineBuffer = state.buffer.subarray(0, newlineIndex);
+                state.buffer = state.buffer.subarray(newlineIndex + 1);
 
                 try {
-                    const message = parseJsonLine(line);
+                    const message = parseJsonLine(lineBuffer.toString('utf8'));
+                    if (message?.type === 'frame.binary') {
+                        const frameKind = safeString(message.frameKind || message.kind || message.frameType, 40).toLowerCase();
+                        const maxBytes = frameKind === 'thumbnail'
+                            ? MAX_THUMBNAIL_BINARY_BYTES
+                            : MAX_STREAM_BINARY_BYTES;
+                        const byteLength = Number(message.byteLength ?? message.payloadBytes ?? message.dataLength);
+                        if (!Number.isFinite(byteLength) || byteLength < 1 || byteLength > maxBytes) {
+                            writeJsonLine(socket, { type: 'error', error: 'invalid-binary-frame' });
+                            logWarn('remote', 'invalid binary frame header from agent.');
+                            continue;
+                        }
+
+                        state.pendingBinaryFrame = {
+                            header: message,
+                            byteLength: Math.floor(byteLength)
+                        };
+                        continue;
+                    }
+
                     handleAgentMessage(socket, state, message);
                 } catch (err) {
                     writeJsonLine(socket, { type: 'error', error: 'invalid-json' });
                     logWarn('remote', `invalid agent message: ${err?.message || err}`);
                 }
-
-                newlineIndex = state.buffer.indexOf('\n');
             }
         });
 

package/scripts/remote-http-smoke.mjs

@@ -5,10 +5,13 @@ import net from 'node:net';
 import { spawn } from 'node:child_process';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { readFileSync } from 'node:fs';
 
 const BRIDGE_TOKEN = 'remote-http-smoke-token';
 const PAIR_TOKEN = 'remote-http-pair-token';
 const SYNTHETIC_COUNT = Number(process.env.REMOTE_HTTP_SMOKE_COUNT || 500);
+const LOCAL_BRIDGE_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const LOCAL_BRIDGE_PACKAGE = JSON.parse(readFileSync(path.join(LOCAL_BRIDGE_DIR, 'package.json'), 'utf8'));
 
 function wait(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
@@ -155,7 +158,7 @@ async function runSyntheticEnabledSmoke() {
     assert.equal(status.started, true);
     assert.equal(status.port, remoteHubPort);
     assert.equal(status.managerPackage, '@mindexec/cli');
-    assert.equal(status.managerVersion, '0.2.25');
+    assert.equal(status.managerVersion, LOCAL_BRIDGE_PACKAGE.version);
     assert.equal(status.agentPackage, '@mindexec/remote');
     assert.equal(status.canvasPagination, 'none');
     assert.equal(status.canvasDeviceListMode, 'all-devices');

package/scripts/remote-hub-smoke.mjs

@@ -8,6 +8,16 @@ function writeJsonLine(socket, payload) {
     socket.write(`${JSON.stringify(payload)}\n`);
 }
 
+function writeBinaryFrame(socket, header, payload) {
+    const framePayload = Buffer.isBuffer(payload) ? payload : Buffer.from(payload);
+    socket.write(`${JSON.stringify({
+        ...header,
+        type: 'frame.binary',
+        byteLength: framePayload.length
+    })}\n`);
+    socket.write(framePayload);
+}
+
 function wait(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
@@ -34,6 +44,7 @@ const hub = createRemoteHub({
         REMOTE_HUB_TASK_TIMEOUT_MS: '120'
     }
 });
+const smokePngFrame = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAADElEQVR42mP8z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC', 'base64');
 
 try {
     await hub.start();
@@ -115,6 +126,33 @@ try {
     assert.equal(thumbnailDevice.latestThumbnail.streamId, 'smoke-thumb');
     assert.equal(thumbnailDevice.counters.thumbnailFramesReceived, 1);
 
+    const binaryThumbnailCommand = hub.requestThumbnail('smoke-device', {
+        streamId: 'smoke-thumb-binary',
+        maxWidth: 320,
+        maxHeight: 180,
+        quality: 50
+    });
+    assert.equal(binaryThumbnailCommand.ok, true);
+    writeBinaryFrame(socket, {
+        frameKind: 'thumbnail',
+        commandId: binaryThumbnailCommand.commandId,
+        streamId: 'smoke-thumb-binary',
+        frameSeq: 4,
+        width: 2,
+        height: 1,
+        mimeType: 'image/png',
+        capturedAt: new Date().toISOString()
+    }, smokePngFrame);
+
+    const binaryThumbnailDevice = await waitFor(() => {
+        const current = hub.listDevices();
+        return current[0]?.latestThumbnail?.frameSeq === 4 ? current[0] : null;
+    });
+    assert.equal(binaryThumbnailDevice.latestThumbnail.streamId, 'smoke-thumb-binary');
+    assert.equal(binaryThumbnailDevice.latestThumbnail.transport, 'binary');
+    assert.equal(binaryThumbnailDevice.latestThumbnail.byteLength, smokePngFrame.length);
+    assert.equal(binaryThumbnailDevice.counters.thumbnailFramesReceived, 2);
+
     const liveCommand = hub.startLiveStream('smoke-device', {
         streamId: 'smoke-live',
         fps: 5,
@@ -145,6 +183,28 @@ try {
     assert.equal(liveDevice.latestLiveFrame.mode, 'remote-fast');
     assert.equal(liveDevice.counters.liveFramesReceived, 1);
 
+    writeBinaryFrame(socket, {
+        frameKind: 'stream',
+        commandId: liveCommand.commandId,
+        streamId: 'smoke-live',
+        frameSeq: 5,
+        width: 2,
+        height: 1,
+        mimeType: 'image/png',
+        mode: 'remote-fast',
+        fps: 5,
+        capturedAt: new Date().toISOString()
+    }, smokePngFrame);
+
+    const binaryLiveDevice = await waitFor(() => {
+        const current = hub.listDevices();
+        return current[0]?.latestLiveFrame?.frameSeq === 5 ? current[0] : null;
+    });
+    assert.equal(binaryLiveDevice.latestLiveFrame.streamId, 'smoke-live');
+    assert.equal(binaryLiveDevice.latestLiveFrame.transport, 'binary');
+    assert.equal(binaryLiveDevice.latestLiveFrame.byteLength, smokePngFrame.length);
+    assert.equal(binaryLiveDevice.counters.liveFramesReceived, 2);
+
     const staleFrameBefore = liveDevice.counters.liveFramesDropped;
     writeJsonLine(socket, {
         type: 'stream.frame',

package/wwwroot/_content/MindExecution.Shared/js/mind-map-core.js

@@ -5,7 +5,7 @@
     const DEBUG = false;
     const FPS_DEBUG = false;
     const FRAME_PERF_DEBUG = false;
-const MINDMAP_CORE_BUILD_ID = '20260613-template-current-canvas-v213';
+const MINDMAP_CORE_BUILD_ID = '20260613-remote-monitor-gap-v214';
     const CanvasPhase = Object.freeze({
         Booting: 'booting',
         BoardFileLoading: 'board-file-loading',

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

@@ -3405,6 +3405,9 @@
     const REMOTE_FLEET_SEMANTIC_TYPE = 'RemoteFleetMonitor';
     const REMOTE_FLEET_DEVICE_SEMANTIC_TYPE = 'RemoteFleetDevice';
     const REMOTE_FLEET_CENTER_NUDGE_PX = 4;
+    const REMOTE_FLEET_MONITOR_TILE_GAP_PX = 8;
+    const REMOTE_FLEET_EMPTY_SCREEN_MIN_WIDTH = 132;
+    const REMOTE_FLEET_EMPTY_SCREEN_MIN_HEIGHT = 72;
     const AUTOMATION_NODE_KIND_METADATA_KEY = 'AutomationNodeKind';
     const AUTOMATION_NODE_LABEL_METADATA_KEY = 'AutomationNodeLabel';
     const AUTOMATION_NODE_DESCRIPTION_METADATA_KEY = 'AutomationNodeDescription';
@@ -12475,8 +12478,8 @@
         const height = Number(nodeModel?.height ?? nodeModel?.Height ?? 620);
         const usableWidth = Number.isFinite(width) ? Math.max(360, width - 44) : 916;
         const usableHeight = Number.isFinite(height) ? Math.max(260, height - 128) : 492;
-        const columns = Math.max(3, Math.floor(usableWidth / 142));
-        const rows = Math.max(3, Math.ceil(usableHeight / 88));
+        const columns = Math.max(3, Math.floor((usableWidth + REMOTE_FLEET_MONITOR_TILE_GAP_PX) / (REMOTE_FLEET_EMPTY_SCREEN_MIN_WIDTH + REMOTE_FLEET_MONITOR_TILE_GAP_PX)));
+        const rows = Math.max(3, Math.ceil((usableHeight + REMOTE_FLEET_MONITOR_TILE_GAP_PX) / (REMOTE_FLEET_EMPTY_SCREEN_MIN_HEIGHT + REMOTE_FLEET_MONITOR_TILE_GAP_PX)));
         return Math.max(12, Math.min(80, columns * rows));
     }
 
@@ -12486,19 +12489,20 @@
         shell.style.cssText = `
             flex: 1 1 auto;
             min-height: 0;
-            overflow: hidden;
+            overflow-y: auto;
+            overflow-x: hidden;
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
-            grid-auto-rows: minmax(72px, auto);
+            grid-template-columns: repeat(auto-fill, minmax(${REMOTE_FLEET_EMPTY_SCREEN_MIN_WIDTH}px, 1fr));
+            grid-auto-rows: max-content;
             align-content: start;
+            align-items: start;
             justify-content: center;
             justify-items: stretch;
             align-self: center;
             width: calc(100% - ${REMOTE_FLEET_CENTER_NUDGE_PX * 2}px);
             max-width: 100%;
             transform: translateX(${REMOTE_FLEET_CENTER_NUDGE_PX}px);
-            column-gap: 8px;
-            row-gap: 8px;
+            gap: ${REMOTE_FLEET_MONITOR_TILE_GAP_PX}px;
             box-sizing: border-box;
             padding: 2px 4px 6px 4px;
         `;
@@ -12508,8 +12512,10 @@
             const screen = document.createElement('div');
             screen.dataset.remoteFleetEmptyScreen = 'true';
             screen.style.cssText = `
+                width: 100%;
+                height: auto;
                 aspect-ratio: 16 / 9;
-                min-height: 72px;
+                min-height: ${REMOTE_FLEET_EMPTY_SCREEN_MIN_HEIGHT}px;
                 box-sizing: border-box;
                 border-radius: 8px;
                 border: 1px solid rgba(203, 213, 225, 0.72);
@@ -14287,7 +14293,7 @@
 
         const tileMinWidth = densityState === 'dense' ? 104 : 132;
         const tileMinHeight = densityState === 'dense' ? 66 : 84;
-        const tileGap = 8;
+        const tileGap = REMOTE_FLEET_MONITOR_TILE_GAP_PX;
 
         const monitorWorkspace = document.createElement('div');
         monitorWorkspace.dataset.remoteFleetMonitorWorkspace = 'true';
@@ -14310,17 +14316,17 @@
             overflow-x: hidden;
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(${tileMinWidth}px, 1fr));
-            grid-auto-rows: minmax(${tileMinHeight}px, auto);
+            grid-auto-rows: max-content;
             grid-auto-flow: row;
             align-content: start;
+            align-items: start;
             justify-content: center;
             justify-items: stretch;
             justify-self: center;
             width: calc(100% - ${REMOTE_FLEET_CENTER_NUDGE_PX * 2}px);
             max-width: 100%;
             transform: translateX(${REMOTE_FLEET_CENTER_NUDGE_PX}px);
-            column-gap: ${tileGap}px;
-            row-gap: ${tileGap}px;
+            gap: ${tileGap}px;
             box-sizing: border-box;
             padding: 0 4px;
         `;
@@ -14415,6 +14421,8 @@
                     display: flex;
                     align-items: stretch;
                     min-width: 0;
+                    width: 100%;
+                    height: auto;
                     min-height: ${tileMinHeight}px;
                     aspect-ratio: 16 / 9;
                     box-sizing: border-box;

package/wwwroot/index.html

@@ -558,7 +558,7 @@
             }
 
             const base = '_content/MindExecution.Shared/js/';
-        const scriptVersion = '20260613-template-current-canvas-v507';
+        const scriptVersion = '20260613-remote-monitor-gap-v508';
             const scriptUrl = (script) => `${base}${script}?v=${scriptVersion}`;
             console.log(`[Script Loader] Shared JS version: ${scriptVersion}`);
             const criticalScripts = [

package/wwwroot/service-worker-assets.js

@@ -1,5 +1,5 @@
 self.assetsManifest = {
-    "version":  "yVKOGKeq",
+    "version":  "P5rJ7sPB",
     "assets":  [
                    {
                        "hash":  "sha256-+CSYMcqLNTsq3VnH11jgYyOCCdxvHzL74CBmo4sCmMU=",
@@ -78,7 +78,7 @@
                        "url":  "_content/MindExecution.Shared/js/marked.min.js"
                    },
                    {
-                       "hash":  "sha256-XaxBBTGHhZrW3oi5I1lPG/e1TW5seriQfInR9zw4AsI=",
+                       "hash":  "sha256-tS2NkdGFK7jWKDH5NTbXqmJ+vgtdIuHB7akcpMxvC84=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js"
                    },
                    {
@@ -86,7 +86,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js.backup"
                    },
                    {
-                       "hash":  "sha256-qup69YZeiW9fSkNG+pViWzQ8eT5NNxuzX7ofwnc0vvI=",
+                       "hash":  "sha256-jrzXaQSlY2BHJW062PzZuylbAEYe02+uQrMQyJt7FJA=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-css3d-manager.js"
                    },
                    {
@@ -834,7 +834,7 @@
                        "url":  "image-manifest.json"
                    },
                    {
-                       "hash":  "sha256-lpSXakW1b+qoRoSLyzdSZY5hQCckBnnUmCJGa5EDWdQ=",
+                       "hash":  "sha256-bjvQNTq7IFWd435tpUl5xUScla/vHBE+JHSWSDH464c=",
                        "url":  "index.html"
                    },
                    {

package/wwwroot/service-worker.js

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