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

claude_mpm/dashboard/react/contexts/DashboardContext.tsx

@@ -0,0 +1,215 @@
+import React, { createContext, useContext, useReducer, ReactNode } from 'react';
+
+// Types for events
+export interface DashboardEvent {
+  type: string;
+  subtype?: string;
+  timestamp: number;
+  source: string;
+  data: any;
+  raw?: any;
+}
+
+// Types for connection state
+export interface ConnectionState {
+  isConnected: boolean;
+  isConnecting: boolean;
+  connectionCount: number;
+  port: number;
+}
+
+// Dashboard state interface
+export interface DashboardState {
+  events: DashboardEvent[];
+  connection: ConnectionState;
+  stats: {
+    totalEvents: number;
+    eventsPerSecond: number;
+    uniqueTypes: number;
+  };
+  filters: {
+    searchTerm: string;
+    typeFilter: string;
+  };
+  settings: {
+    autoScroll: boolean;
+    pauseStream: boolean;
+    maxEvents: number;
+  };
+}
+
+// Action types
+type DashboardAction =
+  | { type: 'ADD_EVENT'; payload: DashboardEvent }
+  | { type: 'CLEAR_EVENTS' }
+  | { type: 'SET_CONNECTION_STATE'; payload: Partial<ConnectionState> }
+  | { type: 'UPDATE_STATS'; payload: Partial<DashboardState['stats']> }
+  | { type: 'SET_FILTER'; payload: { key: keyof DashboardState['filters']; value: string } }
+  | { type: 'SET_SETTING'; payload: { key: keyof DashboardState['settings']; value: any } };
+
+// Initial state
+const initialState: DashboardState = {
+  events: [],
+  connection: {
+    isConnected: false,
+    isConnecting: false,
+    connectionCount: 0,
+    port: 8765
+  },
+  stats: {
+    totalEvents: 0,
+    eventsPerSecond: 0,
+    uniqueTypes: 0
+  },
+  filters: {
+    searchTerm: '',
+    typeFilter: ''
+  },
+  settings: {
+    autoScroll: true,
+    pauseStream: false,
+    maxEvents: 1000
+  }
+};
+
+// Reducer function
+function dashboardReducer(state: DashboardState, action: DashboardAction): DashboardState {
+  switch (action.type) {
+    case 'ADD_EVENT':
+      if (state.settings.pauseStream) return state;
+
+      const newEvents = [action.payload, ...state.events];
+      const trimmedEvents = newEvents.slice(0, state.settings.maxEvents);
+
+      return {
+        ...state,
+        events: trimmedEvents,
+        stats: {
+          ...state.stats,
+          totalEvents: state.stats.totalEvents + 1
+        }
+      };
+
+    case 'CLEAR_EVENTS':
+      return {
+        ...state,
+        events: [],
+        stats: {
+          ...state.stats,
+          totalEvents: 0
+        }
+      };
+
+    case 'SET_CONNECTION_STATE':
+      return {
+        ...state,
+        connection: {
+          ...state.connection,
+          ...action.payload
+        }
+      };
+
+    case 'UPDATE_STATS':
+      return {
+        ...state,
+        stats: {
+          ...state.stats,
+          ...action.payload
+        }
+      };
+
+    case 'SET_FILTER':
+      return {
+        ...state,
+        filters: {
+          ...state.filters,
+          [action.payload.key]: action.payload.value
+        }
+      };
+
+    case 'SET_SETTING':
+      return {
+        ...state,
+        settings: {
+          ...state.settings,
+          [action.payload.key]: action.payload.value
+        }
+      };
+
+    default:
+      return state;
+  }
+}
+
+// Context
+interface DashboardContextType {
+  state: DashboardState;
+  dispatch: React.Dispatch<DashboardAction>;
+  addEvent: (event: DashboardEvent) => void;
+  clearEvents: () => void;
+  setConnectionState: (connectionState: Partial<ConnectionState>) => void;
+  updateStats: (stats: Partial<DashboardState['stats']>) => void;
+  setFilter: (key: keyof DashboardState['filters'], value: string) => void;
+  setSetting: (key: keyof DashboardState['settings'], value: any) => void;
+}
+
+const DashboardContext = createContext<DashboardContextType | null>(null);
+
+// Provider component
+interface DashboardProviderProps {
+  children: ReactNode;
+}
+
+export function DashboardProvider({ children }: DashboardProviderProps) {
+  const [state, dispatch] = useReducer(dashboardReducer, initialState);
+
+  const addEvent = (event: DashboardEvent) => {
+    dispatch({ type: 'ADD_EVENT', payload: event });
+  };
+
+  const clearEvents = () => {
+    dispatch({ type: 'CLEAR_EVENTS' });
+  };
+
+  const setConnectionState = (connectionState: Partial<ConnectionState>) => {
+    dispatch({ type: 'SET_CONNECTION_STATE', payload: connectionState });
+  };
+
+  const updateStats = (stats: Partial<DashboardState['stats']>) => {
+    dispatch({ type: 'UPDATE_STATS', payload: stats });
+  };
+
+  const setFilter = (key: keyof DashboardState['filters'], value: string) => {
+    dispatch({ type: 'SET_FILTER', payload: { key, value } });
+  };
+
+  const setSetting = (key: keyof DashboardState['settings'], value: any) => {
+    dispatch({ type: 'SET_SETTING', payload: { key, value } });
+  };
+
+  const value: DashboardContextType = {
+    state,
+    dispatch,
+    addEvent,
+    clearEvents,
+    setConnectionState,
+    updateStats,
+    setFilter,
+    setSetting
+  };
+
+  return (
+    <DashboardContext.Provider value={value}>
+      {children}
+    </DashboardContext.Provider>
+  );
+}
+
+// Hook to use dashboard context
+export function useDashboard() {
+  const context = useContext(DashboardContext);
+  if (!context) {
+    throw new Error('useDashboard must be used within a DashboardProvider');
+  }
+  return context;
+}

