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

claude_mpm/d2/src/lib/socketio.js

@@ -0,0 +1,144 @@
+/**
+ * Socket.IO Client Wrapper
+ *
+ * Manages connection to the Claude MPM Socket.IO server with:
+ * - Auto-reconnect with exponential backoff
+ * - Connection state management
+ * - Event buffering during disconnection
+ */
+
+import { io } from 'socket.io-client';
+
+export class SocketIOClient {
+  constructor(url = 'http://localhost:8765', options = {}) {
+    this.url = url;
+    this.socket = null;
+    this.connected = false;
+    this.listeners = new Map();
+
+    const defaultOptions = {
+      transports: ['websocket', 'polling'],
+      reconnection: true,
+      reconnectionDelay: 1000,
+      reconnectionDelayMax: 5000,
+      reconnectionAttempts: Infinity,
+      timeout: 20000,
+      pingInterval: 25000,
+      pingTimeout: 20000,
+    };
+
+    this.options = { ...defaultOptions, ...options };
+  }
+
+  connect() {
+    if (this.socket) {
+      return this.socket;
+    }
+
+    this.socket = io(this.url, this.options);
+
+    // Connection events
+    this.socket.on('connect', () => {
+      this.connected = true;
+      this.emit('connection_status', { connected: true, reconnecting: false });
+    });
+
+    this.socket.on('disconnect', () => {
+      this.connected = false;
+      this.emit('connection_status', { connected: false, reconnecting: false });
+    });
+
+    this.socket.on('reconnect_attempt', () => {
+      this.emit('connection_status', { connected: false, reconnecting: true });
+    });
+
+    this.socket.on('reconnect', () => {
+      this.connected = true;
+      this.emit('connection_status', { connected: true, reconnecting: false });
+    });
+
+    this.socket.on('connect_error', (error) => {
+      console.error('Socket.IO connection error:', error);
+      this.emit('connection_error', error);
+    });
+
+    return this.socket;
+  }
+
+  disconnect() {
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket = null;
+      this.connected = false;
+    }
+  }
+
+  on(event, callback) {
+    if (!this.socket) {
+      this.connect();
+    }
+
+    // Store listener for cleanup
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, []);
+    }
+    this.listeners.get(event).push(callback);
+
+    this.socket.on(event, callback);
+  }
+
+  off(event, callback) {
+    if (this.socket) {
+      this.socket.off(event, callback);
+    }
+
+    // Remove from listeners
+    if (this.listeners.has(event)) {
+      const callbacks = this.listeners.get(event);
+      const index = callbacks.indexOf(callback);
+      if (index > -1) {
+        callbacks.splice(index, 1);
+      }
+    }
+  }
+
+  emit(event, data) {
+    if (this.socket) {
+      this.socket.emit(event, data);
+    }
+  }
+
+  isConnected() {
+    return this.connected;
+  }
+
+  cleanup() {
+    // Remove all listeners
+    for (const [event, callbacks] of this.listeners.entries()) {
+      for (const callback of callbacks) {
+        this.socket?.off(event, callback);
+      }
+    }
+    this.listeners.clear();
+
+    // Disconnect
+    this.disconnect();
+  }
+}
+
+// Singleton instance
+let socketInstance = null;
+
+export function getSocketClient(url, options) {
+  if (!socketInstance) {
+    socketInstance = new SocketIOClient(url, options);
+  }
+  return socketInstance;
+}
+
+export function destroySocketClient() {
+  if (socketInstance) {
+    socketInstance.cleanup();
+    socketInstance = null;
+  }
+}

claude_mpm/d2/src/main.js

@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+  target: document.getElementById('app')
+});
+
+export default app;

claude_mpm/d2/src/stores/events.js

