vg-coder-cli 2.0.11 → 2.0.14

package/src/server/views/css/git-view.css

@@ -0,0 +1,155 @@
+/* --- LAYOUT HEADER --- */
+.git-toggle-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 10px;
+    padding-left: 10px;
+    border-left: 1px solid var(--ios-separator);
+    flex-shrink: 0;
+}
+
+.git-toggle-btn {
+    padding: 0 12px;
+    background: transparent;
+    border: 1px solid var(--ios-separator);
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-primary);
+    height: 32px;
+    display: flex;
+    align-items: center;
+}
+
+.git-toggle-btn.active {
+    background: var(--ios-blue);
+    color: #fff;
+    border-color: var(--ios-blue);
+}
+
+.git-refresh-btn {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    border: 1px solid var(--ios-separator);
+    background: var(--ios-card);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* --- CONTAINER CHÍNH --- */
+.right-panel {
+    position: relative;
+    /* Quan trọng */
+}
+
+.d2h-file-list {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    background-color: #0d1117;
+    overflow: scroll;
+    height: calc(100vh - 46px);
+    width: 446px;
+    top: 46px;
+}
+
+.git-view-container {
+    position: absolute;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    /* Z-index cao nhất */
+    background: #0d1117;
+    /* Nền đen GitHub */
+    display: none;
+    flex-direction: column;
+    overflow: scroll;
+}
+
+.git-view-container.active {
+    display: flex;
+}
+
+/* --- DEBUG / SAFETY NET CSS --- */
+/* Ép toàn bộ text trong vùng code phải có màu sáng */
+.d2h-wrapper * {
+    box-sizing: border-box;
+}
+
+/* Force text color */
+.d2h-code-line-ctn,
+.d2h-code-line,
+.hljs {
+    color: #e6edf3 !important;
+    /* Trắng xám */
+    background: transparent !important;
+}
+
+/* Force line number color */
+.d2h-code-side-linenumber {
+    color: #6e7681 !important;
+    background: #0d1117 !important;
+    border-color: #30363d !important;
+}
+
+/* Fix background diff */
+.d2h-ins {
+    background-color: rgba(46, 160, 67, 0.15) !important;
+}
+
+.d2h-del {
+    background-color: rgba(248, 81, 73, 0.15) !important;
+}
+
+/* Layout */
+.d2h-files-wrapper {
+    flex: 1;
+    overflow: auto;
+    background: #0d1117;
+}
+
+.d2h-file-list-wrapper {
+    width: 250px;
+    flex-shrink: 0;
+    background: #0d1117;
+    border-right: 1px solid #30363d;
+    display: flex;
+    flex-direction: column;
+}
+
+.d2h-file-list-header,
+.d2h-file-header {
+    background: #161b22 !important;
+    border-bottom: 1px solid #30363d !important;
+    color: #e6edf3 !important;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.d2h-file-list a {
+    color: #8b949e !important;
+    text-decoration: none;
+    display: block;
+    padding: 5px 10px;
+}
+
+.d2h-file-list a:hover {
+    color: #58a6ff !important;
+    background: #161b22;
+}
+
+/* Ẩn rác */
+.d2h-file-switch,
+.d2h-tag {
+    display: none !important;
+}

package/src/server/views/css/terminal.css

@@ -0,0 +1,98 @@
+/* Layer chứa các terminal trôi nổi */
+#floating-terminals-layer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    z-index: 10000; /* Cao hơn mọi thứ */
+}
+
+/* Style cho từng cửa sổ terminal */
+.floating-terminal {
+    position: absolute;
+    width: 600px;
+    height: 400px;
+    background: #1e1e1e;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    border: 1px solid #333;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    resize: both; /* Cho phép resize cửa sổ */
+    min-width: 300px;
+    min-height: 200px;
+}
+
+/* Header dùng để drag */
+.terminal-header {
+    background: #252526;
+    padding: 8px 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: grab;
+    border-bottom: 1px solid #333;
+    user-select: none;
+}
+
+.terminal-header:active {
+    cursor: grabbing;
+}
+
+.terminal-title-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #ccc;
+    font-family: monospace;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.terminal-controls {
+    display: flex;
+    gap: 6px;
+}
+
+.term-btn {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+}
+
+.term-btn.close {
+    background: #FF5F56;
+}
+.term-btn.close:hover {
+    background: #ff3b30;
+}
+
+.term-btn.minimize {
+    background: #FFBD2E;
+}
+
+.term-btn.maximize {
+    background: #27C93F;
+}
+
+/* Phần nội dung chứa xterm */
+.terminal-body {
+    flex: 1;
+    position: relative;
+    padding: 5px;
+    background: #1e1e1e;
+    overflow: hidden;
+}
+
+/* Scrollbar customization */
+.xterm-viewport::-webkit-scrollbar {
+    width: 8px;
+}
+.xterm-viewport::-webkit-scrollbar-thumb {
+    background: #424242;
+    border-radius: 4px;
+}

package/src/server/views/dashboard.html

@@ -9,6 +9,24 @@
     <link rel="stylesheet" href="/dashboard.css">
     <link rel="stylesheet" href="/css/structure.css">
     <link rel="stylesheet" href="/css/iframe.css">
