vg-coder-cli 2.0.24 → 2.0.26

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

@@ -46,12 +46,34 @@ export function createNewTerminal() {
     wrapper.style.left = `${400 + offset}px`;
     wrapper.style.zIndex = ++maxZIndex;
 
-    // HTML Template - Đã thêm sự kiện onclick cho nút Minimize
+    // HTML Template - Đã thêm Copy Buttons
     wrapper.innerHTML = `
         <div class="terminal-header" id="header-${termId}" ondblclick="window.toggleMinimize('${termId}')">
             <div class="terminal-title-group">
                 <span>>_</span> Terminal (${activeTerminals.size + 1})
             </div>
+            
+            <!-- Copy Button Group -->
+            <div class="terminal-copy-group" id="copy-group-${termId}">
+                <button class="copy-btn copy-smart" onclick="window.copyTerminalLog('${termId}', 'smart')" title="Smart Copy (optimized for 3000 tokens)">
+                    🧠 <span class="token-badge" id="badge-smart-${termId}">0</span>
+                </button>
+                <button class="copy-btn copy-errors" onclick="window.copyTerminalLog('${termId}', 'errors')" title="Errors Only (with context)">
+                    ⚠️ <span class="token-badge" id="badge-errors-${termId}">0</span>
+                </button>
+                <button class="copy-btn copy-recent" onclick="window.copyTerminalLog('${termId}', 'recent')" title="Recent 200 lines">
+                    📄 <span class="token-badge" id="badge-recent-${termId}">0</span>
+                </button>
+                <button class="copy-btn copy-all" onclick="window.copyTerminalLog('${termId}', 'all')" title="Copy All">
+                    📦 <span class="token-badge" id="badge-all-${termId}">0</span>
+                </button>
+            </div>
+            
+            <!-- Clear Button -->
+            <button class="term-btn-clear" onclick="window.clearTerminal('${termId}')" title="Clear Terminal">
+                🗑️
+            </button>
+            
             <div class="terminal-controls">
                 <button class="term-btn minimize" onclick="window.toggleMinimize('${termId}')" title="Minimize/Restore">-</button>
                 <button class="term-btn maximize" onclick="window.toggleMaximize('${termId}')" title="Maximize">+</button>
@@ -111,15 +133,90 @@ export function createNewTerminal() {
     // 4. Make Draggable
     makeDraggable(wrapper, document.getElementById(`header-${termId}`));
 
-    // 5. Store Session
-    activeTerminals.set(termId, { term, fitAddon, element: wrapper });
+    // 5. Store Session with log buffer
+    activeTerminals.set(termId, { 
+        term, 
+        fitAddon, 
+        element: wrapper,
+        logBuffer: [], // Local buffer for quick access
+        partialLine: '' // Buffer for incomplete lines
+    });
+
+    // 6. Setup log buffer capture and token count updates
+    // Listen to terminal's onData event (this fires for user input)
+    // We need to listen to the actual output from the backend
+    socket.on('terminal:data', ({ termId: dataTermId, data }) => {
+        if (dataTermId !== termId) return;
+        
+        const session = activeTerminals.get(termId);
+        if (!session) return;
 
-    // 6. Init Backend Process
-    socket.emit('terminal:init', { 
-        termId, 
-        cols: term.cols, 
-        rows: term.rows 
+        // Strip ANSI codes
+        const cleanData = data.replace(
+            // eslint-disable-next-line no-control-regex
+            /\x1b\[[0-9;]*[a-zA-Z]|\x1b\][^\x07]*\x07|\x1b\][^\x1b]*\x1b\\/g,
+            ''
+        );
+        
+        // Accumulate partial line
+        session.partialLine += cleanData;
+        
+        // Split by newlines and process complete lines
+        const lines = session.partialLine.split(/\r?\n/);
+        
+        // Keep the last incomplete line in partialLine
+        session.partialLine = lines.pop() || '';
+        
+        // Add complete lines to buffer
+        lines.forEach(line => {
+            if (line.trim().length > 0) {
+                session.logBuffer.push(line);
+                // Maintain max 10000 lines
+                if (session.logBuffer.length > 10000) {
+                    session.logBuffer.shift();
+                }
+            }
+        });
+        
+        // Update token counts (debounced)
+        if (lines.length > 0) {
+            updateTokenCounts(termId);
+        }
     });
+
+    // 7. Get current project ID from API
+    let currentProjectId = null;
+    fetch('/api/projects')
+        .then(res => res.json())
+        .then(data => {
+            currentProjectId = data.activeProjectId;
+            
+            // Store in session
+            activeTerminals.get(termId).projectId = currentProjectId;
+            
+            // Init Backend Process with projectId
+            socket.emit('terminal:init', { 
+                termId, 
+                cols: term.cols, 
+                rows: term.rows,
+                projectId: currentProjectId
+            });
+        })
+        .catch(err => {
+            console.error('Failed to get project info:', err);
+            // Fallback without projectId
+            socket.emit('terminal:init', { 
+                termId, 
+                cols: term.cols, 
+                rows: term.rows
+            });
+        });
+    
+    // 8. Initial token count update
+    setTimeout(() => updateTokenCounts(termId), 100);
+    
+    // Return termId so caller can use it
+    return termId;
 }
 
 /**
@@ -245,8 +342,183 @@ function makeDraggable(element, handle) {
     }
 }
 
+/**
+ * Copy terminal log with specified strategy
+ * @param {string} termId - Terminal ID
+ * @param {string} strategy - 'smart' | 'errors' | 'recent' | 'all'
+ */
+async function copyTerminalLog(termId, strategy) {
+    const session = activeTerminals.get(termId);
+    if (!session || !session.logBuffer || session.logBuffer.length === 0) {
+        showToast('⚠️ No logs to copy', 'warning');
+        return;
+    }
+
+    try {
+        // Use SmartCopyEngine to generate content
+        let result;
+        const lines = session.logBuffer;
+
+        switch (strategy) {
+            case 'smart':
+                result = window.SmartCopyEngine.generateSmartCopy(lines, 3000);
+                break;
+            case 'errors':
+                result = window.SmartCopyEngine.generateErrorsOnly(lines);
+                break;
+            case 'recent':
+                result = window.SmartCopyEngine.generateRecent(lines, 200);
+                break;
+            case 'all':
+                result = window.SmartCopyEngine.generateCopyAll(lines);
+                break;
+            default:
+                result = window.SmartCopyEngine.generateSmartCopy(lines, 3000);
+        }
+
+        // Copy to clipboard
+        await navigator.clipboard.writeText(result.content);
+
+        // Show success toast with details
+        const strategyNames = {
+            smart: '🧠 Smart',
+            errors: '⚠️ Errors',
+            recent: '📄 Recent',
+            all: '📦 All'
+        };
+
+        let message = `✅ Copied ${result.tokens} tokens (${strategyNames[strategy]})`;
+        
+        if (result.stats && result.stats.message) {
+            message += `\n${result.stats.message}`;
+        }
+
+        if (result.warning) {
+            message += `\n${result.warning}`;
+        }
+
+        showToast(message, 'success');
+
+    } catch (error) {
+        console.error('Copy failed:', error);
+        showToast('❌ Failed to copy logs', 'error');
+    }
+}
+
+/**
+ * Update token count badges for a terminal
+ * Debounced to avoid excessive updates
+ */
+let updateTokenCountsTimeout = null;
+function updateTokenCounts(termId) {
+    // Debounce updates
+    clearTimeout(updateTokenCountsTimeout);
+    updateTokenCountsTimeout = setTimeout(() => {
+        const session = activeTerminals.get(termId);
+        if (!session || !session.logBuffer) return;
+
+        const analysis = window.SmartCopyEngine.analyzeLogBuffer(session.logBuffer);
+
+        // Update badges
+        updateBadge(`badge-smart-${termId}`, analysis.smart.tokens);
+        updateBadge(`badge-errors-${termId}`, analysis.errors.tokens);
+        updateBadge(`badge-recent-${termId}`, analysis.recent.tokens);
+        updateBadge(`badge-all-${termId}`, analysis.all.tokens);
+    }, 500); // 500ms debounce
+}
+
+/**
+ * Update a single badge element
+ */
+function updateBadge(badgeId, tokens) {
+    const badge = document.getElementById(badgeId);
+    if (badge) {
+        badge.textContent = formatTokenCount(tokens);
+    }
+}
+
+/**
+ * Format token count for display
+ */
+function formatTokenCount(tokens) {
+    if (tokens === 0) return '0';
+    if (tokens < 1000) return tokens.toString();
+    if (tokens < 10000) return (tokens / 1000).toFixed(1) + 'k';
+    return Math.floor(tokens / 1000) + 'k';
+}
+
+/**
+ * Show toast notification
+ */
+function showToast(message, type = 'info') {
+    const toast = document.getElementById('toast');
+    if (!toast) return;
+
+    toast.textContent = message;
+    toast.className = 'toast show';
+    
+    if (type === 'success') {
+        toast.style.background = '#28a745';
+    } else if (type === 'error') {
+        toast.style.background = '#dc3545';
+    } else if (type === 'warning') {
+        toast.style.background = '#ffc107';
+        toast.style.color = '#000';
+    } else {
+        toast.style.background = '#007bff';
+    }
+
+    setTimeout(() => {
+        toast.classList.remove('show');
+    }, 3000);
+}
+
+/**
+ * Clear terminal display and log buffer
+ * @param {string} termId - Terminal ID
+ */
+function clearTerminal(termId) {
+    const session = activeTerminals.get(termId);
+    if (!session) return;
+
+    // Clear the xterm display
+    session.term.clear();
+    
+    // Clear the log buffer
+    session.logBuffer = [];
+    session.partialLine = '';
+    
+    // Reset token counts to 0
+    updateBadge(`badge-smart-${termId}`, 0);
+    updateBadge(`badge-errors-${termId}`, 0);
+    updateBadge(`badge-recent-${termId}`, 0);
+    updateBadge(`badge-all-${termId}`, 0);
+    
+    // Show toast notification
+    showToast('🗑️ Terminal cleared', 'info');
+}
+
+/**
+ * Update terminal visibility based on active project
+ * @param {string} activeProjectId - Active project ID
+ */
+function updateTerminalVisibility(activeProjectId) {
+    activeTerminals.forEach((session, termId) => {
+        const shouldShow = !session.projectId || session.projectId === activeProjectId;
+        session.element.style.display = shouldShow ? 'block' : 'none';
+    });
+    
+    const visibleCount = Array.from(activeTerminals.values())
+        .filter(s => s.element.style.display !== 'none').length;
+    
+    console.log(`Updated terminal visibility: ${visibleCount} visible for project ${activeProjectId}`);
+}
+
 // Global Exports for HTML onclick
 window.createNewTerminal = createNewTerminal;
 window.closeTerminal = closeTerminalUI;
 window.toggleMinimize = toggleMinimize;
 window.toggleMaximize = toggleMaximize;
+window.copyTerminalLog = copyTerminalLog;
+window.clearTerminal = clearTerminal;
+window.updateTerminalVisibility = updateTerminalVisibility;

package/src/server/views/js/main.js

@@ -9,6 +9,8 @@ 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';
+import { initSavedCommands } from './features/commands.js';
+import { initProjectSwitcher } from './features/project-switcher.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Load system prompt text
@@ -43,12 +45,52 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Initialize Resize Handler
     initResizeHandler();
     
+    // Initialize Saved Commands
+    initSavedCommands();
+    
+    // Initialize Project Switcher
+    await initProjectSwitcher();
+    
     // Set default tab to AI Assistant
     if (window.switchTab) {
         window.switchTab('ai-assistant');
     }
 });
 
+// Global event handler for project switches
+window.addEventListener('project-switched', async (event) => {
+    const { projectId, projectName, project } = event.detail;
+    console.log(`Project switched to: ${projectName}`);
+    
+    // Reload project info
+    await loadProjectInfo();
+    
+    // Filter terminal visibility (show only terminals for active project)
+    if (window.updateTerminalVisibility) {
+        window.updateTerminalVisibility(projectId);
+    }
+    
+    // Reload saved commands for new project
+    if (window.loadSavedCommands) {
+        await window.loadSavedCommands();
+    }
+    
+    // Reset tree view (hide it)
+    const treeContainer = document.getElementById('structure-tree');
+    if (treeContainer) {
+        treeContainer.style.display = 'none';
+    }
+    
+    // Clear tree content
+    const treeContent = document.getElementById('tree-content');
+    if (treeContent) {
+        treeContent.innerHTML = '';
+    }
+    
+    // TODO: Refresh other context-dependent components
+    // - Git view refresh
+});
+
 async function checkServerStatus() {
     const statusEl = document.getElementById('status');
     const isHealthy = await checkHealth();
@@ -169,3 +211,26 @@ window.copyChromeUrl = function(event) {
         }, 2000);
     });
 }
+
+window.stopServer = async function() {
+    if (!confirm('Are you sure you want to stop the server?')) {
+        return;
+    }
+    
+    try {
+        await fetch('/api/shutdown', { method: 'POST' });
+        showToast('Server stopped successfully', 'success');
+        
+        // Show a message that server is stopped
+        setTimeout(() => {
+            document.body.innerHTML = `
+                <div style="display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; gap: 20px;">
+                    <h2>🛑 Server Stopped</h2>
+                    <p>You can close this tab now.</p>
+                </div>
+            `;
+        }, 1000);
+    } catch (error) {
+        console.error('Failed to stop server:', error);
+    }
+}

package/src/server/views/js/utils/log-utils.js

@@ -0,0 +1,164 @@
+/**
+ * Log Utilities for Smart Log Copy Feature
+ * Provides ANSI stripping, token estimation, and log classification
+ */
+
+/**
+ * Strip ANSI escape codes from text
+ * Removes color codes, cursor movements, and other terminal control sequences
+ * @param {string} text - Text with potential ANSI codes
+ * @returns {string} Clean text without ANSI codes
+ */
+function stripAnsiCodes(text) {
+    if (!text) return '';
+    
+    // Remove ANSI escape sequences
+    // Pattern matches: ESC [ ... m (colors, styles)
+    //                  ESC [ ... H/J/K (cursor movements, clear)
+    //                  ESC ] ... BEL/ST (operating system commands)
+    return text.replace(
+        // eslint-disable-next-line no-control-regex
+        /\x1b\[[0-9;]*[a-zA-Z]|\x1b\][^\x07]*\x07|\x1b\][^\x1b]*\x1b\\/g,
+        ''
+    );
+}
+
+/**
+ * Estimate token count from text
+ * Uses approximation: 1 token ≈ 4 characters (for English/code)
+ * This is a simplified estimation and may vary ±20% from actual tokenization
+ * @param {string} text - Text to estimate
+ * @returns {number} Estimated token count
+ */
+function estimateTokens(text) {
+    if (!text) return 0;
+    
+    const chars = text.length;
+    const words = text.split(/\s+/).filter(w => w.length > 0).length;
+    
+    // Use the maximum of two methods for better accuracy:
+    // Method 1: 1 token ≈ 0.75 words
+    // Method 2: 1 token ≈ 4 characters
+    const tokensFromWords = Math.ceil(words / 0.75);
+    const tokensFromChars = Math.ceil(chars / 4);
+    
+    return Math.max(tokensFromWords, tokensFromChars);
+}
+
+/**
+ * Classify a log line by severity
+ * @param {string} line - Single log line
+ * @returns {'ERROR'|'WARNING'|'NORMAL'} Classification
+ */
+function classifyLogLine(line) {
+    if (!line) return 'NORMAL';
+    
+    const lowerLine = line.toLowerCase();
+    
+    // Error patterns
+    const errorPatterns = [
+        'error', 'err:', 'exception', 'fatal', 'failed', 'failure',
+        'cannot', 'could not', 'unable to', 'not found', '404',
+        'stack trace', 'traceback', 'segmentation fault', 'core dumped'
+    ];
+    
+    // Warning patterns
+    const warningPatterns = [
+        'warn', 'warning', 'deprecated', 'deprecation',
+        'caution', 'attention', 'notice'
+    ];
+    
+    // Check for errors first (higher priority)
+    if (errorPatterns.some(pattern => lowerLine.includes(pattern))) {
+        return 'ERROR';
+    }
+    
+    // Then check for warnings
+    if (warningPatterns.some(pattern => lowerLine.includes(pattern))) {
+        return 'WARNING';
+    }
+    
+    return 'NORMAL';
+}
+
+/**
+ * Extract error and warning lines with context
+ * @param {string[]} lines - Array of log lines
+ * @param {number} contextLines - Number of lines before/after to include (default: 2)
+ * @returns {Object[]} Array of {lineIndex, line, type, context}
+ */
+function extractErrors(lines, contextLines = 2) {
+    const errors = [];
+    const includedIndices = new Set();
+    
+    // First pass: identify error/warning lines
+    lines.forEach((line, index) => {
+        const type = classifyLogLine(line);
+        if (type === 'ERROR' || type === 'WARNING') {
+            // Include the error line and context
+            const startIndex = Math.max(0, index - contextLines);
+            const endIndex = Math.min(lines.length - 1, index + contextLines);
+            
+            for (let i = startIndex; i <= endIndex; i++) {
+                includedIndices.add(i);
+            }
+            
+            errors.push({
+                lineIndex: index,
+                line,
+                type,
+                contextStart: startIndex,
+                contextEnd: endIndex
+            });
+        }
+    });
+    
+    // Second pass: build result with context
+    const result = [];
+    const sortedIndices = Array.from(includedIndices).sort((a, b) => a - b);
+    
+    sortedIndices.forEach(index => {
+        result.push({
+            lineIndex: index,
+            line: lines[index],
+            type: classifyLogLine(lines[index])
+        });
+    });
+    
+    return result;
+}
+
+/**
+ * Format file size in human-readable format
+ * @param {number} bytes - Size in bytes
+ * @returns {string} Formatted size
+ */
+function formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+// Export for Node.js
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+        stripAnsiCodes,
+        estimateTokens,
+        classifyLogLine,
+        extractErrors,
+        formatBytes
+    };
+}
+
+// Export for browser
+if (typeof window !== 'undefined') {
+    window.LogUtils = {
+        stripAnsiCodes,
+        estimateTokens,
+        classifyLogLine,
+        extractErrors,
+        formatBytes
+    };
+}