@mindexec/cli 0.2.0

package/wwwroot/_content/MindExecution.Shared/js/plan-master.js

@@ -0,0 +1,788 @@
+// File: X:\Dev@Work\MindExecution\wwwroot\js\plan-master.js
+// PlanAgent 3D graph agent surface (copied from code-master.js)
+(function () {
+    // Module instance storage
+    let moduleInstance = null;
+    let pendingSettings = null;
+
+    // PlanMaster module class (kept for backward compatibility)
+    class PlanMasterModule {
+        constructor() {
+            // --- 3D rendering state ---
+            this.scene = null;
+            this.camera = null;
+            this.renderer = null;
+            this.cssRenderer = null;
+
+            // --- Blazor and DOM references ---
+            this.dotNetHelper = null;
+            this.container = null;
+
+            // --- Animation state ---
+            this.animationFrameId = null;
+
+            // --- Node management ---
+            this.nodeContentTargets = {};
+            this.nodeElements = {};
+            this.nodeObjectsById = new Map();
+
+            // --- Interaction state ---
+            this.isPanning = false;
+            this.lastMousePos = { x: 0, y: 0 };
+            this.targetZ = null;
+            this.targetX = null;
+            this.targetY = null;
+            this.isDraggingNode = false;
+            this.draggedNodeObject = null;
+
+            // --- Optimization state ---
+            this.isOptimizationActive = false;
+
+            // --- Text update state ---
+            this.latestMarkdownById = new Map();
+            this.pendingTextUpdates = new Map();
+            this.isTextUpdateScheduled = false;
+            this.throttledParseFlags = new Map();
+
+            // --- Theme management ---
+            this.currentThemeName = null;
+            this.currentThemeObject = null;
+
+            // --- Grid snapping ---
+            this.GRID_SIZE = 5;
+
+            // --- Bound event handlers ---
+            this.boundOnMouseDown = this.onMouseDown.bind(this);
+            this.boundOnMouseMove = this.onMouseMove.bind(this);
+            this.boundOnMouseUp = this.onMouseUp.bind(this);
+            this.boundOnContainerClick = this.onContainerClick.bind(this);
+            this.boundOnKeyDown = this.onKeyDown.bind(this);
+            this.boundOnContextMenu = this.onContextMenu.bind(this);
+            this.boundOnWheel = this.onWheel.bind(this);
+            this.boundOnResize = this.onResize.bind(this);
+        }
+
+        // Grid snapping utils
+        snapToGrid(value) {
+            return Math.floor(value / this.GRID_SIZE) * this.GRID_SIZE;
+        }
+        snapToGridY(value) {
+            return Math.ceil(value / this.GRID_SIZE) * this.GRID_SIZE;
+        }
+
+        // Enable optimization
+        activateOptimization() {
+            if (!this.isOptimizationActive) {
+                this.isOptimizationActive = true;
+                try {
+                    this.container.querySelectorAll('.map-node-bubble').forEach(n => n.classList.add('optimizing-transform'));
+                } catch { }
+            }
+        }
+
+        // Disable optimization
+        deactivateOptimization() {
+            if (this.isOptimizationActive) {
+                this.isOptimizationActive = false;
+                try {
+                    this.container.querySelectorAll('.map-node-bubble').forEach(n => n.classList.remove('optimizing-transform'));
+                } catch { }
+            }
+        }
+
+        // Ensure THREE and CSS3D are loaded
+        ensureThree() {
+            const hasThree = typeof globalThis.THREE !== 'undefined';
+            const hasCSS3D = typeof globalThis.CSS3DRenderer !== 'undefined';
+            if (!hasThree) {
+                console.error('[plan-master.js] THREE not loaded');
+                return false;
+            }
+            if (!hasCSS3D) {
+                console.error('[plan-master.js] CSS3DRenderer not loaded');
+                return false;
+            }
+            return true;
+        }
+
+        resolveThemeNameFromGridType(gridType) {
+            const map = {
+                space3d: 'Space3D',
+                spirit: 'SpiritFlow',
+                default: 'XYGrid',
+                dot: 'SpatialGrid2D'
+            };
+            const key = String(gridType || 'dot').toLowerCase();
+            return map[key] || 'SpatialGrid2D';
+        }
+
+        resolveThemeFromGeneralSettings() {
+            try {
+                const raw = localStorage.getItem('GeneralSettings');
+                if (!raw) {
+                    return 'SpatialGrid2D';
+                }
+
+                const settings = JSON.parse(raw);
+                return this.resolveThemeNameFromGridType(settings?.gridType);
+            } catch {
+                return 'SpatialGrid2D';
+            }
+        }
+
+        applySettings(settings) {
+            if (!settings || typeof settings !== 'object') {
+                this.setBackgroundTheme(this.resolveThemeFromGeneralSettings());
+                return;
+            }
+
+            if (settings.gridType) {
+                this.setBackgroundTheme(this.resolveThemeNameFromGridType(settings.gridType));
+            } else {
+                this.setBackgroundTheme(this.resolveThemeFromGeneralSettings());
+            }
+        }
+
+        // --- Event handlers ---
+
+        onMouseDown(e) {
+            if (e.button === 1 || e.button === 2 || (e.button === 0 && e.ctrlKey)) {
+                this.isPanning = true;
+                this.lastMousePos = { x: e.clientX, y: e.clientY };
+                this.container.style.cursor = 'grabbing';
+                e.preventDefault();
+                this.activateOptimization();
+                window.addEventListener('mousemove', this.boundOnMouseMove);
+                window.addEventListener('mouseup', this.boundOnMouseUp);
+            }
+        }
+
+        onMouseMove(e) {
+            if (this.isDraggingNode && this.draggedNodeObject) {
+                const dx = e.clientX - this.lastMousePos.x;
+                const dy = e.clientY - this.lastMousePos.y;
+                this.lastMousePos = { x: e.clientX, y: e.clientY };
+                const moveFactor = this.camera.position.z / 1200;
+                this.draggedNodeObject.position.x += dx * moveFactor;
+                this.draggedNodeObject.position.y -= dy * moveFactor;
+                return;
+            }
+            if (!this.isPanning) return;
+            const dx2 = e.clientX - this.lastMousePos.x;
+            const dy2 = e.clientY - this.lastMousePos.y;
+            this.lastMousePos = { x: e.clientX, y: e.clientY };
+            const panFactor = 0.002 * this.camera.position.z;
+            this.targetX -= dx2 * panFactor;
+            this.targetY += dy2 * panFactor;
+        }
+
+        onMouseUp(e) {
+            if (this.isDraggingNode && this.draggedNodeObject) {
+                // Apply grid snapping after drag ends
+                this.draggedNodeObject.position.x = this.snapToGrid(this.draggedNodeObject.position.x);
+                this.draggedNodeObject.position.y = this.snapToGridY(this.draggedNodeObject.position.y);
+
+                const finalNodeId = this.draggedNodeObject.element?.dataset?.nodeId;
+                const finalPosition = this.draggedNodeObject.position;
+                if (finalNodeId && this.dotNetHelper) {
+                    this.dotNetHelper.invokeMethodAsync('UpdateNodePosition', finalNodeId, finalPosition.x, finalPosition.y);
+                }
+                this.isDraggingNode = false;
+                this.draggedNodeObject = null;
+                window.removeEventListener('mousemove', this.boundOnMouseMove);
+                window.removeEventListener('mouseup', this.boundOnMouseUp);
+            }
+            if (this.isPanning) {
+                this.isPanning = false;
+                this.container.style.cursor = 'default';
+                // Align camera position to grid after panning ends
+                this.targetX = this.snapToGrid(this.camera.position.x);
+                this.targetY = this.snapToGridY(this.camera.position.y);
+                window.removeEventListener('mousemove', this.boundOnMouseMove);
+                window.removeEventListener('mouseup', this.boundOnMouseUp);
+            }
+        }
+
+        onContainerClick(e) {
+            if (e.button === 0) {
+                if (!this.isPanning && !this.isDraggingNode) {
+                    if (this.dotNetHelper) {
+                        this.dotNetHelper.invokeMethodAsync('SelectNodeInBlazor', null);
+                    }
+
+                    // [Modified] Use blurElement helper to clear focus from text inputs
+                    if (document.activeElement && (document.activeElement.tagName === 'TEXTAREA' || document.activeElement.tagName === 'INPUT')) {
+                        // document.activeElement.blur(); // (old)
+                        window.blurElement(document.activeElement); // (new)
+                    }
+                }
+            }
+        }
+
+        onKeyDown(e) {
+            if (!this.dotNetHelper) return;
+            // Enter: move focus to the global textarea
+            if (e.key === 'Enter') {
+                const t = e.target;
+                const isInputFocused = t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT' || t.isContentEditable);
+                if (!isInputFocused) {
+                    const textarea = document.getElementById('global-input-textarea');
+                    if (textarea) {
+                        textarea.focus();
+                        e.preventDefault();
+                        return;
+                    }
+                }
+                if (t && t.id === 'global-input-textarea' && !e.shiftKey) {
+                    return;
+                }
+            }
+            const target = e.target;
+            if (target) {
+                const tagName = target.tagName;
+                if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT' || target.isContentEditable) {
+                    return;
+                }
+            }
+            const panFactor = 0.002 * this.camera.position.z;
+            const moveAmount = 80 * panFactor;
+            let handled = false;
+            switch (e.key) {
+                case 'ArrowUp':
+                    this.camera.position.y += moveAmount;
+                    this.targetY += moveAmount;
+                    handled = true;
+                    break;
+                case 'ArrowDown':
+                    this.camera.position.y -= moveAmount;
+                    this.targetY -= moveAmount;
+                    handled = true;
+                    break;
+                case 'ArrowLeft':
+                    this.camera.position.x -= moveAmount;
+                    this.targetX -= moveAmount;
+                    handled = true;
+                    break;
+                case 'ArrowRight':
+                    this.camera.position.x += moveAmount;
+                    this.targetX += moveAmount;
+                    handled = true;
+                    break;
+                case 'Delete':
+                    if (this.dotNetHelper) {
+                        this.dotNetHelper.invokeMethodAsync('DeleteSelectedNodeFromJs');
+                    }
+                    handled = true;
+                    break;
+            }
+            if (handled) {
+                e.preventDefault();
+                this.activateOptimization();
+            }
+        }
+
+        onContextMenu(e) {
+            e.preventDefault();
+        }
+
+        onWheel(e) {
+            e.preventDefault();
+            this.activateOptimization();
+            const mouse = {
+                x: (e.clientX / this.container.clientWidth) * 2 - 1,
+                y: -(e.clientY / this.container.clientHeight) * 2 + 1
+            };
+            const vfov = (this.camera.fov * Math.PI) / 180;
+            const viewHeight = 2 * Math.tan(vfov / 2) * this.camera.position.z;
+            const viewWidth = viewHeight * this.camera.aspect;
+            const worldMouseX = this.camera.position.x + (mouse.x * viewWidth) / 2;
+            const worldMouseY = this.camera.position.y + (mouse.y * viewHeight) / 2;
+            const prevZ = this.camera.position.z;
+            const zoomSensitivity = 0.003;
+            const zoomAmount = e.deltaY * (this.camera.position.z * zoomSensitivity);
+            let newZ = this.camera.position.z + zoomAmount;
+            newZ = Math.max(200, Math.min(newZ, 6000));
+            const zoomRatio = newZ / prevZ;
+            this.camera.position.z = newZ;
+            this.targetZ = newZ;
+            const newX = worldMouseX - (worldMouseX - this.camera.position.x) * zoomRatio;
+            const newY = worldMouseY - (worldMouseY - this.camera.position.y) * zoomRatio;
+            this.camera.position.x = newX;
+            this.camera.position.y = newY;
+            this.targetX = newX;
+            this.targetY = newY;
+        }
+
+        onResize(e) {
+            if (!this.container || !this.renderer || !this.camera) return;
+            const width = this.container.clientWidth;
+            const height = this.container.clientHeight;
+            this.camera.aspect = width / height;
+            this.camera.updateProjectionMatrix();
+            this.renderer.setSize(width, height);
+            this.cssRenderer.setSize(width, height);
+        }
+
+        // --- Animation loop ---
+        animate() {
+            this.animationFrameId = requestAnimationFrame(() => this.animate());
+            const smoothingFactor = 0.25;
+            const dx = this.targetX - this.camera.position.x;
+            const dy = this.targetY - this.camera.position.y;
+            const dz = this.targetZ - this.camera.position.z;
+            const isCameraMoving = Math.abs(dx) > 0.01 || Math.abs(dy) > 0.01 || Math.abs(dz) > 0.01;
+            this.camera.position.x += dx * smoothingFactor;
+            this.camera.position.y += dy * smoothingFactor;
+            this.camera.position.z += dz * smoothingFactor;
+            if (this.isOptimizationActive && Math.abs(dx) < 0.1 && Math.abs(dy) < 0.1 && Math.abs(dz) < 0.1) {
+                this.deactivateOptimization();
+            }
+            if (this.currentThemeObject && typeof this.currentThemeObject.animate === 'function') {
+                const themeRunner = window.MindMapThemes?.runAnimationIfNeeded;
+                if (typeof themeRunner === 'function') {
+                    themeRunner(this.currentThemeName, this.currentThemeObject, this.camera, {
+                        isCameraMoving
+                    });
+                } else {
+                    this.currentThemeObject.animate(this.camera);
+                }
+            }
+            this.renderer.render(this.scene, this.camera);
+            this.cssRenderer.render(this.scene, this.camera);
+        }
+
+        // --- Text update processing ---
+        processPendingTextUpdates() {
+            this.isTextUpdateScheduled = false;
+            if (this.pendingTextUpdates.size === 0) return;
+            this.pendingTextUpdates.forEach((content, nodeId) => {
+                const elements = this.nodeElements[nodeId];
+                const contentEl = elements?.content || this.nodeContentTargets[nodeId];
+                if (!contentEl) return;
+                if (elements?.loading && elements.loading.style.display !== 'none') {
+                    elements.loading.style.display = 'none';
+                }
+                try {
+                    if (typeof marked !== 'undefined' && typeof marked.parse === 'function') {
+                        contentEl.innerHTML = marked.parse(content || '');
+                    } else {
+                        contentEl.textContent = content || '';
+                    }
+                } catch (e) {
+                    console.error('[plan-master.js] Markdown parsing error:', e);
+                    contentEl.textContent = content || '';
+                }
+            });
+            this.pendingTextUpdates.clear();
+        }
+
+        // --- Initialization ---
+        init(containerId, helper) {
+            // Re-activation logic
+            if (this.container) {
+                const target = document.getElementById(containerId);
+                if (target && this.renderer && this.cssRenderer) {
+                    // Remove canvases from previous parent
+                    try {
+                        if (this.renderer.domElement.parentElement) {
+                            this.renderer.domElement.parentElement.removeChild(this.renderer.domElement);
+                        }
+                        if (this.cssRenderer.domElement.parentElement) {
+                            this.cssRenderer.domElement.parentElement.removeChild(this.cssRenderer.domElement);
+                        }
+                    } catch { }
+
+                    // Attach canvases to the new container
+                    target.appendChild(this.renderer.domElement);
+                    target.appendChild(this.cssRenderer.domElement);
+
+                    // Update references
+                    this.container = target;
+                    this.dotNetHelper = helper;
+                    target.style.display = 'block';
+                    // Trigger resize handler
+                    this.onResize();
+                    // Restart animation loop if it was stopped
+                    if (!this.animationFrameId) {
+                        this.animate();
+                    }
+                    if (pendingSettings) {
+                        this.applySettings(pendingSettings);
+                    } else {
+                        this.applySettings({});
+                    }
+                    console.log(`[plan-master.js] Re-activated and animation loop resumed for container #${containerId}.`);
+                    return;
+                }
+            }
+
+            // First-time init
+            if (!this.ensureThree() || !window.MindMapThemes) {
+                console.error('[plan-master.js] init failed: THREE, CSS3DRenderer, or MindMapThemes not loaded.');
+                return;
+            }
+
+            this.dotNetHelper = helper;
+            this.container = document.getElementById(containerId);
+            if (!this.container) {
+                console.error('[plan-master.js] Container not found!');
+                return;
+            }
+
+            this.container.style.display = 'block';
+
+            const THREE = globalThis.THREE;
+            this.scene = new THREE.Scene();
+
+            // Camera setup
+            const NEAR = 0.1;
+            const FAR = 1e7;
+            this.camera = new THREE.PerspectiveCamera(50, this.container.clientWidth / this.container.clientHeight, NEAR, FAR);
+            const initialZ = 1200;
+            this.camera.position.z = initialZ;
+            this.targetZ = initialZ;
+            this.targetX = this.camera.position.x;
+            this.targetY = this.camera.position.y;
+
+            // WebGL renderer setup
+            this.renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true });
+            this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+            this.renderer.setPixelRatio(window.devicePixelRatio || 1);
+            this.renderer.domElement.style.position = 'absolute';
+            this.renderer.domElement.style.top = 0;
+            this.renderer.domElement.style.left = 0;
+            this.renderer.domElement.style.zIndex = 0;
+            this.container.appendChild(this.renderer.domElement);
+
+            // CSS3D renderer setup
+            const CSS3DRendererCtor = globalThis.CSS3DRenderer;
+            this.cssRenderer = new CSS3DRendererCtor();
+            this.cssRenderer.setSize(this.container.clientWidth, this.container.clientHeight);
+            this.cssRenderer.domElement.style.position = 'absolute';
+            this.cssRenderer.domElement.style.top = 0;
+            this.cssRenderer.domElement.style.left = 0;
+            this.cssRenderer.domElement.style.zIndex = 1;
+            this.container.appendChild(this.cssRenderer.domElement);
+
+            // Background theme (sync with MindCanvas GeneralSettings)
+            if (pendingSettings) {
+                this.applySettings(pendingSettings);
+            } else {
+                this.applySettings({});
+            }
+
+            // Register event listeners
+            this.cssRenderer.domElement.addEventListener('mousedown', this.boundOnMouseDown);
+            this.cssRenderer.domElement.addEventListener('click', this.boundOnContainerClick);
+            this.cssRenderer.domElement.addEventListener('wheel', this.boundOnWheel, { passive: false });
+            this.cssRenderer.domElement.addEventListener('contextmenu', this.boundOnContextMenu);
+            window.addEventListener('resize', this.boundOnResize);
+            window.addEventListener('keydown', this.boundOnKeyDown);
+
+            // Start animation
+            this.animate();
+
+            console.log(`[plan-master.js] Initialized for container #${containerId}.`);
+        }
+
+        // --- Background theme ---
+        setBackgroundTheme(themeName) {
+            if (themeName === this.currentThemeName || !this.scene || !window.MindMapThemes) return;
+            const newTheme = window.MindMapThemes.getTheme(themeName);
+            if (!newTheme) {
+                console.warn(`[plan-master.js] Background theme '${themeName}' not found.`);
+                return;
+            }
+
+            // Dispose previous theme
+            if (this.currentThemeObject) {
+                const oldTheme = window.MindMapThemes.getTheme(this.currentThemeName);
+                try { oldTheme?.dispose(this.currentThemeObject); } catch { }
+                if (this.scene) this.scene.remove(this.currentThemeObject);
+            }
+
+            // Create and attach new theme
+            this.currentThemeObject = newTheme.create(this.scene, this.renderer);
+            if (this.currentThemeObject) this.scene.add(this.currentThemeObject);
+            this.currentThemeName = themeName;
+            console.log(`[plan-master.js] Background theme set to: ${themeName}`);
+        }
+
+        // --- Add node ---
+        addNode(nodeModel) {
+            if (this.nodeObjectsById.has(nodeModel.id)) {
+                return;
+            }
+
+            console.log(`[plan-master.js] addNode called for ID: ${nodeModel.id}`);
+            const el = document.getElementById(`node-${nodeModel.id}`);
+            if (!el) {
+                console.warn(`[plan-master.js] Element 'node-${nodeModel.id}' not found in DOM.`);
+                return;
+            }
+
+            const nodeContent = el.firstElementChild || el;
+            const nodeClone = nodeContent.cloneNode(true);
+            nodeClone.dataset.nodeId = nodeModel.id;
+            nodeClone.style.cursor = 'pointer';
+            nodeClone.style.transformOrigin = '0% 0%';
+
+            // [Fix] Ensure the DOM element size matches the logical node size
+            // This prevents mismatch between the visual area and the draggable area
+            if (nodeModel.width && nodeModel.width > 0) {
+                nodeClone.style.width = nodeModel.width + 'px';
+            }
+            // For text/markdown nodes, height is dynamic based on content.
+            // For fixed-height types (note, pdf, image), enforce the height.
+            if (nodeModel.contentType === 'text') {
+                nodeClone.style.height = 'auto';
+            } else if (nodeModel.height && nodeModel.height > 0) {
+                nodeClone.style.height = nodeModel.height + 'px';
+            }
+
+            const contentTarget = nodeClone.querySelector(`#node-response-${nodeModel.id}`);
+            if (contentTarget) {
+                this.nodeContentTargets[nodeModel.id] = contentTarget;
+            } else {
+                console.error(`[plan-master.js] Could not find content target for node ${nodeModel.id}.`);
+            }
+
+            const loadingTarget = nodeClone.querySelector(`#node-loading-${nodeModel.id}`);
+            const bubbleTarget = nodeClone.querySelector('.map-node-bubble');
+            this.nodeElements[nodeModel.id] = {
+                content: contentTarget || null,
+                loading: loadingTarget || null,
+                bubble: bubbleTarget || nodeClone
+            };
+
+            let clickStartTime = 0;
+            nodeClone.addEventListener('mousedown', (e) => {
+                if (e.button === 0) {
+                    e.stopPropagation();
+                    this.isDraggingNode = true;
+                    this.draggedNodeObject = obj;
+                    this.lastMousePos = { x: e.clientX, y: e.clientY };
+                    clickStartTime = Date.now();
+                    window.addEventListener('mousemove', this.boundOnMouseMove);
+                    window.addEventListener('mouseup', this.boundOnMouseUp);
+                }
+            });
+
+            nodeClone.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (Date.now() - clickStartTime < 200) {
+                    const nid = e.currentTarget.dataset.nodeId;
+                    if (nid && this.dotNetHelper) {
+                        this.dotNetHelper.invokeMethodAsync('SelectNodeInBlazor', nid);
+                    }
+                }
+            });
+
+            const CSS3DObjectCtor = globalThis.CSS3DObject || (globalThis.THREE && globalThis.THREE.CSS3DObject);
+            const obj = new CSS3DObjectCtor(nodeClone);
+            obj.position.set(nodeModel.positionX || 0, nodeModel.positionY || 0, 1);
+            this.scene.add(obj);
+            this.nodeObjectsById.set(nodeModel.id, obj);
+            console.log(`[plan-master.js] Node ${nodeModel.id} added to Three.js scene.`);
+        }
+
+        // --- Remove node ---
+        removeNode(nodeId) {
+            const obj = this.nodeObjectsById.get(nodeId);
+            if (obj) {
+                if (this.scene) this.scene.remove(obj);
+                this.nodeObjectsById.delete(nodeId);
+                delete this.nodeElements[nodeId];
+                delete this.nodeContentTargets[nodeId];
+                this.latestMarkdownById.delete(nodeId);
+                this.throttledParseFlags.delete(nodeId);
+                this.pendingTextUpdates.delete(nodeId);
+                console.log(`[plan-master.js] Node ${nodeId} removed from scene.`);
+            }
+        }
+
+        // --- Update node content ---
+        updateNodeContent(nodeId, markdownContent) {
+            const id = String(nodeId);
+            this.latestMarkdownById.set(id, markdownContent || '');
+            this.pendingTextUpdates.set(id, markdownContent || '');
+            if (!this.isTextUpdateScheduled) {
+                this.isTextUpdateScheduled = true;
+                requestAnimationFrame(() => {
+                    this.processPendingTextUpdates();
+                    this.isTextUpdateScheduled = false;
+                });
+            }
+        }
+
+        // --- Update node selection ---
+        updateNodeSelection(oldNodeId, newNodeId) {
+            if (oldNodeId) {
+                const oldElements = this.nodeElements[oldNodeId];
+                if (oldElements && oldElements.bubble) {
+                    oldElements.bubble.classList.remove('selected');
+                }
+            }
+            if (newNodeId) {
+                const newElements = this.nodeElements[newNodeId];
+                if (newElements && newElements.bubble) {
+                    newElements.bubble.classList.add('selected');
+                }
+            }
+        }
+
+        // --- Hide (tab switch) ---
+        hide() {
+            if (this.container) {
+                this.container.style.display = 'none';
+                // Stop animation loop
+                if (this.animationFrameId) {
+                    cancelAnimationFrame(this.animationFrameId);
+                    this.animationFrameId = null;
+                }
+                console.log('[plan-master.js] Hidden and animation loop paused.');
+            }
+        }
+
+        // --- Cleanup and dispose ---
+        cleanupAndDispose() {
+            if (!this.container) return;
+
+            // Stop animation loop
+            if (this.animationFrameId) {
+                cancelAnimationFrame(this.animationFrameId);
+                this.animationFrameId = null;
+            }
+
+            // Remove event listeners
+            if (this.cssRenderer && this.cssRenderer.domElement) {
+                this.cssRenderer.domElement.removeEventListener('mousedown', this.boundOnMouseDown);
+                this.cssRenderer.domElement.removeEventListener('click', this.boundOnContainerClick);
+                this.cssRenderer.domElement.removeEventListener('wheel', this.boundOnWheel);
+                this.cssRenderer.domElement.removeEventListener('contextmenu', this.boundOnContextMenu);
+            }
+            window.removeEventListener('mousemove', this.boundOnMouseMove);
+            window.removeEventListener('mouseup', this.boundOnMouseUp);
+            window.removeEventListener('resize', this.boundOnResize);
+            window.removeEventListener('keydown', this.boundOnKeyDown);
+
+            // Theme cleanup
+            if (this.currentThemeObject && window.MindMapThemes) {
+                const theme = window.MindMapThemes.getTheme(this.currentThemeName);
+                try { theme?.dispose(this.currentThemeObject); } catch { }
+                if (this.scene) this.scene.remove(this.currentThemeObject);
+            }
+            this.currentThemeObject = null;
+            this.currentThemeName = null;
+
+            // Reset state
+            try { this.pendingTextUpdates.clear(); } catch { }
+            try { this.throttledParseFlags.clear(); } catch { }
+            try { this.latestMarkdownById.clear(); } catch { }
+            this.nodeContentTargets = {};
+            this.nodeElements = {};
+            try { this.nodeObjectsById.clear(); } catch { }
+
+            // Dispose scene/renderer resources
+            if (this.scene) {
+                this.scene.traverse(object => {
+                    if (object.geometry) object.geometry.dispose();
+                    if (object.material) {
+                        if (Array.isArray(object.material)) {
+                            object.material.forEach(material => material.dispose());
+                        } else {
+                            object.material.dispose();
+                        }
+                    }
+                });
+            }
+            if (this.renderer) this.renderer.dispose();
+            if (this.cssRenderer && this.cssRenderer.domElement && this.cssRenderer.domElement.parentElement) {
+                this.cssRenderer.domElement.parentElement.removeChild(this.cssRenderer.domElement);
+            }
+
+            // Clear references
+            this.scene = null;
+            this.camera = null;
+            this.renderer = null;
+            this.cssRenderer = null;
+            this.container = null;
+            this.dotNetHelper = null;
+
+            console.log('[plan-master.js] Disposed all resources.');
+        }
+    }
+
+    // --- Public window.planMaster interface ---
+    window.planMaster = {
+        init: function (containerId, helper) {
+            if (!moduleInstance) {
+                moduleInstance = new PlanMasterModule();
+            }
+            moduleInstance.init(containerId, helper);
+        },
+        addNode: function (nodeModel) {
+            if (moduleInstance) moduleInstance.addNode(nodeModel);
+        },
+        removeNode: function (nodeId) {
+            if (moduleInstance) moduleInstance.removeNode(nodeId);
+        },
+        updateNodeContent: function (nodeId, markdownContent) {
+            if (moduleInstance) moduleInstance.updateNodeContent(nodeId, markdownContent);
+        },
+        updateNodeSelection: function (oldNodeId, newNodeId) {
+            if (moduleInstance) moduleInstance.updateNodeSelection(oldNodeId, newNodeId);
+        },
+        applySettings: function (settings) {
+            pendingSettings = Object.assign({}, pendingSettings || {}, settings || {});
+            if (moduleInstance) {
+                moduleInstance.applySettings(pendingSettings);
+            }
+        },
+        setBackgroundTheme: function (themeName) {
+            if (moduleInstance) moduleInstance.setBackgroundTheme(themeName);
+        },
+        hide: function () {
+            if (moduleInstance) moduleInstance.hide();
+        },
+        clearAllNodes: function () {
+            if (moduleInstance && moduleInstance.nodeObjectsById) {
+                // Remove all nodes from scene
+                moduleInstance.nodeObjectsById.forEach((obj, nodeId) => {
+                    if (moduleInstance.scene) {
+                        moduleInstance.scene.remove(obj);
+                    }
+                    // Cleanup textures if any
+                    if (obj.material) {
+                        if (obj.material.map) obj.material.map.dispose();
+                        obj.material.dispose();
+                    }
+                    if (obj.geometry) obj.geometry.dispose();
+                });
+                moduleInstance.nodeObjectsById.clear();
+
+                // Clear related caches
+                if (moduleInstance.nodeElements) moduleInstance.nodeElements = {};
+                if (moduleInstance.nodeContentTargets) moduleInstance.nodeContentTargets = {};
+                if (moduleInstance.latestMarkdownById) moduleInstance.latestMarkdownById.clear();
+                if (moduleInstance.throttledParseFlags) moduleInstance.throttledParseFlags.clear();
+                if (moduleInstance.pendingTextUpdates) moduleInstance.pendingTextUpdates.clear();
+
+                console.log('[planAgent] All nodes cleared');
+            }
+        },
+        cleanupAndDispose: function () {
+            if (moduleInstance) {
+                moduleInstance.cleanupAndDispose();
+                moduleInstance = null;
+            }
+            pendingSettings = null;
+        }
+    };
+
+    // Backward-compatible alias: PlanAgent is the new page/internal name.
+    window.planAgent = window.planMaster;
+
+    console.log('? plan-master.js loaded and ready (Copied from code-master.js).');
+})();
+