@mindexec/cli 0.2.158 → 0.2.159

package/package.json

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

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

@@ -1043,6 +1043,7 @@ try {
         binaryDrawCalls.some(call => call.op === 'clearRect' || call.op === 'fillRect'),
         false,
         'binary Blob frame paint must not clear/fill the canvas before drawing');
+    const binaryCanvasBeforeRerender = binaryCanvas;
 
     const liveOverlayCard = document.createElement('div');
     liveOverlayCard.dataset.nodeId = 'remote-fleet-render-smoke';
@@ -1105,7 +1106,12 @@ try {
         ?.querySelector('[data-remote-fleet-device-preview="tile"]');
     assert.ok(rerenderedPatchPreview);
     assert.equal(rerenderedPatchPreview.dataset.remoteFleetFrameSeq, String(websocketFrameSeq));
-    assert.equal(rerenderedPatchPreview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]')?.style.display, 'block');
+    const rerenderedPatchCanvas = rerenderedPatchPreview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]');
+    assert.equal(rerenderedPatchCanvas?.style.display, 'block');
+    assert.equal(
+        rerenderedPatchCanvas,
+        binaryCanvasBeforeRerender,
+        'MDM rerender should reuse the already-painted canvas instead of flashing a blank replacement');
 
     const otherBoardNodeId = 'remote-fleet-render-smoke-other-board';
     const { nodeShell: otherBoardShell, bodyView: otherBoardBodyView } =
@@ -1434,6 +1440,18 @@ try {
     assert.ok(deviceBody.querySelector('[data-remote-fleet-action="task-device"]'));
     assert.ok(deviceBody.textContent.includes('Task timed out waiting for the agent response.'));
     assert.ok(deviceBody.textContent.includes(focusedDevice.DeviceId));
+    const controlCanvasBeforeRerender = deviceControlCanvas;
+    manager.renderRemoteFleetDeviceForTest(deviceBody, buildDeviceNode(focusedDevice, hub.getStatus()));
+    await wait(30);
+    const controlCanvasAfterRerender = deviceBody.querySelector('[data-remote-fleet-control-node-canvas="true"]');
+    assert.equal(
+        controlCanvasAfterRerender,
+        controlCanvasBeforeRerender,
+        'RemoteFleetDevice rerender should reuse the already-painted control canvas instead of flashing black');
+    assert.equal(
+        deviceBody.querySelector('[data-remote-fleet-control-node-placeholder="true"]'),
+        null,
+        'RemoteFleetDevice rerender should not cover a restored control canvas with a waiting placeholder');
 
     nodeShell.remove();
     emptyShell.remove();

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

@@ -14842,6 +14842,104 @@
         return canvas;
     }
 
