vg-coder-cli 2.0.22 → 2.0.23

package/.vg/tree-state.json

@@ -0,0 +1,9 @@
+{
+  "excludedPaths": [
+    "scripts/build.js",
+    "src/detectors/project-detector.js",
+    "src/exporter/html-exporter.js",
+    "src/ignore",
+    "src/ignore/ignore-manager.js"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.22",
+  "version": "2.0.23",
   "description": "🚀 CLI tool to analyze projects, concatenate source files, count tokens, and export HTML with syntax highlighting and copy functionality",
   "main": "src/index.js",
   "bin": {
@@ -13,6 +13,8 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "dev": "nodemon src/index.js",
+    "build:extension": "cd vetgo-auto && npm run build",
+    "build:copy": "node scripts/build.js",
     "build": "node scripts/build.js",
     "push": "npm run build && npm pack && npm publish"
   },

package/scripts/build.js

@@ -1,29 +1,72 @@
 const AdmZip = require('adm-zip');
 const path = require('path');
 const fs = require('fs-extra');
+const { execSync } = require('child_process');
 
 async function build() {
     try {
         const rootDir = path.resolve(__dirname, '..');
+        const extensionSourceDir = path.join(rootDir, 'vetgo-auto', 'chrome', 'dist');
+        const extensionWorkspaceDir = path.join(rootDir, 'vetgo-auto');
         const zipPath = path.join(rootDir, 'vg-coder.zip');
         const targetDir = path.join(rootDir, 'src', 'server', 'views', 'vg-coder');
 
         console.log('🏗️  Starting build process...');
 
-        // 1. Check if zip exists
+        // Strategy 1: Try to build and copy from vetgo-auto/chrome/dist
+        if (fs.existsSync(extensionWorkspaceDir)) {
+            console.log('📦 Found vetgo-auto workspace. Building extension...');
+            
+            try {
+                // Build the extension
+                console.log('🔨 Running: cd vetgo-auto && npm run build');
+                execSync('npm run build', {
+                    cwd: extensionWorkspaceDir,
+                    stdio: 'inherit'
+                });
+
+                // Check if dist directory exists
+                if (fs.existsSync(extensionSourceDir)) {
+                    console.log('✅ Extension built successfully at:', extensionSourceDir);
+                    
+                    // Clean old directory
+                    if (fs.existsSync(targetDir)) {
+                        console.log('🧹 Cleaning old extension directory...');
+                        fs.removeSync(targetDir);
+                    }
+
+                    // Copy built extension
+                    console.log('📋 Copying extension to:', targetDir);
+                    fs.copySync(extensionSourceDir, targetDir);
+                    
+                    console.log('✅ Extension copied successfully!');
+                    console.log('🚀 Build completed successfully!');
+                    return;
+                } else {
+                    console.warn('⚠️  Extension dist directory not found. Falling back to zip extraction...');
+                }
+            } catch (buildError) {
+                console.warn('⚠️  Extension build failed:', buildError.message);
+                console.warn('⚠️  Falling back to zip extraction...');
+            }
+        } else {
+            console.log('ℹ️  vetgo-auto workspace not found. Using zip file...');
+        }
+
+        // Strategy 2: Fallback to zip extraction (for npm package users)
         if (!fs.existsSync(zipPath)) {
-            console.error('⚠️  vg-coder.zip not found at root. Skipping extension extraction.');
-            // We don't exit 1 here to allow build to continue if zip is missing in dev
-            return;
+            console.error('❌ vg-coder.zip not found and extension build failed.');
+            console.error('❌ Cannot proceed with build.');
+            process.exit(1);
         }
 
-        // 2. Clean old directory
+        // Clean old directory
         if (fs.existsSync(targetDir)) {
             console.log('🧹 Cleaning old extension directory...');
             fs.removeSync(targetDir);
         }
 
-        // 3. Unzip
+        // Unzip
         console.log('📦 Unzipping vg-coder.zip...');
         const zip = new AdmZip(zipPath);
         zip.extractAllTo(targetDir, true);

package/src/server/api-server.js

@@ -274,6 +274,52 @@ class ApiServer {
       }
     });
 
+    // --- TREE STATE API ---
+
+    // Save tree state (excluded paths)
+    this.app.post('/api/tree-state/save', async (req, res) => {
+        try {
+            const { excludedPaths } = req.body;
+            if (!Array.isArray(excludedPaths)) {
+                return res.status(400).json({ error: 'excludedPaths must be an array' });
+            }
+
+            // Create .vg directory if it doesn't exist
+            const vgDir = path.join(this.workingDir, '.vg');
+            await fs.ensureDir(vgDir);
+
+            // Save state to .vg/tree-state.json
+            const stateFile = path.join(vgDir, 'tree-state.json');
+            await fs.writeJson(stateFile, { excludedPaths }, { spaces: 2 });
+
+            console.log(chalk.green(`✓ Saved tree state: ${excludedPaths.length} excluded items`));
+            res.json({ success: true, count: excludedPaths.length });
+        } catch (error) {
+            console.error(chalk.red('❌ [TREE STATE SAVE] Error:'), error.message);
+            res.status(500).json({ error: error.message });
+        }
+    });
+
+    // Load tree state
+    this.app.get('/api/tree-state/load', async (req, res) => {
+        try {
+            const stateFile = path.join(this.workingDir, '.vg', 'tree-state.json');
+            
+            // Check if state file exists
+            if (!await fs.pathExists(stateFile)) {
+                return res.json({ excludedPaths: [] });
+            }
+
+            // Read and return state
+            const state = await fs.readJson(stateFile);
+            res.json({ excludedPaths: state.excludedPaths || [] });
+        } catch (error) {
+            console.error(chalk.red('❌ [TREE STATE LOAD] Error:'), error.message);
+            // Return empty state on error instead of failing
+            res.json({ excludedPaths: [] });
+        }
+    });
+
     // --- GENERAL API ---
 
     this.app.post('/api/analyze', async (req, res) => {

package/src/server/views/css/structure.css

@@ -25,8 +25,9 @@
     font-size: 11px;
     /* Smaller tree font */
     overflow-x: auto;
-    max-height: 400px;
+    max-height: 600px;
     overflow-y: auto;
+    width: 100%; /* Take full width */
 }
 
 .tree-ul {
@@ -58,6 +59,7 @@
     cursor: pointer;
     transition: background 0.1s;
     line-height: 1.2;
+    width: 100%; /* Ensure row takes full width */
 }
 
 .tree-item-row:hover {
@@ -99,6 +101,7 @@
     font-weight: 600;
     min-width: 30px;
     text-align: center;
+    flex-shrink: 0; /* Always keep badge visible */
 }
 
 .token-low {

package/src/server/views/dashboard.css

@@ -61,14 +61,37 @@ body {
     height: 100%;
     overflow-y: auto;
     background: var(--ios-bg);
-    border-right: 1px solid var(--ios-separator);
     position: relative;
     z-index: 10;
+    /* allow resize override */
+    flex: 0 0 450px; 
+}
+
+/* Resize Handler */
+.resize-handler {
+    width: 16px;
+    cursor: col-resize;
+    background: transparent;
+    z-index: 100;
+    margin-left: -3px; /* Overlap border */
+    position: relative;
+}
+
+.resize-handler:hover,
+body.resizing .resize-handler {
+    background: var(--ios-blue);
+    opacity: 0.5;
+}
+
+body.resizing {
+    cursor: col-resize;
+    user-select: none;
 }
 
 .container {
     padding: 15px;
     padding-top: 15px;
+    padding-right: 0px;
 }
 
 /* --- COMPONENT STYLES --- */

package/src/server/views/dashboard.html

@@ -186,6 +186,8 @@
                 <div style="height: 50px;"></div>
             </div>
         </div>
+        <!-- Resize Handler -->
+        <div id="resize-handler" class="resize-handler"></div>
 
         <!-- CỘT PHẢI: AI Iframe & Editor -->
         <div class="right-panel">

package/src/server/views/js/api.js

@@ -100,6 +100,30 @@ export async function commitChanges(message) {
     return true;
 }
 
+// --- Tree State API ---
+
+export async function saveTreeState(excludedPaths) {
+    const res = await fetch(`${API_BASE}/api/tree-state/save`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ excludedPaths })
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || 'Failed to save tree state');
+    }
+    return await res.json();
+}
+
+export async function loadTreeState() {
+    const res = await fetch(`${API_BASE}/api/tree-state/load`);
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || 'Failed to load tree state');
+    }
+    return await res.json();
+}
+
 // ------------------------
 
 export async function copyAsFile(filename, content) {

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

@@ -0,0 +1,57 @@
+/**
+ * Feature: Left Panel Resize
+ * Allows the user to drag the right edge of the left panel to resize it.
+ */
+
+export function initResizeHandler() {
+    const leftPanel = document.querySelector('.left-panel');
+    const handle = document.getElementById('resize-handler'); // Match the ID we will add in HTML
+    const splitLayout = document.querySelector('.split-layout');
+
+    if (!leftPanel || !handle) {
+        console.warn('Resize elements not found');
+        return;
+    }
+
+    let isResizing = false;
+    let startX = 0;
+    let startWidth = 0;
+
+    // Mouse Down
+    handle.addEventListener('mousedown', (e) => {
+        isResizing = true;
+        startX = e.clientX;
+        startWidth = leftPanel.getBoundingClientRect().width;
+        
+        // Add resizing class for styling/cursor
+        document.body.classList.add('resizing');
+        
+        // Disable text selection during drag
+        e.preventDefault();
+    });
+
+    // Mouse Move
+    document.addEventListener('mousemove', (e) => {
+        if (!isResizing) return;
+
+        requestAnimationFrame(() => {
+            const currentX = e.clientX;
+            const diffX = currentX - startX;
+            const newWidth = Math.max(250, startWidth + diffX); // Min width 250px
+            const maxWidth = window.innerWidth - 300; // Leave space for right panel
+
+            if (newWidth < maxWidth) {
+                leftPanel.style.flex = `0 0 ${newWidth}px`;
+                leftPanel.style.width = `${newWidth}px`;
+            }
+        });
+    });
+
+    // Mouse Up
+    document.addEventListener('mouseup', () => {
+        if (isResizing) {
+            isResizing = false;
+            document.body.classList.remove('resizing');
+        }
+    });
+}

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
@@ -34,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) {