@mindexec/cli 0.2.0

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

@@ -0,0 +1,1431 @@
+// File: wwwroot/js/mind-map-menu-manager.js
+// Single-node menu manager — screen-space DOM overlay (zoom-invariant)
+(function () {
+    'use strict';
+
+    let currentMenuElement = null;   // DOM overlay element
+    let currentMenuNodeId = null;
+    let _module = null;
+    const MEMO_COLORS = [
+        { key: 'coral', swatch: '#ff8052', ring: 'rgba(255, 128, 82, 0.22)' },
+        { key: 'amber', swatch: '#f59e0b', ring: 'rgba(245, 158, 11, 0.22)' },
+        { key: 'sun', swatch: '#ca8a04', ring: 'rgba(202, 138, 4, 0.22)' },
+        { key: 'sage', swatch: '#65a30d', ring: 'rgba(101, 163, 13, 0.22)' },
+        { key: 'mint', swatch: '#10b981', ring: 'rgba(16, 185, 129, 0.22)' },
+        { key: 'sky', swatch: '#3b82f6', ring: 'rgba(59, 130, 246, 0.22)' },
+        { key: 'indigo', swatch: '#6366f1', ring: 'rgba(99, 102, 241, 0.22)' },
+        { key: 'violet', swatch: '#8b5cf6', ring: 'rgba(139, 92, 246, 0.22)' },
+        { key: 'rose', swatch: '#f43f5e', ring: 'rgba(244, 63, 94, 0.22)' },
+        { key: 'gray', swatch: '#6b7280', ring: 'rgba(107, 114, 128, 0.22)' },
+        { key: 'slate', swatch: '#64748b', ring: 'rgba(100, 116, 139, 0.22)' }
+    ];
+
+    function ensureFeedbackStyles() {
+        if (document.getElementById('mindmap-feedback-styles')) return;
+
+        const style = document.createElement('style');
+        style.id = 'mindmap-feedback-styles';
+        style.textContent = `
+            .mindmap-toast-stack {
+                position: fixed;
+                right: 22px;
+                bottom: 24px;
+                z-index: 2147483000;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                pointer-events: none;
+            }
+
+            .mindmap-toast {
+                width: min(380px, calc(100vw - 32px));
+                padding: 12px 14px;
+                border-radius: 16px;
+                background: rgba(15, 23, 42, 0.94);
+                color: #f8fafc;
+                box-shadow: 0 18px 42px rgba(15, 23, 42, 0.24);
+                font: 600 13px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
+                opacity: 0;
+                transform: translateY(8px);
+                transition: opacity 180ms ease, transform 180ms ease;
+                pointer-events: auto;
+            }
+
+            .mindmap-toast.is-visible {
+                opacity: 1;
+                transform: translateY(0);
+            }
+
+            .mindmap-toast[data-kind="error"] {
+                background: rgba(127, 29, 29, 0.94);
+            }
+
+            .mindmap-confirm-backdrop {
+                position: fixed;
+                inset: 0;
+                z-index: 2147483001;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 24px;
+                background: rgba(15, 23, 42, 0.20);
+                backdrop-filter: blur(5px);
+            }
+
+            .mindmap-confirm-panel {
+                width: min(440px, calc(100vw - 36px));
+                border: 1px solid rgba(203, 213, 225, 0.86);
+                border-radius: 22px;
+                background: rgba(248, 250, 252, 0.98);
+                box-shadow: 0 28px 72px rgba(15, 23, 42, 0.22);
+                padding: 20px;
+                color: #0f172a;
+                font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+            }
+
+            .mindmap-confirm-title {
+                margin: 0;
+                font-size: 15px;
+                font-weight: 800;
+                letter-spacing: 0.01em;
+            }
+
+            .mindmap-confirm-message {
+                margin: 8px 0 0;
+                color: #475569;
+                font-size: 13px;
+                line-height: 1.55;
+            }
+
+            .mindmap-confirm-actions {
+                display: flex;
+                justify-content: flex-end;
+                gap: 10px;
+                margin-top: 18px;
+            }
+
+            .mindmap-confirm-button {
+                border: 0;
+                border-radius: 999px;
+                padding: 9px 15px;
+                font-size: 13px;
+                font-weight: 800;
+                cursor: pointer;
+                transition: transform 120ms ease, background 120ms ease;
+            }
+
+            .mindmap-confirm-button:active {
+                transform: scale(0.98);
+            }
+
+            .mindmap-confirm-button.secondary {
+                background: #e0f2fe;
+                color: #075985;
+            }
+
+            .mindmap-confirm-button.primary {
+                background: #0f172a;
+                color: #ffffff;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    function getToastStack() {
+        ensureFeedbackStyles();
+        let stack = document.querySelector('.mindmap-toast-stack');
+        if (!stack) {
+            stack = document.createElement('div');
+            stack.className = 'mindmap-toast-stack';
+            document.body.appendChild(stack);
+        }
+        return stack;
+    }
+
+    function showToast(message, options = {}) {
+        const text = String(message || '').trim();
+        if (!text || !document?.body) return;
+
+        const toast = document.createElement('div');
+        toast.className = 'mindmap-toast';
+        toast.dataset.kind = options.kind || 'info';
+        toast.textContent = text;
+
+        getToastStack().appendChild(toast);
+        requestAnimationFrame(() => toast.classList.add('is-visible'));
+
+        window.setTimeout(() => {
+            toast.classList.remove('is-visible');
+            window.setTimeout(() => toast.remove(), 220);
+        }, options.duration || 2600);
+    }
+
+    function showConfirmDialog(options = {}) {
+        if (!document?.body) return Promise.resolve(false);
+
+        ensureFeedbackStyles();
+
+        return new Promise((resolve) => {
+            const backdrop = document.createElement('div');
+            backdrop.className = 'mindmap-confirm-backdrop';
+
+            const panel = document.createElement('div');
+            panel.className = 'mindmap-confirm-panel';
+            panel.setAttribute('role', 'dialog');
+            panel.setAttribute('aria-modal', 'true');
+
+            const title = document.createElement('h3');
+            title.className = 'mindmap-confirm-title';
+            title.textContent = options.title || 'Confirm action';
+
+            const message = document.createElement('p');
+            message.className = 'mindmap-confirm-message';
+            message.textContent = options.message || 'Do you want to continue?';
+
+            const actions = document.createElement('div');
+            actions.className = 'mindmap-confirm-actions';
+
+            const cancel = document.createElement('button');
+            cancel.type = 'button';
+            cancel.className = 'mindmap-confirm-button secondary';
+            cancel.textContent = options.cancelText || 'Cancel';
+
+            const confirm = document.createElement('button');
+            confirm.type = 'button';
+            confirm.className = 'mindmap-confirm-button primary';
+            confirm.textContent = options.confirmText || 'Confirm';
+
+            const close = (value) => {
+                backdrop.remove();
+                document.removeEventListener('keydown', handleKeyDown, true);
+                resolve(!!value);
+            };
+
+            const handleKeyDown = (event) => {
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    close(false);
+                }
+            };
+
+            cancel.addEventListener('click', () => close(false));
+            confirm.addEventListener('click', () => close(true));
+            backdrop.addEventListener('click', (event) => {
+                if (event.target === backdrop) close(false);
+            });
+            document.addEventListener('keydown', handleKeyDown, true);
+
+            actions.appendChild(cancel);
+            actions.appendChild(confirm);
+            panel.appendChild(title);
+            panel.appendChild(message);
+            panel.appendChild(actions);
+            backdrop.appendChild(panel);
+            document.body.appendChild(backdrop);
+            confirm.focus({ preventScroll: true });
+        });
+    }
+
+    window.MindMapFeedback = window.MindMapFeedback || {};
+    window.MindMapFeedback.toast = showToast;
+    window.MindMapFeedback.confirm = showConfirmDialog;
+
+    function init(module) {
+        _module = module;
+    }
+
+    function ensureMetadata(model) {
+        if (!model) return {};
+        if (model.metadata && typeof model.metadata === 'object') return model.metadata;
+        if (model.Metadata && typeof model.Metadata === 'object') {
+            model.metadata = model.Metadata;
+            return model.metadata;
+        }
+        model.metadata = {};
+        model.Metadata = model.metadata;
+        return model.metadata;
+    }
+
+    function getNodeSemanticType(model) {
+        const metadata = ensureMetadata(model);
+        return String(metadata.SemanticType || metadata.semanticType || '').trim();
+    }
+
+    function isAgentStyledMemoNode(model) {
+        const semanticType = getNodeSemanticType(model);
+        return semanticType === 'MindCanvasAgent' || semanticType === 'AgentCommand';
+    }
+
+    function isTextFitNode(model) {
+        const contentType = String(model?.contentType || '').toLowerCase();
+        return contentType === 'text' || contentType === 'markdown' || contentType === 'note' || contentType === 'code';
+    }
+
+    function getNodeContentType(model) {
+        return String(model?.contentType || '').trim().toLowerCase();
+    }
+
+    function showActionSuccessIcon(button) {
+        const icon = button?.querySelector?.('i');
+        if (!icon) return;
+
+        const oldClass = icon.className;
+        icon.className = 'fa-solid fa-check text-green-500';
+        setTimeout(() => {
+            icon.className = oldClass;
+        }, 1000);
+    }
+
+    function getImageClipboardSourceCandidates(nodeModel) {
+        const assetUrls = window.MindMapNodes?.getNodeImageAssetUrls?.(nodeModel) || {};
+        const rawCandidates = [
+            assetUrls.fullResUrl,
+            assetUrls.originalUrl,
+            assetUrls.originalPath,
+            assetUrls.previewUrl,
+            assetUrls.responseUrl,
+            nodeModel?.response,
+            nodeModel?.Response
+        ];
+
+        const candidates = [];
+        rawCandidates.forEach(value => {
+            const normalized = typeof value === 'string' ? value.trim() : '';
+            if (!normalized || candidates.includes(normalized)) {
+                return;
+            }
+
+            candidates.push(normalized);
+        });
+
+        return candidates;
+    }
+
+    function shouldResolveImageClipboardSourceBeforeFetch(src) {
+        const normalized = typeof src === 'string' ? src.trim().toLowerCase() : '';
+        if (!normalized || normalized.startsWith('blob:') || normalized.startsWith('data:') || normalized.startsWith('file:')) {
+            return false;
+        }
+
+        return normalized.startsWith('/assets/')
+            || normalized.startsWith('assets/')
+            || normalized.includes('/assets/thumbs/')
+            || (normalized.includes('/assets/') && !/\.[a-z0-9]{2,5}(?:[?#]|$)/i.test(normalized));
+    }
+
+    async function resolveClipboardImageSource(nodeModel, src) {
+        if (!shouldResolveImageClipboardSourceBeforeFetch(src) || !_module?.dotNetHelper) {
+            return src;
+        }
+
+        const nodeId = String(nodeModel?.id || nodeModel?.Id || '').trim();
+        if (!nodeId) {
+            return src;
+        }
+
+        try {
+            const resolved = await _module.dotNetHelper.invokeMethodAsync('ResolveNodeAssetUrl', nodeId);
+            const normalized = typeof resolved === 'string' ? resolved.trim() : '';
+            return normalized || src;
+        } catch (error) {
+            console.warn('[MindMapMenuManager] Failed to resolve image clipboard source.', error);
+            return src;
+        }
+    }
+
+    async function fetchClipboardImageBlob(nodeModel) {
+        const candidates = getImageClipboardSourceCandidates(nodeModel);
+        let lastError = null;
+
+        for (const src of candidates) {
+            try {
+                const resolvedSrc = await resolveClipboardImageSource(nodeModel, src);
+                const response = await fetch(resolvedSrc, { cache: 'no-store' });
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                }
+
+                const blob = await response.blob();
+                if (!(blob instanceof Blob) || blob.size <= 0) {
+                    throw new Error('Empty image blob.');
+                }
+
+                return { blob, src: resolvedSrc };
+            } catch (error) {
+                lastError = error;
+                console.warn(`[MindMapMenuManager] Failed to fetch clipboard image from ${src}`, error);
+            }
+        }
+
+        throw lastError || new Error('No image source was available for clipboard copy.');
+    }
+
+    async function decodeClipboardImageBlob(blob) {
+        if (typeof createImageBitmap === 'function') {
+            try {
+                const bitmap = await createImageBitmap(blob);
+                return {
+                    width: bitmap.width,
+                    height: bitmap.height,
+                    draw(ctx, width, height) {
+                        ctx.drawImage(bitmap, 0, 0, width, height);
+                    },
+                    dispose() {
+                        bitmap.close?.();
+                    }
+                };
+            } catch (error) {
+                console.warn('[MindMapMenuManager] createImageBitmap failed for clipboard image conversion.', error);
+            }
+        }
+
+        const objectUrl = URL.createObjectURL(blob);
+        try {
+            const image = await new Promise((resolve, reject) => {
+                const img = new Image();
+                img.decoding = 'async';
+                img.onload = () => resolve(img);
+                img.onerror = () => reject(new Error('Failed to decode image blob.'));
+                img.src = objectUrl;
+            });
+
+            return {
+                width: image.naturalWidth || image.width,
+                height: image.naturalHeight || image.height,
+                draw(ctx, width, height) {
+                    ctx.drawImage(image, 0, 0, width, height);
+                },
+                dispose() {
+                    image.remove?.();
+                    URL.revokeObjectURL(objectUrl);
+                }
+            };
+        } catch (error) {
+            URL.revokeObjectURL(objectUrl);
+            throw error;
+        }
+    }
+
+    async function convertBlobToPngForClipboard(blob) {
+        const normalizedType = String(blob?.type || '').toLowerCase();
+        if (normalizedType === 'image/png' && blob.size > 0) {
+            return blob;
+        }
+
+        const decoded = await decodeClipboardImageBlob(blob);
+        const width = Math.max(1, Math.round(decoded?.width || 0));
+        const height = Math.max(1, Math.round(decoded?.height || 0));
+
+        if (!width || !height) {
+            decoded?.dispose?.();
+            throw new Error('Decoded image had no dimensions.');
+        }
+
+        try {
+            if (typeof OffscreenCanvas === 'function') {
+                const canvas = new OffscreenCanvas(width, height);
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    throw new Error('OffscreenCanvas 2D context is unavailable.');
+                }
+
+                decoded.draw(ctx, width, height);
+                return await canvas.convertToBlob({ type: 'image/png' });
+            }
+
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                throw new Error('Canvas 2D context is unavailable.');
+            }
+
+            decoded.draw(ctx, width, height);
+            return await new Promise((resolve, reject) => {
+                canvas.toBlob(result => {
+                    if (result instanceof Blob && result.size > 0) {
+                        resolve(result);
+                        return;
+                    }
+
+                    reject(new Error('Failed to encode clipboard image as PNG.'));
+                }, 'image/png');
+            });
+        } finally {
+            decoded?.dispose?.();
+        }
+    }
+
+    async function writeImageBlobToClipboard(blob, fallbackText) {
+        if (navigator.clipboard?.write && typeof ClipboardItem === 'function') {
+            await navigator.clipboard.write([
+                new ClipboardItem({ 'image/png': blob })
+            ]);
+            return 'image';
+        }
+
+        if (navigator.clipboard?.writeText && fallbackText) {
+            await navigator.clipboard.writeText(fallbackText);
+            return 'text';
+        }
+
+        throw new Error('Clipboard API is unavailable.');
+    }
+
+    function getNodeSourceFilePath(model) {
+        return String(model?.sourceFilePath || model?.SourceFilePath || '').trim();
+    }
+
+    function getCompanyBindingValue(model, key) {
+        const metadata = ensureMetadata(model);
+        return String(metadata[key] || '').trim();
+    }
+
+    function isCompanyBoundNode(model) {
+        return getCompanyBindingValue(model, 'CompanyCore.CompanyId').length > 0;
+    }
+
+    function getCompanyStatus(model) {
+        return getCompanyBindingValue(model, 'CompanyCore.Status').toLowerCase();
+    }
+
+    function isPendingCompanyBinding(model) {
+        const companyId = getCompanyBindingValue(model, 'CompanyCore.CompanyId');
+        if (companyId.startsWith('pending:')) {
+            return true;
+        }
+
+        const status = getCompanyStatus(model);
+        const runId = getCompanyBindingValue(model, 'CompanyCore.RunId');
+        return !companyId && status === 'queued' && !runId;
+    }
+
+    function applyCompanyBindingValues(model, values) {
+        const metadata = ensureMetadata(model);
+        Object.entries(values || {}).forEach(([key, value]) => {
+            if (value === null || value === undefined || value === '') {
+                delete metadata[key];
+                return;
+            }
+
+            metadata[key] = String(value);
+        });
+        model.metadata = metadata;
+        model.Metadata = metadata;
+    }
+
+    function applyOptimisticCompanyRunState(nodeEntry, nodeId, executionMode, enableSubAgents) {
+        if (!nodeEntry?.model) return;
+
+        applyCompanyBindingValues(nodeEntry.model, {
+            'CompanyCore.CompanyId': `pending:${nodeId}`,
+            'CompanyCore.ExecutionMode': executionMode || 'Auto',
+            'CompanyCore.SubAgentsEnabled': enableSubAgents ? 'true' : 'false',
+            'CompanyCore.Status': 'Queued',
+            'CompanyCore.LastMessage': 'Starting company from this note...',
+            'CompanyCore.PendingApprovalCount': '0',
+            'CompanyCore.RunningAgentCount': '0',
+            'CompanyCore.WorkItemCount': '0',
+            'CompanyCore.ArtifactCount': '0',
+            'CompanyCore.GrowthResultCount': '0',
+            'CompanyCore.RevenueResultCount': '0'
+        });
+    }
+
+    function applyCompanyRunResult(nodeEntry, result, fallbackExecutionMode, fallbackEnableSubAgents) {
+        if (!nodeEntry?.model) return;
+
+        const companyId = String(result?.companyId || '').trim();
+        const status = String(result?.status || '').trim();
+        if (!companyId) {
+            applyCompanyBindingValues(nodeEntry.model, {
+                'CompanyCore.CompanyId': null,
+                'CompanyCore.RunId': null,
+                'CompanyCore.ExecutionMode': result?.executionMode || fallbackExecutionMode || 'Auto',
+                'CompanyCore.SubAgentsEnabled': typeof result?.subAgentsEnabled === 'boolean'
+                    ? (result.subAgentsEnabled ? 'true' : 'false')
+                    : (fallbackEnableSubAgents ? 'true' : 'false'),
+                'CompanyCore.Status': status || 'Failed',
+                'CompanyCore.LastMessage': result?.lastMessage || 'Company did not start from this note.',
+                'CompanyCore.PendingApprovalCount': String(result?.pendingApprovalCount ?? 0),
+                'CompanyCore.RunningAgentCount': String(result?.runningAgentCount ?? 0),
+                'CompanyCore.WorkItemCount': String(result?.workItemCount ?? 0),
+                'CompanyCore.ArtifactCount': String(result?.artifactCount ?? 0),
+                'CompanyCore.GrowthResultCount': String(result?.growthResultCount ?? 0),
+                'CompanyCore.RevenueResultCount': String(result?.revenueResultCount ?? 0),
+                'CompanyCore.LastSnapshotAt': result?.lastSnapshotAt || null
+            });
+            return;
+        }
+
+        applyCompanyBindingValues(nodeEntry.model, {
+            'CompanyCore.CompanyId': companyId,
+            'CompanyCore.RunId': result?.runId || null,
+            'CompanyCore.ExecutionMode': result?.executionMode || fallbackExecutionMode || 'Auto',
+            'CompanyCore.SubAgentsEnabled': typeof result?.subAgentsEnabled === 'boolean'
+                ? (result.subAgentsEnabled ? 'true' : 'false')
+                : (fallbackEnableSubAgents ? 'true' : 'false'),
+            'CompanyCore.Status': status || 'Queued',
+            'CompanyCore.PendingApprovalCount': String(result?.pendingApprovalCount ?? 0),
+            'CompanyCore.RunningAgentCount': String(result?.runningAgentCount ?? 0),
+            'CompanyCore.WorkItemCount': String(result?.workItemCount ?? 0),
+            'CompanyCore.ArtifactCount': String(result?.artifactCount ?? 0),
+            'CompanyCore.GrowthResultCount': String(result?.growthResultCount ?? 0),
+            'CompanyCore.RevenueResultCount': String(result?.revenueResultCount ?? 0),
+            'CompanyCore.LastSnapshotAt': result?.lastSnapshotAt || null,
+            'CompanyCore.LastMessage': result?.lastMessage || 'Company is running from this note in the background.'
+        });
+    }
+
+    function clearCompanyBindingValues(nodeEntry) {
+        if (!nodeEntry?.model) return;
+
+        applyCompanyBindingValues(nodeEntry.model, {
+            'CompanyCore.CompanyId': null,
+            'CompanyCore.RunId': null,
+            'CompanyCore.CoreBaseUrl': null,
+            'CompanyCore.SourceNodeId': null,
+            'CompanyCore.BoardId': null,
+            'CompanyCore.ExecutionMode': null,
+            'CompanyCore.SubAgentsEnabled': null,
+            'CompanyCore.Status': null,
+            'CompanyCore.LastMessage': null,
+            'CompanyCore.PendingApprovalCount': null,
+            'CompanyCore.RunningAgentCount': null,
+            'CompanyCore.WorkItemCount': null,
+            'CompanyCore.ArtifactCount': null,
+            'CompanyCore.GrowthResultCount': null,
+            'CompanyCore.RevenueResultCount': null,
+            'CompanyCore.LastSnapshotAt': null
+        });
+    }
+
+    function syncCompanyNodeVisual(nodeEntry) {
+        if (!nodeEntry?.cssObject || !window.MindMapCss3DManager?.syncCss3dContent) {
+            return;
+        }
+
+        nodeEntry.isCssDirty = true;
+        window.MindMapCss3DManager.syncCss3dContent(nodeEntry.model, nodeEntry.cssObject);
+        nodeEntry.isCssDirty = false;
+        _module?.lodRenderer?.requestResidentPatch?.('update-node', nodeEntry.model?.id || nodeEntry.model?.Id);
+    }
+
+    function canRunAsCompany(model) {
+        if (!model) return false;
+        if (isCompanyBoundNode(model)) return true;
+
+        const contentType = getNodeContentType(model);
+        if (!contentType) return true;
+
+        if (['image', 'video', 'pdf', 'file', 'directory'].includes(contentType)) {
+            return false;
+        }
+
+        if (['note', 'text', 'markdown', 'memo', 'code', 'mask'].includes(contentType)) {
+            return true;
+        }
+
+        return getNodeSourceFilePath(model).length === 0;
+    }
+
+    function getMemoColorKey(model) {
+        const metadata = ensureMetadata(model);
+        const fallbackKey = isAgentStyledMemoNode(model) ? 'gray' : 'coral';
+        const key = String(metadata.memoColor || fallbackKey).toLowerCase();
+        return MEMO_COLORS.some(color => color.key === key) ? key : fallbackKey;
+    }
+
+    function buildMemoColorPopover(selectedKey) {
+        const popover = document.createElement('div');
+        popover.className = 'menu-color-popover';
+
+        MEMO_COLORS.forEach(color => {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'menu-color-swatch';
+            button.dataset.colorKey = color.key;
+            button.title = color.key;
+            button.style.setProperty('--swatch-color', color.swatch);
+            button.style.setProperty('--swatch-ring', color.ring);
+            button.classList.toggle('is-active', color.key === selectedKey);
+            popover.appendChild(button);
+        });
+
+        return popover;
+    }
+
+    function syncMemoColorPopover(popover, selectedKey) {
+        if (!popover) return;
+        popover.querySelectorAll('.menu-color-swatch').forEach(button => {
+            button.classList.toggle('is-active', button.dataset.colorKey === selectedKey);
+        });
+    }
+
+    function refreshMemoNode(nodeEntry) {
+        if (!nodeEntry) return;
+        nodeEntry.isCssDirty = false;
+        if (nodeEntry.cssObject && window.MindMapCss3DManager?.syncCss3dContent) {
+            window.MindMapCss3DManager.syncCss3dContent(nodeEntry.model, nodeEntry.cssObject);
+        }
+        if (_module?.lodRenderer?.requestResidentPatch) {
+            _module.lodRenderer.requestResidentPatch('update-node', nodeEntry.model?.id || nodeEntry.model?.Id);
+        }
+    }
+
+    // ▼▼▼ [Refactor] Screen-space DOM overlay instead of CSS3DObject ▼▼▼
+    function showMenu(nodeId) {
+        hideMenu();
+
+        if (!nodeId || !_module) return;
+
+        const nodeEntry = _module.nodeObjectsById.get(nodeId);
+        if (!nodeEntry) return;
+
+        const templateId = `node-${nodeId}`;
+        const templateNode = document.getElementById(templateId);
+
+        let menuContainerSource = templateNode ? templateNode.querySelector('.node-menu-container') : null;
+        if (!menuContainerSource) {
+            menuContainerSource = createMenuContainer(nodeEntry);
+        }
+
+        // Clone menu DOM
+        const menuClone = menuContainerSource.cloneNode(true);
+
+        // Sync AI button state
+        const isAiEnabled = nodeEntry.model.isAiEnabled !== false;
+        const aiBtn = menuClone.querySelector('.js-btn-ai');
+        if (aiBtn) {
+            aiBtn.classList.remove('active-ai', 'inactive-ai');
+            aiBtn.classList.add(isAiEnabled ? 'active-ai' : 'inactive-ai');
+
+            const existingOverlay = aiBtn.querySelector('.slash-overlay');
+            if (existingOverlay) existingOverlay.remove();
+
+            if (!isAiEnabled) {
+                const span = document.createElement('span');
+                span.className = 'slash-overlay';
+                span.textContent = '\\';
+                const icon = aiBtn.querySelector('i');
+                if (icon) icon.after(span);
+            }
+        }
+
+        // ★ Hide edit button for file nodes (text files and code files)
+        const editBtn = menuClone.querySelector('.js-btn-edit');
+        const prompt = nodeEntry.model.prompt || '';
+        const contentType = nodeEntry.model.contentType;
+
+        const textFileExtensions = ['.txt', '.md'];
+        const isTextFile = textFileExtensions.some(ext => prompt.toLowerCase().endsWith(ext));
+
+        const codeFileExtensions = [
+            '.js', '.jsx', '.ts', '.tsx', '.py', '.cs', '.java',
+            '.cpp', '.c', '.h', '.go', '.rs', '.rb', '.php',
+            '.swift', '.kt', '.json', '.xml', '.yaml', '.yml',
+            '.sql', '.html', '.css', '.scss', '.less', '.sh', '.bat', '.ps1', '.csv', '.razor'
+        ];
+        const isCodeFile = codeFileExtensions.some(ext => prompt.toLowerCase().endsWith(ext));
+
+        if (editBtn && (isTextFile || isCodeFile || contentType === 'code')) {
+            editBtn.style.display = 'none';
+        }
+
+        // ★ Sync word wrap button state for code nodes
+        const isWordWrap = nodeEntry.model.isWordWrap === true;
+        const wrapBtn = menuClone.querySelector('.js-btn-wordwrap');
+        if (wrapBtn) {
+            wrapBtn.classList.toggle('active-nowrap', !isWordWrap);
+            wrapBtn.title = isWordWrap ? 'Disable word wrap' : 'Enable word wrap';
+
+            const icon = wrapBtn.querySelector('i');
+            if (icon) {
+                icon.className = isWordWrap
+                    ? 'fa-solid fa-align-left'
+                    : 'fa-solid fa-arrows-left-right';
+            }
+        }
+
+        // Menu styling — screen-space overlay
+        Object.assign(menuClone.style, {
+            position: 'fixed',
+            pointerEvents: 'auto',
+            whiteSpace: 'nowrap',
+            zIndex: '10000',
+            transform: 'translate(-50%, -100%)',
+            overflow: 'visible'
+        });
+
+        // Stop event bubbling
+        const stopProp = (e) => {
+            if (e.button === 1 || e.button === 2) {
+                return;
+            }
+            e.stopPropagation();
+        };
+        menuClone.addEventListener('mousedown', stopProp);
+        menuClone.addEventListener('mouseup', stopProp);
+        menuClone.addEventListener('click', stopProp);
+        menuClone.addEventListener('dblclick', stopProp);
+
+        // Bind button actions
+        bindMenuEvents(menuClone, nodeId, nodeEntry);
+
+        // Append to body
+        document.body.appendChild(menuClone);
+
+        // Position on screen
+        updateMenuScreenPosition(menuClone, nodeEntry);
+        requestAnimationFrame(() => {
+            if (currentMenuElement === menuClone && currentMenuNodeId === nodeId) {
+                updateMenuScreenPosition(menuClone, nodeEntry);
+            }
+        });
+
+        currentMenuElement = menuClone;
+        currentMenuNodeId = nodeId;
+    }
+    // ▲▲▲ [Refactor] ▲▲▲
+
+    function createMenuContainer(nodeEntry) {
+        const contentType = nodeEntry.model.contentType;
+        const prompt = nodeEntry.model.prompt || '';
+        const isAiEnabled = nodeEntry.model.isAiEnabled !== false;
+        const isWordWrap = nodeEntry.model.isWordWrap === true;
+        const companyBound = isCompanyBoundNode(nodeEntry.model);
+        const companyStatus = getCompanyStatus(nodeEntry.model);
+
+        const container = document.createElement('div');
+        container.className = 'node-menu-container';
+
+        const addSeparator = () => {
+            const sep = document.createElement('div');
+            sep.className = 'menu-separator';
+            container.appendChild(sep);
+        };
+
+        const addButton = (className, title, iconClass, isDisabled = false) => {
+            const btn = document.createElement('button');
+            btn.className = `menu-btn ${className}${isDisabled ? ' disabled' : ''}`.trim();
+            btn.title = title;
+            const icon = document.createElement('i');
+            icon.className = iconClass;
+            btn.appendChild(icon);
+            return btn;
+        };
+
+        const appendCompanyButtons = () => {
+            if (!canRunAsCompany(nodeEntry.model)) {
+                return false;
+            }
+
+            if (companyBound) {
+                if (isPendingCompanyBinding(nodeEntry.model)) {
+                    container.appendChild(addButton('js-btn-company-pending', 'Company is starting', 'fa-solid fa-spinner', true));
+                    container.appendChild(addButton('js-btn-company-refresh', 'Refresh Company status', 'fa-solid fa-rotate'));
+                    container.appendChild(addButton('js-btn-company-remove', 'Remove Company from this note', 'fa-solid fa-xmark'));
+                    return true;
+                }
+
+                if (companyStatus !== 'archived') {
+                    container.appendChild(addButton('js-btn-company-sync-goal', 'Update Company goal from this note', 'fa-solid fa-bullseye'));
+                }
+                container.appendChild(addButton('js-btn-company-graph', 'Open Company graph', 'fa-solid fa-diagram-project'));
+                container.appendChild(addButton('js-btn-company-refresh', 'Refresh Company status', 'fa-solid fa-rotate'));
+
+                if (companyStatus === 'archived') {
+                    container.appendChild(addButton('js-btn-company-archived', 'Company is archived', 'fa-solid fa-box-archive', true));
+                } else if (companyStatus === 'paused') {
+                    container.appendChild(addButton('js-btn-company-resume', 'Resume Company', 'fa-solid fa-play'));
+                } else {
+                    container.appendChild(addButton('js-btn-company-pause', 'Pause Company', 'fa-solid fa-pause'));
+                }
+
+                if (companyStatus !== 'archived') {
+                    container.appendChild(addButton('js-btn-company-archive', 'Archive Company', 'fa-solid fa-box-archive'));
+                }
+
+                container.appendChild(addButton('js-btn-company-remove', 'Remove Company from this note', 'fa-solid fa-xmark'));
+                return true;
+            }
+
+            container.appendChild(addButton('js-btn-company-run', 'Run as Company', 'fa-solid fa-building'));
+            return true;
+        };
+
+        // AI toggle (non-image)
+        let hasPrimaryActions = false;
+        if (contentType !== 'image' && contentType !== 'memo') {
+            const aiBtn = addButton(`js-btn-ai ${isAiEnabled ? 'active-ai' : 'inactive-ai'}`, isAiEnabled ? 'Disable AI reference' : 'Enable AI reference', 'fa-solid fa-brain');
+            if (!isAiEnabled) {
+                const span = document.createElement('span');
+                span.className = 'slash-overlay';
+                span.textContent = '\\';
+                aiBtn.appendChild(span);
+            }
+            container.appendChild(aiBtn);
+            hasPrimaryActions = true;
+        }
+
+        hasPrimaryActions = appendCompanyButtons() || hasPrimaryActions;
+
+        if (hasPrimaryActions) {
+            addSeparator();
+        }
+
+        // Type-specific buttons
+        switch (contentType) {
+            case 'text': {
+                if (!nodeEntry.model.sourceFilePath) {
+                    container.appendChild(addButton('js-btn-edit', 'Edit content', 'fa-solid fa-pen-to-square'));
+                }
+                container.appendChild(addButton('js-btn-copy', 'Copy content', 'fa-regular fa-copy'));
+                container.appendChild(addButton('js-btn-fit-text-height', 'Fit text height', 'fa-solid fa-arrows-up-down'));
+                container.appendChild(addButton('disabled', 'Share (coming soon)', 'fa-solid fa-share-nodes', true));
+                break;
+            }
+            case 'note': {
+                container.appendChild(addButton('js-btn-edit', 'Edit content', 'fa-solid fa-pen-to-square'));
+                container.appendChild(addButton('js-btn-copy', 'Copy content', 'fa-regular fa-copy'));
+                container.appendChild(addButton('js-btn-fit-text-height', 'Fit text height', 'fa-solid fa-arrows-up-down'));
+                container.appendChild(addButton('disabled', 'Share (coming soon)', 'fa-solid fa-share-nodes', true));
+                break;
+            }
+            case 'memo': {
+                const colorBtn = addButton('js-btn-color', 'Change background color', 'fa-solid fa-palette');
+                colorBtn.appendChild(buildMemoColorPopover(getMemoColorKey(nodeEntry.model)));
+                container.appendChild(colorBtn);
+                container.appendChild(addButton('js-btn-copy', 'Copy memo', 'fa-regular fa-copy'));
+                break;
+            }
+            case 'code': {
+                const wrapBtn = addButton(`js-btn-wordwrap ${isWordWrap ? '' : 'active-nowrap'}`, isWordWrap ? 'Disable word wrap' : 'Enable word wrap', isWordWrap ? 'fa-solid fa-align-left' : 'fa-solid fa-arrows-left-right');
+                container.appendChild(wrapBtn);
+                container.appendChild(addButton('js-btn-edit', 'Edit content', 'fa-solid fa-pen-to-square'));
+                container.appendChild(addButton('js-btn-copy', 'Copy content', 'fa-regular fa-copy'));
+                container.appendChild(addButton('js-btn-fit-text-height', 'Fit text height', 'fa-solid fa-arrows-up-down'));
+                container.appendChild(addButton('disabled', 'Share (coming soon)', 'fa-solid fa-share-nodes', true));
+                break;
+            }
+            case 'markdown': {
+                container.appendChild(addButton('js-btn-copy', 'Copy content', 'fa-regular fa-copy'));
+                container.appendChild(addButton('js-btn-fit-text-height', 'Fit text height', 'fa-solid fa-arrows-up-down'));
+                container.appendChild(addButton('disabled', 'Share (coming soon)', 'fa-solid fa-share-nodes', true));
+                break;
+            }
+            case 'file': {
+                container.appendChild(addButton('js-btn-copy', 'Copy content', 'fa-regular fa-copy'));
+                break;
+            }
+            case 'directory': {
+                container.appendChild(addButton('js-btn-settings', 'Folder settings', 'fa-solid fa-gear'));
+                break;
+            }
+            case 'image': {
+                container.appendChild(addButton('js-btn-copy-image', 'Copy image to clipboard', 'fa-regular fa-copy'));
+                break;
+            }
+            case 'video': {
+                container.appendChild(addButton('js-btn-video-play', 'Play video', 'fa-solid fa-play'));
+                container.appendChild(addButton('js-btn-video-pause', 'Pause video', 'fa-solid fa-pause'));
+                break;
+            }
+        }
+
+        addSeparator();
+        container.appendChild(addButton('delete-btn js-btn-delete', 'Delete', 'fa-solid fa-trash'));
+
+        return container;
+    }
+
+    function hideMenu() {
+        if (currentMenuElement && currentMenuElement.parentNode) {
+            currentMenuElement.parentNode.removeChild(currentMenuElement);
+        }
+        currentMenuElement = null;
+        currentMenuNodeId = null;
+    }
+
+    // ▼▼▼ [New] Screen-space position using worldToScreen ▼▼▼
+    function worldToScreen(worldX, worldY, camera, container) {
+        const THREE = globalThis.THREE;
+        const vector = new THREE.Vector3(worldX, worldY, 0);
+        vector.project(camera);
+
+        const halfWidth = container.clientWidth / 2;
+        const halfHeight = container.clientHeight / 2;
+
+        return {
+            x: (vector.x * halfWidth) + halfWidth,
+            y: -(vector.y * halfHeight) + halfHeight
+        };
+    }
+
+    function updateMenuScreenPosition(menuEl, nodeEntry) {
+        if (!menuEl || !nodeEntry || !_module || !_module.camera || !_module.container) return;
+
+        const templateNode = document.getElementById(`node-${nodeEntry.model?.id || currentMenuNodeId}`);
+        let anchorX = null;
+        let anchorY = null;
+        const shouldPreferProjectedAnchor =
+            _module.isZooming === true ||
+            _module.isPanning === true ||
+            _module.isDraggingNode === true ||
+            _module.isDraggingMultipleNodes === true ||
+            _module.isResizing === true;
+
+        if (templateNode && !shouldPreferProjectedAnchor) {
+            const rect = templateNode.getBoundingClientRect();
+            if (Number.isFinite(rect.left) && Number.isFinite(rect.top) && rect.width > 0 && rect.height > 0) {
+                anchorX = rect.left + rect.width / 2;
+                anchorY = rect.top;
+            }
+        }
+
+        if (!Number.isFinite(anchorX) || !Number.isFinite(anchorY)) {
+            const model = nodeEntry.model || {};
+            const glObject = nodeEntry.glObject || null;
+
+            // Use live world position during drag to keep menu attached to moving node.
+            const posX = glObject ? glObject.position.x : (model.positionX || 0);
+            const posY = glObject ? glObject.position.y : (model.positionY || 0);
+
+            // Prefer runtime width when available (resize/drag in-progress), fallback to model width.
+            const liveWidth = glObject?.userData?.width;
+            const width = Number.isFinite(liveWidth) ? liveWidth : (model.width || 400);
+
+            // Node top-center in world coordinates
+            const centerX = posX + width / 2;
+            const topY = posY;
+            const screenPos = worldToScreen(centerX, topY, _module.camera, _module.container);
+            anchorX = screenPos.x;
+            anchorY = screenPos.y;
+        }
+
+        const menuRect = menuEl.getBoundingClientRect();
+        const halfMenuWidth = menuRect.width > 0 ? menuRect.width / 2 : 0;
+        const viewportMargin = 10;
+        const verticalGap = 14;
+
+        const clampedLeft = Math.min(
+            window.innerWidth - viewportMargin - halfMenuWidth,
+            Math.max(viewportMargin + halfMenuWidth, anchorX)
+        );
+        const anchoredTop = anchorY - verticalGap;
+        const minTop = viewportMargin + (menuRect.height || 0);
+        const clampedTop = Math.max(minTop, anchoredTop);
+
+        menuEl.style.left = `${clampedLeft}px`;
+        menuEl.style.top = `${clampedTop}px`;
+    }
+    // ▲▲▲ [New] ▲▲▲
+
+    function update() {
+        if (currentMenuElement && currentMenuNodeId && _module) {
+            const nodeEntry = _module.nodeObjectsById.get(currentMenuNodeId);
+            if (nodeEntry) {
+                updateMenuScreenPosition(currentMenuElement, nodeEntry);
+            } else {
+                hideMenu();
+            }
+        }
+    }
+
+    function bindMenuEvents(element, nodeId, nodeEntry) {
+        const invokeMenuAction = async (button, methodName, ...args) => {
+            if (!button || !_module?.dotNetHelper || button.disabled) {
+                return;
+            }
+
+            button.disabled = true;
+            hideMenu();
+
+            try {
+                await _module.dotNetHelper.invokeMethodAsync(methodName, ...args);
+            } catch (error) {
+                console.error(`[MindMapMenuManager] ${methodName} failed for node ${nodeId}`, error);
+            } finally {
+                button.disabled = false;
+            }
+        };
+
+        element.addEventListener('mousedown', (e) => {
+            if (!e.target.closest('.js-btn-color')) {
+                element.querySelectorAll('.menu-color-popover.is-open').forEach(popover => {
+                    popover.classList.remove('is-open');
+                });
+            }
+        });
+
+        // AI Toggle
+        const aiBtn = element.querySelector('.js-btn-ai');
+        if (aiBtn) {
+            aiBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                nodeEntry.model.isAiEnabled = !nodeEntry.model.isAiEnabled;
+                if (_module.dotNetHelper) _module.dotNetHelper.invokeMethodAsync('ToggleNodeAi', nodeId);
+
+                const icon = aiBtn.querySelector('span.slash-overlay');
+                if (icon) icon.remove();
+                else {
+                    const span = document.createElement('span');
+                    span.className = 'slash-overlay';
+                    span.textContent = '\\';
+                    aiBtn.querySelector('i').after(span);
+                }
+                aiBtn.classList.toggle('active-ai');
+                aiBtn.classList.toggle('inactive-ai');
+            });
+        }
+
+        // Edit (convert text to note, or enter edit mode for note/code)
+        const editBtn = element.querySelector('.js-btn-edit');
+        if (editBtn) {
+            editBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                console.log(`[MindMapMenuManager] Edit button clicked for node ${nodeId}`);
+
+                const contentType = nodeEntry.model.contentType;
+
+                if (contentType === 'note' || contentType === 'code') {
+                    if (window.MindMapInteractions && window.MindMapInteractions.enterEditMode) {
+                        window.MindMapInteractions.enterEditMode(_module, nodeId);
+                    } else if (_module.dotNetHelper) {
+                        _module.dotNetHelper.invokeMethodAsync('EnterEditMode', nodeId);
+                    }
+                } else if (contentType === 'text') {
+                    hideMenu();
+                    if (_module.dotNetHelper) {
+                        _module.dotNetHelper.invokeMethodAsync('ConvertToNoteNode', nodeId);
+                    }
+                }
+            });
+        }
+
+        // Copy (text)
+        const copyBtn = element.querySelector('.js-btn-copy');
+        if (copyBtn) {
+            copyBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const isMemo = nodeEntry.model.contentType === 'memo';
+                const metadataText = isMemo
+                    ? [nodeEntry.model.prompt || '', nodeEntry.model.response || ''].filter(Boolean).join('\n\n')
+                    : (nodeEntry.model.response || '');
+                const text = metadataText;
+                navigator.clipboard.writeText(text).then(() => {
+                    showActionSuccessIcon(copyBtn);
+                });
+            });
+        }
+
+        const fitTextHeightBtn = element.querySelector('.js-btn-fit-text-height');
+        if (fitTextHeightBtn && isTextFitNode(nodeEntry.model)) {
+            fitTextHeightBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                fitTextHeightBtn.disabled = true;
+                try {
+                    await window.MindMapMultiSelect?.fitTextNodesToContentAndReflowY?.([nodeId]);
+                    const icon = fitTextHeightBtn.querySelector('i');
+                    if (icon) {
+                        const oldClass = icon.className;
+                        icon.className = 'fa-solid fa-check text-green-500';
+                        setTimeout(() => icon.className = oldClass, 1000);
+                    }
+                    requestAnimationFrame(() => update());
+                } finally {
+                    fitTextHeightBtn.disabled = false;
+                }
+            });
+        }
+
+        const colorBtn = element.querySelector('.js-btn-color');
+        const colorPopover = colorBtn?.querySelector('.menu-color-popover');
+        if (colorBtn && colorPopover) {
+            syncMemoColorPopover(colorPopover, getMemoColorKey(nodeEntry.model));
+
+            colorBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                colorPopover.classList.toggle('is-open');
+            });
+
+            colorPopover.querySelectorAll('.menu-color-swatch').forEach(button => {
+                button.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    const colorKey = button.dataset.colorKey || 'coral';
+                    const metadata = ensureMetadata(nodeEntry.model);
+                    metadata.memoColor = colorKey;
+                    metadata.memoColorIsCustom = 'true';
+                    nodeEntry.model.metadata = metadata;
+                    nodeEntry.model.Metadata = metadata;
+                    syncMemoColorPopover(colorPopover, colorKey);
+                    colorPopover.classList.remove('is-open');
+                    refreshMemoNode(nodeEntry);
+                    if (_module.dotNetHelper) {
+                        _module.dotNetHelper.invokeMethodAsync('UpdateNodeMetadata', nodeId, 'memoColor', colorKey);
+                    }
+                });
+            });
+        }
+
+        // Copy image
+        const copyImgBtn = element.querySelector('.js-btn-copy-image');
+        if (copyImgBtn) {
+            copyImgBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                const candidateSources = getImageClipboardSourceCandidates(nodeEntry.model);
+                if (candidateSources.length === 0) {
+                    showToast('No image to copy.', { kind: 'error' });
+                    return;
+                }
+
+                try {
+                    const { blob, src } = await fetchClipboardImageBlob(nodeEntry.model);
+                    const pngBlob = await convertBlobToPngForClipboard(blob);
+                    const copiedKind = await writeImageBlobToClipboard(pngBlob, src);
+
+                    if (copiedKind !== 'image') {
+                        showToast('Image clipboard is unavailable in this browser. Copied the image URL instead.');
+                        return;
+                    }
+
+                    console.log(`[MindMapMenuManager] Image copied to clipboard as PNG (${pngBlob.size} bytes) from ${src}`);
+                    showActionSuccessIcon(copyImgBtn);
+                } catch (err) {
+                    console.error('Image copy failed:', err);
+                    showToast('Failed to copy image to the clipboard.', { kind: 'error' });
+                }
+            });
+        }
+
+        // Delete
+        const delBtn = element.querySelector('.js-btn-delete');
+        if (delBtn) {
+            delBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const snapshot =
+                    window.MindMapNodes?.captureDeleteSnapshot?.(_module, nodeId) ||
+                    { nodeId: String(nodeId), currentContent: nodeEntry.model.response || '' };
+                hideMenu();
+                if (_module.dotNetHelper) {
+                    _module.dotNetHelper.invokeMethodAsync('DeleteSingleNodeSnapshotFromJs', snapshot);
+                }
+            });
+        }
+
+        // Settings
+        const settingBtn = element.querySelector('.js-btn-settings');
+        if (settingBtn) {
+            settingBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (_module.dotNetHelper) _module.dotNetHelper.invokeMethodAsync('OpenDirectorySettings', nodeId);
+            });
+        }
+
+        // Duplicate button (for single image)
+        const duplicateBtn = element.querySelector('.js-btn-duplicate');
+        if (duplicateBtn) {
+            duplicateBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (_module.dotNetHelper) {
+                    _module.dotNetHelper.invokeMethodAsync('DuplicateNodeFromJs', nodeId);
+                }
+                const i = duplicateBtn.querySelector('i');
+                if (i) {
+                    const oldClass = i.className;
+                    i.className = 'fa-solid fa-check text-green-500';
+                    setTimeout(() => i.className = oldClass, 1000);
+                }
+            });
+        }
+
+        const videoPlayBtn = element.querySelector('.js-btn-video-play');
+        if (videoPlayBtn) {
+            videoPlayBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                window.MindMapCss3DManager?.setVideoNodePlayback?.(nodeId, true);
+            });
+        }
+
+        const videoPauseBtn = element.querySelector('.js-btn-video-pause');
+        if (videoPauseBtn) {
+            videoPauseBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                window.MindMapCss3DManager?.setVideoNodePlayback?.(nodeId, false);
+            });
+        }
+
+        // ▼▼▼ [NEW] Word wrap toggle for code nodes ▼▼▼
+        const wrapBtn = element.querySelector('.js-btn-wordwrap');
+        if (wrapBtn) {
+            wrapBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const newWrapState = !nodeEntry.model.isWordWrap;
+                nodeEntry.model.isWordWrap = newWrapState;
+                console.log(`[MindMapMenuManager] Word wrap toggled for ${nodeId}: ${newWrapState}`);
+
+                const icon = wrapBtn.querySelector('i');
+                if (icon) {
+                    icon.className = newWrapState
+                        ? 'fa-solid fa-align-left'
+                        : 'fa-solid fa-arrows-left-right';
+                }
+                wrapBtn.classList.toggle('active-nowrap', !newWrapState);
+                wrapBtn.title = newWrapState ? 'Disable word wrap' : 'Enable word wrap';
+
+                if (_module.dotNetHelper) {
+                    _module.dotNetHelper.invokeMethodAsync('ToggleNodeWordWrap', nodeId);
+                }
+
+                if (window.MindMapNodes && window.MindMapNodes.updateNodeWordWrap) {
+                    window.MindMapNodes.updateNodeWordWrap(_module, nodeId, newWrapState);
+                }
+            });
+        }
+        // ▲▲▲ [NEW] ▲▲▲
+
+        const companyRunBtn = element.querySelector('.js-btn-company-run');
+        if (companyRunBtn) {
+            companyRunBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                if (!_module?.dotNetHelper || companyRunBtn.disabled) {
+                    return;
+                }
+
+                companyRunBtn.disabled = true;
+                applyOptimisticCompanyRunState(nodeEntry, nodeId, 'Auto', true);
+                syncCompanyNodeVisual(nodeEntry);
+                showMenu(nodeId);
+
+                try {
+                    const result = await _module.dotNetHelper.invokeMethodAsync('RunNodeAsCompanyFromJs', nodeId, 'Auto', true);
+                    applyCompanyRunResult(nodeEntry, result, 'Auto', true);
+                } catch (error) {
+                    console.error(`[MindMapMenuManager] RunNodeAsCompanyFromJs failed for node ${nodeId}`, error);
+                    applyCompanyRunResult(nodeEntry, { status: 'Failed', lastMessage: 'Company start failed from this note.' }, 'Auto', true);
+                } finally {
+                    syncCompanyNodeVisual(nodeEntry);
+                    showMenu(nodeId);
+                }
+            });
+        }
+
+        const companySyncGoalBtn = element.querySelector('.js-btn-company-sync-goal');
+        if (companySyncGoalBtn) {
+            companySyncGoalBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                if (!_module?.dotNetHelper || companySyncGoalBtn.disabled) {
+                    return;
+                }
+
+                companySyncGoalBtn.disabled = true;
+                applyCompanyBindingValues(nodeEntry.model, {
+                    'CompanyCore.LastMessage': 'Updating the existing company goal from this note...',
+                    'CompanyCore.Status': getCompanyStatus(nodeEntry.model) || 'Running'
+                });
+                syncCompanyNodeVisual(nodeEntry);
+                showMenu(nodeId);
+
+                try {
+                    const mode = getCompanyBindingValue(nodeEntry.model, 'CompanyCore.ExecutionMode') || 'Auto';
+                    const subAgentsEnabled = getCompanyBindingValue(nodeEntry.model, 'CompanyCore.SubAgentsEnabled') !== 'false';
+                    const result = await _module.dotNetHelper.invokeMethodAsync('SyncCompanyGoalFromJs', nodeId, mode, subAgentsEnabled);
+                    applyCompanyRunResult(nodeEntry, result, mode, subAgentsEnabled);
+                } catch (error) {
+                    console.error(`[MindMapMenuManager] SyncCompanyGoalFromJs failed for node ${nodeId}`, error);
+                    applyCompanyBindingValues(nodeEntry.model, {
+                        'CompanyCore.LastMessage': 'Updating the company goal failed.',
+                        'CompanyCore.Status': 'Failed'
+                    });
+                } finally {
+                    syncCompanyNodeVisual(nodeEntry);
+                    showMenu(nodeId);
+                }
+            });
+        }
+
+        const companyGraphBtn = element.querySelector('.js-btn-company-graph');
+        if (companyGraphBtn) {
+            companyGraphBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                await invokeMenuAction(companyGraphBtn, 'OpenCompanyGraphFromJs', nodeId);
+            });
+        }
+
+        const companyRefreshBtn = element.querySelector('.js-btn-company-refresh');
+        if (companyRefreshBtn) {
+            companyRefreshBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                await invokeMenuAction(companyRefreshBtn, 'RefreshCompanyBindingFromJs', nodeId);
+            });
+        }
+
+        const companyPauseBtn = element.querySelector('.js-btn-company-pause');
+        if (companyPauseBtn) {
+            companyPauseBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                await invokeMenuAction(companyPauseBtn, 'PauseCompanyFromJs', nodeId);
+            });
+        }
+
+        const companyResumeBtn = element.querySelector('.js-btn-company-resume');
+        if (companyResumeBtn) {
+            companyResumeBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                await invokeMenuAction(companyResumeBtn, 'ResumeCompanyFromJs', nodeId);
+            });
+        }
+
+        const companyArchiveBtn = element.querySelector('.js-btn-company-archive');
+        if (companyArchiveBtn) {
+            companyArchiveBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                await invokeMenuAction(companyArchiveBtn, 'ArchiveCompanyFromJs', nodeId);
+            });
+        }
+
+        const companyDetachBtn = element.querySelector('.js-btn-company-detach');
+        if (companyDetachBtn) {
+            companyDetachBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                await invokeMenuAction(companyDetachBtn, 'DetachCompanyFromJs', nodeId);
+            });
+        }
+
+        const companyRemoveBtn = element.querySelector('.js-btn-company-remove');
+        if (companyRemoveBtn) {
+            companyRemoveBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                if (!_module?.dotNetHelper || companyRemoveBtn.disabled) {
+                    return;
+                }
+
+                const shouldRemove = await showConfirmDialog({
+                    title: 'Remove company?',
+                    message: 'The company will be archived and detached from this node.',
+                    confirmText: 'Remove',
+                    cancelText: 'Cancel'
+                });
+                if (!shouldRemove) {
+                    return;
+                }
+
+                companyRemoveBtn.disabled = true;
+                try {
+                    await _module.dotNetHelper.invokeMethodAsync('RemoveCompanyFromJs', nodeId);
+                    clearCompanyBindingValues(nodeEntry);
+                } catch (error) {
+                    console.error(`[MindMapMenuManager] RemoveCompanyFromJs failed for node ${nodeId}`, error);
+                } finally {
+                    syncCompanyNodeVisual(nodeEntry);
+                    showMenu(nodeId);
+                }
+            });
+        }
+    }
+
+    window.MindMapMenuManager = { init, showMenu, hideMenu, update };
+
+    console.log('✅ mind-map-menu-manager.js loaded');
+})();