@mindexec/cli 0.2.25 → 0.2.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindexec/cli",
-  "version": "0.2.25",
+  "version": "0.2.26",
   "description": "MindExec local runtime and bridge CLI",
   "main": "server.js",
   "type": "module",
@@ -20,11 +20,11 @@
   "scripts": {
     "start": "node launch-bridge.cjs",
     "dev": "node launch-bridge.cjs --watch",
-    "test:syntax": "node --check server.js && node --check remote-hub.js && node --check codex-runtime.js && node --check launch-bridge.cjs && node --check port-guard.cjs && node --check scripts/setup-tree-sitter-grammars.mjs && node --check scripts/remote-hub-smoke.mjs && node --check scripts/remote-hub-scale-smoke.mjs && node --check scripts/remote-fleet-render-smoke.mjs && node --check scripts/remote-http-smoke.mjs",
-    "test:remote": "node scripts/remote-hub-smoke.mjs",
-    "test:remote:scale": "node scripts/remote-hub-scale-smoke.mjs",
-    "test:remote:render": "node scripts/remote-fleet-render-smoke.mjs",
-    "test:remote:http": "node scripts/remote-http-smoke.mjs",
+    "test:syntax": "node --check server.js && node --check remote-hub.js && node --check codex-runtime.js && node --check launch-bridge.cjs && node --check port-guard.cjs && node --check scripts/setup-tree-sitter-grammars.mjs && node --check scripts/remote-hub-smoke.mjs && node --check scripts/remote-hub-scale-smoke.mjs && node --check scripts/remote-fleet-render-smoke.mjs && node --check scripts/remote-http-smoke.mjs",
+    "test:remote": "node scripts/remote-hub-smoke.mjs",
+    "test:remote:scale": "node scripts/remote-hub-scale-smoke.mjs",
+    "test:remote:render": "node scripts/remote-fleet-render-smoke.mjs",
+    "test:remote:http": "node scripts/remote-http-smoke.mjs",
     "pack:dry": "npm pack --dry-run",
     "setup:grammars": "node scripts/setup-tree-sitter-grammars.mjs",
     "postinstall": "npm run setup:grammars"

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

@@ -557,7 +557,6 @@ try {
     const rawDevices = hub.listDevices();
     const devices = rawDevices.map(projectDevice);
     const connectedCount = devices.filter(device => device.Connected).length;
-    const offlineCount = devices.length - connectedCount;
     const aiCount = devices.filter(device => device.Connected && device.AiAssistEnabled).length;
     const focusedDevice = devices.find(device => device.Connected && device.LiveStreamActive)
         || devices.find(device => device.Connected);
@@ -667,16 +666,34 @@ try {
     };
     manager.setModuleForTest({ dotNetHelper });
 
+    const nodeShell = document.createElement('div');
+    nodeShell.setAttribute('class', 'map-node-remote-fleet map-node-memo');
+    const header = document.createElement('div');
+    header.setAttribute('class', 'map-node-memo__header');
+    const iconWrap = document.createElement('div');
+    iconWrap.setAttribute('class', 'map-node-memo__icon-wrap');
+    const iconButton = document.createElement('button');
+    iconButton.setAttribute('class', 'map-node-memo__icon-button');
+    iconWrap.appendChild(iconButton);
+    const titleWrap = document.createElement('div');
+    titleWrap.setAttribute('class', 'map-node-memo__title-wrap');
+    titleWrap.textContent = 'Remote Fleet Monitor';
+    header.appendChild(iconWrap);
+    header.appendChild(titleWrap);
     const bodyView = document.createElement('div');
     bodyView.dataset.remoteFleetAutoMonitor = 'false';
     bodyView.dataset.remoteFleetFocusDeviceId = focusedDevice.DeviceId;
-    document.body.appendChild(bodyView);
+    nodeShell.appendChild(header);
+    nodeShell.appendChild(bodyView);
+    document.body.appendChild(nodeShell);
 
     manager.renderRemoteFleetMonitorForTest(bodyView, buildMonitorNode(devices, hub.getStatus({ includeSecrets: true }), latestTaskBatch, recentTaskBatches));
 
     let cards = bodyView.querySelectorAll('article[data-device-id]');
     assert.equal(cards.length, SYNTHETIC_COUNT);
-    assert.equal(bodyView.querySelector('[data-remote-fleet-match-count="true"]')?.textContent, `${SYNTHETIC_COUNT}/${SYNTHETIC_COUNT}`);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-match-count="true"]'), null);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-search="true"]'), null);
+    assert.equal(bodyView.querySelectorAll('select').length, 0);
     assert.ok(bodyView.querySelector('[data-remote-fleet-device-grid="true"]'));
     const initialDetailPanel = bodyView.querySelector('[data-remote-fleet-detail-panel="true"]');
     assert.equal(initialDetailPanel?.dataset.deviceId, focusedDevice.DeviceId);
