vg-coder-cli 2.0.25 → 2.0.26

package/src/server/views/dashboard.html

@@ -60,20 +60,39 @@
         <!-- CỘT TRÁI: Giao diện VG Coder -->
         <div class="left-panel">
             <div class="container">
+                <!-- Header Layout Redesign -->
                 <div class="header">
-                    <div class="header-content">
-                        <!-- Status Dot -->
-                        <span class="status" id="status" style="font-size: 14px;">●</span>
-                        
-                        <!-- NEW: Project Info Section -->
-                        <div class="project-info">
-                            <div class="project-name" id="project-name">Loading...</div>
-                            <div class="project-meta" id="project-meta">...</div>
+                    <!-- Top Row: Status, Switcher (Title), Actions -->
+                    <div class="header-top-row">
+                        <div class="header-left-group">
+                            <span class="status" id="status" style="font-size: 14px;">●</span>
+                            
+                            <!-- Project Switcher takes primary spot -->
+                            <div class="project-switcher">
+                                <select id="project-selector" class="project-selector" onchange="window.switchProject(this.value)" title="Switch Project">
+                                    <option value="">Loading...</option>
+                                </select>
+                                <span class="project-count" id="project-count">1 project</span>
+                            </div>
+                        </div>
+
+                        <!-- Right Actions -->
+                        <div class="header-actions">
+                            <button class="stop-server-btn" id="stop-server-btn" onclick="window.stopServer()" title="Stop Server">
+                                🛑
+                            </button>
+                            <button class="theme-toggle" id="theme-toggle" title="Toggle Dark Mode">
+                                <span id="theme-icon">🌙</span>
+                            </button>
                         </div>
                     </div>
-                    <button class="theme-toggle" id="theme-toggle" title="Toggle Dark Mode">
-                        <span id="theme-icon">🌙</span>
-                    </button>
+
+                    <!-- Bottom Row: Meta Info (Path/Type) -->
+                    <div class="header-bottom-row">
+                        <div class="project-meta" id="project-meta">...</div>
+                        <!-- Hidden element to keep JS happy -->
+                        <div id="project-name" style="display: none;"></div>
+                    </div>
                 </div>
 
                 <!-- Saved Commands Panel -->
@@ -324,6 +343,70 @@
         </div>
     </div>
     
+    <!-- VG Coder Parent Context Detector -->
+    <script>
+        // Listener for nested iframe detection
+        // When extension's controller.ts sends VG_CODER_PING, we reply with VG_CODER_PARENT
+        window.addEventListener('message', (event) => {
+            if (event.data?.type === 'VG_CODER_PING') {
+                // Confirm this is VG Coder parent context
+                event.source.postMessage({ type: 'VG_CODER_PARENT' }, '*');
+                console.log('📡 Responded to VG_CODER_PING from iframe:', event.origin);
+            }
+        });
+    </script>
+    
+    <!-- Embedded Mode Detection -->
+    <script>
+        // When dashboard is loaded with ?embedded=true (inside AI chat page),
+        // hide the AI tab and iframe to prevent nested structure
+        (function() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const isEmbedded = urlParams.has('embedded');
+            
+            if (isEmbedded) {
+                console.log('🎯 Embedded mode detected - hiding AI iframe tab');
+                
+                // Wait for DOM to be ready
+                if (document.readyState === 'loading') {
+                    document.addEventListener('DOMContentLoaded', hideAITab);
+                } else {
+                    hideAITab();
+                }
+                
+                function hideAITab() {
+                    // Hide AI tab
+                    const aiTab = document.getElementById('ai-tab');
+                    if (aiTab) {
+                        aiTab.style.display = 'none';
+                        console.log('✅ AI tab hidden');
+                    }
+                    
+                    // Hide AI iframe container
+                    const aiContainer = document.querySelector('.ai-iframe-container');
+                    if (aiContainer) {
+                        aiContainer.style.display = 'none';
+                        console.log('✅ AI iframe container hidden');
+                    }
+                    
+                    // Switch to first editor tab if exists, or show monaco by default
+                    const fileTabsContainer = document.getElementById('file-tabs-container');
+                    if (fileTabsContainer && fileTabsContainer.children.length > 0) {
+                        // Click first file tab
+                        const firstTab = fileTabsContainer.children[0];
+                        if (firstTab) firstTab.click();
+                    } else {
+                        // Show monaco editor as default
+                        const monacoContainer = document.getElementById('monaco-container');
+                        if (monacoContainer) {
+                            monacoContainer.classList.remove('view-mode-hidden');
+                        }
+                    }
+                }
+            }
+        })();
+    </script>
+    
     <!-- Smart Log Copy Utilities -->
     <script src="/js/utils/log-utils.js"></script>
     <script src="/js/utils/smart-copy-engine.js"></script>

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

