@mindexec/cli 0.2.9 → 0.2.11

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

@@ -3401,6 +3401,7 @@
     const MEDIA_GENERATION_STATUS_MESSAGE_METADATA_KEY = 'MediaGenerationStatusMessage';
     const BUSINESS_AUTOMATION_SEMANTIC_TYPE = 'BusinessAutomationNode';
     const REMOTE_FLEET_SEMANTIC_TYPE = 'RemoteFleetMonitor';
+    const REMOTE_FLEET_DEVICE_SEMANTIC_TYPE = 'RemoteFleetDevice';
     const AUTOMATION_NODE_KIND_METADATA_KEY = 'AutomationNodeKind';
     const AUTOMATION_NODE_LABEL_METADATA_KEY = 'AutomationNodeLabel';
     const AUTOMATION_NODE_DESCRIPTION_METADATA_KEY = 'AutomationNodeDescription';
@@ -3574,6 +3575,16 @@
         return getNodeSemanticType(nodeModel) === REMOTE_FLEET_SEMANTIC_TYPE;
     }
 
+    function isRemoteFleetDeviceNode(nodeModel) {
+        return getNodeSemanticType(nodeModel) === REMOTE_FLEET_DEVICE_SEMANTIC_TYPE;
+    }
+
+    function isRemoteFleetNode(nodeModel) {
+        const semanticType = getNodeSemanticType(nodeModel);
+        return semanticType === REMOTE_FLEET_SEMANTIC_TYPE
+            || semanticType === REMOTE_FLEET_DEVICE_SEMANTIC_TYPE;
+    }
+
     function isBusinessAutomationContextSourceNode(nodeModel) {
         if (!nodeModel || isBusinessAutomationNode(nodeModel)) {
             return false;
@@ -3588,7 +3599,8 @@
         return semanticType === 'MindCanvasAgent'
             || semanticType === 'AgentCommand'
             || semanticType === BUSINESS_AUTOMATION_SEMANTIC_TYPE
-            || semanticType === REMOTE_FLEET_SEMANTIC_TYPE;
+            || semanticType === REMOTE_FLEET_SEMANTIC_TYPE
+            || semanticType === REMOTE_FLEET_DEVICE_SEMANTIC_TYPE;
     }
 
     function allowsMemoExternalChrome(nodeModel) {
@@ -11845,6 +11857,11 @@
             return;
         }
 
+        if (isRemoteFleetDeviceNode(nodeModel)) {
+            renderRemoteFleetDevice(bodyView, nodeModel);
+            return;
+        }
+
         bodyView.classList.remove('map-node-remote-fleet__body');
         bodyView.style.cssText = `
             flex: 1 1 auto;
@@ -11954,6 +11971,22 @@
         }
     }
 
+    function parseRemoteFleetPinnedDevice(nodeModel) {
+        const raw = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetPinnedDeviceJson', '{}');
+        if (!raw.trim()) {
+            return null;
+        }
+
+        try {
+            const parsed = JSON.parse(raw);
+            return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+                ? parsed
+                : null;
+        } catch {
+            return null;
+        }
+    }
+
     function formatRemoteFleetNumber(value, digits = 0) {
         const number = Number(value);
         return Number.isFinite(number) ? number.toFixed(digits) : '-';
@@ -12300,6 +12333,501 @@
         }
     }
 
+    function renderRemoteFleetDevice(bodyView, nodeModel) {
+        if (!bodyView) return;
+        clearRemoteFleetTimers(bodyView);
+
+        const nodeId = String(nodeModel?.id ?? nodeModel?.Id ?? '');
+        const device = parseRemoteFleetPinnedDevice(nodeModel);
+        const endpoint = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHubEndpoint', '127.0.0.1:5197');
+        const hubStatus = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHubStatus', 'offline');
+        const refreshedAt = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetLastRefreshAtUtc', '');
+        const lastError = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetLastError', '');
+        const deviceId = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetPinnedDeviceId', device ? getRemoteFleetDeviceId(device) : '');
+
+        bodyView.dataset.src = `remote-device:${deviceId}:${refreshedAt}`;
+        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(236, 253, 245, 0.78));
+        `;
+
+        const feedback = document.createElement('div');
+        feedback.dataset.remoteFleetDeviceFeedback = 'true';
+        feedback.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;
+        `;
+        const setFeedback = (message, tone = 'info') => {
+            feedback.textContent = message || '';
+            feedback.style.display = message ? 'block' : 'none';
+            feedback.style.background = tone === 'error'
+                ? 'rgba(248, 113, 113, 0.12)'
+                : tone === 'success'
+                    ? 'rgba(16, 185, 129, 0.10)'
+                    : 'rgba(37, 99, 235, 0.08)';
+            feedback.style.color = tone === 'error'
+                ? '#991b1b'
+                : tone === 'success'
+                    ? '#047857'
+                    : '#1d4ed8';
+        };
+
+        const refreshRemoteDeviceNode = async () => {
+            if (bodyView._remoteFleetRefreshInFlight === true) {
+                return null;
+            }
+
+            bodyView._remoteFleetRefreshInFlight = true;
+            try {
+                const result = await invokeDotNetAsync('RefreshRemoteFleetDeviceNodeFromJs', nodeId);
+                await syncRemoteFleetNodeStateFromResult(result);
+                return result;
+            } finally {
+                bodyView._remoteFleetRefreshInFlight = false;
+            }
+        };
+
+        if (!device || !deviceId) {
+            const empty = document.createElement('div');
+            empty.textContent = lastError || 'Pinned remote device snapshot is unavailable.';
+            empty.style.cssText = `
+                flex: 1 1 auto;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                min-height: 120px;
+                padding: 14px;
+                border-radius: 8px;
+                border: 1px dashed rgba(100, 116, 139, 0.36);
+                color: #475569;
+                font-size: 13px;
+                font-weight: 850;
+                text-align: center;
+                background: rgba(255, 255, 255, 0.74);
+            `;
+            const refreshButton = createRemoteFleetButton('Refresh', 'Refresh this pinned device', 'refresh-device');
+            refreshButton.style.height = '32px';
+            refreshButton.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                refreshButton.disabled = true;
+                try {
+                    await refreshRemoteDeviceNode();
+                } finally {
+                    refreshButton.disabled = false;
+                }
+            });
+            bodyView.appendChild(empty);
+            bodyView.appendChild(refreshButton);
+            bodyView.appendChild(feedback);
+            return;
+        }
+
+        const name = getRemoteFleetDeviceName(device);
+        const connected = isRemoteFleetDeviceConnected(device);
+        const taskEnabled = isRemoteFleetDeviceTaskCapable(device);
+        const aiAssistEnabled = isRemoteFleetDeviceAiCapable(device);
+        const thumbnailEnabled = isRemoteFleetThumbnailCapable(device);
+        const liveStreamEnabled = getRemoteFleetDeviceField(device, 'liveStreamEnabled', 'LiveStreamEnabled', false) === true;
+        const liveActive = isRemoteFleetLiveActive(device);
+        const liveStreamId = String(getRemoteFleetDeviceField(device, 'liveStreamId', 'LiveStreamId', ''));
+        const hasLiveFrame = hasRemoteFleetLiveFrame(device);
+        const hasThumbnail = hasRemoteFleetThumbnail(device);
+        const previewDataUrl = hasLiveFrame
+            ? String(getRemoteFleetDeviceField(device, 'liveFrameDataUrl', 'LiveFrameDataUrl', ''))
+            : String(getRemoteFleetDeviceField(device, 'thumbnailDataUrl', 'ThumbnailDataUrl', ''));
+        const previewAt = hasLiveFrame
+            ? String(getRemoteFleetDeviceField(device, 'liveFrameReceivedAt', 'LiveFrameReceivedAt', ''))
+            : String(getRemoteFleetDeviceField(device, 'thumbnailReceivedAt', 'ThumbnailReceivedAt',
+                getRemoteFleetDeviceField(device, 'thumbnailCapturedAt', 'ThumbnailCapturedAt', '')));
+        const platform = [
+            getRemoteFleetDeviceField(device, 'platform', 'Platform', 'unknown'),
+            getRemoteFleetDeviceField(device, 'arch', 'Arch', '')
+        ].filter(Boolean).join(' / ');
+        const release = String(getRemoteFleetDeviceField(device, 'release', 'Release', ''));
+        const latestTaskStatus = String(getRemoteFleetDeviceField(device, 'latestTaskStatus', 'LatestTaskStatus', ''));
+        const latestTaskTitle = String(getRemoteFleetDeviceField(device, 'latestTaskTitle', 'LatestTaskTitle', ''));
+        const latestTaskApproval = String(getRemoteFleetDeviceField(device, 'latestTaskApprovalLevel', 'LatestTaskApprovalLevel', ''));
+        const latestTaskUpdatedAt = String(getRemoteFleetDeviceField(device, 'latestTaskUpdatedAt', 'LatestTaskUpdatedAt', ''));
+        const latestTaskError = String(getRemoteFleetDeviceField(device, 'latestTaskError', 'LatestTaskError', ''));
+        const latestTaskResult = String(getRemoteFleetDeviceField(device, 'latestTaskResultSummary', 'LatestTaskResultSummary', ''));
+
+        const header = document.createElement('div');
+        header.style.cssText = 'display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex:0 0 auto;';
+        const titleBox = document.createElement('div');
+        titleBox.style.cssText = 'min-width:0;display:flex;flex-direction:column;gap:3px;';
+        const title = document.createElement('strong');
+        title.textContent = name;
+        title.title = `${name} (${deviceId})`;
+        title.style.cssText = 'color:#0f172a;font-size:16px;font-weight:950;line-height:1.12;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;';
+        const subtitle = document.createElement('span');
+        subtitle.textContent = `${connected ? 'Online' : 'Offline'} - ${release ? `${platform} ${release}` : platform}`;
+        subtitle.title = subtitle.textContent;
+        subtitle.style.cssText = `color:${connected ? '#047857' : '#64748b'};font-size:11px;font-weight:850;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;`;
+        titleBox.appendChild(title);
+        titleBox.appendChild(subtitle);
+        const statusBadge = document.createElement('span');
+        statusBadge.textContent = liveActive ? 'LIVE' : (connected ? 'READY' : 'OFFLINE');
+        statusBadge.style.cssText = `
+            flex: 0 0 auto;
+            padding: 5px 8px;
+            border-radius: 999px;
+            background: ${liveActive ? 'rgba(220, 38, 38, 0.12)' : connected ? 'rgba(16, 185, 129, 0.12)' : 'rgba(100, 116, 139, 0.12)'};
+            color: ${liveActive ? '#b91c1c' : connected ? '#047857' : '#475569'};
+            font-size: 10px;
+            font-weight: 950;
+            letter-spacing: 0;
+        `;
+        header.appendChild(titleBox);
+        header.appendChild(statusBadge);
+        bodyView.appendChild(header);
+
+        const preview = document.createElement('div');
+        preview.style.cssText = `
+            position: relative;
+            flex: 0 0 auto;
+            width: 100%;
+            aspect-ratio: 16 / 9;
+            overflow: hidden;
+            border-radius: 8px;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            border: 1px solid rgba(15, 23, 42, 0.16);
+        `;
+        if (hasLiveFrame || hasThumbnail) {
+            const image = document.createElement('img');
+            image.src = previewDataUrl;
+            image.alt = `${name} screen`;
+            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: 12px;
+                font-weight: 900;
+                letter-spacing: 0;
+            `;
+            preview.appendChild(placeholder);
+        }
+        const previewBadge = document.createElement('span');
+        previewBadge.textContent = hasLiveFrame
+            ? `LIVE ${previewAt ? formatRemoteFleetAge(previewAt) : ''}`.trim()
+            : (previewAt ? formatRemoteFleetAge(previewAt) : (hubStatus === 'online' ? 'Pinned' : 'Hub offline'));
+        previewBadge.style.cssText = `
+            position: absolute;
+            left: 7px;
+            bottom: 7px;
+            max-width: calc(100% - 14px);
+            padding: 4px 7px;
+            border-radius: 999px;
+            background: ${hasLiveFrame ? 'rgba(220, 38, 38, 0.84)' : 'rgba(15, 23, 42, 0.74)'};
+            color: #e2e8f0;
+            font-size: 9px;
+            font-weight: 950;
+            line-height: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            letter-spacing: 0;
+        `;
+        preview.appendChild(previewBadge);
+        bodyView.appendChild(preview);
+
+        const stats = document.createElement('div');
+        stats.style.cssText = 'display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;flex:0 0 auto;';
+        stats.appendChild(createRemoteFleetStat('Seen', formatRemoteFleetAge(getRemoteFleetDeviceField(device, 'lastSeenAt', 'LastSeenAt', '')), connected ? 'online' : 'default'));
+        stats.appendChild(createRemoteFleetStat('Uptime', formatRemoteFleetDuration(getRemoteFleetDeviceField(device, 'uptimeSec', 'UptimeSec', Number.NaN))));
+        stats.appendChild(createRemoteFleetStat('Mem', formatRemoteFleetPercent(getRemoteFleetDeviceField(device, 'usedMemRatio', 'UsedMemRatio', Number.NaN))));
+        stats.appendChild(createRemoteFleetStat('Load', formatRemoteFleetNumber(getRemoteFleetDeviceField(device, 'load1', 'Load1', Number.NaN), 2)));
+        bodyView.appendChild(stats);
+
+        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: 8px 9px;
+                border-radius: 8px;
+                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)'};
+                flex: 0 0 auto;
+            `;
+            const taskLine = document.createElement('div');
+            const taskModeLabel = latestTaskApproval === 'ai-assist' ? 'AI' : 'Task';
+            taskLine.textContent = `${taskModeLabel} ${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:11px;font-weight:750;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;letter-spacing:0;';
+            taskBox.appendChild(taskLine);
+            taskBox.appendChild(taskSummary);
+            bodyView.appendChild(taskBox);
+        }
+
+        const taskInput = document.createElement('textarea');
+        taskInput.dataset.remoteFleetDeviceTaskInput = 'true';
+        taskInput.placeholder = 'Task for this computer';
+        taskInput.rows = 2;
+        taskInput.style.cssText = `
+            width: 100%;
+            min-width: 0;
+            height: 50px;
+            resize: none;
+            border-radius: 8px;
+            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;
+        `;
+        bodyView.appendChild(taskInput);
+
+        const actions = document.createElement('div');
+        actions.style.cssText = 'display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:0 0 auto;';
+        const refreshButton = createRemoteFleetButton('Refresh', 'Refresh this pinned device', 'refresh-device');
+        refreshButton.style.height = '30px';
+        actions.appendChild(refreshButton);
+        if (connected && thumbnailEnabled) {
+            const shotButton = createRemoteFleetButton('Shot', 'Request thumbnail', 'thumbnail-device');
+            shotButton.dataset.deviceId = deviceId;
+            shotButton.style.height = '30px';
+            actions.appendChild(shotButton);
+        }
+        if (connected && liveStreamEnabled) {
+            const liveButton = createRemoteFleetButton(liveActive ? 'Stop' : 'Live', liveActive ? 'Stop live stream' : 'Start live stream', liveActive ? 'live-stop' : 'live-start');
+            liveButton.dataset.deviceId = deviceId;
+            liveButton.dataset.streamId = liveStreamId;
+            liveButton.style.height = '30px';
+            if (liveActive) {
+                liveButton.style.borderColor = 'rgba(220, 38, 38, 0.32)';
+                liveButton.style.color = '#b91c1c';
+            }
+            actions.appendChild(liveButton);
+        }
+        if (connected && taskEnabled) {
+            const taskButton = createRemoteFleetButton(aiAssistEnabled ? 'Task/AI' : 'Task', 'Dispatch task to this device', 'task-device');
+            taskButton.dataset.deviceId = deviceId;
+            taskButton.style.height = '30px';
+            actions.appendChild(taskButton);
+        }
+        if (connected) {
+            const pingButton = createRemoteFleetButton('Ping', 'Ping device', 'ping-device');
+            pingButton.dataset.deviceId = deviceId;
+            pingButton.style.height = '30px';
+            actions.appendChild(pingButton);
+        }
+        const aiToggleLabel = document.createElement('label');
+        aiToggleLabel.title = 'Use AI assist when this agent exposes it';
+        aiToggleLabel.style.cssText = `
+            display: ${aiAssistEnabled ? 'inline-flex' : 'none'};
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+            height: 30px;
+            padding: 0 9px;
+            border-radius: 7px;
+            border: 1px solid rgba(14, 165, 233, 0.28);
+            background: rgba(240, 249, 255, 0.92);
+            color: #0369a1;
+            font-size: 11px;
+            font-weight: 900;
+            letter-spacing: 0;
+            cursor: pointer;
+            pointer-events: auto;
+            user-select: none;
+        `;
+        const aiToggle = document.createElement('input');
+        aiToggle.type = 'checkbox';
+        aiToggle.dataset.remoteFleetDeviceAiToggle = 'true';
+        aiToggle.style.cssText = 'width:14px;height:14px;margin:0;accent-color:#0284c7;';
+        const aiToggleText = document.createElement('span');
+        aiToggleText.textContent = 'AI';
+        aiToggleLabel.appendChild(aiToggle);
+        aiToggleLabel.appendChild(aiToggleText);
+        actions.appendChild(aiToggleLabel);
+        bodyView.appendChild(actions);
+        bodyView.appendChild(feedback);
+
+        const footer = document.createElement('div');
+        footer.textContent = `Endpoint ${endpoint} - ${deviceId} - refreshed ${formatRemoteFleetAge(refreshedAt)}`;
+        footer.title = footer.textContent;
+        footer.style.cssText = `
+            margin-top: auto;
+            flex: 0 0 auto;
+            color: #64748b;
+            font-size: 10px;
+            font-weight: 750;
+            line-height: 1.2;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        `;
+        bodyView.appendChild(footer);
+
+        if (lastError.trim()) {
+            setFeedback(lastError, 'error');
+        }
+
+        [taskInput, aiToggleLabel, aiToggle, ...Array.from(actions.querySelectorAll('button'))].forEach(control => {
+            if (!control) return;
+            ['mousedown', 'mouseup', 'click', 'dblclick', 'keydown'].forEach(eventName => {
+                control.addEventListener(eventName, event => event.stopPropagation());
+            });
+        });
+
+        refreshButton.addEventListener('click', async event => {
+            event.preventDefault();
+            event.stopPropagation();
+            refreshButton.disabled = true;
+            try {
+                await refreshRemoteDeviceNode();
+            } finally {
+                refreshButton.disabled = false;
+            }
+        });
+
+        actions.querySelectorAll('[data-remote-fleet-action="thumbnail-device"]').forEach(button => {
+            button.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                button.disabled = true;
+                setFeedback('Requesting thumbnail...');
+                try {
+                    const result = await invokeDotNetAsync('RequestRemoteFleetThumbnailFromJs', nodeId, deviceId);
+                    await syncRemoteFleetNodeStateFromResult(result);
+                    setFeedback(result?.success ? 'Thumbnail refreshed.' : (result?.error || 'Thumbnail failed.'), result?.success ? 'success' : 'error');
+                } finally {
+                    button.disabled = false;
+                }
+            });
+        });
+
+        actions.querySelectorAll('[data-remote-fleet-action="live-start"]').forEach(button => {
+            button.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                button.disabled = true;
+                setFeedback('Starting live stream...');
+                try {
+                    const result = await invokeDotNetAsync('StartRemoteFleetLiveStreamFromJs', nodeId, deviceId);
+                    await syncRemoteFleetNodeStateFromResult(result);
+                    setFeedback(result?.success ? 'Live stream started.' : (result?.error || 'Live stream failed.'), result?.success ? 'success' : 'error');
+                } finally {
+                    button.disabled = false;
+                }
+            });
+        });
+
+        actions.querySelectorAll('[data-remote-fleet-action="live-stop"]').forEach(button => {
+            button.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                button.disabled = true;
+                setFeedback('Stopping live stream...');
+                try {
+                    const result = await invokeDotNetAsync('StopRemoteFleetLiveStreamFromJs', nodeId, deviceId, button.dataset.streamId || '');
+                    await syncRemoteFleetNodeStateFromResult(result);
+                    setFeedback(result?.success ? 'Live stream stopped.' : (result?.error || 'Live stop failed.'), result?.success ? 'success' : 'error');
+                } finally {
+                    button.disabled = false;
+                }
+            });
+        });
+
+        actions.querySelectorAll('[data-remote-fleet-action="ping-device"]').forEach(button => {
+            button.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                button.disabled = true;
+                setFeedback('Pinging device...');
+                try {
+                    const result = await invokeDotNetAsync('PingRemoteFleetDeviceFromJs', nodeId, deviceId);
+                    await syncRemoteFleetNodeStateFromResult(result);
+                    setFeedback(result?.success ? 'Ping queued.' : (result?.error || 'Ping failed.'), result?.success ? 'success' : 'error');
+                } finally {
+                    button.disabled = false;
+                }
+            });
+        });
+
+        actions.querySelectorAll('[data-remote-fleet-action="task-device"]').forEach(button => {
+            button.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                const instruction = String(taskInput.value || '').trim();
+                if (!instruction) {
+                    setFeedback('Write a task first.', 'error');
+                    taskInput.focus();
+                    return;
+                }
+
+                button.disabled = true;
+                setFeedback('Dispatching task...');
+                try {
+                    const result = await invokeDotNetAsync('DispatchRemoteFleetTaskFromJs', nodeId, deviceId, instruction, aiToggle.checked === true);
+                    await syncRemoteFleetNodeStateFromResult(result);
+                    setFeedback(result?.success ? 'Task queued.' : (result?.error || 'Task dispatch failed.'), result?.success ? 'success' : 'error');
+                } finally {
+                    button.disabled = false;
+                }
+            });
+        });
+
+        if (liveActive) {
+            bodyView._remoteFleetLiveRefreshTimer = setInterval(async () => {
+                if (!document.body.contains(bodyView)) {
+                    clearRemoteFleetTimers(bodyView);
+                    return;
+                }
+
+                try {
+                    await refreshRemoteDeviceNode();
+                } catch {
+                    clearRemoteFleetTimers(bodyView);
+                }
+            }, REMOTE_FLEET_LIVE_REFRESH_MS);
+        }
+    }
+
     function renderRemoteFleetMonitor(bodyView, nodeModel) {
         if (!bodyView) return;
         clearRemoteFleetTimers(bodyView);
@@ -13116,7 +13644,7 @@
                 }
 
                 const actions = document.createElement('div');