@@ -0,0 +1,114 @@
+/**
+ * Events Store (Traditional Svelte Stores)
+ *
+ * Manages incoming Claude Code hook events with:
+ * - Event buffering (last 1000 events)
+ * - Automatic filtering capability
+ * - Event statistics
+ *
+ * IMPORTANT: This file uses traditional stores instead of Svelte 5 runes
+ * because the store is created at module-load time, outside component context.
+ * Runes ($state, $derived) can only be used inside components.
+ */
+
+import { writable, derived } from 'svelte/store';
+
+const MAX_EVENTS = 1000;
+
+function createEventsStore() {
+  // Use writable stores instead of $state
+  const events = writable([]);
+  const totalReceived = writable(0);
+
+  // Use derived stores instead of $derived
+  const count = derived(events, ($events) => $events.length);
+  const isEmpty = derived(events, ($events) => $events.length === 0);
+
+  // Event type counts
+  const eventTypeCounts = derived(events, ($events) => {
+    const counts = {};
+    for (const event of $events) {
+      const type = event.type || 'unknown';
+      counts[type] = (counts[type] || 0) + 1;
+    }
+    return counts;
+  });
+
+  function addEvent(event) {
+    events.update(($events) => {
+      // Add timestamp if not present
+      if (!event.timestamp) {
+        event.timestamp = new Date().toISOString();
+      }
+
+      // Add internal ID for React key stability
+      let currentTotal;
+      totalReceived.subscribe((val) => { currentTotal = val; })();
+      event._id = `${event.timestamp}-${currentTotal}`;
+
+      // Add to beginning of array (newest first)
+      const newEvents = [event, ...$events];
+
+      // Trim to max size
+      return newEvents.length > MAX_EVENTS
+        ? newEvents.slice(0, MAX_EVENTS)
+        : newEvents;
+    });
+
+    // Increment total
+    totalReceived.update((n) => n + 1);
+  }
+
+  function addEvents(newEvents) {
+    for (const event of newEvents) {
+      addEvent(event);
+    }
+  }
+
+  function clear() {
+    events.set([]);
+    totalReceived.set(0);
+  }
+
+  function filterByType(type) {
+    let result;
+    events.subscribe(($events) => {
+      result = $events.filter((e) => e.type === type);
+    })();
+    return result;
+  }
+
+  function filterBySource(source) {
+    let result;
+    events.subscribe(($events) => {
+      result = $events.filter((e) => e.source === source);
+    })();
+    return result;
+  }
+
+  function filterBySubtype(subtype) {
+    let result;
+    events.subscribe(($events) => {
+      result = $events.filter((e) => e.subtype === subtype);
+    })();
+    return result;
+  }
+
+  return {
+    // Export stores with subscribe method for Svelte auto-subscription
+    events: { subscribe: events.subscribe },
+    count: { subscribe: count.subscribe },
+    isEmpty: { subscribe: isEmpty.subscribe },
+    totalReceived: { subscribe: totalReceived.subscribe },
+    eventTypeCounts: { subscribe: eventTypeCounts.subscribe },
+    // Export methods
+    addEvent,
+    addEvents,
+    clear,
+    filterByType,
+    filterBySource,
+    filterBySubtype
+  };
+}
+
+export const eventsStore = createEventsStore();

claude_mpm/d2/src/stores/socket.js

@@ -0,0 +1,108 @@
+/**
+ * Socket.IO Store (Traditional Svelte Stores)
+ *
+ * Manages Socket.IO connection state using traditional Svelte stores.
+ * Uses writable and derived stores for module-level reactivity.
+ *
+ * IMPORTANT: This file uses traditional stores instead of Svelte 5 runes
+ * because the store is created at module-load time, outside component context.
+ * Runes ($state, $derived) can only be used inside components.
+ */
+
+import { writable, derived } from 'svelte/store';
+import { getSocketClient } from '../lib/socketio.js';
+
+// Default configuration (fallbacks if not running in browser)
+const DEFAULT_PORT = 8765;
+const DEFAULT_HOST = 'localhost';
+
+// Auto-detect from current page URL (browser environment)
+function getAutoDetectedPort() {
+  if (typeof window !== 'undefined' && window.location.port) {
+    return parseInt(window.location.port, 10);
+  }
+  return DEFAULT_PORT;
+}
+
+function getAutoDetectedHost() {
+  if (typeof window !== 'undefined' && window.location.hostname) {
+    return window.location.hostname;
+  }
+  return DEFAULT_HOST;
+}
+
+function createSocketStore() {
+  // Use writable stores instead of $state
+  const connected = writable(false);
+  const reconnecting = writable(false);
+  const port = writable(getAutoDetectedPort());
+  const host = writable(getAutoDetectedHost());
+
+  let client = null;
+
+  // Use derived stores instead of $derived
+  const statusText = derived(
+    [connected, reconnecting],
+    ([$connected, $reconnecting]) =>
+      $connected ? 'Connected' : $reconnecting ? 'Reconnecting...' : 'Disconnected'
+  );
+
+  const statusColor = derived(
+    [connected, reconnecting],
+    ([$connected, $reconnecting]) =>
+      $connected ? '#22c55e' : $reconnecting ? '#eab308' : '#ef4444'
+  );
+
+  const url = derived(
+    [host, port],
+    ([$host, $port]) => `http://${$host}:${$port}`
+  );
+
+  function connect(customHost = null, customPort = null) {
+    // Use auto-detected values if no custom values provided
+    const finalHost = customHost || getAutoDetectedHost();
+    const finalPort = customPort || getAutoDetectedPort();
+
+    host.set(finalHost);
+    port.set(finalPort);
+
+    client = getSocketClient(`http://${finalHost}:${finalPort}`);
+
+    // Listen for connection status changes
+    client.on('connection_status', (status) => {
+      connected.set(status.connected);
+      reconnecting.set(status.reconnecting);
+    });
+
+    client.connect();
+  }
+
+  function disconnect() {
+    if (client) {
+      client.disconnect();
+      connected.set(false);
+      reconnecting.set(false);
+    }
+  }
+
+  function getClient() {
+    return client;
+  }
+
+  return {
+    // Export stores with subscribe method for Svelte auto-subscription
+    connected: { subscribe: connected.subscribe },
+    reconnecting: { subscribe: reconnecting.subscribe },
+    port: { subscribe: port.subscribe },
+    host: { subscribe: host.subscribe },
+    statusText: { subscribe: statusText.subscribe },
+    statusColor: { subscribe: statusColor.subscribe },
+    url: { subscribe: url.subscribe },
+    // Export methods
+    connect,
+    disconnect,
+    getClient
+  };
+}
+
+export const socketStore = createSocketStore();

