@mindexec/cli 0.2.5 → 0.2.7

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

@@ -12005,8 +12005,11 @@
         return `${Math.floor(seconds / 86400)}d ago`;
     }
 
-    function createRemoteFleetStat(label, value, tone = 'default') {
+    function createRemoteFleetStat(label, value, tone = 'default', key = '') {
         const item = document.createElement('div');
+        if (key) {
+            item.dataset.remoteFleetStat = key;
+        }
         item.style.cssText = `
             display: flex;
             flex-direction: column;
@@ -12029,6 +12032,7 @@
         `;
 
         const valueEl = document.createElement('strong');
+        valueEl.dataset.remoteFleetStatValue = 'true';
         valueEl.textContent = value;
         valueEl.style.cssText = `
             color: ${tone === 'online' ? '#047857' : '#0f172a'};
@@ -12073,6 +12077,141 @@
         return button;
     }
 
+    function createRemoteFleetSelect(options, value, title) {
+        const select = document.createElement('select');
+        select.title = title || '';
+        select.setAttribute('aria-label', title || 'Remote fleet option');
+        select.style.cssText = `
+            min-width: 0;
+            height: 34px;
+            border-radius: 7px;
+            border: 1px solid rgba(148, 163, 184, 0.34);
+            background: rgba(255, 255, 255, 0.94);
+            color: #0f172a;
+            padding: 0 8px;
+            font-size: 11px;
+            font-weight: 850;
+            letter-spacing: 0;
+            outline: none;
+            pointer-events: auto;
+        `;
+        options.forEach(option => {
+            const optionEl = document.createElement('option');
+            optionEl.value = option.value;
+            optionEl.textContent = option.label;
+            select.appendChild(optionEl);
+        });
+        select.value = value;
+        return select;
+    }
+
+    function getRemoteFleetDeviceField(device, camelKey, pascalKey, fallback = '') {
+        const value = device?.[camelKey] ?? device?.[pascalKey] ?? fallback;
+        return value === undefined || value === null ? fallback : value;
+    }
+
+    function getRemoteFleetDeviceId(device) {
+        return String(getRemoteFleetDeviceField(device, 'deviceId', 'DeviceId', '')).trim();
+    }
+
+    function getRemoteFleetDeviceName(device) {
+        return String(
+            getRemoteFleetDeviceField(device, 'name', 'Name')
+            || getRemoteFleetDeviceField(device, 'hostname', 'Hostname')
+            || getRemoteFleetDeviceId(device)
+            || 'device');
+    }
+
+    function isRemoteFleetDeviceConnected(device) {
+        return getRemoteFleetDeviceField(device, 'connected', 'Connected', false) === true;
+    }
+
+    function isRemoteFleetDeviceTaskCapable(device) {
+        return getRemoteFleetDeviceField(device, 'computerAgentEnabled', 'ComputerAgentEnabled', false) === true;
+    }
+
+    function isRemoteFleetDeviceAiCapable(device) {
+        return getRemoteFleetDeviceField(device, 'aiAssistEnabled', 'AiAssistEnabled', false) === true;
+    }
+
+    function hasRemoteFleetThumbnail(device) {
+        const dataUrl = String(getRemoteFleetDeviceField(device, 'thumbnailDataUrl', 'ThumbnailDataUrl', ''));
+        return /^data:image\/(png|jpe?g|webp|svg\+xml);base64,/i.test(dataUrl);
+    }
+
+    function hasRemoteFleetLiveFrame(device) {
+        const dataUrl = String(getRemoteFleetDeviceField(device, 'liveFrameDataUrl', 'LiveFrameDataUrl', ''));
+        return /^data:image\/(png|jpe?g|webp|svg\+xml);base64,/i.test(dataUrl);
+    }
+
+    function isRemoteFleetLiveActive(device) {
+        return getRemoteFleetDeviceField(device, 'liveStreamActive', 'LiveStreamActive', false) === true;
+    }
+
+    function getRemoteFleetTimestampMs(value) {
+        const timestamp = Date.parse(String(value || ''));
+        return Number.isFinite(timestamp) ? timestamp : 0;
+    }
+
+    function getRemoteFleetDeviceLastSeenMs(device) {
+        return Math.max(
+            getRemoteFleetTimestampMs(getRemoteFleetDeviceField(device, 'lastSeenAt', 'LastSeenAt', '')),
+            getRemoteFleetTimestampMs(getRemoteFleetDeviceField(device, 'lastStatusAt', 'LastStatusAt', '')),
+            getRemoteFleetTimestampMs(getRemoteFleetDeviceField(device, 'thumbnailReceivedAt', 'ThumbnailReceivedAt', '')));
+    }
+
+    function getRemoteFleetDeviceNumber(device, camelKey, pascalKey) {
+        const number = Number(getRemoteFleetDeviceField(device, camelKey, pascalKey, Number.NaN));
+        return Number.isFinite(number) ? number : Number.NaN;
+    }
+
+    function buildRemoteFleetSearchText(device) {
+        return [
+            getRemoteFleetDeviceId(device),
+            getRemoteFleetDeviceName(device),
+            getRemoteFleetDeviceField(device, 'hostname', 'Hostname', ''),
+            getRemoteFleetDeviceField(device, 'platform', 'Platform', ''),
+            getRemoteFleetDeviceField(device, 'release', 'Release', ''),
+            getRemoteFleetDeviceField(device, 'arch', 'Arch', ''),
+            getRemoteFleetDeviceField(device, 'agentVersion', 'AgentVersion', ''),
+            getRemoteFleetDeviceField(device, 'liveStreamMode', 'LiveStreamMode', ''),
+            isRemoteFleetLiveActive(device) ? 'live active remote-fast' : '',
+            getRemoteFleetDeviceField(device, 'latestTaskTitle', 'LatestTaskTitle', ''),
+            getRemoteFleetDeviceField(device, 'latestTaskStatus', 'LatestTaskStatus', ''),
+            getRemoteFleetDeviceField(device, 'latestTaskResultSummary', 'LatestTaskResultSummary', ''),
+            getRemoteFleetDeviceField(device, 'latestTaskError', 'LatestTaskError', '')
+        ].join(' ').toLowerCase();
+    }
+
+    function compareRemoteFleetDevices(left, right, sortMode) {
+        const connectedDelta = Number(isRemoteFleetDeviceConnected(right)) - Number(isRemoteFleetDeviceConnected(left));
+        const byName = () => getRemoteFleetDeviceName(left).localeCompare(getRemoteFleetDeviceName(right))
+            || getRemoteFleetDeviceId(left).localeCompare(getRemoteFleetDeviceId(right));
+
+        switch (sortMode) {
+            case 'recent':
+                return getRemoteFleetDeviceLastSeenMs(right) - getRemoteFleetDeviceLastSeenMs(left) || byName();
+            case 'memory': {
+                const leftMem = getRemoteFleetDeviceNumber(left, 'usedMemRatio', 'UsedMemRatio');
+                const rightMem = getRemoteFleetDeviceNumber(right, 'usedMemRatio', 'UsedMemRatio');
+                return (Number.isFinite(rightMem) ? rightMem : -1) - (Number.isFinite(leftMem) ? leftMem : -1) || byName();
+            }
+            case 'load': {
+                const leftLoad = getRemoteFleetDeviceNumber(left, 'load1', 'Load1');
+                const rightLoad = getRemoteFleetDeviceNumber(right, 'load1', 'Load1');
+                return (Number.isFinite(rightLoad) ? rightLoad : -1) - (Number.isFinite(leftLoad) ? leftLoad : -1) || byName();
+            }
+            case 'task':
+                return String(getRemoteFleetDeviceField(right, 'latestTaskUpdatedAt', 'LatestTaskUpdatedAt', ''))
+                    .localeCompare(String(getRemoteFleetDeviceField(left, 'latestTaskUpdatedAt', 'LatestTaskUpdatedAt', ''))) || byName();
+            case 'status':
+                return connectedDelta || byName();
+            case 'name':
+            default:
+                return byName();
+        }
+    }
+
     async function syncRemoteFleetNodeStateFromResult(result) {
         const nodeState = result?.nodeState || result?.refresh?.nodeState;
         if (nodeState && window.mindMap?.syncNodeStates) {
@@ -12082,14 +12221,34 @@
 
     function renderRemoteFleetMonitor(bodyView, nodeModel) {
         if (!bodyView) return;
+        if (bodyView._remoteFleetLiveRefreshTimer) {
+            clearInterval(bodyView._remoteFleetLiveRefreshTimer);
+            bodyView._remoteFleetLiveRefreshTimer = null;
+        }
 
         const nodeId = String(nodeModel?.id ?? nodeModel?.Id ?? '');
-        const devices = parseRemoteFleetDevices(nodeModel);
+        const searchState = bodyView.dataset.remoteFleetSearch || '';
+        const filterState = bodyView.dataset.remoteFleetFilter || 'all';
+        const sortState = bodyView.dataset.remoteFleetSort || 'status';
+        const densityState = bodyView.dataset.remoteFleetDensity || 'cards';
+        const aiAssistState = bodyView.dataset.remoteFleetAiAssist === 'true';
+        const focusState = bodyView.dataset.remoteFleetFocusDeviceId || '';
+        const devices = [...parseRemoteFleetDevices(nodeModel)]
+            .sort((left, right) => compareRemoteFleetDevices(left, right, sortState));
+        const hasActiveLiveStream = devices.some(isRemoteFleetLiveActive);
+        const focusedDevice = devices.find(device => getRemoteFleetDeviceId(device) === focusState)
+            || devices.find(device => isRemoteFleetLiveActive(device))
+            || null;
+        if (focusedDevice) {
+            bodyView.dataset.remoteFleetFocusDeviceId = getRemoteFleetDeviceId(focusedDevice);
+        }
         const total = Number(getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetDeviceCount', devices.length));
         const connected = Number(getRemoteFleetMetadataValue(
             nodeModel,
             'RemoteFleetConnectedDeviceCount',
-            devices.filter(device => device?.connected === true || device?.Connected === true).length));
+            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 command = getRemoteFleetMetadataValue(
             nodeModel,
@@ -12123,8 +12282,8 @@
         `;
         top.appendChild(createRemoteFleetStat('Hub', hubStatus === 'online' ? 'Online' : 'Offline', hubStatus === 'online' ? 'online' : 'default'));
         top.appendChild(createRemoteFleetStat('Connected', `${Number.isFinite(connected) ? connected : 0}/${Number.isFinite(total) ? total : devices.length}`, connected > 0 ? 'online' : 'default'));
-        top.appendChild(createRemoteFleetStat('Mode', 'All', 'default'));
-        top.appendChild(createRemoteFleetStat('Paging', 'None', 'default'));
+        top.appendChild(createRemoteFleetStat('Task', String(taskCapableCount), taskCapableCount > 0 ? 'online' : 'default'));
+        top.appendChild(createRemoteFleetStat('AI', String(aiCapableCount), aiCapableCount > 0 ? 'online' : 'default'));
         bodyView.appendChild(top);
 
         const commandRow = document.createElement('div');
@@ -12160,10 +12319,87 @@
         commandRow.appendChild(refreshButton);
         bodyView.appendChild(commandRow);
 
+        const filterRow = document.createElement('div');
+        filterRow.style.cssText = `
+            display: grid;
+            grid-template-columns: minmax(150px, 1.2fr) minmax(96px, 0.7fr) minmax(96px, 0.7fr) minmax(84px, 0.55fr) auto;
+            gap: 8px;
+            align-items: center;
+            flex: 0 0 auto;
+        `;
+
+        const searchInput = document.createElement('input');
+        searchInput.type = 'search';
+        searchInput.value = searchState;
+        searchInput.placeholder = 'Search devices';
+        searchInput.dataset.remoteFleetSearch = 'true';
+        searchInput.autocomplete = 'off';
+        searchInput.spellcheck = false;
+        searchInput.style.cssText = `
+            min-width: 0;
+            height: 34px;
+            border-radius: 7px;
+            border: 1px solid rgba(148, 163, 184, 0.34);
+            background: rgba(255, 255, 255, 0.94);
+            color: #0f172a;
+            padding: 0 10px;
+            font-size: 12px;
+            font-weight: 750;
+            letter-spacing: 0;
+            outline: none;
+            pointer-events: auto;
+        `;
+
+        const filterSelect = createRemoteFleetSelect([
+            { value: 'all', label: 'All' },
+            { value: 'connected', label: 'Online' },
+            { value: 'offline', label: 'Offline' },
+            { value: 'task', label: 'Task' },
+            { value: 'ai', label: 'AI' },
+            { value: 'live', label: 'Live' },
+            { value: 'frames', label: 'Frames' },
+            { value: 'issues', label: 'Issues' }
+        ], filterState, 'Device filter');
+
+        const sortSelect = createRemoteFleetSelect([
+            { value: 'status', label: 'Status' },
+            { value: 'name', label: 'Name' },
+            { value: 'recent', label: 'Recent' },
+            { value: 'memory', label: 'Memory' },
+            { value: 'load', label: 'Load' },
+            { value: 'task', label: 'Task' }
+        ], sortState, 'Device sort');
+
+        const densitySelect = createRemoteFleetSelect([
+            { value: 'cards', label: 'Cards' },
+            { value: 'dense', label: 'Dense' }
+        ], densityState, 'Device density');
+
+        const matchCount = document.createElement('div');
+        matchCount.dataset.remoteFleetMatchCount = 'true';
+        matchCount.style.cssText = `
+            min-width: 72px;
+            color: #334155;
+            font-size: 11px;
+            font-weight: 900;
+            letter-spacing: 0;
+            text-align: right;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        `;
+
+        filterRow.appendChild(searchInput);
+        filterRow.appendChild(filterSelect);
+        filterRow.appendChild(sortSelect);
+        filterRow.appendChild(densitySelect);
+        filterRow.appendChild(matchCount);
+        bodyView.appendChild(filterRow);
+
         const taskRow = document.createElement('div');
         taskRow.style.cssText = `
             display: grid;
-            grid-template-columns: minmax(0, 1fr) auto auto;
+            grid-template-columns: minmax(0, 1fr) auto auto auto;
             gap: 8px;
             align-items: stretch;
             flex: 0 0 auto;
@@ -12212,6 +12448,7 @@
         `;
         const aiToggle = document.createElement('input');
         aiToggle.type = 'checkbox';
+        aiToggle.checked = aiAssistState;
         aiToggle.dataset.remoteFleetAiToggle = 'true';
         aiToggle.style.cssText = `
             width: 14px;
@@ -12223,10 +12460,13 @@
         aiToggleText.textContent = 'AI';
         aiToggleLabel.appendChild(aiToggle);
         aiToggleLabel.appendChild(aiToggleText);
-        const sendConnectedButton = createRemoteFleetButton('Send connected', 'Dispatch task to all connected task-capable devices', 'task-connected');
+        const sendVisibleButton = createRemoteFleetButton('Send visible', 'Dispatch task to visible connected task-capable devices', 'task-visible');
+        sendVisibleButton.style.height = '54px';
+        const sendConnectedButton = createRemoteFleetButton('Send all', 'Dispatch task to all connected task-capable devices', 'task-connected');
         sendConnectedButton.style.height = '54px';
         taskRow.appendChild(taskInput);
         taskRow.appendChild(aiToggleLabel);
+        taskRow.appendChild(sendVisibleButton);
         taskRow.appendChild(sendConnectedButton);
         bodyView.appendChild(taskRow);
 
@@ -12249,6 +12489,141 @@
         `;
         bodyView.appendChild(taskFeedback);
 
+        if (focusedDevice) {
+            const focusedId = getRemoteFleetDeviceId(focusedDevice);
+            const focusedName = getRemoteFleetDeviceName(focusedDevice);
+            const liveActive = isRemoteFleetLiveActive(focusedDevice);
+            const liveFrameDataUrl = String(getRemoteFleetDeviceField(focusedDevice, 'liveFrameDataUrl', 'LiveFrameDataUrl', ''));
+            const liveFrameAt = String(getRemoteFleetDeviceField(focusedDevice, 'liveFrameReceivedAt', 'LiveFrameReceivedAt', ''));
+            const liveStreamId = String(getRemoteFleetDeviceField(focusedDevice, 'liveStreamId', 'LiveStreamId', ''));
+            const hasLiveFrame = hasRemoteFleetLiveFrame(focusedDevice);
+            const livePanel = document.createElement('section');
+            livePanel.dataset.remoteFleetLivePanel = 'true';
+            livePanel.dataset.deviceId = focusedId;
+            livePanel.style.cssText = `
+                flex: 0 0 auto;
+                display: grid;
+                grid-template-columns: minmax(220px, 0.95fr) minmax(0, 1.25fr);
+                gap: 10px;
+                min-height: 170px;
+                padding: 10px;
+                border-radius: 8px;
+                border: 1px solid rgba(14, 165, 233, 0.24);
+                background: rgba(255, 255, 255, 0.82);
+            `;
+
+            const livePreview = document.createElement('div');
+            livePreview.style.cssText = `
+                position: relative;
+                min-width: 0;
+                aspect-ratio: 16 / 9;
+                overflow: hidden;
+                border-radius: 7px;
+                background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+                border: 1px solid rgba(15, 23, 42, 0.16);
+            `;
+            if (hasLiveFrame) {
+                const image = document.createElement('img');
+                image.src = liveFrameDataUrl;
+                image.alt = `${focusedName} live screen`;
+                image.decoding = 'async';
+                image.style.cssText = `
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    display: block;
+                `;
+                livePreview.appendChild(image);
+            } else {
+                const placeholder = document.createElement('div');
+                placeholder.textContent = liveActive ? 'Waiting for live frame' : 'Live view idle';
+                placeholder.style.cssText = `
+                    position: absolute;
+                    inset: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: rgba(226, 232, 240, 0.82);
+                    font-size: 12px;
+                    font-weight: 900;
+                    letter-spacing: 0;
+                `;
+                livePreview.appendChild(placeholder);
+            }
+            const liveBadge = document.createElement('span');
+            liveBadge.textContent = liveActive
+                ? `LIVE ${liveFrameAt ? formatRemoteFleetAge(liveFrameAt) : ''}`.trim()
+                : 'FOCUS';
+            liveBadge.style.cssText = `
+                position: absolute;
+                left: 7px;
+                top: 7px;
+                max-width: calc(100% - 14px);
+                padding: 4px 7px;
+                border-radius: 999px;
+                background: ${liveActive ? 'rgba(220, 38, 38, 0.86)' : 'rgba(15, 23, 42, 0.72)'};
+                color: #ffffff;
+                font-size: 9px;
+                font-weight: 950;
+                line-height: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                letter-spacing: 0;
+            `;
+            livePreview.appendChild(liveBadge);
+
+            const liveInfo = document.createElement('div');
+            liveInfo.style.cssText = `
+                min-width: 0;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                gap: 8px;
+            `;
+            const liveTitle = document.createElement('div');
+            liveTitle.style.cssText = 'min-width:0;display:flex;flex-direction:column;gap:3px;';
+            const liveName = document.createElement('strong');
+            liveName.textContent = focusedName;
+            liveName.title = focusedName;
+            liveName.style.cssText = 'color:#0f172a;font-size:15px;font-weight:950;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;';
+            const liveMeta = document.createElement('span');
+            liveMeta.textContent = liveActive
+                ? `RemoteFast ${getRemoteFleetDeviceField(focusedDevice, 'liveStreamFps', 'LiveStreamFps', 0) || 12} fps`
+                : 'View-only focused screen stream';
+            liveMeta.style.cssText = 'color:#475569;font-size:11px;font-weight:800;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;';
+            liveTitle.appendChild(liveName);
+            liveTitle.appendChild(liveMeta);
+
+            const liveActions = document.createElement('div');
+            liveActions.style.cssText = 'display:flex;align-items:center;gap:8px;flex-wrap:wrap;';
+            if (isRemoteFleetDeviceConnected(focusedDevice) && getRemoteFleetDeviceField(focusedDevice, 'liveStreamEnabled', 'LiveStreamEnabled', false) === true) {
+                const startLiveButton = createRemoteFleetButton(liveActive ? 'Restart live' : 'Start live', 'Start focused view-only live stream', 'live-start');
+                startLiveButton.dataset.deviceId = focusedId;
+                startLiveButton.style.height = '30px';
+                liveActions.appendChild(startLiveButton);
+                if (liveActive) {
+                    const stopLiveButton = createRemoteFleetButton('Stop live', 'Stop focused live stream', 'live-stop');
+                    stopLiveButton.dataset.deviceId = focusedId;
+                    stopLiveButton.dataset.streamId = liveStreamId;
+                    stopLiveButton.style.height = '30px';
+                    stopLiveButton.style.borderColor = 'rgba(220, 38, 38, 0.32)';
+                    stopLiveButton.style.color = '#b91c1c';
+                    liveActions.appendChild(stopLiveButton);
+                }
+            } else {
+                const disabled = document.createElement('span');
+                disabled.textContent = 'Live unavailable';
+                disabled.style.cssText = 'color:#64748b;font-size:11px;font-weight:900;';
+                liveActions.appendChild(disabled);
+            }
+            liveInfo.appendChild(liveTitle);
+            liveInfo.appendChild(liveActions);
+            livePanel.appendChild(livePreview);
+            livePanel.appendChild(liveInfo);
+            bodyView.appendChild(livePanel);
+        }
+
         if (lastError.trim()) {
             const errorEl = document.createElement('div');
             errorEl.textContent = lastError;
@@ -12273,7 +12648,7 @@
             overflow-y: auto;
             overflow-x: hidden;
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+            grid-template-columns: ${densityState === 'dense' ? 'repeat(auto-fill, minmax(220px, 1fr))' : 'repeat(auto-fill, minmax(168px, 1fr))'};
             align-content: start;
             gap: 8px;
             padding-right: 4px;
@@ -12298,19 +12673,25 @@
             grid.appendChild(empty);
         } else {
             devices.forEach(device => {
-                const connectedDevice = device?.connected === true || device?.Connected === true;
-                const name = String(device?.name || device?.Name || device?.hostname || device?.Hostname || device?.deviceId || device?.DeviceId || 'device');
+                const connectedDevice = isRemoteFleetDeviceConnected(device);
+                const name = getRemoteFleetDeviceName(device);
                 const platform = [device?.platform || device?.Platform, device?.arch || device?.Arch]
                     .filter(Boolean)
                     .join(' / ') || 'unknown';
                 const release = String(device?.release || device?.Release || '');
-                const deviceId = String(device?.deviceId || device?.DeviceId || '');
+                const deviceId = getRemoteFleetDeviceId(device);
                 const thumbnailEnabled = device?.thumbnailEnabled === true || device?.ThumbnailEnabled === true;
                 const thumbnailDataUrl = String(device?.thumbnailDataUrl || device?.ThumbnailDataUrl || '');
                 const thumbnailCapturedAt = String(device?.thumbnailCapturedAt || device?.ThumbnailCapturedAt || '');
-                const hasThumbnail = /^data:image\/(png|jpe?g|webp|svg\+xml);base64,/i.test(thumbnailDataUrl);
-                const taskEnabled = device?.computerAgentEnabled === true || device?.ComputerAgentEnabled === true;
-                const aiAssistEnabled = device?.aiAssistEnabled === true || device?.AiAssistEnabled === true;
+                const liveStreamEnabled = device?.liveStreamEnabled === true || device?.LiveStreamEnabled === true;
+                const liveStreamActive = isRemoteFleetLiveActive(device);
+                const liveStreamId = String(device?.liveStreamId || device?.LiveStreamId || '');
+                const liveFrameDataUrl = String(device?.liveFrameDataUrl || device?.LiveFrameDataUrl || '');
+                const liveFrameReceivedAt = String(device?.liveFrameReceivedAt || device?.LiveFrameReceivedAt || '');
+                const hasThumbnail = hasRemoteFleetThumbnail(device);
+                const hasLiveFrame = hasRemoteFleetLiveFrame(device);
+                const taskEnabled = isRemoteFleetDeviceTaskCapable(device);
+                const aiAssistEnabled = isRemoteFleetDeviceAiCapable(device);
                 const aiModel = String(device?.aiModel || device?.AiModel || '');
                 const latestTaskStatus = String(device?.latestTaskStatus || device?.LatestTaskStatus || '');
                 const latestTaskTitle = String(device?.latestTaskTitle || device?.LatestTaskTitle || '');
@@ -12320,80 +12701,94 @@
                 const latestTaskResult = String(device?.latestTaskResultSummary || device?.LatestTaskResultSummary || '');
                 const card = document.createElement('article');
                 card.dataset.deviceId = deviceId;
+                card.dataset.remoteFleetSearchText = buildRemoteFleetSearchText(device);
+                card.dataset.remoteFleetConnected = connectedDevice ? 'true' : 'false';
+                card.dataset.remoteFleetTaskCapable = taskEnabled ? 'true' : 'false';
+                card.dataset.remoteFleetAiCapable = aiAssistEnabled ? 'true' : 'false';
+                card.dataset.remoteFleetHasFrame = (hasThumbnail || hasLiveFrame) ? 'true' : 'false';
+                card.dataset.remoteFleetLiveCapable = liveStreamEnabled ? 'true' : 'false';
+                card.dataset.remoteFleetLiveActive = liveStreamActive ? 'true' : 'false';
+                card.dataset.remoteFleetIssue = (!connectedDevice || latestTaskStatus === 'failed' || !!latestTaskError) ? 'true' : 'false';
                 card.style.cssText = `
                     display: flex;
                     flex-direction: column;
-                    gap: 8px;
+                    gap: ${densityState === 'dense' ? '6px' : '8px'};
                     min-width: 0;
-                    min-height: 134px;
-                    padding: 10px;
+                    min-height: ${densityState === 'dense' ? '92px' : '134px'};
+                    padding: ${densityState === 'dense' ? '8px' : '10px'};
                     border-radius: 8px;
                     background: #ffffff;
                     border: 1px solid ${connectedDevice ? 'rgba(16, 185, 129, 0.34)' : 'rgba(148, 163, 184, 0.28)'};
                     box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
                 `;
 
-                const preview = document.createElement('div');
-                preview.style.cssText = `
-                    position: relative;
-                    width: 100%;
-                    aspect-ratio: 16 / 9;
-                    overflow: hidden;
-                    border-radius: 7px;
-                    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-                    border: 1px solid rgba(15, 23, 42, 0.12);
-                `;
-                if (hasThumbnail) {
-                    const image = document.createElement('img');
-                    image.src = thumbnailDataUrl;
-                    image.alt = `${name} thumbnail`;
-                    image.loading = 'lazy';
-                    image.decoding = 'async';
-                    image.style.cssText = `
+                if (densityState !== 'dense') {
+                    const previewDataUrl = hasLiveFrame ? liveFrameDataUrl : thumbnailDataUrl;
+                    const previewAt = hasLiveFrame ? liveFrameReceivedAt : thumbnailCapturedAt;
+                    const preview = document.createElement('div');
+                    preview.style.cssText = `
+                        position: relative;
                         width: 100%;
-                        height: 100%;
-                        object-fit: cover;
-                        display: block;
-                    `;
-                    preview.appendChild(image);
-                } else {
-                    const placeholder = document.createElement('div');
-                    placeholder.textContent = thumbnailEnabled ? 'No frame yet' : 'Status only';
-                    placeholder.style.cssText = `
-                        position: absolute;
-                        inset: 0;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: rgba(226, 232, 240, 0.78);
-                        font-size: 11px;
-                        font-weight: 900;
-                        letter-spacing: 0;
-                    `;
-                    preview.appendChild(placeholder);
-                }
-                if (thumbnailCapturedAt) {
-                    const badge = document.createElement('span');
-                    badge.textContent = formatRemoteFleetAge(thumbnailCapturedAt);
-                    badge.style.cssText = `
-                        position: absolute;
-                        right: 6px;
-                        bottom: 6px;
-                        max-width: calc(100% - 12px);
-                        padding: 3px 6px;
-                        border-radius: 999px;
-                        background: rgba(15, 23, 42, 0.74);
-                        color: #e2e8f0;
-                        font-size: 9px;
-                        font-weight: 900;
-                        line-height: 1;
+                        aspect-ratio: 16 / 9;
                         overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
+                        border-radius: 7px;
+                        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+                        border: 1px solid rgba(15, 23, 42, 0.12);
                     `;
-                    preview.appendChild(badge);
+                    if (hasLiveFrame || hasThumbnail) {
+                        const image = document.createElement('img');
+                        image.src = previewDataUrl;
+                        image.alt = hasLiveFrame ? `${name} live frame` : `${name} thumbnail`;
+                        image.loading = 'lazy';
+                        image.decoding = 'async';
+                        image.style.cssText = `
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                            display: block;
+                        `;
+                        preview.appendChild(image);
+                    } else {
+                        const placeholder = document.createElement('div');
+                        placeholder.textContent = thumbnailEnabled ? 'No frame yet' : 'Status only';
+                        placeholder.style.cssText = `
+                            position: absolute;
+                            inset: 0;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            color: rgba(226, 232, 240, 0.78);
+                            font-size: 11px;
+                            font-weight: 900;
+                            letter-spacing: 0;
+                        `;
+                        preview.appendChild(placeholder);
+                    }
+                    if (previewAt) {
+                        const badge = document.createElement('span');
+                        badge.textContent = hasLiveFrame
+                            ? `LIVE ${formatRemoteFleetAge(previewAt)}`
+                            : formatRemoteFleetAge(previewAt);
+                        badge.style.cssText = `
+                            position: absolute;
+                            right: 6px;
+                            bottom: 6px;
+                            max-width: calc(100% - 12px);
+                            padding: 3px 6px;
+                            border-radius: 999px;
+                            background: ${hasLiveFrame ? 'rgba(220, 38, 38, 0.82)' : 'rgba(15, 23, 42, 0.74)'};
+                            color: #e2e8f0;
+                            font-size: 9px;
+                            font-weight: 900;
+                            line-height: 1;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                        `;
+                        preview.appendChild(badge);
+                    }
+                    card.appendChild(preview);
                 }
-                card.appendChild(preview);
 
                 const cardHeader = document.createElement('div');
                 cardHeader.style.cssText = 'display:flex;align-items:flex-start;gap:8px;min-width:0;';
@@ -12470,7 +12865,23 @@
                 addMetric('Uptime', formatRemoteFleetDuration(device?.uptimeSec ?? device?.UptimeSec));
                 addMetric('Mem', formatRemoteFleetPercent(device?.usedMemRatio ?? device?.UsedMemRatio));
                 addMetric('Load', formatRemoteFleetNumber(device?.load1 ?? device?.Load1, 2));
-                card.appendChild(metrics);
+                if (densityState === 'dense') {
+                    const denseMeta = document.createElement('div');
+                    denseMeta.textContent = `Seen ${formatRemoteFleetAge(device?.lastSeenAt || device?.LastSeenAt)} - Mem ${formatRemoteFleetPercent(device?.usedMemRatio ?? device?.UsedMemRatio)} - Load ${formatRemoteFleetNumber(device?.load1 ?? device?.Load1, 2)}`;
+                    denseMeta.style.cssText = `
+                        color: #475569;
+                        font-size: 10px;
+                        font-weight: 750;
+                        line-height: 1.2;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        letter-spacing: 0;
+                    `;
+                    card.appendChild(denseMeta);
+                } else {
+                    card.appendChild(metrics);
+                }
 
                 if (latestTaskStatus || latestTaskTitle || latestTaskResult || latestTaskError) {
                     const taskBox = document.createElement('div');
@@ -12523,11 +12934,11 @@
                 actions.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;';
                 const status = document.createElement('span');
                 status.textContent = connectedDevice
-                    ? (aiAssistEnabled ? `AI ${aiModel || 'ready'}` : 'Connected')
+                    ? (liveStreamActive ? 'Live' : (aiAssistEnabled ? `AI ${aiModel || 'ready'}` : 'Connected'))
                     : 'Offline';
                 status.style.cssText = `
                     min-width: 0;
-                    color: ${connectedDevice ? '#047857' : '#64748b'};
+                    color: ${liveStreamActive ? '#b91c1c' : (connectedDevice ? '#047857' : '#64748b')};
                     font-size: 11px;
                     font-weight: 900;
                     overflow: hidden;
@@ -12536,6 +12947,23 @@
                 `;
                 actions.appendChild(status);
                 if (connectedDevice && deviceId) {
+                    const focusButton = createRemoteFleetButton('Focus', 'Show this device in focused live panel', 'live-focus');
+                    focusButton.dataset.deviceId = deviceId;
+                    focusButton.style.height = '24px';
+                    focusButton.style.fontSize = '10px';
+                    actions.appendChild(focusButton);
+                    if (liveStreamEnabled) {
+                        const liveButton = createRemoteFleetButton(liveStreamActive ? 'Stop' : 'Live', liveStreamActive ? 'Stop live stream' : 'Start focused live stream', liveStreamActive ? 'live-stop' : 'live-start');
+                        liveButton.dataset.deviceId = deviceId;
+                        liveButton.dataset.streamId = liveStreamId;
+                        liveButton.style.height = '24px';
+                        liveButton.style.fontSize = '10px';
+                        if (liveStreamActive) {
+                            liveButton.style.borderColor = 'rgba(220, 38, 38, 0.32)';
+                            liveButton.style.color = '#b91c1c';
+                        }
+                        actions.appendChild(liveButton);
+                    }
                     if (taskEnabled) {
                         const taskButton = createRemoteFleetButton('Task', 'Dispatch task to this device', 'task-device');
                         taskButton.dataset.deviceId = deviceId;
@@ -12559,12 +12987,31 @@
                 card.appendChild(actions);
                 grid.appendChild(card);
             });
+
+            const noMatch = document.createElement('div');
+            noMatch.dataset.remoteFleetNoMatch = 'true';
+            noMatch.textContent = 'No matching devices.';
+            noMatch.style.cssText = `
+                grid-column: 1 / -1;
+                display: none;
+                align-items: center;
+                min-height: 74px;
+                padding: 14px;
+                border-radius: 8px;
+                border: 1px dashed rgba(100, 116, 139, 0.36);
+                color: #475569;
+                font-size: 13px;
+                font-weight: 850;
+                background: rgba(255, 255, 255, 0.74);
+            `;
+            grid.appendChild(noMatch);
         }
 
         bodyView.appendChild(grid);
 
         const footer = document.createElement('div');
         footer.textContent = `Endpoint ${endpoint} · refreshed ${formatRemoteFleetAge(refreshedAt)}`;
+        footer.textContent = `Endpoint ${endpoint} - all devices, no paging - refreshed ${formatRemoteFleetAge(refreshedAt)}`;
         footer.style.cssText = `
             flex: 0 0 auto;
             color: #64748b;
@@ -12600,6 +13047,128 @@
 
         const readTaskInstruction = () => String(taskInput.value || '').trim();
         const useAiAssist = () => aiToggle.checked === true;
+        const getDeviceCards = () => Array.from(grid.querySelectorAll('article[data-device-id]'));
+        const getVisibleEligibleDeviceIds = () => {
+            const wantsAi = useAiAssist();
+            return getDeviceCards()
+                .filter(card => card.style.display !== 'none'
+                    && card.dataset.remoteFleetConnected === 'true'
+                    && card.dataset.remoteFleetTaskCapable === 'true'
+                    && (!wantsAi || card.dataset.remoteFleetAiCapable === 'true'))
+                .map(card => String(card.dataset.deviceId || '').trim())
+                .filter(Boolean);
+        };
+
+        const applyRemoteFleetFilters = () => {
+            const searchText = String(searchInput.value || '').trim().toLowerCase();
+            const terms = searchText.split(/\s+/).filter(Boolean);
+            const filterMode = String(filterSelect.value || 'all');
+            let visible = 0;
+            let eligible = 0;
+            const wantsAi = useAiAssist();
+
+            getDeviceCards().forEach(card => {
+                const matchesSearch = terms.length === 0
+                    || terms.every(term => String(card.dataset.remoteFleetSearchText || '').includes(term));
+                const matchesMode = filterMode === 'all'
+                    || (filterMode === 'connected' && card.dataset.remoteFleetConnected === 'true')
+                    || (filterMode === 'offline' && card.dataset.remoteFleetConnected !== 'true')
+                    || (filterMode === 'task' && card.dataset.remoteFleetConnected === 'true' && card.dataset.remoteFleetTaskCapable === 'true')
+                    || (filterMode === 'ai' && card.dataset.remoteFleetConnected === 'true' && card.dataset.remoteFleetAiCapable === 'true')
+                    || (filterMode === 'live' && card.dataset.remoteFleetLiveActive === 'true')
+                    || (filterMode === 'frames' && card.dataset.remoteFleetHasFrame === 'true')
+                    || (filterMode === 'issues' && card.dataset.remoteFleetIssue === 'true');
+                const show = matchesSearch && matchesMode;
+                card.style.display = show ? 'flex' : 'none';
+                if (show) {
+                    visible += 1;
+                    if (card.dataset.remoteFleetConnected === 'true'
+                        && card.dataset.remoteFleetTaskCapable === 'true'
+                        && (!wantsAi || card.dataset.remoteFleetAiCapable === 'true')) {
+                        eligible += 1;
+                    }
+                }
+            });
+
+            const noMatch = grid.querySelector('[data-remote-fleet-no-match="true"]');
+            if (noMatch) {
+                noMatch.style.display = devices.length > 0 && visible === 0 ? 'flex' : 'none';
+            }
+
+            matchCount.textContent = `${visible}/${devices.length}`;
+            matchCount.title = `${visible} visible, ${eligible} targetable`;
+            sendVisibleButton.disabled = eligible <= 0;
+            sendVisibleButton.title = eligible > 0
+                ? `Dispatch to ${eligible} visible target(s)`
+                : 'No visible targetable devices';
+            const allTargetCount = wantsAi ? aiCapableCount : taskCapableCount;
+            sendConnectedButton.disabled = allTargetCount <= 0;
+            sendConnectedButton.title = allTargetCount > 0
+                ? `Dispatch to ${allTargetCount} connected target(s)`
+                : 'No connected targetable devices';
+            grid.querySelectorAll('[data-remote-fleet-action="task-device"]').forEach(button => {
+                const card = button.closest('article[data-device-id]');
+                button.disabled = wantsAi && card?.dataset.remoteFleetAiCapable !== 'true';
+                button.title = button.disabled ? 'AI assist is not enabled on this device' : 'Dispatch task to this device';
+            });
+
+            bodyView.dataset.remoteFleetSearch = searchText;
+            bodyView.dataset.remoteFleetFilter = filterMode;
+            bodyView.dataset.remoteFleetSort = String(sortSelect.value || 'status');
+            bodyView.dataset.remoteFleetDensity = String(densitySelect.value || 'cards');
+            bodyView.dataset.remoteFleetAiAssist = wantsAi ? 'true' : 'false';
+        };
+
+        [searchInput, filterSelect, sortSelect, densitySelect, aiToggle].forEach(control => {
+            ['mousedown', 'mouseup', 'click', 'dblclick', 'keydown'].forEach(eventName => {
+                control.addEventListener(eventName, event => event.stopPropagation());
+            });
+        });
+
+        searchInput.addEventListener('input', applyRemoteFleetFilters);
+        filterSelect.addEventListener('change', applyRemoteFleetFilters);
+        aiToggle.addEventListener('change', applyRemoteFleetFilters);
+        sortSelect.addEventListener('change', () => {
+            bodyView.dataset.remoteFleetSort = String(sortSelect.value || 'status');
+            renderRemoteFleetMonitor(bodyView, nodeModel);
+        });
+        densitySelect.addEventListener('change', () => {
+            bodyView.dataset.remoteFleetDensity = String(densitySelect.value || 'cards');
+            renderRemoteFleetMonitor(bodyView, nodeModel);
+        });
+        applyRemoteFleetFilters();
+
+        sendVisibleButton.addEventListener('click', async event => {
+            event.preventDefault();
+            event.stopPropagation();
+            const instruction = readTaskInstruction();
+            if (!instruction) {
+                setTaskFeedback('Write a task first.', 'error');
+                taskInput.focus();
+                return;
+            }
+
+            const targetIds = getVisibleEligibleDeviceIds();
+            if (targetIds.length === 0) {
+                setTaskFeedback('No visible targetable devices.', 'error');
+                return;
+            }
+
+            sendVisibleButton.disabled = true;
+            setTaskFeedback('Dispatching task to visible devices...');
+            try {
+                const result = await invokeDotNetAsync('DispatchRemoteFleetTaskBatchFromJs', nodeId, targetIds, instruction, useAiAssist());
+                await syncRemoteFleetNodeStateFromResult(result);
+                if (result?.success) {
+                    const mode = useAiAssist() ? 'AI task' : 'remote task';
+                    setTaskFeedback(`Queued ${result.queued || targetIds.length} visible ${mode}(s).`, 'success');
+                } else {
+                    setTaskFeedback(result?.error || 'Task dispatch failed.', 'error');
+                }
+            } finally {
+                applyRemoteFleetFilters();
+            }
+        });
 
         sendConnectedButton.addEventListener('click', async event => {
             event.preventDefault();
@@ -12623,7 +13192,7 @@
                     setTaskFeedback(result?.error || 'Task dispatch failed.', 'error');
                 }
             } finally {
-                sendConnectedButton.disabled = false;
+                applyRemoteFleetFilters();
             }
         });
 
@@ -12636,6 +13205,62 @@
             refreshButton.disabled = false;
         });
 
+        bodyView.querySelectorAll('[data-remote-fleet-action="live-focus"]').forEach(button => {
+            button.addEventListener('click', event => {
+                event.preventDefault();
+                event.stopPropagation();
+                const deviceId = String(button.dataset.deviceId || '').trim();
+                if (!deviceId) return;
+                bodyView.dataset.remoteFleetFocusDeviceId = deviceId;
+                renderRemoteFleetMonitor(bodyView, nodeModel);
+            });
+        });
+
+        bodyView.querySelectorAll('[data-remote-fleet-action="live-start"]').forEach(button => {
+            button.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                const deviceId = String(button.dataset.deviceId || '').trim();
+                if (!deviceId) return;
+                bodyView.dataset.remoteFleetFocusDeviceId = deviceId;
+                button.disabled = true;
+                setTaskFeedback('Starting focused live stream...');
+                try {
+                    const result = await invokeDotNetAsync('StartRemoteFleetLiveStreamFromJs', nodeId, deviceId);
+                    await syncRemoteFleetNodeStateFromResult(result);
+                    if (result?.success) {
+                        setTaskFeedback('Focused live stream started.', 'success');
+                    } else {
+                        setTaskFeedback(result?.error || 'Live stream start failed.', 'error');
+                    }
+                } finally {
+                    button.disabled = false;
+                }
+            });
+        });
+
+        bodyView.querySelectorAll('[data-remote-fleet-action="live-stop"]').forEach(button => {
+            button.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                const deviceId = String(button.dataset.deviceId || '').trim();
+                if (!deviceId) return;
+                button.disabled = true;
+                setTaskFeedback('Stopping focused live stream...');
+                try {
+                    const result = await invokeDotNetAsync('StopRemoteFleetLiveStreamFromJs', nodeId, deviceId, button.dataset.streamId || '');
+                    await syncRemoteFleetNodeStateFromResult(result);
+                    if (result?.success) {
+                        setTaskFeedback('Focused live stream stopped.', 'success');
+                    } else {
+                        setTaskFeedback(result?.error || 'Live stream stop failed.', 'error');
+                    }
+                } finally {
+                    button.disabled = false;
+                }
+            });
+        });
+
         grid.querySelectorAll('[data-remote-fleet-action="ping-device"]').forEach(button => {
             button.addEventListener('click', async event => {
                 event.preventDefault();
@@ -12670,6 +13295,7 @@
                     }
                 } finally {
                     button.disabled = false;
+                    applyRemoteFleetFilters();
                 }
             });
         });
@@ -12684,6 +13310,24 @@
                 button.disabled = false;
             });
         });
+
+        if (hasActiveLiveStream) {
+            bodyView._remoteFleetLiveRefreshTimer = setInterval(async () => {
+                if (!document.body.contains(bodyView)) {
+                    clearInterval(bodyView._remoteFleetLiveRefreshTimer);
+                    bodyView._remoteFleetLiveRefreshTimer = null;
+                    return;
+                }
+
+                try {
+                    const result = await invokeDotNetAsync('RefreshRemoteFleetMonitorNodeFromJs', nodeId);
+                    await syncRemoteFleetNodeStateFromResult(result);
+                } catch {
+                    clearInterval(bodyView._remoteFleetLiveRefreshTimer);
+                    bodyView._remoteFleetLiveRefreshTimer = null;
+                }
+            }, 1000);
+        }
     }
 
     function bindMemoNodeEvents(container, nodeModel) {