-                actions.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;';
+                actions.style.cssText = 'display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;';
                 const status = document.createElement('span');
                 status.textContent = connectedDevice
                     ? (liveStreamActive ? 'Live' : (aiAssistEnabled ? `AI ${aiModel || 'ready'}` : 'Connected'))
@@ -13131,6 +13659,13 @@
                     white-space: nowrap;
                 `;
                 actions.appendChild(status);
+                if (deviceId) {
+                    const pinButton = createRemoteFleetButton('Pin', 'Pin this device as a canvas node', 'pin-device');
+                    pinButton.dataset.deviceId = deviceId;
+                    pinButton.style.height = '24px';
+                    pinButton.style.fontSize = '10px';
+                    actions.appendChild(pinButton);
+                }
                 if (connectedDevice && deviceId) {
                     const focusButton = createRemoteFleetButton('Focus', 'Show this device in focused live panel', 'live-focus');
                     focusButton.dataset.deviceId = deviceId;
@@ -13431,6 +13966,28 @@
             }
         });
 
+        grid.querySelectorAll('[data-remote-fleet-action="pin-device"]').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('Pinning device to canvas...');
+                try {
+                    const result = await invokeDotNetAsync('AddRemoteFleetDeviceNodeFromJs', nodeId, deviceId);
+                    await syncRemoteFleetNodeStateFromResult(result);
+                    if (result?.success) {
+                        setTaskFeedback('Pinned device node.', 'success');
+                    } else {
+                        setTaskFeedback(result?.error || 'Pin failed.', 'error');
+                    }
+                } finally {
+                    button.disabled = false;
+                }
+            });
+        });
+
         bodyView.querySelectorAll('[data-remote-fleet-action="live-focus"]').forEach(button => {
             button.addEventListener('click', event => {
                 event.preventDefault();
@@ -13797,7 +14354,7 @@
         const agentStyledMemo = isAgentStyledMemoNode(nodeModel);
         const mindCanvasAgent = isMindCanvasAgentNode(nodeModel);
         const businessAutomation = isBusinessAutomationNode(nodeModel);
-        const remoteFleet = isRemoteFleetMonitorNode(nodeModel);
+        const remoteFleet = isRemoteFleetNode(nodeModel);
         const externalChrome = allowsMemoExternalChrome(nodeModel);
 
         const container = document.createElement('div');
@@ -13874,7 +14431,7 @@
 
         header.appendChild(iconWrap);
         header.appendChild(titleWrap);
-        if (agentStyledMemo && !businessAutomation) {
+        if (agentStyledMemo && !businessAutomation && !remoteFleet) {
             const roleSelect = createMindCanvasAgentRoleSelect(nodeModel);
             header.appendChild(roleSelect);
         }
@@ -16941,7 +17498,7 @@
             const iconKey = getMemoIconKey(nodeModel);
             const agentStyledMemo = isAgentStyledMemoNode(nodeModel);
             const businessAutomation = isBusinessAutomationNode(nodeModel);
-            const remoteFleet = isRemoteFleetMonitorNode(nodeModel);
+            const remoteFleet = isRemoteFleetNode(nodeModel);
             const externalChrome = allowsMemoExternalChrome(nodeModel);
 
             memoEl.classList.toggle('map-node-agent', agentStyledMemo);
@@ -16965,7 +17522,7 @@
                 titleInput.value = nextTitle;
             }
             disableEditorAssist(titleInput);
-            if (businessAutomation) {
+            if (businessAutomation || remoteFleet) {
                 memoEl.querySelector('.map-node-memo__agent-role-select')?.remove();
             } else {
                 updateMindCanvasAgentRoleSelect(memoEl, nodeModel);

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

@@ -57,6 +57,7 @@
 
     const BUSINESS_AUTOMATION_SEMANTIC_TYPE = 'BusinessAutomationNode';
     const REMOTE_FLEET_SEMANTIC_TYPE = 'RemoteFleetMonitor';
+    const REMOTE_FLEET_DEVICE_SEMANTIC_TYPE = 'RemoteFleetDevice';
     const AUTOMATION_INPUT_PINS_METADATA_KEY = 'AutomationInputPins';
     const AUTOMATION_OUTPUT_PINS_METADATA_KEY = 'AutomationOutputPins';
     const AUTOMATION_PIN_RAIL_WIDTH = 118;
@@ -103,7 +104,8 @@
         return semanticType === 'MindCanvasAgent'
             || semanticType === 'AgentCommand'
             || semanticType === BUSINESS_AUTOMATION_SEMANTIC_TYPE
-            || semanticType === REMOTE_FLEET_SEMANTIC_TYPE;
+            || semanticType === REMOTE_FLEET_SEMANTIC_TYPE
+            || semanticType === REMOTE_FLEET_DEVICE_SEMANTIC_TYPE;
     }
 
     function isAgentNodeModel(nodeModel) {