vg-coder-cli 2.0.31 → 2.0.32

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

@@ -1,99 +1,5 @@
-const AI_PROVIDERS = [
-    { id: 'chatgpt', name: 'ChatGPT', url: 'https://chat.openai.com' },
-    { id: 'kimi', name: 'Kimi AI', url: 'https://www.kimi.com' },
-    { id: 'deepseek', name: 'DeepSeek', url: 'https://chat.deepseek.com' },
-    { id: 'gemini', name: 'Google Gemini', url: 'https://gemini.google.com/app' },
-    { id: 'aistudio', name: 'Google AI Studio', url: 'https://aistudio.google.com/prompts/new_chat' },
-    { id: 'gork', name: 'Gork', url: 'https://grok.com' },
-];
-
+// Iframe Manager - Deprecated and Removed
+// This file is kept as a placeholder to prevent build errors if referenced elsewhere
 export function initIframeManager() {
-    const select = document.getElementById('ai-provider-select');
-    const iframe = document.getElementById('ai-iframe');
-    // Removed externalLink reference
-    const placeholderLink = document.getElementById('ai-placeholder-link');
-    
-    // Guide elements
-    const guideContainer = document.getElementById('iframe-placeholder');
-    const guideToggleBtn = document.getElementById('guide-toggle-btn');
-    const guideCloseBtn = document.getElementById('guide-close-btn');
-    const guideDoneBtn = document.getElementById('guide-done-btn');
-
-    if (!select || !iframe) return;
-
-    // 1. Populate options
-    AI_PROVIDERS.forEach(provider => {
-        const option = document.createElement('option');
-        option.value = provider.id;
-        option.textContent = provider.name;
-        select.appendChild(option);
-    });
-
-    // 2. Load saved selection
-    const savedProviderId = localStorage.getItem('ai_provider') || 'chatgpt';
-    const isValid = AI_PROVIDERS.some(p => p.id === savedProviderId);
-    select.value = isValid ? savedProviderId : AI_PROVIDERS[0].id;
-
-    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 = urlWithParam.toString();
-        }, 50);
-
-        // Update placeholder link (without the parameter for direct access)
-        if (placeholderLink) {
-            placeholderLink.href = provider.url;
-            placeholderLink.textContent = `Mở ${provider.name} tab mới ↗`;
-        }
-        
-        localStorage.setItem('ai_provider', providerId);
-    };
-
-    // Initial load
-    updateProvider(select.value);
-
-    // Event listeners
-    select.addEventListener('change', (e) => {
-        updateProvider(e.target.value);
-    });
-
-    // --- GUIDE TOGGLE LOGIC ---
-
-    const showGuide = () => {
-        if (guideContainer) guideContainer.classList.remove('hidden');
-    };
-
-    const hideGuide = () => {
-        if (guideContainer) guideContainer.classList.add('hidden');
-    };
-
-    const reloadIframe = () => {
-        const currentSrc = iframe.src;
-        iframe.src = 'about:blank';
-        setTimeout(() => {
-            iframe.src = currentSrc;
-        }, 100);
-    };
-
-    if (guideToggleBtn) {
-        guideToggleBtn.addEventListener('click', showGuide);
-    }
-
-    if (guideCloseBtn) {
-        guideCloseBtn.addEventListener('click', hideGuide);
-    }
-
-    if (guideDoneBtn) {
-        guideDoneBtn.addEventListener('click', () => {
-            hideGuide();
-            reloadIframe();
-        });
-    }
+    // No-op
 }

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

@@ -1,40 +1,44 @@
 import { API_BASE } from '../config.js';
-import { showToast } from '../utils.js';
+import { showToast, getById } from '../utils.js';
 
 let editor = null;
-let models = new Map(); // Map<filePath, { model: ITextModel, viewState: object }>
+let models = new Map();
 let isMonacoLoaded = false;
 
-// Cấu hình đường dẫn cho AMD Loader của Monaco
 export function initMonaco() {
-    require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' }});
+    if (typeof require !== 'undefined' && require.config) {
+        require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' }});
+    }
 }
 