claude_mpm/d2/src/stores/theme.js

@@ -0,0 +1,65 @@
+/**
+ * Theme Store (Traditional Svelte Stores)
+ *
+ * Manages light/dark theme state with localStorage persistence.
+ * Uses traditional Svelte stores for module-level reactivity.
+ *
+ * IMPORTANT: This file uses traditional stores instead of Svelte 5 runes
+ * because the store is created at module-load time, outside component context.
+ * Runes ($state, $derived) can only be used inside components.
+ */
+
+import { writable } from 'svelte/store';
+
+// Get stored theme or default to light
+function getStoredTheme() {
+  if (typeof window === 'undefined') {
+    return 'light';
+  }
+  return localStorage.getItem('theme') || 'light';
+}
+
+function createThemeStore() {
+  const { subscribe, set, update } = writable(getStoredTheme());
+
+  return {
+    subscribe,
+    toggle: () => {
+      update(current => {
+        const newTheme = current === 'light' ? 'dark' : 'light';
+
+        // Persist to localStorage
+        if (typeof window !== 'undefined') {
+          localStorage.setItem('theme', newTheme);
+          document.documentElement.setAttribute('data-theme', newTheme);
+        }
+
+        return newTheme;
+      });
+    },
+    set: (value) => {
+      // Validate theme value
+      if (value !== 'light' && value !== 'dark') {
+        console.error(`Invalid theme value: ${value}. Using 'light' instead.`);
+        value = 'light';
+      }
+
+      // Persist to localStorage
+      if (typeof window !== 'undefined') {
+        localStorage.setItem('theme', value);
+        document.documentElement.setAttribute('data-theme', value);
+      }
+
+      set(value);
+    },
+    initialize: () => {
+      // Set initial theme on document
+      if (typeof window !== 'undefined') {
+        const theme = getStoredTheme();
+        document.documentElement.setAttribute('data-theme', theme);
+      }
+    }
+  };
+}
+
+export const themeStore = createThemeStore();

claude_mpm/d2/svelte.config.js

@@ -0,0 +1,12 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  compilerOptions: {
+    // Enable run-time checks for development
+    dev: process.env.NODE_ENV !== 'production'
+  }
+}

claude_mpm/d2/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+export default defineConfig({
+  plugins: [svelte()],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true
+  },
+  server: {
+    port: 5173,
+    strictPort: false
+  },
+  base: '/d2/'
+})

claude_mpm/dashboard/.claude-mpm/memories/README.md

@@ -0,0 +1,36 @@
+# Agent Memory System
+
+## Purpose
+Each agent maintains project-specific knowledge in these files. Agents read their memory file before tasks and update it when they learn something new.
+
+## Manual Editing
+Feel free to edit these files to:
+- Add project-specific guidelines
+- Remove outdated information  
+- Reorganize for better clarity
+- Add domain-specific knowledge
+
+## Memory Limits
+- Max file size: 8KB (~2000 tokens)
+- Max sections: 10
+- Max items per section: 15
+- Files auto-truncate when limits exceeded
+
+## File Format
+Standard markdown with structured sections. Agents expect:
+- Project Architecture
+- Implementation Guidelines
+- Common Mistakes to Avoid
+- Current Technical Context
+
+## How It Works
+1. Agents read their memory file before starting tasks
+2. Agents add learnings during or after task completion
+3. Files automatically enforce size limits
+4. Developers can manually edit for accuracy
+
+## Memory File Lifecycle
+- Created automatically when agent first runs
+- Updated through hook system after delegations
+- Manually editable by developers
+- Version controlled with project

