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

claude_mpm/dashboard/react/components/DataInspector/DataInspector.tsx

@@ -0,0 +1,273 @@
+import React, { useState, useMemo } from 'react';
+import styles from './DataInspector.module.css';
+
+interface DataInspectorProps {
+  data: any;
+  maxHeight?: string;
+  searchable?: boolean;
+}
+
+interface TreeNode {
+  key: string;
+  value: any;
+  type: 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null' | 'undefined';
+  children?: TreeNode[];
+  path: string;
+  level: number;
+}
+
+function getValueType(value: any): TreeNode['type'] {
+  if (value === null) return 'null';
+  if (value === undefined) return 'undefined';
+  if (Array.isArray(value)) return 'array';
+  return typeof value as TreeNode['type'];
+}
+
+function buildTree(data: any, path: string = '', level: number = 0): TreeNode[] {
+  if (data === null || data === undefined || typeof data !== 'object') {
+    return [];
+  }
+
+  const nodes: TreeNode[] = [];
+
+  Object.entries(data).forEach(([key, value]) => {
+    const currentPath = path ? `${path}.${key}` : key;
+    const type = getValueType(value);
+
+    const node: TreeNode = {
+      key,
+      value,
+      type,
+      path: currentPath,
+      level,
+      children: type === 'object' || type === 'array' ? buildTree(value, currentPath, level + 1) : undefined
+    };
+
+    nodes.push(node);
+  });
+
+  return nodes;
+}
+
+function formatValue(value: any, type: TreeNode['type']): string {
+  switch (type) {
+    case 'string':
+      return `"${value}"`;
+    case 'number':
+      return String(value);
+    case 'boolean':
+      return String(value);
+    case 'null':
+      return 'null';
+    case 'undefined':
+      return 'undefined';
+    case 'array':
+      return `Array(${value.length})`;
+    case 'object':
+      const keys = Object.keys(value || {});
+      return `Object(${keys.length})`;
+    default:
+      return String(value);
+  }
+}
+
+function TreeNodeComponent({ node, expandedPaths, onToggle, searchTerm }: {
+  node: TreeNode;
+  expandedPaths: Set<string>;
+  onToggle: (path: string) => void;
+  searchTerm: string;
+}) {
+  const isExpanded = expandedPaths.has(node.path);
+  const hasChildren = node.children && node.children.length > 0;
+  const isExpandable = node.type === 'object' || node.type === 'array';
+
+  // Highlight search matches
+  const highlightText = (text: string) => {
+    if (!searchTerm) return text;
+    const regex = new RegExp(`(${searchTerm})`, 'gi');
+    const parts = text.split(regex);
+    return parts.map((part, index) =>
+      regex.test(part) ? (
+        <span key={index} className={styles.highlight}>{part}</span>
+      ) : part
+    );
+  };
+
+  const handleClick = () => {
+    if (isExpandable) {
+      onToggle(node.path);
+    }
+  };
+
+  const handleCopy = () => {
+    const textToCopy = typeof node.value === 'object'
+      ? JSON.stringify(node.value, null, 2)
+      : String(node.value);
+    navigator.clipboard.writeText(textToCopy);
+  };
+
+  return (
+    <div className={styles.treeNode} style={{ paddingLeft: `${node.level * 20}px` }}>
+      <div className={styles.nodeHeader} onClick={handleClick}>
+        {isExpandable && (
+          <span className={`${styles.expandIcon} ${isExpanded ? styles.expanded : ''}`}>
+            ▶
+          </span>
+        )}
+        {!isExpandable && <span className={styles.leafIcon}>•</span>}
+
+        <span className={styles.nodeKey}>
+          {highlightText(node.key)}:
+        </span>
+
+        <span className={`${styles.nodeValue} ${styles[node.type]}`}>
+          {highlightText(formatValue(node.value, node.type))}
+        </span>
+
+        <button
+          className={styles.copyButton}
+          onClick={(e) => {
+            e.stopPropagation();
+            handleCopy();
+          }}
+          title="Copy value"
+        >
+          📋
+        </button>
+      </div>
+
+      {isExpanded && hasChildren && (
+        <div className={styles.nodeChildren}>
+          {node.children!.map((child, index) => (
+            <TreeNodeComponent
+              key={`${child.path}-${index}`}
+              node={child}
+              expandedPaths={expandedPaths}
+              onToggle={onToggle}
+              searchTerm={searchTerm}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function DataInspector({
+  data,
+  maxHeight = '300px',
+  searchable = true
+}: DataInspectorProps) {
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set(['root']));
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const tree = useMemo(() => buildTree(data), [data]);
+
+  const filteredTree = useMemo(() => {
+    if (!searchTerm) return tree;
+
+    const filter = (nodes: TreeNode[]): TreeNode[] => {
+      return nodes.filter(node => {
+        const matchesKey = node.key.toLowerCase().includes(searchTerm.toLowerCase());
+        const matchesValue = String(node.value).toLowerCase().includes(searchTerm.toLowerCase());
+        const hasMatchingChildren = node.children && filter(node.children).length > 0;
+
+        if (matchesKey || matchesValue || hasMatchingChildren) {
+          // Auto-expand paths that contain matches
+          setExpandedPaths(prev => new Set([...prev, node.path]));
+          return true;
+        }
+
+        return false;
+      }).map(node => ({
+        ...node,
+        children: node.children ? filter(node.children) : undefined
+      }));
+    };
+
+    return filter(tree);
+  }, [tree, searchTerm]);
+
+  const togglePath = (path: string) => {
+    setExpandedPaths(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(path)) {
+        newSet.delete(path);
+      } else {
+        newSet.add(path);
+      }
+      return newSet;
+    });
+  };
+
+  const expandAll = () => {
+    const getAllPaths = (nodes: TreeNode[]): string[] => {
+      const paths: string[] = [];
+      nodes.forEach(node => {
+        paths.push(node.path);
+        if (node.children) {
+          paths.push(...getAllPaths(node.children));
+        }
+      });
+      return paths;
+    };
+
+    setExpandedPaths(new Set(getAllPaths(tree)));
+  };
+
+  const collapseAll = () => {
+    setExpandedPaths(new Set());
+  };
+
+  const copyAll = () => {
+    navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+  };
+
+  return (
+    <div className={styles.dataInspector}>
+      {searchable && (
+        <div className={styles.inspectorHeader}>
+          <input
+            type="text"
+            placeholder="Search in data..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className={styles.searchInput}
+          />
+          <div className={styles.actions}>
+            <button onClick={expandAll} className={styles.actionButton}>
+              Expand All
+            </button>
+            <button onClick={collapseAll} className={styles.actionButton}>
+              Collapse All
+            </button>
+            <button onClick={copyAll} className={styles.actionButton}>
+              Copy All
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div
+        className={styles.treeContainer}
+        style={{ maxHeight }}
+      >
+        {filteredTree.length > 0 ? (
+          filteredTree.map((node, index) => (
+            <TreeNodeComponent
+              key={`${node.path}-${index}`}
+              node={node}
+              expandedPaths={expandedPaths}
+              onToggle={togglePath}
+              searchTerm={searchTerm}
+            />
+          ))
+        ) : (
+          <div className={styles.noData}>
+            {searchTerm ? 'No matching data found' : 'No data to display'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

claude_mpm/dashboard/react/components/ErrorBoundary.tsx

@@ -0,0 +1,75 @@
+import React, { Component, ReactNode, ErrorInfo } from 'react';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+  errorInfo?: ErrorInfo;
+}
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Log the error details
+    console.error('React Error Boundary caught an error:', error);
+    console.error('Error info:', errorInfo);
+
+    this.setState({
+      hasError: true,
+      error,
+      errorInfo
+    });
+
+    // Re-throw the error to ensure it's not silently handled
+    throw new Error(`React component error: ${error.message}. Stack: ${errorInfo.componentStack}`);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Custom error UI
+      return this.props.fallback || (
+        <div style={{
+          padding: '20px',
+          background: 'rgba(248, 113, 113, 0.1)',
+          border: '1px solid #f87171',
+          borderRadius: '8px',
+          color: '#f87171',
+          fontFamily: 'monospace'
+        }}>
+          <h2>React Component Error</h2>
+          <p><strong>Error:</strong> {this.state.error?.message}</p>
+          <details style={{ marginTop: '10px' }}>
+            <summary>Error Details</summary>
+            <pre style={{
+              background: 'rgba(0, 0, 0, 0.3)',
+              padding: '10px',
+              borderRadius: '4px',
+              fontSize: '12px',
+              whiteSpace: 'pre-wrap',
+              overflow: 'auto',
+              maxHeight: '300px'
+            }}>
+              {this.state.error?.stack}
+              {this.state.errorInfo?.componentStack}
+            </pre>
+          </details>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

claude_mpm/dashboard/react/components/EventViewer/EventViewer.tsx

@@ -0,0 +1,141 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { FixedSizeList as List } from 'react-window';
+import { useEvents, EnhancedEvent } from '../../hooks/useEvents';
+import { DataInspector } from '../DataInspector/DataInspector';
+import styles from './EventViewer.module.css';
+
+interface EventItemProps {
+  index: number;
+  style: React.CSSProperties;
+  data: {
+    events: EnhancedEvent[];
+    expandedItems: Set<number>;
+    onToggleExpand: (index: number) => void;
+  };
+}
+
+function EventItem({ index, style, data }: EventItemProps) {
+  const { events, expandedItems, onToggleExpand } = data;
+  const event = events[index];
+  const isExpanded = expandedItems.has(index);
+
+  if (!event) return null;
+
+  const handleClick = () => {
+    onToggleExpand(index);
+  };
+
+  // Determine source indicator
+  const sourceIndicator = event.source && event.source !== 'server'
+    ? <span className={styles.sourceIndicator}>[{event.source}]</span>
+    : null;
+
+  return (
+    <div style={style}>
+      <div className={`${styles.eventItem} ${isExpanded ? styles.expanded : ''}`}>
+        <div className={styles.eventHeader} onClick={handleClick}>
+          <div className={styles.eventHeaderRow}>
+            <span className={`${styles.eventType} ${styles[event.category]}`}>
+              {event.displayType}
+            </span>
+            <span className={styles.eventTime}>{event.formattedTime}</span>
+            {sourceIndicator}
+          </div>
+          <div className={styles.eventPreview}>
+            {event.preview}
+          </div>
+        </div>
+
+        {isExpanded && (
+          <div className={styles.eventDetails}>
+            <DataInspector
+              data={event.raw || event.data}
+              maxHeight="400px"
+              searchable={true}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function EventViewer() {
+  const { events, stats } = useEvents();
+  const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
+  const listRef = useRef<List>(null);
+
+  // Auto-scroll to top when new events arrive (if auto-scroll is enabled)
+  const { autoScroll } = useEvents();
+  useEffect(() => {
+    if (autoScroll && events.length > 0 && listRef.current) {
+      listRef.current.scrollToItem(0, 'start');
+    }
+  }, [events.length, autoScroll]);
+
+  const toggleExpand = (index: number) => {
+    setExpandedItems(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        newSet.add(index);
+      }
+      return newSet;
+    });
+  };
+
+  // Calculate dynamic item height based on whether items are expanded
+  const getItemSize = (index: number) => {
+    const baseHeight = 80; // Base height for collapsed item
+    const expandedHeight = 500; // Height for expanded item
+    return expandedItems.has(index) ? expandedHeight : baseHeight;
+  };
+
+  // Memoize the data passed to the list
+  const listData = useMemo(() => ({
+    events,
+    expandedItems,
+    onToggleExpand: toggleExpand
+  }), [events, expandedItems]);
+
+  if (events.length === 0) {
+    return (
+      <div className={styles.eventsContainer}>
+        <div className={styles.eventsHeader}>
+          <div className={styles.eventsTitle}>Event Stream</div>
+          <div className={styles.eventsInfo}>Showing 0 events</div>
+        </div>
+        <div className={styles.noEvents}>
+          <h3>No Events Yet</h3>
+          <p>Waiting for events from the server...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.eventsContainer}>
+      <div className={styles.eventsHeader}>
+        <div className={styles.eventsTitle}>Event Stream</div>
+        <div className={styles.eventsInfo}>
+          Showing {stats.totalFiltered} events
+          {stats.totalFiltered !== events.length && ` (${events.length} total)`}
+        </div>
+      </div>
+
+      <div className={styles.eventsList}>
+        <List
+          ref={listRef}
+          height={600}
+          itemCount={events.length}
+          itemSize={getItemSize}
+          itemData={listData}
+          overscanCount={5}
+        >
+          {EventItem}
+        </List>
+      </div>
+    </div>
+  );
+}

claude_mpm/dashboard/react/components/shared/ConnectionStatus.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useDashboard } from '../../contexts/DashboardContext';
+import styles from './ConnectionStatus.module.css';
+
+export function ConnectionStatus() {
+  const { state } = useDashboard();
+  const { connection, stats } = state;
+
+  return (
+    <div className={styles.statusBar}>
+      <div className={styles.statusIndicator}>
+        <span
+          className={`${styles.statusDot} ${connection.isConnected ? styles.connected : styles.disconnected}`}
+        />
+        <span>
+          {connection.isConnected ? 'Connected' : connection.isConnecting ? 'Connecting...' : 'Disconnected'}
+        </span>
+      </div>
+
+      <div className={styles.statusIndicator}>
+        <span>📊</span>
+        <span>{stats.totalEvents} events</span>
+      </div>
+
+      <div className={styles.statusIndicator}>
+        <span>⚡</span>
+        <span>{stats.eventsPerSecond}/s</span>
+      </div>
+
+      <div className={styles.statusIndicator}>
+        <span>🔌</span>
+        <span>{connection.connectionCount} active</span>
+      </div>
+    </div>
+  );
+}

claude_mpm/dashboard/react/components/shared/FilterBar.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { useEvents } from '../../hooks/useEvents';
+import { useDashboard } from '../../contexts/DashboardContext';
+import styles from './FilterBar.module.css';
+
+export function FilterBar() {
+  const {
+    searchTerm,
+    typeFilter,
+    autoScroll,
+    pauseStream,
+    availableCategories,
+    setSearchTerm,
+    setTypeFilter,
+    toggleAutoScroll,
+    togglePauseStream,
+    exportEvents
+  } = useEvents();
+
+  const { clearEvents } = useDashboard();
+
+  const handleClearEvents = () => {
+    if (confirm('Clear all events?')) {
+      clearEvents();
+    }
+  };
+
+  return (
+    <div className={styles.controlsPanel}>
+      <div className={styles.controlGroup}>
+        <input
+          type="text"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          placeholder="Search events..."
+          className={styles.searchBox}
+        />
+      </div>
+
+      <div className={styles.controlGroup}>
+        <label className={styles.controlLabel}>Type:</label>
+        <select
+          value={typeFilter}
+          onChange={(e) => setTypeFilter(e.target.value)}
+          className={styles.filterSelect}
+        >
+          <option value="">All Types</option>
+          {availableCategories.map(category => (
+            <option key={category} value={category}>
+              {category.charAt(0).toUpperCase() + category.slice(1)}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <label className={styles.checkboxLabel}>
+        <input
+          type="checkbox"
+          checked={autoScroll}
+          onChange={toggleAutoScroll}
+        />
+        Auto-scroll
+      </label>
+
+      <label className={styles.checkboxLabel}>
+        <input
+          type="checkbox"
+          checked={pauseStream}
+          onChange={togglePauseStream}
+        />
+        Pause
+      </label>
+
+      <button
+        className={`${styles.btn} ${styles.secondary}`}
+        onClick={exportEvents}
+      >
+        Export JSON
+      </button>
+
+      <button
+        className={`${styles.btn} ${styles.danger}`}
+        onClick={handleClearEvents}
+      >
+        Clear All
+      </button>
+    </div>
+  );
+}