enha: debug tool in god-mode

static/app.js

@@ -25,7 +25,7 @@ import { buildTree, buildRealFilterTree, expandAll, collapseAll } from './tree-u
 import { 
     releaseAllLocks, startEditFolder, startEditLeaf, 
     cancelEditFolder, cancelEditLeaf, previewFolderCLI, previewLeafCLI, 
-    hideSideCLI, executeSideCLI 
+    hideSideCLI, executeSideCLI, previewNodeCLI  
 } from './edit-mode.js';
 
 // 6. MAC Domain 配置模組 (MAC Domain)
@@ -595,6 +595,11 @@ document.addEventListener('DOMContentLoaded', () => {
             const btn = document.getElementById(id);
             if (btn) btn.style.display = 'inline-block';
         });
+
+        // 🌟 新增：解鎖樹狀圖裡的所有 🔍 預覽按鈕
+        document.querySelectorAll('.debug-preview-btn').forEach(btn => {
+            btn.style.display = 'inline-block';
+        });
     }
 
     const urlParams = new URLSearchParams(window.location.search);
@@ -701,6 +706,7 @@ window.scanVisibleMissingOptions = scanVisibleMissingOptions;
 window.scanGlobalMissingOptions = scanGlobalMissingOptions;
 window.clearVisibleCache = clearVisibleCache;
 window.clearGlobalCache = clearGlobalCache;
+window.previewNodeCLI = previewNodeCLI;
 
 // --- 樹狀圖展開與編輯操作 ---
 window.expandAll = expandAll;

static/edit-mode.js

@@ -589,3 +589,85 @@ function transformNoToActive(elementId, newCommand) {
     if (actionBtns) actionBtns.style.display = 'none';
     if (editBtn) editBtn.style.display = 'none';
 }
+
+// ============================================================================
+// 💻 開發者工具：預覽節點完整指令 (唯讀 Debug 模式)
+// ============================================================================
+export function previewNodeCLI(btnElement, rootPath) {
+    // 1. 定位當前點擊的容器
+    let container = btnElement.closest('details');
+    if (!container) {
+        const leafNode = btnElement.closest('.tree-leaf-node');
+        if (leafNode) container = leafNode.querySelector('.leaf-container');
+    }
+    if (!container) return;
+
+    let cliOutput = `! =========================================\n`;
+    cliOutput += `! 🔍 [Debug] 節點預覽: ${rootPath}\n`;
+    cliOutput += `! =========================================\n`;
+    cliOutput += `${rootPath.replace(/::/g, ' ')}\n`;
+
+    // 2. 找出該節點下所有的葉節點 (包含自己)
+    const allLeaves = container.classList.contains('leaf-container') 
+        ? [container] 
+        : Array.from(container.querySelectorAll('.leaf-container'));
+    
+    if (allLeaves.length === 1 && allLeaves[0] === container) {
+        // 情況 A：它自己就是最底層的葉節點
+        const val = container.getAttribute('data-original');
+        if (val) cliOutput += ` ${val}\n`;
+    } else {
+        // 情況 B：它是一個資料夾，遞迴列出所有子項目的相對路徑與值
+        allLeaves.forEach(leaf => {
+            const leafPath = leaf.getAttribute('data-path');
+            const leafVal = leaf.getAttribute('data-original');
+            
+            if (leafPath && leafVal !== null) {
+                const relativePath = leafPath.replace(rootPath, '').replace(/^::/, '').replace(/::/g, ' ');
+                cliOutput += `  ${relativePath} ${leafVal}\n`;
+            }
+        });
+    }
+
+    cliOutput += `exit\n`;
+
+    // 3. 呼叫現有的樹狀圖側邊欄 (Side Pane) 顯示
+    const leftPane = document.getElementById('tree-container');
+    const resizer = document.getElementById('drag-resizer');
+    const rightPane = document.getElementById('side-cli-preview');
+    
+    if (!rightPane) {
+        console.error("找不到側邊欄元素 'side-cli-preview'");
+        return;
+    }
+
+    // 設定標題與樣式
+    document.getElementById('side-pane-title').innerHTML = '🔍 節點指令預覽 (唯讀)';
+    document.getElementById('side-pane-title').style.color = '#3498db';
+    
+    // 隱藏「確認寫入」按鈕，只顯示「取消/關閉」按鈕
+    document.getElementById('btn-side-confirm').style.display = 'none';
+    document.getElementById('btn-side-cancel').style.display = 'inline-block';
+    document.getElementById('btn-side-close').style.display = 'none';
+    
+    // 顯示 Textarea 並填入內容
+    const textarea = document.getElementById('side-cli-textarea');
+    textarea.style.display = 'block';
+    textarea.value = cliOutput;
+    textarea.style.backgroundColor = '#1e1e1e'; // 終端機深色背景
+    textarea.style.color = '#d4d4d4';
+    
+    document.getElementById('side-execution-result').style.display = 'none';
+    
+    // 展開側邊欄
+    leftPane.style.width = 'calc(50% - 11px)';
+    rightPane.style.width = 'calc(50% - 11px)';
+    if (resizer) resizer.style.display = 'flex';
+    rightPane.style.display = 'block';
+    
+    // 初始化拖拉分隔線 (如果尚未初始化)
+    if (!window.isResizerInitialized && typeof initResizer === 'function') {
+        initResizer();
+        window.isResizerInitialized = true;
+    }
+}

static/tree-ui.js

@@ -81,6 +81,14 @@ export function buildTree(node, path = '', isParentCommandGroup = false) {
                         ${expandCollapseBtns}
                         
                         <div style="margin-left: auto; display: flex; align-items: center;">
+                            <span class="debug-preview-btn admin-only" 
+                                  onclick="event.stopPropagation(); event.preventDefault(); previewNodeCLI(this, '${currentPath}')" 
+                                  style="display: none; cursor: pointer; margin-right: 8px; font-size: 14px; transition: transform 0.2s;" 
+                                  title="[開發者] 預覽此節點下所有指令"
+                                  onmouseover="this.style.transform='scale(1.2)'" 
+                                  onmouseout="this.style.transform='scale(1)'">
+                                  🔍
+                            </span>
                             <span id="edit-btn-${elementId}" onclick="event.stopPropagation(); event.preventDefault(); startEditFolder('${currentPath}', '${elementId}')" 
                                   style="cursor: pointer; font-size: 14px; opacity: 0.3; transition: opacity 0.2s;" 
                                   onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.3" title="鎖定並編輯此群組">
@@ -151,6 +159,14 @@ export function buildTree(node, path = '', isParentCommandGroup = false) {
                     ${displayContent}
                     
                     <div style="margin-left: auto; display: flex; align-items: center;">
+                        <span class="debug-preview-btn admin-only" 
+                              onclick="event.stopPropagation(); event.preventDefault(); previewNodeCLI(this, '${currentPath}')" 
+                              style="display: none; cursor: pointer; margin-right: 8px; font-size: 14px; transition: transform 0.2s;" 
+                              title="[開發者] 預覽此節點下所有指令"
+                              onmouseover="this.style.transform='scale(1.2)'" 
+                              onmouseout="this.style.transform='scale(1)'">
+                              🔍
+                        </span>
                         <span id="edit-btn-${elementId}" onclick="event.stopPropagation(); event.preventDefault(); startEditLeaf('${currentPath}', '${elementId}')" 
                               style="cursor: pointer; font-size: 14px; opacity: 0.3; transition: opacity 0.2s;" 
                               onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.3" title="鎖定並編輯此項目">