vg-coder-cli 2.0.45 → 2.0.47

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

@@ -354,17 +354,172 @@
 /* Mermaid Diagrams */
 .agent-mermaid {
     margin: 16px 0;
-    padding: 20px;
     background-color: var(--code-block-bg, #161b22);
     border-radius: 6px;
+    overflow: hidden;
+    min-height: 100px;
+    position: relative;
+}
+
+.agent-mermaid-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    gap: 4px;
+    padding: 8px 12px;
+    background: rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.agent-mermaid-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    border-radius: 4px;
+    color: #a1a1aa;
+    cursor: pointer;
+    font-size: 11px;
+    transition: all 0.2s ease;
+}
+
+.agent-mermaid-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: #ededed;
+}
+
+.agent-mermaid-btn:active {
+    transform: scale(0.95);
+}
+
+.agent-mermaid-diagram {
+    padding: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow-x: auto;
-    min-height: 100px;
 }
 
-.agent-mermaid svg {
+.agent-mermaid-diagram svg {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Mermaid Toast Notification */
+.agent-mermaid-toast {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    z-index: 100;
+    animation: mermaid-toast-fade 2s ease-out forwards;
+}
+
+.agent-mermaid-toast.success {
+    background: rgba(74, 222, 128, 0.9);
+    color: #000;
+}
+
+.agent-mermaid-toast.error {
+    background: rgba(239, 68, 68, 0.9);
+    color: #fff;
+}
+
+@keyframes mermaid-toast-fade {
+    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
+    15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+    85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
+}
+
+/* Mermaid Fullscreen Modal */
+.agent-mermaid-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.85);
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.agent-mermaid-modal.open {
+    opacity: 1;
+}
+
+.agent-mermaid-modal.closing {
+    opacity: 0;
+}
+
+.agent-mermaid-modal-content {
+    background: #1a1a1a;
+    border-radius: 12px;
+    max-width: 95vw;
+    max-height: 90vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+    transform: scale(0.95);
+    transition: transform 0.2s ease;
+}
+
+.agent-mermaid-modal.open .agent-mermaid-modal-content {
+    transform: scale(1);
+}
+
+.agent-mermaid-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    background: #252525;
+    border-bottom: 1px solid #333;
+    color: #ededed;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.agent-mermaid-modal-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.agent-mermaid-modal-actions .agent-mermaid-btn {
+    padding: 6px 12px;
+}
+
+.agent-mermaid-close {
+    background: rgba(239, 68, 68, 0.2);
+    color: #ef4444;
+}
+
+.agent-mermaid-close:hover {
+    background: rgba(239, 68, 68, 0.3);
+    color: #f87171;
+}
+
+.agent-mermaid-modal-body {
+    padding: 40px;
+    overflow: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #161b22;
+}
+
+.agent-mermaid-modal-body svg {
     max-width: 100%;
     height: auto;
 }
@@ -449,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/css/code-viewer.css

@@ -245,17 +245,172 @@
 /* Mermaid Diagrams */
 .markdown-body .mermaid-diagram {
     margin: 16px 0;
-    padding: 20px;
     background-color: var(--code-block-bg, #161b22);
     border-radius: 6px;
+    overflow: hidden;
+    min-height: 100px;
+    position: relative;
+}
+
+.mermaid-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    gap: 4px;
+    padding: 8px 12px;
+    background: rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.mermaid-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    border-radius: 4px;
+    color: #a1a1aa;
+    cursor: pointer;
+    font-size: 11px;
+    transition: all 0.2s ease;
+}
+
+.mermaid-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: #ededed;
+}
+
+.mermaid-btn:active {
+    transform: scale(0.95);
+}
+
+.mermaid-diagram-content {
+    padding: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow-x: auto;
-    min-height: 100px;
 }
 
-.markdown-body .mermaid-diagram svg {
+.mermaid-diagram-content svg {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Mermaid Toast Notification */
+.mermaid-toast {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    z-index: 100;
+    animation: mermaid-toast-fade 2s ease-out forwards;
+}
+
+.mermaid-toast.success {
+    background: rgba(74, 222, 128, 0.9);
+    color: #000;
+}
+
+.mermaid-toast.error {
+    background: rgba(239, 68, 68, 0.9);
+    color: #fff;
+}
+
+@keyframes mermaid-toast-fade {
+    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
+    15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+    85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
+}
+
+/* Mermaid Fullscreen Modal */
+.mermaid-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.85);
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.mermaid-modal.open {
+    opacity: 1;
+}
+
+.mermaid-modal.closing {
+    opacity: 0;
+}
+
+.mermaid-modal-content {
+    background: #1a1a1a;
+    border-radius: 12px;
+    max-width: 95vw;
+    max-height: 90vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+    transform: scale(0.95);
+    transition: transform 0.2s ease;
+}
+
+.mermaid-modal.open .mermaid-modal-content {
+    transform: scale(1);
+}
+
+.mermaid-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    background: #252525;
+    border-bottom: 1px solid #333;
+    color: #ededed;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.mermaid-modal-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.mermaid-modal-actions .mermaid-btn {
+    padding: 6px 12px;
+}
+
+.mermaid-close {
+    background: rgba(239, 68, 68, 0.2);
+    color: #ef4444;
+}
+
+.mermaid-close:hover {
+    background: rgba(239, 68, 68, 0.3);
+    color: #f87171;
+}
+
+.mermaid-modal-body {
+    padding: 40px;
+    overflow: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #161b22;
+}
+
+.mermaid-modal-body svg {
     max-width: 100%;
     height: auto;
 }