vg-coder-cli 2.0.24 → 2.0.25

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

@@ -0,0 +1,228 @@
+/**
+ * Saved Commands Feature
+ * Manages saved terminal commands that can be quickly executed
+ */
+
+let savedCommands = [];
+let editingCommandId = null;
+
+/**
+ * Initialize saved commands on page load
+ */
+export async function initSavedCommands() {
+    await loadSavedCommands();
+    renderCommands();
+}
+
+/**
+ * Load saved commands from backend
+ */
+async function loadSavedCommands() {
+    try {
+        const response = await fetch('/api/commands/load');
+        const data = await response.json();
+        savedCommands = data.commands || [];
+    } catch (error) {
+        console.error('Failed to load commands:', error);
+        savedCommands = [];
+    }
+}
+
+/**
+ * Save commands to backend (debounced)
+ */
+let saveTimeout = null;
+async function saveCommands() {
+    clearTimeout(saveTimeout);
+    saveTimeout = setTimeout(async () => {
+        try {
+            const response = await fetch('/api/commands/save', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ commands: savedCommands })
+            });
+            const data = await response.json();
+            if (data.success) {
+                console.log(`✓ Saved ${data.count} commands`);
+            }
+        } catch (error) {
+            console.error('Failed to save commands:', error);
+        }
+    }, 500);
+}
+
+/**
+ * Render commands in UI
+ */
+function renderCommands() {
+    const container = document.getElementById('commands-list');
+    const emptyState = document.getElementById('commands-empty-state');
+    
+    if (!container) return;
+
+    if (savedCommands.length === 0) {
+        container.innerHTML = '';
+        if (emptyState) emptyState.style.display = 'block';
+        return;
+    }
+
+    if (emptyState) emptyState.style.display = 'none';
+
+    container.innerHTML = savedCommands.map(cmd => `
+        <div class="command-card" onclick="window.runSavedCommand('${cmd.id}')">
+            <div class="command-card-main">
+                <span class="command-icon">${cmd.icon}</span>
+                <div class="command-info">
+                    <div class="command-name">${escapeHtml(cmd.name)}</div>
+                    <div class="command-text">${escapeHtml(cmd.command)}</div>
+                </div>
+            </div>
+            <div class="command-card-actions">
+                <button class="command-action-btn" onclick="window.editCommand('${cmd.id}'); event.stopPropagation();" title="Edit">
+                    ✏️
+                </button>
+                <button class="command-action-btn" onclick="window.deleteCommand('${cmd.id}'); event.stopPropagation();" title="Delete">
+                    🗑️
+                </button>
+            </div>
+        </div>
+    `).join('');
+}
+
+/**
+ * Open add command modal
+ */
+function openAddCommandModal() {
+    editingCommandId = null;
+    document.getElementById('modal-title').textContent = 'Add Command';
+    document.getElementById('command-icon').value = '🚀';
+    document.getElementById('command-name').value = '';
+    document.getElementById('command-text').value = '';
+    document.getElementById('command-modal').style.display = 'flex';
+    document.getElementById('command-name').focus();
+}
+
+/**
+ * Open edit command modal
+ */
+function editCommand(id) {
+    const command = savedCommands.find(c => c.id === id);
+    if (!command) return;
+
+    editingCommandId = id;
+    document.getElementById('modal-title').textContent = 'Edit Command';
+    document.getElementById('command-icon').value = command.icon;
+    document.getElementById('command-name').value = command.name;
+    document.getElementById('command-text').value = command.command;
+    document.getElementById('command-modal').style.display = 'flex';
+    document.getElementById('command-name').focus();
+}
+
+/**
+ * Close command modal
+ */
+function closeCommandModal() {
+    document.getElementById('command-modal').style.display = 'none';
+    editingCommandId = null;
+}
+
+/**
+ * Handle command form submit
+ */
+function handleCommandFormSubmit(event) {
+    event.preventDefault();
+
+    const icon = document.getElementById('command-icon').value.trim();
+    const name = document.getElementById('command-name').value.trim();
+    const command = document.getElementById('command-text').value.trim();
+
+    if (!icon || !name || !command) return;
+
+    if (editingCommandId) {
+        // Edit existing
+        const index = savedCommands.findIndex(c => c.id === editingCommandId);
+        if (index !== -1) {
+            savedCommands[index] = { ...savedCommands[index], icon, name, command };
+        }
+    } else {
+        // Add new
+        savedCommands.push({
+            id: 'cmd_' + Date.now(),
+            icon,
+            name,
+            command
+        });
+    }
+
+    saveCommands();
+    renderCommands();
+    closeCommandModal();
+}
+
+/**
+ * Delete command with confirmation
+ */
+function deleteCommand(id) {
+    const command = savedCommands.find(c => c.id === id);
+    if (!command) return;
+
+    if (confirm(`Delete command "${command.name}"?`)) {
+        savedCommands = savedCommands.filter(c => c.id !== id);
+        saveCommands();
+        renderCommands();
+    }
+}
+
+/**
+ * Run saved command - open terminal and copy command to clipboard
+ */
+function runSavedCommand(id) {
+    const command = savedCommands.find(c => c.id === id);
+    if (!command) return;
+
+    // Create new terminal
+    if (typeof window.createNewTerminal === 'function') {
+        window.createNewTerminal();
+    }
+    
+    // Copy command to clipboard
+    navigator.clipboard.writeText(command.command).then(() => {
+        // Show toast notification
+        if (typeof window.showToast === 'function') {
+            window.showToast(`📋 Copied: ${command.command}`, 'success');
+        }
+    }).catch(err => {
+        console.error('Failed to copy command:', err);
+        if (typeof window.showToast === 'function') {
+            window.showToast('Failed to copy command', 'error');
+        }
+    });
+}
+
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Global exports for HTML onclick
+window.openAddCommandModal = openAddCommandModal;
+window.editCommand = editCommand;
+window.closeCommandModal = closeCommandModal;
+window.deleteCommand = deleteCommand;
+window.runSavedCommand = runSavedCommand;
+
+// Setup form submit handler
+if (typeof document !== 'undefined') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const form = document.getElementById('command-form');
+        if (form) {
+            form.addEventListener('submit', handleCommandFormSubmit);
+        }
+    });
+}
+
+export { openAddCommandModal, editCommand, deleteCommand, runSavedCommand };

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,69 @@ 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;
+
+        // 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);
+        }
+    });
 
-    // 6. Init Backend Process
+    // 7. Init Backend Process
     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 +321,166 @@ 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');
+}
+
 // Global Exports for HTML onclick
 window.createNewTerminal = createNewTerminal;
 window.closeTerminal = closeTerminalUI;
 window.toggleMinimize = toggleMinimize;
 window.toggleMaximize = toggleMaximize;
+window.copyTerminalLog = copyTerminalLog;
+window.clearTerminal = clearTerminal;

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

@@ -9,6 +9,7 @@ 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';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Load system prompt text
@@ -43,6 +44,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Initialize Resize Handler
     initResizeHandler();
     
+    // Initialize Saved Commands
+    initSavedCommands();
+    
     // Set default tab to AI Assistant
     if (window.switchTab) {
         window.switchTab('ai-assistant');

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