@@ -702,9 +719,12 @@ try {
     assert.equal(bodyView.querySelector('[data-remote-fleet-action="task-connected"]'), null);
     assert.equal(bodyView.querySelector('[data-remote-fleet-task-input="true"]'), null);
     assert.equal(bodyView.querySelector('[data-remote-fleet-ai-toggle="true"]'), null);
-    assert.ok(bodyView.textContent.includes('all devices, no paging'));
-    assert.equal(bodyView.querySelector('[data-remote-fleet-host-state="true"]')?.textContent.includes('Host: Inactive'), true);
-    const initialHostButton = bodyView.querySelector('[data-remote-fleet-action="set-host"]');
+    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 initialHostButton = nodeShell.querySelector('[data-remote-fleet-action="set-host"]');
     assert.equal(initialHostButton?.textContent, 'Set Host');
     initialHostButton.dispatchEvent({ type: 'click' });
     await wait();
@@ -719,9 +739,10 @@ try {
         leaseMs: 30000
     });
     manager.renderRemoteFleetMonitorForTest(bodyView, buildMonitorNode(devices, hub.getStatus({ includeSecrets: true }), latestTaskBatch, recentTaskBatches));
-    assert.equal(bodyView.querySelector('[data-remote-fleet-host-state="true"]')?.textContent.includes('Host: Active'), true);
-    assert.equal(bodyView.querySelector('[data-remote-fleet-action="set-host"]')?.textContent, 'Hosting');
-    const stopHostButton = bodyView.querySelector('[data-remote-fleet-action="stop-host"]');
+    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');
+    const stopHostButton = nodeShell.querySelector('[data-remote-fleet-action="stop-host"]');
     assert.ok(stopHostButton);
     const stopHostStart = dotNetCalls.length;
     stopHostButton.dispatchEvent({ type: 'click' });
