@mindexec/cli 0.2.1 → 0.2.3

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

@@ -297,6 +297,17 @@
                 overflow: hidden !important;
             }
 
+            .css3d-resolution-wrapper.node-type-templatelauncher,
+            .css3d-resolution-wrapper.node-type-templatelauncher > .map-node,
+            .css3d-resolution-wrapper.node-type-templatelauncher > .map-node-template-card {
+                contain: layout style !important;
+                content-visibility: visible !important;
+                contain-intrinsic-size: auto !important;
+                isolation: isolate !important;
+                backface-visibility: visible !important;
+                -webkit-backface-visibility: visible !important;
+            }
+
             .css3d-resolution-wrapper.node-type-image .node-content-wrapper,
             .css3d-resolution-wrapper.node-type-video .node-content-wrapper,
             .css3d-resolution-wrapper.node-type-embed .node-content-wrapper,
@@ -3196,6 +3207,8 @@
 
             nodeModel.response = normalized;
             nodeModel.Response = normalized;
+            mediaEl.dataset.mediaSourceUrl = normalized;
+            mediaEl.dataset.resolvedMediaSourceUrl = normalized;
             mediaEl.setAttribute('src', normalized);
 
             if (contentTypeLower === 'video' && typeof mediaEl.load === 'function') {
@@ -3266,11 +3279,25 @@
             return;
         }
 
+        const clearVideoPlaybackError = () => {
+            if (contentTypeLower !== 'video') {
+                return;
+            }
+
+            const metadata = ensureCssMediaMetadata(nodeModel);
+            delete metadata.VideoPlaybackError;
+            delete metadata.videoPlaybackError;
+            delete metadata.VideoPlaybackErrorCode;
+            delete metadata.videoPlaybackErrorCode;
+            mediaEl.closest?.('.video-content')?.classList?.remove?.('mind-map-video-error');
+        };
+
         const handleReady = () => {
             if (contentTypeLower === 'image') {
                 mediaEl.dataset.mediaReady = '1';
                 mediaEl.style.opacity = '1';
             }
+            clearVideoPlaybackError();
             setAssetRefreshState(nodeModel, '', '');
             syncMediaLoadingRowForElement(mediaEl, nodeModel, contentTypeLower);
             mediaEl.dataset.assetRefreshAttempted = '';
@@ -3282,12 +3309,61 @@
             }
         };
 
