vg-coder-cli 2.0.24 → 2.0.26

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

@@ -0,0 +1,230 @@
+/**
+ * Saved Commands Feature
+ * Manages saved terminal commands that can be quickly executed
+ */
+
+let savedCommands = [];
+let editingCommandId = null;
+
+/**
+ * Initialize saved commands on page load
+ */
+export async function initSavedCommands() {
+    await loadSavedCommands();
+    renderCommands();
+}
+
+/**
+ * Load saved commands from backend
+ */
+async function loadSavedCommands() {
+    try {
+        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 = [];
+    }
+}
+
+/**
+ * Save commands to backend (debounced)
+ */
+let saveTimeout = null;
+async function saveCommands() {
+    clearTimeout(saveTimeout);
+    saveTimeout = setTimeout(async () => {
+        try {
+            const response = await fetch('/api/commands/save', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ commands: savedCommands })
+            });
+            const data = await response.json();
+            if (data.success) {
+                console.log(`✓ Saved ${data.count} commands`);
+            }
+        } catch (error) {
+            console.error('Failed to save commands:', error);
+        }
+    }, 500);
+}
+
+/**
+ * Render commands in UI
+ */
+function renderCommands() {
+    const container = document.getElementById('commands-list');
+    const emptyState = document.getElementById('commands-empty-state');
+    
+    if (!container) return;
+
+    if (savedCommands.length === 0) {
+        container.innerHTML = '';
+        if (emptyState) emptyState.style.display = 'block';
+        return;
+    }
+
+    if (emptyState) emptyState.style.display = 'none';
+
+    container.innerHTML = savedCommands.map(cmd => `
+        <div class="command-card" onclick="window.runSavedCommand('${cmd.id}')">
+            <div class="command-card-main">
+                <span class="command-icon">${cmd.icon}</span>
+                <div class="command-info">
+                    <div class="command-name">${escapeHtml(cmd.name)}</div>
+                    <div class="command-text">${escapeHtml(cmd.command)}</div>
+                </div>
+            </div>
+            <div class="command-card-actions">
+                <button class="command-action-btn" onclick="window.editCommand('${cmd.id}'); event.stopPropagation();" title="Edit">
+                    ✏️
+                </button>
+                <button class="command-action-btn" onclick="window.deleteCommand('${cmd.id}'); event.stopPropagation();" title="Delete">
+                    🗑️
+                </button>
+            </div>
+        </div>
+    `).join('');
+}
+
+/**
+ * Open add command modal
+ */
+function openAddCommandModal() {
+    editingCommandId = null;
+    document.getElementById('modal-title').textContent = 'Add Command';
+    document.getElementById('command-icon').value = '🚀';
+    document.getElementById('command-name').value = '';
+    document.getElementById('command-text').value = '';
+    document.getElementById('command-modal').style.display = 'flex';
+    document.getElementById('command-name').focus();
+}
+
+/**
+ * Open edit command modal
+ */
+function editCommand(id) {
+    const command = savedCommands.find(c => c.id === id);
+    if (!command) return;
+
+    editingCommandId = id;
+    document.getElementById('modal-title').textContent = 'Edit Command';
+    document.getElementById('command-icon').value = command.icon;
+    document.getElementById('command-name').value = command.name;
+    document.getElementById('command-text').value = command.command;
+    document.getElementById('command-modal').style.display = 'flex';
+    document.getElementById('command-name').focus();
+}
+
+/**
+ * Close command modal
+ */
+function closeCommandModal() {
+    document.getElementById('command-modal').style.display = 'none';
+    editingCommandId = null;
+}
+
+/**
+ * Handle command form submit
+ */
+function handleCommandFormSubmit(event) {
+    event.preventDefault();
+
+    const icon = document.getElementById('command-icon').value.trim();
+    const name = document.getElementById('command-name').value.trim();
+    const command = document.getElementById('command-text').value.trim();
+
+    if (!icon || !name || !command) return;
+
+    if (editingCommandId) {
+        // Edit existing
+        const index = savedCommands.findIndex(c => c.id === editingCommandId);
+        if (index !== -1) {
+            savedCommands[index] = { ...savedCommands[index], icon, name, command };
+        }
+    } else {
+        // Add new
+        savedCommands.push({
+            id: 'cmd_' + Date.now(),
+            icon,
+            name,
+            command
+        });
+    }
+
+    saveCommands();
+    renderCommands();
+    closeCommandModal();
+}
+
+/**
+ * Delete command with confirmation
+ */
+function deleteCommand(id) {
+    const command = savedCommands.find(c => c.id === id);
+    if (!command) return;
+
+    if (confirm(`Delete command "${command.name}"?`)) {
+        savedCommands = savedCommands.filter(c => c.id !== id);
+        saveCommands();
+        renderCommands();
+    }
+}
+
+/**
+ * Run saved command - open terminal and copy command to clipboard
+ */
+function runSavedCommand(id) {
+    const command = savedCommands.find(c => c.id === id);
+    if (!command) return;
+
+    // Create new terminal
+    if (typeof window.createNewTerminal === 'function') {
+        window.createNewTerminal();
+    }
+    
+    // Copy command to clipboard
+    navigator.clipboard.writeText(command.command).then(() => {
+        // Show toast notification
+        if (typeof window.showToast === 'function') {
+            window.showToast(`📋 Copied: ${command.command}`, 'success');
+        }
+    }).catch(err => {
+        console.error('Failed to copy command:', err);
+        if (typeof window.showToast === 'function') {
+            window.showToast('Failed to copy command', 'error');
+        }
+    });
+}
+
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Global exports for HTML onclick
+window.openAddCommandModal = openAddCommandModal;
+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') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const form = document.getElementById('command-form');
+        if (form) {
+            form.addEventListener('submit', handleCommandFormSubmit);
+        }
+    });
+}
+
+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;