vg-coder-cli 2.0.7 → 2.0.9

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

@@ -0,0 +1,221 @@
+import { getStructure, analyzeProject, copyToClipboard } from '../api.js';
+import { showToast, showLoading, resetButton, showResponse, formatNumber, showCopiedState } from '../utils.js';
+
+// Global variable to store current structure data
+let currentStructureData = null;
+
+/**
+ * Handle Structure button click logic
+ */
+export async function handleStructureView(event) {
+    const btn = event.target.closest('.btn');
+    const pathInput = document.getElementById('structure-path');
+    const treeContainer = document.getElementById('structure-tree');
+    const treeContent = document.getElementById('tree-content');
+    const errorContainer = document.getElementById('structure-response');
+    
+    const path = pathInput.value;
+
+    showLoading(btn, btn.innerHTML);
+    treeContainer.style.display = 'none';
+    errorContainer.style.display = 'none';
+
+    try {
+        const data = await getStructure(path);
+        currentStructureData = data.structure;
+
+        // Render Tree HTML using recursive function
+        treeContent.innerHTML = generateTreeHtml(data.structure);
+        
+        // Initial token update
+        updateTotalTokens();
+        
+        treeContainer.style.display = 'block';
+        showToast('Tải cấu trúc thành công', 'success');
+
+    } catch (err) {
+        showResponse('structure-response', { error: err.message }, true);
+        showToast('Lỗi: ' + err.message, 'error');
+    }
+    
+    resetButton(btn);
+}
+
+/**
+ * Toggle folder collapse/expand
+ * Only triggers if clicked on row but NOT on checkbox
+ */
+export function handleToggleFolder(event) {
+    if (event.target.type === 'checkbox') return;
+
+    // Find closest parent LI
+    const li = event.currentTarget.closest('.tree-li');
+    if (li && li.classList.contains('has-children')) {
+        li.classList.toggle('collapsed');
+    }
+}
+
+/**
+ * Handle Checkbox Logic (Parent <-> Child sync) & Update Token Total
+ */
+export function handleCheckboxChange(event) {
+    event.stopPropagation();
+    const checkbox = event.target;
+    const isChecked = checkbox.checked;
+    
+    // 1. Sync Children: If this is a folder, update all children checkboxes
+    const li = checkbox.closest('.tree-li');
+    if (li) {
+        const childrenCheckboxes = li.querySelectorAll('.tree-checkbox');
+        childrenCheckboxes.forEach(child => {
+            child.checked = isChecked;
+        });
+    }
+
+    // 2. Recalculate Tokens
+    updateTotalTokens();
+}
+
+/**
+ * Calculate total tokens of CHECKED files only
+ */
+function updateTotalTokens() {
+    // Select all checked checkboxes that are FILES (have data-tokens)
+    const checkedFiles = document.querySelectorAll('.tree-checkbox[data-type="file"]:checked');
+    
+    let total = 0;
+    checkedFiles.forEach(box => {
+        const tokens = parseInt(box.dataset.tokens || '0');
+        total += tokens;
+    });
+
+    // Update Badge
+    const badge = document.getElementById('total-tokens-badge');
+    badge.textContent = `${formatNumber(total)} tokens`;
+    
+    // Optional: Visual styling if 0
+    if (total === 0) {
+        badge.style.color = 'var(--ios-gray)';
+    } else {
+        badge.style.color = ''; // reset to default
+    }
+}
+
+/**
+ * Copy Content of Selected Files (via API)
+ */
+export async function handleCopySelected(event) {
+    const btn = event.target.closest('.btn-copy') || event.target.closest('.btn-icon-head');
+    const icon = document.getElementById('copy-structure-icon') || btn; 
+    const text = document.getElementById('copy-structure-text') || { textContent: '' }; 
+
+    // 1. Get all checked FILE paths
+    const checkedBoxes = document.querySelectorAll('.tree-checkbox[data-type="file"]:checked');
+    const checkedPaths = [];
+    
+    checkedBoxes.forEach(box => {
+        if (box.dataset.path) {
+            checkedPaths.push(box.dataset.path);
+        }
+    });
+
+    if (checkedPaths.length === 0) {
+        showToast('Chưa chọn file nào', 'error');
+        return;
+    }
+
+    // Save original button state
+    const originalText = btn.innerHTML;
+    if (btn.classList.contains('btn-copy')) {
+        showLoading(btn, btn.innerHTML);
+    } else {
+        // For header icon, just show visual feedback
+        btn.style.opacity = '0.5';
+    }
+
+    try {
+        const path = document.getElementById('structure-path').value;
+        
+        // 2. Call Analyze API with specific files
+        const content = await analyzeProject(path, checkedPaths);
+
+        // 3. Copy to clipboard
+        await copyToClipboard(content);
+
+        // UI Feedback
+        if (btn.classList.contains('btn-copy')) {
+            showCopiedState(btn, icon, text, '📋', 'Copy Selected');
+            resetButton(btn);
+        } else {
+            // Header icon feedback
+            btn.style.opacity = '1';
+            const originalIcon = btn.textContent;
+            btn.textContent = '✓';
+            setTimeout(() => btn.textContent = originalIcon, 2000);
+        }
+        
+        showToast(`Đã copy nội dung ${checkedPaths.length} file!`, 'success');
+
+    } catch (err) {
+        resetButton(btn);
+        if (!btn.classList.contains('btn-copy')) btn.style.opacity = '1';
+        showToast('Lỗi copy: ' + err.message, 'error');
+    }
+}
+
+/**
+ * Recursive function to generate Tree HTML with Checkboxes
+ */
+function generateTreeHtml(node) {
+    if (!node) return '';
+
+    const isDir = node.type === 'directory';
+    const hasChildren = isDir && node.children && node.children.length > 0;
+    
+    // Determine Token Color
+    const tokens = node.tokens || 0;
+    let tokenClass = 'token-low';
+    if (tokens > 5000) tokenClass = 'token-high';
+    else if (tokens > 2000) tokenClass = 'token-med';
+
+    // Icon
+    const icon = isDir ? (hasChildren ? '📁' : '📂') : '📄';
+    const arrow = hasChildren ? '▼' : '';
+    const liClass = `tree-li ${hasChildren ? 'has-children' : ''}`;
+    
+    // Build HTML
+    let html = `<li class="${liClass}">`;
+    
+    const clickAttr = hasChildren ? 'onclick="toggleFolder(event)"' : '';
+    
+    // Add data-tokens and data-type for client-side calculation
+    
+    html += `
+        <div class="tree-item-row" ${clickAttr}>
+            <span class="arrow">${arrow}</span>
+            <input type="checkbox" class="tree-checkbox" 
+                   data-path="${node.relativePath || node.path}" 
+                   data-tokens="${tokens}"
+                   data-type="${node.type}"
+                   checked 
+                   onclick="handleCheckboxChange(event)">
+            <span class="tree-icon">${icon}</span>
+            <span class="tree-name">${node.name}</span>
+            <span class="token-badge ${tokenClass}">${formatNumber(tokens)}</span>
+        </div>
+    `;
+
+    // Children recursion
+    if (hasChildren) {
+        html += '<ul class="tree-ul">';
+        // Sort: Folders first, then files
+        node.children.forEach(child => {
+            html += generateTreeHtml(child);
+        });
+        html += '</ul>';
+    }
+
+    html += '</li>';
+    
+    return isDir ? `<ul class="tree-ul">${html}</ul>` : html; 
+}

