claude-flow-novice 2.0.4 → 2.0.5

package/dist/src/web/dashboard/hooks/useWebSocket.js

@@ -0,0 +1,383 @@
+/**
+ * WebSocket Hook for Real-time Updates
+ * Provides WebSocket connection management for real-time dashboard updates
+ */ import { useState, useEffect, useRef, useCallback } from "react";
+import { io } from "socket.io-client";
+export const useWebSocket = (options = {})=>{
+    const { url = `ws://${window.location.host}`, autoConnect = true, reconnectAttempts = 5, reconnectDelay = 1000, heartbeatInterval = 30000, onConnect, onDisconnect, onError, onMessage } = options;
+    const [socket, setSocket] = useState(null);
+    const [status, setStatus] = useState({
+        connected: false,
+        reconnectAttempts: 0,
+        lastConnected: undefined,
+        lastMessage: undefined,
+        error: undefined
+    });
+    const [error, setError] = useState(null);
+    const [lastMessage, setLastMessage] = useState(null);
+    const socketRef = useRef(null);
+    const reconnectTimeoutRef = useRef();
+    const heartbeatIntervalRef = useRef();
+    const subscriptionsRef = useRef(new Map());
+    const connect = useCallback(()=>{
+        if (socketRef.current?.connected) {
+            return;
+        }
+        try {
+            const newSocket = io(url, {
+                transports: [
+                    'websocket',
+                    'polling'
+                ],
+                upgrade: true,
+                rememberUpgrade: true,
+                timeout: 10000,
+                forceNew: true
+            });
+            socketRef.current = newSocket;
+            setSocket(newSocket);
+            // Connection established
+            newSocket.on('connect', ()=>{
+                console.log('WebSocket connected');
+                setStatus((prev)=>({
+                        ...prev,
+                        connected: true,
+                        reconnectAttempts: 0,
+                        lastConnected: new Date(),
+                        error: undefined
+                    }));
+                setError(null);
+                onConnect?.();
+                // Start heartbeat
+                if (heartbeatIntervalRef.current) {
+                    clearInterval(heartbeatIntervalRef.current);
+                }
+                heartbeatIntervalRef.current = setInterval(()=>{
+                    if (newSocket.connected) {
+                        newSocket.emit('ping');
+                    }
+                }, heartbeatInterval);
+                // Request initial data
+                newSocket.emit('request-mcp-status');
+                newSocket.emit('request-swarm-metrics');
+            });
+            // Connection lost
+            newSocket.on('disconnect', (reason)=>{
+                console.log('WebSocket disconnected:', reason);
+                setStatus((prev)=>({
+                        ...prev,
+                        connected: false
+                    }));
+                onDisconnect?.();
+                // Clear heartbeat
+                if (heartbeatIntervalRef.current) {
+                    clearInterval(heartbeatIntervalRef.current);
+                }
+                // Auto-reconnect
+                if (reason !== 'io client disconnect' && status.reconnectAttempts < reconnectAttempts) {
+                    const delay = reconnectDelay * Math.pow(2, status.reconnectAttempts);
+                    console.log(`Reconnecting in ${delay}ms...`);
+                    reconnectTimeoutRef.current = setTimeout(()=>{
+                        setStatus((prev)=>({
+                                ...prev,
+                                reconnectAttempts: prev.reconnectAttempts + 1
+                            }));
+                        connect();
+                    }, delay);
+                }
+            });
+            // Connection error
+            newSocket.on('connect_error', (error)=>{
+                console.error('WebSocket connection error:', error);
+                const errorMessage = error.message || 'Connection failed';
+                setError(errorMessage);
+                setStatus((prev)=>({
+                        ...prev,
+                        connected: false,
+                        error: errorMessage
+                    }));
+                onError?.(error);
+            });
+            // Handle messages
+            newSocket.on('message', (data)=>{
+                try {
+                    const message = typeof data === 'string' ? JSON.parse(data) : data;
+                    setLastMessage(message);
+                    setStatus((prev)=>({
+                            ...prev,
+                            lastMessage: new Date()
+                        }));
+                    // Notify subscribers
+                    const subscribers = subscriptionsRef.current.get(message.type);
+                    if (subscribers) {
+                        subscribers.forEach((callback)=>callback(message.payload));
+                    }
+                    onMessage?.(message);
+                } catch (error) {
+                    console.error('Error parsing WebSocket message:', error);
+                }
+            });
+            // Handle specific dashboard events
+            newSocket.on('mcp-status', (data)=>{
+                const message = {
+                    type: 'agent_update',
+                    timestamp: new Date(),
+                    payload: data
+                };
+                setLastMessage(message);
+                onMessage?.(message);
+            });
+            newSocket.on('swarm-metrics', (data)=>{
+                const message = {
+                    type: 'metrics_update',
+                    timestamp: new Date(),
+                    payload: data
+                };
+                setLastMessage(message);
+                onMessage?.(message);
+            });
+            newSocket.on('hierarchy-change', (data)=>{
+                const message = {
+                    type: 'hierarchy_change',
+                    timestamp: new Date(),
+                    payload: data
+                };
+                setLastMessage(message);
+                onMessage?.(message);
+            });
+            newSocket.on('event-stream', (data)=>{
+                const message = {
+                    type: 'event_stream',
+                    timestamp: new Date(),
+                    payload: data
+                };
+                setLastMessage(message);
+                onMessage?.(message);
+            });
+            newSocket.on('error', (data)=>{
+                const message = {
+                    type: 'error',
+                    timestamp: new Date(),
+                    payload: data
+                };
+                setLastMessage(message);
+                setError(data.message || 'WebSocket error');
+                onMessage?.(message);
+            });
+            // Heartbeat response
+            newSocket.on('pong', ()=>{
+            // Heartbeat received
+            });
+        } catch (error) {
+            console.error('Failed to create WebSocket connection:', error);
+            setError(error instanceof Error ? error.message : 'Unknown error');
+            onError?.(error instanceof Error ? error : new Error('Unknown error'));
+        }
+    }, [
+        url,
+        reconnectAttempts,
+        reconnectDelay,
+        heartbeatInterval,
+        status.reconnectAttempts,
+        onConnect,
+        onDisconnect,
+        onError,
+        onMessage
+    ]);
+    const disconnect = useCallback(()=>{
+        if (reconnectTimeoutRef.current) {
+            clearTimeout(reconnectTimeoutRef.current);
+        }
+        if (heartbeatIntervalRef.current) {
+            clearInterval(heartbeatIntervalRef.current);
+        }
+        if (socketRef.current) {
+            socketRef.current.disconnect();
+            socketRef.current = null;
+        }
+        setSocket(null);
+        setStatus((prev)=>({
+                ...prev,
+                connected: false
+            }));
+    }, []);
+    const reconnect = useCallback(()=>{
+        disconnect();
+        setTimeout(connect, 100);
+    }, [
+        disconnect,
+        connect
+    ]);
+    const sendMessage = useCallback((type, payload)=>{
+        if (socketRef.current?.connected) {
+            socketRef.current.emit('message', {
+                type,
+                payload
+            });
+        } else {
+            console.warn('WebSocket not connected, cannot send message:', type);
+        }
+    }, []);
+    const subscribe = useCallback((event, callback)=>{
+        if (!subscriptionsRef.current.has(event)) {
+            subscriptionsRef.current.set(event, new Set());
+        }
+        subscriptionsRef.current.get(event).add(callback);
+        // Return unsubscribe function
+        return ()=>{
+            const subscribers = subscriptionsRef.current.get(event);
+            if (subscribers) {
+                subscribers.delete(callback);
+                if (subscribers.size === 0) {
+                    subscriptionsRef.current.delete(event);
+                }
+            }
+        };
+    }, []);
+    // Auto-connect on mount
+    useEffect(()=>{
+        if (autoConnect) {
+            connect();
+        }
+        return ()=>{
+            disconnect();
+        };
+    }, [
+        autoConnect,
+        connect,
+        disconnect
+    ]);
+    return {
+        socket,
+        status,
+        isConnected: status.connected,
+        error,
+        sendMessage,
+        subscribe,
+        disconnect,
+        reconnect,
+        lastMessage
+    };
+};
+// Higher-order hook for dashboard state management
+export const useDashboardWebSocket = (initialData, options)=>{
+    const [dashboardState, setDashboardState] = useState({
+        agents: initialData.agents || [],
+        statuses: initialData.statuses || {},
+        events: initialData.events || [],
+        metrics: initialData.metrics || null,
+        alerts: initialData.alerts || [],
+        resourceUsage: initialData.resourceUsage || {
+            memoryUsage: 0,
+            cpuUsage: 0,
+            networkLatency: 0,
+            diskUsage: 0
+        },
+        filters: initialData.filters || {},
+        loading: initialData.loading || false,
+        error: initialData.error || null,
+        lastUpdated: initialData.lastUpdated || null,
+        connected: initialData.connected || false
+    });
+    const webSocket = useWebSocket({
+        ...options,
+        onMessage: (message)=>{
+            switch(message.type){
+                case 'agent_update':
+                    setDashboardState((prev)=>({
+                            ...prev,
+                            statuses: {
+                                ...prev.statuses,
+                                ...message.payload.statuses
+                            },
+                            lastUpdated: new Date()
+                        }));
+                    break;
+                case 'hierarchy_change':
+                    setDashboardState((prev)=>({
+                            ...prev,
+                            agents: message.payload.agents || prev.agents,
+                            lastUpdated: new Date()
+                        }));
+                    break;
+                case 'metrics_update':
+                    setDashboardState((prev)=>({
+                            ...prev,
+                            metrics: message.payload.metrics || prev.metrics,
+                            resourceUsage: message.payload.resourceUsage || prev.resourceUsage,
+                            alerts: message.payload.alerts || prev.alerts,
+                            lastUpdated: new Date()
+                        }));
+                    break;
+                case 'event_stream':
+                    setDashboardState((prev)=>({
+                            ...prev,
+                            events: [
+                                message.payload.event,
+                                ...prev.events.slice(0, 999)
+                            ],
+                            lastUpdated: new Date()
+                        }));
+                    break;
+                case 'error':
+                    setDashboardState((prev)=>({
+                            ...prev,
+                            error: message.payload.message,
+                            lastUpdated: new Date()
+                        }));
+                    break;
+            }
+            options?.onMessage?.(message);
+        },
+        onConnect: ()=>{
+            setDashboardState((prev)=>({
+                    ...prev,
+                    connected: true,
+                    error: null,
+                    lastUpdated: new Date()
+                }));
+            options?.onConnect?.();
+        },
+        onDisconnect: ()=>{
+            setDashboardState((prev)=>({
+                    ...prev,
+                    connected: false,
+                    lastUpdated: new Date()
+                }));
+            options?.onDisconnect?.();
+        },
+        onError: (error)=>{
+            setDashboardState((prev)=>({
+                    ...prev,
+                    connected: false,
+                    error: error.message,
+                    lastUpdated: new Date()
+                }));
+            options?.onError?.(error);
+        }
+    });
+    const refreshData = useCallback(()=>{
+        if (webSocket.isConnected) {
+            webSocket.sendMessage('refresh', {});
+        }
+    }, [
+        webSocket
+    ]);
+    const updateFilters = useCallback((filters)=>{
+        setDashboardState((prev)=>({
+                ...prev,
+                filters: {
+                    ...prev.filters,
+                    ...filters
+                }
+            }));
+    }, []);
+    return {
+        ...webSocket,
+        dashboardState,
+        setDashboardState,
+        refreshData,
+        updateFilters
+    };
+};
+export default useWebSocket;

