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

claude_mpm/dashboard/templates/index.html

@@ -15,6 +15,9 @@
 
     <!-- External Dependencies -->
     <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
+    
+    <!-- D3.js for Activity Tree Visualization -->
+    <script src="https://d3js.org/d3.v7.min.js"></script>
 
     <!-- Syntax Highlighting - Prism.js -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
@@ -26,6 +29,8 @@
     <!-- Stylesheets -->
     <link rel="stylesheet" href="/static/css/dashboard.css">
     <link rel="stylesheet" href="/static/css/connection-status.css">
+    <link rel="stylesheet" href="/static/css/activity.css">
+    <link rel="stylesheet" href="/static/css/code-tree.css">
 
     <!-- Additional styles for file operations -->
     <style>
@@ -236,10 +241,12 @@
                 <div class="events-container">
                     <!-- Tab Navigation -->
                     <div class="tab-nav">
-                        <button class="tab-button active">📊 Events</button>
-                        <button class="tab-button">🤖 Agents</button>
-                        <button class="tab-button">🔧 Tools</button>
-                        <button class="tab-button">📁 Files</button>
+                        <button class="tab-button active" data-tab="events">📊 Events</button>
+                        <button class="tab-button" data-tab="agents">🤖 Agents</button>
+                        <button class="tab-button" data-tab="tools">🔧 Tools</button>
+                        <button class="tab-button" data-tab="files">📁 Files</button>
+                        <button class="tab-button" data-tab="activity">🌳 Activity</button>
+                        <button class="tab-button" data-tab="code">🧬 Code</button>
                     </div>
 
                     <!-- Events Tab -->
@@ -316,7 +323,165 @@
                             </div>
                         </div>
                     </div>