@@ -733,7 +754,6 @@ try {
     assert.equal(stopHostCall.args[0], 'remote-fleet-render-smoke');
     assert.equal(stopHostCall.args[1], false);
 
-    assert.match(bodyView.querySelector('[data-remote-fleet-manager-version="true"]')?.textContent || '', /^@mindexec\/cli render-smoke-manager - 127\.0\.0\.1:\d+$/);
     assert.ok(livePanel?.textContent.includes('RemoteFast 20 fps'), livePanel?.textContent || bodyView.textContent);
     assert.equal(bodyView.querySelector('code'), null);
     assert.equal(bodyView.textContent.includes('npx @mindexec/remote connect'), false);
@@ -761,49 +781,31 @@ try {
     assert.equal(bodyView.dataset.remoteFleetTaskFollowKey, 'render-smoke-batch');
     assert.ok(Number(bodyView.dataset.remoteFleetTaskFollowTicks || '0') >= 1);
 
-    const searchInput = bodyView.querySelector('[data-remote-fleet-search="true"]');
-    searchInput.value = 'synthetic pc 0001';
-    searchInput.dispatchEvent({ type: 'input' });
-    cards = bodyView.querySelectorAll('article[data-device-id]');
-    assert.equal(cards.filter(card => card.style.display !== 'none').length, 1);
-    assert.equal(bodyView.querySelector('[data-remote-fleet-match-count="true"]')?.textContent, `1/${SYNTHETIC_COUNT}`);
-
-    const selects = bodyView.querySelectorAll('select');
-    assert.equal(selects.length, 4);
-    const [filterSelect, , groupSelect] = selects;
-    searchInput.value = '';
-    searchInput.dispatchEvent({ type: 'input' });
-    filterSelect.value = 'offline';
-    filterSelect.dispatchEvent({ type: 'change' });
-    assert.equal(bodyView.querySelector('[data-remote-fleet-match-count="true"]')?.textContent, `${offlineCount}/${SYNTHETIC_COUNT}`);
-
-    filterSelect.value = 'ai';
-    filterSelect.dispatchEvent({ type: 'change' });
-    assert.equal(bodyView.querySelector('[data-remote-fleet-match-count="true"]')?.textContent, `${aiCount}/${SYNTHETIC_COUNT}`);
-
-    filterSelect.value = 'all';
-    filterSelect.dispatchEvent({ type: 'change' });
-    groupSelect.value = 'status';
-    groupSelect.dispatchEvent({ type: 'change' });
-    assert.equal(bodyView.dataset.remoteFleetGroup, 'status');
-    assert.ok(bodyView.querySelectorAll('[data-remote-fleet-group-header="true"]').length >= 2);
-    assert.equal(bodyView.querySelectorAll('article[data-device-id]').length, SYNTHETIC_COUNT);
-
     const feedback = bodyView.querySelector('[data-remote-fleet-task-feedback="true"]');
     assert.ok(feedback);
-    assert.equal(feedback.style.display, 'none');
 
-    const activeSelects = bodyView.querySelectorAll('select');
-    assert.equal(activeSelects.length, 4);
-    const [aiFilterSelect] = activeSelects;
     assert.equal(bodyView.querySelector('[data-remote-fleet-ai-toggle="true"]'), null);
-    aiFilterSelect.value = 'ai';
-    aiFilterSelect.dispatchEvent({ type: 'change' });
-    assert.equal(bodyView.querySelector('[data-remote-fleet-match-count="true"]')?.textContent, `${aiCount}/${SYNTHETIC_COUNT}`);
     assert.equal(dotNetCalls.some(call =>
         call.methodName === 'DispatchRemoteFleetTaskBatchFromJs'
         || call.methodName === 'DispatchRemoteFleetTaskFromJs'), false);
 
+    const emptyShell = document.createElement('div');
+    emptyShell.setAttribute('class', 'map-node-remote-fleet map-node-memo');
+    const emptyHeader = document.createElement('div');
+    emptyHeader.setAttribute('class', 'map-node-memo__header');
+    emptyHeader.appendChild(document.createElement('div'));
+    emptyHeader.appendChild(document.createElement('div'));
+    const emptyBody = document.createElement('div');
+    emptyShell.appendChild(emptyHeader);
+    emptyShell.appendChild(emptyBody);
+    document.body.appendChild(emptyShell);
+    manager.renderRemoteFleetMonitorForTest(emptyBody, buildMonitorNode([], hub.getStatus({ includeSecrets: true })));
+    assert.equal(emptyBody.querySelectorAll('[data-remote-fleet-empty-screen="true"]').length, 6);
+    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 deviceBody = document.createElement('div');
     document.body.appendChild(deviceBody);
     manager.renderRemoteFleetDeviceForTest(deviceBody, buildDeviceNode(focusedDevice, hub.getStatus()));

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

@@ -3551,6 +3551,7 @@
         { key: 'decision', iconClass: 'fa-solid fa-code-branch' },
         { key: 'user-check', iconClass: 'fa-solid fa-user-check' },
         { key: 'output', iconClass: 'fa-solid fa-file-export' },
+        { key: 'network-wired', iconClass: 'fa-solid fa-network-wired' },
         { key: 'robot', iconClass: 'fa-solid fa-robot' }
     ];
 
@@ -12230,6 +12231,86 @@
         return button;
     }
 
