vg-coder-cli 2.0.23 → 2.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.23",
+  "version": "2.0.25",
   "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": {

package/src/server/api-server.js

@@ -274,6 +274,82 @@ class ApiServer {
       }
     });
 
+    // --- TERMINAL LOG API ---
+
+    // Get terminal logs
+    this.app.get('/api/terminal/:termId/logs', (req, res) => {
+        try {
+            const { termId } = req.params;
+            const logs = terminalManager.getLogBuffer(termId);
+            
+            res.json({ 
+                termId,
+                logs, 
+                totalLines: logs.length 
+            });
+        } catch (error) {
+            console.error(chalk.red('❌ [TERMINAL LOGS] Error:'), error.message);
+            res.status(500).json({ error: error.message });
+        }
+    });
+
+    // Analyze terminal logs
+    this.app.post('/api/terminal/:termId/analyze', (req, res) => {
+        try {
+            const { termId } = req.params;
+            const analysis = terminalManager.analyzeLogBuffer(termId);
+            
+            res.json({ 
+                termId,
+                ...analysis
+            });
+        } catch (error) {
+            console.error(chalk.red('❌ [TERMINAL ANALYZE] Error:'), error.message);
+            res.status(500).json({ error: error.message });
+        }
+    });
+
+    // --- SAVED COMMANDS API ---
+
+    // Load saved commands
+    this.app.get('/api/commands/load', async (req, res) => {
+        try {
+            const commandsFile = path.join(this.workingDir, '.vg', 'commands.json');
+            
+            if (!await fs.pathExists(commandsFile)) {
+                return res.json({ commands: [] });
+            }
+
+            const data = await fs.readJson(commandsFile);
+            res.json({ commands: data.commands || [] });
+        } catch (error) {
+            console.error(chalk.red('❌ [COMMANDS LOAD] Error:'), error.message);
+            res.json({ commands: [] });
+        }
+    });
+
+    // Save commands
+    this.app.post('/api/commands/save', async (req, res) => {
+        try {
+            const { commands } = req.body;
+            if (!Array.isArray(commands)) {
+                return res.status(400).json({ error: 'commands must be an array' });
+            }
+
+            const vgDir = path.join(this.workingDir, '.vg');
+            await fs.ensureDir(vgDir);
+
+            const commandsFile = path.join(vgDir, 'commands.json');
+            await fs.writeJson(commandsFile, { commands }, { spaces: 2 });
+
+            console.log(chalk.green(`✓ Saved ${commands.length} commands`));
+            res.json({ success: true, count: commands.length });
+        } catch (error) {
+            console.error(chalk.red('❌ [COMMANDS SAVE] Error:'), error.message);
+            res.status(500).json({ error: error.message });
+        }
+    });
+
     // --- TREE STATE API ---
 
     // Save tree state (excluded paths)

package/src/server/terminal-manager.js

@@ -1,11 +1,25 @@
 const os = require('os');
 const pty = require('node-pty');
+const path = require('path');
+const { stripAnsiCodes, classifyLogLine, extractErrors } = require(path.join(__dirname, 'views/js/utils/log-utils'));
 
 class TerminalManager {
     constructor() {
         // Map: termId -> { process: pty, socketId: string }
         this.sessions = new Map();
-        this.shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash';
+        // Map: termId -> Array of log lines (circular buffer, max 10000)
+        this.logBuffers = new Map();
+        this.MAX_LOG_LINES = 10000;
+        // Use full path to shell to avoid posix_spawnp errors
+        if (os.platform() === 'win32') {
+            this.shell = 'powershell.exe';
+        } else if (os.platform() === 'darwin') {
+            // macOS - use zsh (default shell since Catalina)
+            this.shell = process.env.SHELL || '/bin/zsh';
+        } else {
+            // Linux and others
+            this.shell = process.env.SHELL || '/bin/bash';
+        }
     }
 
     createTerminal(socket, termId, cols = 80, rows = 24, cwd) {
@@ -23,8 +37,15 @@ class TerminalManager {
                 socketId: socket.id
             });
 
+            // Initialize log buffer for this terminal
+            this.logBuffers.set(termId, []);
+
             // Gửi dữ liệu kèm theo termId để Frontend biết của cửa sổ nào
             term.onData((data) => {
+                // Store in log buffer (strip ANSI for storage)
+                this.addToLogBuffer(termId, data);
+                
+                // Send raw data to frontend (keep ANSI for display)
                 socket.emit('terminal:data', { termId, data });
             });
 
@@ -32,6 +53,8 @@ class TerminalManager {
                 if (this.sessions.has(termId)) {
                     socket.emit('terminal:exit', { termId });
                     this.sessions.delete(termId);
+                    // Clean up log buffer
+                    this.logBuffers.delete(termId);
                 }
             });
 
