vg-coder-cli 2.0.10 → 2.0.12

package/src/server/views/css/iframe.css

@@ -0,0 +1,84 @@
+/* Right Panel Layout */
+.right-panel {
+    flex: 1;
+    height: 100%;
+    background: #fff;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+/* AI Header Styles */
+.ai-header {
+    height: 50px;
+    background: var(--ios-bg);
+    border-bottom: 1px solid var(--ios-separator);
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    gap: 10px;
+    justify-content: space-between;
+}
+
+.ai-select-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+}
+
+.ai-select {
+    padding: 6px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--ios-separator);
+    background: var(--ios-card);
+    color: var(--text-primary);
+    font-size: 13px;
+    font-weight: 500;
+    min-width: 200px;
+    outline: none;
+    cursor: pointer;
+}
+
+/* Iframe Container */
+.ai-iframe-container {
+    flex: 1;
+    position: relative;
+    width: 100%;
+    background: #fff;
+}
+
+.right-panel iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    position: relative;
+    z-index: 2;
+}
+
+/* Placeholder underneath iframe */
+.iframe-placeholder {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: var(--text-secondary);
+    z-index: 1;
+    width: 100%;
+}
+
+.link-fallback {
+    color: var(--ios-blue);
+    text-decoration: none;
+    margin-top: 10px;
+    display: inline-block;
+}
+
+/* Mobile Responsive adjustment for right panel */
+@media (max-width: 768px) {
+    .right-panel {
+        flex: 1;
+        height: 50vh;
+    }
+}

package/src/server/views/dashboard.css

@@ -43,9 +43,7 @@ body {
     background-color: var(--ios-bg);
     color: var(--text-primary);
     height: 100vh;
-    /* Full viewport height */
     overflow: hidden;
-    /* Disable body scroll */
     font-size: 13px;
 }
 
