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

claude_mpm/dashboard/react/components/shared/ConnectionStatus.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { useDashboard } from '../../contexts/DashboardContext';
-import styles from './ConnectionStatus.module.css';
-
-export function ConnectionStatus() {
-  const { state } = useDashboard();
-  const { connection, stats } = state;
-
-  return (
-    <div className={styles.statusBar}>
-      <div className={styles.statusIndicator}>
-        <span
-          className={`${styles.statusDot} ${connection.isConnected ? styles.connected : styles.disconnected}`}
-        />
-        <span>
-          {connection.isConnected ? 'Connected' : connection.isConnecting ? 'Connecting...' : 'Disconnected'}
-        </span>
-      </div>
-
-      <div className={styles.statusIndicator}>
-        <span>📊</span>
-        <span>{stats.totalEvents} events</span>
-      </div>
-
-      <div className={styles.statusIndicator}>
-        <span>⚡</span>
-        <span>{stats.eventsPerSecond}/s</span>
-      </div>
-
-      <div className={styles.statusIndicator}>
-        <span>🔌</span>
-        <span>{connection.connectionCount} active</span>
-      </div>
-    </div>
-  );
-}

claude_mpm/dashboard/react/components/shared/FilterBar.module.css

@@ -1,92 +0,0 @@
-.controlsPanel {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 10px;
-  padding: 15px;
-  margin-bottom: 20px;
-  display: flex;
-  gap: 15px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.controlGroup {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.controlLabel {
-  font-size: 14px;
-  color: #94a3b8;
-}
-
-.btn {
-  padding: 10px 20px;
-  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
-  border: none;
-  border-radius: 8px;
-  color: white;
-  cursor: pointer;
-  font-size: 14px;
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
-}
-
-.btn.secondary {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.btn.danger {
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-}
-
-.searchBox {
-  flex: 1;
-  min-width: 200px;
-  padding: 10px 15px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  color: white;
-  font-size: 14px;
-}
-
-.searchBox::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.filterSelect {
-  padding: 10px 15px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  color: white;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.filterSelect option {
-  background: #0f172a;
-}
-
-.checkboxLabel {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 15px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.checkboxLabel input {
-  cursor: pointer;
-}

claude_mpm/dashboard/react/components/shared/FilterBar.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { useEvents } from '../../hooks/useEvents';
-import { useDashboard } from '../../contexts/DashboardContext';
-import styles from './FilterBar.module.css';
-
-export function FilterBar() {
-  const {
-    searchTerm,
-    typeFilter,
-    autoScroll,
-    pauseStream,
-    availableCategories,
-    setSearchTerm,
-    setTypeFilter,
-    toggleAutoScroll,
-    togglePauseStream,
-    exportEvents
-  } = useEvents();
-
-  const { clearEvents } = useDashboard();
-
-  const handleClearEvents = () => {
-    if (confirm('Clear all events?')) {
-      clearEvents();
-    }
-  };
-
-  return (
-    <div className={styles.controlsPanel}>
-      <div className={styles.controlGroup}>
-        <input
-          type="text"
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          placeholder="Search events..."
-          className={styles.searchBox}
-        />
-      </div>
-
-      <div className={styles.controlGroup}>
-        <label className={styles.controlLabel}>Type:</label>
-        <select
-          value={typeFilter}
-          onChange={(e) => setTypeFilter(e.target.value)}
-          className={styles.filterSelect}
-        >
-          <option value="">All Types</option>
-          {availableCategories.map(category => (
-            <option key={category} value={category}>
-              {category.charAt(0).toUpperCase() + category.slice(1)}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      <label className={styles.checkboxLabel}>
-        <input
-          type="checkbox"
-          checked={autoScroll}
-          onChange={toggleAutoScroll}
-        />
-        Auto-scroll
-      </label>
-
-      <label className={styles.checkboxLabel}>
-        <input
-          type="checkbox"
-          checked={pauseStream}
-          onChange={togglePauseStream}
-        />
-        Pause
-      </label>
-
-      <button
-        className={`${styles.btn} ${styles.secondary}`}
-        onClick={exportEvents}
-      >
-        Export JSON
-      </button>
-
-      <button
-        className={`${styles.btn} ${styles.danger}`}
-        onClick={handleClearEvents}
-      >
-        Clear All
-      </button>
-    </div>
-  );
-}

claude_mpm/dashboard/react/contexts/DashboardContext.tsx

@@ -1,215 +0,0 @@
-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

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