agentflow-dashboard 0.4.0 → 0.5.0

package/dist/public/dashboard.js

@@ -307,6 +307,16 @@ class AgentFlowDashboard {
     this.selectedTrace = trace;
     this.selectedTraceData = trace;
 
+    // Reset agent-level caches when agent changes
+    if (this._processMapAgent !== trace.agentId) {
+      this._processMapAgent = null;
+      if (this._cyProcessMap) { this._cyProcessMap.destroy(); this._cyProcessMap = null; }
+    }
+    if (this._agentTimelineAgent !== trace.agentId) {
+      this._agentTimelineAgent = null;
+      this._agentTimelineRendered = false;
+    }
+
     // Update sidebar selection
     document.querySelectorAll('.session-item').forEach(function(el) { el.classList.remove('active'); });
     var activeEl = document.querySelector('.session-item[data-filename="' + CSS.escape(filename) + '"]');
@@ -850,6 +860,8 @@ class AgentFlowDashboard {
       case 'state': this.renderStateMachine(); break;
       case 'summary': this.renderSummary(); break;
       case 'transcript': this.renderTranscript(); break;
+      case 'agenttimeline': this.renderAgentTimeline(); break;
+      case 'processmap': this.renderProcessMap(); break;
     }
     this.updateToolbarInfo();
   }
@@ -1906,6 +1918,373 @@ class AgentFlowDashboard {
 
     return 'other';
   }
