vg-coder-cli 2.0.25 → 2.0.26

package/src/server/project-manager.js

@@ -0,0 +1,353 @@
+const path = require('path');
+const fs = require('fs-extra');
+const os = require('os');
+const crypto = require('crypto');
+const chalk = require('chalk');
+const http = require('http');
+
+/**
+ * ProjectManager - Singleton for managing multiple projects in one server
+ */
+class ProjectManager {
+  constructor() {
+    if (ProjectManager.instance) {
+      return ProjectManager.instance;
+    }
+
+    this.projects = new Map(); // projectId -> ProjectContext
+    this.currentProjectId = null;
+    this.lockFilePath = path.join(os.homedir(), '.vg', 'vg-leader.lock');
+    
+    ProjectManager.instance = this;
+  }
+
+  /**
+   * Register a new project
+   * @param {string} workingDir - Absolute path to project directory
+   * @returns {string} projectId
+   */
+  registerProject(workingDir) {
+    const resolvedPath = path.resolve(workingDir);
+    const projectId = this.generateProjectId(resolvedPath);
+    
+    // Check if already registered
+    if (this.projects.has(projectId)) {
+      console.log(chalk.yellow(`⚠️  Project already registered: ${path.basename(resolvedPath)}`));
+      return projectId;
+    }
+
+    const projectContext = {
+      id: projectId,
+      name: path.basename(resolvedPath),
+      workingDir: resolvedPath,
+      active: this.projects.size === 0, // First project is active by default
+      createdAt: Date.now(),
+      lastActive: Date.now()
+    };
+
+    this.projects.set(projectId, projectContext);
+    
+    // Set as current if first project
+    if (this.projects.size === 1) {
+      this.currentProjectId = projectId;
+    }
+
+    console.log(chalk.green(`✓ Registered project: ${chalk.cyan(projectContext.name)} (${this.projects.size} total)`));
+    
+    return projectId;
+  }
+
+  /**
+   * Switch to a different project
+   * @param {string} projectId
+   * @returns {boolean} success
+   */
+  switchProject(projectId) {
+    if (!this.projects.has(projectId)) {
+      console.error(chalk.red(`❌ Project not found: ${projectId}`));
+      return false;
+    }
+
+    // Deactivate current project
+    if (this.currentProjectId) {
+      const current = this.projects.get(this.currentProjectId);
+      if (current) {
+        current.active = false;
+      }
+    }
+
+    // Activate new project
+    const newProject = this.projects.get(projectId);
+    newProject.active = true;
+    newProject.lastActive = Date.now();
+    this.currentProjectId = projectId;
+
+    console.log(chalk.blue(`Switched to project: ${chalk.cyan(newProject.name)}`));
+    
+    return true;
+  }
+
+  /**
+   * Get currently active project
+   * @returns {ProjectContext|null}
+   */
+  getActiveProject() {
+    if (!this.currentProjectId) {
+      return null;
+    }
+    return this.projects.get(this.currentProjectId);
+  }
+
+  /**
+   * Get all projects
+   * @returns {Array<ProjectContext>}
+   */
+  getAllProjects() {
+    return Array.from(this.projects.values())
+      .sort((a, b) => b.lastActive - a.lastActive); // Sort by last active
+  }
+
+  /**
+   * Remove a project
+   * @param {string} projectId
+   */
+  removeProject(projectId) {
+    const project = this.projects.get(projectId);
+    if (!project) return;
+
+    this.projects.delete(projectId);
+    console.log(chalk.yellow(`Removed project: ${project.name}`));
+
+    // If removed project was active, switch to another
+    if (projectId === this.currentProjectId) {
+      const remaining = Array.from(this.projects.keys());
+      if (remaining.length > 0) {
+        this.switchProject(remaining[0]);
+      } else {
+        this.currentProjectId = null;
+      }
+    }
+  }
+
+  /**
+   * Generate unique project ID from path
+   * @param {string} projectPath
+   * @returns {string}
+   */
+  generateProjectId(projectPath) {
+    return crypto
+      .createHash('md5')
+      .update(projectPath)
+      .digest('hex')
+      .substring(0, 8);
+  }
+
+  /**
+   * Acquire leader lock
+   * @param {number} port
+   * @param {number} pid
+   * @returns {Promise<boolean>}
+   */
+  async acquireLock(port, pid = process.pid) {
+    try {
+      // Ensure .vg directory exists
+      await fs.ensureDir(path.dirname(this.lockFilePath));
+
+      // Check if lock already exists
+      if (await fs.pathExists(this.lockFilePath)) {
+        const existingLock = await fs.readJson(this.lockFilePath);
+        
+        // Check if existing leader is still alive
+        const isAlive = await this.checkLeaderHealth(existingLock.port);
+        if (isAlive) {
+          console.log(chalk.yellow('⚠️  Leader already exists'));
+          return false;
+        } else {
+          console.log(chalk.yellow('⚠️  Stale lock file detected, cleaning up...'));
+          await fs.remove(this.lockFilePath);
+        }
+      }
+
+      // Write lock file
+      const lockData = {
+        port,
+        pid,
+        startTime: Date.now(),
+        hostname: os.hostname()
+      };
+
+      await fs.writeJson(this.lockFilePath, lockData, { spaces: 2 });
+      console.log(chalk.green(`✓ Acquired leader lock (PID: ${pid}, Port: ${port})`));
+      
+      return true;
+    } catch (error) {
+      console.error(chalk.red('❌ Failed to acquire lock:'), error.message);
+      return false;
+    }
+  }
+
+  /**
+   * Release leader lock
+   * @returns {Promise<void>}
+   */
+  async releaseLock() {
+    try {
+      if (await fs.pathExists(this.lockFilePath)) {
+        await fs.remove(this.lockFilePath);
+        console.log(chalk.green('✓ Released leader lock'));
+      }
+    } catch (error) {
+      console.error(chalk.red('❌ Failed to release lock:'), error.message);
+    }
+  }
+
+  /**
+   * Check if leader exists and is healthy
+   * @returns {Promise<Object|null>} Leader info or null
+   */
+  async checkLeader() {
+    try {
+      if (!await fs.pathExists(this.lockFilePath)) {
+        return null;
+      }
+
+      const lockData = await fs.readJson(this.lockFilePath);
+      
+      // Check if leader is healthy
+      const isHealthy = await this.checkLeaderHealth(lockData.port);
+      
+      if (isHealthy) {
+        return lockData;
+      } else {
+        // Stale lock file
+        console.log(chalk.yellow('⚠️  Leader not responding, cleaning up stale lock...'));
+        await fs.remove(this.lockFilePath);
+        return null;
+      }
+    } catch (error) {
+      console.error(chalk.red('❌ Error checking leader:'), error.message);
+      return null;
+    }
+  }
+
+  /**
+   * Check if leader server is healthy
+   * @param {number} port
+   * @returns {Promise<boolean>}
+   */
+  async checkLeaderHealth(port) {
+    return new Promise((resolve) => {
+      const req = http.get(`http://localhost:${port}/health`, (res) => {
+        resolve(res.statusCode === 200);
+      });
+
+      req.on('error', () => {
+        resolve(false);
+      });
+
+      req.setTimeout(2000, () => {
+        req.destroy();
+        resolve(false);
+      });
+    });
+  }
+
+  /**
+   * Join existing leader as follower
+   * @param {Object} leaderInfo
+   * @param {string} projectPath
+   * @returns {Promise<boolean>}
+   */
+  async joinLeader(leaderInfo, projectPath) {
+    try {
+      const { port } = leaderInfo;
+      const resolvedPath = path.resolve(projectPath);
+      const projectName = path.basename(resolvedPath);
+
+      console.log(chalk.blue(`\n📡 Joining leader at port ${port}...`));
+      
+      // Send registration request to leader
+      const response = await this.sendHttpRequest(port, '/api/projects/register', {
+        method: 'POST',
+        body: JSON.stringify({
+          workingDir: resolvedPath,
+          name: projectName
+        })
+      });
+
+      if (response.success) {
+        console.log(chalk.green('\n──────────────────────────────────────────────────'));
+        console.log(`🔗 ${chalk.bold('Project Registered')}    ${chalk.green('● Joined')}`);
+        console.log(chalk.gray('──────────────────────────────────────────────────'));
+        console.log(`📁 Project:   ${chalk.cyan(projectName)}`);
+        console.log(`🌐 Dashboard: ${chalk.blue(`http://localhost:${port}`)}`);
+        console.log(`📊 Total:     ${chalk.yellow(response.totalProjects)} project(s)`);
+        console.log(chalk.green('──────────────────────────────────────────────────\n'));
+        console.log(chalk.blue('💡 Open the dashboard to switch between projects.'));
+        return true;
+      } else {
+        throw new Error(response.error || 'Failed to register project');
+      }
+    } catch (error) {
+      console.error(chalk.red('❌ Failed to join leader:'), error.message);
+      return false;
+    }
+  }
+
+  /**
+   * Send HTTP request to server
+   * @param {number} port
+   * @param {string} path
+   * @param {Object} options
+   * @returns {Promise<Object>}
+   */
+  sendHttpRequest(port, path, options = {}) {
+    return new Promise((resolve, reject) => {
+      const postData = options.body || '';
+      
+      const req = http.request({
+        hostname: 'localhost',
+        port: port,
+        path: path,
+        method: options.method || 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Content-Length': Buffer.byteLength(postData)
+        }
+      }, (res) => {
+        let data = '';
+        
+        res.on('data', (chunk) => {
+          data += chunk;
+        });
+        
+        res.on('end', () => {
+          try {
+            const parsed = JSON.parse(data);
+            resolve(parsed);
+          } catch (error) {
+            reject(new Error('Invalid JSON response'));
+          }
+        });
+      });
+
+      req.on('error', (error) => {
+        reject(error);
+      });
+
+      req.setTimeout(5000, () => {
+        req.destroy();
+        reject(new Error('Request timeout'));
+      });
+
+      if (postData) {
+        req.write(postData);
+      }
+      
+      req.end();
+    });
+  }
+}
+
+// Export singleton instance
+module.exports = new ProjectManager();