@@ -74,9 +97,94 @@ class TerminalManager {
             if (session.socketId === socketId) {
                 session.process.kill();
                 this.sessions.delete(termId);
+                this.logBuffers.delete(termId);
             }
         }
     }
+
+    /**
+     * Add data to log buffer (circular buffer with max 10000 lines)
+     * @param {string} termId - Terminal ID
+     * @param {string} data - Raw terminal data (may contain ANSI codes)
+     */
+    addToLogBuffer(termId, data) {
+        if (!this.logBuffers.has(termId)) {
+            this.logBuffers.set(termId, []);
+        }
+
+        const buffer = this.logBuffers.get(termId);
+        
+        // Strip ANSI codes before storing
+        const cleanData = stripAnsiCodes(data);
+        
+        // Split by newlines and add to buffer
+        const lines = cleanData.split(/\r?\n/);
+        
+        lines.forEach(line => {
+            // Only add non-empty lines
+            if (line.trim().length > 0) {
+                buffer.push(line);
+                
+                // Maintain circular buffer - remove oldest if exceeds limit
+                if (buffer.length > this.MAX_LOG_LINES) {
+                    buffer.shift();
+                }
+            }
+        });
+    }
+
+    /**
+     * Get log buffer for a terminal
+     * @param {string} termId - Terminal ID
+     * @returns {string[]} Array of log lines
+     */
+    getLogBuffer(termId) {
+        return this.logBuffers.get(termId) || [];
+    }
+
+    /**
+     * Analyze log buffer and return statistics
+     * @param {string} termId - Terminal ID
+     * @returns {Object} Analysis with error counts, line counts, etc.
+     */
+    analyzeLogBuffer(termId) {
+        const lines = this.getLogBuffer(termId);
+        
+        if (lines.length === 0) {
+            return {
+                totalLines: 0,
+                errorLines: 0,
+                warningLines: 0,
+                normalLines: 0,
+                errors: []
+            };
+        }
+
+        let errorCount = 0;
+        let warningCount = 0;
+        let normalCount = 0;
+
+        lines.forEach(line => {
+            const type = classifyLogLine(line);
+            if (type === 'ERROR') errorCount++;
+            else if (type === 'WARNING') warningCount++;
+            else normalCount++;
+        });
+
+        const errors = extractErrors(lines, 2);
+
+        return {
+            totalLines: lines.length,
+            errorLines: errorCount,
+            warningLines: warningCount,
+            normalLines: normalCount,
+            errors: errors.map(e => ({
+                line: e.line,
+                type: e.type,
+                lineIndex: e.lineIndex
+            }))
+        };
+    }
 }
 
 module.exports = new TerminalManager();

package/src/server/views/css/terminal.css

@@ -69,6 +69,94 @@
     text-overflow: ellipsis;
 }
 
