@mindexec/cli 0.2.56 → 0.2.57

package/package.json

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

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

@@ -742,9 +742,11 @@ try {
         receivedAt: new Date().toISOString()
     }]);
     assert.equal(patchCount, 1);
+    await wait();
     assert.equal(patchPreview.dataset.remoteFleetFrameSeq, '9999');
     assert.equal(patchPreview.dataset.remoteFleetFrameUrl, patchUrl);
     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);
     const alternateDevice = devices.find(device => device.DeviceId !== focusedDevice.DeviceId);
     assert.ok(alternateDevice);

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

@@ -12840,6 +12840,7 @@
     const REMOTE_FLEET_LIVE_REFRESH_MS = 5000;
     const REMOTE_FLEET_LIVE_FRAME_REFRESH_MS = 50;
     const REMOTE_FLEET_THUMBNAIL_FRAME_REFRESH_MS = 2000;
+    const REMOTE_FLEET_FRAME_CANVAS_MAX_DPR = 2;
     const REMOTE_FLEET_TASK_FOLLOW_INITIAL_MS = 250;
     const REMOTE_FLEET_TASK_FOLLOW_REFRESH_MS = 2000;
     const REMOTE_FLEET_TASK_FOLLOW_MAX_TICKS = 60;
@@ -13172,6 +13173,125 @@
         return image;
     }
 
