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

claude_mpm/d2/src/components/MainContent.svelte

@@ -1,74 +0,0 @@
-<script>
-  import EventsTab from './tabs/EventsTab.svelte';
-
-  // Use Svelte 5 $props()
-  let { activeTab } = $props();
-</script>
-
-<main class="main-content">
-  {#if activeTab === 'events'}
-    <EventsTab />
-  {:else if activeTab === 'agents'}
-    <div class="placeholder">
-      <div class="placeholder-icon">🤖</div>
-      <h3>Agents</h3>
-      <p>Agent monitoring will be displayed here</p>
-    </div>
-  {:else if activeTab === 'files'}
-    <div class="placeholder">
-      <div class="placeholder-icon">📁</div>
-      <h3>Files</h3>
-      <p>File operations will be displayed here</p>
-    </div>
-  {:else if activeTab === 'tools'}
-    <div class="placeholder">
-      <div class="placeholder-icon">🔧</div>
-      <h3>Tools</h3>
-      <p>Tool execution will be displayed here</p>
-    </div>
-  {:else if activeTab === 'activity'}
-    <div class="placeholder">
-      <div class="placeholder-icon">📊</div>
-      <h3>Activity</h3>
-      <p>Activity metrics will be displayed here</p>
-    </div>
-  {/if}
-</main>
-
-<style>
-  .main-content {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .placeholder {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-secondary);
-    text-align: center;
-    padding: 40px;
-  }
-
-  .placeholder-icon {
-    font-size: 64px;
-    margin-bottom: 24px;
-    opacity: 0.5;
-  }
-
-  .placeholder h3 {
-    font-size: 24px;
-    font-weight: 600;
-    color: var(--text-secondary);
-    margin-bottom: 8px;
-  }
-
-  .placeholder p {
-    font-size: 14px;
-    color: var(--text-tertiary);
-  }
-</style>

claude_mpm/d2/src/components/Sidebar.svelte

@@ -1,85 +0,0 @@
-<script>
-  // Use Svelte 5 $bindable() for two-way binding
-  let { activeTab = $bindable('events') } = $props();
-
-  const tabs = [
-    { id: 'events', label: 'Events', icon: '📡' },
-    { id: 'agents', label: 'Agents', icon: '🤖' },
-    { id: 'files', label: 'Files', icon: '📁' },
-    { id: 'tools', label: 'Tools', icon: '🔧' },
-    { id: 'activity', label: 'Activity', icon: '📊' }
-  ];
-
-  function selectTab(tabId) {
-    activeTab = tabId;
-  }
-</script>
-
-<aside class="sidebar">
-  <nav class="nav">
-    {#each tabs as tab}
-      <button
-        class="nav-item"
-        class:active={activeTab === tab.id}
-        onclick={() => selectTab(tab.id)}
-      >
-        <span class="icon">{tab.icon}</span>
-        <span class="label">{tab.label}</span>
-      </button>
-    {/each}
-  </nav>
-</aside>
-
-<style>
-  .sidebar {
-    width: 200px;
-    background: var(--sidebar-bg);
-    border-right: 1px solid var(--border-color);
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-  }
-
-  .nav {
-    display: flex;
-    flex-direction: column;
-    padding: 16px 0;
-  }
-
-  .nav-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 20px;
-    border: none;
-    background: transparent;
-    color: var(--text-secondary);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-align: left;
-    font-size: 14px;
-    font-weight: 500;
-    border-left: 3px solid transparent;
-  }
-
-  .nav-item:hover {
-    background: var(--tab-hover-bg);
-    color: var(--text-primary);
-  }
-
-  .nav-item.active {
-    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
-    color: var(--accent-color);
-    border-left-color: var(--accent-color);
-  }
-
-  .icon {
-    font-size: 16px;
-    width: 20px;
-    text-align: center;
-  }
-
-  .label {
-    flex: 1;
-  }
-</style>

claude_mpm/d2/src/components/tabs/EventsTab.svelte

@@ -1,326 +0,0 @@
-<script>
-  import { eventsStore } from '../../stores/events.js';
-
-  // Destructure individual stores from eventsStore
-  const { events, count, isEmpty, totalReceived } = eventsStore;
-
-  let expandedEventId = $state(null);
-  let scrollContainer = $state(null);
-  let previousEventCount = $state(0);
-
-  // $effect at top-level (correct Svelte 5 Runes usage)
-  // Effects run during component initialization and re-run when dependencies change
-  // The scrollContainer null-check protects against initial undefined state
-  $effect(() => {
-    // Access the reactive store value
-    const currentCount = $count;
-
-    // Only scroll if events were added AND container exists (not on initial load or clear)
-    if (scrollContainer && currentCount > 0 && currentCount > previousEventCount) {
-      // Use requestAnimationFrame for smooth scrolling
-      requestAnimationFrame(() => {
-        if (scrollContainer) {
-          scrollContainer.scrollTop = 0;
-        }
-      });
-    }
-
-    // Update previous count for next comparison
-    previousEventCount = currentCount;
-  });
-
-  function toggleExpand(eventId) {
-    expandedEventId = expandedEventId === eventId ? null : eventId;
-  }
-
-  function getEventColor(event) {
-    const sourceColors = {
-      'hook': '#3b82f6',
-      'system': '#10b981',
-      'api': '#f59e0b'
-    };
-    return sourceColors[event.source] || '#6b7280';
-  }
-
-  function formatTimestamp(timestamp) {
-    try {
-      const date = new Date(timestamp);
-      return date.toLocaleTimeString('en-US', {
-        hour12: false,
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
-        fractionalSecondDigits: 3
-      });
-    } catch {
-      return timestamp;
-    }
-  }
-
-  function formatEventData(data) {
-    return JSON.stringify(data, null, 2);
-  }
-
-  function getEventSummary(event) {
-    // Create a readable summary from event data
-    const { type, subtype, data } = event;
-
-    if (subtype) {
-      return `${type} → ${subtype}`;
-    }
-
-    return type || 'unknown';
-  }
-</script>
-
-<div class="events-tab">
-  <div class="events-header">
-    <h2>Events Timeline</h2>
-    <div class="stats">
-      <span class="stat">
-        Total: <strong>{$totalReceived}</strong>
-      </span>
-      <span class="stat">
-        Displayed: <strong>{$count}</strong>
-      </span>
-      {#if $count > 0}
-        <button class="clear-btn" onclick={() => eventsStore.clear()}>
-          Clear
-        </button>
-      {/if}
-    </div>
-  </div>
-
-  <div class="events-list" bind:this={scrollContainer}>
-    {#if $isEmpty}
-      <div class="empty-state">
-        <div class="empty-icon">📡</div>
-        <p>Waiting for events...</p>
-        <p class="empty-hint">Events will appear here as they are received from Socket.IO</p>
-      </div>
-    {:else}
-      {#each $events as event (event._id)}
-        <div class="event-item">
-          <button
-            class="event-header"
-            onclick={() => toggleExpand(event._id)}
-            aria-expanded={expandedEventId === event._id}
-          >
-            <div class="event-meta">
-              <span class="event-time">{formatTimestamp(event.timestamp)}</span>
-              <span
-                class="event-source"
-                style="background: {getEventColor(event)}20; color: {getEventColor(event)}; border-color: {getEventColor(event)}40"
-              >
-                {event.source || 'unknown'}
-              </span>
-            </div>
-            <div class="event-summary">
-              {getEventSummary(event)}
-            </div>
-            <span class="expand-icon" class:expanded={expandedEventId === event._id}>
-              {expandedEventId === event._id ? '▼' : '▶'}
-            </span>
-          </button>
-
-          {#if expandedEventId === event._id}
-            <div class="event-details">
-              <pre><code>{formatEventData(event)}</code></pre>
-            </div>
-          {/if}
-        </div>
-      {/each}
-    {/if}
-  </div>
-</div>
-
-<style>
-  .events-tab {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: var(--bg-primary);
-  }
-
-  .events-header {
-    padding: 20px 24px;
-    border-bottom: 1px solid var(--border-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: var(--bg-secondary);
-  }
-
-  h2 {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--text-primary);
-  }
-
-  .stats {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-  }
-
-  .stat {
-    font-size: 13px;
-    color: var(--text-tertiary);
-  }
-
-  .stat strong {
-    color: var(--text-primary);
-    font-weight: 600;
-  }
-
-  .clear-btn {
-    padding: 6px 12px;
-    background: color-mix(in srgb, var(--error-color) 10%, transparent);
-    color: var(--error-color);
-    border: 1px solid color-mix(in srgb, var(--error-color) 30%, transparent);
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .clear-btn:hover {
-    background: color-mix(in srgb, var(--error-color) 20%, transparent);
-    border-color: color-mix(in srgb, var(--error-color) 50%, transparent);
-  }
-
-  .events-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px;
-  }
-
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: var(--text-secondary);
-    text-align: center;
-  }
-
-  .empty-icon {
-    font-size: 48px;
-    margin-bottom: 16px;
-    opacity: 0.5;
-  }
-
-  .empty-state p {
-    font-size: 14px;
-    margin: 4px 0;
-  }
-
-  .empty-hint {
-    font-size: 12px;
-    color: var(--text-tertiary);
-  }
-
-  .event-item {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    margin-bottom: 12px;
-    overflow: hidden;
-    transition: all 0.2s ease;
-  }
-
-  .event-item:hover {
-    border-color: var(--border-color-light);
-    box-shadow: var(--shadow-md);
-  }
-
-  .event-header {
-    width: 100%;
-    padding: 12px 16px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    cursor: pointer;
-    user-select: none;
-    background: transparent;
-    border: none;
-    color: inherit;
-    font: inherit;
-    text-align: left;
-  }
-
-  .event-meta {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 200px;
-  }
-
-  .event-time {
-    font-family: 'Monaco', 'Menlo', monospace;
-    font-size: 12px;
-    color: var(--text-tertiary);
-  }
-
-  .event-source {
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    border: 1px solid;
-  }
-
-  .event-summary {
-    flex: 1;
-    font-size: 13px;
-    color: var(--text-primary);
-    font-weight: 500;
-  }
-
-  .expand-icon {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-secondary);
-    border-radius: 4px;
-    transition: all 0.2s ease;
-    font-size: 10px;
-  }
-
-  .event-header:hover .expand-icon {
-    background: var(--overlay-bg);
-    color: var(--text-tertiary);
-  }
-
-  .expand-icon.expanded {
-    color: var(--accent-color);
-  }
-
-  .event-details {
-    padding: 16px;
-    background: var(--bg-primary);
-    border-top: 1px solid var(--border-color);
-  }
-
-  .event-details pre {
-    margin: 0;
-    padding: 12px;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    overflow-x: auto;
-    font-size: 12px;
-    line-height: 1.5;
-  }
-
-  .event-details code {
-    color: var(--success-color);
-    font-family: 'Monaco', 'Menlo', monospace;
-  }
-</style>

claude_mpm/d2/src/lib/socketio.js

@@ -1,144 +0,0 @@
-/**
- * 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

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