vg-coder-cli 2.0.46 → 2.0.48

package/src/server/task-store.js

@@ -0,0 +1,112 @@
+const path = require('path');
+const fs = require('fs-extra');
+const crypto = require('crypto');
+
+function newTaskId() {
+  const ts = Date.now();
+  const rand = crypto.randomBytes(3).toString('hex');
+  return `t_${ts}_${rand}`;
+}
+
+function sanitizeTaskId(id) {
+  return String(id || '').replace(/[^a-zA-Z0-9_-]/g, '').slice(0, 80);
+}
+
+function tasksRoot(workingDir) {
+  return path.join(workingDir, '.vg', 'tasks');
+}
+
+function taskDir(workingDir, taskId) {
+  return path.join(tasksRoot(workingDir), sanitizeTaskId(taskId));
+}
+
+function taskJsonPath(workingDir, taskId) {
+  return path.join(taskDir(workingDir, taskId), 'task.json');
+}
+
+function resultMdPath(workingDir, taskId) {
+  return path.join(taskDir(workingDir, taskId), 'result.md');
+}
+
+function filesDir(workingDir, taskId) {
+  return path.join(taskDir(workingDir, taskId), 'files');
+}
+
+async function saveTask(task) {
+  const file = taskJsonPath(task.workingDir, task.id);
+  await fs.ensureDir(path.dirname(file));
+  task.timing = task.timing || {};
+  await fs.writeJson(file, task, { spaces: 2 });
+  return task;
+}
+
+async function loadTask(workingDir, taskId) {
+  const file = taskJsonPath(workingDir, taskId);
+  if (!await fs.pathExists(file)) return null;
+  return fs.readJson(file);
+}
+
+async function writeResult(workingDir, taskId, markdown) {
+  const file = resultMdPath(workingDir, taskId);
+  await fs.ensureDir(path.dirname(file));
+  await fs.writeFile(file, markdown || '', 'utf8');
+}
+
+async function readResult(workingDir, taskId) {
+  const file = resultMdPath(workingDir, taskId);
+  if (!await fs.pathExists(file)) return '';
+  return fs.readFile(file, 'utf8');
+}
+
+async function listTasks(workingDir, filter = {}) {
+  const root = tasksRoot(workingDir);
+  if (!await fs.pathExists(root)) return [];
+  const ids = (await fs.readdir(root)).filter(n => n.startsWith('t_'));
+  const out = [];
+  for (const id of ids) {
+    try {
+      const t = await fs.readJson(taskJsonPath(workingDir, id));
+      if (filter.status && t.status !== filter.status) continue;
+      out.push({
+        id: t.id,
+        status: t.status,
+        prompt: (t.prompt || '').slice(0, 200),
+        createdAt: t.timing?.createdAt,
+        finishedAt: t.timing?.finishedAt,
+        durationMs: t.timing?.durationMs,
+        webhookUrl: t.webhookUrl || null
+      });
+    } catch (_) { /* skip */ }
+  }
+  out.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
+  if (filter.limit) return out.slice(0, filter.limit);
+  return out;
+}
+
+async function rehydrate(workingDir) {
+  const root = tasksRoot(workingDir);
+  if (!await fs.pathExists(root)) return [];
+  const ids = (await fs.readdir(root)).filter(n => n.startsWith('t_'));
+  const tasks = [];
+  for (const id of ids) {
+    try { tasks.push(await fs.readJson(taskJsonPath(workingDir, id))); }
+    catch (_) { /* skip */ }
+  }
+  return tasks;
+}
+
+module.exports = {
+  newTaskId,
+  sanitizeTaskId,
+  tasksRoot,
+  taskDir,
+  taskJsonPath,
+  resultMdPath,
+  filesDir,
+  saveTask,
+  loadTask,
+  writeResult,
+  readResult,
+  listTasks,
+  rehydrate
+};

package/src/server/task-webhook.js

