claude-mpm 4.2.44__py3-none-any.whl → 4.3.0__py3-none-any.whl

claude_mpm/dashboard/react/components/EventViewer/EventViewer.module.css

@@ -0,0 +1,156 @@
+.eventsContainer {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.eventsHeader {
+  padding: 15px 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.eventsTitle {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.eventsInfo {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.eventsList {
+  flex: 1;
+  position: relative;
+  min-height: 300px;
+}
+
+.eventItem {
+  padding: 12px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  transition: background 0.2s;
+  cursor: pointer;
+  font-family: 'Courier New', monospace;
+  font-size: 13px;
+  position: relative;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.eventItem:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.eventItem.expanded {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.eventHeader {
+  width: 100%;
+}
+
+.eventHeaderRow {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.eventType {
+  padding: 3px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.eventType.agent {
+  background: rgba(167, 139, 250, 0.2);
+  color: #a78bfa;
+}
+
+.eventType.tool {
+  background: rgba(96, 165, 250, 0.2);
+  color: #60a5fa;
+}
+
+.eventType.file {
+  background: rgba(251, 191, 36, 0.2);
+  color: #fbbf24;
+}
+
+.eventType.session {
+  background: rgba(74, 222, 128, 0.2);
+  color: #4ade80;
+}
+
+.eventType.error {
+  background: rgba(248, 113, 113, 0.2);
+  color: #f87171;
+}
+
+.eventType.info {
+  background: rgba(134, 239, 172, 0.2);
+  color: #86efac;
+}
+
+.eventTime {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.sourceIndicator {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.4);
+  font-style: italic;
+}
+
+.eventPreview {
+  color: rgba(255, 255, 255, 0.7);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.eventDetails {
+  margin-top: 10px;
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+}
+
+.noEvents {
+  text-align: center;
+  padding: 60px 20px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.noEvents h3 {
+  margin-bottom: 10px;
+  font-size: 18px;
+}
+
+.noEvents p {
+  font-size: 14px;
+}

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

@@ -0,0 +1,38 @@
+.statusBar {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.statusIndicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 20px;
+  font-size: 14px;
+}
+
+.statusDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+.statusDot.connected {
+  background: #4ade80;
+  box-shadow: 0 0 10px #4ade80;
+}
+
+.statusDot.disconnected {
+  background: #f87171;
+  box-shadow: 0 0 10px #f87171;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}

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

@@ -0,0 +1,92 @@
+.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/static/archive/activity_dashboard_fixed.html

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

claude_mpm/dashboard/static/archive/activity_dashboard_test.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Activity Dashboard Test</title>
+</head>
+<body>
+    <h1>Activity Dashboard Test Results</h1>
+
+    <h2>Dashboard Accessibility Check:</h2>
+    <iframe id="dashboard-frame" src="http://localhost:8765/static/activity.html"
+            width="100%" height="600" style="border: 2px solid #333;"></iframe>
+
+    <h2>Test Status:</h2>
+    <div id="test-status">
+        <p>✅ Monitor server is running on port 8765</p>
+        <p>✅ Activity dashboard HTML file created at: /src/claude_mpm/dashboard/static/activity.html</p>
+        <p>✅ Dashboard is being served at: http://localhost:8765/static/activity.html</p>
+        <p>✅ Navigation links to other dashboards are included</p>
+        <p>✅ Activity tree component is integrated</p>
+        <p>✅ Real-time WebSocket connection is configured</p>
+    </div>
+
+    <h2>Dashboard Features:</h2>
+    <ul>
+        <li>🎯 Hierarchical tree view of PM → Agent → Tool activities</li>
+        <li>🔄 Real-time updates via WebSocket</li>
+        <li>📊 Session-based organization</li>
+        <li>🔍 Search and filtering capabilities</li>
+        <li>📈 Statistics panel showing nodes, active items, tree depth</li>
+        <li>🎨 Dark theme consistent with other monitors</li>
+        <li>🔗 Navigation tabs to other dashboards</li>
+        <li>⚡ Connection status indicator</li>
+        <li>⏱️ Uptime counter</li>
+        <li>🌳 Expandable/collapsible tree nodes</li>
+    </ul>
+
+    <h2>Visual Hierarchy:</h2>
+    <ul>
+        <li>Level 0: PM Sessions (gradient background)</li>
+        <li>Level 1: User Instructions (purple border)</li>
+        <li>Level 1: TodoWrite (pink border)</li>
+        <li>Level 1: Agents (blue border)</li>
+        <li>Level 2: Tools (yellow border)</li>
+        <li>Level 3: Todo items (checkbox icons)</li>
+    </ul>
+
+    <script>
+        // Try to check if the dashboard loads
+        window.addEventListener('load', () => {
+            const iframe = document.getElementById('dashboard-frame');
+            iframe.addEventListener('load', () => {
+                console.log('Dashboard loaded successfully!');
+            });
+            iframe.addEventListener('error', () => {
+                console.error('Failed to load dashboard');
+            });
+        });
+    </script>
+</body>
+</html>