package/dist/src/web/dashboard/index.js

@@ -0,0 +1,85 @@
+/**
+ * Dashboard Module Exports
+ * Central export point for all dashboard components and utilities
+ */ // Main Components
+export { default as Dashboard } from "./Dashboard";
+export { default as AgentHierarchyTree } from "./components/AgentHierarchyTree";
+export { default as AgentStatusMonitor } from "./components/AgentStatusMonitor";
+export { default as PerformanceMetricsChart } from "./components/PerformanceMetricsChart";
+export { default as EventTimeline } from "./components/EventTimeline";
+export { default as ResourceGauges } from "./components/ResourceGauges";
+// Hooks
+export { useWebSocket, useDashboardWebSocket } from "./hooks/useWebSocket";
+// Utilities
+export const createDashboardConfig = (overrides = {})=>({
+        refreshInterval: 5000,
+        maxEvents: 1000,
+        enableAnimations: true,
+        theme: 'light',
+        autoRefresh: true,
+        ...overrides
+    });
+export const formatBytes = (bytes)=>{
+    const sizes = [
+        'B',
+        'KB',
+        'MB',
+        'GB',
+        'TB'
+    ];
+    if (bytes === 0) return '0 B';
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
+};
+export const formatDuration = (ms)=>{
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    if (hours > 0) return `${hours}h ${minutes % 60}m`;
+    if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
+    return `${seconds}s`;
+};
+export const getAgentStateColor = (state)=>{
+    switch(state){
+        case 'active':
+            return 'text-green-600 bg-green-50 border-green-200';
+        case 'paused':
+            return 'text-yellow-600 bg-yellow-50 border-yellow-200';
+        case 'error':
+            return 'text-red-600 bg-red-50 border-red-200';
+        case 'terminated':
+            return 'text-gray-600 bg-gray-50 border-gray-200';
+        default:
+            return 'text-blue-600 bg-blue-50 border-blue-200';
+    }
+};
+export const getAlertSeverityColor = (severity)=>{
+    switch(severity){
+        case 'critical':
+            return 'text-red-600 bg-red-50 border-red-200';
+        case 'high':
+            return 'text-orange-600 bg-orange-50 border-orange-200';
+        case 'medium':
+            return 'text-yellow-600 bg-yellow-50 border-yellow-200';
+        case 'low':
+            return 'text-blue-600 bg-blue-50 border-blue-200';
+        default:
+            return 'text-gray-600 bg-gray-50 border-gray-200';
+    }
+};
+// Default export
+export default {
+    Dashboard,
+    AgentHierarchyTree,
+    AgentStatusMonitor,
+    PerformanceMetricsChart,
+    EventTimeline,
+    ResourceGauges,
+    useWebSocket,
+    useDashboardWebSocket,
+    createDashboardConfig,
+    formatBytes,
+    formatDuration,
+    getAgentStateColor,
+    getAlertSeverityColor
+};