claude_mpm/dashboard/react/entries/events.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { DashboardProvider } from '../contexts/DashboardContext';
+import { EventViewer } from '../components/EventViewer/EventViewer';
+import { ConnectionStatus } from '../components/shared/ConnectionStatus';
+import { FilterBar } from '../components/shared/FilterBar';
+import { useSocket } from '../hooks/useSocket';
+import { useDashboard } from '../contexts/DashboardContext';
+import { ErrorBoundary } from '../components/ErrorBoundary';
+
+// Extend Window interface for TypeScript
+declare global {
+  interface Window {
+    ClaudeMPMReact?: {
+      initializeReactEvents?: () => boolean;
+    };
+    initializeReactEvents?: () => boolean;
+  }
+}
+
+function EventsPageApp() {
+  // Initialize socket connection
+  useSocket();
+
+  const { state } = useDashboard();
+
+  return (
+    <div className="react-events-container">
+      {/* Statistics Panel */}
+      <div className="stats-panel">
+        <div className="stat-card">
+          <div className="stat-icon">📊</div>
+          <div className="stat-info">
+            <div className="stat-label">Total Events</div>
+            <div className="stat-value">{state.stats.totalEvents}</div>
+          </div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-icon">⚡</div>
+          <div className="stat-info">
+            <div className="stat-label">Events/Sec</div>
+            <div className="stat-value">{state.stats.eventsPerSecond}</div>
+          </div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-icon">🔗</div>
+          <div className="stat-info">
+            <div className="stat-label">Active Connections</div>
+            <div className="stat-value">{state.connection.connectionCount}</div>
+          </div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-icon">📝</div>
+          <div className="stat-info">
+            <div className="stat-label">Event Types</div>
+            <div className="stat-value">{state.stats.uniqueTypes}</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Filter Controls */}
+      <FilterBar />
+
+      {/* Event Viewer */}
+      <EventViewer />
+    </div>
+  );
+}
+
+function EventsPage() {
+  return (
+    <ErrorBoundary>
+      <DashboardProvider>
+        <EventsPageApp />
+      </DashboardProvider>
+    </ErrorBoundary>
+  );
+}
+
+// Initialize React app - throws errors instead of graceful fallback
+function initializeReactEvents() {
+  console.log('Initializing React Events - strict mode (no fallback)');
+
+  // Check for required DOM element
+  const container = document.getElementById('react-events-root');
+  if (!container) {
+    const error = new Error('React initialization failed: Required DOM element \'#react-events-root\' not found');
+    console.error(error.message);
+    throw error;
+  }
+
+  // Check for Socket.IO availability
+  if (typeof window !== 'undefined' && typeof (window as any).io === 'undefined') {
+    const error = new Error('React initialization failed: Socket.IO dependency not loaded');
+    console.error(error.message);
+    throw error;
+  }
+
+  try {
+    const root = createRoot(container);
+    root.render(<EventsPage />);
+    console.log('React EventViewer initialized successfully');
+    return true;
+  } catch (error) {
+    const initError = new Error(`React initialization failed: Failed to render components - ${error instanceof Error ? error.message : String(error)}`);
+    console.error(initError.message);
+    throw initError;
+  }
+}
+
+// Export for module loading
+export { initializeReactEvents };
+
+// Expose to window for global access
+if (typeof window !== 'undefined') {
+  // Create namespace if it doesn't exist
+  window.ClaudeMPMReact = window.ClaudeMPMReact || {};
+  window.ClaudeMPMReact.initializeReactEvents = initializeReactEvents;
+
+  // Also expose directly on window for easier access
+  window.initializeReactEvents = initializeReactEvents;
+
+  console.log('React events initialization function exposed on window');
+}
+
+// Auto-initialize if this script is loaded directly - throws errors on failure
+if (typeof window !== 'undefined' && document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    // Always attempt initialization - let it throw if it fails
+    try {
+      initializeReactEvents();
+    } catch (error) {
+      // Display error to user instead of silent failure
+      const container = document.getElementById('react-events-root');
+      if (container) {
+        container.innerHTML = `
+          <div style="padding: 20px; background: rgba(248, 113, 113, 0.1); border: 1px solid #f87171; border-radius: 8px; color: #f87171; font-family: monospace;">
+            <h2>React Initialization Error</h2>
+            <p><strong>Error:</strong> ${error instanceof Error ? error.message : String(error)}</p>
+            <p>The React-based dashboard failed to load. Check the console for detailed error information.</p>
+          </div>
+        `;
+      }
+      throw error;
+    }
+  });
+} else if (typeof window !== 'undefined') {
+  // Immediate initialization attempt - let it throw if it fails
+  try {
+    initializeReactEvents();
+  } catch (error) {
+    // Display error to user instead of silent failure
+    const container = document.getElementById('react-events-root');
+    if (container) {
+      container.innerHTML = `
+        <div style="padding: 20px; background: rgba(248, 113, 113, 0.1); border: 1px solid #f87171; border-radius: 8px; color: #f87171; font-family: monospace;">
+          <h2>React Initialization Error</h2>
+          <p><strong>Error:</strong> ${error instanceof Error ? error.message : String(error)}</p>
+          <p>The React-based dashboard failed to load. Check the console for detailed error information.</p>
+        </div>
+      `;
+    }
+    throw error;
+  }
+}

claude_mpm/dashboard/react/hooks/useEvents.ts

@@ -0,0 +1,191 @@
+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
+  };
+}