+
+  // ---------------------------------------------------------------------------
+  // Tab 8: Agent Timeline (Gantt Chart)
+  // ---------------------------------------------------------------------------
+  renderAgentTimeline() {
+    var trace = this.selectedTraceData || this.selectedTrace;
+    if (!trace || !trace.agentId) {
+      document.getElementById('agentTimelineEmpty').style.display = '';
+      return;
+    }
+
+    var agentId = trace.agentId;
+    var self = this;
+
+    if (this._agentTimelineAgent === agentId && this._agentTimelineRendered) return;
+    this._agentTimelineAgent = agentId;
+
+    var container = document.getElementById('agentTimelineContent');
+    container.innerHTML =
+      '<div class="empty-state"><div class="empty-state-icon" style="animation:spin 1s linear infinite">&#9881;</div>' +
+      '<div class="empty-state-text">Loading timeline for ' + escapeHtml(agentId) + '...</div></div>';
+
+    fetch('/api/agents/' + encodeURIComponent(agentId) + '/timeline?limit=50')
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (data.error || !data.executions || data.executions.length === 0) {
+          container.innerHTML =
+            '<div class="empty-state"><div class="empty-state-text">No timeline data for ' + escapeHtml(agentId) + '</div></div>';
+          return;
+        }
+        self._agentTimelineRendered = true;
+        self._renderGantt(container, data);
+      })
+      .catch(function() {
+        container.innerHTML =
+          '<div class="empty-state"><div class="empty-state-text">Failed to load agent timeline.</div></div>';
+      });
+  }
+
+  _renderGantt(container, data) {
+    var execs = data.executions;
+    var minTime = data.minTime;
+    var maxTime = data.maxTime;
+    var timeSpan = maxTime - minTime || 1;
+    var self = this;
+
+    // Layout constants
+    var labelW = 220;
+    var chartW = 900;
+    var rowH = 28;
+    var subRowH = 20;
+    var headerH = 36;
+    var totalW = labelW + chartW + 20;
+
+    // Build HTML
+    var html = '<div class="gantt-wrapper" style="font-size:11px;color:#c9d1d9;min-width:' + totalW + 'px;">';
+
+    // Header with time axis
+    html += '<div class="gantt-header" style="display:flex;height:' + headerH + 'px;border-bottom:1px solid #30363d;position:sticky;top:0;background:#0d1117;z-index:2;">';
+    html += '<div style="width:' + labelW + 'px;min-width:' + labelW + 'px;padding:8px 10px;font-weight:600;color:#8b949e;">Execution</div>';
+    html += '<div style="flex:1;position:relative;">';
+    // Time ticks
+    var tickCount = 6;
+    for (var t = 0; t <= tickCount; t++) {
+      var pct = (t / tickCount) * 100;
+      var tickTime = minTime + (t / tickCount) * timeSpan;
+      var d = new Date(tickTime);
+      var label = d.getMonth() + 1 + '/' + d.getDate() + ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
+      html += '<div style="position:absolute;left:' + pct + '%;top:0;height:100%;border-left:1px solid #21262d;padding:8px 4px;font-size:9px;color:#6b7280;white-space:nowrap;">' + label + '</div>';
+    }
+    html += '</div></div>';
+
+    // Rows
+    html += '<div class="gantt-body">';
+    for (var i = 0; i < execs.length; i++) {
+      var exec = execs[i];
+      var execStart = ((exec.startTime - minTime) / timeSpan) * 100;
+      var execWidth = Math.max(0.3, ((exec.endTime - exec.startTime) / timeSpan) * 100);
+      var statusColor = exec.status === 'failed' ? '#ef4444' : exec.status === 'running' ? '#3b82f6' : '#10b981';
+      var hasActivities = exec.activities && exec.activities.length > 0;
+      var execId = 'gantt-exec-' + i;
+
+      // Main execution row
+      html += '<div class="gantt-row" style="display:flex;height:' + rowH + 'px;border-bottom:1px solid #161b22;cursor:pointer;" ' +
+        'onclick="(function(){var el=document.getElementById(\'' + execId + '\');if(el)el.style.display=el.style.display===\'none\'?\'block\':\'none\';})()" ' +
+        'title="Click to ' + (hasActivities ? 'expand' : 'view') + '">';
+
+      // Label
+      var execName = exec.name || exec.filename || exec.id;
+      if (execName.length > 28) execName = execName.slice(0, 28) + '...';
+      var dur = this.computeDuration(exec.startTime, exec.endTime);
+      var triggerBadge = exec.trigger ? '<span style="background:#1f2937;padding:1px 4px;border-radius:3px;font-size:8px;margin-left:4px;">' + escapeHtml(exec.trigger) + '</span>' : '';
+      var expandIcon = hasActivities ? '<span style="color:#6b7280;margin-right:4px;">&#9654;</span>' : '<span style="width:14px;display:inline-block;"></span>';
+
+      html += '<div style="width:' + labelW + 'px;min-width:' + labelW + 'px;padding:4px 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:' + (rowH - 8) + 'px;">' +
+        expandIcon + escapeHtml(execName) + triggerBadge + '</div>';
+
+      // Bar
+      html += '<div style="flex:1;position:relative;padding:4px 0;">';
+      html += '<div style="position:absolute;left:' + execStart + '%;width:' + execWidth + '%;top:4px;height:' + (rowH - 12) + 'px;' +
+        'background:' + statusColor + ';border-radius:3px;opacity:0.85;min-width:3px;" ' +
+        'title="' + escapeHtml(exec.name || '') + ' | ' + dur + ' | ' + escapeHtml(exec.status) + '"></div>';
+      html += '</div></div>';
+
+      // Sub-activities (collapsed by default)
+      if (hasActivities) {
+        html += '<div id="' + execId + '" style="display:none;background:#0a0e14;">';
+        // Filter to top-level activities (no parentId or parentId is root)
+        var rootIds = new Set();
+        if (exec.activities.length > 0) {
+          var firstAct = exec.activities[0];
+          rootIds.add(firstAct.id);
+        }
+
+        for (var j = 0; j < exec.activities.length; j++) {
+          var act = exec.activities[j];
+          var actStart = ((Math.max(act.startTime, exec.startTime) - minTime) / timeSpan) * 100;
+          var actEnd = act.endTime || act.startTime;
+          var actWidth = Math.max(0.2, ((actEnd - Math.max(act.startTime, exec.startTime)) / timeSpan) * 100);
+          var actColor = act.status === 'failed' ? '#f87171' :
+                         act.type === 'user' ? '#60a5fa' :
+                         act.type === 'assistant' ? '#34d399' :
+                         act.type === 'thinking' ? '#a78bfa' :
+                         act.type === 'tool_call' ? '#fb923c' :
+                         act.type === 'tool_result' ? '#4ade80' :
+                         act.type === 'agent' ? '#38bdf8' :
+                         '#6b7280';
+          var actName = act.name || act.type;
+          if (actName.length > 30) actName = actName.slice(0, 30) + '...';
+          var isChild = act.parentId && !rootIds.has(act.id);
+
+          html += '<div style="display:flex;height:' + subRowH + 'px;border-bottom:1px solid #0d1117;">';
+          html += '<div style="width:' + labelW + 'px;min-width:' + labelW + 'px;padding:2px 10px 2px ' + (isChild ? '30' : '20') + 'px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;color:#8b949e;line-height:' + (subRowH - 4) + 'px;">' +
+            '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + actColor + ';margin-right:6px;vertical-align:middle;"></span>' +
+            escapeHtml(actName) + '</div>';
+          html += '<div style="flex:1;position:relative;">';
+          html += '<div style="position:absolute;left:' + actStart + '%;width:' + actWidth + '%;top:3px;height:' + (subRowH - 8) + 'px;' +
+            'background:' + actColor + ';border-radius:2px;opacity:0.7;min-width:2px;" ' +
+            'title="' + escapeHtml(act.name || act.type) + ' | ' + escapeHtml(act.status) + '"></div>';
+          html += '</div></div>';
+        }
+        html += '</div>';
+      }
+    }
+
+    html += '</div>';
+
+    // Summary bar
+    html += '<div style="padding:10px;border-top:1px solid #30363d;color:#8b949e;font-size:10px;">';
+    html += escapeHtml(data.agentId) + ' &mdash; ' + data.executions.length + ' of ' + data.totalExecutions + ' executions shown';
+    var timeRange = new Date(minTime).toLocaleDateString() + ' to ' + new Date(maxTime).toLocaleDateString();
+    html += ' &mdash; ' + timeRange;
+    html += '</div>';
+
+    html += '</div>';
+    container.innerHTML = html;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Tab 9: Process Map (Process Mining Graph)
+  // ---------------------------------------------------------------------------
+  renderProcessMap() {
+    var trace = this.selectedTraceData || this.selectedTrace;
+    if (!trace || !trace.agentId) {
+      document.getElementById('processMapEmpty').style.display = '';
+      return;
+    }
+
+    var agentId = trace.agentId;
+    var self = this;
+
+    // Avoid re-fetching for same agent
+    if (this._processMapAgent === agentId && this._cyProcessMap) return;
+    this._processMapAgent = agentId;
+
+    document.getElementById('processMapEmpty').innerHTML =
+      '<div class="empty-state-icon" style="animation:spin 1s linear infinite">&#9881;</div>' +
+      '<div class="empty-state-text">Building process map for ' + escapeHtml(agentId) + '...</div>';
+    document.getElementById('processMapEmpty').style.display = '';
+
+    fetch('/api/agents/' + encodeURIComponent(agentId) + '/process-graph')
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (data.error || !data.nodes || data.nodes.length === 0) {
+          document.getElementById('processMapEmpty').innerHTML =
+            '<div class="empty-state-icon">&#9881;</div>' +
+            '<div class="empty-state-text">No process data for ' + escapeHtml(agentId) + '</div>';
+          return;
+        }
+        document.getElementById('processMapEmpty').style.display = 'none';
+        self._buildProcessMapGraph(data);
+      })
+      .catch(function() {
+        document.getElementById('processMapEmpty').innerHTML =
+          '<div class="empty-state-icon">&#9881;</div>' +
+          '<div class="empty-state-text">Failed to load process map.</div>';
+      });
+  }
+
+  _buildProcessMapGraph(data) {
+    if (this._cyProcessMap) { this._cyProcessMap.destroy(); this._cyProcessMap = null; }
+
+    var elements = [];
+    var maxNode = data.maxNodeCount || 1;
+    var maxEdge = data.maxEdgeCount || 1;
+
+    // Add nodes
+    for (var i = 0; i < data.nodes.length; i++) {
+      var node = data.nodes[i];
+      // Skip very rare activities (< 2% frequency) to reduce clutter, but keep virtual nodes
+      if (!node.isVirtual && node.frequency < 0.02 && data.nodes.length > 15) continue;
+
+      var size = node.isVirtual ? 30 : Math.max(25, Math.min(70, 25 + 45 * (node.count / maxNode)));
+      var label = node.label;
+      if (!node.isVirtual && node.count > 1) label += ' (' + node.count + ')';
+
+      elements.push({
+        group: 'nodes',
+        data: {
+          id: node.id,
+          label: label,
+          count: node.count,
+          frequency: node.frequency,
+          avgDuration: node.avgDuration,
+          failRate: node.failRate,
+          isVirtual: node.isVirtual,
+          size: size,
+          fullData: node
+        }
+      });
+    }
+
+    // Collect valid node IDs
+    var validIds = new Set(elements.map(function(e) { return e.data.id; }));
+
+    // Add edges (only between valid nodes)
+    for (var j = 0; j < data.edges.length; j++) {
+      var edge = data.edges[j];
+      if (!validIds.has(edge.source) || !validIds.has(edge.target)) continue;
+      // Skip very rare transitions
+      if (edge.frequency < 0.02 && data.edges.length > 30) continue;
+
+      var width = Math.max(1, Math.min(8, 1 + 7 * (edge.count / maxEdge)));
+      var opacity = Math.max(0.3, Math.min(1.0, 0.3 + 0.7 * (edge.count / maxEdge)));
+
+      elements.push({
+        group: 'edges',
+        data: {
+          id: 'pe-' + edge.source + '-' + edge.target,
+          source: edge.source,
+          target: edge.target,
+          count: edge.count,
+          frequency: edge.frequency,
+          width: width,
+          opacity: opacity,
+          label: edge.count > 1 ? String(edge.count) : ''
+        }
+      });
+    }
+
+    var container = document.getElementById('cyProcessMap');
+    var self = this;
+
+    this._cyProcessMap = cytoscape({
+      container: container,
+      elements: elements,
+      style: [
+        {
+          selector: 'node',
+          style: {
+            'label': 'data(label)',
+            'width': 'data(size)',
+            'height': 'data(size)',
+            'font-size': '9px',
+            'text-valign': 'bottom',
+            'text-halign': 'center',
+            'text-margin-y': 6,
+            'color': '#c9d1d9',
+            'text-outline-color': '#0d1117',
+            'text-outline-width': 2,
+            'text-wrap': 'ellipsis',
+            'text-max-width': '100px',
+            'border-width': 2,
+            'border-color': '#30363d',
+            'background-color': '#3b82f6',
+            'shape': 'round-rectangle'
+          }
+        },
+        // Virtual START/END nodes
+        { selector: 'node[?isVirtual]', style: {
+          'background-color': '#6b7280', 'shape': 'ellipse', 'border-color': '#4b5563',
+          'font-size': '8px', 'font-weight': 'bold', 'text-valign': 'center', 'text-margin-y': 0
+        }},
+        // Color by fail rate: green → yellow → red
+        { selector: 'node[failRate <= 0]', style: { 'background-color': '#10b981', 'border-color': '#2ea043' }},
+        { selector: 'node[failRate > 0][failRate <= 0.1]', style: { 'background-color': '#22c55e', 'border-color': '#3fb950' }},
+        { selector: 'node[failRate > 0.1][failRate <= 0.3]', style: { 'background-color': '#eab308', 'border-color': '#d29922' }},
+        { selector: 'node[failRate > 0.3]', style: { 'background-color': '#ef4444', 'border-color': '#f85149' }},
+        // Selected
+        { selector: ':selected', style: { 'border-width': 4, 'border-color': '#f59e0b', 'overlay-opacity': 0.08 }},
+        // Edges
+        {
+          selector: 'edge',
+          style: {
+            'width': 'data(width)',
+            'opacity': 'data(opacity)',
+            'line-color': '#6b7280',
+            'target-arrow-color': '#6b7280',
+            'target-arrow-shape': 'triangle',
+            'curve-style': 'bezier',
+            'arrow-scale': 0.7,
+            'label': 'data(label)',
+            'font-size': '8px',
+            'color': '#8b949e',
+            'text-outline-color': '#0d1117',
+            'text-outline-width': 1.5,
+            'text-rotation': 'autorotate'
+          }
+        }
+      ],
+      layout: {
+        name: 'breadthfirst',
+        directed: true,
+        padding: 50,
+        spacingFactor: 1.6,
+        animate: true,
+        animationDuration: 400,
+        roots: elements.filter(function(e) { return e.data && e.data.id === '[START]'; }).length > 0
+          ? ['[START]'] : undefined
+      },
+      minZoom: 0.15,
+      maxZoom: 4,
+      wheelSensitivity: 0.3
+    });
+
+    // Click node → show detail
+    this._cyProcessMap.on('tap', 'node', function(e) {
+      var d = e.target.data().fullData;
+      if (!d || d.isVirtual) return;
+      var panel = document.getElementById('processMapDetailPanel');
+      var title = document.getElementById('processMapDetailTitle');
+      var body = document.getElementById('processMapDetailBody');
+
+      title.textContent = d.label;
+      var html = '';
+      html += self.detailRow('Occurrences', d.count);
+      html += self.detailRow('Frequency', (d.frequency * 100).toFixed(1) + '% of traces');
+      if (d.avgDuration > 0) html += self.detailRow('Avg Duration', self.computeDuration(0, d.avgDuration));
+      html += self.detailRow('Failure Rate', (d.failRate * 100).toFixed(1) + '%');
+      body.innerHTML = html;
+      panel.classList.add('active');
+    });
+
+    this._cyProcessMap.on('tap', function(e) {
+      if (e.target === self._cyProcessMap) {
+        document.getElementById('processMapDetailPanel').classList.remove('active');
+      }
+    });
+
+    // Close button
+    var closeBtn = document.getElementById('processMapDetailClose');
+    if (closeBtn) {
+      closeBtn.onclick = function() {
+        document.getElementById('processMapDetailPanel').classList.remove('active');
+      };
+    }
+  }
 }
 
 // Initialize

