flock-core 0.5.0b28__py3-none-any.whl → 0.5.0b51__py3-none-any.whl

flock/frontend/src/components/modules/EventLogModule.tsx

@@ -0,0 +1,396 @@
+import React, { useMemo, useState } from 'react';
+import { Message, Agent } from '../../types/graph';
+import { TimeRange } from '../../types/filters';
+
+interface ModuleContext {
+  agents: Map<string, Agent>;
+  messages: Map<string, Message>;
+  events: Message[];
+  filters: {
+    correlationId: string | null;
+    timeRange: TimeRange;
+  };
+  publish: (artifact: any) => void;
+  invoke: (agentName: string, inputs: any[]) => void;
+}
+
+interface EventLogModuleProps {
+  context: ModuleContext;
+}
+
+type SortField = 'timestamp' | 'type' | 'agent' | 'correlationId';
+type SortDirection = 'asc' | 'desc';
+
+const getTimeRangeStart = (timeRange: TimeRange, now: number): number => {
+  if (timeRange.preset === 'custom' && timeRange.start) {
+    return timeRange.start;
+  }
+
+  switch (timeRange.preset) {
+    case 'last5min':
+      return now - 5 * 60 * 1000;
+    case 'last10min':
+      return now - 10 * 60 * 1000;
+    case 'last1hour':
+      return now - 60 * 60 * 1000;
+    default:
+      return now - 10 * 60 * 1000; // Default to 10 minutes
+  }
+};
+
+const EventLogModule: React.FC<EventLogModuleProps> = ({ context }) => {
+  const { events, filters } = context;
+  const [expandedRowIds, setExpandedRowIds] = useState<Set<string>>(new Set());
+  const [sortField, setSortField] = useState<SortField>('timestamp');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+
+  // Apply filters
+  const filteredEvents = useMemo(() => {
+    let result = [...events];
+
+    // Filter by correlation ID
+    if (filters.correlationId) {
+      result = result.filter((e) => e.correlationId === filters.correlationId);
+    }
+
+    // Filter by time range
+    if (filters.timeRange) {
+      const now = Date.now();
+      const start = getTimeRangeStart(filters.timeRange, now);
+      const end = filters.timeRange.preset === 'custom' && filters.timeRange.end
+        ? filters.timeRange.end
+        : now;
+
+      result = result.filter((e) => e.timestamp >= start && e.timestamp <= end);
+    }
+
+    return result;
+  }, [events, filters]);
+
+  // Apply sorting
+  const sortedEvents = useMemo(() => {
+    const sorted = [...filteredEvents];
+
+    sorted.sort((a, b) => {
+      let comparison = 0;
+
+      switch (sortField) {
+        case 'timestamp':
+          comparison = a.timestamp - b.timestamp;
+          break;
+        case 'type':
+          comparison = a.type.localeCompare(b.type);
+          break;
+        case 'agent':
+          comparison = a.producedBy.localeCompare(b.producedBy);
+          break;
+        case 'correlationId':
+          comparison = a.correlationId.localeCompare(b.correlationId);
+          break;
+      }
+
+      return sortDirection === 'asc' ? comparison : -comparison;
+    });
+
+    return sorted;
+  }, [filteredEvents, sortField, sortDirection]);
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      // Toggle direction
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      // New field, default to ascending
+      setSortField(field);
+      setSortDirection('asc');
+    }
+  };
+
+  const handleExpandToggle = (eventId: string) => {
+    setExpandedRowIds(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(eventId)) {
+        newSet.delete(eventId);
+      } else {
+        newSet.add(eventId);
+      }
+      return newSet;
+    });
+  };
+
+  const handleExpandAll = () => {
+    const allIds = new Set(sortedEvents.map(e => e.id));
+    setExpandedRowIds(allIds);
+  };
+
+  const handleCollapseAll = () => {
+    setExpandedRowIds(new Set());
+  };
+
+  const [hoveredRow, setHoveredRow] = useState<string | null>(null);
+
+  return (
+    <div
+      className="event-log-module"
+      style={{
+        padding: '0',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        background: 'var(--color-bg-surface)',
+      }}
+    >
+      {/* Expand/Collapse All Button */}
+      <div style={{
+        padding: 'var(--space-component-sm) var(--space-component-md)',
+        borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+        display: 'flex',
+        justifyContent: 'flex-end',
+      }}>
+        <button
+          onClick={expandedRowIds.size > 0 ? handleCollapseAll : handleExpandAll}
+          style={{
+            padding: 'var(--space-component-xs) var(--space-component-sm)',
+            cursor: 'pointer',
+            border: 'var(--border-width-1) solid var(--color-primary-500)',
+            borderRadius: 'var(--radius-md)',
+            background: expandedRowIds.size > 0 ? 'var(--color-primary-500)' : 'transparent',
+            color: expandedRowIds.size > 0 ? 'var(--color-bg-base)' : 'var(--color-primary-500)',
+            fontSize: 'var(--font-size-body-sm)',
+            fontWeight: 'var(--font-weight-medium)',
+            transition: 'var(--transition-colors)',
+          }}
+        >
+          {expandedRowIds.size > 0 ? 'Collapse All' : 'Expand All'}
+        </button>
+      </div>
+
+      {/* Table Container */}
+      <div style={{
+        flex: 1,
+        overflow: 'auto',
+      }}>
+        <table style={{
+          width: '100%',
+          borderCollapse: 'collapse',
+          fontSize: 'var(--font-size-body-sm)',
+          tableLayout: 'auto',
+        }}>
+        <thead>
+          <tr style={{
+            background: 'rgba(42, 42, 50, 0.5)',
+            position: 'sticky',
+            top: 0,
+            zIndex: 1,
+          }}>
+            <th
+              onClick={() => handleSort('timestamp')}
+              style={{
+                cursor: 'pointer',
+                padding: 'var(--space-component-sm) var(--space-component-md)',
+                borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+                textAlign: 'left',
+                fontWeight: 'var(--font-weight-semibold)',
+                color: 'var(--color-text-primary)',
+                transition: 'var(--transition-colors)',
+                userSelect: 'none',
+              }}
+              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--color-bg-elevated)'}
+              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+            >
+              Timestamp {sortField === 'timestamp' && (
+                <span style={{ color: 'var(--color-primary-500)', marginLeft: 'var(--gap-xs)' }}>
+                  {sortDirection === 'asc' ? '↑' : '↓'}
+                </span>
+              )}
+            </th>
+            <th
+              onClick={() => handleSort('type')}
+              style={{
+                cursor: 'pointer',
+                padding: 'var(--space-component-sm) var(--space-component-md)',
+                borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+                textAlign: 'left',
+                fontWeight: 'var(--font-weight-semibold)',
+                color: 'var(--color-text-primary)',
+                transition: 'var(--transition-colors)',
+                userSelect: 'none',
+              }}
+              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--color-bg-elevated)'}
+              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+            >
+              Type {sortField === 'type' && (
+                <span style={{ color: 'var(--color-primary-500)', marginLeft: 'var(--gap-xs)' }}>
+                  {sortDirection === 'asc' ? '↑' : '↓'}
+                </span>
+              )}
+            </th>
+            <th
+              onClick={() => handleSort('agent')}
+              style={{
+                cursor: 'pointer',
+                padding: 'var(--space-component-sm) var(--space-component-md)',
+                borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+                textAlign: 'left',
+                fontWeight: 'var(--font-weight-semibold)',
+                color: 'var(--color-text-primary)',
+                transition: 'var(--transition-colors)',
+                userSelect: 'none',
+              }}
+              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--color-bg-elevated)'}
+              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+            >
+              Agent {sortField === 'agent' && (
+                <span style={{ color: 'var(--color-primary-500)', marginLeft: 'var(--gap-xs)' }}>
+                  {sortDirection === 'asc' ? '↑' : '↓'}
+                </span>
+              )}
+            </th>
+            <th
+              onClick={() => handleSort('correlationId')}
+              style={{
+                cursor: 'pointer',
+                padding: 'var(--space-component-sm) var(--space-component-md)',
+                borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+                textAlign: 'left',
+                fontWeight: 'var(--font-weight-semibold)',
+                color: 'var(--color-text-primary)',
+                transition: 'var(--transition-colors)',
+                userSelect: 'none',
+              }}
+              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--color-bg-elevated)'}
+              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+            >
+              Correlation ID {sortField === 'correlationId' && (
+                <span style={{ color: 'var(--color-primary-500)', marginLeft: 'var(--gap-xs)' }}>
+                  {sortDirection === 'asc' ? '↑' : '↓'}
+                </span>
+              )}
+            </th>
+            <th style={{
+              padding: 'var(--space-component-sm) var(--space-component-md)',
+              borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+              textAlign: 'left',
+              fontWeight: 'var(--font-weight-semibold)',
+              color: 'var(--color-text-primary)',
+            }}>
+              Actions
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {sortedEvents.map((event) => (
+            <React.Fragment key={event.id}>
+              <tr
+                style={{
+                  borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+                  background: hoveredRow === event.id ? 'var(--color-bg-elevated)' : 'transparent',
+                  transition: 'var(--transition-colors)',
+                }}
+                onMouseEnter={() => setHoveredRow(event.id)}
+                onMouseLeave={() => setHoveredRow(null)}
+              >
+                <td style={{
+                  padding: 'var(--space-component-sm) var(--space-component-md)',
+                  color: 'var(--color-text-secondary)',
+                  fontFamily: 'var(--font-family-mono)',
+                }}>
+                  {new Date(event.timestamp).toLocaleString()}
+                </td>
+                <td style={{
+                  padding: 'var(--space-component-sm) var(--space-component-md)',
+                  color: 'var(--color-success)',
+                  fontWeight: 'var(--font-weight-medium)',
+                }}>
+                  {event.type}
+                </td>
+                <td style={{
+                  padding: 'var(--space-component-sm) var(--space-component-md)',
+                  color: 'var(--color-warning)',
+                }}>
+                  {event.producedBy}
+                </td>
+                <td style={{
+                  padding: 'var(--space-component-sm) var(--space-component-md)',
+                  color: 'var(--color-text-secondary)',
+                  fontFamily: 'var(--font-family-mono)',
+                  fontSize: 'var(--font-size-body-xs)',
+                  wordBreak: 'break-all',
+                }}>
+                  {event.correlationId}
+                </td>
+                <td style={{ padding: 'var(--space-component-sm) var(--space-component-md)' }}>
+                  <button
+                    onClick={() => handleExpandToggle(event.id)}
+                    style={{
+                      padding: 'var(--space-component-xs) var(--space-component-sm)',
+                      cursor: 'pointer',
+                      border: 'var(--border-width-1) solid var(--color-primary-500)',
+                      borderRadius: 'var(--radius-md)',
+                      background: expandedRowIds.has(event.id) ? 'var(--color-primary-500)' : 'transparent',
+                      color: expandedRowIds.has(event.id) ? 'var(--color-bg-base)' : 'var(--color-primary-500)',
+                      fontSize: 'var(--font-size-body-xs)',
+                      fontWeight: 'var(--font-weight-medium)',
+                      transition: 'var(--transition-colors)',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!expandedRowIds.has(event.id)) {
+                        e.currentTarget.style.background = 'var(--color-primary-500-alpha-10)';
+                      }
+                    }}
+                    onMouseLeave={(e) => {
+                      if (!expandedRowIds.has(event.id)) {
+                        e.currentTarget.style.background = 'transparent';
+                      }
+                    }}
+                  >
+                    {expandedRowIds.has(event.id) ? 'Collapse ▲' : 'Expand ▼'}
+                  </button>
+                </td>
+              </tr>
+              {expandedRowIds.has(event.id) && (
+                <tr>
+                  <td colSpan={5} style={{
+                    padding: 'var(--space-component-md)',
+                    background: 'var(--color-bg-base)',
+                    borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+                  }}>
+                    <pre style={{
+                      margin: 0,
+                      fontSize: 'var(--font-size-body-xs)',
+                      color: 'var(--color-text-primary)',
+                      fontFamily: 'var(--font-family-mono)',
+                      lineHeight: '1.6',
+                      whiteSpace: 'pre-wrap',
+                      wordBreak: 'break-word',
+                      overflowWrap: 'break-word',
+                    }}>
+                      {JSON.stringify(event.payload, null, 2)}
+                    </pre>
+                  </td>
+                </tr>
+              )}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+      {sortedEvents.length === 0 && (
+        <div style={{
+          padding: 'var(--space-component-xl)',
+          textAlign: 'center',
+          color: 'var(--color-text-secondary)',
+          fontSize: 'var(--font-size-body-sm)',
+        }}>
+          <div style={{ fontSize: '32px', marginBottom: 'var(--gap-md)', opacity: 0.5 }}>📋</div>
+          <div>No events to display</div>
+          <div style={{ fontSize: 'var(--font-size-body-xs)', marginTop: 'var(--gap-sm)', opacity: 0.7 }}>
+            Events will appear here as they occur
+          </div>
+        </div>
+      )}
+      </div>
+    </div>
+  );
+};
+
+export default EventLogModule;

flock/frontend/src/components/modules/EventLogModuleWrapper.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import EventLogModule from './EventLogModule';
+import type { ModuleContext } from './ModuleRegistry';
+
+interface EventLogModuleWrapperProps {
+  context: ModuleContext;
+}
+
+/**
+ * Wrapper component for EventLogModule
+ * Simply passes through the context provided by ModuleWindow (via useModules hook)
+ */
+const EventLogModuleWrapper: React.FC<EventLogModuleWrapperProps> = ({ context }) => {
+  return <EventLogModule context={context} />;
+};
+
+export default EventLogModuleWrapper;