-/**
- * Đảm bảo Editor đã được khởi tạo
- */
 async function ensureEditor() {
     if (editor) return editor;
 
     return new Promise((resolve) => {
-        require(['vs/editor/editor.main'], function () {
-            const container = document.getElementById('monaco-container');
+        const amdRequire = window.require;
+        
+        if (!amdRequire) {
+            console.error('Monaco Loader not found');
+            return;
+        }
+
+        amdRequire(['vs/editor/editor.main'], function () {
+            const container = getById('monaco-container');
+            if (!container) return;
             
-            // Xác định theme dựa trên theme hiện tại của web
             const currentTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'vs-dark' : 'vs';
 
             editor = monaco.editor.create(container, {
                 value: '',
                 language: 'plaintext',
                 theme: currentTheme,
-                automaticLayout: true, // Tự động resize
+                automaticLayout: true,
                 minimap: { enabled: true },
                 fontSize: 13,
                 fontFamily: 'Menlo, Monaco, "Courier New", monospace',
                 scrollBeyondLastLine: false,
             });
 
-            // Lắng nghe phím tắt Ctrl+S / Cmd+S để lưu
             editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
                 saveCurrentFile();
             });
@@ -45,13 +49,10 @@ async function ensureEditor() {
     });
 }
 
-/**
- * Mở file vào Editor
- */
 export async function openFileInMonaco(path) {
     const editorInstance = await ensureEditor();
+    if (!editorInstance) return;
 
-    // 1. Nếu Model đã tồn tại trong bộ nhớ -> Dùng lại
     if (models.has(path)) {
         const stored = models.get(path);
         editorInstance.setModel(stored.model);
@@ -62,22 +63,14 @@ export async function openFileInMonaco(path) {
         return;
     }
 
-    // 2. Nếu chưa -> Fetch nội dung từ Server
     try {
         const res = await fetch(`${API_BASE}/api/read-file?path=${encodeURIComponent(path)}`);
         const data = await res.json();
 
         if (res.ok) {
-            // Xác định ngôn ngữ từ extension
             const language = getLanguageFromPath(path);
-            
-            // Tạo Model mới
             const newModel = monaco.editor.createModel(data.content, language, monaco.Uri.file(path));
-            
-            // Lưu vào cache
             models.set(path, { model: newModel, viewState: null });
-            
-            // Gán vào Editor
             editorInstance.setModel(newModel);
         } else {
             showToast(`Error opening file: ${data.error}`, 'error');
@@ -87,9 +80,6 @@ export async function openFileInMonaco(path) {
     }
 }
 
-/**
- * Lưu trạng thái View (Scroll, Cursor) trước khi chuyển tab
- */
 export function saveViewState(path) {
     if (editor && models.has(path)) {
         const viewState = editor.saveViewState();
@@ -99,35 +89,26 @@ export function saveViewState(path) {
     }
 }
 
-/**
- * Giải phóng Model khi đóng Tab
- */
 export function disposeModel(path) {
     if (models.has(path)) {
         const stored = models.get(path);
-        stored.model.dispose(); // Quan trọng: Tránh memory leak
+        stored.model.dispose();
         models.delete(path);
     }
 }
 
-/**
- * Cập nhật Theme cho Monaco khi web đổi theme
- */
 export function updateMonacoTheme(theme) {
     if (editor) {
         monaco.editor.setTheme(theme === 'dark' ? 'vs-dark' : 'vs');
     }
 }
 
-/**
- * Lưu file hiện tại
- */
 async function saveCurrentFile() {
     const model = editor.getModel();
     if (!model) return;
 
     const content = model.getValue();
-    const filePath = model.uri.fsPath; // Lấy path từ URI
+    const filePath = model.uri.fsPath;
 
     try {
         const res = await fetch(`${API_BASE}/api/save-file`, {
@@ -146,7 +127,6 @@ async function saveCurrentFile() {
     }
 }
 
-// Helper: Map extension to Monaco Language
 function getLanguageFromPath(path) {
     const ext = path.split('.').pop().toLowerCase();
     const map = {

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

@@ -1,25 +1,15 @@
-// Project Switcher - Multi-project management UI
+import { API_BASE } from '../config.js';
+import { getById, showToast } from '../utils.js';
 
-/**
- * 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 response = await fetch(`${API_BASE}/api/projects`);
         const data = await response.json();
         
         updateProjectSelector(data.projects, data.activeProjectId);
@@ -30,17 +20,12 @@ async function loadProjects() {
     }
 }
 
-/**
- * Update project selector dropdown
- */
 function updateProjectSelector(projects, activeProjectId) {
-    const selector = document.getElementById('project-selector');
+    const selector = getById('project-selector');
     if (!selector) return;
     
-    // Clear existing options
     selector.innerHTML = '';
     
-    // Add projects
     projects.forEach(project => {
         const option = document.createElement('option');
         option.value = project.id;
@@ -50,22 +35,16 @@ function updateProjectSelector(projects, activeProjectId) {
     });
 }
 
-/**
- * Update project count badge
- */
 function updateProjectCount(count) {
-    const badge = document.getElementById('project-count');
+    const badge = getById('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', {
+        const response = await fetch(`${API_BASE}/api/projects/switch`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ projectId })
@@ -74,7 +53,6 @@ export async function switchProject(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,
@@ -84,7 +62,6 @@ export async function switchProject(projectId) {
             });
             window.dispatchEvent(event);
             
-            // Show toast
             showToast(`Switched to: ${data.project.name}`, 'success');
         } else {
             showToast('Failed to switch project', 'error');
@@ -95,59 +72,26 @@ export async function switchProject(projectId) {
     }
 }
 
-/**
- * Setup socket listeners for real-time updates
- */
 function setupSocketListeners() {
     if (typeof io === 'undefined') return;
     
-    const socket = io();
+    const socket = io(API_BASE);
     
-    // 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/resize.js

@@ -1,15 +1,10 @@
-/**
- * Feature: Left Panel Resize
- * Allows the user to drag the right edge of the left panel to resize it.
- */
+import { qs, getById } from '../utils.js';
 
 export function initResizeHandler() {
-    const leftPanel = document.querySelector('.left-panel');
-    const handle = document.getElementById('resize-handler'); // Match the ID we will add in HTML
-    const splitLayout = document.querySelector('.split-layout');
+    const leftPanel = qs('.left-panel');
+    const handle = getById('resize-handler');
 
     if (!leftPanel || !handle) {
-        console.warn('Resize elements not found');
         return;
     }
 
@@ -17,28 +12,23 @@ export function initResizeHandler() {
     let startX = 0;
     let startWidth = 0;
 
-    // Mouse Down
     handle.addEventListener('mousedown', (e) => {
         isResizing = true;
         startX = e.clientX;
         startWidth = leftPanel.getBoundingClientRect().width;
         
-        // Add resizing class for styling/cursor
         document.body.classList.add('resizing');
-        
-        // Disable text selection during drag
         e.preventDefault();
     });
 
-    // Mouse Move
     document.addEventListener('mousemove', (e) => {
         if (!isResizing) return;
 
         requestAnimationFrame(() => {
             const currentX = e.clientX;
             const diffX = currentX - startX;
-            const newWidth = Math.max(250, startWidth + diffX); // Min width 250px
-            const maxWidth = window.innerWidth - 300; // Leave space for right panel
+            const newWidth = Math.max(250, startWidth + diffX);
+            const maxWidth = window.innerWidth - 300;
 
             if (newWidth < maxWidth) {
                 leftPanel.style.flex = `0 0 ${newWidth}px`;
@@ -47,7 +37,6 @@ export function initResizeHandler() {
         });
     });
 
-    // Mouse Up
     document.addEventListener('mouseup', () => {
         if (isResizing) {
             isResizing = false;