@@ -59,12 +57,9 @@ body {
 /* Left Panel: VG Coder Tool */
 .left-panel {
     flex: 0 0 450px;
-    /* Fixed width: 450px */
     max-width: 50vw;
-    /* Max 50% on small screens */
     height: 100%;
     overflow-y: auto;
-    /* Scrollable independently */
     background: var(--ios-bg);
     border-right: 1px solid var(--ios-separator);
     position: relative;
@@ -74,48 +69,9 @@ body {
 .container {
     padding: 15px;
     padding-top: 15px;
-    /* Removed max-width/margin centering since it's inside panel */
 }
 
-/* Right Panel: ChatGPT Iframe */
-.right-panel {
-    flex: 1;
-    /* Take remaining space */
-    height: 100%;
-    background: #fff;
-    position: relative;
-}
-
-.right-panel iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
-    position: relative;
-    z-index: 2;
-    /* Sit above placeholder */
-}
-
-/* Placeholder underneath iframe (visible if iframe fails to load) */
-.iframe-placeholder {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: center;
-    color: var(--text-secondary);
-    z-index: 1;
-    width: 100%;
-}
-
-.link-fallback {
-    color: var(--ios-blue);
-    text-decoration: none;
-    margin-top: 10px;
-    display: inline-block;
-}
-
-/* --- EXISTING COMPACT STYLES (Preserved & Adjusted) --- */
-
+/* --- COMPONENT STYLES --- */
 .header {
     display: flex;
     justify-content: space-between;
@@ -176,6 +132,11 @@ body {
     border: none;
     border-radius: 6px;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    color: var(--text-primary);
 }
 
 .system-prompt-content {
@@ -321,16 +282,13 @@ body {
     position: fixed;
     bottom: 20px;
     left: 20px;
-    /* Move toast to bottom left */
     transform: translateY(100px);
-    /* Adjust animation */
 }
 
 .toast.show {
     transform: translateY(0);
 }
 
-/* Mobile Responsiveness */
 @media (max-width: 768px) {
     .split-layout {
         flex-direction: column;
@@ -344,9 +302,4 @@ body {
         border-right: none;
         border-bottom: 1px solid var(--ios-separator);
     }
-
-    .right-panel {
-        flex: 1;
-        height: 50vh;
-    }
 }

package/src/server/views/dashboard.html

@@ -8,6 +8,15 @@
     <title>VG Coder - Split View</title>
     <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">
+    
+    <!-- QUAN TRỌNG: Đã đổi sang github-dark.min.css để chữ có màu sáng -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />
+    
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
+    <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';
@@ -18,7 +27,7 @@
 
 <body>
     <div class="split-layout">
-        <!-- CỘT TRÁI: Giao diện VG Coder cũ -->
+        <!-- CỘT TRÁI: Giao diện VG Coder -->
         <div class="left-panel">
             <div class="container">
                 <div class="header">
@@ -68,8 +77,11 @@
                                     Copy link này và dán vào tab mới:
                                     <div class="form-group" style="margin-top: 5px; margin-bottom: 0;">
                                         <div style="display: flex; gap: 5px;">
-                                            <input type="text" id="chrome-url-input" readonly value="chrome://extensions" onclick="this.select()" style="font-family: monospace;">
-                                            <button class="btn btn-copy" style="flex: 0 0 40px; padding: 0;" onclick="copyChromeUrl(event)" title="Copy URL">
+                                            <input type="text" id="chrome-url-input" readonly
+                                                value="chrome://extensions" onclick="this.select()"
+                                                style="font-family: monospace;">
+                                            <button class="btn btn-copy" style="flex: 0 0 40px; padding: 0;"
+                                                onclick="copyChromeUrl(event)" title="Copy URL">
                                                 <span>📋</span>
                                             </button>
                                         </div>
@@ -81,7 +93,8 @@
                             </ol>
                         </div>
                         <div class="form-group">
-                            <input type="text" id="extension-path-input" readonly value="Loading path..." onclick="this.select()">
+                            <input type="text" id="extension-path-input" readonly value="Loading path..."
+                                onclick="this.select()">
                         </div>
                         <button class="btn btn-copy" onclick="copyExtensionPath(event)">
                             <span id="ext-copy-icon">📋</span>
@@ -91,29 +104,6 @@
                 </div>
 
                 <div class="endpoints">
-                    <!-- Analyze -->
-                    <div class="endpoint-card">
-                        <div class="endpoint-header">
-                            <div class="endpoint-title-group">
-                                <span class="method post">POST</span>
-                                <span class="endpoint-path">/analyze</span>
-                            </div>
-                            <button class="btn-icon-head" onclick="testAnalyze(event)" title="Download Project Source">
-                                📥
-                            </button>
-                        </div>
-                        <div class="form-group">
-                            <input type="text" id="analyze-path" value="." placeholder="Project path (e.g. .)">
-                        </div>
-                        <div class="btn-group">
-                            <button class="btn btn-copy" onclick="copyAnalyzeResult(event)">
-                                <span id="analyze-copy-icon">📋</span>
-                                <span id="analyze-copy-text">Copy Text</span>
-                            </button>
-                        </div>
-                        <div class="response" id="analyze-response"></div>
-                    </div>
-
                     <!-- Execute Bash -->
                     <div class="endpoint-card">
                         <div class="endpoint-header">
@@ -165,18 +155,62 @@
                         </div>
                         <div class="response" id="structure-response" style="display: none;"></div>
                     </div>
+
+                    <!-- Analyze -->
+                    <div class="endpoint-card">
+                        <div class="endpoint-header">
+                            <div class="endpoint-title-group">
+                                <span class="method post">POST</span>
+                                <span class="endpoint-path">/analyze</span>
+                            </div>
+                            <button class="btn-icon-head" onclick="testAnalyze(event)" title="Download Project Source">
+                                📥
+                            </button>
+                        </div>
+                        <div class="form-group">
+                            <input type="text" id="analyze-path" value="." placeholder="Project path (e.g. .)">
+                        </div>
+                        <div class="btn-group">
+                            <button class="btn btn-copy" onclick="copyAnalyzeResult(event)">
+                                <span id="analyze-copy-icon">📋</span>
+                                <span id="analyze-copy-text">Copy Text</span>
+                            </button>
+                        </div>
+                        <div class="response" id="analyze-response"></div>
+                    </div>
                 </div>
                 <div style="height: 50px;"></div> <!-- Spacer for scrolling -->
             </div>
         </div>
 
-        <!-- CỘT PHẢI: Iframe ChatGPT -->
+        <!-- CỘT PHẢI: AI Iframe with Selector & Git View -->
         <div class="right-panel">
-            <div class="iframe-placeholder">
-                <p>⚠️ Nếu trang trắng, hãy cài Extension <b>"Ignore X-Frame-Options"</b></p>
-                <a href="https://chatgpt.com" target="_blank" class="link-fallback">Mở ChatGPT tab mới ↗</a>
+            <div class="ai-header">
+                <div class="ai-select-group">
+                    <span style="font-size: 16px;">🤖</span>
+                    <select id="ai-provider-select" class="ai-select">
+                        <!-- Options filled by JS -->
+                    </select>
+                </div>
+                
+                <!-- NEW: Git Toggle Button -->
+                <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>
+                    <a id="ai-placeholder-link" href="#" target="_blank" class="link-fallback">Mở tab mới ↗</a>
+                </div>
+                <iframe id="ai-iframe" src="" title="AI Integration"></iframe>
             </div>
-            <iframe src="https://chatgpt.com" title="ChatGPT Integration"></iframe>
         </div>
     </div>
 

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/iframe-manager.js

@@ -0,0 +1,56 @@
+/**
+ * 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' },
+    { 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' }
+];
+
+export function initIframeManager() {
+    const select = document.getElementById('ai-provider-select');
+    const iframe = document.getElementById('ai-iframe');
+    const externalLink = document.getElementById('ai-external-link');
+    const placeholderLink = document.getElementById('ai-placeholder-link');
+
+    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 or default
+    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;
+        externalLink.href = provider.url;
+        placeholderLink.href = provider.url;
+        placeholderLink.textContent = `Mở ${provider.name} tab mới ↗`;
+        
+        localStorage.setItem('ai_provider', providerId);
+    };
+
+    // 4. Initial update
+    updateProvider(select.value);
+
+    // 5. Event listener
+    select.addEventListener('change', (e) => {
+        updateProvider(e.target.value);
+    });
+}

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

@@ -3,6 +3,8 @@ import { SYSTEM_PROMPT } from './config.js';
 import { checkHealth } from './api.js';
 import './handlers.js'; // Import to register global functions
 import { showToast, showCopiedState } from './utils.js';
+import { initIframeManager } from './features/iframe-manager.js';
+import { initGitView } from './features/git-view.js';
 
 /**
  * Initialize application on DOM ready
@@ -19,6 +21,12 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     // Load Extension Path
     loadExtensionPath();
+
+    // Initialize Iframe Manager
+    initIframeManager();
+
+    // Initialize Git View
+    initGitView();
 });
 
 /**