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

claude_mpm/d2/src/components/Header.svelte

@@ -0,0 +1,153 @@
+<script>
+  import { themeStore } from '../stores/theme.js';
+
+  // Use Svelte 5 $props() for type-safe props
+  let { statusText, statusColor, port } = $props();
+
+  function handleThemeToggle() {
+    themeStore.toggle();
+  }
+</script>
+
+<header class="header">
+  <div class="header-content">
+    <div class="title">
+      <h1>Claude MPM Dashboard</h1>
+      <span class="version">v2.0</span>
+    </div>
+
+    <div class="header-actions">
+      <div class="connection-status">
+        <div class="status-indicator" style="background: {statusColor}"></div>
+        <span class="status-text">{statusText}</span>
+        <span class="port">:{port}</span>
+      </div>
+
+      <button class="theme-toggle" onclick={handleThemeToggle} aria-label="Toggle theme">
+        {#if $themeStore === 'light'}
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+          </svg>
+        {:else}
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+          </svg>
+        {/if}
+      </button>
+    </div>
+  </div>
+</header>
+
+<style>
+  .header {
+    height: 60px;
+    background: linear-gradient(135deg, var(--header-bg-start) 0%, var(--header-bg-end) 100%);
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    padding: 0 24px;
+    box-shadow: var(--shadow-md);
+  }
+
+  .header-content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .title {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+  }
+
+  h1 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    letter-spacing: -0.02em;
+  }
+
+  .version {
+    font-size: 12px;
+    color: var(--text-tertiary);
+    font-weight: 500;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .connection-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    background: var(--overlay-bg);
+    border-radius: 6px;
+    border: 1px solid var(--overlay-border);
+  }
+
+  .status-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    box-shadow: 0 0 8px currentColor;
+    transition: background 0.3s ease;
+  }
+
+  .status-text {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+
+  .port {
+    font-size: 12px;
+    color: var(--text-tertiary);
+    font-family: 'Monaco', 'Menlo', monospace;
+  }
+
+  .theme-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 8px;
+    background: var(--overlay-bg);
+    border: 1px solid var(--overlay-border);
+    border-radius: 6px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .theme-toggle:hover {
+    background: var(--tab-hover-bg);
+    border-color: var(--border-color);
+  }
+
+  .theme-toggle:active {
+    transform: scale(0.95);
+  }
+
+  .theme-toggle svg {
+    transition: transform 0.3s ease;
+  }
+
+  .theme-toggle:hover svg {
+    transform: rotate(15deg);
+  }
+</style>

claude_mpm/d2/src/components/MainContent.svelte

@@ -0,0 +1,74 @@
+<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

@@ -0,0 +1,85 @@
+<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

@@ -0,0 +1,326 @@
+<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>