vg-coder-cli 2.0.8 → 2.0.10

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/main.js

@@ -2,6 +2,7 @@
 import { SYSTEM_PROMPT } from './config.js';
 import { checkHealth } from './api.js';
 import './handlers.js'; // Import to register global functions
+import { showToast, showCopiedState } from './utils.js';
 
 /**
  * Initialize application on DOM ready
@@ -15,6 +16,9 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     // Initialize Theme
     initTheme();
+
+    // Load Extension Path
+    loadExtensionPath();
 });
 
 /**
@@ -70,3 +74,59 @@ function updateThemeIcon(theme) {
         themeIcon.textContent = '🌙';
     }
 }
+
+// Extension Helpers
+async function loadExtensionPath() {
+    try {
+        const res = await fetch('/api/extension-path');
+        const data = await res.json();
+        const input = document.getElementById('extension-path-input');
+        
+        if (data.exists) {
+            input.value = data.path;
+        } else {
+            input.value = "Error: Extension folder not found. Run 'npm run build' first.";
+            input.style.color = "var(--ios-red)";
+        }
+    } catch (err) {
+        console.error('Failed to load extension path', err);
+    }
+}
+
+// Expose extension handlers to window for onclick events
+window.toggleExtensionGuide = function() {
+    const content = document.getElementById('extension-content');
+    const icon = document.getElementById('ext-toggle-icon');
+    content.classList.toggle('open');
+    icon.classList.toggle('open');
+}
+
+window.copyExtensionPath = function(event) {
+    const input = document.getElementById('extension-path-input');
+    const btn = event.currentTarget;
+    const icon = document.getElementById('ext-copy-icon');
+    const text = document.getElementById('ext-copy-text');
+
+    navigator.clipboard.writeText(input.value).then(() => {
+        showCopiedState(btn, icon, text, '📋', 'Copy Path');
+        showToast('Đã copy đường dẫn extension', 'success');
+    }).catch(err => {
+        showToast('Lỗi copy: ' + err.message, 'error');
+    });
+}
+
+window.copyChromeUrl = function(event) {
+    const input = document.getElementById('chrome-url-input');
+    const btn = event.currentTarget;
+    const originalText = btn.innerHTML;
+
+    navigator.clipboard.writeText(input.value).then(() => {
+        btn.innerHTML = '✓';
+        showToast('Đã copy URL', 'success');
+        setTimeout(() => {
+            btn.innerHTML = originalText;
+        }, 1500);
+    }).catch(err => {
+        showToast('Lỗi copy: ' + err.message, 'error');
+    });
+}

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