package/src/server/views/js/handlers.js

@@ -0,0 +1,182 @@
+// Event Handlers & Business Logic
+import { SYSTEM_PROMPT } from './config.js';
+import { analyzeProject, executeScript, copyToClipboard, readFromClipboard } from './api.js';
+import { showToast, showLoading, resetButton, showResponse, showCopiedState } from './utils.js';
+// Import dedicated feature handlers
+import { handleStructureView, handleToggleFolder, handleCheckboxChange, handleCopySelected } from './features/structure.js';
+
+let lastAnalyzeResult = null;
+
+// ==========================================
+// SYSTEM PROMPT HANDLERS
+// ==========================================
+
+export function toggleSystemPrompt() {
+    const content = document.getElementById('system-prompt-content');
+    const icon = document.getElementById('toggle-icon');
+    content.classList.toggle('open');
+    icon.classList.toggle('open');
+}
+
+export function copySystemPromptFromHeader(event) {
+    event.stopPropagation();
+    const btn = event.currentTarget;
+    btn.textContent = '✓';
+    navigator.clipboard.writeText(SYSTEM_PROMPT).then(() => {
+        showToast('Đã copy System Prompt', 'success');
+        setTimeout(() => btn.textContent = '📋', 2000);
+    }).catch(err => {
+        showToast('Lỗi copy: ' + err.message, 'error');
+        btn.textContent = '📋';
+    });
+}
+
+export function copySystemPrompt(event) {
+    const copyBtn = event.target.closest('.btn-copy');
+    const copyIcon = document.getElementById('copy-icon');
+    const copyText = document.getElementById('copy-text');
+
+    navigator.clipboard.writeText(SYSTEM_PROMPT).then(() => {
+        showCopiedState(copyBtn, copyIcon, copyText, '📋', 'Copy System Prompt');
+        showToast('Đã copy System Prompt', 'success');
+    }).catch(err => showToast('Lỗi copy: ' + err.message, 'error'));
+}
+
+// ==========================================
+// ANALYZE HANDLERS
+// ==========================================
+
+export async function testAnalyze(event) {
+    const btn = event.target.closest('.btn') || event.target.closest('.btn-icon-head');
+    const path = document.getElementById('analyze-path').value;
+
+    showLoading(btn, btn.innerHTML);
+    try {
+        const text = await analyzeProject(path);
+        lastAnalyzeResult = text;
+
+        const blob = new Blob([text], { type: 'text/plain' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'project.txt';
+        a.click();
+
+        showResponse('analyze-response', {
+            success: true,
+            message: 'File downloaded!',
+            files: text.split('\n').filter(l => l.includes('===== FILE:')).length,
+            size: (text.length / 1024).toFixed(2) + ' KB'
+        });
+        showToast('Đã download file', 'success');
+    } catch (err) {
+        showResponse('analyze-response', { error: err.message }, true);
+        showToast('Lỗi: ' + err.message, 'error');
+    }
+    resetButton(btn);
+}
+
+export async function copyAnalyzeResult(event) {
+    const copyBtn = event.target.closest('.btn-copy');
+    const copyIcon = document.getElementById('analyze-copy-icon');
+    const copyText = document.getElementById('analyze-copy-text');
+
+    if (!lastAnalyzeResult) {
+        const path = document.getElementById('analyze-path').value;
+        showLoading(copyBtn, copyBtn.innerHTML);
+        try {
+            lastAnalyzeResult = await analyzeProject(path);
+        } catch (err) {
+            showToast('Lỗi: ' + err.message, 'error');
+            resetButton(copyBtn);
+            return;
+        }
+        resetButton(copyBtn);
+    }
+
+    try {
+        await copyToClipboard(lastAnalyzeResult);
+        showCopiedState(copyBtn, copyIcon, copyText, '📋', 'Copy Text');
+        showToast('Đã copy project.txt', 'success');
+    } catch (err) {
+        showToast('Lỗi copy: ' + err.message, 'error');
+    }
+}
+
+// ==========================================
+// EXECUTE HANDLERS
+// ==========================================
+
+export async function testExecute(event) {
+    const btn = event.target.closest('.btn');
+    const bashInput = document.getElementById('execute-bash');
+    const bash = bashInput.value;
+
+    if (!bash.trim()) {
+        showToast('Vui lòng nhập bash script', 'error');
+        return;
+    }
+
+    showLoading(btn, btn.innerHTML);
+    try {
+        const data = await executeScript(bash);
+        showResponse('execute-response', data, !data.success);
+        data.success ? showToast('Thực thi thành công', 'success') : showToast('Thực thi thất bại', 'error');
+        if (data.success) bashInput.value = '';
+    } catch (err) {
+        showResponse('execute-response', { error: err.message }, true);
+        showToast('Lỗi: ' + err.message, 'error');
+    }
+    resetButton(btn);
+}
+
+export async function executeFromClipboard(event) {
+    const btn = event.target.closest('.btn');
+    const bashInput = document.getElementById('execute-bash');
+
+    showLoading(btn, btn.innerHTML);
+    try {
+        const clipboardText = await readFromClipboard();
+        if (!clipboardText || !clipboardText.trim()) {
+            showToast('Clipboard trống!', 'error');
+            resetButton(btn);
+            return;
+        }
+        bashInput.value = clipboardText;
+        const data = await executeScript(clipboardText);
+        showResponse('execute-response', data, !data.success);
+        
+        if (data.success) {
+            showToast('Thực thi OK', 'success');
+            bashInput.value = '';
+        } else {
+            data.syntaxError ? showToast('Lỗi syntax script', 'error') : showToast('Thực thi thất bại', 'error');
+        }
+    } catch (err) {
+        if (err.name === 'NotAllowedError') {
+            showToast('Không có quyền clipboard', 'error');
+        } else {
+            showResponse('execute-response', { error: err.message }, true);
+            showToast('Lỗi: ' + err.message, 'error');
+        }
+    }
+    resetButton(btn);
+}
+
+// ==========================================
+// EXPORT TO WINDOW (GLOBAL)
+// ==========================================
+
+window.toggleSystemPrompt = toggleSystemPrompt;
+window.copySystemPrompt = copySystemPrompt;
+window.copySystemPromptFromHeader = copySystemPromptFromHeader;
+window.testAnalyze = testAnalyze;
+window.copyAnalyzeResult = copyAnalyzeResult;
+window.testExecute = testExecute;
+window.executeFromClipboard = executeFromClipboard;
+
+// Map Structure handlers from feature module to window
+window.testStructure = handleStructureView;
+window.toggleFolder = handleToggleFolder;
+window.handleCheckboxChange = handleCheckboxChange;
+window.copySelectedStructure = handleCopySelected;

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

@@ -0,0 +1,72 @@
+// Main entry point - Initialize application
+import { SYSTEM_PROMPT } from './config.js';
+import { checkHealth } from './api.js';
+import './handlers.js'; // Import to register global functions
+
+/**
+ * Initialize application on DOM ready
+ */
+document.addEventListener('DOMContentLoaded', async () => {
+    // Load system prompt text
+    document.getElementById('prompt-text').textContent = SYSTEM_PROMPT;
+    
+    // Check server status
+    await checkServerStatus();
+
+    // Initialize Theme
+    initTheme();
+});
+
+/**
+ * Check and update server status
+ */
+async function checkServerStatus() {
+    const statusEl = document.getElementById('status');
+    const isHealthy = await checkHealth();
+    
+    if (isHealthy) {
+        statusEl.textContent = '● Online';
+        statusEl.style.background = 'rgba(52, 199, 89, 0.15)';
+        statusEl.style.color = 'var(--ios-green)';
+    } else {
+        statusEl.textContent = '● Offline';
+        statusEl.style.background = 'rgba(255, 59, 48, 0.15)';
+        statusEl.style.color = 'var(--ios-red)';
+    }
+}
+
+/**
+ * Initialize Theme Logic
+ */
+function initTheme() {
+    const themeBtn = document.getElementById('theme-toggle');
+    const themeIcon = document.getElementById('theme-icon');
+    
+    // Get current theme from DOM (set by inline script) or localStorage
+    let currentTheme = localStorage.getItem('theme') || 'light';
+    
+    // Update icon initially
+    updateThemeIcon(currentTheme);
+
+    themeBtn.addEventListener('click', () => {
+        // Toggle theme
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        
+        // Update DOM
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+        
+        // Update local state
+        currentTheme = newTheme;
+        updateThemeIcon(newTheme);
+    });
+}
+
+function updateThemeIcon(theme) {
+    const themeIcon = document.getElementById('theme-icon');
+    if (theme === 'dark') {
+        themeIcon.textContent = '☀️';
+    } else {
+        themeIcon.textContent = '🌙';
+    }
+}

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

@@ -0,0 +1,82 @@
+// UI Utility Functions
+
+/**
+ * Display a toast notification
+ * @param {string} message - Message to display
+ * @param {string} type - Type of toast: 'success', 'error', 'info'
+ */
+export function showToast(message, type = 'success') {
+    const toast = document.getElementById('toast');
+    // Reset text content to remove potential icon junk
+    toast.textContent = message;
+    toast.className = `toast ${type}`;
+    toast.classList.add('show');
+
+    // Clear previous timeout if exists
+    if (toast.timeoutId) clearTimeout(toast.timeoutId);
+
+    toast.timeoutId = setTimeout(() => toast.classList.remove('show'), 3000);
+}
+
+/**
+ * Show loading state on button
+ * @param {HTMLElement} button - Button element
+ * @param {string} originalText - Original button HTML
+ */
+export function showLoading(button, originalText) {
+    button.disabled = true;
+    button.innerHTML = '<span class="loading"></span>';
+    button.dataset.originalText = originalText;
+}
+
+/**
+ * Reset button to original state
+ * @param {HTMLElement} button - Button element
+ */
+export function resetButton(button) {
+    button.disabled = false;
+    const originalText = button.dataset.originalText;
+    button.innerHTML = originalText;
+}
+
+/**
+ * Display API response in response area
+ * @param {string} elementId - ID of response element
+ * @param {Object} data - Response data
+ * @param {boolean} isError - Whether this is an error response
+ */
+export function showResponse(elementId, data, isError = false) {
+    const el = document.getElementById(elementId);
+    el.className = 'response show ' + (isError ? 'error' : 'success');
+    el.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
+}
+
+/**
+ * Update button state to show copied status
+ * @param {HTMLElement} button - Button element
+ * @param {HTMLElement} icon - Icon element
+ * @param {HTMLElement} text - Text element
+ * @param {string} originalIcon - Original icon text
+ * @param {string} originalText - Original button text
+ */
+export function showCopiedState(button, icon, text, originalIcon, originalText) {
+    button.classList.add('copied');
+    icon.textContent = '✓';
+    text.textContent = 'Copied';
+
+    setTimeout(() => {
+        button.classList.remove('copied');
+        icon.textContent = originalIcon;
+        text.textContent = originalText;
+    }, 2000);
+}
+
+/**
+ * Format number with commas (handles undefined/null)
+ * @param {number} num - Number to format
+ * @returns {string} Formatted string
+ */
+export function formatNumber(num) {
+    if (num === undefined || num === null) return '0';
+    return num.toLocaleString('en-US');
+}

package/src/tokenizer/token-manager.js

@@ -93,6 +93,58 @@ class TokenManager {
     };
   }
 
+  /**
+   * Phân tích và điền thông tin token vào cấu trúc cây thư mục
+   * Tính toán token cho từng file và tổng hợp cho folder
+   */
+  analyzeTree(tree, files) {
+    // Tạo map để lookup content file nhanh hơn
+    const fileMap = new Map();
+    files.forEach(f => {
+      if (f.content) {
+        fileMap.set(f.path, f.content);
+      }
+    });
+
+    const traverse = (node) => {
+      if (!node) return 0;
+
+      // Nếu là file
+      if (node.type === 'file') {
+        const content = fileMap.get(node.path);
+        // Nếu không có content (binary hoặc error), token là 0
+        node.tokens = content ? this.countTokens(content) : 0;
+        return node.tokens;
+      }
+
+      // Nếu là directory có con
+      if (node.children) {
+        let sum = 0;
+        
+        // Sắp xếp: Folder trước, File sau
+        node.children.sort((a, b) => {
+          if (a.type === b.type) return a.name.localeCompare(b.name);
+          return a.type === 'directory' ? -1 : 1;
+        });
+
+        // Đệ quy tính tổng token của con
+        node.children.forEach(child => {
+          sum += traverse(child);
+        });
+
+        node.tokens = sum;
+        return sum;
+      }
+
+      // Nếu là node rỗng hoặc loại khác
+      node.tokens = 0;
+      return 0;
+    };
+
+    traverse(tree);
+    return tree;
+  }
+
   /**
    * Chia nhỏ content thành chunks
    */
@@ -247,8 +299,6 @@ class TokenManager {
     let currentTokens = 0;
     let chunkIndex = 0;
     
-    // Không thêm header "Large File" nữa để UI sạch hơn
-
     for (const line of lines) {
       const lineTokens = this.countTokens(line + '\n');