flock-core 0.4.543__py3-none-any.whl → 0.5.0__py3-none-any.whl

flock/frontend/src/components/modules/ModuleRegistry.test.ts

@@ -0,0 +1,333 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { moduleRegistry, ModuleDefinition } from './ModuleRegistry';
+
+// Mock React component for testing
+const MockComponent = () => null;
+
+describe('ModuleRegistry', () => {
+  beforeEach(() => {
+    // Reset the registry before each test
+    // Access the private resetInstance method through the class
+    (moduleRegistry.constructor as any).resetInstance();
+
+    // Clear console spies
+    vi.clearAllMocks();
+  });
+
+  describe('Module Registration', () => {
+    it('should register a new module successfully', () => {
+      const consoleSpy = vi.spyOn(console, 'log');
+
+      const module: ModuleDefinition = {
+        id: 'test-module',
+        name: 'Test Module',
+        description: 'A test module',
+        component: MockComponent,
+      };
+
+      moduleRegistry.register(module);
+
+      const registered = moduleRegistry.get('test-module');
+      expect(registered).toBeDefined();
+      expect(registered?.id).toBe('test-module');
+      expect(registered?.name).toBe('Test Module');
+      expect(registered?.description).toBe('A test module');
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Module "Test Module" (test-module) registered successfully.'
+      );
+    });
+
+    it('should register a module with all optional properties', () => {
+      const onMountMock = vi.fn();
+      const onUnmountMock = vi.fn();
+
+      const module: ModuleDefinition = {
+        id: 'full-module',
+        name: 'Full Module',
+        description: 'Module with all properties',
+        icon: 'icon-name',
+        component: MockComponent,
+        onMount: onMountMock,
+        onUnmount: onUnmountMock,
+      };
+
+      moduleRegistry.register(module);
+
+      const registered = moduleRegistry.get('full-module');
+      expect(registered).toBeDefined();
+      expect(registered?.icon).toBe('icon-name');
+      expect(registered?.onMount).toBe(onMountMock);
+      expect(registered?.onUnmount).toBe(onUnmountMock);
+    });
+
+    it('should prevent duplicate registration and warn', () => {
+      const consoleWarnSpy = vi.spyOn(console, 'warn');
+
+      const module: ModuleDefinition = {
+        id: 'duplicate-module',
+        name: 'Duplicate Module',
+        description: 'Will be registered twice',
+        component: MockComponent,
+      };
+
+      moduleRegistry.register(module);
+      moduleRegistry.register(module);
+
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'Module with id "duplicate-module" is already registered. Skipping registration.'
+      );
+
+      // Should only have one module
+      const allModules = moduleRegistry.getAll();
+      const duplicates = allModules.filter(m => m.id === 'duplicate-module');
+      expect(duplicates).toHaveLength(1);
+    });
+  });
+
+  describe('Module Retrieval', () => {
+    it('should retrieve a module by ID', () => {
+      const module: ModuleDefinition = {
+        id: 'retrieve-test',
+        name: 'Retrieve Test',
+        description: 'Test retrieval',
+        component: MockComponent,
+      };
+
+      moduleRegistry.register(module);
+      const retrieved = moduleRegistry.get('retrieve-test');
+
+      expect(retrieved).toBeDefined();
+      expect(retrieved?.id).toBe('retrieve-test');
+    });
+
+    it('should return undefined for non-existent module', () => {
+      const result = moduleRegistry.get('non-existent-module');
+      expect(result).toBeUndefined();
+    });
+
+    it('should get all registered modules', () => {
+      const module1: ModuleDefinition = {
+        id: 'module-1',
+        name: 'Module 1',
+        description: 'First module',
+        component: MockComponent,
+      };
+
+      const module2: ModuleDefinition = {
+        id: 'module-2',
+        name: 'Module 2',
+        description: 'Second module',
+        component: MockComponent,
+      };
+
+      const module3: ModuleDefinition = {
+        id: 'module-3',
+        name: 'Module 3',
+        description: 'Third module',
+        component: MockComponent,
+      };
+
+      moduleRegistry.register(module1);
+      moduleRegistry.register(module2);
+      moduleRegistry.register(module3);
+
+      const allModules = moduleRegistry.getAll();
+      expect(allModules).toHaveLength(3);
+      expect(allModules.map(m => m.id)).toContain('module-1');
+      expect(allModules.map(m => m.id)).toContain('module-2');
+      expect(allModules.map(m => m.id)).toContain('module-3');
+    });
+
+    it('should return empty array when no modules registered', () => {
+      const allModules = moduleRegistry.getAll();
+      expect(allModules).toHaveLength(0);
+      expect(allModules).toEqual([]);
+    });
+  });
+
+  describe('Module Unregistration', () => {
+    it('should unregister a module successfully', () => {
+      const consoleSpy = vi.spyOn(console, 'log');
+
+      const module: ModuleDefinition = {
+        id: 'unregister-test',
+        name: 'Unregister Test',
+        description: 'Test unregistration',
+        component: MockComponent,
+      };
+
+      moduleRegistry.register(module);
+      expect(moduleRegistry.get('unregister-test')).toBeDefined();
+
+      moduleRegistry.unregister('unregister-test');
+
+      expect(moduleRegistry.get('unregister-test')).toBeUndefined();
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Module "Unregister Test" (unregister-test) unregistered successfully.'
+      );
+    });
+
+    it('should handle unregistering non-existent module gracefully', () => {
+      const consoleSpy = vi.spyOn(console, 'log');
+
+      moduleRegistry.unregister('non-existent');
+
+      // Should not throw error and should not log anything
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+
+    it('should remove module from getAll after unregistration', () => {
+      const module1: ModuleDefinition = {
+        id: 'module-1',
+        name: 'Module 1',
+        description: 'First module',
+        component: MockComponent,
+      };
+
+      const module2: ModuleDefinition = {
+        id: 'module-2',
+        name: 'Module 2',
+        description: 'Second module',
+        component: MockComponent,
+      };
+
+      moduleRegistry.register(module1);
+      moduleRegistry.register(module2);
+      expect(moduleRegistry.getAll()).toHaveLength(2);
+
+      moduleRegistry.unregister('module-1');
+
+      const remaining = moduleRegistry.getAll();
+      expect(remaining).toHaveLength(1);
+      expect(remaining[0]?.id).toBe('module-2');
+    });
+  });
+
+  describe('Singleton Pattern', () => {
+    it('should maintain singleton instance across method calls', () => {
+      const module1: ModuleDefinition = {
+        id: 'singleton-test-1',
+        name: 'Singleton Test 1',
+        description: 'Test singleton behavior',
+        component: MockComponent,
+      };
+
+      const module2: ModuleDefinition = {
+        id: 'singleton-test-2',
+        name: 'Singleton Test 2',
+        description: 'Test singleton behavior',
+        component: MockComponent,
+      };
+
+      moduleRegistry.register(module1);
+      moduleRegistry.register(module2);
+
+      // Should maintain state across different method calls
+      const retrieved1 = moduleRegistry.get('singleton-test-1');
+      const retrieved2 = moduleRegistry.get('singleton-test-2');
+      const allModules = moduleRegistry.getAll();
+
+      expect(retrieved1).toBeDefined();
+      expect(retrieved2).toBeDefined();
+      expect(allModules).toHaveLength(2);
+    });
+
+    it('should persist state after unregister and re-register operations', () => {
+      const module1: ModuleDefinition = {
+        id: 'persist-1',
+        name: 'Persist 1',
+        description: 'First persistent module',
+        component: MockComponent,
+      };
+
+      const module2: ModuleDefinition = {
+        id: 'persist-2',
+        name: 'Persist 2',
+        description: 'Second persistent module',
+        component: MockComponent,
+      };
+
+      const module3: ModuleDefinition = {
+        id: 'persist-3',
+        name: 'Persist 3',
+        description: 'Third persistent module',
+        component: MockComponent,
+      };
+
+      // Register three modules
+      moduleRegistry.register(module1);
+      moduleRegistry.register(module2);
+      moduleRegistry.register(module3);
+      expect(moduleRegistry.getAll()).toHaveLength(3);
+
+      // Unregister one
+      moduleRegistry.unregister('persist-2');
+      expect(moduleRegistry.getAll()).toHaveLength(2);
+
+      // State should persist - the remaining modules should still be there
+      expect(moduleRegistry.get('persist-1')).toBeDefined();
+      expect(moduleRegistry.get('persist-2')).toBeUndefined();
+      expect(moduleRegistry.get('persist-3')).toBeDefined();
+    });
+  });
+
+  describe('Console Logging', () => {
+    it('should log registration events with correct format', () => {
+      const consoleSpy = vi.spyOn(console, 'log');
+
+      const module: ModuleDefinition = {
+        id: 'log-test',
+        name: 'Log Test Module',
+        description: 'Test logging',
+        component: MockComponent,
+      };
+
+      moduleRegistry.register(module);
+
+      expect(consoleSpy).toHaveBeenCalledTimes(1);
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Module "Log Test Module" (log-test) registered successfully.'
+      );
+    });
+
+    it('should log unregistration events with correct format', () => {
+      const consoleSpy = vi.spyOn(console, 'log');
+
+      const module: ModuleDefinition = {
+        id: 'unlog-test',
+        name: 'Unlog Test Module',
+        description: 'Test unregistration logging',
+        component: MockComponent,
+      };
+
+      moduleRegistry.register(module);
+      consoleSpy.mockClear(); // Clear registration log
+
+      moduleRegistry.unregister('unlog-test');
+
+      expect(consoleSpy).toHaveBeenCalledTimes(1);
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Module "Unlog Test Module" (unlog-test) unregistered successfully.'
+      );
+    });
+
+    it('should warn when registering duplicate module', () => {
+      const consoleWarnSpy = vi.spyOn(console, 'warn');
+
+      const module: ModuleDefinition = {
+        id: 'warn-test',
+        name: 'Warn Test',
+        description: 'Test warning',
+        component: MockComponent,
+      };
+
+      moduleRegistry.register(module);
+      moduleRegistry.register(module);
+
+      expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'Module with id "warn-test" is already registered. Skipping registration.'
+      );
+    });
+  });
+});