+
+                    <!-- Activity Tab -->
+                    <div class="tab-content" id="activity-tab">
+                        <div class="activity-container">
+                            <div class="activity-header">
+                                <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>
+                                        <option value="30min" selected>Last 30 Minutes</option>
+                                        <option value="10min">Last 10 Minutes</option>
+                                    </select>
+                                    <input type="text" id="activity-search" placeholder="Search nodes...">
+                                </div>
+                                <div class="activity-stats">
+                                    <span class="stat-item">
+                                        <span class="stat-label">Nodes:</span>
+                                        <span id="node-count" class="stat-value">0</span>
+                                    </span>
+                                    <span class="stat-item">
+                                        <span class="stat-label">Active:</span>
+                                        <span id="active-count" class="stat-value">0</span>
+                                    </span>
+                                    <span class="stat-item">
+                                        <span class="stat-label">Depth:</span>
+                                        <span id="tree-depth" class="stat-value">0</span>
+                                    </span>
+                                </div>
+                            </div>
+                            <div id="activity-tree-container" class="activity-tree-container">
+                                <div id="activity-tree"></div>
+                                <div class="tree-legend">
+                                    <div class="legend-item">
+                                        <span class="legend-icon pm">●</span>
+                                        <span>PM</span>
+                                    </div>
+                                    <div class="legend-item">
+                                        <span class="legend-icon todowrite">■</span>
+                                        <span>TodoWrite</span>
+                                    </div>
+                                    <div class="legend-item">
+                                        <span class="legend-icon agent">●</span>
+                                        <span>Agent</span>
+                                    </div>
+                                    <div class="legend-item">
+                                        <span class="legend-icon tool">●</span>
+                                        <span>Tool</span>
+                                    </div>
+                                    <div class="legend-item">
+                                        <span class="legend-icon file">●</span>
+                                        <span>File/Command</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="activity-breadcrumb" id="activity-breadcrumb">
+                                PM > Click a node to see path
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Code Tab -->
+                    <div class="tab-content" id="code-tab">
+                        <div class="code-container">
+                            <!-- Compact header with all controls in one line -->
+                            <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>
+                                    <button id="code-toggle-legend" class="btn-compact" title="Toggle Legend">ℹ️</button>
+                                </div>
+                                <div class="header-center">
+                                    <span class="stat-compact">📁 <span id="file-count">0</span></span>
+                                    <span class="stat-compact">🏛️ <span id="class-count">0</span></span>
+                                    <span class="stat-compact">⚡ <span id="function-count">0</span></span>
+                                    <span class="stat-compact">📝 <span id="line-count">0</span></span>
+                                </div>
+                                <div class="header-right">
+                                    <select id="language-filter" class="select-compact">
+                                        <option value="all">All</option>
+                                        <option value="python">Python</option>
+                                        <option value="javascript">JS</option>
+                                        <option value="typescript">TS</option>
+                                    </select>
+                                    <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>
+                                <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>
+                                    </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>
+                                    </div>
+                                </div>
+                            </details>
+                            <div id="code-tree-container" class="code-tree-container">
+                                <div id="code-tree"></div>
+                                <!-- Collapsible legend -->
+                                <div class="tree-legend collapsed" id="tree-legend" style="display: none;">
+                                    <button class="legend-close" onclick="document.getElementById('tree-legend').style.display='none'">✕</button>
+                                    <div class="legend-content">
+                                        <div class="legend-column">
+                                            <div class="legend-item"><span class="legend-icon">📦</span> Module</div>
+                                            <div class="legend-item"><span class="legend-icon">🏛️</span> Class</div>
+                                            <div class="legend-item"><span class="legend-icon">⚡</span> Function</div>
+                                            <div class="legend-item"><span class="legend-icon">🔧</span> Method</div>
+                                        </div>
+                                        <div class="legend-column">
+                                            <div class="legend-item"><span class="legend-icon complexity-low">●</span> Low</div>
+                                            <div class="legend-item"><span class="legend-icon complexity-medium">●</span> Med</div>
+                                            <div class="legend-item"><span class="legend-icon complexity-high">●</span> High</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="code-breadcrumb" id="code-breadcrumb">
+                                <div class="breadcrumb-ticker" id="breadcrumb-ticker">
+                                    <span id="breadcrumb-content">Ready to analyze...</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Code Viewer Modal -->
+    <div id="code-viewer-modal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="code-viewer-title">Code Viewer</h2>
+                <button class="close" onclick="closeCodeViewer()">&times;</button>
+            </div>
+            <div class="modal-body">
+                <pre><code id="code-viewer-content"></code></pre>
+            </div>
+            <div class="modal-footer">
+                <div class="code-viewer-info">
+                    <span id="code-viewer-path"></span>
+                    <span id="code-viewer-lines"></span>
+                    <span id="code-viewer-language"></span>
                 </div>
+                <button onclick="closeCodeViewer()">Close</button>
             </div>
         </div>
     </div>
@@ -338,11 +503,26 @@
                 <span class="footer-label">Branch:</span>
                 <span class="footer-value" id="footer-git-branch">Unknown</span>
             </div>
+            <!-- Analysis Status (hidden by default) -->
+            <div class="footer-item" id="footer-analysis-container" style="display: none;">
+                <span class="footer-divider">|</span>
+                <span class="footer-label">Analysis:</span>
+                <span class="footer-value" id="footer-analysis-status">
+                    <span class="analysis-progress" id="footer-analysis-progress"></span>
+                </span>
+            </div>
         </div>
     </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>
 </body>
 </html>

claude_mpm/hooks/claude_hooks/hook_handler.py

@@ -12,15 +12,21 @@ WHY service-oriented approach:
 - Easier testing and maintenance
 - Reduced file size from 1040 to ~400 lines
 - Clear service boundaries and responsibilities
