claude-mpm 4.1.11__py3-none-any.whl → 4.1.13__py3-none-any.whl

claude_mpm/dashboard/static/js/connection-manager.js

@@ -104,7 +104,7 @@ class EnhancedConnectionManager {
             timeout: 20000,
             transports: ['websocket', 'polling'],
             pingInterval: 25000,
-            pingTimeout: 60000
+            pingTimeout: 20000
         });
         
         this.setupSocketHandlers();

claude_mpm/dashboard/static/js/dashboard.js

@@ -26,6 +26,7 @@ import { ExportManager } from '@components/export-manager.js';
 import { WorkingDirectoryManager } from '@components/working-directory.js';
 import { FileToolTracker } from '@components/file-tool-tracker.js';
 import { BuildTracker } from '@components/build-tracker.js';
+import { UnifiedDataViewer } from '@components/unified-data-viewer.js';
 class Dashboard {
     constructor() {
         // Core components (existing)
@@ -163,14 +164,22 @@ class Dashboard {
         // Set the socket client for receiving updates
         this.buildTracker.setSocketClient(this.socketClient);
         
-        // Mount to header - find the best location
-        const headerTitle = document.querySelector('.header-title');
-        if (headerTitle) {
-            // Insert after the title and status badge
-            this.buildTracker.mount(headerTitle);
-        } else {
-            console.warn('Could not find header-title element for build tracker');
-        }
+        // Mount to header with retry logic for DOM readiness
+        const mountBuildTracker = () => {
+            const headerTitle = document.querySelector('.header-title');
+            if (headerTitle) {
+                // Insert after the title and status badge
+                this.buildTracker.mount(headerTitle);
+                console.log('BuildTracker mounted successfully');
+            } else {
+                console.warn('Header-title element not found for build tracker, will retry');
+                // Retry after a short delay if DOM is still being constructed
+                setTimeout(mountBuildTracker, 100);
+            }
+        };
+        
+        // Try to mount immediately, with retry logic if needed
+        mountBuildTracker();
         
         // Make available globally for debugging
         window.buildTracker = this.buildTracker;
@@ -445,7 +454,7 @@ class Dashboard {
     }
 
     /**
-     * Render agents tab with hierarchical view
+     * Render agents tab with flat chronological view
      */
     renderAgents() {
         const agentsList = document.getElementById('agents-list');
@@ -455,17 +464,12 @@ class Dashboard {
         const searchText = document.getElementById('agents-search-input')?.value || '';
         const agentType = document.getElementById('agents-type-filter')?.value || '';
         
-        // Build filters object
-        const filters = {};
-        if (searchText) filters.searchText = searchText;
-        if (agentType) filters.agentType = agentType;
-        
-        // Generate hierarchical HTML
-        const hierarchyHTML = this.agentHierarchy.render(filters);
-        agentsList.innerHTML = hierarchyHTML;
+        // Generate flat HTML
+        const flatHTML = this.renderAgentsFlat(searchText, agentType);
+        agentsList.innerHTML = flatHTML;
         
-        // Add expand/collapse all buttons if not present
-        this.addHierarchyControls();
+        // Remove hierarchy controls if they exist
+        this.removeHierarchyControls();
         
         // Update filter dropdowns with available agent types
         const uniqueInstances = this.agentInference.getUniqueAgentInstances();
@@ -473,45 +477,202 @@ class Dashboard {
     }
     
     /**
-     * Add hierarchy control buttons
+     * Remove hierarchy control buttons (flat view doesn't need them)
      */
-    addHierarchyControls() {
-        const tabFilters = document.querySelector('#agents-tab .tab-filters');
-        if (!tabFilters) return;
-        
-        // Check if controls already exist
-        if (document.getElementById('hierarchy-controls')) return;
+    removeHierarchyControls() {
+        const existingControls = document.getElementById('hierarchy-controls');
+        if (existingControls) {
+            existingControls.remove();
+        }
+    }
+    
+    /**
+     * Render agents as a flat chronological list
+     * @param {string} searchText - Search filter
+     * @param {string} agentType - Agent type filter 
+     * @returns {string} HTML for flat agent list
+     */
+    renderAgentsFlat(searchText, agentType) {
+        const events = this.eventViewer.events;
+        if (!events || events.length === 0) {
+            return '<div class="no-events">No agent events found...</div>';
+        }
         
-        // Create control buttons
-        const controls = document.createElement('div');
-        controls.id = 'hierarchy-controls';
-        controls.className = 'hierarchy-controls';
-        controls.innerHTML = `
-            <button data-action="expand-all" 
-                    class="hierarchy-btn hierarchy-expand-all">
-                Expand All
-            </button>
-            <button data-action="collapse-all" 
-                    class="hierarchy-btn hierarchy-collapse-all">
-                Collapse All
-            </button>
-        `;
+        // Process agent inference to get agent mappings
+        this.agentInference.processAgentInference();
+        const eventAgentMap = this.agentInference.getEventAgentMap();
         
-        // Add safe event listeners
-        controls.addEventListener('click', (event) => {
-            const action = event.target.dataset.action;
-            if (action && window.dashboard && window.dashboard.agentHierarchy) {
-                if (action === 'expand-all') {
-                    window.dashboard.agentHierarchy.expandAllNodes();
-                    window.dashboard.renderAgents();
-                } else if (action === 'collapse-all') {
-                    window.dashboard.agentHierarchy.collapseAllNodes();
-                    window.dashboard.renderAgents();
+        // Collect all agent events with metadata
+        const agentEvents = [];
+        events.forEach((event, index) => {
+            const inference = eventAgentMap.get(index);
+            if (inference && (inference.type === 'subagent' || inference.type === 'main_agent')) {
+                // Apply filters
+                let includeEvent = true;
+                
+                if (searchText) {
+                    const searchLower = searchText.toLowerCase();
+                    includeEvent = includeEvent && (
+                        inference.agentName.toLowerCase().includes(searchLower) ||
+                        (event.tool_name && event.tool_name.toLowerCase().includes(searchLower)) ||
+                        (event.data && JSON.stringify(event.data).toLowerCase().includes(searchLower))
+                    );
+                }
+                
+                if (agentType) {
+                    includeEvent = includeEvent && inference.agentName.includes(agentType);
+                }
+                
+                if (includeEvent) {
+                    agentEvents.push({
+                        event,
+                        inference,
+                        index,
+                        timestamp: new Date(event.timestamp)
+                    });
                 }
             }
         });
         
-        tabFilters.appendChild(controls);
+        if (agentEvents.length === 0) {
+            return '<div class="no-events">No agent events match the current filters...</div>';
+        }
+        
+        // Generate HTML for each event
+        const html = agentEvents.map((item, listIndex) => {
+            const { event, inference, index, timestamp } = item;
+            
+            // Determine action/tool
+            let action = 'Activity';
+            let actionIcon = '📋';
+            let details = '';
+            
+            if (event.event_type === 'SubagentStart') {
+                action = 'Started';
+                actionIcon = '🟢';
+                details = 'Agent session began';
+            } else if (event.event_type === 'SubagentStop') {
+                action = 'Stopped';
+                actionIcon = '🔴';
+                details = 'Agent session ended';
+            } else if (event.tool_name) {
+                action = `Tool: ${event.tool_name}`;
+                actionIcon = this.getToolIcon(event.tool_name);
+                
+                // Add tool parameters as details
+                if (event.data && event.data.tool_parameters) {
+                    const params = event.data.tool_parameters;
+                    if (params.file_path) {
+                        details = params.file_path;
+                    } else if (params.command) {
+                        details = params.command.substring(0, 50) + (params.command.length > 50 ? '...' : '');
+                    } else if (params.pattern) {
+                        details = `pattern="${params.pattern}"`;
+                    } else if (params.query) {
+                        details = `query="${params.query}"`;
+                    }
+                }
+            }
+            
+            // Status based on event type
+            let status = 'completed';
+            if (event.event_type === 'SubagentStart') {
+                status = 'active';
+            } else if (event.data && event.data.error) {
+                status = 'error';
+            }
+            
+            return `
+                <div class="agent-event-item" data-index="${listIndex}" onclick="window.dashboard.showCardDetails('agents', ${index})">
+                    <div class="agent-event-header">
+                        <div class="agent-event-time">${this.formatTimestamp(timestamp)}</div>
+                        <div class="agent-event-agent">
+                            ${this.getAgentIcon(inference.agentName)} ${inference.agentName}
+                        </div>
+                        <div class="agent-event-action">
+                            ${actionIcon} ${action}
+                        </div>
+                        <div class="agent-event-status status-${status}">
+                            ${this.getStatusIcon(status)}
+                        </div>
+                    </div>
+                    ${details ? `<div class="agent-event-details">${this.escapeHtml(details)}</div>` : ''}
+                </div>
+            `;
+        }).join('');
+        
+        return `<div class="agent-events-flat">${html}</div>`;
+    }
+    
+    /**
+     * Get icon for agent type
+     */
+    getAgentIcon(agentName) {
+        const agentIcons = {
+            'PM': '🎯',
+            'Engineer Agent': '🔧',
+            'Research Agent': '🔍', 
+            'QA Agent': '✅',
+            'Documentation Agent': '📝',
+            'Security Agent': '🔒',
+            'Ops Agent': '⚙️',
+            'Version Control Agent': '📦',
+            'Data Engineer Agent': '💾',
+            'Test Integration Agent': '🧪'
+        };
+        return agentIcons[agentName] || '🤖';
+    }
+    
+    /**
+     * Get icon for tool
+     */
+    getToolIcon(toolName) {
+        const toolIcons = {
+            'Read': '📖',
+            'Write': '✏️',
+            'Edit': '📝',
+            'Bash': '💻',
+            'Grep': '🔍',
+            'Glob': '📂',
+            'LS': '📁',
+            'Task': '📋'
+        };
+        return toolIcons[toolName] || '🔧';
+    }
+    
+    /**
+     * Get icon for status
+     */
+    getStatusIcon(status) {
+        const statusIcons = {
+            'active': '🟢',
+            'completed': '✅',
+            'error': '❌',
+            'pending': '🟡'
+        };
+        return statusIcons[status] || '❓';
+    }
+    
+    /**
+     * Format timestamp for display
+     */
+    formatTimestamp(timestamp) {
+        return timestamp.toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit', 
+            second: '2-digit',
+            hour12: false
+        });
+    }
+    
+    /**
+     * Escape HTML for safe display
+     */
+    escapeHtml(text) {
+        if (!text) return '';
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
     }
 
     /**
@@ -1080,14 +1241,11 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
             working_dir: workingDir
         });
 
-        console.log('📄 File viewer request sent:', {
-            filePath,
-            workingDir
-        });
+        // File viewer request sent
 
         // Wait for response
         const result = await responsePromise;
-        console.log('📦 File content received:', result);
+        // File content received successfully
 
         // Hide loading
         modal.querySelector('.file-viewer-loading').style.display = 'none';
@@ -1143,7 +1301,7 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
 }
 
 function displayFileContent(modal, result) {
-    console.log('📝 displayFileContent called with:', result);
+    // Display file content in modal
     const contentArea = modal.querySelector('.file-viewer-content-area');
     const extensionElement = modal.querySelector('.file-extension');
     const encodingElement = modal.querySelector('.file-encoding');
@@ -1157,7 +1315,7 @@ function displayFileContent(modal, result) {
 
     // Update content with basic syntax highlighting
     if (codeElement && result.content) {
-        console.log('💡 Setting file content, length:', result.content.length);
+        // Setting file content
         codeElement.innerHTML = highlightCode(result.content, result.extension);
 
         // Force scrolling to work by setting explicit heights
@@ -1175,12 +1333,7 @@ function displayFileContent(modal, result) {
 
                 const availableHeight = modalHeight - headerHeight - toolbarHeight - 40; // 40px for padding
 
-                console.log('🎯 Setting file viewer scroll height:', {
-                    modalHeight,
-                    headerHeight,
-                    toolbarHeight,
-                    availableHeight
-                });
+                // Setting file viewer scroll height
 
                 wrapper.style.maxHeight = `${availableHeight}px`;
                 wrapper.style.overflowY = 'auto';
@@ -1193,7 +1346,7 @@ function displayFileContent(modal, result) {
     // Show content area
     if (contentArea) {
         contentArea.style.display = 'block';
-        console.log('✅ File content area displayed');
+        // File content area displayed
     }
 }
 
@@ -1533,7 +1686,7 @@ async function updateGitDiffModal(modal, filePath, timestamp, workingDir) {
                 throw new Error(`Server health check failed: ${healthResponse.status} ${healthResponse.statusText}`);
             }
 
-            console.log('✅ Server health check passed');
+            // Server health check passed
         } catch (healthError) {
             throw new Error(`Cannot reach server at localhost:${port}. Health check failed: ${healthError.message}`);
         }
@@ -1553,17 +1706,17 @@ async function updateGitDiffModal(modal, filePath, timestamp, workingDir) {
         }
 
         const result = await response.json();
-        console.log('📦 Git diff response:', result);
+        // Git diff response received
 
         // Hide loading
         modal.querySelector('.git-diff-loading').style.display = 'none';
 
         if (result.success) {
-            console.log('📊 Displaying successful git diff');
+            // Displaying successful git diff
             // Show successful diff
             displayGitDiff(modal, result);
         } else {
-            console.log('⚠️ Displaying git diff error:', result);
+            // Displaying git diff error
             // Show error
             displayGitDiffError(modal, result);
         }
@@ -1661,18 +1814,13 @@ function highlightGitDiff(diffText) {
 }
 
 function displayGitDiff(modal, result) {
-    console.log('📝 displayGitDiff called with:', result);
+    // Display git diff content
     const contentArea = modal.querySelector('.git-diff-content-area');
     const commitHashElement = modal.querySelector('.commit-hash');
     const methodElement = modal.querySelector('.diff-method');
     const codeElement = modal.querySelector('.git-diff-code');
 
-    console.log('🔍 Elements found:', {
-        contentArea: !!contentArea,
-        commitHashElement: !!commitHashElement,
-        methodElement: !!methodElement,
-        codeElement: !!codeElement
-    });
+    // Elements found for diff display
 
     // Update metadata
     if (commitHashElement) commitHashElement.textContent = `Commit: ${result.commit_hash}`;
@@ -1680,7 +1828,7 @@ function displayGitDiff(modal, result) {
 
     // Update diff content with basic syntax highlighting
     if (codeElement && result.diff) {
-        console.log('💡 Setting diff content, length:', result.diff.length);
+        // Setting diff content
         codeElement.innerHTML = highlightGitDiff(result.diff);
 
         // Force scrolling to work by setting explicit heights
@@ -1698,12 +1846,7 @@ function displayGitDiff(modal, result) {
 
                 const availableHeight = modalHeight - headerHeight - toolbarHeight - 40; // 40px for padding
 
-                console.log('🎯 Setting explicit scroll height:', {
-                    modalHeight,
-                    headerHeight,
-                    toolbarHeight,
-                    availableHeight
-                });
+                // Setting explicit scroll height
 
                 wrapper.style.maxHeight = `${availableHeight}px`;
                 wrapper.style.overflowY = 'auto';
@@ -1716,7 +1859,7 @@ function displayGitDiff(modal, result) {
     // Show content area
     if (contentArea) {
         contentArea.style.display = 'block';
-        console.log('✅ Content area displayed');
+        // Content area displayed
     }
 }
 

claude_mpm/dashboard/static/js/socket-client.js

@@ -315,7 +315,7 @@ class SocketClient {
      * Configuration Details:
      * - autoConnect: true - Immediate connection attempt
      * - reconnection: true - Built-in reconnection enabled
-     * - pingInterval: 45000ms - Matches server configuration
+     * - pingInterval: 25000ms - Matches server configuration
      * - pingTimeout: 20000ms - Health check timeout
      * - transports: ['websocket', 'polling'] - Fallback options
      * 
@@ -351,7 +351,7 @@ class SocketClient {
             timeout: 20000,  // Connection timeout
             forceNew: true,
             transports: ['websocket', 'polling'],
-            pingInterval: 45000,  // CRITICAL: Must match server's 45 seconds
+            pingInterval: 25000,  // CRITICAL: Must match server's 25 seconds
             pingTimeout: 20000    // CRITICAL: Must match server's 20 seconds
         });
 

claude_mpm/dashboard/templates/index.html

@@ -331,7 +331,6 @@
                                 <div class="activity-controls">
                                     <button id="expand-all" class="btn-sm">Expand All</button>
                                     <button id="collapse-all" class="btn-sm">Collapse All</button>
-                                    <button id="reset-zoom" class="btn-sm">Reset Zoom</button>
                                     <select id="time-range">
                                         <option value="all">All Time</option>
                                         <option value="hour">Last Hour</option>
@@ -359,24 +358,24 @@
                                 <div id="activity-tree"></div>
                                 <div class="tree-legend">
                                     <div class="legend-item">
-                                        <span class="legend-icon pm">●</span>
-                                        <span>PM</span>
+                                        <span class="legend-icon">📁</span>
+                                        <span>Project Root</span>
                                     </div>
                                     <div class="legend-item">
-                                        <span class="legend-icon todowrite">■</span>
-                                        <span>TodoWrite</span>
+                                        <span class="legend-icon pm">🎯</span>
+                                        <span>PM Session</span>
                                     </div>
                                     <div class="legend-item">
-                                        <span class="legend-icon agent">●</span>
-                                        <span>Agent</span>
+                                        <span class="legend-icon todowrite">📝</span>
+                                        <span>Todo Item</span>
                                     </div>
                                     <div class="legend-item">
-                                        <span class="legend-icon tool">●</span>
-                                        <span>Tool</span>
+                                        <span class="legend-icon agent">🤖</span>
+                                        <span>Agent</span>
                                     </div>
                                     <div class="legend-item">
-                                        <span class="legend-icon file">●</span>
-                                        <span>File/Command</span>
+                                        <span class="legend-icon tool">🔧</span>
+                                        <span>Tool</span>
                                     </div>
                                 </div>
                             </div>
@@ -425,9 +424,6 @@
                                     <div class="option-group">
                                         <label>Ignore: <input type="text" id="ignore-patterns" placeholder="test*, *.spec.js, node_modules" class="input-compact" style="width: 200px;"></label>
                                     </div>
-                                    <div class="option-group">
-                                        <label><input type="checkbox" id="show-hidden-files"> Show hidden files (dotfiles)</label>
-                                    </div>
                                 </div>
                             </div>
                             <div id="code-tree-container" class="code-tree-container">
@@ -513,14 +509,95 @@
     </div>
 
     <!-- JavaScript Modules -->
-    <!-- Load bundled dashboard assets (built with Vite) -->
-    <script type="module" src="/static/dist/dashboard.js"></script>
-    
-    <!-- Activity Tree Module (from Vite build) -->
-    <script type="module" src="/static/dist/components/activity-tree.js"></script>
-    
-    <!-- Code Tree Module (from Vite build) -->
-    <script type="module" src="/static/dist/components/code-tree.js"></script>
-    <script type="module" src="/static/dist/components/code-viewer.js"></script>
+    <!-- Load bundled dashboard assets (built with Vite) - with proper initialization order -->
+    <script type="module">
+        // Add timestamp-based cache busting and ensure proper loading order
+        const timestamp = Date.now();
+        
+        // Load modules sequentially to ensure dashboard.js loads first
+        const loadModule = (src) => {
+            return new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.type = 'module';
+                script.src = `${src}?t=${timestamp}`;
+                script.onload = resolve;
+                script.onerror = reject;
+                document.body.appendChild(script);
+            });
+        };
+        
+        // Load dashboard.js first, then other components
+        Promise.all([
+            loadModule('/static/dist/dashboard.js'),
+            loadModule('/static/dist/components/activity-tree.js'),
+            loadModule('/static/dist/components/code-tree.js'),
+            loadModule('/static/dist/components/code-viewer.js')
+        ]).then(() => {
+            console.log('All dashboard modules loaded successfully');
+            
+            // Give modules time to execute and initialize dashboard
+            setTimeout(() => {
+                console.log('Checking dashboard initialization...');
+                
+                if (window.dashboard) {
+                    console.log('Dashboard found, checking auto-connect status...');
+                    
+                    // Force auto-connect if not already connected
+                    if (window.dashboard.socketManager) {
+                        const socketManager = window.dashboard.socketManager;
+                        
+                        if (!socketManager.isConnected() && !socketManager.isConnecting()) {
+                            console.log('Dashboard loaded but not connected, forcing auto-connect...');
+                            
+                            // Try to trigger auto-connect manually
+                            const params = new URLSearchParams(window.location.search);
+                            socketManager.initializeFromURL(params);
+                        } else {
+                            console.log('Dashboard already connected or connecting');
+                        }
+                    } else {
+                        console.warn('Dashboard found but socketManager not available');
+                    }
+                } else {
+                    console.warn('Dashboard still not initialized after module loading');
+                    
+                    // Try to manually trigger initialization
+                    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+                        console.log('Document ready, attempting to trigger dashboard initialization...');
+                        document.dispatchEvent(new Event('DOMContentLoaded'));
+                    }
+                }
+                
+                // Debug: Test connection settings button
+                const connectionToggleBtn = document.getElementById('connection-toggle-btn');
+                if (connectionToggleBtn) {
+                    console.log('Connection toggle button found, testing functionality...');
+                    
+                    // Add a debug click handler to ensure the button works
+                    connectionToggleBtn.addEventListener('click', () => {
+                        console.log('Connection toggle button clicked (debug handler)');
+                        
+                        if (window.dashboard && window.dashboard.socketManager) {
+                            console.log('Calling socketManager.toggleConnectionControls()');
+                            window.dashboard.socketManager.toggleConnectionControls();
+                        } else {
+                            console.log('Manual toggle fallback');
+                            const controlsRow = document.getElementById('connection-controls-row');
+                            if (controlsRow) {
+                                const isVisible = controlsRow.style.display !== 'none';
+                                controlsRow.style.display = isVisible ? 'none' : 'block';
+                                connectionToggleBtn.textContent = isVisible ? 'Connection Settings' : 'Hide Settings';
+                                console.log(`Manually toggled controls visibility: ${!isVisible}`);
+                            }
+                        }
+                    });
+                } else {
+                    console.error('Connection toggle button not found in DOM');
+                }
+            }, 1000);
+        }).catch(error => {
+            console.error('Failed to load dashboard modules:', error);
+        });
+    </script>
 </body>
 </html>

claude_mpm/services/agents/deployment/agent_template_builder.py

@@ -190,7 +190,17 @@ class AgentTemplateBuilder:
         # Include tools field only if agent is clearly restricted (missing core tools or very few tools)
         include_tools_field = not has_core_tools or len(agent_tools) < 6
 
-        # Build YAML frontmatter using Claude Code's working format + our custom fields
+        # Build YAML frontmatter using Claude Code's minimal format
+        # ONLY include fields that Claude Code recognizes
+        #
+        # REMOVED FIELDS for Claude Code compatibility:
+        # - model, color, version, type, source, author
+        # These fields caused Claude Code to silently fail agent discovery
+        #
+        # CLAUDE CODE COMPATIBLE FORMAT:
+        # - name: kebab-case agent name (required)
+        # - description: when/why to use this agent (required)
+        # - tools: comma-separated tool list (optional, only if restricting)
         frontmatter_lines = [
             "---",
             f"name: {claude_code_name}",
@@ -203,12 +213,6 @@ class AgentTemplateBuilder:
 
         frontmatter_lines.extend(
             [
-                f"model: {model_type}",  # Use explicit model type instead of inherit
-                f"color: {color}",
-                f"version: {agent_version}",
-                f"type: {agent_type}",
-                f"source: {source_info}",  # Track which source provided this agent
-                "author: claude-mpm",  # Mark as system-managed agent
                 "---",
                 "",
             ]