-        mediaEl.onerror = () => {
+        const describeVideoElementError = () => {
+            const code = Number(mediaEl?.error?.code || 0);
+            const reason = {
+                1: 'loading was aborted',
+                2: 'a network error stopped loading',
+                3: 'the browser could not decode the media',
+                4: 'the browser does not support this codec or container'
+            }[code] || 'the browser could not load the media';
+            const source = getCssMediaCanonicalSource(mediaEl, nodeModel?.response || nodeModel?.Response || '');
+            let hint = 'Try H.264/AAC MP4 or WebM.';
+            try {
+                const parsed = new URL(source, window.location?.href || undefined);
+                const extension = parsed.pathname.split('.').pop()?.toLowerCase() || '';
+                if (extension === 'mov' || extension === 'm4v') {
+                    hint = 'MOV/M4V often fails in browsers unless encoded as H.264/AAC.';
+                }
+            } catch { }
+
+            return `Video playback failed: ${reason}. ${hint}`;
+        };
+
+        const markVideoElementError = () => {
+            if (contentTypeLower !== 'video') {
+                return;
+            }
+
+            const metadata = ensureCssMediaMetadata(nodeModel);
+            const message = describeVideoElementError();
+            metadata.VideoPlaybackError = message;
+            metadata.videoPlaybackError = message;
+            metadata.VideoPlaybackErrorCode = String(Number(mediaEl?.error?.code || 0));
+            metadata.videoPlaybackErrorCode = metadata.VideoPlaybackErrorCode;
+            mediaEl.closest?.('.video-content')?.classList?.add?.('mind-map-video-error');
+            setAssetRefreshState(nodeModel, 'failed', message);
+            syncMediaLoadingRowForElement(mediaEl, nodeModel, contentTypeLower);
+        };
+
+        const handleMediaError = async () => {
             if (contentTypeLower === 'image') {
                 mediaEl.dataset.mediaReady = '0';
                 mediaEl.style.opacity = '0';
             }
-            void tryRefreshCssMediaSource(mediaEl, nodeModel, contentTypeLower);
+            const beforeSource = getCssMediaCanonicalSource(mediaEl, nodeModel?.response || nodeModel?.Response || '');
+            await tryRefreshCssMediaSource(mediaEl, nodeModel, contentTypeLower);
+            if (contentTypeLower === 'video') {
+                const afterSource = getCssMediaCanonicalSource(mediaEl, nodeModel?.response || nodeModel?.Response || '');
+                const refreshState = getAssetRefreshState(nodeModel);
+                if (afterSource === beforeSource && refreshState !== 'refreshing') {
+                    markVideoElementError();
+                }
+            }
+        };
+
+        mediaEl.onerror = () => {
+            void handleMediaError();
         };
 
         if (contentTypeLower === 'video') {
@@ -3324,6 +3400,7 @@
     const MEDIA_GENERATION_STATUS_METADATA_KEY = 'MediaGenerationStatus';
     const MEDIA_GENERATION_STATUS_MESSAGE_METADATA_KEY = 'MediaGenerationStatusMessage';
     const BUSINESS_AUTOMATION_SEMANTIC_TYPE = 'BusinessAutomationNode';
+    const REMOTE_FLEET_SEMANTIC_TYPE = 'RemoteFleetMonitor';
     const AUTOMATION_NODE_KIND_METADATA_KEY = 'AutomationNodeKind';
     const AUTOMATION_NODE_LABEL_METADATA_KEY = 'AutomationNodeLabel';
     const AUTOMATION_NODE_DESCRIPTION_METADATA_KEY = 'AutomationNodeDescription';
@@ -3493,6 +3570,10 @@
         return getNodeSemanticType(nodeModel) === BUSINESS_AUTOMATION_SEMANTIC_TYPE;
     }
 
+    function isRemoteFleetMonitorNode(nodeModel) {
+        return getNodeSemanticType(nodeModel) === REMOTE_FLEET_SEMANTIC_TYPE;
+    }
+
     function isBusinessAutomationContextSourceNode(nodeModel) {
         if (!nodeModel || isBusinessAutomationNode(nodeModel)) {
             return false;
@@ -3506,7 +3587,8 @@
         const semanticType = getNodeSemanticType(nodeModel);
         return semanticType === 'MindCanvasAgent'
             || semanticType === 'AgentCommand'
-            || semanticType === BUSINESS_AUTOMATION_SEMANTIC_TYPE;
+            || semanticType === BUSINESS_AUTOMATION_SEMANTIC_TYPE
+            || semanticType === REMOTE_FLEET_SEMANTIC_TYPE;
     }
 
     function allowsMemoExternalChrome(nodeModel) {
@@ -5740,7 +5822,7 @@
             tone = 'refresh';
         } else if ((contentTypeLower === 'image' || contentTypeLower === 'video') && assetRefreshState === 'failed') {
             showRow = true;
-            label = 'Asset refresh failed';
+            label = contentTypeLower === 'video' ? 'Video playback failed' : 'Asset refresh failed';
             message = assetRefreshMessage || 'Reload the board or reopen this file.';
             tone = 'failed';
         } else if (contentTypeLower === 'video') {
@@ -11758,6 +11840,18 @@
     function renderMemoBodyView(bodyView, nodeModel, content) {
         if (!bodyView) return;
 
+        if (isRemoteFleetMonitorNode(nodeModel)) {
+            renderRemoteFleetMonitor(bodyView, nodeModel);
+            return;
+        }
+
+        bodyView.classList.remove('map-node-remote-fleet__body');
+        bodyView.style.cssText = `
+            flex: 1 1 auto;
+            min-height: 0;
+            pointer-events: auto;
+        `;
+
         const nextValue = String(content || '');
         bodyView.dataset.src = nextValue;
 
@@ -11840,6 +11934,533 @@
         }, 220);
     }
 
+    function getRemoteFleetMetadataValue(nodeModel, key, fallback = '') {
+        const metadata = getNodeMetadata(nodeModel) || {};
+        const value = metadata[key];
+        return value === undefined || value === null ? fallback : String(value);
+    }
+
+    function parseRemoteFleetDevices(nodeModel) {
+        const raw = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetDevicesJson', '[]');
+        if (!raw.trim()) {
+            return [];
+        }
+
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        } catch {
+            return [];
+        }
+    }
+
+    function formatRemoteFleetNumber(value, digits = 0) {
+        const number = Number(value);
+        return Number.isFinite(number) ? number.toFixed(digits) : '-';
+    }
+
+    function formatRemoteFleetPercent(value) {
+        const number = Number(value);
+        if (!Number.isFinite(number)) {
+            return '-';
+        }
+
+        return `${Math.round(Math.max(0, Math.min(1, number)) * 100)}%`;
+    }
+
+    function formatRemoteFleetDuration(seconds) {
+        const value = Number(seconds);
+        if (!Number.isFinite(value) || value <= 0) {
+            return '-';
+        }
+
+        const days = Math.floor(value / 86400);
+        const hours = Math.floor((value % 86400) / 3600);
+        const minutes = Math.floor((value % 3600) / 60);
+        if (days > 0) {
+            return `${days}d ${hours}h`;
+        }
+        if (hours > 0) {
+            return `${hours}h ${minutes}m`;
+        }
+        return `${minutes}m`;
+    }
+
+    function formatRemoteFleetAge(value) {
+        const timestamp = Date.parse(String(value || ''));
+        if (!Number.isFinite(timestamp)) {
+            return '-';
+        }
+
+        const seconds = Math.max(0, Math.round((Date.now() - timestamp) / 1000));
+        if (seconds < 60) {
+            return 'now';
+        }
+        if (seconds < 3600) {
+            return `${Math.floor(seconds / 60)}m ago`;
+        }
+        if (seconds < 86400) {
+            return `${Math.floor(seconds / 3600)}h ago`;
+        }
+        return `${Math.floor(seconds / 86400)}d ago`;
+    }
+
+    function createRemoteFleetStat(label, value, tone = 'default') {
+        const item = document.createElement('div');
+        item.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            min-width: 0;
+            padding: 8px 10px;
+            border-radius: 8px;
+            background: ${tone === 'online' ? 'rgba(16, 185, 129, 0.10)' : 'rgba(15, 23, 42, 0.05)'};
+            border: 1px solid ${tone === 'online' ? 'rgba(16, 185, 129, 0.22)' : 'rgba(148, 163, 184, 0.22)'};
+        `;
+
+        const labelEl = document.createElement('span');
+        labelEl.textContent = label;
+        labelEl.style.cssText = `
+            color: #64748b;
+            font-size: 10px;
+            font-weight: 800;
+            letter-spacing: 0;
+            text-transform: uppercase;
+        `;
+
+        const valueEl = document.createElement('strong');
+        valueEl.textContent = value;
+        valueEl.style.cssText = `
+            color: ${tone === 'online' ? '#047857' : '#0f172a'};
+            font-size: 18px;
+            line-height: 1.1;
+            font-weight: 900;
+            letter-spacing: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        `;
+
+        item.appendChild(labelEl);
+        item.appendChild(valueEl);
+        return item;
+    }
+
+    function createRemoteFleetButton(label, title, action) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.dataset.remoteFleetAction = action;
+        button.textContent = label;
+        button.title = title || label;
+        button.setAttribute('aria-label', title || label);
+        button.style.cssText = `
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 0;
+            height: 28px;
+            padding: 0 10px;
+            border-radius: 7px;
+            border: 1px solid rgba(37, 99, 235, 0.32);
+            background: #ffffff;
+            color: #1d4ed8;
+            font-size: 11px;
+            font-weight: 800;
+            letter-spacing: 0;
+            cursor: pointer;
+            pointer-events: auto;
+        `;
+        return button;
+    }
+
+    async function syncRemoteFleetNodeStateFromResult(result) {
+        const nodeState = result?.nodeState || result?.refresh?.nodeState;
+        if (nodeState && window.mindMap?.syncNodeStates) {
+            await window.mindMap.syncNodeStates([nodeState]);
+        }
+    }
+
+    function renderRemoteFleetMonitor(bodyView, nodeModel) {
+        if (!bodyView) return;
+
+        const nodeId = String(nodeModel?.id ?? nodeModel?.Id ?? '');
+        const devices = parseRemoteFleetDevices(nodeModel);
+        const total = Number(getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetDeviceCount', devices.length));
+        const connected = Number(getRemoteFleetMetadataValue(
+            nodeModel,
+            'RemoteFleetConnectedDeviceCount',
+            devices.filter(device => device?.connected === true || device?.Connected === true).length));
+        const endpoint = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHubEndpoint', '127.0.0.1:5197');
+        const command = getRemoteFleetMetadataValue(
+            nodeModel,
+            'RemoteFleetConnectCommand',
+            `npx @mindexec/remote connect --manager ${endpoint} --pair <pair-token>`);
+        const hubStatus = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHubStatus', 'offline');
+        const refreshedAt = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetLastRefreshAtUtc', '');
+        const lastError = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetLastError', '');
+
+        bodyView.dataset.src = `remote-fleet:${refreshedAt}:${devices.length}:${connected}`;
+        bodyView.classList.add('map-node-remote-fleet__body');
+        bodyView.innerHTML = '';
+        bodyView.style.cssText = `
+            flex: 1 1 auto;
+            min-height: 0;
+            pointer-events: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            padding: 12px 14px 14px;
+            overflow: hidden;
+            background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.92));
+        `;
+
+        const top = document.createElement('div');
+        top.style.cssText = `
+            display: grid;
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+            gap: 8px;
+            flex: 0 0 auto;
+        `;
+        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'));
+        bodyView.appendChild(top);
+
+        const commandRow = document.createElement('div');
+        commandRow.style.cssText = `
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) auto auto;
+            gap: 8px;
+            align-items: center;
+            flex: 0 0 auto;
+        `;
+
+        const commandText = document.createElement('code');
+        commandText.textContent = command;
+        commandText.style.cssText = `
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding: 8px 10px;
+            border-radius: 7px;
+            background: rgba(15, 23, 42, 0.92);
+            color: #e2e8f0;
+            font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+            font-size: 11px;
+            line-height: 1.2;
+        `;
+        commandText.title = command;
+
+        const copyButton = createRemoteFleetButton('Copy', 'Copy agent command', 'copy-command');
+        const refreshButton = createRemoteFleetButton('Refresh', 'Refresh remote devices', 'refresh');
+        commandRow.appendChild(commandText);
+        commandRow.appendChild(copyButton);
+        commandRow.appendChild(refreshButton);
+        bodyView.appendChild(commandRow);
+
+        if (lastError.trim()) {
+            const errorEl = document.createElement('div');
+            errorEl.textContent = lastError;
+            errorEl.style.cssText = `
+                flex: 0 0 auto;
+                padding: 8px 10px;
+                border-radius: 7px;
+                background: rgba(248, 113, 113, 0.12);
+                color: #991b1b;
+                font-size: 12px;
+                line-height: 1.35;
+                font-weight: 700;
+                overflow-wrap: break-word;
+            `;
+            bodyView.appendChild(errorEl);
+        }
+
+        const grid = document.createElement('div');
+        grid.style.cssText = `
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow-y: auto;
+            overflow-x: hidden;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+            align-content: start;
+            gap: 8px;
+            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 {
+            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 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 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 card = document.createElement('article');
+                card.dataset.deviceId = deviceId;
+                card.style.cssText = `
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                    min-width: 0;
+                    min-height: 134px;
+                    padding: 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 = `
+                        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;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    `;
+                    preview.appendChild(badge);
+                }
+                card.appendChild(preview);
+
+                const cardHeader = document.createElement('div');
+                cardHeader.style.cssText = 'display:flex;align-items:flex-start;gap:8px;min-width:0;';
+                const dot = document.createElement('span');
+                dot.style.cssText = `
+                    flex: 0 0 auto;
+                    width: 9px;
+                    height: 9px;
+                    margin-top: 4px;
+                    border-radius: 999px;
+                    background: ${connectedDevice ? '#10b981' : '#94a3b8'};
+                    box-shadow: 0 0 0 4px ${connectedDevice ? 'rgba(16,185,129,0.14)' : 'rgba(148,163,184,0.14)'};
+                `;
+
+                const titleBox = document.createElement('div');
+                titleBox.style.cssText = 'min-width:0;display:flex;flex-direction:column;gap:2px;';
+                const title = document.createElement('strong');
+                title.textContent = name;
+                title.title = name;
+                title.style.cssText = `
+                    color: #0f172a;
+                    font-size: 13px;
+                    font-weight: 900;
+                    line-height: 1.2;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    letter-spacing: 0;
+                `;
+                const subtitle = document.createElement('span');
+                subtitle.textContent = release ? `${platform} ${release}` : platform;
+                subtitle.title = subtitle.textContent;
+                subtitle.style.cssText = `
+                    color: #64748b;
+                    font-size: 11px;
+                    line-height: 1.2;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    letter-spacing: 0;
+                `;
+                titleBox.appendChild(title);
+                titleBox.appendChild(subtitle);
+                cardHeader.appendChild(dot);
+                cardHeader.appendChild(titleBox);
+                card.appendChild(cardHeader);
+
+                const metrics = document.createElement('div');
+                metrics.style.cssText = `
+                    display: grid;
+                    grid-template-columns: repeat(2, minmax(0, 1fr));
+                    gap: 6px;
+                `;
+                const addMetric = (label, value) => {
+                    const metric = document.createElement('div');
+                    metric.style.cssText = `
+                        min-width: 0;
+                        padding: 6px 7px;
+                        border-radius: 7px;
+                        background: rgba(241, 245, 249, 0.84);
+                    `;
+                    const labelEl = document.createElement('div');
+                    labelEl.textContent = label;
+                    labelEl.style.cssText = 'color:#64748b;font-size:9px;font-weight:800;letter-spacing:0;text-transform:uppercase;';
+                    const valueEl = document.createElement('div');
+                    valueEl.textContent = value;
+                    valueEl.title = value;
+                    valueEl.style.cssText = 'color:#0f172a;font-size:12px;font-weight:900;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+                    metric.appendChild(labelEl);
+                    metric.appendChild(valueEl);
+                    metrics.appendChild(metric);
+                };
+                addMetric('Seen', formatRemoteFleetAge(device?.lastSeenAt || device?.LastSeenAt));
+                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);
+
+                const actions = document.createElement('div');
+                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 ? 'Connected' : 'Offline';
+                status.style.cssText = `
+                    min-width: 0;
+                    color: ${connectedDevice ? '#047857' : '#64748b'};
+                    font-size: 11px;
+                    font-weight: 900;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                `;
+                actions.appendChild(status);
+                if (connectedDevice && deviceId) {
+                    if (thumbnailEnabled) {
+                        const thumbnailButton = createRemoteFleetButton('Shot', 'Request thumbnail', 'thumbnail-device');
+                        thumbnailButton.dataset.deviceId = deviceId;
+                        thumbnailButton.style.height = '24px';
+                        thumbnailButton.style.fontSize = '10px';
+                        actions.appendChild(thumbnailButton);
+                    }
+                    const pingButton = createRemoteFleetButton('Ping', 'Ping device', 'ping-device');
+                    pingButton.dataset.deviceId = deviceId;
+                    pingButton.style.height = '24px';
+                    pingButton.style.fontSize = '10px';
+                    actions.appendChild(pingButton);
+                }
+                card.appendChild(actions);
+                grid.appendChild(card);
+            });
+        }
+
+        bodyView.appendChild(grid);
+
+        const footer = document.createElement('div');
+        footer.textContent = `Endpoint ${endpoint} · 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);
+
+        copyButton.addEventListener('click', event => {
+            event.preventDefault();
+            event.stopPropagation();
+            navigator.clipboard?.writeText?.(command).catch(() => { });
+        });
+
+        refreshButton.addEventListener('click', async event => {
+            event.preventDefault();
+            event.stopPropagation();
+            refreshButton.disabled = true;
+            const result = await invokeDotNetAsync('RefreshRemoteFleetMonitorNodeFromJs', nodeId);
+            await syncRemoteFleetNodeStateFromResult(result);
+            refreshButton.disabled = false;
+        });
+
+        grid.querySelectorAll('[data-remote-fleet-action="ping-device"]').forEach(button => {
+            button.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                button.disabled = true;
+                const result = await invokeDotNetAsync('PingRemoteFleetDeviceFromJs', nodeId, button.dataset.deviceId || '');
+                await syncRemoteFleetNodeStateFromResult(result);
+                button.disabled = false;
+            });
+        });
+
+        grid.querySelectorAll('[data-remote-fleet-action="thumbnail-device"]').forEach(button => {
+            button.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                button.disabled = true;
+                const result = await invokeDotNetAsync('RequestRemoteFleetThumbnailFromJs', nodeId, button.dataset.deviceId || '');
+                await syncRemoteFleetNodeStateFromResult(result);
+                button.disabled = false;
+            });
+        });
+    }
+
     function bindMemoNodeEvents(container, nodeModel) {
         if (!container || !nodeModel) return;
         ensureMindCanvasAgentConsoleResize(container, nodeModel);
@@ -12071,11 +12692,12 @@
         const agentStyledMemo = isAgentStyledMemoNode(nodeModel);
         const mindCanvasAgent = isMindCanvasAgentNode(nodeModel);
         const businessAutomation = isBusinessAutomationNode(nodeModel);
+        const remoteFleet = isRemoteFleetMonitorNode(nodeModel);
         const externalChrome = allowsMemoExternalChrome(nodeModel);
 
         const container = document.createElement('div');
         container.id = `node-${nodeModel.id}`;
-        container.className = `map-node css3d-dynamic-node map-node-memo${agentStyledMemo ? ' map-node-agent' : ''}${businessAutomation ? ' map-node-automation' : ''}`;
+        container.className = `map-node css3d-dynamic-node map-node-memo${agentStyledMemo ? ' map-node-agent' : ''}${businessAutomation ? ' map-node-automation' : ''}${remoteFleet ? ' map-node-remote-fleet' : ''}`;
         container.dataset.nodeId = nodeModel.id;
         container.dataset.semanticType = getNodeSemanticType(nodeModel);
         container.dataset.agentConsoleOpen = isMindCanvasAgentConsoleOpen(nodeModel) ? 'true' : 'false';
@@ -15214,10 +15836,12 @@
             const iconKey = getMemoIconKey(nodeModel);
             const agentStyledMemo = isAgentStyledMemoNode(nodeModel);
             const businessAutomation = isBusinessAutomationNode(nodeModel);
+            const remoteFleet = isRemoteFleetMonitorNode(nodeModel);
             const externalChrome = allowsMemoExternalChrome(nodeModel);
 
             memoEl.classList.toggle('map-node-agent', agentStyledMemo);
             memoEl.classList.toggle('map-node-automation', businessAutomation);
+            memoEl.classList.toggle('map-node-remote-fleet', remoteFleet);
             memoEl.dataset.semanticType = getNodeSemanticType(nodeModel);
             memoEl.dataset.agentPlanOpen = getRenderedMindCanvasAgentPlanOpen(memoEl, nodeModel) ? 'true' : 'false';
             memoEl.dataset.agentConsoleOpen = getRenderedMindCanvasAgentConsoleOpen(memoEl, nodeModel) ? 'true' : 'false';