@semiont/react-ui 0.2.33-build.78 → 0.2.33-build.80

package/src/features/resource-discovery/components/ResourceDiscoveryPage.tsx

@@ -5,10 +5,11 @@
  * All dependencies passed as props - no Next.js hooks!
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import type { components } from '@semiont/api-client';
 import { getResourceId } from '@semiont/api-client';
-import { useRovingTabIndex, Toolbar } from '@semiont/react-ui';
+import { useRovingTabIndex } from '../../../hooks/useRovingTabIndex';
+import { Toolbar } from '../../../components/Toolbar';
 import { ResourceCard } from './ResourceCard';
 
 type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
@@ -23,11 +24,8 @@ export interface ResourceDiscoveryPageProps {
 
   // UI state props
   theme: 'light' | 'dark';
-  onThemeChange: (theme: 'light' | 'dark') => void;
   showLineNumbers: boolean;
-  onLineNumbersToggle: () => void;
   activePanel: string | null;
-  onPanelToggle: (panel: string) => void;
 
   // Navigation props
   onNavigateToResource: (resourceId: string) => void;
@@ -64,11 +62,8 @@ export function ResourceDiscoveryPage({
   isLoadingRecent,
   isSearching,
   theme,
-  onThemeChange,
   showLineNumbers,
-  onLineNumbersToggle,
   activePanel,
-  onPanelToggle,
   onNavigateToResource,
   onNavigateToCompose,
   translations: t,
@@ -81,20 +76,13 @@ export function ResourceDiscoveryPage({
   const hasSearchQuery = searchQuery.trim() !== '';
   const hasSearchResults = searchDocuments.length > 0;
 
-  // Memoized filtered documents
-  const filteredResources = useMemo(() => {
-    // If we have search results, show them; otherwise show recent
-    // This ensures we show recent docs even when search returns nothing
-    const baseDocuments = hasSearchResults
-      ? searchDocuments
-      : recentDocuments;
-
-    if (!selectedEntityType) return baseDocuments;
-
-    return baseDocuments.filter((resource: ResourceDescriptor) =>
-      resource.entityTypes && resource.entityTypes.includes(selectedEntityType)
-    );
-  }, [recentDocuments, searchDocuments, selectedEntityType, hasSearchResults]);
+  // Filtered documents
+  const baseDocuments = hasSearchResults ? searchDocuments : recentDocuments;
+  const filteredResources = !selectedEntityType
+    ? baseDocuments
+    : baseDocuments.filter((resource: ResourceDescriptor) =>
+        resource.entityTypes && resource.entityTypes.includes(selectedEntityType)
+      );
 
   // Roving tabindex for entity type filters
   const entityFilterRoving = useRovingTabIndex<HTMLDivElement>(
@@ -108,6 +96,10 @@ export function ResourceDiscoveryPage({
     { orientation: 'grid', cols: 2 } // 2 columns on medium+ screens
   );
 
+  // Store navigation callback in ref to avoid re-creating openResource
+  const onNavigateToResourceRef = useRef(onNavigateToResource);
+  onNavigateToResourceRef.current = onNavigateToResource;
+
   // Memoized callbacks
   const handleEntityTypeFilter = useCallback((entityType: string) => {
     setSelectedEntityType(entityType);
@@ -116,9 +108,9 @@ export function ResourceDiscoveryPage({
   const openResource = useCallback((resource: ResourceDescriptor) => {
     const resourceId = getResourceId(resource);
     if (resourceId) {
-      onNavigateToResource(resourceId);
+      onNavigateToResourceRef.current(resourceId);
     }
-  }, [onNavigateToResource]);
+  }, []);
 
   const handleSearchSubmit = useCallback((e: React.FormEvent) => {
     e.preventDefault();
@@ -274,16 +266,13 @@ export function ResourceDiscoveryPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          onThemeChange={onThemeChange}
           showLineNumbers={showLineNumbers}
-          onLineNumbersToggle={onLineNumbersToggle}
         />
 
         {/* Toolbar - Always visible on the right */}
         <Toolbar
           context="simple"
           activePanel={activePanel}
-          onPanelToggle={onPanelToggle}
         />
       </div>
     </div>

package/src/features/resource-viewer/__tests__/AnnotationDeletionIntegration.test.tsx

@@ -0,0 +1,231 @@
+/**
+ * Layer 3: Feature Integration Test - Annotation Deletion Flow Architecture
+ *
+ * Tests the COMPLETE annotation deletion flow with real component composition:
+ * - EventBusProvider (REAL)
+ * - ApiClientProvider (REAL, with MOCKED client)
+ * - useAnnotationFlow (REAL)
+ * - useEventOperations (REAL)
+ * - useEventSubscriptions (REAL)
+ *
+ * This test focuses on ARCHITECTURE and EVENT WIRING:
+ * - Verifies deletion API called exactly ONCE (catches duplicate subscriptions)
+ * - Tests event propagation through the event bus
+ * - Validates success/failure event emissions
+ * - Ensures auth token is passed correctly
+ *
+ * CRITICAL: This test prevents regressions where:
+ * - Multiple deletion paths exist (event-driven vs direct)
+ * - useEventOperations not called in useAnnotationFlow
+ * - Auth token missing from API calls (401 errors)
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import { act } from 'react';
+import { useAnnotationFlow } from '../../../hooks/useAnnotationFlow';
+import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { ApiClientProvider } from '../../../contexts/ApiClientContext';
+import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
+import { SemiontApiClient, resourceUri, accessToken } from '@semiont/api-client';
+
+describe('Annotation Deletion - Feature Integration', () => {
+  let deleteAnnotationSpy: ReturnType<typeof vi.fn>;
+  const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+  const testToken = 'test-token-123';
+  const testBaseUrl = 'http://localhost:4000';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    resetEventBusForTesting();
+
+    // Mock the deleteAnnotation method on SemiontApiClient prototype
+    deleteAnnotationSpy = vi.fn().mockResolvedValue({ success: true });
+    vi.spyOn(SemiontApiClient.prototype, 'deleteAnnotation').mockImplementation(deleteAnnotationSpy);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  /**
+   * Helper to render the annotation flow with real providers
+   */
+  function renderAnnotationFlow() {
+    let eventBusInstance: ReturnType<typeof useEventBus> | null = null;
+
+    function TestComponent() {
+      eventBusInstance = useEventBus();
+      useAnnotationFlow(testUri);
+      return null;
+    }
+
+    render(
+      <AuthTokenProvider token={testToken}>
+        <EventBusProvider>
+          <ApiClientProvider baseUrl={testBaseUrl}>
+            <TestComponent />
+          </ApiClientProvider>
+        </EventBusProvider>
+      </AuthTokenProvider>
+    );
+
+    return {
+      emitDelete: (annotationId: string) => {
+        act(() => {
+          eventBusInstance!.emit('annotation:delete', { annotationId });
+        });
+      },
+      eventBus: eventBusInstance!,
+    };
+  }
+
+  it('should call deleteAnnotation API exactly ONCE when annotation:delete event is emitted', async () => {
+    const { emitDelete } = renderAnnotationFlow();
+    const annotationId = 'annotation-123';
+
+    // Trigger deletion via event bus (how UI triggers it)
+    emitDelete(annotationId);
+
+    // CRITICAL ASSERTION: API called exactly once (not twice!)
+    // This would FAIL if there were competing deletion paths
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalledTimes(1);
+    });
+
+    // Verify correct parameters (annotationUri constructed from ID)
+    expect(deleteAnnotationSpy).toHaveBeenCalledWith(
+      expect.stringContaining(annotationId),
+      expect.objectContaining({
+        auth: accessToken(testToken),
+      })
+    );
+  });
+
+  it('should pass auth token to API call (prevents 401 errors)', async () => {
+    const { emitDelete } = renderAnnotationFlow();
+
+    emitDelete('annotation-456');
+
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalled();
+    });
+
+    // CRITICAL: Auth token must be present
+    const callArgs = deleteAnnotationSpy.mock.calls[0];
+    expect(callArgs[1]).toHaveProperty('auth');
+    expect(callArgs[1].auth).toBe(accessToken(testToken));
+  });
+
+  it('should emit annotation:deleted event on successful deletion', async () => {
+    const { emitDelete, eventBus } = renderAnnotationFlow();
+    const deletedListener = vi.fn();
+
+    // Subscribe to success event
+    eventBus.on('annotation:deleted', deletedListener);
+
+    emitDelete('annotation-789');
+
+    // Wait for API call to complete
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalled();
+    });
+
+    // Verify success event was emitted
+    await waitFor(() => {
+      expect(deletedListener).toHaveBeenCalledWith({
+        annotationId: 'annotation-789',
+      });
+    });
+  });
+
+  it('should emit annotation:delete-failed event on API error', async () => {
+    // Make API call fail
+    deleteAnnotationSpy.mockRejectedValue(new Error('Network error'));
+
+    const { emitDelete, eventBus } = renderAnnotationFlow();
+    const failedListener = vi.fn();
+
+    // Subscribe to failure event
+    eventBus.on('annotation:delete-failed', failedListener);
+
+    emitDelete('annotation-error');
+
+    // Wait for API call to be attempted
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalled();
+    });
+
+    // Verify failure event was emitted
+    await waitFor(() => {
+      expect(failedListener).toHaveBeenCalledWith({
+        error: expect.any(Error),
+      });
+    });
+  });
+
+  it('should handle multiple deletions in sequence without duplicate API calls', async () => {
+    const { emitDelete } = renderAnnotationFlow();
+
+    // Delete first annotation
+    emitDelete('annotation-1');
+
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalledTimes(1);
+    });
+
+    // Delete second annotation
+    emitDelete('annotation-2');
+
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalledTimes(2);
+    });
+
+    // Verify each call had correct annotation ID
+    expect(deleteAnnotationSpy.mock.calls[0][0]).toContain('annotation-1');
+    expect(deleteAnnotationSpy.mock.calls[1][0]).toContain('annotation-2');
+  });
+
+  it('ARCHITECTURE: useEventOperations is called in useAnnotationFlow (not elsewhere)', async () => {
+    /**
+     * This test validates that there's only ONE event-driven deletion path:
+     * - useAnnotationFlow calls useEventOperations
+     * - useEventOperations subscribes to annotation:delete
+     * - No other component/hook subscribes to annotation:delete
+     *
+     * If this test fails, it means either:
+     * 1. useEventOperations removed from useAnnotationFlow (CRITICAL BUG)
+     * 2. Duplicate subscription added elsewhere (ARCHITECTURE VIOLATION)
+     */
+
+    const { emitDelete } = renderAnnotationFlow();
+
+    emitDelete('architecture-test');
+
+    // Single API call = single subscription = correct architecture
+    await waitFor(() => {
+      expect(deleteAnnotationSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('REGRESSION: No direct deleteAnnotation function in ResourceAnnotationsContext', () => {
+    /**
+     * This test prevents regression to the old pattern where
+     * ResourceAnnotationsContext had a deleteAnnotation function
+     * that bypassed the event bus.
+     *
+     * The correct pattern is event-driven only:
+     * - UI emits annotation:delete event
+     * - useEventOperations handles it
+     * - No direct function calls
+     */
+
+    // This would fail to compile if deleteAnnotation was added back to context
+    // Type-level enforcement via TypeScript
+    const { emitDelete } = renderAnnotationFlow();
+    emitDelete('regression-test');
+
+    // Deletion still works via events
+    expect(deleteAnnotationSpy).toHaveBeenCalled();
+  });
+});

package/src/features/resource-viewer/__tests__/DetectionFlowBug.test.tsx

@@ -0,0 +1,234 @@
+/**
+ * FAILING TEST: Reproduces the bug where detection events fire but state doesn't update
+ *
+ * Based on console logs from production:
+ * ✅ detection:start emitted
+ * ✅ detection:progress emitted
+ * ❌ detectingMotivation remains null
+ * ❌ detectionProgress remains null
+ *
+ * UPDATED: Now tests useDetectionFlow hook instead of DetectionFlowContainer
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { act } from 'react';
+import { useDetectionFlow } from '../../../hooks/useDetectionFlow';
+import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { ApiClientProvider } from '../../../contexts/ApiClientContext';
+import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
+import { SSEClient } from '@semiont/api-client';
+
+describe('REPRODUCING BUG: Detection state not updating', () => {
+  beforeEach(() => {
+    resetEventBusForTesting();
+    vi.clearAllMocks();
+
+    // Minimal mock - SSE streams not needed for this test
+    vi.spyOn(SSEClient.prototype, 'detectAnnotations').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+    vi.spyOn(SSEClient.prototype, 'detectHighlights').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+    vi.spyOn(SSEClient.prototype, 'detectComments').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+    vi.spyOn(SSEClient.prototype, 'detectAssessments').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('SHOULD update state when detection:start event is emitted', async () => {
+    let eventBusInstance: any;
+    let currentState: any;
+
+    // Component to capture EventBus and hook state
+    function TestComponent() {
+      eventBusInstance = useEventBus();
+      const state = useDetectionFlow('http://localhost:8080/resources/test' as any);
+      currentState = state;
+
+      console.log('[TEST] useDetectionFlow state:', {
+        detectingMotivation: state.detectingMotivation,
+        detectionProgress: state.detectionProgress,
+      });
+
+      return (
+        <div>
+          <div data-testid="detecting">{state.detectingMotivation || 'null'}</div>
+          <div data-testid="progress">{state.detectionProgress?.message || 'null'}</div>
+        </div>
+      );
+    }
+
+    render(
+      <EventBusProvider>
+        <AuthTokenProvider token={null}>
+          <ApiClientProvider baseUrl="http://localhost:4000">
+            <TestComponent />
+          </ApiClientProvider>
+        </AuthTokenProvider>
+      </EventBusProvider>
+    );
+
+    // Initial state should be null
+    expect(screen.getByTestId('detecting')).toHaveTextContent('null');
+    expect(screen.getByTestId('progress')).toHaveTextContent('null');
+
+    console.log('[TEST] Emitting detection:start event...');
+
+    // Emit detection:start event (exactly like production)
+    act(() => {
+      eventBusInstance.emit('detection:start', {
+        motivation: 'linking',
+        options: { entityTypes: ['Location'] }
+      });
+    });
+
+    console.log('[TEST] After detection:start, checking state...');
+
+    // THIS SHOULD PASS but currently FAILS
+    await waitFor(() => {
+      expect(screen.getByTestId('detecting')).toHaveTextContent('linking');
+    }, { timeout: 1000 });
+
+    expect(currentState.detectingMotivation).toBe('linking');
+    expect(currentState.detectionProgress).toBeNull(); // Should clear on start
+  });
+
+  it('SHOULD update state when detection:progress event is emitted', async () => {
+    let eventBusInstance: any;
+    let currentState: any;
+
+    function TestComponent() {
+      eventBusInstance = useEventBus();
+      const state = useDetectionFlow('http://localhost:8080/resources/test' as any);
+      currentState = state;
+
+      return (
+        <div>
+          <div data-testid="detecting">{state.detectingMotivation || 'null'}</div>
+          <div data-testid="progress">{state.detectionProgress?.message || 'null'}</div>
+        </div>
+      );
+    }
+
+    render(
+      <EventBusProvider>
+        <AuthTokenProvider token={null}>
+          <ApiClientProvider baseUrl="http://localhost:4000">
+            <TestComponent />
+          </ApiClientProvider>
+        </AuthTokenProvider>
+      </EventBusProvider>
+    );
+
+    console.log('[TEST] Emitting detection:progress event...');
+
+    // Emit detection:progress event (exactly like production)
+    act(() => {
+      eventBusInstance.emit('detection:progress', {
+        status: 'started',
+        resourceId: 'test',
+        totalEntityTypes: 1,
+        processedEntityTypes: 0,
+        message: 'Starting entity detection...'
+      });
+    });
+
+    console.log('[TEST] After detection:progress, checking state...');
+
+    // THIS SHOULD PASS but currently FAILS
+    await waitFor(() => {
+      expect(screen.getByTestId('progress')).toHaveTextContent('Starting entity detection...');
+    }, { timeout: 1000 });
+
+    expect(currentState.detectionProgress).toMatchObject({
+      status: 'started',
+      message: 'Starting entity detection...'
+    });
+  });
+
+  it('SHOULD show EXACTLY the production bug', async () => {
+    let eventBusInstance: any;
+    const stateSnapshots: any[] = [];
+
+    function TestComponent() {
+      eventBusInstance = useEventBus();
+      const state = useDetectionFlow('http://localhost:8080/resources/f45fd44f9cb0b0fe1b7980d3d034bc61' as any);
+
+      stateSnapshots.push({
+        detectingMotivation: state.detectingMotivation,
+        detectionProgress: state.detectionProgress,
+      });
+
+      return (
+        <div>
+          <div data-testid="detecting">{state.detectingMotivation || 'null'}</div>
+          <div data-testid="progress">{state.detectionProgress?.message || 'null'}</div>
+        </div>
+      );
+    }
+
+    render(
+      <EventBusProvider>
+        <AuthTokenProvider token={null}>
+          <ApiClientProvider baseUrl="http://localhost:4000">
+            <TestComponent />
+          </ApiClientProvider>
+        </AuthTokenProvider>
+      </EventBusProvider>
+    );
+
+    console.log('\n=== REPRODUCING PRODUCTION BUG ===');
+    console.log('Initial state:', stateSnapshots[stateSnapshots.length - 1]);
+
+    // Exactly like production logs
+    act(() => {
+      console.log('[EventBus] emit: detection:start {motivation: "linking", options: {...}}');
+      eventBusInstance.emit('detection:start', {
+        motivation: 'linking',
+        options: { entityTypes: ['Location'] }
+      });
+    });
+
+    console.log('After detection:start:', stateSnapshots[stateSnapshots.length - 1]);
+
+    act(() => {
+      console.log('[EventBus] emit: detection:progress {status: "started", ...}');
+      eventBusInstance.emit('detection:progress', {
+        status: 'started',
+        resourceId: 'f45fd44f9cb0b0fe1b7980d3d034bc61',
+        totalEntityTypes: 1,
+        processedEntityTypes: 0,
+        message: 'Starting entity detection...'
+      });
+    });
+
+    console.log('After detection:progress:', stateSnapshots[stateSnapshots.length - 1]);
+
+    act(() => {
+      console.log('[EventBus] emit: detection:progress {status: "scanning", ...}');
+      eventBusInstance.emit('detection:progress', {
+        status: 'scanning',
+        resourceId: 'f45fd44f9cb0b0fe1b7980d3d034bc61',
+        currentEntityType: 'Location',
+        totalEntityTypes: 1,
+        processedEntityTypes: 1,
+        message: 'Scanning for Location...'
+      });
+    });
+
+    console.log('After second detection:progress:', stateSnapshots[stateSnapshots.length - 1]);
+    console.log('=== END REPRODUCTION ===\n');
+
+    // THIS IS THE BUG: Events fire but state never updates
+    // Production logs show: detectingMotivation: null, detectionProgress: null
+    // Even though events were emitted
+    await waitFor(() => {
+      const currentSnapshot = stateSnapshots[stateSnapshots.length - 1];
+      console.log('Final state check:', currentSnapshot);
+
+      // These SHOULD pass but will FAIL if bug is present
+      expect(currentSnapshot.detectingMotivation).toBe('linking');
+      expect(currentSnapshot.detectionProgress?.message).toBe('Scanning for Location...');
+    }, { timeout: 2000 });
+  });
+});