@mindexec/cli 0.2.306 → 0.2.308

package/package.json

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

package/wwwroot/_content/MindExecution.Shared/css/mind-map-overrides.css

@@ -3407,13 +3407,13 @@ html body .css3d-resolution-wrapper.node-type-embed .map-node.selected {
     outline-offset: 0 !important;
 }
 
-/* Text nodes need a visible hard edge now that decorative glow/shadow is gone.
+/* Text nodes keep a visible but alpha-soft edge now that decorative glow/shadow is gone.
    Keep this scoped away from template, MDM, media, CSV, and remote-control cards. */
 html body .css3d-resolution-wrapper > .map-node-bubble,
 html body .css3d-resolution-wrapper > .map-node-note,
 html body .css3d-resolution-wrapper > .map-node-code,
 html body .css3d-resolution-wrapper > .map-node-memo:not(.map-node-agent):not(.map-node-automation):not(.map-node-template-card):not(.map-node-remote-fleet) {
-    border: 1px solid rgba(17, 24, 39, 0.88) !important;
+    border: 1px solid rgba(17, 24, 39, 0.22) !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
     -webkit-filter: none !important;
@@ -3454,7 +3454,7 @@ html body .css3d-resolution-wrapper > .map-node-automation:focus-within:not(.map
 }
 
 /* Final node edge policy:
-   - unselected text-like surfaces use a hard dark edge because glow is removed
+   - unselected text-like surfaces use a soft dark edge because glow is removed
    - selected nodes, including AI task nodes, use the same blue edge as notes */
 html body .css3d-resolution-wrapper.node-type-text > .map-node,
 html body .css3d-resolution-wrapper.node-type-markdown > .map-node,
@@ -3464,7 +3464,7 @@ html body .css3d-resolution-wrapper > .map-node-agent:not(.map-node-template-car
 html body .css3d-resolution-wrapper > .map-node-automation:not(.map-node-template-card):not(.map-node-remote-fleet),
 html body .mind-map-text-overlay-v2-shell.type-text,
 html body .mind-map-text-overlay-v2-shell.type-markdown {
-    border: 1px solid rgba(17, 24, 39, 0.88) !important;
+    border: 1px solid rgba(17, 24, 39, 0.22) !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
     -webkit-filter: none !important;
@@ -3534,6 +3534,10 @@ html body .css3d-resolution-wrapper.lod-low.node-type-memo .map-node-memo__agent
 html body .css3d-resolution-wrapper.lod-low.node-type-memo .map-node-memo__agent-results,
 html body .css3d-resolution-wrapper.lod-low.node-type-memo .map-node-memo__automation-pins,
 html body .css3d-resolution-wrapper.lod-low.node-type-memo .map-node-memo__automation-pin,
+html body .css3d-resolution-wrapper.lod-low .map-node-memo__automation-pins,
+html body .css3d-resolution-wrapper.lod-low .map-node-memo__automation-pin,
+html body .css3d-resolution-wrapper.lod-low .map-node-memo__automation-pin-dot,
+html body .css3d-resolution-wrapper.lod-low .map-node-memo__automation-pin-label,
 html body .css3d-resolution-wrapper.lod-low > .map-node-agent .map-node-memo__header,
 html body .css3d-resolution-wrapper.lod-low > .map-node-automation .map-node-memo__header,
 html body .css3d-resolution-wrapper.lod-low > .map-node-agent .map-node-memo__automation-pins,
@@ -3552,7 +3556,31 @@ html body .css3d-resolution-wrapper.lod-low.node-type-memo .map-node-memo__shell
 html body .css3d-resolution-wrapper.lod-low > .map-node-agent .map-node-memo__shell,
 html body .css3d-resolution-wrapper.lod-low > .map-node-automation .map-node-memo__shell {
     background: transparent !important;
+    color: transparent !important;
+    font-size: 0 !important;
+    line-height: 0 !important;
+    text-shadow: none !important;
     padding: 0 !important;
     border: 0 !important;
     overflow: hidden !important;
 }
+
+html body .css3d-resolution-wrapper.lod-low.node-type-video > .map-node {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 0 !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+    outline: 0 !important;
+    overflow: hidden !important;
+}
+
+html body .css3d-resolution-wrapper.lod-low.node-type-video .node-response,
+html body .css3d-resolution-wrapper.lod-low.node-type-video .ai-loading-row,
+html body .css3d-resolution-wrapper.lod-low.node-type-video video,
+html body .css3d-resolution-wrapper.lod-low.node-type-video canvas.mind-map-video-proxy,
+html body .css3d-resolution-wrapper.lod-low.node-type-video .video-content > video,
+html body .css3d-resolution-wrapper.lod-low.node-type-video .video-content > canvas.mind-map-video-proxy {
+    display: none !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+}

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

@@ -5,7 +5,7 @@
     const DEBUG = false;
     const FPS_DEBUG = false;
     const FRAME_PERF_DEBUG = false;
-    const MINDMAP_CORE_BUILD_ID = '20260621-low-detail-proxy-css3d-v776';
+    const MINDMAP_CORE_BUILD_ID = '20260621-video-prefetch-v785';
     const CanvasPhase = Object.freeze({
         Booting: 'booting',
         BoardFileLoading: 'board-file-loading',
@@ -873,28 +873,37 @@
     function isCss3dEntryUnsafeForSettledFlatScene(entry) {
         const model = entry?.model || {};
         const type = String(model.contentType ?? model.ContentType ?? '').trim().toLowerCase();
-        if (!CSS3D_SETTLED_TEXT_FLAT_SAFE_TYPES.has(type)) {
+        const element = entry?.cssObject?.element || null;
+        const classList = element?.classList || null;
+        const isLowDetailVideoProxy =
+            type === 'video' &&
+            classList?.contains?.('node-type-video') === true &&
+            classList?.contains?.('lod-low') === true;
+
+        if (!CSS3D_SETTLED_TEXT_FLAT_SAFE_TYPES.has(type) && isLowDetailVideoProxy !== true) {
             return true;
         }
 
-        if (type === 'video' ||
+        if ((type === 'video' && isLowDetailVideoProxy !== true) ||
             type === 'csv-table' ||
             type === 'templatelauncher') {
             return true;
         }
 
-        const element = entry?.cssObject?.element || null;
         if (!element) {
             return true;
         }
 
-        const classList = element.classList;
-        if (classList?.contains?.('node-type-video') === true ||
+        if ((classList?.contains?.('node-type-video') === true && isLowDetailVideoProxy !== true) ||
             classList?.contains?.('node-type-csv-table') === true ||
             classList?.contains?.('node-type-templatelauncher') === true) {
             return true;
         }
 
+        if (isLowDetailVideoProxy === true) {
+            return false;
+        }
+
         return !!element.querySelector?.(
             'iframe, video, canvas, .map-node-template-card, .map-node-remote-fleet, .csv-table-scroll, [data-remote-fleet-resize-handle="true"]'
         );
@@ -9283,7 +9292,7 @@ ${summaryLines.map(line => `<div>${escapeNodeFrameDebugHtml(line)}</div>`).join(
                 const shouldUseAnimationCadenceForWebglFrame =
                     isCameraNavigationOnlyInteractiveFrame === true
                         ? false
-                        : (shouldUseAnimation60Fps === true || shouldUseAnimationLowFpsFrame === true);
+                        : shouldUseAnimation60Fps === true;
                 const shouldHoldWebglCanvasTransformDuringCameraNavigation = !!(
                     isWebglRenderEnabled &&
                     isCameraNavigationOnlyInteractiveFrame === true &&

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

@@ -14,6 +14,7 @@
     const CSS_IMAGE_PROMOTION_MAX_PER_FRAME = 4;
     const CSS_IMAGE_PROMOTION_BUDGET_MS = 4;
     const CSS_IMAGE_BLOB_CACHE_LIMIT = 160;
+    const CSS_VIDEO_BLOB_CACHE_LIMIT = 48;
     const CSS_IMAGE_DISPLAY_MAX_CONCURRENCY = 8;
     const CSS3D_TEXT_NODE_RESOLUTION_SCALE = 1.0;
     const CSS3D_MEDIA_NODE_RESOLUTION_SCALE = 1.0;
@@ -26,6 +27,8 @@
     let _cssImagePromotionTimer = 0;
     let _cssImageBlobUrlCache = new Map();
     let _cssImageBlobUrlPending = new Map();
+    let _cssVideoBlobUrlCache = new Map();
+    let _cssVideoBlobUrlPending = new Map();
     let _cssImageDisplayQueue = [];
     let _cssImageDisplayActiveCount = 0;
     let _cssImageDisplayPumpScheduled = false;
@@ -1314,6 +1317,13 @@
         return !normalized || normalized.startsWith('image/');
     }
 
+    function isCssVideoContentType(value) {
+        const normalized = String(value || '').split(';')[0].trim().toLowerCase();
+        return !normalized
+            || normalized.startsWith('video/')
+            || normalized === 'application/octet-stream';
+    }
+
     function isDirectCssMediaUrl(url) {
         const normalized = normalizeCssMediaUrl(url).toLowerCase();
         return normalized.startsWith('http://')
@@ -1677,6 +1687,129 @@
         );
     }
 
+    function getCss3dVideoElement(cssObject) {
+        const element = cssObject?.element || null;
+        if (element?.tagName === 'VIDEO') {
+            return element;
+        }
+        return element?.querySelector?.('video') || null;
+    }
+
+    function isCss3dVideoElementLowDetail(videoEl, cssObject = null) {
+        const element = cssObject?.element || null;
+        const root = element?.classList?.contains?.('css3d-resolution-wrapper') === true
+            ? element
+            : videoEl?.closest?.('.css3d-resolution-wrapper') || element?.closest?.('.css3d-resolution-wrapper') || null;
+        const isVideoWrapper = root?.classList?.contains?.('node-type-video') === true ||
+            videoEl?.tagName === 'VIDEO';
+        return isVideoWrapper === true &&
+            root?.classList?.contains?.('lod-high') !== true;
+    }
+
+    function getCss3dVideoDeferredSource(videoEl, nodeModel) {
+        return normalizeCssMediaUrl(
+            videoEl?.dataset?.lodSuspendedSrc
+            || videoEl?.dataset?.resolvedMediaSourceUrl
+            || videoEl?.dataset?.mediaSourceUrl
+            || videoEl?.currentSrc
+            || videoEl?.getAttribute?.('src')
+            || nodeModel?.response
+            || nodeModel?.Response
+            || ''
+        );
+    }
+
+    function rememberCss3dVideoSourceForLod(videoEl, nodeModel) {
+        if (!videoEl?.dataset) {
+            return '';
+        }
+
+        const source = getCss3dVideoDeferredSource(videoEl, nodeModel);
+        if (source) {
+            videoEl.dataset.lodSuspendedSrc = source;
+        }
+        return source;
+    }
+
+    function suspendCss3dVideoSourceForLod(nodeModel, cssObject) {
+        const contentTypeLower = String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').toLowerCase();
+        if (contentTypeLower !== 'video') {
+            return false;
+        }
+
+        const videoEl = getCss3dVideoElement(cssObject);
+        if (!videoEl) {
+            return false;
+        }
+
+        rememberVideoNodeRuntimePlayback(nodeModel, videoEl);
+        rememberCss3dVideoSourceForLod(videoEl, nodeModel);
+        if (videoEl.dataset) {
+            if (!videoEl.dataset.lodSuspendedPreload) {
+                videoEl.dataset.lodSuspendedPreload = videoEl.getAttribute('preload') || videoEl.preload || 'metadata';
+            }
+            videoEl.dataset.lodMediaSuspended = 'true';
+            videoEl.dataset.videoResumePending = 'false';
+            videoEl.dataset.visibilityPaused = 'false';
+        }
+
+        if (!videoEl.paused) {
+            videoEl.pause?.();
+        }
+        stopCss3dVideoCanvasProxyForVisibility(videoEl);
+
+        const hadSource = !!videoEl.getAttribute('src');
+        videoEl.removeAttribute('src');
+        videoEl.preload = 'none';
+        if (hadSource && typeof videoEl.load === 'function') {
+            try {
+                videoEl.load();
+            } catch { }
+        }
+
+        return true;
+    }
+
+    function resumeCss3dVideoSourceForLod(nodeModel, cssObject, options = {}) {
+        const contentTypeLower = String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').toLowerCase();
+        if (contentTypeLower !== 'video') {
+            return false;
+        }
+
+        const videoEl = getCss3dVideoElement(cssObject);
+        if (!videoEl) {
+            return false;
+        }
+
+        const preferredSource = getCss3dVideoDeferredSource(videoEl, nodeModel);
+        if (videoEl.dataset) {
+            videoEl.dataset.lodMediaSuspended = 'false';
+        }
+        videoEl.preload = videoEl.dataset?.lodSuspendedPreload || 'metadata';
+
+        if (!preferredSource) {
+            return false;
+        }
+
+        if (isLocalCssMediaReference(preferredSource) || getLocalCssMediaId(nodeModel, preferredSource)) {
+            videoEl.dataset.mediaSourceUrl = getLocalCssMediaReference(nodeModel, preferredSource);
+            videoEl.dataset.resolvedMediaSourceUrl = '';
+            if (options.resolveLocal !== false) {
+                void resolveLocalCssMediaSource(videoEl, nodeModel, contentTypeLower);
+            }
+            return true;
+        }
+
+        void setCssVideoElementSource(videoEl, nodeModel, preferredSource, { load: true });
+        return true;
+    }
+
+    function syncCss3dVideoLodMediaSource(nodeModel, cssObject, isHigh) {
+        return isHigh === true
+            ? resumeCss3dVideoSourceForLod(nodeModel, cssObject)
+            : suspendCss3dVideoSourceForLod(nodeModel, cssObject);
+    }
+
     function isLocalCssMediaReference(url) {
         const text = String(url || '').trim();
         if (!text) {
@@ -1770,6 +1903,14 @@
             delete metadata.localFileResolveError;
 
             mediaEl.dataset.resolvedMediaSourceUrl = objectUrl;
+            if (isCss3dVideoElementLowDetail(mediaEl, { element: mediaEl })) {
+                mediaEl.dataset.lodSuspendedSrc = objectUrl;
+                suspendCss3dVideoSourceForLod(nodeModel, { element: mediaEl });
+                setAssetRefreshState(nodeModel, '', '');
+                syncMediaLoadingRowForElement(mediaEl, nodeModel, contentTypeLower);
+                return true;
+            }
+
             if (mediaEl.getAttribute('src') !== objectUrl) {
                 delete mediaEl.dataset.videoCanvasProxyFailed;
                 mediaEl.src = objectUrl;
@@ -2761,11 +2902,17 @@
             return false;
         }
 
-        const videoEl = cssObject?.element?.querySelector?.('video') || null;
+        const videoEl = getCss3dVideoElement(cssObject);
         const state = getCss3dVideoProxyState(videoEl);
         if (!videoEl || !state) {
             return false;
         }
+        if (videoEl.dataset?.lodMediaSuspended === 'true') {
+            state.active = false;
+            applyCss3dVideoProxySurfaceMode(state, false);
+            cancelCss3dVideoCanvasProxyLoop(state);
+            return false;
+        }
 
         bindCss3dVideoCanvasProxyLifecycle(videoEl, nodeModel, cssObject);
 
@@ -3068,7 +3215,7 @@
             return false;
         }
 
-        const videoEl = cssObject?.element?.querySelector?.('video') || null;
+        const videoEl = getCss3dVideoElement(cssObject);
         if (!videoEl) {
             return false;
         }
@@ -3093,6 +3240,13 @@
             return false;
         }
 
+        if (isCss3dVideoElementLowDetail(videoEl, cssObject)) {
+            suspendCss3dVideoSourceForLod(nodeModel, cssObject);
+            return false;
+        }
+
+        resumeCss3dVideoSourceForLod(nodeModel, cssObject);
+
         if (intent !== 'play' || videoEl.dataset?.userPaused === 'true') {
             if (videoEl.dataset) {
                 videoEl.dataset.visibilityPaused = 'false';
@@ -3353,6 +3507,30 @@
         }
     }
 
+    function touchCssVideoBlobCacheEntry(sourceUrl, entry) {
+        if (!sourceUrl || !entry) return;
+        entry.lastAccessAt = getCssImagePromotionNow();
+        if (_cssVideoBlobUrlCache.get(sourceUrl) === entry) {
+            _cssVideoBlobUrlCache.delete(sourceUrl);
+        }
+        _cssVideoBlobUrlCache.set(sourceUrl, entry);
+    }
+
+    function evictCssVideoBlobCache() {
+        while (_cssVideoBlobUrlCache.size > CSS_VIDEO_BLOB_CACHE_LIMIT) {
+            const oldestKey = _cssVideoBlobUrlCache.keys().next().value;
+            if (!oldestKey) {
+                break;
+            }
+
+            const entry = _cssVideoBlobUrlCache.get(oldestKey);
+            _cssVideoBlobUrlCache.delete(oldestKey);
+            if (entry?.objectUrl) {
+                try { URL.revokeObjectURL(entry.objectUrl); } catch { }
+            }
+        }
+    }
+
     function getCssMediaFetchOptions(targetUrl) {
         const normalized = String(targetUrl || '').trim().toLowerCase();
         if (!normalized || normalized.startsWith('blob:') || normalized.startsWith('data:') || normalized.startsWith('file:')) {
@@ -3434,6 +3612,63 @@
         }
     }
 
+    async function resolveCssVideoDisplaySource(targetUrl) {
+        const normalized = normalizeCssMediaUrl(targetUrl);
+        if (!normalized) {
+            return '';
+        }
+
+        if (!isLoopbackCssAssetUrl(normalized)) {
+            return normalized;
+        }
+
+        const cached = _cssVideoBlobUrlCache.get(normalized);
+        if (cached?.objectUrl) {
+            touchCssVideoBlobCacheEntry(normalized, cached);
+            return cached.objectUrl;
+        }
+
+        const existingPending = _cssVideoBlobUrlPending.get(normalized);
+        if (existingPending) {
+            return await existingPending;
+        }
+
+        const pendingFetch = (async () => {
+            const response = await fetch(normalized, getCssMediaFetchOptions(normalized));
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+
+            const contentType = response.headers?.get?.('content-type') || '';
+            if (!isCssVideoContentType(contentType)) {
+                throw new Error(`Unexpected video content-type: ${contentType || 'unknown'}`);
+            }
+
+            const blob = await response.blob();
+            if (!isCssVideoContentType(blob?.type || contentType)) {
+                throw new Error(`Unexpected video blob type: ${blob?.type || contentType || 'unknown'}`);
+            }
+
+            const objectUrl = URL.createObjectURL(blob);
+            const entry = {
+                objectUrl,
+                lastAccessAt: getCssImagePromotionNow()
+            };
+            _cssVideoBlobUrlCache.set(normalized, entry);
+            evictCssVideoBlobCache();
+            return objectUrl;
+        })();
+
+        _cssVideoBlobUrlPending.set(normalized, pendingFetch);
+        try {
+            return await pendingFetch;
+        } finally {
+            if (_cssVideoBlobUrlPending.get(normalized) === pendingFetch) {
+                _cssVideoBlobUrlPending.delete(normalized);
+            }
+        }
+    }
+
     function scheduleCssImageDisplayQueuePump() {
         if (_cssImageDisplayPumpScheduled) {
             return;
@@ -3545,6 +3780,60 @@
         });
     }
 
+    async function setCssVideoElementSource(mediaEl, nodeModel, targetUrl, options = {}) {
+        if (!mediaEl) return false;
+
+        const normalized = normalizeCssMediaUrl(targetUrl);
+        if (!normalized) {
+            mediaEl.dataset.mediaSourceUrl = '';
+            mediaEl.dataset.resolvedMediaSourceUrl = '';
+            mediaEl.removeAttribute('src');
+            if (options.load !== false && typeof mediaEl.load === 'function') {
+                try { mediaEl.load(); } catch { }
+            }
+            return false;
+        }
+
+        const previousCanonical = String(mediaEl.dataset.mediaSourceUrl || '').trim();
+        mediaEl.dataset.mediaSourceUrl = normalized;
+        if (previousCanonical !== normalized) {
+            mediaEl.dataset.assetRefreshAttempted = '';
+        }
+
+        try {
+            const resolvedDisplaySource = await resolveCssVideoDisplaySource(normalized);
+            if (String(mediaEl.dataset.mediaSourceUrl || '').trim() !== normalized) {
+                return false;
+            }
+
+            const currentDisplaySource = String(mediaEl.getAttribute('src') || '').trim();
+            if (currentDisplaySource !== resolvedDisplaySource) {
+                delete mediaEl.dataset.videoCanvasProxyFailed;
+                mediaEl.setAttribute('src', resolvedDisplaySource);
+                if (options.load !== false && typeof mediaEl.load === 'function') {
+                    try { mediaEl.load(); } catch { }
+                }
+            }
+
+            mediaEl.dataset.resolvedMediaSourceUrl = resolvedDisplaySource;
+            return true;
+        } catch (error) {
+            if (String(mediaEl.dataset.mediaSourceUrl || '').trim() !== normalized) {
+                return false;
+            }
+
+            mediaEl.dataset.resolvedMediaSourceUrl = '';
+            mediaEl.removeAttribute('src');
+            if (options.load !== false && typeof mediaEl.load === 'function') {
+                try { mediaEl.load(); } catch { }
+            }
+            setAssetRefreshState(nodeModel, 'failed', 'Video asset is missing or unavailable');
+            syncMediaLoadingRowForElement(mediaEl, nodeModel, 'video');
+            warn('[MindMapCss3DManager] Failed to prepare video source', normalized, error);
+            return false;
+        }
+    }
+
     function maybeResolveOriginalCssImageSource(mediaEl, nodeModel, contentTypeLower, options = {}) {
         if (!mediaEl || contentTypeLower !== 'image') return;
         if (options.bypassPreviewHold !== true && shouldPreferCssImagePreviewSource(nodeModel)) return;
@@ -3607,6 +3896,14 @@
 
         if (contentTypeLower === 'video'
             && (isLocalCssMediaReference(currentSource) || getLocalCssMediaId(nodeModel, currentSource))) {
+            if (isCss3dVideoElementLowDetail(mediaEl, { element: mediaEl })) {
+                mediaEl.dataset.mediaSourceUrl = getLocalCssMediaReference(nodeModel, currentSource);
+                mediaEl.dataset.resolvedMediaSourceUrl = '';
+                mediaEl.dataset.lodSuspendedSrc = currentSource;
+                suspendCss3dVideoSourceForLod(nodeModel, { element: mediaEl });
+                return;
+            }
+
             if (mediaEl.dataset.localFileResolveAttempted === '1') {
                 return;
             }
@@ -3666,12 +3963,16 @@
 
             nodeModel.response = normalized;
             nodeModel.Response = normalized;
-            mediaEl.dataset.mediaSourceUrl = normalized;
-            mediaEl.dataset.resolvedMediaSourceUrl = normalized;
-            mediaEl.setAttribute('src', normalized);
+            if (contentTypeLower === 'video' && isCss3dVideoElementLowDetail(mediaEl, { element: mediaEl })) {
+                mediaEl.dataset.mediaSourceUrl = normalized;
+                mediaEl.dataset.resolvedMediaSourceUrl = '';
+                mediaEl.dataset.lodSuspendedSrc = normalized;
+                suspendCss3dVideoSourceForLod(nodeModel, { element: mediaEl });
+                return;
+            }
 
-            if (contentTypeLower === 'video' && typeof mediaEl.load === 'function') {
-                mediaEl.load();
+            if (contentTypeLower === 'video') {
+                await setCssVideoElementSource(mediaEl, nodeModel, normalized, { load: true });
             }
         } catch (error) {
             setAssetRefreshState(nodeModel, 'failed', 'Fresh link request did not succeed');
@@ -3831,6 +4132,9 @@
             syncMediaLoadingRowForElement(mediaEl, nodeModel, contentTypeLower);
             mediaEl.dataset.assetRefreshAttempted = '';
             if (contentTypeLower === 'video') {
+                if (mediaEl.dataset?.lodMediaSuspended === 'true') {
+                    return;
+                }
                 const playPromise = mediaEl.play?.();
                 if (playPromise?.catch) {
                     playPromise.catch(() => { });
@@ -3863,6 +4167,9 @@
             if (contentTypeLower !== 'video') {
                 return;
             }
+            if (mediaEl.dataset?.lodMediaSuspended === 'true') {
+                return;
+            }
 
             const metadata = ensureCssMediaMetadata(nodeModel);
             const message = describeVideoElementError();
@@ -3876,6 +4183,9 @@
         };
 
         const handleMediaError = async () => {
+            if (contentTypeLower === 'video' && mediaEl.dataset?.lodMediaSuspended === 'true') {
+                return;
+            }
             if (contentTypeLower === 'image') {
                 mediaEl.dataset.mediaReady = '0';
                 mediaEl.style.opacity = '0';
@@ -3897,6 +4207,9 @@
 
         if (contentTypeLower === 'video') {
             mediaEl.onstalled = () => {
+                if (mediaEl.dataset?.lodMediaSuspended === 'true') {
+                    return;
+                }
                 void tryRefreshCssMediaSource(mediaEl, nodeModel, contentTypeLower);
             };
             mediaEl.onloadedmetadata = handleReady;
@@ -22698,17 +23011,14 @@
                 video.dataset.resolvedMediaSourceUrl = '';
                 video.dataset.assetRefreshAttempted = '';
                 video.dataset.localFileResolveAttempted = '';
-                if (isLocalCssMediaReference(normalizedContent) || getLocalCssMediaId(nodeModel, normalizedContent)) {
-                    void resolveLocalCssMediaSource(video, nodeModel, contentTypeLower);
-                } else {
-                    video.src = normalizedContent;
-                }
+                video.dataset.lodSuspendedSrc = normalizedContent;
+                video.dataset.lodMediaSuspended = 'true';
             }
             video.muted = true;
             video.loop = true;
             video.autoplay = false;
             video.playsInline = true;
-            video.preload = 'metadata';
+            video.preload = 'none';
             video.autoplay = ensureVideoNodePlaybackState(nodeModel, video) === 'play';
             video.style.cssText = `position: absolute; left: 0; top: 0; width: calc(100% + var(--mind-media-surface-bleed, 0px)); height: calc(100% + var(--mind-media-surface-bleed, 0px)); min-width: calc(100% + var(--mind-media-surface-bleed, 0px)); min-height: calc(100% + var(--mind-media-surface-bleed, 0px)); max-width: none; max-height: none; object-fit: cover; object-position: center center; pointer-events: none; display: block; background: transparent; border: 0; outline: 0;`;
             video.ondragstart = (e) => e.preventDefault();
@@ -23405,6 +23715,12 @@
                         mediaEl.dataset.assetRefreshAttempted = '';
                         if (contentTypeLower === 'image') {
                             void setCssImageElementSource(mediaEl, nodeModel, content);
+                        } else if (contentTypeLower === 'video' && isCss3dVideoElementLowDetail(mediaEl, cssObject)) {
+                            const normalizedContent = normalizeCssMediaUrl(content);
+                            mediaEl.dataset.mediaSourceUrl = normalizedContent;
+                            mediaEl.dataset.resolvedMediaSourceUrl = mediaEl.dataset.resolvedMediaSourceUrl || '';
+                            mediaEl.dataset.lodSuspendedSrc = normalizedContent;
+                            syncCss3dVideoLodMediaSource(nodeModel, cssObject, false);
                         } else if (isLocalCssMediaReference(content) || getLocalCssMediaId(nodeModel, content)) {
                             mediaEl.dataset.mediaSourceUrl = getLocalCssMediaReference(nodeModel, content);
                             mediaEl.dataset.resolvedMediaSourceUrl = '';
@@ -23414,7 +23730,9 @@
                             delete mediaEl.dataset.videoCanvasProxyFailed;
                             mediaEl.src = content;
                         }
-                        if (contentTypeLower === 'video' && typeof mediaEl.load === 'function') {
+                        if (contentTypeLower === 'video' &&
+                            mediaEl.dataset?.lodMediaSuspended !== 'true' &&
+                            typeof mediaEl.load === 'function') {
                             mediaEl.load();
                         }
                     }
@@ -23428,7 +23746,12 @@
                 }
             }
             if (contentTypeLower === 'video') {
-                syncCss3dVideoCanvasProxy(nodeModel, cssObject);
+                if (isCss3dVideoElementLowDetail(mediaEl, cssObject)) {
+                    syncCss3dVideoLodMediaSource(nodeModel, cssObject, false);
+                } else {
+                    syncCss3dVideoLodMediaSource(nodeModel, cssObject, true);
+                    syncCss3dVideoCanvasProxy(nodeModel, cssObject);
+                }
             }
             const loadingEl = el.querySelector(`[id^="node-loading-"]`);
             if (loadingEl) {
@@ -23893,6 +24216,7 @@
         hasMountedEmbedIframe: hasMountedEmbedIframe,
         shouldConsumeEmbedPointerEvent: shouldConsumeEmbedPointerEvent,
         syncCss3dContent: syncCss3dContent,
+        syncCss3dVideoLodMediaSource: syncCss3dVideoLodMediaSource,
         syncCss3dScrollFromElement: syncCss3dScrollFromElement,
         syncCss3dScrollFromModel: syncCss3dScrollFromModel,
         syncCss3dMediaNodeFrame: syncCss3dMediaNodeFrame,

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

@@ -7405,7 +7405,7 @@ window.MindMapInteractions = (function () {
                 caret-color: #1f2937;
                 box-sizing: border-box; /* User Request */
                 overflow-y: auto; /* User Request */
-                -webkit-font-smoothing: antialiased;
+                -webkit-font-smoothing: auto;
                 text-rendering: auto;
                 white-space: pre-wrap;
                 overflow-wrap: break-word;

package/wwwroot/_content/MindExecution.Shared/js/mind-map-lod-renderer.js

@@ -13,13 +13,13 @@
     // LOD thresholds (explicit bands)
     const LOD_THRESHOLDS = {
         NEAR: 4500,     // ~4500: DOM overlay + CSS3D
-        NORMAL: 12000,  // 4500~12000: CSS3D only
-        MID: 12000,     // 12000~30000: instanced text lines + nodes
+        NORMAL: 4500,   // Legacy alias; NORMAL no longer keeps a scaled CSS3D band.
+        MID: 4500,      // 4500~30000: resident instanced nodes + line silhouettes
         FAR: 30000      // 30000~: nodes only (lines hidden)
     };
 
     // Backward-compatible pivot (used by legacy LOD switch)
-    const LOD_THRESHOLD_FAR = LOD_THRESHOLDS.MID;   // Switch to LOD past this
+    const LOD_THRESHOLD_FAR = LOD_THRESHOLDS.MID;   // Switch to resident LOD past this
     const LOD_THRESHOLD_NEAR = LOD_THRESHOLDS.MID;  // Switch to full-res before this
     function isDocumentHidden() {
         return typeof document !== 'undefined' && document.visibilityState === 'hidden';
@@ -51,7 +51,7 @@
     // ▲▲▲ [Usage] ▲▲▲
 
     // Procedural line rendering settings
-const LOD_RENDERER_BUILD_ID = '20260621-low-detail-proxy-css3d-v776';
+const LOD_RENDERER_BUILD_ID = '20260621-video-prefetch-v785';
     const DirtyKind = Object.freeze({
         ResidentFullRebuild: 'resident-full-rebuild',
         ResidentPatch: 'resident-patch',
@@ -4476,6 +4476,10 @@ const LOD_RENDERER_BUILD_ID = '20260621-low-detail-proxy-css3d-v776';
 
         _setCss3dLodClass(entry, isHigh) {
             this._setNodeDetailLevel(entry, isHigh ? 'HIGH' : 'LOW');
+            if (getNodeContentType(entry?.model) === 'video' &&
+                window.MindMapCss3DManager?.syncCss3dVideoLodMediaSource) {
+                window.MindMapCss3DManager.syncCss3dVideoLodMediaSource(entry.model, entry.cssObject, isHigh === true);
+            }
         }
 
         _shouldUseHighCss3dDetail(entry, module) {
@@ -4775,12 +4779,18 @@ const LOD_RENDERER_BUILD_ID = '20260621-low-detail-proxy-css3d-v776';
                 }
                 // ▲▲▲ [FIX] ▲▲▲
 
-                this._setCss3dLodClass(entry, this._shouldUseHighCss3dDetail(entry, module));
+                const shouldUseHighCss3dDetail = this._shouldUseHighCss3dDetail(entry, module);
+                this._setCss3dLodClass(entry, shouldUseHighCss3dDetail);
 
                 // ▼▼▼ [CRITICAL] Sync content BEFORE making CSS visible ▼▼▼
                 // Prevents one-frame display of stale/blurred text while dirty DOM is being updated.
                 const cssMediaEl = entry.cssObject.element?.querySelector?.('img,video') || null;
-                const needsInitialMediaSync = !!cssMediaEl && !cssMediaEl.getAttribute('src');
+                const isLowDetailVideoProxy =
+                    getNodeContentType(model) === 'video' &&
+                    shouldUseHighCss3dDetail !== true;
+                const needsInitialMediaSync = !!cssMediaEl &&
+                    !cssMediaEl.getAttribute('src') &&
+                    isLowDetailVideoProxy !== true;
                 if ((entry.isCssDirty || needsInitialMediaSync) && window.MindMapCss3DManager?.syncCss3dContent) {
                     window.MindMapCss3DManager.syncCss3dContent(model, entry.cssObject);
                     entry.isCssDirty = false; // sync 완료 후 clean
@@ -5743,7 +5753,7 @@ const LOD_RENDERER_BUILD_ID = '20260621-low-detail-proxy-css3d-v776';
                     return;
                 }
 
-                // Explicit bands: NEAR(DOM overlay + CSS3D), NORMAL(CSS3D), MID(노드+라인), FAR(노드만)
+                // Explicit bands: NEAR(DOM overlay + CSS3D), MID(resident nodes+lines), FAR(nodes only)
                 const shouldUseLOD = lodBand === 'MID' || lodBand === 'FAR';
                 perfMode = shouldUseLOD ? 'lod' : 'fullres';
                 const isLodPanFrame = shouldUseLOD &&
@@ -5925,7 +5935,7 @@ const LOD_RENDERER_BUILD_ID = '20260621-low-detail-proxy-css3d-v776';
 
                     } else {
                         perfTime('fullResSetup', () => {
-                            // Full-res: NEAR(DOM overlay + CSS3D) / NORMAL(CSS3D only)
+                            // Full-res: NEAR only. NORMAL is intentionally collapsed into resident MID.
                             const tNearStart = performance.now();
                             if (this.instancedHaloMesh) this.instancedHaloMesh.visible = false;
                             if (this.instancedConsoleMesh) this.instancedConsoleMesh.visible = false;

package/wwwroot/_content/MindExecution.Shared/js/mind-map-text-overlay-v2.js

@@ -265,15 +265,15 @@
         const cameraZ = Number(module?.camera?.position?.z || 0);
         const thresholds = globalThis.LODRenderer?.LOD_THRESHOLDS || {
             NEAR: 4500,
-            NORMAL: 12000,
-            MID: 12000,
+            NORMAL: 4500,
+            MID: 4500,
             FAR: 30000
         };
 
         if (cameraZ >= Number(thresholds.FAR || 25000)) {
             return 'FAR';
         }
-        if (cameraZ >= Number(thresholds.MID || thresholds.NORMAL || 12000)) {
+        if (cameraZ >= Number(thresholds.MID || thresholds.NORMAL || 4500)) {
             return 'MID';
         }
         if (cameraZ >= Number(thresholds.NORMAL || thresholds.NEAR || 4500)) {
@@ -1932,8 +1932,8 @@
         copyStyle(null, readComputedStyleValue(computed, null, 'text-wrap'), 'text-wrap');
         copyStyle(null, readComputedStyleValue(computed, null, 'text-wrap-mode'), 'text-wrap-mode');
         copyStyle(null, readComputedStyleValue(computed, null, 'text-wrap-style'), 'text-wrap-style');
-        targetElement.style.setProperty('-webkit-font-smoothing', 'antialiased');
-        targetElement.style.setProperty('-moz-osx-font-smoothing', 'grayscale');
+        targetElement.style.setProperty('-webkit-font-smoothing', 'auto');
+        targetElement.style.setProperty('-moz-osx-font-smoothing', 'auto');
     }
 
     function getTypographySyncChildren(element) {

package/wwwroot/index.html

@@ -7,8 +7,8 @@
     <title>MindExec | Business Execution OS for solo builders</title>
     <meta name="description" content="MindExec is an AI business execution OS for solo builders who want to turn notes, research, assets, and repeatable execution Skills into revenue-producing work." />
     <base href="/" />
-    <link rel="stylesheet" href="_content/MindExecution.Shared/css/app.css?v=20260621-low-detail-proxy-css3d-v776" />
-    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260621-low-detail-proxy-css3d-v776" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/app.css?v=20260621-video-prefetch-v785" />
+    <link rel="stylesheet" href="_content/MindExecution.Shared/css/mind-map-overrides.css?v=20260621-video-prefetch-v785" />
     <!-- ??좎뜦堉??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 = '20260621-low-detail-proxy-css3d-v776';
+        const scriptVersion = '20260621-video-prefetch-v785';
             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":  "MbpJnc8v",
+    "version":  "jBFdtOmP",
     "assets":  [
                    {
                        "hash":  "sha256-+CSYMcqLNTsq3VnH11jgYyOCCdxvHzL74CBmo4sCmMU=",
@@ -42,7 +42,7 @@
                        "url":  "_content/MindExecution.Shared/css/app.css"
                    },
                    {
-                       "hash":  "sha256-LJ0d20aCwq93DVCUqLyvJNX+mNcrsdfFaCVIH9yV2fI=",
+                       "hash":  "sha256-QyE+9OXJBCXf5eXHuMaxnGjVAMIuQr72tNhfSCk6nro=",
                        "url":  "_content/MindExecution.Shared/css/mind-map-overrides.css"
                    },
                    {
@@ -78,7 +78,7 @@
                        "url":  "_content/MindExecution.Shared/js/marked.min.js"
                    },
                    {
-                       "hash":  "sha256-mpLsxGYtGGy/YqbZwr5Ex7q31qt7q9BayMYC6nRCXzg=",
+                       "hash":  "sha256-bcZumly3UqFp3yXp94h51Uect2dFJXYGVRKxtJkh4HE=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js"
                    },
                    {
@@ -86,7 +86,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-core.js.backup"
                    },
                    {
-                       "hash":  "sha256-Fqn/yDEDcOO23DxXXIBdQgS4u6ukCYTkfNfn8xYMAwM=",
+                       "hash":  "sha256-1hnC4MKgwN6Nsz5+5t3Kjy6m/3kfaI7QNMFKaS8H/hA=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-css3d-manager.js"
                    },
                    {
@@ -106,7 +106,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-glow-shader.js"
                    },
                    {
-                       "hash":  "sha256-zEddte5cBTtErNAKwTTpVx4/HQVQpkkF460AYsYe/28=",
+                       "hash":  "sha256-iqbrsttHQqhuGvTIj1yVbjF79M218kbqXCZ3R1iyg/Y=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-interactions.js"
                    },
                    {
@@ -114,7 +114,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-lod-plan-worker.js"
                    },
                    {
-                       "hash":  "sha256-inS/Wi5+LJCbvq9pUqv0SL85qgeXAK3mKPwOdYR5zXw=",
+                       "hash":  "sha256-btpizB1MkhK5bRl7BmaL4+ZNHh2bZrg160eaiBbzRy8=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-lod-renderer.js"
                    },
                    {
@@ -154,7 +154,7 @@
                        "url":  "_content/MindExecution.Shared/js/mind-map-text-lod-system.js"
                    },
                    {
-                       "hash":  "sha256-e94AeCT+ioRhNY17vPaFfz2iVFvaZ8x5nfmAKFCXGbw=",
+                       "hash":  "sha256-pEdLlTuNhb8coOCRcx1fX+xLyD8ATKxwR8CXupgbgtk=",
                        "url":  "_content/MindExecution.Shared/js/mind-map-text-overlay-v2.js"
                    },
                    {
@@ -834,7 +834,7 @@
                        "url":  "image-manifest.json"
                    },
                    {
-                       "hash":  "sha256-Sp1f8uVvLis0unU3xP8nl5340QG8tNoGJcsSIEQZfsU=",
+                       "hash":  "sha256-mvQ5z9xIyVIoYzxOcaAL8lUhs30CGFe2NcbVq3Wa0AU=",
                        "url":  "index.html"
                    },
                    {

package/wwwroot/service-worker.js

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