+    <link rel="stylesheet" href="/css/git-view.css">
+    <link rel="stylesheet" href="/css/terminal.css">
+    
+    <!-- Syntax Highlighting -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />
+    
+    <!-- Git Diff -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
+    
+    <!-- Terminal Dependencies -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
+    
+    <!-- Other Libs -->
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
+
     <script>
         (function () {
             const savedTheme = localStorage.getItem('theme') || 'light';
@@ -31,6 +49,14 @@
                         <span id="theme-icon">🌙</span>
                     </button>
                 </div>
+                
+                <!-- Quick Actions -->
+                <div class="endpoint-card" style="display: flex; gap: 10px; align-items: center; justify-content: space-between;">
+                    <span style="font-weight: 600;">Tools:</span>
+                    <button class="btn" onclick="createNewTerminal()" style="background: #252526; border: 1px solid #444;">
+                        <span>🖥️</span> New Terminal
+                    </button>
+                </div>
 
                 <!-- System Prompt Section -->
                 <div class="system-prompt-card">
@@ -96,7 +122,7 @@
                 </div>
 
                 <div class="endpoints">
-                    <!-- Execute Bash -->
+                    <!-- Execute Bash (RESTORED) -->
                     <div class="endpoint-card">
                         <div class="endpoint-header">
                             <div class="endpoint-title-group">
@@ -175,7 +201,7 @@
             </div>
         </div>
 
-        <!-- CỘT PHẢI: AI Iframe with Selector -->
+        <!-- CỘT PHẢI: AI Iframe with Selector & Git View -->
         <div class="right-panel">
             <div class="ai-header">
                 <div class="ai-select-group">
@@ -184,9 +210,17 @@
                         <!-- Options filled by JS -->
                     </select>
                 </div>
+                
+                <button id="git-view-toggle" class="git-toggle-btn">View Changes</button>
+                <button id="git-refresh-btn" class="btn-icon-head" style="display:none; margin-left:5px;" title="Refresh">↻</button>
+                
                 <a id="ai-external-link" href="#" target="_blank" class="btn-icon-head" title="Open in new tab">↗</a>
             </div>
             
+            <!-- Git View Container (Hidden by default) -->
+            <div id="git-view-container" class="git-view-container"></div>
+
+            <!-- AI Iframe Container -->
             <div class="ai-iframe-container">
                 <div class="iframe-placeholder">
                     <p>⚠️ Nếu trang trắng, hãy cài Extension <b>"Ignore X-Frame-Options"</b></p>
@@ -196,9 +230,11 @@
             </div>
         </div>
     </div>
+    
+    <!-- Floating Terminals Container (Fixed on top of everything) -->
+    <div id="floating-terminals-layer"></div>
 
     <div class="toast" id="toast"></div>
     <script type="module" src="/js/main.js"></script>
 </body>
-
 </html>

package/src/server/views/js/api.js

@@ -72,6 +72,21 @@ export async function getStructure(path) {
     return await res.json();
 }
 
+/**
+ * Get Git Diff
+ * @returns {Promise<string>} - Unified diff string
+ */
+export async function getGitDiff() {
+    const res = await fetch(`${API_BASE}/api/git/diff`);
+    const data = await res.json();
+    
+    if (!res.ok) {
+        throw new Error(data.error || 'Failed to get git diff');
+    }
+
+    return data.diff;
+}
+
 /**
  * Copy content as file to clipboard
  * @param {string} filename - Filename for the clipboard item

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

@@ -0,0 +1,117 @@
+import { getGitDiff } from '../api.js';
+import { showToast, showLoading } 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);
+}
+
+let isGitMode = false;
+
+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');
+
+    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);
+
+        if (!gitContainer.innerHTML.trim()) {
+            await loadGitChanges();
+        }
+    } else {
+        gitContainer.classList.remove('active');
+        toggleBtn.classList.remove('active');
+        if (toggleText) toggleText.textContent = 'View Changes';
+        if (refreshBtn) refreshBtn.style.display = 'none';
+    }
+}
+
+async function loadGitChanges() {
+    const gitContainer = document.getElementById('git-view-container');
+    const refreshBtn = document.getElementById('git-refresh-btn');
+    
+    console.log('[GitView] Loading changes...');
+    
+    if (refreshBtn) {
+        refreshBtn.style.opacity = '0.5';
+        refreshBtn.disabled = true;
+    }
+    
+    gitContainer.innerHTML = '<div class="git-loading-msg">Loading git changes... (Check Console if stuck)</div>';
+
+    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!');
+        }
+
+        const diffString = await getGitDiff();
+        console.log('[GitView] Diff received, length:', diffString?.length);
+
+        if (!diffString || !diffString.trim()) {
+            gitContainer.innerHTML = `
+                <div class="git-loading-msg">
+                    <div style="font-size:30px;">✨</div>
+                    <p>No changes detected</p>
+                </div>`;
+        } 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();
+            
+            console.log('[GitView] Render complete.');
+        }
+        showToast('Git changes loaded', 'success');
+
+    } 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>`;
+    }
+    
+    if (refreshBtn) {
+        refreshBtn.style.opacity = '1';
+        refreshBtn.disabled = false;
+    }
+}

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

@@ -0,0 +1,174 @@
+// Terminal Logic: Multi-instance & Floating
+
+let socket;
+const activeTerminals = new Map(); // Map<termId, { term, fitAddon, element }>
+
+// Z-Index Management
+let maxZIndex = 10001;
+
+export function initTerminal() {
+    if (typeof io === 'undefined' || typeof Terminal === 'undefined') {
+        console.error('Libraries missing for Terminal');
+        return;
+    }
+
+    // 1. Init Socket
+    socket = io();
+
+    // 2. Global Event Listeners
+    socket.on('terminal:data', ({ termId, data }) => {
+        const session = activeTerminals.get(termId);
+        if (session) {
+            session.term.write(data);
+        }
+    });
+    
+    socket.on('terminal:exit', ({ termId }) => {
+       closeTerminalUI(termId); 
+    });
+}
+
+/**
+ * Tạo một cửa sổ terminal mới
+ */
+export function createNewTerminal() {
+    const termId = 'term_' + Date.now();
+    const layer = document.getElementById('floating-terminals-layer');
+    
+    // 1. Create DOM Elements
+    const wrapper = document.createElement('div');
+    wrapper.className = 'floating-terminal';
+    wrapper.id = `wrapper-${termId}`;
+    wrapper.style.top = '100px';
+    wrapper.style.left = '100px';
+    // Offset vị trí một chút nếu mở nhiều cái
+    const offset = activeTerminals.size * 30;
+    wrapper.style.top = `${100 + offset}px`;
+    wrapper.style.left = `${400 + offset}px`;
+    wrapper.style.zIndex = ++maxZIndex;
+
+    wrapper.innerHTML = `
+        <div class="terminal-header" id="header-${termId}">
+            <div class="terminal-title-group">
+                <span>>_</span> Terminal (${activeTerminals.size + 1})
+            </div>
+            <div class="terminal-controls">
+                <button class="term-btn close" onclick="window.closeTerminal('${termId}')" title="Close"></button>
+            </div>
+        </div>
+        <div class="terminal-body" id="body-${termId}"></div>
+    `;
+
+    layer.appendChild(wrapper);
+
+    // 2. Init xterm.js
+    const term = new Terminal({
+        cursorBlink: true,
+        fontSize: 13,
+        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+        theme: {
+            background: '#1e1e1e',
+            foreground: '#f0f0f0'
+        }
+    });
+
+    const fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+
+    term.open(document.getElementById(`body-${termId}`));
+    fitAddon.fit();
+
+    // 3. Register Events
+    
+    // Bring to front on click
+    wrapper.addEventListener('mousedown', () => {
+        wrapper.style.zIndex = ++maxZIndex;
+    });
+
+    // Send input
+    term.onData(data => {
+        socket.emit('terminal:input', { termId, data });
+    });
+
+    // Resize Observer to refit terminal when window is resized
+    const resizeObserver = new ResizeObserver(() => {
+        try {
+            fitAddon.fit();
+            socket.emit('terminal:resize', { 
+                termId, 
+                cols: term.cols, 
+                rows: term.rows 
+            });
+        } catch (e) {}
+    });
+    resizeObserver.observe(document.getElementById(`body-${termId}`));
+
+    // 4. Make Draggable
+    makeDraggable(wrapper, document.getElementById(`header-${termId}`));
+
+    // 5. Store Session
+    activeTerminals.set(termId, { term, fitAddon, element: wrapper });
+
+    // 6. Init Backend Process
+    socket.emit('terminal:init', { 
+        termId, 
+        cols: term.cols, 
+        rows: term.rows 
+    });
+}
+
+/**
+ * Đóng terminal UI & Process
+ */
+export function closeTerminalUI(termId) {
+    const session = activeTerminals.get(termId);
+    if (session) {
+        // Remove from DOM
+        session.element.remove();
+        // Clean map
+        activeTerminals.delete(termId);
+        // Tell server to kill
+        socket.emit('terminal:kill', { termId });
+    }
+}
+
+/**
+ * Logic Drag & Drop
+ */
+function makeDraggable(element, handle) {
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    
+    handle.onmousedown = dragMouseDown;
+
+    function dragMouseDown(e) {
+        e.preventDefault();
+        // Get mouse cursor position at startup
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        document.onmouseup = closeDragElement;
+        // Call function whenever cursor moves
+        document.onmousemove = elementDrag;
+    }
+
+    function elementDrag(e) {
+        e.preventDefault();
+        // Calculate new cursor position
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        // Set element's new position
+        element.style.top = (element.offsetTop - pos2) + "px";
+        element.style.left = (element.offsetLeft - pos1) + "px";
+    }
+
+    function closeDragElement() {
+        // Stop moving when mouse button is released
+        document.onmouseup = null;
+        document.onmousemove = null;
+    }
+}
+
+// Global Exports for HTML onclick
+window.createNewTerminal = createNewTerminal;
+window.closeTerminal = closeTerminalUI;