agentflow-dashboard 0.6.0 → 0.7.0

package/dist/server.js

@@ -1,6 +1,6 @@
 import {
   DashboardServer
-} from "./chunk-N6IN5SHX.js";
+} from "./chunk-GA2Y6E62.js";
 export {
   DashboardServer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentflow-dashboard",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Real-time monitoring dashboard for AgentFlow - Visualize agent execution graphs and performance",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,9 +21,11 @@
     "public"
   ],
   "scripts": {
-    "build": "tsup src/index.ts src/cli.ts src/server.ts --format esm,cjs --clean && npm run build:public",
+    "build": "tsup src/index.ts src/cli.ts src/server.ts --format esm,cjs --clean && npm run build:public && npm run build:client",
     "build:public": "cp -r public dist/",
+    "build:client": "vite build",
     "dev": "tsx src/server.ts",
+    "dev:client": "vite",
     "start": "node dist/server.js",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -40,17 +42,23 @@
     "agentflow-core": "^0.8.0",
     "chokidar": "^3.5.3",
     "express": "^4.18.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "ws": "^8.16.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.41.0",
     "@types/express": "^4.17.21",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
     "@types/ws": "^8.5.10",
+    "@vitejs/plugin-react": "^4.4.1",
     "@vitest/coverage-v8": "^3.0.0",
     "get-port": "^7.0.0",
     "supertest": "^7.0.0",
     "tsup": "^8.4.0",
     "tsx": "^4.19.0",
+    "vite": "^6.3.5",
     "vitest": "^3.0.0",
     "ws": "^8.16.0"
   },

package/public/dashboard.js

