claude-mpm 4.1.10__py3-none-any.whl → 4.1.12__py3-none-any.whl

claude_mpm/dashboard/static/js/components/event-viewer.js

@@ -39,7 +39,6 @@ class EventViewer {
 
         // Subscribe to socket events
         this.socketClient.onEventUpdate((events, sessions) => {
-            console.log('EventViewer received event update:', events?.length || 0, 'events');
             // Ensure we always have a valid events array
             this.events = Array.isArray(events) ? events : [];
             this.updateDisplay();
@@ -76,7 +75,6 @@ class EventViewer {
     setupKeyboardNavigation() {
         // Keyboard navigation is now handled by Dashboard.setupUnifiedKeyboardNavigation()
         // This method is kept for backward compatibility but does nothing
-        console.log('EventViewer: Keyboard navigation handled by unified Dashboard system');
     }
 
     /**
@@ -110,18 +108,10 @@ class EventViewer {
         }
 
         this.filteredEvents = this.events.filter(event => {
-            // Filter out info level log messages
-            if (event.type === 'log' && event.data && event.data.level === 'info') {
-                return false;
-            }
-            
-            // Filter out code analysis events (they're shown in footer status bar)
-            if (event.type === 'code' || 
-                (event.type === 'unknown' && event.originalEventName && event.originalEventName.startsWith('code:'))) {
-                return false;
-            }
+            // NO AUTOMATIC FILTERING - All events are shown by default for complete visibility
+            // Users can apply their own filters using the search and type filter controls
             
-            // Search filter
+            // User-controlled search filter
             if (this.searchFilter) {
                 const searchableText = [
                     event.type || '',
@@ -134,7 +124,7 @@ class EventViewer {
                 }
             }
 
-            // Type filter - now handles full hook types (like "hook.user_prompt") and main types
+            // User-controlled type filter - handles full hook types (like "hook.user_prompt") and main types
             if (this.typeFilter) {
                 // Use the same logic as formatEventType to get the full event type
                 const eventType = event.type && event.type.trim() !== '' ? event.type : '';
@@ -144,13 +134,14 @@ class EventViewer {
                 }
             }
 
-            // Session filter
+            // User-controlled session filter
             if (this.sessionFilter && this.sessionFilter !== '') {
                 if (!event.data || event.data.session_id !== this.sessionFilter) {
                     return false;
                 }
             }
 
+            // Allow all events through unless filtered by user controls
             return true;
         });
 
@@ -222,7 +213,6 @@ class EventViewer {
      * Update the display with current events
      */
     updateDisplay() {
-        console.log('EventViewer updating display with', this.events?.length || 0, 'events');
         this.updateEventTypeDropdown();
         this.applyFilters();
     }
@@ -234,6 +224,9 @@ class EventViewer {
         const eventsList = document.getElementById('events-list');
         if (!eventsList) return;
 
+        // Check if user is at bottom BEFORE rendering (for autoscroll decision)
+        const wasAtBottom = (eventsList.scrollTop + eventsList.clientHeight >= eventsList.scrollHeight - 10);
+
         if (this.filteredEvents.length === 0) {
             eventsList.innerHTML = `
                 <div class="no-events">
@@ -281,9 +274,12 @@ class EventViewer {
             window.dashboard.tabNavigation.events.items = this.filteredEventElements;
         }
 
-        // Auto-scroll to bottom if enabled
-        if (this.autoScroll && this.filteredEvents.length > 0) {
-            eventsList.scrollTop = eventsList.scrollHeight;
+        // Auto-scroll only if user was already at bottom before rendering
+        if (this.filteredEvents.length > 0 && wasAtBottom && this.autoScroll) {
+            // Use requestAnimationFrame to ensure DOM has updated
+            requestAnimationFrame(() => {
+                eventsList.scrollTop = eventsList.scrollHeight;
+            });
         }
     }
 
@@ -337,6 +333,8 @@ class EventViewer {
                 return this.formatMemoryEvent(event);
             case 'log':
                 return this.formatLogEvent(event);
+            case 'code':
+                return this.formatCodeEvent(event);
             default:
                 return this.formatGenericEvent(event);
         }
@@ -480,6 +478,47 @@ class EventViewer {
         return `<strong>[${level.toUpperCase()}]</strong> ${truncated}`;
     }
 
+    /**
+     * Format code analysis event data
+     */
+    formatCodeEvent(event) {
+        const data = event.data || {};
+        
+        // Handle different code event subtypes
+        if (event.subtype === 'progress') {
+            const message = data.message || 'Processing...';
+            const percentage = data.percentage;
+            if (percentage !== undefined) {
+                return `<strong>Progress:</strong> ${message} (${Math.round(percentage)}%)`;
+            }
+            return `<strong>Progress:</strong> ${message}`;
+        } else if (event.subtype === 'analysis:queued') {
+            return `<strong>Queued:</strong> Analysis for ${data.path || 'Unknown path'}`;
+        } else if (event.subtype === 'analysis:start') {
+            return `<strong>Started:</strong> Analyzing ${data.path || 'Unknown path'}`;
+        } else if (event.subtype === 'analysis:complete') {
+            const duration = data.duration ? ` (${data.duration.toFixed(2)}s)` : '';
+            return `<strong>Complete:</strong> Analysis finished${duration}`;
+        } else if (event.subtype === 'analysis:error') {
+            return `<strong>Error:</strong> ${data.message || 'Analysis failed'}`;
+        } else if (event.subtype === 'analysis:cancelled') {
+            return `<strong>Cancelled:</strong> Analysis stopped for ${data.path || 'Unknown path'}`;
+        } else if (event.subtype === 'file:start') {
+            return `<strong>File:</strong> Processing ${data.file || 'Unknown file'}`;
+        } else if (event.subtype === 'file:complete') {
+            const nodes = data.nodes_count !== undefined ? ` (${data.nodes_count} nodes)` : '';
+            return `<strong>File done:</strong> ${data.file || 'Unknown file'}${nodes}`;
+        } else if (event.subtype === 'node:found') {
+            return `<strong>Node:</strong> Found ${data.node_type || 'element'} "${data.name || 'unnamed'}"`;
+        } else if (event.subtype === 'error') {
+            return `<strong>Error:</strong> ${data.error || 'Unknown error'} in ${data.file || 'file'}`;
+        }
+        
+        // Generic fallback for code events
+        const json = JSON.stringify(data);
+        return `<strong>Code:</strong> ${json.length > 100 ? json.substring(0, 100) + '...' : json}`;
+    }
+
     /**
      * Format generic event data
      */

claude_mpm/dashboard/static/js/dashboard.js

@@ -163,14 +163,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;
@@ -393,13 +401,25 @@ class Dashboard {
                             console.log('Dashboard triggering activity tree render...');
                             window.activityTreeInstance.renderWhenVisible();
                         }
+                        
+                        // Force show to ensure the tree is visible
+                        if (typeof window.activityTreeInstance.forceShow === 'function') {
+                            console.log('Dashboard forcing activity tree to show...');
+                            window.activityTreeInstance.forceShow();
+                        }
                     }
                 } else if (window.activityTree && typeof window.activityTree === 'function') {
                     // Fallback to legacy approach if available
                     const activityTreeInstance = window.activityTree();
-                    if (activityTreeInstance && typeof activityTreeInstance.renderWhenVisible === 'function') {
-                        console.log('Dashboard triggering activity tree render (legacy)...');
-                        activityTreeInstance.renderWhenVisible();
+                    if (activityTreeInstance) {
+                        if (typeof activityTreeInstance.renderWhenVisible === 'function') {
+                            console.log('Dashboard triggering activity tree render (legacy)...');
+                            activityTreeInstance.renderWhenVisible();
+                        }
+                        if (typeof activityTreeInstance.forceShow === 'function') {
+                            console.log('Dashboard forcing activity tree to show (legacy)...');
+                            activityTreeInstance.forceShow();
+                        }
                     }
                 } else {
                     // Module not loaded yet, retry after a delay
@@ -1068,14 +1088,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';
@@ -1131,7 +1148,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');
@@ -1145,7 +1162,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
@@ -1163,12 +1180,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';
@@ -1181,7 +1193,7 @@ function displayFileContent(modal, result) {
     // Show content area
     if (contentArea) {
         contentArea.style.display = 'block';
-        console.log('✅ File content area displayed');
+        // File content area displayed
     }
 }
 
@@ -1521,7 +1533,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}`);
         }
@@ -1541,17 +1553,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);
         }
@@ -1649,18 +1661,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}`;
@@ -1668,7 +1675,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
@@ -1686,12 +1693,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';
@@ -1704,7 +1706,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

@@ -475,11 +475,10 @@ class SocketClient {
                 return;
             }
             
-            // Check if this is a code analysis event - if so, don't add to events list
-            // Code analysis events are handled by the code-tree component and shown in the footer
+            // Code analysis events are now allowed to flow through to the events list for troubleshooting
+            // They will appear in both the Events tab and the Code tab
             if (validatedEvent.type && validatedEvent.type.startsWith('code:')) {
-                console.log('Code analysis event received via claude_event, not adding to events list:', validatedEvent.type);
-                return;
+                console.log('Code analysis event received via claude_event, adding to events list for troubleshooting:', validatedEvent.type);
             }
             
             // Transform event to match expected format (for backward compatibility)
@@ -551,46 +550,55 @@ class SocketClient {
             this.addEvent({ type: 'log', subtype: 'entry', timestamp: new Date().toISOString(), data });
         });
 
-        // Code analysis events - don't add to event list, just pass through
-        // These are handled by the code-tree component and shown in the footer
+        // Code analysis events - now allowed to flow through for troubleshooting
+        // These are ALSO handled by the code-tree component and shown in the footer
+        // They will appear in both places: Events tab (for troubleshooting) and Code tab (for visualization)
         this.socket.on('code:analysis:queued', (data) => {
-            // Don't add to events list - handled by code-tree component
-            console.log('Code analysis queued event received, not adding to events list');
+            // Add to events list for troubleshooting
+            console.log('Code analysis queued event received, adding to events list for troubleshooting');
+            this.addEvent({ type: 'code', subtype: 'analysis:queued', timestamp: new Date().toISOString(), data });
         });
         
         this.socket.on('code:analysis:accepted', (data) => {
-            // Don't add to events list
-            console.log('Code analysis accepted event received, not adding to events list');
+            // Add to events list for troubleshooting
+            console.log('Code analysis accepted event received, adding to events list for troubleshooting');
+            this.addEvent({ type: 'code', subtype: 'analysis:accepted', timestamp: new Date().toISOString(), data });
         });
         
         this.socket.on('code:analysis:start', (data) => {
-            // Don't add to events list
-            console.log('Code analysis start event received, not adding to events list');
+            // Add to events list for troubleshooting
+            console.log('Code analysis start event received, adding to events list for troubleshooting');
+            this.addEvent({ type: 'code', subtype: 'analysis:start', timestamp: new Date().toISOString(), data });
         });
         
         this.socket.on('code:analysis:complete', (data) => {
-            // Don't add to events list
-            console.log('Code analysis complete event received, not adding to events list');
+            // Add to events list for troubleshooting
+            console.log('Code analysis complete event received, adding to events list for troubleshooting');
+            this.addEvent({ type: 'code', subtype: 'analysis:complete', timestamp: new Date().toISOString(), data });
         });
         
         this.socket.on('code:analysis:error', (data) => {
-            // Don't add to events list
-            console.log('Code analysis error event received, not adding to events list');
+            // Add to events list for troubleshooting
+            console.log('Code analysis error event received, adding to events list for troubleshooting');
+            this.addEvent({ type: 'code', subtype: 'analysis:error', timestamp: new Date().toISOString(), data });
         });
         
         this.socket.on('code:file:start', (data) => {
-            // Don't add to events list
-            console.log('Code file start event received, not adding to events list');
+            // Add to events list for troubleshooting
+            console.log('Code file start event received, adding to events list for troubleshooting');
+            this.addEvent({ type: 'code', subtype: 'file:start', timestamp: new Date().toISOString(), data });
         });
         
         this.socket.on('code:node:found', (data) => {
-            // Don't add to events list
-            console.log('Code node found event received, not adding to events list');
+            // Add to events list for troubleshooting
+            console.log('Code node found event received, adding to events list for troubleshooting');
+            this.addEvent({ type: 'code', subtype: 'node:found', timestamp: new Date().toISOString(), data });
         });
         
         this.socket.on('code:analysis:progress', (data) => {
-            // Don't add to events list
-            console.log('Code analysis progress event received, not adding to events list');
+            // Add to events list for troubleshooting
+            console.log('Code analysis progress event received, adding to events list for troubleshooting');
+            this.addEvent({ type: 'code', subtype: 'analysis:progress', timestamp: new Date().toISOString(), data });
         });
 
         this.socket.on('history', (data) => {
@@ -1082,6 +1090,7 @@ class SocketClient {
         // 1. Hook events: { type: 'hook.pre_tool', timestamp: '...', data: {...} }
         // 2. Legacy events: { event: 'TestStart', timestamp: '...', ... }
         // 3. Standard events: { type: 'session', subtype: 'started', ... }
+        // 4. Normalized events: { type: 'code', subtype: 'progress', ... } - already normalized, keep as-is
 
         if (!eventData) {
             return eventData; // Return as-is if null/undefined
@@ -1089,8 +1098,26 @@ class SocketClient {
 
         let transformedEvent = { ...eventData };
 
+        // Check if event is already normalized (has both type and subtype as separate fields)
+        // This prevents double-transformation of events that were normalized on the backend
+        const isAlreadyNormalized = eventData.type && eventData.subtype && 
+                                   !eventData.type.includes('.') && 
+                                   !eventData.type.includes(':');
+
+        if (isAlreadyNormalized) {
+            // Event is already properly normalized from backend, just preserve it
+            // Store a composite originalEventName for display if needed
+            if (!transformedEvent.originalEventName) {
+                if (eventData.subtype === 'generic' || eventData.type === eventData.subtype) {
+                    transformedEvent.originalEventName = eventData.type;
+                } else {
+                    transformedEvent.originalEventName = `${eventData.type}.${eventData.subtype}`;
+                }
+            }
+            // Return early to avoid further transformation
+        }
         // Handle legacy format with 'event' field but no 'type'
-        if (!eventData.type && eventData.event) {
+        else if (!eventData.type && eventData.event) {
             // Map common event names to proper type/subtype
             const eventName = eventData.event;
             
@@ -1121,8 +1148,10 @@ class SocketClient {
             
             // Remove the 'event' field to avoid confusion
             delete transformedEvent.event;
+            // Store original event name for display purposes
+            transformedEvent.originalEventName = eventName;
         }
-        // Handle standard format with 'type' field
+        // Handle standard format with 'type' field that needs transformation
         else if (eventData.type) {
             const type = eventData.type;
             
@@ -1131,30 +1160,43 @@ class SocketClient {
                 const subtype = type.substring(5); // Remove 'hook.' prefix
                 transformedEvent.type = 'hook';
                 transformedEvent.subtype = subtype;
+                transformedEvent.originalEventName = type;
             }
             // Transform 'code:*' events to proper code type
+            // Handle multi-level subtypes like 'code:analysis:queued'
             else if (type.startsWith('code:')) {
                 transformedEvent.type = 'code';
-                transformedEvent.subtype = type.substring(5); // Remove 'code:' prefix
+                // Replace colons with underscores in subtype for consistency
+                const subtypePart = type.substring(5); // Remove 'code:' prefix
+                transformedEvent.subtype = subtypePart.replace(/:/g, '_');
+                transformedEvent.originalEventName = type;
             }
             // Transform other dotted types like 'session.started' -> type: 'session', subtype: 'started'
             else if (type.includes('.')) {
                 const [mainType, ...subtypeParts] = type.split('.');
                 transformedEvent.type = mainType;
                 transformedEvent.subtype = subtypeParts.join('.');
+                transformedEvent.originalEventName = type;
+            }
+            // Transform any remaining colon-separated types generically
+            else if (type.includes(':')) {
+                const parts = type.split(':', 2); // Split into max 2 parts
+                transformedEvent.type = parts[0];
+                // Replace any remaining colons with underscores in subtype
+                transformedEvent.subtype = parts.length > 1 ? parts[1].replace(/:/g, '_') : 'generic';
+                transformedEvent.originalEventName = type;
+            }
+            // If type doesn't need transformation but has no subtype, set a default
+            else if (!eventData.subtype) {
+                transformedEvent.subtype = 'generic';
+                transformedEvent.originalEventName = type;
             }
         }
         // If no type and no event field, mark as unknown
         else {
             transformedEvent.type = 'unknown';
             transformedEvent.subtype = '';
-        }
-
-        // Store original event name for display purposes (before any transformation)
-        if (!eventData.type && eventData.event) {
-            transformedEvent.originalEventName = eventData.event;
-        } else if (eventData.type) {
-            transformedEvent.originalEventName = eventData.type;
+            transformedEvent.originalEventName = 'unknown';
         }
 
         // Extract and flatten data fields to top level for dashboard compatibility

claude_mpm/dashboard/templates/index.html

@@ -389,12 +389,9 @@
                     <!-- Code Tab -->
                     <div class="tab-content" id="code-tab">
                         <div class="code-container">
-                            <!-- Compact header with all controls in one line -->
+                            <!-- Simplified header with controls -->
                             <div class="code-header-compact">
                                 <div class="header-left">
-                                    <input type="text" id="analysis-path" placeholder="Path" value="." class="path-input-compact">
-                                    <button id="analyze-code" class="btn-compact btn-primary">🔍</button>
-                                    <button id="cancel-analysis" class="btn-compact btn-danger" style="display: none;">✕</button>
                                     <button id="code-expand-all" class="btn-compact" title="Expand All">⊕</button>
                                     <button id="code-collapse-all" class="btn-compact" title="Collapse All">⊖</button>
                                     <button id="code-reset-zoom" class="btn-compact" title="Reset Zoom">⟲</button>
@@ -416,22 +413,20 @@
                                     <input type="text" id="code-search" placeholder="Search..." class="search-compact">
                                 </div>
                             </div>
-                            <!-- Collapsible advanced options -->
-                            <details class="code-advanced-options">
-                                <summary>Advanced Options</summary>
+                            <!-- Advanced options - visible by default -->
+                            <div class="code-advanced-options-visible">
                                 <div class="advanced-content">
                                     <div class="option-group">
                                         <label>Languages:</label>
                                         <label><input type="checkbox" class="language-checkbox" value="python" checked> Python</label>
                                         <label><input type="checkbox" class="language-checkbox" value="javascript" checked> JS</label>
-                                        <label><input type="checkbox" class="language-checkbox" value="typescript"> TS</label>
+                                        <label><input type="checkbox" class="language-checkbox" value="typescript" checked> TS</label>
                                     </div>
                                     <div class="option-group">
-                                        <label>Depth: <input type="number" id="max-depth" min="1" max="10" value="5" class="input-compact"></label>
-                                        <label>Ignore: <input type="text" id="ignore-patterns" placeholder="test*, *.spec.js" class="input-compact"></label>
+                                        <label>Ignore: <input type="text" id="ignore-patterns" placeholder="test*, *.spec.js, node_modules" class="input-compact" style="width: 200px;"></label>
                                     </div>
                                 </div>
-                            </details>
+                            </div>
                             <div id="code-tree-container" class="code-tree-container">
                                 <div id="code-tree"></div>
                                 <!-- Collapsible legend -->
@@ -515,14 +510,24 @@
     </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 timestamp cache busting -->
+    <script type="module">
+        // Add timestamp-based cache busting to all module imports
+        const timestamp = Date.now();
+        const modules = [
+            '/static/dist/dashboard.js',
+            '/static/dist/components/activity-tree.js',
+            '/static/dist/components/code-tree.js',
+            '/static/dist/components/code-viewer.js'
+        ];
+        
+        // Dynamically import each module with cache busting
+        modules.forEach(modulePath => {
+            const script = document.createElement('script');
+            script.type = 'module';
+            script.src = `${modulePath}?t=${timestamp}`;
+            document.body.appendChild(script);
+        });
+    </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
                 "---",
                 "",
             ]