vg-coder-cli 2.0.8 → 2.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "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/scanner/file-scanner.js

@@ -106,6 +106,7 @@ class FileScanner {
 
     const node = {
       path: dirPath,
+      relativePath: relativePath,
       name: name,
       size: stats.size,
       type: stats.isDirectory() ? 'directory' : 'file',
@@ -148,47 +149,6 @@ class FileScanner {
     return node;
   }
 
-  /**
-   * Get regex for build directories and hidden files to ignore
-   */
-  getBuildIgnoreRegex() {
-    // Create regex pattern for directories to ignore
-    const ignorePatterns = [
-      // Hidden directories (starting with .)
-      '^\\..*',
-
-      // Build directories
-      '^build$',
-      '^target$',
-      '^dist$',
-      '^out$',
-      '^bin$',
-
-      // Dependencies
-      '^node_modules$',
-      '^vendor$',
-
-      // Temporary files
-      '^tmp$',
-      '^temp$',
-
-      // Logs
-      '^logs$',
-      '^log$',
-
-      // Coverage reports
-      '^coverage$'
-    ];
-
-    // Combine all patterns into one regex
-    const combinedPattern = ignorePatterns.join('|');
-    return new RegExp(`(${combinedPattern})`);
-  }
-
-
-
-
-
   /**
    * Trích xuất danh sách files từ tree
    */
@@ -381,69 +341,8 @@ class FileScanner {
    * Tạo nội dung kết hợp từ tất cả files
    */
   async createCombinedContent(files, options = {}) {
-    const {
-      includeStats = true,
-      includeTree = true,
-      headerTemplate = this.getDefaultHeaderTemplate(),
-      separatorTemplate = this.getDefaultSeparatorTemplate()
-    } = options;
-
-    let content = '';
-    
-    // Header với thông tin project
-    if (includeStats) {
-      content += this.generateProjectHeader(files);
-      content += '\n\n';
-    }
-    
-    // Cấu trúc thư mục
-    if (includeTree) {
-      content += this.generateTreeStructure(files);
-      content += '\n\n';
-    }
-    
-    // Nội dung từng file
-    for (let i = 0; i < files.length; i++) {
-      const file = files[i];
-      
-      // Header cho file
-      content += headerTemplate
-        .replace('{path}', file.relativePath)
-        .replace('{name}', file.name)
-        .replace('{extension}', file.extension || '')
-        .replace('{size}', file.size)
-        .replace('{lines}', file.lines);
-      
-      content += '\n';
-      content += file.content;
-      content += '\n';
-      
-      // Separator giữa các files
-      if (i < files.length - 1) {
-        content += separatorTemplate;
-        content += '\n';
-      }
-    }
-    
-    return content;
-  }
-
-  /**
-   * Template header mặc định cho file
-   */
-  getDefaultHeaderTemplate() {
-    return `
-================================================================================
-File: {path}
-Size: {size} bytes | Lines: {lines}
-================================================================================`;
-  }
-
-  /**
-   * Template separator mặc định
-   */
-  getDefaultSeparatorTemplate() {
-    return '\n\n';
+    // ... (unchanged)
+    return this.createCombinedContentForAI(files, options);
   }
 
   /**

package/src/server/api-server.js

@@ -29,8 +29,8 @@ class ApiServer {
    */
   setupMiddleware() {
     this.app.use(cors());
-    this.app.use(bodyParser.json());
-    this.app.use(bodyParser.urlencoded({ extended: true }));
+    this.app.use(bodyParser.json({ limit: '50mb' })); // Increase limit for large file lists
+    this.app.use(bodyParser.urlencoded({ extended: true, limit: '50mb' }));
     
     // Serve static files from views directory (CSS, JS)
     this.app.use(express.static(path.join(__dirname, 'views')));
@@ -63,7 +63,7 @@ class ApiServer {
     // Analyze endpoint - returns project.txt file
     this.app.post('/api/analyze', async (req, res) => {
       try {
-        const { path: projectPath, options = {} } = req.body;
+        const { path: projectPath, options = {}, specificFiles } = req.body;
 
         if (!projectPath) {
           return res.status(400).json({
@@ -81,6 +81,9 @@ class ApiServer {
         }
 
         console.log(chalk.yellow(`Analyzing project: ${resolvedPath}`));
+        if (specificFiles) {
+             console.log(chalk.yellow(`Filtering for ${specificFiles.length} specific files`));
+        }
 
         // Detect project type
         const detector = new ProjectDetector(resolvedPath);
@@ -95,8 +98,15 @@ class ApiServer {
         const scanner = new FileScanner(resolvedPath, scannerOptions);
         const scanResult = await scanner.scanProject();
 
+        let filesToProcess = scanResult.files;
+
+        // Filter specific files if requested
+        if (specificFiles && Array.isArray(specificFiles) && specificFiles.length > 0) {
+            filesToProcess = filesToProcess.filter(file => specificFiles.includes(file.relativePath));
+        }
+
         // Create AI-friendly content
-        const aiContent = await scanner.createCombinedContentForAI(scanResult.files, {
+        const aiContent = await scanner.createCombinedContentForAI(filesToProcess, {
           includeStats: true,
           includeTree: true,
           preserveLineNumbers: true
@@ -107,7 +117,7 @@ class ApiServer {
         res.setHeader('Content-Disposition', 'attachment; filename="project.txt"');
         res.send(aiContent);
 
-        console.log(chalk.green(`✓ Analysis completed: ${scanResult.files.length} files`));
+        console.log(chalk.green(`✓ Analysis completed: ${filesToProcess.length} files`));
 
       } catch (error) {
         console.error(chalk.red('Error during analysis:'), error);
@@ -181,6 +191,50 @@ class ApiServer {
       }
     });
 
+    // Structure endpoint
+    this.app.get('/api/structure', async (req, res) => {
+      try {
+        const projectPath = req.query.path || '.';
+        const resolvedPath = path.resolve(projectPath);
+
+        // Validate path
+        if (!await fs.pathExists(resolvedPath)) {
+          return res.status(404).json({
+            error: `Project path does not exist: ${projectPath}`
+          });
+        }
+
+        console.log(chalk.yellow(`Analyzing structure for: ${resolvedPath}`));
+
+        // 1. Scan files
+        const scanner = new FileScanner(resolvedPath);
+        const scanResult = await scanner.scanProject();
+
+        // 2. Tokenize tree
+        const tokenManager = new TokenManager();
+        const enrichedTree = tokenManager.analyzeTree(scanResult.tree, scanResult.files);
+        
+        tokenManager.cleanup();
+
+        // 3. Return result
+        res.json({
+          path: resolvedPath,
+          totalFiles: scanResult.files.length,
+          rootTokens: enrichedTree.tokens,
+          structure: enrichedTree
+        });
+
+        console.log(chalk.green(`✓ Structure analysis completed: ${scanResult.files.length} files`));
+
+      } catch (error) {
+        console.error(chalk.red('Error getting structure:'), error);
+        res.status(500).json({
+          error: 'Failed to get structure',
+          message: error.message
+        });
+      }
+    });
+
     // Clean endpoint
     this.app.delete('/api/clean', async (req, res) => {
       try {
@@ -285,23 +339,10 @@ class ApiServer {
         console.log(chalk.green(`\n🚀 VG Coder API Server started!`));
         console.log(chalk.blue(`📡 Listening on: http://localhost:${this.port}`));
         console.log(chalk.cyan(`\n🎨 Dashboard: http://localhost:${this.port}`));
-        console.log(chalk.yellow(`\n📚 Available endpoints:`));
-        console.log(`  GET  /health           - Health check`);
-        console.log(`  POST /api/analyze      - Analyze project (returns project.txt)`);
-        console.log(`  GET  /api/info?path=.  - Get project info`);
-        console.log(`  DELETE /api/clean      - Clean output directory`);
-        console.log(`  POST /api/execute      - Execute bash script`);
-        console.log(chalk.gray(`\n💡 Press Ctrl+C to stop the server\n`));
         resolve();
       });
 
       this.server.on('error', (err) => {
-        if (err.code === 'EADDRINUSE') {
-          console.error(chalk.red(`\n❌ Port ${this.port} is already in use!`));
-          console.log(chalk.yellow(`Try using a different port with: vg start -p <port>\n`));
-        } else {
-          console.error(chalk.red('\n❌ Server error:'), err.message);
-        }
         reject(err);
       });
     });

package/src/server/views/css/structure.css

@@ -0,0 +1,122 @@
+/* Tree View Styles */
+.tree-container {
+    margin-top: 20px;
+    background: var(--ios-input-bg);
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid rgba(0,0,0,0.05);
+}
+
+.tree-header {
+    padding: 12px 16px;
+    background: rgba(0,0,0,0.03);
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--text-primary);
+}
+
+.tree-content {
+    padding: 10px;
+    font-family: 'SF Mono', 'Menlo', monospace;
+    font-size: 13px;
+    overflow-x: auto;
+}
+
+.tree-ul {
+    list-style: none;
+    padding-left: 20px;
+    margin: 0;
+    border-left: 1px solid var(--ios-separator);
+}
+
+/* Root level shouldn't have border */
+.tree-content > .tree-ul {
+    border-left: none;
+    padding-left: 0;
+}
+
+.tree-li {
+    margin: 4px 0;
+    position: relative;
+}
+
+.tree-item-row {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.1s;
+}
+
+.tree-item-row:hover {
+    background: rgba(0,0,0,0.05);
+}
+
+/* Checkbox Style */
+.tree-checkbox {
+    margin-right: 8px;
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    accent-color: var(--ios-blue);
+}
+
+.tree-icon {
+    margin-right: 8px;
+    font-size: 14px;
+    width: 16px;
+    text-align: center;
+}
+
+.tree-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-right: 10px;
+    color: var(--text-primary);
+}
+
+/* Token Badges */
+.token-badge {
+    font-size: 11px;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-weight: 600;
+    min-width: 40px;
+    text-align: center;
+}
+
+.token-low { background: rgba(52, 199, 89, 0.15); color: var(--ios-green); } /* < 2k */
+.token-med { background: rgba(255, 149, 0, 0.15); color: #FF9500; }         /* 2k - 5k */
+.token-high { background: rgba(255, 59, 48, 0.15); color: var(--ios-red); }  /* > 5k */
+
+/* Folder toggle states */
+.tree-li > .tree-ul {
+    display: block; /* Default expanded */
+}
+
+.tree-li.collapsed > .tree-ul {
+    display: none;
+}
+
+.arrow {
+    display: inline-block;
+    width: 12px;
+    font-size: 10px;
+    color: var(--text-secondary);
+    transition: transform 0.2s;
+    margin-right: 4px;
+}
+
+.tree-li.collapsed > .tree-item-row .arrow {
+    transform: rotate(-90deg);
+}
+
+.tree-li:not(.has-children) .arrow {
+    visibility: hidden;
+}

package/src/server/views/dashboard.html

@@ -9,6 +9,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <title>VG Coder API Dashboard</title>
     <link rel="stylesheet" href="/dashboard.css">
+    <link rel="stylesheet" href="/css/structure.css">
     <script>
         // Pre-load theme to prevent flash
         (function() {
@@ -45,7 +46,7 @@
             </div>
             <div class="system-prompt-content" id="system-prompt-content">
                 <div class="prompt-text" id="prompt-text"></div>
-                <button class="btn btn-copy" onclick="copySystemPrompt()">
+                <button class="btn btn-copy" onclick="copySystemPrompt(event)">
                     <span id="copy-icon">📋</span>
                     <span id="copy-text">Copy System Prompt</span>
                 </button>
@@ -62,7 +63,7 @@
                         <span class="endpoint-path">/api/analyze</span>
                     </div>
                     <!-- Right side: Download Icon -->
-                    <button class="btn-icon-head" onclick="testAnalyze()" title="Download Project Source">
+                    <button class="btn-icon-head" onclick="testAnalyze(event)" title="Download Project Source">
                         📥
                     </button>
                 </div>
@@ -73,7 +74,7 @@
                 </div>
                 <div class="btn-group">
                     <!-- Big Download button removed as it's now in the header -->
-                    <button class="btn btn-copy" onclick="copyAnalyzeResult()">
+                    <button class="btn btn-copy" onclick="copyAnalyzeResult(event)">
                         <span id="analyze-copy-icon">📋</span>
                         <span id="analyze-copy-text">Copy Text</span>
                     </button>
@@ -97,17 +98,55 @@
                         placeholder="mkdir -p src/test&#10;echo 'Hello' > src/test/hello.txt"></textarea>
                 </div>
                 <div class="btn-group">
-                    <button class="btn" onclick="testExecute()">
+                    <button class="btn" onclick="testExecute(event)">
                         <span>▶️</span>
                         <span>Run Script</span>
                     </button>
-                    <button class="btn" onclick="executeFromClipboard()">
+                    <button class="btn" onclick="executeFromClipboard(event)">
                         <span>📋</span>
                         <span>Paste & Run</span>
                     </button>
                 </div>
                 <div class="response" id="execute-response"></div>
             </div>
+
+            <!-- Structure & Tokens (NEW) -->
+            <div class="endpoint-card">
+                <div class="endpoint-header">
+                    <div class="endpoint-title-group">
+                        <span class="method get" style="background: var(--ios-blue); color: white;">GET</span>
+                        <span class="endpoint-path">/api/structure</span>
+                    </div>
+                    <!-- Button Copy Selected -->
+                    <button class="btn-icon-head" onclick="copySelectedStructure(event)" title="Copy Selected Tree">
+                        📋
+                    </button>
+                </div>
+                <p class="endpoint-desc">Xem cây thư mục và phân tích số lượng Token.</p>
+                <div class="form-group">
+                    <label>Path</label>
+                    <input type="text" id="structure-path" value="." placeholder="Project path">
+                </div>
+                <div class="btn-group">
+                    <button class="btn" onclick="testStructure(event)">
+                        <span>🌳</span>
+                        <span>View Structure</span>
+                    </button>
+                    <button class="btn btn-copy" onclick="copySelectedStructure(event)">
+                        <span id="copy-structure-icon">📋</span>
+                        <span id="copy-structure-text">Copy Selected</span>
+                    </button>
+                </div>
+                <!-- Tree Container -->
+                <div class="tree-container" id="structure-tree" style="display: none;">
+                    <div class="tree-header">
+                        <span>Project Tree</span>
+                        <span class="tree-total-tokens" id="total-tokens-badge">0 tokens</span>
+                    </div>
+                    <div class="tree-content" id="tree-content"></div>
+                </div>
+                <div class="response" id="structure-response" style="display: none;"></div>
+            </div>
         </div>
     </div>
 

package/src/server/views/js/api.js

@@ -4,13 +4,14 @@ import { API_BASE } from './config.js';
 /**
  * Analyze project and get source code
  * @param {string} path - Project path to analyze
+ * @param {Array<string>} specificFiles - Optional list of relative paths to filter
  * @returns {Promise<string>} - Project content as text
  */
-export async function analyzeProject(path) {
+export async function analyzeProject(path, specificFiles = null) {
     const res = await fetch(`${API_BASE}/api/analyze`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ path })
+        body: JSON.stringify({ path, specificFiles })
     });
 
     if (!res.ok) {
@@ -55,6 +56,22 @@ export async function checkHealth() {
     }
 }
 
+/**
+ * Get project structure with tokens
+ * @param {string} path - Project path
+ * @returns {Promise<Object>} - Structure data
+ */
+export async function getStructure(path) {
+    const res = await fetch(`${API_BASE}/api/structure?path=${encodeURIComponent(path)}`);
+    
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || 'Failed to get structure');
+    }
+
+    return await res.json();
+}
+
 /**
  * Copy content as file to clipboard
  * @param {string} filename - Filename for the clipboard item

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

@@ -1,14 +1,16 @@
 // Event Handlers & Business Logic
 import { SYSTEM_PROMPT } from './config.js';
-import { analyzeProject, executeScript, copyAsFile, copyToClipboard, readFromClipboard } from './api.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';
 
-// State management
 let lastAnalyzeResult = null;
 
-/**
- * Toggle system prompt section
- */
+// ==========================================
+// SYSTEM PROMPT HANDLERS
+// ==========================================
+
 export function toggleSystemPrompt() {
     const content = document.getElementById('system-prompt-content');
     const icon = document.getElementById('toggle-icon');
@@ -16,32 +18,20 @@ export function toggleSystemPrompt() {
     icon.classList.toggle('open');
 }
 
-/**
- * Copy system prompt from the Header Button
- * Stops propagation so the accordion doesn't toggle
- */
 export function copySystemPromptFromHeader(event) {
-    event.stopPropagation(); // Stop accordion from toggling
-    
-    // Animate button
+    event.stopPropagation();
     const btn = event.currentTarget;
     btn.textContent = '✓';
-    
     navigator.clipboard.writeText(SYSTEM_PROMPT).then(() => {
         showToast('Đã copy System Prompt', 'success');
-        setTimeout(() => {
-            btn.textContent = '📋';
-        }, 2000);
+        setTimeout(() => btn.textContent = '📋', 2000);
     }).catch(err => {
         showToast('Lỗi copy: ' + err.message, 'error');
         btn.textContent = '📋';
     });
 }
 
-/**
- * Copy system prompt to clipboard (Main content button)
- */
-export function copySystemPrompt() {
+export function copySystemPrompt(event) {
     const copyBtn = event.target.closest('.btn-copy');
     const copyIcon = document.getElementById('copy-icon');
     const copyText = document.getElementById('copy-text');
@@ -49,16 +39,14 @@ export function copySystemPrompt() {
     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');
-    });
+    }).catch(err => showToast('Lỗi copy: ' + err.message, 'error'));
 }
 
-/**
- * Handle analyze button click
- */
-export async function testAnalyze() {
-    // Support both the big button .btn and the header icon .btn-icon-head
+// ==========================================
+// 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;
 
@@ -67,7 +55,6 @@ export async function testAnalyze() {
         const text = await analyzeProject(path);
         lastAnalyzeResult = text;
 
-        // Download file
         const blob = new Blob([text], { type: 'text/plain' });
         const url = window.URL.createObjectURL(blob);
         const a = document.createElement('a');
@@ -89,19 +76,14 @@ export async function testAnalyze() {
     resetButton(btn);
 }
 
-/**
- * Copy analyze result as text
- */
-export async function copyAnalyzeResult() {
+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) {
-        // Fetch if not already analyzed
         const path = document.getElementById('analyze-path').value;
         showLoading(copyBtn, copyBtn.innerHTML);
-
         try {
             lastAnalyzeResult = await analyzeProject(path);
         } catch (err) {
@@ -112,7 +94,6 @@ export async function copyAnalyzeResult() {
         resetButton(copyBtn);
     }
 
-    // Copy to clipboard
     try {
         await copyToClipboard(lastAnalyzeResult);
         showCopiedState(copyBtn, copyIcon, copyText, '📋', 'Copy Text');
@@ -122,10 +103,11 @@ export async function copyAnalyzeResult() {
     }
 }
 
-/**
- * Handle execute button click
- */
-export async function testExecute() {
+// ==========================================
+// EXECUTE HANDLERS
+// ==========================================
+
+export async function testExecute(event) {
     const btn = event.target.closest('.btn');
     const bashInput = document.getElementById('execute-bash');
     const bash = bashInput.value;
@@ -139,14 +121,8 @@ export async function testExecute() {
     try {
         const data = await executeScript(bash);
         showResponse('execute-response', data, !data.success);
-
-        if (data.success) {
-            showToast('Thực thi thành công', 'success');
-            // Clear input on success
-            bashInput.value = '';
-        } else {
-            showToast('Thực thi thất bại', 'error');
-        }
+        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');
@@ -154,44 +130,27 @@ export async function testExecute() {
     resetButton(btn);
 }
 
-/**
- * Execute script from clipboard
- */
-export async function executeFromClipboard() {
+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');
-            showResponse('execute-response', {
-                error: 'Clipboard is empty',
-                message: 'Please copy a bash script to clipboard first'
-            }, true);
             resetButton(btn);
             return;
         }
-
-        // Show what we are running
         bashInput.value = clipboardText;
-
         const data = await executeScript(clipboardText);
         showResponse('execute-response', data, !data.success);
-
+        
         if (data.success) {
-            showToast('Thực thi từ clipboard OK', 'success');
-            // Clear input on success
+            showToast('Thực thi OK', 'success');
             bashInput.value = '';
         } else {
-            if (data.syntaxError) {
-                showToast('Lỗi syntax script', 'error');
-            } else {
-                showToast('Thực thi thất bại', 'error');
-            }
+            data.syntaxError ? showToast('Lỗi syntax script', 'error') : showToast('Thực thi thất bại', 'error');
         }
     } catch (err) {
         if (err.name === 'NotAllowedError') {
@@ -204,7 +163,10 @@ export async function executeFromClipboard() {
     resetButton(btn);
 }
 
-// Make functions globally available for onclick handlers
+// ==========================================
+// EXPORT TO WINDOW (GLOBAL)
+// ==========================================
+
 window.toggleSystemPrompt = toggleSystemPrompt;
 window.copySystemPrompt = copySystemPrompt;
 window.copySystemPromptFromHeader = copySystemPromptFromHeader;
@@ -212,3 +174,9 @@ 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/utils.js

@@ -70,3 +70,13 @@ export function showCopiedState(button, icon, text, originalIcon, originalText)
         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');