claude_mpm/dashboard/BUILD_NUMBER

@@ -0,0 +1 @@
+2

claude_mpm/dashboard/README.md

@@ -0,0 +1,121 @@
+# Claude MPM Web Dashboard
+
+This directory contains the modular web dashboard for Claude MPM monitoring and management.
+
+## Structure
+
+```
+src/claude_mpm/dashboard/
+├── static/
+│   ├── css/
+│   │   └── dashboard.css          # Main stylesheet
+│   └── js/
+│       ├── socket-client.js       # Socket.IO connection management
+│       ├── dashboard.js          # Main dashboard application
+│       └── components/
+│           ├── event-viewer.js    # Event display and filtering
+│           ├── module-viewer.js   # Event detail viewer
+│           └── session-manager.js # Session management
+├── templates/
+│   └── index.html               # Main dashboard HTML
+├── index.html                   # Root index with redirect
+├── test_dashboard.html          # Test version for verification
+└── README.md                    # This file
+```
+
+## Components
+
+### SocketClient (`socket-client.js`)
+- Manages WebSocket connections to the Claude MPM server
+- Handles event reception and processing
+- Provides callbacks for connection state changes
+- Maintains event history and session tracking
+
+### EventViewer (`components/event-viewer.js`)
+- Displays events in a filterable list
+- Supports search, type filtering, and session filtering
+- Handles event selection and keyboard navigation
+- Updates metrics display (total events, events per minute, etc.)
+
+### ModuleViewer (`components/module-viewer.js`)
+- Shows detailed information about selected events
+- Provides structured views for different event types
+- Displays raw JSON data for debugging
+- Organizes events by class/category
+
+### SessionManager (`components/session-manager.js`)
+- Manages session selection and filtering
+- Updates session dropdown with available sessions
+- Tracks current active session
+- Updates footer information
+
+### Dashboard (`dashboard.js`)
+- Main application coordinator
+- Handles tab switching between Events, Agents, Tools, and Files
+- Manages component interactions
+- Provides global functions for backward compatibility
+
+## Features
+
+### File-Centric Files Tab
+The Files tab now shows a file-centric view where:
+- Each file appears only once in the list
+- Files show read/write icons based on operations performed
+- Most recently accessed files appear at the bottom
+- Clicking a file shows all operations performed on it with timestamps and agent information
+
+### Tab Organization
+- **Events**: All events with filtering and search
+- **Agents**: Agent-specific events and operations
+- **Tools**: Tool usage and parameters
+- **Files**: File operations organized by file path
+
+### Enhanced Event Details
+- Structured views for different event types
+- Todo checklists with status indicators
+- Agent and tool information
+- Session tracking and filtering
+
+## Usage
+
+### Development
+For development and testing, use `test_dashboard.html` which includes module verification.
+
+### Production
+Use `templates/dashboard.html` as the main template, ensuring all static files are served correctly.
+
+### Integration
+The dashboard can be integrated into a Flask/FastAPI application by serving the static files and using the template.
+
+## Migration from Original
+
+The original monolithic `claude_mpm_socketio_dashboard.html` has been replaced with a modular structure:
+
+1. **CSS**: Extracted to `static/css/dashboard.css`
+2. **JavaScript**: Split into logical modules in `static/js/`
+3. **HTML**: Clean template in `templates/dashboard.html`
+
+All original functionality has been preserved while improving:
+- Code organization and maintainability
+- Module reusability
+- Easier debugging and development
+- Better separation of concerns
+
+## Backward Compatibility
+
+Global functions are maintained for compatibility:
+- `connectSocket()`
+- `disconnectSocket()`
+- `clearEvents()`
+- `exportEvents()`
+- `clearSelection()`
+- `switchTab(tabName)`
+
+## Browser Support
+
+Requires modern browsers with support for:
+- ES6 Classes
+- Fetch API
+- Custom Events
+- CSS Grid/Flexbox
+- Socket.IO 4.x

claude_mpm/dashboard/VERSION

@@ -0,0 +1 @@
+4.1.0