+
+NOTE: Requires Claude Code version 1.0.92 or higher for proper hook support.
+Earlier versions do not support matcher-based hook configuration.
 """
 
 import json
 import os
+import re
 import select
 import signal
+import subprocess
 import sys
 import threading
 from datetime import datetime
+from typing import Optional, Tuple
 
 # Import extracted modules with fallback for direct execution
 try:
@@ -51,10 +57,27 @@ except ImportError:
         SubagentResponseProcessor,
     )
 
-# Debug mode is enabled by default for better visibility into hook processing
-# Set CLAUDE_MPM_HOOK_DEBUG=false to disable debug output
+"""
+Debug mode configuration for hook processing.
+
+WHY enabled by default: Hook processing can be complex and hard to debug.
+Having debug output available by default helps diagnose issues during development.
+Production deployments can disable via environment variable.
+
+Performance Impact: Debug logging adds ~5-10% overhead but provides crucial
+visibility into event flow, timing, and error conditions.
+"""
 DEBUG = os.environ.get("CLAUDE_MPM_HOOK_DEBUG", "true").lower() != "false"
 
+"""
+Conditional imports with graceful fallbacks for testing and modularity.
+
+WHY conditional imports:
+- EventBus is optional for basic hook functionality
+- Tests may not have full environment setup
+- Allows hooks to work in minimal configurations
+- Graceful degradation when dependencies unavailable
+"""
 # Import EventBus availability flag for backward compatibility with tests
 try:
     from claude_mpm.services.event_bus import EventBus
@@ -70,10 +93,125 @@ try:
 except ImportError:
     get_connection_pool = None
 
-# Global singleton handler instance
+"""
+Global singleton pattern for hook handler.
+
+WHY singleton:
+- Only one handler should process Claude Code events
+- Maintains consistent state across all hook invocations
+- Prevents duplicate event processing
+- Thread-safe initialization with lock
+
+GOTCHA: Must use get_global_handler() not direct access to avoid race conditions.
+"""
 _global_handler = None
 _handler_lock = threading.Lock()
 
+"""
+Version compatibility checking.
+
+WHY version checking:
+- Claude Code hook support was added in v1.0.92
+- Earlier versions don't support matcher-based configuration
+- Prevents confusing errors with unsupported versions
+
+Security: Version checking prevents execution on incompatible environments.
+"""
+MIN_CLAUDE_VERSION = "1.0.92"
+
+
+def check_claude_version() -> Tuple[bool, Optional[str]]:
+    """
+    Verify Claude Code version compatibility for hook support.
+
+    Executes 'claude --version' command to detect installed version and
+    compares against minimum required version for hook functionality.
+
+    Version Checking Logic:
+    1. Execute 'claude --version' with timeout
+    2. Parse version string using regex
+    3. Compare against MIN_CLAUDE_VERSION (1.0.92)
+    4. Return compatibility status and detected version
+
+    WHY this check is critical:
+    - Hook support was added in Claude Code v1.0.92
+    - Earlier versions don't understand matcher-based hooks
+    - Prevents cryptic errors from unsupported configurations
+    - Allows graceful fallback or user notification
+
+    Error Handling:
+    - Command timeout after 5 seconds
+    - Subprocess errors caught and logged
+    - Invalid version formats handled gracefully
+    - Returns (False, None) on any failure
+
+    Performance Notes:
+    - Subprocess call has ~100ms overhead
+    - Result should be cached by caller
+    - Only called during initialization
+
+    Returns:
+        Tuple[bool, Optional[str]]:
+            - bool: True if version is compatible
+            - str|None: Detected version string, None if detection failed
+
+    Examples:
+        >>> is_compatible, version = check_claude_version()
+        >>> if not is_compatible:
+        ...     print(f"Claude Code {version or 'unknown'} is not supported")
+    """
+    try:
+        # Try to detect Claude Code version
+        result = subprocess.run(
+            ["claude", "--version"],
+            capture_output=True,
+            text=True,
+            timeout=5,
+            check=False,
+        )
+
+        if result.returncode == 0:
+            version_text = result.stdout.strip()
+            # Extract version number (e.g., "1.0.92 (Claude Code)" -> "1.0.92")
+            match = re.match(r"^([\d\.]+)", version_text)
+            if match:
+                version = match.group(1)
+
+                # Compare versions
+                def parse_version(v: str):
+                    try:
+                        return [int(x) for x in v.split(".")]
+                    except (ValueError, AttributeError):
+                        return [0]
+
+                current = parse_version(version)
+                required = parse_version(MIN_CLAUDE_VERSION)
+
+                # Check if current version meets minimum
+                for i in range(max(len(current), len(required))):
+                    curr_part = current[i] if i < len(current) else 0
+                    req_part = required[i] if i < len(required) else 0
+
+                    if curr_part < req_part:
+                        if DEBUG:
+                            print(
+                                f"⚠️  Claude Code {version} does not support matcher-based hooks "
+                                f"(requires {MIN_CLAUDE_VERSION}+). Hook monitoring disabled.",
+                                file=sys.stderr,
+                            )
+                        return False, version
+                    if curr_part > req_part:
+                        return True, version
+
+                return True, version
+    except Exception as e:
+        if DEBUG:
+            print(
+                f"Warning: Could not detect Claude Code version: {e}", file=sys.stderr
+            )
+
+    return False, None
+
 
 class ClaudeHookHandler:
     """Refactored hook handler with service-oriented architecture.