+    function attachRemoteFleetTitleActions(bodyView, hostButton, stopHostButton, hostState) {
+        const container = bodyView?.closest?.('.map-node-remote-fleet');
+        const header = container?.querySelector?.('.map-node-memo__header') || null;
+        const existingActions = header?.querySelector?.('[data-remote-fleet-title-actions="true"]') || null;
+        existingActions?.remove?.();
+
+        const titleActions = document.createElement('div');
+        titleActions.dataset.remoteFleetTitleActions = 'true';
+        titleActions.style.cssText = `
+            display: inline-flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 7px;
+            min-width: 0;
+            pointer-events: auto;
+        `;
+
+        const normalizedState = String(hostState || 'inactive').trim().toLowerCase();
+        const active = normalizedState === 'hosting';
+        const indicator = document.createElement('span');
+        indicator.dataset.remoteFleetHostIndicator = 'true';
+        indicator.dataset.remoteFleetHostActive = active ? 'true' : 'false';
+        indicator.title = active ? 'Host active' : 'Host inactive';
+        indicator.style.cssText = `
+            flex: 0 0 auto;
+            width: 9px;
+            height: 9px;
+            border-radius: 999px;
+            background: ${active ? '#2563eb' : '#94a3b8'};
+            box-shadow: ${active ? '0 0 0 4px rgba(37, 99, 235, 0.14)' : '0 0 0 4px rgba(148, 163, 184, 0.14)'};
+        `;
+
+        titleActions.appendChild(indicator);
+        titleActions.appendChild(hostButton);
+        if (stopHostButton) {
+            titleActions.appendChild(stopHostButton);
+        }
+
+        if (header) {
+            header.style.gridTemplateColumns = '46px minmax(0, 1fr) auto';
+            header.appendChild(titleActions);
+        } else {
+            titleActions.style.alignSelf = 'flex-end';
+            bodyView?.prepend?.(titleActions);
+        }
+
+        return titleActions;
+    }
+
+    function createRemoteFleetEmptyScreens() {
+        const shell = document.createElement('section');
+        shell.dataset.remoteFleetEmptyScreens = 'true';
+        shell.style.cssText = `
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow: hidden;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+            align-content: start;
+            gap: 10px;
+            padding: 2px 4px 6px 0;
+        `;
+
+        for (let index = 0; index < 6; index += 1) {
+            const screen = document.createElement('div');
+            screen.dataset.remoteFleetEmptyScreen = 'true';
+            screen.style.cssText = `
+                aspect-ratio: 16 / 9;
+                min-height: 96px;
+                border-radius: 8px;
+                border: 1px solid rgba(203, 213, 225, 0.72);
+                background: #ffffff;
+                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 8px 18px rgba(15, 23, 42, 0.04);
+            `;
+            shell.appendChild(screen);
+        }
+
+        return shell;
+    }
+
     function createRemoteFleetSelect(options, value, title) {
         const select = document.createElement('select');
         select.title = title || '';
@@ -12624,11 +12705,11 @@
 
         const nodeId = String(nodeModel?.id ?? nodeModel?.Id ?? '');
         const device = parseRemoteFleetPinnedDevice(nodeModel);
-        const endpoint = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHubEndpoint', '127.0.0.1:5197');
         const hubStatus = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHubStatus', 'offline');
         const refreshedAt = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetLastRefreshAtUtc', '');
         const lastError = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetLastError', '');
         const deviceId = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetPinnedDeviceId', device ? getRemoteFleetDeviceId(device) : '');
+        const endpoint = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHubEndpoint', '127.0.0.1:5197');
 
         bodyView.dataset.src = `remote-device:${deviceId}:${refreshedAt}`;
         bodyView.classList.add('map-node-remote-fleet__body');
@@ -13173,18 +13254,11 @@
             devices.filter(isRemoteFleetDeviceConnected).length));
         const taskCapableCount = devices.filter(device => isRemoteFleetDeviceConnected(device) && isRemoteFleetDeviceTaskCapable(device)).length;
         const aiCapableCount = devices.filter(device => isRemoteFleetDeviceConnected(device) && isRemoteFleetDeviceAiCapable(device)).length;
