agentflow-dashboard 0.1.0

package/dist/public/dashboard.js

@@ -0,0 +1,342 @@
+class AgentFlowDashboard {
+    constructor() {
+        this.ws = null;
+        this.reconnectAttempts = 0;
+        this.maxReconnectAttempts = 10;
+        this.reconnectDelay = 1000;
+        this.selectedAgent = null;
+        this.traces = [];
+        this.agents = [];
+        this.stats = null;
+
+        this.init();
+    }
+
+    init() {
+        this.connectWebSocket();
+        this.setupEventListeners();
+        this.loadInitialData();
+    }
+
+    connectWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${protocol}//${window.location.host}`;
+
+        this.ws = new WebSocket(wsUrl);
+
+        this.ws.onopen = () => {
+            console.log('Connected to AgentFlow Dashboard');
+            this.reconnectAttempts = 0;
+            this.updateConnectionStatus(true);
+        };
+
+        this.ws.onmessage = (event) => {
+            try {
+                const message = JSON.parse(event.data);
+                this.handleWebSocketMessage(message);
+            } catch (error) {
+                console.error('Error parsing WebSocket message:', error);
+            }
+        };
+
+        this.ws.onclose = () => {
+            console.log('Disconnected from AgentFlow Dashboard');
+            this.updateConnectionStatus(false);
+            this.attemptReconnect();
+        };
+
+        this.ws.onerror = (error) => {
+            console.error('WebSocket error:', error);
+            this.updateConnectionStatus(false);
+        };
+    }
+
+    attemptReconnect() {
+        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+            console.log('Max reconnection attempts reached');
+            return;
+        }
+
+        this.reconnectAttempts++;
+        const delay = this.reconnectDelay * Math.pow(1.5, this.reconnectAttempts - 1);
+
+        setTimeout(() => {
+            console.log(`Reconnection attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts}`);
+            this.connectWebSocket();
+        }, delay);
+    }
+
+    handleWebSocketMessage(message) {
+        switch (message.type) {
+            case 'init':
+                this.traces = message.data.traces || [];
+                this.stats = message.data.stats || null;
+                this.updateUI();
+                break;
+
+            case 'trace-added':
+                this.traces.unshift(message.data);
+                this.updateTraces();
+                this.refreshStats();
+                break;
+
+            case 'trace-updated':
+                const index = this.traces.findIndex(t => t.filename === message.data.filename);
+                if (index >= 0) {
+                    this.traces[index] = message.data;
+                    this.updateTraces();
+                }
+                break;
+
+            case 'stats-updated':
+                this.stats = message.data;
+                this.updateStats();
+                this.updateAgents();
+                break;
+
+            default:
+                console.log('Unknown message type:', message.type);
+        }
+    }
+
+    async loadInitialData() {
+        try {
+            const [tracesRes, statsRes] = await Promise.all([
+                fetch('/api/traces'),
+                fetch('/api/stats')
+            ]);
+
+            if (tracesRes.ok) {
+                this.traces = await tracesRes.json();
+            }
+
+            if (statsRes.ok) {
+                this.stats = await statsRes.json();
+            }
+
+            this.updateUI();
+        } catch (error) {
+            console.error('Error loading initial data:', error);
+        }
+    }
+
+    async refreshStats() {
+        try {
+            const response = await fetch('/api/stats');
+            if (response.ok) {
+                this.stats = await response.json();
+                this.updateStats();
+                this.updateAgents();
+            }
+        } catch (error) {
+            console.error('Error refreshing stats:', error);
+        }
+    }
+
+    updateUI() {
+        this.updateStats();
+        this.updateAgents();
+        this.updateTraces();
+    }
+
+    updateConnectionStatus(connected) {
+        const statusEl = document.getElementById('connectionStatus');
+        if (connected) {
+            statusEl.textContent = 'Connected';
+            statusEl.className = 'connection-status connected';
+        } else {
+            statusEl.textContent = 'Disconnected';
+            statusEl.className = 'connection-status disconnected';
+        }
+    }
+
+    updateStats() {
+        const statsGrid = document.getElementById('statsGrid');
+
+        if (!this.stats) {
+            statsGrid.innerHTML = '<div class="loading">Loading statistics...</div>';
+            return;
+        }
+
+        const successRate = Math.round(this.stats.globalSuccessRate * 10) / 10;
+
+        statsGrid.innerHTML = `
+            <div class="stat-card">
+                <h3>Total Agents</h3>
+                <div class="value">${this.stats.totalAgents}</div>
+            </div>
+            <div class="stat-card">
+                <h3>Total Executions</h3>
+                <div class="value">${this.stats.totalExecutions.toLocaleString()}</div>
+            </div>
+            <div class="stat-card">
+                <h3>Success Rate</h3>
+                <div class="value">${successRate}%</div>
+            </div>
+            <div class="stat-card">
+                <h3>Active Agents</h3>
+                <div class="value">${this.stats.activeAgents}</div>
+            </div>
+        `;
+    }
+
+    updateAgents() {
+        const agentList = document.getElementById('agentList');
+
+        if (!this.stats || !this.stats.topAgents) {
+            agentList.innerHTML = '<div class="loading">Loading agents...</div>';
+            return;
+        }
+
+        const agentItems = this.stats.topAgents.map(agent => {
+            const successRate = Math.round(agent.successRate * 10) / 10;
+            let rateClass = 'success-rate';
+            if (successRate < 50) rateClass += ' critical';
+            else if (successRate < 80) rateClass += ' low';
+
+            return `
+                <div class="agent-item" data-agent-id="${agent.agentId}">
+                    <div class="agent-name">${agent.agentId}</div>
+                    <div class="agent-stats">
+                        <span>${agent.executionCount} executions</span>
+                        <span class="${rateClass}">${successRate}%</span>
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        agentList.innerHTML = agentItems;
+    }
+
+    updateTraces() {
+        const tracesList = document.getElementById('tracesList');
+
+        if (!this.traces || this.traces.length === 0) {
+            tracesList.innerHTML = '<div class="loading">No traces available</div>';
+            return;
+        }
+
+        // Filter traces if an agent is selected
+        const filteredTraces = this.selectedAgent ?
+            this.traces.filter(trace => trace.agentId === this.selectedAgent) :
+            this.traces;
+
+        const traceItems = filteredTraces.slice(0, 50).map(trace => {
+            const timestamp = new Date(trace.timestamp).toLocaleString();
+            const statusClass = this.getTraceStatusClass(trace);
+
+            return `
+                <div class="trace-item">
+                    <div class="trace-header">
+                        <div class="trace-name">
+                            <span class="status-indicator ${statusClass}"></span>
+                            ${trace.name || `${trace.agentId} execution`}
+                        </div>
+                        <div class="trace-timestamp">${timestamp}</div>
+                    </div>
+                    <div class="trace-details">
+                        <div class="trace-agent">${trace.agentId}</div>
+                        <div class="trace-trigger">${trace.trigger}</div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        tracesList.innerHTML = traceItems || '<div class="loading">No traces found</div>';
+    }
+
+    getTraceStatusClass(trace) {
+        // Try to determine status from the trace structure
+        if (trace.nodes) {
+            const nodes = Array.isArray(trace.nodes) ?
+                trace.nodes.map(([, node]) => node) :
+                trace.nodes instanceof Map ?
+                    Array.from(trace.nodes.values()) :
+                    Object.values(trace.nodes);
+
+            const hasFailures = nodes.some(node =>
+                node.status === 'failed' ||
+                node.error ||
+                (node.metadata && node.metadata.error)
+            );
+
+            if (hasFailures) return 'status-failure';
+
+            const hasCompleted = nodes.some(node =>
+                node.status === 'completed' ||
+                node.endTime ||
+                (node.metadata && node.metadata.status === 'success')
+            );
+
+            if (hasCompleted) return 'status-success';
+        }
+
+        return 'status-unknown';
+    }
+
+    setupEventListeners() {
+        // Agent selection
+        document.addEventListener('click', (event) => {
+            const agentItem = event.target.closest('.agent-item');
+            if (agentItem) {
+                const agentId = agentItem.dataset.agentId;
+                this.selectAgent(agentId);
+            }
+        });
+
+        // Auto-refresh every 30 seconds
+        setInterval(() => {
+            if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+                this.refreshStats();
+            }
+        }, 30000);
+    }
+
+    selectAgent(agentId) {
+        // Update UI selection
+        document.querySelectorAll('.agent-item').forEach(item => {
+            item.classList.remove('active');
+        });
+
+        const selectedItem = document.querySelector(`[data-agent-id="${agentId}"]`);
+        if (selectedItem) {
+            selectedItem.classList.add('active');
+            this.selectedAgent = agentId;
+        } else {
+            this.selectedAgent = null;
+        }
+
+        // Update traces view
+        this.updateTraces();
+
+        // Update page title
+        document.title = this.selectedAgent ?
+            `AgentFlow Dashboard - ${this.selectedAgent}` :
+            'AgentFlow Dashboard';
+    }
+
+    // Public methods for debugging
+    getStats() {
+        return this.stats;
+    }
+
+    getTraces() {
+        return this.traces;
+    }
+
+    reconnect() {
+        if (this.ws) {
+            this.ws.close();
+        }
+        this.reconnectAttempts = 0;
+        this.connectWebSocket();
+    }
+}
+
+// Initialize dashboard when page loads
+document.addEventListener('DOMContentLoaded', () => {
+    window.dashboard = new AgentFlowDashboard();
+});
+
+// Expose dashboard for debugging
+window.AgentFlowDashboard = AgentFlowDashboard;