flock/frontend/src/components/modules/ModuleRegistry.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import type { Message } from '../../types/graph';
+import type { TimeRange, ArtifactSummary } from '../../types/filters';
+
+// UI Optimization Migration (Phase 4.1 - Spec 002): ModuleContext uses OLD Phase 1 architecture
+// TODO: Update module system to use GraphNode[] instead of Maps
+export interface ModuleContext {
+  // Data access (DEPRECATED - Phase 1 architecture, use events array instead)
+  agents: Map<string, any>; // OLD: was Map<string, Agent>
+  messages: Map<string, Message>;
+  events: Message[];
+
+  // Filter state
+  filters: {
+    correlationId: string | null;
+    timeRange: TimeRange;
+    artifactTypes: string[];
+    producers: string[];
+    tags: string[];
+    visibility: string[];
+  };
+
+  summary: ArtifactSummary | null;
+
+  // Actions
+  publish: (artifact: any) => void;
+  invoke: (agentName: string, inputs: any[]) => void;
+}
+
+export interface ModuleDefinition {
+  id: string;
+  name: string;
+  description: string;
+  icon?: string;
+  component: React.ComponentType<{ context: ModuleContext }>;
+  onMount?: (context: ModuleContext) => void;
+  onUnmount?: () => void;
+}
+
+export interface ModuleRegistry {
+  register: (module: ModuleDefinition) => void;
+  unregister: (moduleId: string) => void;
+  getAll: () => ModuleDefinition[];
+  get: (moduleId: string) => ModuleDefinition | undefined;
+}
+
+class ModuleRegistryImpl implements ModuleRegistry {
+  private static instance: ModuleRegistryImpl;
+  private modules: Map<string, ModuleDefinition> = new Map();
+
+  private constructor() {}
+
+  public static getInstance(): ModuleRegistryImpl {
+    if (!ModuleRegistryImpl.instance) {
+      ModuleRegistryImpl.instance = new ModuleRegistryImpl();
+    }
+    return ModuleRegistryImpl.instance;
+  }
+
+  public register(module: ModuleDefinition): void {
+    if (this.modules.has(module.id)) {
+      console.warn(`Module with id "${module.id}" is already registered. Skipping registration.`);
+      return;
+    }
+    this.modules.set(module.id, module);
+    console.log(`Module "${module.name}" (${module.id}) registered successfully.`);
+  }
+
+  public unregister(moduleId: string): void {
+    if (this.modules.has(moduleId)) {
+      const module = this.modules.get(moduleId);
+      this.modules.delete(moduleId);
+      console.log(`Module "${module?.name}" (${moduleId}) unregistered successfully.`);
+    }
+  }
+
+  public getAll(): ModuleDefinition[] {
+    return Array.from(this.modules.values());
+  }
+
+  public get(moduleId: string): ModuleDefinition | undefined {
+    return this.modules.get(moduleId);
+  }
+
+  // For testing purposes - reset the singleton instance
+  public static resetInstance(): void {
+    if (ModuleRegistryImpl.instance) {
+      ModuleRegistryImpl.instance.modules.clear();
+    }
+  }
+}
+
+export const moduleRegistry = ModuleRegistryImpl.getInstance();

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