@@ -380,51 +380,83 @@ class AgentFlowDashboard {
     section.style.display = '';
     var html = '<h4>Process Health</h4>';
 
-    // PID File section
-    if (r.pidFile) {
-      var pf = r.pidFile;
-      var cls = pf.alive && pf.matchesProcess ? 'ok' : pf.stale ? 'bad' : 'warn';
-      html += '<div class="ph-row">';
-      html += '<span class="ph-label">PID File</span>';
-      html += `<span class="ph-value ${cls}">`;
-      html += pf.pid ? `PID ${pf.pid}${pf.alive ? ' (alive)' : ' (dead)'}` : 'No PID';
-      html += '</span></div>';
-    }
+    // Render all discovered services (new multi-service format)
+    var services = r.services || [];
+    if (services.length > 0) {
+      for (var si = 0; si < services.length; si++) {
+        var svc = services[si];
+        html += '<div class="ph-service">';
+        html += `<div class="ph-service-name">${escapeHtml(svc.name)}</div>`;
+
+        // PID File for this service
+        if (svc.pidFile) {
+          var pf = svc.pidFile;
+          var cls = pf.alive && pf.matchesProcess ? 'ok' : pf.stale ? 'bad' : 'warn';
+          html += '<div class="ph-row">';
+          html += '<span class="ph-label">PID File</span>';
+          html += `<span class="ph-value ${cls}">`;
+          html += pf.pid ? `PID ${pf.pid}${pf.alive ? ' (alive)' : ' (dead)'}` : 'No PID';
+          html += '</span></div>';
+        }
 
-    // Systemd section
-    if (r.systemd) {
-      var sd = r.systemd;
-      var sdCls = sd.activeState === 'active' ? 'ok' : sd.failed ? 'bad' : 'warn';
-      html += '<div class="ph-row">';
-      html += '<span class="ph-label">Systemd</span>';
-      html += `<span class="ph-value ${sdCls}">`;
-      html +=
-        escapeHtml(sd.unit) +
-        ' \u2014 ' +
-        escapeHtml(sd.activeState) +
-        ' (' +
-        escapeHtml(sd.subState) +
-        ')';
-      if (sd.restarts > 0) html += ` [${sd.restarts} restarts]`;
-      html += '</span></div>';
-    }
+        // Systemd for this service
+        if (svc.systemd) {
+          var sd = svc.systemd;
+          var sdCls = sd.activeState === 'active' ? 'ok' : sd.failed ? 'bad' : 'warn';
+          html += '<div class="ph-row">';
+          html += '<span class="ph-label">Systemd</span>';
+          html += `<span class="ph-value ${sdCls}">`;
+          html +=
+            escapeHtml(sd.unit) +
+            ' \u2014 ' +
+            escapeHtml(sd.activeState) +
+            ' (' +
+            escapeHtml(sd.subState) +
+            ')';
+          if (sd.restarts > 0) html += ` [${sd.restarts} restarts]`;
+          html += '</span></div>';
+        }
 
-    // Workers detailed view
-    if (r.workers?.workers) {
-      html += '<div class="ph-section">';
-      html += '<span class="ph-label">Workers</span>';
-      html += '<div class="process-grid">';
-      for (var i = 0; i < r.workers.workers.length; i++) {
-        var worker = r.workers.workers[i];
-        var statusCls = worker.alive ? 'ok' : worker.stale ? 'bad' : 'warn';
-        html += `<div class="worker-card ${statusCls}">`;
-        html += `<div class="worker-name">${escapeHtml(worker.name)}</div>`;
-        html += '<div class="worker-details">';
-        html += `<span>PID: ${worker.pid || '-'}</span>`;
-        html += `<span>${escapeHtml(worker.declaredStatus)}</span>`;
-        html += '</div></div>';
+        // Workers for this service
+        if (svc.workers?.workers) {
+          html += '<div class="ph-section">';
+          html += '<span class="ph-label">Workers</span>';
+          html += '<div class="process-grid">';
+          for (var i = 0; i < svc.workers.workers.length; i++) {
+            var worker = svc.workers.workers[i];
+            var statusCls = worker.alive ? 'ok' : worker.stale ? 'bad' : 'warn';
+            html += `<div class="worker-card ${statusCls}">`;
+            html += `<div class="worker-name">${escapeHtml(worker.name)}</div>`;
+            html += '<div class="worker-details">';
+            html += `<span>PID: ${worker.pid || '-'}</span>`;
+            html += `<span>${escapeHtml(worker.declaredStatus)}</span>`;
+            html += '</div></div>';
+          }
+          html += '</div></div>';
+        }
+
+        html += '</div>'; // .ph-service
+      }
+    } else {
+      // Fallback: legacy single-service format
+      if (r.pidFile) {
+        var pf2 = r.pidFile;
+        var cls2 = pf2.alive && pf2.matchesProcess ? 'ok' : pf2.stale ? 'bad' : 'warn';
+        html += '<div class="ph-row">';
+        html += '<span class="ph-label">PID File</span>';
+        html += `<span class="ph-value ${cls2}">`;
+        html += pf2.pid ? `PID ${pf2.pid}${pf2.alive ? ' (alive)' : ' (dead)'}` : 'No PID';
+        html += '</span></div>';
+      }
+      if (r.systemd) {
+        var sd2 = r.systemd;
+        var sdCls2 = sd2.activeState === 'active' ? 'ok' : sd2.failed ? 'bad' : 'warn';
+        html += '<div class="ph-row">';
+        html += '<span class="ph-label">Systemd</span>';
+        html += `<span class="ph-value ${sdCls2}">`;
+        html += escapeHtml(sd2.unit) + ' \u2014 ' + escapeHtml(sd2.activeState) + ' (' + escapeHtml(sd2.subState) + ')';
+        html += '</span></div>';
       }
-      html += '</div></div>';
     }
 
     // Agent Services - categorize processes and build tree

package/public/index.html

@@ -711,6 +711,19 @@
         }
 
         /* Enhanced Process Health */
+        .ph-service {
+            margin-bottom: 1rem;
+            padding: 0.6rem 0.8rem;
+            border: 1px solid var(--border-color, #30363d);
+            border-radius: 6px;
+        }
+        .ph-service-name {
+            font-weight: 600;
+            font-size: 0.95rem;
+            margin-bottom: 0.4rem;
+            color: var(--fg-primary, #e6edf3);
+            text-transform: capitalize;
+        }
         .ph-section {
             margin-bottom: 1rem;
         }

package/dist/public/debug.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head><title>Test Dashboard API</title></head>
-<body>
-<script>
-fetch('/api/process-health')
-  .then(r => r.json())
-  .then(data => {
-    console.log('Process Health Data:', data);
-
-    // Test categorization
-    const processes = data.osProcesses || [];
-    const agents = [];
-    const infrastructure = [];
-
-    processes.forEach(proc => {
-      const cmd = proc.command.toLowerCase();
-      const cmdline = (proc.cmdline || '').toLowerCase();
-
-      // Test infrastructure detection
-      if (cmd.includes('milvus') || cmdline.includes('milvus')) {
-        infrastructure.push({component: 'Milvus Vector DB', ...proc});
-      } else if (cmdline.includes('agentflow-dashboard')) {
-        agents.push({service: 'AgentFlow Dashboard', ...proc});
-      }
-    });
-
-    console.log('Detected Infrastructure:', infrastructure);
-    console.log('Detected Agents:', agents);
-
-    document.body.innerHTML = `
-      <h2>Process Health Debug</h2>
-      <h3>Infrastructure (${infrastructure.length}):</h3>
-      <ul>${infrastructure.map(i => `<li>PID ${i.pid}: ${i.component} (CPU: ${i.cpu}%)</li>`).join('')}</ul>
-      <h3>Agents (${agents.length}):</h3>
-      <ul>${agents.map(a => `<li>PID ${a.pid}: ${a.service} (CPU: ${a.cpu}%)</li>`).join('')}</ul>
-      <h3>Total OS Processes: ${processes.length}</h3>
-    `;
-  })
-  .catch(console.error);
-</script>
-</body>
-</html>

package/public/debug.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head><title>Test Dashboard API</title></head>
-<body>
-<script>
-fetch('/api/process-health')
-  .then(r => r.json())
-  .then(data => {
-    console.log('Process Health Data:', data);
-
-    // Test categorization
-    const processes = data.osProcesses || [];
-    const agents = [];
-    const infrastructure = [];
-
-    processes.forEach(proc => {
-      const cmd = proc.command.toLowerCase();
-      const cmdline = (proc.cmdline || '').toLowerCase();
-
-      // Test infrastructure detection
-      if (cmd.includes('milvus') || cmdline.includes('milvus')) {
-        infrastructure.push({component: 'Milvus Vector DB', ...proc});
-      } else if (cmdline.includes('agentflow-dashboard')) {
-        agents.push({service: 'AgentFlow Dashboard', ...proc});
-      }
-    });
-
-    console.log('Detected Infrastructure:', infrastructure);
-    console.log('Detected Agents:', agents);
-
-    document.body.innerHTML = `
-      <h2>Process Health Debug</h2>
-      <h3>Infrastructure (${infrastructure.length}):</h3>
-      <ul>${infrastructure.map(i => `<li>PID ${i.pid}: ${i.component} (CPU: ${i.cpu}%)</li>`).join('')}</ul>
-      <h3>Agents (${agents.length}):</h3>
-      <ul>${agents.map(a => `<li>PID ${a.pid}: ${a.service} (CPU: ${a.cpu}%)</li>`).join('')}</ul>
-      <h3>Total OS Processes: ${processes.length}</h3>
-    `;
-  })
-  .catch(console.error);
-</script>
-</body>
-</html>