+    function collectRemoteFleetPreviewFrameSurfaces(root) {
+        const surfaces = new Map();
+        if (!root?.querySelectorAll) {
+            return surfaces;
+        }
+
+        root.querySelectorAll('[data-remote-fleet-device-preview][data-device-id]').forEach(preview => {
+            const deviceId = String(preview.dataset.deviceId || '').trim();
+            if (!deviceId) {
+                return;
+            }
+
+            const canvas = preview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]');
+            const image = preview.querySelector('img[data-remote-fleet-frame-image="true"]');
+            surfaces.set(deviceId, {
+                canvas,
+                image,
+                kind: String(preview.dataset.remoteFleetFrameKind || canvas?.dataset?.remoteFleetFrameKind || image?.dataset?.remoteFleetFrameKind || '').trim().toLowerCase(),
+                seq: Number(preview.dataset.remoteFleetFrameSeq || canvas?.dataset?.remoteFleetFrameSeq || image?.dataset?.remoteFleetFrameSeq || 0) || 0,
+                url: String(preview.dataset.remoteFleetFrameUrl || canvas?.dataset?.remoteFleetFrameUrl || image?.dataset?.remoteFleetFrameUrl || '').trim()
+            });
+        });
+
+        return surfaces;
+    }
+
+    function restoreRemoteFleetPreviewFrameSurface(preview, surfaces, deviceId) {
+        const id = String(deviceId || preview?.dataset?.deviceId || '').trim();
+        const surface = id && surfaces instanceof Map ? surfaces.get(id) : null;
+        if (!preview || !surface) {
+            return false;
+        }
+
+        const existingSeq = Number(surface.seq || 0) || 0;
+        const nextSeq = Number(preview.dataset.remoteFleetFrameSeq || 0) || 0;
+        if (existingSeq <= 0 || (nextSeq > 0 && existingSeq < nextSeq)) {
+            return false;
+        }
+
+        const currentCanvas = preview.querySelector('canvas[data-remote-fleet-frame-canvas="true"]');
+        if (surface.canvas && surface.canvas !== currentCanvas) {
+            currentCanvas?.remove?.();
+            surface.canvas.dataset.remoteFleetFrameKind = surface.kind || preview.dataset.remoteFleetFrameKind || 'live';
+            surface.canvas.dataset.remoteFleetFrameSeq = String(existingSeq);
+            surface.canvas.dataset.remoteFleetFrameUrl = surface.url || '';
+            surface.canvas.style.display = 'block';
+            if (typeof preview.insertBefore === 'function') {
+                preview.insertBefore(surface.canvas, preview.firstChild || null);
+            } else {
+                preview.appendChild?.(surface.canvas);
+            }
+        }
+
+        const currentImage = preview.querySelector('img[data-remote-fleet-frame-image="true"]');
+        if (surface.canvas) {
+            preview.querySelector('[data-remote-fleet-screen-placeholder="true"]')?.remove?.();
+            if (currentImage && currentImage !== surface.image) {
+                currentImage.style.display = 'none';
+            }
+            if (surface.image && surface.image !== currentImage && surface.image.parentElement === preview) {
+                surface.image.style.display = 'none';
+            }
+        } else if (surface.image && surface.image !== currentImage) {
+            currentImage?.remove?.();
+            surface.image.style.display = 'block';
+            if (typeof preview.insertBefore === 'function') {
+                preview.insertBefore(surface.image, preview.firstChild || null);
+            } else {
+                preview.appendChild?.(surface.image);
+            }
+        }
+
+        preview.dataset.remoteFleetFrameKind = surface.kind || preview.dataset.remoteFleetFrameKind || '';
+        preview.dataset.remoteFleetFrameSeq = String(existingSeq);
+        preview.dataset.remoteFleetFrameUrl = surface.url || '';
+        preview.dataset.remoteFleetRestoredFrame = 'true';
+        return true;
+    }
+
+    function collectRemoteFleetControlNodeSurface(root) {
+        const canvas = root?.querySelector?.('canvas[data-remote-fleet-control-node-canvas="true"]');
+        if (!canvas) {
+            return null;
+        }
+
+        return {
+            canvas,
+            kind: String(canvas.dataset.remoteFleetFrameKind || 'live').trim().toLowerCase(),
+            seq: Number(canvas.dataset.remoteFleetFrameSeq || 0) || 0,
+            contentRect: canvas._remoteFleetContentRect || null
+        };
+    }
+
+    function hasRemoteFleetReusableControlSurface(surface) {
+        return !!surface?.canvas
+            && (Number(surface.seq || 0) > 0 || !!surface.contentRect);
+    }
+
     function syncRemoteFleetFrameCanvasSize(canvas) {
         if (!canvas) {
             return null;
@@ -14853,8 +14951,18 @@
         const cssWidth = Math.max(1, Math.round(rect?.width || canvas.clientWidth || 320));
         const cssHeight = Math.max(1, Math.round(rect?.height || canvas.clientHeight || 180));
         const dpr = Math.max(1, Math.min(REMOTE_FLEET_FRAME_CANVAS_MAX_DPR, Number(window.devicePixelRatio || 1) || 1));
-        const nextWidth = Math.max(1, Math.round(cssWidth * dpr));
-        const nextHeight = Math.max(1, Math.round(cssHeight * dpr));
+        let nextWidth = Math.max(1, Math.round(cssWidth * dpr));
+        let nextHeight = Math.max(1, Math.round(cssHeight * dpr));
+        const currentWidth = Number(canvas.width || 0) || 0;
+        const currentHeight = Number(canvas.height || 0) || 0;
+        const widthDelta = Math.abs(currentWidth - nextWidth);
+        const heightDelta = Math.abs(currentHeight - nextHeight);
+        if (currentWidth > 0 && widthDelta > 0 && widthDelta <= 2) {
+            nextWidth = currentWidth;
+        }
+        if (currentHeight > 0 && heightDelta > 0 && heightDelta <= 2) {
+            nextHeight = currentHeight;
+        }
         if (canvas.width !== nextWidth) {
             canvas.width = nextWidth;
         }
@@ -15970,7 +16078,12 @@
                 }
 
                 drawRemoteFleetFrameToCanvas(session.canvas, bitmap, 'contain');
+                session.canvas.dataset.remoteFleetFrameKind = String(frame.kind || 'live').toLowerCase();
+                session.canvas.dataset.remoteFleetFrameSeq = String(Number(frame.frameSeq || frame.FrameSeq || 0) || 0);
+                session.canvas.dataset.remoteFleetFrameUrl = String(frame.frameUrl || '');
                 session.canvas.style.display = 'block';
+                session.lastControlFrameSeq = Number(frame.frameSeq || frame.FrameSeq || session.lastControlFrameSeq || 0) || 0;
+                session.lastControlFrameAt = Date.now();
                 session.placeholder?.remove?.();
                 session.placeholder = null;
                 if (typeof bitmap.close === 'function') {
@@ -16020,6 +16133,9 @@
                 }
 
                 drawRemoteFleetFrameToCanvas(session.canvas, bitmap, 'contain');
+                session.canvas.dataset.remoteFleetFrameKind = String(frame.kind || 'live').toLowerCase();
+                session.canvas.dataset.remoteFleetFrameSeq = String(frameSeq || 0);
+                session.canvas.dataset.remoteFleetFrameUrl = String(frame.frameUrl || '');
                 session.canvas.style.display = 'block';
                 session.lastControlFrameAt = Date.now();
                 session.status.textContent = `Control ${REMOTE_FLEET_CONTROL_LIVE_FPS}fps`;
@@ -16971,6 +17087,7 @@
     function renderRemoteFleetDevice(bodyView, nodeModel) {
         if (!bodyView) return;
         clearRemoteFleetTimers(bodyView, { keepBinaryFrameSocket: true });
+        const preservedControlSurface = collectRemoteFleetControlNodeSurface(bodyView);
 
         const nodeId = String(nodeModel?.id ?? nodeModel?.Id ?? '');
         const device = parseRemoteFleetPinnedDevice(nodeModel);
@@ -17166,7 +17283,7 @@
             touch-action: none;
             outline: none;
         `;
-        const controlCanvas = document.createElement('canvas');
+        const controlCanvas = preservedControlSurface?.canvas || document.createElement('canvas');
         controlCanvas.dataset.remoteFleetControlNodeCanvas = 'true';
         controlCanvas.style.cssText = `
             position: absolute;
@@ -17226,7 +17343,10 @@
         controlOverlay.appendChild(controlDot);
         controlOverlay.appendChild(controlStatus);
         controlStage.appendChild(controlCanvas);
-        controlStage.appendChild(controlPlaceholder);
+        const restoredControlSurface = hasRemoteFleetReusableControlSurface(preservedControlSurface);
+        if (!restoredControlSurface) {
+            controlStage.appendChild(controlPlaceholder);
+        }
         controlStage.appendChild(controlOverlay);
         bodyView.appendChild(controlStage);
 
@@ -17238,7 +17358,17 @@
                 controlStage,
                 controlCanvas,
                 controlStatus,
-                controlPlaceholder);
+                restoredControlSurface ? null : controlPlaceholder);
+            if (session && restoredControlSurface) {
+                session.lastControlFrameSeq = Number(preservedControlSurface?.seq || session.lastControlFrameSeq || 0) || 0;
+                session.lastControlFrameAt = Date.now();
+                controlStatus.textContent = `Control ${REMOTE_FLEET_CONTROL_LIVE_FPS}fps`;
+                window.RuntimeTrace?.emit?.('remote.control.surfaceRestored', {
+                    nodeId,
+                    deviceId,
+                    seq: session.lastControlFrameSeq
+                });
+            }
             if (session && isRemoteFleetFrameSource(previewSource)) {
                 paintRemoteFleetControlFrame(session, {
                     deviceId,
@@ -17526,6 +17656,7 @@
     function renderRemoteFleetMonitor(bodyView, nodeModel) {
         if (!bodyView) return;
         clearRemoteFleetTimers(bodyView, { keepBinaryFrameSocket: true });
+        const preservedFrameSurfaces = collectRemoteFleetPreviewFrameSurfaces(bodyView);
 
         const nodeId = String(nodeModel?.id ?? nodeModel?.Id ?? '');
         const searchState = bodyView.dataset.remoteFleetSearch || '';
@@ -18080,6 +18211,7 @@
                 preview.appendChild(placeholder);
             }
 
+            restoreRemoteFleetPreviewFrameSurface(preview, preservedFrameSurfaces, getRemoteFleetDeviceId(device));
             return preview;
         };
 

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=20260617-mdm-tab-fast-v591" />
-    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260617-mdm-tab-fast-v591" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/app.css?v=20260617-remote-frame-no-flash-v592" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260617-remote-frame-no-flash-v592" />
     <!-- ?쇄뼹??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 = '20260617-mdm-tab-fast-v591';
+        const scriptVersion = '20260617-remote-frame-no-flash-v592';
             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":  "2guH6APA",
+    "version":  "ikaqQxI3",
     "assets":  [
                    {
                        "hash":  "sha256-+CSYMcqLNTsq3VnH11jgYyOCCdxvHzL74CBmo4sCmMU=",
@@ -86,7 +86,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js.backup"
                    },
                    {
-                       "hash":  "sha256-piKsRYcnSTaqs+vd7QATTt7cGBN5hHPbY6P8Xjl2J6k=",
+                       "hash":  "sha256-yUuxzH9Fpd62pPLMU5n0HuYjsJhKvC82LO5X5Uu/1gg=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-css3d-manager.js"
                    },
                    {
@@ -834,7 +834,7 @@
                        "url":  "image-manifest.json"
                    },
                    {
-                       "hash":  "sha256-hq0qYVhXCK09hkKo9EkKj84gbxqFCuf2l4XAWk1gfL0=",
+                       "hash":  "sha256-8VAYYW89mBjF45WS2vA1+Hssmo6S30PB8AW03niSE2Q=",
                        "url":  "index.html"
                    },
                    {

package/wwwroot/service-worker.js

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