+    function ensureRemoteFleetFrameCanvas(preview) {
+        let canvas = preview?.querySelector?.('canvas[data-remote-fleet-frame-canvas="true"]');
+        if (canvas) {
+            return canvas;
+        }
+
+        canvas = document.createElement('canvas');
+        canvas.dataset.remoteFleetFrameCanvas = 'true';
+        canvas.setAttribute('aria-hidden', 'true');
+        canvas.style.cssText = `
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+            background: #0f172a;
+        `;
+        if (typeof preview?.insertBefore === 'function') {
+            preview.insertBefore(canvas, preview.firstChild || null);
+        } else {
+            preview?.appendChild?.(canvas);
+        }
+        return canvas;
+    }
+
+    function syncRemoteFleetFrameCanvasSize(canvas) {
+        if (!canvas) {
+            return null;
+        }
+
+        const rect = typeof canvas.getBoundingClientRect === 'function'
+            ? canvas.getBoundingClientRect()
+            : null;
+        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));
+        if (canvas.width !== nextWidth) {
+            canvas.width = nextWidth;
+        }
+        if (canvas.height !== nextHeight) {
+            canvas.height = nextHeight;
+        }
+        return { width: nextWidth, height: nextHeight };
+    }
+
+    function getRemoteFleetBitmapSize(bitmap) {
+        const width = Number(bitmap?.displayWidth || bitmap?.naturalWidth || bitmap?.videoWidth || bitmap?.width || 0);
+        const height = Number(bitmap?.displayHeight || bitmap?.naturalHeight || bitmap?.videoHeight || bitmap?.height || 0);
+        return {
+            width: Number.isFinite(width) && width > 0 ? width : 1,
+            height: Number.isFinite(height) && height > 0 ? height : 1
+        };
+    }
+
+    function drawRemoteFleetFrameToCanvas(canvas, bitmap) {
+        if (!canvas || !bitmap) {
+            return false;
+        }
+
+        const size = syncRemoteFleetFrameCanvasSize(canvas);
+        if (!size) {
+            return false;
+        }
+
+        let context = null;
+        try {
+            context = canvas.getContext('2d', { alpha: false, desynchronized: true });
+        } catch {
+            context = canvas.getContext('2d');
+        }
+        if (!context) {
+            return false;
+        }
+
+        const source = getRemoteFleetBitmapSize(bitmap);
+        const sourceAspect = source.width / source.height;
+        const targetAspect = size.width / size.height;
+        let sx = 0;
+        let sy = 0;
+        let sw = source.width;
+        let sh = source.height;
+        if (sourceAspect > targetAspect) {
+            sw = source.height * targetAspect;
+            sx = (source.width - sw) / 2;
+        } else if (sourceAspect < targetAspect) {
+            sh = source.width / targetAspect;
+            sy = (source.height - sh) / 2;
+        }
+
+        context.imageSmoothingEnabled = true;
+        context.imageSmoothingQuality = 'medium';
+        context.clearRect(0, 0, size.width, size.height);
+        context.drawImage(bitmap, sx, sy, sw, sh, 0, 0, size.width, size.height);
+        return true;
+    }
+
+    async function loadRemoteFleetFrameBitmap(frame) {
+        if (!frame || !isRemoteFleetFrameSource(frame.frameUrl)) {
+            return null;
+        }
+
+        if (typeof fetch !== 'function' || typeof createImageBitmap !== 'function') {
+            return null;
+        }
+
+        const response = await fetch(frame.frameUrl, {
+            cache: 'no-store',
+            credentials: 'omit'
+        });
+        if (!response.ok) {
+            throw new Error(`remote-frame-fetch-${response.status}`);
+        }
+
+        const blob = await response.blob();
+        return createImageBitmap(blob);
+    }
+
     function getRemoteFleetFrameIdentity(frame) {
         return [
             String(frame?.deviceId || '').trim(),
@@ -13272,20 +13392,12 @@
         return badge;
     }
 
-    function commitRemoteFleetFrameToPreview(preview, image, frame) {
-        if (!preview || !image || !isRemoteFleetFrameNewerForPreview(preview, frame, false)) {
+    function commitRemoteFleetFrameMetadata(preview, frame) {
+        if (!preview || !isRemoteFleetFrameNewerForPreview(preview, frame, false)) {
             return false;
         }
 
         const nextSeq = Number(frame.frameSeq || 0);
-        image.dataset.remoteFleetFrameKind = frame.kind;
-        image.dataset.remoteFleetFrameSeq = String(nextSeq || 0);
-        image.dataset.remoteFleetFrameUrl = frame.frameUrl;
-        image.loading = frame.kind === 'thumbnail' ? 'lazy' : 'eager';
-        if (image.src !== frame.frameUrl) {
-            image.src = frame.frameUrl;
-        }
-
         preview.dataset.remoteFleetFrameKind = frame.kind;
         preview.dataset.remoteFleetFrameSeq = String(nextSeq || 0);
         preview.dataset.remoteFleetFrameUrl = frame.frameUrl;
@@ -13311,6 +13423,50 @@
         return true;
     }
 
+    function commitRemoteFleetFrameToPreview(preview, image, frame) {
+        if (!preview || !image || !isRemoteFleetFrameNewerForPreview(preview, frame, false)) {
+            return false;
+        }
+
+        const nextSeq = Number(frame.frameSeq || 0);
+        image.dataset.remoteFleetFrameKind = frame.kind;
+        image.dataset.remoteFleetFrameSeq = String(nextSeq || 0);
+        image.dataset.remoteFleetFrameUrl = frame.frameUrl;
+        image.loading = frame.kind === 'thumbnail' ? 'lazy' : 'eager';
+        image.style.display = 'block';
+        if (image.src !== frame.frameUrl) {
+            image.src = frame.frameUrl;
+        }
+
+        const canvas = preview.querySelector?.('canvas[data-remote-fleet-frame-canvas="true"]');
+        if (canvas) {
+            canvas.style.display = 'none';
+        }
+
+        return commitRemoteFleetFrameMetadata(preview, frame);
+    }
+
+    function commitRemoteFleetFrameToCanvas(preview, canvas, image, bitmap, frame) {
+        if (!preview || !canvas || !bitmap || !isRemoteFleetFrameNewerForPreview(preview, frame, false)) {
+            return false;
+        }
+
+        if (!drawRemoteFleetFrameToCanvas(canvas, bitmap)) {
+            return false;
+        }
+
+        const nextSeq = Number(frame.frameSeq || 0);
+        canvas.dataset.remoteFleetFrameKind = frame.kind;
+        canvas.dataset.remoteFleetFrameSeq = String(nextSeq || 0);
+        canvas.dataset.remoteFleetFrameUrl = frame.frameUrl;
+        canvas.style.display = 'block';
+        if (image) {
+            image.style.display = 'none';
+        }
+
+        return commitRemoteFleetFrameMetadata(preview, frame);
+    }
+
     function clearRemoteFleetPendingFrameDataset(preview, frame) {
         if (!preview) {
             return;
@@ -13325,7 +13481,7 @@
         }
     }
 
-    function processRemoteFleetFrameQueue(preview, image) {
+    function processRemoteFleetFramePaintQueue(preview, image) {
         if (!preview || !image || preview._remoteFleetFrameLoaderActive === true) {
             return;
         }
@@ -13338,7 +13494,7 @@
 
         preview._remoteFleetFrameLoaderActive = true;
         const frameIdentity = getRemoteFleetFrameIdentity(frame);
-        const finish = loaded => {
+        const finish = (loaded, surface = 'img') => {
             const currentPending = preview._remoteFleetPendingFrame;
             const stillLatest = getRemoteFleetFrameIdentity(currentPending) === frameIdentity;
             let committed = false;
@@ -13347,7 +13503,8 @@
                 window.RuntimeTrace?.emit?.('remote.frame.uiPatched', {
                     count: committed ? 1 : 0,
                     kind: frame.kind,
-                    seq: frame.frameSeq
+                    seq: frame.frameSeq,
+                    surface
                 });
             }
 
@@ -13357,28 +13514,84 @@
 
             preview._remoteFleetFrameLoaderActive = false;
             if (preview._remoteFleetPendingFrame) {
-                processRemoteFleetFrameQueue(preview, image);
+                processRemoteFleetFramePaintQueue(preview, image);
+            }
+        };
+
+        const loadFallbackImage = () => {
+            if (typeof Image !== 'function') {
+                finish(true, 'img');
+                return;
             }
+
+            const loader = new Image();
+            loader.decoding = 'async';
+            loader.onload = () => {
+                const decoded = typeof loader.decode === 'function'
+                    ? loader.decode().catch(() => undefined)
+                    : Promise.resolve();
+                decoded.then(() => finish(true, 'img'));
+            };
+            loader.onerror = () => finish(false, 'img');
+            loader.src = frame.frameUrl;
         };
 
-        if (typeof Image !== 'function') {
-            finish(true);
+        const canvas = ensureRemoteFleetFrameCanvas(preview);
+        if (!canvas) {
+            loadFallbackImage();
             return;
         }
 
-        const loader = new Image();
-        loader.decoding = 'async';
-        loader.onload = () => {
-            const decoded = typeof loader.decode === 'function'
-                ? loader.decode().catch(() => undefined)
-                : Promise.resolve();
-            decoded.then(() => finish(true));
-        };
-        loader.onerror = () => finish(false);
-        loader.src = frame.frameUrl;
+        loadRemoteFleetFrameBitmap(frame)
+            .then(bitmap => {
+                if (!bitmap) {
+                    loadFallbackImage();
+                    return;
+                }
+
+                requestRemoteFleetFrameLoopFrame(() => {
+                    if (!document.body.contains(preview)) {
+                        if (typeof bitmap.close === 'function') {
+                            bitmap.close();
+                        }
+                        finish(false, 'canvas');
+                        return;
+                    }
+
+                    const currentPending = preview._remoteFleetPendingFrame;
+                    const stillLatest = getRemoteFleetFrameIdentity(currentPending) === frameIdentity;
+                    const committed = stillLatest
+                        ? commitRemoteFleetFrameToCanvas(preview, canvas, image, bitmap, frame)
+                        : false;
+                    if (typeof bitmap.close === 'function') {
+                        bitmap.close();
+                    }
+
+                    if (committed) {
+                        window.RuntimeTrace?.emit?.('remote.frame.uiPatched', {
+                            count: 1,
+                            kind: frame.kind,
+                            seq: frame.frameSeq,
+                            surface: 'canvas'
+                        });
+                        if (stillLatest) {
+                            clearRemoteFleetPendingFrameDataset(preview, frame);
+                        }
+                        preview._remoteFleetFrameLoaderActive = false;
+                        if (preview._remoteFleetPendingFrame) {
+                            processRemoteFleetFramePaintQueue(preview, image);
+                        }
+                    } else if (stillLatest) {
+                        loadFallbackImage();
+                    } else {
+                        finish(false, 'canvas');
+                    }
+                });
+            })
+            .catch(() => loadFallbackImage());
     }
 
-    function queueRemoteFleetFrameImageSwap(preview, frame) {
+    function queueRemoteFleetFramePaint(preview, frame) {
         if (!preview || !frame || !isRemoteFleetFrameNewerForPreview(preview, frame, true)) {
             return false;
         }
@@ -13393,12 +13606,12 @@
         preview.dataset.remoteFleetPendingFrameKind = nextFrame.kind;
         preview.dataset.remoteFleetPendingFrameSeq = String(nextFrame.frameSeq || 0);
         preview.dataset.remoteFleetPendingFrameUrl = nextFrame.frameUrl;
-        processRemoteFleetFrameQueue(preview, image);
+        processRemoteFleetFramePaintQueue(preview, image);
         return true;
     }
 
     function applyRemoteFleetFramePatchToPreview(preview, frame) {
-        return queueRemoteFleetFrameImageSwap(preview, frame);
+        return queueRemoteFleetFramePaint(preview, frame);
     }
 
     function applyRemoteFleetFramePatches(bodyView, patches) {

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=20260614-remote-registry-wake-v516" />
-    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260614-remote-registry-wake-v516" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/app.css?v=20260614-remote-canvas-frame-painter-v517" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260614-remote-canvas-frame-painter-v517" />
     <!-- ?쇄뼹??Font Awesome (local) ?쇄뼹??-->
     <link rel="stylesheet" href="_content/MindExecution.Shared/lib/font-awesome/css/all.min.css" />
     <!-- ?꿎뼯??-->
@@ -558,7 +558,7 @@
             }
 
             const base = '_content/MindExecution.Shared/js/';
-        const scriptVersion = '20260614-remote-registry-wake-v516';
+        const scriptVersion = '20260614-remote-canvas-frame-painter-v517';
             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":  "myLeiE66",
+    "version":  "KpaZ4pzK",
     "assets":  [
                    {
                        "hash":  "sha256-+CSYMcqLNTsq3VnH11jgYyOCCdxvHzL74CBmo4sCmMU=",
@@ -86,7 +86,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js.backup"
                    },
                    {
-                       "hash":  "sha256-pfqJn3HbG2hf6mQB5J36TJM5Ko6Jj7R0B7EqxBnfo20=",
+                       "hash":  "sha256-x4uXuDyBscw/I1YWnNTwWzM4+1PkYmbxtXau4hRBGlI=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-css3d-manager.js"
                    },
                    {
@@ -834,7 +834,7 @@
                        "url":  "image-manifest.json"
                    },
                    {
-                       "hash":  "sha256-0isEjWtcxpTZnvY3qV3eTiWX+iwsmslA96igYDcNwB4=",
+                       "hash":  "sha256-ve5/RFGEOkIRyDqWQLvQA728TLeR5I6XaPPAS2HsVsQ=",
                        "url":  "index.html"
                    },
                    {

package/wwwroot/service-worker.js

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