@mindexec/cli 0.2.23 → 0.2.25

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

@@ -12139,6 +12139,25 @@
         return `${Math.floor(seconds / 86400)}d ago`;
     }
 
+    function formatRemoteFleetTimeUntil(value) {
+        const timestamp = Date.parse(String(value || ''));
+        if (!Number.isFinite(timestamp)) {
+            return '-';
+        }
+
+        const seconds = Math.round((timestamp - Date.now()) / 1000);
+        if (seconds <= 0) {
+            return 'expired';
+        }
+        if (seconds < 60) {
+            return `${seconds}s left`;
+        }
+        if (seconds < 3600) {
+            return `${Math.floor(seconds / 60)}m left`;
+        }
+        return `${Math.floor(seconds / 3600)}h left`;
+    }
+
     function createRemoteFleetStat(label, value, tone = 'default', key = '') {
         const item = document.createElement('div');
         if (key) {
@@ -12244,6 +12263,142 @@
     const REMOTE_FLEET_TASK_FOLLOW_INITIAL_MS = 250;
     const REMOTE_FLEET_TASK_FOLLOW_REFRESH_MS = 2000;
     const REMOTE_FLEET_TASK_FOLLOW_MAX_TICKS = 60;
+    const REMOTE_FLEET_HOST_LEASE_REFRESH_MS = 10000;
+    const remoteFleetHostLeaseTimers = new Map();
+    const remoteFleetLocalHostTargets = new Map();
+
+    function findRemoteFleetBodyByNodeId(nodeId) {
+        const id = String(nodeId || '').trim();
+        if (!id) return null;
+        return Array.from(document.querySelectorAll('.map-node-remote-fleet__body[data-node-id]'))
+            .find(body => String(body.dataset.nodeId || '').trim() === id) || null;
+    }
+
+    function stopRemoteFleetHostLeaseTimer(nodeId) {
+        const id = String(nodeId || '').trim();
+        if (!id) return;
+        const entry = remoteFleetHostLeaseTimers.get(id);
+        if (entry?.timer) {
+            clearInterval(entry.timer);
+        }
+        remoteFleetHostLeaseTimers.delete(id);
+    }
+
+    function startRemoteFleetHostLeaseTimer(nodeId, renewCallback) {
+        const id = String(nodeId || '').trim();
+        if (!id || typeof renewCallback !== 'function') return;
+        const existing = remoteFleetHostLeaseTimers.get(id);
+        if (existing) {
+            existing.renewCallback = renewCallback;
+            return;
+        }
+
+        const entry = { renewCallback, timer: null };
+        const timer = setInterval(async () => {
+            const currentBody = findRemoteFleetBodyByNodeId(id);
+            if (!currentBody || currentBody.dataset.remoteFleetHostState !== 'hosting') {
+                stopRemoteFleetHostLeaseTimer(id);
+                return;
+            }
+
+            try {
+                await entry.renewCallback();
+            } catch {
+                stopRemoteFleetHostLeaseTimer(id);
+            }
+        }, REMOTE_FLEET_HOST_LEASE_REFRESH_MS);
+
+        timer?.unref?.();
+        entry.timer = timer;
+        remoteFleetHostLeaseTimers.set(id, entry);
+    }
+
+    function getRemoteFleetNodeStateId(nodeState) {
+        return String(nodeState?.nodeId ?? nodeState?.NodeId ?? nodeState?.id ?? nodeState?.Id ?? '').trim();
+    }
+
+    function ensureRemoteFleetNodeStateMetadata(nodeState) {
+        if (!nodeState || typeof nodeState !== 'object') return null;
+        const metadata = nodeState.metadata && typeof nodeState.metadata === 'object'
+            ? nodeState.metadata
+            : nodeState.Metadata && typeof nodeState.Metadata === 'object'
+                ? nodeState.Metadata
+                : {};
+        nodeState.metadata = metadata;
+        nodeState.Metadata = metadata;
+        return metadata;
+    }
+
+    function readRemoteFleetObjectField(source, camelKey, pascalKey, fallback = '') {
+        const value = source?.[camelKey] ?? source?.[pascalKey] ?? fallback;
+        return value === undefined || value === null ? fallback : value;
+    }
+
+    function isRemoteFleetResultSuccess(result) {
+        return result?.success === true || result?.Success === true || result?.ok === true || result?.Ok === true;
+    }
+
+    function isRemoteFleetResultActive(result) {
+        return result?.active === true || result?.Active === true;
+    }
+
+    function isRemoteFleetResultExplicitlyInactive(result) {
+        return result?.active === false || result?.Active === false;
+    }
+
+    function rememberRemoteFleetLocalHostTarget(nodeId, enabled, result) {
+        const id = String(nodeId || '').trim();
+        if (!id) return;
+        if (enabled !== true) {
+            if (isRemoteFleetResultSuccess(result)) {
+                remoteFleetLocalHostTargets.delete(id);
+                stopRemoteFleetHostLeaseTimer(id);
+            }
+            return;
+        }
+
+        if (!isRemoteFleetResultSuccess(result) || isRemoteFleetResultExplicitlyInactive(result)) {
+            return;
+        }
+
+        const hostTarget = result?.hostTarget || result?.HostTarget || {};
+        const now = new Date();
+        const expiresAt = String(readRemoteFleetObjectField(hostTarget, 'expiresAt', 'ExpiresAt', '') || '').trim()
+            || new Date(now.getTime() + 60000).toISOString();
+        remoteFleetLocalHostTargets.set(id, {
+            nodeId: id,
+            leaseId: String(readRemoteFleetObjectField(hostTarget, 'leaseId', 'LeaseId', '') || '').trim(),
+            endpoint: String(readRemoteFleetObjectField(hostTarget, 'endpoint', 'Endpoint', '') || '').trim(),
+            activatedAt: String(readRemoteFleetObjectField(hostTarget, 'activatedAt', 'ActivatedAt', '') || '').trim() || now.toISOString(),
+            updatedAt: String(readRemoteFleetObjectField(hostTarget, 'updatedAt', 'UpdatedAt', '') || '').trim() || now.toISOString(),
+            expiresAt
+        });
+    }
+
+    function applyRemoteFleetLocalHostTarget(nodeState) {
+        const nodeId = getRemoteFleetNodeStateId(nodeState);
+        if (!nodeId) return nodeState;
+        const localHost = remoteFleetLocalHostTargets.get(nodeId);
+        if (!localHost) return nodeState;
+
+        const expiresTime = Date.parse(localHost.expiresAt);
+        if (!Number.isFinite(expiresTime) || expiresTime <= Date.now()) {
+            remoteFleetLocalHostTargets.delete(nodeId);
+            stopRemoteFleetHostLeaseTimer(nodeId);
+            return nodeState;
+        }
+
+        const metadata = ensureRemoteFleetNodeStateMetadata(nodeState);
+        if (!metadata) return nodeState;
+        metadata.RemoteFleetHostTargetState = 'hosting';
+        metadata.RemoteFleetHostTargetNodeId = nodeId;
+        metadata.RemoteFleetHostTargetLeaseId = localHost.leaseId;
+        metadata.RemoteFleetHostTargetEndpoint = localHost.endpoint || metadata.RemoteFleetHubEndpoint || metadata.remoteFleetHubEndpoint || '';
+        metadata.RemoteFleetHostTargetActivatedAtUtc = localHost.activatedAt;
+        metadata.RemoteFleetHostTargetUpdatedAtUtc = localHost.updatedAt;
+        metadata.RemoteFleetHostTargetExpiresAtUtc = localHost.expiresAt;
+        return nodeState;
+    }
 
     function clearRemoteFleetTimers(bodyView) {
         if (!bodyView) return;
@@ -12259,6 +12414,10 @@
             clearTimeout(bodyView._remoteFleetTaskFollowTimer);
             bodyView._remoteFleetTaskFollowTimer = null;
         }
+        if (bodyView._remoteFleetHostLeaseTimer) {
+            clearInterval(bodyView._remoteFleetHostLeaseTimer);
+            bodyView._remoteFleetHostLeaseTimer = null;
+        }
     }
 
     function getRemoteFleetDeviceField(device, camelKey, pascalKey, fallback = '') {
@@ -12455,7 +12614,7 @@
     async function syncRemoteFleetNodeStateFromResult(result) {
         const nodeState = result?.nodeState || result?.refresh?.nodeState;
         if (nodeState && window.mindMap?.syncNodeStates) {
-            await window.mindMap.syncNodeStates([nodeState]);
+            await window.mindMap.syncNodeStates([applyRemoteFleetLocalHostTarget(nodeState)]);
         }
     }
 
@@ -12997,6 +13156,16 @@
         if (focusedDevice) {
             bodyView.dataset.remoteFleetFocusDeviceId = getRemoteFleetDeviceId(focusedDevice);
         }
+        const selectedState = bodyView.dataset.remoteFleetSelectedDeviceId || focusState || '';
+        const selectedDevice = devices.find(device => getRemoteFleetDeviceId(device) === selectedState)
+            || focusedDevice
+            || devices[0]
+            || null;
+        if (selectedDevice) {
+            bodyView.dataset.remoteFleetSelectedDeviceId = getRemoteFleetDeviceId(selectedDevice);
+        } else {
+            delete bodyView.dataset.remoteFleetSelectedDeviceId;
+        }
         const total = Number(getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetDeviceCount', devices.length));
         const connected = Number(getRemoteFleetMetadataValue(
             nodeModel,
@@ -13005,15 +13174,24 @@
         const taskCapableCount = devices.filter(device => isRemoteFleetDeviceConnected(device) && isRemoteFleetDeviceTaskCapable(device)).length;
         const aiCapableCount = devices.filter(device => isRemoteFleetDeviceConnected(device) && isRemoteFleetDeviceAiCapable(device)).length;
         const endpoint = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHubEndpoint', '127.0.0.1:5197');
-        const command = getRemoteFleetMetadataValue(
-            nodeModel,
-            'RemoteFleetConnectCommand',
-            `npx @mindexec/remote connect --manager ${endpoint} --pair <pair-token>`);
+        const managerPackage = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetManagerPackage', '@mindexec/cli');
+        const managerVersion = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetManagerVersion', '');
         const hubStatus = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHubStatus', 'offline');
         const refreshedAt = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetLastRefreshAtUtc', '');
         const lastError = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetLastError', '');
+        const hostTargetState = String(getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHostTargetState', 'inactive')).trim().toLowerCase();
+        const hostTargetNodeId = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHostTargetNodeId', '');
+        const hostTargetEndpoint = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHostTargetEndpoint', endpoint);
+        const hostTargetExpiresAt = getRemoteFleetMetadataValue(nodeModel, 'RemoteFleetHostTargetExpiresAtUtc', '');
+        const isHostingTarget = hostTargetState === 'hosting';
+        const otherMonitorHosting = hostTargetState === 'other-monitor';
+
+        if (!isHostingTarget) {
+            stopRemoteFleetHostLeaseTimer(nodeId);
+        }
 
         bodyView.dataset.src = `remote-fleet:${refreshedAt}:${devices.length}:${connected}`;
+        bodyView.dataset.remoteFleetHostState = hostTargetState;
         bodyView.classList.add('map-node-remote-fleet__body');
         bodyView.innerHTML = '';
         bodyView.style.cssText = `
@@ -13028,86 +13206,116 @@
             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;
+        const headerRow = document.createElement('div');
+        headerRow.style.cssText = `
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: 10px;
             flex: 0 0 auto;
+            min-width: 0;
         `;
-        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('Task', String(taskCapableCount), taskCapableCount > 0 ? 'online' : 'default'));
-        top.appendChild(createRemoteFleetStat('AI', String(aiCapableCount), aiCapableCount > 0 ? 'online' : 'default'));
-        bodyView.appendChild(top);
-
-        const commandRow = document.createElement('div');
-        commandRow.style.cssText = `
-            display: grid;
-            grid-template-columns: minmax(0, 1fr) auto auto auto;
-            gap: 8px;
-            align-items: center;
+        const headerMeta = document.createElement('div');
+        headerMeta.style.cssText = `
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        `;
+        const managerRow = document.createElement('div');
+        managerRow.dataset.remoteFleetManagerVersion = 'true';
+        managerRow.textContent = `${managerPackage}${managerVersion ? ` ${managerVersion}` : ''} - ${endpoint}`;
+        managerRow.title = managerRow.textContent;
+        managerRow.style.cssText = `
             flex: 0 0 auto;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: #475569;
+            font-size: 10px;
+            font-weight: 850;
+            line-height: 1.2;
+            letter-spacing: 0;
         `;
 
-        const commandText = document.createElement('code');
-        commandText.textContent = command;
-        commandText.style.cssText = `
+        const hostStatusRow = document.createElement('div');
+        hostStatusRow.dataset.remoteFleetHostState = 'true';
+        const hostStatusText = isHostingTarget
+            ? 'Host: Active'
+            : otherMonitorHosting
+                ? 'Host: Other monitor'
+                : 'Host: Inactive';
+        const hostLeaseText = isHostingTarget && hostTargetExpiresAt
+            ? ` - lease ${formatRemoteFleetTimeUntil(hostTargetExpiresAt)}`
+            : '';
+        hostStatusRow.textContent = `${hostStatusText}${hostLeaseText}`;
+        hostStatusRow.title = otherMonitorHosting
+            ? `Active host monitor: ${hostTargetNodeId || 'unknown'}`
+            : `Endpoint ${hostTargetEndpoint || endpoint}`;
+        hostStatusRow.style.cssText = `
+            flex: 0 0 auto;
             min-width: 0;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            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;
+            color: ${isHostingTarget ? '#047857' : otherMonitorHosting ? '#7c2d12' : '#64748b'};
+            font-size: 10px;
+            font-weight: 900;
             line-height: 1.2;
+            letter-spacing: 0;
         `;
-        commandText.title = command;
+        headerMeta.appendChild(managerRow);
+        headerMeta.appendChild(hostStatusRow);
 
-        const copyButton = createRemoteFleetButton('Copy', 'Copy agent command', 'copy-command');
-        const refreshButton = createRemoteFleetButton('Refresh', 'Refresh remote devices', 'refresh');
-        const autoMonitorLabel = document.createElement('label');
-        autoMonitorLabel.title = 'Refresh stale thumbnails on a bounded timer';
-        autoMonitorLabel.style.cssText = `
+        const hostActions = document.createElement('div');
+        hostActions.style.cssText = `
+            flex: 0 0 auto;
             display: inline-flex;
             align-items: center;
-            justify-content: center;
+            justify-content: flex-end;
             gap: 6px;
-            height: 34px;
-            padding: 0 9px;
-            border-radius: 7px;
-            border: 1px solid rgba(14, 165, 233, 0.28);
-            background: ${autoMonitorState ? 'rgba(240, 249, 255, 0.92)' : 'rgba(248, 250, 252, 0.92)'};
-            color: ${autoMonitorState ? '#0369a1' : '#475569'};
-            font-size: 11px;
-            font-weight: 900;
-            letter-spacing: 0;
-            cursor: pointer;
-            pointer-events: auto;
-            user-select: none;
         `;
-        const autoMonitorToggle = document.createElement('input');
-        autoMonitorToggle.type = 'checkbox';
-        autoMonitorToggle.checked = autoMonitorState;
-        autoMonitorToggle.dataset.remoteFleetAutoToggle = 'true';
-        autoMonitorToggle.style.cssText = `
-            width: 14px;
-            height: 14px;
-            margin: 0;
-            accent-color: #0284c7;
+        const hostButton = createRemoteFleetButton(
+            isHostingTarget ? 'Hosting' : 'Set Host',
+            isHostingTarget
+                ? 'Renew this monitor as the active host target for remote agents.'
+                : 'Set this monitor as the active host target for remote agents.',
+            'set-host');
+        hostButton.dataset.remoteFleetHostActive = isHostingTarget ? 'true' : 'false';
+        hostButton.style.height = '30px';
+        hostButton.style.minWidth = '78px';
+        hostButton.style.borderColor = isHostingTarget ? 'rgba(16, 185, 129, 0.38)' : 'rgba(37, 99, 235, 0.32)';
+        hostButton.style.background = isHostingTarget ? 'rgba(236, 253, 245, 0.96)' : '#ffffff';
+        hostButton.style.color = isHostingTarget ? '#047857' : '#1d4ed8';
+        let stopHostButton = null;
+        if (isHostingTarget) {
+            stopHostButton = createRemoteFleetButton('Stop', 'Stop using this monitor as the host target.', 'stop-host');
+            stopHostButton.style.height = '30px';
+            stopHostButton.style.borderColor = 'rgba(239, 68, 68, 0.30)';
+            stopHostButton.style.color = '#b91c1c';
+            stopHostButton.style.background = 'rgba(254, 242, 242, 0.94)';
+        }
+        hostActions.appendChild(hostButton);
+        if (stopHostButton) {
+            hostActions.appendChild(stopHostButton);
+        }
+        headerRow.appendChild(headerMeta);
+        headerRow.appendChild(hostActions);
+        bodyView.appendChild(headerRow);
+
+        const top = document.createElement('div');
+        top.style.cssText = `
+            display: grid;
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+            gap: 8px;
+            flex: 0 0 auto;
         `;
-        const autoMonitorText = document.createElement('span');
-        autoMonitorText.textContent = 'Auto';
-        autoMonitorLabel.appendChild(autoMonitorToggle);
-        autoMonitorLabel.appendChild(autoMonitorText);
-        commandRow.appendChild(commandText);
-        commandRow.appendChild(autoMonitorLabel);
-        commandRow.appendChild(copyButton);
-        commandRow.appendChild(refreshButton);
-        bodyView.appendChild(commandRow);
+        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('Task', String(taskCapableCount), taskCapableCount > 0 ? 'online' : 'default'));
+        top.appendChild(createRemoteFleetStat('AI', String(aiCapableCount), aiCapableCount > 0 ? 'online' : 'default'));
+        bodyView.appendChild(top);
 
         const filterRow = document.createElement('div');
         filterRow.style.cssText = `
@@ -13197,7 +13405,7 @@
 
         const taskRow = document.createElement('div');
         taskRow.style.cssText = `
-            display: grid;
+            display: none;
             grid-template-columns: minmax(0, 1fr) auto auto auto;
             gap: 8px;
             align-items: stretch;
@@ -13205,7 +13413,7 @@
         `;
         const taskInput = document.createElement('textarea');
         taskInput.dataset.remoteFleetTaskInput = 'true';
-        taskInput.placeholder = 'Task for remote agents';
+        taskInput.placeholder = '';
         taskInput.rows = 2;
         taskInput.style.cssText = `
             width: 100%;
@@ -13267,7 +13475,7 @@
         taskRow.appendChild(aiToggleLabel);
         taskRow.appendChild(sendVisibleButton);
         taskRow.appendChild(sendConnectedButton);
-        bodyView.appendChild(taskRow);
+        taskRow.dataset.remoteFleetTaskComposer = 'hidden';
 
         const taskFeedback = document.createElement('div');
         taskFeedback.dataset.remoteFleetTaskFeedback = 'true';
@@ -13606,14 +13814,299 @@
             bodyView.appendChild(errorEl);
         }
 
+        const createDevicePreview = (device, mode = 'tile') => {
+            const name = getRemoteFleetDeviceName(device);
+            const connectedDevice = isRemoteFleetDeviceConnected(device);
+            const thumbnailEnabled = device?.thumbnailEnabled === true || device?.ThumbnailEnabled === true;
+            const liveStreamEnabled = device?.liveStreamEnabled === true || device?.LiveStreamEnabled === true;
+            const thumbnailDataUrl = String(device?.thumbnailDataUrl || device?.ThumbnailDataUrl || '');
+            const thumbnailCapturedAt = String(device?.thumbnailCapturedAt || device?.ThumbnailCapturedAt || '');
+            const liveFrameDataUrl = String(device?.liveFrameDataUrl || device?.LiveFrameDataUrl || '');
+            const liveFrameReceivedAt = String(device?.liveFrameReceivedAt || device?.LiveFrameReceivedAt || '');
+            const hasThumbnail = hasRemoteFleetThumbnail(device);
+            const hasLiveFrame = hasRemoteFleetLiveFrame(device);
+            const previewDataUrl = hasLiveFrame ? liveFrameDataUrl : thumbnailDataUrl;
+            const previewAt = hasLiveFrame ? liveFrameReceivedAt : thumbnailCapturedAt;
+            const isDetail = mode === 'detail';
+
+            const preview = document.createElement('div');
+            preview.dataset.remoteFleetDevicePreview = mode;
+            preview.style.cssText = `
+                position: relative;
+                width: 100%;
+                aspect-ratio: 16 / 9;
+                overflow: hidden;
+                border-radius: ${isDetail ? '8px' : '6px'};
+                background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+                border: 1px solid rgba(15, 23, 42, ${isDetail ? '0.16' : '0.10'});
+            `;
+
+            if (hasLiveFrame || hasThumbnail) {
+                const image = document.createElement('img');
+                image.src = previewDataUrl;
+                image.alt = hasLiveFrame ? `${name} live frame` : `${name} thumbnail`;
+                image.loading = 'lazy';
+                image.decoding = 'async';
+                image.style.cssText = `
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    display: block;
+                `;
+                preview.appendChild(image);
+            } else {
+                const placeholder = document.createElement('div');
+                placeholder.textContent = thumbnailEnabled || liveStreamEnabled ? 'No screen' : 'No screen';
+                placeholder.style.cssText = `
+                    position: absolute;
+                    inset: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: rgba(226, 232, 240, 0.80);
+                    font-size: ${isDetail ? '12px' : '10px'};
+                    font-weight: 900;
+                    letter-spacing: 0;
+                `;
+                preview.appendChild(placeholder);
+            }
+
+            const dot = document.createElement('span');
+            dot.style.cssText = `
+                position: absolute;
+                left: ${isDetail ? '9px' : '6px'};
+                top: ${isDetail ? '9px' : '6px'};
+                width: ${isDetail ? '10px' : '8px'};
+                height: ${isDetail ? '10px' : '8px'};
+                border-radius: 999px;
+                background: ${connectedDevice ? '#10b981' : '#94a3b8'};
+                box-shadow: 0 0 0 3px ${connectedDevice ? 'rgba(16,185,129,0.20)' : 'rgba(148,163,184,0.18)'};
+            `;
+            preview.appendChild(dot);
+
+            if (hasLiveFrame || (isDetail && previewAt)) {
+                const badge = document.createElement('span');
+                badge.textContent = hasLiveFrame
+                    ? (isDetail && previewAt ? `LIVE ${formatRemoteFleetAge(previewAt)}` : 'LIVE')
+                    : formatRemoteFleetAge(previewAt);
+                badge.style.cssText = `
+                    position: absolute;
+                    right: ${isDetail ? '9px' : '6px'};
+                    bottom: ${isDetail ? '9px' : '6px'};
+                    max-width: calc(100% - ${isDetail ? '18px' : '12px'});
+                    padding: ${isDetail ? '4px 7px' : '3px 6px'};
+                    border-radius: 999px;
+                    background: ${hasLiveFrame ? 'rgba(220, 38, 38, 0.84)' : 'rgba(15, 23, 42, 0.72)'};
+                    color: #e2e8f0;
+                    font-size: ${isDetail ? '9px' : '8px'};
+                    font-weight: 950;
+                    line-height: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    letter-spacing: 0;
+                `;
+                preview.appendChild(badge);
+            }
+
+            return preview;
+        };
+
+        const createSelectedDevicePanel = device => {
+            const panel = document.createElement('aside');
+            panel.dataset.remoteFleetDetailPanel = 'true';
+            panel.style.cssText = `
+                min-width: 0;
+                min-height: 0;
+                overflow-y: auto;
+                display: flex;
+                flex-direction: column;
+                gap: 9px;
+                padding: 10px;
+                border-radius: 8px;
+                border: 1px solid rgba(148, 163, 184, 0.28);
+                background: rgba(255, 255, 255, 0.86);
+            `;
+
+            if (!device) {
+                const empty = document.createElement('div');
+                empty.textContent = 'Select a screen';
+                empty.style.cssText = 'display:flex;align-items:center;justify-content:center;min-height:120px;color:#64748b;font-size:12px;font-weight:900;';
+                panel.appendChild(empty);
+                return panel;
+            }
+
+            const deviceId = getRemoteFleetDeviceId(device);
+            const name = getRemoteFleetDeviceName(device);
+            const connectedDevice = isRemoteFleetDeviceConnected(device);
+            const platform = [device?.platform || device?.Platform, device?.arch || device?.Arch]
+                .filter(Boolean)
+                .join(' / ') || 'unknown';
+            const release = String(device?.release || device?.Release || '');
+            const thumbnailEnabled = device?.thumbnailEnabled === true || device?.ThumbnailEnabled === true;
+            const liveStreamEnabled = device?.liveStreamEnabled === true || device?.LiveStreamEnabled === true;
+            const liveStreamActive = isRemoteFleetLiveActive(device);
+            const liveStreamId = String(device?.liveStreamId || device?.LiveStreamId || '');
+            const taskEnabled = isRemoteFleetDeviceTaskCapable(device);
+            const aiAssistEnabled = isRemoteFleetDeviceAiCapable(device);
+            const aiModel = String(device?.aiModel || device?.AiModel || '');
+            const latestTaskStatus = String(device?.latestTaskStatus || device?.LatestTaskStatus || '');
+            const latestTaskTitle = String(device?.latestTaskTitle || device?.LatestTaskTitle || '');
+            const latestTaskApproval = String(device?.latestTaskApprovalLevel || device?.LatestTaskApprovalLevel || '');
+            const latestTaskUpdatedAt = String(device?.latestTaskUpdatedAt || device?.LatestTaskUpdatedAt || '');
+            const latestTaskError = String(device?.latestTaskError || device?.LatestTaskError || '');
+            const latestTaskResultModel = String(device?.latestTaskResultModel || device?.LatestTaskResultModel || '');
+            const latestTaskResultResponseId = String(device?.latestTaskResultResponseId || device?.LatestTaskResultResponseId || '');
+            const latestTaskResult = String(device?.latestTaskResultSummary || device?.LatestTaskResultSummary || '');
+            const statusText = connectedDevice
+                ? (liveStreamActive ? 'Live' : (aiAssistEnabled ? `AI ${aiModel || 'ready'}` : 'Connected'))
+                : 'Offline';
+
+            panel.dataset.deviceId = deviceId;
+            panel.appendChild(createDevicePreview(device, 'detail'));
+
+            const header = document.createElement('div');
+            header.style.cssText = 'display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0;';
+            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;
+            title.style.cssText = 'color:#0f172a;font-size:14px;font-weight:950;line-height:1.15;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;font-weight:750;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;';
+            titleBox.appendChild(title);
+            titleBox.appendChild(subtitle);
+            const status = document.createElement('span');
+            status.textContent = statusText;
+            status.style.cssText = `
+                flex: 0 0 auto;
+                max-width: 82px;
+                padding: 4px 7px;
+                border-radius: 999px;
+                background: ${liveStreamActive ? 'rgba(254, 226, 226, 0.92)' : (connectedDevice ? 'rgba(209, 250, 229, 0.92)' : 'rgba(226, 232, 240, 0.92)')};
+                color: ${liveStreamActive ? '#b91c1c' : (connectedDevice ? '#047857' : '#475569')};
+                font-size: 9px;
+                font-weight: 950;
+                line-height: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                letter-spacing: 0;
+            `;
+            header.appendChild(titleBox);
+            header.appendChild(status);
+            panel.appendChild(header);
+
+            const metrics = document.createElement('div');
+            metrics.style.cssText = 'display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;';
+            const addDetailMetric = (label, value) => {
+                const metric = document.createElement('div');
+                metric.style.cssText = 'min-width:0;padding:7px 8px;border-radius:7px;background:rgba(241,245,249,0.86);border:1px solid rgba(148,163,184,0.16);';
+                const labelEl = document.createElement('div');
+                labelEl.textContent = label;
+                labelEl.style.cssText = 'color:#64748b;font-size:9px;font-weight:850;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:950;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;';
+                metric.appendChild(labelEl);
+                metric.appendChild(valueEl);
+                metrics.appendChild(metric);
+            };
+            addDetailMetric('Seen', formatRemoteFleetAge(device?.lastSeenAt || device?.LastSeenAt));
+            addDetailMetric('Uptime', formatRemoteFleetDuration(device?.uptimeSec ?? device?.UptimeSec));
+            addDetailMetric('Mem', formatRemoteFleetPercent(device?.usedMemRatio ?? device?.UsedMemRatio));
+            addDetailMetric('Load', formatRemoteFleetNumber(device?.load1 ?? device?.Load1, 2));
+            panel.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: 4px;
+                    min-width: 0;
+                    padding: 8px 9px;
+                    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');
+                const taskModeLabel = latestTaskApproval === 'ai-assist' ? 'AI' : 'Task';
+                taskLine.textContent = `${taskModeLabel} ${latestTaskStatus || 'task'}${latestTaskUpdatedAt ? ` - ${formatRemoteFleetAge(latestTaskUpdatedAt)}` : ''}${latestTaskResultModel ? ` - ${latestTaskResultModel}` : ''}`;
+                taskLine.title = latestTaskResultResponseId
+                    ? `${taskLine.textContent} (${latestTaskResultResponseId})`
+                    : taskLine.textContent;
+                taskLine.style.cssText = `color:${taskTone === 'error' ? '#991b1b' : taskTone === 'done' ? '#047857' : '#1d4ed8'};font-size:10px;font-weight:950;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;`;
+                const taskSummary = document.createElement('div');
+                taskSummary.textContent = formatRemoteFleetTaskError(latestTaskError) || latestTaskResult || latestTaskTitle || 'Task queued';
+                taskSummary.title = taskSummary.textContent;
+                taskSummary.style.cssText = 'color:#334155;font-size:10px;font-weight:750;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;letter-spacing:0;';
+                taskBox.appendChild(taskLine);
+                taskBox.appendChild(taskSummary);
+                panel.appendChild(taskBox);
+            }
+
+            const actions = document.createElement('div');
+            actions.style.cssText = 'display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;';
+            if (deviceId) {
+                const pinButton = createRemoteFleetButton('Pin', 'Pin this device as a canvas node', 'pin-device');
+                pinButton.dataset.deviceId = deviceId;
+                actions.appendChild(pinButton);
+            }
+            if (connectedDevice && deviceId) {
+                const focusButton = createRemoteFleetButton('Focus', 'Show this device in focused live panel', 'live-focus');
+                focusButton.dataset.deviceId = deviceId;
+                actions.appendChild(focusButton);
+                if (liveStreamEnabled) {
+                    const liveButton = createRemoteFleetButton(liveStreamActive ? 'Stop' : 'Live', liveStreamActive ? 'Stop live stream' : 'Start focused live stream', liveStreamActive ? 'live-stop' : 'live-start');
+                    liveButton.dataset.deviceId = deviceId;
+                    liveButton.dataset.streamId = liveStreamId;
+                    if (liveStreamActive) {
+                        liveButton.style.borderColor = 'rgba(220, 38, 38, 0.32)';
+                        liveButton.style.color = '#b91c1c';
+                    }
+                    actions.appendChild(liveButton);
+                }
+                if (thumbnailEnabled) {
+                    const thumbnailButton = createRemoteFleetButton('Shot', 'Request thumbnail', 'thumbnail-device');
+                    thumbnailButton.dataset.deviceId = deviceId;
+                    actions.appendChild(thumbnailButton);
+                }
+                const pingButton = createRemoteFleetButton('Ping', 'Ping device', 'ping-device');
+                pingButton.dataset.deviceId = deviceId;
+                actions.appendChild(pingButton);
+            }
+            panel.appendChild(actions);
+            return panel;
+        };
+
+        const monitorWorkspace = document.createElement('div');
+        monitorWorkspace.dataset.remoteFleetMonitorWorkspace = 'true';
+        monitorWorkspace.style.cssText = `
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow: hidden;
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) minmax(230px, 270px);
+            gap: 10px;
+            align-items: stretch;
+        `;
+
         const grid = document.createElement('div');
+        grid.dataset.remoteFleetDeviceGrid = 'true';
         grid.style.cssText = `
-            flex: 1 1 auto;
             min-height: 0;
             overflow-y: auto;
             overflow-x: hidden;
             display: grid;
-            grid-template-columns: ${densityState === 'dense' ? 'repeat(auto-fill, minmax(220px, 1fr))' : 'repeat(auto-fill, minmax(168px, 1fr))'};
+            grid-template-columns: ${densityState === 'dense' ? 'repeat(auto-fill, minmax(118px, 1fr))' : 'repeat(auto-fill, minmax(148px, 1fr))'};
             align-content: start;
             gap: 8px;
             padding-right: 4px;
@@ -13659,32 +14152,15 @@
             devices.forEach(device => {
                 const connectedDevice = isRemoteFleetDeviceConnected(device);
                 const name = getRemoteFleetDeviceName(device);
-                const platform = [device?.platform || device?.Platform, device?.arch || device?.Arch]
-                    .filter(Boolean)
-                    .join(' / ') || 'unknown';
-                const release = String(device?.release || device?.Release || '');
                 const deviceId = getRemoteFleetDeviceId(device);
-                const thumbnailEnabled = device?.thumbnailEnabled === true || device?.ThumbnailEnabled === true;
-                const thumbnailDataUrl = String(device?.thumbnailDataUrl || device?.ThumbnailDataUrl || '');
-                const thumbnailCapturedAt = String(device?.thumbnailCapturedAt || device?.ThumbnailCapturedAt || '');
                 const liveStreamEnabled = device?.liveStreamEnabled === true || device?.LiveStreamEnabled === true;
                 const liveStreamActive = isRemoteFleetLiveActive(device);
-                const liveStreamId = String(device?.liveStreamId || device?.LiveStreamId || '');
-                const liveFrameDataUrl = String(device?.liveFrameDataUrl || device?.LiveFrameDataUrl || '');
-                const liveFrameReceivedAt = String(device?.liveFrameReceivedAt || device?.LiveFrameReceivedAt || '');
                 const hasThumbnail = hasRemoteFleetThumbnail(device);
                 const hasLiveFrame = hasRemoteFleetLiveFrame(device);
                 const taskEnabled = isRemoteFleetDeviceTaskCapable(device);
                 const aiAssistEnabled = isRemoteFleetDeviceAiCapable(device);
-                const aiModel = String(device?.aiModel || device?.AiModel || '');
                 const latestTaskStatus = String(device?.latestTaskStatus || device?.LatestTaskStatus || '');
-                const latestTaskTitle = String(device?.latestTaskTitle || device?.LatestTaskTitle || '');
-                const latestTaskApproval = String(device?.latestTaskApprovalLevel || device?.LatestTaskApprovalLevel || '');
-                const latestTaskUpdatedAt = String(device?.latestTaskUpdatedAt || device?.LatestTaskUpdatedAt || '');
                 const latestTaskError = String(device?.latestTaskError || device?.LatestTaskError || '');
-                const latestTaskResultModel = String(device?.latestTaskResultModel || device?.LatestTaskResultModel || '');
-                const latestTaskResultResponseId = String(device?.latestTaskResultResponseId || device?.LatestTaskResultResponseId || '');
-                const latestTaskResult = String(device?.latestTaskResultSummary || device?.LatestTaskResultSummary || '');
                 const groupInfo = getRemoteFleetGroupInfo(device, groupState);
                 if (groupState !== 'none' && groupInfo.key && groupInfo.key !== lastGroupKey) {
                     const stat = groupStats.get(groupInfo.key) || { label: groupInfo.label, total: 0, connected: 0 };
@@ -13719,6 +14195,8 @@
                     grid.appendChild(groupHeader);
                     lastGroupKey = groupInfo.key;
                 }
+                const selectedDeviceId = selectedDevice ? getRemoteFleetDeviceId(selectedDevice) : '';
+                const isSelected = deviceId && deviceId === selectedDeviceId;
                 const card = document.createElement('article');
                 card.dataset.deviceId = deviceId;
                 card.dataset.remoteFleetSearchText = buildRemoteFleetSearchText(device);
@@ -13730,292 +14208,28 @@
                 card.dataset.remoteFleetLiveCapable = liveStreamEnabled ? 'true' : 'false';
                 card.dataset.remoteFleetLiveActive = liveStreamActive ? 'true' : 'false';
                 card.dataset.remoteFleetIssue = (!connectedDevice || latestTaskStatus === 'failed' || !!latestTaskError) ? 'true' : 'false';
+                card.dataset.remoteFleetSelected = isSelected ? 'true' : 'false';
+                card.dataset.remoteFleetAction = 'select-device';
+                card.setAttribute('role', 'button');
+                card.setAttribute('aria-label', `Show details for ${name}`);
+                card.tabIndex = 0;
+                card.title = name;
                 card.style.cssText = `
+                    position: relative;
                     display: flex;
-                    flex-direction: column;
-                    gap: ${densityState === 'dense' ? '6px' : '8px'};
+                    align-items: stretch;
                     min-width: 0;
-                    min-height: ${densityState === 'dense' ? '92px' : '134px'};
-                    padding: ${densityState === 'dense' ? '8px' : '10px'};
+                    min-height: ${densityState === 'dense' ? '66px' : '84px'};
+                    padding: 2px;
                     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);
-                `;
-
-                if (densityState !== 'dense') {
-                    const previewDataUrl = hasLiveFrame ? liveFrameDataUrl : thumbnailDataUrl;
-                    const previewAt = hasLiveFrame ? liveFrameReceivedAt : thumbnailCapturedAt;
-                    const preview = document.createElement('div');
-                    preview.style.cssText = `
-                        position: relative;
-                        width: 100%;
-                        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 (hasLiveFrame || hasThumbnail) {
-                        const image = document.createElement('img');
-                        image.src = previewDataUrl;
-                        image.alt = hasLiveFrame ? `${name} live frame` : `${name} thumbnail`;
-                        image.loading = 'lazy';
-                        image.decoding = 'async';
-                        image.style.cssText = `
-                            width: 100%;
-                            height: 100%;
-                            object-fit: cover;
-                            display: block;
-                        `;
-                        preview.appendChild(image);
-                    } else {
-                        const placeholder = document.createElement('div');
-                        placeholder.textContent = thumbnailEnabled ? 'No frame yet' : 'Status only';
-                        placeholder.style.cssText = `
-                            position: absolute;
-                            inset: 0;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            color: rgba(226, 232, 240, 0.78);
-                            font-size: 11px;
-                            font-weight: 900;
-                            letter-spacing: 0;
-                        `;
-                        preview.appendChild(placeholder);
-                    }
-                    if (previewAt) {
-                        const badge = document.createElement('span');
-                        badge.textContent = hasLiveFrame
-                            ? `LIVE ${formatRemoteFleetAge(previewAt)}`
-                            : formatRemoteFleetAge(previewAt);
-                        badge.style.cssText = `
-                            position: absolute;
-                            right: 6px;
-                            bottom: 6px;
-                            max-width: calc(100% - 12px);
-                            padding: 3px 6px;
-                            border-radius: 999px;
-                            background: ${hasLiveFrame ? 'rgba(220, 38, 38, 0.82)' : 'rgba(15, 23, 42, 0.74)'};
-                            color: #e2e8f0;
-                            font-size: 9px;
-                            font-weight: 900;
-                            line-height: 1;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                        `;
-                        preview.appendChild(badge);
-                    }
-                    card.appendChild(preview);
-                }
-
-                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));
-                if (densityState === 'dense') {
-                    const denseMeta = document.createElement('div');
-                    denseMeta.textContent = `Seen ${formatRemoteFleetAge(device?.lastSeenAt || device?.LastSeenAt)} - Mem ${formatRemoteFleetPercent(device?.usedMemRatio ?? device?.UsedMemRatio)} - Load ${formatRemoteFleetNumber(device?.load1 ?? device?.Load1, 2)}`;
-                    denseMeta.style.cssText = `
-                        color: #475569;
-                        font-size: 10px;
-                        font-weight: 750;
-                        line-height: 1.2;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        letter-spacing: 0;
-                    `;
-                    card.appendChild(denseMeta);
-                } else {
-                    card.appendChild(metrics);
-                }
-
-                if (latestTaskStatus || latestTaskTitle || latestTaskResult || latestTaskError) {
-                    const taskBox = document.createElement('div');
-                    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');
-                    const taskModeLabel = latestTaskApproval === 'ai-assist' ? 'AI' : 'Task';
-                    taskLine.textContent = `${taskModeLabel} ${latestTaskStatus || 'task'}${latestTaskUpdatedAt ? ` - ${formatRemoteFleetAge(latestTaskUpdatedAt)}` : ''}${latestTaskResultModel ? ` - ${latestTaskResultModel}` : ''}`;
-                    taskLine.title = latestTaskResultResponseId
-                        ? `${taskLine.textContent} (${latestTaskResultResponseId})`
-                        : taskLine.textContent;
-                    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 = formatRemoteFleetTaskError(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;gap:6px;flex-wrap:wrap;margin-top:auto;';
-                const status = document.createElement('span');
-                status.textContent = connectedDevice
-                    ? (liveStreamActive ? 'Live' : (aiAssistEnabled ? `AI ${aiModel || 'ready'}` : 'Connected'))
-                    : 'Offline';
-                status.style.cssText = `
-                    min-width: 0;
-                    color: ${liveStreamActive ? '#b91c1c' : (connectedDevice ? '#047857' : '#64748b')};
-                    font-size: 11px;
-                    font-weight: 900;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
+                    border: 2px solid ${isSelected ? 'rgba(37, 99, 235, 0.76)' : (connectedDevice ? 'rgba(16, 185, 129, 0.30)' : 'rgba(148, 163, 184, 0.24)')};
+                    box-shadow: ${isSelected ? '0 0 0 3px rgba(37, 99, 235, 0.15), 0 10px 22px rgba(15, 23, 42, 0.08)' : '0 8px 18px rgba(15, 23, 42, 0.05)'};
+                    cursor: pointer;
+                    pointer-events: auto;
+                    user-select: none;
                 `;
-                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;
-                    focusButton.style.height = '24px';
-                    focusButton.style.fontSize = '10px';
-                    actions.appendChild(focusButton);
-                    if (liveStreamEnabled) {
-                        const liveButton = createRemoteFleetButton(liveStreamActive ? 'Stop' : 'Live', liveStreamActive ? 'Stop live stream' : 'Start focused live stream', liveStreamActive ? 'live-stop' : 'live-start');
-                        liveButton.dataset.deviceId = deviceId;
-                        liveButton.dataset.streamId = liveStreamId;
-                        liveButton.style.height = '24px';
-                        liveButton.style.fontSize = '10px';
-                        if (liveStreamActive) {
-                            liveButton.style.borderColor = 'rgba(220, 38, 38, 0.32)';
-                            liveButton.style.color = '#b91c1c';
-                        }
-                        actions.appendChild(liveButton);
-                    }
-                    if (taskEnabled) {
-                        const taskButton = createRemoteFleetButton('Task', 'Dispatch task to this device', 'task-device');
-                        taskButton.dataset.deviceId = deviceId;
-                        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);
+                card.appendChild(createDevicePreview(device, 'tile'));
                 grid.appendChild(card);
             });
 
@@ -14038,7 +14252,9 @@
             grid.appendChild(noMatch);
         }
 
-        bodyView.appendChild(grid);
+        monitorWorkspace.appendChild(grid);
+        monitorWorkspace.appendChild(createSelectedDevicePanel(selectedDevice));
+        bodyView.appendChild(monitorWorkspace);
 
         const footer = document.createElement('div');
         footer.textContent = `Endpoint ${endpoint} - all devices, no paging - group ${groupState} - ${autoMonitorState ? 'auto monitor' : 'manual'} - refreshed ${formatRemoteFleetAge(refreshedAt)}`;
@@ -14054,12 +14270,6 @@
         `;
         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';
@@ -14264,9 +14474,12 @@
             sendConnectedButton.title = allTargetCount > 0
                 ? `Dispatch to ${allTargetCount} connected target(s)`
                 : 'No connected targetable devices';
-            grid.querySelectorAll('[data-remote-fleet-action="task-device"]').forEach(button => {
-                const card = button.closest('article[data-device-id]');
-                button.disabled = wantsAi && card?.dataset.remoteFleetAiCapable !== 'true';
+            bodyView.querySelectorAll('[data-remote-fleet-action="task-device"]').forEach(button => {
+                const deviceId = String(button.dataset.deviceId || '').trim();
+                const card = getDeviceCards().find(item => String(item.dataset.deviceId || '').trim() === deviceId);
+                const aiCapable = button.dataset.remoteFleetAiCapable === 'true'
+                    || card?.dataset.remoteFleetAiCapable === 'true';
+                button.disabled = wantsAi && !aiCapable;
                 button.title = button.disabled ? 'AI assist is not enabled on this device' : 'Dispatch task to this device';
             });
 
@@ -14283,19 +14496,34 @@
                 control.addEventListener(eventName, event => event.stopPropagation());
             });
         });
-        [autoMonitorLabel, autoMonitorToggle].forEach(control => {
+        [hostButton, stopHostButton].forEach(control => {
+            if (!control) return;
             ['mousedown', 'mouseup', 'click', 'dblclick', 'keydown'].forEach(eventName => {
                 control.addEventListener(eventName, event => event.stopPropagation());
             });
         });
+        getDeviceCards().forEach(card => {
+            ['mousedown', 'mouseup', 'dblclick'].forEach(eventName => {
+                card.addEventListener(eventName, event => event.stopPropagation());
+            });
+            const selectCard = event => {
+                event.preventDefault();
+                event.stopPropagation();
+                const deviceId = String(card.dataset.deviceId || '').trim();
+                if (!deviceId) return;
+                bodyView.dataset.remoteFleetSelectedDeviceId = deviceId;
+                renderRemoteFleetMonitor(bodyView, nodeModel);
+            };
+            card.addEventListener('click', selectCard);
+            card.addEventListener('keydown', event => {
+                if (event.key !== 'Enter' && event.key !== ' ') return;
+                selectCard(event);
+            });
+        });
 
         searchInput.addEventListener('input', applyRemoteFleetFilters);
         filterSelect.addEventListener('change', applyRemoteFleetFilters);
         aiToggle.addEventListener('change', applyRemoteFleetFilters);
-        autoMonitorToggle.addEventListener('change', () => {
-            bodyView.dataset.remoteFleetAutoMonitor = autoMonitorToggle.checked ? 'true' : 'false';
-            renderRemoteFleetMonitor(bodyView, nodeModel);
-        });
         sortSelect.addEventListener('change', () => {
             bodyView.dataset.remoteFleetSort = String(sortSelect.value || 'status');
             renderRemoteFleetMonitor(bodyView, nodeModel);
@@ -14367,18 +14595,61 @@
             }
         });
 
-        refreshButton.addEventListener('click', async event => {
-            event.preventDefault();
-            event.stopPropagation();
-            refreshButton.disabled = true;
+        const setRemoteFleetHostTarget = async (enabled, options = {}) => {
+            const quiet = options?.quiet === true;
+            const activeButton = enabled ? hostButton : stopHostButton;
+            if (!quiet && activeButton) {
+                activeButton.disabled = true;
+            }
+
+            if (!quiet) {
+                setTaskFeedback(enabled ? 'Setting host target...' : 'Stopping host target...');
+            }
             try {
-                await refreshRemoteFleetNode();
+                const result = await invokeDotNetAsync('SetRemoteFleetHostFromJs', nodeId, enabled === true);
+                window.RuntimeTrace?.emit?.('remote.hostTarget.result', {
+                    nodeId,
+                    enabled: enabled === true,
+                    success: isRemoteFleetResultSuccess(result),
+                    active: isRemoteFleetResultActive(result),
+                    error: result?.error || result?.Error || ''
+                });
+                rememberRemoteFleetLocalHostTarget(nodeId, enabled === true, result);
+                await syncRemoteFleetNodeStateFromResult(result);
+                if (quiet) {
+                    return result;
+                }
+                if (isRemoteFleetResultSuccess(result) && enabled !== true) {
+                    stopRemoteFleetHostLeaseTimer(nodeId);
+                }
+                if (isRemoteFleetResultSuccess(result)) {
+                    setTaskFeedback(enabled ? 'Host target set.' : 'Host target stopped.', 'success');
+                } else {
+                    setTaskFeedback(result?.error || result?.Error || 'Host target update failed.', 'error');
+                }
+                return result;
             } finally {
-                refreshButton.disabled = false;
+                if (!quiet && activeButton) {
+                    activeButton.disabled = false;
+                }
             }
+        };
+
+        hostButton.addEventListener('click', async event => {
+            event.preventDefault();
+            event.stopPropagation();
+            await setRemoteFleetHostTarget(true);
         });
 
-        grid.querySelectorAll('[data-remote-fleet-action="pin-device"]').forEach(button => {
+        if (stopHostButton) {
+            stopHostButton.addEventListener('click', async event => {
+                event.preventDefault();
+                event.stopPropagation();
+                await setRemoteFleetHostTarget(false);
+            });
+        }
+
+        bodyView.querySelectorAll('[data-remote-fleet-action="pin-device"]').forEach(button => {
             button.addEventListener('click', async event => {
                 event.preventDefault();
                 event.stopPropagation();
@@ -14456,7 +14727,7 @@
             });
         });
 
-        grid.querySelectorAll('[data-remote-fleet-action="ping-device"]').forEach(button => {
+        bodyView.querySelectorAll('[data-remote-fleet-action="ping-device"]').forEach(button => {
             button.addEventListener('click', async event => {
                 event.preventDefault();
                 event.stopPropagation();
@@ -14467,7 +14738,7 @@
             });
         });
 
-        grid.querySelectorAll('[data-remote-fleet-action="task-device"]').forEach(button => {
+        bodyView.querySelectorAll('[data-remote-fleet-action="task-device"]').forEach(button => {
             button.addEventListener('click', async event => {
                 event.preventDefault();
                 event.stopPropagation();
@@ -14496,7 +14767,7 @@
             });
         });
 
-        grid.querySelectorAll('[data-remote-fleet-action="thumbnail-device"]').forEach(button => {
+        bodyView.querySelectorAll('[data-remote-fleet-action="thumbnail-device"]').forEach(button => {
             button.addEventListener('click', async event => {
                 event.preventDefault();
                 event.stopPropagation();
@@ -14507,6 +14778,10 @@
             });
         });
 
+        if (isHostingTarget) {
+            startRemoteFleetHostLeaseTimer(nodeId, () => setRemoteFleetHostTarget(true, { quiet: true }));
+        }
+
         if (hasActiveLiveStream) {
             bodyView._remoteFleetLiveRefreshTimer = setInterval(async () => {
                 if (!document.body.contains(bodyView)) {