@@ -0,0 +1,48 @@
+const chalk = require('chalk');
+const store = require('./task-store');
+
+const RETRY_DELAYS_MS = [1000, 4000, 16000];
+
+function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+
+async function deliver(task) {
+  if (!task?.webhookUrl) return;
+
+  const markdown = task.status === 'done' ? await store.readResult(task.workingDir, task.id) : '';
+  const body = {
+    taskId: task.id,
+    status: task.status,
+    result: { markdown, chatId: task.result?.chatId || null },
+    error: task.error || null,
+    durationMs: task.timing?.durationMs || null,
+    meta: task.meta || null
+  };
+
+  task.webhook = task.webhook || { attempts: [], deliveredAt: null };
+
+  for (let i = 0; i < RETRY_DELAYS_MS.length; i++) {
+    try {
+      const res = await fetch(task.webhookUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      });
+      const ok = res.status >= 200 && res.status < 300;
+      task.webhook.attempts.push({ at: Date.now(), status: res.status, ok });
+      if (ok) {
+        task.webhook.deliveredAt = Date.now();
+        await store.saveTask(task);
+        return true;
+      }
+      console.log(chalk.yellow(`[Webhook] ${task.id} attempt ${i + 1} → HTTP ${res.status}`));
+    } catch (err) {
+      task.webhook.attempts.push({ at: Date.now(), error: err.message });
+      console.log(chalk.yellow(`[Webhook] ${task.id} attempt ${i + 1} → ${err.message}`));
+    }
+    if (i < RETRY_DELAYS_MS.length - 1) await sleep(RETRY_DELAYS_MS[i]);
+  }
+  await store.saveTask(task);
+  return false;
+}
+
+module.exports = { deliver };

package/src/server/views/css/agent-panel.css

@@ -604,3 +604,104 @@
 .agent-retry-btn:hover {
     background: #b91c1c;
 }
+
+/* History Pane — mounted inside #tool-panel-agent */
+#tool-panel-agent { position: relative; }
+
+.agent-history-modal-inline {
+    position: absolute;
+    inset: 0;
+    z-index: 50;
+    background: #18181b;
+    color: #ededed;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.agent-history-pane {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.agent-history-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid #27272a;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.agent-history-close {
+    background: transparent;
+    border: none;
+    color: #a1a1aa;
+    font-size: 22px;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0 4px;
+}
+.agent-history-close:hover { color: #ededed; }
+
+.agent-history-list {
+    overflow-y: auto;
+    padding: 6px;
+}
+
+.agent-history-empty {
+    padding: 24px;
+    text-align: center;
+    color: #71717a;
+    font-size: 13px;
+}
+
+.agent-history-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+.agent-history-row:hover { background: #27272a; }
+
+.agent-history-row-main { flex: 1; min-width: 0; }
+
+.agent-history-title {
+    font-size: 13px;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.agent-history-meta {
+    display: flex;
+    gap: 10px;
+    margin-top: 4px;
+    font-size: 11px;
+    color: #71717a;
+}
+
+.agent-history-delete {
+    background: transparent;
+    border: none;
+    color: #71717a;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 2px 8px;
+    border-radius: 4px;
+}
+.agent-history-delete:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
+
+[data-theme="light"] .agent-history-modal-inline {
+    background: #ffffff;
+    color: #18181b;
+}
+[data-theme="light"] .agent-history-header { border-bottom-color: #e5e5ea; }
+[data-theme="light"] .agent-history-row:hover { background: #f2f2f7; }

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

@@ -4,6 +4,7 @@
  */
 
 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';
@@ -102,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>
@@ -220,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) {
@@ -627,7 +653,7 @@ function addMessage(role, content, status = 'done') {
         timestamp: new Date().toLocaleTimeString('vi-VN')
     });
     renderMessages();
-    // Adapter auto-saves, no manual save needed
+    scheduleAutoSave();
 }
 
 /**
@@ -637,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
  */

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;