package/dist/public/index.html

@@ -1235,6 +1235,8 @@
                 <div class="tab" data-tab="state">State Machine</div>
                 <div class="tab" data-tab="summary">Summary</div>
                 <div class="tab" data-tab="transcript">Transcript</div>
+                <div class="tab" data-tab="agenttimeline">Agent Timeline</div>
+                <div class="tab" data-tab="processmap">Process Map</div>
             </div>
 
             <div class="toolbar" id="toolbar">
@@ -1332,6 +1334,35 @@
                         </div>
                     </div>
                 </div>
+
+                <!-- Agent Timeline (Gantt) tab -->
+                <div class="tab-panel" id="panel-agenttimeline">
+                    <div class="timeline-container" id="agentTimelineContent" style="overflow:auto;">
+                        <div class="empty-state" id="agentTimelineEmpty">
+                            <div class="empty-state-icon">&#9776;</div>
+                            <div class="empty-state-title">Agent Timeline</div>
+                            <div class="empty-state-text">Select a trace to view all executions for its agent as a Gantt chart.</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Process Map tab -->
+                <div class="tab-panel" id="panel-processmap">
+                    <div id="cyProcessMap" style="width:100%;height:100%;min-height:500px;">
+                        <div class="empty-state" id="processMapEmpty">
+                            <div class="empty-state-icon">&#9881;</div>
+                            <div class="empty-state-title">Process Map</div>
+                            <div class="empty-state-text">Select a trace to view the process mining graph for its agent.<br>Shows activity flows aggregated across all executions.</div>
+                        </div>
+                    </div>
+                    <div class="node-detail-panel" id="processMapDetailPanel">
+                        <div class="node-detail-header">
+                            <h4 id="processMapDetailTitle">Activity Details</h4>
+                            <button class="node-detail-close" id="processMapDetailClose">&times;</button>
+                        </div>
+                        <div class="node-detail-body" id="processMapDetailBody"></div>
+                    </div>
+                </div>
             </div>
         </main>
     </div>