+/* Copy Button Group */
+.terminal-copy-group {
+    display: flex;
+    gap: 4px;
+    margin-left: auto;
+    margin-right: 8px;
+    align-items: center;
+}
+
+.copy-btn {
+    padding: 3px 6px;
+    font-size: 10px;
+    border-radius: 3px;
+    background: #2d2d30;
+    border: 1px solid #3e3e42;
+    color: #ccc;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    white-space: nowrap;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.copy-btn:hover {
+    background: #3e3e42;
+    border-color: #555;
+    transform: translateY(-1px);
+}
+
+.copy-btn:active {
+    transform: translateY(0);
+}
+
+.token-badge {
+    font-size: 9px;
+    color: #888;
+    font-weight: 600;
+    min-width: 20px;
+    text-align: right;
+}
+
+/* Specific button colors */
+.copy-smart:hover {
+    border-color: #4a9eff;
+}
+
+.copy-errors:hover {
+    border-color: #f48771;
+}
+
+.copy-recent:hover {
+    border-color: #89d185;
+}
+
+.copy-all:hover {
+    border-color: #dcdcaa;
+}
+
+/* Clear Button */
+.term-btn-clear {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    background: #2d2d30;
+    border: 1px solid #3e3e42;
+    color: #ccc;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    margin-left: 4px;
+    margin-right: 8px;
+    transition: all 0.2s;
+}
+
+.term-btn-clear:hover {
+    background: #3e3e42;
+    border-color: #f48771;
+    transform: translateY(-1px);
+}
+
+.term-btn-clear:active {
+    transform: translateY(0);
+}
+
 .terminal-controls {
     display: flex;
     gap: 6px;

package/src/server/views/dashboard.css

@@ -348,3 +348,270 @@ body.resizing {
         border-bottom: 1px solid var(--ios-separator);
     }
 }
