vg-coder-cli 2.0.20 → 2.0.23

package/src/server/views/js/features/structure.js

@@ -1,9 +1,13 @@
-import { getStructure, analyzeProject, copyToClipboard } from '../api.js';
+import { getStructure, analyzeProject, copyToClipboard, saveTreeState as apiSaveTreeState, loadTreeState as apiLoadTreeState } from '../api.js';
 import { showToast, showLoading, resetButton, showResponse, formatNumber, showCopiedState } from '../utils.js';
 
 // Global variable to store current structure data
 let currentStructureData = null;
 
+// Tree state management
+let excludedPaths = new Set(); // Paths that are unchecked
+let saveStateTimeout = null; // Debounce timer for auto-save
+
 /**
  * Handle Structure button click logic
  */
@@ -24,6 +28,9 @@ export async function handleStructureView(event) {
         const data = await getStructure(path);
         currentStructureData = data.structure;
 
+        // Load saved state before rendering
+        await loadTreeState();
+
         // Render Tree HTML using recursive function
         treeContent.innerHTML = generateTreeHtml(data.structure);
         
@@ -62,18 +69,35 @@ export function handleCheckboxChange(event) {
     event.stopPropagation();
     const checkbox = event.target;
     const isChecked = checkbox.checked;
+    const path = checkbox.dataset.path;
+    
+    // 1. Update excluded paths set
+    if (isChecked) {
+        excludedPaths.delete(path);
+    } else {
+        excludedPaths.add(path);
+    }
     
-    // 1. Sync Children: If this is a folder, update all children checkboxes
+    // 2. Sync Children: If this is a folder, update all children checkboxes
     const li = checkbox.closest('.tree-li');
     if (li) {
         const childrenCheckboxes = li.querySelectorAll('.tree-checkbox');
         childrenCheckboxes.forEach(child => {
             child.checked = isChecked;
+            const childPath = child.dataset.path;
+            if (isChecked) {
+                excludedPaths.delete(childPath);
+            } else {
+                excludedPaths.add(childPath);
+            }
         });
     }
 
-    // 2. Recalculate Tokens
+    // 3. Recalculate Tokens
     updateTotalTokens();
+    
+    // 4. Auto-save state (debounced)
+    debouncedSaveState();
 }
 
 /**
@@ -169,11 +193,35 @@ export async function handleCopySelected(event) {
 function generateTreeHtml(node) {
     if (!node) return '';
 
-    const isDir = node.type === 'directory';
-    const hasChildren = isDir && node.children && node.children.length > 0;
+    // --- COMPACT FOLDER LOGIC ---
+    let currentNode = node;
+    let displayName = node.name;
+    let isCompact = false;
+    
+    // Only compact if it's a directory
+    if (currentNode.type === 'directory') {
+        // While current node has EXACTLY one child and that child is a directory
+        while (
+            currentNode.children && 
+            currentNode.children.length === 1 && 
+            currentNode.children[0].type === 'directory'
+        ) {
+            const child = currentNode.children[0];
+            displayName += '/' + child.name;
+            currentNode = child; // Advance to child
+            isCompact = true;
+        }
+    }
+
+    // Now uses 'currentNode' for properties (it's the deepest folder in the chain)
+    // But we use 'displayName' for the UI
+    // 'tokens' should be from the root node of this chain (usually same as leaf for folders)
     
-    // Determine Token Color
-    const tokens = node.tokens || 0;
+    const isDir = currentNode.type === 'directory';
+    const hasChildren = isDir && currentNode.children && currentNode.children.length > 0;
+    
+    // Determine Token Color (Use original node's tokens or deep node's tokens - they should be identical)
+    const tokens = currentNode.tokens || 0;
     let tokenClass = 'token-low';
     if (tokens > 5000) tokenClass = 'token-high';
     else if (tokens > 2000) tokenClass = 'token-med';
@@ -184,7 +232,6 @@ function generateTreeHtml(node) {
     const liClass = `tree-li ${hasChildren ? 'has-children' : ''}`;
     
     // Actions
-    // On click: Toggle if folder, Open Tab if file
     let clickAction = '';
     let cursorStyle = '';
 
@@ -196,34 +243,38 @@ function generateTreeHtml(node) {
     } else {
         // File click -> Open in Editor
         // Escape backslashes for Windows paths
-        const safePath = (node.relativePath || node.path).replace(/\\/g, '\\\\');
-        clickAction = `onclick="window.openFileTab('${safePath}', '${node.name}')"`;
+        const safePath = (currentNode.relativePath || currentNode.path).replace(/\\/g, '\\\\');
+        clickAction = `onclick="window.openFileTab('${safePath}', '${currentNode.name}')"`;
         cursorStyle = 'cursor: pointer; color: var(--text-primary);';
     }
     
     // Build HTML
     let html = `<li class="${liClass}">`;
     
+    // Check if this path should be excluded (unchecked)
+    const nodePath = currentNode.relativePath || currentNode.path;
+    const isExcluded = excludedPaths.has(nodePath);
+    
     html += `
         <div class="tree-item-row" ${isDir ? clickAction : ''}>
             <span class="arrow">${arrow}</span>
             <input type="checkbox" class="tree-checkbox" 
-                   data-path="${node.relativePath || node.path}" 
+                   data-path="${nodePath}" 
                    data-tokens="${tokens}"
-                   data-type="${node.type}"
-                   checked 
+                   data-type="${currentNode.type}"
+                   ${isExcluded ? '' : 'checked'} 
                    onclick="handleCheckboxChange(event)">
             <span class="tree-icon">${icon}</span>
-            <span class="tree-name" style="${cursorStyle}" ${!isDir ? clickAction : ''}>${node.name}</span>
+            <span class="tree-name" style="${cursorStyle}" ${!isDir ? clickAction : ''} title="${displayName}">${displayName}</span>
             <span class="token-badge ${tokenClass}">${formatNumber(tokens)}</span>
         </div>
     `;
 
-    // Children recursion
+    // Children recursion (using deepest node's children)
     if (hasChildren) {
         html += '<ul class="tree-ul">';
         // Sort: Folders first, then files
-        node.children.forEach(child => {
+        currentNode.children.forEach(child => {
             html += generateTreeHtml(child);
         });
         html += '</ul>';
@@ -233,3 +284,45 @@ function generateTreeHtml(node) {
     
     return isDir ? `<ul class="tree-ul">${html}</ul>` : html; 
 }
+
+/**
+ * Load tree state from backend
+ */
+async function loadTreeState() {
+    try {
+        const data = await apiLoadTreeState();
+        excludedPaths = new Set(data.excludedPaths || []);
+        console.log(`Loaded tree state: ${excludedPaths.size} excluded items`);
+    } catch (err) {
+        console.error('Failed to load tree state:', err);
+        excludedPaths = new Set(); // Reset to empty on error
+    }
+}
+
+/**
+ * Debounced save - waits 500ms after last change before saving
+ */
+function debouncedSaveState() {
+    // Clear existing timeout
+    if (saveStateTimeout) {
+        clearTimeout(saveStateTimeout);
+    }
+    
+    // Set new timeout
+    saveStateTimeout = setTimeout(() => {
+        saveTreeState();
+    }, 500);
+}
+
+/**
+ * Save current tree state to backend
+ */
+async function saveTreeState() {
+    try {
+        const excludedArray = Array.from(excludedPaths);
+        await apiSaveTreeState(excludedArray);
+        console.log(`Saved tree state: ${excludedArray.length} excluded items`);
+    } catch (err) {
+        console.error('Failed to save tree state:', err);
+    }
+}

package/src/server/views/js/main.js

@@ -8,6 +8,7 @@ import { initGitView } from './features/git-view.js';
 import { initTerminal, createNewTerminal } from './features/terminal.js';
 import { initEditorTabs } from './features/editor-tabs.js';
 import { initMonaco, updateMonacoTheme } from './features/monaco-manager.js';
+import { initResizeHandler } from './features/resize.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Load system prompt text
@@ -16,6 +17,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Check server status
     await checkServerStatus();
 
+    // Load Project Info
+    await loadProjectInfo();
+
     // Initialize Theme
     initTheme();
 
@@ -31,9 +35,13 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Initialize Terminal System
     initTerminal();
 
+    // Initialize Monaco & Tabs
     // Initialize Monaco & Tabs
     initMonaco();
     initEditorTabs();
+
+    // Initialize Resize Handler
+    initResizeHandler();
     
     // Set default tab to AI Assistant
     if (window.switchTab) {
@@ -46,16 +54,40 @@ async function checkServerStatus() {
     const isHealthy = await checkHealth();
     
     if (isHealthy) {
-        statusEl.textContent = '● Online';
-        statusEl.style.background = 'rgba(52, 199, 89, 0.15)';
+        statusEl.textContent = '●';
+        statusEl.style.background = 'transparent';
         statusEl.style.color = 'var(--ios-green)';
     } else {
-        statusEl.textContent = '● Offline';
-        statusEl.style.background = 'rgba(255, 59, 48, 0.15)';
+        statusEl.textContent = '●';
+        statusEl.style.background = 'transparent';
         statusEl.style.color = 'var(--ios-red)';
     }
 }
 
+async function loadProjectInfo() {
+    try {
+        // Fetch info for current directory (.)
+        const res = await fetch('/api/info?path=.');
+        const data = await res.json();
+        
+        const projectNameEl = document.getElementById('project-name');
+        const projectMetaEl = document.getElementById('project-meta');
+        
+        // Extract folder name from path
+        const fullPath = data.path;
+        // Handle both Windows (\) and Unix (/) paths
+        const folderName = fullPath.split(/[\\/]/).pop();
+        
+        projectNameEl.textContent = folderName;
+        projectMetaEl.textContent = `${data.primaryType} • ${fullPath}`;
+        
+    } catch (err) {
+        console.error('Failed to load project info:', err);
+        document.getElementById('project-name').textContent = 'Unknown Project';
+        document.getElementById('project-meta').textContent = 'Error loading info';
+    }
+}
+
 function initTheme() {
     const themeBtn = document.getElementById('theme-toggle');
     let currentTheme = localStorage.getItem('theme') || 'light';