-        const endpoint = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHubEndpoint', '127.0.0.1:5197');
-        const managerPackage = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetManagerPackage', '@mindexec/cli');
-        const managerVersion = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetManagerVersion', '');
         const hubStatus = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHubStatus', 'offline');
         const refreshedAt = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetLastRefreshAtUtc', '');
         const lastError = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetLastError', '');
         const hostTargetState = String(getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHostTargetState', 'inactive')).trim().toLowerCase();
-        const hostTargetNodeId = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHostTargetNodeId', '');
-        const hostTargetEndpoint = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHostTargetEndpoint', endpoint);
-        const hostTargetExpiresAt = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHostTargetExpiresAtUtc', '');
         const isHostingTarget = hostTargetState === 'hosting';
-        const otherMonitorHosting = hostTargetState === 'other-monitor';
 
         if (!isHostingTarget) {
             stopRemoteFleetHostLeaseTimer(nodeId);
@@ -13206,78 +13280,8 @@
             background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.92));
         `;
 
-        const headerRow = document.createElement('div');
-        headerRow.style.cssText = `
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: 10px;
-            flex: 0 0 auto;
-            min-width: 0;
-        `;
-        const headerMeta = document.createElement('div');
-        headerMeta.style.cssText = `
-            min-width: 0;
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        `;
-        const managerRow = document.createElement('div');
-        managerRow.dataset.remoteFleetManagerVersion = 'true';
-        managerRow.textContent = `${managerPackage}${managerVersion ? ` ${managerVersion}` : ''} - ${endpoint}`;
-        managerRow.title = managerRow.textContent;
-        managerRow.style.cssText = `
-            flex: 0 0 auto;
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            color: #475569;
-            font-size: 10px;
-            font-weight: 850;
-            line-height: 1.2;
-            letter-spacing: 0;
-        `;
-
-        const hostStatusRow = document.createElement('div');
-        hostStatusRow.dataset.remoteFleetHostState = 'true';
-        const hostStatusText = isHostingTarget
-            ? 'Host: Active'
-            : otherMonitorHosting
-                ? 'Host: Other monitor'
-                : 'Host: Inactive';
-        const hostLeaseText = isHostingTarget && hostTargetExpiresAt
-            ? ` - lease ${formatRemoteFleetTimeUntil(hostTargetExpiresAt)}`
-            : '';
-        hostStatusRow.textContent = `${hostStatusText}${hostLeaseText}`;
-        hostStatusRow.title = otherMonitorHosting
-            ? `Active host monitor: ${hostTargetNodeId || 'unknown'}`
-            : `Endpoint ${hostTargetEndpoint || endpoint}`;
-        hostStatusRow.style.cssText = `
-            flex: 0 0 auto;
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            color: ${isHostingTarget ? '#047857' : otherMonitorHosting ? '#7c2d12' : '#64748b'};
-            font-size: 10px;
-            font-weight: 900;
-            line-height: 1.2;
-            letter-spacing: 0;
-        `;
-        headerMeta.appendChild(managerRow);
-        headerMeta.appendChild(hostStatusRow);
-
-        const hostActions = document.createElement('div');
-        hostActions.style.cssText = `
-            flex: 0 0 auto;
-            display: inline-flex;
-            align-items: center;
-            justify-content: flex-end;
-            gap: 6px;
-        `;
         const hostButton = createRemoteFleetButton(
-            isHostingTarget ? 'Hosting' : 'Set Host',
+            'Set Host',
             isHostingTarget
                 ? 'Renew this monitor as the active host target for remote agents.'
                 : 'Set this monitor as the active host target for remote agents.',
@@ -13285,9 +13289,9 @@
         hostButton.dataset.remoteFleetHostActive = isHostingTarget ? 'true' : 'false';
         hostButton.style.height = '30px';
         hostButton.style.minWidth = '78px';
-        hostButton.style.borderColor = isHostingTarget ? 'rgba(16, 185, 129, 0.38)' : 'rgba(37, 99, 235, 0.32)';
-        hostButton.style.background = isHostingTarget ? 'rgba(236, 253, 245, 0.96)' : '#ffffff';
-        hostButton.style.color = isHostingTarget ? '#047857' : '#1d4ed8';
+        hostButton.style.borderColor = isHostingTarget ? 'rgba(37, 99, 235, 0.44)' : 'rgba(37, 99, 235, 0.32)';
+        hostButton.style.background = isHostingTarget ? 'rgba(239, 246, 255, 0.98)' : '#ffffff';
+        hostButton.style.color = '#1d4ed8';
         let stopHostButton = null;
         if (isHostingTarget) {
             stopHostButton = createRemoteFleetButton('Stop', 'Stop using this monitor as the host target.', 'stop-host');
@@ -13296,13 +13300,7 @@
             stopHostButton.style.color = '#b91c1c';
             stopHostButton.style.background = 'rgba(254, 242, 242, 0.94)';
         }
-        hostActions.appendChild(hostButton);
-        if (stopHostButton) {
-            hostActions.appendChild(stopHostButton);
-        }
-        headerRow.appendChild(headerMeta);
-        headerRow.appendChild(hostActions);
-        bodyView.appendChild(headerRow);
+        attachRemoteFleetTitleActions(bodyView, hostButton, stopHostButton, hostTargetState);
 
         const top = document.createElement('div');
         top.style.cssText = `
