claude-mpm 4.25.10__py3-none-any.whl → 5.1.8__py3-none-any.whl

claude_mpm/dashboard/react/hooks/useEvents.ts

@@ -1,191 +0,0 @@
-import { useMemo } from 'react';
-import { useDashboard, DashboardEvent } from '../contexts/DashboardContext';
-
-/**
- * Get event type category for styling and filtering
- */
-function getEventCategory(eventType?: string): string {
-  if (!eventType) return 'info';
-
-  const type = eventType.toLowerCase();
-
-  if (type.includes('agent') || type.includes('subagent')) return 'agent';
-  if (type.includes('tool') || type === 'bash' || type === 'edit' || type === 'read' || type === 'write') return 'tool';
-  if (type.includes('file') || type.includes('edit') || type.includes('write') || type.includes('read')) return 'file';
-  if (type.includes('session') || type === 'start' || type === 'stop') return 'session';
-  if (type.includes('error') || type.includes('fail')) return 'error';
-  if (type.includes('memory') || type.includes('todo')) return 'info';
-  if (type.includes('claude') || type.includes('request') || type.includes('response')) return 'info';
-
-  return 'info';
-}
-
-/**
- * Format timestamp consistently
- */
-function formatTimestamp(timestamp: number): string {
-  if (!timestamp) return 'Unknown';
-
-  const date = new Date(timestamp);
-  return date.toLocaleTimeString('en-US', {
-    hour12: false,
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    fractionalSecondDigits: 3
-  });
-}
-
-/**
- * Enhanced event interface with computed properties
- */
-export interface EnhancedEvent extends DashboardEvent {
-  category: string;
-  formattedTime: string;
-  displayType: string;
-  preview: string;
-  size: number;
-}
-
-/**
- * Hook for managing and filtering events with computed properties
- */
-export function useEvents() {
-  const { state, setFilter, setSetting } = useDashboard();
-
-  // Enhanced events with computed properties
-  const enhancedEvents = useMemo((): EnhancedEvent[] => {
-    return state.events.map(event => {
-      const category = getEventCategory(event.type);
-      const formattedTime = formatTimestamp(event.timestamp);
-
-      // Build display type
-      let displayType = event.type || 'unknown';
-      if (event.subtype) {
-        displayType += `:${event.subtype}`;
-      }
-
-      // Generate preview
-      const displayData = event.raw || event.data;
-      const preview = JSON.stringify(displayData || {})
-        .substring(0, 100)
-        .replace(/[\r\n]+/g, ' ');
-
-      // Calculate size
-      const size = JSON.stringify(event).length;
-
-      return {
-        ...event,
-        category,
-        formattedTime,
-        displayType,
-        preview: preview + (JSON.stringify(displayData || {}).length > 100 ? '...' : ''),
-        size
-      };
-    });
-  }, [state.events]);
-
-  // Filtered events based on current filters
-  const filteredEvents = useMemo((): EnhancedEvent[] => {
-    let filtered = [...enhancedEvents];
-
-    // Apply search filter
-    if (state.filters.searchTerm) {
-      const search = state.filters.searchTerm.toLowerCase();
-      filtered = filtered.filter(event =>
-        JSON.stringify(event).toLowerCase().includes(search)
-      );
-    }
-
-    // Apply type filter
-    if (state.filters.typeFilter) {
-      filtered = filtered.filter(event =>
-        event.category === state.filters.typeFilter
-      );
-    }
-
-    // Sort by timestamp (newest first)
-    filtered.sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
-
-    return filtered;
-  }, [enhancedEvents, state.filters.searchTerm, state.filters.typeFilter]);
-
-  // Statistics for filtered events
-  const stats = useMemo(() => {
-    const types = new Set(filteredEvents.map(event => event.type));
-    const totalSize = filteredEvents.reduce((sum, event) => sum + event.size, 0);
-
-    // Calculate events in last minute
-    const now = Date.now();
-    const oneMinuteAgo = now - 60000;
-    const recentEvents = filteredEvents.filter(e => e.timestamp > oneMinuteAgo);
-
-    return {
-      totalFiltered: filteredEvents.length,
-      uniqueTypes: types.size,
-      eventsPerMinute: recentEvents.length,
-      averageSize: filteredEvents.length > 0 ? Math.round(totalSize / filteredEvents.length) : 0,
-      totalSize
-    };
-  }, [filteredEvents]);
-
-  // Event categories for filter dropdown
-  const availableCategories = useMemo(() => {
-    const categories = new Set(enhancedEvents.map(event => event.category));
-    return Array.from(categories).sort();
-  }, [enhancedEvents]);
-
-  // Actions
-  const setSearchTerm = (term: string) => {
-    setFilter('searchTerm', term);
-  };
-
-  const setTypeFilter = (type: string) => {
-    setFilter('typeFilter', type);
-  };
-
-  const toggleAutoScroll = () => {
-    setSetting('autoScroll', !state.settings.autoScroll);
-  };
-
-  const togglePauseStream = () => {
-    setSetting('pauseStream', !state.settings.pauseStream);
-  };
-
-  const exportEvents = () => {
-    const eventsToExport = filteredEvents.length > 0 ? filteredEvents : enhancedEvents;
-    const json = JSON.stringify(eventsToExport, null, 2);
-    const blob = new Blob([json], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `events-${Date.now()}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-
-  return {
-    // Data
-    events: filteredEvents,
-    allEvents: enhancedEvents,
-    stats,
-    availableCategories,
-
-    // State
-    searchTerm: state.filters.searchTerm,
-    typeFilter: state.filters.typeFilter,
-    autoScroll: state.settings.autoScroll,
-    pauseStream: state.settings.pauseStream,
-
-    // Actions
-    setSearchTerm,
-    setTypeFilter,
-    toggleAutoScroll,
-    togglePauseStream,
-    exportEvents,
-
-    // Utilities
-    getEventCategory,
-    formatTimestamp
-  };
-}

claude_mpm/dashboard/react/hooks/useSocket.ts

@@ -1,225 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useDashboard } from '../contexts/DashboardContext';
-import { DashboardEvent } from '../contexts/DashboardContext';
-
-// Extend window interface to include our globals
-declare global {
-  interface Window {
-    io?: any;
-    socket?: any;
-    SocketManager?: any;
-    socketClient?: any;
-  }
-}
-
-/**
- * Hook to manage Socket.IO connection and integrate with React state
- * Preserves compatibility with existing SocketManager infrastructure
- */
-export function useSocket() {
-  const { state, addEvent, setConnectionState, updateStats } = useDashboard();
-  const socketRef = useRef<any>(null);
-  const eventRateHistoryRef = useRef<Array<{ time: number; count: number }>>([]);
-  const lastEventCountRef = useRef(0);
-
-  useEffect(() => {
-    // Initialize Socket.IO connection - throws errors instead of graceful fallback
-    const initializeSocket = () => {
-      if (!window.io) {
-        const error = new Error('WebSocket connection required but failed: Socket.IO dependency not loaded');
-        console.error(error.message);
-        throw error;
-      }
-
-      // Create direct socket connection similar to existing events.html
-      const socket = window.io('http://localhost:8765', {
-        transports: ['polling', 'websocket'],
-        reconnection: true,
-        reconnectionDelay: 1000,
-        reconnectionDelayMax: 5000,
-        reconnectionAttempts: Infinity
-      });
-
-      socketRef.current = socket;
-
-      // Connection handlers
-      socket.on('connect', () => {
-        console.log('React Socket: Connected to Socket.IO server:', socket.id);
-        setConnectionState({
-          isConnected: true,
-          isConnecting: false,
-          connectionCount: 1
-        });
-
-        // Request event history
-        socket.emit('get_history', { limit: 100 });
-      });
-
-      socket.on('disconnect', () => {
-        console.log('React Socket: Disconnected from Socket.IO server');
-        setConnectionState({
-          isConnected: false,
-          isConnecting: false,
-          connectionCount: 0
-        });
-      });
-
-      socket.on('connect_error', (error: any) => {
-        const connectionError = new Error(`WebSocket connection required but failed: ${error.message || 'Unknown connection error'}`);
-        console.error('React Socket: Connection error:', connectionError.message);
-        setConnectionState({
-          isConnected: false,
-          isConnecting: false,
-          connectionCount: 0
-        });
-        // Throw error after updating state
-        throw connectionError;
-      });
-
-      // Primary event handler - matches existing events.html pattern
-      socket.on('claude_event', (data: any) => {
-        console.log('React Socket: Received claude_event:', data);
-
-        const event: DashboardEvent = {
-          type: data.type || data.event_type || 'unknown',
-          subtype: data.subtype || data.event_subtype || '',
-          timestamp: data.timestamp || Date.now(),
-          source: data.source || 'server',
-          data: data.data || data,
-          raw: data
-        };
-
-        if (!state.settings.pauseStream) {
-          addEvent(event);
-        }
-      });
-
-      // History response handler
-      socket.on('history', (data: any) => {
-        console.log('React Socket: Received history:', data);
-        if (data && data.events && Array.isArray(data.events)) {
-          data.events.forEach((evt: any) => {
-            const event: DashboardEvent = {
-              type: evt.type || evt.event_type || 'historical',
-              subtype: evt.subtype || evt.event_subtype || '',
-              timestamp: evt.timestamp || Date.now(),
-              data: evt.data || evt,
-              source: 'history'
-            };
-            addEvent(event);
-          });
-        }
-      });
-
-      // Specific event handlers - matches existing pattern
-      const specificEvents = [
-        'heartbeat', 'system.status',
-        'session.started', 'session.ended',
-        'claude.request', 'claude.response',
-        'agent.loaded', 'agent.executed',
-        'todo.updated', 'memory.operation',
-        'log.entry', 'test_event'
-      ];
-
-      specificEvents.forEach(eventType => {
-        socket.on(eventType, (data: any) => {
-          console.log(`React Socket: Received specific event ${eventType}:`, data);
-          const event: DashboardEvent = {
-            type: eventType,
-            timestamp: data.timestamp || Date.now(),
-            data: data,
-            source: 'specific'
-          };
-          if (!state.settings.pauseStream) {
-            addEvent(event);
-          }
-        });
-      });
-    };
-
-    // Check if Socket.IO is available - strict mode with error throwing
-    if (typeof window !== 'undefined') {
-      if (window.io) {
-        try {
-          initializeSocket();
-        } catch (error) {
-          console.error('Socket initialization failed:', error);
-          throw error;
-        }
-      } else {
-        // Wait for Socket.IO to load with timeout
-        let attempts = 0;
-        const maxAttempts = 50; // 5 seconds with 100ms intervals
-
-        const checkInterval = setInterval(() => {
-          attempts++;
-          if (window.io) {
-            clearInterval(checkInterval);
-            try {
-              initializeSocket();
-            } catch (error) {
-              console.error('Delayed socket initialization failed:', error);
-              throw error;
-            }
-          } else if (attempts >= maxAttempts) {
-            clearInterval(checkInterval);
-            const timeoutError = new Error('WebSocket connection required but failed: Timeout waiting for Socket.IO to load (5 seconds)');
-            console.error(timeoutError.message);
-            throw timeoutError;
-          }
-        }, 100);
-      }
-    } else {
-      const windowError = new Error('WebSocket connection required but failed: Window object not available');
-      console.error(windowError.message);
-      throw windowError;
-    }
-
-    return () => {
-      if (socketRef.current) {
-        socketRef.current.disconnect();
-        socketRef.current = null;
-      }
-    };
-  }, []); // Empty dependency array - only run once on mount
-
-  // Calculate event rate
-  useEffect(() => {
-    const calculateEventRate = () => {
-      const now = Date.now();
-      const currentCount = state.stats.totalEvents;
-      const newEvents = currentCount - lastEventCountRef.current;
-
-      eventRateHistoryRef.current.push({ time: now, count: newEvents });
-      lastEventCountRef.current = currentCount;
-
-      // Keep only last 10 seconds
-      eventRateHistoryRef.current = eventRateHistoryRef.current.filter(h => h.time > now - 10000);
-
-      // Calculate average rate
-      const totalNewEvents = eventRateHistoryRef.current.reduce((sum, h) => sum + h.count, 0);
-      const timeSpan = eventRateHistoryRef.current.length > 0 ?
-        (now - eventRateHistoryRef.current[0].time) / 1000 : 1;
-
-      const rate = Math.round(totalNewEvents / Math.max(timeSpan, 1));
-
-      updateStats({ eventsPerSecond: rate });
-    };
-
-    const interval = setInterval(calculateEventRate, 1000);
-    return () => clearInterval(interval);
-  }, [state.stats.totalEvents, updateStats]);
-
-  // Calculate unique types
-  useEffect(() => {
-    const types = new Set(state.events.map(event => event.type));
-    updateStats({ uniqueTypes: types.size });
-  }, [state.events, updateStats]);
-
-  return {
-    socket: socketRef.current,
-    isConnected: state.connection.isConnected,
-    isConnecting: state.connection.isConnecting,
-    connectionCount: state.connection.connectionCount
-  };
-}

claude_mpm/dashboard/static/archive/activity_dashboard_fixed.html

@@ -1,248 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Activity Dashboard - Fixed</title>
-
-    <!-- Load Socket.IO first -->
-    <script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
-
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-            color: #e0e0e0;
-            padding: 20px;
-        }
-
-        .header {
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            padding: 20px;
-            margin-bottom: 20px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .header h1 {
-            font-size: 24px;
-            margin-bottom: 10px;
-            background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        .status-bar {
-            display: flex;
-            gap: 20px;
-            align-items: center;
-        }
-
-        .status-indicator {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 16px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 20px;
-            font-size: 14px;
-        }
-
-        .status-dot {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            animation: pulse 2s infinite;
-        }
-
-        .status-dot.connected {
-            background: #4ade80;
-            box-shadow: 0 0 10px #4ade80;
-        }
-
-        .status-dot.disconnected {
-            background: #f87171;
-            box-shadow: 0 0 10px #f87171;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-
-        .content {
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            padding: 20px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .log {
-            background: rgba(0, 0, 0, 0.3);
-            padding: 15px;
-            border-radius: 8px;
-            max-height: 400px;
-            overflow-y: auto;
-            font-family: monospace;
-            font-size: 13px;
-        }
-
-        .log-entry {
-            margin: 2px 0;
-            padding: 2px;
-        }
-
-        .error { color: #f87171; }
-        .success { color: #4ade80; }
-        .info { color: #60a5fa; }
-    </style>
-</head>
-<body>
-    <div class="header">
-        <h1>🎯 Activity Dashboard - Fixed Version</h1>
-        <div class="status-bar">
-            <div class="status-indicator">
-                <span class="status-dot disconnected" id="connection-status"></span>
-                <span id="connection-text">Disconnected</span>
-            </div>
-            <div class="status-indicator">
-                <span>📊</span>
-                <span id="event-count">0 events</span>
-            </div>
-            <div class="status-indicator">
-                <span>🎯</span>
-                <span id="session-count">0 sessions</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="content">
-        <h2>Connection Log</h2>
-        <div class="log" id="log"></div>
-    </div>
-
-    <script type="module">
-        // Import SocketClient
-        import { SocketClient } from 'http://localhost:8765/static/built/socket-client.js';
-        import { ActivityTree } from 'http://localhost:8765/static/built/components/activity-tree.js';
-        import { SessionManager } from 'http://localhost:8765/static/built/components/session-manager.js';
-
-        const logEl = document.getElementById('log');
-
-        function log(message, type = 'info') {
-            const entry = document.createElement('div');
-            entry.className = `log-entry ${type}`;
-            entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
-            logEl.appendChild(entry);
-            logEl.scrollTop = logEl.scrollHeight;
-            console.log(`[${type}] ${message}`);
-        }
-
-        function updateConnectionStatus(connected) {
-            const statusDot = document.getElementById('connection-status');
-            const statusText = document.getElementById('connection-text');
-
-            if (connected) {
-                statusDot.className = 'status-dot connected';
-                statusText.textContent = 'Connected';
-            } else {
-                statusDot.className = 'status-dot disconnected';
-                statusText.textContent = 'Disconnected';
-            }
-        }
-
-        // Wait for Socket.IO to load
-        function waitForSocketIO() {
-            return new Promise((resolve) => {
-                if (typeof io !== 'undefined') {
-                    log(`Socket.IO loaded: version ${io.version || 'unknown'}`, 'success');
-                    resolve();
-                } else {
-                    log('Waiting for Socket.IO...', 'info');
-                    setTimeout(() => waitForSocketIO().then(resolve), 100);
-                }
-            });
-        }
-
-        // Initialize
-        async function initialize() {
-            log('Starting initialization...', 'info');
-
-            // Wait for Socket.IO
-            await waitForSocketIO();
-
-            try {
-                // Create instances
-                log('Creating SocketClient instance...', 'info');
-                const socketClient = new SocketClient();
-                window.socketClient = socketClient;
-
-                log('Creating SessionManager instance...', 'info');
-                const sessionManager = new SessionManager();
-                window.sessionManager = sessionManager;
-
-                log('Creating ActivityTree instance...', 'info');
-                const activityTree = new ActivityTree();
-                window.activityTree = activityTree;
-
-                // Set up event handlers
-                log('Setting up event handlers...', 'info');
-
-                socketClient.onConnection('connect', () => {
-                    log('✅ CONNECTED to Socket.IO server!', 'success');
-                    updateConnectionStatus(true);
-                });
-
-                socketClient.onConnection('disconnect', (reason) => {
-                    log(`❌ DISCONNECTED: ${reason}`, 'error');
-                    updateConnectionStatus(false);
-                });
-
-                socketClient.onConnection('error', (error) => {
-                    log(`Socket error: ${error}`, 'error');
-                });
-
-                socketClient.onEventUpdate((events, sessions) => {
-                    const eventCount = events.length;
-                    const sessionCount = sessions.size;
-                    log(`Event update: ${eventCount} events, ${sessionCount} sessions`, 'info');
-                    document.getElementById('event-count').textContent = `${eventCount} events`;
-                    document.getElementById('session-count').textContent = `${sessionCount} sessions`;
-                });
-
-                // Connect
-                log('Calling socketClient.connect()...', 'info');
-                socketClient.connect();
-
-                // Check status after a moment
-                setTimeout(() => {
-                    if (socketClient.socket) {
-                        const status = {
-                            connected: socketClient.socket.connected,
-                            connecting: socketClient.socket.connecting,
-                            id: socketClient.socket.id || 'none'
-                        };
-                        log(`Socket status: connected=${status.connected}, id=${status.id}`,
-                            status.connected ? 'success' : 'error');
-
-                        if (!status.connected && !status.connecting) {
-                            log('Connection failed. Check browser console for errors.', 'error');
-                        }
-                    } else {
-                        log('Socket object was not created!', 'error');
-                    }
-                }, 2000);
-
-            } catch (error) {
-                log(`Initialization error: ${error.message}`, 'error');
-                console.error(error);
-            }
-        }
-
-        // Start initialization
-        initialize();
-    </script>
-</body>
-</html>