vg-coder-cli 2.0.20 → 2.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.20",
+  "version": "2.0.22",
   "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": {
@@ -44,6 +44,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 +57,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

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

@@ -327,11 +327,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/dashboard.css

@@ -75,18 +75,40 @@ body {
 .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>
@@ -275,4 +281,4 @@
     <script type="module" src="/js/main.js"></script>
 </body>
 
-</html>
+</html>

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

@@ -16,6 +16,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Check server status
     await checkServerStatus();
 
+    // Load Project Info
+    await loadProjectInfo();
+
     // Initialize Theme
     initTheme();
 
@@ -46,16 +49,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';