@@ -13329,7 +13327,7 @@
         const searchInput = document.createElement('input');
         searchInput.type = 'search';
         searchInput.value = searchState;
-        searchInput.placeholder = 'Search devices';
+        searchInput.placeholder = '';
         searchInput.dataset.remoteFleetSearch = 'true';
         searchInput.autocomplete = 'off';
         searchInput.spellcheck = false;
@@ -13401,7 +13399,7 @@
         filterRow.appendChild(groupSelect);
         filterRow.appendChild(densitySelect);
         filterRow.appendChild(matchCount);
-        bodyView.appendChild(filterRow);
+        filterRow.dataset.remoteFleetAdvancedFilters = 'hidden';
 
         const taskRow = document.createElement('div');
         taskRow.style.cssText = `
@@ -13817,8 +13815,6 @@
         const createDevicePreview = (device, mode = 'tile') => {
             const name = getRemoteFleetDeviceName(device);
             const connectedDevice = isRemoteFleetDeviceConnected(device);
-            const thumbnailEnabled = device?.thumbnailEnabled === true || device?.ThumbnailEnabled === true;
-            const liveStreamEnabled = device?.liveStreamEnabled === true || device?.LiveStreamEnabled === true;
             const thumbnailDataUrl = String(device?.thumbnailDataUrl || device?.ThumbnailDataUrl || '');
             const thumbnailCapturedAt = String(device?.thumbnailCapturedAt || device?.ThumbnailCapturedAt || '');
             const liveFrameDataUrl = String(device?.liveFrameDataUrl || device?.LiveFrameDataUrl || '');
@@ -13837,7 +13833,7 @@
                 aspect-ratio: 16 / 9;
                 overflow: hidden;
                 border-radius: ${isDetail ? '8px' : '6px'};
-                background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+                background: ${(hasLiveFrame || hasThumbnail) ? 'linear-gradient(135deg, #0f172a 0%, #1e293b 100%)' : '#ffffff'};
                 border: 1px solid rgba(15, 23, 42, ${isDetail ? '0.16' : '0.10'});
             `;
 