package/dist/public/index.html

@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AgentFlow Dashboard</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #0f1419;
+            color: #e6e6e6;
+            line-height: 1.6;
+        }
+
+        .header {
+            background: #1a1f2e;
+            padding: 1rem 2rem;
+            border-bottom: 1px solid #2a2f3e;
+        }
+
+        .header h1 {
+            color: #4f96ff;
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .header .subtitle {
+            color: #9ca3af;
+            font-size: 0.9rem;
+            margin-top: 0.25rem;
+        }
+
+        .main {
+            display: grid;
+            grid-template-columns: 1fr 2fr;
+            height: calc(100vh - 80px);
+        }
+
+        .sidebar {
+            background: #1a1f2e;
+            border-right: 1px solid #2a2f3e;
+            padding: 1rem;
+            overflow-y: auto;
+        }
+
+        .content {
+            padding: 1rem;
+            overflow-y: auto;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+
+        .stat-card {
+            background: #1a1f2e;
+            border: 1px solid #2a2f3e;
+            border-radius: 8px;
+            padding: 1rem;
+        }
+
+        .stat-card h3 {
+            font-size: 0.8rem;
+            color: #9ca3af;
+            text-transform: uppercase;
+            margin-bottom: 0.5rem;
+        }
+
+        .stat-card .value {
+            font-size: 1.8rem;
+            font-weight: 700;
+            color: #4f96ff;
+        }
+
+        .agent-list {
+            margin-bottom: 2rem;
+        }
+
+        .agent-item {
+            background: #262b3d;
+            border: 1px solid #363b4d;
+            border-radius: 6px;
+            padding: 1rem;
+            margin-bottom: 0.5rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .agent-item:hover {
+            border-color: #4f96ff;
+            background: #2a2f3e;
+        }
+
+        .agent-item.active {
+            border-color: #4f96ff;
+            background: #2a2f3e;
+        }
+
+        .agent-name {
+            font-weight: 600;
+            color: #e6e6e6;
+            margin-bottom: 0.25rem;
+        }
+
+        .agent-stats {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.8rem;
+            color: #9ca3af;
+        }
+
+        .success-rate {
+            color: #10b981;
+        }
+
+        .success-rate.low {
+            color: #f59e0b;
+        }
+
+        .success-rate.critical {
+            color: #ef4444;
+        }
+
+        .traces-section {
+            margin-bottom: 2rem;
+        }
+
+        .section-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: #e6e6e6;
+        }
+
+        .trace-item {
+            background: #1a1f2e;
+            border: 1px solid #2a2f3e;
+            border-radius: 6px;
+            padding: 1rem;
+            margin-bottom: 0.75rem;
+        }
+
+        .trace-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0.5rem;
+        }
+
+        .trace-name {
+            font-weight: 600;
+            color: #e6e6e6;
+        }
+
+        .trace-timestamp {
+            font-size: 0.8rem;
+            color: #9ca3af;
+        }
+
+        .trace-details {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.8rem;
+        }
+
+        .trace-agent {
+            color: #4f96ff;
+        }
+
+        .trace-trigger {
+            color: #9ca3af;
+        }
+
+        .status-indicator {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            display: inline-block;
+            margin-right: 0.5rem;
+        }
+
+        .status-success {
+            background: #10b981;
+        }
+
+        .status-failure {
+            background: #ef4444;
+        }
+
+        .status-unknown {
+            background: #6b7280;
+        }
+
+        .connection-status {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            font-size: 0.8rem;
+            font-weight: 600;
+        }
+
+        .connected {
+            background: #065f46;
+            color: #10b981;
+        }
+
+        .disconnected {
+            background: #7f1d1d;
+            color: #ef4444;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 2rem;
+            color: #9ca3af;
+        }
+
+        @media (max-width: 768px) {
+            .main {
+                grid-template-columns: 1fr;
+            }
+
+            .sidebar {
+                display: none;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>AgentFlow Dashboard</h1>
+        <div class="subtitle">Real-time monitoring for AI agent executions</div>
+    </div>
+
+    <div class="connection-status disconnected" id="connectionStatus">
+        Connecting...
+    </div>
+
+    <div class="main">
+        <div class="sidebar">
+            <h3 class="section-title">Agents</h3>
+            <div class="agent-list" id="agentList">
+                <div class="loading">Loading agents...</div>
+            </div>
+        </div>
+
+        <div class="content">
+            <div class="stats-grid" id="statsGrid">
+                <div class="loading">Loading statistics...</div>
+            </div>
+
+            <div class="traces-section">
+                <h3 class="section-title">Recent Executions</h3>
+                <div class="traces-list" id="tracesList">
+                    <div class="loading">Loading traces...</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="dashboard.js"></script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "agentflow-dashboard",
+  "version": "0.1.0",
+  "description": "Real-time monitoring dashboard for AgentFlow - Visualize agent execution graphs and performance",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "bin": {
+    "agentflow-dashboard": "./bin/dashboard.js"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "public"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --clean && npm run build:public",
+    "build:public": "cp -r public dist/",
+    "dev": "tsx src/server.ts",
+    "start": "node dist/server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "ws": "^8.16.0",
+    "chokidar": "^3.5.3"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/ws": "^8.5.10",
+    "tsup": "^8.4.0",
+    "tsx": "^4.19.0"
+  },
+  "keywords": [
+    "agentflow",
+    "dashboard",
+    "monitoring",
+    "ai",
+    "agent",
+    "tracing",
+    "observability",
+    "real-time"
+  ],
+  "license": "MIT"
+}