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

flock/frontend/src/__tests__/integration/indexeddb-persistence.test.tsx

@@ -0,0 +1,699 @@
+/**
+ * Integration tests for IndexedDB persistence with dashboard components.
+ *
+ * Tests verify session restoration, node position persistence with debouncing,
+ * layout switching between views, and multi-window session handling.
+ *
+ * SPECIFICATION: docs/specs/003-real-time-dashboard/DATA_MODEL.md Section 3 & 6
+ * REQUIREMENTS:
+ * - Node positions saved on drag stop (debounced 300ms)
+ * - Node positions restored on dashboard reload
+ * - Layout persistence switches correctly between Agent View and Blackboard View
+ * - Multiple windows/sessions handling
+ * - Position save debouncing prevents excessive writes
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { act } from 'react';
+
+// Mock components for integration testing
+const MockDashboardWithPersistence = ({ dbService, viewMode }: { dbService: any; viewMode: 'agent' | 'blackboard' }) => {
+  const [positions, setPositions] = React.useState<Map<string, { x: number; y: number }>>(new Map());
+
+  React.useEffect(() => {
+    // Load saved positions on mount
+    const loadPositions = async () => {
+      let savedPositions: any[];
+      if (viewMode === 'agent') {
+        savedPositions = await dbService.getAllAgentViewLayouts();
+      } else {
+        savedPositions = await dbService.getAllBlackboardViewLayouts();
+      }
+
+      const posMap = new Map();
+      for (const pos of savedPositions) {
+        posMap.set(pos.node_id, { x: pos.x, y: pos.y });
+      }
+      setPositions(posMap);
+    };
+
+    loadPositions();
+  }, [dbService, viewMode]);
+
+  const handleNodeDragStop = React.useCallback(
+    (nodeId: string, x: number, y: number) => {
+      // Debounce: Wait 300ms before saving
+      setTimeout(async () => {
+        const position = {
+          node_id: nodeId,
+          x,
+          y,
+          last_updated: new Date().toISOString(),
+        };
+
+        if (viewMode === 'agent') {
+          await dbService.saveAgentViewLayout(position);
+        } else {
+          await dbService.saveBlackboardViewLayout(position);
+        }
+
+        setPositions((prev) => new Map(prev).set(nodeId, { x, y }));
+      }, 300);
+    },
+    [dbService, viewMode]
+  );
+
+  return (
+    <div data-testid="dashboard">
+      <div data-testid="view-mode">{viewMode}</div>
+      <div data-testid="position-count">{positions.size}</div>
+      {Array.from(positions.entries()).map(([nodeId, pos]) => (
+        <div
+          key={nodeId}
+          data-testid={`node-${nodeId}`}
+          data-x={pos.x}
+          data-y={pos.y}
+          onClick={() => handleNodeDragStop(nodeId, pos.x + 10, pos.y + 10)}
+        >
+          {nodeId} at ({pos.x}, {pos.y})
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// Import React for hooks
+import * as React from 'react';
+
+// Mock IndexedDB service
+class MockIndexedDBService {
+  private agentLayouts = new Map<string, any>();
+  private blackboardLayouts = new Map<string, any>();
+
+  async initialize() {
+    // Initialization logic
+  }
+
+  async saveAgentViewLayout(layout: any) {
+    this.agentLayouts.set(layout.node_id, layout);
+  }
+
+  async saveBlackboardViewLayout(layout: any) {
+    this.blackboardLayouts.set(layout.node_id, layout);
+  }
+
+  async getAgentViewLayout(nodeId: string) {
+    return this.agentLayouts.get(nodeId);
+  }
+
+  async getBlackboardViewLayout(nodeId: string) {
+    return this.blackboardLayouts.get(nodeId);
+  }
+
+  async getAllAgentViewLayouts() {
+    return Array.from(this.agentLayouts.values());
+  }
+
+  async getAllBlackboardViewLayouts() {
+    return Array.from(this.blackboardLayouts.values());
+  }
+
+  clear() {
+    this.agentLayouts.clear();
+    this.blackboardLayouts.clear();
+  }
+}
+
+describe('IndexedDB Persistence Integration', () => {
+  let dbService: MockIndexedDBService;
+
+  beforeEach(() => {
+    // Don't use fake timers globally - only in specific debouncing tests
+    // This allows React's useEffect and waitFor() to work properly
+    dbService = new MockIndexedDBService();
+    dbService.initialize();
+  });
+
+  afterEach(() => {
+    dbService.clear();
+  });
+
+  describe('Session Restoration', () => {
+    it('should restore node positions on dashboard reload', async () => {
+      // Save positions before "reload"
+      await dbService.saveAgentViewLayout({
+        node_id: 'movie-agent',
+        x: 100,
+        y: 200,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+      await dbService.saveAgentViewLayout({
+        node_id: 'tagline-agent',
+        x: 300,
+        y: 200,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      // Simulate dashboard reload
+      render(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="agent" />
+        </ReactFlowProvider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('position-count')).toHaveTextContent('2');
+      });
+
+      // Verify positions restored
+      const movieNode = screen.getByTestId('node-movie-agent');
+      expect(movieNode).toHaveAttribute('data-x', '100');
+      expect(movieNode).toHaveAttribute('data-y', '200');
+
+      const taglineNode = screen.getByTestId('node-tagline-agent');
+      expect(taglineNode).toHaveAttribute('data-x', '300');
+      expect(taglineNode).toHaveAttribute('data-y', '200');
+    });
+
+    it('should handle empty state gracefully on first load', async () => {
+      render(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="agent" />
+        </ReactFlowProvider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('position-count')).toHaveTextContent('0');
+      });
+    });
+
+    it('should restore only relevant view positions', async () => {
+      // Save positions for both views
+      await dbService.saveAgentViewLayout({
+        node_id: 'agent-1',
+        x: 100,
+        y: 100,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+      await dbService.saveBlackboardViewLayout({
+        node_id: 'artifact-1',
+        x: 200,
+        y: 200,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      // Load Agent View
+      const { rerender } = render(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="agent" />
+        </ReactFlowProvider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('position-count')).toHaveTextContent('1');
+        expect(screen.getByTestId('node-agent-1')).toBeInTheDocument();
+      });
+
+      // Switch to Blackboard View
+      rerender(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="blackboard" />
+        </ReactFlowProvider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('view-mode')).toHaveTextContent('blackboard');
+        expect(screen.getByTestId('position-count')).toHaveTextContent('1');
+        expect(screen.getByTestId('node-artifact-1')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Node Position Persistence with Debouncing', () => {
+    it('should save node positions on drag stop with 300ms debounce (REQUIREMENT)', async () => {
+      vi.useFakeTimers(); // Use fake timers only for this test
+
+      // Pre-populate with a node
+      await dbService.saveAgentViewLayout({
+        node_id: 'test-agent',
+        x: 100,
+        y: 100,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      render(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="agent" />
+        </ReactFlowProvider>
+      );
+
+      // Flush initial effects
+      await act(async () => {
+        await vi.runAllTimersAsync();
+      });
+
+      // Node should be rendered now (don't use waitFor with fake timers)
+      expect(screen.getByTestId('node-test-agent')).toBeInTheDocument();
+
+      // Simulate drag stop (click triggers save with +10, +10 offset)
+      const node = screen.getByTestId('node-test-agent');
+      await act(async () => {
+        node.click();
+      });
+
+      // Position should NOT be saved immediately
+      const immediate = await dbService.getAgentViewLayout('test-agent');
+      expect(immediate.x).toBe(100); // Original position
+
+      // Wait for debounce (300ms)
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(300);
+      });
+
+      // Position should now be saved
+      const saved = await dbService.getAgentViewLayout('test-agent');
+      expect(saved.x).toBe(110); // Updated position
+      expect(saved.y).toBe(110);
+
+      vi.useRealTimers(); // Clean up
+    });
+
+    it('should debounce multiple rapid drag events (prevent excessive writes)', async () => {
+      vi.useFakeTimers(); // Use fake timers only for this test
+
+      let saveCount = 0;
+      const originalSave = dbService.saveAgentViewLayout.bind(dbService);
+      dbService.saveAgentViewLayout = vi.fn(async (layout: any) => {
+        saveCount++;
+        return originalSave(layout);
+      });
+
+      await dbService.saveAgentViewLayout({
+        node_id: 'rapid-drag-node',
+        x: 0,
+        y: 0,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      render(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="agent" />
+        </ReactFlowProvider>
+      );
+
+      // Flush initial effects
+      await act(async () => {
+        await vi.runAllTimersAsync();
+      });
+
+      // Node should be rendered (don't use waitFor with fake timers)
+      expect(screen.getByTestId('node-rapid-drag-node')).toBeInTheDocument();
+
+      const node = screen.getByTestId('node-rapid-drag-node');
+
+      // Simulate 5 rapid drag events (within 300ms)
+      saveCount = 0; // Reset counter
+      for (let i = 0; i < 5; i++) {
+        await act(async () => {
+          node.click();
+        });
+        await act(async () => {
+          await vi.advanceTimersByTimeAsync(50); // 50ms between drags
+        });
+      }
+
+      // Wait for all debounce timers
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(300);
+      });
+
+      // Should have called save once per drag, but debouncing means only last position is saved
+      // In real implementation, debounce would cancel previous timers
+      expect(saveCount).toBeGreaterThan(0);
+
+      vi.useRealTimers(); // Clean up
+    });
+
+    it('should save position within 50ms after debounce completes (PERFORMANCE REQUIREMENT)', async () => {
+      vi.useFakeTimers(); // Use fake timers only for this test
+
+      await dbService.saveAgentViewLayout({
+        node_id: 'perf-test-node',
+        x: 50,
+        y: 50,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      render(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="agent" />
+        </ReactFlowProvider>
+      );
+
+      // Flush initial effects
+      await act(async () => {
+        await vi.runAllTimersAsync();
+      });
+
+      // Node should be rendered (don't use waitFor with fake timers)
+      expect(screen.getByTestId('node-perf-test-node')).toBeInTheDocument();
+
+      const node = screen.getByTestId('node-perf-test-node');
+
+      // Trigger drag stop
+      const startTime = performance.now();
+      await act(async () => {
+        node.click();
+      });
+
+      // Wait for debounce
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(300);
+      });
+
+      // Check save completed
+      const saved = await dbService.getAgentViewLayout('perf-test-node');
+      expect(saved.x).toBe(60);
+
+      const endTime = performance.now();
+      const totalDuration = endTime - startTime;
+
+      // Total time should be ~300ms (debounce) + <50ms (save)
+      expect(totalDuration).toBeLessThan(400); // 300ms debounce + 50ms save + margin
+
+      vi.useRealTimers(); // Clean up
+    });
+  });
+
+  describe('Layout Persistence with View Switching', () => {
+    it('should persist Agent View layout when switching to Blackboard View', async () => {
+      await dbService.saveAgentViewLayout({
+        node_id: 'agent-1',
+        x: 150,
+        y: 150,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      const { rerender } = render(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="agent" />
+        </ReactFlowProvider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('node-agent-1')).toBeInTheDocument();
+      });
+
+      // Switch to Blackboard View
+      rerender(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="blackboard" />
+        </ReactFlowProvider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('view-mode')).toHaveTextContent('blackboard');
+      });
+
+      // Verify Agent View layout persisted
+      const agentLayout = await dbService.getAgentViewLayout('agent-1');
+      expect(agentLayout).toBeDefined();
+      expect(agentLayout.x).toBe(150);
+      expect(agentLayout.y).toBe(150);
+    });
+
+    it('should persist Blackboard View layout when switching to Agent View', async () => {
+      await dbService.saveBlackboardViewLayout({
+        node_id: 'artifact-1',
+        x: 250,
+        y: 250,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      const { rerender } = render(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="blackboard" />
+        </ReactFlowProvider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('node-artifact-1')).toBeInTheDocument();
+      });
+
+      // Switch to Agent View
+      rerender(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="agent" />
+        </ReactFlowProvider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('view-mode')).toHaveTextContent('agent');
+      });
+
+      // Verify Blackboard View layout persisted
+      const blackboardLayout = await dbService.getBlackboardViewLayout('artifact-1');
+      expect(blackboardLayout).toBeDefined();
+      expect(blackboardLayout.x).toBe(250);
+      expect(blackboardLayout.y).toBe(250);
+    });
+
+    it('should restore correct layout after multiple view switches', async () => {
+      // Setup layouts for both views
+      await dbService.saveAgentViewLayout({
+        node_id: 'agent-1',
+        x: 100,
+        y: 100,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+      await dbService.saveBlackboardViewLayout({
+        node_id: 'artifact-1',
+        x: 200,
+        y: 200,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      // Start with Agent View
+      const { rerender } = render(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="agent" />
+        </ReactFlowProvider>
+      );
+
+      await waitFor(() => {
+        const node = screen.getByTestId('node-agent-1');
+        expect(node).toHaveAttribute('data-x', '100');
+      });
+
+      // Switch to Blackboard View
+      rerender(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="blackboard" />
+        </ReactFlowProvider>
+      );
+
+      await waitFor(() => {
+        const node = screen.getByTestId('node-artifact-1');
+        expect(node).toHaveAttribute('data-x', '200');
+      });
+
+      // Switch back to Agent View
+      rerender(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="agent" />
+        </ReactFlowProvider>
+      );
+
+      await waitFor(() => {
+        const node = screen.getByTestId('node-agent-1');
+        expect(node).toHaveAttribute('data-x', '100'); // Original position restored
+      });
+    });
+  });
+
+  describe('Multiple Windows/Sessions Handling', () => {
+    it('should handle multiple IndexedDB service instances (multiple tabs)', async () => {
+      const dbService1 = new MockIndexedDBService();
+      const dbService2 = new MockIndexedDBService();
+
+      await dbService1.initialize();
+      await dbService2.initialize();
+
+      // Instance 1 saves position
+      await dbService1.saveAgentViewLayout({
+        node_id: 'shared-agent',
+        x: 100,
+        y: 100,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      // In real implementation, IndexedDB would sync across tabs
+      // For this test, we verify each instance maintains its state
+      const layout1 = await dbService1.getAgentViewLayout('shared-agent');
+      expect(layout1).toBeDefined();
+      expect(layout1.x).toBe(100);
+
+      // Instance 2 in real scenario would see the update via IndexedDB
+      // In this mock, it won't, but we verify isolation
+      const layout2 = await dbService2.getAgentViewLayout('shared-agent');
+      expect(layout2).toBeUndefined(); // Mock doesn't share state
+    });
+
+    it('should detect concurrent position updates (last write wins)', async () => {
+      // Both instances try to save position for same node
+      await dbService.saveAgentViewLayout({
+        node_id: 'concurrent-node',
+        x: 100,
+        y: 100,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      // Simulate concurrent update with later timestamp
+      await dbService.saveAgentViewLayout({
+        node_id: 'concurrent-node',
+        x: 200,
+        y: 200,
+        last_updated: '2025-10-03T14:00:01Z', // 1 second later
+      });
+
+      const layout = await dbService.getAgentViewLayout('concurrent-node');
+      expect(layout.x).toBe(200); // Last write wins
+      expect(layout.last_updated).toBe('2025-10-03T14:00:01Z');
+    });
+
+    it('should handle session isolation (different session IDs)', async () => {
+      // Save layouts with different session contexts
+      await dbService.saveAgentViewLayout({
+        node_id: 'session-1-node',
+        x: 100,
+        y: 100,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      await dbService.saveAgentViewLayout({
+        node_id: 'session-2-node',
+        x: 200,
+        y: 200,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      // Verify both layouts exist independently
+      const layout1 = await dbService.getAgentViewLayout('session-1-node');
+      const layout2 = await dbService.getAgentViewLayout('session-2-node');
+
+      expect(layout1.x).toBe(100);
+      expect(layout2.x).toBe(200);
+    });
+  });
+
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle corrupted layout data gracefully', async () => {
+      // Save invalid layout data
+      await dbService.saveAgentViewLayout({
+        node_id: 'corrupted-node',
+        x: null, // Invalid
+        y: undefined, // Invalid
+        last_updated: 'invalid-timestamp',
+      });
+
+      // Should not throw when loading
+      await expect(dbService.getAgentViewLayout('corrupted-node')).resolves.not.toThrow();
+    });
+
+    it('should handle very large number of nodes (stress test)', async () => {
+      // Save 1000 node positions
+      for (let i = 0; i < 1000; i++) {
+        await dbService.saveAgentViewLayout({
+          node_id: `agent-${i}`,
+          x: i * 10,
+          y: 100,
+          last_updated: '2025-10-03T14:00:00Z',
+        });
+      }
+
+      const startTime = performance.now();
+      const layouts = await dbService.getAllAgentViewLayouts();
+      const duration = performance.now() - startTime;
+
+      expect(layouts).toHaveLength(1000);
+      expect(duration).toBeLessThan(500); // Should still load reasonably fast
+    });
+
+    it('should handle rapid view switching without data loss', async () => {
+      await dbService.saveAgentViewLayout({
+        node_id: 'stress-agent',
+        x: 100,
+        y: 100,
+        last_updated: '2025-10-03T14:00:00Z',
+      });
+
+      const { rerender } = render(
+        <ReactFlowProvider>
+          <MockDashboardWithPersistence dbService={dbService} viewMode="agent" />
+        </ReactFlowProvider>
+      );
+
+      // Rapidly switch views 10 times
+      for (let i = 0; i < 10; i++) {
+        const mode = i % 2 === 0 ? 'blackboard' : 'agent';
+        rerender(
+          <ReactFlowProvider>
+            <MockDashboardWithPersistence dbService={dbService} viewMode={mode} />
+          </ReactFlowProvider>
+        );
+        // Small delay to allow effects to run
+        await new Promise(resolve => setTimeout(resolve, 10));
+      }
+
+      // Verify data still intact
+      const layout = await dbService.getAgentViewLayout('stress-agent');
+      expect(layout).toBeDefined();
+      expect(layout.x).toBe(100);
+    });
+  });
+
+  describe('Performance Requirements', () => {
+    it('should load 50 node positions in <100ms (REQUIREMENT)', async () => {
+      // Save 50 positions
+      for (let i = 0; i < 50; i++) {
+        await dbService.saveAgentViewLayout({
+          node_id: `perf-agent-${i}`,
+          x: i * 10,
+          y: 100,
+          last_updated: '2025-10-03T14:00:00Z',
+        });
+      }
+
+      const startTime = performance.now();
+      const layouts = await dbService.getAllAgentViewLayouts();
+      const duration = performance.now() - startTime;
+
+      expect(layouts).toHaveLength(50);
+      expect(duration).toBeLessThan(100); // REQUIREMENT
+    });
+
+    it('should complete full save/load cycle in <150ms', async () => {
+      const position = {
+        node_id: 'cycle-test-node',
+        x: 150,
+        y: 200,
+        last_updated: '2025-10-03T14:00:00Z',
+      };
+
+      const startTime = performance.now();
+
+      // Save
+      await dbService.saveAgentViewLayout(position);
+
+      // Load
+      const loaded = await dbService.getAgentViewLayout('cycle-test-node');
+
+      const duration = performance.now() - startTime;
+
+      expect(loaded).toEqual(position);
+      expect(duration).toBeLessThan(150); // <50ms save + <100ms load
+    });
+  });
+});