vg-coder-cli 2.0.30 → 2.0.32

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

@@ -1,21 +1,49 @@
-// Event Handlers & Business Logic
-import { SYSTEM_PROMPT } from './config.js';
+import { SYSTEM_PROMPT, API_BASE } 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';
+import { showToast, showLoading, resetButton, showResponse, showCopiedState, getById } from './utils.js';
+import { globalDispatcher, EVENT_TYPES } from './event-protocol.js';
 
 let lastAnalyzeResult = null;
 
-// ==========================================
-// SYSTEM PROMPT HANDLERS
-// ==========================================
+/**
+ * Initialize event handlers for bubble menu features
+ * This creates the bridge between UI events and handler functions
+ */
+export function initEventHandlers() {
+    // Paste & Run from Clipboard
+    globalDispatcher.on(EVENT_TYPES.PASTE_RUN, async (event) => {
+        console.log('[Handlers] Paste & Run event received:', event);
+        await executeFromClipboard();
+    });
+
+    // New Terminal
+    globalDispatcher.on(EVENT_TYPES.TERMINAL_NEW, (event) => {
+        console.log('[Handlers] New Terminal event received:', event);
+        if (typeof window.createNewTerminal === 'function') {
+            window.createNewTerminal();
+        } else {
+            showToast('Terminal feature not available', 'error');
+        }
+    });
+
+    // Terminal Execute (for future use)
+    globalDispatcher.on(EVENT_TYPES.TERMINAL_EXECUTE, (event) => {
+        console.log('[Handlers] Terminal Execute event received:', event);
+        const { command, terminalId } = event.payload || {};
+        if (command) {
+            // TODO: Implement terminal execute logic
+            console.log(`Execute in terminal ${terminalId}: ${command}`);
+        }
+    });
+
+    console.log('[Handlers] Event handlers initialized');
+}
 
 export function toggleSystemPrompt() {
-    const content = document.getElementById('system-prompt-content');
-    const icon = document.getElementById('toggle-icon');
-    content.classList.toggle('open');
-    icon.classList.toggle('open');
+    const content = getById('system-prompt-content');
+    const icon = getById('toggle-icon');
+    if(content) content.classList.toggle('open');
+    if(icon) icon.classList.toggle('open');
 }
 
 export function copySystemPromptFromHeader(event) {
@@ -33,8 +61,8 @@ export function copySystemPromptFromHeader(event) {
 
 export function copySystemPrompt(event) {
     const copyBtn = event.target.closest('.btn-copy');
-    const copyIcon = document.getElementById('copy-icon');
-    const copyText = document.getElementById('copy-text');
+    const copyIcon = getById('copy-icon');
+    const copyText = getById('copy-text');
 
     navigator.clipboard.writeText(SYSTEM_PROMPT).then(() => {
         showCopiedState(copyBtn, copyIcon, copyText, '📋', 'Copy System Prompt');
@@ -42,13 +70,12 @@ export function copySystemPrompt(event) {
     }).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;
+    const pathInput = getById('analyze-path');
+    if (!pathInput) return;
+    
+    const path = pathInput.value;
 
     showLoading(btn, btn.innerHTML);
     try {
@@ -78,11 +105,12 @@ export async function testAnalyze(event) {
 
 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');
+    const copyIcon = getById('analyze-copy-icon');
+    const copyText = getById('analyze-copy-text');
+    const pathInput = getById('analyze-path');
 
-    if (!lastAnalyzeResult) {
-        const path = document.getElementById('analyze-path').value;
+    if (!lastAnalyzeResult && pathInput) {
+        const path = pathInput.value;
         showLoading(copyBtn, copyBtn.innerHTML);
         try {
             lastAnalyzeResult = await analyzeProject(path);
@@ -103,13 +131,11 @@ export async function copyAnalyzeResult(event) {
     }
 }
 
-// ==========================================
-// EXECUTE HANDLERS
-// ==========================================
-
 export async function testExecute(event) {
     const btn = event.target.closest('.btn');
-    const bashInput = document.getElementById('execute-bash');
+    const bashInput = getById('execute-bash');
+    if (!bashInput) return;
+    
     const bash = bashInput.value;
 
     if (!bash.trim()) {
@@ -131,15 +157,16 @@ export async function testExecute(event) {
 }
 
 export async function executeFromClipboard(event) {
-    const btn = event.target.closest('.btn');
-    const bashInput = document.getElementById('execute-bash');
+    const btn = event?.target?.closest('.btn');
+    const bashInput = getById('execute-bash');
+    if (!bashInput) return;
 
-    showLoading(btn, btn.innerHTML);
+    if (btn) showLoading(btn, btn.innerHTML);
     try {
         const clipboardText = await readFromClipboard();
         if (!clipboardText || !clipboardText.trim()) {
             showToast('Clipboard trống!', 'error');
-            resetButton(btn);
+            if (btn) resetButton(btn);
             return;
         }
         bashInput.value = clipboardText;
@@ -160,13 +187,9 @@ export async function executeFromClipboard(event) {
             showToast('Lỗi: ' + err.message, 'error');
         }
     }
-    resetButton(btn);
+    if (btn) resetButton(btn);
 }
 
-// ==========================================
-// EXPORT TO WINDOW (GLOBAL)
-// ==========================================
-
 window.toggleSystemPrompt = toggleSystemPrompt;
 window.copySystemPrompt = copySystemPrompt;
 window.copySystemPromptFromHeader = copySystemPromptFromHeader;
@@ -174,9 +197,3 @@ 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

@@ -1,100 +1,66 @@
-// Main entry point - Initialize application
-import { SYSTEM_PROMPT } from './config.js';
+import { API_BASE, SYSTEM_PROMPT } from './config.js';
 import { checkHealth } from './api.js';
-import './handlers.js'; 
-import { showToast, showCopiedState } from './utils.js';
-import { initIframeManager } from './features/iframe-manager.js';
+import { initEventHandlers } from './handlers.js'; 
+import { showToast, getById, setRoot, qs } from './utils.js';
 import { initGitView } from './features/git-view.js';
-import { initTerminal, createNewTerminal } from './features/terminal.js';
+import { initTerminal } from './features/terminal.js';
 import { initEditorTabs } from './features/editor-tabs.js';
-import { initMonaco, updateMonacoTheme } from './features/monaco-manager.js';
+// REMOVED: initMonaco
 import { initResizeHandler } from './features/resize.js';
 import { initSavedCommands } from './features/commands.js';
 import { initProjectSwitcher } from './features/project-switcher.js';
+import './features/structure.js';
+import { initBubble } from './features/bubble.js';
 
-document.addEventListener('DOMContentLoaded', async () => {
-    // Load system prompt text
-    document.getElementById('prompt-text').textContent = SYSTEM_PROMPT;
-    
-    // Check server status
-    await checkServerStatus();
+export async function initMain() {
+    console.log('VG Coder: Starting Main Logic...');
 
-    // Load Project Info
-    await loadProjectInfo();
-
-    // Initialize Theme
-    initTheme();
-
-    // Load Extension Path
-    loadExtensionPath();
-
-    // Initialize Iframe Manager
-    initIframeManager();
-
-    // Initialize Git View
-    initGitView();
-    
-    // Initialize Terminal System
-    initTerminal();
+    try {
+        const promptEl = getById('prompt-text');
+        if (promptEl) promptEl.textContent = SYSTEM_PROMPT;
+        
+        await checkServerStatus();
+        await loadProjectInfo();
 
-    // Initialize Monaco & Tabs
-    // Initialize Monaco & Tabs
-    initMonaco();
-    initEditorTabs();
+        initTheme();
+        loadExtensionPath();
+        
+        // Initialize event handlers FIRST (before bubble which dispatches events)
+        initEventHandlers();
+        
+        initGitView();
+        initTerminal();
+        initEditorTabs();
+        initResizeHandler();
+        initSavedCommands();
+        await initProjectSwitcher();
+        
+        // Init Bubble (will use event protocol)
+        initBubble();
 
-    // 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');
+        console.log('✅ VG Coder: Initialization Complete');
+    } catch (e) {
+        console.error('VG Coder Init Failed:', e);
     }
-});
+}
 
-// Global event handler for project switches
+// ... (Giữ nguyên các hàm helper khác: switchProject, loadProjectInfo, initTheme...)
+// Để ngắn gọn, tôi copy lại phần còn lại của main.js
 window.addEventListener('project-switched', async (event) => {
-    const { projectId, projectName, project } = event.detail;
-    console.log(`Project switched to: ${projectName}`);
-    
-    // Reload project info
+    const { projectId, projectName } = event.detail;
     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
+    if (window.updateTerminalVisibility) window.updateTerminalVisibility(projectId);
+    if (window.loadSavedCommands) await window.loadSavedCommands();
+    const treeContainer = getById('structure-tree');
+    if (treeContainer) treeContainer.style.display = 'none';
+    const treeContent = getById('tree-content');
+    if (treeContent) treeContent.innerHTML = '';
 });
 
 async function checkServerStatus() {
-    const statusEl = document.getElementById('status');
+    const statusEl = getById('status');
+    if (!statusEl) return;
     const isHealthy = await checkHealth();
-    
     if (isHealthy) {
         statusEl.textContent = '●';
         statusEl.style.background = 'transparent';
@@ -108,129 +74,59 @@ async function checkServerStatus() {
 
 async function loadProjectInfo() {
     try {
-        // Fetch info for current directory (.)
-        const res = await fetch('/api/info?path=.');
+        const res = await fetch(`${API_BASE}/api/info?path=.`);
         const data = await res.json();
-        
-        const projectNameEl = document.getElementById('project-name');
-        const projectMetaEl = document.getElementById('project-meta');
-        
-        // Extract folder name from path
-        const fullPath = data.path;
-        // Handle both Windows (\) and Unix (/) paths
-        const folderName = fullPath.split(/[\\/]/).pop();
-        
-        projectNameEl.textContent = folderName;
-        projectMetaEl.textContent = `${data.primaryType} • ${fullPath}`;
-        
-    } catch (err) {
-        console.error('Failed to load project info:', err);
-        document.getElementById('project-name').textContent = 'Unknown Project';
-        document.getElementById('project-meta').textContent = 'Error loading info';
-    }
+        const projectNameEl = getById('project-name');
+        const projectMetaEl = getById('project-meta');
+        if (projectNameEl) projectNameEl.textContent = data.path.split(/[\\/]/).pop();
+        if (projectMetaEl) projectMetaEl.textContent = `${data.primaryType} • ${data.path}`;
+    } catch (err) {}
 }
 
 function initTheme() {
-    const themeBtn = document.getElementById('theme-toggle');
+    const themeBtn = getById('theme-toggle');
+    if (!themeBtn) return;
     let currentTheme = localStorage.getItem('theme') || 'light';
-    updateThemeIcon(currentTheme);
-
+    applyTheme(currentTheme);
     themeBtn.addEventListener('click', () => {
         const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-        document.documentElement.setAttribute('data-theme', newTheme);
         localStorage.setItem('theme', newTheme);
         currentTheme = newTheme;
-        updateThemeIcon(newTheme);
-        updateMonacoTheme(newTheme);
+        applyTheme(newTheme);
     });
 }
 
-function updateThemeIcon(theme) {
-    const themeIcon = document.getElementById('theme-icon');
-    if (theme === 'dark') {
-        themeIcon.textContent = '☀️';
-    } else {
-        themeIcon.textContent = '🌙';
-    }
+function applyTheme(theme) {
+    const themeIcon = getById('theme-icon');
+    if (themeIcon) themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
+    const wrapper = getById('vg-app-root');
+    if (wrapper) wrapper.setAttribute('data-theme', theme);
 }
 
 async function loadExtensionPath() {
     try {
-        const res = await fetch('/api/extension-path');
+        const res = await fetch(`${API_BASE}/api/extension-path`);
         const data = await res.json();
-        // Updated ID for the input in center guide
-        const input = document.getElementById('extension-path-input-center');
-        if (input) {
-            if (data.exists) input.value = data.path;
-            else {
-                input.value = "Error: Extension folder not found.";
-                input.style.color = "var(--ios-red)";
-            }
-        }
+        const input = getById('extension-path-input-center');
+        if (input && data.exists) input.value = data.path;
     } catch (err) {}
 }
 
-window.copyExtensionPath = function(event) {
-    const input = document.getElementById('extension-path-input-center');
-    const btn = event.currentTarget;
-    const originalText = btn.textContent;
-    
-    navigator.clipboard.writeText(input.value).then(() => {
-        btn.textContent = '✓';
-        btn.style.background = 'var(--ios-green)';
-        btn.style.color = 'white';
-        btn.style.borderColor = 'var(--ios-green)';
-        showToast('Đã copy đường dẫn extension', 'success');
-        
-        setTimeout(() => {
-            btn.textContent = originalText;
-            btn.style.background = '';
-            btn.style.color = '';
-            btn.style.borderColor = '';
-        }, 2000);
-    });
-}
-
-window.copyChromeUrl = function(event) {
-    const input = document.getElementById('chrome-url-input-center');
-    const btn = event.currentTarget;
-    const originalText = btn.textContent;
-    
-    navigator.clipboard.writeText(input.value).then(() => {
-        btn.textContent = '✓';
-        btn.style.background = 'var(--ios-green)';
-        btn.style.color = 'white';
-        btn.style.borderColor = 'var(--ios-green)';
-        showToast('Đã copy URL', 'success');
-        
-        setTimeout(() => {
-            btn.textContent = originalText;
-            btn.style.background = '';
-            btn.style.color = '';
-            btn.style.borderColor = '';
-        }, 2000);
-    });
-}
-
 window.stopServer = async function() {
-    if (!confirm('Are you sure you want to stop the server?')) {
-        return;
-    }
-    
+    if (!confirm('Are you sure you want to stop the server?')) return;
     try {
-        await fetch('/api/shutdown', { method: 'POST' });
+        await fetch(`${API_BASE}/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>
-            `;
+            const wrapper = getById('vg-app-root');
+            if(wrapper) wrapper.innerHTML = '<div style="display:flex;justify-content:center;align-items:center;height:100vh;"><h2>🛑 Server Stopped</h2></div>';
         }, 1000);
-    } catch (error) {
-        console.error('Failed to stop server:', error);
-    }
+    } catch (error) {}
+}
+
+if (!window.__VG_CODER_ROOT__) {
+    document.addEventListener('DOMContentLoaded', () => {
+        setRoot(document);
+        initMain();
+    });
 }

package/src/server/views/js/shadow-entry.js

@@ -0,0 +1,21 @@
+import { initMain } from './main.js';
+import { setRoot } from './utils.js';
+
+// Entry point for Shadow DOM Injector
+(function() {
+    console.log('🚀 VG Coder: Initializing in Shadow Context...');
+    
+    // 1. Determine Root (ShadowRoot exposed by gulp wrapper)
+    const root = window.__VG_CODER_ROOT__;
+    
+    if (!root) {
+        console.error('VG Coder: Root context not found!');
+        return;
+    }
+
+    // 2. Set Context for Utils
+    setRoot(root);
+
+    // 3. Initialize Main App Logic
+    initMain();
+})();

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

@@ -1,29 +1,57 @@
-// UI Utility Functions
+// UI Utility Functions & DOM Helpers
+
+// --- Context Management ---
+let _root = document;
+
+export function setRoot(rootElement) {
+    _root = rootElement;
+    // Update global reference if in Shadow DOM
+    if (rootElement.host) {
+        window.__VG_CODER_ROOT__ = rootElement;
+    }
+}
+
+export function getRoot() {
+    return _root;
+}
+
+// DOM Helpers to replace document.*
+export function qs(selector) {
+    return _root.querySelector(selector);
+}
+
+export function qsa(selector) {
+    return _root.querySelectorAll(selector);
+}
+
+export function getById(id) {
+    // ShadowRoot doesn't always support getElementById in standard way, querySelector is safer
+    return _root.querySelector('#' + id);
+}
+
+// --- UI Utils ---
 
 /**
  * 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
+    const toast = getById('toast');
+    if (!toast) return;
+
+    // Reset text content
     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) {
+    if (!button) return;
     button.disabled = true;
     button.innerHTML = '<span class="loading"></span>';
     button.dataset.originalText = originalText;
@@ -31,50 +59,42 @@ export function showLoading(button, originalText) {
 
 /**
  * Reset button to original state
- * @param {HTMLElement} button - Button element
  */
 export function resetButton(button) {
+    if (!button) return;
     button.disabled = false;
     const originalText = button.dataset.originalText;
-    button.innerHTML = originalText;
+    if (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
+ * Display API response
  */
 export function showResponse(elementId, data, isError = false) {
-    const el = document.getElementById(elementId);
+    const el = getById(elementId);
+    if (!el) return;
     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) {
+    if (!button) return;
     button.classList.add('copied');
-    icon.textContent = '✓';
-    text.textContent = 'Copied';
+    if (icon) icon.textContent = '✓';
+    if (text) text.textContent = 'Copied';
 
     setTimeout(() => {
         button.classList.remove('copied');
-        icon.textContent = originalIcon;
-        text.textContent = originalText;
+        if (icon) icon.textContent = originalIcon;
+        if (text) text.textContent = originalText;
     }, 2000);
 }
 
 /**
- * Format number with commas (handles undefined/null)
- * @param {number} num - Number to format
- * @returns {string} Formatted string
+ * Format number with commas
  */
 export function formatNumber(num) {
     if (num === undefined || num === null) return '0';