@@ -111,6 +249,10 @@ class ClaudeHookHandler:
         self.delegation_requests = self.state_manager.delegation_requests
         self.pending_prompts = self.state_manager.pending_prompts
 
+        # Initialize git branch cache (used by event_handlers)
+        self._git_branch_cache = {}
+        self._git_branch_cache_time = {}
+
     def handle(self):
         """Process hook event with minimal overhead and timeout protection.
 
@@ -225,7 +367,16 @@ class ClaudeHookHandler:
                 # Empty or whitespace-only data
                 return None
 
-            return json.loads(event_data)
+            parsed = json.loads(event_data)
+            # Debug: Log the actual event format we receive
+            if DEBUG:
+                print(
+                    f"Received event with keys: {list(parsed.keys())}", file=sys.stderr
+                )
+                for key in ["hook_event_name", "event", "type", "event_type"]:
+                    if key in parsed:
+                        print(f"  {key} = '{parsed[key]}'", file=sys.stderr)
+            return parsed
         except (json.JSONDecodeError, ValueError) as e:
             if DEBUG:
                 print(f"Failed to parse hook event: {e}", file=sys.stderr)
@@ -245,7 +396,20 @@ class ClaudeHookHandler:
         Args:
             event: Hook event dictionary
         """
-        hook_type = event.get("hook_event_name", "unknown")
+        # Try multiple field names for compatibility
+        hook_type = (
+            event.get("hook_event_name")
+            or event.get("event")
+            or event.get("type")
+            or event.get("event_type")
+            or event.get("hook_event_type")
+            or "unknown"
+        )
+
+        # Log the actual event structure for debugging
+        if DEBUG and hook_type == "unknown":
+            print(f"Unknown event format, keys: {list(event.keys())}", file=sys.stderr)
+            print(f"Event sample: {str(event)[:200]}", file=sys.stderr)
 
         # Map event types to handlers
         event_handlers = {
@@ -316,6 +480,19 @@ def main():
     global _global_handler
     _continue_printed = False  # Track if we've already printed continue
 
+    # Check Claude Code version compatibility first
+    is_compatible, version = check_claude_version()
+    if not is_compatible:
+        # Version incompatible - just continue without processing
+        # This prevents errors on older Claude Code versions
+        if DEBUG and version:
+            print(
+                f"Skipping hook processing due to version incompatibility ({version})",
+                file=sys.stderr,
+            )
+        print(json.dumps({"action": "continue"}))
+        sys.exit(0)
+
     def cleanup_handler(signum=None, frame=None):
         """Cleanup handler for signals and exit."""
         nonlocal _continue_printed