@@ -22,6 +22,7 @@ async function loadSavedCommands() {
         const response = await fetch('/api/commands/load');
         const data = await response.json();
         savedCommands = data.commands || [];
+        renderCommands(); // Re-render after loading
     } catch (error) {
         console.error('Failed to load commands:', error);
         savedCommands = [];
@@ -214,6 +215,7 @@ window.editCommand = editCommand;
 window.closeCommandModal = closeCommandModal;
 window.deleteCommand = deleteCommand;
 window.runSavedCommand = runSavedCommand;
+window.loadSavedCommands = loadSavedCommands; // Export for project switching
 
 // Setup form submit handler
 if (typeof document !== 'undefined') {
@@ -225,4 +227,4 @@ if (typeof document !== 'undefined') {
     });
 }
 
-export { openAddCommandModal, editCommand, deleteCommand, runSavedCommand };
+export { openAddCommandModal, editCommand, deleteCommand, runSavedCommand, loadSavedCommands };

package/src/server/views/js/features/iframe-manager.js

@@ -37,13 +37,17 @@ export function initIframeManager() {
     const updateProvider = (providerId) => {
         const provider = AI_PROVIDERS.find(p => p.id === providerId) || AI_PROVIDERS[0];
         
+        // Add VG Coder context parameter to prevent nested iframe injection
+        const urlWithParam = new URL(provider.url);
+        urlWithParam.searchParams.set('vg_coder_context', 'true');
+        
         // Reset iframe source to trigger reload
         iframe.src = 'about:blank';
         setTimeout(() => {
-            iframe.src = provider.url;
+            iframe.src = urlWithParam.toString();
         }, 50);
 
-        // Update placeholder link only (external link removed from UI)
+        // Update placeholder link (without the parameter for direct access)
         if (placeholderLink) {
             placeholderLink.href = provider.url;
             placeholderLink.textContent = `Mở ${provider.name} tab mới ↗`;

package/src/server/views/js/features/project-switcher.js

@@ -0,0 +1,153 @@
+// Project Switcher - Multi-project management UI
+
+/**
+ * Initialize project switcher
+ */
+export async function initProjectSwitcher() {
+    // Load initial project list
+    await loadProjects();
+    
+    // Poll for project updates every 5 seconds
+    setInterval(loadProjects, 5000);
+    
+    // Listen for socket events
+    setupSocketListeners();
+}
+
+/**
+ * Load and display all projects
+ */
+async function loadProjects() {
+    try {
+        const response = await fetch('/api/projects');
+        const data = await response.json();
+        
+        updateProjectSelector(data.projects, data.activeProjectId);
+        updateProjectCount(data.totalProjects);
+        
+    } catch (error) {
+        console.error('Failed to load projects:', error);
+    }
+}
+
+/**
+ * Update project selector dropdown
+ */
+function updateProjectSelector(projects, activeProjectId) {
+    const selector = document.getElementById('project-selector');
+    if (!selector) return;
+    
+    // Clear existing options
+    selector.innerHTML = '';
+    
+    // Add projects
+    projects.forEach(project => {
+        const option = document.createElement('option');
+        option.value = project.id;
+        option.textContent = project.name;
+        option.selected = project.id === activeProjectId;
+        selector.appendChild(option);
+    });
+}
+
+/**
+ * Update project count badge
+ */
+function updateProjectCount(count) {
+    const badge = document.getElementById('project-count');
+    if (!badge) return;
+    
+    badge.textContent = `${count} project${count !== 1 ? 's' : ''}`;
+}
+
+/**
+ * Switch to a different project
+ */
+export async function switchProject(projectId) {
+    try {
+        const response = await fetch('/api/projects/switch', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ projectId })
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            // Emit custom event for other components to react
+            const event = new CustomEvent('project-switched', {
+                detail: {
+                    projectId,
+                    projectName: data.project.name,
+                    project: data.project
+                }
+            });
+            window.dispatchEvent(event);
+            
+            // Show toast
+            showToast(`Switched to: ${data.project.name}`, 'success');
+        } else {
+            showToast('Failed to switch project', 'error');
+        }
+    } catch (error) {
+        console.error('Failed to switch project:', error);
+        showToast('Error switching project', 'error');
+    }
+}
+
+/**
+ * Setup socket listeners for real-time updates
+ */
+function setupSocketListeners() {
+    if (typeof io === 'undefined') return;
+    
+    const socket = io();
+    
+    // New project registered
+    socket.on('project:registered', (data) => {
+        console.log('New project registered:', data);
+        loadProjects();
+        showToast(`New project joined: ${data.name}`, 'info');
+    });
+    
+    // Project switched
+    socket.on('project:switched', (data) => {
+        console.log('Project switched:', data);
+        loadProjects();
+    });
+    
+    // Project removed
+    socket.on('project:removed', (data) => {
+        console.log('Project removed:', data);
+        loadProjects();
+    });
+}
+
+/**
+ * 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);
+}
+
+// Export for global access
+window.switchProject = switchProject;

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

@@ -184,12 +184,33 @@ export function createNewTerminal() {
         }
     });
 
-    // 7. Init Backend Process
-    socket.emit('terminal:init', { 
-        termId, 
-        cols: term.cols, 
-        rows: term.rows 
-    });
+    // 7. Get current project ID from API
+    let currentProjectId = null;
+    fetch('/api/projects')
+        .then(res => res.json())
+        .then(data => {
+            currentProjectId = data.activeProjectId;
+            
+            // Store in session
+            activeTerminals.get(termId).projectId = currentProjectId;
+            
+            // Init Backend Process with projectId
+            socket.emit('terminal:init', { 
+                termId, 
+                cols: term.cols, 
+                rows: term.rows,
+                projectId: currentProjectId
+            });
+        })
+        .catch(err => {
+            console.error('Failed to get project info:', err);
+            // Fallback without projectId
+            socket.emit('terminal:init', { 
+                termId, 
+                cols: term.cols, 
+                rows: term.rows
+            });
+        });
     
     // 8. Initial token count update
     setTimeout(() => updateTokenCounts(termId), 100);
@@ -477,6 +498,22 @@ function clearTerminal(termId) {
     showToast('🗑️ Terminal cleared', 'info');
 }
 
+/**
+ * Update terminal visibility based on active project
+ * @param {string} activeProjectId - Active project ID
+ */
+function updateTerminalVisibility(activeProjectId) {
+    activeTerminals.forEach((session, termId) => {
+        const shouldShow = !session.projectId || session.projectId === activeProjectId;
+        session.element.style.display = shouldShow ? 'block' : 'none';
+    });
+    
+    const visibleCount = Array.from(activeTerminals.values())
+        .filter(s => s.element.style.display !== 'none').length;
+    
+    console.log(`Updated terminal visibility: ${visibleCount} visible for project ${activeProjectId}`);
+}
+
 // Global Exports for HTML onclick
 window.createNewTerminal = createNewTerminal;
 window.closeTerminal = closeTerminalUI;
@@ -484,3 +521,4 @@ window.toggleMinimize = toggleMinimize;
 window.toggleMaximize = toggleMaximize;
 window.copyTerminalLog = copyTerminalLog;
 window.clearTerminal = clearTerminal;
+window.updateTerminalVisibility = updateTerminalVisibility;

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

@@ -10,6 +10,7 @@ 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';
+import { initProjectSwitcher } from './features/project-switcher.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Load system prompt text
@@ -47,12 +48,49 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Initialize Saved Commands
     initSavedCommands();
     
+    // Initialize Project Switcher
+    await initProjectSwitcher();
+    
     // Set default tab to AI Assistant
     if (window.switchTab) {
         window.switchTab('ai-assistant');
     }
 });
 
+// Global event handler for project switches
+window.addEventListener('project-switched', async (event) => {
+    const { projectId, projectName, project } = event.detail;
+    console.log(`Project switched to: ${projectName}`);
+    
+    // Reload project info
+    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
+});
+
 async function checkServerStatus() {
     const statusEl = document.getElementById('status');
     const isHealthy = await checkHealth();
@@ -173,3 +211,26 @@ window.copyChromeUrl = function(event) {
         }, 2000);
     });
 }
+
+window.stopServer = async function() {
+    if (!confirm('Are you sure you want to stop the server?')) {
+        return;
+    }
+    
+    try {
+        await fetch('/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>
+            `;
+        }, 1000);
+    } catch (error) {
+        console.error('Failed to stop server:', error);
+    }
+}