vg-coder-cli 2.0.45 → 2.0.47

package/src/server/views/js/features/agent-panel.js

@@ -4,9 +4,12 @@
  */
 
 import { getById } from '../utils.js';
+import { API_BASE } from '../config.js';
 // Import markdown-it and mermaid from npm packages (bundled by webpack)
 import markdownit from 'markdown-it';
 import mermaid from 'mermaid';
+// Import mermaid viewer for fullscreen functionality
+import { createMermaidToolbar, openMermaidViewer, showToast as showMermaidToast } from './mermaid-viewer.js';
 
 // State
 let messages = [];
@@ -100,6 +103,19 @@ async function renderAgentPanel() {
                                 <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
                             </svg>
                         </button>
+                        <button class="agent-btn" id="agent-history-btn" title="Chat history">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <polyline points="12 6 12 12 16 14"></polyline>
+                            </svg>
+                        </button>
+                        <button class="agent-btn" id="agent-export-btn" title="Export current chat as .json">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                                <polyline points="7 10 12 15 17 10"></polyline>
+                                <line x1="12" y1="15" x2="12" y2="3"></line>
+                            </svg>
+                        </button>
                         <button class="agent-btn" id="agent-clear-btn" title="Clear chat">
                             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                 <polyline points="3 6 5 6 21 6"></polyline>
@@ -218,6 +234,18 @@ function attachEventListeners() {
         clearBtn.addEventListener('click', handleClearChat);
     }
 
+    // History button
+    const historyBtn = getById('agent-history-btn');
+    if (historyBtn) {
+        historyBtn.addEventListener('click', openHistoryModal);
+    }
+
+    // Export button
+    const exportBtn = getById('agent-export-btn');
+    if (exportBtn) {
+        exportBtn.addEventListener('click', exportCurrentChat);
+    }
+
     // Drag & drop
     const dropZone = getById('agent-input-wrapper');
     if (dropZone) {
@@ -473,17 +501,29 @@ async function processMermaidDiagrams(container) {
             const id = `agent-mermaid-${Date.now()}-${i}`;
             const { svg, bindFunctions } = await mermaid.render(id, code);
             
-            // Create wrapper div for mermaid
+            // Create wrapper div for mermaid with toolbar
             const wrapper = document.createElement('div');
             wrapper.className = 'agent-mermaid';
-            wrapper.innerHTML = svg;
+            wrapper.style.cssText = 'position: relative; margin: 16px 0; background: #161b22; border-radius: 6px; overflow: hidden;';
+            
+            // Create toolbar using mermaid-viewer module
+            const toolbar = createMermaidToolbar(code, svg);
+            
+            // Create diagram container
+            const diagramContainer = document.createElement('div');
+            diagramContainer.className = 'agent-mermaid-diagram';
+            diagramContainer.style.cssText = 'padding: 20px; display: flex; justify-content: center; align-items: center; overflow-x: auto;';
+            diagramContainer.innerHTML = svg;
+            
+            wrapper.appendChild(toolbar);
+            wrapper.appendChild(diagramContainer);
             
             // Replace pre/code with wrapper
             preElement.replaceWith(wrapper);
             
             // Bind any interactive functions if present
             if (bindFunctions) {
-                bindFunctions(wrapper);
+                bindFunctions(diagramContainer);
             }
             
             console.log(`[AgentPanel] Rendered mermaid diagram ${i + 1}`);
@@ -613,7 +653,7 @@ function addMessage(role, content, status = 'done') {
         timestamp: new Date().toLocaleTimeString('vi-VN')
     });
     renderMessages();
-    // Adapter auto-saves, no manual save needed
+    scheduleAutoSave();
 }
 
 /**
@@ -623,30 +663,225 @@ function updateLastMessage(updates) {
     if (messages.length === 0) return;
     Object.assign(messages[messages.length - 1], updates);
     renderMessages();
-    // Adapter handles storage
+    scheduleAutoSave();
 }
 
 /**
- * Auto-save is handled by adapter
- * No manual save needed
+ * Debounced auto-save to .vg/chats/<id>.json
  */
+function scheduleAutoSave() {
+    if (autoSaveTimeout) clearTimeout(autoSaveTimeout);
+    autoSaveTimeout = setTimeout(saveCurrentChat, 800);
+}
+
+async function saveCurrentChat() {
+    if (messages.length === 0) return;
+
+    // Resolve chat ID: prefer URL-derived, fallback to local timestamp ID kept across saves
+    if (!currentChatId) {
+        currentChatId = window.AIChat?.getChatIdFromUrl?.() || `local-${Date.now()}`;
+    }
+
+    const source = inferChatSource();
+    const title = deriveChatTitle();
+
+    try {
+        const res = await fetch(`${API_BASE}/api/chats/${encodeURIComponent(currentChatId)}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ source, title, messages })
+        });
+        if (!res.ok) console.warn('[AgentPanel] Save failed:', res.status);
+    } catch (err) {
+        console.warn('[AgentPanel] Save error:', err);
+    }
+}
+
+function inferChatSource() {
+    try {
+        const host = window.location?.hostname || '';
+        if (host.includes('aistudio.google.com')) return 'aistudio';
+        if (host.includes('chatgpt.com') || host.includes('chat.openai.com')) return 'chatgpt';
+        if (host.includes('claude.ai')) return 'claude';
+        return 'unknown';
+    } catch (_) { return 'unknown'; }
+}
+
+function deriveChatTitle() {
+    const firstUser = messages.find(m => m.role === 'user');
+    const raw = (firstUser?.content || '').replace(/\n+/g, ' ').trim();
+    return raw.length > 80 ? raw.slice(0, 80) + '…' : (raw || '(untitled)');
+}
 
 /**
- * Handle clear chat
+ * Handle clear chat — deletes server-side too
  */
-function handleClearChat() {
+async function handleClearChat() {
     if (messages.length === 0) return;
-    
-    if (confirm('Clear chat history?')) {
-        console.log(`[AgentPanel] Deleted chat ${currentChatId}`);
+    if (!confirm('Clear chat history?')) return;
+
+    if (currentChatId) {
+        try {
+            await fetch(`${API_BASE}/api/chats/${encodeURIComponent(currentChatId)}`, { method: 'DELETE' });
+            console.log(`[AgentPanel] Deleted chat ${currentChatId}`);
+        } catch (err) {
+            console.warn('[AgentPanel] Delete error:', err);
+        }
     }
 
+    currentChatId = null;
     messages = [];
     selectedFiles = [];
     renderFileList();
     renderMessages();
 }
 
+/**
+ * Export current chat to a downloadable .json file
+ */
+function exportCurrentChat() {
+    if (messages.length === 0) {
+        alert('Chưa có tin nhắn để export.');
+        return;
+    }
+    const data = {
+        id: currentChatId || `local-${Date.now()}`,
+        source: inferChatSource(),
+        title: deriveChatTitle(),
+        exportedAt: Date.now(),
+        messages
+    };
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const safeId = String(data.id).replace(/[^a-zA-Z0-9_-]/g, '_').slice(0, 80);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `chat-${safeId}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+/**
+ * History modal — list saved chats, click row to load
+ */
+let _activeHistoryModal = null;
+let _activeHistoryEscHandler = null;
+
+async function openHistoryModal() {
+    closeHistoryModal();
+
+    // Mount inside the Agent tool panel so it sits within the panel layout
+    // and never gets covered by host-page UI or other shadow-root overlays.
+    const host = getById('tool-panel-agent') || getById('agent-panel-content')
+        || window.__VG_CODER_ROOT__ || document.body;
+
+    const modal = document.createElement('div');
+    modal.id = 'agent-history-modal';
+    modal.className = 'agent-history-modal agent-history-modal-inline';
+    modal.innerHTML = `
+        <div class="agent-history-pane">
+            <div class="agent-history-header">
+                <span>Chat History</span>
+                <button class="agent-history-close" title="Back to chat" type="button">←</button>
+            </div>
+            <div class="agent-history-list" id="agent-history-list">
+                <div class="agent-history-empty">⏳ Loading…</div>
+            </div>
+        </div>
+    `;
+    host.appendChild(modal);
+    _activeHistoryModal = modal;
+
+    const close = (e) => {
+        if (e) { e.preventDefault(); e.stopPropagation(); }
+        closeHistoryModal();
+    };
+
+    modal.querySelector('.agent-history-close').addEventListener('click', close);
+
+    _activeHistoryEscHandler = (e) => { if (e.key === 'Escape') close(e); };
+    document.addEventListener('keydown', _activeHistoryEscHandler);
+
+    try {
+        const res = await fetch(`${API_BASE}/api/chats`);
+        const data = await res.json();
+        const list = data.chats || [];
+        const listEl = modal.querySelector('#agent-history-list');
+
+        if (!list.length) {
+            listEl.innerHTML = `<div class="agent-history-empty">No saved chats yet.</div>`;
+            return;
+        }
+
+        listEl.innerHTML = list.map(c => `
+            <div class="agent-history-row" data-id="${escapeHtml(c.id)}">
+                <div class="agent-history-row-main">
+                    <div class="agent-history-title">${escapeHtml(c.title)}</div>
+                    <div class="agent-history-meta">
+                        <span>${escapeHtml(c.source)}</span>
+                        <span>${c.count} msgs</span>
+                        <span>${new Date(c.updatedAt || 0).toLocaleString('vi-VN')}</span>
+                    </div>
+                </div>
+                <button class="agent-history-delete" data-id="${escapeHtml(c.id)}" title="Delete" type="button">×</button>
+            </div>
+        `).join('');
+
+        listEl.querySelectorAll('.agent-history-row').forEach(row => {
+            row.addEventListener('click', async (e) => {
+                if (e.target.classList.contains('agent-history-delete')) return;
+                await loadChatById(row.dataset.id);
+                closeHistoryModal();
+            });
+        });
+        listEl.querySelectorAll('.agent-history-delete').forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                if (!confirm('Delete this chat?')) return;
+                await fetch(`${API_BASE}/api/chats/${encodeURIComponent(btn.dataset.id)}`, { method: 'DELETE' });
+                openHistoryModal();
+            });
+        });
+    } catch (err) {
+        console.error('[AgentPanel] Failed to load history list:', err);
+        const listEl = modal.querySelector('#agent-history-list');
+        if (listEl) {
+            listEl.innerHTML = `<div class="agent-history-empty">❌ ${escapeHtml(err.message)}</div>`;
+        }
+    }
+}
+
+function closeHistoryModal() {
+    if (_activeHistoryEscHandler) {
+        document.removeEventListener('keydown', _activeHistoryEscHandler);
+        _activeHistoryEscHandler = null;
+    }
+    if (_activeHistoryModal && _activeHistoryModal.parentNode) {
+        _activeHistoryModal.parentNode.removeChild(_activeHistoryModal);
+    }
+    _activeHistoryModal = null;
+    // Defensive cleanup in case ref was lost
+    const stale = (window.__VG_CODER_ROOT__ || document).querySelector('#agent-history-modal');
+    if (stale) stale.remove();
+}
+
+async function loadChatById(id) {
+    try {
+        const res = await fetch(`${API_BASE}/api/chats/${encodeURIComponent(id)}`);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const data = await res.json();
+        currentChatId = data.id;
+        messages = Array.isArray(data.messages) ? data.messages : [];
+        renderMessages();
+        console.log(`[AgentPanel] Loaded chat ${id} (${messages.length} msgs)`);
+    } catch (err) {
+        console.error('[AgentPanel] Load chat failed:', err);
+        alert(`Load chat failed: ${err.message}`);
+    }
+}
+
 /**
  * Handle add files
  */
