vg-coder-cli 2.0.30 → 2.0.32

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

@@ -1,43 +1,32 @@
-/**
- * Saved Commands Feature
- * Manages saved terminal commands that can be quickly executed
- */
+import { API_BASE } from '../config.js';
+import { getById, showToast } from '../utils.js';
 
 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 response = await fetch(`${API_BASE}/api/commands/load`);
         const data = await response.json();
         savedCommands = data.commands || [];
-        renderCommands(); // Re-render after loading
+        renderCommands();
     } 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', {
+            const response = await fetch(`${API_BASE}/api/commands/save`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ commands: savedCommands })
@@ -52,12 +41,9 @@ async function saveCommands() {
     }, 500);
 }
 
-/**
- * Render commands in UI
- */
 function renderCommands() {
-    const container = document.getElementById('commands-list');
-    const emptyState = document.getElementById('commands-empty-state');
+    const container = getById('commands-list');
+    const emptyState = getById('commands-empty-state');
     
     if (!container) return;
 
@@ -90,63 +76,50 @@ function renderCommands() {
     `).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();
+    getById('modal-title').textContent = 'Add Command';
+    getById('command-icon').value = '🚀';
+    getById('command-name').value = '';
+    getById('command-text').value = '';
+    getById('command-modal').style.display = 'flex';
+    getById('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();
+    getById('modal-title').textContent = 'Edit Command';
+    getById('command-icon').value = command.icon;
+    getById('command-name').value = command.name;
+    getById('command-text').value = command.command;
+    getById('command-modal').style.display = 'flex';
+    getById('command-name').focus();
 }
 
-/**
- * Close command modal
- */
 function closeCommandModal() {
-    document.getElementById('command-modal').style.display = 'none';
+    const modal = getById('command-modal');
+    if (modal) 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();
+    const icon = getById('command-icon').value.trim();
+    const name = getById('command-name').value.trim();
+    const command = getById('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,
@@ -160,9 +133,6 @@ function handleCommandFormSubmit(event) {
     closeCommandModal();
 }
 
-/**
- * Delete command with confirmation
- */
 function deleteCommand(id) {
     const command = savedCommands.find(c => c.id === id);
     if (!command) return;
@@ -174,57 +144,40 @@ function deleteCommand(id) {
     }
 }
 
-/**
- * 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');
-        }
+        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');
-        }
+        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);
-        }
-    });
-}
+window.loadSavedCommands = loadSavedCommands;
+
+setTimeout(() => {
+    const form = getById('command-form');
+    if (form) {
+        form.addEventListener('submit', handleCommandFormSubmit);
+    }
+}, 500);
 
 export { openAddCommandModal, editCommand, deleteCommand, runSavedCommand, loadSavedCommands };

package/src/server/views/js/features/editor-tabs.js

@@ -1,50 +1,34 @@
-import { openFileInMonaco, saveViewState, disposeModel } from './monaco-manager.js';
+import { openFileInViewer } from './code-viewer.js';
+import { getById, qsa, qs } from '../utils.js';
 
-let activeTabs = []; // Array of { path, name, icon }
-let currentPath = 'ai-assistant'; // Default
+let activeTabs = [];
+let currentPath = null;
 
 export function initEditorTabs() {
     renderTabs();
 }
 
 export async function openFileTab(path, name, icon = '📄') {
-    // 1. Ẩn AI, hiện Monaco
+    // Switch to code mode
     toggleViewMode('code');
 
-    // 2. Lưu state tab cũ
-    if (currentPath && currentPath !== 'ai-assistant' && currentPath !== path) {
-        saveViewState(currentPath);
-    }
-
-    // 3. Logic Tabs Array
     const existingTab = activeTabs.find(t => t.path === path);
     if (!existingTab) {
         activeTabs.push({ path, name, icon });
         renderTabs();
     }
     
-    // 4. Update UI
     currentPath = path;
     updateTabUI();
 
-    // 5. Open in Monaco
-    await openFileInMonaco(path);
+    await openFileInViewer(path);
 }
 
 export function switchTab(path) {
-    if (currentPath && currentPath !== 'ai-assistant') {
-        saveViewState(currentPath);
-    }
-
     currentPath = path;
     updateTabUI();
-
-    if (path === 'ai-assistant') {
-        toggleViewMode('ai');
-    } else {
-        toggleViewMode('code');
-        openFileInMonaco(path);
-    }
+    toggleViewMode('code');
+    openFileInViewer(path);
 }
 
 export function closeTab(event, path) {
@@ -54,22 +38,23 @@ export function closeTab(event, path) {
     if (index === -1) return;
 
     activeTabs.splice(index, 1);
-    disposeModel(path);
 
     if (currentPath === path) {
         if (activeTabs.length > 0) {
             const nextTab = activeTabs[activeTabs.length - 1];
             switchTab(nextTab.path);
         } else {
-            switchTab('ai-assistant');
+            currentPath = null;
+            updateTabUI();
+            const container = getById('code-viewer-container');
+            if (container) container.innerHTML = '<div class="cv-empty">No file open</div>'; 
         }
     }
     renderTabs();
 }
 
 function renderTabs() {
-    // Chỉ render các file tabs vào container con
-    const container = document.getElementById('file-tabs-container');
+    const container = getById('file-tabs-container');
     if (!container) return;
     
     let html = '';
@@ -91,13 +76,7 @@ function renderTabs() {
 }
 
 function updateTabUI() {
-    // 1. Update Static AI Tab
-    const aiTab = document.getElementById('ai-tab');
-    if (currentPath === 'ai-assistant') aiTab.classList.add('active');
-    else aiTab.classList.remove('active');
-
-    // 2. Update Dynamic Tabs
-    const fileTabs = document.querySelectorAll('#file-tabs-container .tab-item');
+    const fileTabs = qsa('#file-tabs-container .tab-item');
     fileTabs.forEach(el => {
         if (el.dataset.path === currentPath) el.classList.add('active');
         else el.classList.remove('active');
@@ -105,19 +84,13 @@ function updateTabUI() {
 }
 
 function toggleViewMode(mode) {
-    const aiContainer = document.querySelector('.ai-iframe-container');
-    const monacoContainer = document.getElementById('monaco-container');
-
-    if (mode === 'code') {
-        aiContainer.classList.add('view-mode-hidden');
-        monacoContainer.classList.remove('view-mode-hidden');
-    } else {
-        aiContainer.classList.remove('view-mode-hidden');
-        monacoContainer.classList.add('view-mode-hidden');
-    }
+    // Placeholder for view switching logic if needed in future
+    // For now, it just ensures the container is visible if we were to hide it
+    const container = getById('code-viewer-container');
+    if (container) container.style.display = 'block';
 }
 
-// Export global helpers
+// Expose to window for onclick handlers
 window.switchTab = switchTab;
 window.closeTab = closeTab;
 window.openFileTab = openFileTab;

package/src/server/views/js/features/git-view.js

@@ -1,23 +1,25 @@
 import { getGitStatus, getGitDiff, stageFile, unstageFile, commitChanges, discardChange } from '../api.js';
-import { showToast } from '../utils.js';
+import { showToast, getById, qsa } from '../utils.js';
+// FIX: Import Diff2HtmlUI from npm package
+import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui';
+
+let isGitMode = false;
+let currentStaged = [];
+let currentChanges = [];
 
 export function initGitView() {
-    const toggleBtn = document.getElementById('git-view-toggle');
-    const refreshBtn = document.getElementById('git-refresh-btn');
+    const toggleBtn = getById('git-view-toggle');
+    const refreshBtn = getById('git-refresh-btn');
     
     if (toggleBtn) toggleBtn.addEventListener('click', toggleGitMode);
     if (refreshBtn) refreshBtn.addEventListener('click', loadGitData);
 }
 
-let isGitMode = false;
-let currentStaged = [];
-let currentChanges = [];
-
 async function toggleGitMode() {
-    const gitContainer = document.getElementById('git-view-container');
-    const toggleBtn = document.getElementById('git-view-toggle');
-    const refreshBtn = document.getElementById('git-refresh-btn');
-    const toggleText = document.getElementById('git-toggle-text');
+    const gitContainer = getById('git-view-container');
+    const toggleBtn = getById('git-view-toggle');
+    const refreshBtn = getById('git-refresh-btn');
+    const toggleText = getById('git-toggle-text');
 
     isGitMode = !isGitMode;
 
@@ -36,9 +38,8 @@ async function toggleGitMode() {
 }
 
 async function loadGitData() {
-    const container = document.getElementById('git-view-container');
+    const container = getById('git-view-container');
     
-    // Initial Structure if empty
     if (!container.querySelector('.git-sidebar')) {
         container.innerHTML = `
             <div class="git-sidebar">
@@ -77,34 +78,28 @@ async function loadGitData() {
             </div>
         `;
         
-        // Bind Actions
-        document.getElementById('stage-all').addEventListener('click', async (e) => {
-            e.stopPropagation();
-            await handleStage('*');
-        });
-        document.getElementById('unstage-all').addEventListener('click', async (e) => {
-             e.stopPropagation();
-             await handleUnstage('*');
-        });
-        document.getElementById('discard-all').addEventListener('click', async (e) => {
-             e.stopPropagation();
-             await handleDiscard('*');
-        });
-        
-        // Commit Actions
-        const commitBtn = document.getElementById('git-commit-btn');
-        const commitInput = document.getElementById('git-commit-message');
-        
-        commitBtn.addEventListener('click', handleCommit);
-        commitInput.addEventListener('keydown', (e) => {
-            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                e.preventDefault();
-                handleCommit();
-            }
-        });
+        setTimeout(() => {
+            const stageAll = getById('stage-all');
+            const unstageAll = getById('unstage-all');
+            const discardAll = getById('discard-all');
+            const commitBtn = getById('git-commit-btn');
+            const commitInput = getById('git-commit-message');
+
+            if(stageAll) stageAll.addEventListener('click', async (e) => { e.stopPropagation(); await handleStage('*'); });
+            if(unstageAll) unstageAll.addEventListener('click', async (e) => { e.stopPropagation(); await handleUnstage('*'); });
+            if(discardAll) discardAll.addEventListener('click', async (e) => { e.stopPropagation(); await handleDiscard('*'); });
+            
+            if(commitBtn) commitBtn.addEventListener('click', handleCommit);
+            if(commitInput) commitInput.addEventListener('keydown', (e) => {
+                if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                    e.preventDefault();
+                    handleCommit();
+                }
+            });
+        }, 0);
     }
 
-    const refreshBtn = document.getElementById('git-refresh-btn');
+    const refreshBtn = getById('git-refresh-btn');
     if(refreshBtn) refreshBtn.disabled = true;
 
     try {
@@ -120,9 +115,9 @@ async function loadGitData() {
 }
 
 async function handleCommit() {
-    const input = document.getElementById('git-commit-message');
+    const input = getById('git-commit-message');
     const message = input.value.trim();
-    const btn = document.getElementById('git-commit-btn');
+    const btn = getById('git-commit-btn');
 
     if (!message) {
         showToast('Please enter a commit message', 'error');
@@ -152,31 +147,35 @@ async function handleCommit() {
 }
 
 function renderTrees() {
-    // 1. Render Staged
-    const treeStaged = document.getElementById('tree-staged');
-    document.getElementById('badge-staged').textContent = currentStaged.length;
-    document.getElementById('unstage-all').style.display = currentStaged.length > 0 ? 'block' : 'none';
-    treeStaged.innerHTML = '';
+    const treeStaged = getById('tree-staged');
+    const badgeStaged = getById('badge-staged');
+    const unstageAll = getById('unstage-all');
     
-    if (currentStaged.length > 0) {
-        const rootStaged = buildFileTree(currentStaged);
-        renderTreeNodes(rootStaged, treeStaged, 'staged', 0);
+    if (badgeStaged) badgeStaged.textContent = currentStaged.length;
+    if (unstageAll) unstageAll.style.display = currentStaged.length > 0 ? 'block' : 'none';
+    if (treeStaged) {
+        treeStaged.innerHTML = '';
+        if (currentStaged.length > 0) {
+            const rootStaged = buildFileTree(currentStaged);
+            renderTreeNodes(rootStaged, treeStaged, 'staged', 0);
+        }
     }
 
-    // 2. Render Changes
-    const treeChanges = document.getElementById('tree-changes');
-    document.getElementById('badge-changes').textContent = currentChanges.length;
-    document.getElementById('discard-all').style.display = currentChanges.length > 0 ? 'block' : 'none';
-    treeChanges.innerHTML = '';
-    
-    if (currentChanges.length > 0) {
-        const rootChanges = buildFileTree(currentChanges);
-        renderTreeNodes(rootChanges, treeChanges, 'changes', 0);
+    const treeChanges = getById('tree-changes');
+    const badgeChanges = getById('badge-changes');
+    const discardAll = getById('discard-all');
+
+    if (badgeChanges) badgeChanges.textContent = currentChanges.length;
+    if (discardAll) discardAll.style.display = currentChanges.length > 0 ? 'block' : 'none';
+    if (treeChanges) {
+        treeChanges.innerHTML = '';
+        if (currentChanges.length > 0) {
+            const rootChanges = buildFileTree(currentChanges);
+            renderTreeNodes(rootChanges, treeChanges, 'changes', 0);
+        }
     }
 }
 
-// --- TREE LOGIC ---
-
 function buildFileTree(files) {
     const root = {};
     files.forEach(file => {
@@ -210,18 +209,15 @@ function renderTreeNodes(nodes, container, type, depth) {
         const li = document.createElement('li');
         li.className = 'git-tree-node';
 
-        // --- CONTENT ROW ---
         const content = document.createElement('div');
         content.className = 'git-tree-content';
         content.style.paddingLeft = (depth * 16 + 8) + 'px';
 
-        // Arrow
         const arrow = document.createElement('span');
         arrow.className = 'git-arrow';
         arrow.textContent = isFolder ? '▼' : '';
         content.appendChild(arrow);
 
-        // Icon
         const iconSpan = document.createElement('span');
         iconSpan.className = 'git-icon';
         if (isFolder) {
@@ -233,18 +229,15 @@ function renderTreeNodes(nodes, container, type, depth) {
         }
         content.appendChild(iconSpan);
 
-        // Label
         const label = document.createElement('span');
         label.className = isFolder ? 'git-label git-dir-label' : 'git-label git-file-label';
         label.textContent = node.name;
         content.appendChild(label);
 
-        // Actions
         if (!isFolder && node.fileData) {
             const actions = document.createElement('div');
             actions.className = 'git-actions';
             
-            // Discard Button (Only for Changes)
             if (type === 'changes') {
                 const discardBtn = document.createElement('button');
                 discardBtn.className = 'git-btn-action destructive';
@@ -254,7 +247,6 @@ function renderTreeNodes(nodes, container, type, depth) {
                 actions.appendChild(discardBtn);
             }
 
-            // Stage/Unstage Button
             const btn = document.createElement('button');
             btn.className = 'git-btn-action';
             if (type === 'staged') {
@@ -270,13 +262,12 @@ function renderTreeNodes(nodes, container, type, depth) {
             content.appendChild(actions);
         }
 
-        // Click Handler
         content.addEventListener('click', (e) => {
             e.stopPropagation();
             if (isFolder) {
                 li.classList.toggle('collapsed');
             } else {
-                document.querySelectorAll('.git-tree-content').forEach(el => el.classList.remove('selected'));
+                qsa('.git-tree-content').forEach(el => el.classList.remove('selected'));
                 content.classList.add('selected');
                 loadDiffView(node.fileData.path, type);
             }
@@ -284,7 +275,6 @@ function renderTreeNodes(nodes, container, type, depth) {
 
         li.appendChild(content);
 
-        // --- CHILDREN ---
         if (isFolder) {
             const ul = document.createElement('ul');
             renderTreeNodes(node.children, ul, type, depth + 1);
@@ -303,8 +293,6 @@ function getStatusIcon(status) {
     return '?';
 }
 
-// --- ACTIONS ---
-
 async function handleStage(path) {
     try {
         await stageFile(path);
@@ -341,18 +329,12 @@ async function handleDiscard(path) {
 }
 
 async function loadDiffView(filePath, type) {
-    const viewer = document.getElementById('git-diff-viewer');
+    const viewer = getById('git-diff-viewer');
     viewer.innerHTML = '<div class="git-empty-state">Loading diff...</div>';
     
-    // SAFE CHECK FOR UI LIBRARY
-    // We check window.Diff2HtmlUI first (standard for bundles)
-    const UIConstructor = window.Diff2HtmlUI;
+    // FIX: Using imported class
+    const UIConstructor = Diff2HtmlUI;
 
-    if (!UIConstructor) {
-        viewer.innerHTML = '<div class="git-empty-state" style="color:#f85149">Error: Diff2HtmlUI library not loaded correctly.<br>Please check your internet connection or CDN availability.</div>';
-        return;
-    }
-    
     try {
         const diff = await getGitDiff(filePath, type === 'staged' ? 'staged' : 'working');