vg-coder-cli 2.0.20 → 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.20",
+  "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"
   },
@@ -44,6 +46,7 @@
     "ora": "^5.4.1",
     "path": "^0.12.7",
     "socket.io": "^4.7.2",
+    "socket.io-client": "^4.7.2",
     "tiktoken": "^1.0.10",
     "vg-coder-cli": "^2.0.15"
   },
@@ -56,4 +59,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

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/index.js

@@ -372,13 +372,13 @@ class VGCoderCLI {
    */
   async handleStart(options) {
     try {
-      const port = parseInt(options.port);
-      const server = new ApiServer(port);
+      const initialPort = parseInt(options.port);
+      const server = new ApiServer(initialPort);
       
       await server.start();
       
-      // Auto-open browser to dashboard
-      const dashboardUrl = `http://localhost:${port}`;
+      // Auto-open browser to dashboard using actual port from server
+      const dashboardUrl = `http://localhost:${server.port}`;
       const { exec } = require('child_process');
       const platform = process.platform;
       

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) => {
@@ -327,11 +373,43 @@ class ApiServer {
   }
 
   async start() {
-    return new Promise((resolve) => {
-      this.server = this.httpServer.listen(this.port, () => {
-        console.log(chalk.green(`\n🚀 VG Coder API Server & Socket.IO started on port ${this.port}`));
-        resolve();
-      });
+    return new Promise((resolve, reject) => {
+        const tryPort = (port) => {
+            const onError = (e) => {
+                if (e.code === 'EADDRINUSE') {
+                    console.log(chalk.yellow(`⚠️  Port ${port} is busy, trying ${port + 1}...`));
+                    this.httpServer.close();
+                    tryPort(port + 1);
+                } else {
+                    this.httpServer.removeListener('error', onError);
+                    reject(e);
+                }
+            };
+
+            this.httpServer.once('error', onError);
+
+            this.server = this.httpServer.listen(port, () => {
+                this.httpServer.removeListener('error', onError);
+                
+                // Update actual port
+                this.port = this.server.address().port;
+
+                const projectName = path.basename(this.workingDir);
+                const startTime = new Date().toLocaleString();
+                
+                console.log(chalk.green('\n──────────────────────────────────────────────────'));
+                console.log(`🚀 ${chalk.bold('VG Coder Server')}    ${chalk.green('● Online')}`);
+                console.log(chalk.gray('──────────────────────────────────────────────────'));
+                console.log(`📁 Project:   ${chalk.cyan(projectName)}`);
+                console.log(`⏰ Started:   ${chalk.yellow(startTime)}`);
+                console.log(`📡 URL:       ${chalk.blue(`http://localhost:${this.port}`)}`);
+                console.log(chalk.green('──────────────────────────────────────────────────\n'));
+                
+                resolve();
+            });
+        };
+
+        tryPort(this.port);
     });
   }
 

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,32 +61,77 @@ 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 --- */
 .header {
     display: flex;
     justify-content: space-between;
+    align-items: center; /* Align items vertically center */
     margin-bottom: 15px;
 }
 
-.header h1 {
-    font-size: 20px;
-    font-weight: 700;
-    margin: 0;
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 
 .status {
-    font-size: 11px;
+    font-size: 14px;
     color: var(--ios-green);
+    line-height: 1;
+}
+
+/* NEW: Project Info Styles */
+.project-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1.2;
+}
+
+.project-name {
+    font-weight: 700;
+    font-size: 16px;
+    color: var(--text-primary);
+}
+
+.project-meta {
+    font-size: 11px;
+    color: var(--text-secondary);
+    font-family: monospace;
 }
 
 .theme-toggle {

package/src/server/views/dashboard.html

@@ -62,8 +62,14 @@
             <div class="container">
                 <div class="header">
                     <div class="header-content">
-                        <span class="status" id="status">● Server Starting...</span>
-                        <div style="height: 5px;"></div>
+                        <!-- Status Dot -->
+                        <span class="status" id="status" style="font-size: 14px;">●</span>
+                        
+                        <!-- NEW: Project Info Section -->
+                        <div class="project-info">
+                            <div class="project-name" id="project-name">Loading...</div>
+                            <div class="project-meta" id="project-meta">...</div>
+                        </div>
                     </div>
                     <button class="theme-toggle" id="theme-toggle" title="Toggle Dark Mode">
                         <span id="theme-icon">🌙</span>
@@ -180,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">
@@ -275,4 +283,4 @@
     <script type="module" src="/js/main.js"></script>
 </body>
 
-</html>
+</html>

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/iframe-manager.js

@@ -3,7 +3,8 @@ const AI_PROVIDERS = [
     { id: 'kimi', name: 'Kimi AI', url: 'https://www.kimi.com' },
     { id: 'deepseek', name: 'DeepSeek', url: 'https://chat.deepseek.com' },
     { id: 'gemini', name: 'Google Gemini', url: 'https://gemini.google.com/app' },
-    { id: 'aistudio', name: 'Google AI Studio', url: 'https://aistudio.google.com/prompts/new_chat' }
+    { id: 'aistudio', name: 'Google AI Studio', url: 'https://aistudio.google.com/prompts/new_chat' },
+    { id: 'gork', name: 'Gork', url: 'https://grok.com' },
 ];
 
 export function initIframeManager() {

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');
+        }
+    });
+}