+
+/* --- SAVED COMMANDS STYLES --- */
+.saved-commands-panel {
+    margin-bottom: 12px;
+}
+
+.saved-commands-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.saved-commands-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    font-size: 13px;
+    color: var(--text-primary);
+}
+
+.command-icon-header {
+    font-size: 16px;
+}
+
+.saved-commands-actions {
+    display: flex;
+    gap: 6px;
+}
+
+.btn-new-terminal {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    background: var(--ios-gray-light);
+    border: 1px solid var(--ios-separator);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: all 0.2s;
+}
+
+.btn-new-terminal:hover {
+    background: var(--ios-separator);
+    transform: scale(1.05);
+}
+
+.btn-add-command {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    background: var(--ios-blue);
+    border: none;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: all 0.2s;
+}
+
+.btn-add-command:hover {
+    opacity: 0.8;
+    transform: scale(1.05);
+}
+
+.saved-commands-content {
+    margin-top: 0;
+}
+
+.commands-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.command-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 10px;
+    background: var(--ios-input-bg);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid transparent;
+}
+
+.command-card:hover {
+    background: var(--ios-gray-light);
+    border-color: var(--ios-blue);
+    transform: translateX(2px);
+}
+
+.command-card-main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+    min-width: 0;
+}
+
+.command-icon {
+    font-size: 20px;
+    flex-shrink: 0;
+}
+
+.command-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    flex: 1;
+}
+
+.command-name {
+    font-weight: 600;
+    font-size: 13px;
+    color: var(--text-primary);
+}
+
+.command-text {
+    font-family: monospace;
+    font-size: 11px;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.command-card-actions {
+    display: flex;
+    gap: 4px;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.command-card:hover .command-card-actions {
+    opacity: 1;
+}
+
+.command-action-btn {
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    transition: all 0.2s;
+}
+
+.command-action-btn:hover {
+    background: rgba(0, 0, 0, 0.1);
+    transform: scale(1.1);
+}
+
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 10000;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background: var(--ios-card);
+    border-radius: 12px;
+    padding: 20px;
+    width: 90%;
+    max-width: 400px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+
+.modal-content h3 {
+    margin: 0 0 15px 0;
+    font-size: 16px;
+    color: var(--text-primary);
+}
+
+.modal-content .form-group {
+    margin-bottom: 15px;
+}
+
+.modal-content .form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.modal-content .form-group input {
+    width: 100%;
+    padding: 8px 12px;
+    background: var(--ios-input-bg);
+    border: 1px solid var(--ios-separator);
+    border-radius: 8px;
+    font-size: 13px;
+    color: var(--text-primary);
+}
+
+.modal-content .form-group input:focus {
+    outline: none;
+    border-color: var(--ios-blue);
+}
+
+.modal-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.modal-actions .btn {
+    flex: 1;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.modal-actions .btn:first-child {
+    background: var(--ios-gray-light);
+    color: var(--text-primary);
+}
+
+.modal-actions .btn:first-child:hover {
+    background: var(--ios-separator);
+}
+
+.modal-actions .btn-primary {
+    background: var(--ios-blue);
+    color: white;
+}
+
+.modal-actions .btn-primary:hover {
+    opacity: 0.9;
+}
+
+.endpoint-title-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.toggle-icon {
+    font-size: 12px;
+    color: var(--text-secondary);
+    transition: transform 0.2s;
+}

package/src/server/views/dashboard.html

@@ -76,14 +76,32 @@
                     </button>
                 </div>
 
-                <!-- Quick Actions -->
-                <div class="endpoint-card"
-                    style="display: flex; gap: 10px; align-items: center; justify-content: space-between;">
-                    <span style="font-weight: 600;">Tools:</span>
-                    <button class="btn" onclick="createNewTerminal()"
-                        style="background: #252526; border: 1px solid #444;">
-                        <span>🖥️</span> New Terminal
-                    </button>
+                <!-- Saved Commands Panel -->
+                <div class="endpoint-card saved-commands-panel">
+                    <div class="saved-commands-header">
+                        <div class="saved-commands-title">
+                            <span class="command-icon-header">💾</span>
+                            <span>Saved Commands</span>
+                        </div>
+                        <div class="saved-commands-actions">
+                            <button class="btn-new-terminal" onclick="createNewTerminal()" title="New Terminal">
+                                🖥️
+                            </button>
+                            <button class="btn-add-command" onclick="openAddCommandModal()" title="Add Command">
+                                ➕
+                            </button>
+                        </div>
+                    </div>
+                    <div class="saved-commands-content" id="saved-commands-content">
+                        <div id="commands-list" class="commands-list">
+                            <!-- Commands will be rendered here -->
+                        </div>
+                        <div class="empty-state" id="commands-empty-state" style="display: none;">
+                            <p style="color: #888; text-align: center; padding: 15px 10px; font-size: 12px; margin: 0;">
+                                Click ➕ to add a command
+                            </p>
+                        </div>
+                    </div>
                 </div>
 
                 <!-- System Prompt Section -->
@@ -280,6 +298,36 @@
 
     <div id="floating-terminals-layer"></div>
     <div class="toast" id="toast"></div>
+    
+    <!-- Add/Edit Command Modal -->
+    <div id="command-modal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h3 id="modal-title">Add Command</h3>
+            <form id="command-form">
+                <div class="form-group">
+                    <label>Icon (emoji)</label>
+                    <input type="text" id="command-icon" placeholder="🚀" maxlength="2" required>
+                </div>
+                <div class="form-group">
+                    <label>Name</label>
+                    <input type="text" id="command-name" placeholder="Run Dev Server" required>
+                </div>
+                <div class="form-group">
+                    <label>Command</label>
+                    <input type="text" id="command-text" placeholder="npm run dev" required>
+                </div>
+                <div class="modal-actions">
+                    <button type="button" class="btn" onclick="closeCommandModal()">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    
+    <!-- Smart Log Copy Utilities -->
+    <script src="/js/utils/log-utils.js"></script>
+    <script src="/js/utils/smart-copy-engine.js"></script>
+    
     <script type="module" src="/js/main.js"></script>
 </body>