vg-coder-cli 2.0.15 → 2.0.17

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

@@ -1,16 +1,17 @@
-import { getGitDiff } from '../api.js';
-import { showToast, showLoading } from '../utils.js';
+import { getGitStatus, getGitDiff, stageFile, unstageFile, commitChanges, discardChange } from '../api.js';
+import { showToast } from '../utils.js';
 
 export function initGitView() {
-    console.log('[GitView] Initializing...');
     const toggleBtn = document.getElementById('git-view-toggle');
     const refreshBtn = document.getElementById('git-refresh-btn');
     
     if (toggleBtn) toggleBtn.addEventListener('click', toggleGitMode);
-    if (refreshBtn) refreshBtn.addEventListener('click', loadGitChanges);
+    if (refreshBtn) refreshBtn.addEventListener('click', loadGitData);
 }
 
 let isGitMode = false;
+let currentStaged = [];
+let currentChanges = [];
 
 async function toggleGitMode() {
     const gitContainer = document.getElementById('git-view-container');
@@ -19,20 +20,13 @@ async function toggleGitMode() {
     const toggleText = document.getElementById('git-toggle-text');
 
     isGitMode = !isGitMode;
-    console.log('[GitView] Toggle Mode:', isGitMode);
 
     if (isGitMode) {
         gitContainer.classList.add('active');
         toggleBtn.classList.add('active');
         if (toggleText) toggleText.textContent = 'Close Changes';
         if (refreshBtn) refreshBtn.style.display = 'flex';
-        
-        // Debug kích thước container
-        const rect = gitContainer.getBoundingClientRect();
-        console.log('[GitView] Container Size:', rect.width, 'x', rect.height);
-
-        // FIX: Always load changes when opening, removing the empty check
-        await loadGitChanges();
+        await loadGitData();
     } else {
         gitContainer.classList.remove('active');
         toggleBtn.classList.remove('active');
@@ -41,77 +35,337 @@ async function toggleGitMode() {
     }
 }
 
-async function loadGitChanges() {
-    const gitContainer = document.getElementById('git-view-container');
-    const refreshBtn = document.getElementById('git-refresh-btn');
+async function loadGitData() {
+    const container = document.getElementById('git-view-container');
     
-    console.log('[GitView] Loading changes...');
+    // Initial Structure if empty
+    if (!container.querySelector('.git-sidebar')) {
+        container.innerHTML = `
+            <div class="git-sidebar">
+                <div class="git-commit-section">
+                    <textarea id="git-commit-message" class="git-commit-input" placeholder="Message (⌘Enter to commit)" rows="1"></textarea>
+                    <button id="git-commit-btn" class="git-commit-btn">
+                        <span>✓</span> Commit
+                    </button>
+                </div>
+                <div class="git-section">
+                    <div class="git-section-header" id="header-staged">
+                        <div style="display:flex;align-items:center;gap:5px;">
+                            <span>STAGED CHANGES</span>
+                            <span class="git-badge" id="badge-staged">0</span>
+                        </div>
+                        <span class="git-btn-action" id="unstage-all" title="Unstage All" style="display:none;">-</span>
+                    </div>
+                    <ul class="git-tree-root" id="tree-staged"></ul>
+                </div>
+                <div class="git-section">
+                    <div class="git-section-header" id="header-changes">
+                        <div style="display:flex;align-items:center;gap:5px;">
+                            <span>CHANGES</span>
+                            <span class="git-badge" id="badge-changes">0</span>
+                        </div>
+                        <div style="display:flex;gap:5px;">
+                            <span class="git-btn-action destructive" id="discard-all" title="Discard All Changes">↺</span>
+                            <span class="git-btn-action" id="stage-all" title="Stage All">+</span>
+                        </div>
+                    </div>
+                    <ul class="git-tree-root" id="tree-changes"></ul>
+                </div>
+            </div>
+            <div class="git-diff-area" id="git-diff-viewer">
+                <div class="git-empty-state">Select a file to view changes</div>
+            </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();
+            }
+        });
+    }
+
+    const refreshBtn = document.getElementById('git-refresh-btn');
+    if(refreshBtn) refreshBtn.disabled = true;
+
+    try {
+        const { staged, changes } = await getGitStatus();
+        currentStaged = staged;
+        currentChanges = changes;
+        renderTrees();
+    } catch (err) {
+        showToast('Error loading git status: ' + err.message, 'error');
+    } finally {
+        if(refreshBtn) refreshBtn.disabled = false;
+    }
+}
+
+async function handleCommit() {
+    const input = document.getElementById('git-commit-message');
+    const message = input.value.trim();
+    const btn = document.getElementById('git-commit-btn');
+
+    if (!message) {
+        showToast('Please enter a commit message', 'error');
+        input.focus();
+        return;
+    }
+
+    if (currentStaged.length === 0) {
+        showToast('Nothing to commit. Stage changes first.', 'error');
+        return;
+    }
+
+    btn.disabled = true;
+    btn.innerHTML = '<span>...</span> Committing...';
+
+    try {
+        await commitChanges(message);
+        showToast('Commit successful', 'success');
+        input.value = '';
+        await loadGitData();
+    } catch (err) {
+        showToast('Commit failed: ' + err.message, 'error');
+    } finally {
+        btn.disabled = false;
+        btn.innerHTML = '<span>✓</span> Commit';
+    }
+}
+
+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 = '';
     
-    if (refreshBtn) {
-        refreshBtn.style.opacity = '0.5';
-        refreshBtn.disabled = true;
+    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 = '';
     
-    // Only show loading if we are replacing content or it's empty
-    gitContainer.innerHTML = '<div class="git-loading-msg">Loading git changes... (Check Console if stuck)</div>';
+    if (currentChanges.length > 0) {
+        const rootChanges = buildFileTree(currentChanges);
+        renderTreeNodes(rootChanges, treeChanges, 'changes', 0);
+    }
+}
 
-    try {
-        // Kiểm tra thư viện
-        if (typeof Diff2HtmlUI === 'undefined') {
-            throw new Error('Thư viện Diff2HtmlUI chưa được load!');
-        }
-        if (typeof hljs === 'undefined') {
-            console.warn('⚠️ Highlight.js chưa được load!');
-        }
+// --- TREE LOGIC ---
+
+function buildFileTree(files) {
+    const root = {};
+    files.forEach(file => {
+        const parts = file.path.split('/');
+        let current = root;
+        parts.forEach((part, index) => {
+            if (!current[part]) {
+                current[part] = { name: part, children: {}, fileData: null };
+            }
+            if (index === parts.length - 1) {
+                current[part].fileData = file;
+            }
+            current = current[part].children;
+        });
+    });
+    return root;
+}
+
+function renderTreeNodes(nodes, container, type, depth) {
+    const items = Object.values(nodes);
+    items.sort((a, b) => {
+         const aIsFolder = Object.keys(a.children).length > 0;
+         const bIsFolder = Object.keys(b.children).length > 0;
+         if (aIsFolder && !bIsFolder) return -1;
+         if (!aIsFolder && bIsFolder) return 1;
+         return a.name.localeCompare(b.name);
+    });
+
+    items.forEach(node => {
+        const isFolder = Object.keys(node.children).length > 0;
+        const li = document.createElement('li');
+        li.className = 'git-tree-node';
 
-        const diffString = await getGitDiff();
-        console.log('[GitView] Diff received, length:', diffString?.length);
+        // --- CONTENT ROW ---
+        const content = document.createElement('div');
+        content.className = 'git-tree-content';
+        content.style.paddingLeft = (depth * 16 + 8) + 'px';
 
-        if (!diffString || !diffString.trim()) {
-            gitContainer.innerHTML = `
-                <div class="git-loading-msg">
-                    <div style="font-size:30px;">✨</div>
-                    <p>No changes detected</p>
-                </div>`;
+        // 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) {
+            iconSpan.textContent = '📂';
         } else {
-            console.log('[GitView] Rendering diff...');
-            
-            // Cấu hình Diff2Html
-            const configuration = {
-                drawFileList: true,
-                fileListToggle: false,
-                fileListStartVisible: true,
-                fileContentToggle: false,
-                matching: 'lines',
-                outputFormat: 'side-by-side',
-                synchronisedScroll: true,
-                highlight: true,
-                renderNothingWhenEmpty: true,
-                colorScheme: 'dark' // Ép buộc Dark Mode từ thư viện
-            };
-            
-            gitContainer.innerHTML = ''; // Clear loading
-            
-            const diff2htmlUi = new Diff2HtmlUI(gitContainer, diffString, configuration);
-            diff2htmlUi.draw();
-            diff2htmlUi.highlightCode();
+            const status = node.fileData.status;
+            iconSpan.textContent = getStatusIcon(status);
+            iconSpan.className += ' git-status-' + status;
+        }
+        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';
             
-            console.log('[GitView] Render complete.');
+            // Discard Button (Only for Changes)
+            if (type === 'changes') {
+                const discardBtn = document.createElement('button');
+                discardBtn.className = 'git-btn-action destructive';
+                discardBtn.textContent = '↺';
+                discardBtn.title = 'Discard Changes';
+                discardBtn.onclick = (e) => { e.stopPropagation(); handleDiscard(node.fileData.path); };
+                actions.appendChild(discardBtn);
+            }
+
+            // Stage/Unstage Button
+            const btn = document.createElement('button');
+            btn.className = 'git-btn-action';
+            if (type === 'staged') {
+                btn.textContent = '-';
+                btn.title = 'Unstage';
+                btn.onclick = (e) => { e.stopPropagation(); handleUnstage(node.fileData.path); };
+            } else {
+                btn.textContent = '+';
+                btn.title = 'Stage';
+                btn.onclick = (e) => { e.stopPropagation(); handleStage(node.fileData.path); };
+            }
+            actions.appendChild(btn);
+            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'));
+                content.classList.add('selected');
+                loadDiffView(node.fileData.path, type);
+            }
+        });
+
+        li.appendChild(content);
+
+        // --- CHILDREN ---
+        if (isFolder) {
+            const ul = document.createElement('ul');
+            renderTreeNodes(node.children, ul, type, depth + 1);
+            li.appendChild(ul);
         }
-        showToast('Git changes loaded', 'success');
 
+        container.appendChild(li);
+    });
+}
+
+function getStatusIcon(status) {
+    if(status === 'M') return 'M';
+    if(status === 'A' || status === 'U') return 'U';
+    if(status === 'D') return 'D';
+    if(status === 'R') return 'R';
+    return '?';
+}
+
+// --- ACTIONS ---
+
+async function handleStage(path) {
+    try {
+        await stageFile(path);
+        await loadGitData();
+    } catch (err) {
+        showToast('Stage failed: ' + err.message, 'error');
+    }
+}
+
+async function handleUnstage(path) {
+    try {
+        await unstageFile(path);
+        await loadGitData();
     } catch (err) {
-        console.error('[GitView] Error:', err);
-        gitContainer.innerHTML = `
-            <div class="git-loading-msg" style="color:var(--ios-red);">
-                <div>⚠️ Error</div>
-                <div style="font-size:12px;">${err.message}</div>
-                <div style="font-size:10px; margin-top:5px;">Check F12 Console for details</div>
-            </div>`;
+        showToast('Unstage failed: ' + err.message, 'error');
+    }
+}
+
+async function handleDiscard(path) {
+    const isAll = path === '*';
+    const msg = isAll 
+        ? 'Are you sure you want to discard ALL changes? This is irreversible!' 
+        : `Discard changes to ${path}? This is irreversible!`;
+
+    if (confirm(msg)) {
+        try {
+            await discardChange(path);
+            await loadGitData();
+            showToast('Changes discarded', 'success');
+        } catch (err) {
+            showToast('Discard failed: ' + err.message, 'error');
+        }
     }
+}
+
+async function loadDiffView(filePath, type) {
+    const viewer = document.getElementById('git-diff-viewer');
+    viewer.innerHTML = '<div class="git-empty-state">Loading diff...</div>';
     
-    if (refreshBtn) {
-        refreshBtn.style.opacity = '1';
-        refreshBtn.disabled = false;
+    try {
+        const diff = await getGitDiff(filePath, type === 'staged' ? 'staged' : 'working');
+        
+        if (!diff || !diff.trim()) {
+             viewer.innerHTML = '<div class="git-empty-state">No text changes detected (binary file?)</div>';
+             return;
+        }
+
+        viewer.innerHTML = '';
+        const ui = new Diff2HtmlUI(viewer, diff, {
+            drawFileList: false,
+            matching: 'lines',
+            outputFormat: 'side-by-side',
+            synchronisedScroll: true,
+            highlight: true,
+            renderNothingWhenEmpty: false,
+            colorScheme: 'dark'
+        });
+        ui.draw();
+        ui.highlightCode();
+
+    } catch (err) {
+        viewer.innerHTML = `<div class="git-empty-state" style="color:#f85149">Error loading diff: ${err.message}</div>`;
     }
 }

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

@@ -1,8 +1,3 @@
-/**
- * Quản lý tính năng Iframe AI Provider
- */
-
-// Danh sách các AI Providers
 const AI_PROVIDERS = [
     { id: 'chatgpt', name: 'ChatGPT', url: 'https://chat.openai.com' },
     { id: 'kimi', name: 'Kimi AI', url: 'https://www.kimi.com' },
@@ -16,6 +11,12 @@ export function initIframeManager() {
     const iframe = document.getElementById('ai-iframe');
     const externalLink = document.getElementById('ai-external-link');
     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;
 
@@ -27,18 +28,20 @@ export function initIframeManager() {
         select.appendChild(option);
     });
 
-    // 2. Load saved selection or default
+    // 2. Load saved selection
     const savedProviderId = localStorage.getItem('ai_provider') || 'chatgpt';
-    
-    // Validate if saved provider still exists
     const isValid = AI_PROVIDERS.some(p => p.id === savedProviderId);
     select.value = isValid ? savedProviderId : AI_PROVIDERS[0].id;
 
-    // 3. Function to update UI
     const updateProvider = (providerId) => {
         const provider = AI_PROVIDERS.find(p => p.id === providerId) || AI_PROVIDERS[0];
         
-        iframe.src = provider.url;
+        // Reset iframe source to trigger reload
+        iframe.src = 'about:blank';
+        setTimeout(() => {
+            iframe.src = provider.url;
+        }, 50);
+
         externalLink.href = provider.url;
         placeholderLink.href = provider.url;
         placeholderLink.textContent = `Mở ${provider.name} tab mới ↗`;
@@ -46,11 +49,44 @@ export function initIframeManager() {
         localStorage.setItem('ai_provider', providerId);
     };
 
-    // 4. Initial update
+    // Initial load
     updateProvider(select.value);
 
-    // 5. Event listener
+    // Event listeners
     select.addEventListener('change', (e) => {
         updateProvider(e.target.value);
     });
+
+    // --- GUIDE TOGGLE LOGIC ---
+
+    const showGuide = () => {
+        guideContainer.classList.remove('hidden');
+    };
+
+    const hideGuide = () => {
+        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();
+        });
+    }
 }

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

@@ -28,9 +28,6 @@ document.addEventListener('DOMContentLoaded', async () => {
     
     // Initialize Terminal System
     initTerminal();
-    
-    // Auto open one terminal on start (Optional)
-    // setTimeout(() => createNewTerminal(), 500);
 });
 
 async function checkServerStatus() {
@@ -75,40 +72,56 @@ async function loadExtensionPath() {
     try {
         const res = await fetch('/api/extension-path');
         const data = await res.json();
-        const input = document.getElementById('extension-path-input');
-        if (data.exists) input.value = data.path;
-        else {
-            input.value = "Error: Extension folder not found.";
-            input.style.color = "var(--ios-red)";
+        // 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)";
+            }
         }
     } catch (err) {}
 }
 
-window.toggleExtensionGuide = function() {
-    const content = document.getElementById('extension-content');
-    const icon = document.getElementById('ext-toggle-icon');
-    content.classList.toggle('open');
-    icon.classList.toggle('open');
-}
-
 window.copyExtensionPath = function(event) {
-    const input = document.getElementById('extension-path-input');
+    const input = document.getElementById('extension-path-input-center');
     const btn = event.currentTarget;
-    const icon = document.getElementById('ext-copy-icon');
-    const text = document.getElementById('ext-copy-text');
+    const originalText = btn.textContent;
+    
     navigator.clipboard.writeText(input.value).then(() => {
-        showCopiedState(btn, icon, text, '📋', 'Copy Path');
+        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');
+    const input = document.getElementById('chrome-url-input-center');
     const btn = event.currentTarget;
-    const originalText = btn.innerHTML;
+    const originalText = btn.textContent;
+    
     navigator.clipboard.writeText(input.value).then(() => {
-        btn.innerHTML = '✓';
+        btn.textContent = '✓';
+        btn.style.background = 'var(--ios-green)';
+        btn.style.color = 'white';
+        btn.style.borderColor = 'var(--ios-green)';
         showToast('Đã copy URL', 'success');
-        setTimeout(() => btn.innerHTML = originalText, 1500);
+        
+        setTimeout(() => {
+            btn.textContent = originalText;
+            btn.style.background = '';
+            btn.style.color = '';
+            btn.style.borderColor = '';
+        }, 2000);
     });
 }