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

claude_mpm/dashboard/react/hooks/useSocket.ts

@@ -0,0 +1,225 @@
+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/built/REFACTORING_SUMMARY.md

@@ -0,0 +1,170 @@
+# Dashboard JavaScript Refactoring Summary
+
+## Date: 2025-09-05
+
+## Overview
+Performed Phase 1 safe, incremental refactoring of the dashboard JavaScript code, focusing on the highest-impact, lowest-risk improvements.
+
+## Changes Made
+
+### 1. Created Shared Services Directory Structure
+Created `/src/claude_mpm/dashboard/static/js/shared/` with reusable services:
+
+#### **tooltip-service.js** (293 lines)
+- Unified tooltip implementation for all components
+- Single consistent API for all tooltips  
+- Support for different tooltip types (hover, click, persistent)
+- Automatic viewport adjustment
+- Content formatting with HTML escaping
+
+#### **dom-helpers.js** (338 lines)
+- Common DOM manipulation utilities
+- createElement helpers with attribute and event handling
+- Class manipulation utilities
+- Safe querySelector wrappers
+- Viewport and scroll utilities
+- Debounce and throttle functions
+
+#### **event-bus.js** (277 lines)
+- Central event management with pub/sub pattern
+- Decouples components from direct communication
+- Priority-based event handlers
+- Event history and debugging capabilities
+- Scoped event buses for component isolation
+
+#### **logger.js** (354 lines)
+- Centralized logging with levels
+- Component-specific loggers
+- Performance timing helpers
+- Log history and export capabilities
+- Console group and table support
+
+### 2. Extracted Code Tree Modules
+Created `/src/claude_mpm/dashboard/static/js/components/code-tree/` with specialized modules:
+
+#### **tree-utils.js** (424 lines)
+- File type detection and icons
+- Complexity level calculations
+- File size formatting
+- Node sorting and filtering
+- Tree statistics calculation
+- Path formatting utilities
+
+#### **tree-constants.js** (178 lines)
+- Layout dimensions and defaults
+- Animation timings
+- Color schemes for complexity
+- File extension to language mappings
+- API endpoints
+- WebSocket events
+- CSS class names
+- All constants are frozen to prevent modification
+
+#### **tree-search.js** (366 lines)
+- Search term management with debouncing
+- Language and type filtering
+- Complexity range filtering
+- Path pattern matching with wildcards
+- Search suggestions
+- Search term highlighting
+- Filter state management
+
+#### **tree-breadcrumb.js** (318 lines)
+- Path navigation display
+- Activity status updates
+- Clickable path segments
+- Overflow handling for long paths
+- Loading states
+- Activity history tracking
+
+### 3. Updated code-tree.js Integration
+- Added service initialization in constructor
+- Uses extracted modules with fallback to original implementations
+- Maintains backward compatibility
+- Added documentation comments for module dependencies
+
+### 4. Updated HTML Loading Sequence
+Modified `/src/claude_mpm/dashboard/templates/index.html`:
+- Loads shared services first (sequentially)
+- Then loads tree modules
+- Finally loads main components in parallel
+- Ensures proper dependency resolution
+
+## Results
+
+### Code Organization Improvements
+- **Before**: Single 5,845-line file with mixed concerns
+- **After**: Modular architecture with 8 specialized modules totaling ~2,500 lines
+- Clear separation of concerns
+- Reusable services available to all components
+
+### Maintainability Benefits
+1. **Single Responsibility**: Each module has a clear, focused purpose
+2. **Reusability**: Services can be used by any dashboard component
+3. **Testability**: Individual modules can be tested in isolation
+4. **Documentation**: All modules have JSDoc comments
+5. **Consistency**: Shared services ensure consistent behavior
+
+### Performance Considerations
+- Modules loaded sequentially for dependencies, then parallel for main components
+- Services use singleton pattern to minimize memory usage
+- Lazy initialization where appropriate
+- Debouncing and throttling built into utilities
+
+## Backward Compatibility
+- All changes maintain backward compatibility
+- Fallback implementations when services unavailable
+- No breaking changes to external APIs
+- Dashboard remains fully functional
+
+## Next Steps for Phase 2 (Future Work)
+
+1. **Further code-tree.js decomposition**:
+   - Extract D3 visualization logic
+   - Separate WebSocket handling
+   - Create dedicated file analysis module
+
+2. **Apply pattern to other components**:
+   - Refactor activity-tree.js to use shared services
+   - Update other components to use tooltip service
+   - Migrate to event bus for inter-component communication
+
+3. **Testing**:
+   - Add unit tests for each module
+   - Integration tests for service interactions
+   - Performance benchmarks
+
+4. **Documentation**:
+   - API documentation for each service
+   - Usage examples
+   - Migration guide for other components
+
+## Files Created/Modified
+
+### Created (New Files)
+- `/static/js/shared/tooltip-service.js`
+- `/static/js/shared/dom-helpers.js`
+- `/static/js/shared/event-bus.js`
+- `/static/js/shared/logger.js`
+- `/static/js/components/code-tree/tree-utils.js`
+- `/static/js/components/code-tree/tree-constants.js`
+- `/static/js/components/code-tree/tree-search.js`
+- `/static/js/components/code-tree/tree-breadcrumb.js`
+
+### Modified
+- `/static/js/components/code-tree.js` - Added service initialization and module usage
+- `/templates/index.html` - Updated script loading sequence
+
+## Success Criteria Met
+✅ Dashboard remains fully functional  
+✅ No console errors or warnings  
+✅ Shared services created and available  
+✅ All new code has JSDoc documentation  
+✅ Backward compatibility maintained  
+✅ Clear separation of concerns achieved
+
+## Notes
+- The refactoring focused on extraction and organization rather than size reduction
+- The main code-tree.js file grew slightly due to initialization code and fallbacks
+- The real benefit is in the improved architecture and reusability
+- Future phases can now proceed with a solid foundation