@mindexec/cli 0.2.2 → 0.2.4

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

@@ -3400,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';
@@ -3569,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;
@@ -3582,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) {
@@ -11834,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;
 
@@ -11916,6 +11934,715 @@
         }, 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);
+
+        const taskRow = document.createElement('div');
+        taskRow.style.cssText = `
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) auto;
+            gap: 8px;
+            align-items: stretch;
+            flex: 0 0 auto;
+        `;
+        const taskInput = document.createElement('textarea');
+        taskInput.dataset.remoteFleetTaskInput = 'true';
+        taskInput.placeholder = 'Task for remote agents';
+        taskInput.rows = 2;
+        taskInput.style.cssText = `
+            width: 100%;
+            min-width: 0;
+            height: 54px;
+            resize: none;
+            border-radius: 7px;
+            border: 1px solid rgba(148, 163, 184, 0.34);
+            background: rgba(255, 255, 255, 0.92);
+            color: #0f172a;
+            padding: 8px 10px;
+            font-size: 12px;
+            line-height: 1.35;
+            font-weight: 700;
+            letter-spacing: 0;
+            outline: none;
+            pointer-events: auto;
+        `;
+        const sendConnectedButton = createRemoteFleetButton('Send connected', 'Dispatch task to all connected task-capable devices', 'task-connected');
+        sendConnectedButton.style.height = '54px';
+        taskRow.appendChild(taskInput);
+        taskRow.appendChild(sendConnectedButton);
+        bodyView.appendChild(taskRow);
+
+        const taskFeedback = document.createElement('div');
+        taskFeedback.dataset.remoteFleetTaskFeedback = 'true';
+        taskFeedback.style.cssText = `
+            display: none;
+            flex: 0 0 auto;
+            min-height: 22px;
+            padding: 5px 8px;
+            border-radius: 7px;
+            background: rgba(37, 99, 235, 0.08);
+            color: #1d4ed8;
+            font-size: 11px;
+            font-weight: 800;
+            line-height: 1.25;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        `;
+        bodyView.appendChild(taskFeedback);
+
+        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 taskEnabled = device?.computerAgentEnabled === true || device?.ComputerAgentEnabled === true;
+                const latestTaskStatus = String(device?.latestTaskStatus || device?.LatestTaskStatus || '');
+                const latestTaskTitle = String(device?.latestTaskTitle || device?.LatestTaskTitle || '');
+                const latestTaskUpdatedAt = String(device?.latestTaskUpdatedAt || device?.LatestTaskUpdatedAt || '');
+                const latestTaskError = String(device?.latestTaskError || device?.LatestTaskError || '');
+                const latestTaskResult = String(device?.latestTaskResultSummary || device?.LatestTaskResultSummary || '');
+                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);
+
+                if (latestTaskStatus || latestTaskTitle || latestTaskResult || latestTaskError) {
+                    const taskBox = document.createElement('div');
+                    const taskTone = latestTaskError || latestTaskStatus === 'failed'
+                        ? 'error'
+                        : (latestTaskStatus === 'completed' ? 'done' : 'pending');
+                    taskBox.style.cssText = `
+                        display: flex;
+                        flex-direction: column;
+                        gap: 3px;
+                        min-width: 0;
+                        padding: 7px 8px;
+                        border-radius: 7px;
+                        background: ${taskTone === 'error' ? 'rgba(248, 113, 113, 0.12)' : taskTone === 'done' ? 'rgba(16, 185, 129, 0.10)' : 'rgba(37, 99, 235, 0.08)'};
+                        border: 1px solid ${taskTone === 'error' ? 'rgba(248, 113, 113, 0.24)' : taskTone === 'done' ? 'rgba(16, 185, 129, 0.20)' : 'rgba(37, 99, 235, 0.16)'};
+                    `;
+                    const taskLine = document.createElement('div');
+                    taskLine.textContent = `${latestTaskStatus || 'task'}${latestTaskUpdatedAt ? ` - ${formatRemoteFleetAge(latestTaskUpdatedAt)}` : ''}`;
+                    taskLine.style.cssText = `
+                        color: ${taskTone === 'error' ? '#991b1b' : taskTone === 'done' ? '#047857' : '#1d4ed8'};
+                        font-size: 10px;
+                        font-weight: 900;
+                        line-height: 1.2;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        letter-spacing: 0;
+                    `;
+                    const taskSummary = document.createElement('div');
+                    taskSummary.textContent = latestTaskError || latestTaskResult || latestTaskTitle || 'Task queued';
+                    taskSummary.title = taskSummary.textContent;
+                    taskSummary.style.cssText = `
+                        color: #334155;
+                        font-size: 10px;
+                        font-weight: 700;
+                        line-height: 1.25;
+                        overflow: hidden;
+                        display: -webkit-box;
+                        -webkit-line-clamp: 2;
+                        -webkit-box-orient: vertical;
+                        letter-spacing: 0;
+                    `;
+                    taskBox.appendChild(taskLine);
+                    taskBox.appendChild(taskSummary);
+                    card.appendChild(taskBox);
+                }
+
+                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 (taskEnabled) {
+                        const taskButton = createRemoteFleetButton('Task', 'Dispatch task to this device', 'task-device');
+                        taskButton.dataset.deviceId = deviceId;
+                        taskButton.style.height = '24px';
+                        taskButton.style.fontSize = '10px';
+                        actions.appendChild(taskButton);
+                    }
+                    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(() => { });
+        });
+
+        const setTaskFeedback = (message, tone = 'info') => {
+            taskFeedback.textContent = message || '';
+            taskFeedback.style.display = message ? 'block' : 'none';
+            taskFeedback.style.background = tone === 'error'
+                ? 'rgba(248, 113, 113, 0.12)'
+                : tone === 'success'
+                    ? 'rgba(16, 185, 129, 0.10)'
+                    : 'rgba(37, 99, 235, 0.08)';
+            taskFeedback.style.color = tone === 'error'
+                ? '#991b1b'
+                : tone === 'success'
+                    ? '#047857'
+                    : '#1d4ed8';
+        };
+
+        const readTaskInstruction = () => String(taskInput.value || '').trim();
+
+        sendConnectedButton.addEventListener('click', async event => {
+            event.preventDefault();
+            event.stopPropagation();
+            const instruction = readTaskInstruction();
+            if (!instruction) {
+                setTaskFeedback('Write a task first.', 'error');
+                taskInput.focus();
+                return;
+            }
+
+            sendConnectedButton.disabled = true;
+            setTaskFeedback('Dispatching task to connected devices...');
+            try {
+                const result = await invokeDotNetAsync('DispatchRemoteFleetTaskFromJs', nodeId, '', instruction);
+                await syncRemoteFleetNodeStateFromResult(result);
+                if (result?.success) {
+                    setTaskFeedback(`Queued ${result.queued || result.total || 1} remote task(s).`, 'success');
+                } else {
+                    setTaskFeedback(result?.error || 'Task dispatch failed.', 'error');
+                }
+            } finally {
+                sendConnectedButton.disabled = false;
+            }
+        });
+
+        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="task-device"]').forEach(button => {
+            button.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                const instruction = readTaskInstruction();
+                if (!instruction) {
+                    setTaskFeedback('Write a task first.', 'error');
+                    taskInput.focus();
+                    return;
+                }
+
+                button.disabled = true;
+                setTaskFeedback('Dispatching task to device...');
+                try {
+                    const result = await invokeDotNetAsync('DispatchRemoteFleetTaskFromJs', nodeId, button.dataset.deviceId || '', instruction);
+                    await syncRemoteFleetNodeStateFromResult(result);
+                    if (result?.success) {
+                        setTaskFeedback('Queued remote task.', 'success');
+                    } else {
+                        setTaskFeedback(result?.error || 'Task dispatch failed.', 'error');
+                    }
+                } finally {
+                    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);
@@ -12147,11 +12874,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';
@@ -15290,10 +16018,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';