package/src/server/terminal-manager.js

@@ -5,7 +5,7 @@ const { stripAnsiCodes, classifyLogLine, extractErrors } = require(path.join(__d
 
 class TerminalManager {
     constructor() {
-        // Map: termId -> { process: pty, socketId: string }
+        // Map: termId -> { process: pty, socketId: string, projectId: string }
         this.sessions = new Map();
         // Map: termId -> Array of log lines (circular buffer, max 10000)
         this.logBuffers = new Map();
@@ -22,7 +22,7 @@ class TerminalManager {
         }
     }
 
-    createTerminal(socket, termId, cols = 80, rows = 24, cwd) {
+    createTerminal(socket, termId, cols = 80, rows = 24, cwd, projectId = null) {
         try {
             const term = pty.spawn(this.shell, [], {
                 name: 'xterm-256color',
@@ -34,7 +34,8 @@ class TerminalManager {
 
             this.sessions.set(termId, {
                 process: term,
-                socketId: socket.id
+                socketId: socket.id,
+                projectId: projectId  // Store project association
             });
 
             // Initialize log buffer for this terminal
@@ -185,6 +186,33 @@ class TerminalManager {
             }))
         };
     }
+
+    /**
+     * Get all terminal IDs for a specific project
+     * @param {string} projectId - Project ID
+     * @returns {string[]} Array of terminal IDs
+     */
+    getProjectTerminals(projectId) {
+        const terminals = [];
+        for (const [termId, session] of this.sessions.entries()) {
+            if (session.projectId === projectId) {
+                terminals.push(termId);
+            }
+        }
+        return terminals;
+    }
+
+    /**
+     * Clean up all terminals for a project
+     * @param {string} projectId - Project ID
+     */
+    cleanupProject(projectId) {
+        const terminalsToRemove = this.getProjectTerminals(projectId);
+        terminalsToRemove.forEach(termId => {
+            this.kill(termId);
+        });
+        console.log(`Cleaned up ${terminalsToRemove.length} terminal(s) for project ${projectId}`);
+    }
 }
 
 module.exports = new TerminalManager();

package/src/server/views/css/iframe.css

@@ -251,6 +251,7 @@
     .right-panel {
         flex: 1;
         height: 50vh;
+        display: none;
     }
 
     .extension-guide-center {

package/src/server/views/dashboard.css

@@ -94,44 +94,84 @@ body.resizing {
     padding-right: 0px;
 }
 
-/* --- COMPONENT STYLES --- */
+/* --- HEADER REDESIGN --- */
 .header {
     display: flex;
-    justify-content: space-between;
-    align-items: center; /* Align items vertically center */
+    flex-direction: column;
+    gap: 6px; /* Space between rows */
     margin-bottom: 15px;
 }
 
-.header-content {
+.header-top-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.header-left-group {
     display: flex;
     align-items: center;
     gap: 12px;
+    flex: 1; /* Take available space */
+    min-width: 0; /* Enable truncation */
 }
 
 .status {
     font-size: 14px;
     color: var(--ios-green);
     line-height: 1;
+    flex-shrink: 0;
 }
 
-/* NEW: Project Info Styles */
-.project-info {
+/* Project Switcher replaces Project Title */
+.project-switcher {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    line-height: 1.2;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
 }
 
-.project-name {
-    font-weight: 700;
-    font-size: 16px;
+.project-selector {
+    padding: 5px 10px;
+    background: var(--ios-input-bg);
+    border: 1px solid var(--ios-separator);
+    border-radius: 6px;
+    font-size: 14px; /* Slightly bigger font like a title */
+    font-weight: 700; /* Bold like a title */
     color: var(--text-primary);
+    cursor: pointer;
+    outline: none;
+    transition: all 0.2s;
+    max-width: 100%;
+    text-overflow: ellipsis;
 }
 
-.project-meta {
-    font-size: 11px;
+.project-selector:hover {
+    border-color: var(--ios-blue);
+}
+
+.project-selector:focus {
+    border-color: var(--ios-blue);
+    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
+}
+
+.project-count {
+    font-size: 10px;
     color: var(--text-secondary);
-    font-family: monospace;
+    background: var(--ios-gray-light);
+    padding: 3px 7px;
+    border-radius: 10px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
 }
 
 .theme-toggle {
@@ -144,6 +184,45 @@ body.resizing {
     box-shadow: 0 2px 5px var(--shadow-color);
 }
 
+.stop-server-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: none;
+    background: var(--ios-red);
+    color: white;
+    cursor: pointer;
+    box-shadow: 0 2px 5px var(--shadow-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: all 0.2s;
+}
+
+.stop-server-btn:hover {
+    opacity: 0.8;
+    transform: scale(1.05);
+}
+
+/* Bottom Row - Full Width Metadata */
+.header-bottom-row {
+    width: 100%;
+    padding-left: 2px;
+}
+
+.project-meta {
+    font-size: 11px;
+    color: var(--text-secondary);
+    font-family: monospace;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    width: 100%;
+    line-height: 1.4;
+}
+
 .system-prompt-card,
 .endpoint-card {
     background: var(--ios-card);
@@ -343,7 +422,7 @@ body.resizing {
         flex: none;
         width: 100%;
         max-width: 100%;
-        height: 50vh;
+        height: 100vh;
         border-right: none;
         border-bottom: 1px solid var(--ios-separator);
     }
@@ -352,6 +431,7 @@ body.resizing {
 /* --- SAVED COMMANDS STYLES --- */
 .saved-commands-panel {
     margin-bottom: 12px;
+    background: var(--ios-card);
 }
 
 .saved-commands-header {
@@ -423,71 +503,97 @@ body.resizing {
     margin-top: 0;
 }
 
+/* NEW: Grid Layout for Commands */
 .commands-list {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 8px;
+    max-height: 300px;
+    overflow-y: auto;
+    padding-right: 2px; /* For scrollbar */
+}
+
+/* Custom Scrollbar for list */
+.commands-list::-webkit-scrollbar {
+    width: 4px;
+}
+.commands-list::-webkit-scrollbar-thumb {
+    background: var(--ios-separator);
+    border-radius: 2px;
 }
 
 .command-card {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 10px;
+    padding: 6px 8px; /* Tighter padding */
     background: var(--ios-input-bg);
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s;
     border: 1px solid transparent;
+    height: 42px; /* Fixed height for consistency */
+    overflow: hidden;
 }
 
 .command-card:hover {
     background: var(--ios-gray-light);
     border-color: var(--ios-blue);
-    transform: translateX(2px);
+    transform: translateY(-1px);
 }
 
 .command-card-main {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     flex: 1;
-    min-width: 0;
+    min-width: 0; /* Critical for truncation */
 }
 
 .command-icon {
-    font-size: 20px;
+    font-size: 16px;
     flex-shrink: 0;
+    width: 20px;
+    text-align: center;
 }
 
 .command-info {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 1px; /* Tighter gap */
     min-width: 0;
     flex: 1;
 }
 
 .command-name {
     font-weight: 600;
-    font-size: 13px;
+    font-size: 12px;
     color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.2;
 }
 
 .command-text {
     font-family: monospace;
-    font-size: 11px;
+    font-size: 10px;
     color: var(--text-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: 1.2;
 }
 
 .command-card-actions {
     display: flex;
-    gap: 4px;
+    gap: 2px;
     opacity: 0;
     transition: opacity 0.2s;
+    margin-left: 4px;
+    flex-shrink: 0;
+    background: var(--ios-gray-light); /* Ensure visibility over background */
+    border-radius: 4px;
 }
 
 .command-card:hover .command-card-actions {
@@ -495,21 +601,23 @@ body.resizing {
 }
 
 .command-action-btn {
-    width: 24px;
-    height: 24px;
+    width: 22px;
+    height: 22px;
     border: none;
-    background: rgba(0, 0, 0, 0.05);
+    background: transparent;
     border-radius: 4px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
+    color: var(--text-secondary);
     transition: all 0.2s;
 }
 
 .command-action-btn:hover {
     background: rgba(0, 0, 0, 0.1);
+    color: var(--text-primary);
     transform: scale(1.1);
 }