@@ -756,3 +991,4 @@ function escapeHtml(text) {
     div.textContent = text;
     return div.innerHTML;
 }
+

package/src/server/views/js/features/code-viewer.js

@@ -6,6 +6,8 @@ import hljs from 'highlight.js/lib/core';
 import markdownit from 'markdown-it';
 // Import mermaid for rendering diagrams
 import mermaid from 'mermaid';
+// Import mermaid viewer for fullscreen functionality
+import { createMermaidToolbar, openMermaidViewer, showToast as showMermaidToast } from './mermaid-viewer.js';
 
 // Import common languages to reduce bundle size
 import javascript from 'highlight.js/lib/languages/javascript';
@@ -80,17 +82,29 @@ async function renderMermaidDiagrams(container) {
             const id = `mermaid-diagram-${Date.now()}-${i}`;
             const { svg, bindFunctions } = await mermaid.render(id, code);
             
-            // Create wrapper div for mermaid
+            // Create wrapper div for mermaid with toolbar
             const wrapper = document.createElement('div');
             wrapper.className = 'mermaid-diagram';
-            wrapper.innerHTML = svg;
+            wrapper.style.cssText = 'position: relative; margin: 16px 0; background: #161b22; border-radius: 6px; overflow: hidden;';
+            
+            // Create toolbar using mermaid-viewer module
+            const toolbar = createMermaidToolbar(code, svg);
+            
+            // Create diagram container
+            const diagramContainer = document.createElement('div');
+            diagramContainer.className = 'mermaid-diagram-content';
+            diagramContainer.style.cssText = 'padding: 20px; display: flex; justify-content: center; align-items: center; overflow-x: auto;';
+            diagramContainer.innerHTML = svg;
+            
+            wrapper.appendChild(toolbar);
+            wrapper.appendChild(diagramContainer);
             
             // Replace pre/code with wrapper
             pre.replaceWith(wrapper);
             
             // Bind any interactive functions if present
             if (bindFunctions) {
-                bindFunctions(wrapper);
+                bindFunctions(diagramContainer);
             }
             
             console.log(`[Mermaid] Successfully rendered diagram ${i + 1}`);
@@ -184,3 +198,4 @@ function escapeHtml(text) {
         .replace(/"/g, """)
         .replace(/'/g, "'");
 }
+

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

@@ -1,6 +1,6 @@
 import { getById, qsa, showToast } from '../utils.js';
 import { getGitDiff } from '../api.js';
-import { Diff2HtmlUI } from 'diff2html/lib-esm/src/ui/js/diff2html-ui';
+import { Diff2HtmlUI } from 'diff2html/lib-esm/ui/js/diff2html-ui';
 
 let isGitMode = false;