@@ -0,0 +1,223 @@
+import React, { useCallback, memo } from 'react';
+import { Rnd } from 'react-rnd';
+import { useModuleStore } from '../../store/moduleStore';
+import { moduleRegistry } from './ModuleRegistry';
+import { useModules } from '../../hooks/useModules';
+
+interface ModuleWindowProps {
+  instanceId: string;
+}
+
+const ModuleWindow: React.FC<ModuleWindowProps> = memo(({ instanceId }) => {
+  const instance = useModuleStore((state) => state.instances.get(instanceId));
+  const updateModule = useModuleStore((state) => state.updateModule);
+  const removeModule = useModuleStore((state) => state.removeModule);
+
+  // Get module context from useModules hook
+  const { context } = useModules();
+
+  const handleClose = useCallback(() => {
+    removeModule(instanceId);
+  }, [instanceId, removeModule]);
+
+  const handleMaximize = useCallback(() => {
+    if (!instance) return;
+
+    if (instance.maximized) {
+      // Restore to previous size/position
+      updateModule(instanceId, {
+        maximized: false,
+        position: instance.preMaximizePosition || instance.position,
+        size: instance.preMaximizeSize || instance.size,
+      });
+    } else {
+      // Maximize to full viewport
+      updateModule(instanceId, {
+        maximized: true,
+        preMaximizePosition: instance.position,
+        preMaximizeSize: instance.size,
+        position: { x: 0, y: 0 },
+        size: { width: window.innerWidth, height: window.innerHeight },
+      });
+    }
+  }, [instanceId, instance, updateModule]);
+
+  // Don't render if instance doesn't exist or is not visible
+  if (!instance || !instance.visible) return null;
+
+  // Get module definition from registry
+  const moduleDefinition = moduleRegistry.get(instance.type);
+  if (!moduleDefinition) {
+    console.error(`Module definition not found for type: ${instance.type}`);
+    return null;
+  }
+
+  const { position, size } = instance;
+  const ModuleComponent = moduleDefinition.component;
+
+  return (
+    <Rnd
+      position={position}
+      size={size}
+      disableDragging={instance.maximized}
+      enableResizing={!instance.maximized}
+      onDragStop={(_e, d) => {
+        updateModule(instanceId, {
+          position: { x: d.x, y: d.y },
+        });
+      }}
+      onResizeStop={(_e, _direction, ref, _delta, position) => {
+        updateModule(instanceId, {
+          size: {
+            width: parseInt(ref.style.width, 10),
+            height: parseInt(ref.style.height, 10),
+          },
+          position,
+        });
+      }}
+      minWidth={1000}
+      minHeight={500}
+      bounds="parent"
+      dragHandleClassName="module-window-header"
+      style={{
+        zIndex: 1000,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          height: '100%',
+          background: 'var(--color-glass-bg)',
+          border: 'var(--border-width-1) solid var(--color-glass-border)',
+          borderRadius: 'var(--radius-xl)',
+          overflow: 'hidden',
+          boxShadow: 'var(--shadow-xl)',
+          backdropFilter: 'blur(var(--blur-lg))',
+          WebkitBackdropFilter: 'blur(var(--blur-lg))',
+        }}
+      >
+        {/* Header */}
+        <div
+          className="module-window-header"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: 'var(--space-component-md) var(--space-component-lg)',
+            background: 'rgba(42, 42, 50, 0.5)',
+            borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+            cursor: instance.maximized ? 'default' : 'move',
+            userSelect: 'none',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--gap-md)' }}>
+            {moduleDefinition.icon && (
+              <span style={{ fontSize: 16 }}>{moduleDefinition.icon}</span>
+            )}
+            <span
+              style={{
+                color: 'var(--color-text-primary)',
+                fontSize: 'var(--font-size-body-sm)',
+                fontWeight: 'var(--font-weight-semibold)',
+                fontFamily: 'var(--font-family-sans)',
+              }}
+            >
+              {moduleDefinition.name}
+            </span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--gap-xs)' }}>
+            {/* Maximize/Restore button */}
+            <button
+              onClick={handleMaximize}
+              aria-label={instance.maximized ? 'Restore window' : 'Maximize window'}
+              title={instance.maximized ? 'Restore' : 'Maximize'}
+              style={{
+                background: 'transparent',
+                border: 'none',
+                color: 'var(--color-text-secondary)',
+                fontSize: '16px',
+                cursor: 'pointer',
+                padding: 'var(--spacing-1) var(--spacing-2)',
+                lineHeight: 1,
+                borderRadius: 'var(--radius-md)',
+                transition: 'var(--transition-colors)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.color = 'var(--color-text-primary)';
+                e.currentTarget.style.background = 'var(--color-bg-elevated)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.color = 'var(--color-text-secondary)';
+                e.currentTarget.style.background = 'transparent';
+              }}
+            >
+              {instance.maximized ? (
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
+                  <rect x="4" y="4" width="6" height="6" />
+                  <path d="M2 2h4v4M12 12H8V8" />
+                </svg>
+              ) : (
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
+                  <rect x="2" y="2" width="10" height="10" />
+                </svg>
+              )}
+            </button>
+
+            {/* Close button */}
+            <button
+              onClick={handleClose}
+              aria-label="Close window"
+              title="Close"
+              style={{
+                background: 'transparent',
+                border: 'none',
+                color: 'var(--color-text-secondary)',
+                fontSize: 'var(--font-size-h3)',
+                cursor: 'pointer',
+                padding: 'var(--spacing-1) var(--spacing-2)',
+                lineHeight: 1,
+                borderRadius: 'var(--radius-md)',
+                transition: 'var(--transition-colors)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.color = 'var(--color-error)';
+                e.currentTarget.style.background = 'var(--color-error-bg)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.color = 'var(--color-text-secondary)';
+                e.currentTarget.style.background = 'transparent';
+              }}
+            >
+              ×
+            </button>
+          </div>
+        </div>
+
+        {/* Module Content */}
+        <div
+          style={{
+            flex: 1,
+            overflow: 'hidden',
+            background: 'var(--color-bg-surface)',
+          }}
+        >
+          <ModuleComponent context={context} />
+        </div>
+      </div>
+    </Rnd>
+  );
+});
+
+ModuleWindow.displayName = 'ModuleWindow';
+
+export default ModuleWindow;