@mindexec/cli 0.2.99 → 0.2.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindexec/cli",
-  "version": "0.2.99",
+  "version": "0.2.101",
   "description": "MindExec local runtime and bridge CLI",
   "main": "server.js",
   "type": "module",

package/scripts/remote-fleet-render-smoke.mjs

@@ -723,18 +723,14 @@ try {
     assert.equal(statusFooter.querySelectorAll('[data-remote-fleet-status-item]').length, 5);
     assert.ok(statusFooter.querySelector('[data-remote-fleet-status-item="route"]'));
     const initialDetailPanel = bodyView.querySelector('[data-remote-fleet-detail-panel="true"]');
-    assert.equal(initialDetailPanel?.dataset.deviceId, focusedDevice.DeviceId);
+    assert.equal(initialDetailPanel, null);
     const initialSelectedCard = bodyView.querySelector(`article[data-device-id="${focusedDevice.DeviceId}"]`);
-    assert.equal(initialSelectedCard?.dataset.remoteFleetSelected, 'true');
-    assert.equal(initialSelectedCard?.getAttribute('aria-pressed'), 'true');
-    assert.ok(initialSelectedCard?.querySelector('[data-remote-fleet-selected-indicator="true"]'));
-    assert.equal(bodyView.querySelectorAll('[data-remote-fleet-action="pin-device"]').length, 1);
+    assert.ok(initialSelectedCard);
+    assert.equal(initialSelectedCard?.querySelector('[data-remote-fleet-selected-indicator="true"]'), null);
+    assert.equal(bodyView.querySelectorAll('[data-remote-fleet-action="pin-device"]').length, 0);
     assert.equal(bodyView.querySelectorAll('[data-remote-fleet-action="task-device"]').length, 0);
-    assert.equal(bodyView.querySelectorAll('[data-remote-fleet-action="thumbnail-device"]').length, focusedDevice.Connected && focusedDevice.ThumbnailEnabled ? 1 : 0);
-    assert.ok(initialDetailPanel?.textContent.includes('Seen'));
-    assert.ok(initialDetailPanel?.textContent.includes('Uptime'));
-    assert.ok(initialDetailPanel?.textContent.includes('Mem'));
-    assert.ok(initialDetailPanel?.textContent.includes('Load'));
+    assert.equal(bodyView.querySelectorAll('[data-remote-fleet-action="thumbnail-device"]').length, 0);
+    assert.equal(bodyView.querySelectorAll('[data-remote-fleet-frame-badge="true"]').length, 0);
     assert.ok(cards[0]?.querySelector('[data-remote-fleet-device-preview="tile"]'));
     assert.equal(/\b(Seen|Uptime|Mem|Load)\b/.test(cards[0]?.textContent || ''), false);
     assert.match(deviceGrid.style.cssText, /minmax\(132px,\s*1fr\)/);
@@ -768,6 +764,7 @@ try {
     assert.equal(patchPreview.dataset.remoteFleetPendingFrameUrl || '', '');
     assert.ok(patchPreview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]'));
     assert.equal(patchPreview.querySelector('img[data-remote-fleet-frame-image="true"]')?.dataset.remoteFleetFrameUrl, patchUrl);
+    assert.equal(patchPreview.querySelector('[data-remote-fleet-frame-badge="true"]'), null);
     const alternateDevice = devices.find(device =>
         device.Connected === true
         && device.DeviceId !== focusedDevice.DeviceId);
@@ -776,11 +773,10 @@ try {
     assert.ok(alternateCard);
     alternateCard.dispatchEvent({ type: 'click' });
     assert.equal(bodyView.dataset.remoteFleetSelectedDeviceId, alternateDevice.DeviceId);
-    assert.equal(bodyView.querySelector('[data-remote-fleet-detail-panel="true"]')?.dataset.deviceId, alternateDevice.DeviceId);
+    assert.equal(bodyView.querySelector('[data-remote-fleet-detail-panel="true"]'), null);
     const selectedAfterClick = bodyView.querySelector(`article[data-device-id="${alternateDevice.DeviceId}"]`);
-    assert.equal(selectedAfterClick?.dataset.remoteFleetSelected, 'true');
-    assert.equal(selectedAfterClick?.getAttribute('aria-pressed'), 'true');
-    assert.ok(selectedAfterClick?.querySelector('[data-remote-fleet-selected-indicator="true"]'));
+    assert.ok(selectedAfterClick);
+    assert.equal(selectedAfterClick?.querySelector('[data-remote-fleet-selected-indicator="true"]'), null);
     const livePanel = bodyView.querySelector('[data-remote-fleet-live-panel="true"]');
     assert.equal(livePanel, null);
     assert.equal(bodyView.querySelector('[data-remote-fleet-action="task-visible"]'), null);
@@ -822,22 +818,18 @@ try {
     assert.equal(bodyView.querySelector('[data-remote-fleet-action="copy-command"]'), null);
     assert.equal(bodyView.querySelector('[data-remote-fleet-action="refresh"]'), null);
     assert.equal(bodyView.querySelector('[data-remote-fleet-auto-toggle="true"]'), null);
-    assert.ok(bodyView.textContent.includes('synthetic-render-ai'));
-    assert.ok(bodyView.textContent.includes('Task timed out waiting for the agent response.'));
+    assert.equal(bodyView.textContent.includes('synthetic-render-ai'), false);
+    assert.equal(bodyView.textContent.includes('Task timed out waiting for the agent response.'), false);
     const batchSummary = bodyView.querySelector('[data-remote-fleet-task-batch="true"]');
-    assert.ok(batchSummary);
-    assert.ok(batchSummary.textContent.includes('Render smoke batch'));
-    assert.ok(batchSummary.textContent.includes('208/210 done'));
-    assert.ok(batchSummary.textContent.includes('1 timed out'));
+    assert.equal(batchSummary, null);
     const batchHistory = bodyView.querySelector('[data-remote-fleet-task-history="true"]');
-    assert.ok(batchHistory);
-    assert.ok(batchHistory.textContent.includes('Previous AI batch'));
-    assert.ok(batchHistory.textContent.includes('42/42 done'));
+    assert.equal(batchHistory, null);
     const resultPanel = bodyView.querySelector('[data-remote-fleet-task-results="true"]');
-    assert.ok(resultPanel);
-    assert.ok(resultPanel.textContent.includes('synthetic-render-ai'));
-    assert.ok(resultPanel.textContent.includes('Overview AI result visible'));
+    assert.equal(resultPanel, null);
     assert.ok(devices.some(device => /^synthetic-response-/.test(device.LatestTaskResultResponseId)));
+    await wait();
+    const liveStartCalls = dotNetCalls.filter(call => call.methodName === 'StartRemoteFleetLiveStreamFromJs');
+    assert.ok(liveStartCalls.length > 1, `expected multiple visible live starts, got ${liveStartCalls.length}`);
     await wait(320);
     assert.ok(dotNetCalls.some(call => call.methodName === 'RefreshRemoteFleetMonitorNodeFromJs'));
     assert.equal(bodyView.dataset.remoteFleetTaskFollowKey, 'render-smoke-batch');

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

@@ -12976,8 +12976,8 @@
     const REMOTE_FLEET_MONITOR_REFRESH_MS = 10000;
     const REMOTE_FLEET_EMPTY_MONITOR_REFRESH_MS = 2500;
     const REMOTE_FLEET_LIVE_REFRESH_MS = 30000;
-    const REMOTE_FLEET_FOCUSED_LIVE_FPS = 10;
-    const REMOTE_FLEET_LIVE_FRAME_REFRESH_MS = Math.round(1000 / REMOTE_FLEET_FOCUSED_LIVE_FPS);
+    const REMOTE_FLEET_MONITOR_LIVE_FPS = 10;
+    const REMOTE_FLEET_LIVE_FRAME_REFRESH_MS = Math.round(1000 / REMOTE_FLEET_MONITOR_LIVE_FPS);
     const REMOTE_FLEET_THUMBNAIL_FRAME_REFRESH_MS = 2000;
     const REMOTE_FLEET_FRAME_CANVAS_MAX_DPR = 2;
     const REMOTE_FLEET_FRAME_BLOB_CACHE_MS = 10000;
@@ -13649,6 +13649,12 @@
             placeholder.remove();
         }
 
+        const previewMode = String(preview?.dataset?.remoteFleetDevicePreview || '');
+        if (previewMode === 'tile') {
+            preview.querySelector?.('[data-remote-fleet-frame-badge="true"]')?.remove();
+            return true;
+        }
+
         const badge = ensureRemoteFleetFrameBadge(preview, frame);
         if (badge) {
             const at = frame.receivedAt || frame.capturedAt || '';
@@ -15136,6 +15142,7 @@
         const recentTaskBatches = parseRemoteFleetRecentTaskBatches(nodeModel);
         const latestTaskBatchKey = getRemoteFleetTaskBatchKey(latestTaskBatch);
         const latestTaskBatchActive = isRemoteFleetTaskBatchActive(latestTaskBatch);
+        const showTaskSummarySurfaces = false;
         if (latestTaskBatchKey && bodyView.dataset.remoteFleetTaskFollowKey !== latestTaskBatchKey) {
             bodyView.dataset.remoteFleetTaskFollowKey = latestTaskBatchKey;
             bodyView.dataset.remoteFleetTaskFollowTicks = '0';
@@ -15442,7 +15449,7 @@
         `;
         bodyView.appendChild(taskFeedback);
 
-        if (latestTaskBatch) {
+        if (showTaskSummarySurfaces && latestTaskBatch) {
             const batchTotal = Number(latestTaskBatch.total ?? latestTaskBatch.Total ?? 0);
             const batchQueued = Number(latestTaskBatch.queued ?? latestTaskBatch.Queued ?? 0);
             const batchPending = Number(latestTaskBatch.pending ?? latestTaskBatch.Pending ?? 0);
@@ -15503,7 +15510,7 @@
         const visibleRecentBatches = recentTaskBatches
             .filter(batch => batch && String(batch.batchId ?? batch.BatchId ?? '').trim())
             .slice(0, 3);
-        if (visibleRecentBatches.length > 0) {
+        if (showTaskSummarySurfaces && visibleRecentBatches.length > 0) {
             const history = document.createElement('div');
             history.dataset.remoteFleetTaskHistory = 'true';
             history.style.cssText = `
@@ -15570,7 +15577,7 @@
             .filter(item => item.status || item.title || item.summary || item.error)
             .sort((left, right) => right.updatedMs - left.updatedMs)
             .slice(0, 4);
-        if (recentTaskResults.length > 0) {
+        if (showTaskSummarySurfaces && recentTaskResults.length > 0) {
             const resultPanel = document.createElement('div');
             resultPanel.dataset.remoteFleetTaskResults = 'true';
             resultPanel.style.cssText = `
@@ -15618,7 +15625,6 @@
             const previewSource = hasLiveFrame
                 ? getRemoteFleetFrameSource(device, 'live')
                 : getRemoteFleetFrameSource(device, 'thumbnail');
-            const previewAt = hasLiveFrame ? liveFrameReceivedAt : thumbnailCapturedAt;
             const isDetail = mode === 'detail';
 
             const preview = document.createElement('div');
@@ -15665,231 +15671,9 @@
                 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.dataset.remoteFleetFrameBadge = 'true';
-                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 = isRemoteFleetLiveCapable(device);
-            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;
-            const detailPreview = createDevicePreview(device, 'detail');
-            detailPreview.style.cursor = 'pointer';
-            detailPreview.addEventListener('dblclick', event => {
-                event.preventDefault();
-                event.stopPropagation();
-                bodyView.dataset.remoteFleetSelectedDeviceId = deviceId;
-                openRemoteFleetControlPopup(bodyView, nodeModel, deviceId);
-            });
-            panel.appendChild(detailPreview);
-
-            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 tileMetrics = getRemoteFleetTileMetrics(densityState);
         const tileMinWidth = tileMetrics.tileMinWidth;
         const tileMinHeight = tileMetrics.tileMinHeight;
@@ -15901,9 +15685,8 @@
             flex: 1 1 auto;
             min-height: 0;
             overflow: hidden;
-            display: grid;
-            grid-template-columns: minmax(0, 1fr) minmax(230px, 270px);
-            gap: 10px;
+            display: flex;
+            flex-direction: column;
             align-items: stretch;
             box-sizing: border-box;
         `;
@@ -16014,7 +15797,7 @@
                 card.dataset.remoteFleetAction = 'select-device';
                 card.setAttribute('role', 'button');
                 card.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
-                card.setAttribute('aria-label', `Show details for ${name}`);
+                card.setAttribute('aria-label', `Open remote control for ${name}`);
                 card.tabIndex = 0;
                 card.title = name;
                 card.style.cssText = `
@@ -16031,37 +15814,13 @@
                     padding: 2px;
                     border-radius: 8px;
                     background: #ffffff;
-                    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)'};
+                    border: 1px solid ${connectedDevice ? 'rgba(16, 185, 129, 0.28)' : 'rgba(148, 163, 184, 0.22)'};
+                    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
                     cursor: pointer;
                     pointer-events: auto;
                     user-select: none;
                 `;
                 card.appendChild(createDevicePreview(device, 'tile'));
-                if (isSelected) {
-                    const selectedIndicator = document.createElement('span');
-                    selectedIndicator.dataset.remoteFleetSelectedIndicator = 'true';
-                    selectedIndicator.innerHTML = '<i class="fa-solid fa-check" aria-hidden="true"></i>';
-                    selectedIndicator.title = 'Selected screen';
-                    selectedIndicator.style.cssText = `
-                        position: absolute;
-                        right: 6px;
-                        top: 6px;
-                        width: 18px;
-                        height: 18px;
-                        display: inline-flex;
-                        align-items: center;
-                        justify-content: center;
-                        border-radius: 999px;
-                        background: #2563eb;
-                        color: #ffffff;
-                        font-size: 9px;
-                        line-height: 1;
-                        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16), 0 8px 16px rgba(15, 23, 42, 0.16);
-                        pointer-events: none;
-                    `;
-                    card.appendChild(selectedIndicator);
-                }
                 grid.appendChild(card);
             });
 
@@ -16090,7 +15849,6 @@
             monitorWorkspace.appendChild(createRemoteFleetEmptyScreens(nodeModel, densityState));
         } else {
             monitorWorkspace.appendChild(grid);
-            monitorWorkspace.appendChild(createSelectedDevicePanel(selectedDevice));
         }
         bodyView.appendChild(monitorWorkspace);
         bodyView.appendChild(statusRail);
@@ -16148,77 +15906,90 @@
                 .filter(card => card.style.display !== 'none')
                 .map(card => String(card.dataset.deviceId || '').trim())
                 .filter(Boolean);
-            if (focusedDevice) {
-                const focusedId = getRemoteFleetDeviceId(focusedDevice);
-                if (focusedId) {
-                    ids.unshift(focusedId);
-                }
-            }
             return Array.from(new Set(ids)).slice(0, 120);
         };
-        const getFocusedLiveFrameDeviceIds = () => {
+        const getVisibleLiveDevices = () => {
+            const visibleIds = new Set(getVisibleFrameDeviceIds());
+            return devices
+                .filter(device => {
+                    const id = getRemoteFleetDeviceId(device);
+                    return id
+                        && visibleIds.has(id)
+                        && isRemoteFleetDeviceConnected(device)
+                        && isRemoteFleetLiveCapable(device);
+                })
+                .slice(0, 120);
+        };
+        const getVisibleLiveFrameDeviceIds = () => {
             const ids = [];
-            if (selectedDevice
-                && isRemoteFleetDeviceConnected(selectedDevice)
-                && (isRemoteFleetLiveCapable(selectedDevice) || isRemoteFleetLiveActive(selectedDevice))) {
-                pushUniqueFrameDeviceId(ids, selectedDevice);
-            }
-            if (focusedDevice
-                && isRemoteFleetDeviceConnected(focusedDevice)
-                && (isRemoteFleetLiveCapable(focusedDevice) || isRemoteFleetLiveActive(focusedDevice))) {
-                pushUniqueFrameDeviceId(ids, focusedDevice);
-            }
-            const autoLiveDevice = getAutoLiveDevice();
-            if (autoLiveDevice
-                && isRemoteFleetDeviceConnected(autoLiveDevice)
-                && isRemoteFleetLiveCapable(autoLiveDevice)) {
-                pushUniqueFrameDeviceId(ids, autoLiveDevice);
-            }
+            getVisibleLiveDevices().forEach(device => pushUniqueFrameDeviceId(ids, device));
             devices
                 .filter(device => isRemoteFleetDeviceConnected(device) && isRemoteFleetLiveActive(device))
-                .slice(0, 6)
                 .forEach(device => pushUniqueFrameDeviceId(ids, device));
-            return ids.slice(0, 8);
-        };
-        const getAutoLiveDevice = () => {
-            if (selectedDevice && isRemoteFleetDeviceConnected(selectedDevice) && isRemoteFleetLiveCapable(selectedDevice)) {
-                return selectedDevice;
-            }
-            if (focusedDevice && isRemoteFleetDeviceConnected(focusedDevice) && isRemoteFleetLiveCapable(focusedDevice)) {
-                return focusedDevice;
-            }
-            return devices.find(device => isRemoteFleetDeviceConnected(device) && isRemoteFleetLiveCapable(device)) || null;
+            return ids.slice(0, 120);
         };
-        const ensureFocusedRemoteFleetLiveStream = async () => {
-            const target = getAutoLiveDevice();
-            if (!target || isRemoteFleetLiveActive(target)) {
+        const ensureVisibleRemoteFleetLiveStreams = async () => {
+            if (!(bodyView._remoteFleetAutoLiveStartedIds instanceof Set)) {
+                bodyView._remoteFleetAutoLiveStartedIds = new Set();
+            }
+            const targets = getVisibleLiveDevices()
+                .filter(device => {
+                    const deviceId = getRemoteFleetDeviceId(device);
+                    return deviceId
+                        && !isRemoteFleetLiveActive(device)
+                        && !bodyView._remoteFleetAutoLiveStartedIds.has(deviceId);
+                });
+            if (targets.length === 0) {
                 return null;
             }
 
-            const deviceId = getRemoteFleetDeviceId(target);
-            if (!deviceId || bodyView._remoteFleetAutoLiveStartInFlight === deviceId) {
-                return null;
+            if (!(bodyView._remoteFleetAutoLiveStartInFlight instanceof Set)) {
+                bodyView._remoteFleetAutoLiveStartInFlight = new Set();
             }
 
-            bodyView._remoteFleetAutoLiveStartInFlight = deviceId;
-            try {
-                const result = await invokeDotNetAsync('StartRemoteFleetLiveStreamFromJs', nodeId, deviceId);
-                window.RuntimeTrace?.emit?.('remote.live.autoStart', {
-                    nodeId,
-                    deviceId,
-                    success: isRemoteFleetResultSuccess(result),
-                    fps: result?.fps || result?.Fps || 0,
-                    error: result?.error || result?.Error || ''
-                });
-                if (isRemoteFleetResultSuccess(result)) {
-                    await syncRemoteFleetNodeStateFromResult(result);
+            let started = 0;
+            let lastResult = null;
+            for (const target of targets) {
+                const deviceId = getRemoteFleetDeviceId(target);
+                if (!deviceId || bodyView._remoteFleetAutoLiveStartInFlight.has(deviceId)) {
+                    continue;
                 }
-                return result;
-            } finally {
-                if (bodyView._remoteFleetAutoLiveStartInFlight === deviceId) {
-                    bodyView._remoteFleetAutoLiveStartInFlight = '';
+
+                bodyView._remoteFleetAutoLiveStartInFlight.add(deviceId);
+                try {
+                    const result = await invokeDotNetAsync('StartRemoteFleetLiveStreamFromJs', nodeId, deviceId);
+                    lastResult = result;
+                    const success = isRemoteFleetResultSuccess(result);
+                    window.RuntimeTrace?.emit?.('remote.live.autoStart', {
+                        nodeId,
+                        deviceId,
+                        success,
+                        fps: result?.fps || result?.Fps || 0,
+                        mode: 'visible-grid',
+                        error: result?.error || result?.Error || ''
+                    });
+                    if (success) {
+                        started += 1;
+                        bodyView._remoteFleetAutoLiveStartedIds.add(deviceId);
+                    }
+                } finally {
+                    bodyView._remoteFleetAutoLiveStartInFlight.delete(deviceId);
+                }
+            }
+
+            if (started > 0) {
+                try {
+                    await refreshRemoteFleetNode();
+                } catch (error) {
+                    window.RuntimeTrace?.emit?.('remote.live.autoRefreshFailed', {
+                        nodeId,
+                        started,
+                        error: error?.message || String(error || '')
+                    });
                 }
             }
+
+            return lastResult || { success: started > 0, started };
         };
         const refreshRemoteFleetNode = async () => {
             if (bodyView._remoteFleetRefreshInFlight === true) {
@@ -16239,8 +16010,8 @@
             applyRemoteFleetFramePatches(bodyView, normalizeRemoteFleetDeviceFramePatches(result));
             return result;
         };
-        const refreshRemoteFleetFocusedLiveFrames = async () => {
-            const deviceIds = getFocusedLiveFrameDeviceIds();
+        const refreshRemoteFleetVisibleLiveFrames = async () => {
+            const deviceIds = getVisibleLiveFrameDeviceIds();
             if (deviceIds.length === 0) {
                 return null;
             }
@@ -16466,7 +16237,6 @@
                 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 => {
@@ -16763,15 +16533,16 @@
             startRemoteFleetHostLeaseTimer(nodeId, () => setRemoteFleetHostTarget(true, { quiet: true, renew: true }));
         }
 
-        const hasFocusedLiveTarget = getFocusedLiveFrameDeviceIds().length > 0 || !!getAutoLiveDevice();
-        if (hasFocusedLiveTarget || hasActiveLiveStream) {
-            ensureFocusedRemoteFleetLiveStream().catch(error => {
+        const hasVisibleLiveTarget = getVisibleLiveFrameDeviceIds().length > 0
+            || devices.some(device => isRemoteFleetDeviceConnected(device) && isRemoteFleetLiveCapable(device));
+        if (hasVisibleLiveTarget || hasActiveLiveStream) {
+            ensureVisibleRemoteFleetLiveStreams().catch(error => {
                 window.RuntimeTrace?.emit?.('remote.live.autoStartFailed', {
                     nodeId,
                     error: error?.message || String(error || '')
                 });
             });
-            startRemoteFleetFrameLoop(bodyView, REMOTE_FLEET_LIVE_FRAME_REFRESH_MS, () => refreshRemoteFleetFocusedLiveFrames());
+            startRemoteFleetFrameLoop(bodyView, REMOTE_FLEET_LIVE_FRAME_REFRESH_MS, () => refreshRemoteFleetVisibleLiveFrames());
             bodyView._remoteFleetLiveRefreshTimer = setInterval(async () => {
                 if (!document.body.contains(bodyView)) {
                     clearRemoteFleetTimers(bodyView);

package/wwwroot/_content/MindExecution.Shared/js/mindmap-toolbar.js

@@ -198,7 +198,7 @@
             if (!isNativeSelectFocusedInside(state.rootElement)) {
                 state.nativeSelectInteractionActive = false;
             }
-        }, 0);
+        }, 500);
     }
 
     function shouldIgnoreDocumentClickForNativeSelect(state) {
@@ -246,6 +246,35 @@
             clientY >= rect.top &&
             clientY <= rect.bottom;
     }
+
+    function isSurfaceOwnedPointerEvent(state, rootElement, event) {
+        if (!state || !event) {
+            return false;
+        }
+
+        return isEventInsideRoot(rootElement, event) ||
+            isPointerWithinElementBounds(rootElement, event) ||
+            isEventInsideIgnoredSelector(state.options?.ignoreSelector, event);
+    }
+
+    function rememberSurfacePointerDown(state, event) {
+        if (!state || !event) {
+            return;
+        }
+
+        const currentRootElement = resolveSurfaceRootElement(state.rootElement, state.options);
+        const isInsideSurface = isSurfaceOwnedPointerEvent(state, currentRootElement, event);
+        state.lastPointerDownInsideSurface = isInsideSurface;
+        state.lastPointerDownAt = getInteractionTime();
+
+        if (isInsideSurface) {
+            state.suppressNextDocumentClick = true;
+        }
+
+        if (isNativeSelectEvent(event)) {
+            markNativeSelectInteraction(state);
+        }
+    }
 
     function getUploadDropPosition(viewport) {
         const fallbackRect = viewport.getBoundingClientRect();
@@ -468,6 +497,10 @@
             document.removeEventListener('click', state.documentClickHandler, false);
         }
 
+        if (state.documentPointerDownHandler) {
+            document.removeEventListener('pointerdown', state.documentPointerDownHandler, true);
+        }
+
         if (state.helper) {
             surfaceOutsideClickCloseStatesByHelper.delete(state.helper);
         }
@@ -494,10 +527,13 @@
             suppressNextDocumentClick: false,
             nativeSelectInteractionActive: false,
             nativeSelectInteractionAt: 0,
+            lastPointerDownInsideSurface: false,
+            lastPointerDownAt: 0,
             rootPointerDownHandler: null,
             rootClickHandler: null,
             rootChangeHandler: null,
             rootFocusOutHandler: null,
+            documentPointerDownHandler: null,
             documentClickHandler: null
         };
 
@@ -526,6 +562,10 @@
             scheduleNativeSelectInteractionClear(state);
         };
 
+        state.documentPointerDownHandler = (event) => {
+            rememberSurfacePointerDown(state, event);
+        };
+
         state.documentClickHandler = (event) => {
             if (typeof event.button === 'number' && event.button !== 0) {
                 return;
@@ -555,6 +595,10 @@
                 return;
             }
 
+            if (state.lastPointerDownInsideSurface === true && getInteractionTime() - state.lastPointerDownAt < 1000) {
+                return;
+            }
+
             if (isEventInsideRoot(currentRootElement, event)) {
                 return;
             }
@@ -575,6 +619,7 @@
         state.rootElement.addEventListener('click', state.rootClickHandler, true);
         state.rootElement.addEventListener('change', state.rootChangeHandler, true);
         state.rootElement.addEventListener('focusout', state.rootFocusOutHandler, true);
+        document.addEventListener('pointerdown', state.documentPointerDownHandler, true);
         document.addEventListener('click', state.documentClickHandler, false);
 
         surfaceOutsideClickCloseStatesByHelper.set(helper, state);

package/wwwroot/_framework/blazor.boot.json

@@ -1,7 +1,7 @@
 {
   "mainAssemblyName": "MindExecution.Web",
   "resources": {
-    "hash": "sha256-we9qenVtePc2CABTfoN+/D96wdPuqIl4CgKuk3znAUA=",
+    "hash": "sha256-O56zjZxMQ+5iNAfOtWs8fbscWSt6EeGUYf66mN+CfeU=",
     "fingerprinting": {
       "Google.Protobuf.9h59ukbel7.dll": "Google.Protobuf.dll",
       "Markdig.d1j7v41cl1.dll": "Markdig.dll",
@@ -131,7 +131,7 @@
       "MindExecution.Plugins.Directory.u6p6pxpwxp.dll": "MindExecution.Plugins.Directory.dll",
       "MindExecution.Plugins.PlanMaster.0w4vr40lnz.dll": "MindExecution.Plugins.PlanMaster.dll",
       "MindExecution.Plugins.YouTube.sdl5n9uv68.dll": "MindExecution.Plugins.YouTube.dll",
-      "MindExecution.Shared.fprczldv6z.dll": "MindExecution.Shared.dll",
+      "MindExecution.Shared.6us6j8zcea.dll": "MindExecution.Shared.dll",
       "MindExecution.Web.xhlvm1d8ex.dll": "MindExecution.Web.dll",
       "dotnet.js": "dotnet.js",
       "dotnet.native.qc8g39g30v.js": "dotnet.native.js",
@@ -282,7 +282,7 @@
       "MindExecution.Kernel.7k773jan4j.dll": "sha256-B5H6hzB6g8sWLqXUoXifv8CbLqVt7g1lLkkinTBKF8E=",
       "MindExecution.Plugins.Concept.w4znwcrl6x.dll": "sha256-oNGAmbTjkFdVfZeYbc4jYWtyQa3c8Tle5LIXoFye4yo=",
       "MindExecution.Plugins.PlanMaster.0w4vr40lnz.dll": "sha256-gPWCEzDE7cJLOFTJOhja3JXJzkHFWd4dzfRdsdTxwps=",
-      "MindExecution.Shared.fprczldv6z.dll": "sha256-veGmVlpQw2b1zDaUWReHRSLbiZ2IloG79uo1GLlduEo=",
+      "MindExecution.Shared.6us6j8zcea.dll": "sha256-guVuBtyzsP6SsCtNUfA0tstOgfKPNycx1cgtuoL206Q=",
       "MindExecution.Web.xhlvm1d8ex.dll": "sha256-azcD8wLJIxuNSplzTVvh2ndLwdcu20xz1t8Jh23Dr7Q="
     },
     "lazyAssembly": {

package/wwwroot/index.html

@@ -7,8 +7,8 @@
     <title>MindExec | Run your ideas as AI task graphs</title>
     <meta name="description" content="MindExec is an AI execution canvas for solo builders, researchers, developers, and creators. Start with free browser tools, then move serious work into saved MindCanvas projects." />
     <base href="/" />
-    <link rel="stylesheet" href="_content/MindExecution.Shared/css/app.css?v=20260616-mdm-latest-frame-v559" />
-    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260616-mdm-latest-frame-v559" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/app.css?v=20260616-settings-stable-v561" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260616-settings-stable-v561" />
     <!-- ?쇄뼹??Font Awesome (local) ?쇄뼹??-->
     <link rel="stylesheet" href="_content/MindExecution.Shared/lib/font-awesome/css/all.min.css" />
     <!-- ?꿎뼯??-->
@@ -579,7 +579,7 @@
             }
 
             const base = '_content/MindExecution.Shared/js/';
-        const scriptVersion = '20260616-mdm-latest-frame-v559';
+        const scriptVersion = '20260616-settings-stable-v561';
             const scriptUrl = (script) => `${base}${script}?v=${scriptVersion}`;
             console.log(`[Script Loader] Shared JS version: ${scriptVersion}`);
             const criticalScripts = [

package/wwwroot/service-worker-assets.js

@@ -1,5 +1,5 @@
 self.assetsManifest = {
-    "version":  "EUMTR2WK",
+    "version":  "4FFMY3D0",
     "assets":  [
                    {
                        "hash":  "sha256-+CSYMcqLNTsq3VnH11jgYyOCCdxvHzL74CBmo4sCmMU=",
@@ -86,7 +86,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js.backup"
                    },
                    {
-                       "hash":  "sha256-moU5KG/6LqgoCKviugaQ703R/oh1u8n08Xkoih7tDUg=",
+                       "hash":  "sha256-MWVSM/VwUCyDL+ohY/7e6qDkkosGiE9E3t3DbiGJJEs=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-css3d-manager.js"
                    },
                    {
@@ -170,7 +170,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-visibility-worker.js"
                    },
                    {
-                       "hash":  "sha256-icukeXd/DhA/7V4F4NOJP9jiQfzjjjosaH7PK2ymqAg=",
+                       "hash":  "sha256-XrXV7l2M7v2rA3bI7rk6Wwd5J8Qaqllr0UCgmhrstpo=",
                        "url":  "_content/MindExecution.Shared/js/mindmap-toolbar.js"
                    },
                    {
@@ -442,8 +442,8 @@
                        "url":  "_framework/MindExecution.Plugins.YouTube.sdl5n9uv68.dll"
                    },
                    {
-                       "hash":  "sha256-veGmVlpQw2b1zDaUWReHRSLbiZ2IloG79uo1GLlduEo=",
-                       "url":  "_framework/MindExecution.Shared.fprczldv6z.dll"
+                       "hash":  "sha256-guVuBtyzsP6SsCtNUfA0tstOgfKPNycx1cgtuoL206Q=",
+                       "url":  "_framework/MindExecution.Shared.6us6j8zcea.dll"
                    },
                    {
                        "hash":  "sha256-azcD8wLJIxuNSplzTVvh2ndLwdcu20xz1t8Jh23Dr7Q=",
@@ -770,7 +770,7 @@
                        "url":  "_framework/Websocket.Client.vapounvmnl.dll"
                    },
                    {
-                       "hash":  "sha256-vjnwzCMMAs+8it6vEUPeOD7pI/ekFwMr484KaDdpugE=",
+                       "hash":  "sha256-otJjpIYsVvUHEgoeo6sg1eNW43aM4CP9H1meWzXWQWA=",
                        "url":  "_framework/blazor.boot.json"
                    },
                    {
@@ -834,7 +834,7 @@
                        "url":  "image-manifest.json"
                    },
                    {
-                       "hash":  "sha256-FjUaVgGOa4fyf3cF3WIvk0qYkTDuxmB0aE3BTcR7aYU=",
+                       "hash":  "sha256-lI1tEHVVoywntPHXryYZLXNjfn1/QsMbGnAZcu7zHWg=",
                        "url":  "index.html"
                    },
                    {

package/wwwroot/service-worker.js

@@ -1,4 +1,4 @@
-/* Manifest version: EUMTR2WK */
+/* Manifest version: 4FFMY3D0 */
 // Hosted deployments should prefer the network over stale offline caches.
 // This service worker immediately clears old Blazor offline caches and unregisters itself.