package/dist/server.cjs

@@ -1701,6 +1701,167 @@ var DashboardServer = class {
         res.status(500).json({ error: "Failed to load statistics" });
       }
     });
+    this.app.get("/api/agents/:agentId/timeline", (req, res) => {
+      try {
+        const agentId = req.params.agentId;
+        const limit = Math.min(parseInt(req.query.limit) || 50, 200);
+        const rawTraces = this.watcher.getTracesByAgent(agentId);
+        if (rawTraces.length === 0) {
+          return res.status(404).json({ error: "No traces for agent" });
+        }
+        const traces = rawTraces.sort((a, b) => (b.startTime || 0) - (a.startTime || 0)).slice(0, limit).reverse();
+        const executions = traces.map((t) => {
+          const serialized = serializeTrace(t);
+          const nodes = serialized.nodes || {};
+          const events = serialized.sessionEvents || [];
+          const activities = [];
+          if (events.length > 0) {
+            for (let i = 0; i < events.length; i++) {
+              const evt = events[i];
+              if (evt.type === "system" || evt.type === "model_change") continue;
+              const dur = evt.duration || 0;
+              const startTs = dur > 0 ? evt.timestamp - dur : evt.timestamp;
+              const nextTs = i + 1 < events.length ? events[i + 1].timestamp : evt.timestamp;
+              const endTs = dur > 0 ? evt.timestamp : Math.max(nextTs, startTs + 500);
+              activities.push({
+                id: evt.id || `evt-${i}`,
+                name: evt.toolName || evt.name || evt.type,
+                type: evt.type,
+                status: evt.toolError ? "failed" : "completed",
+                startTime: startTs,
+                endTime: endTs,
+                parentId: evt.parentId
+              });
+            }
+          } else {
+            const sorted = Object.values(nodes).sort((a, b) => (a.startTime || 0) - (b.startTime || 0));
+            for (const node of sorted) {
+              activities.push({
+                id: node.id,
+                name: node.name || node.type || node.id,
+                type: node.type || "unknown",
+                status: node.status || "completed",
+                startTime: node.startTime || t.startTime,
+                endTime: node.endTime || node.startTime || t.startTime,
+                parentId: node.parentId
+              });
+            }
+          }
+          return {
+            id: serialized.id || serialized.filename,
+            filename: serialized.filename,
+            name: serialized.name || serialized.filename,
+            agentId: serialized.agentId,
+            trigger: serialized.trigger,
+            status: serialized.status || "completed",
+            sourceType: serialized.sourceType,
+            startTime: serialized.startTime,
+            endTime: serialized.endTime || serialized.startTime,
+            tokenUsage: serialized.tokenUsage,
+            activities
+          };
+        });
+        const allTimes = executions.flatMap((e) => [e.startTime, e.endTime]);
+        const minTime = Math.min(...allTimes);
+        const maxTime = Math.max(...allTimes);
+        res.json({ agentId, totalExecutions: rawTraces.length, executions, minTime, maxTime });
+      } catch (error) {
+        console.error("Agent timeline error:", error);
+        res.status(500).json({ error: "Failed to build agent timeline" });
+      }
+    });
+    this.app.get("/api/agents/:agentId/process-graph", (req, res) => {
+      try {
+        const agentId = req.params.agentId;
+        const traces = this.watcher.getTracesByAgent(agentId).map(serializeTrace);
+        if (traces.length === 0) {
+          return res.status(404).json({ error: "No traces for agent" });
+        }
+        const activityCounts = /* @__PURE__ */ new Map();
+        const transitionCounts = /* @__PURE__ */ new Map();
+        const activityDurations = /* @__PURE__ */ new Map();
+        const activityStatuses = /* @__PURE__ */ new Map();
+        let totalTraces = 0;
+        for (const trace of traces) {
+          totalTraces++;
+          const activities = [];
+          if (trace.sessionEvents && trace.sessionEvents.length > 0) {
+            for (const evt of trace.sessionEvents) {
+              const name = evt.toolName || evt.name || evt.type;
+              if (!name) continue;
+              activities.push({
+                name,
+                type: evt.type,
+                status: evt.toolError ? "failed" : "completed",
+                duration: evt.duration || 0
+              });
+            }
+          } else {
+            const nodes2 = trace.nodes || {};
+            const sorted = Object.values(nodes2).sort((a, b) => (a.startTime || 0) - (b.startTime || 0));
+            for (const node of sorted) {
+              activities.push({
+                name: node.name || node.type || node.id,
+                type: node.type || "unknown",
+                status: node.status || "completed",
+                duration: (node.endTime || node.startTime || 0) - (node.startTime || 0)
+              });
+            }
+          }
+          const seq = ["[START]", ...activities.map((a) => a.name), "[END]"];
+          for (let i = 0; i < seq.length; i++) {
+            const act = seq[i];
+            activityCounts.set(act, (activityCounts.get(act) || 0) + 1);
+            if (i < seq.length - 1) {
+              const key = act + " \u2192 " + seq[i + 1];
+              transitionCounts.set(key, (transitionCounts.get(key) || 0) + 1);
+            }
+          }
+          for (const act of activities) {
+            if (act.duration > 0) {
+              const durs = activityDurations.get(act.name) || [];
+              durs.push(act.duration);
+              activityDurations.set(act.name, durs);
+            }
+            const st = activityStatuses.get(act.name) || { ok: 0, fail: 0 };
+            if (act.status === "failed") st.fail++;
+            else st.ok++;
+            activityStatuses.set(act.name, st);
+          }
+        }
+        const nodes = Array.from(activityCounts.entries()).map(([name, count]) => {
+          const durs = activityDurations.get(name) || [];
+          const st = activityStatuses.get(name) || { ok: 0, fail: 0 };
+          const avgDuration = durs.length > 0 ? durs.reduce((a, b) => a + b, 0) / durs.length : 0;
+          return {
+            id: name,
+            label: name,
+            count,
+            frequency: count / totalTraces,
+            avgDuration,
+            failRate: st.ok + st.fail > 0 ? st.fail / (st.ok + st.fail) : 0,
+            isVirtual: name === "[START]" || name === "[END]"
+          };
+        });
+        const edges = Array.from(transitionCounts.entries()).map(([key, count]) => {
+          const [source, target] = key.split(" \u2192 ");
+          return { source, target, count, frequency: count / totalTraces };
+        });
+        const maxEdgeCount = Math.max(...edges.map((e) => e.count), 1);
+        const maxNodeCount = Math.max(...nodes.filter((n) => !n.isVirtual).map((n) => n.count), 1);
+        res.json({
+          agentId,
+          totalTraces,
+          nodes,
+          edges,
+          maxEdgeCount,
+          maxNodeCount
+        });
+      } catch (error) {
+        console.error("Process graph error:", error);
+        res.status(500).json({ error: "Failed to build process graph" });
+      }
+    });
     this.app.get("/api/stats/:agentId", (req, res) => {
       try {
         const agentStats = this.stats.getAgentStats(req.params.agentId);

package/dist/server.js

@@ -1,6 +1,6 @@
 import {
   DashboardServer
-} from "./chunk-25MUPUYY.js";
+} from "./chunk-RWNVLZU7.js";
 export {
   DashboardServer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentflow-dashboard",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Real-time monitoring dashboard for AgentFlow - Visualize agent execution graphs and performance",
   "type": "module",
   "main": "./dist/index.js",