@@ -13856,17 +13852,11 @@
                 preview.appendChild(image);
             } else {
                 const placeholder = document.createElement('div');
-                placeholder.textContent = thumbnailEnabled || liveStreamEnabled ? 'No screen' : 'No screen';
+                placeholder.dataset.remoteFleetScreenPlaceholder = 'true';
                 placeholder.style.cssText = `
                     position: absolute;
                     inset: 0;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    color: rgba(226, 232, 240, 0.80);
-                    font-size: ${isDetail ? '12px' : '10px'};
-                    font-weight: 900;
-                    letter-spacing: 0;
+                    background: #ffffff;
                 `;
                 preview.appendChild(placeholder);
             }
@@ -14112,24 +14102,7 @@
             padding-right: 4px;
         `;
 
-        if (devices.length === 0) {
-            const empty = document.createElement('div');
-            empty.textContent = 'No devices connected yet.';
-            empty.style.cssText = `
-                grid-column: 1 / -1;
-                display: flex;
-                align-items: center;
-                min-height: 94px;
-                padding: 14px;
-                border-radius: 8px;
-                border: 1px dashed rgba(100, 116, 139, 0.36);
-                color: #475569;
-                font-size: 13px;
-                font-weight: 800;
-                background: rgba(255, 255, 255, 0.74);
-            `;
-            grid.appendChild(empty);
-        } else {
+        if (devices.length > 0) {
             const groupStats = new Map();
             if (groupState !== 'none') {
                 devices.forEach(device => {
@@ -14252,24 +14225,16 @@
             grid.appendChild(noMatch);
         }
 
-        monitorWorkspace.appendChild(grid);
-        monitorWorkspace.appendChild(createSelectedDevicePanel(selectedDevice));
+        if (devices.length === 0) {
+            monitorWorkspace.style.display = 'flex';
+            monitorWorkspace.style.flexDirection = 'column';
+            monitorWorkspace.appendChild(createRemoteFleetEmptyScreens());
+        } else {
+            monitorWorkspace.appendChild(grid);
+            monitorWorkspace.appendChild(createSelectedDevicePanel(selectedDevice));
+        }
         bodyView.appendChild(monitorWorkspace);
 
-        const footer = document.createElement('div');
-        footer.textContent = `Endpoint ${endpoint} - all devices, no paging - group ${groupState} - ${autoMonitorState ? 'auto monitor' : 'manual'} - refreshed ${formatRemoteFleetAge(refreshedAt)}`;
-        footer.style.cssText = `
-            flex: 0 0 auto;
-            color: #64748b;
-            font-size: 11px;
-            font-weight: 700;
-            line-height: 1.2;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        `;
-        bodyView.appendChild(footer);
-
         const setTaskFeedback = (message, tone = 'info') => {
             taskFeedback.textContent = message || '';
             taskFeedback.style.display = message ? 'block' : 'none';

package/wwwroot/_framework/blazor.boot.json

@@ -1,7 +1,7 @@
 {
   "mainAssemblyName": "MindExecution.Web",
   "resources": {
-    "hash": "sha256-8opnBRmWTSsO9dqkwmfxCVP/1IWjG5lnkDoRFXzPaIg=",
+    "hash": "sha256-scsV40Knf96MECCS5TE6GBMBRc/aVh7dlYynMn/8Zjs=",
     "fingerprinting": {
       "Google.Protobuf.9h59ukbel7.dll": "Google.Protobuf.dll",
       "Markdig.d1j7v41cl1.dll": "Markdig.dll",
@@ -131,7 +131,7 @@
       "MindExecution.Plugins.Directory.y74f55e8x3.dll": "MindExecution.Plugins.Directory.dll",
       "MindExecution.Plugins.PlanMaster.jpdwbefrh1.dll": "MindExecution.Plugins.PlanMaster.dll",
       "MindExecution.Plugins.YouTube.8nz4wv2nsj.dll": "MindExecution.Plugins.YouTube.dll",
-      "MindExecution.Shared.v6ani8nfp8.dll": "MindExecution.Shared.dll",
+      "MindExecution.Shared.ihh8mkcn5x.dll": "MindExecution.Shared.dll",
       "MindExecution.Web.0cs29v57jl.dll": "MindExecution.Web.dll",
       "dotnet.js": "dotnet.js",
       "dotnet.native.qc8g39g30v.js": "dotnet.native.js",
@@ -282,7 +282,7 @@
       "MindExecution.Kernel.z56elxihok.dll": "sha256-STATJelRGcW9SDGgsw6YmQi6tkQje52dy4lyT3QU4qs=",
       "MindExecution.Plugins.Concept.zczca3fsxz.dll": "sha256-A2RXdS42+UEr63Y54dc1OVeyowZIF7zUghMKuE2x11w=",
       "MindExecution.Plugins.PlanMaster.jpdwbefrh1.dll": "sha256-Z6B9yXEfheo7LEUPAbjvd5xfl1B218Gu4EVRfleOvWg=",
-      "MindExecution.Shared.v6ani8nfp8.dll": "sha256-VzXMEqJZy84RMk0aBnLB415/HS+q83nl7RTXiNLvlPU=",
+      "MindExecution.Shared.ihh8mkcn5x.dll": "sha256-es97rs5TlDn5BgQqMBlWgIB0cflLmVW2shEwS3Wbajs=",
       "MindExecution.Web.0cs29v57jl.dll": "sha256-EG83w5NgZ5KzydPFrgZjTWm9BJJoX8RrOhqX81B2KPs="
     },
     "lazyAssembly": {

package/wwwroot/index.html

@@ -558,7 +558,7 @@
             }
 
             const base = '_content/MindExecution.Shared/js/';
-            const scriptVersion = '20260612-remote-clean-monitor-v491';
+            const scriptVersion = '20260613-remote-screen-monitor-v492';
             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":  "GmythO0P",
+    "version":  "pdZBY4HV",
     "assets":  [
                    {
                        "hash":  "sha256-+CSYMcqLNTsq3VnH11jgYyOCCdxvHzL74CBmo4sCmMU=",
@@ -86,7 +86,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js.backup"
                    },
                    {
-                       "hash":  "sha256-wensAgsKs3nWcJ2Ei0LTHd5i4b+baUwmP5UbK1MLG9I=",
+                       "hash":  "sha256-evnO3l4V8QouakV955IY87wMR6kYuXQU5LEAjOjONO0=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-css3d-manager.js"
                    },
                    {
@@ -442,8 +442,8 @@
                        "url":  "_framework/MindExecution.Plugins.YouTube.8nz4wv2nsj.dll"
                    },
                    {
-                       "hash":  "sha256-VzXMEqJZy84RMk0aBnLB415/HS+q83nl7RTXiNLvlPU=",
-                       "url":  "_framework/MindExecution.Shared.v6ani8nfp8.dll"
+                       "hash":  "sha256-es97rs5TlDn5BgQqMBlWgIB0cflLmVW2shEwS3Wbajs=",
+                       "url":  "_framework/MindExecution.Shared.ihh8mkcn5x.dll"
                    },
                    {
                        "hash":  "sha256-EG83w5NgZ5KzydPFrgZjTWm9BJJoX8RrOhqX81B2KPs=",
@@ -770,7 +770,7 @@
                        "url":  "_framework/Websocket.Client.vapounvmnl.dll"
                    },
                    {
-                       "hash":  "sha256-SnKuukkikWBroUqaw7qwE4nOor1NpE81zg2DHpQCNtw=",
+                       "hash":  "sha256-F7qorSpP5AuTT8FXK8Ya++UIan89IZHyuh+KPEHYUoA=",
                        "url":  "_framework/blazor.boot.json"
                    },
                    {
@@ -834,7 +834,7 @@
                        "url":  "image-manifest.json"
                    },
                    {
-                       "hash":  "sha256-OrDc5s2gYCFEgTQDxl3FK0xyRLULLSusjX3jgP+azHQ=",
+                       "hash":  "sha256-BUjUsG/CTn5wyAwuO52yc0McqhRH8QVA7dDCN+LuIBE=",
                        "url":  "index.html"
                    },
                    {

package/wwwroot/service-worker.js

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